/* BRS Insurance Advisory — shared stylesheet
   Palette and arc device derived from BRSIA_goldenhour_ppt_template.pptx */

/* ---------- fonts ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --ink:#23292A;
  --slate:#515B5D;
  --graphite:#323232;
  --black:#000000;
  --orange:#F7943C;
  --rust:#A53C23;
  --rust-dark:#8E3320;
  --blush:#F7DFD9;
  --mist:#E4E7E8;
  --paper:#FFFFFF;

  --display:"Archivo",Arial,Helvetica,sans-serif;
  --body:"Source Sans 3",Arial,Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;

  --gut:clamp(20px,5vw,64px);
  /* fluid container: 1160 on a laptop, growing to 1440 on a wide monitor.
     Everything (including the hero split) measures off this, so the whole
     page scales together instead of the content sitting in a fixed ribbon. */
  /* Never wider than the window. The old 1100px floor exceeded the viewport on
     any browser under ~1220px, which made the gutter calculations overrun and
     collapsed the Claims and Contact heroes to a few words wide. */
  --maxw:min(1440px,92vw);
  --r:14px;
  --r-sm:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--rust);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:10px;z-index:100;background:#fff;padding:10px 16px;border:2px solid var(--rust)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust);
  margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--mist);max-width:120px}
h1,h2,h3{font-family:var(--display);margin:0;color:var(--ink)}
h1{font-weight:800;font-size:clamp(36px,4.7vw,66px);line-height:1.03;letter-spacing:-.022em;text-transform:uppercase}
h2{font-weight:800;font-size:clamp(27px,3.2vw,42px);line-height:1.08;letter-spacing:-.018em;text-transform:uppercase}
h3{font-weight:700;font-size:20px;line-height:1.28;letter-spacing:-.005em;margin-bottom:8px}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--slate);max-width:56ch}
p{max-width:66ch}
p+p{margin-top:16px}
strong{font-weight:600}

.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;
  padding:13px 26px;text-decoration:none;border:1.5px solid var(--rust);
  background:var(--rust);color:#fff;cursor:pointer;transition:.16s;
}
.btn:hover{background:var(--rust-dark);border-color:var(--rust-dark)}
.btn.ghost{background:transparent;color:var(--rust)}
.btn.ghost:hover{background:var(--blush);color:var(--rust-dark)}
.btn.sm{padding:10px 20px;font-size:14px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- header ---------- */
header.site{border-bottom:1px solid var(--mist);position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
/* The supplied lockup, used as one image. It carries the wordmark, so the header
   height is set by the height needed to keep "INSURANCE ADVISORY" legible — that
   subline is only about 6% of the artwork's height. */
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:62px;width:auto;display:block}
@media(max-width:900px){.brand img{height:52px}}
@media(max-width:600px){.brand img{height:42px}}
nav.main{display:flex;gap:22px;flex-wrap:nowrap}
nav.main a{font-size:14.5px;white-space:nowrap;color:var(--slate);text-decoration:none;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
/* the hamburger breakpoint is defined once, in the header block near the end of this file */

/* ---------- hero ---------- */
/* Hero sizing lives ONLY in this block. Do not add .hero-copy padding, .hero-art
   min-height or .hero .rule margins anywhere else in this file — three competing
   copies of these rules is what made every banner too deep.

   The grid is aligned to the CONTAINER, not the viewport. Column 1 is the left
   bleed, column 2 holds the copy at a fixed width, column 3 is the art and takes
   whatever is left, so it always runs to the right edge. Splitting on a viewport
   percentage (the old .96fr/1.04fr) made the join drift across the text on wide
   screens. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--mist);--hero-ground:#FFFFFF}
.hero-grid{
  display:grid;
  grid-template-columns:
    minmax(var(--gut), calc((100% - var(--maxw)) / 2))
    minmax(0, calc(var(--maxw) * .53))
    minmax(0, 1fr);
}
.hero-copy{
  grid-column:2;
  display:flex;flex-direction:column;justify-content:center;
  /* Claims and Contact have no .hero-grid — the copy sits directly in .hero, so
     there is no gutter column to sit behind and the text would run to the window
     edge. This restores the gutter for those heroes only. */
  padding:clamp(24px,2.2vw,30px) clamp(24px,2.6vw,44px) clamp(26px,2.4vw,32px) 0;
}
.hero h1 span{display:block}
.rule{width:230px;height:1px;background:var(--mist);margin:34px 0 26px}
.hero .rule{width:min(230px,60%);margin:12px 0 10px}
.hero .actions{margin-top:16px}
.hero > .hero-copy{padding-left:clamp(var(--gut),calc((100% - var(--maxw))/2 + var(--gut)),40%)}
.hero-art{grid-column:3;position:relative;overflow:hidden;background:var(--hero-ground,var(--paper));min-height:clamp(180px,16vw,220px)}
.hero-art .photo{
  position:absolute;inset:0;
  /* the photograph is set inline on this div, not via a custom property:
     url() inside var() resolves inconsistently across engines and is the
     most likely reason hero photographs failed to paint. */
  background-repeat:no-repeat;background-size:cover;background-position:center;
  /* cropped on a real curve. ry is deliberately close to the box height so the
     bow is visible; push it much past ~120% and the edge flattens to a line. */
  clip-path:ellipse(95% 105% at 100% 50%);
}
/* the twin crescents from the deck title slide, drawn in CSS so they keep their
   shape at any hero height. The old inline SVG used preserveAspectRatio="none",
   which flattened the arc into a smear as the banner got shorter. */
.hero-art::before,.hero-art::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
/* nested crescents, tapering to points at the top and bottom of the banner —
   border-right of an ellipse, so the taper is real geometry, not a drawn shape */
.hero-art::before{left:-16%;width:32%;top:0;height:100%;border-right:6px solid var(--rust)}
.hero-art::after {left:-8%; width:20%;top:6%;height:88%;border-right:4px solid var(--orange)}
.hero.compact .hero-grid{grid-template-columns:
    minmax(var(--gut), calc((100% - var(--maxw)) / 2))
    minmax(0, calc(var(--maxw) * .60))
    minmax(0, 1fr)}
.hero.compact h1{font-size:clamp(28px,2.6vw,38px)}
.hero.compact .lede{font-size:17px;max-width:56ch}
/* home: shortest of all, so the dashboard cards reach the first screen */
.hero.home h1{font-size:clamp(28px,2.6vw,38px)}
.hero.home .lede{font-size:17px;max-width:52ch}
.hero.home .hero-art{min-height:clamp(190px,17vw,240px)}
@media(max-width:900px){
  .hero-grid,.hero.compact .hero-grid{grid-template-columns:1fr}
  .hero-copy{grid-column:1;order:2;padding:34px var(--gut) 40px}
  .hero-art{grid-column:1;order:1;min-height:0;height:clamp(160px,42vw,220px);border-bottom:4px solid var(--orange)}
  .hero.home .hero-art{min-height:0}
  .hero-art .photo{clip-path:none}
  .hero-art::before,.hero-art::after{display:none}
}

/* ---------- sections ---------- */
section.band{padding:clamp(60px,7.5vw,108px) 0;border-top:1px solid var(--mist)}
section.band:first-of-type{border-top:none}
section.dark{background:var(--graphite);border-top:none}
section.ink{background:var(--black);border-top:none}
section.dark h2,section.dark h3,section.ink h2,section.ink h3{color:#fff}
section.dark .eyebrow,section.ink .eyebrow{color:var(--orange)}
section.dark .eyebrow::after,section.ink .eyebrow::after{background:rgba(255,255,255,.22)}
section.dark p,section.dark .lede,section.ink p,section.ink .lede{color:#D6DADB}
section.dark .btn.ghost,section.ink .btn.ghost{border-color:var(--orange);color:var(--orange)}
section.dark .btn.ghost:hover,section.ink .btn.ghost:hover{background:var(--orange);color:var(--graphite)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:start}
.two.lead{grid-template-columns:.85fr 1.15fr}
@media(max-width:860px){.two,.two.lead{grid-template-columns:1fr}}

.cols{display:grid;gap:34px;margin-top:52px}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.cols.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.cols.c3,.cols.c2{grid-template-columns:1fr;gap:28px}}
.item{border-top:2px solid var(--orange);padding-top:20px}
.item .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--slate);display:block;margin-bottom:10px;text-transform:uppercase}
section.dark .item .n,section.ink .item .n{color:#9AA1A2}
.item p{font-size:16px;color:var(--slate);margin:0}
section.dark .item p,section.ink .item p{color:#C3C8C9}

/* numbered steps */
ol.steps{list-style:none;margin:48px 0 0;padding:0;counter-reset:s}
ol.steps li{
  counter-increment:s;display:grid;grid-template-columns:72px 1fr;gap:24px;
  padding:26px 0;border-top:1px solid var(--mist);align-items:start;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;color:var(--rust);letter-spacing:.08em;padding-top:4px;
}
ol.steps li p{margin:0;color:var(--slate);font-size:16px}
@media(max-width:640px){ol.steps li{grid-template-columns:1fr;gap:8px}}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
@media(max-width:760px){.stats{grid-template-columns:1fr;gap:22px}}
.stat{border-top:1px solid var(--mist);padding-top:18px}
.stat .fig{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat .cap{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:12px}

/* comparison table */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:44px;border:1px solid var(--mist);border-radius:var(--r)}
table.cmp{width:100%;border-collapse:collapse;font-size:16px}
table.cmp caption{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);text-align:left;padding-bottom:14px}
table.cmp th:first-child,table.cmp td:first-child{padding-left:20px}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--mist)}
table.cmp thead th{background:var(--rust);color:#fff;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-bottom:none}
table.cmp tbody th{font-family:var(--body);font-weight:600;color:var(--ink);width:32%}
table.cmp tbody tr:nth-child(odd) td,table.cmp tbody tr:nth-child(odd) th{background:var(--blush)}
table.cmp td{color:var(--slate)}
@media(max-width:700px){table.cmp{font-size:15px;min-width:580px}table.cmp th,table.cmp td{padding:12px}}

blockquote.pull{
  margin:0;padding-left:26px;border-left:3px solid var(--orange);
  font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);
  line-height:1.3;letter-spacing:-.012em;color:var(--ink);
}
section.dark blockquote.pull,section.ink blockquote.pull{color:#fff}

.note{background:#FAFBFB;border:1px solid var(--mist);border-left:3px solid var(--orange);padding:22px 26px;margin-top:38px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.note p{font-size:15px;color:var(--slate);max-width:78ch}
.note .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:10px}

/* closing CTA */
section.cta{background:var(--blush);border-top:none;text-align:left}
section.cta .lede{color:var(--ink)}

/* ---------- footer ---------- */
footer.site{background:var(--black);color:#9AA1A2;padding:64px 0 40px;font-size:14px}
footer.site .cols-f{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
@media(max-width:820px){footer.site .cols-f{grid-template-columns:1fr;gap:30px}}
footer.site h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 14px;font-weight:500}
footer.site a{color:#D6DADB;text-decoration:none;display:block;margin-bottom:8px}
footer.site a:hover{color:var(--orange)}
footer.site address{font-style:normal;color:#9AA1A2;margin-top:14px;line-height:1.7}
.disclosure{border-top:1px solid #2A2A2A;margin-top:46px;padding-top:26px;font-family:var(--mono);font-size:11px;line-height:1.85;color:#7C8384;max-width:100ch}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- nav: mobile ---------- */
.bar-end{display:flex;align-items:center;gap:12px}
.menu-btn{
  display:none;width:42px;height:42px;padding:0;background:none;border:1px solid var(--mist);
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);transition:.18s}
.menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.is-open span:nth-child(2){opacity:0}
.menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{border-top:1px solid var(--mist);background:#fff;padding:10px 0 20px}
.mobile-nav a{
  display:block;padding:13px 0;font-size:17px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--mist);
}
.mobile-nav a:last-child{border-bottom:none;color:var(--rust)}

/* ---------- imagery ---------- */
.figure{margin:52px 0 0;position:relative}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-top:12px;
}
.band-img{position:relative;height:clamp(220px,32vw,420px);overflow:hidden;background:var(--graphite)}
.band-img img{width:100%;height:100%;object-fit:cover;display:block}
.band-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--orange)}
.split-img{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split-img .pane{padding:clamp(44px,5vw,76px) clamp(28px,4vw,60px);display:flex;flex-direction:column;justify-content:center}
.split-img .shot{background-size:cover;background-position:center;min-height:340px}
@media(max-width:860px){.split-img{grid-template-columns:1fr}.split-img .shot{min-height:220px;order:-1}}

/* ---------- forms ---------- */
.form{max-width:640px;margin-top:40px}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  padding:13px 14px;border:1px solid var(--mist);background:#fff;border-radius:var(--r-sm);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--rust);outline-offset:0;border-color:var(--rust)}
.form .hp{position:absolute;left:-9999px}
.contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:clamp(32px,6vw,80px);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-block{border-top:1px solid var(--mist);padding-top:18px;margin-bottom:28px}
.contact-block h3{font-size:17px;margin-bottom:6px}
.contact-block p,.contact-block a{font-size:16px;color:var(--slate);margin:0}
.contact-block a{display:block}

/* ---------- legal / long-form documents ---------- */
.doc{max-width:74ch}
.doc h2{font-size:clamp(21px,2.1vw,27px);margin-top:52px;margin-bottom:14px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:17px;margin-top:28px}
.doc p,.doc li{color:var(--slate)}
.doc ul{padding-left:20px}
.doc li{margin-bottom:8px}
.doc .updated{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:34px}
.todo{background:var(--blush);border-left:3px solid var(--rust);padding:16px 20px;margin:22px 0}
.todo p{color:var(--ink);font-size:15px;margin:0}
.todo strong{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:6px;color:var(--rust)}

/* ---------- hero variants ---------- */
.hero.ground-blush{background:var(--blush);--hero-ground:#F7DFD9;border-bottom:none}
.hero.ground-mist{background:#F4F6F6;--hero-ground:#F4F6F6;border-bottom:none}
.hero.ground-dark{background:var(--graphite);--hero-ground:#323232;border-bottom:none}
.hero.ground-dark h1,.hero.ground-dark h2{color:#fff}
.hero.ground-dark .lede{color:#D6DADB}
.hero.ground-dark .eyebrow{color:var(--orange)}
.hero.ground-dark .eyebrow::after{background:rgba(255,255,255,.22)}
.hero.ground-dark .rule{background:rgba(255,255,255,.25)}
.hero.ground-dark .btn.ghost{border-color:var(--orange);color:var(--orange)}
.hero.ground-dark .btn.ghost:hover{background:var(--orange);color:var(--graphite)}
.hero.ground-black{background:var(--black);--hero-ground:#000000;border-bottom:none}
.hero.ground-black h1{color:#fff}
.hero.ground-black .lede{color:#D6DADB}
.hero.ground-black .eyebrow{color:var(--orange)}
.hero.ground-black .eyebrow::after{background:rgba(255,255,255,.22)}
.hero.ground-black .rule{background:rgba(255,255,255,.25)}

/* ---------- on this page ---------- */
.pagenav{border-top:1px solid var(--mist);border-bottom:1px solid var(--mist);background:#FAFBFB}
.pagenav .wrap{padding-top:26px;padding-bottom:26px}
.pagenav .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin:0 0 18px}
.pagenav ol{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.pagenav.n3 ol{grid-template-columns:repeat(3,1fr)}
.pagenav.n5 ol{grid-template-columns:repeat(5,1fr)}
.pagenav li{border:1px solid var(--mist);border-radius:var(--r-sm);padding:14px 16px;background:#fff}
.pagenav li:hover{border-color:var(--orange)}
.pagenav a{display:block;text-decoration:none;color:var(--ink)}
.pagenav a:hover .t{color:var(--rust)}
.pagenav .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);display:block;margin-bottom:5px}
.pagenav .t{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.22;letter-spacing:-.005em;display:block}
.pagenav .g{font-size:13px;color:var(--slate);line-height:1.4;margin-top:5px;display:block}
@media(max-width:900px){
  .pagenav ol,.pagenav.n3 ol,.pagenav.n5 ol{grid-template-columns:1fr 1fr;gap:18px 20px}
  .pagenav .g{display:none}
}
@media(max-width:480px){.pagenav ol,.pagenav.n3 ol,.pagenav.n5 ol{grid-template-columns:1fr}}
[id]{scroll-margin-top:96px}

/* ---------- section grounds & dividers ---------- */
section.blush{background:var(--blush);border-top:none}
section.paper{background:#FAFBFB}
.arc-rule{height:6px;background:linear-gradient(90deg,var(--rust) 0%,var(--rust) 42%,var(--orange) 42%,var(--orange) 78%,var(--mist) 78%);border:0;margin:0}
.figure-pair{display:grid;grid-template-columns:1.15fr .85fr;gap:2px;margin-top:56px}
@media(max-width:820px){.figure-pair{grid-template-columns:1fr}}
.figure-pair .shot{background-size:cover;background-position:center;min-height:300px}
.figure-pair .cap{background:var(--graphite);color:#D6DADB;padding:clamp(30px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.figure-pair .cap h3{color:#fff}
.figure-pair .cap p{color:#C3C8C9;font-size:16px;margin-top:10px}

/* ---------- header breakpoint (defined once) ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* nine nav items, one of them 21 characters, so the row needs more room than
   the old 1180px before the hamburger takes over */
@media(max-width:1320px){nav.main{display:none}.menu-btn{display:flex}}
@media(min-width:1321px){.menu-btn{display:none}.mobile-nav{display:none}}

/* ---------- flip cards ---------- */
/* Heading, lede and the six cards share one row so the cards clear the fold.
   Below 1000px the intro stacks above the grid again. */
.dash-lead{display:grid;grid-template-columns:minmax(220px,.72fr) 2.28fr;gap:clamp(28px,3.4vw,52px);align-items:start}
.dash-intro .lede{margin-top:18px;font-size:17px}
.dash-intro h2{margin-top:2px}
.dash{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;background:none;margin-top:0}
@media(max-width:1000px){
  .dash-lead{grid-template-columns:1fr;gap:28px}
  .dash{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){.dash{grid-template-columns:1fr}}
@media(max-width:980px){.dash{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:640px){.dash{grid-template-columns:1fr;gap:14px}}

.flip{perspective:1400px;min-height:288px;position:relative}
@media(max-width:640px){.flip{min-height:250px}}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.16,.2,1)}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--mist);border-radius:var(--r);background:#fff;
  padding:28px 26px 24px;display:flex;flex-direction:column;overflow:hidden;
}
.face.back{transform:rotateY(180deg)}
.face .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);display:block;margin-bottom:14px}
.face h3{font-size:20px;line-height:1.2;margin-bottom:10px;color:var(--ink)}
.face p{font-size:15px;line-height:1.5;color:var(--slate);margin:0;flex:1}
.face .hint{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:16px;opacity:.75}
.face .hint::after{content:" \21BB"}
.face .go{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--rust);text-decoration:none;margin-top:16px;font-weight:500;position:relative;z-index:2}
.face .go:hover{text-decoration:underline}

.flip-btn{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:none;cursor:pointer;font-size:0;z-index:1}
.flip-btn:focus-visible{opacity:1;outline:2px solid var(--rust);outline-offset:-3px}

/* card colour variants */
.face.accent{background:var(--graphite);border-color:var(--graphite)}
.face.accent h3{color:#fff}
.face.accent p{color:#C3C8C9}
.face.accent .n,.face.accent .go{color:var(--orange)}
.face.accent .hint{color:#9AA1A2}
.face.warm{background:var(--blush);border-color:#EFCFC7}
.flip:hover .face{box-shadow:0 6px 22px rgba(35,41,42,.09)}

@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}

/* flip: only the visible face is interactive */
.flip .face.back{pointer-events:none}
.flip.is-flipped .face.front{pointer-events:none}
.flip.is-flipped .face.back{pointer-events:auto}
.face[inert]{pointer-events:none}

/* ---------- back to top ---------- */
/* Pages with an "On this page" nav drop the reader a long way down. This is the
   way back. Hidden until the reader is past the first screen, and hidden
   entirely for anyone who has asked for reduced motion to be respected on the
   scroll, which is handled in the behaviour rather than here. */
.to-top{
  position:fixed;right:clamp(16px,2.5vw,32px);bottom:clamp(16px,2.5vw,32px);z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;background:var(--graphite);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r-sm);border:1px solid var(--graphite);
  box-shadow:0 6px 20px rgba(35,41,42,.22);
  opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,background .16s;
  pointer-events:none;
}
.to-top[hidden]{display:none}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--rust);border-color:var(--rust)}
.to-top:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.to-top span{font-size:14px;line-height:1}
@media(max-width:600px){.to-top{padding:10px 13px}.to-top{font-size:10px}}
/* ---------- make a payment ---------- */
/* A utility, not part of the argument, so it sits apart from the nav links
   rather than becoming a tenth one. Shortens to "Pay" on small screens. */
.pay-btn{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:9px 16px;border:1px solid var(--rust);border-radius:var(--r-sm);
  color:var(--rust);text-decoration:none;font-weight:600;font-size:14px;
  transition:background .16s,color .16s;
}
.pay-btn:hover{background:var(--rust);color:#fff}
.pay-btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.pay-btn .short{display:none}
@media(max-width:1320px){.pay-btn{margin-left:auto;margin-right:16px}}
@media(max-width:620px){
  .pay-btn .long{display:none}
  .pay-btn .short{display:inline}
  .pay-btn{padding:8px 13px;font-size:13px}
}
/* ---------- licensee mark ---------- */
/* The reversed AFSL lockup, white on transparent, so it sits directly on the
   black footer with no panel behind it. Captioned so the relationship reads as
   authorisation rather than shared identity. */
.licensee{display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin-top:40px}
.licensee p{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7C8384;margin:0}
.licensee a{display:inline-block;margin:0;line-height:0;opacity:.92;transition:opacity .16s}
.licensee a:hover{opacity:1}
.licensee img{height:80px;width:auto;display:block}
@media(max-width:820px){.licensee{align-items:flex-start;margin-top:32px}}
/* ---------- partner mark ---------- */
/* The licensee's portrait lockup, sitting in the white space beside the
   Advisernet section. Navy on white, so no panel needed here — unlike the
   footer, which uses the reversed version. */
.partner-mark{width:min(190px,70%);height:auto;display:block;margin-top:38px}
@media(max-width:860px){.partner-mark{margin-top:26px;width:min(180px,50%)}}