/* ============================================================================
   DAS About page — a 1:1 port of the ODNDR About page layout
   ----------------------------------------------------------------------------
   Jayden 2026-09-26: "we are going to create the about page the same identical
   layout as the off duty about page 1-1 no difference, and we will re do the
   copywriting."

   Source of truth: odndr-web  app/(public)/_sections/about-2026.ts — the block
   spliced into the WordPress clone by app/(public)/about-us/route.ts. Every
   value below is carried across unchanged: the clamps, the ratios, the grid
   templates, the breakpoints, the pill geometry, the stone card. What changes
   is the words and the photographs, and nothing else.

   TWO THINGS ARE DELIBERATELY NOT 1:1, both forced by the platform:

   1. FONT DELIVERY. ODNDR self-hosts Golos Text, Manrope and Victor Mono as
      woff2 under /fonts/odc/. DAS has no such directory and already loads its
      faces from Google Fonts, so the same three families are requested there
      instead. Same typefaces, same weights — different transport.

   2. SCOPE ID. ODNDR uses #oda26. This is #dab26, so the two can never collide
      if a block is ever pasted between the sites.

   Everything is scoped under #dab26 because about.html also loads styles.css,
   das-nav.css, das-footer.css and das-about.css. The old .dc/.about rules in
   das-about.css still apply to nothing on this page once the body is replaced,
   but scoping means it does not matter if they linger.
   ========================================================================== */

#dab26{
  --ink:#0E1B2E; --body:#3B4A60; --electric:#2F6BFF; --stone:#F0EEE9; --line:#E5E3DC;
  background:#fff; color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif!important;
  -webkit-font-smoothing:antialiased;
}
#dab26 *{box-sizing:border-box}
#dab26 :where(h1,h2,h3,p){margin:0;text-transform:none!important;letter-spacing:normal}
#dab26 .in{max-width:1360px;margin:0 auto;padding:0 20px}
#dab26 .eye{font:500 12px/1 'Victor Mono',ui-monospace,monospace!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--electric)}
#dab26 .h{font-family:'Golos Text',system-ui,sans-serif!important;font-weight:500!important;color:var(--ink)}
#dab26 p{font-family:'Manrope',system-ui,sans-serif!important;font-size:17px;line-height:1.6;color:var(--body)}
#dab26 p b{color:var(--ink);font-weight:600}

/* the CTA pill — ODNDR's .odn-cta geometry, carried over exactly */
#dab26 .pill{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:9999px;background:var(--ink);color:#fff!important;font:500 15px/1 'Manrope',system-ui,sans-serif!important;text-decoration:none!important;letter-spacing:-.01em;white-space:nowrap;transition:background-color .15s}
#dab26 .pill span{transition:transform .15s}
#dab26 .pill:hover{background:var(--electric)}
#dab26 .pill:hover span{transform:translateX(3px)}
#dab26 .pill:focus-visible{outline:2px solid var(--electric);outline-offset:3px}

/* header — lab option A */
#dab26 .hero{padding:44px 0 20px}
#dab26 .hero .top{display:grid;gap:22px;align-items:end}
#dab26 .hero h1{margin-top:0;font-size:clamp(56px,11vw,132px)!important;line-height:.9!important;letter-spacing:-.055em!important}
#dab26 .hero .side{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:440px}
#dab26 .hero .side p{font-size:18px}
#dab26 .hero .ph{position:relative;margin-top:32px;border-radius:20px;overflow:hidden;aspect-ratio:4/3.2;background:#16202e}
#dab26 .hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
#dab26 .hero .tag{position:absolute;left:16px;bottom:14px;padding:9px 13px;border-radius:9999px;background:rgba(255,255,255,.9);font:500 11px/1 'Victor Mono',monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* phone header — option C layout, portrait photo behind the headline */
#dab26 .heroC{display:none;padding:8px}
#dab26 .heroC .fr{position:relative;border-radius:20px;overflow:hidden;min-height:600px;background:#0E1B2E url(/images/about/hero-hands-portrait.webp) 50% 55%/cover no-repeat;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
#dab26 .heroC .fr::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,31,.5) 0%,rgba(8,17,31,0) 36%,rgba(8,17,31,.18) 56%,rgba(8,17,31,.82) 100%)}
#dab26 .heroC .t{position:relative;padding:28px 18px 0}
#dab26 .heroC h1{margin:0;color:#fff!important;font-size:clamp(44px,15vw,118px)!important;line-height:.9!important;letter-spacing:-.05em!important;max-width:9ch}
#dab26 .heroC .b2{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 18px 24px}
#dab26 .heroC .b2 p{margin:0;font-size:17px;line-height:1.55;color:rgba(255,255,255,.88)!important;max-width:44ch}
#dab26 .heroC .pill{background:#fff;color:#0E1B2E!important}
#dab26 .heroC .pill:hover{background:#DCE7FF}
@media(max-width:767px){#dab26 .hero{display:none}#dab26 .heroC{display:block}#dab26 .eye{display:none}#dab26 .who h2,#dab26 .why h2{margin-top:0}}

/* who we are — copy left, photo right */
#dab26 .who{padding:72px 0}
#dab26 .who .grid{display:grid;gap:32px;align-items:center}
#dab26 .who h2{margin-top:0;font-size:clamp(34px,4.6vw,56px)!important;line-height:1.02!important;letter-spacing:-.04em!important;max-width:14ch}
#dab26 .who .lede{margin-top:20px!important;max-width:36em}
#dab26 .mission{margin-top:28px;padding:22px 24px;border-radius:16px;background:var(--stone)}
#dab26 .mission p{margin-top:10px!important;font-size:16px;color:var(--ink)}
#dab26 .who .ph{border-radius:20px;overflow:hidden;aspect-ratio:16/11}
#dab26 .who .ph img{width:100%;height:100%;object-fit:cover;display:block}

/* the problem — photo card with the word on it, then the story */
#dab26 .bio{padding:8px 0 80px}
#dab26 .bio .card{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3.4;background:#0E1B2E}
#dab26 .bio .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
#dab26 .bio .card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,31,0) 45%,rgba(8,17,31,.7) 100%)}
#dab26 .bio .card h2{position:absolute;left:20px;bottom:18px;z-index:1;color:#fff!important;font-size:clamp(48px,9vw,120px)!important;line-height:.9!important;letter-spacing:-.05em!important}
#dab26 .bio .story{margin-top:40px;display:grid;gap:18px}
#dab26 .bio .story .eye{margin-bottom:4px}
#dab26 .bio .story .lead p:not(.eye){font-family:'Golos Text',system-ui,sans-serif!important;font-size:clamp(22px,2.4vw,30px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}

/* why recognition works — navy band with badges */
#dab26 .why{background:var(--ink);color:#fff;padding:72px 0 84px;text-align:center}
#dab26 .why h2{margin-top:14px;color:#fff!important;font-size:clamp(34px,4.6vw,56px)!important;line-height:1.02!important;letter-spacing:-.04em!important;max-width:22ch;margin-left:auto!important;margin-right:auto!important}
#dab26 .why .eye{color:#8FB0FF}
#dab26 .why .why-lede{max-width:62ch;margin:18px auto 0!important;color:rgba(255,255,255,.78)!important}
#dab26 .why .badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:28px 20px;margin:44px auto 0!important;padding:0!important;max-width:900px}
#dab26 .why .badges li{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;min-height:0!important;display:flex;flex-direction:column;align-items:center;gap:12px;width:140px;font:500 14px/1.4 'Manrope',system-ui,sans-serif!important;color:#fff!important}
#dab26 .why .badge-ic{width:64px;height:64px;display:grid;place-items:center;color:#8FB0FF}
#dab26 .why .badge-ic svg{width:44px;height:44px}
#dab26 .why .cta{display:flex;justify-content:center;margin-top:44px}

@media(min-width:768px){
  #dab26 .hero .top{grid-template-columns:minmax(0,1fr) auto}
  #dab26 .hero .side{justify-self:end}
  #dab26 .hero .ph{aspect-ratio:1800/764;margin-top:44px}
  #dab26 .hero .tag{left:22px;bottom:20px}
  #dab26 .who{padding:110px 0}
  #dab26 .who .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  #dab26 .bio .card{aspect-ratio:1800/820}
  #dab26 .bio .card h2{left:40px;bottom:30px}
  #dab26 .bio .story{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:64px;row-gap:20px;margin-top:64px}
  #dab26 .bio .story .lead{grid-row:span 3}
  #dab26 .why{padding:110px 0 120px}
}
@media(prefers-reduced-motion:reduce){#dab26 .pill,#dab26 .pill span{transition:none}}