/*
Theme Name: Great Southern Hospitality
Theme URI: https://greatsouthernhospitality.com.au
Author: Great Southern Hospitality Management
Author URI: https://greatsouthernhospitality.com.au
Description: Integrated hospitality group theme for Great Southern Hospitality Management Pty Ltd — parent brand with three divisions (Agile Hospitality, Agile Business Solutions, Agile Supply Co). Fully-editable built-in product engine (multiple images, features, specs, brochure, related products — no WooCommerce needed) with a Request-a-Quote workflow (no cart/checkout). Pixel-perfect, fully responsive, ACF-driven content editing, one-click demo importer, JSON-LD SEO, GA4, and on-brand Elementor/Gutenberg shortcode blocks.
Version: 2.7.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gsh
Tags: business, hospitality, wholesale, custom-colors, custom-menu, featured-images, full-width-template, translation-ready
*/

/* =========================================================================
   Great Southern Hospitality — Design System
   Ported 1:1 from the approved Next.js build (app/globals.css).
   Brand: matte black + warm white + soft gold. Condensed display type.
   ========================================================================= */

:root {
  --black: #0d0d0c;
  --charcoal: #242422;
  --ink-soft: #5f5c56;
  --warm-white: #f4f0e8;
  --paper: #fbf8f2;
  --warm-surface: #e9e4da;
  --gold: #80613a;
  --gold-fill: #b08a55;
  --gold-pale: #d5bd97;
  --line: rgba(13, 13, 12, 0.2);
  --max: 1460px;
  --gutter: clamp(22px, 4.75vw, 76px);
  --display: "Arial Narrow", "DIN Condensed", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================================
   PER-SECTION STYLE TOKENS  (--gsh-*)
   -------------------------------------------------------------------------
   The tokens above are the GLOBAL brand palette, editable site-wide in
   Customize -> "Great Southern - Brand".

   The tokens below are PER-SECTION overrides. They are never declared here:
   every rule reads them as `var(--gsh-token, <approved default>)`, so with no
   token set the design renders exactly as approved. Elementor's Style tab
   writes them onto the widget wrapper, where they inherit into the section.
   That is what makes each section restyleable per instance, and reusable on
   new pages, without forking the CSS.

     BAND     --gsh-sec-bg  --gsh-sec-fg  --gsh-sec-pad-y  --gsh-sec-pad-x
              --gsh-sec-max
     HEADING  --gsh-head-size  --gsh-head-color  --gsh-head-copy-color
              --gsh-head-gap  --gsh-head-mb  --gsh-head-rule
              --gsh-eyebrow-color
     GRID     --gsh-grid-cols  --gsh-grid-gap  --gsh-grid-line
     CARD     --gsh-card-bg  --gsh-card-pad  --gsh-card-minh
              --gsh-card-title-size  --gsh-card-title-color
              --gsh-card-copy-color  --gsh-card-hover-bg  --gsh-card-hover-fg
     ICON     --gsh-icon-size  --gsh-icon-glyph  --gsh-icon-color
              --gsh-icon-border
     BUTTON   --gsh-btn-bg  --gsh-btn-fg  --gsh-btn-border  --gsh-btn-pad
              --gsh-btn-hover-bg  --gsh-btn-hover-fg

   NOTE ON COLUMNS: --gsh-grid-cols is a DESKTOP control. The responsive rules
   at the foot of this file still collapse every grid to 2 and then 1 column,
   deliberately overriding it, so a client cannot leave a 6-column grid
   unreadable on a phone. Section padding does the opposite: its mobile rule
   reads the same token, so a custom value is honoured at all widths.
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
body { margin: 0; background: var(--warm-white); color: var(--black); font-family: var(--body); font-size: 16px; line-height: 1.6; }
/* PLUGIN-SAFE GLOBAL RESETS.
   These element-level resets are what the design needs, but applied bare they
   also reformat every third-party plugin's markup (images forced full-width,
   links stripped of underlines, headings de-emphasised, paragraphs de-spaced).
   Wrapping them in :where() gives them ZERO specificity, so:
     - the theme's own component rules (.product-card img, etc.) still win, and
     - ANY plugin's own CSS — even a plain `img {}` rule — now overrides them.
   Net effect: identical design, but plugins style themselves normally. */
:where(p, figure, blockquote, dl, dd) { margin: 0; }
/* The original (Tailwind Preflight) resets heading weight to inherit — headings
   render at the body weight (400 / regular), NOT the browser default bold. This
   is essential: without it the condensed headings look "extra bold". */
:where(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:where(img) { display: block; width: 100%; }
:where(button, input, select, textarea) { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* WordPress helpers */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: var(--paper); clip: auto !important; clip-path: none; color: var(--black); display: block; font-size: 14px; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }

.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 12px 16px; transform: translateY(-160%); background: var(--black); color: var(--warm-white); font-family: var(--display); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.skip-link:focus { transform: translateY(0); }

.utility { min-height: 31px; padding: 7px var(--gutter); background: var(--black); color: var(--gold-pale); display: flex; justify-content: space-between; gap: 20px; font-family: var(--display); font-weight: 800; font-stretch: condensed; font-size: 11px; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; }
.site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--warm-white) 94%, transparent); }
.nav-shell { min-height: 86px; max-width: calc(var(--max) + var(--gutter) * 2); margin: auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; align-items: center; gap: 32px; }
/* When the header button is switched off there is one less column, so the nav
   stays flush to the right edge instead of leaving an empty track. */
.nav-shell-nobutton { grid-template-columns: minmax(280px, 1fr) auto; }
.brand { display: inline-flex; min-height: 44px; align-items: center; gap: 13px; width: fit-content; }
.brand-box { width: 44px; height: 44px; border: 2px solid var(--gold); display: grid; place-items: center; color: var(--black); font-family: var(--display); font-weight: 900; letter-spacing: -.04em; }
.brand-logo-img { width: auto; max-width: 260px; max-height: 52px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.1; }
.brand b { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 15px; }
.brand small { margin-top: 4px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .13em; font-size: 9px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.desktop-nav > a, .nav-details > summary { min-width: 44px; padding: 34px 0; cursor: pointer; list-style: none; border-bottom: 2px solid transparent; text-align: center; }
.desktop-nav > a:hover, .nav-details > summary:hover { border-color: var(--gold); }
.desktop-nav > a[aria-current="page"], .desktop-nav > a.current-menu-item, .nav-details.nav-current > summary { border-color: var(--gold-fill); color: var(--gold); }
.nav-details { position: relative; }
.nav-details summary::-webkit-details-marker, .mobile-menu summary::-webkit-details-marker { display: none; }
.nav-panel { position: absolute; top: 75px; right: -100px; width: 360px; background: var(--black); color: var(--warm-white); padding: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.nav-panel a { display: flex; gap: 18px; padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,.14); }
.nav-panel a:hover { color: var(--gold-pale); background: var(--charcoal); }
.nav-panel span { color: var(--gold-pale); }
/* Auto-number the menu-driven dropdown items (walker outputs an empty span) */
.nav-panel { counter-reset: gsh-navnum; }
.nav-panel a span:empty::before { counter-increment: gsh-navnum; content: counter(gsh-navnum, decimal-leading-zero); }
.mobile-menu { display: none; }
.mobile-quote-bar { display: none; }

.button { display: inline-flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 28px; padding: var(--gsh-btn-pad, 15px 24px); border: 1px solid var(--gsh-btn-border, var(--black)); background: var(--gsh-btn-bg, var(--black)); color: var(--gsh-btn-fg, var(--warm-white)); font-family: var(--display); font-weight: 900; font-size: 13px; line-height: 1.1; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-3px); background: var(--gsh-btn-hover-bg, var(--gold-fill)); border-color: var(--gsh-btn-hover-bg, var(--gold-fill)); color: var(--gsh-btn-hover-fg, var(--black)); }
.button-small { min-height: 44px; padding: 12px 17px; font-size: 11px; }
.button-gold { background: var(--gold-fill); color: var(--black); border-color: var(--gold-fill); }
.button-gold:hover { background: var(--warm-white); border-color: var(--warm-white); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; padding: 9px 0; border-bottom: 1px solid currentColor; font-family: var(--display); font-size: 13px; line-height: 1.2; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.text-link.light { color: var(--warm-white); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 38px; }
.eyebrow { display: block; color: var(--gold); font-family: var(--display); font-weight: 900; font-size: 13px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }

.hero { max-width: var(--max); min-height: calc(100svh - 121px); margin: auto; padding: 52px var(--gutter) 60px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(360px, .85fr); gap: clamp(42px, 5vw, 80px); align-items: center; }
.hero-copy h1, .page-hero h1, .form-page h1, .contact-page h1, .not-found h1, .product-info h1 { margin: 24px 0 28px; font-family: var(--display); font-size: clamp(62px, 6.6vw, 108px); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.hero-copy h1 { font-size: clamp(58px, 5.7vw, 82px); }
.hero-copy h1 em { color: var(--gold); font-style: normal; }
.hero-copy > p { max-width: 760px; margin: 0; padding-left: 32px; border-left: 3px solid var(--gold); color: var(--ink-soft); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.7; }
.hero-visual { position: relative; align-self: stretch; min-height: 600px; overflow: hidden; background: var(--charcoal); }
.hero-visual::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(13,13,12,.08), rgba(13,13,12,.68)); }
.hero-visual img { height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.03); }
.hero-label { position: absolute; z-index: 3; left: 30px; right: 30px; bottom: 34px; color: var(--warm-white); }
.hero-label span { display: block; margin-bottom: 12px; color: var(--gold-pale); font-family: var(--display); font-weight: 900; letter-spacing: .17em; text-transform: uppercase; font-size: 12px; }
.hero-label b { font-family: var(--display); text-transform: uppercase; font-size: 34px; line-height: 1; }
.hero-code { position: absolute; z-index: 3; right: 24px; top: 24px; color: var(--warm-white); writing-mode: vertical-rl; font-family: var(--display); font-weight: 900; letter-spacing: .18em; font-size: 10px; }
.hero-division-rail { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-division-rail a { min-height: 74px; padding: 12px 14px; display: grid; grid-template-columns: 28px 1fr; align-content: center; border-right: 1px solid var(--line); transition: background .2s ease, color .2s ease; }
.hero-division-rail a:last-child { border-right: 0; }
.hero-division-rail a:hover { background: var(--black); color: var(--warm-white); }
.hero-division-rail span { grid-row: 1 / 3; color: var(--gold); font-family: var(--display); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.hero-division-rail b { font-family: var(--display); font-size: 13px; line-height: 1.05; text-transform: uppercase; }
.hero-division-rail small { margin-top: 4px; color: var(--ink-soft); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.hero-division-rail a:hover small { color: var(--warm-surface); }

/* Section band. Every value routes through a --gsh-* token whose fallback is the
   approved design value, so the band is unchanged until a Style control sets it.
   Elementor writes these tokens onto the widget wrapper; they inherit down. */
.operating-model, .confidence-section, .capability-section, .engagement-section, .service-section, .challenge-section, .outcome-section, .supply-categories, .process-section, .project-types, .catalogue-section, .all-categories, .product-journey, .product-fit-section, .related-products, .story-section, .values-section, .contact-division-links, .faq-section { max-width: var(--gsh-sec-max, var(--max)); margin: auto; padding: var(--gsh-sec-pad-y, 100px) var(--gsh-sec-pad-x, var(--gutter)); background: var(--gsh-sec-bg, transparent); color: var(--gsh-sec-fg, inherit); }
.section-heading { display: grid; grid-template-columns: minmax(180px, .34fr) 1fr; gap: var(--gsh-head-gap, 44px); margin-bottom: var(--gsh-head-mb, 52px); padding-top: 24px; border-top: 1px solid var(--gsh-head-rule, var(--line)); }
.section-index { display: flex; gap: 20px; color: var(--gsh-eyebrow-color, var(--gold)); font-family: var(--display); font-weight: 900; letter-spacing: .17em; text-transform: uppercase; font-size: 12px; }
.section-heading h2, .supply-feature h2, .final-cta h2, .audience-section h2, .procurement-section h2, .success-panel h2 { max-width: 950px; margin: 0; font-family: var(--display); font-size: var(--gsh-head-size, clamp(42px, 4.7vw, 76px)); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; color: var(--gsh-head-color, inherit); }
.section-heading p { max-width: 760px; margin: 22px 0 0; color: var(--gsh-head-copy-color, var(--ink-soft)); font-size: 18px; }
.division-grid { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 3), 1fr); border: 1px solid var(--gsh-grid-line, var(--black)); }
.division-card { min-height: var(--gsh-card-minh, 330px); padding: var(--gsh-card-pad, 28px); display: grid; grid-template-rows: auto 1fr auto; border-right: 1px solid var(--gsh-grid-line, var(--black)); background: var(--gsh-card-bg, var(--warm-white)); transition: background .22s ease, color .22s ease, transform .22s ease; }
.division-card:last-child { border-right: 0; }
.division-card:hover { background: var(--gsh-card-hover-bg, var(--black)); color: var(--gsh-card-hover-fg, var(--warm-white)); transform: translateY(-5px); }
.division-number { color: var(--gsh-eyebrow-color, var(--gold)); font-family: var(--display); font-weight: 900; letter-spacing: .12em; }
.division-card h3 { margin: 12px 0; font-family: var(--display); font-size: var(--gsh-card-title-size, clamp(30px, 2.7vw, 44px)); line-height: .95; text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.division-card p { margin: 0; color: var(--gsh-card-copy-color, var(--ink-soft)); }
.division-card:hover p { color: var(--warm-surface); }
.card-arrow { justify-self: end; font-size: 24px; }
/* Rich division cards + parent lockup (homepage only) */
.division-frame { border: 1px solid var(--black); }
.division-frame-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 15px 24px; background: var(--black); color: var(--warm-white); }
.division-frame-head .brand-box { width: 38px; height: 38px; color: var(--warm-white); border-color: var(--gold); }
.frame-parent { font-family: var(--display); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; }
.frame-code { margin-left: auto; color: var(--gold-pale); font-family: var(--display); font-weight: 900; letter-spacing: .17em; text-transform: uppercase; font-size: 11px; }
.division-grid-rich { border: 0; }
.division-card-rich { min-height: 424px; padding: 0; grid-template-rows: 200px 1fr; }
.division-media { position: relative; overflow: hidden; background: var(--charcoal); }
.division-media img { height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .4s ease; }
.division-card-rich:hover .division-media img { transform: scale(1.05); }
.division-code { position: absolute; left: 14px; bottom: 14px; padding: 5px 9px; background: var(--black); color: var(--gold-pale); font-family: var(--display); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.division-body { padding: 26px; display: grid; grid-template-rows: auto 1fr auto; }
.credibility-rail { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 5), 1fr); background: var(--gsh-card-bg, var(--black)); color: var(--gsh-card-copy-color, var(--warm-white)); }
.credibility-rail > div, .credibility-rail > a { min-height: 150px; padding: var(--gsh-card-pad, 28px); border-right: 1px solid var(--gsh-grid-line, rgba(255,255,255,.16)); display: flex; flex-direction: column; justify-content: space-between; }
.credibility-rail span { color: var(--gsh-eyebrow-color, var(--gold-pale)); font-family: var(--display); font-weight: 900; }
.credibility-rail b { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; }
.credibility-rail > div, .credibility-rail > a { min-height: 184px; gap: 20px; }
.confidence-section { padding-bottom: 30px; }
.detail-grid { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 3), 1fr); gap: var(--gsh-grid-gap, 1px); border: 1px solid var(--gsh-grid-line, var(--black)); background: var(--gsh-grid-line, var(--black)); }
.detail-grid > div, .detail-grid > a { min-height: var(--gsh-card-minh, 270px); padding: var(--gsh-card-pad, 28px); background: var(--gsh-card-bg, var(--warm-white)); }
.detail-grid span { color: var(--gsh-eyebrow-color, var(--gold)); font-family: var(--display); font-weight: 900; }
.detail-grid h3 { margin: 68px 0 12px; font-family: var(--display); font-size: var(--gsh-card-title-size, 30px); line-height: 1; text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.detail-grid p { margin: 0; color: var(--gsh-card-copy-color, var(--ink-soft)); }
.detail-grid-dark > div, .detail-grid-dark > a { background: var(--charcoal); color: var(--warm-white); }
.detail-grid-dark p { color: var(--warm-surface); }
/* Boxed icon system — echoes the GS brand-box mark. Icons inherit gold on light
   surfaces and pale gold on dark surfaces; the 1px frame matches the site's rules. */
.icon-box { display: grid; place-items: center; width: var(--gsh-icon-size, 56px); height: var(--gsh-icon-size, 56px); border: 1px solid var(--gsh-icon-border, rgba(13, 13, 12, 0.34)); color: var(--gsh-icon-color, var(--gold)); }
.icon-box svg { display: block; width: var(--gsh-icon-glyph, 28px); height: var(--gsh-icon-glyph, 28px); }
.detail-grid-dark .icon-box, .credibility-rail .icon-box, .procurement-options .icon-box { border-color: var(--gsh-icon-border, rgba(255, 255, 255, 0.34)); color: var(--gsh-icon-color, var(--gold-pale)); }
.detail-grid > div:has(.icon-box) h3, .detail-grid > a:has(.icon-box) h3 { margin-top: 22px; }
.engagement-section { padding-top: 30px; }
.engagement-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.engagement-section .detail-grid { grid-template-columns: repeat(2, 1fr); }
.engagement-section .detail-grid > div, .engagement-section .detail-grid > a { min-height: 310px; }
.capability-layout { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 640px; }
.capability-image { position: relative; min-height: 540px; overflow: hidden; }
.capability-image img { height: 100%; object-fit: cover; filter: saturate(.75); }
.capability-image span { position: absolute; left: 24px; bottom: 24px; padding: 10px 14px; background: var(--warm-white); font-family: var(--display); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.capability-list { border-top: 1px solid var(--gsh-grid-line, var(--black)); }
.capability-list > div, .capability-list > a { min-height: 25%; padding: var(--gsh-card-pad, 24px 30px); display: grid; grid-template-columns: 42px 180px 1fr; gap: 20px; align-items: center; border-right: 1px solid var(--gsh-grid-line, var(--black)); border-bottom: 1px solid var(--gsh-grid-line, var(--black)); background: var(--gsh-card-bg, transparent); }
.capability-list span { color: var(--gsh-eyebrow-color, var(--gold)); font-family: var(--display); font-weight: 900; }
.capability-list h3 { margin: 0; font-family: var(--display); font-size: var(--gsh-card-title-size, 30px); text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.capability-list p { margin: 0; color: var(--gsh-card-copy-color, var(--ink-soft)); }
.supply-feature { display: grid; grid-template-columns: 1fr 1fr; background: var(--gsh-sec-bg, var(--black)); color: var(--gsh-sec-fg, var(--warm-white)); }
.supply-feature > div:first-child { padding: clamp(64px, 8vw, 120px) var(--gutter); align-self: center; }
.supply-feature h2 { margin: 24px 0; }
.supply-feature p { max-width: 680px; color: var(--warm-surface); font-size: 18px; }
.supply-feature-image { position: relative; min-height: 650px; overflow: hidden; }
.supply-feature-image > img:first-child { height: 100%; object-fit: cover; filter: saturate(.6); }
.supply-logo { position: absolute; right: 28px; bottom: 28px; width: 190px; padding: 14px; background: rgba(244,240,232,.94); }
.final-cta { padding: var(--gsh-sec-pad-y, clamp(80px, 9vw, 150px)) var(--gsh-sec-pad-x, var(--gutter)); text-align: center; background: var(--gsh-sec-bg, var(--charcoal)); color: var(--gsh-sec-fg, var(--warm-white)); }
.final-cta h2 { max-width: 980px; margin: 24px auto; }
.final-cta p { max-width: 650px; margin: 0 auto 34px; color: var(--warm-surface); font-size: 18px; }

.site-footer { padding: 72px var(--gutter) 24px; background: var(--black); color: var(--warm-white); }
.site-footer .brand-box { color: var(--warm-white); }
.site-footer .brand small, .site-footer p { color: #a9a59e; }
.footer-top { max-width: var(--max); margin: auto; display: grid; grid-template-columns: 1.6fr repeat(3, .65fr); gap: 40px 50px; }
.footer-top > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col-brand { padding-right: 40px; }
.footer-col-brand p { max-width: 400px; margin-top: 4px; line-height: 1.65; }
.footer-top p { max-width: 380px; }
.footer-label { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); width: 100%; color: var(--gold-pale); font-family: var(--display); font-weight: 900; letter-spacing: .17em; text-transform: uppercase; font-size: 11px; }
.footer-top a { min-width: 44px; min-height: 40px; padding: 0 2px; display: inline-flex; align-items: center; position: relative; color: #d9d5cd; transition: color .22s ease, transform .22s ease; }
/* :not(.brand) so hovering the footer logo doesn't nudge the whole brand mark. */
.footer-top a:not(.brand):hover { color: var(--gold-pale); transform: translateX(3px); }
/* Small print under the contact links (address / hours / service area). */
.footer-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); color: #8b8882; font-size: 13px; line-height: 1.5; }
.footer-widget { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.footer-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.footer-widget a { min-height: 40px; display: inline-flex; align-items: center; }
.footer-widget a:hover { color: var(--gold-pale); }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-social a { min-height: 40px; padding: 10px 16px; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.22); color: var(--gold-pale); font-family: var(--display); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease; }
.footer-social a:hover { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--black); transform: translateY(-2px); }

.footer-bottom { max-width: var(--max); margin: 64px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 32px; color: #8b8882; font-size: 12px; }
.footer-bottom-left, .footer-bottom-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
/* Thin separators between the bottom-bar items. A real border (not a ::before)
   so it works even when the item is itself a flex container (the back-to-top
   link is inline-flex, which would blockify a pseudo-element into its box). */
.footer-bottom-left > * + *, .footer-bottom-right > * + * { margin-left: 22px; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.24); }
.footer-bottom a { color: #a9a59e; transition: color .22s ease; }
.footer-bottom a:hover { color: var(--gold-pale); }
.footer-credit a { color: var(--gold-pale); border-bottom: 1px solid rgba(213,189,151,.45); padding-bottom: 1px; }
.footer-credit a:hover { color: var(--warm-white); border-color: var(--warm-white); }
.footer-backtotop { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.footer-backtotop span { transition: transform .22s ease; }
.footer-backtotop:hover span { transform: translateY(-3px); }

/* min-height (not a fixed height): the copy column must be able to grow past the
   720px band on short viewports / long headings, otherwise it is cramped and can
   be clipped by the overflow:hidden above. */
.page-hero { min-height: max(600px, min(720px, calc(100svh - 121px))); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; background: var(--warm-surface); }
.page-hero > div { padding: clamp(56px, 6vw, 96px) var(--gutter); align-self: center; }
.page-hero h1 { max-width: 900px; margin: 22px 0 26px; font-size: clamp(46px, 4.4vw, 64px); }
.page-hero p { max-width: 640px; color: var(--ink-soft); font-size: 19px; }
.page-hero .button { margin-top: 36px; }
.page-hero > img { height: 100%; min-width: 0; min-height: 0; object-fit: cover; filter: saturate(.68); }
.page-hero-dark { background: var(--black); color: var(--warm-white); }
.page-hero-dark p { color: var(--warm-surface); }
.page-hero-dark .eyebrow, .supply-feature .eyebrow, .final-cta .eyebrow, .procurement-section .eyebrow, .form-intro .eyebrow, .contact-intro .eyebrow, .outcome-section .section-index, .outcome-section .detail-grid span, .division-page-agile-supply-co .service-section .section-index, .division-page-agile-supply-co .service-grid span, .procurement-options span, .form-points span { color: var(--gold-pale); }
.service-grid { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 4), 1fr); border-left: 1px solid var(--gsh-grid-line, var(--black)); border-top: 1px solid var(--gsh-grid-line, var(--black)); }
.service-grid > div, .service-grid > a { min-height: var(--gsh-card-minh, 290px); padding: var(--gsh-card-pad, 24px); border-right: 1px solid var(--gsh-grid-line, var(--black)); border-bottom: 1px solid var(--gsh-grid-line, var(--black)); background: var(--gsh-card-bg, transparent); }
.service-grid span, .process-grid span, .value-grid span { color: var(--gsh-eyebrow-color, var(--gold)); font-family: var(--display); font-weight: 900; }
.service-grid h3 { margin: 22px 0 12px; font-family: var(--display); font-size: var(--gsh-card-title-size, 25px); line-height: 1.05; text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.service-grid p { margin: 0; color: var(--gsh-card-copy-color, var(--ink-soft)); font-size: 15px; line-height: 1.6; }
.challenge-section { background: var(--gsh-sec-bg, var(--paper)); }
.challenge-layout, .process-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.challenge-layout .detail-grid, .process-layout .process-grid { grid-template-columns: 1fr; }
.challenge-layout .detail-grid > div, .process-layout .process-grid > div, .challenge-layout .detail-grid > a, .process-layout .process-grid > a { min-height: 220px; }
.challenge-layout .detail-grid h3, .process-layout .process-grid h3 { margin-top: 42px; }
.outcome-section { color: var(--gsh-sec-fg, var(--warm-white)); background: var(--gsh-sec-bg, var(--charcoal)); }
.outcome-section .section-heading { border-color: rgba(255,255,255,.24); }
.audience-section { padding: var(--gsh-sec-pad-y, 90px) var(--gsh-sec-pad-x, var(--gutter)); background: var(--gsh-sec-bg, var(--warm-surface)); color: var(--gsh-sec-fg, inherit); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.audience-section h2 { margin: 24px 0 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-end; }
.tag-list span, .tag-list > a { padding: 12px 16px; border: 1px solid var(--line); background: var(--paper); font-family: var(--display); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.process-grid, .value-grid { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 3), 1fr); gap: var(--gsh-grid-gap, 1px); background: var(--gsh-grid-line, var(--black)); border: 1px solid var(--gsh-grid-line, var(--black)); }
.process-grid > div, .value-grid > div, .process-grid > a, .value-grid > a { min-height: var(--gsh-card-minh, 250px); padding: var(--gsh-card-pad, 28px); background: var(--gsh-card-bg, var(--warm-white)); }
.process-grid h3, .value-grid h3 { margin: 40px 0 12px; font-family: var(--display); font-size: var(--gsh-card-title-size, 36px); text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.process-grid p, .value-grid p { color: var(--gsh-card-copy-color, var(--ink-soft)); }
.category-grid { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 4), 1fr); border-left: 1px solid var(--gsh-grid-line, var(--black)); border-top: 1px solid var(--gsh-grid-line, var(--black)); }
.category-grid a { min-height: var(--gsh-card-minh, 210px); padding: var(--gsh-card-pad, 24px); border-right: 1px solid var(--gsh-grid-line, var(--black)); border-bottom: 1px solid var(--gsh-grid-line, var(--black)); background: var(--gsh-card-bg, transparent); display: grid; grid-template-rows: auto 1fr auto; transition: background .2s ease, color .2s ease; }
.category-grid a:hover { background: var(--gsh-card-hover-bg, var(--black)); color: var(--gsh-card-hover-fg, var(--warm-white)); }
.category-grid span { color: var(--gsh-eyebrow-color, var(--gold)); font-family: var(--display); font-weight: 900; }
.category-grid h3 { align-self: end; margin: 0; font-family: var(--display); font-size: var(--gsh-card-title-size, 24px); text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.category-grid a > span:last-child { justify-self: end; }
.procurement-section { padding: var(--gsh-sec-pad-y, 100px) var(--gsh-sec-pad-x, var(--gutter)); background: var(--gsh-sec-bg, var(--charcoal)); color: var(--gsh-sec-fg, var(--warm-white)); display: grid; grid-template-columns: .9fr .65fr 1fr; gap: 28px; }
.procurement-section h2 { margin: 20px 0; }
.procurement-section p { margin: 0 0 14px; max-width: 560px; color: var(--warm-surface); }
.procurement-section .button { margin-top: 18px; }
.procurement-options { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 2), 1fr); border: 1px solid var(--gsh-grid-line, rgba(255,255,255,.4)); }
.procurement-options > div { padding: var(--gsh-card-pad, 28px); border-right: 1px solid var(--gsh-grid-line, rgba(255,255,255,.4)); background: var(--gsh-card-bg, transparent); }
.procurement-options > div:last-child { border: 0; }
.procurement-options span { color: var(--gsh-eyebrow-color, var(--gold-pale)); font-family: var(--display); font-weight: 900; }
.procurement-options h3 { margin: 24px 0 12px; font-family: var(--display); font-size: var(--gsh-card-title-size, 28px); text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.project-type-grid { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 3), 1fr); gap: var(--gsh-grid-gap, 16px); }
.project-type-grid > div, .project-type-grid > a { min-height: var(--gsh-card-minh, 210px); padding: var(--gsh-card-pad, 26px); background: var(--gsh-card-bg, var(--warm-surface)); display: flex; flex-direction: column; justify-content: space-between; transition: background .22s ease, color .22s ease, transform .22s ease; }
.project-type-grid > a:hover { background: var(--gsh-card-hover-bg, var(--black)); color: var(--gsh-card-hover-fg, var(--warm-white)); transform: translateY(-4px); }
.project-type-grid > a:hover span { color: var(--gold-pale); }
.project-type-grid h3 { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1; text-transform: uppercase; }
.project-type-grid span { color: var(--gold); font-family: var(--display); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.inline-cta { padding: var(--gsh-sec-pad-y, 64px) var(--gsh-sec-pad-x, var(--gutter)); display: flex; align-items: center; justify-content: space-between; gap: 50px; background: var(--gsh-sec-bg, var(--gold-pale)); color: var(--gsh-sec-fg, inherit); }
.inline-cta > div { max-width: 850px; }
.inline-cta h2 { margin: 16px 0 10px; font-family: var(--display); font-size: clamp(36px, 4vw, 60px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.inline-cta p { max-width: 720px; margin: 0; color: var(--charcoal); }
.faq-section { background: var(--gsh-sec-bg, var(--paper)); }
.faq-list { border-top: 1px solid var(--black); }
.faq-list details { border-bottom: 1px solid var(--black); }
.faq-list summary { min-height: 76px; padding: 20px 4px; display: grid; grid-template-columns: 50px 1fr auto; gap: 20px; align-items: center; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--gold); font-family: var(--display); font-weight: 900; }
.faq-list summary b { font-family: var(--display); font-size: 22px; line-height: 1.15; text-transform: uppercase; }
.faq-list summary i { font-family: var(--display); font-size: 28px; font-style: normal; transition: transform .2s ease; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p { max-width: 900px; margin: 0 0 24px 70px; color: var(--ink-soft); }
.context-figure { position: relative; min-height: 100%; margin: 0; overflow: hidden; background: var(--charcoal); }
.context-figure::after, .product-context-gallery figure::after, .story-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(13,13,12,.78)); pointer-events: none; }
.context-figure img, .product-context-gallery figure img, .story-visual img { height: 100%; object-fit: cover; filter: saturate(.66) contrast(1.03); transition: transform .45s ease, filter .45s ease; }
.context-figure:hover img, .product-context-gallery figure:hover img, .story-visual:hover img { transform: scale(1.025); filter: saturate(.9) contrast(1.03); }
.context-figure figcaption { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; color: var(--warm-white); font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.context-figure figcaption > span, .context-figure figcaption > small { display: block; margin-bottom: 10px; color: var(--gold-pale); font-size: 10px; line-height: 1.2; letter-spacing: .16em; }
.context-figure figcaption > small { margin: 10px 0 0; color: rgba(255,255,255,.7); font-family: var(--body); font-weight: 400; letter-spacing: .04em; text-transform: none; }

/* Each division keeps the shared brand language but uses a distinct content rhythm. */
.division-page-agile-hospitality .service-grid { grid-template-columns: repeat(2, 1fr); }
.division-page-agile-hospitality .service-grid > div, .division-page-agile-hospitality .service-grid > a { min-height: var(--gsh-card-minh, 170px); display: grid; grid-template-columns: 64px minmax(170px, .8fr) 1fr; gap: 18px; align-items: center; }
.division-page-agile-hospitality .service-grid h3 { margin: 0; }
.division-page-agile-hospitality .service-grid p { font-size: 15px; }
.division-page-agile-hospitality .challenge-section { background: var(--gsh-sec-bg, var(--warm-surface)); }
.division-page-agile-hospitality .process-section { background: var(--gsh-sec-bg, var(--paper)); }

.division-page-agile-business-solutions .service-section { background: var(--gsh-sec-bg, var(--paper)); }
.division-page-agile-business-solutions .service-grid { grid-template-columns: repeat(var(--gsh-grid-cols, 4), 1fr); grid-auto-flow: dense; }
.division-page-agile-business-solutions .service-grid > div, .division-page-agile-business-solutions .service-grid > a { min-height: var(--gsh-card-minh, 250px); }
.division-page-agile-business-solutions .service-grid > div:nth-child(1), .division-page-agile-business-solutions .service-grid > div:nth-child(6), .division-page-agile-business-solutions .service-grid > a:nth-child(1), .division-page-agile-business-solutions .service-grid > a:nth-child(6) { grid-column: span 2; background: var(--warm-surface); }
.division-page-agile-business-solutions .challenge-layout { grid-template-columns: .85fr 1.15fr; }
.division-page-agile-business-solutions .challenge-layout .context-figure { order: -1; }
.division-page-agile-business-solutions .process-layout { grid-template-columns: 1fr; }
.division-page-agile-business-solutions .process-layout .context-figure { min-height: 380px; }
.division-page-agile-business-solutions .process-layout .process-grid { grid-template-columns: repeat(var(--gsh-grid-cols, 3), 1fr); }
.division-page-agile-business-solutions .process-layout .process-grid > div, .division-page-agile-business-solutions .process-layout .process-grid > a { min-height: var(--gsh-card-minh, 270px); }
.division-page-agile-business-solutions .outcome-section .detail-grid { grid-template-columns: 1.35fr .85fr .85fr; }

.division-page-agile-supply-co .service-section { max-width: none; padding-left: var(--gsh-sec-pad-x, var(--gutter)); padding-right: var(--gsh-sec-pad-x, var(--gutter)); background: var(--gsh-sec-bg, var(--black)); color: var(--gsh-sec-fg, var(--warm-white)); }
.division-page-agile-supply-co .service-section .section-heading { max-width: calc(var(--max) - var(--gutter) * 2); margin-left: auto; margin-right: auto; border-color: rgba(255,255,255,.22); }
.division-page-agile-supply-co .service-section .section-heading p { color: var(--warm-surface); }
.division-page-agile-supply-co .service-grid { max-width: calc(var(--max) - var(--gutter) * 2); margin: auto; grid-template-columns: repeat(var(--gsh-grid-cols, 2), 1fr); border-color: var(--gsh-grid-line, rgba(255,255,255,.3)); }
.division-page-agile-supply-co .service-grid > div, .division-page-agile-supply-co .service-grid > a { min-height: var(--gsh-card-minh, 180px); display: grid; grid-template-columns: 64px minmax(160px, .75fr) 1fr; gap: 18px; align-items: center; border-color: var(--gsh-grid-line, rgba(255,255,255,.3)); }
.division-page-agile-supply-co .service-grid .icon-box { border-color: rgba(255, 255, 255, 0.34); }
.division-page-agile-supply-co .service-grid h3 { margin: 0; }
.division-page-agile-supply-co .service-grid p { color: #c7c2b8; font-size: 14px; }
.division-page-agile-supply-co .challenge-layout { grid-template-columns: .9fr 1.1fr; }
.division-page-agile-supply-co .challenge-layout .context-figure { order: -1; }
.division-page-agile-supply-co .outcome-section { background: var(--gsh-sec-bg, var(--black)); }
.division-page-agile-supply-co .outcome-section .detail-grid { grid-template-columns: 1.15fr .85fr .85fr; }

.catalogue-section { padding-bottom: 70px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.filter-row button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--black); background: transparent; font-family: var(--display); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; cursor: pointer; }
.filter-row button[aria-pressed="true"], .filter-row button:hover { background: var(--black); color: var(--warm-white); }
.product-grid { display: grid; grid-template-columns: repeat(var(--gsh-grid-cols, 3), 1fr); gap: var(--gsh-grid-gap, 32px 18px); }
.product-card > div { position: relative; height: var(--gsh-card-minh, 330px); overflow: hidden; background: var(--gsh-card-bg, var(--warm-surface)); }
.product-card img { height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .35s ease; }
.product-card:hover img { transform: scale(1.035); }
.product-card > div span { position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; background: var(--black); color: var(--warm-white); font-family: var(--display); font-weight: 900; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.product-card h3 { margin: 16px 0 8px; font-family: var(--display); font-size: var(--gsh-card-title-size, 28px); line-height: 1; text-transform: uppercase; color: var(--gsh-card-title-color, inherit); }
.product-card p { margin: 0 0 10px; color: var(--gsh-card-copy-color, var(--ink-soft)); }
.product-card b { font-family: var(--display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.all-categories { padding-top: 40px; }
.category-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-showcase button, .category-showcase a { min-height: 430px; padding: 0; display: grid; grid-template-rows: 245px auto auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--black); text-align: left; cursor: pointer; }
.category-showcase img { height: 245px; object-fit: cover; filter: saturate(.68); transition: transform .35s ease, filter .35s ease; }
.category-showcase button:hover img, .category-showcase a:hover img { transform: scale(1.025); filter: saturate(.9); }
.category-showcase span { padding: 20px 20px 0; font-family: var(--display); font-size: 27px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.category-showcase p { margin: 10px 0 0; padding: 0 20px; color: var(--ink-soft); }
.category-showcase b { align-self: end; padding: 18px 20px 20px; font-family: var(--display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.category-availability { margin-top: 28px; padding: 22px 0; display: grid; grid-template-columns: 220px 1fr; gap: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.category-availability span { color: var(--gold); font-family: var(--display); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.category-availability p { margin: 0; color: var(--ink-soft); }
.product-journey { padding-top: 40px; }
.product-journey .detail-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; border: 0; background: transparent; }
.product-journey .detail-grid > div, .product-journey .detail-grid > a { min-height: 270px; padding: 24px 0; border-top: 4px solid var(--gold); background: transparent; }
.product-journey .detail-grid span { font-size: 34px; }
.product-journey .detail-grid h3 { margin-top: 38px; }
.product-detail { max-width: var(--max); margin: auto; padding: 60px var(--gutter); display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; }
.product-gallery { position: relative; display: flex; flex-direction: column; gap: 12px; }
.product-gallery-main { position: relative; min-height: 580px; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.product-gallery-main span { position: absolute; top: 18px; left: 18px; padding: 8px 12px; background: var(--warm-white); font-family: var(--display); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.product-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.product-thumbs li { margin: 0; }
.product-thumbs button { width: 78px; height: 78px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; overflow: hidden; transition: border-color .2s ease; }
.product-thumbs button:hover { border-color: var(--ink-soft); }
.product-thumbs button.is-active { border-color: var(--gold); }
.product-thumbs img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); display: block; }
/* Top-aligned (v2 centres it): this theme's product column carries more content
   than the reference build — product code, key features and the spec list — so the
   title stays level with the top of the gallery instead of floating down the page. */
.product-info { align-self: start; }
.breadcrumb { min-height: 44px; display: inline-flex; align-items: center; color: var(--gold); font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.product-info h1 { font-size: clamp(46px, 4.5vw, 68px); }
.product-code { display: block; margin: -14px 0 18px; color: var(--ink-soft); font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.product-info > p { color: var(--ink-soft); font-size: 20px; }
.product-features { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.product-features li { position: relative; padding-left: 30px; color: var(--black); line-height: 1.45; }
.product-features li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.product-actions .text-link { white-space: nowrap; }
.spec-list { margin: 34px 0 0; border-top: 1px solid var(--line); }
.spec-list div { padding: 14px 0; display: grid; grid-template-columns: 45px 1fr; align-items: baseline; border-bottom: 1px solid var(--line); }
.spec-list .spec-num { color: var(--gold); font-family: var(--display); font-weight: 900; }
.spec-list .spec-text b { font-weight: 700; }
.product-info small { display: block; max-width: 540px; margin-top: 20px; color: var(--ink-soft); }
.product-longform { max-width: 900px; margin: auto; padding: 0 var(--gutter) 20px; }
.product-longform .eyebrow { display: block; margin-bottom: 18px; }
.product-longform-body { color: var(--ink-soft); font-size: 18px; line-height: 1.7; }
.product-longform-body p { margin: 0 0 18px; }
.product-longform-body h2, .product-longform-body h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: -.02em; color: var(--black); margin: 32px 0 12px; }
.product-longform-body ul, .product-longform-body ol { margin: 0 0 18px; padding-left: 22px; }
.product-longform-body li { margin: 0 0 8px; }
.product-longform-body a { color: var(--gold); }
.product-longform-body img { height: auto; margin: 12px 0; }
.product-fit-section { padding-top: 50px; }
.product-context-gallery { max-width: var(--max); margin: auto; padding: 10px var(--gutter) 100px; display: grid; grid-template-columns: .8fr .8fr 1fr; gap: 14px; }
.product-context-gallery figure { position: relative; min-height: 420px; margin: 0; overflow: hidden; background: var(--charcoal); }
.product-context-gallery figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; display: flex; gap: 18px; color: var(--warm-white); font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.product-context-gallery figcaption span { color: var(--gold-pale); }
.product-context-gallery > div { padding: 42px; display: flex; flex-direction: column; justify-content: center; background: var(--charcoal); color: var(--warm-white); }
.product-context-gallery h2 { max-width: 900px; margin: 20px 0; font-family: var(--display); font-size: clamp(34px, 3.4vw, 52px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.product-context-gallery p { margin: 0; color: var(--warm-surface); }

.form-page, .contact-page { min-height: 780px; display: grid; grid-template-columns: .8fr 1.2fr; }
.form-intro, .contact-intro { padding: clamp(72px, 8vw, 130px) var(--gutter); background: var(--black); color: var(--warm-white); }
.form-intro h1, .contact-intro h1 { font-size: clamp(50px, 4.9vw, 74px); }
.form-intro > p, .contact-intro > p { color: var(--warm-surface); font-size: 18px; }
.form-points { margin-top: 48px; display: flex; flex-direction: column; }
.form-points span { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.2); color: var(--gold); }
.form-points b { margin-left: 18px; color: var(--warm-white); font-family: var(--display); text-transform: uppercase; }
.enquiry-form { position: relative; padding: clamp(50px, 6vw, 90px) var(--gutter); display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; background: var(--paper); }
.form-page .enquiry-form { padding-top: clamp(38px, 3.5vw, 52px); padding-bottom: clamp(38px, 3.5vw, 52px); gap: 16px 18px; }
.enquiry-form label { display: flex; flex-direction: column; gap: 8px; }
.enquiry-form label > span { font-family: var(--display); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; font-size: 11px; }
/* Helper line under a field. Body type, NOT the condensed uppercase label
   style above — it is guidance, not a second label. */
.enquiry-form label > small.field-hint { margin-top: -2px; font-family: var(--body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.enquiry-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .enquiry-form select, .enquiry-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--black); border-radius: 0; background: transparent; padding: 12px 3px; color: var(--black); }
.enquiry-form textarea { border: 1px solid var(--black); padding: 14px; resize: vertical; }
.full-field { grid-column: 1 / -1; }
.consent { flex-direction: row !important; align-items: flex-start; }
.consent input { margin-top: 5px; }
/* The consent line is a full sentence, not a field label — keep it readable
   body text, not the uppercase condensed label style. */
.enquiry-form .consent > span { font-family: var(--body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.enquiry-form .button { width: fit-content; }
.optional-fields { border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); }
.optional-fields > summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-family: var(--display); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.optional-fields > summary::-webkit-details-marker { display: none; }
.optional-fields > summary span { color: var(--gold); font-size: 10px; }
.optional-grid { padding: 8px 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
.form-microcopy { margin: -4px 0 0; color: var(--ink-soft); font-size: 12px; }
.enquiry-context { padding: 18px 20px; display: grid; grid-template-columns: 120px 1fr auto; gap: 18px; align-items: center; border-left: 4px solid var(--gold-fill); background: var(--warm-surface); }
.enquiry-context span, .enquiry-context small { color: var(--gold); font-family: var(--display); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.enquiry-context b { font-family: var(--display); font-size: 22px; text-transform: uppercase; }
.enquiry-form ::placeholder { color: #77736d; opacity: 1; }
.honeypot { position: absolute; left: -9999px; }

/* Contact Form 7 forms rendered inside the brand wrapper. CF7 markup varies a
   little, so these rules cover the standard output and inherit the field styling
   above. The wrapper itself is not a grid — the CF7 <form> is. */
.enquiry-form.gsh-cf7 { display: block; }
.enquiry-form.gsh-cf7 .enquiry-context { margin-bottom: 22px; }
.gsh-cf7 .wpcf7-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
.form-page .gsh-cf7 .wpcf7-form { gap: 16px 18px; }
.gsh-cf7 .wpcf7-form > label, .gsh-cf7 .wpcf7-form > p { margin: 0; }
.gsh-cf7 .wpcf7-form > label { display: flex; flex-direction: column; gap: 8px; }
.gsh-cf7 .wpcf7-form > .full-field, .gsh-cf7 .wpcf7-form > p.full-field, .gsh-cf7 .wpcf7-form > label.full-field { grid-column: 1 / -1; }
.gsh-cf7 label > span:first-child { font-family: var(--display); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; font-size: 11px; }
/* CF7 wraps every control in its own <span>. The generic ".enquiry-form label >
   span" label style would otherwise turn that wrapper into 11px condensed
   uppercase — which the input then inherits. Reset it back to body text. */
.gsh-cf7 .wpcf7-form-control-wrap { display: block; width: 100%; font-family: var(--body); font-weight: 400; font-size: 16px; letter-spacing: 0; text-transform: none; line-height: 1.6; }
/* Field text set explicitly (not `font: inherit`) so it always matches the
   built-in form: 16px body type, never the condensed label font. */
.gsh-cf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .gsh-cf7 select, .gsh-cf7 textarea { width: 100%; border: 0; border-bottom: 1px solid var(--black); border-radius: 0; background: transparent; padding: 12px 3px; color: var(--black); font-family: var(--body); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.6; }
.gsh-cf7 textarea { border: 1px solid var(--black); padding: 14px; resize: vertical; min-height: 120px; }
.gsh-cf7 ::placeholder { color: #77736d; opacity: 1; }
/* Consent (acceptance) row: checkbox beside plain body text, not a stacked label.
   CF7 wraps the acceptance in a span that is the label's FIRST child, so the
   generic label-span style above would make the consent sentence tiny/uppercase
   — reset both the wrap span and the actual sentence label to body text. */
/* CF7 nests the consent as: label.consent > wrap > .wpcf7-acceptance >
   .wpcf7-list-item > label > (checkbox + .wpcf7-list-item-label). The generic
   ".enquiry-form label" rule makes that INNER label a flex COLUMN, which stacks
   the checkbox above the text and stretches it. Force the whole chain to a
   simple full-width row: checkbox left, sentence beside it. */
.gsh-cf7 label.consent { display: block; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink-soft); }
.gsh-cf7 label.consent > .wpcf7-form-control-wrap { display: block; width: 100%; }
.gsh-cf7 .wpcf7-acceptance { display: block; width: 100%; }
.gsh-cf7 .wpcf7-acceptance .wpcf7-list-item { display: block; width: 100%; margin: 0; }
.gsh-cf7 .wpcf7-acceptance .wpcf7-list-item > label { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; width: 100%; margin: 0; }
.gsh-cf7 .wpcf7-acceptance input[type="checkbox"] { flex: 0 0 auto; width: auto; min-width: 0; margin: 3px 0 0; }
.gsh-cf7 .wpcf7-acceptance .wpcf7-list-item-label { padding-left: 0; font-family: var(--body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
/* Submit — styled explicitly so it looks like the brand button whether or not
   the CF7 form uses [submit class:button ...]. The .enquiry-form.gsh-cf7 prefix
   raises specificity above the generic .enquiry-form input rule. */
.enquiry-form.gsh-cf7 .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; min-height: 56px; padding: 15px 28px; border: 1px solid var(--black); border-radius: 0; background: var(--black); color: var(--warm-white); font-family: var(--display); font-weight: 900; font-size: 13px; line-height: 1.1; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.enquiry-form.gsh-cf7 .wpcf7-submit:hover { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--black); transform: translateY(-3px); }
/* CF7 status + validation messages, styled like the built-in alerts. */
.gsh-cf7 .wpcf7-response-output { grid-column: 1 / -1; margin: 6px 0 0 !important; padding: 14px 18px !important; border: 0 !important; border-left: 4px solid var(--gold-fill) !important; background: var(--warm-surface); color: var(--charcoal); font-size: 14px; }
.gsh-cf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #b3261e; font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; }
.gsh-cf7 .wpcf7-spinner { margin: 0 0 0 14px; }
.form-alert { grid-column: 1 / -1; padding: 16px 18px; border-left: 4px solid var(--gold-fill); background: var(--warm-surface); color: var(--charcoal); font-size: 14px; }
.form-alert-error { border-color: #a3402f; background: #f6e4df; }
.success-panel { padding: clamp(70px, 9vw, 140px) var(--gutter); background: var(--paper); }
.success-panel > span { color: var(--gold); font-family: var(--display); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.success-panel h2 { margin: 24px 0; }
.contact-details { margin-top: 50px; }
.contact-details > div { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: 110px 1fr; }
.contact-details span { color: var(--gold); font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.contact-details a { min-height: 44px; display: inline-flex; align-items: center; }
.story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; }
.story-grid p { margin: 0 0 20px; color: var(--ink-soft); font-size: 19px; }
.story-grid p:last-child { margin-bottom: 0; }
.story-lead { padding-bottom: 10px; }
.story-points > div { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.story-points b { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 20px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.story-grid .story-points p { margin: 0; font-size: 15px; line-height: 1.6; }
.story-visual { position: relative; min-height: 520px; margin: 0; overflow: hidden; background: var(--charcoal); }
.story-visual figcaption { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 32px; color: var(--warm-white); font-family: var(--display); font-size: clamp(28px, 2.8vw, 44px); font-weight: 900; line-height: 1.02; text-transform: uppercase; }
.story-visual figcaption small { display: block; margin-top: 16px; color: var(--gold-pale); font-family: var(--body); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.value-grid { grid-template-columns: repeat(4, 1fr); }
.value-grid > div, .value-grid > a { min-height: 330px; }
.values-section .value-grid { grid-template-columns: repeat(2, 1fr); gap: 0 54px; border: 0; background: transparent; }
.values-section .value-grid > div, .values-section .value-grid > a { min-height: 220px; padding: 32px 0; display: grid; grid-template-columns: 80px 1fr; align-content: center; border-top: 1px solid var(--black); background: transparent; }
.values-section .value-grid h3 { margin: 0 0 8px; }
.values-section .value-grid p { grid-column: 2; margin: 0; }
.about-proof { padding: 0 var(--gutter) 100px; background: var(--charcoal); }
.not-found { min-height: 680px; padding: 120px var(--gutter); }
.not-found h1 { max-width: 900px; }
.not-found p { max-width: 620px; color: var(--ink-soft); font-size: 20px; }

/* Page-builder + block-editor compatibility: the theme's own images fill their
   fixed-height containers (width:100%), but builder/editor/embedded images must
   keep their natural sizing so Elementor, Gutenberg and shortcodes render right. */
/* Only Elementor's OWN image/media widgets keep natural sizing — the brand
   widgets output theme markup whose images are meant to fill fixed containers. */
.elementor-widget-image img,
.elementor-widget-image-box img,
.gsh-content img,
.entry-content > img,
.wp-block-image img,
.wp-block-gallery img,
.wp-block-cover img,
figure.wp-block-image img { width: auto; max-width: 100%; height: auto; }

/* Elementor's frontend.min.css ships `.elementor img{height:auto}` (same
   specificity as the theme's fill rules but loaded later, so it wins). Re-assert
   the fill height with higher specificity so brand widgets fill their containers
   inside Elementor exactly as they do on the native templates. */
.elementor .hero-visual img,
.elementor .capability-image img,
.elementor .page-hero > img,
.elementor .supply-feature-image > img:first-child,
.elementor .context-figure img,
.elementor .product-context-gallery figure img,
.elementor .story-visual img,
.elementor .product-card img,
.elementor .product-gallery img { height: 100%; }
.elementor .category-showcase img { height: 245px; }

/* Elementor caps its section container at the global content width (~1140–1250px),
   which boxes the brand sections and breaks the layout vs. the original. Let each
   brand widget control its own width instead: full-bleed sections (credibility rail,
   supply feature, page hero, CTA, audience, outcome) reach the viewport edges, and
   boxed sections use their own max-width (1460px), centred — matching the design 1:1.
   Scoped via :has() to sections that contain a GSH widget, so the client's own
   Elementor sections keep normal boxed behaviour. */
/* Matched via the DIRECT column path, not a loose descendant :has(). A plain
   :has([class*=...]) also fires on any OUTER section that merely CONTAINS a
   nested section holding a GSH widget, un-boxing the client's own wrapper
   sections too. */
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > [class*="elementor-widget-gsh"]) > .elementor-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Flexbox-container builds (newer Elementor) — same intent. */
.e-con:has(> .e-con-inner > [class*="elementor-widget-gsh"]) > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* With the container now full-width, the "content-only" brand widgets (which lost
   their original max-width section wrapper) must re-box themselves to 1460, centred,
   with the responsive gutter — so they don't stretch edge-to-edge. Full-bleed
   widgets (hero, credibility, supply feature, CTAs, audience, page hero) are left
   alone and correctly reach the edges. */
.elementor-widget-gsh_service_grid > .elementor-widget-container,
.elementor-widget-gsh_process > .elementor-widget-container,
.elementor-widget-gsh_category_grid > .elementor-widget-container,
.elementor-widget-gsh_project_types > .elementor-widget-container,
.elementor-widget-gsh_capability > .elementor-widget-container,
.elementor-widget-gsh_story > .elementor-widget-container,
.elementor-widget-gsh_product_grid > .elementor-widget-container,
.elementor-widget-gsh_context_figure > .elementor-widget-container {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  /* These widgets sit under a heading widget: the heading supplies the top space,
     so they carry the bottom space to separate from the next section (matches the
     original ~100px section rhythm). */
  padding-bottom: clamp(64px, 8vw, 100px);
}

/* Split "section heading + grid" widgets on Elementor division pages.
   A v2 section such as .service-section is composed in Elementor as TWO widgets:
   a heading widget (renders the section with an inline padding-bottom:0) and a
   grid widget (renders the same section with an inline padding-top:0), so they
   recombine into one panel. When that section carries its own background — dark
   on Agile Supply Co, the light paper panel on Business Solutions/Hospitality —
   two Elementor artefacts split it into three mismatched bands:
     1. the grid widget was re-boxed above (max-width:1460 + gutter), insetting
        its background while the heading widget stayed full-bleed; and
     2. the heading's .section-heading 52px bottom margin collapsed OUT through
        the padding-bottom:0 heading section, opening a page-coloured gap.
   These rules make the two widgets paint one continuous, full-bleed section
   again. Scoped to .division-page and to the inline padding markers the split
   widgets emit, so the native (non-Elementor) templates and other pages that
   render a self-contained section (e.g. the outcome grid) are left untouched. */
.division-page .elementor-widget-gsh_service_grid:has(> .elementor-widget-container > [class*="-section"]) > .elementor-widget-container,
.division-page .elementor-widget-gsh_category_grid:has(> .elementor-widget-container > [class*="-section"]) > .elementor-widget-container,
.division-page .elementor-widget-gsh_project_types:has(> .elementor-widget-container > [class*="-section"]) > .elementor-widget-container,
.division-page .elementor-widget-gsh_process:has(> .elementor-widget-container > [class*="-section"]) > .elementor-widget-container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Kill the collapsed-margin gap, then carry the heading->grid spacing INSIDE the
   grid section's own background (mirrors the .section-heading 52px rhythm). */
.division-page [class*="-section"][style*="padding-bottom:0"] > .section-heading { margin-bottom: 0; }
.division-page [class*="-section"][style*="padding-top:0"] { padding-top: 52px !important; }

/* Block-editor content on the Full-Width template keeps readable spacing */
.gsh-content-fullwidth { max-width: var(--max); margin: auto; padding: 70px var(--gutter); }
.gsh-content-fullwidth .alignfull { max-width: none; }

/* Generic page + blog fallback (page.php / index.php) */
.gsh-page { max-width: 940px; margin: auto; padding: 90px var(--gutter); }
.gsh-page-head { margin-bottom: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.gsh-page-head h1 { margin: 16px 0 0; font-family: var(--display); font-size: clamp(42px, 4.5vw, 68px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.gsh-content { color: var(--charcoal); font-size: 17px; line-height: 1.7; }
.gsh-content p { margin: 0 0 18px; }
.gsh-content h2 { font-family: var(--display); text-transform: uppercase; color: var(--black); font-size: 34px; line-height: 1; margin: 34px 0 12px; }
.gsh-content h3 { font-family: var(--display); text-transform: uppercase; color: var(--black); font-size: 24px; margin: 26px 0 10px; }
.gsh-content a { color: var(--gold); border-bottom: 1px solid var(--gold); }
.gsh-content ul, .gsh-content ol { padding-left: 22px; }
.gsh-content li { margin: 6px 0; }
.gsh-content img { margin: 22px 0; }
.gsh-list-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.gsh-list-item h2 { font-family: var(--display); text-transform: uppercase; font-size: 30px; margin: 0 0 8px; }
.gsh-list-item h2 a { color: var(--black); border: 0; }

/* -------------------------------------------------------------------------
   Generic division panel styles.

   The three original divisions have bespoke CSS keyed to their slug. A
   division added later has no such rules, so these give it the same designed
   treatment from a dropdown ("Section style" on the page). Slug-specific rules
   above still win for the original three.
   ------------------------------------------------------------------------- */
.division-panel-paper .service-section { background: var(--gsh-sec-bg, var(--paper)); }
.division-panel-dark .service-section { max-width: none; padding-left: var(--gsh-sec-pad-x, var(--gutter)); padding-right: var(--gsh-sec-pad-x, var(--gutter)); background: var(--gsh-sec-bg, var(--black)); color: var(--gsh-sec-fg, var(--warm-white)); }
.division-panel-dark .service-section .section-heading { max-width: calc(var(--max) - var(--gutter) * 2); margin-left: auto; margin-right: auto; border-color: rgba(255,255,255,.22); }
.division-panel-dark .service-section .section-heading p { color: var(--warm-surface); }
.division-panel-dark .service-grid { max-width: calc(var(--max) - var(--gutter) * 2); margin: auto; border-color: var(--gsh-grid-line, rgba(255,255,255,.3)); }
.division-panel-dark .service-grid > div, .division-panel-dark .service-grid > a { border-color: var(--gsh-grid-line, rgba(255,255,255,.3)); }
.division-panel-dark .service-grid .icon-box { border-color: rgba(255,255,255,.34); }
.division-panel-dark .service-grid p { color: #c7c2b8; }

/* Footer logo flipped to white, for sites with only a dark logo file.
   brightness(0) crushes every colour to black, then invert(1) lifts it to
   white — so any solid single-colour mark comes out clean white regardless of
   its original colour. Transparency is preserved. */
.site-footer .brand-logo-img.is-inverted { filter: brightness(0) invert(1); }

/* Holding-company credit on division pages. Deliberately quiet — a legal
   footnote, not a brand statement — and it sits on the page background so it
   reads as a closing note rather than part of the footer. */
.division-credit { max-width: var(--max); margin: auto; padding: 0 var(--gutter) 54px; }
.division-credit span { display: inline-block; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--ink-soft); }

/* Catalogue "we can source to your brief" prompt. Sits inside the catalogue
   section under the grid, so it reads as part of the range rather than a
   footer CTA. Bordered rather than filled, so it does not compete with the
   gold inline-cta further down the page. */
.sourcing-cta { margin-top: 46px; padding: var(--gsh-card-pad, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid var(--gsh-grid-line, var(--black)); background: var(--gsh-card-bg, var(--warm-white)); }
.sourcing-cta > div { max-width: 760px; }
.sourcing-cta h2 { margin: 12px 0 0; font-family: var(--display); font-size: var(--gsh-card-title-size, clamp(28px, 2.6vw, 40px)); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.sourcing-cta p { margin: 14px 0 0; color: var(--gsh-card-copy-color, var(--ink-soft)); font-size: 16px; }
.sourcing-cta .button { flex: none; }

/* -------------------------------------------------------------------------
   Icon colour re-assertion.

   Each grid colours its eyebrow <span> at specificity (0,2,0), and the icon
   box IS a span inside that grid — so those rules also capture the icon and
   beat the (0,1,0) .icon-box rule. Identical colours today, so it was
   invisible; but it would make the Style tab's "Glyph colour" control appear
   to do nothing inside a grid.

   These must sit AFTER every grid block to win on source order at equal
   specificity — do not move them back up next to .icon-box. Fallbacks are the
   colours each icon already renders, so nothing changes until the control is
   used. The light group is listed first so the dark group still wins where
   both match (e.g. .detail-grid-dark).
   ------------------------------------------------------------------------- */
.service-grid .icon-box, .process-grid .icon-box, .value-grid .icon-box, .detail-grid .icon-box, .category-grid .icon-box, .capability-list .icon-box, .story-points .icon-box { color: var(--gsh-icon-color, var(--gold)); }
.detail-grid-dark .icon-box, .credibility-rail .icon-box, .procurement-options .icon-box { color: var(--gsh-icon-color, var(--gold-pale)); }

@media (max-width: 1120px) {
  .nav-shell { grid-template-columns: 1fr auto auto; }
  .nav-shell-nobutton { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { min-width: 74px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--black); list-style: none; cursor: pointer; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
  .mobile-menu nav { position: absolute; top: 48px; right: 0; width: min(320px, 82vw); padding: 10px; background: var(--black); color: var(--warm-white); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
  .mobile-menu nav a { display: block; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.15); }
  .mobile-menu nav a[aria-current="page"], .mobile-menu nav a.current-menu-item { color: var(--gold-pale); background: var(--charcoal); }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); padding-top: 48px; }
  .hero-visual { min-height: 520px; }
  .service-grid, .category-grid { grid-template-columns: repeat(2, 1fr); }
  .engagement-section .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .division-page-agile-business-solutions .service-grid { grid-template-columns: repeat(2, 1fr); }
  .product-journey .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .category-showcase { grid-template-columns: repeat(2, 1fr); }
.capability-list > div, .capability-list > a { grid-template-columns: 42px 130px 1fr; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-top > div:last-child { grid-column: 2; }
}

@media (max-width: 820px) {
  /* Hide the SECOND utility span only — so a bar with just one message stays visible. */
  .utility span:first-child ~ span, .nav-shell > .button { display: none; }
  .mobile-quote-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 15px 20px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); background: var(--gold-fill); color: var(--black); font-family: var(--display); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; font-size: 13px; box-shadow: 0 -6px 22px rgba(13,13,12,.2); }
  .site-footer { padding-bottom: 96px; }
  .utility { justify-content: center; }
  .nav-shell { min-height: 74px; grid-template-columns: 1fr auto; }
  .brand b { font-size: 12px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 50px; }
  .hero-copy h1, .page-hero h1, .form-page h1, .contact-page h1 { font-size: clamp(50px, 8vw, 58px); }
  .hero-copy > p { padding-left: 18px; font-size: 17px; }
  .hero-visual { height: 340px; min-height: 0; }
  .hero-division-rail { margin-top: 26px; }
  .hero-division-rail a { min-height: 72px; padding: 10px; grid-template-columns: 24px 1fr; }
  .hero-division-rail b { font-size: 11px; }
  .hero-division-rail small { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .division-grid, .product-grid, .project-type-grid, .detail-grid { grid-template-columns: 1fr; }
  .division-card { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--black); }
  .division-card:last-child { border-bottom: 0; }
  .credibility-rail { grid-template-columns: repeat(2, 1fr); }
.credibility-rail > div, .credibility-rail > a { min-height: 150px; border-bottom: 1px solid rgba(255,255,255,.16); }
  .credibility-rail > div:nth-child(2n) { border-right: 0; }
  .credibility-rail > div:last-child { border-bottom: 0; }
  .capability-layout, .supply-feature, .page-hero, .audience-section, .procurement-section, .product-detail, .form-page, .contact-page, .story-grid, .engagement-layout, .challenge-layout, .process-layout { grid-template-columns: 1fr; }
.capability-list > div, .capability-list > a { grid-template-columns: 38px 1fr; }
  .capability-list p { grid-column: 2; }
  .page-hero { height: auto; min-height: 0; overflow: visible; }
  .page-hero > div { padding-top: 58px; padding-bottom: 58px; }
  .supply-feature-image { min-height: 420px; }
  /* The .elementor fill-height fix above is scoped tighter than this rule, so it
     would keep stretching the hero image once the layout stacks. Re-assert the
     stacked height at matching specificity. */
  .page-hero > img, .elementor .page-hero > img { height: 360px; min-height: 0; }
  .service-grid, .category-grid, .process-grid, .value-grid { grid-template-columns: repeat(2, 1fr); }
  .procurement-options { grid-template-columns: 1fr; }
  .procurement-options > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.4); }
  .inline-cta { align-items: flex-start; flex-direction: column; }
  .context-figure { min-height: 430px; }
  .story-visual { min-height: 460px; }
  .division-page-agile-business-solutions .challenge-layout, .division-page-agile-supply-co .challenge-layout { grid-template-columns: 1fr; }
  .division-page-agile-hospitality .service-grid, .division-page-agile-supply-co .service-grid { grid-template-columns: 1fr; }
  .division-page-agile-business-solutions .process-layout .process-grid { grid-template-columns: 1fr; }
  .division-page-agile-business-solutions .outcome-section .detail-grid, .division-page-agile-supply-co .outcome-section .detail-grid { grid-template-columns: 1fr; }
  .product-context-gallery { grid-template-columns: 1fr 1fr; }
  .product-context-gallery > div { grid-column: 1 / -1; }
  .product-detail { padding-top: 50px; padding-bottom: 50px; }
  .product-gallery-main { min-height: 400px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-col-brand { padding-right: 0; }
}

@media (max-width: 520px) {
  .brand small { display: none; }
  .brand-box { width: 38px; height: 38px; }
  .hero, .operating-model, .confidence-section, .capability-section, .engagement-section, .service-section, .challenge-section, .outcome-section, .supply-categories, .process-section, .project-types, .catalogue-section, .all-categories, .product-journey, .product-fit-section, .related-products, .story-section, .values-section, .contact-division-links, .faq-section, .product-detail { padding-left: 20px; padding-right: 20px; }
  .hero-copy h1, .page-hero h1, .form-page h1, .contact-page h1 { font-size: 42px; line-height: .94; }
  .hero-copy > p { line-height: 1.5; }
  .hero-visual { height: 290px; min-height: 0; }
  .hero-division-rail { margin-top: 18px; }
  .hero-division-rail a { min-height: 68px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
  .hero-division-rail span { grid-row: auto; }
  .hero-division-rail b { font-size: 10px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .section-heading h2, .supply-feature h2, .final-cta h2, .audience-section h2, .procurement-section h2 { font-size: 40px; }
  /* Same token as the desktop rule, with the condensed default as the fallback.
     An Elementor value set on the wrapper inherits in and wins here too, so a
     custom padding is honoured at every width; set a responsive value in
     Elementor to differ on mobile. Deliberately NOT a hard override. */
  .operating-model, .confidence-section, .capability-section, .engagement-section, .service-section, .challenge-section, .outcome-section, .supply-categories, .process-section, .project-types, .catalogue-section, .all-categories, .product-journey, .product-fit-section, .related-products, .story-section, .values-section, .contact-division-links, .faq-section { padding-top: var(--gsh-sec-pad-y, 64px); padding-bottom: var(--gsh-sec-pad-y, 64px); }
  .credibility-rail, .service-grid, .category-grid, .process-grid, .value-grid { grid-template-columns: 1fr; }
  .credibility-rail > div { border-right: 0; }
.capability-list > div, .capability-list > a { padding: 20px; }
  .audience-section, .procurement-section { gap: 44px; }
  .form-intro, .contact-intro { padding-top: 52px; padding-bottom: 52px; }
  .enquiry-form { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .enquiry-form label, .full-field, .optional-grid { grid-column: 1; }
  .optional-grid { grid-template-columns: 1fr; }
  .enquiry-context { grid-template-columns: 1fr; gap: 4px; }
  .engagement-section .detail-grid { grid-template-columns: 1fr; }
.detail-grid > div, .detail-grid > a { min-height: 240px; }
  .inline-cta { padding: 52px 20px; }
  .sourcing-cta { margin-top: 30px; padding: 28px 22px; gap: 22px; }
  .sourcing-cta .button { width: 100%; }
  .faq-list summary { grid-template-columns: 36px 1fr auto; gap: 10px; }
  .faq-list summary b { font-size: 19px; }
  .faq-list details p { margin-left: 46px; }
  .context-figure { min-height: 340px; }
  .context-figure figcaption { left: 20px; right: 20px; bottom: 20px; font-size: 21px; }
  .story-visual { min-height: 390px; }
  .story-visual figcaption { left: 22px; right: 22px; bottom: 22px; font-size: 28px; }
  .product-context-gallery h2 { font-size: 40px; }
  .product-context-gallery { padding: 0 20px 64px; grid-template-columns: 1fr; }
  .product-context-gallery figure { min-height: 280px; }
  .product-context-gallery > div { grid-column: auto; padding: 32px 24px; }
  .footer-top { grid-template-columns: 1fr; }
  /* Stack the bottom-bar groups so no divider ever lands at the start of a wrapped line. */
  .footer-bottom-left, .footer-bottom-right { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom-left > * + *, .footer-bottom-right > * + * { margin-left: 0; padding-left: 0; border-left: 0; }
  .page-hero > div { padding-top: 50px; padding-bottom: 50px; }
  .page-hero > img, .elementor .page-hero > img { height: 300px; min-height: 0; }
  .product-detail { padding-top: 38px; padding-bottom: 44px; gap: 38px; }
  .product-gallery-main { min-height: 330px; }
  .product-thumbs button { width: 62px; height: 62px; }
  .product-info h1 { font-size: 42px; }
  .product-card > div { height: 280px; }
  .division-page-agile-hospitality .service-grid, .division-page-agile-business-solutions .service-grid, .division-page-agile-supply-co .service-grid { grid-template-columns: 1fr; }
.division-page-agile-business-solutions .service-grid > div:nth-child(1), .division-page-agile-business-solutions .service-grid > div:nth-child(6), .division-page-agile-business-solutions .service-grid > a:nth-child(1), .division-page-agile-business-solutions .service-grid > a:nth-child(6) { grid-column: span 1; }
.division-page-agile-hospitality .service-grid > div, .division-page-agile-supply-co .service-grid > div, .division-page-agile-hospitality .service-grid > a, .division-page-agile-supply-co .service-grid > a { min-height: 200px; grid-template-columns: 56px 1fr; align-content: center; gap: 14px 16px; }
  .division-page-agile-hospitality .service-grid p, .division-page-agile-supply-co .service-grid p { grid-column: 2; }
  .division-page-agile-supply-co .service-section { padding-left: 20px; padding-right: 20px; }
  .product-journey .detail-grid, .values-section .value-grid { grid-template-columns: 1fr; }
  .category-showcase { grid-template-columns: 1fr; }
  .category-showcase button, .category-showcase a { min-height: 410px; }
  .category-availability { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================================
   Motion — scroll reveals + micro-interactions.

   The hidden start state only applies when BOTH are true:
     1. the visitor has NOT asked for reduced motion (the media query), and
     2. <html> carries .gsh-anim, which header.php adds before first paint
        (skipped inside the Elementor editor, and absent if JS is disabled).
   So content is ALWAYS visible without JS, and nothing is hidden while editing.
   assets/js/main.js then adds .is-visible as each element scrolls into view.

   The hero is deliberately excluded so the first paint is instant (protects LCP).
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* IMPORTANT: grids whose borders are drawn by a shared black background or by
     each cell's own border (detail-grid, service-grid, category-grid, process/
     value-grid, credibility-rail, procurement-options, capability-list, faq-list,
     spec-list, the division cards) are revealed as WHOLE CONTAINERS. Fading in
     their individual cells would translate each cell out of place mid-animation
     and expose the background / misalign the grid lines. Only self-contained
     cards that sit in a real gap (product cards, showcase cards, figures) are
     revealed per item. Keep this list in sync with REVEAL_SELECTOR in main.js. */
  .gsh-anim .section-heading,
  .gsh-anim .division-grid,
  .gsh-anim .credibility-rail,
  .gsh-anim .detail-grid,
  .gsh-anim .service-grid,
  .gsh-anim .category-grid,
  .gsh-anim .process-grid,
  .gsh-anim .value-grid,
  .gsh-anim .procurement-options,
  .gsh-anim .capability-image,
  .gsh-anim .capability-list,
  .gsh-anim .context-figure,
  .gsh-anim .product-context-gallery figure,
  .gsh-anim .product-card,
  .gsh-anim .category-showcase button,
  .gsh-anim .category-showcase a,
  .gsh-anim .project-type-grid,
  .gsh-anim .tag-list,
  .gsh-anim .faq-list,
  .gsh-anim .spec-list,
  .gsh-anim .inline-cta,
  .gsh-anim .final-cta,
  .gsh-anim .supply-feature,
  .gsh-anim .story-visual,
  .gsh-anim .footer-top > div {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
  }
  /* Revealed state. opacity keeps !important as a safety net (nothing competes
     with it), but transform is NOT !important so the hover-lift rules below can
     still take over on cards/tiles that are also reveal targets. */
  .gsh-anim .is-visible { opacity: 1 !important; transform: none; }
}

/* Micro-interactions — subtle, and they degrade to nothing without hover. */
.product-card { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.product-card:hover { transform: translateY(-5px); }
.category-showcase button, .category-showcase a { transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease; }
.category-showcase button:hover, .category-showcase a:hover { transform: translateY(-5px); border-color: var(--gold-fill); }
.tag-list span, .tag-list > a { transition: border-color .22s ease, background .22s ease, transform .22s ease; }
.tag-list span:hover, .tag-list > a:hover { border-color: var(--gold-fill); background: var(--warm-white); transform: translateY(-2px); }
.text-link { transition: color .22s ease, border-color .22s ease; }
.text-link:hover { color: var(--gold); border-color: var(--gold); }

/* Panels that open: gentle slide-down rather than an abrupt jump. */
@keyframes gsh-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.faq-list details[open] > p { animation: gsh-slide-down .35s cubic-bezier(.22,.61,.36,1) both; }
.nav-details[open] > .nav-panel { animation: gsh-slide-down .22s ease both; }
.mobile-menu[open] > nav { animation: gsh-slide-down .22s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Linked grid items (Elementor "Link" on a card). They inherit the exact card
   styling above; this just adds a pointer + subtle lift so they read clickable. */
.detail-grid > a, .service-grid > a, .value-grid > a, .process-grid > a,
.capability-list > a, .credibility-rail > a {
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease;
}
.detail-grid > a:hover, .service-grid > a:hover, .value-grid > a:hover,
.process-grid > a:hover, .capability-list > a:hover { background: var(--paper); }
.credibility-rail > a:hover { background: var(--charcoal); }

/* =========================================================================
   BLOG / ARCHIVE / SEARCH / COMMENTS
   Future-proofing: on-brand templates for posts, archives, search and
   comments so the site can grow into blogs, insights or service detail
   pages without any redesign work.
   ========================================================================= */
.gsh-archive, .gsh-single { max-width: var(--max); margin: auto; padding: 80px var(--gutter); }
.gsh-page-head { max-width: 900px; margin-bottom: 56px; }
.gsh-page-head h1 { margin: 18px 0 0; font-family: var(--display); font-size: clamp(46px, 5vw, 82px); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.gsh-archive-intro, .gsh-archive-search { margin-top: 20px; color: var(--ink-soft); }

/* Post grid (archive + search) */
.gsh-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 26px; }
.gsh-post-card { display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.gsh-post-card:hover { transform: translateY(-5px); }
.gsh-post-card-media { height: 260px; overflow: hidden; background: var(--warm-surface); }
.gsh-post-card-media img { height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .35s ease; }
.gsh-post-card:hover .gsh-post-card-media img { transform: scale(1.035); }
.gsh-post-card-date { margin: 16px 0 6px; color: var(--gold); font-family: var(--display); font-weight: 900; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.gsh-post-card h2 { margin: 0 0 8px; font-family: var(--display); font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.gsh-post-card p { margin: 0 0 10px; color: var(--ink-soft); }
.gsh-post-card b { font-family: var(--display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* Single post */
.gsh-single-head { max-width: 900px; margin-bottom: 34px; }
.gsh-single-head h1 { margin: 18px 0 14px; font-family: var(--display); font-size: clamp(44px, 4.8vw, 76px); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.gsh-single-meta { color: var(--ink-soft); font-size: 14px; }
.gsh-single-media { margin: 0 0 44px; max-height: 560px; overflow: hidden; }
.gsh-single-media img { height: 100%; object-fit: cover; }
.gsh-single-body { max-width: 820px; font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.gsh-single-tags { margin-top: 40px; }
.gsh-single-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }

/* Long-form content typography (posts, and any block-editor page) */
.gsh-content h2 { margin: 44px 0 14px; font-family: var(--display); font-size: 34px; line-height: 1.05; text-transform: uppercase; color: var(--black); }
.gsh-content h3 { margin: 34px 0 12px; font-family: var(--display); font-size: 26px; text-transform: uppercase; color: var(--black); }
.gsh-content p { margin: 0 0 20px; }
.gsh-content ul, .gsh-content ol { margin: 0 0 22px; padding-left: 22px; }
.gsh-content li { margin: 0 0 8px; }
.gsh-content a { color: var(--gold); border-bottom: 1px solid rgba(128,97,58,.4); }
.gsh-content a:hover { color: var(--black); border-color: var(--black); }
.gsh-content blockquote { margin: 30px 0; padding: 20px 26px; border-left: 4px solid var(--gold-fill); background: var(--paper); }
.gsh-content img { height: auto; margin: 26px 0; }
.gsh-content figure { margin: 26px 0; }

/* Comments */
.gsh-comments { max-width: 820px; margin: 0 auto 80px; padding: 0 var(--gutter); }
.gsh-comments-title { margin: 40px 0 22px; font-family: var(--display); font-size: 28px; text-transform: uppercase; }
.gsh-comment-list { list-style: none; margin: 0; padding: 0; }
.gsh-comment-list li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.gsh-comment-list .children { list-style: none; margin: 18px 0 0 28px; padding: 0; }
.gsh-comments input[type="text"], .gsh-comments input[type="email"], .gsh-comments input[type="url"], .gsh-comments textarea { width: 100%; border: 0; border-bottom: 1px solid var(--black); background: transparent; padding: 12px 3px; font-family: var(--body); font-size: 16px; }
.gsh-comments textarea { border: 1px solid var(--black); padding: 14px; }
.gsh-empty { color: var(--ink-soft); }

/* Pagination (archives, search, comments) */
.pagination, .comments-pagination { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px; font-family: var(--display); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.pagination .page-numbers, .comments-pagination .page-numbers { min-width: 44px; min-height: 44px; padding: 12px 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.pagination .page-numbers.current, .comments-pagination .page-numbers.current { background: var(--black); color: var(--warm-white); border-color: var(--black); }
.pagination a.page-numbers:hover { border-color: var(--gold-fill); }

@media (max-width: 1120px) { .gsh-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px)  { .gsh-archive, .gsh-single { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 640px)  { .gsh-post-grid { grid-template-columns: 1fr; } }