/* =====================================================================================
   Guest Delight International: shared inner-page stylesheet (design H, 4 Nov 2026).
   Plain CSS, no build step. Follows DESIGN.md; the header, menu, buttons and footer
   match site/assets/home.css exactly (the homepage keeps its own stylesheet).

   Contents
     1. Font and tokens
     2. Base type, links, focus
     3. Buttons and text links
     4. Header and full-screen menu
     5. Page opening (photograph, breadcrumb, h1)
     6. Sections and surfaces (ivory, mist, deep brown chapter)
     7. Section layouts: side heading, stacked heading, split with photo
     8. Long-read text (.prose) and ruled lists
     9. Items (hairline-topped groups): grid and rows
    10. Numbered steps (in the deep brown chapter)
    11. Checklist (ruled, two columns, gold ticks)
    12. Tabs (progressive: every panel is visible without JavaScript)
    13. FAQ accordion (<details>)
    14. Closing call to action over a photograph
    15. Footer
    16. Responsive (1100, 900, 760, 640) and reduced motion
    17. Service-page additions (new classes and variants only; nothing above changes):
        a statement, sub-headings and labels, item grid variants, natural-size and
        illustration figures, screenshot panels, deep brown variants of tabs, items and text,
        the journey track, a photograph under a side heading, software module blocks,
        and their responsive rules

   Contrast (WCAG): body #3D2A1D on ivory 13.0, on mist 12.0; dark brown #5C2B0D on ivory 11.2;
   gold ink #856430 on ivory 5.2, on mist 4.8 (small labels only); ivory on deep brown 13.5;
   light champagne #D8C39B on deep brown 8.2. Champagne gold #A8854B is for marks only.
   ===================================================================================== */

/* ---------- 1. Font and tokens ---------- */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/assets/fonts/jost-latin-var.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; }

:root {
  --gut: clamp(20px, 5vw, 72px);
  --max: 1296px;
  --hdr: 88px;
  --sec: clamp(96px, 14vh, 160px);
  --ease: cubic-bezier(.22, .61, .21, 1);
  --hero-bg: #241A12;       /* behind the opening photograph while it loads (never text) */
  --hero-tint: rgba(36, 26, 18, .34);
  --hero-tint-strong: rgba(36, 26, 18, .42);
  --page: #FCFAF6;          /* ivory */
  --panel: #F6F0E6;         /* mist */
  --text: #3D2A1D;          /* body text */
  --head: #5C2B0D;          /* dark brown: headings, numerals, links */
  --soft: #3D2A1D;          /* secondary paragraphs */
  --label: #856430;         /* gold ink: small labels, meta */
  --line: #D8C39B;          /* light champagne hairlines */
  --mark: #A8854B;          /* champagne gold: ticks and marks only */
  --dot: #ED7A35;           /* GDI orange: one tiny mark, never text */
  --dark: #47210A;          /* deep brown chapter */
  --on-dark: #FCFAF6;
  --on-dark-soft: #D8C39B;
  --line-dark: rgba(216, 195, 155, .38);
  --btn: #5C2B0D;
  --btn-text: #FCFAF6;
  --photo-bg: #F6F0E6;
  --photo-bg-dark: #5C2B0D;
  --on-photo: #FCFAF6;
  --focus: #5C2B0D;
  --focus-glow: 0 0 0 5px rgba(237, 122, 53, .28);
  --measure: 70ch;
}

/* ---------- 2. Base type, links, focus ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html:has(.menu[open]) { overflow: hidden; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: 'Jost', system-ui, sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
strong { font-weight: 500; }
h1, h2 { font-weight: 300; letter-spacing: .01em; line-height: 1.2; color: var(--head); }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); text-wrap: balance; }
h3 { font-weight: 400; font-size: 1.125rem; line-height: 1.4; color: var(--head); }
::selection { background: var(--line); color: var(--text); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

/* Visually hidden, still read by screen readers (e.g. context for "Learn More" links) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Focus: precise, never removed. Ivory without the glow on photographs, the transparent header and deep brown. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: var(--focus-glow); }
.opening :focus-visible, .sec--dark :focus-visible,
.hdr:not(.is-solid):not(:has(.menu[open])) :focus-visible { outline-color: var(--on-photo); box-shadow: none; }

.skip { position: absolute; left: 12px; top: -100px; z-index: 200; background: var(--btn); color: var(--btn-text); padding: 12px 18px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Small tracked capitals: navigation, buttons and short labels only (The Small-Capitals Rule) */
.hdr-cta, .menu-btn, .menu-label, .btn, .ftr h2 {
  font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
}

/* ---------- 3. Buttons and text links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
  background: var(--btn); color: var(--btn-text); text-decoration: none; border: 1px solid var(--btn); text-align: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: transparent; color: var(--btn); }
.btn--light { background: transparent; color: var(--on-photo); border-color: var(--on-photo); }
.btn--light:hover { background: var(--on-photo); color: var(--text); border-color: var(--on-photo); }
.tlink { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; text-decoration-color: var(--mark); transition: text-decoration-color .3s var(--ease); }
.tlink:hover { text-decoration-color: currentColor; }
.sec--dark .tlink { color: var(--on-dark); text-decoration-color: var(--on-dark-soft); }
/* A row holding one button or one text link, after a block of text */
.actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.actions .tlink { display: inline-flex; align-items: center; min-height: 48px; }

/* ---------- 4. Header and full-screen menu (identical to the homepage) ---------- */
.hdr {
  position: absolute; inset: 0 0 auto 0; z-index: 100; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--gut); color: var(--on-photo);
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.js .hdr { position: fixed; }
.hdr.is-solid { background: var(--page); color: var(--head); box-shadow: 0 1px 0 var(--line); }
.hdr:has(.menu[open]) { color: var(--head); background: transparent; box-shadow: none; }
.hdr-logo { position: relative; z-index: 2; display: block; padding: 8px 0; }
.hdr-logo img { width: 210px; height: auto; filter: brightness(0) invert(1); transition: filter .4s var(--ease); }
.hdr.is-solid .hdr-logo img, .hdr:has(.menu[open]) .hdr-logo img { filter: none; }
.hdr-end { display: flex; align-items: center; gap: 8px; }
.hdr-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; text-decoration: none; border: 1px solid currentColor; }
.hdr-cta:hover { background: var(--on-photo); color: var(--text); border-color: var(--on-photo); }
.hdr.is-solid .hdr-cta:hover { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.hdr:has(.menu[open]) .hdr-cta { visibility: hidden; }
/* Over the opening the photograph's own button is the call to action; the header button arrives with the solid bar. */
.js .hdr:not(.is-solid) .hdr-cta { opacity: 0; visibility: hidden; transform: translateY(-4px); }
.js .hdr.is-ready .hdr-cta { transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background-color .3s, color .3s; }

/* Menu: a <details> full-screen overlay, so it works without JavaScript */
.menu-btn {
  position: relative; z-index: 2; list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 4px 0 20px;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-word--close, .menu[open] .menu-word--open { display: none; }
.menu[open] .menu-word--close { display: inline; }
.menu-icon { position: relative; width: 26px; height: 9px; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-icon::before { top: 0; }
.menu-icon::after { top: 8px; }
.menu[open] .menu-icon { width: 18px; margin-inline: 4px; }
.menu[open] .menu-icon::before { top: 4px; transform: rotate(45deg); }
.menu[open] .menu-icon::after { top: 4px; transform: rotate(-45deg); }
.menu-panel {
  position: fixed; inset: 0; z-index: 1; background: var(--panel); color: var(--text);
  overflow-y: auto; padding: calc(var(--hdr) + clamp(32px, 8vh, 96px)) var(--gut) 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 64px;
}
.menu-nav { width: 100%; max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px var(--gut); }
.menu-foot { max-width: var(--max); width: 100%; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 4px 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--soft); font-size: .9375rem; }
.menu-foot span, .menu-foot a { display: inline-flex; align-items: center; min-height: 48px; }
.menu-foot a { text-decoration: none; }
.menu-foot a:hover { color: var(--head); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.menu-label { color: var(--label); margin-bottom: 22px; }
.menu-col a { text-decoration: none; color: var(--head); }
.menu-col ul a { display: inline-block; padding: 7px 0; font-weight: 300; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.3; }
.menu-col ul a:hover, .menu-col ul a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--mark); }
.menu-col--main ul a { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.menu-col--main .btn { margin-top: 36px; color: var(--btn-text); }
.menu-col--main .btn:hover { color: var(--btn); }
.js .menu[open] .menu-panel { animation: menuIn .45s var(--ease) both; }
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 5. Page opening: a shorter photographic opening for inner pages ----------
   Markup: section.opening#hero > .opening-media > img  +  .opening-copy > nav.crumbs, h1, p.opening-lead, a.btn--light */
.opening { position: relative; height: 78vh; height: 78svh; min-height: 540px; max-height: 860px; overflow: hidden; background: var(--hero-bg); color: var(--on-photo); }
.opening-media, .opening-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.opening-media img { object-fit: cover; object-position: var(--focal, 50% 50%); }  /* set --focal / --focal-m on the img to keep the subject in frame */
.opening-media::after { content: ""; position: absolute; inset: 0; background: var(--hero-tint); }
/* The page's one motion moment: the photograph settles slowly into place (as on the homepage). */
@media (prefers-reduced-motion: no-preference) {
  .opening-media img { animation: settle 2.6s var(--ease) both; }
}
@keyframes settle { from { transform: scale(1.045); } to { transform: none; } }
.opening-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding: 0 var(--gut) clamp(40px, 8vh, 88px);
  text-shadow: 0 0 28px rgba(36, 26, 18, .5);
}
.opening h1 { max-width: 15ch; color: var(--on-photo); font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.14; letter-spacing: .01em; text-wrap: balance; }
.opening-lead { max-width: 30em; margin-top: 18px; font-weight: 300; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.45; }
.opening .btn--light { margin-top: 36px; border-color: rgba(252, 250, 246, .75); text-shadow: none; }

/* Breadcrumb: quiet, one line, on the photograph or on ivory */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: 20px; font-size: .875rem; letter-spacing: .02em; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(252, 250, 246, .55); }
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs [aria-hidden] { opacity: .7; }

/* ---------- 6. Sections and surfaces ---------- */
.sec { padding: var(--sec) 0; }
.sec--mist { background: var(--panel); }
.sec--dark { background: var(--dark); color: var(--on-dark); }
.sec--dark h2, .sec--dark h3 { color: var(--on-dark); }
/* Two ivory sections in a row are separated by space, not doubled space. */
.sec:not(.sec--mist, .sec--dark) + .sec:not(.sec--mist, .sec--dark) { padding-top: 0; }
/* A section that continues the one before it on the same surface (e.g. an intro followed by its tabs). */
.sec--cont { padding-top: 0; }

/* ---------- 7. Section layouts ----------
   .sec-grid  : heading in a narrow left column (it stays in view on desktop), content on the right.
   .sec-head  : heading stacked above the content.
   .split     : text and a photograph side by side; .split--rev puts the photograph first. */
.sec-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.sec-grid > .sec-aside { position: sticky; top: calc(var(--hdr) + 40px); }
.sec-aside h2 { max-width: 14em; }
.sec-head { max-width: 46rem; margin-bottom: clamp(48px, 7vh, 72px); }
.sec-head > p, .sec-head > .prose { margin-top: 24px; max-width: var(--measure); }
.sec-head--row { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px var(--gut); align-items: end; }
.sec-head--row > p { margin-top: 0; }
.sec--dark .sec-head p { color: var(--on-dark-soft); font-weight: 300; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.5; max-width: 28em; }
.after { margin-top: clamp(40px, 6vh, 56px); }
/* Text set under a stacked heading but aligned to the right-hand column of .sec-grid: a long read that keeps the page's grid. */
.offset { margin-left: calc((100% - clamp(48px, 7vw, 120px)) * 4 / 11 + clamp(48px, 7vw, 120px)); }

.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.split--rev > .split-media { order: -1; }
.split--top { align-items: start; }
.split--top > .split-media { position: sticky; top: calc(var(--hdr) + 40px); }
.split h2 { margin-bottom: 32px; }
.split-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.sec--mist .split-media { background: var(--page); }

/* ---------- 8. Long-read text and ruled lists ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose a { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); transition: text-decoration-color .3s var(--ease); }
.prose a:hover { text-decoration-color: currentColor; }
.prose a strong { font-weight: 500; }
/* Bulleted lists inside text become ruled lists: a hairline between items, a short gold dash. */
.prose ul { border-top: 1px solid var(--line); margin-block: 1.5em; }
.prose ul li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: calc(12px + .75em); width: 12px; height: 1px; background: var(--mark); }
.prose--wide { max-width: none; }
.prose--wide ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 56px); border-top: 0; }
.prose--wide ul li:nth-child(-n + 2) { border-top: 1px solid var(--line); }
.prose--wide ul li:nth-child(odd):last-child { grid-column: 1 / -1; }
/* A lead paragraph: slightly larger and lighter, for the first words of a long section */
.prose--lead > p:first-child { font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.55; color: var(--head); }

/* ---------- 9. Items: hairline-topped groups ----------
   .items--3  : three across (wraps 3 + 2 for five), stacked on phones.
   .items--rows : one item per row, heading on the left, text on the right. */
.items { display: grid; gap: 56px clamp(32px, 4vw, 64px); }
.items--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.item { border-top: 1px solid var(--line); padding-top: 28px; }
.item h3 { margin-bottom: 14px; text-wrap: balance; }
.item .prose { font-size: 1rem; }
.item .tlink { display: inline-flex; margin-top: 20px; }
.items--places h3 { font-weight: 300; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem); line-height: 1.2; margin-bottom: 16px; }
.items--rows { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.items--rows .item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px clamp(32px, 4vw, 64px); padding: 32px 0 36px; }
.items--rows .item h3 { font-weight: 300; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.3; margin: 0; }
.items--rows .item .tlink { grid-column: 2; margin-top: 0; }

/* ---------- 10. Numbered steps (a real sequence, so numbered) ----------
   Used in the deep brown chapter beside a photograph that stays in view. */
.chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.chapter-media { position: sticky; top: calc(var(--hdr) + 40px); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--hdr) - 80px); width: 100%; overflow: hidden; background: var(--photo-bg-dark); }
.chapter-media img { width: 100%; height: 100%; object-fit: cover; }
.steps { counter-reset: step; border-bottom: 1px solid var(--line-dark); }
.step { counter-increment: step; display: grid; grid-template-columns: clamp(64px, 7vw, 96px) minmax(0, 1fr); column-gap: 16px; padding: 32px 0 36px; border-top: 1px solid var(--line-dark); }
.step::before { content: counter(step); grid-row: 1 / span 2; font-weight: 300; font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem); line-height: 1; color: var(--on-dark-soft); font-variant-numeric: lining-nums tabular-nums; }
.step h3 { font-weight: 300; font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.25; letter-spacing: .005em; padding-top: 4px; }
.step .prose { margin-top: 10px; color: var(--on-dark-soft); max-width: 34em; }
.sec--dark .actions { margin-top: 36px; }

/* ---------- 11. Checklist: ruled, two columns, a small gold tick before each line ---------- */
.checklist { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); margin-block: 40px; border-bottom: 1px solid var(--line); }
.checklist li { position: relative; padding: 16px 0 16px 36px; border-top: 1px solid var(--line); line-height: 1.5; }
.checklist li::before { content: ""; position: absolute; left: 3px; top: calc(16px + .2em); width: 6px; height: 12px; border: solid var(--mark); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* ---------- 12. Tabs ----------
   Markup: .tabs[data-tabs] > .tablist > button.tab  +  .tabpanels > .tabpanel[data-label]
   gdi.js adds the ARIA roles, hides the inactive panels and handles the keys.
   Without JavaScript the tab row is hidden and every panel shows, each titled with its label. */
.tabs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.tablist { display: flex; flex-direction: column; border-left: 1px solid var(--line); position: sticky; top: calc(var(--hdr) + 40px); }
.tab {
  position: relative; display: block; width: 100%; min-height: 48px; margin: 0; padding: 16px 0 16px 24px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 300; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.35; text-align: left; color: var(--text);
  transition: color .3s var(--ease);
}
.tab::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; background: var(--head); opacity: 0; transition: opacity .3s var(--ease); }
.tab:hover { color: var(--head); }
.tab[aria-selected="true"] { color: var(--head); font-weight: 400; }
.tab[aria-selected="true"]::before { opacity: 1; }
.tab:focus-visible { outline-offset: -2px; }
.tabpanel[hidden] { display: none; }
.tabpanel:focus-visible { outline-offset: 8px; }
.tabpanel .subhead { font-weight: 300; font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.25; margin-bottom: 20px; }
.tabpanel--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 56px); align-items: start; }
.tabpanel--media > figure { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 3 / 2; overflow: hidden; background: var(--page); }
.tabpanel--media > figure img { width: 100%; height: 100%; object-fit: cover; }
.tabpanel--media > :not(figure) { grid-column: 1; }
.tabpanel--media .actions { margin-top: 8px; }
.tabpanel--media > .subhead { margin-bottom: 0; }
/* The one panel photograph that arrived with rounded corners: crop them away. */
.img-trim { transform: scale(1.06); }
/* Without JavaScript */
html:not(.js) .tabs { grid-template-columns: 1fr; }
html:not(.js) .tablist { display: none; }
html:not(.js) .tabpanel + .tabpanel { margin-top: 64px; }
@media (min-width: 1101px) { html:not(.js) .tabpanel--media > figure { grid-row: 2 / span 3; } }
html:not(.js) .tabpanel::before { grid-row: 1; content: attr(data-label); display: block; grid-column: 1 / -1; padding-top: 24px; margin-bottom: 20px; border-top: 1px solid var(--line); font-weight: 400; font-size: 1.25rem; line-height: 1.35; color: var(--head); }

/* ---------- 13. FAQ accordion ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 56px 22px 0; min-height: 48px;
  font-size: 1.125rem; line-height: 1.45; color: var(--head); transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: calc(22px + .72em); width: 16px; height: 1px; background: var(--mark); transition: transform .35s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] > summary::after { transform: rotate(0deg); }
.faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--mark); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq .prose { padding: 0 56px 28px 0; }

/* ---------- 14. Closing call to action: an ivory card over a full-width photograph ---------- */
.closing { position: relative; display: grid; align-items: center; min-height: min(86vh, 820px); padding-block: clamp(64px, 8vw, 112px); overflow: hidden; background: var(--photo-bg-dark); }
.closing-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing .wrap { position: relative; }
.closing-card { max-width: 640px; margin: 0 auto; padding: clamp(44px, 5vw, 72px) clamp(28px, 5vw, 72px); background: var(--page); text-align: center; }
.closing h2 { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.5rem); text-wrap: balance; }
.closing-card p { margin: 20px auto 0; max-width: 34em; color: var(--soft); }
.closing-card .actions { justify-content: center; margin-top: 36px; }

/* ---------- 15. Footer (identical to the homepage) ---------- */
.ftr { background: var(--panel); padding: 88px 0 32px; font-size: .9375rem; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px var(--gut); }
.ftr-brand img { width: 210px; margin-bottom: 24px; }
.ftr-brand p { color: var(--soft); max-width: 24em; }
.ftr h2 { color: var(--label); margin-bottom: 18px; }
.ftr ul li { padding: 3px 0; }
.ftr ul a { text-decoration: none; display: inline-block; padding: 8px 0; margin: -8px 0; }
.ftr a:hover { color: var(--head); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--mark); }
.ftr-base { margin-top: 72px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 32px; color: var(--soft); font-size: .875rem; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: center; }
.ftr-links a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.ftr-social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1100px) {
  .items--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabpanel--media { grid-template-columns: 1fr; }
  .tabpanel--media > figure { grid-column: 1; grid-row: auto; aspect-ratio: 3 / 2; order: 9; }
}
@media (max-width: 900px) {
  .sec-grid, .split, .split--rev, .chapter, .tabs, .sec-head--row { grid-template-columns: 1fr; }
  .sec-grid { gap: 32px; }
  .offset { margin-left: 0; }
  .sec-grid > .sec-aside, .split--top > .split-media, .chapter-media, .tablist { position: static; }
  .split { gap: 48px; }
  .split > .split-media, .split--rev > .split-media { order: -1; aspect-ratio: 3 / 2; }
  .chapter { gap: 48px; }
  .chapter-media { aspect-ratio: 3 / 2; max-height: none; }
  .tabs { gap: 32px; }
  .tablist { border-left: 0; border-top: 1px solid var(--line); }
  .tab { padding: 14px 0 14px 20px; border-bottom: 1px solid var(--line); }
  .tab::before { top: 10px; bottom: 10px; left: 0; }
  .items--rows .item { grid-template-columns: 1fr; }
  .items--rows .item .tlink { grid-column: 1; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
  .menu-nav { grid-template-columns: 1fr 1fr; }
  .menu-col--main { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  :root { --hdr: 72px; }
  .hdr-logo img { width: 168px; }
  .hdr-cta { display: none; }
  .menu-btn { padding-left: 12px; }
  .opening { height: 82svh; min-height: 520px; }
  .opening-media::after { background: var(--hero-tint-strong); }
  .opening-media img { object-position: var(--focal-m, var(--focal, 50% 50%)); }
  .items--3, .checklist, .prose--wide ul { grid-template-columns: 1fr; }
  .items { gap: 44px; }
  .prose--wide ul { border-top: 1px solid var(--line); }
  .prose--wide ul li:nth-child(-n + 2) { border-top: 0; }
  .faq .prose { padding-right: 0; }
  .menu-nav { grid-template-columns: 1fr; gap: 40px; }
  .menu-col ul a { padding: 11px 0; }
  .menu-foot { flex-direction: column; gap: 0; }
  .ftr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .closing { display: block; min-height: 0; padding: 0 0 var(--sec); background: var(--page); }
  .closing-img { position: relative; height: auto; aspect-ratio: 4 / 3; }
  .closing-card { position: relative; margin-top: -64px; padding: 44px 24px 48px; }
  .step { grid-template-columns: 52px minmax(0, 1fr); padding: 26px 0 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================================
   17. Service-page additions (added 4 Nov 2026 for Our Services, Back of the House,
   Brand Standards & SOP, Training Services, Training LMS and Software Services).
   Everything here is a NEW class or a variant scoped to a new class or to the deep brown
   chapter; no rule above is changed, so /mystery-audits/ looks exactly as before.
   ===================================================================================== */

/* 17a. Statement: the one quiet, centred passage straight after the opening (DESIGN: "Statement").
   Markup: section.sec > .wrap.statement > p (or an h2 when the page's own sub-heading is the statement). */
.statement { text-align: center; }
.statement > * { max-width: 30em; margin-inline: auto; font-weight: 300; font-size: clamp(1.375rem, 1rem + 1.25vw, 2rem); line-height: 1.42; letter-spacing: 0; color: var(--head); text-wrap: pretty; }
/* A longer passage: a little smaller, so it stays a calm read rather than a wall of large type */
.statement--long > * { max-width: 36em; font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); line-height: 1.55; }

/* A brighter opening photograph takes the stronger tint (the one phones already use) so the ivory headline keeps its contrast */
.opening--deep .opening-media::after { background: var(--hero-tint-strong); }

/* A long opening headline (more than about six words) gets a wider measure so it does not stack into five lines */
.opening--long h1 { max-width: 20ch; }

/* 17b. Sub-headings and labels
   .sub      : the short line under a section heading (a <p>), e.g. "Hands-On Learning with Expert Guidance".
   .subtitle : an h3 that continues the h2 directly above it.
   .label    : a very short tracked label in gold ink (The Small-Capitals Rule), e.g. "Module 1". */
.sec-head .sub, .sec-head .subtitle { margin-top: 16px; font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.45; }
.sec-head .sub { color: var(--text); }
.sec-head--row > .sub { margin-top: 0; }
.label { font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; color: var(--label); }
.sec--dark .label { color: var(--on-dark-soft); }

/* A paragraph that is the question a section turns on: set a little larger, with a short gold rule */
.prose > .pull { padding-left: 22px; border-left: 2px solid var(--mark); font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.45; color: var(--head); }
.prose > .pull strong { font-weight: 400; }

/* Two columns of running text (an introduction without a heading) */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(48px, 7vw, 120px); align-items: start; }

/* A section heading beside a drawing: heading centred against the drawing, drawing kept to a calm size */
.sec-head--figure { align-items: center; }
.sec-head--figure > .figure-panel { justify-self: end; width: 100%; max-width: 560px; }

/* 17c. Item grid variants (same hairline-topped .item as section 9) */
.items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 48px); }
.items--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px clamp(24px, 2.6vw, 40px); }
/* One item per row, full width: for a short run of items beside a photograph */
.items--list { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.items--list .item { padding: 28px 0 32px; }
.items--list .item h3 { font-weight: 300; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.3; }
/* Items that start with a paragraph of their own (e.g. "Content Library") keep body size */
.items--4 .item .prose, .items--5 .item .prose { font-size: 1rem; }

/* 17d. Figures
   .split-media--natural : a small source photograph shown no larger than its own width (--w), in its own shape.
   .figure-panel         : a drawn illustration (SVG) on a quiet panel.
   figure.screen         : a software screenshot inside a tab panel, shown whole (contain), never cropped. */
.split-media--natural { aspect-ratio: auto; justify-self: center; width: 100%; max-width: var(--w, 480px); background: none; }
.split-media--natural img { height: auto; }
.figure-panel { margin: 0; padding: clamp(16px, 2.6vw, 36px); background: var(--panel); }
.sec--mist .figure-panel, .sec--dark .figure-panel { background: var(--page); }
.figure-panel img { width: 100%; height: auto; }
/* Screenshots need width to be legible: below the panel text, across the whole panel (with or without JavaScript) */
.tabpanel.tabpanel--media > figure.screen { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; padding: clamp(12px, 1.6vw, 24px); }
.tabpanel--media > figure.screen img { object-fit: contain; }
/* A small screenshot (about 525px wide) is not enlarged beyond roughly its own size */
.tabpanel.tabpanel--media > figure.screen--small { width: 100%; max-width: 600px; }
.sec:not(.sec--mist):not(.sec--dark) .tabpanel--media > figure.screen { background: var(--panel); }

/* A drawing beside text (.split): keep the drawing's own 4:3 shape instead of the photo crop */
.split-media.figure-panel { aspect-ratio: auto; }
.split-media.figure-panel img { height: auto; object-fit: contain; }
/* A second, smaller heading inside a split's text column */
.split h3.subhead { margin: 56px 0 20px; font-weight: 300; font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.25; }

/* 17e. Deep brown chapter variants for components that were light-only (DESIGN: The Chapter Rule) */
.sec--dark .item, .sec--dark .items--list { border-color: var(--line-dark); }
.sec--dark :is(.item, .split, .chapter-copy, .tabpanel, .sec-head) .prose { color: var(--on-dark-soft); }
.sec--dark :is(.item, .split, .chapter-copy, .tabpanel) .prose--lead > p:first-child { color: var(--on-dark); }
.sec--dark :is(.item, .split, .chapter-copy, .tabpanel) .prose a { color: var(--on-dark); text-decoration-color: var(--on-dark-soft); }
.sec--dark :is(.item, .split, .chapter-copy, .tabpanel) .prose ul { border-color: var(--line-dark); }
.sec--dark :is(.item, .split, .chapter-copy, .tabpanel) .prose ul li { border-color: var(--line-dark); }
.sec--dark :is(.item, .split, .chapter-copy, .tabpanel) .prose ul li::before { background: var(--on-dark-soft); }
.sec--dark .split-media { background: var(--photo-bg-dark); }
.chapter-copy > .prose { margin-bottom: 40px; }
/* Tabs on deep brown */
.sec--dark .tablist { border-color: var(--line-dark); }
.sec--dark .tab { color: var(--on-dark-soft); }
.sec--dark .tab:hover, .sec--dark .tab[aria-selected="true"] { color: var(--on-dark); }
.sec--dark .tab::before { background: var(--on-dark); }
html:not(.js) .sec--dark .tabpanel::before { color: var(--on-dark); border-color: var(--line-dark); }

/* 17f. Journey track: a real sequence drawn as one line with a dot and a light numeral for each stage.
   Markup: ol.track[style="--cols: 5"] > li > h3 + .prose. Every stage is visible at once; no motion.
   The rules of neighbouring stages join into one continuous line; the first dot is the page's one orange mark. */
.track { counter-reset: stage; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); row-gap: clamp(56px, 8vh, 80px); }
.track > li { counter-increment: stage; position: relative; padding: 32px clamp(20px, 2.4vw, 40px) 0 0; border-top: 1px solid var(--line); }
.track > li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--mark); }
.track > li:first-child::before { background: var(--dot); }
.track h3::before { content: counter(stage); display: block; margin-bottom: 18px; font-weight: 300; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); line-height: 1; color: var(--mark); font-variant-numeric: lining-nums tabular-nums; }
.track h3 { font-weight: 300; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.3; margin-bottom: 12px; }
.track .prose { font-size: 1rem; }
.sec--dark .track > li { border-color: var(--line-dark); }
.sec--dark .track > li::before { background: var(--on-dark-soft); }
.sec--dark .track > li:first-child::before { background: var(--dot); }
.sec--dark .track h3::before { color: var(--on-dark-soft); }
.sec--dark .track .prose { color: var(--on-dark-soft); }
.sec--dark .track .prose a { color: var(--on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--on-dark-soft); }

/* 17g. A photograph under a side heading: it stays in view with the heading while the text beside it scrolls */
.aside-media { margin-top: 40px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--photo-bg); }
.aside-media img { width: 100%; height: 100%; object-fit: cover; }
/* A short opening passage set in the side column instead of a heading */
.sec-aside > .aside-lead { font-weight: 300; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.4; color: var(--head); max-width: 16em; }

/* 17h. Software module blocks: label, title, text and illustration on the left; that module's tabs on the right.
   Markup: .modules > .module > (.module-copy > p.label, h3, .prose, figure.figure-panel) + .tabs[data-tabs] */
.modules { border-bottom: 1px solid var(--line); }
.module { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; padding: clamp(56px, 8vh, 88px) 0; border-top: 1px solid var(--line); }
.module h3 { margin: 14px 0 20px; font-weight: 300; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem); line-height: 1.2; text-wrap: balance; }
.module-copy .prose { font-size: 1rem; }
.module-copy .figure-panel { margin-top: 32px; }
.module .tabs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 4vw, 56px); }
.module .tablist { top: calc(var(--hdr) + 40px); }
.module .tabpanel .prose--lead > p:first-child { padding-top: 12px; }

/* 17i. Responsive rules for the additions */
@media (max-width: 1100px) {
  .items--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .items--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .track { grid-template-columns: repeat(min(var(--cols, 5), 3), minmax(0, 1fr)); }
  .module { grid-template-columns: 1fr; }
  .module-copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 64px); align-items: start; }
  .module-copy > * { grid-column: 1; }
  .module-copy > .figure-panel { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
@media (max-width: 900px) {
  .cols, .items--2 { grid-template-columns: 1fr; }
  .cols { gap: 24px; }
  .split > .split-media--natural, .split--rev > .split-media--natural { aspect-ratio: auto; justify-self: start; }
  .aside-media { margin-top: 32px; max-width: 560px; }
  .module .tabs { grid-template-columns: 1fr; gap: 24px; }
  .sec--dark .tab { border-color: var(--line-dark); }
  .module-copy { display: block; }
  .module-copy > .figure-panel { margin-top: 28px; max-width: 560px; }
}
@media (max-width: 760px) {
  .items--4, .items--5 { grid-template-columns: 1fr; }
  .items--5 { gap: 36px; }
  /* A long statement reads more easily left-aligned on a phone */
  .statement--long { text-align: left; }
  .statement--long > * { margin-inline: 0; }
  /* The track turns into a vertical line on phones */
  .track { grid-template-columns: 1fr; row-gap: 0; border-left: 1px solid var(--line); margin-left: 4px; }
  .sec--dark .track { border-color: var(--line-dark); }
  .track > li { border-top: 0; padding: 0 0 40px 32px; }
  .track > li:last-child { padding-bottom: 0; }
  .track > li::before { left: -5px; top: 6px; }
  .track h3::before { margin-bottom: 10px; }
}

/* =====================================================================================
   18. Review changes (4 Nov 2026, from the owner's notes on the service pages)
   ===================================================================================== */

/* 18a. A heading row (heading left, short line right) now sits on the same two columns as the
   two-across items below it, and the two lines share a baseline. */
.sec-head--row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: last baseline; }
.sec-head--figure { align-items: center; }

/* 18b. A short passage in the side column is set at the size of a section heading */
.sec-aside > .aside-lead { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.2; max-width: 14em; }

/* 18c. Software drawings: the house-style drawings that replace the raw screenshots.
   Shown large, across the whole tab panel, on a quiet panel, never cropped. */
.tabpanel.tabpanel--media > figure.drawing { grid-column: 1 / -1; grid-row: auto; aspect-ratio: auto; width: 100%; max-width: 780px; padding: clamp(16px, 2.4vw, 32px); background: var(--panel); }
.sec--mist .tabpanel.tabpanel--media > figure.drawing, .sec--dark .tabpanel.tabpanel--media > figure.drawing { background: var(--page); }
.tabpanel--media > figure.drawing img { height: auto; object-fit: contain; }
/* A split where the drawing takes the larger column */
.split--art { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* 18d. Tab panels with a large photograph: the photograph across the panel, the words beneath it */
.tabpanel--photo { display: block; }
.tabpanel--photo > figure { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 36px; background: var(--page); }
.tabpanel--photo > figure img { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .tabpanel--photo::before { display: block; }

/* 18e. A side heading over tabs: the heading and the tab list stay in view together */
.tabs--headed > .tabs-side { position: sticky; top: calc(var(--hdr) + 40px); }
.tabs--headed > .tabs-side > h2 { margin-bottom: 36px; }
.tabs--headed > .tabs-side > .tablist { position: static; }

/* 18f. A photograph in the side column, in place of a heading (it stays in view with the text) */
.sec-aside > .aside-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.sec-aside > .aside-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 18g. Sub-sections set at section-heading size, each with its heading in view while its text scrolls */
.sec-grid + .sec-grid { margin-top: clamp(72px, 10vh, 120px); padding-top: clamp(48px, 7vh, 72px); border-top: 1px solid var(--line); }
.sec-aside > h3.as-h2 { font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.2; letter-spacing: .01em; text-wrap: balance; max-width: 14em; }

/* 18j. A wide photograph under a side heading, and text that follows a list of items (Mystery Audits, Forbes) */
.sec-aside > h2 + .aside-photo { margin-top: 36px; }
.sec-aside > .aside-photo--wide { aspect-ratio: 3 / 2; }
.sec-grid .prose + .items--2 { margin-top: clamp(40px, 6vh, 56px); }
.items + .prose--after { margin-top: clamp(48px, 7vh, 72px); }
.prose--after > h3 { margin-bottom: 20px; font-weight: 300; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.2; color: var(--head); text-wrap: balance; }

/* 18i. Two text-and-photograph rows under one section heading (Our Services) */
.split + .split { margin-top: clamp(72px, 10vh, 120px); }
.split h3.split-title { margin-bottom: 24px; font-weight: 300; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.2; text-wrap: balance; }

/* 18h. Responsive */
@media (max-width: 900px) {
  .sec-head--row, .split--art { grid-template-columns: 1fr; }
  .tabs--headed > .tabs-side { position: static; }
  .sec-aside > .aside-photo { aspect-ratio: 3 / 2; max-width: 560px; }
}

/* =====================================================================================
   19. About pages (Why Us, Company Overview, Our Inspectors, Global Reach, Careers, FAQ, Media)
   ===================================================================================== */

/* 19a. Client logos: identical to the homepage wall. Drawn black, then one brown tone laid over them with
   "lighten", so all 32 read in a single calm colour. Always on the mist surface (the tone needs it). */
.logos { position: relative; isolation: isolate; background: var(--panel); display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 24px; margin-top: clamp(48px, 7vh, 72px); }
.logos::after { content: ""; position: absolute; inset: 0; background: var(--head); mix-blend-mode: lighten; pointer-events: none; }
.logo-cell { display: flex; align-items: center; justify-content: center; height: 128px; }
.logo-cell img { max-width: 100%; height: auto; filter: brightness(0); }

/* 19b. Numbered lists inside text (e.g. the steps in an FAQ answer) keep their numbers */
.prose ol { counter-reset: n; margin-block: 1.25em; border-top: 1px solid var(--line); }
.prose ol > li { counter-increment: n; position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid var(--line); line-height: 1.55; }
.prose ol > li::before { content: counter(n); position: absolute; left: 2px; top: 12px; font-weight: 300; color: var(--label); font-variant-numeric: lining-nums tabular-nums; }

/* 19c. A short contact block: label and value on one line (Media Center) */
.contact-lines { margin-top: 32px; border-top: 1px solid var(--line); }
.contact-lines p { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-lines a { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); }
.contact-lines a:hover { text-decoration-color: currentColor; }

@media (max-width: 1100px) { .logos { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px) {
  .logos { grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
  .logo-cell { height: 96px; }
  .logo-cell img { max-width: 92%; max-height: 52px; width: auto; }
}
/* 19d. Text beside a side heading in the deep brown chapter */
.sec--dark .sec-grid .prose { color: var(--on-dark-soft); }
.sec--dark .sec-grid .prose--lead > p:first-child { color: var(--on-dark); }

/* =====================================================================================
   20. Contact: the enquiry form (fields, consent, security check and status unchanged in markup)
   ===================================================================================== */
.address { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.address p { margin: 0 0 4px; }
.address .label { margin-bottom: 14px; }
.address .gap { margin-top: 16px; }
.address a:not(.tlink) { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); }
.address .tlink { display: inline-flex; align-items: center; min-height: 48px; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 40px); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; color: var(--label); }
.field .opt { letter-spacing: .05em; text-transform: none; color: var(--label); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--page); border: 1px solid var(--line); border-radius: 0;
  padding: 12px 14px; min-height: 52px; width: 100%; transition: border-color .3s var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23856430' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.field textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mark); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--focus-glow); border-color: var(--head); }
.sec--mist .field input, .sec--mist .field select, .sec--mist .field textarea { background-color: var(--page); }
.consent { grid-column: 1 / -1; display: flex; gap: 14px; align-items: flex-start; font-size: .9375rem; line-height: 1.6; }
.consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--head); flex-shrink: 0; }
.consent a { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); }
/* The honeypot: a field for robots only, kept out of sight and out of reach */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { grid-column: 1 / -1; min-height: 65px; }
.form-status { grid-column: 1 / -1; padding: 16px 20px; border-left: 2px solid var(--mark); background: var(--panel); font-size: .9375rem; }
.sec--mist .form-status { background: var(--page); }
.form-status--error { border-left-color: var(--dot); }
.form-actions { grid-column: 1 / -1; }
@media (max-width: 760px) { .form { grid-template-columns: 1fr; gap: 24px; } }
/* A short passage under a side heading */
.sec-aside > h2 + .prose { margin-top: 20px; }

/* =====================================================================================
   21. Blog: index (topic filters and cards) and the article template (all 88 articles)
   The article and card markup is kept exactly as it was; only its presentation is set here.
   ===================================================================================== */

/* 21a. A short label in the page opening ("Insights") */
.opening .opening-label { margin-bottom: 14px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-photo); }

/* 21b. Topic filters: quiet square buttons, the chosen one filled */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(48px, 7vh, 72px); }
.chip { appearance: none; cursor: pointer; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 0; background: transparent;
  font: inherit; font-size: .875rem; letter-spacing: .02em; color: var(--text); transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.chip:hover { border-color: var(--mark); color: var(--head); }
.chip[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }

/* 21c. Article cards: the cover in black and white (as every photograph on the site), a hairline, the title */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px clamp(24px, 3vw, 48px); }
.post-card[hidden] { display: none; }
.post-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.post-card-img { aspect-ratio: 2.6 / 1; overflow: hidden; margin-bottom: 22px; background: var(--panel); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.post-meta { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; color: var(--label); margin-bottom: 10px; }
.post-card h3 { font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem); line-height: 1.3; text-wrap: balance; }
.post-card a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--mark); }
.post-card-meta { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .875rem; color: var(--soft); }
.sec--mist .post-card-img { background: var(--page); }

/* 21d. The article: a calm header on ivory, the cover, then a single reading column */
.article-hero { padding: calc(var(--hdr) + clamp(56px, 9vh, 96px)) 0 clamp(36px, 5vh, 48px); }
.article-hero .wrap { max-width: calc(720px + 2 * var(--gut)); }
.article-hero .crumbs { color: var(--soft); }
.article-hero .crumbs a { text-decoration-color: var(--mark); }
.article-hero .label { margin-bottom: 18px; }
.article-hero h1 { font-weight: 300; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.15; letter-spacing: .005em; color: var(--head); text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--soft); }
.article-figure { max-width: calc(1100px + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); }
.article-figure img { width: 100%; height: auto; filter: grayscale(1); background: var(--panel); }
.article-body { max-width: calc(720px + 2 * var(--gut)); margin: 0 auto; padding: clamp(48px, 8vh, 80px) var(--gut) var(--sec); font-size: 1.0625rem; line-height: 1.75; }
.article-body .prose { max-width: none; }
.article-body .prose > p:first-child { font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.6; color: var(--head); }
.article-body .prose > * + * { margin-top: 1.15em; }
.article-body .prose h2 { margin-top: 2.2em; font-weight: 300; font-size: clamp(1.5rem, 1.2rem + .9vw, 1.875rem); line-height: 1.25; color: var(--head); text-wrap: balance; }
.article-body .prose h3 { margin-top: 1.8em; font-weight: 400; font-size: 1.1875rem; line-height: 1.4; color: var(--head); }
.article-body .prose h4 { margin-top: 1.6em; font-weight: 500; font-size: 1.0625rem; color: var(--head); }
.article-body .prose :is(h2, h3, h4) strong { font-weight: inherit; }
.article-body .prose h2 + *, .article-body .prose h3 + *, .article-body .prose h4 + * { margin-top: .7em; }
.article-body .prose img { width: 100%; height: auto; margin-block: 2em; filter: grayscale(1); }
.article-body .prose blockquote { margin: 1.6em 0; padding-left: 22px; border-left: 2px solid var(--mark); font-weight: 300; font-size: 1.1875rem; line-height: 1.5; color: var(--head); }
.article-body .prose table { width: 100%; border-collapse: collapse; margin-block: 1.6em; font-size: .9375rem; line-height: 1.5; }
.article-body .prose td, .article-body .prose th { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body .prose tr:first-child td { border-top: 1px solid var(--line); }
/* A table wider than a phone scrolls inside itself, never the page */
@media (max-width: 760px) { .article-body .prose table { display: block; overflow-x: auto; } }

@media (max-width: 1100px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; gap: 48px; } }

/* =====================================================================================
   22. Legal pages (Privacy & data protection, Legal notice) and the 404 page
   The legal text and its markup are unchanged; only presentation is set here.
   ===================================================================================== */
.page-head { padding: calc(var(--hdr) + clamp(56px, 9vh, 96px)) 0 clamp(40px, 6vh, 56px); }
.page-head .wrap { max-width: calc(820px + 2 * var(--gut)); }
.page-head .crumbs { color: var(--soft); }
.page-head .crumbs a { text-decoration-color: var(--mark); }
.page-head h1 { font-weight: 300; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.15; color: var(--head); text-wrap: balance; }
.page-head .lead { margin-top: 18px; font-weight: 300; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; color: var(--head); max-width: 34em; }
.page-head + .sec { padding-top: 0; }
.page-head + .sec > .wrap { max-width: calc(820px + 2 * var(--gut)); }

/* Four key points: a ruled row, quiet gold numerals */
.keypoints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 32px); margin-bottom: clamp(48px, 7vh, 72px); }
.keypoint { border-top: 1px solid var(--line); padding-top: 20px; }
.kp-num { display: block; font-weight: 300; font-size: 1.75rem; line-height: 1; color: var(--mark); font-variant-numeric: lining-nums tabular-nums; }
.keypoint p { margin-top: 12px; font-size: .9375rem; line-height: 1.55; }

/* The company details: a ruled list of label and value */
.company-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 32px); margin: 0 0 clamp(48px, 7vh, 72px); }
.company-card > div { border-top: 1px solid var(--line); padding: 18px 0 22px; }
.company-card dt { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 8px; }
.company-card dd { margin: 0; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.company-card a { color: var(--head); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); }

/* The legal text: one reading column */
.legal .prose { max-width: none; font-size: 1rem; line-height: 1.7; }
.legal .prose h2 { margin-top: 2.4em; font-weight: 300; font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.25; color: var(--head); }
.legal .prose h3 { margin-top: 1.8em; font-weight: 400; font-size: 1.125rem; color: var(--head); }
.legal .prose h2 + *, .legal .prose h3 + * { margin-top: .7em; }
.legal-updated { font-size: .875rem; letter-spacing: .02em; color: var(--label); }
.legal .prose table { width: 100%; border-collapse: collapse; margin-block: 1.5em; font-size: .9375rem; line-height: 1.5; }
.legal .prose th { padding: 0 14px 10px 0; text-align: left; font-weight: 400; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--label); border-bottom: 1px solid var(--line); }
.legal .prose td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }

/* 404: a calm centred message */
.notfound { padding: calc(var(--hdr) + clamp(80px, 14vh, 160px)) 0 var(--sec); text-align: center; }
.notfound .label { margin-bottom: 18px; }
.notfound h1 { max-width: 18em; margin-inline: auto; font-weight: 300; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.15; color: var(--head); text-wrap: balance; }
.notfound .lead { max-width: 32em; margin: 20px auto 0; font-weight: 300; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; color: var(--head); }
.notfound .btn-row { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.btn--ghost { background: transparent; color: var(--btn); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--btn); }

@media (max-width: 900px) { .keypoints, .company-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .keypoints, .company-card { grid-template-columns: 1fr; }
  .legal .prose table { display: block; overflow-x: auto; }
}
.prose + .items--list { margin-top: 36px; }

/* 23. Software modules (computer screens): label, title and text on the left, tabs on the right,
   and the module's drawing large across the full width beneath them */
@media (min-width: 1101px) {
  .module { row-gap: 0; }
  .module-copy { display: contents; }
  .module-copy > :not(.figure-panel) { grid-column: 1; }
  .module > .tabs { grid-column: 2; grid-row: 1 / span 3; }
  .module-copy > .figure-panel { grid-column: 1 / -1; width: 100%; max-width: 900px; justify-self: center; margin-top: clamp(40px, 6vh, 64px); }
  .module-copy > .prose { margin-bottom: 0; }
}
/* A very light opening photograph (mostly white) needs a deeper tint to keep the ivory title readable */
.opening--darker .opening-media::after { background: rgba(36, 26, 18, .56); }

/* =====================================================================================
   24. Mystery Audits: the six sections of the stay, under four facts
   ===================================================================================== */
.stay-title { margin: clamp(64px, 9vh, 96px) 0 clamp(32px, 5vh, 48px); padding-top: clamp(40px, 6vh, 56px); border-top: 1px solid var(--line); font-weight: 300; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.2; color: var(--head); }
.stay-note { margin-top: clamp(40px, 6vh, 56px); max-width: var(--measure); color: var(--text); }
.split .prose--lead + .prose { margin-top: 24px; }

/* =====================================================================================
   Cookie consent (assets/analytics.js): a discreet ivory card low on the right (clear of the headline), with
   equal "Decline" and "Accept" buttons, and "Cookie settings" in the footer to reopen it.
   Flat, square and quiet, like the rest of the site; it sits below the open menu.
   ===================================================================================== */
.cookie-banner { position: fixed; right: var(--gut); bottom: 24px; z-index: 90; width: min(440px, calc(100% - 2 * var(--gut))); padding: 28px 28px 24px; background: var(--page); border: 1px solid var(--line); color: var(--text); font-size: .9375rem; line-height: 1.6; }
.cookie-banner[hidden] { display: none; }
.cookie-title { margin-bottom: 10px; font-weight: 400; font-size: 1.125rem; line-height: 1.3; color: var(--head); }
.cookie-banner p + p { margin-top: 10px; }
.cookie-now { color: var(--label); }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.cookie-btn { min-height: 48px; padding: 0 16px; background: transparent; color: var(--btn); border-color: var(--btn); font-family: inherit; cursor: pointer; }
.cookie-btn:hover { background: var(--btn); color: var(--btn-text); }
.ftr-cookie { display: inline-flex; align-items: center; min-height: 48px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.ftr-cookie:hover { color: var(--head); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--mark); }
.ftr-cookie[hidden] { display: none; }
@media (max-width: 600px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 22px 20px 20px; }
}