/* Breeder Web Studio, home page only.
   Loaded by index.html after site.css and scoped to body.home, so nothing here reaches the
   other 24 pages. Added 8 September 2026 from the design sample Mark approved: a drawn
   template site behind the check card in the hero, a dark price band, faded section numbers,
   a framed before-and-after, a sand block behind each work screenshot, a square portrait
   with a navy offset, numbered questions and a glow on the closing band.
   One new colour: --sand, a warm tint that flatters the navy and the paper. It carries no
   text, so it has no contrast ratio to clear. Everything with text on it keeps the tokens
   from theme.css. */

body.home{
  --sand:#E9DCC7;
  --sand-2:#F6EFE3;
  --navy-deep:#14264A;
  --num:color-mix(in srgb,var(--accent) 7%,transparent);
}

/* ---- hero ------------------------------------------------------------------ */
body.home .wash::before{background:
  radial-gradient(1000px 460px at 8% -14%, color-mix(in srgb,var(--wash-tint) 34%,transparent), transparent 66%),
  radial-gradient(760px 420px at 100% 6%, color-mix(in srgb,var(--sand) 92%,transparent), transparent 64%),
  linear-gradient(180deg, color-mix(in srgb,var(--wash-tint) 14%,transparent), transparent 72%)}
body.home .hero{padding-top:clamp(36px,4.6vw,62px);padding-bottom:clamp(36px,4.6vw,58px)}
body.home .hero-grid{align-items:center}
body.home .hero .lede{margin-top:16px}
body.home .hero-cta{margin-top:22px}

.stage{position:relative}
.mock{display:none}
@media (min-width:1000px){
  .stage{padding-top:150px}
  .mock{display:block;position:absolute;top:0;left:-70px;width:112%;background:var(--surface);border-radius:10px;
    border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;transform:rotate(-1.2deg);font-size:10px;
    box-shadow:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 30px 60px -20px color-mix(in srgb,var(--deep) 32%,transparent)}
  .stage > .card{position:relative;z-index:2;width:min(340px,100%);margin-left:auto}
}
.mock .m-bar{height:26px;background:var(--raise);display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--line)}
.mock .m-bar b{width:8px;height:8px;border-radius:50%;background:var(--edge);display:block}
.mock .m-url{margin-left:8px;background:var(--surface);border-radius:4px;padding:2px 10px;color:var(--muted);font-size:9px;flex:1;text-align:center}
.m-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line)}
.m-logo{font-family:var(--f-display);font-size:12px;color:var(--ink)}
.m-links{display:flex;gap:10px}.m-links i{width:26px;height:5px;border-radius:3px;background:var(--line);display:block}
.m-btn{width:56px;height:16px;border-radius:3px;background:var(--ink);display:block}
.m-hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 16px 14px;align-items:center}
.m-copy{display:grid;gap:7px}
.m-kick{width:40%;height:4px;background:var(--accent);border-radius:2px;opacity:.6}
.m-h{height:12px;width:96%;background:var(--ink);border-radius:3px;opacity:.85}.m-h.short{width:62%}
.m-p{height:5px;width:100%;background:var(--line);border-radius:3px}.m-p+.m-p{width:78%}
.m-cta{width:64px;height:18px;background:var(--accent);border-radius:3px;margin-top:4px}
.m-photo{position:relative;aspect-ratio:4/3;border-radius:6px;
  background:radial-gradient(60% 55% at 60% 55%,var(--sand),transparent 70%),radial-gradient(40% 40% at 30% 30%,var(--sand-2),transparent 70%),linear-gradient(160deg,#DFE6F2,#C9D3E6)}
.m-badge{position:absolute;left:8px;bottom:8px;background:var(--surface);color:var(--ink);font-size:8px;font-weight:600;padding:3px 7px;border-radius:999px;display:flex;align-items:center;gap:4px}
.m-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-ink)}
.m-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 14px}
.m-row span{height:30px;border-radius:4px;background:var(--raise);border:1px solid var(--line)}
.m-foot{display:flex;align-items:center;gap:6px;padding:8px 16px;border-top:1px solid var(--line);font-size:9px;font-weight:600;color:var(--ink-2)}
.m-foot em{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block}
body.home .hero .card{border-top:3px solid var(--accent);border-radius:12px}

/* ---- section numbers -------------------------------------------------------- */
body.home main > section{position:relative;overflow:hidden}
.num{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 2*var(--pad)));pointer-events:none;user-select:none}
.num span{font-family:var(--f-display);font-size:clamp(4.5rem,11vw,9rem);line-height:1;color:var(--num);font-weight:500;display:block;text-align:right}
@media (max-width:760px){.num span{font-size:18vw}}

/* ---- prices, a dark band ----------------------------------------------------- */
body.home #packages{background:var(--navy-deep);color:#fff;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(180deg,#14264A,#1A3160);background-size:22px 22px,auto}
body.home #packages .eyebrow{color:var(--sand)}
body.home #packages .eyebrow::after{background:var(--sand)}
body.home #packages h2{color:#fff}
body.home #packages .sec-sub{color:rgba(255,255,255,.78)}
body.home #packages .sec-sub a{color:#fff;border-color:rgba(255,255,255,.5)}
body.home .pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#fff;transition:transform .25s,background .25s}
body.home .pcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
body.home .pcard .pname,body.home .pcard .pprice{color:#fff}
body.home .pcard .pmo,body.home .pcard .pmeta{color:rgba(255,255,255,.66)}
body.home .pcard .pfor{color:rgba(255,255,255,.86)}
body.home .pcard .rec{background:var(--sand);color:var(--navy-deep)}
body.home .pcard.hot{background:var(--surface);border-color:var(--surface);color:var(--ink);
  box-shadow:0 2px 4px rgba(0,0,0,.1),0 30px 60px -20px rgba(0,0,0,.5)}
body.home .pcard.hot .pname,body.home .pcard.hot .pprice{color:var(--ink)}
body.home .pcard.hot .pmo,body.home .pcard.hot .pmeta{color:var(--muted)}
body.home .pcard.hot .pfor{color:var(--ink-2)}
body.home .pcard-btn{background:var(--surface);color:var(--navy-deep);border-color:transparent}
body.home .pcard-btn:hover{background:var(--sand);color:var(--navy-deep)}
body.home .pcard.hot .pcard-btn{background:var(--accent);color:#fff}
body.home .pcard.hot .pcard-btn:hover{background:var(--accent-2)}
body.home #packages .terms{color:rgba(255,255,255,.66)}
body.home .pcards-cta .btn{background:var(--surface);color:var(--navy-deep)}
@media (prefers-reduced-motion:reduce){body.home .pcard{transition:none}body.home .pcard:hover{transform:none}}

/* ---- proof, framed ----------------------------------------------------------- */
body.home .ba{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 30px 60px -20px color-mix(in srgb,var(--deep) 28%,transparent)}
body.home .ba-stage{border-radius:8px;box-shadow:none;border:0}
body.home .ba figcaption{padding:10px 6px 2px}

/* ---- editor ------------------------------------------------------------------ */
body.home #engine{background:var(--sand-2)}
body.home .fo-chip rect{fill:var(--surface)}

/* ---- work, a sand block behind each screenshot ------------------------------- */
body.home .work-shot{position:relative}
@media (min-width:1000px){body.home .work-shot::before{content:"";position:absolute;inset:14% -6% -6% 10%;background:var(--sand);border-radius:12px;z-index:-1}}
body.home .work-shot img{border-radius:10px;transition:transform .35s}
body.home .work-row:hover .work-shot img{transform:translateY(-4px)}
body.home .work-row{border-top:0;padding-top:12px}
body.home .work-row:last-child{border-bottom:0}
body.home .work-row + .work-row{margin-top:18px}
body.home .work-head h3 a{border-bottom:0}
body.home .work-head h3{font-size:clamp(1.5rem,2.4vw,1.9rem)}
@media (prefers-reduced-motion:reduce){body.home .work-shot img{transition:none}body.home .work-row:hover .work-shot img{transform:none}}

/* ---- the studio, square portrait with a navy offset -------------------------- */
body.home .who-shot{position:relative;width:150px}
@media (min-width:760px){body.home .who-shot{width:210px}body.home .who-grid{grid-template-columns:210px 1fr;gap:44px;align-items:center}}
body.home .who-shot img{border-radius:12px;border:0;box-shadow:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 26px 50px -22px color-mix(in srgb,var(--deep) 40%,transparent)}
body.home .who-shot::before{content:"";position:absolute;inset:-12px 12px 12px -12px;background:var(--accent);border-radius:12px;z-index:-1;opacity:.92}
body.home .who blockquote{margin:16px 0 0;padding-left:16px;border-left:3px solid var(--accent);font-family:var(--f-display);font-size:1.3125rem;line-height:1.35;color:var(--ink);max-width:40ch}

/* ---- questions, numbered ----------------------------------------------------- */
body.home .qa-grid{counter-reset:q}
body.home .qa{border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:0 14px}
body.home .qa::before{counter-increment:q;content:counter(q);font-family:var(--f-display);color:var(--accent);font-size:1.375rem;line-height:1.25;grid-row:1 / span 2;padding-top:2px}
body.home .qa h3{grid-column:2}
body.home .qa p{grid-column:2}

/* ---- closing band ------------------------------------------------------------ */
body.home .close{overflow:hidden}
body.home .close::before{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
body.home .close .wrap{position:relative}