/*
Theme Name: Archie Legal
Theme URI: https://archielegal.com
Author: Archie Legal
Description: A quiet, editorial theme for a legal practice — cream and navy, Playfair Display headings, a practice-areas grid and a fixed-fee consultation block. Built for WordPress 6.0 and up.
Version: 2.6.2
Requires at least: 6.0
Tested up to: 6.5
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: archie-legal
Tags: business, one-column, custom-colors, custom-menu, featured-images, translation-ready
*/

:root{
  --cream:#F7F3EC; --cream-deep:#F1EBE0; --navy:#101E33; --navy-soft:#1B2C46;
  --gold:#C08B3C; --ink:#2A3444; --muted:#5D6878; --line:#E2DACD;
  --radius:4px; --shell:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.shell{width:min(100% - 48px,var(--shell));margin-inline:auto}
@media (max-width:640px){.shell{width:calc(100% - 40px)}}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--navy);margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,3.9rem);line-height:1.05}
h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.15}
h3{font-size:1.16rem;font-weight:500;line-height:1.35}
p{margin:0}
img{max-width:100%;height:auto}

.eyebrow{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 20px}
.eyebrow--light{color:rgba(247,243,236,.5)}

.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .25s ease,color .25s ease,transform .25s ease}
.btn--solid{background:var(--navy);color:#F7F3EC}
.btn--solid:hover{background:var(--navy-soft);color:#F7F3EC;transform:translateY(-1px)}
.btn--cream{background:var(--cream);color:var(--navy)}
.btn--cream:hover{background:#fff;transform:translateY(-1px)}
.btn--quiet{color:var(--navy);padding-inline:4px;border-bottom:1px solid transparent;border-radius:0;background:none}
.btn--quiet:hover{border-bottom-color:var(--gold)}
.btn--sm{}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.masthead{position:sticky;top:0;z-index:40;background:rgba(247,243,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none}
.wordmark svg{width:22px;height:22px;color:var(--gold);flex:none}
.wordmark span{font-family:'Playfair Display',serif;font-size:1.28rem;font-weight:500;color:var(--navy)}
.wordmark img{max-height:38px;width:auto}

.hero{padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,80px)}
.hero__lede{max-width:38ch;color:var(--muted);margin:26px 0 38px;font-size:1.06rem}
.hero__actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.figure{margin:clamp(44px,7vw,72px) 0 0;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:linear-gradient(150deg,#1A2942,#0B1524 65%);position:relative}
.figure img{width:100%;height:100%;object-fit:cover;display:block}

.band{padding:clamp(64px,9vw,110px) 0;border-top:1px solid var(--line)}
.band--tint{background:var(--cream-deep)}
.band__lede{max-width:52ch;color:var(--muted);margin-top:20px}

.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(38px,5vw,56px);border-radius:var(--radius);overflow:hidden}
@media (max-width:900px){.areas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.areas{grid-template-columns:1fr}}
.area{background:var(--cream);padding:32px 28px 28px;display:flex;flex-direction:column;gap:14px;min-height:238px;transition:background-color .3s ease}
.area:hover{background:#FCFAF6}
.area p{color:var(--muted);font-size:.96rem}
.area h3 a{color:inherit;text-decoration:none}
.area h3 a:hover{color:var(--gold)}
.area__fee{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.statement{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,88px);align-items:start}
@media (max-width:820px){.statement{grid-template-columns:1fr;gap:44px}}
.statement p{color:var(--muted);margin-top:24px;max-width:46ch}
.stats{display:grid;gap:26px;margin:0}
.stat{border-left:2px solid var(--gold);padding-left:20px}
.stat dt{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.stat dd{margin:6px 0 0;font-family:'Playfair Display',serif;font-size:2.1rem;color:var(--navy);line-height:1}

.consult{background:var(--navy);color:rgba(247,243,236,.72);padding:clamp(60px,8vw,96px) 0}
.consult h2{color:#F7F3EC}
.consult p{max-width:44ch;margin:24px 0 36px}
.contact{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:16px}
.contact li{display:flex;align-items:center;gap:14px;font-size:.97rem}
.contact svg{width:17px;height:17px;color:var(--gold);flex:none}
.contact a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.contact a:hover{border-bottom-color:var(--gold)}

.colophon{padding:26px 0 34px}
.colophon__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-size:.87rem;color:var(--muted)}
.colophon nav ul{display:flex;gap:26px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.colophon a{color:var(--muted);text-decoration:none}
.colophon a:hover{color:var(--navy)}

/* interior pages */
.page-head{padding:clamp(52px,8vw,90px) 0 0}
.entry{padding:clamp(30px,5vw,48px) 0 clamp(60px,9vw,100px);max-width:68ch}
.entry p{margin-bottom:1.3em;color:var(--muted)}
.entry h2,.entry h3{margin:1.8em 0 .6em}
.entry a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.entry ul,.entry ol{color:var(--muted);padding-left:1.2em}
.entry li{margin-bottom:.5em}
.entry blockquote{margin:1.6em 0;padding-left:22px;border-left:2px solid var(--gold);font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--navy)}
.entry img{border-radius:var(--radius)}
.postmeta{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:14px}

/* WordPress core classes */
.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;width:1px;word-wrap:normal}
.screen-reader-text:focus{background:var(--cream);clip:auto;clip-path:none;color:var(--navy);display:block;font-size:.9rem;height:auto;left:12px;line-height:normal;padding:14px 22px;text-decoration:none;top:12px;width:auto;z-index:100000}
.alignleft{float:left;margin:.4em 1.6em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.6em}
.aligncenter{display:block;margin-inline:auto}
.alignwide,.alignfull{margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:8px}
.sticky,.bypostauthor{display:block}

.reveal{opacity:1;transform:none}
.archie-js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.archie-js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- header navigation ---------- */
.masthead__right{display:flex;align-items:center;gap:28px}
.wordmark__text{display:flex;flex-direction:column;line-height:1.15}
.wordmark__name{font-family:'Playfair Display',serif;color:var(--navy)}
.wordmark__tagline{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav ul{list-style:none;display:flex;align-items:center;gap:26px;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--navy);border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover{border-bottom-color:var(--gold)}
.nav .current-menu-item > a{border-bottom-color:var(--gold)}
.nav .sub-menu{display:none;position:absolute;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:10px 0;flex-direction:column;gap:0;min-width:200px;box-shadow:0 12px 30px rgba(16,30,51,.08)}
.nav li{position:relative}
.nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{display:flex}
.nav .sub-menu a{display:block;padding:8px 18px;border:0}
.nav .sub-menu a:hover{background:var(--cream-deep)}
.nav-toggle{display:none;background:none;border:0;color:var(--navy);cursor:pointer;padding:6px}
.nav-toggle svg{width:26px;height:26px}

@media (max-width:860px){
  .nav-toggle{display:block;order:2}
  .masthead__right{gap:14px}
  #primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line);padding:14px 24px 22px}
  #primary-nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:flex-start;gap:2px}
  .nav a{display:block;padding:11px 0;width:100%}
  .nav .sub-menu{display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 16px;background:none}
  .masthead{position:relative}
}
@media (max-width:520px){
  .masthead__cta{display:none}
  .wordmark__tagline{display:none}
}

/* ---------- sidebar ---------- */
.layout--sidebar{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:860px){.layout--sidebar{grid-template-columns:1fr}}
.sidebar{padding:clamp(30px,5vw,48px) 0 clamp(60px,9vw,100px)}
.widget{margin-bottom:34px}
.widget__title{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:400;color:var(--muted);margin-bottom:14px}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.widget li a{color:var(--navy);text-decoration:none;font-size:.94rem;border-bottom:1px solid transparent}
.widget li a:hover{border-bottom-color:var(--gold)}
.widget .sub-menu,.widget .children{padding-left:14px;margin-top:9px}

/* ---------- services page ---------- */
.areas__more{margin-top:34px}
.service{padding:34px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,5vw,64px);align-items:start}
.service:first-child{border-top:0;padding-top:0}
@media (max-width:760px){.service{grid-template-columns:1fr;gap:16px}}
.service__head h2{font-size:clamp(1.5rem,2.6vw,1.95rem)}
.service__fee{margin-top:14px;display:grid;gap:2px}
.service__fee span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.service__fee strong{font-weight:400;color:var(--gold);font-size:1rem;letter-spacing:.06em}
.service__lede{color:var(--muted);margin-bottom:14px}

/* =========================================================
   Layout revision 1.4 — split hero, stat badge, wide bands
   ========================================================= */

/* ---------- hero ---------- */
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero__text{min-width:0}
.hero__media{position:relative;min-width:0}
.figure--hero{margin:0;aspect-ratio:4/3}
.badge{position:absolute;left:-44px;bottom:-44px;padding:24px 34px 26px;min-width:210px;border-radius:2px}
.badge__value{display:block;font-family:'Playfair Display',Georgia,serif;font-size:2.1rem;font-weight:500;line-height:1}
.badge__label{display:block;margin-top:9px;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .figure--hero{aspect-ratio:16/10}
  .badge{left:0;bottom:-26px;padding:18px 26px 20px;min-width:0}
  .badge__value{font-size:1.75rem}
  .hero{padding-bottom:clamp(64px,10vw,92px)}
}

/* ---------- band heading beside its intro ---------- */
.band__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.band__head .band__lede{margin-top:0;max-width:44ch}
@media (max-width:820px){
  .band__head{grid-template-columns:1fr;gap:18px}
}

/* ---------- about ---------- */
.statement{grid-template-columns:1fr 1fr}
.statement__head,.statement__body{min-width:0}
.statement__lede{color:var(--muted);margin:0;max-width:52ch;font-size:1.03rem}
.statement .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,46px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.statement .stat{border-left:0;padding-left:0}
.statement .stat dd{font-size:clamp(1.55rem,3.4vw,2.05rem)}
@media (max-width:820px){
  .statement{grid-template-columns:1fr;gap:36px}
  .statement .stats{gap:16px}
}
@media (max-width:420px){
  .statement .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .statement .stat dt{font-size:.62rem;letter-spacing:.14em}
}

/* ---------- consultation ---------- */
.consult__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.consult__text{min-width:0}
.consult .contact{margin-top:6px}
@media (max-width:820px){
  .consult__grid{grid-template-columns:1fr;gap:40px}
  .consult .contact{margin-top:0}
}

/* ---------- mobile polish ---------- */
html,body{max-width:100%;overflow-x:hidden}
@media (max-width:640px){
  body{font-size:16px}
  .btn{padding:14px 22px}
  .hero__actions{gap:18px}
  .hero__actions .btn--solid{width:100%}
  .hero__actions .btn--quiet{padding:6px 0}
  .area{min-height:0;padding:26px 22px 24px}
  .contact li{align-items:flex-start;font-size:.95rem}
  .contact svg{margin-top:4px}
  .colophon__inner{flex-direction:column;align-items:flex-start;gap:14px}
  .colophon nav ul{gap:16px}
  .service__fee{margin-top:8px}
}
@media (max-width:400px){
  .badge{padding:16px 20px 18px}
  .badge__label{letter-spacing:.16em}
}

/* =========================================================
   1.4.1 — tighter vertical rhythm
   Every gap below is driven by these four values. Raise them
   to open the layout back up; lower them to compress further.
   ========================================================= */
:root{
  --space-band:clamp(44px,5.5vw,74px);   /* top and bottom of each section */
  --space-hero:clamp(32px,4vw,56px);     /* above the headline */
  --space-gutter:clamp(28px,3.6vw,52px); /* between the two columns */
  --shell:1180px;
}

.hero{padding:var(--space-hero) 0 calc(var(--space-band) + 10px)}
.band{padding:var(--space-band) 0}
.consult{padding:var(--space-band) 0}

/* hero: closer columns, copy that fills its half */
.hero__grid{gap:var(--space-gutter);align-items:center}
.hero__lede{max-width:44ch;margin:20px 0 30px}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
.hero__actions{gap:20px}
.figure--hero{aspect-ratio:5/4}
.badge{left:-34px;bottom:-30px;padding:20px 28px 22px;min-width:180px}

/* practice areas: cards sized by their content, not a fixed floor */
.band__head{gap:var(--space-gutter)}
.areas{margin-top:clamp(26px,3.4vw,40px)}
.area{min-height:0;padding:26px 24px 24px;gap:11px}
.area__fee{padding-top:16px}
.areas__more{margin-top:24px}

/* about */
.statement{gap:var(--space-gutter)}
.statement p{margin-top:18px}
.statement .stats{margin-top:clamp(24px,3vw,34px);padding-top:clamp(20px,2.4vw,26px)}

/* consultation */
.consult__grid{gap:var(--space-gutter)}
.consult p{margin:18px 0 28px;max-width:48ch}
.contact{margin-top:0;gap:14px}

/* interior pages */
.page-head{padding:var(--space-hero) 0 0}
.entry{padding:clamp(22px,3vw,34px) 0 var(--space-band)}
.sidebar{padding:clamp(22px,3vw,34px) 0 var(--space-band)}
.service{padding:26px 0}
.colophon{padding:20px 0 26px}

@media (max-width:900px){
  .hero__grid{gap:32px}
  .figure--hero{aspect-ratio:16/10}
  .badge{left:0;bottom:-22px;padding:16px 22px 18px;min-width:0}
  .hero{padding-bottom:calc(var(--space-band) + 22px)}
}
@media (max-width:640px){
  :root{--space-band:38px;--space-hero:26px}
  .hero h1{font-size:clamp(2.05rem,8vw,2.6rem)}
  .hero__lede{margin:16px 0 26px}
}

/* =========================================================
   1.5.0 — top bar and sidebar menu
   ========================================================= */
.topbar{font-size:.82rem}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 0;flex-wrap:wrap}
.topbar__menu{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap}
.topbar a{text-decoration:none;letter-spacing:.04em}
.topbar__phone{letter-spacing:.06em}
@media (max-width:560px){
  .topbar__inner{justify-content:center;gap:14px;padding:8px 0}
  .topbar__menu{gap:16px;justify-content:center}
}

.widget--menu{margin-bottom:30px}
.sidebar__menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sidebar__menu li a{display:block;padding:9px 0 9px 14px;border-left:2px solid var(--line);text-decoration:none;font-size:.94rem}
.sidebar__menu li a:hover{border-left-color:var(--gold)}
.sidebar__menu .current-menu-item > a{border-left-color:var(--gold)}
.sidebar__menu .sub-menu{padding-left:14px;margin-top:2px}
.sidebar__menu .sub-menu a{font-size:.88rem;padding-block:7px}

/* =========================================================
   1.5.1 — cards without a fee line
   ========================================================= */
.area:not(:has(.area__fee)) p:last-of-type{margin-bottom:0}
.area:not(:has(.area__fee)){justify-content:flex-start}
.service:not(:has(.service__fee)) .service__head h2{margin-bottom:0}

/* =========================================================
   1.7.1 — header menu must run horizontally
   Covers both markup shapes: <nav class="nav"><ul> and <ul class="nav">
   ========================================================= */
#primary-nav ul,
.nav > ul,
ul.nav{
  list-style:none;
  display:flex;
  align-items:center;
  gap:26px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
#primary-nav .sub-menu,
.nav .sub-menu{
  display:none;
  position:absolute;
  flex-direction:column;
  gap:0;
  min-width:200px;
  padding:10px 0;
  flex-wrap:nowrap;
}
#primary-nav li:hover > .sub-menu,
#primary-nav li:focus-within > .sub-menu{display:flex}

@media (max-width:860px){
  #primary-nav ul,
  .nav > ul,
  ul.nav{flex-direction:column;align-items:flex-start;gap:2px;flex-wrap:nowrap}
  #primary-nav .sub-menu,
  .nav .sub-menu{display:flex;position:static;padding:0 0 0 16px;border:0;box-shadow:none;background:none}
}

.sidebar__menu ul,
ul.sidebar__menu{list-style:none;margin:0;padding:0;display:grid;gap:2px}

/* =========================================================
   1.8.0 — why choose us
   ========================================================= */
.why__points{display:grid;gap:22px}
.why__point h3{font-size:1.06rem;margin:0 0 7px}
.why__point p{font-size:.95rem;color:var(--muted);margin:0}
.why__num{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;line-height:1;color:var(--gold);margin-bottom:12px}
.why__icon{display:block;width:26px;height:26px;color:var(--gold);margin-bottom:14px}

/* layout: numbered row */
.why--row .why__head{margin-bottom:clamp(28px,3.6vw,44px)}
.why--row .why__lede{max-width:52ch;color:var(--muted);margin-top:16px}
.why--row .why__points{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(20px,2.6vw,34px)}
.why--row .why__point{border-top:2px solid var(--gold);padding-top:18px}

/* layout: cards */
.why__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-gutter);align-items:start}
.why--cards .why__lede{max-width:34ch;color:var(--muted);margin-top:16px}
.why--cards .why__points{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.why--cards .why__point{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 24px}

@media (max-width:820px){
  .why__grid{grid-template-columns:1fr;gap:30px}
  .why--cards .why__lede{max-width:52ch}
}
@media (max-width:520px){
  .why--row .why__points,.why--cards .why__points{grid-template-columns:1fr;gap:18px}
  .why--row .why__point{padding-top:14px}
  .why--cards .why__point{padding:18px 18px 20px}
}

/* =========================================================
   1.8.0 — mobile hardening, applied site-wide
   ========================================================= */

/* Stop iOS inflating type in landscape */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Long words, URLs and emails must never push the page sideways */
h1,h2,h3,h4,p,li,dd,dt,a{overflow-wrap:break-word;word-break:normal}
.contact a{overflow-wrap:anywhere}

/* Anything embedded stays inside its column */
.entry img,.entry iframe,.entry video,.entry embed,.figure img{max-width:100%;height:auto}
.entry iframe,.entry video{aspect-ratio:16/9;width:100%}
.entry pre{overflow-x:auto;padding:14px;font-size:.88rem}
.entry table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92rem}
.entry td,.entry th{padding:8px 12px;border:1px solid var(--line);white-space:nowrap}

/* A long menu must scroll rather than run off the screen */
@media (max-width:860px){
  #primary-nav{max-height:calc(100vh - 84px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* Touch targets: 44px is the accessible minimum */
@media (hover:none){
  .nav a,.colophon a,.topbar a,.sidebar__menu a{min-height:44px;display:flex;align-items:center}
  .contact a{padding-block:3px}
  .nav-toggle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
}

@media (max-width:640px){
  /* Headline sizes that fit a 360px screen without hyphen soup */
  h1{font-size:clamp(1.95rem,7.6vw,2.5rem)}
  h2{font-size:clamp(1.6rem,6.2vw,2rem)}
  .page-head h1{line-height:1.12}

  /* Sections that were two columns need breathing room once stacked */
  .band__head,.statement,.consult__grid,.why__grid{gap:26px}
  .band__lede,.why__lede,.statement__lede,.consult p,.hero__lede{max-width:none}

  /* Stat row stays three across but sheds weight */
  .statement .stat dd{font-size:1.45rem}
  .statement .stat dt{font-size:.6rem;letter-spacing:.12em}

  /* Services page rows */
  .service{padding:22px 0}
  .service__head h2{font-size:1.35rem}

  .figure{border-radius:2px}
}

@media (max-width:380px){
  .shell{width:calc(100% - 32px)}
  .badge{padding:14px 18px 16px}
  .badge__value{font-size:1.5rem}
  .wordmark__name{font-size:1.12rem}
  .statement .stats{gap:10px}
}

/* Landscape phones: the sticky header should not eat the screen */
@media (max-height:480px) and (orientation:landscape){
  .masthead--sticky{position:static}
}

/* Respect reduced motion everywhere, including the reveal */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .btn:hover{transform:none}
}


/* =========================================================
   2.3.0 — the team, in five layouts
   ========================================================= */
.team__head{margin-bottom:clamp(26px,3.4vw,40px)}
.team__lede{max-width:52ch;color:var(--muted);margin-top:16px}
.team__list{list-style:none;margin:0;padding:0}
.team__member{min-width:0}
.team__link{text-decoration:none;color:inherit;display:block}
.team__frame{display:block;position:relative;overflow:hidden;background:linear-gradient(150deg,#1A2942,#0B1524);border-radius:var(--radius)}
.team__photo{display:block;width:100%;height:100%;object-fit:cover}
.team__photo--initials{display:grid;place-items:center;width:100%;height:100%;font-family:'Playfair Display',Georgia,serif;color:var(--gold);letter-spacing:.04em}
.team__text{display:block}
.team__name{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.1rem;color:var(--navy);line-height:1.25}
.team__role{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:6px 0 8px}
.team__bio{display:block;font-size:.94rem;color:var(--muted);line-height:1.55}
.team__link:hover .team__name{color:var(--gold)}

/* 1 — portrait grid */
.team--grid .team__list{display:grid;grid-template-columns:repeat(var(--team-cols,3),minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.team--grid .team__frame{aspect-ratio:4/5;margin-bottom:14px}
.team--grid .team__photo--initials{font-size:2rem}

/* 2 — horizontal scroll */
.team--scroll .team__rail-wrap{position:relative}
.team--scroll .team__list{
  display:flex;gap:20px;overflow-x:auto;padding:2px 2px 18px;
  scroll-snap-type:x mandatory;scroll-padding-left:2px;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--gold) var(--line);
}
.team--scroll .team__member{flex:0 0 240px;scroll-snap-align:start}
.team--scroll .team__frame{aspect-ratio:4/5;margin-bottom:14px}
.team--scroll .team__photo--initials{font-size:2rem}
.team--scroll .team__list::-webkit-scrollbar{height:6px}
.team--scroll .team__list::-webkit-scrollbar-track{background:var(--line);border-radius:3px}
.team--scroll .team__list::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.team--scroll .team__list:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.team__hint{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* 3 — profile rows */
.team--rows .team__list{display:grid;gap:0}
.team--rows .team__member{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line)}
.team--rows .team__member:first-child{border-top:0;padding-top:0}
.team--rows .team__link{display:flex;gap:20px;align-items:flex-start}
.team--rows .team__frame{flex:0 0 88px;width:88px;height:88px;border-radius:50%}
.team--rows .team__photo--initials{font-size:1.5rem}
.team--rows .team__bio{max-width:60ch}

/* 4 — compact circles */
.team--circles .team__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(18px,2.4vw,30px);text-align:center}
.team--circles .team__frame{width:104px;height:104px;border-radius:50%;margin:0 auto 14px}
.team--circles .team__photo--initials{font-size:1.7rem}
.team--circles .team__role{margin-bottom:0}

/* 5 — name over photo */
.team--overlay .team__list{display:grid;grid-template-columns:repeat(var(--team-cols,3),minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
.team--overlay .team__member{position:relative;border-radius:var(--radius);overflow:hidden}
.team--overlay .team__frame{aspect-ratio:3/4;margin:0}
.team--overlay .team__photo--initials{font-size:2.2rem}
.team--overlay .team__text{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 16px;
  background:linear-gradient(to top,rgba(16,30,51,.88),rgba(16,30,51,0))}
.team--overlay .team__name{color:#F7F3EC}
.team--overlay .team__role{margin:5px 0 0}

@media (max-width:900px){
  .team--grid .team__list,.team--overlay .team__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .team--scroll .team__member{flex-basis:200px}
  .team--rows .team__member,.team--rows .team__link{gap:14px}
  .team--rows .team__frame{flex-basis:64px;width:64px;height:64px}
  .team--rows .team__photo--initials{font-size:1.15rem}
  .team--circles .team__frame{width:88px;height:88px}
}
@media (max-width:420px){
  .team--grid .team__list{grid-template-columns:1fr}
  .team--overlay .team__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team--circles .team__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================
   2.4.0 — header
   ========================================================= */
.masthead{position:static}
.masthead--sticky{position:sticky;top:0;z-index:40}
.masthead--noborder{border-bottom:0}
.masthead__inner{display:flex;align-items:center;gap:22px;padding:14px 0}

/* brand */
.wordmark{flex:0 0 auto;gap:12px}
.wordmark .custom-logo-link,.wordmark img,.custom-logo{display:block}
.custom-logo{height:var(--logo-height,44px);width:auto;max-width:min(60vw,340px);object-fit:contain}
.wordmark svg{width:calc(var(--logo-height,44px) * .62);height:calc(var(--logo-height,44px) * .62)}

/* menu position */
.masthead--nav-right #primary-nav{margin-left:auto}
.masthead--nav-right .masthead__actions{margin-left:0}
.masthead--nav-centre #primary-nav{margin:0 auto}
.masthead--nav-centre .masthead__actions{margin-left:0}
.masthead--nav-left #primary-nav{margin-right:auto}
.masthead--nav-left .masthead__actions{margin-left:auto}
.masthead__actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}

/* links */
.nav a{padding-bottom:3px}
.nav .current-menu-item > a{border-bottom-color:var(--gold)}

/* phone, search */
.masthead__phone{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.88rem;color:var(--navy)}
.masthead__phone svg{width:16px;height:16px;color:var(--gold)}
.masthead__phone:hover span{border-bottom:1px solid var(--gold)}
.masthead__icon{background:none;border:0;padding:6px;cursor:pointer;color:var(--navy);display:inline-flex}
.masthead__icon svg{width:20px;height:20px}
.masthead__icon:hover{color:var(--gold)}
.header-search{border-top:1px solid var(--line);padding:16px 0}
.header-search form{display:flex;gap:10px;max-width:520px}
.header-search input[type="search"]{
  flex:1;font-family:inherit;font-size:1rem;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.header-search input[type="search"]:focus{outline:2px solid var(--gold);outline-offset:1px}
.header-search button,.header-search input[type="submit"]{
  font-family:inherit;font-size:.88rem;padding:11px 20px;cursor:pointer;
  border:0;border-radius:var(--radius);background:var(--navy);color:var(--cream);
}

@media (max-width:1000px){
  .masthead__phone span{display:none}
  .masthead__phone{padding:6px}
}
@media (max-width:860px){
  .masthead{position:relative}
  .masthead--sticky{position:sticky;top:0}
  .masthead--nav-centre #primary-nav,.masthead--nav-left #primary-nav{margin:0}
  .masthead__actions{margin-left:auto}
  .masthead__inner{gap:12px;padding:12px 0}
}
@media (max-width:560px){
  .masthead__phone{display:none}
  .masthead__cta{padding:10px 14px;font-size:.8rem}
  .custom-logo{height:min(var(--logo-height,44px),40px)}
}

/* =========================================================
   2.4.1 — closing the dead space
   ========================================================= */

/* About: the left column held only a heading, leaving a hole beneath it */
.statement{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
.statement__head h2{margin-top:2px}
.statement__lede{max-width:none}

/* Section heads: the intro sat in a narrow column with space to its right */
.band__head{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end}
.band__head .band__lede{max-width:52ch;padding-bottom:4px}

/* Consultation: the contact list is short, so let it sit closer */
.consult__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.consult p{max-width:52ch}

/* Why-us numbered row: pull the points up under the heading */
.why--row .why__head{margin-bottom:clamp(22px,2.8vw,34px)}
.why--row .why__lede{max-width:60ch}

/* Grids that would leave a half-empty final row */
.areas{grid-auto-rows:1fr}
.why--row .why__points,.why--cards .why__points{grid-auto-rows:1fr}

/* Hero: image and copy should finish at roughly the same height */
.hero__grid{align-items:center}
.hero__text{padding-block:clamp(0px,1vw,14px)}

/* The last band before the footer had double spacing */
.colophon{padding-top:clamp(18px,2.4vw,26px)}

@media (max-width:820px){
  .statement,.band__head,.consult__grid{grid-template-columns:1fr}
  .band__head{align-items:start}
}

/* =========================================================
   2.5.0 — resources / downloads
   ========================================================= */
.resources{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:clamp(24px,3vw,36px)}
.resource{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 24px;background:#fff;transition:background-color .3s ease}
.resource:hover{background:#FCFAF6}
.resource__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cream-deep);color:var(--gold);flex:none}
.resource__icon svg{width:20px;height:20px}
.resource__text h3{font-size:1.06rem;margin:0 0 4px}
.resource__who{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.resource__body{font-size:.94rem;color:var(--muted);margin:0;max-width:62ch}
.resource__action{text-align:right;flex:none}
.resource__meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:8px 0 0}
.resource__note{font-size:.88rem;color:var(--muted);margin-top:24px;max-width:70ch}

@media (max-width:760px){
  .resource{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:20px}
  .resource__action{grid-column:1 / -1;text-align:left;display:flex;align-items:center;gap:16px}
  .resource__meta{margin:0}
  .resource__icon{width:38px;height:38px}
}
@media (max-width:420px){
  .resource__action .btn{flex:1;justify-content:center}
}

/* =========================================================
   2.5.2 — header, tidied
   ========================================================= */

/* One consistent rhythm across the row */
.masthead__inner{min-height:74px;padding:10px 0;gap:clamp(18px,3vw,40px)}
.masthead--nav-right #primary-nav{margin-left:auto}
.masthead__actions{gap:18px}

/* Brand */
.wordmark{gap:14px}
.wordmark__name{line-height:1}

/* Menu: even spacing, a real active state, room for the underline */
.nav ul,#primary-nav ul,ul.nav{gap:clamp(20px,2.4vw,34px)}
.nav a{position:relative;padding:8px 0;border-bottom:0;line-height:1.2}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover::after,.nav .current-menu-item > a::after{transform:scaleX(1)}

/* Divider, phone, icons */
.masthead__divider{width:1px;height:22px;flex:none;display:block}
.masthead__phone{font-size:.86rem;letter-spacing:.01em;white-space:nowrap;gap:9px}
.masthead__phone span{border-bottom:1px solid transparent;padding-bottom:1px}
.masthead__icon{padding:8px;border-radius:50%}

/* Button: never let it touch the edge, never let it wrap */
.masthead__cta{white-space:nowrap}

/* Dropdowns clear the taller row */
.nav .sub-menu{top:100%;margin-top:6px}

@media (max-width:1100px){
  .masthead__inner{gap:20px}
  .nav ul,#primary-nav ul,ul.nav{gap:20px}
}
@media (max-width:940px){
  .masthead__phone span{display:none}
  .masthead__divider{display:none}
}
@media (max-width:860px){
  .masthead__inner{min-height:64px}
  .nav a::after{display:none}
  .nav a{padding:11px 0}
}

/* =========================================================
   2.6.0 — typography settings own these, not the stylesheet
   ========================================================= */
.btn--quiet{background:none;border:0}
.masthead--caps .nav a{text-transform:inherit;letter-spacing:inherit}
@media (max-width:640px){
  .btn{max-width:100%}
  .hero__actions .btn--solid{width:100%}
}

/* =========================================================
   2.6.1 — content must never be left invisible
   ========================================================= */
.archie-js .entry.reveal,
.archie-js .sidebar.reveal{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .archie-js .reveal{opacity:1!important;transform:none!important}
}

/* =========================================================
   2.6.2 — mobile density
   Stacked columns inherit desktop breathing room they no
   longer need. These close the gaps that opened up.
   ========================================================= */
@media (max-width:640px){
  /* Headings sit closer to what follows them */
  .eyebrow{margin-bottom:12px;font-size:.65rem;letter-spacing:.22em}
  h1{margin-bottom:0}
  .hero__lede{margin:14px 0 22px}
  .band__head{gap:14px}
  .band__lede{margin-top:0}
  .band__head .band__lede{padding-bottom:0}

  /* Hero: a shorter image and a badge that does not need its own row */
  .figure--hero{aspect-ratio:3/2}
  .hero__grid{gap:26px}
  .hero{padding-bottom:calc(var(--space-band) + 18px)}
  .badge{bottom:-18px;padding:12px 18px 14px}
  .badge__value{font-size:1.4rem}
  .badge__label{font-size:.6rem;margin-top:6px}

  /* Cards and grids */
  .areas{margin-top:20px}
  .area{padding:22px 20px}
  .why__points{gap:16px}
  .why--row .why__point{padding-top:12px}
  .why__num{font-size:1.25rem;margin-bottom:8px}
  .why__icon{margin-bottom:10px}

  /* About */
  .statement{gap:22px}
  .statement p{margin-top:12px}
  .statement .stats{margin-top:20px;padding-top:16px}

  /* Team */
  .team__head{margin-bottom:20px}
  .team__lede{margin-top:12px}
  .team--rows .team__member{padding:16px 0}

  /* Consultation and contact */
  .consult p{margin:14px 0 22px}
  .contact{gap:12px}
  .contact li{font-size:.92rem}

  /* Resources */
  .resource{padding:18px}
  .resources{margin-top:18px}

  /* Interior pages */
  .page-head{padding-top:var(--space-hero)}
  .entry{padding-top:18px}
  .service{padding:18px 0}
}

@media (max-width:400px){
  .shell{width:calc(100% - 30px)}
  .area{padding:18px 16px}
  .resource{padding:16px}
}