/* ==========================================================================
   ABOUT  -  rebuilt to the section architecture of the client's reference
   (flowstatecreative.org/about.html).

   WHAT WAS TAKEN: the structure. Eight sections, the split-editorial opener
   with a vertical photo marquee, the bento + stat band, the hairline service
   grid, the mirrored approach split, the leadership profile/quote/career
   stack, the two counter-running marquee rows, the FAQ.

   WHAT WAS NOT TAKEN: their skin. The reference is teal on navy; this is
   Marble's warm stone and antique gold. Copying a competitor's palette on
   top of their layout is how you end up with their site wearing your logo.

   THE MIRROR IS THE SIGNATURE. Section 1 is text-left / media-right;
   section 4 is media-left / text-right. Both wrap the media in a rounded
   frame with two L-brackets, a slowly spinning dashed ring, a glass badge
   hung off the top-left and a chip off the bottom-right - at the same
   offsets. The repetition is deliberate; the mirror is what stops it
   reading as laziness.

   MOBILE NOTE, and this is the one that is easy to get wrong: the mirror is
   achieved by DOM ORDER, not by `order`. So on a phone section 1 stacks
   text-then-media and section 4 stacks media-then-text. That is the
   reference's behaviour and it is correct - the approach section's photo is
   the thing that explains the section, so it should lead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared vocabulary
   -------------------------------------------------------------------------- */
.ab-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: var(--gold-wash);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.ab-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-light);
  flex: none;
}
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.ab-eyebrow::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
/* headline italic accent - the reference gradients these; a flat gold reads
   better on stone and survives the SplitText problem they had to patch */
.ab-h em { font-style: italic; color: var(--gold-light); }

/* the media frame, its brackets, ring, badge and chip - used by BOTH the
   story and the approach sections, which is the whole point */
.ab-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.ab-brk {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 3;
  pointer-events: none;
  border: 2px solid var(--gold);
  opacity: 0.75;
}
.ab-brk--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.ab-brk--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.ab-ring {
  position: absolute;
  inset: -28px;
  border: 1px dashed var(--border-gold-strong);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .ab-ring { animation: ab-spin 40s linear infinite; }
  @keyframes ab-spin { to { transform: rotate(360deg); } }
}
/* glass badge, top-left, hung outside the frame */
.ab-badge {
  position: absolute;
  top: 24px; left: -22px;
  z-index: 4;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border-gold-strong);
  background: rgba(34, 31, 27, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}
.ab-badge__n {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold-light);
}
.ab-badge__t {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vein);
}
/* pill chip, bottom-right, also hung outside */
.ab-chip {
  position: absolute;
  bottom: -16px; right: -16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-gold-strong);
  background: rgba(34, 31, 27, 0.88);
  backdrop-filter: blur(14px);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}
.ab-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ab-chip::before { animation: ab-pulse 2s ease-in-out infinite; }
  @keyframes ab-pulse { 50% { box-shadow: 0 0 0 5px rgba(184, 145, 88, 0.18); } }
}
/* the badge and chip pull back INSIDE the frame on a phone, or they hang off
   the edge of the viewport */
@media (max-width: 1024px) {
  .ab-badge { left: 16px; }
  .ab-chip { right: 12px; bottom: -14px; }
}
@media (max-width: 480px) {
  .ab-brk { display: none; }
}

/* --------------------------------------------------------------------------
   1. COMPANY STORY  (.cst)  -  text left, vertical photo marquee right
   -------------------------------------------------------------------------- */
.cst { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); overflow: hidden; }
.cst__head { max-width: 52rem; margin: 0 auto clamp(2rem, 1.6rem + 2vw, 3.25rem); text-align: center; }
.cst__h {
  margin-top: clamp(0.9rem, 0.8rem + 0.5vw, 1.3rem);
  font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3.35rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--white);
  text-wrap: balance;
}
.cst__body { display: grid; gap: clamp(2.25rem, 1.8rem + 2.6vw, 4.5rem); align-items: center; }
.cst__lede { font-size: var(--text-lg); line-height: 1.62; color: var(--ink); text-wrap: pretty; }
.cst__lede strong { color: var(--white); font-weight: 600; }
.cst__p { margin-top: 1rem; color: var(--vein); line-height: 1.72; text-wrap: pretty; }
.cst__p b { color: var(--gold-light); font-weight: 600; }
.cst__list { list-style: none; margin-top: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); display: grid; gap: 0.85rem; }
.cst__list li { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; font-size: var(--text-sm); line-height: 1.55; color: var(--ink); }
.cst__tick {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--obsidian);
  margin-top: 0.1rem;
}
.cst__tick svg { width: 12px; height: 12px; }

/* the vertical marquee. Duplicated content + translateY(-50%) = a seamless
   wrap; pauses on hover, and stops entirely under reduced motion. */
.cst__reel { position: relative; height: clamp(24rem, 58vh, 34rem); }
.cst__track { display: grid; gap: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .cst__track { animation: cst-roll 22s linear infinite; }
  .cst__reel:hover .cst__track { animation-play-state: paused; }
  @keyframes cst-roll { to { transform: translateY(-50%); } }
}
.cst__shot { --ph-ar: 4 / 5; }

@media (min-width: 960px) {
  .cst__body { grid-template-columns: 1.1fr 1fr; }
}

/* --------------------------------------------------------------------------
   2. ABOUT THE COMPANY  (.acx)  -  pill, headline, stat band, bento, values
   -------------------------------------------------------------------------- */
.acx { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.acx__head { max-width: 50rem; margin: 0 auto clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem); text-align: center; }
.acx__h {
  margin-top: clamp(0.9rem, 0.8rem + 0.5vw, 1.3rem);
  font-size: clamp(1.85rem, 1.35rem + 2.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--white);
  text-wrap: balance;
}
.acx__sub { margin-top: 1rem; color: var(--vein); line-height: 1.7; text-wrap: pretty; }
.acx__act { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem 1.5rem; margin-top: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); }

/* the stat band: one rounded bar, hairline dividers between */
.acx__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.75rem) clamp(0.75rem, 0.6rem + 0.8vw, 2rem);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--gold-wash), transparent 62%), var(--surface);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}
.acx__stat { text-align: center; padding: 0.85rem 0.5rem; position: relative; }
/* dividers drawn as pseudo-elements so the 2x2 phone layout gets a proper
   cross rather than three stranded verticals - the reference does this too */
.acx__stat:nth-child(odd)::after {
  content: ""; position: absolute; right: 0; top: 18%; bottom: 18%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--border-gold-strong), transparent);
}
.acx__stat:nth-child(-n + 2)::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0;
  height: 1px; background: linear-gradient(90deg, transparent, var(--border-neutral), transparent);
}
.acx__num { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--gold-light); }
.acx__lbl { margin-top: 0.45rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vein); }

/* THE BENTO IS GONE.
   It was five rounded boxes of near-identical weight in a grid - which is
   the shape every AI-assembled "about" section on the internet has, and the
   client named it as such. Boxes also cost twice on a phone, where a grid of
   cards becomes a single column of stacked rectangles with nothing to
   distinguish one from the next.

   What replaces it is type. One claim gets real size and carries the
   section; the four supporting points sit under a gold rule each, with no
   border, no fill and no radius. The only card left on this page is the stat
   band, so it now reads as the one contained object rather than one of six.

   This also fixes a real bug: .abc__bar was a <span>, which is inline, so
   its height:4px was ignored and the fill inside rendered a 321x192 gold
   blob across the cards. Bars are gone entirely with the boxes. */
.acx__lead { margin-top: clamp(2rem, 1.6rem + 2vw, 3.5rem); max-width: 52rem; }
.acx__claim {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.14;
  color: var(--white);
  text-wrap: balance;
}
.acx__claim em { font-style: italic; color: var(--gold-light); }
.acx__leadp { margin-top: 1rem; color: var(--vein); font-size: var(--text-lg); line-height: 1.66; text-wrap: pretty; }
.acx__check { list-style: none; margin-top: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem); display: grid; gap: 0.6rem; }
.acx__check li { display: grid; grid-template-columns: 18px 1fr; gap: 0.7rem; align-items: start; font-size: var(--text-sm); color: var(--ink); }
.acx__check svg { width: 18px; height: 18px; margin-top: 0.18rem; color: var(--gold); }

/* the four supporting points - a rule, a label, a line. No box. */
.acx__points { display: grid; gap: 0; margin-top: clamp(2rem, 1.6rem + 2vw, 3.25rem); }
.acp { position: relative; padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem) 0; border-top: 1px solid var(--border-neutral); }
/* the gold rule draws in as the point arrives - it sits ON the border above,
   so it replaces it rather than adding a second line */
.acp::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.acp.is-visible::before { transform: scaleX(1); }
.acp__n { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); font-variant-numeric: tabular-nums; }
.acp__h { margin-top: 0.45rem; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--white); text-wrap: balance; }
.acp__p { margin-top: 0.4rem; color: var(--vein); font-size: var(--text-sm); line-height: 1.6; text-wrap: pretty; }

@media (min-width: 760px) {
  .acx__points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem); }
}
@media (min-width: 1080px) {
  .acx__points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   VALUES  (.val)  -  rebuilt from scratch
   The previous version was broken: .abv was `grid-template-columns: 40px 1fr`
   with THREE children, so the icon took column 1, the heading column 2, and
   the paragraph wrapped onto row 2 back in the 40px column - rendering one
   word per line. That is why it is a vertical stack now with a single column:
   there is no second track for a child to fall into, so it cannot recur.

   No boxes, matching the rest of the section. A hairline separates each value
   from the next on desktop; on a phone they stack with a rule between.
   -------------------------------------------------------------------------- */
.acx__values {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  padding-top: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  border-top: 1px solid var(--border-gold);
}
.val {
  display: grid;               /* ONE column. Nothing can land beside anything. */
  gap: 0.7rem;
  padding: clamp(1.15rem, 1rem + 0.7vw, 1.6rem) 0;
  border-top: 1px solid var(--border-neutral);
}
.acx__values > .val:first-child { border-top: 0; }
.val__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border-gold);
  background: var(--gold-wash);
  color: var(--gold-light);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.val:hover .val__icon { background: var(--gold); color: var(--obsidian); }
.val__icon svg { width: 17px; height: 17px; }
.val__h {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
}
.val__p {
  color: var(--vein);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 26rem;            /* a measure, so the line never runs long */
  text-wrap: pretty;
}

@media (min-width: 700px) {
  .acx__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acx__stat:nth-child(-n + 2)::before { display: none; }
  .acx__stat:last-child::after { display: none; }
  .acx__stat:nth-child(even)::after {
    content: ""; position: absolute; right: 0; top: 18%; bottom: 18%;
    width: 1px; background: linear-gradient(180deg, transparent, var(--border-gold-strong), transparent);
  }
  .acx__values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem); }
  .acx__values > .val:nth-child(2) { border-top: 0; }
}
@media (min-width: 980px) {
  .acx__bento { grid-template-columns: repeat(12, 1fr); }
  .abc--wide { grid-column: span 7; }
  .abc--tall { grid-column: span 5; }
  .abc--third { grid-column: span 4; }
  .acx__values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* four across: the rule belongs between the columns, not above each item */
  .val { border-top: 0; padding-top: 0; }
  .val + .val { border-left: 1px solid var(--border-neutral); padding-left: clamp(1.25rem, 1rem + 1vw, 2rem); }
  .acx__values { column-gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
}

/* --------------------------------------------------------------------------
   3. SERVICES  (.svg6)  -  a hairline grid, NOT cards
   The reference uses card boxes for every other block on the page and
   hairlines exactly once. That scarcity is what gives it force, so it is
   reproduced here as the only un-carded section on the page.
   -------------------------------------------------------------------------- */
.svg6 { padding-block: clamp(4rem, 3.1rem + 4vw, 7rem); }
.svg6__head { display: grid; gap: 2rem; padding-bottom: clamp(2rem, 1.6rem + 1.4vw, 3rem); border-bottom: 1px solid var(--border-gold); margin-bottom: clamp(2.75rem, 2.2rem + 2.2vw, 4.25rem); }
.svg6__h { margin-top: 1.1rem; font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.9rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.08; color: var(--white); text-wrap: balance; }
.svg6__lead { color: var(--vein); line-height: 1.7; text-wrap: pretty; }
.svg6__cta { margin-top: 1.6rem; }
.svg6__grid { display: grid; gap: 0; }
/* The inline clamp used to read clamp(0, 0.5vw, 1.5rem). A UNITLESS zero is
   not allowed inside a math function alongside lengths, so the whole padding
   shorthand was invalid and every cell computed to padding: 0 - which is why
   the icon chips sat flat against the row rules with no breathing room. */
.svi { position: relative; padding: clamp(2.1rem, 1.7rem + 1.6vw, 3.25rem) clamp(0rem, 0.5vw, 1.5rem); }
/* the cell rules, drawn as insets so they fade rather than butt into the edge */
.svi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-neutral) 18%, var(--border-neutral) 82%, transparent);
}
.svi__chip { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 1.35rem; border-radius: 14px; border: 1px solid var(--border-gold); background: var(--gold-wash); color: var(--gold-light); transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.svi:hover .svi__chip { transform: rotate(-4deg) scale(1.06); background: var(--gold); color: var(--obsidian); }
.svi__chip svg { width: 20px; height: 20px; }
.svi__n { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.svi__h { margin-top: 0.55rem; font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.22rem); font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
.svi__h::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 0.55rem; border-radius: 2px; background: var(--gold); transition: width var(--dur) var(--ease-out); }
.svi:hover .svi__h::after { width: 60px; }
.svi__p { margin-top: 0.9rem; color: var(--vein); font-size: var(--text-sm); line-height: 1.66; text-wrap: pretty; }

@media (min-width: 760px) {
  .svg6__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: clamp(2rem, 1.6rem + 2vw, 3.75rem); }
  .svg6__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem); }
  .svi:nth-child(odd)::after {
    content: ""; position: absolute; right: calc(clamp(1.5rem, 1.2rem + 1.5vw, 3rem) / -2); top: 44px; bottom: 44px;
    width: 1px; background: linear-gradient(180deg, transparent, var(--border-neutral), transparent);
  }
}
@media (min-width: 1080px) {
  .svg6__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svi:nth-child(odd)::after { display: none; }
  .svi:not(:nth-child(3n))::after {
    content: ""; position: absolute; right: calc(clamp(1.5rem, 1.2rem + 1.5vw, 3rem) / -2); top: 44px; bottom: 44px;
    width: 1px; background: linear-gradient(180deg, transparent, var(--border-neutral), transparent);
  }
}

/* --------------------------------------------------------------------------
   4. APPROACH  (.aprx)  -  media LEFT, text RIGHT. The mirror of section 1.
   -------------------------------------------------------------------------- */
.aprx { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); overflow: hidden; }
.aprx__top { display: grid; gap: clamp(2.25rem, 1.8rem + 2.6vw, 4rem); align-items: center; }
.aprx__h { margin-top: 0.9rem; font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.9rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.08; color: var(--white); text-wrap: balance; }
.aprx__p { margin-top: 1rem; color: var(--vein); line-height: 1.72; text-wrap: pretty; }
.aprx__p b { color: var(--gold-light); font-weight: 600; }
.aprx__shot { --ph-ar: 4 / 3.4; }
.aprx__cards { display: grid; gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem); margin-top: clamp(2rem, 1.6rem + 1.8vw, 3rem); }
.aprc { position: relative; padding: clamp(1.25rem, 1.05rem + 0.9vw, 2rem) clamp(1.25rem, 1.05rem + 0.9vw, 2rem) clamp(2rem, 1.7rem + 1.2vw, 2.6rem); border: 1px solid var(--border-neutral); border-radius: 20px; background: var(--surface); transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.aprc:hover { transform: translateY(-6px); border-color: var(--border-gold-strong); }
.aprc__n { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); font-variant-numeric: tabular-nums; }
.aprc__h { margin-top: 0.45rem; font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
.aprc__p { margin-top: 0.5rem; color: var(--vein); font-size: var(--text-sm); line-height: 1.62; text-wrap: pretty; }
/* the accent bar pinned bottom-left, growing on hover */
.aprc__bar { position: absolute; left: 1.5rem; bottom: 1.15rem; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); transition: width var(--dur) var(--ease-out); }
.aprc:hover .aprc__bar { width: 68px; }

@media (min-width: 960px) {
  .aprx__top { grid-template-columns: 1fr 1.1fr; }
  .aprx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   5. LEADERSHIP  (.ldr)  -  profile card + pull quote + careers block
   -------------------------------------------------------------------------- */
.ldr { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.ldr__head { max-width: 46rem; margin: 0 auto clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); text-align: center; }
.ldr__h { margin-top: 0.9rem; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--white); text-wrap: balance; }
.ldr__sub { margin-top: 0.9rem; color: var(--vein); line-height: 1.7; }
.ldr__grid { display: grid; gap: clamp(1rem, 0.85rem + 0.8vw, 1.75rem); }

.prof { position: relative; padding: clamp(1.25rem, 1.05rem + 0.9vw, 1.85rem); border: 1px solid var(--border-gold); border-radius: 20px; background: linear-gradient(180deg, var(--gold-wash), transparent 55%), var(--surface); }
.prof__idx { position: absolute; top: 1rem; right: 1rem; z-index: 3; padding: 0.2rem 0.55rem; border-radius: 8px; border: 1px solid var(--border-gold); background: rgba(34, 31, 27, 0.8); backdrop-filter: blur(10px); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-light); }
.prof__shot { --ph-ar: 4 / 3.5; border-radius: 14px; overflow: hidden; }
.prof__badge { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-gold-strong); background: rgba(34, 31, 27, 0.86); backdrop-filter: blur(12px); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.prof__media { position: relative; }
.prof__name { margin-top: 1.1rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.022em; color: var(--white); }
.prof__role { margin-top: 0.2rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.prof__meta { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.prof__meta li { display: grid; grid-template-columns: 16px 1fr; gap: 0.6rem; align-items: center; font-size: var(--text-sm); color: var(--vein); }
.prof__meta svg { width: 15px; height: 15px; color: var(--gold); }
.prof__bio { margin-top: 0.9rem; color: var(--vein); font-size: var(--text-sm); line-height: 1.66; text-wrap: pretty; }
.prof__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border-neutral); }
.prof__stat { text-align: center; }
.prof__stat + .prof__stat { border-left: 1px solid var(--border-neutral); }
.prof__sn { font-size: 1.2rem; font-weight: 700; color: var(--gold-light); letter-spacing: -0.02em; }
.prof__sl { margin-top: 0.15rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vein); line-height: 1.4; }

.ldr__right { display: grid; gap: clamp(1rem, 0.85rem + 0.8vw, 1.5rem); align-content: start; }
/* .pq  -  the founder pull-quote, rebuilt to the reference:
   a small solid open-quote above the line, the quote itself set BOLD, a short
   left-aligned rule closed by a dot, a signature-weight name, and the big
   ghost quote mark sitting inside a dashed ring in the top right.

   The reference sets the name in a script face. Marble loads Inter and only
   Inter, and the site's own accent voice is the gold italic it already uses
   in every heading - so the name is set in that italic rather than pulling a
   second web font down for four words. */
.pq {
  position: relative;
  padding: clamp(1.6rem, 1.3rem + 1.2vw, 2.6rem);
  border: 1px solid var(--border-neutral);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--surface-2), var(--obsidian-raised) 72%);
  overflow: hidden;
}
/* the gradient edge bar down the left */
.pq::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-shadow));
}
/* the dashed ring the big mark sits in */
.pq::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -26px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px dashed var(--border-gold-strong);
  opacity: 0.55;
  pointer-events: none;
}
.pq__mark {
  position: absolute;
  top: -26px;
  right: 18px;
  font-size: 8rem;
  line-height: 1;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}
/* the small solid mark that opens the quote */
.pq__open {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 2.6rem;
  line-height: 0.6;
  font-weight: 700;
  color: var(--gold);
}
.pq__t {
  position: relative;
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: -0.012em;
  color: var(--white);
  text-wrap: pretty;
}
/* short rule, then the dot - not a full-width divider */
.pq__div { display: flex; align-items: center; gap: 0.55rem; margin: 1.35rem 0 1rem; }
.pq__div i { height: 1px; width: 54px; flex: none; background: linear-gradient(90deg, var(--border-gold-strong), transparent); }
.pq__div span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pq__name {
  font-size: clamp(1.4rem, 1.28rem + 0.5vw, 1.75rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--white);
}
.pq__role { margin-top: 0.3rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vein); }

.car { padding: clamp(1.25rem, 1.05rem + 0.9vw, 1.85rem); border: 1px solid var(--border-neutral); border-radius: 18px; background: var(--surface); }
.car__head { display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--border-neutral); }
.car__tile { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border-gold); background: var(--gold-wash); color: var(--gold-light); }
.car__tile svg { width: 20px; height: 20px; }
.car__h { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.car__sub { margin-top: 0.2rem; font-size: var(--text-sm); color: var(--vein); }
.car__list { list-style: none; display: grid; gap: 0.5rem; margin: 1rem 0; }
.car__row { display: grid; grid-template-columns: 34px 1fr; gap: 0.75rem; align-items: center; padding: 0.6rem; border-radius: 12px; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.car__row:hover { background: var(--gold-wash); transform: translateX(4px); }
.car__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-gold); color: var(--gold-light); }
.car__ico svg { width: 16px; height: 16px; }
.car__rt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); }
.car__rp { margin-top: 0.1rem; font-size: 0.78rem; color: var(--vein); line-height: 1.5; }

@media (min-width: 980px) {
  .ldr__grid { grid-template-columns: 5fr 7fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   6. LIFE AT MARBLE  (.mom)  -  two rows running opposite ways
   -------------------------------------------------------------------------- */
.mom { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); overflow: hidden; }
.mom__head { max-width: 46rem; margin: 0 auto clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); text-align: center; }
.mom__h { margin-top: 0.9rem; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.mom__sub { margin-top: 0.9rem; color: var(--vein); line-height: 1.7; }
/* edge masks so the rows dissolve rather than butting into the gutter */
.mom__row { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); }
.mom__row + .mom__row { margin-top: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem); }
.mom__track { display: flex; gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem); width: max-content; }
.mom__tile { flex: none; width: clamp(10.5rem, 8rem + 12vw, 16rem); }
.mom__tile .ph { --ph-ar: 4 / 3; }
@media (prefers-reduced-motion: no-preference) {
  .mom__row--l .mom__track { animation: mom-l 45s linear infinite; }
  .mom__row--r .mom__track { animation: mom-r 50s linear infinite; }
  .mom__row:hover .mom__track { animation-play-state: paused; }
  @keyframes mom-l { to { transform: translate3d(-50%, 0, 0); } }
  @keyframes mom-r { from { transform: translate3d(-50%, 0, 0); } to { transform: none; } }
}

/* --------------------------------------------------------------------------
   7. FAQ  (.faqx)  -  sticky left rail beside the accordion
   -------------------------------------------------------------------------- */
.faqx { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.faqx__grid { display: grid; gap: clamp(1.5rem, 1.25rem + 1.4vw, 3.5rem); }
.faqx__h { margin-top: 0.9rem; font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.9rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.06; color: var(--white); text-wrap: balance; }
.faqx__sub { margin-top: 0.9rem; color: var(--vein); line-height: 1.7; text-wrap: pretty; }
@media (min-width: 860px) {
  .faqx__grid { grid-template-columns: 20rem 1fr; }
  .faqx__left { position: sticky; top: clamp(6rem, 12vh, 9rem); align-self: start; }
}