/* ===========================================================================
   ECOM BUYER NETWORK PRIVATE LIMITED - public corporate website
   ---------------------------------------------------------------------------
   Standalone. This file does not extend assets/css/app.css and does not load
   Bootstrap: the internal stylesheet is a dense tool's design system, and its
   shell rules (sidebar clearances, tab-bar insets, the topbar's fixed height)
   would have to be undone one by one to lay out a marketing page. Two files
   that share a palette and nothing else is less code than one file with a
   branch on every rule.

   What it does share is the palette. The greys and the single accent are the
   same values as app.css so that a visitor who signs in does not cross a
   visual seam, and colour still only appears where it means something.

   Light only, deliberately. The internal tool offers a dark theme because the
   team lives in it; a corporate site read once does not need a preference, and
   not having one is what lets the cookie policy say these pages set no cookies.

   1  Tokens
   2  Reset + base
   3  Layout primitives   wrap, section, grid, eyebrow
   4  Controls            buttons, forms
   5  Header + nav
   6  Hero
   7  Sections            about, services, why, process, contact
   8  Footer
   9  Legal pages
   10 Responsive
   =========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root {
  --font-sans:
    "Inter", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui,
    -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --c-canvas: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f7f8fa;
  --c-surface-3: #f2f4f7;
  --c-line: #e3e6ec;
  --c-line-strong: #cdd3dc;

  --c-text: #12161d;
  --c-text-2: #59616f;
  --c-text-3: #89919f;

  --c-accent: #2563eb;
  --c-accent-hover: #1d4ed8;
  --c-accent-soft: #eaf1fe;
  --c-accent-line: #c9dbfc;
  --c-accent-ring: rgba(37, 99, 235, 0.18);

  --c-danger-text: #b42318;
  --c-danger-soft: #fdecea;
  --c-danger-line: #f6ccc7;
  --c-success-text: #05603a;
  --c-success-soft: #e7f6ee;
  --c-success-line: #c0e5d1;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 2px 6px -1px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);

  /* The content column, which grows with the display instead of being one
     fixed strip in the middle of it.
     A flat 1240px left a 2560px monitor with 653px of empty gutter on each
     side - more than half the screen - and the page read as a narrow ribbon.
     A flat percentage is the other failure: at 2560 it would run text lines to
     140 characters, which is unreadable. So it is 1240px until roughly 1680px
     of viewport, then tracks the display, then stops at 1840px. Line length is
     held separately, by the em-based measures in section 3 - that is what lets
     the CONTAINER get wide without the PROSE getting wide with it. */
  --wrap: clamp(1240px, 74vw, 1840px);
  --header-h: 64px;
}

/* --- 2. Reset + base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/* An author rule beats the UA stylesheet's `[hidden] { display: none }` no
   matter how weak its selector, so any class that sets `display` re-shows an
   element the markup marked hidden. That is not hypothetical here: `.notice`
   is display:flex and the enquiry form ships its notice with the `hidden`
   attribute, which put a stray empty 468x26 box at the top of the form until
   this rule existed. Stated once, at the top, so it covers whatever is added
   later. */
[hidden] { display: none !important; }

html {
  /* Type grows with the display above ~1440px: 16px up to there, ~17px at
     1920, 18px from 2560 on. 16px body copy on a 2560px monitor is not "dense",
     it is far away - the viewer is sitting the same distance from a screen with
     60% more pixels across it.
     Set on <html> rather than <body> so every rem on the page moves with it -
     headings, cards, chips, the lot - instead of body text drifting away from
     everything sized in rem. The floor is 16px, so nothing at or below 1440px
     changes. */
  font-size: clamp(16px, 13.43px + 0.179vw, 18px);

  scroll-behaviour: smooth;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header, or #services lands with
     its heading underneath the nav. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  /* 1rem, not 16px: the root above is what scales on a large display, and a
     literal here would pin body copy to 16px while every card, chip and
     heading around it grew. */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
  /* The single most common cause of a phone scrolling sideways is one wide
     child nobody noticed. This makes that impossible at the root. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); }
h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-accent);
  color: #fff;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

.lead {
  font-size: 1.0625rem;
  color: var(--c-text-2);
}

.muted { color: var(--c-text-2); }
.small { font-size: 0.875rem; }

/* Present to a screen reader, absent to the eye. Used for headings that give a
   block its place in the document outline where the design carries the meaning
   visually - the hero's layer diagram is the one that needs it. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Layout primitives -------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding: clamp(56px, 7vw, 92px) 0; }
.section-tint { background: var(--c-surface-2); }
.section + .section { border-top: 1px solid var(--c-line); }
.section-tint + .section-tint { border-top: 1px solid var(--c-line); }

/* Every measure below is in em, so it holds a constant number of CHARACTERS
   as the root font-size grows on a large display. In px they would hold a
   constant number of pixels, which as the type grew would mean progressively
   fewer words per line - the opposite of what is wanted. This is the half of
   the wide-screen layout that keeps text readable while --wrap gets wider. */

.section-head {
  max-width: 42.5em;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.section-head.is-centred {
  max-width: 45em;
  margin-inline: auto;
  text-align: center;
}

/* The one small use of the accent that is not a control: it labels a section
   rather than decorating it. */
.eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- 4. Controls ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { text-decoration: none; }

.btn-accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.btn-accent:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #fff; }

.btn-outline {
  background: var(--c-surface);
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.btn-outline:hover { border-color: var(--c-text-3); color: var(--c-text); background: var(--c-surface-2); }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}
.field .req { color: var(--c-danger-text); }

.input,
textarea.input,
select.input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
textarea.input { min-height: 130px; resize: vertical; }

.field-error {
  display: block;
  margin-top: 5px;
  font-size: 0.8125rem;
  color: var(--c-danger-text);
}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   the stylesheet skips a hidden field and fills a visible one. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
}
.notice[data-tone="success"] {
  background: var(--c-success-soft);
  border-color: var(--c-success-line);
  color: var(--c-success-text);
}
.notice[data-tone="danger"] {
  background: var(--c-danger-soft);
  border-color: var(--c-danger-line);
  color: var(--c-danger-text);
}
.notice i { margin-top: 2px; flex: none; }

/* --- 5. Header + nav ------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--c-text);
  text-decoration: none;
}
.site-brand:hover { text-decoration: none; color: var(--c-text); }

/* The company logo. It sits directly on the page here rather than in a tile:
   the header is white and the footer is near-white, which is the ground the
   mark was drawn for. The dark sign-in panel is the one place that needs a
   tile behind it - see .brand-mark in app.css.
   Height is fixed and width follows the artwork, so the aspect ratio is the
   file's business and not this stylesheet's. */
.site-brand-mark {
  display: block;
  /* 40 of the header's 64px. The mark carries fine detail - two wheels and the
     counter of the "e" - and at the 34px the placeholder tile used it collapsed
     into an orange smudge. */
  height: 40px;
  width: auto;
  flex: none;
}

.site-brand-text { display: grid; line-height: 1.25; min-width: 0; }
.site-brand-name { font-weight: 700; font-size: 0.9375rem; }
.site-brand-sub { font-size: 0.6875rem; color: var(--c-text-3); letter-spacing: 0.04em; text-transform: uppercase; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav-link {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav-link:hover { background: var(--c-surface-3); color: var(--c-text); text-decoration: none; }
.site-nav-link.is-active { color: var(--c-text); font-weight: 600; }

.site-nav-cta { margin-left: 8px; padding: 9px 16px; }

.site-nav-toggle {
  display: none;
  padding: 6px 10px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
}

/* --- 6. Hero --------------------------------------------------------------- */

.hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(60% 120% at 15% 0%, var(--c-accent-soft) 0%, rgba(255, 255, 255, 0) 62%),
    var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

/* Two columns from lg up: the copy keeps a readable measure on the left and
   the layer diagram takes the space that measure leaves over, which used to be
   several hundred pixels of nothing. Below lg they stack and the diagram sits
   under the buttons. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.hero-inner { max-width: 40em; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  margin-bottom: 20px;
  border: 1px solid var(--c-accent-line);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.hero h1 { margin-bottom: 14px; }

.hero-tagline {
  margin-bottom: 18px;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem);
  font-weight: 600;
  color: var(--c-accent);
}

.hero-text {
  max-width: 42.5em;
  margin-bottom: 28px;
  font-size: 1.0625rem;
  color: var(--c-text-2);
}

/* Not statistics. Four words for what the company does, which is a claim it
   can stand behind, where a row of numbers would not be. */
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--c-text-2);
}
.hero-points i { color: var(--c-accent); }

/* Two by two once the copy column is capped. Left to wrap freely the four sat
   three-and-one, which reads as a line that ran out of room rather than as a
   set. */
@media (min-width: 992px) {
  .hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
  }
}

/* The layer diagram. Three cards on a rail, reading downwards, with the two
   concerns that cut across all three drawn alongside rather than as a fourth
   card - see includes/site_hero_visual.php. */

.hero-visual { position: relative; }

.stack {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-layer {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* A slight rightward step down the stack, so it reads as layers rather than as
   three identical rows. Undone below lg, where the column is narrow enough
   that the indent only costs width. */
.stack-layer:nth-child(2) { margin-left: 18px; }
.stack-layer:nth-child(3) { margin-left: 36px; }

/* The connector between one layer and the next, drawn upward from each card
   after the first into the gap above it.
   This started as a single full-height line behind the stack, which looked
   right only because the opaque cards happened to cover all of it but the
   gaps - an effect that would have vanished the moment a card went
   transparent, and which could not follow the stepped indent anyway. Two
   explicit 12px segments, each anchored to the card it belongs to, are what
   was actually wanted. */
.stack-layer + .stack-layer::before {
  content: "";
  position: absolute;
  /* Lands on the centre of the icon in the card ABOVE, which the 18px step
     puts at this card's own left + 19px: 18px of card padding plus half the
     38px icon, less the 18px this card is already indented by. */
  left: 19px;
  bottom: 100%;
  width: 2px;
  height: 12px;
  background: var(--c-accent-line);
}

/* Squared off in the single-column layout, where the cards are no longer
   stepped and the connector should simply run down the icon column. */
@media (max-width: 991px) {
  .stack-layer + .stack-layer::before { left: 37px; }
}

.stack-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  color: var(--c-accent);
  font-size: 1.0625rem;
}

.stack-body { min-width: 0; }

.stack-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 7px;
  font-weight: 700;
  font-size: 0.9375rem;
}
.stack-note { font-weight: 400; font-size: 0.8125rem; color: var(--c-text-3); }

.stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.stack-chips span {
  padding: 3px 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-text-2);
}

.stack-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding-left: 2px;
}
.stack-rail span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-2);
}
.stack-rail i { color: var(--c-accent); }

/* --- 7. Sections ----------------------------------------------------------- */

.card {
  padding: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 1.0625rem;
}

.card h3 { margin-bottom: 6px; }
.card p { font-size: 0.9375rem; color: var(--c-text-2); margin: 0; }

.service-card { transition: border-color 0.15s, box-shadow 0.15s; }
.service-card:hover { border-color: var(--c-accent-line); box-shadow: var(--shadow-2); }
.service-card h4 { margin-bottom: 6px; font-size: 1.0625rem; letter-spacing: -0.01em; }

/* Service groups. The heading sits in its own left column from lg up, so the
   cards start at the same x down the whole section and the group titles read
   as a spine rather than as five more full-width headings. */

.service-group + .service-group { margin-top: clamp(32px, 4vw, 52px); }

.service-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 20px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}
.service-group-head h3 {
  margin: 0;
  font-size: 1.125rem;
}
.service-group-head p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-text-2);
  text-align: right;
}

.section-foot {
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--c-text-2);
}

/* About */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.about-copy { max-width: 44em; }

.audience-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.audience-list li {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  margin: 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--c-line);
}
.audience-list li:last-child { border-bottom: 0; }
.audience-list i { color: var(--c-accent); margin-top: 4px; flex: none; }

.panel {
  padding: 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.panel h3 { margin-bottom: 4px; }
.panel .panel-sub { margin-bottom: 14px; font-size: 0.875rem; color: var(--c-text-3); }

/* Process.
   From lg up: seven columns on one horizontal rail, because the stages are a
   sequence and reading them left to right is the point.
   Below lg: the same markup falls back to a numbered ladder with the rule
   running down it - seven columns on a phone is not a sequence, it is seven
   slivers. No arrow graphics in either direction; the rail carries the order. */

.process {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.process::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--c-line);
}
.process li {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding-bottom: 22px;
}
.process li:last-child { padding-bottom: 0; }

.process-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 2px solid var(--c-accent-line);
  color: var(--c-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  flex: none;
}
.process-body h3 { margin-bottom: 3px; }
.process-body p { font-size: 0.9375rem; color: var(--c-text-2); margin: 0; }

@media (min-width: 992px) {
  .process {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 14px;
  }
  /* The rail runs through the centres of the number circles: vertically offset
     by half a circle, and horizontally inset by half a column at each end so it
     starts at circle 1 and stops at circle 7 instead of running out past both
     into nothing. Seven equal columns put those centres at 1/14 and 13/14. */
  .process::before {
    left: calc(100% / 14);
    right: calc(100% / 14);
    top: 18px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: var(--c-line);
  }
  .process li {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 0;
    /* Every li is stretched to the height of the tallest one, and auto rows
       absorb that extra space by default - so the column with the shortest
       description grew its FIRST row and pushed its title 21px further down
       than the longest column's. That, not the wrapping, was why the seven
       titles sat on four different baselines. Pack the rows to the top and
       the min-height below does the rest. */
    align-content: start;
  }
  .process-num { margin: 0 auto; }
  .process-body { text-align: center; }
  .process-body p { font-size: 0.8125rem; }

  /* Two lines' worth of room whether the title needs one or two. Without it
     "Planning" starts its description a line higher than "UI/UX &
     Architecture" does, and seven columns of body text sit on five different
     baselines. */
  .process-body h3 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.44em;
    margin-bottom: 6px;
    font-size: 0.9375rem;
  }
}

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  /* Held to its own width and centred inside a container that may be much
     wider. A form is the one block that gains nothing from a big screen: half
     of 1840px would give it 880px-wide single-line inputs for a name and an
     email, which looks less capable rather than more. */
  max-width: 1180px;
  margin-inline: auto;
}

.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--c-line);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list i {
  margin-top: 3px;
  flex: none;
  color: var(--c-accent);
  font-size: 1.0625rem;
}
.contact-list dt { font-size: 0.8125rem; color: var(--c-text-3); margin-bottom: 1px; }
.contact-list dd { margin: 0; font-size: 0.9375rem; }
.contact-list dl { margin: 0; }

/* The floor under the contact column, so it never reads as an empty half of
   the section when few contact details are configured. */
.next-steps {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.next-steps h4 {
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.next-steps ol { margin: 0; padding: 0; list-style: none; }
.next-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 13px;
  font-size: 0.875rem;
  color: var(--c-text-2);
}
.next-steps li:last-child { margin-bottom: 0; }
.next-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  color: var(--c-accent);
  font-size: 0.6875rem;
  font-weight: 700;
}

.form-card {
  padding: clamp(20px, 3vw, 28px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.cta-band {
  padding: clamp(36px, 5vw, 56px);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-lg);
  background: var(--c-accent-soft);
  text-align: center;
}
.cta-band h2 { margin-bottom: 8px; }
.cta-band p { max-width: 39em; margin-inline: auto; color: var(--c-text-2); }
.cta-band .btn-row { justify-content: center; margin-top: 22px; }

/* --- 8. Footer ------------------------------------------------------------- */

.site-footer {
  padding: clamp(48px, 6vw, 72px) 0 28px;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: 32px;
}

.footer-about .site-brand-mark { height: 40px; margin-bottom: 14px; }
.footer-company { margin-bottom: 2px; font-weight: 700; font-size: 0.9375rem; }
.footer-business { margin-bottom: 12px; color: var(--c-text-2); font-size: 0.875rem; }

.footer-reg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  margin: 0;
  font-size: 0.8125rem;
}
.footer-reg dt { color: var(--c-text-3); font-weight: 600; }
.footer-reg dd { margin: 0; color: var(--c-text-2); word-break: break-word; }

.footer-head {
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--c-text-2); font-size: 0.9375rem; }
.footer-col a:hover { color: var(--c-accent); }

.footer-contact li { display: flex; gap: 9px; margin-bottom: 11px; }
.footer-contact i { margin-top: 3px; flex: none; color: var(--c-text-3); }
.footer-contact span, .footer-contact a { color: var(--c-text-2); font-size: 0.9375rem; }

.footer-legal {
  padding-top: 22px;
  margin: 0;
  border-top: 1px solid var(--c-line);
  font-size: 0.875rem;
  color: var(--c-text-3);
}

/* The staff entrance. It has to read as the rest of the copyright line, so it
   takes that line's colour and no underline - and it must still be operable
   and announce itself to a screen reader, so it stays a real link with a real
   focus ring rather than a span with a click handler. */
.footer-rights {
  color: inherit;
  text-decoration: none;
  cursor: default;
}
.footer-rights:hover { color: var(--c-text-2); text-decoration: none; }

/* --- 9. Legal pages -------------------------------------------------------- */

.page-head {
  padding: clamp(36px, 5vw, 60px) 0 clamp(28px, 3vw, 36px);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
}
.page-head h1 { margin-bottom: 8px; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); }
.page-head p { margin: 0; color: var(--c-text-2); }

/* Pages that are a document or a form rather than a landing page.
   --wrap is a variable precisely so a page can narrow it, and narrowing it here
   is what keeps a page's HEADING and its CONTENT in one column: capping the
   content alone (with a max-width on the block) centres the block while the
   heading above it stays hard left, and the two visibly disagree. Overriding
   the container instead moves both together.
   A legal page is 236px of contents list, the gap, and 47.5em of prose, plus
   .wrap's own 20px each side. A 1840px-wide privacy policy would be nobody's
   idea of readable, so these pages stay narrow and centred while the homepage
   uses the display. */
.doc-page { --wrap: calc(47.5em + 332px); }
.form-page { --wrap: 1220px; }

.doc {
  display: grid;
  /* The body track is sized to the measure rather than to whatever is left
     over: with `1fr` the track took the whole container while .doc-body's own
     max-width held the text at 47.5em inside it, leaving a column of empty
     track beside the words. */
  grid-template-columns: 236px minmax(0, 47.5em);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding: clamp(36px, 5vw, 64px) 0;
}

.doc-toc {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  padding: 18px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.doc-toc h2 {
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.doc-toc ol { margin: 0; padding-left: 1.1rem; }
.doc-toc li { margin-bottom: 6px; font-size: 0.875rem; }
.doc-toc a { color: var(--c-text-2); }

.doc-body { max-width: 47.5em; }
.doc-body h2 {
  margin-top: 36px;
  margin-bottom: 10px;
  font-size: 1.1875rem;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.doc-body > h2:first-child { margin-top: 0; }
.doc-body h3 { margin-top: 22px; margin-bottom: 6px; }
.doc-body p, .doc-body li { color: var(--c-text-2); }
.doc-body strong { color: var(--c-text); }

.doc-meta {
  padding: 14px 16px;
  margin-bottom: 28px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  color: var(--c-text-2);
}

.doc-callout {
  padding: 16px 18px;
  margin: 20px 0;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  font-size: 0.9375rem;
}
.doc-callout p { color: var(--c-text); }

/* --- 10. Responsive -------------------------------------------------------- */

@media (max-width: 991px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid,
  .contact-grid,
  .hero-grid { grid-template-columns: minmax(0, 1fr); }

  .hero-inner { max-width: 45em; }
  /* The layer diagram keeps its rail but loses the stepped indent: in a single
     column that indent only narrows the third card. */
  .stack-layer:nth-child(2),
  .stack-layer:nth-child(3) { margin-left: 0; }

  /* The group lede moves under its title rather than sitting opposite it -
     right-aligned against a heading it no longer has room beside reads as a
     stray line. */
  .service-group-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .service-group-head p { text-align: left; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-nav-toggle { display: block; }

  /* The menu becomes a sheet under the header rather than a drawer: there are
     five links and a button, which is a short list, and a sheet needs no
     backdrop, no focus trap and no scroll lock to behave. */
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 20px 18px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-2);
  }
  .site-nav.is-open { display: flex; }
  .site-nav-link { padding: 11px 12px; font-size: 1rem; }
  .site-nav-cta { margin: 8px 0 0; }
}

@media (max-width: 575px) {
  body { font-size: 15.5px; }
  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-points { gap: 8px 16px; }
  .btn-row .btn { width: 100%; }
  .cta-band .btn-row .btn { width: 100%; }
}

/* Touch targets on the two link lists that are navigation rather than prose.
   A link inside a paragraph is 19px tall and that is correct - it is a word in
   a sentence, and padding it would break the line. But the footer columns and
   a policy page's contents list are the way a phone gets around this site, and
   a 19px row is a target you have to aim at. Padded to 44px there, and there
   only. Measured over CDP with a real 360px viewport, since headless Edge
   clamps --window-size and would have reported the desktop layout. */
@media (hover: none), (max-width: 767px) {
  .footer-col li,
  .footer-contact li { margin-bottom: 0; }

  .footer-col ul a {
    display: block;
    padding: 12px 0;
    min-height: 44px;
  }

  .footer-contact li { padding: 10px 0; }

  .doc-toc li { margin-bottom: 0; }
  .doc-toc ol a {
    display: block;
    padding: 11px 0;
    min-height: 44px;
  }
}

/* --- 10b. Large displays ---------------------------------------------------
   The container and the type scale are handled in sections 1 and 2 (--wrap and
   the root font-size). What is left is column counts and the vertical rhythm:
   with a 1800px content column, a three-across card grid gives 580px cards
   holding two lines of text, which reads as a grid that ran out of things to
   put in it. Four across brings them back to ~430px, close to what they are at
   1440px, and the extra width goes into showing more at once - which is the
   point of the larger screen. */

@media (min-width: 1700px) {
  .grid { gap: 24px; }

  /* More air between sections, proportional to a page that is now wider and
     set in larger type. */
  .section { padding: clamp(76px, 5.2vw, 116px) 0; }
  .hero { padding: clamp(84px, 5.6vw, 128px) 0 clamp(72px, 4.6vw, 104px); }

  /* A wider measure for the hero copy specifically. Its column is over 900px
     here, so a 40em cap left ~190px of the LEFT column empty before the gap to
     the diagram even started - which read as the two halves drifting apart.
     45em is still a comfortable line at this size. */
  .hero-inner { max-width: 45em; }

  /* The one heading that is doing a display job rather than a labelling one.
     Raised here rather than by lifting the clamp ceiling in section 2, because
     that ceiling is reached at 1440px too and this must not change anything
     there. */
  .hero h1 { font-size: 3.35rem; }

  /* The layer cards are ~800px wide here, and stacking the chips under the
     name left the right two-thirds of each one empty - a card can be wide or
     it can be top-heavy, not both. Laid out along the row instead: name at one
     end, chips at the other, which is what the width is for. */
  .stack-visual-cap,
  .hero-visual { max-width: 44em; }

  .stack-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .stack-name { margin-bottom: 0; }
  .stack-chips { justify-content: flex-end; }
}

/* The fourth column waits for the container to be wide enough to pay for it.
   Introduced at 1700px it made cards SMALLER than they are on a 1440px laptop
   - 327px against 387px - because --wrap has only reached ~1420px there and
   four ways into it is thinner than three. Four columns are worth having once
   they are no narrower than three columns at 1440px, and 74vw reaches the
   1660px of container that needs at about 2240px of viewport. */
@media (min-width: 2240px) {
  .grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

@media print {
  .site-header, .site-footer, .doc-toc, .btn { display: none !important; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  body { font-size: 11pt; }
}