/* ===================== Tokens (dark theme) ===================== */
:root{
  --white:#ffffff;
  --bg:#080b12;            /* page base — near-black navy */
  --paper:#080b12;         /* alias: base surface */
  --surface:#0e1320;       /* dark navy section */
  --bone:#0e1320;          /* alias: section surface */
  --bone-2:#161d2e;        /* raised card / input / hatch */
  --ink:#05070d;           /* deepest black (hero, process, cta, footer) */
  --ink-2:#121829;
  --text:#eef1f6;          /* primary near-white */
  --muted:#aab3c4;         /* secondary text — AA on dark */
  --muted-2:#7e8799;       /* tertiary */
  --line:#222b3d;          /* subtle border */
  --line-dark:#2b3548;
  --accent:#8ea6d6;        /* steel-blue accent */
  --accent-strong:#abbde2; /* brighter steel for icons/links/focus */
  --accent-light:#9db3dc;  /* steel for ticks on dark */

  --maxw:1240px;
  --pad:clamp(20px,5vw,72px);
  --r:2px;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
}

/* ===================== Reset ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:.005em;color:var(--text)}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:1px}
::selection{background:rgba(142,166,214,.3);color:#fff}

/* ===================== Helpers ===================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{scroll-margin-top:84px}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.section-pad{padding-block:clamp(64px,9vw,128px)}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:16px 28px;border:1px solid transparent;border-radius:var(--r);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--white);color:var(--ink)}
.btn-primary:hover{background:#dde3ee}
.btn-accent{background:var(--white);color:var(--ink)}
.btn-accent:hover{background:#dde3ee}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:var(--text)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ===================== Header / Nav ===================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px var(--pad);
  color:#fff;transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(8,11,18,.82);backdrop-filter:saturate(150%) blur(12px);
  color:var(--text);box-shadow:0 1px 0 var(--line);padding-block:12px;
}
.logo{display:flex;align-items:center;gap:12px;color:inherit}
.logo-mark{width:30px;height:37px;color:inherit;flex:none}
.logo-type{display:flex;flex-direction:column;line-height:1}
.logo-type strong{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.13em;color:#fff}
.logo-type em{
  font-style:normal;font-size:8.5px;letter-spacing:.42em;font-weight:500;
  margin-top:3px;opacity:.85;text-transform:uppercase;
}
/* logo art is black-on-transparent -> always render white on the dark chrome */
.logo-img{height:40px;width:auto;display:block;filter:brightness(0) invert(1)}
.logo-img.img-missing{display:none}
.logo-fallback{display:none;align-items:center;gap:12px}
.logo-img.img-missing ~ .logo-fallback{display:flex}
.footer .logo-img{height:92px}
@media (max-width:560px){.logo-img{height:34px}.footer .logo-img{height:78px}}
.nav{display:flex;align-items:center;gap:34px}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{
  position:relative;font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 0;color:inherit;opacity:.9;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a.current::after{transform:scaleX(1)}
.nav-links a.current{opacity:1}
.nav-cta{font-size:11.5px;padding:12px 22px;border-color:rgba(255,255,255,.45);color:inherit}
.nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff}

.nav-toggle{display:none;background:none;border:0;color:inherit;padding:8px;margin:-8px}
.nav-toggle svg{width:26px;height:26px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ===================== Hero (full-bleed cinematic, scroll-fade) ===================== */
.s-hero{position:relative;width:100%;background:var(--ink)}
.s-hero-sticky{
  position:sticky;top:0;height:100svh;width:100%;
  background:var(--ink);overflow:hidden;color:#fff;display:flex;align-items:flex-end;
}
.s-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;background:var(--ink);
  transform:scale(var(--zoom,1.06));transform-origin:center;will-change:transform;
}
.s-hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 120% at 28% 82%, rgba(5,7,13,.66) 0%, rgba(5,7,13,0) 58%),
    linear-gradient(0deg, rgba(5,7,13,.86) 0%, rgba(5,7,13,.18) 46%, rgba(5,7,13,.50) 100%);
}
.s-hero .hero-inner{
  position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) clamp(56px,8vw,96px);will-change:opacity,transform;
}
.s-hero .eyebrow{color:rgba(255,255,255,.85)}
.s-hero .eyebrow::before{background:var(--accent-light)}
.s-hero h1{
  font-size:clamp(3rem,10vw,7.4rem);font-weight:500;letter-spacing:.005em;
  margin:.28em 0 .3em;max-width:14ch;color:#fff;
}
.hero-sub{font-size:clamp(1rem,1.6vw,1.18rem);max-width:46ch;color:rgba(255,255,255,.9);font-weight:400;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.scroll-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;
  width:34px;height:34px;color:rgba(255,255,255,.7);animation:bob 2.4s var(--ease) infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===================== Stats ===================== */
.stats{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:clamp(38px,5vw,60px) 28px;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:24%;height:52%;width:1px;background:var(--line)}
.stat-num{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stat-label{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stat-sub{margin-top:5px;font-size:11px;letter-spacing:.08em;color:var(--muted-2)}

/* ===================== Section heading row ===================== */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,5vw,56px)}
.head-row h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.link-more{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;color:var(--text);white-space:nowrap}
.link-more:hover{color:var(--accent-strong)}
.link-more .arr{transition:transform .3s var(--ease)}
.link-more:hover .arr{transform:translateX(5px)}

/* ===================== Projects (home teaser) ===================== */
.projects{background:var(--bg)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
.proj{display:block}
.media{position:relative;overflow:hidden;background:var(--bone-2);aspect-ratio:4/5;border:1px solid var(--line);border-radius:var(--r)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.proj:hover .media img{transform:scale(1.05)}
.media[data-label]::after{
  content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  background:repeating-linear-gradient(45deg,var(--surface) 0 12px,var(--bone-2) 12px 24px);
}
.media img{position:relative;z-index:1}
.media img.img-missing{display:none}
.proj-title{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-top:20px;color:#fff}
.proj-meta{margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.proj-meta .dot{color:var(--accent);margin:0 .5em}

/* ===================== Capabilities ===================== */
.cap{background:var(--surface);border-top:1px solid var(--line)}
.cap-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.cap-media{position:relative;overflow:hidden;background:var(--bone-2);aspect-ratio:3/2;border:1px solid var(--line);border-radius:var(--r)}
.cap-media img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.cap-media img.img-missing{display:none}
.cap-media[data-label]::after{
  content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  background:repeating-linear-gradient(45deg,var(--surface) 0 12px,var(--bone-2) 12px 24px);
}
.cap-copy h2{font-size:clamp(2.1rem,4vw,3rem);margin:18px 0 18px}
.cap-copy p{color:var(--muted);max-width:48ch}
.cap-list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.cap-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
.cap-list svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:3px}

/* ===================== Process ===================== */
.process{background:var(--ink);color:#fff}
.process .eyebrow{color:rgba(255,255,255,.7)}
.process .eyebrow::before{background:var(--accent-light)}
.process h2{font-size:clamp(2rem,4vw,2.9rem);margin:16px 0 0;max-width:18ch}
.proc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:clamp(40px,6vw,68px)}
.proc-step{position:relative;padding-right:14px}
.proc-step+.proc-step::before{content:"";position:absolute;left:-14px;top:24px;width:14px;height:1px;background:var(--line-dark)}
.proc-icon{width:42px;height:42px;color:var(--accent-light);margin-bottom:18px}
.proc-icon svg{width:100%;height:100%}
.proc-num{font-size:11px;letter-spacing:.18em;color:var(--accent-light);font-weight:600}
.proc-name{font-family:var(--serif);font-size:1.32rem;font-weight:500;margin-top:6px;color:#fff}
.proc-step p{font-size:13px;color:rgba(255,255,255,.6);margin-top:8px;line-height:1.6}

/* ===================== About ===================== */
.about{background:var(--surface);border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start}
.about h2{font-size:clamp(2.1rem,4.2vw,3.2rem);max-width:14ch}
.about-body p{color:var(--muted);margin-bottom:18px;font-size:16.5px}
.about-body p:last-child{margin-bottom:0}
.about-body strong{color:var(--text)}
.about-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;
  padding:9px 18px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}
.chip svg{width:15px;height:15px;color:var(--accent)}
.area-band{margin-top:clamp(48px,7vw,86px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,60px)}
.area-band .eyebrow{margin-bottom:22px}
.area-cities{display:flex;flex-wrap:wrap;gap:10px 14px}
.area-cities span{font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:500;color:#fff}
.area-cities span:nth-child(even){color:var(--accent)}
.area-note{margin-top:18px;color:var(--muted);font-size:14.5px;max-width:62ch}

/* ===================== CTA band ===================== */
.cta{background:var(--ink);color:#fff;border-top:1px solid var(--line-dark)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.cta h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:16ch}
.cta p{color:rgba(255,255,255,.66);margin-top:14px;max-width:42ch}

/* ===================== Contact ===================== */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,84px);align-items:start}
.contact h2{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:16px 0 14px}
.contact-lead{color:var(--muted);max-width:42ch;margin-bottom:34px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--text);background:var(--bone-2);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(142,166,214,.18);
}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form-note{font-size:12.5px;color:var(--muted-2)}
.form-msg{grid-column:1/-1;font-size:14px;padding:14px 16px;border-radius:var(--r);display:none}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(80,140,100,.16);color:#c7e8cf;border:1px solid rgba(120,200,140,.32)}

.contact-aside{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,44px)}
.contact-aside .blk{margin-bottom:30px}
.contact-aside h3{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.contact-aside a,.contact-aside address{font-style:normal;font-size:16px;color:var(--text);line-height:1.55}
.contact-aside a:hover{color:var(--accent-strong)}

/* ===================== Footer ===================== */
.footer{background:#05070c;color:#fff;padding-block:clamp(56px,7vw,86px);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-brand p{color:rgba(255,255,255,.52);margin-top:22px;max-width:34ch;font-size:14.5px}
.footer h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 18px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer ul a,.footer address{color:rgba(255,255,255,.74);font-size:14.5px;font-style:normal;line-height:1.5}
.footer ul a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid var(--line);margin-top:clamp(46px,6vw,66px);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.42);letter-spacing:.04em;
}

/* ===================== Interior page head ===================== */
.page-head{padding-top:clamp(116px,16vh,184px);padding-bottom:clamp(34px,5vw,56px);background:var(--bg)}
.page-head h1{font-size:clamp(2.7rem,8vw,5.4rem);font-weight:500;margin-top:16px;letter-spacing:.01em;color:#fff}
.page-head .lead{color:var(--muted);max-width:60ch;margin-top:20px;font-size:16.5px}

/* ===================== Filters ===================== */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,44px)}
.filter{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:100px;padding:11px 20px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.filter:hover{border-color:rgba(255,255,255,.5);color:var(--text)}
.filter.active{background:var(--white);border-color:var(--white);color:var(--ink)}

/* ===================== Gallery ===================== */
.gallery-wrap{padding-top:clamp(28px,4vw,40px);padding-bottom:clamp(70px,9vw,128px);background:var(--bg)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,34px)}
.gx{position:relative;display:block;overflow:hidden;background:var(--bone-2);aspect-ratio:7/5;border:1px solid var(--line);border-radius:var(--r)}
.gx--wide{aspect-ratio:16/9}
.gx img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform 1s var(--ease)}
.gx img.img-missing{display:none}
.gx[data-label]::after{
  content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  background:repeating-linear-gradient(45deg,var(--surface) 0 12px,var(--bone-2) 12px 24px);
}
.gx-overlay{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.6vw,38px);color:#fff;
  background:linear-gradient(180deg,rgba(5,7,13,0) 40%,rgba(5,7,13,.55) 72%,rgba(5,7,13,.9) 100%);
}
.gx:hover img{transform:scale(1.05)}
.gx-cat{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-light)}
.gx-title{font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:500;margin-top:6px;line-height:1.06}
.gx.is-placeholder{pointer-events:none}
.gx.hide{display:none}
@media (hover:none){ .gx-overlay{opacity:1} }
.gallery-empty{display:none;text-align:center;color:var(--muted);padding:70px 0;font-size:15px}
.gallery-empty.show{display:block}

/* ===================== Project detail ===================== */
.proj-back{display:inline-flex;align-items:center;gap:.55em;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.proj-back:hover{color:var(--text)}
.proj-back .arr{transition:transform .3s var(--ease)}
.proj-back:hover .arr{transform:translateX(-4px)}
.proj-metaline{margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.proj-metaline .dot{color:var(--accent);margin:0 .5em}
.proj-desc{color:var(--muted);max-width:62ch;margin-top:22px;font-size:16.5px}
.pg{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,30px)}
.pg-item{display:flex;justify-content:center}
.pg-item img{display:block;max-width:100%;max-height:92vh;width:auto;height:auto;border:1px solid var(--line);border-radius:var(--r)}

/* wider gallery on the projects page → big Brochsteins-style cards */
.gallery-wrap > .wrap{max-width:1480px}

/* ===================== Carousel (home featured projects) ===================== */
.carousel{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--bone-2)}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);pointer-events:none;display:block}
.carousel-slide.is-active{opacity:1;pointer-events:auto}
.carousel-slide img{width:100%;height:100%;object-fit:cover}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;
  background:rgba(8,11,18,.42);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .25s var(--ease);
}
.carousel-arrow:hover{background:rgba(8,11,18,.85)}
.carousel-arrow.prev{left:18px}
.carousel-arrow.next{right:18px}
.carousel-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:9px}
.carousel-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.45);padding:0;cursor:pointer;transition:background .25s var(--ease),width .25s var(--ease)}
.carousel-dots button.active{background:#fff;width:26px;border-radius:5px}
@media (max-width:640px){
  .carousel{aspect-ratio:4/3}
  .carousel-arrow{width:40px;height:40px;font-size:20px}
}

/* ===================== Reveal + micro-interactions ===================== */
/* Each reveal carries a CSS-only safety net: if JS never adds .in (stale cache,
   blocked script, observer hiccup) the content un-hides on its own after 4s. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 1.05s var(--ease-expo),transform 1.05s var(--ease-expo);animation:rev-safety .01s linear 4s forwards}
.reveal.in{opacity:1;transform:none;animation:none}
[data-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo);animation:rev-safety .01s linear 4s forwards}
[data-stagger].in>*{opacity:1;transform:none;animation:none}
@keyframes rev-safety{to{opacity:1;transform:none}}

/* crafted image reveal — a slow clip-wipe that rises into frame */
.reveal-img{clip-path:inset(100% 0 0 0);opacity:0;transition:clip-path 1.2s var(--ease-expo),opacity .5s ease;animation:revimg-safety .01s linear 4s forwards}
.reveal-img.in{clip-path:inset(0 0 0 0);opacity:1;animation:none}
@keyframes revimg-safety{to{clip-path:inset(0 0 0 0);opacity:1}}
.gallery .gx.reveal-img:nth-child(2){transition-delay:.08s}
.gallery .gx.reveal-img:nth-child(3){transition-delay:.16s}
.gallery .gx.reveal-img:nth-child(4){transition-delay:.24s}
.pg .pg-item.reveal-img + .pg-item.reveal-img{transition-delay:.1s}

/* eyebrow accent line draws in with its section */
.eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-expo) .12s}
.reveal.in .eyebrow::before,[data-stagger].in .eyebrow::before,.eyebrow.reveal.in::before{transform:scaleX(1)}

/* process — hover lift + connector draw-in */
.proc-step{transition:transform .45s var(--ease-expo)}
.proc-step:hover{transform:translateY(-6px)}
.proc-step:hover .proc-icon,.proc-step:hover .proc-num{color:#fff}
.proc-step + .proc-step::before{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-expo) .25s}
.process [data-stagger].in .proc-step + .proc-step::before{transform:scaleX(1)}

/* footer links — underline draw on hover (matches nav) */
.footer ul a{position:relative;display:inline-block}
.footer ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.footer ul a:hover::after{transform:scaleX(1)}

/* filled buttons — subtle depth + lift */
.btn-primary,.btn-accent{transition:background .35s var(--ease),color .35s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease)}
.btn-primary:hover,.btn-accent:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.45)}

/* ===================== Responsive ===================== */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .nav-links,.nav .nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    position:fixed;inset:0;background:var(--ink);color:#fff;padding:96px var(--pad) 40px;z-index:90;
  }
  .nav.open .nav-links a{font-size:1.6rem;font-family:var(--serif);text-transform:none;letter-spacing:.01em;padding:12px 0}
  .nav.open .nav-links a.current{color:var(--accent)}
  .nav.open .nav-cta{display:inline-flex;margin-top:24px;border-color:#fff;color:#fff}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3)::before,.stat:nth-child(1)::before{display:none}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
  .proj-grid{grid-template-columns:1fr 1fr}
  .cap-grid{grid-template-columns:1fr}
  .cap-media{aspect-ratio:16/10;order:-1}
  .proc-grid{grid-template-columns:1fr 1fr 1fr}
  .proc-step:nth-child(4)::before,.proc-step:nth-child(1)::before{display:none}
  .about-grid{grid-template-columns:1fr;gap:24px}
  .contact-grid{grid-template-columns:1fr}
  .contact-aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:34px}
}
@media (max-width:560px){
  .proj-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .cap-list{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .s-hero h1{font-size:clamp(2.8rem,13vw,4.2rem)}
}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr;gap:16px}
  .gx{aspect-ratio:3/2}
  .gx--wide{aspect-ratio:3/2}
  .gx-overlay{padding:20px}
  .gx-title{font-size:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal,[data-stagger]>*{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}
  .reveal-img{clip-path:none !important;opacity:1 !important;transition:none !important;animation:none !important}
  .eyebrow::before,.proc-step + .proc-step::before{transform:none !important}
  .proc-step:hover,.btn-primary:hover,.btn-accent:hover{transform:none !important}
  .scroll-cue{animation:none}
  .media img,.btn,.proj:hover .media img,.gx img,.gx:hover img,.s-hero-img{transition:none}
}