/* -----------------------------------------------------------
   Base / tokens
----------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  /* Brand */
  --brand-hue: 212;                          /* updated by JS via data-hue */
  --brand: hsl(var(--brand-hue) 92% 54%);
  --brand-700: hsl(var(--brand-hue) 86% 50%);

  /* Colors */
  --bg: #0a0e12;
  --text: #eef2f7;
  --text-dim: color-mix(in oklab, var(--text) 72%, black);

  /* Layout */
  --radius: 12px;
  --pane-w: clamp(320px, 44vw, 660px);
  --hero-img: var(--hero-url, url('hero.jpg'));

  /* Grid controls */
  --grid-size: 36px;                         /* distance between grid lines */
  --grid-line: 1px;                          /* line thickness */
  --grid-color: hsl(var(--brand-hue) 96% 52% / .46);

  /* Hero left color-grade */
  --left-tint-spot: .46;
  --left-tint-wash: .20;

  /* Glass panel (hero right) */
  --glass-blur: 28px;
  --glass-blue-wash: .26;
  --glass-blue-edge: .44;
  --glass-specular: .10;

  /* Section-specific */
  --work-blue-wash: .16;
}

html, body { height: 100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img, svg{ display:block; max-width:100%; }
.wrap{ width:min(1200px, 92%); margin-inline:auto; }

/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
.header{
  position:fixed; inset-inline:0; inset-block-start:0; z-index:20;
  background: color-mix(in oklab, #000 68%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}
.header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block: clamp(12px, 2.2vw, 20px);
}
.brand{ display:inline-flex; align-items:center; gap:12px; font-weight:700; }
.brand__text{
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  letter-spacing:.2px; font-size:1.05rem;
}
.nav{ display:flex; gap: clamp(16px, 3vw, 36px); }
.nav a{ opacity:.9; }
.nav a:hover{ opacity:1; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 14px; border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.18); font-weight:600;
}
.btn--primary{
  border:none; color:#fff;
  background: linear-gradient(180deg, var(--brand), var(--brand-700));
  box-shadow: 0 14px 28px color-mix(in oklab, var(--brand) 42%, transparent);
}

/* -----------------------------------------------------------
   Hero
----------------------------------------------------------- */
.masthead{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:grid; align-items:end;
  padding-top: calc(64px + 4svh);
  background-image:
    linear-gradient(90deg,
      rgba(0,0,0,.80) 0%,
      rgba(0,0,0,.64) 30%,
      rgba(0,0,0,.38) 52%,
      rgba(0,0,0,0) 70%),
    var(--hero-img);
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: left center, left center;
  background-blend-mode: multiply, normal;
}

/* LEFT: brand color‑grade on the bricks */
.masthead::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode: color;
  background:
    radial-gradient(1100px 620px at 12% 60%,
      hsl(var(--brand-hue) 95% 56% / var(--left-tint-spot)) 0%,
      transparent 60%),
    linear-gradient(90deg,
      hsl(var(--brand-hue) 95% 56% / var(--left-tint-wash)) 0%,
      transparent 46%);
}
@supports not (mix-blend-mode: color){
  .masthead::before{ mix-blend-mode: normal; opacity:.18; }
}

/* RIGHT: blur + SQUARE grid panel */
.masthead::after{
  content:""; position:absolute; inset-block:0; inset-inline-end:0;
  width:var(--pane-w); z-index:2; pointer-events:none;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) contrast(.96);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) contrast(.96);
  background:
    repeating-linear-gradient(90deg, var(--grid-color) 0 var(--grid-line), transparent var(--grid-line) var(--grid-size)),
    repeating-linear-gradient(0deg, var(--grid-color) 0 var(--grid-line), transparent var(--grid-line) var(--grid-size)),
    linear-gradient(180deg, hsl(var(--brand-hue) 96% 46% / var(--glass-specular)) 0%, transparent 45%),
    linear-gradient(90deg, transparent 0%, hsl(var(--brand-hue) 96% 44% / calc(var(--glass-blue-edge) * .7)) 55%, hsl(var(--brand-hue) 96% 40% / var(--glass-blue-edge)) 100%),
    radial-gradient(120% 100% at 75% 40%, hsl(var(--brand-hue) 96% 44% / var(--glass-blue-wash)) 0%, transparent 70%),
    radial-gradient(140% 120% at 92% 60%, hsl(var(--brand-hue) 96% 38% / calc(var(--glass-blue-wash) + .10)) 0%, transparent 60%);
  background-blend-mode: screen, screen, normal, normal, normal, normal;
  border-left: 1px solid hsl(var(--brand-hue) 92% 72% / .35);
  box-shadow: -26px 0 56px rgba(0,0,0,.45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead::after{
    background-image:
      repeating-linear-gradient(90deg, var(--grid-color) 0 var(--grid-line), transparent var(--grid-line) var(--grid-size)),
      repeating-linear-gradient(0deg, var(--grid-color) 0 var(--grid-line), transparent var(--grid-line) var(--grid-size)),
      linear-gradient(180deg, hsl(var(--brand-hue) 96% 46% / var(--glass-specular)) 0%, transparent 45%),
      linear-gradient(90deg, transparent 0%, hsl(var(--brand-hue) 96% 44% / calc(var(--glass-blue-edge) * .7)) 55%, hsl(var(--brand-hue) 96% 40% / var(--glass-blue-edge)) 100%),
      radial-gradient(120% 100% at 75% 40%, hsl(var(--brand-hue) 96% 44% / var(--glass-blue-wash)) 0%, transparent 70%),
      radial-gradient(140% 120% at 92% 60%, hsl(var(--brand-hue) 96% 38% / calc(var(--glass-blue-wash) + .10)) 0%, transparent 60%),
      var(--hero-img);
    background-blend-mode: screen, screen, normal, normal, normal, normal, normal;
    background-size: auto, auto, auto, auto, auto, auto, cover;
    background-position: right top, right top, right top, right top, right top, right top, left center;
    filter: blur(14px) saturate(1.05) contrast(.95);
    opacity:.92;
  }
}

/* Content block */
.masthead__inner{
  position:relative; z-index:3;
  padding-block: clamp(64px, 12vh, 200px) clamp(36px, 9vh, 140px);
  transform: translateY(-1in); /* user-requested lift */
}

/* Type */
.kicker{
  margin:0 0 .75rem; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;
  color: color-mix(in oklab, var(--text) 70%, black);
}
.display{
  margin:0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(2.7rem, 7.6vw, 6.2rem);
  line-height:.98; letter-spacing:-.02em; text-wrap:balance;
  text-shadow: 0 .28rem .56rem hsl(var(--brand-hue) 96% 58% / .10);
}
.display .soft{ color: color-mix(in oklab, var(--text) 80%, black); font-weight:700; }

.lead{ margin-top: clamp(12px, 1.4vw, 18px); max-width:68ch; color:var(--text-dim); }

/* CTAs */
.cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top: clamp(22px, 3.2vw, 36px); }
.btn--solid{
  border:none; color:#fff; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand), var(--brand-700));
  box-shadow: 0 18px 36px color-mix(in oklab, var(--brand) 40%, transparent);
}
.btn--solid:hover{ transform: translateY(-1px); }
.link-cta{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  border-bottom:2px solid hsl(var(--brand-hue) 80% 62% / .7);
  padding-bottom:.1rem; color: color-mix(in oklab, var(--text) 92%, #dff3ff);
}
.link-cta:hover{ border-bottom-color: hsl(var(--brand-hue) 92% 60%); }

/* Scroll hint */
.scroll{
  --size:44px;
  position:absolute; left:50%; bottom: clamp(18px, 4vh, 36px); translate:-50% 0;
  width:var(--size); height:var(--size);
  display:grid; place-items:center;
  border-radius: 999px; border:1px solid rgba(255,255,255,.2);
  color: color-mix(in oklab, var(--text) 80%, black);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
}

/* Responsive */
@media (max-width: 900px){
  .nav{ display:none; }
  :root{ --pane-w: 48vw; }
}
@media (max-width: 520px){
  .display{ letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* -----------------------------------------------------------
   WORK — section wash + grid + cases
----------------------------------------------------------- */
#work{ scroll-margin-top: 88px; }
.work{ position: relative; padding-block: clamp(72px, 14vh, 140px); }
.work::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 60% at 80% 10%, hsl(var(--brand-hue) 96% 58% / var(--work-blue-wash)) 0%, transparent 60%),
    radial-gradient(120% 80% at 0% 90%, hsl(var(--brand-hue) 96% 58% / calc(var(--work-blue-wash) * .6)) 0%, transparent 70%);
}
.work .wrap{ position: relative; z-index:1; }
.work .wrap{ display: grid; gap: clamp(28px, 3.4vw, 40px); }
.work__head{ max-width: 960px; }
.work__title{
  margin: .25rem 0 0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height:1.04;
  letter-spacing:-.01em;
  text-wrap:balance;
  text-shadow: 0 .18rem .42rem hsl(var(--brand-hue) 96% 58% / .10);
}
.work__lead{ margin-top: .7rem; max-width: 68ch; color: var(--text-dim); }

.work__grid{
  --cols: 12;
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(var(--cols), 1fr);
}
.case{ grid-column: 1 / -1; }
.case__link{ display:block; outline: none; }
.case__frame{
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  overflow: clip; isolation: isolate;
  background: linear-gradient(180deg,
    hsl(var(--brand-hue) 96% 60% / .08),
    hsl(var(--brand-hue) 92% 52% / .04));
  border: 1px solid hsl(var(--brand-hue) 92% 70% / .28);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 8px 22px hsl(var(--brand-hue) 96% 58% / .10) inset,
    0 0 0 1px hsl(var(--brand-hue) 96% 60% / .08) inset;
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  perspective: 1000px;
}
.case__frame::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, hsl(var(--brand-hue) 96% 60% / .85) 30%, transparent 100%);
  opacity:.8; pointer-events: none;
}
.case__img{
  width:100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  transform: translateZ(0); transition: transform .45s cubic-bezier(.2,.8,.2,1);
  filter: saturate(1.02) contrast(1.02);
}
.case__meta{
  position:absolute; inset: auto 12px 12px 12px;
  display:flex; align-items:center; gap:8px; min-height:36px; line-height:1;
  padding: 6px 10px; border-radius: calc(var(--radius) - 2px);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  background:
    linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .14), hsl(var(--brand-hue) 96% 58% / .08)),
    rgba(0,0,0,.54);
  border: 1px solid hsl(var(--brand-hue) 96% 66% / .30);
}
.case__tag{
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.02em;
  padding:.12rem .42rem; border-radius:999px;
  background: hsl(var(--brand-hue) 96% 60% / .20);
  border: 1px solid hsl(var(--brand-hue) 96% 62% / .35);
}
.case__title{ font-size: .92rem; font-weight:700; letter-spacing:.2px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.case__year{ font-size:.78rem; opacity:.85; font-variant-numeric: tabular-nums; }

.case__link:focus-visible .case__frame,
.case__link:hover .case__frame{
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 26px 80px rgba(0,0,0,.55),
    0 10px 26px hsl(var(--brand-hue) 96% 58% / .14) inset;
}
.case__link:focus-visible .case__img,
.case__link:hover .case__img{ transform: scale(1.03); }

@media (min-width: 981px){
  .work .case:nth-child(1){ grid-column: 1 / span 8; }
  .work .case:nth-child(2){ grid-column: 9 / -1; }
  .work .case:nth-child(3){ grid-column: 1 / span 4; }
  .work .case:nth-child(4){ grid-column: 5 / -1; }
  .work .case:nth-child(5){ grid-column: 1 / span 8; }
  .work .case:nth-child(6){ grid-column: 9 / -1; }
  .work .case:nth-child(3),
  .work .case:nth-child(4){ margin-top: clamp(6px, 0.8vw, 12px); }
}
@media (min-width: 721px) and (max-width: 980px){
  .work .case:nth-child(n){ grid-column: span 6; }
}

/* -----------------------------------------------------------
   BLUEPRINT RAIL CTA — embedded into Work (no divider)
----------------------------------------------------------- */
:root{
  --cta-plate-radius: calc(var(--radius) + 10px);
  --cta-plate-blur: 16px;
}
.cta-rail{
  position: relative; isolation: isolate;
  min-height: 70svh;
  display: grid; place-items: center;
  padding-block: clamp(40px, 12vh, 120px);
}
.work .cta-rail--in-work::before{ content: none !important; } /* inherit .work::before */
.cta-rail--in-work .cta-rail__rail{ display: none !important; }

.cta-rail__plate{
  position: relative; z-index:1;
  width: min(940px, 92vw); margin-inline:auto;
  padding: clamp(20px, 3vw, 34px) clamp(18px, 3.4vw, 40px);
  border-radius: var(--cta-plate-radius);
  border: 1px solid hsl(var(--brand-hue) 96% 66% / .30);
  background:
    radial-gradient(100% 140% at calc(var(--mx, .52) * 100%) calc(var(--my, .48) * 100%), hsl(var(--brand-hue) 96% 60% / .14), transparent 50%),
    linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .12), hsl(var(--brand-hue) 96% 44% / .06)),
    rgba(0,0,0,.48);
  backdrop-filter: blur(var(--cta-plate-blur)) saturate(1.02);
  -webkit-backdrop-filter: blur(var(--cta-plate-blur)) saturate(1.02);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 1px 0 hsl(var(--brand-hue) 96% 60% / .08) inset;
}
.cta-rail__head{ text-align:center; }
.cta-rail__title{
  margin: .15rem 0 0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(1.9rem, 4.8vw, 3.2rem);
  line-height: 1.04; letter-spacing: -.01em;
  text-shadow: 0 .18rem .42rem hsl(var(--brand-hue) 96% 58% / .10);
}
.cta-rail__lead{ margin-top:.6rem; color: var(--text-dim); }
.cta-rail__actions{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap: 12px; margin-top: clamp(18px, 2.4vw, 22px);
}
.btn--ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 14px; border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.22);
  font-weight:600; color: var(--text); background: transparent;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn--ghost:hover{
  border-color: hsl(var(--brand-hue) 92% 60% / .60);
  box-shadow: 0 8px 24px hsl(var(--brand-hue) 96% 58% / .10);
  transform: translateY(-1px);
}
@media (max-width: 520px){
  .cta-rail__plate{ padding: 16px 14px; border-radius: calc(var(--radius) + 6px); }
  .cta-rail__actions .btn,
  .cta-rail__actions .btn--ghost{ width:100%; }
}

/* -----------------------------------------------------------
   SERVICES — “architectural” plates + full-width crisp grid
----------------------------------------------------------- */

/* Tunables for Services grid visibility */
:root{
  /* opacity of each line; 0.18–0.42 is a good range */
  --svc-grid-alpha: .34;
}

.services{
  position: relative; isolation: isolate;
  padding-block: clamp(72px, 16vh, 160px);
}
/* Ambient blue underlay (no blur) */
.services::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 85% 12%, hsl(var(--brand-hue) 96% 58% / .16) 0%, transparent 60%),
    radial-gradient(120% 100% at 0% 88%,  hsl(var(--brand-hue) 96% 58% / .10) 0%, transparent 60%);
}
/* CRISP SQUARE GRID across the whole section */
.services::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, hsl(var(--brand-hue) 96% 52% / var(--svc-grid-alpha)) 0 var(--grid-line), transparent var(--grid-line) var(--grid-size)),
    repeating-linear-gradient(0deg,  hsl(var(--brand-hue) 96% 52% / var(--svc-grid-alpha)) 0 var(--grid-line), transparent var(--grid-line) var(--grid-size));
  background-blend-mode: normal;
  transform: translateZ(0);
}
.services .wrap{ position: relative; z-index:1; }

.services__head{ max-width: 960px; margin-inline:auto; text-align:center; }
.services__title{
  margin:.25rem 0 0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height:1.04; letter-spacing:-.01em;
  text-shadow: 0 .18rem .42rem hsl(var(--brand-hue) 96% 58% / .10);
}
.services__lead{ margin-top:.7rem; color: var(--text-dim); }

.services__grid{
  --cols: 12;
  display:grid;
  gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(var(--cols), 1fr);
  margin-top: clamp(28px, 4.4vw, 48px);
}
.svc{
  position: relative;
  grid-column: 1 / -1;
  padding: clamp(18px, 2.6vw, 26px) clamp(16px, 3vw, 32px);
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid hsl(var(--brand-hue) 96% 66% / .28);
  background:
    radial-gradient(100% 140% at calc(var(--mx, .52) * 100%) calc(var(--my, .48) * 100%), hsl(var(--brand-hue) 96% 60% / .12), transparent 50%),
    linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .10), hsl(var(--brand-hue) 96% 44% / .06)),
    rgba(0,0,0,.46);
  backdrop-filter: blur(14px) saturate(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(1.02);
  box-shadow: 0 26px 80px rgba(0,0,0,.50), 0 1px 0 hsl(var(--brand-hue) 96% 60% / .08) inset;
  transform: translateY(10px); opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.svc::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background: repeating-linear-gradient(115deg, hsl(var(--brand-hue) 96% 44% / .08) 0 1px, transparent 1px 14px);
  mix-blend-mode: screen; opacity:.45;
}
@media (min-width: 981px){
  .svc--web { grid-column: 1 / span 6; }
  .svc--lead{ grid-column: 7 / -1; }
}
.svc__head{ margin-bottom: .6rem; }
.svc__kicker{
  margin:0 0 .35rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color: color-mix(in oklab, var(--text) 68%, black);
}
.svc__title{
  margin:0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
}
.svc__sub{ margin:.4rem 0 0; color: var(--text-dim); max-width: 60ch; }

.svc__list{
  list-style:none; padding:0; margin: clamp(10px, 1.8vw, 16px) 0 0;
  display:grid; gap: .55rem;
}
.svc__list li{ position:relative; padding-left: 28px; }
.svc__list li::before{
  content:""; position:absolute; left:0; top:.35em;
  width:18px; height:18px; border-radius:999px;
  border:1px solid hsl(var(--brand-hue) 96% 60% / .40);
  background:
    radial-gradient(60% 60% at 50% 50%, hsl(var(--brand-hue) 96% 58% / .18), transparent),
    linear-gradient(180deg, hsl(var(--brand-hue) 96% 60% / .10), transparent);
  box-shadow: inset 0 0 0 1px hsl(var(--brand-hue) 96% 60% / .18);
}
.svc__list li::after{
  content:""; position:absolute; left:5px; top:.65em;
  width:8px; height:4px; border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg);
  opacity:.8; color: color-mix(in oklab, var(--text) 90%, #cfe7ff);
}
.svc__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top: clamp(14px, 2.2vw, 20px);
}

/* Reveal helper (paired with JS) */
.services .svc.is-visible{ opacity:1; transform: translateY(0); }

/* Phone: slightly quieter grid */
@media (max-width: 520px){
  :root{ --svc-grid-alpha: .26; }
}

/* -----------------------------------------------------------
   Focus rings etc.
----------------------------------------------------------- */
.case__link:focus-visible{
  outline: 2px solid hsl(var(--brand-hue) 96% 60% / .9);
  outline-offset: 4px;
  border-radius: calc(var(--radius) + 8px);
}
/* -----------------------------------------------------------
   STUDIO — ruled ledger + sticky index + notched plates
   New look; restrained & premium.
----------------------------------------------------------- */
:root{
  --studio-gap: clamp(22px, 3vw, 32px);
  --studio-rail: 2px;
  --studio-grid-gap: 28px;
  --studio-grid-line: 1px;
  --studio-grid-color: hsl(var(--brand-hue) 96% 52% / .22);
  --panel-blur: 12px;
}

.studio{
  position: relative; isolation:isolate;
  padding-block: clamp(80px, 18vh, 180px);
}

.studio .wrap,
.studio__wrap{ position:relative; z-index:1; }
.studio__wrap{
  display:grid; align-items:start;
  gap: var(--studio-gap);
  grid-template-columns: minmax(220px, .95fr) minmax(0, 2.8fr);
}
@media (max-width: 900px){
  .studio__wrap{ grid-template-columns: 1fr; }
}

/* Sticky ledger index */
.studio__index{
  position: sticky; top: 88px; align-self:start;
  padding-block: 8px 16px; padding-left: 14px; margin-left: 6px;
  border-left: var(--studio-rail) solid hsl(var(--brand-hue) 96% 60% / .35);
}
.studio__label{
  margin:0 0 10px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color: color-mix(in oklab, var(--text) 68%, black);
}
.studio__nav{ margin:0; padding:0; list-style:none; display:grid; gap:.35rem; }
.studio__nav a{
  display:grid; grid-template-columns: 2.6ch 1fr; align-items:center; gap:.6rem;
  padding:.22rem .3rem .22rem 0; border-radius:8px;
  color: color-mix(in oklab, var(--text) 86%, black);
}
.studio__nav .num{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; opacity:.9;
}
.studio__nav .txt{ opacity:.85; }
.studio__nav a:hover{
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--text);
}

/* Head block */
.studio__head{ margin-bottom: clamp(14px, 2vw, 22px); }
.studio__title{
  margin:.2rem 0 0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height:1.04;
  text-shadow: 0 .18rem .42rem hsl(var(--brand-hue) 96% 58% / .10);
}
.studio__lead{ margin-top:.6rem; color: var(--text-dim); max-width: 68ch; }

/* Plates (not cards): glassy, with tiny corner ticks */
.panel{
  position:relative;
  margin-top: clamp(18px, 2vw, 24px);
  padding: clamp(18px, 2.6vw, 26px) clamp(16px, 3vw, 32px);
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid hsl(var(--brand-hue) 96% 66% / .28);
  background:
    linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .10), hsl(var(--brand-hue) 96% 44% / .06)),
    rgba(0,0,0,.46);
  backdrop-filter: blur(var(--panel-blur)) saturate(1.02);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.02);
  box-shadow: 0 26px 80px rgba(0,0,0,.50), 0 1px 0 hsl(var(--brand-hue) 96% 60% / .08) inset;
  transform: translateY(12px); opacity:0; /* reveal (JS below) */
  transition: opacity .6s ease, transform .6s ease;
}
/* corner ticks (architectural, not “decorative borders”) */
.panel::before, .panel::after{
  content:""; position:absolute; width:16px; height:12px; pointer-events:none; opacity:.6;
}
.panel::before{ top:-1px; left:-1px; border-top:1px solid hsl(var(--brand-hue) 96% 62% / .45); border-left:1px solid hsl(var(--brand-hue) 96% 62% / .45); }
.panel::after{ bottom:-1px; right:-1px; border-bottom:1px solid hsl(var(--brand-hue) 96% 62% / .45); border-right:1px solid hsl(var(--brand-hue) 96% 62% / .45); }
.panel__head{ margin-bottom:.6rem; }
.panel__title{
  margin:0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.panel__sub{ margin:.35rem 0 0; color: var(--text-dim); }

/* Lists */
.bullets{ list-style:none; padding:0; margin: clamp(8px, 1.4vw, 14px) 0 0; display:grid; gap:.5rem; }
.bullets li{ padding-left: 26px; position:relative; }
.bullets li::before{
  content:""; position:absolute; left:0; top:.5em; width:14px; height:14px; border-radius:999px;
  border:1px solid hsl(var(--brand-hue) 96% 60% / .35);
  background: radial-gradient(60% 60% at 50% 50%, hsl(var(--brand-hue) 96% 58% / .16), transparent);
  box-shadow: inset 0 0 0 1px hsl(var(--brand-hue) 96% 60% / .16);
}

/* Steps (01—05 rail look) */
.steps{
  counter-reset: step; list-style:none; padding:0;
  margin: clamp(8px, 1.4vw, 14px) 0 0; display:grid; gap:.7rem;
  border-left: 2px solid hsl(var(--brand-hue) 96% 60% / .25); padding-left: 18px;
}
.steps li{ position:relative; }
.steps li::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position:absolute; left:-44px; top:.1rem;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif; font-weight:800; opacity:.9;
}
.steps h4{ margin:0 0 .1rem; font-weight:700; }
.steps p{ margin:0; color: var(--text-dim); }

/* Roster (avatars with initials) */
.roster{ list-style:none; padding:0; margin: clamp(8px, 1.4vw, 14px) 0 0; display:grid; gap:.8rem; }
.roster li{ display:grid; grid-template-columns: 40px 1fr; gap:.8rem; align-items:start; }
.avatar{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  border:1px solid hsl(var(--brand-hue) 96% 66% / .30);
  background:
    radial-gradient(100% 140% at 60% 40%, hsl(var(--brand-hue) 96% 60% / .14), transparent 60%),
    rgba(0,0,0,.46);
  font-weight:700;
}

/* Chips */
.chips{ list-style:none; padding:0; margin: clamp(8px, 1.4vw, 14px) 0 0;
  display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:.32rem .6rem; border-radius:999px;
  border:1px solid hsl(var(--brand-hue) 96% 66% / .28);
  background: linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .08), hsl(var(--brand-hue) 96% 44% / .04));
  font-weight:600; font-size:.9rem;
}

/* Stats (quiet, premium) */
.stats{
  margin-top: clamp(10px, 1.6vw, 16px);
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(8px, 1.2vw, 14px);
}
.stat{
  padding: 10px 12px; border-radius: 10px;
  border:1px solid hsl(var(--brand-hue) 96% 66% / .22);
  background: linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .06), hsl(var(--brand-hue) 96% 44% / .04));
}
.stat__value{
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; font-size: clamp(1.05rem, 2.4vw, 1.3rem); letter-spacing:.01em;
}
.stat__label{ color: var(--text-dim); font-size:.9rem; margin-top:.2rem; }

/* Reveal on scroll (paired with JS) */
.studio .panel.is-visible{ opacity:1; transform: translateY(0); }

/* Phone refinements */
@media (max-width: 520px){
  .stats{ grid-template-columns: 1fr; }
}
/* =========================================================
   CALL — speed rail + phases (clean, architectural)
   ========================================================= */
#call{ scroll-margin-top: 88px; }
.call{
  position: relative; isolation:isolate;
  padding-block: clamp(72px, 16vh, 160px);
}
.call::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(110% 80% at 80% 15%, hsl(var(--brand-hue) 96% 58% / .14) 0%, transparent 60%),
    radial-gradient(120% 90% at 0% 90%, hsl(var(--brand-hue) 96% 58% / .10) 0%, transparent 60%);
}
.call .wrap{ position:relative; z-index:1; }

.call__head{ max-width: 960px; margin-inline:auto; text-align:center; }
.call__title{
  margin:.25rem 0 0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height:1.04;
  text-shadow: 0 .18rem .42rem hsl(var(--brand-hue) 96% 58% / .10);
}
.call__lead{ margin-top:.6rem; color: var(--text-dim); }

/* Speed rail (horizontal on desktop, vertical on phones) */
:root{
  --call-rail-thickness: 2px;
  --call-node: 16px;
}
.speed{
  position: relative;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(22px, 3.6vw, 36px);
  padding-top: 28px;
  background:
    linear-gradient(0deg, hsl(var(--brand-hue) 96% 60% / .45), hsl(var(--brand-hue) 96% 60% / .45))
      center / 100% var(--call-rail-thickness) no-repeat;
}
.phase{
  position: relative;
  padding-top: 8px;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.phase::before{
  content:""; position:absolute;
  top: calc(-1 * (var(--call-node)/2 + var(--call-rail-thickness)/2));
  left: 50%; translate:-50% 0;
  width: var(--call-node); height: var(--call-node); border-radius: 999px;
  border: 1.5px solid hsl(var(--brand-hue) 96% 60% / .55);
  background:
    radial-gradient(70% 70% at 50% 45%, hsl(var(--brand-hue) 96% 58% / .18), transparent),
    rgba(0,0,0,.46);
  box-shadow:
    inset 0 0 0 1px hsl(var(--brand-hue) 96% 60% / .16),
    0 .5px 0 hsl(var(--brand-hue) 96% 60% / .10);
}
.phase.is-visible{ opacity:1; transform: translateY(0); }

.phase__time{
  display:inline-block; font-weight:700; letter-spacing:.02em;
  padding:.22rem .5rem; border-radius:999px;
  border:1px solid hsl(var(--brand-hue) 96% 60% / .30);
  background: linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .12), hsl(var(--brand-hue) 96% 44% / .06));
  margin-bottom:.4rem;
}
.phase__title{ margin:.1rem 0 .2rem; font-weight:700; }
.phase__desc{ margin:0; color: var(--text-dim); }

.call__actions{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top: clamp(18px, 2.6vw, 24px);
}

@media (max-width: 720px){
  .speed{
    grid-template-columns: 1fr;
    padding-left: 26px; padding-top: 0; padding-bottom: 0;
    background:
      linear-gradient(90deg, hsl(var(--brand-hue) 96% 60% / .45), hsl(var(--brand-hue) 96% 60% / .45))
        10px center / var(--call-rail-thickness) 100% no-repeat;
  }
  .phase{ padding-left: 16px; padding-top: 0; }
  .phase::before{ top:.4rem; left: 10px; translate: 0 0; }
}

/* =========================================================
   PROPOSAL — premium “plate” lead form
   ========================================================= */
#proposal{ scroll-margin-top: 88px; }
.proposal{
  position:relative; isolation:isolate;
  padding-block: clamp(72px, 16vh, 160px);
}
.proposal::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(100% 80% at 85% 10%, hsl(var(--brand-hue) 96% 58% / .14) 0%, transparent 60%),
    radial-gradient(120% 100% at 0% 90%, hsl(var(--brand-hue) 96% 58% / .10) 0%, transparent 60%);
}
.proposal .wrap{ position:relative; z-index:1; }

:root{
  --form-plate-blur: 14px;
  --form-etch-alpha: .08;
}
.form-plate{
  width:min(960px, 92vw);
  margin-inline:auto;
  padding: clamp(20px, 3vw, 34px) clamp(18px, 3.4vw, 40px);
  border-radius: calc(var(--radius) + 10px);
  border:1px solid hsl(var(--brand-hue) 96% 66% / .30);
  background:
    radial-gradient(100% 140% at calc(var(--mx, .52) * 100%) calc(var(--my, .48) * 100%), hsl(var(--brand-hue) 96% 60% / .12), transparent 50%),
    linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .10), hsl(var(--brand-hue) 96% 44% / .06)),
    rgba(0,0,0,.46);
  backdrop-filter: blur(var(--form-plate-blur)) saturate(1.02);
  -webkit-backdrop-filter: blur(var(--form-plate-blur)) saturate(1.02);
  box-shadow: 0 26px 80px rgba(0,0,0,.50), 0 1px 0 hsl(var(--brand-hue) 96% 60% / .08) inset;
  position:relative; isolation:isolate;
}
.form-plate::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background: repeating-linear-gradient(115deg, hsl(var(--brand-hue) 96% 44% / var(--form-etch-alpha)) 0 1px, transparent 1px 14px);
  mix-blend-mode: screen; opacity:.45;
}
.form-plate__head{ text-align:center; }
.form-plate__title{
  margin:.15rem 0 0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(1.9rem, 4.6vw, 3.0rem);
  line-height:1.04;
  text-shadow: 0 .18rem .42rem hsl(var(--brand-hue) 96% 58% / .10);
}
.form-plate__lead{ margin-top:.5rem; color: var(--text-dim); }

/* Form fields */
.form{ margin-top: clamp(16px, 2.4vw, 22px); }
.form__grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field--full{ grid-column: 1 / -1; }

.field label{
  font-size:.9rem; color: color-mix(in oklab, var(--text) 78%, black);
}
.input, .select, .textarea{
  appearance:none; width:100%;
  border-radius: calc(var(--radius) + 4px);
  border:1px solid hsl(var(--brand-hue) 96% 66% / .25);
  background: linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.02));
  color: var(--text);
  padding: 10px 12px; line-height:1.35; font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder, .textarea::placeholder{ color: color-mix(in oklab, var(--text) 60%, black); }
.input:focus, .select:focus, .textarea:focus{
  outline: none;
  border-color: hsl(var(--brand-hue) 96% 60% / .60);
  box-shadow: 0 0 0 3px hsl(var(--brand-hue) 96% 60% / .22);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04));
}

.form__actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top: clamp(14px, 2vw, 18px);
}
.form__note{ color: var(--text-dim); font-size:.9rem; }

.form__success{
  display:grid; place-items:center; text-align:center;
  gap:.4rem; padding: 28px 18px; margin-top: 12px;
  border-radius: calc(var(--radius) + 6px);
  border:1px solid hsl(var(--brand-hue) 96% 66% / .30);
  background: linear-gradient(180deg, hsl(var(--brand-hue) 96% 58% / .10), hsl(var(--brand-hue) 96% 44% / .06));
}

/* Mobile form grid */
@media (max-width: 720px){
  .form__grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   PROPOSAL form — small refinement for single Timeline row
   ========================================================= */
#proposal{ scroll-margin-top: 88px; }
.form__grid .field--full{ grid-column: 1 / -1; }

/* If your project already includes the proposal styles I sent earlier,
   the rule above is all you need for the Budget removal layout. */

/* =========================================================
   FOOTER — architectural, warm, restrained
   ========================================================= */
.footer{
  position: relative; isolation: isolate;
  padding-block: clamp(48px, 10vh, 90px) 0;
  color: var(--text);
}

/* Subtle environment: faint horizontal ledger lines + gentle brand wash */
.footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* brand glows (very soft) */
    radial-gradient(120% 100% at 85% 0%,
      hsl(var(--brand-hue) 96% 58% / .14) 0%, transparent 60%),
    radial-gradient(120% 100% at 0% 100%,
      hsl(var(--brand-hue) 96% 58% / .10) 0%, transparent 60%),
    /* crisp horizontal ledger lines (no blur) */
    repeating-linear-gradient(0deg,
      hsl(var(--brand-hue) 96% 52% / .24) 0 1px,
      transparent 1px 28px);
  background-blend-mode: normal;
}

.footer__grid{
  position: relative; z-index:1;
  display:grid; gap: clamp(18px, 2.4vw, 34px);
  grid-template-columns: minmax(260px, 1.2fr) minmax(0, 1.8fr);
  align-items:start;
}
@media (max-width: 900px){
  .footer__grid{ grid-template-columns: 1fr; }
}

/* Brand block */
.footer .brand--footer{ display:inline-flex; align-items:center; gap:12px; opacity:.95; }
.footer__title{
  margin:.35rem 0 0;
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}
.footer__tagline{ margin:.4rem 0 0; color: var(--text-dim); max-width: 42ch; }
.footer__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top: .8rem; }

/* Nav columns */
.footer__navs{
  display:grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}
.footer__heading{
  margin:0 0 .4rem; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color: color-mix(in oklab, var(--text) 70%, black);
}
.footer__navs ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer__navs a{ opacity:.92; }
.footer__navs a:hover{ opacity:1; }

/* Bottom bar */
.footer__bottom{
  margin-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 12px 16px;
}
.footer__bottom .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer__legal{ margin:0; color: var(--text-dim); font-size:.92rem; }
.footer__top{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
  border-bottom:2px solid hsl(var(--brand-hue) 80% 62% / .7);
  padding-bottom:.06rem;
}
@media (max-width: 600px){
  .footer__bottom .wrap{ flex-direction:column; align-items:flex-start; gap:8px; }
}
/* =========================================================
   FOOTER — make the grid identical to the hero panel
   ========================================================= */

/* Ensure footer is a stacking context; keep content above the effect */
.footer{ position: relative; isolation: isolate; }
.footer .wrap{ position: relative; z-index: 1; }

/* Remove any previous footer wash/ledger lines */
.footer::before{ content: none !important; }

/* Clone the hero’s right-side blue glass grid panel */
.footer::after{
  content:"";
  position:absolute; inset-block:0; inset-inline-end:0;
  width: var(--pane-w);                      /* same token as hero */
  z-index: 0; pointer-events:none;

  /* Same glassiness as .masthead::after */
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) contrast(.96);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) contrast(.96);

  /* Layer order: grid (top), specular, edge, radial glows (bottom) */
  background:
    /* vertical grid lines */
    repeating-linear-gradient(90deg,
      var(--grid-color) 0 calc(var(--grid-line)),
      transparent calc(var(--grid-line)) var(--grid-size)),
    /* horizontal grid lines */
    repeating-linear-gradient(0deg,
      var(--grid-color) 0 calc(var(--grid-line)),
      transparent calc(var(--grid-line)) var(--grid-size)),
    /* soft top specular */
    linear-gradient(180deg,
      hsl(var(--brand-hue) 96% 46% / var(--glass-specular)) 0%,
      transparent 45%),
    /* deeper blue toward the far right edge */
    linear-gradient(90deg,
      transparent 0%,
      hsl(var(--brand-hue) 96% 44% / calc(var(--glass-blue-edge) * .7)) 55%,
      hsl(var(--brand-hue) 96% 40% / var(--glass-blue-edge)) 100%),
    /* broad blue wash */
    radial-gradient(120% 100% at 75% 40%,
      hsl(var(--brand-hue) 96% 44% / var(--glass-blue-wash)) 0%,
      transparent 70%),
    /* tighter glow tucked into the far-right quadrant */
    radial-gradient(140% 120% at 92% 60%,
      hsl(var(--brand-hue) 96% 38% / calc(var(--glass-blue-wash) + .10)) 0%,
      transparent 60%);
  background-blend-mode: screen, screen, normal, normal, normal, normal;

  /* Same subtle edge + shadow as hero */
  border-left: 1px solid hsl(var(--brand-hue) 92% 72% / .35);
  box-shadow: -26px 0 56px rgba(0,0,0,.45);
}

/* Fallback for browsers without backdrop-filter (mirror hero fallback) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .footer::after{
    background-image:
      repeating-linear-gradient(90deg,
        var(--grid-color) 0 calc(var(--grid-line)),
        transparent calc(var(--grid-line)) var(--grid-size)),
      repeating-linear-gradient(0deg,
        var(--grid-color) 0 calc(var(--grid-line)),
        transparent calc(var(--grid-line)) var(--grid-size)),
      linear-gradient(180deg,
        hsl(var(--brand-hue) 96% 46% / var(--glass-specular)) 0%,
        transparent 45%),
      linear-gradient(90deg,
        transparent 0%,
        hsl(var(--brand-hue) 96% 44% / calc(var(--glass-blue-edge) * .7)) 55%,
        hsl(var(--brand-hue) 96% 40% / var(--glass-blue-edge)) 100%),
      radial-gradient(120% 100% at 75% 40%,
        hsl(var(--brand-hue) 96% 44% / var(--glass-blue-wash)) 0%,
        transparent 70%),
      radial-gradient(140% 120% at 92% 60%,
        hsl(var(--brand-hue) 96% 38% / calc(var(--glass-blue-wash) + .10)) 0%,
        transparent 60%);
    background-blend-mode: screen, screen, normal, normal, normal, normal;

    /* simulate glassiness like the hero fallback */
    filter: blur(14px) saturate(1.05) contrast(.95);
    opacity:.92;
  }
}
/* Make the grid full-bleed instead of a right-side panel */
.footer::after{
  inset: 0; width: 100%;
  border-left: none;
  box-shadow: none;
}
/* Logo image helper */
.brand__img{
  width:28px; height:28px;
  border-radius:8px;        /* matches the old rounded look */
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
}
/* ===== STUDIO → ALL‑IN: plain background (no ledger lines) ===== */
.studio::before{
  content: none !important;
  background: none !important;
}
/* STUDIO — compact trailing space */
.studio{
  padding-block-start: clamp(64px, 12vh, 120px);
  padding-block-end:   clamp(28px, 8vh, 60px);
}

/* Safety: remove any trailing margin on the last block */
#studio .wrap > :last-child,
#studio .panel:last-child{
  margin-bottom: 0 !important;
}
/* STUDIO — turn off sticky index when content is short */
.studio .studio__index{
  position: static;
  top: auto;
  padding-block: 0;
  border: 0;
  margin: 0;
}
/* ===== PROPOSAL — make background identical to SERVICES ===== */

/* Ambient blue underlay (match .services::before exactly) */
.proposal::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 85% 12%,
      hsl(var(--brand-hue) 96% 58% / .16) 0%,
      transparent 60%),
    radial-gradient(120% 100% at 0% 88%,
      hsl(var(--brand-hue) 96% 58% / .10) 0%,
      transparent 60%);
}

/* CRISP SQUARE GRID across the whole section (match .services::after exactly) */
.proposal::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      hsl(var(--brand-hue) 96% 52% / var(--svc-grid-alpha)) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-size)),
    repeating-linear-gradient(0deg,
      hsl(var(--brand-hue) 96% 52% / var(--svc-grid-alpha)) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-size));
  background-blend-mode: normal;
  transform: translateZ(0);
}
/* ===== FOOTER — plain background (no grid, no glow) ===== */
.footer { background: var(--bg); } /* optional, just to be explicit */

.footer::before,
.footer::after{
  content: none !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ===== WORK gallery — show full screenshots (no crop) ===== */

/* Give each case a consistent frame height (same as before) */
.work .case__frame{
  aspect-ratio: var(--case-ratio, 16 / 10); /* can be overridden per-tile */
}

/* Let the image fit inside the frame without cropping */
.work .case__img{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;        /* override earlier 16/10 on the <img> */
  object-fit: contain;       /* ← show the whole screenshot */
  background: color-mix(in oklab, var(--text) 4%, transparent); /* subtle letterbox tint */
}

/* Keep the nice card lift but stop zooming the image itself (prevents re-crop on hover) */
.case__link:hover .case__img,
.case__link:focus-visible .case__img{
  transform: none;
}
/* ===== WORK gallery — remove top/bottom gaps (no letterbox) ===== */

/* Let each frame follow its image instead of forcing a fixed ratio */
.work .case__frame{
  margin: 0;                   /* kill default <figure> top/bottom margin */
  aspect-ratio: auto !important;
}

/* Make the image size the frame; keep the whole screenshot visible */
.work .case__img{
  display: block;
  width: 100%;
  height: auto !important;     /* stop stretching to the frame’s height */
  aspect-ratio: auto !important;
  object-fit: contain;         /* entire screenshot, no crop */
  background: none;            /* no letterbox tint */
}

/* Keep the nice card lift without zooming (prevents accidental re‑crop) */
.case__link:hover .case__img,
.case__link:focus-visible .case__img{
  transform: none;
}
/* ===== WORK gallery — move caption below the image (no overlay) ===== */

/* Let the card stack image then caption vertically */
.work .case__frame{
  display: flex;
  flex-direction: column;
}

/* Keep screenshots clean and full (matches earlier “show whole image” change) */
.work .case__img{
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain;         /* no cropping */
}

/* Take the caption off the photo and style it as a simple bar below */
.work .case__meta{
  position: static !important;   /* ← no absolute overlay */
  inset: auto !important;
  margin: 10px 12px 12px;        /* inside the card, below the image */
  padding: 0;
  min-height: 0;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 8px;

  /* remove the glass/blur overlay look */
  background: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tidy text in the new caption row */
.work .case__title{ font-size: .95rem; font-weight: 700; }
.work .case__year{ opacity: .8; }

/* Avoid hover zoom re-cropping the screenshot */
.case__link:hover .case__img,
.case__link:focus-visible .case__img{
  transform: none;
}
/* Work → caption row: title + small "View site" button on the right */
.case__view{ margin-left: auto; display:inline-flex; align-items:center; gap:.35rem; white-space: nowrap; }

/* Small button variant (reuses your .btn/.btn--ghost tokens) */
.btn--sm{
  padding: 6px 10px;
  font-size: .82rem;
  line-height: 1.1;
  border-radius: calc(var(--radius) - 4px);
}

/* Ensure long titles truncate nicely in the flex row */
.work .case__title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover/focus lift at the CARD level (valid after markup change) */
.case:hover .case__frame,
.case:focus-within .case__frame{
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 26px 80px rgba(0,0,0,.55),
    0 10px 26px hsl(var(--brand-hue) 96% 58% / .14) inset;
}
/* Lead form: inline error line */
.form__error{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 90, 90, .35);
  background: linear-gradient(180deg, rgba(255,0,0,.07), rgba(255,0,0,.03));
  color: color-mix(in oklab, var(--text) 92%, #ffd6d6);
  font-size: .95rem;
}