/* ==========================================================================
   Hanken Grotesk — self-hosted, SIL Open Font Licence (see fonts/OFL.txt).
   Two variable files carry the whole weight range 100-900, roman and italic,
   which is why the site can use 400 / 500 / 600 / 700 without loading a file
   for each. Latin-ext only downloads if a page actually contains one of its
   characters, so English pages never pay for it.
   ========================================================================== */
@font-face{
  font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Hanken Grotesk";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   Grazer Liverpool — core stylesheet (light)
   White ground, hairline rules, brand yellow as the only strong colour.
   --------------------------------------------------------------------------
   BRAND YELLOW lives in exactly one place: --yellow, below.
   ========================================================================== */

:root{
  /* Colour -------------------------------------------------------------- */
  --paper:   #FFFFFF;   /* main ground                                      */
  --soft:    #F7F4ED;   /* alternate band — warm off-white                  */
  --tint:    #FDF8E6;   /* alternate band — palest brand yellow             */
  --ink:     #282626;   /* headings and body copy — sampled from the logo   */
  --mute:    #6A6663;   /* secondary copy                                   */
  --line:    #E7E3DC;   /* hairlines and borders                            */
  --yellow:  #F9DF6E;   /* BRAND YELLOW — sampled from the logo             */
  --yellow-2:#F5D64E;   /* one step deeper, for button hover               */
  --gold:    #D2AB00;   /* accent for prices, markers, focus rings          */
  --eyebrow: #EBCA3B;   /* the small uppercase labels above headings        */
  --rose:    #B4485C;   /* errors and required marks only                   */

  /* Type ---------------------------------------------------------------- */
  --display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.9vw, 3rem);
  --step-4:  clamp(2.4rem, 1.75rem + 3.4vw, 4.4rem);
  --step-5:  clamp(2.9rem, 1.9rem + 5.2vw, 6.4rem);

  /* Space & shape -------------------------------------------------------- */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 104ch;  /* ~3/4 of the 1240px content width */
  --radius: 6px;
  --section-y: clamp(4rem, 9vw, 8rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 20px 44px -26px rgba(40,38,38,.26);
  --header-h: 96px;   /* bar height — the logo width below drives this */
  --dock-h:   56px;   /* mobile action bar; body padding is derived from it */
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
     scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-synthesis:none;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0 0 .45em;
  text-wrap:balance;
  color:var(--ink);
}
h1{font-size:var(--step-5);font-weight:800;letter-spacing:-.03em}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{margin:0 0 1.1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--yellow);
      color:var(--ink);padding:.85rem 1.4rem;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}

/* The one flourish in the headline: a yellow bar behind a single word. */
.mark{
  background:linear-gradient(var(--yellow),var(--yellow));
  background-size:100% .4em;background-position:0 84%;background-repeat:no-repeat;
  padding:0 .06em;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.wrap--narrow{width:min(800px,100% - var(--gutter)*2)}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.75rem,5.5vw,4.5rem)}

.band-soft{background:var(--soft)}
.band-tint{background:var(--tint)}

.lede{font-size:var(--step-1);line-height:1.55;color:var(--mute);max-width:99ch}

.eyebrow{
  font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--eyebrow);margin:0 0 .9rem;
  display:flex;align-items:center;gap:.8rem;
}
.eyebrow::after{content:"";flex:0 0 3rem;height:2px;background:var(--yellow)}

.section-head{margin-bottom:clamp(2.25rem,4.5vw,3.5rem);max-width:104ch}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-bg:var(--yellow);--btn-fg:var(--ink);--btn-bd:var(--yellow);
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.95rem 1.55rem;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  border-radius:100px;
  font-weight:700;font-size:var(--step--1);letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);--btn-bg:var(--yellow-2);--btn-bd:var(--yellow-2)}
.btn:active{transform:translateY(0)}
.btn svg{width:1em;height:1em;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bg:transparent;--btn-bd:var(--ink)}
.btn--sm{padding:.62rem 1.15rem;font-size:.74rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}

.tlink{
  display:inline;font-weight:700;text-decoration:none;
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s var(--ease);
}
.tlink:hover{background-size:100% 8px}

/* ==========================================================================
   Header — white, sticky, hairline. The logo needs no treatment here.
   ========================================================================== */
/* Slides out of the way on the way down, comes straight back on the way up.
   See js/main.js — it stays put near the top of the page, while the mobile
   drawer is open, and whenever something inside it has keyboard focus. */
/* IMPORTANT: this element must never carry transform, backdrop-filter, filter
   or will-change on those. Each one makes the header the containing block for
   position:fixed descendants, which pins the mobile drawer to the header box
   instead of the viewport and parks it beside the page content. That is why
   the bar is opaque rather than blurred, and why it hides by moving `top`
   rather than by translating. */
/* The safe-area insets below all resolve to 0 without viewport-fit=cover on
   the viewport meta, so they sit here inert. Putting that back on the meta tag
   is the single switch that makes the page paint under the system bars again. */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid var(--line);
  transition:top .34s var(--ease),box-shadow .3s var(--ease);
}
.header.is-hidden{top:calc((var(--header-h) + env(safe-area-inset-top,0px) + 2px) * -1)}
.header.is-scrolled{box-shadow:0 14px 30px -26px rgba(40,38,38,.55)}

@media (prefers-reduced-motion:reduce){
  .header{transition:none}
  .header.is-hidden{transform:none}
}
.header__inner{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);min-height:var(--header-h)}
.header__logo{flex:none;display:block;line-height:0}
/* One lockup everywhere: 1701x323, so height is width / 5.27. */
.header__logo img{width:clamp(186px,20vw,250px)}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,1.7vw,1.8rem)}

/* Only ever seen inside the mobile drawer. It exists because the burger sits
   in the header, and the header can be scrolled out of reach while the page
   is locked — so the drawer needs a way to close itself. */
.nav__close{
  display:none;position:absolute;top:1.1rem;left:var(--gutter);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:1.35rem;line-height:1;cursor:pointer;
}
.nav__close:hover{background:var(--yellow);border-color:var(--yellow)}

.nav-veil{
  position:fixed;inset:0;z-index:110;
  background:rgba(40,38,38,.45);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.nav-veil.is-open{opacity:1;visibility:visible}
.nav__list{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.6rem);list-style:none;margin:0;padding:0}
.nav__link{
  position:relative;display:block;padding:.4rem 0;background:none;border:0;cursor:pointer;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{font-weight:800}

.nav__item{position:relative}
.nav__toggle{display:inline-flex;align-items:center;gap:.35rem}
.nav__toggle svg{width:.6em;height:.6em;transition:transform .25s var(--ease)}
.nav__item.is-open .nav__toggle svg{transform:rotate(180deg)}
.nav__sub{
  position:absolute;top:calc(100% + .75rem);left:50%;translate:-50% 0;
  min-width:236px;list-style:none;margin:0;padding:.45rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav__item:hover .nav__sub,.nav__item.is-open .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{
  display:block;padding:.6rem .8rem;border-radius:4px;
  font-size:.86rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ink);text-decoration:none;
}
.nav__sub a:hover{background:var(--tint);color:var(--gold)}

/* The Enquire button in the bar gets more room than a general small button;
   scoped to .header so the footer's btn--sm buttons are untouched. */
.header .btn{padding-inline:1.85rem}

/* No enclosing circle — just the bars. The tap target stays a full 44px
   square, it simply has no visible border. The bars are heavier and wider
   than before so the control reads as a control at arm's length, and the
   middle one is short, which is what stops three equal lines looking like
   a stack of nothing in particular. */
.burger{
  display:none;width:44px;height:44px;border:0;padding:0;
  background:none;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;-webkit-tap-highlight-color:transparent;
}
.burger span{
  display:block;width:24px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .32s var(--ease),opacity .18s var(--ease),width .32s var(--ease);
}
.burger span:nth-child(2){width:16px;align-self:flex-start;margin-left:10px}
.burger:hover span:nth-child(2){width:24px;margin-left:0}

/* Into a close cross: the short middle bar fades, the outer two meet. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:24px;margin-left:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.burger:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

@media (max-width:1180px){
  :root{--header-h:84px}

  /* Burger left, logo dead centre. The third column is empty on purpose —
     it is what makes the logo optically centred rather than just left of
     the middle. */
  .header__inner{
    display:grid;grid-template-columns:46px 1fr 46px;
    align-items:center;gap:.5rem;
  }
  .burger{display:flex;grid-column:1;justify-self:start}
  .header__logo{grid-column:2;justify-self:center}
  .header__logo img{width:clamp(150px,50vw,230px)}

  .nav__close{display:block}
  .nav{
    position:fixed;inset:0 auto 0 0;width:min(380px,86vw);z-index:120;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:5.2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));
    background:var(--paper);border-right:1px solid var(--line);
    transform:translateX(-100%);transition:transform .38s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open{transform:none;box-shadow:20px 0 50px -30px rgba(40,38,38,.45)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__link{padding:1rem 0;font-size:.94rem;width:100%;text-align:left}
  .nav__link::after{display:none}
  .nav__sub{
    position:static;translate:none;transform:none;opacity:1;visibility:visible;
    background:none;border:0;box-shadow:none;padding:0 0 .55rem .85rem;display:none;
  }
  .nav__item.is-open .nav__sub{display:block}
  .nav .btn{margin-top:1.4rem;justify-content:center}
}

/* ==========================================================================
   Product shot — full landscape frame, with a drawn dimension line beneath.
   The size is the thing people actually decide on, so it gets the treatment
   rather than being buried in the copy.
   ========================================================================== */
.shot{margin:0;display:block}
.shot__img{
  width:100%;aspect-ratio:var(--shot-ratio,3/2);object-fit:cover;
  border-radius:var(--radius);background:var(--soft);
}

/* A signature sits where the dimension line would, on the photographs that
   are about the person rather than the product. */
.shot__sign{margin-top:1.05rem;display:flex;justify-content:flex-end;align-items:center;gap:.9rem}
.shot__sign::before{content:"";flex:1;height:0;border-bottom:2px solid var(--yellow)}
.shot__sign img{width:clamp(140px,45%,196px);height:auto;display:block}
@media (max-width:640px){.shot__sign img{width:clamp(130px,50%,170px)}}

.measure{
  display:flex;align-items:center;gap:.85rem;
  margin-top:.95rem;
  font-size:.71rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;
}
.measure__line{
  flex:1;min-width:12px;height:8px;position:relative;
  border-bottom:2px solid var(--yellow);
}
.measure__line::after{
  content:"";position:absolute;bottom:0;height:8px;width:2px;background:var(--yellow);
}
.measure__line:first-child::after{left:0}
.measure__line:last-child::after{right:0}
.measure__text{flex:none}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero__inner{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem);
}
.hero h1{margin-bottom:.32em}
.hero__lede{font-size:var(--step-1);line-height:1.55;color:var(--mute);max-width:46ch}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;padding-block:2.5rem 3rem}
  .hero__media{order:-1;width:100%}
}

/* Trust strip */
.strip{border-block:1px solid var(--line);background:var(--soft)}
.strip__inner{display:grid;grid-template-columns:repeat(4,1fr)}
.strip__item{
  padding:1.5rem clamp(1rem,2vw,2rem);display:flex;flex-direction:column;gap:.15rem;
  border-left:1px solid var(--line);
}
.strip__item:first-child{border-left:0}
.strip__item b{
  font-family:var(--display);font-size:var(--step-1);color:var(--ink);font-weight:700;
}
.strip__item span{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
@media (max-width:820px){
  .strip__inner{grid-template-columns:repeat(2,1fr)}
  .strip__item:nth-child(odd){border-left:0}
  .strip__item:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ==========================================================================
   Page banner
   ========================================================================== */
.banner{background:var(--soft);border-bottom:1px solid var(--line)}
.banner__inner{
  padding-block:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
}
.banner h1{font-size:var(--step-4)}
.banner__lede{color:var(--mute);font-size:var(--step-1);line-height:1.55;max-width:50ch}
.banner .btn-row{margin-top:1.5rem;margin-bottom:.3rem}
@media (max-width:900px){.banner__inner{grid-template-columns:1fr}}

.crumbs{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:1.1rem}
.crumbs a{text-decoration:none;color:var(--mute)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.4;margin-inline:.45rem}

/* ==========================================================================
   Product rows
   ========================================================================== */
.products{display:block}
.product{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
  padding-block:clamp(2.5rem,5vw,4.25rem);
  border-top:1px solid var(--line);
}
.product:first-child{border-top:0;padding-top:0}
.product:nth-child(even) .product__media{order:2}
.product__body h3{font-size:var(--step-3)}
.product__spec{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-size:.77rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--mute);margin-bottom:1rem;
}
.product__price{
  font-family:var(--display);
  font-size:var(--step-2);font-weight:700;
  display:block;margin:1.1rem 0 0;font-variant-numeric:tabular-nums;
}
.product__price small{
  display:block;font-family:var(--body);font-size:.76rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-top:.3rem;
}
@media (max-width:860px){
  .product{grid-template-columns:1fr;gap:1.75rem}
  .product:nth-child(even) .product__media{order:0}

}

/* ==========================================================================
   Cards
   ========================================================================== */
.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* Text one side, a photograph the other — Brunch, Order, Hen parties and
   Corporate all use this. The gap is much wider than the card grids above,
   and the photo is capped and centred in its column so the two halves are not
   pressed up against each other. */
/* One rule for every text-and-photo section on the site, Philosophy included.
   The photo fills its column: capping it left the shorter sections looking
   hollow, because a small centred image reads fine beside four paragraphs and
   badly beside one. Separation comes from the gap alone. */
.split{
  align-items:center;
  gap:clamp(2rem,5.5vw,5rem);
}
@media (max-width:900px){
  .split{gap:clamp(1.75rem,5vw,2.75rem)}
}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--shadow)}
.card__img{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--soft)}
.card__body{padding:1.4rem 1.4rem 1.55rem;display:flex;flex-direction:column;flex:1}
.card__body h3{font-size:var(--step-1);margin-bottom:.45rem}
.card__body p{font-size:.93rem;color:var(--mute);margin-bottom:1rem}
.card__meta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
.card__meta .price{font-variant-numeric:tabular-nums;color:var(--gold)}
.card__meta .go{display:inline-flex;align-items:center;gap:.4rem;transition:gap .25s var(--ease)}
.card:hover .card__meta .go{gap:.7rem}

/* Compact link list — used for the area pages */
.linklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.linklist a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.15rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;font-weight:700;font-size:.95rem;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.linklist a:hover{border-color:var(--ink);background:var(--tint)}
.linklist small{font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700}

/* ==========================================================================
   Process — a real sequence, so the numbering earns its place
   ========================================================================== */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.step{position:relative;padding-top:2.4rem;border-top:2px solid var(--yellow)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:.85rem;left:0;
  font-size:.76rem;font-weight:700;letter-spacing:.2em;color:var(--gold);
}
.step h3{font-size:var(--step-1);margin-bottom:.4rem}
.step p{font-size:.94rem;color:var(--mute)}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:1.75rem}}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,1.75rem)}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;margin:0;
}
.quote__stars{display:flex;gap:.15rem;margin-bottom:1rem}
.quote__stars svg{width:14px;height:14px;fill:var(--yellow)}
.quote blockquote{
  margin:0 0 1.4rem;font-family:var(--display);font-size:var(--step-1);font-weight:700;
  line-height:1.38;
}
.quote__by{margin-top:auto;display:flex;align-items:center;gap:.8rem}
.quote__by img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--soft)}
.quote__by a{font-size:.82rem;font-weight:700;letter-spacing:.05em;color:var(--gold);text-decoration:none}
.quote__by a:hover{text-decoration:underline}
.quote__by small{display:block;font-size:.72rem;color:var(--mute);letter-spacing:.05em;text-transform:uppercase}

/* ==========================================================================
   Instagram carousel
   Native horizontal scroll with snap points, so it works on touch with no
   JavaScript at all. The arrows are an enhancement, not the mechanism. The
   track runs to the edge of the screen on purpose — a strip that stops at the
   content margin reads as a finished grid rather than something you can scroll.
   ========================================================================== */
.insta-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.75rem,3.5vw,2.5rem);
}
.insta-head h2{margin-bottom:.3em}
.insta-head .lede{max-width:46ch;margin:0}

/* Held to the same width as the rest of the page rather than running to the
   screen edge. The tile width is a fraction of the TRACK, not of the viewport,
   so the number on screen is the same on a laptop and a 27in monitor —
   roughly four and a bit, with the next one peeking to show it scrolls. */
.insta{
  position:relative;
  width:min(1240px, 100% - var(--gutter)*2);
  margin-inline:auto;
  --tile-gap:.7rem;
  --per-view:4.15;
}
/* A short strip fills the row instead of trailing off into empty space. */
.insta--three{--per-view:3}
.insta__track{
  display:flex;gap:var(--tile-gap);list-style:none;margin:0;padding:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.insta__track::-webkit-scrollbar{display:none}
.insta__track:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

.insta__item{
  flex:0 0 calc((100% - (var(--per-view) - 1) * var(--tile-gap)) / var(--per-view));
  scroll-snap-align:start;
}
.insta__item a,.insta__item .gallery__item{
  position:relative;display:block;width:100%;overflow:hidden;
  border-radius:var(--radius);background:var(--soft);
}
.insta__item img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.insta__item a:hover img{transform:scale(1.05)}
.insta__badge{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(40,38,38,.42);opacity:0;
  transition:opacity .28s var(--ease);
}
.insta__item a:hover .insta__badge,
.insta__item a:focus-visible .insta__badge{opacity:1}
.insta__badge svg{width:30px;height:30px;fill:#fff}

.insta__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 22px -14px rgba(40,38,38,.5);
  transition:opacity .25s var(--ease),background .25s var(--ease);
}
.insta__nav svg{width:16px;height:16px}
.insta__nav:hover{background:var(--yellow);border-color:var(--yellow)}
.insta__nav[disabled]{opacity:0;pointer-events:none}
.insta__nav--prev{left:10px}
.insta__nav--prev svg{transform:rotate(180deg)}
.insta__nav--next{right:10px}

/* Fewer, larger tiles as the screen narrows. These come after the modifiers
   above on purpose, so a three-up strip still drops to one-and-a-bit on a
   phone rather than squeezing three tiny cards in. */
@media (max-width:980px){.insta{--per-view:2.3}}
@media (max-width:600px){.insta{--per-view:1.4}}

/* Touch devices scroll it directly; the arrows would only be in the way. */
@media (hover:none),(max-width:760px){.insta__nav{display:none}}
@media (prefers-reduced-motion:reduce){.insta__track{scroll-behavior:auto}}

/* ==========================================================================
   Gallery
   ========================================================================== */
/* Mosaic. Every cell is a multiple of one fixed row height, so rows always
   line up no matter what shape the photographs are — the old version gave the
   wide tiles a 4:3 ratio across two columns, which made them twice as tall as
   their neighbours and left holes in the grid. `dense` backfills those gaps. */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  grid-auto-rows:var(--tile,200px);
  grid-auto-flow:dense;
  gap:.65rem;
}
.gallery__item{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  background:var(--soft);cursor:zoom-in;border:0;padding:0;display:block;
}
.gallery__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.gallery__item:hover img,
.gallery__item:focus-visible img{transform:scale(1.05)}

.gallery__item--wide{grid-column:span 2;grid-row:span 2}
.gallery__item--tall{grid-row:span 2}

/* A quiet affordance that these open larger. */
.gallery__zoom{
  position:absolute;right:.6rem;bottom:.6rem;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  opacity:0;transform:translateY(4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.gallery__zoom svg{width:16px;height:16px}
.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom{opacity:1;transform:none}
.gallery__item:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media (max-width:900px){
  .gallery{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));--tile:165px}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr 1fr;--tile:135px;gap:.5rem}
  .gallery__item--wide{grid-column:span 2;grid-row:span 2}
}

.lightbox{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(40,38,38,.92);
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;border-radius:var(--radius);object-fit:contain}
.lightbox__close{
  position:absolute;top:calc(1.2rem + env(safe-area-inset-top,0px));right:1.2rem;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--paper);color:var(--ink);cursor:pointer;font-size:1.3rem;line-height:1;
}
.lightbox__close:hover{background:var(--yellow)}

/* ==========================================================================
   Prose, lists, accordion
   ========================================================================== */
.prose{max-width:var(--measure)}
.prose h2{font-size:var(--step-2);margin-top:2.4rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--step-1);margin-top:1.9rem}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--gold)}

.callout{
  border-left:3px solid var(--yellow);background:var(--tint);
  padding:1.3rem 1.5rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.9rem 0;
}
.callout p{max-width:none}
.band-tint .callout{background:var(--paper)}

.deflist{border-top:1px solid var(--line);margin:0}
.deflist__row{
  display:grid;grid-template-columns:minmax(160px,.32fr) 1fr;gap:1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.deflist__row dt{font-weight:600;font-size:.83rem;letter-spacing:.08em;text-transform:uppercase}
.deflist__row dd{margin:0;color:var(--mute)}
@media (max-width:620px){.deflist__row{grid-template-columns:1fr;gap:.3rem}}

.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.3rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);
  font-size:var(--step-1);font-weight:700;line-height:1.25;
}
.faq__q:hover{color:var(--gold)}
.faq__icon{flex:none;width:20px;height:20px;position:relative;margin-top:.4em}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:2px;background:var(--gold);
  transition:transform .3s var(--ease);
}
.faq__icon::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:rotate(0)}
.faq__a{display:none;padding:0 0 1.5rem;max-width:var(--measure)}
.faq__a.is-open{display:block}

/* Supplier credit */
/* A short provenance line. It used to carry a supplier logo beside it; with
   the credit gone the mark went too, so this is now text on its own. */
.supplier{display:flex;align-items:center;gap:.7rem;margin:1.7rem 0 0;
          padding-top:1.25rem;border-top:1px solid var(--line)}
.supplier::before{content:"";flex:none;width:22px;height:2px;background:var(--yellow)}
.supplier span{font-size:.74rem;font-weight:700;letter-spacing:.12em;
               text-transform:uppercase;color:var(--mute)}

/* ==========================================================================
   CTA band — the one solid block of colour, on every page
   ========================================================================== */
.cta-band{background:var(--yellow)}
.cta-band__inner{
  padding-block:clamp(3rem,6vw,4.75rem);
  display:grid;grid-template-columns:1.2fr auto;gap:2.25rem;align-items:center;
}
.cta-band h2{font-size:var(--step-3);margin-bottom:.3em}
.cta-band p{color:rgba(40,38,38,.76);max-width:48ch;margin:0}
/* Written as .btn.btn--ghost so the ghost rules outrank the solid ones on
   specificity rather than on source order. The ghost hover previously only
   overrode the border and the text, so it inherited --btn-bg:#000 from the
   rule above and filled in black. */
.cta-band .btn{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink)}
.cta-band .btn:hover{--btn-bg:#000;--btn-bd:#000;--btn-fg:#fff}
.cta-band .btn.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:rgba(40,38,38,.4)}
.cta-band .btn.btn--ghost:hover{--btn-bg:#fff;--btn-bd:#fff;--btn-fg:var(--ink)}
.cta-band .btn-row{margin-top:0}
@media (max-width:820px){.cta-band__inner{grid-template-columns:1fr}}

/* ==========================================================================
   Footer — laid out like the Noble Fox one: social band, collapsible link
   columns, brand and contact details, legal bar. Light theme throughout.
   ========================================================================== */
.footer{background:var(--paper);color:var(--mute);font-size:.95rem}

/* ---- 1. social band ---- */
.footer__social{background:var(--soft);border-block:1px solid var(--line)}
.footer__social-inner{
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  padding-block:1.4rem;
}
.footer__social-label{
  font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
}
.socials{display:flex;gap:.75rem}
.socials a{
  width:50px;height:50px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;background:var(--paper);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.socials a:hover{background:var(--yellow);border-color:var(--yellow);transform:translateY(-2px)}
.socials svg{width:21px;height:21px;fill:var(--ink)}

/* ---- 2. link columns ---- */
.footer__cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  padding-block:clamp(2.5rem,5vw,3.75rem);
}
.footer__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  background:none;border:0;padding:0 0 1.1rem;margin:0;text-align:left;
  font-family:var(--body);font-size:.76rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  cursor:default;pointer-events:none;
}
.footer__ico{display:none}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.footer__list a{color:var(--mute);text-decoration:none}
.footer__list a:hover{color:var(--gold)}

/* ---- 3. brand + contact ---- */
.footer__details{border-top:1px solid var(--line)}
.footer__details-inner{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);
  padding-block:clamp(2rem,4vw,3rem);align-items:start;
}
/* Horizontal lockup, 1701x323, so height is width / 5.27. */
.footer__logo{width:250px;margin-bottom:1.2rem}
.footer__brand p{margin:0 0 .9rem;max-width:52ch;font-size:.93rem}
.footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.footer__mailto{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;color:var(--ink);text-decoration:none;font-size:1rem;
}
.footer__mailto:hover{color:var(--gold)}
.footer__mail{width:20px;height:20px;flex:none}
.footer__contact span{font-size:.86rem}
.footer__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}

/* ---- 4. legal bar ---- */
.footer__bottom{background:var(--soft);border-top:1px solid var(--line)}
.footer__bottom-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;padding-block:1.3rem;font-size:.82rem;
}
.footer__bottom-links{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.footer__bottom a{color:var(--mute);text-decoration:none}
.footer__bottom a:hover{color:var(--gold)}
.footer__legal{flex:1 1 100%;font-size:.78rem;color:var(--mute);opacity:.85}

/* ==========================================================================
   Footer on mobile — the columns become tap-to-open rows with clear rules
   between them, the type steps up, and the social icons centre and grow.
   ========================================================================== */
@media (max-width:820px){
  .footer__social-inner{flex-direction:column;gap:1rem;padding-block:1.75rem}
  .socials{gap:1rem}
  .socials a{width:60px;height:60px}
  .socials svg{width:26px;height:26px}

  .footer__cols{display:block;padding-block:0}
  .footer__col{border-bottom:1px solid var(--line)}
  .footer__head{
    padding:1.25rem 0;font-size:.86rem;letter-spacing:.14em;
    cursor:pointer;pointer-events:auto;
  }
  .footer__ico{
    display:block;flex:none;width:11px;height:11px;margin-top:-5px;
    border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
    transform:rotate(45deg);transition:transform .25s var(--ease);
  }
  .footer__head[aria-expanded="true"] .footer__ico{transform:rotate(-135deg);margin-top:3px}
  .footer__head:focus-visible{outline-offset:-3px}

  .footer__list{padding:0 0 1.35rem;gap:1.05rem}
  .footer__list a{font-size:1.02rem;color:var(--ink)}
  .footer__list[hidden]{display:none}
  #ft-areas{grid-template-columns:1fr 1fr;gap:1rem}

  /* From the logo down, everything centres. */
  .footer__details{border-top:0}
  .footer__details-inner{grid-template-columns:1fr;gap:1.5rem;padding-block:2rem;text-align:center}
  .footer__logo{width:210px;margin-inline:auto}
  .footer__brand p{font-size:1rem;max-width:42ch;margin-inline:auto}
  .footer__contact{align-items:center}
  .footer__mailto{font-size:1.05rem;justify-content:center}
  .footer__contact span{font-size:.92rem;max-width:34ch}
  .footer__acts{justify-content:center}

  .footer__bottom-inner{flex-direction:column;text-align:center;gap:.9rem;padding-block:1.6rem}
  .footer__bottom-links{justify-content:center;gap:.6rem 1.3rem;font-size:.92rem}
  .footer__legal{font-size:.8rem}
}

/* ==========================================================================
   Sticky mobile action bar
   ========================================================================== */
/* The buttons carry the bottom inset rather than the bar, so their colour
   would run to the screen edge if edge-to-edge were switched back on. With it
   off the inset is 0 and this is a plain 56px bar. */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.dock a,.dock button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;
  height:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));
  padding:0 .5rem env(safe-area-inset-bottom,0px);
  border:0;border-left:1px solid var(--line);
  background:var(--paper);color:var(--ink);
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
}
.dock > *:first-child{border-left:0}
.dock .dock__primary{background:var(--yellow);border-left-color:var(--yellow)}
.dock svg{width:1.05em;height:1.05em}
@media (max-width:760px){
  .dock{display:flex}
  /* Reserve exactly the bar's height, not a guess at it. A flat 58px against a
     content-sized bar left a strip of white body showing above it. Plain value
     first, so the calc being unsupported cannot drop the padding entirely. */
  /* Deliberately one pixel short of the bar's full height, so the bar always
     overlaps the seam rather than leaving a hairline of white body showing
     above it. The pixel it covers is footer padding, so nothing is lost. */
  body{padding-bottom:56px}
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px))}
}
/* "Ask us something" is a long label for half a phone screen — let it shrink
   rather than wrap or clip. */
@media (max-width:400px){
  .dock a,.dock button{font-size:.68rem;letter-spacing:.04em;gap:.35rem;padding-inline:.35rem}
}

/* ==========================================================================
   Reveal & utilities
   ========================================================================== */
/* Scoped to .js — without it the content is simply visible, which is what
   must happen if the script never runs. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.centred{text-align:center;margin-inline:auto}
.centred p,.centred .lede{margin-inline:auto}
.centred .eyebrow{justify-content:center}
.centred .eyebrow::after{display:none}