/* ==========================================================================
   Page:        About Rinncrest
   Route:       /about (about/index.html)
   Loads after: tailwind.css, site.css, launch.css, corporate.css
   Scope:       everything is prefixed .ab-*; reuses --navy, --forest, --teal,
                --mist, --line, --muted, --midnight and the --ab-* tokens below.
   Sections:    Tokens · Section frame · Hero · Who we are · Model ·
                Different · Mission · Leadership · Company facts ·
                Two ways in · FAQs · Motion · Responsive · Reduced motion
   ========================================================================== */

/* ---------- Tokens ---------- */
.ab-main{--ab-soft:#4d5f70;--ab-mint:#e3f2ee;--ab-mint-line:#bfe0d8;--ab-glow:#43d1b4;--ab-glow-soft:#81d4c9;--ab-on-dark:#c3d4dc;--ab-on-dark-line:rgba(255,255,255,.16)}

/* ---------- Section frame ---------- */
.ab-section{padding:104px 0;scroll-margin-top:96px}
.ab-section h2{margin:0;color:var(--navy);font-size:clamp(30px,3.3vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.ab-section h3{margin:0;color:var(--navy);font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.ab-lede{margin:18px 0 0;max-width:60ch;color:var(--ab-soft);font-size:clamp(17px,1.35vw,19px);line-height:1.65;text-wrap:pretty}
.ab-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 72px;align-items:end}
.ab-split .ab-lede-top{margin:0}
.ab-split-wide{align-items:start}
.ab-split-head{position:sticky;top:128px}
.ab-split-head .text-link{margin-top:14px}
.ab-main p a:not(.button):not(.text-link),.ab-main dd a{color:var(--forest);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--forest) 35%,transparent);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
.ab-main p a:not(.button):not(.text-link):hover,.ab-main dd a:hover{text-decoration-color:currentColor}
.ab-nowrap{white-space:nowrap}
.ab-num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- Hero ---------- */
.ab-hero{position:relative;overflow:hidden;isolation:isolate;padding:76px 0 96px;background:var(--mist);border-bottom:1px solid var(--line)}
.ab-hero:before{content:"";position:absolute;z-index:-1;right:-170px;top:-210px;width:640px;height:640px;border:64px solid color-mix(in srgb,var(--teal) 13%,transparent);border-left-color:transparent;border-radius:50%;transform:rotate(-24deg)}
.ab-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:64px;align-items:end}
.ab-hero h1{margin:0;max-width:15ch;color:var(--navy);font-size:clamp(42px,5.5vw,76px);font-weight:700;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.ab-accent{display:block;color:var(--forest)}
.ab-hero-lead{margin:30px 0 0;max-width:58ch;color:var(--ab-soft);font-size:clamp(17px,1.4vw,19.5px);line-height:1.65;text-wrap:pretty}
.ab-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px;margin-top:36px}
.ab-hero-actions .text-link{font-size:15px}
.ab-hero-actions .text-link .icon{width:18px;height:18px;transition:transform .2s}
.ab-hero-actions .text-link:hover .icon{transform:translateX(3px)}
.ab-hero-panel{padding:32px;border:1px solid var(--line);border-radius:20px;background:#fff;scroll-margin-top:120px}
.ab-ambition{margin:0;color:var(--navy);font-size:clamp(20px,1.8vw,24px);font-weight:500;line-height:1.38;letter-spacing:-.015em;text-wrap:pretty}
.ab-ambition strong{color:var(--forest);font-weight:700}
.ab-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0 0;padding:26px 0 0;border-top:1px solid var(--line);list-style:none}
.ab-stat{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:14px;background:var(--ab-mint)}
.ab-stat strong{color:var(--forest);font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.ab-stat strong.ab-num{font-weight:600;letter-spacing:-.04em}
.ab-stat span{color:var(--navy);font-size:14.5px;line-height:1.4}

/* ---------- Who we are ---------- */
.ab-who{background:#fff}
.ab-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:56px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.ab-role{display:flex;flex-direction:column;gap:12px;padding:34px 32px 32px;scroll-margin-top:120px}
.ab-role+.ab-role{border-left:1px solid var(--line)}
.ab-role-co{background:var(--ab-mint)}
.ab-role-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.ab-role-co .ab-role-head{border-color:var(--ab-mint-line)}
.ab-role-icon{display:inline-flex;flex:none;color:var(--forest)}
.ab-role-icon .icon{width:28px;height:28px}
.ab-role h3{font-size:26px;line-height:1.15}
.ab-role p{margin:0;color:var(--ab-soft);font-size:15.5px;line-height:1.6}
.ab-role .ab-role-what{color:var(--navy);font-size:16px;font-weight:600;line-height:1.5}
.ab-role-link{align-self:flex-start;margin-top:auto}
.ab-role-link .icon{width:18px;height:18px;transition:transform .2s}
.ab-role-link:hover .icon{transform:translateX(3px)}
.ab-role:target{box-shadow:inset 0 0 0 2px var(--teal)}

/* ---------- Model ---------- */
.ab-model{background:var(--navy);color:#fff}
.ab-model h2,.ab-model h3{color:#fff}
.ab-model .ab-lede{color:var(--ab-on-dark)}
.ab-layers{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:64px 0 0;padding:0;list-style:none}
.ab-layers:before{content:"";position:absolute;left:24px;right:0;top:24px;height:1px;background:linear-gradient(90deg,var(--ab-glow),color-mix(in srgb,var(--ab-glow) 18%,transparent));transform-origin:left center}
.ab-layer{position:relative;display:flex;flex-direction:column;gap:12px}
.ab-layer-n{position:relative;display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border:1.5px solid var(--ab-glow);border-radius:50%;background:var(--navy);color:var(--ab-glow);font:600 14px/1 'IBM Plex Mono',monospace}
.ab-layer h3{font-size:23px;line-height:1.2}
.ab-layer p{margin:0;max-width:34ch;color:var(--ab-on-dark);font-size:16px;line-height:1.6}
.ab-model-close{display:flex;align-items:flex-start;gap:18px;margin:64px 0 0;padding-top:34px;border-top:1px solid var(--ab-on-dark-line);color:var(--ab-on-dark);font-size:clamp(19px,1.9vw,25px);font-weight:500;line-height:1.4;letter-spacing:-.015em;text-wrap:pretty}
.ab-model-close strong{color:#fff;font-weight:700}
.ab-model-close .icon{width:30px;height:30px;margin-top:2px;color:var(--ab-glow)}
.ab-model :focus-visible{outline-color:var(--ab-glow)}

/* ---------- Different ---------- */
.ab-different{background:#fff}
.ab-diffs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line);scroll-margin-top:120px}
.ab-diff{padding:34px 36px 38px 0;border-bottom:1px solid var(--line)}
.ab-diff:nth-child(even){padding:34px 0 38px 36px;border-left:1px solid var(--line)}
.ab-diff h3{font-size:21px;line-height:1.3}
.ab-diff h3:before{content:"";display:block;width:28px;height:3px;margin-bottom:20px;border-radius:2px;background:var(--teal)}
.ab-diff p{margin:12px 0 0;color:var(--ab-soft);font-size:16px;line-height:1.65}

/* ---------- Mission ---------- */
.ab-mission{padding:112px 0;background:var(--ab-mint);border-block:1px solid var(--ab-mint-line);scroll-margin-top:96px}
.ab-mission-inner{max-width:1000px;margin:0}
.ab-mission-mark{display:block;width:44px;height:33px;margin-bottom:30px;fill:var(--teal)}
.ab-mission blockquote{margin:0}
.ab-mission h2{margin:0;color:var(--navy);font-size:clamp(28px,3.5vw,48px);font-weight:600;line-height:1.18;letter-spacing:-.03em;text-wrap:balance}
.ab-mission figcaption{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--forest);font-size:15px;font-weight:700}
.ab-mission figcaption:before{content:"";width:32px;height:2px;background:currentColor}

/* ---------- Leadership ---------- */
.ab-leadership{background:#fff}
.ab-people{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ab-person{display:grid;grid-template-columns:72px minmax(0,1fr);gap:26px;padding:34px 0;border-bottom:1px solid var(--line)}
.ab-initials{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--forest);color:#fff;font-size:23px;font-weight:600;letter-spacing:.02em}
.ab-initials-alt{background:var(--navy)}
.ab-person-body{min-width:0;align-self:center}
.ab-person h3{font-size:25px;line-height:1.2}
.ab-person-role{margin:6px 0 0;color:var(--forest);font-size:15.5px;font-weight:600;line-height:1.5}
.ab-person-bio{margin:16px 0 0;max-width:64ch;color:var(--ab-soft);font-size:16px;line-height:1.7;text-wrap:pretty}
.ab-person-note{margin:12px 0 0}

/* ---------- Company facts ---------- */
.ab-facts{background:var(--mist);border-top:1px solid var(--line)}
.ab-facts-list{margin:0;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
.ab-fact{display:grid;grid-template-columns:minmax(150px,.38fr) minmax(0,1fr);gap:6px 28px;padding:18px 28px;scroll-margin-top:120px;transition:background-color .3s}
.ab-fact+.ab-fact{border-top:1px solid var(--line)}
.ab-fact dt{color:var(--ab-soft);font-size:14px;font-weight:600;line-height:1.6}
.ab-fact dd{margin:0;color:var(--navy);font-size:15.5px;line-height:1.6;overflow-wrap:anywhere}
.ab-fact dd .ab-num{font-size:.94em}
.ab-fact:target{background:var(--ab-mint)}

/* ---------- Two ways in ---------- */
.ab-cta{padding:104px 0;background:var(--midnight);color:#fff}
.ab-cta h2{margin:0;color:#fff;font-size:clamp(30px,3.3vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.ab-cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--ab-on-dark-line)}
.ab-cta-item{display:flex;flex-direction:column;gap:14px;padding:38px 56px 0 0}
.ab-cta-item+.ab-cta-item{padding:38px 0 0 56px;border-left:1px solid var(--ab-on-dark-line)}
.ab-cta h3{margin:0;color:#fff;font-size:26px;font-weight:700;letter-spacing:-.02em}
.ab-cta p{margin:0;max-width:50ch;color:var(--ab-on-dark);font-size:16.5px;line-height:1.65}
.ab-cta .ab-cta-action{margin-top:auto;padding-top:18px}
.ab-cta .button{gap:14px;text-decoration:none}
.ab-cta .button-primary{background:var(--teal);color:var(--midnight)}
.ab-cta .button-primary:hover{background:var(--ab-glow-soft)}
.ab-button-light{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff}
.ab-button-light:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.ab-cta :focus-visible{outline-color:var(--ab-glow)}

/* ---------- FAQs ---------- */
.ab-faqs{background:#fff}
.ab-faqs .faq-list summary{font-size:17px}
.ab-faqs .faq-answer{font-size:15.5px;color:var(--ab-soft)}
.ab-faqs .faq-answer p{margin:0}

/* ---------- Motion ---------- */
/* Armed by about-page.js (adds .ab-js), so nothing is hidden without JavaScript. */
.ab-js .ab-reveal{opacity:0;transform:translateY(14px)}
.ab-js .ab-reveal.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.ab-js .ab-loop:before{transform:scaleX(0)}
.ab-js .ab-loop.is-in:before{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.16,1,.3,1) .15s}

/* ---------- Responsive ---------- */
@media(max-width:1099px){
  .ab-hero-grid{grid-template-columns:1fr;gap:44px;align-items:start}
  .ab-hero-panel{max-width:640px}
  .ab-split,.ab-split-wide{grid-template-columns:1fr;gap:20px;align-items:start}
  .ab-split-head{position:static;margin-bottom:20px}
  .ab-split .ab-lede-top{margin-top:0}
}
@media(max-width:899px){
  .ab-roles{grid-template-columns:1fr}
  .ab-role+.ab-role{border-left:0;border-top:1px solid var(--line)}
  .ab-layers{grid-template-columns:1fr;gap:36px}
  .ab-layers:before{left:24px;right:auto;top:24px;bottom:24px;width:1px;height:auto;background:linear-gradient(180deg,var(--ab-glow),color-mix(in srgb,var(--ab-glow) 18%,transparent));transform-origin:center top}
  .ab-js .ab-loop:before{transform:scaleY(0)}
  .ab-js .ab-loop.is-in:before{transform:scaleY(1)}
  .ab-layer{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:22px;row-gap:8px}
  .ab-layer-n{grid-row:span 2;margin:0}
  .ab-layer p{max-width:none}
}
@media(max-width:767px){
  .ab-section{padding:64px 0}
  .ab-hero{padding:36px 0 56px}
  .ab-hero:before{right:-250px;top:-250px;width:420px;height:420px;border-width:44px}
  .ab-hero-lead{margin-top:22px}
  .ab-hero-actions{gap:8px 24px;margin-top:28px}
  .ab-hero-actions .button{width:100%;gap:14px}
  .ab-hero-panel{padding:22px}
  .ab-stats{gap:10px;margin-top:20px;padding-top:20px}
  .ab-stat{padding:14px 14px 13px}
  .ab-stat strong{font-size:20px}
  .ab-roles{margin-top:36px}
  .ab-role{padding:26px 22px}
  .ab-layers{margin-top:44px}
  .ab-model-close{margin-top:44px;padding-top:26px;gap:14px}
  .ab-model-close .icon{width:24px;height:24px}
  .ab-diffs{grid-template-columns:1fr}
  .ab-diff,.ab-diff:nth-child(even){padding:26px 0 28px;border-left:0}
  .ab-mission{padding:72px 0}
  .ab-mission-mark{width:34px;height:26px;margin-bottom:22px}
  .ab-person{grid-template-columns:52px minmax(0,1fr);gap:18px;padding:26px 0}
  .ab-initials{width:52px;height:52px;font-size:17px}
  .ab-person{row-gap:4px}
  .ab-person-body{display:contents}
  .ab-initials{grid-row:1/3;align-self:center}
  .ab-person h3{grid-column:2;align-self:end}
  .ab-person-role{grid-column:2;margin:0;align-self:start}
  .ab-person-bio,.ab-person-note{grid-column:1/-1}
  .ab-fact{grid-template-columns:1fr;gap:2px;padding:15px 20px}
  .ab-fact dt{font-size:13px}
  .ab-cta{padding:64px 0}
  .ab-cta-grid{grid-template-columns:1fr;margin-top:32px}
  .ab-cta-item,.ab-cta-item+.ab-cta-item{padding:30px 0;border-left:0}
  .ab-cta-item+.ab-cta-item{border-top:1px solid var(--ab-on-dark-line);padding-bottom:0}
  .ab-cta .button{width:100%}
  .ab-faqs .faq-list summary{font-size:16px}
}
@media(max-width:359px){
  .ab-stats{grid-template-columns:1fr}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .ab-js .ab-reveal,.ab-js .ab-reveal.is-in{opacity:1;transform:none;transition:none}
  .ab-js .ab-loop:before,.ab-js .ab-loop.is-in:before{transform:none;transition:none}
  .ab-fact,.ab-role-link .icon,.ab-hero-actions .text-link .icon{transition:none}
}