/* ============================ ABOUT (World 1) ============================
   Everything below the about hero. Loaded after motion.css and before a11y-focus.css, so the
   shared focus layer still wins. The hero (.about-hero) is untouched and styled by style.css.

   The page after the hero is one warm-white surface: Inter, restrained weights, hairlines and air.
   Glass appears once (the small caption on the portrait). Orange appears as the section point of
   each .sec-mark and as the index of the four values. Azure is a hairline and a hover.
   ============================================================================== */

.main-about{--ab-muted:#5B6478;--ab-faint:#6A7180;--ab-az:#1E7BE6;--ab-az-line:rgba(35,135,232,.26)}
.ab-wrap{width:var(--wrap);margin:0 auto}
.main-about .sec-mark.ab-mark{width:auto}

/* ---- typography: the World 1 / Concierge system. Every rule below sets its own size, weight, tracking and colour,
   so nothing inherits the body weight (500) or the global -.03em span/p tracking from style.css. ---- */
.main-about .ab-story-copy p{font-size:17px;font-weight:400;line-height:1.58;letter-spacing:-.014em;color:var(--ab-muted);max-width:520px;text-wrap:pretty}
.main-about .ab-story-copy p+p{margin-top:18px}
.main-about .ab-story-h{font-size:44px;font-weight:400;line-height:1.08;letter-spacing:-.036em;color:var(--ink);max-width:560px;text-wrap:balance}
.main-about .ab-h2{font-size:44px;font-weight:400;line-height:1.08;letter-spacing:-.036em;color:var(--ink)}

/* ============================ STORY ============================ */
.ab-story{position:relative;z-index:4;background:var(--bg);padding:120px 0 0}
.ab-story-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:0 clamp(40px,6vw,96px);align-items:start}

/* portrait: 3:4, soft radius, one thin optical edge. The frame is the only surface with a shadow on the page. */
.ab-portrait{position:relative;margin:0}
.ab-portrait-frame{position:relative;aspect-ratio:1086/1448;border-radius:22px;overflow:hidden;background:#141414;
  box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 2px rgba(150,200,255,.24),0 30px 70px rgba(6,26,54,.14)}
.ab-portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
/* the optical edge: a hairline of light on the top-left of the frame, drawn once, never a full border */
.ab-portrait-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.10)}
/* the one glass plane: a small caption on the portrait, the concierge material on a dark ground */
.ab-portrait-cap{position:absolute;left:22px;bottom:22px;display:flex;flex-direction:column;gap:3px;padding:12px 16px 13px;border-radius:14px;
  background:var(--glass-bg-on-dark);box-shadow:var(--glass-rim-sm);-webkit-backdrop-filter:var(--glass-blur-m);backdrop-filter:var(--glass-blur-m);color:var(--ink)}
.ab-portrait-cap b{font-size:14.5px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.ab-portrait-cap small{font-size:12px;font-weight:400;letter-spacing:-.008em;line-height:1.3;color:var(--ab-muted)}

/* text column: starts lower than the portrait, ends earlier. The registration point (.sec-mark) sits at the top. */
.ab-story-text{padding-top:96px;padding-bottom:40px}
.ab-story-text .ab-story-h{margin-top:26px}
.ab-story-copy{margin-top:30px}
.ab-sig{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;max-width:520px}
.ab-sig-name{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.ab-sig-role{font-size:13px;font-weight:400;color:var(--ab-faint);letter-spacing:-.008em}

/* three quiet facts: hairlines and type, no boxes */
.ab-facts{list-style:none;margin:96px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.ab-facts li{position:relative;padding:28px 40px 6px 0}
.ab-facts li+li{padding-left:40px;border-left:1px solid var(--line)}
.ab-facts b{display:block;font-size:26px;font-weight:450;line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.ab-facts span{display:block;margin-top:12px;font-size:14px;font-weight:400;line-height:1.55;letter-spacing:-.012em;color:var(--ab-muted);max-width:340px}

/* ============================ VALUES ============================ */
.ab-values{position:relative;z-index:4;background:var(--bg);padding:150px 0 0}
.ab-values-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px,6vw,96px);align-items:start}
.ab-values-head{position:sticky;top:120px}
.ab-values-head .ab-h2{margin-top:22px}
.ab-values-lead{margin-top:18px;max-width:360px;font-size:16px;font-weight:400;line-height:1.55;letter-spacing:-.014em;color:var(--ab-muted)}
.ab-values-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.ab-values-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 24px;padding:30px 0 32px;border-bottom:1px solid var(--line)}
.ab-idx{padding-top:7px;font-size:12px;font-weight:500;letter-spacing:.06em;line-height:1;font-variant-numeric:tabular-nums;color:#B83E0D}   /* the signature orange darkened for 12px text: 5.0:1 on white, the brand #FF5A1F stops at 3.0 */
.ab-value h3{font-size:22px;font-weight:450;line-height:1.2;letter-spacing:-.028em;color:var(--ink);transition:color .28s var(--ease)}
.ab-value p{margin-top:10px;font-size:15px;font-weight:400;line-height:1.6;letter-spacing:-.012em;color:var(--ab-muted);max-width:560px;text-wrap:pretty}
@media (hover:hover) and (pointer:fine){
  .ab-values-list li:hover .ab-value h3{color:var(--ab-az)}
}

/* the one closing statement: an azure hairline above, indented to the values column */
.ab-philosophy{margin:110px 0 0;padding-top:34px;border-top:1px solid var(--ab-az-line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px,6vw,96px)}
.ab-philosophy-lead{grid-column:2;font-size:32px;font-weight:400;line-height:1.18;letter-spacing:-.036em;color:var(--ink);max-width:720px;text-wrap:balance}
.ab-philosophy-p{grid-column:2;margin-top:20px;font-size:16px;font-weight:400;line-height:1.55;letter-spacing:-.014em;color:var(--ab-muted);max-width:520px}

/* ============================ ENDING ============================ */
.final.ab-end{padding-top:150px}
.ab-end .final-h{max-width:820px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1199px){
  .main-about .ab-story-h,.main-about .ab-h2{font-size:38px}
  .ab-philosophy-lead{font-size:28px}
}
@media (max-width:900px){
  .ab-story{padding-top:72px}
  .ab-story-grid{grid-template-columns:1fr;gap:0}
  .ab-portrait{max-width:520px}
  .ab-portrait-frame{border-radius:18px}
  .ab-portrait-cap{left:16px;bottom:16px}
  .ab-story-text{padding-top:36px;padding-bottom:0;max-width:560px}
  .ab-story-text .ab-story-h{margin-top:20px}
  .main-about .ab-story-h,.main-about .ab-h2{font-size:32px;line-height:1.1}
  .main-about .ab-story-copy p{font-size:16px}
  .ab-facts{margin-top:64px;grid-template-columns:1fr;border-top:1px solid var(--line)}
  .ab-facts li{padding:22px 0}
  .ab-facts li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .ab-facts b{font-size:22px}
  .ab-facts span{margin-top:8px}
  .ab-values{padding-top:96px}
  .ab-values-grid{grid-template-columns:1fr;gap:0}
  .ab-values-head{position:static}
  .ab-values-list{margin-top:36px}
  .ab-values-list li{grid-template-columns:40px minmax(0,1fr);gap:0 14px;padding:24px 0 26px}
  .ab-idx{padding-top:5px}
  .ab-value h3{font-size:20px}
  .ab-philosophy{margin-top:72px;padding-top:28px;grid-template-columns:1fr;gap:0}
  .ab-philosophy-lead,.ab-philosophy-p{grid-column:1}
  .ab-philosophy-lead{font-size:26px}
  .final.ab-end{padding-top:96px}
  .ab-end .final-h .dark{display:block}   /* style.css hides the <br> here; the question keeps its own line */
}
@media (max-width:480px){
  .ab-story{padding-top:56px}
  .main-about .ab-story-h,.main-about .ab-h2{font-size:29px}
  .ab-philosophy-lead{font-size:24px}
}

/* reduced motion: nothing here animates on its own; the shared [data-reveal] rule already lands in place.
   The hover colour change is the only transition, and it is dropped here too. */
@media (prefers-reduced-motion:reduce){
  .ab-value h3{transition:none}
}

/* ------------------------------------------------------------------------
   The portrait, brought onto the service cards' material and cut back in size.
   Three changes: the frame takes the same sheet of gallery glass the service
   images sit behind (a 1px optical edge, a small specular in the top-left and
   a light wash off the top) instead of its own white ring; the aspect follows
   the new photograph at 1122/1402; and the whole thing is 25% narrower, 509px
   against the 678px it filled before, so it sits beside the text rather than
   competing with it.
   ------------------------------------------------------------------------ */
.ab-portrait{max-width:509px}
.ab-portrait-frame{aspect-ratio:1122/1402;border-radius:22px;
  box-shadow:var(--glass-rim-flat,0 0 0 1px rgba(150,200,255,.30),0 18px 44px rgba(6,26,54,.13));
  isolation:isolate}
.ab-portrait-frame img{object-position:50% 22%}
/* the glass itself: the same recipe as .svc-glass .svc-media::after */
.ab-portrait-frame::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.42);
  background:radial-gradient(42% 30% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 62%),
             linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 14%)}
@media (max-width:900px){
  .ab-portrait{max-width:420px}
}

/* ---- the growth film in the about hero (world 1 only): a locked-off timelapse that plays once and
   settles on the mature tree. The still under it is the end frame by default (no JS, reduced motion,
   save-data, a load error or blocked autoplay all show the grown tree); with motion allowed the inline
   script swaps the still to the seedling before first paint, so the page never shows the mature tree
   first. Phones keep the full 16:9 frame (the whole tree stays visible) and the copy moves below it. */
.about-tree{position:absolute;inset:0}
.about-tree img,.about-tree video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 60%}
.about-tree video{opacity:0;transition:opacity .6s ease}
.about-tree video.live{opacity:1}
.about-tree-toggle{position:absolute;right:20px;bottom:20px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,10,.45);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.about-tree-toggle svg{width:16px;height:16px}
.about-tree-toggle .i-play{display:none}
.about-tree-toggle[aria-pressed="true"] .i-play{display:block}
.about-tree-toggle[aria-pressed="true"] .i-pause{display:none}
.about-tree-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Phones: a portrait frame that fills the screen. The film here is the vertical cut, so the whole
   tree is in view without letterboxing, and the copy sits on top of the meadow over a bottom scrim
   instead of in a separate slab underneath. The card is capped at the visible viewport height so a
   short phone crops the sky rather than pushing the heading off screen. */
@media (max-width:767px){
  .about-hero{padding:12px 12px 0}
  /* height, not aspect-ratio: an aspect-ratio with a max-height makes the browser shrink the WIDTH
     instead of cropping, which left the card floating in a gutter. A fixed height keeps it full
     width and lets object-fit do the cropping. */
  .about-hero-card{height:80vh;height:80svh;min-height:500px;max-height:720px;aspect-ratio:auto;border-radius:26px;display:block}
  .about-tree{position:absolute;inset:0;aspect-ratio:auto}
  /* the crown sits high in the frame so the lower half is open meadow for the copy */
  .about-tree img,.about-tree video{object-position:50% 18%}
  /* the copy sits on the meadow, so the scrim reaches up to just under the crown and is dense
     where the heading is: white on a sunlit canopy is not readable */
  .about-hero-shade{display:block;opacity:1;background:linear-gradient(0deg,rgba(4,10,7,.92) 0%,rgba(4,10,7,.82) 16%,rgba(4,10,7,.62) 30%,rgba(4,10,7,.34) 44%,rgba(4,10,7,.12) 56%,rgba(4,10,7,0) 68%)}
  .about-hero-inner{position:absolute;left:22px;right:22px;top:auto;bottom:26px;padding:0}
  .main-about .about-hero-inner .pg-h1,.main-about .about-hero-inner .h80{font-size:27px;line-height:1.16;letter-spacing:-.02em}
  /* On a sunlit canopy the grey half of the heading disappears, and pure white alone still floats.
     The fix is contrast at the glyph edge, not more veil over the photograph: the dimmed half is
     lifted close to white and every line gets one soft, low shadow. */
  .main-about .about-hero-inner .pg-h1 .dim{color:rgba(255,255,255,.90)}
  .main-about .about-hero-inner .pg-h1,.main-about .about-hero-inner .about-hero-sub,
  .main-about .about-hero-inner .pg-eyebrow,.main-about .about-hero-inner .hero-trust{text-shadow:0 1px 18px rgba(3,8,5,.55),0 1px 3px rgba(3,8,5,.35)}
  .main-about .about-hero-inner .pg-eyebrow{margin-bottom:10px}
  .about-hero-sub{margin-top:12px;font-size:15px;line-height:21px}
  .main-about .about-hero-inner .hero-trust{margin-top:16px}
  .about-tree-toggle{right:14px;top:14px;bottom:auto}
}
@media (prefers-reduced-motion:reduce){.about-tree video{display:none}.about-tree-toggle{display:none}}
/* the copy sits bottom-left, clear of the trunk (58 percent across) and the crown; the shade is a
   left-and-bottom scrim instead of a flat 40 percent veil, so the tree keeps its light */
@media (min-width:768px){
  .main-about .about-hero-inner{top:auto;bottom:64px;left:60px;right:auto;max-width:560px}
  .main-about .about-hero-inner .h80{font-size:64px;line-height:1.05;max-width:560px}
  .main-about .about-hero-inner .pg-h1{font-size:clamp(44px,3.7vw,56px);max-width:820px}
  .main-about .about-hero-inner{max-width:820px}
  .main-about .about-hero-sub{margin-top:22px;max-width:400px}
  .main-about .about-hero-inner .hero-trust{margin-top:28px}
  .main-about .about-hero-shade{opacity:1;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 62%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 52%)}
  .about-tree-toggle{right:84px;bottom:20px}
}