/* Pet photo session tool (page "studio"). Builds on tool.css tokens. */
.pc .eyebrow{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.pc .eyebrow:empty{display:none}
.pcform > .field > span{font:400 22px/1.2 var(--serif);margin-bottom:12px}
.pcform .sub{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.pcform .field .field{margin-bottom:12px}

.styles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.styles{grid-template-columns:repeat(4,1fr)}}
.style{appearance:none;font:inherit;color:inherit;text-align:left;background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:44px}
.style img,.style .swatch{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;display:block;margin-bottom:6px}
.style b{font-size:15px;line-height:1.25}
.style small{font-size:13px;color:var(--ink-soft);line-height:1.3}
.style:hover{border-color:var(--ink-soft)}
.style[aria-checked=true]{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,72,61,.18)}
.swatch{background:var(--mist)}
.s-studio{background:radial-gradient(circle at 50% 35%,#8F8478,#4E463F 75%)}

.pets{display:grid;gap:10px;margin-bottom:10px}
.pet{display:grid;grid-template-columns:72px 1fr 44px;gap:10px;align-items:center;background:var(--mist);border-radius:12px;padding:8px}
.pet img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.pet input{width:100%;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;min-height:46px;background:#fff}
.pet input:focus{border-color:var(--ink);outline:none}
.pet .rm{appearance:none;border:0;background:transparent;font-size:26px;line-height:1;color:var(--ink-soft);width:44px;height:44px;border-radius:50%;cursor:pointer}
.pet .rm:hover{background:#fff;color:var(--err)}
.addpet{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;border:2px dashed var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:#fff}
.addpet:hover,.addpet.over{border-color:var(--ink)}
.addpet .plus{grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font:700 28px/44px var(--sans);text-align:center}
.addpet small{color:var(--ink-soft);font-size:14px}
.addpet[hidden]{display:none}
.count{font-weight:700;margin:10px 0 0;color:var(--ink)}
.count:empty{display:none}

.result img{max-width:420px;margin:0 auto 14px}
.gets{margin:0 auto 16px;padding-left:20px;max-width:420px;color:var(--ink-soft);font-size:15px}
.files{display:grid;gap:10px;margin-top:16px}
.files .btn + .btn{margin-top:0}
@media(min-width:560px){.files{grid-template-columns:1fr 1fr}.files .btn-red{grid-column:1/-1}}
.redo{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.redo summary{font-weight:700;cursor:pointer;margin-bottom:10px}
.redo textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;min-height:100px}
.tip{font-weight:700;margin:6px 0 0}

.tiers{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tiers li{display:flex;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);font-size:16px}
.tiers li:first-child{border-top:0}
.tiers b{color:var(--ink)}
.pc .block .fine{text-align:left}
.petin{display:grid;gap:6px}
.pet .petin input{min-height:42px;padding:8px 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chip{appearance:none;font:inherit;font-size:15px;color:inherit;background:#fff;border:2px solid var(--line);border-radius:99px;padding:8px 14px;min-height:44px;cursor:pointer}
.chip:hover{border-color:var(--ink-soft)}
.chip[aria-checked=true]{border-color:var(--red);background:#FDF0EE;font-weight:700}
.sub-box{margin-top:10px}
.sub-box[hidden]{display:none}
.bgrow{display:flex;gap:12px;align-items:center}
.bgrow img{width:96px;height:72px;object-fit:cover;border-radius:8px;flex:none}
.bgrow img[hidden]{display:none}
.addpet.small{flex:1}
.pcform input[type=text][hidden]{display:none}
.pcform > .field > input[type=text]{margin-top:8px}
.consent.small{margin:12px 0 0;font-size:15px}
.result img.art{width:100%;max-width:420px;height:auto;border-radius:6px;box-shadow:0 18px 40px -22px rgba(20,64,58,.55)}
.result img.o-landscape{max-width:520px}
.reqs{margin-top:18px}
.req{background:var(--mist);border-radius:10px;padding:10px 12px;margin:6px 0;font-size:15px}
.req small{color:var(--ink-soft)}

/* ── form additions ── */
.pet .petin select{width:100%;font:inherit;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;min-height:42px;background:#fff}
.pcform .owner input[type=text]{margin-top:8px}
.pcform .owner input[type=text][hidden]{display:none}

/* ── 4-photo result ── */
.sheet{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.slot{position:relative;background:var(--mist);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:4/5}
.slot.wide{aspect-ratio:5/4}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot .lbl{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;font-weight:700;padding:3px 8px;border-radius:99px}
.slot .wait{display:grid;justify-items:center;gap:8px;font-size:14px;color:var(--ink-soft);padding:12px;text-align:center}
.slot .wait .spinner{width:28px;height:28px;margin:0}
.slot .btn{width:auto;min-height:40px;font-size:15px;margin:0}
.result .art{width:100%}

/* ══ The studio (home page) ══════════════════════════════════════════════ */
.studio{--backdrop:#1D1C1A;--backdrop-2:#282623;--fog:#BDB6AC;--snow:#F7F5F1;--rec:#E5322D;--display:"Instrument Serif",Georgia,serif;--ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.studio h1,.studio h2,.studio h3{font-family:var(--display);font-weight:400;letter-spacing:0}
.studio h2{font-size:clamp(32px,5vw,48px);line-height:1.05;margin:0 0 10px}
.btn-rec{background:var(--rec);border-color:var(--rec);color:#fff}
.btn-rec:hover{filter:brightness(1.06)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.todo{box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed rgba(189,182,172,.55);color:var(--fog);font:500 13px/1.3 var(--mono);padding:10px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px)}

/* ① entrance: the viewfinder */
.entrance{background:var(--backdrop);color:var(--snow);padding-block:32px 40px;background-image:radial-gradient(ellipse at 70% 30%,#34312D 0,transparent 60%)}
.entrance-in{display:grid;gap:28px;align-items:center}
.entrance h1{color:#fff;font-size:clamp(46px,9vw,92px);line-height:.98;max-width:11ch;margin:0 0 16px}
.entrance .lede{color:var(--fog);max-width:30em}
.entrance-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:24px 0 0}
.entrance-cta .btn{width:auto;margin:0;padding:0 28px}
.entrance-cta span{color:var(--fog);font-size:15px}
.viewfinder{position:relative;aspect-ratio:4/5;max-height:680px;width:100%;margin-inline:auto;overflow:hidden;background:#000;border-radius:4px}
.viewfinder img{width:100%;height:100%;object-fit:cover;display:block}
.vf-corner{position:absolute;width:34px;height:34px;border:2px solid rgba(255,255,255,.9)}
.vf-corner.tl{top:16px;left:16px;border-right:0;border-bottom:0}.vf-corner.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.vf-corner.bl{bottom:16px;left:16px;border-right:0;border-top:0}.vf-corner.br{bottom:16px;right:16px;border-left:0;border-top:0}
.vf-rec,.vf-count,.vf-read{position:absolute;font:500 13px/1 var(--mono);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.vf-rec{top:26px;left:60px;display:flex;align-items:center;gap:7px}
.vf-rec i{width:10px;height:10px;border-radius:50%;background:var(--rec);box-shadow:0 0 8px var(--rec)}
.vf-count{top:26px;right:60px}
.vf-read{bottom:26px;left:0;right:0;text-align:center;letter-spacing:.06em}
.vf-focus{position:absolute;left:50%;top:44%;width:56px;height:44px;margin:-22px 0 0 -28px;border:1.5px solid rgba(255,255,255,.75)}
@media(min-width:900px){.entrance{padding-block:56px 64px}.entrance-in{grid-template-columns:1fr minmax(380px,520px);gap:56px}}

/* ② sets */
.sets{background:var(--backdrop-2);color:var(--snow);padding-block:44px 40px}
.sets h2{color:#fff}
.sets-sub{color:var(--fog);margin:0 0 22px}
.set-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:720px){.set-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1100px){.set-grid{grid-template-columns:repeat(6,1fr)}}
.set-card{appearance:none;font:inherit;text-align:left;color:var(--snow);background:transparent;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-decoration:none}
.set-card:hover img{outline-color:var(--rec)}
.set-card img,.set-card .todo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s}
.set-card .set-name{font:400 21px/1.1 var(--display);color:#fff}
.set-card .set-meta{font-size:13px;color:var(--fog)}
.set-card[aria-selected=true] img,.set-card[aria-selected=true] .todo{outline-color:var(--rec)}
.set-card:focus-visible{outline:3px solid var(--rec);outline-offset:4px}

.sheet-panel{margin-top:28px;background:var(--backdrop);border-radius:6px;padding:18px}
.sheet-panel[hidden]{display:none}
.sheet-head h1,.sheet-head h3{font:400 clamp(34px,6vw,52px)/1.05 var(--display);color:#fff;margin:0}
.sheet-head p{color:var(--fog);margin:4px 0 18px;font-size:15px}
.sheet-body{display:grid;gap:22px}
.snaps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.snap{margin:0;background:#fff;padding:5px 5px 8px;box-shadow:0 8px 16px -8px rgba(0,0,0,.6);transform:rotate(-2deg)}
.snap:nth-child(2){transform:rotate(1.5deg) translateY(6px)}
.snap:nth-child(3){transform:rotate(-1deg)}
.snap img,.snap .todo{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.snap .todo{color:#8a8178;border-color:#cfc8bf}
.snap figcaption{color:#3A3430;font-size:13px;line-height:1.25;margin-top:6px}
.snap figcaption b{display:block;font-size:14px}
.snap figcaption span{color:#7A716A}
.became{grid-column:1/-1;margin:8px 0 0;font:italic 400 20px/1.25 var(--display);color:var(--snow)}
/* the film: a contact sheet with sprocket holes */
.film{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;background:#0F0E0D;padding:22px 10px;position:relative}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 10px,#2E2B28 10px 22px)}
.film::before{top:6px}.film::after{bottom:6px}
.frame{margin:0;display:flex;flex-direction:column;gap:6px}
.frame img,.frame .todo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.frame.wide img,.frame.wide .todo{aspect-ratio:5/4}
.frame figcaption{font:500 12px/1 var(--mono);color:var(--fog);display:flex;gap:8px}
.frame .fn{color:#7d766d}
.sheet-cta{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.sheet-cta .btn{width:auto;margin:0;padding:0 26px}
.sheet-cta span{color:var(--fog);font-size:15px}
/* a set's own page */
.set-page{padding-top:22px}
.set-page .sheet-panel{margin-top:10px}
.crumb{margin:0;font-size:15px}
.crumb a{color:var(--fog);text-decoration:none}
.crumb a:hover{color:#fff}
.more-h{margin:52px 0 16px;font-size:30px}
.set-grid.small .set-name{font-size:18px}
@media(min-width:1100px){.set-grid.small{grid-template-columns:repeat(5,1fr)}}
/* the shoot page */
.shoot h1{font:400 clamp(36px,6vw,54px)/1.05 var(--display);margin:0}
.shoot-sub{color:var(--ink-soft);margin:6px 0 22px}
.lobby-cta{margin:18px 0 6px}
.lobby-cta .btn{width:auto;margin:0;padding:0 28px}
.disclose{margin:24px 0 0;font-size:14px;color:var(--fog);max-width:52em}
@media(min-width:900px){
  .sheet-panel{padding:28px}
  .sheet-body{grid-template-columns:230px 1fr;gap:40px;align-items:start}
  .sheet-body .snaps{grid-template-columns:1fr;gap:16px}
  .sheet-body .snap{max-width:190px}
  .sheet-body .snap:nth-child(2){margin-left:26px}
  .film{gap:14px;padding:26px 14px}
}

/* ③ how a shoot works */
.flow{padding-block:56px 8px}
.flow-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:20px;counter-reset:f}
@media(min-width:720px){.flow-steps{grid-template-columns:repeat(4,1fr);gap:24px}}
.flow-steps li{counter-increment:f;border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:4px}
.flow-steps li::before{content:counter(f);font:400 34px/1 var(--display);color:var(--rec)}
.flow-steps b{font:600 17px/1.3 var(--ui)}
.flow-steps span{color:var(--ink-soft);font-size:15px}

/* ④ the shoot */
.shoot{padding-top:40px;scroll-margin-top:12px}
.progress{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:p}
.progress li{counter-increment:p;font:600 13px/1.2 var(--ui);color:var(--ink-soft);border-top:4px solid var(--line);padding-top:8px}
.progress li::before{content:counter(p) " ";color:inherit}
.progress li.on{color:var(--ink);border-top-color:var(--rec)}
.progress li.done{color:var(--ink);border-top-color:var(--ink)}
.setpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:560px){.setpick{grid-template-columns:repeat(4,1fr)}}
.setpick.many{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:31%;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin}
.setpick.many .chip{scroll-snap-align:start}
@media(min-width:560px){.setpick.many{grid-auto-columns:23%}}
.setpick-hint{font-size:13px;color:var(--ink-soft);margin:0 0 6px}
.setpick .chip{border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:13px;line-height:1.2}
.setpick .chip img,.setpick .chip .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;background:var(--mist)}
.mixbox[hidden]{display:none}
.mixbox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* ⑤ compare */
.compare{padding-block:56px 0}
.compare table{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{font:600 15px/1.2 var(--ui)}
.compare thead th:nth-child(2){color:var(--rec)}
.compare tbody th{font-weight:600;width:28%}
.tablewrap{overflow-x:auto}

/* ⑥ the session */
.package{display:grid;gap:18px}
@media(min-width:720px){.package{grid-template-columns:1fr 1fr;gap:28px;align-items:start}.package .fine{grid-column:1/-1}}
.incl{margin:0;padding-left:20px;display:grid;gap:8px}
.setpick .chip .ph{background:repeating-linear-gradient(135deg,var(--mist) 0 8px,#fff 8px 16px)}

/* ══ The lobby (new): album wall, sets by category, picture + words ══════════ */
/* ① the hall: an album wall of sample photos drifting left to right, the welcome on top */
.hall{position:relative;background:var(--backdrop);color:var(--snow);overflow:hidden}
.wall{position:relative;display:grid;gap:8px;padding:8px 0}
.wall-row{overflow:hidden;contain:paint}
/* moved by a small script (one long CSS-animated strip leaves undrawn gaps as it slides) */
.track{display:flex;gap:8px;width:max-content;transform:translateX(-50%)}
.tile{display:block;flex:none;height:104px;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--backdrop-2)}
.tile.w{aspect-ratio:5/4}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.tile:hover img{transform:scale(1.04)}
.wall-pause{position:absolute;right:12px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:99px;border:1px solid rgba(247,245,241,.35);background:rgba(29,28,26,.72);color:var(--snow);font:500 13px var(--ui);cursor:pointer}
.wall-pause:hover{background:rgba(29,28,26,.92)}
.i-pause{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.paused .i-pause{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (prefers-reduced-motion:reduce){.wall-pause{display:none}}
/* the welcome sits on the wall itself: the photos fade and blur behind the words instead of a black block */
.hall{min-height:500px}
/* the photos fade toward the words (a plain gradient: blur + mask renders black in some browsers) */
.hall-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(20,19,17,.9) 0,rgba(20,19,17,.72) 30%,rgba(20,19,17,.3) 58%,rgba(20,19,17,0) 80%)}
.hall-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 26px;pointer-events:none}
.hall-copy .wrap{pointer-events:auto}
.hall-copy h1{color:#fff;font-size:clamp(40px,10vw,96px);line-height:.98;max-width:11ch;margin:0 0 10px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hall-copy .lede{color:#EDE8E1;margin:0;font-size:17px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hall-copy .entrance-cta{margin-top:18px}
.lobby .tile{height:clamp(120px,32vw,150px)}
@media(min-width:900px){
  .hall{min-height:0}
  .lobby .tile{height:clamp(170px,23vh,232px)}
  .wall{padding:10px 0;gap:10px}.track{gap:10px}
  .hall-veil{background:linear-gradient(90deg,rgba(20,19,17,.9) 0,rgba(20,19,17,.76) 28%,rgba(20,19,17,.32) 48%,rgba(20,19,17,0) 64%)}
  .hall-copy{inset:0;display:flex;align-items:center;padding:0}
  .hall-copy h1{max-width:10.5ch;font-size:clamp(56px,6.2vw,92px)}
  .hall-copy .lede{font-size:19px}
}

/* chapters: one idea per screen */
.ch{padding-block:64px 56px}
.ch h2{max-width:20ch}
.ch-time,.ch-alt{background:#F4F0EA}
.ch-line{font-size:18px;line-height:1.55;color:var(--ink-soft);margin:0 0 26px;max-width:36em}
.ch-link{margin:22px 0 0;font-weight:600}
.ch-link a{color:var(--ink);text-decoration-color:var(--rec);text-underline-offset:4px}
/* separate snapshots → one photo together */
.proof{display:grid;gap:18px;align-items:center}
.proof-in{display:flex;gap:10px;justify-content:center}
.mini-snap{margin:0;background:#fff;padding:6px 6px 8px;box-shadow:0 10px 22px -12px rgba(0,0,0,.45);width:min(30%,150px);transform:rotate(-2.5deg)}
.mini-snap:nth-child(2){transform:rotate(2deg) translateY(8px)}
.mini-snap:nth-child(3){transform:rotate(-1deg)}
.mini-snap img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.mini-snap figcaption{font:600 13px/1.25 var(--ui);color:#3A3430;margin-top:6px}
.mini-snap figcaption span{display:block;font-weight:400;color:#7A716A;font-size:12px}
.proof-arrow{justify-self:center;font:400 40px/1 var(--display);color:var(--rec);transform:rotate(90deg)}
.proof-out img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:6px;box-shadow:0 22px 44px -24px rgba(0,0,0,.55)}
@media(min-width:820px){
  .proof{grid-template-columns:1fr 48px 1.25fr;gap:28px}
  .proof.flip{grid-template-columns:1.25fr 48px 1fr}
  .proof.flip .proof-out{order:1}.proof.flip .proof-arrow{order:2}.proof.flip .proof-in{order:3}
  .proof-arrow{transform:none}
  .proof.flip .proof-arrow{transform:scaleX(-1)}
}
/* three cards: a picture and a few words each */
.cards3{display:grid;gap:22px;margin-top:22px}
.card3 img,.card3 .mosaic{width:100%;height:auto;display:block;border-radius:6px;aspect-ratio:5/4;object-fit:cover;box-shadow:0 14px 30px -20px rgba(0,0,0,.45)}
.card3 .mosaic{box-shadow:none}
.card3 h3{font-size:clamp(23px,2.6vw,28px);line-height:1.1;margin:14px 0 6px;color:var(--ink)}
.card3 h3 i{font-style:normal;color:var(--rec);margin-right:6px}
.card3 p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.5}
@media(max-width:719px){
  .card3{display:grid;grid-template-columns:42% 1fr;grid-template-rows:auto 1fr;gap:6px 14px;align-items:start}
  .card3 > img,.card3 > .mosaic{grid-row:span 2}
  .card3 h3{margin-top:0}
}
@media(min-width:720px){.cards3{grid-template-columns:repeat(3,1fr);gap:28px}}
/* prices in one band */
.band{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:760px}
.band li{border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;background:#fff}
.band b{font:400 36px/1 var(--display);color:var(--ink)}
.band span{font-size:14px;color:var(--ink-soft)}
@media(min-width:720px){.band{grid-template-columns:repeat(4,1fr)}}
.ch-price .fine{margin-top:10px}
.crumb.dark a{color:var(--ink-soft)}
.faqz h1{font-size:clamp(40px,6vw,64px);margin:6px 0 22px}

/* ② sets by category: swipe a row on phones, a grid on bigger screens */
.cat{margin:26px 0 0}
.cat h3{font-size:26px;color:#fff;margin:0 0 12px;display:flex;align-items:baseline;gap:10px}
.cat h3 span{font:500 13px var(--mono);color:var(--fog)}
.cat-in{position:relative}
.set-row{display:grid;grid-auto-flow:column;grid-auto-columns:42%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#4a4642 transparent}
.set-row .set-card{scroll-snap-align:start}
.set-row .set-name{font-size:19px}
@media(min-width:720px){.set-row{grid-auto-columns:calc((100% - 48px) / 4.3)}}
@media(min-width:1100px){.set-row{grid-auto-columns:calc((100% - 64px) / 5.3)}}
.row-btn{display:none}
@media(min-width:720px) and (hover:hover){
  .row-btn{display:flex;position:absolute;top:calc(50% - 40px);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(247,245,241,.3);background:rgba(29,28,26,.85);color:#fff;align-items:center;justify-content:center;cursor:pointer;font:400 24px/1 var(--ui)}
  .row-btn:hover{background:#000}
  .row-btn.prev{left:-22px}.row-btn.next{right:-22px}
  .row-btn[hidden]{display:none}
}

/* ③ picture + words, alternating sides */
.zzs{padding-block:56px 8px}
.zzs > h2{margin-bottom:24px}
.zz{display:grid;gap:18px;align-items:center;margin:0 0 40px}
.zz-fig img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 18px 40px -22px rgba(0,0,0,.45)}
.zz-text h3{font-size:clamp(28px,4vw,40px);line-height:1.08;margin:0 0 10px;color:var(--ink)}
.zz-text p{margin:0 0 10px;color:var(--ink-soft);font-size:17px;line-height:1.6;max-width:34em}
.step{font:400 46px/1 var(--display)!important;color:var(--rec)!important;margin:0 0 6px!important}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mosaic{aspect-ratio:5/4;grid-template-rows:1fr 1fr}
.mosaic img{width:100%;height:100%;object-fit:cover;box-shadow:none;border-radius:4px;min-height:0}
.zz-cta{margin:0 0 20px}
.zz-cta .btn{width:auto;padding:0 28px;margin:0}
.compare2 dl{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:17px;line-height:1.5}
.compare2 dt{font:600 13px/1.9 var(--ui);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.compare2 dt:first-of-type{color:var(--rec)}
.compare2 dd{margin:0;color:var(--ink)}
.compare2 dd:last-of-type{color:var(--ink-soft)}
.honest{font:italic 400 22px/1.35 var(--display);color:var(--ink);margin:4px 0 8px;max-width:36em}
.faqz{padding-block:56px 8px}
.lobby .prices.wrap{max-width:1180px}
.qa-grid{display:grid;gap:34px}
.qa img{width:100%;height:auto;display:block;border-radius:6px;margin:0 0 14px;box-shadow:0 14px 30px -20px rgba(0,0,0,.45)}
.qa h3{font-size:clamp(25px,3vw,30px);line-height:1.1;margin:0 0 8px;color:var(--ink)}
.qa p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.6}
@media(max-width:719px){ /* phones: small picture beside the words */
  .qa-grid{gap:26px}
  .qa{display:grid;grid-template-columns:38% 1fr;gap:4px 14px;align-items:start}
  .qa img{grid-row:span 2;margin:0;aspect-ratio:1;object-fit:cover}
  .qa h3{font-size:22px}
  .qa p{font-size:15px}
}
@media(min-width:720px){.qa-grid{grid-template-columns:1fr 1fr;gap:44px 36px}}
@media(min-width:820px){
  .zz{grid-template-columns:1.05fr 1fr;gap:56px;margin-bottom:64px}
  .zz.flip .zz-fig{order:2}
}

/* ④ ring the studio */
.call{background:var(--backdrop);color:var(--snow);margin-top:40px;padding-block:44px}
.call-in{display:grid;gap:24px;align-items:center}
.call-fig img{width:100%;height:auto;display:block;border-radius:6px}
.call h2{color:#fff}
.call p{color:var(--fog);font-size:18px;line-height:1.6;max-width:30em}
.call a:not(.btn){color:#fff}
@media(min-width:820px){.call-in{grid-template-columns:1fr 1fr;gap:56px}}

/* old or blurry photo, per pet */
.oldpic{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);cursor:pointer;min-height:32px}
.oldpic input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--rec)}
/* fixes: the mosaic card stays a 2x2 grid; fine print and the honest line sit left, with room */
.card3 .mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:5/4}
.card3 .mosaic img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:4px;box-shadow:none;min-height:0}
.ch .honest{margin-top:28px}
.ch .fine,.ch-price .fine{text-align:left;margin-left:0}
/* phones: the wall on top fades into the words below it (no words over busy photos) */
@media(max-width:899px){
  .hall{min-height:0;background:var(--backdrop)}
  .hall-veil{bottom:auto;height:var(--wall-h,410px);background:linear-gradient(0deg,rgba(29,28,26,1) 0,rgba(29,28,26,.6) 12%,rgba(29,28,26,0) 30%)}
  .hall-copy{position:relative;margin-top:-34px;padding:0 0 30px}
  .wall-pause{top:12px;bottom:auto}
}