/* Local v10 typography and tier refinement. Not published. */
:root {
 --type-body: 14px;
 --type-section: clamp(30px,3.1vw,42px);
 --type-narrative: clamp(28px,2.6vw,35px);
 --type-card: 23px;
 --type-label: 11px;
 --reading-measure: 64ch;
}
/* Six more pixels above and below move the whole header row together. */
body[class] header, body[class] header.scrolled,
body.hero-dark header:not(.scrolled), body.page-index.hero-dark header:not(.scrolled) {
 padding: 8px 4vw;
}
body:is(.page-index,.page-portfolio).hero-dark header:not(.scrolled) {
 background: transparent; color: #fff; backdrop-filter: none; box-shadow: none;
}
body:is(.page-index,.page-portfolio).hero-dark header:not(.scrolled) .brand-lockup { --wordmark-color: #fff; }
body:is(.page-index,.page-portfolio).hero-dark header:not(.scrolled) .burger { color: #fff; }
body:is(.page-index,.page-portfolio).hero-dark header:not(.scrolled) .nav-cta {
 background: transparent; color: #fff; border-color: #ffffffb3;
}
body:is(.page-index,.page-portfolio).hero-dark header:not(.scrolled) .nav-cta:hover {
 background: #fff; color: var(--brand-pink); border-color: #fff;
}
body.page-portfolio main .hero :is(h1,.flourish,p) { color: #fff; }
body:is(.page-index,.page-portfolio).hero-dark header:not(.scrolled) :is(a,button):focus-visible {
 outline: 2px solid #fff; outline-offset: 5px;
}
/* Stable roles, with short display copy centered and reading copy aligned left. */
body[class] main p { font-size: var(--type-body); line-height: 1.8; }
body[class] main h2 { font-size: var(--type-section); line-height: 1.22; max-width: 26ch; margin-inline: auto; }
body[class] main h3 { font-size: var(--type-card); line-height: 1.3; }
body:not(.page-index) main .hero h1 { font-size: clamp(36px,4.2vw,56px); line-height: 1.16; max-width: 22ch; }
body:not(.page-index) main .hero h1.long-hero-heading { font-size: clamp(34px,3.6vw,48px); max-width: 25ch; }
body[class] main .hero p { max-width: 58ch; margin-inline: auto; text-align: center; }
body.page-index main .hero p.hero-sub { max-width: 740px; }
body.page-index main .exceptional h2 { font-size: clamp(30px,3vw,40px); max-width: 26ch; }
body[class] main h2.narrative-heading { font-size: var(--type-narrative); max-width: 36ch; line-height: 1.3; }
body[class] main .reading-copy { text-align: left; max-width: var(--reading-measure); margin-inline: auto; }
body[class] main .hero .reading-copy, body[class] main .final .reading-copy { text-align: center; }
body.page-index main :is(.exceptional,.standout) p { max-width: 76ch; text-align: center; }
.desktop-copy-line { display: inline; }
body[class] main :is(.exceptional,.standout) h2 { margin-bottom: 24px; }
body[class] main :is(.exceptional,.standout) p { margin-top: 0; }
body[class] main :is(.feature,.faq-card,.mini,.light-way,.svc,.case-intro,.case-story,.case-website) :is(h2,h3,p) {
 text-align: left;
}
body[class] main :is(.feature,.faq-card,.mini) h3 { margin: 0 0 14px; }
body[class] main :is(.feature,.faq-card,.mini) p { margin: 0; }
body[class] main .feature p, body[class] main .faq-card p { line-height: 1.75; }
body[class] main .checklist { max-width: var(--reading-measure); }
body[class] main .checklist li { text-align: left; font-size: var(--type-body); line-height: 1.8; }
body[class] main .eyebrow { font-size: var(--type-label); line-height: 1.6; letter-spacing: .12em; }
body[class] main .founder p { max-width: 58ch; margin: 0 0 18px; font-size: var(--type-body); line-height: 1.85; }
body[class] main .founder h2 { margin: 0 0 24px; }
body[class] main .svc h2 { max-width: 26ch; margin: 0 0 14px; font-size: clamp(30px,2.8vw,38px); }
.svc h2 .flourish { display: block; font-size: .72em; margin-top: 8px; line-height: 1.35; }
body[class] main .svc p { margin: 0; max-width: 58ch; }
.svc > div { width: 100%; max-width: 62ch; text-align: left; }
.svc .meta { color: #fff; font-size: 11px; letter-spacing: .12em; margin-bottom: 16px; }
.svc::after { background: linear-gradient(180deg,rgba(22,14,18,.2),rgba(22,14,18,.58) 35%,rgba(22,14,18,.9)); }
.svc .btn { margin-top: 24px; }
.feature-grid, .faq-grid, .tier-mini { margin-top: 44px; }
.feature, .faq-card, .mini { padding: 32px 28px; min-width: 0; }
body[class] main .case-intro h1 { text-align: left; }
body[class] main .case-intro p { margin-inline: 0; }
body[class] main .case-scope h2 { font-size: 22px; margin-inline: 0; }
body[class] main .case-tier-guide h2 { font-size: 36px; }
body[class] main .case-tier-options a { font-size: 14px; }
body[class] main .legal-section :is(h2,p) { text-align: left; margin-inline: 0; max-width: none; }
body[class] main .legal-section h2 { font-size: 25px; margin-bottom: 16px; }
body[class] main .legal-section p { font-size: 15px; line-height: 1.85; }
.legal-copy { max-width: 70ch; }
.page-inquire label { font-size: 13px; letter-spacing: .01em; text-transform: none; line-height: 1.5; font-weight: 500; }
.page-inquire :is(input,textarea,select) { font-weight: 400; font-size: 16px; }
.page-inquire .checks label { font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.page-inquire .checks { gap: 12px; }
.cols > *, .feature-grid > *, .faq-grid > *, .case-intro > *, .case-tier-options > * { min-width: 0; }
/* The four offers are a compact comparison, with photography above clean copy. */
.tiers { padding-block: 80px; }
.tiers > .wrap { max-width: 1360px; padding-inline: 5vw; }
.tiers .grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; align-items: stretch; }
.tiers h2 { margin-bottom: 36px; }
.tiers .tier {
 display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
 min-height: 0; height: auto; padding: 0; background: #fffaf5; color: var(--ink);
 border: 1px solid #98434426; border-radius: 2px; overflow: hidden;
}
.tiers .tier::before, .tiers .tier::after { display: none; }
.tiers .tier > img {
 position: static; inset: auto; width: 100%; height: 150px; aspect-ratio: auto;
 flex: 0 0 150px; object-fit: cover; opacity: 1; filter: none; transform: none !important; will-change: auto !important;
}
.tiers .tier:hover > img { transform: none; }
.tiers .tier-copy { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 20px 20px; grid-template-rows: none; }
body.page-index main .tiers .tier-copy :is(h3,p) { width: 100%; text-align: left; margin: 0; max-width: none; }
body.page-index main .tiers .tier-copy h3 { font-size: 23px; line-height: 1.25; color: var(--ink); }
body.page-index main .tiers .tier-copy .tier-subtitle {
 font-family: var(--body); font-style: normal; font-size: 12px; line-height: 1.6;
 font-weight: 500; color: var(--brand-pink);
}
body.page-index main .tiers .tier-copy .tier-description {
 font-size: 14px; line-height: 1.7; min-height: 3.4em; color: var(--ink-soft);
}
.tiers .tier-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; min-height: 44px; }
.tiers .tier .meta { color: var(--ink-soft); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.tiers .tier .btn {
 display: inline-flex; align-items: center; justify-content: center; flex: 0 0 112px;
 width: 112px; max-width: 100%; min-height: 32px; height: 32px; margin: 0;
 padding: 0 8px !important; font-size: 10px !important; line-height: 1.4;
 letter-spacing: .03em !important; text-transform: none; align-self: center; color: #fff;
}
.tiers .tier .btn:hover { color: var(--brand-pink); }
@media(max-width:1279px) {
 .tiers .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
 .tiers > .wrap { max-width: 1050px; }
}
@media(max-width:900px) {
 .feature, .faq-card, .mini { padding: 28px 24px; }
 .case-intro { gap: 40px; }
}
@media(max-width:620px) {
 body[class] header, body[class] header.scrolled,
 body.hero-dark header:not(.scrolled), body.page-index.hero-dark header:not(.scrolled) { padding: 6px 4vw; }
 :root { --type-section: 31px; --type-narrative: 28px; --type-card: 22px; }
 body:not(.page-index) main .hero h1 { font-size: 38px; max-width: 20ch; }
 body:not(.page-index) main .hero h1.long-hero-heading { font-size: 34px; }
 body.page-index main .hero p.hero-sub { max-width: 33ch; font-size: 13px; }
 body.page-index main .exceptional h2 { font-size: 30px; }
 body[class] main :is(.exceptional,.standout) p { max-width: 42ch; }
 body[class] main .svc h2 { font-size: 31px; }
 body[class] main .case-tier-guide h2 { font-size: 30px; }
 body[class] main .legal-section h2 { font-size: 23px; }
 .feature-grid, .faq-grid, .tier-mini { margin-top: 32px; }
 .feature, .faq-card, .mini { padding: 28px 22px; }
 .tiers { padding-block: 60px; }
 .tiers .grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .tiers > .wrap { max-width: 460px; padding-inline: 6vw; }
 .tiers .tier > img { height: 145px; flex-basis: 145px; }
 body.page-index main .tiers .tier-copy h3 { font-size: 23px; }
 body.page-index main .tiers .tier-copy .tier-description { min-height: 0; }
 .tiers .tier-copy { padding: 20px; }
 .tiers .tier-action { padding-top: 4px; }
}