/* Dia Transport — diatransport.co.nz redesign, round 2 (design bench, 2026-11-06).
   The identity is the truck door: a coach-enamel green panel with the name
   sign-written in cream and the red "Ph." plate — the two true things in their
   old banner, redrawn with craft. Everything below the door is the paperwork
   of carriage set like it deserves framing: the rate card as a printed sheet,
   the billing rule as a quarter-hour ruler, the return fees as route strips.
   Red means the phone and nothing else. Kraft appears in exactly one place:
   the billed blocks of the ruler. No photos, no icons, no texture effects. */

:root{
  --door:    #2E5A27;  /* coach-enamel door green (from their site's green, deepened) */
  --door-deep:#24401F; /* pressed / cab */
  --cab:     #14201A;  /* footer ground */
  --green:   #3F6E34;  /* their action green, kept: buttons, links, focus */
  --cream:   #F2EDE0;  /* sign-writer's lettering cream */
  --ground:  #F4EFE3;  /* the page: warm cream, printed not glowing */
  --sheet:   #FCFAF4;  /* paperwork sheets lying on the ground */
  --ink:     #1A211C;
  --muted:   #4E5650;
  --rule:    #CFC8B6;
  --kraft:   #B8925E;  /* carton kraft: the ruler's billed blocks only */
  --red:     #C8161D;  /* the Ph. plate */
  --red-deep:#A51218;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", Verdana, sans-serif;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--ground); color:var(--ink); font:400 17px/1.6 var(--body); }
@media (min-width:900px){ body{ font-size:18px; } }

h1,h2,h3{ font-family:var(--display); margin:0 0 .35em; text-wrap:balance; }
h1{ font-weight:700; font-size:clamp(40px,5.6vw,80px); line-height:.95; letter-spacing:.005em; }
h2{ font-weight:700; font-size:clamp(34px,4.6vw,60px); line-height:.95; }
h3{ font-weight:600; font-size:clamp(22px,2.2vw,28px); line-height:1.1; }
p{ margin:.4em 0 1em; max-width:34em; }
.lead{ font-size:clamp(19px,1.6vw,22px); line-height:1.5; }
a{ color:var(--ink); text-decoration-color:var(--green); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--door-deep); }
a.tel{ color:var(--red); font-weight:700; text-decoration:none; white-space:nowrap; }
a.tel:hover{ color:var(--red-deep); }
strong{ font-weight:700; }
.fig{ font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.muted{ color:var(--muted); }
.src{ color:var(--muted); font-size:15px; max-width:44em; }
ul{ padding-left:1.2em; }
img{ max-width:100%; height:auto; }
hr{ border:0; border-top:1px solid var(--rule); margin:34px 0; }

.skip{ position:absolute; left:-999px; top:0; background:var(--green); color:#fff; padding:10px 16px; z-index:60; }
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--green); outline-offset:2px; }
.door :focus-visible, footer.site :focus-visible{ outline-color:var(--cream); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
section{ padding:clamp(56px,8vw,120px) 0 clamp(40px,6vw,88px); }

/* ── The door: header + title panel, one piece of painted steel ── */
.door{ background:var(--door); color:var(--cream); }
.door a{ color:var(--cream); text-decoration-color:var(--cream); }
header.site{ padding:26px 0 0; }
.masthead{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.lockup{ text-decoration:none; display:block; }
.lockup .mark{ display:block; width:clamp(210px,24vw,300px); height:auto; }
.lockup .line{ display:block; font-size:14px; color:var(--cream); opacity:.75; margin-top:6px; }
.head-right{ display:flex; align-items:center; gap:22px; padding-top:6px; }
.tel-landline{ font-family:var(--display); font-weight:600; font-size:21px; color:var(--cream) !important;
  text-decoration:none; font-variant-numeric:tabular-nums; }
@media (max-width:719px){ .tel-landline{ display:none; } }

.plate{ display:inline-flex; align-items:baseline; gap:.35em; background:var(--red); color:#fff !important;
  font:700 clamp(19px,2.4vw,24px)/1 var(--display); letter-spacing:.02em;
  padding:.34em .55em .38em; text-decoration:none !important; white-space:nowrap; }
.plate span{ font-size:.62em; font-weight:600; opacity:.85; }
.plate:hover{ background:var(--red-deep); }

nav.site{ display:flex; gap:clamp(18px,2.6vw,34px); overflow-x:auto; padding:18px 0 0; font-weight:700;
  font-size:16px; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 88%,transparent); }
nav.site a{ text-decoration:none; padding:6px 0 14px; border-bottom:3px solid transparent; white-space:nowrap;
  opacity:.85; }
nav.site a:hover{ opacity:1; }
nav.site a[aria-current="page"]{ border-bottom-color:var(--cream); opacity:1; }

/* the hero continues the door */
.door-hero{ padding:clamp(44px,6vw,96px) 0 clamp(56px,8vw,112px); }
.door-hero .wrap{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:1000px){ .door-hero .wrap{ grid-template-columns:7fr 5fr; gap:64px; } }
.door-hero h1{ color:var(--cream); font-size:clamp(42px,5.4vw,78px); max-width:15ch; margin-bottom:.4em; }
.door-hero p{ color:var(--cream); opacity:.92; }
.door-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }

/* the price, painted in its own keylined panel */
.price-panel{ border:2px solid var(--cream); padding:clamp(22px,2.6vw,36px); position:relative; }
.price-panel::after{ content:""; position:absolute; inset:6px; border:1px solid var(--cream); opacity:.45;
  pointer-events:none; }
.price-panel .cap{ font-family:var(--display); font-weight:600; font-size:clamp(19px,1.8vw,24px);
  letter-spacing:.02em; display:block; }
.price-panel .big{ font-family:var(--display); font-weight:700; font-size:clamp(64px,7vw,108px);
  line-height:.9; font-variant-numeric:tabular-nums; display:block; margin:8px 0 6px; }
.price-panel .big sup{ font-size:.48em; vertical-align:.55em; font-weight:700; }
.price-panel .sub{ display:block; font-size:16px; opacity:.85; max-width:30ch; }

/* inner pages: the page name is door lettering */
.door-title{ padding:clamp(30px,4vw,64px) 0 clamp(40px,5vw,76px); }
.door-title h1{ color:var(--cream); text-transform:uppercase; letter-spacing:.015em;
  font-size:clamp(52px,8vw,118px); line-height:.9; margin:0; }
.door-title p{ color:var(--cream); opacity:.92; margin-top:.8em; }

/* ── Buttons ── */
.btn{ display:inline-block; font-family:var(--display); font-weight:700; font-size:20px; text-transform:uppercase;
  letter-spacing:.03em; padding:15px 28px; text-decoration:none !important; border:0; cursor:pointer;
  background:var(--green); color:#fff !important; }
.btn:hover{ background:var(--door-deep); }
.btn:active{ transform:translateY(1px); }
.btn-call{ background:var(--red); }
.btn-call:hover{ background:var(--red-deep); }
.btn-cream{ background:var(--cream); color:var(--door-deep) !important; }
.btn-cream:hover{ background:#fff; }
.btn[disabled]{ background:var(--muted); cursor:default; }

/* ── The rate card: a printed sheet ── */
table.rates{ width:100%; border-collapse:collapse; background:var(--sheet); border-top:4px solid var(--ink); }
table.rates caption{ text-align:left; padding:14px 2px 0; font-size:15px; color:var(--muted); caption-side:bottom; }
table.rates th{ font-family:var(--body); font-weight:400; font-size:14.5px; color:var(--muted);
  text-align:left; padding:16px 18px 8px; border-bottom:2px solid var(--ink); }
table.rates td{ padding:20px 18px 22px; border-bottom:1px solid var(--rule); vertical-align:top; }
table.rates tr:last-child td{ border-bottom:0; }
table.rates .truck{ font-family:var(--display); font-weight:700; font-size:clamp(23px,2.2vw,28px); line-height:1; }
table.rates .crew{ display:block; font-family:var(--body); font-weight:400; font-size:15px; color:var(--muted); margin-top:4px; }
table.rates .money{ font-variant-numeric:tabular-nums; }
table.rates .money .inc{ font-family:var(--display); font-weight:700; font-size:clamp(28px,2.8vw,40px);
  line-height:1; display:block; white-space:nowrap; }
table.rates .money .inc i{ font-style:normal; font-size:.5em; font-weight:600; color:var(--muted); letter-spacing:.01em; }
table.rates .money .ex{ font-family:var(--body); font-weight:400; font-size:14.5px; color:var(--muted);
  display:block; white-space:nowrap; margin-top:6px; }
table.rates .note{ font-size:15px; color:var(--muted); }
@media (max-width:760px){
  table.rates{ display:flex; flex-direction:column; }
  table.rates tbody, table.rates tr, table.rates td{ display:block; }
  table.rates caption{ display:block; order:99; }
  table.rates thead{ position:absolute; left:-9999px; }
  table.rates tr{ border-bottom:1px solid var(--rule); padding:16px 16px 18px; display:grid;
    grid-template-columns:1fr auto; gap:2px 16px; }
  table.rates tr:last-child{ border-bottom:0; }
  table.rates td{ border:0; padding:0; }
  table.rates td:nth-child(1){ grid-column:1; grid-row:1; }
  table.rates td:nth-child(2){ grid-column:1; grid-row:2; font-size:15px; color:var(--muted); }
  table.rates td:nth-child(3){ grid-column:2; grid-row:1 / span 2; text-align:right; }
  table.rates td:nth-child(4), table.rates td:nth-child(5){ grid-column:1 / -1; font-size:15px; color:var(--muted); }
  table.rates td:nth-child(4){ margin-top:10px; }
  table.rates td[data-th]::before{ content:attr(data-th) " — "; font-size:inherit; color:var(--muted); }
  table.rates td:nth-child(3)[data-th]::before{ content:none; }
  table.rates .money .inc{ font-size:26px; }
  table.rates .money .ex{ margin-top:4px; }
}

/* ── The quarter-hour ruler ── */
.ruler-fig{ margin:26px 0 8px; }
.ruler-fig svg{ display:block; width:100%; height:auto; }
.ruler-ends{ display:flex; justify-content:space-between; gap:16px; font-family:var(--display); font-weight:700;
  font-size:15px; letter-spacing:.05em; text-transform:uppercase; margin-top:10px; }
.ruler-ends .m{ font-family:var(--body); font-weight:400; font-size:14.5px; color:var(--muted);
  text-transform:none; letter-spacing:0; display:block; margin-top:2px; }

/* ── Route strips (the towns) ── */
.towns{ display:grid; grid-template-columns:1fr; gap:12px 64px; max-width:52em; }
@media (min-width:760px){ .towns{ grid-template-columns:1fr 1fr; } }
.towns h3{ margin:18px 0 10px; font-weight:700; text-transform:uppercase; font-size:clamp(19px,1.8vw,22px);
  letter-spacing:.04em; }
.towns dl{ margin:0; position:relative; padding-left:34px; }
.towns dl::before{ content:""; position:absolute; left:8px; top:10px; bottom:10px; width:3px; background:var(--ink); }
.towns dl.sh1::before{ background:var(--door); }
.towns .row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:8px 0;
  position:relative; }
.towns .row::before{ content:""; position:absolute; left:-32px; top:50%; width:13px; height:13px;
  transform:translateY(-54%); border-radius:50%; background:var(--sheet); border:3.5px solid var(--ink); }
.towns dl.sh1 .row::before{ border-color:var(--door); }
.towns dt{ margin:0; font-size:17.5px; }
.towns dd{ margin:0; font-family:var(--display); font-weight:700; font-size:21px; font-variant-numeric:tabular-nums; }

/* ── Quotes: the quiet moment ── */
blockquote{ margin:0 0 34px; padding:0 0 0 clamp(34px,4vw,54px); max-width:34em; position:relative; }
blockquote::before{ content:"\201C"; position:absolute; left:0; top:-.12em; font-family:var(--display);
  font-weight:700; font-size:clamp(58px,6vw,84px); line-height:1; color:var(--door); }
blockquote p{ font-size:clamp(20px,2.4vw,27px); line-height:1.45; max-width:none; margin:0 0 .5em; }
blockquote footer{ font-size:16px; color:var(--muted); }

/* ── Sheets, ribbon, lists ── */
.sheet{ background:var(--sheet); border-top:4px solid var(--ink); padding:22px 24px; }
.ribbon{ background:var(--door); color:var(--cream); padding:clamp(22px,3vw,36px); max-width:640px;
  position:relative; }
.ribbon::after{ content:""; position:absolute; inset:6px; border:1px solid var(--cream); opacity:.45; pointer-events:none; }
.ribbon a{ color:var(--cream); }
.ribbon .fig{ font-size:1.5em; }
.svclist{ columns:1; max-width:44em; font-size:18px; }
@media (min-width:720px){ .svclist{ columns:2; column-gap:56px; } }
.svclist li{ break-inside:avoid; padding:5px 0; }
.review-links{ display:flex; gap:24px; flex-wrap:wrap; align-items:baseline; }

/* ── Estimator ── */
.est{ display:grid; grid-template-columns:1fr; gap:0 48px; }
@media (min-width:960px){
  .est{ grid-template-columns:7fr 5fr; }
  .est fieldset, .est > .src{ grid-column:1; }
  .est .sum-wrap{ grid-column:2; grid-row:1 / span 4; position:sticky; top:24px; align-self:start; }
}
.est fieldset{ border:0; margin:0 0 26px; padding:0; }
.est legend{ font-family:var(--display); font-weight:700; font-size:22px; padding:0 0 12px; }
.pick{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pick label{ display:block; border:1px solid var(--rule); background:var(--sheet); padding:16px; cursor:pointer;
  transition:border-color .12s; position:relative; }
.pick label:hover{ border-color:var(--ink); }
.pick input{ position:absolute; opacity:0; }
.pick label:has(input:checked){ background:var(--door); border-color:var(--door); color:var(--cream); }
.pick label:has(input:checked) .s{ color:var(--cream); opacity:.8; }
.pick label:has(input:focus-visible){ outline:3px solid var(--green); outline-offset:2px; }
.pick .t{ font-family:var(--display); font-weight:700; font-size:21px; display:block; }
.pick .s{ font-size:14.5px; color:var(--muted); display:block; min-height:2.5em; margin-top:2px; }
.pick .r{ font-family:var(--display); font-weight:600; font-size:17px; display:block; margin-top:8px;
  font-variant-numeric:tabular-nums; }
.stepper{ display:inline-flex; align-items:stretch; border:1px solid var(--ink); background:var(--sheet); }
.stepper button{ width:56px; font:700 26px/1 var(--body); background:transparent; border:0; cursor:pointer; }
.stepper button:hover{ background:var(--ground); }
.stepper output{ min-width:132px; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:24px; font-variant-numeric:tabular-nums;
  border-left:1px solid var(--ink); border-right:1px solid var(--ink); padding:10px 12px; }
.est .row2{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.est select{ font:inherit; padding:12px 14px; border:1px solid var(--ink); background:var(--sheet); min-width:250px; }
.est .check{ display:flex; gap:10px; align-items:center; font-weight:700; }
.est .check input{ width:22px; height:22px; accent-color:var(--green); }

.sum{ background:var(--sheet); border-top:4px solid var(--ink); font-variant-numeric:tabular-nums; }
.sum .line{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:11px 18px;
  border-bottom:1px solid var(--rule); }
.sum .line span + span{ font-family:var(--display); font-weight:600; font-size:20px; white-space:nowrap; }
.sum .line.total{ border-bottom:0; border-top:3px solid var(--ink); display:block; padding:16px 18px 18px; }
.sum .line.total span:first-child{ display:block; font-size:15px; color:var(--muted); }
.sum .line.total span + span{ font-family:var(--display); font-weight:700; font-size:clamp(40px,4.4vw,56px);
  line-height:1; display:block; margin-top:4px; }
.sum .line.idle{ color:var(--muted); border-bottom:0; }

/* ── Forms (booking) ── */
form .step{ background:var(--sheet); border-top:4px solid var(--ink); padding:clamp(20px,3vw,32px); margin:0 0 20px; }
form .step h2{ font-size:clamp(26px,3vw,36px); }
.fld{ margin:0 0 16px; max-width:34em; }
.fld label{ display:block; font-weight:700; margin-bottom:5px; }
.fld .help{ font-size:15px; color:var(--muted); margin:-2px 0 7px; }
.fld input[type=text], .fld input[type=tel], .fld input[type=email], .fld input[type=date],
.fld input[type=time], .fld input[type=number], .fld select, .fld textarea{
  width:100%; font:inherit; padding:12px 13px; border:1px solid var(--ink); background:#fff; }
.fld textarea{ min-height:100px; }
.opts{ display:flex; gap:20px; flex-wrap:wrap; }
.opts label{ display:flex; gap:9px; align-items:center; font-weight:400; }
.opts input{ width:21px; height:21px; accent-color:var(--green); }
.agree{ display:flex; gap:12px; align-items:flex-start; max-width:34em; border-top:3px solid var(--ink);
  padding:16px 2px 0; }
.agree input{ width:22px; height:22px; margin-top:2px; accent-color:var(--green); }
.steps-nav{ display:flex; gap:14px; align-items:center; margin:22px 0; flex-wrap:wrap; }
.progress{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--muted); }

/* ── Footer: the cab ── */
footer.site{ background:var(--cab); color:var(--cream); margin-top:clamp(56px,8vw,110px); padding:64px 0 110px; font-size:16px; }
footer.site .mark{ display:block; width:min(300px,70vw); height:auto; margin-bottom:10px; }
footer.site a{ color:var(--cream); text-decoration-color:var(--green); }
footer.site a.tel{ color:var(--cream); text-decoration:none; font-weight:700; }
footer.site .cols{ display:grid; gap:34px; grid-template-columns:1fr; margin-top:34px; }
@media (min-width:800px){ footer.site .cols{ grid-template-columns:2fr 1.4fr 1.2fr; } footer.site{ padding-bottom:72px; } }
footer.site h3{ color:var(--cream); font-size:20px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
footer.site .fine{ color:var(--cream); opacity:.6; margin-top:28px; font-size:14px; max-width:60em; }

/* ── Phone bottom bar ── */
.thumb{ position:fixed; left:0; right:0; bottom:0; display:flex; z-index:50;
  border-top:1px solid rgba(0,0,0,.2); padding-bottom:env(safe-area-inset-bottom); }
.thumb a{ flex:1; display:flex; align-items:baseline; justify-content:center; gap:.35em;
  font-family:var(--display); font-weight:700; font-size:20px; color:#fff; text-decoration:none; padding:17px 8px; }
.thumb .call{ background:var(--red); }
.thumb .call span{ font-size:.62em; font-weight:600; opacity:.85; }
.thumb .book{ background:var(--green); }
@media (min-width:900px){ .thumb{ display:none; } footer.site{ padding-bottom:72px; } }

/* ═══ Round 4: the editorial home — hero art, fixed topbar, tiles, picker ═══ */

body.home{ padding-top:0; }
body.inner{ padding-top:76px; }

/* fixed topbar; transparent over the hero sky, solid green once scrolled */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:40; transition:background .25s, box-shadow .25s; }
.topbar .bar{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px clamp(20px,4vw,48px); max-width:1480px; margin:0 auto; }
.topbar .word{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.01em;
  text-decoration:none; color:var(--ink); white-space:nowrap; }
.topbar nav{ display:flex; gap:clamp(14px,2vw,30px); align-items:center; }
.topbar nav a{ font-family:var(--display); font-weight:600; font-size:17.5px; letter-spacing:.02em;
  text-decoration:none; color:var(--ink); opacity:.88; padding:6px 0; border-bottom:2px solid transparent; }
.topbar nav a:hover{ opacity:1; }
.topbar nav a[aria-current="page"]{ border-bottom-color:var(--green); opacity:1; }
.topbar .plate{ font-size:18px; }
.topbar.solid{ background:var(--door); box-shadow:0 1px 0 rgba(0,0,0,.18); }
.topbar.solid .word, .topbar.solid nav a{ color:var(--cream); }
.topbar.solid nav a[aria-current="page"]{ border-bottom-color:var(--cream); }
.menu-btn{ display:none; font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.03em;
  background:none; border:2px solid currentColor; color:var(--ink); padding:7px 14px; cursor:pointer; }
.topbar.solid .menu-btn{ color:var(--cream); }
@media (max-width:860px){
  .topbar nav{ display:none; }
  .topbar nav.open{ display:flex; position:fixed; inset:60px 0 auto 0; background:var(--door);
    flex-direction:column; align-items:flex-start; gap:0; padding:10px clamp(20px,6vw,40px) 26px;
    box-shadow:0 12px 24px rgba(0,0,0,.25); }
  .topbar nav.open a{ color:var(--cream); font-size:26px; padding:12px 0; width:100%;
    border-bottom:1px solid rgba(242,237,224,.18); }
  .menu-btn{ display:inline-block; }
}

/* ── hero ── */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-start; overflow:hidden; }
.hero-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 88%; }
.hero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(244,239,227,.95) 0%, rgba(244,239,227,.55) 26%, rgba(244,239,227,0) 50%),
    linear-gradient(100deg, rgba(244,239,227,.95) 0%, rgba(244,239,227,.84) 32%, rgba(244,239,227,.4) 54%, rgba(244,239,227,0) 70%); }
.hero .wrap{ position:relative; z-index:2; width:100%; padding-top:clamp(108px,16vh,190px); padding-bottom:46vh; }
.hero h1{ font-size:clamp(44px,6.8vw,104px); line-height:.94; max-width:13ch; margin-bottom:18px; }
.hero h1 strong{ display:block; color:var(--door-deep); }
.hero .sub{ font-size:clamp(17px,1.5vw,21px); max-width:34em; margin:0 0 8px; }
.hero .fine-row{ font-size:15px; color:var(--muted); margin:0 0 24px; }
.hero .door-actions{ margin-top:0; }
.hero .trust{ margin-top:22px; font-size:16px; }
.hero .trust a{ font-weight:700; }
@media (max-width:700px){
  .hero{ min-height:0; display:block; }
  .hero-art{ position:static; aspect-ratio:1536/1024; height:auto; object-position:center; display:block; }
  .hero::before{ display:none; }
  .hero .wrap{ padding-top:96px; padding-bottom:26px; }
}

/* ── numbered sections, tiles ── */
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:10px; }
.sec-head .no{ font-family:var(--display); font-weight:700; font-size:clamp(17px,1.6vw,21px);
  color:var(--green); letter-spacing:.08em; }
.tiles{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:30px; }
@media (min-width:920px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
.tile{ text-decoration:none; color:var(--ink); display:block; }
.tile .art{ aspect-ratio:1/1; overflow:hidden; background:var(--sheet); }
@media (min-width:920px){ .tile .art{ aspect-ratio:4/3.4; } }
.tile .art img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.tile:hover .art img{ transform:scale(1.035); }
.tile h3{ margin:16px 0 4px; font-weight:700; font-size:clamp(22px,2vw,26px); }
.tile p{ margin:0 0 8px; color:var(--muted); font-size:16px; }
.tile .go{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.02em; }
.tile:hover .go{ text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:2px; }

/* ── the price picker ── */
.picker-seg{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 30px; }
.picker-seg button{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.02em;
  padding:12px 20px; background:var(--sheet); border:2px solid var(--ink); color:var(--ink); cursor:pointer; }
.picker-seg button[aria-pressed="true"]{ background:var(--door); border-color:var(--door); color:var(--cream); }
.picker-out .big-price{ font-family:var(--display); font-weight:700;
  font-size:clamp(72px,10vw,144px); line-height:.9; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.picker-out .big-price .per{ font-size:.26em; font-weight:600; letter-spacing:.01em; color:var(--muted); margin-left:.2em; }
.picker-out .facts{ display:flex; flex-wrap:wrap; gap:8px 28px; margin:16px 0 6px;
  font-family:var(--display); font-weight:600; font-size:clamp(17px,1.6vw,21px); }
.picker-out .facts span b{ font-weight:700; }
.picker-note{ color:var(--muted); font-size:15px; max-width:44em; }

/* ── pull quote ── */
.pull{ max-width:30em; }
.pull p{ font-family:var(--display); font-weight:600; font-size:clamp(28px,4vw,46px);
  line-height:1.12; max-width:none; margin:0 0 18px; text-wrap:balance; }
.pull footer{ font-size:16.5px; color:var(--muted); }

/* ── CTA band on art ── */
.cta-band{ position:relative; overflow:hidden; padding:clamp(64px,9vw,120px) 0; }
.cta-band .art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 70%; }
.cta-band::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(27,48,23,.97) 0%, rgba(27,48,23,.92) 46%, rgba(27,48,23,.42) 78%, rgba(27,48,23,.22) 100%); z-index:1; }
.cta-band .wrap{ position:relative; z-index:2; }
.cta-band h2, .cta-band p{ color:var(--cream); }
.cta-band p{ opacity:.92; }

/* ── reveals ── */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.6,.2,1); }
  .rv.in{ opacity:1; transform:none; }
}

/* inner pages: the solid topbar sits flush on the door-title panel */
body.inner{ padding-top:0; }
body.inner main > .door.door-title{ padding-top:calc(clamp(30px,4vw,64px) + 76px); }
body.inner main > section:first-child:not(.door){ padding-top:calc(clamp(56px,8vw,120px) + 76px); }