/* Fonts are self-hosted (Karla and Cormorant Garamond, SIL Open Font License). */
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/karla-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/karla-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/karla-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/karla-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');}

/* Four Oaks CPAs: site styles */

/* ---------- Tokens ---------- */
/* --primary matches the approved master logo SVG (#014920).
   --accent is for rules, icons and large italic accents. Small brass text uses --accent-text, which passes WCAG AA (5.2:1 on cream).
   --ink-soft passes AA for small text (4.9:1 on cream). */
:root{--bg: #faf8f3; --paper: #ffffff; --ink: #1a1a17; --ink-muted: #5c5b54; --ink-soft: #6f6d66; --rule: #d9d4c5; --rule-soft: #ece8db; --primary: #014920; --primary-deep: #00341a; --primary-soft: #e6ede5; --accent: #a08348; --accent-text: #7d6534; --accent-soft: #e7dec7; --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-eyebrow: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-logo: Georgia, "Times New Roman", serif; --font-logo-sub: Arial, Helvetica, sans-serif; --s-9: 96px; --s-10: 128px; --maxw: 1240px; --gutter: clamp(20px, 4vw, 56px);}

/* ---------- Base ---------- */
html{color-scheme: light only;}
/* Smooth scrolling for same-page links only (site.js adds .smooth after load), and never when reduced motion is requested. */
@media (prefers-reduced-motion: no-preference){
html.smooth{scroll-behavior: smooth;}
}
*{box-sizing: border-box;}
html,
body{margin: 0; padding: 0;}
body{background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
img{max-width: 100%; display: block;}
a{color: inherit; text-decoration: none;}
h1,
h2,
h3{font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; color: var(--ink); margin: 0; text-wrap: balance;}
h1{font-size: clamp(48px, 7.2vw, 104px); font-weight: 400; letter-spacing: -0.02em;}
h2{font-size: clamp(36px, 4.6vw, 64px); font-weight: 400;}
h3{font-size: clamp(24px, 2.2vw, 32px); font-weight: 500;}
h4{font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin: 0;}
p{margin: 0; text-wrap: pretty;}
.lede{font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55; color: var(--ink-muted); max-width: 56ch;}
.eyebrow{font-family: var(--font-eyebrow); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: 10px;}
.eyebrow::before{content: ""; width: 28px; height: 1px; background: var(--accent);}
.italic-serif{font-family: var(--font-display); font-style: italic; font-weight: 400;}
.wrap{max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter);}
section{padding-top: var(--s-10); padding-bottom: var(--s-10);}
@media (max-width: 720px){
section{padding-top: var(--s-9); padding-bottom: var(--s-9);}
}
.rule{height: 1px; background: var(--rule); border: 0; margin: 0;}

/* ---------- Keyboard access ---------- */
.skip-link{position: absolute; left: 16px; top: -80px; z-index: 300; background: var(--primary); color: var(--bg); padding: 12px 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: top 160ms ease;}
.skip-link:focus{top: 16px;}
main:focus{outline: none;}
#contact,
#team,
.svc-select{scroll-margin-top: 96px;}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline: 2px solid var(--primary); outline-offset: 3px;}
.foot a:focus-visible,
.foot button:focus-visible,
.contact:not(.cta-light) a:focus-visible,
.skip-link:focus-visible{outline-color: var(--accent-soft);}

/* ---------- Buttons ---------- */
.btn{display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 16px 26px; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: all 220ms ease; background: var(--primary); color: var(--bg);}
.btn:hover{background: var(--primary-deep);}
.btn .arrow{transition: transform 220ms ease;}
.btn:hover .arrow{transform: translateX(4px);}
.btn-ghost{background: transparent; color: var(--ink); border: 1px solid var(--ink);}
.btn-ghost:hover{background: var(--ink); color: var(--bg);}
.btn-link{font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--primary); background: none; border-radius: 0; cursor: pointer;}
.btn-link:hover{color: var(--accent-text); border-color: var(--accent-text);}

/* ---------- Nav ---------- */
.nav{position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 243, 0.86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--rule-soft);}
.nav-inner{max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px;}
.nav-logo{display: flex; align-items: center; gap: 14px;}
.nav-logo img{height: 44px; width: auto;}
.nav-logo .nlk-text{display: flex; flex-direction: column; line-height: 1;}
/* The wordmark uses the same typefaces as the master logo file (Georgia and Arial), sized for screens. */
.nav-logo .nlk-name{font-family: var(--font-logo); font-size: 24px; font-weight: 400; letter-spacing: 0.02em; color: var(--primary);}
.nav-logo .nlk-sub{font-family: var(--font-logo-sub); font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); margin-top: 5px;}
.nav-links{display: flex; align-items: center; gap: 36px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;}
.nav-links a{color: var(--ink); position: relative; padding: 8px 0; transition: color 180ms ease; white-space: nowrap;}
.nav-links a:hover,
.nav-links a.active{color: var(--primary);}
.nav-links a.active::after{content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--accent);}
.nav-cta{display: flex; align-items: center; gap: 18px;}
.nav-cta{gap: 10px;}
.nav-action{display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--primary); background: transparent; color: var(--primary); cursor: pointer; white-space: nowrap; transition: background 180ms ease, color 180ms ease, border-color 180ms ease;}
.nav-action:hover{background: var(--primary); color: var(--bg);}
.nav-action-solid{background: var(--primary); color: var(--bg);}
.nav-action-solid:hover{background: var(--primary-deep); border-color: var(--primary-deep);}
.nav-toggle{display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin: 0; color: var(--ink); line-height: 0;}
.nav-toggle svg{display: block; stroke-width: 2.2;}
.nav-mobile{position: fixed; top: 81px; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--bg); padding: clamp(8px, 2vh, 20px) var(--gutter) clamp(16px, 3vh, 32px); display: none; flex-direction: column; gap: 0; justify-content: center; overflow-y: auto; border-top: 1px solid var(--rule-soft);}
.nav-mobile.open{display: flex;}
.nav-mobile a,
.nav-mobile button{display: flex; align-items: center; justify-content: space-between; padding: clamp(12px, 2.2vh, 20px) 0; border-bottom: 1px solid var(--rule-soft); font-family: var(--font-display); font-size: clamp(22px, 5.2vw, 28px); line-height: 1.3; color: var(--primary); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; background: none; border-left: 0; border-right: 0; border-top: 0; border-radius: 0; margin: 0; width: 100%; text-align: left; cursor: pointer; flex: 0 0 auto;}
.nav-mobile a svg,
.nav-mobile button svg{color: var(--accent);}
@media (max-height: 600px){
.nav-mobile a,
.nav-mobile button{font-size: 19px; padding: 10px 0;}
}
.nav-mobile .m-action{color: var(--primary); font-weight: 600;}
/* Below 1240px the page links move into the menu. Upload and Pay stay visible in the header until phone width. */
@media (max-width: 1240px){
.nav-links{display: none;}
.nav-cta{margin-left: auto;}
.nav-toggle{display: inline-flex;}
}
@media (max-width: 780px){
.nav-cta{display: none;}
}

/* ---------- Client strip (home, under the hero) ---------- */
.client-strip{padding-top: 22px; padding-bottom: 22px; background: var(--paper); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);}
.client-strip-inner{display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;}
.client-strip-copy{display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;}
.client-strip-copy p{font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--primary); letter-spacing: -0.005em;}
.client-strip-actions{display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.client-strip-actions .tbd-tag{margin-top: 0;}
.btn-outline{background: transparent; color: var(--primary); border: 1px solid var(--primary);}
.btn-outline:hover{background: var(--primary); color: var(--bg);}

/* ---------- Why Four Oaks (home) ---------- */
.why-oaks{padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); background: var(--paper); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);}
.why-oaks-grid{display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: center;}
.why-oaks-mark{width: 88px; height: 88px; object-fit: contain; margin-bottom: 28px;}
.why-oaks h2{font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 500; color: var(--primary); letter-spacing: -0.02em; line-height: 1.04; margin-top: 20px;}
.why-oaks .brand-p{margin-top: 22px; color: var(--ink-muted); font-size: 16px; line-height: 1.7; max-width: 58ch;}
.why-oaks .btn-link{margin-top: 32px;}
.protect-card{background: var(--bg); border: 1px solid var(--rule-soft); border-top: 3px solid var(--primary); padding: clamp(28px, 3.5vw, 44px); display: grid; gap: 26px;}
.protect-card h3{font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; color: var(--primary); margin: 0;}
.protect-card .sec-item p{font-size: 14px;}
@media (max-width: 880px){
.why-oaks-grid{grid-template-columns: 1fr;}
}

/* ---------- Home hero ---------- */
.hero-v2{padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px);}
.hero-v2-grid{display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center;}
.hero-v2 h1{font-family: var(--font-display); font-size: clamp(48px, 6.4vw, 88px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--primary);}
.hero-v2 h1 .accent{font-style: italic; color: var(--accent); font-weight: 400;}
.hero-v2 .lede{margin-top: 56px; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: var(--ink-muted); max-width: 52ch;}
.hero-v2 .cta-row{margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap;}
.hero-v2 .hero-img{aspect-ratio: 5 / 4; background: var(--bg); overflow: hidden; position: relative; border: 1px solid var(--rule-soft);}
.hero-v2 .hero-img img{width: 100%; height: 100%; object-fit: cover; display: block; animation: heroFadeIn 600ms ease-out both;}
.hero-subline{margin-top: 28px; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--ink); font-style: italic; font-weight: 400; max-width: 36ch; text-wrap: balance;}
.hero-subline em{font-style: italic;}
.cta-micro{margin-top: 16px; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft); font-style: italic;}
@media (max-width: 880px){
.hero-v2-grid{grid-template-columns: 1fr;}
.hero-v2 .hero-img{aspect-ratio: 3/2;}
}

/* ---------- Inner page hero ---------- */
.page-hero-v2{padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 72px);}
.page-hero-v2 .crumb{font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 32px;}
.page-hero-v2 .crumb a{border-bottom: 1px solid var(--rule); padding-bottom: 1px;}
.page-hero-v2-grid{display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center;}
.page-hero-v2 h1{font-family: var(--font-display); font-size: clamp(48px, 6vw, 80px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--primary);}
.page-hero-v2 h1 .accent{font-style: italic; color: var(--accent); font-weight: 400;}
.page-hero-v2 .lede{margin-top: 36px; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.65; color: var(--ink-muted); max-width: 52ch;}
.page-hero-v2 .hero-img{aspect-ratio: 5 / 4; background: var(--bg); overflow: hidden; position: relative; border: 1px solid var(--rule-soft);}
.page-hero-v2 .hero-img img{width: 100%; height: 100%; object-fit: cover; display: block; animation: heroFadeIn 600ms ease-out both;}
@media (max-width: 880px){
.page-hero-v2-grid{grid-template-columns: 1fr;}
}
@keyframes heroFadeIn{from{opacity: 0} to{opacity: 1}}
.reveal{animation: revealRise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 80ms;}
@keyframes revealRise{
  from { transform: translateY(20px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce){
.reveal{animation: none !important; transform: none !important;}
.hero-v2 .hero-img img,
.page-hero-v2 .hero-img img{animation: none;}
}

/* ---------- Section header (H2 left, paragraph right) ---------- */
.sec-head-v2,
.svc-row-head{display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 48px;}
.sec-head-v2 h2,
.svc-row-head h2{font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 48px); color: var(--primary); font-weight: 500; letter-spacing: -0.01em; max-width: 18ch;}
.sec-head-v2 .right{max-width: 42ch; color: var(--ink-muted); font-size: 15px; line-height: 1.65;}
.svc-row-head .right{max-width: 42ch; color: var(--ink-muted); font-size: 15px; line-height: 1.6;}
@media (max-width: 720px){
.sec-head-v2{flex-direction: column; align-items: start;}
.svc-row-head{flex-direction: column; align-items: start; gap: 16px;}
}

/* ---------- Home service tiles ---------- */
.svc-row-section{padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px);}
.svc-row{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.svc-tile{background: var(--paper); border: 1px solid var(--rule-soft); padding: 32px 28px 28px; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; position: relative;}
.svc-tile:hover{border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 24px 60px -28px rgba(1,73,32,0.18);}
.svc-tile .icon{width: 46px; height: 46px; color: var(--primary); margin-bottom: 26px;}
.svc-tile h3{font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--primary); letter-spacing: -0.01em; margin: 0; line-height: 1.15;}
.svc-tile p{margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); flex: 1;}
.svc-tile .more{margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); font-weight: 700;}
.svc-tile .more svg{transition: transform 220ms ease;}
.svc-tile:hover .more svg{transform: translateX(4px);}
@media (max-width: 880px){
.svc-row{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 540px){
.svc-row{grid-template-columns: 1fr;}
}

/* ---------- Principles card (About) ---------- */
.why{background: var(--paper); padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);}
.why-card{background: var(--bg); padding: clamp(40px, 5vw, 64px); border: 1px solid var(--rule-soft);}
.why-head h2{font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; color: var(--primary); letter-spacing: -0.01em;}
.why-head .rule{width: 56px; height: 1px; background: var(--accent); margin: 22px 0;}
.why-head p{color: var(--ink-muted); font-size: 15px; line-height: 1.6; max-width: 56ch;}
.why-grid{margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;}
.why-item{text-align: center; display: flex; flex-direction: column; align-items: center;}
.why-item .icon{width: 36px; height: 36px; color: var(--primary); margin: 0 auto 18px; display: block;}
.why-item h3{font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.55; letter-spacing: -0.005em; text-transform: none; color: var(--primary); margin: 0; min-height: 2.4em; display: flex; align-items: center; justify-content: center; text-wrap: balance;}
.why-item p{margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); max-width: 30ch;}
@media (max-width: 880px){
.why-grid{grid-template-columns: 1fr 1fr; row-gap: 32px;}
}
@media (max-width: 540px){
.why-grid{grid-template-columns: 1fr;}
}

/* ---------- Partners (About) ---------- */
.team-grid-v2{display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;}
.team-grid-v2 .member{background: var(--paper); border: 1px solid var(--rule-soft); padding: 0; display: flex; flex-direction: column;}
.team-grid-v2 .member-photo{aspect-ratio: 4 / 5; background: var(--rule-soft); display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule-soft);}
.team-grid-v2 .member .body{padding: 28px 24px; display: flex; flex-direction: column; flex: 1;}
.team-grid-v2 .member h3{font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--primary); letter-spacing: -0.01em; margin: 0;}
.team-grid-v2 .member .role{font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); margin-top: 8px; font-weight: 700;}
.team-grid-v2 .member-tbd{align-self: start; margin-top: 16px;}
.member-email{display: inline-block; align-self: start; margin-top: 16px; font-size: 14px; color: var(--primary); border-bottom: 1px solid var(--rule); padding-bottom: 2px; word-break: break-all;}
.member-email:hover{color: var(--accent-text); border-color: var(--accent-text);}
@media (max-width: 1000px){
.team-grid-v2{grid-template-columns: 1fr 1fr;}
}

/* ---------- FAQ ---------- */
.faq-section{padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(40px, 5vw, 72px);}
.faq-grid{display: grid; grid-template-columns: 320px 1fr; gap: clamp(40px, 6vw, 96px);}
.faq-grid .head h2{font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 48px); color: var(--primary); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; margin-top: 16px;}
.faq-grid .head p{margin-top: 20px; font-size: 15px; color: var(--ink-muted); line-height: 1.65; max-width: 36ch;}
.faq-list{display: grid; gap: 0; border-top: 1px solid var(--rule-soft);}
.faq-item{border-bottom: 1px solid var(--rule-soft);}
.faq-item summary{list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--primary); letter-spacing: -0.005em; line-height: 1.25; transition: color 180ms;}
.faq-item summary::-webkit-details-marker{display: none;}
.faq-item summary:hover{color: var(--accent-text);}
.faq-item summary::after{content: ""; width: 16px; height: 16px; flex-shrink: 0; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 220ms ease; color: var(--ink-muted);}
.faq-item[open] summary::after{transform: rotate(45deg); color: var(--accent);}
.faq-item[open] summary{color: var(--primary);}
.faq-item .answer{padding: 0 0 24px; max-width: 64ch; font-size: 15px; line-height: 1.7; color: var(--ink-muted);}
@media (max-width: 820px){
.faq-grid{grid-template-columns: 1fr; gap: 32px;}
}

/* ---------- Security points (inside Why Four Oaks) ---------- */
.sec-item{display: flex; gap: 14px; align-items: start;}
.sec-item .ic{width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 1px;}
.sec-item h4{font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin: 0; font-weight: 700;}
.sec-item p{margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-muted);}

/* ---------- Contact (green on home, light on inner pages) ---------- */
.contact{background: var(--primary); color: var(--bg); position: relative; overflow: hidden;}
.contact .leaf-bg{position: absolute; inset: 0; background-image: url('/assets/leaf-branch.webp'); background-size: cover; background-position: center; opacity: 0.10; filter: saturate(0) brightness(1.2);}
.contact-inner{position: relative; z-index: 1; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start;}
.contact h2{color: var(--bg);}
.contact .eyebrow{color: #d4c08a;}
.contact .eyebrow::before{background: var(--accent);}
.contact .form .eyebrow{color: var(--primary);}
.contact .lede{color: rgba(250,248,243,0.78);}
.contact .info{margin-top: 40px; display: grid; gap: 28px;}
.contact .info .row .k{font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-soft);}
.contact .info .row .v{margin-top: 8px; font-family: var(--font-display); font-size: 22px; color: var(--bg);}
.form{background: var(--bg); color: var(--ink); padding: clamp(28px, 4vw, 48px); display: grid; gap: 18px; border: 1px solid rgba(255,255,255,0.08);}
.inquiry-tbd{text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(40px, 5vw, 64px);}
.inquiry-tbd .tbd-mark{width: 64px; height: 64px;}
.inquiry-tbd h3{font-family: var(--font-display); font-size: 34px; font-weight: 500; color: var(--primary); margin: 0;}
.inquiry-tbd p{max-width: 36ch; color: var(--ink-muted); font-size: 15px; line-height: 1.65;}
.tbd-tag{display: inline-block; margin-top: 6px; padding: 8px 14px; border: 1px solid var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;}
.contact.cta-light{background: var(--paper); color: var(--ink); border-top: 1px solid var(--rule-soft);}
.contact.cta-light .leaf-bg{display: none;}
.contact.cta-light h2{color: var(--primary);}
.contact.cta-light .eyebrow{color: var(--primary);}
.contact.cta-light .lede{color: var(--ink-muted);}
.contact.cta-light .btn{background: var(--primary) !important; color: var(--bg) !important;}
.contact.cta-light .btn:hover{background: var(--primary-deep) !important;}
.contact.cta-light .btn-ghost{background: transparent !important; color: var(--primary) !important; border-color: var(--primary) !important;}
@media (max-width: 820px){
.contact-inner{grid-template-columns: 1fr;}
}

/* ---------- Footer ---------- */
.foot{background: var(--primary-deep); color: rgba(250,248,243,0.78); padding: 80px 0 32px;}
.foot-grid{display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(250,248,243,0.12);}
.foot .foot-h{font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; line-height: 1.55; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 18px;}
.foot ul{list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;}
.foot a:hover{color: var(--bg);}
.foot-link{background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;}
.foot-link:hover{color: var(--bg);}
.foot .brand-lockup{display: flex; flex-direction: column; gap: 18px; max-width: 320px;}
.foot .brand-lockup img{width: 56px; height: 56px;}
.foot .brand-lockup .name{font-family: var(--font-logo); font-size: 28px; color: var(--bg); letter-spacing: 0.02em; line-height: 1.1;}
.foot .brand-lockup .sub{font-family: var(--font-logo-sub); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); margin-top: 6px;}
.foot .brand-lockup p{font-size: 14px; line-height: 1.55;}
.foot-bot{padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.06em;}
.foot-legal{margin-top: 16px; display: flex; gap: 18px; align-items: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,248,243,0.65); font-weight: 500;}
.foot-legal a:hover{color: var(--bg);}
@media (max-width: 820px){
.foot-grid{grid-template-columns: 1fr 1fr;}
.foot-bot{flex-direction: column; gap: 12px;}
}
@media (max-width: 720px){
.foot-legal{flex-wrap: wrap; gap: 12px;}
}

/* ---------- Portal dialog ---------- */
.modal-backdrop{position: fixed; inset: 0; background: rgba(0, 52, 26, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 200ms ease;}
.modal-backdrop.open{display: flex; opacity: 1;}
.modal{background: var(--bg); width: 100%; max-width: 460px; padding: 40px; position: relative; border-top: 3px solid var(--primary); box-shadow: 0 40px 120px rgba(0,52,26,0.25); transform: translateY(8px); transition: transform 200ms ease;}
.modal-backdrop.open .modal{transform: translateY(0);}
.modal .close{position: absolute; top: 16px; right: 16px; background: none; border: 0; cursor: pointer; font-size: 24px; color: var(--ink-muted); line-height: 1; padding: 4px 8px;}
.modal .logo-mark{width: 56px; height: 56px; margin-bottom: 20px;}
.modal h3{color: var(--primary); margin-bottom: 8px;}
.modal .lede{font-size: 15px; margin-bottom: 28px;}
.modal .tbd-tag{margin-top: 4px;}

/* ---------- Services: intro and practice-area selector ---------- */
.svc-detail-section{padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 6vw, 96px);}
.svc-intro{max-width: 720px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center;}
.svc-intro h2{font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 60px); font-weight: 500; color: var(--primary); letter-spacing: -0.02em; line-height: 1.04; margin-top: 16px;}
.svc-intro h2 .italic{font-style: italic; color: var(--accent); font-weight: 400;}
.svc-intro p{margin-top: 22px; font-size: 16px; line-height: 1.65; color: var(--ink-muted); max-width: 58ch; margin-left: auto; margin-right: auto;}
.svc-select{display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--rule); padding-top: clamp(32px, 4vw, 56px); align-items: start;}
.svc-select-nav{display: grid; gap: 0; position: sticky; top: 96px;}
.svc-pick{display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-soft); padding: 20px 4px; cursor: pointer; color: var(--ink-muted); transition: color 200ms ease, padding-left 200ms ease;}
.svc-pick .pk-n{font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink-soft); transition: color 200ms ease;}
.svc-pick .pk-t{font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; flex: 1;}
.svc-pick .pk-ar{opacity: 0; transform: translateX(-6px); transition: opacity 200ms ease, transform 200ms ease; color: var(--accent); flex-shrink: 0;}
.svc-pick:hover{color: var(--primary); padding-left: 10px;}
.svc-pick:hover .pk-n{color: var(--accent-text);}
.svc-pick.active{color: var(--primary); padding-left: 10px;}
.svc-pick.active .pk-n{color: var(--accent-text);}
.svc-pick.active .pk-ar{opacity: 1; transform: translateX(0);}
.svc-select-panels{min-height: 420px; position: relative;}
.svc-panel{display: none;}
.svc-panel.active{display: block; animation: svcFade 320ms cubic-bezier(0.22,1,0.36,1);}
@keyframes svcFade{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.svc-panel-lead{font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: var(--primary); margin-top: 18px; max-width: 26ch;}
.svc-panel-body{margin-top: 22px; font-size: 15.5px; line-height: 1.7; color: var(--ink-muted); max-width: 62ch;}
.svc-feats{list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule-soft);}
.svc-feats li{padding: 18px 24px 18px 0; border-bottom: 1px solid var(--rule-soft);}
.svc-feats li:nth-child(odd){border-right: 1px solid var(--rule-soft); padding-right: 28px;}
.svc-feats li:nth-child(even){padding-left: 28px;}
.svc-feats li:nth-last-child(-n+2){border-bottom: 0;}
.svc-feats .ft-t{display: block; font-family: var(--font-display); font-size: 18px; color: var(--primary); font-weight: 500; letter-spacing: -0.005em;}
.svc-feats .ft-d{display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-muted);}
/* Phones and small tablets: the list becomes an accordion. Each panel opens directly under its button. */
@media (max-width: 860px){
.svc-select{display: flex; flex-direction: column; gap: 0;}
.svc-select-nav,
.svc-select-panels{display: contents;}
.svc-pick .pk-ar{opacity: 1; transform: none; transition: transform 200ms ease;}
.svc-pick.active .pk-ar{transform: rotate(90deg);}
.svc-panel.active{padding: 4px 4px 32px; border-bottom: 1px solid var(--rule-soft); animation: none;}
.svc-panel .eyebrow{display: none;}
.svc-pick:nth-child(1){order: 1;} .svc-panel:nth-child(1){order: 2;}
.svc-pick:nth-child(2){order: 3;} .svc-panel:nth-child(2){order: 4;}
.svc-pick:nth-child(3){order: 5;} .svc-panel:nth-child(3){order: 6;}
.svc-pick:nth-child(4){order: 7;} .svc-panel:nth-child(4){order: 8;}
.svc-pick:nth-child(5){order: 9;} .svc-panel:nth-child(5){order: 10;}
.svc-pick:nth-child(6){order: 11;} .svc-panel:nth-child(6){order: 12;}
.svc-feats{grid-template-columns: 1fr;}
.svc-feats li{border-right: 0 !important; padding: 16px 0 !important;}
.svc-feats li:nth-last-child(2){border-bottom: 1px solid var(--rule-soft);}
}

/* ---------- Services: four seasons ---------- */
.seasons-v3{padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); background: var(--paper); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);}
.seasons-v3-head{text-align: center; max-width: 720px; margin: 0 auto 72px;}
.seasons-v3-head h2{font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); color: var(--primary); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;}
.seasons-v3-head h2 .italic{font-style: italic; color: var(--accent); font-weight: 400;}
.seasons-v3-head p{margin-top: 24px; font-size: 16px; line-height: 1.65; color: var(--ink-muted); max-width: 56ch; margin-left: auto; margin-right: auto;}
.seasons-v3-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule);}
.season-col{padding: 48px 32px 36px; border-right: 1px solid var(--rule-soft); text-align: center; position: relative; background: var(--bg);}
.season-col:last-child{border-right: 0;}
.season-col:nth-child(odd){background: transparent;}
.season-icon{width: 34px; height: 34px; color: var(--accent); margin: 0 auto 18px; display: block;}
.season-numeral{font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--accent-text); letter-spacing: 0.04em; line-height: 1;}
.season-name{font-family: var(--font-display); font-size: clamp(44px, 4.4vw, 60px); font-style: italic; color: var(--primary); font-weight: 400; letter-spacing: -0.01em; margin-top: 10px; line-height: 1; text-wrap: balance;}
.season-rule{width: 32px; height: 1px; background: var(--accent); margin: 26px auto 22px;}
.season-col h3{font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.005em; color: var(--primary); text-transform: none; margin: 0; line-height: 1.3; min-height: 2.5em; display: flex; align-items: center; justify-content: center;}
.season-col p{margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--ink-muted);}
@media (max-width: 1000px){
.seasons-v3-grid{grid-template-columns: 1fr 1fr;}
.season-col:nth-child(2n){border-right: 0;}
.season-col:nth-child(-n+2){border-bottom: 1px solid var(--rule-soft);}
.season-col h3{min-height: 0;}
}
@media (max-width: 540px){
.seasons-v3-grid{grid-template-columns: 1fr;}
.season-col{border-right: 0; border-bottom: 1px solid var(--rule-soft); padding: 36px 24px 32px;}
.season-col:last-child{border-bottom: 0;}
}

/* ---------- Services: engagement steps ---------- */
.engagement-steps{padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); background: var(--paper); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);}
.engagement-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px;}
.engagement-step{background: var(--bg); padding: 36px 32px 32px; border: 1px solid var(--rule-soft); position: relative;}
.engagement-step .n{font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--accent-text); letter-spacing: 0.02em;}
.engagement-step h3{font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--primary); letter-spacing: -0.01em; margin: 12px 0 0;}
.engagement-step p{margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--ink-muted);}
@media (max-width: 820px){
.engagement-grid{grid-template-columns: 1fr;}
}