/* ============================================================ LANDING PAGE — 2026 Header, footer, fonts, palette and reset all come from the shared chain below. This file holds only what is unique to the landing page's content sections. ============================================================ */ /* The shared base — normalize, fontface, global, site-header, cta, footer — is linked by Views/BaseTemplate.cshtml ahead of this file. */ /* ------------------------------------------------------------ The site root is 62.5% (1rem = 10px) and inherits it, so this page states its own text size in px explicitly. ------------------------------------------------------------ */ .landing { font-size: 16px; line-height: 1.6; color: var(--dark-gray); -webkit-font-smoothing: antialiased; } /* Element resets, wrapped in :where() so they carry ZERO specificity. They still strip the browser defaults (author styles always beat the UA sheet), but they no longer out-rank single-class component rules such as .label or .section-title — which is what was silently zeroing their margins. */ :where(.landing) :where(h1, h2, h3) { margin: 0; } :where(.landing) :where(p) { margin: 0; } :where(.landing) :where(ul, ol) { margin: 0; padding: 0; list-style: none; } :where(.landing) :where(a) { color: var(--dark-purple); } .landing img { max-width: 100%; height: auto; display: block; } .landing h1, .landing h2, .landing h3 { text-wrap: balance; } .landing a:focus-visible, .landing button:focus-visible { outline: 2px solid var(--dark-purple); outline-offset: 3px; } .wrap--content { max-width: var(--w-content); margin-inline: auto; padding-inline: 24px; } .wrap--read { max-width: var(--w-read); margin-inline: auto; padding-inline: 24px; } @media screen and (min-width: 768px) { .wrap--content, .wrap--read { padding-inline: 40px; } } .section { padding-block: var(--s-8); } @media screen and (min-width: 768px) { .section { padding-block: var(--s-9); } } /* --- the signature: tracked uppercase purple title, always left-aligned --- */ .section-title { font-size: 23px; font-weight: 500; letter-spacing: 12px; text-transform: uppercase; line-height: 1.2; color: var(--dark-purple); margin-bottom: var(--s-5); } @media screen and (max-width: 640px) { .section-title { font-size: 20px; letter-spacing: 8px; } } .label { font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dark-green); margin-bottom: var(--s-4); } .label--muted { color: var(--normal-gray); font-weight: 500; } .display { font-size: clamp(22px, 3vw, 28px); font-weight: 500; line-height: 1.35; color: var(--dark-gray); } .display em { font-style: normal; color: var(--dark-purple); } .lead { font-size: 18px; line-height: 1.55; } /* ============================================================ BUTTONS ============================================================ */ .landing .btn { display: inline-block; background: var(--dark-purple); color: #fff; font: 500 14px/1 "Montserrat", sans-serif; padding: 16px 24px; border: 1px solid var(--dark-purple); border-radius: 8px; text-decoration: none; cursor: pointer; text-align: center; } .landing .btn:hover { text-decoration: underline; } .landing .btn--secondary { background: transparent; color: var(--dark-purple); border-color: var(--dark-purple); } @media screen and (min-width: 768px) { .landing .btn { border-radius: 999px; padding: 16px 32px; } } /* ============================================================ HERO — pale diagonal lattice, portrait alongside ============================================================ */ .hero { position: relative; text-align: center; padding-block: var(--s-7) var(--s-8); background: repeating-linear-gradient( -58deg, transparent 0 43px, var(--lattice) 43px 44px ); } @media screen and (min-width: 768px) { .hero { padding-block: var(--s-8) var(--s-9); } } @media screen and (min-width: 1024px) { .hero { padding-block: var(--s-9) var(--s-10); } } .hero__inner { max-width: 1120px; margin-inline: auto; padding-inline: 24px; display: grid; gap: var(--s-7); align-items: center; } .hero__text { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); } /* people appear only in dedicated panels, never bleached */ .hero__portrait { border-radius: 4px; overflow: hidden; background: var(--tint); aspect-ratio: 16 / 10; max-width: 460px; width: 100%; margin-inline: auto; } .hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(0.9); } @media screen and (min-width: 1024px) { .hero__inner { grid-template-columns: 1.08fr 0.92fr; padding-inline: 40px; } .hero__text { align-items: flex-start; text-align: left; } .hero__portrait { aspect-ratio: 4 / 5; max-width: none; } .cta-row { justify-content: flex-start; } } .hero__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dark-green); max-width: 500px; margin: 0; } .hero h1 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; line-height: 1.22; color: var(--dark-gray); } .hero h1 em { font-style: normal; font-weight: 400; color: var(--dark-purple); } .hero__sub { max-width: 620px; } .hero__sub b { font-weight: 600; color: var(--dark-green); } .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); } .hero__disclaimer { max-width: 520px; font-size: 13px; line-height: 1.55; color: var(--normal-gray); margin-top: var(--s-2); } /* ============================================================ RECOGNITION — tinted band, hairline cards ============================================================ */ .recognition { background: var(--tint); } .recognition .display { margin-bottom: var(--s-6); max-width: 640px; } .chip-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); } @media screen and (min-width: 640px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 1024px) { .chip-grid { grid-template-columns: repeat(3, 1fr); } } .chip { background: #fff; border: 1px solid var(--light-gray); border-radius: 4px; padding: var(--s-5); font-size: 16px; line-height: 1.55; color: var(--dark-gray); display: flex; align-items: center; gap: var(--s-4); min-height: 104px; transition: border-color 0.3s; } .chip:hover { border-color: var(--light-green); } .chip__leaf { width: 24px; height: 24px; flex: none; color: var(--normal-green); } /* ============================================================ STORY — photo left, copy right ============================================================ */ .story__grid { display: grid; gap: var(--s-6); align-items: start; } @media screen and (min-width: 1024px) { .story__grid { grid-template-columns: 1fr 2fr; gap: var(--s-7); } } .story__photo { margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tint); } .story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; /* holds Sherry, keeps the client in frame */ } .story__copy { display: flex; flex-direction: column; gap: var(--s-4); max-width: 60ch; } .story__copy p { font-size: 16px; line-height: 1.7; } .story__copy b { font-weight: 600; color: var(--dark-green); } .link-arrow { font-size: 14px; font-weight: 600; color: var(--dark-purple); text-decoration: none; align-self: flex-start; margin-top: var(--s-1); } .link-arrow:hover { text-decoration: underline; } /* ============================================================ CREDENTIALS — quiet strip, rule-divided, no cards ============================================================ */ .credentials { border-block: 1px solid var(--light-gray); padding-block: var(--s-7); } .badge-row { display: grid; grid-template-columns: 1fr; gap: var(--s-5); } @media screen and (min-width: 640px) { .badge-row { grid-template-columns: repeat(2, 1fr); gap: 0; } .badge-row > * + * { border-left: 1px solid var(--light-gray); } .badge-row > * { padding-inline: var(--s-5); } .badge-row > :nth-child(3) { border-left: 0; } .badge-row > :nth-child(-n+2) { padding-bottom: var(--s-5); border-bottom: 1px solid var(--light-gray); } .badge-row > :nth-child(n+3) { padding-top: var(--s-5); } } @media screen and (min-width: 1024px) { .badge-row { grid-template-columns: repeat(4, 1fr); } .badge-row > :nth-child(3) { border-left: 1px solid var(--light-gray); } .badge-row > :nth-child(-n+2) { padding-bottom: 0; border-bottom: 0; } .badge-row > :nth-child(n+3) { padding-top: 0; } } .badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); } .badge__img { width: 76px; height: 76px; object-fit: contain; flex: none; } .badge__text { display: flex; flex-direction: column; gap: 3px; } .badge__name { display: block; font-size: 16px; font-weight: 600; color: var(--dark-gray); line-height: 1.3; } .badge__sub { display: block; font-size: 13px; color: var(--normal-gray); line-height: 1.45; } /* ============================================================ PROCESS — numbered steps (a real sequence) ============================================================ */ .process { background: var(--tint); } .process .display { margin-bottom: var(--s-7); } .steps { display: grid; grid-template-columns: 1fr; gap: var(--s-6); } @media screen and (min-width: 1024px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { border-top: 1px solid var(--light-gray); padding-top: var(--s-4); } .step__num { font-size: 36px; font-weight: 600; line-height: 1; color: var(--dark-purple); font-variant-numeric: tabular-nums; margin-bottom: var(--s-3); } .step h3 { font-size: 18px; font-weight: 600; line-height: 1.35; margin-bottom: var(--s-2); } .step p { font-size: 16px; line-height: 1.6; } /* ============================================================ CLOSING CTA — centred, hairline rule above ============================================================ */ /* ============================================================ MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }