/* About page-specific styles — extracted from base.css.
   Add more here as you edit this page. Shared rules live in /css/base.css. */

/* === ABOUT HERO — bigger, more atmospheric than the default page-header === */
.about-hero {padding:140px 0 110px;min-height:72vh;display:flex;align-items:center}
.about-hero .container {position:relative;z-index:1;width:100%}
.about-hero .page-title {font-size:clamp(2.8rem,6vw,5rem);line-height:1.02;letter-spacing:-.045em;font-weight:900;margin:18px 0 28px}
.about-hero .page-title .accent-line {font-family:var(--editorial,'Instrument Serif',serif);font-style:italic;font-weight:500;color:#ff7a3c;letter-spacing:-.025em}
.about-hero .page-subtitle {font-size:clamp(1.02rem,1.25vw,1.18rem);color:rgba(255,255,255,.78);line-height:1.62;max-width:620px;margin:0 0 36px}
.about-hero .orb-1 {width:780px;height:780px;background:rgba(255,92,53,.16);top:-25%;left:5%;filter:blur(140px)}
.about-hero .orb-2 {width:560px;height:560px;background:rgba(255,140,66,.10);bottom:-15%;right:-5%;filter:blur(130px)}
.about-hero .orb-3 {width:380px;height:380px;background:rgba(56,189,248,.06);top:50%;left:48%;filter:blur(120px)}

/* Hero meta pill row — adds texture + concrete details below subtitle */
.hero-meta {display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.hm-pill {display:inline-flex;align-items:center;gap:10px;padding:9px 16px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:.66rem;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.78);text-transform:uppercase;border:1px solid rgba(255,107,40,.22);border-radius:999px;background:linear-gradient(155deg,rgba(255,107,40,.08),rgba(255,107,40,.02));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s ease,color .3s ease,background .3s ease}
.hm-pill:hover {border-color:rgba(255,107,40,.5);color:#fff;background:linear-gradient(155deg,rgba(255,107,40,.14),rgba(255,107,40,.04))}
.hm-pill i {width:6px;height:6px;border-radius:50%;background:var(--accent,#ff5722);box-shadow:0 0 10px rgba(255,107,40,.6);flex-shrink:0}

/* === VALUE CARDS — header row with number + icon === */
.value-card-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.value-icon {width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(155deg,rgba(255,107,40,.14),rgba(255,107,40,.03));border:1px solid rgba(255,107,40,.22);color:var(--accent,#ff5722);transition:transform .4s var(--ease),border-color .3s ease,color .3s ease;flex-shrink:0}
.value-icon svg {width:20px;height:20px;display:block}
.value-card:hover .value-icon {transform:translateY(-2px) scale(1.05);border-color:rgba(255,107,40,.5);color:#ff8c42}

/* === FOUNDER NOTE — personal touch between values + vision === */
.about-founder {padding:90px 0 70px;background:linear-gradient(180deg,var(--bg,#050508) 0%,var(--bg2,#0a0a12) 100%);position:relative;overflow:hidden}
.about-founder::before {content:'';position:absolute;top:50%;left:50%;width:100%;height:140%;background:radial-gradient(ellipse 50% 40% at center,rgba(255,107,40,.08),transparent 70%);transform:translate(-50%,-50%);pointer-events:none;filter:blur(60px)}
.about-founder-card {position:relative;max-width:760px;margin:0 auto;padding:48px 56px 44px;border:1px solid rgba(255,107,40,.18);border-radius:24px;background:linear-gradient(155deg,rgba(20,16,24,.7),rgba(8,6,14,.85));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.about-founder-card::before {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.55),transparent);opacity:.7}
.fc-coordinates {font-family:var(--mono,'JetBrains Mono',monospace);font-size:.66rem;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.45);text-transform:uppercase;margin-bottom:24px;display:inline-flex;align-items:center;gap:10px}
.fc-coordinates i {width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.6);flex-shrink:0}
.fc-quote {position:relative;font-family:var(--display,'Geist',sans-serif);font-size:clamp(1.2rem,1.55vw,1.55rem);font-weight:500;line-height:1.5;letter-spacing:-.015em;color:#fff;margin:0 0 30px;padding-left:28px;border-left:2px solid rgba(255,107,40,.35)}
.fc-mark {position:absolute;left:-2px;top:-12px;font-family:var(--editorial,'Instrument Serif',serif);font-size:3rem;font-style:italic;color:rgba(255,107,40,.5);line-height:1}
.fc-signature {display:flex;align-items:center;gap:18px;padding-top:24px;border-top:1px dashed rgba(255,255,255,.08)}
.fc-sig-mark {width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,107,40,.35);border-radius:10px;background:linear-gradient(155deg,rgba(255,107,40,.12),rgba(255,107,40,.02));color:#ff7a3c}
.fc-sig-mark svg {width:18px;height:18px}
.fc-sig-text {display:flex;flex-direction:column;gap:2px}
.fc-sig-text strong {font-family:var(--display,'Geist',sans-serif);font-size:.95rem;font-weight:700;color:#fff;letter-spacing:-.005em}
.fc-sig-text span {font-family:var(--mono,'JetBrains Mono',monospace);font-size:.66rem;font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.55);text-transform:uppercase}

@media (max-width:720px) {
  .about-hero {padding:90px 0 60px;min-height:auto}
  .hero-meta {gap:8px}
  .hm-pill {padding:7px 12px;font-size:.58rem;letter-spacing:.15em}
  .about-founder-card {padding:32px 24px 28px;border-radius:18px}
  .fc-quote {font-size:1.05rem;padding-left:20px;line-height:1.55}
  .fc-mark {font-size:2.2rem;top:-8px}
  .value-icon {width:32px;height:32px}
  .value-icon svg {width:16px;height:16px}
}

/* === MANIFESTO — the pitch + proof column === */
.about-manifesto {padding:80px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative}
.about-manifesto::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.25),transparent)}
.manifesto-grid {display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}
.manifesto-text h2 {font-family:var(--display);font-size:clamp(1.7rem,2.4vw,2.3rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:14px 0 22px;color:#fff}
.manifesto-text h2 .dl-serif-italic {-webkit-text-fill-color:initial;color:#ff7a3c;background:none;-webkit-background-clip:initial;background-clip:initial}
.manifesto-text p {color:rgba(255,255,255,.78);font-size:1rem;line-height:1.65;margin-bottom:18px}
.manifesto-text .manifesto-kicker {font-family:var(--display);font-size:1.05rem;font-weight:600;color:#fff;border-left:2px solid var(--accent,#ff5722);padding-left:18px;margin:24px 0 0;line-height:1.5;font-style:italic}
.manifesto-proof {display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid rgba(255,107,40,.2);border-radius:18px;background:linear-gradient(155deg,rgba(255,107,40,.06),rgba(0,0,0,.25));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mp-row {display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.mp-row:last-child {border-bottom:none}
.mp-row strong {font-family:var(--display);font-size:2rem;font-weight:800;color:#ff7a3c;letter-spacing:-.04em;line-height:1;text-align:right;min-width:72px}
.mp-row span {font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.45}

/* === CLIENTS — real shops, real numbers === */
.about-clients {padding:90px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);position:relative}
.about-clients .sec-head {text-align:center;max-width:680px;margin:0 auto 44px}
.about-clients .sec-title {font-family:var(--display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:14px 0 12px;color:#fff}
.about-clients .sec-title .dl-serif-italic {-webkit-text-fill-color:initial;color:#ff7a3c;background:none;-webkit-background-clip:initial;background-clip:initial}
.about-clients .sec-desc {color:rgba(255,255,255,.72);font-size:1rem;line-height:1.55}
.clients-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.client-card {display:flex;flex-direction:column;gap:18px;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(155deg,rgba(20,16,24,.7),rgba(8,6,14,.85));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none;color:inherit;transition:border-color .35s ease,transform .35s var(--ease),box-shadow .35s ease}
.client-card:hover {border-color:rgba(255,107,40,.4);transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 60px rgba(255,107,40,.08)}
.cc-head {display:flex;align-items:center;gap:14px}
.cc-logo {width:44px;height:44px;border-radius:10px;object-fit:contain;background:rgba(255,255,255,.04);padding:6px;flex-shrink:0;border:1px solid rgba(255,255,255,.06)}
.cc-logo-mark {display:grid;place-items:center;color:#ff7a3c;background:linear-gradient(155deg,rgba(255,107,40,.12),rgba(255,107,40,.02));border:1px solid rgba(255,107,40,.25)}
.cc-logo-mark svg {width:22px;height:22px}
.cc-head strong {display:block;font-family:var(--display);font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.cc-head span {display:block;font-size:.74rem;color:rgba(255,255,255,.55);margin-top:2px;font-family:var(--mono,'JetBrains Mono',monospace);letter-spacing:.06em}
.cc-stat {padding-top:18px;border-top:1px dashed rgba(255,107,40,.16);font-size:.92rem;color:rgba(255,255,255,.82);line-height:1.4}
.cc-stat b {font-family:var(--display);font-weight:800;color:#ff7a3c;font-size:1.4rem;letter-spacing:-.025em;margin-right:6px}

/* === DIRECT LINE — replaces the wall-of-text vision === */
.about-direct {padding:90px 0 110px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative}
.direct-card {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 56px;border:1px solid rgba(255,107,40,.22);border-radius:24px;background:linear-gradient(155deg,rgba(20,16,24,.7),rgba(8,6,14,.85));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;overflow:hidden}
.direct-card::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.55),transparent)}
.dc-left h2 {font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:14px 0 16px;color:#fff}
.dc-left p {color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.6;margin:0}
.dc-right {display:flex;flex-direction:column;gap:12px}
.dc-method {display:flex;flex-direction:column;gap:4px;padding:18px 22px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);text-decoration:none;transition:border-color .3s ease,background .3s ease,transform .3s var(--ease)}
.dc-method:hover {border-color:rgba(255,107,40,.4);background:rgba(255,107,40,.05);transform:translateY(-2px)}
.dc-label {font-family:var(--mono,'JetBrains Mono',monospace);font-size:.6rem;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.45);text-transform:uppercase}
.dc-method strong {font-family:var(--display);font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.015em}
.dc-meta {font-size:.72rem;color:rgba(255,255,255,.5);font-family:var(--mono,'JetBrains Mono',monospace);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.dc-cta {justify-content:center;margin-top:6px}

@media (max-width:980px) {
  .manifesto-grid {grid-template-columns:1fr;gap:32px}
  .clients-grid {grid-template-columns:1fr}
  .direct-card {grid-template-columns:1fr;gap:28px;padding:32px 24px}
  .mp-row strong {font-size:1.6rem;min-width:60px}
}

/* === ABOUT === */
.about-mission {padding:80px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.about-grid {display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
.about-text h2 {font-family:var(--display);font-size:1.8rem;font-weight:700;letter-spacing:-.8px;margin:16px 0 20px;line-height:1.25}
.about-text p {color:var(--text2);font-size:.92rem;line-height:1.75;margin-bottom:16px}
.about-text strong {color:var(--text)}
.about-stats {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-stat {background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:28px;text-align:center;transition:.4s var(--ease)}
.about-stat:hover {border-color:var(--border2);transform:translateY(-3px)}
.as-num {font-family:var(--display);font-size:2.2rem;font-weight:700;color:var(--accent);letter-spacing:-1px;line-height:1}
.as-label {font-size:.78rem;color:var(--text3);margin-top:6px}

.about-values {padding:80px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}
.values-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.value-card {background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:34px;transition:.5s var(--ease)}
.value-card:hover {border-color:var(--border2);transform:translateY(-3px)}
.value-num {font-family:var(--display);font-size:2rem;font-weight:700;color:rgba(255,92,53,.12);line-height:1;margin-bottom:12px}
.value-card h3 {font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:6px}
.value-card p {font-size:.85rem;color:var(--text2);line-height:1.6}

.about-vision {padding:80px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.vision-content {max-width:700px;margin:0 auto}
.vision-content h2 {font-family:var(--display);font-size:1.8rem;font-weight:700;letter-spacing:-.8px;margin:16px 0 20px}
.vision-content p {color:var(--text2);font-size:.92rem;line-height:1.75;margin-bottom:16px}
.vision-content strong {color:var(--text)}

/* === RESPONSIVE === */
@media(max-width:1024px) {

    .about-grid {grid-template-columns:1fr}
    .values-grid {grid-template-columns:1fr 1fr}
}

@media(max-width:980px) {

    .values-grid {grid-template-columns:1fr}
    .about-stats {grid-template-columns:1fr 1fr}
}

/* Phone: stats stack 1-column so each number gets full width and doesn't crush. */
@media(max-width:560px) {
    .about-stats {grid-template-columns:1fr;gap:12px}
    .about-grid {gap:36px}
}