/* Outflink site, v12. Colours: Outflink brand palette (navy #1d334c, yellow #fcc100,
   Grey Lilac page #f5f5fa, white panels). Softened 2026-10-07: a pale yellow highlighter
   (button stays solid #fcc100), lighter navy-tinted greys and rules. Build 1 ("8010") visual system, with product screenshots.
   Headings and figures: Manrope 500. Buttons: Manrope 600.
   Body: Open Sans 400/600.
   Screenshots (set 5) are always shown at their designed CSS width
   (1168 / 720 / 390) from 3x sources, never scaled up, squeezed or cropped.
   Content width is 1136px: the width of the large screen's window. */
:root{
  --paper:#f5f5fa;            /* brand Grey Lilac (r6: was warm #f8f7f4) */
  --panel:#ffffff;            /* r6: was warm #fffefc */
  --ink:#1d334c;
  --ink-2:#495b6f;
  --ink-3:#5f6f81;            /* 4.7:1 on #f5f5fa, 5.2:1 on white */
  --line-3:#7b8798;
  --rule:#dfe2ea;             /* navy-tinted; r6: was warm #dcdad6 */
  --rule-soft:#e9ebf1;        /* navy-tinted; r6: was warm #eae8e4 */
  --yellow:#fcc100;
  --hl:rgba(252,193,0,.45);   /* was solid #fcc100; pale highlighter as the original (.48) */
  --head:"Manrope","Helvetica Neue",Arial,sans-serif;
  --sans:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --num:"Open Sans","Helvetica Neue",Arial,sans-serif;
  /* tokens used by the booking form (copied unchanged from the latest build) */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:112px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-lift:0 0 48px rgba(29,51,76,.05);   /* same soft shadow as the screens (set 5): no offset, large blur, low opacity */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.hl{background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* focus */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.btn-primary:focus-visible{outline-offset:3px;box-shadow:0 0 0 1px var(--paper)}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--ink);color:#fff;font-family:var(--head);font-weight:600;font-size:14px;padding:10px 14px;border-radius:4px}
.skip:focus{top:12px}

/* links in text */
.text-link{font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;display:inline-flex;gap:8px;align-items:baseline}
.text-link:hover{border-bottom-color:var(--yellow);box-shadow:inset 0 -3px 0 var(--hl)}
.inline-link{border-bottom:1px solid currentColor}
.inline-link:hover{background:var(--hl)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:600;font-size:15px;line-height:1;border-radius:4px;padding:15px 20px;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.btn-primary{background:var(--yellow);color:var(--ink)}
.btn-primary:hover{background:#efb805}
.btn-primary .arr{font-family:var(--sans);font-size:14px}
.btn-quiet{border:1px solid var(--ink);color:var(--ink);padding:10px 16px;font-size:14px}
.btn-quiet:hover,.btn-quiet[aria-current="page"]{background:rgba(252,193,0,.22)}
.cta{margin-top:32px}
.cta small{display:block;margin-top:12px;font-size:13px;color:var(--ink-3)}

/* nav */
.nav{border-bottom:1px solid var(--rule);position:relative}
.nav .wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:36px;font-size:14.5px;color:var(--ink)}
.nav-links a:not(.btn){color:var(--ink-2)}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]:not(.btn){color:var(--ink);box-shadow:inset 0 -2px 0 var(--yellow)}
.menu-btn{display:none}

/* type */
.h1{font-family:var(--head);font-weight:500;font-size:70px;line-height:1.08;letter-spacing:-0.015em;max-width:1080px}
.h1-sm{font-size:56px;max-width:980px}
.h2{font-family:var(--head);font-weight:500;font-size:44px;line-height:1.1;letter-spacing:-0.015em}
.h3{font-family:var(--head);font-weight:500;font-size:24px;line-height:1.25;letter-spacing:-0.01em}
.h4{font-family:var(--head);font-weight:600;font-size:17px;line-height:1.35}
.lede{font-size:19px;line-height:1.6;letter-spacing:.2px;color:var(--ink-2);max-width:390px}
.body-l{font-size:17px;line-height:1.65;color:var(--ink-2)}
.body-l + .body-l{margin-top:16px}

/* page intro (inner pages) */
.intro{padding:72px 0 104px}
.intro .lede{margin-top:36px;max-width:640px}
/* a page head may end with one content block (screen, figures, case list, KPI row) */
.intro .page-block{margin-top:72px}

/* hero */
.hero{padding:48px 0 72px}
.hero-body{display:grid;grid-template-columns:minmax(0,1fr) 696px;gap:64px;margin-top:40px;align-items:start}
.hero-body > *{min-width:0}
.figures{margin-top:40px;border-top:1px solid var(--rule)}
.figure{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:18px;padding:20px 0;border-bottom:1px solid var(--rule)}
.figure > b{font-family:var(--head);font-weight:500;font-size:44px;line-height:1;letter-spacing:-0.015em;font-variant-numeric:lining-nums tabular-nums}
.figure > span{font-size:14px;color:var(--ink-2)}

/* ---------- product screenshots ----------
   Each screen is shown at exactly the CSS size it was designed for
   (1168 / 720 / 390), from 3x sources. Nothing is scaled or cropped.
   The screen's window sits inside the image (--t top, --l sides, --b bottom,
   the rest is its own soft shadow), so negative margins make the layout box
   equal to the window: window edges line up with the text edges. */
.s-large{--t:16px;--l:16px;--b:24px}
.s-medium{--t:12px;--l:12px;--b:20px}
.shot{margin:0}
.frame{display:block;width:max-content;max-width:none;margin:calc(-1 * var(--t)) calc(-1 * var(--l)) calc(-1 * var(--b));border-radius:10px;transition:transform .25s var(--ease)}
.frame:hover{transform:translateY(-2px)}
.frame:focus-visible{outline-offset:-6px}
.frame img{max-width:none;width:auto;height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 calc(var(--l) - 2px),#000 calc(100% - var(--l) + 2px),transparent),linear-gradient(to bottom,transparent,#000 calc(var(--t) - 2px),#000 calc(100% - var(--b) + 4px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 calc(var(--l) - 2px),#000 calc(100% - var(--l) + 2px),transparent),linear-gradient(to bottom,transparent,#000 calc(var(--t) - 2px),#000 calc(100% - var(--b) + 4px),transparent);
  mask-composite:intersect}
.shot.centre{display:flex;justify-content:center}


/* four verified figures in one calm row */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.statrow > div{padding:24px 28px 0 0}
.statrow > div + div{padding-left:28px;border-left:1px solid var(--rule-soft)}
.statrow b{display:block;font-family:var(--head);font-weight:500;font-size:44px;line-height:1;letter-spacing:-0.015em;font-variant-numeric:lining-nums tabular-nums}
.statrow span{display:block;margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink-2);max-width:15em}

/* logos, in their own colours */
.logos{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section .logos{border-top-color:var(--ink)}
.logo{width:auto;object-fit:contain}
.logo-wh{height:28px}
.logo-ps{height:30px}
.logo-cd{height:26px}
.logo-ng{height:24px}
.logo-hm{height:30px}
/* logo marquee (Home, About): every brand we have worked with, on one line, scrolling
   slowly right to left. Two identical sets; the track moves by exactly one set (-50%),
   so the loop has no seam. Pauses on hover. Pure CSS.
   Each logo has its own optical height (--h, px; 2026-10-07: h ~ aspect^-0.35 x ink density^-0.1,
   so wordmarks sit a touch taller than equal area and stacked marks a touch smaller; capped at 52; Casumo and GAN, the heaviest marks, set 2px lower by eye),
   scaled by --k on smaller screens. Files are trimmed and shown at their own aspect ratio. */
.marquee{--gap:72px;--k:1;overflow:hidden;padding:28px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 52s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:var(--gap);padding-right:var(--gap);list-style:none;flex:none}
.marquee-set li{display:flex;align-items:center;height:56px}
.marquee .logo{height:calc(var(--h) * var(--k) * 1px);width:auto;max-width:none}
.marquee .logo-wh{--h:31}.marquee .logo-ps{--h:30}.marquee .logo-cd{--h:33}.marquee .logo-ng{--h:29}.marquee .logo-hm{--h:34}.marquee .logo-sb{--h:51}.marquee .logo-ar{--h:36}.marquee .logo-cs{--h:27}.marquee .logo-gn{--h:39}.marquee .logo-cm{--h:31}.marquee .logo-pa{--h:42}.marquee .logo-bb{--h:36}.marquee .logo-wv{--h:52}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- one section system, used on every page ----------
   1. every section: the same top and bottom space and a full-width hairline on top
   2. heading in the left column (max 800px: about 12 words a line, 2 lines)
   3. optional intro directly under the heading, same column
   4. then content blocks: a full-width screen, a grid of like items, or rows
      (title left, text right); blocks are 64px apart, a closing link 40px */
.section{padding:104px 0;border-top:1px solid var(--rule)}
.sec-head{max-width:800px;margin-bottom:48px}
.sec-intro{margin-top:16px;font-size:19px;line-height:1.55;letter-spacing:.2px;color:var(--ink-2);max-width:640px}
.sec-text{max-width:680px}
.section .wrap > * + :not(.after-link){margin-top:64px}
.section .wrap > .sec-head + *{margin-top:0}

/* questions */
.qs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.qs li{padding:28px 36px 0 0;border-right:1px solid var(--rule);font-family:var(--head);font-weight:500;font-size:21px;line-height:1.35;letter-spacing:-0.005em}
.qs li + li{padding-left:36px}
.qs li:last-child{border-right:none;padding-right:0}

/* steps (3 or 4 columns) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps.two{grid-template-columns:repeat(2,1fr)}
.step{padding:28px 36px 0 0;border-right:1px solid var(--rule)}
.step + .step{padding-left:36px}
.step:last-child{border-right:none;padding-right:0}
.step-n{display:block;font-family:var(--head);font-weight:500;font-size:44px;line-height:1;letter-spacing:-0.015em;margin-bottom:24px}
.step .h3{margin-bottom:12px}
.step > .h3:first-child{margin-top:0}
.step p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.step p + p{margin-top:12px}
.step .lead{font-family:var(--head);font-weight:500;font-size:21px;line-height:1.35;letter-spacing:-0.005em;color:var(--ink)}
.after-link{margin-top:40px}

/* results (Home): 2 x 2, each card links to its case page */
.results{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.res{display:flex;flex-direction:column;padding:36px 56px 40px 0;color:var(--ink)}
.res:nth-child(2n){padding:36px 0 40px 56px;border-left:1px solid var(--rule)}
.res:nth-child(n+3){border-top:1px solid var(--rule)}
.res-logo{height:36px;display:flex;align-items:center;margin-bottom:28px}
.res-logo .logo-wh{height:26px}
.res-logo .logo-ps{height:28px}
.res-logo .logo-cd{height:25px}
.res-logo .logo-ng{height:22px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.stat b{display:block;font-family:var(--head);font-weight:500;font-size:56px;line-height:1;letter-spacing:-0.015em;font-variant-numeric:lining-nums}
.stat b .hl{padding:0 .04em}
.stat > span{display:block;margin-top:12px;font-size:15px;color:var(--ink-2)}
.res-text{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule-soft);font-size:15px;line-height:1.6;color:var(--ink-2);max-width:460px}
.res .more{margin-top:auto;padding-top:24px}
.res .more span{font-family:var(--head);font-weight:600;font-size:15px;border-bottom:1px solid var(--ink);padding-bottom:2px}
.res:hover .more span{border-bottom-color:var(--yellow);box-shadow:inset 0 -3px 0 var(--hl)}
.res:hover .stat b{color:var(--ink)}
.res .quote blockquote p{max-width:30em}
.res-quote-lead blockquote p{font-family:var(--head);font-weight:500;font-size:26px;line-height:1.35;letter-spacing:-0.01em}

/* quotes */
.quote{margin-top:24px}
.quote blockquote p{font-family:var(--head);font-weight:500;font-size:17px;line-height:1.5;color:var(--ink)}
.quote figcaption,.quote .by{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.quote img,.by img{width:44px;height:44px;aspect-ratio:1;object-fit:cover;object-position:50% 50%;border-radius:50%;flex:none}
.quote b,.by b{display:block;color:var(--ink)}
.quote-l blockquote p{font-size:24px;line-height:1.45;letter-spacing:-0.005em}
.quote-l{border-left:1px solid var(--ink);padding-left:32px;margin-top:0}
.quote-l figcaption{margin-top:24px;font-size:15px}
.quote-l img{width:80px;height:80px}

/* final block */
.final{border-top:1px solid var(--rule);padding:104px 0}
.final .h2{font-size:56px;line-height:1.08;max-width:800px}
.final p{margin-top:16px;font-size:19px;letter-spacing:.2px;color:var(--ink-2);max-width:640px}
.final .cta{margin-top:32px}
.final .final-link{margin-top:24px}

/* work page: one row per case, the whole row is a link */
.cases{border-top:1px solid var(--ink)}
.case{display:grid;grid-template-columns:4fr 8fr;gap:72px;padding:56px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.case-side .sector{margin-top:18px;font-size:14px;color:var(--ink-2)}
.case-side .sector b,.sector b{font-family:var(--head);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:8px}
.case-logo{height:44px;display:flex;align-items:center}
.case-logo .logo-wh{height:34px}
.case-logo .logo-ps{height:34px}
.case-logo .logo-cd{height:32px}
.case-logo .logo-ng{height:28px}
.case-logo .logo-hm{height:38px}
.case-main{display:grid;grid-template-columns:1fr;gap:16px;align-content:start}
.case-main .stat b{font-size:64px}
.case-main .line{font-size:19px;line-height:1.5;color:var(--ink-2);max-width:26em}
.case-main .quote{grid-column:1 / -1;margin-top:0}
.case-main .quote blockquote p{font-size:24px;line-height:1.4;letter-spacing:-0.005em;max-width:30em}
.case-main .more{grid-column:1 / -1;margin-top:16px}
.case-main .more span{font-family:var(--head);font-weight:600;font-size:15px;border-bottom:1px solid var(--ink);padding-bottom:2px}
.case:hover .more span{border-bottom-color:var(--yellow);box-shadow:inset 0 -3px 0 var(--hl)}

/* case pages */
.cs-logo{height:56px;display:flex;align-items:center;margin-bottom:40px}
.cs-logo .logo-wh{height:44px}
.cs-logo .logo-ps{height:42px}
.cs-logo .logo-cd{height:38px}
.cs-logo .logo-ng{height:36px}
.cs-logo .logo-hm{height:46px}
/* case facts: Sector, Markets, Channels on one line */
.facts{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:28px;font-size:15px;color:var(--ink-2)}
.facts b{font-family:var(--head);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:8px}
/* figures row with words instead of numbers (no performance number in the sources) */
.kpis.kpis-words .stat b{font-size:40px;line-height:1.1}
.intro .sector{margin-top:28px;font-size:15px;color:var(--ink-2)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.kpis .stat{padding:32px 40px 8px 0;border-right:1px solid var(--rule)}
.kpis .stat + .stat{padding-left:40px}
.kpis .stat:last-child{border-right:none}
.kpis .stat b{font-size:64px}
.next-links{display:flex;flex-wrap:wrap;gap:16px 40px}

/* rows with thin rules (Solutions services, FAQ) */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:5fr 7fr;gap:72px;padding:32px 0;border-bottom:1px solid var(--rule)}
.row p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:620px}
.row .h3{font-size:22px}
.row .h4{font-size:18px}
.row p + p{margin-top:12px}
.row .fig{margin-top:-4px;font-family:var(--head);font-weight:500;font-size:44px;line-height:1;letter-spacing:-0.015em;font-variant-numeric:lining-nums}
.row .row-q{font-family:var(--head);font-weight:500;font-size:22px;line-height:1.45;letter-spacing:-0.005em;color:var(--ink);max-width:none}
.row .by{display:flex;gap:14px;margin-top:0;align-items:center;align-self:start}
.row .by b{display:block;color:var(--ink);font-weight:600}
.row .by span{font-size:14px;line-height:1.45;color:var(--ink-2)}
/* examples: big figure, one sentence */
.exs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.exs li{padding:28px 36px 0 0;border-right:1px solid var(--rule)}
.exs li + li{padding-left:36px}
.exs li:last-child{border-right:none;padding-right:0}
.exs b{display:block;font-family:var(--head);font-weight:500;font-size:56px;line-height:1;letter-spacing:-0.015em;font-variant-numeric:lining-nums}
.exs p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-2)}

/* how we work */
.checks{border-top:1px solid var(--ink);max-width:800px}
.checks li{position:relative;padding:16px 0 16px 30px;border-bottom:1px solid var(--rule-soft);font-size:17px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:2px;top:24px;width:12px;height:7px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(-45deg)}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags li{font-family:var(--head);font-weight:600;font-size:14px;border:1px solid var(--ink);border-radius:999px;padding:8px 16px}


/* about */
.story p{font-size:18px;line-height:1.7;color:var(--ink-2)}
.story p + p{margin-top:20px}
.figs-row{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;border-top:1px solid var(--rule)}

/* contact (frame from build 1, form from the latest build) */
.contact{padding:72px 0 120px}
.contact-head{max-width:760px;margin:0 auto}
.contact-head .lede{margin-top:24px;max-width:600px}
.contact .booking{max-width:760px;margin:48px auto 0}
.contact-cta{max-width:760px;margin:40px auto 0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.contact-cta p{font-size:16px;color:var(--ink-2)}

/* 404 */
.nf{padding:120px 0 160px}
.nf .text-link{margin-top:40px}

/* footer */
footer{border-top:1px solid var(--rule);padding:40px 0 48px}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:24px 48px;align-items:start}
.foot img{height:24px;width:auto}
.foot p{font-size:14px;color:var(--ink-2);max-width:460px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 0;font-size:14px;color:var(--ink-2)}
.foot-links li{display:flex;align-items:center}
.foot-links li + li::before{content:"\00B7";padding:0 10px;color:var(--ink-3)}
.foot-links a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--yellow)}
.foot small{display:block;margin-top:14px;font-family:var(--num);font-size:12px;color:var(--ink-3)}

/* ---------- booking form: copied unchanged from the latest build ---------- */
/* booking form (unchanged from v7) */
.booking{background:var(--panel);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow-lift);padding:var(--s4)}
.bk-static p{font-size:16px;color:var(--ink-2)}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s3);border-bottom:1px solid var(--rule-soft);flex-wrap:wrap}
.bk-steps{display:flex;gap:var(--s3);font-family:var(--head);font-weight:600;font-size:13px;color:var(--ink-3)}
.bk-steps li{display:flex;align-items:center;gap:var(--s1)}
.bk-steps span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--rule);font-size:12px;transition:background-color .2s ease}
.bk-steps .is-on{color:var(--ink)}
.bk-steps .is-on span{background:var(--yellow);border-color:var(--yellow)}
.bk-steps .is-done span{background:#fff;border-color:var(--ink);color:var(--ink)}
.bk-preview{font-size:12px;color:var(--ink-2);background:var(--rule-soft);border-radius:999px;padding:4px 10px}
.bk-cal{padding-top:var(--s3)}
.bk-cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.bk-label{font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink)}
.bk-range{font-size:14px;color:var(--ink-3)}
.bk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1)}
.bk-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;padding:6px 2px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.bk-dn{font-family:var(--head);font-weight:600;font-size:20px;line-height:1}
.bk-dm,.bk-dw{font-size:12px;line-height:1.2;color:var(--ink-3)}
.bk-dw{font-family:var(--head);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.bk-day.is-on .bk-dw{color:var(--ink-2)}
.bk-skel-day{height:72px}
.bk-ts{grid-column:1 / -1;min-height:65px}
.bk-day:hover:not([disabled]){border-color:var(--ink)}
.bk-day.is-on{background:rgba(252,193,0,.2);border-color:var(--ink);color:var(--ink)}
.bk-day.is-on .bk-dm{color:var(--ink-2)}
.bk-times{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule-soft)}
.bk-times-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.bk-tz{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3)}
.bk-tz select{min-height:40px;max-width:240px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px;padding:0 var(--s1)}
.bk-tz select:hover{border-color:var(--ink-3)}
.bk-live{min-height:120px}
.bk-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.bk-slot{min-height:44px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--ink);font-family:var(--head);font-weight:600;font-size:15px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.bk-slot:hover{background:var(--yellow);border-color:var(--yellow)}
.bk-skel{display:block;height:44px;border-radius:6px;background:linear-gradient(90deg,var(--rule-soft) 0,#f3f1ed 50%,var(--rule-soft) 100%);background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.bk-msg{padding:var(--s3);border:1px dashed var(--rule);border-radius:6px;font-size:16px;color:var(--ink-2);text-align:center}
.bk-msg.is-error{border:1px solid #ffbfb8;background:#fff5f4;color:var(--ink);text-align:left;margin-bottom:var(--s2)}
.bk-msg.is-error .btn{margin-top:var(--s2)}
.bk-foot{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--rule-soft);font-size:14px;color:var(--ink-3)}
.bk-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);padding:var(--s2) var(--s3);background:var(--paper);border:1px solid var(--rule-soft);border-radius:6px}
.bk-summary p{display:flex;flex-direction:column;gap:2px}
.bk-summary .bk-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bk-summary b{font-family:var(--head);font-weight:500;font-size:21px;line-height:1.3}
.bk-zone{font-size:14px;color:var(--ink-3)}
.bk-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.bk-field{display:flex;flex-direction:column;gap:6px}
.bk-field label{font-family:var(--head);font-weight:600;font-size:14px;color:var(--ink)}
.bk-opt{font-weight:500;color:var(--ink-3)}
.bk-field input{min-height:48px;border:1px solid var(--rule);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:16px;padding:0 var(--s2);transition:border-color .15s ease,box-shadow .15s ease}
.bk-field input:hover{border-color:var(--ink-3)}
.bk-field input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(252,193,0,.45);outline:none}
.bk-field input[aria-invalid="true"]{border-color:#bf473a}
.bk-err{font-size:13px;color:#bf473a}
.bk-err:empty{display:none}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-form .bk-live{grid-column:1 / -1;min-height:0}
.bk-submit{grid-column:1 / -1;justify-self:start}
.bk-spin{width:14px;height:14px;border:2px solid rgba(29,51,76,.3);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bk-done{padding:var(--s4) 0 var(--s2)}
.bk-tick{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--yellow);margin-bottom:var(--s3)}
.bk-tick svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-done .h3{max-width:24ch}
.bk-done p{margin-top:var(--s2);font-size:17px;color:var(--ink-2)}
.bk-done .bk-zone{font-size:14px;color:var(--ink-3)}
.bk-done .bk-preview{display:inline-block;margin-top:var(--s3);font-size:12px}

/* ---------- below 1200px the large screen (1168) no longer fits:
   large slots serve the 720 composition and rows stack ---------- */
@media (max-width:1199px){
  .h1{font-size:60px}
  .h1-sm{font-size:50px}
  .s-large{--t:12px;--l:12px;--b:20px}
  .hero-body{grid-template-columns:1fr;gap:40px}
  .lede{max-width:560px}
  .case,.row{gap:48px}
  .figs-row{gap:0 48px}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .statrow > div:nth-child(3){padding-left:0;border-left:none}
  .statrow > div:nth-child(n+3){margin-top:24px;border-top:1px solid var(--rule-soft)}
}

/* tablet */
@media (max-width:960px){
  .wrap{padding:0 24px}
  .h1,.h1-sm{font-size:44px;line-height:1.12}
  .h1 br.b{display:none}
  .h2,.final .h2{font-size:34px;line-height:1.15}
  .hero,.intro{padding:48px 0 64px}
  .section,.final{padding:80px 0}
  .intro{padding-bottom:80px}
  .intro .page-block{margin-top:56px}
  .section .wrap > * + :not(.after-link){margin-top:56px}
  .sec-head{margin-bottom:40px}
  .case,.row{grid-template-columns:1fr;gap:28px}
  .row{gap:10px}
  .case{gap:28px;padding:44px 0}
  .marquee{--k:.9}
  .steps,.steps.four,.steps.two,.qs,.results,.kpis,.exs{grid-template-columns:1fr}
  .step,.step + .step,.qs li,.qs li + li,.kpis .stat,.kpis .stat + .stat,.exs li,.exs li + li{padding:28px 0;border-right:none;border-bottom:1px solid var(--rule)}
  .step:last-child,.qs li:last-child,.kpis .stat:last-child,.exs li:last-child{border-bottom:none}
  .res,.res:nth-child(2n){padding:36px 0 40px;border-left:none}
  .res + .res{border-top:1px solid var(--rule)}
  .step-n{font-size:36px;margin-bottom:16px}
  .foot{grid-template-columns:1fr;gap:16px}
  .figs-row{grid-template-columns:1fr}
  .booking{padding:var(--s3)}
  .bk-form{grid-template-columns:1fr}
  .bk-slots{grid-template-columns:repeat(3,1fr)}
}

/* below 768px every screen uses its 390px phone composition */
@media (max-width:767px){
  .s-large,.s-medium{--t:10px;--l:8px;--b:18px}
  .marquee{--k:.8;--gap:48px;padding:20px 0}
}

/* phone */
@media (max-width:600px){
  .wrap{padding:0 16px}
  /* a 390 screen on a 390 phone: the image fills the width exactly */
  .frame{margin-left:-16px;margin-right:-16px}
  .frame img{max-width:100vw}
  .statrow b{font-size:36px}
  .nav .wrap{min-height:64px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  .nav-logo img{height:26px}
  .nav-links{width:100%;order:3;gap:8px 20px;flex-wrap:wrap;font-size:14.5px}
  .nav-links .btn-quiet{margin-left:auto}
  .h1,.h1-sm{font-size:34px;line-height:1.15}
  .h2,.final .h2{font-size:30px}
  .h3{font-size:21px}
  .lede,.sec-intro,.final p{font-size:17px}
  .exs b{font-size:44px}
  .row .fig{font-size:36px}
  .row .row-q{font-size:19px}
  .figure > b{font-size:36px}
  .stat b,.case-main .stat b,.kpis .stat b{font-size:48px}
  .kpis.kpis-words .stat b{font-size:32px}
  .facts{flex-direction:column;gap:6px}
  .stats{gap:16px}
  .qs li,.step .lead{font-size:19px}
  .btn{white-space:normal;line-height:1.25}
  .quote-l{padding-left:20px}
  .quote-l blockquote p,.res-quote-lead blockquote p,.case-main .quote blockquote p{font-size:20px}
  .case-main{grid-template-columns:1fr;gap:10px}
  .cs-logo .logo-hm{height:36px}
  .case-logo .logo-hm{height:32px}
  .foot-links{gap:4px 20px}
  .foot-links li + li::before{content:none}
  .logo-wh{height:24px}
  .logo-ps{height:24px}
  .logo-cd{height:22px}
  .logo-ng{height:19px}
  .booking{padding:var(--s2);border-radius:8px}
  .bk-steps{gap:var(--s2);font-size:12px}
  .bk-days{gap:6px}
  .bk-day{min-height:64px;padding:4px 0}
  .bk-dn{font-size:17px}
  .bk-dw,.bk-dm{font-size:11px;letter-spacing:0}
  .bk-summary{flex-direction:column;align-items:flex-start}
}

/* with JS: collapse the phone nav into a menu button */
@media (max-width:600px){
  .js .menu-btn{display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:4px;padding:9px 12px;font-family:var(--head);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
  .js .menu-btn i{display:block;width:14px;height:1.5px;background:var(--ink);box-shadow:0 -4.5px 0 var(--ink),0 4.5px 0 var(--ink)}
  .js .nav-links{display:none;flex-direction:column;align-items:flex-start;gap:0;padding:8px 0 4px}
  .js .nav.open .nav-links{display:flex}
  .js .nav-links a:not(.btn){display:block;width:100%;padding:12px 0;border-top:1px solid var(--rule-soft);font-size:16px}
  .js .nav-links .btn-quiet{margin:12px 0 4px}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}
  /* logos stand still: one centred row that wraps to a second row if needed */
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto}
  .marquee-set{flex-wrap:wrap;justify-content:center;gap:24px 40px;padding-right:0;flex:1}
  .marquee-set[aria-hidden="true"]{display:none}
}

/* ---------- screenshot overlay (js/menu.js) ---------- */
html.lb-open,html.lb-open body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:72px 24px 24px;background:rgba(13,23,36,.86);cursor:pointer}
.lb[hidden]{display:none}
.lb-img{display:block;width:auto;height:auto;max-width:min(1168px,100%);max-height:100%;object-fit:contain}
.lb-x{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.24)}
.lb-x:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media (max-width:767px){.lb{padding:68px 8px 16px}.lb-img{max-width:min(390px,100%)}}