/* ==========================================================================
   BMD LEGACY — DESIGN SYSTEM
   One stylesheet, every page. Cached across the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — dark */
  --ink:            #050D1A;
  --ink-raise:      #0A1526;
  --ink-raise-2:    #101E33;
  --ink-hairline:   rgba(200, 212, 232, 0.10);
  --ink-hairline-2: rgba(200, 212, 232, 0.18);

  /* Surfaces — light */
  --paper:          #FFFFFF;
  --paper-soft:     #F7F8FB;
  --paper-tint:     #EEF3FA;
  --rule:           rgba(9, 24, 48, 0.09);
  --rule-strong:    rgba(9, 24, 48, 0.16);

  /* Brand */
  --blue:           #0057FF;
  --blue-deep:      #0040C4;
  --blue-lift:      #3B82FF;
  --blue-wash:      rgba(0, 87, 255, 0.08);
  --blue-wash-2:    rgba(0, 87, 255, 0.16);
  --champagne:      #D8BC7E;
  --champagne-dim:  rgba(216, 188, 126, 0.32);

  /* Links — --link follows the surface. Plain --blue is only 3.53:1 on the
     navy, so every dark section below re-declares this to the lighter step. */
  --link:           var(--blue);

  /* Text */
  --text:           #050D1A;
  --text-2:         #44536B;
  --text-3:         #616E84;   /* was #6B7A92 — 4.35:1 on white, under AA */
  --on-dark:        #FFFFFF;
  --on-dark-2:      #C8D4E8;
  --on-dark-3:      #8A9AB8;

  /* Status */
  --danger:         #D52C1F;   /* was #D92D20 — 4.44:1 on --danger-wash */
  --danger-wash:    #FEF3F2;
  --success:        #067647;
  --success-wash:   #ECFDF3;
  --warn:           #B54708;
  --warn-wash:      #FFFAEB;

  /* Type */
  --f-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-label:   'Space Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-2xs: 0.625rem;    /* 10 */
  --t-xs:  0.6875rem;   /* 11 */
  --t-sm:  0.8125rem;   /* 13 */
  --t-md:  0.9375rem;   /* 15 */
  --t-lg:  1.0625rem;   /* 17 */
  --t-xl:  clamp(1.15rem, 1.6vw, 1.375rem);

  --d-hero: clamp(2.75rem, 8.2vw, 7.5rem);
  --d-1:    clamp(2rem, 5vw, 4.25rem);
  --d-2:    clamp(1.6rem, 3.2vw, 2.5rem);
  --d-3:    clamp(1.25rem, 2vw, 1.6rem);

  /* Space */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-section: clamp(68px, 8.5vw, 136px);
  --gutter:    clamp(20px, 5vw, 72px);
  --maxw:      1440px;

  /* Radius */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
  --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(5, 13, 26, .04), 0 2px 8px rgba(5, 13, 26, .04);
  --sh-2: 0 2px 4px rgba(5, 13, 26, .03), 0 10px 28px rgba(5, 13, 26, .07);
  --sh-3: 0 4px 8px rgba(5, 13, 26, .04), 0 28px 64px rgba(5, 13, 26, .12);
  --sh-glow: 0 6px 28px rgba(0, 87, 255, .30);

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .30, 1);
  --spring:    cubic-bezier(.34, 1.36, .64, 1);

  --nav-h: 74px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
}

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

/* The `hidden` attribute is only a UA-stylesheet default, so any class here
   that sets `display` silently outranks it — `.or-rule` is `display:flex`, so
   a hidden "or" divider stayed on screen. This makes hidden mean hidden. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
::selection { background: var(--blue); color: #fff; }

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

.skip-link {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  z-index: 10000; background: var(--blue); color: #fff;
  padding: 12px 24px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; font-size: var(--t-sm); transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-section); }
.section--dark  { background: var(--ink);       color: var(--on-dark-2); }

/* --link on a dark surface -------------------------------------------------
   --blue (#0057FF) is only 3.53:1 on the navy — below AA. Rather than fix each
   component that sits on ink, every dark container re-declares --link once and
   the components underneath inherit it. A new dark section gets this free. */
.section--dark,
.pagehero,
.hero,
.auth,
.dash-hero,
.footer,
.drawer,
.on-dark            { --link: var(--blue-lift); }
.section--soft  { background: var(--paper-soft); }
.section--paper { background: var(--paper); }
.section--tint  { background: var(--paper-tint); }

.section--dark  { position: relative; }
.stack   { display: flex; flex-direction: column; }
.hr-fine { height: 1px; background: var(--rule); border: 0; }
.hr-fine--dark { background: var(--ink-hairline); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-label);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--link);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: ''; width: 30px; height: 1px; background: currentColor; opacity: .75;
}
.eyebrow--champagne { color: var(--champagne); }

.display {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.018em;
  font-size: var(--d-1);
  color: var(--text);
  text-wrap: balance;
}
.display--hero { font-size: var(--d-hero); line-height: 1.0; letter-spacing: -0.028em; }
.display--sm   { font-size: var(--d-2); }
.display--xs   { font-size: var(--d-3); line-height: 1.18; }
.display em    { display: block; font-style: italic; color: var(--blue); }
.on-dark .display, .display--on-dark { color: var(--on-dark); }

.lede {
  font-size: var(--t-lg); line-height: 1.75; color: var(--text-2);
  max-width: 56ch; text-wrap: pretty;
}
.on-dark .lede, .lede--on-dark { color: var(--on-dark-3); }

.label {
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.on-dark .label { color: var(--on-dark-3); }

.num-display {
  font-family: var(--f-display); font-weight: 300; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 15px 28px; border-radius: var(--r-xs);
  white-space: nowrap; overflow: hidden;
  transition: transform .3s var(--spring), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 2px rgba(0,40,120,.24), 0 4px 14px rgba(0,87,255,.22);
}
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: var(--sh-glow); }
/* Sheen sweep */
.btn--primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .7s var(--ease-expo);
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--outline {
  border: 1px solid var(--rule-strong); color: var(--text);
  background: transparent;
}
.btn--outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-wash); transform: translateY(-2px); }

.btn--ghost-dark {
  border: 1px solid var(--ink-hairline-2); color: var(--on-dark-2); background: rgba(255,255,255,.02);
}
.btn--ghost-dark:hover { border-color: var(--blue-lift); color: #fff; background: var(--blue-wash-2); transform: translateY(-2px); }

.btn--ink { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn--ink:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-glow); }

.btn--wide  { width: 100%; }
.btn--lg    { padding: 17px 34px; font-size: var(--t-sm); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled::after { display: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--link);
  transition: gap .3s var(--ease);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.link-arrow:hover { gap: 14px; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  padding-inline: var(--gutter);
  background: rgba(5, 13, 26, .88);   /* was .72 — the hero showed through */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav--scrolled {
  background: rgba(5, 13, 26, .96);
  border-bottom-color: var(--ink-hairline);
  box-shadow: 0 10px 40px rgba(0,0,0,.42);
}
.nav__brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.nav__brand img { height: 38px; width: auto; object-fit: contain; }
.nav__badge {
  font-family: var(--f-label); font-size: 9px; font-weight: 700;
  color: #5291FF; letter-spacing: .3em;   /* --blue-lift was 2.24:1 here */
  border: 1px solid rgba(82,145,255,.45); padding: 3px 8px 3px 9px; border-radius: 3px;
}
.nav__links { display: flex; align-items: center; gap: var(--s-8); }
.nav__links a {
  position: relative;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-3);
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--blue-lift);
  transition: width .32s var(--ease-expo);
}
.nav__links a:hover, .nav__links a[aria-current="true"] { color: #fff; }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: var(--s-4); }
.nav__signin {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-2); transition: color .25s var(--ease);
}
.nav__signin:hover { color: #fff; }
.nav__cta {
  background: var(--blue); color: #fff; white-space: nowrap;
  padding: 10px 20px; border-radius: var(--r-xs);
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s var(--ease), transform .25s var(--spring), box-shadow .25s var(--ease);
}
.nav__cta::after { display: none !important; }
.nav__cta .is-short { display: none; }
.nav__cta:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--sh-glow); }

.burger { display: none; flex-direction: column; gap: 5px; padding: 10px; margin-inline-end: -10px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--on-dark-2); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 998;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-6); padding: var(--s-10) var(--gutter);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer a {
  font-family: var(--f-display); font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 600; color: var(--on-dark-2); letter-spacing: .01em;
  transition: color .25s var(--ease);
}
.drawer a:hover { color: var(--blue-lift); }
.drawer__divide { width: 56px; height: 1px; background: var(--ink-hairline); margin: var(--s-2) 0; }

/* --------------------------------------------------------------------------
   7. SOCIAL BAR
   -------------------------------------------------------------------------- */
.socialbar {
  margin-top: var(--nav-h);
  background: var(--ink-raise);
  border-bottom: 1px solid var(--ink-hairline);
  padding: 13px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.socialbar__text {
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3);
}
.socialbar__text strong { color: var(--on-dark); font-weight: 700; }
.socials { display: flex; gap: var(--s-2); }
.social {
  width: 34px; height: 34px; border-radius: var(--r-xs);
  border: 1px solid var(--ink-hairline);
  display: grid; place-items: center; color: var(--on-dark-3);
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease), transform .25s var(--spring);
}
.social svg { width: 14px; height: 14px; fill: currentColor; }
.social:hover { color: #fff; border-color: var(--blue); background: var(--blue-wash-2); transform: translateY(-2px); }

/* The same icons in the footer, so every page links to the real profiles and
   not just the homepage. They were on one page out of forty-two, and the three
   they pointed at did not exist — placeholder handles that had never been
   replaced with BMD's own. */
.footer__social {
  /* flex-start, not center: the footer stacks its content to the start edge,
     and flex-start mirrors on its own under dir="rtl". */
  display: flex; gap: var(--s-2); justify-content: flex-start;
  margin-top: var(--s-5); flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. HERO (homepage)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--s-16)) var(--gutter) var(--s-20);
  background: var(--ink); color: var(--on-dark-2);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .26; filter: saturate(.4) contrast(1.05);
}
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__media video[data-ready="true"] { opacity: .24; }
.hero__wash {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 52% at 74% 34%, rgba(0,87,255,.24) 0%, transparent 64%),
    radial-gradient(ellipse 46% 62% at 14% 84%, rgba(216,188,126,.10) 0%, transparent 62%),
    linear-gradient(180deg, rgba(5,13,26,.62) 0%, rgba(5,13,26,.34) 42%, rgba(5,13,26,.92) 100%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(200,212,232,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,212,232,.045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue-lift);
  margin-bottom: var(--s-8);
}
.hero__eyebrow::before { content: ''; width: 38px; height: 1px; background: currentColor; flex-shrink: 0; }
.hero__title { color: var(--on-dark); }
.hero__title em { display: block; font-style: italic; color: var(--blue-lift); }
.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-10);
  margin-top: var(--s-12); padding-top: var(--s-10);
  border-top: 1px solid var(--ink-hairline);
}
.hero__sub { font-size: var(--t-md); color: var(--on-dark-3); max-width: 42ch; line-height: 1.8; }
.hero__actions { display: flex; gap: var(--s-3); flex-shrink: 0; }
.hero__stats { display: flex; gap: clamp(24px, 4vw, 56px); margin-top: var(--s-8); flex-wrap: wrap; }
.hero__stat strong {
  display: block; font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600; color: var(--on-dark); line-height: 1;
}
.hero__stat span {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3);
}
.hero__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.hero__scroll span {
  font-family: var(--f-label); font-size: 9px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--on-dark-3);
}
.hero__scroll i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--on-dark-3), transparent); animation: scrollPulse 2.2s var(--ease) infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: .35; transform: scaleY(.8); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* --------------------------------------------------------------------------
   9. PAGE HERO (interior pages)
   -------------------------------------------------------------------------- */
.pagehero {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--on-dark-2);
  padding: calc(var(--nav-h) + clamp(56px, 7vw, 104px)) var(--gutter) clamp(56px, 7vw, 104px);
  overflow: hidden;
}
.pagehero__wash {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 78% 22%, rgba(0,87,255,.20) 0%, transparent 62%),
    radial-gradient(ellipse 50% 60% at 8% 92%, rgba(216,188,126,.07) 0%, transparent 60%);
}
.pagehero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image:
    linear-gradient(rgba(200,212,232,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,212,232,.04) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 80% 80% at 40% 30%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 40% 30%, #000 10%, transparent 75%);
}
.crumbs {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3);
  margin-bottom: var(--s-6);
}
.crumbs a { transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--blue-lift); }
.crumbs i { opacity: .4; font-style: normal; }
.crumbs [aria-current] { color: var(--on-dark); }
.pagehero .display em { color: var(--blue-lift); display: block; }
.pagehero__sub { margin-top: var(--s-5); font-size: var(--t-lg); color: var(--on-dark-3); max-width: 60ch; line-height: 1.75; }
.pagehero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-10); }
.pagehero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s-16); border-top: 1px solid var(--ink-hairline);
}
.pagehero__stat { padding: var(--s-6) var(--s-5) 0; border-inline-end: 1px solid var(--ink-hairline); }
.pagehero__stat:first-child { padding-inline-start: 0; }
.pagehero__stat:last-child { border-inline-end: none; }
.pagehero__stat strong { display: block; font-family: var(--f-display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 600; color: var(--on-dark); line-height: 1; }
.pagehero__stat small { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }

/* --------------------------------------------------------------------------
   10. MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--blue); overflow: hidden; padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex; align-items: center; gap: var(--s-6); padding-inline: var(--s-6);
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.marquee__item::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.45); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   11. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 44px); flex-wrap: wrap;
  padding: var(--s-8) var(--gutter);
  background: var(--paper-soft); border-bottom: 1px solid var(--rule);
}
.trust__item { display: flex; align-items: center; gap: 10px; }
.trust__icon {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--blue-wash); color: var(--blue);
  display: grid; place-items: center;
}
.trust__icon svg { width: 17px; height: 17px; }
.trust__label {
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-2);
}

/* --------------------------------------------------------------------------
   12. SERVICES ACCORDION + MEDIA GALLERY
   -------------------------------------------------------------------------- */
/* Two columns, two rows: the intro sits above the sticky visual on the left,
   while the accordion spans the full height of the right column. Without the
   explicit placement below, the visual is auto-placed into row 2 *after* the
   accordion has ended, leaving a tall empty gap on the left. */
.svc-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: clamp(28px, 3.2vw, 48px);
  align-items: start;
  margin-top: var(--s-16);
}
.svc-intro  { grid-column: 1; grid-row: 1; }
.svc-list   { grid-column: 2; grid-row: 1 / span 2; }
.svc-visual { grid-column: 1; grid-row: 2; }
.svc-list { display: flex; flex-direction: column; }
.svc { border-top: 1px solid var(--ink-hairline); }
.svc:last-child { border-bottom: 1px solid var(--ink-hairline); }
.svc__header {
  width: 100%; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-6) 0; text-align: start;
  transition: padding-inline-start .35s var(--ease);
}
.svc__header:hover { padding-inline-start: 6px; }
.svc__num { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; color: var(--on-dark-3); width: 28px; flex-shrink: 0; }
.svc__name { flex: 1; font-family: var(--f-display); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; color: var(--on-dark); transition: color .3s var(--ease); }
.svc__toggle {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--ink-hairline); color: var(--on-dark-3);
  display: grid; place-items: center;
  transition: transform .4s var(--ease-expo), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.svc__toggle svg { width: 12px; height: 12px; }
.svc__header:hover .svc__name { color: var(--blue-lift); }
.svc[data-open="true"] .svc__name { color: var(--blue-lift); }
.svc[data-open="true"] .svc__toggle { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(135deg); }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-expo); }
.svc[data-open="true"] .svc__panel { grid-template-rows: 1fr; }
.svc__panel > div { overflow: hidden; }
.svc__body { padding: 0 0 var(--s-8) 44px; }
.svc__body p { font-size: var(--t-md); line-height: 1.85; color: var(--on-dark-3); max-width: 52ch; }
.svc__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-5); }
.svc__tags li {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--blue-lift);
  background: var(--blue-wash); border: 1px solid rgba(59,130,255,.26);
  border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap;
}
.svc__media { display: none; }

.svc-visual {
  position: sticky; top: calc(var(--nav-h) + 26px);
  border-radius: var(--r-xl); overflow: hidden; height: min(64vh, 620px);
  border: 1px solid var(--ink-hairline);
  background: var(--ink-raise);
  transition: opacity .35s var(--ease);
}
.svc-visual__overlay {
  position: absolute; inset: auto 0 0 0; padding: var(--s-8);
  /* The label and title sit over a photograph, so their contrast was whatever
     that frame happened to be — measured at 4.46:1 on one gallery item and
     3.06:1 on the next. The scrim now holds .92 all the way up past the text
     before it fades, which makes the figure a property of the design instead
     of a property of the picture. */
  background: linear-gradient(to top,
      rgba(5,13,26,.97) 0%,
      rgba(5,13,26,.95) 55%,
      rgba(5,13,26,.92) 86%,
      rgba(5,13,26,0) 100%);
  pointer-events: none;
}
.svc-visual__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #5291FF; margin-bottom: 6px; }  /* --blue-lift was 4.46:1 on the overlay */
.svc-visual__title { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: #fff; line-height: 1.2; }

.gallery { position: relative; width: 100%; height: 100%; background: #000; }
.gallery__stage { position: relative; width: 100%; height: 100%; }
.gallery__stage img, .gallery__stage video { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 5;
  display: flex; gap: 6px; padding: 6px;
  background: rgba(5,13,26,.6); backdrop-filter: blur(8px);
  border: 1px solid var(--ink-hairline); border-radius: var(--r-md);
}
.gallery__thumb {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--ink-hairline); color: var(--on-dark-3);
  background: rgba(255,255,255,.04);
  display: grid; place-items: center;
  /* Named properties, not `all`. `all` animates the focus outline too, so the
     ring faded in over a quarter of a second — long enough that a keyboard
     user tabbing quickly never saw where they were. */
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.gallery__thumb:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 2px; }
.gallery__thumb svg { width: 12px; height: 12px; }
.gallery__thumb:hover { border-color: var(--blue-lift); color: #fff; }
.gallery__thumb[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* --------------------------------------------------------------------------
   13. STAT BAND
   -------------------------------------------------------------------------- */
.statband {
  background: var(--ink); color: var(--on-dark-2);
  border-block: 1px solid var(--ink-hairline);
  padding: var(--s-16) var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.statband__item { padding-inline: clamp(12px, 3vw, 40px); border-inline-end: 1px solid var(--ink-hairline); text-align: center; }
.statband__item:first-child { padding-inline-start: 0; text-align: start; }
.statband__item:last-child { border-inline-end: none; padding-inline-end: 0; text-align: end; }
.statband__val { font-family: var(--f-display); font-size: clamp(2.4rem, 5.4vw, 5rem); font-weight: 300; color: var(--on-dark); line-height: 1; margin-bottom: 8px; }
.statband__val span { color: var(--blue-lift); }
.statband__label { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }

/* --------------------------------------------------------------------------
   14. CARDS
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--s-5); margin-top: var(--s-16); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative; isolation: isolate;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-8);
  transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(160deg, var(--blue-wash) 0%, transparent 46%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: rgba(0,87,255,.22); }
.card:hover::before { opacity: 1; }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--r-md); margin-bottom: var(--s-5);
  background: var(--blue-wash); color: var(--blue); display: grid; place-items: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--spring);
}
.card__icon svg { width: 21px; height: 21px; }
.card:hover .card__icon { background: var(--blue); color: #fff; transform: scale(1.06) rotate(-3deg); }
.card h3 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 10px; line-height: 1.22; }
.card p { font-size: var(--t-sm); line-height: 1.8; color: var(--text-2); }
.card__list { margin-top: var(--s-4); display: flex; flex-direction: column; gap: 7px; }
.card__list li {
  position: relative; padding-inline-start: 17px;
  font-size: var(--t-sm); color: var(--text-2); line-height: 1.6;
}
.card__list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .6;
}

/* Stage cards (seamless grid) */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-16); }
.stage { position: relative; background: var(--paper); padding: clamp(32px, 3.6vw, 52px) clamp(24px, 2.8vw, 40px); transition: background-color .4s var(--ease); }
.stage::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-expo); }
.stage:hover { background: var(--paper-tint); }
.stage:hover::before { transform: scaleX(1); }
.stage__num { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; color: var(--blue); margin-bottom: var(--s-8); }
.stage h3 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 12px; line-height: 1.2; }
.stage p { font-size: var(--t-sm); line-height: 1.85; color: var(--text-2); }

/* Numbered process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-16); }
.step { background: var(--paper); padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 34px); position: relative; transition: background-color .35s var(--ease); }
.step:hover { background: var(--paper-tint); }
.step__n { font-family: var(--f-display); font-size: 2.6rem; font-weight: 300; color: var(--blue); opacity: .28; line-height: 1; margin-bottom: var(--s-4); }
.step h4 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 10px; line-height: 1.2; }
.step p { font-size: var(--t-sm); line-height: 1.8; color: var(--text-2); }

/* Reviews */
.review {
  position: relative;
  background: rgba(255,255,255,.035); border: 1px solid var(--ink-hairline);
  border-radius: var(--r-lg); padding: var(--s-8);
  transition: transform .4s var(--ease-expo), border-color .3s var(--ease), background-color .3s var(--ease);
}
.review:hover { transform: translateY(-4px); border-color: rgba(59,130,255,.32); background: rgba(255,255,255,.06); }
.review__tag {
  display: inline-block; margin-bottom: var(--s-4);
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-lift);
  padding: 4px 10px; border: 1px solid rgba(59,130,255,.3); border-radius: var(--r-xs);
}
.stars { display: flex; gap: 3px; margin-bottom: var(--s-4); color: var(--champagne); }
.stars svg { width: 13px; height: 13px; fill: currentColor; }
.review { display: flex; flex-direction: column; }
.review p { font-size: var(--t-sm); line-height: 1.9; color: var(--on-dark-2); margin-bottom: var(--s-6); }
.review > p:not(.review__tag) { flex: 1; }
.review__who { display: flex; align-items: center; gap: 12px; padding-top: var(--s-5); border-top: 1px solid var(--ink-hairline); }
.review__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, var(--blue-lift), var(--blue-deep)); color: #fff;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em;
  display: grid; place-items: center;
}
.review__who strong { display: block; color: var(--on-dark); font-size: var(--t-sm); font-weight: 600; }
.review__who span { font-size: var(--t-sm); color: var(--on-dark-3); }

/* The rating tile is hidden until there are enough real reviews to average.
   `hidden` removes it from the grid but not the track it was sitting in, so
   the band has to be told it is three wide or it renders with a dead cell. */
.rsum[data-cols="3"] { grid-template-columns: repeat(3, 1fr) !important; }
.rsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-hairline); border: 1px solid var(--ink-hairline); border-radius: var(--r-md); overflow: hidden; margin: var(--s-12) 0; }
.rsum__item { background: var(--ink-raise); padding: var(--s-8) var(--s-4); text-align: center; }
.rsum__item strong { display: block; font-family: var(--f-display); font-size: 2.6rem; font-weight: 600; color: var(--on-dark); line-height: 1; margin-bottom: 6px; }
.rsum__item .stars { justify-content: center; margin-bottom: 6px; }
.rsum__item span { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-16); }
.faq__item { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); overflow: hidden; }
.faq__item:hover { border-color: rgba(0,87,255,.24); box-shadow: var(--sh-1); }
.faq__item[data-open="true"] { border-color: rgba(0,87,255,.3); box-shadow: var(--sh-2); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); text-align: start;
  font-size: var(--t-md); font-weight: 600; color: var(--text); line-height: 1.45;
}
.faq__mark {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--rule-strong); color: var(--blue);
  display: grid; place-items: center;
  transition: transform .4s var(--ease-expo), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.faq__mark svg { width: 11px; height: 11px; }
.faq__item[data-open="true"] .faq__mark { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(135deg); }
/* A collapsed panel is clipped to zero height, which hides it from eyes and
   from nobody else. Screen readers read every answer regardless of state — so
   `aria-expanded="false"` on the trigger was simply untrue — and a link inside
   a collapsed answer still took keyboard focus while being invisible.
   `visibility: hidden` fixes both: it removes the subtree from the
   accessibility tree and from the tab order. It is transitionable, so the
   0s delay lets the collapse animation finish before the panel disappears,
   and it applies instantly on open. */
.faq__a {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .45s var(--ease-expo), visibility 0s linear .45s;
}
.faq__item[data-open="true"] .faq__a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .45s var(--ease-expo), visibility 0s;
}
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 var(--s-6) var(--s-5); font-size: var(--t-sm); line-height: 1.85; color: var(--text-2); max-width: 78ch; }

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--ink-raise); }
.split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; }
.split__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(0,87,255,.10) 0%, transparent 58%); pointer-events: none; }
.split__pills { position: absolute; inset: auto var(--s-6) var(--s-6); display: flex; gap: 10px; z-index: 2; }
.pill {
  flex: 1; text-align: center; padding: 14px 12px;
  background: rgba(5,13,26,.86); backdrop-filter: blur(14px);
  border: 1px solid var(--ink-hairline); border-radius: var(--r-md);
}
.pill strong { display: block; font-family: var(--f-display); font-size: 1.7rem; font-weight: 600; color: var(--blue-lift); line-height: 1; }
.pill span { font-family: var(--f-label); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }

.checks { display: flex; flex-direction: column; gap: 13px; margin: var(--s-6) 0 var(--s-10); }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-md); color: var(--text); font-weight: 500; line-height: 1.55; }
.checks li::before {
  content: ''; flex-shrink: 0; width: 21px; height: 21px; margin-top: 2px; border-radius: 50%;
  background: var(--blue-wash) center / 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Roles */
.roles { display: flex; flex-direction: column; gap: var(--s-2); }
.role {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--rule);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.role:hover { border-color: rgba(0,87,255,.3); background: var(--blue-wash); transform: translateX(3px); }
.role__name { font-size: var(--t-md); font-weight: 600; }
.role__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); letter-spacing: .05em; }
.badge {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px;
  border-radius: var(--r-xs); background: var(--blue-wash); color: var(--blue);
  border: 1px solid rgba(0,87,255,.22); flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.form-row--full { grid-template-columns: 1fr; }
.form-row--phone { grid-template-columns: 132px 1fr; }

input, textarea, select {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--text);
  font-family: var(--f-body); font-size: var(--t-md); line-height: 1.4;
  outline: none; appearance: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .82; }
input:hover, textarea:hover, select:hover { border-color: var(--text-3); }
input:focus, textarea:focus, select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); background: var(--paper);
}
textarea { resize: vertical; min-height: 116px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
  padding-inline-end: 38px; cursor: pointer;
}
[aria-invalid="true"], .is-error { border-color: var(--danger) !important; }
[aria-invalid="true"]:focus, .is-error:focus { box-shadow: 0 0 0 3px rgba(217,45,32,.10) !important; }
.field-error { font-size: var(--t-xs); color: var(--danger); font-weight: 500; min-height: 0; }

.formbox {
  background: var(--paper-soft); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: clamp(28px, 3.4vw, 44px);
}
.formbox h3 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin-bottom: 6px; }
.formbox > p { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-6); }

.form-note { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--text-3); line-height: 1.6; }
.field-hint { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; margin-top: 2px; }

/* --- CV dropzone --------------------------------------------------------- */
/* The file input is stretched invisibly across the whole panel. That single
   trick buys click-to-browse AND drag-and-drop natively, with real keyboard
   focus and no JavaScript required — the JS below only adds the highlight and
   the file chip. */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 30px 20px; text-align: center;
  border: 1.5px dashed var(--rule-strong); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.dropzone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0;
}
.dropzone:hover, .dropzone[data-drag="true"] { border-color: var(--blue); background: var(--blue-wash); }
.dropzone[data-drag="true"] { border-style: solid; }
.dropzone:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.dropzone[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-wash); }
.dropzone__icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-wash); color: var(--blue); margin-bottom: 4px;
  transition: transform .3s var(--spring);
}
.dropzone__icon svg { width: 20px; height: 20px; }
.dropzone:hover .dropzone__icon, .dropzone[data-drag="true"] .dropzone__icon { transform: translateY(-2px) scale(1.05); }
.dropzone__title { font-size: var(--t-md); font-weight: 600; color: var(--text); }
.dropzone__title b { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dropzone__meta { font-size: var(--t-xs); color: var(--text-3); }

.file-chip {
  display: none; align-items: center; gap: 10px; margin-top: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--blue-wash); border: 1px solid rgba(0,87,255,.2);
  font-size: var(--t-sm); color: var(--text);
}
.file-chip[data-show="true"] { display: flex; }
.file-chip svg { width: 17px; height: 17px; color: var(--blue); flex-shrink: 0; }
.file-chip__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-chip__size { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); flex-shrink: 0; }
.file-chip__clear {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-3);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.file-chip__clear:hover { background: rgba(217,45,32,.10); color: var(--danger); }
.file-chip__clear svg { width: 12px; height: 12px; color: currentColor; }

.or-rule {
  display: flex; align-items: center; gap: var(--s-4);
  margin: var(--s-5) 0; color: var(--text-3);
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.or-rule::before, .or-rule::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.form-status {
  margin-top: var(--s-4); padding: 13px 16px; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; display: none;
}
.form-status[data-show="true"] { display: block; }
.form-status[data-kind="error"]   { background: var(--danger-wash);  color: var(--danger);  border: 1px solid rgba(217,45,32,.2); }
.form-status[data-kind="info"]    { background: var(--blue-wash);    color: var(--blue-deep); border: 1px solid rgba(0,87,255,.2); }
.form-status[data-kind="success"] { background: var(--success-wash);  color: var(--success); border: 1px solid rgba(6,118,71,.2); }

.form-done {
  display: none; text-align: center; padding: var(--s-10) var(--s-6);
  background: var(--blue-wash); border: 1px solid rgba(0,87,255,.2); border-radius: var(--r-md);
}
.form-done[data-show="true"] { display: block; animation: popIn .5s var(--spring); }
.form-done__mark {
  width: 46px; height: 46px; margin: 0 auto var(--s-4); border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
}
.form-done__mark svg { width: 22px; height: 22px; }
.form-done strong { display: block; font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; }
.form-done span { font-size: var(--t-sm); color: var(--text-2); }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   16. CONTACT SPLIT
   -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; }
.contact__left {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--on-dark-2);
  padding: clamp(44px, 5.5vw, 84px) clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-12);
  overflow: hidden;
}
.contact__left::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 50% 108%, rgba(0,87,255,.20) 0%, transparent 62%);
}
.contact__logo { height: 54px; width: auto; object-fit: contain; }
.contact__headline { font-family: var(--f-display); font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 600; color: var(--on-dark); line-height: 1.12; }
.contact__headline em { display: block; font-style: italic; color: var(--blue-lift); }
.contact__info { display: flex; flex-direction: column; gap: 13px; }
.contact__row { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); color: var(--on-dark-3); }
.contact__row svg { width: 16px; height: 16px; color: var(--blue-lift); flex-shrink: 0; }
.contact__row a { transition: color .25s var(--ease); }
.contact__row a:hover { color: var(--on-dark); }
.contact__right {
  background: var(--paper);
  padding: clamp(44px, 5.5vw, 84px) clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}
.contact__right h2 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin-bottom: 6px; }
.contact__right > p { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-8); }

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.ctaband {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--on-dark-2);
  padding: clamp(64px, 8vw, 120px) var(--gutter); text-align: center;
}
.ctaband::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(0,87,255,.24) 0%, transparent 62%),
    radial-gradient(ellipse 50% 80% at 82% 100%, rgba(216,188,126,.08) 0%, transparent 60%);
}
.ctaband h2 { font-family: var(--f-display); font-size: var(--d-1); font-weight: 600; color: var(--on-dark); line-height: 1.1; margin-bottom: var(--s-4); }
.ctaband h2 em { font-style: italic; color: var(--blue-lift); display: block; }
.ctaband p { font-size: var(--t-lg); color: var(--on-dark-3); margin: 0 auto var(--s-10); max-width: 52ch; }
.ctaband__row { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   18. INFO STRIP + FOOTER
   -------------------------------------------------------------------------- */
.infostrip {
  background: var(--ink); color: var(--on-dark-2);
  border-top: 1px solid var(--ink-hairline);
  padding: var(--s-16) var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-12);
}
.infostrip__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-lift); margin-bottom: 12px; }
.infostrip a, .infostrip p { display: block; font-size: var(--t-md); font-weight: 500; color: var(--on-dark-3); margin-bottom: 5px; transition: color .25s var(--ease); }
.infostrip a:hover { color: var(--on-dark); }
/* opacity .62 on --on-dark-3 measured 3.26:1 against the navy — below the 4.5:1
   minimum. Dimming text with opacity is the commonest way a palette that was
   checked passes on paper and fails on screen. */
.infostrip small { display: block; font-size: var(--t-sm); color: var(--on-dark-2); margin-top: 3px; }

.footer {
  background: var(--ink); color: var(--on-dark-3);
  border-top: 1px solid var(--ink-hairline);
  padding: var(--s-6) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
}
.footer__copy { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: .05em; }
.footer__links { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.footer__links a { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: color .25s var(--ease); }
.footer__links a:hover { color: var(--blue-lift); }

/* --------------------------------------------------------------------------
   19. FLOATING ACTIONS
   -------------------------------------------------------------------------- */
.floaties { position: fixed; inset-inline-end: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.fab {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,.34);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--spring), visibility .35s, background-color .25s var(--ease);
}
.fab[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.fab svg { width: 20px; height: 20px; }
.fab--top { background: var(--blue); }
.fab--top:hover { background: var(--blue-deep); transform: translateY(-3px); }
.fab--wa { background: #25D366; opacity: 1; visibility: visible; transform: none; }
.fab--wa:hover { background: #1eb757; transform: translateY(-3px); }
.fab--wa svg { width: 23px; height: 23px; fill: currentColor; }

/* --------------------------------------------------------------------------
   20. REVEAL ANIMATION
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); }
.reveal[data-in="true"] { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. AUTH PAGES
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--s-12) var(--gutter);
  background: var(--ink);
  position: relative; isolation: isolate;
}
.auth::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,87,255,.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(216,188,126,.07) 0%, transparent 60%);
}
.auth::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image:
    linear-gradient(rgba(200,212,232,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,212,232,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 78%);
}
.auth__inner { width: 100%; max-width: 460px; }
.auth__head { text-align: center; margin-bottom: var(--s-10); }
.auth__head img { height: 42px; width: auto; margin: 0 auto var(--s-6); object-fit: contain; }
.auth__head h1 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; color: var(--on-dark); line-height: 1.1; margin-bottom: 8px; }
.auth__head p { font-size: var(--t-sm); color: var(--on-dark-3); }
/* Light islands sitting inside a dark container put the link colour back —
   otherwise the lifted blue meant for navy lands on white at 3.61:1. */
.auth__card, .card, .cvpanel, .form-card, .side-card { --link: var(--blue); }

.auth__card {
  background: var(--paper); border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 32px 80px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.2);
}
.auth__card .field { margin-bottom: var(--s-5); }
.auth__foot { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule); text-align: center; font-size: var(--t-sm); color: var(--text-2); }
.auth__foot a { color: var(--blue); font-weight: 600; }
.auth__foot a:hover { text-decoration: underline; }
.auth__back { display: block; text-align: center; margin-top: var(--s-6); font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); transition: color .25s var(--ease); }
.auth__back:hover { color: var(--on-dark); }
.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center;
  color: var(--text-3); transition: color .2s var(--ease), background-color .2s var(--ease);
}
.pw-toggle:hover { color: var(--text); background: var(--paper-soft); }
.pw-toggle svg { width: 17px; height: 17px; }
.pw-meter { display: flex; gap: 4px; margin-top: 8px; }
.pw-meter i { flex: 1; height: 3px; border-radius: 2px; background: var(--rule-strong); transition: background-color .3s var(--ease); }
.pw-meter[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: #B58B00; }
.pw-meter[data-score="4"] i { background: var(--success); }

/* --------------------------------------------------------------------------
   22. DASHBOARD
   -------------------------------------------------------------------------- */
.dash { min-height: 100vh; background: var(--paper-soft); }
.dash__bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); border-bottom: 1px solid var(--ink-hairline);
  padding: var(--s-4) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
}
.dash__bar img { height: 32px; width: auto; object-fit: contain; }
.dash__brand { display: flex; align-items: center; gap: 11px; }
.dash__who { display: flex; align-items: center; gap: var(--s-4); }
.dash__who span { font-size: var(--t-sm); color: var(--on-dark-3); }
.dash__who strong { color: var(--on-dark); font-weight: 600; }
.dash__main { padding: var(--s-12) var(--gutter) var(--s-20); max-width: var(--maxw); margin-inline: auto; }
.dash__title { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin-bottom: 6px; }
.dash__sub { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-10); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-12); }
.kpi { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-6); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.kpi__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.kpi__val { font-family: var(--f-display); font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi__meta { font-size: var(--t-xs); color: var(--text-3); margin-top: 6px; }

.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-8); }
.panel__head { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.panel__head h2 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; }
.panel__body { padding: var(--s-6); }
.panel__body--flush { padding: 0; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th {
  text-align: start; padding: 13px var(--s-6); background: var(--paper-soft);
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.data td { padding: 15px var(--s-6); border-bottom: 1px solid var(--rule); color: var(--text-2); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background-color .2s var(--ease); }
table.data tbody tr:hover { background: var(--paper-soft); }
table.data td strong { color: var(--text); font-weight: 600; }

.empty { text-align: center; padding: var(--s-16) var(--s-6); color: var(--text-3); }
.empty svg { width: 40px; height: 40px; margin: 0 auto var(--s-4); color: var(--rule-strong); }
.empty p { font-size: var(--t-sm); }

.chip { display: inline-block; font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); }
.chip--new  { background: var(--blue-wash);    color: var(--blue);    border: 1px solid rgba(0,87,255,.2); }
.chip--ok   { background: var(--success-wash); color: var(--success); border: 1px solid rgba(6,118,71,.2); }
/* --warn (#B54708) on --warn-wash measured 4.36:1 at this size — just under
   the 4.5:1 floor for text below 18.5px. A step darker clears it without
   changing the colour's character. */
.chip--warn { background: var(--warn-wash);    color: #8F3806;        border: 1px solid rgba(181,71,8,.24); }

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--rule-strong); border-top-color: var(--blue);
  animation: spin .7s linear infinite; margin: 0 auto;
}
.spinner--sm { width: 15px; height: 15px; border-width: 1.6px; }
.spinner--on-blue { border-color: rgba(255,255,255,.34); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   23. LEGAL / PROSE PAGES
   -------------------------------------------------------------------------- */
.prose { max-width: 78ch; margin-inline: auto; }
.prose h2 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin: var(--s-12) 0 var(--s-4); line-height: 1.2; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-lg); font-weight: 600; margin: var(--s-8) 0 var(--s-3); }
.prose p, .prose li { font-size: var(--t-md); line-height: 1.85; color: var(--text-2); }
.prose p { margin-bottom: var(--s-4); }
.prose ul { margin: 0 0 var(--s-4); display: flex; flex-direction: column; gap: 9px; }
.prose ul li { position: relative; padding-inline-start: 20px; }
.prose ul li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .55; }
.prose a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .burger { display: flex; }
  .nav__signin { display: none; }
  .svc-layout { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 0; }
  .svc-intro  { grid-column: 1; grid-row: auto; }
  .svc-list   { grid-column: 1; grid-row: auto; }
  .svc-visual { display: none; }
  .svc__media { display: block; margin-top: var(--s-4); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--ink-hairline); height: 240px; }
  .split { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .stages { grid-template-columns: 1fr; }
  .statband { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) 0; }
  .statband__item:nth-child(2n) { border-inline-end: none; text-align: end; }
  .statband__item:nth-child(2n+1) { text-align: start; padding-inline-start: 0; }
  .infostrip { grid-template-columns: 1fr; gap: var(--s-8); text-align: center; }
  .contact__row { justify-content: center; }
  .pagehero__stats { grid-template-columns: repeat(2, 1fr); }
  .pagehero__stat:nth-child(2n) { border-inline-end: none; }
  .pagehero__stat:nth-child(n+3) { padding-top: var(--s-5); }
}

@media (max-width: 780px) {
  :root { --nav-h: 64px; }
  /* The CTA keeps its place on phones but drops to a one-word label so it
     cannot wrap and squeeze the logo out of the bar. */
  .nav__cta { padding: 9px 15px; }
  .nav__cta .is-full { display: none; }
  .nav__cta .is-short { display: inline; }
  /* The social strip is nice-to-have; on a phone it was pushing the headline
     below the fold, so only the icons survive. */
  .socialbar { justify-content: center; padding: 10px var(--gutter); }
  .socialbar__text { display: none; }
  .hero { padding-bottom: var(--s-16); }
  .hero__foot { flex-direction: column; align-items: stretch; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); }
  .hero__sub { max-width: 100%; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__scroll { display: none; }
  .hide-sm { display: none; }
  .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
  .rsum { grid-template-columns: repeat(2, 1fr); }
  .form-row, .form-row--phone { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  /* The floating WhatsApp and back-to-top buttons are fixed to the
     bottom-right. On a narrow screen the wrapped footer links ran straight
     under them — "Taxation" and "Privacy" were unreachable. Reserve the room
     they occupy (two 46px buttons, a 10px gap and the 16px inset) and tighten
     the row spacing so the list stays compact. */
  .footer {
    flex-direction: column; text-align: center;
    padding-bottom: calc(46px * 2 + 10px + 28px);
  }
  .footer__links { justify-content: center; gap: 14px 18px; }
  .footer__copy { max-width: 34ch; margin-inline: auto; line-height: 1.7; }
  .svc__body { padding-inline-start: 0; }
  .ctaband__row .btn { width: 100%; }
  table.data th, table.data td { padding-inline: var(--s-4); }
  .pagehero__stats { border-top: none; }
  .pagehero__stat { border-inline-end: none; border-top: 1px solid var(--ink-hairline); padding-inline: 0; padding-top: var(--s-4); }
}

@media (max-width: 460px) {
  .nav__badge { display: none; }
  .statband { grid-template-columns: 1fr; }
  .statband__item { border-inline-end: none; text-align: start !important; padding-inline: 0 !important; }
  .rsum { grid-template-columns: 1fr; }
  .split__pills { position: static; margin-top: var(--s-3); }
  .trust { gap: 14px 18px; }
}

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

@media print {
  .nav, .drawer, .socialbar, .floaties, .marquee, .hero__media, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .ctaband, .infostrip, .footer, .contact__left { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* --------------------------------------------------------------------------
   26. DASHBOARD — richer surfaces
   -------------------------------------------------------------------------- */
.dash-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--on-dark-2);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: var(--s-8);
}
.dash-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 62% 120% at 88% 0%, rgba(0,87,255,.30) 0%, transparent 62%),
    radial-gradient(ellipse 50% 100% at 8% 100%, rgba(216,188,126,.10) 0%, transparent 60%);
}
.dash-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(200,212,232,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,212,232,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000, transparent 76%);
}
.dash-hero h1 { font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; color: var(--on-dark); line-height: 1.1; margin-bottom: 10px; }
.dash-hero h1 em { font-style: italic; color: var(--blue-lift); }
.dash-hero p { font-size: var(--t-md); color: var(--on-dark-3); max-width: 58ch; }
.dash-hero__row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.dash-hero__badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-4);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid var(--ink-hairline);
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2);
}
.dash-hero__badge i { width: 6px; height: 6px; border-radius: 50%; background: #38D39F; box-shadow: 0 0 0 3px rgba(56,211,159,.22); }

/* KPI, elevated */
.kpi { position: relative; overflow: hidden; }
.kpi::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-expo);
}
.kpi:hover::after { transform: scaleX(1); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: 10px; }
.kpi__mark { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--blue-wash); color: var(--blue); flex-shrink: 0; }
.kpi__mark svg { width: 15px; height: 15px; }

/* Service cards with imagery */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--ink);
  aspect-ratio: 16 / 10;
  transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: transform .7s var(--ease-expo), opacity .4s var(--ease); }
.tile:hover img { transform: scale(1.06); opacity: .62; }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,13,26,.94) 12%, rgba(5,13,26,.25) 62%, transparent 100%); }
.tile__body { position: absolute; inset: auto 0 0 0; padding: var(--s-5); }
.tile__scrim { pointer-events: none; }
.tile__eyebrow { display: block; font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-lift); margin-bottom: 4px; }
.tile__title { display: block; font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; color: #fff; line-height: 1.15; }
.tile__go { position: absolute; top: var(--s-4); inset-inline-end: var(--s-4); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid var(--ink-hairline); color: #fff; transition: background-color .3s var(--ease), transform .3s var(--spring); }
.tile:hover .tile__go { background: var(--blue); transform: translateX(2px); }
.tile__go svg { width: 13px; height: 13px; }

/* Timeline */
.timeline { position: relative; padding-inline-start: 26px; }
.timeline::before { content: ''; position: absolute; inset-inline-start: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.timeline__row { position: relative; padding-bottom: var(--s-5); }
.timeline__row:last-child { padding-bottom: 0; }
.timeline__row::before {
  content: ''; position: absolute; inset-inline-start: -26px; top: 5px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--blue);
}
.timeline__row[data-tone="muted"]::before { border-color: var(--rule-strong); }
.timeline__title { font-size: var(--t-md); font-weight: 600; margin-bottom: 2px; }
.timeline__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.timeline__body { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; margin-top: 6px; }

/* Two-column dashboard split */
.dash-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-5); align-items: start; }
.side-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-6); }
.side-card h3 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.side-card p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; }
.side-card__rows { display: flex; flex-direction: column; gap: 11px; margin-top: var(--s-5); }
.side-card__rows a, .side-card__rows span { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--text-2); }
.side-card__rows svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
.side-card__rows a:hover { color: var(--blue); }

/* Section-attention bars, admin */
.attn { display: flex; flex-direction: column; gap: 14px; }
.attn__row { display: flex; flex-direction: column; gap: 6px; }
.attn__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.attn__name { font-size: var(--t-sm); font-weight: 600; }
.attn__val { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.attn__track { height: 7px; border-radius: 4px; background: var(--paper-tint); overflow: hidden; }
.attn__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-lift)); }

@media (max-width: 1180px) {
  .dash-split { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .tiles { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   27. CV PANEL (careers form)
   -------------------------------------------------------------------------- */
.cvpanel {
  margin: var(--s-5) 0;
  padding: var(--s-6);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper);
}
.cvpanel__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: var(--s-5); }
.cvpanel__icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--blue-wash); color: var(--blue);
}
.cvpanel__icon svg { width: 19px; height: 19px; }
.cvpanel__title { display: block; font-size: var(--t-md); font-weight: 600; color: var(--text); }
.cvpanel__sub { display: block; font-size: var(--t-sm); color: var(--text-3); }

/* --------------------------------------------------------------------------
   28. UTILITIES

   These replace the 148 style="…" attributes the pages used to carry. Inline
   styles are invisible to the design system: a token change here would miss
   every one of them, and they cannot be overridden without !important. Pulling
   them into named classes also lets the Content-Security-Policy forbid style
   attributes outright, which closes off a class of injection.
   -------------------------------------------------------------------------- */
.u-mt-0    { margin-top: 0; }
.u-mt-1    { margin-top: 8px; }
.u-mt-2    { margin-top: 9px; }
.u-mt-3    { margin-top: 18px; }
.u-mt-4    { margin-top: 26px; }
.u-mb-0    { margin-bottom: 0; }
.u-mb-4    { margin-bottom: var(--s-4); }
.u-mb-5    { margin-bottom: 20px; }
.u-mb-8    { margin-bottom: var(--s-8); }
.u-m-0     { margin: 0; }
.u-block   { display: block; }
.u-center  { text-align: center; }
.u-left    { text-align: start; }
.u-grow    { flex: 1; }
.u-lg      { font-size: 1.1rem; }
.u-sm      { font-size: var(--t-sm); }
.u-quiet   { font-size: var(--t-sm); color: var(--text-3); }
.u-link    { color: var(--link); font-weight: 600; }
.u-link-2  { color: var(--link); font-weight: 500; }
.u-lift    { color: var(--blue-lift); }
.u-plain   { text-transform: none; letter-spacing: 0; font-weight: 400; }
.u-under   { color: inherit; text-decoration: underline; }
.u-pad-r   { padding-inline-end: 46px; }
.u-pad-l   { padding-inline-start: 56px; }
.u-pin-br  { position: absolute; inset: auto 24px 24px; }
.u-pad-sm  { padding: 9px 18px; }
.u-pad-md  { padding: 10px 20px; }
.u-pad-y   { padding: 28px 0; }
.u-pad-lg  { padding: 40px 20px; }
.u-empty   { text-align: center; padding: 32px; }
.u-icon-32 { width: 32px; height: 32px; }

/* A quote inside a dark testimonial card. */
.u-quote {
  font-size: 13px; line-height: 1.65; color: var(--on-dark-2);
  font-style: italic; margin-bottom: 8px;
}

/* The callout rail used in the privacy and terms pages. */
.u-callout {
  padding: 22px 26px; background: var(--blue-wash);
  border-inline-start: 3px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0; margin-bottom: 36px;
}

/* The success disc on the thank-you page. */
.u-disc {
  width: 70px; height: 70px; margin: 0 auto 28px; border-radius: 50%;
  background: var(--blue); display: grid; place-items: center;
  box-shadow: 0 12px 40px rgba(0, 87, 255, .42);
}

/* --------------------------------------------------------------------------
   29. LANDMARKS + SMALL TARGETS
   -------------------------------------------------------------------------- */
/* A wrapper so the fixed nav sits inside a banner landmark. It must not take
   part in layout itself. */
.site-header { display: contents; }

.page-foot { display: block; }

/* "Forgot your password?" was 148 × 21px. WCAG 2.5.8 asks for 24 × 24, and a
   thumb on a phone asks for more. Padding gives it the height without moving
   anything around it. */
.link-quiet {
  display: inline-block; padding: 8px 4px; min-height: 24px;
  font-size: var(--t-sm); color: var(--text-2);
  text-decoration: underline; text-underline-offset: 2px;
}
.link-quiet:hover { color: var(--text); }

/* One-off layout values that used to live in style="…" attributes. Named
   rather than inline so the CSP can forbid style attributes entirely. */
.u-x01 { border:0; padding-inline:0; }
.u-x02 { display:block; margin-top:10px; font-weight:500; color:var(--warn); }
.u-x03 { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.u-x04 { display:inline-block; margin-top:8px; }
.u-x05 { font-family:var(--f-display); font-size:1.5rem; font-weight:600; }
.u-x06 { font-size:1.4rem; font-family:var(--f-body); font-weight:600; }
.u-x07 { font-size:1.5rem; }
.u-x08 { font-size:2rem; }
.u-x09 { font-size:var(--d-1); }
.u-x10 { font-size:var(--t-lg); color:var(--on-dark-3); line-height:1.75; margin:20px auto 40px; max-width:46ch; }
.u-x11 { font-size:var(--t-xs); color:var(--text-3); margin-top:2px; }
.u-x12 { justify-content:center; margin:0 auto 14px; }
.u-x13 { margin-bottom:12px; }
.u-x14 { margin-bottom:var(--s-10); }
.u-x15 { margin-bottom:var(--s-12); }
.u-x16 { margin-top:0; }
.u-x17 { margin-top:18px; text-align:center; }
.u-x18 { margin-top:20px; }
.u-x19 { margin-top:20px; max-width:34ch; }
.u-x20 { margin-top:32px; }
.u-x21 { margin-top:40px; }
.u-x22 { margin-top:44px; padding-top:28px; border-top:1px solid var(--ink-hairline); font-family:var(--f-label); font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-3); }
.u-x23 { margin-top:56px; align-items:start; }
.u-x24 { margin-top:6px; }
.u-x25 { margin:0 auto 40px; }
.u-x26 { max-width:420px; }
.u-x27 { max-width:500px; }
.u-x28 { max-width:560px; text-align:center; }
.u-cell { max-width: 34ch; }
.u-ml   { margin-inline-start: 6px; }

/* Off-screen rather than display:none — a bot that skips hidden fields still
   fills this one, which is the entire point of it. */
.u-offscreen {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   30. CLIENT PORTAL — requests, documents, deadlines, uploads

   Added with the portal rebuild. Everything here is used by both
   customer-dashboard.html and admin/dashboard.html, so a request card looks
   the same to the client and to the person working on it.
   -------------------------------------------------------------------------- */

/* A neutral chip for states that are neither good news nor a warning. */
.chip--muted { background: var(--paper-tint); color: var(--text-3); border: 1px solid var(--rule); }

/* The unconfirmed-address notice on a client's own dashboard. Dark, because it
   sits directly under the dark bar and a light strip there reads as an error
   state rather than a standing condition. */
.verifybar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding: 13px var(--gutter);
  background: var(--ink-raise);
  border-bottom: 1px solid var(--ink-hairline);
  --link: var(--blue-lift);
}
.verifybar__text {
  font-size: var(--t-sm); line-height: 1.6; color: var(--on-dark-2, #C6D2E4);
  max-width: 84ch;
}
.verifybar__text strong { color: #fff; font-weight: 600; }

/* ---- Request cards ---- */
.reqs { display: flex; flex-direction: column; gap: var(--s-4); }

.req {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-5); background: var(--paper);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.req:hover { border-color: var(--rule-strong); box-shadow: var(--sh-1); }
.req[data-status="awaiting"] { border-inline-start: 3px solid var(--warn); }
.req[data-status="completed"] { border-inline-start: 3px solid var(--success); }
.req[data-status="closed"] { opacity: .72; }

.req__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.req__title { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.req__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.req__say { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; }
.req__body {
  font-size: var(--t-sm); color: var(--text-3); line-height: 1.7;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule);
}

/* ---- Status track ----
   Five dots joined by a rule. The joining line is drawn on the step rather
   than under the whole row so it can be coloured per segment. */
.track { display: flex; margin: var(--s-4) 0 var(--s-5); padding: 0; list-style: none; }
.track__step { position: relative; flex: 1; padding-top: 20px; text-align: center; min-width: 0; }
.track__step::before {
  content: ''; position: absolute; top: 5px; inset-inline-start: -50%; width: 100%; height: 2px;
  background: var(--rule);
}
.track__step:first-child::before { display: none; }
.track__dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule-strong);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.track__label {
  display: block; font-family: var(--f-label); font-size: var(--t-2xs);
  font-weight: 600; letter-spacing: .06em; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px;
}
.track__step[data-state="done"]::before,
.track__step[data-state="at"]::before { background: var(--blue); }
.track__step[data-state="done"] .track__dot { background: var(--blue); border-color: var(--blue); }
.track__step[data-state="at"] .track__dot {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-wash);
}
.track__step[data-state="at"] .track__label { color: var(--blue); font-weight: 700; }
.track__step[data-state="done"] .track__label { color: var(--text-2); }

/* ---- Document list ---- */
.docs { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; }

.doc {
  display: flex; align-items: center; gap: var(--s-4);
  /* Wraps rather than crushes. This list appears in a narrow column beside the
     delivery panel, and a row with three controls in it has to be able to put
     them on their own line instead of squeezing the file name to nothing. */
  flex-wrap: wrap; row-gap: 10px;
  padding: 13px var(--s-3); border-radius: var(--r-sm);
  transition: background-color .2s var(--ease);
}
.doc:hover { background: var(--paper-soft); }
.doc__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--paper-tint); color: var(--text-2);
}
.doc[data-dir="out"] .doc__icon { background: var(--blue-wash); color: var(--blue); }
.doc__main { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc__actions {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; margin-inline-start: auto;
}
.doc__name {
  font-size: var(--t-sm); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.doc__note { font-size: var(--t-xs); color: var(--text-2); line-height: 1.6; margin-top: 3px; }
.doc__get {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-3);
  border: 1px solid var(--rule);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.doc__get:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-wash); }

/* A file a client sent that no member of staff has opened yet. The left edge
   rather than a coloured row: this list is read by scanning names down a
   column, and a full-row tint moves the eye off the names. */
.doc[data-unseen="true"] {
  border-inline-start: 3px solid var(--blue);
  background: var(--blue-wash);
}
.doc__new {
  display: inline-block; vertical-align: 2px; margin-inline-start: 8px;
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--blue);
  padding: 2px 7px; border-radius: 999px;
}

/* Filter pills above the document list. */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--paper); color: var(--text-3);
  transition: all .25s var(--ease); min-height: 30px;
}
.filters button:hover { border-color: var(--rule-strong); color: var(--text-2); }
.filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- Deadline strip ----
   Scrolls sideways rather than wrapping: the order is the message, and a
   wrapped grid puts the most urgent card next to the least urgent one. */
.dl-strip {
  display: grid; grid-auto-flow: column; justify-content: start; grid-auto-columns: minmax(178px, 258px);
  gap: var(--s-4); overflow-x: auto; padding-bottom: var(--s-2);
  scroll-snap-type: x proximity;
}
/* The strip scrolls. Without an edge fade the card cut off at the right reads
   as a layout bug rather than as "there is more this way". */
.dl-wrap { position: relative; }
.dl-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 10px; inset-inline-end: 0; width: 52px;
  background: linear-gradient(to var(--flow-end, right), rgba(255,255,255,0), var(--paper));
  pointer-events: none;
}

.dl {
  scroll-snap-align: start;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-5); background: var(--paper);
  border-top: 3px solid var(--rule-strong);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dl:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.dl__count {
  font-family: var(--f-display); font-size: 1.7rem; font-weight: 600;
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.dl__label { font-size: var(--t-sm); font-weight: 600; margin-top: 10px; line-height: 1.35; }
.dl__period { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.dl__due { font-size: var(--t-sm); color: var(--text-2); margin-top: 10px; font-weight: 500; }
.dl__who { font-size: var(--t-xs); color: var(--text-3); margin-top: 4px; line-height: 1.5; }

.dl[data-urgency="now"]  { border-top-color: var(--danger); }
.dl[data-urgency="now"]  .dl__count { color: var(--danger); }
.dl[data-urgency="soon"] { border-top-color: var(--warn); }
.dl[data-urgency="soon"] .dl__count { color: var(--warn); }
.dl[data-urgency="far"]  { border-top-color: var(--blue); }

/* ---- Uploader ---- */
.up { display: flex; flex-direction: column; gap: var(--s-4); }

.up__zone {
  position: relative; border: 1.5px dashed var(--rule-strong);
  border-radius: var(--r-md); background: var(--paper-soft);
  padding: var(--s-10) var(--s-5); text-align: center;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.up__zone[data-over="true"] { border-color: var(--blue); background: var(--blue-wash); }
.up__zone svg { width: 30px; height: 30px; color: var(--text-3); margin: 0 auto 12px; display: block; }
.up__zone[data-over="true"] svg { color: var(--blue); }
.up__lead { display: block; font-size: var(--t-md); font-weight: 600; color: var(--text); }
.up__hint { display: block; font-size: var(--t-xs); color: var(--text-3); margin-top: 6px; line-height: 1.6; max-width: 46ch; margin-inline: auto; }

/* The real control. Stretched over the drop zone so the whole panel is
   clickable, but still a focusable input a keyboard and a screen reader can
   find — which a div with a click handler is not. */
.up__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.up__input:focus-visible + .up__face { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--r-sm); }
.up__input:disabled { cursor: not-allowed; }

.upq { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; }
.upq__row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: var(--s-3);
  padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: var(--r-sm); background: var(--paper);
}
.upq__icon { color: var(--text-3); display: grid; place-items: center; }
.upq__name {
  font-size: var(--t-sm); font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upq__size { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; }
/* A progress track drawn before anything is being sent is a lie about state:
   it reads as an upload stuck at zero, and the person sits waiting for a bar
   that will not move until they press the button. The track appears when the
   sending actually starts. */
.upq__bar {
  grid-column: 1 / -1; height: 3px; border-radius: 2px;
  background: var(--paper-tint); overflow: hidden;
  display: none;
}
[data-up-queue][data-sending="true"] .upq__bar { display: block; }
.upq__bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s var(--ease); }
.upq__x {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  font-size: 17px; line-height: 1; color: var(--text-3);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.upq__x:hover { color: var(--danger); background: var(--danger-wash); }

.up__row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }
.up__row .field { flex: 1; min-width: 180px; }

/* A quiet reassurance line under the uploader. */
.up__safe {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-xs); color: var(--text-3); line-height: 1.6;
}
.up__safe svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }

/* Portal responsive. The status track is the piece that cannot survive a
   narrow column: five labels in 320px is five ellipses. Below 640 the labels
   go and the dots carry the meaning, with the chip above still naming it. */
@media (max-width: 640px) {
  .track__label { display: none; }
  .track__step { padding-top: 16px; }
  .req__top { flex-direction: column; gap: var(--s-3); }
  .doc { flex-wrap: wrap; }
  .dl-strip { grid-auto-columns: minmax(180px, 82%); }
}

/* An even two-column split, for panels that carry equal weight — the uploader
   and the document list read as one exchange, not a main and a sidebar.

   The collapse below is not optional. This block sits after the responsive
   section, so without its own media query it out-cascades `.dash-split`'s
   collapse and the two panels stay side by side on a phone — a 150px-wide
   drop zone next to a 150px-wide document list, which is how it shipped
   before this comment existed. */
.dash-split--even { grid-template-columns: 1fr 1fr; }

@media (max-width: 1180px) {
  .dash-split--even { grid-template-columns: 1fr; }
}

/* The visible face of the drop zone. The input sits on top of it at zero
   opacity, so this is decoration and the input is the control. */
.up__face { display: block; pointer-events: none; }

/* --------------------------------------------------------------------------
   31. STAFF CONSOLE (admin/clients.html)

   A picker beside a detail pane. Deliberately plain: this screen is used all
   day by four people who need to find a name fast, not to be impressed.
   -------------------------------------------------------------------------- */
.console { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-5); align-items: start; }

.clist { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.clist__item {
  display: block; width: 100%; text-align: start;
  padding: 13px var(--s-5); border-bottom: 1px solid var(--rule);
  transition: background-color .2s var(--ease);
}
.clist__item:hover { background: var(--paper-soft); }
.clist__item[aria-current="true"] { background: var(--blue-wash); box-shadow: inset 3px 0 0 var(--blue); }
.clist__name { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.clist__mail {
  display: block; font-family: var(--f-label); font-size: var(--t-xs);
  color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clist__tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }

.csearch { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.csearch input { width: 100%; }

/* The status control on a request card, staff side. */
.setstatus { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.setstatus .field { flex: 1; min-width: 150px; }

@media (max-width: 1180px) {
  .console { grid-template-columns: 1fr; }
  .clist { max-height: 320px; }
}

/* --------------------------------------------------------------------------
   32. REVIEWS — the wall, the empty state, and the submit form

   The wall sits on the dark section, so everything here assumes `.on-dark`
   around it. Stars are now drawn five-at-a-time with the filled ones marked,
   rather than as five filled glyphs regardless of the score — a four-star
   review has to be able to look like four stars.
   -------------------------------------------------------------------------- */
.stars svg[data-on="false"] { opacity: .22; }

.review__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap;
}
.review__head .review__tag { margin-bottom: 0; }

.review__badge {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #38D39F; padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(56, 211, 159, .1); border: 1px solid rgba(56, 211, 159, .28);
}
.review__badge svg { width: 12px; height: 12px; }

/* ---- Empty state ----
   Deliberately not styled as an error or a gap to be apologised for. It is a
   statement of policy, and it should look like one. */
.rempty {
  grid-column: 1 / -1; text-align: center;
  padding: clamp(40px, 6vw, 72px) var(--s-6);
  border: 1px dashed var(--ink-hairline-2); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .022);
}
.rempty svg { color: var(--on-dark-3); opacity: .5; margin: 0 auto var(--s-5); display: block; }
.rempty__lead { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: var(--on-dark); }
.rempty__sub {
  font-size: var(--t-sm); line-height: 1.85; color: var(--on-dark-3);
  max-width: 56ch; margin: 12px auto 0;
}

/* ---- Call to action above the form ---- */
.rcta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-10); padding: var(--s-6) var(--s-8);
  border: 1px solid var(--ink-hairline); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .03);
}
.rcta__lead { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: var(--on-dark); }
.rcta__sub { font-size: var(--t-sm); color: var(--on-dark-3); margin-top: 4px; }

/* ---- The form ----
   Sits on the dark section, so the inputs are given a dark treatment rather
   than inheriting the light one used everywhere else on the site. */
.rform-wrap {
  margin-top: var(--s-5); padding: var(--s-8);
  border: 1px solid var(--ink-hairline); border-radius: var(--r-lg);
  background: var(--ink-raise);
}
.rform-wrap[hidden] { display: none; }
.rform__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); }

.rform .field > label,
.rform .rate legend { color: var(--on-dark-2); }
.rform input, .rform textarea, .rform select {
  background: rgba(255, 255, 255, .04);
  border-color: var(--ink-hairline-2);
  color: var(--on-dark);
}
.rform input::placeholder, .rform textarea::placeholder { color: var(--on-dark-3); opacity: .7; }
.rform input:focus, .rform textarea:focus, .rform select:focus { border-color: var(--blue-lift); background: rgba(255,255,255,.06); }
.rform .field-hint { color: var(--on-dark-3); }
.rform .form-note { color: var(--on-dark-3); }
.rform .field { margin-bottom: var(--s-5); }

/* ---- Rating picker ----
   Radio buttons, not a row of clickable stars. A star widget has to reinvent
   keyboard support, focus order and the accessible name; a radio group already
   has all three, and arrow keys work without a line of JavaScript. */
.rate { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.rate legend {
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; padding: 0;
}
.rate__row { display: flex; gap: 8px; }
.rate__opt { position: relative; }
.rate__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.rate__opt span {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--r-sm); border: 1px solid var(--ink-hairline-2);
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 600;
  color: var(--on-dark-3); transition: all .2s var(--ease);
}
.rate__opt:hover span { border-color: var(--champagne-dim); color: var(--champagne); }
/* Fill the checked number and everything before it, so choosing 4 lights
   1 2 3 4. The DOM now runs 1..5 in visual order — which is what makes the
   radio group's arrow keys move the way the row looks — so this needs a
   "previous sibling" match, and :has() is the only way to express one. Where
   :has() is unsupported the chosen number alone lights up, which still reads
   correctly; nothing depends on the run. */
.rate__opt input:checked ~ span,
.rate__opt:has(~ .rate__opt input:checked) span {
  background: var(--champagne); border-color: var(--champagne); color: var(--ink); font-weight: 700;
}
.rate__opt input:focus-visible ~ span { outline: 2px solid var(--blue-lift); outline-offset: 2px; }

/* ---- Thank-you ---- */
.rthanks { text-align: center; padding: var(--s-8) var(--s-4); }
.rthanks:focus { outline: none; }
.rthanks strong { display: block; font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: var(--on-dark); margin-top: var(--s-4); }
.rthanks span { display: block; font-size: var(--t-sm); color: var(--on-dark-3); line-height: 1.8; max-width: 48ch; margin: 10px auto 0; }
.rthanks .form-done__mark { margin-inline: auto; }

@media (max-width: 780px) {
  .rform__grid { grid-template-columns: 1fr; }
  .rcta { flex-direction: column; align-items: flex-start; }
}

/* ---- Moderation queue, staff side ---- */
.modq { display: flex; flex-direction: column; gap: var(--s-4); }
.modq__row { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }
.modq__row[data-status="pending"] { border-inline-start: 3px solid var(--warn); }
.modq__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: 10px; }
.modq__who { font-size: var(--t-md); font-weight: 600; }
.modq__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; }
.modq__body { font-size: var(--t-sm); line-height: 1.75; color: var(--text-2); margin: 10px 0 var(--s-4); }
.modq .stars { color: var(--champagne); }
.modq__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   33. INVOICES
   -------------------------------------------------------------------------- */
.chip--danger { background: var(--danger-wash); color: var(--danger); border: 1px solid rgba(213,44,31,.22); }

.invs { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; }
.inv {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 15px var(--s-3); border-radius: var(--r-sm);
  transition: background-color .2s var(--ease);
}
.inv:hover { background: var(--paper-soft); }
.inv[data-status="overdue"] { box-shadow: inset 3px 0 0 var(--danger); }
/* Was `opacity: .78`, which dragged the row's meta text to 3.3:1 and the
   "Paid" chip to 3.54:1. A settled invoice should recede, but it still has
   to be readable — so the recession is a quieter background, not dimmed ink. */
.inv[data-status="paid"] { background: var(--paper-soft); }
.inv[data-status="paid"]:hover { background: var(--paper-tint); }
.inv__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inv__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv__num { font-family: var(--f-label); font-size: var(--t-sm); font-weight: 700; color: var(--text); letter-spacing: .02em; }
.inv__meta { font-size: var(--t-xs); color: var(--text-3); }
.inv__note { font-size: var(--t-xs); color: var(--text-2); line-height: 1.6; margin-top: 3px; }
.inv__amount {
  flex-shrink: 0; text-align: end;
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.inv__amount small { display: block; font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.inv__open {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--rule);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.inv__open:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-wash); }

/* ---- Line-item editor, staff side ---- */
.lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-4); }
.line {
  display: grid; grid-template-columns: 1fr 80px 130px auto auto;
  gap: 8px; align-items: center;
}
.line input { min-width: 0; }
.line__amt { font-family: var(--f-label); font-size: var(--t-sm); text-align: end; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line__x {
  width: 30px; height: 30px; border-radius: var(--r-xs); font-size: 18px; line-height: 1;
  color: var(--text-3); transition: color .2s var(--ease), background-color .2s var(--ease);
}
.line__x:hover { color: var(--danger); background: var(--danger-wash); }

.sums { display: flex; flex-direction: column; gap: 7px; padding: var(--s-4) 0; border-top: 1px solid var(--rule); margin-bottom: var(--s-4); }
.sums__row { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--text-2); }
.sums__row[data-total] { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--text); padding-top: 8px; border-top: 1px solid var(--rule); }

@media (max-width: 780px) {
  .line { grid-template-columns: 1fr auto auto; grid-template-areas: 'd d x' 'q p a'; }
  .line input:nth-child(1) { grid-area: d; }
  .inv { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   34. THE PRINTED INVOICE

   A separate print treatment from the site-wide one in section 25: this page
   IS the document, so almost none of the chrome should survive, and the paper
   version has to stand on its own without the colours.
   -------------------------------------------------------------------------- */
.doc-sheet {
  max-width: 820px; margin: var(--s-12) auto var(--s-20);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: clamp(28px, 5vw, 64px);
  box-shadow: var(--sh-2);
}
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-8); flex-wrap: wrap; margin-bottom: var(--s-10); }
.doc-head img { height: 44px; width: auto; }
.doc-head__right { text-align: end; }
.doc-title { font-family: var(--f-display); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.doc-sheet .table-wrap { margin-bottom: var(--s-6); }
table.doc-lines { min-width: 420px; }

@media print {
  .doc-sheet .table-wrap { overflow: visible; }
  table.doc-lines { min-width: 0; }
}
.doc-num { font-family: var(--f-label); font-size: var(--t-sm); color: var(--text-3); margin-top: 6px; letter-spacing: .04em; }

.doc-parties { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); margin-bottom: var(--s-10); }
.doc-party__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.doc-party p { font-size: var(--t-sm); line-height: 1.75; color: var(--text-2); }
.doc-party strong { display: block; color: var(--text); font-size: var(--t-md); font-weight: 600; margin-bottom: 3px; }

table.doc-lines { width: 100%; border-collapse: collapse; margin-bottom: var(--s-6); }
table.doc-lines th {
  text-align: start; padding: 10px 12px; border-bottom: 2px solid var(--rule-strong);
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
}
table.doc-lines th:last-child, table.doc-lines td:last-child,
table.doc-lines th:nth-child(2), table.doc-lines td:nth-child(2),
table.doc-lines th:nth-child(3), table.doc-lines td:nth-child(3) { text-align: end; }
table.doc-lines td { padding: 13px 12px; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
table.doc-lines td:first-child { color: var(--text); }

.doc-sums { margin-inline-start: auto; width: min(320px, 100%); }
.doc-foot { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--text-3); line-height: 1.8; }
.doc-stamp {
  display: inline-block; margin-bottom: var(--s-6);
  font-family: var(--f-label); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 9px 18px; border-radius: var(--r-xs); border: 2px solid currentColor;
}
.doc-stamp[data-s="paid"]    { color: var(--success); }
.doc-stamp[data-s="overdue"] { color: var(--danger); }
.doc-stamp[data-s="sent"]    { color: var(--blue); }
.doc-stamp[data-s="draft"], .doc-stamp[data-s="void"] { color: var(--text-3); }

@media print {
  .dash__bar, .doc-actions, .boot { display: none !important; }
  body.dash, .dash__main { background: #fff !important; padding: 0 !important; }
  .doc-sheet { border: 0; box-shadow: none; margin: 0; padding: 0; max-width: none; }
  table.doc-lines td, .doc-party p, .doc-foot { color: #000; }
  a[href^="http"]::after { content: none; }
  @page { margin: 18mm; }
}

/* The new-invoice editor, folded away until wanted. A permanently open form
   under every client turns the console into a wall of empty fields. */
.newinv summary { display: inline-block; cursor: pointer; list-style: none; }
.newinv summary::-webkit-details-marker { display: none; }
.newinv[open] summary { margin-bottom: var(--s-5); }
.newinv__body { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.inv__acts { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   35. WHEN A PHOTOGRAPH DOES NOT ARRIVE

   Paired with the error handler in site.js. An image hosted on a third party
   that fails leaves an empty box; these rules put a brand panel there instead,
   so a section degrades to plain rather than to broken.
   -------------------------------------------------------------------------- */
img[data-failed="true"] { display: none !important; }

[data-img-failed="true"] {
  background-image:
    radial-gradient(circle at 22% 18%, rgba(59,130,255,.16), transparent 55%),
    linear-gradient(150deg, var(--ink-raise-2), var(--ink));
  background-color: var(--ink);
}
/* The tile keeps its scrim, which would otherwise darken an already dark
   panel into a flat black rectangle. */
.tile[data-img-failed="true"] .tile__scrim { opacity: .35; }

/* --------------------------------------------------------------------------
   TILE ART — drawn, not fetched

   These six tiles used to carry stock photographs hotlinked from a third
   party, inside the signed-in dashboard — so an outside service got a request
   every time a client opened their portal, and could see how often they did.
   The photographs were decorative (alt="") and sat under a scrim at half
   opacity, so almost none of the picture ever reached anybody's eye.

   Replaced with a drawn layer: no request, no bytes, nothing to rot, and each
   motif belongs to its own discipline — ruled ledger lines, an audit grid,
   diagonal rulings, columns. Subtle on purpose; the title is the content.
   -------------------------------------------------------------------- */
.tile__art {
  position: absolute; inset: 0;
  background-color: var(--ink-raise);
  transition: transform .7s var(--ease-expo), opacity .4s var(--ease);
  opacity: .9;
}
.tile:hover .tile__art { transform: scale(1.04); }

/* A common wash so the motifs sit in light rather than on flat colour. */
.tile__art::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(47,110,235,.20), transparent 60%),
    radial-gradient(90% 70% at 88% 92%, rgba(216,188,126,.10), transparent 62%);
}

.tile__art[data-art="ledger"] {
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.075) 0 1px, transparent 1px 17px);
}
.tile__art[data-art="grid"] {
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(to right,  rgba(255,255,255,.07) 0 1px, transparent 1px 22px);
}
.tile__art[data-art="rule"] {
  background-image: repeating-linear-gradient(
    118deg, rgba(255,255,255,.075) 0 1px, transparent 1px 15px);
}
.tile__art[data-art="bars"] {
  background-image: repeating-linear-gradient(
    to right, rgba(255,255,255,.09) 0 9px, transparent 9px 30px);
}
.tile__art[data-art="rings"] {
  background-image:
    repeating-radial-gradient(circle at 78% 76%,
      rgba(255,255,255,.075) 0 1px, transparent 1px 26px);
}
.tile__art[data-art="columns"] {
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.075) 0 2px, transparent 2px 34px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 0 3px, transparent 3px);
}

@media (prefers-reduced-motion: reduce) {
  .tile__art, .tile:hover .tile__art { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   36. TEAM PORTAL NAVIGATION

   Shared across every staff screen. With four screens instead of one, the
   console needed somewhere to put them that is not a link buried in a hero.
   -------------------------------------------------------------------------- */
.dash__bar--nav { gap: var(--s-6); }

.adminnav { display: flex; align-items: center; gap: var(--s-6); margin-inline-end: auto; }
.adminnav a {
  position: relative; padding: 6px 0; font-size: var(--t-sm); font-weight: 500;
  color: var(--on-dark-3); transition: color .25s var(--ease);
}
.adminnav a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--blue-lift); transition: width .3s var(--ease);
}
.adminnav a:hover { color: #fff; }
.adminnav a[aria-current="page"] { color: #fff; font-weight: 600; }
.adminnav a:hover::after, .adminnav a[aria-current="page"]::after { width: 100%; }

.whoami { display: flex; align-items: center; gap: 8px; }
.whoami strong { color: var(--on-dark); font-size: var(--t-sm); font-weight: 600; }
.whoami .chip { background: rgba(255,255,255,.08); color: var(--on-dark-2); border-color: var(--ink-hairline-2); }

.burger--admin { display: none; }
.adminmenu {
  display: none; flex-direction: column; gap: var(--s-3);
  background: var(--ink-raise); border-bottom: 1px solid var(--ink-hairline);
  padding: var(--s-5) var(--gutter);
}
.adminmenu a { font-size: var(--t-md); font-weight: 500; color: var(--on-dark-2); padding: 8px 0; }
.adminmenu a:hover, .adminmenu a[aria-current="page"] { color: var(--blue-lift); }

@media (max-width: 1000px) {
  .adminnav { display: none; }
  .burger--admin { display: flex; }
  .adminmenu[data-open="true"] { display: flex; }
  .whoami strong { display: none; }
}

/* --------------------------------------------------------------------------
   37. THE WORK QUEUE, SEARCH AND ARCHIVE
   -------------------------------------------------------------------------- */
.dash-hero--tight { padding-block: clamp(28px, 4vw, 44px); margin-bottom: var(--s-6); }

/* ---- Search ---- */
.gsearch { position: relative; display: flex; align-items: center; }
.gsearch svg { position: absolute; inset-inline-start: 16px; color: var(--text-3); pointer-events: none; }
.gsearch input {
  width: 100%; padding-inline-start: 46px; height: 52px;
  font-size: var(--t-md);
}
.gsearch input::-webkit-search-cancel-button { cursor: pointer; }

.ghits { list-style: none; padding: 0; margin-top: var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.ghits a {
  display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--s-4);
  padding: 11px var(--s-3); border-radius: var(--r-sm);
  transition: background-color .2s var(--ease);
}
.ghits a:hover { background: var(--paper-soft); }
.ghits__type {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.ghits__label { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.ghits__meta { font-size: var(--t-xs); color: var(--text-3); text-align: end; }

/* ---- Queue ----
   Colour-coded down the left edge, because the first question an adviser asks
   this list is "how bad", not "what". */
.queue { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.queue__row > a, .queue__row > span {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 13px var(--s-4); border-radius: var(--r-sm);
  border-inline-start: 3px solid transparent;
  transition: background-color .2s var(--ease);
}
.queue__row > a:hover { background: var(--paper-soft); }
.queue__row[data-kind="late"]    > * { border-inline-start-color: var(--danger); }
.queue__row[data-kind="soon"]    > * { border-inline-start-color: var(--warn); }
.queue__row[data-kind="waiting"] > * { border-inline-start-color: var(--blue); }
.queue__row[data-kind="new"]     > * { border-inline-start-color: var(--champagne); }

.queue__icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--paper-tint); color: var(--text-2);
}
.queue__row[data-kind="late"] .queue__icon { background: var(--danger-wash); color: var(--danger); }
.queue__row[data-kind="soon"] .queue__icon { background: var(--warn-wash); color: var(--warn); }
.queue__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.queue__title { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.queue__meta { font-size: var(--t-xs); color: var(--text-3); }

.allclear { text-align: center; padding: var(--s-12) var(--s-6); }
.allclear svg { color: var(--success); margin: 0 auto var(--s-4); display: block; }
.allclear__lead { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 6px; }

/* ---- Archive ---- */
.arch { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.arch__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 11px var(--s-3); border-radius: var(--r-sm);
}
.arch__row:hover { background: var(--paper-soft); }
.arch__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arch__label { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.arch__meta { font-size: var(--t-xs); color: var(--text-3); }
/* Two actions now, and the row has to be able to wrap rather than crush the
   file name — the same failure the document list had. */
.arch__row { flex-wrap: wrap; row-gap: 10px; }
.arch__main { flex: 1 1 220px; }
.arch__acts { display: flex; gap: 8px; flex: 0 0 auto; margin-inline-start: auto; }

/* The one irreversible control in the console. Outlined rather than filled:
   it should read as serious, not as the thing to press. */
.btn--danger {
  border: 1px solid var(--danger, #C0392B);
  color: var(--danger, #C0392B);
  background: transparent;
}
.btn--danger:hover {
  background: var(--danger, #C0392B); border-color: var(--danger, #C0392B); color: #fff;
}

@media (max-width: 780px) {
  .ghits a { grid-template-columns: 1fr; gap: 3px; }
  .ghits__meta { text-align: start; }
}

/* --------------------------------------------------------------------------
   38. TEAM MANAGEMENT
   -------------------------------------------------------------------------- */
.staff { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.staff__row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 13px var(--s-3); border-radius: var(--r-sm);
  transition: background-color .2s var(--ease);
}
.staff__row:hover { background: var(--paper-soft); }
/* Was `opacity: .6`, which is the third time in this stylesheet that dimming a
   whole row dragged its text under the contrast floor — here the "Disabled"
   chip to 3.4:1. A disabled account should read as set aside, not as faded, so
   the signal is a muted ground and the chip itself, both fully legible. */
.staff__row[data-off="true"] { background: var(--paper-tint); }
.staff__row[data-off="true"] .staff__avatar { background: var(--rule-strong); color: var(--text-2); }
.staff__row[data-off="true"] .staff__name { color: var(--text-2); }
.staff__avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--blue-lift), var(--blue-deep));
  color: #fff; font-weight: 700; font-size: var(--t-md);
}
.staff__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.staff__name { font-size: var(--t-sm); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.staff__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.staff__acts select { padding: 8px 30px 8px 12px; font-size: var(--t-sm); }

/* Numbered instructions that read as documentation rather than as a form. */
.steps-doc { display: flex; flex-direction: column; gap: var(--s-8); }
.stepd { display: flex; gap: var(--s-5); align-items: flex-start; }
.stepd__n {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  font-family: var(--f-label); font-size: var(--t-sm); font-weight: 700;
}
.stepd h3 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.stepd p { font-size: var(--t-sm); line-height: 1.8; color: var(--text-2); margin-bottom: 10px; max-width: 74ch; }
.stepd p:last-of-type { margin-bottom: 0; }

table.data td.yes { color: var(--success); font-weight: 600; }
table.data td.no  { color: var(--danger);  font-weight: 600; }

@media (max-width: 780px) {
  .staff__row { flex-wrap: wrap; }
  .staff__acts { width: 100%; }
  .stepd { flex-direction: column; gap: var(--s-3); }
}

/* --------------------------------------------------------------------------
   39. INTERNAL NOTES
   -------------------------------------------------------------------------- */
.notes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.note {
  padding: var(--s-4); border-radius: var(--r-sm);
  background: var(--warn-wash); border: 1px solid rgba(181,71,8,.16);
}
.note__body { font-size: var(--t-sm); line-height: 1.75; color: var(--text); white-space: pre-wrap; }
.note__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 8px; }

.u-right { text-align: end; }
.u-right .btn { margin-inline-start: auto; }
.doc__arch { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   40. THE GUIDE

   A long-form document inside the console. It has to be readable on a phone at
   a client's office and printable to a PDF that can be emailed to someone who
   has not been given an account yet.
   -------------------------------------------------------------------------- */
.guide { max-width: 860px; margin-inline: auto; }
.guide__toc {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-6); margin-bottom: var(--s-12);
}
.guide__toc h2 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; margin-bottom: var(--s-4); }
.guide__toc ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.guide__toc a { font-size: var(--t-sm); color: var(--link); font-weight: 500; }
.guide__toc a:hover { text-decoration: underline; }

.gsec { margin-bottom: var(--s-16); scroll-margin-top: 90px; }
.gsec > h2 {
  font-family: var(--f-display); font-size: var(--d-2); font-weight: 600;
  line-height: 1.15; margin-bottom: var(--s-3);
  padding-bottom: var(--s-4); border-bottom: 2px solid var(--rule-strong);
}
.gsec h3 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; margin: var(--s-8) 0 var(--s-3); }
.gsec h4 { font-size: var(--t-md); font-weight: 700; margin: var(--s-5) 0 8px; }
.gsec p { font-size: var(--t-md); line-height: 1.85; color: var(--text-2); margin-bottom: var(--s-4); max-width: 74ch; }
.gsec strong { color: var(--text); font-weight: 600; }
/* Block, not flex. A flex container turns its children into flex items, and a
   flex item is not a list-item — so the bullets and numbers silently vanish,
   which is exactly what happened to the first PDF of this guide. */
.gsec ul, .gsec ol { margin: 0 0 var(--s-4); padding-inline-start: 24px; max-width: 74ch; }
.gsec ul { list-style: disc; }
.gsec ol { list-style: decimal; }
.gsec li { font-size: var(--t-md); line-height: 1.8; color: var(--text-2); margin-bottom: 9px; }
.gsec li::marker { color: var(--blue); }
.gsec a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* A short instruction the reader follows literally. */
.do {
  display: flex; gap: 14px; align-items: flex-start;
  padding: var(--s-5); margin-bottom: var(--s-4);
  background: var(--blue-wash); border-inline-start: 3px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.do__n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
}
.do p { margin: 0; font-size: var(--t-sm); color: var(--text); }

/* Something that will bite if ignored. */
.warn-box {
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5);
  background: var(--warn-wash); border-inline-start: 3px solid var(--warn);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.warn-box p { margin: 0; font-size: var(--t-sm); color: var(--text); line-height: 1.8; }
.warn-box strong { display: block; margin-bottom: 4px; }

.tip-box {
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5);
  background: var(--success-wash); border-inline-start: 3px solid var(--success);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.tip-box p { margin: 0; font-size: var(--t-sm); color: var(--text); line-height: 1.8; }
.tip-box strong { display: block; margin-bottom: 4px; }

.guide kbd {
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--paper-tint); border: 1px solid var(--rule-strong); color: var(--text);
}

.guide__cover { display: none; }

@media print {
  .dash__bar, .dash__bar--nav, .adminmenu, .guide__toc, .doc-actions, .boot, .floaties { display: none !important; }
  body.dash, .dash__main { background: #fff !important; padding: 0 !important; }
  .guide { max-width: none; }
  .guide__cover { display: block; text-align: center; padding: 30mm 0 20mm; break-after: page; }
  .guide__cover-title { font-family: var(--f-display); font-size: 3rem; font-weight: 600; margin-bottom: 12px; line-height: 1.1; }
  .guide__cover p { font-size: 1rem; color: #444; }
  .guide__cover img { height: 54px; margin-bottom: 28px; }
  .gsec { break-inside: auto; margin-bottom: 14mm; }
  .gsec > h2 { break-after: avoid; }
  .gsec h3, .gsec h4 { break-after: avoid; }
  .do, .warn-box, .tip-box { break-inside: avoid; }
  .gsec p, .gsec li { color: #222; font-size: 10.5pt; }
  .guide a { color: #000; text-decoration: underline; }
  .guide a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .guide a[href^="/"]::after { content: none; }
  @page { margin: 18mm 16mm; }
}

/* --------------------------------------------------------------------------
   41. AUDIT FIXES

   Found by measuring every page at 1366 and 360 px rather than by eye. Each
   one is a real failure, not a preference.
   -------------------------------------------------------------------------- */

/* ---- Target size (WCAG 2.2 AA, 2.5.8) ----
   Standalone links were 13–21 px tall. The success criterion exempts a link
   inside a sentence, which the ones in prose are; it does not exempt a row of
   footer links, a breadcrumb, a call-to-action or "Sign in", which are the
   ones fixed here. Padding gives them height without moving anything, because
   they sit in flex rows that were already taller than the text. */
.footer__links a,
.crumbs a,
.nav__signin,
.link-arrow,
.socialbar__text a,
.infostrip a,
.guide__toc a,
.gsec > p > a,
.contact__row a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer__links a, .crumbs a, .guide__toc a { padding-block: 4px; }

/* ---- 360 px overflow, careers list ----
   `.role` is a flex row of a name and a badge. At 360 px the longest role name
   plus the badge exceeds the line, and because neither may shrink the row
   pushed the document 14 px wider than the screen. Stacking below 400 px costs
   nothing and 360 px is one of the two commonest Android widths. */
@media (max-width: 400px) {
  .role { flex-direction: column; align-items: flex-start; gap: 8px; }
  .role__name { line-height: 1.35; }
}

/* ---- 360 px overflow, invoice header ----
   "Signed in as …" plus a button will not fit a narrow phone. The address is
   not needed on the invoice screen — the invoice says who it is for. */
@media (max-width: 520px) {
  .dash__bar { flex-wrap: wrap; gap: var(--s-3); }
  .dash__who { flex-wrap: wrap; }
  .dash__who > span:first-child { display: none; }
}

/* ---- 360 px overflow, the careers form ----
   Form controls carry an intrinsic minimum width of roughly twenty characters
   that resists shrinking, and a grid track sized `1fr` is `minmax(auto, 1fr)`
   — so `auto` took its floor from the widest input and the track grew to
   354 px inside a 320 px container, pushing the whole document 14 px wider
   than a 360 px screen.

   `min-width: 0` is the fix in both places: on the controls so they may shrink
   to their box, and on grid children so a track is never forced wider than the
   space it was given. Cheap, and it forecloses the entire class of bug rather
   than this one instance of it. */
input, textarea, select { min-width: 0; }
.split > *, .dash-split > *, .console > *, .card-grid > *, .form-row > * { min-width: 0; }

/* ---- The printed invoice on a phone ----
   This media query has to live AFTER `.doc-parties` sets its two columns, not
   before it. Placed above the base rule it lost the cascade at equal
   specificity and the two-column grid held at every width, pushing the sheet
   24 px past a 360 px screen. The same mistake had already been made once with
   `.dash-split--even`; both are now at the end of the file where they belong. */
@media (max-width: 640px) {
  .doc-parties { grid-template-columns: 1fr; gap: var(--s-5); }
  .doc-head { gap: var(--s-4); }
  .doc-head__right { text-align: start; }
  .doc-sheet { padding: var(--s-6) var(--s-5); }
}

/* ---- Target size, the main navigation and prose lists ----
   `.nav__links a` was 13 px tall and `.prose ul li a` 15 px. Neither is
   exempt: a row of navigation links is not "a target in a sentence", and a
   list of contact links is a list, not prose. The nav row is already 24 px
   taller than its text, so the padding costs no layout at all. */
.nav__links a { display: inline-flex; align-items: center; min-height: 24px; }
.prose ul li a, .prose ol li a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---- Keyboard access to horizontally scrolling regions ----
   A container that scrolls but holds nothing focusable cannot be scrolled by
   keyboard at all: there is no way to put focus inside it. `tabindex="0"` on
   the container fixes that, and these two rules give the resulting focus ring
   somewhere sensible to sit. */
.dl-strip:focus-visible, .table-wrap:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-sm);
}

/* ---- 320 px: buttons with long labels ----
   `.btn--lg` sets 34 px of horizontal padding, which a label like "Open the
   team dashboard" pushes past the edge of a 320 px screen. Caught by the
   responsive suite, which walks every page at every width — the earlier manual
   sweep had only checked 320 px on a handful of pages and missed it. */
@media (max-width: 380px) {
  .btn { max-width: 100%; }
  .btn--lg { padding-inline: 20px; font-size: var(--t-xs); }
  .u-x03 .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   42. THE PUBLIC TAX CALENDAR

   The urgency colour is carried on the row rather than a chip, because the
   table is long and the reader's question scanning it is "how soon", asked
   twenty times in a row.
   -------------------------------------------------------------------------- */
table.cal td:first-child { min-width: 210px; }
table.cal .cal__detail { display: block; font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; font-weight: 400; }
table.cal .cal__in { font-family: var(--f-label); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.cal time { font-variant-numeric: tabular-nums; white-space: nowrap; }

table.cal tr[data-u="now"]  td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.cal tr[data-u="now"]  .cal__in { color: var(--danger); }
table.cal tr[data-u="soon"] td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.cal tr[data-u="soon"] .cal__in { color: var(--warn); }
table.cal tr[data-u="far"]  td:first-child { box-shadow: inset 3px 0 0 var(--rule-strong); }
table.cal tr[hidden] { display: none; }

/* --------------------------------------------------------------------------
   43. INSIGHTS
   -------------------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); margin-top: var(--s-16); }
.post {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.post:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: rgba(0,87,255,.22); }
.post__kicker { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.post h3 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; line-height: 1.2; }
.post h3 a { color: inherit; }
.post h3 a:hover { color: var(--blue); }
.post p { font-size: var(--t-sm); line-height: 1.75; color: var(--text-2); }
.post__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: auto; padding-top: var(--s-4); }

/* An article's own body — narrower than the page, because it is read. */
.article { max-width: 74ch; margin-inline: auto; }
.article > p { font-size: var(--t-lg); line-height: 1.85; color: var(--text-2); margin-bottom: var(--s-5); }
.article > p:first-of-type { font-size: 1.2rem; color: var(--text); }
.article h2 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; line-height: 1.15; margin: var(--s-16) 0 var(--s-4); }
.article h3 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 600; margin: var(--s-10) 0 var(--s-3); }
.article ul, .article ol { margin: 0 0 var(--s-5); padding-inline-start: 24px; }
.article ul { list-style: disc; } .article ol { list-style: decimal; }
.article li { font-size: var(--t-md); line-height: 1.8; color: var(--text-2); margin-bottom: 10px; }
.article li::marker { color: var(--blue); }
.article strong { color: var(--text); font-weight: 600; }
.article a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.article__foot { margin-top: var(--s-16); padding-top: var(--s-8); border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   44. RIGHT-TO-LEFT

   The stylesheet uses logical properties throughout — padding-inline-start
   rather than padding-left, inset-inline-end rather than right — so almost
   everything mirrors on its own when `dir="rtl"` is set on <html>. There is no
   second stylesheet and no mirrored copy to keep in step, which is the whole
   reason the conversion was worth doing.

   What remains here is the handful of things logical properties cannot express:
   gradients with a physical direction, transforms, and a typeface.
   -------------------------------------------------------------------------- */

:root { --flow-end: right; }
[dir="rtl"] { --flow-end: left; }

/* ---- Arabic typography ----
   Cormorant Garamond and Space Grotesk have no Arabic coverage at all, so an
   Arabic page falls back to whatever the system happens to have — usually
   something that clashes badly with the Latin numerals sitting next to it.
   IBM Plex Sans Arabic covers Arabic and Latin in one family with matching
   proportions, which is what keeps a phone number inside an Arabic sentence
   from looking pasted in. */
[lang="ar"], [dir="rtl"] {
  --f-display: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
  --f-body:    'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
  --f-label:   'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Arabic script has no italics and no small caps. Faking either is the mark of
   a translation nobody looked at. */
[dir="rtl"] em,
[dir="rtl"] .display em,
[dir="rtl"] i { font-style: normal; }

/* The display face carries the brand in English through italic emphasis; in
   Arabic that job goes to colour and weight instead. */
[dir="rtl"] .display em { font-weight: 700; }

/* Letter-spacing on uppercase labels is a Latin device. Applied to Arabic it
   breaks the joins between letters, which is not a stylistic preference — it
   makes the word wrong. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .label,
[dir="rtl"] .nav__badge,
[dir="rtl"] .chip,
[dir="rtl"] .btn,
[dir="rtl"] .statband__label,
[dir="rtl"] .pagehero__stat small,
[dir="rtl"] .rsum__item span,
[dir="rtl"] .marquee__item,
[dir="rtl"] .trust__label,
[dir="rtl"] .infostrip__label,
[dir="rtl"] .post__kicker,
[dir="rtl"] .certs__eyebrow,
[dir="rtl"] th { letter-spacing: 0; text-transform: none; }

/* Arrows point the way the reader is going. */
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .tile__go svg,
[dir="rtl"] .inv__open svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(3px); }

/* Gradients and shadows with a physical direction. */
[dir="rtl"] .marquee {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(270deg, transparent, #000 6%, #000 94%, transparent);
}
[dir="rtl"] .clist__item[aria-current="true"] { box-shadow: inset -3px 0 0 var(--blue); }
[dir="rtl"] table.cal tr[data-u="now"]  td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
[dir="rtl"] table.cal tr[data-u="soon"] td:first-child { box-shadow: inset -3px 0 0 var(--warn); }
[dir="rtl"] table.cal tr[data-u="far"]  td:first-child { box-shadow: inset -3px 0 0 var(--rule-strong); }
[dir="rtl"] .inv[data-status="overdue"] { box-shadow: inset -3px 0 0 var(--danger); }

/* Numerals, dates and money stay in Western digits and left-to-right order,
   which is what Lebanese business documents use. */
[dir="rtl"] .num-display,
[dir="rtl"] .statband__val,
[dir="rtl"] .pagehero__stat strong,
[dir="rtl"] .hero__stat strong,
[dir="rtl"] time,
[dir="rtl"] .cal__in,
[dir="rtl"] .inv__amount { direction: ltr; unicode-bidi: isolate; }

/* A phone number or email inside Arabic text needs isolating or the
   surrounding direction drags its punctuation to the wrong end. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---- The language switcher ---- */
.langswitch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; min-height: 24px;
  border: 1px solid var(--ink-hairline-2); border-radius: var(--r-pill);
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .1em; color: var(--on-dark-2);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.langswitch:hover { color: #fff; border-color: var(--blue-lift); background: var(--blue-wash-2); }
.langswitch svg { width: 13px; height: 13px; flex-shrink: 0; }
[dir="rtl"] .langswitch { letter-spacing: 0; }

@media (max-width: 1180px) { .nav__actions .langswitch { display: none; } }

/* --------------------------------------------------------------------------
   45. MESSAGE THREADS
   -------------------------------------------------------------------------- */
.thread__list { max-height: 340px; overflow-y: auto; padding-inline-end: 4px; }
.thread__empty { padding: var(--s-5) 0; }

.thread { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.msg { display: flex; flex-direction: column; gap: 4px; max-width: 82%; }
.msg[data-side="mine"]   { align-self: flex-end; align-items: flex-end; }
.msg[data-side="theirs"] { align-self: flex-start; align-items: flex-start; }

.msg__bubble { padding: 12px 16px; border-radius: var(--r-md); }
.msg[data-side="mine"]   .msg__bubble { background: var(--blue); color: #fff; border-end-end-radius: var(--r-xs); }
.msg[data-side="theirs"] .msg__bubble { background: var(--paper-tint); color: var(--text); border-end-start-radius: var(--r-xs); }
.msg__body { font-size: var(--t-sm); line-height: 1.65; white-space: pre-wrap; margin: 0; }
.msg__meta { font-family: var(--f-label); font-size: var(--t-2xs); color: var(--text-3); }

.thread__compose { display: flex; gap: var(--s-3); align-items: flex-end; margin-top: var(--s-5); padding-top: var(--s-4); border-block-start: 1px solid var(--rule); }
.thread__compose textarea { flex: 1; resize: vertical; min-height: 44px; }
.thread__compose .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .msg { max-width: 92%; }
  .thread__compose { flex-direction: column; align-items: stretch; }
}

/* The thread folds away under each request. Open, it should look like a
   conversation; closed, it should not compete with the status track above it. */
.thread__wrap { margin-top: var(--s-4); padding-top: var(--s-4); border-block-start: 1px solid var(--rule); }
.thread__toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer;
  font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
  list-style: none;
}
.thread__toggle::-webkit-details-marker { display: none; }
.thread__toggle::before {
  content: ''; width: 7px; height: 7px; flex-shrink: 0;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .25s var(--ease);
}
.thread__wrap[open] .thread__toggle::before { transform: rotate(45deg); }
.thread__toggle:hover { color: var(--blue-deep); }
.thread__wrap[open] .thread__toggle { margin-bottom: var(--s-4); }
[dir="rtl"] .thread__toggle { letter-spacing: 0; }
[dir="rtl"] .thread__toggle::before { transform: rotate(135deg); }
[dir="rtl"] .thread__wrap[open] .thread__toggle::before { transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   46. "YOUR ACCOUNT IS NOT ON THE TEAM LIST" — the self-service fix

   Being told access was refused, without being told which id to authorise, is
   a dead end that costs somebody a support conversation. The whole fix is one
   value the visitor cannot otherwise see, so it is put on the screen with a
   copy button at the moment it is needed.
   -------------------------------------------------------------------------- */
.uidbox {
  margin-top: var(--s-5); padding: var(--s-5);
  background: var(--blue-wash); border-inline-start: 3px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0; text-align: start;
}
.uidbox__lead { font-size: var(--t-sm); line-height: 1.7; color: var(--text); margin-bottom: var(--s-3); }
.uidbox__row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3); }
/* NOT --f-label here. Space Grotesk draws a zero as a plain oval and a capital
   O as a slightly wider one, and at 13px on a phone they are the same shape.
   A person comparing this string against the Firebase console by eye will read
   them as equal, create a document that matches nobody, and be locked out by a
   character they cannot see. The system mono stacks below all disambiguate:
   Consolas, SF Mono and Cascadia dot or slash the zero. */
.uidbox__uid {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas', 'DejaVu Sans Mono', monospace;
  font-size: var(--t-sm); letter-spacing: .02em; word-break: break-all;
  user-select: all;
}
.uidbox__note { font-size: var(--t-xs); line-height: 1.65; color: var(--text-2); margin-top: 8px; }
.uidbox__raw {
  display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-xs);
  background: rgba(9, 24, 48, .06); border: 1px solid var(--rule);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas', monospace;
  font-size: var(--t-2xs); line-height: 1.55; color: var(--text); word-break: break-word;
}
.uidbox code {
  font-family: var(--f-label); font-size: .92em; padding: 2px 6px; border-radius: var(--r-xs);
  background: rgba(0,87,255,.10); color: var(--blue-deep);
}

/* =============================================================================
   47. TOAST
   -----------------------------------------------------------------------------
   For failures that happen away from a form — a refused download, an expired
   link. Fixed to the bottom on a phone, bottom-right on a desktop, and it never
   blocks anything the way a dialog does.
   ========================================================================== */
.toast {
  position: fixed; z-index: 200;
  inset-inline: var(--s-4); inset-block-end: var(--s-4);
  max-width: 420px; margin-inline: auto;
  padding: 13px 16px; border-radius: var(--r-md);
  background: var(--ink); color: #fff;
  font-size: var(--t-sm); line-height: 1.55;
  box-shadow: 0 10px 34px -12px rgba(9, 24, 48, .5);
  opacity: 0; transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.toast[data-show="true"] { opacity: 1; transform: translateY(0); }
.toast[data-kind="error"]   { background: #7A231C; }
.toast[data-kind="success"] { background: #04543A; }

@media (min-width: 720px) {
  .toast { inset-inline: auto var(--s-6); margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* =============================================================================
   48. CERTIFICATIONS BAND
   -----------------------------------------------------------------------------
   Sits directly under the trust strip, because it is the same kind of claim —
   credentials — and grouping them means a visitor reads them as one statement
   rather than two.

   Dark, and deliberately so. The badges arrived as artwork on flat white
   rectangles; those backgrounds were cut away, so on this ground the shapes
   themselves sit on the page with no card, no panel and no white anywhere. It
   is one step lighter than the services section below it, which is what keeps
   the two from reading as a single undifferentiated block of navy.
   ========================================================================== */
.certs {
  background: var(--ink-raise);
  padding: var(--s-10) var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.certs__in { max-width: var(--maxw); margin-inline: auto; text-align: center; }
.certs__eyebrow {
  font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-3); margin-bottom: var(--s-6);
}
.certs__row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(30px, 6vw, 76px); flex-wrap: wrap;
}
.certs__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
}
.certs__item img {
  display: block; width: auto; max-width: 100%;
  /* Sized by eye rather than to one number: a wordmark and a shield with the
     same pixel height do not read as the same size. The badges carry printed
     words inside them, so they need enough height for those words to be read
     rather than merely recognised. */
  height: 92px;
  transition: transform .3s var(--ease);
}
.certs__item--wordmark img { height: 46px; }
.certs__item:hover img { transform: translateY(-2px); }

.certs__note {
  max-width: 62ch; margin-inline: auto; margin-top: var(--s-6);
  font-size: var(--t-xs); color: var(--on-dark-3); line-height: 1.7;
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .certs { padding-block: var(--s-8); }
  .certs__item img { height: 74px; }
  .certs__item--wordmark img { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .certs__item img { transition: none; }
  .certs__item:hover img { transform: none; }
}