/* Dunwell & Daughters — homepage sections (concept, made-up company) */
/* ---------- hero ---------- */
.hero{padding-top:40px}
.h1{margin:0;font-size:min(212px,14.6vw);line-height:.9;font-weight:350}
.pill{display:inline-block;height:.78em;width:1.5em;border-radius:999px;object-fit:cover;vertical-align:-.04em;margin:0 .06em;background:var(--stucco)}
.pill.arch{border-radius:999px 999px 14px 14px;width:.9em;height:.92em}
.js .hero .pill-a{animation:pillOpen 1.4s var(--ease-io) .3s both}
.js .hero .pill-b{animation:archOpen 1.4s var(--ease-io) .55s both}
@keyframes pillOpen{from{clip-path:inset(0 47% round 999px)}to{clip-path:inset(0 0 round 999px)}}
@keyframes archOpen{from{clip-path:inset(46% 44% 0 44% round 999px 999px 14px 14px)}to{clip-path:inset(0 0 0 0 round 999px 999px 14px 14px)}}
.hero-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:40px;align-items:end}
.lead{margin:0;font-size:21px;line-height:1.55;color:var(--muted);max-width:520px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center}

.hero-img{margin-top:72px;position:relative}
.hero-img-wrap{position:relative}
.hero-arch{position:relative;height:640px;border-radius:340px 340px 0 0;overflow:hidden;background:var(--line)}
.hero-par{position:absolute;left:0;right:0;top:-14%;bottom:-14%;will-change:transform}
.hero-par img{display:block;width:100%;height:100%;object-fit:cover}
.hero-arch.clip-pre{transition:none}
.hero-arch.clip-run{transition:clip-path 1.6s var(--ease-io)}
.stamp-round{position:absolute;right:90px;top:-70px;width:190px;height:190px;filter:drop-shadow(0 14px 22px rgba(42,35,30,.18))}
.stamp-round .ring{transform-origin:100px 100px;animation:spin 48s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tiles{height:22px;background:repeating-linear-gradient(90deg,var(--tile) 0 34px,var(--cream) 34px 37px),var(--tile)}

/* ---------- who we are ---------- */
.who{padding-top:130px}
.mf{margin:26px 0 0;font-size:clamp(32px,4.6vw,66px);line-height:1.12;max-width:1180px}
.mf .pill{transition:transform 1.1s var(--ease),opacity .6s}
.mf.split-pre .pill{transform:scale(.2);opacity:0}
.mf.split-pre.is-in .pill{transform:none;opacity:1}
.mf.split-pre.is-in .pill:first-of-type{transition-delay:1s}
.mf.split-pre.is-in .pill:last-of-type{transition-delay:1.8s}

/* ---------- care / arch windows ---------- */
.care{margin-top:140px;background:var(--stucco);padding:120px 0 0}
.care-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.h2{margin:0;font-size:clamp(44px,6.7vw,96px);line-height:.95}
.care-head p{margin:0;max-width:360px;color:var(--muted);font-size:18px;line-height:1.55}
.arches{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:end}
.archwin{position:relative;border-radius:999px 999px 0 0;overflow:hidden;background:var(--deep);isolation:isolate}
.a1{height:560px}.a2{height:480px}.a3{height:520px}.a4{height:440px}
.archwin img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.archwin p{position:absolute;left:0;right:0;bottom:0;margin:0;padding:60px 24px 22px;background:linear-gradient(rgba(23,54,47,0),rgba(23,54,47,.94) 52%);color:var(--cream);
  transition:translate .9s var(--ease) .45s,opacity .7s .45s,transform .6s var(--ease)}
.archwin .k{color:var(--clay);display:block}
.archwin .t{display:block;font-size:34px;line-height:1.05;margin-top:6px}
.archwin .d{display:block;font-size:15px;line-height:1.45;color:var(--mist);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .45s,margin .6s var(--ease)}
.js .archwin[data-reveal="rise"]{transition:opacity 1s ease,transform 1.3s var(--ease)}
.js .archwin[data-reveal="rise"].pre{opacity:0;transform:translate3d(0,90px,0)}
.archwin.pre:not(.is-in) p{translate:0 40px;opacity:0}
@media (hover:hover){
  .archwin:hover img{transform:scale(1.07)}
  .archwin:hover .d{max-height:6em;opacity:1;margin-top:10px}
}
@media (hover:none){.archwin .d{max-height:none;opacity:1;margin-top:8px}}

/* ---------- visit note ---------- */
.note{background:var(--deep);color:var(--cream);padding:130px 0;overflow:hidden}
.note-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.note .k{color:var(--clay)}
.note h2{margin-top:20px;font-size:clamp(44px,6.1vw,88px);line-height:.98}
.note-lead{margin:26px 0 0;font-size:19px;line-height:1.6;color:var(--mist);max-width:460px}
.cards{position:relative;min-height:560px}
.post{position:absolute;background:var(--paper);border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:translate 1.4s var(--ease),rotate 1.4s var(--ease),opacity .9s,transform .5s var(--ease)}
.post-photo{left:0;top:40px;width:78%;height:420px;rotate:-5deg;overflow:hidden}
.post-photo img{width:100%;height:100%;object-fit:cover;display:block}
.post-letter{right:0;top:110px;width:78%;padding:34px 38px 30px;rotate:3deg;color:var(--ink);transition-delay:.18s,.18s,.18s,0s}
.cards.pre .post-photo{translate:-160px 70px;rotate:-18deg;opacity:0}
.cards.pre .post-letter{translate:180px 110px;rotate:14deg;opacity:0}
.lines{background:repeating-linear-gradient(transparent 0 38px,var(--line) 38px 39px),var(--paper)}
.stamp{position:absolute;right:26px;top:26px;width:86px;height:104px;background:var(--terra);padding:6px;border:4px dotted var(--paper);outline:2px solid var(--terra)}
.stamp div{width:100%;height:100%;border-radius:999px 999px 0 0;background:var(--clay);display:grid;place-items:end center;padding-bottom:8px;font:italic 22px var(--serif);color:var(--terra-d)}
.post-letter .k{color:var(--terra-d)}
.note-day{margin:10px 0 18px;font-size:40px;line-height:1}
.note-body{margin:0;font-size:18px;line-height:2.1;max-width:330px}
.reading{font-weight:700;color:var(--green);white-space:nowrap}
.note-sign{margin:14px 0 0;font-style:italic;font-size:26px;color:var(--terra-d)}

/* ---------- i. / ii. panels ---------- */
.panels{display:grid;grid-template-columns:1fr 1fr}
.panel{position:relative;isolation:isolate;overflow:hidden;color:var(--cream);padding:110px 64px 100px;min-height:520px}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease-io)}
.p1{--bg:var(--terra)}.p2{--bg:var(--green)}
.panel .big{margin:0;font-size:180px;line-height:.8;font-style:italic;transition:translate 1.3s var(--ease) .35s,opacity .9s .35s}
.p1 .big{color:var(--clay)}.p2 .big{color:var(--sea)}
.panel h3{margin:30px 0 14px;font-size:54px;line-height:1}
.panel > p:not(.big){margin:0 0 30px;font-size:18px;line-height:1.6;max-width:440px}
.panel > :not(.big){transition:translate .9s var(--ease) .6s,opacity .8s .6s,background-color .25s,box-shadow .35s}
.panel.pre::before{clip-path:inset(0 100% 0 0)}
.panel.pre .big{translate:-90px 0;opacity:0}
.panel.pre > :not(.big){translate:0 22px;opacity:0}
.p2.pre::before,.p2::before{transition-delay:.15s}

/* ---------- family ---------- */
.family{padding-top:140px}
.fam-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.fam-photo{position:relative}
.fam-arch{aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;background:var(--stucco)}
.fam-arch img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transition:transform 1.8s var(--ease)}
.fam-arch{transition:clip-path 1.5s var(--ease-io)}
.fam-photo.pre .fam-arch{clip-path:inset(100% 0 0 0 round 0)}
.fam-photo.pre .fam-arch img{transform:scale(1.14)}
.fam-cap{transition:opacity .8s .6s}
.fam-photo.pre .fam-cap{opacity:0}
.fam-cap{position:absolute;right:-44px;bottom:56px;width:176px;height:176px;border-radius:999px;object-fit:cover;border:8px solid var(--cream);box-shadow:0 20px 40px -24px rgba(42,35,30,.6)}
.family h2{margin:20px 0 34px;font-size:clamp(44px,6.4vw,92px)}
.names{list-style:none;margin:0;padding:0}
.names li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0}
.names li::before,.names li:last-child::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left;transition:transform 1.2s var(--ease-io)}
.names li::before{top:0}.names li:last-child::after{bottom:0}
.names .serif{font-size:38px;line-height:1.1}
.names .role{color:var(--muted);text-align:right}
.names li > *{transition:translate .9s var(--ease),opacity .7s}
.names.pre li::before,.names.pre li:last-child::after{transform:scaleX(0)}
.names.pre li > *{translate:0 16px;opacity:0}
.names li:nth-child(2)::before,.names li:nth-child(2) > *{transition-delay:.15s}
.names li:nth-child(3)::before,.names li:nth-child(3) > *{transition-delay:.3s}
.names li:last-child::after{transition-delay:.45s}
.fam-foot{margin:26px 0 0;color:var(--muted);line-height:1.6;font-size:17px;max-width:470px}

/* ---------- truck ---------- */
.truck{padding-top:140px}
.truck-frame{position:relative;height:560px;border-radius:28px;overflow:hidden;background:var(--line);isolation:isolate}
.truck-par{position:absolute;left:0;right:0;top:-13%;bottom:-13%;z-index:-2}
.truck-par img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.truck-frame::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,54,47,0) 45%,rgba(23,54,47,.62))}
.truck-over{position:absolute;left:40px;bottom:40px;right:40px;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.truck-over .serif{margin:0;font-size:clamp(44px,5vw,72px);line-height:.95;color:var(--cream);text-shadow:0 2px 30px rgba(23,54,47,.6)}
.area{margin:0;display:inline-flex;align-items:center;gap:10px;background:var(--cream);color:var(--ink);border-radius:999px;padding:14px 24px;font-weight:700}
.area svg{width:18px;height:18px;fill:none;stroke:var(--terra);stroke-width:2;flex:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .panel{padding:90px 40px 80px}
}
@media (max-width:900px){
  .hero{padding-top:22px}
  .hero-row{grid-template-columns:1fr;gap:26px;margin-top:26px}
  .lead{font-size:18px}
  .hero-ctas{justify-content:stretch;flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hero-img{margin-top:56px}
  .hero-arch{height:440px;border-radius:999px 999px 0 0}
  .stamp-round{right:6px;top:-46px;width:112px;height:112px}
  .who{padding-top:90px}
  .care{margin-top:100px;padding-top:84px}
  .care-head p{font-size:17px}
  .arches{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
  .a1{height:340px}.a2{height:300px}.a3{height:320px}.a4{height:280px}
  .archwin p{padding:48px 14px 16px}
  .archwin .k{font-size:10.5px;letter-spacing:.1em}
  .archwin .t{font-size:23px}
  .archwin .d{font-size:13px;line-height:1.4}
  .note{padding:96px 0 100px}
  .note-grid{grid-template-columns:1fr;gap:48px}
  .note-lead{font-size:17px}
  .cards{min-height:0}
  .post-photo{position:relative;top:0;width:84%;height:230px}
  .post-letter{position:relative;top:0;width:94%;margin:-70px 0 0 auto;padding:26px 22px 22px}
  .cards.pre .post-photo{translate:-90px 40px}
  .cards.pre .post-letter{translate:90px 60px}
  .stamp{right:16px;top:16px;width:58px;height:72px;padding:4px;border-width:3px}
  .stamp div{font-size:16px;padding-bottom:4px}
  .note-day{font-size:30px;margin-right:64px}
  .note-body{font-size:16px;line-height:2.25}
  .note-sign{font-size:22px}
  .panels{grid-template-columns:1fr}
  .panel{padding:72px 22px 64px;min-height:0}
  .panel .big{font-size:96px}
  .panel h3{font-size:40px;margin-top:22px}
  .panel > p:not(.big){font-size:17px}
  .p2.pre::before,.p2::before{transition-delay:0s}
  .family{padding-top:96px}
  .fam-grid{grid-template-columns:1fr;gap:40px}
  .fam-cap{right:-4px;bottom:28px;width:112px;height:112px;border-width:6px}
  .family h2{margin-bottom:22px}
  .names li{padding:16px 0}
  .names .serif{font-size:28px}
  .names .role{font-size:15px}
  .truck{padding-top:96px}
  .truck-frame{height:460px;border-radius:22px}
  .truck-par img{object-position:92% 42%}
  .truck-over{left:18px;right:18px;bottom:18px;gap:14px}
  .area{font-size:14px;padding:12px 16px;line-height:1.3}
.js [data-reveal].pre.is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

@media (prefers-reduced-motion:reduce){
  .js .hero .pill-a,.js .hero .pill-b,.stamp-round .ring{animation:none !important}
  .hero-arch{clip-path:none !important}
}
.reduce .cards.pre .post,.reduce .panel.pre::before{translate:none;clip-path:none}

/* ---------- multipage links (added with the full site) ---------- */
.archwin a.t{color:inherit;text-decoration:none}
.archwin a.t::after{content:"";position:absolute;inset:0;z-index:2}
.archwin a.t:focus-visible{outline:none}
.archwin:has(a.t:focus-visible){outline:3px solid var(--terra);outline-offset:4px}
.note-copy .tlink{margin-top:30px}
.fam-copy .tlink{margin-top:22px}
a.area{text-decoration:none;transition:background-color .25s,transform .35s var(--ease)}
a.area:hover{background:var(--clay)}
.archwin:focus-within .d{max-height:6em;opacity:1;margin-top:10px}