/* Client edits, 8 Sep 2026.
   Buttons take the Access pill shape everywhere. The hero explains the business
   on arrival. The footer says what the firm does. */

/* ── every button is the oval ─────────────────────────────────────── */
.cta{border-radius:999px;padding:0 30px}
.cta--gold{border:1px solid transparent}
/* the bordered variant matches the Access pill exactly */
.cta--line{background:transparent;border:1px solid var(--gold-55);color:var(--gold-deep)}
.cta--line:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream)}

/* ── hero: the headline, then what the firm actually is ───────────── */
.hero__lede{margin-top:var(--sp-5);max-width:46ch;color:rgba(255,251,243,.82);
  font-size:var(--fs-h3);line-height:1.62}
.hero .hero__acts{margin-top:var(--sp-6)}

/* ── close: the alternative route reads as a sentence, not a control ─ */
.lnk--bare{border-bottom:0;background:none}
.lnk--bare::after,.lnk--bare::before{display:none!important}

/* ── footer: one line explaining the firm, above the base rule ─────── */
.ftr__what{margin-top:var(--sp-8);padding-top:var(--sp-6);max-width:52ch;
  border-top:1px solid var(--ink-10);color:var(--ink);
  font-size:var(--fs-h3);line-height:1.45;font-weight:var(--w-light);
  letter-spacing:var(--tr-h3)}


/* ── the header sits at the same rhythm as Wealth ─────────────────── */
/* --hdr-h is now a token (72px) so nothing hardcodes it. The lockup grows
   with the bar; the two sites' wordmarks already measure the same width. */
.brand img{width:auto;height:25px}

/* ── the hero fills the page on arrival, as Wealth's does ─────────── */
.hero{min-height:100svh}
@supports not (height:100svh){.hero{min-height:100vh}}

/* ── the one line that should carry weight ─────────────────────────
   The brand book allows a single accent family, so this takes the deep
   gold rather than introducing a second colour. */
.accent{color:var(--gold-deep)}

/* ── the closing mark reads lighter in gold than in ink ──────────── */
.invite__mark{filter:none}

/* ── contact offices ───────────────────────────────────────────────
   Beverly Hills leads; the two by-appointment rooms share the row
   beneath it, so the block reads balanced rather than as a ragged
   column. Same arrangement as the Wealth site. */
.locs__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
@media(max-width:640px){.locs__pair{grid-template-columns:1fr}}

/* ── interior heroes ───────────────────────────────────────────────
   These read as type dropped into a large empty field. One restrained
   treatment across every interior page, so they feel planned rather
   than left over, and deliberately quieter than the home hero:

     · a short tick against the eyebrow, so the block has a beginning
     · a hairline at the base that the following section sits on, so
       the hero is bounded by something real rather than trailing off
     · less air above, which the About page especially was carrying

   Each page keeps whatever geometry it already owns (the lens, the
   interlock, the orbit), so no page gains a second arc. */
.open{padding-top:calc(var(--hdr-h) + var(--sp-8))}
.open > .wrap{position:relative}

.open .eyebrow{position:relative;padding-left:38px}
.open .eyebrow::before{content:"";position:absolute;left:0;top:50%;
  width:26px;height:1px;background:var(--gold);opacity:.85}

/* the base rule spans the measure and stops there, never the full bleed */
.open::after{content:"";position:absolute;left:50%;bottom:0;
  width:min(var(--maxw), calc(100% - var(--pad) * 2));height:1px;
  transform:translateX(-50%);background:var(--gold);opacity:.34}
@media(min-width:1470px){.open::after{width:var(--maxw)}}

/* the opening statement carries a little more weight in that space */
.open h1{max-width:16ch}
.open .body{margin-top:var(--sp-5)}

/* ── contact: the plate meets the top of the content ───────────────
   The split grid centres its two columns, which left the photograph
   floating with a gap above it. On the contact page it starts level
   with the eyebrow instead. */
.open.split-soft .wrap{align-items:start}

/* ── the relationship statement ────────────────────────────────────
   This band read as dead tan space with a paragraph parked in the
   corner. The client's own line becomes the statement it already is:
   set larger, given the measure, and the band tightened so it is
   occupied rather than empty. No new copy. */
.sec.statement:not(.statement--map){padding-block:var(--sp-8)}
.sec.statement:not(.statement--map) .lead{max-width:30ch;font-size:var(--fs-d3);
  line-height:var(--lh-d3);letter-spacing:var(--tr-d3);
  font-weight:var(--w-light);color:var(--ink)}
@media(max-width:900px){
  .sec.statement:not(.statement--map) .lead{font-size:var(--fs-h1);line-height:1.3}
}

/* ── "Success gets complicated." ───────────────────────────────────
   Landscape plate beside a two-column ledger, so eight nouns occupy
   four rows and the band stays a single spread. */
.transition__plate{position:relative;overflow:hidden;min-height:100%}
.transition__plate img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  transition:transform 4.5s var(--ease);transform-origin:50% 40%}
.transition__plate:hover img{transform:scale(1.045)}
@media(max-width:960px){
  .transition__plate{min-height:0;aspect-ratio:16/10}
  .transition__plate img{position:static;height:100%}
}

/* ── offices ───────────────────────────────────────────────────────
   `.locs div` was drawing a rule on every div, including the wrapper
   holding the two by-appointment rooms, so three offices produced four
   rules at two different heights. The rule belongs to an office, not to
   a wrapper, and all three now start on the same line. */
.locs{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
  gap:var(--sp-6) var(--sp-5);margin-top:var(--sp-7)}
.locs__pair{display:contents}
.locs__lead,.locs__pair > div{border-top:1px solid var(--gold);padding-top:var(--sp-3)}
.locs b{margin-bottom:2px}
.locs p{text-wrap:pretty}
@media(max-width:760px){.locs{grid-template-columns:1fr}}


/* ══ Client QA, 12 Sep 2026 ════════════════════════════════════════
   Abe's identity is used physically on the building, so the site now
   carries his own logo artwork rather than an approximation of it. */

/* ── a break that only exists where there is room for it ──────────
   Desktop gets the line breaks written into the copy; below that the
   text wraps to its measure. The space always lives after the <br>,
   so the sentence still reads correctly when the break is off. */
br.brk{display:none}
@media(min-width:1200px){br.brk{display:inline}}

/* ── footer lockup ────────────────────────────────────────────────
   Same treatment as the header — the official lockup, a size up —
   with the tagline stepped down so the logo leads the pair. */
.ftr__mark img{width:auto;height:31px}
.ftr__mark p{margin-top:var(--sp-4);max-width:30ch;
  font-size:13px;line-height:1.6;color:var(--ink-45)}

/* The disclosure paragraph that used to sit here was written on our
   side and never came from the client, so it is gone; the statement
   now follows the columns directly and the footer closes on the
   copyright line alone. */
.ftr__what{margin-top:var(--sp-7)}

/* ── contact plate ────────────────────────────────────────────────
   The reception sign sits left of centre in the frame, so a centred
   crop cut the E off the wall. 32% holds the whole lockup, the chair
   and the olive tree. */
.split-soft__plate--tall img{object-position:32% center}

/* On phones the three footer columns never collapsed, which squashed the
   lockup to the width of its column. The logo takes a row of its own;
   the two link columns share the row beneath it. */
@media(max-width:760px){
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__mark{grid-column:1 / -1}
}

/* ── phone menu ───────────────────────────────────────────────────
   The open menu was a short shelf: the page ran on beneath it and the
   96%-cream bar let the headline behind show through the logo. It now
   fills the screen below the bar, the bar goes solid while it is open,
   and on the dark home hero the ink logo and ink links come back so
   nothing is cream on cream. Access keeps the exact desktop pill instead
   of inheriting the menu's tall padding, which had rounded it into an
   egg with the dot pressed against the rim. */
@media(max-width:860px){
  .nav.open{bottom:0;overflow:auto;border-bottom:0;
    padding:var(--sp-5) var(--pad) var(--sp-8);background:var(--cream)}
  .hdr:has(.nav.open){background:var(--cream);backdrop-filter:none;box-shadow:none}
  .nav.open a,
  .group-home .hdr.hdr--clear .nav.open a{color:var(--ink)}
  .group-home .hdr.hdr--clear:has(.nav.open) .brand .mark--ink{display:block}
  .group-home .hdr.hdr--clear:has(.nav.open) .brand .mark--light{display:none}
  .group-home .hdr.hdr--clear:has(.nav.open) .burger i{background:var(--ink)}
  .nav.open a.nav-access,
  .group-home .hdr.hdr--clear .nav.open a.nav-access{
    align-self:flex-start;margin-top:var(--sp-5);
    padding:8px 17px 8px 14px;font-size:var(--fs-nav);letter-spacing:var(--tr-nav);
    text-transform:uppercase;font-weight:var(--w-bold);
    color:var(--gold-deep);border-color:var(--gold-55);background:transparent}
}

/* The statement's rule used to stop at the text measure while the base
   rule beneath ran the full width: two lengths, the short one ending in
   air. The rule now lives on a full-width wrapper, so both terminate on
   the same edge; only the text keeps the 52ch measure. */
.ftr__line{margin-top:var(--sp-7);border-top:1px solid var(--ink-10)}
.ftr__what{margin-top:0;border-top:0}

/* ── process on phone and tablet ─────────────────────────────────
   Below 1080px the horizontal line was hidden and the five steps became
   five dots floating in a tall column. The progression now runs
   vertically: a hairline from each dot down to the next, ending on the
   last dot, with the label beside its dot. Same idea as the desktop
   line, turned through ninety degrees, and it still draws in with the
   dots. */
@media(max-width:1080px){
  .process__line{display:none}
  .process__steps{grid-template-columns:1fr;gap:var(--sp-4)}
  .process__step{position:relative;display:grid;grid-template-columns:7px minmax(0,1fr);
    column-gap:var(--sp-4);align-items:start;padding-right:0}
  .process__step i{margin-top:calc(var(--lh-h3) * var(--fs-h3) / 2 - 3.5px)}
  .process__step b{margin-top:0;grid-column:2}
  .process__step p{grid-column:2;max-width:40ch}
  .process__step:not(:last-child)::before{content:"";position:absolute;left:3px;
    top:calc(var(--lh-h3) * var(--fs-h3) / 2);bottom:calc(-1 * var(--sp-4));width:1px;
    background:var(--gold);opacity:0;transition:opacity .9s var(--ease)}
  .process.in .process__step:not(:last-child)::before{opacity:.45}
}

/* The coordination rings on Services are a Figma export stretched over
   the territories section. Below 1100px that section is several screens
   tall, so the export's baked horizontal rule was sliding through the
   middle of a list as a false seam. The rings only compose at desktop
   proportions; phones and tablets go without them. */
@media(max-width:1099px){img.geo[src*="coordination-rings"]{display:none!important}}