/* Kökényesi András, marketing szakértő.
   Idea: creative and measurable. Amber is the photo world, navy is the numbers world, coral marks the few things to press.
   One interactive moment (the hero), calm blocks after it. No black anywhere: ink is a deep navy. */

/* The two type families, served from this site (no request leaves it). Hungarian needs both subsets: ő and ű live in latin-ext. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/saira-condensed-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/saira-condensed-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/saira-condensed-900-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/saira-condensed-900-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --amber:#FFB334; --navy:#0F2F5D; --coral:#FD7562; --ink:#0B183B; --paper:#F9F6F1; --slab:#0A1F47; --card:#fff;
  --line:rgb(11 24 59/.16); --line-on-dark:rgb(249 246 241/.26);
  --f-d:"Saira Condensed","Arial Narrow",Impact,sans-serif;   /* headings and large figures */
  --f-t:"Barlow","Segoe UI",Arial,sans-serif;                  /* text and small figures (tabular) */
  --gut:clamp(20px,5.5vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--navy) var(--paper);scroll-padding-top:64px}   /* menu jumps stop below the fixed bar; Lenis reads the same value */
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(16px,1.18vw,19px)/1.55 var(--f-t);-webkit-font-smoothing:antialiased;overflow-x:clip;font-variant-numeric:tabular-nums}
::selection{background:var(--navy);color:var(--paper)}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ai :focus-visible,.made :focus-visible,.slab :focus-visible,.pane.cool :focus-visible,#lb :focus-visible{outline-color:var(--paper)}
.hero-stage :focus-visible{box-shadow:0 0 0 9px var(--paper)}   /* the world behind may be amber or navy: a ring that shows on both */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;z-index:99;left:12px;top:-60px;padding:10px 16px;background:var(--ink);color:var(--paper);border-radius:8px}
.skip:focus{top:12px}

/* shared pieces */
h2{font:900 clamp(40px,7vw,122px)/1 var(--f-d);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}   /* accented capitals (Á, Ő, Ú) need the room: with tighter lines they touch the comma of the line above */
h3{font:800 clamp(23px,2.1vw,34px)/1.02 var(--f-d);text-transform:uppercase}
.pill{display:inline-flex;align-items:center;padding:.55em 1.2em;border:1.5px solid currentColor;border-radius:99px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.pill.solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sample{margin-left:.9em;padding:.18em .7em;border:1.5px solid currentColor;border-radius:99px;font-size:.72em;font-weight:600;vertical-align:.12em}
.tags,.chips{display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:.22em .8em;border:1.5px solid var(--line);border-radius:99px;font-size:.86em;font-weight:500;white-space:nowrap}
main > section{position:relative;padding:clamp(72px,11vw,176px) var(--gut);overflow-x:clip;   /* blocks that slide in from the side must not widen the page */
  scroll-margin-top:calc(clamp(30px,4vw,60px) - clamp(72px,11vw,176px))}                     /* a menu jump stops with the heading at the same height in every block */
.head{display:grid;gap:clamp(20px,2.4vw,36px);margin-bottom:clamp(36px,5vw,80px)}
.head p{max-width:56ch;font-size:1.12em}
@media (hover:hover){
  .pill:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .pill.solid:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}
}

/* the bar that takes over from the hero's own navigation */
.bar{position:fixed;z-index:40;inset:0 0 auto;display:flex;align-items:center;gap:clamp(14px,2vw,32px);padding:12px var(--gut);background:var(--paper);border-bottom:1px solid var(--line);transform:translateY(-101%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
.bar.on{transform:none;visibility:visible;transition:transform .45s var(--ease)}   /* hidden also for the keyboard while it is off screen */
.brand{margin-right:auto;font-weight:700;font-size:1.06em;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.bar nav,.hero-top nav{display:flex;gap:clamp(14px,2vw,32px);font-weight:600}
.bar nav a,.hero-top nav a{position:relative;text-decoration:none;padding:4px 0}
.bar nav a::before,.hero-top nav a::before{content:"";position:absolute;inset:-10px -9px}   /* a short word like "AI" still gets a finger-sized target */
.bar nav a::after,.hero-top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
@media (hover:hover){.bar nav a:hover::after,.hero-top nav a:hover::after{transform:scaleX(1)}}
.bar nav a[aria-current]::after{transform:scaleX(1)}   /* the block being read stays underlined */

/* narrow screens swap the link row for two bars that open the menu */
.burger{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.burger i{position:absolute;left:10px;width:24px;height:2.5px;border-radius:2px;background:currentColor;transition:width .3s var(--ease)}
.burger i:first-child{top:16px}
.burger i:last-child{top:25.5px;width:15px}
@media (hover:hover){.burger:hover i:last-child{width:24px}}
.burger.x{display:block}
.burger.x i{top:21px;width:24px}
.burger.x i:first-child{transform:rotate(45deg)}
.burger.x i:last-child{transform:rotate(-45deg)}
.hero-top button{pointer-events:auto}
/* the menu itself: a small card that drops from the two bars; its close button sits exactly where they are */
#menu{width:min(310px,calc(100vw - 2 * var(--gut) + 28px));max-width:none;max-height:none;margin:8px calc(var(--gut) - 14px) auto auto;padding:4px 14px 16px;border:0;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 34px 70px -24px rgb(11 24 59/.6);overflow:hidden}
#menu::backdrop{background:rgb(11 24 59/.42)}
#menu-x{margin-left:auto;margin-right:-10px}
#menu nav{display:grid;margin-top:2px;border-top:1px solid var(--line)}
#menu nav a{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;border-bottom:1px solid var(--line);font-weight:600;font-size:17px;text-decoration:none}
#menu nav a::after{content:"";width:7px;height:7px;margin-right:4px;border-top:2px solid;border-right:2px solid;transform:rotate(45deg);opacity:.45;transition:transform .25s var(--ease),opacity .25s}
#menu nav a[aria-current]{color:var(--navy)}
#menu nav a[aria-current]::after{opacity:1;border-color:var(--coral)}
@media (hover:hover){#menu nav a:hover::after{opacity:1;transform:translateX(4px) rotate(45deg)}}
#menu > a.pill{display:flex;justify-content:center;margin-top:16px}
@media (prefers-reduced-motion:no-preference){
  #menu[open]{transform-origin:calc(100% - 26px) 26px;animation:menu-in .26s var(--ease)}
  #menu[open]::backdrop{animation:menu-dim .26s ease-out}
}
@keyframes menu-in{from{opacity:0;transform:scale(.9)}}
@keyframes menu-dim{from{opacity:0}}

/* hero: tall section, sticky stage; scrolling through it raises the navy level */
.hero{height:175vh;padding:0!important;background:var(--amber);scroll-margin-top:0}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--amber)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-ui{position:absolute;inset:0;pointer-events:none;color:var(--ink);opacity:0;transition:opacity .9s .35s}
.hero-stage.ready .hero-ui{opacity:1}
.hero-ui a{pointer-events:auto}
/* with WebGL the text is painted into the picture (hero.js), so it flips colour with the world behind it; these stay as invisible, working links */
.hero-stage.gl .hero-ui,.hero-stage.gl .hero-ui .pill{color:transparent;border-color:transparent;background:none;user-select:none}
.hero-stage.gl .hero-top nav a::after{display:none}
.hero-top{position:absolute;left:var(--gut);right:var(--gut);top:clamp(16px,3.2vh,34px);display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
/* the headline and the two paragraphs. hero.js composes them for the window (see layout() there) and passes every position and size
   as a custom property; the values after the commas only matter if that script could not run */
.hero-head{position:absolute;left:var(--head-x,var(--gut));top:var(--head-y,14%);width:var(--lock-w,auto)}
.hero-role{display:block;margin-left:var(--role-dx,0);font:900 var(--role-fs,clamp(40px,8.4vw,160px))/var(--role-lh,.99) var(--f-d);text-transform:uppercase}
.hero-role2{margin:var(--role2-mt,.12em) 0 0 var(--role2-dx,0);font-size:var(--role-fs2,clamp(20px,4.2vw,80px));line-height:1;white-space:nowrap}
.hero-lede{position:absolute;width:var(--blk-w,26vw);font-size:clamp(17px,1.32vw,23px);font-weight:500;line-height:1.42}
.hero-a{left:var(--a-x,var(--gut));top:var(--a-y,62%)}
.hero-b{left:var(--b-x,36vw);top:var(--b-y,62%)}
.hero-stage.poster .hero-head{text-align:center}                                  /* squarer windows: two centred lines across the width */
.hero-stage.poster .hero-role{white-space:nowrap}
.hero-stage.one .hero-b,.hero-stage.bare .hero-lede{display:none}                 /* no room for the second paragraph, or (very low windows) for either */

/* intro */
.statement{max-width:21em;font-size:clamp(27px,3.7vw,62px);font-weight:600;line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.statement .w,.lead .w{display:inline-block}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);margin-top:clamp(36px,5vw,72px);max-width:1280px}
.intro-now{font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(48px,7vw,112px);border-top:2px solid var(--ink);padding-top:clamp(20px,2.4vw,36px)}
.facts b{display:block;font:900 clamp(54px,8.6vw,150px)/.9 var(--f-d);color:var(--navy);white-space:nowrap}
.facts li > span{display:block;margin-top:.9em;max-width:17em;font-weight:500}

/* six areas */
.areas,.ppc,.certs{scroll-margin-top:clamp(30px,4vw,60px)}   /* no top padding here, so the heading would land under the bar */
.areas,.ppc{padding-top:0!important}                          /* same background as the block above: one gap, not two */
.index{--pad:clamp(8px,1vw,16px);border-top:2px solid var(--ink)}
.index > li::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--line)}   /* the rule under a row: straight and on the grid, while the hover card reaches past it */
.index > li{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr) minmax(0,1.15fr);gap:clamp(14px,2.4vw,40px);align-items:start;padding:clamp(18px,2vw,30px) var(--pad);margin-inline:calc(-1 * var(--pad));border-radius:12px;transition:background-color .3s var(--ease)}
.index h3 a{text-decoration:none}
.index h3 a::after{content:"↓";display:inline-block;margin-left:.35em;font-family:var(--f-t);font-weight:600;font-size:.6em;vertical-align:.25em;transition:transform .3s var(--ease)}
@media (hover:hover){.index > li:hover{background:var(--amber)}.index > li:hover::after{opacity:0}.index > li:hover .tags li{border-color:var(--ink)}.index h3 a:hover::after{transform:translateY(4px)}}

/* PPC: two separate panes, nothing that looks draggable */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,24px)}
.pane{position:relative;border-radius:clamp(18px,2vw,30px);padding:clamp(20px,2.4vw,40px);overflow:hidden}
.pane.warm{background:var(--amber)}
.pane.cool{background:var(--navy);color:var(--paper)}
.pane figcaption{font-size:1.12em;font-weight:600}
.ad{width:min(100%,430px);margin:clamp(18px,2vw,30px) auto 0;background:var(--card);border-radius:16px;box-shadow:0 26px 44px -22px rgb(11 24 59/.5);overflow:hidden}
.ad-head{display:flex;align-items:center;gap:10px;padding:14px 16px 0;font-size:.82em;line-height:1.25}
.ad-head i{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--paper);display:grid;place-items:center;font:normal 900 20px var(--f-d)}
.ad-head b{display:block;font-weight:700;font-size:1.08em}
.ad-text{padding:10px 16px 12px;font-size:.92em;line-height:1.4}
.ad-art svg{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .bottle{animation:bob 5s ease-in-out infinite}
  .badge{transform-origin:80px 74px;animation:nudge 6s ease-in-out infinite}
}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes nudge{50%{transform:rotate(-7deg) scale(1.04)}}
.ad-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 14px;font-size:.86em;line-height:1.3}
.ad-foot b{display:block;font-weight:700;font-size:1.04em}
.ad-foot s{opacity:.6;margin-right:.3em}
.ad-foot em{flex:none;padding:.5em 1.1em;border-radius:8px;background:var(--navy);color:var(--paper);font-style:normal;font-weight:600}
.rep-title{margin-top:clamp(18px,2vw,30px);font-weight:700;font-size:1.06em}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;border-top:1px solid var(--line-on-dark)}
.kpi div{padding:clamp(12px,1.4vw,20px) 8px clamp(12px,1.4vw,20px) 0;border-bottom:1px solid var(--line-on-dark)}
.kpi dt{font-size:.86em;opacity:.85}
.kpi dd{font:800 clamp(28px,3vw,48px)/1.08 var(--f-d);white-space:nowrap}
.ab{display:grid;gap:10px;margin-top:clamp(16px,1.8vw,26px)}
.ab p{display:grid;grid-template-columns:6.2em 1fr 5.4em;align-items:center;gap:12px;font-size:.92em}
.ab i{height:12px;border-radius:99px;background:rgb(249 246 241/.3);transform:scaleX(var(--v));transform-origin:left}
.ab .win i{background:var(--amber)}
.ab b{font-weight:600;text-align:right;white-space:nowrap}
.rep-note{margin-top:clamp(14px,1.6vw,22px);font-size:.92em;opacity:.92}

/* AI: the numbers world */
.ai{background:var(--navy);color:var(--paper)}
.ai .lead{max-width:24em;font-size:clamp(22px,2.5vw,40px);font-weight:600;line-height:1.16;letter-spacing:-.015em;text-wrap:balance}
.ai-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,96px);align-items:start}
.ai-text > p{max-width:54ch;font-size:1.08em}
.rules{display:grid;gap:clamp(18px,2vw,28px);margin-top:clamp(28px,3vw,48px)}
.rules li{padding-left:clamp(18px,2vw,28px);border-left:3px solid var(--amber)}
.rules h3{color:var(--amber)}
.rules p{margin-top:.4em;max-width:52ch}
.brief{background:var(--paper);color:var(--ink);border-radius:clamp(16px,1.8vw,26px);padding:clamp(20px,2.2vw,36px);box-shadow:0 30px 60px -30px rgb(0 0 0/.55)}
.brief figcaption{font-weight:700;font-size:1.1em}
.brief dl{margin-top:14px;border-top:2px solid var(--ink)}
.brief dl div{display:grid;grid-template-columns:6.4em 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.brief dt{font-weight:700;color:var(--navy)}
.brief-out{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;font-size:.9em;font-weight:600}
.brief-out span{padding:.3em .9em;border-radius:99px;background:var(--navy);color:var(--paper)}
.brief-out span + span::before{content:"→";margin-right:.9em;margin-left:-.2em;color:var(--amber)}
.brief-out span:last-child{background:var(--coral);color:var(--ink)}
.brief-out span:last-child::before{color:var(--ink)}
.ai-certs{margin-top:clamp(40px,5vw,84px);padding-top:clamp(20px,2.4vw,36px);border-top:1px solid var(--line-on-dark)}
.ai-certs .chips{margin-top:16px}
.chips a{display:block;padding:.34em .95em;border:1.5px solid var(--line-on-dark);border-radius:99px;font-size:.88em;font-weight:500;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.chips .cert a{background:var(--amber);border-color:var(--amber);color:var(--ink);font-weight:700}
@media (hover:hover){.chips a:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}}
.ppc .chips a{border-color:var(--line)}                /* the same chips on the light background */
@media (hover:hover){.ppc .chips a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}}
.ai-tools{margin-top:18px;max-width:60ch;opacity:.9}

/* automation */
.flow-wrap{position:relative}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,32px)}
.flow li{position:relative;padding-top:46px}
.flow li::before{content:"";position:absolute;z-index:1;top:1px;left:0;width:20px;height:20px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2.5px var(--ink);transition:background-color .3s,box-shadow .3s}
.flow li.on::before{background:var(--navy);box-shadow:inset 0 0 0 2.5px var(--navy)}
.flow b{display:block;font:800 clamp(22px,2vw,32px)/1.05 var(--f-d);text-transform:uppercase}
.flow span{display:block;margin-top:.5em;max-width:22ch;font-size:.94em}
.track{position:absolute;top:10px;left:10px;right:calc((100% - 4 * clamp(14px,2vw,32px)) / 5 - 10px);height:3px;background:var(--line);border-radius:3px}
.prog{position:absolute;inset:0;background:var(--navy);border-radius:3px;transform:scaleX(0);transform-origin:left}
.dot{position:absolute;z-index:2;top:-11px;left:-12px;width:25px;height:25px;border-radius:50%;background:var(--coral);border:4px solid var(--paper)}
.auto-note{margin-top:clamp(32px,4vw,64px);font-size:1.12em;font-weight:500}
.auto-note b{font:900 2.4em/1 var(--f-d);color:var(--navy);margin-right:.12em;vertical-align:-.12em}

/* everything made so far: a wall of words that lights up item by item while it scrolls through */
.made{background:var(--navy);color:var(--paper)}
.wall{display:flex;flex-wrap:wrap;gap:.1em .42em;font:900 clamp(27px,5.4vw,94px)/1.04 var(--f-d);text-transform:uppercase}
.wall li{display:flex;align-items:center;gap:.42em}
.wall li:nth-child(3n+2){color:var(--amber)}
.wall li:not(:last-child)::after{content:"";flex:none;width:.2em;height:.2em;border-radius:50%;background:var(--coral)}

/* photography: a strip that visibly continues sideways (arrows, progress line) */
.foto{padding-inline:0!important}
.foto .head{padding-inline:var(--gut)}
.foto-head{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.foto-head h2{grid-column:1/-1}
.strip-nav{display:flex;align-items:center;gap:10px}
.strip-nav button{display:grid;place-items:center;width:clamp(48px,4vw,60px);aspect-ratio:1;padding:0;border:2px solid var(--ink);border-radius:50%;background:none;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),opacity .25s}
.strip-nav button:disabled{opacity:.28;cursor:default}
.strip-nav svg{width:46%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.strip-nav button:not(:disabled):hover{background:var(--ink);color:var(--paper)}}
.strip-bar{height:3px;margin:clamp(18px,2vw,28px) var(--gut) 0;border-radius:3px;background:var(--line);overflow:hidden}
.strip-bar i{display:block;height:100%;background:var(--navy);transform:scaleX(.2);transform-origin:left;transition:transform .2s linear}
.strip-wrap{margin-top:-14px;overflow-x:auto;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.strip-wrap::-webkit-scrollbar{display:none}
.strip-wrap.drag{cursor:grabbing}
.strip{display:flex;gap:clamp(10px,1.3vw,20px);width:max-content;padding:14px var(--gut) 0}   /* room above the photos (the wrap moves up by as much): the scroller would cut off the one that lifts */
.strip button{display:block;padding:0;border:0;background:none;cursor:zoom-in;text-align:left}
.strip img{height:clamp(260px,52vh,520px);width:auto;border-radius:10px;background:#e8e3d9;user-select:none;-webkit-user-drag:none;transition:transform .4s var(--ease)}
@media (hover:hover){.strip button:hover img{transform:translateY(-8px)}}   /* the photo under the pointer lifts: it can be opened */
.strip span{display:block;margin-top:8px;font-size:.84em;font-weight:500}

/* working with people */
.team{background:var(--amber)}
.team-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,96px);align-items:center}
.hub svg{width:100%;height:auto;overflow:visible}
.hub figcaption{display:grid;gap:8px;margin-top:18px;font-size:.94em;font-weight:500;max-width:52ch}
.hub figcaption b{font-weight:700}
.hub figcaption b::after{content:"";display:block}     /* the label on its own line, no colon needed */
.hub .k::before{content:"";display:inline-block;width:26px;height:14px;margin-right:10px;border-radius:99px;vertical-align:-1px}
.hub .ext::before{background:var(--navy)}
.hub .int::before{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.points{display:grid;gap:clamp(22px,2.6vw,40px)}
.points li{padding-top:clamp(14px,1.6vw,22px);border-top:2px solid var(--ink)}
.points p{margin-top:.5em;max-width:44ch}

/* experience */
.jobs{border-top:2px solid var(--ink)}
.jobs > li{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.25fr) minmax(0,1.5fr);gap:clamp(12px,2.4vw,40px);padding:clamp(22px,2.6vw,40px) 0;border-bottom:1px solid var(--line)}
.when{font-weight:600;color:var(--navy);white-space:nowrap}
.org{margin-top:.35em;font-weight:600;color:var(--navy)}
.jobs ul{display:grid;gap:.35em}
.jobs ul li{position:relative;padding-left:1.1em}
.jobs ul li::before{content:"";position:absolute;left:0;top:.62em;width:.42em;height:.42em;border-radius:50%;background:var(--coral)}
.extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);margin-top:clamp(28px,3.4vw,52px)}
.extra dt{font:800 1.25em/1 var(--f-d);text-transform:uppercase;margin-bottom:.5em}
.certs{padding-top:0!important}
.cert-list{columns:2;column-gap:clamp(24px,5vw,96px);border-top:2px solid var(--ink)}
.cert-list li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:.6em 0;border-bottom:1px solid var(--line);break-inside:avoid}
.cert-list .t{display:inline-block;padding:.18em 0}   /* a title without a link keeps the same line box, so the two columns stay level */
.cert-list a{display:inline-block;padding:.18em 0;font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:.22em;text-decoration-color:var(--line);transition:text-decoration-color .25s}
.cert-list span:first-child{font-weight:600}
.cert-list small{display:block;font-size:.84em;font-weight:400;opacity:.8}
.cert-list em{font-style:normal;font-weight:600;color:var(--navy);white-space:nowrap}
.cert-list .now{color:var(--ink);background:var(--amber);padding:.15em .6em;border-radius:99px;font-size:.86em}
@media (hover:hover){.cert-list a:hover{text-decoration-color:currentColor}}

/* sport: one block, built like the one on the previous site */
.slab{display:grid;grid-template-columns:minmax(0,.54fr) minmax(0,1fr);padding:0!important;background:var(--slab);color:var(--paper);scroll-margin-top:calc(clamp(30px,4vw,60px) - clamp(56px,8vw,128px))}
.slab-photo{overflow:hidden;min-height:100%}
.slab-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}   /* the photo has room above the head and below the feet: keep both */
.slab-body{padding:clamp(56px,8vw,128px) var(--gut) clamp(56px,8vw,128px) clamp(24px,4.5vw,80px)}
.where{font-weight:500;opacity:.82}
.slab h2{margin-top:.18em;font-size:clamp(60px,9.4vw,168px);line-height:.88}
.slab h2 em{display:block;font-style:normal;color:var(--amber)}
.legs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);margin-top:clamp(28px,3.6vw,56px);border-top:1px solid var(--line-on-dark)}
.legs > div{padding:clamp(12px,1.5vw,22px) 10px 0 0}
.legs > div + div{padding-left:clamp(10px,1.3vw,20px);border-left:1px solid var(--line-on-dark)}
.legs b{display:block;font:800 clamp(30px,3.6vw,58px)/1 var(--f-d);white-space:nowrap}
.legs small{margin-left:.18em;font:500 .42em var(--f-t);opacity:.75}
.legs > div > span{display:block;margin-top:.3em;font-size:.88em;opacity:.82}
.legs .time b{color:var(--amber)}
.why{margin-top:clamp(24px,3vw,44px);max-width:54ch;color:rgb(249 246 241/.9)}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);margin-top:clamp(24px,3vw,44px);border-top:1px solid var(--line-on-dark);font-size:.92em;line-height:1.42;color:rgb(249 246 241/.82)}
.more li{padding-top:clamp(12px,1.4vw,20px)}
.more b{display:block;margin-bottom:.25em;font:800 1.5em/1.05 var(--f-d);text-transform:uppercase;color:var(--paper)}

/* contact */
.contact{background:var(--amber)}
.contact dl{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);margin:clamp(36px,5vw,80px) 0 clamp(28px,3.4vw,52px);padding-top:clamp(18px,2vw,30px);border-top:2px solid var(--ink)}
.contact dt{font-size:.92em;font-weight:500;margin-bottom:.3em}
.contact dd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:clamp(19px,1.9vw,30px);font-weight:600;letter-spacing:-.012em}
.contact dd a{text-decoration:none;overflow-wrap:anywhere}
.copy{padding:.3em .85em;border:1.5px solid var(--ink);border-radius:99px;background:none;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .25s,color .25s}
@media (hover:hover){.copy:hover{background:var(--ink);color:var(--paper)}}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;padding:20px var(--gut) 26px;background:var(--amber);border-top:1px solid var(--line);font-size:.86em}

/* lightbox */
dialog{border:0;padding:0;background:transparent;max-width:min(94vw,1280px);max-height:94vh}
dialog::backdrop{background:rgb(10 31 71/.94)}
dialog img{max-height:84vh;width:auto;margin-inline:auto;border-radius:8px}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:12px;color:var(--paper);font-size:.94em}
.lb-bar span:last-child{display:flex;gap:8px}
.lb-bar button{padding:.45em 1em;border:1.5px solid var(--line-on-dark);border-radius:99px;background:none;color:var(--paper);font-weight:600;cursor:pointer}

/* narrower screens */
@media (max-width:1020px){
  .bar nav,.hero-top nav{display:none}
  .burger{display:block}
  .hero-top{top:12px}                          /* same height as the bar, so the menu card opens from the same spot in both */
  .index > li{grid-template-columns:1fr;gap:10px}
  .ai-grid,.team-grid,.intro-grid{grid-template-columns:1fr}
  .jobs > li{grid-template-columns:1fr;gap:10px}
  .slab{grid-template-columns:1fr}
  .slab-photo{max-height:78vh}
  .slab-body{padding-left:var(--gut)}
}
@media (max-width:760px){
  .pair,.facts,.extra,.more,.contact dl{grid-template-columns:1fr}
  .facts li{padding-bottom:18px;border-bottom:1px solid var(--line)}
  .cert-list{columns:1}
  .bar a.pill,.hero-top a.pill{display:none}   /* the CV link moves into the menu */
  .hero{height:160vh}
  .foto-head{grid-template-columns:1fr}
  .foot{flex-direction:column}
  .flow{grid-template-columns:1fr;gap:26px}
  .flow li{padding:0 0 0 44px}
  .track{top:10px;bottom:10px;left:9px;right:auto;width:3px;height:auto}
  .prog{transform:scaleY(0);transform-origin:top}
  .dot{top:-12px;left:-11px}
  .legs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .legs .time{grid-column:1/-1;padding-left:0!important;border-left:0!important;border-top:1px solid var(--line-on-dark);margin-top:12px}
  .kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brief dl div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  .bar,.bar.on{transition:none}
  .strip-bar i{transition:none}
}