/* v6 — audit fix pass (Oct 23 2026). Loaded last; changes behaviour/states only, not the v5 look. */

/* 04 Focus that shows on every surface: navy ring + white halo on light, lime ring on navy. */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 2px #fff;border-radius:6px}
.sdbar :focus-visible,.foot5 :focus-visible,.bg-navy :focus-visible,.on-navy :focus-visible,.np:focus-visible,.btn-navy:focus-visible{outline-color:var(--lime);box-shadow:0 0 0 2px var(--navy)}
.btn-navy:focus-visible,.np:focus-visible{outline-color:var(--navy);box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--lime)}
.bg-navy .btn-lime:focus-visible,.on-navy .btn-lime:focus-visible{outline-color:#fff;box-shadow:0 0 0 2px var(--navy)}
.input:focus-visible{outline:3px solid var(--navy);outline-offset:1px;box-shadow:none}
.chip input:focus-visible+span{outline:3px solid var(--navy);outline-offset:2px}
/* file dropzones: the transparent input sits inside the label, so ring the label */
.drop3:focus-within,.drop:focus-within{outline:3px solid var(--navy);outline-offset:3px;border-color:var(--navy);background:var(--lime-soft)}
.drop3 input:focus-visible,.drop input:focus-visible{outline:none;box-shadow:none}
/* keep focused targets clear of the sticky header */
html{scroll-padding-top:calc(var(--hdr, 72px) + 48px)}

/* 03 Closed mobile menu is hidden from Tab and screen readers, not just transparent */
@media (max-width:980px){
  .top5 .tnav,.tnav{visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s linear .2s}
  .menu-open .top5 .tnav,.menu-open .tnav{visibility:visible;transition:opacity .2s,transform .2s,visibility 0s}
}
/* role=radio option buttons (Same Day options) keep the pressed look */
.seg button[aria-checked="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.seg button[aria-checked="true"] .nsd{color:rgba(255,255,255,.7)}
.seg3 button[aria-checked="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(23,34,61,.12)}
/* blueprint choice groups as fieldset + legend, same look as before */
fieldset.fs{border:0;margin:0;padding:0;min-width:0}
fieldset.fs>legend.flabel{padding:0;float:left;width:100%}
fieldset.fs>legend.flabel+*{clear:both}

/* 05 Field messages */
.fmsg{color:#A23B2A;font-size:13.5px;font-weight:500;margin:6px 0 0}
.input[aria-invalid="true"]{border-color:#A23B2A}
.bg-navy .fmsg{color:#FFB4A6}

/* 01 Quote pending */
.tot b.qp{font-size:20px;letter-spacing:0}

/* 11 Local store pages: practical block first */
.store-now{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:18px;font-size:15.5px;color:var(--ink-2)}
.store-now .today-l{margin:0}
.store-now address{font-style:normal;color:var(--navy);font-weight:600}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*{animation:none!important}}

/* 06 About: story block hidden until Printout sends real copy */
.story4.solo{grid-template-columns:1fr;max-width:760px}
.done h2.big{margin:0}

/* 08 responsive photo candidates: <picture> must not change layout */
picture{display:contents}

.b4head.store{padding-top:clamp(28px,4vw,56px)}
.b4head.store .b4h1{font-size:clamp(44px,5.4vw,80px);line-height:1.02;margin:14px 0 18px}
.b4head.store .store-lead{margin:0;max-width:640px}
.store-now .today-l .dot{margin-right:8px}
.b4head.store .cta-row{margin-top:22px}


/* v6e — phone polish (Oct 23 2026). Desktop unchanged: the short phone texts are hidden above 640px. */
.cut5 .cs,.facts5 .fs{display:none}
@supports (overflow:clip){@media (max-width:980px){html,body{overflow-x:clip}}}
@media (max-width:640px){
  /* hero same-day line: one row, dot centred, small Sample tag */
  .cut5{display:flex;align-items:center;gap:8px;max-width:100%;min-width:0;white-space:nowrap;line-height:1.3}
  .cut5 i{align-self:center}
  .cut5 .ct{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .cut5 .cl{display:none}.cut5 .cs{display:inline}
  .cut5 .tagS{font-size:9px;letter-spacing:.1em;padding:3px 6px;vertical-align:0}
  /* hero facts: three equal columns that never cross the edge */
  .facts5{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .facts5>div,.facts5>div:last-child{min-width:0;margin:0;padding:0 8px 0 12px;border:0;border-left:1px solid var(--line)}
  .facts5>div:first-child{padding-left:0;border-left:0}
  .facts5 b{font-size:clamp(16px,4.8vw,19px);white-space:nowrap}
  .facts5 .fl{display:none}
  .facts5 .fs{display:block;font-size:12px;line-height:1.35;margin-top:3px;color:var(--ink-3)}
}

@media (max-width:640px){
  /* top strip: smaller Sample tag so it never runs under "Order same-day" */
  .sdbar .sdl{gap:8px}
  .sdbar .tagS{font-size:9px;letter-spacing:.1em;padding:3px 6px}
}
@media (max-width:400px){.sdbar .sdd{display:none}}

@media (max-width:640px){
  /* production card: a two-line label keeps its dot on the first line */
  .cap5 b{align-items:flex-start;line-height:1.3}
  .cap5 b::before{margin-top:.42em}
  /* footer: tagline on its own line under the logo instead of a cramped wrap */
  .foot5 .flock{flex-wrap:wrap;gap:12px 16px}
  .foot5 .flock .bar{display:none}
  .foot5 .flock span{flex-basis:100%;font-size:15px;color:rgba(255,255,255,.72)}
}

/* ===== v6f — iPhone polish pass (Oct 23 2026). Everything below is scoped to phones (<=640px) except the snap
   guard (<=980px); desktop 1440 renders exactly as before. ===== */
@media (max-width:640px){
  /* type: no single-word last lines, balanced headings */
  h1,h2,h3,.h2-5,.b4top h2,.eb4,.eb5{text-wrap:balance}
  p,li,dd,figcaption,.note,.fine,.p5,.how5 p,.cap5 span,.sdlist span,.legal span{text-wrap:pretty}

  /* bigger hit areas without changing what you see (Apple's 44pt rule) */
  .ulink,.np,.sdbar .go,.sdbar .sdl,.st5 dd a,.lk a,.fcols a,.tmenu,a.link,.legal a{position:relative}
  .ulink::before,.np::before,.sdbar .go::before,.sdbar .sdl::before,.st5 dd a::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .sdbar .sdl{overflow:visible}.sdbar .sdl .ct,.sdbar .sdl>span{overflow:hidden;text-overflow:ellipsis}
  .np{height:40px;padding:0 16px}

  /* home: each chapter is exactly one screen; photos take whatever room is left */
  .home5 .hero5{padding:0;display:flex;flex-direction:column;align-items:stretch;min-height:calc(100svh - var(--hdr) - 36px)}
  .home5 .hero5 .bgimg{flex:1 1 0;min-height:96px;height:auto}
  .home5 .hero5>.wrap{flex:none;width:100%}
  .home5 .hero5 .tx{padding:18px 0 20px}
  .home5 .ch:not(.hero5){display:flex;flex-direction:column;align-items:stretch;min-height:calc(100svh - var(--hdr));padding:20px 0 22px}
  .home5 .ch:not(.hero5)>.wrap{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .home5 .split5{display:flex;flex-direction:column;align-items:stretch;gap:16px;flex:1 1 auto;min-height:0}
  .home5 .split5>.tx{flex:none}
  .home5 .split5>.ph5,.home5 .split5>.duo5{flex:1 1 0;min-height:110px;height:auto;width:100%}
  .home5 .duo5 .ph5{height:100%}
  .home5 .prod5{padding:0 0 18px}
  .home5 .prod5 .bgimg{flex:1 1 0;min-height:90px;height:auto}
  .home5 .ch.prod5>.wrap{flex:none;margin-top:-30px}
  .home5 #products .pgrid{flex:1 1 auto;grid-template-rows:repeat(3,1fr);min-height:0}
  .home5 #products .pgrid a{display:flex;flex-direction:column;min-height:0}
  .home5 #products .pgrid .ph5{flex:1 1 0;min-height:64px;height:auto}
  .home5 .stores5{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;min-height:0}
  .home5 .st5{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
  .home5 .st5 .top2{flex:1 1 0;min-height:64px;height:auto}
  .home5 .steps5 .ph5{flex:1 1 0;min-height:84px;height:auto;margin-top:12px}
  .home5 .steps5 .how5{flex:none}
  /* blueprint + invitation chapters: the bullet lists repeat the paragraph above them; hidden on phones so the chapter fits */
  .home5 #blueprints .list5,.home5 #invitations .list5{display:none}

  /* hero */
  .hero5 .eb5{letter-spacing:.12em}
  .facts5{margin-top:16px}

  /* production card: 2 x 2 labels on one line each, captions aligned */
  .cap5{grid-template-columns:1fr 1fr;column-gap:14px}
  .cap5>div,.cap5>div:nth-child(2n){padding:9px 0}
  .cap5 b{font-size:14px;white-space:nowrap;letter-spacing:-.01em}
  .cap5 span{font-size:12.5px;line-height:1.35;margin-top:2px}

  /* product tiles: captions never run to the tile edge */
  .pgrid p{font-size:13px;letter-spacing:-.005em;padding-right:2px}

  /* buttons: primary + text link sit on one line in every chapter */
  .btns5{flex-wrap:nowrap;gap:20px}
  .btns5 .btn{padding:0 20px;font-size:15px;flex:none}
  .btns5 .ulink{font-size:15px}

  /* blueprint size chips: tidy 3 + 2 grid instead of a lone chip on line two */
  .sizes5{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .sizes5 span{grid-column:span 2;justify-content:center;padding:0 6px}
  .sizes5 span:nth-child(4){grid-column:1/span 2}
  .sizes5 span:nth-child(5){grid-column:3/span 4}

  /* store cards on home: the map is a thumbnail there, so its tiny labels are hidden */
  .st5 .map4 svg text,.st5 .map4 svg>g:last-of-type,.st5 .map4 svg>g:nth-last-of-type(2){display:none}
  .st5 dd{text-wrap:balance}
  .st5 .lk{gap:22px}

  /* footer: two columns, real tap rows, shorter */
  .foot5 .fcols{grid-template-columns:1fr 1fr;gap:26px 20px;padding-top:28px}
  .foot5 .fcols>div:first-child{grid-column:1/-1}
  .foot5 .fcols ul{gap:0}
  .foot5 .fcols li{padding:0}
  .foot5 .fcols a{display:inline-flex;align-items:center;min-height:40px}
  .foot5 .fcols li .note{display:block;margin:-8px 0 6px}
  .foot5 .fcols h4{margin-bottom:6px}
  .foot5 .legal{flex-direction:column;gap:6px;margin-top:28px}

  /* inner pages: forms */
  .seg3{display:flex;width:100%}
  .seg3 button{flex:1 1 0;min-height:44px;padding:10px 8px}
  .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .chips .chip span{height:100%;min-height:52px;padding:10px 14px}
  .chips .chip:last-child:nth-child(odd){grid-column:1/-1}
  .flabel{margin-top:26px}
  form .btn[type=submit],.summary .btn,.sum3 .btn,.fstep .btn{width:100%;justify-content:center}

  /* store pages: today line in two clean rows; Friday hours on two lines */
  [data-store-today]{display:grid!important;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
  [data-store-today] .sep{display:none}
  [data-store-today] .h{grid-column:2}
  [data-store-today] .sd{grid-column:2;display:block}
  [data-store-today] .nw{white-space:nowrap}
  [data-store-today] .sd::first-letter{text-transform:uppercase}
  .hours3 .nw,.hours .nw{display:block;white-space:nowrap}
  .hours3 .sep,.hours .sep{display:none}
  .hours3 td{vertical-align:top}

  /* maps keep their own proportions, so the pin label and the north arrow are never cut off */
  .map4:not(.sm){aspect-ratio:640/420;height:auto!important;width:100%;min-height:0;max-width:100%}
  .map4.sm{aspect-ratio:560/420;height:auto!important;width:100%;min-height:0;max-width:100%}
  .st5 .map4,.st5 .map4.sm{aspect-ratio:auto;height:auto!important}

  /* about: value rows stack (label, then line) so every row starts at the same edge */
  .list4.big li{display:block;position:relative;padding-left:21px;font-size:16.5px;line-height:1.45}
  .list4.big li::before{position:absolute;left:0;top:calc(13px + .58em);transform:none}
  .list4.big li b{display:block}
}
/* scroll snap on the home page (phones and tablets): each chapter settles into place */
@media (max-width:980px){
  html:has(body.home5){scroll-snap-type:y mandatory;scroll-padding-top:var(--hdr)}
  .home5 .sdbar,.home5 main>.ch:not(.hero5),.home5 .foot5{scroll-snap-align:start;scroll-snap-stop:always}
  .home5 .foot5 .legal{scroll-snap-align:end;scroll-margin-bottom:200px}
  html.snap-loose:has(body.home5){scroll-snap-type:y proximity}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){html:has(body.home5){scroll-snap-type:y proximity}}

@media (max-width:640px){
  /* same-day list: name, then the line, then the limit — no squeezed second column */
  .sdlist li{grid-template-columns:1fr;gap:4px;padding:16px 0;align-items:start}
  .sdlist li>span:nth-child(2){grid-column:1;grid-row:auto;padding-left:20px;font-size:15px;line-height:1.45}
  .sdlist li>span:nth-child(3){padding-left:20px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3)}
  .sdlist b{font-size:18px;line-height:1.25}
  /* production list under the order form: tight two-line rows */
  .quote-list a{align-items:center;padding:13px 0}
  .quote-list br{display:none}
  .quote-list b{display:block;line-height:1.3}
  .quote-list small{display:block;line-height:1.4;margin-top:3px;font-size:13px}
  .quote-list .link{position:relative}
  .quote-list .link::before{content:"";position:absolute;inset:-12px -8px}
  /* old-style header (admin): label and store pills on one centre line */
  .locals{align-items:center;gap:8px}
  .locals .lbl{line-height:1;margin-right:2px}
  .locals a{height:36px}
}

@media (max-width:640px){
  .chip small,.prod small,.quote-list small{text-wrap:balance}
}

@media (max-width:640px){
  /* contact form: one even rhythm between every field */
  form .nums{row-gap:0}
}

@media (max-width:640px){
  /* order form option groups: equal-width tiles in two columns, an odd last one spans the row */
  .order .seg[role=radiogroup]{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .order .seg[role=radiogroup] button{width:100%;min-height:48px;justify-content:center;text-align:center;padding-left:10px;padding-right:10px}
  .order .seg[role=radiogroup] button:last-child:nth-child(odd){grid-column:1/-1}
  #packs{grid-template-columns:repeat(3,1fr)!important}
  #packs button:last-child:nth-child(odd){grid-column:auto}
  #packs button{line-height:1.2;text-wrap:balance;padding-left:6px;padding-right:6px}
  /* store status pills under "Order same day": same width, side by side */
  #sd-status{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  #sd-status .pill{justify-content:center;text-align:center;white-space:normal;text-wrap:balance;font-size:12.5px;line-height:1.25;padding:8px 10px}
  .drop b,.drop3 b{text-wrap:balance}
  a[href^="tel:"]{white-space:nowrap}
}

@media (max-width:640px){
  /* blueprint form: the same 26px above every group label */
  .fstep .nums>div+div{margin-top:26px}
  .fstep .nums>div+div>.flabel:first-child{margin-top:0}
  .fstep fieldset.fs+fieldset.fs,.fstep .nums+fieldset.fs,.fstep fieldset.fs+div:not(:empty){margin-top:26px}
}

@media (max-width:640px){
  /* store line: SAMPLE stays glued to the time instead of dropping to its own line */
  [data-store-today] .sample{display:inline;white-space:nowrap;line-height:1;vertical-align:1px}
  /* more 44pt hit areas, visuals unchanged */
  .arrow,dd a,.visit4 a,footer a{position:relative}
  .arrow::before,dd a::before,.visit4 a::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  .chips4 a,.locals a{position:relative}
  .chips4 a::after,.locals a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .foot5 .fcols a{min-height:44px}
  .order .seg[role=radiogroup] button,.ready .when{text-wrap:balance}
}

/* 2026-10-30 phone fix (Jacob): on some iPhones the hero photo grew past its box and sat under the headline.
   The photo is now pinned inside its own box (photo on top, text below, never overlapping). Desktop untouched. */
@media (max-width:980px){
  .hero5 .bgimg,.prod5 .bgimg{overflow:hidden}
  .hero5 .bgimg img,.prod5 .bgimg img{position:absolute;top:0;left:0;width:100%;height:100%}
}
/* 2026-10-30 (Jacob): yellow SAMPLE tags removed sitewide */
.tagS,.sample,.tm-tag{display:none!important}