/* Digital Home page: styles only this page needs. Shared look comes from c.css. */

/* Hero: one office instead of ten tools. Words on the left, the opened-up house on the right,
   its edges fading into the paper like the painted world on the home hero. */
.dh-hero{padding-top:clamp(140px,12vw,180px)}
.dh-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.dh-hero-text{grid-column:1 / span 6;grid-row:1;position:relative;z-index:1}
.dh-title{margin:0;font:300 clamp(44px,5vw,70px)/1.06 var(--serif);letter-spacing:-.04em;color:#1b3832;text-wrap:balance}
.dh-lede{max-width:520px;margin:clamp(24px,2.4vw,32px) 0 0;font:300 clamp(20px,1.6vw,23px)/1.4 var(--serif);letter-spacing:-.015em;color:var(--deep);text-wrap:pretty}
.dh-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.dh-actions .f-btn{min-height:50px;padding:0 20px;font-size:var(--type-action)}
.dh-hero-art{grid-column:7 / -1;grid-row:1;margin:0 calc(var(--gutter) * -.5) 0 calc(var(--gap) * -1)}
.dh-hero-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 18%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  html.js .dh-title,html.js .dh-lede,html.js .dh-actions{animation:f-rise 1.1s var(--ease) both}
  html.js .dh-title{animation-delay:.06s}
  html.js .dh-lede{animation-delay:.2s}
  html.js .dh-actions{animation-delay:.28s}
  html.js .dh-hero-art{animation:dh-fade 1.6s var(--ease) .2s both}
}
@keyframes dh-fade{0%{opacity:0;transform:translateY(12px)}}
@media (max-width:960px){
  .dh-hero-text,.dh-hero-art{grid-column:1 / -1;grid-row:auto}
  .dh-hero-text{max-width:600px}
  .dh-hero-art{margin:40px calc(var(--gutter) * -1) 0}
}
@media (max-width:760px){
  .dh-hero{padding-top:136px}
  .dh-title{font-size:clamp(40px,11.5vw,56px);line-height:1.06}
  .dh-lede{font-size:21px}
  .dh-actions{display:grid;gap:12px}
  .dh-actions .f-btn{width:100%;min-height:52px;font-size:15px}
  .dh-hero-art{margin-top:32px}
}

/* Section 2: What's inside. Four ledger rows, bottom of the house first, in the home page row style:
   part name and its place in the picture on the left, the detail on the right. */
.dh-inside{margin-top:var(--section)}
.dh-inside-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.dh-inside-intro{grid-column:1 / span 6;max-width:600px}
.dh-inside-intro h2{margin:0 0 24px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.dh-inside-intro p{margin:0;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.dh-parts{grid-column:1 / -1;list-style:none;margin:var(--space-within) 0 0;padding:0;border-bottom:1px solid var(--line)}
.dh-part{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:28px 0;border-top:1px solid var(--line)}
.dh-part h3{grid-column:1 / span 4;margin:0;display:grid;gap:6px}
.dh-part-name{font:300 clamp(21px,1.75vw,25px)/1.25 var(--serif);letter-spacing:-.015em;color:var(--deep)}
.dh-part-where{font:400 14px/1.4 var(--sans);color:var(--small-print)}
.dh-part p{grid-column:6 / -1;max-width:640px;margin:0;font-size:18px;line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.dh-inside-note{grid-column:1 / span 8;margin:24px 0 0;font-size:15px;line-height:1.6;color:var(--quiet);text-wrap:pretty}
/* The quiet proof line, in the same style as the Section 3 compliance line. */
.dh-inside-proof{grid-column:1 / span 8;margin:40px 0 0}
@media (max-width:960px){
  .dh-inside-intro,.dh-inside-note,.dh-inside-proof{grid-column:1 / -1}
  .dh-part h3{grid-column:1 / span 4}
  .dh-part p{grid-column:5 / -1}
}
@media (max-width:760px){
  .dh-parts{margin-top:36px}
  .dh-part{grid-template-columns:1fr;row-gap:10px;padding:22px 0}
  .dh-part h3,.dh-part p{grid-column:1 / -1}
  .dh-part-name{font-size:22px}
  .dh-part p{font-size:17px}
  .dh-inside-intro p{font-size:17px}
  .dh-inside-proof{margin-top:32px}
}

/* Section 3: one job, start to finish. One calm reading column like the home story chapters;
   the compliance line sits apart under a short rule, as the proof. */
.dh-desk{margin-top:var(--section)}
.dh-desk-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.dh-desk-text{grid-column:1 / span 6;grid-row:1;max-width:600px}
.dh-desk-text h2{margin:0 0 32px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.dh-desk-text p{margin:0 0 22px;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
/* The proof sits in the right column, level with the story, as on the Ad-hoc fixes page. */
.dh-desk-grid{align-items:center}
.dh-desk-proof{grid-column:8 / -1;grid-row:1;margin:0}
@media (max-width:960px){
  .dh-desk-text,.dh-desk-proof{grid-column:1 / -1;grid-row:auto}
  .dh-desk-proof{margin-top:48px}
}
@media (max-width:760px){
  .dh-desk-text h2{margin-bottom:24px}
  .dh-desk-text p{font-size:17px}
  .dh-desk-proof{margin-top:40px}
}

/* Five desks (between Section 3 and Section 4): Section 2's ledger rows (.dh-parts, .dh-part) and lines, under a heading only. */
.dh-desks{margin-top:var(--section)}
.dh-desks-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.dh-desks-grid h2{grid-column:1 / span 6;max-width:600px;margin:0;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
@media (max-width:960px){
  .dh-desks-grid h2{grid-column:1 / -1}
}

/* Section 4: About two weeks. Then it's yours. A split: the heading left, staying in place while you scroll
   (like the Chapter 3 photo frame), and three paragraphs right in the Section 3 body style. No rows, no lines. */
.dh-build{margin-top:var(--section)}
.dh-build-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.dh-build-title{grid-column:1 / span 5;position:sticky;top:120px;margin:0;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.dh-build-text{grid-column:7 / -1;max-width:600px}
.dh-build-text p{margin:0 0 22px;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.dh-build-text p:last-child{margin-bottom:0}
@media (max-width:960px){
  .dh-build-title{grid-column:1 / -1;position:static;margin-bottom:32px}
  .dh-build-text{grid-column:1 / -1}
}
@media (max-width:760px){
  .dh-build-title{margin-bottom:24px}
  .dh-build-text p{font-size:17px}
}

/* Section 5: Every price, on the page. Chapter 6's price rows from c.css (name, detail, price),
   with the same thin lines and row spacing as Section 2. A small serif subheading opens the second list. */
.dh-costs{margin-top:var(--section);scroll-margin-top:104px}
.dh-costs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.dh-costs-intro{grid-column:1 / span 6;max-width:600px}
.dh-costs-intro h2{margin:0 0 24px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.dh-costs-intro p{margin:0;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.dh-prices{margin-top:var(--space-within)}
.dh-prices .f-todo-row{padding:24px 0}
/* The second group opens like the first: its heading above, then rows. The first group has no closing line,
   so only one line ever sits between the groups (no lines sandwiching the heading). */
.dh-prices:not(.dh-prices--run){border-bottom:0}
.dh-costs-then{grid-column:1 / -1;margin:clamp(56px,6vw,80px) 0 0;font:300 clamp(22px,2vw,28px)/1.25 var(--serif);letter-spacing:-.015em;color:var(--deep)}
.dh-prices--run{margin-top:24px}
/* "Stop paying me and nothing breaks." The home page's .f-allin-punch look (large serif, deep green rule on the left). */
.dh-costs-punch{grid-column:1 / span 8;margin:56px 0 0}
/* Small print: smaller and lighter than the row text. #6b716d is the lightest grey that still passes AA contrast on the paper. */
/* Small print as two tidy notes side by side under the quote: the terms on the left, the add-on on the right. */
.dh-costs-small{grid-column:1 / span 7;margin:40px 0 0;max-width:62ch;font-size:15px;line-height:1.65;color:var(--small-print);text-wrap:pretty}
.dh-costs-small + .dh-costs-small{grid-column:9 / -1;grid-row:span 1;align-self:start}
@media (max-width:960px){
  .dh-costs-intro,.dh-costs-small,.dh-costs-punch{grid-column:1 / -1}
  .dh-costs-small + .dh-costs-small{grid-column:1 / -1;margin-top:16px}
}
@media (max-width:760px){
  .dh-costs-intro p{font-size:17px}
  .dh-costs-then{font-size:22px}
  .dh-prices{margin-top:36px}
  .dh-prices .f-todo-row{padding:22px 0}
  .dh-costs-then{margin-top:48px}
  .dh-prices--run{margin-top:16px}
  .dh-costs-punch{margin-top:40px}
}

/* Gate 6 Oct (Simon): no fade from invisible. */
@keyframes dh-fade{0%{transform:translateY(12px)}}