/* ==========================================================================
   About page — "warm paper" v2 redesign.
   Scoped under body.abt so it can't leak into other pages. Same token palette
   as contact-v2.css / cheatsheets-v2.css / interview-questions-v2.css.
   ========================================================================== */

.abt {
   --paper:    #E9E8E3;
   --paper2:   #DFDDD7;
   --card:     #F8F7F4;
   --cardEdge: #D6D4CD;
   --rule:     #D6D4CD;
   --rule2:    #C9C7C0;
   --divider:  #DFDDD7;

   --ink:      #232320;
   --ink2:     #45443E;
   --ink3:     #67665F;
   --ink4:     #94938B;
   --ink5:     #B5B4AC;

   --orange:   #E55A12;
   --orangeD:  #C24A0B;
   --orangeS:  #F3E2D2;
   --orangeE:  #E5C4A4;

   --dark:     #232320;

   font-family: 'Instrument Sans', system-ui, sans-serif;
   color: var(--ink);
   background: var(--paper);
   -webkit-font-smoothing: antialiased;
}

.abt ::selection { background: rgba(229, 90, 18, .25); }
.abt [hidden] { display: none !important; }
.abt *:focus { outline: none; }
.abt *:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.abt-main {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 32px 56px;
}
.abt-main a { text-decoration: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.abt-hero {
   padding: 30px 0 34px;
   border-bottom: 1px solid var(--rule);
}
.abt-crumb {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: 'Fragment Mono', monospace;
   font-size: 13.5px;
   letter-spacing: 0.01em;
   color: var(--ink3);
   margin-bottom: 18px;
}
.abt-crumb a { color: var(--ink3); }
.abt-crumb a:hover { color: var(--ink); }
.abt-crumb svg { flex-shrink: 0; }
.abt-crumb [aria-current] { color: var(--ink); font-weight: 600; }
.abt-hero h1 {
   margin: 0;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 52px;
   font-weight: 700;
   letter-spacing: -0.045em;
   line-height: 1.02;
   color: var(--ink);
}
.abt-hero h1 .abt-dot { color: var(--orange); }
.abt-hero p {
   margin: 10px 0 0;
   font-size: 18px;
   color: var(--ink3);
   line-height: 1.5;
   max-width: 620px;
}

/* ── Stats strip — proof band framed by the hero rule above and its own
      rule below ─────────────────────────────────────────────────────────── */
.abt-stats {
   padding: 32px 0 30px;
   border-bottom: 1px solid var(--rule);
}
.abt-stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}
.abt-stat:not(:first-child) {
   padding-left: 28px;
   border-left: 1px solid var(--rule);
}
.abt-stat__n {
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 48px;
   font-weight: 700;
   letter-spacing: -0.045em;
   line-height: 1;
   color: var(--ink);
}
.abt-stat__l {
   margin-top: 6px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink3);
}
.abt-stats-note {
   margin-top: 18px;
   font-family: 'Fragment Mono', monospace;
   font-size: 12px;
   color: var(--ink4);
}

/* ── Numbered sections ──────────────────────────────────────────────────── */
.abt-section { padding: 48px 0; }
.abt-section + .abt-section { border-top: 1px solid var(--rule); }
.abt-kicker {
   font-family: 'Fragment Mono', monospace;
   font-size: 12.5px;
   font-weight: 400;
   letter-spacing: 0.04em;
   color: var(--orange);
   margin-bottom: 14px;
}
.abt-h2 {
   margin: 0;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 36px;
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 1.1;
   color: var(--ink);
}
.abt-h2 .italic { font-style: normal; color: var(--orange); }
.abt-h2 .accent { color: var(--orange); }
.abt-sub {
   margin: 12px 0 0;
   font-size: 17px;
   color: var(--ink3);
   line-height: 1.55;
   max-width: 620px;
}

/* Story prose + pull-quote */
.abt-prose { margin-top: 22px; max-width: 680px; }
.abt-prose p {
   margin: 0;
   font-size: 17px;
   color: var(--ink2);
   line-height: 1.7;
}
.abt-prose p + p { margin-top: 18px; }
.abt-quote {
   margin: 26px 0;
   padding: 4px 0 4px 22px;
   border-left: 3px solid var(--orange);
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-style: normal;
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.4;
   color: var(--ink);
   max-width: 560px;
}

/* ── "What makes us different" card grid ────────────────────────────────── */
.abt-card-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-top: 28px;
}
.abt-card {
   padding: 22px 20px 24px;
   border-radius: 14px;
   background: var(--card);
   border: 1px solid var(--cardEdge);
}
.abt-card__head {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 16px;
}
.abt-card__icon {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: var(--paper);
   border: 1px solid var(--rule);
   color: var(--ink2);
   display: grid;
   place-items: center;
   flex-shrink: 0;
}
.abt-card__n {
   font-family: 'Fragment Mono', monospace;
   font-size: 11.5px;
   font-weight: 400;
   letter-spacing: 0.04em;
   color: var(--ink4);
}
.abt-card__title {
   margin: 0;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.15;
   color: var(--ink);
}
.abt-card__body {
   margin: 8px 0 0;
   font-size: 14.5px;
   color: var(--ink3);
   line-height: 1.55;
}

/* ── Say hello ──────────────────────────────────────────────────────────── */
.abt-hello {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 320px;
   gap: 28px;
   align-items: start;
}
.abt-hello h2 {
   margin: 0;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -0.035em;
   color: var(--ink);
}
.abt-hello p {
   margin: 10px 0 0;
   font-size: 16px;
   color: var(--ink3);
   line-height: 1.6;
   max-width: 480px;
}
.abt-links {
   border: 1px dashed var(--rule2);
   border-radius: 14px;
   padding: 16px 18px;
}
.abt-links__label {
   display: block;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink4);
   margin-bottom: 10px;
}
.abt-links__list { display: flex; flex-direction: column; gap: 8px; }
.abt-links__list a {
   display: flex;
   align-items: baseline;
   gap: 8px;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--ink2);
}
.abt-links__list a:hover { color: var(--ink); }
.abt-links__list .abt-handle {
   font-family: 'Fragment Mono', monospace;
   font-size: 12px;
   font-weight: 400;
   color: var(--ink4);
}

/* ── Final dark band ────────────────────────────────────────────────────── */
.abt-final {
   margin-top: 8px;
   padding: 56px 48px;
   border-radius: 18px;
   background: linear-gradient(180deg, #2E2E2A, var(--dark));
   color: var(--paper);
   border: 1px solid var(--darkD);
   box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px -22px rgba(35,35,32,.7);
   position: relative;
   overflow: hidden;
}
.abt-final::before {
   content: '';
   position: absolute;
   right: 28px; top: 26px; width: 110px; height: 18px; border-radius: 3px;
   background: repeating-linear-gradient(90deg, #3A3A34 0 2px, transparent 2px 7px);
   pointer-events: none;
}
.abt-final__row {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 24px;
   position: relative;
}
.abt-final__lead { max-width: 640px; min-width: 280px; }
.abt-final .abt-kicker { color: var(--orange); }
.abt-final h2 {
   margin: 0;
   font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 52px;
   font-weight: 700;
   letter-spacing: -0.045em;
   line-height: 1.0;
   color: var(--paper);
}
.abt-final h2 .italic { font-style: normal; color: #94938B; }
.abt-final h2 .accent { color: var(--orange); }
.abt-final__sub {
   margin: 18px 0 0;
   font-size: 17.5px;
   color: #B5B4AC;
   line-height: 1.55;
   max-width: 520px;
}
.abt-final__ctas {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.abt-final__btn {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 13px 24px;
   border-radius: 10px;
   background: var(--orange);
   color: #F8F7F4;
   font-size: 15.5px;
   font-weight: 600;
}
.abt-final__btn:hover { background: var(--orangeD); }
.abt-final__link {
   font-size: 13.5px;
   color: #94938B;
   text-align: center;
}
.abt-final__link:hover { color: var(--paper); }

/* ── Card grid intermediate breakpoint ──────────────────────────────────── */
@media (max-width: 1020px) {
   .abt-card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (< 860px) ───────────────────────────────────────────────────── */
@media (max-width: 859px) {
   .abt-main { padding: 0 16px 40px; }
   .abt-hero { padding: 18px 0 22px; }
   .abt-hero h1 { font-size: 36px; }
   .abt-hero p { font-size: 16px; }
   .abt-stats { padding: 24px 0 22px; }
   .abt-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
   .abt-stat:not(:first-child) { padding-left: 0; border-left: 0; }
   .abt-stat__n { font-size: 36px; }
   .abt-section { padding: 32px 0; }
   .abt-h2 { font-size: 28px; }
   .abt-quote { font-size: 20px; }
   .abt-card-grid { grid-template-columns: minmax(0, 1fr); }
   .abt-hello { grid-template-columns: minmax(0, 1fr); gap: 20px; }
   .abt-final { padding: 36px 24px; }
   .abt-final h2 { font-size: 36px; }
   .abt-final__sub { font-size: 16px; }
}