/* wsmedia.net - built from concept G2 (liquid glass, architectural). */
/* ============================================================
   CONCEPT G2 - "liquid glass"
   Dark, in Apple's Liquid Glass language: a living colour field
   underneath, and every piece of chrome floating above it as a
   rim-lit frosted lens. Capsule geometry throughout. Glass only
   reads when the backdrop moves - so the backdrop moves.
   ============================================================ */
:root{
  --base:#07080C; --txt:#F4F5F9; --dim:#A7ACB9;
  /* blue-led palette (owner, 2026-09-03: "needs a more blue theme"). --v is
     kept as the name every eyebrow/gradient already uses, but it is now a
     periwinkle blue rather than violet; --b is the hero blue, --t the cool
     end of the ramp. */
  --v:#6C8CFF; --t:#3ED6C0; --b:#3E8BFF;
  --glass:rgba(255,255,255,.055);
  --glass-hi:rgba(255,255,255,.10);
  --rim-top:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05);
  --drop:0 16px 40px rgba(0,0,0,.38);
  --r:8px;   /* squarer, architectural - owner moved away from the Apple capsule look */
  --line:rgba(255,255,255,.08);   /* the hairline every band and grid rules with */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .rv{opacity:1!important;transform:none!important}
}
body{background:var(--base);color:var(--txt);font:400 16.5px/1.65 'Geist',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--t);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.mono{font:600 11.5px/1 'Geist',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

/* ---- the living backdrop: drifting colour, fixed behind everything ---- */
.field{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--base)}
/* ⚠️ PERF: no filter:blur() here - an animated 90px blur on half-viewport
   elements re-rasterises every frame and killed scroll performance. The
   softness is BAKED INTO the gradients (steep alpha falloff), which costs
   nothing: animation is then pure transform on composited layers. */
.field i{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.field .f1{width:70vw;height:70vw;left:-18%;top:-24%;background:radial-gradient(circle,rgba(47,95,232,.52) 0%,rgba(47,95,232,.18) 38%,transparent 68%);animation:drift1 40s ease-in-out infinite alternate}
.field .f2{width:58vw;height:58vw;right:-16%;top:0%;background:radial-gradient(circle,rgba(30,140,230,.44) 0%,rgba(30,140,230,.15) 38%,transparent 68%);animation:drift2 47s ease-in-out infinite alternate}
.field .f3{width:52vw;height:52vw;left:20%;top:42%;background:radial-gradient(circle,rgba(20,125,175,.40) 0%,rgba(20,125,175,.13) 38%,transparent 68%);animation:drift3 54s ease-in-out infinite alternate}
.field .f4{width:46vw;height:46vw;right:4%;bottom:-20%;background:radial-gradient(circle,rgba(40,70,200,.44) 0%,rgba(40,70,200,.15) 38%,transparent 68%);animation:drift1 61s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-8vw,10vh) scale(.92)}}
@keyframes drift3{to{transform:translate(6vw,-8vh) scale(1.08)}}
/* fine grain so the glass has texture to catch */
.field::after{content:'';position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- the glass material ---- */
/* ⚠️ PERF: backdrop-filter is NOT used on cards/tiles/slabs. With ~15 of
   them over an animating backdrop the browser re-blurred the whole stack
   every frame. The field is soft gradient anyway, so translucent fill +
   rim lighting reads ~the same. True frosting lives only on .glass-real
   (the nav), which genuinely floats over sharp scrolling content. */
.glass{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.045));border-radius:var(--r);
  box-shadow:var(--rim-top),var(--drop)}
.glass-real{-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);background:rgba(16,18,26,.55)}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(168deg,rgba(255,255,255,.13),rgba(255,255,255,0) 32%)}

/* ---- full-width glass header (owner preference over the floating capsule) ---- */
.navwrap{position:fixed;top:0;left:0;right:0;z-index:60}
.nav{display:flex;align-items:center;gap:4px;height:64px;border-radius:0;
  max-width:1140px;margin:0 auto;padding:0 24px;box-shadow:none;background:none}
.nav::before{display:none}
.navwrap.glass{border-radius:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)}
.navwrap.glass::before{display:none}
/* ⚠️ the flex item is the logo's ANCHOR, not the img - auto-margin must sit
   on the anchor or the links stay clustered left */
.nav img{height:17px;display:block}
.nav a[aria-label="wsmedia home"]{margin-right:auto;padding:8px 0}
/* the logo link was picking up the generic nav hover chip (2026-09-07) */
.nav a[aria-label="wsmedia home"]:hover{background:none}
.nav a[aria-label="wsmedia home"] img{transition:opacity .2s}
.nav a[aria-label="wsmedia home"]:hover img{opacity:.72}
.nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--dim);padding:9px 16px;border-radius:5px;transition:color .2s,background .2s}
.nav a:hover{color:var(--txt);background:rgba(255,255,255,.09)}
.nav a.cta{color:#0A0B10;background:rgba(255,255,255,.92);font-weight:600;box-shadow:inset 0 1px 0 #fff}
.nav a.cta:hover{background:#fff;color:#0A0B10}
/* ⚠️ hide only the LINK GROUP on small screens, never `a:not(.cta)` - that
   selector also matched the logo anchor and left phones with no logo and no
   navigation at all (caught in the 414px capture, 2026-09-03). The phone
   nav is a no-JS <details> menu, styled in the subpage css. */
@media(max-width:700px){.nav .links{display:none}}

/* ---- hero: a genuine banner, not text on the shared ambient field ---- */
.hero{position:relative;padding:186px 0 78px;text-align:center}
/* tighter, brighter re-statement of the field's colours, concentrated
   behind the headline, fading into the ambient field below - so the top
   of the page reads as its own moment without breaking the "soft gradient,
   no blur" perf rule above */
.hero::before{content:'';position:absolute;left:0;right:0;top:0;height:132%;z-index:-1;
  background:
    radial-gradient(60% 54% at 50% 2%, rgba(62,139,255,.46) 0%, rgba(62,139,255,0) 64%),
    radial-gradient(46% 42% at 88% 16%, rgba(62,214,192,.28) 0%, rgba(62,214,192,0) 62%),
    radial-gradient(42% 42% at 6% 24%, rgba(47,95,232,.40) 0%, rgba(47,95,232,0) 62%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%)}
/* fine architectural grid, on-brand with the square 8px geometry, giving
   the band structure rather than just a glow. A second, coarser grid is
   layered in (blueprint minor/major lines) and the mask stretches over the
   whole hero, not just its top, so the pattern actually reads as a texture
   rather than a fade that's gone by the second scroll. */
/* round 4b: an LED-style dot matrix (owner's call over the grid and the
   concentric rings, both "plain"/"odd"). Two dot layers on different
   pitches so brightness varies like a real matrix: a fine white pitch and
   a coarser blue pitch with a soft halo. Pure gradients - no filters. */
/* dots OFF 2026-09-07 (owner, "for now") - re-enable by removing the
   .hero-dots-off guard below; the matrix itself is unchanged */
.hero::after{display:none}          /* dots off site-wide 2026-09-07 (owner) */
.hero::after{content:'';position:absolute;left:0;right:0;top:0;height:112%;z-index:-1;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.34) 0 1.1px,transparent 1.9px),
    radial-gradient(circle,rgba(120,175,255,.85) 0 1.5px,rgba(120,175,255,.22) 3px,transparent 5px);
  background-size:22px 22px,66px 66px;
  background-position:11px 11px,33px 33px;
  -webkit-mask-image:radial-gradient(74% 80% at 50% 40%,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%);
  mask-image:radial-gradient(74% 80% at 50% 40%,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%)}
/* corner registration marks - a small, literal "architectural drawing"
   detail rather than a generic decorative pattern, echoing the square/8px
   identity instead of just repeating the field's glow */
/* experiment 2026-09-07: owner's studio photo behind the home hero at 50% */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.28;z-index:-1;pointer-events:none}
/* sweeping light ribbons over the hero photo (owner's reference 2026-09-07).
   Soft elliptical gradients on rotated elements - no filters, no hard edges,
   in keeping with the "bake the blur into the gradient" perf rule. */
.hero-ribbons{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(165deg,rgba(47,95,232,.30) 0%,rgba(30,60,150,.20) 55%,rgba(10,15,28,.10) 100%)}
/* home overlay at half strength (owner 2026-09-07) - the .plain page heroes
   are unchanged */
.hero-ribbons.home{background:linear-gradient(165deg,rgba(47,95,232,.15) 0%,rgba(30,60,150,.10) 55%,rgba(10,15,28,.05) 100%)}
.hero-ribbons.home i:nth-child(1){background:radial-gradient(closest-side ellipse,rgba(150,190,255,.11),rgba(150,190,255,0) 72%)}
.hero-ribbons.home i:nth-child(2){background:radial-gradient(closest-side ellipse,rgba(108,140,255,.09),rgba(108,140,255,0) 70%)}
.hero-ribbons.home i:nth-child(3){background:radial-gradient(closest-side ellipse,rgba(127,230,218,.065),rgba(127,230,218,0) 70%)}
.hero-ribbons.home i:nth-child(4){background:radial-gradient(closest-side ellipse,rgba(255,255,255,.05),rgba(255,255,255,0) 70%)}
.hero-ribbons i{position:absolute;display:block;border-radius:50%}
.hero-ribbons i:nth-child(1){left:-25%;top:-14%;width:150%;height:56%;transform:rotate(-14deg);
  background:radial-gradient(closest-side ellipse,rgba(150,190,255,.22),rgba(150,190,255,0) 72%)}
.hero-ribbons i:nth-child(2){left:-20%;top:26%;width:150%;height:44%;transform:rotate(9deg);
  background:radial-gradient(closest-side ellipse,rgba(108,140,255,.18),rgba(108,140,255,0) 70%)}
.hero-ribbons i:nth-child(3){left:20%;top:44%;width:120%;height:52%;transform:rotate(-8deg);
  background:radial-gradient(closest-side ellipse,rgba(127,230,218,.13),rgba(127,230,218,0) 70%)}
.hero-ribbons i:nth-child(4){left:-30%;top:58%;width:120%;height:40%;transform:rotate(6deg);
  background:radial-gradient(closest-side ellipse,rgba(255,255,255,.10),rgba(255,255,255,0) 70%)}
.hero .wrap{position:relative;z-index:1}
/* corner registration marks OFF 2026-09-07 (owner) - markup left in place */
.hero-marks{display:none}          /* corner marks off site-wide 2026-09-07 */
.hero-marks{position:absolute;inset:64px 18px auto 18px;height:calc(100% - 140px);z-index:-1;pointer-events:none}
.hero-marks i{position:absolute;width:22px;height:22px;opacity:.5}
.hero-marks i:nth-child(1){top:0;left:0;border-top:1.5px solid var(--v);border-left:1.5px solid var(--v)}
.hero-marks i:nth-child(2){top:0;right:0;border-top:1.5px solid var(--t);border-right:1.5px solid var(--t)}
.hero-marks i:nth-child(3){bottom:0;left:0;border-bottom:1.5px solid var(--b);border-left:1.5px solid var(--b)}
.hero-marks i:nth-child(4){bottom:0;right:0;border-bottom:1.5px solid var(--t);border-right:1.5px solid var(--t)}
@media(max-width:760px){.hero-marks{display:none}}
.hero h1{font-size:clamp(46px,7.4vw,92px);line-height:1.03;font-weight:600;letter-spacing:-.035em;max-width:13em;margin:0 auto}
/* ⚠️ never set color:transparent unguarded - if the clip doesn't paint, the
   headline simply vanishes. Solid violet is the floor; the gradient is the
   enhancement, applied only where the clip is actually supported. */
.hero h1 .grad{color:var(--v)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .grad{background:linear-gradient(95deg,var(--v),var(--b) 50%,var(--t));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero p{margin:26px auto 0;max-width:35em;font-size:18px;color:var(--dim)}
.hero .row{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:14px 28px;border-radius:6px;text-decoration:none;font-weight:600;font-size:15px;transition:transform .2s,background .2s,box-shadow .2s}
.btn.p{background:rgba(255,255,255,.92);color:#0A0B10;box-shadow:inset 0 1px 0 #fff,0 14px 34px rgba(0,0,0,.4)}
.btn.p:hover{background:#fff;transform:translateY(-2px)}
.btn.g{color:var(--txt)}
.btn.g:hover{transform:translateY(-2px);background:var(--glass-hi)}

/* ---- sections as structured bands ---- */
/* the closing CTA band's architecture applied to every section: an
   edge-to-edge ground with a hairline rule closing it, while the content
   itself stays in the readable wrap. Washed and quiet grounds alternate so
   consecutive bands read as separate rooms rather than one long gradient. */
section.s{padding:84px 0}
.band{border-top:1px solid var(--line)}
.band-wash{background:linear-gradient(160deg,rgba(62,139,255,.11),rgba(62,214,192,.045))}
.band-quiet{background:rgba(255,255,255,.022)}
#work.band-wash{background:linear-gradient(200deg,rgba(62,214,192,.08),rgba(47,95,232,.09))}
.head{text-align:center;max-width:44em;margin:0 auto 46px}
.head h2{font-size:clamp(28px,3.8vw,44px);font-weight:600;letter-spacing:-.03em}
.head p{margin-top:12px;color:var(--dim)}

/* services - a ruled spec grid held inside the wrap (edge-to-edge content
   read as sparse and adrift). Colour (--ac, set per tile in build.py from
   the hero's own gradient) replaces the old uniform glass fill; hairline
   rules replace the floating card-with-shadow look. The negative inline
   margin pulls the outer cells' text back into line with the wrap edge. */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);margin:46px -26px 0;border-block:1px solid var(--line)}
.tile{--ac:var(--t);position:relative;padding:32px 26px;overflow:hidden;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s;
  background:radial-gradient(220px 170px at 100% -10%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 70%)}
.tile:nth-child(3n){border-right:0}
.tile:nth-last-child(-n+3){border-bottom:0}
@media(max-width:860px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(3n){border-right:1px solid var(--line)}
  .tile:nth-child(2n){border-right:0}
  .tile:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .tile:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:540px){
  .tiles{grid-template-columns:1fr;margin-inline:0}
  .tile{border-right:0;border-bottom:1px solid var(--line);padding-inline:0}
  .tile:last-child{border-bottom:0}
}
.tile::before{content:'';position:absolute;top:-1px;left:26px;width:44px;height:3px;background:var(--ac)}
@media(max-width:540px){.tile::before{left:0}}
.tile:hover{background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 28%,transparent),transparent 72%)}
/* the icon's colour is the tile's identity, so give it a floor that works
   even if the per-tile custom property never lands */
/* 2026-09-05: solid accent box + dark icon, matching the service pages */
.tile .ic{width:48px;height:48px;display:grid;place-items:center;margin-bottom:18px;
  color:#07080C;background:var(--ac,var(--t));border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.4)}
.tile .ic svg{width:24px;height:24px;stroke-width:1.9}
.tile h3{color:color-mix(in srgb,var(--ac,var(--t)) 55%,#fff)}
.tile h3{font-size:17px;font-weight:600;margin-bottom:8px}
.tile p{font-size:14.5px;color:var(--dim)}

/* work - glass frames */
.works{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.works{grid-template-columns:1fr}}
.works.works-home{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.works.works-home{grid-template-columns:1fr}}
.works .wk-feature{grid-column:1/-1}
.works .wk-feature .im img{aspect-ratio:21/9}
.works .wk-feature .ttl{font-size:clamp(26px,3vw,40px)}
.wk{display:block;text-decoration:none;padding:12px;transition:transform .25s,background .25s}
.wk:hover{transform:translateY(-4px);background:var(--glass-hi)}
.wk .im{border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.wk img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
/* brand-field cards: the client's own artwork as the ground (the style from
   the current site's projects page), title set INTO the field like there */
.wk .im.brand{position:relative;display:block}
.wk .im.brand img{object-position:center;transition:transform .4s ease}
.wk:hover .im.brand img{transform:scale(1.05)}
/* client logo centred on the card, above the title (2026-09-06) */
.wk .im.brand img.wk-logo{position:absolute;z-index:1;left:50%;top:41%;width:42%;max-height:56%;height:auto;object-fit:contain;transform:translate(-50%,-50%);transition:none;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55))}
.wk .im.brand img.wk-logo.wide{width:56%}
.wk:hover .im.brand img.wk-logo{transform:translate(-50%,-50%)}
/* scrim so the title stays legible over busy client artwork (some brand
   photos have their own baked-in text right where the title sits) */
.wk .im.brand::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,7,10,.85) 0%,rgba(6,7,10,.32) 42%,transparent 64%)}
.wk .im.brand .ttl{position:absolute;z-index:1;left:22px;bottom:18px;right:22px;font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.12;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.wk .meta{display:flex;justify-content:space-between;align-items:center;padding:14px 8px 4px}
.wk b{font-weight:600;font-size:15.5px}
.wk .mono{font-size:11px}

/* package band - edge-to-edge like the hero (a glow + the same architectural
   grid, tuned to this band's own violet/teal pair) instead of a glass card
   floating on a flat ground; content stays readable inside .wrap */
.pkg-band{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(115deg,#04060D 0%,#070B1C 60%,#081027 100%)}
.pkg-band::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(55% 100% at 8% 0%, rgba(62,139,255,.14) 0%, rgba(62,139,255,0) 64%),
    radial-gradient(48% 90% at 100% 100%, rgba(62,214,192,.09) 0%, rgba(62,214,192,0) 62%)}
.pkg-band::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(85% 120% at 50% 40%,#000 0%,transparent 88%);
  mask-image:radial-gradient(85% 120% at 50% 40%,#000 0%,transparent 88%)}
.pkg-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.pkg-grid{grid-template-columns:1fr}}
.pkg-grid h2{font-size:clamp(28px,3.8vw,44px);font-weight:600;letter-spacing:-.03em}
.pkg-grid>div:first-child>p{margin-top:16px;color:var(--dim);max-width:30em}
.tick{margin-top:20px;display:grid;gap:10px}
.tick li{list-style:none;display:flex;gap:10px;align-items:baseline;font-size:15px;color:#CBD0DB}
.tick li::before{content:'✓';color:var(--t);font-weight:600}
.amtcard{text-align:center;padding:34px;border-radius:8px;
  background:linear-gradient(160deg,rgba(62,139,255,.18),rgba(255,255,255,.04) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 20px 50px rgba(0,0,0,.35)}
.amtcard .amt{font-size:clamp(52px,6vw,74px);font-weight:600;letter-spacing:-.04em;margin:8px 0 2px}
.amtcard small{color:var(--dim);font-size:14px}
.amtcard .btn{margin-top:24px;width:100%;justify-content:center}

/* platforms row - official marks only, recoloured white, NEVER redrawn */
/* their own quiet strip between services and the story band (owner:
   "separate out the platform logos from the grid"), no label */
.plats-band{padding:44px 0;background:linear-gradient(115deg,#070B1F 0%,#0A1636 60%,#091A3C 100%);border-bottom:1px solid var(--line)}
.plats{display:flex;justify-content:center;align-items:flex-end;gap:24px 52px;flex-wrap:wrap}
.plat{display:grid;justify-items:center;gap:12px;opacity:.72;transition:opacity .25s;text-decoration:none}
.plat:hover{opacity:1}
.plat img{height:38px;width:auto;display:block}
.plat.wide img{height:28px}
@media(max-width:600px){.plats{gap:20px 30px}.plat img{height:30px}.plat.wide img{height:22px}}
.plat span{font:600 10px/1 'Geist',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* story band - full-width now: the intro flows the wrap's whole width,
   the three values sit below as one hairline-divided row (the same
   full-width, low-glass grammar as the services grid) instead of a
   stack of shadowed cards squeezed into a side column */
.story{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
@media(max-width:860px){.story{grid-template-columns:1fr}}
.story-head{max-width:48em}
.story-head h2{font-size:clamp(28px,3.8vw,44px);font-weight:600;letter-spacing:-.03em}
.story-head p{margin-top:16px;color:var(--dim);max-width:36em}
.story-head .stats{display:flex;gap:38px;margin-top:30px;flex-wrap:wrap}
.story-head .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.story-head .stat b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em}
.story-head .stat span{font-size:13px;color:var(--dim)}
/* a small mark built from the studio's own accent system (the same six
   colours used for services and projects) rather than a stock photo or an
   invented team shot - an asymmetric block arrangement, architectural
   rather than decorative */
.story-art{aspect-ratio:.92;display:grid;gap:10px;align-self:center;
  grid-template-columns:1fr 1fr;grid-template-rows:1.35fr 1fr 1fr;
  grid-template-areas:"a a" "b c" "d e"}
@media(max-width:860px){.story-art{display:none}}
/* 4d: the blocks now carry the current site's own studio photos (design,
   print, mobile, video), each washed with its accent so the four still
   read as one blue-family piece rather than four unrelated photos */
.story-art span{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--drop)}
.story-art span:nth-child(1){grid-area:a}
.story-art span:nth-child(2){grid-area:b}
.story-art span:nth-child(3){grid-area:c}
.story-art span:nth-child(4){grid-area:d}
.story-art span:nth-child(5){grid-area:e}
.story-art span img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* homepage-only value row - distinct from the .vals/.val glass cards
   still used on the about-us page, which keep their original styling */
.vgrid{margin:54px -26px 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
@media(max-width:760px){.vgrid{grid-template-columns:1fr;margin-inline:0}}
.vitem{position:relative;padding:26px 26px 6px}
@media(max-width:760px){.vitem{padding-inline:0}}
.vitem+.vitem{border-left:1px solid var(--line)}
@media(max-width:760px){.vitem+.vitem{border-left:0;border-top:1px solid var(--line)}}
.vitem .ac{display:block;width:22px;height:2px;background:var(--ac,var(--t));margin-bottom:16px}
.vitem h3{font-size:16px;font-weight:600;margin-bottom:6px}
.vitem p{font-size:14px;color:var(--dim)}

/* original story/vals glass cards - still used by the about-us page */
.vals{display:grid;gap:12px}
.val{padding:20px 22px}
.val h3{font-size:16px;font-weight:600;margin-bottom:5px}
.val p{font-size:14px;color:var(--dim)}

/* closing CTA band - the one SOLID block on the page. Every other band is
   a translucent wash over the field; this one is opaque saturated blue with
   a diagonal hatch, so it can't be mistaken for the package band above it
   (owner, 2026-09-03: the two read too alike). White text, dark button. */
/* 4b: the first cut (#2F6BFF) was "too bright, out of place" - now a deep
   opaque navy, still the only solid block on the page but in the same
   register as the field behind everything else */
.cta-band{position:relative;overflow:hidden;padding:88px 0;text-align:center;color:#fff;
  border-block:1px solid rgba(255,255,255,.10);
  background:linear-gradient(115deg,#080E2A 0%,#0C1D4E 55%,#0B2650 100%)}
/* a fainter echo of the hero's LED matrix (owner's ask), same two pitches */
.cta-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.16) 0 1.1px,transparent 1.9px),
    radial-gradient(circle,rgba(120,175,255,.45) 0 1.4px,rgba(120,175,255,.12) 3px,transparent 5px);
  background-size:22px 22px,66px 66px;
  background-position:11px 11px,33px 33px;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 50%,#000 0%,rgba(0,0,0,.5) 50%,transparent 95%);
  mask-image:radial-gradient(70% 90% at 50% 50%,#000 0%,rgba(0,0,0,.5) 50%,transparent 95%)}
.cta-band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 90% at 50% 115%,rgba(62,139,255,.22),transparent 70%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(28px,4.2vw,50px);font-weight:600;letter-spacing:-.03em;max-width:18em;margin:0 auto}
.cta-band h2 em{font-style:normal;color:var(--t)}
.cta-band p{margin:18px auto 0;max-width:36em;color:rgba(255,255,255,.72)}
.cta-band .btn{margin-top:30px}
.cta-band+footer{margin-top:0}

/* full-width footer, matching the header's architecture */
footer{border-top:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);margin-top:40px}
/* compact footer (2026-09-05): brand block | two inline link rows; legal in the base line */
.fgrid{display:grid;grid-template-columns:.9fr 1.75fr;gap:32px;padding:30px 0 22px;align-items:center}
.fgrid img{height:17px;margin-bottom:10px}
.fgrid .blurb{font-size:13.5px;color:var(--dim);max-width:26em}
.flinks{display:grid;gap:14px}
.flinks>div{display:flex;justify-content:flex-end;align-items:baseline;gap:16px;flex-wrap:wrap}
.flinks h4{flex:0 0 auto}
.fgrid ul{justify-content:flex-end}
.fgrid h4{font:600 11px/1 'Geist',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0}
.fgrid ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0}
.fgrid a{text-decoration:none;font-size:13.5px;color:#C8CCD6}
.fgrid a:hover{color:var(--txt)}
.fbase{border-top:1px solid rgba(255,255,255,.07);padding:12px 0 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px}
.fbase .mono{font-size:10.5px}
.flegal a{color:inherit;text-decoration:none}
.flegal a:hover{color:var(--txt)}
footer .oldpad{padding:30px 0 46px}
/* social row under the blurb (2026-09-05) */
.social{display:flex;gap:8px;margin-top:12px}
.social a{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:background .2s}
.social a:hover{background:rgba(255,255,255,.12)}
/* each mark in its own brand colour on hover (X is black, so its tile goes
   white and the mark inverts) */
.social a.s-facebook:hover{background:#1877F2;border-color:#1877F2}
.social a.s-bluesky:hover{background:#0285FF;border-color:#0285FF}
.social a.s-whatsapp:hover{background:#25D366;border-color:#25D366}
.social a.s-x:hover{background:#fff;border-color:#fff}
.social a.s-x:hover img{filter:invert(1)}
.social img{height:15px!important;width:auto;margin:0!important;display:block}
@media(max-width:760px){.fgrid{grid-template-columns:1fr;gap:20px;padding:26px 0 18px}.flinks>div{grid-template-columns:1fr;gap:6px}.fbase{justify-content:flex-start}}


/* ⚠️ Content is NEVER animated into existence - it is present at rest.
   The old scroll-reveal parked every section at opacity:0 behind an
   IntersectionObserver, which cost two review rounds of "missing text":
   Edge's full-page capture re-renders without really scrolling, so the
   observer never fires and whole sections photograph blank. Print, feed
   readers and any js hiccup had the same problem. `.rv` is kept as a no-op
   so the markup needn't change - restore the old behaviour here if ever
   wanted. The one orchestrated moment now lives on the hero, on load, in
   pure css, and it hides nothing that isn't about to appear anyway. */
.rv{opacity:1;transform:none}
.hero .wrap>*{animation:rise .7s cubic-bezier(.2,.6,.2,1) both}
.hero .wrap>h1{animation-delay:.04s}
.hero .wrap>p{animation-delay:.13s}
.hero .wrap>.row{animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- subpage furniture (build.py appends; keep after the concept css) ---- */
/* 2026-09-05: eyebrows are gone from most heroes, so the top/bottom padding
   is balanced around the h1 (was 150/46, tuned for an eyebrow line) */
/* page heroes (2026-09-07): the service-band treatment - a deep blue
   gradient running in from the left, a soft glow on that side, and the
   faint dot matrix. Pseudos sit at z-index 0 (the section now paints its
   own background, so z-index:-1 would hide them). */
.page-hero{padding:118px 0 66px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(100deg,#14295F 0%,#0C1836 46%,#07080C 86%)}
.page-hero::before{content:'';position:absolute;inset:0;height:100%;z-index:0;
  background:radial-gradient(ellipse 48% 66% at 12% 44%,rgba(62,139,255,.34),transparent 70%);
  -webkit-mask-image:none;mask-image:none}
.page-hero::after{content:'';display:block;position:absolute;inset:0;height:100%;z-index:0;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.15) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(120,175,255,.38) 0 1.3px,rgba(120,175,255,.10) 2.6px,transparent 4.4px);
  background-size:22px 22px,66px 66px;background-position:11px 11px,33px 33px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.45) 52%,transparent 88%);
  mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.45) 52%,transparent 88%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(36px,5.6vw,64px);line-height:1.06;font-weight:600;letter-spacing:-.03em;max-width:16em;margin:0 auto}
.page-hero .mono+h1{margin-top:12px}
.page-hero p{margin:20px auto 0;max-width:38em;font-size:17.5px;color:var(--dim)}
.svc-detail{padding:22px 0;scroll-margin-top:90px}
.svc-detail h2{font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.02em}
.svc-detail p{margin-top:12px;color:#C8CCD6;max-width:44em}
.prose h2{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.02em;margin:26px 0 10px}
.prose h3{font-size:clamp(17px,1.8vw,20px);font-weight:600;letter-spacing:-.01em;margin:22px 0 6px}
.prose h2+h3{margin-top:8px}
.prose p{margin:0 0 12px;color:#C8CCD6}
.prose ul{margin:0 0 14px 18px;color:#C8CCD6}
.prose li{margin-bottom:6px}
.prose strong{color:var(--txt);font-weight:600}
.prose a{color:var(--t);text-decoration:underline;text-underline-offset:3px}
.cform label{display:block;font-size:13.5px;font-weight:500;color:var(--dim);margin-bottom:6px}
.cform input:not([type=checkbox]),.cform textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:12px 14px;color:var(--txt);font:400 15.5px 'Geist',sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--t);outline-offset:1px}
.cform p{margin-bottom:16px}
.f2col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.f2col{grid-template-columns:1fr}}
.chk label{display:flex;gap:10px;align-items:baseline;color:#C8CCD6;font-size:14.5px;font-weight:400}
.hpx{position:absolute!important;left:-9999px!important}
.notice{padding:14px 18px;border-radius:6px;margin-bottom:22px;font-size:15px}
.notice.ok{background:rgba(62,214,192,.12);border:1px solid rgba(62,214,192,.4);color:#BFF5EA}
.notice.err{background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4);color:#F6C6C8}
.cform button{cursor:pointer;border:0;font-family:inherit}

/* ---- design round 3: inner pages in the home's banded grammar ---- */
/* services (round 5, 2026-09-05): no index grid, no "service 01" eyebrow -
   one full band per service, GROUND TINTED WITH ITS OWN ACCENT (owner
   picked the strong version over a 15% wash) plus a glow on the media side.
   Media column = outlined ghost numeral + framed studio photo with a SOLID
   accent icon box + "seen in" project cards overlapping the photo's foot.
   Copy column = name, two paragraphs, ruled "what's included" list, button. */
.svc-band{position:relative;overflow:hidden;padding:64px 0;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 26%,#07080C) 0%,color-mix(in srgb,var(--ac) 10%,#07080C) 60%,#07080C 100%);
  border-top:1px solid color-mix(in srgb,var(--ac) 45%,transparent)}
.svc-band::before{content:'';position:absolute;inset:-20% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(ellipse 40% 50% at 22% 40%,color-mix(in srgb,var(--ac) 32%,transparent),transparent 70%)}
.svc-band.flipbg::before{background:radial-gradient(ellipse 40% 50% at 78% 40%,color-mix(in srgb,var(--ac) 32%,transparent),transparent 70%)}
.svc-band .wrap{position:relative}
.svc-panel{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.svc-panel.flip .svc-media{order:2}
.svc-media{position:relative;padding:44px 0 66px}
.svc-media .ghost{position:absolute;z-index:0;right:-6px;top:-30px;font-size:150px;font-weight:700;letter-spacing:-.05em;line-height:1;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ac) 45%,transparent);user-select:none;pointer-events:none}
.svc-frame{position:relative;z-index:1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--drop);aspect-ratio:4/3}
.svc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.svc-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 20%,transparent),rgba(7,8,12,.38))}
.svc-frame .ic{position:absolute;z-index:1;right:20px;top:18px;width:52px;height:52px;display:grid;place-items:center;border-radius:8px;
  background:var(--ac);color:#07080C;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.45)}
.svc-frame .ic svg{width:24px;height:24px;stroke-width:1.9}
/* client tiles = app-icon squares: the brand field as the ground, the logo
   centred, no name (owner 2026-09-06). Sized to fit one row at any width. */
.seen-tiles{position:absolute;z-index:2;left:26px;right:26px;bottom:0;display:flex;gap:10px}
.seen-tiles a{flex:1 1 0;min-width:0;max-width:76px;display:block;text-decoration:none;
  border-radius:22%;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#0B0D14;
  box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .25s}
.seen-tiles a:hover{transform:translateY(-3px)}
.seen-tiles .th{position:relative;display:block;aspect-ratio:1}
.seen-tiles .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.seen-tiles .th img.tl{inset:auto;left:50%;top:50%;width:64%;height:auto;max-height:64%;object-fit:contain;
  transform:translate(-50%,-50%);filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.seen-tiles .th img.tl.wide{width:82%}
.seen-tiles .lbl{position:absolute;left:0;top:-30px;display:inline-block;padding:6px 9px;border-radius:5px;background:rgba(7,8,12,.72);border:1px solid rgba(255,255,255,.14);
  font:600 10.5px/1 'Geist',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ac)}
.svc-copy .ac{display:block;width:30px;height:2px;background:var(--ac);margin-bottom:18px}
.svc-copy h2{font-size:clamp(26px,3.2vw,38px);font-weight:600;letter-spacing:-.02em}
.svc-copy p{color:#C8CCD6;margin-top:14px;max-width:40em}
.incl{margin-top:26px;border-top:1px solid var(--line)}
.incl .mono{display:block;color:var(--ac);padding:14px 0 6px}
.incl>ul:first-child{margin-top:8px}
.incl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.incl li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:#C8CCD6;display:flex;gap:10px;align-items:baseline}
.incl li::before{content:'';flex:0 0 auto;width:14px;height:2px;background:var(--ac);transform:translateY(-4px)}
.svc-copy h2 a{color:inherit;text-decoration:none}
.svc-copy h2 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ac)}
.svc-acts{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.svc-acts{gap:12px}
.btn.acc{background:var(--ac);color:#07080C;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px rgba(0,0,0,.35)}
.btn.acc:hover{transform:translateY(-2px);filter:brightness(1.08)}
.tiles a.tile{display:block;text-decoration:none;color:inherit}
/* individual service pages (2026-09-05): accent-tinted hero, WP body copy +
   a sticky sidebar (photo, included list, button), related work, the two
   testimonials every WP service page carried, other-services strip, CTA */
.svc-hero{background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 28%,#07080C) 0%,color-mix(in srgb,var(--ac) 10%,#07080C) 55%,#07080C 100%)}
.svc-hero .mono a{color:inherit;text-decoration:none}
.svc-hero .mono a:hover{text-decoration:underline;text-underline-offset:4px}
/* mosaic (owner's call 2026-09-05): one large tile full width, two smaller
   side by side beneath - same on every service */
.svc-mosaic{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:36px}
.svc-mosaic span:not(.ic){position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--drop);aspect-ratio:4/3}
.svc-mosaic span:nth-child(1){grid-column:1/3;aspect-ratio:16/9}
.svc-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.svc-mosaic .ic{position:absolute;z-index:1;right:18px;top:18px;width:52px;height:52px;display:grid;place-items:center;border-radius:8px;
  background:var(--ac);color:#07080C;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.45)}
.svc-mosaic .ic svg{width:24px;height:24px;stroke-width:1.9}
.svc-side .incl{margin-top:0;border-top:0}
.svc-side .incl>ul:first-child{margin-top:18px}
.side-seen{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
.side-seen>.mono{display:block;color:var(--ac);margin-bottom:6px}
.side-seen a{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:#E6E8EE}
.side-seen a:hover b{color:var(--t)}
.side-seen .th{position:relative;flex:0 0 auto;width:64px;height:44px;border-radius:5px;border:1px solid rgba(255,255,255,.14);overflow:hidden}
.side-seen .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.side-seen .th img.tl{inset:auto;left:50%;top:50%;width:52%;height:auto;max-height:76%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.side-seen .th img.tl.wide{width:80%}
.side-seen b{font-weight:500;font-size:14px;line-height:1.25}
.tools{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
.tools>.mono{display:block;color:var(--ac);margin-bottom:12px}
.tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tools li{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.tools img{max-width:26px;max-height:26px;display:block}
.tools img[src*="tool-photoshop"],.tools img[src*="tool-illustrator"],.tools img[src*="tool-indesign"],.tools img[src*="tool-premiere"],.tools img[src*="tool-aftereffects"],.tools img[src*="tool-lightroom"],.tools img[src*="tool-acrobat"]{max-width:28px;max-height:28px;border-radius:5px}
.svc-side>.btn{margin-top:26px}

/* testimonials (2026-09-05, owner: the 2-up quote cards were "a wall of
   text"): editorial rows - brand artwork one side (links to the project),
   big accent quote mark + the opening sentence pulled out large + the rest
   smaller + attribution the other; sides alternate. Text verbatim. */
.tm-list{margin-top:36px;border-bottom:1px solid var(--line)}
.tm{display:grid;grid-template-columns:1fr 1.55fr;gap:28px 52px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.tm.flip{grid-template-columns:1.55fr 1fr}
.tm.flip .tm-art{order:2}
.tm-art{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--drop)}
.tm-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.tm-art:hover img{transform:scale(1.04)}
.tm-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(6,7,10,.86) 0%,rgba(6,7,10,.3) 45%,transparent 70%)}
.tm-cap{position:absolute;z-index:1;left:20px;right:20px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.tm-cap b{font-weight:600;font-size:clamp(17px,1.6vw,21px);line-height:1.15;color:#fff;letter-spacing:-.01em}
.tm-cap small{color:var(--ac);font-size:10.5px}
/* the quote glyph: Geist's is two blunt bars, so set it in a serif for a
   proper curled mark; height in em keeps it tucked to the lead (2026-09-06) */
.tm-q{display:block;height:.46em;font:700 96px/1 Georgia,'Times New Roman',serif;
  color:var(--ac);opacity:.85;margin-left:-.05em;user-select:none}
.tm-body .lead{font-size:clamp(19px,2vw,25px);font-weight:500;line-height:1.35;letter-spacing:-.015em;color:#fff}
.tm-body p+p{margin-top:14px}
.tm-body p:not(.lead){color:#B8BDC9;font-size:15px;line-height:1.65}
.tm-who{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
/* the CLIENT LOGO on a small plate, not a cropped round thumbnail of the
   artwork, and no tag subline (owner 2026-09-06) */
.tm-who .who-logo{flex:0 0 auto;height:38px;width:auto;max-width:76px;object-fit:contain;padding:6px 8px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.tm-who .who-logo.wide{max-width:132px}
.tm-who b{font-weight:600;color:#fff;font-size:14.5px;line-height:1.2}
.tm-who .mono{color:var(--dim);font-size:10.5px}
@media(max-width:860px){.tm,.tm.flip{grid-template-columns:1fr;gap:22px;padding:34px 0}.tm.flip .tm-art{order:0}.tm-art{aspect-ratio:16/9}}
.more-svc{display:grid;grid-template-columns:repeat(5,1fr);margin-top:36px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.more-svc a{display:flex;align-items:center;gap:14px;padding:18px 20px;text-decoration:none;color:#E6E8EE;border-right:1px solid var(--line);transition:background .2s}
.more-svc a:last-child{border-right:0}
.more-svc a:hover{background:color-mix(in srgb,var(--ac) 16%,transparent)}
.more-svc .ic{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:7px;background:var(--ac);color:#07080C}
.more-svc .ic svg{width:18px;height:18px;stroke-width:1.9}
.more-svc b{font-weight:500;font-size:14px;line-height:1.2}
@media(max-width:1000px){.more-svc{grid-template-columns:repeat(3,1fr)}.more-svc a{border-bottom:1px solid var(--line)}.more-svc a:nth-child(3n){border-right:0}.more-svc a:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:600px){.more-svc{grid-template-columns:1fr 1fr}.more-svc a:nth-child(3n){border-right:1px solid var(--line)}.more-svc a:nth-child(2n){border-right:0}.more-svc a:nth-last-child(-n+2){border-bottom:0}.more-svc a:nth-last-child(1){border-bottom:0}}
@media(max-width:860px){.svc-panel{grid-template-columns:1fr;gap:28px}.svc-panel.flip .svc-media{order:0}.svc-frame{aspect-ratio:16/9}
  .svc-media{padding:0 0 58px}.svc-media .ghost{display:none}}
@media(max-width:520px){.incl ul{grid-template-columns:1fr}}
/* about (rebuilt 2026-09-03 to the live page's order): a shared opaque
   dark band, two ruled points, the client logo strip, a lede in the story.
   ⚠️ subpage css MUST live here in EXTRA_CSS - anything written into
   site.css below the marker is overwritten on the next build. */
.band-dark{background:linear-gradient(115deg,#070B1F 0%,#0A1636 60%,#091A3C 100%);border-bottom:1px solid var(--line)}
.facts2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;max-width:920px;margin:0 auto;border-top:1px solid var(--line)}
@media(max-width:700px){.facts2{grid-template-columns:1fr}}
.facts2>div{padding:26px 0;border-bottom:1px solid var(--line)}
.facts2 .ac{display:block;width:30px;height:3px;background:var(--ac,var(--t));margin-bottom:16px}
.facts2 h3{font-size:18px;font-weight:600;color:color-mix(in srgb,var(--ac,var(--t)) 55%,#fff)}
.facts2 p{margin-top:8px;color:var(--dim);font-size:15.5px}
.facts2 a{color:var(--t);text-decoration:underline;text-underline-offset:3px}
.clients{display:flex;justify-content:center;align-items:center;gap:28px 56px;flex-wrap:wrap;margin-top:56px}
.clients img{height:42px;width:auto;display:block;opacity:.9;transition:opacity .25s}
.clients img:hover{opacity:1}
.story-head .lede{font-size:18px;color:#E3E6EE}
/* about: four values in the divided row */
.vgrid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px) and (min-width:761px){
  .vgrid-4{grid-template-columns:repeat(2,1fr)}
  .vgrid-4 .vitem:nth-child(2n+1){border-left:0}
  .vgrid-4 .vitem:nth-child(n+3){border-top:1px solid var(--line)}
}
.story-head p+p{margin-top:12px}
/* project pages: framed artwork, then story + ruled sidebar */
/* projects index: case-study rows (2026-09-05) */
.cs-list{border-bottom:1px solid var(--line)}
.cs{display:grid;grid-template-columns:1fr 1.25fr;gap:28px 52px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.cs.flip{grid-template-columns:1.25fr 1fr}
.cs.flip .cs-art{order:2}
.cs-art{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--drop)}
.cs-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.cs-art:hover img{transform:scale(1.04)}
/* client logo centred on the card (2026-09-06) */
.cs-art img.cs-logo{inset:auto;left:50%;top:50%;width:36%;height:auto;object-fit:contain;transform:translate(-50%,-50%);transition:none;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.55))}
.cs-art img.cs-logo.wide{width:62%}
.cs-art:hover img.cs-logo{transform:translate(-50%,-50%)}
.cs-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 14%,transparent),rgba(7,8,12,.25))}
.cs-body .ac{display:block;width:30px;height:2px;background:var(--ac);margin-bottom:18px}
.cs-body h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.02em}
.cs-body h2 a{color:inherit;text-decoration:none}
.cs-body h2 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ac)}
.cs-svcs{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
/* on the projects index the labels are dropped (5 services wrapped to two
   messy rows); the icons carry it, names stay on the project page itself */
/* key to the row icons, once above the list */
.svc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.lgd-label{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 'Geist',sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t);margin-right:2px}
.lgd-label svg{width:16px;height:16px;stroke-width:2}
.svc-legend a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--dim);font-size:12.5px}
.svc-legend a:hover{color:#fff}
.svc-legend a{cursor:pointer;padding:5px 9px;margin:-5px -3px;border-radius:7px;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.svc-legend a.on{color:#fff;background:color-mix(in srgb,var(--ac) 16%,transparent);border-color:color-mix(in srgb,var(--ac) 45%,transparent)}
.cs[hidden],.legacy-band[hidden]{display:none!important}
.filt-status{margin:16px 0 0;font-size:14px;color:var(--dim)}
.filt-status b{color:#fff;font-weight:600}
.filt-status a{color:var(--t);text-decoration:underline;text-underline-offset:3px;margin-left:14px}
.svc-legend .ic{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--ac);color:#07080C}
.svc-legend .ic svg{width:13px;height:13px;stroke-width:2}
.cs-list{border-top:0}
.cs:first-child{border-top:0}
.cs .cs-svcs{gap:8px}
.cs .cs-svcs a span:last-child{display:none}
.cs .cs-svcs .ic{width:34px;height:34px}
.cs .cs-svcs .ic svg{width:18px;height:18px}
.cs-svcs a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#C8CCD6;font-size:13.5px}
.cs-svcs a:hover{color:#fff}
.cs-svcs .ic{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:var(--ac);color:#07080C;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.35)}
.cs-svcs .ic svg{width:16px;height:16px;stroke-width:1.9}
.cs-body p{color:#C8CCD6;margin-top:16px;max-width:44em}
.cs-body .btn{margin-top:24px}
/* legacy band: same rows, quieter - muted artwork, smaller title */
section.pj-active{padding-bottom:40px}
section.legacy-band{padding:34px 0 28px}
.legacy-band .head{text-align:left;max-width:none;margin:0}
.legacy-band .head h2{font-size:clamp(20px,2.2vw,26px)}
.legacy-band .head p{margin:8px 0 0;font-size:14.5px}
.cs.legacy{padding:30px 0}
.cs.legacy .cs-body h2{font-size:clamp(20px,2.2vw,26px)}
.cs.legacy .cs-body p{font-size:15px}
@media(max-width:860px){.cs,.cs.flip{grid-template-columns:1fr;gap:20px;padding:34px 0}.cs.flip .cs-art{order:0}.cs-art{aspect-ratio:16/9}}
/* project hero (2026-09-05): the client's branding faded behind the title,
   like the live site - image right-weighted, masked to nothing on the left,
   accent glow, the page's own dark ground underneath */
.pj-hero{position:relative;overflow:hidden;text-align:left;padding:118px 0 66px;
  background:radial-gradient(ellipse 50% 70% at 78% 50%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 70%),#07080C}
/* round 3 (owner): no left-side fade - the whole field at 50% over the dark ground */
.pj-hero .pj-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.5}
.pj-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(7,8,12,.55) 0%,transparent 30%)}
.pj-hero h1,.pj-hero .cs-svcs span:last-child{text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* .raw = plain brand artwork standing in for a proper field: dim it further */
.pj-hero.raw .pj-bg{opacity:.3;filter:saturate(.7) blur(1px)}
.pj-hero .wrap{position:relative;z-index:1}
.pj-herowrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
.pj-logo{flex:0 0 auto;width:clamp(120px,15vw,190px);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.55))}
.pj-logo.wide{width:clamp(200px,26vw,340px)}
@media(max-width:700px){.pj-logo{width:84px;align-self:flex-start}.pj-logo.wide{width:150px}}
.pj-hero h1{max-width:12em;text-align:left;margin:0}
.pj-hero .cs-svcs{margin-top:22px}
@media(max-width:700px){.pj-hero{padding:100px 0 48px}.pj-hero .pj-bg{object-position:70% center}}
/* project gallery band (2026-09-06): even grid, any count, full-size on click */
section.gal-band{padding:44px 0 52px}
.gal-head{text-align:left;max-width:none;margin:0 0 26px}
.gal-head h2{font-size:clamp(20px,2.2vw,26px)}
.pj-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.pj-gallery a{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:8px;border:1px solid var(--line);box-shadow:var(--drop)}
.pj-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pj-gallery a:hover img{transform:scale(1.05)}
/* CSS-only lightbox (no JS): each image is a :target overlay */
.lb{position:fixed;inset:0;z-index:120;display:none}
.lb:target{display:block}
.lb-bg{position:absolute;inset:0;background:rgba(5,6,10,.93);backdrop-filter:none}
.lb figure{position:absolute;inset:0;margin:0;display:grid;place-content:center;gap:14px;padding:64px 72px;pointer-events:none}
.lb figure img{max-width:min(1100px,86vw);max-height:78vh;width:auto;height:auto;border-radius:8px;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb figcaption{font-size:13.5px;color:#C8CCD6;text-align:center}
.lb-btn{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;color:#E6E8EE;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.18)}
.lb-btn svg{width:20px;height:20px;stroke-width:2}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-x{right:18px;top:18px}
@media(max-width:700px){.lb figure{padding:70px 14px}.lb-prev{left:10px}.lb-next{right:10px}}
/* project sidebar (2026-09-05): photos, service icons, platforms, button */
/* every shot for the project, 2-up in the sidebar, opening the lightbox */
.pj-pics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pj-pics a{position:relative;display:block;aspect-ratio:4/3;border-radius:7px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--drop)}
.pj-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.pj-pics a:hover img{transform:scale(1.07)}
.pj-svcs{flex-direction:column;gap:12px;margin-top:12px}
.pj-side .tools{margin-top:0;border-top:0}
.pj-side .tools>.mono{margin-bottom:0}
.pj-side .tools ul{margin-top:12px}
.pj-side .tools img{max-width:24px;max-height:24px}
.pj-art{margin:0 0 44px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--drop)}
.pj-art img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover}
.pj-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){.pj-grid{grid-template-columns:1fr;gap:36px}}
.pj-main>p:first-child{font-size:18px;color:#E3E6EE}
.pj-main h2{margin-top:34px}
.pj-quote{margin:14px 0 0;padding:20px 26px;border-left:2px solid var(--t);background:rgba(255,255,255,.03);border-radius:0 var(--r) var(--r) 0}
.pj-quote p:last-child{margin-bottom:0}
.pj-side{border-top:1px solid var(--line)}
/* sticky ONLY when the sidebar fits the viewport (script below adds .stick);
   a taller-than-viewport sticky sidebar hides its bottom until the article
   ends - owner hit this on the merged ARC page 2026-09-05 */
.pj-side.stick{position:sticky;top:92px}
.pj-box{padding:22px 0;border-bottom:1px solid var(--line)}
.pj-box .mono{display:block;margin-bottom:14px;color:var(--t)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.chips li{font-size:13px;padding:6px 11px;border:1px solid var(--line);border-radius:5px;color:#C8CCD6}
.pj-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pj-links a{color:var(--txt);font-size:15px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.pj-links a:hover{color:var(--t)}
.pj-side>.btn{margin-top:24px}
/* contact: facts column + ruled pane */
.cgrid{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
@media(max-width:860px){.cgrid{grid-template-columns:1fr;gap:36px}}
.cside h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.03em;margin-top:12px}
.cside>p{margin-top:14px;color:var(--dim);max-width:30em}
.cfacts{margin-top:34px;border-top:1px solid var(--line)}
.cfact{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:3px}
.cfact .ac{display:block;width:22px;height:2px;background:var(--ac,var(--t));margin-bottom:10px}
.cfact b{font-weight:600;font-size:15px}
.cfact span:not(.ac){color:var(--dim);font-size:14.5px}
.cfact a{color:var(--t);text-decoration:underline;text-underline-offset:3px}
.pane{padding:clamp(24px,3.4vw,40px);border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.03)}
/* small business package: ruled feature rows + sticky price card */
/* small business package (2026-09-05 rebuild) */
.sbp-hero{text-align:left;padding:118px 0 70px}
.sbp-herowrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.sbp-hero h1{text-align:left;margin:0;max-width:11em}
.sbp-hero p{margin:18px 0 0;max-width:34em}
.price-line{display:flex;align-items:center;gap:16px;margin-top:26px}
.price-line b{font-size:clamp(40px,4.4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1}
.price-line span{font-size:13.5px;color:var(--dim);line-height:1.4}
.sbp-hero .svc-acts{margin-top:26px}
.sbp-mosaic{margin-bottom:0}
.head p{margin-top:16px;color:var(--dim);max-width:40em;margin-left:auto;margin-right:auto}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.pk-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.03);box-shadow:var(--drop)}
.pk-pic{position:relative;display:block;aspect-ratio:16/8}
.pk-pic img{width:100%;height:100%;object-fit:cover;display:block}
.pk-pic::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 16%,transparent),rgba(7,8,12,.4))}
.pk-pic .ic{position:absolute;z-index:1;left:18px;bottom:-20px;width:48px;height:48px;display:grid;place-items:center;border-radius:8px;
  background:var(--ac);color:#07080C;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.45)}
.pk-pic .ic svg{width:22px;height:22px;stroke-width:1.9}
.pk-card h3{font-size:19px;font-weight:600;margin:34px 26px 0;color:color-mix(in srgb,var(--ac) 55%,#fff)}
.pk-card p{margin:10px 26px 26px;color:#C8CCD6;font-size:15px}
.plat-band{padding:56px 0}
.plat-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.plat-list li{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.035)}
.plat-list img{height:30px;width:auto;max-width:80%;object-fit:contain}
.plat-list span{font-size:12px;color:var(--dim);text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:36px}
.steps>div{padding:30px 26px 34px;border-right:1px solid var(--line)}
.steps>div:last-child{border-right:0}
.steps .n{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ac)}
.steps h3{font-size:19px;font-weight:600;margin-top:14px;color:color-mix(in srgb,var(--ac) 55%,#fff)}
.steps p{margin-top:10px;color:var(--dim);font-size:15px}
.steps .bar{display:block;height:3px;width:44px;background:var(--ac);margin-top:22px}
.sbp-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center}
.sbp-main h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.03em}
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.checks li{padding:11px 0 11px 30px;border-bottom:1px solid var(--line);font-size:15px;color:#E3E6EE;position:relative}
.checks li::before{content:'';position:absolute;left:0;top:15px;width:16px;height:16px;border-radius:50%;background:var(--t);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tm-art img.tm-logo{position:absolute;z-index:1;inset:auto;left:50%;top:42%;width:36%;max-height:46%;height:auto;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));transition:none}
.tm-art img.tm-logo.wide{width:60%}
.tm-art:hover img.tm-logo{transform:translate(-50%,-50%)}
@media(max-width:900px){.plat-list{grid-template-columns:repeat(4,1fr)}.steps{grid-template-columns:1fr 1fr}.steps>div:nth-child(2n){border-right:0}.steps>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:860px){.sbp-herowrap{grid-template-columns:1fr;gap:30px}.pk-grid{grid-template-columns:1fr}.sbp-grid{grid-template-columns:1fr;gap:34px}.checks{grid-template-columns:1fr}}
@media(max-width:520px){.plat-list{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}.steps>div{border-right:0;border-bottom:1px solid var(--line)}.steps>div:last-child{border-bottom:0}}
/* phone navigation: a no-JS <details> menu (the site ships zero scripts).
   Desktop never sees it; on phones it replaces the hidden link group. */
.nav .links{display:contents}
/* services dropdown (desktop) */
.dd{position:relative;display:inline-block}
.ddm{position:absolute;left:-8px;top:100%;padding-top:10px;display:none;z-index:70}
.dd:hover .ddm,.dd:focus-within .ddm{display:block}
.ddm .in{display:grid;min-width:250px;padding:8px;border-radius:8px;background:rgba(12,14,22,.97);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.nav .ddm a{display:flex;align-items:center;gap:11px;padding:9px 10px;white-space:nowrap;color:#D8DBE3;font-size:13.5px}
.nav .ddm a:hover{color:#fff}
.nav .ddm .ic{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:var(--ac);color:#07080C}
.nav .ddm .ic svg{width:14px;height:14px;stroke-width:2}
.mlinks a.sub{display:flex;align-items:center;gap:10px;padding:10px 0 10px 14px;font-size:15px;color:#C8CCD6}
.mlinks a.sub .ic{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--ac);color:#07080C}
.mlinks a.sub .ic svg{width:13px;height:13px;stroke-width:2}
.mnav{display:none;position:static;margin-left:6px}
.mnav summary{list-style:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dim);padding:9px 14px;border-radius:5px;border:1px solid var(--line)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{color:var(--txt);background:rgba(255,255,255,.09)}
.mlinks{position:absolute;left:0;right:0;top:64px;display:grid;padding:6px 24px 18px;
  background:rgb(12,14,22);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--drop)}
.mlinks a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--txt);text-decoration:none;border-radius:0}
.mlinks a:last-child{border-bottom:0}
/* must live here, AFTER .links{display:contents}, or that rule wins */
@media(max-width:700px){.nav .links{display:none}.mnav{display:block}}
/* legal: a plain readable column, no glass */
.legal{max-width:780px;margin:0 auto}
.legal>p:first-child{font-size:17.5px;color:#E3E6EE}