/*
Theme Name:  Roodhouse Law
Theme URI:   https://roodhouselaw.com/
Author:      Skyway Media
Author URI:  https://skyway.media/
Description: A bespoke WordPress theme for Roodhouse Law, PLLC — a St. Petersburg, Florida estate planning, probate, trust administration and guardianship firm. Brush-edged section transitions, a full-bleed video hero, colour bands and photo panels, built on the firm's brand palette (navy #2E5B84, sage #719964, cream #FFF8E8, yellow #FFF189) with Playfair Display and Jost. Ships page templates for Home, About Us, Estate Planning and Contact, plus block patterns for every section so new pages can be composed in the editor.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roodhouse-law
Tags:        one-column, custom-logo, custom-menu, featured-images, block-patterns, editor-style, translation-ready, threaded-comments

Roodhouse Law is distributed under the terms of the GNU GPL v2 or later.
*/

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (Brand Style Sheet) */
  --navy:        #2E5B84;
  --navy-deep:   #234866;
  --navy-ink:    #17324A;
  --blue-mid:    #A4CBEA;
  --blue-pale:   #D1E2E9;
  --cream:       #FFF8E8;
  --sage-light:  #BBD2A5;
  --sage:        #719964;
  --sage-deep:   #5A7C50;
  --yellow:      #FFF189;
  --yellow-deep: #E8D45C;

  /* Neutrals */
  --white:  #FFFFFF;
  --ink:    #22323D;
  --body:   #55666F;
  --muted:  #8A9AA3;
  --paper:  #F4F5F3;
  --rule:   rgba(46, 91, 132, .17);

  /* Type */
  --serif: "Playfair Display", Baskerville, Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Metrics */
  --wrap: 1240px;
  --wrap-narrow: 900px;
  --gutter: 24px;
  --section-y: clamp(60px, 7vw, 108px);
  --edge-h: clamp(34px, 4.4vw, 78px);
  --shadow-card: 0 22px 54px rgba(23, 50, 74, .13);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--sage); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--yellow); color: var(--navy-ink); }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 20px;
  font: 500 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(44px, 4.6vw, 68px); }
.section--cream { background: var(--cream); }
.section--pale  { background: var(--blue-pale); }
.section--paper { background: var(--paper); }
.section--navy  { background: var(--navy); color: rgba(255,255,255,.88); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.grid { display: grid; gap: clamp(26px, 3.4vw, 52px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.6vw, 74px); align-items: center; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   4. Brush edges (reference-site brushstroke motif)
   -------------------------------------------------------------------------- */
.edge {
  position: absolute; left: -2px; right: -2px;
  height: var(--edge-h);
  z-index: 4; pointer-events: none;
  background: var(--white);
  -webkit-mask: url("assets/img/brush-a.svg") center/100% 100% no-repeat;
          mask: url("assets/img/brush-a.svg") center/100% 100% no-repeat;
}
.edge--alt {
  -webkit-mask-image: url("assets/img/brush-b.svg");
          mask-image: url("assets/img/brush-b.svg");
}
.edge--top    { top: -1px; }
.edge--bottom { bottom: -1px; transform: scaleY(-1); }
.edge--cream  { background: var(--cream); }
.edge--paper  { background: var(--paper); }
.edge--pale   { background: var(--blue-pale); }
.edge--navy   { background: var(--navy); }

/* --------------------------------------------------------------------------
   4b. Magnolia watermark (supplied brand element)
   -------------------------------------------------------------------------- */
.section--wm { position: relative; overflow: hidden; }

.section--wm::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--wm-size, clamp(240px, 34vw, 560px));
  aspect-ratio: 900 / 888;
  background: url("assets/img/watermark-element.png") center/contain no-repeat;
  opacity: var(--wm-opacity, .85);
}

/* Keep section content above the watermark. */
.section--wm > * { position: relative; z-index: 1; }
/* …but the brush edges must stay absolutely positioned and paint over the
   watermark, so re-assert them at higher specificity than the rule above. */
.section--wm > .edge { position: absolute; z-index: 4; }

.wm--tl::before { top: var(--wm-y, -7%); left: var(--wm-x, -7%); }
.wm--tr::before { top: var(--wm-y, -7%); right: var(--wm-x, -7%); }
.wm--bl::before { bottom: var(--wm-y, -9%); left: var(--wm-x, -8%); }
.wm--br::before { bottom: var(--wm-y, -9%); right: var(--wm-x, -8%); }
.wm--center::before { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* On dark grounds the all-white cut sits back further. */
.section--navy.section--wm::before,
.cta-photo.section--wm::before,
.page-hero.section--wm::before {
  background-image: url("assets/img/watermark-element-white.png");
  opacity: var(--wm-opacity, .12);
}

@media (max-width: 640px) {
  .section--wm::before { opacity: calc(var(--wm-opacity, .85) * .7); }
}

/* --------------------------------------------------------------------------
   5. Type components
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage); margin: 0 0 .85rem;
}
.section--navy .eyebrow { color: var(--blue-mid); }

/* Italic serif accent word set above a big display line */
.accent-line {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  color: var(--sage); line-height: 1.05; margin: 0 0 .05em;
}
.section--navy .accent-line { color: var(--blue-mid); }

/* Big uppercase display heading (reference "STACEY-ANN TAYLOR" role) */
.display {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .98;
  color: var(--navy);
  margin: 0 0 .35em;
  font-size: clamp(2rem, 4vw, 3.35rem);
}
.display--xl { font-size: clamp(2.5rem, 6.2vw, 5.2rem); line-height: .92; }
.display .tint { color: var(--sage); display: block; }
.section--navy .display { color: #fff; }
.section--navy .display .tint { color: var(--yellow); }

/* Large italic serif ghost heading over colour bands */
.ghost-heading {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  line-height: 1.16; color: rgba(255,255,255,.4); margin: 0 0 .5em;
}

/* Yellow italic subhead */
.subhead-accent {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.15rem, 1.85vw, 1.5rem);
  color: var(--yellow); line-height: 1.32; margin: 0 0 1rem;
}
.subhead-accent--sage { color: var(--sage); }

.lead {
  font-size: clamp(1.04rem, 1.25vw, 1.18rem);
  font-weight: 500; line-height: 1.68; color: var(--ink);
}
.section--navy .lead { color: rgba(255,255,255,.95); }

.rule { width: 62px; height: 2px; border: 0; background: var(--sage); margin: 0 0 1.5rem; }
.rule--center { margin-inline: auto; }
.section--navy .rule { background: var(--blue-mid); }

/* Yellow brush highlight behind a word */
.mark-brush {
  position: relative;
  isolation: isolate;
  padding-inline: .1em;
}
.mark-brush::before {
  content: ""; position: absolute; inset: 52% -.14em .02em -.14em;
  background: var(--yellow);
  -webkit-mask: url("assets/img/brush-stroke.svg") center/100% 100% no-repeat;
          mask: url("assets/img/brush-stroke.svg") center/100% 100% no-repeat;
  z-index: -1;
}

/* Vertical ghosted watermark letters (reference "TT" motif) */
.watermark {
  position: absolute; right: .02em; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(9rem, 18vw, 17rem);
  line-height: .78; letter-spacing: -.04em;
  color: rgba(255,255,255,.07);
  pointer-events: none; user-select: none;
  writing-mode: vertical-rl;
  z-index: 0;
}
.watermark--dark { color: rgba(46,91,132,.06); }

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 28px;
  border: 2px solid var(--navy); background: var(--navy); color: #fff;
  border-radius: 0; cursor: pointer;
  transition: background .22s, color .22s, border-color .22s, transform .22s;
}
.btn:hover { background: var(--navy-ink); border-color: var(--navy-ink); color: #fff; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--light { background: transparent; border-color: rgba(255,255,255,.85); color: #fff; }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--navy); }
.btn--sage { background: var(--sage); border-color: var(--sage); }
.btn--sage:hover { background: var(--sage-deep); border-color: var(--sage-deep); }
.btn--block { width: 100%; justify-content: center; }
/* Compact variant for the header utility row. */
.btn--sm { padding: 9px 18px; font-size: .71rem; letter-spacing: .13em; border-width: 1px; }
.btn .chev { font-size: .66em; transform: translateY(1px); }

.arrow-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .76rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--sage);
}
.arrow-link .chev { font-size: .7em; transition: transform .22s; }
.arrow-link:hover { color: var(--navy); }
.arrow-link:hover .chev { transform: translateX(4px); }
.section--navy .arrow-link { color: var(--yellow); }
.section--navy .arrow-link:hover { color: #fff; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow .25s; }
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(23,50,74,.10); }

.header-inner {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 26px; padding-block: 14px;
}
.brand { display: block; line-height: 0; }
.brand img { width: clamp(200px, 22vw, 272px); height: auto; }

.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.header-utility {
  display: flex; align-items: center; gap: 18px;
  font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
/* The utility row's CTA must not inherit the row's uppercase letter-spacing twice. */
.header-utility .btn { text-transform: uppercase; }
.header-utility .btn:hover { transform: none; }
.header-utility .tel { color: var(--sage); }
.header-utility .tel:hover { color: var(--navy); }

.main-nav ul { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; }
.main-nav a {
  position: relative; display: block; padding-block: 6px;
  font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--sage); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--navy); }
.nav-toggle svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   8. Hero — full-bleed brand film
   --------------------------------------------------------------------------
   The video is decorative: muted, looping, inert to assistive tech, and never
   the only carrier of meaning. A poster frame (the video's own first frame, so
   there is no jump on play) paints instantly and stays visible if the file is
   slow, blocked, or the visitor prefers reduced motion.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(500px, 70vh, 760px);
  padding-block: clamp(72px, 9vw, 118px) clamp(60px, 7.5vw, 96px);
  background: var(--navy) url("assets/img/hero-poster.jpg") center/cover no-repeat;
  color: #fff;
}

/* The film itself */
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* Fades in once the first frame has decoded, so the poster never blinks. */
  opacity: 0;
  transition: opacity .9s ease;
}
.hero__video.is-playing { opacity: 1; }

/* Vimeo background embed — an alternative to the self-hosted <video>.
   An iframe cannot be object-fit, so a 16:9 frame is blown up until it covers
   the hero in both directions and centred, which crops rather than letterboxes. */
.hero__embed {
  position: absolute; top: 50%; left: 50%; z-index: -2;
  width: 100vw; height: 56.25vw;          /* 16:9 keyed off the width  */
  min-width: 177.78vh; min-height: 100vh; /* …and off the height       */
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
}
.hero__embed.is-playing { opacity: 1; }
/* Pausing hides the film and lets the poster frame beneath show through —
   WCAG 2.2.2 accepts pause, stop *or hide* for motion that loops past 5s. */
.hero--embed-paused .hero__embed { opacity: 0; }

/* Navy scrim — deep at the left where the type sits, opening to the right. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(97deg, rgba(15,36,55,.95) 0%, rgba(20,45,67,.89) 34%, rgba(28,58,85,.54) 68%, rgba(30,62,90,.34) 100%),
    linear-gradient(to top, rgba(15,36,55,.62) 0%, rgba(15,36,55,0) 44%);
}

.hero__grid { position: relative; z-index: 1; }
.hero__copy { max-width: min(660px, 56%); }

/* White, not --blue-mid: measured against the brightest frames of the film,
   the pale blue falls to 2.9:1 — below AA for text this small. */
.hero .accent-line { color: #fff; text-shadow: 0 2px 16px rgba(12,30,46,.45); }
.hero .display { color: #fff; text-shadow: 0 2px 26px rgba(12,30,46,.34); }
.hero .display .tint { color: var(--yellow); }

.hero__tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.72rem);
  color: rgba(255,255,255,.94);
  line-height: 1.32;
  margin: 0 0 1.7rem;
  max-width: 34ch;
  text-shadow: 0 2px 18px rgba(12,30,46,.40);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { border-color: #fff; background: #fff; color: var(--navy); }
.hero__actions .btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy-ink); }
.hero__actions .btn--outline { background: transparent; border-color: rgba(255,255,255,.8); color: #fff; }
.hero__actions .btn--outline:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* Pause / play control — small, unobtrusive, keyboard reachable. */
.hero__toggle {
  position: absolute; z-index: 2;
  right: clamp(14px, 2.4vw, 30px);
  /* Clear the brush edge so the control never sits on the torn transition. */
  bottom: calc(var(--edge-h) + clamp(12px, 1.6vw, 20px));
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(18,42,63,.42);
  color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .22s, border-color .22s, opacity .22s;
}
.hero__toggle:hover { background: rgba(18,42,63,.72); border-color: #fff; }
.hero__toggle svg { width: 15px; height: 15px; fill: currentColor; }
.hero__toggle .icon-play { display: none; }
.hero__toggle[aria-pressed="true"] .icon-play  { display: block; }
.hero__toggle[aria-pressed="true"] .icon-pause { display: none; }
/* Hidden until JS confirms the video is actually running. */
.hero:not(.hero--has-video) .hero__toggle { display: none; }

/* Magnolia watermark reads as a soft light bloom over the film. */
.hero.section--wm::before {
  background-image: url("assets/img/watermark-element-white.png");
  opacity: var(--wm-opacity, .10);
}

/* --------------------------------------------------------------------------
   9. Page hero (interior pages) — photo band with brush edges
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(70px, 8.5vw, 130px);
  background: var(--navy) center/cover no-repeat;
  color: #fff;
  isolation: isolate;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(23,50,74,.92) 0%, rgba(46,91,132,.82) 52%, rgba(46,91,132,.55) 100%);
}
.page-hero h1, .page-hero .display { color: #fff; }
.page-hero .accent-line { color: var(--blue-mid); }
.page-hero p { color: rgba(255,255,255,.9); max-width: 60ch; }
.breadcrumb { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 1.2rem; }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   10. Intro block with tall photo
   -------------------------------------------------------------------------- */
.photo-frame { position: relative; }
.photo-frame::before {
  content: ""; position: absolute; inset: -22px -22px 34px 22px;
  background: var(--blue-pale); z-index: 0;
}
.photo-frame img { position: relative; z-index: 1; width: 100%; height: auto; }
.photo-frame--sage::before { background: var(--sage-light); }
.photo-frame--cream::before { background: var(--cream); }

/* A landscape photograph in a portrait frame keeps a considered crop. */
.photo-frame--crop img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .photo-frame--crop img { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   11. Speech bubbles (reference FAQ row)
   -------------------------------------------------------------------------- */
.bubbles {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px, 1.8vw, 26px);
  margin-block: clamp(34px, 4vw, 56px);
}
.bubble {
  --bub-edge: var(--blue-mid);
  position: relative;
  background: #fff;
  border: 1.5px solid var(--bub-edge);
  border-radius: 18px;
  padding: 22px 22px 24px;
  font-size: .95rem; line-height: 1.5; color: var(--navy); font-weight: 500;
  min-height: 124px;
  display: flex; align-items: center;
}
.bubble::before, .bubble::after {
  content: ""; position: absolute; left: 32px;
  border-style: solid; border-color: transparent; border-bottom: 0;
}
.bubble::before { bottom: -16px; border-width: 16px 15px 0 0; border-top-color: var(--bub-edge); }
.bubble::after  { bottom: -13px; border-width: 13px 12px 0 0; border-top-color: #fff; }
.bubble:nth-child(2) { --bub-edge: var(--sage-light); margin-top: 26px; }
.bubble:nth-child(3) { --bub-edge: var(--yellow-deep); }
.bubble:nth-child(4) { --bub-edge: var(--sage); margin-top: 26px; }

/* --------------------------------------------------------------------------
   12. Photo + overlapping white card (reference "Business Philosophy")
   -------------------------------------------------------------------------- */
.photo-panel { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.photo-panel__media { min-height: 560px; height: 100%; background: center/cover no-repeat; }
.photo-panel__card {
  background: #fff;
  padding: clamp(32px, 3.6vw, 62px);
  margin-left: clamp(-70px, -4vw, 0px);
  box-shadow: var(--shadow-card);
  position: relative; z-index: 2;
}

/* --------------------------------------------------------------------------
   13. Accordion
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--rule); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 17px 0;
  font-family: var(--sans); font-weight: 500; font-size: 1rem;
  color: var(--navy); line-height: 1.45;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--sans); font-weight: 400; font-size: 1.4rem; line-height: 1;
  color: var(--sage); transition: transform .25s;
}
.acc details[open] summary::after { content: "\2013"; }
.acc summary:hover { color: var(--sage); }
.acc .acc__body { padding: 0 34px 20px 0; font-size: .97rem; }
.section--navy .acc { border-color: rgba(255,255,255,.2); }
.section--navy .acc details { border-color: rgba(255,255,255,.2); }
.section--navy .acc summary { color: #fff; }
.section--navy .acc summary::after { color: var(--yellow); }

/* --------------------------------------------------------------------------
   14. Services split (image panel + link groups)
   -------------------------------------------------------------------------- */
.svc-visual { position: relative; }
.svc-visual img { width: 100%; height: clamp(340px, 34vw, 500px); object-fit: cover; }
.stroke-underline { position: relative; display: inline-block; isolation: isolate; }
.stroke-underline::after {
  content: ""; position: absolute; left: -.1em; right: -.1em; bottom: -.06em; height: .42em;
  background: var(--yellow);
  -webkit-mask: url("assets/img/brush-stroke.svg") center/100% 100% no-repeat;
          mask: url("assets/img/brush-stroke.svg") center/100% 100% no-repeat;
  z-index: -1;
}
.svc-visual__note {
  position: absolute; left: 8%; right: 10%; bottom: 9%;
  background: var(--navy); color: rgba(255,255,255,.92);
  padding: 22px 24px; font-size: .93rem; line-height: 1.6;
}

.link-group { margin-bottom: 30px; }
.link-group > a, .link-group > span.link-group__title {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .85rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 12px;
}
.link-group ul { list-style: none; margin: 0; padding: 0; }
.link-group li {
  position: relative; padding-left: 18px; margin-bottom: 7px;
  font-size: .95rem; line-height: 1.55;
}
.link-group li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 7px; height: 7px; border: 1.5px solid var(--sage); border-radius: 50%;
}

/* --------------------------------------------------------------------------
   15. Numbered "if you want" list
   -------------------------------------------------------------------------- */
.numlist { border-top: 1px solid var(--rule); }
.numlist details { border-bottom: 1px solid var(--rule); }
.numlist summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px;
  padding: 18px 0;
}
.numlist summary::-webkit-details-marker { display: none; }
.numlist .n {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 2.4rem; line-height: 1; color: var(--sage);
}
.numlist .t { font-weight: 500; color: var(--navy); line-height: 1.45; }
.numlist summary::after { content: "+"; font-size: 1.35rem; color: var(--sage); line-height: 1; }
.numlist details[open] summary::after { content: "\2013"; }
.numlist .acc__body { padding: 0 34px 20px 68px; font-size: .96rem; }

/* --------------------------------------------------------------------------
   16. Testimonial
   -------------------------------------------------------------------------- */
.quote-mark {
  font-family: var(--serif); font-weight: 700; font-size: 4.6rem; line-height: .6;
  color: var(--sage); opacity: .55; display: block; margin-bottom: .12em;
}
.testimonial p.q {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.32; color: var(--navy);
  margin-bottom: 1rem;
}
/* A long review reads badly centred, so the body sets left at a comfortable
   measure while the quote mark, pull-line and attribution stay centred. */
.testimonial__body {
  text-align: left;
  max-width: 66ch;
  margin-inline: auto;
  margin-bottom: 1.6rem;
}
.testimonial__body p + p { margin-top: .9rem; }
.testimonial cite {
  display: block; font-style: normal; font-weight: 600;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage);
}

/* --------------------------------------------------------------------------
   17. Photo CTA + form card
   -------------------------------------------------------------------------- */
.cta-photo {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy) center/cover no-repeat;
  padding-block: clamp(78px, 9vw, 140px);
  color: #fff;
}
.cta-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(23,50,74,.93) 0%, rgba(35,72,102,.80) 44%, rgba(23,50,74,.42) 100%);
}
.cta-photo--center::after {
  background: linear-gradient(180deg, rgba(23,50,74,.88) 0%, rgba(35,72,102,.84) 100%);
}
.cta-photo p { color: rgba(255,255,255,.88); }
/* …but the white form card sits inside that band, so its text must not inherit
   the band's white. This also fixes the fine print under the built-in card
   form, which had been white-on-white and effectively invisible. */
.cta-photo .form-card p { color: var(--body); }
.cta-photo .form-card .form-note { color: var(--muted); }
.cta-photo .lead { color: #fff; }
.cta-photo .display { color: #fff; }
.cta-photo .display .tint { color: var(--yellow); }
.cta-photo .phone-xl {
  display: inline-block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--yellow); margin: .1em 0 .6em;
}
.cta-photo .phone-xl:hover { color: #fff; }

.form-card { background: #fff; padding: clamp(28px, 3vw, 44px); box-shadow: var(--shadow-card); }
.form-card h2 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--navy); margin-bottom: .6em;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--navy); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 11px 2px; border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; border-radius: 0;
  transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--sage); }
.field textarea { min-height: 96px; resize: vertical; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 12px; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field--full { grid-column: 1 / -1; }

/* Standalone contact form (contact page) uses boxed inputs */
.form-boxed .field input, .form-boxed .field select, .form-boxed .field textarea {
  border: 1px solid var(--rule); padding: 12px 14px;
}
.form-boxed .field input:focus, .form-boxed .field select:focus, .form-boxed .field textarea:focus {
  border-color: var(--sage); box-shadow: 0 0 0 3px rgba(113,153,100,.15);
}

/* Form plugins (WPForms, Contact Form 7, Gravity Forms)
   -------------------------------------------------------------------------
   A plugin ships its own field styling, which lands in the middle of this
   design looking borrowed. These rules pull the common markup back onto the
   theme's type, spacing and colours, so a plugin form reads as part of the
   page. Scoped to .form-plugin so nothing here escapes into the admin or a
   third-party block elsewhere. */
.form-plugin { --fp-border: var(--rule); }

/* Plugins wrap the whole thing in a container with its own margins. */
.form-plugin .wpforms-container,
.form-plugin .wpforms-container-full { margin: 0; }
.form-plugin form { margin: 0; }

/* Labels — small caps, like the built-in fields. */
.form-plugin label,
.form-plugin .wpforms-field-label,
.form-plugin .gfield_label {
  display: block;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-plugin .wpforms-required-label { color: var(--sage); }

/* Sublabels (First / Last under a name field) stay quiet and sentence case. */
.form-plugin .wpforms-field-sublabel {
  font-size: .72rem; letter-spacing: 0; text-transform: none;
  color: var(--muted); font-weight: 400; margin-top: 4px;
}

.form-plugin .wpforms-field,
.form-plugin .gfield { margin-bottom: 16px; padding: 0; }

/* Inputs — boxed on the contact page, underlined in the home card, matching
   .form-boxed and .field respectively. */
.form-plugin input[type="text"],
.form-plugin input[type="email"],
.form-plugin input[type="tel"],
.form-plugin input[type="url"],
.form-plugin input[type="number"],
.form-plugin select,
.form-plugin textarea {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: 0;
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-plugin textarea { min-height: 128px; resize: vertical; }

.form-plugin input:focus,
.form-plugin select:focus,
.form-plugin textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(113,153,100,.15);
}

/* The compact home-page card keeps the underline treatment. */
.form-plugin--card input[type="text"],
.form-plugin--card input[type="email"],
.form-plugin--card input[type="tel"],
.form-plugin--card select,
.form-plugin--card textarea {
  border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; padding: 11px 2px;
}
.form-plugin--card input:focus,
.form-plugin--card select:focus,
.form-plugin--card textarea:focus {
  border-bottom-color: var(--sage); box-shadow: none;
}

/* Submit — the theme's button, not the plugin's. */
.form-plugin button[type="submit"],
.form-plugin input[type="submit"],
.form-plugin .wpforms-submit,
.form-plugin .gform_button {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 28px;
  border: 2px solid var(--navy); background: var(--navy); color: #fff;
  border-radius: 0; cursor: pointer; width: auto;
  transition: background .22s, border-color .22s, transform .22s;
}
.form-plugin button[type="submit"]:hover,
.form-plugin input[type="submit"]:hover,
.form-plugin .wpforms-submit:hover,
.form-plugin .gform_button:hover {
  background: var(--navy-ink); border-color: var(--navy-ink); color: #fff;
  transform: translateY(-2px);
}

/* In the home-page card the built-in form used a full-width button; keep that
   so a plugin form does not leave a small button adrift in a wide white card. */
.form-plugin--card button[type="submit"],
.form-plugin--card input[type="submit"],
.form-plugin--card .wpforms-submit,
.form-plugin--card .gform_button {
  width: 100%; justify-content: center; margin-top: 6px;
}

/* Validation and confirmation messages in the brand palette. */
.form-plugin .wpforms-error,
.form-plugin .gfield_description.validation_message {
  font-size: .8rem; color: #b32d2e; margin-top: 6px;
}
.form-plugin input.wpforms-error,
.form-plugin textarea.wpforms-error,
.form-plugin select.wpforms-error { border-color: #b32d2e; }

.form-plugin .wpforms-confirmation-container-full,
.form-plugin .gform_confirmation_message {
  background: var(--cream);
  border-left: 3px solid var(--sage);
  padding: 18px 22px;
  color: var(--ink);
}

/* Two-across on the contact page, matching .form-grid, once there is room. */
@media (min-width: 620px) {
  .form-plugin--boxed .wpforms-field-name .wpforms-field-row { display: flex; gap: 18px; }
  .form-plugin--boxed .wpforms-field-name .wpforms-field-row-block { flex: 1; }
}

/* --------------------------------------------------------------------------
   18. Cards, lists, misc
   -------------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--rule);
  padding: clamp(24px, 2.6vw, 36px); height: 100%;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(23,50,74,.09); border-color: var(--blue-mid); }
.card__num { display: block; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--sage); margin-bottom: .5rem; }

.pillar { text-align: center; }
.pillar .pillar-mark {
  display: block; width: 50px; height: 50px; margin: 0 auto 16px;
  background: url("assets/img/flower-mark.svg") center/contain no-repeat;
}
.section--navy .pillar .pillar-mark { filter: brightness(0) invert(1); opacity: .9; }
.pillar h3 { font-size: 1.22rem; margin-bottom: .35rem; }
.pillar p { font-size: .95rem; }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding-left: 32px; margin-bottom: .9rem; line-height: 1.6; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .4em; width: 16px; height: 16px;
  background: url("assets/img/flower-mark.svg") center/contain no-repeat;
}
.section--navy .check-list li::before { filter: brightness(0) invert(1); opacity: .85; }

.cred-list { list-style: none; margin: 0; padding: 0; }
.cred-list li { position: relative; padding: 12px 0 12px 20px; border-bottom: 1px solid var(--rule); font-size: .96rem; }
.cred-list li::before { content: ""; position: absolute; left: 0; top: 1.62em; width: 10px; height: 2px; background: var(--sage); }
.cred-list li:last-child { border-bottom: 0; }

.callout { background: var(--cream); border-left: 4px solid var(--sage); padding: clamp(20px,2.4vw,30px) clamp(22px,2.8vw,34px); }
.callout p { color: var(--ink); }

.bio { display: grid; grid-template-columns: 330px 1fr; gap: clamp(28px, 3.6vw, 56px); align-items: start; }
.bio__portrait { position: relative; }
.bio__portrait::before { content: ""; position: absolute; inset: -18px 18px 22px -18px; background: var(--blue-pale); }
.bio__portrait img { position: relative; width: 100%; height: auto; }
.bio__portrait--placeholder .ph {
  position: relative; aspect-ratio: 251/345; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--cream), var(--blue-pale));
}
.bio__portrait--placeholder .ph::after {
  content: ""; width: 52%; aspect-ratio: 229/254; opacity: .5;
  background: url("assets/img/flower-mark.svg") center/contain no-repeat;
}
.bio__name { margin-bottom: .1em; }
.bio__role { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); font-weight: 500; margin-bottom: 1.3rem; }

.contact-row { display: flex; gap: 16px; padding-block: 15px; border-bottom: 1px solid var(--rule); }
.contact-row:last-of-type { border-bottom: 0; }
.contact-row dt { flex: 0 0 100px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-top: 4px; }
.contact-row dd { margin: 0; color: var(--ink); }
.contact-card { background: #fff; border: 1px solid var(--rule); padding: clamp(26px,3vw,40px); }
.map-frame { border: 1px solid var(--rule); width: 100%; min-height: 340px; filter: grayscale(.25); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-ink); color: rgba(255,255,255,.7); font-size: .93rem; padding-top: clamp(48px, 5.5vw, 74px); }
.site-footer a { color: rgba(255,255,255,.8); }
.site-footer a:hover { color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1.15fr; gap: clamp(28px,3.6vw,56px); padding-bottom: 40px; }
.footer-logo { width: 244px; height: auto; margin-bottom: 18px; }
.footer-heading { font-family: var(--sans); font-size: .73rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-mid); font-weight: 500; margin: 0 0 1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .55rem; }
.disclaimer { font-size: .78rem; line-height: 1.65; color: rgba(255,255,255,.48); padding-bottom: 22px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 18px 26px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  font-size: .79rem; color: rgba(255,255,255,.52);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
.social { display: flex; gap: 12px; align-items: center; }
.social a {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: rgba(255,255,255,.8);
  transition: background .2s, color .2s, border-color .2s;
}
.social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy-ink); }
.social svg { width: 14px; height: 14px; fill: currentColor; }

/* --------------------------------------------------------------------------
   20. Reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }

  /* The hero holds on its poster frame rather than playing the film. The
     Vimeo iframe is never injected at all — see main.js — so there is nothing
     to hide there. */
  .hero__video { display: none; }
  .hero__toggle { display: none !important; }
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bubbles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bubble:nth-child(2), .bubble:nth-child(4) { margin-top: 0; }
  .bio { grid-template-columns: 250px 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; justify-self: end; }
  .header-inner { grid-template-columns: 1fr auto; }
  .header-right {
    display: none; grid-column: 1 / -1; align-items: stretch;
    border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 12px;
  }
  .header-right.is-open { display: flex; }
  .header-utility { order: 2; justify-content: flex-start; flex-wrap: wrap; }
  .main-nav { order: 1; width: 100%; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--rule); }
  .main-nav a { padding: 13px 2px; font-size: .85rem; }
  .main-nav a::after { display: none; }

  .hero { min-height: clamp(440px, 62vh, 600px); padding-block: clamp(60px, 9vw, 92px) clamp(48px, 7vw, 76px); }
  .hero__copy { max-width: 100%; }
  /* Stacked full-width CTAs claim the bottom corner, so the control moves up. */
  .hero__toggle { top: clamp(14px, 4vw, 22px); bottom: auto; width: 38px; height: 38px; }

  .split, .split--wide-left, .split--wide-right, .grid--2, .grid--3, .form-grid { grid-template-columns: 1fr; }
  .photo-panel { grid-template-columns: 1fr; }
  .photo-panel__media { min-height: 300px; }
  .photo-panel__card { margin-left: 0; }
  .photo-frame::before { inset: -14px -14px 22px 14px; }
  .watermark { font-size: 9rem; opacity: .7; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .bubbles { grid-template-columns: 1fr; }
  .bio { grid-template-columns: 1fr; }
  .bio__portrait { max-width: 300px; }
  .contact-row { flex-direction: column; gap: 4px; }
  .contact-row dt { flex-basis: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .numlist summary { grid-template-columns: 40px 1fr auto; gap: 10px; }
  .numlist .n { font-size: 1.9rem; }
  .numlist .acc__body { padding-left: 50px; }
  .svc-visual__note { position: static; margin-top: -1px; }
  .svc-visual__stroke { display: none; }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-photo, .nav-toggle, .edge, .watermark,
  .hero__video, .hero__embed, .hero__toggle { display: none !important; }
  .hero { min-height: 0; padding-block: 24pt; background: none; color: #000; }
  .hero__scrim { display: none; }
  .hero .display, .hero__tagline, .hero .accent-line { color: #000; text-shadow: none; }
  body { color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
}