/* ==========================================================================
   Thrive at Work: editorial homepage (redesign.css)
   Display: Instrument Serif. Text/UI: Outfit. Labels: Outfit caps; numerals Outfit tabular figures (no monospace in the UI).
   Hidden-until-revealed states only apply under html.js (set in <head>), and a
   failsafe shows everything if redesign.js never runs (html.js without html.rd).
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Instrument Serif';src:url(/fonts/instrument-serif-400-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/fonts/instrument-serif-400-italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Outfit';src:url(/fonts/outfit-latin.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
/* Metric-matched fallbacks: until the web fonts arrive, local Georgia / Times / Arial are
   scaled to the same advance widths and vertical metrics, so lines keep their length and
   nothing reflows when the real faces swap in (measured in Chrome against each woff2).
   Text measures are set in em, not ch: ch follows the width of "0", which differs
   between Outfit and its fallback and would re-wrap paragraphs on the swap. */
@font-face{font-family:'Instrument Serif Fallback';src:local('Georgia');font-style:normal;font-weight:400;size-adjust:77.5%;ascent-override:127.7%;descent-override:40%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-style:italic;font-weight:400;size-adjust:80.1%;ascent-override:123.6%;descent-override:38.7%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif Fallback 2';src:local('Times New Roman'),local('TimesNewRomanPSMT');font-style:normal;font-weight:400;size-adjust:83.3%;ascent-override:118.8%;descent-override:37.2%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif Fallback 2';src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT');font-style:italic;font-weight:400;size-adjust:87.5%;ascent-override:113.1%;descent-override:35.4%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback';src:local('Arial'),local('ArialMT');font-weight:300 549;size-adjust:98.6%;ascent-override:101.4%;descent-override:26.4%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 700;size-adjust:91%;ascent-override:109.9%;descent-override:28.6%;line-gap-override:0%}
/* Instrument Serif's hyphen sits wide in running serif text: borrow Outfit's for it */
@font-face{font-family:'Serif Hyphen';src:url(/fonts/outfit-latin.woff2) format('woff2');font-weight:300 700;unicode-range:U+2D,U+2010-2011;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* grounds */
  --stone:#ece7df;
  --paper:#f6f3ee;
  --ink:#16181c;
  --night:#1b2238;
  /* secondary text: >= 7:1 on stone/paper, >= 7:1 on night/ink */
  --ink-2:#4a4c52;
  --paper-2:rgba(246,243,238,.74);
  /* hairlines */
  --line:rgba(22,24,28,.18);
  --line-d:rgba(246,243,238,.22);
  /* occasion colours (marks, petals, glow) */
  --coral:#e05a3f;
  --amber:#f0a13a;
  --teal:#17a398;
  --blue:#2a6fbb;
  --pink:#d4568f;
  /* coloured TEXT tier on light grounds: large display text only (>= 3:1) */
  --t-coral:#c14d36;
  --t-amber:#9a6725;
  --t-teal:#127f77;
  --t-blue:#2a6fbb;
  --t-pink:#b84b7c;
  /* coral for small text on paper/stone (5.4:1), e.g. a hover state */
  --t-coral-sm:#a9422e;

  --serif:'Instrument Serif','Instrument Serif Fallback','Instrument Serif Fallback 2',Georgia,'Times New Roman',serif;
  --sans:'Outfit','Outfit Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* the whole scale: three display steps (mega: h1 + manifesto only; display: every
     section heading and the experience rows; title), then body, small and label */
  --fs-mega:clamp(3.05rem,9vw,10.2rem);
  --fs-display:clamp(2.55rem,6vw,6.5rem);
  --fs-title:clamp(1.5rem,2.05vw,2.05rem);
  --fs-body:clamp(1.0625rem,1rem + .18vw,1.125rem);
  --fs-small:.9375rem;
  --fs-label:.8125rem;

  --gutter:max(20px,4vw);
  --max:1320px;
  --sec:clamp(104px,11vw,184px);
  --hd:84px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 12px)}
body{margin:0;background:var(--stone);color:var(--ink);font:400 var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
em{font-style:italic}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
::selection{background:var(--amber);color:var(--ink)}

.wrap{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.skip{position:fixed;left:16px;top:12px;z-index:300;padding:12px 18px;background:var(--ink);color:var(--paper);border-radius:999px;transform:translateY(-160%);transition:transform .3s var(--ease)}
.skip:focus-visible{transform:none;outline-color:var(--ink)}

.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Type primitives ---------- */
.label{display:flex;align-items:center;gap:.9em;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.label .n{font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.display{font:400 var(--fs-display)/.98 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.lede{font-size:var(--fs-body);color:var(--ink-2);max-width:30.2em;text-wrap:pretty}

/* ---------- Buttons and links ---------- */
/* primary: ink pill with arrow */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:52px;padding:0 1.6em;border-radius:999px;background:var(--ink);color:var(--paper);font:500 .9375rem/1 var(--sans);letter-spacing:.01em;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--night);border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease)}
.pill:hover::before{transform:none}
.pill .ic{transition:transform .5s var(--ease)}
.pill:hover .ic{transform:translateX(4px)}
.pill:active{transform:scale(.98)}
.pill--sm{min-height:44px;padding:0 1.25em;font-size:var(--fs-small)}
.pill--light{background:var(--paper);color:var(--ink)}
.pill--light::before{background:var(--amber)}
/* focus: the ring takes the pill's own fill (which already contrasts with the ground),
   not its text colour, and the hover fill rises as well */
.pill:focus-visible{outline-color:var(--ink)}
.pill--light:focus-visible{outline-color:var(--paper)}
.pill:focus-visible::before{transform:none}
.pill:focus-visible .ic{transform:translateX(4px)}

/* text link with hairline underline that redraws on hover */
.tlink{display:inline-flex;align-items:center;gap:.55em;min-height:44px;font-weight:500;font-size:.9375rem;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat;transition:background-size .6s var(--ease)}
.tlink:hover{background-size:0 1px;background-position:100% calc(100% - 9px)}
.tlink .ic{transition:transform .5s var(--ease)}
.tlink:hover .ic{transform:translate(2px,-2px)}

/* "• Enquire to host •" bullet-wrapped link */
.bullet{display:inline-flex;align-items:center;gap:1.1em;min-height:48px;padding:0 .2em;font:400 var(--fs-small)/1 var(--sans);letter-spacing:.01em}
.bullet::before,.bullet::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;transition:transform .6s var(--ease),background-color .4s}
.bullet:hover::before{transform:translateX(-8px);background:var(--coral)}
.bullet:hover::after{transform:translateX(8px);background:var(--amber)}
.bullet--lg{font-size:var(--fs-body)}

/* ---------- Header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.hd-in{height:100%;width:min(100% - 2 * var(--gutter),1440px);margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.hd-menu{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;font:500 var(--fs-small)/1 var(--sans);letter-spacing:.02em}
.hd-menu-ic{position:relative;width:24px;height:9px}
.hd-menu-ic i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.hd-menu-ic i:first-child{top:0}
.hd-menu-ic i:last-child{bottom:0;right:6px}
.hd-menu:hover .hd-menu-ic i:last-child{transform:translateX(6px)}
.hd-brand{position:relative;display:flex;align-items:center;min-height:44px}
/* --lw is the logotype's width. The reversed file (logotype-reversed.svg) is 2.4% wider with its
   letters 146 units further in, so it is drawn 1.024x wide and pulled left to sit exactly on the ink one */
.hd-brand,.menu-brand{--lw:189px}
.hd-brand img{width:var(--lw);max-width:none;height:auto;transition:opacity .45s var(--ease)}
.hd-brand .hd-logo--rev,.menu-brand .logo-rev{width:calc(var(--lw) * 1.024);margin-left:calc(var(--lw) * -.024)}
.hd-logo--rev{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0}
.hd-cta{justify-self:end}
.hd.is-scrolled{background:rgba(236,231,223,.9);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px)}
/* the bar takes the ground of the chapter beneath it (set by redesign.js from data-tone) */
.hd[data-tone="paper"].is-scrolled{background:rgba(246,243,238,.9)}
.hd[data-tone="night"],.hd[data-tone="ink"]{color:var(--paper)}
.hd[data-tone="night"].is-scrolled{background:rgba(27,34,56,.84);box-shadow:0 1px 0 var(--line-d)}
.hd[data-tone="ink"].is-scrolled{background:rgba(22,24,28,.84);box-shadow:0 1px 0 var(--line-d)}
.hd[data-tone="night"] .hd-logo,.hd[data-tone="ink"] .hd-logo{opacity:0}
.hd[data-tone="night"] .hd-logo--rev,.hd[data-tone="ink"] .hd-logo--rev{opacity:1}
.hd[data-tone="night"] .hd-cta,.hd[data-tone="ink"] .hd-cta{background:var(--paper);color:var(--ink)}
.hd[data-tone="night"] .hd-cta::before,.hd[data-tone="ink"] .hd-cta::before{background:var(--amber)}
.hd[data-tone="night"] .hd-cta:focus-visible,.hd[data-tone="ink"] .hd-cta:focus-visible{outline-color:var(--paper)}
.hd .pill{transition:color .45s var(--ease),background-color .45s var(--ease)}
/* no-JS: the overlay button gives way to a plain link to the footer's Explore list */
.hd-menu--nojs{display:none}
html:not(.js) .hd-menu--nojs{display:inline-flex}
html:not(.js) button.hd-menu{display:none}
html:not(.js) .hd{background:rgba(236,231,223,.95);box-shadow:0 1px 0 var(--line)}

/* ---------- Menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;padding:0 var(--gutter) 28px;background:var(--night);color:var(--paper);overflow-y:auto;overscroll-behavior:contain;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io)}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0)}
/* same grid as the header: Close in the Menu button's slot, logo centred, right slot empty */
.menu-top{flex:none;height:var(--hd);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:min(100%,1440px);margin-inline:auto}
.menu-brand{display:flex;align-items:center;min-height:44px}
.menu-brand img{max-width:none;height:auto}
.menu-close{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;font:500 var(--fs-small)/1 var(--sans);letter-spacing:.02em}
.menu-x{position:relative;width:24px;height:20px}
.menu-x::before,.menu-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg);transition:transform .5s var(--ease)}
.menu-x::after{transform:rotate(-45deg)}
.menu-close:hover .menu-x::before{transform:rotate(135deg)}
.menu-close:hover .menu-x::after{transform:rotate(45deg)}
.menu-nav{flex:1;display:flex;align-items:center;width:min(100%,1440px);margin-inline:auto;padding:24px 0}
.menu-nav ol{width:100%;border-top:1px solid var(--line-d)}
.menu-nav li{border-bottom:1px solid var(--line-d);overflow:hidden}
.menu-nav a{display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);padding:clamp(8px,1.4vh,16px) 0;font:400 var(--fs-display)/1.02 var(--serif);letter-spacing:-.015em;transform:translateY(105%);transition:transform .9s var(--ease) calc(.22s + var(--i) * .06s),color .3s}
.menu.is-open .menu-nav a{transform:none}
.menu-nav a:hover,.menu-nav a:focus-visible{color:var(--amber);font-style:italic}
/* the li clips overflow for the rise, so the ring is drawn inside the link */
.menu-nav a:focus-visible{outline-offset:-4px}
.menu-n{font:500 var(--fs-label)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--paper-2);min-width:2.5ch;transform:translateY(-.4em)}
.menu-foot{flex:none;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;width:min(100%,1440px);margin-inline:auto;font-size:var(--fs-small);color:var(--paper-2);opacity:0;transition:opacity .6s var(--ease) .5s}
.menu.is-open .menu-foot{opacity:1}
html.menu-open,html.menu-open body{overflow:hidden}

/* ---------- Preloader (built by redesign.js) ---------- */
html.intro body::before{content:"";position:fixed;inset:0;z-index:200;background:var(--night);animation:intro-safe .4s linear 3s forwards}
@keyframes intro-safe{to{opacity:0;visibility:hidden}}
.pre{position:fixed;inset:0;z-index:201;display:grid;place-items:center;padding:0 var(--gutter);background:var(--night);color:var(--paper);transition:transform .75s var(--ease-io)}
.pre svg{width:min(88vw,1240px);height:auto;overflow:visible;transition:transform .75s var(--ease-io)}
/* phase 1: the logo's five-colour ring spins open large at the centre; phase 2 (.is-set): it settles into
   the 'o' of 'work' as the letters rise. 3107,354 is the wordmark's centre, 4956.2,450.2 the ring's (logo units) */
.pre .wm-bloom{transform:translate(3107px,354px) scale(2.2) translate(-4956.2px,-450.2px);transition:transform .62s var(--ease-io)}
.pre.is-set .wm-bloom{transform:translate(4956.2px,450.2px) scale(1) translate(-4956.2px,-450.2px)}
/* phones: the wordmark is only ~340px wide, so the ring opens bigger (about 100px across) */
@media (max-width:760px){.pre .wm-bloom{transform:translate(3107px,354px) scale(3.6) translate(-4956.2px,-450.2px)}}
.pre .wm-letters{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease) .26s,transform .7s var(--ease) .22s}
.pre.is-set .wm-letters{opacity:1;transform:none}
.pre .petal{transform:scale(0) rotate(-60deg);transition:transform .52s cubic-bezier(.34,1.4,.5,1)}
.pre .petal:nth-child(2){transition-delay:.06s}
.pre .petal:nth-child(3){transition-delay:.12s}
.pre .petal:nth-child(4){transition-delay:.18s}
.pre .petal:nth-child(5){transition-delay:.24s}
.pre.is-on .petal{transform:none}
.pre.is-out{transform:translateY(-100%)}
.pre.is-out svg{transform:translateY(30vh)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:max(100svh,780px);display:grid;place-items:center;padding:calc(var(--hd) + 56px) var(--gutter) 120px;background:var(--stone);overflow:clip}
/* a fixed measure, so the centred block cannot re-centre when the fonts swap in */
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(100%,1200px)}
.hero-k{margin-bottom:clamp(22px,3.4vh,40px)}
.hero-h{font:400 var(--fs-mega)/.9 var(--serif);letter-spacing:-.025em}
.hero-h .ln{display:block;overflow:hidden;padding:0 .08em .1em;margin-bottom:-.1em}
.hero-h .ln>span{display:block}
.hero-h em{color:var(--t-coral);letter-spacing:-.02em}
.hero-h .stop{color:var(--ink);font-style:normal;margin-left:-.04em}
.hero-lede{max-width:26.2em;margin-top:clamp(26px,3.6vh,40px);color:var(--ink-2);text-wrap:balance}
.hero-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 30px;margin-top:clamp(26px,3.6vh,38px)}
.hero-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:22px;font-size:var(--fs-small);letter-spacing:.01em;color:var(--ink-2)}
.hero-assure li{display:inline-flex;align-items:center;gap:9px}
.hero-assure li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.hero-assure li+li::before{background:var(--blue)}

/* floating photographs */
.hero-photos{position:absolute;inset:0;z-index:1;pointer-events:none}
.hp{position:absolute;margin:0;will-change:transform}
.hp img{width:100%;height:100%;object-fit:cover;background:#d9d2c6}
/* depth of field: softly out of focus, but it keeps its colour and silhouette */
.hp.is-soft img{filter:blur(3px)}
/* edge photos bleed off the page (Monarque); the rest float clear of the copy */
.hp-1{width:clamp(170px,19.5vw,320px);aspect-ratio:3/2;top:14%;left:-1.8%}
.hp-2{width:clamp(124px,13.6vw,220px);aspect-ratio:3/4;top:9.5%;right:8%}
.hp-3{width:clamp(150px,16.5vw,270px);aspect-ratio:3/2;top:60.5%;left:1.5%}
/* the two lower photos keep ~30px clear of the assurance line (about 518px wide, centred) */
.hp-4{width:clamp(130px,14.5vw,236px);aspect-ratio:3/2;bottom:2.5%;left:clamp(9%,calc(50% - 289px - 14.5vw),14%)}
.hp-5{width:clamp(140px,16vw,260px);aspect-ratio:4/3;top:47%;right:-4.5%}
.hp-7{width:clamp(150px,16vw,256px);aspect-ratio:4/3;bottom:2%;right:clamp(9%,calc(50% - 289px - 16vw),13.5%)}
.hp-cap{position:absolute;display:flex;flex-direction:column;gap:3px;width:max-content;max-width:240px;font-size:var(--fs-small);line-height:1.35;color:var(--ink-2);text-wrap:pretty}
.hp-cap .c-top{font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hp-cap .c-main{font:400 var(--fs-title)/1 var(--serif);color:var(--ink);letter-spacing:-.01em;margin:2px 0}
/* the caption may run past the photo's right edge, never past the page's */
.hp-cap--now{top:calc(100% + 12px);left:0;display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;max-width:min(240px,calc(100% + 8vw - 16px))}
.hp-cap--now .c-sub{grid-column:2}
.hp-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(23,163,152,.5);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(23,163,152,0)}100%{box-shadow:0 0 0 0 rgba(23,163,152,0)}}
.hp-cap--menu{left:0;bottom:calc(100% + 12px)}

/* hero entrance. On a first visit the intro overlay covers the page, so the headline and
   the copy under it are set in place underneath it from the first paint (the largest
   elements must not wait for the intro: that is the page's LCP) and the overlay lifts onto
   a composed hero; only the photos compose, just before the lift. On later visits in the
   session (no intro) the headline lines rise and the copy fades up as before. */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.intro):not(.intro-h):not(.is-ready) .hero-h .ln>span{transform:translateY(112%)}
  html.js:not(.intro):not(.intro-h):not(.is-ready) :is(.hero-k,.hero-lede,.hero-cta,.hero-assure){opacity:0;transform:translateY(16px)}
}
html.js .hp{opacity:0}
html.js .hp img{transform:scale(1.18)}
html.is-ready .hero-h .ln>span{transition:transform 1.25s var(--ease)}
html.is-ready .hero-h .ln:nth-child(2)>span{transition-delay:.08s}
html.is-ready .hero-h .ln:nth-child(3)>span{transition-delay:.16s}
html.is-ready .hero-k,html.is-ready .hero-lede,html.is-ready .hero-cta,html.is-ready .hero-assure{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.is-ready .hero-lede{transition-delay:.32s}
html.is-ready .hero-cta{transition-delay:.42s}
html.is-ready .hero-assure{transition-delay:.52s}
html.is-ready .hp{opacity:1;transition:opacity 1.2s var(--ease) calc(.15s + var(--i,0) * .07s)}
html.is-ready .hp img{transform:none;transition:transform 1.8s var(--ease) calc(.15s + var(--i,0) * .07s)}
.hp-1{--i:0}.hp-2{--i:2}.hp-3{--i:4}.hp-4{--i:6}.hp-5{--i:1}.hp-7{--i:5}

/* ---------- Reveal on scroll ---------- */
html.js .rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
html.js .rv.is-in{opacity:1;transform:none}
/* word-by-word rise (redesign.js wraps each word; only when motion is allowed).
   The mask is padded below for descenders and open on the sides for italic overhang. */
.split .wd{display:inline-block;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em;clip-path:inset(-1em -.5em 0 -.5em)}
.split .wd>span{display:inline-block;transform:translateY(125%);transition:transform 1.15s var(--ease) calc(var(--d,0s) + var(--w,0) * 55ms)}
.split.is-in .wd>span{transform:none}
html.js .rv.split{opacity:1;transform:none}
/* failsafe: if redesign.js never runs, show everything after a beat */
html.js:not(.rd) .rv,html.js:not(.rd) .hero-h .ln>span,html.js:not(.rd) .hero-k,html.js:not(.rd) .hero-lede,html.js:not(.rd) .hero-cta,html.js:not(.rd) .hero-assure,html.js:not(.rd) .hp,html.js:not(.rd) .hp img{animation:failsafe .6s ease 2s forwards}
@keyframes failsafe{to{opacity:1;transform:none}}

/* ---------- Section heads ---------- */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px}
.sec-head .label{grid-column:1/-1}

/* ---------- Why (night manifesto) ---------- */
.why{background:var(--night);color:var(--paper);position:relative}
.why .label{color:var(--paper-2)}
.grow-stage{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sec) var(--gutter) 0}
.why-h{margin-top:28px;max-width:11em;font:400 var(--fs-mega)/.96 var(--serif);letter-spacing:-.022em;text-wrap:balance}
.why-h em{color:var(--amber)}
.grow-fig{position:relative;margin-top:clamp(48px,6vw,80px);width:min(420px,76vw);aspect-ratio:1/1;overflow:hidden}
.grow-fig :is(img,video){display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%}
/* night veil: deepens as the photo grows so the headline above it keeps its contrast */
/* .56 is the lightest veil that keeps the headline at 3.3:1 or better over the brightest 2% of the
   clip behind it (display-size text needs 3:1), so the people moving in the clip stay visible */
.grow-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,34,56,.28) 0%,rgba(27,34,56,.56) 16%,rgba(27,34,56,.56) 60%,rgba(27,34,56,.18) 100%);opacity:var(--gd,0)}

/* live mode (JS, motion allowed): pinned stage; the photo rises from below the
   headline and grows behind it over the whole pin (no dead scroll), stopping clear
   of the header, while the words stay legible. The label fades as the photo meets it. */
.grow.is-live{height:180vh}
.grow.is-live .grow-stage{position:sticky;top:0;height:100vh;height:100svh;justify-content:center;padding:0 var(--gutter);overflow:hidden}
.grow.is-live .why-k{position:absolute;z-index:3;top:calc(var(--hd) + 4vh);left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--paper);opacity:var(--ko,1)}
.grow.is-live .why-h{margin:0 0 4vh;position:relative;z-index:3;text-shadow:0 2px 36px rgba(12,16,30,.5)}
.grow.is-live .grow-fig{position:absolute;z-index:1;left:50%;top:calc(50% + var(--hd) / 2);margin:0;width:auto;height:min(100vh - var(--hd) - 7vh,64vw);height:min(100svh - var(--hd) - 7svh,64vw);transform:translate(-50%,calc(-50% + var(--gy,34vh))) scale(var(--gs,.2));will-change:transform}
.grow.is-live .grow-fig :is(img,video){transform:scale(calc(1.3 - (var(--gs,.2) - .2) * .375))}

/* cursor bubble (pointer: fine, built by JS) */
.bubble{position:absolute;left:0;top:0;z-index:5;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;display:grid;place-items:center;text-align:center;font:500 var(--fs-label)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:0 22px;color:var(--paper);
  /* a small rim-lit sphere: night core, blue glow at the edge (the closing sphere in miniature) */
  background:radial-gradient(closest-side,rgba(27,34,56,.72) 0%,rgba(29,40,72,.7) 52%,rgba(42,82,150,.78) 80%,rgba(126,170,228,.92) 96%,rgba(126,170,228,0) 100%);
  box-shadow:0 22px 60px rgba(6,10,24,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;scale:.4;transition:opacity .4s var(--ease),scale .5s var(--ease);pointer-events:none}
.bubble.is-on{opacity:1;scale:1;pointer-events:auto;cursor:pointer}
.grow-stage.has-bubble{cursor:none}

/* services row: subgrid rows, so every heading slot is as tall as the tallest heading
   and the four paragraphs start on one line (Monarque's row) */
.why-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0 clamp(24px,3vw,48px);padding:var(--sec) 0}
.why-item{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;border-top:1px solid var(--line-d);padding-top:22px}
.why-n{display:block;margin-bottom:clamp(24px,2.6vw,40px);font:500 var(--fs-label)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--paper-2)}
.why-item h3{font:400 var(--fs-title)/1.08 var(--serif);letter-spacing:-.01em;margin-bottom:16px;text-wrap:balance}
.why-item p{font-size:var(--fs-small);line-height:1.6;color:var(--paper-2);text-wrap:pretty}

/* ---------- How it works (staircase of steps) ---------- */
.how{background:var(--stone);padding:var(--sec) 0}
.how-head{align-items:end;margin-bottom:clamp(72px,9vw,136px)}
.how-head .display{grid-column:1/11}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,40px)}
.step{border-top:1px solid var(--line);padding-top:20px}
.step:nth-child(2){margin-top:clamp(0px,5vw,72px)}
.step:nth-child(3){margin-top:clamp(0px,10vw,144px)}
.step:nth-child(4){margin-top:clamp(0px,15vw,216px)}
.step-n{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:clamp(20px,2.4vw,32px)}
.step-k{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-label)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:.6em}
/* a miniature of the logo's ring: five segments at the logo's angles (65deg each, starting 3.5deg past
   twelve o'clock), the step's own segment in its colour (steps 1-4 = coral, amber, teal, blue, the ring's order) */
.step-k::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;--s1:var(--line);--s2:var(--line);--s3:var(--line);--s4:var(--line);--s5:var(--line);background:conic-gradient(from 3.5deg,var(--s1) 0 65deg,transparent 0 72deg,var(--s2) 0 137deg,transparent 0 144deg,var(--s3) 0 209deg,transparent 0 216deg,var(--s4) 0 281deg,transparent 0 288deg,var(--s5) 0 353deg,transparent 0);-webkit-mask:radial-gradient(circle closest-side,transparent 26%,#000 31%);mask:radial-gradient(circle closest-side,transparent 26%,#000 31%)}
.step:nth-child(1) .step-k::before{--s1:var(--c)}
.step:nth-child(2) .step-k::before{--s2:var(--c)}
.step:nth-child(3) .step-k::before{--s3:var(--c)}
.step:nth-child(4) .step-k::before{--s4:var(--c)}
.step-d{font:400 var(--fs-display)/.8 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.step h3{font:400 var(--fs-title)/1.08 var(--serif);letter-spacing:-.01em;margin-bottom:14px}
.step>p:not(.step-n){font-size:var(--fs-small);line-height:1.6;color:var(--ink-2);max-width:21em;text-wrap:pretty}

/* ---------- The menu (flagship experiences): the ink chapter in the middle of the page ---------- */
.wk{background:var(--ink);color:var(--paper);padding:var(--sec) 0;overflow-x:clip}
.wk .label,.wk .lede{color:var(--paper-2)}
.wk .display em{color:var(--amber)}
.wk-head .display{grid-column:1/11}
.wk-head .lede{grid-column:8/13}
.exp{margin-top:clamp(88px,10vw,168px)}
.exp-h a{display:flex;flex-wrap:wrap;align-items:center;column-gap:.2em;row-gap:.06em;padding-bottom:clamp(22px,2.6vw,40px);font:400 var(--fs-display)/1 var(--serif);letter-spacing:-.025em}
/* photo, second word and arrow travel together, so a wrap never strands the photo */
.exp-tail{display:inline-flex;align-items:center;column-gap:.2em;white-space:nowrap}
.exp-img{display:inline-block;width:1.5em;height:.74em;overflow:hidden;transform:translateY(-.03em)}
.exp-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
/* a typographic arrow: cap height, stroke matched to the serif's stems, a word gap away */
.exp-h .ic{width:.66em;height:.66em;stroke-width:2.3;margin-left:-.05em;transform:translateY(-.05em);transition:transform .7s var(--ease)}
.exp-h a:hover .exp-img img{transform:scale(1.14)}
.exp-h a:hover .ic,.exp-h a:focus-visible .ic{transform:translate(.08em,-.13em)}
.exp-h a:hover>span:not(.exp-img){font-style:italic}
.exp-rule{height:1px;background:var(--paper);opacity:.5;transform-origin:0 50%}
html.js .exp-rule.rv{opacity:0;transform:scaleX(0)}
html.js .exp-rule.rv.is-in{opacity:.5;transform:none;transition:transform 1.6s var(--ease),opacity .4s}
.exp-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(28px,4vw,72px);padding-top:clamp(36px,4vw,64px)}
.exp-meta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.exp-partner{font:400 var(--fs-title)/1.1 var(--serif);letter-spacing:-.01em}
.exp-partner b{font-weight:400;font-style:italic}
.exp-meta .tlink{margin-top:10px}
/* the strip bleeds off the right edge of the page */
.exp-strip{min-width:0;margin-right:calc((100vw - min(100vw - 2 * var(--gutter),var(--max))) / -2)}
.strip{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:0;scrollbar-width:none;cursor:grab;padding-right:var(--gutter)}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline-offset:6px}
.strip.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.strip.is-drag img{pointer-events:none}
.sh{flex:none;scroll-snap-align:start;overflow:hidden;background:#2a2c31}
.sh img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.sh:hover img{transform:scale(1.04)}
/* thumbnails unveil upward, one after another, when the strip scrolls in */
html.js .exp-strip.rv{transform:none}
html.js .exp-strip.rv .sh{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease) calc(.1s + var(--k,0) * .12s)}
html.js .exp-strip.rv.is-in .sh{clip-path:inset(0)}
html.js:not(.rd) .exp-strip .sh{clip-path:none}
.sh:nth-child(2){--k:1}.sh:nth-child(3){--k:2}.sh:nth-child(4){--k:3}
.sh-s{height:clamp(190px,20vw,290px)}
.sh-m{height:clamp(210px,23vw,330px)}
.sh-l{height:clamp(260px,30vw,430px)}
.r32{aspect-ratio:3/2}.r23{aspect-ratio:2/3}.r43{aspect-ratio:4/3}.r34{aspect-ratio:3/4}
.strip-bar{display:flex;align-items:center;gap:16px;margin-top:22px;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2)}
.strip-track{position:relative;width:132px;height:2px;border-radius:2px;background:var(--line-d);overflow:hidden}
.strip-track i{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:2px;background:var(--paper);transition:transform .15s linear}
.exp-strip.is-static .strip-bar{visibility:hidden}
.wk-more{display:flex;justify-content:center;margin-top:clamp(72px,8vw,120px)}
.wk-more .bullet{font:400 var(--fs-title)/1 var(--serif);gap:.7em}

/* ---------- Partner network ---------- */
.pt{background:var(--stone);padding:var(--sec) 0 0}
/* headline split across the measure: "The specialists ........ we bring together." */
.pt-h{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:.5em}
.pt-h>span:last-child{margin-left:auto}
.pt-head .lede{grid-column:8/13;margin-top:clamp(8px,1.4vw,20px)}
.pt-list{margin-top:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.pt-row{position:relative;display:grid;grid-template-columns:48px 132px minmax(0,1fr) minmax(0,1.45fr);align-items:center;gap:clamp(16px,2.8vw,48px);padding:26px 0;border-bottom:1px solid var(--line)}
.pt-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.pt-row:hover::after{transform:none}
.pt-n{font:500 var(--fs-label)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
/* each logo carries its own --k so wide and compact marks read at the same weight */
.pt-media{min-height:52px;display:flex;align-items:center}
.pt-media img{height:calc(34px * var(--k,1));width:auto;max-width:132px;object-fit:contain;object-position:left center;transition:transform .6s var(--ease)}
.pt-row:hover .pt-media img{transform:scale(1.06)}
/* Wee Xin Min: the same small footprint as the logos, cropped to her face */
.pt-face{display:block;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#d9d2c6}
/* the portrait is set at 160px wide and shifted so her head (about 31% / 67% of the
   frame) sits in the circle; the building behind her stays out of it */
.pt-media .pt-face img{width:160px;height:auto;max-width:none;object-fit:fill;transform:translate(-26px,-53px);transform-origin:50px 77px}
.pt-row:hover .pt-media .pt-face img{transform:translate(-26px,-53px) scale(1.06)}
.fm-mark{font:600 1.3rem/1 var(--sans);letter-spacing:.01em;color:var(--ink)}
.pt-name h3{font:400 var(--fs-title)/1.1 var(--serif);letter-spacing:-.01em;transition:transform .6s var(--ease)}
.pt-row:hover .pt-name h3{transform:translateX(6px)}
.pt-spec{margin-top:8px;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pt-desc{max-width:40.7em;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.pt-more{display:flex;justify-content:center;padding:clamp(48px,5vw,72px) 0 var(--sec)}
.pt-more .bullet{font:400 var(--fs-title)/1 var(--serif);gap:.7em}

/* logo marquee (Monarque "Collaborateurs"): an ink-to-stone duotone until hovered */
.mq{position:relative;margin-top:clamp(64px,7vw,112px)}
.mq-band{padding:clamp(32px,3.2vw,48px) 0;border-block:1px solid var(--line);overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq-set{display:flex;align-items:center;flex:none;gap:clamp(64px,7.5vw,128px);padding-right:clamp(64px,7.5vw,128px)}
.mq-set li{flex:none;display:flex;align-items:center;min-height:clamp(64px,6.6vw,96px)}
.mq-set img{height:calc(clamp(32px,3.3vw,48px) * var(--k,1));width:auto;filter:url(#duo);transition:opacity .4s var(--ease)}
.mq-set li:hover img{filter:none}
.mq-set .fm-mark{font-size:clamp(1.2rem,1.6vw,1.5rem)}
.fx-defs{position:absolute;width:0;height:0;overflow:hidden}
/* hover/focus pause the scroll unless the visitor has explicitly pressed play */
.mq:not(.is-playing):hover .mq-track,.mq:not(.is-playing):focus-within .mq-track,.mq.is-paused .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* without JS there is no pause control, so the logos sit still in a centred row */
html:not(.js) .mq-track{animation:none;width:auto;justify-content:center}
html:not(.js) .mq-set{flex-wrap:wrap;justify-content:center;row-gap:32px;padding-inline:var(--gutter)}
html:not(.js) .mq-set[aria-hidden="true"]{display:none}
/* the control sits just below the band's right end, outside the moving logos;
   it only appears once redesign.js has wired it */
.mq-toggle{position:absolute;right:var(--gutter);top:calc(100% + 6px);width:44px;height:44px;display:none;place-items:center;border-radius:50%;color:var(--ink-2);opacity:.8;transition:opacity .3s}
.mq.is-wired .mq-toggle{display:grid}
.mq-toggle:hover,.mq-toggle:focus-visible{opacity:1}
.mq-toggle span{width:9px;height:11px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.mq.is-paused .mq-toggle span{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}

/* ---------- Closing call to action (glow sphere) ---------- */
.cta{position:relative;isolation:isolate;overflow:clip;display:grid;place-items:center;min-height:min(112vw,1080px);padding:clamp(120px,14vw,200px) var(--gutter);background:var(--night);color:var(--paper);text-align:center}
/* a lit sphere, not a ring: night at the core warming continuously to an amber rim */
.cta-sphere{position:absolute;z-index:-1;left:50%;top:50%;width:min(104vw,1000px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translateY(var(--sy,0px)) scale(var(--ss,1));background:radial-gradient(closest-side,#1b2238 0%,#1d2440 30%,#2a2946 46%,#4b3149 60%,#86433f 73%,#cf643a 85%,#ee8f3f 93%,#f6b25a 99%,#f3a94f 100%);box-shadow:0 0 18px 1px rgba(246,178,90,.42),0 0 120px 6px rgba(240,140,58,.18),0 0 320px 60px rgba(224,90,63,.07);will-change:transform}
.cta-sphere::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 4%,rgba(255,214,150,.3),rgba(255,214,150,0) 30%);mix-blend-mode:screen}
.cta-in{display:flex;flex-direction:column;align-items:center;max-width:620px}
.cta .label{color:var(--paper-2)}
.cta-h{margin-top:22px;font:400 var(--fs-display)/.95 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.cta-h em{color:var(--amber)}
.cta-lede{margin-top:26px;max-width:28.9em;color:var(--paper-2);text-wrap:pretty}
.cta .bullet{margin-top:30px}

/* ---------- FAQ ---------- */
.faq{background:var(--paper);padding:var(--sec) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.faq-head{position:sticky;top:calc(var(--hd) + 40px);display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;text-align:left;font:400 var(--fs-title)/1.2 var(--serif);letter-spacing:-.005em;text-wrap:pretty;transition:color .3s}
.faq-q button:hover{color:var(--t-coral-sm)}
.faq-ic{position:relative;flex:none;width:18px;height:18px}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .5s var(--ease)}
.faq-ic::after{transform:rotate(90deg)}
.faq-item.is-open .faq-ic::after{transform:rotate(0)}
.faq-item.is-open .faq-ic::before{transform:rotate(180deg)}
.faq-a p{max-width:39.4em;padding:0 0 30px;color:var(--ink-2)}
/* collapse only once the script has wired the accordion's buttons (.is-wired) */
.faq-list.is-wired .faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--ease),visibility 0s linear .6s}
.faq-list.is-wired .faq-a>div{overflow:hidden}
.faq-list.is-wired .faq-item.is-open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--ease),visibility 0s}

/* guides and spaces index */
.idx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,104px);margin-top:clamp(96px,10vw,160px)}
.idx-h{margin-bottom:18px;font:400 var(--fs-title)/1.1 var(--serif);letter-spacing:-.01em}
.idx ul{border-top:1px solid var(--line)}
.idx a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body);font-weight:500}
.idx a span{transition:transform .5s var(--ease)}
.idx a .ic{color:var(--ink-2);transition:transform .5s var(--ease),color .3s}
.idx a:hover span{transform:translateX(8px)}
.idx a:hover .ic{transform:translate(2px,-2px) rotate(45deg);color:var(--t-coral)}

/* ---------- The crew: the queue above the footer, on every page but /crew and the Ads page ----------
   The art ships on a near-white ground; multiply drops it into the page colour so no box shows.
   After a light chapter it carries on that ground; after the night closing band it sits on paper. */
.crew-strip{background:var(--paper);padding:clamp(56px,7vw,96px) 0}
.ch--paper+.crew-strip,.faq+.crew-strip{padding-top:0}
.ch--stone+.crew-strip{background:var(--stone);padding-top:0}
.crew-strip-link{display:grid;justify-items:center;gap:6px}
.crew-strip img{width:100%;max-width:760px;mix-blend-mode:multiply}
.crew-strip-link:hover .tlink{background-size:0 1px;background-position:100% calc(100% - 9px)}
.crew-strip-link:hover .tlink .ic{transform:translate(2px,-2px)}

/* ---------- Footer ---------- */
.ft{background:var(--ink);color:var(--paper);padding:clamp(88px,9vw,140px) 0 26px;overflow:clip}
.ft-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:40px}
.ft-brand p{max-width:16.6em;font:400 var(--fs-title)/1.25 'Serif Hyphen',var(--serif);color:var(--paper);text-wrap:pretty}
.ft .label{color:var(--paper-2);margin-bottom:14px}
.ft-links li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--fs-small);color:var(--paper);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1px no-repeat;transition:background-size .5s var(--ease)}
.ft-links li a:hover{background-size:100% 1px}
.ft-links--two{display:grid;grid-template-columns:repeat(2,max-content);column-gap:48px}
.ft-mark{margin-top:clamp(88px,10vw,168px);padding-inline:var(--gutter);overflow:hidden}
.ft-mark .wm{width:100%;height:auto;color:var(--paper);transform:translateY(var(--fy,0%))}
.ft-mark .petal{transition:transform .9s cubic-bezier(.34,1.45,.5,1)}
html.js .ft-mark:not(.is-in) .petal{transform:scale(0) rotate(-50deg)}
.ft-mark.is-in .petal:nth-child(2){transition-delay:.08s}
.ft-mark.is-in .petal:nth-child(3){transition-delay:.16s}
.ft-mark.is-in .petal:nth-child(4){transition-delay:.24s}
.ft-mark.is-in .petal:nth-child(5){transition-delay:.32s}
html.js:not(.rd) .ft-mark .petal{transform:none}
.ft-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-d);font-size:var(--fs-small);color:var(--paper-2)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1199px){
  /* hero: keep the lower photos clear of the assurance lines on tablets */
  .hp-7{right:3%}
  .hp-4{left:6%}
  .hp-cap--menu{left:auto;right:0;align-items:flex-end;text-align:right}
}

@media (max-width:1100px){
  /* tablets: the two assurance lines stack, which keeps the lower photos' captions clear */
  .hero-assure{flex-direction:column;align-items:center}
  .why-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;row-gap:0}
  .why-item:nth-child(n+3){margin-top:56px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px}
  .step:nth-child(n){margin-top:0}
  .step:nth-child(even){margin-top:72px}
  .wk-head .lede,.pt-head .lede{grid-column:5/13}
  .pt-row{grid-template-columns:40px 116px minmax(0,1fr);grid-template-areas:"n m name" ". . desc"}
  .pt-n{grid-area:n}.pt-media{grid-area:m}.pt-name{grid-area:name}.pt-desc{grid-area:desc}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
}

@media (max-width:760px){
  :root{--hd:64px}
  .hd-in{grid-template-columns:auto 1fr auto;gap:10px}
  .hd-brand{order:1}
  .hd-cta{order:2}
  .hd-menu{order:3;justify-self:end;justify-content:center}
  .hd-menu-t,.menu-close-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hd-brand,.menu-brand{--lw:136px}
  .pill--sm{padding:0 1em;font-size:.8125rem}
  /* overlay top mirrors the phone header: logo left, close where the menu icon was */
  .menu-top{grid-template-columns:1fr auto;gap:10px}
  .menu-brand{order:1;justify-self:start}
  .menu-close{order:2;justify-self:end;justify-content:center}

  /* hero: two photos above the headline, one (with caption) below. The headline is
     the largest type on the phone. */
  .hero{min-height:0;display:block;padding:calc(var(--hd) + 66vw) var(--gutter) calc(34.5vw + 128px)}
  .hero-h{font-size:clamp(3.2rem,14.5vw,4.6rem)}
  .hero-h .ln{padding-inline:.04em}
  .hero-assure{flex-direction:column;align-items:center}
  .hp-3,.hp-4,.hp-5{display:none}
  .hp-1{width:46vw;top:calc(var(--hd) + 6vw);left:var(--gutter)}
  .hp-2{width:31vw;top:calc(var(--hd) + 14vw);right:var(--gutter)}
  .hp-7{width:40vw;bottom:40px;right:var(--gutter)}
  .hp-cap--menu{left:auto;right:calc(100% + 12px);bottom:0;align-items:flex-end;text-align:right}
  .hp-cap--now{top:auto;bottom:0;left:auto;right:calc(100% + 12px);grid-template-columns:auto auto;justify-content:end;justify-items:end;text-align:right;row-gap:3px}
  .hp-cap--now .c-sub{grid-column:1/-1}
  .hp-cap{max-width:calc(100vw - 40vw - 2 * var(--gutter) - 12px);font-size:var(--fs-label)}
  .hp-cap--now{max-width:calc(100vw - 31vw - 2 * var(--gutter) - 12px)}
  .hp-cap .c-top{letter-spacing:.07em}

  /* phones: a portrait frame on the middle of the group, and a shorter pin; the photo starts at
     half size (redesign.js) instead of a thumbnail, so the screen never sits mostly empty */
  .grow-fig{aspect-ratio:3/4}
  .grow.is-live{height:150vh}
  .grow.is-live .grow-fig{height:min(80vh,128vw)}
  .why-list{grid-template-columns:1fr}
  .why-item{display:block}
  .why-item:nth-child(n+2){margin-top:44px}
  .why-n{margin-bottom:22px}

  .how-head .display,.wk-head .display,.wk-head .lede,.pt-head .lede{grid-column:1/-1}
  .pt-h{display:block}
  .steps{grid-template-columns:1fr;row-gap:48px}
  .step:nth-child(even){margin-top:0}

  .exp-body{grid-template-columns:1fr}
  .exp-strip{margin-right:calc(var(--gutter) * -1)}
  .sh-s{height:200px}.sh-m{height:220px}.sh-l{height:280px}

  .pt-row{grid-template-columns:32px minmax(0,1fr);grid-template-areas:"n m" ". name" ". desc";row-gap:14px;padding:28px 0}
  .pt-n{align-self:start;padding-top:16px}

  /* phones: the whole sphere fits the width, its top arc rises above the copy and the
     lower half settles into the night, so the long lede always sits on dark ground */
  .cta{min-height:0;display:block;padding:calc(var(--sph) * .5 - 70px) var(--gutter) 120px;--sph:118vw}
  .cta-in{margin-inline:auto}
  .cta-lede{color:var(--paper)}
  .cta-sphere{top:42px;width:var(--sph);transform:translateX(-50%) translateY(var(--sy,0px)) scale(var(--ss,1));-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.35) 66%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.35) 66%,transparent 80%)}

  .faq-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .faq-q button{padding:22px 0}
  .idx{grid-template-columns:1fr;gap:56px}

  .ft-top{grid-template-columns:1fr;gap:44px}
  .ft-base{flex-direction:column}
}

/* small phones: the Book pill keeps 13px type (the readable floor), so the logo gives way */
@media (max-width:380px){
  .hd-cta{padding:0 .75em;font-size:.8125rem}
  .hd-brand,.menu-brand{--lw:112px}
}
/* 320-px phones: logo, pill and menu button only just share the row */
@media (max-width:350px){
  .hd-in{gap:6px}
  .hd-cta{padding:0 .6em}
  .hd-brand,.menu-brand{--lw:92px}
}

/* ==========================================================================
   Reduced motion: no preloader, parallax, growth or marquee; everything shown
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.js .rv,html.js .hero-h .ln>span,html.js .hero-k,html.js .hero-lede,html.js .hero-cta,html.js .hero-assure,html.js .hp,html.js .hp img,html.js .exp-rule.rv{opacity:1;transform:none}
  html.js .exp-rule.rv{opacity:.5}
  html.js .ft-mark .petal{transform:none}
  html.js .exp-strip .sh{clip-path:none}
  .hp{transform:none!important}
  .mq-track{animation:none;width:auto;justify-content:center}
  .mq-set{flex-wrap:wrap;justify-content:center;row-gap:32px;padding-inline:var(--gutter)}
  .mq-set[aria-hidden="true"],.mq.is-wired .mq-toggle{display:none}
  .hp-dot{animation:none}
  .menu{clip-path:none}
  .menu-nav a{transform:none}
}