/* pass-nov4-v1.css. Designer, Nov 4 2026.
   One batch, five placement changes. No word of claim, price or offer is touched.
   Load AFTER site.css, b3/b4/b5, hero-banner-a.css and proof-band-v1.css. */

/* 1. THE PLATE. Every proof figure gets the same paper ground at 4:3, art contained.
   The art is absolutely placed inside the plate: a percentage height does not resolve
   against an aspect-ratio box, and without this the tall scans (Zanity, driver manual
   1190x1540) overflow the plate and cover the headline under it.
   4:3 not 16:10: 16:10 is the shortest box available and shrank the art the most
   (Olive Garden 405px -> 233px wide at 1440). 4:3 keeps most of the height saving
   and gives the art back. Wilson approved this ratio Nov 4. */
.proof-band .pb-fig{position:relative;aspect-ratio:4/3;background:var(--paper);padding:0;border-radius:.25rem;overflow:hidden;display:block}
.proof-band .pb-fig img{position:absolute;inset:auto;width:100%;height:100%;
 max-width:none;max-height:none;object-fit:contain;object-position:center}

/* Card anatomy: the rule above each card passes 3:1 (live .22 on band is 1.93:1). */
.proof-band .pb-card{border-top:2px solid rgba(255,255,255,.38)}

/* Disclosure row: full card width, 48px tall, label left, chevron right. */
.proof-band .pb-more{margin:1rem 0 0;border-top:2px solid rgba(255,255,255,.38)}
.proof-band .pb-more>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
 gap:.75rem;min-height:48px;padding:.85rem 0;cursor:pointer;font:700 .875rem/1.2 "Archivo",sans-serif;
 letter-spacing:.02em;text-transform:none;color:var(--paper)}
.proof-band .pb-more>summary::-webkit-details-marker{display:none}
.proof-band .pb-more>summary::marker{content:""}
.proof-band .pb-more>summary:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.proof-band .pb-chev{width:20px;height:20px;flex:0 0 20px;transition:transform .18s ease}
@media (prefers-reduced-motion:reduce){.proof-band .pb-chev{transition:none}}
.proof-band .pb-more[open] .pb-chev{transform:rotate(180deg)}
.proof-band .pb-lbl-open{display:none}
.proof-band .pb-more[open] .pb-lbl-closed{display:none}
.proof-band .pb-more[open] .pb-lbl-open{display:inline}
.proof-band .pb-deep{padding:.25rem 0 .5rem}
.proof-band .pb-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.proof-band .pb-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#1b1b1b;border-radius:.125rem}
.proof-band .pb-card[data-pb-empty] .pb-more{display:none}

/* 2. Four-part section onto one edge. Heading, number and paragraph all start at the wrap's left. */
.sv-svc>li{grid-template-columns:minmax(0,1fr)}
@media (min-width:56em){
 .sv-svc>li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
 .sv-svc>li:nth-child(even) .sv-media{order:0}
 .sv-svc>li .sv-copy{order:-1}
 .sv-svc>li .sv-media{order:1}
 /* Live heading is clamp(3.25rem,1.5rem + 7vw,7.5rem) in a 510px column. Halved to a
    612px column at 1440 it breaks "The place they land" to four lines and overflows
    "Demand" at 1024. Same weight, same line-height .85, same -.05em tracking; the curve
    is restated so it fits the new measure: 88px at 1440, one to two lines throughout. */
 .sv-svc .sv-copy h3{font-size:clamp(2.5rem,.5rem + 6vw,5.5rem);margin:.85rem 0 1rem}
 .sv-svc .sv-copy p{max-width:32em}
}

/* 3. Three two-column phone blocks to one column below 640. */
@media (max-width:39.99em){
 .ai-steps,.ai-spec,.ai-spec-b4{grid-template-columns:minmax(0,1fr)}
 .hb-band{aspect-ratio:auto}
 .hb-band .hb-dia{grid-template-columns:minmax(0,1fr);gap:1rem;max-width:none}
 .hb-band .hb-stack{grid-template-rows:none;grid-auto-rows:minmax(2.75rem,auto);gap:.4rem}
 .hb-band .hb-own{min-height:7rem;font-size:var(--step-2)}
}

/* 4. Book bar clearance. Bar measures 73px; 88px gives 15px clear.
   Scoped to pages that actually carry the bar, so pages without one are untouched. */
body:has(.bookbar){--bar:5.5rem}

/* 5. One Work case leads at 96px. The headline spans the row above the media and copy.
   Inside the live 513px copy column a 96px title breaks to five one-word lines
   ("Palm / Coast / Marina: / Captain / IQ"); across the 1296px row it is two.
   Below 56em the lead case reads exactly as live: art first, then the title at 28px.
   The grid split itself (7fr 5fr) is untouched. */
.sv-cases.work>.sv-case:first-child>.sv-leadh{order:2;font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);
 line-height:.95;letter-spacing:-.03em;margin:0 0 1rem;max-width:none}
.sv-cases.work>.sv-case:first-child>.sv-cmedia{order:1}
.sv-cases.work>.sv-case:first-child>.sv-ccopy{order:3}
@media (min-width:56em){
 .sv-cases.work>.sv-case:first-child{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
 .sv-cases.work>.sv-case:first-child>.sv-leadh{order:-1;grid-column:1/-1;
  font-size:clamp(3rem,7vw,6rem);line-height:.92;letter-spacing:-.035em;margin:0 0 clamp(1rem,2.2vw,1.75rem)}
}