/* 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: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:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}

/* Four Oaks CPAs: site styles */

/* ---------- Tokens ---------- */
/* --primary matches the approved master logo SVG (#014920).
   --accent is for rules and icons. 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-weight: 500;}
.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,
#story,
.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 .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;}
.cta-micro{margin-top: 18px; font-size: 14px; color: var(--ink-soft);}
@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 .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 h2, .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 1.3fr; 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 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-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.active{color: var(--primary); padding-left: 10px;}
.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-size: clamp(26px, 2.6vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--primary); margin-top: 18px; max-width: 24ch; text-wrap: balance;}
.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);}
/* Practice areas: an accordion at every width. All areas start closed. Each panel opens directly under its button. */
.svc-select{display: flex; flex-direction: column; gap: 0;}
.svc-select-nav,
.svc-select-panels{display: contents;}
.svc-pick{padding: 26px 4px; border-bottom: 1px solid var(--rule-soft);}
.svc-pick .pk-t{font-size: clamp(22px, 2.2vw, 28px);}
.svc-pick:hover,
.svc-pick.active{padding-left: 4px;}
.svc-pick .pk-ar{opacity: 1; transform: none; transition: transform 220ms ease;}
.svc-pick.active .pk-ar{transform: rotate(90deg);}
.svc-panel.active{display: grid; grid-template-columns: 1fr 1.1fr; column-gap: clamp(32px, 5vw, 72px); align-items: start; padding: 8px 4px 40px; border-bottom: 1px solid var(--rule-soft); animation: svcFade 320ms cubic-bezier(0.22,1,0.36,1);}
.svc-panel .eyebrow{display: none;}
.svc-panel .svc-panel-lead{grid-column: 1; margin-top: 0;}
.svc-panel .svc-panel-body{grid-column: 1;}
.svc-panel .svc-feats{grid-column: 2; grid-row: 1 / span 3; margin-top: 0; 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);}
.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;}
@media (max-width: 860px){
.svc-panel.active{display: block; padding: 4px 4px 32px; animation: none;}
.svc-panel .svc-feats{margin-top: 28px;}
}

/* ---------- 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 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-name{font-family: var(--font-display); font-size: clamp(40px, 4vw, 54px); color: var(--primary); font-weight: 500; letter-spacing: -0.015em; 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-body); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text);}
.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;}
}

/* ---------- Refinement pass (October 2026) ----------
   One display face (Cormorant Garamond, upright only) for headings 22px and up.
   Karla for everything else. No italics anywhere. Body copy at reading sizes. */
h1{font-weight: 500;}
h2{font-weight: 500;}
h1, h2, h3, .stat-n, .svc-panel-lead, .season-name, .contact .info .row .v, .faq-item summary{font-variant-numeric: lining-nums;}
.hero-v2 h1{font-size: clamp(46px, 5.6vw, 80px); line-height: 1.04; max-width: 13ch;}
.hero-v2 .lede{margin-top: 32px;}
.page-hero-v2 h1{line-height: 1.04;}
.sec-head-v2 .right,
.svc-row-head .right{font-size: 17px; line-height: 1.6;}
.svc-tile{padding: 36px 32px 32px;}
.svc-tile p{font-size: 15.5px;}
.svc-tile .more{font-size: 12px; letter-spacing: 0.16em;}
.why-oaks .brand-p{font-size: 17px;}
.protect-card .sec-item p,
.sec-item p{font-size: 15px; line-height: 1.6;}
.sec-item h4{font-size: 12px; letter-spacing: 0.14em;}
.faq-grid .head p{font-size: 16px;}
.faq-item .answer{font-size: 16.5px; line-height: 1.7;}
.svc-intro p,
.seasons-v3-head p{font-size: 17px;}
.svc-panel-body{font-size: 17px; line-height: 1.7;}
.svc-feats .ft-t{font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0;}
.svc-feats .ft-d{font-size: 15px;}
.why-head p{font-size: 17px;}
.why-item p{font-size: 15px; max-width: 32ch;}
.season-col p{font-size: 15px;}
.engagement-step p{font-size: 15.5px;}
.engagement-step h3{margin-top: 14px;}
.inquiry-tbd p{font-size: 16px;}
.modal .lede{font-size: 16px;}
.draft-note{padding: 16px 20px; background: var(--paper); border-left: 3px solid var(--accent); color: var(--ink-muted);}

/* Firm facts band (home) */
.stats{padding-top: 0; padding-bottom: 0;}
.stats-inner{display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule);}
.stat{padding: 40px 32px 44px 0;}
.stat + .stat{padding-left: 32px; border-left: 1px solid var(--rule-soft);}
.stat-n{font-family: var(--font-display); font-size: clamp(56px, 5.6vw, 84px); font-weight: 500; line-height: 0.9; letter-spacing: -0.03em; color: var(--primary); font-variant-numeric: lining-nums;}
.stat-l{margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 22ch;}
@media (max-width: 760px){
.stats-inner{grid-template-columns: 1fr;}
.stat, .stat + .stat{padding: 24px 0 26px; border-left: 0;}
.stat + .stat{border-top: 1px solid var(--rule-soft);}
.stat{display: grid; grid-template-columns: minmax(110px, auto) 1fr; align-items: center; gap: 20px;}
.stat-l{margin-top: 0;}
}

/* Oak watermark: the brand mark at large scale replaces the stock leaf photo behind contact blocks */
.contact .leaf-bg{display: none;}
.contact::after{content: ""; position: absolute; width: clamp(420px, 46vw, 720px); aspect-ratio: 1; right: -8%; bottom: -22%; background: url('/assets/oak-watermark-white.webp') center / contain no-repeat; opacity: 0.07; pointer-events: none; z-index: 0;}
.contact.cta-light::after{background-image: url('/assets/oak-watermark-green.webp'); opacity: 0.04; right: auto; left: -10%; bottom: -30%;}
.contact > .wrap{position: relative; z-index: 1;}

/* Partner portrait placeholders */
.team-grid-v2 .member-photo{position: relative; background: var(--primary-soft); color: var(--primary); overflow: hidden; align-items: end; padding-bottom: 20px;}
.team-grid-v2 .member-photo::before{content: ""; position: absolute; inset: 18% 18% 30%; background: url('/assets/oak-watermark-green.webp') center / contain no-repeat; opacity: 0.16;}

/* Scroll reveal on the live site (site.js adds .js-reveal; nothing is hidden without it) */
@media (prefers-reduced-motion: no-preference){
html.js-reveal .rv{opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);}
html.js-reveal .rv.in{opacity: 1; transform: none;}
}

/* Home hero: animated oak mark (draws the ring, grows the trunk, then the leaves appear) */
.hero-mark{display: flex; align-items: center; justify-content: center;}
.oak-anim{width: 100%; max-width: 520px; height: auto; display: block; fill: var(--primary); overflow: visible;}
.oak-ring-draw{stroke-dasharray: 1480 2900; stroke-dashoffset: 0;}
.oak-trunk-grow{transform-box: fill-box; transform-origin: 50% 100%;}
.oak-anim .lf{transform-box: fill-box; transform-origin: 50% 50%;}
@media (prefers-reduced-motion: no-preference){
.oak-ring-draw{animation: oakRing 1100ms cubic-bezier(0.65, 0, 0.35, 1) 150ms both;}
.oak-trunk-grow{animation: oakGrow 1200ms cubic-bezier(0.33, 1, 0.68, 1) 700ms both;}
.oak-anim .lf{animation: oakLeaf 620ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(1450ms + var(--i) * 42ms);}
}
@keyframes oakRing{from{stroke-dashoffset: 1480;} to{stroke-dashoffset: 0;}}
@keyframes oakGrow{from{transform: scaleY(0);} to{transform: scaleY(1);}}
@keyframes oakLeaf{from{opacity: 0; transform: scale(0.2) rotate(-12deg);} to{opacity: 1; transform: none;}}
/* Tablet: keep the logo beside the headline. Phone: a smaller logo sits above the text, aligned with it. */
@media (max-width: 880px) and (min-width: 721px){
.hero-v2-grid{grid-template-columns: 1.15fr 0.85fr; gap: 32px;}
}
@media (max-width: 720px){
.hero-v2-grid{gap: 28px;}
.hero-v2-grid .hero-mark{order: -1; justify-content: flex-start;}
.oak-anim{max-width: 168px;}
}

/* Why Four Oaks: photo beside the story, security points below in three columns */
@media (min-width: 881px){
.why-oaks-grid{grid-template-columns: 0.95fr 1.05fr; align-items: center;}
}
@media (max-width: 880px){
.why-oaks-photo{aspect-ratio: 3 / 2;}
}
.why-oaks-photo{aspect-ratio: 5 / 4; overflow: hidden; border: 1px solid var(--rule-soft);}
.why-oaks-photo img{width: 100%; height: 100%; object-fit: cover;}
.protect-wide{margin-top: clamp(48px, 6vw, 80px); grid-template-columns: repeat(3, 1fr); gap: 28px 40px;}
.protect-wide h3{grid-column: 1 / -1;}
@media (max-width: 880px){
.protect-wide{grid-template-columns: 1fr;}
}

/* Footer on phones: the brand block spans the full width so the name stays on one line */
@media (max-width: 820px){
.foot .brand-lockup{grid-column: 1 / -1; max-width: 420px;}
}

/* About hero: the logo's oak without its ring. The 4 draws in gold first, then the tree grows around it and the leaves appear. */
.hero-four{display: flex; align-items: center; justify-content: center;}
.oak-four{width: 100%; max-width: 500px; height: auto; display: block; fill: var(--primary); overflow: visible;}
.oak-four .four-line{fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;}
.oak-four .four-l1{stroke-dasharray: var(--l1); stroke-dashoffset: 0;}
.oak-four .four-l2{stroke-dasharray: var(--l2); stroke-dashoffset: 0;}
.four-grow-rect{transform-box: fill-box; transform-origin: 50% 100%;}
.oak-four .lf{transform-box: fill-box; transform-origin: 50% 50%;}
@media (prefers-reduced-motion: no-preference){
.oak-four .four-l1{animation: fourDraw1 950ms cubic-bezier(0.65, 0, 0.35, 1) 200ms both;}
.oak-four .four-l2{animation: fourDraw2 800ms cubic-bezier(0.65, 0, 0.35, 1) 1100ms both;}
.four-grow-rect{animation: oakGrow 1200ms cubic-bezier(0.33, 1, 0.68, 1) 1900ms both;}
.oak-four .lf{animation: oakLeaf 620ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(2850ms + var(--i) * 40ms);}
}
@keyframes fourDraw1{from{stroke-dashoffset: var(--l1);} to{stroke-dashoffset: 0;}}
@keyframes fourDraw2{from{stroke-dashoffset: var(--l2);} to{stroke-dashoffset: 0;}}
@media (max-width: 880px) and (min-width: 721px){
.page-hero-v2-grid:has(.hero-four){grid-template-columns: 1.15fr 0.85fr; gap: 32px;}
}
@media (max-width: 720px){
.page-hero-v2-grid .hero-four{order: -1; justify-content: flex-start;}
.oak-four{max-width: 200px;}
}

/* About hero: a short video grows the oak (trunk and branches, then leaves, then the sky and field).
   The still photo sits underneath and shows when motion is reduced or the video cannot play. */
.hero-grow img,
.hero-grow video{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: none;}
.hero-grow video{background: var(--bg);}
.hero-grow.no-video video{display: none;}
@media (prefers-reduced-motion: reduce){
.hero-grow video{display: none;}
}

/* Partner portraits */
.team-grid-v2 .member-photo.has-photo{padding: 0; background: var(--rule-soft);}
.team-grid-v2 .member-photo.has-photo::before{display: none;}
.team-grid-v2 .member-photo.has-photo img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block;}

/* Partner emails stay on one line. Phones show one partner per row so the address fits. */
.member-email{word-break: normal; overflow-wrap: normal; white-space: nowrap;}
@media (max-width: 600px){
.team-grid-v2{grid-template-columns: 1fr;}
}
@media (max-width: 360px){
.member-email{font-size: 13px;}
}
.team-grid-v2{grid-template-columns: repeat(4, minmax(0, 1fr));}
@media (max-width: 1200px){
.team-grid-v2{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 600px){
.team-grid-v2{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 600px){
.team-grid-v2 .member-photo{aspect-ratio: 1 / 1;}
.team-grid-v2 .member-photo.has-photo img{object-position: 50% 8%;}
}

/* Upload dialog action */
.modal .btn{margin-top: 4px;}

/* Footer on phones: the Contact column spans the full width so the email address stays on one line */
.foot-grid > *{min-width: 0;}
@media (max-width: 820px){
.foot-grid > div:last-child{grid-column: 1 / -1;}
}
@media (max-width: 1040px) and (min-width: 821px){
.foot-grid{grid-template-columns: 1.2fr 1fr 1fr; row-gap: 40px;}
.foot-grid > div:last-child{grid-column: 2 / -1;}
}

/* Deep links to a practice area land below the sticky header */
.svc-pick{scroll-margin-top: 96px;}

/* Footer disclaimer */
.foot-disclaimer{margin-top: 20px; max-width: 90ch; font-size: 12px; line-height: 1.6; color: rgba(250,248,243,0.7);}

/* About hero: second intro paragraph */
.page-hero-v2 .lede.lede-2{margin-top: 18px;}

/* Partner cards: four across down to tablet width (tighter text so emails still fit on one line),
   then two across at a capped size, then one per row on phones. Photos never grow past about 320px wide. */
@media (max-width: 1200px){
.team-grid-v2{grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.team-grid-v2 .member .body{padding: 24px 18px;}
.team-grid-v2 .member h2, .team-grid-v2 .member h3{font-size: 22px;}
.member-email{font-size: 13px;}
}
@media (max-width: 1040px){
.team-grid-v2{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 680px; margin-left: auto; margin-right: auto;}
.team-grid-v2 .member-photo{aspect-ratio: 1 / 1;}
.team-grid-v2 .member-photo.has-photo img{object-position: 50% 8%;}
.team-grid-v2 .member .body{padding: 24px 22px;}
.member-email{font-size: 14px;}
}
@media (max-width: 600px){
.team-grid-v2{grid-template-columns: minmax(0, 1fr); max-width: 380px; margin-left: auto; margin-right: auto;}
}

/* Contact: reach a partner directly */
.contact .info .pc-list{list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 460px;}
.contact .pc{display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 16px 10px 10px; border: 1px solid rgba(250, 248, 243, 0.18); background: rgba(250, 248, 243, 0.04); color: var(--bg); text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease;}
.contact .pc:hover{border-color: var(--accent-soft); background: rgba(250, 248, 243, 0.09); color: var(--bg);}
.contact .pc img{width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 0%; display: block;}
.contact .pc-name{display: block; font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--bg);}
.contact .pc-email{display: block; margin-top: 3px; font-size: 14px; color: rgba(250, 248, 243, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.foot a[href^="mailto:"]{white-space: nowrap;}
.contact .info .pc-note{margin-top: 8px; font-size: 16px; line-height: 1.6; color: rgba(250, 248, 243, 0.85); max-width: 40ch;}
/* About: partners first, story second */
.page-hero-v2.team-top .sec-head-v2{margin-bottom: 40px;}
.page-hero-v2.team-top .sec-head-v2 .right{margin-bottom: 6px;}
.about-story{padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); border-top: 1px solid var(--rule-soft);}
.about-story h2{font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 56px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--primary);}
.about-story .story-lead{margin-top: 32px; font-family: var(--font-display); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.45; color: var(--primary); max-width: 62ch;}
.story-cols{margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px);}
.story-cols p{font-size: 16px; line-height: 1.75; color: var(--ink-muted); max-width: 58ch;}
@media (max-width: 820px){
.story-cols{grid-template-columns: 1fr; gap: 20px;}
}
/* Contact: partners in a grid under the intro and the inquiry box */
.contact .contact-inner{align-items: stretch;}
.contact .inquiry-tbd{justify-content: center;}
.contact .info.contact-partners{margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid rgba(250, 248, 243, 0.14); gap: 24px;}
.contact .contact-partners .pc-list{grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 14px;}
.contact .contact-partners .pc{grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 24px 14px 22px;}
.contact .contact-partners .pc img{width: 72px; height: 72px;}
.contact .contact-partners .pc-email{font-size: 13px;}
@media (max-width: 1100px){
.contact .contact-partners .pc-list{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px){
.contact .contact-partners .pc-list{grid-template-columns: 1fr;}
.contact .contact-partners .pc{grid-template-columns: 52px minmax(0, 1fr); justify-items: start; text-align: left; gap: 16px; padding: 10px 16px 10px 10px;}
.contact .contact-partners .pc img{width: 52px; height: 52px;}
.contact .contact-partners .pc-email{font-size: 14px;}
}
/* Uniform surfaces: one cream page background, white cards, thin rules between sections */
.client-strip, .why-oaks, .why, .seasons-v3, .engagement-steps, .contact.cta-light{background: var(--bg); border-bottom: 0;}
.svc-row-section, .faq-section{border-top: 1px solid var(--rule-soft);}
.protect-card, .why-card, .engagement-step{background: var(--paper);}
.season-col, .season-col:nth-child(odd){background: transparent;}
.seasons-v3-grid{border-bottom: 1px solid var(--rule);}