/* ============================================================
   AVREA — v27 monochrome editorial rebuild
   Pure grayscale: black / white / gray. No gold, anywhere.
   ============================================================ */
*{ box-sizing:border-box; }
:root{
  --bg:        #0a0a0a;
  --panel:     #101010;
  --panel-2:   #161616;
  --panel-3:   #1d1d1d;
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.18);
  --ink:       #f4f4f2;
  --muted:     rgba(255,255,255,0.60);
  --faint:     rgba(255,255,255,0.34);
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --gutter: clamp(14px, 2.6vw, 34px);
  --radius: clamp(22px, 2.4vw, 34px);
  --maxw: 1320px;
}
html{ background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
/* native scrollbar fully hidden (zero layout width) — replaced by a thin custom
   OVERLAY scrollbar in v27.js, so the page never shifts sideways when overflow toggles */
html::-webkit-scrollbar{ width:0; height:0; display:none; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
::selection{ background:#fff; color:#000; }

/* signature emphasis: italic serif word inside a sans headline */
.ser{ font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:0; }

/* ---- shared shell ---- */
.shell{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; }

/* pill label */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; letter-spacing:0.04em;
  color:var(--muted); background:var(--panel-2);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; line-height:1;
}
.pill .dotk{ width:5px; height:5px; border-radius:50%; background:#fff; opacity:.7; }

/* section heading block */
.sec-head{ display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; margin-bottom:clamp(44px,5vw,72px); }
.sec-head.left{ align-items:flex-start; text-align:left; }
.sec-h{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(34px,5.2vw,66px); line-height:0.98; letter-spacing:-0.035em;
  margin:0; text-wrap:balance;
}
.sec-h .ser{ font-size:1.06em; }
.sec-sub{ color:var(--muted); font-size:clamp(15px,1.4vw,17px); line-height:1.55; max-width:48ch; margin:0; font-weight:350; }

/* generic glass button */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:-0.005em; line-height:1;
  padding:13px 20px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--ink);
  transition:transform .28s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease, color .25s ease;
}
.btn svg{ width:14px; height:14px; transition:transform .28s cubic-bezier(.22,1,.36,1); }
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,0.4); }
.btn:hover svg{ transform:translate(2px,-2px); }
.btn--solid{ background:#f4f4f2; color:#0a0a0a; border-color:#f4f4f2; }
.btn--solid:hover{ background:#fff; }

/* reveal-on-scroll — graceful fade + visible slide-up, one-time as each element enters view */
.rv{ opacity:0; transform:translateY(70px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1; transform:none; }
/* noticeable stagger (~.13s apart) for grouped items: service cards, pricing cards, faq items, footer columns */
.rv.rv-d1{ transition-delay:.13s; }
.rv.rv-d2{ transition-delay:.26s; }
.rv.rv-d3{ transition-delay:.39s; }
.rv.rv-d4{ transition-delay:.52s; }
.rv.rv-d5{ transition-delay:.65s; }
/* Mobile: lighter travel so big slides never lag — still clearly visible */
@media (max-width:820px){ .rv{ transform:translateY(40px); } }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* blur-fade reveal variant — same feel as the text/about reveal (opacity + blur + a
   tiny lift). Used on the service & pricing cards so they fade in on scroll like the
   text instead of the long slide-up. The lift uses the independent `translate`
   property (not `transform`) so the cards' hover-lift transform stays intact, and
   `transform:none` cancels the inherited .rv slide. */
.rv.rv-soft{ opacity:0; transform:none; filter:blur(6px); translate:0 3px;
  transition:opacity .5s ease, filter .55s cubic-bezier(.16,1,.3,1), translate .55s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.22,1,.36,1); }
.rv.rv-soft.in{ opacity:1; filter:blur(0); translate:0 0; }
@media (prefers-reduced-motion: reduce){ .rv.rv-soft{ filter:none !important; translate:0 0 !important; } }

/* ============================================================
   1. HERO
   ============================================================ */
.hero{ padding:var(--gutter); }
.hero-card{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 8%, #1a1a1a 0%, #0d0d0d 46%, #070707 100%);
  min-height:calc(100svh - 2*var(--gutter));
  padding:clamp(20px,2.4vw,30px);
  display:flex; flex-direction:column;
}
.hero-grain{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; }
.hero-card > *{ position:relative; z-index:2; }

/* floating pill nav */
.hnav{ position:absolute; top:clamp(20px,2.4vw,30px); left:50%; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:2px;
  background:rgba(20,20,20,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px; padding:7px; }
.hnav a{ font-size:15.5px; font-weight:450; color:var(--muted); padding:11px 19px; border-radius:999px; transition:color .2s, background .2s; }
.hnav a:hover{ color:#fff; background:rgba(255,255,255,0.06); }
@media (max-width:760px){ .hnav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(18,18,18,0.94); } }

/* ---- sticky nav: appears once the hero has scrolled out of view ---- */
.snav{ position:fixed; top:0; left:0; right:0; z-index:90;
  background:rgba(12,12,12,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1); }
.snav.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.snav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:var(--maxw,1400px); margin:0 auto; padding:12px var(--gutter); }
.snav-brand{ font-size:19px; }
.snav-links{ display:flex; align-items:center; gap:2px; }
.snav-links a{ font-size:15px; font-weight:450; color:var(--muted); padding:9px 16px; border-radius:999px; transition:color .2s, background .2s; }
.snav-links a:hover{ color:#fff; background:rgba(255,255,255,0.06); }
.snav-actions{ display:flex; align-items:center; gap:10px; }
.snav .hburger{ display:none; }
@media (max-width:760px){
  .snav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(14,14,14,0.96); }
  .snav-links{ display:none; }
  .snav .hburger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px; box-sizing:border-box;
    background:rgba(255,255,255,0.05); border:1px solid var(--line); border-radius:12px; cursor:pointer; }
  .snav .hburger span{ display:block; width:22px; height:2px; border-radius:2px; background:#fff;
    transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
  .snav .hburger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .snav .hburger.is-active span:nth-child(2){ opacity:0; }
  .snav .hburger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce){
  .snav{ transition:opacity .15s linear; transform:none; }
  .snav.show{ transform:none; }
}

.hbrand{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:21px; letter-spacing:-0.04em; color:#fff; }
.hbrand .logo-mark{ height:0.92em; width:auto; }
.hbrand .logo-mark path{ fill:currentColor; }

.htop{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.hbook{ }

/* hero body grid: corners anchored, sphere centered */
.hbody{ flex:1; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:clamp(40px,7vw,90px) 0 clamp(20px,3vw,40px); }
/* dark vignette scrim over the sphere so headline + sub stay legible */
.hbody::before{ content:""; position:absolute; inset:-10% -20%; z-index:3; pointer-events:none;
  background:radial-gradient(54% 56% at 50% 44%, rgba(8,8,8,0.8) 0%, rgba(8,8,8,0.55) 38%, rgba(8,8,8,0.12) 66%, rgba(8,8,8,0) 80%); }

.hheadline{
  position:relative; z-index:5; text-align:center; margin:0; padding-bottom:0.22em;
  font-family:var(--sans); font-weight:500; color:#fff;
  font-size:clamp(34px,6.6vw,116px); line-height:1.04; letter-spacing:-0.04em;
  text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,0.8), 0 1px 6px rgba(0,0,0,0.6);
}
.hheadline .ser{ display:inline-block; font-size:1.04em; line-height:1.12; }
.hsub{ position:relative; z-index:5; text-align:center; margin:clamp(38px,4vw,54px) auto 0; max-width:42ch;
  color:rgba(255,255,255,0.82); font-size:clamp(14px,1.3vw,17px); line-height:1.55; font-weight:350;
  text-shadow:0 1px 16px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.8); }

/* chrome sphere */
.sphere-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; pointer-events:none; }
.sphere{
  position:relative; width:clamp(210px,29vw,410px); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(115% 115% at 34% 26%,
      #fbfbfb 0%, #e4e4e4 6%, #b6b6b6 14%, #7e7e7e 26%,
      #3e3e3e 44%, #1a1a1a 66%, #070707 84%, #000 100%);
  box-shadow:
    inset 0 -34px 70px rgba(255,255,255,0.07),
    inset 0 34px 60px rgba(0,0,0,0.75),
    inset -22px 0 50px rgba(0,0,0,0.55),
    0 60px 110px -28px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.04);
  isolation:isolate;
}
/* rotating chrome reflection streaks */
.sphere::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0.34) 32deg, rgba(255,255,255,0) 70deg,
    rgba(120,120,120,0.18) 120deg, rgba(255,255,255,0) 165deg,
    rgba(255,255,255,0.22) 215deg, rgba(255,255,255,0) 255deg,
    rgba(150,150,150,0.16) 305deg, rgba(255,255,255,0) 350deg);
  mix-blend-mode:screen; opacity:.55;
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 38%, #000 62%, #000 96%, transparent 100%);
  mask:radial-gradient(circle at 50% 50%, transparent 38%, #000 62%, #000 96%, transparent 100%);
}
/* horizon environment band + bottom bounce */
.sphere::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(60% 26% at 50% 70%, rgba(210,210,210,0.4) 0%, rgba(210,210,210,0) 60%),
    radial-gradient(40% 30% at 30% 22%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 55%);
  mix-blend-mode:screen; opacity:.9;
}
.sphere-spec{ position:absolute; top:18%; left:24%; width:20%; height:14%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0)); filter:blur(2px); z-index:3; }
@media (prefers-reduced-motion: no-preference){
  .sphere::before{ animation:sphereSpin 32s linear infinite; will-change:transform; }
  .sphere{ animation:sphereFloat 9s ease-in-out infinite; will-change:transform; }
}
/* mobile: static sphere (no continuous repaint) */
@media (max-width:760px){
  .sphere::before{ animation:none; }
  .sphere{ animation:none; }
}
@keyframes sphereSpin{ to{ transform:rotate(360deg); } }
@keyframes sphereFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* hero corner clusters */
.hcorner{ position:relative; z-index:6; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.hwedo{ }
.hwedo-k{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.hwedo-list{ font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.7vw,22px); color:rgba(255,255,255,0.82); line-height:1.35; max-width:24ch; }
.hwedo-list .sl{ color:var(--faint); font-style:normal; font-family:var(--sans); padding:0 6px; }

.hintro{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.hintro-line{ font-size:clamp(13px,1.2vw,15px); color:rgba(255,255,255,0.7); max-width:30ch; line-height:1.5; font-weight:350; }
.hsoc{ display:flex; align-items:center; gap:12px; }
.hsoc-k{ font-size:12px; color:var(--muted); }
.hsoc-ic{ display:flex; gap:8px; }
.hsoc-ic a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:transform .25s, color .25s, border-color .25s; }
.hsoc-ic a:hover{ color:#fff; border-color:rgba(255,255,255,0.5); transform:translateY(-2px); }
.hsoc-ic svg{ width:15px; height:15px; }

/* featured thumb */
.hfeat{ position:absolute; right:clamp(20px,2.4vw,30px); bottom:clamp(86px,11vw,150px); z-index:7; width:clamp(240px,26vw,336px);
  display:block; text-decoration:none; cursor:pointer; border-radius:16px; outline:none;
  transition:transform .4s cubic-bezier(.22,1,.36,1), filter .35s ease; }
.hfeat:hover{ transform:translateY(-4px) scale(1.02); filter:brightness(1.08); }
.hfeat:hover .hfeat-k b{ color:#fff; }
.hfeat:focus-visible{ box-shadow:0 0 0 2px rgba(255,255,255,0.55); }
.hfeat-k{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; text-align:right; }
.hfeat-k b{ color:var(--muted); font-weight:600; }
.hfeat-thumb{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); aspect-ratio:4/3; background:#000; }
.hfeat-thumb video, .hfeat-thumb img{ width:100%; height:100%; object-fit:cover; }
.hfeat-thumb::after{ content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); }

@media (max-width:900px){
  .hfeat{ display:none; }
  .hnav a.opt{ display:none; }
  .hcorner{ flex-direction:column; align-items:flex-start; gap:26px; }
  .hintro{ text-align:left; align-items:flex-start; }
}
@media (max-width:640px){
  .hnav{ position:static; transform:none; margin:54px auto 0; order:3; flex-wrap:wrap; justify-content:center; }
  .htop{ position:relative; }
}

/* ============================================================
   2. WHAT WE DO
   ============================================================ */
.svc{ padding:clamp(80px,9vw,140px) 0 clamp(30px,4vw,60px); position:relative; isolation:isolate; }
/* hero -> What We Do transition: fill the flat-black gap with a soft glow + dots */
.svc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:clamp(380px,46vw,640px); z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 40%, transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size:auto, 22px 22px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 14%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.45) 48%, #000 62%, rgba(0,0,0,0.55) 82%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 14%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.45) 48%, #000 62%, rgba(0,0,0,0.55) 82%, transparent 100%);
}
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); align-items:start; }
/* align-items:start (never stretch) so one card's expand/collapse can NEVER
   re-stretch its siblings; collapsed cards are equalized via the reserved
   paragraph height below instead. */
.scard{ position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  overflow:hidden; transition:border-color .35s ease, transform .26s ease-out; display:flex; flex-direction:column; }
.scard:hover{ border-color:var(--line-2); transform:translateY(-6px) scale(1.02); }
@media (prefers-reduced-motion:reduce){ .scard:hover{ transform:none; } }
.scard-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#000; }
.scard-media img, .scard-media video{ width:100%; height:100%; object-fit:cover; filter:none; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.scard:hover .scard-media img, .scard:hover .scard-media video{ transform:scale(1.06); }
.scard-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,8,0.5), transparent 50%); }
.scard-no{ position:absolute; top:16px; left:18px; z-index:5; font-family:var(--serif); font-style:italic; font-size:26px; color:rgba(255,255,255,0.9); }
/* service media carousel (restored swipe gallery — color media, grayscale controls) */
.scard-media{ touch-action:pan-y; }
.gal-track{ position:absolute; inset:0; }
.gal-slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.gal-slide.is-active{ opacity:1; pointer-events:auto; }
.gal-slide img, .gal-slide video{ width:100%; height:100%; object-fit:cover; }
.gal-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0 0 3px;
  background:rgba(10,10,10,0.55); color:#fff; border:1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:20px; line-height:0;
  opacity:0; transition:opacity .3s ease, background .25s ease; }
.scard-media:hover .gal-arrow{ opacity:1; }
.gal-arrow:hover{ background:rgba(10,10,10,0.82); }
.gal-prev{ left:12px; } .gal-next{ right:12px; }
.gal-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:7px; }
.gal-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.45); cursor:pointer; border:0; padding:0; transition:background .25s, transform .25s; }
.gal-dot.is-active{ background:#fff; transform:scale(1.25); }
@media (hover:none){ .gal-arrow{ opacity:1; } }
.scard-body{ padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; flex:1; }
.scard-body h3{ margin:0; font-weight:500; font-size:clamp(20px,2vw,26px); letter-spacing:-0.03em; }
.scard-body p{ margin:14px 0 0; color:var(--muted); font-size:14.5px; line-height:1.6; font-weight:350; min-height:calc(1.6em * 3); }
.scard-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:22px; }
.stag{ font-size:11px; letter-spacing:0.02em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
/* click-to-expand service detail (restored original accordion) */
.scard-trigger{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:left; color:inherit; font:inherit; }
.scard-chev{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:background .3s, border-color .3s; }
.scard-chev::before, .scard-chev::after{ content:""; position:absolute; top:50%; left:50%; width:11px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.scard-chev::after{ transform:translate(-50%,-50%) rotate(90deg); }
.scard.open .scard-chev{ background:#f4f4f2; border-color:#f4f4f2; }
.scard.open .scard-chev::before, .scard.open .scard-chev::after{ background:#0a0a0a; }
.scard.open .scard-chev::after{ transform:translate(-50%,-50%) rotate(0deg); }
.scard-panel{ overflow:hidden; max-height:0; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.scard-panel-in{ margin-top:20px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.sp-bestfor{ display:flex; flex-direction:column; gap:8px; }
.sp-k{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.sp-chip{ align-self:flex-start; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.sp-row{ display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:start; }
.sp-rk{ font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); padding-top:3px; }
.sp-row p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; font-weight:350; }
@media (max-width:480px){ .sp-row{ grid-template-columns:1fr; gap:4px; } }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }

/* ============================================================
   3. ABOUT + STATS
   ============================================================ */
.about{ padding:clamp(90px,11vw,170px) 0; text-align:center; position:relative; overflow:hidden; }
.about-mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); z-index:0;
  font-weight:700; font-size:clamp(180px,34vw,520px); letter-spacing:-0.06em; line-height:1;
  color:rgba(255,255,255,0.028); pointer-events:none; white-space:nowrap; user-select:none; }
.about-inner{ position:relative; z-index:2; max-width:880px; margin:0 auto; }
.about-p{ font-family:var(--sans); font-weight:400; font-size:clamp(22px,3vw,40px); line-height:1.32; letter-spacing:-0.025em; margin:26px 0 0; text-wrap:balance; color:#fff; }
.about-p .ser{ color:#fff; }
.about-p .dim{ color:var(--faint); }

/* scroll-linked per-word reveal (dim+blur -> bright) — ported from the original site */
.about-inner.reveal-ready .about-p{ color:#fff; }
.about-inner.reveal-ready .about-p .hw{
  display:inline-block;
  opacity:0.22; filter:blur(6px); transform:translateY(3px);
  transition:opacity .5s ease, filter .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  will-change:opacity, filter, transform;
}
.about-inner.reveal-ready .about-p .dim .hw{ color:var(--faint); }
.about-inner.reveal-ready .about-p .hw.is-on{ opacity:1; filter:blur(0); transform:none; }
@media (prefers-reduced-motion: reduce){
  .about-inner.reveal-ready .about-p .hw{ opacity:1; filter:none; transform:none; transition:none; }
}
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px); margin-top:clamp(60px,7vw,100px);
  border-top:1px solid var(--line); padding-top:clamp(48px,5vw,72px); position:relative; z-index:2; }
.stat{ text-align:center; }
.stat:not(:last-child){ border-right:1px solid var(--line); }
.stat-v{ font-family:var(--sans); font-weight:500; font-size:clamp(52px,8vw,108px); line-height:0.9; letter-spacing:-0.05em; color:#fff; display:inline-flex; align-items:flex-start; }
.stat-v .suf{ font-size:0.4em; color:var(--muted); transform:translateY(0.12em); margin-left:2px; }
.stat-l{ margin-top:18px; color:var(--muted); font-size:14px; font-weight:400; letter-spacing:0.01em; }
@media (max-width:680px){ .stats{ grid-template-columns:1fr; gap:0; } .stat{ padding:30px 0; } .stat:not(:last-child){ border-right:none; border-bottom:1px solid var(--line); } }

/* ============================================================
   4. PORTFOLIO — stacked bands
   ============================================================ */
.work{ padding:clamp(40px,5vw,70px) 0 clamp(60px,7vw,100px); }
.band{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); margin-bottom:clamp(16px,1.8vw,26px); display:grid; grid-template-columns:1.15fr 1fr; min-height:clamp(560px,62vw,880px); }
.band:nth-child(even){ grid-template-columns:1fr 1.15fr; }
.band[data-project]{ cursor:pointer; }
.band:nth-child(even) .band-media{ order:2; }
.band:nth-child(even) .band-body{ order:1; }
.band-media{ position:relative; overflow:hidden; background:#000; }
.band-media img, .band-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; }
.band-media video{ opacity:0; transition:opacity .3s ease-out; }
.band.playing .band-media video{ opacity:1; }
.band-body{ padding:clamp(36px,4.4vw,76px); display:flex; flex-direction:column; justify-content:center; gap:20px; }
.band-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.band-tag{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.band-title{ font-family:var(--sans); font-weight:500; font-size:clamp(36px,5.4vw,76px); line-height:0.98; letter-spacing:-0.04em; margin:0; }
.band-title .ser{ font-size:1.05em; }
.band-cap{ color:var(--muted); font-size:clamp(15px,1.45vw,18.5px); line-height:1.6; font-weight:350; max-width:46ch; margin:0; }
.band-disc{ font-size:11.5px; color:var(--faint); letter-spacing:0.02em; margin-top:4px; }
.band-no{ position:absolute; top:22px; right:26px; z-index:4; font-family:var(--serif); font-style:italic; font-size:clamp(28px,3vw,42px); color:rgba(255,255,255,0.5); }
.band.full{ grid-template-columns:1fr; }
.band.full .band-media{ position:absolute; inset:0; }
.band.full .band-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,6,0.86) 0%, rgba(6,6,6,0.2) 55%, rgba(6,6,6,0.4) 100%); }
.band.full .band-body{ position:relative; z-index:3; justify-content:flex-end; min-height:clamp(620px,66vw,900px); }
.band-wip{ display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); }
.band-wip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--muted); }
@media (max-width:820px){ .band, .band:nth-child(even){ grid-template-columns:1fr; } .band-media{ aspect-ratio:16/10; position:relative; order:1 !important; } .band-body{ order:2 !important; } }

/* project card text-side depth: faint radial glow + subtle gradient + dotted grid
   (split cards only — .full bands are full-bleed photos, excluded so dots never
    land over an image). Decorative, behind the text. */
.band:not(.full) .band-body{ position:relative; isolation:isolate; }
.band:not(.full) .band-body::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(90% 95% at 50% 32%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 42%, transparent 72%),
    linear-gradient(120deg, rgba(255,255,255,0.02) 0%, transparent 58%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size:auto, auto, 22px 22px;
  -webkit-mask-image:radial-gradient(95% 92% at 50% 45%, #000 38%, transparent 92%);
          mask-image:radial-gradient(95% 92% at 50% 45%, #000 38%, transparent 92%);
}

/* ============================================================
   4b. PORTFOLIO — center-scale effect (Projects only)
   Each project scales up as it reaches the viewport center; off-center bands
   shrink + dim slightly. Pure transform+opacity, gated on .snap-ready so a JS
   failure leaves bands full-opacity. Scrolling is completely normal/free —
   NO scroll-snap, NO scroll-assist; JS only toggles the .snap-active class.
   All of it lives inside (prefers-reduced-motion: no-preference) so reduce-motion
   falls back to the normal stacked scroll above.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* .work prefix raises specificity above the later `.work .band{min-height:clamp(...)}`
     rule so each project is ~one viewport tall and centers visually as you scroll. */
  .work .work-scroll .band{
    min-height:100svh; height:100svh;     /* one project ≈ one full screen */
    box-sizing:border-box;                /* 1px border stays inside 100svh */
    margin:0;                             /* edge-to-edge full-screen projects */
  }
  /* centered band sits at full scale; off-center bands shrink + dim slightly
     (GPU: transform+opacity only, smooth settle) */
  .work-scroll.snap-ready .band{
    transform:scale(.94); opacity:.62;
    transform-origin:center center; will-change:transform, opacity;
    transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
  }
  .work-scroll.snap-ready .band.snap-active{ transform:scale(1); opacity:1; }
  /* while the case study closes & restores scroll, freeze band fx so the nearest
     project never animates its scale (no "slide to fill") — state is committed
     instantly at the restored position, identical to before opening */
  .work-scroll.cs-fx-freeze .band{ transition:none !important; }
}
/* Mobile: DROP the scale/dim — prioritise smooth, light scrolling */
@media (max-width:820px) and (prefers-reduced-motion: no-preference){
  .work-scroll.snap-ready .band,
  .work-scroll.snap-ready .band.snap-active{ transform:none; opacity:1; }
}

/* ============================================================
   5. PRICING
   ============================================================ */
.pricing{ padding:clamp(80px,9vw,140px) 0; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); align-items:stretch; }
.pcard{ position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:clamp(26px,2.6vw,38px); display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .35s; }
.pcard:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.pcard.pop{ background:linear-gradient(180deg,#1d1d1d,#141414); border-color:rgba(255,255,255,0.28); }
.pbadge{ position:absolute; top:-1px; right:24px; transform:translateY(-50%); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:#0a0a0a; background:#f4f4f2; border-radius:999px; padding:7px 14px; }
.pk{ font-size:12px; letter-spacing:0.05em; color:var(--muted); margin-bottom:18px; }
.pcard h3{ margin:0; font-weight:500; font-size:clamp(21px,2vw,27px); letter-spacing:-0.03em; }
.pprice{ display:flex; align-items:baseline; gap:6px; margin:20px 0 0; }
.pprice .cur{ font-size:24px; color:var(--muted); align-self:flex-start; margin-top:6px; }
.pprice .amt{ font-family:var(--sans); font-weight:500; font-size:clamp(40px,4.6vw,58px); letter-spacing:-0.04em; line-height:1; }
.pprice .per{ font-size:13px; color:var(--faint); }
.pdesc{ color:var(--muted); font-size:14.5px; line-height:1.6; font-weight:350; margin:18px 0 0; }
.pcard .btn{ margin-top:28px; justify-content:center; width:100%; }
.pcard.pop .btn{ background:#f4f4f2; color:#0a0a0a; border-color:#f4f4f2; }
.pcard.pop .btn:hover{ background:#fff; }
@media (max-width:860px){ .price-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

/* ============================================================
   6. TESTIMONIALS — scattered, scroll-staggered
   ============================================================ */
.testi{ padding:clamp(80px,9vw,150px) 0; position:relative; }
.testi-center{ text-align:center; max-width:600px; margin:0 auto; position:relative; z-index:5; }
.testi-stage{ position:relative; margin-top:clamp(50px,6vw,90px); min-height:clamp(620px,72vw,720px); }
.tcard{ border:1px solid var(--line); border-radius:22px; background:var(--panel-2); padding:clamp(22px,2vw,30px);
  width:clamp(280px,30vw,360px); position:absolute; will-change:opacity, transform;
  opacity:0; translate:0 20px;
  transition:opacity 1s cubic-bezier(0.22,1,0.36,1), translate 1s cubic-bezier(0.22,1,0.36,1); }
/* Slow, graceful fade + gentle lift, once, when the section enters view (.in added by JS, early).
   Opacity + translate ONLY (translate keeps t3's centering transform intact). Gentle stagger. */
.testi-stage.in .tcard{ opacity:1; translate:0 0; }
.testi-stage.in .tcard.t2{ transition-delay:.12s; }
.testi-stage.in .tcard.t3{ transition-delay:.24s; }
.tcard .tq{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.7vw,21px); line-height:1.45; color:#fff; margin:0; }
.tcard .ta{ display:flex; align-items:center; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.tav{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:14px; letter-spacing:-0.02em; color:#fff; background:linear-gradient(150deg,#2c2c2c,#161616); border:1px solid var(--line-2); }
.tmeta b{ display:block; font-weight:500; font-size:14.5px; color:#fff; }
.tmeta span{ font-size:12.5px; color:var(--faint); }
/* scattered positions (desktop) */
.tcard.t1{ top:0; left:2%; }
.tcard.t2{ top:14%; right:3%; }
.tcard.t3{ top:46%; left:50%; transform:translateX(-50%); }
.testi-stars{ color:#C6A277; letter-spacing:3px; font-size:14px; margin-bottom:18px; }
@media (max-width:820px){
  .testi-stage{ min-height:0; display:flex; flex-direction:column; gap:16px; align-items:center; }
  .tcard, .tcard.t1, .tcard.t2, .tcard.t3{ position:static; width:100%; max-width:460px; transform:none; translate:0 0; }
}
@media (prefers-reduced-motion: reduce){
  .tcard{ opacity:1 !important; translate:0 0 !important; transition:none; }
}
@media (prefers-reduced-motion: reduce) and (min-width:821px){
  .tcard.t3{ transform:translateX(-50%); }
}

/* ============================================================
   7. FAQ
   ============================================================ */
.faq{ padding:clamp(60px,7vw,110px) 0 clamp(80px,9vw,140px); }
.faq-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(30px,5vw,80px); align-items:start; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; background:none; border:0; cursor:pointer; color:var(--ink); text-align:left;
  font-family:var(--sans); font-size:clamp(16px,1.6vw,20px); font-weight:450; letter-spacing:-0.02em;
  padding:clamp(20px,2.2vw,28px) 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.faq-tog{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:background .3s, border-color .3s; }
.faq-tog::before, .faq-tog::after{ content:""; position:absolute; top:50%; left:50%; width:12px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.faq-tog::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.open .faq-tog{ background:#f4f4f2; border-color:#f4f4f2; }
.faq-item.open .faq-tog::before, .faq-item.open .faq-tog::after{ background:#0a0a0a; }
.faq-item.open .faq-tog::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.faq-a-in{ padding:0 44px clamp(22px,2.4vw,30px) 0; color:var(--muted); font-size:15px; line-height:1.65; font-weight:350; }
.faq-intro h2{ font-family:var(--sans); font-weight:500; font-size:clamp(26px,2.6vw,36px); letter-spacing:-0.03em; margin:18px 0 0; line-height:1.05; }
.faq-intro h2 .ser{ font-size:1.06em; }
.faq-intro p{ color:var(--muted); font-size:15px; line-height:1.6; font-weight:350; margin:16px 0 22px; max-width:32ch; }
.faq-intro .btn{ }
@media (max-width:820px){ .faq-grid{ grid-template-columns:1fr; gap:30px; } }

/* ============================================================
   8. FOOTER
   ============================================================ */
.footer{ padding:clamp(60px,7vw,100px) 0 0; border-top:1px solid var(--line); position:relative; overflow:hidden; }
/* footer depth: dotted grid + soft glow behind the columns and AVREA wordmark */
.footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 78%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 44%, transparent 74%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size:auto, 22px 22px;
  -webkit-mask-image:radial-gradient(100% 88% at 50% 60%, #000 34%, transparent 92%);
          mask-image:radial-gradient(100% 88% at 50% 60%, #000 34%, transparent 92%);
}
.foot-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px); position:relative; z-index:2; }
.foot-brand .hbrand{ font-size:26px; margin-bottom:18px; }
.foot-brand p{ color:var(--muted); font-size:14px; line-height:1.6; font-weight:350; max-width:30ch; margin:0; }
.foot-col h4{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin:0 0 18px; font-weight:600; }
.foot-col a, .foot-col .fline{ display:block; color:var(--muted); font-size:14.5px; padding:6px 0; transition:color .2s; }
.foot-col a:hover{ color:#fff; }
.foot-col a.foot-soc{ display:flex; align-items:center; gap:10px; }
.foot-soc svg{ width:16px; height:16px; flex:none; opacity:.75; transition:opacity .2s; }
.foot-soc:hover svg{ opacity:1; }
.foot-mark{ font-weight:700; font-size:clamp(110px,22vw,360px); letter-spacing:-0.05em; line-height:0.8; color:rgba(255,255,255,0.035);
  text-align:center; margin:clamp(24px,3vw,44px) 0 -0.12em; user-select:none; pointer-events:none; white-space:nowrap; position:relative; z-index:1; }
.foot-bar{ border-top:1px solid var(--line); padding:24px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
.foot-bar span{ font-size:13px; color:var(--faint); }
.foot-top{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; background:none; border:0; font-family:var(--sans); transition:color .2s; }
.foot-top:hover{ color:#fff; }
.foot-top svg{ width:14px; height:14px; }
@media (max-width:820px){ .foot-cols{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .foot-cols{ grid-template-columns:1fr; } }

/* ============================================================
   CALENDLY BOOKING OVERLAY (original flow — recolored to v27 dark grayscale)
   ============================================================ */
.cal-back{ position:fixed; inset:0; z-index:230; background:rgba(6,6,6,0.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  display:flex; align-items:center; justify-content:center; padding:clamp(14px,4vh,48px) 18px; }
.cal-back.open{ opacity:1; pointer-events:auto; }
.cal-modal{ position:relative; width:min(720px,100%); height:min(760px,90vh);
  display:flex; flex-direction:column; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:24px; overflow:hidden;
  box-shadow:0 40px 110px -30px rgba(0,0,0,0.8), 0 4px 14px rgba(0,0,0,0.4);
  transform:translateY(16px) scale(.99); transition:transform .42s cubic-bezier(.22,1,.36,1); }
.cal-back.open .cal-modal{ transform:none; }
.cal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 24px 18px; border-bottom:1px solid var(--line); flex:none; }
.cal-eyebrow{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.cal-title{ font-family:var(--sans); font-weight:500; font-size:22px; letter-spacing:-0.025em; color:#fff; margin:0; line-height:1.05; }
.cal-close{ flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:50%; background:var(--panel-3); color:var(--ink);
  cursor:pointer; transition:background .2s ease, transform .2s ease, border-color .2s; }
.cal-close:hover{ background:#262626; border-color:rgba(255,255,255,0.4); transform:scale(1.05); }
.cal-close svg{ width:17px; height:17px; }
.cal-embed{ flex:1 1 auto; min-height:0; background:#fff; }
.cal-embed .calendly-inline-widget, .cal-embed iframe{ width:100%; height:100% !important; min-width:0 !important; border:0; }
@media (max-width:560px){ .cal-modal{ height:92vh; border-radius:18px; } .cal-head{ padding:18px 18px 14px; } .cal-title{ font-size:19px; } }
@media (prefers-reduced-motion: reduce){ .cal-back, .cal-modal{ transition:opacity .2s ease; } .cal-modal{ transform:none; } }

/* ============================================================
   HERO headline — metallic chrome on the italic line only
   Scoped to .hheadline .ser so other .ser accents stay unchanged.
   ============================================================ */
.hheadline .ser, .ser-chrome{
  color:#d8d8d8; /* fallback for no background-clip:text support */
  background:linear-gradient(180deg,
    #ffffff 0%,
    #e9e9ec 26%,
    #b8b8be 50%,
    #8c8c93 70%,
    #c4c4ca 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,0.12);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hheadline .ser, .ser-chrome{ color:#d8d8d8; -webkit-text-fill-color:#d8d8d8; }
}
/* The about per-word reveal wraps words in inline-block .hw spans, each its own box —
   the parent .ser-chrome's clipped gradient background can't reach them, so the glyphs
   fell back to a solid color. Re-apply the SAME (vertical) gradient + text-clip to each
   .hw word box so the gradient renders on the text; 180deg means no per-word seam. */
.about-p .ser-chrome .hw{
  background:linear-gradient(180deg,
    #ffffff 0%,
    #e9e9ec 26%,
    #b8b8be 50%,
    #8c8c93 70%,
    #c4c4ca 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .about-p .ser-chrome .hw{ background:none; -webkit-text-fill-color:#d8d8d8; color:#d8d8d8; }
}

/* ============================================================
   CHANGE 2 — Projects span near-full page width
   (lift the 1320 cap; keep the site's --gutter frame margins;
    scale media + text up so the bands read bold and spacious)
   ============================================================ */
.work.shell{ max-width:none; padding-left:var(--gutter); padding-right:var(--gutter); }
.work .band{ min-height:clamp(580px,52vw,1000px); }
.work .band-body{ padding:clamp(40px,5vw,100px); gap:24px; }
.work .band-title{ font-size:clamp(42px,6vw,96px); }
.work .band-cap{ font-size:clamp(16px,1.55vw,22px); max-width:56ch; }
.work .band-no{ top:30px; right:34px; font-size:clamp(32px,3.6vw,56px); }
.work .band.full .band-body{ min-height:clamp(640px,56vw,1040px); }

/* ============================================================
   CHANGE 3 — Quote / contact form modal
   (original Web3Forms flow restored, recolored to v27 grayscale)
   ============================================================ */
.q-lock{ overflow:hidden; }
.q-back{ position:fixed; inset:0; z-index:210; background:rgba(6,6,6,0.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  display:flex; align-items:center; justify-content:center; padding:clamp(14px,4vh,48px) 18px; overflow-y:auto; }
.q-back.open{ opacity:1; pointer-events:auto; }
.q-modal{ position:relative; width:min(560px,100%);
  background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:24px; overflow:hidden;
  box-shadow:0 40px 110px -30px rgba(0,0,0,0.8), 0 4px 14px rgba(0,0,0,0.4);
  transform:translateY(16px) scale(.99); transition:transform .42s cubic-bezier(.22,1,.36,1); }
.q-back.open .q-modal{ transform:none; }
.q-head{ position:relative; padding:30px 32px 22px; border-bottom:1px solid var(--line); }
.q-close{ position:absolute; top:18px; right:18px; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:50%; background:var(--panel-3); color:var(--ink);
  cursor:pointer; transition:background .2s ease, transform .2s ease, border-color .2s; }
.q-close:hover{ background:#262626; border-color:rgba(255,255,255,0.4); transform:scale(1.05); }
.q-close svg{ width:17px; height:17px; }
.q-eyebrow{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.q-title{ font-family:var(--sans); font-weight:500; font-size:clamp(22px,2.6vw,28px); letter-spacing:-0.03em; color:#fff; margin:0; line-height:1.04; }
.q-sub{ color:var(--muted); font-size:14.5px; line-height:1.5; font-weight:350; margin:12px 0 0; max-width:42ch; }
.q-form{ padding:24px 32px 30px; }
.q-grid{ display:flex; flex-direction:column; gap:18px; }
.q-field{ display:flex; flex-direction:column; gap:8px; }
.q-label{ font-size:12.5px; font-weight:500; letter-spacing:0.01em; color:var(--muted); }
.q-label .req{ color:var(--faint); }
.q-input, .q-textarea{ font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:13px; padding:13px 15px; width:100%; transition:border-color .2s ease, background .2s ease; }
.q-input::placeholder, .q-textarea::placeholder{ color:var(--faint); }
.q-input:focus, .q-textarea:focus{ outline:none; border-color:rgba(255,255,255,0.45); background:var(--panel-2); }
.q-textarea{ min-height:118px; resize:vertical; line-height:1.5; }
.q-error{ display:none; font-size:12px; color:#ff8b8b; }
.q-field.invalid .q-input, .q-field.invalid .q-textarea{ border-color:rgba(255,120,120,0.6); }
.q-field.invalid .q-error{ display:block; }
.q-foot{ display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.q-submit{ width:100%; justify-content:center; padding:15px 20px; font-size:15px; }
.q-call{ display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; width:100%;
  font-family:var(--sans); font-size:14.5px; font-weight:550; color:#fff;
  background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,255,255,0.55); border-radius:999px; padding:14px 20px;
  transition:background .2s ease, border-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.q-call:hover{ background:rgba(255,255,255,0.14); border-color:#fff; color:#fff; transform:translateY(-2px); }
.q-call .q-call-ic svg{ width:17px; height:17px; }
.q-call-ic{ display:inline-flex; }
.q-call-ar{ transition:transform .25s ease; }
.q-call:hover .q-call-ar{ transform:translate(2px,-2px); }
.q-note{ font-size:12px; color:var(--faint); line-height:1.5; margin:2px 0 0; text-align:center; }
.q-note a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.q-senderror a{ color:#ffb3b3; }
.q-done{ display:none; flex-direction:column; align-items:center; text-align:center; padding:46px 36px 50px; gap:6px; }
.q-modal.sent .q-form{ display:none; }
.q-modal.sent .q-head{ display:none; }
.q-modal.sent .q-done{ display:flex; }
.q-tick{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); background:var(--panel-3); color:#fff; margin-bottom:14px; }
.q-tick svg{ width:26px; height:26px; }
.q-done h3{ font-family:var(--sans); font-weight:500; font-size:24px; letter-spacing:-0.02em; color:#fff; margin:0; }
.q-done p{ color:var(--muted); font-size:14.5px; line-height:1.5; margin:6px 0 18px; max-width:34ch; }
.q-resend{ font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer;
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:999px; padding:11px 20px; transition:background .2s, border-color .2s; }
.q-resend:hover{ background:#262626; border-color:rgba(255,255,255,0.4); }
@media (max-width:560px){ .q-head{ padding:26px 22px 18px; } .q-form{ padding:20px 22px 26px; } .q-modal{ border-radius:18px; } }
@media (prefers-reduced-motion: reduce){ .q-back, .q-modal{ transition:opacity .2s ease; } .q-modal{ transform:none; } }

/* ============================================================
   CHANGE (pricing) — numbered cards + Plan Detail checklist
   Centered row with side gutters; taller, fuller cards.
   ============================================================ */
.pricing.shell{ max-width:1500px; padding-left:var(--gutter); padding-right:var(--gutter); }
.pricing .price-grid{ gap:clamp(16px,1.6vw,24px); align-items:stretch; }
.pricing .pcard{ display:flex; flex-direction:column; padding:clamp(34px,2.8vw,46px) clamp(28px,2.6vw,40px); min-height:clamp(560px,52vw,660px); }
.pricing .pnum{ width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:50%; font-family:var(--sans); font-size:16px; font-weight:500;
  color:var(--ink); background:var(--panel-3); margin-bottom:20px; }
.pricing .pcard.pop .pnum{ border-color:rgba(255,255,255,0.5); background:#fff; color:#0a0a0a; }
.pricing .pcard h3{ font-size:clamp(22px,2.3vw,32px); }
.pricing .pk{ margin-bottom:14px; }
.pricing .pprice{ margin-top:18px; }
.pricing .pprice .amt{ font-size:clamp(42px,4.6vw,62px); }
.pricing .pdesc{ font-size:clamp(14.5px,1.15vw,16.5px); margin-top:18px; margin-bottom:22px; }
.pricing .pcard .btn{ width:100%; justify-content:center; padding-top:15px; padding-bottom:15px; }
.pricing .plan-detail{ display:flex; align-items:center; gap:14px; margin:26px 0 18px; }
.pricing .plan-detail::after{ content:""; flex:1; height:1px; background:var(--line); }
.pricing .plan-detail span{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.pricing .pfeat{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; margin-top:auto; }
.pricing .pfeat li{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:350; color:var(--muted); }
.pricing .pchk{ flex:none; width:21px; height:21px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--panel-3); border:1px solid var(--line-2); color:#fff; }
.pricing .pcard.pop .pchk{ background:#fff; border-color:#fff; color:#0a0a0a; }
.pricing .pchk svg{ width:12px; height:12px; }

/* ============================================================
   CHANGE (depth) — subtle monochrome background texture
   Purely decorative: pointer-events:none, behind content, no color.
   ============================================================ */
/* (site-wide dot grid removed — dots are now scoped to Testimonials,
   Pricing and project card text-sides only, for contrast/rhythm) */

/* shared dotted-grid texture (your exact pattern, inverted for dark theme) */

/* pricing — soft wide light-gray glow behind the cards */
.pricing{ isolation:isolate; }
.pricing::before{
  content:""; position:absolute; left:50%; top:2%; transform:translateX(-50%);
  width:min(1180px,94%); height:74%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 64% at 50% 32%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 44%, transparent 72%);
  filter:blur(8px);
}
/* pricing — dotted-grid texture (edge-masked so it fades at the section bounds) */
.pricing::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(82% 80% at 50% 46%, #000 32%, transparent 86%);
          mask-image:radial-gradient(82% 80% at 50% 46%, #000 32%, transparent 86%);
}

/* testimonials — central glow + dotted-grid texture + faint flowing wave lines */
.testi{ isolation:isolate; }
.testi::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 52% at 50% 44%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 46%, transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0);
  background-size:auto, 22px 22px;
  -webkit-mask-image:radial-gradient(85% 82% at 50% 46%, #000 30%, transparent 88%);
          mask-image:radial-gradient(85% 82% at 50% 46%, #000 30%, transparent 88%);
}
.testi::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M0 120 C 300 60 900 180 1200 120'/%3E%3Cpath d='M0 200 C 300 140 900 260 1200 200'/%3E%3Cpath d='M0 280 C 300 220 900 340 1200 280'/%3E%3Cpath d='M0 360 C 300 300 900 420 1200 360'/%3E%3Cpath d='M0 440 C 300 380 900 500 1200 440'/%3E%3Cpath d='M0 520 C 300 460 900 580 1200 520'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 26%, #000 72%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 26%, #000 72%, transparent 100%);
}

/* ============================================================
   HERO — liquid-metal / chrome shader background (replaces the sphere)
   The canvas carries a STATIC chrome gradient as its CSS background;
   WebGL paints over it when it runs. Mobile / reduced-motion / no-WebGL
   keep the static gradient (heroMetal.js bails out).
   ============================================================ */
.hero-card .sphere-wrap{ display:none !important; }
/* ============================================================
   HERO background video (replaces the metal shader canvas).
   Sits behind everything (z-0); object-fit:cover fills the card.
   ============================================================ */
.hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  display:block; pointer-events:none; border-radius:inherit;
  object-fit:cover; object-position:center;
  background:#070707;   /* fallback while poster/video loads */
}
/* subtle dark scrim over the video so the white headline stays legible */
.hero-vid-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(6,6,8,0.50) 0%, rgba(6,6,8,0.18) 30%, rgba(6,6,8,0.26) 68%, rgba(6,6,8,0.58) 100%),
    radial-gradient(120% 105% at 50% 46%, transparent 48%, rgba(4,4,6,0.40) 100%);
}
/* mobile: white text blends worst on bright video frames, so lean stronger on the
   scrim (darker top + bottom where the corner text sits, plus a light overall tint).
   Still just a CSS gradient between video (z0) and text (z2) — video stays visible. */
@media (max-width:760px){
  .hero-vid-scrim{
    background:
      linear-gradient(180deg, rgba(5,5,7,0.62) 0%, rgba(5,5,7,0.30) 26%, rgba(5,5,7,0.34) 60%, rgba(5,5,7,0.68) 100%),
      linear-gradient(rgba(4,4,6,0.16), rgba(4,4,6,0.16));
  }
}
/* reduced motion: hold the poster frame, don't play */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
  .hero-card .hero-video + .hero-vid-scrim{
    background-image:
      url("avrea/media/avrea-hero-poster.jpg"),
      linear-gradient(180deg, rgba(6,6,8,0.42) 0%, rgba(6,6,8,0.14) 30%, rgba(6,6,8,0.22) 70%, rgba(6,6,8,0.50) 100%);
    background-size:cover, auto; background-position:center; z-index:0;
  }
}
.hero-grain{ z-index:1; }

/* ============================================================
   Hero scroll-down indicator — subtle grayscale chevron pill,
   bottom-center of the hero card. Smooth-scrolls to #services.
   ============================================================ */
.hscroll{
  position:absolute; z-index:7; left:50%; bottom:clamp(16px,2.2vw,26px);
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:56px; height:36px; border-radius:13px;
  color:rgba(255,255,255,0.78);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  text-decoration:none; cursor:pointer;
  transition:opacity .5s ease, color .25s ease, background .25s ease, border-color .25s ease;
  animation:hscrollFloat 2.2s ease-in-out infinite alternate;
}
.hscroll svg{ width:24px; height:24px; display:block; }
.hscroll:hover{ color:#fff; background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.38); }
.hscroll:focus-visible{ outline:2px solid rgba(255,255,255,0.7); outline-offset:3px; }
.hscroll.is-hidden{ opacity:0; pointer-events:none; }
@keyframes hscrollFloat{ from{ transform:translate(-50%,-3px); } to{ transform:translate(-50%,3px); } }
@media (prefers-reduced-motion: reduce){
  .hscroll{ animation:none; transform:translateX(-50%); }
}