/* =========================================================== La Montagna Digital — 2026 Brand-true theme · Gold (#cd9d4c) · Charcoal (#222) · Off-white (#f1f1f1) Typeface: Outfit. Dark-first, with a light variant. Toggle via [data-theme="dark"|"light"] on . =========================================================== */ :root { /* Brand constants — identical in both themes */ --gold: #cd9d4c; --gold-soft: #e0bd80; --gold-deep: #a87d34; --radius-xl: 28px; --radius-lg: 20px; --radius-md: 14px; --max: 1240px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- DARK THEME (default — the native brand look) ---------- */ :root, :root[data-theme="dark"] { --ink: #f1f1f1; /* primary text */ --ink-dim: #b9b9b9; --bg: #1b1b1b; /* page background (charcoal) */ --bg-2: #202020; --surface: #262626; /* cards */ --surface-2: rgba(241,241,241,0.04); --line: rgba(241,241,241,0.12); --muted: rgba(241,241,241,0.62); --shadow: 0 30px 80px rgba(0,0,0,0.55); --shadow-sm: 0 16px 40px rgba(0,0,0,0.35); /* contrast band = off-white block on dark site */ --band-bg: #f1f1f1; --band-text: #1b1b1b; --band-muted: rgba(20,20,20,0.66); --band-line: rgba(20,20,20,0.12); --on-gold: #1b1b1b; --hero-fade: #1b1b1b; } /* ---------- LIGHT THEME ---------- */ :root[data-theme="light"] { --ink: #222222; --ink-dim: #444444; --bg: #f1f1f1; --bg-2: #e9e9e9; --surface: #ffffff; --surface-2: rgba(20,20,20,0.03); --line: rgba(20,20,20,0.14); --muted: rgba(20,20,20,0.60); --shadow: 0 30px 80px rgba(20,20,20,0.14); --shadow-sm: 0 16px 40px rgba(20,20,20,0.07); --band-bg: #1b1b1b; --band-text: #f1f1f1; --band-muted: rgba(241,241,241,0.66); --band-line: rgba(241,241,241,0.14); --on-gold: #1b1b1b; --hero-fade: #f1f1f1; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .page-shell { position: relative; min-height: 100vh; overflow: clip; } /* ---------- Typography (Outfit, modern, tight) ---------- */ h1, h2, h3, h4 { font-family: "Outfit", sans-serif; margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; } .display { font-weight: 600; font-size: clamp(3rem, 9vw, 8rem); line-height: 0.97; letter-spacing: -0.045em; margin-top:15px;} .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(205,157,76,0.16); } .lead, .hero-copy { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 18px; left: 16px; right: 16px; margin: 0 auto; max-width: var(--max); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px 11px 22px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background .4s var(--ease), border-color .4s, padding .4s var(--ease); } .nav.scrolled { padding: 8px 12px 8px 22px; background: color-mix(in srgb, var(--bg) 88%, transparent); } .brand { display: flex; align-items: center; gap: 11px; } .brand-logo { height: 34px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 26px; font-size: 0.95rem; } .nav-links a { color: var(--muted); transition: color .25s; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-right { display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; flex: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color .25s, transform .35s var(--ease), color .25s; font-size: 15px; } .theme-toggle:hover { transform: rotate(18deg); border-color: var(--gold); color: var(--gold); } .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } .menu-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.5rem; cursor: pointer; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-weight: 600; font-size: 0.98rem; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s, background .25s, color .25s, border-color .25s; } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn-primary { background: var(--gold); color: var(--on-gold); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--gold); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .btn-nav { min-height: 40px; padding: 0 18px; background: var(--gold); color: var(--on-gold); font-size: 0.9rem; } .btn-gold { background: var(--gold); color: var(--on-gold); } .btn-on-band { background: var(--band-bg); color: var(--band-text); } /* ---------- Hero (with three.js canvas) ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 150px 0 96px; } #topo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; } .hero::after { /* fade canvas into page top + bottom so text stays legible */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--hero-fade) 0%, transparent 22% 60%, var(--hero-fade) 100%); } /* Editorial corner labels */ .topo-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .topo-labels .tl { position: absolute; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .topo-labels .tl.gold { color: var(--gold); } .topo-labels .tl-tl { top: 104px; left: 24px; } .topo-labels .tl-tr { top: 104px; right: 24px; } .topo-labels .tl-bl { bottom: 26px; left: 24px; } .topo-labels .tl-br { bottom: 26px; right: 24px; } @media (max-width: 640px) { .topo-labels .tl-tr, .topo-labels .tl-br { display: none; } .topo-labels .tl-tl { top: 92px; } } .hero .container { position: relative; z-index: 2; } .hero h1 { max-width: 16ch; } .hero .hero-copy { max-width: 54ch; margin-top: 26px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; } .hero-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 48px; max-width: auto; } .stat { padding: 20px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); backdrop-filter: blur(6px); } .stat:hover {transform: translateY(-8px) !important;transition: opacity .9s var(--ease), transform .9s var(--ease);} .stat strong { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; color: var(--gold); } .stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.85rem; } /* ---------- Sections ---------- */ .section { padding: 120px 0; position: relative; } .container { width: min(100%, var(--max)); margin: 0 auto; padding: 0 24px; } .section-head { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 40px; align-items: end; margin-bottom: 52px; } .section-label { color: var(--gold); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } h2 { font-size: clamp(2.1rem, 5vw, 4rem); letter-spacing: -0.04em; margin-top: 10px; } .section-head h2 { max-width: 18ch; } .section-intro { margin: 0; color: var(--muted); font-size: 1.08rem; max-width: 52ch; } /* Interior page hero */ .page-hero { position: relative; padding: 180px 0 60px; } .page-hero h1 { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -0.04em; max-width: 16ch; } .page-hero .hero-copy { max-width: 60ch; margin-top: 22px; } /* ---------- Marquee ---------- */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; } .marquee { display: flex; gap: 44px; white-space: nowrap; width: max-content; animation: marquee 30s linear infinite; } .marquee span { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--muted); display: inline-flex; align-items: center; gap: 44px; } .marquee span::after { content: "▲"; color: var(--gold); font-size: 0.7em; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Client logo carousel ---------- */ /* Horizontal, swipe/scroll, snap. 5 visible on desktop · 3 on tablet · 2 on mobile. No arrows or dots — native touch swipe, trackpad scroll, and (via script.js) mouse drag + vertical-wheel-to-horizontal. */ .logo-strip { display: flex; gap: 28px; overflow-x: hidden; /* auto-scrolled by JS; manual scroll off */ scroll-snap-type: none; /* snap fights the smooth auto-scroll */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge */ padding-bottom: 6px; cursor: default; } .logo-strip::-webkit-scrollbar { display: none; } /* Chrome / Safari */ .logo-tile { flex: 0 0 calc((100% - 4 * 28px) / 5); /* 5 across on desktop */ scroll-snap-align: start; display: grid; place-items: center; min-height: 64px; text-decoration: none; -webkit-user-select: none; user-select: none; } .logo-tile img { max-height: 36px; max-width: 84%; width: auto; height: auto; object-fit: contain; opacity: 0.78; transition: opacity .25s var(--ease), filter .25s; -webkit-user-drag: none; pointer-events: none; /* drag scrolls, doesn't ghost-drag the image */ } .logo-tile:hover img { opacity: 1; } .logo-tile.logo-wide img { max-width: 96%; } /* for very wide wordmarks */ /* Dual-variant logos: show the light-artwork file by default, the dark-artwork file in dark theme */ .logo-tile .v-dark { display: none; } :root[data-theme="dark"] .logo-tile .v-light { display: none; } :root[data-theme="dark"] .logo-tile .v-dark { display: block; } /* Single-variant mono logos — invert to suit the theme. .logo-mono-dark = black artwork (fine on light) → invert to white on dark. .logo-mono-light = white artwork (fine on dark) → invert to black on light. */ :root[data-theme="dark"] .logo-mono-dark img { filter: invert(1) brightness(1.08); } :root[data-theme="light"] .logo-mono-light img { filter: invert(1) brightness(0.92); } /* ---------- Services ---------- */ .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .service-card { padding: 28px; min-height: 280px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; display:flex; flex-direction:column; } .service-card:hover { transform: translateY(-8px) !important; border-color: var(--gold); box-shadow: var(--shadow); } .service-card:hover .service-icon {transform:rotate(-7deg) !important;transition:150ms;} .service-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; color: var(--on-gold); background: var(--gold); margin-bottom: 26px; font-size: 21px; } .service-icon svg { width: 26px; height: 26px; display: block; } .service-card h3 { font-size: 1.35rem; margin-bottom: 11px; } .service-card p { margin: 0; color: var(--muted); font-size: 0.98rem; } /* ---------- Contrast band (off-white on dark site) ---------- */ .dark-band { background: var(--band-bg); color: var(--band-text); border-radius: 40px 40px 0 0; } .dark-band .section-label { color: var(--gold-deep); } .dark-band h2 { color: var(--band-text); } .dark-band .section-intro { color: var(--band-muted); } /* ---------- Process ---------- */ .process { display: grid; gap: 14px; counter-reset: step; } .process-step { counter-increment: step; display: grid; grid-template-columns: 70px 0.8fr 1.2fr; gap: 24px; align-items: center; padding: 26px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--band-text) 5%, transparent); border: 1px solid var(--band-line); } .process-step:hover {transform: translateY(-8px) !important;transition: opacity .9s var(--ease), transform .9s var(--ease);} .process-step::before { content: "0" counter(step); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 1.05rem; } .process-step h3 { font-size: 1.4rem; color: var(--band-text); } .process-step p { margin: 0; color: var(--band-muted); } /* ---------- Work / case cards ---------- */ .portfolio-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 18px; } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .case-card { position: relative; min-height: 320px; padding: 26px; border-radius: var(--radius-lg); overflow: hidden; color: #f1f1f1; background: #2a2a2a; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s; } .case-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow);;transition: opacity .9s var(--ease), transform .9s var(--ease); } /* Decorative topographic fill — only on cards tagged .topo. Strongest at bottom-right, faded out toward top-left via a diagonal mask. */ .case-card.topo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;right: -5%;bottom: -7%; background: url('topo-card.svg') bottom right / 118% auto no-repeat; -webkit-mask-image: linear-gradient(to top left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 26%, transparent 64%); mask-image: linear-gradient(to top left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 26%, transparent 64%); opacity: 0.6; } .case-card.gold.topo::after { background-image: url('topo-card-dark.svg'); opacity: 0.42; } .portfolio-grid .case-card { min-height: 430px; } .case-card.small { min-height: 205px; } /* tonal variety using only brand colours */ .case-card.gold { background: linear-gradient(150deg, var(--gold), var(--gold-deep)); color: #1b1b1b; } .case-card.coal { background: linear-gradient(150deg, #2e2e2e, #161616); } .case-card.ink { background: linear-gradient(150deg, #242424, #0e0e0e); } .case-tag { position: relative; z-index: 1; align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: rgba(241,241,241,0.1); border: 1px solid rgba(241,241,241,0.2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .case-card.gold .case-tag { background: rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.2); } .case-card h3 { position: relative; z-index: 1; margin: auto 0 0; padding-top: 70px; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -0.03em; } .portfolio-grid .case-card h3 { padding-top: 120px; font-size: clamp(1.8rem, 3vw, 2.8rem); } .case-card.small h3 { padding-top: 30px; font-size: 1.35rem; } .case-card p { position: relative; z-index: 1; margin: 12px 0 0; color: rgba(241,241,241,0.78); font-size: 0.96rem; max-width: 46ch; } .case-card.gold p { color: rgba(0,0,0,0.7); } .case-card .work-link { position: relative; z-index: 1; margin-top: 16px; font-weight: 600; color: var(--gold); display: inline-flex; gap: 7px; } .case-card.gold .work-link, .case-card .work-link { } .case-card.gold .work-link { color: #1b1b1b; } .case-stack { display: grid; gap: 18px; } .case-card.is-hidden { display: none; } /* Featured (full-width) project card */ .case-card.feature { min-height: 420px; padding: 40px; } .case-card.feature .case-tag { background: rgba(205,157,76,0.16); border-color: rgba(205,157,76,0.4); color: var(--gold); } .case-card.feature h3 { padding-top: 150px; font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 20ch; } .case-card.feature p { font-size: 1.08rem; max-width: 60ch; color: rgba(241,241,241,0.82); } .case-card.feature .work-link { font-size: 1.05rem; } @media (max-width: 640px) { .case-card.feature { min-height: 320px; padding: 26px; } .case-card.feature h3 { padding-top: 80px; } } /* ---------- CTA ---------- */ .cta { padding: 110px 0; } .cta-card { width: min(100%, var(--max)); margin: 0 auto; padding: clamp(36px, 7vw, 80px); border-radius: var(--radius-xl); background: linear-gradient(150deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep)); color: var(--on-gold); position: relative; overflow: hidden; box-shadow: var(--shadow); } /* faded topographic texture, bottom-right, instead of the old offset blob */ .cta-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('topo-card-dark.svg') bottom right / 70% auto no-repeat; -webkit-mask-image: linear-gradient(to top left, rgba(0,0,0,0.9), transparent 58%); mask-image: linear-gradient(to top left, rgba(0,0,0,0.9), transparent 58%); opacity: 0.20; } .cta-content { position: relative; z-index: 2; max-width: 800px; } .cta .section-label { color: rgba(0,0,0,0.6); } .cta h2 { color: var(--on-gold); } .cta p { color: rgba(0,0,0,0.72); font-size: 1.2rem; } /* On a gold card the primary action must be DARK to read; secondary is dark outline */ .cta .btn-primary, .cta .btn-gold, .cta .btn-on-band { background: #1b1b1b; color: var(--gold); border-color: #1b1b1b; } .cta .btn-primary:hover, .cta .btn-gold:hover, .cta .btn-on-band:hover { background: #000; color: var(--gold-soft); box-shadow: 0 16px 40px -14px rgba(0,0,0,0.5); transform: translateY(-2px); } .cta .btn-secondary { border-color: rgba(0,0,0,0.35); color: #1b1b1b; background: transparent; } .cta .btn-secondary:hover { background: #1b1b1b; color: var(--gold); border-color: #1b1b1b; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; } .contact-detail { margin-bottom: 24px; } .contact-detail .section-label { margin-bottom: 6px; } .contact-detail a, .contact-detail span { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; } .field { margin-bottom: 20px; } .field label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 8px; font-weight: 500; letter-spacing: 0.02em; } .field input, .field textarea, .field select { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--ink); font-family: inherit; font-size: 1rem; transition: border-color .3s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); } /* ---------- Long-form / legal ---------- */ .prose { max-width: 760px; } .prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 44px 0 14px; } .prose h3 { font-size: 1.3rem; margin: 30px 0 10px; } .prose p, .prose li { color: var(--muted); font-size: 1.05rem; line-height: 1.75; } .prose ul, .prose ol { padding-left: 22px; margin: 12px 0; } .prose li { margin-bottom: 8px; } .prose ol li::marker { color: var(--gold); font-weight: 600; } .prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* ---------- 404 ---------- */ .error-wrap { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 170px 20px 90px; } .error-wrap h1 { font-size: clamp(90px, 20vw, 220px); line-height: 0.85; color: var(--gold); letter-spacing: -0.05em; } .error-wrap p { color: var(--muted); font-size: 1.2rem; margin: 16px 0 30px; max-width: 44ch; } /* ---------- Footer (rich) ---------- */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 80px 0 34px; } .site-footer a { color: var(--muted); transition: color .25s; } .site-footer a:hover { color: var(--gold); } .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding-bottom: 64px; border-bottom: 1px solid var(--line); } .foot-brand img { height: 52px; width: auto; display: block; } .foot-cta { text-align: right; } .foot-cta-kicker { display: block; color: var(--muted); font-size: 0.95rem; margin-bottom: 8px; } .foot-cta-link { font-family: "Outfit", sans-serif; font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); display: inline-flex; align-items: center; gap: 14px; } .foot-cta-link:hover { color: var(--gold); } .foot-cta-link .arrow { transition: transform .35s var(--ease); } .foot-cta-link:hover .arrow { transform: translateX(8px); } .foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 56px 0; } .foot-col h4 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 600; } .foot-col a { display: block; font-size: 1.02rem; margin-bottom: 11px; } .foot-locations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 16px 0 56px; border-top: 1px solid var(--line); } .foot-loc h5 { font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; color: var(--ink); } .foot-loc p { margin: 0 0 10px; color: var(--muted); font-size: 0.92rem; line-height: 1.6; } .foot-loc .dot-gold { color: var(--gold); } .foot-bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.86rem; } .foot-bottom a { color: var(--muted); } @media (max-width: 860px) { .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } .foot-locations { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } .foot-cta { text-align: left; } } @media (max-width: 520px) { .foot-cols, .foot-locations { grid-template-columns: 1fr; } .foot-bottom { flex-direction: column; align-items: flex-start; } } /* ---------- Reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .section-head, .portfolio-grid, .contact-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: repeat(2, 1fr); } .work-grid { grid-template-columns: 1fr 1fr; } .logo-tile { flex-basis: calc((100% - 2 * 28px) / 3); } /* 3 across on tablet */ .process-step { grid-template-columns: 56px 1fr; } .process-step p { grid-column: 2; } /* Drop the blur on mobile: backdrop-filter (like transform) makes a containing block, which would trap the fixed off-canvas panel inside the nav pill. Removing it lets the panel anchor to the viewport. */ .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, transparent); } /* Full-height off-canvas panel, anchored to the viewport */ .nav-links { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(82vw, 340px); height: 100vh; background: var(--bg-2); z-index: 105; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; padding: 96px 36px 40px; transform: translateX(100%); transition: transform .45s var(--ease); border-left: 1px solid var(--line); box-shadow: -30px 0 80px rgba(0,0,0,0.5); } .nav-links.open { transform: none; } .nav-links a { font-size: 1.4rem; } .menu-toggle { display: block; z-index: 110; } .nav-right .btn-nav { display: none; } /* declutter; Contact lives in the menu */ } @media (max-width: 640px) { .hero { padding-top: 130px; } .services-grid, .work-grid { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: 1fr 1fr; } .logo-strip { gap: 22px; } .logo-tile { flex-basis: calc((100% - 22px) / 2); } /* 2 across on mobile */ .section { padding: 84px 0; } .process-step { grid-template-columns: 1fr; } .process-step p { grid-column: auto; } .footer-inner { flex-direction: column; align-items: flex-start; } } /* ---------- Book-a-consult modal (HubSpot Meetings) ---------- The scheduler itself is a cross-origin HubSpot iframe (its orange/white theme is controlled in HubSpot, not here). We frame it as one clean card: a charcoal + gold header, then the widget on a white body so HubSpot's white panel blends seamlessly instead of sitting in a dark box. */ .consult-modal { position: fixed; inset: 0; z-index: 1000; display: none; } .consult-modal.open { display: block; } .consult-backdrop { position: absolute; inset: 0; background: rgba(8,8,8,0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .consult-dialog { position: relative; width: min(940px, 95vw); max-height: 92vh; margin: max(4vh, 16px) auto; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 90px rgba(0,0,0,0.55); animation: consultIn .3s var(--ease); } @keyframes consultIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } } .consult-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px 15px 22px; background: #1b1b1b; border-bottom: 2px solid var(--gold); } .consult-head-text { display: flex; flex-direction: column; line-height: 1.18; } .consult-kicker { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .consult-head-text strong { font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: #f1f1f1; } .consult-close { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #f1f1f1; font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s var(--ease), color .2s, border-color .2s; } .consult-close:hover { background: var(--gold); color: #1b1b1b; border-color: var(--gold); } .consult-body { position: relative; flex: 1; min-height: 0; background: #fff; overflow: hidden; } .consult-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #6b6b6b; font-size: .95rem; letter-spacing: .01em; } .consult-body .meetings-iframe-container { position: relative; z-index: 1; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .consult-body .meetings-iframe-container iframe { width: 100% !important; height: 100% !important; min-height: 560px; border: 0; display: block; } @media (max-width: 640px) { .consult-dialog { width: 100vw; max-height: 100vh; height: 100vh; margin: 0; border-radius: 0; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .marquee { animation: none; } .reveal { transition: none; opacity: 1; transform: none; } .consult-dialog { animation: none; } * { scroll-behavior: auto; } }