@charset "UTF-8";
/* RWD — the about page
   ==========================================================================
   The home page's system, carried over: bone ground, bark and ink bands, one
   muted gold on every label, rule and numeral, Playfair for anything that is
   read as a voice and Jost for everything that is read as a label. Emphasis
   by italic, never by colour; hairlines, never boxes; one left edge.

   The tokens are restated rather than shared. home.css declares them on
   #page-home and promises nothing there reaches another page; this sheet
   makes the same promise for #page-about. If a value changes, change both.

   Scoped entirely to #page-about.
   ========================================================================= */


/* ---- Ground and marks --------------------------------------------------- */

#page-about{
  --bone:#F3F0E9;
  --bone-2:#EAE5D9;
  --ink-1:#100F0E;
  --bark:#2B211A;
  --gold:#B08D57;
  --gold-lt:#CBAE80;
  --rule:rgba(16,15,14,.14);
  --rule-i:rgba(255,255,255,.13);
  --say:#2E2B27;
  --mute:#6C6860;
  --mute-i:#A7A199;
  --paper-i:#F4F1EA;

  background:var(--bone);
  color:var(--say);
}

#page-about .band-dark,
#page-about .cta-band{ background:var(--ink-1); color:var(--paper-i) }

#page-about section.block{
  max-width:1280px;
  padding:clamp(84px,11vh,148px) clamp(24px,3.4vw,44px);
}

#page-about .eyebrow{
  font:400 clamp(16px,.76vw,16px)/1 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); gap:11px;
}
#page-about .band-dark .eyebrow,
#page-about .cta-band .eyebrow,
#page-about .ab-record .eyebrow{ color:var(--gold-lt) }
#page-about .eyebrow .dots{ gap:5px }
#page-about .eyebrow .dots i{ width:6px; height:6px }

/* Section heads: label, then a Playfair line with its second half in italic. */
#page-about .ab-head{ margin-bottom:clamp(42px,6vh,78px) }
#page-about h2{
  margin:clamp(16px,2.2vh,24px) 0 0; max-width:22ch;
  font:400 clamp(29px,3.6vw,58px)/1.09 var(--lux);
  letter-spacing:0; text-transform:none; color:var(--ink-1);
  text-wrap:balance;
}
#page-about h2 em,
#page-about h2 span{ font-style:italic; font-weight:400; color:inherit }
#page-about .band-dark h2,
#page-about .cta-band h2,
#page-about .ab-record h2{ color:var(--paper-i) }

#page-about .lead{
  max-width:44ch;
  margin:clamp(20px,2.8vh,30px) 0 0;
  padding-left:clamp(18px,2vw,30px);
  border-left:1px solid var(--gold);
  font:400 clamp(16px,1.05vw,16.5px)/1.76 var(--lux-sans);
  color:var(--mute);
}

/* Index numerals, shared by the values and the approach. */
#page-about .ab-n{
  display:block;
  font:400 clamp(16px,1.35vw,20px)/1 var(--lux);
  color:var(--gold); letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}


/* ---- Actions: ink on bone, paper on ink, both invert on hover ----------- */

#page-about .btn{
  padding:clamp(15px,2vh,19px) clamp(26px,2.6vw,40px);
  font:400 clamp(16px,.82vw,16px)/1 var(--lux-sans);
  letter-spacing:.22em; text-transform:uppercase;
  border:1px solid transparent; gap:12px;
  transition:background .38s ease, color .38s ease, border-color .38s ease;
}
#page-about .btn-solid{ background:var(--paper-i); color:var(--ink-1); border-color:var(--paper-i) }
#page-about .btn-solid:hover{ background:transparent; color:var(--paper-i) }
#page-about .btn-ghost{ background:transparent; color:var(--paper-i); border-color:rgba(255,255,255,.38) }
#page-about .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08) }


/* ==== 1. Opening =========================================================
   The picture fills the section edge to edge. A neutral shade — black, not
   bark — darkens the left where the words sit and clears to the right, so
   the building keeps its own sky.
========================================================================= */

#page-about .ab-hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:min(calc(100vh - 68px), 880px);
  background:#0E0E0F; color:var(--paper-i);
}
#page-about .ab-shot{ position:absolute; inset:0; margin:0; z-index:-2 }
#page-about .ab-shot img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:65% 45%;
}
#page-about .ab-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,12,13,.82) 0%, rgba(12,12,13,.62) 34%, rgba(12,12,13,.12) 66%, rgba(12,12,13,0) 100%),
    linear-gradient(0deg, rgba(12,12,13,.45) 0%, rgba(12,12,13,0) 30%);
}
#page-about .ab-shot figcaption{
  position:absolute; right:clamp(18px,2.4vw,34px); bottom:clamp(18px,2.6vh,30px);
  font:400 16px/1 var(--lux-sans); letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.5);
}
#page-about .ab-hero-words{
  position:relative; width:min(1320px,100%); margin:0 auto;
  padding:clamp(64px,10vh,120px) clamp(24px,4.4vw,72px);
}
#page-about .ab-plate{
  position:relative; max-width:620px;
  padding-left:clamp(22px,2.4vw,38px);
}
#page-about .ab-plate::before{
  content:""; position:absolute; left:0; top:.3em; bottom:.6em; width:1px;
  background:linear-gradient(180deg, rgba(203,174,128,.85), rgba(203,174,128,.1));
}
#page-about .ab-eyebrow{
  display:flex; align-items:center; gap:12px;
  margin:0 0 clamp(18px,2.6vh,28px);
  font:400 clamp(16px,.78vw,16px)/1.4 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt);
}
#page-about .ab-eyebrow .dots{ gap:5px }
#page-about .ab-eyebrow .dots i{ width:6px; height:6px }
#page-about .ab-hero h1{
  margin:0;
  font:400 clamp(54px,7.4vw,120px)/.98 var(--lux);
  letter-spacing:-.02em; text-transform:none; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
#page-about .ab-tag{
  margin:clamp(14px,2vh,22px) 0 0; max-width:24ch;
  font:italic 400 clamp(20px,2vw,30px)/1.3 var(--lux);
  color:rgba(255,255,255,.88);
}
#page-about .ab-tag em{ color:var(--gold-lt) }
#page-about .ab-rule{
  width:clamp(54px,6vw,92px); height:1px;
  margin:clamp(26px,3.6vh,40px) 0 clamp(22px,3vh,32px);
  background:var(--gold-lt);
}
#page-about .ab-sub{
  margin:0; max-width:46ch;
  font:400 clamp(16px,1.1vw,17px)/1.8 var(--lux-sans);
  color:rgba(255,255,255,.84);
}

/* On a phone the words take most of the width, so the shade covers it all,
   heavier at the foot where the paragraph sits. */
@media (max-width:900px){
  #page-about .ab-hero{ min-height:calc(100svh - 68px); align-items:flex-end }
  #page-about .ab-shot img{ object-position:72% 40% }
  #page-about .ab-hero::before{
    background:linear-gradient(0deg, rgba(12,12,13,.9) 0%, rgba(12,12,13,.62) 50%, rgba(12,12,13,.15) 100%);
  }
  #page-about .ab-shot figcaption{ top:clamp(16px,2.4vh,24px); bottom:auto }
  #page-about .ab-hero-words{ padding:clamp(40px,6vh,64px) 22px clamp(48px,7vh,72px) }
}

/* ==== 2. Story ===========================================================
   The year it reaches back to, outlined in gold in the margin — the date as
   a mark rather than as a claim.
========================================================================= */

#page-about .ab-story-body{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,96px);
}
#page-about .ab-story-year{
  margin:0;
  font:400 clamp(92px,13vw,210px)/.82 var(--lux);
  /* Solid deep gold: the pale outline it used to be read as a watermark. */
  color:var(--gold-deep,#8A6B3C);
  letter-spacing:.02em; font-variant-numeric:lining-nums;
}
#page-about .ab-story-text{
  display:grid; gap:clamp(18px,2.4vh,26px);
  padding-left:clamp(18px,2vw,30px); border-left:1px solid var(--gold);
}
#page-about .ab-story-text p{
  margin:0; max-width:58ch;
  font:400 clamp(16px,1.1vw,17px)/1.82 var(--lux-sans); color:var(--say);
}
#page-about .ab-story-text p:first-child::first-letter{
  float:left; margin:.06em .1em 0 0;
  font:400 3.4em/.8 var(--lux); color:var(--gold);
}
@media (max-width:820px){
  #page-about .ab-story-body{ grid-template-columns:1fr }
  #page-about .ab-story-year{ font-size:clamp(84px,24vw,140px) }
}


/* ==== 3. The record ====================================================== */

#page-about .ab-record{ background:var(--ink-1); color:var(--paper-i); padding:clamp(78px,11vh,132px) 0 }
#page-about .ab-record-in{ width:min(1280px, calc(100% - clamp(48px,6.8vw,88px))); margin:0 auto }
#page-about .ab-figs{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,54px); margin-top:clamp(38px,5vh,62px);
}
#page-about .ab-figs > div{ padding-top:clamp(20px,2.8vh,32px); border-top:1px solid var(--rule-i) }
#page-about .ab-fig{
  margin:0;
  font:400 clamp(32px,4.2vw,72px)/1 var(--lux);
  color:var(--paper-i); font-variant-numeric:tabular-nums;
}
#page-about .ab-fig em{
  font-style:normal; font-size:.5em; vertical-align:.30em;
  margin-left:.08em; color:var(--gold);
}
#page-about .ab-fig-l{
  margin:clamp(12px,1.8vh,18px) 0 0;
  font:400 16px/1.4 var(--lux-sans); letter-spacing:.3em;
  text-transform:uppercase; color:rgba(244,241,234,.52);
}
@media (max-width:820px){
  #page-about .ab-figs{ grid-template-columns:1fr 1fr; row-gap:36px }
}


/* ==== 4. The journey =====================================================
   One gold hairline with a mark on it for each year. Four columns, then two,
   then a vertical rail on a phone.
========================================================================= */

#page-about .ab-time{ padding-bottom:clamp(64px,8vh,110px) }
#page-about .ab-rail{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(20px,3vw,48px);
  border-top:1px solid var(--gold);
}
#page-about .ab-rail li{ position:relative; padding-top:clamp(30px,4vh,44px) }
#page-about .ab-rail li::before{
  content:""; position:absolute; top:-5px; left:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--bone); border:1px solid var(--gold);
}
#page-about .ab-rail li:last-child::before{ background:var(--gold) }
#page-about .ab-year{
  margin:0;
  font:400 clamp(34px,3.6vw,56px)/1 var(--lux);
  color:var(--ink-1); font-variant-numeric:lining-nums;
}
#page-about .ab-rail h3{
  margin:clamp(14px,2vh,20px) 0 10px;
  font:400 16px/1.3 var(--lux-sans); letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold);
}
#page-about .ab-rail p:not(.ab-year){
  margin:0; max-width:32ch;
  font:400 16px/1.72 var(--lux-sans); color:var(--mute);
}
#page-about .ab-caveat{
  margin:clamp(40px,6vh,64px) 0 0;
  font:400 16px/1.6 var(--lux-sans); color:var(--mute); font-style:italic;
}
@media (max-width:980px){
  #page-about .ab-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px; border-top:none }
  #page-about .ab-rail li{ border-top:1px solid var(--gold) }
}
@media (max-width:560px){
  #page-about .ab-rail{ grid-template-columns:1fr; row-gap:0; padding-left:22px; border-left:1px solid var(--gold) }
  #page-about .ab-rail li{ border-top:none; padding:0 0 38px }
  #page-about .ab-rail li:last-child{ padding-bottom:0 }
  #page-about .ab-rail li::before{ top:.9em; left:-27px }
}


/* ==== 5. Purpose, vision, mission ======================================== */

#page-about .ab-purpose{
  margin:clamp(22px,3vh,34px) 0 0; max-width:30ch;
  font:400 clamp(26px,3.2vw,50px)/1.24 var(--lux); font-style:italic;
  color:var(--paper-i); text-wrap:balance;
}
#page-about .ab-vm{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,90px); margin-top:clamp(56px,8vh,96px);
}
#page-about .ab-vm > div{ padding-top:clamp(22px,3vh,30px); border-top:1px solid var(--rule-i) }
#page-about .ab-vm-h{
  margin:0 0 clamp(14px,2vh,20px);
  font:400 16px/1 var(--lux-sans); letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-lt);
}
#page-about .ab-vm p:not(.ab-vm-h){
  margin:0; max-width:48ch;
  font:400 clamp(16px,1.1vw,17px)/1.78 var(--lux-sans); color:var(--mute-i);
}
@media (max-width:760px){ #page-about .ab-vm{ grid-template-columns:1fr } }


/* ==== 6. Values: an index in two columns ================================= */

#page-about .ab-values{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,5vw,90px);
}
#page-about .ab-values li{
  display:grid; grid-template-columns:clamp(44px,4.4vw,70px) minmax(0,1fr);
  gap:10px clamp(12px,1.6vw,24px); align-content:start;
  padding:clamp(26px,3.6vh,40px) 0;
  border-top:1px solid var(--rule);
}
#page-about .ab-values li:nth-last-child(-n+2){ border-bottom:1px solid var(--rule) }
#page-about .ab-values .ab-n{ grid-row:span 2; padding-top:.3em }
#page-about .ab-values h3{
  margin:0;
  font:400 clamp(19px,1.85vw,27px)/1.18 var(--lux); color:var(--ink-1);
}
#page-about .ab-values p{
  margin:0; max-width:44ch;
  font:400 16px/1.76 var(--lux-sans); color:var(--mute);
}
@media (max-width:760px){
  #page-about .ab-values{ grid-template-columns:1fr }
  #page-about .ab-values li:nth-last-child(2){ border-bottom:none }
}


/* ==== 7. Chairman ======================================================== */

#page-about .ab-chair{
  display:grid;
  grid-template-columns:minmax(0,clamp(230px,28vw,380px)) minmax(0,1fr);
  gap:clamp(32px,5.4vw,96px); align-items:center;
}
#page-about .ab-face{ position:relative; margin:0 }
#page-about .ab-face img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
}
#page-about .ab-face::after{
  content:""; position:absolute; left:0; right:0; bottom:-15px; height:1px;
  background:var(--gold);
}
#page-about .ab-chair blockquote{
  position:relative;
  margin:clamp(22px,3vh,32px) 0 0; max-width:34ch;
  font:400 clamp(20px,2.1vw,32px)/1.5 var(--lux); font-style:italic;
  color:var(--paper-i);
}
#page-about .ab-chair blockquote::before{
  content:"“"; position:absolute; margin-left:-.54em;
  font-style:normal; color:var(--gold);
}
#page-about .ab-chair blockquote::after{ content:"”"; font-style:normal; color:var(--gold) }
#page-about .ab-bio{
  margin:clamp(24px,3.4vh,34px) 0 0; max-width:52ch;
  font:400 clamp(16px,1.02vw,16px)/1.8 var(--lux-sans); color:var(--mute-i);
}
#page-about .ab-name{ margin-top:clamp(28px,4vh,44px) }
#page-about .ab-name::before{
  content:""; display:block; width:44px; height:1px;
  background:var(--gold); margin-bottom:clamp(18px,2.4vh,24px);
}
#page-about .ab-name p{ margin:0; font:400 17px/1 var(--lux); color:var(--paper-i) }
#page-about .ab-name p + p{
  margin-top:10px;
  font:400 16px/1.4 var(--lux-sans); letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-lt);
}
@media (max-width:820px){
  #page-about .ab-chair{ grid-template-columns:1fr; gap:48px }
  #page-about .ab-face{ max-width:300px }
}


/* ==== 8. Approach ========================================================
   The head holds on the left while the five steps pass it on the right.
========================================================================= */

#page-about .ab-how{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,6vw,110px); align-items:start;
  border-top:1px solid var(--rule);
}
#page-about .ab-how-head{ position:sticky; top:clamp(100px,14vh,140px) }
#page-about .ab-steps{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule) }
#page-about .ab-steps li{
  display:grid; grid-template-columns:clamp(44px,4.4vw,70px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);
  padding:clamp(26px,3.6vh,40px) 0;
  border-top:1px solid var(--rule);
}
#page-about .ab-steps .ab-n{ padding-top:.3em }
#page-about .ab-steps h3{
  margin:0 0 10px;
  font:400 clamp(19px,1.85vw,27px)/1.18 var(--lux); color:var(--ink-1);
}
#page-about .ab-steps p{
  margin:0; max-width:50ch;
  font:400 16px/1.76 var(--lux-sans); color:var(--mute);
}
@media (max-width:900px){
  #page-about .ab-how{ grid-template-columns:1fr }
  #page-about .ab-how-head{ position:static }
}


/* ==== 9. Closing ========================================================= */

#page-about .cta-band{ position:relative; overflow:hidden }
#page-about .cta-band .block{ position:relative; padding-block:clamp(94px,13vh,168px) }
#page-about .cta-dots{
  position:absolute; left:50%; bottom:-46%;
  width:min(1500px,150%); height:120%;
  transform:translateX(-50%); border-radius:0;
  background:radial-gradient(58% 62% at 50% 100%,
    rgba(176,141,87,.20), rgba(176,141,87,.05) 44%, transparent 74%);
}
#page-about .cta-band h2{
  font:400 clamp(32px,4.6vw,74px)/1.08 var(--lux); max-width:17ch;
}
#page-about .cta-band .hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:clamp(30px,4.4vh,48px) }


/* ==== Motion: the home page's, at the home page's speed ================== */

@media (prefers-reduced-motion: no-preference){
  #page-about .rv{
    transform:translateY(30px);
    transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),
               transform 1.05s cubic-bezier(.22,.61,.36,1);
  }
  #page-about .rv.in{ transform:none }

  #page-about .rv h2,
  #page-about .rv .lead{
    clip-path:inset(0 0 108% 0);
    transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1);
  }
  #page-about .rv.in h2,
  #page-about .rv.in .lead{ clip-path:inset(0 0 -12% 0) }
  #page-about .rv h2{ transition-delay:.10s }
  #page-about .rv .lead{ transition-delay:.24s }

  #page-about .ab-hero .ab-plate > *{ animation:abRise 1.05s cubic-bezier(.22,.61,.36,1) both }
  #page-about .ab-hero .ab-plate > :nth-child(2){ animation-delay:.10s }
  #page-about .ab-hero .ab-plate > :nth-child(3){ animation-delay:.22s }
  #page-about .ab-hero .ab-plate > :nth-child(4){ animation-delay:.34s }
  #page-about .ab-hero .ab-plate > :nth-child(5){ animation-delay:.44s }

  #page-about .ab-rail.in li,
  #page-about .ab-values.in li,
  #page-about .ab-steps.in li{ animation:abRise .95s cubic-bezier(.22,.61,.36,1) both }
  #page-about .in li:nth-child(2){ animation-delay:.11s }
  #page-about .in li:nth-child(3){ animation-delay:.22s }
  #page-about .in li:nth-child(4){ animation-delay:.33s }
  #page-about .in li:nth-child(5){ animation-delay:.44s }
  #page-about .in li:nth-child(6){ animation-delay:.55s }
}

@keyframes abRise{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}