/* Mustang Group: shared styles for every page.
   Tokens first, then type, surfaces, the header, the menu, the pill, and the
   reveal hooks the motion engine (js/site.js) drives. Home-only scenes live in
   css/home.css. */

/* the display and script faces (IvyPresto Display, Seaweed Script) come from
   the Adobe Fonts kit linked in each page's <head>; Hubot Sans is self-hosted */
@font-face{
  font-family:"Hubot Sans";
  src:url("../fonts/hubot-sans.woff2") format("woff2");
  font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Hubot Sans";
  src:url("../fonts/hubot-sans-italic.woff2") format("woff2");
  font-weight:200 900;font-stretch:75% 125%;font-style:italic;font-display:swap;
}

:root{
  /* palette: blue-led, the group's own (not a venue's) */
  --sky:#A8CBDD;
  --sky-deep:#8FB9CF;
  --marina:#2D6F8E;
  --ink:#10233B;
  --night:#0A1626;
  --peach:#F0AE8B;
  --claret:#5A1426;
  --claret-deep:#3E0C1A;
  --terracotta:#B24A30;
  --sun:#F2C14E;
  --bar:#1D0909;   /* Grumpy Monkey: the near-black red of the bar at night */
  --stone:#F4EFE7;
  --white:#FFFFFF;

  /* type */
  --f-display:"ivypresto-display","Didot","Bodoni 72",Georgia,serif;
  --f-script:"seaweed-script-pro","Snell Roundhand",cursive;
  --f-text:"Hubot Sans","Helvetica Neue",Arial,sans-serif;

  /* display and script tuning, measured for IvyPresto Display 700 and Seaweed
     Script: size (--ds, --ss) matches the widths the layout was drawn around,
     --dbx and --dcap put the hero word's baseline on the fold and the script
     on its cap line */
  --ds:.8; --dw:700; --dlh:1; --dst:normal; --dbx:.045em; --dcap:.832;
  --ss:.812; --sw:400; --sst:normal;
  --fs-mega:calc(clamp(5.5rem,21vw,24rem) * var(--ds));
  --fs-d1:calc(clamp(3.4rem,10.5vw,11.5rem) * var(--ds));
  --fs-d2:calc(clamp(2.6rem,6.6vw,7.25rem) * var(--ds));
  --fs-d3:calc(clamp(2rem,3.9vw,4.25rem) * var(--ds));
  --fs-script:calc(clamp(2.6rem,5.4vw,6rem) * var(--ss));
  --fs-lead:clamp(1.15rem,1rem + .55vw,1.5rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --fs-small:.875rem;
  --fs-label:.75rem;

  /* space */
  --gutter:clamp(16px,4vw,56px);
  --section:clamp(96px,16vh,200px);
  --radius:2px;

  /* motion: one vocabulary, shared by CSS and GSAP (js/site.js registers the
     same curves as named CustomEases) */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-in:cubic-bezier(.55,0,.8,.2);
  --t-s:.45s;
  --t-m:.9s;
  --t-l:1.3s;

  --header-h:clamp(64px,8vh,88px);

  color-scheme:light;
}

/* theme grounds: every section declares one; the header reads it */
[data-theme]{ background:var(--bg); color:var(--fg); }
/* Mustang's own peach (the MG mark's colour) grounds the group's sections;
   the venue chapters keep their venues' colours. #323E48 is the old site's charcoal */
[data-theme="peach"]{ --bg:var(--peach); --fg:var(--ink); --fg-soft:#323E48; --accent:var(--claret); --line:rgba(16,35,59,.24); }
[data-theme="sky"]{ --bg:var(--sky); --fg:var(--ink); --fg-soft:#27425E; --accent:var(--marina); --line:rgba(16,35,59,.22); }
[data-theme="stone"]{ --bg:var(--stone); --fg:var(--ink); --fg-soft:#3D4F63; --accent:var(--terracotta); --line:rgba(16,35,59,.16); }
[data-theme="marina"]{ --bg:var(--marina); --fg:var(--white); --fg-soft:#EEF5F8; --accent:var(--stone); --line:rgba(255,255,255,.28); }
[data-theme="ink"]{ --bg:var(--ink); --fg:var(--stone); --fg-soft:#B8C7D6; --accent:var(--peach); --line:rgba(244,239,231,.2); }
[data-theme="night"]{ --bg:var(--night); --fg:var(--stone); --fg-soft:#A9B8C8; --accent:var(--peach); --line:rgba(244,239,231,.16); }
[data-theme="claret"]{ --bg:var(--claret); --fg:var(--stone); --fg-soft:#E4C9CF; --accent:var(--peach); --line:rgba(244,239,231,.22); }
[data-theme="sun"]{ --bg:var(--sun); --fg:var(--ink); --fg-soft:#3A3620; --accent:var(--ink); --line:rgba(16,35,59,.22); }
[data-theme="bar"]{ --bg:var(--bar); --fg:var(--stone); --fg-soft:#E2CBC6; --accent:var(--sun); --line:rgba(244,239,231,.18); }
[data-theme="photo"]{ --bg:var(--ink); --fg:var(--white); --fg-soft:rgba(255,255,255,.86); --accent:var(--white); --line:rgba(255,255,255,.3); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--sky);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--fs-body);
  line-height:1.55;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }

/* browser surfaces, themed rather than left at defaults */
::selection{ background:var(--peach); color:var(--ink); }
:root{ caret-color:var(--marina); accent-color:var(--marina); }
:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:1px; }
html{ scrollbar-color:var(--marina) transparent; scrollbar-width:thin; }

.skip{
  position:fixed;left:var(--gutter);top:12px;z-index:200;
  padding:10px 16px;background:var(--ink);color:var(--stone);
  transform:translateY(-160%);transition:transform var(--t-s) var(--ease-out);
}
.skip:focus{ transform:none; }

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- type ---------- */
.display,.d1,.d2,.d3{
  font-family:var(--f-display);
  font-weight:var(--dw);
  font-stretch:var(--dst);
  text-transform:uppercase;
  line-height:calc(.86 * var(--dlh));
  letter-spacing:-.012em;
  font-kerning:normal;
}
.d1{ font-size:var(--fs-d1); }
.d2{ font-size:var(--fs-d2); line-height:calc(.9 * var(--dlh)); }
.d3{ font-size:var(--fs-d3); line-height:calc(.94 * var(--dlh)); letter-spacing:0; }
.script{
  font-family:var(--f-script);
  font-weight:var(--sw);
  font-style:var(--sst);
  font-size:var(--fs-script);
  line-height:1;
  text-transform:none;
  letter-spacing:0;
}
.lead{ font-size:var(--fs-lead); line-height:1.45; max-width:34ch; text-wrap:pretty; }
.prose{ max-width:62ch; }
.prose p+p{ margin-top:1em; }
.label{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-stretch:88%;
}
.soft{ color:var(--fg-soft); }
.nowrap{ white-space:nowrap; }
/* phone-only and desktop-only pieces (the phone is laid out as its own layer, see css/home-phone.css) */
@media (min-width:900px){ .ph-only{ display:none!important; } }
@media (max-width:899px){ .dt-only{ display:none!important; } }

/* text links that carry an action */
.link{
  display:inline-flex;align-items:center;gap:.6em;
  min-height:44px;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-stretch:88%;
  text-decoration:none;
  position:relative;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;
  background:currentColor;transform-origin:right;transform:scaleX(0);
  transition:transform var(--t-m) var(--ease-out);
}
.link:hover::after,.link:focus-visible::after{ transform-origin:left; transform:scaleX(1); }
.link .arrow{ width:1.1em;height:1.1em;flex:none;transition:transform var(--t-s) var(--ease-out); }
.link:hover .arrow{ transform:translateX(3px); }

/* the rolling label: two stacked copies swap on hover */
.roll{ display:inline-grid; overflow:hidden; vertical-align:top; }
.roll>span{ grid-area:1/1; transition:transform var(--t-m) var(--ease-out); }
.roll>span+span{ transform:translateY(105%); }
a:hover .roll>span:first-child,button:hover .roll>span:first-child{ transform:translateY(-105%); }
a:hover .roll>span+span,button:hover .roll>span+span{ transform:none; }

/* the round button */
.btn{
  --b-bg:var(--ink);--b-fg:var(--stone);
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:52px;padding:0 1.6em;border-radius:999px;
  background:var(--b-bg);color:var(--b-fg);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-stretch:88%;
  text-decoration:none;
  transition:background-color var(--t-s) var(--ease-out),color var(--t-s) var(--ease-out);
}
.btn--line{ --b-bg:transparent;--b-fg:currentColor; box-shadow:inset 0 0 0 1px currentColor; }
.btn--line:hover{ --b-bg:var(--fg,var(--ink)); --b-fg:var(--bg,var(--stone)); }

/* ---------- layout ---------- */
.wrap{ padding-inline:var(--gutter); }
.section{ position:relative; padding-block:var(--section); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- media ---------- */
.frame{ position:relative; overflow:hidden; }
.frame>img,.frame>video,.frame>picture,.frame>picture>img{
  width:100%;height:100%;object-fit:cover;
}
.fill{ position:absolute;inset:0; }
.fill>img,.fill>video,.fill>picture>img{ width:100%;height:100%;object-fit:cover; }

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--gutter);
  color:var(--h-fg,var(--white));
  transition:color var(--t-s) var(--ease-out);
  pointer-events:none;
}
.header>*{ pointer-events:auto; }
.header{ transition:color var(--t-s) var(--ease-out),transform var(--t-m) var(--ease-out),background-color var(--t-s) var(--ease-out); }
.header.is-solid{ background:var(--h-bg,transparent); }
.header.is-away{ transform:translateY(-100%); }
html.nav-open .header{ transform:none;background:transparent; }
.header[data-on="sky"]{ --h-bg:var(--sky); }
.header[data-on="peach"]{ --h-bg:var(--peach); }
.header[data-on="stone"]{ --h-bg:var(--stone); }
.header[data-on="sun"]{ --h-bg:var(--sun); }
.header[data-on="bar"]{ --h-bg:var(--bar); }
.header[data-on="marina"]{ --h-bg:var(--marina); }
.header[data-on="ink"]{ --h-bg:var(--ink); }
.header[data-on="night"]{ --h-bg:var(--night); }
.header[data-on="claret"]{ --h-bg:var(--claret); }
.header[data-on="photo"]{ --h-bg:rgba(16,35,59,.82); }
.header[data-on="photo"]:not(.is-solid){ text-shadow:0 1px 14px rgba(10,22,38,.45); }
.header[data-on="photo"]:not(.is-solid) .brand svg{ filter:drop-shadow(0 1px 10px rgba(10,22,38,.4)); }
.header[data-on="sky"],.header[data-on="peach"],.header[data-on="stone"],.header[data-on="sun"]{ --h-fg:var(--ink); }
.header[data-on="marina"],.header[data-on="ink"],.header[data-on="night"],.header[data-on="claret"],.header[data-on="bar"],.header[data-on="photo"]{ --h-fg:var(--stone); }
.brand{ display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px; }
.brand svg{ width:clamp(46px,4.2vw,58px);height:auto;fill:currentColor; }
.brand-name{
  display:flex;flex-direction:column;
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-stretch:85%;line-height:1.25;
}
.header-links{ display:flex;align-items:center;gap:clamp(18px,2.4vw,36px); }
.header-links .link{ display:none; }
@media (min-width:900px){ .header-links .link{ display:inline-flex; } }
/* phones keep one header link: Book, from the very first screen */
@media (max-width:899px){
  .header-links .link[data-open-chooser]{ display:inline-flex;transition:opacity var(--t-s) var(--ease-out); }
  /* once the pill is up it is the one Book button; the header's steps back */
  html.pill-on:not(.pill-quiet) .header-links .link[data-open-chooser]{ opacity:0;pointer-events:none; }
}
.menu-btn{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-stretch:88%;
}
.menu-bars{ position:relative;width:30px;height:12px; }
.menu-bars::before,.menu-bars::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform var(--t-m) var(--ease-in-out);
}
.menu-bars::before{ top:0; }
.menu-bars::after{ bottom:0; }
html.nav-open .menu-bars::before{ transform:translateY(5.25px) rotate(45deg); }
html.nav-open .menu-bars::after{ transform:translateY(-5.25px) rotate(-45deg); }
html.nav-open .header{ --h-fg:var(--stone); }
/* the menu lists these itself; the header copies step back while it is open */
.header-links > a{ transition:opacity var(--t-s) var(--ease-out); }
html.nav-open .header-links > a{ opacity:0;pointer-events:none; }

/* ---------- the menu: the wave flood (Kirsty's favourite, kept) ---------- */
.takeover{
  position:fixed;inset:0;z-index:50;
  color:var(--stone);
  overflow:hidden;
}
.takeover[hidden]{ display:none; }
.takeover:focus{ outline:none; }
.tk-flood{ position:absolute;inset:0;overflow:hidden;pointer-events:none; }
.tk-wave{
  position:absolute;left:0;right:0;top:0;height:100%;
  transform:translateY(calc(100% + 130px));
  will-change:transform;
}
.tk-fill{ position:absolute;left:0;right:0;top:0;height:300%;background:currentColor; }
.tk-crest{ position:absolute;bottom:calc(100% - 1px);display:block;fill:currentColor; }
.tk-wave--1{ color:var(--sky);    --tk-in:-16%; }
.tk-wave--2{ color:var(--marina); --tk-in:-12%; }
.tk-wave--3{ color:var(--ink);    --tk-in:-2px; }
.tk-wave--1 .tk-crest{ left:-24%;width:148%;height:clamp(34px,7.6vw,118px); }
.tk-wave--2 .tk-crest{ left:-9%; width:126%;height:clamp(30px,6.4vw,100px); }
.tk-wave--3 .tk-crest{ left:-16%;width:132%;height:clamp(28px,6vw,94px); }
.tk-mark{
  position:absolute;right:-6vw;bottom:-8vh;width:min(78vw,1100px);
  fill:var(--stone);opacity:0;pointer-events:none;
  transition:opacity 900ms var(--ease-out) 380ms;
}
.takeover.is-in .tk-mark{ opacity:.05; }
.takeover-in{
  position:relative;z-index:1;height:100%;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--header-h) + clamp(24px,6vh,64px)) var(--gutter) clamp(32px,6vh,64px);
  display:grid;gap:clamp(40px,6vh,72px);align-content:start;
}
@media (min-width:900px){
  .takeover-in{ grid-template-columns:1.25fr 1fr; align-content:center; }
}
.tk-pages a{
  display:block;
  font-family:var(--f-display);font-weight:var(--dw);font-stretch:var(--dst);text-transform:uppercase;
  font-size:calc(clamp(2.6rem,7vw,6.5rem) * var(--ds));line-height:calc(.98 * var(--dlh));
  text-decoration:none;
}
.tk-pages a:hover,.tk-pages a[aria-current="page"]{ color:var(--peach); }
.tk-side .label{ color:#B8C7D6; margin-bottom:16px; }
.tk-venues li+li{ border-top:1px solid rgba(244,239,231,.14); }
.tk-venues a{ display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 0;text-decoration:none;min-height:44px; }
.tk-venues .where{ color:#B8C7D6;font-size:var(--fs-small); }
.tk-venues a:hover .name{ color:var(--peach); }
.tk-item{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  .tk-wave{ transition:transform 520ms var(--ease-out); }
  .tk-wave--2{ transition-duration:660ms;transition-delay:45ms; }
  .tk-wave--3{ transition-duration:660ms;transition-delay:110ms; }
  .takeover.is-in .tk-wave{ transform:translateY(var(--tk-in)); }
  .takeover.is-closing .tk-wave--3{ transition:transform 470ms cubic-bezier(.25,1,.5,1);transition-delay:0ms; }
  .takeover.is-closing .tk-wave--1,.takeover.is-closing .tk-wave--2{ transition:none; }
  .takeover .tk-item{
    opacity:0;transform:translateY(14px);
    transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);
    transition-delay:var(--d,0ms);
  }
  .takeover.is-in .tk-item{ opacity:1;transform:none; }
  .takeover.is-closing .tk-item{ transition-duration:150ms;transition-delay:0ms; }
}
@media (prefers-reduced-motion:reduce){
  .tk-flood{ display:none; }
  .takeover{ background:var(--ink); }
}

/* ---------- the floating pill ---------- */
.pill{
  position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:55;
  display:flex;align-items:center;gap:4px;padding:5px;
  background:var(--ink);color:var(--stone);border-radius:999px;
  box-shadow:0 10px 30px -12px rgba(10,22,38,.55);
  transform:translate(-50%,calc(100% + 24px));
  transition:transform var(--t-m) var(--ease-out);
}
.pill.is-on{ transform:translate(-50%,0); }
.pill a,.pill button{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-stretch:85%;
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--t-s) var(--ease-out),color var(--t-s) var(--ease-out);
}
.pill .primary{ background:var(--peach);color:var(--ink); }
.pill a:hover,.pill button:not(.primary):hover{ background:rgba(244,239,231,.12); }
.pill .primary:hover{ background:var(--stone); }
@media (max-width:420px){ .pill a,.pill button{ padding:0 12px; letter-spacing:.1em; } }
html.nav-open .pill,html.pill-hide .pill,html.pill-quiet .pill{ transform:translate(-50%,calc(100% + 24px)); }

/* ---------- the venue chooser ---------- */
.chooser{
  width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);
  padding:0;border:0;border-radius:4px;
  background:var(--stone);color:var(--ink);
  box-shadow:0 30px 80px -30px rgba(10,22,38,.6);
}
.chooser::backdrop{ background:rgba(10,22,38,.55); }
.chooser-in{ padding:clamp(24px,4vw,40px); }
.chooser h2{ margin-bottom:8px; }
.chooser h2:focus{ outline:none; }   /* the sheet opens with focus here, so reading starts at its title */
.chooser p{ color:#3D4F63;margin-bottom:20px; }
.chooser li+li{ border-top:1px solid rgba(16,35,59,.14); }
.chooser .ch-book{ display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;text-decoration:none; }
.chooser .ch-book:hover .name{ color:var(--marina); }
.chooser .where{ font-size:var(--fs-small);color:#3D4F63; }
.chooser .close{ position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center; }
@media (prefers-reduced-motion:no-preference){
  .chooser[open]{ animation:chooser-in var(--t-m) var(--ease-out); }
  @keyframes chooser-in{ from{ opacity:0; transform:translateY(24px) scale(.98); } }
}
/* phones: the chooser is a sheet from the bottom edge, where the thumb already
   is, and every venue carries all three things a phone is for: book, call, go */
.sheet-grip{ display:none; }
@media (max-width:899px){
  .chooser{
    width:100%;max-width:none;max-height:min(88svh,760px);margin:auto 0 0;
    border-radius:22px 22px 0 0;overflow:auto;overscroll-behavior:contain;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -24px 60px -20px rgba(10,22,38,.55);
    transform:translateY(var(--drag,0px));
  }
  .chooser.is-dragging{ transition:none; }
  .chooser-in{ padding:34px var(--gutter) 20px; }
  .chooser p{ margin-bottom:10px; }
  .sheet-grip{ display:block;position:absolute;top:0;left:50%;width:120px;height:30px;margin-left:-60px;touch-action:none;cursor:grab; }
  .sheet-grip::before{ content:"";position:absolute;left:50%;top:10px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(16,35,59,.28); }
  .chooser li{ display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 16px;padding:10px 0 6px; }
  .chooser .ch-book{ display:contents; }
  .chooser .ch-book > span:first-child{ display:grid;gap:2px; }
  .chooser .ch-book .name{ font-family:var(--f-display);font-weight:var(--dw);text-transform:uppercase;font-size:calc(1.5rem * var(--ds));line-height:1; }
  .chooser .ch-book .label{ display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--stone); }
  .chooser .ch-more{ grid-column:1 / -1;display:flex;gap:22px;margin:0; }
  .chooser .ch-more a{ display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-stretch:88%;color:var(--marina);text-underline-offset:.3em; }
  .chooser .close{ top:10px;right:8px; }
  @media (prefers-reduced-motion:no-preference){
    .chooser[open]{ animation:sheet-in 560ms var(--ease-out); }
    .chooser.is-closing{ transform:translateY(calc(100% + 24px));transition:transform 320ms var(--ease-in); }
    .chooser[open]::backdrop{ animation:veil-in 400ms var(--ease-out); }
    @keyframes sheet-in{ from{ transform:translateY(100%); } }
    @keyframes veil-in{ from{ opacity:0; } }
  }
}

/* ---------- reveal hooks (the engine hides nothing until it has run) ---------- */
.js [data-reveal="fade"]{ opacity:0; }
.js [data-reveal="rise"]{ opacity:0; transform:translateY(40px); }
.split-line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.split-inner{ display:block; }

/* ---------- footer ---------- */
.foot{ position:relative; overflow:hidden; }
.foot-mark{
  position:absolute;left:50%;bottom:-6%;width:min(118vw,1800px);
  transform:translateX(-50%);fill:var(--stone);opacity:.06;pointer-events:none;
}
.foot-grid{ position:relative;display:grid;gap:40px;padding-block:clamp(72px,12vh,140px) 32px; }
@media (min-width:900px){ .foot-grid{ grid-template-columns:1.2fr 1fr 1fr;align-items:end; } }
/* phones: the footer is the office's details and nothing else, so it stays short */
@media (max-width:899px){ .foot-grid{ gap:14px;padding-block:56px 28px; } .foot h2{ margin-bottom:8px; } }
.foot h2{ margin-bottom:20px; }
.foot li{ padding:6px 0; }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--peach); }
.foot-base{
  position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-block:24px calc(24px + 76px);border-top:1px solid var(--line);
  font-size:var(--fs-small);color:var(--fg-soft);
}
.foot-links{ display:flex;flex-wrap:wrap;gap:4px 24px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; }
  .js [data-reveal]{ opacity:1!important; transform:none!important; }
}