/* Fern & Flour, Enterprise tier.

   One coherent system across public pages and application screens, which is
   what section 10 asks for. The public pages carry the Signature "Ledger"
   direction forward unchanged in principle: a visible four column rule grid,
   numbered sections, hard-edged photography. The console is the same brand,
   the same type and the same palette at a working density, because it is the
   same company and the people using it are the same people.

   The brand itself is untouched: same logo, same plum and sage on cream, same
   Abel and Source Serif 4. Section 3 makes those shared across all five tiers.

   The console layer adds the reusable pieces section 10 names: tables, filters,
   status labels, side panels, confirmation dialogs, permission notices and
   activity entries. Dense screens are adapted for narrow widths rather than
   being shrunk into an unusable column: the requests table becomes a list of
   cards, not a horizontal scrollbar. */

@font-face { font-family:'Abel'; src:url('../../shared/fonts/abel-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('../../shared/fonts/source-serif-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('../../shared/fonts/source-serif-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root{
  --ink:#121212; --ink-soft:#4A433F; --ink-faint:#8A817B;
  --plum:#A7496D; --plum-deep:#83364F; --plum-wash:#F6EAEF;
  --sage:#818B7E; --sage-deep:#5D6659; --sage-wash:#EDF0EB;
  --cream:#F5EFE6; --warm:#EAE6E1; --paper:#FFFFFF;
  --amber:#8A6114; --amber-wash:#FBF1DC;
  --red:#8C1D18; --red-wash:#FBECEA; --red-line:#E0B4AE;

  --rule:color-mix(in srgb,#121212 13%,transparent);
  --rule-mid:color-mix(in srgb,#121212 26%,transparent);
  --rule-ink:#121212;

  --display:'Abel','Arial Narrow',sans-serif;
  --body:'Source Serif 4',Georgia,serif;

  --t--2:.76rem; --t--1:.875rem; --t-0:1.0625rem; --t-1:1.1875rem;
  --t-2:clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
  --t-3:clamp(1.7rem, 1.25rem + 2vw, 2.5rem);
  --t-4:clamp(2.4rem, 1.3rem + 4.4vw, 4.2rem);
  --t-5:clamp(2.8rem, 1.1rem + 6.6vw, 6.5rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:132px;

  --gut:clamp(18px,4.4vw,60px);
  --page:1320px;
  --measure:34ch;
  --article:34rem;

  --ease:cubic-bezier(.2,.75,.2,1);
  --fast:130ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
     font-size:var(--t-0);line-height:1.65;font-synthesis:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.02;margin:0;letter-spacing:.005em}
p{margin:0}
.sr{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:var(--gut);top:-60px;z-index:200;background:var(--ink);color:var(--cream);
      padding:12px 20px;font-family:var(--display);letter-spacing:.06em;transition:top var(--fast) var(--ease)}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
}

/* ============================================================== shared */
.led{position:relative;padding-inline:var(--gut);max-width:var(--page);margin-inline:auto}
.led__rules{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);
            pointer-events:none;margin-inline:var(--gut)}
.led__rules i{border-left:1px solid var(--rule)}
.led__rules i:last-child{border-right:1px solid var(--rule)}
.grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.pad{padding-inline:clamp(12px,1.4vw,20px)}
.num{font-family:var(--display);font-size:var(--t--1);letter-spacing:.2em;
     color:var(--plum-deep);text-transform:uppercase}
.section{padding-block:clamp(var(--s-8),7vw,var(--s-10))}
.section--tight{padding-block:clamp(var(--s-7),5vw,var(--s-8))}
.section--paper{background:var(--paper)}
.section--warm{background:var(--warm)}
.section--sage{background:var(--sage-wash)}
.muted{color:var(--ink-soft)}
.small{font-size:var(--t--1)}
.lead{font-size:var(--t-1);line-height:1.5;color:var(--ink-soft);max-width:var(--measure)}

.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
     padding:0 var(--s-6);border:1px solid var(--ink);background:transparent;color:var(--ink);
     font-family:var(--display);font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;
     text-decoration:none;cursor:pointer;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn--primary{background:var(--ink);color:var(--cream)}
.btn--primary:hover{background:var(--plum-deep);border-color:var(--plum-deep)}
.btn--ghost{border-color:var(--rule-mid)}
.btn--danger{border-color:var(--red);color:var(--red)}
.btn--danger:hover{background:var(--red);color:#fff}
.btn--sm{min-height:44px;padding:0 var(--s-4);font-size:var(--t--1)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;color:var(--ink)}
.btn--primary[disabled]:hover{background:var(--ink);color:var(--cream)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--plum-deep);
         text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.hdr{border-bottom:1px solid var(--rule-mid);background:var(--cream);position:sticky;top:0;z-index:60}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
         min-height:76px;max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.brand{display:inline-flex;align-items:center;gap:var(--s-3);text-decoration:none;flex:none}
.brand img{width:42px;height:42px}
.brand b{font-family:var(--display);font-size:1.32rem;font-weight:400;letter-spacing:.02em;display:block}
.brand i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
         color:var(--ink-soft);display:block;margin-top:1px}
.nav{display:flex;align-items:center;gap:0}
.nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--s-4);
       text-decoration:none;font-family:var(--display);font-size:1rem;letter-spacing:.06em;
       text-transform:uppercase;white-space:nowrap;border-left:1px solid var(--rule)}
.nav a:first-child{border-left:0}
.nav a:hover{color:var(--plum-deep)}
.nav a[aria-current="page"]{color:var(--plum-deep);box-shadow:inset 0 -2px 0 var(--plum)}
.burger{display:none;min-height:44px;min-width:44px;align-items:center;justify-content:center;
        padding:0 var(--s-4);border:1px solid var(--rule-mid);background:transparent;
        font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.sheet{display:none;border-top:1px solid var(--rule);background:var(--cream)}
.sheet a{min-height:52px;display:flex;align-items:center;padding:0 var(--gut);
         border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--display);
         font-size:1.08rem;letter-spacing:.08em;text-transform:uppercase}

.ftr{background:var(--ink);color:var(--cream);padding-block:var(--s-8) var(--s-6)}
.ftr .grid{border-top:1px solid color-mix(in srgb,#F5EFE6 22%,transparent)}
.ftr__c{padding:var(--s-5) clamp(12px,1.4vw,20px) 0;border-left:1px solid color-mix(in srgb,#F5EFE6 18%,transparent)}
.ftr__c:first-child{border-left:0;padding-left:0}
.ftr h2{font-size:var(--t--1);letter-spacing:.2em;text-transform:uppercase;
        color:color-mix(in srgb,#F5EFE6 58%,transparent);font-family:var(--display)}
.ftr p{margin-top:var(--s-3);font-size:var(--t--1);line-height:1.6}
.ftr a{color:inherit;text-underline-offset:4px}
.ftr__note{max-width:var(--page);margin:var(--s-7) auto 0;padding-inline:var(--gut)}
.ftr__note p{border-top:1px solid color-mix(in srgb,#F5EFE6 22%,transparent);padding-top:var(--s-4);
             font-size:var(--t--1);color:color-mix(in srgb,#F5EFE6 70%,transparent);max-width:none}

/* ======================================================= public pages */
.hero{position:relative;overflow:hidden}
.hero__grid{padding-top:clamp(var(--s-7),6vw,var(--s-9));padding-bottom:var(--s-7)}
.hero__num{grid-column:1;align-self:start}
.hero h1{grid-column:1 / 4;font-size:var(--t-5);max-width:13ch;margin-top:var(--s-4)}
.hero__say{grid-column:3 / 5;align-self:end;margin-top:var(--s-6)}
.hero__say p{max-width:32ch;color:var(--ink-soft)}
.hero__shot{position:relative;height:clamp(240px,42vw,460px);overflow:hidden;background:var(--warm)}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero .led__rules i{transform-origin:top;animation:ruleDraw 620ms var(--ease) both}
.hero .led__rules i:nth-child(2){animation-delay:80ms}
.hero .led__rules i:nth-child(3){animation-delay:160ms}
.hero .led__rules i:nth-child(4){animation-delay:240ms}
@keyframes ruleDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hero h1,.hero__num,.hero__say{animation:settle 560ms var(--ease) both;animation-delay:300ms}
.hero__say{animation-delay:420ms}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.strip{border-top:1px solid var(--rule-mid);border-bottom:1px solid var(--rule-mid)}
.strip__c{padding:var(--s-5) clamp(12px,1.4vw,20px) var(--s-6);border-left:1px solid var(--rule)}
.strip__c:first-child{border-left:0}
.strip__c h2{font-size:var(--t-1);margin-top:var(--s-3)}
.strip__c p{margin-top:var(--s-2);font-size:var(--t--1);color:var(--ink-soft)}

.ed{align-items:start}
.ed h2{grid-column:1 / 2;border-top:2px solid var(--rule-ink);padding-top:var(--s-4);
       padding-right:var(--s-5);font-size:var(--t-2)}
.ed__body{grid-column:2 / 4;border-top:1px solid var(--rule);padding-top:var(--s-4);
          padding-inline:clamp(12px,1.6vw,26px)}
.ed__body p+p{margin-top:var(--s-4)}
.ed__side{grid-column:4 / 5;border-top:1px solid var(--rule);padding-top:var(--s-4);
          padding-left:clamp(12px,1.6vw,26px)}
.ed__side p{font-family:var(--display);font-size:var(--t-2);line-height:1.22;color:var(--plum-deep)}
.figure{margin:0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.figure figcaption{margin-top:var(--s-3);font-size:var(--t--1);color:var(--ink-faint);
                   padding-inline:clamp(12px,1.4vw,20px)}
.bleed{padding-inline:0;max-width:none}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover}
.art{max-width:var(--article);margin-inline:auto}
.art>*+*{margin-top:var(--s-5)}
.art h2{font-size:var(--t-2);margin-top:var(--s-7)}
.art-meta{font-family:var(--display);font-size:var(--t--1);letter-spacing:.14em;
          text-transform:uppercase;color:var(--ink-soft)}
.j-row{display:grid;grid-template-columns:2.6rem minmax(0,300px) 1fr;gap:var(--s-5);
       align-items:start;padding:var(--s-6) 0;border-bottom:1px solid var(--rule);text-decoration:none}
.j-row:first-of-type{border-top:1px solid var(--rule-mid)}
.j-row img{width:100%;aspect-ratio:3/2;object-fit:cover}
.j-row h2,.j-row h3{font-size:var(--t-2);margin-top:var(--s-3)}
.j-row p{margin-top:var(--s-3);color:var(--ink-soft);max-width:46ch}
.j-row .more{margin-top:var(--s-3);display:inline-block;color:var(--plum-deep);
             text-decoration:underline;text-underline-offset:4px}
.facts{border-top:1px solid var(--rule-mid);margin-top:var(--s-7)}
.facts__c{padding:var(--s-5) clamp(12px,1.4vw,20px) var(--s-6);border-left:1px solid var(--rule)}
.facts__c:first-child{border-left:0}
.facts__c dt{font-family:var(--display);font-size:var(--t--2);letter-spacing:.18em;
             text-transform:uppercase;color:var(--ink-faint)}
.facts__c dd{margin:var(--s-3) 0 0;font-size:var(--t-1);line-height:1.45}
.facts__c a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}

/* menu, carried forward from Signature */
.menu{border-top:1px solid var(--rule-mid)}
.menu__cat{border-bottom:1px solid var(--rule-mid)}
.menu__cat[hidden]{display:none}
.menu__h{font-size:var(--t-2);padding:var(--s-5) 0 var(--s-4)}
.menu__list{border-top:1px solid var(--rule)}
.m-row{display:grid;grid-template-columns:2.2rem 1fr auto;gap:var(--s-4);align-items:baseline;
       width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule);
       padding:var(--s-4) 0;cursor:pointer;font:inherit;color:inherit;
       transition:background var(--fast) var(--ease)}
.m-row:hover,.m-row[aria-expanded="true"]{background:var(--paper);padding-inline:var(--s-3)}
.m-row[hidden]{display:none}
.m-row__n{font-family:var(--display);font-size:var(--t--2);letter-spacing:.14em;color:var(--ink-faint)}
.m-row__name{font-family:var(--display);font-size:var(--t-2);line-height:1.1}
.m-row__price{font-family:var(--display);font-size:1.08rem;color:var(--plum-deep);white-space:nowrap}
.m-detail{border-bottom:1px solid var(--rule);background:var(--paper)}
.m-detail[hidden]{display:none}
.m-detail__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-6);
              padding:var(--s-6) var(--s-3) var(--s-7)}
.m-detail img{width:100%;aspect-ratio:4/3;object-fit:cover}
.m-detail h3{font-size:var(--t--1);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-deep)}
.m-detail dl{margin:var(--s-4) 0 0;display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-5)}
.m-detail dt{font-family:var(--display);font-size:var(--t--1);letter-spacing:.1em;
             text-transform:uppercase;color:var(--ink-faint)}
.m-detail dd{margin:0;font-size:var(--t--1)}

/* ------------------------------------------------ locations, public */
.loc-list{border-top:1px solid var(--rule-mid);margin-top:var(--s-7)}
.loc-row{display:grid;grid-template-columns:2.6rem minmax(0,280px) 1fr auto;gap:var(--s-5);
         padding:var(--s-6) 0;border-bottom:1px solid var(--rule);align-items:start;text-decoration:none}
.loc-row img{width:100%;aspect-ratio:3/2;object-fit:cover}
.loc-row h2{font-size:var(--t-2)}
.loc-row p{margin-top:var(--s-3);color:var(--ink-soft);max-width:44ch}
.loc-row dl{margin:var(--s-4) 0 0;display:grid;grid-template-columns:auto auto;
            gap:var(--s-2) var(--s-5);font-size:var(--t--1);justify-content:start}
.loc-row dt{font-family:var(--display);font-size:var(--t--2);letter-spacing:.14em;
            text-transform:uppercase;color:var(--ink-faint)}
.loc-row dd{margin:0}
.loc-row .more{color:var(--plum-deep);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.loc-row:hover h2{color:var(--plum-deep)}
.example-tag{display:inline-block;font-family:var(--display);font-size:var(--t--2);letter-spacing:.14em;
             text-transform:uppercase;padding:5px 10px;border:1px dashed var(--rule-mid);
             color:var(--ink-soft);margin-left:var(--s-3);vertical-align:middle;white-space:nowrap}
.example-note{margin-top:var(--s-5);border-left:2px solid var(--rule-mid);padding-left:var(--s-4);
              font-size:var(--t--1);color:var(--ink-soft);max-width:60ch}
.example-note b{font-family:var(--display);font-weight:400;letter-spacing:.04em;color:var(--ink)}

/* ---------------------------------------------- planner (public) */
.plan{border:1px solid var(--rule-mid);background:var(--paper);margin-top:var(--s-7)}
.plan__steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule-mid);
             list-style:none;margin:0;padding:0}
.plan__step{padding:var(--s-4) var(--s-5);border-left:1px solid var(--rule);background:var(--warm)}
.plan__step:first-child{border-left:0}
.plan__step b{display:block;font-family:var(--display);font-size:var(--t--2);letter-spacing:.18em;
              text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.plan__step span{font-family:var(--display);font-size:1.05rem}
.plan__step[data-state="now"]{background:var(--paper);box-shadow:inset 0 -3px 0 var(--plum)}
.plan__step[data-state="now"] b{color:var(--plum-deep)}
.plan__step[data-state="done"]{background:var(--paper)}
.plan__step[data-state="done"] b::after{content:' \2713'}
.plan__body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.plan__main{padding:var(--s-6) var(--s-6) var(--s-7);min-width:0}
.plan__side{border-left:1px solid var(--rule-mid);padding:var(--s-6);background:var(--cream);min-width:0}
.plan__panel[hidden]{display:none}
.plan__foot{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
            border-top:1px solid var(--rule-mid);padding:var(--s-4) var(--s-6);background:var(--warm)}
fieldset{border:0;padding:0;margin:0}
legend{font-family:var(--display);font-size:var(--t-2);padding:0 0 var(--s-2)}
.hint{font-size:var(--t--1);color:var(--ink-soft);margin-top:var(--s-2);max-width:52ch}
.opts{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:var(--s-4);align-items:start;
     border:1px solid var(--rule-mid);padding:var(--s-4);cursor:pointer;background:var(--paper)}
.opt:hover{border-color:var(--ink)}
.opt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--plum)}
.opt b{font-family:var(--display);font-weight:400;font-size:1.16rem;display:block}
.opt span{display:block;font-size:var(--t--1);color:var(--ink-soft);margin-top:2px}
.opt em{font-style:normal;font-family:var(--display);color:var(--plum-deep);white-space:nowrap}
.opt:has(input:checked){border-color:var(--plum);background:var(--plum-wash)}
.opt:has(input:disabled){opacity:.5;cursor:not-allowed}
.opt:has(input:disabled):hover{border-color:var(--rule-mid)}
.field{margin-top:var(--s-5)}
.field label{display:block;font-family:var(--display);font-size:1.02rem;letter-spacing:.06em;
             text-transform:uppercase;margin-bottom:var(--s-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);border:1px solid var(--rule-mid);
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--t-0)}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 26%,transparent)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--red)}
.err{display:none;margin-top:var(--s-2);color:var(--red);font-size:var(--t--1)}
.field[data-invalid="true"] .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.sum h3{font-size:var(--t--1);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.sum__rows{margin-top:var(--s-4);border-top:1px solid var(--rule)}
.sum__row{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;
          border-bottom:1px solid var(--rule);font-size:var(--t--1)}
.sum__row i{font-style:normal;color:var(--ink-soft);display:block;font-size:var(--t--2)}
.sum__row b{font-family:var(--display);font-weight:400;white-space:nowrap}
.sum__tot{display:flex;justify-content:space-between;gap:var(--s-4);padding-top:var(--s-4);
          font-family:var(--display);font-size:1.32rem}
.sum__empty{margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--t--1)}
.tag{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--display);
     font-size:var(--t--2);letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;
     border:1px solid currentColor;white-space:nowrap}
.tag--estimate{color:var(--sage-deep)}
.tag--enquiry{color:var(--plum-deep)}
.tag--order{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.whatis{margin-top:var(--s-4);border-left:2px solid var(--sage);padding-left:var(--s-4);
        font-size:var(--t--1);color:var(--ink-soft)}
.whatis b{font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:.04em}
.warn{margin-top:var(--s-5);border:1px solid var(--red-line);background:var(--red-wash);
      padding:var(--s-4);font-size:var(--t--1);color:var(--red)}
.warn b{display:block;font-family:var(--display);font-weight:400;font-size:1.06rem;
        letter-spacing:.04em;margin-bottom:var(--s-2)}
.warn ul{margin:0;padding-left:1.1em}
.warn li+li{margin-top:var(--s-2)}
.review{border:1px solid var(--rule-mid);margin-top:var(--s-5)}
.review__row{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr auto;gap:var(--s-4);
             padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);align-items:baseline;font-size:var(--t--1)}
.review__row:last-child{border-bottom:0}
.review__row dt{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;
                color:var(--ink-faint);font-size:var(--t--2)}
.review__row dd{margin:0}
.review__edit{background:none;border:0;padding:4px 8px;font:inherit;font-size:var(--t--2);
              font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;
              color:var(--plum-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.status-box{display:none;gap:var(--s-3);padding:var(--s-5);border:1px solid;margin-top:var(--s-5)}
.status-box[data-show="true"]{display:flex}
.status-box--busy{background:var(--warm);border-color:var(--rule-mid);color:var(--ink-soft)}
.status-box--bad{background:var(--red-wash);border-color:var(--red-line);color:var(--red)}
.status-box--ok{background:var(--sage-wash);border-color:#A8C4AC;color:#1E3D24}
.status-box strong{display:block;font-family:var(--display);font-weight:400;font-size:1.18rem;letter-spacing:.03em}
.status-box p{margin-top:var(--s-2);font-size:var(--t--1)}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--plum);border-top-color:transparent;
      animation:spin .7s linear infinite;flex:none;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--plum);opacity:.5}}
.demo-note{margin-top:var(--s-5);border:1px dashed var(--rule-mid);padding:var(--s-4);
           font-size:var(--t--1);color:var(--ink-soft)}
.demo-note b{font-family:var(--display);font-weight:400;letter-spacing:.04em;color:var(--ink)}

/* customer status rail */
.track{border:1px solid var(--rule-mid);background:var(--paper);margin-top:var(--s-6)}
.track__head{padding:var(--s-6);border-bottom:1px solid var(--rule-mid);
             display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;align-items:flex-start}
.track__head h2{font-size:var(--t-3)}
.track__ref{font-family:var(--display);letter-spacing:.18em;color:var(--ink-faint);font-size:var(--t--1)}
.rail{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--rule-mid);
      list-style:none;margin:0;padding:0}
.rail__s{padding:var(--s-4) var(--s-3) var(--s-5);border-left:1px solid var(--rule)}
.rail__s:first-child{border-left:0}
.rail__s b{display:block;font-family:var(--display);font-size:var(--t--2);letter-spacing:.16em;
           color:var(--ink-faint);font-weight:400}
.rail__s span{display:block;margin-top:var(--s-2);font-family:var(--display);font-size:1.02rem;line-height:1.2}
.rail__s[data-state="done"]{background:var(--sage-wash)}
.rail__s[data-state="done"] b{color:var(--sage-deep)}
.rail__s[data-state="now"]{background:var(--ink);color:var(--cream)}
.rail__s[data-state="now"] b{color:color-mix(in srgb,#F5EFE6 70%,transparent)}
.rail__s[data-state="off"]{background:var(--red-wash)}
.track__now{padding:var(--s-6);border-bottom:1px solid var(--rule)}
.track__now h3{font-size:var(--t-2)}
.track__now p{margin-top:var(--s-3);max-width:56ch;color:var(--ink-soft)}
.await{margin-top:var(--s-5);border-left:2px solid var(--plum);padding-left:var(--s-4)}
.await b{font-family:var(--display);font-weight:400;letter-spacing:.04em;display:block}
.await p{margin-top:var(--s-2);font-size:var(--t--1)}
.track__body{padding:var(--s-6)}

/* ======================================================= the console */
/* Same brand, working density. A fixed rail of the eight views on a wide
   screen; a scrolling row of them on a narrow one. */
body.console{background:var(--warm)}
.demo-strip{background:var(--plum-wash);border-bottom:1px solid var(--plum);
            padding:var(--s-3) var(--gut);font-size:var(--t--1);color:var(--plum-deep)}
.demo-strip b{font-family:var(--display);font-weight:400;letter-spacing:.06em}
.topbar{background:var(--ink);color:var(--cream);position:sticky;top:0;z-index:70}
.topbar__in{display:flex;align-items:center;gap:var(--s-5);min-height:60px;
            padding-inline:var(--gut);flex-wrap:wrap}
.topbar b{font-family:var(--display);font-weight:400;letter-spacing:.14em;
          text-transform:uppercase;font-size:var(--t--1);white-space:nowrap}
.topbar__spacer{flex:1}
.topbar a{color:inherit;font-size:var(--t--1);text-underline-offset:4px}

/* the role switcher, labelled as the simulation it is */
.whoami{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
        padding:var(--s-2) 0}
.whoami label{font-family:var(--display);font-size:var(--t--2);letter-spacing:.16em;
              text-transform:uppercase;color:color-mix(in srgb,#F5EFE6 62%,transparent);
              min-height:44px;display:inline-flex;align-items:center}
.whoami select{min-height:44px;background:var(--cream);color:var(--ink);border:0;
               font-family:var(--body);font-size:var(--t--1);padding:0 var(--s-3)}
.sim-note{background:var(--amber-wash);border-bottom:1px solid #E4CE9B;color:var(--amber);
          padding:var(--s-3) var(--gut);font-size:var(--t--1)}
.sim-note b{font-family:var(--display);font-weight:400;letter-spacing:.06em}

.shellgrid{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:start;
           max-width:var(--page);margin-inline:auto;width:100%}
.railnav{position:sticky;top:60px;padding:var(--s-5) 0 var(--s-8);
         border-right:1px solid var(--rule-mid);min-height:60vh}
.railnav ol{list-style:none;margin:0;padding:0}
.railnav a{display:flex;gap:var(--s-3);align-items:baseline;min-height:44px;padding:var(--s-2) var(--gut) var(--s-2) var(--gut);
           text-decoration:none;font-family:var(--display);font-size:1.02rem;letter-spacing:.04em}
.railnav a:hover{background:var(--cream)}
.railnav a[aria-current="page"]{background:var(--cream);box-shadow:inset 3px 0 0 var(--plum)}
.railnav i{font-style:normal;font-size:var(--t--2);letter-spacing:.14em;color:var(--ink-faint);min-width:1.6em}
.railnav a[data-locked="true"]{opacity:.45}
.cwrap{padding:var(--s-6) var(--gut) var(--s-9);min-width:0}

.chead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);
       flex-wrap:wrap;padding-bottom:var(--s-4);border-bottom:2px solid var(--rule-ink)}
.chead h1{font-size:var(--t-3)}
.chead p{margin-top:var(--s-2);font-size:var(--t--1);color:var(--ink-soft);max-width:62ch}

/* tiles, every number counted from the twelve records */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-4);margin-top:var(--s-6)}
.tile{background:var(--paper);border:1px solid var(--rule-mid);padding:var(--s-5)}
.tile b{display:block;font-family:var(--display);font-size:var(--t--2);letter-spacing:.16em;
        text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.tile strong{display:block;font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1;margin-top:var(--s-3)}
.tile span{display:block;font-size:var(--t--1);color:var(--ink-soft);margin-top:var(--s-2)}
.tile--alert{border-color:var(--plum);background:var(--plum-wash)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5);align-items:center}
.filters button{min-height:44px;padding:0 var(--s-4);border:1px solid var(--rule-mid);background:transparent;
                font-family:var(--display);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.filters label{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
               font-family:var(--display);font-size:var(--t--1);letter-spacing:.06em;text-transform:uppercase}
.filters select,.filters input[type="search"]{min-height:44px;border:1px solid var(--rule-mid);
  background:var(--paper);font-family:var(--body);font-size:var(--t--1);padding:0 var(--s-3);color:var(--ink)}
.filters input[type="search"]{min-width:min(260px,100%)}

/* status labels */
.pill{display:inline-block;font-family:var(--display);font-size:var(--t--2);letter-spacing:.12em;
      text-transform:uppercase;padding:4px 9px;border:1px solid var(--rule-mid);white-space:nowrap}
.pill[data-k="enquiry"]{background:var(--warm)}
.pill[data-k="review"]{background:var(--plum-wash);border-color:var(--plum);color:var(--plum-deep)}
.pill[data-k="quoted"]{background:var(--cream);border-color:var(--ink)}
.pill[data-k="payment"],.pill[data-k="preparation"]{background:var(--sage-wash);border-color:var(--sage-deep);color:var(--sage-deep)}
.pill[data-k="collected"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pill[data-k="declined"]{background:var(--red-wash);border-color:var(--red-line);color:var(--red)}
.loc-pill{display:inline-block;font-family:var(--display);font-size:var(--t--2);letter-spacing:.14em;
          text-transform:uppercase;padding:4px 8px;border:1px solid var(--rule-mid);
          background:var(--paper);white-space:nowrap}

/* the reusable data table */
.dtable{width:100%;border-collapse:collapse;margin-top:var(--s-5);background:var(--paper);
        border:1px solid var(--rule-mid);font-size:var(--t--1)}
.dtable caption{text-align:left;padding:var(--s-3) 0;font-size:var(--t--1);color:var(--ink-soft)}
.dtable th,.dtable td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);vertical-align:top}
.dtable th{font-family:var(--display);font-weight:400;font-size:var(--t--2);letter-spacing:.16em;
           text-transform:uppercase;color:var(--ink-faint);background:var(--warm);white-space:nowrap}
.dtable tbody tr:hover{background:var(--cream)}
.dtable tbody tr[hidden]{display:none}
.dtable a{font-family:var(--display);font-size:1.02rem;text-underline-offset:3px}
.dtable i{font-style:normal;display:block;color:var(--ink-faint);font-size:var(--t--2)}
.dtable .is-mine{box-shadow:inset 3px 0 0 var(--plum)}
.empty{padding:var(--s-8) var(--s-4);text-align:center;color:var(--ink-soft);background:var(--paper);
       border:1px solid var(--rule-mid);border-top:0}
.empty[hidden]{display:none}
.empty b{display:block;font-family:var(--display);font-weight:400;font-size:var(--t-2);margin-bottom:var(--s-3)}

.card{background:var(--paper);border:1px solid var(--rule-mid)}
.card>h2,.card>h3{font-family:var(--display);font-size:var(--t--1);letter-spacing:.18em;
                  text-transform:uppercase;color:var(--ink-faint);padding:var(--s-4) var(--s-5);
                  border-bottom:1px solid var(--rule);background:var(--warm)}
.card__in{padding:var(--s-5)}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-6);align-items:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3) var(--s-5);font-size:var(--t--1)}
.kv dt{font-family:var(--display);font-size:var(--t--2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.kv dd{margin:0}
.lines{width:100%;border-collapse:collapse;font-size:var(--t--1)}
.lines td{padding:var(--s-2) 0;border-bottom:1px solid var(--rule)}
.lines td:last-child{text-align:right;font-family:var(--display);white-space:nowrap}
.lines tr:last-child td{border-bottom:0;font-family:var(--display);font-size:1.12rem;padding-top:var(--s-3)}
.lines i{font-style:normal;display:block;color:var(--ink-faint);font-size:var(--t--2)}
.acts{display:flex;flex-wrap:wrap;gap:var(--s-3);padding:var(--s-5);border-top:1px solid var(--rule);background:var(--cream)}

/* permission notice: says what is not allowed and why, rather than hiding it */
.perm{border:1px solid var(--amber);background:var(--amber-wash);color:var(--amber);
      padding:var(--s-4);font-size:var(--t--1);margin-top:var(--s-4)}
.perm b{display:block;font-family:var(--display);font-weight:400;letter-spacing:.05em;
        font-size:1.04rem;margin-bottom:var(--s-2)}
.perm code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
           background:color-mix(in srgb,#8A6114 10%,transparent);padding:1px 5px}

/* activity entries */
.feed{list-style:none;margin:var(--s-5) 0 0;padding:0;background:var(--paper);border:1px solid var(--rule-mid)}
.feed li{display:grid;grid-template-columns:150px 1fr auto;gap:var(--s-4);padding:var(--s-3) var(--s-5);
         border-bottom:1px solid var(--rule);align-items:baseline;font-size:var(--t--1)}
.feed li:last-child{border-bottom:0}
.feed time{font-family:var(--display);font-size:var(--t--2);letter-spacing:.1em;color:var(--ink-faint);white-space:nowrap}
.feed b{font-family:var(--display);font-weight:400;font-size:1.02rem}
.feed [data-kind="reassign"]{background:var(--plum-wash)}
.feed [data-kind="connection"]{background:var(--amber-wash)}

/* side panel: a drawer, not a modal, so the list stays readable behind it */
.panel{position:fixed;inset:0 0 0 auto;width:min(560px,100%);background:var(--paper);
       border-left:1px solid var(--rule-ink);box-shadow:-20px 0 50px rgba(18,18,18,.16);
       z-index:90;display:flex;flex-direction:column;
       transform:translateX(100%);transition:transform var(--fast) var(--ease);visibility:hidden}
.panel[data-open="true"]{transform:none;visibility:visible}
.panel__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);
             padding:var(--s-5);border-bottom:1px solid var(--rule-mid);background:var(--warm)}
.panel__body{overflow-y:auto;padding:var(--s-5);flex:1}
.panel__foot{border-top:1px solid var(--rule-mid);padding:var(--s-4) var(--s-5);background:var(--cream);
             display:flex;flex-wrap:wrap;gap:var(--s-3)}
.scrim{position:fixed;inset:0;background:rgba(18,18,18,.3);z-index:85;opacity:0;visibility:hidden;
       transition:opacity var(--fast) var(--ease)}
.scrim[data-open="true"]{opacity:1;visibility:visible}

/* confirmation dialog */
dialog{border:1px solid var(--rule-ink);padding:0;max-width:min(520px,92vw);background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(18,18,18,.42)}
.dlg__head{padding:var(--s-5);border-bottom:1px solid var(--rule)}
.dlg__head h2{font-size:var(--t-2)}
.dlg__body{padding:var(--s-5);font-size:var(--t--1)}
.dlg__body p+p{margin-top:var(--s-3)}
.dlg__foot{padding:var(--s-4) var(--s-5);border-top:1px solid var(--rule);background:var(--cream);
           display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:flex-end}

/* connection health */
.conns{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
.conn{background:var(--paper);border:1px solid var(--rule-mid);padding:var(--s-5);
      display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);align-items:start}
.conn__dot{width:12px;height:12px;border-radius:50%;margin-top:7px}
.conn[data-state="connected"] .conn__dot{background:var(--sage-deep)}
.conn[data-state="disconnected"] .conn__dot{background:var(--red)}
.conn[data-state="retrying"] .conn__dot{background:var(--amber)}
.conn[data-state="disconnected"]{border-color:var(--red-line);background:var(--red-wash)}
.conn[data-state="retrying"]{border-color:#E4CE9B;background:var(--amber-wash)}
.conn h2{font-size:var(--t-2)}
.conn p{margin-top:var(--s-2);font-size:var(--t--1);color:var(--ink-soft);max-width:62ch}
.conn__meta{margin-top:var(--s-3);font-size:var(--t--2);font-family:var(--display);
            letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.conn__why{margin-top:var(--s-3);font-size:var(--t--1);border-left:2px solid currentColor;padding-left:var(--s-3)}

/* queue */
.q-group{margin-top:var(--s-6)}
.q-group>h2{font-family:var(--display);font-size:var(--t-2);padding-bottom:var(--s-3);
            border-bottom:2px solid var(--rule-ink)}
.q-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);padding:var(--s-5);
       border-bottom:1px solid var(--rule);align-items:center;background:var(--paper)}
.q-row:last-child{border-bottom:0}
.q-when{font-family:var(--display);font-size:var(--t-2);line-height:1;text-align:center;min-width:72px}
.q-when i{display:block;font-style:normal;font-size:var(--t--2);letter-spacing:.14em;
          text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.q-need{margin-top:var(--s-2);font-size:var(--t--1);color:var(--ink-soft)}
.q-need b{font-family:var(--display);font-weight:400;color:var(--ink)}

/* team and permissions */
.caps{width:100%;border-collapse:collapse;font-size:var(--t--1);background:var(--paper);
      border:1px solid var(--rule-mid);margin-top:var(--s-5)}
.caps th,.caps td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);text-align:left}
.caps thead th{font-family:var(--display);font-weight:400;font-size:var(--t--2);letter-spacing:.14em;
               text-transform:uppercase;color:var(--ink-faint);background:var(--warm)}
.caps td:not(:first-child),.caps th:not(:first-child){text-align:center;width:16%}
.caps .yes{color:var(--sage-deep);font-weight:600}
.caps .no{color:var(--ink-faint)}
.caps code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--ink-soft)}

/* ------------------------------------------------------- responsive */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
  .sheet[data-open="true"]{display:block}
  .plan__body{grid-template-columns:1fr}
  .plan__side{border-left:0;border-top:1px solid var(--rule-mid)}
  .cols{grid-template-columns:1fr}
  .rail{grid-template-columns:repeat(3,1fr)}
  .rail__s:nth-child(4){border-left:0}
  .rail__s:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  /* the eight views become a scrolling row rather than a squeezed rail */
  .shellgrid{grid-template-columns:1fr}
  .railnav{position:sticky;top:60px;min-height:0;border-right:0;
           border-bottom:1px solid var(--rule-mid);background:var(--warm);padding:0;z-index:50}
  .railnav ol{display:flex;overflow-x:auto;scrollbar-width:thin}
  .railnav li{flex:none}
  .railnav a{padding:var(--s-3) var(--s-4);white-space:nowrap;border-right:1px solid var(--rule)}
  .railnav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--plum)}
  .loc-row{grid-template-columns:2.6rem 1fr}
  .loc-row img,.loc-row>div,.loc-row .more{grid-column:2}
}
@media (max-width:820px){
  .led__rules{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero h1,.hero__say,.hero__num{grid-column:1 / 3}
  .hero__say{margin-top:var(--s-5)}
  .ed h2,.ed__body,.ed__side{grid-column:1 / 3;padding-inline:0}
  .ed__body,.ed__side{border-top:0;padding-top:var(--s-4)}
  .strip__c:nth-child(odd),.facts__c:nth-child(odd),.ftr__c:nth-child(odd){border-left:0;padding-left:0}
  .strip__c:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .m-detail__in{grid-template-columns:1fr}
  .j-row{grid-template-columns:2.2rem 1fr}
  .j-row img,.j-row>div{grid-column:2}
  .plan__steps{grid-template-columns:1fr}
  .plan__step{border-left:0;border-bottom:1px solid var(--rule)}
  .two{grid-template-columns:1fr}
  .conn{grid-template-columns:auto 1fr}
  .conn>*:last-child{grid-column:2}
  .feed li{grid-template-columns:1fr}
  .feed time{order:-1}

  /* Dense tables become a list of records rather than a squeezed grid or a
     horizontal scrollbar. Each cell keeps its column name. */
  .dtable,.dtable thead,.dtable tbody,.dtable tr,.dtable th,.dtable td{display:block}
  .dtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dtable{border:0;background:transparent}
  .dtable tr{background:var(--paper);border:1px solid var(--rule-mid);margin-bottom:var(--s-4);padding:var(--s-2) 0}
  .dtable td{border-bottom:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;
             gap:var(--s-4);align-items:baseline}
  .dtable td:last-child{border-bottom:0}
  .dtable td::before{content:attr(data-label);font-family:var(--display);font-size:var(--t--2);
                     letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
  .caps,.caps tbody,.caps tr,.caps td{display:block;width:100%}
  .caps thead{display:none}
  .caps tr{background:var(--paper);border:1px solid var(--rule-mid);margin-bottom:var(--s-4)}
  .caps td{border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;
           gap:var(--s-4);text-align:left !important;width:auto !important}
  .caps td::before{content:attr(data-label);font-family:var(--display);font-size:var(--t--2);
                   letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
  .caps td:first-child::before{content:none}
  .panel{width:100%}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .hero h1,.hero__say,.hero__num,.ed h2,.ed__body,.ed__side{grid-column:1}
  .strip__c,.facts__c,.ftr__c{border-left:0;padding-left:0;border-bottom:1px solid var(--rule)}
  .rail{grid-template-columns:repeat(2,1fr)}
  .review__row{grid-template-columns:1fr auto}
  .q-row{grid-template-columns:1fr}
  .m-row{grid-template-columns:2.2rem 1fr}
  .m-row__price{grid-column:2;justify-self:start;white-space:normal}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:var(--s-2)}
  .tiles{grid-template-columns:1fr 1fr}
}

/* ----------------------------------------------------- reflow repairs */
/* Grid and flex items default to min-width:auto, so a child that cannot
   shrink drags the whole page wider than the viewport. These are the three
   places in this tier where that happened. */
.shellgrid>*{min-width:0}
.railnav{min-width:0;max-width:100%}
.railnav ol{max-width:100%}
/* An off-canvas panel is pushed fully out of view by a transform; without a
   cap it can still widen the document it is sitting beside. */
.panel{max-width:100vw}

@media (max-width:620px){
  /* The price is nowrap on purpose, so below this width it takes its own row
     rather than forcing the label column past the viewport. */
  .opt{grid-template-columns:22px minmax(0,1fr)}
  .opt em{grid-column:2;margin-top:var(--s-2)}
  .plan__main{padding:var(--s-5) var(--s-4) var(--s-6)}
  .plan__side{padding:var(--s-5) var(--s-4)}
  .plan__foot{padding:var(--s-4)}
}

/* A <select> sizes itself to its widest option, so the role switcher's long
   labels were setting the page width on a phone. Cap it and let the control
   truncate its own display. */
.topbar__in{max-width:100%}
.whoami{min-width:0;max-width:100%}
.whoami select{max-width:100%;min-width:0}

@media (max-width:620px){
  /* "$1,800.75" at 2.4rem has a min-content width of its own, which two
     columns at this width cannot hold. */
  .tiles{grid-template-columns:1fr}
  .tile{min-width:0}
  .tile strong{font-size:1.9rem;overflow-wrap:anywhere}
}

/* ---- The rule grid, corrected -------------------------------------------
   Identical fault to Signature, inherited with the direction. `.led__rules`
   is positioned across a whole section, so it painted ON TOP OF anything that
   was not itself positioned: photographs on the locations pages, the journal
   headlines, the menu filter buttons. Positioned boxes paint above in-flow
   ones whatever the DOM order; that is the painting order, not a quirk.

   And it spanned whole sections including blocks that are not on the four
   column grid at all, so rules cut images in half.

   So the rules become a background on the grid itself: behind content by
   definition, exactly as wide and as tall as the grid they describe, and they
   stop where it stops. The hero keeps its overlay, where they animate and
   where the type is deliberately laid over them. */
.grid {
  background-image:
    linear-gradient(to right, var(--rule) 0 1px, transparent 1px),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 25%);
  background-position: right top, left top;
  background-repeat: no-repeat, repeat-x;
  background-size: 1px 100%, 100% 100%;
}
/* Where the children draw their own dividers, a background would double them. */
.strip .grid, .facts .grid, .ftr .grid, .hero .grid { background-image: none; }
.led__rules { z-index: 0; }
.led > *:not(.led__rules) { position: relative; z-index: 1; }

/* ---- The vertical rules are gone ----------------------------------------
   Same verdict as Signature, same reason: faint full-height lines down a
   photograph read as a rendering artefact and down a column of text as a
   broken layout. The grid does not need to be drawn to be felt. The
   horizontal rules and the section numbers carry the same language. */
.led__rules { display: none; }
.grid { background-image: none; }