/* SOUND FRAME — GUIDE. One expression type per section. */

/* shared product proof pieces (accordion body) */
.prod__copy { max-width: 58ch; font-size: 15px; line-height: 1.8; color: rgba(244, 239, 231, .86); }
.prod__hl { margin-bottom: 14px; font-weight: 300; font-size: clamp(20px, 2vw, 30px); line-height: 1.4; letter-spacing: -.02em; }
.plain { margin-top: 20px; display: grid; gap: 0; max-width: 460px; }
.plain li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.plain li:last-child { border-bottom: 1px solid var(--line); }
.prod__proof { margin-top: clamp(24px, 3vw, 40px); display: flex; align-items: flex-end; gap: clamp(8px, 1.2vw, 16px); }
.prod__proof .pf { min-width: 0; }
.prod__proof .pf--w { flex: 8 1 0; }
.prod__proof .pf--m { flex: 2.4 1 0; }
.prod__proof .pf--sq { flex: 3 1 0; }
.prod__proof .pf--mood { flex: 4 1 0; }
.prod__proof .pf--feedp { flex: 1.6 1 0; }
.prod__proof .pf--mood img, .prod__proof .pf--w img, .prod__proof .pf--m img { aspect-ratio: auto; }
.prod__proof--feeds .pf:nth-child(even) { margin-bottom: clamp(0px, 2vw, 28px); }
.prod__live { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.addon--g { margin-top: 22px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* hero: strong side visual, solid dark text column */
.gd-hero { display: grid; gap: clamp(32px, 5vw, 64px); padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(48px, 6vw, 96px); overflow: hidden; }
.gd-hero h1 { margin-top: 24px; font-weight: 300; font-size: clamp(30px, 3.9vw, 58px); line-height: 1.2; letter-spacing: -.03em; }
.gd-hero .sub { margin-top: clamp(22px, 2.6vw, 36px); max-width: 46ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.85; color: rgba(244, 239, 231, .86); }
.gd-hero__go { margin-top: clamp(24px, 3vw, 40px); }
.gd-hero__vis { margin: 0; }
.gd-hero__vis img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; background: var(--graphite); }
.br-d { display: none; }
@media (min-width: 900px) {
.gd-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.br-d { display: inline; }
}
/* local nav (same principle as WORK) */
.gd-nav { position: sticky; top: calc(var(--hdr) - 14px); z-index: 20; background: rgba(8, 8, 8, .9); border-block: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) {
.gd-nav { background: rgba(8, 8, 8, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.gd-nav__in { display: flex; gap: clamp(18px, 2.4vw, 36px); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.gd-nav__in::-webkit-scrollbar { display: none; }
.gd-nav a { flex: none; font-size: 11px; letter-spacing: .18em; color: var(--muted); padding: 15px 0 13px; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.gd-nav a:hover, .gd-nav a:focus-visible { color: var(--blue-soft); }
.gd-nav a[aria-current="true"] { color: var(--ivory); border-bottom-color: var(--ivory); }
/* section frame — rhythm varies per section */
.gd-sec { padding: clamp(80px, 10vw, 160px) var(--gutter); scroll-margin-top: calc(var(--hdr) + 40px); }
.gd-sec--ivory { background: var(--ivory); color: var(--ink); }
.gd-sec--charcoal { background: var(--charcoal); }
.gd-sec--ivory .label, .gd-sec--ivory .meta { color: var(--muted-dark); }
.gd-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4.5vw, 72px); }
.gd-head h2 { font-weight: 300; font-size: clamp(26px, 3.4vw, 52px); line-height: 1.22; letter-spacing: -.03em; }
.gd-head .lead { max-width: 58ch; margin-top: 18px; font-size: 15px; line-height: 1.85; color: rgba(244, 239, 231, .84); }
.gd-sec--ivory .gd-head .lead { color: #3f3a33; }
@media (min-width: 900px) {
.gd-head { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.gd-head--c { grid-template-columns: 1fr; max-width: 900px; }
}
/* 1 · pricing matrix */
.mx-wrap { overflow-x: auto; }
.mx { width: 100%; border-collapse: collapse; min-width: 760px; }
.mx th, .mx td { text-align: left; padding: 20px 16px 20px 0; border-top: 1px solid rgba(8, 8, 8, .22); vertical-align: baseline; }
.mx thead th { font-size: 11px; letter-spacing: .18em; font-weight: 400; color: var(--muted-dark); padding-block: 0 14px; border-top: 0; border-bottom: 1px solid var(--ink); }
.mx tbody th { font-weight: 400; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -.01em; white-space: nowrap; }
.mx tbody th a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); padding-bottom: 2px; }
.mx tbody th a:hover, .mx tbody th a:focus-visible { background-size: 100% 1px; }
.mx .m-t { font-size: 11px; letter-spacing: .18em; color: var(--muted-dark); }
.mx .m-u { font-size: 14px; color: #3f3a33; }
.mx .m-i { font-size: 13px; line-height: 1.6; color: #3f3a33; }
.mx .m-p { font-size: clamp(16px, 1.5vw, 20px); white-space: nowrap; text-align: right; padding-right: 0; }
.mx .m-p span { font-size: 11px; letter-spacing: .18em; color: var(--muted-dark); text-transform: uppercase; margin-right: 6px; }
.mx thead th:last-child { text-align: right; }
.mx tr:nth-child(3) td, .mx tr:nth-child(3) th { }
.mx .m-x th, .mx .m-x td { border-top: 1px solid var(--ink); }
.mx .m-x th a, .mx .m-x .m-u, .mx .m-x .m-i { color: #3f3a33; }
.mx-note { margin-top: clamp(28px, 3.4vw, 48px); max-width: 66ch; display: grid; gap: 10px; font-size: 14px; line-height: 1.8; color: #3f3a33; }
@media (max-width: 760px) {
.mx-wrap { overflow: visible; }
.mx { min-width: 0; display: block; }
.mx thead { display: none; }
.mx tbody, .mx tr { display: block; }
.mx tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; border-top: 1px solid rgba(8, 8, 8, .22); }
.mx th, .mx td { display: block; padding: 0; border: 0 !important; }
.mx tbody th { grid-column: 1; white-space: normal; }
.mx .m-p { grid-column: 2; grid-row: 1; }
.mx .m-t, .mx .m-u, .mx .m-i { grid-column: 1 / -1; }
.mx .m-t { display: none; }
}
/* 2 · product accordion */
.pd-list { border-bottom: 1px solid var(--line); }
.pd { border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr) + 60px); }
.pd summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; padding: 24px 28px 24px 0; position: relative; }
.pd summary::-webkit-details-marker { display: none; }
.pd summary::after { content: "+"; position: absolute; right: 0; top: 22px; font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
.pd[open] summary::after { transform: rotate(45deg); }
.pd__n { font-size: clamp(19px, 2vw, 28px); letter-spacing: -.02em; transition: color .25s; }
.pd summary:hover .pd__n, .pd summary:focus-visible .pd__n { color: var(--blue-soft); }
.pd__u { grid-column: 1; }
.pd__p { grid-column: 2; grid-row: 1; font-size: clamp(15px, 1.3vw, 18px); color: rgba(244, 239, 231, .9); }
.pd__b { display: grid; gap: clamp(24px, 3vw, 40px); padding: 8px 0 clamp(36px, 4vw, 64px); }
.pd__b--solo { grid-template-columns: 1fr; }
.pd .prod__copy { max-width: 58ch; font-size: 15px; line-height: 1.85; color: rgba(244, 239, 231, .9); }
.pd .prod__hl { margin-bottom: 14px; font-weight: 300; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.4; letter-spacing: -.02em; }
.pd .plain { margin-top: 20px; }
.pd .prod__proof { margin-top: 0; }
@media (min-width: 900px) {
.pd__b:not(.pd__b--solo) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.pd summary { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 11em; padding-right: 36px; }
.pd__u { grid-column: 2; }
.pd__p { grid-column: 3; text-align: right; }
}
/* 3 · HOW — two-panel comparison */
.cmp { display: grid; gap: 0; }
.cmp__c { border-top: 1px solid var(--ivory); padding: 24px 0 8px; }
.cmp__c h3 { margin: 10px 0 18px; font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.02em; }
.cmp__c .plain li { font-size: 15px; }
.cmp__op { font-size: 32px; font-weight: 200; padding: 12px 0; color: var(--muted); }
.cmp__r { margin-top: clamp(28px, 3vw, 44px); padding: 22px 0; border-block: 1px solid var(--line); display: grid; gap: 8px; }
.cmp__r strong { font-weight: 300; font-size: clamp(20px, 2.4vw, 34px); letter-spacing: -.02em; }
@media (min-width: 900px) {
.cmp { grid-template-columns: 1fr 64px 1fr; align-items: start; }
.cmp__op { padding: 54px 0 0; text-align: center; }
.cmp__r { grid-column: 1 / -1; }
}
/* 4 · WHICH FITS — decision list */
.fits li { border-top: 1px solid rgba(8, 8, 8, .22); }
.fits li:last-child { border-bottom: 1px solid rgba(8, 8, 8, .22); }
.fits a { display: grid; gap: 6px; padding: 26px 0; transition: padding .4s var(--ease); }
.fits a:hover, .fits a:focus-visible { padding-left: 14px; }
.fits .q { font-size: clamp(17px, 1.7vw, 24px); letter-spacing: -.01em; line-height: 1.45; }
.fits .r { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); display: flex; gap: 14px; align-items: center; }
.fits .r i { font-style: normal; transition: transform .3s var(--ease); }
.fits a:hover .r i, .fits a:focus-visible .r i { transform: translateX(6px); }
.fits__n { margin-top: clamp(24px, 3vw, 40px); max-width: 52ch; font-size: 15px; line-height: 1.8; color: #3f3a33; }
@media (min-width: 900px) {
.fits a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: baseline; gap: 40px; }
.fits .r { justify-content: space-between; }
}
/* 5 · INCLUDED — staircase (scope widens step by step) */
.stair { display: grid; gap: 0; }
.stair li { border-top: 1px solid var(--line); padding: 22px 0; display: grid; gap: 8px; }
.stair p:not(.meta) { max-width: 52ch; font-size: 15px; line-height: 1.8; color: rgba(244, 239, 231, .9); }
.stair .meta { color: var(--ivory); }
.stair + .faq { margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 900px) {
.stair { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2vw, 32px); align-items: start; }
.stair li { border-top: 0; border-left: 1px solid var(--line); padding: 4px 0 4px clamp(14px, 1.4vw, 22px); }
.stair li:nth-child(2) { margin-top: 40px; }
.stair li:nth-child(3) { margin-top: 80px; }
.stair li:nth-child(4) { margin-top: 120px; }
}
.faq--d { border-color: var(--line); }
.faq--d summary { font-size: 12px; letter-spacing: .2em; }
.faq--d .faq__b { padding-bottom: 24px; max-width: 62ch; }
.faq--d .faq__b p { padding: 0 0 16px; color: rgba(244, 239, 231, .86); }
.faq--d:last-child { border-bottom-color: var(--line); }
/* 6 · PROCESS — timeline */
.tl { display: grid; gap: 0; position: relative; }
.tl li { position: relative; padding: 0 0 28px 28px; border-left: 1px solid var(--line); }
.tl li::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ivory); }
.tl h3 { margin: 6px 0; font-weight: 400; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .02em; }
.tl p:not(.meta) { font-size: 14px; line-height: 1.75; color: rgba(244, 239, 231, .84); max-width: 30ch; }
@media (min-width: 900px) {
.tl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(20px, 2vw, 32px); }
.tl li { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.tl li::before { left: 0; top: -4px; }
}
/* 7 · PREPARE — checklist + accordion */
.chk li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(8, 8, 8, .16); font-size: 15px; line-height: 1.6; color: #2c2822; }
.chk li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--ink); font-size: 10px; line-height: 1; transform: translateY(2px); }
.prep { display: grid; gap: clamp(40px, 5vw, 72px); }
.prep h3 { margin-bottom: 14px; }
.prep__h2 { margin-top: clamp(32px, 4vw, 48px); }
.prep__acc .faq summary { font-size: clamp(15px, 1.4vw, 18px); padding: 18px 0; }
.prep__acc .faq p { padding-bottom: 20px; color: #3f3a33; }
@media (min-width: 900px) {
.prep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); }
}
/* 8 · REVISION — ledger */
.ledger { display: grid; gap: 0; border-top: 1px solid var(--ivory); }
.ledger__c { padding: 26px 0; border-bottom: 1px solid var(--line); }
.ledger__c h3 { font-weight: 400; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: .01em; }
.ledger__s { margin: 6px 0 18px; font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.02em; }
.ledger .plain li { font-size: 14.5px; line-height: 1.6; color: rgba(244, 239, 231, .92); }
.ledger__n { margin-top: clamp(28px, 3.4vw, 48px); max-width: 74ch; font-size: 15px; line-height: 1.85; color: rgba(244, 239, 231, .92); padding: 20px 0 0; border-top: 1px solid var(--line); }
.ledger__n strong { display: block; font-size: 11px; letter-spacing: .2em; font-weight: 400; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
@media (min-width: 900px) {
.ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger__c { padding: 28px clamp(16px, 2.4vw, 40px) 12px 0; border-bottom: 0; }
.ledger__c + .ledger__c { border-left: 1px solid var(--line); padding-left: clamp(16px, 2.4vw, 40px); }
}
/* 9 · DELIVERY — spec table */
.spec-wrap { overflow-x: auto; }
.dspec { width: 100%; border-collapse: collapse; }
.dspec th, .dspec td { text-align: left; vertical-align: top; padding: 20px 20px 20px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.75; font-weight: 400; }
.dspec thead th { font-size: 12px; letter-spacing: .2em; color: var(--ivory); padding-bottom: 14px; border-top: 0; border-bottom: 1px solid var(--ivory); }
.dspec tbody th { width: 18%; font-size: 11px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.dspec td { color: rgba(244, 239, 231, .92); max-width: 46ch; }
@media (max-width: 720px) {
.dspec, .dspec tbody, .dspec tr, .dspec th, .dspec td { display: block; width: auto !important; }
.dspec thead { display: none; }
.dspec tr { padding: 18px 0; border-top: 1px solid var(--line); }
.dspec th, .dspec td { padding: 0; border: 0; }
.dspec td:nth-of-type(1)::before { content: "DESIGN — "; color: var(--muted); font-size: 11px; letter-spacing: .14em; }
.dspec td:nth-of-type(2)::before { content: "WEB — "; color: var(--muted); font-size: 11px; letter-spacing: .14em; }
.dspec td[colspan]::before { content: none !important; }
.dspec td { margin-top: 8px; }
}
/* FAQ (shared look) */
.faq { border-top: 1px solid rgba(8, 8, 8, .22); }
.faq:last-child { border-bottom: 1px solid rgba(8, 8, 8, .22); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 28px 22px 0; position: relative; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 20px; font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover, .faq summary:focus-visible { opacity: .75; }
.faq p { padding: 0 0 24px; max-width: 62ch; font-size: 15px; line-height: 1.85; color: #3f3a33; }
.faq-list { max-width: none; }
.gd-sec--charcoal .faq, .gd-sec:not(.gd-sec--ivory) .faq { border-color: var(--line); }
/* closing statement — centred, text on a dark scrim over an approved cover */
.gd-close { position: relative; min-height: clamp(420px, 56vw, 720px); display: grid; place-items: center; text-align: center; padding: var(--sec) var(--gutter); overflow: hidden; isolation: isolate; }
.gd-close picture { position: absolute; inset: 0; z-index: -2; }
.gd-close img { width: 100%; height: 100%; object-fit: cover; }
.gd-close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 8, 8, .6); }
.gd-close h2 { font-weight: 300; font-size: clamp(28px, 4.6vw, 72px); line-height: 1.18; letter-spacing: -.03em; }
.gd-close p { margin-top: clamp(16px, 2vw, 28px); font-size: 15px; color: rgba(244, 239, 231, .9); }
.gd-close .lnk { margin-top: clamp(20px, 2.4vw, 32px); }