/* Layout concept: one dark navy canvas with a live particle field behind every
   section; content runs as a single generous column, and electric blue is spent
   once per section on the thing that matters most. */
:root {
  /* Straight off the CYWEB logo: #086FF3 is the brand blue and #082253 the
     brand navy. The canvas sits a shade deeper than the navy so the navy
     itself reads as a raised surface rather than as the background. */
  --navy-abyss:  #030713;
  --navy-deep:   #071434;
  --navy-panel:  #0b2050;
  --navy-raise:  #103070;
  --line:        rgba(120, 165, 235, 0.18);
  --line-strong: rgba(120, 165, 235, 0.32);
  --blue:        #086ff3;
  --blue-bright: #5aa9ff;
  --blue-deep:   #0552bb;
  --ink:         #eaf1fc;
  --ink-soft:    #a9bddd;
  --ink-mute:    #6e86ac;
  --good:        #2bc27e;
  --warn-amber:  #f0b23f;

  /* Archivo is wide and squarish, which is the shape of the CYWEB wordmark —
     the headings and the logo now belong to the same family of forms. Inter
     carries the reading text. Mono is kept for one job only: figures on the
     invoice, where aligned digits actually matter. */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --label:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Hidden must mean hidden.
   The `hidden` attribute is only a weak default style, so any element whose own
   rule sets a display value out-ranks it and stays on screen. That is why the
   assistant panel (display:flex) and the loading overlay (display:grid) could
   both appear while marked hidden. Declaring it here with !important settles
   it for every element on the page, now and later. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--navy-abyss);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Archivo is a wide face, so display sizes need the tracking pulled in hard and
   small sizes left almost alone — otherwise headings sprawl and subheads cramp. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
h3, h4 { font-weight: 700; letter-spacing: -0.018em; line-height: 1.22; }
h1 { letter-spacing: -0.045em; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

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

/* ---------- background ---------- */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#bg-static {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 50% -12%, #10244e 0%, #081331 46%, #04091a 100%);
}

#bg-static::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(111,178,255,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111,178,255,.5) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: .05;
  -webkit-mask-image: radial-gradient(ellipse 78% 54% at 50% 38%, #000, transparent);
          mask-image: radial-gradient(ellipse 78% 54% at 50% 38%, #000, transparent);
}

/* Slow-drifting colour fields. Heavily blurred and far apart in hue, they give
   the dark background some depth and movement of its own, so the page does not
   sit on flat navy when the 3D scene is unavailable. */
.aurora { position: absolute; inset: -20%; filter: blur(90px); opacity: .55; }
.aurora span {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
  top: -8%; left: 8%;
  background: radial-gradient(circle, rgba(47,139,255,.55), transparent 68%);
  animation: drift1 34s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width: 38vw; height: 38vw; min-width: 260px; min-height: 260px;
  top: 28%; right: 2%;
  background: radial-gradient(circle, rgba(111,178,255,.34), transparent 70%);
  animation: drift2 44s ease-in-out infinite;
}
.aurora span:nth-child(3) {
  width: 42vw; height: 42vw; min-width: 300px; min-height: 300px;
  bottom: -12%; left: 26%;
  background: radial-gradient(circle, rgba(23,78,180,.42), transparent 70%);
  animation: drift3 52s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(7vw, 5vh, 0) scale(1.14); }
}
@keyframes drift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-8vw, 7vh, 0) scale(.92); }
}
@keyframes drift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, -6vh, 0) scale(1.18); }
}

/* Vignette — darkens the edges so text keeps its contrast wherever the
   colour fields happen to drift. */
#bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 92% 72% at 50% 44%, transparent 38%, rgba(3,7,18,.72) 100%);
}

/* Fine grain. Kills the banding that wide dark gradients produce on cheap
   panels, and gives the whole thing a less plasticky finish. */
#bg-grain {
  position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none; }
}

#bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

#shell { position: relative; z-index: 1; }

/* ---------- shared ---------- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 760px) { .wrap { padding-inline: 32px; } }

.section { padding-block: 72px; }
@media (min-width: 760px) { .section { padding-block: 104px; } }

/* A short blue rule carries the section marker instead of a tracked-out
   all-caps label. Same information, none of the template chrome. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--label);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blue-bright);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px; border-radius: 2px;
  background: var(--blue);
  flex-shrink: 0;
}

.lede {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
  max-width: 62ch;
}

.panel {
  background:
    linear-gradient(162deg, rgba(90, 169, 255, .085), rgba(11, 32, 80, .35) 46%, rgba(3, 7, 19, .5));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(170, 205, 255, .14),
    0 24px 48px -30px rgba(0, 0, 0, .85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s, box-shadow .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 34px -14px rgba(47,139,255,.95);
}
.btn-primary:hover { background: var(--blue-bright); color: #04091a; }
.btn-ghost {
  background: rgba(255,255,255,.055);
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-sm { padding: 9px 18px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- header ---------- */
header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: rgba(4, 9, 26, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s;
}
header.scrolled { border-bottom-color: var(--line); }

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.brand {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center;
  line-height: 0;
}
.brand img { height: 30px; width: auto; display: block; }
@media (max-width: 420px) { .brand img { height: 25px; } }

.foot-logo { height: 38px; width: auto; display: block; max-width: 100%; }

.nav-links { display: none; gap: 1px; align-items: center; }
.nav-link, .nav-cta, .nav-signin, .lang-switch button { white-space: nowrap; }
@media (min-width: 1210px) { .nav-links { display: flex; } }

.nav-link {
  background: none;
  border: 0;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink-mute);
  padding: 9px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s, background-color .25s;
}
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,.055); }
.nav-link[aria-current="page"] { color: var(--ink); background: rgba(47,139,255,.16); }

.nav-cta { display: none; }
@media (min-width: 1210px) { .nav-cta { display: inline-flex; } }

/* Sits beside the menu button, so signing in is reachable on a phone without
   opening the menu first. Hidden on desktop, where the full nav already has it. */
.nav-signin {
  display: inline-flex; margin-left: auto;
  padding: 8px 15px; font-size: 13.2px; gap: 7px;
}
@media (min-width: 1210px) { .nav-signin { display: none; } }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-right: -8px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  border-radius: 999px;
}
@media (min-width: 1210px) { .burger { display: none; } }
.burger:hover { background: rgba(255,255,255,.06); }
.burger span { position: relative; display: block; width: 19px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 19px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .3s, opacity .2s;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); }
.burger[aria-expanded="true"] span::after { opacity: 0; }

#mobile-menu {
  border-top: 1px solid var(--line);
  background: rgba(4, 9, 26, .97);
  padding-block: 14px 22px;
}
#mobile-menu ul { display: flex; flex-direction: column; gap: 2px; }
#mobile-menu .nav-link { width: 100%; text-align: left; font-size: 16px; padding: 13px 14px; border-radius: 12px; }
#mobile-menu .btn { width: 100%; margin-top: 14px; }

/* ---------- hero ---------- */
.hero { padding-block: 64px 40px; }
@media (min-width: 760px) { .hero { padding-block: 92px 56px; } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(111,178,255,.3);
  background: rgba(47,139,255,.1);
  color: var(--blue-bright);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-family: var(--mono);
  letter-spacing: .04em;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-bright); }

h1 {
  font-size: clamp(2.5rem, 7.4vw, 4.4rem);
  margin-top: 26px;
  max-width: 17ch;
}
.h1-accent {
  background: linear-gradient(97deg, var(--ink) 8%, var(--blue-bright) 52%, var(--ink) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px 30px;
  margin-top: 54px;
  max-width: 600px;
}
.figures dt {
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.060em;
  text-transform: none;
  color: var(--ink-mute);
}
.figures dd {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- package cards ---------- */
.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  margin-top: 44px;
}

.pkg { display: flex; flex-direction: column; padding: 26px; min-width: 0; }
.pkg.popular {
  border-color: rgba(111,178,255,.46);
  background: linear-gradient(162deg, rgba(47,139,255,.15), rgba(255,255,255,.028));
}

.pkg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pkg h3 { font-size: 20px; font-weight: 600; }
.pkg .tag { font-size: 13.5px; color: var(--ink-mute); margin-top: 5px; }

.badge {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.060em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.price {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: 22px;
  font-variant-numeric: tabular-nums;
}
.price .from { font-size: 15px; font-weight: 400; color: var(--ink-mute); letter-spacing: 0; }
.price-note {
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.060em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.yearly {
  display: inline-block;
  margin-top: 13px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.yearly small { color: var(--ink-mute); font-size: 12.5px; }

.pkg ul { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.pkg li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.tick { flex-shrink: 0; margin-top: 3px; color: var(--blue-bright); }

/* margin-top:auto on the footer, not the button: it pushes the footer to the
   bottom of the card, so every Get Started button lines up across the row no
   matter how many feature lines the package above it has. */
.pkg .pkg-foot {
  margin-top: auto; padding-top: 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.pkg .pkg-foot .btn { width: 100%; }

/* All five packages across one row once there is room for it. Below this the
   grid falls back to wrapping, so nothing gets squeezed.

   This block has to come AFTER the base .pkg rules above: a media query adds
   no specificity, so whichever rule is written last wins. */
@media (min-width: 1000px) {
  .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

  .pkg { padding: 20px 17px; }
  .pkg h3 { font-size: 17px; }
  .pkg .tag { font-size: 12.5px; }
  .pkg .price { font-size: 30px; margin-top: 18px; }
  .pkg .price .from { font-size: 13px; }
  .pkg .yearly { padding: 8px 10px; font-size: 13px; }
  .pkg .yearly small { display: block; font-size: 11px; }
  .pkg li { font-size: 13.2px; gap: 8px; }
  .pkg ul { margin-top: 18px; gap: 8px; }
  .pkg .pkg-foot { padding-top: 20px; }
  .pkg .pkg-foot .btn { padding: 11px 14px; font-size: 14px; }
  /* At this width the name and the badge cannot sit side by side without
     squashing the name, so the badge goes above it. */
  .pkg-head { flex-direction: column-reverse; align-items: flex-start; gap: 9px; }
  .badge { font-size: 9px; padding: 4px 8px; letter-spacing: .06em; }

  /* Fallback for browsers without subgrid: the header is the only part that
     varies in height, so it gets a floor tall enough for the longest tagline
     at this width (three lines) plus the package name. */
  .pkg .pkg-head { min-height: 7.4em; }

  /* Where subgrid is available, every row — name, price, "one-time build", the
     yearly figure, the feature list and the button — shares a track across the
     whole row, so they line up exactly however any one card's text wraps. */
  @supports (grid-template-rows: subgrid) {
    .card-grid { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .pkg {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
    }
    .pkg .pkg-head { min-height: 0; }
  }
}

/* ---------- comparison ---------- */
.table-scroll { overflow-x: auto; border-radius: 18px; margin-top: 12px; }
.table-scroll .btn { width: 100%; padding: 10px 14px; font-size: 13.5px; }
.cta-row td { padding-top: 20px; padding-bottom: 22px; }
.scroll-hint {
  display: none; margin-top: 30px;
  font-family: var(--label); font-size: 11px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 1140px) { .scroll-hint { display: block; } }
@media (min-width: 1141px) { .table-scroll { margin-top: 26px; } }
/* These rules belong to the package comparison table ONLY. They used to be
   written as bare `table`, `th`, `td` selectors, which quietly applied to every
   other table on the page — the admin tables and the invoice — forcing them to
   1040px wide and pushing their columns out of view. Scoped to .table-scroll. */
.table-scroll table { width: 100%; min-width: 1040px; border-collapse: collapse; text-align: left; }
.table-scroll thead th:not(.rowhead) { min-width: 170px; }
.th-tag { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-mute); margin-top: 5px; line-height: 1.4; }
.th-from { font-size: 14px; font-weight: 400; color: var(--ink-mute); }
.th-btn { display: block; margin-top: 14px; }
.table-scroll caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.table-scroll th, .table-scroll td { padding: 14px 16px; }

.table-scroll thead th {
  vertical-align: bottom;
  border-bottom: 1px solid var(--line);
}
.table-scroll th.rowhead, .table-scroll td.rowhead {
  position: sticky;
  left: 0;
  background: #0a1430;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ink-soft);
  min-width: 180px;
  z-index: 2;
}
.table-scroll thead th.rowhead {
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.060em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.col-pop { background: rgba(47,139,255,.07); }

.th-name { font-family: var(--display); font-size: 16px; font-weight: 600; display: block; margin-top: 8px; }
.th-price { font-size: 25px; font-weight: 800; font-family: var(--display); display: block; margin-top: 7px; font-variant-numeric: tabular-nums; }
.th-sub { font-family: var(--label); font-size: 9.5px; letter-spacing: 0.060em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-top: 3px; }
.th-year {
  display: inline-block; margin-top: 9px; font-size: 12.5px;
  background: rgba(255,255,255,.08); padding: 5px 9px; border-radius: 7px;
  font-variant-numeric: tabular-nums;
}

.table-scroll tbody tr { border-top: 1px solid var(--line); }
.table-scroll tbody td { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.grp th {
  font-family: var(--label); font-size: 10px; letter-spacing: 0.060em; text-transform: uppercase;
  color: var(--ink-mute); background: rgba(10,20,48,.72); padding-block: 10px;
}
.yes { color: var(--good); }
.no  { color: rgba(117,137,169,.55); }
.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.flag {
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.060em; text-transform: uppercase;
  color: var(--warn-amber); border: 1px solid rgba(245,187,79,.32); background: rgba(245,187,79,.1);
  padding: 3px 7px; border-radius: 6px; white-space: nowrap;
}

.legend {
  display: grid; gap: 11px; margin-top: 20px; font-size: 12.5px; color: var(--ink-mute);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.legend div { display: flex; gap: 9px; align-items: flex-start; }

/* ---------- generic feature grid ---------- */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); margin-top: 44px; }
.tile { padding: 24px; min-width: 0; }
.tile h3 { font-size: 17px; font-weight: 600; margin-top: 18px; }
.tile p { font-size: 14.5px; color: var(--ink-soft); margin-top: 9px; }
.tile-ico {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(47,139,255,.14); color: var(--blue-bright);
  display: inline-flex; align-items: center; justify-content: center;
}
.tile .num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: rgba(111,178,255,.5);
}

/* ---------- steps ---------- */
.steps { display: flex; flex-direction: column; gap: 12px; margin-top: 44px; }
.step { display: flex; gap: 18px; padding: 20px 22px; }
.step-n {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(111,178,255,.34); background: rgba(4,9,26,.8);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--blue-bright);
}
.step h3 { font-size: 16.5px; font-weight: 600; }
.step p { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- plan panel ---------- */
.plan { padding: 30px; display: grid; gap: 30px; margin-top: 36px; }
@media (min-width: 860px) { .plan { grid-template-columns: 1.15fr 1fr; align-items: center; padding: 40px; } }
.plan h3 { font-size: 24px; }
.covers { display: flex; flex-direction: column; gap: 10px; }
.covers li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.055); border-radius: 12px; padding: 13px 16px; font-size: 14.5px;
}
.covers .tick { color: var(--good); margin: 0; }

/* ---------- work ---------- */
.work-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 44px; }
.work { overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.work-cover {
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(148deg, #14295a 0%, #0a1536 58%, #060e22 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* The real screenshot of the client's live site. It sits on top of the
   branded initials tile and fades in once it has actually loaded, so a
   blocked or slow image leaves the tile showing rather than a gap. */
.work-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;       /* show the top of the page, not the middle */
  opacity: 0;
  transition: opacity .55s ease, transform .6s ease;
}
.work-shot.ready { opacity: 1; }
.work-cover:hover .work-shot.ready { transform: scale(1.035); }
.work-cover span {
  font-family: var(--display); font-size: 46px; font-weight: 800;
  letter-spacing: .06em; color: rgba(111,178,255,.3);
}
.work-cover em {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-family: var(--label); font-size: 9.5px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
}
.work-body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.work h3 { font-size: 18px; font-weight: 600; }
.work .where { font-size: 12.5px; color: var(--ink-mute); font-family: var(--mono); }
.work p { font-size: 14.5px; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--ink-soft);
}
.work a.visit {
  margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600;
  color: var(--blue-bright); text-decoration: none; display: inline-flex; gap: 7px; align-items: center;
}
.work a.visit:hover { text-decoration: underline; }

/* ---------- admin editing ---------- */
.adm-empty { text-align: center; color: var(--ink-mute); padding: 20px 0; font-size: 13.5px; }
.adm-add {
  margin-top: 14px; background: none; border: 1px dashed var(--line);
  color: var(--ink-soft); border-radius: 10px; padding: 9px 14px;
  font: inherit; font-size: 13.5px; cursor: pointer; width: 100%;
}
.adm-add:hover { border-color: var(--blue-bright); color: var(--blue-bright); }

body.modal-open { overflow: hidden; }

.adm-modal {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3, 7, 18, .72);
  backdrop-filter: blur(5px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.adm-sheet {
  width: 100%; max-width: 520px; margin: auto;
  background: #0b1222; border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
}
.adm-sheet.wide { max-width: 720px; }
.adm-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.adm-sheet-head h3 { font-size: 16.5px; font-weight: 600; }
.adm-x {
  background: none; border: 0; color: var(--ink-mute);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.adm-x:hover { color: var(--ink); }
.adm-sheet-body { padding: 20px; }
.adm-sheet-foot {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  padding: 16px 20px; border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.adm-sheet-foot .btn { padding: 10px 16px; font-size: 14px; }
.adm-danger { color: var(--warn-amber); border-color: rgba(245, 187, 79, .4); margin-right: auto; }

.adm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.adm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adm-field.adm-wide, .adm-form > .adm-wide { grid-column: 1 / -1; }
.adm-wide { margin-top: 13px; display: flex; flex-direction: column; gap: 5px; }
.adm-field > span, .adm-wide > span {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute);
}
.adm-field em, .adm-check em {
  font-style: normal; font-size: 11.5px; color: var(--ink-mute); line-height: 1.5;
}
.adm-field input, .adm-field select, .adm-field textarea,
.adm-wide textarea, .adm-item input {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; color: var(--ink);
  font: inherit; font-size: 14px; width: 100%; min-width: 0;
}
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus,
.adm-wide textarea:focus, .adm-item input:focus {
  outline: 2px solid rgba(111, 178, 255, .5); outline-offset: 1px;
}
.adm-field textarea, .adm-wide textarea { resize: vertical; }

.adm-items { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.adm-items-head, .adm-item {
  display: grid; grid-template-columns: 1fr 64px 92px 30px; gap: 8px; align-items: center;
}
.adm-items-head {
  font-family: var(--label); font-size: 10px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.adm-items-head span:nth-child(2), .adm-items-head span:nth-child(3) { text-align: right; }
.adm-item { margin-bottom: 8px; }
.adm-item .adm-qty, .adm-item .adm-price { text-align: right; }
.adm-x-row {
  background: none; border: 0; color: var(--ink-mute);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.adm-x-row:hover { color: var(--warn-amber); }
.adm-total {
  margin-top: 12px; text-align: right; font-size: 14px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.adm-check {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px;
  font-size: 14px; color: var(--ink-soft); cursor: pointer;
}
.adm-check input { margin-top: 3px; flex-shrink: 0; }
.adm-check span { display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 560px) {
  .adm-form { grid-template-columns: 1fr; }
  .adm-items-head, .adm-item { grid-template-columns: 1fr 52px 76px 26px; }
}

/* ---------- the invoice document ----------
   Built to A4 proportions and printed on white, because this is a document
   that leaves the website: it gets emailed, saved as a PDF and filed. */
.inv-doc {
  --ink-900: #0b1222;
  --ink-600: #44506b;
  --ink-400: #7b869b;
  --ink-200: #dfe5ee;
  --ink-100: #f1f4f9;
  --accent: #1f6fd8;

  background: #fff; color: var(--ink-900);
  border-radius: 12px; overflow: hidden;
  font-size: 13.5px; line-height: 1.55;
  box-shadow: 0 1px 0 var(--ink-200);
}

/* A thin brand rule along the top edge. */
.inv-rule { height: 5px; background: linear-gradient(90deg, var(--accent), #6fb2ff); }
.inv-pad { padding: 34px 36px 30px; }

.inv-head { display: flex; justify-content: space-between; gap: 26px; align-items: flex-start; }
.inv-logo { display: flex; align-items: center; gap: 11px; }
.inv-logo-img { max-height: 46px; max-width: 190px; display: block; }
.inv-logo-word {
  font-family: var(--display); font-weight: 800; font-size: 23px;
  letter-spacing: .15em; color: var(--ink-900);
}
.inv-logo-bar { width: 3px; height: 26px; border-radius: 2px; background: var(--accent); }
.inv-from { font-size: 11.5px; color: var(--ink-400); line-height: 1.7; margin-top: 12px; }
.inv-from b { color: var(--ink-600); font-weight: 600; }

.inv-title { text-align: right; flex-shrink: 0; }
.inv-word {
  font-family: var(--label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400);
  line-height: 1;
}
.inv-no {
  font-family: var(--display); font-size: 23px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink-900); line-height: 1.1;
  margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.inv-title .inv-stamp { margin-top: 10px; }
.inv-stamp {
  display: inline-block; margin-top: 10px;
  padding: 4px 11px; border-radius: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.inv-stamp.paid { background: #e3f6e9; color: #19693a; }
.inv-stamp.due { background: #fdf0d6; color: #8a5712; }
.inv-stamp.over { background: #fde4e4; color: #96221f; }
.inv-stamp.draft { background: var(--ink-100); color: var(--ink-400); }

/* The four facts someone checks first, on one line. */
.inv-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 18px; margin-top: 28px;
  border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200);
  padding: 15px 0;
}
.inv-facts > div { min-width: 0; }
.inv-k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-400);
}
.inv-v {
  margin-top: 4px; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.inv-v.accent { color: var(--accent); }

.inv-to { margin-top: 26px; }
.inv-biz { font-size: 16.5px; font-weight: 600; margin-top: 5px; }
.inv-to-meta { font-size: 12px; color: var(--ink-400); margin-top: 3px; line-height: 1.6; }

.inv-table { width: 100%; border-collapse: collapse; margin-top: 26px; }
.inv-table th {
  text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-400);
  padding: 0 0 9px; border-bottom: 1.5px solid var(--ink-900);
}
.inv-table th.num, .inv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-table th.num { white-space: nowrap; padding-left: 18px; }
.inv-table td {
  padding: 13px 0; border-bottom: 1px solid var(--ink-100);
  vertical-align: top; color: var(--ink-900); font-size: 13.5px;
}
.inv-table td.num { white-space: nowrap; padding-left: 14px; }
.inv-table td:first-child { padding-right: 16px; }
.inv-amt { font-weight: 600; }

.inv-sums { margin-top: 18px; margin-left: auto; width: 280px; max-width: 100%; }
.inv-sums p {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 6px 15px; font-variant-numeric: tabular-nums; color: var(--ink-600);
}
.inv-grand {
  margin-top: 8px; padding: 13px 15px !important;
  background: var(--ink-900); color: #fff !important;
  border-radius: 9px; font-size: 16px; font-weight: 700;
}

.inv-pay {
  margin-top: 28px; display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.inv-block {
  background: var(--ink-100); border-radius: 10px; padding: 15px 16px;
}
.inv-block h4 {
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-400); font-weight: 600;
}
.inv-block p { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-600); }
.inv-block b { color: var(--ink-900); }

.inv-foot {
  margin-top: 26px; padding-top: 15px; border-top: 1px solid var(--ink-200);
  font-size: 11px; line-height: 1.65; color: var(--ink-400);
}
.inv-foot strong { color: var(--ink-600); font-weight: 600; }
.inv-thanks {
  margin-top: 22px; font-size: 13px; color: var(--ink-600);
}

@media (max-width: 620px) {
  .inv-pad { padding: 24px 20px; }
  .inv-head { flex-direction: column; gap: 18px; }
  .inv-title { text-align: left; }
  .inv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .inv-pay { grid-template-columns: 1fr; }
  .inv-sums { width: 100%; }
}

/* What is still missing from the invoice — shown in the admin, never on the
   document the customer receives. */
.inv-todo {
  margin-top: 16px; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(245, 187, 79, .1); border: 1px solid rgba(245, 187, 79, .3);
  border-radius: 11px; padding: 13px 15px; font-size: 13px; line-height: 1.6;
  color: var(--ink-soft);
}
.inv-todo b { color: var(--warn-amber); font-weight: 600; }

.inv-send { margin-top: 20px; }
.inv-send-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 11px;
}
.inv-send-row { display: flex; flex-wrap: wrap; gap: 9px; }
.inv-send-row .btn { padding: 10px 15px; font-size: 13.5px; }
.enq-send { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.enq-send .btn { padding: 9px 14px; font-size: 13.5px; }
a.btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.inv-actions a {
  text-decoration: none; display: inline-flex; align-items: center;
}
.inv-send-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-mute); }
.inv-send-done {
  margin-top: 11px; font-size: 13px; color: var(--blue-bright);
  word-break: break-all;
}

.inv-public {
  position: fixed; inset: 0; z-index: 140; overflow-y: auto;
  background: var(--bg); padding: 28px 16px;
}
.inv-public-inner { max-width: 700px; margin: 0 auto; }

/* Printing sends only the invoice to paper, not the whole website. */
@media print {
  body.printing { background: #fff; }
  body.printing > *:not(.adm-modal):not(.inv-public) { display: none !important; }
  body.printing .adm-modal, body.printing .inv-public {
    position: static; inset: auto; background: #fff; padding: 0;
    backdrop-filter: none; overflow: visible; display: block;
  }
  body.printing .adm-sheet {
    max-width: none; border: 0; box-shadow: none; background: #fff;
  }
  body.printing .adm-sheet-head, body.printing .adm-sheet-foot,
  body.printing .inv-send, body.printing .inv-send-row,
  body.printing .inv-todo { display: none !important; }
  body.printing .adm-sheet-body { padding: 0; }
  body.printing .inv-public-inner { max-width: none; }
  body.printing .inv-doc {
    border-radius: 0; box-shadow: none; font-size: 11pt;
  }
  body.printing .inv-pad { padding: 0; }
  /* Keep a block of the document from being split across two pages. */
  body.printing .inv-table, body.printing .inv-sums,
  body.printing .inv-pay, body.printing .inv-block { break-inside: avoid; }
  @page { size: A4; margin: 16mm 15mm; }
}



.lead-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; list-style: none; padding: 0; }
.lead-list > li {
  display: flex; gap: 14px; justify-content: space-between; align-items: flex-start;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.lead-list > li:first-child { border-top: 0; padding-top: 0; }
.lead-list .when { display: block; font-size: 11.8px; color: var(--ink-mute); margin-top: 2px; }
.lead-detail { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.lead-detail li { font-size: 12.8px; color: var(--ink-soft); }
.lead-side { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }



/* ---------- language switch ---------- */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px; gap: 2px; flex-shrink: 0;
}
.lang-switch button {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-mute);
  padding: 5px 11px; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.lang-switch-m { margin: 0 0 16px; }
@media (max-width: 1209px) { .nav-row > .lang-switch { display: none; } }

/* ---------- trust + reviews ---------- */
.trust-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.trust-item {
  display: flex; gap: 13px; align-items: flex-start;
  border-left: 2px solid var(--blue);
  padding: 2px 0 2px 15px;
}
.trust-item b { display: block; font-weight: 600; font-size: 15.5px; }
.trust-item span { display: block; font-size: 13.8px; color: var(--ink-mute); margin-top: 4px; line-height: 1.55; }

.review-grid {
  margin-top: 30px; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.review {
  padding: 24px; border-radius: 18px;
  background: linear-gradient(162deg, rgba(90,169,255,.085), rgba(11,32,80,.35) 46%, rgba(3,7,19,.5));
  border: 1px solid var(--line);
}
.review p { font-size: 15.5px; color: var(--ink); line-height: 1.62; }
.review footer { margin-top: 16px; display: flex; align-items: center; gap: 11px; }
.review .who b { display: block; font-size: 14.5px; font-weight: 600; }
.review .who span { display: block; font-size: 12.8px; color: var(--ink-mute); }
.review .stars { color: var(--warn-amber); font-size: 13px; letter-spacing: .1em; }
.review-source { margin-top: 20px; font-size: 13.5px; color: var(--ink-mute); }

/* ---------- quote builder ---------- */
.quote-wrap {
  margin-top: 40px;
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 980px) { .quote-wrap { grid-template-columns: 1.15fr .85fr; } }

.quote-card { padding: 0; overflow: hidden; }
.quote-progress { height: 3px; background: rgba(120,165,235,.16); }
.quote-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  transition: width .35s cubic-bezier(.16,1,.3,1);
}
.quote-step { padding: 30px 28px 28px; }
.quote-count { font-size: 13px; color: var(--ink-mute); }
.quote-q { font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin-top: 8px; }
.quote-hint { font-size: 14px; color: var(--ink-soft); margin-top: 9px; max-width: 54ch; }

.quote-opts { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 620px) { .quote-opts.two { grid-template-columns: 1fr 1fr; } }
.quote-opt {
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left; width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 13px; padding: 14px 16px;
  color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.quote-opt:hover { border-color: var(--blue-bright); background: rgba(8,111,243,.12); }
.quote-opt[aria-pressed="true"] { border-color: var(--blue); background: rgba(8,111,243,.2); }
.quote-opt b { font-weight: 600; display: block; }
.quote-opt span { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 3px; }

.quote-nav { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.quote-back {
  background: none; border: 0; color: var(--ink-mute);
  font: inherit; font-size: 14px; cursor: pointer; padding: 10px 2px;
}
.quote-back:hover { color: var(--ink); }

.quote-out { padding: 26px 24px; position: sticky; top: 92px; }
.quote-out h3 { font-size: 20px; }
.quote-pkg {
  font-family: var(--display); font-weight: 800; font-size: 30px;
  letter-spacing: -.03em; margin-top: 4px;
}
.quote-price {
  display: flex; align-items: baseline; gap: 10px; margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
.quote-price b { font-family: var(--display); font-size: 36px; font-weight: 800; letter-spacing: -.03em; }
.quote-price span { font-size: 14px; color: var(--ink-mute); }
.quote-year {
  margin-top: 12px; background: rgba(255,255,255,.06); border-radius: 11px;
  padding: 11px 14px; font-size: 14.5px; font-variant-numeric: tabular-nums;
}
.quote-year span { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.quote-why { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.quote-why li { display: flex; gap: 9px; font-size: 14px; color: var(--ink-soft); list-style: none; }
.quote-acts { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.quote-acts .btn { width: 100%; }
.quote-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.6; }

.quote-done { text-align: center; padding: 34px 26px; }
.quote-done .ring {
  display: inline-flex; width: 50px; height: 50px; border-radius: 999px;
  background: rgba(43,194,126,.16); color: var(--good);
  align-items: center; justify-content: center;
}

/* ---------- faq ---------- */
.faq { max-width: 780px; margin: 44px auto 0; border-radius: 18px; overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-weight: 600; font-size: 15.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255,255,255,.04); }
.faq .plus {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink-mute);
  transition: transform .3s;
}
.faq details[open] .plus { transform: rotate(45deg); }
.faq .answer { padding: 0 22px 20px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- cta ---------- */
.cta { padding: 44px 26px; text-align: center; position: relative; overflow: hidden; }
@media (min-width: 760px) { .cta { padding: 72px 40px; } }
.cta::before {
  content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,139,255,.55), transparent 68%);
  filter: blur(60px);
}
.cta > * { position: relative; }
.cta h2 { font-size: clamp(1.8rem, 4.6vw, 3rem); max-width: 18ch; margin-inline: auto; }
.cta .lede { margin: 18px auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 16px; margin-top: 44px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }

form.enquiry { padding: 26px; display: grid; gap: 16px; }
@media (min-width: 620px) { form.enquiry { grid-template-columns: 1fr 1fr; padding: 30px; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 500; }
.field label span { color: var(--ink-mute); font-weight: 400; font-size: 12px; }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .2s, background-color .2s;
}
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; background-color: #0c1a3c; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: rgba(111,178,255,.6); background: rgba(255,255,255,.07);
}
.field input::placeholder, .field textarea::placeholder { color: #5e7093; }

.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.form-note { font-size: 12.5px; color: var(--ink-mute); max-width: 42ch; }

.notice {
  grid-column: 1 / -1;
  border: 1px solid rgba(245,187,79,.32);
  background: rgba(245,187,79,.09);
  color: var(--warn-amber);
  border-radius: 12px;
  padding: 15px 17px;
  font-size: 13.5px;
  line-height: 1.6;
}

.side-card { padding: 24px; }
.side-card + .side-card { margin-top: 16px; }
.side-card h3 { font-size: 16px; font-weight: 600; }
.side-card dl { margin: 18px 0 0; display: flex; flex-direction: column; gap: 15px; }
.side-card dt { font-family: var(--label); font-size: 10px; letter-spacing: 0.060em; text-transform: uppercase; color: var(--ink-mute); }
.side-card dd { margin: 4px 0 0; font-size: 14.5px; }
.copyline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.copyline code {
  font-family: var(--mono); font-size: 13.5px; color: var(--blue-bright);
  background: rgba(47,139,255,.1); padding: 4px 9px; border-radius: 7px;
  user-select: all;
}
.copy-btn {
  font-family: var(--body); font-size: 12px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 999px; padding: 4px 11px;
}
.copy-btn:hover { background: rgba(255,255,255,.12); color: var(--ink); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); background: rgba(4,9,26,.6); margin-top: 60px; }
.foot-grid { display: grid; gap: 30px; padding-block: 48px 0; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1.1fr 1fr; } }
footer h4 { font-family: var(--label); font-size: 10px; letter-spacing: 0.060em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
footer ul { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
footer .nav-link { padding: 0; font-size: 14px; background: none; }
footer .nav-link:hover { background: none; color: var(--ink); text-decoration: underline; }
.foot-brand p { font-size: 14px; color: var(--ink-soft); margin-top: 13px; max-width: 34ch; }
.foot-cities { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 16px; }
.foot-bar {
  margin-top: 40px; border-top: 1px solid var(--line); padding-block: 22px 40px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-mute);
}

/* ---------- account ---------- */
.auth-wrap { display: flex; justify-content: center; margin-top: 40px; }
.auth-card { width: 100%; max-width: 450px; padding: 28px; }
@media (min-width: 560px) { .auth-card { padding: 34px; } }

.oauth-row { display: flex; flex-direction: column; gap: 10px; }

.btn-google {
  width: 100%; background: #fff; color: #10151f; border-color: transparent;
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.8);
}
.btn-google:hover { background: #eef2f8; color: #10151f; }

/* Apple's own guidance: black button, white mark, matched in size to the
   other provider so neither looks like the lesser option. */
.btn-apple {
  width: 100%; background: #000; color: #fff;
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.9);
}
.btn-apple:hover { background: #15161a; color: #fff; border-color: rgba(255,255,255,.45); }

.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.auth-divider i { flex: 1; height: 1px; background: var(--line); }
.auth-divider span {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute);
}

.auth-fields { display: flex; flex-direction: column; gap: 15px; }
.auth-fields .btn { width: 100%; margin-top: 4px; }
.auth-switch { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
.auth-switch button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--blue-bright); text-decoration: underline;
}
.auth-legal { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--ink-mute); line-height: 1.6; }
.auth-steps { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
.auth-steps p { font-family: var(--label); font-size: 10px; letter-spacing: 0.060em; text-transform: uppercase; color: var(--ink-mute); }
.auth-steps ol { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; counter-reset: s; }
.auth-steps li {
  display: flex; gap: 11px; font-size: 13.5px; color: var(--ink-soft); counter-increment: s;
}
.auth-steps li::before {
  content: counter(s); flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 999px; margin-top: 1px;
  background: rgba(47,139,255,.16); color: var(--blue-bright);
  font-family: var(--mono); font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- my account ---------- */
.demo-flag {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid rgba(245,187,79,.3); background: rgba(245,187,79,.07);
  border-radius: 14px; padding: 14px 16px; margin-top: 26px;
  font-size: 13px; line-height: 1.6; color: var(--warn-amber);
}

.acct-alert {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid rgba(111,178,255,.4); background: rgba(47,139,255,.1);
  border-radius: 16px; padding: 18px 20px; margin-top: 16px;
}
.acct-alert h3 { font-size: 16px; font-weight: 600; }
.acct-alert p { font-size: 13.8px; color: var(--ink-soft); margin-top: 6px; line-height: 1.6; }
.acct-alert .ring {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px;
  background: rgba(47,139,255,.2); color: var(--blue-bright);
  display: flex; align-items: center; justify-content: center;
}

.acct-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 940px) { .acct-grid { grid-template-columns: 1.55fr 1fr; align-items: start; } }
.acct-col { display: grid; gap: 16px; min-width: 0; }
.acct-card { padding: 22px; min-width: 0; }
.acct-card h3 { font-size: 16px; font-weight: 600; }
.acct-card .sub { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; }

.acct-kv { display: grid; gap: 13px; margin-top: 18px; }
.acct-kv > div { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; }
.acct-kv dt { font-family: var(--label); font-size: 10px; letter-spacing: 0.060em; text-transform: uppercase; color: var(--ink-mute); }
.acct-kv dd { margin: 0; font-size: 14.2px; font-variant-numeric: tabular-nums; }

.state {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 4px 11px;
  border: 1px solid transparent; white-space: nowrap;
}
.state-good { background: rgba(47,191,113,.16); color: #6fe0a4; border-color: rgba(47,191,113,.3); }
.state-due  { background: rgba(245,187,79,.14); color: var(--warn-amber); border-color: rgba(245,187,79,.3); }
.state-live { background: rgba(47,139,255,.16); color: var(--blue-bright); border-color: rgba(47,139,255,.32); }

.inv-list { margin-top: 16px; display: flex; flex-direction: column; }
.inv-row {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.inv-row:first-child { border-top: 0; }
.inv-row b { font-size: 14.2px; font-weight: 600; }
.inv-row .meta { font-size: 12.3px; color: var(--ink-mute); margin-top: 3px; }
.inv-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.inv-amount { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-actions { display: flex; gap: 7px; margin-top: 10px; width: 100%; }
.inv-actions button {
  font-family: var(--body); font-size: 12.3px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 13px;
}
.inv-actions button:hover { background: rgba(255,255,255,.12); color: var(--ink); }

.mailed {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11.8px; color: var(--ink-mute);
}
.mailed svg { color: var(--good); flex-shrink: 0; }

.notif { display: flex; flex-direction: column; margin-top: 14px; }
.notif li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.notif li:first-child { border-top: 0; }
.notif .dotmark { flex-shrink: 0; width: 7px; height: 7px; border-radius: 999px; margin-top: 7px; background: var(--ink-mute); }
.notif li.unread .dotmark { background: var(--blue); box-shadow: 0 0 0 3px rgba(47,139,255,.2); }
.notif p { font-size: 13.6px; line-height: 1.55; }
.notif .when { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; }

.covers-mini { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.covers-mini li {
  font-size: 12.2px; background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px; color: var(--ink-soft);
}

/* ---------- admin dashboard ---------- */
.kpi-row {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.kpi { padding: 17px 18px; min-width: 0; }
.kpi dt {
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute);
}
.kpi dd {
  margin: 9px 0 0; font-family: var(--display); font-size: 27px; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kpi .kpi-sub { display: block; font-family: var(--body); font-size: 11.5px; font-weight: 400; color: var(--ink-mute); margin-top: 4px; letter-spacing: 0; }
.kpi.flag { border-color: rgba(245,187,79,.4); background: rgba(245,187,79,.06); }

.admin-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1000px) { .admin-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.chart-card { padding: 22px; min-width: 0; }
.chart-card h3 { font-size: 16px; font-weight: 600; }
.chart-card .sub { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; }
.chart-wrap { margin-top: 18px; width: 100%; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.bar { fill: #2f8bff; transition: fill .2s; }
.bar-hit:hover .bar { fill: #6fb2ff; }
.grid-line { stroke: rgba(154,183,232,.14); stroke-width: 1; }
.axis-text { fill: #7589a9; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.bar-label { fill: #f2f6fd; font-family: var(--body); font-size: 11.5px; font-weight: 600; text-anchor: middle; }

.adm-table { width: 100%; border-collapse: collapse; margin-top: 14px; min-width: 520px; }
.adm-scroll { overflow-x: auto; }
.adm-table th {
  text-align: left; padding: 0 12px 10px 0;
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
}
.adm-table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); font-size: 13.8px; vertical-align: middle; }
.adm-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-right: 0; }
.adm-table th.num { text-align: right; padding-right: 0; }
.adm-biz { font-weight: 600; }
.adm-biz span { display: block; font-weight: 400; font-size: 11.8px; color: var(--ink-mute); margin-top: 2px; }
.adm-act {
  font-family: var(--body); font-size: 12px; cursor: pointer; white-space: nowrap;
  background: rgba(47,139,255,.14); border: 1px solid rgba(111,178,255,.3); color: var(--blue-bright);
  border-radius: 999px; padding: 5px 12px;
}
.adm-act:hover { background: rgba(47,139,255,.26); color: #fff; }

.renew-list li { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.renew-list li:first-child { border-top: 0; }
.renew-list b { font-size: 13.8px; font-weight: 600; }
.renew-list .when { display: block; font-size: 11.8px; color: var(--ink-mute); margin-top: 2px; }

.activity li { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.3px; color: var(--ink-soft); }
.activity li:first-child { border-top: 0; }
.activity .tick-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; margin-top: 7px; background: var(--blue); }
.activity .when { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }

/* ---------- social ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.socials a {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); background: rgba(255,255,255,.05);
  border-radius: 999px; padding: 8px 15px 8px 12px;
  font-size: 13px; color: var(--ink-soft); text-decoration: none;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s;
}
.socials a:hover {
  background: rgba(47,139,255,.16); border-color: rgba(111,178,255,.45);
  color: var(--ink); transform: translateY(-2px);
}
.socials svg { flex-shrink: 0; }

/* ---------- legal ---------- */
.legal-layout { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 900px) { .legal-layout { grid-template-columns: 240px 1fr; align-items: start; } }

.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) {
  .legal-nav { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 92px; }
}
.legal-nav button {
  font-family: var(--body); font-size: 13.8px; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--ink-mute);
  border-radius: 11px; padding: 10px 13px; width: auto;
}
@media (min-width: 900px) { .legal-nav button { width: 100%; } }
.legal-nav button:hover { background: rgba(255,255,255,.055); color: var(--ink); }
.legal-nav button[aria-current="true"] { background: rgba(47,139,255,.16); color: var(--ink); font-weight: 600; }

.legal-doc { min-width: 0; }
.legal-doc h3 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
.legal-updated { font-family: var(--label); font-size: 11px; letter-spacing: 0.060em; text-transform: uppercase; color: var(--ink-mute); margin-top: 10px; }
.legal-section { margin-top: 30px; }
.legal-section h4 { font-size: 17px; font-weight: 600; }
.legal-section p { font-size: 14.6px; line-height: 1.72; color: var(--ink-soft); margin-top: 10px; max-width: 70ch; }
.ph {
  display: inline-block; margin: 0 2px;
  font-family: var(--mono); font-size: .86em;
  color: var(--warn-amber); background: rgba(245,187,79,.12);
  border: 1px solid rgba(245,187,79,.36); border-radius: 5px; padding: 1px 6px;
}

/* ---------- assistant ---------- */
/* Two round buttons stacked in the corner. */
#fab-stack {
  position: fixed; z-index: 60;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column-reverse; gap: 12px; align-items: center;
}

.fab {
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; padding: 0;
  text-decoration: none; position: relative;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, filter .3s;
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab svg { width: 26px; height: 26px; }

.fab-chat {
  background: linear-gradient(145deg, #3f97ff, #0d4ea8);
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(47,139,255,.75), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.fab-chat:hover { box-shadow: 0 20px 44px -12px rgba(47,139,255,.95), 0 0 0 1px rgba(255,255,255,.16) inset; }

.fab-wa {
  background: #25d366; color: #063;
  box-shadow: 0 14px 34px -10px rgba(37,211,102,.6), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.fab-wa svg { color: #04301a; }
.fab-wa:hover { box-shadow: 0 20px 44px -12px rgba(37,211,102,.85); }

/* Name on hover, so an icon-only button is never a guess. */
.fab::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 11px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(7,15,38,.96); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--body); font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.fab:hover::after, .fab:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 560px) { .fab::after { display: none; } }

@media (prefers-reduced-motion: reduce) { .fab:hover { transform: none; } }

#fab-note {
  max-width: 230px; margin-bottom: 4px;
  background: rgba(7,15,38,.97); border: 1px solid rgba(245,187,79,.4);
  color: var(--warn-amber); border-radius: 14px; padding: 11px 14px;
  font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.9);
  animation: popIn .4s cubic-bezier(.22,.9,.3,1.3) both;
}

#chat-panel {
  position: fixed; z-index: 61;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(392px, calc(100vw - 36px));
  max-height: min(620px, calc(100dvh - 120px));
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  background: rgba(7, 15, 38, .97);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: panelIn .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  #chat-panel {
    right: 10px; left: 10px; width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 90px);
  }
}

.chat-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 17px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(140deg, rgba(47,139,255,.16), transparent);
}
.chat-head h3 { font-size: 15.5px; font-weight: 600; }
.chat-head p { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; font-family: var(--mono); letter-spacing: .03em; }
#chat-close {
  background: none; border: 0; cursor: pointer; color: var(--ink-mute);
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#chat-close:hover { background: rgba(255,255,255,.1); color: var(--ink); }

#chat-log {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: #1d3365 transparent;
}
#chat-log::-webkit-scrollbar { width: 7px; }
#chat-log::-webkit-scrollbar-thumb { background: #1d3365; border-radius: 9px; }

.msg { max-width: 86%; padding: 11px 14px; border-radius: 15px; font-size: 14.2px; line-height: 1.58; }
.msg.bot { align-self: flex-start; background: rgba(255,255,255,.07); border-bottom-left-radius: 5px; color: var(--ink); }
.msg.me  { align-self: flex-end; background: rgba(47,139,255,.26); border-bottom-right-radius: 5px; }
.msg strong { font-weight: 600; }
.msg.err { background: rgba(245,187,79,.1); border: 1px solid rgba(245,187,79,.3); color: var(--warn-amber); }

.chat-suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 14px; }
.chat-suggest button {
  font-family: var(--body); font-size: 12.5px; cursor: pointer;
  background: rgba(255,255,255,.055); border: 1px solid var(--line);
  color: var(--ink-soft); border-radius: 999px; padding: 7px 13px;
}
.chat-suggest button:hover { background: rgba(47,139,255,.18); color: var(--ink); border-color: rgba(111,178,255,.4); }

.chat-foot { border-top: 1px solid var(--line); padding: 13px 14px 14px; }
.chat-row { display: flex; gap: 9px; align-items: flex-end; }
#chat-input {
  flex: 1; min-width: 0; resize: none; max-height: 110px;
  font-family: var(--body); font-size: 14.5px; color: var(--ink); line-height: 1.5;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 13px; padding: 11px 13px;
}
#chat-input:focus { outline: none; border-color: rgba(111,178,255,.6); background: rgba(255,255,255,.08); }
#chat-input::placeholder { color: #5e7093; }
#chat-send {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
}
#chat-send:hover { background: var(--blue-bright); color: #04091a; }
#chat-send:disabled { opacity: .45; cursor: default; }
.chat-disclaimer { margin-top: 9px; font-size: 10.5px; color: var(--ink-mute); line-height: 1.5; }

.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-mute); animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- reveal on scroll ----------
   The .reveal class is added by JavaScript, never in the markup. With no JS,
   a failed script or reduced motion, every element stays plainly visible
   instead of being stuck invisible waiting for an observer that never runs. */
.reveal { opacity: 0; will-change: opacity, transform; }

/* A keyframe pop, not a fade: it overshoots slightly past full size and
   settles back, which is what actually reads as "popping in". */
.reveal.in {
  animation: popIn .58s cubic-bezier(.22,.9,.3,1.3) both;
}

@keyframes popIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.9); }
  55%  { opacity: 1; transform: translateY(-5px) scale(1.022); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; }
  .reveal.in { animation: none !important; }
}

/* ---------- page switching ---------- */
.page { animation: rise .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- logo splash ---------- */
#intro {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; align-content: center; gap: 46px;
  background: radial-gradient(120% 100% at 50% 42%, #0c1a3c 0%, #04091a 72%);
  perspective: 1400px;
  cursor: pointer;
}

/* Two phases. While the page loads the logo breathes in and out and the bar
   fills; only when it is genuinely ready does `.go` drive the logo past the
   viewer, so the animation ends when the site is actually usable. */
#intro .stage { transform-style: preserve-3d; display: grid; place-items: center; }
#intro.go { animation: introOut .45s ease .75s forwards; }
#intro.go .stage { animation: push 1.15s cubic-bezier(.5,0,.75,0) forwards; }
#intro.go .splash-logo { animation: none; }
#intro.go .splash-glow { animation: none; opacity: .9; }
#intro.go .loader { opacity: 0; transition: opacity .3s ease; }

/* The site lifts in as the overlay clears, so landing on the page is the end
   of the same move rather than a cut. Opacity only — a transform on #shell
   would re-anchor the fixed chat button to it. */
body.intro-going #shell { animation: arrive .8s ease .45s both; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }

.splash { position: relative; display: grid; place-items: center; }

/* A glow behind the mark, pulsing against the zoom so the logo looks lit
   rather than simply resized. */
.splash-glow {
  position: absolute;
  width: min(74vw, 560px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,139,255,.42) 0%, rgba(47,139,255,.12) 42%, transparent 68%);
  animation: splashGlow 3.4s ease-in-out infinite;
  pointer-events: none;
}

.splash-logo {
  position: relative;
  width: min(62vw, 420px); height: auto; display: block;
  animation: splashZoom 3.4s ease-in-out infinite;
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.55));
}

@keyframes splashZoom {
  0%, 100% { transform: scale(.9); }
  50%      { transform: scale(1.08); }
}
@keyframes splashGlow {
  0%, 100% { opacity: .45; transform: scale(.86); }
  50%      { opacity: .95; transform: scale(1.12); }
}

.loader { width: min(280px, 62vw); }
.loader-bar {
  height: 3px; border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.12);
}
.loader-bar i {
  display: block; height: 100%; width: 0; border-radius: 9px;
  background: linear-gradient(90deg, #2f8bff, #9fd0ff);
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
.loader-text {
  margin-top: 13px; text-align: center;
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.060em;
  text-transform: uppercase; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

#skip {
  position: absolute; right: 18px; bottom: 18px;
  font-family: var(--body); font-size: 13px; color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 7px 17px; cursor: pointer;
}
#skip:hover { color: #fff; background: rgba(255,255,255,.14); }

/* The exit: the logo accelerates straight at the viewer and through them. */
@keyframes push {
  0%,  30% { transform: translateZ(0) scale(1); opacity: 1; }
  78%      { opacity: 1; }
  100%     { transform: translateZ(1200px) scale(7); opacity: 0; }
}
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

@media (max-width: 760px) {
  #intro { perspective: 900px; gap: 38px; }
  #intro.go { animation-delay: .55s; animation-duration: .4s; }
  #intro.go .stage { animation-duration: .9s; }
  body.intro-going #shell { animation-delay: .3s; animation-duration: .6s; }
  .splash-logo { width: min(76vw, 320px); }
  .splash-glow { width: min(92vw, 400px); }
}

/* Someone who asked for less motion gets the logo held still. */
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-glow { animation: none; }
}

/* ==========================================================================
   Admin workspace (adm2)
   --------------------------------------------------------------------------
   The marketing site is dark on purpose — it is a shop window. The admin is
   something Emil stares at while working, and a reporting screen reads better
   on paper than on ink: numbers stop glowing, status colours stop fighting the
   background, and the invoice (which is already white) stops being a shock.
   So this one page paints its own light surface, and every rule below is
   scoped under .adm2 so none of it leaks into the rest of the site.

   The layout borrows its shapes from the reference Emil sent — pill tabs, a
   loose stat row rather than boxed tiles, very round soft cards, segmented
   toggles, filter chips, progress rings — but none of its artwork: that is a
   commercial template. Colours, type and content are CYWEB's own.
   ========================================================================== */

.adm2 {
  --pad: #fffdfb;              /* card */
  --pad-sunk: #faf4ee;         /* inset / inputs */
  --pad-line: #ebe0d6;         /* hairline */
  --pad-line-soft: #f2e9e1;
  --dark: #082253;             /* brand navy — the "black pill" */
  --accent: #086ff3;           /* brand blue — series 1 */
  --accent-2: #d4572a;         /* warm orange — series 2 (validated pair) */
  --pos: #1f8f5f;              /* good / up */
  --neg: #c0452a;
  --hold: #b4761a;
  /* The ink scale lives on .inv-doc, which this page is not inside. Without
     these the muted colours fall back to the dark theme's near-white and
     vanish on cream — which is exactly what happened the first time. */
  --ink-900: #0b1222;
  --ink-600: #44506b;
  --ink-400: #7b869b;             /* waiting on someone */
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(240,186,150,.34), transparent 62%),
    radial-gradient(760px 520px at 4% 2%, rgba(170,198,245,.26), transparent 64%),
    linear-gradient(176deg, #fdf7f1 0%, #f8efe6 46%, #f6ece2 100%);
  color: var(--ink-900);
}

.adm2-shell { max-width: 1180px; margin: 0 auto; padding: 52px 20px 90px; }

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

.adm2-top {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 22px 26px;
}
.adm2-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--label); font-size: 13px; font-weight: 600;
  color: var(--accent); margin: 0 0 12px;
}
.adm2-kicker::before {
  content: ""; width: 24px; height: 2px; border-radius: 2px;
  background: var(--accent); flex-shrink: 0;
}
.adm2-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 6.4vw, 3.9rem); line-height: 1.02;
  letter-spacing: -.022em; color: var(--dark); margin: 0;
}
.adm2-title span { display: block; color: var(--ink-400); }
.adm2-top-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- controls ---------- */

.adm2-search {
  position: relative; display: flex; align-items: center;
}
.adm2-search svg {
  position: absolute; left: 14px; width: 16px; height: 16px;
  color: var(--ink-400); pointer-events: none;
}
.adm2-search input {
  font: inherit; font-size: 14px; color: var(--ink-900);
  background: var(--pad); border: 1px solid var(--pad-line);
  border-radius: 999px; padding: 11px 16px 11px 38px; width: 216px;
  transition: border-color .15s, box-shadow .15s;
}
.adm2-search input::placeholder { color: var(--ink-400); }
.adm2-search input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8,111,243,.16);
}

.adm2-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 11px 19px;
  background: var(--pad); color: var(--ink-900);
  border: 1px solid var(--pad-line);
  transition: background .15s, border-color .15s, transform .12s;
}
.adm2-btn:hover { background: #fff; border-color: var(--ink-400); text-decoration: none; }
.adm2-btn:active { transform: translateY(1px); }
.adm2-btn-dark {
  background: var(--dark); color: #fff; border-color: var(--dark);
  box-shadow: 0 8px 20px -10px rgba(8,34,83,.6);
}
.adm2-btn-dark:hover { background: #0a2c68; border-color: #0a2c68; }
.adm2-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- tab pills ---------- */

.adm2-tabs {
  display: flex; gap: 7px; margin: 30px 0 0;
  padding: 6px; background: rgba(255,253,251,.72);
  border: 1px solid var(--pad-line-soft); border-radius: 999px;
  width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.adm2-tabs::-webkit-scrollbar { display: none; }
.adm2-tab {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; border: 0; background: transparent;
  color: var(--ink-600); border-radius: 999px; padding: 10px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .16s, color .16s;
}
.adm2-tab:hover { color: var(--ink-900); background: rgba(8,34,83,.055); }
.adm2-tab.is-on {
  background: var(--dark); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(8,34,83,.65);
}
.adm2-tab .adm2-tab-n {
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(8,34,83,.08); color: var(--ink-600);
}
.adm2-tab.is-on .adm2-tab-n { background: rgba(255,255,255,.2); color: #fff; }

.adm2-pane { margin-top: 30px; }
.adm2-pane[hidden] { display: none; }

/* ---------- loose stat row (no boxes, on purpose) ---------- */

.adm2-stats {
  display: grid; gap: 26px 20px; margin: 4px 0 34px;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
}
.adm2-stat { margin: 0; min-width: 0; }
.adm2-stat b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 4.3vw, 2.3rem); line-height: 1.05;
  letter-spacing: -.02em; color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.adm2-stat > span {
  display: block; margin-top: 7px; font-size: 13px;
  line-height: 1.45; color: var(--ink-400);
}
.adm2-stat.neg b { color: var(--neg); }

.adm2-delta {
  display: flex; width: max-content; align-items: center; gap: 4px; margin-top: 9px;
  font-size: 12px; font-weight: 600; padding: 3px 9px 3px 7px;
  border-radius: 999px; background: rgba(31,143,95,.12); color: var(--pos);
}
.adm2-delta.down { background: rgba(192,69,42,.12); color: var(--neg); }
.adm2-delta svg { width: 12px; height: 12px; }

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

.adm2-card {
  background: var(--pad); border: 1px solid var(--pad-line-soft);
  border-radius: 26px; padding: 24px 24px 22px;
  box-shadow: 0 1px 2px rgba(60,38,20,.04), 0 18px 40px -28px rgba(60,38,20,.3);
}
.adm2-card + .adm2-card { margin-top: 20px; }
.adm2-card-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px 18px; margin-bottom: 18px;
}
.adm2-card h3 {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -.012em; color: var(--dark); margin: 0;
}
.adm2-card .adm2-sub {
  margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-400);
}

.adm2-two { display: grid; gap: 20px; }
@media (min-width: 940px) { .adm2-two { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- segmented toggle ---------- */

.adm2-seg {
  display: inline-flex; gap: 3px; padding: 3px; flex-shrink: 0;
  background: var(--pad-sunk); border: 1px solid var(--pad-line-soft);
  border-radius: 999px;
}
.adm2-seg button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-400);
  border-radius: 999px; padding: 6px 13px; transition: background .15s, color .15s;
}
.adm2-seg button:hover { color: var(--ink-900); }
.adm2-seg button.is-on {
  background: var(--pad); color: var(--dark);
  box-shadow: 0 1px 3px rgba(60,38,20,.14);
}

/* ---------- filter chips ---------- */

.adm2-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px;
}
.adm2-chip {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  border-radius: 999px; padding: 8px 14px;
  background: rgba(255,253,251,.7); color: var(--ink-600);
  border: 1px solid var(--pad-line); display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, color .15s, border-color .15s;
}
.adm2-chip:hover { background: #fff; color: var(--ink-900); }
.adm2-chip.is-on {
  background: var(--dark); color: #fff; border-color: var(--dark); font-weight: 600;
}
.adm2-chip i {
  width: 7px; height: 7px; border-radius: 999px; background: currentColor;
  opacity: .55; flex-shrink: 0;
}
.adm2-chip.is-on i { opacity: 1; }
.adm2-chip em {
  font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: .55; margin-left: 1px;
}

/* ---------- status pill ---------- */

.adm2-st {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; padding: 5px 11px 5px 9px;
  border-radius: 999px; background: var(--pad-sunk); color: var(--ink-600);
  border: 1px solid var(--pad-line-soft);
}
.adm2-st::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: currentColor; flex-shrink: 0;
}
.adm2-st.t-go   { color: var(--pos);    background: rgba(31,143,95,.1);  border-color: rgba(31,143,95,.22); }
.adm2-st.t-hold { color: var(--hold);   background: rgba(180,118,26,.11); border-color: rgba(180,118,26,.24); }
.adm2-st.t-work { color: var(--accent); background: rgba(8,111,243,.1);  border-color: rgba(8,111,243,.22); }
.adm2-st.t-late { color: var(--neg);    background: rgba(192,69,42,.1);  border-color: rgba(192,69,42,.22); }

/* ---------- project cards with a progress ring ---------- */

.adm2-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .adm2-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .adm2-grid { grid-template-columns: 1fr 1fr 1fr; } }

.adm2-proj {
  background: var(--pad); border: 1px solid var(--pad-line-soft);
  border-radius: 24px; padding: 20px;
  box-shadow: 0 1px 2px rgba(60,38,20,.04), 0 16px 34px -26px rgba(60,38,20,.3);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .16s, box-shadow .16s;
}
.adm2-proj:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(60,38,20,.05), 0 22px 42px -24px rgba(60,38,20,.36);
}
.adm2-proj-top { display: flex; align-items: center; gap: 15px; }
.adm2-proj > .adm2-st { align-self: flex-start; }
.adm2-proj-id { min-width: 0; flex: 1; }
.adm2-proj-id b {
  display: block; font-size: 15.5px; font-weight: 600; color: var(--dark);
  line-height: 1.3; overflow-wrap: anywhere;
}
.adm2-proj-id span {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400);
}

.adm2-ring { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.adm2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.adm2-ring .trk { stroke: var(--pad-sunk); }
.adm2-ring .arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.adm2-ring.done .arc { stroke: var(--pos); }
.adm2-ring b {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700;
  color: var(--dark); font-variant-numeric: tabular-nums;
}

.adm2-proj-step {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-600);
  padding: 11px 13px; background: var(--pad-sunk); border-radius: 14px;
}
.adm2-proj-step b { color: var(--dark); font-weight: 600; }
.adm2-proj-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: auto;
}
.adm2-money {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--dark); font-variant-numeric: tabular-nums;
}
.adm2-money span { font-family: var(--body); font-size: 12px; font-weight: 500; color: var(--ink-400); }
.adm2-acts { display: flex; gap: 7px; }
.adm2-act {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border-radius: 999px; padding: 7px 13px; background: var(--pad-sunk);
  color: var(--ink-600); border: 1px solid var(--pad-line-soft);
  transition: background .15s, color .15s, border-color .15s;
}
.adm2-act:hover { background: var(--dark); color: #fff; border-color: var(--dark); }

/* ---------- light table ---------- */

.adm2-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.adm2-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.adm2-table th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-400);
  padding: 0 14px 11px; border-bottom: 1px solid var(--pad-line);
}
.adm2-table th.num, .adm2-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm2-table td {
  padding: 14px; font-size: 14px; color: var(--ink-600);
  border-bottom: 1px solid var(--pad-line-soft); vertical-align: middle;
}
.adm2-table tbody tr:last-child td { border-bottom: 0; }
.adm2-table tbody tr { transition: background .14s; }
.adm2-table tbody tr:hover { background: var(--pad-sunk); }
.adm2-who b { display: block; font-size: 14.5px; font-weight: 600; color: var(--dark); }
.adm2-who span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }
.adm2-total { font-family: var(--display); font-weight: 700; font-size: 15.5px; color: var(--dark); }

.adm2-empty {
  padding: 30px 8px; text-align: center; font-size: 13.5px;
  line-height: 1.6; color: var(--ink-400);
}
.adm2-add {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  margin-top: 16px; border-radius: 999px; padding: 10px 17px;
  background: transparent; color: var(--accent);
  border: 1px dashed var(--pad-line); transition: background .15s, border-color .15s;
}
.adm2-add:hover { background: rgba(8,111,243,.07); border-color: var(--accent); }

/* ---------- plain lists (renewals, activity, quotes) ---------- */

.adm2-list { list-style: none; margin: 0; padding: 0; }
.adm2-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 0; border-top: 1px solid var(--pad-line-soft);
}
.adm2-list li:first-child { border-top: 0; padding-top: 0; }
.adm2-list b { font-size: 14.5px; font-weight: 600; color: var(--dark); }
.adm2-list .when { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }

.adm2-feed { list-style: none; margin: 0; padding: 0; }
.adm2-feed li {
  display: flex; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--pad-line-soft);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-600);
}
.adm2-feed li:first-child { border-top: 0; padding-top: 0; }
.adm2-feed i {
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
  flex-shrink: 0; margin-top: 6px;
}
.adm2-feed .when { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-400); }

.adm2-quote { align-items: flex-start; }
.adm2-quote ul {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.adm2-quote ul li {
  display: block; border: 0; padding: 3px 9px; font-size: 12px;
  color: var(--ink-600); background: var(--pad-sunk); border-radius: 999px;
}
.adm2-quote-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

/* ---------- revenue chart ---------- */

.adm2-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 6px;
  font-size: 13px; color: var(--ink-600);
}
.adm2-legend span { display: inline-flex; align-items: center; gap: 8px; }
.adm2-legend i { width: 20px; height: 3px; border-radius: 2px; flex-shrink: 0; }

.adm2-plot { position: relative; overflow: hidden; }
.adm2-plot svg { display: block; width: 100%; height: auto; }
.adm2-plot .g-line { stroke: var(--pad-line); stroke-width: 1; }
.adm2-plot .g-zero { stroke: var(--pad-line); stroke-width: 1.5; }
.adm2-plot .ax {
  font-family: var(--body); font-size: 11px; fill: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.adm2-plot .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adm2-plot .dot { stroke: var(--pad); stroke-width: 2; }
.adm2-plot .cross { stroke: var(--ink-400); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.adm2-plot .end-lab {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.adm2-tip {
  position: absolute; pointer-events: none; opacity: 0; z-index: 3;
  transform: translate(-50%, -112%); transition: opacity .12s;
  background: var(--dark); color: #fff; border-radius: 12px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(8,34,83,.65);
}
.adm2-tip.on { opacity: 1; }
.adm2-tip b { display: block; font-size: 12px; font-weight: 600; opacity: .72; margin-bottom: 4px; }
.adm2-tip u {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.adm2-tip u i { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }

/* ---------- the two inherited dark blocks, repainted ---------- */

.adm2 .demo-flag {
  background: rgba(180,118,26,.09); border-color: rgba(180,118,26,.26);
  color: var(--ink-600); border-radius: 18px;
}
.adm2 .demo-flag strong, .adm2 .demo-flag code { color: var(--ink-900); }
.adm2 .demo-flag code { background: rgba(8,34,83,.07); }
.adm2 .demo-flag svg { color: var(--hold); }

.adm2-lock {
  background: var(--pad); border: 1px solid var(--pad-line-soft);
  border-radius: 26px; margin-top: 30px; text-align: center; padding: 40px 24px;
  box-shadow: 0 1px 2px rgba(60,38,20,.04), 0 18px 40px -28px rgba(60,38,20,.3);
}
.adm2-lock h3 { margin-top: 16px; font-size: 18px; font-weight: 600; color: var(--dark); }
.adm2-lock p { margin: 10px auto 0; max-width: 46ch; font-size: 14px; line-height: 1.65; color: var(--ink-600); }
.adm2-lock .ico {
  display: inline-flex; width: 48px; height: 48px; border-radius: 999px;
  background: rgba(180,118,26,.12); color: var(--hold);
  align-items: center; justify-content: center;
}

@media (max-width: 700px) {
  .adm2-shell { padding: 36px 16px 72px; }
  .adm2-top { align-items: stretch; }
  .adm2-top-side { width: 100%; }
  .adm2-search { flex: 1; }
  .adm2-search input { width: 100%; }
  .adm2-card { padding: 20px 17px 18px; border-radius: 22px; }
  .adm2-stats { gap: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .adm2-proj:hover { transform: none; }
  .adm2-ring .arc { transition: none; }
}

/* ---------- the invoice as a slide-over panel ----------
   An invoice is a document you read top to bottom and then act on, so it gets
   the full height of the window down one side rather than a box floating in
   the middle. The status, who it is for and what it comes to sit pinned under
   the title, so they stay on screen while you scroll the document. */

.adm-modal.as-panel {
  align-items: stretch; justify-content: flex-end;
  padding: 0; overflow: hidden;
}
.adm-sheet.panel {
  max-width: 620px; margin: 0; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 26px 0 0 26px; border-right: 0;
  /* Light, like the admin around it — a dark chrome around a white document
     looks like a lightbox, not a workspace. */
  --ink-900: #0b1222; --ink-600: #44506b; --ink-400: #7b869b;
  --pad-line: #ebe0d6; --pad-line-soft: #f2e9e1; --pad-sunk: #faf4ee;
  --dark: #082253; --pos: #1f8f5f; --hold: #b4761a; --neg: #c0452a;
  background: #fffdfb; border-color: var(--pad-line-soft);
  color: var(--ink-900);
  box-shadow: -30px 0 70px -30px rgba(60, 38, 20, .4);
}
.adm-sheet.panel .adm-sheet-head {
  padding: 20px 24px 14px; border-bottom: 0; flex-shrink: 0;
}
.adm-sheet.panel .adm-sheet-head h3 {
  font-family: var(--display); font-size: 21px; font-weight: 700;
  letter-spacing: -.012em; color: var(--dark);
}
.adm-sheet.panel .adm-x { color: var(--ink-400); }
.adm-sheet.panel .adm-x:hover { color: var(--ink-900); }

.adm-sheet-sub {
  padding: 0 24px 16px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 10px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--pad-line-soft);
}
.adm-sheet-sub[hidden] { display: none; }
.adm-sheet-sub .who { font-size: 14px; font-weight: 600; color: var(--ink-600); }
.adm-sheet-sub .amt {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--dark); font-variant-numeric: tabular-nums; margin-left: auto;
}

.adm-sheet.panel .adm-sheet-body {
  flex: 1; overflow-y: auto; padding: 20px 24px 28px;
  background: #fffdfb;
}
.adm-sheet.panel .adm-sheet-foot {
  flex-shrink: 0; justify-content: flex-start;
  padding: 14px 24px; background: #fffdfb;
  border-top: 1px solid var(--pad-line-soft);
}
.adm-sheet.panel .adm-sheet-foot .btn {
  border-radius: 999px; font-weight: 600; font-size: 13.5px; padding: 10px 17px;
}
.adm-sheet.panel .adm-sheet-foot .btn-primary {
  background: var(--dark); border-color: var(--dark); color: #fff;
}
.adm-sheet.panel .adm-sheet-foot .btn-primary:hover { background: #0a2c68; }
.adm-sheet.panel .adm-sheet-foot .btn-ghost {
  background: #fffdfb; border: 1px solid var(--pad-line); color: var(--ink-900);
}
.adm-sheet.panel .adm-sheet-foot .btn-ghost:hover { border-color: var(--ink-400); }
.adm-sheet.panel .adm-sheet-foot .adm-close { margin-left: auto; }

/* The document inside the panel sits on warm paper, set into the white panel
   the way the reference does it. The PDF stays pure white — that one gets
   printed, and this one does not. */
.adm-sheet.panel .inv-doc {
  background: #faf7f2; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(60, 38, 20, .05), 0 14px 34px -26px rgba(60, 38, 20, .4);
}

/* The sending controls, repainted for the light panel. */
.adm-sheet.panel .inv-send { border-top: 1px solid var(--pad-line-soft); }
.adm-sheet.panel .inv-send-title { color: var(--dark); }
.adm-sheet.panel .inv-send-note { color: var(--ink-400); }
.adm-sheet.panel .inv-send-note b { color: var(--ink-600); }
.adm-sheet.panel .inv-send .btn-primary {
  background: var(--accent, #086ff3); border-color: var(--accent, #086ff3); color: #fff;
}
.adm-sheet.panel .inv-send .btn-ghost {
  background: #fffdfb; border: 1px solid var(--pad-line); color: var(--ink-900);
}
.adm-sheet.panel .inv-send .btn-ghost:hover { border-color: var(--ink-400); }
.adm-sheet.panel .inv-send-done {
  color: var(--pos); background: rgba(31, 143, 95, .1); border-radius: 12px;
}
.adm-sheet.panel .inv-todo {
  background: rgba(180, 118, 26, .09); border-color: rgba(180, 118, 26, .26);
  color: var(--ink-600); border-radius: 14px;
}
.adm-sheet.panel .inv-todo b { color: var(--ink-900); }


/* ---------- the customer's side of the same workspace ----------
   My Account is the admin's layout with the controls taken away: the same
   paper, the same pill tabs, the same loose numbers. A customer who has seen
   one invoice from CYWEB should recognise the other screens on sight. */

.acct-alert2 {
  display: flex; gap: 15px; align-items: flex-start; margin-top: 4px;
  background: linear-gradient(180deg, rgba(8,111,243,.13), rgba(8,111,243,.05));
  border: 1px solid rgba(8,111,243,.3); border-radius: 22px; padding: 20px 22px;
}
.acct-alert2 .ring {
  display: inline-flex; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(8,111,243,.2); color: var(--blue-deep);
  align-items: center; justify-content: center; flex-shrink: 0;
}
.acct-alert2 h3 {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--dark); margin: 0;
}
.acct-alert2 p {
  margin: 7px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-600);
}
.acct-alert2 strong { color: var(--dark); font-weight: 600; }

.adm2-kv { margin: 0; }
.adm2-kv > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 11px 0; border-top: 1px solid var(--pad-line-soft);
}
.adm2-kv > div:first-child { border-top: 0; padding-top: 0; }
.adm2-kv dt { font-size: 13px; color: var(--ink-400); }
.adm2-kv dd {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--dark);
  text-align: right; font-variant-numeric: tabular-nums;
}

.adm2-covers { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.adm2-covers li {
  font-size: 12.5px; color: var(--ink-600); background: var(--pad-sunk);
  border: 1px solid var(--pad-line-soft); border-radius: 999px; padding: 6px 12px;
}

.adm2-mailed {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 12px; color: var(--pos); line-height: 1;
}
.adm2-mailed svg { width: 13px; height: 13px; flex: 0 0 13px; }

.adm2-inv {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  padding: 16px 0; border-top: 1px solid var(--pad-line-soft);
}
.adm2-inv:first-of-type { border-top: 0; padding-top: 0; }
.adm2-inv-id { min-width: 0; flex: 1 1 210px; }
.adm2-inv-id b { display: block; font-size: 14.5px; font-weight: 600; color: var(--dark); }
.adm2-inv-id span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }
.adm2-inv-side { display: flex; align-items: center; gap: 11px; margin-left: auto; }
.adm2-inv-acts { display: flex; gap: 7px; flex-wrap: wrap; flex-basis: 100%; }
.adm2-inv-acts a.adm2-act { text-decoration: none; display: inline-block; }


/* ---------- visitor figures ----------
   One measure per chart, on purpose. Visitors and enquiries differ by more
   than an order of magnitude, and putting both on one pair of axes is the
   quickest way to make a chart lie — so visitors get the plot and enquiries
   get their own breakdown underneath. */

.adm2-bars { list-style: none; margin: 0; padding: 0; }
.adm2-bars li { padding: 11px 0; border-top: 1px solid var(--pad-line-soft); }
.adm2-bars li:first-child { border-top: 0; padding-top: 0; }
.adm2-bars .row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 8px;
}
.adm2-bars .lab { font-size: 13.5px; color: var(--ink-600); min-width: 0; }
.adm2-bars .val {
  font-family: var(--display); font-size: 14.5px; font-weight: 700;
  color: var(--dark); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.adm2-bars .val em {
  font-family: var(--body); font-style: normal; font-size: 12px;
  font-weight: 500; color: var(--ink-400); margin-left: 5px;
}
.adm2-bars .track {
  height: 8px; border-radius: 999px; background: var(--pad-sunk); overflow: hidden;
}
.adm2-bars .fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent); min-width: 4px;
}

.adm2-plot .vbar { fill: var(--accent); transition: fill .14s; }
.adm2-plot .vhit:hover + .vbar, .adm2-plot .vbar:hover { fill: var(--blue-deep); }

.adm2-note {
  margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-400);
  padding-top: 14px; border-top: 1px solid var(--pad-line-soft);
}


/* ---------- the renewals desk ---------- */

.rn {
  padding: 16px 0; border-top: 1px solid var(--pad-line-soft);
}
.rn:first-of-type { border-top: 0; padding-top: 2px; }
.rn-now {
  border-top-color: transparent; margin: 8px 0;
  background: rgba(192,69,42,.05); border: 1px solid rgba(192,69,42,.2);
  border-radius: 18px; padding: 16px 18px;
}
.rn-now + .rn { border-top-color: transparent; }
.rn-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
}
.rn-who { min-width: 0; }
.rn-who b { display: block; font-size: 15px; font-weight: 600; color: var(--dark); }
.rn-who span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }
.rn-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 14px; flex-wrap: wrap; margin-top: 13px;
}
.rn-state { font-size: 12.5px; color: var(--ink-400); }
.rn-state.done { color: var(--pos); }
.rn-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.rn-acts a.adm2-act { text-decoration: none; display: inline-block; }

@media (max-width: 680px) {
  .adm-sheet.panel {
    max-width: none; border-radius: 22px 22px 0 0;
    height: calc(100% - 28px); margin-top: 28px;
  }
  .adm-modal.as-panel { align-items: flex-end; }
  .adm-sheet.panel .adm-sheet-head { padding: 18px 18px 12px; }
  .adm-sheet-sub { padding: 0 18px 14px; }
  .adm-sheet.panel .adm-sheet-body { padding: 18px 18px 24px; }
  .adm-sheet.panel .adm-sheet-foot { padding: 12px 18px; }
}