/* Elate Link identity layer: a practical Bay Area project studio, not a SaaS template. */
.home main { position: relative; }
.home main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .24; background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgb(22 22 22 / .018) 5px 6px); }

.el-eyebrow { letter-spacing: .1em; }
.el-eyebrow::before { width: 2.25rem; height: 1px; box-shadow: 8px 3px 0 -1px var(--el-gold-light); }
.el-section-heading { position: relative; }
.el-section-heading::after { content: ""; display: block; width: clamp(4rem, 9vw, 8rem); height: 7px; margin-top: 1.5rem; background: linear-gradient(176deg, transparent 38%, var(--el-gold) 42% 55%, transparent 59%); opacity: .75; }
.el-section-heading--center::after { margin-inline: auto; }

.el-button { position: relative; overflow: hidden; box-shadow: none; }
.el-button::after { content: ""; position: absolute; left: -120%; bottom: 0; width: 100%; height: 2px; background: currentColor; transition: left 220ms ease; }
.el-button:hover::after { left: 0; }
.el-text-link { position: relative; border: 0; }
.el-text-link::after { content: ""; position: absolute; right: 0; bottom: -.25rem; left: 0; height: 1px; background: var(--el-gold); transform: scaleX(.28); transform-origin: left; transition: transform 180ms ease; }
.el-text-link:hover::after { transform: scaleX(1); }

.el-home-hero { position: relative; background: var(--el-gray-50); }
.el-home-hero::before { content: "EL / BAY AREA / CREATIVE WORK"; position: absolute; right: -1.5rem; bottom: 1.1rem; color: rgb(22 22 22 / .09); font: 800 clamp(.65rem, 1vw, .85rem)/1 var(--el-font-body); letter-spacing: .23em; transform: rotate(-90deg); transform-origin: right bottom; }
.el-home-hero::after { content: ""; position: absolute; top: 2.25rem; left: max(1rem, calc((100vw - var(--el-container)) / 2)); width: clamp(2.5rem, 5vw, 5rem); height: clamp(2.5rem, 5vw, 5rem); border-top: 1px solid var(--el-silver); border-left: 1px solid var(--el-silver); pointer-events: none; }
.el-studio-board::after { content: "PROJECT BOARD / replace with real work"; position: absolute; right: 1rem; bottom: -1.25rem; color: var(--el-gray-500); font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.el-project-tile { border-radius: 0; }
.el-studio-board__note { box-shadow: 0 5px 14px rgb(22 22 22 / .12); }

.el-trust-strip { border-top: 1px solid #393733; border-bottom: 1px solid #393733; background: #1b1a18; }
.el-trust-strip span::before { width: .35rem; height: .35rem; border-radius: 0; transform: rotate(45deg); }

.el-intro { background: var(--el-white); }
.el-intro__grid { position: relative; }
.el-intro__grid::before { content: "01"; position: absolute; top: -.75rem; right: 0; color: var(--el-gray-200); font: 800 clamp(3rem, 9vw, 7rem)/1 var(--el-font-display); }
.el-studio-note { max-width: 33rem; margin-top: 2rem; padding: 1rem 1.25rem 1rem 1.5rem; border-left: 3px solid var(--el-gold); background: #f4f2ec; color: var(--el-black-soft); font: 650 .9rem/1.55 var(--el-font-display); transform: rotate(-.5deg); }

.el-section--warm { background-color: #f3f2ee; background-image: linear-gradient(90deg, rgb(22 22 22 / .025) 1px, transparent 1px), linear-gradient(rgb(22 22 22 / .025) 1px, transparent 1px); background-size: 24px 24px; }
.el-services-grid { counter-reset: service; }
.el-service-card { counter-increment: service; min-height: 18rem; border: 0; border-top: 2px solid var(--el-black); border-radius: 0; box-shadow: none; background: rgb(255 255 255 / .86); }
.el-service-card::before { content: "0" counter(service); position: absolute; top: 1rem; right: 1.25rem; color: var(--el-gold-dark); font-size: .65rem; font-weight: 850; letter-spacing: .1em; }
.el-service-card::after { border-width: .55rem; border-color: var(--el-gold-light); opacity: .55; }
.el-service-card__icon { border: 1px solid var(--el-silver); border-radius: 50%; background: var(--el-white); }
.el-service-card a::after { content: ""; position: absolute; right: 100%; bottom: -.2rem; left: 0; height: 1px; background: var(--el-gold); transition: right var(--el-transition); }
.el-service-card:hover a::after { right: 0; }

.el-help { position: relative; background: #181715; }
.el-help::before { content: ""; position: absolute; inset: 1.2rem; pointer-events: none; border: 1px solid rgb(181 138 53 / .18); }
.el-help-picker__answer { position: relative; border: 1px solid #44413a; border-radius: .25rem; background: #292722; box-shadow: 12px 12px 0 #0e0e0d; }
.el-help-picker__answer::after { content: "EL"; position: absolute; right: 1.25rem; bottom: .85rem; color: rgb(234 217 173 / .16); font: 850 3.5rem/1 var(--el-font-display); }
.el-problem span { border-radius: .25rem; }

.el-work { position: relative; overflow: hidden; background: #eef0f1; }
.el-work::before { content: ""; position: absolute; top: 0; right: 4vw; width: 1px; height: 100%; background: rgb(22 22 22 / .07); }
.el-work::after { content: "REAL WORK GOES HERE"; position: absolute; top: 6rem; right: 1.1vw; color: rgb(22 22 22 / .22); font-size: .56rem; font-weight: 850; letter-spacing: .16em; writing-mode: vertical-rl; }
.el-work__filters span { border-radius: .2rem; background: rgb(255 255 255 / .5); }
.el-work__filters .is-active { position: relative; background: var(--el-black); }
.el-work__filters .is-active::after { content: ""; position: absolute; right: -.35rem; bottom: -.3rem; left: .35rem; height: 1px; background: var(--el-gold); }
.el-work-item { position: relative; }
.el-work-placeholder { position: relative; border: 10px solid var(--el-white); border-radius: .15rem; box-shadow: 0 14px 35px rgb(22 22 22 / .12); }
.el-work-placeholder::before, .el-work-placeholder::after { content: ""; position: absolute; width: 1rem; height: 1rem; opacity: .55; }
.el-work-placeholder::before { top: -6px; left: -6px; border-top: 1px solid var(--el-black); border-left: 1px solid var(--el-black); }
.el-work-placeholder::after { right: -6px; bottom: -6px; border-right: 1px solid var(--el-black); border-bottom: 1px solid var(--el-black); }
.el-work-item figcaption { display: flex; align-items: center; gap: .5rem; letter-spacing: .1em; }
.el-work-item figcaption::before { content: ""; width: 1.5rem; height: 1px; background: var(--el-gold); }

.el-products { position: relative; background: #eee8db; }
.el-products::before { content: "MADE HERE / MADE FOR YOU"; position: absolute; top: 2rem; left: var(--el-gutter); color: rgb(22 22 22 / .14); font-size: .6rem; font-weight: 850; letter-spacing: .18em; }
.el-product-shape { border-radius: .1rem; }
.el-product-shape--mug { border-radius: .35rem 1.25rem 1.25rem .35rem; }
.el-product-list li { border-radius: .2rem; background: rgb(255 255 255 / .35); }

.el-event-poster { position: relative; border-radius: .15rem; box-shadow: 18px 18px 0 #090909, 20px 20px 0 var(--el-gold); }
.el-event-poster::before { content: "EVENT POSTER / PHOTO SLOT"; position: absolute; top: 1rem; right: 1rem; padding: .3rem .45rem; background: var(--el-white); color: var(--el-black); font-size: .55rem; font-weight: 850; letter-spacing: .1em; }

.el-why .el-section-heading { text-align: left; }
.el-why-grid { counter-reset: reason; }
.el-why-item { counter-increment: reason; position: relative; }
.el-why-item::after { content: "0" counter(reason); position: absolute; top: 1.5rem; right: 1.25rem; color: var(--el-gray-200); font: 800 2.2rem/1 var(--el-font-display); }
.el-why-item > span { border: 1px solid var(--el-gold-light); border-radius: .25rem; background: transparent; }

.el-testimonial-placeholder { position: relative; border-radius: .2rem; background: #f9f8f4; }
.el-testimonial-placeholder::after { content: "Awaiting approved client words"; position: absolute; right: 1rem; bottom: .75rem; color: #aaa59c; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.el-local__mark { border-radius: .15rem; box-shadow: 12px 12px 0 var(--el-black); }
.el-final-cta__inner { position: relative; overflow: hidden; border: 1px solid #393733; border-radius: .2rem; }
.el-final-cta__inner::after { content: ""; position: absolute; right: -5rem; bottom: -5rem; width: 12rem; height: 12rem; border: 1px solid rgb(234 217 173 / .2); border-radius: 48% 52% 42% 58%; }

.el-site-footer { border-top: 3px solid var(--el-gold); }
.el-site-footer__location::before { content: "⌖ "; }

[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 420ms ease, transform 420ms ease; }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

@media (min-width: 64rem) {
  .el-work-item:nth-child(1) { transform: rotate(-.45deg); }
  .el-work-item:nth-child(2) { transform: translateY(1.35rem) rotate(.55deg); }
  .el-work-item:nth-child(3) { transform: translateY(-.65rem) rotate(.35deg); }
  .el-work-item:nth-child(4) { transform: rotate(-.35deg); }
  .el-service-card:nth-child(even) { transform: translateY(.65rem); }
}

@media (max-width: 47.99rem) {
  .el-home-hero::before, .el-work::after { display: none; }
  .el-help::before { inset: .5rem; }
  .el-event-poster { box-shadow: 8px 8px 0 #090909, 10px 10px 0 var(--el-gold); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .el-button::after, .el-text-link::after { transition: none; }
}