/* PHW site design system. One stylesheet for every phwltd.com page. */
:root {
  --ground:#f4f7fa;
  --paper:#ffffff;
  --ink:#0d1b2a;
  --muted:#5a6b7d;
  --line:#dfe6ee;
  --blue:#1170b8;
  --blue-dark:#0b568f;
  --ribbon-light:#8ec8f0;
  --ribbon-deep:#3b4fa3;
  --navy:#0d1b2a;
  --quiz-no:#c0392b;
  --ease:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:140px; }
body { margin:0; min-width:320px; background:var(--ground); color:var(--ink); font:400 16px/1.65 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
.wrap { width:min(100% - 64px,1200px); margin-inline:auto; }
a { color:var(--blue-dark); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--blue); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
::selection { background:var(--ribbon-light); color:var(--ink); }

/* Header and menu. Written to behave the same in every engine: no overflow-x:clip, no dvh,
   no reliance on a sticky parent clipping an absolute child. The phone menu is a fixed sheet
   that sits under the header and scrolls inside itself. Markup comes from phw_shell.py. */
:root { --line-strong:#76869a; --header-h:133px; }
header { --logo-w:491px; position:sticky; top:0; z-index:80; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 6px 24px rgba(13,27,42,.055); }
header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:132px; }
header .logo { flex:0 1 var(--logo-w); min-width:150px; display:flex; align-items:center; min-height:88px; }
header .logo img { width:100%; height:auto; }
@media (min-width:961px) { header .wrap { width:min(100% - 48px,1400px); } }
header nav { display:flex; flex:none; align-items:center; gap:clamp(8px,1.05vw,20px); }
header nav > a:not(.btn),.nav-trade-link { display:inline-flex; align-items:center; min-height:44px; padding:7px 1px; color:var(--ink); white-space:nowrap; font-size:13px; font-weight:680; text-decoration:none; position:relative; }
header nav > a:not(.btn)::after,.nav-trade-link::after { content:""; position:absolute; bottom:4px; left:0; right:100%; height:2px; background:var(--blue); }
header nav > a:not(.btn):hover::after,header nav > a[aria-current]:not(.btn)::after,.nav-trade-link:hover::after,.nav-trade-link[aria-current]::after,.nav-trade-link[aria-expanded="true"]::after { right:0; }
header nav > a[aria-current]:not(.btn),.nav-trade-link[aria-current] { color:var(--blue-dark); font-weight:780; }
.nav-trade-link::before { content:""; order:2; margin-left:7px; border:4px solid transparent; border-top:5px solid currentColor; border-bottom:0; }
.nav-trade-link[aria-expanded="true"]::before { border-top:0; border-bottom:5px solid currentColor; }
header nav a.btn { white-space:nowrap; padding-inline:17px; font-size:13px; }
header nav a.btn[aria-current] { outline:2px solid var(--blue-dark); outline-offset:3px; }
.nav-trade { position:relative; }
.trade-panel { display:none; position:absolute; top:calc(100% + 8px); left:-14px; z-index:90; width:min(600px,calc(100vw - 48px)); padding:12px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 18px 40px rgba(13,27,42,.2); }
.nav-trade.open .trade-panel { display:grid; }
.trade-panel a { display:flex; align-items:center; min-height:48px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:6px; background:var(--paper); color:var(--ink); font-size:14px; font-weight:700; line-height:1.25; text-decoration:none; }
.trade-panel a:hover { border-color:var(--blue); background:var(--ground); color:var(--blue-dark); }
.trade-panel a[aria-current] { background:var(--navy); border-color:var(--navy); color:#ffffff; }
.trade-panel a.all-trades { background:var(--ground); font-weight:800; justify-content:space-between; }
.trade-panel a.all-trades::after { content:"\2192"; margin-left:10px; }
/* Narrow desktop: the nav keeps its size and the logo takes what is left (full 88px from about 1290px). */
@media (min-width:961px) and (max-width:1230px) {
  header .wrap { width:min(100% - 32px,1400px); gap:12px; }
  header nav { gap:6px; }
  header nav > a:not(.btn),.nav-trade-link { font-size:12px; }
  header nav a.btn { padding-inline:12px; font-size:12px; }
  .nav-trade-link::before { margin-left:5px; }
}
.menu-btn { display:none; flex:none; position:relative; z-index:2; width:48px; height:48px; padding:0; border:1px solid var(--line-strong); border-radius:8px; background:var(--paper); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.menu-btn span { display:block; width:20px; height:2px; border-radius:1px; background:var(--ink); }
.menu-btn[aria-expanded="true"] { border-color:var(--navy); background:var(--navy); }
.menu-btn[aria-expanded="true"] span { background:#ffffff; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
html.menu-open { overflow:hidden; }

/* Dark headings echo the certificate's blue while the rest of the site stays light. */
.hero { position:relative; isolation:isolate; overflow:hidden; padding:clamp(58px,7vw,100px) 0 clamp(62px,7vw,106px); background:var(--navy); color:var(--paper); border-bottom:5px solid var(--blue); }
.hero::before { content:""; position:absolute; top:0; left:max(32px,calc((100% - 1200px)/2)); width:105px; height:4px; background:linear-gradient(90deg,var(--ribbon-light),var(--ribbon-deep)); }
.hero::after { content:""; position:absolute; right:-125px; top:55px; width:310px; height:310px; border:1px solid rgba(142,200,240,.14); transform:rotate(45deg); z-index:-1; pointer-events:none; }
.hero > .wrap { position:relative; }
.hero h1 { color:var(--paper); }
.eyebrow { display:inline-block; color:var(--ribbon-light); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:21px; }
h1,h2,h3 { font-family:Arial,"Helvetica Neue",system-ui,sans-serif; }
h1 { max-width:21ch; margin:0 0 22px; font-size:clamp(40px,4.9vw,70px); line-height:1.04; font-weight:750; letter-spacing:-.035em; word-spacing:.08em; text-wrap:balance; }
h1 em { color:var(--ribbon-light); font-style:normal; }
.lede { max-width:74ch; font-size:clamp(17px,1.6vw,20px); line-height:1.65; color:#ffffff; }
.lede strong { color:#ffffff; font-weight:750; }
.hero .lede a { color:var(--ribbon-light); font-weight:700; }
.hero .eyebrow a { color:var(--ribbon-light); display:inline-block; padding:15px 3px; margin:-15px 0; }
.hero .eyebrow a:hover { color:#ffffff; }
.hero .sub,.hero .sub a { color:#ffffff; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero.has-photo { padding-bottom:50px; }
.hero.has-photo h1 { max-width:19ch; }
.hero.has-photo > .wrap + .wrap { margin-top:46px !important; }
.hero .photo { width:100%; height:clamp(320px,39vw,525px); aspect-ratio:auto; border-radius:6px; border:1px solid rgba(255,255,255,.2); }
.hero .photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(13,27,42,.24),transparent 35%); pointer-events:none; }
.photo { position:relative; aspect-ratio:3/2; min-height:240px; overflow:hidden; background:var(--blue-dark); border:1px solid var(--line); border-radius:6px; }
.photo picture,.photo img { display:block; width:100%; height:100%; }
.photo img { object-fit:cover; object-position:center; }
.photo[data-slot="home-hero"] img { object-position:center 56%; }
.photo[data-slot="licensed-hero"] img { object-position:center 54%; }
@media (min-width:1101px) {
  .page-home .hero.has-photo { display:grid; grid-template-columns:minmax(32px,1fr) minmax(0,590px) minmax(0,610px) minmax(32px,1fr); align-items:stretch; gap:0; padding:64px 0; }
  .page-home .hero.has-photo > .wrap:first-child { grid-column:2; width:100%; margin:0; padding:22px 44px 22px 0; align-self:center; }
  .page-home .hero.has-photo > .wrap + .wrap { grid-column:3; width:100%; min-height:620px; margin:0 !important; }
  .page-home .hero .photo { height:100%; min-height:620px; }
  .page-home .hero.has-photo h1 { font-size:clamp(50px,4.5vw,65px); }
  .page-home .hero .lede { font-size:18px; }
}

/* A measured editorial rhythm rather than repetitive boxed panels. */
section:not(.hero) { padding:clamp(66px,7vw,108px) 0; border-bottom:1px solid var(--line); }
section:not(.hero):nth-of-type(odd) { background:var(--paper); }
section:not(.hero) > .wrap > h2 { max-width:800px; }
section:not(.hero) > .wrap > p:not(.sub) { max-width:76ch; }
h2 { margin:0 0 16px; color:var(--ink); font-size:clamp(29px,3.2vw,42px); line-height:1.15; letter-spacing:-.028em; word-spacing:.07em; font-weight:750; text-wrap:balance; }
h3 { margin:0 0 12px; color:var(--ink); font-size:clamp(18px,1.65vw,21px); line-height:1.28; letter-spacing:-.015em; word-spacing:.05em; font-weight:750; }
.sub { margin:0 0 34px; max-width:74ch; color:var(--muted); font-size:16px; line-height:1.65; }
p { margin:0 0 17px; color:var(--muted); }
p:last-child { margin-bottom:0; }
p > a:only-child:not(.btn) { padding-block:11px; margin-block:-11px; }
p strong,li strong { color:var(--ink); font-weight:750; }
ul { list-style:none; margin:0 0 20px; padding:0; }
li { position:relative; padding-left:23px; margin-bottom:9px; color:var(--muted); }
ul > li::before { content:""; position:absolute; left:1px; top:.72em; width:7px; height:7px; border:2px solid var(--blue); transform:rotate(45deg); }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 20px; border:1px solid var(--blue); border-radius:6px; background:var(--blue); color:#ffffff; font-size:14px; font-weight:760; line-height:1.25; text-align:center; text-decoration:none; cursor:pointer; box-shadow:0 3px 0 var(--blue-dark); }
.btn:hover { background:var(--blue-dark); border-color:var(--blue-dark); color:#ffffff; text-decoration:none; }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 var(--blue-dark); }
.btn.ghost,.btn.alt { background:transparent; color:var(--blue-dark); border-color:var(--blue-dark); box-shadow:none; }
.btn.ghost:hover,.btn.alt:hover { background:var(--ground); color:var(--blue-dark); border-color:var(--blue-dark); }
.hero .btn.ghost,.hero .btn.alt,section[id="quote"] .btn.ghost,section[id="report"] .btn.ghost { color:#ffffff; border-color:rgba(255,255,255,.75); }
.hero .btn.ghost:hover,.hero .btn.alt:hover,section[id="quote"] .btn.ghost:hover,section[id="report"] .btn.ghost:hover { background:rgba(255,255,255,.13); border-color:#ffffff; color:#ffffff; }
.btn.block { width:100%; }

.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card,.prod { position:relative; display:flex; flex-direction:column; min-width:0; padding:26px; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:6px; background:var(--paper); box-shadow:0 9px 28px rgba(13,27,42,.035); }
.card::before,.prod::before { content:""; display:block; width:28px; height:3px; margin-bottom:22px; background:var(--blue); }
.card .tag,.prod .code { display:inline-flex; align-self:flex-start; color:var(--blue-dark); font-size:11px; font-weight:850; letter-spacing:.105em; text-transform:uppercase; margin-bottom:13px; }
.card p,.prod .why { font-size:15px; line-height:1.63; margin-bottom:20px; }
.card a.go,.prod a.mb { display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; margin-top:auto; color:var(--blue-dark); font-size:14px; font-weight:780; text-underline-offset:5px; overflow-wrap:anywhere; }
.card a.go:hover,.prod a.mb:hover { color:var(--blue); }
.strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.strip .item { min-width:0; border:1px solid var(--line); background:var(--paper); border-radius:6px; padding:22px; }
.strip .item h3 { font-size:17px; }
.strip .item p { font-size:14px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
.chip { min-height:44px; padding:9px 17px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:5px; cursor:pointer; font:700 14px/1.2 inherit; }
.chip.active { color:var(--blue-dark); border:2px solid var(--blue); font-weight:800; text-decoration:underline; text-underline-offset:4px; }

.contents { padding:12px 30px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:6px; background:var(--paper); }
.contents ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; list-style:none; counter-reset:step; padding:0; margin:0; }
.contents li { min-width:0; margin:0; border-bottom:1px solid var(--line); padding:18px 8px 18px 44px; color:var(--ink); line-height:1.56; font-size:15px; }
.contents li::before { counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; top:19px; left:0; width:30px; color:var(--blue-dark); font:800 12px/1.6 Arial,sans-serif; letter-spacing:.03em; }
.doclist { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; }
.doclist div { min-width:0; padding:18px 18px 18px 20px; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:5px; background:var(--paper); color:var(--muted); font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.doclist b { display:block; margin-bottom:5px; color:var(--ink); font-size:15px; line-height:1.4; }
.hazcard .reg { color:var(--muted); font-size:13px; font-weight:650; margin:0 0 16px; }
.crumb { max-width:1200px; margin:0 auto; padding-top:20px; color:var(--muted); font-size:13px; }
.crumb a { color:var(--blue-dark); font-weight:700; }
.hero .crumb { padding:0; margin:0 0 20px; color:#ffffff; }
.hero .crumb a,.hero .crumb span { color:var(--ribbon-light); }
body > .wrap.crumb { margin-bottom:-1px; }

.call { max-width:900px; margin:27px 0; padding:23px 27px; background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:5px; }
.call.warn { border-left-width:6px; background:var(--ground); box-shadow:inset 0 0 0 1px var(--line); }
.call .lbl,.sample .lbl { display:block; margin-bottom:10px; color:var(--blue-dark); font-size:11px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.call.warn .lbl { color:var(--ink); font-weight:900; }
.call p:last-child { margin-bottom:0; }
.verify-box { max-width:900px; padding:30px; border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:5px; background:var(--paper); }
.verify-box .row { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.verify-box .row > div { padding:12px 15px; min-height:44px; border:1px solid var(--line); border-left:3px solid var(--blue); background:var(--ground); color:var(--ink); font-size:14px; }
.verify-box code { padding:3px 7px; border:1px solid var(--line); background:var(--ground); color:var(--blue-dark); border-radius:3px; }
.sample { max-width:900px; padding:30px; border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:5px; background:var(--paper); }
.law { max-width:900px; padding:25px 28px; margin:0 0 16px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:5px; background:var(--paper); }
.law .code { color:var(--blue-dark); font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.tw { max-width:100%; overflow-x:auto; margin:24px 0; -webkit-overflow-scrolling:touch; }
table { width:100%; min-width:560px; border-collapse:collapse; background:var(--paper); font-size:15px; }
th { padding:15px; text-align:left; background:var(--navy); color:#ffffff; border-bottom:2px solid var(--blue); font-size:12px; font-weight:750; }
td { padding:14px 15px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
tr:last-child td { border-bottom:0; }
td.hl { color:var(--ink); font-weight:750; }
td.tl { color:var(--blue-dark); font-weight:750; }
.faq details { max-width:900px; border:1px solid var(--line); background:var(--paper); border-radius:5px; margin-bottom:9px; }
.faq summary { position:relative; display:flex; align-items:center; min-height:58px; padding:15px 54px 15px 20px; color:var(--ink); font-size:15px; font-weight:740; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--blue-dark); font:700 24px/1 Arial,sans-serif; }
.faq details[open] { border-left:4px solid var(--blue); }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { padding:0 20px 20px; margin:0; }

/* The form retains every original input, name, option and destination. */
form { max-width:930px; padding:clamp(24px,4vw,45px); border:1px solid var(--line); border-top:4px solid var(--blue); background:var(--paper); border-radius:6px; box-shadow:0 18px 42px rgba(13,27,42,.055); }
.fgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; }
.fgrid .full { grid-column:1/-1; }
.field { min-width:0; margin:0; }
label { display:block; margin:0 0 7px; color:var(--ink); font-size:13px; font-weight:750; }
input,select,textarea { width:100%; min-height:48px; padding:11px 14px; border:1px solid var(--line-strong); border-radius:5px; background:var(--paper); color:var(--ink); font:inherit; font-size:15px; }
input:hover,select:hover,textarea:hover { border-color:var(--blue); }
@media (max-width:700px) { input,select,textarea { font-size:16px; } }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(17,112,184,.14); }
textarea { min-height:140px; resize:vertical; }
.honey { position:absolute; width:1px; height:1px; left:-9999px; opacity:0; }
form button { border-width:1px; }
.sent-banner { display:none; padding:17px 20px; margin-bottom:24px; border:2px solid var(--blue); border-left-width:6px; border-radius:4px; background:var(--ground); color:var(--ink); font-weight:750; }
.sent-banner.show { display:block; }

/* Group-level details are determined solely by the page path, not rewritten copy. */
.page-machine #scope { padding:30px 0; background:var(--paper); }
.page-machine #scope .wrap { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px 36px; }
.page-machine #scope h2 { margin:0; font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-dark); }
.page-machine #scope .sub { margin:0; font-size:17px; color:var(--ink); font-weight:650; }
.page-sector #risks > .wrap { display:grid; grid-template-columns:minmax(210px,.35fr) minmax(0,.65fr); gap:0 42px; }
.page-sector #risks h2,.page-sector #risks .sub { grid-column:1/-1; }
.page-sector #risks h3,.page-sector #risks p:not(.sub) { padding:24px 0; margin:0; border-top:1px solid var(--line); }
.page-sector #risks h3 { font-size:19px; }
.page-sector #risks p:not(.sub) { max-width:70ch; }
section[id="quote"],section[id="report"] { background:var(--navy) !important; border-bottom:0 !important; }
section[id="quote"] h2,section[id="report"] h2,section[id="quote"] p,section[id="report"] p { color:#ffffff; }
section[id="quote"] .sub,section[id="report"] .sub { color:#ffffff; }
section[id="quote"] .hero-cta { margin-top:20px; }

footer { padding:56px 0 70px; background:var(--navy); border-top:4px solid var(--blue); color:#ffffff; font-size:13px; }
footer .wrap { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); gap:30px 70px; }
footer .tagline { margin:0 0 16px; font-size:15px; font-weight:780; font-style:normal; color:#ffffff; }
footer .footer-line { margin:0 0 8px; color:#ffffff; }
footer nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:3px 16px; }
footer a { display:inline-flex; align-items:center; min-height:44px; color:#ffffff; font-weight:650; text-decoration:none; overflow-wrap:anywhere; }
footer a:hover { color:var(--ribbon-light); text-decoration:underline; }

@media (prefers-reduced-motion:no-preference) {
  .btn,.card,.prod,.menu-btn,header nav a::after { transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease),right .22s var(--ease); }
  .card:hover,.prod:hover { transform:translateY(-3px); border-color:var(--blue); box-shadow:0 18px 32px rgba(13,27,42,.09); }
  .hero.has-photo .photo { animation:photo-enter .55s var(--ease) both; }
  @keyframes photo-enter { from { opacity:.6; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
}
@media (max-width:1100px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .doclist { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:960px) {
  :root { --header-h:105px; }
  header { --logo-w:402px; }
  header .wrap { min-height:104px; }
  header .logo { position:relative; z-index:2; min-width:0; min-height:72px; }
  .menu-btn { display:flex; }
  header nav { display:none; }
  header nav.open { display:flex; flex-direction:column; align-items:stretch; gap:0; position:fixed; left:0; right:0; bottom:0; top:var(--nav-top,var(--header-h)); z-index:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:18px max(20px,env(safe-area-inset-right),calc((100% - 720px)/2)) calc(12px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left),calc((100% - 720px)/2)); background:var(--paper); border-top:1px solid var(--line); }
  .nav-trade-link { align-self:flex-start; min-height:44px; padding:0 0 6px; font-size:18px; font-weight:800; }
  .nav-trade-link::before,.nav-trade-link::after { display:none; }
  .trade-panel { display:grid; position:static; width:auto; margin:0 0 14px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
  .trade-panel a { font-size:15px; }
  header nav > a:not(.btn) { width:100%; min-height:50px; padding:12px 8px; border-bottom:1px solid var(--line); font-size:16px; }
  header nav > a:not(.btn)::after { display:none; }
  header nav > a[aria-current]:not(.btn) { padding-left:14px; border-left:4px solid var(--blue); }
  /* Get a quote stays on screen at the foot of the open panel; the ring hides links scrolling underneath it. */
  header nav a.btn { position:sticky; bottom:calc(12px + env(safe-area-inset-bottom)); margin-top:16px; min-height:52px; font-size:16px; box-shadow:0 3px 0 var(--blue-dark),0 0 0 12px var(--paper),0 40px 0 0 var(--paper),0 80px 0 0 var(--paper),0 -22px 16px 8px var(--paper); }
  .strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .wrap { width:calc(100% - 40px); }
  body { font-size:15.5px; }
  :root { --header-h:93px; }
  header { --logo-w:279px; }
  header .wrap { min-height:92px; gap:10px; }
  header .logo { min-height:50px; }
  .hero { padding:54px 0 64px; }
  .hero::after { width:190px; height:190px; right:-110px; top:48px; }
  h1 { font-size:clamp(37px,10vw,53px); }
  .hero-cta { gap:11px; }
  .hero .photo { height:300px; }
  .hero.has-photo > .wrap + .wrap { margin-top:30px !important; }
  section:not(.hero) { padding:65px 0; }
  .grid,.strip,.doclist,.contents ol { grid-template-columns:1fr; }
  .contents { padding:4px 22px; }
  .card,.prod { padding:23px; }
  .page-sector #risks > .wrap { grid-template-columns:1fr; }
  .page-sector #risks h3 { padding:19px 0 0; }
  .page-sector #risks p:not(.sub) { padding:8px 0 21px; border:0; }
  .fgrid { grid-template-columns:1fr; gap:16px; }
  footer .wrap { grid-template-columns:1fr; gap:34px; }
  footer nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:390px) {
  .wrap { width:calc(100% - 36px); }
  .hero .btn,.hero-cta .btn { width:100%; }
  .hero .photo { height:275px; }
  .verify-box,.sample,.call,.law { padding:22px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Image-led presentation layer across all templates. */
h1,h2,h3 { font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.hero.has-photo { display:flex; flex-direction:column; justify-content:center; min-height:clamp(630px,85vh,880px); padding:110px 0 125px; background:var(--navy); border-bottom:0; }
.hero.has-photo::before { z-index:3; }
.hero.has-photo::after { display:none; }
.hero.has-photo > .wrap { position:relative; z-index:2; width:min(100% - 64px,1200px); margin:0 auto; }
.hero.has-photo h1 { max-width:19ch; font-size:clamp(48px,6.3vw,92px); line-height:1.03; letter-spacing:-.038em; word-spacing:.09em; text-shadow:0 2px 18px rgba(13,27,42,.18); }
.hero.has-photo .lede { max-width:66ch; color:#ffffff; font-size:clamp(18px,1.6vw,21px); line-height:1.6; }
.hero.has-photo .eyebrow { margin-bottom:25px; }
.hero.has-photo .hero-cta { margin-top:37px; }
.hero.has-photo .hero-photo { position:absolute; inset:0; z-index:0; width:100%; height:100%; min-height:0; border:0; border-radius:0; aspect-ratio:auto; overflow:hidden; background:var(--blue-dark); }
.hero.has-photo .hero-photo picture,.hero.has-photo .hero-photo img { display:block; width:100%; height:100%; }
.hero.has-photo .hero-photo img { object-fit:cover; object-position:center; transform:translate3d(0,var(--photo-shift,0px),0) scale(1.065); }
.hero.has-photo .hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,27,42,.94) 0%,rgba(13,27,42,.9) 45%,rgba(13,27,42,.8) 66%,rgba(13,27,42,.36) 100%); }
.page-home .hero.has-photo { min-height:clamp(700px,calc(100vh - 132px),1000px); }
.page-home .hero.has-photo > .wrap:first-child { width:min(100% - 64px,1200px); max-width:1200px; padding:0; margin:0 auto; }
.page-home .hero.has-photo h1 { max-width:970px; font-size:clamp(58px,5.55vw,80px); }
.page-home .hero.has-photo .lede { max-width:69ch; }
.page-home .hero.has-photo .hero-photo { min-height:0; }
.page-home .hero.has-photo > .wrap + .wrap { display:none; }
.page-sector .hero.has-photo h1,.page-pack-sector .hero.has-photo h1 { max-width:20ch; font-size:clamp(48px,5.7vw,83px); }
.page-licensed-index .hero.has-photo h1,.page-verify .hero.has-photo h1 { font-size:clamp(48px,5.7vw,82px); }
.hero.has-photo .crumb { color:#ffffff; }
body > .wrap.crumb { position:relative; z-index:1; }

.image-card { padding-top:26px; overflow:hidden; }
.image-card::before { display:none; }
.image-card picture { display:block; height:clamp(185px,20vw,280px); margin:-26px -26px 22px; background:var(--blue-dark); overflow:hidden; }
.image-card picture img { width:100%; height:100%; object-fit:cover; transform:scale(1.01); }
.page-home #routes .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.page-home #sector-grid .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.page-home #sector-grid .image-card picture { height:310px; }
#quiz-grid .image-card picture { height:auto; aspect-ratio:1200/628; }
#quiz-grid .image-card picture img { object-fit:contain; transform:none; }

.section-rail { display:none; position:fixed; z-index:40; top:calc(50% + 12px); left:max(12px,calc((100% - 1430px)/2)); width:105px; transform:translateY(-50%); padding:10px 0; border-left:1px solid var(--line); background:rgba(255,255,255,.94); box-shadow:0 8px 26px rgba(13,27,42,.06); backdrop-filter:blur(12px); }
.section-rail button { display:block; width:100%; min-height:44px; border:0; border-left:3px solid transparent; background:transparent; color:var(--ink); text-align:left; padding:8px 7px; font:600 10px/1.28 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer; }
.section-rail button[aria-current] { border-left-color:var(--blue); color:var(--blue-dark); font-weight:850; text-decoration:underline; text-underline-offset:3px; }
.section-rail button:hover { background:var(--ground); }
body.has-section-rail .section-rail { display:block; }
@media (max-width:1399px) { .section-rail { display:none !important; } }

header.is-scrolled { box-shadow:0 12px 30px rgba(13,27,42,.12); }
@media (prefers-reduced-motion:no-preference) {
  .hero.has-photo .hero-photo { animation:none; }
  header { transition:box-shadow .2s var(--ease); }
  .reveal-candidate { opacity:.92; transform:translateY(12px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
  .reveal-candidate.is-visible { opacity:1; transform:translateY(0); }
  .image-card img { transition:transform .7s var(--ease); }
  .image-card:hover img { transform:scale(1.055); }
  #quiz-grid .image-card:hover img { transform:none; }
}
@media (max-width:1100px) {
  .page-home #routes .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .hero.has-photo { min-height:680px; padding:85px 0 95px; }
  .hero.has-photo > .wrap,.page-home .hero.has-photo > .wrap:first-child { width:calc(100% - 40px); }
  .hero.has-photo h1,.page-home .hero.has-photo h1,.page-sector .hero.has-photo h1,.page-pack-sector .hero.has-photo h1,.page-licensed-index .hero.has-photo h1,.page-verify .hero.has-photo h1 { max-width:100%; font-size:clamp(43px,10vw,58px); }
  .hero.has-photo .lede { font-size:17px; line-height:1.58; }
  .hero.has-photo .hero-photo::after { background:rgba(13,27,42,.82); }
  .page-home .hero.has-photo { min-height:calc(100svh - 92px); }
  .page-home #routes .grid,.page-home #sector-grid .grid { grid-template-columns:1fr; }
  .image-card picture,.page-home #sector-grid .image-card picture { height:250px; }
  #quiz-grid .image-card picture { height:auto; }
}
@media (max-width:390px) {
  .hero.has-photo > .wrap,.page-home .hero.has-photo > .wrap:first-child { width:calc(100% - 36px); }
  .hero.has-photo { padding:80px 0; }
  .hero.has-photo .hero-cta { margin-top:27px; }
}

.page-home #sample { background:var(--ground); overflow:hidden; }
.page-home #sample > .wrap { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); column-gap:60px; align-items:center; }
.page-home #sample h2,.page-home #sample .sub,.page-home #sample .sample { grid-column:1; }
.page-home #sample .sample { align-self:start; }
.evidence-stage { position:relative; grid-column:2; grid-row:1 / span 3; min-height:610px; display:flex; align-items:center; justify-content:center; }
.evidence-stage::before { content:""; position:absolute; width:450px; height:450px; border:1px solid var(--line); border-radius:50%; }
.certificate-preview { position:absolute; left:8%; top:6%; width:57%; max-width:335px; border:1px solid var(--line); background:var(--paper); box-shadow:0 25px 60px rgba(13,27,42,.17); transform:rotate(-7deg); }
.certificate-preview img { width:100%; height:auto; }
.phone-preview { position:absolute; right:5%; top:20%; width:38%; max-width:235px; padding:10px 8px 18px; border:5px solid var(--ink); border-radius:31px; background:var(--paper); box-shadow:0 28px 60px rgba(13,27,42,.25); transform:rotate(5deg); }
.phone-preview img { display:block; width:100%; height:auto; border-radius:19px 19px 10px 10px; }
@media (max-width:900px) {
  .page-home #sample > .wrap { grid-template-columns:1fr; }
  .page-home #sample h2,.page-home #sample .sub,.page-home #sample .sample,.evidence-stage { grid-column:1; grid-row:auto; }
  .evidence-stage { min-height:570px; margin-top:24px; }
}
@media (max-width:700px) {
  .evidence-stage { min-height:475px; }
  .evidence-stage::before { width:300px; height:300px; }
  .certificate-preview { left:0; width:63%; }
  .phone-preview { right:0; top:27%; width:41%; padding:7px 5px 12px; border-width:4px; border-radius:21px; }
}

/* Document entries read as a checklist, with a visible document glyph. */
.doclist { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px; row-gap:0; border-top:1px solid var(--line); }
.doclist div { position:relative; min-height:80px; margin:0; padding:20px 12px 20px 48px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.doclist div::before { content:""; position:absolute; left:10px; top:22px; width:21px; height:25px; border:2px solid var(--blue-dark); border-radius:2px; background:linear-gradient(var(--blue-dark),var(--blue-dark)) 4px 11px / 11px 2px no-repeat,linear-gradient(var(--blue-dark),var(--blue-dark)) 4px 16px / 8px 2px no-repeat; }
@media (max-width:700px) { .doclist { grid-template-columns:1fr; } }

footer .footer-logo { display:block; width:auto; height:72px; max-width:100%; background:#ffffff; padding:12px 16px; border-radius:12px; box-sizing:content-box; margin:0 0 18px; }
@media (max-width:560px){ footer .footer-logo { height:48px; } }

/* Free self-check + industry quizzes: same components as the rest of the
   site (cards, chips, btn), plus the interactive question/scoreboard/result
   pattern shared by the self-check and every industry quiz. */
.quiz-scoreboard { display:flex; align-items:center; flex-wrap:wrap; gap:16px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:18px 22px; margin-bottom:22px; }
.quiz-scoreboard .tally { font-weight:800; font-size:1.5rem; color:var(--ink); white-space:nowrap; }
.quiz-scoreboard .tally span { color:var(--muted); font-weight:650; font-size:.95rem; }
.quiz-scoreboard .tally #tallyValue { color:var(--ink); font-weight:800; font-size:1.5rem; }
.quiz-scoreboard .hint { color:var(--muted); font-size:.9rem; }
.quiz-questions { display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.quiz-q { background:var(--paper); padding:20px 22px; display:flex; flex-direction:column; gap:12px; }
.quiz-q .qnum { font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.quiz-q .qtext { font-size:1.05rem; font-weight:700; line-height:1.4; color:var(--ink); }
.qbtns { display:flex; gap:10px; }
.qbtn { font-weight:700; font-size:.9rem; min-height:48px; padding:8px 22px; border-radius:6px; cursor:pointer; border:2px solid var(--line-strong); background:var(--paper); color:var(--ink); }
.qbtn:hover { border-color:var(--blue-dark); }
.qbtn.active-yes { background:var(--blue); border-color:var(--blue); color:#ffffff; }
.qbtn.active-no { background:var(--navy); border-color:var(--navy); color:#ffffff; }
.qbtn.active-yes::before { content:"\2713\00a0"; }
.qbtn.active-no::before { content:"\2715\00a0"; }
.quiz-result { margin-top:24px; border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:8px; padding:28px; background:var(--paper); }
.quiz-result.pending { border-top-color:var(--line); color:var(--muted); }
.quiz-result h2 { font-size:1.25rem; margin-bottom:10px; }
.quiz-result p { margin-bottom:0; }
.quiz-gaps { list-style:none; display:flex; flex-direction:column; gap:10px; margin:16px 0 0; padding:0; }
.quiz-gaps li { border:1px solid var(--line); border-left:3px solid var(--quiz-no); border-radius:6px; padding:14px 16px; background:var(--ground); }
.quiz-gaps li strong { display:block; color:var(--ink); margin-bottom:4px; font-size:.96rem; }
.quiz-gaps li span { color:var(--muted); font-size:.9rem; }
.quiz-gaps li a { font-size:.88rem; font-weight:700; }
.quiz-email { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.quiz-email h3 { margin-bottom:8px; }
.quiz-email > p { color:var(--muted); font-size:.9rem; margin-bottom:16px; }
.quiz-email-row { display:flex; gap:10px; flex-wrap:wrap; }
.quiz-email-row input[type=email] { flex:1; min-width:220px; min-height:48px; background:var(--paper); border:1px solid var(--line-strong); border-radius:6px; padding:11px 14px; color:var(--ink); font:inherit; font-size:.95rem; }
.quiz-email-row input[type=text] { position:absolute; left:-9999px; }
.sector-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:0 0 8px; }
.sector-picker button,.sector-picker a { display:block; min-height:52px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:6px; padding:14px 16px; font-size:.95rem; font-weight:700; cursor:pointer; text-align:left; text-decoration:none; }
.sector-picker button:hover,.sector-picker a:hover { border-color:var(--blue); }
.sector-picker button.active { border-color:var(--blue); background:var(--ground); color:var(--blue-dark); }
.quiz-check-section { display:none; margin-top:36px; }
.quiz-check-section.show { display:block; }
@media (max-width:700px) {
  .quiz-q { padding:18px; }
  .qbtns { gap:8px; }
  .qbtn { flex:1; padding:8px 10px; }
}

/* Real HSE prosecutions section (build_cases.py) */
.page-cases-index #local .grid,.page-cases-index #filter .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1100px) { .page-cases-index #local .grid,.page-cases-index #filter .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .page-cases-index #local .grid,.page-cases-index #filter .grid { grid-template-columns:1fr; } }

/* Training matrix demo (/training-matrix/): states read by lightness, border
   style and a symbol/text pair, never by hue alone, so the page works for a
   colour-blind reader. */
.strip .item h3 { font-size:1.7rem; }
table.tm-table th.tm-col { min-width:78px; text-align:center; font-size:11px; }
table.tm-table td.tm-cell { text-align:center; padding:8px 6px; }
.tm-name { white-space:nowrap; }
.tm-role { display:block; margin-top:2px; color:var(--muted); font-size:12px; font-weight:600; }
.tm-pill { display:inline-flex; flex-direction:column; align-items:center; gap:2px; min-width:56px; padding:6px 7px; border-radius:4px; font-size:11px; font-weight:800; letter-spacing:.03em; }
.tm-pill .tm-sym { font-size:14px; line-height:1; }
.tm-pill.state-current { background:var(--paper); border:1px solid var(--line); color:var(--muted); }
.tm-pill.state-due { background:var(--ground); border:2px solid var(--blue); color:var(--blue-dark); }
.tm-pill.state-expired { background:var(--ink); border:2px solid var(--ink); color:#ffffff; }
.tm-pill.state-gap { background:repeating-linear-gradient(45deg,var(--ground),var(--ground) 6px,var(--paper) 6px,var(--paper) 12px); border:2px dashed var(--muted); color:var(--ink); }
.tm-pill.state-na { background:transparent; border:1px dashed var(--line); color:var(--muted); opacity:.6; }
.matrix-legend { display:flex; flex-wrap:wrap; gap:16px; margin:20px 0 32px; }
.matrix-legend .leg-item { display:flex; align-items:center; }
.matrix-legend .k { margin-left:8px; color:var(--muted); font-size:12px; font-weight:650; }
.forward-plan { max-width:900px; margin-top:30px; padding:23px 27px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:5px; background:var(--paper); }
.forward-plan ul { margin:14px 0 0; }
tr.tm-row-hidden { display:none; }
@media (max-width:700px) { table.tm-table th.tm-col { min-width:64px; } }

/* Home track-record band: navy band, light chips with dark text and a light border, so the
   chips separate from the band by lightness alone (colour-blind safe). */
.page-home #track-record { background:var(--navy); border-bottom:0; }
.page-home #track-record h2 { color:var(--paper); }
.page-home #track-record .sub { margin-bottom:0; color:var(--paper); }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 0; padding:0; }
.chips > li { margin:0; padding:11px 18px; border:2px solid var(--ribbon-light); border-radius:6px; background:var(--paper); color:var(--ink); font-size:15px; font-weight:750; line-height:1.3; }
.chips > li::before { content:none; }

/* Focus rings on the dark surfaces: the blue ring vanishes on navy, so use the light blue there. */
footer a:focus-visible,.hero a:focus-visible,.hero button:focus-visible,.film-band a:focus-visible,.fix-band a:focus-visible,section[id="quote"] a:focus-visible { outline-color:var(--ribbon-light); }

/* Quiz pages on a phone: the first question has to be on the first screen. */
@media (max-width:700px) {
  .page-quiz .hero { padding:28px 0 32px; }
  .page-quiz .hero .eyebrow { margin-bottom:12px; }
  .page-quiz .hero h1 { font-size:clamp(28px,8vw,36px); margin-bottom:14px; }
  .page-quiz .hero .lede { font-size:16px; line-height:1.55; margin:0 0 10px; }
  .page-quiz section:not(.hero) { padding-top:28px; }
}

/* ---- Shared components (contract with the page workers; see phwltd-build/COMPONENTS.md) ---- */

/* Trade picker: eleven thumb-size links. Light chips with dark text and a strong edge, so they
   separate from navy and from white by lightness alone. */
.trade-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:28px 0 0; }
.trade-picker a { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:12px 16px; border:2px solid var(--line-strong); border-radius:6px; background:var(--paper); color:var(--ink); font-size:15px; font-weight:750; line-height:1.25; text-decoration:none; }
.trade-picker a::after { content:"\203A"; flex:none; color:var(--blue-dark); font-size:22px; line-height:1; }
.trade-picker a:hover { border-color:var(--blue); background:var(--ground); color:var(--ink); }
.trade-picker a[aria-current] { background:var(--navy); border-color:var(--paper); color:#ffffff; }
.trade-picker a[aria-current]::after { color:#ffffff; }
.hero .trade-picker a,.film-band .trade-picker a,.fix-band .trade-picker a { border-color:var(--ribbon-light); }
@media (min-width:701px) { .trade-picker { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1101px) { .trade-picker { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Trade actions: the four buttons in a trade page hero. A 2 by 2 grid on a phone. */
.trade-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:560px; margin-top:30px; }
.trade-actions .btn { width:100%; min-height:52px; }
@media (min-width:701px) { .trade-actions { display:flex; flex-wrap:wrap; max-width:none; } .trade-actions .btn { width:auto; } }

/* Film band: navy, light text, the film at most 1040px wide, 16:9, rounded corners. */
section.film-band:not(.hero):nth-of-type(n),section.fix-band:not(.hero):nth-of-type(n) { background:var(--navy); color:#ffffff; border-bottom:0; }
.film-band h2,.film-band p,.film-band .sub,.fix-band h2,.fix-band p { color:#ffffff; }
.film-band .eyebrow { margin-bottom:14px; }
.film-band .film { margin:28px 0 0; }
.film-band .film-note a { color:var(--ribbon-light); }
.film { max-width:1040px; margin:0 auto; }
.film video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:var(--navy); border-radius:8px; border:1px solid rgba(255,255,255,.2); box-shadow:0 24px 70px rgba(0,0,0,.4); }
.film-note { margin:14px 0 0; color:var(--paper); font-size:14px; }
.film-note a { color:var(--ribbon-light); }

/* Fix band: the approved offer wording, large. */
section.fix-band:not(.hero):nth-of-type(n) { border-top:5px solid var(--blue); }
.fix-band .fix-line { max-width:34ch; margin:0 0 6px; font-size:clamp(23px,3vw,34px); line-height:1.35; font-weight:700; letter-spacing:-.01em; }
@media (min-width:900px) { .fix-band .fix-line { max-width:46ch; } }
.fix-band .btn.ghost { color:#ffffff; border-color:rgba(255,255,255,.75); }
.fix-band .btn.ghost:hover { background:rgba(255,255,255,.13); border-color:#ffffff; color:#ffffff; }

/* Film cards (hub and home) and the film page's points and transcript. */
.points .card h3 { margin-top:0; }
.points .card .go { margin-top:auto; font-weight:750; }
.transcript { max-width:74ch; }
.transcript summary { cursor:pointer; font-weight:750; color:var(--blue-dark); }
.transcript p { margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.trade-card { padding:0; overflow:hidden; text-decoration:none; color:inherit; }
.trade-card::before { display:none; }
.trade-card img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--navy); }
.trade-card .body { display:flex; flex-direction:column; flex:1; padding:20px 22px 24px; }
.trade-card h3 { margin:0 0 8px; }
.trade-card p { margin:0 0 14px; }
.trade-card .go { margin-top:auto; font-weight:750; color:var(--blue-dark); }
.trade-card:hover .go { color:var(--blue); }
@media (max-width:820px) { .points .grid { grid-template-columns:1fr; } }
/* shared-fixes-2026-10: changes asked for by the page workers, all pages except where a selector says otherwise. */

/* Hero headline: a little more room between letters so long words do not touch at desktop widths. */
.hero.has-photo h1 { letter-spacing:-.03em; }

/* Machine pages: keep the lede off the machine in the photo. */
@media (min-width:701px) { .page-machine .hero.has-photo .lede { max-width:52ch; } }

/* Phones: the trade buttons and the first words of the lede have to sit on the first screen (375 by 667).
   The home page keeps its own hero rules. */
@media (max-width:700px) {
  body:not(.page-home) .hero.has-photo { min-height:0; padding:30px 0 38px; }
  body:not(.page-home) .hero.has-photo h1 { font-size:clamp(33px,9vw,46px); line-height:1.06; margin-bottom:12px; }
  body:not(.page-home) .hero.has-photo .lede { font-size:16px; line-height:1.5; }
  body:not(.page-home) .hero.has-photo .eyebrow { margin-bottom:12px; }
  body:not(.page-home) .hero.has-photo .hero-cta,body:not(.page-home) .hero.has-photo .trade-actions { margin-top:20px; }
  .hero .crumb { margin-bottom:10px; }
  .trade-actions .btn { min-height:48px; }
  /* The accent bar sits on the content edge, not 14px inside it. */
  .hero::before { left:20px; }
}
@media (max-width:390px) {
  body:not(.page-home) .hero.has-photo { padding:30px 0 38px; }
  .hero::before { left:18px; }
}

/* Four cards in a grid sit four across on a wide screen, not three and one. */
@media (min-width:1101px) { .grid:has(> .card:nth-child(4):last-child) { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Machines index: thirteen photo cards are shorter on a phone. */
@media (max-width:700px) { .page-machines-index .image-card picture { height:170px; } }

/* Contents list: no rule under the last row, whether the count is odd or even. */
.contents li:last-child,.contents li:nth-last-child(2):nth-child(odd) { border-bottom:0; }
@media (max-width:700px) { .contents li:nth-last-child(2):nth-child(n) { border-bottom:1px solid var(--line); } }

/* Text wrapping: no single word alone on the last line. */
p,li,.sub { text-wrap:pretty; }
.card h3 { text-wrap:balance; }

/* Breadcrumb links: a thumb-size target without moving the line. */
.crumb a { display:inline-block; padding-block:10px; margin-block:-10px; }

/* home-2026-10:start */
/* Home page, 2026-10. Every selector sits under .page-home. Photos are CSS backgrounds with a navy fallback,
   so a missing image (roofing, until it is made) still leaves a tile that reads correctly. */

/* 1. The picker is the hero. */
.page-home section#pick { padding:12px 0 18px; background:var(--navy); color:#ffffff; border-bottom:5px solid var(--blue); position:relative; }
.page-home #pick h1 { max-width:22ch; margin:6px 0 0; font-size:clamp(25px,7vw,34px); line-height:1.08; letter-spacing:-.03em; color:#ffffff; }
.page-home #pick .pick-sub { display:block; max-width:34ch; margin:8px 0 0; color:#ffffff; font-size:15px; font-weight:600; line-height:1.35; }
.page-home #pick .pick-label { margin:10px 0 7px; color:var(--ribbon-light); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.2; word-spacing:0; }
.page-home #pick .trade-picker { gap:7px; margin:0; }
.page-home #pick .trade-picker a { position:relative; isolation:isolate; overflow:hidden; min-height:52px; padding:6px 12px; gap:8px; border:1px solid rgba(255,255,255,.34); border-radius:8px; background:var(--navy); color:#ffffff; font-size:16px; font-weight:780; line-height:1.2; text-shadow:0 1px 3px rgba(13,27,42,.8); }
.page-home #pick .trade-picker a::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(13,27,42,.92) 0%,rgba(13,27,42,.8) 45%,rgba(13,27,42,.38) 100%),var(--tile-img,none) center 38%/cover no-repeat; transform:scale(1.02); }
.page-home #pick .trade-picker a::after { color:#ffffff; font-size:24px; text-shadow:none; }
.page-home #pick .trade-picker a:hover { background:var(--navy); border-color:#ffffff; color:#ffffff; }
.page-home #pick .trade-picker a:focus-visible { outline:3px solid var(--ribbon-light); outline-offset:2px; }
.page-home #pick .trade-picker a:last-child { grid-column:1/-1; }
.page-home #pick .t-goods-in-goods-out { --tile-img:url(/_shared/phw/photos/sectors-goods-in-goods-out-mobile.jpg); }
.page-home #pick .t-construction { --tile-img:url(/_shared/phw/photos/sectors-construction-mobile.jpg); }
.page-home #pick .t-garages-workshops { --tile-img:url(/_shared/phw/photos/sectors-garages-workshops-mobile.jpg); }
.page-home #pick .t-manufacturing { --tile-img:url(/_shared/phw/photos/sectors-manufacturing-mobile.jpg); }
.page-home #pick .t-roofing { --tile-img:url(/_shared/phw/photos/sectors-roofing-mobile.jpg); }
.page-home #pick .t-warehousing { --tile-img:url(/_shared/phw/photos/sectors-warehousing-mobile.jpg); }
.page-home #pick .t-waste-recycling { --tile-img:url(/_shared/phw/photos/sectors-waste-recycling-mobile.jpg); }
.page-home #pick .t-agriculture { --tile-img:url(/_shared/phw/photos/sectors-agriculture-mobile.jpg); }
.page-home #pick .t-stone-worktops { --tile-img:url(/_shared/phw/photos/sectors-stone-worktops-mobile.jpg); }
.page-home #pick .t-plant-hire { --tile-img:url(/_shared/phw/photos/sectors-plant-hire-mobile.jpg); }
.page-home #pick .t-hospitality { --tile-img:url(/_shared/phw/photos/licensed-hero-mobile.jpg); }
.page-home #pick .t-garages-workshops::before { background-position:center 24%; }
.page-home #pick .t-hospitality::before { background-position:center 52%; }
/* Roofing: the frame is mostly grey cladding, so zoom to the roofers and the roof edge. */
.page-home #pick .trade-picker a.t-roofing::before { background-size:auto,165% auto; background-position:0 0,95% 56%; }
.page-home #pick .t-stone-worktops::before { background-position:center 58%; }
@media (prefers-reduced-motion:no-preference) {
  .page-home #pick .trade-picker a::before { transition:transform .6s var(--ease); }
  .page-home #pick .trade-picker a:hover::before { transform:scale(1.09); }
}
@media (max-width:420px) { .page-home #pick .trade-picker { gap:6px; } .page-home #pick .trade-picker a { min-height:48px; padding:5px 9px; gap:4px; font-size:15px; } .page-home #pick .trade-picker a::after { font-size:22px; } }
@media (max-width:360px) { .page-home #pick .trade-picker a { font-size:14.5px; } }
@media (min-width:701px) {
  .page-home section#pick { padding:48px 0 54px; }
  .page-home #pick h1 { max-width:none; margin-top:0; font-size:clamp(40px,4.4vw,56px); line-height:1.05; }
  .page-home #pick .pick-sub { max-width:none; margin:14px 0 0; font-size:18px; font-weight:400; line-height:1.5; }
  .page-home #pick .pick-label { margin:30px 0 12px; }
  .page-home #pick .trade-picker { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .page-home #pick .trade-picker a { min-height:92px; align-items:flex-end; padding:14px 16px; font-size:17px; }
  .page-home #pick .trade-picker a::after { align-self:flex-end; }
  .page-home #pick .trade-picker a:last-child { grid-column:span 2; }
}
@media (min-width:1101px) {
  .page-home #pick .trade-picker { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .page-home #pick .trade-picker a { min-height:116px; font-size:18px; }
  .page-home #pick .trade-picker a:last-child { grid-column:span 2; }
}

/* 2. The offer. */
.page-home #offer .eyebrow { display:block; max-width:none; color:var(--blue-dark); margin:0 0 14px; font-size:12px; font-weight:800; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; }
.page-home #offer .offer-line { max-width:30ch; margin:6px 0 0; padding-left:20px; border-left:5px solid var(--blue); color:var(--ink); font-size:clamp(22px,3.1vw,34px); line-height:1.35; font-weight:700; letter-spacing:-.012em; text-wrap:pretty; }
@media (min-width:900px) { .page-home #offer .offer-line { max-width:44ch; } }
.page-home #offer .hero-cta { margin-top:30px; }
.page-home #offer .offer-note { margin:22px 0 0; font-size:15px; }

/* 3. Films. Two compact columns on a phone so all eight posters sit in about a screen and a half. */
.page-home #films .film-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1101px) { .page-home #films .film-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.page-home #films .film-note { max-width:64ch; margin:0 0 24px; padding:12px 16px; border-left:5px solid var(--blue); background:var(--ground); color:var(--ink); font-size:15px; font-weight:600; }
.page-home #films .film-note a { color:var(--blue-dark); font-weight:760; text-decoration:underline; }
.page-home #films .film-more { margin-top:26px; font-size:15px; }
.page-home #films .film-more a { font-weight:700; }
@media (max-width:700px) {
  .page-home #films .film-grid { gap:10px; }
  .page-home #films .trade-card::before { display:none; }
  .page-home #films .trade-card .body { padding:10px 11px 12px; }
  .page-home #films .trade-card h3 { margin-bottom:4px; font-size:14.5px; line-height:1.22; }
  .page-home #films .trade-card p { margin-bottom:8px; color:var(--muted); font-size:12.5px; line-height:1.4; }
  .page-home #films .trade-card .go { min-height:0; font-size:13px; }
}

/* 5. Real cases, one for each trade. */
.page-home #real-cases .case-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.page-home #real-cases .case-row { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--line-strong); border-left:5px solid var(--blue); border-radius:6px; background:var(--paper); color:var(--ink); text-decoration:none; }
.page-home #real-cases .case-row:hover { border-color:var(--blue); background:var(--ground); }
.page-home #real-cases .case-row .tag { color:var(--blue-dark); font-size:11.5px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.page-home #real-cases .case-row .what { font-size:15.5px; font-weight:700; line-height:1.38; }
.page-home #real-cases .case-row .where { color:var(--muted); font-size:13.5px; }
.page-home #real-cases .case-more { margin-top:22px; font-size:15px; font-weight:700; }
@media (max-width:700px) {
  .page-home #real-cases .case-list { grid-template-columns:1fr; gap:8px; }
  .page-home #real-cases .case-row { padding:13px 15px; gap:4px; }
}

/* 4. Pubs and licensed premises: its own strand, its own look (a photo panel and a heavier blue edge). */
.page-home section#pubs { background:var(--ground); border-top:5px solid var(--blue); }
.page-home #pubs .pubs-head { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:44px; align-items:center; margin-bottom:36px; }
.page-home #pubs .pubs-photo { position:relative; min-height:360px; height:100%; overflow:hidden; border-radius:8px; background:var(--navy); }
.page-home #pubs .pubs-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(13,27,42,.55)); }
.page-home #pubs .pubs-photo picture,.page-home #pubs .pubs-photo img { display:block; width:100%; height:100%; }
.page-home #pubs .pubs-photo img { position:absolute; inset:0; object-fit:cover; object-position:center 45%; }
.page-home #pubs .eyebrow { color:var(--blue-dark); margin-bottom:14px; }
.page-home #pubs h2 { max-width:none; font-size:clamp(26px,3vw,38px); }
.page-home #pubs .sub { margin-bottom:18px; color:var(--ink); font-size:17px; font-weight:600; }
.page-home #pubs .pubs-law { margin:0; font-size:15px; }
.page-home #pubs .pubs-packs { margin-bottom:22px; }
.page-home #pubs .pubs-hold { max-width:none; margin:0 0 28px; padding:20px 24px; background:var(--ground); border:1px solid var(--line); border-left:6px solid var(--blue); border-radius:5px; }
.page-home #pubs .pubs-hold .lbl { margin-bottom:8px; color:var(--ink); font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.page-home #pubs .ticks { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.page-home #pubs .ticks li { position:relative; margin:0; padding-left:30px; max-width:80ch; color:var(--ink); font-size:16px; font-weight:600; line-height:1.45; }
.page-home #pubs .ticks li::before { content:"\2713"; position:absolute; left:0; top:1px; width:22px; height:22px; border:0; transform:none; border-radius:4px; background:var(--navy); color:#ffffff; font-size:14px; font-weight:800; line-height:22px; text-align:center; }
.page-home #pubs .pubs-more { margin:18px 0 0; font-size:15px; font-weight:700; }
@media (max-width:900px) {
  .page-home #pubs .pubs-head { grid-template-columns:1fr; gap:24px; }
  .page-home #pubs .pubs-photo { min-height:0; height:200px; }
}

/* 5. fined-near-you keeps its own markup; only the page rhythm is set here. */

/* 6. How it works. */
.page-home #how-it-works .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.page-home #how-it-works .steps li { margin:0; padding:26px; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:6px; background:var(--paper); }
.page-home #how-it-works .steps .num { display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:18px; border-radius:50%; background:var(--navy); color:#ffffff; font:800 18px/1 Arial,sans-serif; }
.page-home #how-it-works .steps p { margin:0; font-size:15px; color:var(--muted); }
.page-home #how-it-works .steps-more { margin-top:24px; font-size:15px; }
.page-home #how-it-works .steps-more a { font-weight:700; }
@media (max-width:900px) { .page-home #how-it-works .steps { grid-template-columns:1fr; } .page-home #how-it-works .steps li { padding:22px; } }

/* 8. Free checks. */
.page-home #checks .wrap { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:start; }
.page-home #checks .checks-head .sub { margin-bottom:24px; }
.page-home #checks .checks-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.page-home #checks .all-checks { font-size:15px; font-weight:700; }
.page-home #checks .check-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.page-home #checks .check-links a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; padding:10px 14px; border:2px solid var(--line-strong); font-size:15px; font-weight:740; line-height:1.25; }
.page-home #checks .check-links a::after { content:"\203A"; color:var(--blue-dark); font-size:22px; line-height:1; }
.page-home #checks .check-links a:last-child { grid-column:1/-1; }
@media (max-width:900px) { .page-home #checks .wrap { grid-template-columns:1fr; gap:26px; } }

/* 9 and 10. Services and the sample keep their shared styles; spacing only. */
.page-home #services .card h3 { font-size:20px; }
.page-home #sample .sub { max-width:60ch; }

/* 11 and 12. Law teaser and quote band. */
.page-home #thelaw .sub { max-width:78ch; margin-bottom:20px; }
.page-home #thelaw a { font-weight:700; }

@media (max-width:700px) {
  .page-home section:not(#pick) { padding-block:54px; }
  .page-home #offer .offer-line { padding-left:16px; }
  .page-home #offer .hero-cta .btn { width:100%; }
  .page-home #pubs .hero-cta .btn { width:100%; }
  .page-home #checks .checks-links .btn { width:100%; }
  .page-home #pubs .pubs-hold { padding:18px; }
  .page-home #services .card,.page-home #pubs .card,.page-home #fined-near-you .card { padding:20px; }
  .page-home #services .card::before,.page-home #pubs .card::before,.page-home #fined-near-you .card::before { margin-bottom:14px; }
  .page-home #services .card p,.page-home #pubs .card p { margin-bottom:6px; }
  .page-home #services .grid,.page-home #pubs .grid { gap:12px; }
  .page-home #services .card { padding:16px 18px; }
  .page-home #services .card::before { display:none; }
  .page-home #services .card h3 { margin-bottom:6px; font-size:19px; }
  .page-home #services .card p { font-size:14.5px; line-height:1.5; }
  .page-home #pubs .pubs-packs .card { padding:16px 18px; }
  .page-home #pubs .pubs-packs .card::before,.page-home #pubs .pubs-packs .card .tag { display:none; }
  .page-home #pubs .pubs-packs .card h3 { margin-bottom:6px; font-size:19px; }
  .page-home #pubs .pubs-packs .card p { font-size:14.5px; line-height:1.5; }
  .page-home #how-it-works .steps { gap:10px; }
  .page-home #how-it-works .steps li { display:grid; grid-template-columns:40px 1fr; column-gap:14px; padding:16px; }
  .page-home #how-it-works .steps .num { grid-row:1 / span 2; margin:0; }
  .page-home #how-it-works .steps h3 { margin:0 0 4px; font-size:18px; }
}
/* 13. Phone quick bar: films, cases and the quote form, one tap from any scroll position. Hidden over the licensee section. */
.page-home .home-bar { display:none; }
@media (max-width:700px) {
  .page-home { padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
  .page-home .home-bar { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--navy); border-top:2px solid var(--ribbon-light); transition:transform .25s var(--ease); }
  .page-home .home-bar.is-hidden { transform:translateY(110%); }
  .page-home .home-bar a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 8px; border:1px solid rgba(255,255,255,.55); border-radius:8px; color:#ffffff; font-size:14.5px; font-weight:780; line-height:1.15; text-align:center; text-decoration:none; }
  .page-home .home-bar a.bar-quote { border-color:#ffffff; background:#ffffff; color:var(--navy); }
  .page-home .home-bar a:focus-visible { outline:3px solid var(--ribbon-light); outline-offset:2px; }
}

.page-home p,.page-home .sub { text-wrap:pretty; }
.page-home h2,.page-home h3 { text-wrap:balance; }

/* 14. Phone length. Ordered by what a trade reader needs first; each block is kept to about a screen. */
.page-home #track-record .sub { margin-bottom:0; }
.page-home #checks .wrap { grid-template-columns:minmax(0,1fr); }
@media (max-width:700px) {
  .page-home section#offer { padding-block:30px; }
  .page-home #offer .eyebrow { margin-bottom:10px; }
  .page-home #offer .offer-line { font-size:19px; line-height:1.38; }
  .page-home #offer .hero-cta { display:none; }
  .page-home #offer .offer-note { margin-top:16px; font-size:14.5px; }
  .page-home section:not(#pick) h2 { margin-bottom:10px; font-size:26px; }
  .page-home section:not(#pick) .sub { margin-bottom:18px; font-size:15px; line-height:1.55; }
  .page-home section:not(#pick):not(#quote) { padding-block:34px; }
  .page-home section#quote { padding-block:38px; }

  .page-home #real-cases .case-list { gap:7px; }
  .page-home #real-cases .case-row { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"tag where" "what what"; align-items:baseline; column-gap:10px; row-gap:3px; padding:9px 13px; }
  .page-home #real-cases .case-row .tag { grid-area:tag; font-size:11px; }
  .page-home #real-cases .case-row .where { grid-area:where; font-size:12.5px; }
  .page-home #real-cases .case-row .what { grid-area:what; font-size:14px; line-height:1.35; }
  .page-home #real-cases .case-more { margin-top:14px; }

  .page-home #films .sub { display:none; }
  .page-home #films .film-note { margin-bottom:14px; padding:10px 14px; font-size:14px; }
  .page-home #films .film-grid { display:flex; gap:10px; margin-inline:calc(50% - 50vw); padding:2px calc(50vw - 50%) 12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:calc(50vw - 50%); overscroll-behavior-x:contain; }
  .page-home #films .film-grid > a { flex:0 0 68%; max-width:260px; scroll-snap-align:start; }
  .page-home #films .trade-card p { display:none; }
  .page-home #films .trade-card .body { padding:8px 10px 10px; }
  .page-home #films .trade-card h3 { margin-bottom:2px; }
  .page-home #films .film-more { margin-top:6px; }

  .page-home #fined-near-you .grid { display:flex; gap:10px; margin-inline:calc(50% - 50vw); padding:2px calc(50vw - 50%) 10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:calc(50vw - 50%); overscroll-behavior-x:contain; }
  .page-home #fined-near-you .grid > .card { flex:0 0 78%; scroll-snap-align:start; padding:14px 16px; }
  .page-home #fined-near-you .card::before { display:none; }
  .page-home #fined-near-you .card .tag { margin-bottom:6px; }
  .page-home #fined-near-you .card h3 { margin:0 0 4px; font-size:16px; line-height:1.3; }
  .page-home #fined-near-you .card p { margin:0 0 2px; font-size:13.5px; line-height:1.4; }

  .page-home #how-it-works .steps p { font-size:14px; line-height:1.5; }
  .page-home #how-it-works .steps li { padding:13px 14px; }
  .page-home #how-it-works .steps-more { margin-top:14px; }

  .page-home #checks .checks-head .sub { margin-bottom:16px; }

  .page-home #services .sub { display:none; }
  .page-home #services .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .page-home #services .card { padding:10px 14px; }
  .page-home #services .card:last-child:nth-child(odd) { grid-column:1/-1; }
  .page-home #services .card .tag,.page-home #services .card p { display:none; }
  .page-home #services .card h3 { margin-bottom:0; font-size:17px; }
  .page-home #services .card a.go { min-height:34px; }

  .page-home #sample .evidence-stage { display:none; }
  .page-home #sample .sub { margin-bottom:14px; }
  .page-home #sample .sample { padding:18px; }
  .page-home #sample .sample p { margin-bottom:14px; font-size:14.5px; line-height:1.5; }

  .page-home #thelaw .sub { margin-bottom:12px; }

  .page-home #pubs .pubs-head { gap:14px; margin-bottom:18px; }
  .page-home #pubs .pubs-photo { height:110px; }
  .page-home #pubs h2 { font-size:22px; line-height:1.2; }
  .page-home #pubs .sub { font-size:15px; margin-bottom:12px; }
  .page-home #pubs .pubs-law { font-size:14px; line-height:1.5; }
  .page-home #pubs .pubs-packs { gap:8px; margin-bottom:16px; }
  .page-home #pubs .pubs-packs .card { padding:12px 16px; }
  .page-home #pubs .pubs-packs .card h3 { margin-bottom:4px; font-size:18px; }
  .page-home #pubs .pubs-packs .card p { margin-bottom:2px; font-size:14px; line-height:1.45; }
  .page-home #pubs .pubs-packs .card a.go { min-height:36px; }
  .page-home #pubs .pubs-hold { margin-bottom:16px; padding:14px 16px; }
  .page-home #pubs .ticks { gap:6px; }
  .page-home #pubs .ticks li { font-size:14.5px; line-height:1.4; }
  .page-home #pubs .hero-cta { margin-top:0; gap:8px; }
}
/* home-2026-10:end */

/* shared-fixes-2026-10-b:start */
/* Phone quick bar on trade pages and a trade's own film page (written by shell_pass.py from phw_shell.bar_html).
   The home page keeps its own .home-bar. */
.trade-bar { display:none; }
@media (max-width:700px) {
  .trade-bar { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--navy); border-top:2px solid var(--ribbon-light); }
  .trade-bar a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 8px; border:1px solid rgba(255,255,255,.55); border-radius:8px; color:#ffffff; font-size:14.5px; font-weight:780; line-height:1.15; text-align:center; text-decoration:none; }
  .trade-bar a.bar-quote { border-color:#ffffff; background:#ffffff; color:var(--navy); }
  .trade-bar a:focus-visible { outline:3px solid var(--ribbon-light); outline-offset:2px; }
  .trade-bar + footer { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* Film player: the poster already carries its own play button, so until the film is started the whole poster is
   one transparent button (site.js adds .film-stage). The native bar appears once the film is playing. */
.film-stage { position:relative; }
.film-stage video { display:block; width:100%; transition:filter .2s var(--ease); }
.film-play { position:absolute; inset:0; display:block; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
.film-stage:hover video { filter:brightness(1.1); }
.film-play:focus-visible { outline:3px solid var(--ribbon-light); outline-offset:-6px; }

/* Film pages. 701px and wider: player, buttons and note share the headline's left edge. */
.page-video .hero > .wrap.film { max-width:none; }
@media (min-width:701px) { .page-video .hero > .wrap.film > * { max-width:860px; } }
/* 1101px and wider: headline and lede left, film right, so the film is on the first screen. */
@media (min-width:1101px) {
  .page-video .hero:has(> .wrap.film) { display:grid; grid-template-columns:minmax(32px,1fr) minmax(0,470px) minmax(0,690px) minmax(32px,1fr); column-gap:clamp(28px,3.4vw,52px); align-items:center; padding:72px 0 78px; }
  .page-video .hero:has(> .wrap.film) > .wrap { width:auto; max-width:none; margin:0; }
  .page-video .hero:has(> .wrap.film) > .wrap:first-child { grid-column:2; }
  .page-video .hero:has(> .wrap.film) > .wrap.film { grid-column:3; margin-top:0 !important; }
  .page-video .hero:has(> .wrap.film) > .wrap.film > * { max-width:none; }
  .page-video .hero:has(> .wrap.film) h1 { max-width:none; font-size:clamp(32px,3.2vw,44px); line-height:1.1; }
  .page-video .hero:has(> .wrap.film) .lede { font-size:17px; }
}
/* Phone: heading, then the film and its four buttons, then the intro line. The player starts inside the first screen. */
@media (max-width:700px) {
  .page-video .hero:has(> .wrap.film) { display:flex; flex-direction:column; padding:18px 0 34px; }
  .page-video .hero:has(> .wrap.film) > .wrap:first-child { display:contents; }
  .page-video .hero:has(> .wrap.film) > .wrap:first-child > * { width:calc(100% - 40px); align-self:center; }
  .page-video .hero:has(> .wrap.film) .eyebrow { order:0; margin-bottom:8px; font-size:10.5px; letter-spacing:.08em; }
  .page-video .hero:has(> .wrap.film) h1 { order:1; max-width:none; margin-bottom:14px; font-size:clamp(25px,7vw,32px); line-height:1.12; }
  .page-video .hero:has(> .wrap.film) > .wrap.film { order:2; width:calc(100% - 40px); margin-top:0 !important; }
  .page-video .hero:has(> .wrap.film) .lede { order:3; margin:22px 0 0; font-size:16px; line-height:1.55; }
  .page-video .hero:has(> .wrap.film) .trade-actions { margin-top:14px; gap:10px; }
}
@media (max-width:390px) { .page-video .hero > .wrap.film,.page-video .hero:has(> .wrap.film) > .wrap:first-child > * { width:calc(100% - 36px); } }

/* Cases hub: trade chips sit in the hero under the headline (links, so they work without the script). On a phone they
   are one swipeable row so the first screen shows the headline and the chips. The chosen chip is bold, underlined and
   ticked, so it does not depend on colour. */
a.chip { display:inline-flex; align-items:center; flex:none; text-decoration:none; }
a.chip:hover { border-color:var(--blue); background:var(--ground); color:var(--ink); }
a.chip[aria-current] { color:var(--blue-dark); border:2px solid var(--blue); font-weight:800; text-decoration:underline; text-underline-offset:4px; }
a.chip[aria-current]::before { content:"\2713"; margin-right:7px; font-weight:900; }
.hero .trade-chips { margin:6px 0 26px; }
.hero a.chip { border-color:var(--ribbon-light); }
.hero a.chip[aria-current] { border-color:#ffffff; box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--ribbon-light); }
@media (max-width:700px) {
  .hero .trade-chips { flex-wrap:nowrap; overflow-x:auto; margin:4px -20px 20px; padding:4px 20px 8px; gap:8px; scroll-snap-type:x proximity; scroll-padding-inline:20px; -webkit-overflow-scrolling:touch; }
  .hero .trade-chips a.chip { scroll-snap-align:start; white-space:nowrap; }
  .page-cases-index .hero { padding:30px 0 40px; }
  .page-cases-index .hero h1 { margin-bottom:12px; }
  .page-cases-index .hero .lede { font-size:16px; line-height:1.55; }
}
.page-cases-index .cases-empty { max-width:62ch; margin:0 0 24px; padding:16px 20px; border-left:5px solid var(--blue); background:var(--ground); color:var(--ink); font-weight:600; }
.page-cases-index .cases-empty[hidden] { display:none; }
/* shared-fixes-2026-10-b:end */