/* Guest Delight International: homepage stylesheet (approved design H, 4 Nov 2026). Plain CSS, no build step.
   Used only by site/index.html; other pages still use site.css until they are redesigned. */

@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; }

/* Concept H: the owner's final homepage. Base is G1 "GDI warm" (colours, type, every section),
   with B "Stillness" for the opening and header, and A "The Grand Hotel" for the closing invitation.
   Services: all five visible at once, no slider. Jost only. Self-contained: no other concept stylesheet is loaded.
   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 used for marks only. */
: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, .26);
  --hero-tint-strong: rgba(36, 26, 18, .42);
  --page: #FCFAF6;          /* ivory */
  --panel: #F6F0E6;         /* mist */
  --text: #3D2A1D;          /* body text */
  --head: #5C2B0D;          /* dark brown: headings, statement, numerals */
  --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: the one tiny active-step mark */
  --dark: #47210A;          /* deep brown chapter */
  --on-dark: #FCFAF6;
  --on-dark-soft: #D8C39B;
  --line-dark: rgba(216, 195, 155, .38);
  --btn: #5C2B0D;
  --btn-text: #FCFAF6;
  --logo-tone: #5C2B0D;     /* all 32 client logos in one brown */
  --photo-bg: #F6F0E6;
  --photo-bg-dark: #5C2B0D;
  --on-photo: #FCFAF6;
  --focus: #5C2B0D;
  --focus-glow: 0 0 0 5px rgba(237, 122, 53, .28);
}
*, *::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; }
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); }
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); }

/* Focus: precise, never removed */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: var(--focus-glow); }
.audit :focus-visible, .hero :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 */
.hdr-cta, .menu-btn, .menu-label, .btn, .figures dt, .ftr h2, .split-media figcaption {
  font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
}

/* 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);
  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 { 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; }

/* ---------- Header (from B): transparent over the opening photograph, solid ivory once it has passed ---------- */
.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 one 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 (from B, in G1 colours): <details> full-screen overlay, 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 { 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; } }

/* ---------- Opening (from B): the full-screen silhouette, headline low on the left ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--hero-bg); color: var(--on-photo); }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 45%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--hero-tint); }
/* The page's one motion moment: the photograph settles slowly into place. */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: settle 2.6s var(--ease) both; }
}
@keyframes settle { from { transform: scale(1.045); } to { transform: none; } }
.hero-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, 9vh, 96px);
}
.hero 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; margin-bottom: 36px; text-wrap: balance; text-shadow: 0 0 32px rgba(36, 26, 18, .45); }
.hero .btn--light { border-color: rgba(252, 250, 246, .75); }

/* ---------- Statement and figures ---------- */
.intro { padding: clamp(112px, 20vh, 220px) var(--gut) clamp(104px, 15vh, 168px); 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: .005em; color: var(--head); text-wrap: balance; }
.intro-link { margin-top: 36px; }
.intro-link a { display: inline-flex; align-items: center; min-height: 48px; color: var(--head); }
.figures { max-width: var(--max); margin: clamp(104px, 17vh, 192px) auto 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: 18px; }
.figures dd { font-weight: 300; font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: .01em; color: var(--head); font-variant-numeric: lining-nums; }
.figures dt { color: var(--label); max-width: 15em; line-height: 1.7; }

/* ---------- Clients: one calm tone ---------- */
.clients { background: var(--panel); padding: var(--sec) 0; }
.clients-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(56px, 8vh, 88px); }
.clients-head p { color: var(--soft); max-width: 22em; text-align: right; }
/* Logos are drawn black, then a single tone is laid over them with "lighten": the tone shows where the logo is,
   the pale panel stays where it is not. One colour for all 32 without editing the files. */
.logos { position: relative; isolation: isolate; background: var(--panel); display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 24px; }
.logos::after { content: ""; position: absolute; inset: 0; background: var(--logo-tone); 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); }

/* ---------- How an audit works: the dark chapter ---------- */
.audit { background: var(--dark); color: var(--on-dark); padding: clamp(104px, 16vh, 176px) 0 clamp(96px, 14vh, 160px); }
.audit h2, .audit h3 { color: var(--on-dark); }
.audit-head { display: grid; grid-template-columns: 5fr 6fr; gap: var(--gut); align-items: end; margin-bottom: clamp(72px, 11vh, 112px); }
.audit-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; }
.touch { display: grid; grid-template-columns: repeat(10, 1fr); border-top: 1px solid var(--line-dark); margin-bottom: clamp(88px, 14vh, 144px); }
.touch li { position: relative; padding: 28px 12px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--on-dark-soft); }
.touch li::before { content: ""; position: absolute; left: 0; top: -1px; width: 1px; height: 14px; background: var(--mark); }
.touch li:last-child::after { content: ""; position: absolute; right: 0; top: -1px; width: 1px; height: 14px; background: var(--mark); }

.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.split-col { align-self: stretch; }
.split-media { position: sticky; top: calc(var(--hdr) + 32px); }
.split-frame { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--hdr) - 120px); max-height: calc(100svh - var(--hdr) - 120px); width: 100%; overflow: hidden; background: var(--photo-bg-dark); }
.split-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease-out; }
.split-frame img.is-active { opacity: 1; }
.split-media figcaption { position: relative; margin-top: 18px; min-height: 1.2em; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.split-media .cap { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s ease-out; }
.split-media .cap.is-active { opacity: 1; }

.steps { counter-reset: step; border-left: 1px solid var(--line-dark); }
.step { counter-increment: step; position: relative; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 32px 0 32px clamp(32px, 4vw, 56px); }
.step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 0; }
.step:last-child { min-height: 50vh; justify-content: flex-end; padding-bottom: 0; }
.step::before { content: counter(step); display: block; font-weight: 300; font-size: clamp(2.75rem, 2rem + 2vw, 4rem); line-height: 1; color: var(--on-dark-soft); margin-bottom: 28px; font-variant-numeric: lining-nums; }
.step::after { content: ""; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); opacity: 0; transition: opacity .4s ease-out; }
.step:first-child::after { top: .9rem; }
.step:last-child::after { top: auto; bottom: 7.5rem; }
.step.is-active::after { opacity: 1; }
.step h3 { font-weight: 300; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.25; letter-spacing: .005em; }
.step p { margin-top: 14px; max-width: 30em; color: var(--on-dark-soft); }

/* ---------- Services: all five in view at once, no slider ---------- */
.services { padding: var(--sec) 0 0; }
.services-head { margin-bottom: clamp(48px, 7vh, 72px); }
.services-head p { color: var(--soft); margin-top: 14px; max-width: 34em; }
/* Desktop: one row of five tall panels, every title and line always visible. */
.svc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 1.6vw, 28px); }
.svc-item { position: relative; }
.svc-img { aspect-ratio: 2 / 3; overflow: hidden; background: var(--photo-bg); margin-bottom: 24px; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc-item:hover .svc-img img { transform: scale(1.03); }
.svc-item h3 { font-weight: 300; font-size: clamp(1.1875rem, 1rem + .35vw, 1.375rem); line-height: 1.3; text-wrap: balance; }
.svc-item h3 a { text-decoration: none; }
.svc-item h3 a::after { content: ""; position: absolute; inset: 0; }
.svc-item h3 a:hover, .svc-item:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); }
.svc-item h3 a:focus-visible { outline: none; box-shadow: none; }
.svc-item h3 a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 6px; box-shadow: var(--focus-glow); }
.svc-item p { margin-top: 12px; color: var(--soft); font-size: .9688rem; line-height: 1.6; }
.svc-item p a { position: relative; z-index: 1; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); }
.svc-item p a:hover { color: var(--head); text-decoration-color: currentColor; }

/* ---------- Why GDI: the photograph bleeds off the left edge ---------- */
.why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); padding: var(--sec) 0; align-items: start; }
.why-media { position: sticky; top: calc(var(--hdr) + 24px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.why-media img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }
.why-text { padding-right: var(--gut); max-width: calc(780px + var(--gut)); padding-top: 8px; }
.why-text h2 { margin-bottom: clamp(48px, 7vh, 72px); }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 4vw, 64px); }
.reasons h3 { margin-bottom: 8px; }
.reasons p { color: var(--soft); font-size: 1rem; }
.why-more { margin-top: 48px; }
.why-more a, .insights-head a { display: inline-flex; align-items: center; min-height: 48px; color: var(--head); }

/* ---------- Insights ---------- */
.insights { padding: 0 0 var(--sec); }
.insights-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 32px; }
.posts { border-top: 1px solid var(--line); }
.posts li { border-bottom: 1px solid var(--line); }
.posts a { display: grid; grid-template-columns: 1fr auto; gap: 8px 48px; align-items: baseline; padding: 32px 0; text-decoration: none; }
.post-title { font-weight: 300; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.3; max-width: 30em; color: var(--head); }
.post-meta { color: var(--label); font-size: .9375rem; white-space: nowrap; }
.posts a:hover .post-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--mark); }

/* ---------- Closing (from A): an ivory card centred over the full-width lobby 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 .btn { margin-top: 36px; }

/* ---------- Footer ---------- */
.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%); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .logos { grid-template-columns: repeat(6, 1fr); }
  .touch { grid-template-columns: repeat(5, 1fr); row-gap: 40px; border-top: 0; }
  .touch li { border-top: 1px solid var(--line-dark); }
  .touch li:last-child::after { display: none; }
}
@media (max-width: 900px) {
  .audit-head { grid-template-columns: 1fr; gap: 24px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split-col { align-self: auto; }
  .split-media { position: static; }
  .split-frame { aspect-ratio: 3 / 2; max-height: none; }
  .split-frame img:not(:first-child) { display: none; }
  .split-frame img:first-child { opacity: 1; }
  .split-media figcaption { display: none; }
  .steps { border-left: 0; }
  .step, .step:first-child, .step:last-child { min-height: 0; justify-content: flex-start; padding: 0 0 48px; }
  .step:last-child { padding-bottom: 0; }
  .step::after { display: none; }
  .why { grid-template-columns: 1fr; }
  .why-media { position: relative; top: 0; aspect-ratio: 4 / 3; margin-right: var(--gut); }
  .why-text { padding-left: var(--gut); }
  .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; }
  .hero h1 { margin-bottom: 28px; }
  .hero-media::after { background: var(--hero-tint-strong); }
  .figures { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .figures div:last-child { grid-column: 1 / -1; }
  .touch { grid-template-columns: 1fr; row-gap: 0; border-top: 0; border-left: 1px solid var(--line-dark); margin-left: 4px; }
  .touch li { border-top: 0; padding: 0 0 20px 24px; }
  .touch li:last-child { padding-bottom: 0; }
  .touch li::before { top: .7em; left: 0; width: 12px; height: 1px; }
  .step::before { font-size: 2.25rem; margin-bottom: 16px; }
  .clients-head { flex-direction: column; align-items: flex-start; }
  .clients-head p { text-align: left; }
  .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; }
  .reasons { grid-template-columns: 1fr; gap: 36px; }
  .posts a { grid-template-columns: 1fr; padding: 26px 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; }
}

/* Services: tablet, three over two, the second row centred */
@media (max-width: 1099px) {
  .svc { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 32px); row-gap: 64px; }
  .svc-item { grid-column: span 2; }
  .svc-item:nth-child(4) { grid-column: 2 / span 2; }
  .svc-item:nth-child(5) { grid-column: 4 / span 2; }
  .svc-img { aspect-ratio: 4 / 5; }
}
/* Services: phone, the five stacked, each a compact landscape photograph with its title and line */
@media (max-width: 759px) {
  .svc { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .svc-item, .svc-item:nth-child(n) { grid-column: auto; }
  .svc-img { aspect-ratio: 3 / 2; margin-bottom: 20px; }
  .svc-img img { object-position: 50% 30%; }
  .svc-item:first-child .svc-img img { object-position: 50% 12%; }
  .svc-item p { font-size: 1rem; }
}
@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; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .svc-item:hover .svc-img img { transform: none; }
}

/* =====================================================================================
   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; }
}