/* ══════════════════════════════════════════════════════════════════
   SkyRah — shared stylesheet for the public site.

   Deliberately NOT the office app's look. The app is dark gold-on-black
   because it is a tool used for eight hours a day. This is a firm's
   shopfront: ivory paper, ink navy, and deep teal for everything the
   interface does.

   ⚠ GOLD IS THE LOGO AND NOTHING ELSE. Owner's call, 2026-07-30. When gold
   was also the accent it appeared in every marker, rule, number, link
   underline and hover state, and the mark stopped reading as a mark. Teal
   is cool and the gold is warm, so the logo now separates from the page
   instead of blending into it. Do not reach for --gold when styling a
   component; reach for --accent. The only gold on any page is the mark and
   the wordmark, in the header, the footer, the chat panel and the favicon.

   Type is a serif display over a sans body. Layouts are asymmetric and
   ruled, closer to a printed prospectus than a software landing page.
   No pills, no icon circles, no card-grid-of-three, no gradients.
   ══════════════════════════════════════════════════════════════════ */

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

:root{
  --paper:#F7F4ED;        /* warm ivory, the page */
  --paper-2:#FFFFFF;      /* raised surfaces */
  --paper-3:#EFEAE0;      /* recessed bands */
  --navy:#1B2A41;         /* the dark half of the site */
  --navy-2:#152234;
  --ink:#14181F;          /* body copy on paper */
  --ink-2:#5B5648;        /* secondary copy, warm grey */
  /* Was #8A8474, which measured 3.39:1 on the paper. --muted carries the field
     labels (.68rem) and .fineprint (.78rem), so it is small text and 3.39 is
     under the 4.5 minimum. Found while measuring both themes for dark mode,
     2026-08-20; it was a light-mode bug all along, and dark had already landed
     at 5.15. #726C59 is 4.77:1 and still reads as the same warm grey. */
  --muted:#726C59;
  /* LOGO ONLY. Nothing else on the site may use these two. */
  --gold:#B8860B;         /* brand gold on light (ROADMAP 2b) */
  --gold-2:#C9A557;       /* brand gold on dark */

  /* Everything the interface does: markers, numbers, rules, links, hovers,
     focus, form states. Cool so it never competes with the gold mark. */
  --accent:#1C5A61;       /* deep teal on paper */
  --accent-2:#7FB6BB;     /* the same teal lifted for dark bands */

  --rule:#DED7C7;
  --rule-dark:#2D3D55;

  /* Ground-dependent values that used to be hardcoded in the rules. They are
     tokens now because each one needs a second value in dark mode, and a
     hardcoded colour is exactly how "Ask us something" ended up invisible. */
  --on-accent:#fff;              /* text on an --accent fill */
  --field-ph:#B5AE9E;            /* input placeholder */
  --tint:rgba(28,90,97,.07);     /* faint accent wash behind panels */
  --tint-2:rgba(28,90,97,.05);   /* the same, fainter, for the plate hatch */
  --err:#B0453A;
  --err-ink:#8E3830;
  --err-tint:rgba(176,69,58,.08);

  /* §5m-v (2026-09-10). The owner rejected the printed-prospectus flatness:
     cards, a small radius and a soft shadow are back, in our colours. These
     are the only three places that decision lives, so it can be tuned. */
  --radius:6px;
  --radius-lg:12px;
  --shadow:0 18px 44px -26px rgba(27,42,65,.35);
  --tint-band:#E4EEEE;           /* the teal-washed band on the paper */
  --card:#FFFFFF;                /* card face on the paper */

  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua","Times New Roman",serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* Wide and close to the edges, on the owner's note that the old 1200/40
     combination read as a document floating on a page rather than a site.
     Long lines are prevented per-element by .measure and the inline
     max-widths on body copy, not by squeezing the whole container. */
  --maxw:1660px;
  --pad:clamp(16px,2vw,28px);

  color-scheme:light;
}

/* ── dark mode ─────────────────────────────────────────────────────
   Added 2026-08-20 on the owner's request. It is a token swap and almost
   nothing else, for one structural reason worth stating: every interrupting
   surface on this site — the header, the footer, .band-dark and the roles
   ticker — is NAVY, and navy is LIGHTER than a true dark page. So in dark
   mode those bands do not collapse into the background; they invert their
   role and read as raised panels instead of sunk ones. The page/band rhythm
   that carries the layout survives untouched, and every colour tuned against
   navy (#EDE9E0 text, #C4CCD9 body, #5A6B85 borders, the whole .band-dark
   block) stays correct in both themes with no second value.

   What DOES have to flip is anything sitting on the paper: the paper scale
   itself, ink, rules, and --accent, which must become the lifted teal because
   the deep teal is unreadable on a dark ground.

   **Light is the unconditional default and the OS is deliberately ignored.**
   Owner's call, 2026-08-20: the site opens on the ivory shopfront for
   everyone, and dark is only ever reached by pressing the switch. The first
   build honoured prefers-color-scheme, so a visitor whose machine is set to
   dark (the owner's is) never saw the light design at all, which inverts what
   the brand is meant to lead with. There is therefore NO
   prefers-color-scheme block here on purpose. Do not add one back as an
   improvement; it would change what a first-time visitor sees.

   Declared twice:
     :root                  light, the default, and what everyone gets first
     [data-theme="dark"]    an explicit stored choice, nothing else
   Never give a colour its only definition inside the dark block.
   ──────────────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --paper:#0F1319; --paper-2:#161B23; --paper-3:#141922;
  --navy:#1E2C43;  --navy-2:#18253A;
  --ink:#E9E5DB;   --ink-2:#ABA495;   --muted:#8D8677;
  --gold:#C9A557;  --gold-2:#C9A557;
  --accent:#7FB6BB; --accent-2:#7FB6BB;
  --rule:#2A303B;  --rule-dark:#33435E;
  --on-accent:#0F1319; --field-ph:#6E6A60;
  --tint:rgba(127,182,187,.10); --tint-2:rgba(127,182,187,.07);
  --err:#E4877C; --err-ink:#F0A79E; --err-tint:rgba(228,135,124,.12);
  --shadow:0 18px 44px -26px rgba(0,0,0,.6);
  --tint-band:#132229;
  --card:#161B23;
  color-scheme:dark;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:19px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(64px,9vw,124px) 0;position:relative}
.band-dark{background:var(--navy);color:#EDE9E0}
.band-dark p{color:#B3BCCB}
.band-sunk{background:var(--paper-3)}

/* Navy surfaces re-map the three tokens that are tuned for PAPER. Without
   this, any component using --muted, --accent or --rule silently fails when
   it is placed on navy, and it fails per component, so it is found one at a
   time by eye. Measured on the live site 2026-08-20:
     .pull cite   --muted  #726C59 on navy = 2.75:1   (needs 4.5)
     .ledger-n    --accent #1C5A61 on navy = 1.85:1   (needs 4.5)
   Neither was a regression. --muted was DARKENED earlier that day to fix
   3.39:1 on the paper, which is correct for the page and made every navy
   instance worse — a paper-tuned token cannot serve both grounds. Fixing it
   here rather than per component means components added later inherit the
   correct values instead of repeating the bug.
   `footer` is listed because it is navy but is NOT .band-dark; that exact
   omission is what made the footer CTA invisible earlier. Any new dark
   surface belongs in this selector. */
.band-dark,footer{--muted:#9AA7BC;--accent:var(--accent-2);--rule:var(--rule-dark)}

/* ── type ─────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.012em}
h1{font-size:clamp(2.9rem,5.6vw,5rem)}
h2{font-size:clamp(2.2rem,3.9vw,3.5rem)}
h3{font-size:clamp(1.42rem,1.9vw,1.8rem);line-height:1.24}
h4{font-size:1.15rem}
p{color:var(--ink-2)}
.big{font-size:clamp(1.2rem,1.5vw,1.46rem);line-height:1.62;color:var(--ink-2)}
.band-dark .big{color:#C4CCD9}
em{font-style:italic;color:var(--accent)}
.band-dark em{color:var(--accent-2)}

/* a ruled, numbered section marker. Replaces the usual coloured eyebrow. */
.marker{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)
}
.marker::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.band-dark .marker::after{background:var(--rule-dark)}

.lede{max-width:34ch}
.measure{max-width:62ch}

/* ── buttons: squared, ruled. Theirs are green pills, so these are not. ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 30px;
  font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;position:relative;overflow:hidden;transition:color .3s;border-radius:var(--radius)
}
.btn-lg{padding:18px 34px;font-size:1rem}
.btn span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .34s cubic-bezier(.65,0,.35,1)
}
.btn:hover::before{transform:translateY(0)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{color:var(--paper)}
/* Dark-ground buttons. `footer` is in every one of these selectors because it
   is a navy surface that is NOT .band-dark, and it was missed: the footer CTA
   fell through to the light-ground defaults, so "Ask us something"
   (.btn-line) rendered color:var(--ink) #14181F on var(--navy) #1B2A41 —
   about 1.3:1, invisible, which is how the owner found it (2026-08-20). Any
   future dark surface must be added here too, or it inherits the same bug. */
.band-dark .btn,footer .btn{background:var(--accent-2);border-color:var(--accent-2);color:var(--navy)}
.band-dark .btn::before,footer .btn::before{background:#EDE9E0}
.band-dark .btn-line,footer .btn-line{background:transparent;color:#EDE9E0;border-color:#5A6B85}
.band-dark .btn-line:hover,footer .btn-line:hover{color:var(--navy)}
.btn-sm{padding:11px 20px;font-size:.84rem}

/* a text link with a rule that sweeps in */
.tlink{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem;
  color:var(--ink);padding-bottom:3px;background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .32s cubic-bezier(.65,0,.35,1),color .2s
}
.tlink:hover{background-size:100% 1.5px;color:var(--accent)}
.band-dark .tlink{color:#EDE9E0}
.tlink .arw{transition:transform .3s}
.tlink:hover .arw{transform:translateX(5px)}

/* ── header ───────────────────────────────────────────────────────
   Navy, not ivory. On ivory the gold logo sat on a near-tonal ground and
   washed out, which was the owner's complaint. A dark bar gives the gold
   maximum separation and gives the nav text a stronger footing too:
   gold-2 on navy is 6.2:1 and cream on navy is 12:1.
   ──────────────────────────────────────────────────────────────── */
.topline{height:3px;background:var(--accent);transform-origin:0 50%}
header{
  position:sticky;top:0;z-index:900;background:var(--navy);
  border-bottom:1px solid var(--rule-dark);transition:box-shadow .28s
}
header.shrunk{box-shadow:0 2px 26px rgba(20,24,31,.28)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:22px 0;transition:padding .28s}
header.shrunk .nav{padding:13px 0}

/* THE LOGO. The only gold anywhere. Mark and wordmark are one ink, so
   "Sky" and "Rah" are no longer split across two colours. */
.brand{display:flex;align-items:center;gap:15px}
.brand .mk{width:54px;height:54px;color:var(--gold-2);flex:none;transition:width .28s,height .28s}
header.shrunk .brand .mk{width:43px;height:43px}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{
  font-family:var(--serif);font-size:2.2rem;font-weight:400;letter-spacing:-.015em;
  color:var(--gold-2);transition:font-size .28s
}
header.shrunk .brand .wm b{font-size:1.8rem}
.brand .wm b i{font-style:normal;color:inherit}
.brand .wm small{
  font-family:var(--sans);font-size:.65rem;font-weight:700;letter-spacing:.33em;
  text-transform:uppercase;color:#8FA0B8;margin-top:7px;white-space:nowrap
}

/* The nav takes the middle of the bar and spreads across it, rather than
   huddling next to the logo. gap scales with the viewport so a 1920 header
   reads broad without the links drifting apart on a laptop. */
/* space-evenly, not center: centring left the six links huddled in the
   middle of a wide bar with dead space either side. The gap is the floor,
   and the leftover width is distributed, so the nav genuinely spans the
   header. The container is capped by --maxw, so on a 2560 screen the links
   spread across ~1100px rather than drifting to the far corners. */
.menu{
  display:flex;align-items:center;justify-content:space-evenly;flex:1;
  gap:clamp(20px,2vw,40px)
}
.menu a{
  font-size:1.14rem;font-weight:500;letter-spacing:.005em;color:#E4E8EE;
  position:relative;padding:8px 0;white-space:nowrap;
  background-image:linear-gradient(var(--accent-2),var(--accent-2));background-size:0% 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s,color .2s
}
.menu a:hover{background-size:100% 2px;color:#fff}
.menu a.here{color:var(--accent-2);background-size:100% 2px}
.nav-end{display:flex;align-items:center;gap:16px}
/* the nav CTA sits on navy, so it takes the dark-band treatment */
header .btn{background:var(--accent-2);border-color:var(--accent-2);color:var(--navy)}
header .btn::before{background:#EDE9E0}
/* The theme switch. It lives on the navy header in BOTH themes, so it is
   styled against navy and needs no dark-mode value of its own. Squared and
   ruled like the burger, not a pill. Only one icon shows at a time: the moon
   while the page is light (press it and you get dark) and the sun while it is
   dark. Sized to the burger so the two sit level. */
.theme-btn{
  width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--rule-dark);background:none;color:#E4E8EE;
  transition:color .2s,border-color .2s
}
.theme-btn:hover{color:var(--accent-2);border-color:var(--accent-2)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .t-sun{display:none}
.theme-btn .t-moon{display:block}
:root[data-theme="dark"] .theme-btn .t-sun{display:block}
:root[data-theme="dark"] .theme-btn .t-moon{display:none}
.burger{display:none;width:44px;height:44px;border:1px solid var(--rule-dark);background:none;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;width:19px;height:1.5px;background:#E4E8EE;transition:.3s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:26px}
.burger.x i:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){top:21px;transform:rotate(-45deg)}

@media(max-width:1000px){
  .menu{
    position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:var(--navy-2);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
    padding:40px clamp(24px,6vw,40px);border-left:1px solid var(--rule-dark);
    transform:translateX(101%);transition:transform .42s cubic-bezier(.65,0,.35,1);z-index:950
  }
  .menu.open{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.4)}
  .menu a{font-family:var(--serif);font-size:2.1rem;padding:12px 0}
  .burger{display:block;z-index:960}
  .nav-end .btn{display:none}
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(56px,8vw,110px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,70px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin-bottom:24px}
.hero h1 .gold{color:var(--accent);font-style:italic}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin:34px 0 0}

/* the ruled fact strip under the hero, instead of fake counters */
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);margin-top:clamp(40px,6vw,70px)}
.facts div{flex:1 1 190px;padding:24px 26px 24px 0;border-right:1px solid var(--rule)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--serif);font-size:1.45rem;margin-bottom:4px}
.facts span{font-size:.86rem;color:var(--muted);display:block}
@media(max-width:700px){.facts div{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--rule);padding-right:0}.facts div:last-child{border-bottom:0}}

/* ── photography frames ───────────────────────────────────────── */
/* An <img> that has not been supplied yet degrades to a ruled ivory
   plate carrying its own spec, so an unfinished site still reads as
   deliberate rather than broken. See site/public/img/README.txt. */
/* The photograph is feathered into the paper rather than stopping at a hard
   rectangle. Owner's observation (2026-08-20) and it is exactly right: on the
   home hero the LEFT edge already looked like part of the page because the
   wall in the shot happens to sit at the same value as the ivory, while every
   other edge stopped dead and read as pasted on.

   Two rules are needed and they only work together:
   1. the mask below, which fades the image out over --feather on all sides;
   2. .plate losing its --paper-3 background. That is #EFEAE0 against the
      page's #F7F4ED — a hard-edged rectangle a shade darker than the paper,
      which would still be visible behind a softened photograph and undo the
      whole effect. Safe to drop: the .plate-note fallback paints its own
      background, so an unsupplied photo still gets its ruled ivory plate.

   Not the "no gradients" the owner banned (§5m item 3) — that is about
   gradient FILLS as decoration, the thing that makes a page read as
   generated. Nothing here is painted; the gradient is a mask, doing what a
   soft bleed does in print. */
.plate{position:relative;overflow:hidden;border-radius:var(--radius-lg)}
.plate img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Tight on purpose. The first pass ran clamp(16px,3.2vw,44px) and the owner
     called it correctly: on a DARK photograph a wide fade to ivory lightens
     the edge inward, which stops reading as a soft edge and starts reading as
     light emerging from behind the picture. The night shot on the home page is
     where it showed. A short feather kills the cut line without bleeding paper
     into the image, so the light and dark photographs behave the same. If this
     ever needs revisiting, judge it on tired.jpg, not on the bright ones. */
  --feather:clamp(5px,0.8vw,12px);
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 var(--feather),#000 calc(100% - var(--feather)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--feather),#000 calc(100% - var(--feather)),transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 var(--feather),#000 calc(100% - var(--feather)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--feather),#000 calc(100% - var(--feather)),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.plate.portrait{aspect-ratio:4/5}
.plate.wide{aspect-ratio:16/10}
.plate.square{aspect-ratio:1}
.plate.tall{aspect-ratio:3/4}
.plate-note{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;padding:26px;
  border:1px solid var(--rule);color:var(--muted);
  background:
    repeating-linear-gradient(-45deg,transparent 0 11px,var(--tint-2) 11px 22px),
    var(--paper-3)
}
.plate-note b{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.plate-note span{font-size:.8rem;max-width:26ch;line-height:1.5}
/* No rule around a photograph. Two earlier attempts are recorded in §5m so
   neither gets reintroduced as an improvement:

     inset:22px -22px -22px 22px  — the rule offset down-right of the plate.
       Read as the picture having slipped out of its frame once real
       photographs replaced the placeholder plates, and its negative right
       inset put the line within a few px of the window edge on any viewport
       under --maxw.
     inset:0 on a padding box  — fixed the alignment and the overflow, but a
       1px var(--accent) box fully enclosing a photo reads as near-black on
       ivory, which is the default bordered-image look the whole design avoids.

   The owner's call (2026-08-20) is that the photograph meets the paper
   directly. .plate-offset is kept as the layout hook only. */
.plate-offset{position:relative}
.plate-offset .plate{position:relative;z-index:1}

/* ── editorial two-column rows ────────────────────────────────── */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.5vw,80px);align-items:center}
.row2.wide-left{grid-template-columns:1.2fr .8fr}
.row2.wide-right{grid-template-columns:.8fr 1.2fr}
@media(max-width:900px){.row2,.row2.wide-left,.row2.wide-right{grid-template-columns:1fr;gap:36px}}
@media(max-width:900px){.row2.flip>*:first-child{order:2}}

/* ── the numbered list that replaces card grids ───────────────── */
.ledger{border-top:1px solid var(--rule)}
.band-dark .ledger{border-color:var(--rule-dark)}
.ledger-item{
  display:grid;grid-template-columns:74px 1fr;gap:clamp(14px,3vw,42px);
  padding:clamp(26px,3.6vw,40px) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:padding-left .35s cubic-bezier(.65,0,.35,1)
}
.band-dark .ledger-item{border-color:var(--rule-dark)}
.ledger-item:hover{padding-left:14px}
.ledger-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s cubic-bezier(.65,0,.35,1)
}
.ledger-item:hover::before{transform:scaleY(1)}
.ledger-n{font-family:var(--mono);font-size:.78rem;color:var(--accent);padding-top:8px;letter-spacing:.1em}
.ledger-item h3{margin-bottom:9px}
.ledger-item p{font-size:.96rem;max-width:66ch}
@media(max-width:640px){.ledger-item{grid-template-columns:1fr;gap:8px}.ledger-n{padding-top:0}}

/* three-across editorial columns, ruled not boxed */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.band-dark .cols{border-color:var(--rule-dark)}
.cols>div{padding:34px 34px 34px 0;border-right:1px solid var(--rule)}
.band-dark .cols>div{border-color:var(--rule-dark)}
.cols>div:last-child{border-right:0}
.cols>div:not(:last-child){padding-right:34px}
.cols h3{margin-bottom:12px}
.cols p{font-size:.94rem}
@media(max-width:860px){
  .cols{grid-template-columns:1fr}
  .cols>div{border-right:0;border-bottom:1px solid var(--rule);padding:28px 0}
  .band-dark .cols>div{border-color:var(--rule-dark)}
  .cols>div:last-child{border-bottom:0}
}

/* ── marquee of roles. Movement without a carousel. ───────────── */
/* The roles ticker is a navy band. It used to be --paper-2, which is pure
   #FFFFFF sitting on the #F7F4ED page — a 1.06:1 difference, so it read as a
   faint smear between two hairlines rather than as a band, which is what the
   owner reported (2026-08-20). Navy makes it deliberate and echoes the header.
   Cream on navy measures 11.9:1, so making the band solid costs the text
   nothing, which was the owner's condition. The dot separator has to move to
   --accent-2 as well: the deep teal --accent is near-invisible on navy. */
/* §5m-v: the hero above it is navy now, so the ticker is the LIGHT strip
   between two coloured bands (navy hero, teal facts) rather than a third
   navy one. Solid because it is bounded by rules and sits between colour,
   which is what the 2026-08-20 change was after. */
.ticker{border-block:1px solid var(--rule);padding:19px 0;overflow:hidden;white-space:nowrap;background:var(--paper-2)}
.band-dark .ticker{border-color:var(--rule-dark);background:var(--navy-2)}
.ticker-run{display:inline-flex;gap:0;animation:slide 46s linear infinite;will-change:transform}
.ticker:hover .ticker-run{animation-play-state:paused}
.ticker span{
  font-family:var(--serif);font-size:1.28rem;color:var(--ink);padding:0 30px;
  display:inline-flex;align-items:center;gap:30px
}
.band-dark .ticker span{color:#C4CCD9}
.ticker span::after{content:"";width:5px;height:5px;background:var(--accent);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── pull quote ───────────────────────────────────────────────── */
.pull{border-left:2px solid var(--accent);padding:6px 0 6px 30px;max-width:62ch}
.pull p{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.4;color:var(--ink)}
.band-dark .pull p{color:#EDE9E0}
.pull cite{display:block;margin-top:18px;font-style:normal;font-size:.84rem;color:var(--muted);letter-spacing:.06em}

/* ── accordion ────────────────────────────────────────────────── */
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{
  padding:26px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:26px;align-items:baseline;font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.35rem);
  transition:color .22s
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--accent)}
/* --n is stamped per row by site.js so the count is real, not hardcoded */
.acc summary::after{content:var(--n,"");font-family:var(--mono);font-size:.72rem;color:var(--accent);flex:none;letter-spacing:.1em}
.acc details p{padding:0 0 28px;max-width:70ch;font-size:.97rem}

/* ── form ─────────────────────────────────────────────────────── */
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--rule);background:transparent;
  font-family:var(--sans);font-size:1rem;color:var(--ink);transition:border-color .25s
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--field-ph)}
.band-dark .field input,.band-dark .field select,.band-dark .field textarea{border-bottom-color:var(--rule-dark);color:#EDE9E0}
.band-dark .field label{color:#8494AB}
.form-msg{margin-top:18px;padding:15px 18px;font-size:.92rem;display:none;border-left:2px solid}
.form-msg.ok{display:block;border-color:var(--accent);background:var(--tint);color:var(--ink)}
.form-msg.err{display:block;border-color:var(--err);background:var(--err-tint);color:var(--err-ink)}
.band-dark .form-msg.ok{color:#EDE9E0}
.fineprint{font-size:.78rem;color:var(--muted);margin-top:16px;line-height:1.6}
/* "Email address copied" note, shown when an email link is clicked (site.js copyEmail) */
#copied{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);z-index:999;
  background:var(--navy);color:#EDE9E0;padding:12px 18px;border-radius:var(--radius);box-shadow:var(--shadow);
  font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px)}
#copied.on{opacity:1;transform:translate(-50%,0)}
/* The text-message opt-in (ROADMAP §5m-vii): a real, unticked box beside the
   words it agrees to, because the carriers' review reads exactly this. Kept
   out of .field on purpose: `.field input` is a full-width underlined text box. */
.consent{display:flex;gap:12px;align-items:flex-start;margin:2px 0 26px}
.consent input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--accent);cursor:pointer}
.consent label{font-size:.84rem;line-height:1.6;color:var(--muted);cursor:pointer}
.consent label b{color:var(--ink);font-weight:600}
/* .tlink is sized and flexed for a standalone link; inside this small print it
   jumped a size and wrapped as a block, so here it is just an inline word */
.consent .tlink{display:inline;font-size:inherit;padding-bottom:1px}


/* ── footer ───────────────────────────────────────────────────────
   Theirs is white with 100px of top padding, three link columns, and a
   green copyright bar stuck on the bottom. It reads as the end of a
   template rather than the end of a document.

   Ours opens with a closing statement and the last call to action, then
   the columns, then a bottom rule. The mark sits oversized and very faint
   in the corner, bleeding off the edge, so the page finishes on the brand
   instead of on a row of small print.
   ──────────────────────────────────────────────────────────────── */
footer{
  background:var(--navy);color:#C4CCD9;padding:0 0 30px;
  position:relative;overflow:hidden
}
/* the oversized watermark. Gold is logo-only and this IS the logo. */
.foot-mark{
  position:absolute;right:-6%;bottom:-16%;width:min(560px,54vw);
  color:var(--gold-2);opacity:.045;pointer-events:none;z-index:0
}
footer .wrap{position:relative;z-index:1}

/* the closing statement + last CTA */
.foot-lead{
  display:grid;grid-template-columns:1.25fr auto;gap:clamp(26px,4vw,60px);
  align-items:end;padding:clamp(56px,7vw,92px) 0 clamp(40px,5vw,62px);
  border-bottom:1px solid var(--rule-dark)
}
@media(max-width:860px){.foot-lead{grid-template-columns:1fr;align-items:start;gap:28px}}
.foot-lead h2{
  font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.12;
  color:#EDE9E0;max-width:24ch;font-weight:400
}
.foot-lead h2 em{font-style:italic;color:var(--accent-2)}
.foot-lead .foot-cta{display:flex;gap:14px;flex-wrap:wrap}

.foot-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:clamp(28px,3vw,48px);
  padding:clamp(44px,5vw,64px) 0;border-bottom:1px solid var(--rule-dark)
}
@media(max-width:980px){.foot-top{grid-template-columns:1fr 1fr;gap:38px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}

footer h4{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;font-weight:400
}
footer ul{list-style:none;display:flex;flex-direction:column;gap:14px}
footer a{font-size:.98rem;color:#C4CCD9;transition:color .2s}
footer a:hover{color:var(--accent-2)}
footer .brand .mk{color:var(--gold-2)}
footer .brand .wm b{color:var(--gold-2)}
footer .brand .wm b i{color:inherit}
footer .brand .wm small{color:var(--muted)}
.foot-blurb{font-size:.98rem;color:#93A0B4;margin:22px 0 0;max-width:34ch;line-height:1.65}

.socials{display:flex;gap:12px;margin-top:24px}
.socials a{
  width:42px;height:42px;border:1px solid var(--rule-dark);display:grid;place-items:center;
  transition:border-color .25s,background .25s,color .25s
}
.socials a:hover{border-color:var(--accent-2);background:var(--accent-2);color:var(--navy)}

.foot-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;font-size:.84rem;color:var(--muted)
}
.foot-bottom a{font-size:.84rem}
.foot-legal{
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(45,61,85,.5);
  font-size:.76rem;color:var(--muted);line-height:1.7;max-width:88ch
}

/* ── page header for interior pages ───────────────────────────── */
/* Interior pages open on a navy band now, so every page starts with colour
   rather than a rule on ivory (§5m-v). It carries .band-dark in the markup,
   which is what remaps --muted/--accent/--rule for the crumb. */
.phead{padding:clamp(54px,6.5vw,96px) 0 clamp(44px,5vw,70px)}
.phead h1{max-width:20ch}
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumb a:hover{color:var(--accent)}

/* ── voices (testimonials) ────────────────────────────────────────
   Theirs: a white 10px-radius card with a soft shadow, a canned headline
   ("Nice work!"), FIVE YELLOW STARS on every entry, then a name and a job
   title. Four of them, looped twice, two sharing a job title.

   Ours deliberately has no stars. A star rating is for a product you bought;
   a placement is an outcome, and five gold stars on every card is the single
   clearest tell that nobody checked. What a placement firm can show and a
   template cannot fake is the MOVE: the role someone came from, the role they
   went to, and how long it took. So the attribution carries that instead.

   Ruled rows, not floating cards. No shadow, no radius.
   ──────────────────────────────────────────────────────────────── */
.voices{border-top:1px solid var(--rule)}
.band-dark .voices,.band-sunk .voices{border-color:var(--rule-dark)}
.band-sunk .voices{border-color:var(--rule)}
.voice{
  display:grid;grid-template-columns:1fr minmax(240px,300px);
  gap:clamp(24px,4vw,64px);align-items:start;
  padding:clamp(32px,4vw,52px) 0;border-bottom:1px solid var(--rule)
}
.band-dark .voice{border-color:var(--rule-dark)}
@media(max-width:820px){.voice{grid-template-columns:1fr;gap:26px}}

.voice blockquote{
  font-family:var(--serif);font-size:clamp(1.32rem,2vw,1.95rem);line-height:1.44;
  color:var(--ink);position:relative;padding-left:30px
}
.band-dark .voice blockquote{color:#EDE9E0}
/* a single quote mark set in the margin, not a decorative glyph behind text */
.voice blockquote::before{
  content:"\201C";position:absolute;left:0;top:-.1em;
  font-size:2.4em;line-height:1;color:var(--accent);opacity:.5
}
.band-dark .voice blockquote::before{color:var(--accent-2)}

.voice .who{padding-top:8px}
.voice .who b{display:block;font-size:1.02rem;font-weight:600;margin-bottom:12px}
.band-dark .voice .who b{color:#EDE9E0}
/* the move: "Business Analyst" -> "Senior Business Analyst" */
.voice .move{
  font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--ink-2);
  display:flex;flex-direction:column;gap:3px;
  padding-left:14px;border-left:2px solid var(--accent)
}
.band-dark .voice .move{color:#B3BCCB;border-left-color:var(--accent-2)}
.voice .move i{font-style:normal;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.68rem}
.voice .move s{text-decoration:none;color:var(--ink-2)}
.band-dark .voice .move s{color:#93A0B4}
.voice .move em{font-style:normal;color:var(--accent);font-weight:700}
.band-dark .voice .move em{color:var(--accent-2)}
.voice .took{
  margin-top:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)
}

/* the honest empty state, used while there is nothing real to quote */
.voices-none{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(34px,4vw,52px) 0;max-width:64ch
}
.voices-none p{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.55;font-family:var(--serif);color:var(--ink)}
.band-dark .voices-none p,.band-sunk .voices-none p{color:var(--ink)}
.voices-none span{
  display:block;margin-top:16px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)
}

/* ── journal ──────────────────────────────────────────────────────
   Theirs is a three-across grid of image-topped cards, so every post needs
   a photograph before it can ship. Ours is a ruled index, like the contents
   page of a printed journal: number, title, standfirst, date. It needs no
   imagery at all, which means the journal can launch on writing alone.
   The lead piece gets a plate; everything under it does not.
   ──────────────────────────────────────────────────────────────── */
.jlead{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);
  align-items:center;padding-bottom:clamp(36px,4vw,56px)
}
@media(max-width:900px){.jlead{grid-template-columns:1fr;gap:30px}}
.jlead .jmeta{margin-bottom:14px}
.jlead h2{margin-bottom:18px}
.jlead p{font-size:1.08rem;margin-bottom:24px;max-width:52ch}

.jindex{border-top:1px solid var(--rule)}
.jrow{
  display:grid;grid-template-columns:62px 1fr minmax(120px,auto);
  gap:clamp(16px,2.6vw,40px);align-items:baseline;
  padding:clamp(24px,2.8vw,34px) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:padding-left .35s cubic-bezier(.65,0,.35,1)
}
.jrow::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s cubic-bezier(.65,0,.35,1)
}
.jrow:hover{padding-left:14px}
.jrow:hover::before{transform:scaleY(1)}
.jrow .n{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.1em}
.jrow h3{margin-bottom:8px;transition:color .25s}
.jrow:hover h3{color:var(--accent)}
.jrow p{font-size:.96rem;max-width:64ch}
.jrow .when{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-align:right;white-space:nowrap
}
@media(max-width:760px){
  .jrow{grid-template-columns:44px 1fr;gap:14px}
  .jrow .when{grid-column:2;text-align:left;margin-top:8px}
}
.jmeta{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:11px
}

/* the journal's own honest empty state */
.jsoon{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(36px,4vw,56px) 0;max-width:62ch}
.jsoon p{font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.5;color:var(--ink)}
.jsoon span{display:block;margin-top:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ── no reveal animations ─────────────────────────────────────── */
/* There used to be four: every paragraph rose in on scroll (161 elements),
   headlines unrolled word by word, rules drew themselves, photographs drifted
   against the scroll. All removed 2026-09-10 on the owner's note that the
   site read as generated. That is what does it: a printed prospectus does
   not fade its sentences in one at a time, and a page where nothing is
   visible until it has finished arriving is the signature of a template.
   Content is simply on the page. Do not bring any of this back as polish. */

/* ── §5m-v: bold, in our colours ──────────────────────────────────
   The owner's verdict on the printed-prospectus site was that it did not
   look like a designed thing, and the competitor's did. So: a navy hero with
   the photograph bleeding to the edge and cards floating over it, a facts
   band with big numerals, service cards with line icons, a three-step navy
   band, testimonial cards. Same palette, same type, same gold-only logo.
   What was reversed from 2026-07-30 item 3: "no cards, no icon circles, no
   grids" — by the owner, 2026-09-10. What was NOT reversed: no cost anywhere,
   no invented numbers, no em dashes, no automation vocabulary.
   ──────────────────────────────────────────────────────────────── */

/* hero */
.hero.band-dark{padding:clamp(48px,6vw,86px) 0 0;overflow:visible}
.hero .hero-grid{grid-template-columns:1.05fr .95fr;align-items:end;gap:clamp(24px,4vw,64px)}
.hero-copy{padding-bottom:clamp(48px,6vw,86px)}
.hero.band-dark h1{color:#F3EFE6}
.hero.band-dark .marker{color:var(--accent-2)}
.hero-trust{display:flex;flex-wrap:wrap;gap:22px 34px;margin-top:38px;font-size:.9rem;color:#B3BCCB}
.hero-trust span{display:inline-flex;align-items:center;gap:9px}
.hero-trust svg{width:18px;height:18px;color:var(--accent-2);flex:none}
/* runs past the container's right padding so it meets the viewport edge */
.hero-photo{position:relative;align-self:end;min-height:420px;margin-right:calc(-1 * var(--pad))}
.hero-photo img{
  display:block;width:100%;height:clamp(440px,52vw,640px);object-fit:cover;object-position:50% 20%;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 100%),linear-gradient(to top,transparent 0,#000 12%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 100%),linear-gradient(to top,transparent 0,#000 12%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect
}
.float-card{
  position:absolute;display:flex;gap:14px;align-items:center;padding:16px 18px;
  background:var(--card);color:var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  border:1px solid var(--rule);max-width:min(300px,78%)
}
:root[data-theme="dark"] .float-card{border-color:var(--rule-dark)}
.float-card .ico{width:42px;height:42px;border-radius:10px;background:var(--tint-band);color:var(--accent);display:grid;place-items:center;flex:none}
.float-card svg{width:22px;height:22px}
.float-card b{display:block;font-family:var(--serif);font-size:1.08rem;line-height:1.2}
.float-card small{display:block;font-size:.8rem;color:var(--ink-2);margin-top:3px;line-height:1.35}
.fc-1{left:-8%;top:16%}
.fc-2{right:2%;bottom:14%}
@media(max-width:900px){
  .hero .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding-bottom:0}
  .hero-photo{min-height:0;margin-top:34px}
  .hero-photo img{height:min(70vw,460px)}
  .fc-1{left:0;top:8%}.fc-2{right:0;bottom:8%}
}
@media(max-width:560px){.float-card{position:static;max-width:none;margin-top:12px}.hero-photo img{-webkit-mask-image:none;mask-image:none;border-radius:var(--radius-lg)}}

/* facts band */
.facts-band{background:var(--tint-band);padding:clamp(44px,5vw,70px) 0}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,40px)}
.facts-grid>div{border-left:2px solid var(--accent);padding-left:20px}
.facts-grid b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,3.6vw,3.6rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.facts-grid b i{font-style:normal;font-family:var(--sans);font-size:.42em;color:var(--accent);margin:0 .12em;vertical-align:middle;letter-spacing:.04em}
.facts-grid span{display:block;margin-top:10px;font-size:.92rem;color:var(--ink-2);max-width:26ch;line-height:1.5}
@media(max-width:900px){.facts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.facts-grid{grid-template-columns:1fr}}

/* section head: marker + h2 left, a link or note right */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:clamp(30px,3.6vw,46px)}
.sec-head h2{max-width:24ch}
.sec-head .marker{margin-bottom:18px}
.sec-note{max-width:44ch;font-size:.98rem;color:var(--ink-2);padding-bottom:6px}
@media(max-width:820px){.sec-head{flex-direction:column;align-items:start}}

/* callout inside copy */
.callout{margin-top:22px;padding:20px 22px;border-left:3px solid var(--accent);background:var(--tint-band);border-radius:0 var(--radius) var(--radius) 0;max-width:58ch}
.callout p{color:var(--ink);font-size:1.02rem}

/* service cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
.card{
  display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow);color:var(--ink);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s
}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card .ico{width:46px;height:46px;border-radius:10px;background:var(--tint-band);color:var(--accent);display:grid;place-items:center}
.card .ico svg{width:24px;height:24px}
.card h3{font-size:1.28rem;margin-top:6px}
.card p{font-size:.94rem;color:var(--ink-2);flex:1}
.card-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--accent)}
.card:hover .card-more .arw{transform:translateX(5px)}
.card-more .arw{transition:transform .3s}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

/* steps on navy */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);position:relative}
.step{position:relative;padding-top:26px}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-dark)}
.step-n{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--accent-2);margin-bottom:14px}
.step h3{margin-bottom:10px;color:#F3EFE6}
.step p{font-size:.95rem;color:#B3BCCB}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.call-strip{
  display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(24px,4vw,60px);align-items:center;
  margin-top:clamp(40px,5vw,64px);padding:clamp(26px,3vw,40px);border:1px solid var(--rule-dark);
  border-radius:var(--radius-lg);background:var(--navy-2)
}
.call-strip h3{font-size:clamp(1.4rem,2.2vw,1.9rem);color:#F3EFE6;margin-bottom:10px}
.call-strip p{font-size:.96rem;color:#B3BCCB;max-width:60ch}
.call-strip-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media(max-width:820px){.call-strip{grid-template-columns:1fr}}

/* closing split band */
.cta-split{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,60px);align-items:center}
.cta-split-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}
@media(max-width:820px){.cta-split{grid-template-columns:1fr}.cta-split-actions{justify-content:flex-start}}

/* testimonials as cards; the empty state is one card that says so */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.tcard{
  display:flex;flex-direction:column;gap:18px;padding:28px 26px;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow)
}
.tcard blockquote{font-family:var(--serif);font-size:1.18rem;line-height:1.5;color:var(--ink);flex:1}
.tcard blockquote::before{content:"\\201C";color:var(--accent);margin-right:2px}
.tcard .who b{display:block;font-weight:600;font-size:.95rem}
.tcard .move{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:.84rem;color:var(--ink-2)}
.tcard .move i{font-style:normal;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:var(--muted)}
.tcard .move s{text-decoration:none}
.tcard .move em{font-style:normal;color:var(--accent)}
.tcard .took{margin-top:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
@media(max-width:1000px){.tcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tcards{grid-template-columns:1fr}}
.voices-none{
  border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow);
  padding:clamp(28px,3.4vw,44px);max-width:none
}


/* ── chat ─────────────────────────────────────────────────────────
   Built to look finished rather than bolted on. Their Tawk widget is a
   rounded green bubble with a canned line; this is a squared panel that
   matches the rest of the site: navy head, ivory body, teal for anything
   interactive, gold only on the mark and the name.
   ──────────────────────────────────────────────────────────────── */
/* pointer-events:none on the dock, auto on what is visible inside it. The
   dock is a 290x205 box in the corner even while the peek is hidden, and it
   swallowed every click on whatever lay under it: at 1920 wide that is the
   footer's Privacy and Terms, which "did nothing" for the owner (2026-09-30).
   #peek turns its own pointer-events on only while it is showing (.show). */
#dock{
  position:fixed;right:clamp(16px,2.5vw,30px);bottom:clamp(16px,2.5vw,30px);z-index:940;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none
}
#hail{pointer-events:auto}
#peek{
  background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--accent);
  padding:17px 20px 17px 18px;max-width:290px;box-shadow:0 20px 50px -24px rgba(20,24,31,.42);
  cursor:pointer;opacity:0;transform:translateY(14px);transition:.45s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;position:relative
}
#peek.show{opacity:1;transform:none;pointer-events:auto}
#peek b{
  display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px
}
#peek p{font-size:.92rem;line-height:1.52;color:var(--ink)}
#peek .x{
  position:absolute;top:6px;right:9px;font-size:1.15rem;color:var(--muted);
  line-height:1;padding:3px;cursor:pointer
}
#peek .x:hover{color:var(--ink)}

#hail{
  width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--accent-2);border:0;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 16px 38px -12px rgba(27,42,65,.7);
  transition:transform .28s,background .28s,color .28s;position:relative;flex:none
}
#hail:hover{transform:scale(1.06);background:var(--accent);color:var(--on-accent)}
#hail svg{width:26px;height:26px}
#hail .pip{
  position:absolute;top:0;right:0;width:15px;height:15px;border-radius:50%;
  background:var(--accent-2);border:2.5px solid var(--paper);display:none
}
/* A still dot. It pulsed; the competitor's widget flips the tab title to
   "1 new message" for the same reason, and both are the nag that makes a
   visitor close the tab. The dot says something is there; it does not beg. */
#hail.new .pip{display:block}

#panel{
  position:fixed;right:clamp(16px,2.5vw,30px);bottom:clamp(16px,2.5vw,30px);z-index:945;
  width:412px;max-width:calc(100vw - 32px);height:640px;max-height:calc(100vh - 56px);
  background:var(--paper);border:1px solid var(--rule);display:none;flex-direction:column;
  box-shadow:0 40px 90px -32px rgba(20,24,31,.55);overflow:hidden
}
#panel.open{display:flex;animation:panelUp .34s cubic-bezier(.2,.75,.25,1)}
@keyframes panelUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.p-head{
  display:flex;align-items:center;gap:13px;padding:18px 20px;
  background:var(--navy);border-bottom:3px solid var(--accent);flex:none
}
.p-head .mk{width:34px;height:34px;color:var(--gold-2);flex:none}                          /* logo */
.p-head b{font-family:var(--serif);font-size:1.28rem;font-weight:400;display:block;color:var(--gold-2)} /* logo */
.p-head small{
  display:flex;align-items:center;gap:7px;font-size:.74rem;color:#93A4BC;
  letter-spacing:.03em;margin-top:3px
}
.p-head small::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none
}
.p-head button{
  margin-left:auto;background:none;border:0;color:#93A4BC;font-size:1.6rem;line-height:1;
  cursor:pointer;padding:0 4px;align-self:flex-start;transition:color .2s
}
.p-head button:hover{color:#EDE9E0}

.p-body{
  flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:15px;
  scrollbar-width:thin
}
.p-body::-webkit-scrollbar{width:9px}
.p-body::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--paper)}

.bub{
  max-width:88%;padding:14px 17px;font-size:.97rem;line-height:1.58;
  white-space:pre-wrap;word-wrap:break-word
}
.bub.them{
  background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--accent);
  align-self:flex-start;color:var(--ink)
}
.bub.you{background:var(--navy);color:#EDE9E0;align-self:flex-end}
.bub.note{
  align-self:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--accent);text-align:center;max-width:100%;padding:8px 12px;
  background:var(--tint);border:0
}
.dots{
  display:flex;gap:6px;align-self:flex-start;padding:16px 18px;
  background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--accent)
}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:hop 1.3s infinite}
.dots i:nth-child(2){animation-delay:.16s}.dots i:nth-child(3){animation-delay:.32s}
@keyframes hop{0%,62%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-6px);opacity:1}}

/* suggested questions: stacked rows with a chevron, not a heap of pills */
.chips{display:flex;flex-direction:column;gap:8px;padding:0 20px 14px;flex:none}
.chips button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:left;font-family:var(--sans);font-size:.9rem;padding:12px 15px;
  border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);cursor:pointer;
  transition:border-color .2s,color .2s,transform .2s
}
.chips button::after{content:"\2192";color:var(--accent);flex:none;transition:transform .25s}
.chips button:hover{border-color:var(--accent);color:var(--accent);transform:translateX(3px)}
.chips button:hover::after{transform:translateX(3px)}

.p-foot{
  display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule);
  background:var(--paper-2);flex:none
}
.p-row{display:flex;gap:0;align-items:stretch}
.p-foot input{
  flex:1;border:0;padding:17px 18px;font-size:.97rem;background:transparent;
  font-family:var(--sans);color:var(--ink)
}
.p-foot input:focus{outline:none}
.p-foot input::placeholder{color:var(--field-ph)}
.p-foot button[type="submit"]{
  width:58px;background:var(--navy);color:var(--accent-2);border:0;cursor:pointer;
  display:grid;place-items:center;flex:none;transition:background .22s,color .22s
}
.p-foot button[type="submit"]:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
.p-foot button[type="submit"]:disabled{opacity:.4;cursor:not-allowed}
.p-note{
  font-size:.72rem;color:var(--muted);padding:0 18px 12px;line-height:1.5;
  border-top:1px solid var(--rule);padding-top:11px
}

@media(max-width:520px){
  #panel{right:0;bottom:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;border:0}
  #panel.open{animation:none}
  #dock{right:16px;bottom:16px}
}

.hide{display:none!important}