/* ============================================================
   Carl Gabriel Piramo · portfolio stylesheet
   Flat navy · hairlines and whitespace · one coral accent · Anton / Schibsted Grotesk / Martian Mono
   Sections:
     00 Tokens            11 Proof              22 Page banner
     01 Base & reset      12 Gallery & lightbox 23 Jump-chips
     02 Type roles        13 Experience         24 Home bento
     03 Components        14 Why me             25 CTA band & pager
     04 Ambient (gone)    15 Process            26 Page transitions
     05 Nav               16 About              27 Touch & press states
     06 Hero              17 FAQ                20 Motion system
     07 Brand row         18 Contact            21 Reduced motion
     08 Stats             19 Footer, to-top
     09 Services & loop
     10 Work
   22 to 28 sit before 20/21 so the motion and reduced-motion layers still come last.
   28 Answer blocks: question-led sections (.qa), page-hero follow-up lede, footer date
   29 Case study (ama-holdings.html), the Home case tile and the Work flow cards
   Rules: tokens once · one rule per concern · transform/opacity motion only
   Flat on purpose (spec docs/design/2026-11-02-flat-calm-redesign.md): solid colours only, no blur,
   no masks, no glows, no colour ramps. Depth is a surface step plus a 1px hairline. Hover changes colour,
   border colour or an underline, never position, size or shadow. One coral button and one
   coral number per screen; one solid coral surface (.coral) at the end of each page.
   ============================================================ */


/* ============================================================
   00 · TOKENS
   ============================================================ */
:root{
  /* surfaces, darkest to lightest */
  --bg-0:#0C0B1E;        /* nav when scrolled, caption bars, lightbox chrome, chart tip, inputs */
  --bg:#12112A;          /* page, grid cells */
  --bg-2:#1A1838;        /* .section--alt, image wells, .auto-flow */
  --panel:#1E1C3A;       /* cards, tiles, forms, chart card */
  --panel-2:#252247;     /* raised: hover fill on pager and ci-row, active menu row */

  /* lines */
  --edge:#332F58;                        /* control borders, chips, inputs */
  --edge-soft:rgba(var(--fg-rgb),.10);   /* card borders, section rules, cell grid lines */
  --edge-strong:rgba(var(--fg-rgb),.38); /* hover border, ghost button, portrait outline, form field boundary: 3.3:1 on --panel and --bg */

  /* text */
  --text:#F4F2FC;
  --mute:#9E99C6;        /* 6.1:1 on --panel, 6.9:1 on --bg */
  --dim:#6F6A94;         /* decorative only: separators, swipe cues */
  --fg-rgb:244,242,252;
  --bg-rgb:18,17,42;

  /* coral */
  --accent:#FF4D5E;        /* brand mark, surname, h1 em, highlighted numbers, peak bar, coral surfaces */
  --accent-rgb:255,77,94;
  --accent-btn:#D43748;    /* primary button fill, white text 4.7:1 */
  --accent-btn-deep:#C92E3C;
  --accent-text:#FF6674;   /* small coral text on --panel, 5:1: .stat--hl sublabel only, .is-error */
  --accent-tint:rgba(var(--accent-rgb),.10); /* .stat--hl cells, .vs--me */
  --ink:#12112A;           /* text and button fill on a coral surface: 5.7:1 on #FF4D5E */

  /* data colours: diagrams, chart bars, legends. Never UI chrome. */
  --data-1:#FF4D5E;
  --data-2:#6C8BFF;
  --data-3:#36D399;
  --data-mute:rgba(var(--fg-rgb),.38); /* 3.3:1 on --panel: a bar reads without its label */
  --blue:#6C8BFF;--blue-rgb:108,139,255;  /* kept: existing diagram rules read them */
  --win:#36D399;--win-rgb:54,211,153;

  --shadow:0 8px 24px rgba(0,0,0,.35);   /* floating UI only */
  --scrim:rgba(12,11,30,.9);             /* solid caption bar over media */

  --t-xs:12px;--t-sm:13px;
  --r:12px;--r-lg:20px;

  --hook:'Anton','Arial Narrow',Impact,sans-serif;
  --body:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif;
  --mono:'Martian Mono','SFMono-Regular',Consolas,monospace;

  --pad:clamp(20px,5vw,64px);
  --section:clamp(72px,11vw,140px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:66px;
  --jump-h:61px; /* .jumpnav: 8 + 44 + 8 + 1px border */
  --wrap:1180px;
}
@media (max-width:860px){:root{--nav-h:58px}}

/* the one solid coral surface per page: .cta-band on the inner pages, .tile--contact on Home.
   Inside it text is ink, the em is underlined (not recoloured) and the primary button inverts,
   so the "one coral button per screen" rule still holds. */
.coral,.coral.card{ /* .coral.card: a tile's own .card fill (03) must not outrank the surface */
  background:var(--accent);color:var(--ink);
  --text:#12112A;--mute:#12112A;--dim:rgba(18,17,42,.85); /* 4.8:1 on coral */
  --edge-soft:rgba(18,17,42,.2);--edge-strong:rgba(18,17,42,.45);
}
.coral .btn--primary{background:var(--ink);color:#F4F2FC}
.coral .btn--primary:hover{background:#F4F2FC;color:var(--ink)}
.coral .btn--link{color:var(--ink);text-decoration-color:rgba(18,17,42,.45)}
.coral .btn--link:hover{text-decoration-color:var(--ink)}
.coral .eyebrow{color:var(--ink)}
.coral .eyebrow::before{background:var(--ink)}
.coral .hook,.coral .hook em,.coral .lede,.coral .tile-title,.coral .tile-title em{color:var(--ink)}
.coral .hook em,.coral .tile-title em{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.coral .mono-line{color:var(--ink)} /* 5.7:1; the .75 alpha was 4.1:1 */
.coral ::selection{background:var(--ink);color:#F4F2FC}
.coral :focus-visible{outline-color:var(--ink)}


/* ============================================================
   01 · BASE & RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* smooth only after an in-page interaction (focus), so programmatic scrolls stay instant */
html:focus-within{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (max-width:520px){body{font-size:16px}}
img,video{display:block;max-width:100%;height:auto}
svg{flex:none}
ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
strong,b{font-weight:700}
::selection{background:var(--accent);color:var(--ink)} /* ink on coral 5.7:1, the pairing the coral surface uses */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
body.has-jump [id]{scroll-margin-top:calc(var(--nav-h) + var(--jump-h) + 16px)}
[hidden]{display:none !important} /* filtered gallery items and inactive tab panels set display on their classes */

.skip{
  position:fixed;top:10px;left:10px;z-index:100;
  padding:10px 16px;border-radius:999px;
  background:var(--accent-btn);color:#fff;font-weight:700;text-decoration:none;
  transform:translateY(-200%);
  transition:transform .3s var(--ease-out);
}
.skip:focus-visible{transform:none}
/* visually hidden, still read by assistive tech */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
main{position:relative}
.section{padding-block:var(--section)}
/* inner pages open under a banner (and jump-chips), so their sections need less air than the one-page layout did */
body:not([data-page="home"]){--section:clamp(56px,7vw,96px)}
.section--alt{background:var(--bg-2);border-block:1px solid var(--edge-soft)}
.section-head{max-width:820px;margin-bottom:clamp(36px,5vw,60px)}
.section-head .lede{margin-top:18px}


/* ============================================================
   02 · TYPE ROLES
   ============================================================ */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);margin-bottom:18px;
}
.eyebrow::before{content:'';flex:none;width:18px;height:1px;background:var(--mute)}
.hook{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;
  line-height:1.02;letter-spacing:.005em;text-wrap:balance;
}
h2.hook{font-size:clamp(30px,5vw,56px)}
/* heading emphasis: the page's h1 em is its one coral phrase; section h2s are two-tone white and mute */
.hook em{font-style:normal;color:var(--mute)}
h1 .hook em,h1.hook em,.page-title em,.hero-name .ac{color:var(--accent)}
.lede{color:var(--mute);max-width:600px;font-size:clamp(16px,1.4vw,18px)}
.lede strong{color:var(--text);font-weight:500}
.lede a{color:var(--text);text-decoration-color:var(--edge-strong);text-underline-offset:3px}
.lede a:hover{text-decoration-color:var(--text)}
.mono-line{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);font-weight:400;
}
.card-title{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2vw,23px);line-height:1.12;letter-spacing:.01em;
}
.sub-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;
}
.sub-head::after{content:'';flex:1 0 32px;height:1px;background:var(--edge-soft)}


/* ============================================================
   03 · COMPONENTS: chip · btn · ic-tile · card · seg
   ============================================================ */
.chip{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.4;padding:5px 10px 4px;
  border:1px solid var(--edge);border-radius:999px;
  color:var(--mute);background:transparent;
  white-space:nowrap;
}
/* --accent and --blue render as the base chip (names kept for the markup and the lightbox copy) */
.chip--accent,.chip--blue{color:var(--mute);border-color:var(--edge)}
.chip--win{color:var(--data-3);border-color:rgba(var(--win-rgb),.4)} /* status, not decoration */
/* chips over media sit on a solid scrim bar */
.tile-chip,.gal-chip,.vframe .chip,.about-photo .chip{background:var(--scrim);color:var(--text);border-color:var(--edge);box-shadow:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;border-radius:999px;
  font-family:var(--body);font-weight:700;font-size:15px;line-height:1.2;
  text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn--primary{color:#fff;background:var(--accent-btn);box-shadow:none}
.btn--primary:hover{background:var(--accent-btn-deep)}
.btn--ghost{color:var(--text);background:transparent;border-color:var(--edge-strong)}
.btn--ghost:hover{border-color:var(--text);background:rgba(var(--fg-rgb),.05)}
.btn--sm{min-height:40px;padding:8px 16px;font-size:13px}
/* the quiet second action: an underlined text link with a 44px row */
.btn--link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1.2;
  color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--edge-strong);
  transition:text-decoration-color .2s var(--ease),color .2s var(--ease);
}
.btn--link:hover{text-decoration-color:var(--text)}

.ic-tile{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:10px;
  color:var(--text);background:transparent;border:1px solid var(--edge);
}
.ic-tile svg{width:20px;height:20px}
/* --blue, --win and --solid render as the base tile */
.ic-tile--blue,.ic-tile--win,.ic-tile--solid{color:var(--text);background:transparent;border-color:var(--edge);box-shadow:none}

.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--edge-soft);border-radius:var(--r-lg);
  box-shadow:none;
}
/* lift: the transition list matches .reveal so cards carrying both classes behave identically;
   the hover itself is a border colour, not a lift */
.card--lift{
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),border-color .2s var(--ease);
}
.card--lift:hover{
  transform:none;
  border-color:var(--edge-strong);
  box-shadow:none;
  transition-delay:0s !important; /* stagger delay set inline by JS must not delay the hover */
}
.card.tilt{transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),border-color .2s var(--ease)}
.card.tilt:hover{border-color:var(--edge-strong);transition-delay:0s !important}

/* segmented control: .work-tabs, .gal-filters, .proof-tablist
   JS measures the active .seg-btn (offsetLeft/offsetWidth, unaffected by .reveal transforms)
   and sets --seg-x/--seg-w on the .seg-ind (inline transform/width work too).
   Without JS the indicator stays 0-wide and the active button is marked by its text colour alone. */
.seg{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:2px;max-width:100%;
  padding:3px;border-radius:999px;
  background:var(--bg-0);border:1px solid var(--edge);
  box-shadow:none;
}
.seg-ind{
  position:absolute;z-index:0;top:3px;bottom:3px;left:0;
  width:var(--seg-w,var(--ind-w,0px));
  transform:translateX(var(--seg-x,var(--ind-x,0px)));
  border-radius:999px;pointer-events:none;
  background:var(--text);
  box-shadow:none;
  transition:transform .3s var(--ease-out),width .3s var(--ease-out);
}
.seg-btn{
  position:relative;z-index:1;flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:10px 16px;border-radius:999px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;
  white-space:nowrap;color:var(--mute);background:transparent;
  transition:color .2s var(--ease);
}
.seg-btn:hover{color:var(--text)}
.seg-btn.is-active,.seg-btn[aria-pressed="true"],.seg-btn[aria-selected="true"]{color:var(--bg)}
.seg-btn:focus-visible{outline-offset:2px;border-radius:999px}
/* phones: the pill scrolls sideways instead of squeezing four tabs into 358px; segUpdate scrolls the chosen tab into view */
@media (max-width:560px){
  .proof-tablist,.gal-filters,.work-tabs{
    display:flex;width:100%;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:3px;
  }
  .proof-tablist::-webkit-scrollbar,.gal-filters::-webkit-scrollbar,.work-tabs::-webkit-scrollbar{display:none}
  .proof-tablist .seg-btn,.gal-filters .seg-btn,.work-tabs .seg-btn{flex:none;scroll-snap-align:start;padding-inline:14px;font-size:12px;letter-spacing:.04em}
  .work-tabs .seg-btn{padding-inline:12px} /* the four work tabs fit the 334px pill at 375 without a 3px wiggle */
  .gal-filters .gal-count{font-size:11px;min-width:20px;height:20px}
}


/* ============================================================
   04 · AMBIENT BACKGROUND
   Gone: the body is flat --bg; rhythm comes from .section--alt and the surface ladder.
   ============================================================ */


/* ============================================================
   05 · NAV & MOBILE MENU
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:transform .4s var(--ease-out),border-color .2s var(--ease),background-color .2s var(--ease);
}
.nav--scrolled{background:var(--bg-0);border-bottom-color:var(--edge-soft)}
.nav--hidden{transform:translateY(-100%)}
body.nav-open .nav{transform:none}
.nav-inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  height:var(--nav-h);display:flex;align-items:center;gap:28px;
}
.brand{
  display:inline-flex;align-items:center;min-height:44px;order:0;
  font-family:var(--hook);font-size:21px;letter-spacing:.04em;line-height:1;
  text-decoration:none;color:var(--text);
}
.brand b{color:var(--accent);font-weight:400}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;margin-left:auto;border-radius:10px;order:3;
}
.nav-toggle-bar{
  width:20px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .35s var(--ease-out),opacity .25s var(--ease);
}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0;transform:scaleX(0)}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* DOM order: brand, nav-cta, nav-toggle, nav-menu. On desktop the menu is display:contents so
   the links take order 1 and the pill order 2; on phones the pill sits beside the burger. */
.nav-menu{display:contents}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;order:1}
.nav-links a{
  position:relative;display:inline-block;padding:8px 10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;
  transition:color .2s var(--ease);
}
.nav-links a::after{
  content:'';position:absolute;left:10px;right:10px;bottom:2px;height:1px;
  background:var(--text);
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav-links a:hover{color:var(--text)}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a.active::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-home{display:none} /* Home shows only inside the mobile menu; the brand mark is Home on desktop */
.nav-cta{order:2;margin-left:8px}
.nav-cta[aria-current="page"]{box-shadow:0 0 0 2px rgba(var(--fg-rgb),.55)} /* ring only */
/* at the top of a page the hero or banner already shows the coral primary, so the bar pill is a ghost
   until the visitor scrolls (main.js adds .nav--scrolled past 20px): one coral button per screen.
   contact.html keeps the coral pill at the top: it is the current-page marker there */
body:not([data-page="contact"]) .nav:not(.nav--scrolled) .nav-cta{background:transparent;border-color:var(--edge-strong);color:var(--text)}
body:not([data-page="contact"]) .nav:not(.nav--scrolled) .nav-cta:hover{border-color:var(--text);background:rgba(var(--fg-rgb),.05)}

.pagebar{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.pagebar i{
  display:block;width:100%;height:100%;
  background:var(--mute);
  transform:scaleX(0);transform-origin:0 50%;
}

@media (max-width:860px){
  .nav-inner{gap:0}
  .nav-toggle{display:inline-flex;order:2;margin-left:8px}
  .nav-cta{display:inline-flex;order:1;margin:0 0 0 auto;min-height:44px;padding:8px 14px;font-size:13px;align-self:center} /* 44px tap target in the 58px bar */
  .nav-menu{
    position:absolute;top:100%;left:0;right:0;
    display:flex;flex-direction:column;
    height:calc(100dvh - var(--nav-h));overflow-y:auto;
    padding:4px var(--pad) 24px;
    background:var(--bg);
    border-bottom:1px solid var(--edge-soft);
    box-shadow:none;
    opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),visibility 0s linear .3s;
  }
  body.nav-open .nav-menu{opacity:1;visibility:visible;transition-delay:0s}
  html:has(body.nav-open){overflow:hidden} /* html carries overflow-x:clip: lock the root only; overflow on body would make it the sticky nav's scroll container */
  .nav-links{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .nav-links li{opacity:1;transform:none;transition:none} /* no per-item stagger; the inline --i attributes are inert */
  .nav-links a{
    display:block;padding:16px 0;
    font-family:var(--body);font-size:18px;font-weight:500;letter-spacing:0;text-transform:none;
    border-bottom:1px solid var(--edge-soft);
  }
  .nav-links a::after{display:none}
  .nav-links a.active,.nav-links a[aria-current="page"]{padding-left:14px;border-left:2px solid var(--text)}
  .nav-home{display:block}
}


/* ============================================================
   06 · HERO: copy and three Anton numbers first, then a round portrait beside the location facts
   ============================================================ */
.hero{
  position:relative;overflow:clip;
  display:grid;align-items:center;
  min-height:min(780px,calc(100svh - var(--nav-h)));
  padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,72px); /* fits a 768px laptop screen with the numbers and buttons above the fold */
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px 44px;
  gap:clamp(24px,3vw,44px);
  align-items:center;
}

/* copy */
.hero-copy{min-width:0}
.welcome{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid var(--edge);background:transparent;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);margin-bottom:10px;
}
.pulse-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--data-3)}
.pulse-dot::after{content:none}
.hero-name{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;text-wrap:balance;
  font-size:clamp(44px,8.5vw,84px);line-height:.95;letter-spacing:.005em;
  margin-bottom:10px;
}
.ac{color:var(--accent)}
.hero-role{
  font-size:clamp(15px,1.6vw,21px);font-weight:500;color:var(--text);line-height:1.45;
  margin-bottom:12px;
}
.hero-role span{color:var(--text)}
.hero-hook{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,5.6vw,34px);line-height:1.05;letter-spacing:.005em;
  color:var(--text);max-width:17em;margin-bottom:12px; /* two lines on a laptop (the first sentence needs 16.3em in Anton); the second line carries the outcome number */
}
.hero-hook em{font-style:normal;color:var(--text)}
.hero .lede{margin-bottom:16px;max-width:52ch}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.hero-meta{display:grid;gap:8px;min-width:0} /* in .hero-visual: beside the portrait on phones, under it on desktop */
.hero-meta li{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap; /* one fact per line under the 220px portrait */
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);
}
.hero-meta svg{color:var(--mute)}

/* proof row: three Anton numbers under the hook with a label under each; US$44M+ is the screen's coral
   number. It lives in .hero-copy so the numbers come before the buttons on every width */
.hero-proof-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:12px 28px;
  list-style:none;padding:0;margin:0 0 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;line-height:1.4;color:var(--mute);
}
.hero-proof-list li{display:grid;gap:5px;min-width:0}
.hero-proof-list b{
  display:flex;align-items:baseline;gap:2px;
  font-family:var(--hook);font-weight:400;font-size:clamp(30px,4.2vw,44px);line-height:1;letter-spacing:.005em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
/* Anton has no × glyph: affixes use the body face, as .stat-num does */
.hero-proof-list b i{font-style:normal;font-family:var(--body);font-weight:700;font-size:.42em;letter-spacing:.02em;color:var(--mute)}
.hero-proof-list li:first-child b{color:var(--accent)}

/* portrait column: a round photo with the location facts beside it (phones) or under it (desktop) */
.hero-visual{position:relative;width:100%;max-width:400px;justify-self:center}
.hero-proof{display:flex;align-items:center;gap:16px}
.hv-photo{position:relative;border-radius:50%;overflow:hidden;background:var(--panel);border:1px solid var(--edge-strong);box-shadow:none}
.hero-proof .hv-photo{flex:none;width:64px;height:64px}
.hv-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* social rail */
.hero-social{display:flex;flex-direction:column;align-items:center;gap:14px;justify-self:end}
.hs-label{
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
.hs-line{width:1px;height:46px;background:var(--edge)}
.hero-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--edge);color:var(--mute);background:transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.hero-social a:hover{color:var(--text);border-color:var(--text)}

@media (min-width:861px){
  .hero-proof{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-proof .hv-photo{width:220px;height:220px} /* the number row leads; the portrait is a supporting circle, no outline ring */
}
@media (max-width:860px){
  .hero{min-height:0;padding:20px 0 40px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .hero-visual{order:0;max-width:none;justify-self:stretch} /* copy first */
  .hero-ctas{flex-direction:column;align-items:stretch;gap:6px}
  .hero-ctas .btn--link{justify-content:center}
  .hero-name{font-size:clamp(44px,12vw,72px)}
  .hero-hook{max-width:none}
  .hero-proof-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;margin-bottom:16px;text-transform:none;letter-spacing:.02em} /* three equal columns; mixed-case labels wrap to two lines, not three */
  .hero-meta{gap:6px}
  .hero-social{display:none} /* the footer carries the social links; a Follow me row has no place above the first result */
}


/* ============================================================
   07 · BRAND ROW: static, wrapped, after #results
   ============================================================ */
.ticker{position:relative;padding:22px 0;border-block:1px solid var(--edge-soft)}
.ticker-viewport{overflow:visible}
.ticker-track{display:block;width:auto;animation:none}
.ticker-list{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:12px 28px;
  padding:0 var(--pad);max-width:var(--wrap);margin-inline:auto;
}
.ticker-list li{
  display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;
  font-family:var(--hook);font-size:clamp(18px,2vw,22px);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);
}
.ticker-list li:nth-child(-n+2){color:var(--text)}
.ticker-tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
}


/* ============================================================
   08 · STATS: the hairline cell grid
   Cells sit in one grid with a 1px gap; every cell draws a 1px outline into that gap, so
   the lines meet as a table and an orphan slot stays plain --bg. The grid's own border
   closes the outside. The same idiom is used by .result-grid and .proof-grid (11).
   ============================================================ */
.stats{padding-block:clamp(44px,6vw,76px)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--bg);border:1px solid var(--edge-soft);border-radius:var(--r-lg);overflow:hidden;
}
.stats-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{
  display:flex;flex-direction:column;gap:14px;padding:28px 26px 26px;
  background:var(--bg);border:0;border-radius:0;box-shadow:none; /* .stat follows .card in source order, so this wins */
  outline:1px solid var(--edge-soft);outline-offset:0;
}
.stat .ic-tile{display:none} /* the number is the icon */
.stat-num{
  display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;
  font-family:var(--hook);font-size:clamp(36px,4vw,56px);line-height:.95;letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--text);
}
/* Anton has no × glyph: affixes use the body face so ×, +, K, M render consistently */
.stat-num .pre,.stat-num .suf{font-family:var(--body);font-weight:700;font-size:.42em;letter-spacing:.02em;color:var(--mute)}
.stat-num .pre{margin-right:6px}
.stat-num .suf{margin-left:3px}
.stat-label{font-size:15px;font-weight:500;line-height:1.4;color:var(--text)}
.stat-label i{
  display:block;margin-top:6px;
  font-style:normal;font-weight:400;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);
}
.stat--hl{background:var(--accent-tint)}
.stat--hl .val{color:var(--accent)}
.stat--hl .stat-num{font-size:clamp(52px,6vw,72px)}
.stat--hl .stat-label i{color:var(--accent-text)}
.tile .stat-num{font-size:clamp(34px,3vw,44px)} /* the Results tile reuses the number markup at tile size */

@media (max-width:1000px){
  .stats-grid,.stats-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .stats-grid,.stats-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:16px 14px 14px;gap:8px}
  .stat-num{font-size:36px}
  .stat--hl{grid-column:1 / -1}
  .stat--hl .stat-num{font-size:52px}
  .stat-label{font-size:14px}
  .stat-label i{font-size:12px;letter-spacing:.02em;text-transform:none}
}


/* ============================================================
   09 · SERVICES & GROWTH LOOP
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.svc{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 26px 28px}
.svc .card-title{margin-top:2px}
.svc p{color:var(--mute);font-size:15px;line-height:1.55}
@media (max-width:520px){.svc{padding:20px 18px;gap:10px}}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.svc-tags li{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);padding:5px 9px 4px;border-radius:8px;
  background:transparent;border:1px solid var(--edge);
}

.loop{margin-top:clamp(44px,6vw,72px);text-align:center}
.loop svg{display:block;width:100%;max-width:680px;height:auto;margin-inline:auto;overflow:visible}
.loop figcaption{margin-top:16px;color:var(--mute);font-size:15px}
.loop figcaption strong{color:var(--text);font-weight:500}
.flow{stroke-dasharray:6 8;animation:none} /* static dashes, keep marker-end */
.node rect{stroke-width:1.5}
.loop-label{opacity:.9}

/* phones: the diagram is replaced by a numbered list (same words, readable at 16px) */
.ops-steps{display:none;counter-reset:ops;list-style:none;padding:0;margin:0;border-top:1px solid var(--edge-soft);text-align:left}
.ops-steps li{
  display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--edge-soft);
  font-size:15px;line-height:1.45;color:var(--text);
}
.ops-steps li::before{
  counter-increment:ops;content:counter(ops,decimal-leading-zero);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.8;color:var(--mute);
}
.ops-steps small{display:block;grid-column:2;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--mute)} /* the note sits under the title, not in the number column */
@media (max-width:560px){
  .loop-scroll{display:none}
  .loop .ops-steps{display:grid;gap:0}
}

@media (max-width:1000px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
}


/* ============================================================
   10 · WORK: filter · reel · vframe · stills
   ============================================================ */
.work-tabs{margin-bottom:28px} /* pill container, buttons and sliding indicator: .seg (03) */
.work-group.is-hidden{display:none}

.reel-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(190px,22vw,250px);gap:18px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  padding:6px 6px 20px;margin-bottom:0; /* no shadow to clear; room for the reveal slide */
  scroll-snap-type:x mandatory;scroll-padding-inline:6px;
  scrollbar-width:thin;scrollbar-color:var(--edge) transparent;
}
.reel-track::-webkit-scrollbar,.stills-track::-webkit-scrollbar{height:5px}
.reel-track::-webkit-scrollbar-thumb,.stills-track::-webkit-scrollbar-thumb{background:var(--edge);border-radius:99px}
.reel-track::-webkit-scrollbar-track,.stills-track::-webkit-scrollbar-track{background:transparent}

.vframe{
  position:relative;aspect-ratio:9/16;scroll-snap-align:start;
  border-radius:var(--r);overflow:hidden;
  background:var(--panel);border:1px solid var(--edge);
  box-shadow:none;
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),border-color .2s var(--ease);
}
.vframe:hover{transform:none;border-color:var(--edge-strong)}
.vframe video{width:100%;height:100%;object-fit:cover}
/* keyboard-operable play/pause covering the frame; under the chip and progress bar (z-index 2) */
.vframe-toggle{position:absolute;inset:0;z-index:1;border:0;background:transparent;cursor:pointer;border-radius:inherit}
.vframe-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:var(--r)} /* negative offset: .vframe clips overflow */
.vframe:focus-within{border-color:var(--text)}
.vframe .chip{position:absolute;top:12px;left:12px;z-index:2}
.vframe-bar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:rgba(var(--fg-rgb),.18)}
.vframe-bar i{
  display:block;width:100%;height:100%;background:var(--text);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s linear; /* timeupdate fires ~4×/s: slide between ticks instead of stepping */
}
/* short caption on a solid bar inside the frame, above the progress bar; clicks fall through to the toggle */
.vframe-cap{
  position:absolute;left:0;right:0;bottom:3px;z-index:2;margin:0;
  padding:10px 12px 11px;pointer-events:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.45;text-transform:none;color:var(--text);
  background:var(--scrim);
}
.swipe-cue{display:none}
@media (hover:none){.swipe-cue{display:inline;color:var(--mute)}} /* an instruction, so 4.5:1+ (--dim was 3.7:1) */

.stills{margin-top:clamp(48px,7vw,72px)}
.work-group h2{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2.4vw,28px);margin-bottom:8px;
}
.work-group > p{color:var(--mute);max-width:520px;margin-bottom:24px}

/* Automations: three n8n canvases, each a card with the screenshot (opens the lightbox),
   what it does in plain words, and the stack it runs on */
.autos{margin-top:clamp(48px,7vw,72px)}
.autos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.auto{display:flex;flex-direction:column;padding:0;overflow:hidden}
.auto-shot{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--edge)}
.auto-shot img{width:100%;height:100%;object-fit:cover;object-position:center;transition:none}
.auto-shot:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.auto:hover .gal-zoom,.auto-shot:focus-visible .gal-zoom{border-color:var(--edge-strong)}
.auto-body{display:flex;flex-direction:column;gap:12px;padding:20px 22px 24px}
.auto-body p{color:var(--mute);font-size:15px;line-height:1.55}
.auto-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
@media (max-width:999px){.autos-grid{grid-template-columns:minmax(0,1fr)}}
.stills-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,18vw,200px);gap:14px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  padding:10px 4px 14px;margin-bottom:0;
  scroll-snap-type:x mandatory;scroll-padding-inline:4px;
  scrollbar-width:thin;scrollbar-color:var(--edge) transparent;
}
.still{
  aspect-ratio:1;scroll-snap-align:start;overflow:hidden;
  border-radius:10px;border:1px solid var(--edge);background:var(--panel);
  transition:border-color .2s var(--ease);
}
.still:hover{border-color:var(--edge-strong)}
.still img{width:100%;height:100%;object-fit:cover;transition:none}
a.still{display:block;position:relative;color:var(--text)}
a.still:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.still-zoom{
  position:absolute;right:8px;bottom:8px;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:var(--text);background:var(--scrim);border:1px solid var(--edge);
  opacity:1;transform:none;
  transition:border-color .2s var(--ease);
}
a.still:hover .still-zoom,a.still:focus-visible .still-zoom{border-color:var(--edge-strong)}
@media (max-width:760px){
  /* phones: hard clip, the next card peeks past the end padding and reads as "swipe for more" */
  .reel-track,.stills-track{padding-right:32px}
}


/* ============================================================
   11 · PROOF: results · channel tabs
   Both grids are hairline cell grids (see 08 for the outline idiom)
   ============================================================ */
.result-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--bg);border:1px solid var(--edge-soft);border-radius:var(--r-lg);overflow:hidden;
}
.result{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 24px 26px;
  background:var(--bg);border:0;border-radius:0;box-shadow:none;
  outline:1px solid var(--edge-soft);outline-offset:0;
}
.result--hl{background:var(--accent-tint)}
.result--hl .val{color:var(--accent)}
.res-num{
  display:flex;align-items:baseline;flex-wrap:wrap;align-content:flex-end;gap:0 8px;margin-top:6px;
  min-height:calc(1em + 18px); /* reserve the .from line (12px at line-height 1 + 6px margin) on every card so labels align */
  font-family:var(--hook);font-size:clamp(40px,4vw,56px);line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.res-num .from{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
  flex-basis:100%;margin-bottom:6px;
}
.res-num b{font-weight:400}
.res-num .pre,.res-num .suf{font-family:var(--body);font-weight:700;font-size:.44em;letter-spacing:.02em;color:var(--mute)}
.res-num .pre{margin-right:2px}
.res-k{font-size:15px;font-weight:500;color:var(--text);line-height:1.4}
.res-d{color:var(--mute);font-size:15px;line-height:1.55}
.res-d strong{color:var(--text);font-weight:500}

/* channel tabs: tablist is a .seg (03); JS toggles [hidden] on the panels and plays the
   panel fade and the 60ms card stagger with the Web Animations API (instant under reduced motion) */
.proof-tabs{margin-top:clamp(52px,7vw,84px)}
.proof-tablist{margin-bottom:28px}
.proof-panel:focus-visible{outline-offset:8px;border-radius:var(--r-lg)}
.proof-grid{
  display:grid;gap:1px;
  background:var(--bg);border:1px solid var(--edge-soft);border-radius:var(--r-lg);overflow:hidden;
}
.proof-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.proof-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.proof-grid > .card{background:var(--bg);border:0;border-radius:0;outline:1px solid var(--edge-soft);outline-offset:0}
.proof-grid > .stat--hl{background:var(--accent-tint)}
.proof-to-gal{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--edge-strong);
  transition:text-decoration-color .2s var(--ease);
}
.proof-to-gal span{display:inline-block}
.proof-to-gal:hover{text-decoration-color:var(--text)}

@media (max-width:1000px){
  .result-grid,.proof-grid--3,.proof-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .result-grid,.proof-grid--3,.proof-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result{padding:18px 16px;gap:8px}
  .result--hl{grid-column:1 / -1}
  .result:has(.res-d){grid-column:1 / -1} /* a two-sentence cell reads better full width than as a 166px tower */
  .res-num{font-size:40px}
  .res-num .from{font-size:12px}
  .res-k{font-size:14px}
  .res-d{font-size:14.5px}
}


/* ============================================================
   12 · GALLERY & LIGHTBOX: filter bar · grid · items · dialog
   ============================================================ */
/* filter bar (the .gal-filters pill is a .seg, 03) */
.gal-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 24px;margin-bottom:28px;
}
.gal-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 6px;border-radius:999px;
  font-size:11px;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--text);background:rgba(var(--fg-rgb),.08);border:1px solid var(--edge-soft);
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.seg-btn[aria-pressed="true"] .gal-count{background:rgba(var(--bg-rgb),.12);border-color:rgba(var(--bg-rgb),.2);color:var(--bg)}

/* grid: singles 4:3 (3 per row at 1000px and up, 2 below), wides span the full row at ~2.7:1.
   No `dense` packing: visual order must stay DOM (Tab, lightbox) order, so 2 columns may leave an empty cell */
.gal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (min-width:1000px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* wides still span the full row */
.gal-item{
  display:grid;overflow:hidden;border-radius:var(--r-lg);
  text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--edge-soft);
}
.gal-item:hover{border-color:var(--edge-strong)}
.gal-item--wide{grid-column:1 / -1}
.gal-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.gal-item--wide .gal-thumb{aspect-ratio:2.7/1}
.gal-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;transform:none;transition:none}
.gal-chip{
  position:absolute;top:14px;left:14px;z-index:2;
  max-width:calc(100% - 84px);overflow:hidden;text-overflow:ellipsis;
}
.gal-zoom{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  color:var(--text);background:var(--scrim);border:1px solid var(--edge);
  box-shadow:none;opacity:1;transform:none;
  transition:border-color .2s var(--ease);
}
.gal-item:hover .gal-zoom,.gal-item:focus-visible .gal-zoom{border-color:var(--edge-strong)}
/* caption under the image, on the panel */
.gal-cap{
  position:static;display:grid;gap:4px;
  padding:14px 16px 16px;
  background:var(--panel);
  transition:none;
}
.gal-cap b{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;
  font-size:18px;line-height:1.1;letter-spacing:.01em;color:var(--text);
}
.gal-cap span{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:none;line-height:1.5;
  color:var(--mute);
}
a.gal-item:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-lg)}

@media (max-width:560px){
  .gal-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .gal-item--wide .gal-thumb{aspect-ratio:16/9} /* a 2.7:1 strip is too thin to read at phone width */
  .gal-bar{margin-bottom:22px}
}

/* lightbox: native <dialog> opened with showModal() */
.lightbox{
  position:fixed;inset:0;
  width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:clamp(64px,8vh,84px) clamp(76px,8vw,112px) clamp(56px,7vh,72px);
  border:0;background:transparent;color:var(--text);
  overflow:auto;overscroll-behavior:contain;
}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox:focus,.lightbox:focus-visible{outline:none}
.lightbox::backdrop{background:rgba(8,7,22,.96)}
.lightbox[open]::backdrop{animation:lb-fade-in .35s var(--ease) both}
html:has(.lightbox[open]),body.lb-open{overflow:hidden} /* scroll lock (html carries overflow-x:clip, so body alone can't lock the viewport) */

.lb-figure{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  min-width:0;max-width:min(1200px,92vw);margin:0;
}
.lb-img{
  display:block;width:auto;height:auto;
  max-width:min(1200px,92vw,100%);max-height:78vh;object-fit:contain;
  border-radius:12px;border:1px solid var(--edge-soft);background:var(--panel);
  box-shadow:none;
  will-change:transform;
}
.lb-cap{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;
  max-width:760px;text-align:center;
}
.lb-chip{align-self:center}
.lb-chip:empty{display:none}
.lb-title{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,26px);line-height:1.1;letter-spacing:.01em;
}
.lb-desc{
  flex-basis:100%;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:none;line-height:1.6;color:var(--mute);
}
.lb-close,.lb-prev,.lb-next{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  color:var(--text);background:var(--bg-0);border:1px solid var(--edge);
  box-shadow:var(--shadow);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{border-color:var(--text)}
.lb-close{position:absolute;top:16px;right:16px;z-index:3}
/* desktop: .lb-bar stays unpositioned so prev/next anchor to the dialog's sides; the counter sits top-left */
.lb-prev,.lb-next{position:absolute;top:50%;z-index:3;translate:0 -50%}
.lb-prev{left:clamp(12px,2vw,28px)}
.lb-next{right:clamp(12px,2vw,28px)}
.lb-count{
  position:absolute;top:16px;left:20px;z-index:3;
  display:inline-flex;align-items:center;min-height:52px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute);
  font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  .lightbox[open]{flex-direction:column;justify-content:flex-start;gap:14px}
  .lightbox{padding:72px 12px calc(14px + env(safe-area-inset-bottom));touch-action:pan-x pan-y pinch-zoom}
  .lb-figure{margin-block:auto;width:100%;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} /* centred above the bar; wide screenshots pan sideways */
  .lb-img{max-height:min(78vh,calc(100dvh - 260px));margin-inline:auto}
  .lb-img--wide{max-width:none;width:220vw;max-height:none;margin-inline:0}
  .lb-cap{position:sticky;left:0;align-self:center;max-width:100%}
  .lb-cap{gap:4px 10px}
  .lb-close{top:12px;right:12px;width:48px;height:48px}
  /* phones: a bottom row, prev · count · next */
  .lb-bar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;max-width:420px;flex:none;
  }
  .lb-prev,.lb-next,.lb-count{position:static;translate:none}
  .lb-prev,.lb-next{width:48px;height:48px}
  .lb-count{min-height:48px}
}


/* ============================================================
   13 · EXPERIENCE: timeline · earlier · brands
   ============================================================ */
.timeline{--rail-x:196px;--tl-p:0;position:relative;padding-block:6px}
.tl-rail{
  position:absolute;top:0;bottom:0;left:var(--rail-x);width:2px;
  background:var(--edge-soft);translate:-50% 0;
}
.tl-progress{
  position:absolute;inset:0;
  background:var(--mute);
  transform:scaleY(var(--tl-p));transform-origin:50% 0;
}
.tl-item{
  display:grid;
  grid-template-columns:calc(var(--rail-x) - 30px) 60px minmax(0,1fr);
  grid-template-areas:"meta node card";
  align-items:start;
  margin-bottom:28px;
}
.tl-item:last-child{margin-bottom:0}
.tl-meta{grid-area:meta;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:24px}
.tl-date{font-family:var(--hook);font-size:18px;letter-spacing:.03em;text-transform:uppercase;color:var(--text);line-height:1.1}
.tl-place{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.tl-meta .chip{margin-top:4px}
.tl-node{
  grid-area:node;justify-self:center;margin-top:28px;
  width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--edge);
  box-shadow:none;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.tl-node.lit{
  background:var(--text);border-color:var(--text);
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--mute); /* two hard rings, no glow */
  transform:none;
}
.tl-card{grid-area:card;padding:24px 26px 26px}
.tl-card header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:8px}
.tl-org{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
  margin-bottom:14px;
}
.tl-bullets{list-style:disc;padding-left:18px;display:grid;gap:8px}
.tl-bullets li{color:var(--mute);font-size:15px;line-height:1.55}
.tl-bullets li::marker{color:var(--mute)}
.tl-bullets strong{color:var(--text);font-weight:500}
/* the four earlier roles fold on phones; main.js opens the details on desktop widths */
.tl-more summary{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:4px 0 0 44px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
.tl-more summary::-webkit-details-marker{display:none}
.tl-more summary::after{content:'\2193';color:var(--mute)}
.tl-more[open] summary{display:none}
@media (min-width:761px){
  .tl-more{display:contents}
  .tl-more summary{margin-left:calc(var(--rail-x) + 30px)}
}

.earlier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,52px)}
.earlier-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 20px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--edge-soft);
}
.earlier-text{display:grid;gap:4px;min-width:0}
.earlier-text h4{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:18px;letter-spacing:.02em;line-height:1.15;
}
.earlier-text p{color:var(--mute);font-size:15px;line-height:1.5}

.brands{margin-top:clamp(52px,7vw,84px)}
.brands-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.brand-card{padding:24px 24px 22px}
.brand-card h3{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:22px;letter-spacing:.02em;line-height:1.1;
}
.brand-market{
  display:block;margin:6px 0 10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
}
.brand-card p{color:var(--mute);font-size:15px}
.brands-note{display:block;margin-top:20px}

/* about.html: brands, skills and education are three blocks in one section */
.brands:first-child{margin-top:0}
.about-skills,.about-edu{margin-top:clamp(52px,7vw,84px)}
.about-skills .skills{margin-top:0}
.about-edu .edu-grid{margin-top:0}

@media (max-width:860px){
  .timeline{--rail-x:14px}
  .tl-item{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"node meta" "node card";column-gap:12px;row-gap:12px}
  .tl-meta{padding-top:2px}
  .tl-node{margin-top:5px;justify-self:center}
  .tl-card{padding:20px 20px 22px}
  .brands-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .earlier{grid-template-columns:minmax(0,1fr)}
  .tl-more summary{margin-left:40px}
}
@media (max-width:520px){
  .brands-grid{grid-template-columns:minmax(0,1fr)}
}


/* ============================================================
   14 · WHY ME: edge · pains · ops · versus
   ============================================================ */
.edge-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(36px,6vw,72px);align-items:start;
}
.edge-copy p{color:var(--mute);margin-bottom:18px;font-size:16.5px}
.edge-copy p strong{color:var(--text);font-weight:500}
.pains{display:grid;gap:0;margin-top:28px}
.pains li{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border:0;border-bottom:1px solid var(--edge-soft);border-radius:0;
  background:transparent;
  font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;line-height:1.5;color:var(--text);
}
.pains li::before{content:'\2715';content:'\2715' / '';flex:none;color:var(--mute);font-weight:600} /* second declaration silences the glyph for AT where supported */
.ops-stack{display:grid;gap:18px}
.ops-stack img{
  width:100%;border-radius:12px;border:1px solid var(--edge-soft);
  box-shadow:none;
}
/* intrinsic ratios so the lazy captures reserve their layout before they load (no width/height attrs in the HTML) */
.ops-stack img[src$="ops-02.png"]{aspect-ratio:800/347}
.ops-stack img[src$="ops-06.png"]{aspect-ratio:798/313}
.ops-stack figcaption{
  margin-top:10px;text-wrap:balance;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
}

.edge-grid--solo{grid-template-columns:minmax(0,1fr)}
.edge-grid--solo .ops-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(52px,7vw,84px)}
.vs{padding:28px 28px 30px}
.vs header{display:grid;gap:12px;justify-items:start;margin-bottom:20px}
.vs h3{font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.2vw,26px);line-height:1.1}
.vs--me{border-color:rgba(var(--accent-rgb),.38);background:var(--accent-tint)}
.vs--them{opacity:.92}
.vs-list{display:grid;gap:11px}
.vs-list li{
  position:relative;padding-left:28px;
  color:var(--mute);font-size:15px;line-height:1.5;
}
.vs-list li::before{
  position:absolute;left:0;top:0;
  width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:600;line-height:1;
}
.vs-list--yes li{color:var(--text)}
.vs-list--yes li::before{content:'\2713';content:'\2713' / '';color:var(--data-3);background:rgba(var(--win-rgb),.14);border:1px solid rgba(var(--win-rgb),.4)}
.vs-list--no li::before{content:'\2715';content:'\2715' / '';color:var(--mute);background:transparent;border:1px solid var(--edge)}

@media (max-width:860px){
  .edge-grid{grid-template-columns:minmax(0,1fr)}
  .versus{grid-template-columns:minmax(0,1fr)}
  .ops-stack img{aspect-ratio:4/3;object-fit:cover;object-position:left top}
  /* outranks the two intrinsic-ratio rules above (0,2,1): the wide captures become a 4:3 crop, not a 145px strip */
  .ops-stack img[src$="ops-02.png"],.ops-stack img[src$="ops-06.png"]{aspect-ratio:4/3}
}
@media (max-width:760px){
  .edge-grid--solo .ops-stack{grid-template-columns:minmax(0,1fr)}
}


/* ============================================================
   15 · PROCESS
   ============================================================ */
.steps{
  position:relative;counter-reset:step;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
  padding-top:40px;
}
.steps.reveal{opacity:1;transform:none} /* the wrapper only triggers .steps.in; the .step children carry the fade/slide */
.steps-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--edge-soft)}
.steps-line i{
  display:block;height:100%;
  background:var(--mute);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.6s var(--ease-out) .2s;
}
.steps.in .steps-line i{transform:scaleX(1)}
.step{position:relative}
.step-node{
  position:absolute;left:0;top:-45px;
  width:12px;height:12px;border-radius:50%;
  background:var(--text);
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--mute); /* two hard rings, no glow */
  transform:scale(0);
  transition:transform .6s var(--ease-out);transition-delay:inherit;
}
.step.in .step-node{transform:scale(1)}
.step::before{
  counter-increment:step;content:'0' counter(step);
  display:block;margin-bottom:12px;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--mute);
}
.step h3{font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:21px;line-height:1.15;margin-bottom:10px}
.step p{color:var(--mute);font-size:15px;line-height:1.55}

@media (max-width:860px){
  .steps{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:0;padding-left:30px}
  .steps-line{top:6px;bottom:6px;left:7px;right:auto;width:2px;height:auto}
  .steps-line i{width:100%;transform:scaleY(0);transform-origin:50% 0}
  .steps.in .steps-line i{transform:scaleY(1)}
  .step-node{left:-28px;top:4px}
}


/* ============================================================
   16 · ABOUT: photo · copy · skills · edu
   ============================================================ */
.about-grid{
  display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);
  gap:clamp(36px,6vw,72px);align-items:start;
}
.about-photo{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--edge-soft);background:var(--panel);
  box-shadow:none;
}
.about-photo .chip{position:absolute;top:14px;left:14px;z-index:2}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.about-copy h2.hook{margin-bottom:22px}
.about-text p{color:var(--mute);margin-bottom:16px}
.about-text p strong{color:var(--text);font-weight:500}
.about-text a{color:var(--text);text-decoration-color:var(--edge-strong);text-underline-offset:3px}
.about-text a:hover{text-decoration-color:var(--text)}
.about-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px}
.about-facts a{position:relative;color:var(--text);text-decoration:none;border-bottom:1px solid var(--edge-strong);transition:border-color .2s var(--ease)}
.about-facts a::after{content:"";position:absolute;inset:-15px 0} /* 44px hit box without moving the underline */
.about-facts a:hover{border-color:var(--text)}
/* Skills as a ledger: one row per group, hairline-ruled. Left: the group name in the display face
   with a short bar (coral on the first group, a hairline tone on the rest: one accent per screen) and one plain sentence on what the group covers.
   Right: the tools as readable mixed-case tags, not mono caps. */
.skills{display:grid;gap:0;margin-top:32px;border-top:1px solid var(--edge-soft)}
.skill-group{
  display:grid;grid-template-columns:minmax(200px,290px) minmax(0,1fr);gap:18px 48px;align-items:start;
  padding:clamp(22px,3vw,30px) 0;border-bottom:1px solid var(--edge-soft);
}
.skill-head{position:relative;padding-left:16px}
.skill-head::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:2px;background:var(--data-1)}
.skill-group:nth-child(n+2) .skill-head::before{background:var(--edge-strong)}
.skill-group h3{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(22px,2.3vw,27px);line-height:1.1;color:var(--text);margin:0 0 8px;
}
.skill-head p{color:var(--mute);font-size:15px;line-height:1.55;max-width:36ch;margin:0}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;padding-top:4px}
.tool{
  font-size:14px;font-weight:500;line-height:1.3;color:var(--text);
  padding:9px 14px;border:1px solid var(--edge-soft);border-radius:999px;
  background:var(--panel);white-space:nowrap;
  transition:border-color .2s var(--ease);
}
.tool:hover{border-color:var(--edge-strong)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{color:var(--text)}

@media (max-width:760px){
  .skill-group{grid-template-columns:minmax(0,1fr);gap:14px}
  .skill-head p{max-width:none}
  .tool{font-size:14px;padding:8px 13px}
}
.edu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(48px,7vw,80px)}
.edu{padding:26px 26px 28px}
.edu .ic-tile{margin-bottom:18px}
.edu-meta{color:var(--mute);font-size:15px;margin-top:8px}
.edu-list{list-style:disc;padding-left:18px;display:grid;gap:8px;margin-top:12px}
.edu-list li{color:var(--mute);font-size:15px;line-height:1.5}
.edu-list li::marker{color:var(--mute)}

@media (max-width:860px){
  .about-grid{display:block} /* one column anyway; block, not grid, so the portrait can float beside the first paragraph */
  .about-photo{max-width:96px;aspect-ratio:1;float:left;margin:0 14px 8px 0;border-radius:50%}
  .about-photo .chip{display:none}
  .about-copy{display:flow-root}
}
@media (max-width:760px){
  .edu-grid{grid-template-columns:minmax(0,1fr)}
}


/* ============================================================
   17 · FAQ
   ============================================================ */
.faq-wrap{max-width:calc(820px + var(--pad) * 2)}
.faq{border-top:1px solid var(--edge-soft)}
.faq-item{border-bottom:1px solid var(--edge-soft)}
.faq-h{font:inherit}
.faq-q{
  width:100%;min-height:44px;padding:20px 2px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  text-align:left;font-weight:500;font-size:clamp(16px,1.6vw,19px);line-height:1.4;color:var(--text);
  transition:color .2s var(--ease);
}
.faq-q:hover .faq-mark{border-color:var(--text);color:var(--text)}
.faq-mark{
  position:relative;flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--edge);color:var(--mute);
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .4s var(--ease-out);
}
.faq-mark::before,.faq-mark::after{
  content:'';position:absolute;top:50%;left:50%;width:10px;height:2px;border-radius:2px;
  background:currentColor;transform:translate(-50%,-50%);
}
.faq-mark::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease-out)}
.faq-q[aria-expanded="true"] .faq-mark{border-color:var(--text);color:var(--text);transform:rotate(180deg)}
.faq-q[aria-expanded="true"] .faq-mark::after{transform:translate(-50%,-50%) rotate(0deg)}
/* visibility keeps a closed answer out of the a11y tree; its delay lets the collapse finish first */
.faq-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s linear .45s}
.faq-item.is-open .faq-panel,.faq-panel.is-open{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.faq-body{overflow:hidden;min-height:0}
.faq-body p{
  padding:0 2px 24px;max-width:64ch;
  color:var(--mute);font-size:15.5px;line-height:1.6;
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--ease),transform .45s var(--ease-out);
}
.faq-item.is-open .faq-body p,.faq-panel.is-open .faq-body p{opacity:1;transform:none;transition-delay:.1s}
.faq-body strong{color:var(--text);font-weight:500}
.faq-body a{color:var(--text);text-decoration-color:var(--edge-strong);text-underline-offset:3px}


/* ============================================================
   18 · CONTACT
   ============================================================ */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,64px);align-items:start;
}
.contact-info{display:grid;gap:12px;align-content:start}
.ci-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:var(--r);
  background:transparent;border:1px solid var(--edge-soft);
  text-decoration:none;color:var(--text);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
a.ci-row:hover{border-color:var(--edge-strong);background:var(--panel);transform:none}
.ci-text{display:flex;flex-direction:column;min-width:0;font-size:15px;line-height:1.4;word-break:break-word}
.ci-text b{
  font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
  margin-bottom:3px;
}
.ci-social{display:flex;gap:10px;margin-top:6px}
.ci-social a,.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--edge);color:var(--mute);background:transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.ci-social a:hover,.footer-social a:hover{color:var(--text);border-color:var(--edge-strong);transform:none}

.contact-form{display:grid;gap:16px;padding:clamp(22px,3vw,32px)}
.cf-title{font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:26px;line-height:1;margin-bottom:4px}
.contact-form label{
  display:grid;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
}
.cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contact-form input,.contact-form textarea{
  width:100%;padding:13px 14px;border-radius:10px;
  background:var(--bg-0);border:1px solid var(--edge-strong);color:var(--text); /* --edge-strong at .38: 3.3:1 field boundary on the card */
  font-family:var(--body);font-size:16px;letter-spacing:0;text-transform:none; /* 16px: no iOS zoom on focus */
  transition:border-color .2s var(--ease);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--mute)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--text)}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form .btn{justify-self:start;margin-top:4px}
.cf-note{font-family:var(--body);font-size:14px;letter-spacing:0;line-height:1.5;color:var(--mute)}
/* keep the live region rendered while empty (display:none would drop it from the a11y tree); no layout gap */
.cf-note:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cf-note.is-error{color:var(--accent-text)}
.cf-note.is-ok{color:var(--data-3)}
.cf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} /* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.contact-form.is-sending .btn{opacity:.7;cursor:progress}

@media (max-width:860px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-form{order:-1} /* the form opens the page on phones */
}
@media (max-width:520px){
  .cf-row{grid-template-columns:minmax(0,1fr)}
  .contact-form .btn{justify-self:stretch}
}


/* ============================================================
   19 · FOOTER · TO-TOP
   ============================================================ */
.footer{border-top:1px solid var(--edge-soft);padding:48px 0 calc(32px + env(safe-area-inset-bottom))}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px 24px}
.footer-brand{display:grid;gap:12px;align-content:start;justify-items:start}
.footer-tag{color:var(--mute);font-size:14px;max-width:30ch}
.footer-social{display:flex;gap:10px}
.footer-h{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  margin-bottom:6px;
}
.footer-links,.footer-contact{display:grid}
.footer-links a,.footer-contact a{
  display:inline-flex;align-items:center;min-height:44px;padding:9px 0;
  color:var(--mute);text-decoration:none;transition:color .2s var(--ease);
}
.footer-links a{font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none}
.footer-contact a{font-size:15px;word-break:break-word}
.footer-links a:hover,.footer-contact a:hover{color:var(--text)}
@media (pointer:fine){.footer-links a,.footer-contact a{min-height:34px;padding:5px 0}}
.footer-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  margin-top:36px;padding-top:20px;border-top:1px solid var(--edge-soft);
}
.footer-copy,.footer-note{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}

.to-top{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:41;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  color:var(--text);background:var(--bg-0);border:1px solid var(--edge);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .4s var(--ease-out),visibility 0s linear .4s,border-color .2s var(--ease),color .2s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top:hover{border-color:var(--text)}

@media (max-width:760px){
  .to-top{display:none} /* the nav never hides on phones, so the top is one tap away */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
  .footer-col--jump{display:none}
  .footer-base{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:0}
}


/* ============================================================
   22 · PAGE BANNER: inner-page header: index · h1 · lede
   ============================================================ */
.page-hero{
  position:relative;overflow:clip;
  padding:clamp(36px,6vw,84px) 0 clamp(32px,5vw,56px);
  border-bottom:1px solid var(--edge-soft);
}
.page-hero .wrap{position:relative}
.page-hero .eyebrow{margin-bottom:20px}
.ph-index{color:var(--mute);font-weight:600}
.ph-sep{color:var(--dim)}
.page-title{font-size:clamp(34px,9vw,72px);line-height:.98;max-width:22ch}
.page-title em{color:var(--accent)}
.page-hero .lede{margin-top:20px}
.page-hero .hero-ctas{margin:24px 0 0}
/* the first section under a banner (or its chips) needs less top padding */
.page-hero + .section,.jumpnav + .section{padding-top:clamp(40px,6vw,76px)}


/* ============================================================
   23 · JUMP-CHIPS: sticky in-page navigation (Results, Services, About)
   ============================================================ */
.jumpnav{
  position:sticky;top:var(--nav-h);z-index:45;
  background:var(--bg);
  border-bottom:1px solid var(--edge-soft);
  transition:top .4s var(--ease-out);
}
/* the nav slides away on scroll-down (05): the chips leave with it.
   `top` only takes effect once the element is stuck, so this must move the sticky
   offset rather than translate the box (a translate would apply in normal flow too,
   before the chips reach their sticky top, and shift them out of their slot). */
.nav--hidden ~ main .jumpnav{top:calc(var(--jump-h) * -1)}
.jumpnav-list{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:8px var(--pad);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);scrollbar-width:none;
}
.jumpnav-list::-webkit-scrollbar{display:none}
.jumpnav-list li{flex:none;scroll-snap-align:start}
.jumpnav a{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:var(--mute);text-decoration:none;
  background:transparent;border:1px solid var(--edge);
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
@media (hover:hover){.jumpnav a:hover{color:var(--text);border-color:var(--edge-strong)}} /* touch keeps :hover on the last tapped chip */
.jumpnav a[aria-current="location"]{
  color:var(--bg);border-color:var(--text);
  background:var(--text);
  box-shadow:none;
}
@media (max-width:760px){
  /* phones: the chips do not stick (the nav already holds the top); the next chip peeks past the padding */
  .jumpnav{position:relative;top:auto}
  body.has-jump [id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
}
@media (max-height:500px){
  /* short viewports (landscape phones, 200%+ zoom): chips scroll away; only the nav sticks.
     relative, not static, so z-index still applies; must follow 01's body.has-jump [id] (same specificity) */
  .jumpnav{position:relative;top:auto}
  body.has-jump [id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
}


/* ============================================================
   24 · HOME BENTO: "Explore" tiles, one per page
   Each tile is a .card whose heading link stretches over the whole tile
   (::after, z-index 2), so the tile is one tap target; the reel's pause
   button (z-index 3) stays operable on top of it.
   ============================================================ */
.bento{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(210px,auto);gap:16px;
}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:24px;overflow:hidden}
.tile--work{grid-column:span 6;grid-row:span 2;justify-content:flex-end;min-height:440px;padding:0}
.tile--results,.tile--dash,.tile--services,.tile--exp{grid-column:span 3}
.tile--contact{
  grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 32px;padding:32px clamp(24px,4vw,44px);
  border:0; /* the .coral scope paints the surface */
}
.tile-title{font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.2vw,28px);line-height:1.08;letter-spacing:.01em}
.tile-title em{font-style:normal;color:var(--mute)}
.tile--work .tile-title,.tile-title--xl{font-size:clamp(28px,3.4vw,44px)}
.tile-link{color:inherit;text-decoration:none}
.tile-link::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit}
/* media tiles: the copy sits on a solid bar at the bottom, so the stretched link reaches up past the bar
   to the top of the tile (the tile clips overflow) and the whole tile stays one tap target */
.tile--work .tile-link::after,.tile--dash .tile-link::after,.tile--case .tile-link::after{top:-100vh}
/* the ring moves from the link to the whole tile only where :has() can draw it; elsewhere the link keeps 01's ring */
@supports selector(:has(*)){.tile-link:focus-visible{outline:none}}
.tile:has(.tile-link:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.tile-link [data-vt]{display:block} /* a named view-transition element must never fragment across lines */
.tile-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tile-label{font-size:15px;font-weight:500;line-height:1.4;color:var(--text)}
.tile-list{display:grid;gap:6px;font-size:15px;color:var(--mute)}
.tile-list b{font-weight:700;color:var(--text)}
.tile-chips{display:flex;flex-wrap:wrap;gap:6px}
.tile-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  text-underline-offset:4px;text-decoration-color:var(--edge-strong);
  transition:text-decoration-color .2s var(--ease);
}
/* separate rules: in a list, an engine without :has() would drop the hover underline too */
.tile:hover .tile-go{transform:none;text-decoration:underline;text-decoration-color:var(--text)}
.tile:has(.tile-link:focus-visible) .tile-go{transform:none;text-decoration:underline;text-decoration-color:var(--text)}
.tile-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:26px 26px 24px}
/* work and dashboards tiles: the body is a full-width bar pinned to the bottom (see .tile-link::after above) */
.tile--work .tile-body,.tile--dash .tile-body{flex:0 0 auto;align-self:stretch;margin-top:auto;justify-content:flex-end}
/* work tile: the reel fills the tile, the copy sits on a solid bar at the bottom */
.bento-video{position:absolute;inset:0;z-index:auto;background:var(--panel)}
.bento-video video{width:100%;height:100%;object-fit:cover}
.bento-video::after{display:none}
.bento-video .vframe-toggle{
  inset:auto;top:16px;right:16px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  color:var(--text);background:var(--scrim);border:1px solid var(--edge);
}
.bento-video .vframe-toggle:focus-visible{outline-offset:2px;border-radius:50%}
.bento-video .i-play,.bento-video [aria-pressed="false"] .i-pause{display:none}
.bento-video [aria-pressed="false"] .i-play{display:block}
.tile--work .tile-body{background:var(--scrim);border-top:1px solid var(--edge-soft);padding:20px 22px}
.tile--work .tile-go{margin-top:6px}
/* dashboards tile: a cropped, dimmed screenshot behind a solid copy bar */
.tile--dash{justify-content:flex-end;padding:0}
.tile-shot{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg-2)}
.tile-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;opacity:.6;transform:none;transition:none}
.tile-shot::after{display:none}
.tile--dash .tile-body{background:var(--scrim);border-top:1px solid var(--edge-soft);padding:20px 22px}
.tile--dash .tile-go{margin-top:0} /* .tile-go's margin-top:auto would otherwise push the title to the top of the stretched body */
/* contact tile: the visual button is decoration, the whole tile is the link */
.tile--contact .eyebrow{margin-bottom:10px}
.tile--contact .tile-title{max-width:22ch}
.tile--contact .btn{position:relative;z-index:1;pointer-events:none}

@media (max-width:1000px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tile--work{grid-column:1 / -1;grid-row:auto;min-height:400px}
}
@media (max-width:560px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:12px}
  .tile--work,.tile--case,.tile--contact{grid-column:1 / -1}
  .tile--results,.tile--dash,.tile--services,.tile--exp{grid-column:span 1;padding:18px 16px}
  .tile--dash{padding:0}
  .tile--dash .tile-body{padding:16px}
  .tile--work{min-height:280px}
  .tile--case{min-height:260px}
  .tile--dash{min-height:200px}
  .tile-chips li:nth-child(n+3){display:none}
  .tile--results .tile-list,.tile--exp .tile-meta{display:none} /* half-width tiles keep number, label and link: about 250px, not 350px towers */
  .tile--exp .tile-label{font-size:14px}
  .tile-title{font-size:20px}
  .tile--contact{flex-direction:column;align-items:flex-start}
  .tile--contact .btn{align-self:stretch}
}


/* ============================================================
   25 · CTA BAND & PAGER: the end of every page
   The band carries .coral (00): solid coral, ink text, inverted button, then the ink footer
   ============================================================ */
.cta-band{
  padding-block:clamp(56px,7vw,88px);text-align:center;
  border-top:0;
}
.cta-band-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-band .eyebrow{margin-bottom:0}
.cta-band .hook{font-size:clamp(30px,4.4vw,54px);max-width:18ch}
.cta-band .btn{margin-top:6px}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-block:28px 44px}
.pager a{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:44px;
  padding:18px 22px;border-radius:var(--r);
  background:transparent;border:1px solid var(--edge-soft);
  color:var(--text);text-decoration:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.pager a:hover{border-color:var(--edge-strong);background:var(--panel)}
.pager a.pager-next{grid-column:2;align-items:flex-end;text-align:right}
.pager small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pager b{font-family:var(--hook);font-weight:400;font-size:clamp(20px,2.4vw,28px);letter-spacing:.01em;line-height:1.1;text-transform:uppercase}
.pager-prev:hover,.pager-next:hover{transform:none}
@media (max-width:520px){
  .pager{grid-template-columns:minmax(0,1fr);gap:12px}
  .pager a.pager-next{grid-column:1}
}


/* ============================================================
   26 · PAGE TRANSITIONS: cross-document View Transitions
   Chrome/Edge 126+ and Safari 18.2+ animate same-origin navigations; others
   navigate normally. The nav holds still; the page slides up and in; a
   Home tile title and its page <h1> morph (named by the <head> script).
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.nav{view-transition-name:site-nav}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:vt-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .36s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(24px)}}


/* ============================================================
   27 · TOUCH & PRESS STATES
   ============================================================ */
html{-webkit-tap-highlight-color:transparent} /* replaced by the :active states below */
/* press feedback, touch and mouse alike (iOS needs the no-op touchstart in main.js 22);
   every control that loses the tap highlight above gets one */
.btn:active,.btn--link:active,.seg-btn:active,.jumpnav a:active,.pager a:active,a.ci-row:active,.faq-q:active,
.nav-links a:active,.footer-links a:active,.gal-item:active,a.still:active,.vframe:active,
.brand:active,.nav-toggle:active,.to-top:active,.proof-to-gal:active,.tl-more summary:active,.spend-table summary:active,
.lb-close:active,.lb-prev:active,.lb-next:active,.bento-video .vframe-toggle:active,
.hero-social a:active,.ci-social a:active,.footer-social a:active,.footer-contact a:active{
  scale:.97 !important; /* the separate `scale` property composes with any transform instead of replacing it */
  transition:scale .12s var(--ease) !important;
}
/* its own rule: in the list above, an engine without :has() would drop every press state */
.tile:has(.tile-link:active){scale:.97 !important;transition:scale .12s var(--ease) !important}


/* ============================================================
   28 · ANSWER BLOCKS: question-led sections, follow-up lede, footer date
   One question per .qa-item, answered in the paragraph right under it, so a
   reader (or an answer engine) gets the whole answer in one passage.
   ============================================================ */
.section.qa{padding-block:clamp(44px,6vw,84px)}
.qa-wrap{max-width:calc(820px + var(--pad) * 2)}
.qa-item + .qa-item{margin-top:clamp(28px,4vw,40px)}
.qa-q{
  font-family:var(--hook);font-weight:400;text-transform:uppercase;text-wrap:balance;
  font-size:clamp(24px,3.2vw,36px);line-height:1.06;letter-spacing:.005em;margin-bottom:12px;
}
.qa-a{color:var(--mute);max-width:64ch;font-size:clamp(16px,1.4vw,18px);line-height:1.6}
.page-hero .lede-more{margin-top:12px}
.footer-updated{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}


/* ============================================================
   29 · CASE STUDY (ama-holdings.html), HOME CASE TILE, WORK FLOW CARDS
   six-up stats · spend tape · ops map · run cards · systems register · stack
   Rules as above: tokens only, transform/opacity motion, SVG text in the mono face.
   ============================================================ */
/* home: the case-study tile mirrors the reel tile, data instead of video */
.tile--case{grid-column:span 6;grid-row:span 2;justify-content:flex-end;min-height:440px;padding:0}
.tile--case .tile-body{flex:0 0 auto;align-self:stretch;margin-top:auto;justify-content:flex-end;padding:20px 22px;background:var(--scrim);border-top:1px solid var(--edge-soft)}
.tile--case .tile-go{margin-top:6px}
.tile-chip{position:absolute;top:16px;left:16px;z-index:1}
.tape{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg-2)}
.tape svg{position:absolute;left:24px;right:24px;top:52px;width:calc(100% - 48px);height:auto;display:block;overflow:visible}
.tape::after{display:none}
.tape rect{fill:var(--data-mute);opacity:1;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s var(--ease-out) calc(var(--i,0) * 40ms)}
.tape rect:last-child{fill:var(--accent)} /* the latest week is the tile's one coral number */
.tile--case.in .tape rect{transform:none}
.tape text{font-family:var(--mono);font-size:9px;letter-spacing:.12em;fill:var(--mute)} /* aria-hidden axis */
@media (max-width:1000px){.tile--case{grid-column:1 / -1;grid-row:auto;min-height:380px}}
@media (max-width:560px){.tile--case{grid-column:1 / -1;min-height:260px}}

/* the provenance line under the stats grid: where every number comes from, read by a sceptic */
.provenance{display:block;margin-top:18px;max-width:78ch;font-size:12px;line-height:1.7;letter-spacing:.02em;text-transform:none}

/* spend tape: 13 real weeks, one series, mute bars with the peak in coral, hairline grid, tap or hover tips */
.spend{margin-top:clamp(40px,5vw,56px);padding:clamp(20px,3vw,30px) clamp(18px,3vw,30px) 16px}
.spend-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:18px}
.spend-head h3{font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:clamp(18px,2vw,22px);letter-spacing:.01em;line-height:1.15}
.spend-head h3 b{font-weight:400;color:var(--text)}
.spend svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--mono)}
.spend .grid line{stroke:var(--edge-soft);stroke-width:1}
.spend .axis text{fill:var(--mute);font-size:11.5px;letter-spacing:.04em}
.spend .bar{outline:none}
.spend .bar .hit{fill:transparent}
.spend .bar path{
  fill:var(--data-mute);opacity:1;
  transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);
  transition:transform .9s var(--ease-out) calc(var(--i,0) * 45ms),fill .2s var(--ease);
}
.spend.in .bar path{transform:none}
.spend .bar.b9 path{fill:var(--accent)} /* the peak week, Sep 23 to Sep 29, US$3.77M */
.spend .bar:hover path,.spend .bar:focus path{fill:var(--text)}
.spend .bar.b9:hover path,.spend .bar.b9:focus path{fill:var(--accent)}
.spend .bar:focus-visible .hit{stroke:var(--text);stroke-width:2;stroke-dasharray:4 3}
.spend .lab{fill:var(--text);font-size:11.5px;letter-spacing:.04em;text-anchor:middle}
.spend .tip{opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
.spend .tip rect{fill:var(--bg-0);stroke:var(--edge);stroke-width:1}
.spend .tip text{fill:var(--text);font-size:12px;letter-spacing:.02em;text-anchor:middle}
.spend .tip .tip-k{fill:var(--mute);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.spend-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:14px}
.spend-table{margin-top:14px}
.spend-table summary{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
.spend-table summary::-webkit-details-marker{display:none}
.spend-table summary::after{content:'+';font-size:14px;color:var(--mute)}
.spend-table[open] summary::after{content:'\2212'}
.spend-table table{width:100%;margin-top:6px;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.spend-table th,.spend-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--edge-soft);color:var(--mute)}
.spend-table th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:var(--mute)}
.spend-table td:nth-child(n+2),.spend-table th:nth-child(n+2){text-align:right}
.spend-table td:first-child{color:var(--text)}
/* phones: 13 bar rows instead of the SVG (the <details> table stays as the full table) */
.spend-rows{display:none}
@media (max-width:560px){
  .spend-scroll{display:none}
  .spend-foot-hint{display:none} /* no column to tap: the rows carry the week */
  .spend-rows{display:grid;gap:8px;list-style:none;padding:0;margin:0}
  .spend-rows li{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:10px;font-size:13px}
  .spend-rows .sr-wk{font:12px var(--mono);letter-spacing:.04em;color:var(--mute)}
  .spend-rows i{height:10px;border-radius:3px;background:var(--data-mute);width:var(--w)}
  .spend-rows .is-peak i{background:var(--accent)}
  .spend-rows b{font-family:var(--hook);font-weight:400;font-size:15px;letter-spacing:.02em;color:var(--text)}
  .spend-rows .is-peak b{color:var(--accent)}
  .spend-rows small{font:12px var(--mono);color:var(--mute)}
}

/* operations map: the services loop's vocabulary (pill nodes, dashed arrows) at system size */
.opsmap{margin:0}
.opsmap svg{display:block;width:100%;max-width:860px;height:auto;margin-inline:auto;overflow:visible}
.opsmap figcaption{margin-top:16px;text-align:center;color:var(--mute);font-size:15px}
.opsmap figcaption strong{color:var(--text);font-weight:500}
.ops-node rect{stroke-width:1.5;fill:var(--panel)}
.ops-node .t{font-weight:600}
.ops-caps text{font-weight:400}
@media (max-width:760px){
  .ops-scroll{display:none}
  .opsmap .ops-steps{display:grid;gap:0}
}
.ops-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,40px)}
.ops-legend li{padding:18px 20px;border-radius:var(--r);background:var(--bg-0);border:1px solid var(--edge-soft)}
.ops-legend b{display:block;margin-bottom:8px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.ops-legend p{color:var(--mute);font-size:14.5px;line-height:1.5}
@media (max-width:860px){.ops-legend{grid-template-columns:minmax(0,1fr)}}

/* what I run: three cards with a bullet list each */
.run-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.run{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 26px 28px}
.run .card-title{margin-top:2px}
.run > p{color:var(--mute);font-size:15px;line-height:1.55}
.run-list{list-style:disc;padding-left:18px;display:grid;gap:9px}
.run-list li{color:var(--mute);font-size:14.5px;line-height:1.5}
.run-list li::marker{color:var(--mute)}
@media (max-width:1000px){.run-grid{grid-template-columns:minmax(0,1fr)}}

/* systems register: one hairline-ruled row per system (same ledger idea as the About skills) */
.register{border-top:1px solid var(--edge-soft)}
.reg{
  display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr) minmax(150px,210px);gap:14px 40px;align-items:start;
  padding:clamp(20px,2.6vw,28px) 0;border-bottom:1px solid var(--edge-soft);
}
.reg-name{font-family:var(--hook);font-weight:400;text-transform:uppercase;font-size:clamp(19px,1.9vw,22px);line-height:1.12;letter-spacing:.01em}
.reg-when{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.reg p{color:var(--mute);font-size:15px;line-height:1.55;max-width:66ch}
.reg-stack{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;justify-content:flex-end}
.reg-stack li{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);padding:5px 9px 4px;border-radius:8px;
  background:transparent;border:1px solid var(--edge);
}
@media (max-width:860px){
  .reg{grid-template-columns:minmax(0,1fr);gap:10px}
  .reg-stack{justify-content:flex-start}
}

/* stack chips reuse the About .tools; a note under them */
.tools--stack{margin-top:0}
.stack-note{display:block;margin-top:22px;max-width:60ch;line-height:1.7;text-transform:none;letter-spacing:.02em;font-size:12px}

/* work: automation cards without a screenshot carry a step strip on the --bg-2 well */
.auto-flow{
  display:flex;align-items:center;padding:18px 20px;
  background:var(--bg-2);border-bottom:1px solid var(--edge);
}
.flow-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px}
.flow-steps li{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--text)}
.flow-steps li span{padding:7px 10px 6px;border-radius:8px;background:var(--bg-0);border:1px solid var(--edge)}
.flow-steps li + li::before{content:'\2192';content:'\2192' / '';color:var(--mute);font-size:13px;line-height:1}
.flow-steps li:first-child span,.flow-steps li:last-child span{border-color:var(--edge-strong);color:var(--text)}
/* the three cards with a canvas screenshot also carry a strip, shown only where the screenshot is too small to read */
.auto-flow--phone{display:none}
@media (max-width:560px){
  .auto-shot img{display:none}
  a.auto-shot{
    display:flex;align-items:center;aspect-ratio:auto;min-height:52px;padding:8px 64px 8px 18px;
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none;
  }
  a.auto-shot::before{content:'Open the n8n canvas'} /* generated text names the link once the image is hidden */
  a.auto-shot .gal-zoom{top:50%;translate:0 -50%}
  .auto-flow--phone{display:flex}
  .auto-shot.auto-flow{aspect-ratio:auto;height:auto;overflow:visible} /* the stacked column sets its own height; 2:1 would clip it */
  .flow-steps{display:grid;grid-template-columns:1fr;gap:6px;width:100%}
  .flow-steps li{display:grid;grid-template-columns:16px 1fr;align-items:center}
  .flow-steps li + li::before{content:'\2193';content:'\2193' / ''}
  .flow-steps li:first-child{grid-template-columns:1fr}
}

/* about: the AMA Holdings brand card spans two columns and carries one fact */
.brand-card--wide{grid-column:span 2}
.brand-fact{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
@media (max-width:520px){.brand-card--wide{grid-column:auto}}
/* the hovered, focused or tapped column shows its own tip (tips are painted after every column) */
.spend svg:has(.bar.b0:hover,.bar.b0:focus) .tip.t0{opacity:1}
.spend svg:has(.bar.b1:hover,.bar.b1:focus) .tip.t1{opacity:1}
.spend svg:has(.bar.b2:hover,.bar.b2:focus) .tip.t2{opacity:1}
.spend svg:has(.bar.b3:hover,.bar.b3:focus) .tip.t3{opacity:1}
.spend svg:has(.bar.b4:hover,.bar.b4:focus) .tip.t4{opacity:1}
.spend svg:has(.bar.b5:hover,.bar.b5:focus) .tip.t5{opacity:1}
.spend svg:has(.bar.b6:hover,.bar.b6:focus) .tip.t6{opacity:1}
.spend svg:has(.bar.b7:hover,.bar.b7:focus) .tip.t7{opacity:1}
.spend svg:has(.bar.b8:hover,.bar.b8:focus) .tip.t8{opacity:1}
.spend svg:has(.bar.b9:hover,.bar.b9:focus) .tip.t9{opacity:1}
.spend svg:has(.bar.b10:hover,.bar.b10:focus) .tip.t10{opacity:1}
.spend svg:has(.bar.b11:hover,.bar.b11:focus) .tip.t11{opacity:1}
.spend svg:has(.bar.b12:hover,.bar.b12:focus) .tip.t12{opacity:1}


/* ============================================================
   20 · MOTION SYSTEM: snap-in · reveal · split words · keyframes
   One kind of motion: things arrive. Nothing loops, nothing follows the pointer, nothing lifts.
   ============================================================ */
/* hero load choreography */
.snap-in{opacity:0;transform:translateY(12px)}
body.loaded .snap-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);
}
body.loaded .d1{transition-delay:.1s}
body.loaded .d2{transition-delay:.2s}
body.loaded .d3{transition-delay:.3s}
body.loaded .d4{transition-delay:.4s}
body.loaded .d5{transition-delay:.5s}

/* scroll reveals (transition list matches .card--lift on purpose); the variants keep their names and share the same rise */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),border-color .2s var(--ease);
}
.reveal--left,.reveal--right,.reveal--scale,.reveal--pop{transform:translateY(16px)}
.reveal.in{opacity:1;transform:none}

/* split-word headings */
.is-split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .12em;margin:0 -.04em -.12em}
.is-split .wi{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease-out)}
.is-split.in .wi{transform:none}

/* arriving through a page transition: the banner is already in place, skip its load choreography */
.vt-arrive :is(.hero,.page-hero) .snap-in{opacity:1;transform:none;transition:none}
.vt-arrive :is(.hero,.page-hero) .is-split .wi{transform:none;transition:none}

/* keyframes */
@keyframes lb-fade-in{from{opacity:0}to{opacity:1}}


/* ============================================================
   21 · REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html,html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .snap-in,.reveal,.is-split .wi{opacity:1;transform:none}
  .flow{stroke-dasharray:none}
  .spend .bar path,.tape rect{transform:none}
  .spend .bar:focus-visible .hit{stroke-dasharray:none}
  .steps-line i{transform:scaleX(1)}
  .step-node{transform:scale(1)}
  .lightbox::backdrop{animation:none !important} /* ::backdrop is not matched by *::before/::after */
  .faq-body p{opacity:1;transform:none}
  :is(.btn,.btn--link,.seg-btn,.jumpnav a,.pager a,a.ci-row,.faq-q,.nav-links a,.footer-links a,.gal-item,a.still,.vframe,
      .brand,.nav-toggle,.to-top,.proof-to-gal,.tl-more summary,.spend-table summary,.lb-close,.lb-prev,.lb-next,.bento-video .vframe-toggle,
      .hero-social a,.ci-social a,.footer-social a,.footer-contact a):active{transition:none !important}
  .tile:has(.tile-link:active){transition:none !important} /* same (0,3,0) as the press rule in 27, wins on source order */
}