/* ========================================================================= Davidson Law Group — "Your Texas Legacy" One design system · three themes (Heritage / Bold / Soft) Switch the whole site with ========================================================================= */ /* ---------- Tokens ---------- */ :root{ /* --- BRAND (constant across every theme) — scraped from the live site --- */ --brand:#22457F; /* signature navy */ --brand-600:#1B3A6B; /* hover / press */ --brand-deep:#1C3A6E; /* navy dark enough to read as text on light */ --brand-bright:#7BA6E6; /* light azure — accents on dark backgrounds */ --on-brand:#ffffff; /* text/icon on top of a solid navy fill */ --brand-rgb:34,69,127; /* for rgba() usage */ --slate:#38404D; /* brand slate */ --slate-900:#20252E; --slate-950:#161A21; --tan:#BDA380; /* warm secondary */ --tan-soft:#EFE7DB; --cream:#FBFAF6; /* warm paper */ --ink:#1E232B; --muted:#606a78; --line:#E7E3DB; --paper:#FBFAF6; /* --- Fluid type scale (clamp = responsive without breakpoints) --- */ --step--1:clamp(.82rem,.78rem + .2vw,.94rem); --step-0: clamp(1rem,.96rem + .22vw,1.12rem); --step-1: clamp(1.18rem,1.08rem + .5vw,1.45rem); --step-2: clamp(1.5rem,1.28rem + 1.05vw,2.15rem); --step-3: clamp(2rem,1.55rem + 2.1vw,3.1rem); --step-4: clamp(2.6rem,1.85rem + 3.6vw,4.8rem); --container:1200px; --gutter:clamp(20px,5vw,64px); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --sans:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Fraunces",Georgia,"Times New Roman",serif; /* --- THEMEABLE (default = "Heritage / Light-Clean") --- */ --bg:var(--paper); --bg-tint:#F4EEE4; --surface:#ffffff; --surface-2:#FBF7F0; --text:var(--ink); --text-soft:var(--muted); --hair:var(--line); --accent:var(--brand); --accent-ink:var(--brand-deep); --brand-fill:var(--brand); --on-fill:var(--on-brand); --heading:var(--slate); --logo-ink:var(--slate); --display-family:var(--serif); --display-weight:600; --display-transform:none; --display-spacing:-.01em; --body-family:var(--sans); --radius:16px; --radius-sm:12px; --radius-pill:999px; --shadow:0 1px 2px rgba(32,37,46,.05),0 18px 40px -22px rgba(32,37,46,.28); --shadow-lg:0 30px 70px -34px rgba(32,37,46,.45); --card:var(--surface); --card-hair:var(--hair); --nav-bg:rgba(251,250,246,.82); } /* Theme 2 — "Bold / Editorial": dark slate canvas, oversized uppercase, sharp */ [data-theme="bold"]{ --bg:#14181F; --bg-tint:#1B2029; --surface:#1E242E; --surface-2:#242B36; --text:#EEF1F5; --text-soft:#9AA6B4; --hair:rgba(255,255,255,.11); --accent:var(--brand-bright); --accent-ink:var(--brand-bright); --brand-fill:var(--brand-bright); --on-fill:#12233f; --heading:#F6F8FA; --logo-ink:#ffffff; --display-family:var(--sans); --display-weight:800; --display-transform:uppercase; --display-spacing:.005em; --radius:4px; --radius-sm:4px; --radius-pill:4px; --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 50px -26px rgba(0,0,0,.7); --shadow-lg:0 40px 90px -40px rgba(0,0,0,.8); --card:var(--surface); --card-hair:var(--hair); --nav-bg:rgba(20,24,31,.78); } /* Theme 3 — "Soft / Warm Depth": tinted gradients, glass surfaces, rounded */ [data-theme="soft"]{ --bg:#F3EADB; --bg-tint:#EADFCB; --surface:rgba(255,255,255,.72); --surface-2:rgba(255,255,255,.5); --text:#33302A; --text-soft:#6d6455; --hair:rgba(89,74,45,.16); --accent:var(--brand); --accent-ink:var(--brand-deep); --brand-fill:var(--brand); --on-fill:var(--on-brand); --heading:#2c2a24; --logo-ink:#4a4436; --display-family:var(--serif); --display-weight:600; --display-transform:none; --display-spacing:-.015em; --radius:24px; --radius-sm:18px; --radius-pill:999px; --shadow:0 2px 6px rgba(120,96,48,.10),0 26px 50px -26px rgba(120,96,48,.4); --shadow-lg:0 40px 80px -34px rgba(120,96,48,.5); --card:var(--surface); --card-hair:var(--hair); --nav-bg:rgba(243,234,219,.7); } [data-theme="soft"] body{ background: radial-gradient(1200px 700px at 80% -10%, rgba(var(--brand-rgb),.22), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(189,163,128,.28), transparent 55%), linear-gradient(180deg,#F6EEE1,#F0E4D0); background-attachment:fixed; } /* ---------- Reset / base ---------- */ *{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(--bg);color:var(--text); font-family:var(--body-family);font-size:var(--step-0);line-height:1.65; font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{ font-family:var(--display-family);font-weight:var(--display-weight); color:var(--heading);line-height:1.08;letter-spacing:var(--display-spacing); text-transform:var(--display-transform);margin:0; } h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-1)} p{margin:0 0 1rem} ::selection{background:var(--brand-fill);color:var(--on-fill)} :focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px} .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%} .section{padding:clamp(64px,9vw,130px) 0;position:relative} .section--tint{background:var(--bg-tint)} .kicker{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--sans);font-weight:700;font-size:var(--step--1); letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:1rem; } .kicker::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block} .lead{font-size:var(--step-1);color:var(--text-soft);max-width:60ch;font-weight:400;line-height:1.5} .section-head{max-width:70ch;margin-bottom:clamp(34px,4vw,60px)} .section-head.center{margin-inline:auto;text-align:center} .section-head.center .kicker::before{display:none} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;border:0; font-family:var(--sans);font-weight:700;font-size:var(--step-0); padding:.92em 1.5em;border-radius:var(--radius-pill); transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s; text-transform:var(--display-transform);letter-spacing:.01em;line-height:1; } .btn svg{width:1.05em;height:1.05em} .btn-primary{background:var(--brand-fill);color:var(--on-fill);box-shadow:0 10px 24px -10px rgba(var(--brand-rgb),.45)} .btn-primary:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(var(--brand-rgb),.8)} .btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--hair)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px)} .btn-lg{padding:1.08em 1.9em;font-size:var(--step-1)} .btn-block{width:100%;justify-content:center} .link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans); font-weight:700;color:var(--accent-ink);font-size:var(--step--1);letter-spacing:.02em} .link-arrow svg{width:1em;height:1em;transition:transform .3s var(--ease)} .link-arrow:hover svg{transform:translateX(4px)} /* ---------- Scroll progress ---------- */ .scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:120; background:linear-gradient(90deg,var(--brand),var(--brand-bright));box-shadow:0 0 12px rgba(var(--brand-rgb),.6)} /* ---------- Nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .45s var(--ease),background .4s,box-shadow .4s,padding .4s} .nav-inner{ display:flex;align-items:center;justify-content:space-between;gap:1.4rem; max-width:var(--container);margin:0 auto;padding:18px var(--gutter);transition:padding .4s; } .nav.scrolled{background:var(--nav-bg);backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--hair)} .nav.scrolled .nav-inner{padding-top:12px;padding-bottom:12px} .nav.hide{transform:translateY(-100%)} .brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0} .brand-logo{ width:190px;height:42px; background:var(--logo-ink); -webkit-mask:url(../assets/img/logo.png) left center/contain no-repeat; mask:url(../assets/img/logo.png) left center/contain no-repeat; transition:background .4s; } .nav-links{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0} .nav-links a{position:relative;font-family:var(--sans);font-weight:600;font-size:.96rem; color:var(--text);padding:.5rem .8rem;border-radius:8px;transition:color .25s;white-space:nowrap} .nav-links a:hover{color:var(--accent-ink)} .nav-links a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px; background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .nav-links a:hover::after{transform:scaleX(1)} /* dropdown */ .has-menu{position:relative} .dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px); min-width:250px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transition:.28s var(--ease);z-index:5} .has-menu:hover .dd,.has-menu:focus-within .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .dd a{display:block;padding:.6rem .8rem;border-radius:8px;font-size:.92rem;font-weight:600} .dd a::after{display:none} .dd a:hover{background:var(--bg-tint);color:var(--accent-ink)} .nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0} .nav-call{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-weight:700; font-size:.95rem;color:var(--text)} .nav-call svg{width:1.05em;height:1.05em;color:var(--accent-ink)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;color:var(--text)} .nav-toggle svg{width:26px;height:26px} /* nav over dark hero */ .nav.on-hero:not(.scrolled)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(20,24,31,.55),transparent)} .nav.on-hero:not(.scrolled) .nav-links a, .nav.on-hero:not(.scrolled) .nav-call{color:rgba(255,255,255,.92)} .nav.on-hero:not(.scrolled) .brand-logo{background:#fff} .nav.on-hero:not(.scrolled) .nav-call svg{color:var(--brand-bright)} .nav.on-hero:not(.scrolled) .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff} /* mobile menu */ .m-menu{position:fixed;inset:0;z-index:110;background:var(--slate-950);color:#fff; padding:88px var(--gutter) 40px;transform:translateY(-100%);transition:transform .5s var(--ease); overflow-y:auto;display:flex;flex-direction:column;gap:.2rem} .m-menu.open{transform:translateY(0)} .m-menu a{font-family:var(--serif);font-size:1.5rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff} .m-menu .btn{margin-top:1.4rem;font-family:var(--sans);font-size:var(--step-0);border-bottom:0;padding:1.05em 1.5em} .m-menu .btn-primary{color:var(--on-fill)} .m-menu .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)} .m-close{position:absolute;top:22px;right:var(--gutter);background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer} .m-close svg{width:30px;height:30px} /* ========================================================================= HERO — scroll-reactive image hero (playbook §3, adapted for a photo) ========================================================================= */ .hero-scroll{position:relative;height:250vh;background:var(--slate-950)} .hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden} .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; will-change:transform;transform:scale(1.06)} .hero-scrim{position:absolute;inset:0;pointer-events:none;background: linear-gradient(180deg,rgba(20,24,31,.55) 0%,rgba(20,24,31,.12) 26%,rgba(20,24,31,.2) 55%,rgba(20,24,31,.86) 100%), linear-gradient(90deg,rgba(20,24,31,.72) 0%,rgba(20,24,31,.28) 46%,transparent 78%)} .hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end; padding-bottom:clamp(48px,8vh,96px);pointer-events:none} .hero-content{max-width:min(760px,90%);pointer-events:auto} .hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--brand-bright); font-family:var(--sans);font-weight:700;letter-spacing:.2em;text-transform:uppercase; font-size:.8rem;margin-bottom:1.1rem} .hero-eyebrow::before{content:"";width:32px;height:2px;background:var(--brand-bright)} .hero-tagline{color:#fff;font-family:var(--serif);font-weight:600; font-size:clamp(2.5rem,1.5rem + 4vw,5.4rem);line-height:1;letter-spacing:-.015em} .hero-tagline .ln{display:block;overflow:hidden} .hero-tagline .word{display:inline-block;opacity:0;transform:translateY(110%); animation:heroWord 1s var(--ease-out) forwards} .hero-tagline .ln:nth-child(1) .word{animation-delay:.15s} .hero-tagline .ln:nth-child(2) .word{animation-delay:.32s} .hero-tagline .ln:nth-child(3) .word{animation-delay:.49s} .hero-tagline .tk{color:var(--brand-bright);font-style:italic} @keyframes heroWord{to{opacity:1;transform:none}} .hero-final{opacity:0;transform:translateY(22px);animation:heroFinal 1s .8s var(--ease-out) forwards} @keyframes heroFinal{to{opacity:1;transform:none}} .hero-lede{color:rgba(255,255,255,.9);font-size:var(--step-1);max-width:52ch; margin:1.5rem 0 1.8rem;line-height:1.5} .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.9rem} .hero-badges{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center} .hero-badge{display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.86); font-family:var(--sans);font-size:.9rem;font-weight:600} .hero-badge b{color:#fff;font-size:1.2rem;font-weight:800;font-family:var(--sans)} .hero-badge svg{width:1.15em;height:1.15em;color:var(--brand-bright)} .hero-scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%); color:rgba(255,255,255,.6);font-family:var(--sans);font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none} .hero-scrollcue span{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.6),transparent); animation:cue 1.8s var(--ease) infinite} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---------- Stats / trust bar ---------- */ .stats{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--surface-2)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair)} .stat{background:var(--surface-2);padding:clamp(28px,4vw,48px) clamp(18px,3vw,36px);text-align:center} .stat b{display:block;font-family:var(--serif);font-weight:600;color:var(--heading); font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);line-height:1} [data-theme="bold"] .stat b{font-family:var(--sans);font-weight:800} .stat b .suf{color:var(--accent-ink)} .stat span{display:block;margin-top:.5rem;font-family:var(--sans);font-weight:600; font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)} /* ---------- Practice areas ---------- */ .p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)} .p-card{position:relative;background:var(--card);border:1px solid var(--card-hair); border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column; transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s} .p-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(var(--brand-rgb),.5)} .p-card-img{aspect-ratio:16/10;overflow:hidden;position:relative} .p-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .p-card:hover .p-card-img img{transform:scale(1.07)} .p-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,24,31,.35))} .p-icon{position:absolute;left:16px;bottom:16px;z-index:2;width:46px;height:46px;border-radius:12px; background:var(--brand-fill);color:var(--on-fill);display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(var(--brand-rgb),.5)} .p-icon svg{width:24px;height:24px} .p-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1} .p-body h3{margin-bottom:.6rem} .p-body p{color:var(--text-soft);font-size:.98rem;margin-bottom:1.2rem;flex:1} .p-body .link-arrow{margin-top:auto} /* ---------- Split / feature ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center} .split.rev .split-media{order:2} .split-media{position:relative} .split-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover} .split-media .badge-float{position:absolute;bottom:-24px;left:-24px;background:var(--surface); border:1px solid var(--hair);border-radius:var(--radius-sm);padding:18px 22px;box-shadow:var(--shadow-lg); display:flex;align-items:center;gap:.9rem;max-width:78%} [data-theme="soft"] .split-media .badge-float{backdrop-filter:blur(8px)} .badge-float .bf-num{font-family:var(--serif);font-weight:600;font-size:2rem;color:var(--accent-ink);line-height:1} [data-theme="bold"] .badge-float .bf-num{font-family:var(--sans);font-weight:800} .badge-float small{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--text-soft);line-height:1.3} .checklist{list-style:none;padding:0;margin:1.6rem 0 2rem;display:grid;gap:.9rem} .checklist li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.02rem} .checklist svg{width:22px;height:22px;color:var(--accent-ink);flex-shrink:0;margin-top:.15rem} .checklist b{color:var(--heading);font-family:var(--sans)} /* ---------- Approach / pinned steps ---------- */ .approach{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:start} .approach-sticky{position:sticky;top:120px} .approach-visual{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;position:relative} .approach-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity .8s var(--ease),transform 1.2s var(--ease);transform:scale(1.05)} .approach-visual img.active{opacity:1;transform:scale(1)} .steps{display:flex;flex-direction:column;gap:clamp(20px,3vw,40px)} .step{padding:clamp(22px,2.5vw,34px);border-radius:var(--radius);border:1px solid var(--hair); background:var(--surface);transition:.5s var(--ease)} .step.active{border-color:rgba(var(--brand-rgb),.6);box-shadow:var(--shadow)} .step-n{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--accent-ink); display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem} [data-theme="bold"] .step-n{font-family:var(--sans);font-weight:800} .step-n .dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--hair);display:grid;place-items:center; font-size:.9rem;transition:.4s} .step.active .step-n .dot{background:var(--brand-fill);border-color:var(--brand-fill);color:var(--on-fill)} .step h3{margin-bottom:.5rem} .step p{color:var(--text-soft);margin:0} /* ---------- Attorneys ---------- */ .founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)} .founder{background:var(--card);border:1px solid var(--card-hair);border-radius:var(--radius); padding:clamp(24px,3vw,38px);position:relative;overflow:hidden} .founder::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-bright))} .founder-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.1rem} .founder-photo{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:center top; flex-shrink:0;border:3px solid var(--surface);box-shadow:var(--shadow)} .founder .role{font-family:var(--sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase; font-size:.75rem;color:var(--accent-ink);margin-bottom:.3rem} .founder h3{font-size:var(--step-2)} .founder p{color:var(--text-soft);font-size:.98rem} .founder .creds{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem} .chip{font-family:var(--sans);font-size:.76rem;font-weight:600;padding:.4em .8em;border-radius:var(--radius-pill); background:var(--bg-tint);color:var(--heading);border:1px solid var(--hair)} .team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,4vw,52px)} .team-card{background:var(--card);border:1px solid var(--card-hair);border-radius:var(--radius-sm); overflow:hidden;transition:.4s var(--ease)} .team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(var(--brand-rgb),.4)} .team-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;display:block; background:var(--bg-tint)} .team-card .tc-body{padding:16px 18px 20px} .team-card h4{font-family:var(--serif);font-weight:600;color:var(--heading);font-size:1.1rem;margin-bottom:.15rem;text-transform:none;letter-spacing:0} [data-theme="bold"] .team-card h4{font-family:var(--sans);font-weight:700} .team-card span{font-family:var(--sans);font-size:.82rem;color:var(--text-soft);font-weight:600} /* ---------- Recognition strip ---------- */ .recog{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,5vw,72px);align-items:center} .recog-item{text-align:center;max-width:200px} .recog-item b{display:block;font-family:var(--serif);font-weight:600;color:var(--heading);font-size:1.5rem;line-height:1} [data-theme="bold"] .recog-item b{font-family:var(--sans);font-weight:800} .recog-item span{font-family:var(--sans);font-size:.82rem;color:var(--text-soft);font-weight:600;letter-spacing:.03em} /* ---------- Locations ---------- */ .loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)} .loc-card{background:var(--card);border:1px solid var(--card-hair);border-radius:var(--radius); padding:clamp(22px,2.4vw,30px);transition:.45s var(--ease);display:flex;flex-direction:column;gap:.5rem} .loc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(var(--brand-rgb),.5)} .loc-card .loc-top{display:flex;align-items:center;gap:.6rem;color:var(--accent-ink)} .loc-card .loc-top svg{width:1.2em;height:1.2em} .loc-card h3{font-size:1.25rem} .loc-card .loc-addr{font-style:normal;font-size:.92rem;color:var(--text-soft);line-height:1.45} .loc-card .loc-phone{font-family:var(--sans);font-weight:800;font-size:1.15rem;color:var(--heading); margin-top:.2rem;transition:color .25s;width:fit-content} .loc-card .loc-phone:hover{color:var(--accent-ink)} .loc-card .loc-hours{font-size:.86rem;color:var(--text-soft);border-top:1px solid var(--hair);padding-top:.8rem;margin-top:.4rem} .loc-card .link-arrow{margin-top:.3rem} /* ---------- CTA band ---------- */ .cta{position:relative;overflow:hidden;background:var(--slate-900);color:#fff; padding:clamp(56px,8vw,110px) 0;text-align:center} .cta::before{content:"";position:absolute;inset:0;background: radial-gradient(700px 380px at 78% -10%,rgba(var(--brand-rgb),.28),transparent 60%), radial-gradient(600px 340px at 10% 120%,rgba(189,163,128,.22),transparent 55%)} .cta .container{position:relative} .cta h2{color:#fff;max-width:20ch;margin:0 auto 1.1rem} .cta p{color:rgba(255,255,255,.82);font-size:var(--step-1);max-width:56ch;margin:0 auto 2rem} .cta .hero-cta{justify-content:center} .cta .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff} .cta .btn-ghost:hover{border-color:var(--brand-bright);color:var(--brand-bright)} /* ---------- Footer ---------- */ .footer{background:var(--slate-950);color:rgba(255,255,255,.72);padding:clamp(56px,7vw,90px) 0 32px} .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px); padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)} .footer .brand-logo{background:#fff;width:210px;height:44px;margin-bottom:1.1rem} .footer p{font-size:.92rem;color:rgba(255,255,255,.6);max-width:34ch} .footer h5{font-family:var(--sans);font-weight:700;letter-spacing:.1em;text-transform:uppercase; font-size:.78rem;color:#fff;margin:0 0 1.1rem} .footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .footer ul a{font-size:.92rem;color:rgba(255,255,255,.66);transition:color .25s} .footer ul a:hover{color:var(--brand-bright)} .footer-social{display:flex;gap:.7rem;margin-top:1.2rem} .footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18); display:grid;place-items:center;transition:.3s} .footer-social a:hover{background:var(--brand-bright);border-color:var(--brand-bright);color:#12233f} .footer-social svg{width:18px;height:18px} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem; padding-top:26px;font-size:.82rem;color:rgba(255,255,255,.5)} .footer-bottom .fb-links{display:flex;flex-wrap:wrap;gap:1.2rem} .footer-bottom a:hover{color:var(--brand-bright)} .disclaimer{margin-top:20px;font-size:.76rem;color:rgba(255,255,255,.4);max-width:90ch;line-height:1.55} /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s} /* ---------- Theme switcher (floating) ---------- */ .theme-switch{position:fixed;right:20px;bottom:20px;z-index:130;display:flex;gap:6px; background:var(--surface);border:1px solid var(--hair);padding:6px;border-radius:var(--radius-pill); box-shadow:var(--shadow-lg)} [data-theme="soft"] .theme-switch{backdrop-filter:blur(10px)} .theme-switch button{border:0;cursor:pointer;width:38px;height:38px;border-radius:50%; font-family:var(--sans);font-weight:700;font-size:.7rem;color:var(--text-soft);background:transparent; transition:.25s;display:grid;place-items:center;line-height:1} .theme-switch button:hover{background:var(--bg-tint);color:var(--text)} .theme-switch button.active{background:var(--brand-fill);color:var(--on-fill)} .theme-switch .sw-dot{width:14px;height:14px;border-radius:50%;border:2px solid currentColor} /* ---------- Responsive ---------- */ @media (max-width:1080px){ .p-grid,.loc-grid{grid-template-columns:repeat(2,1fr)} .team-grid{grid-template-columns:repeat(3,1fr)} .nav-links{display:none} .nav-toggle{display:grid;place-items:center} .nav-call span{display:none} } @media (max-width:680px){ /* collapse nav to logo + hamburger; CTA + call live in the mobile menu */ .nav-actions .btn-primary,.nav-call{display:none} .brand-logo{width:164px;height:36px} .team-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:820px){ .split,.approach,.founders{grid-template-columns:1fr} .split.rev .split-media{order:0} .approach-sticky{position:relative;top:0} .approach-visual{aspect-ratio:16/10} .stats-grid{grid-template-columns:repeat(2,1fr)} .footer-top{grid-template-columns:1fr 1fr} .split-media .badge-float{left:16px;bottom:16px} } @media (max-width:560px){ .p-grid,.loc-grid,.team-grid,.footer-top{grid-template-columns:1fr} .hero-scroll{height:200vh} .hero-badges{gap:1rem 1.4rem} .btn-lg{width:100%;justify-content:center} .hero-cta{flex-direction:column} } /* ========================================================================= STYLE GUIDE PAGE ========================================================================= */ .sg-hero{padding:clamp(120px,14vh,180px) 0 clamp(50px,7vw,90px);background:var(--bg-tint);border-bottom:1px solid var(--hair)} .sg-hero h1{font-size:var(--step-4);max-width:16ch} .sg-hero .lead{margin-top:1.2rem} .sg-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:700; font-size:var(--step--1);color:var(--accent-ink);margin-bottom:1.4rem} .sg-back svg{width:1em;height:1em} .sg-brandbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:2.4rem} .sg-swatch{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--hair);background:var(--surface)} .sg-swatch .chip-color{height:74px} .sg-swatch .meta{padding:12px 14px} .sg-swatch b{font-family:var(--sans);font-size:.9rem;color:var(--heading);display:block} .sg-swatch span{font-family:var(--sans);font-size:.76rem;color:var(--text-soft);letter-spacing:.03em} /* each themed direction renders in its own theme */ .sg-theme{padding:clamp(48px,7vw,96px) 0;background:var(--bg);color:var(--text);position:relative;isolation:isolate} .sg-theme[data-theme="soft"]{background: radial-gradient(900px 500px at 85% -10%,rgba(var(--brand-rgb),.22),transparent 60%), radial-gradient(700px 500px at -5% 10%,rgba(189,163,128,.3),transparent 55%), linear-gradient(180deg,#F6EEE1,#F0E4D0)} .sg-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,64px);align-items:start} .sg-num{font-family:var(--serif);font-size:clamp(3rem,2rem+4vw,5rem);line-height:.9;color:var(--accent);opacity:.5;margin-bottom:.5rem} [data-theme="bold"] .sg-num{font-family:var(--sans);font-weight:800} .sg-name{font-size:var(--step-3);margin-bottom:.3rem} .sg-tag{font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase; font-size:.8rem;color:var(--accent-ink);margin-bottom:1.2rem;display:block} .sg-theme p{color:var(--text-soft)} .sg-best{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem} .sg-best li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--text)} .sg-best svg{width:18px;height:18px;color:var(--accent-ink);flex-shrink:0;margin-top:.2rem} .sg-dots{display:flex;gap:8px;margin:1.4rem 0} .sg-dots span{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.12)} .sg-preview{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius); padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)} [data-theme="soft"] .sg-preview{backdrop-filter:blur(8px)} .sg-preview .pv-type{border-bottom:1px solid var(--hair);padding-bottom:1.2rem;margin-bottom:1.3rem} .sg-preview .pv-type h3{font-size:var(--step-2);margin-bottom:.2rem} .sg-preview .pv-type span{font-family:var(--sans);font-size:.8rem;color:var(--text-soft);letter-spacing:.04em} .sg-preview .pv-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1.3rem} .sg-mini-card{border:1px solid var(--hair);border-radius:var(--radius-sm);overflow:hidden;background:var(--card)} .sg-mini-card .mc-bar{height:6px;background:linear-gradient(90deg,var(--brand),var(--brand-bright))} .sg-mini-card .mc-body{padding:18px} .sg-mini-card h4{font-family:var(--display-family);font-weight:var(--display-weight);color:var(--heading); text-transform:var(--display-transform);font-size:1.15rem;margin-bottom:.4rem} .sg-mini-card p{font-size:.9rem;margin:0} @media (max-width:820px){.sg-grid{grid-template-columns:1fr}} /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important} .hero-media{transform:none!important} .hero-tagline .word,.hero-final{opacity:1!important;transform:none!important;animation:none!important} .hero-scrollcue{display:none} *{scroll-behavior:auto!important} }