/* ============================================================
   Greenline Legal — site stylesheet
   External (not inline) on purpose: an earlier build of this design system
   duplicated ~23KB of CSS into every page, which cost payload on every
   navigation and caused several rules-reaching-the-wrong-component bugs.
   One file, cached hard — see _headers for the ?v= cache contract.
   ============================================================ */

:root{
  /* Family palette — identical forest/lime across all three Greenline sites */
  --forest:#0B3D2E;
  --forest-2:#114C39;
  --forest-3:#0a3225;
  --lime:#8DE04B;
  --lime-soft:#B8EE86;
  --paper:#F4F7F1;
  --ink:#0C1611;
  --muted:#5C6E64;
  --line:#E2E9DF;
  --white:#fff;
  --shadow:0 18px 50px -22px rgba(11,61,46,.35);

  /* Amber is not a brand colour and is never used for content. It marks
     unresolved facts the client still has to supply — see .todo at the
     foot of this file. Two values because those markers land on both the
     paper header and the forest footer. */
  --amber:#C99A3A;      /* .todo border, and .fl-note text, on dark */
  --amber-lift:#E8C77A; /* .todo TEXT on dark — see the note at .todo */
  --amber-ink:#7A5200;  /* .todo text and border on light */
  /* Disclaimer type on forest. #7d9285 measured 4.23:1 at .78rem, under
     the 4.5:1 floor for text this small; this clears it at 4.67:1. */
  --fine:#849A8D;

  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --wrap:1180px;
  --pad:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{line-height:1.08;font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
section{padding:88px 0}
.bg-paper{background:var(--paper)}
.bg-dark{background:var(--forest-3);color:var(--white)}

/* --- eyebrow: the family's smallest recognisable signature ---------------
   The 26px currentColor rule before the label appears on all three sites. */
.eyebrow{
  font-family:var(--mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--forest);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block;flex:none}
.eyebrow.on-dark{color:var(--lime-soft)}

/* mono micro-label register — reads as documentary precision, which is the
   right register for a legal practice. */
.mono-label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:.98rem;
  padding:14px 26px;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--lime);color:var(--forest-3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(141,224,75,.7)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-dark{background:var(--forest);color:var(--white)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-line{background:transparent;color:var(--forest);border-color:var(--line)}
.btn-line:hover{border-color:var(--forest);transform:translateY(-2px)}

/* --- section heads ------------------------------------------------------ */
.sec-head{max-width:none}
.sec-head.center{text-align:center;max-width:40em;margin:0 auto}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(2rem,3.7vw,2.95rem);margin:16px 0 0;max-width:18em}
.sec-head.center h2{margin-left:auto;margin-right:auto}
.sec-head p.lead{font-size:1.12rem;color:var(--muted);margin-top:16px;max-width:44em}
.sec-head.center p.lead{margin-left:auto;margin-right:auto}
.on-dark h2,.bg-dark h2{color:var(--white)}
.bg-dark p.lead{color:#CFE0D3}

/* --- reveal system ------------------------------------------------------
   Final state authored in base CSS; only un-drawn when motion is allowed,
   so a reduced-motion or no-JS visitor sees the finished artwork. */
@media(prefers-reduced-motion:no-preference){
  /* html.js is set by an inline script in <head>. Gating on it means a
     visitor whose JS is blocked, fails to load or throws still sees the
     finished page instead of a blank one — the un-drawn state only exists
     when the script that undoes it is known to be running. */
  /* EVERY rule in this block carries the html.js prefix, including the .in
     ones. Gating only the hidden state breaks the reveal: `html.js .rv` is
     specificity (0,2,1) and would outrank a bare `.rv.in` at (0,2,0), so the
     element would stay at opacity 0 forever. Keep the prefix on both sides. */
  html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  html.js .rv.in{opacity:1;transform:none}
  html.js .stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
  html.js .stagger.in>*{opacity:1;transform:none}
  html.js .stagger.in>*:nth-child(2){transition-delay:.08s}
  html.js .stagger.in>*:nth-child(3){transition-delay:.16s}
  html.js .stagger.in>*:nth-child(4){transition-delay:.24s}
  html.js .stagger.in>*:nth-child(5){transition-delay:.32s}
  html.js .stagger.in>*:nth-child(6){transition-delay:.40s}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* --- blueprint texture + corner marks -----------------------------------
   A ruled grid reads as drafting/registry paper and the corner marks read
   as document registration marks. This is why the page needs no stock
   photography. */
.phero{position:relative;overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(207,234,216,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(207,234,216,.07) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(720px 420px at 78% 30%,#000,transparent 75%);
  mask-image:radial-gradient(720px 420px at 78% 30%,#000,transparent 75%);
}
.phero .hero-grid{position:relative}
.phero .hero-grid::before,.phero .hero-grid::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none}
.phero .hero-grid::before{left:-2px;top:-26px;border-left:2px solid var(--lime);border-top:2px solid var(--lime)}
.phero .hero-grid::after{right:-2px;bottom:-14px;border-right:2px solid var(--lime-soft);border-bottom:2px solid var(--lime-soft)}
@media(prefers-reduced-motion:no-preference){
  .phero .hero-grid::before{clip-path:inset(0 100% 100% 0);animation:cornerDraw .8s .3s ease forwards}
  .phero .hero-grid::after{clip-path:inset(100% 0 0 100%);animation:cornerDraw .8s .55s ease forwards}
}
@keyframes cornerDraw{to{clip-path:inset(0 0 0 0)}}

/* --- responsive --------------------------------------------------------- */
@media(max-width:960px){
  section{padding:72px 0}
}
@media(max-width:640px){
  body{font-size:16px}
  section{padding:60px 0}
  .wrap{padding:0 18px}
}

/* ============================================================
   HEADER + MEGA-MENU DRAWER
   Carries four mobile-menu fixes made 2026-08-07: sticky not
   relative; panel sized to content and scrollable within the
   viewport; sub-links forced block; accordion chrome reset.
   Accents are forest/lime — there is no brass in this palette.
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(244,247,241,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav.scrolled{box-shadow:0 8px 30px rgba(18,59,42,.09)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:34px;width:auto;max-width:none}
.nav-links{display:flex;align-items:center;gap:32px;min-width:0}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--ink);transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--forest)}
.ntrig{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:500;color:var(--ink);padding:6px 0;white-space:nowrap}
.ntrig svg{transition:transform .25s;opacity:.55}
.ntrig[aria-expanded="true"] svg{transform:rotate(180deg)}
.ntrig[aria-expanded="true"]{color:var(--forest)}
.ntrig.on,.nav-links a.on{color:var(--forest);font-weight:700}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-tel{font-family:var(--mono);font-size:.82rem;color:var(--forest);font-weight:500;white-space:nowrap}

.drawer{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px rgba(10,26,18,.14);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;z-index:40;
}
.nav[data-open="practice"] #drawer-practice,
.nav[data-open="firm"] #drawer-firm{opacity:1;visibility:visible;transform:translateY(0)}
.drawer-in{display:grid;grid-template-columns:1.15fr 1.15fr 1fr .8fr;gap:clamp(20px,2.6vw,40px);padding-top:34px;padding-bottom:38px}
.dhead{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);display:block;margin-bottom:16px}
.dlinks a{display:block;padding:12px 14px;margin:0 -14px;border-radius:10px;transition:background .2s}
.dlinks a:hover{background:var(--paper)}
.dlinks b{display:block;font-size:1rem;font-weight:700;color:var(--ink)}
.dlinks small{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
/* The card stretches to the tallest link column, and its content is bottom
   anchored, so the top half was empty forest. A photograph fills it, under a
   three-stop wash that reaches .94 forest by the baseline — the text sits on
   what is effectively the flat brand colour, so its contrast does not depend on
   the photograph. The image is referenced from the markup as --dp-img, the same
   pattern as --hero-img on the hero. It is only 600x900: the slot is ~197px wide
   and .drawer is display:none below 1080px, so phones never fetch it. */
.dpromo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:14px;overflow:hidden;min-height:300px;padding:24px;
  background:linear-gradient(180deg,rgba(11,61,46,.14) 0%,rgba(11,61,46,.74) 55%,rgba(11,61,46,.94) 100%),
             var(--dp-img,none) center/cover no-repeat,
             var(--forest);}
.dp-eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.dp-line{font-size:1.12rem;font-weight:800;line-height:1.3;color:#F1F4EC;letter-spacing:-.01em}
.dp-go{font-size:.85rem;font-weight:700;color:var(--lime);margin-top:12px}

/* mobile menu */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:8px;padding:12px 16px;color:var(--forest)}
.mnav summary::-webkit-details-marker{display:none}
.mnav-list{
  display:none;position:absolute;right:0;top:calc(100% + 10px);flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  width:max-content;min-width:250px;
  max-width:calc(100vw - 28px);
  max-height:calc(100vh - 110px);
  box-shadow:0 24px 50px rgba(18,59,42,.16);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;z-index:60;
}
.mnav[open] .mnav-list{display:flex}
.mnav-list a{padding:13px 18px;font-size:.92rem;border-bottom:1px solid var(--line)}
.msub summary{list-style:none;cursor:pointer;font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--ink);border:0;border-radius:0;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.msub summary::after{content:"+";font-family:var(--mono);color:var(--forest)}
.msub[open] summary::after{content:"\2212"}
.msub a{display:block;padding-left:34px!important;font-size:.88rem;color:var(--muted)}
.msub{border-bottom:1px solid var(--line)}
.msub[open] summary{color:var(--forest)}

@media(max-width:1080px){
  .drawer{display:none}
  .nav-links{display:none}
  .mnav{display:block}
  /* THREE classes on purpose. .todo.todo sets display:inline-block at (0,2,0)
     and is defined last, so it beats both `.nav-tel` (0,1,0) and
     `.nav-cta .nav-tel` (0,2,0 — a tie, decided by source order). This rule
     must stay above (0,2,0) or the placeholder chip reappears on phones.
     Both earlier attempts lost this race; do not "simplify" it. */
  .nav-in .nav-cta .nav-tel{display:none}
}
@media(max-width:560px){
  .nav-cta .btn{display:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--forest-3);color:#CFE0D3;padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
.foot h3{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-soft);font-weight:500;margin-bottom:16px}
.foot a{color:#CFE0D3;font-size:.92rem;display:block;padding:5px 0;transition:color .2s}
.foot a:hover{color:var(--lime)}
.foot-brand img{height:56px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:.92rem;color:#9DB3A2;max-width:32em}
.foot-addr{font-size:.92rem;color:#9DB3A2;line-height:1.75;margin-top:14px}
.foot-addr b{color:#EAF4EC;font-weight:600}
.foot-btm{margin-top:48px;border-top:1px solid rgba(255,255,255,.09);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center}
.foot-btm span,.foot-btm a{font-size:.8rem;color:#8FA897;display:inline}
.foot-legal{font-size:.78rem;color:var(--fine);line-height:1.7;max-width:none;padding-bottom:26px}
/* .foot a is display:block at .92rem — correct for the nav columns, wrong
   inside a legal paragraph, where it would break the sentence onto its own
   line at a larger size than the text around it. Same specificity as .foot a
   (0,1,1), so this must stay BELOW it. */
.foot-legal a{display:inline;padding:0;font-size:inherit;color:#CFE0D3;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot-legal a:hover{color:var(--lime)}
@media(max-width:1080px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr;gap:32px}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ============================================================
   HERO
   No stock photography: the only "team" image on the current site
   is a stock library shot of five strangers. A ruled blueprint
   field over forest reads as registry/drafting paper and is honest.
   ============================================================ */
/* Photo behind the header, carried from the Greenline Home Loans build.
   The gradient is doing the real work: 94% opaque green at the left where the
   H1 and body copy sit, easing to 42% at the right so the photograph is only
   legible in the right third. Any image used here must therefore put its
   subject on the RIGHT and keep the left tonally simple — a busy left edge
   turns to noise under 94% green and costs contrast on the headline.
   background-position:center right keeps that subject in frame as the
   viewport narrows. */
.hero{
  /* padding:0 is not cosmetic. The global section{padding:88px 0} would stack
     on top of .hero-grid's own 96/100 — 184px before the H1, and 88px of dead
     ground below the trust strip. The Home Loans build this system comes from
     zeroes it on the hero for exactly this reason; .hero-grid and .basis supply
     their own spacing. .phead does the same. */
  padding:0;
  position:relative;color:var(--white);overflow:hidden;
  background-color:var(--forest-3);
  background-image:
    linear-gradient(100deg,rgba(9,44,33,.94) 0%,rgba(9,44,33,.82) 38%,rgba(10,50,37,.42) 100%),
    var(--hero-img,linear-gradient(100deg,var(--forest-3) 0%,var(--forest) 52%,var(--forest-2) 100%));
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}
/* below 900px the text overlays the whole frame, so the photo has to retreat
   further or the headline loses contrast */
@media(max-width:900px){
  .hero{
    background-image:
      linear-gradient(180deg,rgba(9,44,33,.93) 0%,rgba(9,44,33,.88) 55%,rgba(10,50,37,.78) 100%),
      var(--hero-img,none);
  }
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 82% -10%,rgba(141,224,75,.18),transparent 60%);
}
.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
  /* longhands, never the shorthand: the shorthand wipes .wrap's
     horizontal gutter and the hero bleeds to both screen edges */
  padding-top:96px;padding-bottom:100px;position:relative;z-index:2;
}
/* Deliberately the SAME ramp as .sec-head h2 (line ~110), on the client's call:
   the hero headline and the section headings now sit at one size. It started at
   4.05rem, sized for a 12-word promise with no nouns in it. Keep the two in step
   — if .sec-head h2 moves, this moves with it. The hero-copy column is ~581px at
   1440 and governs the wrap on its own, so max-width is a backstop, not a cap. */
.hero h1{font-size:clamp(2rem,3.7vw,2.95rem);margin:22px 0 0;max-width:16em}
.hero h1 em{font-style:italic;color:var(--lime);font-weight:500}
.hero-sub{font-size:1.16rem;color:#D6E3D8;margin:24px 0 32px;max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* The reassurance line under the CTAs. _research/homepage-plan.md specified a
   flex row, .92rem, #9DB3A2, 18px clear of the buttons — and the rule was never
   written, so the <p> was inheriting body defaults: display:block, margin-top:0,
   17px, pure white. It sat flush against the buttons and shouted as loudly as
   them. It is a quiet corroboration of the promise in the headline, not a third
   call to action, so it is smaller, softer and given room. */
.hero-note{display:flex;align-items:center;gap:9px;margin-top:22px;
  font-size:.92rem;line-height:1.5;color:#9DB3A2}
.hero-note svg{flex:none}

/* quick-path card — self-segmentation by matter type, so a visitor who
   already knows what happened can skip the prose entirely */
.qcard{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);border-radius:22px;
  padding:28px 26px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.qcard .cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#8FA897}
.qcard h2{color:var(--white);font-size:1.3rem;margin:10px 0 18px}
.qlinks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qlink{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:13px;padding:14px;font-weight:600;font-size:.95rem;color:#EAF4EC;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.qlink svg{color:var(--lime);flex:none}
/* fifth door spans the 2-col router rather than orphaning a cell */
.qlink-wide{grid-column:1 / -1}
.qlink:hover{background:rgba(141,224,75,.14);border-color:var(--lime);transform:translateY(-2px)}
.qfoot{margin-top:16px;font-size:.9rem;color:#B8C8BD}
.qfoot a{color:var(--lime);font-weight:700}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-top:66px;padding-bottom:72px}
  /* Source order once stacked: identity first, router second.
     homepage-plan.md asked for the reverse — .qcard{order:-1} — on the argument
     that a visitor who already knows their matter type should not scroll the
     hero to find the door. That assumes they already know whose site they are
     on. They do not: on a 390px screen the router took the first 515px and the
     H1 did not appear until 680px, so the first full screen was a menu of
     matter types with nothing saying which firm was offering them.
     Reverted 2026-09-07 on the client's call. The router now starts just below
     the fold, which is where a hero's second element belongs. */
}
@media(max-width:640px){
  .hero-grid{padding-top:50px;padding-bottom:56px}
  .hero-copy{padding:0}
  .qlinks{grid-template-columns:1fr}
  .hero-cta .btn{flex:1;text-align:center}
}

/* .fl-note is the italic amber aside that explains WHY a placeholder is
   there. The placeholder itself is .todo, defined at the foot of this file. */
.foot-legal b{color:#EAF4EC;font-weight:600}
.fl-note{color:var(--amber);font-style:italic}

/* visually hidden — keeps the document outline intact for screen readers
   and for AI retrieval, unlike display:none */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============================================================
   BASIS STRIP — sits in the slot a conventional site gives to awards.
   This firm has no verifiable awards, ratings or review counts,
   so it carries four facts the firm can substantiate instead.
   ============================================================ */
.basis{background:var(--forest-3);color:#CFE0D3;border-top:1px solid rgba(255,255,255,.07);position:relative;z-index:2;padding:28px 0}
.basis-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px;align-items:start}
.basis-item{display:flex;align-items:flex-start;gap:11px;font-size:.85rem;line-height:1.55}
.basis-item b{color:var(--white);font-weight:700;display:block}
.basis-item svg{color:var(--lime);flex:none;margin-top:2px}
@media(max-width:900px){.basis-row{grid-template-columns:1fr 1fr;gap:20px 26px}}
@media(max-width:560px){.basis-row{grid-template-columns:1fr}}

/* ============================================================
   PRACTICE AREAS — 2x2, never 4-across: four columns would crush
   the legislative sentences, and those sentences are the section's
   real payload. align-items:start keeps the ragged bottom edge,
   which signals a real catalogue rather than four equalised tiles.
   ============================================================ */
/* stretch, not start: cards in a row must share a height or the shorter one
   floats and the row reads as broken. Business sales has no sub-links, so it
   is much shorter than Wills & estates beside it. */
.off-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;align-items:stretch}
/* Building & construction leads and spans both columns. Two reasons: it is the
   firm's priority work, and five cards in a 2-up grid otherwise strand the
   fifth in an orphan cell. The paragraph is measure-capped because a full-bleed
   card would otherwise run legislative sentences to ~1080px, and those
   sentences are this section's real payload. */
.off-grid > .ocard.lead{grid-column:1 / -1}
/* The lead card's two-column grid is defined ONCE, with the image-header rules
   further down this file — search `.ocard.lead .oimg`. A second definition used
   to sit here (.8fr/1.2fr, 44px gap, align-items:start) with six hand-placement
   rules for .ic/.trigger/h3/p/.subs/.explore. Those six were written before the
   card grew an image header, which moved every one of them inside .oimg or
   .obody, so they matched zero elements; and the grid declaration itself was
   overridden property-for-property by the later block at equal specificity.
   All of it was dead. Do not add a second definition here again. */
@media(max-width:800px){.off-grid > .ocard.lead{grid-column:auto}}

/* 404 / 410 page — the hero grid without the tall homepage measure. The page
   is short, so it gets tighter vertical padding and a centred column rather
   than a full-height band with an empty lower half. */
.nf-grid{align-items:center;padding-top:72px;padding-bottom:88px}
.nf-grid .hero-sub{max-width:30em}
@media(max-width:960px){.nf-grid{padding-top:56px;padding-bottom:64px}}
.ocard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px 26px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.ocard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe0c6}
.ocard .ic{width:50px;height:50px;border-radius:13px;background:#EAF6DF;color:var(--forest);display:grid;place-items:center;margin-bottom:18px}
.ocard .trigger{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);display:block;margin-bottom:9px}
.ocard h3{font-size:1.3rem}
.ocard>p{font-size:.97rem;color:var(--muted);margin-top:10px}
.ocard .subs{list-style:none;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ocard .subs a{font-size:.84rem;font-weight:600;color:var(--forest);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:.15s;display:inline-block}
.ocard .subs a:hover{background:var(--forest);color:var(--white);border-color:var(--forest)}
.ocard .explore{margin-top:auto;padding-top:20px;font-weight:700;color:var(--forest);display:inline-flex;align-items:center;gap:8px;font-size:.94rem}
.ocard .explore svg{transition:transform .18s ease}
.ocard:hover .explore svg{transform:translateX(4px)}
@media(max-width:800px){.off-grid{grid-template-columns:1fr}}

/* ============================================================
   PROCESS — numerals take --forest. Do NOT reach for a brass/gold
   accent (#B0863A) here; it is not a token in this palette.
   Informational cards, so deliberately no hover state: motion
   should encode clickability and these are not links.
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;counter-reset:s}
.step{position:relative;padding:30px 26px;border-radius:16px;background:var(--white);border:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:2rem;color:var(--forest);opacity:.55;font-weight:500;display:block}
.step h3{font-size:1.15rem;margin:10px 0 8px}
.step p{font-size:.95rem;color:var(--muted)}
@media(max-width:640px){
  .steps{grid-template-columns:1fr;gap:0}
  /* keep the sequence reading as a sequence once stacked */
  .step{border-radius:0;border-bottom:0}
  .step:first-child{border-radius:16px 16px 0 0}
  .step:last-child{border-radius:0 0 16px 16px;border-bottom:1px solid var(--line)}
}

/* ============================================================
   INDEPENDENCE — the page's centrepiece, set as a document
   rather than as components.

   It has been through three forms. Five icon-and-bar feature rows
   inside a panel inside a section read as a product feature list.
   Numbered clauses with hairline rules were still five identical
   bars. A referral map above them was worse again: three nodes and
   two arrows is affirmative flow grammar — it draws what DOES
   happen — while this section's load-bearing claim is negative,
   about what a referrer cannot do. You cannot draw an absence as a
   box, and drawing the referrer as a peer node of equal width,
   radius and border reassembled the very relationship the copy
   exists to deny. That is the same objection homepage-plan.md:160
   already makes to photography here. It was deleted, not restyled.

   Its cut-line also shared SEVEN verbatim four-word phrases with
   the clauses immediately below it — it restated its own captions.
   A diagram that repeats its adjacent text is decoration.

   What replaces it is not another component. One margin track runs
   the full height of the band; the eyebrow sits above it and the
   clause letters hang in it, so a single alignment line carries the
   whole thing. Nothing here has a border-radius, a fill or a rule
   between items. Space separates the clauses; the .updoc grid below
   is shared with /independence/, which carries the full instrument.

   Do not reintroduce a panel. .ind::before paints the blueprint
   texture homepage-plan.md:158 asks for, and .ind-panel's opaque
   120deg gradient was covering it — the band's only hand-made
   surface survived just in the 24px page gutters.
   ============================================================ */
.ind{background:var(--forest-3);color:var(--white);position:relative;overflow:hidden;padding:112px 0}
.ind::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(207,234,216,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(207,234,216,.07) 1px,transparent 1px);
  background-size:26px 26px;
}
.ind .wrap{position:relative;z-index:1}
.ind .eyebrow{margin-bottom:20px}
/* Asymmetric split: the statement holds the left, the quoted clauses the
   right. The clause column keeps its own .updoc margin track, so the letters
   still hang in a gutter and the two pages stay set the same way.
   This does NOT reintroduce the two-column layout homepage-plan.md warns
   about — that warning is against splitting the five clauses across two
   columns, where a reader skims past the conflict undertaking. Here the
   clauses stay in one ordered column; only the head sits beside them, and
   the conflict undertaking is one of the two the home page quotes. */
.ind-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,100px);align-items:start}
/* the clause letters sit beside their clauses, not adrift from them: the
   104px gutter is right for the full instrument at /independence/ measure,
   too wide inside the narrower right-hand column here */
.ind-split .updoc{grid-template-columns:72px minmax(0,1fr)}
/* 4.0x over the clause body. The old band ran seven type sizes spanning
   1.33x in total, so nothing dominated and the eye had no entry point —
   which is what "just bars" describes. One deliberate scale jump fixes it. */
/* 4.15rem was sized for a single full-width column. In the 481px left column
   of .ind-split it breaks "On your / matter, we / act for you / alone." over
   four cramped lines; at 3.3rem it sets in three. The column governs the wrap,
   so there is deliberately no max-width here. */
.ind h2{color:var(--white);font-weight:600;letter-spacing:-.021em;line-height:1.06;
  font-size:clamp(2.05rem,4.1vw,3.3rem);margin:0}
/* ch, not em. An em max-width resolves against the element's OWN font-size,
   which is how the old .undertakings p{max-width:54em} came out at ~936px and
   never bit — lines ran 110-115 characters. 54ch is the exact equivalent of
   the 36em this replaces, so nothing moves; the unit just stops lying. In the
   split the 481px column governs anyway (51 CPL); the cap only bites once the
   band collapses to one column below 820px, where it gives 64 CPL. */
.ind .lead{color:#CFE0D3;font-size:1.06rem;line-height:1.62;max-width:54ch;margin-top:24px}
/* three text colours, not seven: --white 14.04:1, #CFE0D3 10.20:1 and
   --lime-soft 10.44:1 on --forest-3. Six near-identical desaturated greens
   chosen one at a time is a fingerprint, not a palette. */

.cc-lines{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.cc-line{display:flex;align-items:flex-start;gap:14px;background:var(--forest-2);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 20px;transition:border-color .18s ease}
a.cc-line:hover{border-color:var(--lime)}
.cc-line svg{color:var(--lime);flex:none;margin-top:2px}
.cc-line b{color:var(--white);font-weight:700}
.cc-line span{color:#CFE0D3;font-size:.95rem}
@media(max-width:820px){
  .ind{padding:78px 0}
  .ind-split{grid-template-columns:1fr;gap:44px}
}



/* ============================================================
   FAQ — native details/summary. No JS accordion: the answers stay
   in the DOM for crawlers and AI retrieval even when collapsed.
   ============================================================ */
.faq{max-width:46em;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;font-weight:600;font-size:1.05rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:26px;height:26px;border-radius:50%;background:#EAF6DF;color:var(--forest);display:grid;place-items:center;transition:.2s ease;font-size:1.1rem;line-height:1}
.faq details[open] summary .pm{background:var(--forest);color:var(--white);transform:rotate(45deg)}
.faq details p{padding:0 4px 22px;color:var(--muted);font-size:1rem}
.faq details p a{color:var(--forest);text-decoration:underline}

/* ============================================================
   CLOSING CTA — one button only. A closing band with two
   equal-weight choices closes nothing. No sticky bar anywhere on
   this site: following a grieving or frightened visitor down the
   page with a fixed CTA reads as pressure selling.
   ============================================================ */
.cta-final{
  background-color:var(--forest-3);color:var(--white);position:relative;overflow:hidden;
  background-image:
    linear-gradient(100deg,rgba(9,44,33,.95) 0%,rgba(9,44,33,.82) 42%,rgba(10,50,37,.5) 100%),
    var(--hero-img,none);
  background-size:cover;background-position:center right;background-repeat:no-repeat;
}
@media(max-width:900px){
  .cta-final{background-image:linear-gradient(180deg,rgba(9,44,33,.94),rgba(10,50,37,.84)),var(--hero-img,none)}
}
.cta-final::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:linear-gradient(rgba(207,234,216,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(207,234,216,.07) 1px,transparent 1px);
  background-size:26px 26px;
}
.cta-final .wrap{position:relative;z-index:1}
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.cta-grid h2{color:var(--white);font-size:clamp(2rem,3.6vw,2.8rem)}
.cta-grid p.lead{color:#CFE0D3;margin-top:16px;font-size:1.1rem}
.cta-actions{display:flex;flex-direction:column;gap:12px}
.cc-line small{display:block;color:#B8C8BD;font-size:.8rem}
.cta-fine{font-size:.78rem;color:var(--fine);margin-top:26px;line-height:1.7}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   ACCESSIBILITY — skip link. First focusable thing in the document,
   off-canvas until focused, so a keyboard visitor is not walked
   through the whole nav and mega-menu on every page.
   ============================================================ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--lime);color:var(--forest-3);
  font-weight:700;font-size:.9rem;
  padding:12px 20px;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

/* ============================================================
   PLACEHOLDERS — every unresolved fact the client still owes us.

   Defined last on purpose: these have to beat whatever component
   rule they land inside (.nav-tel, .cc-line small,
   .foot-legal b all set their own colour), and a single-class
   selector only wins on source order.

   Rendered as a dashed amber chip in the label font. Amber appears
   nowhere else in this system, so a marker can never be mistaken
   for content — which is the entire point: three of these are the
   ownership position, the phone number and the registered practice
   name, and a law firm publishing a wrong one of those is the most
   serious exposure on the site.

   BEFORE ANY DEPLOY, from the project root:
       grep -rnE 'class="[^"]*todo' --include='*.html' .
   A non-empty result means the site is not shippable.
   Match on 'class="[^"]*todo', never on 'class="todo' — some markers
   (.nav-tel, and the rail and FAQ markers on /independence/) carry todo as
   their SECOND class, and a naive prefix match walks straight past them.
   And keep shell globs out of this comment: a stray star-slash closes it
   early and silently drops the rule below.
   ============================================================ */
/* The doubled class is deliberate. .todo is an override utility that has to
   beat whatever component rule it lands inside, and single-class specificity
   is not enough: `.ocard>p` (0,1,1) and `.cc-line small` (0,1,1) both outrank
   a bare `.todo` (0,1,0), which silently rendered a marker as ordinary muted
   body copy. `.todo.todo` is (0,2,0) and wins without touching the markup.
   Being defined last in the file is not sufficient — source order only breaks
   ties at EQUAL specificity. */
.todo.todo{
  display:inline-block;
  font-family:var(--mono);font-style:normal;font-weight:500;
  font-size:.86em;letter-spacing:.02em;line-height:1.5;
  color:var(--amber-ink);
  background:rgba(201,154,58,.14);
  /* the dashed outline is what identifies a chip as a marker rather than
     content, so it carries the 3:1 non-text floor: --amber is only 2.40:1
     against the nav, --amber-ink is 6.15:1 */
  border:1px dashed var(--amber-ink);
  border-radius:6px;
  padding:2px 8px;
}
/* Contrast must be measured against the COMPOSITED background, not the band
   token: the chip paints its own translucent amber fill on top, which lifts
   the background and drops the ratio. --amber measured 5.46:1 against bare
   --forest-3 but only 4.24:1 once its own fill is composited, and 3.18:1 on
   --forest-2 (the .ind-panel gradient and the .cc-line rows) — both fail at
   the ~11-12px these chips compute to. --amber-lift clears it on both. */
.todo.todo.on-dark{color:var(--amber-lift);background:rgba(201,154,58,.16);border-color:var(--amber)}

/* ============================================================
   SUB-PAGE SHELL — every page except the homepage and 404.
   Compact dark page-head, then a prose column with a rail.
   The homepage hero is deliberately NOT reused: it is a
   full-height band with a router card, and a practice page
   needs the reader in the content within one screen.
   ============================================================ */
.phead{
  background-color:var(--forest-3);color:var(--white);position:relative;overflow:hidden;padding:0;
  background-image:
    linear-gradient(100deg,rgba(9,44,33,.95) 0%,rgba(9,44,33,.86) 40%,rgba(10,50,37,.5) 100%),
    var(--hero-img,none);
  background-size:cover;background-position:center right;background-repeat:no-repeat;
}
@media(max-width:900px){
  .phead{
    background-image:
      linear-gradient(180deg,rgba(9,44,33,.94) 0%,rgba(9,44,33,.9) 60%,rgba(10,50,37,.82) 100%),
      var(--hero-img,none);
  }
}
.phead .wrap{position:relative;z-index:1;padding-top:40px;padding-bottom:58px}
.phead h1{font-size:clamp(2rem,4vw,3.1rem);margin:16px 0 0;max-width:17em}
.phead h1 em{font-style:italic;color:var(--lime);font-weight:500}
.phead p.lead{color:#CFE0D3;margin-top:18px;font-size:1.12rem;max-width:46em}
.phead .hero-cta{margin-top:28px}

/* breadcrumbs — mono, so they read as system furniture not content */
.crumbs{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#8FA897;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{color:#8FA897;border-bottom:1px solid transparent;transition:.15s}
.crumbs a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.crumbs span[aria-current]{color:#CFE0D3}
.crumbs .sep{opacity:.5}

.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:56px;align-items:start}
@media(max-width:960px){.pgrid{grid-template-columns:1fr;gap:40px}}

/* --- prose: the only place in this system with long-form body copy ------ */
.prose{max-width:44em}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.9rem);margin:44px 0 0}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.12rem;margin:30px 0 0}
.prose p{margin-top:14px;color:var(--muted);font-size:1.02rem}
.prose>p:first-of-type{font-size:1.1rem;color:var(--ink)}
.prose ul,.prose ol{margin:16px 0 0 22px;color:var(--muted);font-size:1.02rem}
.prose li{margin-top:9px}
.prose li::marker{color:var(--forest)}
/* links underlined in prose: legal content is exactly where a reader must be
   able to see what is a link without hovering */
.prose a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--lime-2,#2E7D32)}
.prose strong{color:var(--ink);font-weight:600}

/* pull-quote for a statutory point worth isolating */
.pnote{margin-top:26px;padding:20px 24px;background:var(--paper);border-left:3px solid var(--lime);border-radius:0 12px 12px 0}
.pnote p{margin-top:0;color:var(--ink);font-size:1rem}
.pnote p+p{margin-top:10px}

/* --- rail ---------------------------------------------------------------- */
.prail{display:flex;flex-direction:column;gap:16px;position:sticky;top:98px}
@media(max-width:960px){.prail{position:static}}
.rail-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 22px}
.rail-card.dark{background:var(--forest-3);border-color:rgba(255,255,255,.1);color:#CFE0D3}
.rail-card h2,.rail-card h3{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 12px}
.rail-card.dark h2,.rail-card.dark h3{color:var(--lime-soft)}
.rail-card p{font-size:.94rem;color:var(--muted);margin-top:10px}
.rail-card.dark p{color:#CFE0D3}
.rail-card ul{list-style:none;margin:0}
.rail-card li+li{margin-top:2px}
.rail-card li a{display:block;padding:9px 0;font-size:.94rem;font-weight:600;color:var(--forest);border-bottom:1px solid var(--line)}
.rail-card li:last-child a{border-bottom:0}
.rail-card li a:hover{color:var(--ink)}
.rail-card .btn{width:100%;margin-top:14px}

/* --- sub-matter cards on a hub page ------------------------------------- */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
@media(max-width:700px){.mgrid{grid-template-columns:1fr}}
.mcard{display:block;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px 22px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0c6}
.mcard b{display:block;font-size:1.06rem;color:var(--ink)}
.mcard span{display:block;margin-top:8px;font-size:.94rem;color:var(--muted)}

/* anchor offset so a #target does not land under the 74px sticky header */
:target{scroll-margin-top:96px}
main :is(h1,h2,h3,section,details){scroll-margin-top:96px}

/* ============================================================
   IMAGE BAND — carried from the Realty build so the two sites
   read as the same hand: 20px radius, cover-fit, and a green
   gradient wash so photography sits inside the forest palette
   instead of punching a hole in it.
   The imagery is ILLUSTRATIVE. It never depicts this firm's
   people, premises, clients or matters, and captions must never
   imply that it does — the live site's stock "team" photo is the
   exact failure this rule exists to prevent.
   ============================================================ */
.img-band{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  margin-top:44px;
}
.img-band img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover;display:block}
.img-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(10,50,37,.52));
}
.img-band .fig-cap{
  position:absolute;left:20px;bottom:16px;z-index:1;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:#EAF6EE;background:rgba(3,13,8,.5);padding:6px 11px;border-radius:4px;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
/* on a page-head the band sits tight under the dark band and needs no top gap */
.phead + .img-wrap{margin-top:0}
.img-wrap{padding:0}
.img-wrap .wrap{padding-top:34px;padding-bottom:0}
@media(max-width:640px){
  .img-band{border-radius:14px;margin-top:30px}
  .img-band img{height:clamp(190px,46vw,260px)}
  .img-band .fig-cap{left:12px;bottom:12px;font-size:.58rem}
}

/* ============================================================
   ICON NORMALISATION
   Stroke weight set here rather than per-glyph so every icon
   resolves to ~1.65 device px at its rendered size. Inline
   stroke-width attributes on the SVGs are overridden.
   Every icon on this site sits beside its own text label, so
   all of them are decorative and all carry aria-hidden.
   ============================================================ */
.ocard .ic svg{stroke-width:1.75}
.cc-line>svg,.qlink>svg{stroke-width:2}
.basis-item>svg{stroke-width:2.2}
.explore svg{stroke-width:2.4}
.hero-note svg{stroke-width:2.4;color:var(--lime)}

/* ============================================================
   TICK LIST — for genuinely actionable lists only. A tick beside
   a statement of law is a claim that it is settled; a tick beside
   "have this ready before you call" is an instruction.
   ============================================================ */
.prose ul.ticks{list-style:none;margin:18px 0 0;padding:0}
.prose ul.ticks li{
  position:relative;padding-left:32px;margin-top:11px;color:var(--muted);
}
.prose ul.ticks li::before{
  content:"";position:absolute;left:0;top:.35em;width:17px;height:17px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3D2E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ============================================================
   STAT ROW — statutory numerals set large in the mono face.
   This content is made of numbers (10 business days, 12 months,
   5 business days, 0.25%) and readers scanning a legal page hunt
   digits. Every stat carries its source beneath it: a number
   without its section reference is an unsourced claim.
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:30px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px}
.stat b{display:block;font-family:var(--mono);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:500;color:var(--forest);line-height:1}
.stat span{display:block;margin-top:9px;font-size:.9rem;color:var(--ink);font-weight:600}
.stat small{display:block;margin-top:5px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   COMPARISON TABLE — attribute-by-attribute distinctions that
   prose buries (a power of attorney versus an enduring
   guardianship). Scrolls inside its own container so a narrow
   viewport never scrolls the page body sideways.
   ============================================================ */
.ctable-wrap{overflow-x:auto;margin-top:28px;border:1px solid var(--line);border-radius:14px}
.ctable{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
.ctable th,.ctable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);background:var(--paper);font-weight:500}
.ctable th[scope=row]{color:var(--ink);font-weight:600;width:30%}
.ctable td{color:var(--muted)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable tr.emph td,.ctable tr.emph th{background:rgba(141,224,75,.07)}

/* ============================================================
   TIMELINE — a branching statutory clock. HTML/CSS not SVG, so
   it reflows at 320px, inherits currentColor, and stays
   selectable and translatable.
   ============================================================ */
.tline{list-style:none;margin:30px 0 0;padding:0;position:relative}
.tline>li{position:relative;padding-left:56px;padding-bottom:26px}
.tline>li::before{
  content:"";position:absolute;left:17px;top:26px;bottom:-4px;width:2px;background:var(--line);
}
.tline>li:last-child{padding-bottom:0}
.tline>li:last-child::before{display:none}
.tline .day{
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:#EAF6DF;color:var(--forest);
  font-family:var(--mono);font-size:.66rem;font-weight:500;line-height:1;text-align:center;
}
.tline b{display:block;color:var(--ink);font-size:1.02rem}
.tline p{margin-top:7px!important;font-size:.96rem}
.tline .fork{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.tline .fork{grid-template-columns:1fr}}
.tline .fork>div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tline .fork b{font-size:.95rem}
.tline .fork p{font-size:.9rem;margin-top:6px!important}

/* ============================================================
   ARTICLES
   A separate register from the practice pages: longer form,
   answer-first, and built to be quoted. The key-points box at
   the top exists because both a scanning reader and a retrieval
   system want the answer before the argument.
   ============================================================ */
.a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:18px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#8FA897}
.a-meta .dot{opacity:.45}

/* answer-first summary. Not a pull-quote: it is the article's conclusion,
   stated before the reasoning, so a reader who leaves after 20 seconds
   still leaves with the answer. */
.keypoints{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:0 16px 16px 0;padding:22px 26px;margin:0 0 30px}
.keypoints h2{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forest);margin:0 0 12px;font-weight:500}
.keypoints ul{list-style:none;margin:0;padding:0}
.keypoints li{position:relative;padding-left:26px;margin-top:10px;color:var(--ink);font-size:1rem;line-height:1.55}
.keypoints li:first-child{margin-top:0}
.keypoints li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--lime)}

/* index */
.alist{display:grid;gap:16px;margin-top:40px}
.acard{display:block;background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:26px 26px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.acard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0c6}
.acard .cat{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.acard b{display:block;font-size:1.22rem;color:var(--ink);margin-top:9px;line-height:1.25}
.acard span{display:block;margin-top:10px;font-size:.97rem;color:var(--muted)}
.acard .go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:700;
  font-size:.92rem;color:var(--forest)}
.acard:hover .go svg{transform:translateX(4px)}
.acard .go svg{transition:transform .18s ease}
@media(min-width:900px){.alist{grid-template-columns:1fr 1fr}}

/* a group heading inside the index */
.agroup{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:40px 0 -22px;grid-column:1/-1}
.agroup:first-child{margin-top:0}

/* ============================================================
   PRACTICE MOSAIC — image-led practice cards.
   The reference for this was a retail bento with headlines set
   over photographs. That does not survive here: these cards
   carry real legislative sentences and those are the section's
   payload, so the image takes the header and the copy keeps a
   solid surface underneath. Only the mono trigger label sits on
   the photograph, where the gradient guarantees it contrast.
   ============================================================ */
.ocard{padding:0;overflow:hidden}
.oimg{position:relative;overflow:hidden;background:var(--forest-3);aspect-ratio:16/9}
.oimg img{width:100%;height:100%;object-fit:cover;display:block}
.oimg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,50,37,.06) 38%,rgba(10,50,37,.78));
}
.oimg .trigger{
  position:absolute;left:20px;right:20px;bottom:13px;z-index:1;
  color:#EAF6EE;margin:0;
}
.ocard .obody{padding:0 26px 28px;display:flex;flex-direction:column;flex:1 1 auto}
/* .ocard .explore already carries margin-top:auto; it does nothing until the
   element it sits in is a flex column that fills the card. Now it pins the
   link to the bottom, so links line up across a row of unequal cards. */
/* The lime tile straddles the image edge — signature device kept, and it stops
   the photograph and the copy reading as two unrelated blocks. It sits RIGHT:
   at left it collided with the trigger label, which shares that corner and was
   being clipped by it. */
.ocard .obody .ic{
  margin-top:-27px;margin-left:auto;position:relative;z-index:2;
  box-shadow:0 0 0 4px var(--white);
}
/* the label now owns the bottom-left and stops clear of the tile */
.oimg .trigger{right:96px}
.ocard:hover .oimg img{transform:scale(1.03)}
.oimg img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.ocard:hover .oimg img{transform:none}}

/* lead card: photograph down the left, content beside it.
   Two internal columns so the spanning card actually uses its width — a single
   measure-capped paragraph across a 1132px card leaves ~450px of dead space and
   reads unfinished. align-items:stretch (not start) is what lets the photo run
   the full height of the content beside it, which is why .oimg drops its 16/9
   here and takes height:100% instead. That makes the desktop image slot roughly
   1.24:1, so ANY photograph used on this card has to hold its subject in the
   central ~70% horizontally: it is cropped tall here and 16:9 below 800px. */
@media(min-width:801px){
  .off-grid > .ocard.lead{
    display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);
    column-gap:0;align-items:stretch;
  }
  .ocard.lead .oimg{grid-column:1;grid-row:1;height:100%;aspect-ratio:auto;min-height:340px}
  .ocard.lead .obody{grid-column:2;grid-row:1;padding:32px 34px 34px;display:flex;flex-direction:column}
  .ocard.lead .obody .ic{margin-top:0;box-shadow:none}
  /* Two gradients, not one. The horizontal wash carries the photo into the
     white content panel, but it is lightest at bottom-left — exactly where the
     trigger label sits — so a second bottom gradient guarantees the label its
     contrast regardless of what the photograph is doing there. */
  .ocard.lead .oimg::after{
    background:linear-gradient(90deg,rgba(10,50,37,.10),rgba(10,50,37,.55)),
               linear-gradient(180deg,rgba(10,50,37,0) 62%,rgba(10,50,37,.62));
  }
  .ocard.lead .oimg .trigger{left:22px;right:22px;bottom:20px}
}
@media(max-width:800px){
  .ocard.lead .oimg{aspect-ratio:16/9}
}

/* ============================================================
   UNDERTAKINGS — one margin track, no rules, no boxes.

   .updoc is a two-track grid: a gutter for the clause letter and a
   column for everything else. Both the short form in the homepage
   .ind band and the full instrument on /independence/ use it, so the
   two cannot drift apart.

   Lettered (a)-(e), not numbered 01-05, for two reasons. Australian
   drafting letters paragraphs, so the marker is genre rather than
   web-pattern. And "Three steps" sits IMMEDIATELY above this band
   already setting 01/02/03 in 2rem mono via .step::before — a second
   mono numeral run 600px later reads as one template, twice.

   The homepage quotes clauses (a) and (d) at their real letters. The
   gap is deliberate: it is an extract of an instrument that exists in
   full elsewhere, and the letters must match across the two pages or
   the document effect collapses.

   Nothing here carries a border-radius, a fill, or a rule between
   items. The one rule that earns its place is .uk-foot's, because it
   terminates the block the way a document's foot does.
   ============================================================ */
.updoc{display:grid;grid-template-columns:104px minmax(0,1fr)}
.updoc > *{grid-column:2}
.uk-in{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;margin:62px 0 0}
/* display:contents so each li's letter and clause land in the parent grid's
   two tracks. Any override of these grid-columns must restate them at
   matching specificity — .uk li p is (0,3,1) and silently outranks a bare
   .updoc>* rule, which drops the clause into an implicit third track and
   crushes the measure. That is exactly what happened at 390px in testing. */
.uk{list-style:none;margin:0;padding:0;display:contents}
.uk li{display:contents}
.uk li .m{grid-column:1;font-family:var(--mono);font-size:.9rem;font-weight:500;
  padding-top:.34em;font-variant-numeric:tabular-nums}
.uk li p{grid-column:2;line-height:1.66;max-width:68ch}
.uk b{font-weight:600}
.uk-foot{padding-top:20px;border-top:1px solid;font-family:var(--mono);
  font-size:.8rem;letter-spacing:.04em;max-width:76ch;line-height:1.7}
.uk-foot a{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* --- on the forest band (homepage, and the band on /independence/) --- */
.ind .uk-in,.ind .uk li .m{color:var(--lime-soft)}
/* first clause aligns to the top of the column, not 44px below it */
.ind .uk li .m,.ind .uk li p{margin-top:44px}
.ind .uk li:first-child .m,.ind .uk li:first-child p{margin-top:0}
.ind .uk li p{color:#CFE0D3;font-size:1.04rem}
.ind .uk b{color:var(--white)}
.ind .uk-foot{margin-top:44px;border-top-color:rgba(255,255,255,.15);color:#CFE0D3}
.ind .uk-foot a{font-size:1.02rem;letter-spacing:0;font-family:var(--sans)}
.ind .uk-foot a{color:var(--lime-soft);border-bottom-color:rgba(184,238,134,.45)}

/* --- on paper, inside a sub-page prose column ---
   .prose is 44em, so the gutter comes down to 66px or the measure suffers.
   .prose p and .prose ol carry their own margins and colours; every one of
   those is restated here rather than inherited, because .prose ol{margin-left:22px}
   would otherwise indent a grid that is already providing its own gutter. */
.prose .updoc{grid-template-columns:66px minmax(0,1fr);margin-top:22px}
.prose .uk{margin:0;padding:0;font-size:inherit}
/* .prose p{font-size:1.02rem} is (0,1,1) and outranks .uk-in (0,1,0), which
   was rendering the lead-in at body size instead of as a mono micro-label. */
.prose .uk-in{color:var(--forest);margin:34px 0 0;font-size:.78rem;letter-spacing:.14em}
.prose .uk li{margin:0}
.prose .uk li .m{color:var(--forest);margin-top:26px}
.prose .uk li p{color:var(--muted);font-size:1.02rem;margin-top:26px;max-width:none}
.prose .uk b{color:var(--ink)}
.prose .uk-foot{margin-top:34px;border-top-color:var(--line);color:var(--muted)}
.prose .uk-foot a{color:var(--forest)}

@media(max-width:820px){
  /* .ind-split .updoc is (0,2,0) and outranks a bare .updoc here even from
     inside a media query, so both breakpoints have to name it explicitly. */
  .updoc,.ind-split .updoc{grid-template-columns:56px minmax(0,1fr)}
  .ind .uk li .m,.ind .uk li p{margin-top:36px}
}
/* the margin track narrows on mobile but is never collapsed: the alignment
   line IS the design, and losing it at 375px loses it where the block is
   longest. Verified at 390px — the grid resolves to 34px + 320px with no
   horizontal overflow. */
@media(max-width:520px){
  .updoc,.prose .updoc,.ind-split .updoc{grid-template-columns:34px minmax(0,1fr)}
  .ind .lead{font-size:1rem;max-width:none}
  .uk-in{margin-top:46px}
  .uk li .m{grid-column:1;font-size:.78rem}
  .uk li p{grid-column:2;max-width:none}
  .ind .uk li .m,.ind .uk li p{margin-top:32px;font-size:.98rem}
  .ind .uk li .m{font-size:.78rem}
}

/* ============================================================
   CONTACT FORM — shaped by what /contact-us/ actually asks for.

   The page argues, at length, that a visitor should send their name,
   their contact details and the TYPE of matter, and hold the detail
   until a conflict check has run: once the firm holds confidential
   information about a dispute, obligations attach whether or not it
   ends up acting. A conventional "tell us about your matter" textarea
   would invite the exact thing the page spends four paragraphs asking
   people not to do, so there is no free-text field here at all. The
   two open-ish inputs are a party NAME and a DATE, which is what a
   conflict check and a limitation check need and neither of which is
   the substance of a dispute.

   Posts to Netlify Forms: data-netlify, a hidden form-name, and a
   honeypot. It is inert until the site is actually deployed to
   Netlify and the project is created — see HANDOFF.
   ============================================================ */
.gform{margin-top:22px}
.gf-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.gf-field{display:flex;flex-direction:column;min-width:0}
.gf-field label{font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:7px;display:flex;align-items:baseline;gap:8px}
.gf-req{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.gf-field input,.gf-field select{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.gf-field input:hover,.gf-field select:hover{border-color:#c3d2bd}
.gf-field input:focus,.gf-field select:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(141,224,75,.28)}
.gf-help{font-size:.84rem;color:var(--muted);margin-top:7px;line-height:1.45}
.gf-note{background:var(--paper);border-left:3px solid var(--forest);border-radius:0 10px 10px 0;
  padding:16px 18px;font-size:.94rem;color:var(--muted);line-height:1.6;margin:6px 0 20px}
.gf-note strong{color:var(--ink)}
.gform .btn{width:auto}
.gf-fine{font-size:.84rem;color:var(--muted);line-height:1.6;margin-top:16px;max-width:46em}
.gf-fine a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.gf-row{grid-template-columns:1fr;gap:18px}.gform .btn{width:100%}}