/* ==========================================================================
   QDesk Data Solution and Services — public stylesheet
   Mobile-first. Light, modern, tech-inspired. No external dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:        #1f6feb;
  --brand-600:    #1a5fd0;
  --brand-700:    #164fae;
  --brand-soft:   #e8f0fe;
  --brand-lit:    #8fb7f5;
  --teal:         #12b3a6;
  --teal-soft:    #e0f7f4;
  --teal-lit:     #5fcfc5;

  /* Accents. Each one carries a meaning and is used for it consistently:
     amber = value and money, orange = people and support, violet = software.
     See Theme::palette(). `-lit` is the strength for dark bands, `-soft` the
     tint for light ones, `-deep` for a stroke that must hold its own on white.
     Theme::cssVariables() overrides all nine from the admin's three. */
  --amber:        #f5a524;
  --amber-soft:   #fef1dd;
  --amber-lit:    #f9c470;
  --amber-deep:   #b57a1b;
  --orange:       #ff7a2f;
  --orange-soft:  #ffeee4;
  --orange-lit:   #ffa373;
  --orange-deep:  #bd5a23;
  --violet:       #7c5cff;
  --violet-soft:  #efecff;
  --violet-lit:   #a58eff;
  --violet-deep:  #5c44bd;

  /* Neutrals — modern light shades */
  --ink:          #0f1b2d;
  --ink-2:        #24344b;
  --body:         #4a5b73;
  --muted:        #6b7c96;
  --line:         #e3eaf4;
  --line-soft:    #eef3f9;

  /* Surfaces */
  --bg:           #fbfcfe;
  --surface:      #ffffff;
  --tint:         #f4f8fd;
  --tint-2:       #eef4fb;
  --dark:         #0d1b2a;
  --dark-2:       #122336;

  /* Status */
  --ok:           #10996f;
  --ok-soft:      #e3f7ef;
  --warn:         #b8791a;
  --warn-soft:    #fdf3e3;
  --err:          #cf4356;
  --err-soft:     #fdeaed;

  /* Type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Space & shape */
  --wrap:      1200px;
  --gap:       clamp(1rem, 3vw, 1.75rem);
  --radius:    14px;
  --radius-lg: 22px;
  --radius-sm: 9px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(15, 27, 45, .05), 0 1px 3px rgba(15, 27, 45, .04);
  --sh-2: 0 4px 12px rgba(15, 27, 45, .06), 0 2px 4px rgba(15, 27, 45, .04);
  --sh-3: 0 14px 40px rgba(15, 27, 45, .09), 0 4px 12px rgba(15, 27, 45, .05);
  --sh-brand: 0 10px 30px rgba(31, 111, 235, .22);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .35s;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` contains overflow without creating a scroll container, which would
     break the sticky hero. `hidden` is the fallback for older engines. */
  overflow-x: hidden;
  overflow-x: clip;
}

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

/* The [hidden] attribute must beat any display rule set on a class below.
   Without this, .chat-panel{display:flex} keeps the chat window open on load. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.017em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
h3 { font-size: clamp(1.08rem, 2vw, 1.28rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand-700); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15rem; }
li { margin-bottom: .4em; }

strong { color: var(--ink-2); font-weight: 650; }
address { font-style: normal; }
code { font-family: var(--mono); font-size: .88em; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-tight { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.section-tint { background: var(--tint); }

/* The "breathe" section under the hero.
   ------------------------------------------------------------------------
   Plain white left it looking like an unstyled gap between the dark hero and
   the tinted band below, so it carries a wash that starts in the brand tint —
   picking the hero up where it ends — and clears to white by the bottom. It
   has to finish on white: the very next section is .section-tint, and two pale
   blues meeting would erase the band boundary the alternating rhythm depends
   on. That is what the base ramp below does, and why the drifting colour above
   it is masked away before it reaches the foot of the section.

   The movement is two soft colour fields drifting slowly past each other,
   rather than the illustrated motif this section used to carry. Immediately
   under a hero that is itself a picture, a second diagram was two things to
   read before the visitor had finished the first sentence.

   Built as pseudo-elements animated with `transform`, not as a background-
   position animation: a transform on a composited layer is handled by the GPU,
   while sliding a gradient across a full-width band repaints it every frame.
   `will-change` promotes the two layers up front so the first cycle is as
   smooth as the rest. */
.section-drift {
  position: relative;
  isolation: isolate;
  /* Needed to keep the drifting layers inside the band. Safe here, and only
     here: overflow on a section turns it into a scroll container, which is why
     the generic .section rule in motion.css deliberately does not set it. This
     section has no sticky descendants for it to break. */
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--tint) 34%, var(--surface) 88%);
}

.section-drift::before,
.section-drift::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  /* Faded out well before the bottom edge, so the section still finishes on
     white however far the layers have drifted. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 90%);
}

.section-drift::before {
  left: -16%; top: -30%;
  width: 84%; height: 138%;
  background: radial-gradient(closest-side, rgba(31, 111, 235, .24), transparent);
  animation: drift-a 34s ease-in-out infinite alternate;
}

.section-drift::after {
  right: -18%; top: -22%;
  width: 76%; height: 126%;
  background: radial-gradient(closest-side, rgba(18, 179, 166, .21), transparent);
  animation: drift-b 43s ease-in-out infinite alternate;
}

/* Themed, where the engine can mix. The rgba above stays as the fallback so a
   browser without color-mix() still gets the wash rather than a flat band. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .section-drift::before {
    background: radial-gradient(closest-side,
                color-mix(in srgb, var(--brand) 24%, transparent), transparent);
  }
  .section-drift::after {
    background: radial-gradient(closest-side,
                color-mix(in srgb, var(--teal) 21%, transparent), transparent);
  }
}

/* Long, mismatched periods on `alternate`, so the two never visibly return to
   the same arrangement together. */
@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0)         scale(1); }
  50%  { transform: translate3d(14%, 6%, 0)      scale(1.12); }
  100% { transform: translate3d(30%, -4%, 0)     scale(1.04); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0)         scale(1.06); }
  50%  { transform: translate3d(-18%, 8%, 0)     scale(.96); }
  100% { transform: translate3d(-34%, -2%, 0)    scale(1.1); }
}
.section-narrow .wrap, .wrap.section-narrow { max-width: 780px; }

/* Section headers are centred on screen; the label, heading and standfirst
   share one axis. */
.section-head {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.section-head .eyebrow::after { left: 50%; transform: translateX(-50%); }

/* Split headers keep a left heading and a right-hand link. */
.section-head-split {
  max-width: none; display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-end; justify-content: space-between;
  text-align: left;
}
.section-head-split .eyebrow::after { left: 0; transform: none; }

.section-head h2 { margin-bottom: .35em; }
.section-sub { color: var(--muted); font-size: 1.05rem; margin: 0 auto; max-width: 62ch; }

.h-lg { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.h-md { font-size: clamp(1.35rem, 2.8vw, 1.85rem); }

/* Section label: no rule/dash, uppercase, bold, and sized between the body
   copy and the big dark section heading it introduces. */
.eyebrow {
  position: relative;
  display: block;
  margin: 0 0 .95rem;
  font-size: clamp(1.02rem, .92rem + .5vw, 1.38rem);
  font-weight: 800;
  letter-spacing: .085em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow-light { color: #7fc4ff; }

/* Accent rule that draws itself in once the label has landed. */
.eyebrow::after {
  content: "";
  position: absolute; left: 0; bottom: -.42em;
  height: 3px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--amber));
  transition: width .55s var(--ease) calc(var(--n, 10) * 26ms + 140ms);
}
.eyebrow-light::after { background: linear-gradient(90deg, var(--brand-lit), var(--amber-lit)); }
.eyebrow.is-in::after { width: 3.2em; }

.grid { display: grid; gap: var(--gap); }
.grid-2, .grid-3 { grid-template-columns: 1fr; }

.equal-cards > * { height: 100%; }

.prose-center { max-width: 760px; margin-inline: auto; text-align: center; }
.prose-center p { font-size: 1.06rem; }
.center-action { text-align: center; margin-top: 2rem; }
.center-note { text-align: center; color: var(--muted); max-width: 640px; margin: 1.5rem auto 0; }

.faq-list { display: grid; gap: .8rem; margin-top: 1.5rem; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; box-shadow: var(--sh-1);
}
.faq-item summary {
  cursor: pointer; font-weight: 650; color: var(--ink); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: 0 0 auto; font-size: 1.3rem; line-height: 1; color: var(--brand);
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: .8rem 0 0; color: var(--body); }
.lead-muted { color: var(--muted); font-size: 1.05rem; }
.muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-size: .94rem; font-weight: 600;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-600); box-shadow: 0 14px 34px rgba(31,111,235,.3); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--brand); border-color: #c6dbf8; background: #fff; }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); }

.btn-ghost { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.16); }

.btn-quiet { --btn-bg: var(--line-soft); --btn-fg: var(--ink-2); }
.btn-quiet:hover { background: var(--line); }

.btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn-sm { padding: .55rem 1rem; font-size: .86rem; }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: .95rem;
}
.link-arrow span { transition: transform .2s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(252, 253, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--sh-2); background: rgba(252,253,255,.96); }

.header-inner {
  width: min(100% - 1.5rem, var(--wrap));
  margin-inline: auto;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
}

/* Hamburger — left */
.menu-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .7rem;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.menu-btn:hover { background: var(--tint); border-color: #cfdcec; }
.menu-bars { display: grid; gap: 4px; width: 18px; }
.menu-bars i {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-bars i:nth-child(2) { width: 72%; margin-left: auto; }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-btn-text { display: none; }

/* Logo — centre */
.brand { justify-self: center; display: block; }
.logo { width: 150px; height: auto; }
.logo-word { font: 700 17px var(--font); fill: var(--ink); letter-spacing: -.4px; }
.logo-sub  { font: 600 6.4px var(--font); fill: var(--muted); letter-spacing: 1.3px; }
.footer-brand .logo-word { fill: #fff; }
.footer-brand .logo-sub  { fill: rgba(255,255,255,.6); }

/* Email — right */
.header-mail {
  justify-self: end;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: 999px;
  color: var(--ink-2); font-size: .86rem; font-weight: 600;
  transition: background-color .2s var(--ease);
}
.header-mail:hover { background: var(--brand-soft); color: var(--brand-700); }
.header-mail .ico { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.header-mail span { display: none; }

/* --------------------------------------------------------------------------
   6. Off-canvas navigation
   -------------------------------------------------------------------------- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(13, 27, 42, .5);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.nav-overlay.is-open { opacity: 1; }

.site-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 96;
  width: min(88vw, 380px);
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: 12px 0 48px rgba(15, 27, 45, .16);
  transform: translateX(-102%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.site-nav.is-open { transform: translateX(0); }

.nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--line-soft);
}
.nav-title { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav-close {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; color: var(--ink);
}
.nav-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-close:hover { background: var(--tint); }

/* Who is signed in, at the top of the off-canvas panel. Only rendered for the
   staff and customer menus — the public menu has no identity to show. */
.nav-ident {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1.35rem; border-bottom: 1px solid var(--line-soft);
  background: var(--tint);
}
.nav-ident-mark {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-weight: 700; text-transform: uppercase;
}
.nav-ident-text { display: flex; flex-direction: column; min-width: 0; }
.nav-ident-text strong {
  font-size: .95rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-ident-text small { font-size: .78rem; color: var(--muted); }

.nav-list { list-style: none; margin: 0; padding: 1rem .75rem; flex: 1; }
.nav-list > li { margin: 0; }
.nav-list > li > a {
  display: block; padding: .78rem .85rem; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: 1.03rem;
}
.nav-list > li > a:hover, .nav-list > li > a.is-active { background: var(--brand-soft); color: var(--brand-700); }

.nav-sub { list-style: none; margin: 0 0 .35rem; padding: 0 0 .25rem .85rem; }
.nav-sub a {
  display: block; padding: .45rem .85rem; border-radius: var(--radius-sm);
  color: var(--body); font-size: .92rem;
}
.nav-sub a:hover { background: var(--tint); color: var(--brand-700); }

.nav-foot { padding: 1.1rem 1.35rem 1.5rem; border-top: 1px solid var(--line-soft); }
.nav-contact { display: grid; gap: .3rem; margin-top: .9rem; font-size: .9rem; }
.nav-contact a { color: var(--body); }
.nav-contact a:hover { color: var(--brand); }

.nav-account { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: .9rem; font-size: .9rem; font-weight: 600; }
.nav-account a { color: var(--body); }
.nav-account a:hover { color: var(--brand); }

body.nav-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* Full-viewport hero that stays pinned while the page scrolls over it.
   svh keeps it exactly one screen tall on mobile, where browser chrome
   makes vh unreliable. */
.hero {
  position: sticky; top: 0; z-index: 0;
  isolation: isolate; overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid; align-items: center;
  /* Packaged default only. --hero-1..3 do not exist until Theme emits them,
     so this rule stays on literals; the themed version — and the multi-hue
     lighting — is in §21 with the other custom-property overrides. */
  background:
    radial-gradient(1000px 520px at 78% 12%, rgba(31, 111, 235, .18) 0%, transparent 62%),
    linear-gradient(160deg, #0d1b2a 0%, #112b45 52%, #0e2438 100%);
  color: #cfe0f2;
  padding-block: clamp(4.5rem, 12vh, 7rem) clamp(2.5rem, 8vh, 4rem);
}

.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: float 18s ease-in-out infinite;
}
/* Four hues, not two, and each on its own long period so they never visibly
   loop together — the point is a slowly shifting light, not a pulse. */
.orb-1 { width: 460px; height: 460px; background: var(--brand);  top: -160px; right: -120px; }
.orb-2 { width: 380px; height: 380px; background: var(--teal);   bottom: -150px; left: -110px; animation-delay: -6s;  animation-duration: 23s; }
.orb-3 { width: 300px; height: 300px; background: var(--violet); top: 38%; left: 44%; opacity: .34; animation-delay: -11s; animation-duration: 27s; }
.orb-4 { width: 260px; height: 260px; background: var(--amber);  bottom: 4%;  right: 22%;  opacity: .26; animation-delay: -17s; animation-duration: 31s; }

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(28px, -26px, 0) scale(1.06); }
  66%      { transform: translate3d(-22px, 18px, 0) scale(.95); }
}

/* The copy is one centred column, not the left half of a split. The artwork it
   used to share the row with is now the backdrop behind it (.hero-art), which
   is what lets the headline sit in the middle of the screen at every width. */
/* minmax(0, 1fr) rather than the implicit `auto`: an auto track is sized by its
   max-content, which a long unbroken headline can push past the viewport. */
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; }

/* Wider than the paragraph it contains: .hero-sub sets its own 54ch measure,
   and constraining the block to that as well pushed the fourth trust item
   onto a second line, which reads as a wrapped list rather than a row. */
.hero-copy { position: relative; width: 100%; max-width: 60rem; margin-inline: auto; }

/* A soft pool of shade under the copy. The backdrop runs behind the headline
   rather than beside it now, so contrast cannot be left to the page gradient
   alone — an orbit ring or a comet passing under a thin glyph is exactly the
   case this covers. It is wider and taller than the text so it has no visible
   edge, and it sits behind the copy, not over the artwork as a whole, so the
   field stays bright everywhere the eye is not reading. */
.hero-copy::before {
  content: ""; position: absolute; z-index: -1;
  inset: -14% -22%;
  background: radial-gradient(closest-side ellipse,
              color-mix(in srgb, var(--hero-1, #0d1b2a) 78%, transparent) 0%,
              color-mix(in srgb, var(--hero-1, #0d1b2a) 46%, transparent) 55%,
              transparent 100%);
  pointer-events: none;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .hero-copy::before {
    background: radial-gradient(closest-side ellipse,
                rgba(13, 27, 42, .78) 0%, rgba(13, 27, 42, .46) 55%, transparent 100%);
  }
}

/* A two-line display headline, so it gets display leading rather than the
   1.18 body headings use — at 3.35rem that is the difference between two lines
   that read as one statement and two that read as two. */
.hero-title { color: #fff; margin-bottom: .5em; line-height: 1.04; }
.hero-line { display: block; }
.hero-accent {
  background: linear-gradient(96deg, #58a6ff 0%, #4fe0d2 55%, #7ce8dc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  color: #a9c3dc; max-width: 54ch; margin: 0 auto 2.25rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; }

.hero-trust {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem;
  font-size: .84rem; color: #8fabc7;
}
.hero-trust li { display: flex; align-items: center; gap: .55rem; margin: 0; }
.hero-trust li:not(:first-child)::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: #3f6b96;
}

/* --------------------------------------------------------------------------
   7b. Hero backdrop artwork (partials/hero-svg.php)

   A full-bleed field behind the centred copy, sitting above the blurred orbs
   and below the headline. `slice` crops it rather than fitting it, so the
   composition stays the same size relative to the viewer at every aspect
   ratio instead of shrinking into a letterbox on a wide screen.
   -------------------------------------------------------------------------- */
.hero-art {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  color: #7ea8d4;              /* the ink `currentColor` resolves to */
  opacity: .62;
}
.hero-svg { width: 100%; height: 100%; display: block; }

/* A photograph in the slot already carries the composition, so the field
   steps back rather than being drawn twice. */
.hero.has-photo .hero-art { opacity: .3; }

/* Grid and particles are the quietest layer — texture, not content. */
/* Grid and pile are the quietest layer — texture, not content. */
.ha-grid { opacity: .55; }

/* --- The pile ------------------------------------------------------------
   Work as it arrives: uneven, and never quite settling. The drift is small
   and slow on purpose — a backlog that jitters reads as agitated, and this
   sits behind a headline someone is trying to read. */
.ha-pile { color: #8fa3bf; }
.ha-scrap {
  animation: haShuffle 7s var(--ease) infinite;
  animation-delay: var(--d, 0s);
  opacity: .3;
}
@keyframes haShuffle {
  0%, 100% { transform: translateX(0);            opacity: .26; }
  50%      { transform: translateX(var(--dx, 6px)); opacity: .46; }
}

/* --- Routes ---------------------------------------------------------------
   Trail and head run the same keyframe on the same path; the head's negative
   delay (computed in the partial) places it at the leading edge of the trail,
   which is what makes the pair read as one item travelling rather than two. */
.ha-route { color: #6f93bb; }
.ha-trail, .ha-head {
  animation: haRun var(--dur, 15s) linear infinite;
  animation-delay: var(--d, 0s);
}
.ha-trail { stroke-opacity: .5; }
.ha-head  { stroke-opacity: .95; }
@keyframes haRun {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* --- The ordered rows -----------------------------------------------------
   These arrive once and stay. They are the payoff of the whole picture, so
   they do not loop: something that keeps re-arriving never looks finished. */
.ha-row {
  color: #9fc0e2;
  opacity: 0;
  animation: haSettle .9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes haSettle {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}

.ha-tick {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: haTick .5s var(--ease) forwards;
  /* After its row has landed, so the tick reads as the consequence. */
  animation-delay: calc(var(--d, 0s) + .55s);
}
@keyframes haTick { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   8. Inner page hero
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, #0d1b2a 0%, #12304c 60%, #0f2639 100%);
  color: #b9d0e6;
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
}
.page-hero-bg { position: absolute; inset: 0; z-index: -1; }
.page-hero-inner { max-width: 860px; }
.page-hero h1 { color: #fff; }
.page-hero-sub { font-size: clamp(1rem, 1.8vw, 1.1rem); color: #9db8d2; margin-bottom: 0; }
.page-hero .hero-actions { margin-top: 1.8rem; }
.hero-salary { color: #7ce8dc; font-weight: 650; font-size: .95rem; }

.crumbs { display: flex; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: 1rem; color: var(--muted); }
.crumbs a { color: var(--brand); }
.crumbs-light, .post-hero .crumbs { color: #7d9cbb; }
.crumbs-light a, .post-hero .crumbs a { color: #7fc4ff; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: #cfe0f6; }
.card h3 { margin-bottom: .55em; }
.card p { color: var(--body); font-size: .96rem; }

/* Colour clip-art sits on a soft tinted tile, noticeably larger than the old
   line icons so it reads as illustration rather than glyph. */
.card-icon {
  display: grid; place-items: center;
  width: 78px; height: 78px; margin-bottom: 1.25rem;
  border-radius: 22px;
  background: linear-gradient(140deg, var(--brand-soft), var(--teal-soft));
  color: var(--brand);
  transition: transform .35s var(--ease);
}
.card-icon .ico { width: 34px; height: 34px; }
.card-icon .ico-art { width: 54px; height: 54px; }

.card:hover .card-icon,
.quiet-card:hover .card-icon,
.contact-method:hover .card-icon { transform: translateY(-3px) scale(1.05); }

.ico-art { display: block; width: 54px; height: 54px; }

.card-service .card-link { margin-top: auto; padding-top: 1rem; font-weight: 650; font-size: .93rem; }
.card-service .card-link span { display: inline-block; transition: transform .2s var(--ease); }
.card-service:hover .card-link span { transform: translateX(4px); }

.mini-card, .quality-card, .assure-card, .office-card, .model-card, .numbered-card,
.industry-card, .principle, .leader, .side-box {
  padding: clamp(1.3rem, 2.6vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-1);
}

.quiet-card {
  display: block; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.quiet-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); color: inherit; }
.quiet-card h3 { margin-bottom: .35em; }
.quiet-card p { font-size: .93rem; color: var(--muted); margin-bottom: .8rem; }

.tick-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.tick-list li {
  position: relative; padding-left: 1.6rem; margin-bottom: .55em;
  font-size: .93rem; color: var(--body);
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg) scale(.72); transform-origin: center;
}

.two-col-list { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; columns: 2; column-gap: 1.5rem; }
.two-col-list li {
  position: relative; padding-left: 1.1rem; font-size: .92rem;
  break-inside: avoid; margin-bottom: .5em;
}
.two-col-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
}

/* --------------------------------------------------------------------------
   10. Proof bar
   -------------------------------------------------------------------------- */
.proof-bar {
  background: linear-gradient(150deg, var(--ink) 0%, #16324e 100%);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.proof-grid { display: grid; gap: 1.75rem; text-align: center; }
.proof-item { display: grid; gap: .35rem; }
.proof-figure {
  font-size: clamp(1.85rem, 4.5vw, 2.6rem); font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(96deg, #7fc4ff, #4fe0d2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-label { font-size: .87rem; color: #91adc9; line-height: 1.45; }

/* --------------------------------------------------------------------------
   11. Reasons / split-sticky
   -------------------------------------------------------------------------- */
.split-sticky { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.split-aside .btn { margin-top: 1.25rem; }

.reason { display: flex; gap: 1.1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.reason:first-child { border-top: 0; padding-top: 0; }
.reason-num {
  flex: none; font-size: .78rem; font-weight: 700; color: var(--brand);
  letter-spacing: .1em; padding-top: .3rem;
}
.reason h3 { margin-bottom: .4em; }
.reason p { font-size: .96rem; margin: 0; }

/* --------------------------------------------------------------------------
   12. Product panels
   -------------------------------------------------------------------------- */
.panel-product {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.panel-product:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.panel-visual { padding: 1.5rem 1.5rem 0; background: linear-gradient(160deg, var(--tint-2), #fff); }
.panel-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.panel-tag { color: var(--teal); font-weight: 650; font-size: .88rem; margin-bottom: .8rem; }
.panel-body .btn { margin-top: auto; align-self: flex-start; }

.mock-svg { width: 100%; height: auto; filter: drop-shadow(0 12px 26px rgba(15,27,45,.09)); }

.product-row, .service-row {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--line);
}
.product-row:last-child, .service-row:last-child { border-bottom: 0; }
.product-tagline { color: var(--teal); font-weight: 650; margin-bottom: 1rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }
.row-stack { flex-direction: column; }

.svc-svg { width: 100%; height: auto; border-radius: var(--radius-lg); }

.product-detail-band { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.why-grid { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
.why-item { display: flex; gap: .85rem; align-items: flex-start; }
.why-item .ico { flex: none; width: 21px; height: 21px; color: var(--teal); margin-top: .18rem; }
.why-item strong { display: block; margin-bottom: .2rem; color: var(--ink); }
.why-item p { font-size: .93rem; margin: 0; }

.problem-split { display: grid; gap: 2rem; }
.checklist-box {
  padding: 1.5rem; background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.checklist-box h3 { font-size: 1.02rem; margin-bottom: .9rem; }
.checklist-box ul { list-style: none; margin: 0; padding: 0; }
.checklist-box li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; margin-bottom: .65em; }
.checklist-box .ico { flex: none; width: 15px; height: 15px; color: var(--brand); margin-top: .28rem; }

.cross-card {
  display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.cross-card .btn { justify-self: start; }

/* --------------------------------------------------------------------------
   13. Steps & timeline
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: s; }
.step { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--line); }
.step-num {
  display: inline-block; margin-bottom: .7rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--brand);
}
.step h3 { font-size: 1.06rem; margin-bottom: .45em; }
.step p { font-size: .93rem; margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--brand), var(--teal)); opacity: .28;
}
.timeline-item { display: flex; gap: 1.15rem; padding-bottom: 1.9rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand);
  color: var(--brand); font-size: .72rem; font-weight: 700;
  position: relative; z-index: 1;
}
.timeline-marker-wide { width: auto; min-width: 32px; padding-inline: .6rem; border-radius: 999px; font-size: .68rem; }
.timeline-body h3 { font-size: 1.05rem; margin-bottom: .35em; }
.timeline-body p { font-size: .94rem; margin: 0; }

/* --------------------------------------------------------------------------
   14. Chips, tables, misc blocks
   -------------------------------------------------------------------------- */
.chip-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .88rem; font-weight: 600; color: var(--ink-2); margin: 0;
}
.chip .ico { width: 17px; height: 17px; color: var(--brand); }
.chip-quiet { background: var(--surface); font-weight: 500; color: var(--body); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.data-table {
  width: 100%; border-collapse: collapse; min-width: 560px;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sh-1);
}
.data-table th, .data-table td {
  padding: .85rem 1rem; text-align: left; font-size: .92rem;
  border-bottom: 1px solid var(--line-soft);
}
.data-table thead th { background: var(--tint); color: var(--ink); font-weight: 650; font-size: .85rem; }
.data-table tbody th { font-weight: 650; color: var(--ink-2); }
.data-table tr:last-child td, .data-table tr:last-child th { border-bottom: 0; }
.data-table .is-highlight { background: var(--brand-soft); color: var(--brand-700); font-weight: 650; }
.data-table thead .is-highlight { background: var(--brand); color: #fff; }

.status-tag {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 650; text-transform: capitalize;
}
.status-tag-completed { background: var(--ok-soft); color: #0b6a4d; }
.status-tag-pending   { background: var(--warn-soft); color: var(--warn); }
.status-tag-failed, .status-tag-cancelled { background: var(--err-soft); color: #9e2233; }
/* A top-up that did not go through — declined, cancelled, or abandoned at
   the gateway. Muted rather than alarming: nothing was charged, so this is
   a dead end to be told about, not a problem to be alerted to. */
.status-tag-incomplete { background: var(--line-soft); color: var(--muted); }

.compare-band { display: grid; gap: 2rem; }

.build-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.build-list li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1.05rem 1.25rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: .95rem;
}
.build-list .ico { flex: none; width: 20px; height: 20px; color: var(--teal); margin-top: .1rem; }

.model-card { position: relative; display: flex; flex-direction: column; }
.model-card.is-featured { border-color: var(--brand); box-shadow: var(--sh-brand); }
.model-flag {
  position: absolute; top: -11px; left: 1.5rem;
  padding: .2rem .75rem; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.model-meta { margin: 1.1rem 0 0; font-size: .88rem; }
.model-meta dt { color: var(--muted); font-weight: 600; margin-top: .7rem; }
.model-meta dd { margin: .15rem 0 0; color: var(--ink-2); }

.numbered-card { position: relative; padding-top: 2.6rem; }
.numbered-badge {
  position: absolute; top: 1.4rem; left: 1.5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--brand);
}

.principle { position: relative; padding-left: 3.6rem; }
.principle-num {
  position: absolute; left: 1.5rem; top: 1.6rem;
  font-size: .8rem; font-weight: 700; color: var(--teal); letter-spacing: .08em;
}

.industry-card header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.industry-card .card-icon { margin: 0; width: 44px; height: 44px; }
.industry-card h2 { font-size: 1.18rem; margin: 0; }
.label-inline {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem;
}
.industry-challenge { font-size: .94rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }

.leader { display: flex; gap: 1.2rem; }
.leader-avatar {
  flex: none; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(135deg, var(--brand), var(--teal));
  color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em;
}
.leader h3 { margin-bottom: .2em; }
.leader-role { color: var(--brand); font-weight: 650; font-size: .9rem; margin-bottom: .7rem; }
.leader-exp { color: var(--muted); font-weight: 500; }
.leader p { font-size: .94rem; margin: 0; }

.story-grid, .team-band { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.pull-quote {
  margin: 0 0 1.5rem; padding: 1.5rem;
  border-left: 3px solid var(--teal); background: var(--tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.08rem; font-weight: 600; color: var(--ink-2); font-style: italic;
}
.fact-box {
  padding: 1.5rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; gap: .25rem;
}
.fact-label { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.fact-value { font-size: 1.28rem; color: var(--ink); }
.fact-note { font-size: .88rem; color: var(--muted); }


.office-card address { font-size: .95rem; line-height: 1.7; margin-bottom: .8rem; }
.office-note { font-size: .88rem; color: var(--muted); margin: 0; }
.role-fit { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); font-size: .88rem; color: var(--muted); }
.role-fit strong { color: var(--ink-2); }

.section-dark {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--dark) 0%, #14304b 100%);
  color: #b3cae0;
}
.dark-grid-bg {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}
.section-head-light h2 { color: #fff; }
.honest-list { display: grid; gap: 1.25rem; }
.honest-item {
  padding: 1.4rem 1.6rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.honest-item h3 { color: #fff; font-size: 1.06rem; margin-bottom: .4em; }
.honest-item p { font-size: .95rem; margin: 0; color: #a6c0d8; }

.secure-box { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-1); }
.secure-note { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); font-size: .89rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }

.fld { display: grid; gap: .4rem; }
.fld > span { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.fld > span b { color: var(--err); }
.fld > span em { color: var(--muted); font-weight: 500; font-style: normal; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: .72rem .9rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7c96' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px;
  padding-right: 2.3rem;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .14);
}
input::placeholder, textarea::placeholder { color: #9dabc0; }

.has-error input, .has-error select, .has-error textarea { border-color: var(--err); }
.fld-error { display: block; font-size: .84rem; color: var(--err); font-style: normal; }
.fld-hint { font-size: .82rem; color: var(--muted); }

.checkbox { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.checkbox input { flex: none; width: 18px; height: 18px; margin-top: .18rem; accent-color: var(--brand); }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-note { font-size: .82rem; color: var(--muted); margin: 0; }

.notice {
  padding: 1.05rem 1.25rem; border-radius: var(--radius);
  border: 1px solid var(--line); font-size: .94rem;
}
.notice p { margin: .4rem 0 0; }
.notice-success { background: var(--ok-soft); border-color: #b9e8d5; color: #0b6a4d; }
.notice-success strong { color: #0b6a4d; }
.notice-error { background: var(--err-soft); border-color: #f4c5cd; color: #9e2233; }
.notice-error strong { color: #9e2233; }

/* Customer order detail page */
.inline-form { display: inline-block; }

.order-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--sh-1); padding: 1.4rem; margin-bottom: 1.5rem;
}
.order-panel-accent { border-color: #cfe2f8; background: linear-gradient(160deg, var(--brand-soft), var(--teal-soft)); }
.order-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.order-panel-head h2 { margin: 0; font-size: 1.05rem; }

.order-layout { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .order-layout { grid-template-columns: 1fr 300px; align-items: start; } }

.order-dl { display: grid; gap: .5rem; font-size: .88rem; margin: 0; }
.order-dl dt { color: var(--muted); font-size: .76rem; margin-top: .5rem; }
.order-dl dt:first-child { margin-top: 0; }
.order-dl dd { margin: 0; font-weight: 650; color: var(--ink); }

.order-timeline { display: grid; gap: .9rem; margin-bottom: 1.2rem; }
.order-msg {
  max-width: 82%; padding: .8rem 1rem; border-radius: var(--radius); font-size: .92rem;
}
.order-msg p { margin: .3rem 0 0; }
.order-msg-customer { justify-self: start; background: var(--tint); }
.order-msg-staff { justify-self: end; background: var(--brand-soft); }
.order-msg-system { justify-self: center; max-width: 100%; background: none; text-align: center; color: var(--muted); font-size: .82rem; }
.order-msg-who { display: block; font-size: .74rem; font-weight: 700; opacity: .8; }
.order-msg time { display: block; font-size: .7rem; color: var(--muted); margin-top: .4rem; }
.order-msg a { font-weight: 650; }

/* Google sign-in */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .75rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-weight: 650; font-size: .94rem; text-decoration: none;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-google:hover { background: var(--tint); box-shadow: var(--sh-1); }
.or-divider { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--muted); font-size: .82rem; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.flash-stack { position: fixed; top: 84px; right: 1rem; z-index: 80; display: grid; gap: .5rem; max-width: 340px; }
.flash {
  padding: .8rem 1.1rem; border-radius: var(--radius); font-size: .9rem;
  background: var(--surface); box-shadow: var(--sh-3); border-left: 3px solid var(--brand);
  animation: slideIn .4s var(--ease);
}
.flash-success { border-left-color: var(--ok); }
.flash-error { border-left-color: var(--err); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Contact page */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.contact-method {
  display: block; padding: 1.5rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-method:hover { transform: translateY(-3px); box-shadow: var(--sh-2); color: inherit; }
.contact-method .card-icon { margin-inline: auto; }
.contact-method h2 { font-size: 1.05rem; margin-bottom: .35em; }
.contact-method strong { display: block; color: var(--brand); margin-bottom: .4rem; word-break: break-word; }
.contact-method p { font-size: .88rem; color: var(--muted); margin: 0; }

.contact-aside { display: grid; gap: 1.25rem; align-content: start; }
.next-box, .office-mini {
  padding: 1.4rem 1.5rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.next-box h3, .office-mini h3 { font-size: 1rem; margin-bottom: .8rem; }
.next-list { margin: 0; padding-left: 1.2rem; font-size: .92rem; }
.office-mini address { font-size: .92rem; line-height: 1.65; }
.mini-lines { display: grid; gap: .3rem; margin: 0; font-size: .93rem; }

.map-card { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.map-card iframe { width: 100%; height: 260px; border: 0; filter: grayscale(.22) contrast(1.03); }
.map-caption { padding: .95rem 1.15rem; display: grid; gap: .15rem; }
.map-caption strong { color: var(--ink); }
.map-caption span { font-size: .88rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   16. Blog
   -------------------------------------------------------------------------- */
.blog-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.blog-side { display: grid; gap: 1.25rem; align-content: start; }
.side-box { display: grid; gap: .9rem; }
.side-box h2 { font-size: .95rem; letter-spacing: .02em; margin: 0; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.side-list li { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin: 0; padding: .4rem 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
.side-list li:last-child { border-bottom: 0; }
.side-count { font-size: .78rem; color: var(--muted); background: var(--tint); padding: .1rem .5rem; border-radius: 999px; }
.side-cta { background: linear-gradient(160deg, var(--brand-soft), var(--teal-soft)); border-color: #cfe2f8; }
.side-cta p { font-size: .9rem; margin: 0; }

.tag-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-cloud li { margin: 0; }
.tag-cloud a {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  background: var(--tint); font-size: .82rem; color: var(--body);
}
.tag-cloud a:hover { background: var(--brand-soft); color: var(--brand-700); }

.filter-bar {
  display: grid; gap: 1rem; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); margin-bottom: 1.5rem;
}
.filter-search { position: relative; }
.filter-search .ico {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.filter-search input { padding-left: 2.5rem; }
.filter-fields { display: grid; gap: .8rem; }
.filter-fld { display: grid; gap: .3rem; }
.filter-fld span { font-size: .76rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.filter-fld select, .filter-fld input { padding: .55rem .75rem; font-size: .89rem; }
.filter-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.result-count { font-size: .9rem; color: var(--muted); margin-bottom: 1.25rem; }

.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.post-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-media > .slot-art { display: block; width: 100%; height: 100%; }
.post-card-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); margin-bottom: .7rem; }
.pill {
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-700);
  font-size: .74rem; font-weight: 650;
}
.post-card h3 { font-size: 1.08rem; margin-bottom: .45em; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--brand); }
.post-card p { font-size: .92rem; color: var(--body); margin-bottom: 1rem; }
.tag-row { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-row li { margin: 0; }
.tag-row a { font-size: .78rem; color: var(--muted); }
.tag-row a:hover { color: var(--brand); }
.dot-sep { color: var(--line); }

.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.page-link {
  min-width: 38px; padding: .5rem .8rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .9rem; text-align: center; color: var(--ink-2);
}
.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }

.empty-state {
  padding: 3rem 1.5rem; text-align: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.empty-state h2, .empty-state h3 { margin-bottom: .5em; }
.empty-state p { color: var(--muted); margin-bottom: 1.25rem; }

/* Single post */
.post-hero { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, #0d1b2a 0%, #12304c 100%); color: #b9d0e6;
  padding-block: clamp(2.5rem, 6vw, 4rem); }
.post-hero-inner { max-width: 800px; }
.post-hero h1 { color: #fff; font-size: clamp(1.75rem, 4.4vw, 2.8rem); }
.post-standfirst { font-size: clamp(1rem, 1.9vw, 1.14rem); color: #9db8d2; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .87rem; color: #8fabc7; margin-top: 1.4rem; }
.post-author { display: inline-flex; align-items: center; gap: .5rem; color: #cfe0f2; font-weight: 600; }
.author-dot {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff;
  font-size: .78rem; font-weight: 700;
}

.post-banner { margin: 0; padding-top: 2rem; }
.post-banner img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--sh-3);
}

.post-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.post-side { display: grid; gap: 1.25rem; align-content: start; }

.prose { font-size: 1.03rem; line-height: 1.78; color: var(--ink-2); max-width: 74ch; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.3rem, 2.6vw, 1.65rem); }
.prose h3 { margin-top: 1.7em; font-size: 1.15rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .55em; }
.prose blockquote {
  margin: 1.8em 0; padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--teal); background: var(--tint);
  border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--ink-2);
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .94rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--tint); font-weight: 650; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose code { background: var(--tint); padding: .12em .4em; border-radius: 4px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

.post-figure { margin: 2em 0; }
.post-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--sh-2); }
.post-figure figcaption { margin-top: .7rem; font-size: .85rem; color: var(--muted); line-height: 1.55; }
.post-figure .credit { display: block; font-size: .78rem; opacity: .85; }

.post-tags, .post-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.post-tags .label-inline, .post-share .label-inline { margin: 0; }
.post-share a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--tint); color: var(--body);
}
.post-share a:hover { background: var(--brand); color: #fff; }
.post-share .ico { width: 18px; height: 18px; }

.toc { display: grid; gap: .1rem; }
.toc a { display: block; padding: .35rem 0 .35rem .7rem; border-left: 2px solid var(--line); font-size: .89rem; color: var(--body); }
.toc a:hover, .toc a.is-active { border-left-color: var(--brand); color: var(--brand); }
.toc .toc-h3 { padding-left: 1.5rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   17. Careers
   -------------------------------------------------------------------------- */
.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.job-item {
  display: grid; gap: 1.25rem; padding: clamp(1.35rem, 3vw, 1.85rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.job-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #cfe0f6; }
.job-item.is-featured { border-color: var(--brand); }
.job-flag {
  display: inline-block; margin-bottom: .6rem; padding: .2rem .7rem;
  border-radius: 999px; background: var(--warn-soft); color: var(--warn);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.job-item h3 { font-size: 1.2rem; margin-bottom: .7em; }
.job-item h3 a { color: var(--ink); }
.job-item h3 a:hover { color: var(--brand); }
.job-item p { font-size: .94rem; }

.job-facts { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.job-facts li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .86rem; color: var(--muted); }
.job-facts .ico { width: 16px; height: 16px; color: var(--brand); }
.job-facts-light li { color: #9db8d2; }
.job-facts-light .ico { color: #7fc4ff; }
.job-facts-light { margin-top: 1.2rem; }

.skill-row { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.skill-row li {
  margin: 0; padding: .28rem .7rem; border-radius: 999px;
  background: var(--tint); font-size: .8rem; color: var(--body);
}
.skill-row-lg li { font-size: .88rem; padding: .38rem .9rem; }

.job-side { display: grid; gap: .6rem; align-content: start; }
.job-salary { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.job-posted { font-size: .8rem; color: var(--muted); }

.job-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.job-side-col { display: grid; gap: 1.25rem; align-content: start; }
.summary-dl { margin: 0 0 1.25rem; font-size: .9rem; }
.summary-dl dt { color: var(--muted); font-weight: 600; margin-top: .7rem; }
.summary-dl dd { margin: .1rem 0 0; color: var(--ink-2); font-weight: 600; }

.apply-block {
  margin-top: 3rem; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.apply-block h2 { margin-top: 0; }
.fld-file input { padding: .6rem; background: var(--surface); }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-700) 0%, #1668c9 45%, var(--teal) 130%);
  color: #dbeafe; text-align: center;
  padding-block: clamp(3rem, 7vw, 4.5rem);
}
.cta-grid-bg {
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 72%);
}

/* Still texture on the right, in place of the animated pipeline motif this
   band used to carry. Fixed art, not the shared section-bg partial — this is
   the one section it should never move in. */
.cta-texture {
  display: none;
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -1;
  width: min(52%, 620px); height: 100%;
  color: #fff; opacity: .8;
  pointer-events: none;
}
@media (min-width: 900px) {
  .cta-texture { display: block; }
}

.cta-inner { max-width: 720px; margin-inline: auto; }
.cta-band h2 { color: #fff; }
.cta-band p { font-size: 1.04rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }
.cta-band .btn-primary { background: #fff; color: var(--brand-700); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.cta-band .btn-primary:hover { background: #f2f7ff; }
.cta-line { margin-top: 1.6rem; font-size: .88rem; color: #b9d5f7; display: flex; gap: .6rem; justify-content: center; }
.cta-line a { color: #fff; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dark); color: #93aec9;
  padding-block: clamp(2.75rem, 6vw, 4rem) 0;
}
.footer-glow {
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 420px; z-index: -1;
  background: radial-gradient(ellipse, rgba(31,111,235,.28), transparent 66%);
}
.footer-grid { display: grid; gap: 2.25rem; }
.footer-col h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-col li { margin: 0; }
.footer-col a { color: #93aec9; font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.footer-blurb { font-size: .92rem; margin: 1.1rem 0 1.25rem; max-width: 42ch; }
.footer-brand .logo { width: 170px; }

.footer-social { display: flex; gap: .55rem; }
.footer-social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255,255,255,.07); color: #b7cee5;
}
.footer-social a:hover { background: var(--brand); color: #fff; }
.footer-social .ico { width: 18px; height: 18px; }

.addr { font-size: .9rem; line-height: 1.65; margin-bottom: 1.1rem; }
.addr-label { display: block; color: #fff; font-weight: 650; font-size: .8rem; margin-bottom: .25rem; }
.footer-lines { display: grid; gap: .3rem; margin-top: 1rem; }
.footer-lines a { color: #7fc4ff; font-weight: 600; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-block: 1.4rem; border-top: 1px solid rgba(255,255,255,.09);
  font-size: .84rem;
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* --------------------------------------------------------------------------
   20. Chat widget
   -------------------------------------------------------------------------- */
.chat-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 88;
  display: grid; place-items: center;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand), var(--teal));
  color: #fff; cursor: pointer; box-shadow: var(--sh-brand);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chat-fab:hover { transform: translateY(-3px) scale(1.04); }
.chat-fab svg { width: 25px; height: 25px; }
.chat-fab-icon, .chat-fab-close { grid-area: 1 / 1; transition: opacity .2s var(--ease), transform .3s var(--ease); }
.chat-fab-close { opacity: 0; transform: rotate(-90deg); }
.chat-fab.is-open .chat-fab-icon { opacity: 0; transform: rotate(90deg); }
.chat-fab.is-open .chat-fab-close { opacity: 1; transform: rotate(0); }
.chat-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--teal); animation: pulse 2.6s var(--ease) infinite; pointer-events: none;
}
.chat-fab.is-open::after { display: none; }

.chat-fab-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--err); color: #fff; font-size: .7rem; font-weight: 700;
}

.chat-panel {
  position: fixed; right: 1rem; bottom: 5rem; z-index: 89;
  width: min(calc(100vw - 2rem), 372px);
  max-height: min(74vh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: 0 22px 60px rgba(15,27,45,.22);
  transform-origin: bottom right;
  animation: chatIn .28s var(--ease);
}
@keyframes chatIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.chat-head {
  display: flex; align-items: center; gap: .75rem; padding: .95rem 1.1rem;
  background: linear-gradient(135deg, var(--brand-700), var(--brand)); color: #fff;
}
.chat-head-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18); }
.chat-head-avatar svg { width: 19px; height: 19px; }
.chat-head-text { flex: 1; display: grid; line-height: 1.35; }
.chat-head-text strong { color: #fff; font-size: .95rem; }
.chat-head-text span { font-size: .78rem; color: #bcd8ff; }
.chat-min { background: transparent; border: 0; color: #cfe2ff; cursor: pointer; padding: .3rem; }
.chat-min svg { width: 18px; height: 18px; }

.chat-intro, .chat-closed, .chat-otp, .chat-login { padding: 1.2rem; overflow-y: auto; }
.chat-login .btn { margin-bottom: .8rem; }
.chat-intro-lead { font-size: .93rem; margin-bottom: 1.1rem; }
.chat-form { display: grid; gap: .8rem; }
.chat-form .fld > span { font-size: .82rem; }
.chat-form input, .chat-form select { padding: .6rem .75rem; font-size: .9rem; }
.chat-privacy { font-size: .76rem; color: var(--muted); text-align: center; margin: 0; }
.chat-error { font-size: .84rem; color: var(--err); margin: 0; }

.chat-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: .6rem; align-content: start; }

.msg { max-width: 84%; padding: .6rem .85rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; word-wrap: break-word; }
.msg time { display: block; font-size: .68rem; opacity: .6; margin-top: .25rem; }
.msg-visitor { justify-self: end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg-agent   { justify-self: start; background: var(--tint); color: var(--ink-2); border-bottom-left-radius: 4px; }
.msg-agent .msg-name { display: block; font-size: .72rem; font-weight: 700; color: var(--brand); margin-bottom: .15rem; }
.msg-system {
  justify-self: center; max-width: 100%; text-align: center;
  background: transparent; color: var(--muted); font-size: .8rem; padding: .3rem .5rem;
}

.chat-typing { display: flex; gap: 4px; padding: 0 1rem .6rem; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: typing 1.3s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.chat-compose { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line-soft); align-items: flex-end; }
.chat-compose textarea { flex: 1; min-height: 40px; max-height: 110px; padding: .55rem .75rem; font-size: .9rem; resize: none; }
.chat-send {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer;
}
.chat-send:hover { background: var(--brand-600); }
.chat-send svg { width: 18px; height: 18px; }

.chat-actions { padding: 0 .75rem .75rem; text-align: center; }
.chat-end { background: none; border: 0; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; }
.chat-end:hover { color: var(--err); }
.chat-closed p { font-size: .92rem; }

/* --------------------------------------------------------------------------
   21. Legal
   -------------------------------------------------------------------------- */
.legal-prose { max-width: none; }
.legal-prose h2 { margin-top: 2em; font-size: 1.28rem; }
.legal-prose h3 { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
/* Progressive enhancement: content is visible by default and only starts
   hidden once JS has confirmed it can reveal it again. Without the `.js`
   class — scripts blocked, failed or still loading — everything just shows. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. Responsive — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: repeat(2, 1fr); }
  .filter-fields { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-4 { grid-template-columns: repeat(2, 1fr); }
  .menu-btn-text { display: inline; }
  .header-mail span { display: inline; }
  .logo { width: 175px; }
  .cross-card { grid-template-columns: 1fr auto; align-items: center; }
  .job-item { grid-template-columns: 1fr auto; align-items: center; }
  .job-side { justify-items: end; }
  .chat-panel { right: 1.5rem; bottom: 5.5rem; }
  .chat-fab { right: 1.5rem; bottom: 1.5rem; }
}

/* --------------------------------------------------------------------------
   24. Responsive — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .steps-4 { grid-template-columns: repeat(4, 1fr); }
  .proof-grid { grid-template-columns: repeat(4, 1fr); }

  /* No two-column rule for .hero-inner any more — the copy is centred at
     every width and the artwork is the backdrop behind it. */

  .split-sticky { grid-template-columns: .82fr 1.18fr; }
  .split-aside { position: sticky; top: 110px; align-self: start; }

  .story-grid { grid-template-columns: 1.55fr 1fr; }
  .team-band { grid-template-columns: .8fr 1.2fr; align-items: center; }
  .compare-band { grid-template-columns: .85fr 1.15fr; align-items: center; }
  .problem-split { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .product-detail-band { grid-template-columns: 1fr 1fr; }

  .service-row, .product-row { grid-template-columns: .9fr 1.1fr; }
  .service-row.is-reversed .service-row-visual,
  .product-row.is-reversed .product-row-visual { order: 2; }

  .blog-layout { grid-template-columns: 1fr 300px; }
  .post-layout { grid-template-columns: 1fr 280px; }
  .job-layout  { grid-template-columns: 1fr 300px; }
  .contact-grid { grid-template-columns: 1.35fr .65fr; }

  .side-sticky { position: sticky; top: 110px; }
  /* The blog post sidebar holds two boxes (On this page + Talk to us) that
     should scroll as one pinned unit rather than the CTA drifting off on
     its own — stick the whole column, not just the first card. */
  .post-side { position: sticky; top: 110px; }
  .filter-bar { grid-template-columns: 1fr; }
  .filter-fields { grid-template-columns: repeat(5, 1fr); }

  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.35fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   25. Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-nav, .nav-overlay, .chat-fab, .chat-panel,
  .cta-band, .site-footer, .post-share, .filter-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero, .hero, .post-hero { background: #fff !important; color: #000 !important; padding-block: 1rem; }
  .page-hero h1, .hero-title, .post-hero h1 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   26. Editable images, dynamic theme surfaces
   ========================================================================== */

/* Sections that have an administrator-supplied background photo. The inline
   style supplies the image plus a darkening gradient; these rules stop the
   packaged gradient from painting over it. */
.hero.has-photo,
.page-hero.has-photo,
.proof-bar.has-photo,
.cta-band.has-photo {
  background-color: var(--hero-1, #0d1b2a);
  background-repeat: no-repeat;
}
.hero.has-photo .hero-bg .orb,
.page-hero.has-photo .page-hero-bg .orb { opacity: .28; }
.cta-band.has-photo .cta-grid-bg { opacity: .18; }
.cta-band.has-photo .cta-texture { opacity: .22; }

/* Hero / page-hero gradients now read from the theme variables. */
/* Three light sources rather than one flat navy ramp: brand from the top
   right, violet depth from the bottom left, and a low amber warmth under the
   copy. A dark band lit by a single hue is what made these read as grey.

   The plain ramp on the line above each is the fallback — an engine without
   color-mix() drops the whole declaration, and a hero with no background at
   all would leave white text on white. */
.hero {
  background: linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 52%, var(--hero-3) 100%);
  background:
    radial-gradient(1000px 520px at 78% 10%, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 62%),
    radial-gradient(760px 620px at 8% 96%, color-mix(in srgb, var(--violet) 24%, transparent) 0%, transparent 66%),
    radial-gradient(620px 380px at 30% 76%, color-mix(in srgb, var(--amber) 12%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 52%, var(--hero-3) 100%);
}
.hero-sub, .page-hero-sub { color: var(--hero-text); }
.page-hero {
  background: linear-gradient(155deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%);
  background:
    radial-gradient(820px 440px at 84% 8%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 64%),
    radial-gradient(620px 460px at 6% 100%, color-mix(in srgb, var(--violet) 20%, transparent) 0%, transparent 68%),
    linear-gradient(155deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%);
}
.post-hero { background: linear-gradient(155deg, var(--hero-1) 0%, var(--hero-2) 100%); }
.proof-bar { background: linear-gradient(150deg, var(--hero-1) 0%, var(--hero-2) 100%); }
.section-dark { background: linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 100%); }
.site-footer  { background: var(--dark); }
.site-header  { background: color-mix(in srgb, var(--header-bg) 88%, transparent); }
.site-header.is-stuck { background: color-mix(in srgb, var(--header-bg) 96%, transparent); }
.menu-btn, .header-mail, .logo-word { color: var(--header-fg); }
.menu-bars i { background: var(--header-fg); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .site-header, .site-header.is-stuck { background: var(--header-bg); }
}

/* Side / panel figures ---------------------------------------------------- */
.side-figure {
  margin: 0 0 1.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--tint);
}
.side-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.positioning-split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }

.team-photo {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--sh-2); aspect-ratio: 3 / 2;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }

.office-photo {
  margin: -0.35rem -0.35rem 1.1rem;
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2;
}
.office-photo img { width: 100%; height: 100%; object-fit: cover; }

.svc-photo, .product-photo {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--sh-2); background: var(--tint);
}
.svc-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.panel-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.panel-visual:has(.panel-photo) { padding: 1rem 1rem 0; }

.careers-band { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.careers-band .side-figure { position: sticky; top: 110px; aspect-ratio: 3 / 2; }
.careers-band-copy .reason { border-top: 1px solid var(--line); }
.careers-band-copy .reason:first-child { border-top: 0; padding-top: 0; }

.footer-tagline {
  margin: -.5rem 0 1.25rem; font-size: .88rem; font-weight: 600;
  color: #7fc4ff; letter-spacing: .01em;
}

@media (min-width: 900px) {
  .positioning-split { grid-template-columns: 1.15fr .85fr; }
  .careers-band { grid-template-columns: .85fr 1.15fr; }
}

/* --------------------------------------------------------------------------
   22. Petty Jobs Done Right
   Hourly task catalogue: the rate card, the price-led cards and the
   at-a-glance strip at the top of each landing page.
   -------------------------------------------------------------------------- */
.pj-headline-facts { justify-content: center; margin-top: 2rem; }

.pj-peg { margin-top: 1.5rem; background: linear-gradient(160deg, var(--brand-soft), var(--teal-soft)); border-color: #cfe2f8; }
.pj-peg .fact-value { font-size: 1.5rem; }

.pj-rate-table th[scope="row"] { min-width: 15rem; }
.pj-rate-cell { white-space: nowrap; font-weight: 700; color: var(--brand-700); }

/* The rate is the thing a visitor is scanning for, so it sits on its own
   line above the link rather than inside the body copy. */
.pj-card { display: flex; flex-direction: column; }
.pj-card .role-fit { margin-top: auto; }
.pj-card .role-fit strong { color: var(--brand-700); font-size: 1.05rem; }

.pj-glance { margin-top: .5rem; }
.pj-glance .fact-value { font-size: 1.02rem; line-height: 1.5; }
.pj-glance .fact-box:first-child .fact-value { font-size: 1.4rem; }

/* A delivery the customer has not paid for yet is shown as a placeholder in
   the thread rather than removed, so the order history still reads correctly. */
.order-locked {
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: var(--tint); border: 1px dashed var(--line);
  color: var(--muted); font-size: .93rem;
}
.order-locked strong { display: block; color: var(--ink); margin-bottom: .2em; }
.order-locked-file { color: var(--muted); font-size: .9rem; }

/* Wallet top-up: the terms a customer must see BEFORE paying, not after.
   Deliberately quiet rather than alarming — it is a fact about the product,
   not a warning. */
.notice-terms { background: var(--tint); border-color: var(--line); color: var(--body); }
.notice-terms .tick-list { margin-top: .6rem; }
.notice-terms .tick-list li { font-size: .9rem; }

/* An admin-assigned image on an Off Your Plate service page. Optional by
   design — the slot is usually empty and the page reads fine without it. */
.oyp-figure {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--tint);
}
.oyp-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   24. Slot artwork inside the figures it stands in for

   partials/slot-art.php fills a slot a photograph would otherwise have
   filled, so it has to sit inside the same figure without a second frame
   around it. Every motif is drawn at its slot's declared aspect ratio, which
   is why height: 100% never distorts one: the box and the drawing agree.
   -------------------------------------------------------------------------- */
.side-figure .slot-art,
.team-photo .slot-art,
.office-photo .slot-art,
.oyp-figure .slot-art,
.svc-photo .slot-art,
.product-photo .slot-art,
.post-card-media > .slot-art {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.side-figure .slot-art .sa-svg,
.team-photo .slot-art .sa-svg,
.office-photo .slot-art .sa-svg,
.oyp-figure .slot-art .sa-svg,
.post-card-media > .slot-art .sa-svg { height: 100%; }


/* --------------------------------------------------------------------------
   25. Accent utilities

   Blue alone was doing all the work. These give a section a second hue
   without the view having to know a hex value: see Theme::palette().
   -------------------------------------------------------------------------- */
.accent-amber  { --accent: var(--amber);  --accent-soft: var(--amber-soft); }
.accent-orange { --accent: var(--orange); --accent-soft: var(--orange-soft); }
.accent-violet { --accent: var(--violet); --accent-soft: var(--violet-soft); }
.accent-teal   { --accent: var(--teal);   --accent-soft: var(--teal-soft); }

/* Cards cycle through the accents rather than every one of them being the
   same blue-teal wash. The nth-child walk keys off position in the grid, so
   adding a card never means editing a class.

   The colour is set once, as --accent on the card, and everything inside it
   reads from there — icon tile, ticks, the arrow link. Setting the tile alone
   is what produced the old mismatch of an amber icon over teal ticks. */
.grid-3 > *:nth-child(4n+2), .grid-2 > *:nth-child(4n+2) {
  --accent: var(--teal);   --accent-soft: var(--teal-soft);   --accent-ink: var(--teal);
}
.grid-3 > *:nth-child(4n+3), .grid-2 > *:nth-child(4n+3) {
  --accent: var(--amber);  --accent-soft: var(--amber-soft);  --accent-ink: var(--amber-deep);
}
.grid-3 > *:nth-child(4n+4), .grid-2 > *:nth-child(4n+4) {
  --accent: var(--violet); --accent-soft: var(--violet-soft); --accent-ink: var(--violet-deep);
}

.grid-3 > * .card-icon,
.grid-2 > * .card-icon {
  background: linear-gradient(140deg,
              var(--accent-soft, var(--brand-soft)),
              color-mix(in srgb, var(--accent-soft, var(--teal-soft)) 55%, var(--surface)));
  color: var(--accent-ink, var(--brand));
}

/* The tick that opens every list was teal everywhere, including on a card
   whose icon is now amber or violet. Inheriting the card's accent is what
   keeps a card reading as one object rather than two colour decisions. */
.tick-list li::before { border-color: var(--accent, var(--teal)); }
.card-link, .card-service .card-link { color: var(--accent-ink, var(--brand)); }

/* Numbered rules and stat figures pick up the warm end of the palette, which
   is what stops a page of blue cards reading as a spreadsheet. */
.reason-num { color: var(--amber-deep); }
.timeline-marker { border-color: var(--violet); color: var(--violet-deep); }

/* The proof band's figures ran a blue-to-teal gradient that, at this size,
   looked like one flat colour. Three stops across the brand range read as a
   gradient at a glance. */
.proof-figure {
  background: linear-gradient(96deg, var(--brand-lit) 0%, var(--teal-lit) 45%, var(--amber-lit) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons: the primary keeps the brand, but its glow now carries a warm edge
   so it reads as a live control rather than a blue rectangle. */
.btn-primary { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn-primary:hover {
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand) 60%, transparent),
              0 4px 14px -6px color-mix(in srgb, var(--amber) 55%, transparent);
}