/* ==========================================================================
   Anglia Interiors preview

   The spacing and type scale are MEASURED off quooker.co.uk/benefits at 1440,
   2026-09-25, not estimated:

     container    1430 outer, 40px gutters, 1350 of content
     sub-page top a full-width image, 600 tall
     title block  h1 40/48 weight 400 in the warm grey, lede 18/26 in ink,
                  both held to 1013 wide, which is three quarters of the measure
     content band 360 tall, split 675/675, text side padded 64, image 563x320
     band type    h2 24/36 weight 400 warm grey, p 16/24 ink, 16px between things
     rhythm       bands carry their own height and butt together. Margins are 0,
                  with a 40px gap only between GROUPS of bands

   Everything below follows those numbers. Where a value is not from Quooker it
   is marked. Large surfaces are square; only controls are pills.
   ========================================================================== */
:root{
  --paper:#F5F3EF;
  --paper-2:#EAE7E1;
  --ink:#1A1A1A;
  --muted:#6B6862;
  --green:#8DC63F;          /* fill only, never text on light */
  --green-dark:#6AA82E;     /* hover */
  --green-deep:#456B18;     /* AA text accent on paper, 5.62:1 */
  --wrap:1430px;        /* outer. With the 40px gutter this gives 1350 of content, as Quooker */
  --gutter:40px;
  --r:16px;              /* content blocks. Full-bleed sections stay square */
  /* the measured rhythm */
  --band-h:360px;        /* a content band */
  --band-pad:64px;       /* inside the text half of a band */
  --gap-group:40px;      /* between groups of bands */
  --measure-75:1013px;   /* three quarters of 1350, the title measure */
  --hero-sub:600px;      /* the full width image at the top of a sub-page */                    /* large surfaces are square. Controls stay pills */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:400;letter-spacing:-0.015em}
h1{font-size:clamp(44px,5.6vw,80px);line-height:1.0}
h2{font-size:clamp(30px,3.4vw,48px);line-height:1.04}
h3{font-size:19px;font-weight:700;line-height:1.3}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.stack{display:flex;flex-direction:column;gap:40px}
.band{border-radius:var(--r);overflow:hidden;position:relative}

/* ---------- image slots. Drop a file into images/ and it appears ---------- */
.ph{position:relative;background:var(--paper-2);overflow:hidden;aspect-ratio:var(--ar,16/9)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .slot{display:none}
.ph.empty .slot{
  display:flex;position:absolute;inset:0;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);letter-spacing:.02em;text-align:center;padding:20px;
}
.ph.empty img{display:none}
.hero .ph.empty,.feature .ph.empty{background:#2A3320}
.hero .ph.empty .slot,.feature .ph.empty .slot{color:rgba(255,255,255,.5);align-items:flex-end;justify-content:flex-end;padding:26px}

/* ---------- copy waiting on Arron ---------- */
.todo{background:var(--paper-2);padding:18px 20px;color:var(--muted);font-size:15px}
.todo b{color:var(--ink);font-weight:700}

/* ---------- header ---------- */
header.solid .spacer{flex:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  background:var(--green);color:var(--ink);border-radius:999px;
  padding:15px 28px;font:700 15px/1 inherit;transition:background .2s;
}
.btn:hover{background:var(--green-dark)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}

/* ---------- nav: one inset bar ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:20;padding:16px 0}
header.lifted .navbar{box-shadow:0 6px 22px rgba(15,26,5,.10)}
.navbar{
  max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:6px;
  background:rgba(245,243,239,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:12px;padding:9px 9px 9px 10px;
}
.brand{display:inline-flex;align-items:center;text-decoration:none;margin-right:6px}
.brand .mark{display:inline-flex;align-items:center;background:var(--paper-2);
  border-radius:8px;padding:9px 13px}          /* 8px against the bar's 12px, same ratio as the insets */
.brand img{height:26px;width:auto;display:block}
.brand span:first-child{font-size:18px}
.brand span:last-child{font-size:12px;letter-spacing:.13em;font-weight:700;color:var(--muted)}
.navlink{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);
  font:700 14px/1 inherit;padding:13px 15px;border-radius:8px;background:none;border:0;cursor:pointer;
}
.navlink:hover{background:var(--paper-2)}
.navlink svg{width:15px;height:15px;flex:none}
.navcta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--ink);color:var(--paper);border-radius:999px;padding:13px 20px;font:700 14px/1 inherit;
}
.navcta:hover{background:#000}
.navcta svg{width:15px;height:15px}
.navicon{
  width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;flex:none;
  background:var(--paper-2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
}
.navicon svg{width:17px;height:17px}
.spacer{flex:1}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:.95fr 1.5fr 1.05fr;gap:20px}
.bento .right{display:grid;grid-template-rows:auto 1fr;gap:20px;min-height:0}
.tile{border-radius:var(--r);position:relative;overflow:hidden;display:flex;flex-direction:column}
.rb{width:46px;height:46px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(26,26,26,.10);color:inherit;border:0;cursor:pointer;flex:none}
.rb svg{width:17px;height:17px}

.t-stat{background:#fff;color:var(--ink);padding:34px 32px 30px;min-height:540px}
.t-stat .lab{font-size:21px;color:var(--muted);max-width:15ch}
.t-stat .gap{flex:1}
.t-stat .num{font-size:clamp(110px,12.5vw,196px);line-height:.84;font-weight:700;
  color:var(--green-deep);letter-spacing:-.05em;margin-left:-.06em}
.t-stat .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.t-stat .foot span{font-size:21px;font-weight:700;color:var(--green-deep);max-width:16ch}
.t-stat .rb{background:var(--paper-2)}

.t-quote{background:var(--paper-2);padding:16px;gap:16px}
.vthumb{border-radius:var(--r);overflow:hidden;position:relative;background:#2A3320;cursor:pointer}
.vthumb .ph{--ar:16/9}
.vthumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vthumb .play i{width:62px;height:62px;border-radius:999px;background:rgba(245,243,239,.92);
  display:flex;align-items:center;justify-content:center}
.vthumb .play svg{width:20px;height:20px;margin-left:3px}
.t-quote blockquote{margin:0;padding:6px 12px 0;font-size:clamp(19px,1.55vw,25px);line-height:1.3;color:var(--muted)}
.t-quote blockquote b{color:var(--ink);font-weight:700}
.t-quote cite{padding:0 12px;font-style:normal;font-size:15px;color:var(--muted)}
.pill-wide{margin-top:auto;background:var(--paper);border-radius:999px;padding:19px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:16px;color:var(--ink);text-decoration:none}
.pill-wide svg{width:16px;height:16px;flex:none}
.pill-wide:hover{background:#fff}

.t-flash{background:var(--green);color:var(--ink);padding:28px;justify-content:space-between;gap:26px;min-height:236px}
.t-flash h3{font-size:23px;font-weight:700;line-height:1.2}
.t-flash .cap{font-size:15px;max-width:26ch}
.t-flash .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.t-flash .rb{background:rgba(26,26,26,.14)}

.t-photo{min-height:270px;color:#fff;justify-content:space-between;padding:28px}
/* Three layers, each named. `.t-photo > *` is a blanket selector and .ph is a direct child, so it
   handed the photograph z-index:2 as well: same level as the heading, later in the markup, so the
   photograph painted OVER the heading and the words were simply gone. Invisible in a screenshot,
   because a photo tile missing its heading still looks like a photo tile. Codex caught it 26 Sep. */
.t-photo .ph{position:absolute;inset:0;aspect-ratio:auto;z-index:0}
.t-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,26,5,.72) 0%,rgba(15,26,5,.30) 52%,rgba(15,26,5,.46) 100%)}
.t-photo > *{position:relative;z-index:2}
.t-photo h3{font-size:22px;font-weight:700;line-height:1.22;max-width:15ch}
.t-photo .foot{display:flex;justify-content:flex-end}
.t-photo .rb{background:rgba(245,243,239,.92);color:var(--ink)}

/* ---------- showcase, the two-up card ---------- */
.showcase{display:grid;grid-template-columns:.92fr 2fr;background:var(--paper-2);overflow:hidden}
.showcase .pad{padding:50px 42px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.showcase h2{font-size:clamp(25px,2.3vw,34px);line-height:1.12}
.showcase h2 b{font-weight:700}
.showcase p{color:var(--muted);font-size:17px}
.showcase .ph{--ar:16/11;height:100%;min-height:430px}
.btn-white{background:var(--paper);color:var(--ink)}
.btn-white:hover{background:#fff}

/* ---------- the corner film ---------- */
.corner{position:fixed;right:20px;bottom:20px;z-index:30;width:248px;overflow:hidden;
  background:#2A3320;box-shadow:0 12px 34px rgba(15,26,5,.34)}
/* their films are landscape, so the tile is landscape. A vertical Instagram reel
   would want 9:16 here instead, and the iframe scaled to cover */
.corner .frame{position:relative;aspect-ratio:16/9;overflow:hidden}
.corner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.corner .hit{position:absolute;inset:0;background:none;border:0;cursor:pointer}
.corner .cap{position:absolute;left:0;right:0;bottom:0;padding:9px 10px;color:#fff;font-size:11px;line-height:1.25;
  background:linear-gradient(0deg,rgba(15,26,5,.86),rgba(15,26,5,0));pointer-events:none}
.corner .x{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(15,26,5,.55);color:#fff;font-size:13px;line-height:1;padding:0;z-index:2}

.lb{position:fixed;inset:0;z-index:50;background:rgba(15,26,5,.9);display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
/* The player was sized by viewport WIDTH alone, with the close button 46px above it. On a landscape
   phone (844x390) that put the whole close button off the top of the screen and cropped the film:
   no way to shut it except Escape, which a touch user does not have. Height has to be part of the
   sum. 112px reserves the scrim padding plus the button and its gap. Codex caught it 26 Sep. */
.lbInner{width:min(1040px,100%,calc((100vh - 112px) * 16 / 9));position:relative}
.lbFrame{position:relative;aspect-ratio:16/9;background:#000}
.lbFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* z-index named, not left to chance. .lbFrame comes after this button in the markup and both were
   z-index:auto, so the frame and its iframe painted on top. Above the film that did not matter; the
   moment the button moved INSIDE the film on a short viewport it became untappable, and a geometry
   check saw a button sitting happily on screen. Same lesson as trap 74: name every layer. */
.lbX{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:999px;border:0;cursor:pointer;
  background:var(--paper);color:var(--ink);font-size:19px;line-height:1;padding:0;z-index:3}
.lbFrame{z-index:1}
/* On a short viewport there is no room above the film, so the button goes inside it. */
@media (max-height:520px){
  .lb{padding:10px}
  .lbInner{width:min(1040px,100%,calc((100vh - 20px) * 16 / 9))}
  .lbX{top:8px;right:8px;background:rgba(245,243,239,.94);box-shadow:0 2px 10px rgba(15,26,5,.35)}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;margin-bottom:40px}
.hero .ph{position:absolute;inset:0;aspect-ratio:auto}
.hero .film,.feature .film{position:absolute;inset:0;overflow:hidden}
.feature .film iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
  min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.feature .cue{position:absolute;right:30px;bottom:30px;z-index:3}
.feature .cue i{display:inline-flex;align-items:center;gap:10px;background:rgba(245,243,239,.94);
  color:var(--ink);border-radius:999px;padding:13px 20px 13px 16px;font:700 14px/1 inherit;
  box-shadow:0 6px 22px rgba(15,26,5,.28)}
.feature .cue svg{width:16px;height:16px}
.feature .filmhit{position:absolute;inset:0;z-index:2;background:none;border:0;cursor:pointer}
.hero .film iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
  min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,26,5,.82) 0%,rgba(15,26,5,.70) 38%,rgba(15,26,5,.30) 72%,rgba(15,26,5,.14) 100%);
}
.hero-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.hero-copy h1{max-width:22ch}
/* the break is forced so 'since 1974' cannot fall to a line of its own */
@media (max-width:760px){.hero-copy h1 br{display:none}}
.hero-copy p{font-size:clamp(17px,1.5vw,21px);margin-top:22px;max-width:46ch;color:rgba(255,255,255,.92)}
.hero-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero-foot{position:absolute;left:0;right:0;bottom:34px;z-index:2;color:rgba(255,255,255,.8);font-size:14px}

/* ---------- statement ---------- */
.say{padding:110px 0 70px;text-align:center}
.say h2{color:var(--muted);max-width:20ch;margin:0 auto}
.say p{margin:26px auto 0;max-width:62ch;font-size:18px;color:var(--ink)}
.say .btn{margin-top:32px}

/* ---------- offer band ---------- */
.offer{display:grid;grid-template-columns:minmax(300px,420px) 1fr;background:var(--green)}
.offer .pad{padding:56px 50px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.offer .big{font-size:clamp(34px,3.4vw,46px);line-height:1.02;font-weight:400}
.offer .ph{--ar:auto;height:100%;min-height:320px}

/* ---------- three cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card .ph{--ar:4/3}
.card .pad{padding:26px 26px 32px;display:flex;flex-direction:column;gap:10px;flex:1}
.card p{color:var(--muted);font-size:16px}
.card .more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  background:var(--green);color:var(--ink);border-radius:999px;padding:13px 20px;
  font:700 15px/1 inherit;text-decoration:none;transition:background .2s}
.card .more:hover{background:var(--green-dark)}
.card .more svg{width:15px;height:15px;flex:none}
.card .pad{padding-bottom:26px}

/* ---------- trusted ---------- */
.trusted{padding:120px 0;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.trusted .lead{font-size:clamp(40px,4.6vw,64px);line-height:1.0;color:var(--green-deep);font-weight:400}
.trusted .sub{font-size:20px;margin-top:18px;max-width:24ch}
.quote{font-size:clamp(20px,1.9vw,26px);line-height:1.4}
.quote .who{display:block;margin-top:18px;font-size:16px;color:var(--muted)}

/* ---------- feature band ---------- */
.feature{position:relative;min-height:540px;display:flex;align-items:flex-end}
.feature .ph{position:absolute;inset:0;aspect-ratio:auto}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,26,5,.90) 0%,rgba(15,26,5,.62) 45%,rgba(15,26,5,.22) 100%)}
.feature .pad{position:relative;z-index:2;padding:52px 50px;color:#fff;max-width:62ch}
.feature h2{margin-bottom:16px}
.feature p{color:rgba(255,255,255,.9);font-size:18px;margin-bottom:26px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.step{background:var(--paper-2);border-radius:var(--r);padding:30px 26px 34px;display:flex;flex-direction:column;gap:12px}
.step .n{width:44px;height:44px;border-radius:999px;background:var(--green);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.step p{color:var(--muted);font-size:15px}

/* ---------- projects ---------- */
.grid5{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:18px}
.grid5 .ph{--ar:auto;height:100%;border-radius:var(--r);overflow:hidden}
.grid5 .tall{grid-row:span 2}
.grid5 .wide{grid-column:span 2}

/* ---------- makers ---------- */
.makers{padding:110px 0;text-align:center}
.makers .row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:38px}
.makers .m{background:var(--paper-2);border-radius:999px;padding:16px 30px;font-weight:700;font-size:17px;color:var(--ink)}

/* ---------- closing ---------- */
.close{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:86px 50px;text-align:center}
.close h2{max-width:18ch;margin:0 auto}
.close p{margin:22px auto 0;max-width:52ch;color:rgba(245,243,239,.78);font-size:18px}
.close .btn{margin-top:34px}

/* ---------- footer ---------- */
footer.wrap{padding:96px var(--gutter) 60px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px}
footer h3{font-size:15px;margin-bottom:14px}
footer p,footer li{color:var(--muted);font-size:15px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fbrand{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.fbase{margin-top:56px;color:var(--muted);font-size:14px}

@media (max-width:1000px){
  :root{--gutter:22px}
  .offer{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .trusted{grid-template-columns:1fr;gap:40px;padding:80px 0}
  .steps{grid-template-columns:1fr 1fr}
  .grid5{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .fcols{grid-template-columns:1fr 1fr}
  .navlink:not(:first-of-type){display:none}
  .navcta{padding:13px 16px}
  .bento{grid-template-columns:1fr}
  .bento .right{grid-template-rows:auto auto}
  .t-stat{min-height:400px}
  .showcase{grid-template-columns:1fr}
  .showcase .ph{min-height:300px}
  .showcase .pad{padding:34px 26px}
  .say{padding:80px 0 50px}
  .feature .pad,.offer .pad{padding:36px 26px}
  .close{padding:60px 26px}
}
@media (max-width:620px){
  .steps,.grid5,.fcols{grid-template-columns:1fr}
  .grid5 .wide,.grid5 .tall{grid-column:auto;grid-row:auto}
}

/* ==========================================================================
   Added 2026-09-25 for the multi-page build
   ========================================================================== */

/* ---------- nav dropdown ---------- */
/* The panel sits 8px below the trigger and is absolutely positioned, so that 8px belongs to
   nothing. Travelling from "Rooms" down to the panel crossed nine dead rows, :hover was lost,
   display went to none, and because the panel had gone the pointer never re-entered it: the
   dropdown was unusable with a mouse on every desktop page. A transparent strip that belongs to
   .has-menu keeps the pointer inside the hover chain the whole way. Codex caught it 26 Sep. */
.has-menu{position:relative}
.has-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;display:none}
.has-menu:hover::after,.has-menu:focus-within::after{display:block}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:230px;padding:8px;
  background:var(--paper);box-shadow:0 14px 40px rgba(15,26,5,.16);
  display:none;flex-direction:column;
}
.has-menu:hover .dropdown,.has-menu:focus-within .dropdown{display:flex}
.dropdown a{display:block;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.dropdown a:hover{background:var(--paper-2)}
.navlink[aria-current],.dropdown a[aria-current]{color:var(--green-deep)}

/* ---------- a looping film used as a tile, no controls, no sound ---------- */
.filmtile{position:relative;overflow:hidden;background:#2A3320;border-radius:var(--r)}
.filmtile iframe{position:absolute;top:50%;left:50%;width:178%;height:178%;
  transform:translate(-50%,-50%);border:0;pointer-events:none}
.filmtile .tag{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff;font-size:14px;font-weight:700;
  background:linear-gradient(0deg,rgba(15,26,5,.8),rgba(15,26,5,0));pointer-events:none}
.filmtile .cue{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:transform .2s ease}
.filmtile .cue i{display:flex;align-items:center;gap:10px;background:rgba(245,243,239,.94);color:var(--ink);
  border-radius:999px;padding:13px 20px 13px 16px;font:700 14px/1 inherit;
  box-shadow:0 6px 22px rgba(15,26,5,.28)}
.filmtile .cue svg{width:16px;height:16px}
.filmtile:hover .cue{transform:scale(1.04)}
.filmtile .hit{cursor:pointer}
.filmtile .hit{position:absolute;inset:0;background:none;border:0;cursor:pointer}

/* ---------- contact strip ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper-2)}
.contact .pad{padding:54px 46px}
.contact .ph{--ar:16/11;height:100%}
.contact h2{margin-bottom:20px}
.contact dl{margin:0}
.contact dt{font-weight:700;font-size:15px;margin-top:18px}
.contact dd{margin:4px 0 0;color:var(--muted);font-size:17px}

@media (max-width:1000px){
  .pagehead{padding:140px 0 0}
  .pagehead .inner{grid-template-columns:1fr;gap:22px;padding-bottom:36px}
  .prose{grid-template-columns:1fr;gap:28px;padding-bottom:60px}
  .facts{grid-template-columns:1fr 1fr;padding-bottom:60px}
  .contact{grid-template-columns:1fr}
  .contact .pad{padding:34px 26px}
  .dropdown{position:static;box-shadow:none;padding:0;background:none}
}
@media (max-width:620px){ .facts{grid-template-columns:1fr} }

/* ---------- footer: full bleed, brand colour, like Quooker's ---------- */
.site-footer{background:var(--green);color:var(--ink);margin-top:96px;padding:78px 0 56px}
.site-footer .fcols{display:grid;grid-template-columns:1.8fr 1fr 1.4fr 1.2fr;gap:40px}
.site-footer h3{font-size:15px;margin-bottom:14px;color:var(--ink)}
.site-footer p,.site-footer li{color:rgba(26,26,26,.78);font-size:15px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-footer a{color:rgba(26,26,26,.78);text-decoration:none}
.site-footer a:hover{color:var(--ink)}
.site-footer .fcontact{color:var(--ink)}
.site-footer .fcontact a{display:inline-block;max-width:100%;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.site-footer .fbrand{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.site-footer .fbase{margin-top:52px;color:rgba(26,26,26,.62);font-size:14px}
.site-footer .fbase a{color:rgba(26,26,26,.62);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){
  .site-footer{padding:52px 0 40px;margin-top:60px}
  .site-footer .fcols{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:620px){ .site-footer .fcols{grid-template-columns:1fr} }


/* ==========================================================================
   SUB-PAGE SYSTEM — all of it from the Quooker measurements at the top
   ========================================================================== */

/* the nav bar is deliberately WIDER than the 1350 of content below it, and white
   against the off-white page, at Simon's direction 2026-09-25 */
.navwrap{max-width:1430px;margin:0 auto;padding:0 20px}
.navbar{max-width:none;background:rgba(255,255,255,.94)}

/* full width image at the top of every sub-page */
/* Quooker put NOTHING over the top image: it is a clean photograph, and the page
   title sits underneath it. Simon's note 2026-09-25: titles in the image read lost. */
.tophero{position:relative;height:var(--hero-sub);overflow:hidden}
.tophero .ph{position:absolute;inset:0;aspect-ratio:auto}
.tophero .ph img{object-position:var(--focus,center)}

/* the title block under it: 40/48 warm grey, 18/26 ink, held to three quarters */
.titleblock{padding-top:64px;padding-bottom:56px}   /* never `padding:` here, it kills .wrap's gutter */
.titleblock h1,.titleblock h2{font-size:clamp(30px,3.2vw,44px);line-height:1.12;font-weight:400;
  color:var(--muted);max-width:var(--measure-75);letter-spacing:-.015em}
/* the emphasis carries the weight AND the colour, which is the whole trick */
.titleblock h1 b,.titleblock h2 b{font-weight:800;color:var(--ink)}
.titleblock p{font-size:18px;line-height:26px;color:var(--ink);max-width:var(--measure-75);margin-top:18px}
.titleblock p b{font-weight:700;color:var(--ink)}
.titleblock p i{font-style:italic}

/* a content band: 360 tall, half text half image, text side padded 64 */
.band2{display:grid;grid-template-columns:1fr 1fr;min-height:var(--band-h);background:var(--paper-2);
  border-radius:var(--r);overflow:hidden}
.band2.flip > .pad{order:2}
.band2 > .pad{padding:var(--band-pad);display:flex;flex-direction:column;gap:16px;justify-content:center}
.band2 h2{font-size:clamp(24px,2.1vw,30px);line-height:1.22;font-weight:400;color:var(--muted);letter-spacing:-.01em}
.band2 h2 b{font-weight:800;color:var(--ink)}
.band2.ink h2 b{color:#fff}
.band2.ink h3 b{color:#fff}
.band2.flash h2 b{color:var(--ink)}
.band2 p b{font-weight:700}
.band2 h3{font-size:clamp(24px,2.1vw,30px);line-height:1.22;font-weight:400;color:var(--muted)}
.band2 p{font-size:17px;line-height:27px;color:var(--ink)}
.band2 ul{margin:0;padding-left:20px;font-size:17px;line-height:27px;color:var(--ink)}
.band2 li{margin-bottom:8px}
.band2 .ph,.band2 .filmtile{position:relative;aspect-ratio:auto;height:auto;
  min-height:var(--band-h);border-radius:0}
.band2 .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band2 .mediawrap{position:relative;display:flex}
.band2 .mediawrap .ph,.band2 .mediawrap .filmtile{flex:1}
.band2 .btn{align-self:flex-start;margin-top:8px}
.band2.plain{background:none}
.band2.ink{background:var(--ink)}
.band2.ink h2,.band2.ink h3{color:rgba(245,243,239,.58)}
.band2.ink p,.band2.ink li{color:rgba(245,243,239,.84)}
.band2.flash{background:var(--green)}
.band2.flash h2,.band2.flash h3{color:var(--ink)}
.band2.flash p,.band2.flash li{color:rgba(26,26,26,.82)}

/* groups of bands butt together; only the group gets a gap */
.bandgroup{display:grid;gap:var(--gap-group)}
.facts + .bandgroup,.wrap + .wrap > .bandgroup{margin-top:var(--gap-group)}
.bandgroup + .bandgroup{margin-top:var(--gap-group)}
.group-gap{height:var(--gap-group)}

/* a plain full-measure text section, same type scale as a band */
.textblock{padding-bottom:var(--gap-group);display:grid;grid-template-columns:1fr 1fr;gap:80px}
.textblock h2{font-size:24px;line-height:36px;font-weight:400;color:var(--muted);margin-bottom:16px}
.textblock h2 b{font-weight:800;color:var(--ink)}
.textblock p{font-size:16px;line-height:24px;color:var(--ink);margin-bottom:16px}
.textblock ul{margin:0;padding-left:20px;font-size:16px;line-height:24px;color:var(--ink)}
.textblock li{margin-bottom:8px}
.textblock p strong{font-weight:700}

/* the fact row, on the same 16/24 body scale */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:var(--gap-group)}
.fact{background:var(--paper-2);border-radius:var(--r);padding:var(--band-pad) 34px}
.fact .n{font-size:40px;line-height:48px;font-weight:700;color:var(--green-deep);margin-bottom:12px}
.fact p{font-size:16px;line-height:24px;color:var(--ink)}

/* Partner logos on the page background. Anglia's own theme supplies them as
   single-colour WHITE artwork, measured at zero saturation, so they are recoloured
   to ink from their own alpha. Shapes unchanged, one colour swapped. */
.partners{padding:72px 0}
.partners h2{font-size:24px;line-height:36px;font-weight:400;color:var(--muted);margin-bottom:38px;text-align:center}
.partners .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:56px}
.partners img{width:auto;opacity:.82}
.partners img.l-quooker{height:27px}
.partners img.l-siemens{height:21px}
.partners img.l-bosch{height:33px}
.partners img.l-masterpartner{height:50px}
.partners img.l-corian{height:44px}
.partners img.l-second_nature{height:48px}
.partners img.l-kbsa{height:45px}

/* footer logo, a single ink version of their own artwork */
.site-footer .flogo{height:64px;width:auto;margin-bottom:18px;display:block}

@media (max-width:1000px){
  .tophero{height:420px}
  .tophero .on{padding-bottom:34px}
  .titleblock{padding-top:40px;padding-bottom:34px}
  .titleblock h1,.titleblock h2{font-size:30px;line-height:38px}
  .band2{grid-template-columns:1fr}
  .band2.flip > .pad{order:0}
  .band2 > .pad{padding:34px 26px}
  .band2 .ph,.band2 .filmtile{min-height:280px}
  .textblock{grid-template-columns:1fr;gap:30px}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:34px 26px}
  .partners{padding:48px 0}
  .partners .row{gap:30px}
  .partners img{transform:scale(.78);transform-origin:center}
}
@media (max-width:620px){ .facts{grid-template-columns:1fr} }


/* ---------- the menu: full screen, with a motion layer ---------- */
.menu{position:fixed;inset:0;z-index:40;visibility:hidden;opacity:0;
  transition:opacity .28s ease, visibility 0s linear .28s}
.menu.open{visibility:visible;opacity:1;transition:opacity .28s ease}
.menu .scrim{position:absolute;inset:0;background:var(--paper)}
.menu .panel{position:absolute;inset:0;overflow:auto;padding:118px 0 60px}
.menu .cols{display:grid;grid-template-columns:1.25fr 1fr 1.1fr;gap:60px;align-items:start}
.menu h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:22px}
.menu .big{display:flex;flex-direction:column;gap:4px}
.menu .big a{font-size:clamp(30px,3.4vw,48px);line-height:1.18;font-weight:400;color:var(--muted);
  text-decoration:none;letter-spacing:-.02em}
.menu .big a b{font-weight:800;color:var(--ink)}
.menu .big a:hover b{color:var(--green-deep)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.menu ul a{color:var(--ink);text-decoration:none;font-size:17px}
.menu ul a:hover{color:var(--green-deep)}
.menu .meta{color:var(--muted);font-size:16px;line-height:25px}
.menu .meta b{color:var(--ink)}

/* the pull-out: a photograph, a line from a customer, and a way to ring them */
.menu .pullout{background:var(--paper-2);border-radius:var(--r);overflow:hidden}
.menu .pullout .ph{--ar:16/10}
.menu .pullout .pad{padding:26px 26px 30px;display:flex;flex-direction:column;gap:14px}
.menu .pullout blockquote{margin:0;font-size:19px;line-height:1.35;color:var(--ink)}
.menu .pullout cite{font-style:normal;font-size:14px;color:var(--muted)}
.menu .pullout .btn{align-self:flex-start}

.menuX{position:absolute;top:26px;right:calc((100vw - min(1430px,100vw))/2 + 30px);z-index:2;
  width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;
  background:var(--paper-2);color:var(--ink);font-size:20px;line-height:1}

/* motion: each column lifts in, staggered. Nothing moves for anyone who asked it not to. */
.menu .anim{opacity:0;transform:translateY(16px);transition:opacity .42s ease, transform .42s cubic-bezier(.2,.7,.3,1)}
.menu.open .anim{opacity:1;transform:none}
.menu.open .anim:nth-child(1){transition-delay:.06s}
.menu.open .anim:nth-child(2){transition-delay:.13s}
.menu.open .anim:nth-child(3){transition-delay:.20s}
@media (prefers-reduced-motion:reduce){
  .menu,.menu .anim{transition:none}
  .menu .anim{transform:none}
}
@media (max-width:1000px){
  .menu .panel{padding:92px 0 40px}
  .menu .cols{grid-template-columns:1fr;gap:30px}
  .menuX{right:22px;top:18px}
}

/* ---------- band extras, from Quooker's numbered bands ---------- */
.band2 .num{font-size:clamp(34px,3.4vw,46px);line-height:1;font-weight:800;
  color:var(--green-deep);letter-spacing:-.03em;margin-bottom:4px}
.band2.ink .num{color:var(--green)}
.band2.flash .num{color:var(--ink)}
.arrowlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:16px;color:var(--green-deep)}
.arrowlink svg{width:17px;height:17px}
.arrowlink:hover{gap:12px}
.band2.ink .arrowlink{color:var(--green)}
.band2 .mediawrap{position:relative}
.band2 .mediawrap .rb{position:absolute;right:20px;bottom:20px;background:var(--paper);color:var(--ink)}

/* the logo, now a real vector */
.brand img{height:26px;width:auto;display:block}
/* the svg's viewBox is trimmed to the artwork, so no nudge is needed here */
.site-footer .flogo{height:52px;width:auto;margin:0 0 18px;display:block}
.menu .mlogo{height:30px;width:auto}

/* ---------- reviews, carried over from the client's own live page ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* The sixth slot in the Google grid was empty, so it carries the link to the full set. */
.review.more{display:flex;flex-direction:column}
.review.more p{flex:1}
.review.more .btn{align-self:flex-start;margin-top:6px}
.review{background:var(--paper-2);border-radius:var(--r);padding:34px 30px 32px;display:flex;flex-direction:column;gap:14px}
.review .stars{display:flex;gap:3px}
.review .stars svg{width:17px;height:17px;color:var(--green-deep)}
.review p{font-size:17px;line-height:27px;color:var(--ink);margin:0}
.review .who{margin-top:auto;padding-top:10px;font-size:15px;color:var(--muted)}
.review .who b{display:block;color:var(--ink);font-size:16px;font-weight:700;margin-bottom:2px}

/* ---------- gallery with load more ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:18px}
.gallery .ph{--ar:auto;height:100%;border-radius:var(--r);overflow:hidden}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}
.gallery .ph[hidden]{display:none}
.loadmore{display:flex;justify-content:center;padding-top:34px}
.loadmore .count{align-self:center;margin-left:16px;color:var(--muted);font-size:15px}

@media (max-width:1000px){
  .reviews{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
}
@media (max-width:620px){
  .gallery{grid-template-columns:1fr}
  .gallery .wide,.gallery .tall{grid-column:auto;grid-row:auto}
}

/* ---------- carousel: scroll-snap, no library ---------- */
.carousel{position:relative}
.carousel .track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:6px;
  scrollbar-width:none}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 auto;width:min(620px,78%);scroll-snap-align:start}
.carousel .slide .ph{--ar:4/3;border-radius:var(--r);overflow:hidden}
.carousel .slide .cap{margin-top:12px;font-size:15px;color:var(--muted)}
.carousel .arrows{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.carousel .arrows button{width:48px;height:48px;border-radius:999px;border:0;cursor:pointer;
  background:var(--paper-2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.carousel .arrows button:hover{background:var(--green);color:var(--ink)}
.carousel .arrows button[disabled]{opacity:.35;cursor:default}
.carousel .arrows svg{width:19px;height:19px}

/* ---------- the menu, as an accordion ---------- */
.menu .acc{display:flex;flex-direction:column}
.menu .acc > div{padding:2px 0}
.menu .accbtn{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;cursor:pointer;padding:12px 0;text-align:left;
  font-size:clamp(26px,2.8vw,40px);line-height:1.2;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;font-family:inherit}
.menu .accbtn .sign{width:30px;height:30px;flex:none;position:relative}
.menu .accbtn .sign::before,.menu .accbtn .sign::after{content:"";position:absolute;background:var(--ink);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.menu .accbtn .sign::before{width:22px;height:3px}
.menu .accbtn .sign::after{width:3px;height:22px;transition:transform .22s ease}
.menu .accbtn[aria-expanded="true"] .sign::after{transform:translate(-50%,-50%) scaleY(0)}
.menu .accbtn:hover{color:var(--green-deep)}
.menu .accbtn:hover .sign::before,.menu .accbtn:hover .sign::after{background:var(--green-deep)}
/* A collapsed panel must be inert, not just invisible. max-height:0 with overflow:hidden hides
   the links but leaves them in the tab order, so a keyboard user tabbing the open menu lands on
   half a dozen links they cannot see. visibility:hidden takes them out of the tab order and out
   of the accessibility tree; it is delayed on the way closed so the height still animates. */
.menu .sub{overflow:hidden;max-height:0;visibility:hidden;
  transition:max-height .3s ease,visibility 0s linear .3s}
.menu .accbtn[aria-expanded="true"] + .sub{max-height:420px;visibility:visible;
  transition:max-height .3s ease,visibility 0s}
.menu .sub ul{padding:4px 0 14px 2px;gap:10px}
.menu .sub a{font-size:17px;color:var(--muted)}
.menu .sub a:hover{color:var(--green-deep)}
.menu .plain{font-size:clamp(26px,2.8vw,40px);line-height:1.2;font-weight:800;color:var(--ink);
  text-decoration:none;display:block;padding:12px 0;letter-spacing:-.02em}
.menu .plain:hover{color:var(--green-deep)}
@media (prefers-reduced-motion:reduce){ .menu .sub{transition:none} }

/* ---------- blog index ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:var(--paper-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit}
.post .ph{--ar:16/10}
.post .pad{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .when{font-size:14px;color:var(--muted)}
.post h3{font-size:19px;font-weight:700;line-height:1.3}
.post:hover h3{color:var(--green-deep)}
.post .more{margin-top:auto;padding-top:14px;font-weight:700;font-size:15px;color:var(--green-deep)}
.post[hidden]{display:none}
@media (max-width:1000px){ .posts{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .posts{grid-template-columns:1fr} }

/* ---------- blog filter ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-bottom:26px}
.filters button{border:0;cursor:pointer;border-radius:999px;padding:11px 18px;font:700 14px/1 inherit;
  background:var(--paper-2);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--green);color:var(--ink)}
.searchbox{display:flex;align-items:center;gap:10px;background:var(--paper-2);border-radius:999px;
  padding:11px 18px;margin-left:auto}
.searchbox input{border:0;background:none;font:400 15px/1 inherit;color:var(--ink);width:220px;outline:none}
.searchbox svg{width:16px;height:16px;color:var(--muted);flex:none}
.noresults{padding:20px 0;color:var(--muted)}
@media (max-width:1000px){ .searchbox{margin-left:0;width:100%} .searchbox input{width:100%} }

/* ---------- socials ---------- */
.socials{display:flex;gap:12px;margin-top:20px}
.socials a{width:42px;height:42px;border-radius:999px;background:rgba(26,26,26,.12);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.socials a:hover{background:var(--ink);color:var(--green)}
.socials svg{width:19px;height:19px}

/* seven steps rather than five */
.steps.seven{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .steps.seven{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .steps.seven{grid-template-columns:1fr} }

/* ---------- a blog post ---------- */
.article{max-width:760px}
.article .meta{font-size:15px;color:var(--muted);margin-bottom:10px}
.article h1{font-size:clamp(30px,3.2vw,44px);line-height:1.12;font-weight:400;color:var(--muted);
  letter-spacing:-.015em;margin-bottom:20px}
.article h1 b{font-weight:800;color:var(--ink)}
.article p{font-size:18px;line-height:29px;margin-bottom:20px}
.article h2{font-size:24px;line-height:1.25;font-weight:700;margin:34px 0 14px}
.article ul{margin:0 0 20px;padding-left:22px;font-size:18px;line-height:29px}
.article li{margin-bottom:8px}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1000px){ .related{grid-template-columns:1fr} }

/* the eighth tile: the grid leaves a gap after seven steps, so the call to action sits in it */
.step.cta{background:var(--green);justify-content:space-between}
.step.cta h3{font-size:24px;line-height:1.2}
.step.cta p{color:rgba(26,26,26,.78)}
.step.cta .btn{align-self:flex-start;margin-top:14px;background:var(--ink);color:var(--paper)}
.step.cta .btn:hover{background:#000}

/* ---------- instagram feed ---------- */
.iglead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-bottom:26px}
.iglead h2{font-size:clamp(24px,2.1vw,30px);line-height:1.2;font-weight:400;color:var(--muted)}
.iglead h2 b{font-weight:800;color:var(--ink)}
.iglead .handle{font-size:16px;color:var(--muted)}
.iggrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.igtile{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/5;text-decoration:none}
.igtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.igtile:hover img{transform:scale(1.04)}
.igtile .when{position:absolute;left:0;right:0;bottom:0;padding:12px;color:#fff;font-size:12px;
  background:linear-gradient(0deg,rgba(15,26,5,.8),rgba(15,26,5,0));pointer-events:none}
.igtile .reel{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:999px;
  background:rgba(245,243,239,.92);color:var(--ink);display:flex;align-items:center;justify-content:center}
.igtile .reel svg{width:12px;height:12px;margin-left:1px}
@media (max-width:1000px){ .iggrid{grid-template-columns:repeat(3,1fr)}
  .iglead{flex-direction:column;align-items:flex-start;gap:12px} }
@media (max-width:620px){ .iggrid{grid-template-columns:repeat(2,1fr)} }

/* ---------- section cross links ---------- */
.seclinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding-bottom:var(--gap-group)}
.seclink{background:var(--paper-2);border-radius:var(--r);overflow:hidden;text-decoration:none;
  color:inherit;display:flex;flex-direction:column}
.seclink .ph{--ar:16/10}
.seclink .pad{padding:24px 26px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.seclink .go svg{width:16px;height:16px;flex:none}   /* an icon with no size fills its box */
.seclink .go{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  background:var(--green);color:var(--ink);border-radius:999px;padding:12px 18px;
  font:700 14px/1 inherit;margin-top:auto;transition:background .2s}
.seclink:hover .go{background:var(--ink);color:var(--paper)}
.seclink:hover{background:var(--green)}
.seclink h3{font-size:20px;font-weight:700}
.seclink p{font-size:16px;color:var(--muted)}
.seclink:hover p{color:rgba(26,26,26,.8)}


@media (max-width:1000px){ .seclinks{grid-template-columns:1fr} }

/* ---------- film library ---------- */
.films{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.film-card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-2);
  border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column}
.film-card .ph{--ar:16/9}
.film-card .pad{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.film-card h3{font-size:17px;font-weight:700;line-height:1.3}
.film-card .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:14px;color:var(--green-deep)}
.film-card .go svg{width:14px;height:14px;flex:none}
.film-card:hover h3{color:var(--green-deep)}
.film-card .badge{position:absolute;top:12px;left:12px;background:rgba(245,243,239,.94);color:var(--ink);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}
@media (max-width:1000px){ .films{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .films{grid-template-columns:1fr} }

/* ---------- map ---------- */
.mapwrap{border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:16/7}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:1000px){ .mapwrap{aspect-ratio:4/3} }

/* ---------- enquiry form, rebuilt from their live Contact Form 7 ---------- */
.enquiry{background:var(--paper-2);border-radius:var(--r);padding:var(--band-pad)}
.enquiry h2{font-size:clamp(24px,2.1vw,30px);line-height:1.2;font-weight:400;color:var(--muted);margin-bottom:8px}
.enquiry h2 b{font-weight:800;color:var(--ink)}
.enquiry > p{font-size:17px;line-height:27px;margin-bottom:26px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:700;color:var(--ink)}
.field input,.field textarea,.field select{
  border:0;background:var(--paper);border-radius:10px;padding:15px 16px;
  font:400 16px/1.3 inherit;color:var(--ink);width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--green-deep);outline-offset:1px}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices label{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border-radius:999px;
  padding:11px 17px;font-size:15px;font-weight:400;cursor:pointer}
.choices input{accent-color:var(--green-deep)}
.enquiry .btn{margin-top:0}
.enquiry .small{font-size:14px;color:var(--muted);margin-top:14px}
@media (max-width:1000px){ .enquiry{padding:32px 26px} .fgrid{grid-template-columns:1fr} }

/* The phone number sits next to the booking button on a desktop. It comes off below 1120px, not
   1000px: between 1000 and 1100 the full nav links are showing too and the row overflowed by 55px,
   pushing the booking button off the screen. The number is in the menu and the footer regardless. */
.navphone{white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;
  padding:12px 14px;border-radius:999px}
.navphone:hover{background:var(--paper-2);color:var(--green-deep)}
@media (max-width:1120px){ .navphone{display:none} }

/* ---------- things that must not wrap ---------- */
.choices label{white-space:nowrap}
.navcta{white-space:nowrap}
.navlink{white-space:nowrap}

@media (max-width:1000px){
  /* the Rooms dropdown is redundant on a phone: the full menu is one tap away */
  .has-menu{display:none}
  .navcta{padding:12px 15px;font-size:13px}
  .brand .mark{padding:7px 10px}
  .brand img{height:22px}
}
/* At 320 the logo, Menu and the booking button came to 322px and the button was clipped by two
   pixels. It holds from 360 up. "Book a design visit" stays on one line (Simon, 25 Sep), so the
   room comes out of the padding and the gutter rather than the words. Checks used to stop at 420,
   which is why nothing saw it. Codex, 26 Sep. */
@media (max-width:359px){
  :root{--gutter:14px}
  .navbar{gap:8px}
  .navcta{padding:11px 11px;font-size:12.5px}
  .navlink{padding-left:8px;padding-right:8px}
  .brand img{height:20px}
}


/* A green button on a green band is invisible. Anywhere the brand green is the ground,
   the button goes ink. Same rule as the contrast note at the top: the green is a fill,
   and two fills cannot sit on each other. */
.band2.flash .btn,.site-footer .btn,.t-flash .btn{background:var(--ink);color:var(--paper)}
.band2.flash .btn:hover,.site-footer .btn:hover,.t-flash .btn:hover{background:#000}
.band2.flash .arrowlink,.t-flash .arrowlink{color:var(--ink)}


/* links inside a band read as links */
.band2 p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.band2 p a:hover{text-decoration-thickness:2px}
.band2 p.fine{font-size:14px;line-height:22px}

/* ---------- numbered pages, as the live blog has ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding-top:40px}
.pager button{min-width:46px;height:46px;border:0;cursor:pointer;border-radius:999px;
  background:var(--paper-2);color:var(--ink);font:700 15px/1 inherit;padding:0 14px}
.pager button[aria-current="true"]{background:var(--green);color:var(--ink)}
.pager button[disabled]{opacity:.35;cursor:default}
.pager .ends{background:none}
.pager .gap{padding:0 4px;color:var(--muted)}

/* the line above the send button, which says the form is not live before anyone presses it */
.enquiry .small a{color:var(--green-deep);font-weight:700}

/* ---------- a blog post's own pictures, films, numbered lists and links ---------- */
.article img{display:block;max-width:100%;height:auto;border-radius:var(--r);margin:8px 0 24px}
.article .embed{position:relative;aspect-ratio:16/9;margin:8px 0 28px;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.article .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article ol{margin:0 0 20px;padding-left:24px;font-size:18px;line-height:29px}
.article a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.article a:hover{text-decoration-thickness:2px}

/* ---------- menu: contact lines, and two customer films in place of the portrait ---------- */
.menu .mcontact a{font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.menu .socials{margin-top:18px}
.menu .mfilms{display:flex;flex-direction:column;gap:20px}
.menu .mfilm{display:block;background:var(--paper-2);border-radius:var(--r);overflow:hidden;
  text-decoration:none;color:var(--ink)}
.menu .mfilm .ph{--ar:16/9;position:relative}
.menu .mfilm .play{position:absolute;left:18px;bottom:18px;width:46px;height:46px;border-radius:999px;
  background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center}
.menu .mfilm .play svg{width:20px;height:20px}
.menu .mfilm:hover .play{background:var(--green)}
.menu .mfilm .pad{padding:16px 22px 18px}
.menu .mfilm h4{font-size:17px;line-height:1.3;font-weight:700;margin:0}

/* ---------- menu: three columns that start on one line and end on one line ----------
   Simon, 28 Sep: everything lined up at the top and nothing at the bottom. The line they end
   on is the BASELINE of the last word in the left column, not the bottom of its box, which
   sits 14px plus 0.225 of the type size lower (measured at 40px and at 30.8px). So the other
   two columns stop short by exactly that. The left column spreads its items to fill the
   height, so the last word is on the line whichever column is tallest. */
@media (min-width:1001px){
  .menu .cols{align-items:stretch;--mbig:clamp(26px,2.8vw,40px);--mdrop:calc(14px + .225*var(--mbig))}
  .menu .cols > div{display:flex;flex-direction:column}
  .menu .cols > div:nth-child(n+2){padding-bottom:var(--mdrop)}
  .menu .acc{flex:1;justify-content:space-between}
  /* The plus signs belong to the titles, not to the column beside them. Simon, 28 Sep: each one
     closer to its title than to the middle column. The button stops at 7.5 of its own type size
     instead of running the width of the column, so the three signs still share one line. */
  .menu .accbtn{width:calc(7.5em + 15px);max-width:100%}   /* + 15px: a touch too close at 7.5em alone */
  .menu .mbox{flex:1 1 auto}
  .menu .mfilm{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
  .menu .mfilm .ph{flex:1 1 auto;aspect-ratio:auto;min-height:140px}
  .menu .mfilm .ph img{position:absolute;inset:0}
}
.menu .mcol{display:flex;flex-direction:column;gap:14px}
.menu .mbox{background:var(--paper-2);border-radius:var(--r);padding:22px 26px 24px}
.menu .mbox h3{margin-bottom:14px}
.menu .mbox .socials a{background:rgba(26,26,26,.1)}
/* "Everything" in a box of its own, level with "Watch" and as wide as the film cards: the left
   column is 1.25 of the grid and the film column 1.1, so the box is 1.1/1.25 of its column. */
.menu .mlabel{width:88%;padding:22px 26px;margin-bottom:14px;flex:0 0 auto}
.menu .mlabel h3{margin:0}
@media (max-width:1000px){ .menu .mlabel{width:100%} }

/* the honeypot field on the live form: off the page, out of the tab order, never seen */
.enquiry .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}