/* ===========================================================================
   ESTELA — components. Reads ONLY var(--token). No design literals here.
   =========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;
  color:var(--body);background:var(--bg);
  font-weight:var(--w-reg);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:4px}

/* ---- typography ---------------------------------------------------------- */
h1,h2,h3,h4,.display,.h2,.h3,.h4{
  font-family:var(--font-display);color:var(--ink);
  letter-spacing:var(--tracking-tight);line-height:1.12;font-weight:var(--w-med);
}
.display,h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-0.035em}
.h2,h2{font-size:var(--fs-h2)}
.h3,h3{font-size:var(--fs-h3)}
.h4,h4{font-size:var(--fs-h4);letter-spacing:-0.02em}
p{color:var(--body)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink);font-weight:var(--w-reg);letter-spacing:-0.01em}
strong{color:var(--ink);font-weight:var(--w-semi)}
.accent{color:var(--accent-strong)}
.is-dark .accent{color:var(--accent)}

/* ---- layout -------------------------------------------------------------- */
.section{background:var(--bg);color:var(--body);position:relative}
.section-inner{max-width:var(--container);margin-inline:auto;padding:var(--section-y) var(--gutter)}
.section--tight .section-inner{padding-block:clamp(3rem,6vw,4.5rem)}
.narrow{max-width:var(--container-narrow);margin-inline:auto}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
@media(min-width:760px){.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}}
.between{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

/* eyebrow — uppercase label + numeric index, no hardcoded glyph */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);
  text-transform:var(--eyebrow-transform);color:var(--body);font-weight:var(--w-semi);
}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--accent-strong)}
.is-dark .eyebrow::before{background:var(--accent)}
.section-head{max-width:46rem}
.section-head .lead{margin-top:1.1rem}

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.95rem 1.6rem;border-radius:var(--radius-pill);
  font-weight:var(--w-med);font-size:1rem;letter-spacing:-0.01em;cursor:pointer;border:var(--bw) solid transparent;
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{transform:var(--hover-btn);background:var(--accent-strong)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.btn--ghost:hover{transform:var(--hover-btn);border-color:var(--ink)}
.is-dark .btn--ghost{color:var(--ink-dark);border-color:var(--border-dark)}
.is-dark .btn--ghost:hover{border-color:var(--ink-dark)}
.btn .arr{transition:transform var(--dur-fast) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.textlink{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);font-weight:var(--w-med);border-bottom:1px solid var(--border);padding-bottom:2px}
.textlink .arr{transition:transform var(--dur-fast) var(--ease)}
.textlink:hover{border-color:var(--accent-strong)}
.textlink:hover .arr{transform:translateX(3px)}

/* ---- nav ----------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:var(--bw) solid transparent;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.nav.is-stuck{border-color:var(--border)}
.nav-inner{max-width:var(--container);margin-inline:auto;padding:.85rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{font-family:var(--font-display);font-weight:var(--w-semi);font-size:1.4rem;letter-spacing:-0.03em;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.nav-logo .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);display:inline-block}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{padding:.55rem .85rem;border-radius:var(--radius-pill);font-weight:var(--w-med);color:var(--ink);transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav-links a:hover{background:var(--surface-alt)}
.nav-links a[aria-current="page"]{color:var(--accent-strong)}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.nav-burger{display:none;width:2.75rem;height:2.75rem;border:var(--bw) solid var(--border);border-radius:var(--radius-pill);background:transparent;cursor:pointer;position:relative}
.nav-burger span{position:absolute;left:50%;top:50%;width:18px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.nav-burger span:nth-child(1){margin-top:-5px}
.nav-burger span:nth-child(3){margin-top:5px}
.nav.is-open .nav-burger span:nth-child(1){margin-top:0;transform:translate(-50%,-50%) rotate(45deg)}
.nav.is-open .nav-burger span:nth-child(2){opacity:0}
.nav.is-open .nav-burger span:nth-child(3){margin-top:0;transform:translate(-50%,-50%) rotate(-45deg)}

/* ---- hero ---------------------------------------------------------------- */
.hero{background:var(--bg)}
.hero-inner{max-width:var(--container);margin-inline:auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) var(--section-y)}
.hero-top{display:grid;gap:1.5rem;max-width:60rem}
.hero h1{margin:.4rem 0 0}
.hero-sub{max-width:34rem;margin-top:.4rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.6rem}
.hero-media{margin-top:clamp(2rem,4vw,3rem);border-radius:var(--radius-lg);overflow:hidden;position:relative;aspect-ratio:16/8;background:var(--surface-alt)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;left:1.25rem;bottom:1.25rem;right:1.25rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.hero-chip{background:color-mix(in srgb,#131313 55%,transparent);color:#fff;backdrop-filter:blur(6px);padding:.7rem 1.1rem;border-radius:var(--radius-md);font-size:.9rem}
.hero-stats{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem);padding-top:2rem;border-top:var(--bw) solid var(--border)}
.stat .num{font-family:var(--font-display);font-size:clamp(2rem,3.5vw,2.75rem);color:var(--ink);font-weight:var(--w-med);letter-spacing:-0.03em;line-height:1}
.stat .lbl{margin-top:.5rem;font-size:.95rem}

/* ---- media card / project cards ----------------------------------------- */
.media{overflow:hidden;border-radius:var(--radius-md);background:var(--surface-alt)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.media:hover img{transform:var(--hover-img)}

.pcard{display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--card);border:var(--bw) solid var(--border);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pcard:hover{transform:var(--hover-card);border-color:color-mix(in srgb,var(--accent-strong) 50%,var(--border))}
.pcard-media{aspect-ratio:4/3;overflow:hidden;background:var(--surface-alt)}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.pcard:hover .pcard-media img{transform:var(--hover-img)}
.pcard-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem}
.pcard-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.tag{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--body);border:var(--bw) solid var(--border);border-radius:var(--radius-pill);padding:.25rem .7rem;font-weight:var(--w-semi)}
.pcard-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--body);font-size:.9rem;margin-top:.4rem}
.pcard h3{font-size:var(--fs-h4)}

/* featured slider */
.slider{position:relative}
.slider-track{display:flex;gap:clamp(1rem,2vw,1.5rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:1rem;-ms-overflow-style:none;scrollbar-width:none}
.slider-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(88%,40rem);scroll-snap-align:start}
.slide .media{aspect-ratio:16/10}
.slide-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-top:1.1rem}
.slide-cap h3{font-size:var(--fs-h4)}
.slider-nav{display:flex;gap:.6rem;margin-top:1.5rem}
.snav{width:3rem;height:3rem;border-radius:var(--radius-pill);border:var(--bw) solid var(--border);background:var(--bg);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.snav:hover{border-color:var(--ink);transform:var(--hover-btn)}
.is-dark .snav{background:transparent;color:var(--ink-dark)}

/* ---- services ------------------------------------------------------------ */
.svc{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:start;padding:1.8rem 0;border-top:var(--bw) solid var(--border)}
.svc:last-child{border-bottom:var(--bw) solid var(--border)}
.svc-idx{font-family:var(--font-display);color:var(--accent-strong);font-weight:var(--w-med);font-size:1.05rem;letter-spacing:.02em}
.is-dark .svc-idx{color:var(--accent)}
.svc-main{display:grid;gap:1rem;grid-template-columns:1fr;align-items:start}
@media(min-width:860px){.svc-main{grid-template-columns:18rem 1fr 2.5rem;gap:2rem;align-items:center}}
.svc h3{font-size:var(--fs-h3)}
.svc-bullets{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.svc .arr-cell{justify-self:end;color:var(--body)}

.card-soft{background:var(--surface-alt);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.25rem)}
.icon-badge{width:3.25rem;height:3.25rem;border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 22%,transparent);display:grid;place-items:center;color:var(--accent-ink);margin-bottom:1.1rem}
.is-dark .icon-badge{color:var(--accent)}

/* ---- values / split band ------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:860px){.split{grid-template-columns:1.05fr .95fr}.split--rev .split-media{order:-1}}
.split-media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--surface-alt)}
.split-media img{width:100%;height:100%;object-fit:cover}
.checklist{display:grid;gap:.9rem;margin-top:1.6rem}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start}
.checklist .ck{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:.8rem;margin-top:.15rem}

/* ---- blog cards ---------------------------------------------------------- */
.bcard{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:var(--card);border:var(--bw) solid var(--border);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);height:100%}
.bcard:hover{transform:var(--hover-card);border-color:color-mix(in srgb,var(--accent-strong) 50%,var(--border))}
.bcard-media{aspect-ratio:16/10;overflow:hidden;background:var(--surface-alt)}
.bcard-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.bcard:hover .bcard-media img{transform:var(--hover-img)}
.bcard-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.bmeta{display:flex;gap:.7rem;align-items:center;color:var(--body);font-size:.85rem}
.bmeta .cat{color:var(--accent-strong);font-weight:var(--w-semi);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
.is-dark .bmeta .cat{color:var(--accent)}
.bcard h3{font-size:1.3rem;letter-spacing:-0.02em}
.bcard .more{margin-top:auto}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{border-top:var(--bw) solid var(--border)}
.faq-item{border-bottom:var(--bw) solid var(--border)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.4rem 0;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;color:var(--ink);font-family:var(--font-display);font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:var(--w-med);letter-spacing:-0.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .pm{flex:0 0 auto;width:1.6rem;height:1.6rem;position:relative}
.faq-item .pm::before,.faq-item .pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent-strong);transition:transform var(--dur-fast) var(--ease)}
.is-dark .faq-item .pm::before,.is-dark .faq-item .pm::after{background:var(--accent)}
.faq-item .pm::before{width:14px;height:1.6px;transform:translate(-50%,-50%)}
.faq-item .pm::after{width:1.6px;height:14px;transform:translate(-50%,-50%)}
.faq-item[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease)}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-body>div{overflow:hidden;min-height:0}
.faq-body p{padding-bottom:1.4rem;max-width:50rem}

/* ---- CTA band ------------------------------------------------------------ */
.cta{border-radius:var(--radius-lg);overflow:hidden}
.cta-inner{max-width:var(--container);margin-inline:auto;padding:var(--section-y) var(--gutter);text-align:center;display:grid;gap:1.4rem;justify-items:center}
.cta h2{max-width:18ch}
.cta .lead{max-width:46ch}

/* ---- footer -------------------------------------------------------------- */
.footer{background:var(--bg);color:var(--body)}
.footer-inner{max-width:var(--container);margin-inline:auto;padding:clamp(3.5rem,7vw,5.5rem) var(--gutter) 2.5rem}
.footer-top{display:grid;gap:2.5rem}
@media(min-width:860px){.footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand .nav-logo{font-size:1.6rem}
.footer-brand p{margin-top:1rem;max-width:24rem}
.footer-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--body);margin-bottom:1rem;font-weight:var(--w-semi)}
.footer-col a{display:block;padding:.35rem 0;color:var(--ink);transition:color var(--dur-fast) var(--ease)}
.is-dark .footer-col a{color:var(--ink-dark)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.6rem;border-top:var(--bw) solid var(--border);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem}
.footer-bottom a:hover{color:var(--accent)}
.footer-wordmark{font-family:var(--font-display);font-weight:var(--w-bold);line-height:.82;letter-spacing:-0.04em;color:var(--ink);font-size:clamp(4rem,18vw,15rem);margin-top:clamp(2rem,5vw,3.5rem);opacity:.96}

/* ---- prose (readable blog post / project case study) -------------------- */
.post-hero{max-width:var(--container);margin-inline:auto;padding:clamp(2.5rem,5vw,3.5rem) var(--gutter) 0}
.post-hero .crumbs{font-size:.85rem;color:var(--body);margin-bottom:1.4rem}
.post-hero .crumbs a:hover{color:var(--accent-strong)}
.post-hero h1{max-width:20ch;margin:.6rem 0}
.post-cover{max-width:var(--container);margin:clamp(2rem,4vw,3rem) auto 0;padding-inline:var(--gutter)}
.post-cover .media{aspect-ratio:16/8;border-radius:var(--radius-lg)}
.prose{max-width:var(--container-narrow);margin-inline:auto}
.prose>*+*{margin-top:1.25rem}
.prose h2{font-size:var(--fs-h3);margin-top:2.4rem}
.prose h3{font-size:var(--fs-h4);margin-top:1.8rem}
.prose p,.prose li{color:var(--body);font-size:1.08rem;line-height:1.72}
.prose ul{display:grid;gap:.6rem;padding-left:0}
.prose ul li{display:grid;grid-template-columns:auto 1fr;gap:.7rem}
.prose ul li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--accent-strong);margin-top:.6rem}
.prose blockquote{border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.4rem;margin-block:1.8rem;font-size:1.25rem;line-height:1.5;color:var(--ink);font-weight:var(--w-med);letter-spacing:-0.01em}
.prose figure{margin-block:2rem}
.prose figure .media{aspect-ratio:16/9;border-radius:var(--radius-md)}
.prose figcaption{margin-top:.7rem;font-size:.88rem;color:var(--body)}
.factbar{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);background:var(--surface-alt);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2rem)}
@media(min-width:680px){.factbar{grid-template-columns:repeat(4,1fr)}}
.factbar .num{font-family:var(--font-display);font-size:1.6rem;color:var(--ink);font-weight:var(--w-med);letter-spacing:-0.02em}
.factbar .lbl{font-size:.85rem;margin-top:.3rem}
.post-foot{max-width:var(--container-narrow);margin:clamp(2.5rem,5vw,3.5rem) auto 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;border-top:var(--bw) solid var(--border);padding-top:1.6rem}

/* ---- marquee ------------------------------------------------------------- */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:clamp(2rem,5vw,4rem);align-items:center;animation:marquee var(--marquee-speed) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.5rem);color:var(--body);white-space:nowrap;letter-spacing:-0.02em;display:flex;align-items:center;gap:1rem}
.marquee-item::after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--accent-strong)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- reveal engine (baseline R2: fade-from-left + .15s) ------------------ */
.js [data-reveal]{opacity:0;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:var(--base-delay);will-change:opacity,transform}
.js [data-reveal=left]{transform:translateX(var(--base-x))}
.js [data-reveal=right]{transform:translateX(calc(-1 * var(--base-x)))}
.js [data-reveal=up]{transform:translateY(var(--reveal-shift))}
.js [data-reveal=down]{transform:translateY(calc(-1 * var(--reveal-shift)))}
.js [data-reveal=fade]{transform:none}
.js [data-reveal=scale]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}
.js [data-delay="1"]{transition-delay:calc(var(--base-delay) + 1*var(--stagger))}
.js [data-delay="2"]{transition-delay:calc(var(--base-delay) + 2*var(--stagger))}
.js [data-delay="3"]{transition-delay:calc(var(--base-delay) + 3*var(--stagger))}
.js [data-delay="4"]{transition-delay:calc(var(--base-delay) + 4*var(--stagger))}
.js [data-delay="5"]{transition-delay:calc(var(--base-delay) + 5*var(--stagger))}
.js [data-delay="6"]{transition-delay:calc(var(--base-delay) + 6*var(--stagger))}

/* ---- responsive ---------------------------------------------------------- */
@media(max-width:860px){
  .nav-links,.nav-cta .btn--ghost{display:none}
  .nav-burger{display:block}
  .nav.is-open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:var(--bw) solid var(--border);padding:1rem var(--gutter) 1.5rem;gap:.25rem}
  .nav.is-open .nav-links a{padding:.85rem 1rem}
  .footer-wordmark{font-size:clamp(3rem,22vw,7rem)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .marquee-track{animation:none}
}


.contact-form label{display:grid;gap:.5rem;font-size:.9rem;color:var(--ink);font-weight:var(--w-med)}
.contact-form input,.contact-form textarea{font:inherit;color:var(--ink);background:var(--bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);padding:.85rem 1rem;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent-strong);outline-offset:1px;border-color:transparent}