/* Merwin Web Designz - site stylesheet.
   Loads third, after the two MWD Design System files:
     /Css/MWD_Tokens.css      (copied unchanged from the design system)
     /Css/MWD_Components.css  (copied unchanged from the design system)
   This file is layout and site-only patterns. Colours, type, buttons, fields, cards,
   labels and the status pill come from the system; do not restyle them here.

   Organised: legacy aliases -> layout -> header + services menu -> drawer -> hero ->
   section head -> home -> work -> services hub -> product pages -> about -> contact ->
   CTA -> footer -> print */

/* ============================================================ legacy aliases
   Pages and scripts written before the design system (the casino console, the
   leaderboard, Casino_Board.js) use the old token names. They map onto the system
   here so those pages restyle without being rewritten. New code uses the system names. */
:root{
  --ink-900:var(--surface-1);--ink-850:#121317;--ink-800:var(--surface-2);--ink-700:var(--surface-3);
  --ink-600:var(--surface-3);--ink-500:var(--surface-4);
  --line:var(--surface-4);--line-2:var(--surface-5);--line-3:var(--muted);
  --paper:var(--text);--paper-2:var(--text-2);--dim:var(--muted);
  --ember:var(--accent);--ember-hi:var(--accent-hi);--ember-lo:var(--accent-lo);
  --mint:var(--ok);--r-lg:var(--r);
  --shadow-card:none;--shadow-lift:var(--shadow-float);--shadow-control:none;
}
.dim{color:var(--muted)}
/* Gradient text is retired; the markup is stripped, but anything left renders plain. */
.grad-text{color:inherit}

/* ============================================================ layout */
html{scroll-padding-top:calc(var(--header-h) + var(--s-6))}
body{padding-top:var(--header-h);overflow-x:hidden}
.section{padding-block:var(--s-24)}
.section--tight{padding-block:var(--s-16)}
.band{background:#121317;border-block:1px solid var(--surface-4)}
.stack>*+*{margin-top:var(--s-5)}
code{font:500 .9em var(--font-mono);color:var(--text);background:var(--surface-3);padding:1px 6px;border-radius:var(--r-xs)}

/* ============================================================ header */
.hdr{
  position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(14,15,17,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-hover) var(--ease),background-color var(--dur-hover) var(--ease);
}
.hdr[data-scrolled="true"],.hdr[data-menu="open"]{background:var(--surface-1);border-bottom-color:var(--surface-4)}
.hdr>.wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)}
.hdr .brand__mark{width:34px;height:34px}
@media (max-width:420px){.hdr .brand__name span{display:none}.hdr .brand__name b{font-size:13px;letter-spacing:.3em}}

.nav{display:none}
.nav__list{display:flex;align-items:center;gap:var(--s-1)}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{
  position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);
  font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--muted);transition:color var(--dur-hover) var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--text)}
.nav__link::after{
  content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:8px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-hover) var(--ease);
}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__sep{width:1px;height:14px;background:var(--surface-5);margin:0 var(--s-1)}
.nav__toggle{
  display:inline-grid;place-items:center;width:28px;height:44px;margin-left:-8px;
  background:none;border:0;color:var(--muted);cursor:pointer;
}
.nav__toggle:hover,.nav__toggle[aria-expanded="true"]{color:var(--text)}
.nav__toggle svg{transition:transform var(--dur-hover) var(--ease)}
.nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr__cta{display:none}


/* ---- services menu (desktop) ---- */
.menu{
  position:fixed;left:0;right:0;top:var(--header-h);z-index:49;
  background:var(--surface-1);border-bottom:1px solid var(--surface-4);
  box-shadow:var(--shadow-float);
}
.menu[hidden]{display:none}
.menu__inner{display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:var(--s-8);padding-block:var(--s-10) var(--s-8)}
.menu__h{
  font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--surface-4);
}
.menu__h a:hover{color:var(--text)}
.menu__col ul{display:flex;flex-direction:column}
.menu__col li a{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:9px 0;color:var(--text);font-size:var(--t-sm);font-weight:500;
  transition:color var(--dur-hover) var(--ease);
}
.menu__col li a span{font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.menu__col li a:hover{color:var(--accent)}
.menu__col li a[aria-current="page"]{color:var(--accent)}
.menu__aside{padding:var(--s-6);background:var(--surface-2);border:1px solid var(--surface-4);border-top:2px solid var(--accent);border-radius:var(--r)}
.menu__aside p{font-size:var(--t-sm);color:var(--muted);margin:var(--s-2) 0 var(--s-5)}
.menu__aside strong{display:block;font:600 var(--t-md)/1.2 var(--font-display);color:var(--text)}
.menu__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding-block:var(--s-4);border-top:1px solid var(--surface-4)}

/* ---- burger ---- */
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:transparent;border:1px solid var(--surface-5);
  border-radius:var(--r-sm);cursor:pointer;
}
.burger span{position:relative;display:block;width:16px;height:1.5px;background:var(--text);transition:background-color var(--dur-press) linear}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--text);transition:transform var(--dur-move) var(--ease)}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

/* Desktop nav replaces the burger. After the burger rules so it wins the cascade. */
@media (min-width:980px){
  .nav{display:block}
  .hdr__cta{display:inline-flex}
  .burger{display:none}
  .drawer{display:none!important}
}

/* ============================================================ drawer (mobile) */
.drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:49;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface-1);border-top:1px solid var(--surface-4);padding-block:var(--s-2) var(--s-10);
}
.drawer__list>li{border-bottom:1px solid var(--surface-4)}
.drawer__list>li>a,.drawer summary{
  display:flex;align-items:center;justify-content:space-between;min-height:60px;
  font:600 var(--t-lg)/1 var(--font-display);letter-spacing:-.01em;color:var(--text);cursor:pointer;
}
.drawer summary{list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary svg{transition:transform var(--dur-hover) var(--ease);color:var(--muted)}
.drawer details[open] summary svg{transform:rotate(180deg)}
.drawer__list a[aria-current="page"]{color:var(--accent)}
.drawer__group{padding:0 0 var(--s-5)}
.drawer__h{font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);margin:var(--s-5) 0 var(--s-2)}
.drawer__group a{display:flex;justify-content:space-between;gap:var(--s-3);padding:10px 0;color:var(--text-2);font-size:var(--t-base)}
.drawer__group a span{font:500 var(--t-xs)/1.6 var(--font-mono);color:var(--muted)}
.drawer .btn{margin-top:var(--s-8);width:100%}

/* ============================================================ hero */
.hero{position:relative;padding-block:clamp(var(--s-16),10vh,var(--s-24)) var(--s-16)}
.hero h1{max-width:18ch}
.hero h1::after{content:"";display:block;width:88px;height:var(--rule-accent);background:var(--accent);margin-top:var(--s-8)}
.hero .lede{max-width:58ch;margin-top:var(--s-8);font-size:var(--t-lg);line-height:1.45}
.hero .btn-row{margin-top:var(--s-10)}
.hero--center{text-align:center}
.hero--center h1{margin-inline:auto}
.hero--center h1::after{margin-inline:auto}
.hero--center .lede{margin-inline:auto}
.hero--center .btn-row{justify-content:center}

/* Crumb trail above a page title: SERVICES / WEBSITES / STOREFRONT */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6);font:500 var(--t-xs)/1.4 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);border-bottom:1px solid var(--surface-5)}
.crumbs a:hover{color:var(--text);border-color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--text)}
.crumbs li+li::before{content:"/";margin-right:var(--s-2);color:var(--surface-5)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.eyebrow a{border-bottom:1px solid var(--surface-5)}
.eyebrow a:hover{color:var(--accent);border-color:var(--accent)}

/* Home hero: the tagline block and the full-width rule. */
.hero--home{padding-block:clamp(var(--s-16),12vh,var(--s-32)) var(--s-20)}
.hero--home h1{font-size:var(--t-4xl);line-height:var(--lead-display);max-width:13ch}
.hero--home h1::after{width:min(100%,640px);margin-top:var(--s-10)}
.tagline{font:500 var(--t-sm)/1.9 var(--font-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--text);margin-bottom:var(--s-10)}
.tagline span{display:block}

.livebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-16)}
.livebar__label{font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);margin-right:var(--s-2)}
.pill{
  display:inline-flex;align-items:center;gap:var(--s-3);padding:9px 16px 9px 13px;
  background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-pill);
  font:500 var(--t-sm)/1 var(--font-mono);color:var(--text);
  transition:border-color var(--dur-hover) var(--ease);
}
.pill:hover{border-color:var(--surface-5)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* Home hero, card-first (v3): the pitch on the left, a live card on the right. */
.hcard{display:grid;gap:var(--s-12);align-items:center}
@media (min-width:980px){.hcard{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--s-16)}}
.hero--card h1{font-size:var(--t-3xl);max-width:12ch}
.hero--card h1::after{width:min(100%,480px)}
.hcard__price{margin-top:var(--s-6);font:500 var(--t-xs)/1.6 var(--font-mono);letter-spacing:.06em;color:var(--muted)}
.hcard__price b{color:var(--text);font-weight:500}
.hcard__tap{
  position:absolute;left:50%;bottom:var(--s-4);transform:translateX(-50%);white-space:nowrap;max-width:calc(100% - var(--s-8));
  overflow:hidden;text-overflow:ellipsis;
  display:inline-flex;align-items:center;gap:var(--s-3);padding:9px 16px 9px 13px;
  background:var(--surface-1);border:1px solid var(--surface-5);border-radius:var(--r-pill);
  font:500 var(--t-sm)/1 var(--font-mono);color:var(--text);
}

/* ---- home carousel (v3.1): five slides, card first ----
   Every slide's picture sits in the same fixed panel, so the slides are near the same
   height and the dots don't jump. Without .mq--armed (no JS) the slides just stack. */
.mq__vis{
  position:relative;display:grid;place-items:center;justify-self:center;width:min(100%,380px);aspect-ratio:4/5;
  padding:var(--s-6) var(--s-6) var(--s-16);overflow:hidden;
  background:#121317;border:1px solid var(--surface-4);border-radius:var(--r);
  transition:border-color var(--dur-hover) var(--ease);
}
.mq__vis:hover{border-color:var(--accent)}
.mq__vis picture{display:block;width:100%;height:100%}
.mq__vis img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm)}
.mq__vis--wide{align-content:center;gap:0}
.mq__vis--wide picture{height:auto}
.mq__vis--wide img{height:auto;border-radius:0 0 var(--r-sm) var(--r-sm);border:1px solid var(--surface-5);border-top:0}
.mq__browser{display:flex;gap:5px;width:100%;padding:8px 10px;background:var(--surface-3);border:1px solid var(--surface-5);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0}
.mq__browser i{width:7px;height:7px;border-radius:50%;background:var(--surface-5)}
.mq__vis--wide{grid-template-rows:auto auto}

/* The paper-card sample: two sides, drawn in HTML. Paper colours on purpose: it's a
   picture of a printed thing, not part of the site's palette. */
.mq__vis--paper{perspective:900px}
.paper{
  position:absolute;width:74%;aspect-ratio:3.5/2;border-radius:4px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);display:flex;flex-direction:column;justify-content:center;
  padding:6% 8%;font-family:Georgia,"Times New Roman",serif;
}
.paper--back{top:16%;left:18%;transform:rotate(7deg);background:#2E3A2F;color:#E9DFC8;align-items:center;gap:6px}
.paper--front{top:36%;left:8%;transform:rotate(-4deg);background:#F3EBDA;color:#2A241C;align-items:flex-start}
.paper__mark{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;font:600 24px/1 Georgia,serif;font-style:italic}
.paper__mark--sm{position:absolute;top:10%;right:7%;width:26px;height:26px;font-size:14px;color:#8A5A2B}
.paper__url{font:500 9.5px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.paper__name{font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:.01em}
.paper__role{margin-top:2px;font-size:12px;font-style:italic;color:#8A5A2B}
.paper__rule{width:30%;height:1px;margin:8px 0;background:#8A5A2B}
.paper__line{font:500 9.5px/1.6 var(--font-mono);letter-spacing:.08em}

.mq .mq__h{max-width:13ch;line-height:var(--lead-display)}
.hero--card .h1.mq__h::after{content:"";display:block;width:min(100%,480px);height:var(--rule-accent);background:var(--accent);margin-top:var(--s-10)}
.mq__slide+.mq__slide{margin-top:var(--s-20)}           /* no JS: stacked */
.mq--armed .mq__track{display:grid}
.mq--armed .mq__slide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.mq--armed .mq__slide.is-on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}

.mq__nav{display:flex;align-items:center;justify-content:center;gap:var(--s-5);margin-top:var(--s-8)}
.mq__nav[hidden]{display:none}
.mq__dots{display:flex;gap:var(--s-1)}
.mq__dot{
  position:relative;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;
}
.mq__dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:var(--r-pill);background:var(--surface-5);transition:width var(--dur-move) var(--ease),background-color var(--dur-hover) var(--ease)}
.mq__dot:hover::before{background:var(--muted)}
.mq__dot[aria-current="true"]::before{width:36px;background:var(--surface-4)}
/* The current dot fills in orange while its slide is up: a timer you can see. */
.mq__dot::after{content:"";position:absolute;left:4px;top:50%;width:0;height:10px;transform:translateY(-50%);border-radius:var(--r-pill);background:var(--accent)}
.mq__dot[aria-current="true"]::after{animation:mq-fill var(--mq-dur,7s) linear forwards}
.mq--paused .mq__dot[aria-current="true"]::after{animation-play-state:paused}
.mq--still .mq__dot[aria-current="true"]::after{animation:none;width:36px}
@keyframes mq-fill{from{width:0}to{width:36px}}
.mq__pause{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);
  background:none;border:1px solid var(--surface-5);border-radius:var(--r-sm);cursor:pointer;
  font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);
}
.mq__pause:hover{color:var(--text);border-color:var(--muted)}
.mq__pause[hidden]{display:none}
.mq__ico-play{display:none}
.mq__pause[aria-pressed="true"] .mq__ico-pause{display:none}
.mq__pause[aria-pressed="true"] .mq__ico-play{display:block}
@media (max-width:979px){
  .mq__vis{width:min(100%,340px)}
  /* Phones and tablets: the slides are taller than the screen, so the dots and Pause go
     above the slide, where they're seen without scrolling. */
  .mq--armed>.wrap{display:flex;flex-direction:column}
  .mq--armed .mq__nav{order:-1;justify-content:space-between;margin:0 0 var(--s-8) -4px}
  .hero--home.mq{padding-top:var(--s-10)}
  .mq__dots{gap:0}
  .mq__pause{flex-shrink:0}
}
/* Very narrow phones: slimmer dot targets, and Pause shows its icon only (the word stays
   for screen readers). */
@media (max-width:379px){
  .mq__dot{width:38px}
  .mq__dot[aria-current="true"]::before,.mq--still .mq__dot[aria-current="true"]::after{width:30px}
  .mq__dot::after{left:4px}
  @keyframes mq-fill-sm{from{width:0}to{width:30px}}
  .mq__dot[aria-current="true"]::after{animation-name:mq-fill-sm}
  .mq__pause{padding:0 var(--s-3)}
  .mq__pause-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.mq--armed .mq__slide{transition:none}}

/* Live card examples: three portrait tiles, the whole tile is the link. */
.cardshots{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:640px){.cardshots{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}}
.cardshot{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--r);overflow:hidden;transition:border-color var(--dur-hover) var(--ease)}
.cardshot:hover{border-color:var(--surface-5)}
.cardshot__img{display:block;aspect-ratio:780/920;background:var(--surface-1);border-bottom:1px solid var(--surface-4);overflow:hidden}
@media (max-width:639px){.cardshot__img{aspect-ratio:780/620}}
.cardshot__img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.cardshot__body{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-6);flex:1}
.cardshot__who{font:600 var(--t-lg)/1.2 var(--font-display);letter-spacing:var(--track-heading);color:var(--text)}
.cardshot__who small{margin-left:var(--s-2);font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);vertical-align:middle}
.cardshot__what{color:var(--muted);font-size:var(--t-sm);flex:1}
.cardshot__go{margin-top:var(--s-2);font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--text)}
.cardshot:hover .cardshot__go{color:var(--accent)}
.checks--one{grid-template-columns:1fr!important}

/* ============================================================ section head */
.sec-head{margin-bottom:var(--s-12)}
.sec-head p:not(.eyebrow){margin-top:var(--s-5);max-width:62ch;font-size:var(--t-md);color:var(--muted)}
.sec-head p a{color:var(--text);border-bottom:1px solid var(--accent)}
.sec-head--center{text-align:center}
.sec-head--center p{margin-inline:auto}

/* ============================================================ numbered cards */
.pitch{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:760px){.pitch{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}}
.pcard{padding:var(--s-8) var(--s-6);background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--r)}
.pcard__n{font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-label);color:var(--accent);margin-bottom:var(--s-6)}
.pcard h3{margin-bottom:var(--s-3)}
.pcard p{color:var(--muted)}

/* ============================================================ work */
.work{display:grid;gap:var(--s-10)}
.wcard{display:grid;background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--r);overflow:hidden}
@media (min-width:900px){
  .wcard{grid-template-columns:1.05fr .95fr;align-items:stretch}
  .wcard--flip .wcard__shot{order:2}
}
.wcard__shot{position:relative;background:var(--surface-1);overflow:hidden;min-height:240px;border-bottom:1px solid var(--surface-4)}
@media (min-width:900px){.wcard__shot{border-bottom:0}}
.wcard__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wcard__shot--portrait{display:grid;place-items:center;padding:var(--s-10) var(--s-6);background:#121317}
.wcard__shot--portrait img{width:auto;height:auto;max-width:min(100%,272px);max-height:540px;object-fit:contain;border:1px solid var(--surface-5);border-radius:var(--r)}
.wcard__body{padding:var(--s-8) var(--s-6)}
@media (min-width:900px){.wcard__body{padding:var(--s-12) var(--s-10);display:flex;flex-direction:column;justify-content:center}}
.wcard__body h3{font-size:var(--t-xl);margin-bottom:var(--s-4)}
.wcard__role{font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-4)}
.wcard__body>p:not(.wcard__role){color:var(--muted);margin-bottom:var(--s-5)}
.wcard__body strong{color:var(--text)}
.wcard .tags{margin-bottom:var(--s-6)}

.facts{border-top:1px solid var(--surface-4);margin-top:var(--s-8)}
.facts>div{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);padding:var(--s-4) 0;border-bottom:1px solid var(--surface-4)}
.facts dt{flex:0 0 150px;font:500 var(--t-xs)/1.7 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted)}
.facts dd{flex:1 1 260px;color:var(--text-2)}
.facts a{color:var(--text);border-bottom:1px solid var(--accent)}

.stated{margin:var(--s-8) 0;padding:var(--s-2) 0 var(--s-2) var(--s-6);border-left:3px solid var(--accent);font-size:var(--t-md);line-height:1.6;color:var(--text-2)}
.stated strong{color:var(--text)}

/* Playable projects: a lighter tile than a case study. */
.play{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:640px){.play{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
@media (min-width:1000px){.play{grid-template-columns:repeat(3,1fr)}.play--four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){.play--one{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1000px){.play--one{grid-template-columns:repeat(3,1fr)}}
.play__card{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--r);overflow:hidden;transition:border-color var(--dur-hover) var(--ease)}
.play__card:hover{border-color:var(--surface-5)}
.play__shot{aspect-ratio:16/10;background:var(--surface-1);overflow:hidden;border-bottom:1px solid var(--surface-4)}
.play__shot img{width:100%;height:100%;object-fit:cover}
.play__shot--portrait{display:grid;place-items:center;background:#121317;padding:var(--s-3)}
.play__shot--portrait img{width:auto;height:100%;object-fit:contain;border-radius:var(--r-sm)}
.play__body{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.play__body h3{font-size:var(--t-lg)}
.play__body p{color:var(--muted);font-size:var(--t-sm);flex:1}
.play__body .btn-row{margin-top:var(--s-2);gap:var(--s-3)}
.prose a{color:var(--text)}

/* ============================================================ simple cards (work, about) */
.svc{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:760px){.svc{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
.scard{padding:var(--s-8) var(--s-6);background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--r)}
.scard h3{margin-bottom:var(--s-3)}
.scard p{color:var(--muted)}
.scard ul{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.scard li{position:relative;padding-left:var(--s-6);color:var(--text-2)}
.scard li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--accent)}
.scard li strong{color:var(--text)}

.consult{
  display:flex;gap:var(--s-4);align-items:flex-start;margin-top:var(--s-10);padding:var(--s-6);
  background:var(--surface-2);border:1px solid var(--surface-4);border-left:3px solid var(--accent);border-radius:var(--r-sm);
}
.consult svg{flex-shrink:0;margin-top:3px;color:var(--accent)}
.consult p{color:var(--text-2)}
.consult strong{color:var(--text)}
.consult a{color:var(--text);border-bottom:1px solid var(--accent)}

/* ============================================================ home: category tiles */
.cats{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:640px){.cats{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
.cats .card__title{font-size:var(--t-lg)}
.from{font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-4)}
.from b{font:600 var(--t-xl)/1 var(--font-display);letter-spacing:var(--track-heading);color:var(--text);text-transform:none;margin-left:6px}
/* A whole card is clickable through its title link, without nesting interactive content. */
.card--link .card__title a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card--link:hover{border-color:var(--surface-5);background:#191B21}
.card--link:hover .card__foot{color:var(--accent)}
.card--link:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.card--link .card__title a:focus-visible{outline:none}

/* ============================================================ services hub */
.jump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-10)}
.jump a{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-4);
  border:1px solid var(--surface-5);border-radius:var(--r-sm);
  font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--text);
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease);
}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
.jump a b{font-weight:500;color:var(--muted)}

/* "Not sure where to start?" - a situation on the left, the answer on the right. */
.picker{border-top:1px solid var(--surface-4)}
.picker a{
  display:grid;grid-template-columns:1fr;gap:var(--s-2);align-items:center;
  padding:var(--s-5) 0;border-bottom:1px solid var(--surface-4);transition:background-color var(--dur-hover) var(--ease);
}
@media (min-width:760px){.picker a{grid-template-columns:1.2fr 1fr auto;gap:var(--s-8);padding:var(--s-5) var(--s-4)}}
.picker a:hover{background:var(--surface-2)}
.picker__if{color:var(--text-2);font-size:var(--t-md)}
.picker__then{font:600 var(--t-md)/1.2 var(--font-display);color:var(--text)}
.picker__then span{display:block;margin-top:4px;font:500 var(--t-xs)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.picker a:hover .picker__then{color:var(--accent)}
.picker .arw{color:var(--muted);justify-self:start}
.picker a:hover .arw{color:var(--accent);transform:translateX(3px)}

.cat{scroll-margin-top:calc(var(--header-h) + var(--s-6))}
.cat+.cat{margin-top:var(--s-20)}
.cat__head{display:grid;gap:var(--s-4);margin-bottom:var(--s-8)}
@media (min-width:900px){.cat__head{grid-template-columns:1fr 1fr;align-items:end;gap:var(--s-12)}}
.cat__head p{color:var(--muted);max-width:52ch}

.prods{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:640px){.prods{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
@media (min-width:1100px){.prods--3{grid-template-columns:repeat(3,1fr)}.prods--4{grid-template-columns:repeat(4,1fr)}}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:var(--s-2) 0 var(--s-4)}
.price b{font:700 var(--t-2xl)/1 var(--font-display);letter-spacing:var(--track-display);color:var(--text)}
.price span{font:500 var(--t-xs)/1.3 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
/* A price that is a phrase ("No set price") is set a step down so it never outweighs a number. */
.price--word b{font-size:var(--t-xl);letter-spacing:var(--track-heading);line-height:1.1}

/* Add-on price list: label left, price right, hairlines between. */
.rows{border-top:1px solid var(--surface-4)}
.rows>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-2) var(--s-6);padding:var(--s-4) 0;border-bottom:1px solid var(--surface-4)}
.rows dt{color:var(--text);font-weight:500}
.rows dt small{display:block;margin-top:2px;font-weight:400;font-size:var(--t-sm);color:var(--muted)}
.rows dd{font:500 var(--t-sm)/1.4 var(--font-mono);color:var(--text);white-space:nowrap}
.rows a{border-bottom:1px solid var(--accent)}

.steps{display:grid;gap:0;counter-reset:step;border-top:1px solid var(--surface-4)}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:var(--s-4);padding:var(--s-6) 0;border-bottom:1px solid var(--surface-4)}
@media (min-width:760px){.steps li{grid-template-columns:88px minmax(0,18ch) 1fr;gap:var(--s-8)}}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font:500 var(--t-xs)/1.9 var(--font-mono);letter-spacing:var(--track-label);color:var(--accent)}
.steps h3{font-size:var(--t-md)}
.steps p{color:var(--muted);grid-column:2}
@media (min-width:760px){.steps p{grid-column:auto}}

/* ============================================================ product pages */
.phero{display:grid;gap:var(--s-10);align-items:start}
@media (min-width:980px){.phero{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:var(--s-16)}}
.phero h1{max-width:14ch}
.phero .lede{margin-top:var(--s-8);font-size:var(--t-lg);line-height:1.45;max-width:52ch}
.phero__facts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-8)}

.buy{position:relative}
@media (min-width:980px){.buy{position:sticky;top:calc(var(--header-h) + var(--s-6))}}
.buy .price{margin:0 0 var(--s-2)}
.buy .price b{font-size:var(--t-3xl)}
.buy .price--word b{font-size:var(--t-2xl)}
.price--range b{white-space:nowrap}
.buy .price--range b{font-size:var(--t-2xl)}
.buy__per{font-size:var(--t-sm);color:var(--muted)}
.buy__list{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-6) 0;padding-top:var(--s-5);border-top:1px solid var(--surface-4)}
.buy__list li{position:relative;padding-left:var(--s-5);font-size:var(--t-sm);color:var(--text-2)}
.buy__list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
.buy .btn{width:100%;white-space:normal;text-align:center}
.buy__alt{margin-top:var(--s-4);text-align:center;font-size:var(--t-sm);color:var(--muted)}
.buy__alt a{color:var(--text);border-bottom:1px solid var(--surface-5)}
.buy__alt a:hover{border-color:var(--accent)}
.buy__deal{margin-top:var(--s-5);padding:var(--s-4);background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--text-2)}
.buy__deal strong{color:var(--text)}
.buy__deal a{color:var(--text);border-bottom:1px solid var(--accent)}

.checks{display:grid;gap:0 var(--s-10);grid-template-columns:1fr;border-top:1px solid var(--surface-4)}
@media (min-width:760px){.checks{grid-template-columns:1fr 1fr}}
.checks li{display:flex;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--surface-4);color:var(--text-2)}
.checks li svg{flex-shrink:0;margin-top:4px;color:var(--accent)}
.checks li strong{color:var(--text);font-weight:600}

.fit{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:760px){.fit{grid-template-columns:1fr 1fr}}
.fit .card__list li::before{background:var(--muted)}
.fit .card--accent .card__list li::before{background:var(--accent)}

.faq{border-top:1px solid var(--surface-4)}
.faq details{border-bottom:1px solid var(--surface-4)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  min-height:64px;padding:var(--s-4) 0;cursor:pointer;list-style:none;
  font:600 var(--t-md)/1.3 var(--font-display);color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--font-body);color:var(--muted);transition:transform var(--dur-hover) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq details>div{padding:0 0 var(--s-6);max-width:68ch;color:var(--muted)}
.faq details>div a{color:var(--text);border-bottom:1px solid var(--accent)}

.split{display:grid;gap:var(--s-10);grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-16)}}

/* Bundle rows on the bundles page. */
.bundle{display:grid;gap:var(--s-6);padding:var(--s-8) 0;border-bottom:1px solid var(--surface-4);scroll-margin-top:calc(var(--header-h) + var(--s-6))}
.bundle:first-child{border-top:1px solid var(--surface-4)}
@media (min-width:900px){.bundle{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 220px;gap:var(--s-10);align-items:start}}
.bundle h3{font-size:var(--t-xl)}
.bundle__tag{display:block;margin-top:var(--s-3);font:500 var(--t-xs)/1.4 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted)}
.bundle p{color:var(--muted)}
.bundle ul{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.bundle ul a{display:inline-block;padding:5px 10px;border:1px solid var(--surface-5);border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--text)}
.bundle ul a:hover{border-color:var(--accent);color:var(--accent)}
.bundle__price{font:700 var(--t-2xl)/1 var(--font-display);letter-spacing:var(--track-display);color:var(--text)}
.bundle__save{display:block;margin-top:var(--s-2);font:500 var(--t-xs)/1.5 var(--font-mono);color:var(--muted)}
.bundle__save b{color:var(--accent);font-weight:500}
.bundle .btn{margin-top:var(--s-5)}

/* ============================================================ about */
.about-grid{display:grid;gap:var(--s-12);grid-template-columns:1fr}
@media (min-width:900px){.about-grid{grid-template-columns:1.35fr .65fr;gap:var(--s-16)}}
.sidecard{padding:var(--s-6);background:var(--surface-2);border:1px solid var(--surface-4);border-top:2px solid var(--accent);border-radius:var(--r);position:sticky;top:calc(var(--header-h) + var(--s-6))}
.sidecard h3{font-size:var(--t-md);margin-bottom:var(--s-4)}
.sidecard ul{display:flex;flex-direction:column;gap:var(--s-3)}
.sidecard li{display:flex;gap:var(--s-3);font-size:var(--t-sm);color:var(--text-2);line-height:1.5}
.sidecard li svg{flex-shrink:0;margin-top:3px;color:var(--accent)}
@media (max-width:899px){.sidecard{position:static}}

.quote{margin:var(--s-12) 0;padding:var(--s-10) var(--s-8);background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--r)}
.quote p{font:600 var(--t-xl)/1.25 var(--font-display);letter-spacing:var(--track-heading);color:var(--text);text-wrap:balance}
.quote footer{margin-top:var(--s-6);font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent)}

.portrait{position:relative;margin-bottom:var(--s-5);border:1px solid var(--surface-5);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.portrait img{width:100%;height:auto}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(14,15,17,.6))}
.portrait figcaption{position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-3);z-index:1;font:500 var(--t-xs)/1.4 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--text)}
.portrait figcaption span{display:block;color:var(--accent);margin-top:2px}

/* ============================================================ contact */
.form{display:grid;gap:var(--s-6)}
@media (min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{padding:var(--s-5);border-radius:var(--r-sm);border:1px solid var(--surface-4)}
.form-status[data-state="ok"]{border-color:rgba(92,214,168,.5);background:var(--ok-wash);color:var(--text)}
.form-status[data-state="err"]{border-color:rgba(255,99,99,.5);background:var(--danger-wash);color:var(--text)}
.form-status:empty{display:none}
.form-status a{color:var(--text);border-bottom:1px solid var(--accent)}

/* ============================================================ CTA band */
.cta{padding-block:var(--s-24);border-top:1px solid var(--surface-4);background:var(--surface-1)}
/* Markup is flat: eyebrow, h2, p, .btn-row. On wide screens the heading sits left and
   the text and buttons stack on the right. */
.cta .wrap{display:grid;gap:var(--s-6) var(--s-16);align-items:start}
@media (min-width:900px){
  .cta .wrap{grid-template-columns:1.25fr 1fr}
  .cta .wrap>h2{grid-column:1;grid-row:2 / span 2}
  .cta .wrap>p:not(.eyebrow){grid-column:2;grid-row:2;align-self:end}
  .cta .wrap>.btn-row{grid-column:2;grid-row:3}
}
.cta h2{font-size:var(--t-3xl);font-weight:700;letter-spacing:var(--track-display);line-height:1;max-width:14ch}
.cta h2::after{content:"";display:block;width:88px;height:var(--rule-accent);background:var(--accent);margin-top:var(--s-8)}
.cta p:not(.eyebrow){max-width:46ch;font-size:var(--t-md);color:var(--muted)}
.cta .eyebrow{grid-column:1/-1;margin-bottom:var(--s-4)}

/* ============================================================ footer */
.ftr{padding-block:var(--s-16) var(--s-8);border-top:1px solid var(--surface-4);background:var(--surface-1)}
.ftr__top{display:grid;gap:var(--s-10);grid-template-columns:1fr;margin-bottom:var(--s-12)}
@media (min-width:760px){.ftr__top{grid-template-columns:1.4fr repeat(3,1fr)}}
.ftr__blurb{max-width:34ch;color:var(--muted);font-size:var(--t-sm);margin-top:var(--s-5)}
.ftr__blurb strong{display:block;margin-bottom:var(--s-1);color:var(--text);font-weight:600}
.ftr__col h2{font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text);margin-bottom:var(--s-4)}
.ftr__col ul{display:flex;flex-direction:column;gap:var(--s-1)}
.ftr__col a{display:inline-block;padding:5px 0;font-size:var(--t-sm);color:var(--muted);transition:color var(--dur-hover) var(--ease)}
.ftr__col a:hover{color:var(--text)}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-8);justify-content:space-between;align-items:center;padding-top:var(--s-6);border-top:1px solid var(--surface-4)}
.ftr__bottom p{font:500 var(--t-2xs)/1.6 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.ftr__bottom ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-8)}
.ftr__ver{text-transform:none;letter-spacing:.08em}

/* ============================================================ print */
@media print{
  .hdr,.drawer,.menu,.cta,.burger,.skip{display:none!important}
  body{background:#fff;color:#000;padding-top:0}
  h1,h2,h3,.price b{color:#000}
}