/* ===========================================================================
   balivillacare.com — site stylesheet
   Layout/UX patterns follow the reference teardown in BRIEF.md.
   All copy is original. No third-party CSS is copied.

   Palette note: the chrome is a deep ocean teal rather than the navy used on
   the UK build, so the two sites do not read as the same template. The diagram
   tokens (--d-*) at the bottom of this file are UNCHANGED, because those
   specific values are the ones that passed the dataviz contrast validator
   against these surfaces; re-tinting them would invalidate the check.
   =========================================================================== */

:root{
  --ink:#10151c;
  --ink-2:#39424f;
  --ink-3:#5d6875;
  --line:#dfe4ea;
  --line-2:#eef1f5;
  --paper:#ffffff;
  --paper-2:#f6f8fa;
  --paper-3:#eef2f6;

  --navy:#0d3b43;           /* deep ocean teal — page chrome */
  --navy-2:#155059;
  --accent:#a8441d;         /* the deduction / warning colour */
  --accent-soft:#fdf1ea;
  --go:#0a6b4f;             /* CTA */
  --go-2:#0d8362;
  --go-soft:#eefaf5;
  --sand:#f7f3ea;           /* neutral surface for fee tables */
  --sand-line:#e4dbc7;
  --warn-bg:#fff8e6;
  --warn-line:#e8cf8a;

  --radius:6px;
  --radius-lg:10px;
  --shadow-1:0 1px 2px rgba(16,21,28,.06), 0 2px 8px rgba(16,21,28,.05);
  --shadow-2:0 4px 16px rgba(16,21,28,.10);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",Times,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --wrap:1120px;
  --measure:70ch;
  --stickyh:56px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:#0f5560;text-underline-offset:2px}
a:hover{color:#093b43}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .5em;color:var(--ink);letter-spacing:-.012em}
h1{font-size:2.15rem;font-weight:800}
h2{font-size:1.55rem;font-weight:750;margin-top:2.2em}
h3{font-size:1.16rem;font-weight:700;margin-top:1.8em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.35em}
li{margin:.3em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
small{font-size:.86rem}
code{font:.9em var(--mono);background:var(--paper-3);padding:.1em .35em;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.measure{max-width:var(--measure)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid #14808f;outline-offset:2px;border-radius:3px}

/* ---------------------------------------------------------------- sticky top
   The contact form is the ONLY channel on this site. No phone number and no
   mailto: anywhere — the endpoint comes from _authoring/siteconfig.py. */
.topbar{
  position:sticky;top:0;z-index:100;background:var(--navy);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.topbar .wrap{display:flex;align-items:center;gap:14px;min-height:var(--stickyh)}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:800;letter-spacing:-.02em;
  color:#fff;text-decoration:none;font-size:1.06rem;white-space:nowrap}
.brand span{font-weight:400;font-size:.74rem;color:#9fb3cd;letter-spacing:.06em;text-transform:uppercase}
.topnav{display:flex;gap:18px;margin-left:auto;align-items:center}
.topnav a{color:#cfdcec;text-decoration:none;font-size:.9rem;font-weight:500}
.topnav a:hover{color:#fff;text-decoration:underline}
/* Sticky-top CTA. There is no phone channel on this site — every CTA is an
   in-page anchor to the case-review form. Do not add tel: or mailto: links. */
.btn-top{
  margin-left:auto;
  background:var(--go);color:#fff;border-radius:var(--radius);padding:9px 16px;
  font-weight:730;font-size:.94rem;text-decoration:none;white-space:nowrap
}
.topnav + .btn-top{margin-left:0}
.btn-top:hover{background:var(--go-2);color:#fff}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,36,61,.96) 0%,rgba(18,36,61,.86) 46%,rgba(18,36,61,.55) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:40px;padding-bottom:44px;
  display:grid;grid-template-columns:1fr 430px;gap:40px;align-items:start}
.hero h1{color:#fff;font-size:2.5rem;margin-bottom:.35em}
.hero .sub{font-size:1.14rem;color:#d3dfee;max-width:56ch;margin-bottom:1.1em}
.hero .hook{
  background:rgba(179,52,31,.18);border-left:4px solid var(--accent);
  padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;
  font-size:1rem;color:#f3dfd9;max-width:56ch;margin-bottom:1.2em
}
.hero .hook strong{color:#fff}
.hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.hero-points li{color:#c5d4e6;font-size:.92rem;display:flex;gap:7px;align-items:flex-start}
.hero-points li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:#4f9c82;margin-top:.52em}

/* --------------------------------------------------------------- deadline */
.deadline{
  background:var(--accent-soft);border:1px solid #f0cec5;border-left:5px solid var(--accent);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 1.6em
}
.deadline .d-num{font-size:1.9rem;font-weight:800;color:var(--accent);line-height:1;display:block}
.deadline .d-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:#8c3a29;font-weight:700}
.deadline p{margin:.55em 0 0;font-size:.98rem;color:#4a2a23}
.deadline p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------- form */
.formcard{
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden
}
.formcard.inline{box-shadow:var(--shadow-1);margin:2.4em 0}
.formcard .fc-head{background:var(--paper-2);border-bottom:1px solid var(--line);padding:15px 20px 13px}
.formcard .fc-head h2,.formcard .fc-head h3,.formcard .fc-head .fc-title{
  margin:0 0 3px;font-size:1.12rem;font-weight:780;line-height:1.3}
.formcard .fc-head p{margin:0;font-size:.86rem;color:var(--ink-3)}
.formcard .fc-body{padding:18px 20px 20px}

.progress{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.progress .bar{flex:1;height:5px;background:var(--paper-3);border-radius:99px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:14.3%;background:var(--go);border-radius:99px;
  transition:width .25s ease}
.progress .pct{font-size:.74rem;color:var(--ink-3);font-weight:650;white-space:nowrap;
  font-variant-numeric:tabular-nums}

.step{display:none}
.step.is-active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.step > legend,.step .q{
  display:block;font-size:1.03rem;font-weight:700;margin:0 0 4px;padding:0;line-height:1.35}
.step .q-help{font-size:.85rem;color:var(--ink-3);margin:0 0 12px}

.choices{display:grid;gap:8px;margin:0 0 4px}
.choices.two{grid-template-columns:1fr 1fr}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:block;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font-size:.97rem;font-weight:600;cursor:pointer;background:#fff;
  transition:border-color .12s,background .12s
}
.choice span:hover{border-color:#a9bdd6;background:var(--paper-2)}
.choice input:checked + span{border-color:var(--go);background:var(--go-soft);
  box-shadow:inset 0 0 0 1px var(--go)}
.choice input:focus-visible + span{outline:3px solid #2f6fd0;outline-offset:2px}

.field{margin:0 0 12px}
.field label{display:block;font-size:.85rem;font-weight:650;margin-bottom:5px;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.97rem;padding:11px 12px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink)
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#7ea3cf;outline:none;
  box-shadow:0 0 0 3px rgba(47,111,208,.14)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

.btn{
  display:inline-block;width:100%;text-align:center;border:0;cursor:pointer;
  background:var(--go);color:#fff;font:inherit;font-weight:750;font-size:1.03rem;
  padding:14px 18px;border-radius:var(--radius);text-decoration:none;
  transition:background .12s
}
.btn:hover{background:var(--go-2)}
.btn.secondary{background:transparent;color:var(--ink-3);font-weight:600;font-size:.88rem;
  padding:9px;width:auto}
.btn.secondary:hover{background:transparent;color:var(--ink);text-decoration:underline}
.btnrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.btnrow .btn:not(.secondary){flex:1}

.assure{list-style:none;padding:0;margin:11px 0 0;display:grid;gap:4px}
.assure li{font-size:.8rem;color:var(--ink-3);display:flex;gap:6px;align-items:flex-start;margin:0}
.assure li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:#9fb1a9;margin-top:.55em}

.tcpa{
  margin:12px 0 0;padding:11px 12px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);font-size:.735rem;line-height:1.5;color:var(--ink-3)
}
.tcpa strong{color:var(--ink-2)}

.formdone{display:none;text-align:center;padding:10px 0}
.formdone.is-active{display:block}
.formdone h3{margin-top:0}
.formdone ol{text-align:left;max-width:40ch;margin:0 auto;font-size:.95rem}

/* short / repeat form */
.shortform{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;margin:2.4em 0
}
.shortform h3{margin:0 0 4px;font-size:1.08rem}
.shortform p{margin:0 0 12px;font-size:.9rem;color:var(--ink-3)}
.shortform form{display:flex;gap:8px;flex-wrap:wrap}
.shortform input{flex:1 1 170px;font:inherit;font-size:.97rem;padding:12px;border:1.5px solid var(--line);
  border-radius:var(--radius)}
.shortform .btn{width:auto;flex:0 0 auto;padding:12px 20px}

/* ---------------------------------------------------------------- content */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;
  padding-top:34px;padding-bottom:20px;align-items:start}
.sidebar{position:sticky;top:calc(var(--stickyh) + 18px)}
main :is(h2,h3){scroll-margin-top:76px}

.crumbs{font-size:.82rem;color:var(--ink-3);padding:12px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs li::after{content:"›";margin-left:6px;color:#aab4c0}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3)}

.trust-stack{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin:0 0 1.8em;font-size:.81rem;color:var(--ink-3);line-height:1.6
}
.trust-stack .row1{font-weight:650;color:var(--ink-2)}
.trust-stack .row1 b{color:var(--go)}

.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin:0 0 2em}
.toc h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 9px;color:var(--ink-3)}
.toc ol{margin:0;padding-left:1.2em;font-size:.93rem}
.toc li{margin:.28em 0}

.takeaways{background:var(--paper-2);border-left:4px solid var(--navy);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;margin:0 0 2em}
.takeaways h2{margin:0 0 .5em;font-size:1.02rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy)}
.takeaways ul{margin:0;padding-left:1.15em;font-size:.96rem}

.callout{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);
  padding:14px 16px;margin:1.6em 0;font-size:.95rem}
.callout strong{display:block;margin-bottom:.25em}
.callout p:last-child{margin-bottom:0}

.factbox{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:1.6em 0;
  background:#fff;box-shadow:var(--shadow-1)}
.factbox h3{margin:0 0 .5em;font-size:1rem}
.factbox p:last-child{margin-bottom:0}
.factbox .src{font-size:.78rem;color:var(--ink-3);margin-top:.7em}

table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem}
caption{caption-side:top;text-align:left;font-size:.83rem;color:var(--ink-3);padding-bottom:7px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
thead th{background:var(--paper-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-2);font-weight:750}
tbody th{background:var(--paper-2);font-weight:700}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4em 0}
.tablewrap table{margin:0;min-width:540px}

.statute{border-left:3px solid var(--navy);background:var(--paper-2);padding:12px 16px;
  margin:1.3em 0;font-size:.93rem;border-radius:0 var(--radius) var(--radius) 0}
.statute .cite{font-weight:750;display:block;margin-bottom:.3em;font-size:.88rem}
.statute blockquote{margin:0;font-family:var(--serif);font-size:.97rem;color:var(--ink-2)}
.statute .link{font-size:.8rem;margin-top:.5em;display:block}

.courtcard{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:1.2em 0;
  background:#fff}
.courtcard h3{margin:0 0 .45em;font-size:1.05rem}
.courtcard dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:.92rem}
.courtcard dt{font-weight:700;color:var(--ink-2);white-space:nowrap}
.courtcard dd{margin:0}

details.faq{border-bottom:1px solid var(--line);padding:2px 0}
details.faq summary{cursor:pointer;padding:14px 26px 14px 0;font-weight:680;font-size:1.02rem;
  list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:1.3rem;
  color:var(--ink-3);font-weight:400;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 0 14px;font-size:.97rem;color:var(--ink-2)}
details.faq .a p:last-child{margin-bottom:0}

.linkgrid{list-style:none;padding:0;margin:1.2em 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.linkgrid li{margin:0}
.linkgrid a{display:block;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;text-decoration:none;font-size:.93rem;font-weight:600;background:#fff}
.linkgrid a:hover{border-color:#a9bdd6;background:var(--paper-2)}
.linkgrid .meta{display:block;font-weight:400;font-size:.8rem;color:var(--ink-3);margin-top:2px}

.moreblock{border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;
  margin:2.4em 0;background:var(--paper-2)}
.moreblock h2{margin:0 0 .6em;font-size:1.12rem}
.moreblock ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.moreblock li{margin:0;font-size:.95rem}
.moreblock .note{font-size:.82rem;color:var(--ink-3);margin:.9em 0 0}

.sources{font-size:.87rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin:2.4em 0 0}
.sources h2{margin:0 0 .6em;font-size:1rem}
.sources ol{margin:0;padding-left:1.3em}
.sources li{margin:.35em 0;color:var(--ink-2)}

.todo{background:#fff4d6;border:1px dashed #d4a72c;border-radius:4px;padding:2px 6px;
  font:.84em var(--mono);color:#7a5b09}

/* --------------------------------------------------------------- sidebar */
.side-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;
  margin:0 0 18px;background:#fff;box-shadow:var(--shadow-1)}
.side-card h2,.side-card h3{margin:0 0 .5em;font-size:1rem}
.side-card p{font-size:.9rem;margin:0 0 .8em}
.side-card p:last-child{margin-bottom:0}
.side-card ul{padding-left:1.15em;font-size:.9rem;margin:0}
.side-jump{display:block;text-align:center;background:var(--go);border-radius:var(--radius);
  padding:13px;font-weight:750;font-size:1rem;color:#fff;text-decoration:none}
.side-jump:hover{background:var(--go-2);color:#fff}
.side-jump small{display:block;font-weight:400;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;opacity:.8;margin-top:2px}

/* ----------------------------------------------------------- mobile sticky
   Form CTA only — placement #4 of the four required form entry points.
   No click-to-call button: this site has no phone channel. */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -3px 14px rgba(16,21,28,.13);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:9px;align-items:center
}
.mobile-cta .m-note{flex:1 1 auto;font-size:.76rem;line-height:1.35;color:var(--ink-3)}
.mobile-cta .m-note b{display:block;color:var(--ink);font-size:.86rem;font-weight:700}
.mobile-cta .m-form{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:13px 18px;border-radius:var(--radius);text-decoration:none;font-weight:750;
  font-size:.95rem;background:var(--go);color:#fff}
.mobile-cta .m-form:hover{background:var(--go-2);color:#fff}

/* ------------------------------------------------------------------ footer */
.sitefoot{background:var(--navy);color:#b9c8da;margin-top:56px;font-size:.9rem}
.sitefoot .wrap{padding-top:34px;padding-bottom:30px}
.sitefoot a{color:#dbe6f2}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;margin-bottom:26px}
.foot-cols h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:#8ea3bd;
  margin:0 0 .7em;font-weight:700}
.foot-cols ul{list-style:none;padding:0;margin:0}
.foot-cols li{margin:.36em 0}
.foot-brand{font-weight:800;color:#fff;font-size:1.05rem;margin-bottom:.4em;display:block}
.legalfoot{border-top:1px solid rgba(255,255,255,.10);padding-top:16px;font-size:.72rem;
  line-height:1.55;color:#7f93ad}
.legalfoot p{margin:0 0 .7em}
.legalfoot p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ diagrams
   Inline SVG figures (no image files, no JS). Every fill below was run through
   the dataviz palette validator against THESE surfaces, not the validator's
   defaults:
     light categorical #1d4ed8 #c2410c #047857  vs #ffffff  --pairs all  PASS
     dark  categorical #3b82f6 #ea580c #059669  vs #0f1b2b  --pairs all  PASS
     light severity ordinal #eb9468 #e0703c #c94b28 #b3341f --ordinal     PASS
     dark  severity ordinal #c2451f #e0703c #ef8f63 #f6b795 --ordinal     PASS
   Text uses ink tokens only; --d-onfill / --d-onq1 are for labels that sit
   inside a filled mark and both clear 4.5:1 on the fill they sit on.
   The page itself has no dark theme, so the figure carries its own surface —
   in dark mode it reads as an inverted panel, like the hero and the footer. */
.dgm{
  --d-surface:#ffffff;
  --d-plane:#f6f8fa;
  --d-ink:#10151c;
  --d-ink-2:#39424f;
  --d-muted:#5d6875;
  --d-grid:#e4e9ef;
  --d-axis:#c3ccd6;
  --d-s1:#1d4ed8;
  --d-s2:#c2410c;
  --d-s3:#047857;
  --d-q1:#eb9468;
  --d-q2:#e0703c;
  --d-q3:#c94b28;
  --d-q4:#b3341f;
  --d-onfill:#ffffff;
  --d-onq1:#10151c;
  max-width:520px;margin:1.9em 0;padding:12px 12px 4px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--d-surface);box-shadow:var(--shadow-1);
}
.dgm.dgm-lead{margin-top:0}
.dgm>svg{display:block;width:100%;height:auto;
  font-family:var(--sans);font-variant-numeric:tabular-nums}
.dgm>svg text{paint-order:stroke fill}
.dgm figcaption{font-size:.83rem;line-height:1.5;color:var(--d-muted);
  margin:10px 2px 0;padding-top:9px;border-top:1px solid var(--d-grid)}
.dgm .dgm-data{margin:8px 0 0}
.dgm .dgm-data summary{cursor:pointer;font-size:.8rem;font-weight:650;
  color:var(--d-ink-2);padding:7px 2px;list-style:none;position:relative}
.dgm .dgm-data summary::-webkit-details-marker{display:none}
.dgm .dgm-data summary::before{content:"+ ";font-weight:400;color:var(--d-muted)}
.dgm .dgm-data[open] summary::before{content:"\2013 ";}
.dgm .dgm-data summary:hover{color:var(--d-ink)}
.dgm .dgm-data .tablewrap{margin:0 0 10px}
.dgm .dgm-data table{font-size:.82rem}
.dgm .dgm-data table caption{color:var(--d-muted)}
.dgm .dgm-data p{font-size:.8rem;color:var(--d-muted);margin:0 2px 10px}

@media (prefers-color-scheme:dark){
  .dgm{
    --d-surface:#0f1b2b;
    --d-plane:#16273c;
    --d-ink:#f2f6fb;
    --d-ink-2:#cbd8e6;
    --d-muted:#9db0c6;
    --d-grid:#24354b;
    --d-axis:#3a5170;
    --d-s1:#3b82f6;
    --d-s2:#ea580c;
    --d-s3:#059669;
    --d-q1:#c2451f;
    --d-q2:#e0703c;
    --d-q3:#ef8f63;
    --d-q4:#f6b795;
    --d-onfill:#0f1b2b;
    --d-onq1:#f2f6fb;
    border-color:#24354b;box-shadow:none;
  }
  .dgm .dgm-data th,.dgm .dgm-data td{border-color:var(--d-grid);color:var(--d-ink)}
  .dgm .dgm-data thead th{background:#16273c;color:var(--d-ink-2)}
  .dgm .dgm-data tbody th{background:#132234}
}
@media (max-width:760px){
  .dgm{max-width:100%;padding:10px 10px 2px}
}
@media print{
  .dgm{break-inside:avoid;box-shadow:none}
  .dgm .dgm-data{display:none}
}

/* --------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .layout{grid-template-columns:1fr;gap:32px}
  .sidebar{position:static}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  h1{font-size:1.72rem}
  .hero h1{font-size:1.85rem}
  h2{font-size:1.32rem}
  .topnav{display:none}
  .btn-top{margin-left:auto;padding:8px 13px;font-size:.88rem}
  .hero .wrap{padding-top:26px;padding-bottom:30px}
  .grid2{grid-template-columns:1fr}
  .choices.two{grid-template-columns:1fr}
  .mobile-cta{display:flex}
  body{padding-bottom:70px}
  .foot-cols{grid-template-columns:1fr;gap:20px}
  .shortform form{flex-direction:column}
  .shortform .btn{width:100%}
}
@media print{
  .topbar,.mobile-cta,.formcard,.shortform,.sidebar{display:none!important}
}

/* ------------------------------------------------------------------ figures
   Editorial photography. Generic scenes only — no identifiable people and no
   named firms (_shared/BUILD-PLAYBOOK.md §6). */
figure.ph{margin:1.9em 0;padding:0}
figure.ph picture,figure.ph img{border-radius:var(--radius-lg)}
figure.ph figcaption{font-size:.83rem;line-height:1.5;color:var(--ink-3);margin-top:9px}

/* ---------------------------------------------------------------- hero aside
   The hero carries two routes side by side: the qualifying form and the
   three-field callback. Someone holding a deadline will not do six screens. */
.hero-aside{display:grid;gap:14px}
.hero-aside .formcard.compact .fc-body{padding:16px 18px 18px}
.formcard.compact .fc-head{padding:13px 18px 11px}
.altroute{font-size:.82rem;color:#c5d4e6;text-align:center;margin:0}
.altroute a{color:#fff}

.opt{font-weight:400;color:var(--ink-3)}

/* badge ticker — four claims, each of which has to be literally true */
.badges{list-style:none;padding:0;margin:1.1em 0 0;display:flex;flex-wrap:wrap;gap:7px 9px}
.badges li{margin:0;font-size:.78rem;font-weight:650;letter-spacing:.01em;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:#dce7f4;padding:6px 11px;border-radius:99px}
.badges.on-paper li{background:var(--paper-2);border-color:var(--line);color:var(--ink-2)}

/* neutrality note — our one structural advantage, stated once, without shouting */
.neutral{border-left:4px solid var(--go);background:var(--go-soft);padding:14px 16px;
  border-radius:0 var(--radius) var(--radius) 0;margin:1.8em 0;font-size:.95rem}
.neutral strong{display:block;margin-bottom:.25em}
.neutral p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ calculator
   The result is rendered before any form is shown. That is deliberate: a gated
   calculator converts slightly better and is worth nothing as a citable asset,
   and on this site the calculator IS the asset. */
.calc{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow-2);overflow:hidden;margin:0 0 2em}
.calc .calc-head{background:var(--paper-2);border-bottom:1px solid var(--line);padding:16px 20px 14px}
.calc .calc-head h2{margin:0 0 4px;font-size:1.18rem}
.calc .calc-head p{margin:0;font-size:.87rem;color:var(--ink-3)}
.calc .calc-body{padding:18px 20px 22px}
.calc-steps{display:flex;gap:6px;align-items:center;margin:0 0 16px}
.calc-steps span{flex:1;height:5px;border-radius:99px;background:var(--paper-3)}
.calc-steps span.on{background:var(--go)}
.calc-steps .lbl{flex:0 0 auto;font-size:.74rem;font-weight:650;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.cstep{display:none}
.cstep.is-active{display:block;animation:fade .18s ease}
.cstep h3{margin:0 0 4px;font-size:1.03rem}
.cstep .why{font-size:.85rem;color:var(--ink-3);margin:0 0 13px}
.cstep .why b{color:var(--ink-2);font-weight:650}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px}
.checks label{display:flex;gap:9px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:var(--radius);padding:10px 12px;font-size:.92rem;cursor:pointer;background:#fff}
.checks label:hover{border-color:#a9bdd6;background:var(--paper-2)}
.checks input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:#0a6b4f}
.checks input:checked ~ span{font-weight:650}
.calc .grid3{display:grid;grid-template-columns:1.4fr 1fr;gap:0 12px}
.calc .inline-sel{display:flex;gap:8px}
.calc .inline-sel input{flex:1 1 auto}
.calc .inline-sel select{flex:0 0 118px}
.calcnav{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.calcnav .btn{width:auto;flex:1}
.calcnav .btn.secondary{flex:0 0 auto}

.result{display:none}
.result.is-active{display:block}
.rtot{background:var(--navy);color:#fff;border-radius:var(--radius);padding:16px 18px;margin:0 0 16px}
.rtot .rlbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:#9fb3cd;font-weight:700}
.rtot .rnum{font-size:2.1rem;font-weight:800;line-height:1.1;display:block;margin:.15em 0;
  font-variant-numeric:tabular-nums}
.rtot p{margin:.4em 0 0;font-size:.84rem;color:#c5d4e6}
.rpart{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 12px;overflow:hidden}
.rpart h4{margin:0;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line);
  font-size:.95rem}
.rpart h4 small{display:block;font-weight:400;color:var(--ink-3);font-size:.78rem;margin-top:1px}
.rpart table{margin:0;font-size:.9rem}
.rpart table td,.rpart table th{border-left:0;border-right:0;border-top:0}
.rpart table tr:last-child td,.rpart table tr:last-child th{border-bottom:0}
.rpart td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rpart tr.sum th,.rpart tr.sum td{background:var(--paper-2);font-weight:750}
.rnote{font-size:.83rem;color:var(--ink-3);margin:.9em 0 0}
.rflags{list-style:none;padding:0;margin:.8em 0 0;display:flex;flex-wrap:wrap;gap:6px}
.rflags li{margin:0;font-size:.76rem;background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:99px;padding:4px 10px;color:#6b5312}
.calc-cta{margin:18px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--go-soft)}
.calc-cta h3{margin:0 0 .35em;font-size:1.02rem}
.calc-cta p{margin:0 0 .7em;font-size:.92rem}
.calc-cta .btn{width:auto;padding:12px 20px}
.calcerr{color:#a3291a;font-size:.85rem;margin:8px 0 0;font-weight:600}

@media (max-width:760px){
  .checks{grid-template-columns:1fr}
  .calc .grid3{grid-template-columns:1fr}
}
@media print{.calc-steps,.calcnav,.calc-cta{display:none!important}}

/* brand mark */
.brand{display:inline-flex;align-items:center;gap:.5rem}
.brandmark{flex:0 0 auto;display:block}

/* blog */
.kicker{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:#6b7a8d;
        font-weight:700;margin:0 0 .35rem}
.postlist{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.9rem}
.postlist a{display:block;padding:1.05rem 1.2rem;border:1px solid var(--line);border-radius:10px;
        text-decoration:none;color:var(--ink);font-weight:650;line-height:1.4;background:var(--paper)}
.postlist a:hover{border-color:#b9c4d2;background:#fbfcfd}
.postlist .kicker{display:block;margin-bottom:.35rem}
.postlist .meta{display:block;margin-top:.45rem;font-size:.82rem;font-weight:400;color:#6b7a8d}
.postnav{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.9rem}
@media (prefers-color-scheme:dark){
  .postlist a{background:#111a26;border-color:#26323f;color:#e7ecf2}
  .postlist a:hover{background:#16202d}
}

/* compact definition list inside a factbox — used by the city pages for the
   ONS / statutory-cap figures */
.minidl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:.4em 0 1em;font-size:.92rem}
.minidl dt{font-weight:700;color:var(--ink-2)}
.minidl dd{margin:0;font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .minidl{grid-template-columns:1fr;gap:2px 0}
  .minidl dd{margin-bottom:.5em}
}

/* inline field hint — used where an input's semantics need one sentence */
.field .hint{font-size:.8rem;color:var(--ink-3);margin:5px 0 0;line-height:1.45}


/* ===========================================================================
   balivillacare.com additions
   =========================================================================== */

/* --------------------------------------------------- provenance markers
   The three-class facts module (_authoring/balifacts.py) renders its own
   provenance next to the number. A bare figure is quoted from a primary
   source; anything else has to say what it is, on the page, in the sentence.
   These are deliberately legible rather than subtle — the whole proposition of
   this site is that the reader can tell which numbers are which. */
sup.mk{
  font-size:.62em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.12em .38em;border-radius:3px;margin-left:.22em;vertical-align:.42em;
  white-space:nowrap;cursor:help;
}
sup.mk-r{background:#fdf1ea;color:#8c3a18;border:1px solid #f0cdb8}
sup.mk-m{background:#eef4fb;color:#1a4a86;border:1px solid #c9dcf1}
.marklegend{
  font-size:.88rem;line-height:1.6;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:var(--radius);padding:12px 16px;margin:1.6em 0;
}
.marklegend b{color:var(--ink)}

/* ------------------------------------------------------------- fee stack
   The core table on this site: one row per deduction between the rate a guest
   pays and the money that reaches the owner. */
.stack{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.96rem}
.stack caption{
  caption-side:top;text-align:left;font-weight:700;font-size:.95rem;
  color:var(--ink-2);padding-bottom:.6em;
}
.stack th,.stack td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.stack thead th{
  background:var(--sand);border-bottom:2px solid var(--sand-line);
  font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);
}
.stack td.num,.stack th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stack tr.sub td{background:var(--paper-2);font-weight:650}
.stack tr.net td{background:var(--go-soft);font-weight:750;border-top:2px solid #b8e0d0}
.stack tr.net td:first-child{color:#075740}
.stack td.neg{color:#8c3a18}
.stack .lbl-note{display:block;font-size:.84rem;color:var(--ink-3);margin-top:2px;font-weight:400}
@media (max-width:640px){
  .stack{font-size:.88rem}
  .stack th,.stack td{padding:7px 8px}
}

/* --------------------------------------------------------- compare table */
.compare{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
.compare th,.compare td{padding:10px 12px;border:1px solid var(--line);vertical-align:top}
.compare thead th{background:var(--paper-3);font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
.compare tbody th{background:var(--paper-2);text-align:left;font-weight:650;width:30%}
.compare .yes{color:#075740;font-weight:650}
.compare .no{color:#8c3a18;font-weight:650}

/* ----------------------------------------------------------- the estimator */
.est{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--paper);box-shadow:var(--shadow-1);overflow:hidden;margin:1.8em 0;
}
.est-head{background:var(--navy);color:#fff;padding:18px 22px}
.est-head h2,.est-head h3{color:#fff;margin:0 0 .2em;font-size:1.25rem}
.est-head p{margin:0;color:#c7dde0;font-size:.94rem}
.est-body{padding:20px 22px}
.est-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.est-row .field{flex:1 1 180px;margin:0}
.est .field label{display:block;font-weight:650;font-size:.92rem;margin-bottom:5px}
.est .field input,.est .field select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font:inherit;font-size:1rem;background:#fff;
}
.est .hint{font-size:.84rem;color:var(--ink-3);margin:4px 0 0}
.est-out{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.est-out[hidden]{display:none}
.est-big{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  font-size:2rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;
}
.est-big .unit{font-size:.95rem;font-weight:600;color:var(--ink-3)}
.est-gap{
  margin-top:14px;padding:12px 14px;background:var(--accent-soft);
  border:1px solid #f0cdb8;border-radius:var(--radius);font-size:.95rem;
}
.est-gap b{color:#8c3a18}
.esterr{color:#a3291a;font-size:.88rem;font-weight:600;margin:8px 0 0}

/* ------------------------------------------------------------- key points */
.keytakeaways{
  background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--go);
  border-radius:var(--radius);padding:16px 20px;margin:0 0 1.8em;
}
.keytakeaways h2{margin:0 0 .5em;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.keytakeaways ul{margin:0;padding-left:1.2em}
.keytakeaways li{margin:.45em 0;font-size:.97rem}

/* ------------------------------------------------------------- byline */
.byline{
  display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--ink-3);
  border-bottom:1px solid var(--line);padding-bottom:12px;margin:0 0 1.6em;
}
.byline b{color:var(--ink-2);font-weight:650}

/* ------------------------------------------------------------- fact notes */
.factnotes{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 18px;margin:1.4em 0;font-size:.88rem;line-height:1.6;color:var(--ink-2);
}
.factnotes ul{margin:0;padding-left:1.1em}
.factnotes li{margin:.5em 0}
.factnotes b{color:var(--ink)}

/* ------------------------------------------------------- layout additions */
.narrow{max-width:820px}
main .lede{font-size:1.12rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
main .lede + p{margin-top:1.1em}
.steps-big{counter-reset:s;list-style:none;padding:0;margin:1.4em 0}
.steps-big li{
  position:relative;padding:0 0 0 44px;margin:0 0 1.1em;counter-increment:s;
}
.steps-big li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:.92rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
blockquote.pull{
  margin:1.6em 0;padding:16px 20px;background:var(--sand);
  border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
}
blockquote.pull p{margin:0 0 .5em;font-size:1.06rem;line-height:1.55;color:var(--ink)}
blockquote.pull cite{font-style:normal;font-size:.84rem;color:var(--ink-3)}
figure.dgm.dgm-wide{margin:1.9em 0}

/* =========================================================================
   Mobile overflow fixes — found by measuring, not by looking
   -------------------------------------------------------------------------
   A 390px viewport was producing 194px of horizontal scroll. Two causes, both
   invisible at desktop width and both classic:

   1. GRID ITEMS DO NOT SHRINK BELOW min-content BY DEFAULT. The single-column
      `.layout` at narrow widths was still 461px wide because `1fr` means
      `minmax(auto,1fr)`, and `auto` floors at the widest unbreakable thing
      inside — here a table cell. `minmax(0,1fr)` removes the floor. The
      desktop rule already had this; the mobile override did not, which is
      exactly the kind of asymmetry nobody spots by eye.

   2. The brand lock-up carries a nowrap tagline that is fine at 1440px and
      379px wide at 390px, pushing the CTA off-screen.
   ========================================================================= */
@media (max-width:1040px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .brand span{display:none}          /* the tagline, not the brand */
  .brand{font-size:1rem;min-width:0}
  .topbar .wrap{gap:10px}
  /* Any table that genuinely cannot fit scrolls inside its own box rather
     than dragging the whole document sideways. */
  .stack,.compare{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stack thead,.compare thead{white-space:nowrap}
}

/* The primary nav on this site carries five longer labels than the template it
   started from ("Fees, line by line", "Management companies"), so it stops
   fitting alongside the brand and the CTA at ~1040px rather than at the 760px
   the inherited breakpoint assumed. Between those two widths the CTA was being
   pushed off the right edge of every page on the site, including the 404.
   Measured at 768px: 165px of overflow, uniform across all 26 pages. */
@media (max-width:1040px){
  .topnav{display:none}
  .btn-top{margin-left:auto}
  .brand span{display:none}
}

/* =========================================================================
   Two rendering defects found by looking at a screenshot, not at the code
   -------------------------------------------------------------------------
   1. The enquiry steps are <fieldset> elements and a fieldset carries a UA
      border that the inherited stylesheet never reset. At desktop width the
      legend sat astride that border and read as a broken box.
   2. `.btn` sets display:inline-flex, which OVERRIDES the `hidden` attribute —
      `[hidden]` is only a UA rule at display:none and any author display wins.
      So the Continue button that form.js reveals "only when this step already
      has an answer" was visible on every step from the first paint, which is
      precisely the behaviour it was written to avoid.
   ========================================================================= */
.step,.formcard fieldset{border:0;margin:0;padding:0;min-width:0}
.step > legend{padding:0}
[hidden]{display:none !important}

/* ===========================================================================
   MOBILE OVERFLOW SAFETY — 2026-09-20
   실측: 라이브 사이트를 390px 뷰포트로 열었더니 scrollWidth 550px.
   가로 스크롤이 생기면서 헤더가 잘렸다. 원인 3개를 여기서 잡는다.
     1) <table> 이 540px 로 페이지를 벌림 — 표 안에서 스크롤되게
     2) .brand 안의 태그라인 <span> 이 안 숨겨짐
     3) .btn-top 상단 CTA 가 화면 밖(right 551px)
   이 블록은 파일 맨 끝에 있어야 캐스케이드에서 이긴다.
   =========================================================================== */
@media (max-width: 760px) {
  /* 표는 자기 안에서 가로 스크롤 — 페이지를 벌리지 않는다 */
  table { display: block; width: 100%; max-width: 100%;
          overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table caption { white-space: normal; }
  /* 긴 URL·조문번호가 레이아웃을 벌리는 것 방지 */
  pre, code { overflow-x: auto; max-width: 100%; }
  img, svg, figure, picture, video { max-width: 100%; height: auto; }
}
@media (max-width: 620px) {
  .brand > span { display: none; }   /* 브랜드 태그라인 */
  .btn-top { display: none; }        /* 상단 CTA — 하단 스티키 CTA 가 대체한다 */
  .brand { max-width: 100%; min-width: 0; }
}

/* --- 그리드 blowout 방지 ------------------------------------------------
   CSS 그리드의 `1fr` 은 암묵적으로 min-width:auto(=min-content) 다.
   .tablewrap table{min-width:540px} 같은 자식이 있으면 트랙이 540px 로 벌어지면서
   모바일에서 페이지 전체가 넘친다. minmax(0,1fr) 이라야 실제로 줄어든다.
   2026-09-20 실측: iso27001partners 부속서A 페이지 375px 뷰포트에서 scrollWidth 560px. */
.layout { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr) !important; }
  .layout > * { min-width: 0; }
}
@media (max-width: 760px) {
  .tablewrap { max-width: 100%; overflow-x: auto; }
  /* 래퍼가 있으면 표는 원래 폭을 유지하고 래퍼 안에서 스크롤한다 */
  .tablewrap table { display: table; }
}

/* ---------------------------------------------------------------------------
   모바일 CTA 복구 — 2026-09-20 감사
   오버플로 수정 때 `.btn-top{display:none}` 으로 숨겼는데, 폼이 있는 페이지는
   하단 스티키 CTA 가 대체하지만 **폼 없는 지원 페이지에는 대체가 없어서**
   620px 이하에서 CTA 가 0개가 됐다. 숨기는 대신 작게 만든다.
   --------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .btn-top {
    display: inline-block !important;
    font-size: .78rem;
    padding: 7px 11px;
    white-space: nowrap;
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 380px) {
  .btn-top { font-size: .72rem; padding: 6px 9px; max-width: 40vw; }
}