/* Page-specific sections. */

/* ================= HOME ================= */
.hero{padding:var(--panel-inset)}
.hero__panel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-panel);
  min-height:min(72vh,860px);
  display:flex;align-items:flex-end;
  padding:0 var(--gutter) clamp(3rem,7vw,7rem);
}
.hero__panel > picture img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero__panel::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 35%),
    linear-gradient(38deg,#000 29%,rgba(0,0,0,0) 57%);
}
.hero__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(2rem,5vw,5rem);
  width:min(100%,var(--container));margin-inline:auto;
}
.hero h1{color:var(--white);font-size:var(--step-7);max-width:22ch;text-wrap:balance}

.value-statement{padding-block:clamp(3rem,6vw,6rem);text-align:center}
.value-statement p{
  font-family:var(--font-accent);font-size:var(--step-3);
  line-height:1.45;color:var(--teal-900);
  max-width:46ch;margin-inline:auto;text-wrap:balance;
}

.why{background:var(--teal-800);color:var(--white);padding-block:var(--space-section) 0}
.why__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
/* Design breaks this as "Why Families" / "Choose ZipLaw". The second line is
   13 characters, so a 12ch measure could never hold it and split it again. */
.why__intro h2{max-width:14ch}
.why__intro p{max-width:52ch}
.why__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.4vw,2.5rem);
  margin-block-start:clamp(2.5rem,5vw,4.5rem);
  transform:translateY(clamp(2rem,5vw,5rem));
}
/* The why-cards keep the width they had before the text bands were narrowed,
   so their photographs are not scaled down with the copy. Wider than their
   parent, so centred with negative margins: margin-inline:auto resolves to
   zero on an over-wide child and would push them right. 100vw rather than 100%
   because the parent no longer carries the old width, and min() with the
   gutters keeps the breakout inside them when narrow.
   The built section on About deliberately does NOT do this — it was pulled
   into the band so the section reads at a single width. */
.why__grid{
  --media-band:min(100vw - var(--gutter)*2,var(--container-media));
  width:var(--media-band);
  margin-inline:calc((100% - var(--media-band))/2);
}

.why__spacer{height:clamp(4rem,9vw,9rem);background:var(--white)}
.why__grid .card img{aspect-ratio:16/10;object-fit:cover;width:100%}

.steps{padding:var(--panel-inset);margin-block:var(--space-section)}
.steps__panel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-panel);color:var(--white);
  padding:var(--space-section) clamp(1.5rem,7vw,9rem);
}
/* The source is a white wall lit diagonally. A flat scrim over it reads as dead
   grey, so it is multiplied into the teal instead: white areas keep the brand
   colour, the shadow falls stay as darker diagonals. Only ever darkens, so the
   white text's contrast can only improve. */
.steps__panel{background:var(--teal-800)}
.steps__panel > picture img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;
}
.steps__track{display:grid;gap:1.25rem;margin-block-start:clamp(2rem,4vw,3.5rem)}
.steps__track--3{grid-template-columns:repeat(3,1fr)}
.steps__track--2{grid-template-columns:repeat(2,1fr);margin-block-start:1.25rem}

.faq-section{
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--white);padding-block:var(--space-section);
  /* Matches the overlay below, so the area the backdrop no longer spans
     reads as the same colour rather than showing the page through it. */
  background:rgb(9,38,39);
}
/* Anchored to the top at its own aspect ratio, NOT stretched to the section's
   height: object-fit:cover against a section that grows as answers expand
   scaled the photo up and cropped its sides, which read as zooming in. */
.faq-section > picture img{
  position:absolute;top:0;left:0;z-index:-2;width:100%;height:auto;
  /* Dissolves into the section's ground: the photo now stops partway down,
     and a hard edge was visible in the gutters where it ended. */
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);
  mask-image:linear-gradient(to bottom,#000 55%,transparent);
}
.faq-section::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(9,38,39,.88)}

@media (max-width:1023px){
  .why__intro{grid-template-columns:1fr;gap:1.5rem}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .steps__track--3,.steps__track--2{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .hero{padding:0}
  .hero__panel{border-radius:0;min-height:auto;padding-block:9rem 3rem}
  .why__grid{grid-template-columns:1fr;transform:none}
  .why{padding-block-end:var(--space-section)}
  .why__spacer{display:none}
  .steps{padding:0;margin-block:0}
  .steps__panel{border-radius:0}
  .steps__track--3,.steps__track--2{grid-template-columns:1fr}
}

/* ================= SHARED PAGE HERO ================= */
.page-hero{padding:var(--panel-inset)}
.page-hero__panel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-panel);
  min-height:min(46vh,470px);
  display:flex;align-items:center;
  padding:6rem var(--gutter) 3rem;
}
.page-hero__panel > picture img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.page-hero__panel::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(9,38,39,.68)}
.page-hero h1{color:var(--white);font-size:var(--step-6)}

/* ================= ABOUT ================= */
.about-intro{padding-block:var(--space-section)}
.about-intro__grid{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.about-intro p + p{margin-block-start:1.5rem}
.about-intro__body p{color:var(--ink);max-width:70ch;font-size:var(--step-1);line-height:1.6}

.principles{
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--white);padding-block:var(--space-section);
}
.principles > picture img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.principles::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(1,12,12,.84)}
.principles__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.principles__list{display:grid;grid-template-columns:auto 1fr;gap:.7rem 2.5rem;margin:0}
.principles__list dt{font-weight:700;letter-spacing:.02em}
.principles__list dd{margin:0}
.principles__blocks{
  display:flex;flex-direction:column;gap:2.5rem;
  margin-block-start:clamp(2.5rem,6vw,5rem);max-width:38rem;
}
.principles__block{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;
  padding-block-end:2.5rem;border-block-end:1px solid rgba(255,255,255,.3);
}
.principles__block:last-child{border-block-end:0;padding-block-end:0}
.principles__block h3{color:var(--white)}
.principles__block p{margin-block-start:.75rem;color:rgba(255,255,255,.9)}
.principles__icon{
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--gold);border-radius:50%;color:var(--ink);
}

.built{padding-block:var(--space-section)}
.built__lede{max-width:52ch;margin-block-start:1.5rem;font-size:var(--step-1);color:var(--ink)}
.built__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);
  align-items:start;margin-block-start:clamp(2rem,4vw,3.5rem);
}
.built__reasons{list-style:none;padding:0;display:flex;flex-direction:column;gap:1.5rem;margin:0 0 2rem}
.built__reasons li{
  display:flex;align-items:center;gap:1rem;
  padding-block-end:1.5rem;border-block-end:1px solid var(--line);
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-900);
}
.built__reasons li:last-child{border-block-end:0;padding-block-end:0}
.built__reasons svg{flex:0 0 auto;color:var(--teal-800)}
.built__grid p{color:var(--body);line-height:1.7}
.built__illustration{background:var(--gold);border-radius:var(--radius-card);overflow:hidden}

@media (max-width:1023px){
  .about-intro__grid,.principles__top,.built__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .page-hero{padding:0}
  .page-hero__panel{border-radius:0}
  .principles__list{grid-template-columns:1fr;gap:.2rem 0}
  .principles__list dd{margin-block-end:1rem}
}

/* ================= CONTACT ================= */
/* The design sets the card flush with the hero's left edge (both x=11) and
   leaves a 12px gap below it (hero ends y=535, card starts y=547) - not an
   overlap. Hence panel-inset here rather than the centred container. */
.contact{
  padding-block:12px var(--space-section);
  padding-inline:var(--panel-inset);
}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,851fr) minmax(0,735fr);
  gap:clamp(2rem,6.9vw,83px);align-items:start;
  /* The section stays inset to the panel edge so the hero above keeps its
     alignment; the content inside it follows the narrowed band, the way the
     steps panel holds a centred container. */
  width:min(100%,var(--container-wide));margin-inline:auto;
}
.contact__card{
  background:var(--teal-800);color:var(--white);
  border-radius:var(--radius-panel);
  /* Design: 851px card holding 591px of content => 130px each side, i.e.
     content at 69% of the card. The cap is scaled with the narrowed band so
     that proportion holds rather than the padding swallowing the copy. */
  padding:clamp(1.75rem,7.5vw,90px);
}
.contact__card p{color:rgba(255,255,255,.94)}
.contact__card h2{font-size:var(--step-2);font-family:var(--font-body);font-weight:700}
.contact__intro{font-size:var(--step-1);line-height:1.6}
.contact__rows{display:flex;flex-direction:column;gap:1.5rem;margin-block:1.5rem 0}
.contact__rows > div{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.contact__rows svg{margin-block-start:.3rem;color:var(--gold);flex:0 0 auto}
.contact__rows code{
  font-size:.95em;background:rgba(255,255,255,.14);
  padding:.1em .4em;border-radius:4px;overflow-wrap:anywhere;
}
.contact__rule{border:0;border-block-start:1px dashed rgba(255,255,255,.45);margin-block:2rem}
.contact__hours{font-style:italic}
.contact__form h2{font-size:var(--step-6);font-family:var(--font-display);font-weight:400;margin-block-end:2rem}
.contact__phone{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;border-block-end:1px solid var(--teal-800)}
.contact__phone select{
  border:0;background:transparent;padding-block:.6rem;
  max-width:9rem;min-width:0;
}
.contact__phone input{border:0}
#form-status{margin-block-start:1rem;min-height:1.5rem}
#form-status[data-state='error']{color:#B3261E}
#form-status[data-state='ok']{color:var(--teal-800);font-weight:600}

@media (max-width:1023px){ .contact__grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:767px){
  .contact{padding-inline:var(--gutter);padding-block-start:var(--space-block)}
  .contact__card{border-radius:var(--radius-card)}
}

/* ================= LEGAL / PROSE ================= */
.page-head{
  padding-block:clamp(7rem,12vw,10rem) clamp(1.5rem,3vw,2.5rem);
  background:var(--teal-900);color:var(--white);
}
.page-head h1{color:var(--white)}

.prose{padding-block:var(--space-section);max-width:74ch;margin-inline:auto}
.prose h2{font-size:var(--step-3);margin-block:2.5rem 1rem;color:var(--teal-900)}
.prose h3{margin-block:1.75rem .75rem;color:var(--teal-900)}
.prose p,.prose li{color:var(--body);line-height:1.7}
.prose p + p{margin-block-start:1.1rem}
.prose ul,.prose ol{padding-inline-start:1.4rem;display:flex;flex-direction:column;gap:.6rem;margin-block:1rem}
.prose a{color:var(--teal-800);text-underline-offset:.25em}
.prose strong{color:var(--ink)}
.prose hr{border:0;border-block-start:1px solid var(--line);margin-block:2.5rem}
.prose table{width:100%;border-collapse:collapse;margin-block:1.5rem}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}

.notfound{padding-block:clamp(4rem,10vw,8rem);text-align:center}
.notfound p{color:var(--body);margin-block:1rem 2rem}
.page-head__sub{margin-block-start:1rem;max-width:62ch;color:rgba(255,255,255,.88)}
.prose__note{font-style:italic}

/* ================= BLOG INDEX ================= */
.blog-index{padding-block:var(--space-block) var(--space-section)}
.blog-index__heading{font-size:var(--step-3);color:var(--teal-900);margin-block-end:1.75rem}

.blog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.blog-card{display:flex}
.blog-card__link{
  display:flex;flex-direction:column;width:100%;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-card);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease,transform .2s ease;
}
.blog-card__link:hover{border-color:var(--teal-800);transform:translateY(-2px)}
/* A fixed ratio, so a thumbnail arriving late cannot shift the cards around it
   and the cards in a row stay aligned whatever the feed's images measure. */
.blog-card__media{aspect-ratio:1.91/1;background:var(--line)}
.blog-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.blog-card__body{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem 1.5rem 1.75rem;flex:1}
.blog-card__date{color:var(--body);font-size:var(--step--1)}
.blog-card__title{color:var(--teal-800);font-size:var(--step-2);font-weight:700;line-height:1.3}
.blog-card__subtitle{color:var(--body);line-height:1.6}
.blog-card__more{margin-block-start:auto;padding-block-start:.6rem;color:var(--teal-800);font-weight:600;font-size:var(--step--1)}
.blog-card__link:hover .blog-card__more{text-decoration:underline}

.blog-list__note{grid-column:1/-1;color:var(--body);line-height:1.7}
.blog-list__note a{color:var(--teal-800);text-underline-offset:.25em}
.blog-all{margin-block-start:var(--space-block)}
.blog-all a{color:var(--teal-800);font-weight:600;text-underline-offset:.25em}

@media (max-width:1023px){ .blog-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .blog-list{grid-template-columns:minmax(0,1fr)} }