:root{
  --ivory:#FAF7EF; --ivory-2:#F3EEE1; --ink:#14130F; --ink-2:#1D1C17;
  --gold:#C9B476; --gold-lt:#E8DFB0; --gold-dp:#8C7028; --gold-mid:#A88B3C;
  --body:#4E4A40; --body-lt:#B6B1A4;
  /* body copy sitting on ink. --body-lt is the older, dimmer value and still drives the
     home hero and .inkpanel; everything on the inner pages uses this one. */
  --on-ink:#E6E2DA;
  --line:rgba(20,19,15,.13); --line-d:rgba(201,180,118,.22);
  /* one card language for the inner pages, taken from the Four Parts card: --ink-2 fill,
     a gold hairline, 14px radius. Two shadows, because the same card sits on the ink band
     in one section and on cream in the next, and black-on-cream reads as dirt. */
  --card-edge:rgba(201,180,118,.16); --card-edge-hi:rgba(201,180,118,.38);
  --card-r:14px;
  --card-sh-dark:0 18px 44px rgba(0,0,0,.32);
  --card-sh-light:0 18px 40px rgba(20,19,15,.17);
  --disp:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--body);font-family:var(--sans);
  font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1200px,89vw);margin:0 auto}
.eyebrow{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-dp);font-weight:500;margin:0 0 20px}
.dark .eyebrow{color:var(--gold)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(20,19,15,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-d)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:16px 0}
.lockup{display:flex;align-items:center;gap:13px;text-decoration:none}
.lockup .nm,.lockup .rl{display:block}
.lockup img{width:42px}
.lockup .nm{font-family:var(--disp);font-weight:500;font-size:17px;letter-spacing:.005em;
  color:#fff;line-height:1.2}
.lockup .rl{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:4px}
nav{display:flex;align-items:center;gap:30px}
/* nowrap so a squeezed bar overflows visibly at build time rather than quietly
   breaking "Individuals & Families" across two lines */
nav a{font-size:12.5px;letter-spacing:.02em;text-decoration:none;color:#D6D2C6;
  transition:.25s;white-space:nowrap}
nav a:hover{color:var(--gold-lt)}
/* both of these only exist once the nav collapses into a panel.
   .nav-book needs the extra specificity to beat .btn's own display */
.navbtn{display:none}
nav .nav-book{display:none}
.navbtn{flex:none;width:30px;height:22px;padding:0;background:none;border:0;
  cursor:pointer;position:relative}
.navbtn span{position:absolute;left:0;right:0;height:1.5px;background:var(--gold-lt);
  border-radius:2px;transition:.28s}
.navbtn span:nth-child(1){top:2px}
.navbtn span:nth-child(2){top:10px}
.navbtn span:nth-child(3){top:18px}
.nav-open .navbtn span:nth-child(1){top:10px;rotate:45deg}
.nav-open .navbtn span:nth-child(2){opacity:0}
.nav-open .navbtn span:nth-child(3){top:10px;rotate:-45deg}
.btn{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;text-decoration:none;padding:15px 30px;border-radius:2px;transition:.28s;
  white-space:nowrap}
.btn-gold{background:var(--gold);color:#14130F;border:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn-ink{background:var(--ink);color:var(--ivory);border:1px solid var(--ink)}
.btn-ink:hover{background:#2B2921;border-color:#2B2921}
.btn-out{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-out:hover{border-color:var(--gold-mid);color:var(--gold-dp)}
.dark .btn-out{color:var(--ivory);border-color:var(--line-d)}
.dark .btn-out:hover{border-color:var(--gold);color:var(--gold-lt)}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--body-lt);position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(460px,64vh,620px);
  padding:clamp(56px,7vw,92px) 0}
/* full-bleed photo behind the copy */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
/* the overlay: heaviest on the left where the copy sits, so the skyline and
   Lookout Mountain stay visible on the right */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(97deg,rgba(14,13,11,.95) 0%,rgba(14,13,11,.88) 34%,
                  rgba(14,13,11,.62) 60%,rgba(14,13,11,.36) 100%),
  linear-gradient(180deg,rgba(14,13,11,.5),transparent 42%,rgba(14,13,11,.42))}
.hero .wrap{position:relative;z-index:2}
.hero-top{max-width:60ch}
/* sized so "A Stronger Tomorrow." holds one line: the h1 must stay 2 lines, not 3 */
h1{font-family:var(--disp);font-weight:400;color:#fff;margin:0;
  font-size:clamp(2.1rem,3.7vw,3.2rem);line-height:1.08;letter-spacing:-.024em}
h1 em{font-style:italic;color:var(--gold-lt)}
.hero-top .eyebrow{margin:0 0 14px}
/* location and language read as one metadata line above the headline, which keeps the
   CTA row to two balanced buttons instead of a third, odd-shaped element.
   sits outside .hero-top so the 60ch copy measure doesn't force it to wrap */
.hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  letter-spacing:.26em;margin:0 0 16px}
.hero-meta .sep{width:24px;height:1px;background:rgba(201,180,118,.5)}
.hero-meta .lang{color:var(--gold-lt)}
.hero-top p{max-width:46ch;margin:18px 0 28px;font-size:clamp(1rem,1.25vw,1.1rem);color:#D3CEC2}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- sections ---------- */
/* 130px top and bottom read as a void on wide screens, so the band caps lower */
section{padding:clamp(64px,6.4vw,96px) 0}
h2{font-family:var(--disp);font-weight:400;color:var(--ink);margin:0;
  font-size:clamp(2rem,3.7vw,3.15rem);line-height:1.12;letter-spacing:-.022em}
.dark h2{color:#fff}
h2 em{font-style:italic;color:var(--gold-dp)}
.dark h2 em{color:var(--gold-lt)}
.lead{font-size:1.1rem;max-width:56ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- cards ---------- */
/* same object as .scard on the inner pages: 14px radius, soft shadow, no border */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);
  margin-top:clamp(36px,3.4vw,48px)}
.card{background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 38px rgba(20,19,15,.07);
  display:flex;flex-direction:column;transition:.3s;text-decoration:none;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(20,19,15,.11)}
.card figure{margin:0;aspect-ratio:3/2;overflow:hidden;position:relative}
/* biased up so faces survive the 3:2 crop on the wider source files */
.card figure img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:.6s}
.card:hover figure img{transform:scale(1.05)}
.card-b{padding:32px 30px 34px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--disp);font-weight:500;color:var(--ink);font-size:1.42rem;
  margin:0 0 14px;line-height:1.22;letter-spacing:-.012em}
.card p{margin:0 0 24px;font-size:.96rem;flex:1}
/* The whole card is the <a>, so this has to stay a <span>: a real anchor here would nest
   inside one. It only needs to LOOK like a button, the card's own href does the work,
   which is also why it takes no :focus ring of its own.
   Matches .btn/.btn-gold rather than importing them, since it is not a standalone control.
   align-self is required, .card-b is a column flexbox and the span would otherwise
   stretch to the full card width. */
.more{align-self:flex-start;display:inline-block;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;padding:13px 26px;border-radius:2px;
  background:var(--gold);color:#14130F;border:1px solid var(--gold);transition:.28s}
.card:hover .more{background:var(--gold-lt);border-color:var(--gold-lt)}

/* ---------- endurance (contained dark card) ---------- */
/* ink stays contained here, the way it does on the inner pages. the hero is the only
   full-bleed dark moment on the site. */
.inkpanel{background:var(--ink);color:var(--body-lt);border-radius:18px;
  padding:clamp(30px,3.4vw,54px);position:relative;overflow:hidden}
.inkpanel::after{content:"";position:absolute;right:-90px;bottom:-150px;
  width:420px;height:380px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(201,180,118,.16),transparent 68%)}
.inkpanel > *{position:relative;z-index:1}
.endur .grid{display:grid;grid-template-columns:.7fr 1.12fr .68fr;
  gap:clamp(28px,3.2vw,48px);align-items:center}
.endur figure{margin:0;position:relative}
.endur figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;
  position:relative;z-index:1;filter:contrast(1.04) saturate(.94) brightness(.97)}
/* fades the blown-out white sky at the top of the shot into the panel */
.endur figure::after{content:"";position:absolute;inset:0 0 auto 0;height:44%;z-index:2;
  border-radius:14px 14px 0 0;pointer-events:none;background:linear-gradient(to bottom,
    var(--ink) 1%,rgba(26,25,21,.72) 38%,transparent)}
.endur .quote{font-family:var(--disp);font-weight:400;font-style:italic;color:#fff;
  font-size:clamp(1.35rem,2.1vw,1.95rem);line-height:1.3;letter-spacing:-.016em;margin:0 0 24px}
.endur p.body{max-width:54ch;margin:0;color:#C0BBAE}
/* the creed: gold line icons against a hairline rule */
.creed{list-style:none;margin:0;padding:4px 0 4px 26px;display:grid;gap:24px;
  border-left:1px solid rgba(201,180,118,.32)}
.creed li{display:flex;gap:15px;align-items:flex-start}
.creed svg{flex:none;width:27px;height:27px;fill:none;stroke:var(--gold);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.creed span{font-size:.94rem;line-height:1.45;color:#C0BBAE}
.creed b{display:block;font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:4px}

/* the home About block now uses the shared .pclose / .pface / .ptrust system from the
   inner pages, so only the bullet list is defined here. */
/* short scannable points rather than a paragraph under each icon */
.pts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pts li{position:relative;padding-left:16px;font-size:.9rem;line-height:1.45}
.pts li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;
  background:var(--gold-mid)}

/* ---------- inner pages ---------- */
/* Design C, chosen 2026-09-11. Ivory page, soft white cards, 14px radii, generous
   air, ink used only as an accent. Shared by every inner page. */
nav a.here{color:var(--gold-lt)}

/* ---------- page hero: split, photo contained rather than full bleed ---------- */
/* the hero was the last flat ground on the page. Same two offset washes as the bands
   below it, so the light falls the same way from the top of the page to the bottom.
   The shorthand has to come first: it resets background-image, which the next line sets. */
.phero{background:var(--ivory);
  background-image:
    radial-gradient(ellipse 62% 92% at 12% 8%,rgba(201,180,118,.26),transparent 64%),
    radial-gradient(ellipse 54% 82% at 92% 90%,rgba(201,180,118,.15),transparent 66%);
  padding:clamp(40px,4.6vw,72px) 0 clamp(56px,6vw,90px)}
.phero-grid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,3.6vw,58px);align-items:center}
.phero .eyebrow{color:var(--gold-dp)}
.phero .hero-meta .sep{background:rgba(140,112,40,.45)}
.phero .hero-meta .lang{color:var(--gold-dp)}
.phero h1{color:var(--ink);font-size:clamp(2.1rem,3.8vw,3.35rem);margin:0}
.phero h1 em{color:var(--gold-dp)}
.phero-sub{margin:20px 0 30px;font-size:1.08rem;max-width:44ch}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px}
.phero-img{margin:0;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px rgba(20,19,15,.16)}
.phero-img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%}
/* three-up trust strip, still inside the light band */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border-radius:12px;overflow:hidden;margin-top:clamp(34px,3.6vw,50px)}
.trust div{background:#fff;padding:22px clamp(18px,2vw,28px)}
.trust b{display:block;font-family:var(--disp);font-weight:500;color:var(--ink);
  font-size:1.15rem;letter-spacing:-.012em;margin-bottom:5px}
.trust span{font-size:.88rem;color:#6A6559}
/* ink variant, on the shared card language. The cells are split by 2px grid gaps showing
   the shell background through, so that flips to a gold hairline as well or the three
   cells fuse into one unbroken slab. Dividers stay at --line-d, one step stronger than
   the outer --card-edge, which is the right hierarchy for an internal rule. */
.trust.ink{background:var(--line-d);border:1px solid var(--card-edge);
  border-radius:var(--card-r);box-shadow:var(--card-sh-light)}
.trust.ink div{background:var(--ink-2)}
.trust.ink b{color:#fff}
.trust.ink span{color:var(--on-ink)}

/* the About hero. Her own photos are only 414px wide, so the portrait is framed small
   and square rather than stretched into the 4/3 landscape slot, and the name-led h1
   runs smaller than a service-page headline. */
.phero.pbio .phero-img{max-width:420px;margin-left:auto}
.phero.pbio .phero-img img{aspect-ratio:1;object-position:center 22%}
.phero.pbio h1{font-size:clamp(1.9rem,3.2vw,2.8rem)}

/* ---------- inner section shell ---------- */
.psec{padding:clamp(58px,6vw,92px) 0}
.psec-alt{background:var(--ivory-2)}
.phead{margin:0 0 clamp(30px,3.6vw,46px)}
.phead.mid{text-align:center}
.phead.mid .lead{margin-inline:auto}
.phead h2{font-size:clamp(1.9rem,3.3vw,2.8rem)}
/* the measure belongs on the body copy. 58ch resolves against the 16px container,
   which would otherwise break the h2 mid-phrase. */
.phead .lead{margin:16px 0 0;max-width:58ch}
.kicker{font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  color:var(--gold-dp);margin:0 0 16px}

/* ---------- one wide card holding the whole comparison ---------- */
/* The scattered state sits in ink on the left, the coordinated state in white on the
   right. Both panels carry the same four parts (label, headline, paragraph, list) so
   they read as one object in two states rather than a list beside a card.
   No overflow:hidden on the shell, or the seam badge gets sliced. */
.split{background:#fff;border-radius:var(--card-r);border:1px solid var(--card-edge);
  box-shadow:var(--card-sh-light);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.split-side{padding:clamp(28px,3.2vw,44px);display:flex;flex-direction:column}
.split-t{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  margin:0 0 20px}
.split-side b{display:block;font-family:var(--disp);font-weight:500;
  font-size:clamp(1.2rem,1.7vw,1.38rem);line-height:1.24;letter-spacing:-.014em;
  margin:0 0 12px}
/* :not(.split-t) matters: a bare `> p` also matches the label and blows its size up */
.split-side > p:not(.split-t){margin:0 0 26px;font-size:.95rem;max-width:44ch}
.split ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.split li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.45}

/* the dark half: the pieces, as they are today */
/* --ink-2, not --ink: this is a card in the shared language, same fill as every other
   card on the page. The 1px container border means the inner corner is one pixel tighter. */
.split-side.problem{background:var(--ink-2);color:var(--on-ink);
  border-radius:calc(var(--card-r) - 1px) 0 0 calc(var(--card-r) - 1px);
  position:relative;overflow:hidden}
.split-side.problem::after{content:"";position:absolute;left:-80px;bottom:-130px;
  width:330px;height:300px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(201,180,118,.16),transparent 68%)}
.split-side.problem > *{position:relative;z-index:1}
.split-side.problem .split-t{color:var(--gold)}
.split-side.problem b{color:#fff}
.split-side.problem li::before{content:"";position:absolute;left:0;top:7px;
  width:9px;height:9px;border-radius:50%;background:var(--gold)}

/* the light half: the same pieces, coordinated */
/* both panels start at the top so the two gold labels sit on the same line and the
   comparison can be scanned across */
.split-side.answer{border-radius:0 calc(var(--card-r) - 1px) calc(var(--card-r) - 1px) 0}
.split-side.answer .split-t{color:var(--gold-dp)}
.split-side.answer b{color:var(--ink)}
.split-side.answer > p:not(.split-t){color:var(--body)}
.split-side.answer li{color:var(--body)}
.split-side.answer li::before{content:"";position:absolute;left:0;top:7px;
  width:9px;height:9px;border-radius:50%;background:var(--gold-mid)}

/* the seam: a gold node straddling the boundary between the two states */
.seam{width:1px;background:var(--line);position:relative;z-index:3}
.seam::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:38px;height:38px;border-radius:50%;background:var(--gold)}
.seam i{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;
  width:13px;height:13px;border-top:1.6px solid #14130F;border-right:1.6px solid #14130F;
  rotate:45deg;margin-left:-3px}

/* ---------- services: elevated cards, 2 up ---------- */
.scards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px)}
.scard{background:#fff;border-radius:14px;padding:clamp(26px,3vw,38px);
  box-shadow:0 16px 38px rgba(20,19,15,.07);transition:.3s}
.scard:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(20,19,15,.11)}
.chip{width:48px;height:48px;border-radius:12px;background:var(--ivory-2);
  display:grid;place-items:center;margin-bottom:20px}
.chip svg{width:24px;height:24px;fill:none;stroke:var(--gold-dp);stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round}
.scard h3{font-family:var(--disp);font-weight:500;color:var(--ink);margin:0 0 12px;
  font-size:clamp(1.2rem,1.8vw,1.48rem);line-height:1.2;letter-spacing:-.014em}
.scard > p{margin:0;font-size:.96rem}
.scard ul{list-style:none;margin:22px 0 0;padding:20px 0 0;display:grid;gap:10px;
  border-top:1px solid var(--line)}
.scard li{position:relative;padding-left:20px;font-size:.9rem;color:#6A6559}
.scard li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;
  background:var(--gold-mid)}

/* ---------- ink band: the dark counterweight in the middle of a light page ---------- */
/* Design C runs light by default, which left roughly 2000px between the comparison card
   and the closing CTA with no dark anchor anywhere in it. Opt ONE section per page into
   this. Do not stack two ink bands back to back, the alternation against the ivory
   neighbours is the whole point. */
.psec.ink{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
/* two soft gold washes, offset diagonally, so the band reads as lit rather than as a
   flat black rectangle. Both are decorative and sit under the content. */
.psec.ink::before{content:"";position:absolute;left:-8%;top:-26%;width:62%;height:92%;
  pointer-events:none;
  background:radial-gradient(ellipse at 40% 40%,rgba(201,180,118,.15),transparent 64%)}
.psec.ink::after{content:"";position:absolute;right:-14%;bottom:-32%;width:54%;height:82%;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,180,118,.09),transparent 66%)}
.psec.ink > .wrap{position:relative;z-index:1}
.psec.ink .kicker{color:var(--gold)}
.psec.ink h2{color:#fff}
.psec.ink h2 em{color:var(--gold-lt)}
.psec.ink .lead{color:var(--on-ink)}

/* the cards lift off the band on a warmer ink plus a gold hairline. A drop shadow does
   almost nothing against a dark ground, so the edge is doing the work here. */
.psec.ink .scard{background:var(--ink-2);border:1px solid var(--card-edge);
  border-radius:var(--card-r);box-shadow:var(--card-sh-dark)}
.psec.ink .scard:hover{border-color:var(--card-edge-hi);
  box-shadow:0 30px 62px rgba(0,0,0,.44)}
.psec.ink .chip{background:rgba(201,180,118,.13)}
.psec.ink .chip svg{stroke:var(--gold)}
.psec.ink .scard h3{color:#fff}
.psec.ink .scard > p{color:var(--on-ink)}
.psec.ink .scard ul{border-top-color:rgba(201,180,118,.2)}
.psec.ink .scard li{color:#BDB8AA}
.psec.ink .scard li::before{background:var(--gold)}

/* the home About block on an ink band, borrowing the same card treatment as .scard above.
   .pclose and .pface are shared with the About page, which stays light, so every rule
   here is scoped to .psec.ink rather than changing the components themselves. */
.psec.ink .pclose{background:var(--ink-2);border:1px solid var(--card-edge);
  box-shadow:var(--card-sh-dark)}
/* the headshot's own backdrop is near-black, so without a hairline it bleeds into the
   card it sits on and the portrait loses its edge */
.psec.ink .pface{border:1px solid var(--card-edge)}
/* the four pillars are a hairline-gutter grid like .trust.ink: the gutter is the gold-tinted
   --line-d, not the light --line, which would read as four white seams on the ink. */
.psec.ink .ptrust{background:var(--line-d);border:1px solid var(--card-edge);
  box-shadow:var(--card-sh-dark)}
.psec.ink .ptrust > li{background:var(--ink-2)}
.psec.ink .ptrust b{color:var(--gold)}
.psec.ink .pts li{color:#BDB8AA}
.psec.ink .pts li::before{background:var(--gold)}

/* .situ cards already sit on --ink-2, which is the right fill against this band too. Only
   the shadow needs swapping: --card-sh-light is tuned for an ivory ground and disappears
   here, leaving the cards flat. The gold top edge is kept, it is the variant's mark. */
.psec.ink .stepcards.situ li{box-shadow:inset 0 3px 0 var(--gold),var(--card-sh-dark)}
.psec.ink .stepcards.situ li:hover{
  box-shadow:inset 0 3px 0 var(--gold-lt),0 30px 62px rgba(0,0,0,.44)}

/* ---------- the same wash, on a light ground ---------- */
/* Gold over ink lightens, so .psec.ink reads as a glow. The identical colour over cream
   darkens instead, landing as a warm sand rather than a glow, and it needs roughly double
   the alpha before it registers at all. Geometry is kept identical to .psec.ink on purpose,
   so the light and dark bands read as one device in two states. */
/* Painted as background-image rather than the two pseudo-elements .psec.ink uses. Those
   need overflow:hidden to clip, and the cards now throw a 40px shadow into a section whose
   padding bottoms out at 58px, which was close enough to clipping to be worth avoiding.
   background-image also leaves background-color alone, so .psec-alt's cream still shows. */
.psec.wash{background-image:
  radial-gradient(ellipse 62% 92% at 12% 8%,rgba(201,180,118,.30),transparent 64%),
  radial-gradient(ellipse 54% 82% at 92% 90%,rgba(201,180,118,.18),transparent 66%)}

/* ---------- steps: card sets, 3 up ---------- */
.stepcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  list-style:none;margin:0;padding:0}
.stepcards li{background:#fff;border-radius:14px;padding:clamp(24px,2.6vw,32px)}
.stepcards h3{font-family:var(--disp);font-weight:500;color:var(--ink);margin:0 0 9px;
  font-size:1.18rem;letter-spacing:-.012em}
.stepcards p{margin:0;font-size:.91rem;line-height:1.55;color:#6A6559}
/* The only variant in use: a gold top edge on an ink card, for items that are a set
   rather than an order. Used by about, individuals, business-owners, and legacy.
   A numbered .seq variant lived here until 2026-09-14, when the individuals six-step
   grid moved to this treatment and left nothing pointing at it.
   The edge is an inset shadow, not border-top. A 3px top border mitres against the 1px
   hairline on the sides and leaves a gold wedge in each top corner; an inset follows
   the radius. */
.stepcards.situ li{background:var(--ink-2);border:1px solid var(--card-edge);
  border-radius:var(--card-r);
  box-shadow:inset 0 3px 0 var(--gold),var(--card-sh-light);transition:.3s}
.stepcards.situ li:hover{transform:translateY(-4px);border-color:var(--card-edge-hi);
  box-shadow:inset 0 3px 0 var(--gold-lt),0 28px 56px rgba(20,19,15,.24)}
.stepcards.situ h3{color:#fff}
.stepcards.situ p{color:var(--on-ink)}

/* ---------- small photo gallery ---------- */
/* her own photos are 414px squares, so they are shown small and square rather than
   cropped into a wide frame where the upscale would show */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  list-style:none;margin:0;padding:0}
.gallery figure{margin:0;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 38px rgba(20,19,15,.08)}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:.5s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{padding:16px 18px 20px;font-size:.88rem;line-height:1.5;color:#6A6559}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gallery{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

/* ---------- closing card ---------- */
.pclose{background:#fff;border-radius:16px;padding:clamp(30px,3.6vw,52px);
  box-shadow:0 22px 50px rgba(20,19,15,.08);
  display:grid;grid-template-columns:1.1fr .72fr;gap:clamp(28px,3.6vw,54px);
  align-items:center}
.pclose h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.pclose .lead{margin:18px 0 14px}
.pclose .by{margin:0 0 28px;max-width:50ch}
.pface{margin:0 0 0 auto;max-width:300px;border-radius:14px;overflow:hidden}
.pface img{width:100%;aspect-ratio:1;object-fit:cover}
.ptrust{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
  border-radius:14px;overflow:hidden}
/* direct child only, or the nested .pts bullets inherit the cell padding */
.ptrust > li{background:#fff;padding:clamp(22px,2.4vw,30px)}
.ptrust b{display:block;font-family:var(--sans);font-weight:600;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:10px}
.ptrust p{margin:0;font-size:.89rem;line-height:1.5;color:#6A6559}
/* the home page's pillar cells also carry an icon and a short bullet list */
.ptrust .chip{width:40px;height:40px;border-radius:10px;margin-bottom:16px}
.ptrust .chip svg{width:21px;height:21px}

/* ---------- closing CTA: a contained card, not a full-bleed slab ---------- */
/* on the shared card language too. It stays distinguishable by the gold radial, the
   centred layout and the scale, rather than by being the one card with its own fill. */
.pfinal{background:var(--ink-2);border:1px solid var(--card-edge);
  border-radius:var(--card-r);text-align:center;
  padding:clamp(44px,5vw,72px) clamp(24px,3vw,40px);position:relative;overflow:hidden;
  margin-bottom:clamp(58px,6vw,92px)}
.pfinal::before{content:"";position:absolute;left:50%;top:118%;translate:-50% -50%;
  width:760px;height:460px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(201,180,118,.24),transparent 66%)}
.pfinal > *{position:relative;z-index:1}
.pfinal h2{color:#fff}
.pfinal h2 em{color:var(--gold-lt)}
.pfinal .eyebrow{color:var(--gold)}
.pfinal-sub{max-width:50ch;margin:20px auto 34px;color:#C0BBAE}
/* when the closing card follows a coloured band it starts flush against the band edge,
   so it needs its own top air. after a plain .psec the section padding already covers it.
   .ink counts as a coloured band for the same reason, and worse: the card is dark too, so
   without this the two fuse into one mass instead of reading as a card on the page. */
.psec-alt + .wrap .pfinal,
.psec.ink + .wrap .pfinal{margin-top:clamp(58px,6vw,92px)}

@media(max-width:900px){
  .phero-grid,.scards,.pclose{grid-template-columns:1fr}
  /* the photo leads on a phone, the copy follows */
  .phero-img{order:-1}
  .stepcards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .seam{width:auto;height:1px}
  .seam::after,.seam i{display:none}
  .split-side.problem{border-radius:14px 14px 0 0}
  .split-side.answer{border-radius:0 0 14px 14px}
  .pface{max-width:240px;margin:0 auto}
  .ptrust{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .trust,.stepcards,.ptrust{grid-template-columns:1fr}
}

/* the closing CTA on every page is .pfinal, defined in the inner-page block above */

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line-d);padding:60px 0 34px;
  font-size:.86rem;color:#8B8779}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.fgrid a{text-decoration:none;color:#A8A396}
.fgrid a:hover{color:var(--gold-lt)}
.fcol h4{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin:0 0 18px;font-weight:600}
.fcol ul{list-style:none;padding:0;margin:0}
.fcol li{margin-bottom:10px}
.legal{border-top:1px solid rgba(201,180,118,.12);padding-top:24px;font-size:.77rem;
  line-height:1.75;color:#736F65;display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.tag{display:inline-block;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(201,180,118,.14);color:var(--gold-lt);padding:3px 8px;margin-left:7px;
  border:1px solid var(--line-d);border-radius:2px}

/* The bar needs ~1024px for the lockup, six nav items and the button. .wrap is 89vw,
   so the inline nav starts wrapping to two lines just under 1150px. Collapse to the
   panel at 1200 to keep a margin. */
@media(max-width:1260px){
  .navbtn{display:block}
  nav{position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 5.5vw 26px;
    /* opaque, not a tint. the hero copy sits right underneath and ghosts through
       anything translucent */
    background:#100F0D;
    border-bottom:1px solid var(--line-d);
    box-shadow:0 26px 44px rgba(0,0,0,.4);
    transform:translateY(-10px);opacity:0;visibility:hidden;
    transition:transform .28s,opacity .28s,visibility .28s}
  header.nav-open nav{transform:none;opacity:1;visibility:visible}
  nav a{font-family:var(--disp);font-size:1.3rem;letter-spacing:-.012em;color:#EDE9DD;
    padding:18px 2px;border-bottom:1px solid rgba(201,180,118,.16)}
  nav a:last-of-type{border-bottom:none}
  nav a.here{color:var(--gold-lt)}
}

/* three columns get too tight here, so drop the creed to a full-width row under the
   photo and quote first */
@media(max-width:1120px){
  .endur .grid{grid-template-columns:.8fr 1.2fr}
  .creed{grid-column:1/-1;border-left:none;border-top:1px solid rgba(201,180,118,.22);
    padding:30px 0 0;grid-template-columns:repeat(4,1fr);gap:26px 30px}
}

/* above 640 the panel's booking button is hidden (the bar still carries one), so the
   last link would otherwise end on a divider with nothing under it */
@media(min-width:641px) and (max-width:1260px){
  nav a:nth-last-of-type(2){border-bottom:none}
}

@media(max-width:980px){
  .cards{grid-template-columns:1fr}
  .endur .grid,.fgrid{grid-template-columns:1fr}
}

@media(max-width:900px){
  .creed{grid-template-columns:repeat(2,1fr);gap:24px 30px}
}

@media(max-width:560px){
  /* the longest label, "Explore Business Strategy", wraps to two ragged lines by ~360px.
     Full width and centred, which is the normal shape for a phone CTA anyway, plus tighter
     tracking and side padding so all three labels still hold one line. */
  .more{align-self:stretch;text-align:center;padding-inline:14px;letter-spacing:.08em}
  /* "A Stronger Tomorrow" cannot hold a 2-up column at phone width */
  .creed{grid-template-columns:1fr;gap:20px}
  /* the Ironman shot is only 414px wide, so don't let it stretch full-bleed and go soft.
     remove this cap once a full-resolution original arrives. */
  .endur figure{max-width:300px;margin-inline:auto}
}

@media(max-width:640px){
  .lockup .rl{display:none}
  .lockup .nm{font-size:13px !important;letter-spacing:.01em}
  .lockup img{width:34px}
  .lockup{gap:10px}
  /* the lockup, a full button and the hamburger stop fitting on one bar here, so the
     booking CTA moves down into the panel */
  .bar-cta{display:none}
  nav .nav-book{display:block;margin:24px 0 0;text-align:center;font-family:var(--sans);
    font-size:12px;padding:16px 24px;border-bottom:none}
  footer .lockup .nm{font-size:13px !important}

  /* keep both hero buttons on one row instead of a 370px stack */
  .hero-cta,.phero-cta{gap:9px}
  .hero-cta .btn,.phero-cta .btn{font-size:10px;padding:13px 15px;letter-spacing:.09em}
  /* copy spans the full width on a phone, so the overlay has to darken top-down
     rather than left-to-right */
  .hero-bg::after{background:
    linear-gradient(180deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.88) 46%,
                    rgba(14,13,11,.74) 78%,rgba(14,13,11,.7) 100%)}
  .hero-bg img{object-position:center 30%}
  /* the meta line has to survive a 360px screen without the rule dangling on its own */
  .hero-meta{letter-spacing:.16em;font-size:9.5px;gap:9px;margin-bottom:14px}
  .hero-meta .sep{width:14px}
}