/* JBWB. Luxury technology + Caribbean innovation. */
:root {
  --bg: #06070A;
  --bg-2: #0A0C11;
  --graphite: #12151C;
  --graphite-2: #1A1E27;
  --navy: #0A1633;
  --line: rgba(170, 190, 230, .11);
  --line-2: rgba(170, 190, 230, .2);
  --ink: #EEF2F8;
  --ink-soft: #A0A9BA;
  --ink-dim: #6B7486;
  --blue: #2459F0;
  --blue-hi: #4D82FF;
  --blue-glow: rgba(46, 107, 255, .35);
  --paper: #ECEEF2;
  --paper-ink: #0C0F16;
  --paper-soft: #4A5264;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-text: "Geist", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 1320px;
  --section: clamp(5.5rem, 11vw, 10rem);
  --r: 10px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --e1: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,4,20,.6);
  --e2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -24px rgba(0,6,30,.8);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.65; letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.is-loading body { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: #2a3142 var(--bg); }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #232a39; border-radius: 10px; border: 2px solid var(--bg); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--blue); color: #fff; padding: .6rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; }

/* grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 150; opacity: .05; mix-blend-mode: overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.display, .h2, .hero__title, .statement__title {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 750; letter-spacing: -.035em; line-height: .98;
}
.display { font-size: clamp(2.6rem, 7.2vw, 6.2rem); }
.h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.02; }
.h4 { font-family: var(--f-display); font-stretch: 108%; font-size: 1.45rem; letter-spacing: -.02em; }
.lede { color: var(--ink-soft); font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 56ch; line-height: 1.6; }
.eyebrow { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-hi); }
.sec-head { max-width: 900px; display: grid; gap: 1.25rem; margin-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- buttons ---------- */
.btn {
  --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: var(--h); padding: 0 1.5rem;
  border-radius: 999px; font-weight: 550; font-size: .98rem; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; position: relative; isolation: isolate;
  transition: transform .14s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--sm { --h: 42px; padding: 0 1.15rem; font-size: .9rem; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 30px -10px rgba(36, 89, 240, .7); }
.btn--ghost { background: rgba(255,255,255,.03); border-color: var(--line-2); color: var(--ink); }
.btn--line { background: transparent; border-color: var(--line-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #3468FF; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 36px -10px rgba(46, 107, 255, .85); }
  .btn--ghost:hover, .btn--line:hover { border-color: rgba(120,160,255,.55); background: rgba(46,107,255,.08); }
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 300; background: #030407; display: grid; place-items: center; transition: clip-path .9s var(--ease-io), opacity .5s ease; clip-path: inset(0 0 0 0); }
.loader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.loader.is-fast { transition: opacity .35s ease; }
.loader.is-fast.is-done { clip-path: none; opacity: 0; }
.loader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__center { position: relative; display: grid; justify-items: center; gap: 1.1rem; }
.loader__logo { width: clamp(240px, 42vw, 440px); height: auto; opacity: 0; filter: blur(8px) brightness(1.6); transform: scale(.97); transition: opacity .7s var(--ease), filter .9s var(--ease), transform 1s var(--ease); }
.loader.show-logo .loader__logo { opacity: 1; filter: none; transform: none; }
.loader__tag { font-size: clamp(.85rem, 1.6vw, 1rem); color: var(--ink-soft); letter-spacing: .02em; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.loader.show-tag .loader__tag { opacity: 1; transform: none; }
.loader__bar { width: 160px; height: 1px; background: rgba(255,255,255,.1); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 100%; background: var(--blue-hi); transform-origin: left; transform: scaleX(0); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); transition: transform .5s var(--ease); }
.nav__inner {
  height: 100%; max-width: calc(var(--max) + 2rem); margin: 0 auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 2rem; position: relative;
}
.nav::before { content: ""; position: absolute; inset: 10px max(10px, calc((100vw - var(--max) - 2rem) / 2)); border-radius: 16px; background: rgba(8, 10, 15, .0); border: 1px solid transparent; transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s; }
.nav.is-solid::before { background: rgba(9, 11, 16, .72); border-color: var(--line); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-left: .6rem; }
.brand__logo { height: 34px; width: auto; }
@media (max-width: 600px) { .brand__logo { height: 30px; } }
.nav__links { display: flex; gap: .25rem; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: .92rem; color: var(--ink-soft); padding: .5rem .8rem; border-radius: 8px; transition: color .15s var(--ease), background-color .15s var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active { background: rgba(255,255,255,.05); }
.nav__cta { margin-right: .4rem; }
.nav__toggle { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); cursor: pointer; position: relative; margin-right: .3rem; }
.nav__toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.nav__toggle span:first-child { top: 18px; } .nav__toggle span:last-child { top: 26px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
}

/* ---------- mobile menu ---------- */
.menu { position: fixed; inset: 0; z-index: 90; background: #05060A; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 3vh) var(--gutter) max(2rem, env(safe-area-inset-bottom)); overflow: auto; clip-path: circle(0 at calc(100% - 44px) 36px); transition: clip-path .7s var(--ease-io); }
.menu[hidden] { display: none; }
.menu.is-open { clip-path: circle(150% at calc(100% - 44px) 36px); }
.menu__glow { position: absolute; width: 90vw; height: 90vw; right: -40vw; top: -30vw; background: radial-gradient(closest-side, rgba(36,89,240,.28), transparent); pointer-events: none; }
.menu__links { display: grid; position: relative; }
.menu__links a { font-family: var(--f-display); font-stretch: 115%; font-weight: 750; font-size: clamp(2.3rem, 11vw, 3.6rem); letter-spacing: -.035em; line-height: 1.12; text-decoration: none; padding: .15rem 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.menu__links a span { display: inline-block; transform: translateY(105%); transition: transform .7s var(--ease); }
.menu.is-open .menu__links a span { transform: none; }
.menu.is-open .menu__links a:nth-child(2) span { transition-delay: .05s; } .menu.is-open .menu__links a:nth-child(3) span { transition-delay: .1s; }
.menu.is-open .menu__links a:nth-child(4) span { transition-delay: .15s; } .menu.is-open .menu__links a:nth-child(5) span { transition-delay: .2s; } .menu.is-open .menu__links a:nth-child(6) span { transition-delay: .25s; }
.menu__foot { display: grid; gap: 1.5rem; margin-top: 2.5rem; position: relative; opacity: 0; transition: opacity .5s .3s ease; }
.menu.is-open .menu__foot { opacity: 1; }
.menu__foot .btn { width: 100%; }
.menu__contact { display: grid; gap: .35rem; font-size: .95rem; color: var(--ink-soft); }
.menu__contact a { text-decoration: none; color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; height: 240vh; }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 72% 45%, rgba(24, 58, 170, .32), transparent 70%),
  radial-gradient(40% 40% at 90% 90%, rgba(10, 22, 51, .9), transparent 70%),
  linear-gradient(180deg, #05060A 0%, #070A12 60%, #06070A 100%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(120,150,220,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,220,.06) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 70% 50%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 70% 50%, #000 20%, transparent 75%); }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster { position: absolute; right: 4vw; top: 50%; width: min(52vw, 700px); transform: translateY(-45%) perspective(1200px) rotateY(-14deg) rotateX(4deg); opacity: 0; transition: opacity .6s; }
.no-webgl .hero__poster { opacity: .9; }
.hero__copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); will-change: transform, opacity; }
.hero__copy > * { max-width: 40rem; }
.hero__label { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); display: flex; gap: .7rem; align-items: center; margin-bottom: 1.6rem; }
.hero__label .arrow { color: var(--blue-hi); letter-spacing: 0; }
.hero__title { font-size: clamp(2.5rem, 4.7vw, 4.6rem); max-width: 10.5em; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6,7,10,.9) 0%, rgba(6,7,10,.72) 30%, rgba(6,7,10,0) 52%); }
.hero__sub { margin-top: 1.6rem; color: var(--ink-soft); font-size: clamp(1.02rem, 1.3vw, 1.18rem); max-width: 34rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.hero__foot { margin-top: 2.4rem; font-size: .9rem; color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.hero__wa { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.hero__wa:hover { color: var(--ink); border-color: var(--blue-hi); }
.hero__beat { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2; font-family: var(--f-display); font-stretch: 110%; font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -.025em; line-height: 1.1; opacity: 0; transform: translateY(20px); pointer-events: none; }
.hero__beat span { display: block; } .hero__beat .dim { color: var(--ink-soft); font-weight: 500; }
/* reveal after loader */
.hero__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.is-ready .hero__copy > * { opacity: 1; transform: none; }
.is-ready .hero__copy > :nth-child(2) { transition-delay: .08s; } .is-ready .hero__copy > :nth-child(3) { transition-delay: .16s; }
.is-ready .hero__copy > :nth-child(4) { transition-delay: .24s; } .is-ready .hero__copy > :nth-child(5) { transition-delay: .32s; }

@media (max-width: 860px) {
  .hero { height: 190vh; }
  .hero__bg { background: radial-gradient(90% 45% at 60% 24%, rgba(24, 58, 170, .35), transparent 70%), linear-gradient(180deg, #05060A, #06070A); }
  .hero__copy { justify-content: flex-end; padding-bottom: 7vh; }
  .hero__scrim { background: linear-gradient(180deg, rgba(6,7,10,0) 32%, rgba(6,7,10,.82) 56%, rgba(6,7,10,.92) 100%); }
  .hero__title { font-size: clamp(2.15rem, 9.4vw, 3.1rem); }
  .hero__sub { font-size: 1rem; margin-top: 1.1rem; }
  .hero__label { margin-bottom: 1rem; }
  .hero__ctas { margin-top: 1.5rem; } .hero__ctas .btn { flex: 1 1 auto; }
  .hero__foot { margin-top: 1.2rem; }
  .hero__poster { right: 50%; top: 22%; width: 88vw; transform: translate(50%, -50%) perspective(900px) rotateX(8deg); }
  .hero__beat { bottom: auto; top: 56vh; top: 56svh; }
}
@media (max-width: 380px), (max-height: 680px) and (max-width: 860px) {
  .hero__sub { display: none; }
}

/* ---------- pricing ---------- */
.pricing { position: relative; padding: var(--section) 0 calc(var(--section) * .8); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.012); position: relative; }
.plan { position: relative; padding: clamp(1.6rem, 2.2vw, 2.2rem); display: flex; flex-direction: column; gap: .2rem; border-left: 1px solid var(--line); transition: background-color .3s var(--ease); }
.plan:first-child { border-left: 0; }
.plan__name { font-family: var(--f-display); font-stretch: 108%; font-weight: 650; font-size: 1.08rem; letter-spacing: -.01em; color: var(--ink-soft); }
.plan__price { font-family: var(--f-display); font-stretch: 112%; font-weight: 750; font-size: clamp(2.3rem, 3.1vw, 3rem); letter-spacing: -.04em; line-height: 1.1; margin-top: 1.1rem; font-variant-numeric: tabular-nums; }
.plan__price .cur { font-size: .42em; letter-spacing: 0; font-weight: 600; vertical-align: .95em; margin-right: .15em; color: var(--ink-soft); }
.plan__term { font-size: .85rem; color: var(--ink-dim); }
.plan__list { margin: 1.6rem 0 2rem; display: grid; gap: .6rem; align-content: start; font-size: .95rem; color: var(--ink-soft); flex: 1; }
.plan__list li { display: flex; gap: .65rem; align-items: baseline; }
.plan__list li::before { content: ""; flex: none; width: 10px; height: 6px; border-left: 1.5px solid var(--blue-hi); border-bottom: 1.5px solid var(--blue-hi); transform: rotate(-45deg) translateY(-2px); }
.plan__cta { width: 100%; }
.plan.is-selected { background: rgba(46,107,255,.06); }
.plan.is-selected .plan__cta { border-color: var(--blue-hi); }
.plan.is-selected .plan__cta::after { content: " ✓"; }
.plan--featured {
  margin: -18px 0; padding-top: calc(clamp(1.6rem, 2.2vw, 2.2rem) + 18px); padding-bottom: calc(clamp(1.6rem, 2.2vw, 2.2rem) + 18px);
  border-radius: 18px; border: 1px solid rgba(90, 140, 255, .45) !important; z-index: 1;
  background: radial-gradient(120% 60% at 50% 0%, rgba(46,107,255,.28), transparent 60%), linear-gradient(180deg, #0F1730, #0A0F1E);
  box-shadow: 0 1px 0 rgba(160,190,255,.25) inset, 0 40px 80px -30px rgba(20, 60, 200, .55);
}
.plan--featured .plan__name { color: var(--ink); }
.plan--featured + .plan { border-left: 0; }
.plan__badge { position: absolute; top: 18px; right: 18px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--blue); padding: .35rem .6rem; border-radius: 6px; }
.plan--premium .plan__price { background: none; }
.plan--premium::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(120,160,255,.7), transparent); }
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plan--featured { margin: -1px; }
  .plan--featured + .plan { border-left: 0; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; border: 0; background: none; gap: 0; }
  .plan { border-left: 0 !important; border-top: 1px solid var(--line); padding-inline: .25rem; }
  .plan:first-child { border-top: 0; }
  .plan--featured { margin: .75rem -.25rem; padding-inline: 1.4rem; }
  .plan--featured + .plan { border-top: 0; }
}

.custom { margin-top: clamp(3rem, 6vw, 4.5rem); display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.custom p { color: var(--ink-soft); max-width: 60ch; margin-top: .5rem; }
@media (max-width: 760px) { .custom { flex-direction: column; align-items: flex-start; } }

.addons { margin-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: calc(var(--nav-h) + 16px); }
.addons__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .6rem 2rem; padding-bottom: 1.4rem; }
.addons__title { font-family: var(--f-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.25rem, 2.4vw, 1.9rem); letter-spacing: -.01em; }
.addons__hint { color: var(--ink-soft); font-size: .92rem; }
.addons__rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; border-bottom: 1px solid var(--line); }
.addons__rows li { display: flex; align-items: center; border-top: 1px solid var(--line); }
.addons__rows label { flex: 1; display: flex; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; min-height: 56px; }
.addons__rows input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; margin: 0; transition: background-color .15s, border-color .15s; cursor: pointer; }
.addons__rows input::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .18s var(--ease); }
.addons__rows input:checked { background: var(--blue); border-color: var(--blue); }
.addons__rows input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.ad-name { flex: 1; } .ad-name em { font-style: normal; color: var(--ink-soft); margin-left: .35rem; }
.ad-price { font-family: var(--f-mono); font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.qty { display: none; align-items: center; gap: .1rem; margin-left: 1rem; border: 1px solid var(--line-2); border-radius: 999px; }
.has-qty.is-on .qty { display: inline-flex; }
.qty button { width: 34px; height: 34px; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.qty button:hover { background: rgba(255,255,255,.06); }
.qty output { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }
@media (max-width: 760px) { .addons__rows { grid-template-columns: 1fr; } .ad-price { font-size: .8rem; } }

.estimate { position: sticky; bottom: 0; z-index: 20; padding: 0 var(--gutter) max(14px, env(safe-area-inset-bottom)); margin-top: 1.5rem; }
.estimate__inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; padding: .7rem .7rem .7rem 1.4rem; border-radius: 16px; background: rgba(12, 16, 28, .88); border: 1px solid rgba(90,140,255,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--e2); animation: estIn .45s var(--ease); }
@keyframes estIn { from { opacity: 0; transform: translateY(12px); } }
.estimate__text { display: grid; flex: 1; min-width: 0; }
.estimate__label { font-size: .75rem; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.estimate__items { font-size: .92rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estimate__total { font-family: var(--f-display); font-stretch: 112%; font-size: 1.5rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.estimate__clear { background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size: .85rem; padding: .5rem; }
.estimate__clear:hover { color: var(--ink); }
@media (max-width: 600px) { .estimate__inner { flex-wrap: wrap; gap: .5rem 1rem; } .estimate__text { flex-basis: 100%; } .estimate__total { font-size: 1.25rem; margin-right: auto; } }

/* ---------- statement ---------- */
.statement { position: relative; height: 220vh; }
.statement__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: hidden; }
.statement__light { position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--s, .6)); background: radial-gradient(closest-side, rgba(36, 89, 240, .22), rgba(36,89,240,.06) 50%, transparent); opacity: var(--o, 0); pointer-events: none; }
.statement__inner { position: relative; }
.statement__title { font-size: clamp(2.6rem, 8vw, 7.4rem); line-height: .98; max-width: 13ch; }
.statement__title .w { color: rgba(238,242,248,.13); transition: color .25s linear; }
.statement__title .w.on { color: var(--ink); }
.statement__title .w.q.on { color: var(--blue-hi); }
.statement__body { margin-top: 2.2rem; max-width: 44ch; margin-left: auto; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-soft); opacity: var(--b, 0); transform: translateY(calc((1 - var(--b, 0)) * 20px)); }
@media (max-width: 760px) { .statement__body { margin-left: 0; } }

/* ---------- value ---------- */
.value { padding: var(--section) 0; }
.value__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.value__side { position: sticky; top: calc(var(--nav-h) + 3rem); display: grid; gap: 1.4rem; }
.hub { margin-top: 1rem; max-width: 380px; }
.hub__svg { width: 100%; height: auto; overflow: visible; }
.hub__ring { fill: none; stroke: var(--line-2); stroke-dasharray: 2 6; }
.hub__ring--in { stroke: rgba(77,130,255,.25); stroke-dasharray: none; }
.hub__spokes line { stroke: rgba(77,130,255,.5); stroke-width: 1; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.1s var(--ease); }
.hub__nodes g { transition: transform 1.1s var(--ease), opacity .6s; }
.hub__nodes rect { fill: #0E131F; stroke: var(--line-2); }
.hub__nodes text { fill: var(--ink-soft); font-size: 12.5px; font-family: var(--f-text); }
.hub__core rect { fill: #0E1730; stroke: rgba(77,130,255,.7); }
.hub__core path { stroke: rgba(77,130,255,.5); }
.hub__core circle { fill: #3b4a70; }
.hub__core text { fill: var(--ink); font-size: 14px; font-family: var(--f-display); font-weight: 700; }
.hub.is-in .hub__spokes line { stroke-dashoffset: 0; }
.value__list { counter-reset: v; }
.value__list li { padding: 2.2rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: .6rem; }
.value__list li:last-child { border-bottom: 1px solid var(--line); }
.value__list h3 { font-family: var(--f-display); font-stretch: 110%; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.025em; font-weight: 700; }
.value__list p { color: var(--ink-soft); max-width: 48ch; }
.value__hubitem h3 { color: var(--blue-hi); }
@media (max-width: 900px) { .value__grid { grid-template-columns: 1fr; } .value__side { position: static; } .hub { max-width: 300px; } }

/* ---------- versus (light) ---------- */
.versus { --ink: var(--paper-ink); --ink-soft: var(--paper-soft); --line: rgba(12,15,22,.12); background: var(--paper); color: var(--paper-ink); padding: var(--section) 0; }
.versus__title span { color: var(--blue); display: block; }
.versus__cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.versus__col { padding: 2.2rem 2rem 2.2rem 0; }
.versus__col--site { padding-left: 2.5rem; border-left: 1px solid var(--line); }
.versus__col h3 { font-family: var(--f-mono); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-soft); margin-bottom: 1.4rem; }
.versus__col ul { display: grid; gap: .1rem; }
.versus__col li { font-family: var(--f-display); font-stretch: 108%; font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.versus__col:not(.versus__col--site) li { color: #7a8294; }
.versus__col--site ul { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.versus__end { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); font-size: clamp(1.15rem, 1.8vw, 1.5rem); max-width: 42ch; color: var(--paper-soft); }
.versus__end strong { color: var(--paper-ink); font-weight: 600; }
@media (max-width: 820px) { .versus__cols { grid-template-columns: 1fr; } .versus__col--site { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .versus__col--site ul { grid-template-columns: 1fr; } }

/* ---------- services ---------- */
.services { padding: var(--section) 0; }
.svc { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.svc__list { border-top: 1px solid var(--line); }
.svc__list li { border-bottom: 1px solid var(--line); }
.svc__list button { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.05rem 0; font-family: var(--f-display); font-stretch: 110%; font-weight: 650; font-size: clamp(1.3rem, 2.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1.15; color: var(--ink-dim); display: flex; align-items: center; gap: 1rem; transition: color .2s var(--ease), padding-left .35s var(--ease); }
.svc__list button::before { content: ""; width: 0; height: 2px; background: var(--blue-hi); transition: width .35s var(--ease); }
.svc__list button.is-on, .svc__list button:hover { color: var(--ink); }
.svc__list button.is-on::before { width: 28px; }
.svc__panel { position: sticky; top: calc(var(--nav-h) + 3rem); }
.svc__panel-in { border: 1px solid var(--line); border-radius: 16px; padding: 2.2rem; background: radial-gradient(120% 80% at 100% 0%, rgba(36,89,240,.16), transparent 60%), var(--graphite); box-shadow: var(--e2); display: grid; gap: 1rem; min-height: 320px; align-content: start; }
.svc__name { font-family: var(--f-display); font-stretch: 112%; font-weight: 750; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.05; }
.svc__desc { color: var(--ink-soft); font-size: 1.08rem; }
.svc__note { font-family: var(--f-mono); font-size: .8rem; color: var(--blue-hi); letter-spacing: .04em; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.svc__panel-in .btn { justify-self: start; }
.svc__panel-in.swap > * { animation: swap .4s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }
.svc__inline { display: none; }
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; }
  .svc__panel { display: none; }
  .svc__inline { display: block; padding: 0 0 1.2rem 44px; color: var(--ink-soft); font-size: .98rem; }
  .svc__inline small { display: block; margin-top: .4rem; font-family: var(--f-mono); color: var(--blue-hi); font-size: .78rem; }
  .svc__list li:not(.open) .svc__inline { display: none; }
}

/* ---------- why ---------- */
.why { padding: var(--section) 0; background: radial-gradient(60% 50% at 50% 0%, rgba(10,22,51,.8), transparent 70%); }
.why__title span { color: var(--ink-soft); display: block; }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); position: relative; }
.why__item { padding: 2.4rem 2rem 2.6rem 0; border-bottom: 1px solid var(--line); position: relative; }
.why__item:not(:nth-child(3n+1)) { padding-left: 2rem; border-left: 1px solid var(--line); }
.why__item h3 { font-family: var(--f-display); font-stretch: 110%; font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: .7rem; }
.why__item p { color: var(--ink-soft); font-size: .98rem; max-width: 34ch; }
.why__item::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--blue-hi); transition: width .6s var(--ease); }
.why__item:not(:nth-child(3n+1))::before { left: 0; }
@media (hover: hover) and (pointer: fine) { .why__item:hover::before { width: 100%; } }
.why__grid .spot { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(46,107,255,.14), transparent); pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s; left: 0; top: 0; }
.why__grid:hover .spot { opacity: 1; }
@media (max-width: 900px) { .why__grid { grid-template-columns: 1fr 1fr; } .why__item { padding-left: 0 !important; border-left: 0 !important; padding-right: 1.2rem; } .why__item:nth-child(even) { padding-left: 1.2rem !important; border-left: 1px solid var(--line) !important; } }
@media (max-width: 560px) { .why__grid { grid-template-columns: 1fr; } .why__item:nth-child(even) { padding-left: 0 !important; border-left: 0 !important; } }

/* ---------- region / map ---------- */
.region { padding: var(--section) 0; position: relative; overflow: hidden; }
.region__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.region__copy { display: grid; gap: 1.4rem; }
.region__about { color: var(--ink-soft); font-size: .98rem; max-width: 46ch; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.region__note { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-hi); }
.map { margin: 0; position: relative; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map figcaption { font-size: .82rem; color: var(--ink-dim); margin-top: .6rem; text-align: right; }
.map .dot { fill: #2A3346; }
.map .dot.hot { fill: #4a5a80; }
.map .arc { fill: none; stroke: url(#arcGrad); stroke-width: 1.4; stroke-linecap: round; }
.map .pin circle.core { fill: var(--blue-hi); }
.map .pin circle.ring { fill: none; stroke: var(--blue-hi); stroke-width: 1; opacity: .6; }
.map .pin text { fill: var(--ink-soft); font-size: 15px; font-family: var(--f-text); font-weight: 500; }
.map .pin.home text { fill: var(--ink); font-weight: 650; }
.map .pin.home circle.core { fill: #fff; }
.map .pulse { fill: #9fbcff; }
@media (max-width: 900px) { .region__grid { grid-template-columns: 1fr; } .map .pin text { font-size: 26px; } .map { margin-inline: calc(var(--gutter) * -1); } .map figcaption { padding-inline: var(--gutter); } }

/* ---------- who ---------- */
.who { padding: var(--section) 0; border-top: 1px solid var(--line); }
.who .lede { margin-top: 1rem; }
.who__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.who__cloud { display: flex; flex-wrap: wrap; gap: .1rem .15rem; line-height: 1.1; }
.who__cloud button { background: none; border: 0; cursor: pointer; padding: .2rem .35rem; font-family: var(--f-display); font-stretch: 108%; font-weight: 600; font-size: clamp(1.25rem, 2.3vw, 2rem); letter-spacing: -.03em; color: var(--ink-dim); border-radius: 8px; transition: color .18s var(--ease), background-color .18s var(--ease); }
.who__cloud button:hover { color: var(--ink); }
.who__cloud button.is-on { color: #fff; background: var(--blue); }
.who__cloud .sep { color: #262c38; font-size: clamp(1.25rem, 2.3vw, 2rem); align-self: center; user-select: none; }
.who__panel { position: sticky; top: calc(var(--nav-h) + 3rem); border-left: 1px solid var(--line-2); padding-left: 2rem; display: grid; gap: .8rem; }
.who__kicker { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.who__name { font-family: var(--f-display); font-stretch: 112%; font-weight: 750; font-size: 2.1rem; letter-spacing: -.03em; line-height: 1.05; }
.who__feats { display: grid; gap: .5rem; margin: .6rem 0; }
.who__feats li { color: var(--ink-soft); display: flex; gap: .7rem; align-items: baseline; }
.who__feats li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-hi); flex: none; transform: translateY(-2px); }
.who__plan { font-size: .92rem; color: var(--ink-dim); } .who__plan strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .who__grid { grid-template-columns: 1fr; } .who__panel { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 1.5rem; } }

/* ---------- process (light-ish graphite band) ---------- */
.process { padding: var(--section) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 3rem; }
.steps__track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.steps__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--blue-hi)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.step { position: relative; }
.step::before { content: ""; position: absolute; top: calc(-3rem - 5px); left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--line-2); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.step.on::before { background: var(--blue-hi); border-color: var(--blue-hi); box-shadow: 0 0 0 6px rgba(77,130,255,.15); }
.step__n { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-dim); letter-spacing: .1em; transition: color .3s; }
.step.on .step__n { color: var(--blue-hi); }
.step h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.02em; margin: .5rem 0 .7rem; }
.step p { color: var(--ink-soft); font-size: .98rem; max-width: 30ch; }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 0; padding-left: 2.2rem; }
  .steps__track { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .steps__fill { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .step::before { top: 6px; left: calc(-2.2rem); }
}

/* ---------- portfolio ---------- */
.work { padding: var(--section) 0; }
.work__head { display: grid; gap: 1.2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.work__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.proj--lg { grid-column: 1 / -1; }
.proj__meta { margin-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; align-items: baseline; }
.proj__meta h3 { font-family: var(--f-display); font-stretch: 110%; font-size: 1.35rem; letter-spacing: -.02em; }
.proj__meta p { color: var(--ink-soft); font-size: .95rem; }
.browser { border-radius: 12px; overflow: hidden; background: #0d1017; border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 100px -40px rgba(0,8,40,.9), 0 20px 40px -20px rgba(0,0,0,.6); transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), border-color .3s; cursor: pointer; }
.browser:hover, .browser:focus-visible { border-color: rgba(90,140,255,.45); }
.browser__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #141821; border-bottom: 1px solid var(--line); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2b3140; }
.browser__bar span { margin: 0 auto; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-dim); background: #0c0f15; padding: 3px 14px; border-radius: 6px; transform: translateX(-20px); }
.browser__view { aspect-ratio: 16 / 9.4; overflow: hidden; position: relative; }
.proj:not(.proj--lg) .browser__view { aspect-ratio: 4 / 3; }
.mock { position: absolute; inset: 0 0 auto 0; transition: transform 2.8s var(--ease-io); font-family: var(--f-text); }
.browser:hover .mock, .browser:focus-visible .mock, .browser.is-peek .mock { transform: translateY(var(--scroll, -40%)); }

/* concept: saltwater */
.mock--salt { background: #0f0b09; color: #f3e6d6; --scroll: -42%; }
.mock--salt .m-nav { display: flex; gap: 2.2%; align-items: center; padding: 2.4% 4%; font-size: clamp(.6rem, 1vw, .85rem); color: #c9b49c; }
.mock--salt .m-nav b { margin-right: auto; font-family: var(--f-display); font-stretch: 80%; font-weight: 800; letter-spacing: .02em; font-size: 1.4em; color: #f3e6d6; text-transform: uppercase; }
.mock--salt .m-hero { position: relative; height: 0; padding-bottom: 46%; overflow: hidden; }
.mock--salt .m-sun { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; right: 12%; top: 18%; background: radial-gradient(circle at 50% 40%, #ffb36b, #e0612f 55%, #8a2c17); box-shadow: 0 0 120px 30px rgba(224,97,47,.35); }
.mock--salt .m-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: repeating-linear-gradient(180deg, #1a1210 0 6px, #2a1a14 6px 8px), linear-gradient(#1a1210, #0f0b09); mask-image: linear-gradient(transparent, #000 30%); -webkit-mask-image: linear-gradient(transparent, #000 30%); }
.mock--salt .m-hero h4 { position: absolute; left: 4%; top: 18%; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: clamp(1.6rem, 5.2vw, 4.4rem); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; }
.mock--salt .m-hero em { position: absolute; left: 4%; top: 62%; font-style: normal; font-size: clamp(.55rem, 1vw, .85rem); background: #f3e6d6; color: #1a0f0a; padding: .8% 2%; border-radius: 99px; }
.mock--salt .m-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding: 5% 4%; border-top: 1px solid #2b1f19; }
.mock--salt .m-row small { font-size: clamp(.45rem, .8vw, .7rem); letter-spacing: .14em; text-transform: uppercase; color: #e0612f; }
.mock--salt .m-row p { font-size: clamp(.6rem, 1.15vw, 1rem); margin-top: 4%; line-height: 1.35; }
.mock--salt .m-band { padding: 6% 4%; background: #1a120e; }
.mock--salt .m-band h5 { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 3vw, 2.6rem); }
.mock--salt .m-slots { display: flex; gap: 2%; margin-top: 3%; }
.mock--salt .m-slots span { font-size: clamp(.55rem, 1vw, .9rem); border: 1px solid #3a2a22; padding: 1% 3%; border-radius: 99px; }
.mock--salt .m-slots .on { background: #e0612f; border-color: #e0612f; color: #1a0f0a; }
.mock--salt .m-foot { padding: 4%; font-size: clamp(.5rem, .9vw, .8rem); color: #8a7563; }

/* concept: ridgeline */
.mock--ridge { background: #eef0ec; color: #14201a; --scroll: -30%; }
.mock--ridge .m-nav { display: flex; gap: 4%; padding: 3% 5%; font-size: clamp(.55rem, .9vw, .78rem); align-items: center; }
.mock--ridge .m-nav b { margin-right: auto; letter-spacing: .32em; font-size: 1.05em; }
.mock--ridge .m-hero { position: relative; height: 0; padding-bottom: 52%; background: linear-gradient(180deg, #1c3040, #45677a 55%, #c9b99a 56%, #7d8f78 70%, #3f5446); overflow: hidden; }
.mock--ridge .m-house { position: absolute; right: 8%; bottom: 22%; width: 46%; height: 30%; }
.mock--ridge .m-house i { position: absolute; background: #eef0ec; box-shadow: inset 0 -8px 0 rgba(0,0,0,.08); }
.mock--ridge .m-house i:nth-child(1) { left: 0; bottom: 0; width: 60%; height: 55%; }
.mock--ridge .m-house i:nth-child(2) { left: 30%; bottom: 55%; width: 70%; height: 40%; background: #d8dcd4; }
.mock--ridge .m-house i:nth-child(3) { left: 36%; bottom: 62%; width: 50%; height: 22%; background: #ffcf7a; box-shadow: 0 0 30px rgba(255,207,122,.6); }
.mock--ridge .m-hero h4 { position: absolute; left: 5%; top: 14%; color: #fff; font-family: var(--f-display); font-stretch: 100%; font-weight: 500; font-size: clamp(1.1rem, 3.2vw, 2.6rem); line-height: 1; letter-spacing: -.03em; }
.mock--ridge .m-search { display: flex; gap: 2%; margin: -4% 5% 0; position: relative; background: #fff; padding: 2.4%; border-radius: 6px; font-size: clamp(.5rem, .85vw, .75rem); color: #5e6a62; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.mock--ridge .m-search span { flex: 1; border-right: 1px solid #e3e6e1; }
.mock--ridge .m-search b { background: #14201a; color: #fff; padding: 1% 4%; border-radius: 4px; }
.mock--ridge .m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding: 6% 5%; }
.mock--ridge .m-cards i { display: block; aspect-ratio: 4/3; border-radius: 4px; background: linear-gradient(160deg, #6f8a86, #2f4640); }
.mock--ridge .m-cards div:nth-child(2) i { background: linear-gradient(160deg, #9fb3c4, #36526a); }
.mock--ridge .m-cards div:nth-child(3) i { background: linear-gradient(160deg, #b9b08a, #5d6b4a); }
.mock--ridge .m-cards p { font-size: clamp(.5rem, .9vw, .8rem); margin-top: 6%; }

/* concept: fade theory */
.mock--fade { background: #0b0b0c; color: #f5f5f2; --scroll: -34%; }
.mock--fade .m-nav { display: flex; gap: 5%; padding: 3.5% 5%; font-size: clamp(.55rem, .9vw, .78rem); color: #9d9d98; }
.mock--fade .m-nav b { margin-right: auto; color: #f5f5f2; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; letter-spacing: -.02em; }
.mock--fade .m-hero { position: relative; padding: 6% 5% 10%; }
.mock--fade .m-hero h4 { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: clamp(1.4rem, 4.8vw, 3.6rem); line-height: .9; letter-spacing: -.05em; text-transform: uppercase; }
.mock--fade .m-pole { position: absolute; right: 8%; top: 8%; width: 11%; height: 80%; border-radius: 99px; background: repeating-linear-gradient(135deg, #f5f5f2 0 10px, #c8322f 10px 20px, #f5f5f2 20px 30px, #1f4fbf 30px 40px); opacity: .9; }
.mock--fade .m-list { padding: 0 5%; }
.mock--fade .m-list p { display: flex; justify-content: space-between; padding: 3.4% 0; border-top: 1px solid #242426; font-size: clamp(.6rem, 1.1vw, .95rem); }
.mock--fade .m-list span { color: #c9a45c; font-family: var(--f-mono); }
.mock--fade .m-book { margin: 6% 5%; padding: 5%; background: #c9a45c; color: #0b0b0c; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; font-size: clamp(.6rem, 1.1vw, .95rem); }
.mock--fade .m-book b { font-family: var(--f-display); font-stretch: 125%; font-size: 1.3em; text-transform: uppercase; }
@media (max-width: 760px) { .work__grid { grid-template-columns: 1fr; } }

/* ---------- close / contact ---------- */
.close { position: relative; padding: var(--section) 0; overflow: hidden; border-top: 1px solid var(--line); }
.close__light { position: absolute; left: -10vw; top: -20vh; width: 80vw; height: 80vw; background: radial-gradient(closest-side, rgba(36,89,240,.22), transparent); pointer-events: none; }
.close__grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.close__title { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.close__title span { color: var(--blue-hi); display: block; margin-top: .15em; }
.close__copy .lede { margin-top: 1.6rem; }
.close__direct { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.close__direct a { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 1.05rem; transition: color .15s, padding-left .3s var(--ease); }
.close__direct a span { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); align-self: center; }
.close__direct a:hover { color: var(--blue-hi); padding-left: .4rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); box-shadow: var(--e2); }
.field { display: grid; gap: .4rem; }
.field--full, .form__actions, .form__status, .form__est { grid-column: 1 / -1; }
.field label { font-size: .82rem; color: var(--ink-soft); }
.field input, .field select, .field textarea { width: 100%; background: #0B0E15; border: 1px solid var(--line-2); border-radius: 10px; padding: .85rem 1rem; font-size: 1rem; color: var(--ink); caret-color: var(--blue-hi); transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23A0A9BA' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px; padding-right: 2.6rem; }
.field input::placeholder, .field textarea::placeholder { color: #566074; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(77,130,255,.18); }
.field input[aria-invalid="true"] { border-color: #e0564f; }
.form__est { font-size: .92rem; color: var(--ink-soft); padding: .8rem 1rem; border: 1px dashed rgba(90,140,255,.4); border-radius: 10px; }
.form__est strong { color: var(--ink); }
.form__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.form__status { font-size: .9rem; color: var(--ink-soft); min-height: 1.4em; }
@media (max-width: 900px) { .close__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } .form__actions .btn { flex: 1 1 100%; } }

/* ---------- footer ---------- */
.foot { padding: clamp(4rem, 8vw, 6rem) 0 2rem; border-top: 1px solid var(--line); background: #040508; overflow: hidden; }
.foot__brand { display: grid; gap: 1.2rem; justify-items: start; }
.foot__logo { width: min(520px, 80vw); height: auto; }
.foot__line { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: clamp(1.2rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--ink-soft); }
.foot__cols { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); font-size: .94rem; color: var(--ink-soft); }
.foot__cols > div { display: grid; gap: .45rem; align-content: start; }
.foot__cols a { text-decoration: none; color: var(--ink-soft); } .foot__cols a:hover { color: var(--ink); }
.foot__h { color: var(--ink); font-weight: 600; margin-bottom: .3rem; }
.foot__base { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; font-size: .82rem; color: var(--ink-dim); }
@media (max-width: 820px) { .foot__cols { grid-template-columns: 1fr 1fr; } }

/* ---------- contact dock (socials + whatsapp) ---------- */
.dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.dock.is-tucked { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.social { display: flex; flex-direction: column; gap: 8px; margin-right: 4px; }
.social__btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: rgba(14, 18, 28, .85); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--e1); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease); }
.social__btn svg { width: 19px; height: 19px; }
.is-ready .social__btn { opacity: 1; transform: none; }
.is-ready .social__btn:nth-child(2) { transition-delay: .06s, .06s, 0s, 0s, 0s; }
.is-ready .social__btn:nth-child(1) { transition-delay: .12s, .12s, 0s, 0s, 0s; }
.social__btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .social__btn:hover { color: #fff; }
  .social__btn--ig:hover { border-color: rgba(225, 48, 108, .6); background: rgba(225, 48, 108, .14); }
  .social__btn--fb:hover { border-color: rgba(24, 119, 242, .7); background: rgba(24, 119, 242, .16); }
  .social__btn--tt:hover { border-color: rgba(37, 244, 238, .55); background: rgba(37, 244, 238, .1); }
}
.wa { display: inline-flex; align-items: center; gap: .55rem; height: 52px; padding: 0 1.1rem 0 .95rem; border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 550; color: var(--ink); background: rgba(14, 18, 28, .85); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--e2); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .2s, background-color .2s; }
.is-ready .wa { opacity: 1; transform: none; }
.wa svg { width: 22px; height: 22px; color: #3DDC84; }
.wa:hover { border-color: rgba(61,220,132,.5); }
@media (max-width: 600px) {
  .wa span { display: none; } .wa { width: 52px; padding: 0; justify-content: center; }
  .dock { flex-direction: row; align-items: center; gap: 8px; }
  .social { flex-direction: row; gap: 8px; margin-right: 0; }
  .social__btn { width: 42px; height: 42px; }
  .social__btn svg { width: 18px; height: 18px; }
}

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero, .statement { height: auto; }
  .hero__stage, .statement__pin { position: relative; }
  .hero__stage { min-height: 100svh; }
  .statement__pin { height: auto; padding: var(--section) 0; }
  .statement__title .w { color: var(--ink); }
  .statement__body { opacity: 1; transform: none; }
  .statement__light { opacity: .6; }
  .rv { transform: none; transition: opacity .6s ease; }
  .mock { transition: none; }
  .browser { transform: none !important; }
  .hero__beat { display: none; }
  .menu, .menu__links a span { transition-duration: .01s; }
}