/* Nguyễn Văn Huy - Digital Marketing
   Sizes follow the portfolio design system (anhphan-folio/DESIGN-SYSTEM.md, draft/SHOWCASE-SCALE.md):
   one subject, --u = one pixel of the design; every size and position is N × var(--u) through the tokens below.
   Two artboards, each scaled as a whole so proportions never drift between screen sizes:
   - desktop (≥ 1152px): 1440×900, --u = the largest scale at which the whole artboard fits the screen;
   - phone column (< 1152px): 464.29 wide (390px at --u .84), --u follows the width.
   Where the screen is wider than the scaled artboard, the content sits in a centred frame (--gx each side) and
   only backgrounds and the globe reach the edges. 1px lines are the only px.
   Colours and faces come from Huy's own deck: near-black, the black→gold bar, light-grey paper, Montserrat. */
:root {
  /* colour */
  --bg: #0c0c0b; --bg-1: #121211; --panel: rgba(12, 12, 11, .88);
  --fg: #f3f3f1; --fg-2: rgba(243, 243, 241, .78); --fg-3: rgba(243, 243, 241, .58); --fg-4: rgba(243, 243, 241, .36);
  --line: rgba(243, 243, 241, .14); --line-2: rgba(243, 243, 241, .08);
  --paper: #f3f3f1; --paper-2: #e7e7e3; --ink: #0c0c0b; --ink-3: rgba(12, 12, 11, .62); --ink-4: rgba(12, 12, 11, .4); --line-l: rgba(12, 12, 11, .14);
  --gold: #d6a234; --gold-d: #95680f; --acc-text: var(--gold);
  /* data colours: one hue per meaning, the same everywhere on the page.
     conversion red and branding blue are the two colours of Huy's spend chart; the header chips follow the
     colour groups of the tables in his report (market, reach, engagement, leads, spend) */
  --c-conv: #e4573d; --c-brand: #3d7fe0; --c-cost: #e8823a; --c-rev: #17a673; --c-lead: #7457d6; --c-eng: #c04a86; --c-reach: #2f6db5;
  --c-new: #1c1c1a; --c-old: #f2a07b; --c-run: #17a673; --c-off: rgba(12, 12, 11, .16);
  --hc-mk: #6f5600; --hc-rc: #123f6e; --hc-en: #5a1a40; --hc-ld: #2c1d5e; --hc-cv: #7a2a12; --hc-sp: #6b1010;
  --g-0: #4285f4; --g-1: #34a853; --g-2: #f2b600; --g-3: #ea4335;
  /* type */
  --display: 'Montserrat', system-ui, sans-serif; --body: 'Noto Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --lh-tight: .94; --lh-snug: 1.15; --lh-body: 1.6; --tr-display: -.03em; --tr-mono: .03em;
  /* media */
  --r-media: var(--r-2); --edge: 0 0 0 1px var(--line-2);
  --sh-1: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .5);
  /* motion */
  --ease: cubic-bezier(.76, 0, .24, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --d-1: .3s; --d-2: .5s;

  /* one subject (tools-qa/fluid-tokens.py) - the portfolio's own line and scale */
  --vw: 100vw;   /* main.js sets the width without the scrollbar */
  --u: min(calc(var(--vw) / 1440), calc(100vh / 900), 1.4px);
  --frame: calc(1440 * var(--u));
  --gx: max(0px, calc((var(--vw) - var(--frame)) / 2));
  --t-2xs: calc(10.5 * var(--u));
  --t-xs: calc(11.5 * var(--u));
  --t-sm: calc(13.25 * var(--u));
  --t-md: calc(16.25 * var(--u));
  --t-lg: calc(21.5 * var(--u));
  --t-xl: calc(37.5 * var(--u));
  --t-2xl: calc(69 * var(--u));
  --t-3xl: calc(109 * var(--u));
  --t-hero: calc(216 * var(--u));
  --s-1: calc(4.5 * var(--u));
  --s-2: calc(8 * var(--u));
  --s-3: calc(12.25 * var(--u));
  --s-4: calc(17.25 * var(--u));
  --s-5: calc(26 * var(--u));
  --s-6: calc(40.5 * var(--u));
  --s-7: calc(60.5 * var(--u));
  --s-8: calc(92 * var(--u));
  --s-9: calc(130 * var(--u));
  --pad: calc(var(--gx) + 57.5 * var(--u));
  --gutter: calc(60.5 * var(--u));
  --top: calc(108 * var(--u));
  --bottom: calc(99 * var(--u));
  --ctl: calc(49 * var(--u));
  --ic: calc(18 * var(--u));
  --dot: calc(7.25 * var(--u));
  --r-1: calc(4 * var(--u));
  --r-2: calc(8 * var(--u));
  --ctl-sm: calc(var(--ctl) * .82);
  --r-pill: 999px;
  /* this page's own blocks, in design pixels */
  --head: calc(var(--ctl) + 2 * var(--s-4));
  --col-photo: calc(520 * var(--u));
  --col-panel: calc(680 * var(--u));
  --mw-h: calc(720 * var(--u));
  --chart-h: calc(300 * var(--u));
  --rv-h: calc(190 * var(--u));
  --day-h: calc(170 * var(--u));
  --avatar: calc(28 * var(--u));
  --swatch: calc(10 * var(--u));
}
@media (max-width: 1151px) {
  :root { --u: min(calc(var(--vw) / 464.29), 1.4px); --frame: calc(464.29 * var(--u)); --pad: calc(var(--gx) + 23.75 * var(--u)); --gutter: calc(23.75 * var(--u)); --top: calc(76 * var(--u)); --bottom: calc(66.75 * var(--u)); --t-2xs: calc(12 * var(--u)); --t-xs: calc(13 * var(--u)); --ctl: calc(54 * var(--u)); --t-xl: calc(32 * var(--u)); --t-2xl: calc(44 * var(--u)); --t-3xl: calc(56 * var(--u)); --t-hero: calc(78.5 * var(--u));
    --mw-h: calc(340 * var(--u)); --chart-h: calc(240 * var(--u)); --day-h: calc(120 * var(--u)); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { font: 400 var(--t-md) / var(--lh-body) var(--body); background: var(--bg); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
::selection { background: var(--gold); color: var(--ink); }

#map { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--head); padding: 0 var(--pad); display: flex; align-items: center; gap: var(--s-6); color: var(--fg); transition: background var(--d-1), color var(--d-1); }
.top.solid { background: rgba(12, 12, 11, .9); backdrop-filter: blur(calc(8 * var(--u))); }
.top.solid.on-light { background: rgba(243, 243, 241, .92); color: var(--ink); }
.brand { display: flex; align-items: baseline; gap: var(--s-3); text-decoration: none; white-space: nowrap; margin-right: auto; }
.brand b { font: 700 var(--t-md) / 1 var(--display); }
.brand span, .nav a { font: 500 var(--t-xs) / 1 var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; }
.brand span { opacity: .6; }
.nav { display: flex; gap: var(--s-6); }
.nav a { text-decoration: none; opacity: .72; transition: opacity var(--d-1); }
.nav a:hover { opacity: 1; }

/* phone menu: one button (--ctl), a full-screen sheet with the same links and the Facebook Ads chapters */
.menu-btn { display: none; position: relative; flex: none; width: round(var(--ctl), 2px); height: round(var(--ctl), 2px); margin-right: calc(var(--s-2) * -1); }
.menu-btn i { position: absolute; left: round(calc(50% - 10 * var(--u)), 1px); width: round(calc(20 * var(--u)), 2px); height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--d-1) var(--ease), opacity var(--d-1), top var(--d-1) var(--ease); }
.menu-btn i:nth-child(1) { top: round(calc(50% - 7 * var(--u)), 1px); }
.menu-btn i:nth-child(2) { top: round(calc(50% - 1px), 1px); left: round(calc(50% - 4 * var(--u)), 1px); width: round(calc(14 * var(--u)), 2px); }
.menu-btn i:nth-child(3) { top: round(calc(50% + 5 * var(--u)), 1px); }
.menu-btn[aria-expanded="true"] i:nth-child(1) { top: round(calc(50% - 1px), 1px); transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] i:nth-child(3) { top: round(calc(50% - 1px), 1px); transform: rotate(-45deg); }
.menu { position: fixed; z-index: 19; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(var(--head) + var(--s-6)) var(--pad) var(--s-8); background: var(--bg); color: var(--fg); opacity: 0; visibility: hidden; transition: opacity var(--d-1), visibility 0s var(--d-1); }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--d-1), visibility 0s; }
.menu-nav > a { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font: 700 var(--t-xl) / var(--lh-snug) var(--display); letter-spacing: -.02em; text-decoration: none; }
.menu-sub { display: grid; padding: var(--s-3) 0 var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.menu-sub a { padding: var(--s-2) 0; font: 500 var(--t-md) / var(--lh-snug) var(--body); color: var(--fg-2); text-decoration: none; }
.top.menu-on { background: var(--bg); color: var(--fg); }
body.menu-open { overflow: hidden; }

/* ---------- shared ---------- */
.sec { position: relative; padding: var(--s-9) var(--pad); }
.light { background: var(--paper); color: var(--ink); }
.kick { font: 500 var(--t-xs) / 1.3 var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s-4); }
.light .kick { color: var(--ink-3); }
.h-part { font: 800 var(--t-3xl) / var(--lh-tight) var(--display); letter-spacing: var(--tr-display); }
.h2 { font: 800 var(--t-2xl) / 1.02 var(--display); letter-spacing: var(--tr-display); }
.h3 { font: 800 var(--t-xl) / var(--lh-snug) var(--display); letter-spacing: -.02em; margin-bottom: var(--s-5); }
.h4 { font: 600 var(--t-xs) / 1.3 var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--acc-text); margin: var(--s-6) 0 var(--s-3); }
.light { --acc-text: var(--gold-d); }
.lead { font: 500 var(--t-lg) / 1.45 var(--display); letter-spacing: -.01em; max-width: calc(880 * var(--u)); margin-top: var(--s-5); }
.ch-head { margin-bottom: var(--s-7); }
.ch-only { padding-bottom: 0; }
.note { font-size: var(--t-sm); color: var(--fg-3); margin-top: var(--s-5); }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: 400 var(--t-xs) / 1.2 var(--mono); color: var(--fg-3); margin-top: var(--s-4); }
.light .legend { color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend i { width: var(--swatch); height: var(--swatch); flex: none; }
.k-conv, .tb .split i:first-child, .stack .c { background: var(--c-conv); }
.k-brand, .tb .split i:last-child, .stack .b { background: var(--c-brand); }
.k-new, .rv-s .c { background: var(--c-new); }
.k-old, .rv-s .b { background: var(--c-old); }
.k-run { background: var(--c-run); }
.k-off { box-shadow: inset 0 0 0 1px var(--fg-3); }
.legend i { border-radius: calc(2 * var(--u)); }

/* tables: every table on the page shares one look */
.tb-wrap { overflow-x: auto; }
.tb { width: 100%; table-layout: fixed; font: 400 var(--t-sm) / 1.35 var(--mono); }
.tb th, .tb td { text-align: right; padding: var(--s-3) 0 var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.tb th { text-align: left; padding-left: 0; font: 600 var(--t-sm) / 1.35 var(--body); }
.tb th, .tb td { overflow: hidden; text-overflow: ellipsis; }
.tb th.nm { font: 400 var(--t-sm) / 1.35 var(--mono); color: var(--fg-2); }
.tb thead th, .tb thead td { font: 600 var(--t-2xs) / 1.3 var(--mono); color: #fff; background: var(--hc, var(--hc-mk)); text-transform: uppercase; letter-spacing: var(--tr-mono); white-space: normal; vertical-align: bottom; padding: var(--s-3); border-bottom: 0; }
.tb thead tr > :first-child { border-radius: var(--r-1) 0 0 var(--r-1); }
.tb thead tr > :last-child { border-radius: 0 var(--r-1) var(--r-1) 0; }
.hc-mk { --hc: var(--hc-mk); } .hc-rc { --hc: var(--hc-rc); } .hc-en { --hc: var(--hc-en); } .hc-ld { --hc: var(--hc-ld); } .hc-cv { --hc: var(--hc-cv); } .hc-sp { --hc: var(--hc-sp); }
.tb tbody th { padding-left: var(--s-3); }
.tb tbody td:last-child, .tb tfoot td:last-child { padding-right: var(--s-3); }
.tb tbody tr:nth-child(even) { background: var(--line-2); }
.tb tfoot th, .tb tfoot td { border-bottom: 0; font-weight: 700; padding-top: var(--s-4); }
.tb tfoot th { padding-left: var(--s-3); }
.tb tbody tr { transition: background var(--d-1); }
.tb tbody tr:hover { background: var(--line); }
.tb tr.zero { color: var(--fg-4); }
/* one row standing for the rows the total covers but the table does not list */
.tb tr.more th, .tb tr.more td, .pl-g p.more span { font-style: italic; color: var(--fg-3); }
.tb tfoot th, .tb tr.more th { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }   /* a long campaign name breaks across lines instead of widening the column */
.tb .split { display: flex; height: calc(3 * var(--u)); margin-top: var(--s-2); }

/* ---------- hero ----------
   one held scene: the spend figure top left, the name bottom left, the globe on the right sending an arc from
   Việt Nam to every market; labels ride the globe over the biggest markets facing the camera */
.s-hero { position: relative; height: 100svh; display: grid; align-content: center; }   /* the 900-high artboard, centred */
.hero-pin { position: relative; height: calc(900 * var(--u)); padding: var(--head) var(--pad) 0; display: grid; grid-template-rows: 1fr auto; }
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); padding: var(--s-6) 0 var(--s-7); min-height: 0; }
.hero-count { order: -1; }
.cnt-l { font: 500 var(--t-xs) / 1.2 var(--mono); text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--fg-3); }
.cnt-v { font: 700 var(--t-2xl) / 1 var(--display); letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; color: var(--gold); margin-top: var(--s-3); }
.cnt-m { font: 400 var(--t-sm) / 1.4 var(--mono); color: var(--fg-3); margin-top: var(--s-3); }
.cnt-m b { font-weight: 500; color: var(--fg); }
.hero-name { font: 800 var(--t-3xl) / var(--lh-tight) var(--display); letter-spacing: -.045em; }
/* each line clips its letters as they rise; the room above and below keeps stacked marks, dots below and descenders whole */
.hero-name > span { display: block; overflow: hidden; padding: .2em 0 .24em; margin: -.2em 0 -.24em; }
.hero-name .r { width: fit-content; background: linear-gradient(90deg, var(--fg) 0%, var(--gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chars .w { display: inline-block; white-space: nowrap; }
h2.chars .w { overflow: hidden; vertical-align: top; padding: .2em 0 .24em; margin: -.2em 0 -.24em; }
.chars .c { display: inline-block; }
.hero-line { font: 500 var(--t-lg) / 1.45 var(--display); max-width: calc(600 * var(--u)); margin-top: var(--s-5); color: var(--fg-2); text-shadow: 0 0 calc(14 * var(--u)) var(--bg), 0 0 calc(4 * var(--u)) var(--bg); }
.callouts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.co-l { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; margin: calc(-1.3 * var(--t-2xs)) 0 0 var(--s-5);
  padding: var(--s-1) var(--s-2); background: rgba(12, 12, 11, .72); border-left: 1px solid var(--gold);
  font: 500 var(--t-2xs) / 1.3 var(--mono); color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-l b { display: block; font: 600 var(--t-xs) / 1.3 var(--display); color: var(--fg); }
.co-l::before { content: ''; position: absolute; right: 100%; top: 50%; width: var(--s-5); height: 1px; background: rgba(214, 162, 52, .6); }
.ticker { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: var(--s-4) 0 var(--s-5); display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; }
.tk-cap { font: 500 var(--t-xs) / 1.2 var(--mono); text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--fg-3); white-space: nowrap; }
.tk-row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tk-track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.tk-track span { font: 400 var(--t-sm) / 1.6 var(--mono); padding-right: var(--s-6); white-space: nowrap; color: var(--fg-3); }
.tk-track b { font-weight: 500; color: var(--fg); margin-right: var(--s-2); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- introduction ---------- */
.in-grid { display: grid; grid-template-columns: var(--col-photo) 1fr; gap: var(--gutter); align-items: start; }
.in-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 62% 40%; border-radius: var(--r-media); }
.in-sum { font: 500 var(--t-lg) / 1.5 var(--display); margin-top: var(--s-6); }
.skills { margin-top: var(--s-7); border-top: 1px solid var(--line-l); }
.skills > div { display: grid; grid-template-columns: calc(190 * var(--u)) 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-l); }
.skills dt { font: 700 var(--t-md) / 1.4 var(--display); }
.skills dd { color: var(--ink-3); }
.exp { margin-top: var(--s-9); }
.exp-head { display: grid; grid-template-columns: var(--col-photo) 1fr; gap: var(--gutter); align-items: start; }
.exp-head .lead { margin-top: 0; }
.co { display: flex; align-items: center; gap: var(--s-4); font: 800 var(--t-xl) / 1 var(--display); letter-spacing: -.02em; }
.co img { width: var(--ctl); height: var(--ctl); border-radius: 50%; }
.soc { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; gap: var(--s-5); margin-top: var(--s-7); align-items: start; }
.sc { background: #fff; border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--line-l); padding: var(--s-5); }
.sc-k { display: flex; justify-content: space-between; gap: var(--s-3); font: 600 var(--t-xs) / 1 var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--gold-d); margin-bottom: var(--s-4); }
.sc-k span { font-weight: 400; text-transform: none; color: var(--ink-3); }
.sc-stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin-top: var(--s-4); }
.sc-stats p { font: 400 var(--t-xs) / 1.3 var(--mono); color: var(--ink-3); }
.sc-stats b { display: block; font: 800 var(--t-xl) / 1.05 var(--display); letter-spacing: -.02em; color: var(--ink); }
.sc-h a, .sc-pages a { text-decoration: none; }
.sc-h a:hover, .sc-pages a:hover { text-decoration: underline; }
.sc-h { font: 700 var(--t-md) / 1.3 var(--display); }
.sc-bio { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-3); }
.sc-bio span { display: block; color: var(--ink); }
.sc-tiles { display: grid; gap: var(--s-1); margin-top: var(--s-5); }
.sc-tiles.ig { grid-template-columns: repeat(3, 1fr); }
.sc-tiles.tt { grid-template-columns: repeat(4, 1fr); }
.sc-tiles img { width: 100%; aspect-ratio: 205 / 235; object-fit: cover; border-radius: var(--r-1); }
.sc-tiles.tt img { aspect-ratio: 169 / 200; }
.sc-pages li { display: grid; grid-template-columns: var(--avatar) 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-l); font: 600 var(--t-sm) / 1.3 var(--body); }
.sc-pages li:last-child { border-bottom: 0; padding-bottom: 0; }
.sc-pages img { width: var(--avatar); height: var(--avatar); border-radius: 50%; }
.sc-pages b { font: 800 var(--t-md) / 1 var(--display); text-align: right; }
.sc-pages small { display: block; font: 400 var(--t-2xs) / 1.3 var(--mono); color: var(--ink-3); margin-top: var(--s-1); }

/* ---------- part openers (Facebook Ads, Google Ads) ---------- */
.part { padding-top: calc(var(--s-9) + var(--s-7)); }
.part .lead { max-width: calc(760 * var(--u)); }
.pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--s-8); border-top: 1px solid var(--line); }
.pts li { padding-top: var(--s-5); }
.pts b { display: block; font: 700 var(--t-lg) / 1.3 var(--display); margin-bottom: var(--s-3); }
.pts span { color: var(--fg-3); font-size: var(--t-sm); }
.toc { margin-top: var(--s-8); max-width: var(--col-panel); }
.toc a { display: grid; grid-template-columns: calc(52 * var(--u)) 1fr; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font: 600 var(--t-md) / 1.3 var(--display); text-decoration: none; transition: color var(--d-1), padding var(--d-1) var(--ease-out); }
.toc a:hover { color: var(--gold); padding-left: var(--s-3); }
.toc i { font: 400 var(--t-xs) / 1.9 var(--mono); font-style: normal; color: var(--fg-3); }

/* ---------- 01 budget ---------- */
.bud-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s-5); align-items: start; }
.card, .panel { --fg: var(--ink); --fg-2: rgba(12, 12, 11, .8); --fg-3: rgba(12, 12, 11, .6); --fg-4: rgba(12, 12, 11, .36); --line: rgba(12, 12, 11, .12); --line-2: rgba(12, 12, 11, .045); --acc-text: var(--gold-d);
  background: var(--paper); color: var(--fg); border-radius: var(--r-2); box-shadow: var(--sh-1); }
.card { padding: var(--s-6); }
.card.spend { grid-row: span 2; }
.bud-grid > *, .split-sec > * { min-width: 0; }   /* wide tables scroll inside their card instead of widening the grid */
.card-t { font: 800 var(--t-lg) / 1.3 var(--display); letter-spacing: -.01em; margin-bottom: var(--s-4); }
.card-t span { display: block; font: 400 var(--t-xs) / 1.4 var(--mono); color: var(--fg-3); margin-top: var(--s-1); }
.bars { height: var(--chart-h); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); align-items: end; margin-top: var(--s-6); }
.bar { --g: 1; height: calc(var(--h) * var(--g) * 100%); display: grid; grid-template-rows: auto 1fr auto; min-height: var(--s-7); }
.k { display: none; }
.bar .tot { font: 500 var(--t-xs) / 1.25 var(--mono); text-align: center; margin-bottom: var(--s-2); white-space: nowrap; }
.stack { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-1) var(--r-1) 0 0; }
.stack i { display: block; min-height: 1px; }
.bar .m { font: 400 var(--t-xs) / 1.25 var(--mono); color: var(--fg-3); text-align: center; padding-top: var(--s-3); }

/* ---------- panel + map window (markets, conversion tests, plan) ---------- */
.split-sec { position: relative; display: grid; grid-template-columns: var(--col-panel) 1fr; gap: var(--gutter); padding: var(--s-7) var(--pad); }
.panel { padding: var(--s-6); align-self: start; min-width: 0; }
.mw { position: sticky; top: var(--top); height: var(--mw-h); }
.trend { font: 500 var(--t-lg) / 1.45 var(--display); }
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.cs-cols li, .txt, .jan-more p { font-size: var(--t-sm); color: var(--fg-2); }
.cs-cols li + li { margin-top: var(--s-3); }
.cmp-h, .cmp-r { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr 1fr; gap: var(--s-4); align-items: center; }
.cmp-h { font: 500 var(--t-2xs) / 1.3 var(--mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-mono); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.cmp-r { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.pd b { display: block; font: 600 var(--t-sm) / 1.3 var(--mono); }
.pd em { font: 400 var(--t-2xs) / 1.3 var(--mono); font-style: normal; color: var(--fg-3); }
.cmp-r.on .pd em { color: var(--c-conv); font-weight: 600; }
.mv { display: grid; gap: var(--s-2); }
.mv i { --g: 1; display: block; height: var(--s-3); width: calc(var(--w) * var(--g) * 100%); background: var(--c-cost); border-radius: 0 var(--r-1) var(--r-1) 0; }
.mv-r i { background: var(--c-rev); }
.mv-r b { color: var(--c-rev); font-weight: 700; }
.mv b { font: 500 var(--t-sm) / 1 var(--mono); }
.delta { font: 500 var(--t-sm) / 1.5 var(--mono); margin-top: var(--s-5); }
.read { font: 700 var(--t-md) / 1.5 var(--display); margin-top: var(--s-2); }
.read::before { content: '→ '; color: var(--c-rev); }
.cs-note { margin-top: var(--s-6); padding-left: var(--s-4); box-shadow: inset 2px 0 0 var(--c-conv); font-size: var(--t-sm); color: var(--fg-2); }

/* ---------- 03 January, held while the days run ---------- */
.s-jan { padding-top: 0; }
.jan-pin { height: 100svh; display: flex; flex-direction: column; justify-content: safe center; padding-top: var(--head); }
.jan-pin .ch-head { margin-bottom: var(--s-6); }
.jan-now { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); }
.jan-now b { font: 800 var(--t-xl) / 1 var(--display); letter-spacing: -.02em; }
.jan-now span { font: 400 var(--t-sm) / 1 var(--mono); color: var(--fg-3); }
.days { height: var(--day-h); display: grid; grid-template-columns: repeat(31, 1fr); gap: var(--s-1); align-items: end; }
.days i { position: relative; height: calc(var(--h) * 100%); background: var(--line); border-radius: var(--r-1) var(--r-1) 0 0; transition: background var(--d-1); }
.days i.past { background: var(--c-brand); }
.days i.past.on { background: var(--c-conv); }
.days span { position: absolute; left: 0; right: 0; top: 100%; padding-top: var(--s-2); font: 400 var(--t-2xs) / 1 var(--mono); color: var(--fg-3); text-align: center; font-style: normal; }
.jan-pin .legend { margin-top: var(--s-7); }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--s-6); }
.phases li { box-shadow: inset 0 2px 0 var(--line); padding-top: var(--s-4); opacity: .42; transition: opacity var(--d-1), box-shadow var(--d-1); }
.phases li.now { opacity: 1; box-shadow: inset 0 calc(3 * var(--u)) 0 var(--c-brand); }
.phases li.now:nth-child(odd) { box-shadow: inset 0 calc(3 * var(--u)) 0 var(--c-conv); }
.phases b { display: block; font: 700 var(--t-md) / 1.3 var(--display); margin-bottom: var(--s-2); }
.phases span { font-size: var(--t-sm); color: var(--fg-2); }
.jan-more { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: var(--s-8); }
.jan-more .h4 { margin-top: 0; }

/* ---------- 05 revenue ---------- */
.s-rev .legend { margin: 0 0 var(--s-7); }
.rev { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--gutter); }
.rv { box-shadow: inset 0 2px 0 var(--ink); padding-top: var(--s-4); }
.rv h3 { font: 700 var(--t-lg) / 1.2 var(--display); }
.rv-bars { height: var(--rv-h); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: end; margin: var(--s-6) 0 var(--s-4); }
.rv, .rv-bars > div, .bar { min-width: 0; }
.rv-bars > div { --g: 1; height: calc(var(--h) * var(--g) * 100%); display: grid; grid-template-rows: auto 1fr auto; min-height: var(--s-7); }
.rv-bars b { font: 500 var(--t-2xs) / 1.25 var(--mono); text-align: center; margin-bottom: var(--s-2); white-space: nowrap; }
.rv-s { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-1) var(--r-1) 0 0; }
.rv-s i { display: block; }
.rv-bars .m { font: 400 var(--t-2xs) / 1.25 var(--mono); color: var(--ink-3); text-align: center; padding-top: var(--s-2); }
.rv-q { font: 400 var(--t-sm) / 1.4 var(--mono); color: var(--ink-3); display: flex; gap: var(--s-3); }
.rv-q b { color: var(--ink); font-weight: 500; }

/* ---------- 06 plan ---------- */
.pl-tot { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5) var(--gutter); }
.pl-tot b { display: block; font: 800 var(--t-xl) / 1.1 var(--display); letter-spacing: -.02em; }
.pl-tot span { font: 400 var(--t-xs) / 1.3 var(--mono); color: var(--fg-3); }
.pl-list { columns: 2; column-gap: var(--s-6); margin: var(--s-6) 0 calc(-1 * var(--s-4)); }   /* the last group's own space below would double the card's */
.pl-g { break-inside: avoid; padding-bottom: var(--s-4); }
.pl-g h4 { font: 500 var(--t-2xs) / 1.3 var(--mono); text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--fg-3); padding: var(--s-2) 0; }
.pl-g p { display: flex; justify-content: space-between; gap: var(--s-2); font: 400 var(--t-sm) / 1.3 var(--body); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); color: var(--fg-4); }
.pl-g p.on { color: var(--fg); }
.pl-g p.on span::before { content: ''; display: inline-block; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--c-run); margin-right: var(--s-2); vertical-align: middle; }
.pl-g p b { font: 400 var(--t-xs) / 1.3 var(--mono); }
.pl-g p.on b { color: var(--c-run); font-weight: 600; }

/* ---------- Google Ads ---------- */
/* one shared grid for every row (subgrid): each column as wide as what it holds, text columns take the rest */
.g-rows { margin-top: var(--s-8); display: grid; grid-template-columns: max-content minmax(0, 2fr) max-content max-content minmax(0, 1.6fr); column-gap: var(--s-7); }
.g { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--s-5); padding: var(--s-5) var(--s-3); border-bottom: 1px solid var(--line); align-items: start; transition: background var(--d-1); }
.g-h { font: 600 var(--t-2xs) / 1.3 var(--mono); text-transform: uppercase; letter-spacing: var(--tr-mono); color: #fff; background: var(--hc-mk); border-radius: var(--r-1); padding-top: var(--s-3); padding-bottom: var(--s-3); border-bottom: 0; }
.g[data-i]:hover { background: var(--line-2); }
.g-tot { border-bottom: 0; padding-bottom: 0; }
.g h3 { font: 700 var(--t-lg) / 1.2 var(--display); white-space: nowrap; display: flex; align-items: center; gap: var(--s-3); }
.g h3 i { width: var(--s-3); height: var(--s-3); border-radius: 50%; background: var(--gc); flex: none; }
.g-bar { display: block; height: var(--s-2); margin-top: var(--s-3); background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.g-bar i { display: block; height: 100%; background: var(--gc); border-radius: var(--r-pill); }
.g-mk, .g-why { color: var(--fg-2); font-size: var(--t-sm); }
.g-n b { display: block; font: 500 var(--t-md) / 1.3 var(--mono); }
.g-n span { font: 400 var(--t-xs) / 1.4 var(--mono); color: var(--fg-3); }
.g-tot h3 { color: var(--gold); }
.g-tot .g-bar { display: none; }

/* ---------- footer ---------- */
.s-foot { padding-bottom: var(--s-7); }
.f-name { font: 800 var(--t-2xl) / 1 var(--display); letter-spacing: var(--tr-display); }
.f-role { font: 500 var(--t-lg) / 1.3 var(--display); color: var(--gold-d); margin-top: var(--s-3); }
.f-contact { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--s-5) var(--s-8); margin-top: var(--s-7); }
.f-contact a { display: grid; gap: var(--s-2); font: 700 var(--t-xl) / 1.15 var(--display); letter-spacing: -.02em; text-decoration: none; transition: color var(--d-1); }
.f-contact a:hover { color: var(--gold-d); }
.f-contact span { font: 500 var(--t-xs) / 1.3 var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--ink-3); }
.f-copy { margin-top: var(--s-8); font: 400 var(--t-xs) / 1.4 var(--mono); color: var(--ink-3); }

/* ---------- phone column ---------- */
@media (max-width: 1151px) {
  .f-contact { grid-template-columns: 1fr; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .ticker { grid-template-columns: 1fr; gap: var(--s-3); }
  /* the phone hero is laid out top-down in fixed steps instead of being stretched over the screen height */
  .s-hero { height: auto; min-height: 100svh; display: block; align-content: start; }
  .hero-pin { height: auto; }
  .hero-copy { justify-content: flex-start; gap: var(--s-8); }
  .bars .full, .rv-bars .full { display: none; } .bars .k, .rv-bars .k { display: inline; }   /* the short form is the one that fits the phone artboard */
  .in-grid, .exp-head, .soc, .pts, .bud-grid, .jan-more, .phases, .cs-cols { grid-template-columns: 1fr; }
  .soc, .pts { gap: var(--s-5); }
  .skills > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .exp-head { gap: var(--s-4); }
  .card.spend { grid-row: auto; }
  .card, .panel { padding: var(--s-5); }
  .bars { gap: var(--s-2); }
  .split-sec { grid-template-columns: 1fr; gap: 0; padding: var(--s-6) var(--pad); }
  .mw { order: -1; position: relative; top: 0; }
  .tb .opt { display: none; }
  .cmp-h, .cmp-r { grid-template-columns: calc(110 * var(--u)) 1fr 1fr; gap: var(--s-3); }
  .jan-pin { height: auto; min-height: 0; justify-content: flex-start; padding-bottom: var(--s-6); }   /* stacked from the top in fixed steps, like the phone hero */
  .days span { display: none; }
  .days i:nth-child(5n+1) span { display: block; }
  .phases { gap: var(--s-4); }
  .rev { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-5); }
  .pl-list { columns: 1; }
  .g-rows { display: block; }
  .g { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); padding: var(--s-5) var(--s-3); }
  .g h3, .g-mk, .g-why { grid-column: 1 / -1; }
  .g-h { display: none; }
  /* the heading row does not fit the stacked rows, so each field carries its own heading */
  .g [data-l]::before { content: attr(data-l); display: block; margin-bottom: var(--s-1); font: 500 var(--t-2xs) / 1.3 var(--mono); text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--fg-3); }
}
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } }

/* text that sits over the globe gets a soft shade on its side, so the planet stays a backdrop */
.part::before, .s-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(12, 12, 11, .92) calc(var(--gx)), rgba(12, 12, 11, .7) calc(var(--gx) + 547 * var(--u)), rgba(12, 12, 11, 0) calc(var(--gx) + 922 * var(--u))); }
.part, .s-hero { isolation: isolate; }
.sc-stats b, .sc-pages b, .pl-tot b, .g-n b, .rv-q b, .hero-count .cnt-v { font-variant-numeric: tabular-nums; }
@media (max-width: 1151px) {
  .part::before, .s-hero::before { background: linear-gradient(180deg, rgba(12, 12, 11, .2) 0%, rgba(12, 12, 11, .82) 46%, rgba(12, 12, 11, .82) 100%); }
}