/* ============================================================ Jansen Family Dentistry — shared styles Brand (unchanged from client's site): navy #003D68 · navy-deep #012A47 · slate #6C7A92 · mauve #9C8E90 mist #DCE3E8 · cream #F5F3EF · ink #22303C · brass #B99457 (stars only) Display: Cinzel · Body/UI: Figtree ============================================================ */ :root{ --navy:#003D68; --navy-deep:#012A47; --slate:#6C7A92; --slate-2:#93A1B5; --mauve:#9C8E90; --mist:#DCE3E8; --cream:#F5F3EF; --paper:#FBFAF7; --ink:#22303C; --ink-soft:#4A5763; --brass:#B99457; --line:#E4E0D8; --nav-h:74px; --ease:cubic-bezier(.22,.61,.36,1); --shadow-sm:0 2px 10px rgba(1,42,71,.06); --shadow-md:0 18px 50px -22px rgba(1,42,71,.35); } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%; scroll-padding-top:var(--nav-h);} body{ margin:0; background:var(--cream); color:var(--ink); font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{line-height:1.12; margin:0; font-weight:600;} p{margin:0 0 1em;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} .cinzel{font-family:"Cinzel",Georgia,serif; letter-spacing:.02em;} .wrap{width:min(1160px,92vw); margin-inline:auto;} .center{text-align:center;} .lead{font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--ink-soft);} .eyebrow{font-family:"Cinzel",serif; text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; color:var(--slate); font-weight:600;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;} /* Reveal on scroll (JS adds .js to ; no-JS shows everything) */ .js .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .js .reveal.in{opacity:1; transform:none;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .js .reveal{opacity:1 !important; transform:none !important; transition:none;} } /* ---------- Buttons ---------- */ .btn{ --bg:var(--navy); --fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.55em; background:var(--bg); color:var(--fg); padding:.92em 1.6em; border-radius:999px; font-family:"Figtree",sans-serif; font-weight:600; font-size:.98rem; letter-spacing:.01em; border:1.5px solid var(--bg); cursor:pointer; min-height:48px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .2s; box-shadow:0 10px 24px -14px rgba(0,61,104,.8); } .btn:hover{transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(0,61,104,.85);} .btn:focus-visible{outline:3px solid var(--brass); outline-offset:3px;} .btn.ghost{--bg:transparent; --fg:var(--navy); border-color:rgba(0,61,104,.35); box-shadow:none;} .btn.ghost:hover{background:var(--navy); color:#fff; border-color:var(--navy);} .btn.on-dark{--bg:#fff; --fg:var(--navy);} .btn.on-dark.ghost{--bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.55);} .btn.on-dark.ghost:hover{background:#fff; color:var(--navy);} /* ---------- Nav ---------- */ header.nav{position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:60; display:flex; align-items:center; transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; border-bottom:1px solid transparent;} header.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(1220px,94vw);} .brand{display:flex; flex-direction:column; line-height:1; color:#fff; transition:color .4s;} .brand b{font-family:"Cinzel",serif; font-weight:600; font-size:1.06rem; letter-spacing:.05em; white-space:nowrap;} .brand span{font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; opacity:.82; margin-top:3px;} nav.links{display:flex; align-items:center; gap:.2rem;} nav.links a{color:#fff; font-weight:500; font-size:.93rem; padding:.5em .72em; border-radius:8px; opacity:.9; white-space:nowrap; transition:opacity .2s, background .2s, color .3s;} nav.links a:hover{opacity:1; background:rgba(255,255,255,.12);} nav.links a[aria-current="page"]{opacity:1; font-weight:600;} nav.links a[aria-current="page"]::after{content:""; display:block; height:2px; background:var(--brass); border-radius:2px; margin-top:3px;} nav.links .btn{margin-left:.5rem; padding:.6em 1.1em; min-height:42px;} /* Solid (scrolled OR interior page) */ header.nav.solid{background:rgba(251,250,247,.94); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); border-color:var(--line);} header.nav.solid .brand{color:var(--navy);} header.nav.solid nav.links a{color:var(--navy);} header.nav.solid nav.links a:hover{background:rgba(0,61,104,.08);} .menu-toggle{display:none; width:46px; height:46px; border:0; background:transparent; cursor:pointer; padding:0; position:relative; z-index:70;} .menu-toggle span{display:block; width:24px; height:2px; background:#fff; margin:5px auto; border-radius:2px; transition:transform .3s var(--ease), opacity .2s, background .3s;} header.nav.solid .menu-toggle span{background:var(--navy);} body.menu-open .menu-toggle span{background:var(--navy);} body.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.menu-open .menu-toggle span:nth-child(2){opacity:0;} body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} #mobilePanel{position:fixed; inset:0; z-index:65; background:rgba(251,250,247,.98); backdrop-filter:blur(6px); display:flex; flex-direction:column; justify-content:center; padding:0 8vw; transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;} body.menu-open #mobilePanel{transform:translateX(0); visibility:visible;} #mobilePanel a{font-family:"Cinzel",serif; color:var(--navy); font-size:1.5rem; padding:14px 0; border-bottom:1px solid var(--line);} #mobilePanel a[aria-current="page"]{color:var(--brass);} #mobilePanel a.btn{margin-top:26px; font-family:"Figtree"; color:#fff; border-bottom:1.5px solid var(--navy);} /* ---------- Home hero (photo of smiling people) ---------- */ .home-hero{position:relative; min-height:92svh; display:flex; align-items:center; padding:var(--nav-h) 0 40px; overflow:hidden; background:var(--navy-deep);} .home-hero .photo{position:absolute; inset:0; z-index:0;} .home-hero .photo img{width:100%; height:100%; object-fit:cover; object-position:center 30%;} .home-hero .scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(1,26,46,.94) 0%, rgba(1,32,55,.82) 42%, rgba(1,32,55,.35) 72%, rgba(1,32,55,.15) 100%);} @media(max-width:760px){ .home-hero .scrim{background:linear-gradient(180deg, rgba(1,26,46,.7) 0%, rgba(1,26,46,.82) 55%, rgba(1,26,46,.95) 100%);} } .home-hero .inner{position:relative; z-index:2; width:min(1160px,92vw); margin-inline:auto;} .home-hero .col{max-width:640px;} .home-hero .eyebrow{color:var(--slate-2);} .home-hero h1{font-family:"Cinzel",serif; color:#fff; font-weight:600; letter-spacing:.02em; font-size:clamp(2.3rem,5.6vw,4.4rem); margin:.3em 0 .12em; text-shadow:0 6px 40px rgba(0,0,0,.35);} .home-hero .tag{font-family:"Cinzel",serif; color:#EBD9C4; font-size:clamp(1.15rem,2.6vw,1.7rem); letter-spacing:.03em;} .home-hero p.sub{color:rgba(255,255,255,.86); font-size:clamp(1rem,1.5vw,1.18rem); max-width:46ch; margin:1em 0 1.8em;} .home-hero .cta{display:flex; gap:.8rem; flex-wrap:wrap;} .home-hero .trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:30px; color:#fff;} .home-hero .trust .t b{font-family:"Cinzel",serif; font-size:1.5rem; display:block; line-height:1;} .home-hero .trust .t span{font-size:.82rem; color:rgba(255,255,255,.72);} .home-hero .trust .stars{color:var(--brass); letter-spacing:2px; font-size:1rem;} /* ---------- Interior page hero ---------- */ .page-hero{position:relative; padding:calc(var(--nav-h) + 54px) 0 54px; background:linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 100%); color:#fff; overflow:hidden;} .page-hero::after{content:""; position:absolute; right:-8%; top:-40%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(147,161,181,.25), transparent 70%); pointer-events:none;} .page-hero .crumb{font-size:.82rem; color:var(--slate-2); letter-spacing:.06em;} .page-hero .crumb a:hover{color:#fff; text-decoration:underline;} .page-hero h1{font-family:"Cinzel",serif; font-size:clamp(2rem,4.6vw,3.3rem); margin:.35em 0 .25em; letter-spacing:.01em;} .page-hero p{color:rgba(255,255,255,.85); max-width:60ch; margin:0;} .page-hero .rule{width:56px; height:3px; background:var(--brass); border-radius:2px; margin:16px 0 0;} /* ---------- Bands & section heads ---------- */ .band{padding:clamp(64px,9vw,116px) 0;} .band.mist{background:var(--mist);} .band.paper{background:var(--paper);} .band.navy{background:linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 100%); color:#fff;} .band.navy .eyebrow{color:var(--slate-2);} .sec-head{max-width:720px; margin-bottom:clamp(30px,5vw,54px);} .sec-head.center{margin-inline:auto;} .sec-title{font-family:"Cinzel",serif; font-weight:600; color:var(--navy); font-size:clamp(1.8rem,4vw,2.85rem); margin:.28em 0 .35em; letter-spacing:.01em;} .band.navy .sec-title{color:#fff;} .rule{width:56px; height:3px; background:var(--brass); border-radius:2px;} .center .rule{margin-inline:auto;} /* Split content (image + text) */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center;} .split.rev .txt{order:2;} .frame{border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); position:relative; background:var(--mist);} .frame img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;} .frame .cap{position:absolute; left:14px; bottom:14px; background:rgba(1,42,71,.82); color:#fff; font-size:.78rem; padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px);} /* Stats */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;} .stat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 20px; box-shadow:var(--shadow-sm);} .stat b{font-family:"Cinzel",serif; color:var(--navy); font-size:1.9rem; display:block; line-height:1;} .stat span{font-size:.9rem; color:var(--ink-soft);} /* Service cards */ .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .svc{background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 26px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;} .svc:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(0,61,104,.25);} .svc .ic{width:52px; height:52px; border-radius:13px; background:linear-gradient(150deg,var(--navy),#0a5183); display:grid; place-items:center; margin-bottom:16px; box-shadow:0 8px 18px -8px rgba(0,61,104,.7);} .svc .ic svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;} .svc h3{font-family:"Cinzel",serif; font-size:1.16rem; color:var(--navy); margin-bottom:.5em;} .svc p{font-size:.95rem; color:var(--ink-soft); margin-bottom:.9em;} .svc ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px;} .svc li{font-size:.79rem; color:var(--navy); background:var(--mist); padding:4px 10px; border-radius:999px;} .svc .more{display:inline-block; margin-top:14px; color:var(--navy); font-weight:600; font-size:.9rem;} .svc .more:hover{text-decoration:underline;} /* Detailed service blocks (services page) */ .svc-detail{scroll-margin-top:calc(var(--nav-h) + 20px);} .svc-detail + .svc-detail{margin-top:clamp(40px,6vw,72px);} .svc-detail .kicker{font-family:"Cinzel",serif; color:var(--brass); letter-spacing:.18em; font-size:.74rem; text-transform:uppercase;} .svc-detail h2{font-family:"Cinzel",serif; color:var(--navy); font-size:clamp(1.5rem,3vw,2.1rem); margin:.3em 0 .4em;} .svc-detail ul.checks{list-style:none; margin:.5em 0 0; padding:0; display:grid; gap:10px;} .svc-detail ul.checks li{display:flex; gap:10px; align-items:flex-start;} .svc-detail ul.checks svg{flex:0 0 auto; width:19px; height:19px; margin-top:3px; stroke:var(--navy); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} /* Why-us on navy */ .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} .why{padding:26px 22px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);} .why .n{font-family:"Cinzel",serif; color:var(--brass); font-size:.85rem; letter-spacing:.2em;} .why h3{font-size:1.12rem; color:#fff; margin:.5em 0 .45em;} .why p{color:rgba(255,255,255,.78); font-size:.94rem; margin:0;} /* Doctors */ .doc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} .doc{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;} .doc .top{background:linear-gradient(160deg,var(--navy),var(--navy-deep)); padding:30px 26px 26px; color:#fff;} .doc .monogram{width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center; font-family:"Cinzel",serif; font-size:1.5rem; margin-bottom:14px;} .doc .top h3{font-family:"Cinzel",serif; font-size:1.3rem;} .doc .top .role{color:var(--slate-2); font-size:.86rem; letter-spacing:.05em; margin-top:4px;} .doc .body{padding:24px 26px 28px;} .doc .body p{font-size:.95rem; color:var(--ink-soft);} .doc .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;} .doc .tags span{font-size:.76rem; background:var(--mist); color:var(--navy); padding:4px 10px; border-radius:999px;} /* Reviews */ .rev-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px;} .rating-badge{display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 24px; box-shadow:var(--shadow-sm);} .rating-badge .big{font-family:"Cinzel",serif; font-size:2.6rem; color:var(--navy); line-height:1;} .stars{color:var(--brass); letter-spacing:2px; font-size:1.05rem;} .rev-grid{columns:3; column-gap:20px;} .review{break-inside:avoid; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; margin-bottom:20px; box-shadow:var(--shadow-sm);} .review .stars{font-size:.95rem; margin-bottom:10px;} .review p{font-size:.98rem; color:var(--ink); margin-bottom:14px;} .review .who{display:flex; align-items:center; gap:10px;} .review .av{width:36px; height:36px; border-radius:50%; background:linear-gradient(150deg,var(--slate),var(--navy)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem;} .review .who b{font-size:.92rem;} .review .who span{font-size:.78rem; color:var(--slate); display:block;} /* Forms */ .form-card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(26px,4vw,42px); box-shadow:var(--shadow-md);} .field{margin-bottom:16px;} .field label{display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:6px;} .field input,.field textarea{width:100%; font:inherit; font-size:1rem; padding:.75em .9em; border:1.5px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); transition:border-color .2s, box-shadow .2s;} .field input:focus,.field textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,61,104,.14);} .field textarea{resize:vertical; min-height:110px;} .two{display:grid; grid-template-columns:1fr 1fr; gap:14px;} .starpick{display:flex; gap:6px; margin:2px 0 4px;} .starpick button{background:none; border:0; cursor:pointer; font-size:1.9rem; line-height:1; color:#D8D2C6; padding:0 2px; transition:transform .12s, color .15s;} .starpick button:hover{transform:scale(1.12);} .starpick button.on{color:var(--brass);} .form-note{font-size:.82rem; color:var(--slate); margin-top:2px;} .form-note a{color:var(--navy); font-weight:600;} .form-msg{margin-top:14px; font-size:.95rem; font-weight:600; border-radius:11px; padding:12px 16px; display:none;} .form-msg.ok{display:block; background:#E8F3EC; color:#1E6B3E; border:1px solid #BEE0CC;} .form-msg.err{display:block; background:#FBEAEA; color:#9B2C2C; border:1px solid #F0C9C9;} /* Contact */ .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:start;} .info-block{display:grid; gap:22px;} .info-row{display:flex; gap:16px; align-items:flex-start;} .info-row .ic{flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:var(--mist); display:grid; place-items:center;} .info-row .ic svg{width:22px; height:22px; stroke:var(--navy); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} .info-row h4{font-family:"Cinzel",serif; color:var(--navy); font-size:1.02rem; margin-bottom:3px;} .info-row p,.info-row a{color:var(--ink-soft); font-size:.98rem; margin:0;} .info-row a:hover{color:var(--navy); text-decoration:underline;} .hours-table{width:100%; border-collapse:collapse; margin-top:6px;} .hours-table td{padding:7px 0; border-bottom:1px solid var(--line); font-size:.96rem;} .hours-table td:last-child{text-align:right; color:var(--ink); font-weight:600;} .hours-table tr.today td{color:var(--navy); font-weight:700;} .hours-table tr.today td:first-child::after{content:" · Open today"; color:var(--brass); font-weight:600; font-size:.8rem;} .hours-table td.closed{color:var(--slate); font-weight:600;} .map-embed{margin-top:8px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm);} .map-embed iframe{display:block; width:100%; height:260px; border:0;} /* Detailed treatment explanations (services page) */ .treats{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px;} .treats li{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;} .treats li svg{width:20px; height:20px; margin-top:4px; stroke:var(--navy); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} .treats b{display:block; color:var(--navy); font-size:1rem; font-family:"Figtree"; font-weight:700; margin-bottom:2px;} .treats p{margin:0; font-size:.95rem; color:var(--ink-soft); line-height:1.55;} .svc-detail .lead-in{color:var(--ink-soft); font-size:1.02rem;} .svc-detail .grid2{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,52px); align-items:start;} @media(max-width:820px){ .svc-detail .grid2{grid-template-columns:1fr;} } /* Doctor / team photos */ .doc .photo{aspect-ratio:1/1; background:var(--mist); overflow:hidden;} .doc .photo img{width:100%; height:100%; object-fit:cover; object-position:center top;} .doc.has-photo .top{display:none;} .doc.has-photo .body{padding-top:22px;} .doc.has-photo .body h3{font-family:"Cinzel",serif; color:var(--navy); font-size:1.3rem; margin-bottom:2px;} .doc.has-photo .body .role{color:var(--slate); font-size:.86rem; margin-bottom:12px;} .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} .member{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm);} .member .photo{aspect-ratio:3/4; background:var(--mist); overflow:hidden;} .member .photo img{width:100%; height:100%; object-fit:cover; object-position:center top;} .member .photo.ph{display:grid; place-items:center; background:linear-gradient(160deg,var(--slate),var(--navy)); color:#fff; font-family:"Cinzel"; font-size:1.8rem;} .member .m-body{padding:16px 18px 20px;} .member h3{font-family:"Cinzel",serif; color:var(--navy); font-size:1.08rem;} .member .role{font-size:.84rem; color:var(--slate); margin-top:3px;} .member p{font-size:.9rem; color:var(--ink-soft); margin:.6em 0 0;} @media(max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:520px){ .team-grid{grid-template-columns:1fr 1fr;} } /* 3D signature band */ .signature{position:relative; background:radial-gradient(120% 100% at 70% 20%, #04365b 0%, var(--navy-deep) 60%, #001a2e 100%); color:#fff; overflow:hidden;} /* Soft focal glow behind the 3D canvas — keeps the band intentional even if WebGL is off */ .signature::before{content:""; position:absolute; right:7%; top:50%; transform:translateY(-50%); width:min(44%,500px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(159,196,232,.30), rgba(0,61,104,0) 68%); z-index:0; pointer-events:none;} @media(max-width:820px){ .signature::before{right:50%; transform:translate(50%,10%); top:auto; bottom:0; width:min(70%,360px);} } .signature .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; min-height:520px; padding:clamp(56px,8vw,90px) 0;} #toothCanvas{position:absolute; right:0; top:0; width:56%; height:100%; z-index:1;} .signature .txt{max-width:520px;} .signature .eyebrow{color:var(--slate-2);} .signature h2{font-family:"Cinzel",serif; font-size:clamp(1.7rem,3.4vw,2.6rem); margin:.3em 0 .4em;} .signature p{color:rgba(255,255,255,.84);} @media(max-width:820px){ #toothCanvas{position:relative; width:100%; height:300px;} .signature .wrap{grid-template-columns:1fr;} } /* CTA strip */ .cta-strip{background:linear-gradient(160deg,var(--navy),var(--navy-deep)); color:#fff; border-radius:24px; padding:clamp(34px,5vw,58px); text-align:center; box-shadow:var(--shadow-md);} .cta-strip h2{font-family:"Cinzel",serif; font-size:clamp(1.6rem,3.4vw,2.4rem); margin-bottom:.3em;} .cta-strip p{color:rgba(255,255,255,.85); max-width:52ch; margin:0 auto 1.4em;} .cta-strip .cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;} /* Footer */ footer.site{background:var(--navy-deep); color:rgba(255,255,255,.82); padding:56px 0 34px;} footer.site .cols{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start;} footer.site .fbrand b{font-family:"Cinzel",serif; color:#fff; font-size:1.3rem; letter-spacing:.05em;} footer.site .fbrand p{margin-top:8px; font-size:.9rem; max-width:34ch; color:rgba(255,255,255,.7);} footer.site a:hover{color:#fff;} footer.site .fnav{display:flex; flex-direction:column; gap:8px; font-size:.94rem;} footer.site .fbot{margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.82rem; color:rgba(255,255,255,.6);} /* ---------- Responsive ---------- */ @media(max-width:960px){ .svc-grid,.why-grid,.doc-grid{grid-template-columns:1fr 1fr;} .rev-grid{columns:2;} .split,.contact-grid,.split.rev{grid-template-columns:1fr;} .split.rev .txt{order:0;} .stats{grid-template-columns:1fr 1fr;} } @media(max-width:720px){ nav.links{display:none;} .menu-toggle{display:block;} .svc-grid,.doc-grid,.why-grid{grid-template-columns:1fr;} .rev-grid{columns:1;} .two{grid-template-columns:1fr;} body{font-size:16px;} .home-hero .trust{gap:18px;} } @media(max-width:380px){ .stat b{font-size:1.6rem;} .brand b{font-size:.95rem;} .home-hero .trust .t b{font-size:1.3rem;} }