/* Medhurst Communications - Website Mockup
   Design system derived from MCL Brand Standards v0.9.
   Colours, typography, logo rules and contrast follow the brand standard.
   This is a static mockup intended to feed Figma (Phase 1) and Webflow (Phase 2). */

:root {
  color-scheme: light;

  /* Primary palette */
  --blue: #1F487C;
  --teal: #76B5C2;
  --orange: #E18D47;
  --orange-text: #9C5416; /* accessible orange for text on light backgrounds (5.7:1 on white, WCAG AA) */
  --grey: #999999;

  /* Extended palette */
  --deep-navy: #0D2B4E;
  --sky-blue: #C5D8EC;
  --pale-blue: #EBF3FB;
  --dark-teal: #2C6470; /* was #4A8E9B; darkened 22 Oct 2026 (D-266), then aligned to the DTS Teal (text) token #2C6470 on 27 Oct 2026 (D-267), so small bold labels and citations meet WCAG AA 4.5:1 on white and the pale tints */
  --light-teal: #D8EFF3;
  --amber: #F5BC7D;
  --pale-orange: #FAE8D3;
  --charcoal: #2C2C2C;
  --off-white: #F8F9FA;
  --white: #FFFFFF;

  /* Roles */
  --text: var(--charcoal);
  --text-muted: #5d6b7a;
  --bg: var(--white);
  --line: #e4e9f0;

  --maxw: 1200px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(13,43,78,0.08), 0 1px 2px rgba(13,43,78,0.04);
  --shadow-md: 0 6px 24px rgba(13,43,78,0.10);
  --shadow-lg: 0 18px 48px rgba(13,43,78,0.16);

  /* Aptos is the brand primary font; Arial is the approved web fallback. */
  --font: "Aptos", "Segoe UI", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Accessibility: skip link and visible focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 3px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--blue); line-height: 1.18; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
main p a, main li a:not(.btn):not(.card-link):not(.nav-link):not(.dropdown a) { text-decoration: underline; } /* in-text links distinguishable by more than colour (WCAG 1.4.1); li added D-266 */
img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 54px 0; }
.section--tight { padding: 36px 0; }
.section--navy { background: var(--deep-navy); color: #dfe8f3; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--blue { background: var(--blue); color: #e7eef7; }
.section--blue h2, .section--blue h3 { color: #fff; }
.section--pale { background: var(--pale-blue); }
.section--offwhite { background: var(--off-white); }
.section--lightteal { background: var(--light-teal); }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2C6470;
  margin-bottom: .9rem;
}
.section--navy .eyebrow, .section--blue .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: #B7DDE6; }
.lead { font-size: 1.18rem; color: var(--text-muted); max-width: 60ch; }
.section--navy .lead, .section--blue .lead { color: #cdd9e8; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.measure { max-width: 70ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 1rem;
  padding: 13px 26px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #18395f; box-shadow: var(--shadow-md); color:#fff; }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn--on-dark { background: #fff; color: var(--blue); }
.btn--on-dark:hover { background: var(--pale-blue); color: var(--blue); }
.btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.12); color:#fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.4rem; }
.arrow::after { content: "\2192"; font-weight: 600; }

/* ---------- Header ---------- */
/* Header overflow fix (D-251): the desktop header needs ~1,250px, so its container caps at 1400px
   while the page container stays at 1200px. Sized so the worst case (1334px viewport, the mobile
   breakpoint boundary) still carries ~35px slack. */
.site-header .container { max-width: 1400px; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 16px; height: 92px; }
.brand-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.brand-logo img { height: 64px; width: auto; max-width: none; object-fit: contain; flex: 0 0 auto; }
.primary-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 7px; border-radius: 7px; white-space: nowrap;
  color: var(--charcoal); font-weight: 600; font-size: .8rem;
}
.nav-link:hover, .nav-item:hover .nav-link { background: var(--pale-blue); color: var(--blue); text-decoration: none; }
.nav-item.active > .nav-link { color: var(--blue); }
.nav-link .caret { font-size: .6rem; opacity: .6; transition: transform .15s ease; }
.nav-item:hover .nav-link .caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 264px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .16s ease;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 9px 12px; border-radius: 7px; color: var(--charcoal); font-size: .92rem; font-weight: 500; }
.dropdown a:hover { background: var(--pale-blue); color: var(--blue); text-decoration: none; }
.dropdown a small { display:block; color: var(--text-muted); font-weight: 400; font-size: .78rem; }
.header-cta { margin-left: 6px; padding: 9px 16px; font-size: .84rem; white-space: nowrap; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2.5px; background: var(--blue); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--deep-navy); color: #fff; overflow: hidden; }
.hero-carousel { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide svg, .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,43,78,.92) 0%, rgba(13,43,78,.78) 38%, rgba(13,43,78,.30) 70%, rgba(13,43,78,.12) 100%); }
/* Longhand on purpose (staging fix by IT, 7 September 2026, D-252): .hero-inner shares its element with
   .container, and the shorthand 'padding: 96px 0 104px' zeroed the container's 24px side padding,
   so hero text touched the screen edge on mobile. */
.hero-inner { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 104px; }
.hero-panel { max-width: 620px; text-align: left; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.35rem); }
.hero .subhead { font-size: 1.16rem; color: #cdd9e8; max-width: 48ch; margin-bottom: 1.6rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; }
.hero-stat .num { font-size: 2.3rem; font-weight: 700; color: var(--amber); line-height: 1; }
.hero-stat .lab { font-size: .9rem; color: #b9c7da; margin-top: 6px; max-width: 18ch; }
.hero-dots { position: absolute; bottom: 22px; right: 24px; z-index: 3; display: flex; gap: 8px; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.hero-dots button.is-active { background: var(--amber); }

/* page hero (interior, lighter) */
.page-hero { background: var(--blue); color: #fff; position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; right:-120px; top:-80px; width:520px; height:520px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(118,181,194,.45), transparent 60%); }
.page-hero .inner { position: relative; z-index: 2; padding: 48px 0 52px; max-width: 720px; text-align: left; }
/* Partner logo in the hero (HSAV on the AV page). Repositioned on Sean's instruction, 30 July 2026
   (D-192): dominant, vertically centred in the banner, right edge on the container's right content
   line, which is the line the stat strip below (ending in the Supported column) runs to. The right
   offset mirrors .container: max-width 1200px centred with 24px side padding. The logo asset is the
   full-colour transparent mark whose lettering is #173D71 against the hero's #1F487C, so the tile
   supplies a white ground via CSS. */
.hero-brand { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: block;
  right: max(24px, calc((100% - 1200px) / 2 + 24px));
  background: #fff; border-radius: 8px; padding: 12px 18px; }
.hero-brand img { height: 120px; width: auto; display: block; }
/* Below 1140px the hero text column no longer leaves room for a centred badge, so it becomes a
   small top-right mark clear of the breadcrumbs. */
@media (max-width: 1140px) {
  .hero-brand { top: 12px; right: 16px; transform: none; padding: 6px 10px; }
  .hero-brand img { height: 44px; }
}
@media (max-width: 620px) { .hero-brand img { height: 32px; } }
/* Links inside a hero lead (the HSAV link on the AV page) inherit legible colouring on navy. */
.page-hero .lead a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* Group logo grid in the why-group hero, two by two, vertically centred right (D-192). Fixed tile
   boxes with contained images because the four marks have very different aspect ratios (EdEquity is
   6.7:1, Drift 1.7:1); uniform boxes keep the grid square and calm. Hidden below 1140px where the
   hero text needs the width. */
.hero-brandgrid { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  right: max(24px, calc((100% - 1200px) / 2 + 24px));
  display: grid; grid-template-columns: repeat(2, 176px); gap: 12px; }
.hero-brandgrid .t { background: #fff; border-radius: 6px; height: 68px;
  display: flex; align-items: center; justify-content: center; padding: 8px 14px; }
.hero-brandgrid .t img { max-height: 46px; max-width: 100%; width: auto; }
@media (max-width: 1140px) { .hero-brandgrid { display: none; } }
/* Company mark in the top right of the group tiles (D-192). Cards are white, the marks are
   transparent, so they sit direct with no tile. Title and tag keep clear of the mark. */
.card--brand { position: relative; }
.card--brand .card-brand { position: absolute; top: 20px; right: 20px; }
.card--brand .card-brand img { height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.card--brand .card-tag, .card--brand h3 { max-width: calc(100% - 160px); }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #d4e0ef; }
.page-hero--navy { background: var(--deep-navy); }

/* Tier 1 hero carousel (D-105): photo carousel behind a navy scrim, left-aligned text */
.page-hero--carousel { background: var(--deep-navy); }
.page-hero--carousel::after { display: none; }
.page-hero--carousel .inner { padding: 72px 0 76px; min-height: 280px; }
.page-hero--carousel .hero-scrim { background: linear-gradient(90deg, rgba(13,43,78,.92) 0%, rgba(13,43,78,.80) 40%, rgba(13,43,78,.42) 72%, rgba(13,43,78,.22) 100%); }

/* breadcrumb */
.crumbs { font-size: .82rem; color: #bcccdf; margin-bottom: 14px; }
.crumbs a { color: #bcccdf; }
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .6; padding: 0 6px; }

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex; flex-direction: column;
  position: relative;
}
/* Tile infographics (D-104): top-right corner, decorative (alt="") */
.card-info { position: absolute; top: 16px; right: 16px; width: 72px; height: 72px; object-fit: contain; }
.card--hasinfo h3 { padding-right: 78px; }
/* GCA Supplier credential (D-114): master artwork on white, clear space, blue on light */
.gca-credential { display:flex; align-items:center; gap:32px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px 34px; max-width:720px; }
.gca-credential img { width:190px; height:auto; flex:0 0 auto; }
.gca-credential p { color: var(--text-muted); font-size:.96rem; margin:0; }
@media (max-width:560px){ .gca-credential{ flex-direction:column; align-items:flex-start; gap:18px; } }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky-blue); }
.card h3 { font-size: 1.18rem; margin-bottom: .4rem; }
.card p { color: var(--text-muted); font-size: .96rem; }
.card .card-link { margin-top: auto; font-weight: 600; color: var(--blue); padding-top: 12px; }
.card--link { cursor: pointer; }
.card .ico { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--light-teal); margin-bottom: 16px; }
.card .ico svg { width: 24px; height: 24px; stroke: var(--dark-teal); fill: none; stroke-width: 1.8; }
.card-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: #2C6470; background: var(--light-teal); padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; align-self:flex-start; }

.org-card { background: #fff; border:1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px; padding: 22px 24px; position: relative; }
.org-card.p1 { border-left-color: var(--orange); }
.org-info { position: absolute; top: 12px; right: 12px; width: 58px; height: 58px; object-fit: contain; }
.org-card.has-info h3, .org-card.has-info p { padding-right: 64px; }
.org-card h3 { font-size: 1.12rem; margin-bottom: .25rem; }
.org-card p { color: var(--text-muted); font-size: .92rem; margin-bottom: .6rem; }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
/* Modifier for strips with three stats (the £15m pipeline stat was removed, D-187). Declared here,
   before the media queries, so the responsive two-column and one-column overrides still win. */
.stat-strip--3 { grid-template-columns: repeat(3,1fr); }
.stat { padding: 8px 4px; }
.stat .num { font-size: 2.5rem; font-weight: 700; color: var(--orange-text); line-height: 1; }
/* Long text headlines ('1st to 3rd Line') step down so they hold one line at desktop widths (D-211). */
.stat .num--long { font-size: 1.75rem; padding-top: .45rem; }
.section--navy .stat .num, .section--blue .stat .num { color: var(--amber); }
.stat .qual { font-weight: 600; margin-top: 8px; font-size: .98rem; }
.stat .ctx { font-size: .86rem; color: var(--text-muted); font-style: italic; }
.section--navy .stat .ctx, .section--blue .stat .ctx { color: #aebfd4; }

/* ---------- Kaizen ---------- */
.kaizen { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.kz-stage { background:#fff; border:1px solid var(--line); border-radius:14px; padding: 22px; position: relative; }
.kz-stage .kz-num { font-size:.72rem; font-weight:700; letter-spacing:.1em; color: #2C6470; text-transform: uppercase; }
.kz-stage h3 { color: var(--blue); font-size:1.25rem; margin:.2rem 0 .5rem; }
.kz-stage p { font-size:.9rem; color: var(--text-muted); margin:0; }
.kz-stage .kz-out { margin-top:12px; font-size:.85rem; font-weight:600; color: #2C6470; }
.kaizen-intro { max-width: 1000px; margin: 0 auto 40px; align-items: center; }
.kaizen-split { display: grid; grid-template-columns: 1fr minmax(240px, 320px) 1fr; gap: 24px; align-items: center; max-width: 1100px; margin: 0 auto; }
.kaizen-col { display: flex; flex-direction: column; gap: 20px; }
.kaizen-mid { display: flex; justify-content: center; }
.kaizen-mid .kaizen-img { max-width: 320px; }
.kaizen-img { width: 100%; max-width: 360px; margin: 0 auto; display: block; }
.kaizen-circle { max-width: 560px; margin: 0 auto 12px; }
.kaizen-circle svg { width: 100%; height: auto; display: block; }
.kz-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin-top: 8px; }
.kz-pill { background: var(--blue); color:#fff; font-weight:600; padding:8px 18px; border-radius:999px; font-size:.95rem; }
.kz-arrow { color: var(--teal); font-weight:700; }

/* ---------- Pillars / feature list ---------- */
.feature { display:flex; gap:16px; align-items:flex-start; }
.feature .fico { flex:0 0 44px; width:44px; height:44px; border-radius:10px; background: var(--pale-blue); display:grid; place-items:center; }
.feature .fico svg { width:22px;height:22px; stroke: var(--blue); fill:none; stroke-width:1.8; }
.feature h4 { margin:.1rem 0 .3rem; color: var(--blue); }
.feature p { color: var(--text-muted); font-size:.95rem; margin:0; }

.tick-list { list-style:none; padding:0; margin: 1rem 0 0; }
.tick-list li { position:relative; padding-left: 30px; margin-bottom: 12px; color: var(--text); }
.tick-list li::before { content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background: var(--light-teal); }
.tick-list li::after { content:""; position:absolute; left:6px; top:8px; width:6px; height:3px; border-left:2px solid var(--dark-teal); border-bottom:2px solid var(--dark-teal); transform: rotate(-45deg); }
.section--navy .tick-list li::before, .section--blue .tick-list li::before { background: rgba(118,181,194,.3); }
.section--navy .tick-list li, .section--blue .tick-list li { color:#dfe8f3; }

/* ---------- Testimonial ---------- */
.quote-block { background: var(--white); border-radius: var(--radius-lg); padding: 36px 40px; border:1px solid var(--line); border-left: 5px solid var(--teal); box-shadow: var(--shadow-sm); }
.quote-block .q { font-size: 1.3rem; line-height:1.45; color: var(--blue); font-weight: 600; }
.quote-block .attr { margin-top: 16px; font-size:.95rem; color: var(--text-muted); }
.quote-block .attr strong { color: var(--charcoal); display:block; }
.placeholder-note { font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color: #6E6E6E; font-weight:700; }

.pull { border-left: 4px solid var(--teal); padding: 4px 0 4px 20px; font-style: italic; color: var(--blue); font-size:1.1rem; margin: 24px 0; }
.pull cite { display:block; font-style:normal; font-size:.85rem; color: var(--text-muted); margin-top:8px; }

/* ---------- Operating commitments / table ---------- */
.spec-table { width:100%; border-collapse: collapse; font-size:.95rem; }
.spec-table th, .spec-table td { text-align:left; padding: 13px 16px; border-bottom:1px solid var(--line); vertical-align: top; }
.spec-table th { background: var(--blue); color:#fff; font-weight:600; }
.spec-table tr:nth-child(even) td { background: var(--pale-blue); }
.spec-table caption { caption-side: top; text-align:left; font-size:.8rem; color: #6E6E6E; margin-bottom:8px; }

.commit { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.commit .c { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }
.commit .c .lab { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--dark-teal); font-weight:700; }
.commit .c .val { font-size:1.05rem; font-weight:600; color: var(--blue); margin-top:6px; }

/* ---------- Kaizen tag ---------- */
.kz-tag { display:inline-flex; gap:6px; align-items:center; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--blue); background: var(--sky-blue); padding:4px 11px; border-radius:999px; }

/* ---------- Vendor / partner ---------- */
.vendor-row { display:flex; flex-wrap:wrap; gap:10px; }
.vendor-chip { background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 16px; font-weight:600; font-size:.9rem; color: var(--blue); }
.accred-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.accred { background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:10px; padding:12px 18px; }
.accred-name { display:block; font-weight:700; color: var(--blue); }
.accred-note { display:block; font-size:.8rem; color: var(--text-muted); margin-top:2px; }
.logo-wall { display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
.logo-wall .lw { background:#fff; border:1px solid var(--line); border-radius:10px; height:78px; display:grid; place-items:center; color: var(--blue); font-weight:700; font-size:.95rem; text-align:center; padding:8px; }

/* ---------- Process steps ---------- */
.steps { display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
.step { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; position:relative; }
.step .n { width:34px;height:34px;border-radius:50%; background: var(--orange); color:#fff; font-weight:700; display:grid;place-items:center; margin-bottom:12px; }
.step h4 { margin:.1rem 0 .35rem; }
.step p { font-size:.86rem; color: var(--text-muted); margin:0; }

/* ---------- Phased delivery / timeline ---------- */
.timeline { border-left: 2px solid var(--sky-blue); margin-left: 8px; padding-left: 26px; }
.tl-item { position:relative; padding-bottom: 26px; }
.tl-item::before { content:""; position:absolute; left:-35px; top:2px; width:16px;height:16px;border-radius:50%; background: var(--blue); border:3px solid #fff; box-shadow:0 0 0 2px var(--sky-blue); }
.tl-badge { display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:6px; background: var(--light-teal); color: var(--dark-teal); margin-bottom:6px; }
.tl-item h4 { margin:.1rem 0 .3rem; }
.tl-item p { font-size:.92rem; color: var(--text-muted); margin:0; }

/* ---------- Form ---------- */
.form-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
.field { margin-bottom: 16px; }
.field label { display:block; font-size:.85rem; font-weight:600; color: var(--charcoal); margin-bottom:6px; }
.field input, .field textarea, .field select {
  width:100%; padding: 12px 14px; border:1.5px solid #7E8A99; border-radius:8px;
  font-family: inherit; font-size:1rem; color: var(--charcoal); background: var(--off-white);
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--blue); background:#fff; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note { font-size:.8rem; color: var(--text-muted); margin-top: 10px; }
.form-success { background: var(--light-teal); border:1px solid var(--dark-teal); border-radius:10px; padding:16px; color: var(--dark-teal); font-weight:600; }
.form-error { background:#FAE8D3; border:1px solid #E18D47; border-radius:10px; padding:16px; color:#9C5416; font-weight:600; } /* brand alert style, replaces non-compliant red trio (D-233) */
.form-error a { color:#9C5416; text-decoration: underline; }
[hidden] { display: none !important; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--blue); color:#fff; border-radius: 0; }
.cta-band .container { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-top:36px; padding-bottom:36px; }
.cta-band h2 { color:#fff; margin:0 0 .3rem; }
.cta-band p { color:#d4e0ef; margin:0; }

/* ---------- Footer ---------- */
.partner-carousel { background: var(--deep-navy); padding: 26px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); }
.partner-carousel .pc-label { color:#8ea4c2; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; text-align:center; margin-bottom:16px; font-weight:700; }
.pc-track { display:flex; gap:42px; align-items:center; animation: scroll-x 36s linear infinite; width:max-content; }
.partner-carousel:hover .pc-track { animation-play-state: paused; }
.pc-track .pc-item { display:flex; align-items:center; white-space:nowrap; }
.pc-track .pc-item img { height:38px; width:auto; display:block; opacity:.95; }
.pc-track .pc-item.pc-text { color:#e4ecf6; font-weight:700; font-size:1.05rem; letter-spacing:.02em; opacity:.85; border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:9px 18px; }
@keyframes scroll-x { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .pc-track { animation: none; } .hero-slide { transition: none; } * { scroll-behavior: auto; } }

.pc-accreds { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:6px 24px 4px; }
.pc-accreds .pc-badge { color:#e4ecf6; font-weight:700; font-size:.86rem; border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:8px 14px; display:flex; align-items:center; }
.pc-accreds .pc-badge img { height:44px; width:auto; display:block; background:#fff; border-radius:6px; padding:4px; }

.site-footer { background: var(--deep-navy); color:#aebfd4; padding: 56px 0 0; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
.site-footer h4 { color:#fff; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.site-footer a { color:#aebfd4; font-size:.9rem; display:block; padding:4px 0; }
.site-footer a:hover { color:#fff; text-decoration:none; }
.footer-logo img { height:53px; margin-bottom:16px; }
.footer-about p { font-size:.9rem; color:#92a6c4; }
.legal-strip { border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding: 20px 0; font-size:.82rem; color:#8298b8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.legal-strip a { display:inline; color:#8298b8; }

/* ---------- Misc ---------- */
.note-banner { background: var(--pale-orange); border:1px solid var(--amber); color:#8a5a23; border-radius:10px; padding:12px 18px; font-size:.85rem; }
/* Section alignment principle: left by default. A section heading is centred ONLY when it
   introduces a full-width symmetric grid of equal cards (an overview or browse set). Split,
   prose, stat, table, spec, process, timeline, and single-CTA sections stay left. */
.section-head { max-width: 64ch; margin-bottom: 36px; }
.section-head.center { margin-left:auto; margin-right:auto; }
.divider { height:1px; background: var(--line); border:0; margin: 0; }
.badge-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.badge { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }
.badge .bt { font-weight:700; color: var(--blue); }
.badge p { font-size:.88rem; color: var(--text-muted); margin:.4rem 0 0; }
/* ISO certificate tiles link to the PDF (D-115) */
.badge--link { display:flex; flex-direction:column; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.badge--link:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--sky-blue); }
.badge-link { margin-top:12px; font-weight:600; color:var(--blue); font-size:.86rem; }

/* ---------- Legal content ---------- */
.legal-content { max-width: 800px; }
.legal-updated { font-size: .82rem; color: #6E6E6E; font-weight: 600; margin: 0 0 1.4rem; }
.legal-content h2 { font-size: 1.4rem; margin: 2rem 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--teal); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; color: var(--blue); margin: 1.4rem 0 .4rem; }
.legal-content p { font-size: .95rem; color: var(--text); margin: 0 0 .8rem; }
.legal-content ul { font-size: .95rem; color: var(--text); margin: 0 0 1rem; padding-left: 1.2rem; }
.legal-content li { margin-bottom: .4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .split { grid-template-columns: 1fr; gap:32px; }
  .stat-strip { grid-template-columns: repeat(2,1fr); }
  .kaizen { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .commit { grid-template-columns:1fr; }
  .logo-wall { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:28px; }
  .kaizen-split { grid-template-columns: 1fr; }
  .kaizen-mid { order: -1; }
}

/* Header/nav switch to the mobile menu on its own breakpoint (1333px), independent of the
   content-grid breakpoint (980px). The full desktop nav plus the CTA needs about 1334px to fit,
   so below that the hamburger menu is used to prevent the header overflowing horizontally on
   laptops and tablets in landscape. */
@media (max-width: 1333px) {
  /* backdrop-filter creates a containing block for fixed children, which would trap the fixed
     mobile menu inside the header. Disable it here so the menu is positioned against the viewport. */
  .site-header { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
  .primary-nav { display:none; position:fixed; top:92px; left:0; right:0; bottom:0; height:auto; width:auto; margin:0; z-index:200; background:#fff; flex-direction:column; align-items:stretch; gap:0; padding:14px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line); }
  .primary-nav.open { display:flex; }
  .nav-item { border-bottom:1px solid var(--line); }
  .nav-link { padding:16px 6px; font-size:1.05rem; justify-content:space-between; }
  .dropdown { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 10px 14px; min-width:0; display:none; }
  .nav-item.expanded .dropdown { display:block; }
  .nav-item:hover .dropdown { } /* no hover open on mobile */
  .header-cta { display:none; }
  .nav-toggle { display:block; }
  .nav-item:hover .nav-link .caret { transform:none; }
  .nav-item.expanded .nav-link .caret { transform: rotate(180deg); }
}
@media (max-width: 620px) {
  body { font-size:16px; }
  .section { padding: 39px 0; }
  .grid-4, .grid-3, .grid-2, .stat-strip, .kaizen, .steps, .badge-grid, .logo-wall, .commit { grid-template-columns: 1fr; }
  .field-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-inner { padding-top: 64px; padding-bottom: 76px; }
  .hero-stats { gap:22px; }
  .cta-band .container { flex-direction:column; align-items:flex-start; }
  .legal-strip { flex-direction:column; }
}

/* ---------- Linked vendor / accreditation / framework tiles (D-118) ---------- */
.pc-track a.pc-item { text-decoration: none; }
.pc-track a.pc-item:hover { opacity: 1; }
.pc-track a.pc-item.pc-text:hover { border-color: var(--teal); color: #fff; }
.pc-accreds a.pc-badge { text-decoration: none; cursor: pointer; }
.pc-accreds a.pc-badge:hover { border-color: var(--teal); color: #fff; }
.accred { text-decoration: none; display: inline-flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.accred:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-left-color: var(--blue); }
.accred .accred-name { font-weight: 700; color: var(--blue); }
.accred .accred-note { color: var(--text-muted); font-size: .85rem; }

/* Vendor partner tile grid (D-118) */
.vendor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 24px; }
.vendor-tile { display: flex; align-items: center; justify-content: center; min-height: 74px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--blue); font-weight: 700; font-size: .98rem; text-align: center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.vendor-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--sky-blue); }
.vendor-tile img { max-height: 42px; width: auto; display: block; }


/* ---------------------------------------------------------------- Site search */
.nav-search { display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid #cdd9e8; border-radius:8px; padding:8px 14px; color:#1f487c; font:inherit; font-size:.92rem; cursor:pointer; margin-left:8px; }
.nav-search:hover { background:#ebf3fb; }
.nav-search svg { flex:0 0 auto; }
@media (max-width: 1500px) { .nav-search-label { display:none; } .nav-search { padding:8px 10px; } }
.search-overlay { position:fixed; inset:0; z-index:2000; }
.search-overlay[hidden] { display:none; }
.search-backdrop { position:absolute; inset:0; background:rgba(13,43,78,.55); }
.search-panel { position:relative; margin:8vh auto 0; width:min(680px, calc(100% - 32px)); background:#fff; border-radius:14px; box-shadow:0 24px 64px rgba(13,43,78,.35); padding:20px 22px 16px; max-height:78vh; display:flex; flex-direction:column; }
.search-bar { display:flex; align-items:center; gap:10px; border:1px solid #7e8a99; border-radius:10px; padding:10px 14px; color:#1f487c; }
.search-input { flex:1; border:none; outline:none; font:inherit; font-size:1.05rem; color:#2c2c2c; background:transparent; }
.search-bar:focus-within { outline:3px solid #e18d47; outline-offset:2px; }
.search-close { background:none; border:none; font-size:1.6rem; line-height:1; color:#6e6e6e; cursor:pointer; padding:0 2px; }
.search-close:hover { color:#1f487c; }
.search-status { font-size:.88rem; color:#6e6e6e; margin:10px 2px 0; min-height:1.2em; }
.search-results { list-style:none; margin:8px 0 0; padding:0; overflow-y:auto; }
.search-result { display:block; padding:12px 14px; border-radius:10px; text-decoration:none; }
.search-result:hover, .search-result:focus { background:#ebf3fb; }
.search-result-title { display:block; font-weight:700; color:#1f487c; margin-bottom:2px; }
.search-result-snippet { display:block; font-size:.9rem; color:#2c2c2c; }
.search-result-snippet mark { background:#fae8d3; color:#2c2c2c; border-radius:3px; padding:0 2px; }
.search-hint { font-size:.8rem; color:#6e6e6e; margin:12px 2px 0; border-top:1px solid #e4e9f0; padding-top:10px; }


/* ---------------------------------------------------------------- Two-tier supplier banner */
.pc-track--t1 { animation: scroll-x-rev 42s linear infinite; }
@keyframes scroll-x-rev { from { transform: translateX(-50%);} to { transform: translateX(0);} }
.pc-track--t2 { margin-top: 4px; animation-duration: 34s; }
.pc-track--t2 .pc-item.pc-text { font-size: .9rem; padding: 7px 14px; opacity: .78; }
.pc-track--t2 .pc-item img { height: 30px; }

/* ---------------------------------------------------------------- Case studies (original layout, current branding) */
.cs-hero { margin:0 0 26px; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-md); }
.cs-hero img { display:block; width:100%; height:auto; }
.cs-quote { margin:0 0 28px; padding:22px 26px; background:var(--pale-blue); border-left:4px solid var(--blue); border-radius:0 10px 10px 0; }
.cs-quote p { margin:0 0 10px; font-size:1.08rem; line-height:1.55; color:var(--charcoal); }
.cs-quote cite { font-style:normal; font-weight:700; font-size:.9rem; color:var(--blue); }
.cs-quote--close { background:var(--light-teal); border-left-color:var(--dark-teal); }
.cs-quote--close cite { color:var(--dark-teal); }
.cs-h2 { font-size:1.3rem; color:var(--blue); margin:32px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--teal); }
.cs-meta { display:flex; flex-wrap:wrap; gap:26px; margin-top:34px; padding-top:20px; border-top:1px solid var(--line); }
.cs-meta-k { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#6e6e6e; font-weight:700; margin-bottom:4px; }
.cs-meta-v { display:block; font-size:.95rem; color:var(--charcoal); }
.cs-tag { display:inline-block; background:var(--sky-blue); color:var(--blue); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:20px; padding:3px 10px; margin:0 6px 4px 0; }
/* index: filter row, clearly separated from the grid */
.cs-filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 14px; }
.cs-filter { background:#fff; border:1px solid #cdd9e8; border-radius:22px; padding:8px 18px; font:inherit; font-size:.92rem; color:var(--blue); cursor:pointer; }
.cs-filter:hover { background:var(--pale-blue); }
.cs-filter.is-active { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }
.cs-filter-sep { border:0; border-top:1px solid var(--line); margin:0 0 38px; }
/* index: uniform tiles, three across */
.cs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
@media (max-width:980px){ .cs-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cs-grid { grid-template-columns:1fr; } }
.cs-card { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; box-shadow:var(--shadow-sm); transition:box-shadow .18s ease, transform .18s ease; }
.cs-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.cs-card-img { display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--pale-blue); }
.cs-card-img img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.cs-card-body { display:flex; flex-direction:column; gap:8px; padding:18px 20px 22px; flex:1 1 auto; }
.cs-card-tags { display:block; margin:0 0 2px; }
.cs-card-title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; font-size:1rem; line-height:1.4; color:var(--blue); margin:0; }
.cs-card-client { display:block; font-size:.86rem; color:#6e6e6e; margin-top:auto; padding-top:4px; }
.cs-empty { text-align:center; color:#6e6e6e; margin-top:24px; }
.cs-hero--small { max-width:300px; margin-left:auto; margin-right:auto; box-shadow:none; border:1px solid var(--line); }

/* ---------------------------------------------------------------- Print / PDF
   Used when a page is printed or exported to PDF, for example a case study sent
   to a customer for approval. Strips site navigation and calls to action so the
   page reads as a document, and keeps the logo, any draft notice and the content. */
@media print {
  .primary-nav, .nav-toggle, .nav-search, .header-cta,
  .cta-band, .cta-bg, .cta-buttons, .partner-carousel,
  .skip-link, .footer-grid, .legal-strip, .cs-filters, .cs-filter-sep { display: none !important; }
  .site-header { position: static !important; box-shadow: none !important; border-bottom: 1px solid #cdd9e8; }
  .site-header .container, .header-inner { display: block !important; padding: 10px 0 !important; }
  .site-footer { background: #fff !important; color: #2c2c2c !important; padding: 14px 0 0 !important; border-top: 1px solid #cdd9e8; }
  .site-footer .footer-about { color: #2c2c2c !important; font-size: 9pt; }
  body { background: #fff !important; }
  .section { padding: 14pt 0 !important; }
  figure, .cs-hero, .cs-quote, .stat-strip, table { break-inside: avoid; }
  h1, h2, h3, .cs-h2 { break-after: avoid; }
  a { text-decoration: none !important; color: inherit !important; }
  @page { size: A4; margin: 14mm 14mm 16mm; }
}

/* ------------------------------------------------------------------ Staff portraits (D-180)
   Portrait sits in the top right of a person card. Scoped to .card--person so the generic .card
   used across the rest of the site is untouched.

   The photo is absolutely positioned and the card's own header block is given right padding, so
   the name, role and first line of the bio never run under the image. Cards without a portrait
   are unaffected: person_photo() emits nothing when the file is absent, and the padding rule
   below is harmless on a card with no image. */
.card--person { position: relative; }
.card--person .person-photo {
  position: absolute; top: 20px; right: 20px; width: 88px; height: 88px;
  border-radius: 50%; overflow: hidden; background: var(--pale-blue);
  box-shadow: 0 1px 3px rgba(31,72,124,.18);
}
.card--person .person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Reserve the space only when a portrait is actually present. */
.card--person:has(.person-photo) .card-tag,
.card--person:has(.person-photo) h3,
.card--person:has(.person-photo) > p:first-of-type { padding-right: 104px; }

/* Fallback for browsers without :has(). Slightly less precise, in that it indents the heading
   block on every person card, but the effect is invisible on a card with no portrait. */
@supports not selector(:has(*)) {
  .card--person .card-tag, .card--person h3, .card--person > p:first-of-type { padding-right: 104px; }
}

@media (max-width: 620px) {
  .card--person .person-photo { width: 64px; height: 64px; top: 16px; right: 16px; }
  .card--person:has(.person-photo) .card-tag,
  .card--person:has(.person-photo) h3,
  .card--person:has(.person-photo) > p:first-of-type { padding-right: 76px; }
}

/* Enquiry form CAPTCHA slot (D-223). Sized so the layout does not shift when the Turnstile widget
   loads: the standard widget is 300x65. Hidden entirely when no widget is rendered. */
.field--captcha { margin-top: 4px; }
.field--captcha .cf-turnstile { min-height: 65px; }
.field--captcha .captcha-note { color: var(--orange-text); font-weight: 600; margin-top: 6px; }

/* Site Map page (D-229) */
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li { padding: 4px 0; font-size: .95rem; }

/* ---------- Portrait (9:16) inline video: workmanship clip (D-147) ---------- */
/* Video size iterated with Sean, 3 September 2026: 300 -> 150 -> 263 -> 395px (263 x 1.5). */
.video-portrait { max-width: 395px; margin: 0 auto; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--deep-navy); }
.video-portrait video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; }
.video-caption { font-size: .85rem; color: var(--text-muted); margin-top: 10px; max-width: 395px; margin-left: auto; margin-right: auto; }

/* Header utility bar (D-257): a slim row above the main header for existing-customer utilities.
   The main header row is at its width limit after D-251, so Remote Support and the Customer Portal
   live here rather than competing with the sales CTA. White on navy only, per brand. */
.utility-bar { background: var(--deep-navy); }
.utility-inner { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 38px; }
.utility-label { color: #92a6c4; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.utility-link { color: #cdd9e8; font-size: .82rem; font-weight: 600; }
.utility-link:hover { color: #fff; text-decoration: underline; }
.btn-remote { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--blue);
  font-size: .82rem; font-weight: 700; padding: 5px 14px; border-radius: 6px; white-space: nowrap; }
.btn-remote:hover { background: var(--pale-blue); color: var(--blue); text-decoration: none; }
.btn-remote::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; flex: 0 0 auto; }
@media (max-width: 620px) { .utility-label { display: none; } .utility-inner { justify-content: center; gap: 12px; } }

/* Cookie consent banner (D-258). Docked to the bottom, never covering the whole page, and never
   blocking interaction with the content behind it. Accept and Reject are the same size and weight,
   which the ICO requires: a reject that is harder to find is not freely given consent. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; background: var(--deep-navy);
  color: #dfe8f3; border-top: 3px solid var(--orange); box-shadow: 0 -8px 28px rgba(13,43,78,.28); }
.cookie-inner { max-width: var(--maxw); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center;
  gap: 24px; flex-wrap: wrap; }
.cookie-copy { flex: 1 1 460px; min-width: 260px; }
.cookie-copy h2 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.cookie-copy p { font-size: .9rem; margin: 0; color: #cdd9e8; }
.cookie-copy a { color: #fff; text-decoration: underline; }
.cookie-actions { display: flex; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.cookie-actions .btn { font-size: .92rem; padding: 11px 20px; }
.cookie-actions .btn--primary { background: #fff; color: var(--blue); border-color: #fff; }
.cookie-actions .btn--primary:hover { background: var(--pale-blue); color: var(--blue); }
.cookie-actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.75); background: transparent; }
.cookie-actions .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.footer-cookie-link { background: none; border: 0; padding: 0; font: inherit; color: #cdd9e8; cursor: pointer;
  text-decoration: none; }
.footer-cookie-link:hover { color: #fff; text-decoration: underline; }
@media (max-width: 720px) { .cookie-inner { padding: 16px 20px; gap: 14px; } .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1 1 auto; justify-content: center; } }

/* Responsive tables (D-266): the Privacy Policy's five-column 'What is stored' table was 550px wide at 375px and
   forced the page to scroll sideways. Tables scroll within themselves on narrow screens instead. */
@media (max-width: 720px) { table.spec-table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } }

/* Embedded third-party form (D-270): a white card around a tall frame so the form's own styling sits inside ours. */
.embed-card { background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; padding: 12px; }
.embed-form { display: block; width: 100%; min-height: 600px; border: 0; } /* embed.js sizes it to the form once loaded (D-272) */