/* ========================================================================= Alpine Local — Winnie Asboe, Engelberg ========================================================================= */ /* ---------- Fonts (self-hosted: no third-party requests) ---------- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Design tokens ---------- */ :root { --bone: #fbf8f3; --sand: #f3ede3; --linen: #eae1d4; --clay: #ded2c0; --card: #fffdfa; /* Text tones are picked to clear 4.5:1 on both --bone and --sand, since small uppercase labels sit on either background. */ --ink: #2a2521; --ink-soft: #575047; --ink-faint: #736a5f; --pine: #3e4c42; --pine-dark: #334037; --tan: #82623d; --tan-line: #c9ae8c; --r-sm: 6px; --r: 14px; --r-lg: 26px; --sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; --header-h: 74px; --pad-x: clamp(1.25rem, 5vw, 3rem); --section-y: clamp(4.5rem, 9vw, 8.5rem); --maxw: 1200px; --shadow-sm: 0 1px 2px rgba(42, 37, 33, .04), 0 6px 18px -12px rgba(42, 37, 33, .18); --shadow-md: 0 2px 6px rgba(42, 37, 33, .05), 0 24px 48px -28px rgba(42, 37, 33, .32); --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.72; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* `clip`, not `hidden`: hidden would turn into a scroll container and silently break every position:sticky on the page. */ overflow-x: clip; } img, svg { max-width: 100%; display: block; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; letter-spacing: -.015em; font-variation-settings: 'opsz' 96; } h1 { font-size: clamp(2.75rem, 6.4vw, 4.75rem); line-height: 1.02; letter-spacing: -.03em; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; } h3 { font-size: 1.2rem; line-height: 1.32; font-variation-settings: 'opsz' 30; letter-spacing: -.01em; } h4 { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin: 0; } p { margin: 0 0 1.05em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: inherit; } strong { font-weight: 600; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--clay); color: var(--ink); } :focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--pine); color: var(--bone); padding: .7rem 1.1rem; border-radius: var(--r-sm); font-size: .9rem; text-decoration: none; transition: top .18s var(--ease); } .skip-link:focus { top: 1rem; } /* ---------- Layout helpers ---------- */ /* One shared gutter so full-bleed sections (the hero, the photo bands) can line their text up with .container without nesting inside it. */ :root { --gutter: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x))); } .container { width: 100%; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section-sand { background: var(--sand); } section[id] { scroll-margin-top: calc(var(--header-h) + 8px); } .eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tan); margin: 0 0 1.15rem; display: flex; align-items: center; gap: .75rem; } .eyebrow::after { content: ''; flex: 0 0 auto; width: 2.25rem; height: 1px; background: var(--tan-line); } .eyebrow-light { color: #d9c6a9; } .eyebrow-light::after { background: rgba(217, 198, 169, .5); } .lead { font-size: clamp(1.075rem, 1.35vw, 1.24rem); line-height: 1.62; color: var(--ink-soft); } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head .lead { margin-top: 1.1rem; } /* ---------- Buttons ---------- */ .btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: currentColor; display: inline-flex; align-items: center; gap: .6rem; padding: .92rem 1.5rem; border: 1px solid var(--btn-bd); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--sans); font-size: .95rem; font-weight: 500; letter-spacing: .005em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); } .btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-solid { --btn-bg: var(--pine); --btn-fg: var(--bone); --btn-bd: var(--pine); box-shadow: var(--shadow-sm); } .btn-solid:hover { --btn-bg: var(--pine-dark); --btn-bd: var(--pine-dark); box-shadow: var(--shadow-md); } .btn-outline { --btn-bd: var(--clay); --btn-fg: var(--ink); background: rgba(255,255,255,.5); } .btn-outline:hover { --btn-bd: var(--pine); background: #fff; } .btn-light { --btn-bg: var(--bone); --btn-fg: var(--ink); --btn-bd: var(--bone); } .btn-light:hover { --btn-bg: #fff; --btn-bd: #fff; } .btn-ghost { --btn-fg: var(--bone); --btn-bd: rgba(251, 248, 243, .38); } .btn-ghost:hover { --btn-bd: rgba(251, 248, 243, .9); background: rgba(251, 248, 243, .08); } .btn-sm { padding: .62rem 1.1rem; font-size: .875rem; } .btn-lg { padding: 1.1rem 1.85rem; font-size: 1.02rem; } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease), box-shadow .3s var(--ease); } .site-header.is-scrolled { background: rgba(251, 248, 243, .88); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom-color: var(--linen); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); } .brand-mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--pine); } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--serif); font-size: 1.12rem; letter-spacing: -.01em; font-variation-settings: 'opsz' 40; } .brand-sub { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); margin-top: .3rem; } .primary-nav { display: flex; align-items: center; gap: 1.9rem; } .primary-nav ul { display: flex; align-items: center; gap: 1.75rem; } .primary-nav a { position: relative; font-size: .925rem; color: var(--ink-soft); text-decoration: none; padding-block: .35rem; transition: color .2s var(--ease); } .primary-nav ul a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tan-line); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .primary-nav ul a:hover, .primary-nav ul a.is-active { color: var(--ink); } .primary-nav ul a:hover::after, .primary-nav ul a.is-active::after { transform: scaleX(1); } .primary-nav .btn { color: var(--btn-fg); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--clay); border-radius: 999px; cursor: pointer; color: var(--ink); } .nav-toggle-bars { display: block; width: 17px; } .nav-toggle-bars span { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .28s var(--ease), opacity .2s var(--ease); } .nav-toggle-bars span:first-child { margin-bottom: 5px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 1.12fr .88fr; align-items: stretch; min-height: 100svh; padding-top: var(--header-h); } .hero-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem) var(--gutter); width: 100%; } .hero-text h1 { margin-bottom: 1.6rem; } .hero-text .lead { max-width: 32rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; } .hero-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linen); font-size: .795rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); } .hero-meta li { display: flex; align-items: center; gap: 1.4rem; } .hero-meta li:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--clay); } .hero-media { position: relative; overflow: hidden; border-bottom-left-radius: var(--r-lg); background: var(--linen); } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } /* ---------- The idea ---------- */ .idea-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; } .idea-copy h2 { margin-bottom: 1.35rem; } .idea-copy .lead { margin-bottom: 1.35rem; } .idea-copy p:not(.lead):not(.eyebrow) { color: var(--ink-soft); } .idea-media { position: relative; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); padding-right: clamp(2rem, 5vw, 4rem); } .idea-img { margin: 0; } .idea-img img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-md); } .idea-img-a { width: 80%; } .idea-img-b { position: absolute; right: 0; bottom: 0; width: 55%; border: 6px solid var(--sand); border-radius: calc(var(--r) + 6px); } .idea-img-b img { border-radius: calc(var(--r) - 2px); box-shadow: none; } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--clay); } .pillar-num { display: block; font-family: var(--serif); font-size: .82rem; letter-spacing: .16em; color: var(--tan); margin-bottom: .95rem; } .pillars h3 { margin-bottom: .6rem; } .pillars p { color: var(--ink-soft); font-size: .985rem; } /* ---------- Quote band ---------- */ .band { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(300px, 42vw, 460px); padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--pine-dark); overflow: hidden; } .band-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; } .band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 34, 29, .46), rgba(28, 34, 29, .66)); } .band-inner { text-align: center; } .band-quote { font-family: var(--serif); font-size: clamp(1.45rem, 3.1vw, 2.45rem); line-height: 1.28; letter-spacing: -.018em; color: #fdfbf7; max-width: 24ch; margin: 0 auto .95rem; text-wrap: balance; font-variation-settings: 'opsz' 96; } .band-attr { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(253, 251, 247, .72); margin: 0; } /* ---------- Cards (what I do) ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .card { background: var(--card); border: 1px solid var(--linen); border-radius: var(--r); padding: clamp(1.6rem, 2.6vw, 2.15rem); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--clay); box-shadow: var(--shadow-md); } .card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sand); color: var(--pine); margin-bottom: 1.35rem; } .card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .card h3 { margin-bottom: .55rem; } .card p { color: var(--ink-soft); font-size: .975rem; } /* ---------- How it starts ---------- */ .how-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .how-copy h2 { margin-bottom: clamp(2rem, 4vw, 2.75rem); } .steps { counter-reset: step; display: grid; gap: 1.9rem; } .steps li { counter-increment: step; position: relative; padding-left: 3.4rem; } .steps li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border: 1px solid var(--clay); border-radius: 50%; font-family: var(--serif); font-size: .92rem; color: var(--tan); background: var(--bone); } .steps li::after { content: ''; position: absolute; left: 1.175rem; top: 2.55rem; bottom: -1.9rem; width: 1px; background: linear-gradient(var(--clay), transparent); } .steps li:last-child::after { display: none; } .steps h3 { margin-bottom: .4rem; } .steps p { color: var(--ink-soft); font-size: .985rem; } .tags-label { margin: clamp(2.5rem, 5vw, 3.25rem) 0 .95rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } .tags { display: flex; flex-wrap: wrap; gap: .5rem; } .tags li { border: 1px solid var(--clay); border-radius: 999px; padding: .42rem 1rem; font-size: .855rem; color: var(--ink-soft); background: rgba(255, 255, 255, .55); } .how-media { margin: 0; position: sticky; top: calc(var(--header-h) + 2.5rem); } .how-media img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-md); } .how-media figcaption { margin-top: .95rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .about-media { margin: 0; position: sticky; top: calc(var(--header-h) + 2.5rem); } .about-media img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-md); } .about-media figcaption { margin-top: .95rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .about-copy h2 { margin-bottom: 1.25rem; } .about-copy .lead { margin-bottom: 1.3rem; } .about-copy p:not(.lead):not(.eyebrow) { color: var(--ink-soft); } .cv { display: grid; gap: 1.65rem; margin-top: clamp(2.5rem, 5vw, 3.25rem); padding-top: clamp(2rem, 4vw, 2.5rem); border-top: 1px solid var(--linen); } .cv h3 { font-size: 1.06rem; margin-bottom: .3rem; } .cv p { color: var(--ink-soft); font-size: .96rem; margin: 0; } .cv-place { display: block; font-size: .715rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan); margin-bottom: .35rem; } .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.25rem; margin-top: clamp(2.25rem, 4vw, 3rem); padding-top: clamp(1.75rem, 3.5vw, 2.25rem); border-top: 1px solid var(--linen); } .fact p { margin: .55rem 0 0; font-size: .93rem; color: var(--ink-soft); } /* ---------- Reviews ---------- */ .quotes { columns: 3; column-gap: clamp(1rem, 2vw, 1.5rem); } .quote { break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 1.5rem); background: var(--card); border: 1px solid var(--linen); border-radius: var(--r); padding: clamp(1.5rem, 2.4vw, 2rem); } .quote blockquote { margin: 0; } .quote blockquote p { font-family: var(--serif); font-size: 1.055rem; line-height: 1.56; color: var(--ink); font-variation-settings: 'opsz' 24; margin: 0; /* `pretty` reflows these long quotes into odd short lines mid-paragraph. */ text-wrap: wrap; } .quote blockquote p::before { content: '\201C'; } .quote blockquote p::after { content: '\201D'; } .quote figcaption { margin-top: 1.05rem; padding-top: .95rem; border-top: 1px solid var(--linen); font-size: .795rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .quotes-themes { margin-top: clamp(2.25rem, 4vw, 3rem); text-align: center; font-size: .78rem; letter-spacing: .17em; text-transform: uppercase; color: var(--tan); } /* ---------- Contact ---------- */ .contact { position: relative; isolation: isolate; overflow: hidden; background: var(--pine-dark); color: var(--bone); padding-block: clamp(5rem, 10vw, 8.5rem); scroll-margin-top: var(--header-h); } .contact-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .contact::after { content: ''; position: absolute; inset: 0; z-index: -1; /* Near-solid behind the copy, opening up towards the right so the mountain still reads. Keeps text contrast well clear of the AA threshold. */ background: linear-gradient(96deg, rgba(28, 36, 30, .95) 0%, rgba(28, 36, 30, .93) 42%, rgba(28, 36, 30, .70) 74%, rgba(28, 36, 30, .58) 100%), linear-gradient(180deg, rgba(28, 36, 30, .35), rgba(28, 36, 30, .08) 40%, rgba(28, 36, 30, .45)); } /* .contact-inner is also the .container, so the width limit goes on its children — otherwise it would eat the page gutter twice over. */ .contact-inner > * { max-width: 44rem; } .contact h2 { color: #fdfbf7; margin-bottom: 1.25rem; } .contact .lead { color: rgba(249, 245, 238, .88); } .contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.5rem; } .contact-meta { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid rgba(251, 248, 243, .18); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(247, 242, 234, .62); display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--bone); padding-block: clamp(2.75rem, 5vw, 4rem); border-top: 1px solid var(--linen); } .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 1.75rem 2.5rem; align-items: start; } .footer-brand { display: flex; align-items: flex-start; gap: .85rem; } .footer-brand .brand-mark { width: 30px; height: 30px; color: var(--pine); margin-top: .15rem; } .footer-brand p { margin: 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.6; } .footer-brand strong { color: var(--ink); font-weight: 600; } .footer-contact { display: grid; gap: .3rem; text-align: right; font-size: .93rem; } .footer-contact a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); } .footer-contact a:hover { color: var(--ink); border-bottom-color: var(--tan-line); } .footer-legal { grid-column: 1 / -1; margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--linen); display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between; font-size: .78rem; line-height: 1.65; color: var(--ink-faint); } .footer-legal .credits { max-width: 58ch; } .footer-legal a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; } .footer-legal a:hover { color: var(--ink-soft); } /* ---------- Reveal on scroll ---------- */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].is-visible { opacity: 1; transform: none; } } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 1080px) { .cards, .pillars { grid-template-columns: repeat(2, 1fr); } .quotes { columns: 2; } .hero { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { :root { --header-h: 66px; } .nav-toggle { display: inline-flex; } .primary-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(251, 248, 243, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linen); padding: .5rem var(--pad-x) 1.5rem; box-shadow: var(--shadow-md); transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s; } .primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .primary-nav ul a { display: block; padding: .95rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--linen); } .primary-nav ul a::after { display: none; } .primary-nav ul li:last-child a { border-bottom: 0; } .nav-cta { margin-top: 1.1rem; justify-content: center; } .hero { grid-template-columns: 1fr; min-height: 0; } .hero-text { order: 2; padding: clamp(2.5rem, 8vw, 4rem) var(--pad-x) clamp(3rem, 8vw, 4.5rem); } .hero-media { order: 1; aspect-ratio: 16 / 11; border-bottom-left-radius: 0; } .hero-media img { object-position: 50% 38%; } /* Copy now runs the full width, so the scrim has to be even everywhere. */ .contact::after { background: linear-gradient(180deg, rgba(28, 36, 30, .93), rgba(28, 36, 30, .88) 50%, rgba(28, 36, 30, .93)); } .idea-grid, .how-grid, .about-grid { grid-template-columns: 1fr; } /* Single column: keep the line length readable rather than letting prose stretch the whole tablet width. */ .idea-copy, .how-copy, .about-copy, .section-head { max-width: 40rem; } .idea-media { max-width: 34rem; padding-right: clamp(3rem, 12vw, 6rem); } .about-media, .how-media { position: static; max-width: 26rem; } .how-media { max-width: 36rem; } } @media (max-width: 640px) { body { font-size: 1.02rem; } .cards, .pillars { grid-template-columns: 1fr; } .quotes { columns: 1; } .pillars { gap: 2rem; } .hero-actions .btn, .contact-actions .btn { width: 100%; justify-content: center; } .hero-meta { gap: .45rem 1rem; font-size: .74rem; } .facts { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .footer-contact { text-align: left; } .contact-meta { flex-direction: column; } } @media (max-width: 420px) { .brand-sub { display: none; } } /* ---------- Print ---------- */ @media print { .site-header, .nav-toggle, .band, .hero-media, .idea-media, .how-media { display: none !important; } body { background: #fff; color: #000; } [data-reveal] { opacity: 1 !important; transform: none !important; } }