/* ==========================================================================
Charlie Chen, MD — "Coastal Apothecary" Theme
Design system: Fraunces (serif) × Jost (sans)
Author: Design-System lead
--------------------------------------------------------------------------
Load this in every page AFTER the Google Fonts :
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root{
/* ---- Palette ---- */
--bone:#FBF8F2;
--cream:#F1E9DA;
--sand:#E3D7C2;
--eucalyptus:#A9B9A4;
--sage:#8FA08C;
--sage-deep:#5C6F5A;
--brass:#B08D4F;
--brass-lt:#CBA86A;
--ink:#23302B; /* Forest Ink (near-black) */
--clay:#C8A48B;
--navy:#1F3A4D;
/* ---- Functional aliases ---- */
--bg:var(--bone);
--bg-alt:var(--cream);
--surface:#ffffff;
--text:var(--ink);
--text-soft:#4a564f;
--text-muted:#67726b;
--text-faint:#7a857d;
--line:var(--sand); /* default hairline / borders */
--line-brass:var(--brass); /* brass hairline accent */
--accent:var(--brass);
--accent-strong:var(--sage-deep);
/* ---- Type families ---- */
--font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
--font-sans:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* ---- Type scale (fluid where useful) ---- */
--fs-display:clamp(44px, 7vw, 86px);
--fs-h1:clamp(38px, 5.4vw, 64px);
--fs-h2:clamp(28px, 3.6vw, 40px);
--fs-h3:clamp(22px, 2.6vw, 30px);
--fs-h4:21px;
--fs-h5:17px;
--fs-lede:clamp(18px, 2vw, 21px);
--fs-body:16.5px;
--fs-sm:14px;
--fs-xs:12.5px;
--fs-eyebrow:12px;
--lh-tight:1.04;
--lh-snug:1.2;
--lh-body:1.65;
--ls-display:-.01em;
--ls-label:.18em;
--ls-eyebrow:.32em;
/* ---- Spacing scale (8pt-ish, warm/airy) ---- */
--sp-1:4px;
--sp-2:8px;
--sp-3:12px;
--sp-4:16px;
--sp-5:24px;
--sp-6:32px;
--sp-7:48px;
--sp-8:64px;
--sp-9:88px;
--sp-10:120px;
--section-y:clamp(56px, 8vw, 96px); /* vertical rhythm for */
--container-max:1180px;
--container-pad:32px;
/* ---- Radius ---- */
--r-sm:8px;
--r-md:14px;
--r-lg:20px;
--r-pill:40px;
--r-circle:50%;
/* ---- Shadows (soft, warm-toned) ---- */
--shadow-xs:0 2px 10px -6px rgba(35,48,43,.32);
--shadow-sm:0 10px 30px -22px rgba(35,48,43,.45);
--shadow-md:0 18px 50px -28px rgba(35,48,43,.5);
--shadow-lg:0 30px 70px -40px rgba(35,48,43,.6);
/* ---- Motion ---- */
--ease:cubic-bezier(.22,.61,.36,1);
--dur:.35s;
/* ---- Header ---- */
--header-h:78px;
}
/* ==========================================================================
2. RESET / BASE
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-sans);
font-weight:300;
font-size:var(--fs-body);
line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea,select,button{font-family:inherit}
/* ---- Headings ---- */
h1,h2,h3,h4,h5,.serif{
font-family:var(--font-serif);
font-weight:300;
line-height:var(--lh-snug);
letter-spacing:var(--ls-display);
color:var(--text);
}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);font-weight:400}
h5{font-size:var(--fs-h5);font-weight:400}
em,.italic{font-style:italic}
h1 em,h2 em,h3 em,.serif em{color:var(--sage-deep);font-style:italic}
p{max-width:68ch}
.lede{font-size:var(--fs-lede);color:var(--text-soft);font-weight:300;line-height:1.55;max-width:42ch}
strong,b{font-weight:500}
/* ---- Links ---- */
a{color:var(--sage-deep);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--brass)}
/* ---- Selection ---- */
::selection{background:var(--eucalyptus);color:var(--ink)}
/* ==========================================================================
3. LAYOUT
========================================================================== */
.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--container-pad);
}
.container--narrow{max-width:820px}
.container--wide{max-width:1320px}
section{padding-block:var(--section-y)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.section--cream{background:var(--bg-alt)}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink);color:var(--cream)}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--cream)}
.section--ink p{color:#cdd5cd}
.section--sage{background:var(--sage-deep);color:var(--cream)}
.section--sage h1,.section--sage h2,.section--sage h3{color:var(--cream)}
/* ---- Hairline divider (brass) ---- */
.hairline{height:1px;border:0;background:var(--line-brass);opacity:.55}
.hairline--sand{background:var(--line);opacity:1}
.divider{border:0;border-top:1px solid var(--line)}
.section + .section,
section + section{border-top:1px solid var(--line)}
/* Decorative centered brass rule with a circle node */
.rule-center{display:flex;align-items:center;justify-content:center;gap:16px;margin-block:var(--sp-6)}
.rule-center::before,.rule-center::after{content:"";height:1px;width:80px;background:var(--brass);opacity:.7}
.rule-center i{display:block;width:9px;height:9px;border:1px solid var(--brass);border-radius:50%}
/* ---- Open-circle motif ---- */
.circle-mark{
display:inline-block;
width:14px;height:14px;
border:1.5px solid var(--brass);
border-radius:var(--r-circle);
flex:0 0 auto;
}
.circle-mark--lg{width:24px;height:24px;border-width:1.5px}
.circle-mark--sage{border-color:var(--sage-deep)}
.circle-mark--ink{border-color:var(--ink)}
/* Big decorative open ring (place behind/over imagery) */
.ring{
position:absolute;
border:1px solid var(--brass);
border-radius:50%;
opacity:.5;
pointer-events:none;
}
/* ---- Generic grid utilities ---- */
.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cols{display:flex;gap:var(--sp-6);flex-wrap:wrap;align-items:flex-start}
/* ---- Spacing helpers ---- */
.stack > * + *{margin-top:var(--sp-4)}
.stack-lg > * + *{margin-top:var(--sp-6)}
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mt-8{margin-top:var(--sp-8)}
.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.measure{max-width:62ch}
/* ==========================================================================
4. TEXT BITS — eyebrow, section heading, badge
========================================================================== */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-sans);
text-transform:uppercase;
letter-spacing:var(--ls-eyebrow);
font-size:var(--fs-eyebrow);
font-weight:500;
color:var(--sage-deep);
}
.eyebrow .circle-mark{width:9px;height:9px;border-width:1.5px}
.eyebrow--brass{color:var(--brass)}
/* Section header: heading + small brass aside (from moodboard .sec-h) */
.sec-h{display:flex;align-items:baseline;gap:18px;margin-bottom:var(--sp-6);flex-wrap:wrap}
.sec-h h2,.sec-h h3{margin:0}
.sec-h .aside{font-family:var(--font-serif);color:var(--brass);font-size:15px;font-style:italic}
/* Section intro (centered eyebrow + heading + lede) */
.sec-intro{max-width:680px;margin-inline:auto;text-align:center}
.sec-intro .eyebrow{margin-bottom:14px}
.sec-intro p{margin-inline:auto;margin-top:16px}
/* ---- Badge / pill ---- */
.badge{
display:inline-flex;align-items:center;gap:8px;
border:1px solid var(--sage);
color:var(--sage-deep);
border-radius:var(--r-pill);
padding:7px 16px;
font-size:var(--fs-xs);
letter-spacing:.12em;
text-transform:uppercase;
font-weight:400;
line-height:1;
background:transparent;
}
.badge--brass{border-color:var(--brass-lt);color:var(--brass)}
.badge--solid{background:var(--sage-deep);color:var(--cream);border-color:var(--sage-deep)}
.badge--cream{background:var(--cream);border-color:var(--sand);color:var(--ink)}
.badges{display:flex;gap:10px;flex-wrap:wrap}
/* ==========================================================================
5. BUTTONS
========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--font-sans);
font-weight:500;
font-size:13px;
letter-spacing:.14em;
text-transform:uppercase;
padding:15px 28px;
border-radius:var(--r-pill);
border:1px solid transparent;
line-height:1;
white-space:nowrap;
cursor:pointer;
transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--sage-deep);color:var(--bone);border-color:var(--sage-deep)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bone);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.btn-ghost--light{border-color:var(--cream);color:var(--cream)}
.btn-ghost--light:hover{background:var(--cream);color:var(--ink)}
.btn-brass{background:var(--brass);color:var(--bone);border-color:var(--brass)}
.btn-brass:hover{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-sm{padding:11px 20px;font-size:12px}
.btn-lg{padding:18px 36px;font-size:13.5px}
.btn-block{display:flex;width:100%}
/* Text/underline link button */
.btn-link{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-sans);font-size:12px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
border-bottom:1px solid var(--brass);padding-bottom:3px;width:fit-content;
transition:gap var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn-link:hover{gap:12px;color:var(--sage-deep);border-color:var(--sage-deep)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* ==========================================================================
6. SITE HEADER / NAV (sticky, canonical)
========================================================================== */
.site-header{
position:sticky;top:0;z-index:100;
background:rgba(251,248,242,.88);
backdrop-filter:saturate(140%) blur(10px);
-webkit-backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--line);
/* Extend the frosted bar up into the notch / Dynamic Island strip so page
content can't scroll through visibly behind it (needs viewport-fit=cover). */
padding-top:env(safe-area-inset-top);
}
.site-header .nav{
display:flex;align-items:center;justify-content:space-between;gap:24px;
min-height:var(--header-h);
padding-block:14px;
}
/* Brand lockup */
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-name{font-family:var(--font-serif);font-size:21px;font-weight:400;letter-spacing:.01em}
.brand-sub{
font-family:var(--font-sans);font-weight:400;font-size:9px;
letter-spacing:.34em;text-transform:uppercase;color:var(--sage-deep);margin-top:4px;
}
/* Primary nav links */
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
font-family:var(--font-sans);font-size:13.5px;font-weight:400;
letter-spacing:.06em;color:var(--text-soft);position:relative;padding-block:4px;
white-space:nowrap;
}
.nav-links a::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
background:var(--brass);transform:scaleX(0);transform-origin:left;
transition:transform var(--dur) var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* Right-side actions */
.nav-actions{display:flex;align-items:center;gap:20px}
.nav-phone{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.04em;
color:var(--ink);white-space:nowrap;
}
.nav-phone .circle-mark{width:8px;height:8px;border-color:var(--brass)}
.nav-phone:hover{color:var(--brass)}
/* Hamburger (CSS-only toggle via hidden checkbox) */
.nav-toggle{display:none} /* the checkbox input */
.hamburger{
display:none;width:30px;height:22px;position:relative;cursor:pointer;flex:0 0 auto;
}
.hamburger span{
position:absolute;left:0;height:1.5px;width:100%;background:var(--ink);
transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),top var(--dur) var(--ease);
}
.hamburger span:nth-child(1){top:2px}
.hamburger span:nth-child(2){top:10px}
.hamburger span:nth-child(3){top:18px}
/* ==========================================================================
7. HERO (page hero block)
========================================================================== */
.hero{padding-block:clamp(56px,9vw,110px)}
.hero .eyebrow{margin-bottom:18px}
.hero h1{font-size:var(--fs-display);font-weight:300;letter-spacing:-.01em;line-height:1.02;margin-bottom:18px}
.hero .lede{margin-bottom:28px}
.hero-split{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(32px,5vw,72px)}
.hero-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--sand);box-shadow:var(--shadow-md)}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
/* Full-bleed background hero (photo behind copy) */
.hero--bg{position:relative;padding-block:clamp(72px,12vw,150px);overflow:hidden;background:var(--cream)}
.hero--bg .hero-bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:78% center; /* keep Dr. Chen (right side) in frame */
filter:saturate(.95) contrast(1.02);z-index:0;
}
/* Cream scrim — opaque on the left under the copy, clearing to show the photo on the right */
.hero--bg::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,
var(--cream) 0%, rgba(241,233,218,.92) 30%,
rgba(241,233,218,.55) 48%, rgba(241,233,218,0) 66%);
}
.hero--bg .container{position:relative;z-index:2}
.hero-copy{max-width:560px}
@media (max-width:760px){
.hero--bg{padding-block:clamp(48px,16vw,88px)}
.hero--bg .hero-bg{object-position:72% center}
/* On narrow screens keep enough cream through the lower copy for legibility */
.hero--bg::after{
background:linear-gradient(180deg,
rgba(241,233,218,.72) 0%, rgba(241,233,218,.86) 30%,
rgba(241,233,218,.95) 56%, var(--cream) 78%);
}
.hero-copy{max-width:none}
}
/* ==========================================================================
8. CARDS — service / category
========================================================================== */
.card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-md);
overflow:hidden;
display:flex;flex-direction:column;
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--sand)}
.card-img{aspect-ratio:3/2;background:var(--sand) center/cover no-repeat;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card-body h3,.card-body h4{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h4);margin-bottom:8px}
.card-body p{font-size:var(--fs-sm);color:var(--text-muted);max-width:none;margin-bottom:16px}
.card-body .btn-link{margin-top:auto}
.card .eyebrow{margin-bottom:10px}
/* Soft card with no image (content panel) */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3vw,40px)}
.panel--cream{background:var(--cream);border-color:var(--sand)}
/* Quote / voice block */
.quote{background:var(--cream);border-radius:var(--r-lg);padding:clamp(32px,4vw,50px)}
.quote .q{font-family:var(--font-serif);font-weight:300;font-style:italic;font-size:clamp(22px,3vw,33px);line-height:1.32;color:var(--ink)}
/* ==========================================================================
9. STAT
========================================================================== */
.stat{display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--font-serif);font-weight:300;font-size:clamp(40px,5vw,58px);line-height:1;color:var(--sage-deep);letter-spacing:-.01em}
.stat-num em{color:var(--brass);font-style:italic}
.stat-label{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-6)}
.stat-row--divided .stat{padding-inline:24px;border-left:1px solid var(--line)}
.stat-row--divided .stat:first-child{padding-left:0;border-left:0}
/* ==========================================================================
10. BEFORE / AFTER
========================================================================== */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-radius:var(--r-md);overflow:hidden}
.ba figure{position:relative;margin:0;background:var(--sand);overflow:hidden;border-radius:var(--r-sm);aspect-ratio:4/5}
.ba img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.ba figcaption{
position:absolute;left:12px;top:12px;
font-family:var(--font-sans);font-size:11px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--cream);
background:rgba(31,58,77,.78);padding:6px 12px;border-radius:var(--r-pill);
}
.ba figure.is-after figcaption{background:rgba(92,111,90,.85)}
.ba-wrap{max-width:520px}
.ba-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--text-muted)}
.ba-meta b{color:var(--ink);font-weight:500}
/* ==========================================================================
11. ACCORDION / Q&A (uses /)
========================================================================== */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
display:flex;align-items:center;justify-content:space-between;gap:20px;
list-style:none;cursor:pointer;padding:24px 4px;
font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h5);color:var(--ink);
transition:color var(--dur) var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--sage-deep)}
.qa summary .qa-icon{
position:relative;flex:0 0 auto;width:22px;height:22px;border:1px solid var(--brass);
border-radius:50%;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.qa summary .qa-icon::before,.qa summary .qa-icon::after{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
background:var(--brass);transition:opacity var(--dur) var(--ease);
}
.qa summary .qa-icon::before{width:9px;height:1px}
.qa summary .qa-icon::after{width:1px;height:9px}
.qa details[open] summary .qa-icon::after{opacity:0}
.qa details[open] summary .qa-icon{background:var(--cream)}
.qa details[open] summary{color:var(--sage-deep)}
.qa-body{padding:0 4px 26px;color:var(--text-soft);font-size:var(--fs-body);max-width:72ch}
.qa-body p + p{margin-top:14px}
/* ==========================================================================
12. PRICING MENU ROW (dotted leader + price)
========================================================================== */
.price-list{display:flex;flex-direction:column}
.price-row{
display:flex;align-items:baseline;gap:14px;
padding:18px 0;border-bottom:1px dashed var(--sand);
}
.price-row:first-child{border-top:1px dashed var(--sand)}
.price-name{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h5);color:var(--ink);white-space:nowrap}
.price-name small{display:block;font-family:var(--font-sans);font-weight:300;font-size:13px;color:var(--text-muted);white-space:normal;margin-top:3px}
.price-leader{flex:1 1 auto;border-bottom:1px dotted var(--sage);transform:translateY(-4px);min-width:24px}
.price-amt{font-family:var(--font-sans);font-weight:500;font-size:16px;letter-spacing:.04em;color:var(--sage-deep);white-space:nowrap}
.price-amt small{font-weight:300;color:var(--text-muted);letter-spacing:.04em}
.price-note{margin-top:16px;font-size:13px;color:var(--text-muted)}
/* ==========================================================================
13. FORMS
========================================================================== */
.form{display:flex;flex-direction:column;gap:var(--sp-5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.field label,.label{
font-family:var(--font-sans);font-size:12px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);
}
.field .req{color:var(--brass)}
.input,.textarea,.select,
.field input,.field textarea,.field select{
width:100%;
font-family:var(--font-sans);font-weight:300;font-size:16px;color:var(--ink);
background:var(--surface);
border:1px solid var(--sand);
border-radius:var(--r-sm);
padding:14px 16px;
line-height:1.4;
transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.field textarea,.textarea{min-height:140px;resize:vertical}
.field select,.select{
appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C6F5A' stroke-width='1.3'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;
}
.field input:focus,.field textarea:focus,.field select:focus,
.input:focus,.textarea:focus,.select:focus{
outline:none;border-color:var(--sage-deep);
box-shadow:0 0 0 3px rgba(169,185,164,.35);
}
.field input::placeholder,.field textarea::placeholder,.input::placeholder,.textarea::placeholder{color:rgba(35,48,43,.4)}
.field .hint{font-size:12.5px;color:var(--text-muted);letter-spacing:.02em;text-transform:none;font-weight:300}
/* checkbox / consent row */
.check{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--text-soft);line-height:1.5}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--sage-deep);flex:0 0 auto}
/* ==========================================================================
14. FOOTER
========================================================================== */
.site-footer{background:var(--ink);color:#cdd5cd;padding-block:clamp(56px,7vw,80px) 32px}
.site-footer a{color:#cdd5cd}
.site-footer a:hover{color:var(--brass-lt)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
.footer-brand .brand-name{color:var(--cream);font-size:24px}
.footer-brand .brand-sub{color:var(--eucalyptus)}
.footer-brand p{font-size:14px;color:#aab4ac;margin-top:16px;max-width:34ch}
.footer-col h4{
font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:var(--brass-lt);margin-bottom:18px;
}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col li,.footer-col a{font-size:14px;color:#aab4ac;font-weight:300}
.footer-col address{font-style:normal;font-size:14px;color:#aab4ac;line-height:1.7}
.footer-col address strong{color:var(--cream);font-weight:500}
.footer-social{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.footer-social a{
font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#aab4ac;
border:1px solid rgba(205,213,205,.25);border-radius:var(--r-pill);padding:7px 14px;
transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.footer-social a:hover{border-color:var(--brass-lt);color:var(--brass-lt)}
.footer-finance{margin-top:auto}
.footer-finance .label{display:block;color:var(--brass-lt);margin-bottom:12px}
.finance-logos{display:flex;flex-wrap:wrap;gap:8px}
.finance-logos span{
font-family:var(--font-sans);font-size:12px;letter-spacing:.04em;color:#cdd5cd;
background:rgba(205,213,205,.08);border:1px solid rgba(205,213,205,.18);
border-radius:6px;padding:6px 12px;
}
.footer-bottom{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
margin-top:clamp(40px,5vw,56px);padding-top:24px;border-top:1px solid rgba(205,213,205,.16);
font-size:12.5px;color:#8a948c;letter-spacing:.04em;
}
.footer-bottom a{color:#8a948c}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
/* ==========================================================================
15. PHOTO / GALLERY GRID helper (mosaic)
========================================================================== */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:150px;gap:14px}
.mosaic figure{overflow:hidden;border-radius:var(--r-md);position:relative;background:var(--sand);margin:0}
.mosaic img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.mosaic figcaption{
position:absolute;inset:auto 0 0 0;font-family:var(--font-sans);font-size:11px;
letter-spacing:.08em;color:#fff;text-transform:uppercase;padding:22px 12px 9px;
background:linear-gradient(transparent,rgba(31,58,77,.78));opacity:0;transition:opacity var(--dur) var(--ease);
}
.mosaic figure:hover figcaption{opacity:1}
.m-a{grid-column:span 5;grid-row:span 3}.m-b{grid-column:span 4;grid-row:span 2}
.m-c{grid-column:span 3;grid-row:span 2}.m-d{grid-column:span 4;grid-row:span 2}
.m-e{grid-column:span 5;grid-row:span 2}.m-f{grid-column:span 3;grid-row:span 3}
/* ==========================================================================
16. RESPONSIVE
========================================================================== */
@media (max-width:980px){
.footer-top{grid-template-columns:1fr 1fr}
.hero-split{grid-template-columns:1fr;gap:40px}
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
:root{--container-pad:22px}
/* fluid type already handled by clamp(); nudge body */
body{font-size:16px}
/* Nav → hamburger */
.hamburger{display:block}
.nav-links{
position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top)) 0 auto 0;
flex-direction:column;align-items:flex-start;gap:0;
background:var(--bone);border-bottom:1px solid var(--line);
padding:8px 22px 18px;
box-shadow:var(--shadow-md);
transform:translateY(-12px);opacity:0;visibility:hidden;
transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),visibility var(--dur);
}
.nav-links a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.nav-links a::after{display:none}
.nav-toggle:checked ~ .nav-links{transform:translateY(0);opacity:1;visibility:visible}
.nav-toggle:checked ~ .hamburger span:nth-child(1){top:10px;transform:rotate(45deg)}
.nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .hamburger span:nth-child(3){top:10px;transform:rotate(-45deg)}
.nav-actions .nav-phone{display:none}
.nav-actions .btn{display:none}
/* keep a compact CTA inside the open menu instead */
.nav-links .nav-cta{display:flex;width:100%;margin-top:14px;border-bottom:0}
/* Grids collapse */
.grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}
.stat-row--divided .stat{padding-inline:0;border-left:0}
/* Before/after stacks */
.ba{grid-template-columns:1fr}
/* Footer */
.footer-top{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;align-items:flex-start}
/* Mosaic → 2-up */
.mosaic{grid-auto-rows:120px}
.m-a,.m-b,.m-c,.m-d,.m-e,.m-f{grid-column:span 6;grid-row:span 2}
}
@media (min-width:761px){
/* Ensure mobile menu styles never leak to desktop */
.nav-links .nav-cta{display:none}
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}