/* wealthwithinwalls — rebuilt to MATCH the existing site.
 *
 * Every value here was measured off the live site with
 * tools/extract-design.mjs, not chosen. An earlier version of this file
 * invented a navy/cream/bold-serif brand and read as a different company.
 *
 *   display  marcellus 400      h1 60px ls -2.4px · 34px ls -1.02px · h2 30px ls -1.2px
 *   body     league-spartan 300 18px
 *   colour   #000 and #fff. Nothing else.
 *
 * Both faces are SIL OFL and self-hosted; the CSP is font-src 'self'.
 */
@font-face { font-family:"Marcellus"; src:url("/fonts/marcellus-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"League Spartan"; src:url("/fonts/league-spartan-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"League Spartan"; src:url("/fonts/league-spartan-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

:root {
  --black:#000; --white:#fff; --hair:#d8d8d8;
  --display:"Marcellus",Georgia,serif;
  --body:"League Spartan",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1400px; --pad:clamp(20px,4vw,64px);
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--white); color:var(--black); font:300 18px/1.6 var(--body); }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--black); outline-offset:3px; }
.skip { position:absolute; left:-9999px; top:0; background:#000; color:#fff; padding:.7rem 1rem; z-index:100; }
.skip:focus { left:0; }

h1,h2,h3 { font-family:var(--display); font-weight:400; margin:0 0 .5em; line-height:1.12; }
h1 { font-size:clamp(2.1rem,1.3rem + 2.6vw,3.75rem); letter-spacing:-.04em; }
h2 { font-size:clamp(1.5rem,1.2rem + 1.1vw,1.875rem); letter-spacing:-.04em; }
h3 { font-size:1rem; letter-spacing:0; }
p { margin:0 0 1.1em; }

.site-head { background:var(--white); }
.site-head .bar { display:flex; align-items:center; gap:1.5rem; padding:18px var(--pad); }
.brand { font-family:var(--display); font-size:1.25rem; text-decoration:none; }

.hero { display:grid; grid-template-columns:1fr; background:var(--black); }
.hero__panel { background:var(--black); color:var(--white); padding:clamp(2.5rem,5vw,4.5rem) var(--pad); align-self:center; }
.hero__panel h1 { color:var(--white); }
.hero__panel p { font-size:.95rem; max-width:42ch; line-height:1.62; }
.hero__photo img { width:100%; height:100%; object-fit:cover; min-height:320px; }
@media (min-width:900px){ .hero { grid-template-columns:46% 54%; min-height:78vh; } .hero__photo { height:100%; } }

/* Tanya: the black panel should show the two of them. It is centred in a
   78vh grid, which is exactly why there is dead black above and below the
   text -- her original note was "no empty black space". Three ways to fill
   it, one class each, so they can be compared on the real page rather than
   described. MOCKUP: two of these three go once Paul picks. */
.hero--people-foot .hero__panel {
  align-self:stretch; display:flex; flex-direction:column; justify-content:center;
  padding-bottom:0;
}
/* width:auto on a block absorbs the negative margins and bleeds to both
   panel edges; an explicit calc width does not, and a percentage HEIGHT
   here is circular -- the panel's height comes from this image, so the
   percentage resolves against nothing and collapses. Hence a vh height. */
/* max-width:none is load-bearing: the global `img { max-width:100% }`
   clamps the bleed back to the panel's content box, so the negative
   margins just shift the image instead of widening it. A percentage
   HEIGHT is circular here too -- the panel's height comes from this
   image -- so it is set in vh. */
.hero--people-foot .hero__people {
  display:block; width:calc(100% + 2 * var(--pad)); max-width:none;
  margin-inline:calc(-1 * var(--pad)); margin-top:2.2rem;
  height:clamp(240px,34vh,360px); object-fit:cover; object-position:50% 14%;
}
.hero--people-bg .hero__panel {
  position:relative; align-self:stretch; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden;
}
.hero--people-bg .hero__panel > :not(.hero__people) { position:relative; z-index:3; }
.hero--people-bg .hero__people {
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:55% 18%;
}
/* Dark enough for the type to hold, light enough that you can still see
   who they are -- at .92/.78 they were barely there, which defeats the
   point of putting them in. */
.hero--people-bg .hero__panel::after {
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.6) 48%,rgba(0,0,0,.28) 100%);
}
.hero--people-side .hero__photo img:not(.hero__people) { display:none; }
.hero--people-side .hero__photo { background:var(--black); }
.hero--people-side .hero__people {
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:50% 22%; min-height:320px;
}

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.85rem 1.6rem;
  background:var(--white); color:var(--black); border:1px solid var(--black); text-decoration:none;
  font:300 .95rem/1 var(--body); letter-spacing:.02em; cursor:pointer; }
.btn:hover { background:var(--black); color:var(--white); }
.btn--onblack { border-color:var(--white); }
.btn--onblack:hover { background:var(--white); color:var(--black); }
.btn-stack { display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; margin-top:2rem; }
.btn-stack .btn { min-width:260px; }

.statement { text-align:center; padding:clamp(2.5rem,6vw,4.5rem) var(--pad); }
.statement .eyebrow { font-size:1.05rem; font-weight:300; margin-bottom:1.6rem; }
.statement p.big { font-family:var(--display); font-size:clamp(1.4rem,1rem + 1.7vw,2.125rem);
  letter-spacing:-.03em; line-height:1.34; max-width:46ch; margin-inline:auto; }

.duo { display:grid; grid-template-columns:1fr; }
.duo img { width:100%; height:100%; object-fit:cover; }
@media (min-width:760px){ .duo { grid-template-columns:1fr 1fr; } }

.band { background:var(--black); color:var(--white); padding:clamp(2.5rem,6vw,4rem) var(--pad); }
.band .cols { display:grid; gap:clamp(1.8rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  max-width:var(--max); margin-inline:auto; }
.band .col { text-align:center; }
.band .col svg { display:block; margin:0 auto 1.15rem; width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.1; }
.band h2 { color:var(--white); font-family:var(--body); font-weight:300; font-size:1rem; letter-spacing:0; margin-bottom:.9em; }
.band p { font-size:.82rem; line-height:1.7; margin:0; }

.contact { display:grid; grid-template-columns:1fr; }
.contact__panel { background:var(--black); min-height:120px; }
.contact__form { padding:clamp(2rem,5vw,3.5rem) var(--pad); }
@media (min-width:900px){ .contact { grid-template-columns:28% 72%; } }
.field { display:grid; gap:.3rem; margin-bottom:1.3rem; max-width:38rem; }
.field label { font-size:.85rem; font-weight:300; }
.field input,.field select,.field textarea { font:300 1rem/1.5 var(--body); padding:.55rem .2rem; min-height:44px;
  border:0; border-bottom:1px solid #9a9a9a; background:transparent; color:var(--black); }
.field textarea { min-height:7rem; resize:vertical; border:1px solid #9a9a9a; padding:.6rem; }
.btn--send { background:#3f3f3f; color:#fff; border-color:#3f3f3f; width:100%; max-width:38rem; }
.btn--send:hover { background:#000; border-color:#000; }

.doc-list { list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:0; max-width:900px; }
.doc { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem; padding:1.15rem 0; border-bottom:1px solid var(--hair); }
.doc__name { font-family:var(--display); font-size:1.15rem; letter-spacing:-.02em; }
.doc__note { font-size:.84rem; color:#555; flex-basis:100%; }
.doc__actions { margin-left:auto; display:flex; gap:.6rem; flex-wrap:wrap; }
.is-disabled { opacity:.45; cursor:not-allowed; }

.person { display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr; margin-bottom:clamp(2.5rem,6vw,4rem); }
@media (min-width:820px){ .person { grid-template-columns:340px 1fr; } }
.person p { font-size:1rem; }

/* Footer is the D&B signature banner, then the socials and numbers from
   the live site. The numbers are plain text there; here they are links. */
.site-foot { background:var(--white); color:var(--black); }
.foot-banner img { width:100%; height:auto; }
.foot-body { padding:clamp(1.8rem,4vw,2.8rem) var(--pad); max-width:var(--max); margin-inline:auto; }
.foot-cells { display:flex; flex-wrap:wrap; gap:1rem 2.6rem; margin-bottom:1.5rem; }
.foot-cells .who { font-size:.82rem; display:block; margin-bottom:.15rem; }
.foot-cells a { font-size:1.05rem; text-decoration:none; border-bottom:1px solid var(--black);
  padding-bottom:2px; min-height:24px; display:inline-block; }
.foot-addr { font-size:.95rem; font-style:normal; margin-bottom:1.4rem; }
.socials { display:flex; gap:1.1rem; margin-bottom:1.6rem; padding:0; list-style:none; }
.socials a { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--black); }
.socials svg { width:15px; height:15px; fill:currentColor; }
.foot-legal { display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; list-style:none; padding:0; margin:0 0 .7rem; font-size:.88rem; }
.foot-legal a { min-height:24px; display:inline-block; padding:.2rem 0; }
.foot-copy { font-size:.84rem; color:#444; margin:0; }

.todo { border-left:3px solid #888; background:#f3f3f3; color:#333; padding:.8rem 1rem; margin:0 0 1.1em; font-size:.9rem; }
.band .todo,.hero__panel .todo { background:#161616; color:#cfcfcf; border-left-color:#666; text-align:left; }

.wrap { max-width:var(--max); margin-inline:auto; padding:clamp(2.2rem,5vw,3.5rem) var(--pad); }
.prose p,.prose li { max-width:74ch; font-size:1rem; }
.prose h2 { margin-top:1.7em; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }


/* Page hero: full-bleed photo with an overlaid white card, the pattern
   every interior page on the original uses. */
.phero { position:relative; background:#efefef; }
.phero__media img { width:100%; height:clamp(220px,34vw,420px); object-fit:cover; }
.phero__card { background:var(--white); padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.4rem,3vw,2.6rem);
  max-width:min(620px,92%); margin:-clamp(3rem,7vw,6rem) auto 0; position:relative; }
.phero__card h1 { margin-bottom:.35em; }
.phero__card p { font-size:.95rem; margin:0; max-width:56ch; }
@media (min-width:1000px){
  .phero__card { margin-left:clamp(2rem,10vw,9rem); margin-right:0; }
}

/* Readable measure. Paragraphs were running ~90 characters wide. */
.person p, .prose p, .wrap > p { max-width:68ch; }
.person img { width:100%; max-width:340px; }

/* Mobile: the Wix site handles this badly, so be explicit. */
@media (max-width:640px){
  .hero__panel { padding-block:2.4rem; }
  .btn-stack .btn { min-width:0; width:100%; }
  .doc { flex-direction:column; align-items:flex-start; gap:.7rem; }
  .doc__actions { margin-left:0; width:100%; }
  .doc__actions .btn { flex:1 1 auto; }
  .phero__card { margin-top:-2rem; max-width:100%; }
  .band .cols { gap:2.4rem; }
  .foot-cells { gap:1.1rem 1.8rem; }
}


.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
      clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }





/* Header nav.
   <details> so it works with script-src 'self' and keeps working if JS
   never loads -- a nav that depends on JS is a nav that can strand you. */
.site-head .bar { flex-wrap:nowrap; }
.brand { white-space:nowrap; flex:0 1 auto; }
.nav { margin-left:auto; }
.nav > summary { list-style:none; cursor:pointer; }
.nav > summary::-webkit-details-marker { display:none; }
.nav ul { display:flex; list-style:none; margin:0; padding:0; gap:1.4rem; }
.nav a { text-decoration:none; font-size:.95rem; font-weight:300; padding:.45rem 0;
  display:inline-block; min-height:24px; white-space:nowrap; }
.nav a:hover,.nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:5px; }

/* one menu control at every width, as the original has */
@media all {
  .site-head .bar { padding-block:14px; }
  .brand { font-size:clamp(1rem,4.2vw,1.25rem); }
  .nav > summary {
    display:inline-flex; align-items:center; gap:.5rem;
    min-height:44px; min-width:44px; padding:.4rem .2rem;   /* real tap target */
  }
  .nav > summary:focus-visible { outline:2px solid var(--black); outline-offset:3px; }
  .burger { position:relative; display:block; width:22px; height:2px; background:var(--black); }
  .burger::before,.burger::after { content:""; position:absolute; left:0; width:22px; height:2px; background:var(--black); }
  .burger::before { top:-7px; } .burger::after { top:7px; }
  .nav[open] .burger { background:transparent; }
  .nav[open] .burger::before { top:0; transform:rotate(45deg); }
  .nav[open] .burger::after  { top:0; transform:rotate(-45deg); }
  .burger-word { font-size:.9rem; font-weight:300; }
  /* A closed <details> normally hides its children, but position:absolute
     takes this one out of flow and it escapes that. Hide it explicitly
     rather than relying on the UA mechanism. */
  .nav:not([open]) > nav { display:none; }
  .nav > nav {
    position:absolute; left:0; right:0; z-index:20;
    background:var(--white); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
    padding:.4rem var(--pad) 1rem;
  }
  .nav ul { flex-direction:column; gap:0; }
  .nav a { display:block; padding:.85rem 0; min-height:48px; border-bottom:1px solid #eee; }
  .site-head { position:relative; }
}


/* The numbers were painted out of the banner artwork and are set as real
   text in their old positions instead. cqw units size them against the
   banner's own width, so they track the image exactly as it scales --
   percentages would move them but not resize them. */
/* Two containers, deliberately. foot-art holds the artwork and nothing
   else, so the numbers' percentage offsets always resolve against the
   image's own height; foot-banner is the positioning context for the
   socials and is free to grow when they drop below on small screens.
   Collapsing these into one put "Cell: (619) 838.9635" across the D&B
   logo on phones -- the container grew, and top:57.92% grew with it. */
.foot-banner { position:relative; container-type:inline-size; }
.foot-art { position:relative; line-height:0; container-type:inline-size; }
.foot-num {
  position:absolute; color:#fff; white-space:nowrap;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.5);
  text-decoration-thickness:max(1px,.05em); text-underline-offset:.24em;
  font-family:var(--display); font-weight:400; letter-spacing:.005em;
  font-size:max(10px, 1.72cqw); line-height:1;
  /* Padding, not a bigger font: the hit area must clear 24px (WCAG 2.2
     SC 2.5.8) without changing how big the number looks. `top` below is
     compensated for it so the glyphs stay where the artwork had them. */
  padding:max(.42em, 7px) .2em;
}
/* Permanently underlined, not just on hover. A phone has no hover, so a
   hover-only underline is no affordance at all on the device most likely
   to actually dial — which is what these are for. Soft white so it reads
   as "tappable" against the script without competing with it, and it
   brightens on hover and focus. */
.foot-num:hover, .foot-num:focus-visible { text-decoration-color:#fff; }
.foot-num:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.foot-num--brigette { left:8.48%;  top:57.92%; }
/* Anchored by its RIGHT edge, not its left. The artwork ends this number
   at x=989 of 1047 = 5.54% from the right. Left-anchoring overflowed the
   banner by up to 23px on phones once the font hit its legibility floor
   and grew wider than the artwork's proportion. */
.foot-num--tanya    { right:4.00%; top:57.92%; }



/* Socials sit in the banner's empty bottom-right, mirroring the D&B logo
   in the opposite corner. Measured off the artwork, not estimated: below
   y=265 of 392 the navy is clear of both photographs on every row from
   x=784 of 1047 rightward, so the row has 263x127px to live in.

   The mirror is exact. The logo is 154px wide (14.7% of the banner) with
   its left edge 10.22% in and its centre at 88% of the height; three
   icons at 4.01cqw with 1.34cqw gaps come to the same 154px, inset the
   same 10.22% from the right, centred at the same 88%.

   They used to sit centred BELOW the banner on a navy strip of their own.
   That strip is why the blue ran on past the point where the two of them
   are cut off -- the artwork's navy and their bodies both stop at the
   image's last row. Moving the icons inside removed the strip, so the
   blue now ends exactly where the photographs do. */
.foot-socials { position:absolute; right:10.22%; top:88%; transform:translateY(-50%); }
.foot-socials ul {
  display:flex; gap:max(7px, 1.34cqw);
  list-style:none; margin:0; padding:0;
}
/* cqw so they scale with the artwork, with a floor so the tap target
   still clears 24px (WCAG 2.2 SC 2.5.8) once the banner gets small. */
.foot-socials a {
  display:inline-flex; width:max(24px, 4.01cqw); height:max(24px, 4.01cqw);
  align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.55); color:#fff;
}
.foot-socials a:hover { background:#fff; color:#02186F; }
.foot-socials a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.foot-socials svg { width:52%; height:52%; }
/* Once the icons hit their 24px floor they are proportionally far larger
   than the artwork's 154px band and no longer fit the mirrored inset, so
   they tuck closer to the edge rather than overlapping Tanya's arm. */
@media (max-width:860px){
  .foot-socials { right:3%; }
}
/* Below ~480px the floor wins outright: three 24px targets plus gaps come
   to 86px, and the clear navy corner is only 80px at a 320px viewport, so
   in-banner they would sit on Tanya's sleeve. Measured, not guessed --
   clearance went negative at 320 and 360. They drop below the banner
   instead, still right-aligned, in navy on white. The blue still stops
   exactly where the two of them are cut off, which is the point. */
@media (max-width:479px){
  .foot-socials { position:static; transform:none; line-height:normal;
                  padding:.9rem var(--pad) 0; }
  .foot-socials ul { justify-content:flex-end; gap:.8rem; }
  .foot-socials a { width:34px; height:34px; border-color:rgba(2,24,111,.45); color:#02186F; }
  .foot-socials a:hover { background:#02186F; color:#fff; }
  .foot-socials a:focus-visible { outline-color:#02186F; }
}

/* Consent checkbox. The box and its notice sit on one line with the text
   wrapping beside it, not under it — a long legal notice indented under a
   stray checkbox reads as unrelated fine print. The label is the tap
   target, so it clears 24px (WCAG 2.2 SC 2.5.8) without a large box. */
.field--consent label {
  display:grid; grid-template-columns:auto 1fr; gap:.65rem; align-items:start;
  font-size:.82rem; line-height:1.5; cursor:pointer; min-height:24px;
}
/* 24px exactly, not 18 — the first version failed the tap-target check on
   every page. A required legal consent is the last control that should be
   fiddly to hit. */
.field--consent input { width:24px; height:24px; margin:0; flex:none; }
.field--consent .consent-policy { margin:.5rem 0 0 calc(24px + .65rem); font-size:.82rem; }
.field--consent .consent-policy a { display:inline-block; min-height:24px; padding-block:.28rem; color:inherit; }

/* Contact-form honeypot: kept off-screen rather than display:none, which
   some bots skip. */
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }