/* ============================================================
   Dormitaliano 3.0 · Maison (M-3B) — FILE GENERATO da tools/build_maison3.py
   Si carica DOPO css/home3.css (token, nav, sezioni comuni, modulo e cookie).
   ============================================================ */
/* ============================================================
   M-3A · stili comuni ai prototipi Maison
   (si appoggia a tokens.css, hero-base.css e home.css approvati)
   ============================================================ */

/* ---- segnaposto foto prodotto: dichiarato, mai una foto finta ---- */
.ph-prod { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 8rem; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--c-surface) 0 14px, color-mix(in srgb, var(--c-surface) 82%, var(--c-line)) 14px 15px); color: var(--c-muted); }
.ph-prod__i { font: italic 300 clamp(3rem, 7vw, 6rem)/1 var(--f-serif); opacity: .45; }
.ph-prod__t { position: absolute; left: .7rem; bottom: .6rem; font: 400 9.5px/1.3 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; }
.m3-scen { position: fixed; left: .75rem; bottom: .75rem; z-index: 3000; background: #FFF1C2; color: #5A4300; font: 400 10px/1.3 var(--f-sans);
  letter-spacing: .06em; padding: .35rem .6rem; border-radius: 3px; pointer-events: none; }

/* ---- comune: intestazioni e piccoli elementi ---- */
.m3-count { font: 400 11px/1 var(--f-sans); letter-spacing: .12em; color: var(--c-muted); }
.m3-empty { padding: 2.5rem 0; color: var(--c-muted); font-style: italic; font-family: var(--f-serif); font-size: 1.3rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--c-line); border-radius: 100px; padding: .35rem .8rem; font: 400 11px/1.2 var(--f-sans); letter-spacing: .06em; color: var(--c-muted); background: none; }
button.chip { cursor: pointer; }
button.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-page); }
.m3-toast { position: fixed; left: 50%; bottom: 1.5rem; translate: -50% 1rem; z-index: 4000; max-width: min(92vw, 34rem); background: var(--c-ink); color: var(--c-page);
  padding: .9rem 1.2rem; font: 400 13px/1.5 var(--f-sans); border-radius: 3px; opacity: 0; transition: opacity .3s, translate .3s; pointer-events: none; }
.m3-toast.on { opacity: 1; translate: -50% 0; }

/* ============================================================ scheda prodotto */
.dt { position: fixed; inset: 0; z-index: 2500; visibility: hidden; }
.dt.on { visibility: visible; }
.dt__scrim { position: absolute; inset: 0; background: rgba(28, 24, 21, .45); opacity: 0; transition: opacity .45s var(--ease-soft); }
.dt.on .dt__scrim { opacity: 1; }
.dt__box { position: absolute; background: var(--c-page); color: var(--c-ink); display: grid; overflow: hidden; }
.dt__close { position: absolute; z-index: 3; top: .8rem; right: .8rem; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(248, 244, 238, .9); color: var(--c-ink); font: 300 26px/1 var(--f-serif); box-shadow: 0 0 0 1px var(--c-line); }
.dt__media { position: relative; background: var(--c-surface); overflow: hidden; }
.dt__media img, .dt__media .ph-prod { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt__media .ph-prod { display: grid; }   /* il segnaposto resta centrato */
.dt__body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 3vw, 3rem); display: grid; align-content: start; gap: 1rem; }
.dt__name { font: 300 clamp(2.2rem, 3.6vw, 3.4rem)/1.02 var(--f-serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.dt__desc { color: var(--c-muted); max-width: 34rem; }
.dt__ben { list-style: none; display: grid; gap: .55rem; border-top: 1px solid var(--c-line); padding-top: 1rem; }
.dt__ben li { padding-left: 1.4rem; position: relative; font-size: .95rem; }
.dt__ben li::before { content: ""; position: absolute; left: 0; top: .7em; width: .8rem; height: 1px; background: var(--c-ink); }
.dt__sizes { border: 0; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin-top: .5rem; }
.dt__sizes legend { font: 400 11px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .7rem; }
.dt__sizes label { position: relative; cursor: pointer; }
.dt__sizes input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dt__sizes span { display: block; border: 1px solid var(--c-line); padding: .55rem .85rem; font: 400 13px/1 var(--f-sans); border-radius: 2px; }
.dt__sizes input:checked + span { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-page); }
.dt__sizes input:focus-visible + span { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.dt__note { font-size: 12px; color: var(--c-muted); }
.dt__ctas { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: .75rem; }
button.pill { background: none; color: inherit; cursor: pointer; }
.dt-lock { overflow: hidden; }

/* A · pannello laterale editoriale */
.dt--a .dt__box { top: 0; right: 0; bottom: 0; width: min(560px, 100%); grid-template-rows: 44% 1fr;
  translate: 100% 0; transition: translate .6s var(--ease-soft); box-shadow: -30px 0 60px -40px rgba(0,0,0,.4); }
.dt--a.on .dt__box { translate: 0 0; }
@media (max-width: 760px) {
  /* su smartphone il pannello diventa un foglio dal basso */
  .dt--a .dt__box { top: auto; left: 0; height: 92svh; width: 100%; grid-template-rows: 34% 1fr; translate: 0 100%; border-radius: 14px 14px 0 0; }
  .dt--a.on .dt__box { translate: 0 0; }
  .dt--a .dt__box::before { content: ""; position: absolute; z-index: 4; top: .5rem; left: 50%; translate: -50% 0; width: 2.5rem; height: 4px; border-radius: 4px; background: rgba(248,244,238,.85); }
}

/* B · overlay immersivo a schermo intero */
.dt--b .dt__box { inset: 0; grid-template-columns: 58fr 42fr; opacity: 0; transition: opacity .5s var(--ease-soft); }
.dt--b.on .dt__box { opacity: 1; }
.dt--b .dt__body { padding: clamp(5rem, 9vh, 7rem) clamp(2rem, 4vw, 4.5rem) 3rem; align-content: center; }
.dt--b .dt__name { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
.dt--b .dt__pager { position: absolute; z-index: 3; left: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; gap: 1rem;
  background: rgba(248,244,238,.92); padding: .35rem .5rem; border-radius: 100px; font: 400 11px/1 var(--f-sans); letter-spacing: .14em; }
.dt--b .dt__pager button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--c-ink); }
@media (max-width: 760px) {
  .dt--b .dt__box { grid-template-columns: 1fr; grid-template-rows: 42svh 1fr; }
  .dt--b .dt__body { padding: 1.5rem var(--gutter) 6rem; align-content: start; }
  .dt--b .dt__pager { left: 0; right: 0; bottom: 0; justify-content: space-between; border-radius: 0; padding: .25rem var(--gutter); background: var(--c-page); box-shadow: 0 -1px 0 var(--c-line); }
}

/* C · sezione espandibile nella pagina */
.dt-inline { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 3vw, 3rem);
  background: var(--c-surface); padding: clamp(1.25rem, 2.5vw, 2.5rem); margin: .5rem 0 1rem; animation: dtIn .5s var(--ease-out); outline: none; }
.dt-inline__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-page); }
.dt-inline__media img, .dt-inline__media .ph-prod { width: 100%; height: 100%; object-fit: cover; }
.dt-inline__body { display: grid; gap: 1rem; align-content: start; padding-right: 3rem; }
@keyframes dtIn { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 760px) { .dt-inline { grid-template-columns: 1fr; } .dt-inline__media { aspect-ratio: 4 / 3; } .dt-inline__body { padding-right: 0; } }
.rm .dt__box, .rm .dt__scrim { transition: none !important; } .rm .dt-inline { animation: none; }

/* ============================================================ quiz */
.qz { min-height: 22rem; }
.qz__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.qz__bar { flex: 1; height: 1px; background: var(--c-line); position: relative; }
.qz__bar i { position: absolute; inset: 0 auto 0 0; background: var(--c-ink); transition: width .5s var(--ease-out); }
.qz__q { border: 0; padding: 0; }
.qz__t { font: 300 clamp(1.9rem, 3.2vw, 2.9rem)/1.05 var(--f-serif); letter-spacing: -.01em; margin-bottom: 1.5rem; }
.qz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.qz__o { text-align: left; font: 400 15px/1.35 var(--f-sans); color: inherit; background: none; border: 1px solid var(--c-line); padding: 1.05rem 1.2rem; cursor: pointer; transition: border-color .3s, background-color .3s; }
.qz__o:hover, .qz__o:focus-visible { border-color: currentColor; }
.qz__back { margin-top: 1rem; background: none; border: 0; cursor: pointer; }
.qz__res { display: grid; gap: 1rem; }
.qz__pick { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: center; }
.qz__pick .qz__img, .qz__pick .ph-prod { width: 9rem; height: 11rem; min-height: 0; object-fit: cover; }
.qz__ctas { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: .75rem; }
.qz__miss { font-size: 13px; color: var(--c-muted); }
.qz__again { justify-self: start; background: none; border: 0; cursor: pointer; }
.on-dark .qz__o, .on-dark .qz__bar { border-color: rgba(248,244,238,.25); }
.on-dark .qz__bar i { background: var(--c-page); }
.on-dark .muted { color: rgba(248,244,238,.7); }

/* ============================================================ sezioni comuni Maison */
.complete { display: grid; grid-template-columns: 6fr 6fr; gap: 0; background: var(--c-deep, #2A2521); color: var(--c-page); }
.complete__img { min-height: 26rem; position: relative; }
.complete__img img, .complete__img .ph-prod { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.complete__txt { padding: clamp(2.5rem, 6vw, 5.5rem); display: grid; gap: 1.1rem; align-content: center; }
.complete__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.complete .chip { color: rgba(248,244,238,.8); border-color: rgba(248,244,238,.3); }
.complete .t-link, .complete .pill { color: var(--c-page); }
@media (max-width: 860px) { .complete { grid-template-columns: 1fr; } .complete__img { min-height: 18rem; } }

.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--c-line); }
.faq details:last-child { border-bottom: 1px solid var(--c-line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font: 300 1.45rem/1.25 var(--f-serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1.1rem; font: 300 1.6rem/1 var(--f-sans); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.4rem; color: var(--c-muted); max-width: 44rem; }

.trust4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); border-top: 1px solid var(--c-line); padding-top: 2rem; }
.trust4 b { display: block; font: italic 300 2rem/1 var(--f-serif); margin-bottom: .5rem; }
.trust4 span { font-size: .875rem; color: var(--c-muted); }
.trust4 small { display: block; margin-top: .4rem; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8A5A1E; }
@media (max-width: 860px) { .trust4 { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; } }

.sec { padding-block: clamp(3.5rem, 7vw, 6rem); }   /* M-10e: prima clamp(4rem, 9vw, 8rem) */   /* solo verticale: il margine laterale resta quello di .grid */
.sec__head { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.flag { font-size: 11px; color: #8A5A1E; }
@media (max-width: 860px) { .sec.grid > * { grid-column: 1 / -1 !important; } .sec.grid > .stack { margin-top: 1.5rem; } }

/* ============================================================
   Maison 3.0 · Atelier (direzione II approvata in M-3A)
   Estratto dal prototipo approvato (prototypes/m3a/_build.py, S2 e ANATOMY_CSS);
   da qui in poi questa è la sorgente. Si aggiunge a m3a.css (schede, quiz, sezioni).
   ============================================================ */

/* ---- Dentro un Dormivario ---- */
.anat { background: #2B241F; color: var(--c-page); }
.anat__img img { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.anat__txt { padding-bottom: clamp(3rem, 7vw, 6rem); margin-top: -4rem; position: relative; }
.anat .lbl { color: rgba(248,244,238,.6); }
.anat__list { list-style: none; display: grid; gap: .9rem; }
.anat__list li { border-top: 1px solid rgba(248,244,238,.2); padding-top: .9rem; color: rgba(248,244,238,.82); }
.anat__flag { font-size: 11px; color: rgba(248,244,238,.5); margin-top: 1rem; }
.anat .dv { color: #E2B97A; text-decoration: underline dashed; text-underline-offset: 3px; }
@media (max-width: 860px) { .anat__txt > * { grid-column: 1 / -1 !important; } .anat__txt { margin-top: -1rem; } }

/* ---- hero, barra filtri, griglia, bande delle linee, questionario ---- */
.a-hero { position: relative; height: 78svh; min-height: 520px; display: grid; align-items: end; color: var(--c-on-photo); }
.a-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.a-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--c-scrim), .62), rgba(var(--c-scrim), 0) 55%), linear-gradient(rgba(var(--c-scrim), .3), rgba(var(--c-scrim), 0) 22%); }
.a-hero .grid { position: relative; z-index: 1; padding-bottom: clamp(2.5rem, 6vh, 4.5rem); width: 100%; }
.a-hero .t-display { grid-column: 1 / 9; font-size: clamp(3rem, 6vw, 6rem); }
.a-hero p { grid-column: 9 / 13; align-self: end; opacity: .9; }
/* la barra si ferma sotto la navigazione; quando la nav si nasconde (scorrendo in giù) sale in cima */
.tool { position: sticky; top: var(--nav-h); transition: top .6s var(--ease-soft); z-index: 40; background: color-mix(in srgb, var(--c-page) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.tool .grid { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; padding-block: .8rem; }
.tool__g { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tool__g > span { font: 400 10px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); margin-right: .2rem; }
.tool__sp { flex: 1; }
.nav.is-hidden ~ main .tool { top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem); padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); }
.card { display: grid; grid-template-rows: auto 1fr; gap: .9rem; }
.card__ph { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--c-surface); }
.card__ph img, .card__ph .ph-prod { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card:hover .card__ph img { transform: scale(1.04); }
.card__tag { position: absolute; z-index: 1; left: .7rem; top: .7rem; background: rgba(248,244,238,.92); font: 400 10px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; padding: .35rem .5rem; }
.card__b { display: grid; gap: .45rem; align-content: start; }
.card__n { font: 300 1.75rem/1.05 var(--f-serif); overflow-wrap: anywhere; }
.card__s { font-size: .9rem; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__m { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.card__a { display: flex; gap: 1.25rem; align-items: center; margin-top: .4rem; }
.card__a button { background: none; border: 0; cursor: pointer; padding-inline: 0; color: inherit; }
.card__open { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: none; border: 0; }
.card__open:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.lband { grid-column: span 2; position: relative; min-height: 100%; display: grid; align-content: end; gap: .8rem; padding: clamp(1.5rem, 3vw, 2.5rem); color: var(--c-page); background: #2A2521; }
.lband--warm { background: #6E5B49; }
.lband .t-display { font-size: clamp(2.4rem, 3.6vw, 3.6rem); }
.lband p { color: rgba(248,244,238,.75); max-width: 24rem; }
@media (max-width: 640px) { .lband { grid-column: 1 / -1; min-height: 16rem; } }
.qdraw { position: fixed; z-index: 2400; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #2A2521; color: var(--c-page); padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 3vw, 2.5rem) 2rem; overflow-y: auto; translate: 100% 0; transition: translate .6s var(--ease-soft); visibility: hidden; }
.qdraw.on { translate: 0 0; visibility: visible; }
.qdraw .dt__close { background: rgba(248,244,238,.15); color: var(--c-page); }
.qdraw .lbl { color: rgba(248,244,238,.6); }
.qdraw .pill, .qdraw .t-link { color: var(--c-page); }
.qdraw .qz__opts { grid-template-columns: 1fr; }
.card.is-match .card__ph { outline: 2px solid var(--c-ink); outline-offset: 4px; }
.feat { padding-block: 0 clamp(3rem, 6vw, 5rem); }
@media (max-width: 860px) {
  .a-hero { height: 64svh; } .a-hero .t-display, .a-hero p { grid-column: 1 / -1; }
  /* una sola riga che scorre di lato: prima i filtri, in fondo il questionario */
  .tool .grid { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .9rem; }
  .tool__g { flex-wrap: nowrap; flex: none; }
  .tool__g > span, #f-count { display: none; }
  .tool .chip, #open-quiz { white-space: nowrap; flex: none; }
  .tool__sp { display: none; }
  .cards { grid-template-columns: 1fr 1fr; gap: 1.5rem .9rem; }
  .card__n { font-size: 1.3rem; } .card__s { display: none; } .card__a .t-link { display: none; }
}

/* «Completa il tuo riposo»: carbone caldo, lo stesso di Inside the Comfort (#2B241F) */
.complete { background: #2B241F; }

/* 21/10/2026 · richiesta del cliente: piè di pagina della Maison in #1D1C19 (solo questa pagina: maison3.css) */
.foot { background: #1D1C19; border-top-color: rgba(248,244,238,.14); color: rgba(248,244,238,.72); }
.foot a, .foot button { color: rgba(248,244,238,.86); }
.foot a:hover, .foot button:hover { color: #F8F4EE; }
.foot a:focus-visible, .foot button:focus-visible { outline: 2px solid #F8F4EE; outline-offset: 3px; }
.foot img { filter: none; opacity: .92; }

/* ---- M-3B: raccordo nel sito ---- */
.lband .lbl, .lband .m3-count { color: rgba(248,244,238,.6); }
.card__q { font-size: .75rem; }
.qdraw .js-open-modal { color: var(--c-page); }
.m3-empty .t-link { margin-left: .5rem; }
.nav__links a[aria-current="page"] { background-size: 100% 1px; }
.maison-noscript { grid-column: 1 / -1; max-width: 40rem; padding: 2rem 0 4rem; color: var(--c-muted); font-size: 1.1rem; }
/* senza JavaScript: niente filtri né pulsanti che non possono funzionare */
.rm:not(.maison-ready) .tool__g, .rm:not(.maison-ready) #open-quiz { display: none; }
/* ---- M-10c: introduzione dell'offerta (compatta, prima del catalogo) ---- */
.mi { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); row-gap: clamp(1.75rem, 3vw, 2.5rem); align-items: stretch; }
.mi__h { grid-column: 1 / 6; display: grid; gap: 1rem; align-content: start; }
.mi__h p { max-width: 30rem; }
.mi__l { grid-column: span 3; display: grid; gap: .7rem; align-content: start; padding: 1.4rem 0 0; border-top: 1px solid var(--c-ink); color: inherit; text-decoration: none; }
.mi__l--dream { grid-column: 7 / 10; } .mi__l--sleep { grid-column: 10 / 13; }
.mi__l .h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.mi__l p { color: var(--c-muted); font-size: .95rem; line-height: 1.6; }
.mi__l .t-link { justify-self: start; margin-top: .3rem; }
.mi__more { grid-column: 7 / 13; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: baseline; color: var(--c-muted); font-size: .95rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); }
@media (max-width: 860px) { .mi__h, .mi__l--dream, .mi__l--sleep, .mi__more { grid-column: 1 / -1; } }
/* ---- M-10: hero più esplicita (per chi, che cosa, come chiedere) ---- */
.a-hero .a-hero__h { grid-column: 1 / 9; display: grid; gap: 1.1rem; }
.a-hero .a-hero__h .t-display { grid-column: auto; }
.a-hero__eb { font: 400 11px/1.4 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .82; }
.a-hero .a-hero__r { grid-column: 9 / 13; align-self: end; display: grid; gap: 1.25rem; }
.a-hero .a-hero__r p { grid-column: auto; }
.a-hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: center; }
.a-hero__ctas .pill, .a-hero__ctas .t-link { color: var(--c-on-photo); }
/* ---- M-10d: «Completa il tuo riposo» si espande nella pagina ---- */
.complete__more { grid-column: 1 / -1; padding: 0 clamp(2.5rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 861px) { .complete > .complete__img, .complete > .complete__txt { grid-row: 1; } }
.complete__more > summary { list-style: none; cursor: pointer; display: inline-flex; color: var(--c-page); border-color: rgba(248,244,238,.6); margin-top: -1rem; }
.complete__more > summary::-webkit-details-marker { display: none; }
.complete__more > summary::after { content: "+"; margin-left: .8rem; }
.complete__more[open] > summary::after { content: "−"; }
.complete__more > summary:focus-visible { outline: 2px solid var(--c-page); outline-offset: 3px; }
.complete__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--gutter); border-top: 1px solid rgba(248,244,238,.2); }
.complete__list li { padding: 1.25rem 0; border-bottom: 1px solid rgba(248,244,238,.14); display: grid; gap: .45rem; align-content: start; }
.complete__list b { font: 300 1.5rem/1.1 var(--f-serif); color: var(--c-page); }
.complete__list p { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(248,244,238,.72); }
@media (min-width: 861px) { .complete__more > summary { margin-left: calc(50% + clamp(2.5rem, 6vw, 5.5rem)); margin-top: calc(-1 * clamp(2rem, 5vw, 4.5rem)); } .complete__more { margin-top: 0; } }
@media (max-width: 860px) { .complete__more { padding: 0 var(--gutter) 2.5rem; } .complete__more > summary { margin-top: 0; } .complete__list { grid-template-columns: 1fr; } .complete__list li { padding: .9rem 0; } .complete__list b { font-size: 1.3rem; } .complete__list p { font-size: .88rem; } }
@media (max-width: 860px) { .a-hero::after { background: linear-gradient(0deg, rgba(var(--c-scrim), .82) 0%, rgba(var(--c-scrim), .55) 60%, rgba(var(--c-scrim), .2) 100%); }
  .a-hero { height: auto; min-height: 78svh; } .a-hero .a-hero__h, .a-hero .a-hero__r { grid-column: 1 / -1; } .a-hero .a-hero__r { margin-top: 1rem; } }