/* ═══════════════════════════════════════════════════════════
   ACME GROUP — internal page components
   Loaded after acme.css on every page except the homepage.
   ═══════════════════════════════════════════════════════════ */

/* ── page head: ink band under the header ───────────────── */
.page-head{background:var(--ink);color:var(--paper);padding-block:clamp(46px,6vw,84px) clamp(40px,5vw,68px);position:relative;overflow:clip}
.page-head::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-10%;width:52vw;height:52vw;
  background:radial-gradient(circle,rgba(179,130,47,.13),transparent 62%);pointer-events:none}
.page-head .container{position:relative;z-index:1}
.page-head h1{margin-block:0 20px;max-width:none}
.page-head .lede{color:var(--muted-inv);max-width:62ch}
.page-head .eyebrow{color:var(--brass-lo)}
.page-head .eyebrow::before{background:var(--brass-lo)}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-end:26px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,247,.55)}
.crumbs a{color:rgba(250,250,247,.72)}
.crumbs a:hover{color:var(--brass-lo)}
.crumbs span[aria-hidden]{color:var(--brass)}
.crumbs [aria-current]{color:var(--paper)}

/* meta rail under a page head — short factual pairs */
.rail{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin-block-start:38px;padding-block-start:26px;
  border-block-start:1px solid rgba(250,250,247,.18)}
.rail div{display:flex;flex-direction:column;gap:4px}
.rail dt,.rail b{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(250,250,247,.55);font-weight:400}
.rail dd,.rail span{margin:0;font-size:1rem;color:var(--paper)}

/* ── section heading pattern ────────────────────────────── */
.sec-head{max-width:none;margin-block-end:clamp(30px,4vw,52px)}
.sec-head h2{max-width:none}
.sec-head .lede{max-width:64ch}
.sec-head .lede{margin-block-start:18px}

/* ── checklists ─────────────────────────────────────────── */
.check{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.check li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;font-size:.96rem;line-height:1.6}
.check li::before{
  content:"";inline-size:14px;block-size:8px;margin-block-start:7px;
  border-inline-start:1.5px solid var(--brass);border-block-end:1.5px solid var(--brass);
  transform:rotate(-45deg);
}
/* Two-column checklists read as a spec sheet rather than floating text: the
   column gap closes to zero and the row rules meet across the middle, so the
   pairs line up instead of drifting. Single-column .check lists are untouched. */
.check.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.check.cols{margin-inline-start:-12px}
.check.cols li{padding-block:15px;padding-inline:12px clamp(20px,3vw,44px);
  border-block-start:1px solid var(--line);align-items:center;
  transition:background-color .35s var(--ease),color .3s var(--ease)}
/* close the box: the final row needs a rule under it, and with two columns
   that is the last one or two children depending on how the list divides */
.check.cols li:nth-last-child(-n+2):nth-child(odd),
.check.cols li:nth-last-child(1){border-block-end:1px solid var(--line)}
.check.cols li:hover{background:var(--cream);color:var(--ink)}
@media(max-width:575.98px){
  .check.cols{grid-template-columns:1fr}
  .check.cols li:nth-last-child(-n+2):nth-child(odd){border-block-end:0}
}
.check small{display:block;color:var(--muted);font-size:.86rem;margin-block-start:3px}

/* ── callout ────────────────────────────────────────────── */
.callout{border-inline-start:2px solid var(--brass);background:var(--paper);padding:22px 26px;border-radius:var(--r);margin-block:30px}
.callout b{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-ink);margin-block-end:8px}
.callout p{margin:0;font-size:.94rem;color:var(--muted)}

/* ── cards ──────────────────────────────────────────────── */
.card-plain{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,34px);height:100%}
.card-plain h3{font-size:1.12rem;font-weight:500;margin-block-end:10px}
.card-plain p{margin:0;font-size:.93rem;color:var(--muted)}
.card-plain .code{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--brass-ink);margin-block-end:16px}

/* ── packages / tiers ───────────────────────────────────── */
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,36px);height:100%;display:flex;flex-direction:column;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.tier:hover{border-color:var(--brass);transform:translateY(-4px)}
.tier.is-featured{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tier.is-featured p,.tier.is-featured .tier-for{color:var(--muted-inv)}
.tier.is-featured .check li::before{border-color:var(--brass-lo)}
.tier-tag{display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass-lo);border:1px solid var(--brass-lo);padding:3px 9px;border-radius:2px;margin-block-end:16px}
.tier h3{font-family:var(--display);font-size:1.6rem;font-weight:400;margin-block-end:6px}
.tier-for{font-size:.86rem;color:var(--muted);margin-block-end:22px}
.tier .check{margin-block:0 26px;font-size:.9rem}
.tier .check li{font-size:.9rem}
.tier .btn{margin-block-start:auto;width:100%}

/* ── team ───────────────────────────────────────────────── */
.person{text-align:start}
.person .avatar{aspect-ratio:1;background:linear-gradient(155deg,var(--ink-2),var(--ink));border-radius:var(--r);
  display:grid;place-items:center;margin-block-end:18px;position:relative;overflow:hidden}
.person .avatar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(13,13,13,.28),transparent 42%)}
.person .avatar i{font-family:var(--display);font-weight:700;font-style:normal;font-size:clamp(1.8rem,4vw,2.6rem);color:rgba(250,250,247,.20);letter-spacing:-.03em}
.person b{display:block;font-size:.98rem;font-weight:500}
.person small{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-block-start:4px}

/* ── offices ────────────────────────────────────────────── */
.office-card{border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);height:100%;
  background:var(--paper);position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
/* a brass edge that runs in from the top-left corner on approach */
.office-card::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:100%;block-size:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
html[dir="rtl"] .office-card::before{transform-origin:right}
.office-card:hover,.office-card:focus-within{border-color:rgba(13,13,13,.26);box-shadow:0 12px 34px rgba(13,13,13,.07)}
.office-card:hover::before,.office-card:focus-within::before{transform:scaleX(1)}
.office-card h3{font-size:1.05rem;font-weight:500;margin-block-end:14px}
.office-card dl{margin:0;display:grid;gap:12px}
.office-card dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink)}
.office-card dd{margin:2px 0 0;font-size:.9rem;color:var(--ink);line-height:1.6}

/* ── FAQ (Bootstrap accordion, reskinned) ───────────────── */
.faq .accordion-item{background:transparent;border:0;border-block-end:1px solid var(--line)}
.faq .accordion-button{
  background:transparent;color:var(--ink);padding:24px 0;font-size:1.05rem;font-weight:500;
  box-shadow:none;border-radius:0!important;gap:20px;
}
.faq .accordion-button:not(.collapsed){background:transparent;color:var(--ink);box-shadow:none}
.faq .accordion-button::after{
  width:12px;height:12px;background:none;flex:none;margin-inline-start:auto;
  border-inline-end:1.5px solid var(--brass);border-block-end:1.5px solid var(--brass);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease);
}
.faq .accordion-button:not(.collapsed)::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .accordion-body{padding:0 0 26px;color:var(--muted);font-size:.96rem;max-width:72ch;line-height:1.75}
.faq .accordion-body p{margin:0 0 14px}
.faq .accordion-body p:last-child{margin:0}

/* ── article prose ──────────────────────────────────────── */
.prose{max-width:70ch;font-size:1.04rem;line-height:1.78;color:rgba(8,38,43,.86)}
.prose > * + *{margin-block-start:26px}
.prose h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;line-height:1.2;
  margin-block-start:52px;padding-block-start:30px;border-block-start:1px solid var(--line);letter-spacing:-.02em}
.prose h3{font-size:1.16rem;font-weight:500;margin-block-start:36px}
.prose a{color:var(--brass-ink);border-block-end:1px solid rgba(120,85,15,.35)}
.prose a:hover{border-color:var(--brass-ink)}
.prose ul,.prose ol{padding-inline-start:22px;display:grid;gap:10px}
.prose li::marker{color:var(--brass)}
.prose blockquote{margin:36px 0;padding-inline-start:26px;border-inline-start:2px solid var(--brass);
  font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.4;font-weight:400;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin-block:30px}
.prose th{text-align:start;font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:0 14px 12px 0;border-block-end:1px solid var(--ink)}
.prose td{padding:14px 14px 14px 0;border-block-end:1px solid var(--line);vertical-align:top}
html[dir="rtl"] .prose td{padding:14px 0 14px 14px}
.prose td:last-child,.prose th:last-child{padding-inline-end:0}
.prose figcaption{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-block-start:10px;letter-spacing:.04em}

/* ── sticky table of contents ───────────────────────────── */
.toc{position:sticky;inset-block-start:108px}
.toc b{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-block-end:16px;padding-block-end:14px;border-block-end:1px solid var(--line)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:toc}
.toc a{display:block;padding:9px 0 9px 16px;font-size:.88rem;color:var(--muted);line-height:1.45;
  border-inline-start:1px solid var(--line);transition:color .25s var(--ease),border-color .25s var(--ease)}
html[dir="rtl"] .toc a{padding:9px 16px 9px 0}
.toc a:hover{color:var(--ink);border-inline-start-color:var(--muted)}
.toc a.is-active{color:var(--ink);border-inline-start-color:var(--brass);font-weight:500}

/* ── sidebar card ───────────────────────────────────────── */
.side-card{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(24px,3vw,32px)}
.side-card h3{font-family:var(--display);font-size:1.3rem;font-weight:400;margin-block-end:12px}
.side-card p{margin:0 0 22px;font-size:.9rem;color:var(--muted-inv);line-height:1.65}
.side-card .btn{width:100%}
.side-sticky{position:sticky;inset-block-start:108px}

/* ── article meta / author ──────────────────────────────── */
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(250,250,247,.6)}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--brass)}
.author{display:flex;align-items:center;gap:16px;padding-block-start:30px;margin-block-start:44px;border-block-start:1px solid var(--line)}
.author .avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(155deg,var(--ink-2),var(--ink));
  display:grid;place-items:center;flex:none;font-family:var(--display);font-size:1.05rem;color:rgba(250,250,247,.75)}
.author b{display:block;font-size:.95rem;font-weight:500}
.author small{color:var(--muted);font-size:.85rem}

/* ── filter chips ───────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-block-end:clamp(30px,4vw,46px)}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--line);border-radius:40px;color:var(--muted);background:none;
  min-height:40px;display:inline-flex;align-items:center;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ── featured article ───────────────────────────────────── */
.feat{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.feat-img{background:linear-gradient(140deg,var(--teal),var(--ink));position:relative;min-height:300px;overflow:hidden}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-body{padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center}
.feat-body h3{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:400;line-height:1.2;margin-block:14px 16px;letter-spacing:-.02em}
.feat-body p{color:var(--muted);font-size:.96rem;margin:0 0 24px;max-width:52ch}

/* ── pagination ─────────────────────────────────────────── */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-block-start:clamp(40px,5vw,64px)}
.pager a,.pager span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r);font-family:var(--mono);font-size:.82rem;color:var(--muted);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pager a:hover{border-color:var(--ink);color:var(--ink)}
.pager [aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pager .gap{border:0;color:var(--muted)}

/* ── forms ──────────────────────────────────────────────── */
.field{margin-block-end:20px}
.field label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-block-end:9px}
.field .form-control,.field .form-select{
  width:100%;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);font-family:var(--sans);font-size:16px;min-height:52px;
}
.field textarea.form-control{min-height:150px;resize:vertical}
.field .form-control:focus,.field .form-select:focus{border-color:var(--brass);box-shadow:none;background:var(--paper);color:var(--ink)}
.field .form-control::placeholder{color:rgba(8,38,43,.36)}
.field .form-select{
  -webkit-appearance:none;appearance:none;padding-inline-end:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2378550F' stroke-width='1.6'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:15px}
html[dir="rtl"] .field .form-select{padding:14px 16px 14px 44px;background-position:left 16px center}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--muted);line-height:1.6}
.consent input{margin-block-start:3px;width:18px;height:18px;accent-color:var(--brass-ink);flex:none}
.form-note{font-size:.8rem;color:var(--muted);margin-block-start:18px}

/* ── related strip ──────────────────────────────────────── */
.rel-link{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;
  border-block-end:1px solid var(--line);transition:padding-inline-start .35s var(--ease)}
.rel-link:hover{padding-inline-start:10px}
.rel-link h3{font-size:1.05rem;font-weight:500}
.rel-link small{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-ink);margin-block-end:6px}
.rel-link svg{width:15px;height:15px;flex:none;color:var(--muted);transition:transform .35s var(--ease),color .35s}
html[dir="rtl"] .rel-link svg{transform:scaleX(-1)}
.rel-link:hover svg{color:var(--ink);transform:translateX(4px)}
html[dir="rtl"] .rel-link:hover svg{transform:scaleX(-1) translateX(4px)}

/* ── responsive ─────────────────────────────────────────── */
@media(max-width:991.98px){
  .toc,.side-sticky{position:static}
  .feat{grid-template-columns:1fr}
  .page-head h1{max-width:none}
}
@media(max-width:575.98px){
  .check.cols{grid-template-columns:1fr}
  .rail{gap:20px 28px}
  .faq .accordion-button{font-size:.98rem;padding-block:20px}
}

/* ═══════════════════════════════════════════════════════════
   SIGNATURE COMPONENTS
   Each internal page needed one thing that carries real weight,
   rather than another row of cards.
   ═══════════════════════════════════════════════════════════ */

/* ── ABOUT: the regulatory spine ─────────────────────────
   A firm like this has no story separate from the rules it
   answers to, so the timeline runs two tracks against one axis:
   what the law did, and what the firm did about it. */
.tl{position:relative;display:grid;grid-template-columns:1fr 2px 1fr;column-gap:clamp(24px,4vw,60px)}
/* absolutely positioned, not a grid item: grid-row:1/-1 resolves against the
   EXPLICIT grid, which has no rows here, so it would only ever span one */
.tl-axis{position:absolute;inset-block:0;inset-inline-start:50%;transform:translateX(-50%);
  width:2px;background:var(--line);border-radius:2px}
.tl-axis i{position:absolute;inset-block-start:0;inset-inline:0;height:0;background:var(--brass);
  border-radius:2px;transition:height 1.6s cubic-bezier(.5,0,.2,1)}
.tl.in .tl-axis i{height:100%}

.tl-item{grid-column:1;padding-block:clamp(18px,2.4vw,30px);position:relative;text-align:end;
  opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.tl-item.side-b{grid-column:3;text-align:start}
.tl-item.in{opacity:1;transform:none}
.tl-item::after{                       /* the node on the axis */
  content:"";position:absolute;inset-block-start:calc(clamp(18px,2.4vw,30px) + 9px);
  width:11px;height:11px;border-radius:50%;background:var(--limestone);
  border:1.5px solid var(--line);transition:border-color .5s var(--ease),background .5s var(--ease);
}
.tl-item::after{inset-inline-end:calc(clamp(24px,4vw,60px) / -2 - 4.5px)}
.tl-item.side-b::after{inset-inline-end:auto;inset-inline-start:calc(clamp(24px,4vw,60px) / -2 - 4.5px)}
.tl-item.in::after{border-color:var(--brass);background:var(--paper)}
.tl-year{display:block;font-family:var(--mono);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;
  color:var(--ink);letter-spacing:-.02em;margin-block-end:10px}
.tl-tag{display:inline-flex;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:2px;margin-block-end:10px}
.tl-tag.is-rule{color:var(--brass-ink);border:1px solid rgba(179,130,47,.45)}
.tl-tag.is-firm{color:var(--paper);background:var(--ink)}
.tl-item h3{font-size:1.05rem;font-weight:500;margin-block-end:8px;line-height:1.35}
.tl-item p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.65;max-width:38ch}
.tl-item.side-b p{margin-inline-end:auto}
.tl-item:not(.side-b) p{margin-inline-start:auto}
.tl-head{display:grid;grid-template-columns:1fr 2px 1fr;column-gap:clamp(24px,4vw,60px);margin-block-end:26px}
.tl-head b{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tl-head b:first-child{text-align:end}
.tl-head b:last-child{grid-column:3}

@media(max-width:767.98px){
  .tl,.tl-head{grid-template-columns:11px 1fr;column-gap:22px}
  .tl-axis{inset-inline-start:4.5px;transform:none}
  .tl-item,.tl-item.side-b{grid-column:2;text-align:start}
  .tl-item::after,.tl-item.side-b::after{inset-inline-start:-27px;inset-inline-end:auto}
  .tl-item p,.tl-item:not(.side-b) p,.tl-item.side-b p{margin-inline:0;max-width:none}
  .tl-head b:first-child{display:none}
  .tl-head b:last-child{grid-column:2;text-align:start}
}

/* ── ABOUT: person card reveals a detail on hover/focus ── */
.person{position:relative}

.person dl{margin:12px 0 0;display:grid;gap:6px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease)}
.person:hover dl,.person:focus-within dl{max-height:120px;opacity:1}
.person dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink)}
.person dd{margin:0;font-size:.82rem;color:var(--muted)}

/* ── ABOUT / general: credential badges ─────────────────── */
.creds{display:flex;flex-wrap:wrap;gap:10px}
.cred{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:40px;
  padding:10px 18px;font-size:.84rem;color:var(--muted);background:var(--paper)}
.cred::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}

/* ── SERVICE: registration eligibility checker ──────────── */
.checker{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(26px,3.4vw,40px)}
.checker legend{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-lo);margin-block-end:18px;float:none;width:auto}
.q{padding-block:18px;border-block-start:1px solid rgba(250,250,247,.14)}
.q:first-of-type{border-block-start:0;padding-block-start:0}
.q p{margin:0 0 12px;font-size:.98rem}
.opts{display:flex;gap:9px;flex-wrap:wrap}
.opt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;padding:9px 20px;min-height:42px;
  display:inline-flex;align-items:center;border:1px solid rgba(250,250,247,.28);border-radius:40px;
  background:none;color:var(--muted-inv);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.opt:hover{border-color:var(--paper);color:var(--paper)}
.opt[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#fff}
.verdict{margin-block-start:26px;padding-block-start:26px;border-block-start:1px solid rgba(250,250,247,.14);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.verdict.on{opacity:1;transform:none}
.verdict b{display:block;font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:400;line-height:1.2;margin-block-end:10px}
.verdict p{margin:0 0 20px;font-size:.9rem;color:var(--muted-inv);line-height:1.7}

/* ── CONTACT: live office clocks ────────────────────────── */
.clock{display:flex;align-items:baseline;gap:10px;margin-block-start:4px}
.clock time{font-family:var(--mono);font-size:1.5rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.clock .status{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.clock .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.clock .status.is-open::before{background:#57B87F;animation:pulse 2.4s infinite}
.clock .status.is-open{color:var(--ink)}

/* ── ARTICLE: key takeaways ─────────────────────────────── */
.takeaways{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);margin-block-end:38px}
.takeaways b{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-ink);margin-block-end:16px}
.takeaways ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:t}
.takeaways li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:.94rem;line-height:1.6;color:var(--muted)}
.takeaways li::before{counter-increment:t;content:counter(t,decimal-leading-zero);
  font-family:var(--mono);font-size:.68rem;color:var(--brass-ink);padding-block-start:3px}

/* ── ARTICLE: share rail ────────────────────────────────── */
.share{display:flex;align-items:center;gap:10px;margin-block-start:30px}
.share span{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.share a,.share button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  background:none;color:var(--muted);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.share a:hover,.share button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.share svg{width:15px;height:15px}

/* ── INSIGHTS: result count + empty state ───────────────── */
.result-count{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-block-end:24px}
.chip .n{font-size:.9em;opacity:.6;margin-inline-start:6px}
.empty{text-align:center;padding-block:clamp(50px,7vw,90px);border:1px dashed var(--line);border-radius:var(--r)}
.empty b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:400;margin-block-end:10px}
.empty p{margin:0;color:var(--muted);font-size:.94rem}

@media(prefers-reduced-motion:reduce){
  .tl-item{opacity:1;transform:none}
  .tl.in .tl-axis i{height:100%}
  .person dl{max-height:none;opacity:1}
}

/* ── the spine on ink ───────────────────────────────────
   About was six near-identical light sections in a row. The timeline is the
   centrepiece, so it carries the page's dark anchor. */
.tl-ink{background:var(--ink);color:var(--paper);position:relative;overflow:clip}
.tl-ink::before{content:"";position:absolute;inset-block-start:-14%;inset-inline-start:-8%;
  width:56vw;height:56vw;background:radial-gradient(circle,rgba(20,86,95,.28),transparent 62%);pointer-events:none}
.tl-ink .container{position:relative;z-index:1}
.tl-ink .eyebrow{color:var(--brass-lo)}
.tl-ink .eyebrow::before{background:var(--brass-lo)}
.tl-ink .lede{color:var(--muted-inv)}
.tl-ink .tl-head b{color:rgba(250,250,247,.5)}
.tl-ink .tl-axis{background:rgba(250,250,247,.16)}
.tl-ink .tl-axis i{background:var(--brass-lo)}
.tl-ink .tl-item::after{background:var(--ink);border-color:rgba(250,250,247,.3)}
.tl-ink .tl-item.in::after{border-color:var(--brass-lo);background:var(--ink-2);
  box-shadow:0 0 0 4px rgba(217,177,94,.12)}
.tl-ink .tl-year{color:var(--paper)}
.tl-ink .tl-item h3{color:var(--paper)}
.tl-ink .tl-item p{color:var(--muted-inv)}
.tl-ink .tl-tag.is-rule{color:var(--brass-lo);border-color:rgba(217,177,94,.5)}
.tl-ink .tl-tag.is-firm{background:var(--paper);color:var(--ink)}

/* ── team cards get a surface so the grid does not float ── */
.person{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(14px,1.6vw,18px);height:100%;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.person:hover,.person:focus-within{border-color:var(--brass);transform:translateY(-4px);
  box-shadow:0 22px 44px -26px rgba(8,38,43,.28)}
.person .avatar{margin-block-end:14px}

/* ── offices on ink (contact page dark anchor) ──────────── */
.office-ink{background:var(--ink);color:var(--paper)}
.office-ink .eyebrow{color:var(--brass-lo)}
.office-ink .eyebrow::before{background:var(--brass-lo)}
.office-ink .office-card{background:rgba(250,250,247,.05);border-color:rgba(250,250,247,.16)}
.office-ink .office-card h3{color:var(--paper)}
.office-ink .office-card dt{color:var(--brass-lo)}
.office-ink .office-card dd{color:var(--muted-inv)}
.office-ink .clock time{color:var(--paper)}
.office-ink .clock .status{color:rgba(250,250,247,.5)}
.office-ink .clock .status.is-open{color:var(--paper)}

/* ── reels rail ─────────────────────────────────────────── */
.reel-rail{gap:16px}
.reel{flex:0 0 min(250px,62vw);scroll-snap-align:start;display:block;text-align:start;
  background:none;border:0;padding:0;cursor:pointer}
.reel-art{display:block;position:relative;border-radius:var(--r);overflow:hidden;background:var(--light-grey)}
.reel-art img{width:100%;height:auto;display:block;transition:transform .55s var(--ease)}
.reel:hover .reel-art img,.reel:focus-visible .reel-art img{transform:scale(1.05)}
.reel-play{position:absolute;inset-block-end:14px;inset-inline-start:14px;
  width:44px;height:44px;border-radius:50%;background:var(--acme-orange);
  display:grid;place-items:center;transition:transform .35s var(--ease)}
.reel-play::after{content:"";width:0;height:0;margin-inline-start:4px;
  border-inline-start:13px solid var(--brand-black);
  border-block:8px solid transparent}
html[dir="rtl"] .reel-play::after{transform:scaleX(-1)}
.reel:hover .reel-play{transform:scale(1.1)}
.reel-dur{position:absolute;inset-block-end:18px;inset-inline-end:14px;
  font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--white);
  background:rgba(13,13,13,.72);padding:3px 8px;border-radius:2px}
.reel-title{display:block;margin-block-start:14px;font-size:.92rem;font-weight:700;
  color:var(--brand-black);line-height:1.4}
.reel:hover .reel-title{color:var(--brass-ink)}

/* ── reel player ────────────────────────────────────────── */
.reel-modal{position:fixed;inset:0;z-index:1090;background:rgba(13,13,13,.94);
  display:grid;place-items:center;padding:clamp(16px,4vw,48px);
  opacity:0;transition:opacity .3s var(--ease)}
.reel-modal.on{opacity:1}
.reel-modal[hidden]{display:none}
/* the reels are all 9:16 — pinning the ratio means the player is the right
   size before any metadata arrives, so opening does not reflow */
.reel-stage video,.reel-stage iframe{aspect-ratio:9/16;height:min(84vh,880px);width:auto;max-width:100%;
  border-radius:var(--r);display:block;background:#000;border:0}
.reel-close{position:absolute;inset-block-start:clamp(12px,3vw,28px);inset-inline-end:clamp(12px,3vw,28px);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:none;color:var(--white);display:grid;place-items:center;
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.reel-close:hover{background:var(--white);color:var(--brand-black)}
.reel-close svg{width:17px;height:17px}


/* ── portrait photography in the team grid ───────────────
   Overrides the monogram-era avatar: the placeholder was a 1:1 gradient tile
   with a centred letterform, so a photograph dropped in as an unsized grid
   item and showed only the wall behind the subject. */
.person .avatar{aspect-ratio:4/5;background:var(--light-grey);display:block;margin-block-end:14px}
.person .avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  transition:transform .6s var(--ease)}
.person:hover .avatar img,.person:focus-within .avatar img{transform:scale(1.045)}
.person .avatar::after{background:linear-gradient(to top,rgba(13,13,13,.30),transparent 40%)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}

/* ══ Brand values — icon marks in a staggered rank ══
   Replaces the six numbered cards. The values are not a sequence, so the
   01–06 markers were carrying no information; the mark does the work now.
   Every value keeps its line visible — nothing is hidden behind the hover. */
.values{list-style:none;margin:0;padding:0;display:grid;gap:clamp(30px,3.4vw,44px) clamp(16px,2vw,26px);
  grid-template-columns:repeat(2,1fr)}
.value{text-align:center;margin:0}
.value h3{font-size:1.04rem;font-weight:500;margin:18px 0 7px}
.value p{margin:0 auto;font-size:.88rem;line-height:1.55;color:var(--muted);max-width:24ch}

/* the mark: ink disc that inverts to brass on approach */
.value-mark{position:relative;display:grid;place-items:center;inline-size:clamp(72px,7.4vw,88px);
  aspect-ratio:1;margin-inline:auto;border-radius:50%;background:var(--ink-2);color:var(--paper);
  transition:background .42s var(--ease),color .42s var(--ease),transform .42s var(--ease)}
/* the ring sweeps out from the disc rather than sitting on it permanently */
.value-mark::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid var(--brass);opacity:0;transform:scale(.86);
  transition:opacity .42s var(--ease),transform .42s var(--ease)}
.value:hover .value-mark,.value:focus-within .value-mark{background:var(--brass);color:var(--ink);transform:translateY(-6px)}
.value:hover .value-mark::after,.value:focus-within .value-mark::after{opacity:1;transform:scale(1)}

@media(min-width:768px){
  .values{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .values{grid-template-columns:repeat(6,1fr);gap:0 clamp(10px,1.4vw,20px);align-items:start}
  /* the alternating drop keeps six marks from reading as a rigid row */
  .values .value:nth-child(even){margin-block-start:clamp(26px,3vw,44px)}
}
@media(prefers-reduced-motion:reduce){
  .value-mark,.value-mark::after{transition:background .01ms,color .01ms}
  .value:hover .value-mark,.value:focus-within .value-mark{transform:none}
}

/* ══ Purpose / mission / vision ══
   Three equal boxes gave the three statements equal weight, which they don't
   have: the purpose is the root claim and the other two follow from it. The
   purpose panel used to run the full container width with the text capped at
   46ch, so two thirds of it was empty ink. It is now a tall panel beside the
   stacked pair, which fills it and matches their combined height. */
.pmv{display:grid;gap:clamp(16px,1.8vw,22px)}
.pmv-label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-ink);margin-block-end:18px;
  transition:color .4s var(--ease)}
.pmv-lead{background:var(--ink);color:var(--paper);border-radius:var(--r);
  padding:clamp(30px,3.4vw,48px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  transition:background-color .5s var(--ease)}
.pmv-lead .pmv-label{color:var(--brass-lo)}
.pmv-lead p{margin:0;font-size:clamp(1.1rem,1.55vw,1.42rem);line-height:1.5;max-width:34ch}
/* the brass edge draws down the panel as it reveals, then thickens on hover */
.pmv-lead::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:3px;background:var(--brass);transform:scaleY(0);transform-origin:top;
  transition:transform .7s var(--ease),inline-size .4s var(--ease)}
.pmv-lead.in::before{transform:scaleY(1)}
.pmv-lead:hover{background:var(--ink-2)}
.pmv-lead:hover::before{inline-size:6px}
.pmv-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px);position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.pmv-card p{margin:0;font-size:.95rem;line-height:1.7;color:var(--muted)}
.pmv-card::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:100%;block-size:2px;background:var(--brass);transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease)}
html[dir="rtl"] .pmv-card::before{transform-origin:right}
.pmv-card:hover,.pmv-card:focus-within{border-color:rgba(13,13,13,.26);box-shadow:0 12px 34px rgba(13,13,13,.07)}
.pmv-card:hover::before,.pmv-card:focus-within::before{transform:scaleX(1)}
.pmv-card:hover .pmv-label{color:var(--ink)}

@media(min-width:992px){
  /* purpose stands tall on the left; mission and vision stack beside it */
  .pmv{grid-template-columns:1.3fr 1fr;align-items:stretch}
  .pmv-lead{grid-row:1/3}
  /* the column is already narrow, so the ch cap would only re-introduce
     the empty band it was there to prevent */
  .pmv-lead p{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .pmv-lead::before{transition:none;transform:scaleY(1)}
  .pmv-card::before{transition:none}
}

/* ══ Services hub — the eight lines and what sits inside each ══ */
.pillars{display:grid;gap:clamp(16px,1.8vw,22px)}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.pillar-head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding-block-end:20px;margin-block-end:22px;border-block-end:1px solid var(--line)}
.pillar-head .code{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--brass-ink);
  border:1px solid rgba(179,130,47,.4);border-radius:var(--r);padding:5px 8px;line-height:1}
.pillar-head h3{font-size:1.1rem;font-weight:500;margin:0 0 8px}
.pillar-head p{margin:0;font-size:.92rem;line-height:1.65;color:var(--muted)}
.pillar .check{margin-block-end:22px}
.pillar .check li{font-size:.9rem}
/* the link is the last thing in the block whatever the list length */
.pillar-more{margin-block-start:auto;font-size:.88rem;font-weight:500;text-decoration:none;
  border-block-end:1px solid var(--brass);padding-block-end:2px;align-self:start;
  transition:color .3s var(--ease)}
.pillar-more:hover{color:var(--brass-ink)}

/* engagement steps: a real sequence, so the numbers carry information.
   Named .eng-step, not .step — acme.css owns .step for the homepage
   process band and turns it into a 56px grid below 992px. */
.eng-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,2.6vw,32px);
  grid-template-columns:1fr;counter-reset:step}
.eng-step{padding-block-start:20px;border-block-start:1px solid rgba(250,250,247,.16)}
.eng-step-n{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--brass-lo);margin-block-end:14px}
.eng-step h3{font-size:1.04rem;font-weight:500;margin:0 0 8px;color:var(--paper)}
.eng-step p{margin:0;font-size:.92rem;line-height:1.68;color:var(--muted-inv)}

@media(min-width:768px){
  .eng-steps{grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.6vw,36px) clamp(24px,3vw,44px)}
}
@media(min-width:992px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .eng-steps{grid-template-columns:repeat(4,1fr)}
}

/* a seam between two dark bands needs a light hairline; var(--line) is ink */
.cta.seam-before,.tl-ink.seam-before{border-block-start-color:rgba(250,250,247,.14)}

/* ══ Engagement flow — the four stages of a corporate tax filing ══
   These four were boxed cards, which said "four items" when the content is
   one sequence. The rail carries that instead.

   The whole track reveals from ONE trigger on the <ol>, not four independent
   ones, so it builds as a single run: node lands, its rail draws to the next
   node, the words rise under it, then the next stage. Each stage is offset
   --i * 200ms from the one before. */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3vw,34px)}
.flow-step{position:relative;padding-inline-start:60px;--in:calc(var(--i,0)*130ms)}

/* 1. the node lands */
.flow-node{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:42px;aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;background:var(--paper);
  border:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--muted);z-index:1;
  opacity:0;transform:scale(.5);
  transition:opacity .4s var(--ease),transform .5s cubic-bezier(.34,1.4,.5,1),
             border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease);
  transition-delay:var(--in)}
.flow.in .flow-node{opacity:1;transform:none;border-color:var(--brass);color:var(--ink)}
/* a ring pushes out of the node once, as it lands */
.flow-node::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--brass);opacity:0}
.flow.in .flow-node::after{animation:flow-ping .85s var(--ease) forwards;
  animation-delay:calc(var(--in) + 260ms)}
@keyframes flow-ping{
  0%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.85)}
}
.flow-step:hover .flow-node{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* 2. the rail draws from that node to the next */
.flow-step::before,.flow-step::after{content:"";position:absolute;inset-inline-start:21px;
  inset-block-start:42px;inline-size:1px;block-size:calc(100% + clamp(26px,3vw,34px) - 42px)}
.flow-step::before{background:var(--line)}
.flow-step::after{background:var(--brass);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease);transition-delay:calc(var(--in) + 300ms)}
.flow.in .flow-step::after{transform:scaleY(1)}
.flow-step:last-child::before,.flow-step:last-child::after{display:none}

/* 3. the words rise under it */
.flow-tag,.flow-step h3,.flow-step p{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.flow-tag{transition-delay:calc(var(--in) + 180ms)}
.flow-step h3{transition-delay:calc(var(--in) + 250ms)}
.flow-step p{transition-delay:calc(var(--in) + 320ms)}
.flow.in .flow-tag,.flow.in .flow-step h3,.flow.in .flow-step p{opacity:1;transform:none}

.flow-tag{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-ink);margin-block-end:10px}
.flow-step h3{font-size:1.1rem;font-weight:500;margin:0 0 9px}
.flow-step p{margin:0;font-size:.93rem;line-height:1.68;color:var(--muted);max-width:34ch}

@media(min-width:992px){
  /* horizontal track: the rail runs through the nodes across the row */
  .flow{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px)}
  .flow-step{padding-inline-start:0;padding-block-start:62px}
  .flow-node{inset-block-start:0}
  .flow-step::before,.flow-step::after{inset-block-start:21px;inset-inline-start:42px;
    inline-size:calc(100% - 42px + clamp(20px,2.4vw,32px));block-size:1px}
  .flow-step::after{transform:scaleX(0);transform-origin:left}
  .flow.in .flow-step::after{transform:scaleX(1)}
  html[dir="rtl"] .flow-step::after{transform-origin:right}
  .flow-step p{max-width:32ch}
}
@media(prefers-reduced-motion:reduce){
  /* everything arrives in place; nothing travels */
  .flow-node,.flow-tag,.flow-step h3,.flow-step p,.flow-step::after{transition:none}
  .flow-node{opacity:1;transform:none}
  .flow-tag,.flow-step h3,.flow-step p{opacity:1;transform:none}
  .flow-step::after{transform:none}
  .flow.in .flow-node::after{animation:none}
}

/* ══ Events schedule ══ */
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:0}
.agenda-row{display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:start;
  padding:clamp(22px,2.4vw,30px) clamp(10px,1.4vw,18px);margin-inline:calc(clamp(10px,1.4vw,18px)*-1);border-block-start:1px solid var(--line);
  transition:background-color .4s var(--ease)}
.agenda-row:last-child{border-block-end:1px solid var(--line)}
.agenda-row:hover{background:var(--cream)}
.agenda-when{inline-size:64px;text-align:center;border:1px solid var(--line);border-radius:var(--r);
  padding-block:10px;background:var(--paper);transition:border-color .4s var(--ease)}
.agenda-row:hover .agenda-when{border-color:var(--brass)}
.agenda-when b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:400;line-height:1}
.agenda-when span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.agenda-tag{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);margin-block-end:8px}
.agenda-what h3{font-size:1.08rem;font-weight:500;margin:0 0 7px}
.agenda-what p{margin:0;font-size:.92rem;line-height:1.65;color:var(--muted);max-width:56ch}
.agenda-go{grid-column:2;font-size:.88rem;font-weight:500;text-decoration:none;justify-self:start;
  border-block-end:1px solid var(--brass);padding-block-end:2px;transition:color .3s var(--ease)}
.agenda-go:hover{color:var(--brass-ink)}

@media(min-width:768px){
  .agenda-row{grid-template-columns:auto 1fr auto;align-items:center}
  .agenda-go{grid-column:3;justify-self:end}
}

/* ══ Careers — open roles ══ */
.roles{list-style:none;margin:0;padding:0}
.role{display:grid;gap:14px;padding:clamp(24px,2.6vw,32px) clamp(10px,1.4vw,18px);
  margin-inline:calc(clamp(10px,1.4vw,18px)*-1);
  border-block-start:1px solid var(--line);transition:background-color .4s var(--ease)}
.role:last-child{border-block-end:1px solid var(--line)}
.role:hover,.role:focus-within{background:var(--cream)}
.role-main h3{font-size:1.14rem;font-weight:500;margin:0 0 8px;transition:color .3s var(--ease)}
.role-main p{margin:0;font-size:.93rem;line-height:1.66;color:var(--muted);max-width:60ch}
.role-meta{display:flex;flex-wrap:wrap;gap:8px}
.role-meta span{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:var(--r);padding:5px 9px}
.role-go{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:500;
  text-decoration:none;justify-self:start;transition:gap .3s var(--ease)}
.role-go svg{width:14px;height:14px}
.role:hover .role-go{gap:15px;color:var(--brass-ink)}
html[dir="rtl"] .role-go svg{transform:scaleX(-1)}

@media(min-width:992px){
  .role{grid-template-columns:1fr 240px 120px;gap:32px;align-items:center}
  .role-meta{flex-direction:column;gap:6px;align-items:start}
  .role-go{justify-self:end}
}

/* ══ Cross-navigation between service lines ══ */
/* borders on the items, not a 1px gap over a tinted container: seven links
   never fill a 2- or 3-column grid evenly, and the gap trick painted the
   leftover cell grey */
.lines{display:grid;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.line-link{display:flex;align-items:center;gap:14px;background:var(--paper);padding:18px 20px;
  border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line);
  margin-block-start:-1px;margin-inline-start:-1px;
  text-decoration:none;transition:background-color .35s var(--ease),padding-inline-start .35s var(--ease)}
.line-link small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--brass-ink);
  flex:none;inline-size:34px}
.line-link span{font-size:.95rem;font-weight:500;color:var(--ink)}
.line-link:hover{background:var(--cream);padding-inline-start:28px}
@media(min-width:768px){ .lines{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1200px){ .lines{grid-template-columns:repeat(3,1fr)} }

/* ══════════ Reveal and hover polish ══════════
   Three shared components were static: the checklists, the plain cards and
   the service-lines grid. Each now cascades in from its own container's
   reveal, so the trigger count stays the same and nothing animates twice. */

/* ── checklists: ticks draw in, one after another ── */
.check.rv li{opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.check.rv.in li{opacity:1;transform:none}
.check.rv li:nth-child(1){transition-delay:40ms}
.check.rv li:nth-child(2){transition-delay:100ms}
.check.rv li:nth-child(3){transition-delay:160ms}
.check.rv li:nth-child(4){transition-delay:220ms}
.check.rv li:nth-child(5){transition-delay:280ms}
.check.rv li:nth-child(6){transition-delay:340ms}
.check.rv li:nth-child(7){transition-delay:400ms}
.check.rv li:nth-child(8){transition-delay:460ms}
.check.rv li:nth-child(n+9){transition-delay:520ms}
/* the tick itself scales up as the row arrives, and thickens on hover */
.check.rv li::before{transform:rotate(-45deg) scale(.4);opacity:0;
  transition:transform .45s cubic-bezier(.34,1.4,.5,1),opacity .35s var(--ease),
             border-color .3s var(--ease),border-width .2s var(--ease);
  transition-delay:inherit}
.check.rv.in li::before{transform:rotate(-45deg) scale(1);opacity:1}
.check li:hover::before{border-color:var(--ink);border-width:2px}
.check li:hover{color:var(--ink)}

/* ── plain cards: same brass edge and lift as the other card families ── */
.card-plain{position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.card-plain::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:100%;block-size:2px;background:var(--brass);transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease)}
html[dir="rtl"] .card-plain::before{transform-origin:right}
.card-plain:hover,.card-plain:focus-within{border-color:rgba(13,13,13,.26);
  box-shadow:0 12px 34px rgba(13,13,13,.07);transform:translateY(-3px)}
.card-plain:hover::before,.card-plain:focus-within::before{transform:scaleX(1)}
.card-plain:hover .code{color:var(--ink)}
.card-plain .code{transition:color .3s var(--ease)}

/* ── service-lines grid: cells arrive in sequence, brass edge on approach ── */
.line-link{position:relative;transition:background-color .35s var(--ease),padding-inline-start .35s var(--ease)}
.lines.rv .line-link{opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             background-color .35s var(--ease),padding-inline-start .35s var(--ease)}
.lines.rv.in .line-link{opacity:1;transform:none}
.lines.rv .line-link:nth-child(1){transition-delay:0ms}
.lines.rv .line-link:nth-child(2){transition-delay:70ms}
.lines.rv .line-link:nth-child(3){transition-delay:140ms}
.lines.rv .line-link:nth-child(4){transition-delay:210ms}
.lines.rv .line-link:nth-child(5){transition-delay:280ms}
.lines.rv .line-link:nth-child(6){transition-delay:350ms}
.lines.rv .line-link:nth-child(n+7){transition-delay:420ms}
.line-link::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:2px;
  background:var(--brass);transform:scaleY(0);transition:transform .35s var(--ease)}
.line-link:hover::before,.line-link:focus-visible::before{transform:scaleY(1)}
.line-link small{transition:color .3s var(--ease)}
.line-link:hover small{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .check.rv li,.check.rv li::before,.lines.rv .line-link,.card-plain,.card-plain::before{transition:none}
  .check.rv li,.lines.rv .line-link{opacity:1;transform:none}
  .check.rv li::before{opacity:1;transform:rotate(-45deg)}
  .card-plain:hover,.card-plain:focus-within{transform:none}
}

/* ══ Ribbon: the one piece of decoration on the page head ══
   A moire figure generated by tools/make-ribbon.py, not a stock graphic. It
   sits on the empty right side of the dark header, behind .page-head .container
   (which already carries z-index:1), and drifts slowly enough that you notice
   it only if you rest on the page. Hidden below 992px, where the header text
   uses the full width and it would sit under the words. */
.page-head::after{
  content:"";position:absolute;inset-block:-14%;inset-inline-end:-4%;
  inline-size:min(262px,21vw);
  background:url("../img/ribbon.svg") center/contain no-repeat;
  opacity:0;pointer-events:none;
  /* soften both ends so it reads as passing through the band, not pasted on */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  animation:ribbon-in 1.6s var(--ease) .25s forwards,
            ribbon-drift 34s ease-in-out 1.6s infinite alternate}
@keyframes ribbon-in{to{opacity:.62}}
@keyframes ribbon-drift{
  from{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  to  {transform:translate3d(-14px,26px,0) scale(1.05) rotate(1.6deg)}
}
html[dir="rtl"] .page-head::after{transform:scaleX(-1)}
html[dir="rtl"] .page-head::after{animation-name:ribbon-in,ribbon-drift-rtl}
@keyframes ribbon-drift-rtl{
  from{transform:scaleX(-1) translate3d(0,0,0) scale(1)}
  to  {transform:scaleX(-1) translate3d(-14px,26px,0) scale(1.05)}
}
@media(max-width:991.98px){ .page-head::after{display:none} }
@media(prefers-reduced-motion:reduce){
  /* stop the drift, and swap in the twin that has no internal animation —
     the media query inside the SVG cannot be relied on to fire when the file
     is a background-image, so the swap happens out here instead */
  .page-head::after{animation:none;opacity:.5;
    background-image:url("../img/ribbon-static.svg")}
}

/* ── the checklist column sits against a taller heading column ──
   The left column (eyebrow, heading, chevron rule, lede) runs ~440px while a
   six-item list is ~240px, so the list hung at the top with a 300px void
   under it. Centring the list against its neighbour splits that space and the
   section stops looking half-empty. */
@media(min-width:992px){
  .row.g-brand > [class*="col-"]:has(> .check.cols){
    display:flex;flex-direction:column;justify-content:center}
  /* short lists get a little more air per row so they hold their column */
  .check.cols:not(:has(li:nth-child(7))) li{padding-block:19px}
}


/* masonry by columns, not grid rows: the formats have different shapes (3:2
   article art, 4:5 reel covers) and a row grid left a band of dead space under
   every short card. Columns let each card keep its own height. */
.g-grid{columns:1;column-gap:clamp(14px,1.6vw,22px)}
.g-card{display:block;text-decoration:none;color:inherit;break-inside:avoid;
  margin-block-end:clamp(18px,2vw,28px)}
.g-card[hidden]{display:none}
.g-shot{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--ink-2);margin-block-end:14px}
/* no forced ratio: each image keeps its own, which is the point of masonry */
.g-shot img{width:100%;height:auto;display:block;
  transition:transform .7s var(--ease)}
.g-card:hover .g-shot img,.g-card:focus-visible .g-shot img{transform:scale(1.05)}
/* video and podcast carry a mark so the format reads without the label */
.g-play{position:absolute;inset-block-end:12px;inset-inline-start:12px;inline-size:38px;aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;background:rgba(13,13,13,.72);color:var(--paper);
  backdrop-filter:blur(3px);transition:background-color .35s var(--ease),transform .35s var(--ease)}
.g-play svg{width:15px;height:15px}
.g-card:hover .g-play{background:var(--brass);color:var(--ink);transform:scale(1.08)}
.g-meta{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);margin-block-end:7px}
.g-title{display:block;font-size:1rem;line-height:1.5;font-weight:500;max-width:34ch;
  transition:color .3s var(--ease)}
.g-card:hover .g-title{color:var(--brass-ink)}
.g-empty{margin:0;padding-block:40px;text-align:center;color:var(--muted)}

@media(min-width:576px){ .g-grid{columns:2} }
@media(min-width:992px){
  .g-grid{columns:3}
  .g-bar{grid-template-columns:1fr auto;align-items:center}
  .g-count{justify-self:end}
}
@media(prefers-reduced-motion:reduce){
  .g-shot img,.g-play{transition:none}
  .g-card:hover .g-shot img,.g-card:hover .g-play{transform:none}
}

/* ══ Gallery ══
   Sections rather than one filtered grid: a reel, a 30-minute episode and a
   press mention are consumed differently and want different shapes. Tabs are
   used in the Read section only, where the item count justifies them. */

/* jump nav in the page head */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:26px}
.jump a{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-inv);text-decoration:none;border:1px solid rgba(250,250,247,.2);
  border-radius:var(--r);padding:8px 14px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.jump a:hover{color:var(--ink);background:var(--brass);border-color:var(--brass)}

/* 1. latest: one lead, two supporting */
.lt-grid{display:grid;gap:clamp(16px,1.8vw,26px)}
.lt-lead,.lt-side{display:block;text-decoration:none;color:inherit}
.lt-shot{display:block;overflow:hidden;border-radius:var(--r);background:var(--ink-2);
  margin-block-end:16px}
.lt-shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;
  transition:transform .7s var(--ease)}
.lt-lead:hover .lt-shot img,.lt-side:hover .lt-shot img{transform:scale(1.04)}
.lt-meta{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);margin-block-end:8px}
.lt-lead-title{display:block;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.34;
  font-weight:500;max-width:26ch;transition:color .3s var(--ease)}
.lt-lead:hover .lt-lead-title{color:var(--brass-ink)}
.lt-dek{display:block;margin-block-start:12px;font-size:.93rem;line-height:1.65;
  color:var(--muted);max-width:52ch}
.lt-side-col{display:grid;gap:clamp(16px,1.8vw,26px);align-content:start}
.lt-title{display:block;font-size:.98rem;line-height:1.45;font-weight:500;max-width:30ch;
  transition:color .3s var(--ease)}
.lt-side:hover .lt-title{color:var(--brass-ink)}
.lt-side .lt-shot img{aspect-ratio:16/10}

/* 2. read: tabs plus cards */
.g-bar{display:grid;gap:16px;margin-block-end:clamp(22px,2.4vw,30px)}
.g-filters{display:flex;flex-wrap:wrap;gap:8px}
.g-filter{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:9px 15px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.g-filter:hover{color:var(--ink);border-color:rgba(13,13,13,.3)}
.g-filter.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.g-count{margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.rd-grid{display:grid;gap:clamp(16px,1.8vw,26px);grid-template-columns:1fr}
.rd-card{display:block;text-decoration:none;color:inherit}
.rd-card[hidden]{display:none}
.rd-shot{display:block;overflow:hidden;border-radius:var(--r);background:var(--ink-2);
  margin-block-end:14px}
.rd-shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;
  transition:transform .7s var(--ease)}
.rd-card:hover .rd-shot img{transform:scale(1.05)}
.rd-meta{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);margin-block-end:7px}
.rd-title{display:block;font-size:1rem;line-height:1.5;font-weight:500;max-width:34ch;
  transition:color .3s var(--ease)}
.rd-card:hover .rd-title{color:var(--brass-ink)}
.g-empty{margin:0;padding-block:40px;text-align:center;color:var(--muted)}

/* 4. listen: numbered rows on ink */
.eps{list-style:none;margin:0;padding:0}
.ep{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px 18px;align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(10px,1.4vw,18px);margin-inline:calc(clamp(10px,1.4vw,18px)*-1);
  border-block-start:1px solid rgba(250,250,247,.14);
  transition:background-color .4s var(--ease)}
.ep:last-child{border-block-end:1px solid rgba(250,250,247,.14)}
.ep:hover{background:rgba(250,250,247,.04)}
.ep-n{font-family:var(--mono);font-size:.78rem;color:var(--brass-lo)}
.ep-title{display:block;font-size:1.04rem;font-weight:500;color:var(--paper);margin-block-end:6px}
.ep-dek{display:block;font-size:.9rem;line-height:1.6;color:var(--muted-inv);max-width:60ch}
.ep-dur{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-inv);white-space:nowrap}
.ep-go{display:grid;place-items:center;inline-size:38px;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(250,250,247,.2);color:var(--paper);
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.ep-go svg{width:16px;height:16px}
.ep:hover .ep-go{background:var(--brass);color:var(--ink);border-color:var(--brass)}

@media(min-width:576px){ .rd-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:992px){
  .lt-grid{grid-template-columns:1.25fr 1fr;align-items:start}
  .rd-grid{grid-template-columns:repeat(3,1fr)}
  .g-bar{grid-template-columns:1fr auto;align-items:center}
  .g-count{justify-self:end}
}
@media(max-width:575.98px){
  .ep{grid-template-columns:auto 1fr;gap:10px 14px}
  .ep-dur{grid-column:2;justify-self:start}
  .ep-go{grid-column:2;justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .lt-shot img,.rd-shot img{transition:none}
  .lt-lead:hover .lt-shot img,.lt-side:hover .lt-shot img,.rd-card:hover .rd-shot img{transform:none}
}

/* ══ Sub-services: index and detail ══
   A card grid gave twelve services equal weight and ran to three screens.
   The index keeps the whole line in view while the pane gives the selected
   one room to speak. Below 992px the panes are dropped and each row carries
   its own descriptor, because two columns on a phone is just a narrow list. */
.ex{display:grid;gap:clamp(14px,1.6vw,22px)}
.ex-list{display:grid;gap:2px}
.ex-tab{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;
  text-align:start;background:transparent;border:0;border-block-end:1px solid var(--line);
  padding:15px 12px;cursor:pointer;color:inherit;
  transition:background-color .3s var(--ease),padding-inline-start .3s var(--ease)}
.ex-tab:first-child{border-block-start:1px solid var(--line)}
.ex-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--brass-ink)}
.ex-name{display:block;font-size:.97rem;font-weight:500;line-height:1.4;
  transition:color .3s var(--ease)}
.ex-dek{display:block;margin-block-start:4px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.ex-caret{display:grid;place-items:center;color:var(--muted);opacity:0;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ex-caret svg{width:13px;height:13px}
.ex-tab:hover{background:var(--cream)}
.ex-tab:hover .ex-name{color:var(--brass-ink)}
.ex-tab:hover .ex-caret{opacity:1}
html[dir="rtl"] .ex-caret svg{transform:scaleX(-1)}

/* the pane */
.ex-pane{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.8vw,38px)}
.ex-code{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);margin-block-end:14px}
.ex-pane h3{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:500;line-height:1.3;
  margin:0 0 12px;max-width:20ch}
.ex-lede{margin:0 0 24px;font-size:.98rem;line-height:1.7;color:var(--muted);max-width:42ch}
.ex-go{margin-block-start:4px}

@media(min-width:992px){
  .ex{grid-template-columns:1fr 0.92fr;gap:clamp(28px,3.4vw,54px);align-items:start}
  /* the descriptor lives in the pane at this width, not twice on the page */
  .ex-dek{display:none}
  /* white on a grey band is too quiet to read as 'selected', so the
     active row also carries a brass edge */
  .ex-tab{position:relative}
  .ex-tab::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;
    inline-size:2px;background:var(--brass);transform:scaleY(0);
    transition:transform .3s var(--ease)}
  .ex-tab.is-on::before{transform:scaleY(1)}
  .ex-tab.is-on{background:var(--paper);padding-inline-start:18px}
  .ex-tab.is-on .ex-name{color:var(--ink)}
  .ex-tab.is-on .ex-n{color:var(--brass)}
  .ex-tab.is-on .ex-caret{opacity:1;transform:translateX(3px)}
  .ex-panes{position:sticky;top:96px}
  .ex-pane{animation:ex-in .35s var(--ease)}
  @keyframes ex-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media(max-width:991.98px){
  /* no pane: every row shows its own descriptor and the section is a list */
  .ex-panes{display:none}
  .ex-caret{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .ex-pane{animation:none}
  .ex-tab,.ex-caret{transition:none}
}

/* ══ Where it goes wrong ══ */
.pits{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.2vw,30px)}
.pit{padding-block-start:20px;border-block-start:1px solid rgba(250,250,247,.16)}
.pit-n{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--brass-lo);margin-block-end:12px}
.pit h3{font-size:1.04rem;font-weight:500;margin:0 0 8px;color:var(--paper)}
.pit p{margin:0;font-size:.92rem;line-height:1.68;color:var(--muted-inv)}

/* ══ Who it is for ══ */
.auds{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,1.8vw,24px)}
.aud{padding:clamp(20px,2.2vw,28px);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.aud:hover{border-color:rgba(13,13,13,.26);box-shadow:0 10px 28px rgba(13,13,13,.07)}
.aud h3{font-size:1.02rem;font-weight:500;margin:0 0 8px}
.aud p{margin:0;font-size:.92rem;line-height:1.65;color:var(--muted)}

/* a "not included" list reads wrong with ticks: the mark becomes a dash */
.check.cols.is-out li::before{transform:none;border:0;inline-size:9px;block-size:1px;
  background:var(--muted);inset-block-start:.82em;opacity:1}
.check.rv.cols.is-out.in li::before{transform:none}
.check.cols.is-out li{color:var(--muted)}

@media(min-width:768px){
  .sub-grid{grid-template-columns:repeat(2,1fr)}
  .auds{grid-template-columns:repeat(3,1fr)}
  .pits{grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,36px)}
}

/* ══ Image and text ══
   Two per service line, alternating sides. The art is 3:4 portrait, so the
   frame is 4:5 and the copy column carries the height rather than the image
   being stretched into a letterbox. */
.feat{display:grid;gap:clamp(24px,3vw,44px);align-items:center}
.feat-shot{overflow:hidden;border-radius:var(--r);background:var(--ink-2)}
.feat-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block;
  transition:transform .8s var(--ease)}
.feat-shot:hover img{transform:scale(1.03)}
.feat-copy p{font-size:.97rem;line-height:1.75;color:var(--muted);margin:0 0 16px;max-width:58ch}
.feat-copy p:last-child{margin-block-end:0}
/* a single fact under the copy, for the blocks that carry one */
.feat-note{display:grid;gap:3px;margin-block-start:26px;padding-block-start:20px;
  border-block-start:1px solid var(--line)}
.feat-note-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink)}
.feat-note span:last-child{font-size:.95rem;color:var(--ink)}

@media(min-width:992px){
  /* equal columns on purpose: with 0.85fr 1fr, flipping the image to the
     second slot handed it the WIDER column and squeezed the copy, so the two
     blocks were not mirrors of each other at all */
  .feat{grid-template-columns:1fr 1fr;gap:clamp(36px,4.4vw,72px)}
  .feat.is-flip .feat-shot{order:2}
}
@media(prefers-reduced-motion:reduce){
  .feat-shot img{transition:none}
  .feat-shot:hover img{transform:none}
}

/* ══ Sub-service pages read as a level down ══
   Both templates share a component library, which is the point, but sharing
   components is not the same as sharing a voice: a detail page was arriving
   at the same 44px display size and the same 1320px measure as the line page
   above it, so nothing told a visitor they had gone deeper. */

/* the owning line, named in the head rather than only in the breadcrumb */
.parent-chip{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  margin-block-end:20px;padding:6px 12px 6px 7px;border-radius:999px;
  border:1px solid rgba(250,250,247,.2);color:var(--muted-inv);font-size:.82rem;
  transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease)}
.parent-chip i{font-family:var(--mono);font-style:normal;font-size:.56rem;letter-spacing:.08em;
  color:var(--ink);background:var(--brass-lo);border-radius:999px;padding:4px 7px;line-height:1}
.parent-chip:hover{color:var(--paper);border-color:var(--brass);background:rgba(244,146,0,.1)}

.page-head.is-sub{padding-block:clamp(34px,4vw,56px) clamp(30px,3.4vw,48px)}
/* a sub-page is a heading inside its line, not a headline of its own */
.page-head.is-sub h1{font-size:clamp(1.7rem,3.1vw,2.35rem);max-width:22ch}
.page-head.is-sub .lede{font-size:.98rem;max-width:56ch}
/* the decorative ribbon stays with the line pages */
.page-head.is-sub::after{display:none}
.page-head.is-sub .rail{margin-block-start:22px;padding-block-start:18px}
.page-head.is-sub .rail dd{font-size:.92rem}
.page-head.is-sub .crumbs{margin-block-end:14px}

/* a narrower measure throughout, so the page feels like a document */
main:has(.page-head.is-sub){--maxw:1080px}