:root{
  --oat:#EAE1CE; --oat-deep:#DED2B9; --field:#CBD2BB; --field-deep:#B9C2A5;
  --cream:#F8F3E8; --cream-2:#FCF9F1;
  --ink:#2E2620; --ink-2:#5A4B3D; --ink-3:#87766437;
  --walnut:#6B5745; --walnut-soft:#8A7563;
  --ribbon:#2F5C8C; --ribbon-deep:#254A72; --ribbon-soft:#EAF0F7;
  --line:#D9CDB5; --line-2:#C8BA9C;
  --radius:16px; --radius-lg:20px;
  --shadow:0 18px 40px -24px rgba(46,38,32,.45);
  --shadow-sm:0 8px 20px -14px rgba(46,38,32,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink);background:var(--oat);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:"Domine",serif;font-weight:500;letter-spacing:-.01em;line-height:1.12;margin:0}
p{margin:0}
a{color:var(--ribbon-deep);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ribbon)}
img{display:block;max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--walnut)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:16px;padding:15px 26px;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-primary{background:var(--ribbon);color:#fff}
.btn-primary:hover{background:var(--ribbon-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--cream-2);border-color:var(--walnut-soft)}
.ribbon-rule{width:64px;height:2px;background:var(--ribbon);border-radius:2px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(234,225,206,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{width:38px;height:38px;flex:none}
.brand-name{font-family:"Domine",serif;font-weight:600;font-size:19px;letter-spacing:.01em;line-height:1}
.brand-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);margin-top:3px}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-phone{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none}
.nav-link{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none}
.nav-link:hover{color:var(--ribbon-deep)}
@media(max-width:860px){.nav-link{display:none}}
@media(max-width:640px){.nav-phone,.nav-inquiry{display:none}}

/* hero */
.hero{padding:64px 0 72px;background:
  linear-gradient(180deg,var(--field) 0%,var(--field-deep) 62%,var(--oat) 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch}
.hero-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px 46px;box-shadow:var(--shadow);position:relative;z-index:2;align-self:center;margin-right:-40px}
.hero-loc{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px}
.hero-card h1{font-size:47px;font-weight:500}
.hero-card h1 em{font-style:italic;color:var(--walnut)}
.hero-lede{margin-top:20px;font-size:18.5px;color:var(--ink-2);max-width:34ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:20px;font-size:14px;color:var(--walnut);display:flex;align-items:center;gap:8px}
.hero-ship{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:var(--ribbon-soft);color:var(--ribbon-deep);border:1px solid #cfe0f1;font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:999px}
.hero-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-2);min-height:440px;box-shadow:var(--shadow)}
.hero-tag{position:absolute;left:0;bottom:0;background:var(--cream);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.04em;padding:9px 16px;border-top-right-radius:12px;z-index:3}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-card{margin-right:0;margin-bottom:-32px;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .hero-photo{min-height:340px}
  .hero-card h1{font-size:38px}
}

/* section shell */
.sec{padding:78px 0}
.sec-head{max-width:640px}
.sec-head h2{font-size:34px;margin-top:14px}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:18px}

/* waitlist board */
.board{background:var(--oat)}
.board-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:40px}
.board-top{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:22px 30px;background:var(--ribbon);color:#fff}
.board-top .t{font-family:"Domine",serif;font-size:19px;font-weight:600}
.board-top .s{font-size:14px;color:#dfe8f2}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.03em;padding:7px 14px;border-radius:999px}
.dot{width:7px;height:7px;border-radius:50%;background:#8fd0a6;box-shadow:0 0 0 3px rgba(143,208,166,.28)}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:start;padding:24px 30px;border-top:1px solid var(--line)}
.row:first-child{border-top:none}
.row-n{font-family:"Domine",serif;font-size:16px;color:var(--ribbon);font-weight:600;padding-top:2px}
.row-b h3{font-size:19px;font-weight:600}
.row-b p{margin-top:5px;color:var(--ink-2);font-size:15.5px;max-width:52ch}
.row-tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--walnut);white-space:nowrap;padding-top:5px}
@media(max-width:640px){.row{grid-template-columns:32px 1fr}.row-tag{display:none}}

/* porch plate signature band */
.plate{position:relative;background:var(--ink);color:var(--cream)}
.plate-grid{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;min-height:420px}
.plate-photo{position:relative;overflow:hidden}
.plate-copy{padding:70px 60px;display:flex;flex-direction:column;justify-content:center}
.plate-copy .eyebrow{color:#cdb98f}
.plate-copy h2{font-size:38px;color:var(--cream);margin-top:16px;font-weight:500}
.plate-copy h2 em{font-style:italic;color:#d9c4a0}
.plate-copy p{margin-top:20px;color:#cfc4b6;font-size:18px;max-width:40ch}
.plate-copy .hero-actions{margin-top:30px}
.plate .btn-ghost{color:var(--cream);border-color:rgba(248,243,232,.35)}
.plate .btn-ghost:hover{background:rgba(248,243,232,.08);border-color:rgba(248,243,232,.6)}
@media(max-width:860px){.plate-grid{grid-template-columns:1fr}.plate-photo{min-height:300px}.plate-copy{padding:48px 32px}}

/* Q&A */
.qa{background:var(--oat-deep)}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.qa-item{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px}
.qa-item h3{font-size:20px;font-weight:600;display:flex;gap:12px;align-items:baseline}
.qa-item h3 span{font-family:"Domine",serif;color:var(--ribbon);font-size:15px;flex:none}
.qa-item p{margin-top:12px;color:var(--ink-2);font-size:16px}
@media(max-width:720px){.qa-grid{grid-template-columns:1fr}}

/* photo galleries: start */
.gal-tabs{display:flex;gap:10px;margin-top:36px;padding:4px 0 12px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gal-tab{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--cream);color:var(--ink-2);font-family:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.gal-tab:hover{background:var(--cream-2);border-color:var(--walnut-soft)}
.gal-tab .n{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.62}
.gal-tab[aria-selected="true"]{background:var(--ribbon);border-color:var(--ribbon);color:#fff}
.gal-tab[aria-selected="true"] .n{opacity:.78}
.gal-tab:focus-visible{outline:2px solid var(--ribbon);outline-offset:2px}
.gal-panel[hidden]{display:none}
.gal-panel:focus{outline:none}
/* CSS columns masonry: photos keep their real aspect ratio, so nothing is
   cropped. Column count steps up with width instead of auto-fit, to keep
   thumbnails from getting tiny on a wide screen. */
.gal-grid{column-count:2;column-gap:14px;margin-top:10px}
@media(min-width:560px){.gal-grid{column-count:3}}
@media(min-width:900px){.gal-grid{column-count:4}}
.gal-cell{display:block;width:100%;padding:0;margin:0 0 14px;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:var(--oat-deep);cursor:pointer;break-inside:avoid;transition:border-color .18s ease,transform .18s ease}
.gal-cell img{width:100%;height:auto}
.gal-cell:hover{border-color:var(--ribbon);transform:translateY(-1px)}
.gal-cell:focus-visible{outline:2px solid var(--ribbon);outline-offset:2px}
.gal-soon{margin-top:10px;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:52px 44px;box-shadow:var(--shadow-sm)}
.gal-soon h3{font-family:"Domine",serif;font-size:27px;font-weight:500}
.gal-soon p{margin-top:14px;color:var(--ink-2);font-size:17px;max-width:48ch}
.gal-soon .hero-actions{margin-top:26px}
@media(max-width:560px){.gal-soon{padding:36px 26px}.gal-soon h3{font-size:23px}}

/* lightbox */
/* z-index is deliberately far above the sticky nav (20). The nav uses
   backdrop-filter, which spawns its own stacking context and painted over a
   z-index:60 overlay. The lightbox also lives at the end of body, outside
   main, so nothing in the document flow can stack above it. */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(26,21,17,.97);display:none;align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lb-img{max-width:min(1200px,92vw);max-height:84vh;width:auto;height:auto;border-radius:var(--radius);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.lb-btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(248,243,232,.28);background:rgba(26,21,17,.6);color:var(--cream);cursor:pointer;transition:background .18s ease,border-color .18s ease}
.lb-btn:hover{background:rgba(248,243,232,.16);border-color:rgba(248,243,232,.6)}
.lb-btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.lb-close{top:18px;right:18px}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#cfc4b6;font-size:14px;font-weight:600;letter-spacing:.04em}
@media(max-width:640px){
  .lb{padding:12px}
  .lb-img{max-height:74vh;max-width:94vw}
  .lb-prev{left:10px;bottom:20px;top:auto}
  .lb-next{right:10px;bottom:20px;top:auto}
  .lb-count{bottom:34px}
}
@media(prefers-reduced-motion:reduce){
  .gal-cell:hover{transform:none}
}
/* photo galleries: end */

/* CTA text door */
.door{background:var(--oat)}
.door-card{background:var(--cream-2);border:1px solid var(--line);border-radius:24px;padding:64px 56px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.door-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--ribbon)}
.door-card .eyebrow{color:var(--walnut)}
.door-card h2{font-size:clamp(38px,6vw,64px);font-weight:500;margin-top:18px;letter-spacing:-.02em}
.door-card h2 em{font-style:italic;color:var(--ribbon)}
.door-num{display:block;font-family:"Domine",serif;font-size:clamp(30px,5vw,46px);color:var(--ink);text-decoration:none;margin-top:8px}
.door-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.door-actions .btn{font-size:17px;padding:17px 30px}
.door-fine{margin-top:26px;color:var(--walnut);font-size:15px;max-width:52ch}

/* footer */
.foot{background:var(--ink);color:#cfc4b6;padding:56px 0 40px}
.foot-grid{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(200px,1fr) minmax(200px,1fr);gap:40px;align-items:start}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr}}
.foot .brand-name{color:var(--cream)}
.foot .brand-sub{color:#b09c7f}
.foot-col h4{font-family:"Hanken Grotesk",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b09c7f;margin:0 0 12px}
.foot-col a,.foot-col p{color:#dcd2c4;text-decoration:none;font-size:15.5px;margin:0 0 6px;display:block}
.foot-col a:hover{color:#fff}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid rgba(248,243,232,.14);font-size:13.5px;color:#a99a84;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.door-form{margin-top:36px;display:grid;gap:16px;max-width:560px}
.door-form-lead{margin:0 0 4px;color:var(--ink-2);font-size:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:grid;gap:7px}
.form-field span{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.form-field input,.form-field textarea{font-family:inherit;font-size:16px;color:var(--ink);background:var(--cream);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;transition:border-color .18s ease,box-shadow .18s ease}
.form-field input:focus-visible,.form-field textarea:focus-visible{outline:none;border-color:var(--ribbon);box-shadow:0 0 0 3px rgba(47,92,140,.15)}
.form-field textarea{resize:vertical;min-height:112px}
.door-form .btn-primary{justify-self:start}
.door-form .btn-primary:disabled{opacity:.6;cursor:default}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-status{margin:2px 0 0;font-size:15px;font-weight:600}
.form-status.ok{color:#2f7d4f}
.form-status.err{color:#b3402f}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}

/* nav page tabs.
   Owner request (Quo, 2026-09-03): "put a border around the phone number and
   payments like you did the sending an inquiry". So the page links and the
   phone reuse the .btn.btn-ghost component itself rather than a lookalike,
   which is why the markup carries those classes and only the deltas live here.
   Nav buttons run tighter than body buttons because six of them share a row. */
.nav-tabs{display:flex;align-items:center;gap:10px;margin-left:auto;margin-right:14px}
.nav .btn,.nav-phone{padding:12px 18px;font-size:15px}
.nav-tab{white-space:nowrap}
.nav-tab[aria-current="page"]{color:var(--ribbon-deep);border-color:var(--ribbon);background:var(--ribbon-soft)}
.nav-tab[aria-current="page"]:hover{background:var(--ribbon-soft)}
.lbl-short{display:none}
@media(max-width:640px){
  .nav-cta{gap:12px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
}
/* NAV_HIDE_BP: above this the row holds brand + 2 page buttons + phone +
   inquiry + the primary button; below it the phone and inquiry links drop out.
   Both are duplicated further down every page (hero actions on the homepage,
   the CTA card on the sub-pages), so dropping them costs no reachability. The
   breakpoint is measured, not guessed: see tools/_tmp/shot-navtop.mjs. */
@media(max-width:1180px){
  .nav-phone,.nav-inquiry{display:none}
}
/* Below 760px even the page buttons cannot share a line with the brand and the
   text button, so their row wraps underneath instead of squeezing. */
@media(max-width:760px){
  .nav-in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px}
  .brand{order:1}
  .nav-cta{order:2;margin-left:auto}
  .nav-tabs{order:3;width:100%;margin:10px 0 0;gap:10px;margin-right:0}
  .nav-tab{flex:1 1 0;justify-content:center}
}
@media(max-width:520px){
  .wrap{padding:0 18px}
  .brand-sub{display:none}
  .brand-name{font-size:17px;white-space:nowrap}
  .brand-mark{width:32px;height:32px}
  .brand{gap:9px}
  .nav-cta{gap:10px}
  .nav .btn{padding:12px 16px;font-size:15px}
}
/* 320px (old iPhone SE) cannot hold the wordmark too, so the mark carries the
   brand there and the name is stated in the hero right below. */
@media(max-width:344px){
  .brand-name{display:none}
}
/* The hero card kept its desktop 46px side padding down to the narrowest
   phone, which left only 262px of content at 390px. .hero-card is a grid item
   whose min-width:auto floors it at min-content, so too much padding also
   stretched the hero past the viewport. The Sep 7 headline is a list of
   claims, not a short city line, and the lede is two sentences plus a
   delivery range, so type size and measure have to come down with the padding. */
.hero-lede{max-width:52ch}
@media(max-width:860px){
  .hero-card h1{font-size:34px}
}
@media(max-width:520px){
  .hero-card{padding:40px 26px}
  .hero-card h1{font-size:27px}
}
@media(max-width:380px){
  .hero-card{padding:36px 22px}
  .hero-card h1{font-size:25px}
}

/* payments page */
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
@media(max-width:720px){.pay-grid{grid-template-columns:1fr}}
.pay-card{display:flex;align-items:center;gap:18px;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
a.pay-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
/* Brand-coloured chip with a white mark, which is how each of these companies
   presents its own app icon. The chip is wider than it is tall because Venmo's
   logo is a wordmark, not a glyph, and is unreadable squeezed into a square. */
.pay-logo{width:56px;height:48px;flex:none;display:grid;place-items:center;border-radius:13px;padding:9px}
.pay-logo svg{width:100%;height:100%}
.pay-body{min-width:0}
/* These are spans inside a flex row, so they need an explicit block display or
   the handle runs on the same line as the brand name and wraps mid-number. */
.pay-name{display:block;font-family:"Domine",serif;font-size:19px;font-weight:600;line-height:1.15}
.pay-handle{display:block;margin-top:4px;font-size:15px;color:var(--walnut);overflow-wrap:anywhere}
.pay-go{margin-left:auto;flex:none;color:var(--walnut);display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
a.pay-card:hover .pay-go{color:var(--ribbon-deep)}
.pay-copy{margin-left:auto;flex:none;font:inherit;font-size:14px;font-weight:600;color:var(--ribbon-deep);background:var(--oat);border:1px solid var(--line-2);border-radius:50px;padding:10px 16px;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.pay-copy:hover{background:var(--ribbon);color:#fff;border-color:var(--ribbon)}
.pay-copy[data-done="1"]{background:var(--ribbon-deep);color:#fff;border-color:var(--ribbon-deep)}
@media(max-width:420px){
  .pay-card{gap:14px;padding:18px}
  .pay-go span{display:none}
  .pay-copy{padding:9px 13px}
}
.pay-note{margin-top:18px;font-size:15px;color:var(--walnut);max-width:70ch}

/* finance feature block */
.fin{background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);padding:44px 46px;margin-top:8px;display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.fin-copy{max-width:56ch}
.fin h2{font-size:clamp(28px,3.6vw,38px);font-weight:500;color:var(--cream);line-height:1.12}
.fin p{margin-top:14px;color:rgba(248,243,232,.82);font-size:17px}
.fin-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(248,243,232,.12);border:1px solid rgba(248,243,232,.28);color:var(--cream);border-radius:50px;padding:8px 16px;font-size:14px;font-weight:600;letter-spacing:.01em;margin-bottom:18px}
.fin-badge svg{width:15px;height:15px}
.fin .btn-primary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.fin .btn-primary:hover{background:#fff;border-color:#fff}
.fin-disclaimer{margin-top:20px;font-size:13px;line-height:1.6;color:var(--walnut);max-width:78ch}
@media(max-width:560px){.fin{padding:30px 24px}}

/* homepage gallery teaser */
.teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
@media(max-width:720px){.teaser{grid-template-columns:repeat(2,1fr)}}
.teaser a{display:block;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--oat-deep);transition:border-color .18s ease,transform .18s ease}
.teaser a:hover{border-color:var(--ribbon);transform:translateY(-1px)}
.teaser img{width:100%;height:100%;object-fit:cover;object-position:top}
.teaser-more{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.teaser-count{color:var(--walnut);font-size:15px}
@media(prefers-reduced-motion:reduce){.teaser a:hover{transform:none}}

/* hero trust chips: the shipping line gained neighbours, so they share a
   wrapping row instead of the ship chip owning the margin by itself. */
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-badges .hero-ship{margin-top:0}
.hero-akc,.hero-embark{display:inline-flex;align-items:center;gap:9px;background:var(--oat);color:var(--walnut);border:1px solid var(--line-2);font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:999px}
.hero-akc svg,.hero-embark svg{flex:none}

/* hero photo pair. Owner request (Quo, 2026-09-06 6:14pm): "put this little
   guy on the homepage with the other one, shrink the other picture and just
   put it next to it". Two columns inside the existing framed panel, so the
   border, radius and the corner tag all still belong to one object. */
.hero-duo{display:grid;grid-template-columns:1fr 1fr}
.hero-duo img{width:100%;height:100%;min-height:440px;object-fit:cover;display:block}
.hero-duo img+img{border-left:1px solid var(--line-2)}
/* On a phone the panel is ~354px wide, so a 440px-tall pair would be two
   slivers. Keep both columns (he asked for this puppy to be seen, and mobile
   is where it will be seen) and let each cell take a 3:4 crop instead. */
@media(max-width:640px){
  .hero-photo{min-height:0}
  .hero-duo img{min-height:0;aspect-ratio:3/4}
}

/* gallery: adult parents presented by name, and the intro above them */
.gal-intro{margin-top:26px;max-width:56ch}
.gal-intro h3{font-family:"Domine",serif;font-size:24px;font-weight:500}
.gal-intro p{margin-top:10px;color:var(--ink-2);font-size:17px}
.parents{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:24px}
@media(max-width:640px){.parents{grid-template-columns:1fr}}
.parent{margin:0}
.parent .gal-cell{width:100%}
/* Safety net: the source crops are already a matching 3:2, but pinning the
   ratio here keeps the two captions aligned if a future photo is not. */
.parent .gal-cell img{aspect-ratio:3/2;object-fit:cover}
.parent figcaption{margin-top:12px}
.parent-name{display:block;font-family:"Domine",serif;font-size:21px;font-weight:600;line-height:1.15}
.parent-role{display:block;margin-top:3px;color:var(--walnut);font-size:15.5px}

/* gallery page header */
.gpage{background:var(--oat);padding:56px 0 0}
.gpage-head{max-width:660px}
.gpage-head h1{font-size:clamp(34px,5vw,46px);margin-top:14px;font-weight:500}
.gpage-head p{margin-top:16px;color:var(--ink-2);font-size:18px}
.gback{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font-size:15px;font-weight:600;color:var(--ribbon-deep);text-decoration:none}
.gback:hover{text-decoration:underline}
.gcta{background:var(--oat);padding:20px 0 78px}
.gcta-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px 44px;box-shadow:var(--shadow-sm);display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.pup-sale{margin-top:32px;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 32px;display:flex;flex-wrap:wrap;gap:22px 32px;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm)}
.pup-sale h2{font-size:34px;margin-top:8px;font-weight:500}
.pup-sale p{margin-top:8px;color:var(--ink-2);max-width:42ch}
.pup-prices{display:flex;flex-wrap:wrap;gap:12px}
.pup-rate{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:14px 18px;min-width:148px}
.pup-rate span{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--walnut)}
.pup-rate s{display:block;margin-top:6px;color:var(--walnut-soft);font-size:15px}
.pup-rate strong{display:block;font-family:"Domine",serif;font-size:28px;font-weight:600;line-height:1.1;color:var(--ink)}
.litter{margin-top:42px}
.gpage .litter:last-child{margin-bottom:56px}
.litter h2{font-size:30px;margin-top:8px;font-weight:500}
.litter>p{margin-top:8px;color:var(--ink-2);max-width:58ch}
.pup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.pup{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;overflow:hidden;box-shadow:var(--shadow-sm)}
.pup-body{padding:22px 26px 24px}
.pup-shot{position:relative;overflow:hidden}
.pup-photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%}
.sold-banner{position:absolute;left:6%;bottom:9%;transform:rotate(-14deg);transform-origin:left center;background:#e10600;color:#fff;font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,40px);letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:7px 14px 8px;white-space:nowrap;box-shadow:0 8px 14px rgba(0,0,0,.38);text-shadow:0 2px 0 rgba(120,0,0,.35)}
.pup-photo.wide{aspect-ratio:16/10;object-position:center}
.pup-sold{background:var(--oat-deep)}
.pup-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pup h3{font-size:22px;font-weight:600}
.pup-flag{flex:none;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ribbon-deep);background:var(--ribbon-soft);border:1px solid #cfe0f1;border-radius:999px;padding:6px 12px}
.pup-flag.sold{color:#6b3a32;background:#f6e7e2;border-color:#e4cdc6}
.pup-flag.wait{color:var(--walnut);background:var(--cream);border-color:var(--line-2)}
.pup-meta{margin-top:12px;color:var(--ink-2);font-size:15.5px}
.pup-now{margin-top:12px;font-weight:600;color:var(--ink);font-size:16px}
.pup-now s{font-weight:500;color:var(--walnut-soft);margin-right:6px}
.pup-facts{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.pup-facts li{padding:8px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.pup-facts li:last-child{border-bottom:none}
@media(max-width:720px){.pup-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .pup-sale{padding:22px 20px}
  .pup-sale h2{font-size:28px}
  .pup-body{padding:18px 18px 20px}
  .pup h3{min-width:0}
  .pup-top{flex-wrap:wrap}
}
@media(max-width:400px){
  .nav-tabs{gap:6px}
  .nav-tab{min-width:0;white-space:normal;text-align:center;line-height:1.15;padding:8px 6px;font-size:13px}
}
.gcta-card h2{font-size:26px;font-weight:500}
.gcta-card p{margin-top:8px;color:var(--ink-2);font-size:16.5px;max-width:44ch}
@media(max-width:560px){.gcta-card{padding:30px 24px}}