/* ==========================================================================
   Reliable Choice Insurance — redesign concept B
   Modern insurance-SaaS, modelled on thimble.com. White ground, one loud
   blue, a lot of air. One typeface, one radius, no ornament.

   Abraham asked for blue instead of green on 2026-09-06. The tokens keep
   their green names (--forest, --spring, --mint) because forty rules and the
   contrast guards are written against them; only the values changed. Read
   --forest as "the deep blue", --spring as "the sky-blue accent".

   The one rule that governs every colour choice below: --spring is a FILL.
   It is 1.71:1 on white, so it is never text, never a link, never a border
   that means something on a light ground. Green text is always --forest.

   On --forest it measures 4.30:1, not the 5:1 it is often quoted at, so even
   there it carries LARGE text only — the stat figures, a highlighted word in
   a heading, the phone number. Anything at body size or smaller on the green
   band is #FFFFFF. Measured in Chromium, not estimated.
   ========================================================================== */

:root{
  --paper:    #FFFFFF;
  --paper-2:  #F8F8F8;
  --ink:      #000000;
  --ink-2:    #5C5858;
  --forest:   #1B49AE;
  --forest-2: #0A1B45;
  --spring:   #3EC1FF;
  --rule:     #E6E6E6;
  --mint:     #E7F2FF;

  --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gap: clamp(1rem, 2.2vw, 1.8rem);
  --sec-y: clamp(4.5rem, 9vw, 8rem);
  --r: 4px;

  /* no overshoot anywhere: this design does not bounce */
  --in:  cubic-bezier(.2,.7,.3,1);
  --sta: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--spring); color:var(--forest-2); }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
/* the whole design is one sans; nothing on the page is ever set in italic */
em,i,cite,address{ font-style:normal; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ max-width:44rem; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--forest); outline-offset:2px; border-radius:var(--r);
}
/* the deep-green band swallows a --forest ring, and --spring swallows itself */
.on-navy :where(a,button,input,select,[tabindex]):focus-visible,
.band :where(a,button,[tabindex]):focus-visible,
.ftr :where(a,button,[tabindex]):focus-visible,
.callbar:focus-visible{ outline-color:#FFFFFF; }

.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:300;
  background:var(--forest); color:#FFFFFF; padding:.75rem 1.1rem; border-radius:var(--r);
  font-weight:600; text-decoration:none;
  transform:translateY(-180%); transition:transform .18s var(--sta);
}
.skip:focus-visible{ transform:none; }

/* ------------------------------------------------------------- buttons
   Four kinds and no more. The house radius is 4px; there are no pills. */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--forest); color:#FFFFFF; border:1px solid var(--forest); border-radius:var(--r);
  padding:.85rem 1.4rem; min-height:44px;
  font-size:.9375rem; font-weight:600; line-height:1.25; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s var(--sta), border-color .18s var(--sta), color .18s var(--sta), transform .18s var(--sta), box-shadow .18s var(--sta);
}
.btn:hover{ background:var(--forest-2); border-color:var(--forest-2); }
.btn:active{ transform:scale(.985); box-shadow:none; transition-duration:.08s; }
.btn--lg{ padding:1.05rem 1.7rem; font-size:1rem; }
.btn--sm{ padding:.7rem 1.1rem; font-size:.875rem; }

/* the primary. Spring fill, the darkest green on top of it, and the arrow
   Thimble hangs off the right side — kept in CSS so the markup stays clean. */

.btn--line{ background:transparent; border-color:var(--rule); color:var(--forest); }
.btn--line:hover{ background:var(--paper-2); border-color:var(--forest); color:var(--forest); box-shadow:none; }
.on-navy .btn--line{ border-color:rgba(255,255,255,.45); color:#FFFFFF; }
.on-navy .btn--line:hover{ background:rgba(255,255,255,.1); border-color:#FFFFFF; color:#FFFFFF; }

/* the button that lives on the deep-green band */
.btn--paper{ background:#FFFFFF; border-color:#FFFFFF; color:var(--forest); }
.btn--paper:hover{ background:var(--paper-2); border-color:var(--paper-2); color:var(--forest-2); }

.lnk{
  color:var(--forest); font-weight:600; text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:3px;
  transition:color .18s var(--sta);
}
.lnk:hover{ color:var(--forest-2); }
/* Thimble's text link: underlined, and the arrow says it goes somewhere */
.lnk--go{ display:inline-flex; align-items:center; gap:.45em; }
.lnk--go::after{ content:'\2192'; text-decoration:none; transition:transform .18s var(--in); }
.lnk--go:hover::after{ transform:translateX(3px); }
.on-navy .lnk{ color:#FFFFFF; }
/* not --spring on hover: measured in Chromium, spring on --forest is 4.30:1,
   which clears AA for large text only. A link is not large text. */
.on-navy .lnk:hover{ color:#FFFFFF; text-decoration-thickness:3px; }
/* the form is a paper card even when the band behind it is green, so every
   colour inside it is re-set against paper */
.on-navy .form .lnk,
.on-navy .form__ok .lnk{ color:var(--forest); }
.on-navy .form .lnk:hover,
.on-navy .form__ok .lnk:hover{ color:var(--forest-2); }

/* ------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .25s var(--sta);
}
.hdr.is-scrolled{ box-shadow:0 10px 24px -20px rgba(0,0,0,.55); }
.js-rv .hdr{ animation:hdrIn .6s var(--in) both; }
@keyframes hdrIn{ from{ opacity:0; transform:translateY(-10px); } }
.hdr__in{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:1rem; padding-block:.7rem;
  transition:padding .22s var(--sta);
}
.hdr.is-scrolled .hdr__in{ padding-block:.45rem; }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none; min-width:0; }
.brand img{ width:44px; height:44px; object-fit:contain; flex:none; }
.brand__t{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand__n{ font-size:1.0625rem; font-weight:800; letter-spacing:-.025em; color:var(--ink); white-space:nowrap; }
.brand__s{ font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); margin-top:.12rem; white-space:nowrap; }

/* six labels plus the CTA have to live inside the same 1200px wrap the page
   uses. The padding here is the whole budget — measure .hdr__in scrollWidth,
   never the page, because the header clips its own overflow. */
.nav{ display:flex; align-items:center; margin-inline:auto; }
.nav__l{
  position:relative; white-space:nowrap; text-decoration:none;
  font-size:.9375rem; font-weight:500; letter-spacing:-.005em; color:var(--ink-2);
  padding:.55rem .55rem; border-radius:var(--r);
  transition:color .18s var(--sta);
}
.nav__l::after{
  content:''; position:absolute; left:.55rem; right:.55rem; bottom:.15rem; height:2px;
  background:var(--forest); transform:scaleX(0); transform-origin:left center;
  transition:transform .22s var(--in);
}
.nav__l:hover{ color:var(--ink); }
.nav__l:hover::after,.nav__l.is-here::after{ transform:scaleX(1); }
.nav__l.is-here{ color:var(--forest); font-weight:600; }

.hdr__acts{ display:flex; align-items:center; gap:.5rem; flex:none; }
.burger{
  display:none; width:44px; height:44px; padding:0; place-items:center; cursor:pointer;
  border:1px solid var(--rule); border-radius:var(--r); background:transparent;
}
.burger span{ display:block; width:18px; height:2px; background:var(--ink); margin:3px auto; transition:transform .24s var(--in), opacity .18s var(--sta); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* `hidden` is only display:none at the UA layer, so the class below would beat
   it. Every element that ships hidden gets its own [hidden] rule in this file. */
.mnav[hidden]{ display:none !important; }
.mnav{ display:none; flex-direction:column; padding:.2rem 1.25rem 1rem; background:var(--paper); border-top:1px solid var(--rule); }
.mnav:not([hidden]){ animation:mnavIn .24s var(--in); }
@keyframes mnavIn{ from{ opacity:0; transform:translateY(-8px); } }
.mnav a{ display:flex; align-items:center; min-height:48px; padding:.55rem .1rem; text-decoration:none; font-size:1.0625rem; font-weight:600; border-bottom:1px solid var(--rule); }
.mnav a:last-child{ border-bottom:0; }

.sprog{ position:fixed; left:0; top:0; z-index:200; height:3px; width:100%; background:var(--forest); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }

/* ------------------------------------------------------------- sections */
.sec{ padding-block:var(--sec-y); }
/* a page header already gave the eye its break; the section under it does not
   need a second full one */
.phead + .sec{ padding-top:clamp(2.75rem,5.5vw,4.5rem); }
.sec--tint{ background:var(--paper-2); }
/* the deep-green band. On the home page it is only the stats strip; the inner
   pages each close on one of these. */
.sec--navy{ background:var(--forest); color:#FFFFFF; }
.sec--rule{ border-top:1px solid var(--rule); padding-block:clamp(3rem,6vw,5rem); }
/* .sec--quote is layout only: the ground under it is --paper-2 on the home
   page and --forest on /quote/, so it must not paint one itself */
.sec--quote{ }

.sec__head{ text-align:center; max-width:52rem; margin:0 auto clamp(2rem,4vw,3.25rem); }
.sec__h{ font-size:clamp(1.875rem,4.2vw,3rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
.sec--navy .sec__h,.on-navy .sec__h{ color:#FFFFFF; }
/* the generator adds this class whenever a heading carries a lede. Centred,
   there is nothing to split off to the side; the block just gets the extra
   width a two-line paragraph needs under a two-line heading. */
.sec__head--split{ max-width:56rem; }
.sec__lead{ margin-top:1rem; font-size:1.0625rem; line-height:1.7; color:var(--ink-2); text-wrap:pretty; max-width:58ch; margin-inline:auto; }
.sec--navy .sec__lead,.on-navy .sec__lead{ color:rgba(255,255,255,.86); }
.sec__act{ text-align:center; margin-top:2rem; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.sec__note{ margin:2rem auto 0; text-align:center; color:var(--ink-2); font-size:1rem; line-height:1.7; max-width:66ch; }
.sec--navy .sec__note,.on-navy .sec__note{ color:rgba(255,255,255,.86); }

/* the small uppercase label above a heading. Its mark is a spring square:
   decoration, never a carrier of meaning. */
.kick{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.85rem;
}
.kick > span{ width:.4rem; height:.4rem; background:var(--spring); border-radius:1px; flex:none; }
.on-navy .kick,.sec--navy .kick{ color:rgba(255,255,255,.86); }

/* one word of a heading, picked out. Same weight, --forest for the colour,
   because green TEXT on paper is always --forest. */
.hl{ color:var(--forest); font-weight:inherit; font-style:normal; }
.on-navy .hl,.sec--navy .hl{ color:#FFFFFF; }
.sec__h em,.phead__h em,.hero__h em{ font-style:normal; font-weight:inherit; color:var(--forest); }
.sec--navy .sec__h em,.on-navy .sec__h em{ color:#FFFFFF; }

/* ------------------------------------------------------------- hero
   One column, centred, white. All of the weight is in the headline. */
.hero{ position:relative; overflow:hidden; background:var(--paper); padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5rem); }
.hero::before,.hero::after{
  content:''; position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:min(56vw,760px); height:min(56vw,760px); top:-28%; left:-14%;
  background:radial-gradient(closest-side, rgba(62,193,255,.17), rgba(62,193,255,0));
  animation:glowA 18s ease-in-out infinite alternate;
}
.hero::after{ width:min(44vw,600px); height:min(44vw,600px); top:14%; left:auto; right:-16%; animation:glowB 22s ease-in-out infinite alternate; }
@keyframes glowA{ to{ transform:translate(9vw,6vh) scale(1.08); } }
@keyframes glowB{ to{ transform:translate(-7vw,-8vh) scale(1.12); } }
.hero__in{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.js-rv .hero__h,.js-rv .hero__lede,.js-rv .trust{ animation:heroIn .8s var(--in) both; }
.js-rv .hero__lede{ animation-delay:.12s; }
.js-rv .trust{ animation-delay:.22s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px); } }
.hero__h{
  font-size:clamp(2.375rem,6.2vw,4.5rem); font-weight:800; line-height:1.05; letter-spacing:-.04em;
  text-wrap:balance; max-width:19ch;
}
.hero__lede{ margin-top:1.35rem; max-width:52ch; font-size:clamp(1.0625rem,1.7vw,1.25rem); line-height:1.65; color:var(--ink-2); text-wrap:balance; }

/* Four short credentials. They are split into two centred rows in the markup
   rather than left to wrap: a wrapped flex row put the fourth credential on a
   line of its own and left it carrying the hairline that should divide it from
   a credential to its left, so the row ended on a rule pointing at nothing.
   Two authored rows can never orphan, and each row centres on its own. */
.trust{ margin-top:clamp(2.25rem,4.5vw,3rem); display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.trust__r{ display:flex; justify-content:center; align-items:center; }
.trust__r li{
  display:inline-flex; align-items:center; gap:.45rem;
  padding-inline:clamp(.7rem,1.6vw,1.3rem); border-left:1px solid var(--rule);
  font-size:.9375rem; font-weight:500; line-height:1.5; color:var(--ink-2);
}
.trust__r li:first-child{ border-left:0; }

/* ------------------------------------------------------------- stats band
   The one full-bleed colour moment on the home page. */
.band{ background:var(--forest); color:#FFFFFF; padding-block:clamp(3rem,6vw,4.5rem); }
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.5rem); }
.stats .stat{ display:grid; gap:.45rem; justify-items:center; text-align:center; }
.band .stat__n{
  font-size:clamp(2.25rem,5vw,3.5rem); font-weight:800; line-height:1; letter-spacing:-.04em;
  color:#FFFFFF; font-variant-numeric:tabular-nums;
}
.stats .stat__k{
  font-size:.8125rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.5; color:#FFFFFF; max-width:22ch;
}

/* ------------------------------------------------------------- inner page head */
.phead{ padding-block:clamp(3.25rem,6.5vw,5rem); border-bottom:1px solid var(--rule); text-align:center; }
.phead__in{ width:min(100% - 2.5rem, 52rem); margin-inline:auto; }
.phead__h{ font-size:clamp(2.125rem,5.2vw,3.5rem); font-weight:800; line-height:1.06; letter-spacing:-.035em; text-wrap:balance; }
.phead__p{ margin-top:1.15rem; color:var(--ink-2); font-size:1.0625rem; line-height:1.7; max-width:60ch; margin-inline:auto; text-wrap:pretty; }
.phead__by{ margin-top:1.3rem; font-size:.9375rem; color:var(--ink-2); }
.phead__by b{ color:var(--forest); font-weight:700; }

/* ------------------------------------------------------------- cards
   Thimble's three-up service grid. A fourth card centres itself under the
   first row rather than sitting in a third of an empty one. */
/* Four lines of business, so a three-column grid orphans the fourth in the
   middle of an empty row. Two by two, capped so the cards do not stretch to
   600px with three lines of text in them. */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); max-width:72rem; margin-inline:auto; }
.card{
  display:flex; flex-direction:column; gap:.7rem; min-width:0;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(1.5rem,2.6vw,2.1rem);
  transition:border-color .2s var(--sta), transform .2s var(--sta), box-shadow .2s var(--sta);
}
.card:hover{ border-color:var(--forest); }
.card__t{ font-size:1.25rem; font-weight:700; line-height:1.25; letter-spacing:-.025em; }
.card__d{ color:var(--ink-2); font-size:1.0625rem; line-height:1.65; flex:1; }
.card .lnk--go{ align-self:flex-start; margin-top:.4rem; }

/* ------------------------------------------------------------- already a client */
.alr{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.6rem,4vw,3.5rem); align-items:center; }
.alr__h{ font-size:clamp(1.625rem,3.2vw,2.25rem); font-weight:800; line-height:1.12; letter-spacing:-.03em; }
.alr__p{ margin-top:.85rem; max-width:44ch; color:var(--ink-2); font-size:1rem; line-height:1.7; }
.alr__g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.alr__l{
  display:grid; gap:.5rem; align-content:start; min-width:0;
  padding:1.1rem 1.2rem; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r); background:var(--paper);
  transition:border-color .18s var(--sta), transform .18s var(--sta), box-shadow .18s var(--sta);
}
.alr__l:hover{ border-color:var(--forest); }
.alr__t{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; font-size:1.0625rem; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.alr__t > span{ flex:none; color:var(--forest); transition:transform .18s var(--in); }
.alr__l:hover .alr__t > span{ transform:translateX(3px); }

/* ------------------------------------------------------------- partners block */
.pgrid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.6rem,4vw,3.5rem); align-items:start; }
/* the heading in this block is ranged left, so its centred defaults come off */
.pgrid .kick{ justify-content:flex-start; }
.pgrid .sec__h{ text-align:left; }
.pgrid__p{ margin:1.15rem 0 1.6rem; max-width:40ch; color:var(--ink-2); font-size:1rem; line-height:1.7; }

/* ------------------------------------------------------------- register cells */
.decl{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.decl__c{
  padding:1.25rem 1.35rem; min-width:0; overflow-wrap:anywhere;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  transition:border-color .2s var(--sta);
}
.decl__c:hover{ border-color:var(--forest); }
.decl__k{ font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.decl__v{ margin-top:.4rem; font-size:1.0625rem; font-weight:600; line-height:1.5; letter-spacing:-.015em; color:var(--ink); }
.decl__v a{ text-decoration:none; color:var(--forest); }
.decl__v a:hover{ text-decoration:underline; text-underline-offset:3px; }
.decl__v--p{ font-size:1rem; font-weight:400; letter-spacing:0; color:var(--ink-2); line-height:1.65; margin-top:.35rem; }
.decl__h{ font-size:1.125rem; font-weight:700; line-height:1.3; letter-spacing:-.02em; margin-bottom:.5rem; }
.decl__c > .ico{ margin-bottom:1rem; }
.decl__c--ico{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; align-items:center; }
/* the contact register: with a disc in each cell, three across squeezes the
   website address into a mid-word break, so it is two across, on the card measure */
.decl--contact{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:58rem; margin-inline:auto; }
.decl__c--ico > .ico{ margin-bottom:0; }
/* the numbered variant is open: no boxes, just a hairline over each cell */
.decl--num{ gap:0 clamp(1rem,2.4vw,2rem); }
.decl--num .decl__c{ border:0; border-top:2px solid var(--rule); border-radius:0; background:transparent; padding:1.15rem 0 1.5rem; }
.decl--num .decl__c:hover{ border-color:var(--forest); }
.decl--num .decl__h{ font-size:1.0625rem; }
/* on the green band the cells keep their shape but change their hairlines */
.sec--navy .decl__c,.on-navy .decl__c{ background:transparent; border-color:rgba(255,255,255,.3); }
.sec--navy .decl__c:hover,.on-navy .decl__c:hover{ border-color:#FFFFFF; }
.sec--navy .decl__k,.on-navy .decl__k{ color:rgba(255,255,255,.86); }
.sec--navy .decl__v,.on-navy .decl__v,
.sec--navy .decl__h,.on-navy .decl__h{ color:#FFFFFF; }
.sec--navy .decl__v--p,.on-navy .decl__v--p{ color:rgba(255,255,255,.86); }

/* ------------------------------------------------------------- why */
.why{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,4.5vw,4rem); align-items:start; }
.why__facts .stat{ display:flex; align-items:baseline; gap:1rem; padding-bottom:1.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--rule); }
.why__facts .stat__n{ font-size:clamp(3rem,7vw,4.5rem); font-weight:800; line-height:.95; letter-spacing:-.05em; color:var(--forest); font-variant-numeric:tabular-nums; transform:translateY(.45em); }
.why__facts .stat__n sup{ font-size:.4em; vertical-align:top; position:relative; top:.4em; font-weight:700; }
.stat__l{ font-size:1rem; line-height:1.5; color:var(--ink-2); max-width:26ch; }
.facts li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--rule); }
.facts li > div{ display:grid; gap:.2rem; min-width:0; }
.facts li:last-child{ border-bottom:0; }
.facts b{ font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); }
.facts span{ font-size:1.0625rem; font-weight:500; line-height:1.6; color:var(--ink); }
.why__t{ font-size:1.0625rem; line-height:1.78; color:var(--ink-2); }
.why__t p + p{ margin-top:1.1rem; }
.why__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; padding-top:1.8rem; border-top:1px solid var(--rule); }

/* ------------------------------------------------------------- testimonial
   A big spring quote mark over a large centred quote. The mark is a decorative
   glyph, which is the one place spring is allowed to sit on a light ground. */
.plate{ max-width:52rem; margin-inline:auto; text-align:center; }
/* the corner ticks belonged to the other concept */
.plate__c{ display:none; }
.tst{ margin:0; }
.tst__l{ font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:1.25rem; }
.tst__q{
  margin:0 auto; max-width:28ch;
  font-size:clamp(1.5rem,3.3vw,2.375rem); font-weight:700; line-height:1.32; letter-spacing:-.03em;
  color:var(--ink); text-wrap:balance;
}
.tst__q::before{
  content:'\201C'; display:block; margin:0 auto .35rem;
  font-size:clamp(3.5rem,7vw,5.5rem); font-weight:800; line-height:.72;
  color:var(--spring);
}
.js-rv .tst.rv .tst__q::before{ opacity:0; transform:translateY(10px); transition:opacity .6s var(--sta) .25s, transform .6s var(--in) .25s; }
.js-rv .tst.rv.in .tst__q::before{ opacity:1; transform:none; }
.tst__w{ margin-top:1.5rem; font-size:1rem; font-weight:600; color:var(--ink-2); }
/* every quote sits in the same cell, so the box is as tall as the longest and nothing jumps */
.tsts{ display:grid; }
.tsts > .tst{ grid-area:1/1; align-self:center; transition:opacity .6s var(--sta), transform .6s var(--in), visibility 0s .6s; }
.tsts > .tst:not(.is-on){ opacity:0; visibility:hidden; transform:translateY(8px); }
.tsts > .tst.is-on{ transition-delay:0s; }
.tsts[data-rotate] .tst__q{ max-width:34ch; font-size:clamp(1.25rem,2.6vw,1.875rem); }
.tsts__nav{ display:flex; justify-content:center; align-items:center; gap:.25rem; margin-top:1.75rem; }
.tsts__nav[hidden]{ display:none; }
.tsts__pp,.tsts__dot{ display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; border-radius:50%; }
.tsts__pp svg{ width:20px; height:20px; fill:none; stroke:var(--forest); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.tsts__pp .i-play,.tsts__pp[aria-pressed="true"] .i-pause{ display:none; }
.tsts__pp[aria-pressed="true"] .i-play{ display:inline; fill:var(--forest); }
.tsts__dot::before{ content:''; width:10px; height:10px; border-radius:50%; border:2px solid var(--ink-2); transition:background-color .3s, border-color .3s, transform .3s; }
.tsts__dot[aria-current="true"]::before{ background:var(--forest); border-color:var(--forest); transform:scale(1.2); }
.tsts__pp:focus-visible,.tsts__dot:focus-visible{ outline:2px solid var(--forest); outline-offset:-2px; }

/* ------------------------------------------------------------- team */
.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:clamp(1.75rem,3.4vw,2.8rem); align-items:start; }
.team__m{ display:grid; gap:1.1rem; align-content:start; min-width:0; }
/* one member should read as a principal, not as a third of an empty row */
.team__m:only-child{
  grid-template-columns:minmax(0,clamp(13rem,24vw,19rem)) minmax(0,42rem);
  gap:clamp(1.6rem,3.8vw,3.4rem); align-items:center; justify-content:center;
}
.team__ph{ overflow:hidden; border-radius:var(--r); }
.team__ph img{ width:100%; aspect-ratio:5/6; object-fit:cover; object-position:center 15%; border-radius:var(--r); }
.js-rv .rv .team__ph img{ transform:scale(1.06); transition:transform 1.2s var(--in); }
.js-rv .rv.in .team__ph img{ transform:none; }
/* a member whose headshot has not arrived: initials on the accent, in the
   darkest green, which is 11:1 on it */
.team__ph--mono > span{
  display:grid; place-items:center; width:100%; aspect-ratio:5/6; border-radius:var(--r);
  background:var(--spring); color:var(--forest-2);
  font-size:clamp(2.25rem,5vw,3.25rem); font-weight:800; letter-spacing:-.02em; line-height:1;
}
.team__x{ min-width:0; }
.team__n{ font-size:clamp(1.25rem,2.2vw,1.625rem); font-weight:800; line-height:1.2; letter-spacing:-.03em; }
.team__r{ margin-top:.4rem; font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--forest); }
.team__b{ margin-top:1rem; font-size:1.0625rem; line-height:1.7; color:var(--ink-2); max-width:58ch; }
.team + .team{ margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--rule); }
.team--crew{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.team--crew .team__n{ font-size:1.25rem; }

/* ------------------------------------------------------------- memberships */
.mships{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:1rem 1.5rem; margin-top:2rem; }
.mship{ display:flex; align-items:center; gap:1rem; min-width:0; min-height:4rem; }
.mship img{ height:56px; width:auto; padding:.35rem .55rem; background:#FFFFFF; border:1px solid var(--rule); border-radius:var(--r); flex:none; }
.mship span{ font-size:1rem; line-height:1.5; color:var(--ink-2); }
/* that association has no mark yet, so a green rule stands in for the badge */
.mship--t{ padding-left:1.1rem; border-left:3px solid var(--forest); }

/* ------------------------------------------------------------- services page */
.line{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1rem,3vw,2.5rem); align-items:start; max-width:60rem; margin-inline:auto; }
/* aria-hidden in the markup, so WCAG would exempt it, but a 4rem numeral at
   1.8:1 is the biggest thing in the block and a low-vision reader would barely
   see it. Deep green instead: the exemption is not a reason to ship it pale. */
.line__side{ display:grid; justify-items:center; gap:.6rem; }
.line__n{ font-size:1rem; font-weight:800; line-height:1; letter-spacing:.08em; color:var(--forest); font-variant-numeric:tabular-nums; }
.line .sec__h{ text-align:left; }
.line__d{ margin-top:.85rem; font-size:1.125rem; font-weight:600; line-height:1.6; color:var(--ink); max-width:60ch; letter-spacing:-.015em; }
.line__p{ margin-top:.8rem; font-size:1.0625rem; line-height:1.72; color:var(--ink-2); max-width:66ch; }
.line__act{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.7rem; }

/* ------------------------------------------------------------- policyholder rows */
.rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.row{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5rem 1rem; align-content:start;
  padding:clamp(1.4rem,2.4vw,1.9rem); text-decoration:none; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  transition:border-color .2s var(--sta), transform .2s var(--sta), box-shadow .2s var(--sta);
}
.row:hover{ border-color:var(--forest); }
.row > .ico{ grid-row:1 / span 3; align-self:start; }
.row__t{ font-size:1.25rem; font-weight:700; line-height:1.25; letter-spacing:-.025em; }
.row__d{ grid-column:2; font-size:1rem; line-height:1.65; color:var(--ink-2); }
.row__cta{ grid-column:2; display:inline-flex; align-items:center; gap:.5rem; margin-top:.35rem; font-size:.9375rem; font-weight:600; color:var(--forest); }
.row__go{ display:inline-block; transition:transform .2s var(--in); }
.row:hover .row__go{ transform:translateX(4px); }

/* ------------------------------------------------------------- partner links
   The URL is the product here, so the URL is the biggest thing in the card. */
.lnks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.lnks__c{
  display:grid; gap:.3rem; align-content:start; min-width:0;
  padding:1.35rem 1.4rem; text-decoration:none;
  border:1px solid rgba(255,255,255,.32); border-radius:var(--r);
  transition:border-color .2s var(--sta), transform .2s var(--sta);
}
.lnks__c:hover{ border-color:#FFFFFF; }
/* on --forest, spring is ~5:1, so it can carry text here and only here */
.lnks__u{ font-family:var(--mono); font-size:.9375rem; line-height:1.5; overflow-wrap:anywhere; }
/* spring is the link colour here only because .lnks lives on the deep-green
   band. The selector has to say so, or the contrast guard cannot tell this
   apart from spring on white. */
/* spring on --forest measures 4.30:1, which clears AA for large text and
   fails it for 15px body. This URL is body size, so it is white. */
.on-navy .lnks__u{ color:#FFFFFF; }
.lnks__c:hover .lnks__u{ text-decoration:underline; text-underline-offset:3px; }
.lnks__n{ margin-top:.5rem; font-size:1.125rem; font-weight:700; letter-spacing:-.02em; color:#FFFFFF; }
.lnks__r{ font-size:.9375rem; color:rgba(255,255,255,.86); }

/* ------------------------------------------------------------- service areas */
.area{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.area__c{
  padding:clamp(1.4rem,2.4vw,1.9rem); min-width:0;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  transition:border-color .2s var(--sta);
}
.area__c:hover{ border-color:var(--forest); }
.area__c > .ico{ margin-bottom:.9rem; }
.area__n{ font-size:1.25rem; font-weight:700; line-height:1.25; letter-spacing:-.025em; }
.area__d{ margin-top:.6rem; font-size:1.0625rem; line-height:1.65; color:var(--ink-2); }

/* ------------------------------------------------------------- policy page */
.pol{ max-width:70ch; margin-inline:auto; }
.pol h2{ font-size:clamp(1.5rem,3vw,1.875rem); font-weight:800; letter-spacing:-.03em; margin:2.75rem 0 1rem; line-height:1.2; text-align:center; }
.pol h3{ font-size:1.125rem; font-weight:700; letter-spacing:-.02em; margin:1.7rem 0 .5rem; }
.pol p{ color:var(--ink-2); font-size:1.0625rem; line-height:1.75; margin:.5rem 0; max-width:62ch; }
.pol ul{ list-style:disc; padding-left:1.4rem; }
.pol li{ color:var(--ink-2); font-size:1.0625rem; line-height:1.7; margin:.3rem 0; max-width:60ch; }

/* ------------------------------------------------------------- redesign notes */
.find{ display:grid; gap:1rem; max-width:54rem; margin-inline:auto; }
.fi{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:1.4rem 1.5rem; }
/* the findings worth arguing about get the accent rule and the faint ground */
.fi--hot{ border-left:3px solid var(--forest); background:var(--paper-2); }
.fi__n{ font-size:1.125rem; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.fi--hot .fi__n{ color:var(--forest); }
.fi__d{ margin-top:.6rem; font-size:1.0625rem; line-height:1.72; color:var(--ink-2); max-width:64ch; }
.fi__e{ margin-top:.65rem; font-family:var(--mono); font-size:.875rem; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere; }

/* a plain note strip: says what a page is without pretending to be content */
.note{ padding:1.1rem 1.3rem; background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r); color:var(--ink-2); font-size:1rem; line-height:1.65; text-align:center; }

/* ------------------------------------------------------------- quote aside
   Light ground by default (the home page), re-coloured inside .on-navy for
   the green band on /quote/. */
.qgrid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.75rem,4vw,3.25rem); align-items:start; }
.qside{ position:sticky; top:6.5rem; }
.qside .kick{ justify-content:flex-start; }
.qside .sec__h{ text-align:left; font-size:clamp(1.75rem,3.4vw,2.5rem); }
.qside__i{ margin-top:1rem; font-size:1.0625rem; line-height:1.7; color:var(--ink-2); max-width:40ch; }
.qside__l{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--rule); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
/* on /quote/ this label opens the column, and a rule above the first line of a
   column reads as a stray mark rather than as a separator */
.qside > .qside__l:first-child{ margin-top:0; padding-top:0; border-top:0; }
.qside__p{ display:inline-block; margin-top:.45rem; font-size:clamp(1.75rem,3.6vw,2.375rem); font-weight:800; letter-spacing:-.035em; line-height:1.2; color:var(--forest); text-decoration:none; transition:color .18s var(--sta); }
.qside__p:hover{ color:var(--forest-2); text-decoration:underline; text-underline-offset:4px; }
.qside__h{ margin-top:2.4rem; font-size:1.125rem; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.qside__d{ margin:1rem 0 0; }
.qside__d > div{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; align-items:start; padding:.9rem 0; border-top:1px solid var(--rule); }
.qside__d > div > .ico{ margin-top:.1rem; }
.qside__d dt{ font-size:.9375rem; font-weight:700; color:var(--ink); }
.qside__d dd{ margin:.25rem 0 0; font-size:1rem; line-height:1.6; color:var(--ink-2); max-width:50ch; }
.on-navy .qside__i{ color:rgba(255,255,255,.86); }
.on-navy .qside__l{ color:rgba(255,255,255,.86); border-top-color:rgba(255,255,255,.3); }
.on-navy .qside__p{ color:#FFFFFF; }
.on-navy .qside__p:hover{ color:#FFFFFF; }
.on-navy .qside__h{ color:#FFFFFF; }
.on-navy .qside__d > div{ border-top-color:rgba(255,255,255,.3); }
.on-navy .qside__d dt{ color:#FFFFFF; }
.on-navy .qside__d dd{ color:rgba(255,255,255,.86); }

/* ------------------------------------------------------------- forms
   .form is deliberately given no `display`: .form__ok carries both classes
   and ships with the hidden attribute, and any display here would beat it. */
.form{
  position:relative; background:var(--paper);
  border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.25rem);
}
.sec--tint .form,.sec--navy .form,.on-navy .form{ box-shadow:0 1px 2px rgba(0,0,0,.03), 0 24px 48px -32px rgba(10,27,69,.5); }

/* The floating label. The markup puts the label first and every control ships
   placeholder=" ", so :has() is what reads the control's state back up to the
   wrapper. Raised is the default; it drops to the value's line only while the
   field is empty and unfocused. A <select> never matches :placeholder-shown,
   so its label simply stays up, which is the behaviour we want. Where :has()
   is missing the label just stays raised, which still reads as a caption over
   a field — nothing is lost but the animation. */
.f{ position:relative; margin-bottom:1rem; min-width:0; }
.f > label{
  position:absolute; left:.9rem; top:.5rem; z-index:1; pointer-events:none;
  max-width:calc(100% - 1.8rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:1.0625rem; font-weight:500; line-height:1.3; color:var(--ink-2);
  transform:scale(.76); transform-origin:left top;
  transition:transform .16s var(--sta), color .16s var(--sta);
}
.f:has(> input:placeholder-shown:not(:focus)) > label,
.f:has(> textarea:placeholder-shown:not(:focus)) > label{ transform:translateY(.52rem) scale(1); }
.f:focus-within > label{ color:var(--forest); }
.f input,.f select,.f textarea{
  width:100%; padding:1.5rem .85rem .55rem; min-height:56px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r);
  font-size:1rem; line-height:1.45;
  transition:border-color .16s var(--sta), box-shadow .16s var(--sta);
}
.f textarea{ resize:vertical; min-height:6rem; }
.f select{ appearance:none; -webkit-appearance:none; padding-right:2.4rem; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.55rem,calc(100% - .8rem) 1.55rem;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,73,174,.16); }
.f input:not(:placeholder-shown):valid,.f select.is-set{ border-color:rgba(0,0,0,.28); }
/* Every select's own first option repeats its label word for word, so an empty
   select would print the same sentence twice: once floated, once on the value
   line. Hide the placeholder option until a real choice is made — on :invalid
   rather than on a JS class, so it behaves the same with the script off. The
   options themselves are re-coloured or the popup inherits the transparency. */
.f select:invalid{ color:transparent; }
.f select option{ color:var(--ink); }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }

.f__hint{ margin-top:.4rem; font-size:.875rem; line-height:1.55; color:var(--ink-2); max-width:66ch; }
.f__files{ margin-top:.45rem; font-size:.875rem; font-weight:600; color:var(--forest); overflow-wrap:anywhere; }
.f__files::before{ content:'Attached: '; font-weight:400; color:var(--ink-2); }
.f__files[hidden]{ display:none !important; }

/* a file input is never a floating-label field: the control has its own copy */
.f--file > label{ position:static; transform:none; max-width:none; white-space:normal; display:block; margin-bottom:.45rem; font-size:.9375rem; font-weight:600; color:var(--ink); }
.f--file input[type="file"]{ padding:.85rem .85rem; background:var(--paper-2); border-style:dashed; cursor:pointer; }
.f--file input[type="file"]::file-selector-button{
  font:inherit; font-size:.875rem; font-weight:600; margin-right:.9rem; padding:.5rem .9rem;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); color:var(--forest); cursor:pointer;
  transition:background-color .18s var(--sta), color .18s var(--sta), border-color .18s var(--sta);
}
.f--file input[type="file"]:hover::file-selector-button{ background:var(--forest); border-color:var(--forest); color:#FFFFFF; }

.fset{ border:0; padding:0; margin:0 0 1.2rem; min-width:0; }
.fset legend{ padding:0; margin-bottom:1rem; font-size:1.125rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.fset--chk legend{ font-size:1.0625rem; }
.chk{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-bottom:.5rem; }
.chk__i{
  display:flex; align-items:flex-start; gap:.65rem; min-height:44px;
  padding:.7rem .85rem; border:1px solid var(--rule); border-radius:var(--r); cursor:pointer;
  font-size:1rem; line-height:1.45;
  transition:border-color .18s var(--sta), background-color .18s var(--sta);
}
.chk__i:hover{ background:var(--paper-2); }
.chk__i:has(input:checked){ border-color:var(--forest); background:var(--paper-2); }
.chk__i input{ width:1.3rem; height:1.3rem; margin:.1rem 0 0; accent-color:var(--forest); flex:none; }

/* how far through the quote form the visitor is */
.prog{ display:grid; gap:.55rem; margin-bottom:1.7rem; }
.prog__l{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.prog__l b{ font-size:.9375rem; letter-spacing:0; color:var(--forest); font-variant-numeric:tabular-nums; }
.prog__t{ display:block; height:6px; background:var(--rule); border-radius:var(--r); overflow:hidden; }
.prog__b{ display:block; height:100%; width:0; background:var(--forest); border-radius:var(--r); transition:width .35s var(--in); }

/* the submit while the browser is posting. Never the disabled attribute: a
   disabled control is dropped from the payload being built right now. */
.btn.is-sending{ opacity:.72; cursor:progress; }
.btn.is-sending:hover{ transform:none; box-shadow:none; }

.form__ok[hidden]{ display:none !important; }
.form__ok{ text-align:center; padding:clamp(2rem,4vw,3rem) 1.25rem; }
.form__ok-t{ margin-top:1.25rem; font-size:1.375rem; font-weight:700; line-height:1.4; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.form__ok-p{ margin-top:.8rem; color:var(--ink-2); font-size:1rem; }
/* the confirmation's mark: an accent chip, the one loud thing on a white card */
.stamp{
  display:inline-block; padding:.45rem 1rem; border-radius:var(--r);
  background:var(--spring); color:var(--forest-2);
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.3;
}
.form__ok:not([hidden]) .stamp{ animation:chipIn .38s var(--in) .1s both; }
@keyframes chipIn{ from{ opacity:0; transform:translateY(-6px); } }

.form__ref[hidden]{ display:none !important; }
.form__ref{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem;
  padding:.9rem 1.1rem; border:1px solid var(--rule); border-left:3px solid var(--forest); border-radius:var(--r);
  background:var(--paper-2); font-size:1rem; line-height:1.55; color:var(--ink-2);
}
.form__ref b{ color:var(--forest); font-weight:700; }

/* the spam trap. Never display:none or visibility:hidden — bots skip both on
   purpose and filters read them as a tell. Off screen, sized to nothing. */
.hpot{ position:absolute; left:-9999px; width:1px; height:1px; padding:0; margin:0; border:0; overflow:hidden; }

/* ------------------------------------------------------------- footer */
.ftr{ background:var(--forest-2); color:#FFFFFF; padding-top:clamp(3rem,5.5vw,4.5rem); }
.ftr__in{ display:grid; gap:var(--gap); grid-template-columns:1.5fr .9fr 1.1fr 1.2fr; padding-bottom:2.5rem; }
.ftr__brand{ display:flex; align-items:center; gap:.8rem; }
.ftr__brand img{ width:52px; height:52px; flex:none; }
.ftr__n{ font-size:1.0625rem; font-weight:800; letter-spacing:-.025em; line-height:1.2; }
.ftr__s{ margin-top:.15rem; font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.ftr__d{ margin-top:1.1rem; font-size:1rem; line-height:1.7; color:rgba(255,255,255,.78); max-width:34ch; text-wrap:pretty; }
.ftr__h{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#FFFFFF; margin-bottom:.6rem; }
.ftr__l{ display:flex; align-items:center; min-height:44px; padding:.25rem 0; text-decoration:none; font-size:1rem; color:rgba(255,255,255,.85); transition:color .18s var(--sta); }
.ftr__l:hover{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.ftr__base{ border-top:1px solid rgba(255,255,255,.16); padding-block:1.2rem 1.5rem; font-size:.9375rem; color:rgba(255,255,255,.7); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; align-items:center; }

/* ------------------------------------------------------------- mobile call bar */
.callbar{ display:none; }

/* ------------------------------------------------------------- icons
   The symbols Abraham asked for. A mint disc with a --forest stroke glyph, so
   the glyph clears 7:1 on its disc. On hover the disc takes the spring fill and
   the glyph goes --forest-2, the one label colour that clears AA on spring. On
   the deep-green band the disc is a white tint and the glyph is white. */
.ico{
  display:grid; place-items:center; flex:none; width:3.25rem; height:3.25rem; border-radius:50%;
  background:var(--mint); color:var(--forest);
  transition:background-color .22s var(--sta), color .22s var(--sta), transform .3s var(--in);
}
.ico svg{ width:1.5rem; height:1.5rem; display:block; }
.ico--lg{ width:4.5rem; height:4.5rem; }
.ico--lg svg{ width:2.1rem; height:2.1rem; }
.ico--xs{ width:1.25rem; height:1.25rem; background:transparent; color:var(--forest); }
.ico--xs svg{ width:1.1rem; height:1.1rem; }
.on-navy .ico,.sec--navy .ico{ background:rgba(255,255,255,.12); color:#FFFFFF; }
/* the disc lands a beat after its card */
.js-rv .rv .ico{ opacity:0; transform:scale(.6); }
.js-rv .rv.in .ico{ opacity:1; transform:none; transition:opacity .5s var(--in) .18s, transform .55s var(--in) .18s, background-color .22s var(--sta), color .22s var(--sta); }

/* ------------------------------------------------------------- reveal + motion */
.rv{ opacity:1; transform:none; }
.js-rv .rv{ opacity:0; transform:translateY(14px); }
.js-rv .rv.in{ opacity:1; transform:none; transition:opacity .6s var(--in), transform .6s var(--in); transition-delay:calc(var(--i,0) * 70ms); }

/* a list whose children come in one after another. The host is observed by
   app.js like a reveal, but the fade is on the children, each delayed by its
   own index. Never on the same element as .rv: that fades everything twice. */
.js-rv .stg > *{ opacity:0; transform:translateY(12px); }
.js-rv .stg.in > *{ opacity:1; transform:none; transition:opacity .55s var(--in), transform .55s var(--in); transition-delay:calc(var(--k,0) * 70ms); }
.stg > :nth-child(2){ --k:1; } .stg > :nth-child(3){ --k:2; } .stg > :nth-child(4){ --k:3; }
.stg > :nth-child(5){ --k:4; } .stg > :nth-child(6){ --k:5; } .stg > :nth-child(7){ --k:6; } .stg > :nth-child(8){ --k:7; }

/* lifts and disc swaps only where a pointer can hover. On a phone a :hover
   sticks after the tap, so the card stays raised until the next touch. */
@media (hover:hover){
  .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -16px rgba(10,27,69,.9); }
  .btn.is-sending:hover{ transform:none; box-shadow:none; }
  /* .js-rv .rv.in sets transform:none at (0,3,0), so a revealed card needs the
     longer selector or the lift never wins. It never did before this block. */
  .card:hover,.js-rv .rv.card.in:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -26px rgba(10,27,69,.8); }
  .alr__l:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -24px rgba(10,27,69,.8); }
  .row:hover,.js-rv .rv.row.in:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -26px rgba(10,27,69,.8); }
  .lnks__c:hover{ transform:translateY(-2px); }
  .card:hover .ico,.alr__l:hover .ico,.row:hover .ico,.decl__c:hover .ico,.area__c:hover .ico,.line:hover .ico{
    background:var(--spring); color:var(--forest-2); transform:scale(1.06);
  }
}

@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .2s var(--sta) both; }
::view-transition-new(root){ animation:vtIn .3s var(--in) both; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(8px); } }
@keyframes barUp{ from{ transform:translateY(100%); } }

/* ------------------------------------------------------------- responsive */
@media (max-width:1120px){
  .ftr__in{ grid-template-columns:1fr 1fr; }
}
/* Measured in Chromium with Plus Jakarta Sans loaded, seven nav items: the row
   is 1160px, so it fits from a 1200px viewport up. The breakpoint sits at 1260
   to leave ~60px for a fallback face, which measures wider. Re-measure
   .hdr__in scrollWidth after any nav or type change here — the page-level
   overflow check never sees the header, because it pushes the document. */
@media (max-width:1260px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .mnav{ display:flex; }
}
/* Below this the second credential row no longer fits on one line, and a row
   that wraps brings the orphaned hairline back. Stack all four instead. */
@media (max-width:1000px){
  .trust{ align-items:stretch; width:100%; gap:0; }
  .trust__r{ flex-direction:column; }
  .trust__r li{ justify-content:center; border-left:0; border-top:1px solid var(--rule); padding:.65rem 0; }
  .trust__r:first-child li:first-child{ border-top:0; }

  .why,.qgrid,.alr,.pgrid{ grid-template-columns:1fr; }
  .qside{ position:static; }
  .pgrid .sec__h,.qside .sec__h{ text-align:left; }
  .lnks{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .decl{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .decl__c:last-child:nth-child(odd){ grid-column:1/-1; }
  .alr__g{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rows,.area{ grid-template-columns:1fr; }
  .team__m:only-child{ grid-template-columns:1fr; align-items:start; }
  .team__m:only-child .team__ph{ max-width:22rem; }
  .cards,.team--crew{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chk{ grid-template-columns:1fr; }
  .alr__g{ grid-template-columns:1fr; }
  .decl--num{ gap:0; }
}
@media (max-width:620px){
  body{ font-size:1rem; padding-bottom:calc(3.4rem + env(safe-area-inset-bottom)); }
  html{ scroll-padding-top:88px; }

  /* Standalone actions need a 44px target on a phone. These are not links in
     prose: the arrow links stand next to a button, the phone number IS the
     aside, and the register cells hold tel: and mailto:. The negative margin on
     the register keeps the taller hit area from re-spacing its cell. */
  .lnk--go{ min-height:44px; }
  .qside__p{ padding-block:.35rem; }
  .decl__v a{ display:inline-block; padding-block:.6rem; margin-block:-.6rem; }
  .brand{ min-height:44px; }
  .form__ok-p .lnk{ display:inline-flex; align-items:center; min-height:44px; }
  .brand img{ width:40px; height:40px; }
  /* the brand has to be able to give ground on a 320px screen, so it stops
     being flex:none and its name truncates instead of pushing the page wide */
  .brand{ gap:.5rem; flex:0 1 auto; min-width:0; }
  .brand__n{ font-size:1rem; overflow:hidden; text-overflow:ellipsis; }
  .brand__s{ display:none; }
  .hdr__in{ gap:.6rem; min-width:0; }
  /* the quote CTA is the first item in the burger menu and the call bar is
     pinned to the bottom of every phone screen, so the header keeps neither */
  .hdr__acts .btn{ display:none; }

  .cards,.team--crew,.lnks,.decl,.decl--contact,.f2,.ftr__in{ grid-template-columns:1fr; }
  /* the disc stacks over the value: beside it, the email and the URL break mid-word */
  .decl__c--ico{ grid-template-columns:1fr; gap:.7rem; }
  .decl__c--ico .decl__v{ font-size:1rem; }
  .stats{ grid-template-columns:1fr; gap:1.6rem; }
  .line{ grid-template-columns:1fr; }
  .line__n{ font-size:2.25rem; }
  /* the credentials stack, and the hairlines turn ninety degrees with them */
  .form .btn[type="submit"],.form button.btn{ width:100%; }
  .sec__act{ flex-direction:column; align-items:stretch; }
  .sec__act .btn{ width:100%; }
  .line__act .btn,.why__cta .btn{ flex:1 1 100%; }
  .fi__e{ overflow-wrap:anywhere; }

  /* the phone gets a permanent way to call, which is how this book of business
     actually reaches the agency */
  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    animation:barUp .5s var(--in) .5s both;
    display:flex; align-items:center; justify-content:center;
    background:var(--spring); color:var(--forest-2); text-decoration:none;
    font-size:1rem; font-weight:700; line-height:1.2;
    padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js-rv .rv{ opacity:1; transform:none; }
  .js-rv .stg > *{ opacity:1; transform:none; }
  .js-rv .rv .ico{ opacity:1; transform:none; }
  .js-rv .rv .team__ph img{ transform:none; }
  .hero::before,.hero::after{ animation:none; }
  .js-rv .tst.rv .tst__q::before{ opacity:1; transform:none; }
  .sprog{ display:none; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}