/* ============================================================
   SRM Bouw — site (design system shared with the SYNOPSIS renovation template)
   Design system + layout + components + motion
   ============================================================ */

:root {
  /* palette — warm architectural */
  --ink:      #100E0B;
  --ink-2:    #1B1814;
  --ink-3:    #2A2620;
  --sand:     #F3ECE1;
  --cream:    #FBF7F0;
  --paper:    #FFFFFF;
  --muted:    #7A7164;
  --line:     #E4DACB;
  --ember:    #1F3FBF;   /* primary accent — SRM logo blue */
  --ember-d:  #162E8F;
  --clay:     #4B6CD6;
  --gold:     #C9A24B;

  --shadow-sm: 0 2px 8px rgba(16,14,11,.06);
  --shadow:    0 18px 50px -18px rgba(16,14,11,.28);
  --shadow-lg: 0 40px 90px -30px rgba(16,14,11,.45);

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);

  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
@media (hover: none) { body { cursor: auto; } }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: none; }
::selection { background: var(--ember); color: #fff; }

/* lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 700; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ember);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ember); display: inline-block; }
.eyebrow.light { color: var(--gold); }
.eyebrow.light::before { background: var(--gold); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; }
.h-sec { font-size: clamp(2.1rem, 5.2vw, 4rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--muted); max-width: 56ch; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--cream);
  position: relative; display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 1.7em; border-radius: 100px;
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  background: var(--bg); color: var(--fg);
  overflow: hidden; isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.btn span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .6em; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--ember); border-radius: inherit;
  transform: scale(0); transform-origin: center;
  transition: transform .5s var(--ease);
}
.btn:hover::before { transform: scale(1.6); }
.btn:hover { box-shadow: 0 14px 30px -10px rgba(31,63,191,.6); }
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--ember { --bg: var(--ember); --fg: #fff; }
.btn--ember::before { background: var(--ink); }
.btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { --fg: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--lg { padding: 1.2em 2em; font-size: 1.05rem; }

.btn-text {
  display: inline-flex; align-items: center; gap: .5em; font-weight: 700; position: relative;
}
.btn-text::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.btn-text:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- custom cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: fixed; width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); }
.cursor__ring {
  position: fixed; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7); transform: translate(-50%,-50%);
  transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; background: rgba(255,255,255,.12); border-color: transparent; }
.cursor.is-hover .cursor__dot { opacity: 0; }
@media (hover: none) { .cursor { display: none; } }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 18px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.header.scrolled {
  background: rgba(251,247,240,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
  padding: 11px 0;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center; font-size: .9rem; letter-spacing: -.04em;
  position: relative; overflow: hidden;
}
.brand__mark::after { content:""; position:absolute; inset:0; background: var(--ember); transform: translateY(101%); transition: transform .45s var(--ease); }
.brand:hover .brand__mark::after { transform: translateY(0); }
.brand__mark span { position: relative; z-index: 2; }
.brand__name { font-size: 1.16rem; letter-spacing: -.01em; line-height: 1; }
.brand__name small { display:block; font-family: var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.28em; color: var(--muted); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  position: relative; padding: 9px 15px; border-radius: 100px; font-weight: 600; font-size: .96rem;
  transition: color .3s;
}
.nav a::before { content:""; position:absolute; inset:0; border-radius: inherit; background: var(--ink); transform: scale(.4); opacity:0; transition: transform .35s var(--ease), opacity .3s; z-index:-1; }
.nav a:hover { color: var(--cream); }
.nav a:hover::before { transform: scale(1); opacity: 1; }
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__phone { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.header__phone svg { color: var(--ember); }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1){ top: 17px; } .burger span:nth-child(2){ top: 23px; } .burger span:nth-child(3){ top: 29px; }
body.menu-open .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 190; background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  clip-path: circle(0% at 92% 5%); transition: clip-path .7s var(--ease);
  pointer-events: none;
}
body.menu-open .mobile-menu { clip-path: circle(150% at 92% 5%); pointer-events: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: clamp(2rem,9vw,3.4rem); padding: .14em 0; opacity:.4; transition: opacity .3s, transform .4s var(--ease); transform: translateX(-10px); }
.mobile-menu a:hover { opacity: 1; transform: translateX(8px); color: var(--ember); }
.mobile-menu__foot { margin-top: 40px; color: var(--gold); font-weight: 700; }

/* floating mobile top bar (shown only on phones — see @media 1040) */
.mobilebar, .header__call { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 150px; padding-bottom: 56px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 80% 10%, rgba(31,63,191,.10), transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(201,162,75,.10), transparent 60%); }
.hero__grid { position:absolute; inset:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: .5; -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000, transparent 75%); mask-image: radial-gradient(120% 90% at 70% 20%, #000, transparent 75%); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; column-gap: clamp(30px,5vw,72px); row-gap: 0; align-items: center; width: 100%; }
.hero__trust { grid-column: 1 / -1; }
.hero__copy { max-width: 640px; }
.hero__copy { container-type: inline-size; }
/* headline scales with its own column so the longest word ("Craftsmanship" = 9.6em) never spills under the photo */
.hero h1 { font-size: clamp(2.6rem, 12.5cqi, 5rem); line-height: .98; margin: 20px 0 0; }
html[lang="en"] .hero h1 { font-size: clamp(2rem, 10cqi, 4.6rem); }
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; }
.hero h1 .word > span { display: inline-block; will-change: transform; }
.hero h1 em { font-style: normal; color: var(--ember); position: relative; }
.hero h1 em::after { content:""; position:absolute; left:0; right:0; bottom: .06em; height:.14em; background: rgba(31,63,191,.22); z-index:-1; transform: scaleX(0); transform-origin:left; transition: transform .8s var(--ease) .9s; }
.hero.in h1 em::after { transform: scaleX(1); }
.hero__sub { margin-top: 22px; font-size: clamp(1.05rem,1.5vw,1.22rem); color: var(--muted); max-width: 50ch; }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__meta { margin-top: 44px; display: flex; gap: 34px; flex-wrap: wrap; }
.hero__meta .m { }
.hero__meta .m b { font-family: var(--font-display); font-size: 1.7rem; display:block; line-height:1; }
.hero__meta .m span { font-size: .82rem; color: var(--muted); letter-spacing: .02em; }

.hero__visual { position: relative; aspect-ratio: 4/5; max-height: 520px; width: 100%; }
.hero__frame { position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__frame img { width:100%; height:100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.hero__frame::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(16,14,11,.45), transparent 45%); }
.hero__badge {
  position: absolute; left: -28px; bottom: 38px; z-index: 3;
  background: var(--cream); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px; max-width: 250px;
}
.hero__badge .ring { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--ember) calc(var(--p,.96)*360deg), var(--line) 0); display:grid; place-items:center; flex:none; }
.hero__badge .ring i { width: 34px; height: 34px; border-radius:50%; background: var(--cream); display:grid; place-items:center; font-style: normal; font-weight: 800; font-size: .78rem; }
.hero__badge p { font-size: .82rem; line-height: 1.35; }
.hero__badge p b { display:block; font-family: var(--font-display); font-size:.95rem; }
.scroll-cue { position:absolute; left: var(--gutter); bottom: 26px; z-index: 3; display:flex; align-items:center; gap:12px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); }
.scroll-cue i { width: 1px; height: 42px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background: var(--ember); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

@media (max-width: 900px){
  .hero { min-height: auto; padding-top: 172px; }
  .hero__inner { grid-template-columns: 1fr; row-gap: 36px; }
  .hero__visual { aspect-ratio: 16/11; max-height: 440px; }
  .hero__badge { left: auto; right: 16px; bottom: 16px; }
  .scroll-cue { display: none; }
}
@media (max-width: 460px){
  .hero__meta { gap: 22px; }
  .hero__badge { max-width: 210px; padding: 14px 16px; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services { padding: clamp(80px,11vw,150px) 0; }
.sec-head { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: 54px; }
.sec-head .lead { margin-top: 18px; }
@media (max-width: 760px){ .sec-head { grid-template-columns: 1fr; } }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc {
  position: relative; padding: 32px 30px 30px; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-sm);
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
}
.svc::before { content:""; position:absolute; inset:0; z-index:-1; background: var(--ink); transform: translateY(101%); transition: transform .55s var(--ease); }
.svc:hover { transform: translateY(-8px); box-shadow: var(--shadow); color: var(--cream); }
.svc:hover::before { transform: translateY(0); }
.svc:hover .svc__ico { background: var(--ember); color:#fff; border-color: var(--ember); }
.svc:hover .svc__num { color: rgba(251,247,240,.25); }
.svc:hover .svc__more { color: var(--ember); }
.svc__ico { width: 58px; height: 58px; border-radius: 16px; display:grid; place-items:center; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); margin-bottom: 24px; transition: all .5s var(--ease); }
.svc__ico svg { width: 28px; height: 28px; }
.svc h3 { font-size: 1.32rem; line-height: 1.1; }
.svc p { margin-top: 12px; font-size: .98rem; color: var(--muted); transition: color .5s; }
.svc:hover p { color: rgba(251,247,240,.7); }
.svc__num { position:absolute; top: 26px; right: 28px; font-family: var(--font-display); font-size: 1rem; color: var(--line); transition: color .5s; }
.svc__more { margin-top: 22px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; transition: color .4s, gap .4s; }
.svc:hover .svc__more { gap: 14px; }
.svc--wide { grid-column: span 2; display:flex; flex-direction:column; justify-content:flex-end; min-height: 100%; background: var(--ember); color:#fff; }
.svc--wide::before { background: var(--ink); }
.svc--wide .svc__ico { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); color:#fff; }
.svc--wide p { color: rgba(255,255,255,.85); }

@media (max-width: 980px){ .svc-grid { grid-template-columns: repeat(2,1fr); } .svc--wide { grid-column: span 2; } }
@media (max-width: 620px){ .svc-grid { grid-template-columns: 1fr; } .svc--wide { grid-column: span 1; } }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--ink); color: var(--cream); padding: clamp(70px,9vw,120px) 0; overflow: hidden; position: relative; }
.stats__bg { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 70px 70px; -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent); }
.stats__inner { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat { text-align: left; padding: 6px 0; }
.stat b { font-family: var(--font-display); font-size: clamp(3rem,7vw,5.2rem); line-height:1; display:flex; align-items:flex-start; }
.stat b .plus { color: var(--ember); font-size: .5em; margin-top: .25em; }
.stat span { display:block; margin-top: 12px; color: rgba(251,247,240,.6); font-weight:600; letter-spacing:.02em; }
.stat i { display:block; width: 40px; height: 3px; background: var(--ember); margin-top: 20px; border-radius: 3px; }
@media (max-width: 760px){ .stats__inner { grid-template-columns: repeat(2,1fr); gap: 40px 24px; } }

/* ============================================================
   PROCESS
   ============================================================ */
.process { padding: clamp(80px,11vw,150px) 0; }
.proc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 54px; border-top: 1px solid var(--line); }
.proc {
  padding: 36px 28px 40px; border-right: 1px solid var(--line); position: relative;
  transition: background .5s var(--ease);
}
.proc:last-child { border-right: none; }
.proc::after { content:""; position:absolute; left:0; top:-1px; height:3px; width:0; background: var(--ember); transition: width .6s var(--ease); }
.proc:hover { background: var(--sand); }
.proc:hover::after { width: 100%; }
.proc__n { font-family: var(--font-display); font-size: 1rem; color: var(--ember); }
.proc h3 { font-size: 1.5rem; margin: 22px 0 12px; }
.proc p { font-size: .96rem; color: var(--muted); }
@media (max-width: 860px){ .proc-grid { grid-template-columns: 1fr 1fr; } .proc:nth-child(2){ border-right:none; } .proc:nth-child(1),.proc:nth-child(2){ border-bottom:1px solid var(--line);} }
@media (max-width: 520px){ .proc-grid { grid-template-columns: 1fr; } .proc { border-right:none; border-bottom:1px solid var(--line);} }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery { padding: 0 0 clamp(80px,11vw,150px); }
.gal-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-rows: 200px; }
.gal {
  position: relative; overflow: hidden; border-radius: var(--r); cursor: none;
  box-shadow: var(--shadow-sm);
}
.gal img { width:100%; height:100%; object-fit: cover; transition: transform .9s var(--ease); }
.gal:hover img { transform: scale(1.07); }
.gal::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(16,14,11,.7), transparent 55%); opacity:.65; transition: opacity .5s; }
.gal:hover::after { opacity: .9; }
.gal__cap { position:absolute; left:0; right:0; bottom:0; padding: 22px; z-index:2; color: var(--cream); transform: translateY(8px); opacity:0; transition: transform .5s var(--ease), opacity .5s; }
.gal:hover .gal__cap { transform: translateY(0); opacity:1; }
.gal__cap small { color: var(--gold); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.7rem; }
.gal__cap h4 { font-family: var(--font-display); font-size: 1.2rem; margin-top: 4px; }
.gal--a { grid-column: span 5; grid-row: span 2; }
.gal--b { grid-column: span 4; grid-row: span 1; }
.gal--c { grid-column: span 3; grid-row: span 1; }
.gal--d { grid-column: span 4; grid-row: span 1; }
.gal--e { grid-column: span 3; grid-row: span 2; }
.gal--f { grid-column: span 4; grid-row: span 1; }
@media (max-width: 860px){ .gal-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 180px; } .gal { grid-column: span 1 !important; grid-row: span 1 !important; } .gal--a { grid-column: span 2 !important; } }

/* ============================================================
   FEATURE / WHY
   ============================================================ */
.why { padding: clamp(80px,11vw,150px) 0; background: var(--sand); }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,90px); align-items: center; }
.why__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow); }
.why__media img { width:100%; height:100%; object-fit: cover; transform: scale(1.1); will-change: transform; }
.why__media .tag { position:absolute; top: 20px; left:20px; background: var(--cream); padding: 9px 16px; border-radius: 100px; font-weight:700; font-size:.84rem; display:flex; gap:8px; align-items:center; }
.why__media .tag i { width:8px; height:8px; border-radius:50%; background: #34C759; box-shadow:0 0 0 4px rgba(52,199,89,.18); }
.why ul { list-style: none; margin-top: 34px; display: grid; gap: 4px; }
.why li { display:flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.why li:last-child { border-bottom: none; }
.why li .ck { width: 30px; height: 30px; border-radius: 9px; background: var(--ember); color:#fff; display:grid; place-items:center; flex:none; }
.why li b { font-family: var(--font-display); font-size: 1.1rem; display:block; }
.why li span { color: var(--muted); font-size:.96rem; }
@media (max-width: 860px){ .why__grid { grid-template-columns: 1fr; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { padding: clamp(80px,11vw,150px) 0; overflow: hidden; }
.q-track { display: flex; gap: 22px; }
.q-card { flex: 0 0 clamp(300px, 38vw, 460px); background: var(--paper); border-radius: var(--r-lg); padding: 38px 34px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.q-card .mark { font-family: var(--font-display); font-size: 3.4rem; color: var(--ember); line-height: .5; height: .55em; }
.q-card p { font-size: 1.12rem; margin: 18px 0 26px; flex: 1; }
.q-card .who { display:flex; align-items:center; gap: 14px; }
.q-card .who .av { width: 46px; height: 46px; border-radius: 50%; background: var(--sand); display:grid; place-items:center; font-family: var(--font-display); color: var(--ember); }
.q-card .who b { display:block; font-family: var(--font-display); font-size: 1rem; }
.q-card .who span { color: var(--muted); font-size:.86rem; }
.q-card .stars { color: var(--gold); letter-spacing:2px; margin-bottom: 4px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta { padding: 0 0 clamp(80px,11vw,140px); }
.cta__inner {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--ink); color: var(--cream);
  padding: clamp(48px,7vw,90px); text-align: center;
}
.cta__inner::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 120% at 50% 120%, rgba(31,63,191,.35), transparent 60%); }
.cta__glow { position:absolute; width: 460px; height:460px; border-radius:50%; background: radial-gradient(circle, rgba(31,63,191,.5), transparent 65%); filter: blur(30px); top:-180px; left:50%; transform: translateX(-50%); opacity:.6; }
.cta h2 { position: relative; font-size: clamp(2.2rem,6vw,4.4rem); }
.cta p { position: relative; color: rgba(251,247,240,.7); margin: 20px auto 0; max-width: 48ch; font-size: 1.1rem; }
.cta__btns { position: relative; margin-top: 38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding: 0 0 clamp(80px,11vw,140px); }
.contact__grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,64px); }
.contact__info h2 { font-size: clamp(1.9rem,4vw,3rem); }
.contact__rows { margin-top: 36px; display: grid; gap: 6px; }
.crow { display:flex; gap: 18px; padding: 20px 0; border-bottom:1px solid var(--line); align-items:center; }
.crow .ic { width: 48px; height:48px; border-radius:14px; background: var(--ink); color: var(--cream); display:grid; place-items:center; flex:none; transition: background .4s; }
.crow:hover .ic { background: var(--ember); }
.crow small { color: var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.crow b { font-family: var(--font-display); font-size: 1.15rem; display:block; margin-top:2px; }
.contact__socials { margin-top: 30px; display:flex; gap: 12px; }
.contact__socials a { width:46px; height:46px; border-radius: 12px; display:grid; place-items:center; box-shadow: inset 0 0 0 1.5px var(--line); transition: all .4s var(--ease); }
.contact__socials a:hover { background: var(--ink); color: var(--cream); transform: translateY(-4px); }

.form { background: var(--paper); border-radius: var(--r-lg); padding: clamp(28px,4vw,46px); box-shadow: var(--shadow-sm); }
.form__row { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { position: relative; margin-top: 18px; }
.field label { position:absolute; left: 18px; top: 16px; color: var(--muted); pointer-events:none; transition: all .25s var(--ease); font-size: 1rem; }
.field input, .field textarea, .field select {
  width:100%; padding: 26px 18px 12px; border-radius: var(--r-sm); background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; color: var(--ink); cursor: none;
  transition: box-shadow .3s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ember); }
.field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { top: 8px; font-size: .72rem; color: var(--ember); font-weight:700; }
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.form .btn { margin-top: 22px; width: 100%; justify-content: center; }
.form__note { margin-top: 14px; font-size:.82rem; color: var(--muted); text-align:center; }
@media (max-width: 860px){ .contact__grid { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: var(--cream); padding: clamp(60px,8vw,96px) 0 36px; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h4 { font-family: var(--font-display); font-size: .82rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); margin-bottom: 20px; }
.footer ul { list-style:none; display:grid; gap: 11px; }
.footer ul a { color: rgba(251,247,240,.62); transition: color .3s, padding .3s; }
.footer ul a:hover { color: var(--cream); padding-left: 6px; }
.footer__brand p { color: rgba(251,247,240,.5); margin-top: 18px; max-width: 32ch; font-size:.94rem; }
.footer__big { font-family: var(--font-display); font-size: clamp(3rem,16vw,12rem); line-height:.8; letter-spacing:-.03em; color: rgba(251,247,240,.05); text-align:center; margin: 60px 0 0; white-space: nowrap; user-select:none; }
.footer__bot { display:flex; justify-content:space-between; gap: 20px; flex-wrap:wrap; margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(251,247,240,.5); font-size:.88rem; }
.footer__bot a:hover { color: var(--ember); }
@media (max-width: 860px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   REVEAL ANIMATIONS (base states; GSAP also drives many)
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal-d="1"]{ transition-delay: .08s; }
[data-reveal-d="2"]{ transition-delay: .16s; }
[data-reveal-d="3"]{ transition-delay: .24s; }
[data-reveal-d="4"]{ transition-delay: .32s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* progress bar */
.progress { position: fixed; top:0; left:0; height: 3px; width: 0; background: var(--ember); z-index: 300; }

/* responsive header */
@media (max-width: 1040px){
  .nav, .header__phone, .burger, .header__cta { display: none; }

  /* fully transparent floating chrome — brand centered on top, tabs below */
  .header, .header.scrolled { top: 12px; left: 10px; right: 10px; padding: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header .container { padding: 0; max-width: none; }
  .header__inner, .header.scrolled .header__inner {
    flex-direction: column; align-items: center; gap: 9px;
    padding: 0; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* brand (logo + title + slogan) restored, centered */
  .brand { display: flex; justify-content: center; gap: 10px; text-shadow: 0 1px 12px rgba(251,247,240,.55); }
  .brand__mark { width: 38px; height: 38px; text-shadow: none; }
  .brand__name { display: block; }

  /* tab bar: small icon above a short label, evenly distributed, no background */
  .mobilebar { display: flex; width: 100%; align-items: stretch; gap: 3px; min-width: 0; }
  .mobilebar__a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 2px; border-radius: 14px; text-align: center;
    color: var(--ink); transition: background .3s var(--ease), color .3s;
    text-shadow: 0 1px 10px rgba(251,247,240,.7);
  }
  .mobilebar__ic { display: grid; place-items: center; }
  .mobilebar__ic .ic-svg { width: 19px; height: 19px; }
  .mobilebar__t {
    font-size: clamp(.56rem, 2.7vw, .68rem); font-weight: 700; line-height: 1;
    letter-spacing: .005em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .mobilebar__a.is-active { background: var(--ink); color: var(--cream); text-shadow: none; box-shadow: 0 6px 18px rgba(16,14,11,.22); }
}

/* ---- mobile: guarantee the layout fits any screen (no horizontal scroll) ---- */
@media (max-width: 760px){
  /* long words / headings never push the page wider than the viewport */
  h1, h2, h3, h4, p, a, li, span, .lead { overflow-wrap: break-word; word-break: break-word; }
  /* let grid / flex children shrink below their content size */
  .sec-head, .sec-head > *, .footer__top, .footer__top > * { min-width: 0; }
  /* the giant faint watermark is set to nowrap — scale it to fit */
  .footer__big { font-size: 11vw; white-space: nowrap; }
}

/* ============================================================
   DYNAMIC UPGRADE — before/after, filters, modal, estimator
   ============================================================ */
.proof { padding: clamp(80px,11vw,150px) 0; background: linear-gradient(180deg, var(--cream), var(--sand)); overflow: hidden; }
.proof__grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,6vw,84px); align-items:center; }
.proof__copy .lead { margin-top: 20px; }
.proof__points { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 28px; }
.proof__points span { padding: 10px 14px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-sm); font-weight: 800; color: var(--ink-2); font-size: .9rem; }
.ba { position:relative; aspect-ratio: 16/10; border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--shadow-lg); background: var(--ink); }
.ba__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; }
.ba__after { filter: saturate(1.05) contrast(1.03); }
.ba__beforeWrap { position:absolute; inset:0; width:50%; overflow:hidden; border-right: 2px solid rgba(255,255,255,.85); }
.ba__before { filter: grayscale(.35) contrast(.9) brightness(.82); width: calc(100% * 2); max-width:none; }
.ba__range { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor: ew-resize; z-index:5; }
.ba__handle { position:absolute; top:0; bottom:0; left:50%; z-index:4; transform:translateX(-50%); pointer-events:none; }
.ba__handle::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background: rgba(255,255,255,.9); transform:translateX(-50%); }
.ba__handle span { position:absolute; top:50%; left:50%; width:62px; height:62px; border-radius:50%; transform:translate(-50%,-50%); background: rgba(251,247,240,.92); box-shadow: var(--shadow); }
.ba__handle span::before { content:"↔"; position:absolute; inset:0; display:grid; place-items:center; color: var(--ember); font-weight:900; font-size:1.3rem; }
.ba__label { position:absolute; top:22px; z-index:3; padding:8px 12px; border-radius:999px; background: rgba(16,14,11,.72); color:#fff; font-weight:800; font-size:.82rem; backdrop-filter: blur(8px); }
.ba__label--before { left:22px; }
.ba__label--after { right:22px; }

.gallery__tools { display:flex; gap: 10px; flex-wrap:wrap; margin: -26px 0 28px; }
.filter { padding: 10px 16px; border-radius:999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-weight:800; cursor:none; transition: all .35s var(--ease); }
.filter:hover, .filter.is-active { background: var(--ink); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.gal { border:0; text-align:left; font:inherit; color:inherit; background:none; }
.gal.is-hidden { display:none; }
.gal__cap span { display:inline-flex; margin-top: 10px; color:#fff; font-weight:800; font-size:.86rem; opacity:.9; }
.dynamic-gallery { transition: opacity .25s var(--ease); }
.dynamic-gallery.is-switching { opacity:.45; }

.estimator { padding: 0 0 clamp(80px,11vw,140px); }
.estimator__grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,6vw,72px); align-items:start; }
.quote-card { background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: clamp(26px,4vw,42px); position:relative; overflow:hidden; }
.quote-card::before { content:""; position:absolute; inset:0 0 auto 0; height: 5px; background: linear-gradient(90deg,var(--ember),var(--gold)); }
.quote-step + .quote-step { margin-top: 26px; }
.quote-step > label { display:flex; justify-content:space-between; font-weight:900; font-family: var(--font-display); margin-bottom: 12px; }
.chips, .checks { display:flex; gap: 10px; flex-wrap:wrap; }
.chip { padding: 11px 15px; border-radius:999px; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); font-weight:800; cursor:none; transition: all .3s var(--ease); }
.chip.is-active, .chip:hover { background: var(--ember); color:#fff; box-shadow: inset 0 0 0 1.5px var(--ember); transform: translateY(-2px); }
.range { width:100%; accent-color: var(--ember); }
.checks label { padding: 11px 13px; border-radius: 14px; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); font-weight:700; cursor:none; }
.checks input { accent-color: var(--ember); margin-right: 6px; }
.quote-result { margin-top: 30px; padding: 24px; border-radius: var(--r-lg); background: var(--ink); color: var(--cream); }
.quote-result small { color: var(--gold); font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.quote-result p { margin: 8px 0 18px; font-size:1.05rem; color: rgba(251,247,240,.78); }
.quote-result .btn { width:100%; justify-content:center; }

.project-modal, .service-drawer { position:fixed; inset:0; z-index:500; opacity:0; pointer-events:none; transition: opacity .35s var(--ease); }
.project-modal.is-open, .service-drawer.is-open { opacity:1; pointer-events:auto; }
.project-modal__backdrop, .service-drawer__backdrop { position:absolute; inset:0; background: rgba(16,14,11,.72); backdrop-filter: blur(10px); }
.project-modal__panel { position:absolute; right: clamp(12px,4vw,42px); top:50%; transform: translate(24px,-50%) scale(.98); width:min(760px, calc(100vw - 24px)); max-height: min(88vh, 920px); overflow:auto; background: var(--cream); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); transition: transform .35s var(--ease); }
.project-modal.is-open .project-modal__panel { transform: translate(0,-50%) scale(1); }
.project-modal__panel > img { width:100%; height: clamp(220px,34vh,380px); object-fit:cover; }
.project-modal__body { padding: clamp(26px,4vw,42px); }
.project-modal__body small, .service-drawer__panel small { color: var(--ember); font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.project-modal__body h3, .service-drawer__panel h3 { font-size: clamp(1.7rem,3vw,2.6rem); margin: 8px 0 12px; }
.project-modal__body p, .service-drawer__panel p { color: var(--muted); }
.project-modal__close { position:absolute; top:16px; right:16px; z-index:3; width:44px; height:44px; border-radius:50%; background: rgba(251,247,240,.92); color: var(--ink); font-size: 2rem; line-height:1; box-shadow: var(--shadow-sm); cursor:none; }
.project-facts { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin: 22px 0; }
.project-facts span { padding: 14px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-weight:800; font-size:.88rem; }
.service-drawer__panel { position:absolute; right:0; top:0; bottom:0; width:min(520px,100vw); background: var(--cream); padding: clamp(34px,5vw,58px); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .38s var(--ease); overflow:auto; }
.service-drawer.is-open .service-drawer__panel { transform: translateX(0); }
.service-drawer__panel ul { margin: 24px 0; list-style:none; display:grid; gap:12px; }
.service-drawer__panel li { padding: 14px 16px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-weight:700; }
.service-drawer__panel li::before { content:"✓"; color: var(--ember); margin-right: 10px; }

.sticky-actions { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:210; display:flex; gap:6px; padding:7px; border-radius:999px; background: rgba(16,14,11,.84); color: var(--cream); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.sticky-actions a { padding: 11px 15px; border-radius:999px; font-weight:900; font-size:.88rem; white-space:nowrap; transition: background .3s var(--ease), color .3s var(--ease); }
.sticky-actions a:hover { background: var(--ember); color:#fff; }

@media (max-width: 900px){
  .proof__grid, .estimator__grid { grid-template-columns:1fr; }
  .ba { aspect-ratio: 4/3; }
  .project-facts { grid-template-columns:1fr; }
  .project-modal__panel { left:12px; right:12px; width:auto; }
}
@media (max-width: 560px){
  .sticky-actions { left:10px; right:10px; transform:none; justify-content:space-between; }
  .sticky-actions a { flex:1; text-align:center; padding-inline:8px; }
  .gallery__tools { overflow:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .filter { white-space:nowrap; }
}

/* ============================================================
   SCROLL-SCRUBBED BACKGROUND VIDEO  (gated by body.video-bg)
   The whole page floats over one fixed video whose playhead is
   driven by scroll position (see js/main.js). A cream scrim keeps
   every frame light enough for the dark text; surfaces become
   frosted glass so the moving video is felt across the whole site.
   Remove the `video-bg` class on <body> to fully revert.
   ============================================================ */
.bgv { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: var(--ink); }
.bgv__video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  object-fit: cover; pointer-events: none;
}
/* readability veil — guarantees dark text stays legible on ANY frame,
   and tints the footage into the site's warm palette */
.bgv__scrim {
  position: absolute; inset: 0;
  /* roughly half the previous strength so the moving footage stays visible */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(251,247,240,.12), transparent 60%),
    linear-gradient(180deg, rgba(251,247,240,.24), rgba(243,236,225,.28) 55%, rgba(251,247,240,.34));
}

body.video-bg { background: transparent; }
html:has(body.video-bg) { background: var(--ink); }

/* let full-bleed neutral sections show the video through */
body.video-bg .proof { background: transparent; }

/* light sand block -> warm frosted glass */
body.video-bg .why {
  background: rgba(243,236,225,.55);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

/* dark bands -> translucent smoked glass so the video reads behind them too */
body.video-bg .stats,
body.video-bg .footer {
  background: rgba(16,14,11,.62);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
body.video-bg .cta__inner,
body.video-bg .quote-result {
  background: rgba(16,14,11,.6);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* light content cards -> frosted glass (dark text stays crisp) */
body.video-bg .svc,
body.video-bg .q-card,
body.video-bg .form,
body.video-bg .quote-card,
body.video-bg .project-facts span {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
body.video-bg .svc--wide { background: rgba(31,63,191,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* small chip / pill surfaces */
body.video-bg .proof__points span,
body.video-bg .filter,
body.video-bg .chip,
body.video-bg .checks label,
body.video-bg .field input,
body.video-bg .field textarea,
body.video-bg .field select,
body.video-bg .service-drawer__panel li {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* header glass a touch stronger over moving footage (desktop only —
   on phones the bar is intentionally fully transparent) */
@media (min-width: 1041px){
  body.video-bg .header.scrolled {
    background: rgba(251,247,240,.72);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
  }
}

/* the hero already sits directly over the scrim — soften its own grid a bit */
body.video-bg .hero__grid { opacity: .28; }

/* hero copy sits ON TOP of the visible video — give the text a soft warm
   halo so the dark headline/paragraph stay legible over any moving frame */
body.video-bg .hero__copy { position: relative; }
body.video-bg .hero__copy::before {
  content: ""; position: absolute; inset: -32px -48px; z-index: -1;
  pointer-events: none; border-radius: 32px;
  background: radial-gradient(115% 100% at 22% 45%,
              rgba(251,247,240,.90), rgba(251,247,240,.62) 52%, transparent 78%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce){
  /* video is frozen on one frame here, so it still needs SOME veil for
     legibility — but the old flat 64% cream washed the whole screen white.
     Use the same light gradient as the moving state, only a touch stronger. */
  .bgv__scrim {
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(251,247,240,.14), transparent 60%),
      linear-gradient(180deg, rgba(251,247,240,.34), rgba(243,236,225,.40) 55%, rgba(251,247,240,.46));
  }
}

/* ============================================================
   MOBILE HERO — let the running background video breathe (2026-07-13)
   On phones the first view was dominated by a cream text-halo and a
   static building photo, so the moving footage was barely visible.
   These rules lighten the readability layers and drop the decorative
   still on small screens so the live video becomes the star.
   ============================================================ */
@media (max-width: 760px){
  /* soften + shrink the hero text halo so the video reads behind the copy */
  body.video-bg .hero__copy::before {
    inset: -12px -18px;
    border-radius: 24px;
    background: radial-gradient(122% 94% at 28% 42%,
                rgba(251,247,240,.70), rgba(251,247,240,.38) 56%, transparent 82%);
  }

  /* hide the static rendered-building still + 98% badge — the moving video
     already shows this kind of imagery, and dropping it pulls the live
     footage right up into the first screen */
  .hero__visual { display: none; }

  /* let the hero fill most of the screen so the video is the dominant
     first impression, with the copy centred over it */
  .hero { min-height: 86svh; padding-top: 164px; padding-bottom: 34px; }
  .hero .eyebrow { font-size: .7rem; letter-spacing: .14em; }
  .hero__inner { gap: 0; }
  .hero__meta { margin-top: 30px; }
}


/* 2026-07-26 Nova background performance patch: same visual, lower compositor cost. */
.bgv { contain: layout paint size; }
.bgv__video { backface-visibility: hidden; transform: translate3d(-50%, -50%, 0); will-change: transform; }
@media (max-width: 760px), (pointer: coarse) {
  body.video-bg .why, body.video-bg .stats, body.video-bg .footer,
  body.video-bg .cta__inner, body.video-bg .quote-result,
  body.video-bg .svc, body.video-bg .q-card, body.video-bg .form, body.video-bg .quote-card,
  body.video-bg .project-facts span, body.video-bg .team-card, body.video-bg .flow__card,
  body.video-bg .review:not(.review--feat), body.video-bg .reviews__summary, body.video-bg .review--feat,
  body.video-bg .proof__points span, body.video-bg .filter, body.video-bg .chip, body.video-bg .checks label,
  body.video-bg .field input, body.video-bg .field textarea, body.video-bg .field select,
  body.video-bg .service-drawer__panel li, body.video-bg .hero__copy::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* home IA: the home page summarizes; dedicated tabs hold details. */
.sec-head--compact { align-items: end; }
.home-nav { padding: clamp(72px, 10vw, 130px) 0; }
.home-nav__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr);
  gap: 18px;
}
.home-route {
  position: relative;
  min-height: 260px;
  padding: clamp(26px, 4vw, 42px);
  border-radius: var(--r-lg);
  background: rgba(251, 247, 240, .72);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.home-route::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 80% at 100% 0%, rgba(31,63,191,.18), transparent 60%), linear-gradient(145deg, rgba(255,255,255,.34), transparent);
  opacity: .85;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.home-route::after {
  content: "";
  position: absolute;
  left: clamp(22px, 3vw, 34px);
  right: clamp(22px, 3vw, 34px);
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--ember);
  transform: scaleX(.26);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.home-route:hover { transform: translateY(-8px); box-shadow: var(--shadow); background: var(--paper); }
.home-route:hover::before { transform: scale(1.08); opacity: 1; }
.home-route:hover::after { transform: scaleX(1); }
.home-route--primary {
  grid-row: span 2;
  min-height: 540px;
  background: var(--ink);
  color: var(--cream);
}
.home-route--primary::before {
  background: radial-gradient(95% 70% at 85% 10%, rgba(31,63,191,.34), transparent 62%), radial-gradient(70% 60% at 0% 100%, rgba(201,162,75,.25), transparent 60%);
}
.home-route__num {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1;
  color: rgba(16,14,11,.08);
}
.home-route--primary .home-route__num { color: rgba(251,247,240,.10); }
.home-route__tag {
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(31,63,191,.12);
  color: var(--ember);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-route--primary .home-route__tag { background: rgba(251,247,240,.12); color: var(--gold); }
.home-route h3 {
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.55rem);
  line-height: .98;
  letter-spacing: -.04em;
  margin-bottom: 16px;
}
.home-route p { max-width: 48ch; color: var(--muted); font-size: .98rem; }
.home-route--primary p { color: rgba(251,247,240,.72); font-size: 1.05rem; }
.home-route__link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  color: var(--ember);
}
.home-route--primary .home-route__link { color: var(--gold); }
.home-route__link svg { transition: transform .35s var(--ease); }
.home-route:hover .home-route__link svg { transform: translateX(5px); }
@media (max-width: 900px) {
  .home-nav__grid { grid-template-columns: 1fr; }
  .home-route, .home-route--primary { min-height: auto; grid-row: auto; }
}
@media (max-width: 520px) {
  .home-route { padding: 28px 22px; }
  .home-route__num { top: 18px; right: 20px; font-size: 2.4rem; }
  .home-route h3 { max-width: 12ch; }
}