/* Lucian.my — light only. Layout: warm paper canvas, big Bricolage display type, arches + pinned film scenes, generous 12-col rhythm. */
:root{
  /* Brand palette (2026 colour guide). These six are the only base colours on the site. */
  --ink:#0D1B2A;      /* Deep Navy */
  --orange:#CC5A1E;   /* Burnt Orange */
  --yellow:#F2B705;   /* Golden Yellow */
  --emerald:#0F6B4F;  /* Emerald Green */
  --paper:#F6F4EF;    /* Warm White */
  --charcoal:#1F1F1F; /* Charcoal */
  /* Everything below is mixed from the six above. Don't add new hex values; mix instead. */
  --orange-ink:#B04A16; /* orange for small text on paper (contrast) */
  --paper-2:color-mix(in srgb,var(--ink) 5%,var(--paper));
  --paper-3:color-mix(in srgb,var(--ink) 9%,var(--paper));
  --ink-2:color-mix(in srgb,var(--ink) 86%,var(--paper));
  --muted:color-mix(in srgb,var(--ink) 66%,var(--paper));
  --line:color-mix(in srgb,var(--ink) 15%,var(--paper));
  --on-ink:color-mix(in srgb,var(--paper) 78%,var(--ink));        /* soft text on navy */
  --on-emerald:color-mix(in srgb,var(--paper) 84%,var(--emerald)); /* soft text on emerald */
  --emerald-2:color-mix(in srgb,var(--emerald) 82%,var(--charcoal));
  --shadow:31,31,31; /* charcoal, for rgba() shadows */
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --gut:clamp(16px,3.4vw,48px); --max:1440px; --edge:clamp(8px,1.4vw,20px); --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.d{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:.94;text-wrap:balance}
.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.cap{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.muted{color:var(--muted)}
.hl{background:linear-gradient(var(--yellow),var(--yellow)) 0 88%/var(--hl,0%) 42% no-repeat;padding-inline:.06em}
.hl.on,.no-motion .hl{--hl:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;white-space:nowrap;background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;transition:background .3s,color .3s,border-color .3s;will-change:transform}
.btn:hover{background:var(--orange);border-color:var(--orange)}
.btn.y{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn.y:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ol{background:transparent;color:var(--ink);border-color:rgba(13,27,42,.35)}
.btn.ol:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn.sm{min-height:42px;padding:0 18px;font-size:14px}
.btn svg{width:18px;height:18px;flex:none}
.link{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);font:500 13px/1 var(--body);background:var(--paper)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--emerald);display:block}

/* header */
/* Floating navy bar (ref: wearedirect.co) with a photo WhatsApp button (ref: grigoletti.ch) */
.hdr{position:fixed;left:var(--edge);right:var(--edge);top:calc(var(--edge) + env(safe-area-inset-top,0px));z-index:60}
.hdr .bar{height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 8px 0 22px;background:var(--ink);color:var(--paper);border-radius:16px;box-shadow:0 18px 40px -24px rgba(var(--shadow),.55)}
.logo{font:800 23px/1 var(--display);letter-spacing:-.05em;text-decoration:none;color:var(--paper);justify-self:start}
.logo b{color:var(--orange)}
.nav{display:flex;gap:30px;align-items:center}
.nav>a,.nav>.dd>button{font-weight:500;font-size:15px;text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer;position:relative;color:var(--paper)}
.nav>a::after,.nav>.dd>button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--yellow);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav>a:hover::after,.nav>a[aria-current="page"]::after,.nav>.dd:hover>button::after{transform:scaleX(1);transform-origin:left}
.hdr .right{justify-self:end;display:flex;align-items:center;gap:10px}
.hwa{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 4px;border-radius:11px;background:var(--yellow);color:var(--ink);font:600 15px/1 var(--body);text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.hwa:hover{background:var(--orange);color:var(--paper)}
.hwa svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.hwa:hover svg{transform:translateX(3px)}
.hwa{font-weight:700;letter-spacing:-.01em}
/* Lucian's headshot (lucian-avatar.webp, square) */
.av{flex:none;width:36px;height:36px;border-radius:8px;overflow:hidden;background:var(--emerald)}
.av img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.dd{position:relative}
.mega{position:absolute;left:-28px;top:calc(100% + 14px);color:var(--ink);width:min(760px,80vw);padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px -40px rgba(13,27,42,.35);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .4s var(--ease),visibility .3s}
.dd:hover .mega,.dd:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;transition:background .25s}
.mega a:hover{background:var(--paper-2)}
.mega img{width:72px;height:54px;object-fit:cover;border-radius:10px}
.mega strong{display:block;font:600 16px/1.2 var(--display);letter-spacing:-.02em}
.mega span{font-size:13px;color:var(--muted);line-height:1.35;display:block;margin-top:3px}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px} /* hover bridge to the mega menu */
.burger{display:none;width:44px;height:44px;border-radius:11px;border:1px solid rgba(246,244,239,.25);background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:13px;right:13px;height:1.6px;background:var(--paper);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:26px}
.menu-open .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:22px;transform:rotate(-45deg)}
/* ===== Mobile / tablet menu v3 (Lucian, Oct 2026): golden yellow, clean and editorial.
   Big numbered links that rise in, colour-only hover (no underline), current page in italic orange,
   services as a slim numbered list, a quiet info line (languages + Puchong local time), faint wordmark. ===== */
.mmenu{position:fixed;inset:0;z-index:55;overflow:hidden auto;overscroll-behavior:contain;background:var(--yellow);color:var(--ink);clip-path:circle(0% at calc(100% - 52px) 52px);transition:clip-path .9s var(--ease),visibility 0s .9s;visibility:hidden}
.menu-open .mmenu{clip-path:circle(160% at calc(100% - 52px) 52px);visibility:visible;transition:clip-path .9s var(--ease)}
.mm-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 100% 0%,color-mix(in srgb,var(--paper) 45%,transparent),transparent 70%),radial-gradient(60% 45% at 0% 100%,color-mix(in srgb,var(--orange) 22%,transparent),transparent 70%)}
.mm-in{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;gap:clamp(22px,3.6vh,44px);padding:calc(100px + env(safe-area-inset-top,0px)) var(--gut) calc(20px + env(safe-area-inset-bottom,0px))}
/* big links */
.mm-main{display:flex;flex-direction:column}
.mm-main a{position:relative;display:flex;align-items:flex-start;gap:12px;padding:2px 0;text-decoration:none;color:var(--ink);overflow:hidden}
.mm-main a small{margin-top:.9em;font:500 11px/1 var(--mono);letter-spacing:.1em;color:color-mix(in srgb,var(--ink) 55%,var(--yellow));opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;transition-delay:calc(.28s + var(--i) * .06s)}
.mm-main a span{display:block;font:700 clamp(46px,13vw,84px)/.98 var(--display);letter-spacing:-.055em;transform:translateY(110%) rotate(3deg);transform-origin:left bottom;transition:transform .85s var(--ease),color .3s ease,letter-spacing .4s var(--ease);transition-delay:calc(.15s + var(--i) * .06s),0s,0s}
.menu-open .mm-main a small{opacity:1;transform:none}
.menu-open .mm-main a span{transform:none}
/* hover = white (Lucian: more obvious on the yellow) */
.mm-main a:hover span,.mm-main a:focus-visible span{color:var(--paper);text-shadow:0 10px 30px rgba(var(--shadow),.18)}
.mm-main a:hover small,.mm-main a:focus-visible small{color:var(--paper)}
.mm-main a[aria-current="page"] span{color:var(--orange-ink);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.mm-main a[aria-current="page"] small{color:var(--orange-ink)}
/* dim the others while one is hovered (desktop pointers only) */
@media (hover:hover){.mm-main:hover a:not(:hover) span{color:color-mix(in srgb,var(--ink) 45%,var(--yellow))}}
/* services list */
.mm-sv .cap{color:color-mix(in srgb,var(--ink) 60%,var(--yellow));margin-bottom:8px}
.mm-sv .sv{display:grid;grid-template-columns:minmax(0,1fr);border-top:1.5px solid var(--ink)}
.mm-sv .sv a{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,var(--yellow));text-decoration:none;color:var(--ink);font:600 17px/1.2 var(--display);letter-spacing:-.015em;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease),color .25s;transition-delay:calc(.45s + var(--i) * .05s),calc(.45s + var(--i) * .05s),0s}
.menu-open .mm-sv .sv a{opacity:1;transform:none}
.mm-sv .sv a small{font:500 11px/1 var(--mono);letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 55%,var(--yellow));transition:color .25s}
.mm-sv .sv a span{flex:1}
.mm-sv .sv a svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.mm-sv .sv a[aria-current="page"]{color:var(--orange-ink)}
.mm-sv .sv a:hover,.mm-sv .sv a:focus-visible{color:var(--paper)}
.mm-sv .sv a:hover small{color:var(--paper)}
.mm-sv .sv a:hover svg{transform:translateX(4px) rotate(-45deg)}
/* language switch (multi-language ready: EN live; BM and 中文 "soon") */
.mm-lang{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--ink) 18%,var(--yellow));opacity:0;transition:opacity .6s var(--ease) .75s}
.menu-open .mm-lang{opacity:1}
.mm-lang>.cap{color:color-mix(in srgb,var(--ink) 60%,var(--yellow))}
.lsw{display:flex;gap:4px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,var(--yellow))}
.lsw a,.lsw span{position:relative;display:grid;place-items:center;min-width:52px;height:38px;padding:0 14px;border-radius:999px;font:600 14px/1 var(--body);color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.lsw a[aria-current]{background:var(--ink);color:var(--yellow)}
.lsw a:not([aria-current]):hover{background:var(--paper)}
.lsw .soon{color:color-mix(in srgb,var(--ink) 45%,var(--yellow));cursor:default}
.lsw .soon small{position:absolute;top:-7px;right:-2px;padding:2px 5px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* contrast pass (Lucian: greys, orange and BM/中文 were hard to read on yellow): everything solid navy ink;
   current page = navy italic with a "You're here" tag (links) / a navy row (services) instead of orange */
.mm-main a small,.mm-sv .cap,.mm-sv .sv a small,.mm-lang>.cap{color:var(--ink)!important}
.mm-main a[aria-current="page"] span{color:var(--ink)}
.mm-main a[aria-current="page"]::after{content:"You're here";align-self:center;margin-left:4px;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--yellow);font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mm-main a[aria-current="page"]:hover span{color:var(--paper)}
.mm-sv .sv a[aria-current="page"]{background:var(--ink);color:var(--yellow);padding-inline:12px;border-radius:12px;border-bottom-color:transparent}
.mm-sv .sv a[aria-current="page"] small{color:var(--yellow)!important}
.mm-sv .sv a[aria-current="page"]:hover{color:var(--paper)}
.lsw{background:color-mix(in srgb,var(--ink) 14%,var(--yellow))}
.lsw .soon{color:var(--ink);opacity:.85}
/* faint wordmark */
.mm-wm{position:absolute;z-index:0;right:0;bottom:0;margin:0;height:.8em;overflow:hidden;pointer-events:none;font:800 clamp(110px,34vw,260px)/.78 var(--display);letter-spacing:-.07em;color:color-mix(in srgb,var(--ink) 3%,var(--yellow));white-space:nowrap;transform:translateY(20%);opacity:0;transition:transform 1.2s var(--ease) .3s,opacity 1s .3s}
.mm-wm b{font:inherit;line-height:0;color:color-mix(in srgb,var(--orange) 12%,var(--yellow))}
.menu-open .mm-wm{transform:none;opacity:1}
/* tablet: links left, services right */
@media (min-width:640px){
  .mm-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(28px,5vw,64px);align-content:start}
  .mm-main{grid-row:1/3}
  .mm-lang{grid-column:1/-1}
}
/* short screens (most phones are 640–740px tall): tighten so the whole menu fits without scrolling */
@media (max-width:639px) and (max-height:760px){
  .mm-in{gap:16px;padding-top:calc(86px + env(safe-area-inset-top,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .mm-main a span{font-size:min(12.5vw,6.2vh)}
  .mm-main a small{margin-top:.6em}
  .mm-sv .cap{margin-bottom:4px}
  .mm-sv .sv a{padding:7px 2px;font-size:15px}
  .mm-lang{padding-top:10px}
  .lsw a,.lsw span{height:34px;min-width:46px;padding:0 12px;font-size:13px}
}
/* tiny screens (iPhone SE 1st gen, 568px): the menu scrolls; keep it tidy */
@media (max-width:639px) and (max-height:600px){
  .mm-in{gap:12px;padding-top:calc(80px + env(safe-area-inset-top,0px))}
  .mm-main a span{font-size:min(11vw,7vh)}
  .mm-sv .sv a{padding:6px 2px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.mmenu,.mm-main a span,.mm-main a small,.mm-sv .sv a,.mm-foot,.mm-wm{transition:none!important}}
@media (max-width:960px){.nav{display:none}.burger{display:block}.hdr .bar{grid-template-columns:1fr auto;padding-left:18px}}
@media (max-width:420px){.hwa>span:not(.av){font-size:14px}.hwa svg{display:none}.hwa{padding-right:12px}}
/* language pill in the header (desktop + tablet) */
.hlang{position:relative}
.hl-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:11px;border:1px solid rgba(246,244,239,.25);background:transparent;color:var(--paper);font:700 13px/1 var(--body);cursor:pointer;transition:border-color .25s,background .25s}
.hl-btn:hover,.hlang.open .hl-btn{border-color:var(--yellow);background:color-mix(in srgb,var(--paper) 8%,var(--ink))}
.hl-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:70;display:flex;flex-direction:column;gap:2px;min-width:200px;padding:6px;border-radius:16px;background:var(--paper);box-shadow:0 24px 50px -20px rgba(var(--shadow),.55),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s}
.hlang.open .hl-menu{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--ease)}
.hl-menu a,.hl-menu .soon{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--ink);text-decoration:none;font-size:14px}
.hl-menu b{min-width:34px;font:700 14px/1 var(--display)}
.hl-menu a[aria-current]{background:var(--yellow)}
.hl-menu a:not([aria-current]):hover{background:var(--paper-2)}
.hl-menu .soon{color:color-mix(in srgb,var(--ink) 55%,var(--paper));cursor:default}
.hl-menu .soon small{margin-left:auto;padding:3px 7px;border-radius:999px;background:var(--paper-2);color:var(--ink);font:600 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* desktop + tablet: in the header bar. Phones (≤600px): only inside the ☰ menu (Lucian) */
.hlang{display:block}
@media (max-width:600px){.hlang{display:none}}
/* very small phones (iPhone SE, 320px): keep logo, WhatsApp and the menu button all inside the bar */
@media (max-width:374px){
  .hdr .bar{gap:8px;padding:0 6px 0 14px}
  .logo{font-size:20px}
  .hdr .right{gap:6px}
  .hwa{height:40px;gap:7px;padding:0 10px 0 3px}
  .hwa .av{width:32px;height:32px}
  .hwa>span:not(.av){font-size:13px}
}

/* page transition curtain (Oct 2026 v2): yellow wave + emerald curtain with a curved edge, destination name in big letters */
.curtain{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}
.curtain .cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.curtain .cy{fill:var(--yellow)}
.curtain .cg{fill:var(--emerald)}
.curtain .cw{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);display:flex;flex-direction:column;gap:10px}
.curtain .cm,.curtain .cl{display:block;overflow:hidden;line-height:1}
.curtain .cm span{display:inline-block;font:500 clamp(13px,1.1vw,16px)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 80%,var(--emerald))}
.curtain .cm b{color:var(--yellow)}
.curtain .cl span{display:inline-block;padding-bottom:.06em;font:800 clamp(56px,13vw,200px)/.9 var(--display);letter-spacing:-.055em;color:var(--paper)}
/* arriving: covered before the first paint, until site.js takes over */
.lx-in .curtain{visibility:visible;background:var(--emerald)}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:90;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);pointer-events:none;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--body);color:var(--ink);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;opacity:0}
.cursor.on{opacity:1}
.cursor.big{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--yellow)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* sections */
section{position:relative}
.sec{padding-block:clamp(64px,7.5vw,112px)}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(44px,6.4vw,104px);max-width:13ch}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--orange-ink)}
.eyebrow::before{content:"";width:28px;height:1.5px;background:currentColor}

/* split text */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block;will-change:transform}
.word{display:inline-block}

/* image reveal */
.rv{overflow:hidden;position:relative;border-radius:var(--r,28px);background:var(--paper-2)}
.rv img,.rv video{width:100%;height:100%;object-fit:cover;will-change:transform}

/* HERO (home) */
.hero{height:200vh;height:200svh}
.hero .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero .film{position:absolute;right:-6vw;top:0;width:min(116vw,1700px);height:100%;object-fit:cover;object-position:60% 40%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
.hero .me{position:absolute;right:clamp(10px,14vw,240px);bottom:0;height:min(92vh,1000px);width:auto;z-index:2;transform-origin:50% 100%;filter:drop-shadow(0 40px 60px rgba(var(--shadow),.18))}
.hero .copy{position:absolute;left:var(--gut);bottom:clamp(36px,8vh,96px);z-index:3;width:min(780px,calc(100% - 2*var(--gut)))}
.hero .hi{font:400 clamp(30px,3.2vw,48px)/1 var(--serif);font-style:italic}
.hero h1{font-size:clamp(52px,7.6vw,128px);margin-top:12px}
.hero .lead{margin-top:24px}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .meta{position:absolute;left:var(--gut);right:var(--gut);top:calc(96px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;z-index:3}
.hero .status{position:absolute;z-index:4;right:clamp(24px,30vw,520px);top:62vh;background:rgba(246,244,239,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;box-shadow:0 20px 40px -24px rgba(13,27,42,.4)}
.hero .status i{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(15,107,79,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(15,107,79,0)}100%{box-shadow:0 0 0 0 rgba(15,107,79,0)}}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--paper) 0%,rgba(246,244,239,.85) 30%,rgba(246,244,239,0) 58%)}
@media (max-width:760px){
  .hero .film{right:auto;left:-40vw;width:180vw;height:62%;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 30%);mask-image:linear-gradient(0deg,transparent 0%,#000 30%)}
  .hero .me{height:52vh;right:50%;transform:translateX(50%);bottom:auto;top:88px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .hero .scrim{background:linear-gradient(0deg,var(--paper) 0%,rgba(246,244,239,.92) 40%,rgba(246,244,239,0) 62%)}
  .hero .status,.hero .meta{display:none}
  .hero .copy{bottom:24px}
  .hero h1{font-size:46px}
}

/* statement */
.statement p[data-light]{font:600 clamp(32px,4.6vw,72px)/1.08 var(--display);letter-spacing:-.04em;max-width:22ch;text-wrap:balance}
.statement .word{color:var(--ink);opacity:var(--o,1)}
.pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:72px}
.pain{border-top:1.5px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.pain h3{font:600 22px/1.15 var(--display);letter-spacing:-.025em}
.pain p{font-size:15.5px;color:var(--ink-2)}
.pain .x{font:500 12px/1 var(--mono);color:var(--orange-ink)}
@media (max-width:900px){.pains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pains{grid-template-columns:1fr}}

/* growth world */
.grow{height:320vh}
.grow .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.grow .frame{position:absolute;inset:0;clip-path:inset(18% 22% 18% 22% round 32px);will-change:clip-path}
.grow .frame video{width:100%;height:100%;object-fit:cover}
.grow .lines{position:absolute;left:var(--gut);bottom:clamp(40px,10vh,110px);z-index:2;width:min(640px,calc(100% - 2*var(--gut)))}
.grow .lines p{position:absolute;left:0;bottom:0;font:700 clamp(30px,4vw,62px)/1.02 var(--display);letter-spacing:-.045em;text-wrap:balance;opacity:0}
.grow .lines p:first-of-type{opacity:1}
.grow .tag{position:absolute;right:var(--gut);top:calc(96px + env(safe-area-inset-top,0px));z-index:2}
.grow .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(246,244,239,.92) 0%,rgba(246,244,239,0) 45%);z-index:1;pointer-events:none}

/* services stack */
.stack{display:flex;flex-direction:column;gap:28px;margin-top:64px}
.svc{position:sticky;top:calc(96px + var(--i,0)*14px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:stretch;background:var(--paper);border:1px solid var(--line);border-radius:32px;padding:clamp(20px,2.6vw,36px);min-height:min(78vh,640px);transform-origin:50% 0;box-shadow:0 -30px 60px -50px rgba(13,27,42,.35)}
.svc:nth-child(2){background:color-mix(in srgb,var(--ink) 2%,var(--paper))}.svc:nth-child(3){background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.svc:nth-child(4){background:color-mix(in srgb,var(--ink) 6%,var(--paper))}.svc:nth-child(5){background:color-mix(in srgb,var(--ink) 8%,var(--paper))}.svc:nth-child(6){background:color-mix(in srgb,var(--ink) 10%,var(--paper))}
.svc .txt{display:flex;flex-direction:column;gap:18px;padding-block:8px;min-width:0}
.svc .pain-q{font:400 clamp(22px,2vw,30px)/1.15 var(--serif);font-style:italic;color:var(--orange-ink)}
.svc h3{font:700 clamp(34px,3.8vw,60px)/.96 var(--display);letter-spacing:-.045em}
.svc p{color:var(--ink-2);max-width:48ch}
.svc ul{display:flex;flex-direction:column;gap:8px;font-size:15.5px}
.svc li{display:flex;gap:10px}
.svc li::before{content:"";flex:none;width:16px;height:16px;margin-top:4px;border-radius:50%;background:var(--emerald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-5' fill='none' stroke='%23F6F4EF' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat}
.svc .foot{margin-top:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.svc .price{font:600 14px/1 var(--mono);background:var(--yellow);padding:9px 12px;border-radius:999px}
.svc .rv{--r:22px;min-height:320px}
@media (max-width:860px){.svc{grid-template-columns:1fr;position:relative;top:auto;min-height:0}.svc .rv{min-height:0;aspect-ratio:16/10}}

/* proof */
.proof{background:var(--ink);color:var(--paper);border-radius:40px;margin-inline:clamp(8px,1.4vw,20px)}
.proof .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px}
.proof .nums div{border-top:1px solid rgba(246,244,239,.25);padding-top:20px}
.proof .nums strong{display:block;font:700 clamp(56px,7vw,112px)/.9 var(--display);letter-spacing:-.05em;color:var(--yellow);font-variant-numeric:tabular-nums}
.proof .nums span{display:block;margin-top:10px;color:var(--on-ink);font-size:15px;max-width:22ch}
.proof h2{font-size:clamp(40px,5.4vw,88px);max-width:16ch}
.proof .note{color:color-mix(in srgb,var(--paper) 62%,var(--ink));font-size:13px;margin-top:20px}
.marquee{overflow:hidden;margin-top:72px;border-block:1px solid rgba(246,244,239,.18);padding-block:22px}
.marquee .track{display:flex;gap:56px;width:max-content;align-items:center;will-change:transform}
.marquee .track img{height:42px;width:auto;border-radius:8px;background:var(--paper);padding:6px 10px}
.marquee .track b{font:600 22px/1 var(--display);letter-spacing:-.03em;color:var(--paper);white-space:nowrap}
@media (max-width:760px){.proof .nums{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* work strip */
.hwork{overflow:hidden}
.hwork .pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:40px}
.hwork .strip{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gut);width:max-content;will-change:transform}
.proj{width:clamp(280px,34vw,520px);flex:none;text-decoration:none;display:flex;flex-direction:column;gap:14px}
/* project mockups are transparent PNG-style webps: sit them on rotating palette tints, show the whole image */
.proj{--tint:color-mix(in srgb,var(--yellow) 30%,var(--paper))}
.proj:nth-child(4n+2){--tint:color-mix(in srgb,var(--emerald) 20%,var(--paper))}
.proj:nth-child(4n+3){--tint:color-mix(in srgb,var(--orange) 22%,var(--paper))}
.proj:nth-child(4n+4){--tint:color-mix(in srgb,var(--ink) 14%,var(--paper))}
.proj .rv{aspect-ratio:4/3;--r:22px;background:var(--tint)}
.proj .rv img{object-fit:contain;padding:4% 6%;transition:transform 1.2s var(--ease)}
.proj[data-zoom]{cursor:zoom-in}
.proj:hover .rv img{transform:scale(1.06)}
.proj .t{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.proj .t strong{font:600 clamp(22px,2vw,30px)/1 var(--display);letter-spacing:-.03em}
.proj.end{justify-content:center;align-items:flex-start;background:var(--yellow);border-radius:22px;padding:36px;aspect-ratio:auto}
.proj.end p{font:700 clamp(32px,3vw,48px)/1 var(--display);letter-spacing:-.04em}
@media (max-width:760px){.hwork .pin{height:auto;padding-block:96px}.hwork .strip{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.proj{width:78vw;scroll-snap-align:start}}

/* split feature */
.feature{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.feature .rv{aspect-ratio:4/5}
.feature h2{font-size:clamp(44px,5.6vw,92px)}
.feature .body{display:flex;flex-direction:column;gap:22px;min-width:0}
.feature .pts{display:grid;gap:14px;margin-top:8px}
.feature .pts div{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:16.5px;color:var(--ink-2)}
.feature .pts b{color:var(--ink)}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature .rv{aspect-ratio:4/3}}

/* AI band */
.aiband{background:var(--emerald);color:var(--paper);border-radius:40px;margin-inline:clamp(8px,1.4vw,20px);overflow:hidden}
.aiband .lead{color:var(--on-emerald)}
.aiband .rv{background:var(--emerald-2)}
.aiband .chip{background:transparent;border-color:rgba(246,244,239,.35);color:var(--paper)}

/* quote */
.quote{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.quote blockquote{font:400 clamp(28px,3.2vw,50px)/1.14 var(--serif)}
.quote .who{margin-top:28px;display:flex;flex-direction:column;gap:4px}
@media (max-width:860px){.quote{grid-template-columns:1fr}}

/* pricing */
.price-band{background:var(--yellow);border-radius:40px;margin-inline:clamp(8px,1.4vw,20px)}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.pcard{background:var(--paper);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:320px;transition:transform .5s var(--ease)}
.pcard:hover{transform:translateY(-6px) rotate(-.4deg)}
.pcard strong{font:700 clamp(40px,4vw,64px)/.9 var(--display);letter-spacing:-.05em}
.pcard strong small{font-size:.4em;letter-spacing:0}
.pcard p{color:var(--ink-2);font-size:15.5px}
.pcard .btn{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.price-grid{grid-template-columns:1fr}}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px);margin-top:56px}
.post{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.post .rv{aspect-ratio:4/3;--r:22px}
.post .rv img{transition:transform 1.2s var(--ease)}
.post:hover .rv img{transform:scale(1.06)}
.post h3{font:600 clamp(21px,1.8vw,26px)/1.12 var(--display);letter-spacing:-.03em;text-wrap:balance}
.post .m{display:flex;gap:12px;color:var(--muted)}
@media (max-width:860px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}

/* reach */
.reach{height:280vh}
.reach .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.reach video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reach .fade{position:absolute;inset:0;background:radial-gradient(ellipse 46% 42% at 20% 22%,rgba(246,244,239,.94) 0%,rgba(246,244,239,.7) 50%,rgba(246,244,239,0) 80%),linear-gradient(180deg,var(--paper) 0%,rgba(246,244,239,0) 32%,rgba(246,244,239,0) 64%,var(--paper) 100%)}
.reach .top{position:absolute;left:var(--gut);right:var(--gut);top:calc(100px + env(safe-area-inset-top,0px));z-index:2}
.reach h2{font-size:clamp(42px,6vw,100px);max-width:15ch}
.reach .bottom{position:absolute;right:var(--gut);bottom:clamp(28px,7vh,72px);z-index:2;width:min(520px,calc(100% - 2*var(--gut)));display:flex;flex-direction:column;gap:20px}
.reach .bottom p{font-size:18px;color:var(--ink-2)}
.reach .row{display:flex;gap:12px;flex-wrap:wrap}
.reach .contact{font:500 14px/1.4 var(--mono);letter-spacing:.04em}
.reach .bar{position:absolute;left:var(--gut);bottom:clamp(28px,7vh,72px);z-index:2;display:flex;align-items:center;gap:12px}
.reach .bar span{display:block;width:160px;height:1.5px;background:var(--line)}
.reach .bar span i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){.reach .bar{display:none}.reach video{object-position:40% 50%}.reach .bottom{background:rgba(246,244,239,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:16px;border-radius:20px;right:12px;width:calc(100% - 24px);bottom:16px}}

/* footer */
.ftr{padding-top:clamp(64px,7vw,104px);overflow:hidden;background:var(--ink);color:var(--paper);border-radius:28px 28px 0 0;margin-inline:var(--edge)}
.ftr h4{color:var(--yellow)!important}
.ftr li a:hover{color:var(--yellow)!important}
.ftr .btn{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.ftr .btn:hover{background:var(--orange);border-color:var(--orange);color:var(--paper)}
.ftr .btn.ol{background:transparent;color:var(--paper);border-color:rgba(246,244,239,.35)}
.ftr .big .s{color:var(--yellow)!important}
.ftr .muted{color:var(--on-ink)}
.ftr .cols{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px}
.ftr .big{font-size:clamp(36px,4.2vw,64px);max-width:13ch}
.ftr h4{margin-bottom:14px;color:var(--muted)}
.ftr li{margin-bottom:8px}
.ftr li a{text-decoration:none}
.ftr li a:hover{color:var(--orange-ink)}
.ftr .wm{font:800 clamp(80px,19vw,300px)/.74 var(--display);letter-spacing:-.065em;white-space:nowrap;margin:72px 0 .06em -.04em;display:flex}
.ftr .wm span{display:inline-block}
.ftr .wm .dot{color:var(--orange)}
.ftr .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 26px;position:relative;z-index:1;background:var(--ink);border-top:1px solid rgba(246,244,239,.15);color:var(--on-ink);font-size:13px}
@media (max-width:860px){.ftr .cols{grid-template-columns:1fr 1fr}.ftr .cols>div:first-child{grid-column:1/-1}}

/* inner page heroes */
.phero{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(56px,7vw,96px)}
.phero h1{font-size:clamp(54px,8.4vw,148px)}
.phero .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end}
.phero .grid>*{min-width:0}
@media (max-width:860px){.phero .grid{grid-template-columns:1fr}}
.wide-img{margin-inline:clamp(8px,1.4vw,20px)}
.wide-img .rv{aspect-ratio:21/9;--r:32px}
@media (max-width:760px){.wide-img .rv{aspect-ratio:4/3}}

/* problems → fixes */
.pf{display:flex;flex-direction:column;margin-top:56px;border-top:1.5px solid var(--ink)}
.pf>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;padding-block:28px;border-bottom:1px solid var(--line);align-items:baseline}
.pf .p{font:600 clamp(22px,2.2vw,34px)/1.1 var(--display);letter-spacing:-.03em;position:relative;justify-self:start}
.pf .p::after{content:"";position:absolute;left:0;right:0;top:55%;height:3px;background:var(--orange);transform:scaleX(var(--x,0));transform-origin:left}
.pf .f{font-size:17.5px;color:var(--ink-2)}
.pf .f b{color:var(--emerald)}
@media (max-width:760px){.pf>div{grid-template-columns:1fr;gap:10px}}

/* checklist */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px}
.checks div{background:var(--paper-2);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:10px}
.checks h3{font:600 22px/1.15 var(--display);letter-spacing:-.025em}
.checks p{font-size:15.5px;color:var(--ink-2)}
@media (max-width:860px){.checks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.checks{grid-template-columns:1fr}}

/* steps (real sequence) */
.steps{position:relative;margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps .rail{position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line)}
.steps .rail i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}
.step{position:relative;display:flex;flex-direction:column;gap:12px}
.step .n{width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font:600 15px/1 var(--mono)}
.step h3{font:600 24px/1.1 var(--display);letter-spacing:-.03em}
.step p{font-size:15.5px;color:var(--ink-2)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps .rail{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:48px;border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding-block:24px;font:600 clamp(20px,1.8vw,26px)/1.2 var(--display);letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);position:relative;transition:transform .4s var(--ease),background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:1.5px;background:var(--ink)}
.faq summary i::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.faq details[open] summary i{background:var(--yellow);border-color:var(--yellow)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding-bottom:24px;color:var(--ink-2);max-width:64ch}

/* work page */
/* filters: always ONE row (swipe / scroll sideways on every screen). Sticky just under the floating header;
   once stuck (.stuck, set in site.js) the row becomes a floating glass pill that matches the header. */
.filters{position:sticky;top:var(--hdr,calc(86px + env(safe-area-inset-top,0px)));z-index:20;padding-block:10px;pointer-events:none}
.filters .frow{pointer-events:auto;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px;border-radius:999px;border:1px solid transparent;transition:background .35s,box-shadow .35s,border-color .35s;-webkit-mask:linear-gradient(90deg,black calc(100% - 40px),transparent);mask:linear-gradient(90deg,black calc(100% - 40px),transparent)}
.filters .frow::-webkit-scrollbar{display:none}
.filters .frow.end{-webkit-mask:none;mask:none}
.filters.stuck .frow{-webkit-mask:none;mask:none;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line);box-shadow:0 16px 36px -22px rgba(var(--shadow),.55)}
.filters button{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:14px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.filters button:hover{border-color:var(--ink)}
.filters.stuck button{padding:8px 14px;font-size:13.5px}
.wk-grid{padding-top:0}
.wk-grid .filters+.wrap{padding-top:clamp(24px,3vw,40px)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 24px;margin-top:56px;align-items:start}
.wgrid .proj{width:auto}
.wgrid .proj:nth-child(6n+1){grid-column:span 7}
.wgrid .proj:nth-child(6n+2){grid-column:span 5;margin-top:120px}
.wgrid .proj:nth-child(6n+3){grid-column:span 4}
.wgrid .proj:nth-child(6n+4){grid-column:span 4;margin-top:80px}
.wgrid .proj:nth-child(6n+5){grid-column:span 4}
.wgrid .proj:nth-child(6n+6){grid-column:2/span 10}
.wgrid .proj.gone{display:none}
@media (max-width:860px){.wgrid{grid-template-columns:1fr;gap:40px}.wgrid .proj{grid-column:auto!important;margin-top:0!important}}
.dir{margin-top:48px;border-top:1.5px solid var(--ink)}
.dir a{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) 40px;gap:18px;align-items:center;padding-block:20px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .4s var(--ease),background .3s}
.dir a:hover{padding-inline:14px;background:var(--paper-2)}
.dir strong{font:600 clamp(20px,2.2vw,32px)/1 var(--display);letter-spacing:-.03em}
.dir .arr{justify-self:end;transition:transform .4s var(--ease)}
.dir a:hover .arr{transform:translateX(6px) rotate(-45deg)}
.peek{position:fixed;left:0;top:0;z-index:70;width:300px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .3s,transform .4s var(--ease);box-shadow:0 30px 60px -30px rgba(13,27,42,.5)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (max-width:760px){.dir a{grid-template-columns:40px 1fr 24px}.dir a .ind{display:none}.peek{display:none}}

/* blog page */
.featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;text-decoration:none}
.featured .rv{aspect-ratio:16/11}
.featured h2{font-size:clamp(36px,4.2vw,68px)}
@media (max-width:860px){.featured{grid-template-columns:1fr}}

/* about timeline */
.tl{height:340vh}
.tl .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:48px}
.tl .track{display:flex;gap:24px;padding-inline:var(--gut);width:max-content;will-change:transform}
.tl .card{width:clamp(280px,32vw,460px);flex:none;background:var(--paper-2);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:14px;min-height:340px}
.tl .card .yr{font:700 clamp(56px,6vw,96px)/.85 var(--display);letter-spacing:-.06em;color:var(--orange)}
.tl .card h3{font:600 26px/1.1 var(--display);letter-spacing:-.03em}
.tl .card p{color:var(--ink-2)}
.tl .card.y{background:var(--yellow)}.tl .card.y .yr{color:var(--ink)}
.tl .card.g{background:var(--emerald);color:var(--paper)}.tl .card.g p{color:var(--on-emerald)}.tl .card.g .yr{color:var(--yellow)}
@media (max-width:760px){.tl{height:auto}.tl .stage{position:relative;height:auto;padding-block:88px}.tl .track{width:auto;flex-direction:column;padding-inline:var(--gut)}.tl .card{width:auto;min-height:0}}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.values div{border-top:1.5px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.values h3{font:600 26px/1.1 var(--display);letter-spacing:-.03em}
.values p{color:var(--ink-2)}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* reduced motion / no-js */
.no-motion .hero,.no-motion .grow,.no-motion .reach,.no-motion .tl{height:auto}
.no-motion .hero .stage,.no-motion .grow .stage,.no-motion .reach .stage{position:relative;height:auto;min-height:100svh}
.no-motion .grow .frame{clip-path:none;position:relative;aspect-ratio:16/9}
.no-motion .grow .lines p{position:relative;opacity:1;margin-top:12px}
.no-motion .grow .lines{position:relative;bottom:auto;padding-block:24px}
.no-motion .grow .stage{display:block}
.no-motion .reach .top,.no-motion .reach .bottom{opacity:1}
.tl .wrap{width:100%}

/* ===== v2 clean home ===== */
.shop{height:480vh}
.shop .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--charcoal)}
.shop .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 45%}
.shop .veil{position:absolute;inset:0;background:radial-gradient(ellipse 50% 46% at 50% 36%,rgba(246,244,239,.96),rgba(246,244,239,.78) 50%,rgba(246,244,239,0) 82%);opacity:0}
.shop .shade{position:absolute;inset:0;background:linear-gradient(20deg,rgba(var(--shadow),.72) 0%,rgba(var(--shadow),.38) 40%,rgba(var(--shadow),0) 70%);pointer-events:none}
.shop .story{position:absolute;left:var(--gut);bottom:clamp(64px,11vh,120px);color:var(--paper);width:min(720px,calc(100% - 2*var(--gut)));text-shadow:0 2px 24px rgba(var(--shadow),.45);display:flex;flex-direction:column;gap:18px}
.shop .story .d{font-size:clamp(36px,4.8vw,76px);font-weight:600}
.shop .story .s{color:var(--yellow)}
.shop .story .txt{font-size:clamp(17px,1.4vw,20px);max-width:46ch;line-height:1.5}
.shop .fix{display:flex;flex-wrap:wrap;gap:8px 10px}
.shop .fix li{font:500 15px/1 var(--body);padding:10px 16px;border-radius:999px;border:1px solid rgba(246,244,239,.5);background:rgba(var(--shadow),.25);text-shadow:none}
.motion .shop .mid{opacity:0}
.shop .pre{font:400 clamp(26px,2.8vw,42px)/1 var(--serif);font-style:italic;color:var(--orange-ink)}
.shop .after{position:absolute;left:50%;top:clamp(110px,17vh,170px);transform:translateX(-50%);width:min(980px,calc(100% - 2*var(--gut)));text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.shop .bloom{font-size:clamp(52px,8vw,136px);line-height:.92}
.shop .sub{font-size:clamp(17px,1.5vw,21px);color:var(--ink-2);max-width:46ch}
.shop .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.shop .cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--paper)}
.shop .cue span{width:1.5px;height:44px;background:currentColor;transform-origin:top;animation:cue 1.8s infinite var(--ease)}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.motion .shop .after{opacity:0}
.no-motion .shop{height:auto}.no-motion .shop .stage{position:relative;height:auto;min-height:100svh;background:var(--paper)}
/* reduced motion: the whole story reads top to bottom, no film */
.no-motion .shop .stage{display:flex;flex-direction:column;gap:64px;padding:calc(140px + env(safe-area-inset-top,0px)) var(--gut) 96px}
.no-motion .shop .film,.no-motion .shop .shade,.no-motion .shop .veil,.no-motion .shop .cue{display:none}
.no-motion .shop .story,.no-motion .shop .after{position:relative;left:auto;bottom:auto;top:auto;transform:none;color:var(--ink);text-shadow:none;width:auto;max-width:900px}
.no-motion .shop .story .s{color:var(--orange-ink)}.no-motion .shop .fix li{background:none;border-color:var(--line)}
.no-motion .shop .after{text-align:left;align-items:flex-start}.no-motion .shop .row{justify-content:flex-start}
@media (max-width:760px){.shop .film{object-position:42% 50%}.shop .after{top:96px}.shop .bloom{font-size:50px}.shop .story{bottom:116px}.shop .story .txt{font-size:16px}.shop .veil{background:radial-gradient(ellipse 90% 46% at 50% 30%,rgba(246,244,239,.94),rgba(246,244,239,.6) 60%,rgba(246,244,239,0) 85%)}}

.intro p[data-light]{font:600 clamp(30px,4.2vw,64px)/1.1 var(--display);letter-spacing:-.04em;max-width:24ch;text-wrap:balance}
.slist{margin-top:48px;border-top:1.5px solid var(--ink)}
.srow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,2fr);gap:24px;align-items:center;padding-block:30px;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:padding .5s var(--ease)}
.srow::before{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1;border-radius:4px}
.srow:hover::before{transform:scaleY(1)}
.srow:hover{padding-inline:20px}
.slist{position:relative;z-index:0}
.srow .sn{font:700 clamp(28px,3.4vw,54px)/.95 var(--display);letter-spacing:-.045em}
.srow .sb{font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.srow .sp{justify-self:end;display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--mono);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
.srow .sp svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.srow:hover .sp svg{transform:translateX(4px)}
.srow .st{display:none}
@media (max-width:860px){.srow{grid-template-columns:96px 1fr;gap:6px 16px;padding-block:20px}.srow .st{display:block;grid-row:1/4;grid-column:1;width:96px;height:72px;object-fit:cover;border-radius:12px}.srow .sn,.srow .sb,.srow .sp{grid-column:2}.srow .sn{font-size:26px}.srow .sp{justify-self:start}.srow:hover{padding-inline:0}}
.me-wrap{position:relative;aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:0 0 28px 28px}
.me-wrap .arch{position:absolute;left:8%;right:8%;bottom:0;top:10%;border-radius:999px 999px 0 0;background:var(--yellow)}
.me-wrap img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:none;filter:drop-shadow(0 30px 40px rgba(var(--shadow),.18))}
.nums-sec .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.nums-sec .nums div{border-top:1.5px solid var(--ink);padding-top:18px}
.nums-sec strong{display:block;font:700 clamp(52px,6.4vw,104px)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.nums-sec span{display:block;margin-top:8px;color:var(--muted)}
@media (max-width:760px){.nums-sec .nums{grid-template-columns:1fr 1fr}}

/* ===== v3 home (Lucian's Oct 2026 copy) ===== */
.say{font:600 clamp(30px,4.2vw,64px)/1.1 var(--display);letter-spacing:-.04em;max-width:24ch;text-wrap:balance;margin-top:clamp(48px,6vw,88px)}
.ask{font:400 clamp(36px,4.4vw,72px)/1.04 var(--serif);font-style:italic;color:var(--orange-ink);margin-top:10px;text-wrap:balance}

/* 02 the real question */
.wonder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);margin-top:clamp(64px,8vw,120px);align-items:start}
.maybe{border-top:1.5px solid var(--ink)}
.maybe li{font:600 clamp(20px,1.9vw,28px)/1.2 var(--display);letter-spacing:-.025em;padding-block:20px;border-bottom:1px solid var(--line)}
.maybe li:last-child{color:var(--emerald)}
.endrow{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.endrow .d{font-size:clamp(34px,4vw,64px);max-width:16ch}
@media (max-width:860px){.wonder{grid-template-columns:1fr}}

/* 03 1,000+ websites */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin-top:clamp(48px,6vw,88px);align-items:end}
.ladder>div{display:flex;flex-direction:column;gap:12px}
.ladder i{display:block;height:calc(var(--h)*clamp(140px,22vw,300px));border-radius:18px 18px 4px 4px;background:var(--paper-3)}
.ladder .top i{background:var(--orange)}
.ladder strong{font:700 clamp(52px,7vw,120px)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ladder .top strong{color:var(--orange-ink)}
.ladder p{color:var(--ink-2);max-width:30ch}
.bridge{font:400 clamp(26px,2.8vw,42px)/1.15 var(--serif);font-style:italic;margin-top:clamp(56px,7vw,96px);max-width:30ch}
@media (max-width:620px){.ladder{grid-template-columns:1fr;align-items:stretch}.ladder i{display:none}}

/* 03b business owner (the one photo) */
.me-sec .body{gap:20px}
.know{display:flex;flex-direction:column;gap:6px;font-size:clamp(18px,1.5vw,21px);color:var(--ink-2)}
.strike{position:relative;white-space:nowrap;color:var(--muted)}
.strike::after{content:"";position:absolute;left:0;right:0;top:55%;height:2.5px;background:var(--orange)}
.thinks{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.thinks li{font:400 clamp(26px,2.6vw,40px)/1.12 var(--serif);font-style:italic;color:var(--emerald)}
.diff{font-size:clamp(34px,3.6vw,56px)}

/* 04 why I do this */
.why h2{font-size:clamp(38px,4.2vw,68px)}
.why .rv img{object-position:50% 40%}
.hear{display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--yellow);padding-left:20px}
.hear li{font:400 clamp(24px,2.4vw,36px)/1.15 var(--serif);font-style:italic;color:var(--paper)}

/* 05 services intro */
#services .sec-h .lead{max-width:40ch}

/* 06 work */
.hwork .sec-h h2{font-size:clamp(40px,5vw,84px);max-width:12ch}
.wk-say{display:flex;flex-direction:column;gap:14px;max-width:44ch;align-items:flex-start}
.wk-say p{color:var(--ink-2)}
.wk-say .diffs{font:400 clamp(20px,1.7vw,26px)/1.25 var(--serif);font-style:italic;color:var(--ink)}
.hwork .proj{width:clamp(260px,28vw,440px)}
@media (max-width:760px){.hwork .proj{width:78vw}}

/* 07 outcome */
.oc-lead{margin-top:28px}
.oc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);margin-top:clamp(48px,6vw,88px);align-items:start}
.grows{border-top:1.5px solid var(--ink)}
.grows li{font:700 var(--fs)/1 var(--display);letter-spacing:-.045em;padding-block:.32em;border-bottom:1px solid var(--line)}
.grows li:nth-child(1){--fs:clamp(26px,2.4vw,36px)}
.grows li:nth-child(2){--fs:clamp(32px,3.2vw,48px)}
.grows li:nth-child(3){--fs:clamp(40px,4.2vw,64px)}
.grows li:nth-child(4){--fs:clamp(48px,5.4vw,84px);color:var(--emerald)}
.oc-body{display:flex;flex-direction:column;gap:22px}
.succeed{font-size:clamp(36px,4vw,64px)}
@media (max-width:860px){.oc-grid{grid-template-columns:1fr}}

/* reach + footer additions */
.reach .bottom b{color:var(--ink)}
.reach .bottom{gap:14px;padding:24px;border-radius:24px;background:rgba(246,244,239,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 30px 60px -40px rgba(var(--shadow),.45)}
.reach h2{max-width:13ch}
/* the panel stays invisible until its text shows (site.js adds .on) */
.motion .reach .bottom{background:rgba(246,244,239,0);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.motion .reach .bottom.on{background:rgba(246,244,239,.92);box-shadow:0 30px 60px -40px rgba(var(--shadow),.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* Phones: heading on top, the handshake centred in the middle band, a compact panel at the bottom */
@media (max-width:760px){
  .reach .top{top:calc(92px + env(safe-area-inset-top,0px))}
  .reach h2{font-size:clamp(34px,10vw,42px)}
  .reach video{top:30%;bottom:auto;height:40%;object-position:50% 48%;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
  .reach .fade{display:none}
  .reach .bottom{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:16px;gap:10px;border-radius:20px}
  .reach .bottom p{font-size:15px;line-height:1.45}
  .reach .bottom p:nth-of-type(2),.reach .note,.reach .contact{display:none}
  .reach .row{flex-direction:column;gap:8px}
  .reach .row .btn{width:100%;min-height:46px;font-size:15px}
}
.reach .note{font-size:15px!important;color:var(--muted)!important}
.ftr .close-2{margin-top:14px;font-size:15px;line-height:1.6;color:var(--on-ink);max-width:46ch}
/* SEO H1: a small label on the first hero screen; "I help businesses bloom." stays the big statement */
.shop .h1-tag{color:var(--yellow);font-weight:500;letter-spacing:.12em;max-width:40ch;text-shadow:0 1px 12px rgba(var(--shadow),.6)}
.no-motion .shop .h1-tag{color:var(--orange-ink);text-shadow:none}
.ftr .close{margin-top:20px;font:400 clamp(20px,1.7vw,26px)/1.3 var(--serif);font-style:italic;color:var(--on-ink);max-width:30ch}
/* footer layout v2 (Oct 2026): same content, cleaner structure */
.ftr .f-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap;padding-bottom:clamp(36px,4.5vw,64px);border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,var(--ink))}
.ftr .f-top .big{font-size:clamp(44px,6vw,96px);max-width:none}
.ftr .f-cta{display:flex;gap:12px;flex-wrap:wrap}
.ftr .f-mid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr));gap:clamp(28px,4vw,56px);padding-top:clamp(36px,4.5vw,56px)}
.ftr .f-mid .close-2{margin-top:0;font-size:16px;max-width:38ch}
.ftr .f-col h4{margin-bottom:16px;font-size:12px;letter-spacing:.14em}
.ftr .f-col li{margin-bottom:10px;font-size:15.5px;line-height:1.45;color:var(--on-ink)}
.ftr .f-col li a{color:var(--paper);transition:color .25s,padding .25s}
.ftr .f-col li a:hover{color:var(--yellow)}
.ftr .f-find li:first-child a,.ftr .f-find li:nth-child(2) a{font-weight:600}
.ftr .wm{margin-top:clamp(48px,6vw,88px)}
@media (max-width:1024px){.ftr .f-mid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr .f-mid .close-2{grid-column:1/-1;max-width:60ch}}
@media (max-width:640px){
  .ftr{border-radius:24px 24px 0 0}
  .ftr .f-top{flex-direction:column;align-items:stretch}
  .ftr .f-top .big{font-size:clamp(44px,13vw,64px)}
  .ftr .f-cta{flex-direction:column}
  .ftr .f-cta .btn{width:100%}
  .ftr .f-mid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .ftr .f-find{grid-column:1/-1;padding:20px;border-radius:18px;background:color-mix(in srgb,var(--paper) 6%,var(--ink))}
  .ftr .legal{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===== v4: colour bands, tighter rhythm ===== */
.band{border-radius:32px;margin-inline:var(--edge)}
.band.ink{background:var(--ink);color:var(--paper)}
.band.green{background:var(--emerald);color:var(--paper)}
.band .lead,.band p{color:inherit}
.band.ink .s{color:var(--yellow)}
.band.green .s{color:var(--yellow)}
.band .muted{color:var(--on-ink)}
.band.green .muted,.band.green .lead{color:var(--on-emerald)}

/* tighter spacing inside home sections */
.say{margin-top:clamp(36px,4.5vw,64px)}
.wonder{margin-top:clamp(40px,5vw,72px)}
.endrow{margin-top:clamp(40px,5vw,64px)}
.ladder{margin-top:clamp(36px,4.5vw,64px)}
.oc-grid{margin-top:clamp(36px,4.5vw,64px)}
.slist{margin-top:36px}

/* 02: orange accent rule on the question */
.realq .ask{padding-left:18px;border-left:3px solid var(--orange)}
.maybe li{display:flex;gap:14px;align-items:baseline}
.maybe li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--yellow);transform:translateY(-3px)}
.maybe li:last-child::before{background:var(--emerald)}

/* 03 on navy: palette ladder */
.k-sec .ladder i{background:var(--emerald)}
.k-sec .ladder div:nth-child(2) i{background:var(--yellow)}
.k-sec .ladder .top i{background:var(--orange)}
.k-sec .ladder strong{color:var(--paper)}
.k-sec .ladder .top strong{color:var(--yellow)}
.k-sec .ladder p{color:var(--on-ink)}
.k-sec .say{max-width:26ch}

/* 05 services: numbered rows */
.srow .sn small{display:block;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--orange-ink);margin-bottom:10px}
.srow{padding-block:24px}

/* 06 work: tighter pin */
.hwork .pin{gap:28px}
@media (max-width:760px){.hwork .pin{padding-block:56px}}

/* 07 outcome on emerald */
.outcome .grows{border-color:rgba(246,244,239,.5)}
.outcome .grows li{border-color:rgba(246,244,239,.18)}
.outcome .grows li:nth-child(4){color:var(--yellow)}
.outcome .ask{color:var(--yellow)}
.outcome .succeed{color:var(--paper)}
.outcome .btn.y:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* header sits on the hero: keep hero text clear of the bar */
.shop .after{top:clamp(120px,18vh,180px)}

/* LIGHTBOX */
.lbox{width:min(1200px,calc(100vw - 32px));height:min(92vh,980px);max-width:none;max-height:none;padding:0;border:0;border-radius:24px;background:var(--paper);color:var(--ink);overflow:hidden;display:none;flex-direction:column}
.lbox[open]{display:flex;animation:lbin .45s var(--ease)}
.lbox::backdrop{background:rgba(13,27,42,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@keyframes lbin{from{opacity:0;transform:translateY(24px) scale(.97)}}
.lb-top{display:flex;align-items:center;gap:16px;padding:14px 14px 14px 24px;border-bottom:1px solid var(--line)}
.lb-top p:first-child{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-right:auto}
.lb-name{font:700 clamp(22px,2.2vw,32px)/1 var(--display);letter-spacing:-.04em}
.lb-sub,.lb-hint{color:var(--muted)}
.lb-x{width:44px;height:44px;border-radius:12px;border:0;background:var(--ink);color:var(--paper);font-size:26px;line-height:1;cursor:pointer}
.lb-x:hover{background:var(--orange)}
.lb-stage{flex:1;min-height:0;overflow:hidden;cursor:zoom-in;background:color-mix(in srgb,var(--yellow) 22%,var(--paper));display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.lbox.zoomed .lb-stage{cursor:zoom-out}
.lbox.zoomed .lb-img{transform:scale(2.4);transition:transform .5s var(--ease),transform-origin .15s linear}
.lb-foot{display:flex;gap:12px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--line)}
@media (max-width:760px){.lb-hint{display:none}.lbox{height:86vh}.lb-foot .lb-all{display:none}}

/* ===== v5: inner pages match home ===== */
.aiband,.price-band,.proof{border-radius:32px;margin-inline:var(--edge)}
.phero{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(44px,5vw,72px)}
.phero .eyebrow{color:var(--orange-ink)}
.checks.dark div{background:rgba(246,244,239,.07);border:1px solid rgba(246,244,239,.12)}
.checks.dark h3{color:var(--yellow)}
.checks.dark p{color:var(--on-ink)!important}
.checks{margin-top:40px}
.pf,.faq{margin-top:40px}
.steps{margin-top:48px}
.band.ink .step .n{background:var(--ink);border-color:var(--yellow);color:var(--yellow)}
.band.ink .steps .rail{background:rgba(246,244,239,.2)}
.band.ink .step p{color:var(--on-ink)}
.cta-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.cta-band h2{font-size:clamp(40px,5vw,80px);margin-top:14px}
.cta-side{display:flex;flex-direction:column;gap:22px}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}}

/* contact */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.way{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:26px;background:var(--paper-2);text-decoration:none;min-height:300px;transition:transform .5s var(--ease)}
a.way:hover{transform:translateY(-6px)}
.way strong{font:700 clamp(28px,2.8vw,42px)/1 var(--display);letter-spacing:-.045em;margin-top:6px}
.way>p:not(.cap){color:var(--ink-2)}
.way .btn{margin-top:auto;align-self:flex-start}
.way .cap{color:var(--orange-ink)}
.way.wa{background:var(--yellow)}
.way.wa .cap{color:var(--ink)}
.way.em{background:color-mix(in srgb,var(--emerald) 16%,var(--paper))}
.visit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.visit h2{font-size:clamp(44px,5.6vw,92px);margin-top:18px}
@media (max-width:860px){.ways,.visit{grid-template-columns:1fr}.way{min-height:0}}

/* Nav: fewer, calmer links. Pill hover instead of underline. */
.nav{gap:4px}
.nav>a,.nav>.dd>button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;font-size:15px;transition:background .25s,color .25s}
.nav>a::after,.nav>.dd>button::after{display:none}
.nav>a:hover,.nav>.dd:hover>button,.nav>.dd:focus-within>button{background:rgba(246,244,239,.1)}
.nav>a[aria-current="page"],.nav>.dd>button.on{background:rgba(246,244,239,.14);color:var(--yellow)}
.nav .dd>button svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.nav .dd:hover>button svg{transform:rotate(180deg)}
/* Mega: a tidy numbered list, no thumbnails */
.mega{left:50%;width:min(620px,80vw);padding:18px;gap:2px;transform:translate(-50%,10px)}
.dd:hover .mega,.dd:focus-within .mega{transform:translate(-50%,0)}
.mega>.cap{grid-column:1/-1;color:var(--muted);padding:4px 12px 10px}
.mega a{grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:12px}
.mega a small{font:500 12px/1.6 var(--mono);color:var(--orange-ink)}
.mega a[aria-current="page"]{background:var(--paper-2)}
.mega a>span{margin:0;color:var(--ink);font-size:inherit}
.mega a>span>span{font-size:13px;color:var(--muted);margin-top:3px}

/* ===== ABOUT: the personal chapter (warmer, same system) ===== */
/* hero */
.ab-hero{padding:calc(120px + env(safe-area-inset-top,0px)) 0 clamp(40px,5vw,72px)}
.ab-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.ab-hero h1{font-size:clamp(56px,8.4vw,150px);margin-top:20px}
.ab-hero .lead{margin-top:26px}
.ab-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.ab-portrait{position:relative;margin:0;aspect-ratio:4/5;border-radius:0 0 28px 28px;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.ab-portrait .arch{position:absolute;left:3%;right:3%;top:3%;bottom:0;border-radius:999px 999px 0 0;background:var(--yellow)}
.ab-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;clip-path:inset(6% 6% 0 6% round 999px 999px 0 0)}
.ab-portrait figcaption{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:10px}
@media (max-width:860px){.ab-hero-grid{grid-template-columns:1fr}.ab-portrait{max-width:420px;width:100%;justify-self:center}}

/* how I work: photo stays while promises scroll past */
.ab-how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.ab-how-pic{position:sticky;top:100px}
.ab-how-pic .rv{aspect-ratio:4/5}
.ab-how-pic img{object-position:50% 25%}
.ab-how-item{padding-block:clamp(28px,4vw,52px);border-bottom:1px solid var(--line)}
.ab-how-item:first-of-type{border-top:1.5px solid var(--ink);margin-top:20px}
.ab-how-item .d{font-size:clamp(34px,4.2vw,64px)}
.ab-how-item p:not(.d){margin-top:12px;color:var(--ink-2);font-size:clamp(17px,1.4vw,20px);max-width:44ch}
@media (max-width:860px){.ab-how-grid{grid-template-columns:1fr}.ab-how-pic{position:relative;top:auto}.ab-how-pic .rv{aspect-ratio:4/3}}

/* 1,000+: the number fills in as you scroll; the lessons are the story */
.ab-num{margin-top:12px;font:800 clamp(110px,22vw,340px)/.82 var(--display);letter-spacing:-.065em}
.ab-num span{display:inline-block;color:transparent;-webkit-text-stroke:2px var(--yellow);background:linear-gradient(var(--yellow),var(--yellow)) 0 100%/100% var(--f,0%) no-repeat;-webkit-background-clip:text;background-clip:text}
.ab-num-sub{font:600 clamp(22px,2.4vw,36px)/1.2 var(--display);letter-spacing:-.03em;max-width:28ch;margin-top:18px}
.ab-num-sub .s{display:block;color:var(--on-ink)!important;margin-top:6px}
.lessons{margin-top:clamp(40px,5vw,72px);border-top:1px solid rgba(246,244,239,.25)}
.lessons li{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,6fr);gap:16px;align-items:baseline;padding-block:18px;border-bottom:1px solid rgba(246,244,239,.12);opacity:.28;transition:opacity .5s var(--ease)}
.lessons li.on,.no-motion .lessons li{opacity:1}
.lessons .cap{color:var(--yellow)}
.lessons strong{font:700 clamp(28px,3.4vw,52px)/1 var(--display);letter-spacing:-.04em}
.lessons em{font:400 clamp(20px,1.9vw,28px)/1.2 var(--serif);font-style:italic;color:var(--on-ink)}
@media (max-width:760px){.lessons li{grid-template-columns:40px 1fr;row-gap:6px}.lessons em{grid-column:2}}

/* business owner too */
.ab-biz-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:end}
.ab-biz h2{font-size:clamp(44px,5.6vw,92px);margin-top:16px}
.ab-biz .know{margin-top:24px}
.ab-booth{aspect-ratio:4/3}
.ab-point{font:600 clamp(26px,3.4vw,52px)/1.12 var(--display);letter-spacing:-.04em;max-width:26ch;margin-top:clamp(48px,6vw,88px)}
.eco{margin-top:clamp(40px,5vw,72px)}
.eco ul{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);border-top:1.5px solid var(--ink)}
.eco li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.eco strong{font:600 clamp(20px,1.9vw,28px)/1.15 var(--display);letter-spacing:-.03em}
.eco .cap{color:var(--orange-ink);text-align:right}
@media (max-width:860px){.ab-biz-top,.eco ul{grid-template-columns:1fr}}

/* customers: my greatest award */
.ab-award h2{font-size:clamp(40px,5.4vw,88px);max-width:18ch}
.ab-award-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);margin-top:clamp(36px,4.5vw,64px);align-items:start}
.ab-story{display:flex;flex-direction:column;gap:18px}
.ab-story p{font:400 clamp(22px,2vw,30px)/1.3 var(--serif);color:var(--paper)}
.ab-story p:last-child{color:var(--yellow);font-style:italic}
.ab-people{margin:clamp(36px,4.5vw,64px) 0 0}
.ab-people .rv{aspect-ratio:21/9;--r:24px}
.ab-people img{object-position:50% 40%}
@media (max-width:860px){.ab-award-grid{grid-template-columns:1fr}.ab-people .rv{aspect-ratio:3/2}}

/* placeholder for assets still coming */
.pend{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:320px;height:100%;padding:28px;border-radius:24px;border:1.5px dashed currentColor;opacity:.85}
.pend .cap{color:var(--orange)}
.band .pend .cap{color:var(--yellow)}
.pend strong{font:700 clamp(24px,2.4vw,34px)/1.05 var(--display);letter-spacing:-.03em}
.pend p{font-size:15px;max-width:40ch;opacity:.8}
.ab-video .pend{aspect-ratio:16/9;min-height:0}

/* family: quiet on purpose, no motion */
.ab-family-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
.ab-family-pic .pend{aspect-ratio:4/3;color:var(--muted)}
.ab-family h2{font-size:clamp(40px,4.8vw,80px)}
.ab-q{font:400 clamp(26px,2.6vw,40px)/1.2 var(--serif);font-style:italic;color:var(--emerald);margin-top:18px;max-width:24ch}
@media (max-width:860px){.ab-family-grid{grid-template-columns:1fr}}

/* training: charcoal, energetic, words drift as you scroll */
.ab-train{position:relative;overflow:hidden;background:var(--charcoal);color:var(--paper);border-radius:32px;margin-inline:var(--edge);padding-block:clamp(64px,7.5vw,112px)}
.ab-train-words{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding-block:24px;pointer-events:none}
.ab-train-words p{font:800 clamp(64px,10vw,170px)/1 var(--display);letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(246,244,239,.12)}
.ab-train-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.ab-train-pic{aspect-ratio:4/5;border-radius:24px;overflow:hidden}
.ab-train-pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.08)}
.ab-train h2{font-size:clamp(40px,5vw,84px);margin:16px 0 22px}
.ab-train h2 .s{color:var(--yellow)}
.ab-train .lead{color:rgba(246,244,239,.78)}
.ab-values{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.ab-values li{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;border-radius:999px;border:1px solid rgba(246,244,239,.25)}
.ab-values li:nth-child(odd){border-color:var(--orange);color:var(--yellow)}
@media (max-width:860px){.ab-train-grid{grid-template-columns:1fr}.ab-train-pic{aspect-ratio:4/3}.ab-train-pic img{object-position:50% 25%}}

/* credentials: small and calm */
.ab-cred-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.ab-cred h2{font-size:clamp(40px,4.6vw,76px)}
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.badges a{display:block;background:#fff;border-radius:20px;padding:10px;border:1px solid var(--line);cursor:zoom-in;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.badges a:hover{transform:translateY(-6px);box-shadow:0 24px 40px -28px rgba(var(--shadow),.5)}
.badges img{width:100%;height:auto}
@media (max-width:860px){.ab-cred-grid{grid-template-columns:1fr}.badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* full-page website screenshots (revamp before/after): full width, scroll inside */
.lbox.page .lb-stage{display:block;overflow-y:auto;overscroll-behavior:contain;cursor:default;background:var(--paper-3);padding:0}
.lbox.page .lb-img{display:block;width:100%;max-width:1100px;height:auto;max-height:none;margin:0 auto;transform:none!important;box-shadow:0 0 0 1px var(--line)}
.lbox.page .lb-hint{display:none}
.ba-full{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-basis:100%;margin-top:4px}
.ba-full .cap{color:var(--muted);margin-right:4px}
.ba-full a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);font:600 13px/1 var(--body);color:var(--ink);text-decoration:none;transition:border-color .25s,background .25s}
.ba-full a:hover{border-color:var(--ink)}
.ba-full a:last-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ba-full a svg{width:14px;height:14px}
.lbox.cert .lb-foot,.lbox.cert .lb-hint{display:none}
.lbox.cert .lb-stage{background:#fff;cursor:default}
.lbox.cert .lb-img{height:auto;max-height:70vh}

/* personal note */
.ab-msg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:center}
.ab-msg-pic{aspect-ratio:4/5}
.ab-msg-pic img{object-position:50% 20%}
.ab-letter{margin-top:22px;display:flex;flex-direction:column;gap:16px;max-width:30ch}
.ab-letter p{font:400 clamp(24px,2.4vw,38px)/1.2 var(--serif)}
.ab-letter .sig{font-style:italic;color:var(--orange-ink)}
@media (max-width:860px){.ab-msg-grid{grid-template-columns:1fr}.ab-msg-pic{aspect-ratio:4/3}}
.no-motion .ab-num span{--f:100%}
@media (max-width:860px){.ab-hero-grid,.ab-how-grid,.ab-biz-top,.eco ul,.ab-award-grid,.ab-family-grid,.ab-train-grid,.ab-cred-grid,.ab-msg-grid{grid-template-columns:minmax(0,1fr)}.ab-family h2{overflow-wrap:anywhere}}
.ab-family-pic .pend{min-height:0}

/* ABOUT: Muay Thai knee strike, pinned + scroll-scrubbed (like .shop / .reach) */
.ab-strike{height:420vh;margin-inline:var(--edge)}
.ab-strike .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--charcoal);color:var(--paper);border-radius:32px}
.ab-strike .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--kx,72%) 50%;transform-origin:var(--kx,72%) var(--ky,68%);will-change:transform}
.ab-strike .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--shadow),.85) 0%,rgba(var(--shadow),.45) 38%,rgba(var(--shadow),0) 65%),linear-gradient(0deg,rgba(var(--shadow),.6),rgba(var(--shadow),0) 40%)}
/* value words flash one at a time while the knee loads */
.ab-strike .kw{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%)}
.ab-strike .kw span{position:absolute;left:0;top:0;transform:translateY(-50%);white-space:nowrap;font:800 clamp(56px,10vw,170px)/.9 var(--display);letter-spacing:-.055em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--yellow);opacity:0}
/* impact */
.ab-strike .ring{position:absolute;left:var(--kx,72%);top:var(--ky,68%);width:16vmin;height:16vmin;margin:-8vmin 0 0 -8vmin;border-radius:50%;border:3px solid var(--yellow);box-shadow:0 0 40px rgba(242,183,5,.6),inset 0 0 30px rgba(242,183,5,.4);opacity:0;transform:scale(.2);pointer-events:none}
.ab-strike .flash{position:absolute;inset:0;background:radial-gradient(circle at var(--kx,72%) var(--ky,68%),rgba(246,244,239,.95),rgba(242,183,5,.35) 30%,rgba(242,183,5,0) 60%);opacity:0;pointer-events:none;mix-blend-mode:screen}
/* the message lands after the hit */
.ab-strike .copy{position:absolute;left:var(--gut);bottom:clamp(56px,10vh,110px);width:min(560px,calc(100% - 2*var(--gut)));opacity:0}
.ab-strike .copy .cap{color:var(--yellow)}
.ab-strike h2{font-size:clamp(40px,5vw,84px);margin:14px 0 18px}
.ab-strike h2 .s{color:var(--yellow)}
.ab-strike .lead{color:rgba(246,244,239,.8)}
.ab-strike .bar{position:absolute;right:var(--gut);bottom:28px;display:flex;align-items:center;gap:12px;color:rgba(246,244,239,.7)}
.ab-strike .bar span{display:block;width:140px;height:1.5px;background:rgba(246,244,239,.2)}
.ab-strike .bar i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){
  .ab-strike{height:300vh}
  .ab-strike .film{object-position:68% 50%}
  .ab-strike .shade{background:linear-gradient(0deg,rgba(var(--shadow),.9) 0%,rgba(var(--shadow),.5) 45%,rgba(var(--shadow),.1) 75%)}
  .ab-strike .kw{top:24%}
  .ab-strike .copy{bottom:40px}
  .ab-strike .ab-values{display:none}
  .ab-strike .bar{display:none}
}
/* reduced motion: a still frame with the message */
.no-motion .ab-strike{height:auto}
.no-motion .ab-strike .stage{position:relative;height:auto;min-height:90svh}
.no-motion .ab-strike .copy{opacity:1}
.no-motion .ab-strike .kw,.no-motion .ab-strike .bar{display:none}
@media (max-width:760px){.ab-strike .kw span{font-size:clamp(34px,10.5vw,56px);white-space:normal;width:calc(100vw - 2*var(--gut) - 2*var(--edge));line-height:.95}}

/* ABOUT hero v2: full-width real moment with the name over it */
.ab-hero2{padding:calc(var(--edge) + 76px + env(safe-area-inset-top,0px)) var(--edge) 0}
.ab-hero2 .frame{position:relative;height:calc(100svh - 76px - 2*var(--edge));min-height:560px;border-radius:32px;overflow:hidden;background:var(--charcoal);color:var(--paper)}
.ab-hero2 .bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:52% 30%;will-change:transform}
.ab-hero2 .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,27,42,.92) 0%,rgba(13,27,42,.6) 34%,rgba(13,27,42,0) 62%),linear-gradient(90deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,0) 55%)}
.ab-hero2 .txt{position:absolute;left:clamp(20px,3.4vw,52px);right:clamp(20px,3.4vw,52px);bottom:clamp(24px,5vh,56px);max-width:760px}
.ab-hero2 .txt>.cap{color:var(--yellow)}
.ab-hero2 h1{font-size:clamp(52px,8vw,140px);margin-top:12px}
.ab-hero2 h1 .s{color:var(--yellow)}
.ab-hero2 .lead{color:rgba(246,244,239,.86);margin-top:18px;max-width:52ch}
.ab-hero2 .ab-row{margin-top:24px}
.ab-hero2 .btn.ol{color:var(--paper);border-color:rgba(246,244,239,.45)}
.ab-hero2 .btn.ol:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ab-hero2 .tag{position:absolute;right:clamp(20px,3.4vw,52px);top:22px;background:rgba(13,27,42,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:9px 13px;border-radius:10px}
@media (max-width:760px){
  .ab-hero2 .frame{height:auto;min-height:calc(100svh - 76px - 2*var(--edge));display:flex;flex-direction:column;justify-content:flex-end}
  .ab-hero2 .bg{object-position:50% 25%}
  .ab-hero2 .shade{background:linear-gradient(0deg,rgba(13,27,42,.96) 0%,rgba(13,27,42,.82) 45%,rgba(13,27,42,.1) 72%)}
  .ab-hero2 .txt{position:relative;left:auto;right:auto;bottom:auto;padding:220px 20px 24px}
  .ab-hero2 .lead{font-size:16px}
  .ab-hero2 .tag{display:none}
}

/* how I work: four promises, no photo */
.ab-how .ab-how-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);margin-top:20px;border-top:1.5px solid var(--ink)}
.ab-how .ab-how-item,.ab-how .ab-how-item:first-of-type{border-top:0;margin-top:0;padding-block:clamp(26px,3.4vw,44px)}
.ab-how .ab-how-item>.cap{color:var(--orange-ink);display:block;margin-bottom:12px}
.ab-how .ab-how-item .d{font-size:clamp(30px,3.4vw,54px)}
@media (max-width:760px){.ab-how .ab-how-list{grid-template-columns:minmax(0,1fr)}}

/* business owner too: portrait frame */
.ab-booth{aspect-ratio:4/5;max-height:640px}
.ab-booth img{object-position:50% 25%}

/* hero: put Lucian on the right, words on the left (desktop) */
@media (min-width:761px){
  .ab-hero2 .bg{left:0;width:125%;max-width:none;object-position:0% 30%}
  .ab-hero2 .txt{max-width:min(46%,680px)}
  .ab-hero2 h1{font-size:clamp(52px,6.6vw,118px)}
  .ab-hero2 .shade{background:linear-gradient(90deg,rgba(13,27,42,.92) 0%,rgba(13,27,42,.7) 34%,rgba(13,27,42,0) 58%),linear-gradient(0deg,rgba(13,27,42,.6) 0%,rgba(13,27,42,0) 40%)}
}

/* how I work: four palette tiles */
.ab-how .sec-h h2{font-size:clamp(44px,5.6vw,92px);max-width:12ch}
.ab-how .ab-how-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:0;margin-top:clamp(32px,4vw,56px)}
.ab-how .ab-how-item,.ab-how .ab-how-item:first-of-type{display:flex;flex-direction:column;gap:12px;min-height:340px;padding:28px;border:0;border-radius:26px;transition:transform .5s var(--ease)}
.ab-how .ab-how-item:hover{transform:translateY(-8px) rotate(-.6deg)}
.ab-how .ab-how-item>.cap{margin:0 0 auto;font-size:13px}
.ab-how .ab-how-item .d{font-size:clamp(26px,2.4vw,38px);line-height:1}
.ab-how .ab-how-item p:not(.d){margin:0;font-size:16px;max-width:none}
.ab-how .ab-how-item:nth-child(1){background:var(--yellow);color:var(--ink)}
.ab-how .ab-how-item:nth-child(1)>.cap{color:var(--ink)}
.ab-how .ab-how-item:nth-child(2){background:var(--emerald);color:var(--paper)}
.ab-how .ab-how-item:nth-child(3){background:var(--ink);color:var(--paper)}
.ab-how .ab-how-item:nth-child(3) .d{color:var(--yellow)}
.ab-how .ab-how-item:nth-child(4){background:color-mix(in srgb,var(--orange) 22%,var(--paper));color:var(--ink)}
.ab-how .ab-how-item:nth-child(2) p:not(.d),.ab-how .ab-how-item:nth-child(3) p:not(.d){color:rgba(246,244,239,.82)}
.ab-how .ab-how-item:nth-child(2)>.cap,.ab-how .ab-how-item:nth-child(3)>.cap{color:var(--yellow)}
@media (max-width:1100px){.ab-how .ab-how-list{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-how .ab-how-item,.ab-how .ab-how-item:first-of-type{min-height:260px}}
@media (max-width:560px){.ab-how .ab-how-list{grid-template-columns:minmax(0,1fr)}.ab-how .ab-how-item,.ab-how .ab-how-item:first-of-type{min-height:0}.ab-how .ab-how-item>.cap{margin-bottom:6px}}
@media (max-width:760px){.ab-hero2 .shade{background:linear-gradient(0deg,rgba(13,27,42,.97) 0%,rgba(13,27,42,.9) 50%,rgba(13,27,42,.25) 78%,rgba(13,27,42,0) 100%)}}

/* MUAY THAI story stages (v2): long pinned scroll, one stage at a time */
.ab-strike{height:900vh}
.ab-strike .dim{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
.ab-strike .st{position:absolute;left:var(--gut);bottom:clamp(64px,12vh,130px);width:min(620px,calc(100% - 2*var(--gut)));display:flex;flex-direction:column;gap:14px}
.motion .ab-strike .st:not(.s1)>*{opacity:0}
.ab-strike .st .cap{color:var(--yellow)}
.ab-strike .st .d{font-size:clamp(34px,3.8vw,62px);line-height:1}
.ab-strike .st .s{color:var(--yellow)}
.ab-strike .st .lead{color:rgba(246,244,239,.85);font-size:clamp(17px,1.4vw,20px)}
.ab-strike .s4 .d2{font-size:clamp(26px,2.6vw,42px);color:var(--yellow);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.ab-strike .s4 .sup{color:rgba(246,244,239,.82);font-size:clamp(16px,1.3vw,19px);max-width:48ch}
/* stage 3: short, understated words around the motion */
.ab-strike .s3{inset:0;width:auto;bottom:auto;left:0}
.ab-strike .s3 p{position:absolute;left:var(--x);top:var(--y);font:400 clamp(26px,2.8vw,46px)/1 var(--serif);font-style:italic;color:var(--paper);text-shadow:0 2px 20px rgba(var(--shadow),.6);white-space:nowrap}
.ab-strike .s3 p:nth-child(odd){color:var(--yellow)}
/* stage 5: the impact line, big and simple */
.ab-strike .s5{left:var(--gut);top:50%;bottom:auto;transform:translateY(-50%);gap:6px}
.ab-strike .s5 .big{font-size:clamp(56px,8.4vw,150px);line-height:.9}
.ab-strike .s5 .d3{font-size:clamp(22px,2.2vw,34px);font-weight:600;margin-top:18px;max-width:22ch;color:var(--paper)}
/* stage 6: quiet, family */
.ab-strike .fam{display:flex;gap:10px;flex-wrap:wrap}
.ab-strike .fam li{font:400 clamp(24px,2.4vw,36px)/1 var(--serif);font-style:italic;color:var(--yellow);padding-right:8px}
/* stage 7: closing */
.ab-strike .s7 .d{font-size:clamp(36px,4.4vw,72px)}
.ab-strike .s7 b{color:var(--yellow);font-weight:600}
@media (max-width:760px){
  .ab-strike{height:780vh}
  .ab-strike .st{left:var(--gut);right:var(--gut);width:auto;bottom:28px;gap:10px}
  .ab-strike .st .d{font-size:clamp(28px,8.4vw,40px)}
  .ab-strike .st .lead,.ab-strike .s4 .sup{font-size:15px}
  .ab-strike .s4 .d2{font-size:26px}
  .ab-strike .s3 p{font-size:28px}
  .ab-strike .s5{top:auto;bottom:40px;transform:none}
  .ab-strike .s5 .big{font-size:clamp(46px,14vw,64px)}
  .ab-strike .s5 .d3{font-size:20px}
  .ab-strike .fam li{font-size:24px}
}
/* reduced motion: the whole story as a readable column over the still */
.no-motion .ab-strike{height:auto}
.no-motion .ab-strike .stage{min-height:0;padding:clamp(48px,8vw,96px) var(--gut);display:flex;flex-direction:column;gap:48px}
.no-motion .ab-strike .film{opacity:.35}
.no-motion .ab-strike .st,.no-motion .ab-strike .s3 p{position:relative;inset:auto;left:auto;top:auto;bottom:auto;transform:none;width:auto}
.no-motion .ab-strike .s3{display:flex;flex-wrap:wrap;gap:12px 24px}

/* ===== Full-bleed heroes and scenes on every page, like the homepage ===== */
/* About hero: whole screen, header floats over it */
.ab-hero2{padding:0}
.ab-hero2 .frame{height:100vh;height:100svh;min-height:600px;border-radius:0}
.ab-hero2 .txt{bottom:clamp(36px,7vh,80px);left:var(--gut);right:var(--gut)}
.ab-hero2 .tag{top:calc(96px + env(safe-area-inset-top,0px));right:var(--gut)}
@media (min-width:761px){
  /* deeper fade on the left so the photo's banner text never fights the headline */
  .ab-hero2 .shade{background:linear-gradient(90deg,rgba(13,27,42,.95) 0%,rgba(13,27,42,.88) 40%,rgba(13,27,42,.35) 58%,rgba(13,27,42,0) 70%),linear-gradient(0deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,0) 35%),linear-gradient(180deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,0) 18%)}
}
@media (max-width:760px){.ab-hero2 .frame{min-height:100svh}.ab-hero2 .txt{padding:240px var(--gut) 32px}}
/* Muay Thai scene: edge to edge like .shop / .reach */
.ab-strike{margin-inline:0}
.ab-strike .stage{border-radius:0}
/* big image under each inner-page heading: edge to edge */
.wide-img{margin-inline:0}
.wide-img .rv{--r:0px;border-radius:0}

/* personal note v2: headline + story; the key lines stand out */
.ab-msg-h{font-size:clamp(38px,4.4vw,72px);margin-top:16px}
.ab-msg-h .s{color:var(--orange-ink)}
.ab-letter{max-width:52ch;gap:14px;margin-top:26px}
.ab-letter p{font:400 clamp(17px,1.35vw,20px)/1.55 var(--body);color:var(--ink-2)}
.ab-letter p b{display:block;font:400 clamp(24px,2.2vw,34px)/1.2 var(--serif);font-style:italic;color:var(--ink);padding-left:18px;border-left:3px solid var(--yellow);margin-block:6px}
.ab-letter p .hl{font:600 clamp(22px,2vw,30px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.ab-letter .sig{font:400 clamp(24px,2.2vw,32px)/1 var(--serif);font-style:italic;color:var(--orange-ink);margin-top:6px}
.ab-msg-grid{align-items:start}
.ab-msg-pic{position:sticky;top:100px}
@media (max-width:860px){.ab-msg-pic{position:relative;top:auto}}

/* ===== CONTACT (Lucian's brief, Oct 2026): calm, premium, one goal ===== */
.ct-hero{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:calc(130px + env(safe-area-inset-top,0px)) 0 clamp(48px,8vh,96px)}
.ct-hero h1{font-size:clamp(54px,8.6vw,156px);margin-top:20px;max-width:13ch}
.ct-hero h1 .s{color:var(--orange-ink)}
.ct-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);margin-top:clamp(32px,4vw,56px);align-items:end}
.ct-hero-copy{display:flex;flex-direction:column;gap:10px;font-size:clamp(17px,1.4vw,21px);color:var(--ink-2);max-width:52ch}
.ct-hero-copy .listen{font:400 clamp(26px,2.4vw,38px)/1.1 var(--serif);font-style:italic;color:var(--emerald);margin-top:6px}
.ct-hero-cta .micro,.ct-form .micro{margin-top:16px;font-size:14px;color:var(--muted)}
@media (max-width:860px){.ct-hero-grid{grid-template-columns:minmax(0,1fr)}}

/* phone scroll story */
.ct-story{height:700vh}
.ct-story .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink);color:var(--paper)}
.ct-story .pic{position:absolute;inset:0;will-change:clip-path}
.ct-story .pic img{width:100%;height:100%;object-fit:cover;will-change:transform}
.ct-story .pl{clip-path:inset(0 0 0 100%)}
.ct-story .pl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--yellow);z-index:1}
.ct-story .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(13,27,42,.88) 0%,rgba(13,27,42,.55) 30%,rgba(13,27,42,0) 55%),linear-gradient(0deg,rgba(13,27,42,.6) 0%,rgba(13,27,42,0) 35%)}
.ct-story .st{position:absolute;bottom:clamp(56px,11vh,120px);width:min(460px,34%);display:flex;flex-direction:column;gap:10px}
.ct-story .c1{right:var(--gut)}
.ct-story .c3,.ct-story .c4{left:var(--gut)}
.ct-story .c5{left:50%;transform:translateX(-50%);width:min(820px,calc(100% - 2*var(--gut)));text-align:center;align-items:center}
.motion .ct-story .st>*{opacity:0}
.motion .ct-story .c1>h2{opacity:1}
.ct-story .st .d{font-size:clamp(32px,3.4vw,56px);line-height:1}
.ct-story .st .s{color:var(--yellow)}
.ct-story .st .d2{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--yellow);font-size:clamp(26px,2.4vw,38px)}
.ct-story .st .lead{color:rgba(246,244,239,.86);font-size:clamp(16px,1.3vw,19px)}
.ct-story .st .strong{color:var(--paper);font-weight:600}
.ct-story .c5 .big{font-size:clamp(44px,5.6vw,96px)}
/* the phone: a calm WhatsApp-style thread, not a chat-bubble circus */
.ct-story .phone{position:absolute;left:50%;top:50%;width:min(300px,30vw);transform:translate(-50%,-50%);border-radius:34px;background:#ece5dd;border:8px solid #111;box-shadow:0 40px 80px -30px rgba(var(--shadow),.7);overflow:hidden;opacity:0}
.ct-story .ph-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--emerald);color:var(--paper);font-size:14px}
.ct-story .ph-top .av{width:30px;height:30px;border-radius:50%}
.ct-story .ph-top b{display:block;font-weight:600}
.ct-story .ph-status{display:block;font-style:normal;font-size:11px;opacity:.8}
.ct-story .ph-body{display:flex;flex-direction:column;gap:8px;padding:14px 12px 18px;min-height:250px;justify-content:flex-end}
.ct-story .b{max-width:84%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.35;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0}
.ct-story .b.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:4px}
.ct-story .b.out i{font-style:normal;font-size:10px;color:#53bdeb;margin-left:6px}
.ct-story .b.in{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.ct-story .typing{display:flex;gap:4px;padding:12px 14px}
.ct-story .typing span{width:7px;height:7px;border-radius:50%;background:#999;animation:dots 1.2s infinite}
.ct-story .typing span:nth-child(2){animation-delay:.2s}.ct-story .typing span:nth-child(3){animation-delay:.4s}
@keyframes dots{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:760px){
  .ct-story{height:600vh}
  .ct-story .pc img{object-position:22% 50%}
  .ct-story .pl img{object-position:76% 50%}
  .ct-story .shade{background:linear-gradient(0deg,rgba(13,27,42,.95) 0%,rgba(13,27,42,.75) 40%,rgba(13,27,42,.1) 70%)}
  .ct-story .st,.ct-story .c1,.ct-story .c3,.ct-story .c4,.ct-story .c5{left:var(--gut);right:var(--gut);width:auto;bottom:28px;transform:none;text-align:left;align-items:flex-start}
  .ct-story .st .d{font-size:30px}.ct-story .c5 .big{font-size:36px}
  .ct-story .st .lead{font-size:15px}
  .ct-story .phone{top:96px;transform:translateX(-50%);width:220px;border-width:6px;border-radius:26px}
  .ct-story .ph-body{min-height:150px}
  .ct-story .b{font-size:12px}
}
.no-motion .ct-story{height:auto}
.no-motion .ct-story .stage{position:relative;height:auto;padding:96px var(--gut);display:flex;flex-direction:column;gap:48px}
.no-motion .ct-story .pl{display:none}.no-motion .ct-story .pic{opacity:.3}
.no-motion .ct-story .st,.no-motion .ct-story .phone{position:relative;inset:auto;left:auto;right:auto;bottom:auto;top:auto;transform:none;width:auto;opacity:1}
.no-motion .ct-story .b{opacity:1}.no-motion .ct-story .typing{display:none}

/* good fit: confident, no cards */
.ct-fit-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:end}
.ct-fit h2{font-size:clamp(42px,5vw,84px);margin-top:16px}
.ct-fit-copy{display:flex;flex-direction:column;gap:16px;font-size:clamp(17px,1.4vw,20px);color:var(--ink-2)}
.ct-fit-copy .ok{font:400 clamp(26px,2.4vw,38px)/1 var(--serif);font-style:italic;color:var(--orange-ink)}
.ct-fit-copy b{color:var(--ink)}
@media (max-width:860px){.ct-fit-grid{grid-template-columns:minmax(0,1fr)}}

/* topics on navy */
.tlist{margin-top:36px;border-top:1px solid rgba(246,244,239,.25)}
.tlist button{width:100%;display:grid;grid-template-columns:52px minmax(0,4fr) minmax(0,6fr) auto;gap:18px;align-items:center;padding:22px 0;background:none;border:0;border-bottom:1px solid rgba(246,244,239,.12);color:var(--paper);text-align:left;cursor:pointer;transition:padding .5s var(--ease),background .3s}
.tlist button:hover{padding-inline:16px;background:rgba(246,244,239,.05)}
.tlist .cap{color:var(--yellow)}
.tlist strong{font:600 clamp(22px,2.2vw,34px)/1.05 var(--display);letter-spacing:-.03em}
.tlist em{font:400 clamp(18px,1.6vw,24px)/1.25 var(--serif);font-style:italic;color:var(--on-ink)}
.tlist .go{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.tlist .go svg{width:16px;height:16px}
.unsure{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.unsure .cap{color:var(--yellow)}
.unsure .q{font:400 clamp(28px,3vw,48px)/1.12 var(--serif);font-style:italic;max-width:30ch}
.unsure p:not(.q):not(.cap){color:var(--on-ink)}
@media (max-width:760px){.tlist button{grid-template-columns:36px minmax(0,1fr);row-gap:6px}.tlist em,.tlist .go{grid-column:2}}

/* enquiry form: short, calm */
.ct-form-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.ct-form h2{font-size:clamp(40px,4.6vw,76px);margin-top:16px}
.eq{display:flex;flex-direction:column;gap:18px;background:var(--paper-2);border-radius:28px;padding:clamp(22px,3vw,40px)}
.eq .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.eq label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:15px}
.eq input,.eq textarea,.eq select{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:13px 14px;width:100%}
.eq input:focus,.eq textarea:focus,.eq select:focus{outline:2px solid var(--yellow);border-color:var(--ink)}
.eq fieldset{border:0;padding:0;margin:0}
.eq legend{font-weight:600;font-size:15px;margin-bottom:10px}
.eq .chips{display:flex;flex-wrap:wrap;gap:8px}
.chipx{flex-direction:row!important;font-weight:500!important}
.chipx input{position:absolute;opacity:0;width:1px;height:1px}
.chipx span{display:inline-block;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:14px;transition:background .25s,border-color .25s}
.chipx input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chipx input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.eq .btn{align-self:flex-start}
.eq .err{color:var(--orange-ink);font-weight:600}
@media (max-width:860px){.ct-form-grid,.eq .row2{grid-template-columns:minmax(0,1fr)}}

/* direct contact */
.ct-direct-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:end}
.ct-direct-grid>div:first-child{display:flex;flex-direction:column;gap:10px}
.ct-direct h2{font-size:clamp(48px,6vw,104px);margin-top:16px}
.ct-direct h2 .s{color:var(--emerald)}
.say-this{font:400 clamp(24px,2.4vw,36px)/1.2 var(--serif);font-style:italic;padding-left:18px;border-left:3px solid var(--yellow);max-width:30ch}
.ct-ways{border-top:1.5px solid var(--ink)}
.ct-ways>*{display:block;padding-block:18px;border-bottom:1px solid var(--line);text-decoration:none}
.ct-ways .cap{color:var(--orange-ink);display:block;margin-bottom:6px}
.ct-ways strong{font:600 clamp(18px,1.7vw,24px)/1.25 var(--display);letter-spacing:-.02em}
.ct-ways a:hover strong{color:var(--orange-ink)}
.ct-ways p{margin-top:6px;color:var(--muted);font-size:15px}
@media (max-width:860px){.ct-direct-grid{grid-template-columns:minmax(0,1fr)}}
.reach .lets{font:700 clamp(22px,2vw,30px)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.ct-story .shade.sr{background:linear-gradient(270deg,rgba(13,27,42,.88) 0%,rgba(13,27,42,.55) 30%,rgba(13,27,42,0) 55%),linear-gradient(0deg,rgba(13,27,42,.6) 0%,rgba(13,27,42,0) 35%)}
.ct-story .shade.sl{background:linear-gradient(90deg,rgba(13,27,42,.88) 0%,rgba(13,27,42,.55) 30%,rgba(13,27,42,0) 55%),linear-gradient(0deg,rgba(13,27,42,.6) 0%,rgba(13,27,42,0) 35%);opacity:0}
.ct-story .shade.sb{background:linear-gradient(0deg,rgba(13,27,42,.94) 0%,rgba(13,27,42,.6) 42%,rgba(13,27,42,.12) 72%);opacity:0}
@media (max-width:760px){.ct-story .shade.sr,.ct-story .shade.sl,.ct-story .shade.sb{background:linear-gradient(0deg,rgba(13,27,42,.95) 0%,rgba(13,27,42,.75) 40%,rgba(13,27,42,.1) 70%)}}
.no-motion .ct-story .shade.sr{opacity:1}

/* ===== CONTACT v2 ===== */
/* story opens the page: H1 label, stronger fades so text always reads */
.motion .ct-story .c1>h1,.motion .ct-story .c1>h2{opacity:1}
.ct-story .h1-tag{color:var(--yellow);font-weight:500;letter-spacing:.14em}
.ct-story .st{text-shadow:0 2px 18px rgba(13,27,42,.55)}
.ct-story .shade.sr{background:linear-gradient(270deg,rgba(13,27,42,.95) 0%,rgba(13,27,42,.82) 30%,rgba(13,27,42,.35) 52%,rgba(13,27,42,0) 66%),linear-gradient(0deg,rgba(13,27,42,.7) 0%,rgba(13,27,42,0) 40%)}
.ct-story .shade.sl{background:linear-gradient(90deg,rgba(13,27,42,.95) 0%,rgba(13,27,42,.82) 30%,rgba(13,27,42,.35) 52%,rgba(13,27,42,0) 66%),linear-gradient(0deg,rgba(13,27,42,.7) 0%,rgba(13,27,42,0) 40%)}
.ct-story .shade.sb{background:linear-gradient(0deg,rgba(13,27,42,.97) 0%,rgba(13,27,42,.82) 36%,rgba(13,27,42,.3) 62%,rgba(13,27,42,0) 80%)}
@media (min-width:761px){.ct-story .c1,.ct-story .c3,.ct-story .c4{width:min(480px,36%)}}
/* phones: photo on top (faces visible), solid navy text area below, small phone over the shoulder */
@media (max-width:760px){
  .ct-story .pic{inset:0 0 45% 0}
  .ct-story .pc img{object-position:15% 30%}
  .ct-story .pl img{object-position:83% 30%}
  .ct-story .shade.sr,.ct-story .shade.sl,.ct-story .shade.sb{inset:0 0 45% 0;background:linear-gradient(0deg,rgba(13,27,42,1) 0%,rgba(13,27,42,0) 30%)}
  .ct-story .shade.sl,.ct-story .shade.sb{opacity:0}
  .ct-story .st,.ct-story .c1,.ct-story .c3,.ct-story .c4,.ct-story .c5{top:57%;bottom:auto;left:var(--gut);right:var(--gut);width:auto;transform:none;text-align:left;align-items:flex-start;gap:8px;text-shadow:none}
  .ct-story .st .d{font-size:clamp(26px,7.6vw,34px)}
  .ct-story .c5 .big{font-size:clamp(30px,8.6vw,38px)}
  .ct-story .st .d2{font-size:24px}
  .ct-story .st .lead{font-size:15px;line-height:1.4}
  .ct-story .phone{left:auto;right:10px;top:auto;bottom:calc(45% + 12px);transform:none;width:156px;border-width:5px;border-radius:22px}
  .ct-story .ph-top{padding:8px 10px;font-size:11px}.ct-story .ph-top .av{width:22px;height:22px}
  .ct-story .ph-body{min-height:0;padding:8px;gap:5px}
  .ct-story .b{font-size:10.5px;padding:6px 8px}
}

/* "sayang your business" */
.ct-fit h2 .s{color:var(--orange-ink)}
.ct-fit-copy .big-q{font:400 clamp(24px,2.2vw,34px)/1.2 var(--serif);font-style:italic;color:var(--ink)}
.ct-fit-copy .sayang{font-size:clamp(19px,1.6vw,23px);padding:16px 20px;background:var(--yellow);border-radius:16px;color:var(--ink)}
.ct-fit-grid{align-items:start}

/* coffee ending (replaces the handshake on Contact) */
.ct-coffee{height:300vh}
.ct-coffee .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.ct-coffee .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.ct-coffee .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,244,239,.96) 0%,rgba(246,244,239,.85) 30%,rgba(246,244,239,0) 55%)}
.ct-coffee .cf-top{position:absolute;left:var(--gut);top:calc(110px + env(safe-area-inset-top,0px));max-width:min(620px,48%)}
.ct-coffee .cf-top .cap{color:var(--orange-ink)}
.ct-coffee h2{font-size:clamp(40px,5vw,84px);margin-top:14px}
.ct-coffee h2 .s{color:var(--emerald)}
.ct-coffee .cf-panel{position:absolute;left:var(--gut);bottom:clamp(28px,6vh,64px);width:min(520px,calc(100% - 2*var(--gut)));display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:rgba(246,244,239,.94);box-shadow:0 30px 60px -40px rgba(var(--shadow),.45)}
.ct-coffee .cf-panel .lead{font-size:17px}
.cf-dir{display:flex;flex-direction:column;gap:10px;margin:0}
.cf-dir div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.cf-dir dt{color:var(--orange-ink)}
.cf-dir dd{margin:0;font-weight:500}
.ct-coffee .row{display:flex;gap:10px;flex-wrap:wrap}
.ct-coffee .bar{position:absolute;right:var(--gut);bottom:28px;display:flex;align-items:center;gap:12px;color:var(--muted)}
.ct-coffee .bar span{display:block;width:140px;height:1.5px;background:var(--line)}
.ct-coffee .bar i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){
  .ct-coffee{height:240vh}
  .ct-coffee .film{object-position:68% 50%}
  .ct-coffee .shade{background:linear-gradient(180deg,rgba(246,244,239,.95) 0%,rgba(246,244,239,.6) 30%,rgba(246,244,239,0) 50%)}
  .ct-coffee .cf-top{max-width:none;right:var(--gut);top:96px}
  .ct-coffee h2{font-size:34px}
  .ct-coffee .cf-panel{left:12px;right:12px;width:auto;bottom:12px;padding:16px;gap:12px}
  .cf-dir div{grid-template-columns:1fr;gap:2px}
  .ct-coffee .bar{display:none}
}
.no-motion .ct-coffee{height:auto}.no-motion .ct-coffee .stage{position:relative;height:auto;min-height:100svh}
.ct-map iframe{display:block;width:100%;height:clamp(320px,45vh,480px);border:0;filter:saturate(.85)}
@media (max-width:760px){.ct-story .pic,.ct-story .shade.sr,.ct-story .shade.sl,.ct-story .shade.sb{top:calc(76px + env(safe-area-inset-top,0px))}}
@media (max-width:760px){.ct-coffee .cf-panel .lead{font-size:15px}.cf-dir{gap:6px}.cf-dir dd{font-size:14.5px;line-height:1.35}.ct-coffee .row{flex-wrap:nowrap}.ct-coffee .row .btn{min-height:44px;padding:0 14px;font-size:14px;flex:1}.ct-coffee .row .btn svg{display:none}}
/* map: its own calm block, with breathing room before the footer */
.ct-map{padding:clamp(56px,7vw,104px) var(--edge) clamp(64px,8vw,120px)}
.ct-map iframe{max-width:var(--max);margin-inline:auto;height:clamp(300px,42vh,460px);border-radius:24px;border:1px solid var(--line);box-shadow:0 30px 60px -45px rgba(var(--shadow),.5)}
@media (max-width:760px){.ct-map{padding:48px 16px 64px}.ct-map iframe{height:320px;border-radius:18px}}

/* CONTACT story v3 (desktop): faces stay clear. Phone bottom-right, text bottom-left on a navy panel. */
@media (min-width:901px){
  .ct-story .pc img{object-position:22% 35%}
  .ct-story .pl img{object-position:78% 35%}
  .ct-story .phone{left:auto;top:auto;right:var(--gut);bottom:clamp(28px,6vh,64px);transform:none;width:min(270px,24vw)}
  .ct-story .ph-body{min-height:200px}
  .ct-story .c1,.ct-story .c3,.ct-story .c4{left:var(--gut);right:auto;bottom:clamp(28px,6vh,64px);width:min(540px,46%);padding:26px 28px;border-radius:22px;background:rgba(13,27,42,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:none}
  .ct-story .c1 .d,.ct-story .c3 .d,.ct-story .c4 .d{font-size:clamp(30px,3vw,48px)}
  .ct-story .shade.sr,.ct-story .shade.sl{background:linear-gradient(0deg,rgba(13,27,42,.75) 0%,rgba(13,27,42,.3) 32%,rgba(13,27,42,0) 55%)}
  .ct-story .c5{bottom:clamp(40px,8vh,90px)}
  .ct-story .c5 .lead{font-size:clamp(17px,1.4vw,21px);color:var(--paper)}
}
.motion .ct-story .c3,.motion .ct-story .c4,.motion .ct-story .c5{opacity:0}

/* CONTACT story v4: phones + tablets (<=900px). One continuous poster:
   navy top with message notifications → photo fades in, face clear → long gradient → words. No hard edges, no boxes. */
@media (max-width:900px){
  .ct-story .stage{background:var(--ink)}
  .ct-story .pic{inset:auto 0 0 0;top:22%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%)}
  .ct-story .pc img{object-position:18% 28%}
  .ct-story .pl img{object-position:82% 28%}
  .ct-story .shade.sr,.ct-story .shade.sl,.ct-story .shade.sb{inset:0;top:0;background:linear-gradient(0deg,rgba(13,27,42,.97) 0%,rgba(13,27,42,.88) 26%,rgba(13,27,42,.35) 48%,rgba(13,27,42,0) 62%)}
  .ct-story .shade.sl,.ct-story .shade.sb{opacity:0}
  /* text: bottom of the poster, straight on the gradient */
  .ct-story .st,.ct-story .c1,.ct-story .c3,.ct-story .c4,.ct-story .c5{top:auto;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:var(--gut);right:var(--gut);width:auto;transform:none;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;text-align:left;align-items:flex-start;gap:8px;text-shadow:0 2px 16px rgba(13,27,42,.6)}
  .ct-story .st .d{font-size:clamp(28px,7.6vw,46px)}
  .ct-story .c5 .big{font-size:clamp(32px,8.6vw,54px)}
  .ct-story .st .lead{font-size:clamp(15px,2.2vw,18px)}
  /* the conversation arrives as phone notifications at the top */
  .ct-story .phone{left:var(--gut);right:var(--gut);top:calc(88px + env(safe-area-inset-top,0px));bottom:auto;width:auto;max-width:560px;transform:none;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .ct-story .ph-top{display:none}
  .ct-story .ph-body{min-height:0;padding:0;gap:8px;justify-content:flex-start}
  .ct-story .b{max-width:100%;align-self:stretch;font-size:clamp(13px,1.9vw,15px);line-height:1.35;padding:11px 14px 11px 46px;border-radius:16px;position:relative;color:var(--ink);background:rgba(246,244,239,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 30px -18px rgba(0,0,0,.6)}
  .ct-story .b::before{content:"";position:absolute;left:12px;top:11px;width:24px;height:24px;border-radius:7px;background:var(--emerald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F6F4EF' stroke-width='1.8'%3E%3Cpath d='M4 16.5l1.1-3.4A7 7 0 1 1 7.8 15.7L4 16.5z'/%3E%3C/svg%3E") center/15px no-repeat}
  .ct-story .b.in{background:rgba(255,255,255,.95)}
  .ct-story .b.in::before{background:var(--paper) url("/assets/img/lucian-avatar.webp") center/cover}
  .ct-story .b.out i{display:none}
  .ct-story .typing{align-self:flex-start;padding:12px 14px 12px 46px}
}
/* both subjects stand at ~48% across their photo: frame them centred (phones, tablets, and each desktop half) */
.ct-story .pc img,.ct-story .pl img{object-position:48% 30%!important}

/* ===== BUSINESS WEBSITE DESIGN (Freelance Web Designer Malaysia) ===== */
.wd-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:calc(120px + env(safe-area-inset-top,0px)) 0 clamp(40px,7vh,80px);overflow:hidden}
.wd-hero .bgimg{position:absolute;inset:0}
.wd-hero .bgimg img{width:100%;height:100%;object-fit:cover;object-position:75% 40%;opacity:.95}
.wd-hero .fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,rgba(246,244,239,.94) 38%,rgba(246,244,239,.55) 62%,rgba(246,244,239,.1) 100%),linear-gradient(0deg,var(--paper) 0%,rgba(246,244,239,0) 30%)}
.wd-hero-in{position:relative;width:100%}
.wd-hero .h1-tag{color:var(--orange-ink);font-weight:500;letter-spacing:.14em}
.wd-hero .big{font-size:clamp(46px,6.6vw,118px);margin-top:16px;max-width:15ch}
.wd-hero .big.alt{margin-top:6px}
.wd-hero .big .s{color:var(--orange-ink)}
.wd-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);margin-top:clamp(28px,4vw,52px);align-items:end}
.wd-hero-copy,.wd-hero-side{display:flex;flex-direction:column;gap:10px;font-size:clamp(17px,1.35vw,20px);color:var(--ink-2)}
.wd-hero .qs{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.wd-hero .qs li{font:600 clamp(19px,1.6vw,24px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.wd-hero .job{font:400 clamp(28px,2.6vw,42px)/1.1 var(--serif);font-style:italic;color:var(--emerald)}
.wd-hero .ab-row{margin-top:14px}
@media (max-width:860px){.wd-hero-grid{grid-template-columns:minmax(0,1fr)}.wd-hero .fade{background:linear-gradient(0deg,var(--paper) 0%,rgba(246,244,239,.95) 55%,rgba(246,244,239,.6) 80%,rgba(246,244,239,.3) 100%)}}

/* market reality */
.wd-market h2{font-size:clamp(44px,5.6vw,96px);margin-top:16px;max-width:16ch}
.prices{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(28px,3vw,44px) 0 18px}
.prices span{font:700 clamp(22px,2.4vw,36px)/1 var(--display);letter-spacing:-.03em;padding:14px 20px;border-radius:16px;background:var(--paper-2)}
.prices span:nth-child(2){background:color-mix(in srgb,var(--yellow) 35%,var(--paper))}
.prices span:nth-child(3){background:var(--ink);color:var(--paper)}
.q2{font-size:clamp(34px,4vw,64px);margin-top:clamp(28px,4vw,56px)}
.wd-market-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);margin-top:28px;align-items:start}
.wd-market .four{font:700 clamp(28px,3vw,48px)/1.08 var(--display);letter-spacing:-.04em;margin-top:8px}
.wd-market .four .s{color:var(--emerald)}
.twice{margin-top:clamp(36px,4vw,56px);padding:20px 24px;border-left:4px solid var(--orange);background:var(--paper-2);border-radius:0 16px 16px 0;font-size:clamp(18px,1.5vw,22px);max-width:60ch}
@media (max-width:860px){.wd-market-grid{grid-template-columns:minmax(0,1fr)}}

/* problems: cards stack as you scroll */
.wd-probs h2{font-size:clamp(44px,5.6vw,96px);margin-top:16px;max-width:15ch}
.wd-probs .stack{margin-top:clamp(36px,4vw,56px);display:flex;flex-direction:column;gap:22px}
.pcard2{position:sticky;top:calc(100px + var(--k,0)*18px);display:grid;grid-template-columns:72px minmax(0,6fr) minmax(0,6fr);gap:clamp(18px,3vw,48px);padding:clamp(24px,3vw,44px);border-radius:28px;background:var(--paper-2);border:1px solid var(--line);box-shadow:0 -24px 50px -40px rgba(var(--shadow),.45);min-height:min(56vh,440px)}
.pcard2:nth-child(1){--k:0}.pcard2:nth-child(2){--k:1;background:color-mix(in srgb,var(--yellow) 22%,var(--paper))}.pcard2:nth-child(3){--k:2;background:color-mix(in srgb,var(--orange) 16%,var(--paper))}.pcard2:nth-child(4){--k:3;background:color-mix(in srgb,var(--emerald) 14%,var(--paper))}.pcard2:nth-child(5){--k:4;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pcard2>.cap{color:var(--orange-ink);font-size:14px}
.pcard2:nth-child(5)>.cap{color:var(--yellow)}
.pcard2 h3{font-size:clamp(28px,3vw,48px)}
.pcard2 h3 .s{color:var(--orange-ink)}
.pcard2:nth-child(5) h3 .s{color:var(--yellow)}
.pcard2>div{display:flex;flex-direction:column;gap:10px;font-size:clamp(16px,1.3vw,19px);color:inherit}
.pcard2>div p{opacity:.88}
@media (max-width:860px){.pcard2{grid-template-columns:minmax(0,1fr);position:relative;top:auto;min-height:0}}

/* design from the customer backwards */
.wd-diff h2{font-size:clamp(44px,5.6vw,96px);margin-top:16px;max-width:14ch}
.wd-diff .say{max-width:28ch}
.ok-wa{margin-top:28px;font:400 clamp(24px,2.4vw,38px)/1.2 var(--serif);font-style:italic;color:var(--on-ink)}
.ok-wa b{font-style:normal;font-family:var(--display);color:var(--yellow)}
.wd-diff-end{margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3vw,44px);border-top:1px solid rgba(246,244,239,.2);display:flex;flex-direction:column;gap:14px;max-width:60ch;color:var(--on-ink)}
.small-s{font:400 clamp(22px,2vw,30px)/1.2 var(--serif);font-style:italic}
.wd-diff-end .big,.wd-vs-end .big{font-size:clamp(40px,5vw,84px);color:var(--paper)}
.wd-vs-end .big{color:var(--ink)}

/* barber */
.wd-barber-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
.wd-barber h2{font-size:clamp(40px,4.8vw,80px);margin-top:16px}
.did{display:flex;flex-direction:column;gap:4px;margin:16px 0}
.did li{font:600 clamp(20px,1.8vw,28px)/1.2 var(--display);letter-spacing:-.02em}
.barber{position:relative;padding:clamp(28px,3vw,44px);border-radius:28px;background:var(--yellow);display:flex;flex-direction:column;gap:12px;font-size:clamp(17px,1.35vw,20px)}
.barber .scissors{width:64px;height:64px;color:var(--ink);transform:rotate(-12deg)}
.barber .d{font-size:clamp(30px,3vw,48px);margin-top:6px}
.barber .d .s{color:var(--emerald)}
.barber .hold{font:400 clamp(22px,2vw,30px)/1.2 var(--serif);font-style:italic}
.barber .hold b{font-family:var(--display);font-style:normal}
@media (max-width:860px){.wd-barber-grid{grid-template-columns:minmax(0,1fr)}}

/* 1,000+ on emerald */
.wd-k .ab-num span{-webkit-text-stroke-color:var(--yellow)}
.wd-k-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);margin-top:clamp(28px,4vw,56px);color:var(--on-emerald)}
.wd-k-grid>div{display:flex;flex-direction:column;gap:10px}
.wd-k-grid b{color:var(--paper)}
.pat{border-top:1px solid rgba(246,244,239,.25)}
.pat li{font:600 clamp(20px,1.9vw,30px)/1.15 var(--display);letter-spacing:-.025em;padding-block:14px;border-bottom:1px solid rgba(246,244,239,.14);color:var(--paper)}
.pat li:last-child{color:var(--yellow)}
.human{margin-top:clamp(36px,4vw,56px);font:600 clamp(26px,3vw,46px)/1.12 var(--display);letter-spacing:-.035em;color:var(--paper);max-width:24ch}
@media (max-width:860px){.wd-k-grid{grid-template-columns:minmax(0,1fr)}}

/* purpose */
.purpose{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,52px)}
.purpose>div{padding:26px;border-radius:24px;background:var(--paper-2);display:flex;flex-direction:column;gap:10px}
.purpose>div:last-child{grid-column:span 3;background:var(--ink);color:var(--paper)}
.purpose>div:last-child p{color:var(--on-ink)}.purpose>div:last-child b{color:var(--yellow)}
.purpose .cap{color:var(--orange-ink)}.purpose>div:last-child .cap{color:var(--yellow)}
.purpose h3{font:700 clamp(22px,2vw,30px)/1.1 var(--display);letter-spacing:-.03em}
.purpose p{color:var(--ink-2);font-size:16px}
@media (max-width:960px){.purpose{grid-template-columns:repeat(2,minmax(0,1fr))}.purpose>div:last-child{grid-column:span 2}}
@media (max-width:560px){.purpose{grid-template-columns:minmax(0,1fr)}.purpose>div:last-child{grid-column:auto}}

/* types */
.wd-types h2{font-size:clamp(40px,4.8vw,80px);margin-top:16px}
.types{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(28px,3vw,44px) 0 24px}
.types li{font:600 clamp(16px,1.3vw,19px)/1 var(--body);padding:13px 18px;border-radius:999px;border:1.5px solid var(--ink);transition:background .3s,color .3s}
.types li:hover{background:var(--ink);color:var(--paper)}
.types li:nth-child(4n+1){background:var(--yellow);border-color:var(--yellow)}
.types li:nth-child(4n+1):hover{background:var(--ink);border-color:var(--ink)}

/* how we work: vertical flow */
.wd-steps-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.wd-steps-head{position:sticky;top:110px}
.wd-steps h2{font-size:clamp(40px,4.8vw,80px)}
.flow{position:relative;border-left:2px solid var(--line);padding-left:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px)}
.flow li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.flow .n{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--mono);background:var(--paper);border:1.5px solid var(--ink);margin-left:calc(-1 * clamp(20px,3vw,40px) - 27px)}
.flow li:last-child .n{background:var(--yellow);border-color:var(--yellow)}
.flow h3{font:700 clamp(22px,2vw,30px)/1.1 var(--display);letter-spacing:-.03em}
.flow p{color:var(--ink-2);margin-top:6px}
@media (max-width:860px){.wd-steps-grid{grid-template-columns:minmax(0,1fr)}.wd-steps-head{position:relative;top:auto}}

/* pricing */
.wd-price h2{font-size:clamp(44px,5.6vw,96px);margin-top:16px}
.wd-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:28px;color:var(--on-ink);font-size:clamp(17px,1.35vw,20px)}
.wd-price-grid>div{display:flex;flex-direction:column;gap:10px}
.wd-price-grid b{color:var(--paper)}
.wd-price .mid{font:400 clamp(24px,2.2vw,34px)/1.15 var(--serif);font-style:italic;color:var(--yellow)}
.tablewrap{margin-top:clamp(32px,4vw,52px);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:20px}
.ptable,.vtable{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.ptable th,.ptable td,.vtable th,.vtable td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(246,244,239,.14);vertical-align:top}
.ptable thead th{font:700 18px/1.1 var(--display);letter-spacing:-.02em;color:var(--yellow);border-bottom:1.5px solid rgba(246,244,239,.4)}
.ptable tbody th{font-weight:600;color:var(--paper);width:26%}
.ptable td{color:var(--on-ink)}
.ptable .tbd{color:rgba(246,244,239,.45);font-style:italic}
.tnote{margin-top:16px;color:var(--on-ink);font-size:15px}
@media (max-width:860px){.wd-price-grid{grid-template-columns:minmax(0,1fr)}}
/* comparison: fair, with Lucian's column highlighted */
.wd-vs h2{font-size:clamp(44px,5.6vw,96px);margin-top:16px}
.vtable{background:var(--paper)}
.vtable th,.vtable td{border-bottom:1px solid var(--line)}
.vtable thead th{font:700 16px/1.15 var(--display);letter-spacing:-.02em;border-bottom:1.5px solid var(--ink)}
.vtable tbody th{font-weight:600;width:22%}
.vtable td{color:var(--ink-2)}
.vtable .me{background:color-mix(in srgb,var(--yellow) 26%,var(--paper));color:var(--ink);font-weight:600}
.vtable thead .me{background:var(--yellow)}
.wd-vs-end{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,72px);align-items:end}
.wd-vs-end>div{display:flex;flex-direction:column;gap:10px;color:var(--ink-2)}
.wd-vs-end .big .s{color:var(--orange-ink)}
@media (max-width:860px){.wd-vs-end{grid-template-columns:minmax(0,1fr)}}

/* ownership + after launch */
.wd-own-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:start}
.wd-own h2,.wd-after h2{font-size:clamp(40px,4.8vw,80px);margin-top:16px}
.wd-own h2 .s{color:var(--orange-ink)}
.wd-own .big-q,.wd-after .big-q{font:400 clamp(24px,2.2vw,34px)/1.2 var(--serif);font-style:italic}
.wd-own-grid>div{display:flex;flex-direction:column;gap:12px}
.owns{display:flex;flex-wrap:wrap;gap:8px}
.owns li{padding:10px 16px;border-radius:999px;background:var(--paper-2);font-weight:600}
.wd-own .good{font:700 clamp(22px,2vw,30px)/1.15 var(--display);letter-spacing:-.025em;color:var(--emerald)}
.wd-after .wd-own-grid>div{color:var(--on-emerald)}
.wd-after .big-q{color:var(--paper)}
.wd-after b{color:var(--yellow)}
.bubble{align-self:flex-start;background:#d9fdd3;color:#111;padding:12px 16px;border-radius:16px 16px 16px 4px;font-size:18px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
@media (max-width:860px){.wd-own-grid{grid-template-columns:minmax(0,1fr)}}
.faq .a a{color:var(--orange-ink);font-weight:600}

/* ===== BUSINESS WEBSITE DESIGN v2: calm, structured, one idea per section ===== */
.w2-head{display:flex;flex-direction:column;gap:14px;max-width:900px}
.w2-head h2,.w2-market h2{font-size:clamp(40px,5vw,84px)}
.wrap.narrow{max-width:980px}
/* hero: headline, one line, two buttons */
.w2-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:calc(130px + env(safe-area-inset-top,0px)) 0 clamp(48px,9vh,104px);overflow:hidden}
.w2-hero .bgimg{position:absolute;inset:0}
.w2-hero .bgimg img{width:100%;height:100%;object-fit:cover;object-position:78% 40%}
.w2-hero .fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,rgba(246,244,239,.96) 34%,rgba(246,244,239,.4) 60%,rgba(246,244,239,0) 80%),linear-gradient(0deg,var(--paper) 0%,rgba(246,244,239,0) 25%)}
.w2-hero-in{position:relative;width:100%}
.w2-hero .h1-tag{color:var(--orange-ink);font-weight:500;letter-spacing:.14em}
.w2-hero .big{font-size:clamp(44px,6vw,104px);max-width:14ch;margin-top:18px}
.w2-hero .big.alt{margin-top:4px}
.w2-hero .big .s{color:var(--orange-ink)}
.w2-hero .lede{margin-top:clamp(22px,3vw,34px);font-size:clamp(17px,1.4vw,21px);color:var(--ink-2);max-width:46ch}
.w2-hero .ab-row{margin-top:26px}
@media (max-width:860px){.w2-hero .fade{background:linear-gradient(0deg,var(--paper) 0%,rgba(246,244,239,.96) 58%,rgba(246,244,239,.55) 85%,rgba(246,244,239,.3) 100%)}}
/* market: centred, calm */
.w2-market .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.w2-market .eyebrow{justify-content:center}
.w2-market h2{margin-top:16px;max-width:16ch}
.w2-market .prices{justify-content:center;margin:32px 0 6px}
.w2-market .prices span{font-size:clamp(16px,1.5vw,22px);padding:11px 18px}
.w2-market .q{font:400 clamp(28px,3vw,46px)/1.15 var(--serif);font-style:italic;margin-top:28px}
.w2-market .lead{margin-top:14px;max-width:56ch}
.w2-market .twice{margin-top:30px;text-align:left}
/* problems: tabs */
.tabs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);margin-top:clamp(32px,4vw,52px);align-items:start}
.tab-list{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.tab-list button{display:flex;gap:16px;align-items:baseline;text-align:left;padding:18px 4px;background:none;border:0;border-bottom:1px solid var(--line);font:600 clamp(18px,1.6vw,24px)/1.2 var(--display);letter-spacing:-.02em;color:var(--muted);cursor:pointer;transition:color .3s,padding .4s var(--ease)}
.tab-list button .cap{color:inherit}
.tab-list button:hover{color:var(--ink)}
.tab-list button[aria-selected="true"]{color:var(--ink);padding-left:14px;box-shadow:inset 3px 0 0 var(--orange)}
.tab-panels{position:sticky;top:110px}
.tab-panel{padding:clamp(26px,3vw,44px);border-radius:28px;background:var(--paper-2);display:flex;flex-direction:column;gap:14px;min-height:260px}
.tab-panel .tp-t{font:700 clamp(28px,3vw,46px)/1.02 var(--display);letter-spacing:-.04em}
.tab-panel p:not(.tp-t){font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);line-height:1.6}
.tab-panel b{color:var(--ink)}
@media (max-width:860px){.tabs{grid-template-columns:minmax(0,1fr)}.tab-panels{position:relative;top:auto}}
/* how I design */
.w2-how .say{margin-top:clamp(28px,4vw,48px);max-width:30ch}
.w2-how-end{margin-top:clamp(40px,5vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid rgba(246,244,239,.2);color:var(--on-ink)}
.w2-how-end .d{font-size:clamp(36px,4.4vw,72px);color:var(--paper);margin-top:10px}
/* team + barber + compare */
.w2-team-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.w2-team-grid>div:first-child{display:flex;flex-direction:column;gap:18px}
.w2-team h2{font-size:clamp(40px,4.8vw,80px);margin-top:4px}
.w2-team h2 .s{color:var(--orange-ink)}
.getme{font:700 clamp(26px,2.6vw,40px)/1.05 var(--display);letter-spacing:-.04em}
.getme .s{color:var(--emerald)}
.w2-team .barber .d{font-size:clamp(26px,2.4vw,38px)}
.cmp{margin-top:clamp(36px,4vw,56px);border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.cmp summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:600 clamp(19px,1.7vw,24px)/1.2 var(--display);letter-spacing:-.02em}
.cmp summary::-webkit-details-marker{display:none}
.cmp summary em{font:400 1em/1 var(--serif);font-style:italic;color:var(--orange-ink);margin-left:8px}
.cmp summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);position:relative}
.cmp summary i::before,.cmp summary i::after{content:"";position:absolute;left:8px;right:8px;top:14px;height:1.5px;background:var(--ink)}
.cmp summary i::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.cmp[open] summary i{background:var(--yellow);border-color:var(--yellow)}
.cmp[open] summary i::after{transform:rotate(0)}
.cmp .tablewrap{margin-top:0}
.cmp-note{padding:16px 0 24px;color:var(--muted)}
@media (max-width:860px){.w2-team-grid{grid-template-columns:minmax(0,1fr)}}
/* what your website should do */
.dolist{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,80px);margin-top:clamp(32px,4vw,52px);border-top:1.5px solid var(--ink)}
.dolist li{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding-block:20px;border-bottom:1px solid var(--line)}
.dolist .cap{color:var(--orange-ink);grid-row:span 2;padding-top:5px}
.dolist strong{font:700 clamp(20px,1.8vw,26px)/1.15 var(--display);letter-spacing:-.025em}
.dolist em{font-style:normal;color:var(--ink-2)}
.dolist li:last-child{grid-column:1/-1}
.w2-types{margin-top:clamp(32px,4vw,52px);display:flex;flex-direction:column;gap:12px}
.types.sm{margin:0}
.types.sm li{font-size:14px;padding:9px 14px;border-width:1px}
@media (max-width:760px){.dolist{grid-template-columns:minmax(0,1fr)}}
/* process: one compact row */
.flowrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,52px);counter-reset:none}
.flowrow li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--line)}
.flowrow li:last-child{border-top-color:var(--orange)}
.flowrow .n{font:600 13px/1 var(--mono);color:var(--orange-ink)}
.flowrow strong{font:700 clamp(18px,1.4vw,22px)/1.1 var(--display);letter-spacing:-.02em}
.flowrow em{font-style:normal;font-size:14.5px;color:var(--ink-2);line-height:1.45}
@media (max-width:1000px){.flowrow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:24px}}
@media (max-width:560px){.flowrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* money */
.w2-money-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
.w2-money-grid>div:first-child{display:flex;flex-direction:column;gap:18px}
.w2-money .lead{color:var(--on-ink)}.w2-money .lead b{color:var(--paper)}
.sayang-card{padding:clamp(26px,3vw,44px);border-radius:28px;background:var(--yellow);color:var(--ink);display:flex;flex-direction:column;gap:14px}
.sayang-card .cap{color:var(--ink);opacity:.7}
.sayang-card .d{font-size:clamp(28px,2.8vw,44px)}
.sayang-card .d .s{color:var(--emerald)}
@media (max-width:860px){.w2-money-grid{grid-template-columns:minmax(0,1fr)}}
/* trust: own + after launch, side by side */
.w2-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,104px);align-items:start}
.w2-trust-grid>div{display:flex;flex-direction:column;gap:16px}
.w2-trust-grid>div+div{padding-left:clamp(0px,3vw,48px);border-left:1px solid var(--line)}
.w2-trust h2{font-size:clamp(36px,3.8vw,60px)}
.w2-trust h2 .s{color:var(--orange-ink)}
@media (max-width:860px){.w2-trust-grid{grid-template-columns:minmax(0,1fr)}.w2-trust-grid>div+div{padding-left:0;border-left:0;padding-top:36px;border-top:1px solid var(--line)}}
/* faq: heading left, questions right */
.w2-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);align-items:start}
.w2-faq-head{position:sticky;top:110px}
.w2-faq h2{font-size:clamp(36px,3.8vw,60px);margin-top:14px}
.w2-faq .faq{margin-top:0}
@media (max-width:860px){.w2-faq-grid{grid-template-columns:minmax(0,1fr)}.w2-faq-head{position:relative;top:auto}}
.tab-panel[hidden]{display:none}
.tab-panel:not([hidden]){animation:tabin .45s var(--ease)}
@keyframes tabin{from{opacity:0;transform:translateY(12px)}}
.w2-money h2{font-size:clamp(40px,5vw,84px)}

/* ===== Comparison + price tables v2: raised featured column, calm rows ===== */
.cmp2{margin-top:clamp(56px,7vw,104px)}
.cmp2-head{display:flex;flex-direction:column;gap:14px;max-width:760px}
.cmp2-head h3{font-size:clamp(36px,4.2vw,68px)}
.cmp2-head h3 .s{color:var(--orange-ink)}
.ctwrap{margin-top:clamp(28px,3.5vw,48px);overflow-x:auto;-webkit-overflow-scrolling:touch;padding:22px 2px 6px}
.ctab{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:15.5px}
.ctab th,.ctab td{padding:18px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.ctab thead th{border-bottom:1.5px solid var(--ink);vertical-align:bottom;padding-top:22px}
.ctab .lab{width:24%;font-weight:600;color:var(--ink);position:sticky;left:0;z-index:1;background:var(--paper)}
.ctab thead .lab span{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ctab .who{display:block;font:700 clamp(17px,1.4vw,21px)/1.15 var(--display);letter-spacing:-.02em}
.ctab td{color:var(--ink-2)}
.ctab tbody tr{transition:background .25s}
.ctab tbody tr:hover td:not(.me),.ctab tbody tr:hover .lab{background:var(--paper-2)}
/* the featured column: a raised navy card running down the table */
.ctab .me{background:var(--ink);color:var(--paper);border-bottom-color:rgba(246,244,239,.12);font-weight:600;box-shadow:12px 0 30px -24px rgba(var(--shadow),.6),-12px 0 30px -24px rgba(var(--shadow),.6)}
.ctab thead .me{border-radius:22px 22px 0 0;border-bottom-color:rgba(246,244,239,.25);position:relative;padding-top:34px}
.ctab tbody tr:last-child .me{border-radius:0 0 22px 22px;border-bottom:0}
.ctab thead .me .who{color:var(--yellow);font-size:clamp(20px,1.8vw,26px)}
.ctab .tag{position:absolute;top:-12px;left:20px;background:var(--yellow);color:var(--ink);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.ctab tbody tr:last-child th,.ctab tbody tr:last-child td{border-bottom:0}
/* price table sits in a warm-white card on the navy band */
.pricebox{margin-top:clamp(40px,5vw,72px);background:var(--paper);color:var(--ink);border-radius:28px;padding:clamp(22px,3vw,40px)}
.pricebox-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.pricebox-head .cap{color:var(--orange-ink)}
.pricebox-head .soon{color:var(--muted);font-size:15px;max-width:52ch}
.pricebox .ctwrap{margin-top:8px}
.ptab thead th:not(.lab){vertical-align:top}
.ptab .pn{display:block;font:700 clamp(18px,1.5vw,22px)/1.1 var(--display);letter-spacing:-.02em}
.ptab .pp{display:block;margin:8px 0 14px;font:400 clamp(20px,1.8vw,28px)/1.1 var(--serif);font-style:italic;color:var(--emerald)}
.ptab thead .btn.sm{min-height:38px;padding:0 14px;font-size:13px;background:var(--ink);border-color:var(--ink)}
.ptab thead .btn.sm:hover{background:var(--orange);border-color:var(--orange)}
.ptab .tbd{color:var(--line);font-size:20px;line-height:1}
.ptab .rec{background:var(--yellow);border-radius:20px 20px 0 0}
@media (max-width:760px){.ctab th,.ctab td{padding:14px 14px}.ctab .lab{width:auto;min-width:150px}}
.ctab{table-layout:fixed}.ctab .lab{width:25%}
/* Phones: each table row becomes a small card (question on top, three labelled answers side by side) */
@media (max-width:760px){
  .ctwrap{overflow:visible;padding:14px 0 0}
  .ctab{min-width:0;display:block;table-layout:auto}
  .ctab thead,.ctab tbody{display:block}
  .ctab tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ctab thead .lab,.cmp2 .ctab thead{display:none}
  .ctab tbody tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .ctab tbody tr:hover td:not(.me),.ctab tbody tr:hover .lab{background:none}
  .ctab th,.ctab td{display:block;padding:0;border:0!important;box-shadow:none!important;border-radius:0!important}
  .ctab tbody .lab{grid-column:1/-1;position:static;background:none;width:auto;min-width:0;font-size:15px;margin-bottom:4px}
  .ctab td{font-size:13.5px;line-height:1.35;padding:10px 10px;border-radius:12px!important;background:var(--paper-2)}
  .ctab td::before{content:attr(data-l);display:block;font:500 9.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
  .ctab td.me{background:var(--ink);color:var(--paper)}
  .ctab td.me::before{color:var(--yellow)}
  /* price table: package headers become three mini cards on top */
  .ptab thead tr{gap:6px;padding-bottom:6px}
  .ptab thead th:not(.lab){display:flex;flex-direction:column;align-items:flex-start;padding:12px 10px;background:var(--paper-2);border-radius:14px!important}
  .ptab .pn{font-size:15px}.ptab .pp{font-size:16px;margin:6px 0 10px}
  .ptab thead .btn.sm{min-height:34px;padding:0 10px;font-size:11.5px;white-space:normal;text-align:center}
  .ptab .tbd{font-size:16px;color:var(--muted)}
  .pricebox{padding:18px 14px}
}

/* ===== Device mockups (real client screens scroll inside as the page scrolls) ===== */

/* hero: words left, devices right */
.w2-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(120px + env(safe-area-inset-top,0px)) 0 clamp(48px,8vh,96px);background:radial-gradient(ellipse 60% 70% at 85% 45%,color-mix(in srgb,var(--yellow) 22%,var(--paper)) 0%,var(--paper) 70%)}
.w2-hero .bgimg,.w2-hero .fade{display:none}
.w2-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;width:100%}
.w2-hero .big{font-size:clamp(42px,5vw,88px)}
.w2-hero-devs{position:relative;padding:0 6% 8% 0}
@media (max-width:900px){.w2-hero-grid{grid-template-columns:minmax(0,1fr)}.w2-hero-devs{max-width:520px;margin-top:12px}}

/* problems: 3 x 2 grid with graphics */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(32px,4vw,52px)}
.pc3{display:flex;flex-direction:column;gap:12px;padding:14px 14px 26px;border-radius:26px;background:var(--paper-2);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pc3:hover{transform:translateY(-6px);box-shadow:0 30px 50px -36px rgba(var(--shadow),.45)}
.pc3-img{aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--paper-3)}
.pc3-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pc3:hover .pc3-img img{transform:scale(1.06)}
.pc3>.cap,.pc3 h3,.pc3>p{padding-inline:12px}
.pc3>.cap{color:var(--orange-ink);margin-top:6px}
.pc3 h3{font:700 clamp(22px,2vw,30px)/1.05 var(--display);letter-spacing:-.035em}
.pc3>p{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.pc3 b{color:var(--ink)}
.pc3.cta{background:var(--ink);color:var(--paper);padding:30px 26px;justify-content:center}
.pc3.cta>.cap,.pc3.cta h3,.pc3.cta>p{padding-inline:0}
.pc3.cta>.cap{color:var(--yellow)}
.pc3.cta h3{font-size:clamp(28px,2.6vw,40px)}
.pc3.cta h3 .s{color:var(--yellow);font-family:var(--serif);font-style:italic;font-weight:400}
.pc3.cta>p{color:var(--on-ink)}
.pc3.cta .btn{align-self:flex-start;margin-top:6px}
@media (max-width:960px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pgrid{grid-template-columns:minmax(0,1fr)}}

/* how I design: phone beside the words */
.w2-how-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:center}
.w2-how-dev{display:flex;justify-content:center}
@media (max-width:860px){.w2-how-grid{grid-template-columns:minmax(0,1fr)}.w2-how-dev .phone{width:200px}}

/* purpose list beside a laptop + tablet */
.w2-do-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:start;margin-top:clamp(32px,4vw,52px)}
.w2-do-grid .dolist{grid-template-columns:minmax(0,1fr);margin-top:0}
.w2-do-grid .dolist li:last-child{grid-column:auto}
.w2-do-dev{position:sticky;top:120px;padding:0 0 14% 12%}
.w2-do-dev .laptop{width:100%}
@media (max-width:860px){.w2-do-grid{grid-template-columns:minmax(0,1fr)}.w2-do-dev{position:relative;top:auto;max-width:520px}}

/* ===== Pricing & packages ===== */
.w2-pricing-head{display:flex;flex-direction:column;gap:14px;max-width:820px}
.w2-pricing h2{font-size:clamp(42px,5.4vw,92px)}
.w2-pricing h2 .s{color:var(--orange-ink)}
.pk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,4vw,56px);align-items:stretch}
.pk{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 24px 26px;border-radius:30px;background:var(--paper-2);border:1px solid var(--line);transform-style:preserve-3d;transition:box-shadow .5s var(--ease)}
.pk:hover{box-shadow:0 40px 70px -40px rgba(var(--shadow),.5)}
.pk-dev{height:210px;display:flex;align-items:flex-end;justify-content:center;border-radius:22px;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--yellow) 40%,var(--paper)) 0%,color-mix(in srgb,var(--yellow) 10%,var(--paper)) 70%);overflow:hidden;padding-top:22px}
.pk-dev .dev{filter:drop-shadow(0 20px 24px rgba(var(--shadow),.3))}
.pk-dev .phone{width:96px;margin-bottom:-60px}
.pk-dev .tablet{width:150px;margin-bottom:-70px}
.pk-dev .laptop{width:230px;margin-bottom:-6px}
.pk-name{color:var(--orange-ink);margin-top:8px}
.pk-price{font:800 clamp(38px,3.6vw,58px)/.95 var(--display);letter-spacing:-.05em}
.pk.dark .pk-price{font-size:clamp(30px,2.6vw,42px)}
.pk-spec{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pk-spec li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.pk-spec li>span{color:var(--muted)}
.pk-spec b{display:inline-flex;align-items:center;gap:10px}
.bars{display:inline-flex;gap:3px}
.bars i{display:block;width:6px;height:16px;border-radius:2px;background:var(--line)}
.bars i:nth-child(2){height:20px}.bars i:nth-child(3){height:24px}
.bars i.on{background:var(--orange)}
.pk-more{font-size:14px;color:var(--muted);font-style:italic}
.pk .btn{margin-top:auto;align-self:stretch}
/* the custom card: dark, with a slow glowing border = the "special effects" one */
.pk.dark{background:var(--ink);color:var(--paper);border-color:transparent;isolation:isolate}
.pk.dark::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:32px;background:conic-gradient(from var(--ang,0deg),var(--yellow),var(--orange),var(--emerald),var(--yellow));animation:spin 6s linear infinite}
.pk.dark::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:30px;background:var(--ink)}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.pk.dark .pk-dev{background:radial-gradient(ellipse at 50% 100%,rgba(242,183,5,.35) 0%,rgba(13,27,42,0) 70%)}
.pk.dark .pk-name{color:var(--yellow)}
.pk.dark .pk-price{color:var(--paper)}
.pk.dark .pk-spec,.pk.dark .pk-spec li{border-color:rgba(246,244,239,.16)}
.pk.dark .pk-spec li>span,.pk.dark .pk-more{color:var(--on-ink)}
.pk.dark .bars i{background:rgba(246,244,239,.2)}.pk.dark .bars i.on{background:var(--yellow)}
.pk-swipe{display:none}
@media (prefers-reduced-motion:reduce){.pk.dark::before{animation:none}}
/* phones: swipe left / right through the packages */
@media (max-width:860px){
  .pk-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1 * var(--gut));padding:6px var(--gut) 18px;scrollbar-width:none}
  .pk-row::-webkit-scrollbar{display:none}
  .pk{flex:0 0 82%;scroll-snap-align:center}
  .pk-swipe{display:block;margin-top:6px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
}

/* ===== Portfolio showcase: minimalist 3 x 2 grid (all screens). No tint, no radius, no hover/mouse effects. ===== */
.pgal .sec-h{margin-bottom:clamp(28px,4vw,52px)}
.pgal .sec-h h2{font-size:clamp(40px,5vw,84px)}
.pgrid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(16px,2.4vw,36px)}
.proj.pg{width:auto;flex:none;cursor:zoom-in;gap:12px}
.proj.pg .rv{aspect-ratio:1/1;background:transparent;border-radius:0;--r:0px}
.proj.pg .rv img{object-fit:contain;padding:0;transform:none!important;transition:none}
.proj.pg:hover .rv img{transform:none}
.proj.pg .t{flex-direction:column;align-items:flex-start;gap:4px}
.proj.pg .t strong{font-size:clamp(18px,1.6vw,26px)}
@media (max-width:760px){
  .pgrid6{gap:20px 10px}
  .proj.pg .t strong{font-size:13px;letter-spacing:-.01em}
  .proj.pg .t .cap{font-size:8.5px;letter-spacing:.06em}
}
/* phones only: portfolio grid becomes 2 columns x 3 rows (Lucian, Oct 2026) */
@media (max-width:760px){.pgrid6{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.proj.pg .t strong{font-size:16px}.proj.pg .t .cap{font-size:10px}}

/* ===== WORK page: image portfolio grid + "View more" + text client wall ===== */
.pgrid6 .proj.gone{display:none}
.more-row{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.more-btn .more-n{color:var(--muted);font-weight:500}
.wk-hero h1.eyebrow{font-size:12px;color:var(--orange-ink)}
.wk-hero .wk-big{font-size:clamp(54px,8vw,140px);line-height:.95}
.wk-hero .lead b{color:var(--ink)}
.wk-stat{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2)}
.wk-stat strong{display:block;font:800 clamp(56px,6vw,96px)/.9 var(--display);letter-spacing:-.05em;color:var(--orange-ink)}
.cw .sec-h h2{font-size:clamp(38px,4.6vw,76px);max-width:16ch}
.cw .sec-h .lead{max-width:44ch}
/* earlier customers: one flowing block of names, wraps on any screen */
.cwall{margin-top:clamp(28px,3.5vw,44px);border-top:1.5px solid var(--ink);padding-top:20px;display:flex;flex-wrap:wrap;gap:6px 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.cwall li{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cwall li:not(:last-child)::after{content:"·";margin:0 .7em;color:var(--orange)}
@media (max-width:760px){.cwall{font-size:12.5px}.cwall li:not(:last-child)::after{margin:0 .55em}}
#cw[hidden]{display:none}

/* ===== Website Redesign / Revamp page ===== */
.touch{display:none}
@media (hover:none){.fine{display:none}.touch{display:inline}}
.rv-hero{padding:calc(140px + env(safe-area-inset-top,0px)) 0 clamp(48px,7vw,96px)}
.rv-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.rv-hero .h1-tag{color:var(--orange-ink);font-weight:500;letter-spacing:.14em}
.rv-hero .big{font-size:clamp(44px,6vw,104px);max-width:13ch;margin-top:18px}
.rv-hero .big.alt{margin-top:6px}
.rv-hero .big .s{color:var(--orange-ink)}
.rv-hero-side{display:flex;flex-direction:column;gap:18px}
.rv-hero .lede{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:44ch}
.rv-hero .lede b{color:var(--ink)}
.rv-grew{display:flex;flex-wrap:wrap;gap:4px 14px;font:600 clamp(17px,1.4vw,21px)/1.3 var(--display);letter-spacing:-.02em}
.rv-grew li{position:relative;padding-left:16px}
.rv-grew li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--emerald)}
.rv-hero .ab-row{margin-top:8px}

/* before / after comparison */
.rv-first-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.5vw,32px)}
.rv-first-head h2{font-size:clamp(34px,4vw,64px);max-width:18ch}
.rv-how{display:flex;align-items:center;gap:10px}
.rv-how::before{content:"← →";color:var(--orange-ink);letter-spacing:.2em}
.ba{position:relative;margin:0}
.ba-frame{border-radius:20px;overflow:hidden;background:var(--ink);box-shadow:0 40px 80px -50px rgba(var(--shadow),.55)}
.ba-bar{display:flex;gap:6px;padding:11px 14px;background:var(--ink)}
.ba-bar i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--paper) 30%,var(--ink))}
.ba-view{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper-3);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba.big .ba-view{aspect-ratio:16/9}
.ba-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
/* BEFORE sits on the left, clipped at --x; a soft feathered edge instead of a hard cut */
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-before img{filter:saturate(.75)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px rgba(13,27,42,.15),0 0 30px 6px rgba(246,244,239,.55)}
.ba-knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font:700 18px/1 var(--display);letter-spacing:.1em;box-shadow:0 12px 30px -10px rgba(13,27,42,.55);transition:transform .4s var(--ease)}
.ba-view:hover .ba-knob,.ba.drag .ba-knob,.ba:focus-within .ba-knob{transform:scale(1.1)}
.ba-tag{position:absolute;top:14px;padding:7px 12px;border-radius:999px;font-size:11px;letter-spacing:.14em;transition:opacity .4s}
.ba-tag.l{left:14px;background:var(--ink);color:var(--paper)}
.ba-tag.r{right:14px;background:var(--yellow);color:var(--ink)}
.ba[data-side="after"] .ba-tag.l,.ba[data-side="before"] .ba-tag.r{opacity:.35}
.ba-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ba:focus-within .ba-frame{outline:3px solid var(--orange);outline-offset:4px}
.ba figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:16px}
.ba figcaption strong{font:700 clamp(20px,1.8vw,26px)/1.1 var(--display);letter-spacing:-.03em}
.ba figcaption em{flex-basis:100%;font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);color:var(--ink-2)}
.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(20px,3vw,44px);margin-top:clamp(32px,4vw,56px)}
/* placeholder until Lucian sends the screenshots */
.ba-pend{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1.5px dashed var(--line)}
.ba-pend.big{aspect-ratio:16/8.4}
.ba-side{background:var(--paper-3);padding:16px}
.ba-side.r{background:color-mix(in srgb,var(--yellow) 22%,var(--paper));text-align:right;border-left:2px solid var(--paper)}
.ba-side .cap{color:var(--ink-2)}
.ba-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(80%,360px);padding:22px 24px;border-radius:18px;background:var(--paper);text-align:center;display:flex;flex-direction:column;gap:6px;box-shadow:0 20px 50px -30px rgba(var(--shadow),.5)}
.ba-note .cap{color:var(--orange-ink)}
.ba-note strong{font:700 clamp(20px,2vw,28px)/1.1 var(--display);letter-spacing:-.03em}
.ba-note p{font-size:14.5px;color:var(--ink-2)}

/* don't be ashamed */
.rv-shame-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:start}
.rv-shame h2{font-size:clamp(36px,4.4vw,72px)}
.rv-shame .lead{margin-top:18px}
.rv-story{display:flex;flex-direction:column;gap:18px}
.rv-beats{font:600 clamp(24px,2.6vw,38px)/1.2 var(--display);letter-spacing:-.03em}
.rv-story .lead{margin-top:0}
.bubble.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-radius:16px 16px 4px 16px}
.rv-time{font:700 clamp(24px,2.4vw,36px)/1.15 var(--display);letter-spacing:-.03em;margin-top:10px}
.rv-time .s{color:var(--orange-ink)}

/* real cost */
.rv-cost h2{font-size:clamp(38px,5vw,84px);max-width:16ch;margin-top:14px}
.rv-cost .lead{margin-top:24px;color:var(--on-ink)}
.rv-dont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;max-width:900px}
.rv-dont li{padding:16px 20px;border-radius:16px;border:1px solid color-mix(in srgb,var(--paper) 18%,var(--ink));font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.7vw,24px);text-decoration:line-through;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.rv-today{font:600 clamp(24px,2.8vw,42px)/1.2 var(--display);letter-spacing:-.03em;margin-top:clamp(40px,5vw,72px);max-width:24ch}
.rv-punch{font-size:clamp(34px,4.4vw,72px);margin-top:18px;max-width:18ch}

/* keep / improve / remove */
.rv-keep-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.rv-keep h2{font-size:clamp(38px,4.6vw,76px);margin-top:14px}
.rv-keep .lead{margin-top:20px}
.rv-chips{margin:22px 0 0}
.rv-chips li{background:color-mix(in srgb,var(--paper) 12%,var(--emerald));color:var(--paper);border-color:transparent}
.rv-kir{display:flex;flex-direction:column}
.rv-kir p{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:1px solid color-mix(in srgb,var(--paper) 25%,var(--emerald));font:600 clamp(22px,2.2vw,32px)/1.15 var(--display);letter-spacing:-.03em}
.rv-kir p .cap{color:var(--yellow);font-weight:500}
.rv-kir p.rv-kir-end{border:0;font:400 17px/1.6 var(--body);letter-spacing:0;color:var(--on-emerald)}
.rv-kir-end b{color:var(--paper)}

.rv-gallery .lead{margin-top:6px}

/* ===== Image placeholder (no AI people / computer stills, Lucian Oct 2026) ===== */
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:120px;padding:16px;text-align:center;background:var(--paper-3) repeating-linear-gradient(-45deg,transparent 0 14px,color-mix(in srgb,var(--ink) 4%,transparent) 14px 28px);color:var(--muted);font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.wide-img .ph{aspect-ratio:21/9}
.ph.r43{aspect-ratio:4/3;height:auto;border-radius:18px}
.srow .ph{display:none}

/* ===== Google Ads page (v2: simple) ===== */
.ga-hero{padding:calc(130px + env(safe-area-inset-top,0px)) 0 clamp(56px,8vw,110px);background:radial-gradient(ellipse 55% 65% at 78% 50%,color-mix(in srgb,var(--yellow) 20%,var(--paper)) 0%,var(--paper) 72%)}
.ga-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.ga-hero .h1-tag{color:var(--orange-ink);font-weight:500;letter-spacing:.14em}
.ga-hero .big{font-size:clamp(42px,5.4vw,92px);max-width:14ch;margin-top:18px}
.ga-hero .big .s{color:var(--orange-ink)}
.ga-hero .lede{margin-top:18px;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--ink-2);max-width:40ch}
.ga-hero .lede b{color:var(--ink)}
.ga-hero .ab-row{margin-top:28px}
.ga-hero-phone{display:flex;justify-content:center}
/* the search phone (original UI, not a copy of Google's) */
.gphone{width:min(330px,100%);aspect-ratio:9/17;border-radius:48px;padding:11px;background:var(--ink);box-shadow:0 60px 100px -50px rgba(var(--shadow),.6),inset 0 0 0 2px color-mix(in srgb,var(--paper) 18%,var(--ink))}
.gp-screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:var(--paper);padding:44px 14px 14px;display:flex;flex-direction:column;gap:14px}
.gp-screen::before{content:"";position:absolute;top:12px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:20px;background:var(--ink)}
.gp-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:999px;background:var(--paper);box-shadow:0 6px 20px -10px rgba(var(--shadow),.45),inset 0 0 0 1px var(--line);font-size:16px;color:var(--ink);min-height:48px}
.gp-bar svg{flex:none;color:var(--muted)}
.gp-q{white-space:nowrap;overflow:hidden}
.gp-caret{width:2px;height:18px;background:var(--orange);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gp-res{display:flex;flex-direction:column;gap:10px;transition:opacity .5s,transform .6s var(--ease)}
.gphone[data-st="0"] .gp-res{opacity:0;transform:translateY(14px)}
.gp-ad{position:relative;padding:14px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .5s,transform .5s var(--ease)}
.gp-spons{font:600 10.5px/1 var(--body);color:var(--ink)}
.gp-ad-h{display:flex;gap:8px;align-items:center;margin:8px 0 6px}
.gp-fav{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--yellow);font:700 12px/1 var(--display);color:var(--ink)}
.gp-ad-h b{display:block;font:700 15px/1.15 var(--display);color:var(--ink)}
.gp-ad-h small{font-size:11px;color:var(--muted)}
.gp-d{font-size:12px;line-height:1.4;color:var(--ink-2)}
.gp-btns{display:flex;gap:6px;margin-top:10px}
.gp-btns span{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:11px;color:var(--ink-2)}
.gp-btns .wa{background:var(--emerald);color:var(--paper);box-shadow:none}
.gp-tap{position:absolute;left:36%;bottom:14px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:color-mix(in srgb,var(--ink) 30%,transparent);opacity:0;transform:scale(.4)}
.gp-you{position:absolute;top:-12px;right:12px;padding:6px 10px;border-radius:999px;background:var(--yellow);color:var(--ink);font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.gp-org{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--paper-2);transition:opacity .5s}
.gp-org i{display:block;height:7px;border-radius:4px;background:var(--paper-3)}
.gp-org i.s{width:60%}
.gp-who{font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gphone[data-st="2"] .gp-ad,.gphone[data-st="3"] .gp-ad{box-shadow:0 0 0 3px var(--yellow),0 18px 40px -20px rgba(var(--shadow),.6);transform:scale(1.03)}
.gphone[data-st="2"] .gp-you,.gphone[data-st="3"] .gp-you{opacity:1;transform:none}
.gphone[data-st="2"] .gp-org,.gphone[data-st="3"] .gp-org{opacity:.35}
.gphone[data-st="3"] .gp-tap{animation:tap 1.1s var(--ease) .1s}
@keyframes tap{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
.gp-chat{position:absolute;left:12px;right:12px;bottom:14px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:var(--ink);color:var(--paper);font-size:14px;line-height:1.4;box-shadow:0 20px 40px -18px rgba(var(--shadow),.7);opacity:0;transform:translateY(30px);transition:opacity .5s .5s,transform .6s var(--ease) .5s}
.gp-from{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}
.gphone[data-st="3"] .gp-chat{opacity:1;transform:none}
/* shared: one big plain heading per section, lots of space */
.ga-h2{font-size:clamp(40px,5vw,84px);max-width:16ch}
.ga-h2 .s{color:var(--orange-ink)}
.band .ga-h2 .s{color:var(--yellow)}
.ga-say{margin-top:clamp(28px,3.5vw,48px);font:600 clamp(22px,2.2vw,32px)/1.3 var(--display);letter-spacing:-.03em;max-width:30ch}
.ga-say b{color:var(--orange-ink)}
.ga-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
/* how it works: three big steps */
.ga-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.ga-3 li{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--paper-2)}
.ga-3 .n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--yellow);font:700 24px/1 var(--display);color:var(--ink)}
.ga-3 h3{font:700 clamp(24px,2.2vw,34px)/1.1 var(--display);letter-spacing:-.03em;margin-top:8px}
.ga-3 p{font-size:17px;line-height:1.55;color:var(--ink-2)}
.ga-3 b{color:var(--ink)}
.ga-note{margin-top:22px;font-size:17px;color:var(--ink-2)}
.ga-note b{color:var(--ink)}
/* google vs facebook: two plain cards */
.ga-card{display:flex;flex-direction:column;gap:10px;padding:14px 14px 30px;border-radius:28px;background:var(--paper-2)}
.ga-card>:not(.ph){margin-inline:14px}
.ga-card .ph{margin-bottom:10px}
.ga-card .cap{color:var(--orange-ink)}
.ga-card h3{font:700 clamp(26px,2.6vw,40px)/1.05 var(--display);letter-spacing:-.035em}
.ga-card p:not(.cap){font-size:17px;line-height:1.5;color:var(--ink-2)}
.ga-card.ink{background:var(--ink);color:var(--paper)}
.ga-card.ink .cap{color:var(--yellow)}
.ga-card.ink p:not(.cap){color:var(--on-ink)}
.ga-card.ink .ph{background-color:color-mix(in srgb,var(--paper) 10%,var(--ink));color:color-mix(in srgb,var(--paper) 55%,var(--ink))}
/* problems: problem on the left, what I do on the right */
.ga-pl{display:flex;flex-direction:column;margin-top:clamp(28px,3.5vw,48px)}
.ga-pr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);padding:clamp(22px,3vw,36px) 0;border-top:1px solid color-mix(in srgb,var(--paper) 16%,var(--ink))}
.ga-pr .q{font:700 clamp(24px,2.6vw,40px)/1.1 var(--display);letter-spacing:-.03em}
.ga-pr .a{font-size:17px;line-height:1.6;color:var(--on-ink)}
.ga-pr .a b{color:var(--paper)}
.ga-pr .a .cap{display:block;color:var(--yellow);margin-bottom:8px}
/* you tell me / I take care of */
.ga-list{padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--paper-2)}
.ga-list .cap{color:var(--orange-ink)}
.ga-list ul{display:flex;flex-direction:column;margin-top:12px}
.ga-list li{position:relative;padding:12px 0 12px 32px;border-bottom:1px solid var(--line);font:600 clamp(18px,1.6vw,22px)/1.3 var(--display);letter-spacing:-.02em}
.ga-list li:last-child{border-bottom:0}
.ga-list li::before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:700}
.ga-list.me{background:var(--emerald);color:var(--paper)}
.ga-list.me .cap{color:var(--yellow)}
.ga-list.me li{border-color:color-mix(in srgb,var(--paper) 22%,var(--emerald))}
.ga-list.me li::before{color:var(--yellow)}
/* proof */
.ga-trust .lead{margin-top:18px;max-width:52ch}
.ga-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:clamp(28px,3.5vw,48px)}
.ga-badge{display:flex;flex-direction:column;gap:10px;padding:16px 16px 20px;border-radius:24px;background:var(--paper-2);text-decoration:none;color:var(--ink);transition:transform .4s var(--ease)}
.ga-badge:hover{transform:translateY(-4px)}
.ga-badge img{width:100%;aspect-ratio:1;object-fit:contain}
.ga-badge span{font:600 15px/1.25 var(--display)}
.ga-badge em{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink)}
.ga-badge em svg{width:14px;height:14px}
/* price: two plain cards */
.ga-price .lead{margin-top:16px}
.ga-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3.5vw,48px);max-width:960px}
.ga-plan{display:flex;flex-direction:column;gap:6px;padding:clamp(26px,3vw,40px);border-radius:28px;background:var(--ink);color:var(--paper)}
.ga-plan .cap{color:var(--yellow)}
.ga-plan .amt{font:700 clamp(48px,5vw,72px)/1 var(--display);letter-spacing:-.04em;margin-top:6px}
.ga-plan .amt small{font:500 16px/1 var(--body);color:var(--on-ink);margin-left:6px;letter-spacing:0}
.ga-plan .for{color:var(--on-ink);font-size:16px}
.ga-plan ul{display:flex;flex-direction:column;margin:18px 0 24px}
.ga-plan li{position:relative;padding:9px 0 9px 28px;border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,var(--ink));font-size:16px;color:var(--on-ink)}
.ga-plan li b{color:var(--paper)}
.ga-plan li::before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:700}
.ga-plan .btn{margin-top:auto;align-self:flex-start}
.ga-budget{margin-top:22px;max-width:960px;padding:22px 26px;border-radius:22px;border:1.5px dashed var(--line);display:flex;flex-direction:column;gap:6px;font-size:17px;color:var(--ink-2)}
.ga-budget b{color:var(--ink)}
@media (max-width:900px){
  .ga-hero-grid,.ga-3,.ga-2,.ga-pr,.ga-plans{grid-template-columns:minmax(0,1fr)}
  .gphone{width:min(270px,74vw)}
  .ga-badges{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Software Development page (same simple style as Google Ads v2) ===== */
.sd-hero .big{max-width:15ch}
.sd-micro{margin-top:16px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* hero: the mess flips into one system */
.mess{width:min(460px,100%)}
.mess-lab{position:relative;height:20px;font:500 12px/20px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.mess-lab span{position:absolute;left:0;top:0;transition:opacity .5s}
.mess-lab .b{color:var(--orange-ink)}.mess-lab .a{color:var(--emerald);opacity:0}
.mess.sys .mess-lab .b{opacity:0}.mess.sys .mess-lab .a{opacity:1}
.mess-box{position:relative;aspect-ratio:1/1;margin-top:12px;border-radius:32px;background:var(--paper-2);overflow:hidden}
.chip{position:absolute;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:var(--paper);box-shadow:0 14px 30px -18px rgba(var(--shadow),.55);font-size:13px;color:var(--ink-2);max-width:62%;transition:transform .8s var(--ease),opacity .6s}
.chip b{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink)}
.chip.c0{left:6%;top:7%;transform:rotate(-5deg)}
.chip.c1{right:5%;top:15%;transform:rotate(4deg);background:color-mix(in srgb,var(--emerald) 14%,var(--paper))}
.chip.c2{left:9%;top:36%;transform:rotate(3deg)}
.chip.c3{right:7%;top:46%;transform:rotate(-3deg)}
.chip.c4{left:5%;bottom:14%;transform:rotate(-6deg);background:color-mix(in srgb,var(--yellow) 45%,var(--paper))}
.chip.c5{right:9%;bottom:7%;transform:rotate(5deg)}
.mess.sys .chip{opacity:0;transform:translate(0,0) scale(.6) rotate(0)}
.mess.sys .chip.c0,.mess.sys .chip.c2,.mess.sys .chip.c4{transform:translateX(40%) scale(.6)}
.mess.sys .chip.c1,.mess.sys .chip.c3,.mess.sys .chip.c5{transform:translateX(-40%) scale(.6)}
.sysw{position:absolute;inset:9%;border-radius:20px;background:var(--paper);box-shadow:0 30px 60px -30px rgba(var(--shadow),.55),inset 0 0 0 1px var(--line);overflow:hidden;opacity:0;transform:scale(.92);transition:opacity .6s .25s,transform .8s var(--ease) .25s}
.mess.sys .sysw{opacity:1;transform:none}
.sys-top{display:flex;align-items:center;gap:6px;padding:12px 14px;background:var(--ink);color:var(--paper);font:600 13px/1 var(--display)}
.sys-top i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--paper) 35%,var(--ink))}
.sys-top span{margin-left:8px}
.sys-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.sys-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.sys-stats span{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:12px;background:var(--paper-2);font-size:11.5px;color:var(--muted)}
.sys-stats b{font:700 13px/1 var(--display);color:var(--ink)}
.sys-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.sys-row .st{padding:5px 9px;border-radius:999px;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.st.n{background:color-mix(in srgb,var(--yellow) 40%,var(--paper));color:var(--ink)}
.st.q{background:var(--paper-3);color:var(--ink)}
.st.p{background:color-mix(in srgb,var(--emerald) 18%,var(--paper));color:var(--emerald)}
.st.d{background:var(--ink);color:var(--paper)}
/* what can I build: tabs */
.sd-lead{margin-top:16px;max-width:52ch}
.sd-tabs{margin-top:clamp(28px,3.5vw,48px)}
.sd-tablist{display:flex;flex-wrap:wrap;gap:8px}
.sd-tablist button{padding:12px 18px;border-radius:999px;border:1.5px solid var(--line);background:none;font:600 15px/1 var(--body);color:var(--ink-2);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.sd-tablist button:hover{border-color:var(--ink)}
.sd-tablist button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sd-panel{margin-top:18px;padding:clamp(20px,3vw,36px);border-radius:28px;background:var(--paper-2)}
.sd-panel[hidden]{display:none}
.sd-panel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sd-panel li{position:relative;padding:13px 0 13px 28px;border-bottom:1px solid var(--line);font:600 clamp(17px,1.5vw,21px)/1.3 var(--display);letter-spacing:-.02em}
.sd-panel li::before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:700}
/* how I build: four steps */
.ga-3.four{grid-template-columns:repeat(4,minmax(0,1fr))}
/* my work placeholders */
.sd-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3.5vw,48px)}
.sd-case{display:flex;flex-direction:column;gap:14px}
.sd-case dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.sd-case dt{font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink)}
.sd-case dd{margin:0;color:var(--muted)}
/* tech + integrations: slow logo strips (wrap to a grid for reduced motion) */
.sd-row-lab{color:var(--yellow)!important;margin-top:clamp(28px,3.5vw,44px)}
.logos{margin-top:14px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.logos-track{display:flex;gap:12px;width:max-content;animation:logos 70s linear infinite}
.logos.rev .logos-track{animation-direction:reverse;animation-duration:90s}
.logos:hover .logos-track{animation-play-state:paused}
@keyframes logos{to{transform:translateX(-50%)}}
/* logos shown as they are (original colours on their own white), rounded, with a hover lift */
.logos{padding:10px 0}
.logos span{flex:none;display:block;width:104px;height:104px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--paper) 22%,var(--ink));transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.logos span.w{width:150px;height:85px}
.logos img{display:block;width:100%;height:100%;object-fit:cover}
.logos span:hover{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 2px var(--yellow),0 18px 30px -14px rgba(var(--shadow),.8)}
.sd-sizes .amt{font-size:clamp(36px,3.6vw,52px)}
.sd-sizes .amt small{margin:0 4px 0 0}
.sd-iot{margin-top:clamp(28px,3.5vw,44px);font:600 clamp(20px,2vw,28px)/1.3 var(--display);letter-spacing:-.02em;max-width:34ch}
.sd-fine{margin-top:12px;font-size:14px;color:var(--on-ink)}
@media (prefers-reduced-motion:reduce){.logos{-webkit-mask:none;mask:none}.logos-track{animation:none;flex-wrap:wrap;width:auto}.logos-track span:nth-child(n+40){display:none}}
/* price sizes */
.sd-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(28px,3.5vw,48px)}
.sd-sizes .ga-plan h3{font:700 clamp(24px,2.2vw,32px)/1.1 var(--display);letter-spacing:-.03em;margin:6px 0}
.sd-cta{margin-top:24px}
@media (max-width:900px){
  .ga-3.four,.sd-cases,.sd-sizes{grid-template-columns:minmax(0,1fr)}
  .mess{width:min(400px,100%)}
}
@media (max-width:600px){
  .sd-panel ul{grid-template-columns:minmax(0,1fr)}
  .chip{font-size:12px;padding:10px 12px}
  .mess-box{aspect-ratio:1/1.18}
  .ga-hero .ab-row .btn,.sd-cta{white-space:normal;text-align:center;max-width:100%;padding-block:12px;line-height:1.25}
  .sd-case:nth-child(n+2){display:none}
  .sysw{inset:6%}
  .sd-tablist{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 4px;scrollbar-width:none}
  .sd-tablist button{flex:none}
}

/* ===== AI Solutions page (Google Ads v2 style + a bit of "AI" glow) ===== */
.ai-hero{background:radial-gradient(ellipse 50% 60% at 80% 45%,color-mix(in srgb,var(--emerald) 16%,var(--paper)) 0%,var(--paper) 70%)}
.ai-hero .big .s{color:var(--emerald)}
/* example chat */
.aichat{width:min(380px,100%);border-radius:30px;background:var(--ink);padding:10px;box-shadow:0 60px 100px -50px rgba(var(--shadow),.6),0 0 0 1px color-mix(in srgb,var(--emerald) 50%,var(--ink)),0 0 60px -10px color-mix(in srgb,var(--emerald) 45%,transparent)}
.ac-top{display:flex;align-items:center;gap:10px;padding:12px 14px;color:var(--paper);font-size:15px}
.ac-top small{margin-left:auto;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 50%,var(--ink))}
.ac-dot{width:10px;height:10px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 4px color-mix(in srgb,var(--emerald) 35%,transparent);animation:acpulse 2s ease-in-out infinite}
@keyframes acpulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--emerald) 10%,transparent)}}
.ac-body{display:flex;flex-direction:column;gap:8px;min-height:400px;padding:16px 12px;border-radius:22px;background:var(--paper-2)}
.ac-m{max-width:82%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.4;transition:opacity .4s,transform .4s var(--ease)}
.ac-m.c{align-self:flex-end;background:color-mix(in srgb,var(--emerald) 20%,var(--paper));color:var(--ink);border-bottom-right-radius:4px}
.ac-m.ai{align-self:flex-start;background:var(--paper);color:var(--ink);border-bottom-left-radius:4px;box-shadow:0 6px 16px -10px rgba(var(--shadow),.4)}
.aichat.play .ac-m{opacity:0;transform:translateY(8px);display:none}
.aichat.play .ac-m.on{opacity:1;transform:none;display:block}
.ac-m.typing{display:none;gap:4px}
.aichat.play .ac-m.typing.on{display:flex}
.ac-m.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:actype 1s infinite}
.ac-m.typing i:nth-child(2){animation-delay:.15s}.ac-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes actype{50%{transform:translateY(-4px);opacity:.4}}
.ac-note{display:flex;align-items:center;gap:8px;padding:12px 14px;color:var(--paper);font-size:13.5px;opacity:1;transition:opacity .5s}
.ac-note span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:11px;font-weight:700}
.aichat.play .ac-note{opacity:0}.aichat.play.done .ac-note{opacity:1}
/* consulting */
.ai-consult .ga-h2 .s{color:var(--emerald)}
.ai-answers{display:flex;flex-direction:column;gap:8px;justify-content:center;padding:clamp(24px,3vw,40px)}
.ai-answers p{font:600 clamp(24px,2.4vw,36px)/1.2 var(--display);letter-spacing:-.03em;color:var(--muted)}
.ai-answers b{color:var(--ink)}
.ai-answers .ai-job{margin-top:10px;font:400 clamp(22px,2.2vw,32px)/1.25 var(--serif);font-style:italic;color:var(--emerald)}
.ai-answers .btn{align-self:flex-start;margin-top:14px}
/* AI should make business easier */
.ai-easy .lead{color:var(--on-ink);margin-top:20px}
.ai-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.ai-help li{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:18px;background:color-mix(in srgb,var(--paper) 7%,var(--ink));font:600 clamp(17px,1.5vw,21px)/1.25 var(--display);letter-spacing:-.02em}
.ai-help span{font:500 11px/1 var(--mono);color:var(--yellow)}
.ai-but{margin-top:clamp(32px,4vw,56px);font:600 clamp(22px,2.2vw,32px)/1.25 var(--display);letter-spacing:-.03em;max-width:30ch}
.ai-rule{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.ai-rule p{display:flex;align-items:center;gap:14px;font-size:clamp(17px,1.5vw,21px);color:var(--on-ink)}
.ai-rule b{color:var(--paper)}
.ai-rule span{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-weight:700}
.ai-rule .y{background:var(--emerald);color:var(--paper)}.ai-rule .n{background:var(--orange);color:var(--paper)}
/* solutions grid */
.ai-list .ga-h2 .s{color:var(--emerald)}
.ai-list .lead{margin-top:16px;max-width:56ch}
.ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3.5vw,48px)}
.ai-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:22px;background:var(--paper-2);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s}
.ai-card:hover{transform:translateY(-4px);background:var(--paper);box-shadow:0 0 0 1.5px var(--emerald),0 20px 40px -24px color-mix(in srgb,var(--emerald) 70%,transparent)}
.ai-n{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--emerald)}
.ai-card h3{font:700 clamp(19px,1.6vw,23px)/1.15 var(--display);letter-spacing:-.025em}
.ai-card p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.ai-price{margin-top:auto !important;padding-top:12px;border-top:1px solid var(--line);font:700 16px/1.3 var(--display) !important;letter-spacing:-.01em;color:var(--ink) !important}
.ai-card.first .ai-price{border-color:color-mix(in srgb,var(--paper) 25%,var(--emerald));color:var(--paper) !important}
/* only the RM amount is in brand orange (Lucian); on the green AI Consulting card it sits on a light pill so it stays readable */
.ai-price .rm{color:var(--orange);font-size:20px;font-weight:800;letter-spacing:-.02em}
.ai-card.first .ai-price .rm{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--paper)}
.ai-depends{display:grid;grid-template-columns:auto 1fr auto;gap:10px 24px;align-items:center;margin-top:clamp(24px,3vw,40px);padding:clamp(20px,2.5vw,30px);border-radius:24px;border:1.5px dashed var(--line)}
.ai-depends .cap{grid-column:1/-1;color:var(--emerald)}
.ai-depends>p:not(.cap){font-weight:600;color:var(--ink)}
.ai-depends ul{display:flex;flex-wrap:wrap;gap:6px}
.ai-depends li{padding:6px 12px;border-radius:999px;background:var(--paper-2);font-size:14px}
@media (max-width:900px){.ai-depends{grid-template-columns:minmax(0,1fr)}.ai-depends .btn{justify-self:start}}
.ai-card.first{background:var(--emerald);color:var(--paper)}
.ai-card.first .ai-n{color:var(--yellow)}.ai-card.first p{color:var(--on-emerald)}
.ai-card.first:hover{background:var(--emerald)}
@media (max-width:900px){.ai-help{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .ai-help,.ai-grid{grid-template-columns:minmax(0,1fr)}
  .ai-card{padding:18px 20px}
  .ac-body{min-height:390px}
  .ai-answers{padding:8px 0}
}

/* ===== Domain & Web Hosting page (Lucian's car analogy) ===== */
.dh-hero .big{max-width:13ch}
.dh-hero .big .s{color:var(--orange-ink)}
.dh-q{margin-top:14px;font:400 clamp(28px,3vw,46px)/1.1 var(--serif);font-style:italic;color:var(--ink-2)}
.dh-hero-img{border-radius:32px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 50px 90px -50px rgba(var(--shadow),.55)}
.dh-hero-img img{width:100%;height:100%;object-fit:cover}
/* the three car steps */
.dh-step{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(36px,5vw,72px) 0;border-top:1.5px solid var(--ink)}
.dh-step:first-of-type{margin-top:clamp(28px,3.5vw,48px)}
.dh-step.rev .dh-txt{order:-1}
.dh-pic{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;background:var(--paper-2)}
.dh-pic>img{width:100%;height:100%;object-fit:cover}
.dh-pic.two{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px;aspect-ratio:auto}
.dh-pic.two img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.dh-arrow{font:700 28px/1 var(--display);color:var(--orange)}
.dh-txt{display:flex;flex-direction:column;gap:12px}
.dh-tag{display:flex;align-items:center;gap:12px;font:600 clamp(15px,1.3vw,18px)/1.3 var(--display);color:var(--ink-2)}
.dh-tag span{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:700}
.dh-tag b{color:var(--orange-ink)}
.dh-txt h3{font:700 clamp(28px,3vw,46px)/1.05 var(--display);letter-spacing:-.035em}
.dh-txt p:not(.dh-tag){font-size:17px;line-height:1.55;color:var(--ink-2)}
.dh-txt b{color:var(--ink)}
.dh-can{display:flex;flex-wrap:wrap;gap:8px}
.dh-can li{padding:8px 14px;border-radius:999px;background:var(--paper-2);font-size:15px;font-weight:600}
.dh-can li::before{content:"✓ ";color:var(--emerald)}
.dh-txt .dh-hi{font:600 clamp(20px,1.9vw,27px)/1.25 var(--display)!important;letter-spacing:-.02em;color:var(--ink)!important;padding-left:14px;border-left:4px solid var(--yellow)}
/* plate → domain flip, sits on the plate photo */
/* sits exactly on the plate in h02-plate.webp; the photo's "VGU 7792" turns into "lucian.my" */
.plate-flip{position:absolute;left:26.6%;top:44.5%;width:46.8%;height:27.4%;perspective:600px}
.plate-flip .pl{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;font:700 clamp(20px,3.4vw,44px)/1 var(--display);letter-spacing:-.01em;backface-visibility:hidden;transition:transform .8s var(--ease)}
.plate-flip .pl.a{color:transparent}
.plate-flip .pl.b{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink),0 10px 24px -10px rgba(var(--shadow),.7);transform:rotateX(-90deg)}
.plate-flip.dom .pl.a{transform:rotateX(90deg)}
.plate-flip.dom .pl.b{transform:none}
/* the equation */
.eqn{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.3fr);gap:12px;align-items:stretch;margin-top:clamp(32px,4vw,56px)}
.eqi{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(18px,2vw,28px);border-radius:22px;background:color-mix(in srgb,var(--paper) 8%,var(--ink))}
.eqi b{font:700 clamp(20px,1.9vw,28px)/1.1 var(--display);letter-spacing:-.03em}
.eqi span{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
.eqi.res{background:var(--emerald)}
.eqi.res span{color:var(--paper)}
.eqn .op{align-self:center;font:300 clamp(30px,3vw,48px)/1 var(--display);color:var(--yellow)}
.eq-lines{display:flex;flex-direction:column;gap:6px;margin-top:clamp(28px,3.5vw,44px);font-size:clamp(17px,1.5vw,21px);color:var(--on-ink)}
.eq-lines b{color:var(--paper)}
/* ownership */
.dh-own-grid{align-items:center;margin-top:0}
.dh-trap{margin-top:16px;font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.dh-trap b{color:var(--ink)}
/* price */
.dh-sub{color:var(--orange-ink);margin-top:clamp(28px,3.5vw,44px)}
.dh-plans{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-top:16px}
.dh-plans .ga-plan{position:relative}
.dh-plans .ga-plan .amt{font-size:clamp(40px,4vw,60px)}
.dh-plans .ga-plan.star{background:var(--emerald);box-shadow:0 0 0 3px var(--yellow)}
.dh-plans .ga-plan.star li{border-color:color-mix(in srgb,var(--paper) 20%,var(--emerald));color:var(--on-emerald)}
.dh-plans .ga-plan.star .for{color:var(--on-emerald)}
.dh-pop{position:absolute;top:-14px;right:24px;padding:8px 14px;border-radius:999px;background:var(--yellow);color:var(--ink);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.dh-plans .dh-note{font-size:14px;margin:-12px 0 18px}
.dh-fine{margin-top:16px;font-size:14px;color:var(--muted);max-width:70ch}
.dh-dom{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:clamp(40px,5vw,72px);padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--paper-2)}
.dh-dom .dh-sub{margin-top:0}
.dh-dom h3,.dh-sum h3{font:700 clamp(26px,2.6vw,40px)/1.05 var(--display);letter-spacing:-.035em;margin:8px 0}
.dh-dom .for,.dh-sum .for{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.dh-sum{margin-top:clamp(32px,4vw,56px)}
.eqn.sm{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.2fr);margin-top:14px;max-width:880px}
.eqn.sm .eqi{background:var(--ink);color:var(--paper)}
.eqn.sm .eqi.res{background:var(--emerald)}
.eqn.sm .op{color:var(--orange)}
.dh-sum .for{margin-top:14px}
/* renewal + expiry fees */
.dh-renew .lead{margin-top:18px;max-width:58ch}
.dh-renew .lead b{color:var(--ink)}
.dh-fees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:14px;max-width:960px}
.dh-fee{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,3vw,34px);border-radius:24px;background:var(--paper-2)}
.dh-fee .cap{color:var(--orange-ink)}
.dh-fee .amt{font:700 clamp(40px,4vw,58px)/1 var(--display);letter-spacing:-.04em}
.dh-fee p:not(.cap):not(.amt){font-size:16px;line-height:1.55;color:var(--ink-2)}
.dh-fee.hot{background:color-mix(in srgb,var(--orange) 12%,var(--paper))}
.dh-soon{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:clamp(24px,3vw,40px);max-width:720px;padding:clamp(24px,3vw,40px);border-radius:28px;border:1.5px dashed var(--line)}
.dh-soon .cap{color:var(--orange-ink)}
.dh-soon p:not(.cap){font-size:18px;line-height:1.55;color:var(--ink-2)}
.dh-soon b{color:var(--ink)}
.dh-ext{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dh-ext{margin-top:0}
.dh-ext li{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-radius:20px;background:var(--paper);min-width:120px}
.dh-ext li b{font:700 22px/1 var(--display);letter-spacing:-.02em}
.dh-ext li span{font:600 18px/1.2 var(--display);color:var(--emerald)}
.dh-ext li small{font:500 13px/1 var(--body);color:var(--muted)}
.dh-ext li.oth{flex:1 1 200px}
.dh-ext li.oth span{font:500 14px/1.4 var(--body);color:var(--ink-2)}
.dh-form .ga-h2 .s{color:var(--orange-ink)}
@media (max-width:900px){
  .dh-step,.eqn,.eqn.sm,.dh-plans,.dh-dom,.dh-fees{grid-template-columns:minmax(0,1fr)}
  .dh-plans{gap:28px}
  .dh-step.rev .dh-txt{order:0}
  .eqn .op{justify-self:center;line-height:.8}
}
@media (max-width:600px){.dh-pic.two{grid-template-columns:minmax(0,1fr);justify-items:center}.dh-arrow{transform:rotate(90deg)}}

/* ===== Blog single post (Oct 2026) ===== */
.ar-progress{position:fixed;left:0;right:0;top:0;z-index:70;height:3px;pointer-events:none}
.ar-progress i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ar-head{padding:calc(140px + env(safe-area-inset-top,0px)) 0 clamp(28px,3.5vw,44px)}
.ar-narrow{max-width:980px}
.ar-crumb{display:flex;gap:10px;color:var(--orange-ink)}
.ar-crumb a{color:inherit;text-decoration:none}.ar-crumb a:hover{color:var(--ink)}
.ar-head h1{font-size:clamp(38px,5.2vw,84px);margin-top:18px;max-width:20ch;text-wrap:balance}
.ar-lede{margin-top:20px;font-size:clamp(18px,1.6vw,23px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.ar-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:26px;color:var(--muted)}
.ar-meta b{display:block;color:var(--ink);font-size:15px}
.ar-meta small{font-size:13px}
.ar-mono{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--yellow);font:700 15px/1 var(--display);letter-spacing:-.02em;flex:none}
.ar-mono.big{width:64px;height:64px;font-size:21px}
.ar-dot{width:4px;height:4px;border-radius:50%;background:var(--line)}
.ar-hero .ph{aspect-ratio:21/9;border-radius:28px;min-height:200px}
/* body + sticky contents */
.ar-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);margin-top:clamp(36px,5vw,64px);align-items:start}
.ar-toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:28px}
.ar-toc .cap{color:var(--muted);margin-bottom:10px}
.ar-toc ol{display:flex;flex-direction:column;border-left:2px solid var(--line)}
.ar-toc a{display:block;padding:8px 0 8px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:15px;line-height:1.35;color:var(--ink-2);text-decoration:none;transition:color .25s,border-color .25s}
.ar-toc a:hover{color:var(--ink)}
.ar-toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--orange)}
.ar-share{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ar-sh{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:600 14px/1 var(--body);color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .25s,background .25s}
.ar-sh:hover{border-color:var(--ink)}
.ar-sh svg{width:16px;height:16px}
.ar-body{max-width:70ch;font-size:clamp(17px,1.25vw,19px);line-height:1.75;color:var(--ink-2)}
.ar-body>*+*{margin-top:1.1em}
.ar-body h2{margin-top:2.2em;font:700 clamp(28px,2.6vw,40px)/1.1 var(--display);letter-spacing:-.035em;color:var(--ink);scroll-margin-top:110px}
.ar-body b{color:var(--ink)}
.ar-body ul{display:flex;flex-direction:column;gap:.45em;padding-left:0}
.ar-body ul li{position:relative;padding-left:1.4em}
.ar-body ul li::before{content:"";position:absolute;left:.2em;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.ar-body ul.ar-check li::before{content:"✓";width:auto;height:auto;top:0;left:0;background:none;color:var(--emerald);font-weight:700}
.ar-quick{padding:clamp(20px,2.5vw,30px);border-radius:22px;background:var(--ink);color:var(--on-ink);scroll-margin-top:110px}
.ar-quick .cap{color:var(--yellow);margin-bottom:8px}
.ar-quick b{color:var(--paper)}
.ar-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ar-prices>div{padding:20px;border-radius:20px;background:var(--paper-2);display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5}
.ar-prices .cap{color:var(--orange-ink)}
.ar-prices .amt{font:700 clamp(24px,2.2vw,32px)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink)}
.ar-pull{margin:1.8em 0;padding:4px 0 4px 24px;border-left:4px solid var(--yellow)}
.ar-pull p{font:400 clamp(24px,2.4vw,36px)/1.25 var(--serif);font-style:italic;color:var(--ink)}
.ar-tip{padding:clamp(20px,2.5vw,28px);border-radius:22px;background:color-mix(in srgb,var(--yellow) 28%,var(--paper))}
.ar-tip .cap{color:var(--ink);margin-bottom:8px}
/* end of article */
.ar-end{display:flex;flex-direction:column;gap:20px;margin-top:3em !important;padding-top:2em;border-top:1.5px solid var(--ink)}
.ar-author{display:flex;gap:18px;align-items:flex-start}
.ar-author .cap{color:var(--muted)}
.ar-author .ar-an{font:700 22px/1.2 var(--display);color:var(--ink);margin:2px 0 6px}
.ar-author p:not(.cap):not(.ar-an){font-size:16px;line-height:1.6}
.ar-ask{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(22px,3vw,34px);border-radius:24px;background:var(--emerald);color:var(--on-emerald)}
.ar-ask .d{font-size:clamp(26px,2.6vw,38px);color:var(--paper)}
.ar-ask .d .s{color:var(--yellow)}
.ar-rel .sec-h{align-items:end}
@media (max-width:960px){
  .ar-grid{grid-template-columns:minmax(0,1fr)}
  .ar-toc{position:static;padding:18px 20px;border-radius:20px;background:var(--paper-2)}
  .ar-toc ol{border-left:0}.ar-toc a{padding:6px 0;border-left:0}
  .ar-share{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (max-width:640px){.ar-prices{grid-template-columns:minmax(0,1fr)}.ar-hero .ph{aspect-ratio:4/3}.ar-author{flex-direction:column}}

/* ===== Education Blog: archive + cards (Oct 2026) ===== */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px);margin-top:clamp(20px,2.5vw,32px)}
.bcard{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.bcard.gone{display:none}
.bc-img{aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--paper-2)}
.bc-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.bc-img .ph{height:100%;min-height:0;border-radius:0;font-size:10px}
.bcard:hover .bc-img img{transform:scale(1.04)}
.bc-txt{display:flex;flex-direction:column;gap:8px}
.bc-cat{color:var(--orange-ink)}
.bcard h3{font:700 clamp(19px,1.5vw,23px)/1.18 var(--display);letter-spacing:-.025em;text-wrap:balance;transition:color .25s}
.bcard:hover h3{color:var(--orange-ink)}
.bc-ex{font-size:15px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:2px;color:var(--muted)}
.bc-go{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.bc-go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.bcard:hover .bc-go svg{transform:translateX(4px)}
/* featured: big card */
.bcard.feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(12px,1.5vw,18px);border-radius:32px;background:var(--paper-2)}
.bcard.feat .bc-img{aspect-ratio:16/10;border-radius:22px}
.bcard.feat .bc-txt{gap:14px;padding-right:clamp(0px,2vw,24px)}
.bcard.feat .bc-cat::before{content:"Featured · ";color:var(--ink)}
.bcard.feat h3{font-size:clamp(30px,3.4vw,52px);line-height:1.05;letter-spacing:-.04em}
.bcard.feat .bc-ex{-webkit-line-clamp:3;font-size:17px}
/* list header + search */
.bl-list{padding-top:0}
.bl-list .filters button small{margin-left:4px;opacity:.6;font-size:12px}
.bl-top{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;margin-top:clamp(20px,3vw,40px)}
.bl-top h2{font-size:clamp(34px,4vw,60px)}
.bl-search{display:flex;align-items:center;gap:10px;width:min(380px,100%);padding:0 16px;height:50px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--muted);transition:box-shadow .25s}
.bl-search:focus-within{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.bl-search input{flex:1;min-width:0;border:0;background:none;font:500 15px/1 var(--body);color:var(--ink);outline:none}
.bl-count{margin-top:14px;color:var(--muted)}
.bl-none{margin-top:24px;font-size:17px;color:var(--ink-2)}
.bl-none a{color:var(--ink);font-weight:600}
/* article: image + end boxes */
.ar-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:28px}
.ar-fig{margin:1.6em 0}
.ar-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:22px}
.ar-fig figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.ar-body h3{margin-top:1.5em;font:700 clamp(19px,1.6vw,23px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.ar-checked{padding:14px 18px;border-radius:16px;background:var(--paper-2);font-size:14px !important;line-height:1.6;color:var(--ink-2)}
.ar-checked a{color:var(--ink)}
.ar-help{padding:clamp(18px,2.2vw,26px);border-radius:22px;box-shadow:inset 0 0 0 1.5px var(--line)}
.ar-help .cap{color:var(--muted);margin-bottom:12px}
.ar-help ul{display:flex;flex-wrap:wrap;gap:8px;padding:0}
.ar-help ul li{padding:0}
.ar-help ul li::before{display:none}
.ar-help a{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--paper-2);font:600 14px/1.2 var(--body);color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.ar-help a:hover{background:var(--ink);color:var(--paper)}
.ar-help-note{margin-top:12px !important;font-size:14px;color:var(--muted)}
.ar-rel .bgrid{margin-top:28px}
@media (max-width:960px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.bcard.feat{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.bgrid{grid-template-columns:minmax(0,1fr)}.ar-hero img{aspect-ratio:4/3}.bl-search{width:100%}}

/* ===== Software projects (real cases, illustrated dashboards) ===== */
.sd-work-lead{margin-top:16px;max-width:60ch}
.sp-list{display:flex;flex-direction:column;margin-top:clamp(28px,3.5vw,48px)}
.sp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(32px,4.5vw,64px) 0;border-top:1.5px solid var(--ink)}
.sp.rev .sp-vis{order:2}
.sp-tag{color:var(--orange-ink)}
.sp-txt h3{margin-top:10px;font:700 clamp(24px,2.4vw,36px)/1.08 var(--display);letter-spacing:-.035em;text-wrap:balance}
.sp-ba{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.sp-ba p{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--paper-2);font:600 16.5px/1.4 var(--display);letter-spacing:-.01em;color:var(--ink-2)}
.sp-ba p .cap{color:var(--muted);font-weight:500}
.sp-ba p.af{background:var(--emerald);color:var(--paper)}
.sp-ba p.af .cap{color:var(--yellow)}
.sp-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;counter-reset:s}
.sp-steps li{padding:7px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 13px/1 var(--body)}
.sp-steps li:nth-child(2){background:var(--yellow);color:var(--ink)}
.sp-more{margin-top:16px;border-top:1px solid var(--line)}
.sp-more summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;list-style:none;font:600 15px/1 var(--body);color:var(--ink)}
.sp-more summary::-webkit-details-marker{display:none}
.sp-more summary i{position:relative;width:14px;height:14px}
.sp-more summary i::before,.sp-more summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.sp-more summary i::after{transform:rotate(90deg)}
.sp-more[open] summary i::after{transform:rotate(0)}
.sp-story{display:flex;flex-direction:column;gap:10px;padding-bottom:8px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.sp-story h4{margin-top:8px;font:700 15px/1.2 var(--display);color:var(--ink)}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px}
.sp-chips li{padding:6px 11px;border-radius:999px;background:var(--paper-2);font-size:13.5px;color:var(--ink)}
/* the dashboard illustrations: drawn at 760px wide, scaled to fit (site.js "MOCK SCALE") */
.mock{position:relative;width:100%;aspect-ratio:760/470;--s:1}
.mock-in{position:absolute;left:0;top:0;width:760px;height:470px;transform:scale(var(--s));transform-origin:0 0;border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:0 40px 80px -40px rgba(var(--shadow),.5),0 0 0 1px var(--line);font:400 12px/1.35 var(--body);color:var(--ink)}
.mk-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:var(--ink);color:var(--paper)}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--paper) 30%,var(--ink))}
.mk-bar span{margin-left:10px;font:600 12px/1 var(--display)}
.mk-bar em{margin-left:auto;padding:4px 8px;border-radius:999px;background:var(--yellow);color:var(--ink);font:600 9px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.mk-body{display:grid;grid-template-columns:140px 1fr;height:436px}
.mk-side{display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:var(--paper-2);border-right:1px solid var(--line)}
.mk-side span{padding:8px 10px;border-radius:8px;font-size:12px;color:var(--ink-2)}
.mk-side span.on{background:var(--ink);color:var(--paper);font-weight:600}
.mk-main{display:flex;flex-direction:column;gap:12px;padding:14px;overflow:hidden}
.mk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mk-kpis div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.mk-kpis small{font-size:10.5px;color:var(--muted)}
.mk-kpis b{font:700 17px/1.1 var(--display);letter-spacing:-.02em}
.mk-kpis em{font-style:normal;font-size:10.5px}
em.late{color:var(--orange-ink)}em.paid{color:var(--emerald)}em.due{color:var(--ink)}em.up{color:var(--muted)}
.mk-two{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;min-height:0}
.mk-card{padding:12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);min-height:0}
.mk-h{font:700 12.5px/1 var(--display);margin-bottom:10px}
.mk-card table{width:100%;border-collapse:collapse}
.mk-card td{padding:7px 4px;border-bottom:1px solid var(--line);font-size:11.5px;white-space:nowrap}
.mk-card tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:600}
.pill.due{background:color-mix(in srgb,var(--yellow) 45%,var(--paper))}
.pill.paid{background:color-mix(in srgb,var(--emerald) 18%,var(--paper));color:var(--emerald)}
.pill.late{background:color-mix(in srgb,var(--orange) 18%,var(--paper));color:var(--orange-ink)}
.pill.up{background:var(--paper-3)}
.mk-bars{display:flex;align-items:flex-end;gap:12px;height:150px;padding-top:6px}
.mk-bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.mk-bars i{width:100%;height:var(--h);border-radius:6px 6px 0 0;background:var(--ink)}
.mk-bars div:nth-child(4) i{background:var(--emerald)}
.mk-bars small{font-size:10px;color:var(--muted)}
.mk-dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px}
.mk-dl dt{color:var(--muted);font-size:11px}.mk-dl dd{margin:0;font-weight:600}
.mk-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mk-pillars div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;background:var(--paper-2)}
.mk-pillars small{font-size:10px;color:var(--muted)}
.mk-pillars b{font:600 22px/1.1 serif;color:var(--ink)}
.mk-pillars div:nth-child(2){background:var(--ink)}.mk-pillars div:nth-child(2) b,.mk-pillars div:nth-child(2) small{color:var(--yellow)}
.mk-time{display:flex;flex-direction:column}
.mk-time li{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.mk-time li:last-child{border-bottom:0}
.mk-time b{color:var(--orange-ink)}
.mk-br td:nth-child(2){width:45%}
.mk-meter{display:block;height:8px;border-radius:5px;background:var(--paper-3);overflow:hidden}
.mk-meter i{display:block;height:100%;width:var(--w);background:var(--emerald)}
.mk-cal{display:grid;grid-template-columns:62px repeat(5,1fr);gap:5px;align-items:center}
.mk-cal small{text-align:center;font-size:10px;color:var(--muted)}
.mk-cal b{font-size:11px}
.mk-cal i{height:30px;border-radius:7px;background:var(--paper-2)}
.mk-cal i.b{background:var(--ink)}
.mk-dev{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mk-dev div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.mk-dev small{font-size:10.5px;color:var(--muted)}
.mk-dev b{font:700 16px/1 var(--display)}
.mk-dev em{font-style:normal;font-size:10.5px;color:var(--muted)}
.mk-dev div.on{background:var(--yellow);box-shadow:none}
.mk-dev div.on small,.mk-dev div.on em{color:var(--ink)}
@media (max-width:900px){.sp{grid-template-columns:minmax(0,1fr)}.sp.rev .sp-vis{order:0}}

/* ===== Packages: new website (navy/emerald, page stacks) vs revamp (orange audit accents, old→new) ===== */
.pkgs{--acc:var(--emerald);--acc-ink:var(--emerald)}
.pkgs.rev{--acc:var(--orange);--acc-ink:var(--orange-ink)}
.pkgs-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.pkgs-head .ga-h2 .s{color:var(--acc-ink)}
.pkgs-lede{display:flex;flex-direction:column;gap:10px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.pkgs-lede b{color:var(--ink)}
.pkgs-promise{font:700 clamp(18px,1.6vw,22px)/1.2 var(--display)!important;letter-spacing:-.02em;color:var(--acc-ink)!important}
.pkg-flow{display:flex;gap:6px;margin-top:6px}
.pkg-flow li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--paper-2);font:600 14px/1 var(--display);color:var(--ink)}
.pkg-flow li span{font:500 10px/1 var(--mono);color:var(--acc-ink)}
.pkg-flow li:not(:last-child)::after{content:"→";margin-left:4px;color:var(--muted)}
.pkg-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(32px,4vw,52px);align-items:stretch}
.pkg{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,30px);border-radius:28px;background:var(--paper-2)}
.pkg .btn{margin-top:auto;align-self:stretch;white-space:normal;text-align:center;line-height:1.2;padding-block:12px}
.pkg.dark{background:var(--ink);color:var(--paper)}
.pkg-n{color:var(--acc-ink)}
.pkg.dark .pkg-n{color:var(--yellow)}
.pkg-price{font:700 clamp(28px,2.6vw,40px)/1.05 var(--display);letter-spacing:-.04em}
.pkg-size{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-block:1px solid var(--line);font-size:14px;color:var(--muted)}
.pkg.dark .pkg-size{border-color:color-mix(in srgb,var(--paper) 16%,var(--ink));color:var(--on-ink)}
.pkg-size b{color:var(--ink);font-size:15px}
.pkg.dark .pkg-size b{color:var(--paper)}
.pkg-line{font-size:15px;line-height:1.55;color:var(--ink-2)}
.pkg.dark .pkg-line{color:var(--on-ink)}
.pkg-best{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pkg-best li{padding:6px 10px;border-radius:999px;background:var(--paper);font-size:13px;color:var(--ink)}
.pkg.dark .pkg-best li{background:color-mix(in srgb,var(--paper) 10%,var(--ink));color:var(--paper)}
/* card art */
.pk-art{position:relative;height:96px;margin-bottom:6px}
.pk-art.new i{position:absolute;left:calc(var(--k) * 12px);top:calc(var(--k) * 5px);width:62px;height:78px;border-radius:8px;background:var(--paper);box-shadow:0 0 0 1.5px var(--ink),0 6px 14px -8px rgba(var(--shadow),.5);background-image:linear-gradient(var(--line) 0 0),linear-gradient(var(--line) 0 0),linear-gradient(var(--acc) 0 0);background-size:70% 4px,50% 4px,40% 14px;background-position:9px 34px,9px 44px,9px 10px;background-repeat:no-repeat}
.pk-art.new b{position:absolute;left:150px;top:28px;font:700 30px/1 var(--display);color:var(--acc-ink)}
.pkg.dark .pk-art.new i{box-shadow:0 0 0 1.5px var(--yellow)}
.pk-art.rev{display:flex;align-items:center;gap:8px}
.pk-art.rev i{display:block;width:58px;height:74px;border-radius:8px;flex:none}
.pk-art.rev .old{background:var(--paper-3);box-shadow:inset 0 0 0 1.5px var(--muted);background-image:repeating-linear-gradient(-30deg,transparent 0 8px,color-mix(in srgb,var(--muted) 30%,transparent) 8px 10px)}
.pk-art.rev .rv-mid{position:relative;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk-art.rev .rv-mid em{position:absolute;left:9px;width:12px;height:12px;border-radius:50%;background:var(--orange)}
.pk-art.rev .rv-mid em:nth-child(1){top:10px}.pk-art.rev .rv-mid em:nth-child(2){top:31px;left:32px}.pk-art.rev .rv-mid em:nth-child(3){top:52px}
.pk-art.rev .nw{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--emerald);background-image:linear-gradient(var(--emerald) 0 0),linear-gradient(var(--line) 0 0),linear-gradient(var(--line) 0 0);background-size:70% 12px,60% 4px,45% 4px;background-position:8px 9px,8px 30px,8px 40px;background-repeat:no-repeat}
.pk-arw{font:700 18px/1 var(--display);color:var(--orange)}
.pkg.dark .pk-art.rev .rv-mid,.pkg.dark .pk-art.rev .nw{box-shadow:inset 0 0 0 1.5px var(--yellow)}
/* comparison table */
.pkg-cmp{margin-top:clamp(28px,3.5vw,44px);border-top:1.5px solid var(--ink)}
.pkg-cmp summary{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;list-style:none;font:700 clamp(18px,1.6vw,22px)/1 var(--display);letter-spacing:-.02em}
.pkg-cmp summary::-webkit-details-marker{display:none}
.pkg-cmp summary i{position:relative;width:16px;height:16px}
.pkg-cmp summary i::before,.pkg-cmp summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.pkg-cmp summary i::after{transform:rotate(90deg)}
.pkg-cmp[open] summary i::after{transform:rotate(0)}
.pkg-cmp .ctwrap{margin-top:0;padding-top:4px}
.pkg-tab .me,.pkg-tab thead .me{background:transparent!important;color:var(--ink)!important;box-shadow:none!important;border-radius:0!important;font-weight:400}
.pkg-tab thead th{padding-top:12px!important}
.pkg-tab thead .me .who{color:var(--ink)!important;font-size:clamp(16px,1.3vw,19px)}
.pkg-th-p{display:block;margin-top:4px;font:600 13px/1.2 var(--body);color:var(--acc-ink)}
.pkg-tab tbody tr:nth-child(-n+2) td{font-size:15px}
.pkg-tab .ok{color:var(--acc-ink);font-weight:700;font-size:17px}
.pkg-tab .no{color:var(--muted)}
.pkg-tab tbody tr:hover td{background:var(--paper-2)!important}
/* footer */
.pkg-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);margin-top:clamp(28px,3.5vw,44px);padding:clamp(24px,3vw,40px);border-radius:28px;background:color-mix(in srgb,var(--acc) 10%,var(--paper))}
.pkg-foot h3{font-size:clamp(26px,2.6vw,40px);line-height:1.08}
.pkg-foot h3 .s{color:var(--acc-ink)}
.pkg-tell{margin-top:14px;font-weight:600;color:var(--ink)}
.pkg-ask{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pkg-ask li{position:relative;padding-left:22px;font-size:16px;color:var(--ink-2)}
.pkg-ask li::before{content:"✓";position:absolute;left:0;color:var(--acc-ink);font-weight:700}
.pkg-foot>div:last-child{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.pkg-foot b{color:var(--ink)}
/* revamp: keep what works + SEO safety check */
.rv-safe-card{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,4vw,56px);border-radius:32px;background:var(--emerald);color:var(--paper)}
.rv-safe-card h2{font-size:clamp(32px,3.8vw,58px)}
.rv-safe-card h2 .s{color:var(--yellow)}
.rv-safe-card .lead{color:var(--on-emerald);margin-top:16px}
.rv-has{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rv-has li{padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--paper) 12%,var(--emerald));font-size:14px}
.rv-safe-card .rv-kir{margin-top:14px}
.rv-seo{align-self:start;padding:clamp(20px,2.4vw,30px);border-radius:24px;background:var(--paper);color:var(--ink)}
.rv-seo .cap{color:var(--orange-ink);margin-bottom:10px}
.rv-seo ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin-bottom:14px}
.rv-seo li{position:relative;padding-left:20px;font-size:14.5px}
.rv-seo li::before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:700}
.rv-seo p:last-child{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:960px){.pkg-row{grid-template-columns:minmax(0,1fr)}.pkgs-head,.pkg-foot,.rv-safe-card{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .pkg-tab td{background:var(--paper-2)!important}
  .pkg-tab td::before{color:var(--acc-ink)!important}
  .pkg-flow li{padding:7px 11px;font-size:13px}
  .rv-seo ul{grid-template-columns:minmax(0,1fr)}
}

/* why are you here: sticky index on the left, one reason in the spotlight at a time */
.why-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,110px);margin-top:clamp(36px,5vw,72px)}
.why-idx{position:sticky;top:120px;align-self:start}
.why-idx ol{display:flex;flex-direction:column}
.why-idx a{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font:600 clamp(20px,1.9vw,28px)/1.1 var(--display);letter-spacing:-.03em;color:color-mix(in srgb,var(--ink) 32%,var(--paper));transition:color .4s,padding .5s var(--ease)}
.why-idx a .cap{font-size:12px;color:inherit}
.why-idx a:hover{color:var(--ink)}
.why-idx a.on{color:var(--ink);padding-left:10px}
.why-idx a.on .cap{color:var(--orange-ink)}
.why-bar{height:3px;margin-top:18px;background:var(--line);border-radius:3px;overflow:hidden}
.why-bar i{display:block;height:100%;width:calc(var(--why,0) * 100%);background:var(--orange);transition:width .5s var(--ease)}
.why-list{display:flex;flex-direction:column}
.why-p{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(40px,6vw,80px) 0;border-top:1.5px solid var(--ink);opacity:.38;transition:opacity .6s var(--ease)}
.why-p.on,.no-motion .why-p{opacity:1}
.why-n{position:absolute;top:clamp(20px,3vw,36px);right:0;font:800 clamp(80px,11vw,180px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--orange) 55%,var(--paper));pointer-events:none}
.why-q{font:700 clamp(30px,3.6vw,58px)/1.02 var(--display);letter-spacing:-.04em;max-width:16ch;position:relative}
.why-b{display:flex;flex-direction:column;gap:10px;max-width:56ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:var(--ink-2)}
.why-b b{color:var(--ink)}
.why-b .rl{display:block;font:600 clamp(18px,1.6vw,23px)/1.35 var(--display);letter-spacing:-.02em;color:var(--ink)}
/* the highlighted line: a yellow marker that sweeps in when the reason is in focus */
.why-hi{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,48px);line-height:1.15;max-width:22ch;margin:8px 0}
.why-hi mark{color:var(--ink);background:linear-gradient(transparent 58%,color-mix(in srgb,var(--yellow) 75%,var(--paper)) 58%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;transition:background-size 1.1s var(--ease) .15s}
.why-p.seen .why-hi mark,.no-motion .why-hi mark{background-size:100% 100%}
.why-k{align-self:flex-start;margin-top:6px;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font:700 clamp(16px,1.3vw,19px)/1.2 var(--display);letter-spacing:-.01em}
.why-k span{color:var(--yellow)}
.why-close{margin-top:clamp(56px,7vw,110px);padding:clamp(36px,5vw,72px);border-radius:32px;background:var(--paper-2);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.why-close h2{font-size:clamp(34px,4.2vw,68px);max-width:20ch}
.why-qs{display:flex;flex-direction:column;gap:2px;counter-reset:q}
.why-qs li{font:600 clamp(20px,2vw,30px)/1.3 var(--display);letter-spacing:-.03em;padding-left:2.2em;position:relative;counter-increment:q}
.why-qs li::before{content:"0" counter(q);position:absolute;left:0;top:.45em;font:500 12px/1 var(--mono);color:var(--orange-ink);letter-spacing:.1em}
.why-then{font:700 clamp(24px,2.4vw,36px)/1.15 var(--display);letter-spacing:-.03em;margin-top:8px}
.why-then .s{color:var(--orange-ink)}
@media (max-width:900px){
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .why-idx{display:none}
  .why-p{min-height:0;opacity:1;padding:36px 0 44px}
  .why-n{top:24px}
  .why-q{padding-right:2.4em}
}
@media (max-width:900px){
  .rv-hero-grid,.rv-shame-grid,.rv-keep-grid{grid-template-columns:minmax(0,1fr)}
  .ba-grid{grid-template-columns:minmax(0,1fr)}
  .ba-pend.big{aspect-ratio:4/3}
}
@media (max-width:600px){
  .rv-dont{grid-template-columns:minmax(0,1fr)}
  .ba-pend{aspect-ratio:4/3.4}
  .ba-knob{width:44px;height:44px;margin:-22px 0 0 -22px;font-size:15px}
}

/* problem-card scenes (tools/make_icons.py, inlined by scene() in build.py). Tints rotate yellow / emerald / orange */
.scn{aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--yellow) 18%,var(--paper))}
.scn svg{display:block;width:100%;height:100%;transition:transform 1.2s var(--ease)}
.pc3:hover .scn svg{transform:scale(1.04)}
.pc3:nth-child(3n+2) .scn,.ga-card:nth-child(2) .scn{background:color-mix(in srgb,var(--emerald) 12%,var(--paper))}
.pc3:nth-child(3n) .scn{background:color-mix(in srgb,var(--orange) 12%,var(--paper))}
.ga-card>.scn{margin:0 0 10px}

/* service-row icons (home "What does your business need next?" + "Other services"): fill the left slot on tablet/phone only */
.srow{grid-template-columns:88px minmax(0,4fr) minmax(0,5fr) minmax(0,2fr)}
.srow .sic{display:grid;place-items:center;grid-row:1;grid-column:1;width:88px;height:88px;border-radius:20px;background:color-mix(in srgb,var(--yellow) 22%,var(--paper));transition:background .4s var(--ease),transform .5s var(--ease)}
.srow:nth-child(3n+2) .sic{background:color-mix(in srgb,var(--emerald) 14%,var(--paper))}.srow:nth-child(3n) .sic{background:color-mix(in srgb,var(--orange) 14%,var(--paper))}
.srow .sic svg{width:70px;height:70px}
.srow .sn{grid-column:2}.srow .sb{grid-column:3}.srow .sp{grid-column:4}
.srow:hover .sic{background:var(--paper);transform:rotate(-4deg)}
@media (max-width:860px){.srow{grid-template-columns:96px 1fr}.srow .sn,.srow .sb,.srow .sp{grid-column:2}.srow:hover{padding-inline:16px}.srow .sic{grid-row:1/4;align-self:start;width:96px;height:96px}
  .srow:nth-child(3n+2) .sic{background:color-mix(in srgb,var(--emerald) 14%,var(--paper))}.srow:nth-child(3n) .sic{background:color-mix(in srgb,var(--orange) 14%,var(--paper))}
  .srow .sic svg{width:76px;height:76px}}
@media (max-width:420px){.srow{grid-template-columns:72px 1fr}.srow .sic{width:72px;height:72px;border-radius:16px}.srow .sic svg{width:58px;height:58px}}

/* AI solution icons */
.ai-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--paper);margin-bottom:6px}
.ai-ic svg{width:52px;height:52px}
.ai-card .ai-n{position:absolute;top:24px;right:24px}
.ai-card:hover .ai-ic{background:color-mix(in srgb,var(--yellow) 22%,var(--paper))}

/* hosting package icons */
.pk-ic{display:grid;place-items:center;width:76px;height:76px;border-radius:20px;background:var(--paper);margin-bottom:12px}
.pk-ic svg{width:62px;height:62px}

/* contact: finding my office (Lucian's 3 photos) + map */
.ct-office{padding:clamp(56px,7vw,104px) 0 clamp(64px,8vw,120px)}
.of-head{max-width:760px}
.of-steps{list-style:none;margin:clamp(28px,3.5vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.of-steps li{display:flex;flex-direction:column;gap:8px}
.of-steps figure{margin:0 0 8px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--paper-3)}
.of-steps img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.of-steps li:hover img{transform:scale(1.04)}
.of-steps .cap{color:var(--orange-ink)}
.of-steps h3{font:700 clamp(22px,2vw,30px)/1.1 var(--display);letter-spacing:-.03em}
.of-steps p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.of-map{margin-top:clamp(28px,3.5vw,48px)}
.of-map iframe{display:block;width:100%;height:clamp(300px,42vh,460px);border:0;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 30px 60px -45px rgba(var(--shadow),.5);filter:saturate(.85)}
@media (max-width:760px){
  .of-steps{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gut));padding:0 var(--gut) 6px;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .of-steps::-webkit-scrollbar{display:none}
  .of-steps li{scroll-snap-align:start}}

/* revamp stories (Lucian's Before / After words) */
.ba-story{flex-basis:100%;display:grid;gap:10px;margin-top:6px}
.ba-story p{font-size:15.5px;line-height:1.55;color:var(--ink-2);padding:14px 16px;border-radius:16px;background:var(--paper-2)}
.ba-story .cap{display:block;margin-bottom:6px;color:var(--orange-ink)}
.ba-story p.now{background:color-mix(in srgb,var(--emerald) 10%,var(--paper))}
.ba-story p.now .cap{color:var(--emerald)}
.ba.big .ba-story{display:none}
/* case 07: same look, new ownership (no before/after pictures) */
.rv-keep{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(56px,7vw,104px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.rv-keep-img{position:relative}
.rv-keep-img .ba-view{aspect-ratio:16/10}
.rv-keep-img .ba-view img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.rv-keep-tag{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:var(--yellow);color:var(--ink)}
.rv-keep-txt{display:flex;flex-direction:column;gap:8px}
.rv-keep-txt .eyebrow{color:var(--orange-ink)}
.rv-keep-txt h3{font:700 clamp(28px,3vw,44px)/1.05 var(--display);letter-spacing:-.035em}
.rv-keep-txt .ba-story{margin-top:10px}
.rv-keep-txt .ba-full{margin-top:12px}
@media (max-width:860px){.rv-keep{grid-template-columns:minmax(0,1fr)}}

/* lightbox note (e.g. "still screenshot, the live site has scroll effects") */
.lb-note{margin:0 auto 12px;max-width:min(980px,100%);padding:12px 16px 12px 44px;border-radius:14px;background:color-mix(in srgb,var(--yellow) 28%,var(--paper));color:var(--ink);font-size:14.5px;line-height:1.45;position:relative}
.lb-note::before{content:"i";position:absolute;left:14px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--yellow);font:700 13px/20px var(--body);text-align:center}
.lb-note[hidden]{display:none}

/* About: customer testimonial video (vertical, tap to play) */
.ab-video{margin:0}
.tvid{position:relative;aspect-ratio:9/16;max-width:380px;margin-inline:auto;border-radius:24px;overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -40px rgba(var(--shadow),.6)}
.tvid video{display:block;width:100%;height:100%;object-fit:cover}
.tvid-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;background:var(--yellow);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 10px color-mix(in srgb,var(--yellow) 30%,transparent);transition:transform .3s var(--ease)}
.tvid-play:hover{transform:scale(1.08)}
.tvid-play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}
.tvid.on .tvid-play{display:none}
.ab-video figcaption{max-width:380px;margin:14px auto 0;font-size:16px;color:var(--ink-2)}
.ab-video figcaption .cap{display:block;margin-bottom:4px;color:var(--orange-ink)}
.band.green .ab-video figcaption{color:var(--paper)}.band.green .ab-video figcaption .cap{color:var(--yellow)}

/* About: customer story, easier to read (body font, not thin serif) + the "bit dangerous" line */
.ab-story{gap:16px}
.ab-story p{font:500 clamp(18px,1.45vw,22px)/1.55 var(--body);color:var(--paper);letter-spacing:0}
.ab-story p b{color:var(--yellow);font-weight:700}
.ab-story p:last-child{font-style:normal;color:var(--paper)}
.ab-story .warn{display:block;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--ink) 30%,var(--emerald));color:var(--yellow);font-weight:700}
.ab-fam-end{margin-top:22px;font:700 clamp(20px,1.8vw,26px)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* About: "My certifications" (moved between the green customer band and Muay Thai) */
.ab-cred .cr-head{max-width:820px}
.ab-cred .cr-head .lead{margin-top:16px}
.cr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(32px,4vw,56px)}
.cr-card{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2vw,28px);border-radius:24px;background:var(--paper-2);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cr-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px var(--ink),0 24px 48px -30px rgba(var(--shadow),.5)}
.cr-badge{display:grid;place-items:center;width:120px;height:120px;border-radius:22px;background:var(--paper);margin-bottom:6px}
.cr-badge img{width:96px;height:96px;object-fit:contain}
.cr-card h3{font:700 clamp(19px,1.5vw,22px)/1.15 var(--display);letter-spacing:-.025em}
.cr-card p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.cr-proof{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font:600 14px/1.2 var(--body);color:var(--emerald);text-decoration:none}
.cr-proof svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.cr-proof:hover svg{transform:translateX(3px)}
@media (max-width:1024px){.cr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cr-grid{grid-template-columns:minmax(0,1fr)}.cr-card{flex-direction:row;flex-wrap:wrap;align-items:center}.cr-badge{width:84px;height:84px}.cr-badge img{width:68px;height:68px}.cr-card h3{flex:1;min-width:0}.cr-card p,.cr-proof{flex-basis:100%}}
/* certificate badges shown as the original Google artwork: no tile, no radius, no hover effect (Lucian) */
.cr-badge{width:auto;height:auto;background:none;border-radius:0;display:block;margin-bottom:8px;place-items:initial}
.cr-badge img{width:110px;height:110px;border-radius:0;transition:none;transform:none}
.cr-card,.cr-card:hover{transform:none;box-shadow:none;transition:none}
@media (max-width:520px){.cr-badge{width:auto;height:auto}.cr-badge img{width:84px;height:84px}}
.lx-in .curtain{animation:lx-safe 0s 4s forwards}@keyframes lx-safe{to{visibility:hidden}} /* safety: never leave a page covered if the script fails */

/* Web design "Freelancer vs Lucian vs Agency" (Oct 2026): short names only on phones */
.ctab .sh{display:none}
.cmp2-head h3 .vs{font-size:.8em;margin:0 .06em}
@media (max-width:760px){
  /* one header row with the three names (stays on screen while you scroll the rows), no repeated labels in every cell */
  .cmp2 .ctab thead{display:block;position:sticky;top:calc(var(--hdr-b,0px) + 6px);z-index:3;padding:8px 0;background:var(--paper);transition:top .45s var(--ease)}
  .cmp2 .ctab thead tr{gap:6px}
  .cmp2 .ctab thead th:not(.lab){display:flex;align-items:center;justify-content:center;padding:12px 6px;border-radius:12px!important;background:var(--paper-2)}
  .cmp2 .ctab thead th.me{background:var(--ink);padding-top:12px}
  .cmp2 .ctab thead .who,.cmp2 .ctab thead .tag{display:none}
  .cmp2 .ctab .sh{display:block;font:700 14px/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);text-align:center}
  .cmp2 .ctab thead .me .sh{color:var(--yellow)}
  .cmp2 .ctab tbody .lab{font-size:15.5px;margin-bottom:6px}
  .cmp2 .ctab td{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;font-size:14px}
  .cmp2 .ctab td::before{display:none}
  .cmp2 .ctab td.me{font-weight:700}
}
main{overflow-x:clip} /* device mockups (laptop base is 118% wide) must never push the page sideways on phones; clip keeps sticky working */


/* ---------- Device mockups v2 (Oct 2026): slim, modern, studio-lit ---------- */
.dev{position:relative;margin:0;--ring:color-mix(in srgb,var(--paper) 26%,var(--ink));--dev-edge:color-mix(in srgb,var(--ink) 55%,var(--paper))}
.dev .frame{position:relative;background:var(--ink);box-shadow:inset 0 0 0 1px var(--ring),0 0 0 1px var(--dev-edge),0 60px 90px -55px rgba(var(--shadow),.6),0 22px 40px -26px rgba(var(--shadow),.4)}
.dev .scr{position:relative;overflow:hidden;background:var(--paper);isolation:isolate}
.dev .scr img{display:block;width:100%;height:auto;will-change:transform}
.dev .scr::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 46%)}
/* laptop: thin bezel, camera dot, slim aluminium base with a thumb notch */
.dev.laptop .frame{padding:1.5% 1.5% 2.4%;border-radius:clamp(10px,1.5vw,18px) clamp(10px,1.5vw,18px) 3px 3px}
.dev.laptop .frame::before{content:"";position:absolute;top:.55%;left:50%;width:.7%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:color-mix(in srgb,var(--paper) 18%,var(--ink));box-shadow:0 0 0 1px var(--ring)}
.dev.laptop .scr{aspect-ratio:16/10;border-radius:3px}
.dev.laptop .base{position:relative;height:clamp(7px,1.3vw,14px);width:112%;margin-left:-6%;border-radius:2px 2px 50% 50%/2px 2px 100% 100%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 96%,var(--ink)) 0%,color-mix(in srgb,var(--paper) 78%,var(--ink)) 55%,color-mix(in srgb,var(--paper) 58%,var(--ink)) 100%);
  box-shadow:0 1px 0 color-mix(in srgb,var(--paper) 60%,var(--ink)) inset,0 26px 30px -20px rgba(var(--shadow),.55)}
.dev.laptop .base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:42%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:color-mix(in srgb,var(--paper) 72%,var(--ink))}
/* phone: titanium edge, side buttons, dynamic island */
.dev.phone .frame{padding:3.4%;border-radius:16%/7.4%}
.dev.phone .frame::before{content:"";position:absolute;right:-2px;top:24%;width:3px;height:10%;border-radius:0 3px 3px 0;background:var(--dev-edge)}
.dev.phone .frame::after{content:"";position:absolute;left:-2px;top:20%;width:3px;height:6%;border-radius:3px 0 0 3px;background:var(--dev-edge)}
.dev.phone .scr{aspect-ratio:9/19.5;border-radius:13%/6%}
.dev.phone .scr::before{content:"";position:absolute;z-index:3;top:1.6%;left:50%;width:32%;aspect-ratio:3.6/1;transform:translateX(-50%);border-radius:999px;background:var(--ink)}
/* tablet */
.dev.tablet .frame{padding:3.2%;border-radius:7.5%/5.6%}
.dev.tablet .scr{aspect-ratio:3/4;border-radius:2.6%/1.9%}
/* "Live site" tag: a small glass pill */
.dev-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;white-space:nowrap;
  font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink);background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 0 0 1px var(--line),0 12px 24px -16px rgba(var(--shadow),.5)}
.dev-chip i{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px color-mix(in srgb,var(--emerald) 22%,transparent)}
.dev.laptop .dev-chip{left:4%;top:-14px}
.dev.phone .dev-chip,.dev.tablet .dev-chip{left:50%;bottom:-16px;transform:translateX(-50%)}
/* soft studio glow behind each group */
.w2-hero-devs,.w2-how-dev,.w2-do-dev{isolation:isolate}
.w2-hero-devs::before,.w2-how-dev::before,.w2-do-dev::before{content:"";position:absolute;z-index:-1;inset:-8% -6% -4%;pointer-events:none;
  background:radial-gradient(42% 46% at 30% 40%,color-mix(in srgb,var(--yellow) 26%,transparent),transparent 70%),radial-gradient(40% 44% at 75% 70%,color-mix(in srgb,var(--emerald) 18%,transparent),transparent 70%);filter:blur(10px)}
.w2-how-dev{position:relative}
/* compositions: straight, calm, layered (no tilts) */
.w2-hero-devs{padding:16px 9% 9% 0}
.w2-hero-devs .lg{width:100%}
.w2-hero-devs .phn{position:absolute;right:0;bottom:0;width:23%;animation:dev-float 7s ease-in-out infinite}
.w2-how-dev .phone{width:min(250px,68%)}
.w2-do-dev{padding-top:16px}
.w2-do-dev .tb{position:absolute;left:0;bottom:0;width:30%;animation:dev-float 8s ease-in-out infinite reverse}
@keyframes dev-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.w2-hero-devs .phn,.w2-do-dev .tb{animation:none}}
.no-motion .w2-hero-devs .phn,.no-motion .w2-do-dev .tb{animation:none}
@media (max-width:860px){.w2-how-dev .phone{width:210px}.dev-chip{font-size:10px;padding:7px 11px}.w2-hero-devs .phn .dev-chip,.w2-do-dev .tb .dev-chip{display:none}}
.w2-how-dev .dev{--dev-edge:color-mix(in srgb,var(--paper) 42%,var(--ink));--ring:color-mix(in srgb,var(--paper) 38%,var(--ink))} .w2-how-dev::before{background:radial-gradient(45% 45% at 50% 45%,color-mix(in srgb,var(--emerald) 45%,transparent),transparent 70%)} /* phone on the dark band: lighter metal edge + emerald glow */

/* ---------- Device mockups v3: live screen recordings + showreel ---------- */
.dev .scr video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:var(--paper)}
.dev.tablet .scr{aspect-ratio:820/1180}
.reel{margin-block:clamp(36px,4.5vw,64px) clamp(48px,6vw,88px)}
.reel-cap{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--orange-ink);margin-bottom:clamp(18px,2.4vw,30px);text-align:center}
.reel-cap .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 color-mix(in srgb,var(--emerald) 50%,transparent);animation:reel-pulse 2s ease-out infinite}
@keyframes reel-pulse{to{box-shadow:0 0 0 10px transparent}}
.reel-stage{position:relative;isolation:isolate;max-width:1060px;margin:0 auto;padding:18px 9% 7% 0}
.reel-stage::before{content:"";position:absolute;z-index:-1;inset:-6% -4% -2%;pointer-events:none;filter:blur(12px);
  background:radial-gradient(40% 46% at 32% 42%,color-mix(in srgb,var(--yellow) 26%,transparent),transparent 70%),radial-gradient(38% 44% at 78% 72%,color-mix(in srgb,var(--emerald) 18%,transparent),transparent 70%)}
.reel-stage .lg{width:100%}
.reel-stage .phn{position:absolute;right:0;bottom:0;width:21%}
.reel-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,3vw,36px)}
.rt{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:150px;padding:12px 18px 14px;border-radius:16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;text-align:left;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.rt:hover{transform:translateY(-2px);border-color:var(--ink)}
.rt b{font:700 16px/1.1 var(--display);letter-spacing:-.01em}
.rt small{font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.rt[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rt[aria-selected="true"] small{color:color-mix(in srgb,var(--paper) 70%,var(--ink))}
.rt-bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--yellow);transform-origin:left;transform:scaleX(var(--p,0));opacity:0}
.rt[aria-selected="true"] .rt-bar{opacity:1}
@media (max-width:760px){
  .reel-stage{padding:14px 10% 9% 0}
  .reel-stage .phn{width:25%}
  .reel-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--gut));padding:4px var(--gut) 6px}
  .reel-tabs::-webkit-scrollbar{display:none}
  .rt{min-width:auto;flex:none;padding:10px 14px 12px}
}

/* About: three phones playing client sites (on the navy band) */
.band.ink .dev{--dev-edge:color-mix(in srgb,var(--paper) 42%,var(--ink));--ring:color-mix(in srgb,var(--paper) 38%,var(--ink))}
.phone-trio{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,44px);margin-top:clamp(48px,6vw,88px)}
.phone-trio::before{content:"";position:absolute;z-index:-1;inset:-10% 10%;pointer-events:none;filter:blur(14px);background:radial-gradient(50% 50% at 50% 55%,color-mix(in srgb,var(--emerald) 40%,transparent),transparent 72%)}
.phone-trio .dev{width:clamp(130px,17vw,230px)}
.phone-trio .mid{width:clamp(160px,21vw,280px);z-index:1}
.phone-trio .side{opacity:.92}
.phone-trio .side:first-child{translate:0 -24px}.phone-trio .side:last-child{translate:0 24px}
.trio-note{margin-top:clamp(34px,4vw,48px);text-align:center;color:var(--on-ink);font-size:15px}
@media (max-width:640px){.phone-trio{gap:10px}.phone-trio .dev{width:27vw}.phone-trio .mid{width:34vw}.phone-trio .dev-chip{display:none}.phone-trio .side:first-child,.phone-trio .side:last-child{translate:0 0}}

/* Device mockups v4: still images (fast). Screens are cropped to the device shape, top of the site. */
.dev .scr img{width:100%;height:100%;object-fit:cover;object-position:top;will-change:auto;transition:opacity .22s ease}
.reel.swap .dev .scr img{opacity:.15}
.reel .rt-bar{transform:scaleX(0);opacity:0}
.reel.run .rt[aria-selected="true"] .rt-bar{opacity:1;animation:rt-fill var(--dur,6s) linear forwards}
@keyframes rt-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* floating long-page card behind the devices (top-right, peeking out above the laptop) */
.pagecard{position:absolute;z-index:0;top:-2%;right:4%;width:27%;aspect-ratio:480/900;border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:0 0 0 1px var(--line),0 40px 70px -40px rgba(var(--shadow),.55),0 16px 30px -22px rgba(var(--shadow),.35);transition:opacity .22s ease}
.pagecard img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.pagecard::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--paper) 92%,transparent))}
.w2-hero-devs .lg,.reel-stage .lg{position:relative;z-index:1}
.w2-hero-devs .phn,.reel-stage .phn{z-index:2}
.w2-hero-devs{padding-top:clamp(70px,9vw,130px)}
.w2-hero-devs .pagecard{top:0;right:12%;width:26%}
.reel-stage{padding-top:clamp(70px,8vw,120px)}
.reel-stage .pagecard{top:0;right:14%;width:24%}
.reel.swap .pagecard{opacity:.15}
@media (max-width:760px){.w2-hero-devs .pagecard,.reel-stage .pagecard{width:30%;right:10%}}

/* composition v2: laptop left · long page standing on the right · phone in front where they meet */
.w2-hero-devs,.reel-stage{padding:0 0 5% 0}
.w2-hero-devs .lg,.reel-stage .lg{width:75%}
.w2-hero-devs .pagecard,.reel-stage .pagecard{top:0;right:0;width:28%}
.w2-hero-devs .phn,.reel-stage .phn{right:15%;bottom:0;width:18%}
.pagecard::after{height:30%}
@media (max-width:760px){.w2-hero-devs .lg,.reel-stage .lg{width:78%}.w2-hero-devs .pagecard,.reel-stage .pagecard{width:30%;right:0}.w2-hero-devs .phn,.reel-stage .phn{width:22%;right:12%}}

/* Software page logo strips (Lucian, Oct 2026): two rows per group, plain original logos, no edge fade, no hover effect */
.logos{-webkit-mask:none;mask:none;margin-top:8px;padding:6px 0}
.logos + .logos{margin-top:0}
.logos:hover .logos-track{animation-play-state:running}
.logos span{transition:none}
.logos span:hover{transform:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--paper) 22%,var(--ink))}

/* Home hero final beat (Lucian, Oct 2026): "bloom." pops, sits on its own line on desktop; easier-to-read sub line */
.shop .bloom .s{position:relative;display:inline-block;isolation:isolate;color:var(--emerald);font-size:1.22em;padding:0 .06em;transform-origin:30% 70%}
.shop .bloom .s::before{content:"";position:absolute;z-index:-1;left:-.02em;right:-.02em;bottom:.12em;height:.3em;border-radius:.12em;background:color-mix(in srgb,var(--yellow) 75%,transparent);transform-origin:left;transform:scaleX(var(--hl,1))}
@media (min-width:761px){.shop .bloom .s{display:block;width:max-content;margin:.02em auto 0}}
.shop .sub{font:500 clamp(17px,1.5vw,22px)/1.6 var(--body);color:var(--ink);max-width:50ch;letter-spacing:0;text-shadow:0 0 14px var(--paper),0 0 2px var(--paper)}

/* About: photo with clients (replaced the three phones, Lucian Oct 2026), on the navy 582+ band */
.ab-clients{margin:clamp(48px,6vw,88px) auto 0;max-width:820px}
.ab-clients .rv{border-radius:24px;overflow:hidden;--r:24px}
.ab-clients img{display:block;width:100%;height:auto}
.ab-clients figcaption{margin-top:16px;text-align:center;color:var(--on-ink);font-size:16px;line-height:1.5}
.ab-clients figcaption .cap{display:block;margin-bottom:6px;color:var(--yellow)}
/* hero paragraph on a frosted panel so it reads over the flowers (Lucian: "still hard to read") */
.shop .sub{background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9);
  padding:clamp(14px,1.4vw,20px) clamp(18px,2vw,28px);border-radius:20px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),0 18px 40px -26px rgba(var(--shadow),.45);
  text-shadow:none;color:var(--ink);font-weight:500}

/* blog cards: date on the left, a clear "Read more" pill on the right (Lucian, Oct 2026) */
.bc-meta{margin-top:8px}
.bc-meta time{color:var(--muted)}
.bc-go{padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 14px/1 var(--body);letter-spacing:0;text-transform:none;transition:background .25s}
.bc-go svg{width:14px;height:14px}
.bcard:hover .bc-go{background:var(--emerald)}
.nf{min-height:70vh;padding-top:clamp(140px,16vw,200px)}.nf h1{font-size:clamp(44px,6vw,96px);margin:14px 0 18px}.nf-links{list-style:none;padding:0;margin:24px 0 32px;display:flex;flex-wrap:wrap;gap:10px}.nf-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}.nf-links a:hover{border-color:var(--ink)}.nf-links svg{width:14px;height:14px}

/* Contact first section (Oct 2026): simple, like the service pages */
.cth-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.cth-copy{display:flex;flex-direction:column;gap:18px}
.cth-big{font-size:clamp(46px,6.6vw,112px);line-height:.95}
.cth-big .s{color:var(--orange-ink)}
.cth .lead{max-width:44ch}
.cth-ways{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}
.cth-way{display:inline-flex;flex-direction:column;gap:3px;padding:10px 18px;border-radius:16px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;transition:border-color .25s}
.cth-way:hover{border-color:var(--ink)}
.cth-way .cap{color:var(--muted);font-size:10px}
.cth-chat{justify-self:center;width:min(380px,100%);border-radius:30px;background:var(--paper-2);box-shadow:0 0 0 1px var(--line),0 40px 70px -45px rgba(var(--shadow),.55);overflow:hidden}
.cc-top{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--emerald);color:var(--paper)}
.cc-top .av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:var(--paper)}
.cc-top .av img{width:100%;height:100%;object-fit:cover;display:block}
.cc-top b{display:block;font-size:15px}.cc-top i{font-style:normal;font-size:12px;opacity:.8}
.cc-body{display:flex;flex-direction:column;gap:10px;padding:22px 18px 26px;background:color-mix(in srgb,var(--paper) 88%,var(--yellow))}
.cc-body .b{max-width:82%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;color:var(--ink);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
.cc-body .out{align-self:flex-end;background:color-mix(in srgb,var(--emerald) 18%,var(--paper));border-bottom-right-radius:4px}
.cc-body .out i{font-style:normal;font-size:11px;color:var(--emerald);margin-left:6px}
.cc-body .in{align-self:flex-start;background:var(--paper);border-bottom-left-radius:4px}
.cth-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.cth-steps li{display:flex;flex-direction:column;gap:8px}
.cth-steps .cap{color:var(--orange-ink)}
.cth-steps p{font-size:17px;line-height:1.5;color:var(--ink-2)}
.cth-steps b{color:var(--ink)}
@media (max-width:860px){.cth-grid,.cth-steps{grid-template-columns:minmax(0,1fr)}.cth-chat{justify-self:stretch;width:100%}}

.cth h1{font:500 clamp(12px,1vw,14px)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin:0}

/* blog post share buttons: same size, icon centred on the text (Lucian, Oct 2026) */
.ar-share{align-items:stretch}
.ar-sh{height:42px;padding:0 16px;justify-content:flex-start;gap:9px;line-height:1;white-space:nowrap}
.ar-sh svg{flex:none;display:block;width:17px;height:17px;margin:0;vertical-align:middle}
.ar-sh span{display:block;line-height:1}
@media (max-width:860px){.ar-share{align-items:center}.ar-sh{flex:0 0 auto}}.ar-share .ar-sh{display:inline-flex;flex-direction:row;align-items:center} /* beats the sidebar link rule (display:block) that pushed the icon onto its own line */
.ar-toc .ar-share .ar-sh{margin:0;padding:0 16px;border:1px solid var(--line);font:600 14px/1 var(--body);color:var(--ink)} .ar-toc .ar-share .ar-sh:hover{border-color:var(--ink)} /* share buttons are not table-of-contents links */
@media (max-width:860px){.ar-share{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.ar-share .cap{flex-basis:100%;margin:0}.ar-toc .ar-share .ar-sh{flex:1 1 0;min-width:0;justify-content:center;gap:7px;padding:0 10px;font-size:13.5px}} /* phones: label on top, both share buttons in one row */
.ar-sh .sh-on{display:inline} @media (max-width:379px){.ar-sh .sh-on{display:none}} /* tiny phones: "WhatsApp" only, so both buttons stay in one row */
.ar-mono{overflow:hidden;background:var(--yellow);box-shadow:0 0 0 2px var(--yellow)} .ar-mono img{display:block;width:100%;height:100%;object-fit:cover} /* blog author: Lucian's header photo instead of "LY" (Lucian, Oct 2026) */