/* ============================================================
   lukasdigitalstudio.com — Lukas Stanko
   One stylesheet. Light page, dark top band (header + hero) and footer.
   Tokens: light set on :root, the Graphite dark set on .dark.
   ============================================================ */

/* ---------- fonts: self-hosted latin subsets ---------- */
/* chosen in the font lab (?fonts), 2026-10-17: EB Garamond for headings, Geist for text, Geist Mono for labels */
@font-face{font-family:'EB Garamond';src:url('assets/fonts/eb-garamond.woff2') format('woff2');font-weight:400 800;font-display:swap;font-style:normal}
@font-face{font-family:'Geist';src:url('assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}

/* ---------- tokens ---------- */
:root{
  --bg:#f6f8fa;
  --bg-2:#ebf0f4;
  --surface:#ffffff;
  --surface-2:#f1f5f8;
  --ink:#0f1a24;
  --ink-2:#44586a;
  --ink-3:#566b7b;
  --line:#dbe4ec;
  --line-2:#c3d0db;
  --accent:#1d6fa3;
  --accent-ink:#ffffff;
  --accent-soft:#e1eef7;
  --accent-dim:#175b86;
  --accent-light:#5fb5ea;
  --warn:#b8603a;
  --warn-soft:#f6e6de;
  --radius:14px;
  --radius-sm:8px;
  --radius-lg:16px;
  --bw:1px;
  --shadow:0 1px 2px rgba(15,26,36,.06), 0 18px 44px -24px rgba(15,26,36,.28);
  --win-bar:#f1f5f8;
  --win-line:rgba(15,26,36,.1);
  --f-display:'EB Garamond',Georgia,serif;
  --h-w:500;
  --h-track:-.02em;
  --h1-w:400;          /* the lab said 350; EB Garamond starts at 400 */
  --h1-lh:1.06;
  --f-body:'Geist',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,monospace;
  --h1-size:clamp(2rem,min(4.2vw,6.2svh),3.5rem);   /* follows the window width AND height */
  --h2-size:clamp(1.8rem,3.2vw,2.5rem);
  --btn-radius:100px;
}
/* Graphite, from the previous site: header, hero, footer, the code panel */
.dark{
  --bg:#0f1a24;
  --bg-2:#132230;
  --surface:#162634;
  --surface-2:#1a2b3a;
  --ink:#e6f0f7;
  --ink-2:#a7b8c6;
  --ink-3:#7d93a5;
  --line:#22364a;
  --line-2:#2f4761;
  --accent:#5fb5ea;
  --accent-ink:#071017;
  --accent-soft:#1a3448;
  --accent-dim:#8ccdf3;
  --accent-light:#9fdcff;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 24px 56px -24px rgba(0,0,0,.7);
  --win-bar:#132230;
  --win-line:rgba(255,255,255,.1);
  background:var(--bg);color:var(--ink);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* the body itself is navy, the content is light: so what the glass header
   blurs is always dark, never the page background leaking in at the top */
body{
  margin:0;background:#0f1a24;color:var(--ink);overflow-x:clip;
  font-family:var(--f-body);font-size:var(--body-size,17px);line-height:var(--body-lh,1.62);font-weight:var(--body-w,400);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0}
h1,h2{font-family:var(--f-display);font-weight:var(--h-w);font-style:var(--h-style,normal)}
h1,.hero-h1{font-family:var(--f-h1,var(--f-display));font-weight:var(--h1-w,var(--h-w))}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--accent-ink)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

main{background:var(--bg);isolation:isolate}
/* side margin grows with the window: 22 px on small screens, up to 64 px on mid-size
   windows, so content never hugs the window edge before the 1180 px column is centred */
.wrap{width:min(1180px,100% - 2 * clamp(22px,5vw,64px));margin-inline:auto}
.sec{padding:clamp(60px,8vw,104px) 0}
/* anchors sit on the headings: a jump lands ~28px under the 72px sticky header */
h2[id]{scroll-margin-top:100px}
.sec-alt{background:var(--bg-2)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ---------- shared type ---------- */
h1,.hero-h1{font-size:var(--h1-size);letter-spacing:var(--h1-track,var(--h-track));line-height:var(--h1-lh,1.08)}
h2{font-size:var(--h2-size);letter-spacing:var(--h-track);line-height:var(--h2-lh,1.14)}
h3{font-family:var(--f-h3,var(--f-body));font-size:1.14rem;font-weight:var(--h3-w,600);letter-spacing:-.012em;line-height:1.3}
.sec-head{max-width:64ch;margin-bottom:clamp(32px,4.5vw,52px)}
.sec-sub{margin-top:14px;color:var(--ink-2);font-size:1.06rem;max-width:60ch}
.footnote{margin-top:34px;color:var(--ink-3);font-size:.86rem;max-width:74ch;line-height:1.62}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-3);margin:0 0 12px}
.tlink{color:var(--accent);text-decoration:none;font-weight:600;border-bottom:1px solid var(--accent-soft);padding-bottom:1px}
.tlink:hover{border-bottom-color:var(--accent)}

/* things Lukas still has to supply: visible, muted, never invented */
.todo{color:var(--ink-3);font-style:normal;border-bottom:1px dashed var(--line-2)}
a.todo{color:var(--ink-3);border-bottom-color:var(--line-2);cursor:default}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;border-radius:var(--btn-radius);border:var(--bw) solid transparent;
  font-family:var(--f-ui,var(--f-body));font-size:.94rem;font-weight:var(--ui-w,600);letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;text-align:center;
  transition:transform .15s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn-solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-dim);border-color:var(--accent-dim);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-lg{padding:15px 26px;font-size:1rem}
.btn-sm{padding:9px 15px;font-size:.85rem}
.btn-block{width:100%}
/* on the dark band the primary button is glass, as on the previous site; except in
   the hero, where the reviewer wanted the main action solid and bright (2026-10-17) */
.dark .btn-solid{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.dark .btn-solid:hover{background:color-mix(in srgb,var(--accent) 24%,transparent);border-color:var(--accent)}
.hero .btn-solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hero .btn-solid:hover{background:var(--accent-dim);border-color:var(--accent-dim)}

/* ============================================================
   HEADER
   ============================================================ */
.head{
  position:fixed;top:0;left:0;right:0;z-index:60;   /* fixed, not sticky: Chrome flickers a blurred sticky header while scrolling */
  /* The glass look without backdrop-filter (2026-10-17). Any backdrop-filter in
     the header made Chrome on macOS now and then drop the blur layer and every
     layer drawn after it for one frame: first the whole header, then the logo,
     menu, button and scrollbar (both recorded by Lukas; a solid header never
     did it). An 82 % fill without blur let the page ghost through sharply. So
     the header is solid and takes the two colours the glass actually showed:
     navy over the dark hero/footer, and navy mixed 82/18 with the light page
     once light content is under it (.on-light, set by script.js). A plain
     colour transition involves no blur pass. */
  background:var(--bg);transition:background-color .3s ease;
  border-bottom:var(--bw) solid var(--line);
}
.head.on-light{background:color-mix(in srgb,var(--bg) 82%,#f1f4f7)}
body{padding-top:72px}   /* room for the fixed header */
/* always glass: the body behind it is navy, so at the top it reads as one solid
   band with the hero, and the blur only shows once light content passes under.
   A solid/glass switch on scroll was tried and removed: it blinked. */
.head-in{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;min-width:0;color:var(--accent)}
.brand-text{display:flex;flex-direction:column;gap:3px;min-width:0}
/* the // mark from the previous site: a glass tile, like the buttons */
.brand-mark{flex:none;display:block}
.brand-mark rect{fill-opacity:.16;stroke:var(--accent);stroke-opacity:.45;stroke-width:1.5}
.brand-mark path:nth-of-type(1){stroke:var(--accent)}
.brand-mark path:nth-of-type(2){stroke:var(--accent-light)}
.brand-word{font-weight:400;font-size:1.14rem;letter-spacing:-.025em;color:var(--ink);line-height:1;white-space:nowrap}
.brand-word b{font-weight:700}
.brand-tag{font-size:.72rem;color:var(--ink-3);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:26px}
.nav a:not(.btn){font-family:var(--f-ui,var(--f-body));
  text-decoration:none;font-size:.93rem;color:var(--ink-2);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;white-space:nowrap;
}
.nav a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav .nav-cta{padding:11px 18px}

.burger{display:none;width:42px;height:42px;background:none;border:var(--bw) solid var(--line-2);border-radius:var(--radius-sm);cursor:pointer;padding:0;place-items:center;gap:5px;flex:none}
.burger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(52px,7vw,96px);border-bottom:var(--bw) solid var(--line)}
/* on wide screens the dark band fills the window below the fixed header, whatever
   its height, with the content centred in it; on phones it is as tall as its content */
@media (min-width:1001px){
  .hero{display:grid;align-content:center}
  /* and everything in it scales with the window height, so the whole hero fits the
     first screen from about 550 px tall up; at 800 px and above it is the full design */
  .hero{--hp:clamp(24px,7svh,96px);padding:var(--hp) 0}
  .hero .lede{margin-top:clamp(12px,2.8svh,24px);font-size:clamp(1rem,2.1svh,1.12rem)}
  .hero .hero-sig{margin-top:clamp(10px,2.1svh,18px)}
  .hero .hero-actions{margin-top:clamp(16px,3.4svh,28px)}
  .hero .btn-lg{padding:clamp(11px,1.9svh,15px) clamp(20px,3.2svh,26px);font-size:clamp(.92rem,1.9svh,1rem)}
  .hero .trust{margin-top:clamp(14px,3.6svh,30px)}
  .hero .hero-photo{width:min(100%,400px,calc((100svh - 72px - 2 * var(--hp)) * .75))}
}
/* Desktop: the hero always leaves a band at the bottom of the first screen where
   the next section peeks in (its heading shows), at any window height, so it never
   reads as a navy block running to the bottom edge. The band is 120 to 180 px,
   the hero tops out at 760 px, and the photo and spacing shrink to fit above it. */
@media (min-width:1001px){
  /* no min-height: the content sits close under the menu bar (small top padding) and
     the hero ends after it; the photo is sized so the hero never runs into the band */
  .hero{--peek:clamp(120px,15svh,180px);--hpt:clamp(28px,4.5svh,56px);--hpb:clamp(40px,6svh,72px);padding:var(--hpt) 0 var(--hpb)}
  .hero .hero-photo{width:min(100%,400px,calc((100svh - 72px - var(--peek) - var(--hpt) - var(--hpb)) * .75))}
  .hero + .sec{padding-top:clamp(44px,5.5svh,64px)}
}

.hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-h1{max-width:22ch;text-wrap:balance}
.nw{white-space:nowrap}
.lede{margin:24px 0 0;font-size:1.12rem;line-height:1.6;color:var(--ink-2);max-width:52ch}
.hero-sig{margin:18px 0 0;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;color:var(--ink-3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* every item carries a leading dot of a fixed width; the items are drawn one dot
   width to the left and the list clips that edge, so the first dot on any line,
   wrapped or not, is never visible */
.trust{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:30px;font-size:.88rem;color:var(--ink-2);overflow:hidden}
.trust li{display:flex;align-items:center;position:relative;left:-28px}
.trust li::before{content:"·";display:inline-block;width:28px;text-align:center;color:var(--ink-3)}
.trust a{text-decoration:none;color:var(--ink);font-variant-numeric:tabular-nums}
.trust a:hover{color:var(--accent)}
.hero-photo{justify-self:end;width:min(100%,400px)}
.hero-photo img{border-radius:var(--radius-lg);border:var(--bw) solid var(--win-line);box-shadow:var(--shadow);width:100%;aspect-ratio:3/4;object-fit:cover}

/* ---------- shared window chrome (macOS-style) ---------- */
.win{background:var(--surface);border:var(--bw) solid var(--win-line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:var(--win-bar);border-bottom:var(--bw) solid var(--win-line);flex:none}
.win-dots{display:flex;gap:7px;flex:none}
.win-dots i{width:11px;height:11px;border-radius:50%;background:#cfd8df}
.win-title{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--ink-2);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-dots + .win-title{margin-right:47px}
.win-url{flex:1;height:30px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);background:var(--bg);border:var(--bw) solid var(--line);border-radius:100px;padding:0 34px}
.win-url::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:9px;transform:translateY(-50%);background:repeating-linear-gradient(to bottom,var(--ink-3) 0 1.5px,transparent 1.5px 3.75px);opacity:.8}
.win-url::after{content:"↻";position:absolute;right:11px;top:50%;transform:translateY(-52%);font-family:var(--f-body);font-size:.95rem;line-height:1;color:var(--ink-3)}
.win-bar-dark{background:#132230;border-bottom-color:#1e3242}
.win-bar-dark .win-dots i{background:#2b4357}

/* ============================================================
   WHO THIS IS FOR
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden}
.tiles li{background:var(--surface);padding:clamp(20px,2.6vw,28px)}
.tiles h3{margin-bottom:8px}
.tiles p{color:var(--ink-2);font-size:.95rem;margin:0}

/* ============================================================
   SOUND FAMILIAR?
   ============================================================ */
.pairs{display:grid;gap:1px;background:var(--line);border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:1000px}
.pairs li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,40px);background:var(--surface);padding:clamp(20px,2.8vw,30px)}
.pair-q{font-family:var(--f-display);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;letter-spacing:-.01em;margin:0}
.pair-a{color:var(--ink-2);margin:0;align-self:center}

/* ============================================================
   BUILT FOR YOUR CUSTOMER + the drawn brief
   ============================================================ */
.method{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.method-copy h2{margin-bottom:20px}
.method-copy p{color:var(--ink-2);max-width:58ch}
.brief{
  margin:0;justify-self:center;width:min(100%,380px);padding:28px 30px 32px;
  background:var(--surface);border:var(--bw) solid var(--line);border-radius:6px;
  box-shadow:var(--shadow);transform:rotate(-1.2deg);position:relative;
}
.brief::before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:20px;transform:translateX(-50%) rotate(1deg);background:color-mix(in srgb,var(--accent) 18%,transparent);border-radius:2px}
.brief-title{font-family:var(--f-display);font-size:1.5rem;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.brief-lines{display:grid;gap:18px;margin:0}
.brief-lines div{display:grid;gap:6px}
.brief-lines dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em;color:var(--ink-3)}
.brief-lines dd{margin:0;padding-bottom:5px;border-bottom:1.5px solid var(--line-2);font-family:var(--f-display);font-size:1.12rem;line-height:1.3;color:var(--ink)}
.brief-lines div:nth-child(4) dd{color:var(--accent);font-weight:600}
.brief-cap{margin:18px 0 0;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}

/* ============================================================
   PROOF: three cards
   ============================================================ */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.card-body{padding:clamp(20px,2.4vw,26px)}
.card-h{font-family:var(--f-display);font-weight:var(--h-w);font-size:1.5rem;letter-spacing:var(--h-track);margin-bottom:16px}
.card-line{color:var(--ink-2);font-size:.95rem}
.card-link{margin-top:12px;font-size:.95rem}
.card-cta{margin-top:20px}
.ba{display:grid;gap:10px;margin:0 0 18px}
.ba div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:var(--bw) solid var(--line)}
.ba dt{font-size:.9rem;color:var(--ink-2)}
.ba dd{margin:0;font-family:var(--f-mono);font-size:.92rem;white-space:nowrap}
.ba s{color:var(--ink-3);text-decoration:line-through}
.ba i{font-style:normal;color:var(--ink-3);margin:0 7px}
.ba b{color:var(--accent);font-weight:700}
.quote{margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--accent-soft);background:var(--surface-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.quote p{font-size:.95rem;color:var(--ink-2);margin:0 0 6px}
.quote cite{font-style:normal;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.card-next .card-body{display:flex;flex-direction:column}

/* the meter */
.meter .win-dots + .win-title{margin-right:0}
/* one plain number, the rest behind "Show the details" */
.meter-time{margin:0;font-size:1.05rem;color:var(--ink-2);line-height:1.3}
.meter-time b{display:block;margin-top:6px;font-family:var(--f-display);font-weight:var(--h-w);font-size:clamp(2.4rem,4vw,3.2rem);letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.meter-sub{margin:8px 0 0;font-size:.85rem;color:var(--ink-3)}
.meter-more{margin-top:20px;border-top:var(--bw) solid var(--line);padding-top:12px}
.meter-more summary{cursor:pointer;font-size:.85rem;color:var(--accent);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.meter-more summary::-webkit-details-marker{display:none}
.meter-more summary::after{content:"+";font-family:var(--f-mono);font-weight:400}
.meter-more[open] summary::after{content:"–"}
.meter-total{margin:14px 0 12px;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2)}
.bar{display:flex;height:12px;border-radius:100px;overflow:hidden;background:var(--bg-2);gap:2px}
.bar-seg{height:100%;min-width:2px;transition:flex-grow .6s cubic-bezier(.2,.7,.3,1)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.legend li{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:2px;flex:none}
.meter-note{margin-top:16px;padding-top:14px;border-top:var(--bw) solid var(--line);font-size:.85rem;color:var(--ink-2);line-height:1.5}
/* no script: the figures stay blank and the note explains why */
.no-js .meter-figs,.no-js .bar,.no-js .legend,.no-js #meterNote{display:none}

/* ============================================================
   SERVICES
   ============================================================ */
/* a price list, like a menu board: name and one line on the left, price on the right,
   a rule between rows; the monthly care plan sits a little apart at the end */
.svc{border-bottom:var(--bw) solid var(--line);max-width:900px}
.svc-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;row-gap:4px;padding:18px 0;border-top:var(--bw) solid var(--line)}
.svc-item h3{grid-column:1;grid-row:1;margin:0}
.svc-item p{grid-column:1 / -1;grid-row:2;color:var(--ink-2);font-size:.95rem;margin:0}
.svc-item .price{grid-column:2;grid-row:1;align-self:baseline;text-align:right;white-space:nowrap;font-family:var(--f-mono);font-size:.82rem;color:var(--ink-3)}
.svc-item .price b{color:var(--ink);font-weight:700;font-size:1.05rem}
.price-note{display:block;margin-top:3px;font-family:var(--f-body);font-size:.74rem;color:var(--ink-3)}
@media (min-width:561px){
  .svc-item .price{grid-row:1 / span 2}
  .svc-item p:not(.price){grid-column:1}
}
.svc-item:last-child{margin-top:14px}
.svc-gst{margin-top:14px;font-size:.86rem;color:var(--ink-3)}
.svc-cta{margin-top:18px}
.svc-more{margin-top:26px;color:var(--ink-2)}

/* ============================================================
   TWO PROMISES
   ============================================================ */
/* drawn like the "Sound familiar?" panel: one white panel split by a hairline */
.promises{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:1000px}
.promise{padding:clamp(22px,3vw,34px);background:var(--surface)}
.promise h3{font-family:var(--f-display);font-weight:var(--h-w);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;letter-spacing:-.01em;margin-bottom:10px}
.promise p{color:var(--ink-2);margin:0}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s;padding-top:14px;border-top:2px solid var(--accent)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--f-mono);font-size:.74rem;color:var(--accent);margin-bottom:10px}
.steps h3{margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:.92rem;margin:0}
.steps-note{margin-top:34px;padding-top:22px;border-top:var(--bw) solid var(--line);color:var(--ink-2);max-width:64ch}

/* ============================================================
   UNDER THE HOOD: editor + phone
   ============================================================ */
.hood{display:grid;gap:clamp(28px,4vw,40px)}
.hood-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 28px}
.hood-points li{padding-left:22px;position:relative;color:var(--ink-2)}
.hood-points li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.hood-points b{color:var(--ink);font-weight:600}
.hood-note{margin-top:30px;color:var(--ink-2);max-width:64ch}

/* the box follows the window height on desktop: never taller than the 600 px design,
   never shorter than 320, otherwise what is left of the window under the fixed header,
   the section heading and its margins (about 230 px), so a jump to #code shows the
   whole box. The stage column is a square of it, so the stage scales with it (--k). */
.build{
  --bh:clamp(320px,calc(100vh - 230px),600px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--bh);height:var(--bh);
  border-radius:var(--radius);border:var(--bw) solid var(--line);box-shadow:var(--shadow);overflow:hidden;
}
.ed{display:flex;flex-direction:column;min-width:0;min-height:0;color:#c4d7e3;background:#0f1a24;position:relative}
.ed::after{content:"";position:absolute;left:0;right:12px;bottom:0;height:24px;background:linear-gradient(transparent,rgba(15,26,36,.9));pointer-events:none}
.build .win-bar{border-bottom:0;height:41px}
.ed-tabs{display:flex;gap:4px;height:100%}
.ed-tab{
  display:flex;align-items:center;padding:0 12px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.01em;
  color:#6b8597;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
}
.ed-tab:hover{color:#c4d7e3}
.ed-tab.is-on{color:#e6f0f7;border-bottom-color:var(--accent-light)}
.ed-replay{
  margin-left:auto;background:transparent;border:1px solid #2b4357;color:#9fb3c2;border-radius:100px;height:28px;display:inline-flex;align-items:center;
  padding:5px 10px;font-family:var(--f-mono);font-size:.7rem;cursor:pointer;transition:color .15s ease,border-color .15s ease;white-space:nowrap;
}
.ed-replay:hover{color:#e6f0f7;border-color:var(--accent-light)}
.ed-replay[hidden]{display:none}
.ed-code{
  margin:0;flex:1;min-height:0;padding:16px 16px 30px 0;overflow:hidden;
  font-family:var(--f-mono);font-size:.78rem;line-height:1.7;tab-size:2;
  scrollbar-width:thin;scrollbar-color:#3f586b #132230;
}
.ed-code::-webkit-scrollbar{width:12px;height:12px}
.ed-code::-webkit-scrollbar-thumb{background:#3f586b;border-radius:10px;border:3px solid #0f1a24}
.ed-code::-webkit-scrollbar-track{background:#132230;border-radius:10px;margin:6px 0}
/* the code only scrolls once it has been clicked, tapped or tabbed into, so a page
   scroll that passes over the editor keeps scrolling the page (script.js: engage) */
.ed-code.is-engaged{overflow:hidden auto;overscroll-behavior:contain}
.ed-hint{position:absolute;left:50%;bottom:18px;z-index:4;transform:translate(-50%,6px);margin:0;padding:7px 12px;border-radius:100px;background:rgba(19,34,48,.92);border:1px solid #2b4357;color:#c4d7e3;font-family:var(--f-mono);font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.ed-hint.on{opacity:1;transform:translate(-50%,0)}
.is-writing .ed-code{scrollbar-width:none}
.is-writing .ed-code::-webkit-scrollbar{display:none}
.is-writing .ed::after{display:none}
.ed-code i{font-style:normal}
.ed-buf{display:none;counter-reset:ln}
.ed-buf.is-on{display:block}
/* long lines soft-wrap at the gutter; the window never scrolls sideways */
.ed-ln{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding-left:46px;position:relative;min-height:1.7em}
.ed-ln::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:30px;text-align:right;color:#3f586b;font-size:.72rem}
.ed-ln.is-live::after{content:"";display:inline-block;width:7px;height:1.05em;vertical-align:-3px;margin-left:1px;background:#9fdcff;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.tk-t{color:#7cc0ea}.tk-a{color:#c9b3f5}.tk-s{color:#9fe3b8}.tk-p{color:#6b8597}.tk-x{color:#e6f0f7}.tk-sel{color:#ffd58a}

/* the stage: a desktop browser window behind, the phone in front, both rendering
   the typed code. Designed at 600×600 and scaled as one block (--k, set by script.js)
   so it fits any column; each screen is a virtual viewport (data-w) scaled to its frame. */
.stage{background:#132230;border-left:var(--bw) solid #1e3242;overflow:hidden;position:relative;height:calc(600px * var(--k,1));min-height:0}
.stage-in{position:absolute;left:50%;top:0;width:600px;height:600px;transform:translateX(-50%) scale(var(--k,1));transform-origin:50% 0}
.pc{position:absolute;left:24px;top:28px;width:500px;border-radius:12px;overflow:hidden;background:#0f1a24;box-shadow:0 0 0 2px #2b4357,0 30px 60px -24px rgba(0,0,0,.8)}
.pc-bar{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px;background:#1a2a39;border-bottom:1px solid #223447}
.pc-bar .win-dots i{width:9px;height:9px;background:#2b4357}
.pc-url{flex:1;height:18px;line-height:18px;text-align:center;font-family:var(--f-mono);font-size:.58rem;color:#6b8597;background:#0f1a24;border-radius:100px}
.pv-pc{width:500px;height:300px}
.phone{position:absolute;right:28px;top:168px;width:200px}
.phone-screen{
  width:200px;height:420px;border-radius:30px;background:#000;padding:8px;
  box-shadow:0 0 0 2px #2b4357,0 30px 60px -20px rgba(0,0,0,.85);position:relative;
}
.phone-screen::before{content:"";position:absolute;left:50%;top:11px;transform:translateX(-50%);width:54px;height:12px;border-radius:8px;background:#000;z-index:6}
.pv-ph{width:184px;height:404px;border-radius:23px}
.pv-body{position:relative;overflow:hidden;background:#fff}
/* the virtual viewport: laid out at data-w px wide (container queries see this width), then scaled */
/* each viewport is scaled a touch larger than its frame and starts 1px up and left,
   so sub-pixel rounding (the stage itself is scaled by --k) never leaves a seam of
   the white frame showing at an edge; the frame clips the overshoot */
.pv-scale{position:absolute;left:-1px;top:-1px;transform-origin:0 0;container-type:inline-size;overflow:hidden}
.pv-pc .pv-scale{width:1200px;height:722px;transform:scale(.4184)}
.pv-ph .pv-scale{width:320px;height:698px;transform:scale(.5813)}
/* the demo page is rendered inside .pv-out from the typed code: browser defaults
   apply until the typed CSS says otherwise, so the first frames look unstyled on purpose */
.pv-out{position:absolute;inset:0;overflow:hidden;font-family:serif;font-size:16px;line-height:1.4;color:#000;margin:8px}
.pv-out h1{font:bold 1.6em serif;margin:.6em 0;letter-spacing:0;line-height:1.15}
.pv-out p{margin:.8em 0}
.pv-out a{color:#0000ee;text-decoration:underline;font-size:1em}
.pv-out header,.pv-out section{display:block}
.pv-out video{display:block}
.pv-out button{cursor:pointer}
/* after the animation the screens are live; a small hint says so */
.stage-hint{position:absolute;left:24px;bottom:18px;white-space:nowrap;margin:0;font-family:var(--f-mono);font-size:.68rem;color:#6b8597;opacity:0;transition:opacity .4s ease .3s;pointer-events:none}
.stage.is-live .stage-hint{opacity:1}
.stage-hint b{color:#9fdcff;font-weight:600}
.no-js .stage{display:none}
.no-js .build{grid-template-columns:1fr;height:420px}
.no-js .ed-replay{display:none}

/* ============================================================
   ABOUT
   ============================================================ */
.about{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(30px,5vw,66px);align-items:center}
.about-photo{max-width:340px}
.about-photo img{border-radius:var(--radius);border:var(--bw) solid var(--win-line);box-shadow:var(--shadow);width:100%}
.about-copy h2{margin-bottom:18px}
.about-copy p{color:var(--ink-2);max-width:62ch}
.facts-row{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;padding-top:22px;border-top:var(--bw) solid var(--line);font-size:.92rem;color:var(--ink)}
.facts-row span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.02em;color:var(--ink-3);display:block;margin-bottom:2px}

/* ============================================================
   BILLING + FAQ
   ============================================================ */
.plain{display:grid;gap:14px;max-width:70ch}
.plain li{padding-left:24px;position:relative;color:var(--ink-2)}
.plain li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.faq{display:grid;gap:1px;background:var(--line);border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:860px}
.faq details{background:var(--surface)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 24px;font-weight:600;font-size:1.02rem;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:1.2rem;color:var(--accent);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq p{padding:0 24px 20px;margin:0;color:var(--ink-2);max-width:70ch}

/* ============================================================
   CONTACT + FREE CHECK
   ============================================================ */
/* Upwork variant only (build-upwork.py): one centred call to action instead of the contact block */
.upwork-cta{max-width:640px;margin-inline:auto;text-align:center}
.upwork-cta p{color:var(--ink-2);margin-top:14px}
.upwork-cta-btn{margin-top:26px}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,68px);align-items:start}
.contact-half h2{margin-bottom:14px}
.contact-line{color:var(--ink-2);max-width:48ch}
.cal{margin-top:24px}
.cal-note{margin-top:12px;font-size:.85rem}
.cal-frame{position:relative;height:510px;border-radius:var(--radius);overflow:hidden;background:#fff;border:var(--bw) solid var(--line);box-shadow:var(--shadow)}
.cal-frame iframe{display:block;position:relative;z-index:1}
.cal-loading{position:absolute;inset:0;margin:0;display:grid;place-items:center;font-size:.9rem;color:var(--ink-3)}
@media (max-width:560px){.cal-frame{height:560px}}
/* email and phone, under the two doors: two small outlined chips with an icon each */
.contact-direct{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(36px,5vw,56px);padding-top:26px;border-top:var(--bw) solid var(--line)}
.contact-direct > p{margin:0;color:var(--ink-2)}
.contact-links{display:flex;flex-wrap:wrap;gap:10px}
.contact-links a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:var(--bw) solid var(--line-2);border-radius:var(--btn-radius);background:var(--surface);text-decoration:none;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;transition:border-color .15s ease,color .15s ease}
.contact-links a:hover{border-color:var(--accent);color:var(--accent)}
.contact-links svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.form{margin-top:24px}
.form-body{padding:clamp(20px,2.6vw,26px);display:grid;gap:16px}
.field{display:grid;gap:7px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{font-size:.86rem;font-weight:500;color:var(--ink-2)}
.opt{font-weight:400;color:var(--ink-3)}
.field input{
  width:100%;padding:12px 14px;background:var(--bg);color:var(--ink);
  border:var(--bw) solid var(--line-2);border-radius:var(--radius-sm);
  font-size:1rem;transition:border-color .18s ease,box-shadow .18s ease;
}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field.err input{border-color:var(--warn)}
.field-msg{font-size:.8rem;color:var(--warn)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{margin:0;font-size:.85rem;color:var(--ink-3);text-align:center}
.form-note.ok{color:var(--accent)}
.form-note.bad{color:var(--warn)}
.form-note a{color:var(--accent)}

/* ============================================================
   FOOTER
   ============================================================ */
/* footer: brand and one line on the left, pages, contact; legal line under a rule */
.foot{border-top:var(--bw) solid var(--line);padding:clamp(48px,6vw,72px) 0 28px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:40px clamp(28px,5vw,64px);padding-bottom:clamp(36px,5vw,52px)}
.foot-brand .brand{margin:0 0 16px;display:inline-flex}
.foot-brand p{max-width:34ch;color:var(--ink-2);font-size:.95rem;margin:0}
.foot-h{margin:0 0 14px;font-size:.82rem;color:var(--ink-3)}
.foot-col ul{display:grid;gap:10px}
.foot-col a{text-decoration:none;color:var(--ink);font-size:.95rem}
.foot-col a:hover{color:var(--accent)}
.foot-contact a{font-variant-numeric:tabular-nums}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;padding-top:24px;border-top:var(--bw) solid var(--line)}
.foot-base p{margin:0;font-size:.8rem;line-height:1.6;color:var(--ink-3)}
.foot-build{font-family:var(--f-mono);font-size:.7rem}
@media (max-width:760px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:460px){
  .foot-top{grid-template-columns:1fr}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .proof{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr);gap:28px 20px}
}
@media (max-width:1000px){
  /* on a phone the photo becomes a small round portrait above the headline, so the
     face is on the first screen instead of below the fold */
  .hero-in{grid-template-columns:1fr;gap:22px}
  .hero-photo{order:-1;justify-self:start;width:96px}
  .hero-photo img{border-radius:50%;aspect-ratio:1;object-position:50% 30%;border-width:2px;box-shadow:none}
  .method{grid-template-columns:1fr}
  .hood-points{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:32px}
  .about-photo{max-width:280px}
  .contact{grid-template-columns:1fr}
}
@media (max-width:860px){
  .brand-tag{display:none}
  .burger{display:grid}
  .nav{
    position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:var(--bw) solid var(--line);
    padding:8px 22px 22px;transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;max-height:calc(100dvh - 72px);overflow:auto;
  }
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav a:not(.btn){padding:15px 0;border-bottom:var(--bw) solid var(--line);font-size:1.02rem;color:var(--ink)}
  .nav .nav-cta{margin-top:16px;justify-content:center}
}
@media (max-width:760px){
  .tiles{grid-template-columns:1fr 1fr}
  .pairs li{grid-template-columns:1fr;gap:10px}
  .proof{grid-template-columns:1fr}
  .promises{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .build{grid-template-columns:1fr;height:auto}
  .ed-code{flex:none;height:300px}
  .stage{border-left:0;border-top:var(--bw) solid #1e3242}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .brand-word{font-size:1.02rem}
  .hero-actions .btn{width:100%}
  /* the secondary action is a plain text link on phones */
  .hero-actions .btn-ghost{width:auto;align-self:center;padding:6px 0;border:0;background:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;font-weight:500}
  .hero-actions .btn-ghost:hover{transform:none;color:var(--ink)}
  /* two by two, no separators: a wrapped flex row put a dot at the start of line two */
  .trust{font-size:.84rem;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;overflow:visible}
  .trust li{left:0}
  .trust li::before{content:none}
  .steps{grid-template-columns:1fr;gap:22px}
  .meter-figs{grid-template-columns:1fr 1fr;gap:16px}
  .fig:last-child{grid-column:1/-1}
  .field-row{grid-template-columns:1fr;gap:12px}
  .ed-tab{padding:0 9px}
  .ed-replay{padding:4px 9px;font-size:.64rem;height:26px}
  .cmp-tag{font-size:.6rem;padding:4px 7px}
}
@media (max-width:400px){
  .tiles{grid-template-columns:1fr 1fr}
  .tiles li{padding:16px 14px}
  .tiles h3{font-size:1rem}
  .tiles p{font-size:.88rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   CASE STUDY PAGE (/jestrab): before/after slider, number bars, fact grid
   ============================================================ */
/* the whole browser window shrinks so its 16:10 screenshot fits the window height
   (minus header, bar and margins) without cropping; it is never narrower than 420 px */
.cs-cmp{max-width:max(420px,calc((100vh - 230px) * 1.6));max-width:max(420px,calc((100svh - 230px) * 1.6));margin-inline:auto}
.compare{position:relative;overflow:hidden;--split:50%}
.cmp-img{width:100%;display:block}
.cmp-clip{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.cmp-clip .cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:var(--accent);transform:translateX(-1px);pointer-events:none}
.cmp-handle::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;transform:translate(-50%,-50%);background:var(--accent);border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.cmp-tag{position:absolute;bottom:12px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.02em;padding:5px 9px;border-radius:7px;background:var(--surface);color:var(--ink);border:var(--bw) solid var(--line);pointer-events:none}
.cmp-tag-l{left:12px}
.cmp-tag-r{right:12px}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none;background:none}
.cmp-range:focus-visible{opacity:.001;outline:3px solid var(--accent);outline-offset:-3px}
.cmp-sr{position:absolute;left:-9999px}

.bars{display:grid;gap:26px;margin-bottom:clamp(40px,5vw,58px)}
.brow-label{display:block;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.05em;color:var(--ink-2);margin-bottom:11px}
.brow-track{display:grid;gap:7px}
.brow-fill{display:flex;align-items:center;justify-content:flex-end;height:38px;padding:0 13px;border-radius:var(--radius-sm);width:var(--pct);min-width:max-content}
.brow-fill b{font-family:var(--f-mono);font-size:.8rem;font-weight:700;white-space:nowrap}
.brow-before{background:var(--warn-soft);color:var(--warn);border:var(--bw) solid var(--warn)}
.brow-after{background:var(--accent);color:var(--accent-ink);border:var(--bw) solid var(--accent)}
.brow-zero{background:transparent;color:var(--accent);border-style:dashed;justify-content:flex-start}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden}
.facts>div{background:var(--surface);padding:22px 20px}
.facts dt{font-family:var(--f-mono);font-size:1.5rem;font-weight:700;letter-spacing:-.04em;color:var(--accent);line-height:1;white-space:nowrap}
.facts dd{margin:10px 0 0;font-size:.88rem;color:var(--ink-2);line-height:1.5}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

.cs-hero{padding-top:clamp(56px,8vw,96px)}
.cs-hero h1{margin:10px 0 14px}
.cs-lede{max-width:62ch}
.cs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:22px;font-family:var(--f-mono);font-size:.82rem;color:var(--ink-3)}
.cs-versions{margin-top:clamp(32px,4vw,48px);max-width:980px}
.cs-print{margin:20px 0 0;max-width:640px}
.cs-print img{width:100%;height:auto;border-radius:var(--radius);border:var(--bw) solid var(--win-line);box-shadow:var(--shadow)}
.cs-print figcaption{margin-top:10px;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3)}
.cs-list{counter-reset:cs;display:grid;gap:18px;max-width:78ch}
.cs-list li{counter-increment:cs;position:relative;padding-left:52px;color:var(--ink-2)}
.cs-list li::before{content:counter(cs);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--f-mono);font-size:.85rem;font-weight:600}
.cs-list b{color:var(--ink)}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.cs-grid{grid-template-columns:1fr}}
.cs-card{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
.cs-card .tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-3);margin:0 0 12px}
.cs-card h3{font-family:var(--f-body);font-weight:600;font-size:1.06rem;margin-bottom:8px}
.cs-card p{color:var(--ink-2);font-size:.97rem}
.cs-cta{text-align:center}
.cs-cta .sec-sub{margin-left:auto;margin-right:auto}
.cs-cta-row{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}

/* ============================================================
   Mobile booking bar: phones only, after the hero, hidden from the contact section down
   ============================================================ */
.mbar{display:none}
@media (max-width:599px){
  .mbar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:var(--bw) solid var(--line);box-shadow:0 -6px 20px rgba(15,23,34,.08);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;
  }
  .mbar.show{opacity:1;visibility:visible;transition:opacity .25s ease}
  .mbar .btn{width:100%;justify-content:center;padding-block:11px}
}
@media (prefers-reduced-motion:reduce){.mbar,.mbar.show{transition:none}}