/* ============================================================
   FONTS — self-hosted, subset to Latin, WOFF2. 66 KB for all four.
   font-display:swap means text paints immediately in the fallback and
   reflows when the face arrives; it never blocks the first paint.
   Bodoni and Jost are variable within the range the site actually uses,
   so one file each covers every weight on the page.
   ============================================================ */
@font-face{
  font-family:"Bodoni Moda";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("fonts/bodoni-moda.woff2") format("woff2");
}
@font-face{
  font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/bodoni-moda-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;
  src:url("fonts/jost.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-mono.woff2") format("woff2");
}

/* ============================================================
   DUBAI PORCELAIN v2
   Kiln dark ←→ unglazed biscuit. Gold sampled from the logo.
   Display: Bodoni Moda · Body: Jost · Specs: IBM Plex Mono
   ============================================================ */

:root{
  --gold:#DB961E;
  --gold-hi:#F3C978;
  --ink:#0B0A08;
  --ink-2:#16130E;
  --ink-3:#211C15;
  --biscuit:#EDE7DB;
  --biscuit-2:#E3DCCC;
  --bone:#F7F3EC;
  --ash:#A39B8B;        /* lifted from #8D8577 — was too dim over texture */
  --ash-hi:#C6BEAF;
  --graphite:#433D34;
  --graphite-2:#6B6355;

  --display:"Bodoni Moda",Georgia,serif;
  --body:"Jost",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ochre:#7C570F;      /* gold for LIGHT grounds — AA on glaze + biscuit */
  --pc1:#DB961E;   /* live plate colours, overwritten by script.js §10 */
  --pc2:#8A5C0C;

  --wrap:1180px;
  --pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto is what makes the width/height ATTRIBUTES on every <img> safe.
   Those attributes exist so the browser can reserve the right space before the
   file arrives (no layout shift). Without this line the attribute height is
   taken literally, so an image styled `width:38px` renders 38px wide and 194px
   tall — stretched. Anything that genuinely needs a fixed height (the cards
   that crop with object-fit) sets it on a class selector, which outranks this. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}

.skip{
  position:fixed;left:-999px;top:12px;z-index:999;
  background:var(--gold);color:#000;padding:10px 18px;border-radius:2px;
  font:500 .8rem/1 var(--body);
}
.skip:focus{left:12px}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------------- film grain ---------------- */
.grain{
  position:fixed;inset:-120px;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}    60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,2%)}
}

/* ---------------- loader ---------------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
}
.loader-mark{width:74px;opacity:.9}
.loader-num{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) - 6px);
  font:400 clamp(3rem,11vw,7rem)/1 var(--display);color:var(--gold);
}
.loader-word{
  position:absolute;left:var(--pad);bottom:calc(var(--pad) + 6px);
  font:300 .72rem/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--ash);
}
.hero-flash{
  position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#fff 0%,rgba(255,255,255,.7) 30%,transparent 68%);
}

/* ---------------- travelling plate ---------------- */
.traveller{position:fixed;inset:0;z-index:2;pointer-events:none;perspective:1200px}
.traveller-tilt{
  position:absolute;left:0;top:0;width:clamp(260px,34vw,520px);aspect-ratio:1;
  transform-style:preserve-3d;will-change:transform,opacity;
}
.traveller-tilt img{width:100%;filter:drop-shadow(0 40px 70px rgba(0,0,0,.65));position:relative;z-index:2}

/* Abstract backdrop generated from THIS plate's own rim colours and its
   own radial rhythm (see the aura generator note in README). Turns slowly
   so the halo never reads as a flat sticker behind the plate. */
.traveller-aura{
  position:absolute;left:50%;top:50%;width:172%;aspect-ratio:1;z-index:0;
  transform:translate(-50%,-50%);border-radius:50%;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  /* pulled well back. At 250% / .85 the glow filled the frame on every
     plate and read as the loudest thing on the page, all the way down to
     the archive — which is the part that actually matters. */
  filter:blur(36px) saturate(1);
  opacity:.40;mix-blend-mode:screen;
  animation:auraTurn 78s linear infinite;
}
@keyframes auraTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* two hairline rings, tinted live to the plate */
.traveller-ring{
  position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1;z-index:1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--pc1,#DB961E) 30%, transparent);
  transition:border-color .7s ease;
}
.traveller-ring::before{
  content:"";position:absolute;left:50%;top:50%;width:158%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--pc1,#DB961E) 14%, transparent);
}

/* ---------------- header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:16px 0;transition:transform .45s cubic-bezier(.4,0,.2,1),background .4s,backdrop-filter .4s;
}
.site-header.stuck{background:rgba(11,10,8,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(219,150,30,.13)}
.site-header.hide{transform:translateY(-115%)}
/* A transform on the header makes it the containing block for anything
   fixed inside it — so the mobile nav, which is position:fixed, stopped
   being measured against the viewport and its centred links spilled out
   over the logo. Below the menu breakpoint the header slides with `top`
   instead, leaving no transform in the ancestor chain. */
@media (max-width:860px){
  .site-header{transition:transform .45s cubic-bezier(.4,0,.2,1),
                          top .45s cubic-bezier(.4,0,.2,1),
                          background .45s ease,border-color .45s ease}
  .site-header.hide{transform:none;top:-120px}
  /* backdrop-filter does the same thing as transform here: it makes the
     header a containing block for fixed children. Below the menu
     breakpoint use a solid bar instead so the nav stays tied to the
     viewport and opens full-screen. */
  .site-header.stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,10,8,.96)}
}
.header-inner{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:38px}
.brand-words{display:flex;flex-direction:column;line-height:1.25}
.brand-words strong{font:400 1.02rem/1 var(--display);letter-spacing:.02em}
.brand-words em{font:300 .58rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--ash);font-style:normal;margin-top:5px}

.nav{display:flex;gap:30px}
.nav a{
  font:300 .74rem/1 var(--body);letter-spacing:.19em;text-transform:uppercase;
  text-decoration:none;color:var(--ash-hi);padding:6px 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .35s;
}
.nav a:hover::after{right:0}

.header-cta{
  font:400 .7rem/1 var(--body);letter-spacing:.17em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);background:var(--gold);
  padding:12px 20px;border-radius:2px;white-space:nowrap;
  transition:background .3s,transform .3s;
}
.header-cta:hover{background:var(--gold-hi);transform:translateY(-1px)}

.menu-btn{display:none;background:none;border:0;padding:10px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1px;background:var(--bone);margin:5px 0;transition:.3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------- shared bits ---------------- */
.eyebrow{
  font:400 .66rem/1 var(--body);letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px;
}
.section{position:relative;padding:clamp(90px,13vh,150px) 0}
.section-head{max-width:760px;margin-bottom:clamp(44px,6vw,72px)}
.section-head h2{
  font:400 clamp(2rem,5.2vw,3.6rem)/1.06 var(--display);margin:0;letter-spacing:-.015em;
}
.sec-lede{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.65;color:var(--ash);margin:22px 0 0;max-width:62ch}
.section-head.light h2{color:var(--ink)}
.section-head.light .sec-lede{color:var(--graphite-2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:400 .76rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;padding:17px 30px;border-radius:2px;cursor:pointer;
  border:1px solid transparent;transition:.32s;
}
.btn-gold{background:var(--gold);color:#0B0A08;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn-ghost{background:transparent;color:var(--bone);border-color:rgba(247,243,236,.3)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn-wa{background:transparent;color:var(--ink);border-color:rgba(11,10,8,.28)}
.btn-wa:hover{background:var(--ink);color:var(--biscuit);border-color:var(--ink)}

/* ---------------- hero ---------------- */
.hero{height:180vh;position:relative}          /* was 320vh — the single biggest speed win */
.hero-pin{
  height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--pad);position:relative;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg-img{
  position:absolute;inset:-6%;background:url("images/hero-bg.webp") center/cover no-repeat;
  will-change:transform,opacity;
}
.hero-bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(11,10,8,.34) 0%,rgba(11,10,8,.76) 58%,rgba(11,10,8,.95) 100%),
    linear-gradient(to bottom,rgba(11,10,8,.6),rgba(11,10,8,.35) 42%,rgba(11,10,8,.92));
}
.hero-eyebrow{
  position:relative;z-index:3;
  font:300 .68rem/1 var(--body);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0 0 clamp(20px,3vw,32px);
}
.hero-title{position:relative;z-index:3;margin:0;display:flex;flex-direction:column;line-height:.9}
.hero-word{font:400 clamp(3.2rem,15vw,11rem)/.9 var(--display);display:block;letter-spacing:-.02em}
.hero-word.solid{color:var(--bone)}
.hero-word.outline{
  color:transparent;-webkit-text-stroke:1.2px var(--gold);font-style:italic;
}
.char{display:inline-block;will-change:transform,opacity}
.hero-lede{
  position:relative;z-index:3;max-width:54ch;margin:clamp(26px,4vw,40px) auto 0;
  font-size:clamp(.98rem,1.6vw,1.14rem);line-height:1.68;color:var(--ash-hi);
}
.hero-actions{position:relative;z-index:3;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:clamp(30px,4vw,44px)}

.scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
  font:300 .6rem/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
}
.scroll-hint i{display:block;width:1px;height:44px;background:linear-gradient(var(--gold),transparent)}

/* ---------------- marquee ---------------- */
.ticker{overflow:hidden;padding:22px 0;border-block:1px solid rgba(219,150,30,.15);background:var(--ink-2);position:relative;z-index:3}
.ticker-row{display:flex;gap:34px;white-space:nowrap;will-change:transform;width:max-content}
.ticker-row span{font:300 .82rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--ash-hi)}
.ticker-row i{color:var(--gold);font-style:normal;font-size:.6rem;align-self:center}

/* ---------------- why · pooled glaze ----------------
   The one place the page goes pastel. Porcelain glaze colours — celadon,
   blush, pale cobalt — because that IS the subject's palette, and because
   dark-on-light is the only honest fix for copy nobody could read.
   Background is generated: see the glaze note in README. */
.why{
  position:relative;z-index:4;
  background:
    radial-gradient(ellipse at 68% 22%,rgba(255,255,255,.85),rgba(255,255,255,.24) 42%,transparent 72%),
    #EFEADF;
  color:var(--graphite);
  padding:clamp(80px,11vh,124px) 0 clamp(60px,8vh,92px);
  overflow:hidden;
}
.why .eyebrow{color:var(--ochre)}

/* ---- hero row: copy left, factory photograph bleeding off the right ---- */
.why-hero{
  display:grid;grid-template-columns:44% 56%;align-items:center;
  min-height:clamp(220px,26vw,320px);margin-bottom:clamp(28px,3vw,44px);
}
.why-title{
  margin:0;color:var(--ink);
  font:400 clamp(2.5rem,5vw,4.6rem)/.99 var(--display);letter-spacing:-.025em;
}
.why-title em{color:var(--ochre);font-style:italic}

/* The photograph fades in from the left so it dissolves into the ground
   rather than sitting in a box, and runs past the right edge of .wrap. */
.why-hero-photo{
  position:relative;height:clamp(200px,24vw,310px);
  margin-left:-8%;margin-right:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 8%,#000 24%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 8%,#000 24%,#000 88%,transparent 100%);
}
.why-hero-photo img{
  width:100%;height:100%;display:block;object-fit:cover;
  mix-blend-mode:multiply;opacity:.92;
}

/* ---- the three proof cards ---- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px)}
.why-card{
  background:rgba(255,255,255,.6);border:1px solid rgba(67,61,52,.08);
  border-radius:3px;overflow:hidden;display:flex;flex-direction:column;
}
/* The number straddles the bottom edge of the photograph, so the photograph
   needs its own clipping wrapper. Putting overflow:hidden on .why-shot itself
   sliced the badge in half. */
.why-shot{position:relative;height:clamp(190px,17vw,250px);background:#E4DED2}
.why-shot-media{display:block;width:100%;height:100%;overflow:hidden}
.why-shot img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.why-card:hover .why-shot img{transform:scale(1.04)}
/* the number straddles the image edge — it needs to paint above both */
.why-num{
  position:absolute;left:calc(50% - 23px);bottom:-23px;z-index:3;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ochre);color:#FFFBF3;border:3px solid #F7F4EE;
  font:400 .76rem/1 var(--mono);letter-spacing:.06em;
  box-shadow:0 4px 14px rgba(60,45,20,.18);
  isolation:isolate;backface-visibility:hidden;
}
.why-body{padding:44px clamp(18px,2vw,30px) 26px;text-align:center;flex:1;display:flex;flex-direction:column}
.why-body h3{
  margin:0;color:var(--ink);
  font:400 clamp(1.15rem,1.5vw,1.42rem)/1.18 var(--display);letter-spacing:-.01em;
}
.why-rule{display:block;height:1px;background:rgba(67,61,52,.16);margin:22px 0 20px}
.why-proof{
  list-style:none;margin:auto 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;
}
.why-proof-4{grid-template-columns:repeat(4,1fr)}
.why-proof li{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:300 .66rem/1.4 var(--body);letter-spacing:.02em;color:var(--graphite);
}

/* ---- the manufacturing strip under the cards ---- */
.why-strip{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  margin-top:clamp(28px,3.4vw,42px);
  font:400 .62rem/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--graphite);
}
.why-strip-msg,.why-strip-made{display:flex;align-items:center;gap:11px;white-space:nowrap}
.why-strip-made{color:var(--ochre)}
.why-strip-msg .ico{color:var(--ochre)}
.why-strip-line{flex:1;height:1px;background:rgba(124,87,15,.28);min-width:20px}
/* Drawn entirely in CSS: a red hoist bar, then green / white / black bands.
   The previous version stacked three spans inside an inline-flex parent, which
   laid them out in a ROW — hence one red block and nothing else. */
.uae-flag{
  display:inline-block;width:34px;height:22px;flex:none;
  border:1px solid rgba(67,61,52,.22);background-color:#D71920;
  background-image:linear-gradient(to bottom,
    #00843D 0,#00843D 33.34%,
    #FFFFFF 33.34%,#FFFFFF 66.67%,
    #111111 66.67%,#111111 100%);
  background-size:calc(100% - 9px) 100%;
  background-position:100% 50%;
  background-repeat:no-repeat;
}

/* ---------------- statement ---------------- */
.statement{position:relative;padding:clamp(110px,17vh,190px) 0;overflow:hidden;isolation:isolate}
.stmt-bg{position:absolute;inset:0;z-index:0}
.stmt-bg-img{position:absolute;inset:-8%;background:url("images/bespoke-bg.webp") center/cover no-repeat;will-change:transform}
.stmt-bg-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,10,8,.9),rgba(11,10,8,.66) 45%,rgba(11,10,8,.94))}
.statement-inner{position:relative;z-index:3;text-align:center}
.stmt-logo{width:clamp(150px,20vw,230px);margin:0 auto clamp(34px,5vw,54px);opacity:.94}
.big{font:400 clamp(1.55rem,3.9vw,2.9rem)/1.32 var(--display);margin:0 auto;max-width:19ch;letter-spacing:-.01em}
.stat-row{display:flex;justify-content:center;gap:clamp(30px,7vw,90px);flex-wrap:wrap;margin-top:clamp(48px,7vw,80px)}
.stat strong{display:block;font:400 clamp(2.3rem,6vw,4rem)/1 var(--display);color:var(--gold)}
/* a worded figure rather than a counted one — sized down a little so it
   sits level with the numerals beside it instead of overpowering them */
.stat-word{font-size:clamp(1.9rem,4.4vw,3.1rem) !important;letter-spacing:-.01em}
.stat span{display:block;margin-top:12px;font:300 .68rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--ash)}
.ast{font-style:normal;color:var(--gold)}
.stat-note{margin-top:34px;font:300 .68rem/1 var(--body);letter-spacing:.14em;color:var(--ash);opacity:.72}

.ghost{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:1;
  font:400 clamp(10rem,34vw,28rem)/1 var(--display);font-style:italic;
  color:transparent;-webkit-text-stroke:1px rgba(219,150,30,.14);
  white-space:nowrap;pointer-events:none;will-change:transform;
}

/* ---------------- gold wipe ---------------- */
.wipe{position:relative;height:clamp(340px,52vh,520px);overflow:hidden;display:grid;place-items:center;isolation:isolate}
/* the customisation panel carries more weight than the archive one */
.wipe.wipe-tall{height:clamp(420px,66vh,640px)}
.wipe.wipe-beige .wipe-gold{
  background:linear-gradient(120deg,#D9CBB4,#EFE6D6 34%,#F6EFE2 52%,#EDE3D2 70%,#D9CBB4);
  mix-blend-mode:normal;opacity:.94;
}
.wipe.wipe-beige .wipe-inner::before{
  background:radial-gradient(ellipse at center,#F4ECDD 0%,rgba(244,236,221,.88) 54%,transparent 80%);
}
.wipe.wipe-beige .wipe-kicker{color:rgba(11,10,8,.58)}
.wipe.wipe-beige .wipe-title{color:#171310}
.wipe-tall .wipe-title{font-size:clamp(2.6rem,8.4vw,6.2rem);line-height:.98}
.wipe-tall .wipe-inner{padding:48px 54px}
.wipe-sub{
  margin:22px 0 0;font:400 clamp(.8rem,1.3vw,1rem)/1 var(--mono);
  letter-spacing:.26em;text-transform:uppercase;color:#6B5836
}
.wipe-photo{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.wipe-gold{
  position:absolute;inset:0;z-index:1;transform:scaleY(0);transform-origin:center;
  background:linear-gradient(120deg,#8A5C0C,var(--gold) 34%,var(--gold-hi) 52%,var(--gold) 70%,#8A5C0C);
  mix-blend-mode:multiply;
}
.wipe-inner{position:relative;z-index:3;text-align:center;padding:34px 46px}
.wipe-inner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at center,var(--gold) 0%,rgba(219,150,30,.86) 52%,transparent 78%);
  opacity:0;transition:opacity .5s;
}
.wipe.on .wipe-inner::before{opacity:1}
.wipe-kicker{font:400 .82rem/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:rgba(11,10,8,.72);margin:0 0 20px;text-shadow:0 1px 16px rgba(255,244,222,.5)}
.wipe-tall .wipe-kicker{font-size:clamp(.92rem,1.5vw,1.15rem);letter-spacing:.36em;margin-bottom:26px}
.wipe.wipe-beige .wipe-kicker{color:#6B5836}
.wipe-title{font:400 clamp(2.2rem,7vw,5rem)/1.02 var(--display);margin:0;color:var(--ink);letter-spacing:-.02em;
  /* the panel is bright gold behind this — a soft light halo keeps the
     dark letterforms readable even at the brightest part of the plate */
  text-shadow:0 2px 26px rgba(255,244,222,.55)}

/* ---------------- the reel / archive ---------------- */
/* Two true halves. Copy is centred in the left one, the fixed plate is
   flown into the right one. They can no longer collide.
   --pc1 / --pc2 are the live plate's own rim colours, set by script.js. */
.reel{height:380vh;position:relative}      /* was 620vh */
.reel-pin{
  height:100vh;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
}
.reel-stage{
  grid-column:1;display:grid;place-items:center;
  height:100%;padding-inline:clamp(18px,3vw,48px);position:relative;z-index:3;
}
.reel-void{grid-column:2}

.reel-inner{margin-left:-2.5vw;
  position:relative;width:min(100%,540px);
  padding:clamp(34px,3.4vw,52px) clamp(28px,3vw,46px);
  /* pulled left, away from the plate */
  margin-left:clamp(-64px,-3.4vw,-18px);
}

/* the panel: a dark pool tinted with the plate's own colour, over a blur
   of whatever texture is behind. This is what makes the copy pop. */
.reel-inner::before{
  content:"";position:absolute;inset:-8% -12%;z-index:-2;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(11,10,8,.97) 0%, rgba(11,10,8,.93) 40%,
      color-mix(in srgb,var(--pc2) 12%, rgba(11,10,8,.72)) 62%,
      transparent 82%);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  /* the mask fades the BLUR as well as the fill — without it the
     backdrop-filter stops on a hard ellipse edge you can see. */
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 44%,transparent 80%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 44%,transparent 80%);
  transition:background .7s ease;
}
/* concentric hairlines — the rim of a plate, abstracted, in its own colour */
.reel-inner::after{
  content:"";position:absolute;inset:-30% -34%;z-index:-3;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,
    transparent 0 33px,
    color-mix(in srgb,var(--pc1) 26%, transparent) 33px 34px,
    transparent 34px 68px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 8%,transparent 66%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 8%,transparent 66%);
  opacity:.55;transition:background .7s ease;
}

.reel-title{font:400 clamp(2.1rem,5.4vw,3.7rem)/1.04 var(--display);margin:0 0 18px;letter-spacing:-.015em}
.reel-desc{font-size:1.02rem;line-height:1.68;color:var(--ash-hi);margin:0 0 30px}

.reel-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px;margin:0 0 34px}
.reel-spec div{
  border-top:1px solid color-mix(in srgb,var(--pc1) 45%, transparent);
  padding-top:11px;transition:border-color .7s ease;
}
.reel-spec dt{font:400 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.reel-spec dd{margin:0;font:400 .88rem/1.4 var(--mono);color:var(--bone)}

.reel-count{font:400 .78rem/1 var(--mono);letter-spacing:.14em;color:var(--ash-hi);display:flex;align-items:center;gap:14px;margin:0}
.reel-count i{display:block;width:56px;height:1px;background:color-mix(in srgb,var(--pc1) 60%, transparent)}

/* the giant number lives behind the PLATE half, not behind the copy */
.reel-ghost{
  position:absolute;right:1vw;top:50%;transform:translateY(-50%);z-index:1;
  font:400 clamp(9rem,24vw,21rem)/1 var(--display);font-style:italic;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--pc1) 16%, transparent);
  pointer-events:none;transition:-webkit-text-stroke-color .7s ease;
}

/* ---------------- horizontal gallery ---------------- */
.gallery{position:relative}
.gallery-pin{height:100vh;overflow:hidden;display:flex;align-items:center;position:relative}
.gallery-track{display:flex;gap:clamp(16px,2.2vw,30px);padding-inline:var(--pad);will-change:transform;width:max-content;align-items:center}
.g-lead{min-width:min(74vw,400px);padding-right:clamp(20px,4vw,60px)}
.g-lead h2{font:400 clamp(1.9rem,4.4vw,3.2rem)/1.06 var(--display);margin:0 0 20px}
.g-lead-note{font:300 .74rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.card{
  margin:0;width:clamp(210px,25vw,308px);border-radius:3px;overflow:hidden;
  background:var(--ink-2);border:1px solid rgba(219,150,30,.16);will-change:transform;
}
.card-top{
  aspect-ratio:1;display:grid;place-items:center;padding:11%;
  background:linear-gradient(150deg,var(--c1),var(--c2));
}
.card-top img{width:100%;filter:drop-shadow(0 16px 26px rgba(0,0,0,.28))}
.card figcaption{padding:20px 22px;display:flex;flex-direction:column;gap:7px;background:var(--ink)}
.card figcaption b{font:400 1.05rem/1 var(--display)}
.card figcaption span{font:400 .62rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.gallery-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:44px;height:1px;background:rgba(219,150,30,.2)}
.gallery-progress i{display:block;height:100%;width:0;background:var(--gold)}

/* ============================================================
   BISCUIT — the page turns over to unglazed porcelain
   ============================================================ */
.biscuit{
  position:relative;z-index:4;               /* must clear the fixed plate */
  background:var(--biscuit);color:var(--graphite);
  padding:clamp(90px,14vh,160px) 0;
}
.biscuit::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.7),transparent 60%);
}
.biscuit > .wrap{position:relative;z-index:1}
.biscuit .eyebrow{color:var(--ochre)}

/* ---- bodies ----------------------------------------------------------
   Code, name and use-case above the photograph; three attributes under it;
   one line of guidance at the foot, divided off by a rule. Cards are equal
   height, so the foot line always sits on the same baseline across the row. */
.bodies-title{margin:0;color:var(--ink);font:400 clamp(2.3rem,4.8vw,4.4rem)/.99 var(--display);letter-spacing:-.028em}
.bodies-title em{color:var(--ochre);font-style:italic}

.body-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(50px,7vw,84px)}
.body-card{
  background:rgba(255,255,255,.62);border:1px solid rgba(67,61,52,.1);
  border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.body-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(60,45,20,.09)}
.body-top{padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px) clamp(14px,1.6vw,18px)}
.body-code{font:400 .62rem/1 var(--mono);letter-spacing:.18em;color:var(--ochre);display:block;margin-bottom:14px}
.body-card h3{font:400 clamp(1.08rem,1.55vw,1.34rem)/1.2 var(--display);margin:0 0 5px;color:var(--ink)}
.body-form{font:300 .68rem/1.4 var(--body);letter-spacing:.02em;color:var(--graphite-2);margin:0}
/* the photograph fades up into the card rather than butting against the text */
/* No negative margin. It pulled the photograph up over the use-case line
   ("Fine Dining"), and the fade at the top of the image hid it rather than
   softening it. The image starts below the text and fades up into the card. */
.body-shot{position:relative;height:clamp(180px,17vw,235px);overflow:hidden}
.body-shot img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.body-card:hover .body-shot img{transform:scale(1.035)}
.body-shot::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(252,250,246,.85),rgba(252,250,246,0) 26%);
}
.body-tags{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:9px;margin:0;padding:clamp(16px,1.8vw,22px) clamp(12px,1.4vw,18px);
}
.body-tags li{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  font:300 .64rem/1.35 var(--body);letter-spacing:.01em;color:var(--graphite);
}
.body-note{
  margin:auto 0 0;padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,24px) clamp(20px,2.2vw,26px);
  border-top:1px solid rgba(67,61,52,.11);text-align:center;
  font:300 .8rem/1.55 var(--body);color:var(--graphite);
}

/* ---- what we do ------------------------------------------------------
   Four cards, each a small journey: who it is for, what we make, what they
   get. Light section, so every gold is --ochre, never --gold. */
.wwd{
  position:relative;z-index:4;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.9),transparent 58%),var(--biscuit);
  color:var(--graphite);
  padding:clamp(72px,10vh,116px) 0 clamp(76px,10vh,120px);
  border-top:1px solid rgba(67,61,52,.08);
}
.wwd .eyebrow{color:var(--ochre)}
.wwd-head{text-align:center;margin-bottom:clamp(38px,4.6vw,62px)}
.wwd-title{
  margin:14px 0 0;color:var(--ink);
  font:400 clamp(2.1rem,4.2vw,3.9rem)/1.06 var(--display);letter-spacing:-.024em;
}
.wwd-title em{color:var(--ochre);font-style:italic}
/* the small rule-and-diamond under the headline */
.wwd-diamond{
  display:block;width:120px;height:9px;margin:26px auto 0;position:relative;
  background:linear-gradient(to right,transparent,rgba(124,87,15,.45) 22%,rgba(124,87,15,.45) 78%,transparent);
  background-size:100% 1px;background-position:0 50%;background-repeat:no-repeat;
}
.wwd-diamond::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--ochre);
}

.wwd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,22px)}
.wwd-card{
  background:rgba(255,255,255,.66);border:1px solid rgba(67,61,52,.09);
  border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .5s ease;
}
.wwd-card:hover{box-shadow:0 16px 38px rgba(60,45,20,.1)}
/* same as .why-shot — the badge overhangs, so the clip lives on the wrapper */
.wwd-shot{position:relative;height:clamp(170px,15.5vw,215px);background:#E4DED2}
.wwd-shot-media{display:block;width:100%;height:100%;overflow:hidden}
.wwd-shot img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.wwd-card:hover .wwd-shot img{transform:scale(1.045)}
.wwd-badge{
  position:absolute;left:calc(50% - 26px);bottom:-25px;z-index:3;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ochre);color:#FFFBF3;border:3px solid #F8F5EF;
  box-shadow:0 4px 16px rgba(60,45,20,.2);
  isolation:isolate;backface-visibility:hidden;
}
.wwd-badge .ico{width:23px;height:23px}
.wwd-body{padding:48px clamp(16px,1.7vw,26px) clamp(24px,2.4vw,30px);text-align:center;flex:1;display:flex;flex-direction:column}
.wwd-body h3{
  margin:0;color:var(--ink);
  font:400 clamp(1.02rem,1.4vw,1.26rem)/1.24 var(--display);letter-spacing:-.008em;
}
.wwd-rule{
  display:block;width:82px;height:7px;margin:18px auto 22px;position:relative;
  background:linear-gradient(to right,transparent,rgba(124,87,15,.4) 20%,rgba(124,87,15,.4) 80%,transparent);
  background-size:100% 1px;background-position:0 50%;background-repeat:no-repeat;
}
.wwd-rule::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--ochre);
}
.wwd-journey{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:flex-start;justify-content:center;gap:clamp(4px,.6vw,9px);
}
.wwd-journey > li{
  display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;
  font:300 .62rem/1.35 var(--body);color:var(--graphite);text-align:center;
}
/* the arrow between steps — drawn, so it scales with the type */
.wwd-journey .wwd-arrow{
  flex:0 0 14px;align-self:flex-start;margin-top:12px;position:relative;height:8px;
  background:linear-gradient(to right,rgba(124,87,15,.55),rgba(124,87,15,.55));
  background-size:100% 1px;background-position:0 50%;background-repeat:no-repeat;
}
.wwd-journey .wwd-arrow::after{
  content:"";position:absolute;right:0;top:50%;width:4px;height:4px;
  border-top:1px solid rgba(124,87,15,.55);border-right:1px solid rgba(124,87,15,.55);
  transform:translateY(-50%) rotate(45deg);
}
.wwd-body p{
  margin:auto 0 0;padding-top:20px;
  font:300 .82rem/1.62 var(--body);color:var(--graphite);
}

/* the reassurance strip under the four cards */
.wwd-strip{
  list-style:none;margin:clamp(24px,2.6vw,34px) 0 0;padding:clamp(20px,2.2vw,28px) clamp(14px,2vw,30px);
  display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid rgba(67,61,52,.12);border-radius:6px;background:rgba(255,255,255,.45);
}
.wwd-strip li{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font:300 .72rem/1.4 var(--body);color:var(--graphite);text-align:left;
}
.wwd-strip li + li{border-left:1px solid rgba(67,61,52,.12)}
.wwd-strip .ico{flex:none}

.ranges{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.range{background:var(--ink);color:var(--bone);border-radius:3px;padding:clamp(28px,3.4vw,44px)}
.range-tag{
  display:inline-block;font:400 .6rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(219,150,30,.42);padding:8px 13px;border-radius:2px;margin-bottom:22px;
}
.range h3{font:400 clamp(1.3rem,2.2vw,1.7rem)/1.2 var(--display);margin:0 0 14px}
.range p{margin:0;font-size:.93rem;line-height:1.72;color:var(--ash)}

/* ---------------- customisation ---------------- */
.custom{position:relative;padding:clamp(100px,15vh,170px) 0;overflow:hidden;isolation:isolate;z-index:3}
.custom-bg{position:absolute;inset:0;z-index:0}
.custom-bg-img{position:absolute;inset:-8%;background:url("images/tex/tex-custom.webp") center/cover no-repeat;will-change:transform}
.custom-bg-veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,10,8,.95) 0%,rgba(11,10,8,.85) 42%,rgba(11,10,8,.42) 100%);
}
.custom-inner{position:relative;z-index:3;max-width:640px}
.custom-inner .eyebrow{
  font-size:clamp(.86rem,1.35vw,1.05rem);letter-spacing:.32em;
  color:var(--gold);margin-bottom:22px
}
.custom-inner .tech-grid,
.custom-inner .custom-mark{max-width:none;width:100%}
.custom-inner{max-width:none}
.custom-inner .eyebrow,
.custom-inner h2,
.custom-inner .custom-lede{max-width:640px}
.custom-inner h2{font:400 clamp(2rem,5vw,3.4rem)/1.08 var(--display);margin:0;letter-spacing:-.015em}
.custom-lede{font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.7;color:var(--ash-hi);margin:24px 0 40px;max-width:52ch}
.custom-list{list-style:none;margin:0 0 44px;padding:0;display:grid;gap:1px;background:rgba(219,150,30,.18)}
.custom-list li{background:var(--ink);padding:20px 0 20px 0;display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline}
.custom-list b{font:400 1.02rem/1.3 var(--display);min-width:230px;color:var(--bone)}
.custom-list span{font-size:.88rem;line-height:1.6;color:var(--ash);flex:1;min-width:220px}

/* ============================================================
   SPECIFICATION BUILDER — the signature
   ============================================================ */
.builder{
  display:grid;grid-template-columns:300px 1fr;
  gap:clamp(40px,6vw,110px);align-items:start;
}
.spec-readout{
  position:sticky;top:110px;background:var(--ink);color:var(--bone);
  border-radius:3px;padding:clamp(24px,2.6vw,32px);
}
/* the mark sits where the readout used to, on the biscuit ground rather
   than in a dark box, so it reads as part of the page */
/* the mark shifts left and the questions sit further right, so the two
   columns read as separate rather than crowding the middle */
.spec-mark{
  position:sticky;top:120px;
  margin-left:clamp(-56px,-3vw,-16px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(10px,2vw,26px) 0;
}
.spec-mark img{
  width:min(100%,268px);height:auto;
  opacity:.94;mix-blend-mode:multiply;
}
.spec-label{font:400 .6rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:20px}
.spec-line{
  font:400 clamp(.92rem,1.35vw,1.06rem)/1.75 var(--mono);
  margin:0;color:var(--bone);word-break:break-word;min-height:5.2em;
}
.spec-line .dim{color:var(--ash);opacity:.5}
.spec-progress{height:1px;background:rgba(219,150,30,.22);margin-top:24px}
.spec-progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .45s cubic-bezier(.4,0,.2,1)}

.spec-form{display:grid;gap:clamp(26px,3vw,40px);margin-left:clamp(12px,2.4vw,44px)}
.hp{position:absolute;left:-9999px}
.choice,.details{border:0;padding:0;margin:0}
.choice legend,.details legend{
  font:400 clamp(1rem,1.5vw,1.16rem)/1.3 var(--display);color:var(--ink);
  padding:0 0 16px;display:flex;align-items:baseline;gap:12px;
}
.q-num{font:400 .62rem/1 var(--mono);letter-spacing:.14em;color:var(--ochre)}

.opts{display:flex;flex-wrap:wrap;gap:9px}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;width:0;height:0}
.opts span{
  display:inline-block;padding:12px 18px;border-radius:2px;
  border:1px solid rgba(67,61,52,.24);background:rgba(255,255,255,.5);
  font:300 .84rem/1 var(--body);color:var(--graphite);transition:.24s;
}
.opts label:hover span{border-color:rgba(169,118,26,.6)}
.opts input:checked + span{background:var(--ink);color:var(--biscuit);border-color:var(--ink)}
.opts input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:9px}
.field-wide{grid-column:1/-1}
.field span{font:400 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-2)}
.field input,.field textarea{
  font:300 .95rem/1.5 var(--body);color:var(--ink);
  background:rgba(255,255,255,.6);border:1px solid rgba(67,61,52,.24);
  border-radius:2px;padding:14px 15px;width:100%;transition:.24s;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:rgba(67,61,52,.42)}

.spec-actions{display:flex;gap:12px;flex-wrap:wrap}
.spec-foot{font:300 .78rem/1.5 var(--body);color:var(--graphite-2);margin:0}

.contact-strip{scroll-margin-top:120px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px);
  margin-top:clamp(60px,8vw,100px);padding-top:clamp(34px,4vw,50px);
  border-top:1px solid rgba(67,61,52,.18);
}
.c-label{font:400 .6rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ochre);display:block;margin-bottom:14px}
.c-line{font:400 clamp(1rem,1.5vw,1.18rem)/1.4 var(--display);color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(169,118,26,.4);transition:.25s}
.c-line:hover{color:var(--ochre)}
.contact-strip p{margin:0;font-size:.88rem;line-height:1.7;color:var(--graphite-2)}

/* ---------------- clients ---------------- */
.clients{padding:clamp(80px,12vh,130px) 0;position:relative;z-index:3;background:var(--ink)}
.clients-head{text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.clients-head h2{font:400 clamp(1.6rem,3.6vw,2.5rem)/1.14 var(--display);margin:0}
.client-wall{
  list-style:none;margin:0 auto;padding:0 var(--pad);
  width:min(100%,1280px);
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
}
/* 38 logos leave two over on the last row. Nudge the 37th into the middle
   columns so the remainder sits centred instead of hanging off the left. */
.client-wall li:nth-child(37){grid-column-start:3}
.client-wall li{
  background:#F4EFE6;border:1px solid rgba(219,150,30,.24);border-radius:2px;
  aspect-ratio:16/9;display:grid;place-items:center;padding:14px;
  position:relative;overflow:hidden;will-change:transform,opacity;
}
.client-wall img{max-height:52px;width:auto;object-fit:contain}
.client-wall li::after{
  content:"";position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);
  transition:transform .7s;
}
.client-wall li:hover::after{transform:translateX(110%)}

/* ---------------- footer ---------------- */
.site-footer{background:var(--ink-2);padding:52px 0;position:relative;z-index:3;border-top:1px solid rgba(219,150,30,.13)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
/* the header lockup, repeated on the left. Slightly larger than the header
   copy — nothing competes with it down here. */
.footer-brand{display:flex;align-items:center;gap:20px;text-decoration:none;padding:6px 0}
.footer-brand img{width:74px}
.footer-brand .brand-words{gap:4px}
.footer-brand .brand-words strong{font-size:clamp(1.35rem,2.1vw,1.75rem);color:var(--bone);letter-spacing:.01em}
.footer-brand .brand-words em{font-size:.68rem;letter-spacing:.24em}
/* the mark now sits above the footer text rather than beside it */
.footer-logo{width:118px;opacity:.92;align-self:center;margin-bottom:12px}
.footer-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;font:300 .76rem/1.5 var(--body);color:var(--ash)}

/* ---- social ---- */
.footer-social{list-style:none;display:flex;align-items:center;gap:14px;margin:0;padding:0}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(219,150,30,.34);color:var(--gold);
  text-decoration:none;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.footer-social a:hover,.footer-social a:focus-visible{
  background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-2px);
}
.footer-social svg{
  width:20px;height:20px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* the Facebook glyph is a solid shape, not a line drawing */
.footer-social li:last-child svg{fill:currentColor;stroke:none}

/* ============================================================
   SECTION TEXTURES — no dark block is ever flat black.
   Felt, not seen. If you can make out the image it is too strong.
   ============================================================ */
/* The why section used to carry a generated pooled-glaze background. It now
   carries the factory photograph and its own cream ground instead, so the
   texture would fight it. images/glaze-why.webp is kept in the folder in
   case the section is ever reverted; see the glaze note in the README. */
.clients::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
}
.clients::before{background-image:linear-gradient(rgba(11,10,8,.95),rgba(11,10,8,.95)),url("images/tex/tex-wall.webp")}
.clients > *{position:relative;z-index:1}

.reel-pin::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(11,10,8,.93),rgba(11,10,8,.93)),url("images/tex/tex-gallery.webp");
  background-size:cover;background-position:center;
}
.gallery-pin::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(11,10,8,.94),rgba(11,10,8,.94)),url("images/tex/tex-gold.webp");
  background-size:cover;background-position:center;
}
.gallery-track,.gallery-progress{position:relative;z-index:2}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .builder{grid-template-columns:1fr}
  .spec-mark{margin-left:0}
  .spec-form{margin-left:0}
  .spec-readout{position:static}
  .spec-mark{position:static;padding:0 0 6px}
  .spec-mark img{width:min(72%,220px)}
  .body-grid{grid-template-columns:repeat(2,1fr)}
  .contact-strip{grid-template-columns:repeat(2,1fr)}
  .client-wall{grid-template-columns:repeat(4,1fr)}
  .client-wall li:nth-child(37){grid-column-start:2}
}

@media (max-width:860px){
  .header-cta{display:none}
  .menu-btn{display:block}
  .nav{
    position:fixed;inset:0;background:rgba(11,10,8,.97);backdrop-filter:blur(20px);
    flex-direction:column;align-items:center;justify-content:center;gap:30px;
    transform:translateY(-100%);transition:transform .5s cubic-bezier(.4,0,.2,1);
  }
  .nav.open{transform:translateY(0)}
  .nav a{font-size:1.05rem;letter-spacing:.24em}
  .why-grid{grid-template-columns:1fr;gap:34px}
  .ranges{grid-template-columns:1fr}
  .hero{height:150vh}
  .reel{height:330vh}
  .reel-pin{grid-template-columns:1fr}
  .reel-void{display:none}
  .reel-stage{grid-column:1;align-items:end;padding-bottom:7vh}
  .reel-inner{margin-left:-2.5vw;width:min(100%,540px);text-align:center;padding-inline:22px}
  .reel-inner::before{inset:-6% -14%}
  .reel-spec{margin-inline:auto;grid-template-columns:1fr 1fr;max-width:400px}
  .reel-count{justify-content:center}
  .reel-ghost{right:auto;left:50%;top:24%;transform:translate(-50%,-50%);font-size:clamp(8rem,40vw,14rem)}
  .traveller-tilt{width:min(58vw,300px)}
  .custom-list b{min-width:100%}
}

/* ============================================================
   ICONS — one sprite, stroked, inherits colour from its section.
   ============================================================ */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:26px;height:26px;display:block;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--graphite-2);
}
.why-proof .ico,.body-tags .ico{color:var(--graphite-2)}
.wwd-journey .ico,.wwd-strip .ico{color:var(--ochre)}
.wwd-badge .ico{color:inherit;stroke-width:1.3}
.why-strip .ico{width:22px;height:22px}

/* ---- the three light sections, narrower ---- */
@media (max-width:1180px){
  .wwd-grid{grid-template-columns:repeat(2,1fr)}
  .wwd-strip{grid-template-columns:repeat(3,1fr);gap:20px 0}
  .wwd-strip li:nth-child(3n+1){border-left:0}
}
@media (max-width:1040px){
  .why-hero{grid-template-columns:1fr;gap:26px}
  .why-hero-photo{
    margin:0 calc(50% - 50vw);height:clamp(180px,30vw,260px);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
  }
  .why-grid{grid-template-columns:1fr;gap:16px}
  .why-shot{height:clamp(200px,34vw,290px)}
  .why-strip{flex-direction:column;align-items:flex-start;gap:16px}
  .why-strip-line{width:100%;flex:none}
  .why-strip-msg,.why-strip-made{white-space:normal}
}
@media (max-width:620px){
  .wwd-grid{grid-template-columns:1fr}
  .wwd-strip{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .wwd-strip li{border-left:0!important}
  .wwd-strip li:nth-child(2n){border-left:1px solid rgba(67,61,52,.12)!important}
  .why-proof-4{grid-template-columns:repeat(2,1fr);row-gap:20px}
}

@media (max-width:620px){
  .body-grid{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr}
  .client-wall{grid-template-columns:repeat(3,1fr);gap:8px}
  .client-wall img{max-height:34px}
  .footer-inner{flex-direction:column;text-align:center;gap:30px}
  .footer-meta{text-align:center;align-items:center}
  .footer-logo{align-self:center}
  .footer-brand{justify-content:center}
  .footer-social{order:3}
  .hero-actions{width:100%;flex-direction:column}
  .hero-actions .btn{width:100%}
  .spec-actions .btn{width:100%}
}

/* ============================================================
   FALLBACK — libraries failed to load, or reduced motion.
   The page must still read as a finished document.
   ============================================================ */
.no-motion .loader,.no-motion .traveller,.no-motion .grain,
.no-motion .hero-flash,.no-motion .scroll-hint{display:none!important}
.no-motion .hero,.no-motion .reel{height:auto}
.no-motion .hero-pin{min-height:88vh;height:auto;padding-block:120px}
.no-motion .reel-pin,.no-motion .gallery-pin{height:auto;padding-block:90px;display:block}
.no-motion .reel-inner{margin-left:-2.5vw;margin-top:0;max-width:100%}
.no-motion .gallery-track{flex-wrap:wrap;justify-content:center;width:auto}
.no-motion .wipe-gold{transform:scaleY(1)}
.no-motion .wipe-inner::before{opacity:1}
.no-motion [data-fade],.no-motion .char,.no-motion .word{opacity:1!important;transform:none!important}
/* the three light sections animate through their own hooks, so they need
   their own reset — otherwise a library failure leaves them invisible */
.no-motion [data-rise],.no-motion [data-why-card],.no-motion [data-why-photo],
.no-motion [data-wwd],.no-motion [data-wwd-strip],.no-motion [data-body-card],
.no-motion .wwd-journey > li,.no-motion .why-proof li,.no-motion .body-tags li{
  opacity:1!important;transform:none!important;clip-path:none!important
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .grain{display:none}
}

/* ============================================================
   HORECA · restaurant, café and catering
   Dark section with a photographic ground, sitting between the
   archive and the bodies. Same motion vocabulary as the rest of
   the page — fade and word reveal, nothing new introduced.
   ============================================================ */
.horeca{
  position:relative; overflow:hidden;
  padding:clamp(96px,12vw,150px) 0;
  background:var(--ink);
  isolation:isolate;
}
.horeca-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.horeca-bg-img{
  position:absolute;inset:-8% 0;
  /* EDIT ME · a real venue photograph would be stronger still. Same rules:
     light background, sharp, no brochure text in frame. */
  background:url("images/tex/tex-horeca.webp") center 44%/cover no-repeat;
  will-change:transform;
}
.horeca-bg-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(11,10,8,.93) 0%, rgba(11,10,8,.70) 52%, rgba(11,10,8,.44) 100%),
    linear-gradient(to bottom, rgba(11,10,8,.72) 0%, rgba(11,10,8,.46) 42%, rgba(11,10,8,.88) 100%);
}
.horeca-inner{position:relative;z-index:1}

.horeca-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
}
.horeca-card{
  background:rgba(11,10,8,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(247,243,236,.10);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),border-color .5s ease;
}
.horeca-card:hover{transform:translateY(-6px);border-color:rgba(219,150,30,.55)}

.horeca-shot{
  background:linear-gradient(158deg,#F3EAE0 0%,#DFD3C4 100%);
  padding:26px 26px 24px;display:grid;place-items:center;
}
.horeca-shot img{
  width:100%;max-width:250px;
  filter:drop-shadow(0 14px 24px rgba(60,45,25,.26));
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.horeca-card:hover .horeca-shot img{transform:scale(1.05) rotate(-3deg)}

.horeca-body{padding:26px 26px 30px}
.horeca-code{
  display:block;font:400 .68rem/1 var(--mono);letter-spacing:.18em;
  color:var(--gold);margin-bottom:14px;
}
.horeca-body h3{
  font:500 clamp(1.14rem,1.5vw,1.34rem)/1.25 var(--display);
  color:var(--bone);margin:0 0 10px;
}
.horeca-body p{
  font-size:.93rem;line-height:1.62;color:var(--ash-hi);margin:0 0 18px;
}
.horeca-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.horeca-tags li{
  font:400 .62rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ash);border:1px solid rgba(247,243,236,.18);
  padding:7px 10px;border-radius:2px;
}


/* ---- customisation · the four techniques ------------------------------
   Shown on real pieces, round-cropped, on a light panel so the section
   lifts out of the dark instead of being another list of text. --------- */
.tech-grid{
  /* .custom-inner is a 640px copy column; the technique panel is meant to
     run the full width of the section, so it breaks out of that column. */
  width:min(100%, var(--wrap-w, 1280px));
  list-style:none;margin:52px 0 0;padding:38px 34px 42px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  background:linear-gradient(160deg,rgba(244,236,221,.96),rgba(232,222,203,.92));
  border:1px solid rgba(219,150,30,.28);
}
.tech{text-align:center;perspective:900px}
.tech-shot{
  display:block;width:clamp(96px,11vw,142px);aspect-ratio:1;margin:0 auto 18px;
  border-radius:50%;overflow:hidden;position:relative;
  background:#fff;border:1px solid rgba(23,19,16,.12);
  box-shadow:0 12px 26px rgba(23,19,16,.16);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease,border-color .5s ease;
}
.tech-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.tech:hover .tech-shot{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 20px 38px rgba(23,19,16,.26)}
.tech:hover .tech-shot img{transform:scale(1.09)}
.tech b{
  display:block;font:400 1.02rem/1.3 var(--display);color:#171310;margin-bottom:8px
}
.tech-note{
  display:block;font:300 .84rem/1.55 var(--body);color:rgba(23,19,16,.68);
  max-width:24ch;margin:0 auto
}

/* the mark, where the button used to be */
.custom-mark{margin:52px 0 0;display:flex;justify-content:center}
.custom-mark img{
  height:clamp(74px,8vw,104px);width:auto;opacity:.92;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))
}

@media (max-width:960px){
  .tech-grid{grid-template-columns:repeat(2,1fr);gap:30px 22px;padding:30px 22px 34px}
}
@media (max-width:560px){
  .tech-grid{grid-template-columns:1fr;gap:26px}
  .tech-note{max-width:30ch}
  .custom-mark{margin-top:38px}
}


/* ---- vision → creation ------------------------------------------------
   Artwork on the left, the fired piece on the right, joined by a gold
   thread. Reads top-to-bottom on phones with the thread turned vertical. */
.vc{margin:52px 0 0}
.vc-heads{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;margin-bottom:26px
}
.vc-head{
  margin:0;font:400 clamp(1.05rem,1.9vw,1.45rem)/1 var(--display);
  letter-spacing:.02em
}
.vc-head-a{color:var(--bone);text-align:right}
.vc-head-b{color:var(--gold);text-align:left}
.vc-arrow{
  width:clamp(46px,7vw,96px);height:1px;background:var(--gold);position:relative;opacity:.7
}
.vc-arrow::after{
  content:"";position:absolute;right:-1px;top:-3px;
  border-left:7px solid var(--gold);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent
}
.vc-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:20px 0;border-top:1px solid rgba(219,150,30,.16)
}
.vc-cell{margin:0;background:var(--bone);border:1px solid rgba(219,150,30,.24);padding:14px 14px 0}
.vc-cell img{display:block;width:100%;height:clamp(130px,15vw,190px);object-fit:contain;background:#fff}
.vc-cell figcaption{
  font:400 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite-2);padding:12px 0 13px;text-align:center
}
.vc-after{border-color:rgba(219,150,30,.5)}
/* a slot still waiting for its other half. Deliberately empty rather than
   filled with an unrelated piece — a design shown beside somebody else's
   product reads as a matched pair when it is not one. */
.vc-empty{background:rgba(244,239,230,.05);border-style:dashed;border-color:rgba(219,150,30,.32)}
.vc-slot{
  display:flex;align-items:center;justify-content:center;text-align:center;
  height:clamp(130px,15vw,190px);
  font:400 .62rem/1.7 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(219,150,30,.65)
}
.vc-empty figcaption{color:rgba(244,239,230,.4)}
.vc-link{width:clamp(34px,5vw,70px);height:1px;background:rgba(219,150,30,.55)}

@media (max-width:760px){
  .vc-heads{grid-template-columns:1fr;gap:6px;text-align:center}
  .vc-head-a,.vc-head-b{text-align:center}
  .vc-arrow{justify-self:center;width:1px;height:26px}
  .vc-arrow::after{right:-3px;bottom:-1px;top:auto;
    border-top:7px solid var(--gold);border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:0}
  .vc-row{grid-template-columns:1fr;gap:10px}
  .vc-link{width:1px;height:22px;justify-self:center}
}

/* 6 · HORECA heading carries more weight */
.horeca-head h2{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.02}
.horeca-head .eyebrow{font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:.34em}
.horeca-quote{
  margin:26px 0 0;max-width:44ch;
  font:400 clamp(1.05rem,1.9vw,1.4rem)/1.5 var(--display);
  color:var(--bone);font-style:italic;opacity:.9
}
.horeca-quote span{display:block;margin-top:10px;font:400 .62rem/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-style:normal}

/* 9 · the bodies eyebrow, bigger */
.bodies-sec .eyebrow{font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:.34em;margin-bottom:20px}

/* the trademark line under the client wall */
.client-note{
  max-width:70ch;margin:38px auto 0;text-align:center;
  font:300 .72rem/1.75 var(--body);letter-spacing:.02em;
  color:rgba(244,239,230,.42)
}

/* ---- HORECA · pieces already in service --------------------------------
   A quiet strip under the three cards: real work, small, in a row. The
   photographs are venue snapshots rather than studio shots, so they sit on
   a light tile that evens them out. -------------------------------------- */
.horeca-strip{margin-top:64px}
.hz-label{
  font:400 .66rem/1 var(--body);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0 0 22px
}
.hz-row{
  display:grid;grid-template-columns:repeat(9,1fr);gap:12px
}
.hz-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px
}
.hz-card{
  margin:0;background:#0B0A09;border:1px solid rgba(244,239,230,.10);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),
             border-color .5s ease,box-shadow .5s ease
}
.hz-card img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:linear-gradient(158deg,#F6E6D5,#E1CEB9);
  padding:22px 22px 0;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)
}
.hz-card figcaption{
  font:400 .74rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);padding:20px 22px 22px;background:#0B0A09
}
.hz-card:hover{
  transform:translateY(-7px);border-color:var(--gold);
  box-shadow:0 22px 44px rgba(0,0,0,.55)
}
.hz-card:hover img{transform:scale(1.04)}

@media (max-width:1000px){
  .hz-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .horeca-strip{margin-top:44px}
  .hz-row{grid-template-columns:1fr;gap:16px}
  .hz-card figcaption{font-size:.66rem;padding:16px 18px 18px}
}

.horeca-foot{
  margin:clamp(34px,4vw,48px) 0 0;
  font-size:.95rem;color:var(--ash);
}
.horeca-foot a{color:var(--gold);text-underline-offset:4px}

@media (max-width:1000px){
  .horeca-grid{grid-template-columns:1fr;max-width:520px}
  .horeca-bg-veil{
    background:linear-gradient(to bottom, rgba(11,10,8,.86) 0%, rgba(11,10,8,.62) 45%, rgba(11,10,8,.92) 100%);
  }
}

/* ============================================================
   MOBILE PASS
   Written after auditing the built page on a phone. Each rule here
   fixes something that only goes wrong on a small touch screen —
   nothing in this block changes the desktop layout.
   ============================================================ */

/* iOS inflates text in some layouts unless told not to. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* The blue flash Safari and Chrome paint over a tapped element. We supply
   our own :active states below, so the default is noise. */
a,button,label,summary{-webkit-tap-highlight-color:transparent}

/* 100vh on a phone is the viewport WITH the address bar hidden, so a full-
   height block is taller than what you can actually see and the layout jumps
   as the bar slides. svh is the small viewport height — the stable one.
   The plain vh line stays first as the fallback for older browsers. */
@supports (height:100svh){
  .loader{height:100svh}
  .hero-pin{height:100svh}
  .gallery-pin{height:100svh}
}

/* Feedback for touch, where :hover never fires — and where, on iOS, a tapped
   :hover state can stick until you tap somewhere else. */
.btn:active{transform:scale(.985)}
.opts label:active span{border-color:rgba(124,87,15,.75);background:#fff}
.footer-social a:active{background:var(--gold);color:var(--ink);border-color:var(--gold)}

@media (hover:none){
  /* Nothing should depend on hover on a touch device. The card image zooms
     are decorative and simply don't run; these two carried real meaning. */
  .why-card:hover .why-shot img,
  .wwd-card:hover .wwd-shot img,
  .body-card:hover .body-shot img{transform:none}
  .body-card:hover{transform:none;box-shadow:none}
}

@media (max-width:860px){
  /* A full-viewport blur is the most expensive thing a phone GPU can be asked
     for, and the panel behind it is 97% opaque, so the blur was invisible
     anyway. Opaque background, no filter. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,10,8,.985)}

  /* One compositor layer per letter of the hero headline. GSAP promotes what
     it animates on its own; the hint just costs GPU memory here. */
  .char{will-change:auto}

  /* The grain is a fixed full-screen layer being repainted six times every
     seven seconds, for a texture nobody consciously sees. Keep the texture,
     stop the animation. */
  .grain{animation:none;opacity:.035}
}

@media (max-width:620px){
  /* Type that reads fine at desktop card widths is genuinely hard at 10px on
     a phone. These are the icon captions in the three light sections. */
  .why-proof li{font-size:.76rem;gap:10px}
  .why-proof .ico{width:28px;height:28px}
  .wwd-journey > li{font-size:.72rem}
  .body-tags li{font-size:.74rem}
  .wwd-strip li{font-size:.8rem}
  .why-strip{font-size:.66rem;letter-spacing:.16em}

  /* The specification builder is the conversion point, and its choices were
     ~38px tall — under the 44px minimum for a reliable tap. */
  .opts span{padding:15px 20px;min-height:48px;display:inline-flex;align-items:center}
  .opts{gap:10px}
  .field input,.field textarea{padding:16px 15px;font-size:16px}

  /* Below 16px, iOS Safari zooms the page in when a field is focused and
     never zooms back out. 16px is the threshold, not a preference. */

  .nav a{padding:12px 0}
}

/* Second mobile pass. The micro-type above is deliberate — letterspaced
   uppercase labels are part of the design language and they read as labels,
   not as prose. But a handful of them carry information the visitor actually
   has to read on a phone, and those get a lift. The eyebrows, tags and
   section codes are left alone on purpose. */
@media (max-width:620px){
  .field span{font-size:.72rem}          /* Name / Email — form labels */
  .spec-label{font-size:.7rem}
  .q-num{font-size:.72rem}
  .reel-spec dt{font-size:.7rem}         /* REF / BODY / RIM / SERVICE */
  .body-form{font-size:.78rem}           /* Fine Dining, All Day Dining */
  .vc-cell figcaption{font-size:.7rem}
  .stat span,.stat-note{font-size:.78rem}
  .horeca-tags li{font-size:.7rem}
}


/* ---- short viewports -------------------------------------------------
   The hero pin centres its copy vertically and the scroll hint is pinned
   to the bottom of the same box. On a laptop with a short window (or a
   phone in landscape) the centred block grows down until it reaches the
   hint, and "SCROLL" printed itself across the gold button with its
   hairline poking out underneath. Height, not width, is the constraint —
   so these are height queries. */
@media (max-height:820px){
  /* lift the centred block clear of the hint */
  .hero-pin{padding-bottom:clamp(70px,11vh,104px)}
}
@media (max-height:640px){
  /* below this there is genuinely no room for both, and the buttons win */
  .scroll-hint{display:none}
  .hero-pin{padding-bottom:0}
}