/* ==========================================================================
   Gosh Technologies — shared stylesheet
   Palette: graphite/ink base, warm gold signal accent, off-white surfaces.
   Type: Sora (display) / Plus Jakarta Sans (body, labels and data)
   ========================================================================== */

:root{
  /* surfaces */
  --ink:      #0b0d10;   /* near-black, cool */
  --ink-2:    #14181d;   /* raised dark surface */
  --ink-3:    #1c2127;   /* dark hairline fill */
  --paper:    #ffffff;
  --paper-2:  #f6f7f8;   /* alt band */
  --paper-3:  #eef0f2;   /* deeper alt */

  /* lines */
  --line:     #e2e5e9;
  --line-2:   #cfd4da;
  --line-d:   rgba(255,255,255,.10);
  --line-d2:  rgba(255,255,255,.18);

  /* text */
  --tx:       #0b0d10;
  --tx-mute:  #5c636d;
  --tx-faint: #8a919b;
  --tx-d:     #f2f3f4;
  --tx-d-mute:#9aa2ac;
  --tx-d-faint:#6d757f;

  /* accent — warm signal gold */
  --gold:     #e8b23c;   /* on dark only */
  --gold-2:   #f5c65e;
  --gold-ink: #8a6410;   /* accessible gold on white */

  /* logo red + the wine bar it sits on */
  --brand:  #ff2c00;
  --wine:   #350516;
  --wine-d: #1a0a0e;   /* footer ground */

  /* named brand colours from the type spec sheet */
  --blaze:  #ff2c00;   /* Blaze orange — detail text */
  --blood:  #350516;   /* Blood eclipse — titles and subtitles */

  --btn-h: 46px;      /* every button, everywhere */
  --maxw: 1200px;
  --disp: "Sora", "Helvetica Neue", Arial, sans-serif;
  --body: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}

/* ---------- type ---------- */
/* Type follows the brand spec sheet: section large titles 50px, subtitles 24px,
   detail text 12px, paragraphs 14px — all Sora Bold or Plus Jakarta, left
   aligned, sentence case. Sizes are fixed, so mobile matches desktop. */
.h1,.h2,.h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0}
.h1{font-size:clamp(2.9rem,6.2vw,5.1rem)}
.h2{font-size:50px;line-height:1.06;color:var(--blood)}      /* sections large titles */
.h3{font-size:24px;letter-spacing:-.01em;line-height:1.3;font-weight:700;color:var(--blood)}  /* subtitles */
/* Plus Jakarta Sans Regular 18px / 150%, letter-spacing 0 */
.lede{font-size:18px;font-weight:400;color:var(--tx-mute);line-height:1.5;letter-spacing:0;max-width:56ch;margin:0}

/* detail text: the small label above a title */
.kicker{
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:0;
  color:var(--blaze);display:inline-block;
}
.kicker.on-dark{color:var(--gold)}

/* ---------- buttons — squared, not pills ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  height:var(--btn-h);padding:0 1.35rem;border-radius:3px;border:1px solid transparent;
  font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:#000}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-2)}
.btn-line{background:transparent;color:var(--tx);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-line-d{background:transparent;color:var(--tx-d);border-color:var(--line-d2)}
.btn-line-d:hover{border-color:var(--gold);color:var(--gold)}
/* ---------- glass pills ----------
   Same material as the catalogue tiles: a translucent pane that blurs whatever
   sits behind it, a lit top rim and a warm bloom pooling at the bottom. The
   fill is a stack of gradients (first layer listed paints on top) rather than
   pseudo-elements, so nothing can ever cover the label. */
.btn-muted,.btn-glow,.btn-ember{
  border-radius:999px;padding:0 1.5rem;color:#fff;
  -webkit-backdrop-filter:blur(18px) saturate(165%) brightness(1.05);
  backdrop-filter:blur(18px) saturate(165%) brightness(1.05);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;
}

/* brushed-metal pill, now neutral glass — pairs with .btn-glow on dark */
.btn-muted{
  background:
    radial-gradient(120% 80% at 30% -25%,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 62%),
    radial-gradient(90% 130% at 50% 135%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 48%,rgba(255,255,255,.12) 100%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    0 10px 26px -12px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -10px 18px -12px rgba(255,255,255,.35);
}
.btn-muted:hover{
  border-color:rgba(255,255,255,.55);
  box-shadow:
    0 12px 30px -12px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -10px 20px -12px rgba(255,255,255,.5);
}
.btn-sm{padding:0 1rem;font-size:.84rem}

/* red pill: warm glass with the halo still bleeding onto the dark ground */
/* [24] identical material to .btn-ember, so the glow and overall brightness
   of "Talk to us" match "Request access" */
.btn-glow{
  background:
    radial-gradient(120% 80% at 30% -25%,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 58%),
    radial-gradient(95% 135% at 50% 135%,rgba(255,90,50,.42) 0%,rgba(255,44,0,0) 72%),
    linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(120,16,10,.30) 46%,rgba(60,8,5,.42) 100%);
  border:1px solid rgba(255,90,60,.62);
  box-shadow:
    0 0 22px rgba(255,44,0,.52),
    0 0 58px rgba(255,44,0,.28),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -12px 22px -14px rgba(255,100,60,.7);
}
.btn-glow:hover{
  border-color:rgba(255,130,95,.85);
  box-shadow:
    0 0 30px rgba(255,44,0,.72),
    0 0 76px rgba(255,44,0,.4),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -12px 24px -14px rgba(255,120,80,.9);
}

/* dark-centred variant: smokier glass, hot rim. Used in the hero. */
.btn-ember{
  padding:0 1.6rem;
  background:
    radial-gradient(120% 80% at 30% -25%,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 58%),
    radial-gradient(95% 135% at 50% 135%,rgba(255,90,50,.42) 0%,rgba(255,44,0,0) 72%),
    linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(120,16,10,.30) 46%,rgba(60,8,5,.42) 100%);
  border:1px solid rgba(255,90,60,.62);
  box-shadow:
    0 0 22px rgba(255,44,0,.52),
    0 0 58px rgba(255,44,0,.28),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -12px 22px -14px rgba(255,100,60,.7);
}
.btn-ember:hover{
  border-color:rgba(255,130,95,.85);
  box-shadow:
    0 0 30px rgba(255,44,0,.72),
    0 0 76px rgba(255,44,0,.4),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -12px 24px -14px rgba(255,120,80,.9);
}

.arrowlink{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;
  padding-bottom:3px;border-bottom:1px solid var(--line-2);transition:.16s;
}
.arrowlink:hover{border-color:var(--ink);gap:.75rem}
.arrowlink.on-dark{color:var(--gold);border-color:rgba(232,178,60,.35)}
.arrowlink.on-dark:hover{border-color:var(--gold)}

/* ---------- header ---------- */
/* opaque, so the old blur behind it had nothing left to do */
.site-head{position:sticky;top:0;z-index:60;background:#190907;
  border-bottom:1px solid rgba(255,255,255,.07)}
/* three columns so the links sit optically centred whatever the logo/CTA widths */
.site-head nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:90px}
.brand{display:inline-flex;align-items:center;flex:none;justify-self:start}
.brand img{height:44px;width:auto;display:block}
.navlinks{display:flex;align-items:center;justify-content:center;gap:30px}
.navlinks a{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.80);transition:color .15s}
.navlinks a:hover{color:#fff}
.navend{display:flex;align-items:center;justify-content:flex-end}

/* mobile: Contact button + hamburger, hidden on desktop */
.mobilebar{display:none;align-items:center;gap:10px}
.menu-btn{
  width:42px;height:42px;flex:none;display:grid;place-content:center;gap:5px;
  background:transparent;border:1px solid rgba(255,255,255,.24);border-radius:3px;cursor:pointer;padding:0;
}
.menu-btn span{display:block;width:17px;height:1.5px;background:#fff;transition:transform .22s ease,opacity .16s ease}
.site-head.open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-head.open .menu-btn span:nth-child(2){opacity:0}
.site-head.open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Hangs off the bottom of the header rather than sitting inside it. As a
   normal-flow child it grew the header and pushed the whole page down on open;
   absolute takes it out of the flow so it covers the content instead. The
   sticky header is its containing block, and being inside it inherits the
   header's stacking, so it lands above the page without its own z-index. */
.mobilenav{
  display:none;position:absolute;top:100%;left:0;right:0;
  background:#190907;border-top:1px solid rgba(255,255,255,.10);
  padding:6px 34px 18px;
}
.site-head.open .mobilenav{display:block}
.mobilenav a{
  display:block;padding:15px 2px;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.08);
}
.mobilenav a:hover{color:#fff}
.mobilenav a:last-child{border-bottom:0}

/* dark header variant (legal pages keep light) */

/* ---------- section shell ---------- */
/* [31] 128px of air between the text layout and the section edges */
.sec{padding:clamp(64px,8.89vw,128px) 0}
.sec > .wrap{max-width:1440px;padding-left:clamp(34px,8.89vw,128px);padding-right:clamp(34px,8.89vw,128px)}
.sec-tight{padding:clamp(56px,6vw,84px) 0}
.sec-alt{background:#f5f1ea}
.sec-dark{background:var(--ink);color:var(--tx-d)}
.sec-dark .lede{color:var(--tx-d-mute)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* 96px between the heading block and the section content (96/1440 = 6.67vw) */
/* both columns share a top edge */
/* the description column takes every pixel the title can spare while the
   title still fits "between your casino" on one line, so the body has the
   best chance of wrapping to two lines rather than three */
.sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(40px,6.67vw,96px);align-items:start;
  margin-bottom:clamp(40px,6.67vw,96px)}
.sechead .kicker{margin-bottom:24px}
/* Fills its column, and drops 85px — midway between sitting level with the
   title's second line (59) and its third (112). */
.sechead .lede{max-width:none;margin-top:85px}
.sechead-solo{max-width:44ch;margin-bottom:clamp(40px,6.67vw,96px)}
/* wide enough for both the title and the description to hold one line */
.sechead.center{display:block;text-align:center;max-width:1060px;margin-left:auto;margin-right:auto}
.sechead.center .h2{margin-top:0}
/* a break that only exists on phones */
.brmob{display:none}
.sechead.center .lede{margin:32px auto 0}

/* ---------- wine section (catalogue) ---------- */
.sec-wine{
  position:relative;overflow:hidden;
  background:var(--wine) url("images/gradient-bg.jpg") no-repeat center/cover;
}
/* spec: overlay the gradient plate with #190907 at 65% */
.sec-wine::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:rgba(25,9,7,.65);
}
.sec-wine > .wrap{position:relative;z-index:1}
.sec-wine .kicker{color:var(--blaze)}
/* catalogue lede: white, Plus Jakarta regular 18px, centred */
.sec-wine .lede{color:#fff;font-size:18px;max-width:none}

/* ---------- catalogue: frosted glass cards ---------- */
/* align-items:start matters: the default stretch hands each card a definite
   height from the row track, which overrides the 1/1 ratio below */
/* three across at a fixed 300px square. minmax lets them shrink rather than
   overflow once the viewport can no longer fit 3x300 + gaps (~1016px). */
.catgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:64px 36px;
  align-items:start;justify-content:center;
}

.catcard{
  position:relative;overflow:hidden;
  /* square tiles, copy optically centred inside */
  aspect-ratio:1/1;
  display:grid;justify-items:center;align-content:start;
  /* count | gap | name | gap | description.
     The name track hugs its content so a one-line name sits right above its
     description instead of leaving half an empty line between them. Anchoring
     the block to the top (rather than centring it) keeps the numbers and names
     level across all twelve; only a two-line name pushes its own description
     down. The 56px top padding centres the common one-line case. */
  grid-template-rows:44px 36px auto 12px auto;
  border-radius:32px;padding:50px 24px 30px;text-align:center;
  /* the pane itself: warm translucent glass over whatever the backdrop shows */
  /* The pane carries its own milky veil rather than relying on the backdrop:
     over the flat red middle of the plate there is nothing for the blur to
     refract, so cards there would otherwise read as plain colour. Saturation
     is held back for the same reason — 165% pushed those cards to a flat,
     fully saturated red and crushed the tonal range that reads as glass. */
  background:
    linear-gradient(160deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.12) 45%,rgba(255,70,30,.13) 100%),
    /* a constant ground under the veil: without it a tile is only ever the
       plate behind it, so the two over the bright middle of the gradient read
       far hotter than the rest */
    linear-gradient(0deg,rgba(74,18,12,.34),rgba(74,18,12,.34));
  -webkit-backdrop-filter:blur(26px) saturate(108%) brightness(1.02);
  backdrop-filter:blur(26px) saturate(108%) brightness(1.02);
  border:1px solid rgba(255,255,255,.18);
  /* inner shadow burning in from every edge (0/0, 35px blur, #F74603 at 80%),
     then a drop shadow to lift the tile off the ground, a lit inner rim so the
     edge catches light, and a faint red halo bleeding onto the backdrop */
  box-shadow:
    inset 0 0 35px rgba(247,70,3,.8),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -22px 40px -26px rgba(255,90,50,.55);
  transition:transform .22s cubic-bezier(.22,.61,.36,1),border-color .22s,box-shadow .22s;
}
/* specular sheen off the top-left corner — the thing that reads as glass.
   No z-index: as the first child box it paints over the pane but under the text. */
.catcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 75% at 28% -12%,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 62%);
}
/* warm bloom pooling in the lower half, as if the glass is lit from behind */
.catcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 118%,rgba(255,110,70,.30) 0%,rgba(255,60,20,0) 70%);
}
.catcard:hover{
  transform:translateY(-4px);
  border-color:rgba(255,140,110,.55);
  box-shadow:
    inset 0 0 35px rgba(247,70,3,.8),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -22px 44px -24px rgba(255,110,70,.7);
}

/* both pseudo-elements are positioned, so they paint above in-flow text —
   lift the copy into its own layer to keep it clear of the bloom */
.catcard > *{position:relative;z-index:1}

/* glass box typography, per the spec sheet */
.cc-count{
  grid-row:1;align-self:start;display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:44px;
  /* white running into the featured tile's orange */
  background:linear-gradient(180deg,#fff 30%,#f74603 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(255,44,0,.4));
}
.cc-name{grid-row:3;align-self:start;margin:0;font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:#fff}
.cc-desc{grid-row:5;align-self:start;margin:0;font-family:var(--body);font-size:16px;font-weight:400;line-height:1.45;color:#fff}


.catnote{
  display:flex;align-items:flex-start;justify-content:center;gap:10px;
  margin:clamp(40px,6.67vw,96px) 0 0;font-size:.84rem;line-height:1.7;color:rgba(255,255,255,.58);text-align:center;
}

/* ---------- numbered feature rows ---------- */
.numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 96px}
.numitem{border-top:1px solid var(--line);padding-top:24px}
.sec-dark .numitem{border-color:var(--line-d)}
.numitem .n{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:0;color:var(--blaze);display:block;margin-bottom:12px}
.sec-dark .numitem .n{color:var(--gold)}
/* reserve two lines: "Built for regulated markets" fits on one, so without
   this its body copy started a line higher than its neighbours */
.numitem h3{margin:0 0 24px;min-height:calc(24px * 1.3 * 2)}
.numitem p{margin:0;color:var(--tx-mute);font-size:14px;max-width:34ch}
.sec-dark .numitem p{color:var(--tx-d-mute)}

/* ---------- data table / catalog index ---------- */
.datatable{border-top:1px solid var(--line)}
.sec-dark .datatable{border-color:var(--line-d)}
.drow{
  display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.15fr) 110px;
  gap:24px;align-items:center;padding:20px 12px;border-bottom:1px solid var(--line);
  transition:background .15s,padding .15s;
}
.sec-dark .drow{border-color:var(--line-d)}
.drow:hover{background:var(--paper-2);padding-left:20px}
.sec-dark .drow:hover{background:var(--ink-2)}
.drow .dx{font-family:var(--body);font-size:.75rem;font-weight:600;color:var(--tx-faint)}
.sec-dark .drow .dx{color:var(--tx-d-faint)}
.drow .dname{font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.drow .ddesc{color:var(--tx-mute);font-size:.9rem}
.sec-dark .drow .ddesc{color:var(--tx-d-mute)}
.drow .dcount{font-family:var(--body);font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--tx)}
.sec-dark .drow .dcount{color:var(--gold)}

/* ---------- stats ---------- */
/* --statnum drives both the figure and the label's indent, so they stay in
   step when the size changes at a breakpoint */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);--statnum:clamp(1.9rem,3vw,2.6rem);--statgap:20px}
.statrow .st{padding:34px 26px 34px 0}
.statrow .sv{display:flex;align-items:center;gap:var(--statgap);
  font-family:var(--disp);font-weight:700;font-size:var(--statnum);letter-spacing:-.04em;line-height:1;color:#fff}
.statrow .bolt{height:.86em;width:auto;flex:none;display:block}
/* the label hangs under the figure, not the bolt: the bolt is .86em tall and
   835/1000 as wide, so indent by that plus the flex gap */
.statrow .sl{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:0;
  color:#fff;margin-top:14px;
  padding-left:calc(var(--statnum) * .86 * .835 + var(--statgap))}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:18px}
.field > span{
  display:block;font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-faint);margin-bottom:8px;
}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;font-family:var(--body);font-size:.95rem;color:var(--tx);
  background:var(--paper);border:1px solid var(--line-2);border-radius:3px;transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,13,16,.06);
}
.field input::placeholder,.field textarea::placeholder{color:#b3b9c0}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* ---------- footer ---------- */
.site-foot{background:var(--wine-d);color:var(--tx-d-mute);font-size:.9rem}

/* logo | tagline | CTA, with the link block below sharing the same column grid */
.foot-top{display:grid;grid-template-columns:210px minmax(0,1fr) auto;align-items:center;gap:28px;padding:56px 0 44px}
.foot-brand .brand img{height:46px}
.foot-tag{margin:0;max-width:60ch;color:#fff;font-size:.94rem;font-weight:600;line-height:1.65}

.foot-cols{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;padding-bottom:48px}
.foot-colset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
/* red label sits inline to the left of its stack of links */
.foot-col{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:start}
.foot-col h4{font-family:var(--disp);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);font-weight:700;margin:0;padding-top:2px;white-space:nowrap}
.foot-col a{display:block;padding:0 0 12px;color:rgba(255,255,255,.82);font-size:.88rem;transition:color .15s}
.foot-col a:hover{color:#fff}

/* the hot rule from the mock */
.foot-rule{height:1px;background:var(--brand);box-shadow:0 0 12px rgba(255,44,0,.55);border:0;margin:0}

.foot-legal{padding:34px 0 30px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
/* same treatment as .btn-glow so the badge and the CTA read as one system */
.badge18{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,#8f1000 0%,#c31600 55%,#e62300 80%,#ff3a0d 100%);
  border:1px solid #ff6a45;
  box-shadow:0 0 18px rgba(255,44,0,.65), 0 0 42px rgba(255,44,0,.30), inset 0 0 12px rgba(255,90,50,.45);
  font-family:var(--body);font-weight:700;font-size:.8rem;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.foot-legal p{margin:0 0 14px;font-size:.8rem;line-height:1.75;color:rgba(255,255,255,.62);max-width:104ch}
.foot-legal p:last-child{margin-bottom:0}

.foot-bar{border-top:1px solid rgba(255,255,255,.10);padding:22px 0;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.foot-bar .fb-links{display:flex;gap:34px}
.foot-bar a:hover{color:var(--brand)}
.foot-bar a:hover{color:var(--gold)}

/* ---------- legal / long-form pages ---------- */
/* The legal pages run on the same rules as the homepage: the #190907 ground,
   the 128px gutters capped at 1440, the 12 / 18 / 24 / 50 type scale and the
   Blood eclipse + Blaze orange palette. They load only this stylesheet, so
   everything they need has to live here rather than in the page. */
.legal-head{background:#190907;color:var(--tx-d);padding:clamp(64px, 8.89vw, 128px) 0}
.legal-head > .wrap,
.legal-body{max-width:clamp(1440px, calc(1440px + 360 * (100vw - 1440px) / 1120), 1800px);padding-left:clamp(34px, 8.89vw, 128px);padding-right:clamp(34px, 8.89vw, 128px)}
/* The head is the hero's construction without the artwork, so it takes the
   hero's type treatment exactly: Sora SemiBold in white, 12 / 60, and the
   same 32px rhythm between kicker, title and meta. */
.legal-head .kicker{font-family:var(--disp);font-weight:600;font-size:12px;color:#fff}
.legal-head .h1{color:#fff;font-family:var(--disp);font-weight:600;
  font-size:60px;line-height:1.0833;margin:32px 0 0}
.legal-head .meta{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;color:rgba(255,255,255,.55);margin-top:32px}

.legal-body{padding-top:clamp(64px, 8.89vw, 128px);padding-bottom:clamp(64px, 8.89vw, 128px);display:block}

.legal-prose{max-width:70ch}
.legal-prose h2{font-family:var(--disp);font-size:24px;line-height:1.3;letter-spacing:-.01em;
  font-weight:700;color:var(--blood);margin:64px 0 24px}
.legal-prose h2:first-child{margin-top:0}
.legal-prose h3{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.01em;
  color:var(--blood);margin:32px 0 12px}
.legal-prose p,.legal-prose li{color:var(--tx-mute);font-size:16px;line-height:1.75}
.legal-prose p{margin:0 0 18px}
.legal-prose ul{padding-left:20px}
.legal-prose li{margin-bottom:8px}
.legal-prose a{color:var(--blood);border-bottom:1px solid rgba(247,70,3,.45)}
.legal-prose a:hover{border-color:var(--blaze)}
.legal-prose .callout{background:#f5f1ea;border-left:2px solid var(--blaze);
  border-radius:0 12px 12px 0;padding:24px;margin:32px 0;font-size:16px}
.legal-prose .callout p{margin:0}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  /* stacked: the 85px desktop offset and the column gap both collapse into
     a single 48px step between the title and the description */
  .sechead{grid-template-columns:1fr;gap:0;align-items:start}
  .sechead .lede{margin-top:48px}
  .numgrid{grid-template-columns:1fr;gap:0}
  .numitem{padding:22px 0}
  .numitem .n{margin-bottom:12px}
  .numitem p{max-width:none}
  .foot-top{grid-template-columns:auto minmax(0,1fr);gap:20px 24px}
  .foot-top .btn{grid-column:2}
  .foot-cols{grid-template-columns:1fr;gap:0}
}
@media(max-width:760px){
  /* every button runs 38px on a phone, matching the mobile frames */
  :root{--btn-h:38px}
  .wrap{padding:0 34px}
  /* 128px is a desktop figure; phones keep the normal gutter and tighter bands.
     54px at the bottom rather than 64: a 14px body line at 150% leaves
     leading under its baseline, so the visible white reads larger than the
     padding value. */
  .sec{padding:64px 0}
  .sec > .wrap{padding-left:34px;padding-right:34px}
  .site-foot-b > .wrap{padding-left:34px;padding-right:34px}
  .sec-tight{padding:48px 0}

  /* header: logo left, Contact + burger right */
  .navlinks{display:none}
  .nav-cta{display:none}
  .mobilebar{display:flex}
  .site-head nav{grid-template-columns:auto 1fr;gap:12px;height:62px}
  .brand img{height:32px}
  .foot-brand .brand img{height:38px}
  .menu-btn{width:40px;height:40px}

  /* headings: tighter tracking reads better at small sizes */
  .h1{font-size:clamp(1.8rem,7.4vw,2.35rem);letter-spacing:-.02em;line-height:1.1}
  .lede{max-width:none}
  .sechead{margin-bottom:34px}
  .sechead-solo{margin-bottom:32px}

  /* stats: 2x2, left aligned so the label still hangs under the figure
     rather than under the bolt — centring the group put it under the icon */
  .statrow{grid-template-columns:1fr 1fr;gap:4px 16px}
  .statrow .st{padding:24px 0}
  /* 33px: the Figma frame hugs at 42px, which is 33 x Sora’s natural leading */
  /* the header scaled with nothing, so it read as a small bar on a big page */
  .site-head nav{height:clamp(90px, calc(90px + 36 * (100vw - 1440px) / 1120), 126px)}
  .brand img{height:clamp(44px, calc(44px + 17.6 * (100vw - 1440px) / 1120), 61.6px)}
  .navlinks{gap:clamp(30px, calc(30px + 12 * (100vw - 1440px) / 1120), 42px)}
  .navlinks a{font-size:clamp(14.4px, calc(14.4px + 5.76 * (100vw - 1440px) / 1120), 20.16px)}
  .btn-sm{font-size:clamp(13.44px, calc(13.44px + 5.38 * (100vw - 1440px) / 1120), 18.82px);padding:0 clamp(16px, calc(16px + 6.4 * (100vw - 1440px) / 1120), 22.4px)}
  .statrow{--statnum:33px;--statgap:20px}
  .statrow .sl{margin-top:9px}

  /* catalogue: swipeable row of cards, next one peeking so the gesture is discoverable.
     Negative margins let the strip bleed to the screen edges while keeping wrap padding. */
  .catgrid{
    /* flex-start, not the centre inherited from the desktop grid: on an
       overflowing scroll container, centring pushes content off the left edge
       where scrolling cannot reach it, which cropped cards on both sides */
    display:flex;gap:14px;align-items:flex-start;justify-content:flex-start;
    /* mandatory snap so a swipe always settles on a whole card rather than
       leaving one cut off at the edge. It coexists with the loop because the
       recycler shifts scrollLeft by exactly one card width, which is itself a
       snap position. */
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-behavior:auto;scrollbar-width:none;
    /* Bleeds off both edges so cards peek left and right once you are inside
       the run. At the start position scrollLeft is 0, so the left padding is
       empty and nothing shows before the first card. */
    margin:0 -34px;padding:4px 34px 8px;scroll-padding-left:34px;
  }
  .catgrid::-webkit-scrollbar{display:none}
  .catcard{
    /* snap-stop keeps a fling to one card at a time instead of racing
       through several before it settles */
    flex:0 0 min(300px,calc(100% - 22px));scroll-snap-align:start;scroll-snap-stop:always;
    padding:34px 22px 30px;border-radius:32px;
  }
  .catcard:hover{transform:none}

  /* shape reads as noise at phone width, so pull it back and re-centre it */
  /* portrait plate crops fine on a phone; just deepen the scrim a little */

  .sechead.center{max-width:none}
  .catnote{gap:8px;font-size:.78rem;margin-top:30px}

  .numitem{padding:24px 0}
  /* the last item drops its own 24px, so the space under the final paragraph
     is the section padding alone — the same as every other section ends with */
  .numitem:last-child{padding-bottom:0}
  .field input,.field textarea{font-size:16px} /* 16px stops iOS zooming on focus */
  .fieldrow{grid-template-columns:1fr}
  /* footer, mobile: one centred identity block, then a tidy two-column link grid.
     Labels move above their links — inline labels have no room at this width. */
  .foot-top{grid-template-columns:1fr;gap:16px;padding:44px 0 28px;justify-items:center;text-align:center}
  .foot-top .btn{grid-column:1;width:100%;max-width:260px}
  .foot-brand .brand img{height:36px}
  .foot-tag{max-width:36ch;font-size:.9rem;margin:0 auto}

  .foot-cols{grid-template-columns:1fr;gap:0;padding:26px 0 30px;border-top:1px solid rgba(255,255,255,.08)}
  .foot-cols > div:first-child{display:none}
  .foot-colset{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot-col{grid-template-columns:1fr;gap:10px}
  .foot-col:last-child{grid-column:1 / -1}   /* Legal has the longest labels — give it the full width */
  .foot-col h4{padding-top:0}
  .foot-col a{padding-bottom:9px}

  .foot-legal{grid-template-columns:1fr;gap:14px;padding:26px 0 22px;justify-items:start}
  .foot-legal p{font-size:.76rem}
  .foot-bar{flex-direction:column;align-items:center;text-align:center;gap:12px;font-size:.7rem}
  .foot-bar .fb-links{gap:22px}
  .legal-head{padding:64px 0}
  .legal-head > .wrap,
  .legal-body{padding-left:34px;padding-right:34px}
  .legal-head .h1{font-size:36px;margin:32px 0 0}
  .legal-body{padding-top:64px;padding-bottom:64px}
  .legal-prose h2{font-size:24px;margin:48px 0 24px}
}

/* small phones */
@media(max-width:400px){
  .wrap{padding:0 34px}
  .sec > .wrap{padding-left:34px;padding-right:34px}
  .site-foot-b > .wrap{padding-left:34px;padding-right:34px}
  .brand img{height:28px}
  .site-head nav{gap:8px}
  .mobilebar{gap:8px}
  .menu-btn{width:38px;height:38px}
  .foot-legal{grid-template-columns:1fr}
}

/* ==========================================================================
   Footer — logo, tagline pane, link columns, legal and copyright.
   Namespaced .site-foot-b / .f2-*, written mobile-first with
   min-width queries, so the whole section lifts out in one piece.
   ========================================================================== */
/* full-bleed gradient strip that caps the page off above the footer. The art is
   6001x135, so it is stretched to the viewport rather than tiled or cropped. */
.foot-divider{
  height:32px;
  background:url("images/gradient-strip.png") no-repeat center/100% 100%;
}

.site-foot-b{background:#221010;color:rgba(255,255,255,.6);
  /* frame padding: 128 top, 128 sides, 64 bottom */
  padding:clamp(64px,8.89vw,128px) 0 clamp(40px,4.44vw,64px)}
.site-foot-b > .wrap{max-width:1440px;
  padding-left:clamp(34px,8.89vw,128px);padding-right:clamp(34px,8.89vw,128px)}

.f2-top{display:grid;gap:28px}
/* phone: the logo carries the top of the footer, so it runs big and centred */
.f2-brand img{display:block;width:auto;height:clamp(58px,17vw,88px);margin:0 auto}

/* the tagline pane: barely-there card, so it reads as a panel not a button */
.f2-card{
  border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:#280e0b;
  padding:22px;text-align:center;
}
.f2-tag{margin:0 0 24px;color:#fff;font-size:.92rem;font-weight:500;line-height:1.62}
.f2-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--btn-h);padding:0 1.05rem;border-radius:999px;
  background:#efe7d7;color:#231110;font-size:.8rem;font-weight:600;
  transition:background .16s;
}
.f2-btn:hover{background:#fff}

/* two columns filled top-to-bottom, so the pairs read Platform/Company on the
   left and Legal/Social on the right rather than wrapping in source order */
.f2-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto;grid-auto-flow:column;gap:26px 20px;
  /* the 2x2 block is inset from the tagline card rather than flush with it */
  padding-left:28px;
}
.f2-col h4{
  margin:0 0 12px;font-family:var(--disp);font-size:.8rem;font-weight:700;color:var(--brand);
}
.f2-col a{
  display:block;padding-bottom:8px;color:rgba(255,255,255,.82);
  font-size:.82rem;line-height:1.4;transition:color .15s;
}
.f2-col a:last-child{padding-bottom:0}
.f2-col a:hover{color:#fff}

.f2-rule{height:1px;border:0;margin:0;background:rgba(255,255,255,.10)}

/* phone: badge sits on its own line above the copy, both centred */
.f2-legal{
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;
  justify-items:center;text-align:center;padding:clamp(28px,3.33vw,48px) 0;
}
/* "18+" is 13.1px bold on a 21px line box in a 24x21 frame; the ring runs
   about 1.7x the text's width */
.f2-badge{
  width:40px;height:40px;flex:none;border-radius:50%;
  border:1px solid rgba(255,255,255,.30);display:grid;place-items:center;
  font-size:13px;line-height:21px;font-weight:700;color:rgba(255,255,255,.75);
}
.f2-legal p{margin:0;font-size:.72rem;line-height:1.85;color:rgba(255,255,255,.45)}

.f2-bar{padding:clamp(40px,6.67vw,96px) 0 0;text-align:center;font-size:.62rem;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}

@media(min-width:620px){
  /* single row of four: back to flush left, the indent is a phone-only inset */
  .f2-cols{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;gap:0 64px;padding-left:0}
}
@media(min-width:900px){

  /* two columns: brand over links on the left, tagline pane held to the right */
  .f2-top{grid-template-columns:minmax(0,1fr) clamp(300px,30.6vw,441px);gap:96px;align-items:start}
  .f2-brand{grid-column:1;grid-row:1}
  .f2-cols{grid-column:1;grid-row:2}
  .f2-card{grid-column:2;grid-row:1 / span 2;align-self:start;padding:26px;text-align:left}
  .f2-brand img{width:clamp(240px,44.44vw,640px);height:auto;margin:0}
  /* back to the badge sitting beside the copy */
  .f2-legal{grid-template-columns:auto minmax(0,1fr);gap:24px;justify-items:start;
    text-align:left;align-items:start;padding:clamp(28px,3.33vw,48px) 0}
  .f2-bar{text-align:left}
}

/* breathing room between the link columns and the first rule */
.f2-top{padding-bottom:clamp(40px,6.67vw,96px)}

/* ==========================================================================
   Contact / enquiry — cream plate with a white form card. Mobile-first.
   ========================================================================== */
.sec-enquiry{background:#f5f1ea;color:var(--tx)}
.enq{display:grid;gap:34px;align-items:start}

.enq-kicker{display:inline-block;font-size:.78rem;font-weight:600;color:var(--brand)}
.enq-h{color:var(--blood);margin:24px 0 32px;font-size:50px;line-height:1.12}
.enq-lede{margin:0;color:#5c636d;font-size:.98rem;line-height:1.65;max-width:44ch}

/* spec: 544x530 card, 32px between cells and to every edge */
.sec-enquiry .formcard{
  background:#fff;border:0;border-radius:24px;
  width:544px;max-width:100%;min-height:530px;padding:32px;
}
.sec-enquiry .field{margin-bottom:32px}
.sec-enquiry .fieldrow{gap:0 32px}
.sec-enquiry .field input,
.sec-enquiry .field textarea{
  padding:12px 14px;border-radius:8px;border:1px solid rgba(90,12,34,.42);
  background:#fff;color:var(--tx);font-size:.95rem;
}
.sec-enquiry .field textarea{min-height:170px}
.sec-enquiry .field input::placeholder,
.sec-enquiry .field textarea::placeholder{color:#9aa1a9}
.sec-enquiry .field input:focus,
.sec-enquiry .field textarea:focus{
  outline:none;border-color:#5a0c22;box-shadow:0 0 0 3px rgba(90,12,34,.10);
}

.enq-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;height:var(--btn-h);border:0;border-radius:999px;cursor:pointer;
  background:#4d0d1f;color:#fff;font-family:var(--body);font-size:.88rem;font-weight:700;
  transition:background .16s,transform .16s;
}
.enq-submit:hover{background:#68132b}
.enq-submit:active{transform:translateY(1px)}
.enq-submit:disabled{cursor:default;opacity:.85}

.enq-fine{margin:14px 0 0;text-align:center;font-size:.7rem;line-height:1.6;color:#a7adb4}
.enq-fine a{color:#8b929a;text-decoration:underline}

/* label text is carried by the placeholders, but screen readers still need it */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* sent state, recoloured for the white card */
.sec-enquiry .formdone h3{color:#3f0c1e}
.sec-enquiry .formdone .done-copy{color:#5c636d}
.sec-enquiry .formdone .fn{color:#9aa1a9}
.sec-enquiry .formdone .done-bolt{filter:drop-shadow(0 6px 18px rgba(255,44,0,.35))}
.sec-enquiry .formdone .enq-submit{max-width:250px;margin:0 auto}

@media(min-width:900px){
  /* same ratios as .split, so the company facts and this form share a right
     column and can line up on the same edge */
  .enq{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:96px}
  .sec-enquiry .formcard{width:100%;max-width:544px;margin-left:auto}
  .sec-enquiry .formcard{padding:32px}
}

/* ---------- Blood eclipse pill, the CTA that follows a section paragraph ---------- */
.btn-blood{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--btn-h);padding:0 1.15rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--blood);color:#fff;
  font-family:var(--body);font-size:.8rem;font-weight:600;
  transition:background .16s;
}
.btn-blood:hover{background:#56102a}

/* ==========================================================================
   Mobile overrides driven by the mobile spec sheets. Only the section large
   titles change size (50px -> 32px); everything else holds its desktop size.
   ========================================================================== */
@media(max-width:760px){
  .h2,.enq-h{font-size:36px}
  /* "Twelve categories." needs ~356px at 36px but only has 322px, so it
     wrapped to three lines. 32px fits it on one. */
  .sec-wine .h2{font-size:32px}
  .brmob{display:inline}


  /* contact card: fluid, never wider than the screen, and tighter gutters than
     the 544x530 desktop spec so the form still fits above the fold */
  .sec-enquiry .formcard{width:100%;min-height:0;padding:20px}
  .sec-enquiry .field{margin-bottom:14px}
  .sec-enquiry .fieldrow{gap:0}
  .sec-enquiry .field textarea{min-height:150px}
}

/* ==========================================================================
   Wider than the 1440 design frame.
   The layout used to cap at 1440 and stop, so a 2560 screen showed the same
   1184px of content at the same type sizes with ~690px of dead space either
   side. Everything below grows from its 1440 value to x1.4 at 2560px and
   holds there. Every clamp starts at the current value, so nothing at or
   below 1440 is touched.
   ========================================================================== */
@media (min-width: 1441px) {
  /* the measure grows to 1800, so the page fills out rather than stranding
     the content in the middle */
  .sec > .wrap,
  .site-foot-b > .wrap{max-width:clamp(1440px, calc(1440px + 360 * (100vw - 1440px) / 1120), 1800px)}
  :root{--btn-h:clamp(46px, calc(46px + 18.4 * (100vw - 1440px) / 1120), 64.4px)}
  .btn{font-size:clamp(14.4px, calc(14.4px + 5.76 * (100vw - 1440px) / 1120), 20.16px)}
  .h2{font-size:clamp(50px, calc(50px + 20 * (100vw - 1440px) / 1120), 70px)}
  .h3{font-size:clamp(24px, calc(24px + 9.6 * (100vw - 1440px) / 1120), 33.6px)}
  .lede{font-size:clamp(18px, calc(18px + 7.2 * (100vw - 1440px) / 1120), 25.2px)}
  .kicker{font-size:clamp(12px, calc(12px + 4.8 * (100vw - 1440px) / 1120), 16.8px)}
  .numitem .n{font-size:clamp(12px, calc(12px + 4.8 * (100vw - 1440px) / 1120), 16.8px)}
  .numitem p{font-size:clamp(14px, calc(14px + 5.6 * (100vw - 1440px) / 1120), 19.6px)}
  .cc-count{font-size:clamp(44px, calc(44px + 17.6 * (100vw - 1440px) / 1120), 61.6px)}
  .cc-name{font-size:clamp(28px, calc(28px + 11.2 * (100vw - 1440px) / 1120), 39.2px)}
  .cc-desc{font-size:clamp(16px, calc(16px + 6.4 * (100vw - 1440px) / 1120), 22.4px)}
  .enq-h{font-size:clamp(50px, calc(50px + 20 * (100vw - 1440px) / 1120), 70px)}
  .statrow .sl{font-size:clamp(12px, calc(12px + 4.8 * (100vw - 1440px) / 1120), 16.8px)}
  .f2-col h4{font-size:clamp(12.8px, calc(12.8px + 5.12 * (100vw - 1440px) / 1120), 17.92px)}
  .f2-col a{font-size:clamp(13.12px, calc(13.12px + 5.25 * (100vw - 1440px) / 1120), 18.37px)}
  .f2-tag{font-size:clamp(14.72px, calc(14.72px + 5.89 * (100vw - 1440px) / 1120), 20.61px)}
  /* the tiles: box and rows scale with the type inside them */
  .catgrid{grid-template-columns:repeat(3,minmax(0,clamp(300px, calc(300px + 120 * (100vw - 1440px) / 1120), 420px)));gap:clamp(64px, calc(64px + 25.6 * (100vw - 1440px) / 1120), 89.6px) clamp(36px, calc(36px + 14.4 * (100vw - 1440px) / 1120), 50.4px)}
  .catcard{
    grid-template-rows:clamp(44px, calc(44px + 17.6 * (100vw - 1440px) / 1120), 61.6px) clamp(36px, calc(36px + 14.4 * (100vw - 1440px) / 1120), 50.4px) auto clamp(12px, calc(12px + 4.8 * (100vw - 1440px) / 1120), 16.8px) auto;
    padding:clamp(50px, calc(50px + 20 * (100vw - 1440px) / 1120), 70px) clamp(24px, calc(24px + 9.6 * (100vw - 1440px) / 1120), 33.6px) clamp(30px, calc(30px + 12 * (100vw - 1440px) / 1120), 42px);border-radius:clamp(32px, calc(32px + 12.8 * (100vw - 1440px) / 1120), 44.8px);
  }
  /* blocks whose width was pinned in px at the 1440 frame */
  .sechead.center{max-width:clamp(1060px, calc(1060px + 424 * (100vw - 1440px) / 1120), 1484px)}
  /* The card hugs its content above 1440. Holding the 530px floor there made
     it taller than its own contents, because a wider card wraps the same copy
     into fewer lines. Its padding, fields and type scale too, so the form
     grows as a whole instead of just getting wider. */
  .sec-enquiry .formcard{width:clamp(544px, calc(544px + 217.6 * (100vw - 1440px) / 1120), 761.6px);min-height:0;padding:clamp(32px, calc(32px + 12.8 * (100vw - 1440px) / 1120), 44.8px)}
  .sec-enquiry .field textarea{min-height:clamp(170px, calc(170px + 68 * (100vw - 1440px) / 1120), 238px)}
  .sec-enquiry .field input,
  .sec-enquiry .field textarea{padding:clamp(12px, calc(12px + 4.8 * (100vw - 1440px) / 1120), 16.8px) clamp(14px, calc(14px + 5.6 * (100vw - 1440px) / 1120), 19.6px);font-size:clamp(15.2px, calc(15.2px + 6.08 * (100vw - 1440px) / 1120), 21.28px);border-radius:clamp(8px, calc(8px + 3.2 * (100vw - 1440px) / 1120), 11.2px)}
  .sec-enquiry .formcard{border-radius:clamp(24px, calc(24px + 9.6 * (100vw - 1440px) / 1120), 33.6px)}
  .enq-kicker{font-size:clamp(12.48px, calc(12.48px + 4.99 * (100vw - 1440px) / 1120), 17.47px)}
  .enq-lede{font-size:clamp(15.68px, calc(15.68px + 6.27 * (100vw - 1440px) / 1120), 21.95px)}
  .enq-submit{font-size:clamp(12.8px, calc(12.8px + 5.12 * (100vw - 1440px) / 1120), 17.92px)}
  .enq-fine{font-size:clamp(11.2px, calc(11.2px + 4.48 * (100vw - 1440px) / 1120), 15.68px)}
  .sec-enquiry .field{margin-bottom:clamp(32px, calc(32px + 12.8 * (100vw - 1440px) / 1120), 44.8px)}
  .sec-enquiry .fieldrow{gap:0 clamp(32px, calc(32px + 12.8 * (100vw - 1440px) / 1120), 44.8px)}
  .f2-brand img{width:clamp(640px, calc(640px + 256 * (100vw - 1440px) / 1120), 896px)}
  .f2-top{grid-template-columns:minmax(0,1fr) clamp(441px, calc(441px + 176.4 * (100vw - 1440px) / 1120), 617.4px)}
    /* the legal pages scale with everything else */
  .legal-head .h1{font-size:clamp(60px, calc(60px + 24 * (100vw - 1440px) / 1120), 84px)}
  .legal-head .kicker,
  .legal-head .meta{font-size:clamp(12px, calc(12px + 4.8 * (100vw - 1440px) / 1120), 16.8px)}
  .legal-prose h2{font-size:clamp(24px, calc(24px + 9.6 * (100vw - 1440px) / 1120), 33.6px)}
  .legal-prose h3{font-size:clamp(18px, calc(18px + 7.2 * (100vw - 1440px) / 1120), 25.2px)}
  .legal-prose p,.legal-prose li,
  .legal-prose .callout{font-size:clamp(16px, calc(16px + 6.4 * (100vw - 1440px) / 1120), 22.4px)}
  .statrow{--statnum:clamp(41.6px, calc(41.6px + 16.64 * (100vw - 1440px) / 1120), 58.24px)}
}