/* ==========================================================================
   THEME — every colour on the site. Change a value here and it updates everywhere.
   Brand: WCC Trade brand language v1.0 (light, official). Colours from the logo.
   ========================================================================== */
:root {
  --accent: #E8601A;          /* saffron: rules, highlights, illustration lines */
  --accent-fill: #2B3189;     /* filled buttons and the call-to-action band (WCC Navy) */
  --accent-text: #B84A0E;     /* small accent text: numbers, labels, current page (Saffron Deep) */
  --on-accent: #FFFFFF;       /* text on filled buttons and the band */
  --on-dark-button: #2B3189;  /* text on the light button inside the band */

  --bg: #F7F7F4;              /* page background (paper) */
  --bg-raised: #FFFFFF;       /* alternate sections, form fields */

  --heading: #2B3189;         /* headlines (WCC Navy) */
  --text: #1A1F2E;            /* main text (Ink) */
  --text-2: #2C3245;          /* large body copy */
  --text-muted: #565D6E;      /* secondary copy (Slate) */
  --text-label: #646B7D;      /* small mono labels, captions */
  --text-faint: #7D8394;      /* de-emphasised half of the home statement */

  --line-soft: #E1E3DC;       /* section dividers */
  --line: #D7DAD3;            /* list rules */
  --line-strong: #BFC3BA;     /* button outlines, card borders */
  --line-bold: #9BA2AE;       /* link underlines, radar ticks */

  --logo-plate: #FFFFFF;      /* panels behind OEM logos */
  --success: #3D9A3B;         /* India Green: form sent tick */
  --error: #B3261E;           /* form error text */
  --error-border: #C0392B;    /* invalid form field outline */

  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
.wcc-page { background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; min-height: 100vh; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

/* headlines in navy, except on the navy band */
main h1, main h2, main h3 { color: var(--heading); }
main section[style*="accent-fill"] h2 { color: inherit; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-text); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main section[style*="accent-fill"] a:hover { color: inherit; opacity: .85; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent-fill); color: var(--on-accent); padding: 12px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.skip-link:focus { top: 12px; color: var(--on-accent); }

/* header: sticky, desktop links above 1080px, Menu button below */
.wcc-page > header { position: sticky; top: 0; z-index: 50; }
.wcc-links { display: flex; }
.wcc-cta-top { display: inline-flex; }
.wcc-menu { display: none; }
@media (max-width: 1080px) {
  .wcc-links, .wcc-cta-top { display: none !important; }
  .wcc-menu { display: inline-flex; }
}
#wcc-mobile-nav { background: var(--bg); box-sizing: border-box; height: calc(100vh - 85px); height: calc(100dvh - 85px); overflow-y: auto; overscroll-behavior: contain; }

/* form controls */
input, select, textarea { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; }
select { background-color: var(--bg-raised) !important; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) !important; background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50% !important; background-size: 6px 6px !important; background-repeat: no-repeat !important; padding-right: 44px !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent) !important; }
[aria-invalid="true"] { border-color: var(--error-border) !important; }
button[disabled] { opacity: 0.6; cursor: progress !important; }

/* small phones: tighten the very large display type a touch */
@media (max-width: 380px) {
  h1 { font-size: 38px !important; }
}

/* ==========================================================================
   MOTION — all of it switches off for visitors who ask for reduced motion.
   ========================================================================== */

/* radar sweep on the home page */
@keyframes wccSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wcc-sweep { transform-origin: 300px 300px; animation: wccSweep 9s linear infinite; }

/* page arrival: soft fade, plus native cross-fade between pages where supported */
@view-transition { navigation: auto; }
@keyframes wccFade { from { opacity: 0; } to { opacity: 1; } }
.wcc-page { animation: wccFade .35s ease-out both; }

/* hero: headline, copy and buttons rise in on load */
@keyframes wccRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
main > section:first-of-type h1,
main > section:first-of-type h1 ~ p,
main > section:first-of-type h1 ~ div { animation: wccRise .8s var(--ease) both; }
main > section:first-of-type h1 ~ p { animation-delay: .12s; }
main > section:first-of-type h1 ~ div { animation-delay: .22s; }
main > section:first-of-type svg { animation: wccFade 1.2s ease-out .2s both; }

/* sections: blocks rise in as they scroll into view (only once JS is running) */
.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-top-color .5s ease, border-top-width .5s ease; transition-delay: var(--d, 0s); }
.js-motion [data-reveal].in { opacity: 1; transform: none; }

/* home statement: words light up as you scroll */
.rw { color: var(--text-faint); transition: color .35s ease; }
.rw.on { color: var(--heading); }

/* capability rows: arrow slides, row tints */
#capabilities a[href$=".html"] { transition: background-color .3s ease; }
#capabilities a[href$=".html"] > span:nth-child(2) { color: var(--heading); }
#capabilities a[href$=".html"] > span:last-child { transition: transform .3s var(--ease), color .3s ease; }
#capabilities a[href$=".html"]:hover, #capabilities a[href$=".html"]:active { background-color: var(--bg-raised); }
#capabilities a[href$=".html"]:hover > span:last-child, #capabilities a[href$=".html"]:active > span:last-child { transform: translateX(8px); color: var(--accent-text); }

/* buttons and the "next page" link nudge their arrow */
a > span[aria-hidden="true"] { display: inline-block; transition: transform .3s var(--ease); }
a:hover > span[aria-hidden="true"] { transform: translateX(4px); }

/* partner logo panels lift */
div:has(> img[src$="retia.png"]), div:has(> img[src$="megalink.png"]),
span:has(> img[src$="retia.png"]), span:has(> img[src$="megalink.png"]) { transition: transform .35s var(--ease), box-shadow .35s ease; }
div:has(> img[src$="retia.png"]):hover, div:has(> img[src$="megalink.png"]):hover,
span:has(> img[src$="retia.png"]):hover, span:has(> img[src$="megalink.png"]):hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--accent); }

/* numbered steps: the saffron line runs from step 1 to the last as the list comes into view */
.js-motion main ol > li { transition: border-top-color .5s ease, border-top-width .5s ease; }
.js-motion main ol.run > li { border-top: 2px solid var(--accent) !important; }
.js-motion main ol.run > li:nth-child(2) { transition-delay: .3s; }
.js-motion main ol.run > li:nth-child(3) { transition-delay: .6s; }
.js-motion main ol.run > li:nth-child(4) { transition-delay: .9s; }
.js-motion main ol.run > li:nth-child(5) { transition-delay: 1.2s; }

/* form: tick draws itself when the requirement is received */
.wcc-tick circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: wccDraw .7s var(--ease) .1s forwards; }
.wcc-tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: wccDraw .4s var(--ease) .7s forwards; }
@keyframes wccDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
  .wcc-tick circle, .wcc-tick path { stroke-dashoffset: 0; }
  .rw { color: inherit; }
}