/* home-v2.css: base type, spacing and homepage layout (MVP-261105-02, design direction v1.1; v1.2 addendum: placeholders removed, also the base for the inner pages). All black (D4). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px;background:#0B0F12}
body.home-v2{margin:0;background:var(--ink);color:var(--on-dark);font:400 1.0625rem/1.55 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
.home-v2 main{display:block}
.home-v2 .wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.home-v2 main a{color:var(--amber-light);text-underline-offset:.18em}
.home-v2 a.btn-primary{color:var(--btn-ink)}
.home-v2 a.btn-secondary{color:var(--amber-light)}
.home-v2 a.btn-secondary:hover{color:var(--btn-ink)}
.home-v2 p,.home-v2 ul,.home-v2 ol,.home-v2 dl{margin:0}
.home-v2 h1,.home-v2 h2,.home-v2 h3,.home-v2 h4{margin:0;font-weight:600;color:var(--on-dark)}
.home-v2 h1{font-size:clamp(2.25rem,1rem + 4.4vw,4.25rem);line-height:1.05;letter-spacing:-.03em;max-width:13em}
.home-v2 h2{font-size:clamp(1.875rem,1rem + 2.6vw,3rem);line-height:1.1;letter-spacing:-.025em}
.home-v2 h3{font-size:clamp(1.375rem,1rem + 1vw,1.75rem);line-height:1.2;letter-spacing:-.02em}
.home-v2 h4{font-size:1.125rem;line-height:1.3;letter-spacing:-.015em}
.home-v2 .lede{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);line-height:1.4;letter-spacing:-.015em;max-width:30em}
.home-v2 .intro{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);line-height:1.4;letter-spacing:-.015em;color:var(--on-dark-muted);max-width:34em}
.home-v2 .small-muted,.home-v2 .footnote,.home-v2 .meta,.home-v2 .price-note{font-size:.875rem;line-height:1.45;color:var(--on-dark-muted)}
.home-v2 [tabindex="-1"]:focus{outline:none}
.home-v2 [tabindex="-1"]:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Sections and chapters */
.home-v2 section{padding-block:var(--s8)}
.home-v2 .chapter{border-top:1px solid var(--line)}
.home-v2 .raised{background:var(--ink-raised)}
.home-v2 .sec-head{margin-bottom:var(--s6);max-width:40rem}
.home-v2 .sec-head .intro{margin-top:var(--s3)}
.home-v2 .sec-head.centre{text-align:center;margin-inline:auto}
.home-v2 .sec-head.centre .intro{margin-inline:auto}
.home-v2 .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}

/* Label chip */
.home-v2 .chip{display:inline-block;font-size:.875rem;line-height:1.45;font-weight:500;color:var(--on-dark);border:1px solid var(--on-dark-muted);border-radius:999px;padding:4px 10px;max-width:100%}

/* Hero */
.home-v2 .hero{padding-top:var(--s8);padding-bottom:var(--s8)}
.home-v2 .hero .lede{margin-top:var(--s5)}
.home-v2 .actions{display:flex;flex-direction:column;gap:12px;margin-top:var(--s6)}
.home-v2 .hero .meta{margin-top:var(--s5)}

/* Work */
.home-v2 .card{display:grid;gap:var(--s5)}
.home-v2 .card-text{display:grid;gap:var(--s3);justify-items:start;align-content:start}
.home-v2 .card-text p{max-width:34em}
.home-v2 .card-text .tools{color:var(--on-dark-muted)}
.home-v2 .card-feature .card-slot{display:flex;justify-content:center}
.home-v2 .card-feature .vslot{width:min(100%,calc(70vh * 9 / 16));max-width:360px;margin-inline:auto}
.home-v2 .card-pair{display:grid;gap:var(--s7);margin-top:var(--s6)}
.home-v2 .footnote{margin-top:var(--s5)}
.home-v2 .work .footnote+p{margin-top:var(--s3)}

/* Services: tabs (enhanced) or stacked panels (no JS) */
.home-v2 .tablist{display:flex;width:100%;max-width:28rem;margin:0 auto var(--s6);border:1px solid var(--line-ui);border-radius:999px;overflow:hidden}
.home-v2 .tablist[hidden]{display:none}
.home-v2 .tablist [role=tab]{flex:1 1 0;min-height:48px;padding:0 12px;background:transparent;color:var(--on-dark-muted);font:500 1rem/1 var(--font);border:0;border-left:1px solid var(--line-ui);cursor:pointer;transition:color 150ms,background-color 150ms}
.home-v2 .tablist [role=tab]:first-child{border-left:0}
.home-v2 .tablist [role=tab]:hover{color:var(--on-dark)}
.home-v2 .tablist [role=tab][aria-selected=true]{background:var(--on-dark);color:var(--ink);box-shadow:inset 0 -2px 0 var(--amber)}
.home-v2 .tablist [role=tab]:focus-visible{outline-offset:-5px}
.home-v2 .panel{display:grid;gap:var(--s6)}
.home-v2 .panels>.panel+.panel{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--line)}
.tabs-ready .panels>.panel+.panel{margin-top:0;padding-top:0;border-top:0}
.tabs-ready .panel[hidden]{display:none}
.tabs-ready .panel.fade{animation:panelIn 160ms ease-out}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
.home-v2 .panel:focus-visible{outline:3px solid var(--amber);outline-offset:6px;border-radius:8px}
.home-v2 .panel-main,.home-v2 .panel-side{display:grid;gap:var(--s4);align-content:start}
.home-v2 .who{max-width:34em}
.home-v2 .list-h{font-weight:600;margin-top:var(--s2)}
.home-v2 .ticks{padding-left:1.2em;display:grid;gap:var(--s2);max-width:34em}
.home-v2 .ticks li::marker{color:var(--on-dark-muted)}
.home-v2 .price-block{background:var(--ink-high);border-radius:16px;padding:var(--s5)}
.home-v2 .prices{display:grid}
.home-v2 .prices .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:var(--s3) 0;border-top:1px solid var(--line)}
.home-v2 .prices .row:first-child{border-top:0;padding-top:0}
.home-v2 .prices dt{font-weight:500}
.home-v2 .prices dd{margin:0;font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.home-v2 .prices .row.ask{flex-direction:column;align-items:flex-start}
.home-v2 .prices .row.ask dd{font-size:1.0625rem;line-height:1.45;font-weight:400;letter-spacing:-.011em;white-space:normal;color:var(--on-dark)}
.home-v2 .price-note{margin-top:var(--s4)}
.home-v2 .addon{margin-top:var(--s4);background:var(--ink-high);border:1px solid var(--line-ui);border-radius:16px;padding:var(--s5);display:grid;gap:var(--s3)}
.home-v2 .addon-label{font-size:.875rem;font-weight:500;color:var(--on-dark-muted)}
.home-v2 .addon .limit{color:var(--on-dark-muted)}
.home-v2 .addon-price-label{font-weight:600}
.home-v2 .excl{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home-v2 .excl summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:500;list-style-position:inside}
.home-v2 .excl summary::-webkit-details-marker{color:var(--on-dark-muted)}
.home-v2 .excl ul{padding:0 0 var(--s4) 1.2em;display:grid;gap:var(--s2);color:var(--on-dark-muted)}
.home-v2 .panel-cta{margin-top:var(--s2)}
.home-v2 .under-panels{text-align:center;margin-top:var(--s7);display:grid;gap:var(--s3);justify-items:center}
.home-v2 .under-panels p{max-width:40em}

/* Process */
.home-v2 .process-head .intro{margin-top:var(--s3)}
.home-v2 .steps{list-style:none;padding:0;display:grid;gap:0}
.home-v2 .steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s4);position:relative;padding-bottom:var(--s5)}
.home-v2 .steps li:last-child{padding-bottom:0}
.home-v2 .steps li:not(:last-child)::before{content:"";position:absolute;left:11px;top:40px;bottom:8px;width:2px;background:var(--line)}
.home-v2 .step-n{font-size:1.5rem;line-height:1.2;font-weight:600;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.home-v2 .steps h3{font-size:1.375rem}
.home-v2 .steps p{margin-top:var(--s2);color:var(--on-dark-muted);max-width:34em}
.home-v2 .process-foot{display:grid;gap:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line)}
.home-v2 .two-col{max-width:none}
.home-v2 .payment{max-width:34em}

/* Trust */

.home-v2 .trust-text{display:grid;gap:var(--s4);align-content:start}
.home-v2 .trust-text>p{max-width:34em}
.home-v2 .check-h{margin-top:var(--s4)}
.home-v2 .checks{display:grid;gap:0}
.home-v2 .checks>div{padding:var(--s3) 0;border-top:1px solid var(--line)}
.home-v2 .checks dt{font-size:.875rem;font-weight:500;color:var(--on-dark-muted)}
.home-v2 .checks dd{margin:4px 0 0;max-width:34em}
.home-v2 .own{background:var(--ink-high);border-radius:20px;padding:var(--s5);display:grid;gap:var(--s4)}
.home-v2 .own-cols{display:grid;gap:var(--s4)}
.home-v2 .own-cols p{max-width:34em}

/* Final */
.home-v2 .final{text-align:center}
.home-v2 .final .wrap{display:grid;justify-items:center;gap:var(--s5)}
.home-v2 .final .lede{margin-inline:auto}
.home-v2 .final .small-muted{max-width:34em}

/* Phones */
@media(max-width:639px){
  .home-v2 .actions a,.home-v2 .panel-cta a,.home-v2 .final-cta a{display:flex;width:100%}
  .home-v2 .final-cta{width:100%}
  .home-v2 .tablist{max-width:none}
}
@media(max-width:720px){
  html:not(.js) .home-v2 .hero{padding-top:var(--s6)}
}
@media(max-height:700px) and (max-width:720px){
  .home-v2 .hero{padding-top:var(--s6)}
}
@media(max-width:359px){
  .home-v2 .prices .row{flex-direction:column;align-items:flex-start}
}

/* 640-1023: two-up cards and two-column lists */
@media(min-width:640px){
  .home-v2 .actions{flex-direction:row;flex-wrap:wrap}
  .home-v2 .card-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
  .home-v2 .two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}
  .home-v2 .own-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}
  .home-v2 .own{padding:var(--s7)}
  .home-v2 .price-block,.home-v2 .addon{padding:var(--s6)}
}

/* 12-column layouts from 1024 */
@media(min-width:1024px){
  .home-v2 section{padding-block:var(--s9)}
  .home-v2 .final{padding-block:var(--s10)}
  .home-v2 .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
  .home-v2 .sec-head{margin-bottom:var(--s7)}
  .home-v2 .sec-head .intro{margin-top:var(--s4)}

  .home-v2 .hero{min-height:min(88vh,760px);display:flex;align-items:center}
  .home-v2 .hero .grid{align-items:center;width:min(100% - 2.5rem,72rem)}
  .home-v2 .hero-text{grid-column:1/7}
  .home-v2 .hero-slot{grid-column:7/13}

  .home-v2 .card-feature{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
  .home-v2 .card-feature .card-slot{grid-column:1/5}
  .home-v2 .card-feature .card-text{grid-column:6/12}
  .home-v2 .card-feature .vslot{width:100%}

  .home-v2 .panel{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
  .home-v2 .panel-main{grid-column:1/8}
  .home-v2 .panel-side{grid-column:8/13}
  .home-v2 .panel-film{grid-column:1/13;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:center}

  .home-v2 .process-head{grid-column:1/6}
  .home-v2 .steps{grid-column:6/13}
  .home-v2 .process-foot{grid-column:1/13}

  .home-v2 .trust .grid{align-items:start}
  .home-v2 .trust-photo{grid-column:1/6}
  .home-v2 .trust-photo .trust-stage{width:100%}
  .home-v2 .trust-text{grid-column:7/13}
  .home-v2 .own{grid-column:1/13}

  .home-v2 .final .wrap{width:min(100% - 2.5rem,72rem)}
  .home-v2 .final .wrap>*{max-width:42rem}
}
@media(prefers-reduced-motion:reduce){
  .tabs-ready .panel.fade{animation:none}
  .home-v2 .tablist [role=tab]{transition:none}
}

/* A-017 (6 Nov 2026): each service tab shows its own Harbour Bakes demo film above the panel text */
.home-v2 .panel-film{display:grid;gap:var(--s4)}
.home-v2 .panel-film .film-label{display:grid;gap:var(--s3);justify-items:start}
.home-v2 .panel-film .film-label p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--on-dark-muted)}
/* v1.4 (critic 21 M2): card 2 holds the tall Build cut. Below 640 px (one column): a 9:16 slot up to 280 px wide. From 640 px (two columns): pillarboxed inside the same 16:9 frame as card 3, so the pair stays level */
.home-v2 .card-tall .vslot.r-9x16{width:min(100%,280px);margin-inline:auto}
@media (min-width:640px){
  .home-v2 .card-tall .card-slot{aspect-ratio:16/9;display:flex;justify-content:center}
  .home-v2 .card-tall .vslot.r-9x16{width:auto;height:100%;margin:0}
}
/* v1.4: the trust text is now one line, so the icon composition shrinks to match it instead of standing 580 px tall */
.home-v2 .trust-photo .trust-stage{width:min(100%,280px)}
@media (min-width:1024px){.home-v2 .trust .grid{align-items:center}.home-v2 .trust-photo .trust-stage{width:min(100%,280px);margin-inline:auto}}
