/* site.css - company-registration-belgium.com
 *
 * Part 1 is tokens.css copied verbatim (the single source of truth, /law-design-site step 3).
 * Re-copied 2026-09-25 after the owner replaced the reference's rose-to-purple accent with the
 * Belgian black-and-yellow pair. Part 2 is the page component layer: it reads LAYER 3 component
 * tokens and the gradient classes only, never a primitive.
 */

/* =================================================================================================
 * PART 1 - TOKENS (verbatim from tokens.css)
 * ============================================================================================== */

:root {
  /* ---------------------------------------------------------------
   * LAYER 1 - PRIMITIVES. Raw values. No meaning attached.
   * ------------------------------------------------------------- */

  /* Greys: Tailwind neutral/zinc, as the reference uses them */
  --c-white:        oklch(100.0% 0.000 89.9);   /* #ffffff */
  --c-grey-50:      oklch(98.5% 0.002 247.8);   /* #f9fafb */
  --c-grey-200:     oklch(92.8% 0.006 264.5);   /* #e5e7eb */
  --c-grey-500:     oklch(55.1% 0.023 264.4);   /* #6b7280 */
  --c-grey-800:     oklch(27.8% 0.030 256.8);   /* #1f2937 */
  --c-neutral-800:  oklch(26.9% 0.000 89.9);    /* #262626 */
  --c-neutral-900:  oklch(20.5% 0.000 89.9);    /* #171717 */
  --c-black:        oklch(0.0% 0.000 0);        /* #000000 - Belgian black, the inverse ground */
  --c-black-soft:   oklch(21.8% 0.000 0);       /* #1a1a1a - black that is not a void on a large fill */

  /* Brand gradient, owner's decision 2026-09-25: the Belgian pair, black plus yellow.
     This REPLACES the reference's rose-to-purple, which sat 9.6 degrees from
     company-registration-austria.com's accent and failed the batch diversity gate.
     The animation and every gradient surface are kept exactly as the reference builds them;
     only the two stops changed. Measured: yellow is 73.5 degrees from the Austrian hue,
     amber 51.6 - both clear of the 20-degree fail band. */
  --c-yellow-500:   oklch(90.2% 0.168 99.5);    /* #FAE042 - the Belgian yellow, accent stop 1 */
  --c-amber-600:    oklch(78.5% 0.164 77.6);    /* #F2A900 - stop 2, and the hover state */
  --c-yellow-50:    oklch(97.7% 0.039 95.8);    /* #FFF8DB - pale tint for soft accent grounds */
  --c-bluegrey-600: oklch(52.1% 0.030 248.4);   /* #5C6B7A - Brussels blue-grey, heritage secondary */

  /* Type */
  --f-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale, measured from the reference (px, desktop) */
  --t-60: 3.75rem;   /* h1 desktop, weight 700, letter-spacing -3 */
  --t-48: 3rem;      /* section lead, 700, -2.4 */
  --t-24: 1.5rem;    /* h2, 700 */
  --t-20: 1.25rem;   /* h3 700 / lede 400 */
  --t-18: 1.125rem;
  --t-16: 1rem;      /* body, 400 - 20% of the reference's text */
  --t-15: 0.9375rem;
  --t-14: 0.875rem;  /* ui, 400 - 32% of the reference's text, its real workhorse */
  --t-13: 0.8125rem;
  --t-12: 0.75rem;

  /* Spacing, the reference's rhythm */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;

  /* Radii. The reference declares --radius: .625rem, but its markup actually uses
     Tailwind's rounded-full on every CTA and rounded-2xl (1rem) on panels and the
     form submit. Both are here; the component layer picks what the markup really uses. */
  --r-sm: 0.375rem;
  --r-md: 0.625rem;   /* the declared --radius */
  --r-2xl: 1rem;      /* rounded-2xl: hero panel, form submit, large blocks */
  --r-full: 9999px;   /* rounded-full: every button, pill badge, icon circle */

  /* Shadows: the reference ships 29; three carry almost all of its surfaces */
  --sh-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sh-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sh-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Breakpoints (documented here, used in media queries) */
  --bp-sm: 390px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px;

  /* ---------------------------------------------------------------
   * LAYER 2 - SEMANTIC. What a value means on this site.
   * ------------------------------------------------------------- */

  --color-bg:            var(--c-white);
  --color-surface:       var(--c-grey-50);
  --color-inverse:       var(--c-black-soft);
  --color-text:          var(--c-grey-800);
  --color-text-muted:    var(--c-grey-500);
  --color-text-inverse:  var(--c-white);
  --color-border:        var(--c-grey-200);

  /* The accent is the Belgian pair, black plus yellow (owner, 2026-09-25), carried on the
     reference's gradient mechanism and animation. This DEPARTS from RULE-THEMATIC-DESIGN's "the
     accent is interactive, not decorative": the reference fills one full-width band with it and we
     copy that shape. Recorded in DESIGN.md section 4 and in the registry, not silently taken.
     Everywhere else the gradient stays on interactive things: buttons, the nav pill, icon circles,
     the hero panel. */
  --color-accent:          var(--c-yellow-500);
  --color-accent-2:        var(--c-amber-600);
  --color-accent-tint:     var(--c-yellow-50);
  --color-accent-secondary: var(--c-bluegrey-600);   /* heritage secondary: infographics, muted marks */

  /* THE TEXT ON THE ACCENT IS BLACK, NOT WHITE, AND THIS IS NOT A STYLE CHOICE.
     Measured: white on #FAE042 is 1.33:1, which is illegible and fails WCAG outright;
     black on #FAE042 is 15.81:1 and black on the amber stop is 10.45:1, so black clears AAA
     across the whole ramp. Anything painted with --color-accent takes this foreground. */
  --color-accent-contrast: var(--c-black);
  --gradient-brand: linear-gradient(135deg, var(--c-yellow-500) 0%, var(--c-amber-600) 100%);

  /* Links, for the same reason. A pale yellow cannot be a text colour on white (1.03:1), so the
     accent moves off the glyphs and onto the underline, and the hover becomes the same marker
     swipe the highlighted heading word uses. The link text itself stays body-dark, 12.6:1. */
  --color-link:           var(--color-text);
  --color-link-underline: var(--c-amber-600);   /* the deeper stop: a #FAE042 underline is invisible */
  --color-link-hover-bg:  var(--c-yellow-500);

  /* Black is the primary UI colour of the Belgian pair. Red is deliberately absent even as a
     hover: the Belgian flag red #C4121F sits at hue 26.0, which is the Austrian accent's hue
     exactly, and reintroducing it anywhere invites the collision back. Hover deepens to amber. */
  --color-primary:         var(--c-black);
  --color-primary-hover:   var(--c-black-soft);

  --font-body:    var(--f-sans);
  --font-heading: var(--f-sans);   /* the reference's --font-heading resolves to the same face */

  --fs-h1: var(--t-60);  --fs-h2: var(--t-24);  --fs-h3: var(--t-20);
  --fs-body: var(--t-16); --fs-ui: var(--t-14); --fs-small: var(--t-13);

  --lh-tight: 1.0;    /* 60/60 on the h1, as measured */
  --lh-snug: 1.4;
  --lh-body: 1.5;     /* 16/24 */

  --ls-h1: -0.05em;   /* -3px at 60px */
  --ls-h2: -0.02em;

  --space-section: var(--s-24);
  --space-block:   var(--s-12);
  --space-item:    var(--s-4);

  --radius-card:   var(--r-md);
  --radius-button: var(--r-full);   /* the markup's rounded-full, not the declared .625rem */
  --radius-panel:  var(--r-2xl);    /* rounded-2xl: hero panel, form submit */
  --radius-input:  var(--r-md);
  --radius-pill:   var(--r-full);

  --shadow-card:  var(--sh-sm);
  --shadow-float: var(--sh-md);
  --shadow-modal: var(--sh-lg);

  --container-max: 1200px;
  --container-pad: var(--s-6);
  --container-pad-phone: var(--s-4);   /* >= 12px to the screen edge, layout-lint */

  /* ---------------------------------------------------------------
   * LAYER 3 - COMPONENT. Only these are used in page CSS.
   * ------------------------------------------------------------- */

  --header-height:        72px;        /* <= 90px, layout-lint */
  --header-bg:            var(--color-bg);
  --header-border:        var(--color-border);

  --hero-bg:              var(--color-bg);
  --hero-wash:            var(--gradient-brand);
  --hero-title-size:      var(--fs-h1);
  --hero-title-weight:    700;

  --card-bg:              var(--color-bg);
  --card-border:          var(--color-border);
  --card-radius:          var(--radius-card);
  --card-shadow:          var(--shadow-card);
  --card-pad:             var(--s-6);

  --btn-radius:           var(--radius-button);
  --btn-pad-y:            var(--s-3);
  --btn-pad-x:            var(--s-6);
  --btn-primary-fg:       var(--color-accent-contrast);  /* BLACK on the yellow ramp: white is 1.33:1 */
  --btn-ghost-border:     var(--color-border);

  --cta-band-bg:          var(--color-surface);
  --cta-band-radius:      var(--radius-card);
  --cta-band-pad:         var(--s-12);

  --faq-border:           var(--color-border);
  --faq-pad:              var(--s-5);

  --table-border:         var(--color-border);
  --table-head-bg:        var(--color-surface);
  --table-cell-pad:       var(--s-3);

  --form-field-border:    var(--color-border);
  --form-field-radius:    var(--radius-input);
  --form-field-pad:       var(--s-3);
  --form-focus-ring:      0 0 0 3px oklch(78.5% 0.164 77.6 / 0.55);   /* amber, raised alpha: a pale yellow ring is not visible */

  --footer-bg:            var(--color-bg);
  --footer-border:        var(--color-border);
  --footer-text:          var(--color-text-muted);

  --infographic-stroke:   var(--color-border);
  --infographic-accent:   var(--color-accent);
  --infographic-label:    var(--fs-small);
}

/* ------------------------------------------------------------------
 * THE FLOWING GRADIENT - copied exactly from the reference's own theme CSS
 * (the client's design folder, `..._files/style(1).css`). Same keyframes, same 200% 200% size,
 * same 5s ease infinite timing, same four variants, same button treatment.
 * ---------------------------------------------------------------- */

@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 1. Hero wash */
.hero-flowing-gradient {
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
}

/* 2. The highlighted word in a heading - the reference's most recognisable habit, kept, but
   inverted because the palette changed.
   The reference paints the word ITSELF in the gradient (`background-clip: text`). That works for
   its rose-to-purple, which is mid-dark on white. It does NOT work for the Belgian yellow:
   #FAE042 as text on a white ground measures 1.03:1, i.e. invisible, and no amount of weight
   fixes a contrast ratio. Measured in the browser before changing anything.
   So the gradient moves behind the word instead of into it: black text on an animated yellow
   swipe, 15.81:1. Same animation, same one-word-per-heading pattern, same yellow doing the
   signalling - and legible. `box-decoration-break: clone` keeps the swipe intact when a heading
   wraps mid-highlight. */
.text-flowing-gradient {
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
  color: var(--color-accent-contrast);
  padding: 0 0.18em;
  border-radius: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: inline;
}

/* 3. A full-width section filled with the gradient.
   The reference draws exactly one of these and reaches for its *hero* class to do it, which is a
   misleading name for a band two thirds down the page. Its theme CSS does declare
   `.csg-bg-flowing-gradient` for the job, and then never uses it. We keep the sensible name for the
   live purpose: same declarations as the hero class, used for the band. (`.csg-bg-static-gradient`,
   the unanimated twin, has no use here either and is not carried over.) */
.bg-flowing-gradient {
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
  color: var(--color-accent-contrast);
}

/* The primary CTA as the reference's markup really builds it: the hero gradient class on a
   pill, white bold 14px, opacity on hover. (Its theme CSS also declares a .btn-primary with
   a shadow and a lift, but that rule is dead code - it appears nowhere in the markup, so it
   is not reproduced here.) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
  color: var(--btn-primary-fg);
  border: none;
  border-radius: var(--radius-button);   /* rounded-full */
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-ui);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .3s ease;
}
.btn-primary:hover,
.btn-primary:focus { opacity: 0.9; }

/* The form submit: same gradient, full width, rounded-2xl, heavier padding */
.btn-submit {
  width: 100%;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
  color: var(--btn-primary-fg);
  border: none;
  border-radius: var(--radius-panel);    /* rounded-2xl */
  padding: var(--s-4) var(--s-6);
  font-weight: 600;
  transition: opacity .3s ease;
}
.btn-submit:hover { opacity: 0.9; }

/* The nav pill badge and the gradient icon circles */
.pill-gradient {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
  color: var(--btn-primary-fg);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-12);
  font-weight: 700;
}
.icon-circle-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
  color: var(--btn-primary-fg);
  border-radius: var(--radius-pill);
  padding: var(--s-3);
}

/* Accessibility floor (RULE-ACCESSIBILITY): the gradient stays, the motion stops.
   The colours are unchanged, so the design reads the same when motion is off. */
@media (prefers-reduced-motion: reduce) {
  .hero-flowing-gradient,
  .text-flowing-gradient,
  .bg-flowing-gradient,
  .btn-primary,
  .btn-submit,
  .pill-gradient,
  .icon-circle-gradient {
    animation: none;
    background-position: 0% 50%;
  }
}

/* =================================================================================================
 * PART 2 - PAGE COMPONENTS
 * ============================================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-item);
  overflow-wrap: break-word;
}

/* H1: dark, never the gradient. Four steps, 30 -> 36 -> 48 -> 60px, as the reference sets them.
   The 30px and 36px steps have no token of their own in tokens.css; the two upper steps use
   --t-48 and --t-60, which do. */
h1 {
  font-size: 1.875rem;               /* 30px, phone */
  font-weight: var(--hero-title-weight);
  line-height: 1.08;
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--t-20);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h2);
}

h3 { font-size: var(--t-18); font-weight: 700; line-height: var(--lh-snug); }
h4 { font-size: var(--t-16); font-weight: 700; line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-item); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
a:hover, a:focus-visible {
  background: var(--color-link-hover-bg);
  text-decoration-color: var(--color-accent-contrast);
}
a:hover { color: var(--color-primary); }

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

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

/* Visually hidden. This is a utility, so it has to beat any component rule that also matches the
   element: the honeypot is an `input[type=text]` inside `.enquiry`, and that selector's `width: 100%`
   outranks a plain class. Combined with the `position: absolute` here it stretched the hidden input
   to the full viewport and gave the page 143px of horizontal scroll. Hence !important. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.lead { color: var(--color-text-muted); max-width: 64ch; }

/* ---- buttons -------------------------------------------------------------------------------- */
/* .btn-primary, .btn-submit, .pill-gradient and .icon-circle-gradient come from Part 1 as supplied.
   Only the secondary/ghost pill and the on-gradient variants are defined here. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .3s ease;
}

.btn--ghost {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover { background: var(--color-surface); color: var(--color-text); }

.btn--onband { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.btn--onband:hover { opacity: 0.9; color: var(--color-text); }
.btn--onband-ghost { background: transparent; color: var(--color-accent-contrast); border-color: var(--color-accent-contrast); }
.btn--onband-ghost:hover { opacity: 0.9; color: var(--color-accent-contrast); }

.btn-submit[disabled], .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---- header --------------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.site-header__inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.wordmark {
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-size: var(--fs-ui);
  color: var(--color-text);
  text-decoration: none;
}
.site-nav a:hover { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-link-underline); text-decoration-thickness: 2px; }

/* The header CTA is an <a> inside .site-nav, so the two rules above outrank .btn-primary's own
   colour and painted the button's label in body text over the gradient. Restore the button's
   foreground for the button, at a specificity that wins. */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover { color: var(--btn-primary-fg); }

/* ---- header services menu ------------------------------------------------------------------- */
/* wiring-check's nav-coverage requires every service page to be reachable from the home header, and
   there are 21 of them. Opens on hover AND on focus-within, so it needs no JavaScript and keyboard
   users get it for free; the button carries aria-expanded for screen readers, toggled by the nav
   script. On a phone it is not a dropdown at all: it renders inline inside the open burger menu. */
.has-menu { position: relative; }
.menu-toggle {
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--color-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.menu-toggle::after {
  content: "";
  width: .4em; height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.1em, -.1em);
}
.menu-toggle:hover { text-decoration: underline; text-decoration-color: var(--color-link-underline); text-decoration-thickness: 2px; }

.mega {
  position: absolute;
  /* No gap between the button and the panel: a 16px dead zone here meant the pointer lost :hover on
     the way down and the menu shut before it could be reached. The visual gap is padding-top on the
     panel instead, so the whole path stays inside the hover area. */
  top: 100%;
  padding-top: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  min-width: 46rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 60;
}
.has-menu:hover > .mega,
.has-menu:focus-within > .mega,
.menu-toggle[aria-expanded="true"] + .mega { opacity: 1; visibility: visible; }

.mega__cols {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-modal);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-8);
}
.menu-sub {
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--s-2);
}
.mega ul {
  display: block;            /* .site-nav ul is flex; without this the groups lay out sideways */
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega li { display: block; }
.mega li + li { margin-top: var(--s-2); }
.mega a {
  font-size: var(--fs-ui);
  color: var(--color-text);
  text-decoration: none;
}
.mega a:hover, .mega a:focus-visible {
  background: var(--color-link-hover-bg);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-contrast);
}

@media (max-width: 767px) {
  /* inline inside the burger menu: a hover dropdown is unusable on touch */
  .mega {
    position: static; transform: none; min-width: 0;
    opacity: 1; visibility: visible;
    border: 0; box-shadow: none; padding: var(--s-3) 0 0;
  }
  .mega__cols { grid-template-columns: 1fr; gap: var(--s-5); }
  .menu-toggle::after { display: none; }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--color-text); }

/* ---- layout rhythm -------------------------------------------------------------------------- */

main { display: block; }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-block); }
.section--surface { background: var(--color-surface); }
.section > .container > * + * { margin-top: var(--space-block); }
.section__head { max-width: 72ch; }
.section__head > * + * { margin-top: var(--space-item); }

/* ---- hero ----------------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--hero-bg);
  padding-block: var(--s-12) var(--space-block);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: var(--s-10);
  align-items: center;
}

.hero__kicker {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.hero__sub { font-size: var(--t-18); color: var(--color-text-muted); max-width: 54ch; }

.hero__facts {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.hero__facts li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--fs-ui);
  color: var(--color-text);
}
.hero__facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.hero .btn-row { margin-top: var(--s-8); }

/* The reference's hero image sits on a large gradient panel, rounded-2xl, pinned bottom-left
   at 80% of the media box in both directions. */
.hero__media { position: relative; }
.hero__panel {
  position: absolute;
  left: 0; bottom: 0;
  width: 80%; height: 80%;
  border-radius: var(--radius-panel);
  pointer-events: none;
}
.hero__img {
  position: relative;
  width: 100%;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-modal);
}

/* The service page's definition intro sits in the hero band rather than in a section of its own:
   the SERP for this page is definitional, and the composition gate caps a service page at 10
   sections. Folded, not dropped. */
/* .hero__intro also carries .container. Capping the BOX at 76ch made .container's `margin-inline:
   auto` centre it, so the definition block sat 193px right of the H1 on every page that has one;
   zeroing the margin then threw it to the viewport edge, because the block is a direct child of
   <main>. Keep the box aligned like every other container and cap the LINE LENGTH instead. */
.hero__intro { position: relative; margin-top: var(--space-block); }
.hero__intro > * { max-width: 76ch; }
.hero__intro > * + * { margin-top: var(--space-item); }

/* The home page must link every service page from <main> (wiring-check home-services), and ten of
   them have a written card. The rest are listed as plain navigation rather than given invented
   marketing copy: a link list is honest, a fabricated card is not. */
.services-more__lead { margin-top: var(--space-block); font-weight: 700; }
.services-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-2) var(--s-6);
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}

/* ---- cards ---------------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
}
.card h3, .card h4 { margin-bottom: var(--s-2); }
.card p { font-size: var(--fs-ui); color: var(--color-text-muted); }

.card .icon-circle-gradient { margin-bottom: var(--s-4); }
/* The reference draws its icons at h-6 and h-8 (24 and 32px); 18px read as an afterthought. */
.icon-circle-gradient { padding: var(--s-4); }
.icon-circle-gradient svg { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.icon-circle-gradient--lg { padding: var(--s-5); }
.icon-circle-gradient--lg svg { width: 32px; height: 32px; }
/* A flat accent-tinted square for inline list marks: lighter than a gradient circle, used where a
   full circle would shout. */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-card);
  color: var(--color-text);
}
.icon-tile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; }

/* ---- steps ---------------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.step {
  counter-increment: step;
  position: relative;
  padding: var(--card-pad) var(--card-pad) var(--card-pad) calc(var(--card-pad) + var(--s-10));
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  font-size: var(--fs-ui);
  color: var(--color-text-muted);
}
.step::before {
  content: counter(step);
  position: absolute;
  left: var(--card-pad);
  top: var(--card-pad);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--fs-small);
  font-weight: 700;
}
.step strong { color: var(--color-text); }

/* ---- checklist ------------------------------------------------------------------------------ */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  max-width: 76ch;
}
.checklist li {
  position: relative;
  padding-left: var(--s-8);
  font-size: var(--fs-ui);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

/* ---- tables --------------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--table-border);
  border-radius: var(--card-radius);
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  text-align: left;
}

caption {
  caption-side: bottom;
  padding: var(--s-3) var(--table-cell-pad);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  text-align: left;
}

th, td {
  padding: var(--table-cell-pad);
  border-bottom: 1px solid var(--table-border);
  vertical-align: top;
}
thead th { background: var(--table-head-bg); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* ---- figures and infographics --------------------------------------------------------------- */

.figure { margin: 0; }
.figure__scroll { overflow-x: auto; }
.figure svg { display: block; width: 100%; min-width: 680px; height: auto; }
/* The 8-step timeline needs more room before its labels collide; below that width it scrolls
   inside .figure__scroll, so the page itself never scrolls sideways. */
.figure--wide svg { min-width: 920px; }
.figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.figure__photo { width: 100%; border-radius: var(--radius-panel); }
.ig-label { font-size: 13px; fill: var(--color-text); font-family: var(--font-body); }
.ig-muted { font-size: 12px; fill: var(--color-text-muted); font-family: var(--font-body); }
.ig-num   { font-size: 13px; font-weight: 700; fill: var(--color-accent-contrast); font-family: var(--font-body); }
.ig-value { font-size: 14px; font-weight: 700; fill: var(--color-text); font-family: var(--font-body); }

/* ---- cta band ------------------------------------------------------------------------------- */

.cta-band {
  background: var(--cta-band-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--cta-band-radius);
  padding: var(--cta-band-pad);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--s-3); }
.cta-band p { color: var(--color-text-muted); max-width: 56ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--s-6); }

/* The one full-width gradient band on the page (the reference has exactly one). */
.band { color: var(--color-accent-contrast); text-align: center; padding-block: var(--s-16); }
.band h2, .band p { color: var(--color-accent-contrast); }
.band p { font-size: var(--t-20); font-weight: 600; max-width: 56ch; margin-inline: auto; }
.band .btn-row { justify-content: center; }
.band > .container > * + * { margin-top: var(--s-5); }

/* ---- faq ------------------------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--faq-border); max-width: 76ch; }

.faq details { border-bottom: 1px solid var(--faq-border); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--faq-pad) var(--s-8) var(--faq-pad) 0;
  position: relative;
  font-weight: 700;
  font-size: var(--t-16);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: var(--s-2);
  top: calc(var(--faq-pad) + 0.5em);
  width: 9px; height: 9px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq__a { padding: 0 0 var(--faq-pad); }
.faq .faq__a p { font-size: var(--fs-ui); color: var(--color-text-muted); }

/* ---- form ----------------------------------------------------------------------------------- */

.enquiry { max-width: 34rem; display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field > span { font-size: var(--fs-ui); font-weight: 600; }
.hint { font-weight: 400; font-style: normal; color: var(--color-text-muted); }

.enquiry input[type="text"],
.enquiry input[type="email"],
.enquiry select,
.enquiry textarea {
  width: 100%;
  padding: var(--form-field-pad);
  border: 1px solid var(--form-field-border);
  border-radius: var(--form-field-radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-ui);
}
.enquiry textarea { min-height: 7.5rem; resize: vertical; }
.enquiry input:focus-visible,
.enquiry select:focus-visible,
.enquiry textarea:focus-visible {
  outline: none;
  border-color: var(--color-link-underline);   /* amber: a pale-yellow focus border is not visible on grey */
  box-shadow: var(--form-focus-ring);
}

.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-ui); }
.consent input { margin-top: 0.25em; }

.cf-turnstile { min-height: 65px; }

.form-note { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---- trust ---------------------------------------------------------------------------------- */

.trust {
  display: grid;
  gap: var(--s-8);
  align-items: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--card-pad);
  background: var(--card-bg);
}
.trust__meta { font-size: var(--fs-ui); color: var(--color-text-muted); }
.trust img { width: 100%; border-radius: var(--radius-panel); }

/* ---- related -------------------------------------------------------------------------------- */

.related { display: grid; gap: var(--s-5); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

/* The interlinks block that scripts/rebuild-interlinks.mjs writes between its markers (client R9).
   Deliberately plain text links, not bordered cards: a card grid here would make this a fourth
   `cards` section and break the composition gate's card-grid limit on a service page. It is a
   direct child of <main>, so it carries its own container width and gutter. */
.related-links {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-block) var(--container-pad);
}
.related-links__title { font-size: var(--t-18); font-weight: 700; margin-bottom: var(--s-5); }
.related-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2) var(--s-6);
  grid-template-columns: 1fr;
}
.related-links__list a {
  font-size: var(--fs-ui);
  color: var(--color-text);
  /* keep the underline: without it these read as plain text, and a list of unmarked links in a
     block headed "Related pages" is the one place a reader is meant to click */
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.related-links__list a:hover { color: var(--color-text); background: var(--color-link-hover-bg); text-decoration: underline; }

/* The enquiry form keeps its own surface panel now that it shares a section with the cost table. */
.form-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--card-pad);
}
.form-panel > * + * { margin-top: var(--space-item); }


/* ---- footer --------------------------------------------------------------------------------- */

.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  padding-block: var(--s-12);
  color: var(--footer-text);
  font-size: var(--fs-small);
}
.site-footer__grid { display: grid; gap: var(--s-10); }
.footer-brand p { margin-top: var(--s-3); max-width: 44ch; }
.footer-services__cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.site-footer .footer-sub {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--s-2);
}
.footer-meta { display: grid; gap: var(--s-8); }
.site-footer .footer-head {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--s-3);
}
.site-footer .wordmark { display: inline-block; margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--color-text); text-decoration-color: var(--color-link-underline); }
.site-footer__legal {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--footer-border);
  display: grid;
  gap: var(--s-2);
}

/* =================================================================================================
 * RESPONSIVE
 * ============================================================================================== */

@media (max-width: 767px) {
  :root { --space-section: var(--s-16); --space-block: var(--s-8); --cta-band-pad: var(--s-8); }
  .container { padding-inline: var(--container-pad-phone); }
  .related-links { padding-inline: var(--container-pad-phone); }
  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0; right: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    padding: var(--s-4) var(--container-pad-phone) var(--s-6);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .nav-toggle { display: flex; }
  .hero { padding-block: var(--s-10) var(--s-8); }
  .hero__media { padding: 0 0 var(--s-5) var(--s-5); }
}

@media (min-width: 640px) {
  h1 { font-size: 2.25rem; }             /* 36px */
  .footer-services__cols { grid-template-columns: repeat(2, 1fr); }
  .related-links__list { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .related { grid-template-columns: repeat(2, 1fr); }
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--t-48); }         /* 48px */
  h2 { font-size: var(--fs-h2); }        /* 24px */
  h3 { font-size: var(--fs-h3); }        /* 20px */
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards--four { grid-template-columns: repeat(4, 1fr); }
  .related { grid-template-columns: repeat(3, 1fr); }
  .related-links__list { grid-template-columns: repeat(3, 1fr); }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .trust { grid-template-columns: 1.6fr 1fr; }
  .steps { gap: var(--s-5); }
  .site-footer__grid { grid-template-columns: 1.05fr 2.7fr 0.9fr; }
  .footer-services__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  h1 { font-size: var(--hero-title-size); }   /* 60px */
}

/* =================================================================================================
 * MOTION AND DETAIL - measured from the reference save, not invented.
 * What that page actually uses, by count in its own markup: hover:-translate-y x7,
 * transition-transform x9, hover:shadow x23, backdrop-blur x16, animation-delay x14 (the stagger),
 * and one keyframe of its own: fade-in-up  0%{opacity:0;translateY(10px)} -> to{opacity:1;none}.
 * Everything below is those patterns rebuilt; no markup, asset or class of theirs is copied.
 * ============================================================================================== */

@keyframes fade-in-up {
  0%  { opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}

/* Entry animation. .reveal is the resting state; .is-in is added by an IntersectionObserver, so a
   section animates when it is reached rather than all at once on load. Without JS nothing hides:
   the no-js rule below keeps every element visible, which is why .reveal does not set opacity:0
   on its own. */
.js .reveal { opacity: 0; }
.js .reveal.is-in {
  animation: fade-in-up .6s var(--animation-delay, 0s) cubic-bezier(.21, 1.02, .73, 1) forwards;
}
/* The stagger: children animate one after another, as the reference's 14 animation-delay values do. */
.js .reveal-group > * { opacity: 0; }
.js .reveal-group.is-in > * {
  animation: fade-in-up .6s cubic-bezier(.21, 1.02, .73, 1) forwards;
}
.js .reveal-group.is-in > :nth-child(1) { animation-delay: .00s; }
.js .reveal-group.is-in > :nth-child(2) { animation-delay: .07s; }
.js .reveal-group.is-in > :nth-child(3) { animation-delay: .14s; }
.js .reveal-group.is-in > :nth-child(4) { animation-delay: .21s; }
.js .reveal-group.is-in > :nth-child(5) { animation-delay: .28s; }
.js .reveal-group.is-in > :nth-child(6) { animation-delay: .35s; }
.js .reveal-group.is-in > :nth-child(7) { animation-delay: .42s; }
.js .reveal-group.is-in > :nth-child(8) { animation-delay: .49s; }
.js .reveal-group.is-in > :nth-child(9) { animation-delay: .56s; }

/* Hover lift + deeper shadow: the reference's most frequent interaction by far. */
.card, .related-links__list a, .step {
  transition: transform .25s cubic-bezier(.21, 1.02, .73, 1), box-shadow .25s ease;
}
.card:hover, .step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-modal);
}
.btn-primary, .btn-submit, .btn { transition: transform .2s ease, opacity .3s ease, box-shadow .25s ease; }
.btn-primary:hover, .btn-submit:hover, .btn:hover { transform: translateY(-2px); }

/* Frosted chips floating over a photo - the reference puts
   `bg-white/90 backdrop-blur-sm rounded-full shadow-lg` badges on its images. */
.media { position: relative; }
.media-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--color-text);
  box-shadow: var(--shadow-float);
  z-index: 2;
}
.media-chip--tl { top: var(--s-4); left: var(--s-4); }
.media-chip--br { right: var(--s-4); bottom: var(--s-4); }
.media-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* The tinted accent pill the reference opens its hero with (bg-rose-500/10 + border + backdrop-blur). */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--color-accent-tint);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--s-5);
}
.eyebrow-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Background detail: a soft off-white wash and a faint dot grid, so a long white page has texture
   instead of being flat. Both sit behind content and never touch contrast. */
.section--tinted {
  position: relative;
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--color-accent-tint) 0%, transparent 60%),
    var(--color-surface);
}
.section--dotted { position: relative; }
.section--dotted::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.section--dotted > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in,
  .js .reveal-group > *, .js .reveal-group.is-in > * { opacity: 1; animation: none; }
  .card:hover, .step:hover,
  .btn-primary:hover, .btn-submit:hover, .btn:hover { transform: none; }
}

/* ---- logo mark ------------------------------------------------------------------------------- */
/* DESIGN-REGISTRY rule 6: the mark type must not repeat another site of the batch. company-in-italy
   shipped a square enclosed mark, so this is a rounded gradient tile carrying the abbreviation CRB,
   set beside the wordmark rather than enclosing it. */
.wordmark { display: inline-flex; align-items: center; gap: var(--s-3); }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  background-size: 200% 200%;
  animation: gradient-flow 5s ease infinite;
  color: var(--color-accent-contrast);
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}
.site-footer .logo-mark { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .logo-mark { animation: none; background-position: 0% 50%; } }

/* ---- consent banner -------------------------------------------------------------------------- */
/* Styled from this site's own tokens (master.md: not a copy of a sister site's banner). */
.consent-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-modal);
}
.consent-bar__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--s-5) var(--container-pad);
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
}
.consent-bar__text { margin: 0; flex: 1 1 22rem; font-size: var(--fs-ui); color: var(--color-text); }
.consent-bar__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 767px) {
  .consent-bar__inner { padding-inline: var(--container-pad-phone); }
  .consent-bar__actions { width: 100%; }
  .consent-bar__actions > * { flex: 1; justify-content: center; }
}