/*
Theme Name: Joe Amara Executive Search
Theme URI: https://www.joeamara.com
Description: Custom Genesis child theme for Joe Amara Executive Search, built from the Sept 2026 HTML mockup (site/*.html, README-for-Alex.txt). Requires the Genesis Framework parent theme and the ACF plugin (Pro recommended for the repeater fields on the practice-area pages).
Author: ePageCity
Author URI: https://epagecity.com
Template: genesis
Version: 1.0.2
Text Domain: joeamara
*/

/* ==========================================================================
   WordPress core requirements (not in the original static mockup)
   ========================================================================== */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute !important; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#f6f2ea; clip:auto !important; clip-path:none; color:#14213a; display:block; font-size:14px;
  height:auto; left:6px; line-height:normal; padding:14px 22px; text-decoration:none; top:6px; width:auto; z-index:100000;
}
.alignleft{float:left; margin:0 24px 12px 0;}
.alignright{float:right; margin:0 0 12px 24px;}
.aligncenter{display:block; margin:12px auto;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:12px; color:#8a8370; margin-top:6px;}

/* Genesis's built-in "Skip to primary navigation" / "Skip to main content"
   links (genesis-accessibility's skip-links, output near the top of every
   page — see #genesis-nav-primary / #genesis-content in
   lib/output-hooks.php). Genesis uses its own .screen-reader-shortcut
   class for these rather than the WordPress-standard .screen-reader-text
   above, so it needs its own rule: hidden off-screen until a keyboard user
   tabs to it, then it appears at the very top of the page. */
.genesis-skip-link{margin:0; padding:0; list-style:none;}
.screen-reader-shortcut{
  background:#f6f2ea; color:#14213a; display:block; font-size:15px; font-weight:600;
  left:0; line-height:normal; padding:14px 0; position:absolute; text-align:center;
  text-decoration:none; top:-10000px; width:100%; z-index:100000;
}
.screen-reader-shortcut:focus{top:0;}

/* Keep the sticky nav clear of the wp-admin toolbar for logged-in editors. */
.admin-bar .nav{top:32px;}
@media screen and (max-width:782px){
  .admin-bar .nav{top:46px;}
}

:root{
  --navy-deep:#0d1728;
  --navy:#14213a;
  --cream:#f6f2ea;
  --gold:#ac8a52;
  --gold-light:#c9a86a;
  --ink:#1c2333;
  --ink-soft:#4a4436;
  /* Contained layout: content never exceeds this width, regardless of monitor size */
  --container:1280px;
  --gutter:64px;
}

/* Full-bleed backgrounds, contained content */
.contained{padding-inline:max(var(--gutter), calc((100% - var(--container)) / 2));}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--navy-deep); color:var(--ink);}
img{max-width:100%; display:block;}

.serif{font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;}
.sans{font-family:"Work Sans","Helvetica Neue",Helvetica,sans-serif;}
.tracked{letter-spacing:0.14em; text-transform:uppercase;}

a{color:var(--gold); text-decoration:none;}
a:hover{color:var(--gold-light);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

.page{display:flex; flex-direction:column; min-height:100vh;}

/* NAV */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px max(var(--gutter), calc((100% - var(--container)) / 2)); background:var(--cream); border-bottom:1px solid rgba(172,138,82,0.4);
  position:sticky; top:0; z-index:10; gap:20px;
}
.nav__logo{height:80px; width:auto; max-width: none;}
.nav__links{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px 22px; font-size:10.5px; letter-spacing:0.1em; margin:0; padding:0; list-style:none;}
.nav__links li{margin:0; padding:0; list-style:none;}
.nav__links a{color:var(--navy);}
.nav__links a[aria-current="page"]{color:var(--gold);}
.nav__toggle{display:none; background:none; border:1px solid var(--navy); color:var(--navy); padding:8px 12px; font-size:11px; cursor:pointer;}

/* HERO (home page) */
.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--navy); padding:120px 24px 100px; gap:26px;
}
.hero > *{max-width:var(--container);}
.hero__eyebrow{font-size:12px; color:var(--gold);}
.hero__title{margin:0; max-width:920px; font-weight:500; font-size:clamp(34px,5.6vw,64px); line-height:1.12; color:var(--cream);}
.hero__sub{max-width:620px; margin:0; font-size:19px; line-height:1.6; font-weight:300; color:rgba(233,226,211,0.72);}
.rule{width:56px; height:1px; background:var(--gold); margin:10px 0;}
.btn{border:1px solid var(--gold); color:var(--cream); padding:16px 40px; font-size:11px; display:inline-block; transition:background 0.2s ease, color 0.2s ease; background:transparent; cursor:pointer;}
.btn:hover{background:var(--gold); color:var(--navy);}

/* PAGE HEADER (interior pages) */
.page-header{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--navy); padding:100px 24px 84px; gap:22px;
}
.page-header__eyebrow{font-size:12px; color:var(--gold);}
.page-header__title{margin:0; max-width:820px; font-weight:500; font-size:clamp(32px,5vw,52px); line-height:1.15; color:var(--cream);}
.page-header__sub{max-width:600px; margin:0; font-size:17px; line-height:1.65; font-weight:300; color:rgba(233,226,211,0.72);}

/* QUOTE */
.quote{
  display:flex; align-items:center; justify-content:center; gap:24px;
  background:var(--cream); padding:56px 24px; text-align:center; flex-wrap:wrap;
}
.quote__rule{width:64px; height:1px; background:var(--gold);}
.quote__text{font-style:italic; font-size:clamp(20px,3.4vw,30px); color:var(--navy); max-width:640px;}

/* STATS */
.stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); background:var(--navy-deep); padding:64px max(var(--gutter), calc((100% - var(--container)) / 2));}
/* .stat itself still stretches to the row's full height by default (grid's
   normal behavior) — that's what keeps the border-right dividers running
   the complete height of the row, all the same, whether or not the column
   next to them wrapped to two lines. justify-content:center is what
   vertically centers each .stat's own num+label block *within* that
   stretched height, so every column reads as centered in the row rather
   than pinned to its top or bottom. */
.stat{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:0 16px; text-align:center; border-right:1px solid rgba(172,138,82,0.25);}
.stat:last-child{border-right:none;}
/* All three the same 48px — no more shrinking the longer ones (e.g. "The
   Wall Street Journal") down to fit; that one still wraps to more than one
   line at this size in a narrow column, which is expected. */
.stat__num{font-size:48px; line-height:1.15; color:var(--gold);}
.stat__label{font-size:11px; color:rgba(233,226,211,0.6);}

/* PRACTICE AREAS */
.practices{display:flex; flex-direction:column; align-items:center; background:var(--cream); padding:80px 24px; gap:56px;}
.practices__eyebrow{font-size:12px; color:var(--gold);}
.practices__grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:56px; max-width:1180px; width:100%;}
.practice{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:0 20px;}
.practice--divided{border-left:1px solid rgba(172,138,82,0.3); border-right:1px solid rgba(172,138,82,0.3);}
.practice__title{font-size:24px; color:var(--navy);}
.practice__desc{font-size:15px; line-height:1.6; font-weight:300; color:var(--ink-soft);}

/* PHILOSOPHY */
.philosophy{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; background:var(--navy); padding:96px max(var(--gutter), calc((100% - var(--container)) / 2)); align-items:center;}
.philosophy__title{font-size:clamp(30px,4vw,40px); font-weight:500; color:var(--cream); line-height:1.15;}
.philosophy__rule{width:48px; height:1px; background:var(--gold); margin-top:24px;}
.philosophy__text{margin:0; font-size:17px; line-height:1.8; font-weight:300; color:rgba(233,226,211,0.75); max-width:560px;}

/* PAGE HEADER ICON (practice area pages) */
.page-header__icon{margin-bottom:2px;}

/* WHO WE SERVE */
.serve-section{display:flex; flex-direction:column; align-items:center; background:var(--cream); padding:80px 24px; gap:48px;}
.serve-eyebrow{font-size:12px; color:var(--gold);}
.serve-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; max-width:920px; width:100%;}
.serve-card{display:flex; flex-direction:column; gap:10px; padding:28px; border:1px solid rgba(172,138,82,0.25); background:#fff;}
.serve-card__title{font-size:19px; color:var(--navy);}
.serve-card__desc{font-size:13.5px; line-height:1.6; font-weight:300; color:var(--ink-soft);}

/* ROLES WE PLACE */
.roles-section{display:flex; flex-direction:column; align-items:center; background:var(--navy); padding:80px 24px; gap:36px;}
.roles-eyebrow{font-size:12px; color:var(--gold);}
.roles-list{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:900px;}
.role-tag{border:1px solid rgba(172,138,82,0.4); color:var(--cream); padding:12px 22px; font-size:13px; letter-spacing:0.03em;}

/* TEAM */
.team-section{display:flex; flex-direction:column; align-items:center; background:var(--cream); padding:80px 24px; gap:48px;}
.team-eyebrow{font-size:12px; color:var(--gold);}
.people{display:flex; flex-wrap:wrap; justify-content:center; gap:28px; max-width:1180px; width:100%;}
.person{flex:0 1 341px; display:flex; flex-direction:column; background:#fff; border:1px solid rgba(172,138,82,0.25);}
.person__photo{aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; object-position:50% 12%; background:var(--cream);}
/* flex:1 so .person__body fills whatever height .person stretched to next
   to a taller neighbor in the same row (.people is flex-wrap, which
   stretches items within a row to the tallest by default) — otherwise the
   extra space would sit below .person__body, unclaimed, instead of being
   available for .person__actions's margin-top:auto below to push into. */
.person__body{display:flex; flex-direction:column; flex:1 1 auto; gap:10px; padding:26px 26px 24px;}
.person__name{font-size:22px; color:var(--navy); margin:0;}
.person__role{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);}
.person__summary{font-size:13.5px; line-height:1.65; font-weight:300; color:var(--ink-soft); margin:0;}
.person__bio{font-size:13.5px; line-height:1.7; font-weight:300; color:var(--ink-soft); margin:0; padding-top:14px; border-top:1px solid rgba(172,138,82,0.25);}
.person__bio[hidden]{display:none;}
/* Pinned to the bottom of .person__body (and so of the whole card, since
   .person__body now fills it) — lines up the LinkedIn/email/"Read full
   bio" row across a row of team members even when summaries run different
   lengths. */
.person__actions{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px; flex-wrap:wrap;}
.person__more{flex:1 1 auto; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; border:1px solid var(--gold); color:var(--navy); font-family:inherit; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; padding:0 18px; cursor:pointer; transition:background 0.2s ease, color 0.2s ease;}
.person__more:hover{background:var(--gold); color:#fff;}
.person__more .chev{transition:transform 0.2s ease;}
.person__more[aria-expanded="true"] .chev{transform:rotate(180deg);}
.person__icon{flex:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(172,138,82,0.45); transition:background 0.2s ease;}
.person__icon:hover{background:rgba(172,138,82,0.12);}

/* CONTACT */
.contact-section{display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; background:var(--cream); padding:96px max(var(--gutter), calc((100% - var(--container)) / 2));}
.contact-info{display:flex; flex-direction:column; gap:28px;}
.contact-info__label{font-size:10px; color:var(--gold); margin-bottom:8px; letter-spacing:0.14em; text-transform:uppercase;}
.contact-info__value{font-size:15px; color:var(--ink); line-height:1.6;}
.contact-form{display:flex; flex-direction:column; gap:20px; background:#fff; border:1px solid rgba(172,138,82,0.25); padding:40px;}
.contact-form__row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.contact-form__field{display:flex; flex-direction:column; gap:8px;}
.contact-form__field label{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#8a8370;}
.contact-form__field input, .contact-form__field textarea{
  border:none; border-bottom:1px solid rgba(28,35,51,0.25); background:transparent; font-family:inherit; font-size:14px; color:var(--ink); padding:4px 2px 8px; resize:none; width:100%;
}
.contact-form__field textarea{height:70px;}
.contact-form__field input:focus, .contact-form__field textarea:focus{outline:none; border-bottom-color:var(--gold);}
.btn--filled{background:var(--navy); color:var(--cream); border:none; padding:16px 40px; font-size:11px; align-self:flex-start; cursor:pointer; transition:background 0.2s ease;}
.btn--filled:hover{background:#1c2d4d;}
.form-status{font-size:13px; color:var(--navy); display:none;}
.form-status.is-visible{display:block;}

/* GRAVITY FORMS — the real Contact form (template-contact.php) and the
   "Submit Resume" form on single-job.php both render through
   gravity_form(), which ships its own default look (boxed, bordered
   inputs; a plain gray Submit button) rather than this site's own thin
   underline-input / tracked-caps-label / filled-navy-button language used
   above for .contact-form__field and .btn--filled. This reskins whatever
   fields Gravity Forms renders — however many there are, and however
   they're arranged into rows — to match that language, without touching
   GF's own field layout/width/grouping (that stays exactly as configured
   in the form editor; only color, border, type and spacing change).
   Scoped to .contact-form and .prose-body so it only touches the two
   forms this theme embeds, not any other Gravity Forms instance a plugin
   might add elsewhere on the site. */
.contact-form .gform_wrapper,
.prose-body .gform_wrapper{
  max-width:none; font-family:inherit;
}
/* .contact-form already IS the white bordered card (see .contact-form
   above) — this gives .prose-body's embedded form (single-job.php's
   "Submit Resume") that same card treatment, since .prose-body itself
   isn't one. Scoped to .prose-body rather than a specific form id
   (#gform_wrapper_2) so it keeps working if `joeamara_job_form_id` is
   ever filtered to a different form. */
.prose-body .gform_wrapper{
  background:#fff; border:1px solid rgba(172,138,82,0.25); padding:40px;
}
.contact-form .gform_wrapper form,
.prose-body .gform_wrapper form{
  display:flex; flex-direction:column; gap:20px;
}
.contact-form .gform_wrapper .gform_fields,
.prose-body .gform_wrapper .gform_fields{
  row-gap:20px; column-gap:20px;
}
.contact-form .gform_wrapper .gfield,
.prose-body .gform_wrapper .gfield{
  margin-top:0 !important; margin-bottom:0 !important;
}
.contact-form .gform_wrapper .gfield_label,
.contact-form .gform_wrapper legend.gfield_label,
.contact-form .gform_wrapper .gform-field-label,
.prose-body .gform_wrapper .gfield_label,
.prose-body .gform_wrapper legend.gfield_label,
.prose-body .gform_wrapper .gform-field-label{
  font-family:inherit; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:#8a8370; font-weight:400; margin:0 0 8px;
}
.contact-form .gform_wrapper .gfield_required,
.prose-body .gform_wrapper .gfield_required{color:var(--gold);}
.contact-form .gform_wrapper .gfield_description,
.contact-form .gform_wrapper .instruction,
.prose-body .gform_wrapper .gfield_description,
.prose-body .gform_wrapper .instruction{
  font-size:11px; color:#8a8370; margin-top:4px;
}
.contact-form .gform_wrapper input[type=text],
.contact-form .gform_wrapper input[type=email],
.contact-form .gform_wrapper input[type=tel],
.contact-form .gform_wrapper input[type=number],
.contact-form .gform_wrapper input[type=url],
.contact-form .gform_wrapper select,
.contact-form .gform_wrapper textarea,
.prose-body .gform_wrapper input[type=text],
.prose-body .gform_wrapper input[type=email],
.prose-body .gform_wrapper input[type=tel],
.prose-body .gform_wrapper input[type=number],
.prose-body .gform_wrapper input[type=url],
.prose-body .gform_wrapper select,
.prose-body .gform_wrapper textarea{
  border:none !important; border-bottom:1px solid rgba(28,35,51,0.25) !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; font-family:inherit; font-size:14px;
  color:var(--ink); padding:4px 2px 8px; width:100%; max-width:none; resize:none;
}
/* Textareas get a full box (not just the underline the single-line inputs
   above get) — easier to see how much room there is to write in, and
   distinguishes the one multi-line field from the rest at a glance. */
.contact-form .gform_wrapper textarea,
.prose-body .gform_wrapper textarea{
  border:1px solid rgba(28,35,51,0.25) !important; height:70px;
}
.contact-form .gform_wrapper input:focus,
.contact-form .gform_wrapper select:focus,
.contact-form .gform_wrapper textarea:focus,
.prose-body .gform_wrapper input:focus,
.prose-body .gform_wrapper select:focus,
.prose-body .gform_wrapper textarea:focus{
  outline:none !important; box-shadow:none !important; border-bottom-color:var(--gold) !important;
}
.contact-form .gform_wrapper .gchoice,
.prose-body .gform_wrapper .gchoice{display:flex; align-items:center; gap:8px;}
.contact-form .gform_wrapper .gchoice label,
.prose-body .gform_wrapper .gchoice label{
  font-family:inherit; font-size:13.5px; font-weight:300; color:var(--ink-soft); text-transform:none; letter-spacing:normal;
}
.contact-form .gform_wrapper input[type=checkbox],
.contact-form .gform_wrapper input[type=radio],
.prose-body .gform_wrapper input[type=checkbox],
.prose-body .gform_wrapper input[type=radio]{accent-color:var(--gold);}
.contact-form .gform_wrapper .gform_footer,
.prose-body .gform_wrapper .gform_footer{margin:0; padding:0;}
.contact-form .gform_wrapper .gform_button,
.prose-body .gform_wrapper .gform_button{
  background:var(--navy) !important; color:var(--cream) !important; border:none !important; border-radius:0 !important;
  padding:16px 40px; font-family:inherit; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  box-shadow:none !important; cursor:pointer; transition:background 0.2s ease;
}
.contact-form .gform_wrapper .gform_button:hover,
.prose-body .gform_wrapper .gform_button:hover{background:#1c2d4d !important;}
.contact-form .gform_wrapper .validation_message,
.prose-body .gform_wrapper .validation_message{font-size:12px; color:#b3261e;}
.contact-form .gform_wrapper .gform_validation_container,
.prose-body .gform_wrapper .gform_validation_container{display:none !important;}
.contact-form .gform_wrapper .gform_confirmation_message,
.prose-body .gform_wrapper .gform_confirmation_message{
  font-family:inherit; font-size:15px; color:var(--navy);
}

/* CARD GRID (News / Opportunities listings) */
.card-section{display:flex; flex-direction:column; align-items:center; background:var(--cream); padding:80px 24px; gap:48px;}
.card-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; max-width:1180px; width:100%;}
.card{display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid rgba(172,138,82,0.25); padding:32px; text-align:left;}
/* Reserves a consistent 2-line height regardless of whether a card's
   practice-area list actually wraps to 1 line or 2 — a Job or News card
   with a longer combination of practice areas (e.g. "Digital
   Infrastructure, Power Generation · Confidential Search") wraps where a
   shorter one doesn't, and without this every card's title, meta line and
   "Learn More / Apply"/"Read the press release" link end up at a slightly
   different height across the row. */
.card__eyebrow{font-size:10px; color:var(--gold); line-height:1.5; min-height:3em;}
.card__title{font-size:21px; color:var(--navy); line-height:1.3;}
.card__title--tight{font-size:22px;}
.card__desc{font-size:13.5px; line-height:1.6; font-weight:300; color:var(--ink-soft);}
/* The always-last element in a Job card (Opportunities) — pinned to the
   card's bottom edge the same way News's .card__actions is below, so
   "Learn More / Apply" lines up across a row regardless of how long the
   description or the meta line (location / Job #) above it runs. */
.card__link{font-size:12.5px; font-weight:500; margin-top:auto; padding-top:6px;}

/* TAXONOMY FILTERS */
.filters{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.filter{min-height:44px; display:inline-flex; align-items:center; padding:0 22px; background:#fff; border:1px solid rgba(172,138,82,0.4); color:var(--navy); font-family:inherit; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.filter:hover{border-color:var(--gold);}
.filter[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--cream);}
.filter-empty{font-size:15px; font-weight:300; color:var(--ink-soft); grid-column:1 / -1; text-align:center; padding:24px 0;}
.filter-empty[hidden]{display:none;}
.filter-count{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8a8370;}
.card[hidden], .card-compact[hidden]{display:none;}

/* MEDIUM CARD GRID + LOAD MORE (archives) */
.card-grid--medium{gap:24px;}
.card-grid--medium .card{padding:26px;}
.card-grid--medium .card__title{font-size:18px;}
.card-grid--medium .card__desc{font-size:13px;}
.load-more{min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 40px; background:transparent; border:1px solid var(--gold); color:var(--navy); font-family:inherit; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; transition:background 0.2s ease, color 0.2s ease;}
.load-more:hover{background:var(--gold); color:#fff;}
/* News card's "Read the press release" link, pinned to the bottom of the
   card rather than sitting right under the description — .card-grid's grid
   items already stretch to the row's tallest card, so this lines up across
   a row of cards with differing description lengths. */
.card__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:8px;}
.btn--small{min-height:40px; display:inline-flex; align-items:center; padding:0 20px; border:1px solid rgba(172,138,82,0.5); color:var(--navy); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; transition:background 0.2s ease, color 0.2s ease;}
.btn--small:hover{background:var(--gold); color:#fff;}
.btn--small--quiet{border-color:rgba(28,35,51,0.18); color:var(--ink-soft);}

/* ABOUT PAGE */
.prose-section{display:grid; grid-template-columns:0.75fr 1.25fr; gap:56px; background:var(--cream); padding:88px max(var(--gutter), calc((100% - var(--container)) / 2)); align-items:start;}
.prose-section--navy{background:var(--navy);}
.prose-heading{font-size:clamp(28px,3.6vw,38px); font-weight:500; color:var(--navy); line-height:1.15; margin:0;}
.prose-section--navy .prose-heading{color:var(--cream);}
.prose-rule{width:48px; height:1px; background:var(--gold); margin-top:22px;}
.prose-body{display:flex; flex-direction:column; gap:20px; max-width:660px;}
.prose-body p{margin:0; font-size:16.5px; line-height:1.8; font-weight:300; color:var(--ink-soft);}
.prose-section--navy .prose-body p{color:rgba(233,226,211,0.78);}
.prose-body strong{font-weight:500; color:var(--navy);}
.prose-section--navy .prose-body strong{color:var(--cream);}
/* Bullet/numbered lists (single-job.php's Requirements field, mainly) read
   as plain body copy, same weight as a paragraph — not bold. .prose-body
   strong above is for the occasional emphasized word/phrase inside a
   paragraph elsewhere on the site (e.g. About); list items reset it back
   to normal so a WYSIWYG list doesn't come out looking bold end-to-end. */
.prose-body ul, .prose-body ol{margin:0; padding-left:22px; font-size:16.5px; line-height:1.8; font-weight:300; color:var(--ink-soft);}
.prose-section--navy .prose-body ul, .prose-section--navy .prose-body ol{color:rgba(233,226,211,0.78);}
.prose-body li{margin:0 0 6px;}
.prose-body li:last-child{margin-bottom:0;}
.prose-body li strong, .prose-body li b{font-weight:inherit; color:inherit;}

/* CTA BANNER */
.cta-banner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; background:var(--navy); padding:80px 24px;}
.cta-banner__text{font-size:clamp(24px,3.6vw,32px); color:var(--cream); max-width:600px;}

/* FOOTER */
.footer{flex:1 0 auto; display:flex; flex-direction:column; background:var(--navy-deep); padding:64px max(var(--gutter), calc((100% - var(--container)) / 2)) 40px; border-top:1px solid rgba(172,138,82,0.3);}
.footer__grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; padding-bottom:48px;}
.footer__logo{height:80px; width:auto; max-width: none;}
.footer__tag{font-size:13px; color:rgba(233,226,211,0.55); margin-top:18px; max-width:260px; line-height:1.6; font-weight:300;}
.footer__col{display:flex; flex-direction:column; gap:12px; font-size:13px; color:rgba(233,226,211,0.7); font-weight:300;}
.footer__heading{font-size:10px; color:var(--gold); margin-bottom:6px;}
.footer__col a{color:rgba(233,226,211,0.7);}
.footer__social{display:flex; gap:14px; margin-top:6px;}
.footer__bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:28px; border-top:1px solid rgba(172,138,82,0.2); font-size:12px; color:rgba(233,226,211,0.4);}

/* RESPONSIVE */
@media (max-width: 1100px){
  :root{--gutter:24px;}
}

@media (max-width: 900px){
  .nav{padding:14px 24px;}
  .nav__logo{height:80px;}
  .nav__links{display:none;}
  .nav__toggle{display:inline-block;}
  .stats{grid-template-columns:1fr; gap:32px; padding:48px 24px;}
  .stat{border-right:none; border-bottom:1px solid rgba(172,138,82,0.25); padding-bottom:32px;}
  .stat:last-child{border-bottom:none; padding-bottom:0;}
  .practices__grid{grid-template-columns:1fr; gap:40px;}
  .practice--divided{border-left:none; border-right:none; border-top:1px solid rgba(172,138,82,0.3); border-bottom:1px solid rgba(172,138,82,0.3); padding:32px 20px;}
  .philosophy{grid-template-columns:1fr; padding:72px 24px;}
  .card-grid{grid-template-columns:1fr;}
  .serve-grid{grid-template-columns:1fr;}
  .person{flex:1 1 100%; max-width:420px;}
  .prose-section{grid-template-columns:1fr; gap:28px; padding:64px 24px;}
  .contact-section{grid-template-columns:1fr; padding:64px 24px;}
  .contact-form__row{grid-template-columns:1fr;}
  .footer{padding:56px 24px 32px;}
  .footer__grid{grid-template-columns:1fr; gap:32px;}
}

@media (max-width: 400px){
  .nav__logo{height:70px;}
}

article.card h2 a{
  color: black;
}

article.card h2 a:hover{
  color: #c9a86a;
}