/* ============================================================ THE ROTA COLLECTIVE — brand foundation Cream / Charcoal / Soft Gold · editorial luxury Data-attribute hooks on are driven by the Tweaks panel: data-serif = cormorant-jost | eb-garamond | cormorant-mulish data-accent = subtle | bold data-base = cream | warm-white data-density = comfy | regular | compact data-founder = feature | note ============================================================ */ :root{ /* palette */ --cream:#F8F5F0; --warm-white:#FFFFFF; --ink:#2E2E2E; --ink-2:#4a4641; --ink-soft:#736d64; --gold:#C8A96B; --gold-deep:#a8864a; --gold-soft:#e7d8b9; --line:rgba(46,46,46,.13); --line-2:rgba(46,46,46,.22); /* surfaces (base swapped by data-base) */ --bg:var(--cream); --panel:#ffffff; --panel-2:#f1ece3; /* type */ --font-display:'Cormorant Garamond', Georgia, serif; --font-ui:'Jost', system-ui, sans-serif; --font-body:'Jost', system-ui, sans-serif; --display-weight:400; /* rhythm */ --maxw:1280px; --gutter:clamp(20px, 5vw, 80px); --section-y:clamp(64px, 9vw, 132px); /* accent strength */ --rule:1px; --eyebrow-color:var(--gold-deep); } html[data-base="warm-white"]{ --bg:#fffdfa; --panel:#ffffff; --panel-2:#f6f3ee; } html[data-base="cream"]{ --bg:var(--cream); --panel:#ffffff; --panel-2:#efe9df; } html[data-density="comfy"]{ --section-y:clamp(80px,11vw,160px); } html[data-density="compact"]{ --section-y:clamp(48px,6vw,92px); } html[data-serif="eb-garamond"]{ --font-display:'EB Garamond', Georgia, serif; --font-ui:'EB Garamond', Georgia, serif; --font-body:'EB Garamond', Georgia, serif; --display-weight:500; } html[data-serif="cormorant-mulish"]{ --font-display:'Cormorant Garamond', Georgia, serif; --font-ui:'Mulish', system-ui, sans-serif; --font-body:'Mulish', system-ui, sans-serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:17px; line-height:1.65; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} /* ---------- typography ---------- */ .eyebrow{ font-family:var(--font-ui); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--eyebrow-color); font-weight:500; margin:0 0 18px; } html[data-serif="eb-garamond"] .eyebrow{ letter-spacing:.28em; font-weight:600; font-style:italic; text-transform:uppercase; } .display{ font-family:var(--font-display); font-weight:var(--display-weight); line-height:1.02; letter-spacing:-.01em; margin:0; color:var(--ink); } .d-xl{ font-size:clamp(42px, 6.4vw, 92px); } .d-lg{ font-size:clamp(34px, 4.6vw, 62px); } .d-md{ font-size:clamp(27px, 3.2vw, 42px); } .d-sm{ font-size:clamp(23px, 2.4vw, 31px); } .lede{ font-size:clamp(17px,1.5vw,20px); color:var(--ink-2); line-height:1.6; font-weight:300; } html[data-serif="eb-garamond"] .lede{ font-weight:400; } .muted{ color:var(--ink-soft); } .serif-quote{ font-family:var(--font-display); font-style:italic; font-weight:400; line-height:1.18; color:var(--gold-deep); } /* ---------- layout ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .section{ padding:var(--section-y) 0; } .center{ text-align:center; } .stack-sm > * + *{ margin-top:14px; } .divider{ height:1px; background:var(--line); border:0; margin:0; } .rule-gold{ width:54px; height:2px; background:var(--gold); border:0; margin:0; opacity:calc(.55 + var(--accent,1)*0); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:15px 30px; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:.28s ease; line-height:1; } .btn-primary{ background:var(--ink); color:#f6f2ea; border-color:var(--ink); } .btn-primary:hover{ background:#1d1d1d; } html[data-accent="bold"] .btn-primary{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; } html[data-accent="bold"] .btn-primary:hover{ background:#96763e; } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); } .btn-ghost:hover{ border-color:var(--ink); } .btn-light{ background:transparent; color:#f3efe7; border-color:rgba(255,255,255,.45); } .btn-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); } .link-gold{ font-family:var(--font-ui); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:500; display:inline-flex; align-items:center; gap:8px; } .link-gold .ar{ transition:transform .25s; } .link-gold:hover .ar{ transform:translateX(4px); } /* ---------- top nav ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:22px var(--gutter); transition:.35s ease; } .nav.over{ color:#f4f0e8; } .nav.solid{ background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:15px var(--gutter); } .brand{ font-family:var(--font-display); font-size:24px; letter-spacing:.02em; font-weight:500; line-height:.92; } .brand small{ display:block; font-family:var(--font-ui); font-size:10px; letter-spacing:.42em; text-transform:uppercase; font-weight:400; opacity:.8; margin-top:3px; } .navlinks{ display:flex; align-items:center; gap:34px; } .navlinks a{ font-family:var(--font-ui); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:400; position:relative; padding:4px 0; } .navlinks a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:currentColor; transition:right .3s; opacity:.7; } .navlinks a:hover::after{ right:0; } .nav .inquire{ border:1px solid currentColor; padding:10px 22px; border-radius:2px; font-family:var(--font-ui); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; } .nav .inquire:hover{ background:currentColor; } .nav .inquire:hover span{ color:var(--bg); } .nav-toggle{ display:none; } /* ---------- nav dropdowns ---------- */ .navitem{ position:relative; display:flex; align-items:center; } .navtrigger{ background:none; border:0; color:inherit; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:400; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:4px 0; } .navtrigger .caret{ font-size:9px; opacity:.7; transition:transform .2s; } .navitem:hover .navtrigger .caret, .navitem:focus-within .navtrigger .caret{ transform:rotate(180deg); } .navitem-link{ font-family:var(--font-ui); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:400; position:relative; padding:4px 0; } .navitem-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:currentColor; transition:right .3s; opacity:.7; } .navitem-link:hover::after{ right:0; } .submenu{ position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:212px; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:9px 0; box-shadow:0 24px 50px -28px rgba(46,46,46,.55); opacity:0; visibility:hidden; transition:.2s; z-index:60; } .navitem:hover .submenu, .navitem:focus-within .submenu{ opacity:1; visibility:visible; transform:translate(-50%,4px); } .submenu a{ display:block; padding:9px 22px; font-family:var(--font-ui); font-size:12px; letter-spacing:.05em; color:var(--ink); white-space:nowrap; transition:.15s; } .submenu a::after{ display:none; } .submenu a:hover{ background:var(--panel-2); color:var(--gold-deep); } /* ---------- content-page hero + forms ---------- */ .hero.short{ min-height:58vh; } .form{ max-width:680px; margin:0 auto; } .form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .form .field{ margin-bottom:18px; } .form .full{ grid-column:1 / -1; } .form label{ display:block; font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 7px; } .form input, .form select, .form textarea{ width:100%; font-family:var(--font-ui); font-size:15px; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:3px; padding:13px 15px; transition:.2s; } .form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--gold); } .form textarea{ min-height:120px; resize:vertical; } .form input[type=file]{ padding:11px 14px; font-size:13px; background:var(--panel-2); cursor:pointer; } .form input[type=file]::file-selector-button{ font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line-2); background:#fff; color:var(--ink); padding:8px 14px; border-radius:2px; margin-right:14px; cursor:pointer; transition:.2s; } .form input[type=file]::file-selector-button:hover{ border-color:var(--gold); color:var(--gold-deep); } .form .submit-row{ margin-top:10px; text-align:center; } .form .formnote{ font-size:12.5px; color:var(--ink-soft); text-align:center; margin-top:16px; } /* ---------- comprehensive intake + what-happens-next ---------- */ .intake{ display:grid; grid-template-columns:355px 1fr; gap:clamp(28px,4.5vw,60px); align-items:start; } .intake .aside{ position:sticky; top:96px; } .intake .form{ max-width:none; margin:0; } .fgroup{ margin-top:34px; } .fgroup:first-child{ margin-top:0; } .glabel{ font-family:var(--font-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; margin:0 0 18px; padding-bottom:11px; border-bottom:1px solid var(--line); } .form .hint{ font-size:12px; color:var(--ink-soft); margin:-2px 0 9px; } .req{ color:var(--gold-deep); font-weight:400; } .opt{ display:flex; align-items:flex-start; gap:11px; padding:8px 0; font-size:14.5px; color:var(--ink); cursor:pointer; } .opt input{ width:17px; height:17px; accent-color:var(--gold-deep); flex:none; margin-top:2px; } .checks{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; } .consent{ display:flex; gap:12px; align-items:flex-start; margin-top:6px; font-size:13.5px; color:var(--ink-2); line-height:1.5; cursor:pointer; } .consent input{ width:18px; height:18px; accent-color:var(--gold-deep); flex:none; margin-top:2px; } .form input[type=date]{ font-family:var(--font-ui); color:var(--ink); } .whatnext{ background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:clamp(26px,3vw,34px) clamp(24px,3vw,32px); } .whatnext .wn-orn{ width:40px; height:1px; background:var(--gold); margin:0 auto 14px; } .whatnext h3{ font-family:var(--font-display); font-size:clamp(24px,2.4vw,30px); font-weight:500; text-align:center; margin:0 0 8px; } .whatnext .wn-sub{ text-align:center; font-size:13px; color:var(--ink-soft); margin:0 auto 18px; max-width:32ch; line-height:1.5; } .wn-step{ display:flex; gap:15px; padding:15px 0; border-top:1px solid var(--line); } .wn-num{ font-family:var(--font-display); font-size:21px; font-weight:500; color:var(--gold-deep); flex:none; width:22px; line-height:1.2; } .wn-step b{ display:block; font-size:14px; margin-bottom:3px; } .wn-step p{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.45; } .wn-foot{ text-align:center; font-family:var(--font-ui); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } @media(max-width:980px){ .intake{ grid-template-columns:1fr; } .intake .aside{ position:static; order:2; margin-top:28px; } .intake .form{ order:1; } .checks{ grid-template-columns:1fr; } } /* ---------- prose (legal pages) ---------- */ .prose{ max-width:760px; margin:0 auto; } .prose h2{ font-family:var(--font-display); font-weight:500; font-size:27px; margin:38px 0 12px; } .prose h2:first-of-type{ margin-top:0; } .prose p{ color:var(--ink-2); font-size:15.5px; line-height:1.7; margin:0 0 14px; } .prose ul{ color:var(--ink-2); font-size:15.5px; line-height:1.7; padding-left:20px; margin:0 0 14px; } .prose a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; } .prose .legalnote{ font-style:italic; color:var(--ink-soft); font-size:13.5px; border-left:2px solid var(--gold); padding-left:14px; margin:0 0 28px; } /* ---------- journal ---------- */ .journal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(20px,2.5vw,32px); } .post{ background:var(--panel); border:1px solid var(--line); border-radius:5px; overflow:hidden; display:flex; flex-direction:column; transition:.25s; } .post:hover{ border-color:var(--line-2); box-shadow:0 26px 50px -36px rgba(46,46,46,.5); } .post .thumb{ aspect-ratio:3/2; background:var(--panel-2); } .post .thumb image-slot{ width:100%; height:100%; } .post .pbody{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1; } .post .cat{ font-family:var(--font-ui); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; } .post h3{ font-family:var(--font-display); font-size:24px; font-weight:500; line-height:1.12; margin:0; } .post .dek{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0; } .post .soon{ margin-top:auto; font-family:var(--font-ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding-top:6px; } @media(max-width:680px){ .navlinks.open .navitem{ flex-direction:column; align-items:flex-start; width:100%; } .navlinks.open .submenu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; padding:2px 0 8px 14px; min-width:0; background:transparent; } } /* ---------- hero ---------- */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; } .hero .bg{ position:absolute; inset:0; background:#1d1a17; } .hero .bg image-slot, .hero .bg img{ width:100%; height:100%; } .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.34) 0%, rgba(20,18,15,.18) 45%, rgba(20,18,15,.5) 100%); pointer-events:none; } .hero .inner{ position:relative; z-index:2; color:#f5f1e9; max-width:780px; padding:140px 0 90px; } .hero .eyebrow{ color:var(--gold-soft); } .hero .display{ color:#fff; } .hero .lede{ color:rgba(245,241,233,.92); font-weight:300; max-width:560px; } .hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; } .hero .scroll-hint{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; color:rgba(245,241,233,.8); font-family:var(--font-ui); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; } .hero .scroll-hint i{ width:1px; height:34px; background:linear-gradient(rgba(245,241,233,.7), transparent); display:block; } /* ---------- service / what we do ---------- */ .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:48px; } .svc{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:0; overflow:hidden; transition:.3s; } .svc:hover{ border-color:var(--line-2); box-shadow:0 24px 50px -38px rgba(46,46,46,.5); } .svc .svc-top{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:30px 30px 26px; display:flex; flex-direction:column; gap:18px; font-family:inherit; color:inherit; } .svc .svc-ico{ width:44px; height:44px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-deep); } .svc h3{ font-family:var(--font-display); font-size:27px; font-weight:500; margin:0; line-height:1.05; } .svc .svc-toggle{ display:flex; align-items:center; justify-content:space-between; } .svc .svc-toggle .lbl{ font-family:var(--font-ui); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); } .svc .chev{ transition:transform .3s; color:var(--gold-deep); } .svc.open .chev{ transform:rotate(180deg); } .svc .svc-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; } .svc.open .svc-body{ max-height:340px; } .svc .svc-body-inner{ padding:0 30px 30px; color:var(--ink-soft); font-size:15.5px; line-height:1.6; } .svc .svc-body-inner .tag{ display:block; margin-top:14px; } /* ---------- benefits / two-up ---------- */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; } .split.media-left .media{ order:-1; } .bene{ list-style:none; margin:26px 0 0; padding:0; } .bene li{ display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; } .bene li:last-child{ border-bottom:0; } .bene .tick{ color:var(--gold-deep); flex:none; margin-top:3px; } .media-frame{ position:relative; } .media-frame image-slot, .media-frame img{ width:100%; height:auto; display:block; } .media > image-slot{ width:100%; height:auto; display:block; } .media-frame .cap{ position:absolute; bottom:-1px; left:-1px; background:var(--bg); padding:10px 18px 0; font-family:var(--font-ui); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); } /* ---------- founder ---------- */ .founder{ background:var(--panel-2); } .founder .split{ align-items:center; } .founder .full{ grid-template-columns:1.12fr 0.88fr; } .founder .serif-quote{ font-size:clamp(24px,2.9vw,38px); margin:14px 0 22px; } html[data-founder="note"] .founder .full{ display:none; } html[data-founder="note"] .founder .note{ display:flex; } html[data-founder="feature"] .founder .note{ display:none; } .founder .note{ gap:24px; align-items:center; } .founder .note .pf{ width:140px; height:140px; flex:none; } .sign{ font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--ink); } /* ---------- schedules ---------- */ .sched{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; } .sched .card{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:30px 22px; text-align:center; transition:.3s; } .sched .card:hover{ border-color:var(--gold); } .sched .n{ font-family:var(--font-display); font-size:34px; font-weight:500; line-height:1; } .sched .u{ font-family:var(--font-ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; } /* ---------- screening ---------- */ .screening{ background:var(--ink); color:#efe9df; } .screening .eyebrow{ color:var(--gold-soft); } .screening .display{ color:#fbf8f2; } .screening .lede{ color:rgba(239,233,223,.82); } .chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:760px; margin:32px auto 0; } .chip{ font-family:var(--font-ui); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; padding:11px 20px; border:1px solid rgba(231,216,185,.32); border-radius:2px; color:#e9e1d3; } /* ---------- locations ---------- */ .loc-list{ font-family:var(--font-display); font-size:clamp(20px,2.1vw,27px); color:var(--ink-2); line-height:1.7; max-width:820px; margin:14px auto 0; } .loc-list a{ transition:color .2s; } .loc-list a:hover{ color:var(--gold-deep); } .loc-list .loc{ transition:color .2s; cursor:default; } .loc-list .loc:hover{ color:var(--gold-deep); } /* ---------- full-bleed band (locations) ---------- */ .band{ position:relative; min-height:clamp(460px,58vh,620px); display:flex; align-items:center; overflow:hidden; } .band .bg{ position:absolute; inset:0; background:#1d1a17; } .band .bg image-slot, .band .bg img{ width:100%; height:100%; } .band::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.5), rgba(20,18,15,.4) 50%, rgba(20,18,15,.62)); pointer-events:none; } .band-inner{ position:relative; z-index:2; color:#f4f0e8; } .band-inner .eyebrow{ color:var(--gold-soft); } .band-inner .display{ color:#fff; } .band-inner .loc-list{ color:#e9e3d8; } .band-inner .loc-list a:hover{ color:#fff; } .band-inner .loc-list .loc:hover{ color:#fff; } /* ---------- why collective (trust row) ---------- */ .trust{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2.4vw,34px); margin-top:48px; } .trust .it{ text-align:center; } .trust .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); margin:0 auto 16px; } .trust h4{ font-family:var(--font-display); font-size:21px; font-weight:500; line-height:1.18; margin:0; } /* ---------- closing CTA ---------- */ .closing{ text-align:center; } .closing .display{ margin:0 auto 26px; max-width:14ch; } /* ---------- footer ---------- */ .footer{ background:var(--ink); color:#cfc8bc; padding:clamp(56px,7vw,90px) 0 36px; } .footer a:hover{ color:#fff; } .foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); } .footer .brand{ color:#f5f1e9; } .footer .tagline{ font-family:var(--font-display); font-style:italic; font-size:20px; color:#e7e0d4; margin-top:14px; max-width:30ch; } .foot-nav{ display:flex; gap:48px; flex-wrap:wrap; } .foot-col h5{ font-family:var(--font-ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#9b9488; margin:0 0 16px; font-weight:500; } .foot-col a, .foot-col p{ display:block; font-size:14.5px; margin:0 0 10px; color:#cfc8bc; } .socials{ display:flex; gap:14px; margin-top:6px; } .socials a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.25s; } .socials a:hover{ border-color:#fff; } .foot-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:28px; font-family:var(--font-ui); font-size:12px; letter-spacing:.04em; color:#8f887c; } .foot-bottom a{ margin-left:22px; } /* ---------- breadcrumb (location pages) ---------- */.crumb{ font-family:var(--font-ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,241,233,.78); display:flex; gap:10px; flex-wrap:wrap; } .crumb a:hover{ color:#fff; } .crumb .sep{ opacity:.5; } /* ---------- sibling link tags (location pages) ---------- */ .taglist{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; } .taglist.center{ justify-content:center; } .taglist a{ font-family:var(--font-ui); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding:11px 20px; border:1px solid var(--line-2); border-radius:2px; color:var(--ink-2); transition:.25s; } .taglist a:hover{ border-color:var(--gold); color:var(--gold-deep); } /* ---------- local FAQ accordion ---------- */ .faq{ max-width:780px; margin:36px auto 0; } .faq.in-split{ margin:0; max-width:none; } .faq .q{ border-bottom:1px solid var(--line); } .faq .q button{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--ink); } .faq .q .pm{ color:var(--gold-deep); font-family:var(--font-ui); flex:none; } .faq .a{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .faq .q.open .a{ max-height:200px; } .faq .a p{ padding:0 4px 24px; margin:0; color:var(--ink-soft); font-size:16px; } /* ---------- reveal on scroll ---------- */ html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; } html.js .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html.js .reveal{ opacity:1; transform:none; } html{scroll-behavior:auto;} } /* ---------- responsive ---------- */ @media (max-width:980px){ .svc-grid{ grid-template-columns:1fr; } .split{ grid-template-columns:1fr; } .split.media-left .media{ order:0; } .sched{ grid-template-columns:repeat(2,1fr); } .trust{ grid-template-columns:repeat(2,1fr); row-gap:30px; } } @media (max-width:680px){ body{ font-size:16px; } html{ scrollbar-width:none; } html::-webkit-scrollbar{ display:none; } .navlinks{ display:none; } .nav .inquire{ display:none; } .navlinks.open{ display:flex; position:absolute; top:100%; right:var(--gutter); flex-direction:column; gap:16px; background:var(--bg); padding:22px 26px; border:1px solid var(--line); border-radius:4px; min-width:220px; box-shadow:0 24px 50px -28px rgba(46,46,46,.5); } .navlinks.open .submenu a{ padding:7px 0; } .nav-toggle{ display:inline-flex; font-family:var(--font-ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; background:none; border:1px solid currentColor; color:inherit; padding:10px 18px; border-radius:2px; cursor:pointer; } .trust{ grid-template-columns:1fr 1fr; } .foot-top{ flex-direction:column; } }