/* ==========================================================================
   Lohuis Signature
   --------------------------------------------------------------------------
   This file has two halves:

   1. BASE — written by hand. Colours, typography, layout behaviour,
      accessibility and animation. Edit this half.

   2. COMPONENT STYLES — generated from the original design. One rule per
      distinct style in the layout (.s1, .s2, ...). Editing these by hand is
      possible but they are best left alone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — self-hosted
   Newsreader and Jost are served from this repository rather than from
   Google's servers. Loading them from Google sends every visitor's IP address
   to Google before they have agreed to anything, which EU courts have held to
   breach the GDPR. Serving the files ourselves removes the third party
   altogether — and the page no longer depends on Google being reachable.
   Both families are licensed under the SIL Open Font License 1.1, which
   permits this; see fonts/OFL.txt.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(../fonts/newsreader-200-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/newsreader-300-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../fonts/newsreader-200.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/newsreader-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Brand palette -------------------------------------------------------- */
:root {
  --ground:  #F1EDE5;   /* page background            */
  --panel:   #FAF8F3;   /* raised panels              */
  --ink:     #1A1917;   /* primary text               */
  --ink2:    #4B4741;   /* secondary text             */
  --muted:   #615C51;   /* labels, captions           */
  --line:    #DED6C6;   /* hairlines                  */
  --accent:  #7C5E33;   /* bronze                     */
  --dark:    #141311;   /* dark sections and footer   */
  --on-dark: #F1EDE5;
  --on-dark2:#A9A29A;
  --disp: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui:   'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Reset ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--ground); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--ground); }

.page {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
}

/* The horizontal nav scrolls on narrow screens; hide its scrollbar. */
nav[data-ls-nav] { scrollbar-width: none; -ms-overflow-style: none; }
nav[data-ls-nav]::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* --- Accessibility -------------------------------------------------------- */

/* Keyboard users must always be able to see where they are. The original
   design set outline:none on the form fields with nothing in its place. */
.page :focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* On dark sections the bronze outline is too low-contrast. */
.page section[class] :focus-visible { outline-color: currentColor; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--dark);
  color: var(--on-dark);
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

/* The dimmed half of the "Reply by" toggle. Kept light enough to stay
   readable (the design's .42 opacity fell below the contrast minimum). */
[data-mode][aria-pressed="false"] { opacity: .62; }
[data-mode][aria-pressed="true"]  { opacity: 1; }

/* --- Header --------------------------------------------------------------- */
/* JS adds .is-solid once the page is scrolled past the hero. */
.page > header.is-solid {
  background: #0C0C0B;
  border-bottom-color: rgba(241, 237, 229, .14);
}

/* --- Reveal on scroll ----------------------------------------------------- */
/* Content is visible by default, so the page reads perfectly with JavaScript
   off. Only when the script confirms it is running (.js on <html>) do we hide
   it in order to fade it back in. */
.js [data-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.16, .8, .3, 1),
              transform .55s cubic-bezier(.16, .8, .3, 1),
              /* the hover border is a direct response to the pointer, so it
                 wants to be near-instant rather than eased in */
              box-shadow .12s ease-out,
              background-color .12s ease-out;
}
.js [data-rv][data-rv-on] { opacity: 1; transform: none; }

/* --- Photograph galleries ------------------------------------------------- */
/* Images are stacked; the first is shown. JavaScript adds the dot navigation
   and cross-fades between them. Without JavaScript the first simply stays. */
[data-gal] { position: relative; }
[data-gal] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-gal] > img + img { opacity: 0; }
.js [data-gal] > img {
  transition: opacity .85s cubic-bezier(.16, .8, .3, 1),
              transform 1.6s cubic-bezier(.16, .8, .3, 1);
}
[data-gal] .gal-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
  background: linear-gradient(0deg, rgba(10, 10, 9, .62) 0%, rgba(10, 10, 9, 0) 100%);
  pointer-events: none;
}
[data-gal] .gal-nav {
  position: absolute;
  left: 14px;
  bottom: 6px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
[data-gal] .gal-nav button { padding: 14px 3px; line-height: 0; }
[data-gal] .gal-nav span {
  display: block;
  width: 22px;
  height: 1px;
  background: #F1EDE5;
  opacity: .55;
  transition: opacity .4s, height .4s;
}
[data-gal] .gal-nav [aria-selected="true"] span { opacity: 1; height: 2px; }

/* --- Animation ------------------------------------------------------------ */
@keyframes kb  { from { transform: scale(1.16);  } to { transform: scale(1.005); } }
@keyframes kbs { from { transform: scale(1.1);   } to { transform: scale(1);     } }

/* Respect the visitor's own "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-rv] { opacity: 1 !important; transform: none !important; }
  [data-kb] { animation: none !important; }
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 640px) {
  /* Keep the full-height homepage hero from running past a phone screen.
     Scoped to .s8 — applied to every banner it stretched the shorter inner-page
     ones to 88vh as well, which left them mostly empty. */
  .page > main > section:first-child.s8 { min-height: 88vh; }
}


/* ==========================================================================
   COMPONENT STYLES — generated from the design. See note at the top.
   ========================================================================== */

/* Generated component styles — one rule per distinct style in the design. */
.s1{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .7s ease,border-color .7s ease;color:#F1EDE5}
.s2{max-width:1440px;margin:0 auto;padding:0 clamp(14px,4vw,60px);height:clamp(66px,8vh,96px);display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,3vw,60px)}
.s3{flex-shrink:0;display:block;width:clamp(88px,12vw,168px);aspect-ratio:2.961;mask:url(../images/brand/sig-mask.png) no-repeat left center/contain;-webkit-mask:url(../images/brand/sig-mask.png) no-repeat left center/contain;background:currentColor}
.s4{display:flex;align-items:center;gap:clamp(14px,2.4vw,38px);min-width:0;overflow-x:auto;padding:2px 0;justify-content:flex-start;margin-left:auto;-webkit-overflow-scrolling:touch}
.s5{display:inline-block;flex-shrink:0;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;padding:8px 0;white-space:nowrap}
.s6{display:block;height:1px;margin-top:6px;background:currentColor;opacity:0;transition:opacity .4s}
.s7{display:inline-block;flex-shrink:0;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;padding:8px 0;white-space:nowrap;border:1px solid rgba(241,237,229,.34);padding:11px 20px}
.s8{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#0C0C0B;color:#F1EDE5}
.s9{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;animation:kb 30s cubic-bezier(.25,.5,.2,1) both}
.s10{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,10,9,.9) 0%,rgba(10,10,9,.66) 44%,rgba(10,10,9,.2) 100%)}
.s11{position:absolute;left:-2vw;bottom:16vh;width:min(74vw,1000px);aspect-ratio:3.296;opacity:.085;mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;background:#F1EDE5;pointer-events:none}
.s12{position:relative;max-width:1440px;width:100%;margin:0 auto;padding:clamp(120px,18vh,200px) clamp(20px,4vw,60px) clamp(48px,8vh,86px)}
.s13{display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(241,237,229,.72);margin-bottom:clamp(24px,4vh,40px)}
.s14{display:block;width:38px;height:1px;background:currentColor}
.s15{font-family:var(--disp);font-weight:200;font-size:clamp(42px,7vw,116px);line-height:.98;letter-spacing:-.022em;margin:0;max-width:19ch}
.s16{display:inline-block}
.s17{display:inline-block;font-style:italic;font-weight:300}
.s18{max-width:50ch;margin:clamp(26px,4vh,42px) 0 0;font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.85;color:rgba(241,237,229,.86)}
.s19{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,5vh,50px)}
.s20{display:inline-block;padding:18px 34px;background:#F1EDE5;color:#141311;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.s21{display:inline-block;padding:18px 34px;box-shadow:inset 0 0 0 1px rgba(241,237,229,.4);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.s22{position:relative;border-top:1px solid rgba(241,237,229,.16)}
.s23{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,60px);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.s24{padding:20px 0;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(241,237,229,.72)}
.s25{padding:clamp(90px,14vh,190px) clamp(20px,4vw,60px)}
.s26{max-width:1120px;margin:0 auto;text-align:center}
.s27{width:120px;aspect-ratio:3.296;margin:0 auto clamp(34px,5vh,54px)}
.s28{width:100%;height:100%;mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;background:var(--accent)}
.s29{font-family:var(--disp);font-weight:200;font-size:clamp(26px,3.6vw,50px);line-height:1.24;letter-spacing:-.015em;margin:0;text-wrap:pretty}
.s30{max-width:62ch;margin:clamp(28px,4vh,44px) auto 0;font-size:16.5px;line-height:1.9;color:var(--ink2)}
.s31{padding:0 clamp(20px,4vw,60px) clamp(80px,12vh,160px)}
.s32{max-width:1440px;margin:0 auto}
.s33{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:clamp(16px,3vh,30px)}
.s34{font-family:var(--disp);font-weight:200;font-size:clamp(28px,4vw,58px);line-height:1.02;letter-spacing:-.02em;margin:0}
.s35{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.s36{display:grid}
.s37{display:grid;grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr) clamp(0px,18vw,300px);gap:clamp(18px,3vw,48px);align-items:center;text-align:left;padding:clamp(26px,3.4vw,46px) 0;border-bottom:1px solid var(--line)}
.s38{font-family:var(--disp);font-weight:200;font-size:clamp(20px,2vw,30px);color:var(--accent)}
.s39{display:block;min-width:0}
.s40{display:block;font-family:var(--disp);font-weight:200;font-size:clamp(26px,3.2vw,44px);line-height:1.08;letter-spacing:-.018em}
.s41{display:block;margin-top:12px;font-size:15.5px;line-height:1.8;color:var(--ink2);max-width:56ch}
.s42{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--panel)}
.s43{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 1.1s ease,transform 1.4s cubic-bezier(.16,.8,.3,1)}
.s44{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:grayscale(1);transition:filter 1.1s ease,transform 1.4s cubic-bezier(.16,.8,.3,1)}
.s45{width:100%;height:100%;object-fit:cover;object-position:50% 63%;filter:grayscale(1);transition:filter 1.1s ease,transform 1.4s cubic-bezier(.16,.8,.3,1)}
.s46{width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:grayscale(1);transition:filter 1.1s ease,transform 1.4s cubic-bezier(.16,.8,.3,1)}
.s47{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;min-height:min(88vh,860px);display:flex;align-items:flex-end}
.s48{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:50% 58%}
.s49{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,9,.88) 0%,rgba(10,10,9,.34) 52%,rgba(10,10,9,.5) 100%)}
.s50{position:relative;max-width:1440px;width:100%;margin:0 auto;padding:clamp(70px,12vh,140px) clamp(20px,4vw,60px)}
.s51{display:flex;align-items:center;gap:16px;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(241,237,229,.76);margin-bottom:26px}
.s52{font-family:var(--disp);font-weight:200;font-style:italic;font-size:clamp(24px,3.2vw,46px);line-height:1.26;letter-spacing:-.015em;margin:0;max-width:30ch}
.s53{padding:clamp(90px,14vh,180px) clamp(20px,4vw,60px)}
.s54{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(40px,6vw,110px);align-items:start}
.s55{display:flex;align-items:center;gap:16px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.s56{font-family:var(--disp);font-weight:200;font-size:clamp(28px,4vw,58px);line-height:1.04;letter-spacing:-.02em;margin:0;max-width:15ch}
.s57{margin:28px 0 0;font-size:16px;line-height:1.9;color:var(--ink2);max-width:44ch}
.s58{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:clamp(22px,3vw,36px) 0;border-top:1px solid var(--line)}
.s59{font-family:var(--disp);font-weight:200;font-size:22px;color:var(--accent)}
.s60{margin:0 0 10px;font-family:var(--disp);font-weight:300;font-size:clamp(19px,1.8vw,25px);line-height:1.2}
.s61{margin:0;font-size:15.5px;line-height:1.85;color:var(--ink2);max-width:52ch}
.s62{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:clamp(22px,3vw,36px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s63{padding:0 clamp(20px,4vw,60px) clamp(90px,14vh,180px)}
.s64{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line)}
.s65{background:var(--ground);padding:clamp(28px,3.6vw,52px) clamp(24px,3vw,44px) clamp(28px,3.6vw,52px) 0}
.s66{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.s67{margin:0;font-family:var(--disp);font-weight:300;font-size:clamp(18px,1.8vw,24px);line-height:1.45;letter-spacing:-.01em}
.s68{background:var(--ground);padding:clamp(28px,3.6vw,52px) clamp(24px,3vw,44px)}
.s69{background:var(--ground);padding:clamp(28px,3.6vw,52px) 0 clamp(28px,3.6vw,52px) clamp(24px,3vw,44px)}
.s70{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);padding:clamp(70px,12vh,150px) clamp(20px,4vw,60px)}
.s71{max-width:1440px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px);align-items:flex-end;justify-content:space-between}
.s72{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--on-dark2);margin-bottom:26px}
.s73{margin:0;font-family:var(--disp);font-weight:200;font-size:clamp(26px,3.4vw,50px);line-height:1.16;letter-spacing:-.02em;max-width:22ch}
.s74{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.s75{width:clamp(160px,20vw,260px);aspect-ratio:3.296;mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;background:var(--accent)}
.s76{display:flex;flex-wrap:wrap;gap:14px}
.s77{padding:18px 34px;background:var(--on-dark);color:var(--dark);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.s78{padding:18px 34px;box-shadow:inset 0 0 0 1px rgba(241,237,229,.4);color:var(--on-dark);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.s79{background:var(--dark);color:var(--on-dark);border-top:1px solid rgba(241,237,229,.14);padding:clamp(50px,8vh,90px) clamp(20px,4vw,60px) clamp(30px,4vh,44px)}
.s80{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(30px,4vw,64px);align-items:start}
.s81{width:150px;aspect-ratio:2.961;mask:url(../images/brand/sig-mask.png) no-repeat left center/contain;-webkit-mask:url(../images/brand/sig-mask.png) no-repeat left center/contain;background:currentColor;margin-bottom:22px}
.s82{margin:0;font-size:13.5px;line-height:1.8;color:var(--on-dark2);max-width:30ch}
.s83{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark2);margin-bottom:18px}
.s84{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.s85{display:inline-block;font-size:13.5px}
.s86{font-size:13.5px;color:var(--on-dark2)}
.s87{display:flex;flex-direction:column;gap:12px;font-size:13.5px;line-height:1.6;color:var(--on-dark2)}
.s88{color:var(--on-dark)}
.s89{margin-top:clamp(40px,6vh,72px);padding-top:24px;border-top:1px solid rgba(241,237,229,.14);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark2)}
.s90{display:flex;flex-wrap:wrap;gap:18px clamp(18px,3vw,34px)}
.s91{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.s92{display:block;height:1px;margin-top:6px;background:currentColor;opacity:1;transition:opacity .4s}
.s93{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;display:flex;align-items:flex-end;min-height:min(72vh,720px)}
.s94{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 54%;animation:kbs 26s cubic-bezier(.25,.5,.2,1) both}
.s95{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,10,9,.92) 0%,rgba(10,10,9,.7) 46%,rgba(10,10,9,.3) 100%)}
.s96{position:relative;max-width:1440px;width:100%;margin:0 auto;padding:clamp(130px,20vh,220px) clamp(20px,4vw,60px) clamp(56px,9vh,100px)}
.s97{font-family:var(--disp);font-weight:200;font-size:clamp(40px,6.4vw,104px);line-height:1;letter-spacing:-.022em;margin:0}
.s98{max-width:52ch;margin:32px 0 0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.85;color:rgba(241,237,229,.86)}
.s99{padding:clamp(70px,10vh,130px) clamp(20px,4vw,60px) clamp(80px,12vh,160px)}
.s100{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.s101{background:var(--panel);text-align:left;display:flex;flex-direction:column}
.s102{display:block;position:relative;overflow:hidden;aspect-ratio:4/3}
.s103{width:100%;height:100%;object-fit:cover;transition:transform 1.5s cubic-bezier(.16,.8,.3,1)}
.s104{display:block;padding:clamp(26px,3vw,42px)}
.s105{display:block;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.s106{display:block;font-family:var(--disp);font-weight:200;font-size:clamp(24px,2.6vw,36px);line-height:1.08;letter-spacing:-.018em}
.s107{display:block;margin-top:14px;font-size:15px;line-height:1.82;color:var(--ink2)}
.s108{display:block;margin-top:24px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.s109{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transition:transform 1.5s cubic-bezier(.16,.8,.3,1)}
.s110{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transition:transform 1.5s cubic-bezier(.16,.8,.3,1)}
.s111{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transition:transform 1.5s cubic-bezier(.16,.8,.3,1)}
.s112{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;display:flex;align-items:flex-end;min-height:min(80vh,780px)}
.s113{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:kbs 28s cubic-bezier(.25,.5,.2,1) both}
.s114{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,10,9,.93) 0%,rgba(10,10,9,.7) 46%,rgba(10,10,9,.28) 100%)}
.s115{position:absolute;right:-4vw;top:22vh;width:min(46vw,620px);aspect-ratio:3.296;opacity:.07;mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;background:#F1EDE5;pointer-events:none}
.s116{max-width:54ch;margin:32px 0 0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.85;color:rgba(241,237,229,.86)}
.s117{padding:clamp(70px,11vh,150px) clamp(20px,4vw,60px)}
.s118{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(40px,6vw,110px);align-items:start}
.s119{margin:0;font-family:var(--disp);font-weight:200;font-size:clamp(24px,3vw,42px);line-height:1.28;letter-spacing:-.015em;text-wrap:pretty}
.s120{margin:28px 0 0;font-size:16px;line-height:1.9;color:var(--ink2);max-width:52ch}
.s121{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s122{background:var(--ground);padding:clamp(22px,2.6vw,34px) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline}
.s123{font-family:var(--disp);font-weight:300;font-size:clamp(17px,1.6vw,22px);line-height:1.3}
.s124{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.s125{background:var(--panel);padding:clamp(30px,3.4vw,52px);display:flex;flex-direction:column;gap:16px}
.s126{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.s127{font-family:var(--disp);font-weight:200;font-size:clamp(23px,2.4vw,34px);line-height:1.1;letter-spacing:-.018em;margin:0}
.s128{margin:0;font-size:15.5px;line-height:1.85;color:var(--ink2);max-width:46ch}
.s129{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.s130{display:grid;grid-template-columns:16px minmax(0,1fr);gap:14px;font-size:14.5px;line-height:1.7;color:var(--ink2)}
.s131{color:var(--muted)}
.s132{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:kbs 28s cubic-bezier(.25,.5,.2,1) both}
.s133{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,10,9,.94) 0%,rgba(10,10,9,.72) 46%,rgba(10,10,9,.34) 100%)}
.s134{max-width:1120px;margin:0 auto}
.s135{margin:0;font-family:var(--disp);font-weight:200;font-size:clamp(24px,3vw,44px);line-height:1.28;letter-spacing:-.015em;text-wrap:pretty}
.s136{margin:30px 0 0;font-size:16.5px;line-height:1.9;color:var(--ink2);max-width:58ch}
.s137{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(30px,4vw,64px);padding-top:clamp(40px,6vh,72px);border-top:1px solid var(--line)}
.s138{margin:0 0 14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--accent)}
.s139{margin:0;font-size:15px;line-height:1.85;color:var(--ink2)}
.s140{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;display:flex;align-items:flex-end;min-height:min(84vh,820px)}
.s141{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;animation:kbs 30s cubic-bezier(.25,.5,.2,1) both}
.s142{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,10,9,.9) 0%,rgba(10,10,9,.62) 46%,rgba(10,10,9,.22) 100%)}
.s143{position:absolute;left:-3vw;bottom:14vh;width:min(60vw,780px);aspect-ratio:3.296;opacity:.08;mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;background:#F1EDE5;pointer-events:none}
.s144{margin:22px 0 0;font-size:15px;line-height:1.85;color:var(--muted);max-width:52ch}
.s145{color:var(--accent);border-bottom:1px solid currentColor}
.s146{background:var(--ground);padding:clamp(24px,2.8vw,38px) 0}
.s147{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.s148{margin:0;font-family:var(--disp);font-weight:300;font-size:clamp(17px,1.7vw,23px);line-height:1.4}
.s149{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:kbs 28s cubic-bezier(.25,.5,.2,1) both}
.s150{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,10,9,.93) 0%,rgba(10,10,9,.7) 48%,rgba(10,10,9,.3) 100%)}
.s151{padding:clamp(70px,11vh,150px) clamp(20px,4vw,60px) clamp(80px,12vh,160px)}
.s152{margin:0;max-width:26ch;font-family:var(--disp);font-weight:200;font-size:clamp(26px,3.4vw,48px);line-height:1.24;letter-spacing:-.018em}
.s153{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(44px,6vh,80px)}
.s154{background:var(--panel);padding:clamp(28px,3.2vw,46px)}
.s155{font-family:var(--disp);font-weight:200;font-size:26px;color:var(--accent);margin-bottom:18px}
.s156{margin:0 0 12px;font-family:var(--disp);font-weight:300;font-size:clamp(19px,1.9vw,26px);line-height:1.18}
.s157{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 52%;animation:kbs 26s cubic-bezier(.25,.5,.2,1) both}
.s158{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,10,9,.92) 0%,rgba(10,10,9,.68) 48%,rgba(10,10,9,.26) 100%)}
.s159{font-family:var(--disp);font-weight:200;font-size:clamp(40px,6.4vw,104px);line-height:1;letter-spacing:-.022em;margin:0;max-width:16ch}
.s160{padding:clamp(70px,11vh,150px) clamp(20px,4vw,60px) clamp(50px,7vh,90px)}
.s161{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:clamp(30px,4vh,52px)}
.s162{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.s163{font-family:var(--disp);font-weight:200;font-size:clamp(26px,3.4vw,48px);line-height:1.04;letter-spacing:-.02em;margin:0}
.s164{margin:0;font-size:15px;line-height:1.8;color:var(--ink2);max-width:38ch}
.s165{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,3.4vw,56px)}
.s166{display:flex;flex-direction:column}
.s167{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--panel)}
.s168{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,.8,.3,1)}
.s169{padding-top:22px;border-top:1px solid var(--line);margin-top:22px}
.s170{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.s171{margin:0;font-family:var(--disp);font-weight:300;font-size:clamp(20px,2vw,27px);line-height:1.15}
.s172{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.s173{margin:12px 0 0;font-size:15px;line-height:1.85;color:var(--ink2)}
.s174{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);transition:transform 1.6s cubic-bezier(.16,.8,.3,1)}
.s175{padding:0 clamp(20px,4vw,60px) clamp(50px,7vh,90px)}
.s176{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform 1.6s cubic-bezier(.16,.8,.3,1)}
.s177{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;display:flex;align-items:flex-end;min-height:min(70vh,700px)}
.s178{position:absolute;inset:0;background:#0C0C0B}
.s179{position:absolute;right:-6vw;top:26vh;width:min(70vw,900px);aspect-ratio:3.296;opacity:.1;mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;background:#F1EDE5;pointer-events:none}
.s180{margin:0;font-size:16.5px;line-height:1.9;color:var(--ink2);max-width:58ch}
.s181{margin:22px 0 0;font-size:16.5px;line-height:1.9;color:var(--ink2);max-width:58ch}
.s182{padding:0 clamp(20px,4vw,60px) clamp(70px,11vh,150px)}
.s183{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(36px,5vw,80px);align-items:center;padding-top:clamp(40px,6vh,72px);border-top:1px solid var(--line)}
.s184{position:relative;overflow:hidden;aspect-ratio:4/5;width:min(100%,320px);background:var(--panel)}
.s185{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.s186{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.s187{margin:0 0 18px;font-family:var(--disp);font-weight:200;font-size:clamp(26px,3vw,42px);line-height:1.08;letter-spacing:-.018em}
.s188{margin:0;font-size:16px;line-height:1.9;color:var(--ink2);max-width:46ch}
.s189{display:inline-block;margin-top:28px;padding:16px 30px;box-shadow:inset 0 0 0 1px var(--line);font-size:10px;letter-spacing:.28em;text-transform:uppercase}
.s190{max-width:1440px;margin:0 auto;border-top:1px solid var(--line);padding-top:clamp(40px,6vh,72px)}
.s191{margin:0 0 clamp(34px,5vh,56px);font-family:var(--disp);font-weight:200;font-size:clamp(20px,2.2vw,32px);line-height:1.3;letter-spacing:-.015em;max-width:28ch}
.s192{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:clamp(26px,4vw,54px);align-items:center}
.s193{display:flex;align-items:center;justify-content:center}
.s194{width:auto;height:78px;max-width:100%;object-fit:contain}
.s195{width:100%;height:auto;opacity:.68;filter:brightness(0) saturate(0)}
.s196{width:auto;height:74px;max-width:100%;object-fit:contain;justify-self:center;opacity:.68;filter:brightness(0) saturate(0)}
.s197{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;display:flex;align-items:flex-end;min-height:min(62vh,620px)}
.s198{position:absolute;left:-2vw;bottom:8vh;width:min(80vw,1100px);aspect-ratio:3.296;opacity:.09;mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;background:#F1EDE5;pointer-events:none}
.s199{position:relative;max-width:1440px;width:100%;margin:0 auto;padding:clamp(130px,20vh,220px) clamp(20px,4vw,60px) clamp(50px,8vh,90px)}
.s200{padding:clamp(60px,10vh,130px) clamp(20px,4vw,60px) clamp(80px,12vh,160px)}
.s201{margin:0 0 34px;font-size:16.5px;line-height:1.9;color:var(--ink2);max-width:48ch}
.s202{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:14px;justify-content:start;align-items:stretch;text-align:center}
.s203{display:inline-block;padding:18px 32px;background:var(--ink);color:var(--ground);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.s204{padding:18px 32px;box-shadow:inset 0 0 0 1px var(--line);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.s205{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px;margin-top:clamp(40px,6vh,64px);padding-top:32px;border-top:1px solid var(--line)}
.s206{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.s207{font-size:15px;line-height:1.7;color:var(--ink2)}
.s208{background:var(--panel);padding:clamp(30px,3.4vw,52px)}
.s209{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.s210{display:grid;gap:1px;background:var(--line)}
.s211{background:var(--panel);padding:18px 0;font-family:var(--disp);font-weight:300;font-size:clamp(17px,1.7vw,22px);line-height:1.35}
.s212{margin:28px 0 0;font-size:14.5px;line-height:1.8;color:var(--muted)}
.s213{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;display:flex;align-items:flex-end;min-height:min(52vh,520px)}
.s214{position:absolute;left:-2vw;bottom:6vh;width:min(78vw,1000px);aspect-ratio:3.296;opacity:.085;mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat left center/contain;background:#F1EDE5;pointer-events:none}
.s215{position:relative;max-width:1440px;width:100%;margin:0 auto;padding:clamp(120px,18vh,200px) clamp(20px,4vw,60px) clamp(44px,7vh,80px)}
.s216{display:flex;align-items:center;gap:14px;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(241,237,229,.76);margin-bottom:26px}
.s217{font-family:var(--disp);font-weight:200;font-size:clamp(36px,5.6vw,88px);line-height:1;letter-spacing:-.022em;margin:0}
.s218{max-width:52ch;margin:26px 0 0;font-size:clamp(15px,1.2vw,17.5px);line-height:1.85;color:rgba(241,237,229,.86)}
.s219{padding:clamp(56px,9vh,110px) clamp(20px,4vw,60px) clamp(80px,12vh,160px)}
.s220{display:grid;gap:clamp(22px,3vh,34px)}
.s221{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.s222{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.s223{padding:11px 20px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--ink)}
.s224{display:grid;gap:10px}
.s225{width:100%;font-family:var(--ui);font-size:16px;font-weight:300;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0;outline:none}
.s226{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(22px,3vw,34px)}
.s227{width:100%;font-family:var(--ui);font-size:16px;font-weight:300;line-height:1.7;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0;outline:none;resize:vertical}
.s228{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px}
.s229{padding:18px 34px;background:var(--ink);color:var(--ground);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.s230{padding:18px 34px;box-shadow:inset 0 0 0 1px var(--line);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.s231{position:absolute;right:-4vw;bottom:8vh;width:min(60vw,780px);aspect-ratio:3.296;opacity:.08;mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;-webkit-mask:url(../images/brand/sig-script-mask.png) no-repeat center/contain;background:#F1EDE5;pointer-events:none}
.s232{max-width:1000px;margin:0 auto;display:grid}
.s233{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--line)}
.s234{font-family:var(--disp);font-weight:200;font-size:20px;color:var(--accent)}
.s235{margin:0 0 12px;font-family:var(--disp);font-weight:300;font-size:clamp(19px,1.9vw,26px);line-height:1.25}
.s236{margin:0;font-size:15.5px;line-height:1.85;color:var(--ink2);max-width:58ch}
.s237{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s238{position:relative;overflow:hidden;background:#0C0C0B;color:#F1EDE5;display:flex;align-items:flex-end;min-height:min(46vh,460px)}
.s239{position:relative;max-width:1440px;width:100%;margin:0 auto;padding:clamp(120px,18vh,200px) clamp(20px,4vw,60px) clamp(40px,6vh,72px)}
.s240{font-family:var(--disp);font-weight:200;font-size:clamp(34px,5.2vw,80px);line-height:1;letter-spacing:-.022em;margin:0}
.s241{max-width:900px;margin:0 auto}
.s242{margin:0 0 clamp(40px,6vh,64px);font-family:var(--disp);font-weight:200;font-size:clamp(20px,2.4vw,32px);line-height:1.35;letter-spacing:-.012em}
.s243{padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line)}
.s244{margin:0 0 14px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;color:var(--accent)}
.s245{margin:0;font-size:15.5px;line-height:1.9;color:var(--ink2);max-width:64ch}
.s246{padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Hover states */
.hv1:hover{background:#F1EDE5;color:#141311;border-color:#F1EDE5}
.hv2:hover{background:transparent;color:#F1EDE5;box-shadow:inset 0 0 0 1px #F1EDE5}
.hv3:hover{box-shadow:inset 0 0 0 1px #F1EDE5}
.hv4:hover{background:var(--panel)}
.hv5:hover{filter:grayscale(0);transform:scale(1.04)}
.hv6:hover{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--on-dark)}
.hv7:hover{box-shadow:inset 0 0 0 1px var(--on-dark)}
.hv8:hover{color:var(--accent)}
.hv9:hover{background:var(--ground)}
.hv10:hover{transform:scale(1.05)}
.hv11:hover{transform:scaleX(-1.05) scaleY(1.05)}
.hv12:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.hv13:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hv14:hover{color:#F1EDE5}
.hv15:hover{opacity:1}

/* Focus states */
.fc1:focus{border-color:var(--accent)}

/* ==========================================================================
   RESPONSIVE CORRECTIONS
   Written by hand, and kept last so these rules win over the generated ones.
   ========================================================================== */

/* The three "Discretion / Small by design / Our car or yours" panels on the
   homepage, and the three retainer panels, are laid out by `auto-fit`. On a
   tablet that resolves to two columns — leaving a third item on its own and an
   empty fourth cell, which showed as a coloured block because the grid paints
   its gaps. Three columns or one, never two. */
@media (min-width: 920px) {
  .s64,
  .s153 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 919px) {
  .s64,
  .s153 { grid-template-columns: 1fr; }

  /* Stacked, the panels must all start at the same edge. The design gives the
     first no left padding and the last no right padding, which only reads
     correctly when the three sit side by side. */
  .s64 > [class] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   MOBILE AND TABLET MENU
   Below 900px the five navigation items move behind a menu button and open as
   a full-screen panel. Above it nothing here changes anything — the ordinary
   navigation bar is used.

   900px is where the bar actually runs out of room rather than a round number:
   measured on the homepage, the space left over between the logo and the far
   edge is 13px at 768px wide, 57px at 834px and 102px at 900px. So every
   tablet held upright folds the menu away, while a tablet turned on its side
   (1024px, with 185px to spare) keeps the full bar. Raise this one value and
   the landscape tablet folds too.

   THREE PLACES MUST AGREE: this block, the short-screen block that follows it,
   and the min-width block that forces the panel shut again on wider screens.
   The tap bar further down is deliberately kept in step with them as well.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;              /* shown only on small screens, below */
  width: 44px;                /* a comfortable tap target */
  height: 44px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: background-color .2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.16, .8, .3, 1);
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top:  7px; }

/* Open: the three bars become a cross. */
[data-menu-open] .nav-toggle-bars { background: transparent; }
[data-menu-open] .nav-toggle-bars::before { transform: translateY(7px)  rotate(45deg); }
[data-menu-open] .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Scoped to .js: with JavaScript off the button could never open the panel,
     so the ordinary navigation bar is left in place instead. */
  .js .nav-toggle { display: flex; position: relative; z-index: 2; }

  /* Keep the logo and the button above the panel that slides in behind them. */
  .page > header > div { position: relative; }
  .site-logo { position: relative; z-index: 2; }

  .js .page > header nav[data-ls-nav] {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(18px, 4vh, 34px);
    margin: 0;
    padding: clamp(96px, 16vh, 150px) clamp(24px, 8vw, 56px) clamp(40px, 8vh, 72px);
    background: #0C0C0B;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't drag the page along underneath */
    opacity: 0;
    visibility: hidden;        /* also takes the links out of the tab order */
    transform: translateY(-10px);
    transition: opacity .34s ease,
                transform .44s cubic-bezier(.16, .8, .3, 1),
                visibility .44s;
  }

  .js[data-menu-open] .page > header nav[data-ls-nav] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Hold the page still while the menu is over it. */
  html[data-menu-open],
  html[data-menu-open] body { overflow: hidden; }

  /* Roomier type and tap targets than the desktop bar uses. */
  .js .page > header nav[data-ls-nav] > a {
    font-size: 15px;
    letter-spacing: .2em;
    padding: 12px 0;
  }
  .js .page > header nav[data-ls-nav] > a:last-child {
    margin-top: clamp(10px, 2vh, 20px);
    padding: 17px 30px;
  }

  /* "Call us" is a button too, so it needs the button's padding rather than
     the bare-link padding the rule above gives every other item — without it
     the border would sit hard against the words. The two buttons then stand
     together at the foot of the panel, separated by the panel's own gap
     rather than by the extra space that sets the pair apart from the links. */
  .js .page > header nav[data-ls-nav] > a.nav-call {
    margin-top: clamp(10px, 2vh, 20px);
    padding: 17px 30px;
  }
  .js .page > header nav[data-ls-nav] > a.nav-call + a:last-child { margin-top: 0; }

  /* Sized to the longer of the two labels, so they stack as a tidy pair
     instead of two different widths. */
  .js .page > header nav[data-ls-nav] > a.nav-call,
  .js .page > header nav[data-ls-nav] > a.nav-call + a:last-child {
    text-align: center;
    min-width: 16.5em;   /* wider than "Request contact" sets itself, or only
                            the shorter label would take the hint */
  }
}

/* A phone held sideways is short enough that the centred menu would be taller
   than the screen — and a centred flex column that overflows gets clipped at
   the top, out of reach. Start it from the top instead and let it scroll. */
@media (max-width: 900px) and (max-height: 600px) {
  .js .page > header nav[data-ls-nav] {
    justify-content: flex-start;
    padding-top: clamp(74px, 20vh, 110px);
  }

  /* Two buttons rather than one now sit at the foot of the panel, so the
     extra space that sets them apart from the links is space this screen
     cannot spare. The panel's own gap is separation enough here. */
  .js .page > header nav[data-ls-nav] > a.nav-call { margin-top: 0; }
}

/* The panel is a phone and tablet layout; never leave it open wider than that. */
@media (min-width: 901px) {
  .js[data-menu-open] .page > header nav[data-ls-nav] {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   HERO EYEBROW
   "Schiphol · Europe-wide · By appointment" is too long for one line on a
   phone, and broke mid-phrase — leaving "Appointment" stranded by itself.
   Each half is now kept whole, and on small screens the second half takes its
   own line with the separating dot dropped.
   -------------------------------------------------------------------------- */
.eyebrow-a,
.eyebrow-b { white-space: nowrap; }

@media (max-width: 520px) {
  .eyebrow-sep { display: none; }
  .eyebrow-b { display: block; }
}

/* --------------------------------------------------------------------------
   HERO FOOTER STRIP  (Chauffeur / Concierge / Journeys / Retained)
   Four equal columns on a wide screen. Narrower, `auto-fit` dropped it to two
   columns and left the right-hand pair stranded mid-page — and at in-between
   widths it gave three columns with a lone fourth beneath. Pinned to a tidy
   two-by-two below the same 700px the menu uses, with the right-hand pair held
   in from the page edge so the four still read as a single row.
   -------------------------------------------------------------------------- */
@media (max-width: 699px) {
  /* The second column is only as wide as its longest label, so "Concierge" and
     "Retained" share a left edge the way "Chauffeur" and "Journeys" do —
     right-aligning them instead left their left edges ragged.

     Both pairs are then held the same distance in from their page margin, so
     the block sits centred rather than pushed out to the two edges. One value
     drives both sides: raise it to draw them further in, lower it to let them
     back out. */
  .s23 {
    grid-template-columns: 1fr max-content;
    --strip-inset: clamp(16px, 8vw, 56px);
  }
  .s23 > :nth-child(odd)  { margin-left:  var(--strip-inset); }
  .s23 > :nth-child(even) { margin-right: var(--strip-inset); }
}

/* --------------------------------------------------------------------------
   PAIRED CALL-TO-ACTION BUTTONS
   Each button is sized to its own label, so once they stack on a phone the
   difference in width shows plainly. Below 560px they become one column as
   wide as the longer label, and both fill it.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .s76,    /* "Request a call" / "Request an email" — the closing panel */
  .s19,    /* "The commissions" / "Begin an enquiry" — the homepage hero */
  .s228 {  /* "Send the enquiry" / "Send WhatsApp" — the enquiry form */
    display: grid;
    grid-template-columns: max-content;
  }

  .s76 > a,
  .s19 > a,
  .s228 > * { text-align: center; }
}

/* --------------------------------------------------------------------------
   INNER-PAGE BANNERS ON A PHONE
   Every page but the homepage opens on a shorter banner. At phone width the
   designed heights (up to 84vh) and the deep top padding meant for a desktop
   left the heading stranded near the bottom of an otherwise empty screen.
   Here the banner is sized to its content, with a floor so the photograph
   still reads as an image rather than a strip.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* A set height per group, rather than each page finding its own.
     Each value clears the tallest content in its group, so every page in a
     group comes out at exactly the same height.

       48vh  (tallest content 46.8vh — Fleet)
       44vh  (tallest content 38.6vh — Enquiry form)
       30vh  (tallest content 27.7vh — Privacy, Terms)   */

  /* Chauffeur, Concierge, Retainer, Journey, Commissions, Fleet,
     The House, Request contact */
  .s93,
  .s112,
  .s140,
  .s177,
  .s197 { min-height: 48vh; }

  /* Enquiry form, Questions */
  .s213 { min-height: 44vh; }

  /* Privacy, Terms */
  .s238 { min-height: 30vh; }

  /* The design bottom-aligns this text, which works only when the banner is
     as tall as its content. At a set height it would drop the heading down
     the screen on the shorter pages, so anchor it to the top instead — every
     heading then lands in the same place on every page. */
  .s93, .s112, .s140,
  .s177, .s197, .s213,
  .s238 { align-items: flex-start; }

  /* Enough clearance for the fixed header, and no more. */
  .s96,     /* chauffeur, concierge, retainer, journey, commissions, fleet, the house */
  .s199,    /* request contact */
  .s215,    /* enquiry form, questions */
  .s239 {   /* privacy, terms */
    padding-top: clamp(92px, 13vh, 130px);
  }
}

/* --------------------------------------------------------------------------
   COMMISSIONS BANNER FRAMING
   The photograph is a tall portrait shot (2500x3750) with the car low in the
   frame, used in banners that are much wider than they are tall. The design's
   crop cut the car off at every size — wheels gone on a phone, everything but
   the roofline gone on a desktop. These pull the crop down to the car.

   The wider the screen, the shallower the slice of the photograph that shows,
   so the usable range narrows: 69-100% at tablet width, 84.3-84.6% at 1920px.
   84.5% is the one value inside all of them.
   -------------------------------------------------------------------------- */
.s94 {
  /* The slow zoom scales from the centre by default, which crops the wheels
     back off while it runs. Anchor it to the foot of the image instead. */
  transform-origin: 50% 100%;
}

/* Tablet and desktop */
@media (min-width: 701px) {
  .s94 { object-position: 50% 84.5%; }
}

/* Phones — the banner is tall enough here to sit right at the foot. */
@media (max-width: 700px) {
  .s94 { object-position: 50% 100%; }
}

/* --------------------------------------------------------------------------
   RETAINER BANNER FRAMING
   This photograph (1082x725) is wider than the banner is on a phone or a
   tablet, so `cover` sizes it by width and the whole height shows — the full
   grille and the photographer's watermark along the bottom edge with it.
   (On a desktop the banner is wide enough that the bottom is cropped away
   naturally, which is why it only shows on the smaller screens.)

   Letting the image run taller than the banner crops it from the foot: the
   visible slice ends around row 678 of 725, which leaves the top line of the
   grille just showing and keeps the watermark out of frame.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .s149 {
    height: 107%;
    bottom: auto;   /* anchor to the top; the surplus is clipped at the foot */
    /* Held in reserve for a tablet turned sideways: there the banner is wide
       enough that the image is sized by width and does crop vertically, and
       the design's 22% would cut off just above the grille. Portrait screens
       crop by width instead, so this has no effect on them. */
    object-position: 50% 90%;
  }
}

/* --------------------------------------------------------------------------
   ENQUIRY FORM — sending
   -------------------------------------------------------------------------- */

/* Honeypot. Hidden from people and from screen readers; bots fill it in and
   the submission is discarded. Not display:none, which some bots skip. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 52ch;
}
.form-status[data-state="ok"]    { color: var(--accent); }
.form-status[data-state="error"] { color: #8A2F26; }

/* While sending, and once sent. */
[data-enquiry-form] button[type="submit"][disabled] {
  opacity: .55;
  cursor: default;
}

/* Two paragraphs in a row inside a policy section need a gap; the design only
   ever had one. */
.s245 + .s245 { margin-top: 18px; }

/* --------------------------------------------------------------------------
   HERO INTRODUCTION
   The design sets these paragraphs at 86% bone, which reads as slightly greyed
   against the photograph behind them. Brought up to the full bone the headlines
   already use, so the two belong together. One rule per page group — between
   them they cover the opening paragraph of all fourteen pages.
   -------------------------------------------------------------------------- */
.s18,     /* homepage, 404 */
.s98,     /* commissions */
.s116,    /* chauffeur, concierge, fleet, journey, retainer, the house */
.s218 {   /* enquiry form */
  color: #F1EDE5;
}

/* --------------------------------------------------------------------------
   COMMISSION ROWS AND CARDS — hover
   The design flipped the whole panel to a different shade on hover, which
   moves a lot of the page for a small signal. A narrow border says the same
   thing more quietly. Drawn inside the element with an inset shadow rather
   than a real border, so nothing shifts by a pixel when it appears.
   -------------------------------------------------------------------------- */
.hv4:hover { background: transparent;    box-shadow: inset 0 0 0 1px var(--accent); }
.hv9:hover { background: var(--panel);   box-shadow: inset 0 0 0 1px var(--accent); }

/* --------------------------------------------------------------------------
   "CALL US" IN THE HEADER
   The telephone number lived only in the footer, which on a long page meant
   scrolling the whole way down to find the one action most of these visitors
   want. It now sits in the navigation on every page, immediately before
   "Request contact".

   It carries the same .s7 button shape and the same border as "Request
   contact", so the two read as a matched pair. They are told apart by what
   they do on hover rather than by how they sit still: this one brings its
   border up to full, while "Request contact" fills solid — the louder of the
   two gestures, kept for the louder of the two actions.
   -------------------------------------------------------------------------- */
.nav-call {
  color: inherit;
  transition: border-color .4s ease;
}
.nav-call:hover { border-color: rgba(241, 237, 229, .8); }

/* --------------------------------------------------------------------------
   TAP BAR
   Below 900px the navigation folds behind the menu button, so the header's
   "Call us" goes with it and the screen is left with no visible way to call
   from any page. This puts the two channels this house actually answers — the
   telephone and WhatsApp — along the bottom of the screen instead.

   Its width therefore tracks the menu's, not a phone size: the bar exists to
   replace what the menu button hides, so the two turn on together. If it is
   ever wanted on phones alone, this is the one value to change — but then a
   tablet held upright has a hidden telephone number again.

   It is a sibling of .page rather than a child, so nothing in the page's own
   stacking or overflow can trap it. The page is given matching bottom padding
   so the bar never covers the closing call-to-action, and it is taken away
   entirely while the menu panel is open, where it would sit on top of it.
   -------------------------------------------------------------------------- */
.tapbar { display: none; }

@media (max-width: 900px) {
  .tapbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;               /* under the menu panel, over the page */
    border-top: 1px solid rgba(241, 237, 229, .10);
    /* Clears the home indicator on phones that have one. */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* Read the note below before lightening this. Without a backdrop filter
       there is nothing softening what shows through, so this stays nearly
       solid; the translucent version is applied only where the blur exists. */
    background: rgba(12, 12, 11, .92);
  }

  /* The bar sat as a solid black slab across the foot of every page. Letting
     the page through instead makes it sit on the page rather than on top of
     it — blurred, so the words stay the only sharp thing in it.

     Two ways to keep pale type legible over a bar that crosses both the dark
     footer and the bone ground: paint black over the page, or dim the page
     itself. Painting was tried first and needed .62 to hold 4.5:1, which is
     most of the way back to a slab.

     `brightness` in the backdrop filter dims instead. It scales what is behind
     the bar rather than covering it, so the shapes and the warmth of the page
     still come through — smoked glass rather than paint — and the black layer
     drops to .25. Contrast goes up, not down: the worst case, the full-width
     bone ground, reads about 5.7:1 against 4.9:1 before.

     `brightness` is the dial if this wants to be lighter still. Raising it
     lightens the bar and lowers contrast; the floor is around .58, where the
     bone ground reaches 4.5:1 and small pale type runs out of road. */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tapbar {
      background: rgba(12, 12, 11, .25);
      -webkit-backdrop-filter: blur(22px) saturate(115%) brightness(.5);
      backdrop-filter: blur(22px) saturate(115%) brightness(.5);
    }
  }

  .tapbar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;          /* a comfortable tap target */
    color: var(--on-dark);
    font-size: 10.5px;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 400;
  }

  /* A hairline between the two rather than a box around each. */
  .tapbar-item + .tapbar-item { border-left: 1px solid rgba(241, 237, 229, .14); }

  .tapbar-item:active { background: rgba(241, 237, 229, .08); }

  /* Room at the foot of the page so the bar covers nothing.

     This sits on the footer rather than on .page. Put on .page it made a
     53px strip of bone below the dark footer — invisible while the bar was
     solid, but the moment the bar let the page through, scrolling to the
     bottom turned it pale as it crossed from footer to strip. Growing the
     footer instead carries its dark all the way down, so the bar keeps one
     backdrop, and the closing line keeps the breathing room the design
     gave it (the clamp below is .s79's own bottom padding, plus the bar). */
  .page > footer {
    padding-bottom: calc(clamp(30px, 4vh, 44px) + 53px + env(safe-area-inset-bottom, 0px));
  }

  [data-menu-open] .tapbar { display: none; }
}

/* --------------------------------------------------------------------------
   NAVIGATION BAR — vertical alignment
   The plain links and the two buttons did not sit on the same line: the links
   rode 3.5px high.

   The cause is the hover underline each link carries. It is a block inside the
   link — 6px of margin and a 1px rule, 7px in all — sitting below the words.
   The bar centres each item's box, and that 7px hangs below the text, so
   centring the box pushes the text up by half of it. The buttons carry no
   underline, so their text centres honestly. Hence 3.5px, and hence only the
   links being wrong.

   Adding the same 7px back above the text re-centres it inside its own box,
   and the underline travels down with it, keeping the gap the design drew.
   Boxes are centred, so nothing else moves.

   The bar only: below 901px these become a stacked panel with a padding rule
   of its own, where there is no row to align to.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .page > header nav[data-ls-nav] > a.s5 { padding-top: 15px; }  /* 8px + 7px */
}