/* ============================================= DYNAMIC PROPERTY SERVICES Refined brand system — purple primary, charcoal ink, off-white surface Display: Montserrat · Body: Inter ============================================= */ /* ---------- Design Tokens ---------- */ :root { /* Type scale (fluid) */ --text-xs: clamp(0.75rem, 0.7rem + 0.20vw, 0.825rem); --text-sm: clamp(0.875rem, 0.8rem + 0.30vw, 0.95rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --text-md: clamp(1.0625rem,0.95rem + 0.50vw, 1.1875rem); --text-lg: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem); --text-xl: clamp(1.75rem, 1.30rem + 1.80vw, 2.5rem); --text-2xl: clamp(2.25rem, 1.50rem + 3.00vw, 3.75rem); --text-3xl: clamp(2.75rem, 1.20rem + 6.00vw, 5.5rem); /* Space */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-full: 9999px; --ease: 240ms cubic-bezier(0.16, 1, 0.3, 1); --ease-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1); --shadow-sm: 0 1px 2px rgba(20,10,40,0.06), 0 1px 3px rgba(20,10,40,0.05); --shadow-md: 0 6px 24px -8px rgba(20,10,40,0.18), 0 2px 6px rgba(20,10,40,0.06); --shadow-lg: 0 24px 60px -16px rgba(20,10,40,0.25), 0 8px 20px -8px rgba(20,10,40,0.08); --content-narrow: 640px; --content: 1100px; --content-wide: 1280px; --font-display: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Helvetica, sans-serif; /* Brand — accent is the tweakable hue */ --accent: #6E2BB8; --accent-deep: #4F1A8C; --accent-deeper: #321058; --accent-soft: #9B5FE0; --accent-pale: #F1E8FB; --accent-tint: #FAF5FF; --ink: #161425; --ink-2: #232136; --ink-3: #3A3550; --surface: #FFFFFF; --surface-2: #FAF8FC; --surface-3: #F1EDF6; --line: #E6E0EE; --line-2: #D7CFE3; --text: #1A1730; --text-body: #3F3A55; --text-muted: #74708A; --text-faint: #A8A2B9; } /* Accent presets — toggled by [data-accent] on */ body[data-accent="indigo"] { --accent: #2A4CC9; --accent-deep: #1B33A0; --accent-deeper: #0F1F6E; --accent-soft: #6E84E3; --accent-pale: #E5EAFB; --accent-tint: #F4F6FE; } body[data-accent="evergreen"] { --accent: #1F6E4A; --accent-deep: #14543A; --accent-deeper: #0B3526; --accent-soft: #5BA784; --accent-pale: #E2F0E8; --accent-tint: #F2F8F4; } body[data-accent="terracotta"] { --accent: #B84A2B; --accent-deep: #8C3520; --accent-deeper: #5E2114; --accent-soft: #DC8062; --accent-pale: #F8E5DD; --accent-tint: #FBF3EF; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 90px; } body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); color: var(--text-body); background: var(--surface); line-height: 1.65; -webkit-text-size-adjust: 100%; } img, picture, svg { display: block; max-width: 100%; height: auto; } ul[role='list'], ol[role='list'] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.1; } p, li { text-wrap: pretty; } button { cursor: pointer; background: none; border: none; } a { transition: color var(--ease-fast); } ::selection { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--s-5), 5vw, var(--s-12)); } .container--narrow { max-width: var(--content); } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--reveal-delay, 0ms); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ============================================= HEADER ============================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(22, 20, 37, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background var(--ease), border-color var(--ease); } .site-header--scrolled { background: rgba(22, 20, 37, 0.94); border-bottom-color: rgba(255,255,255,0.10); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-4); } .nav__logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; } .nav__logo-text { display: flex; flex-direction: column; line-height: 1.05; } .nav__logo-text .l1 { font-family: var(--font-display); font-weight: 800; font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; white-space: nowrap; } .nav__logo-text .l2 { font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 2px; white-space: nowrap; } .nav__links { display: flex; align-items: center; gap: var(--s-8); } .nav__links a { font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.65); text-decoration: none; letter-spacing: 0.01em; position: relative; padding-block: 4px; } .nav__links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: #fff; transition: right var(--ease); } .nav__links a:hover { color: #fff; } .nav__links a:hover::after, .nav__links a.active::after { right: 0; } .nav__links a.active { color: #fff; } .nav__right { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; } .nav__cta { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.6rem 1.1rem; background: var(--accent); color: #fff !important; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--ease-fast), transform var(--ease-fast), box-shadow var(--ease-fast); } .nav__cta:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--accent) 70%, black); } .hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--s-2); color: #fff; } .hamburger span { display:block; width:22px; height:2px; background:currentColor; border-radius:2px; transition: transform var(--ease), opacity var(--ease); } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: none; flex-direction: column; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.08); } .mobile-nav.open { display: flex; } .mobile-nav a { padding: var(--s-4) var(--s-6); font-size: var(--text-base); font-weight: 500; color: rgba(255,255,255,0.75); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.06); } .mobile-nav a:hover { color: #fff; background: rgba(255,255,255,0.04); } .mobile-nav .nav-cta-mobile { margin: var(--s-4) var(--s-6); padding: var(--s-3); background: var(--accent); color: #fff !important; border-radius: var(--radius-sm); text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: none; } @media (max-width: 880px) { .nav__links, .nav__cta { display: none; } .hamburger { display: flex; } } /* ============================================= HERO — SPLIT (default) ============================================= */ .hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: min(820px, 92vh); overflow: hidden; position: relative; } .hero__photo { position: relative; overflow: hidden; background: var(--ink); } .hero__photo-stack { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: opacity, transform; } /* Crossfade — each image fades + slow-zooms over a 16s loop */ .hero__img--a { animation: hero-fade-a 16s ease-in-out infinite, hero-zoom 16s ease-in-out infinite; } .hero__img--b { animation: hero-fade-b 16s ease-in-out infinite, hero-zoom 16s ease-in-out infinite; } @keyframes hero-fade-a { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes hero-fade-b { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes hero-zoom { 0% { transform: scale(1.00); } 50% { transform: scale(1.08); } 100% { transform: scale(1.00); } } @media (prefers-reduced-motion: reduce) { .hero__img--a, .hero__img--b { animation: none; } .hero__img--b { opacity: 0; } } .hero__photo::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(20,16,40,0.55) 0%, rgba(20,16,40,0.10) 60%, transparent 100%), linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.45) 100%); pointer-events: none; } .hero__photo-meta { position: absolute; top: var(--s-6); left: var(--s-6); z-index: 2; display: inline-flex; align-items: center; gap: var(--s-3); padding: 0.45rem 0.85rem; color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-full); font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600; line-height: 1; } .hero__photo-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.55); } .hero__photo-type { position: relative; display: inline-block; min-width: 9em; height: 1em; } .hero__photo-type > span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity 600ms ease; } .hero__photo-type-a { animation: type-fade-a 16s ease-in-out infinite; } .hero__photo-type-b { animation: type-fade-b 16s ease-in-out infinite; } @keyframes type-fade-a { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes type-fade-b { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero__photo-type-a, .hero__photo-type-b { animation: none; } .hero__photo-type-b { opacity: 0; } } .hero__logo-overlay { position: absolute; bottom: var(--s-10); left: var(--s-10); z-index: 2; display: flex; align-items: center; gap: var(--s-5); } .hero__logo-overlay .text-wrap { display: flex; flex-direction: column; } .hero__logo-overlay .l1 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.10em; text-transform: uppercase; color: #fff; line-height: 1.05; } .hero__logo-overlay .l2 { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 6px; } .hero__purple { background: radial-gradient(80% 60% at 80% 15%, color-mix(in oklab, var(--accent-soft) 55%, transparent) 0%, transparent 60%), radial-gradient(70% 70% at 15% 95%, color-mix(in oklab, var(--accent-deeper) 80%, transparent) 0%, transparent 65%), linear-gradient(135deg, color-mix(in oklab, var(--accent) 92%, white) 0%, var(--accent) 38%, color-mix(in oklab, var(--accent) 85%, black) 100%); display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--s-10), 6vw, var(--s-20)) clamp(var(--s-8), 5vw, var(--s-16)); position: relative; overflow: hidden; color: #fff; } .hero__purple::before { content: ''; position: absolute; top: -160px; right: -140px; width: 520px; height: 520px; background: radial-gradient(circle, color-mix(in oklab, var(--accent-soft) 65%, transparent) 0%, transparent 55%); filter: blur(20px); pointer-events: none; mix-blend-mode: screen; } .hero__purple::after { content: ''; position: absolute; bottom: -180px; left: -100px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, transparent 65%); filter: blur(10px); pointer-events: none; } .hero__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); position: relative; z-index: 1; } .hero__eyebrow::before { content: ''; width: 32px; height: 1.5px; background: rgba(255,255,255,0.7); } .hero__tagline { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: #fff; letter-spacing: -0.025em; line-height: 0.98; position: relative; z-index: 1; } .hero__tagline em { font-style: normal; font-weight: 300; color: rgba(255,255,255,0.55); display: block; font-size: 0.5em; letter-spacing: 0.06em; margin-top: var(--s-4); text-transform: uppercase; font-weight: 500; } .hero__sub { font-size: var(--text-md); color: rgba(255,255,255,0.80); margin-top: var(--s-6); max-width: 40ch; line-height: 1.65; position: relative; z-index: 1; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-10); position: relative; z-index: 1; } .btn-white { display: inline-flex; align-items: center; gap: var(--s-3); padding: 0.95rem 1.6rem; background: #fff; color: var(--accent-deep); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); text-decoration: none; transition: background var(--ease-fast), transform var(--ease-fast), box-shadow var(--ease-fast); box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .btn-white svg { transition: transform var(--ease); } .btn-white:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25); } .btn-white:hover svg { transform: translateX(3px); } .btn-outline-white { display: inline-flex; align-items: center; gap: var(--s-3); padding: 0.95rem 1.6rem; color: #fff; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); text-decoration: none; border: 1.5px solid rgba(255,255,255,0.45); transition: border-color var(--ease-fast), background var(--ease-fast), transform var(--ease-fast); } .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.06); transform: translateY(-1px); } .hero__credentials { display: flex; gap: var(--s-6); margin-top: var(--s-12); flex-wrap: wrap; position: relative; z-index: 1; padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.15); } .hero__credentials > div { display: flex; flex-direction: column; gap: 2px; } .hero__credentials .num { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -0.015em; line-height: 1; } .hero__credentials .lbl { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 600; } @media (max-width: 880px) { .hero { grid-template-columns: 1fr; min-height: auto; } .hero__photo { min-height: 380px; } .hero__logo-overlay { bottom: var(--s-6); left: var(--s-6); gap: var(--s-3); } .hero__logo-overlay .l1 { font-size: 1.125rem; } .hero__logo-overlay .l2 { font-size: 0.75rem; } } /* Word rotator — Be / Think / Build / Stay → Dynamic */ .word-rotator { display: inline-flex; align-items: flex-start; height: 1em; overflow: hidden; vertical-align: top; line-height: inherit; /* slightly negative letter-spacing read better with the rest of the tagline */ } .word-rotator__track { display: flex; flex-direction: column; animation: word-cycle 9.6s infinite; will-change: transform; } .word-rotator__track > span { height: 1em; line-height: 1; white-space: nowrap; } /* Four verbs + duplicated first for a seamless loop = 5 stops */ @keyframes word-cycle { /* hold Be */ 0%, 20% { transform: translateY(0); } /* slide → Think */ 25%, 45% { transform: translateY(-1em); } /* slide → Build */ 50%, 70% { transform: translateY(-2em); } /* slide → Stay */ 75%, 95% { transform: translateY(-3em); } /* slide → Be (the duplicate) */ 100% { transform: translateY(-4em); } } /* Use a soft easing between holds */ .word-rotator__track { animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .word-rotator__track { animation: none; transform: none; } } /* HERO VARIANT — FULL-BLEED (photo behind text) */ body[data-hero="full"] .hero { grid-template-columns: 1fr; min-height: min(820px, 92vh); } body[data-hero="full"] .hero__photo { position: absolute; inset: 0; width: 100%; } body[data-hero="full"] .hero__photo::after { background: linear-gradient(135deg, color-mix(in oklab, var(--accent-deeper) 88%, transparent) 0%, color-mix(in oklab, var(--accent-deep) 55%, transparent) 60%, rgba(0,0,0,0.4) 100%); } body[data-hero="full"] .hero__photo .hero__img { filter: brightness(0.7); } body[data-hero="full"] .hero__purple { background: transparent; position: relative; z-index: 2; max-width: 720px; padding: clamp(var(--s-16), 10vw, var(--s-32)) clamp(var(--s-6), 5vw, var(--s-16)); } body[data-hero="full"] .hero__purple::before, body[data-hero="full"] .hero__purple::after { display: none; } body[data-hero="full"] .hero__logo-overlay { display: none; } /* HERO VARIANT — STACKED (text top on accent, photo below) */ body[data-hero="stacked"] .hero { grid-template-columns: 1fr; min-height: auto; } body[data-hero="stacked"] .hero__purple { padding-block: clamp(var(--s-16), 10vw, var(--s-24)); text-align: left; } body[data-hero="stacked"] .hero__purple .inner { max-width: var(--content-wide); margin-inline: auto; width: 100%; padding-inline: clamp(var(--s-5), 5vw, var(--s-12)); } body[data-hero="stacked"] .hero__photo { height: 60vh; min-height: 460px; order: 2; } body[data-hero="stacked"] .hero__credentials { border-top: none; padding-top: 0; } /* ============================================= TRUST STRIP — small badge row between hero & services ============================================= */ .trust-strip { background: var(--ink); color: rgba(255,255,255,0.85); padding-block: var(--s-6); border-bottom: 1px solid rgba(255,255,255,0.06); } .trust-strip__inner { display: flex; align-items: center; justify-content: center; gap: clamp(var(--s-8), 8vw, var(--s-24)); flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.75); } .trust-item svg { color: var(--accent-soft); flex-shrink: 0; } @media (max-width: 768px) { .trust-strip__inner { justify-content: flex-start; } .trust-item { font-size: 0.7rem; } } /* ============================================= SERVICES STRIP — 3 columns on accent ============================================= */ .services { background: var(--accent); color: #fff; position: relative; overflow: hidden; } .services::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 400px at 10% 10%, rgba(255,255,255,0.06), transparent 70%), radial-gradient(600px 300px at 90% 90%, rgba(0,0,0,0.18), transparent 60%); pointer-events: none; } .services__head { text-align: center; padding-block: clamp(var(--s-16), 9vw, var(--s-24)) clamp(var(--s-8), 4vw, var(--s-12)); position: relative; z-index: 1; } .services__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.65); margin-bottom: var(--s-3); } .services__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: #fff; letter-spacing: -0.02em; max-width: 22ch; margin-inline: auto; line-height: 1.02; } .services__title em { font-style: normal; color: rgba(255,255,255,0.5); font-weight: 400; } .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; z-index: 1; } .service-item { padding: clamp(var(--s-8), 4vw, var(--s-12)) clamp(var(--s-6), 3vw, var(--s-10)); border-right: 1px solid rgba(255,255,255,0.16); position: relative; transition: background var(--ease); cursor: pointer; text-decoration: none; color: inherit; display: block; } .service-item:last-child { border-right: none; } .service-item:hover { background: rgba(0,0,0,0.12); } .service-item__num { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: var(--s-6); } .service-item__icon { color: #fff; margin-bottom: var(--s-6); opacity: 0.92; transition: transform var(--ease); } .service-item:hover .service-item__icon { transform: translateY(-3px); } .service-item__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-bottom: var(--s-4); line-height: 1.1; } .service-item__desc { font-size: 0.95rem; color: rgba(255,255,255,0.78); line-height: 1.7; margin-bottom: var(--s-6); } .service-item__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); } .service-item__list li { font-size: 0.85rem; color: rgba(255,255,255,0.82); display: flex; align-items: center; gap: var(--s-2); padding-left: 0; } .service-item__list li::before { content: ''; display: inline-block; width: 14px; height: 1.5px; background: rgba(255,255,255,0.55); flex-shrink: 0; } .service-item__arrow { margin-top: var(--s-8); display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .service-item__arrow svg { transition: transform var(--ease); } .service-item:hover .service-item__arrow svg { transform: translateX(4px); } @media (max-width: 880px) { .services__grid { grid-template-columns: 1fr; } .service-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.16); } .service-item:last-child { border-bottom: none; } } /* SERVICES VARIANT — CARDS on white surface */ body[data-services="cards"] .services { background: var(--surface-2); color: var(--text); padding-block: clamp(var(--s-16), 8vw, var(--s-24)); } body[data-services="cards"] .services::before { display: none; } body[data-services="cards"] .services__head { padding-top: 0; } body[data-services="cards"] .services__title { color: var(--text); } body[data-services="cards"] .services__title em { color: var(--accent); } body[data-services="cards"] .services__eyebrow { color: var(--accent); } body[data-services="cards"] .services__grid { max-width: var(--content-wide); margin: 0 auto; padding-inline: clamp(var(--s-5), 5vw, var(--s-12)); gap: var(--s-5); } body[data-services="cards"] .service-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-8); } body[data-services="cards"] .service-item:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--accent) 25%, var(--line)); } body[data-services="cards"] .service-item__icon { color: var(--accent); opacity: 1; } body[data-services="cards"] .service-item__num { color: var(--text-faint); } body[data-services="cards"] .service-item__title { color: var(--text); } body[data-services="cards"] .service-item__desc { color: var(--text-body); } body[data-services="cards"] .service-item__list li { color: var(--text-body); } body[data-services="cards"] .service-item__list li::before { background: var(--accent); } body[data-services="cards"] .service-item__arrow { color: var(--accent); } /* ============================================= PROCESS — How we work, 4 numbered steps ============================================= */ .process { padding-block: clamp(var(--s-16), 10vw, var(--s-24)); background: var(--surface); position: relative; } .process__head { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-12); margin-bottom: var(--s-16); align-items: end; } @media (max-width: 768px) { .process__head { grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-10); } } .process__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); } .process__eyebrow::before { content: ''; width: 32px; height: 1.5px; background: var(--accent); } .process__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--text); letter-spacing: -0.025em; line-height: 1.02; } .process__title em { font-style: normal; color: var(--accent); font-weight: 400; } .process__lead { font-size: var(--text-md); color: var(--text-body); line-height: 1.7; max-width: 56ch; } .process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); counter-reset: step; border-top: 1px solid var(--line); } @media (max-width: 880px) { .process__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .process__steps { grid-template-columns: 1fr; } } .process-step { padding: var(--s-8) var(--s-6) var(--s-8) 0; position: relative; border-right: 1px solid var(--line); } .process-step:last-child { border-right: none; } @media (max-width: 880px) { .process-step:nth-child(2n) { border-right: none; } } @media (max-width: 480px) { .process-step { border-right: none; border-bottom: 1px solid var(--line); } .process-step:last-child { border-bottom: none; } } .process-step::before { content: ''; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--accent); } .process-step__num { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--accent); margin-top: var(--s-4); margin-bottom: var(--s-3); } .process-step__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: var(--s-3); line-height: 1.15; } .process-step__body { font-size: 0.9375rem; color: var(--text-body); line-height: 1.65; } /* ============================================= MANIFESTO — Be / Think / Build / Stay → Dynamic ============================================= */ .manifesto { background: var(--ink); color: #fff; padding-block: clamp(var(--s-16), 10vw, var(--s-24)); position: relative; overflow: hidden; } .manifesto::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 500px at 90% 10%, color-mix(in oklab, var(--accent) 32%, transparent), transparent 60%), radial-gradient(900px 500px at 10% 90%, color-mix(in oklab, var(--accent-deep) 40%, transparent), transparent 60%); pointer-events: none; } .manifesto__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-10); position: relative; z-index: 1; } .manifesto__eyebrow::before { content: ''; width: 32px; height: 1.5px; background: rgba(255,255,255,0.5); } .manifesto__list { display: flex; flex-direction: column; position: relative; z-index: 1; } .manifesto__line { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 1rem + 9vw, 8.5rem); letter-spacing: -0.035em; line-height: 1.0; display: flex; align-items: baseline; gap: clamp(var(--s-4), 2vw, var(--s-8)); padding-block: clamp(var(--s-2), 1vw, var(--s-4)); border-bottom: 1px solid rgba(255,255,255,0.10); opacity: 0; transform: translateX(-30px); transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--manifesto-delay, 0ms); } .manifesto__line:first-child { border-top: 1px solid rgba(255,255,255,0.10); } .manifesto.in .manifesto__line { opacity: 1; transform: none; } .manifesto__verb { color: rgba(255,255,255,0.55); font-weight: 400; font-style: italic; font-size: 0.55em; letter-spacing: 0.02em; flex-shrink: 0; position: relative; top: -0.25em; } .manifesto__verb::after { content: '·'; margin-left: 0.45em; color: var(--accent-soft); font-style: normal; opacity: 0.8; } .manifesto__word { color: #fff; letter-spacing: -0.04em; } .manifesto__word--outlined { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.55); text-stroke: 1.5px rgba(255,255,255,0.55); } .manifesto__line:hover .manifesto__word--outlined { -webkit-text-stroke-color: var(--accent-soft); text-stroke-color: var(--accent-soft); } .manifesto__foot { margin-top: var(--s-10); font-size: var(--text-md); color: rgba(255,255,255,0.65); max-width: 58ch; line-height: 1.6; position: relative; z-index: 1; } .manifesto__foot strong { color: #fff; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .manifesto__line { opacity: 1; transform: none; } } @media (max-width: 640px) { .manifesto__line { flex-wrap: wrap; gap: 0; } .manifesto__verb { top: 0; font-size: 0.5em; width: 100%; margin-bottom: 4px; } .manifesto__verb::after { display: none; } } /* ============================================= ABOUT — Who / What ============================================= */ .about { background: var(--surface-2); padding-block: clamp(var(--s-16), 9vw, var(--s-24)); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-12), 6vw, var(--s-20)); align-items: start; } @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: var(--s-12); } } .about-col__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: var(--s-4); } .about-col h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: var(--s-6); line-height: 1.05; } .about-col__divider { width: 56px; height: 2px; background: var(--accent); margin-bottom: var(--s-6); } .about-col p { font-size: var(--text-md); color: var(--text-body); line-height: 1.75; max-width: 52ch; } .about-col p + p { margin-top: var(--s-4); } .about-col__signature { margin-top: var(--s-6); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--text); letter-spacing: 0.04em; display: flex; align-items: center; gap: var(--s-3); } .about-col__signature .badge { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; box-shadow: 0 0 0 4px var(--accent-pale); } /* ============================================= CTA SECTION ============================================= */ .cta { background: var(--ink); padding-block: clamp(var(--s-16), 9vw, var(--s-24)); text-align: center; position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 400px at 20% 0%, color-mix(in oklab, var(--accent) 35%, transparent), transparent 60%), radial-gradient(700px 400px at 80% 100%, color-mix(in oklab, var(--accent-deep) 50%, transparent), transparent 60%); pointer-events: none; } .cta__inner { position: relative; z-index: 1; } .cta__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.65); margin-bottom: var(--s-4); } .cta__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: #fff; letter-spacing: -0.025em; line-height: 1.02; margin-bottom: var(--s-5); } .cta__title em { font-style: normal; color: var(--accent-soft); font-weight: 400; } .cta__sub { font-size: var(--text-md); color: rgba(255,255,255,0.72); max-width: 52ch; margin-inline: auto; margin-bottom: var(--s-8); line-height: 1.7; } .cta__actions { display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: center; } .cta__contact-line { margin-top: var(--s-8); font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 600; } .cta__contact-line a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1px; margin-inline: var(--s-2); transition: border-color var(--ease); } .cta__contact-line a:hover { border-color: #fff; } /* ============================================= FOOTER ============================================= */ .site-footer { background: var(--ink-2); color: rgba(255,255,255,0.7); padding-block: clamp(var(--s-12), 6vw, var(--s-16)) var(--s-8); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-12); padding-bottom: var(--s-10); border-bottom: 1px solid rgba(255,255,255,0.10); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); padding-bottom: var(--s-6); } } .footer-brand { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); } .footer-brand-text .l1 { font-family: var(--font-display); font-weight: 800; font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; } .footer-brand-text .l2 { font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 2px; } .footer-blurb { font-size: 0.9375rem; color: rgba(255,255,255,0.6); line-height: 1.65; max-width: 38ch; } .footer-heading { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--s-5); } .footer-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); } .footer-list a { font-size: 0.9375rem; color: rgba(255,255,255,0.78); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-3); } .footer-list a:hover { color: #fff; } .footer-list svg { color: var(--accent-soft); flex-shrink: 0; } .footer-bottom { margin-top: var(--s-6); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-size: 0.8125rem; color: rgba(255,255,255,0.4); flex-wrap: wrap; } .footer-bottom a { color: rgba(255,255,255,0.55); text-decoration: none; } .footer-bottom a:hover { color: #fff; } /* ============================================= CONTACT PAGE ============================================= */ .contact-hero { background: var(--ink); color: #fff; padding-block: clamp(var(--s-20), 12vw, var(--s-32)) clamp(var(--s-12), 7vw, var(--s-20)); position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.08); } .contact-hero::before { content: ''; position: absolute; top: -150px; right: -150px; width: 600px; height: 600px; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 50%, transparent) 0%, transparent 60%); pointer-events: none; } .contact-hero::after { content: ''; position: absolute; bottom: -150px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, color-mix(in oklab, var(--accent-deep) 60%, transparent) 0%, transparent 60%); pointer-events: none; } .contact-hero__inner { position: relative; z-index: 1; max-width: var(--content); } .contact-hero__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); } .contact-hero__eyebrow::before { content: ''; width: 32px; height: 1.5px; background: rgba(255,255,255,0.65); } .contact-hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 0.98; margin-bottom: var(--s-5); } .contact-hero__title em { font-style: normal; color: var(--accent-soft); font-weight: 300; } .contact-hero__sub { font-size: var(--text-md); color: rgba(255,255,255,0.72); max-width: 54ch; line-height: 1.65; } /* Contact methods row (Phone / Email / Hours / Service Area) */ .contact-hero__methods { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: var(--s-8); border-top: 1px solid rgba(255,255,255,0.14); } @media (max-width: 880px) { .contact-hero__methods { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .contact-hero__methods { grid-template-columns: 1fr; } } .ch-method { display: flex; flex-direction: column; gap: 6px; padding: var(--s-2) var(--s-5) var(--s-2) var(--s-5); padding-left: 0; border-right: 1px solid rgba(255,255,255,0.10); text-decoration: none; color: inherit; transition: transform var(--ease-fast); } .ch-method:not(.ch-method--static):hover { transform: translateY(-2px); } .ch-method:not(.ch-method--static):hover .ch-method__val { color: var(--accent-soft); } .ch-method:first-child { padding-left: 0; } .ch-method:last-child { border-right: none; } @media (max-width: 880px) { .ch-method:nth-child(2) { border-right: none; } .ch-method:nth-child(3), .ch-method:nth-child(4) { padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.10); margin-top: var(--s-3); } .ch-method:nth-child(3) { padding-left: 0; } } @media (max-width: 480px) { .ch-method { border-right: none; padding-left: 0; } .ch-method:nth-child(n+2) { padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.10); margin-top: var(--s-3); } } .ch-method__lbl { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.50); } .ch-method__val { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: -0.005em; transition: color var(--ease-fast); line-height: 1.2; } .ch-method__hint { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: rgba(255,255,255,0.50); letter-spacing: 0; text-transform: none; line-height: 1.3; } /* Body */ .contact-body { padding-block: clamp(var(--s-16), 8vw, var(--s-24)); background: var(--surface); } .contact-body__inner { display: flex; flex-direction: column; gap: var(--s-12); align-items: stretch; } /* Form */ .contact-form-box { background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(var(--s-8), 5vw, var(--s-16)); box-shadow: var(--shadow-md); } .contact-form-box__head { margin-bottom: var(--s-10); padding-bottom: var(--s-8); border-bottom: 1px solid var(--line); } .contact-form-box__eyebrow { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: var(--s-3); } .contact-form-box h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--text); margin-bottom: var(--s-3); letter-spacing: -0.02em; line-height: 1.05; } .contact-form-box .form-sub { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 0; } /* Service area strip — full width below form */ .service-area-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-6) 0 0; } .service-area-strip__lbl { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .service-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); } .service-tag { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.8rem; background: #fff; color: var(--text); border-radius: var(--radius-full); border: 1px solid var(--line); letter-spacing: 0.02em; transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast); } .service-tag:hover { background: var(--accent-pale); color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); } /* Form */ .contact-form-box { background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(var(--s-8), 4vw, var(--s-12)); box-shadow: var(--shadow-md); } .contact-form-box h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--text); margin-bottom: var(--s-2); letter-spacing: -0.015em; } .contact-form-box .form-sub { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: var(--s-8); } .form-group { margin-bottom: var(--s-5); position: relative; } .form-group label { display: block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-muted); margin-bottom: var(--s-2); } .form-group label .req { color: var(--accent); margin-left: 2px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.85rem 1rem; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-md); font-size: 1rem; color: var(--text); outline: none; transition: border-color var(--ease-fast), box-shadow var(--ease-fast), background var(--ease-fast); font-family: var(--font-body); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-faint); } .form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--line-2); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 12%, transparent); } .form-group textarea { resize: vertical; min-height: 130px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } } /* Service-needed pill picker */ .pill-group { display: flex; flex-wrap: wrap; gap: var(--s-2); } .pill-group input { position: absolute; opacity: 0; pointer-events: none; } .pill-group label { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.55rem 1rem; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-full); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--text-body); cursor: pointer; letter-spacing: 0.02em; text-transform: none; margin-bottom: 0; transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast), transform var(--ease-fast); } .pill-group label:hover { border-color: var(--line-2); } .pill-group input:checked + label { background: var(--accent); color: #fff; border-color: var(--accent); } .pill-group input:focus-visible + label { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); } .btn-purple { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; padding: 1.05rem 1.5rem; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; border: none; margin-top: var(--s-3); transition: background var(--ease-fast), transform var(--ease-fast), box-shadow var(--ease-fast); box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--accent) 50%, black); } .btn-purple:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -6px color-mix(in oklab, var(--accent) 65%, black); } .btn-purple svg { transition: transform var(--ease); } .btn-purple:hover svg { transform: translate(2px, -2px); } .btn-purple:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .form-disclaimer { font-size: 0.8125rem; color: var(--text-muted); text-align: center; margin-top: var(--s-4); line-height: 1.5; } .form-success { display: none; margin-top: var(--s-5); padding: var(--s-5); background: color-mix(in oklab, var(--accent) 8%, white); border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--line)); border-radius: var(--radius-md); font-size: 0.9375rem; font-weight: 500; color: var(--accent-deep); text-align: left; display: none; } .form-success.show { display: flex; align-items: center; gap: var(--s-3); } .form-success svg { color: var(--accent); flex-shrink: 0; } /* ---------- Logo Mark ---------- */ .logo-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-sm); }