/* ============================================================
   AskMAE.ai(TM) — css/style-products.css
   Products page visual system.
   ============================================================ */
:root {
  --mae: #1a0e4b;
  --maeblend: #080718;
  --maelight: #a08fe8;
  --maedark: #0f0a1d;
  --gold-mae: #b09c63;
  --tan: #a0825a;
  --beige: #ccbca6;
  --charcoal: #2e2e2e;
  --steel: #dadada;
  --ink: #1c1c1c;
  --reiki: #fffdee;
  --sunshine: #fcd581;
  --ivory: #fcfbfa;
  --jesus: #5a3696;
  --lilac: #c7b5ec;
  --turquoise: #00ccff;
  --muted: #c9d0ff;
  --base: #04040d;
  --base-2: #080718;
  --accent: #6041b9;
  --accent-2: #8f7dff;

  --void: #0b062c;
  --purple-deep: #1a0e4b;
  --purple-royal: #5a3696;
  --purple-glow: #a08fe8;
  --gold: #C9982F;
  --gold-bright: #EFC463;
  --canvas: #F7F5FA;        /* almost white, a hint of light purplish gray */
  --lavender-mute: #A493C4;
  --line: rgba(247, 245, 250, 0.10);
  --line-bright: rgba(239, 196, 99, 0.35);

  --font-display: 'Arial', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', Menlo, monospace;

  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Products page additions ---- */

  /* the dark ground, header and footer only */
  --navy: #1a0e4b;
  --plum: #2f2358;

  /* the page */
  --canvas-edge: #E4DFEC;   /* the same canvas, one step darker */
  --page-ink: #1d0048;        /* all body type */
  --page-ink-soft: #2f2358;   /* secondary type */
  --rule-gold: #988959;       /* hairlines and marks */
  --rule-gold-ink: #6f6435;   /* the same gold, dark enough to read */
  --purple-bright: #a054ff;   /* thin lines and marks only */
  --yellow: #ffcc00;          /* accent, dark bands only */

  /* THE ROLLOVER. One value drives every hover on the page.
     0.28 over the canvas, 0.10 over the dark bands. */
  --wash-light: rgba(239, 196, 99, 0.28);
  --wash-dark:  rgba(239, 196, 99, 0.10);

  /* Clearance for the fixed header. If the logo is ever
     resized, this is the one line to change. */
  --header-h: 140px;

  --measure: 68ch;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section: clamp(3rem, 7vw, 5.5rem);
}


/* ------------------------------------------------------------
   2. RESET AND MOBILE SAFETY
   This block is what actually makes the page reformat on a
   phone. The viewport tag cannot do it alone if any single
   child is wider than the screen.
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, iframe, table, pre {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, p, li, span, a, div, button {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}


/* ------------------------------------------------------------
   3. THE CANVAS
   ------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.78rem + 0.62vw, 1.1875rem);
  line-height: 1.72;
  color: var(--page-ink);
  background: var(--canvas);
}

/* nav.css fixes the header over the page, so the content has
   to start below it */
main {
  display: block;
  background: var(--canvas);
  padding-top: var(--header-h);
}

section { background: none; }


/* ------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
  color: var(--page-ink);
  max-width: 24ch;
}

h1 {
  font-size: clamp(2rem, 1.1rem + 3.9vw, 3.35rem);
  max-width: 19ch;
}

h2 {
  font-size: clamp(1.6rem, 1.05rem + 2.4vw, 2.45rem);
  padding-bottom: 0.6rem;
  max-width: 26ch;
}

h3 {
  font-size: clamp(1.12rem, 0.95rem + 0.8vw, 1.45rem);
  color: var(--page-ink);
  max-width: var(--measure);
}

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--page-ink-soft);
}

p {
  margin: 0 0 1.15rem;
  max-width: var(--measure);
  color: var(--page-ink);
}

a {
  color: var(--page-ink);
  text-decoration-color: var(--purple-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lede {
  font-size: clamp(1.12rem, 0.95rem + 0.8vw, 1.4rem);
  line-height: 1.6;
  color: var(--page-ink-soft);
  max-width: 58ch;
}

/* Small mono labels. The page's recurring detail. */
.eyebrow,
.label,
.tag,
.acc-trigger span span:first-child {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule-gold-ink);
}

.eyebrow {
  display: block;
  margin-bottom: 0.9rem;
}

/* STEP ONE through STEP SIX, each on its own gold rule */
span.eyebrow {
  display: inline-block;
  margin-top: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule-gold);
}


/* ------------------------------------------------------------
   5. LAYOUT AND SECTION RHYTHM
   Single column everywhere. Nothing sits two across.
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section); }

.section-head,
.section-head.wide { max-width: 100%; }

.section-head.wide p { line-height: 1.85; }


/* ------------------------------------------------------------
   6. HEADER BAND
   nav.css sets .site-header to a flat var(--void), so the
   gradient below is written as body > .site-header to outrank
   it. Everything else about the nav is left to nav.css.
   ------------------------------------------------------------ */
body > .site-header {
  background-color: var(--void);
  background-image: linear-gradient(160deg,
    var(--navy)  0%,
    var(--void) 58%,
    var(--plum) 100%);
  border-bottom: 1px solid var(--rule-gold);
  box-shadow: 0 14px 34px rgba(16, 8, 25, 0.22);
}

.site-header .nav {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}

.site-header .logo img { display: block; }

.site-header a { text-decoration: none; }
.site-header .nav-links a { color: var(--canvas); }
.site-header .nav-links a:hover { color: var(--gold-bright); }

/* ------------------------------------------------------------
   7. BUTTONS
   style.css is not loaded on this page, so .btn lives here.
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease),
              color 0.3s var(--ease),
              border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
}

.site-header .btn-ghost {
  border-color: var(--line-bright);
  color: var(--gold-bright);
}

main .btn-ghost {
  border-color: var(--rule-gold);
  color: var(--page-ink);
}


/* ------------------------------------------------------------
   8. HERO AND TERMINAL
   ------------------------------------------------------------ */
.terminal {
  font-family: var(--font-mono);
  font-size: clamp(0.76rem, 0.7rem + 0.3vw, 0.92rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-ink-soft);
  padding: 0.5rem 0 0.5rem 0.95rem;
  border-left: 2px solid var(--purple-bright);
}

.terminal::after {
  content: "_";
  margin-left: 0.15em;
  animation: caret 1.05s steps(1) infinite;
}

@keyframes caret { 50% { opacity: 0; } }


/* ------------------------------------------------------------
   9. THE 4-PART ARCHITECTURE STACK
   products.css sets these four across with a 200px minimum,
   which is exactly what overflows a phone. The selectors below
   carry one extra class so they outrank that file.
   ------------------------------------------------------------ */
.stack-section { margin-block: clamp(2rem, 6vw, 3.5rem); }

.stack-title h3 {
  font-size: clamp(1.22rem, 1rem + 1.05vw, 1.7rem);
  max-width: 32ch;
}

.stack-title p {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule-gold-ink);
}

.stack-section .stack-layers-horizontal {
  display: block;          /* beats the flex row in products.css */
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 2rem;
  border-left: 1px solid var(--rule-gold);
}

.stack-section .stack-layers-horizontal .stack-layer {
  position: relative;
  flex: none;              /* beats flex:1 in products.css */
  min-width: 0;            /* beats min-width:200px */
  width: 100%;
  padding: 1.5rem 0 1.5rem 1.6rem;
  border-radius: var(--radius);
}

.stack-section .stack-layer + .stack-layer {
  border-top: 1px solid var(--canvas-edge);
}

.stack-section .stack-layer::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 2.15rem;
  width: 8px;
  height: 8px;
  background: var(--rule-gold);
  border-radius: 50%;
}

.stack-layer .layer-top h2 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rule-gold-ink);
  border: 0;
  padding: 0;
  margin-bottom: 0.5rem;
  max-width: none;
}

.stack-layer .layer-top h3 {
  font-size: clamp(1.08rem, 0.95rem + 0.65vw, 1.35rem);
  margin-bottom: 0.35rem;
}

.stack-layer p {
  color: var(--page-ink-soft);
  font-size: 0.98em;
  max-width: 62ch;
}

.stack-layer br { display: none; }


/* ------------------------------------------------------------
   10. ACCORDIONS
   Same markup, same behavior. script.js toggles .acc-item.active,
   so that is the open state. On the canvas the rows read as a
   ruled index: gold hairlines, serif product names, mono tags.
   ------------------------------------------------------------ */
.accordion {
  width: 100%;
  max-width: 100%;
  margin-top: 2rem;
  border-top: 1px solid var(--rule-gold);
}

.acc-item {
  width: 100%;
  border-bottom: 1px solid var(--rule-gold);
  border-radius: var(--radius);
}

.acc-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.15rem;
  width: 100%;
  padding: 1.35rem 1rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.26rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--page-ink);
}

/* The bracketed category tag before each product name. This
   catches both the .tag markup and the bracketed class used in
   the operating system loops. */
.acc-trigger span span:first-child {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--rule-gold-ink);
}

.acc-trigger .icon {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--purple-bright);
  margin-top: 0.3rem;
  transition: transform 0.3s var(--ease);
}

.acc-item.active .icon { transform: rotate(45deg); }

.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}

.acc-item.active > .acc-panel { max-height: 4000px; }

.acc-panel-inner {
  padding: 0.35rem 1rem 1.9rem 2.4rem;
  border-left: 2px solid var(--purple-bright);
  margin: 0 0 0.4rem 1rem;
}

.acc-panel-inner p {
  color: var(--page-ink-soft);
  max-width: var(--measure);
}

.acc-panel-inner p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------
   11. ROLLOVERS
   Taken from the live site's .stack-layer:hover, which is a
   pale gold transparency plus a 4px nudge. The alpha is lifted
   from 0.06 to 0.28 here because these rows sit on the pale
   canvas rather than on the dark ground, and 0.06 would not be
   visible. Change --wash-light in the token block to tune it
   everywhere at once.
   ------------------------------------------------------------ */
.acc-item,
.stack-section .stack-layer {
  transition: background 0.35s var(--ease),
              transform 0.35s var(--ease),
              border-color 0.35s var(--ease);
}

.acc-item:hover,
.acc-item:focus-within,
.stack-section .stack-layer:hover {
  background: var(--wash-light);
  border-color: var(--rule-gold);
  transform: translateX(4px);
}

/* The open row keeps the highlight so you can see where you are */
.acc-item.active { background: var(--wash-light); }

.acc-trigger:hover .icon,
.acc-trigger:focus-visible .icon { color: var(--page-ink); }

.acc-trigger:hover span span:first-child { color: var(--page-ink-soft); }

/* the gold node on the architecture spine */
.stack-section .stack-layer::before {
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.stack-section .stack-layer:hover::before {
  transform: scale(1.6);
  background: var(--gold-bright);
}

/* Buttons take the same wash */
.site-header .btn-ghost:hover {
  background: var(--wash-dark);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-2px);
}

main .btn-ghost:hover {
  background: var(--wash-light);
  border-color: var(--rule-gold-ink);
  transform: translateY(-2px);
}

/* Body links on the canvas */
main a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(var(--purple-bright), var(--purple-bright));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 100% 1px;
  transition: background-size 0.3s var(--ease), color 0.25s var(--ease);
}

main a:not(.btn):hover {
  color: var(--page-ink-soft);
  background-size: 100% 2px;
}

/* Footer links take the dark wash */
footer a {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.35s var(--ease), color 0.25s var(--ease);
}

footer a:hover,
footer a:focus-visible {
  background: var(--wash-dark);
  color: var(--gold-bright);
}

/* The nav link underline is set in nav.css and is left alone. */


/* ------------------------------------------------------------
   12. FOOTER BAND
   Flat dark purple, no gradient. One gold hairline closes the
   canvas, then the contact line, the copyright, and the
   confidentiality notice run in a single centered column.
   ------------------------------------------------------------ */
footer {
  position: relative;
  margin-top: clamp(4rem, 9vw, 7rem);
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 2.25rem;
  background: var(--navy);
  border-top: 1px solid var(--rule-gold);
  color: var(--canvas);
  text-align: center;
}

footer .container {
  max-width: 720px;
  display: block;
}

footer p {
  max-width: 100%;
  margin-inline: auto;
  color: var(--canvas);
}

/* contact line */
footer p:first-child {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-bright);
}

footer a { color: var(--gold-bright); }

footer .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: none;
  color: rgba(246, 242, 234, 0.62);
}

/* the confidentiality notice continues the same flat ground */
.tam-total {
  position: relative;
  background: var(--navy);
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 3.75rem);
  text-align: center;
}

.tam-total .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.95;
  letter-spacing: 0.07em;
  text-transform: none;
  color: rgba(246, 242, 234, 0.48);
  max-width: 78ch;
  margin-inline: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-bright);
}


/* ------------------------------------------------------------
   13. BACK TO TOP, MOTION, FOCUS
   ------------------------------------------------------------ */
.to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 120;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--canvas);
  background: var(--page-ink);
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(29, 0, 72, 0.28);
  transition: background 0.3s var(--ease),
              color 0.3s var(--ease),
              transform 0.3s var(--ease);
}

.to-top:hover {
  background: var(--page-ink-soft);
  color: var(--gold-bright);
  transform: translateY(-3px);
}

[data-reveal] { opacity: 1; }

:focus-visible {
  outline: 2px solid var(--purple-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ------------------------------------------------------------
   14. PRINT
   The canvas is already a printable document. This strips the
   dark bands and opens every accordion, so the page prints as
   a brochure master.
   ------------------------------------------------------------ */
@media print {
  @page { margin: 16mm; }

  body {
    background: #ffffff !important;
    color: var(--page-ink) !important;
    font-size: 11.5pt;
    line-height: 1.55;
  }

  main { padding-top: 0 !important; }

  .site-header,
  .nav,
  .to-top,
  .terminal { display: none !important; }

  footer,
  .tam-total {
    background: #ffffff !important;
    color: var(--page-ink) !important;
    padding-top: 8mm !important;
    margin-top: 8mm !important;
    border-color: var(--rule-gold) !important;
  }

  footer p,
  footer .label,
  footer a,
  .tam-total .label {
    color: var(--page-ink) !important;
    border-color: var(--rule-gold) !important;
  }

  h1, h2, h3, h4, p, li, span, div { color: var(--page-ink) !important; }
  h2 { border-bottom: 0.5pt solid var(--rule-gold) !important; }

  .acc-item,
  .acc-item.active,
  .stack-layer { background: none !important; transform: none !important; }

  .acc-panel { max-height: none !important; overflow: visible !important; }
  .acc-item  { break-inside: avoid; border-bottom: 0.5pt solid var(--rule-gold) !important; }
  .acc-trigger .icon { display: none !important; }
  .acc-panel-inner { border-left: 0.5pt solid var(--rule-gold) !important; }

  .eyebrow, .label, .tag { color: var(--rule-gold-ink) !important; }
  a { color: var(--page-ink) !important; text-decoration: none; }
  section { padding-block: 9mm !important; }
}

/* ============================================
   CTA / Contact
   ============================================ */
.cta{
  border-radius:14px; margin:0 auto; max-width:1180px;
  background:radial-gradient(ellipse 700px 400px at 20% 0%, rgba(124,77,204,0.4), var(--purple-deep));
  border:1px solid var(--line-bright);
  padding:70px 50px; text-align:center;
}
.cta h2{margin-bottom:16px;}
.cta p{margin:0 auto 34px; }
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.form-row{margin-bottom:18px;}
.form-row label{font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--lavender-mute); display:block; margin-bottom:8px;}
.form-row input, .form-row textarea, .form-row select{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:5px;
  padding:13px 14px; color:var(--ivory); font-family:var(--font-body); font-size:0.95rem;
  transition:border-color 0.25s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{border-color:var(--gold-bright); outline:none;}
.form-row textarea{resize:vertical; min-height:120px;}
.form-msg{font-family:var(--font-mono); font-size:0.82rem; margin-top:16px;}
.form-msg.ok{color:var(--gold-bright);}
.form-msg.err{color:#e08585;}

.contact-info .info-row{display:flex; gap:14px; margin-bottom:22px; align-items:flex-start;}
.contact-info .info-row .k{font-family:var(--font-mono); font-size:0.7rem; color:var(--gold-bright); text-transform:uppercase; letter-spacing:0.08em; width:90px; flex-shrink:0; padding-top:2px;}
.contact-info .info-row .v{color:var(--ivory); font-size:0.95rem;}


/* ============================================
   AskMAE.ai™ Home Page Only
   ============================================ */

.who-we-are{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:150px 40px 110px;
}

.who-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:70px;
}

.who-logo{
  width:420px;
  flex:0 0 420px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.who-logo img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.who-content{
  flex:1;
  min-width:0;
  max-width:760px;
}

.who-content h1{margin-bottom:24px;}
.who-content p{margin:18px 0; line-height:1.7;}

.who-we-are > .container{
  width:100%;
  max-width:1180px;
  margin:70px auto 0;
  padding:0 24px;
  background:transparent;
  border:0;
  box-shadow:none;
  outline:0;
}

.who-we-are .os-stack,
.who-we-are .os-stack::before,
.who-we-are .os-stack::after{
  content:none;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  outline:0;
  padding:0;
  backdrop-filter:none;
}

.who-we-are .stack-title{
  display:block;
  margin:0 0 24px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.who-we-are .stack-verticals{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.who-we-are .door{
  display:block;
  height:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px 28px;
  margin:0;
  background:linear-gradient(180deg, rgba(78,36,137,0.10), transparent);
  position:relative;
  overflow:hidden;
  transition:border-color 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s var(--ease);
}

.who-we-are .door::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--turquoise);
}

.who-we-are .door.d2::before{background:green;}
.who-we-are .door.d3::before{background:var(--purple-glow);}

.who-we-are .door:hover,
.who-we-are .door:focus{
  border-color:var(--line-bright);
  transform:translateY(-6px);
  background:linear-gradient(180deg, rgba(78,36,137,0.22), transparent);
}

.who-we-are .door-kicker{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--turquoise);
  display:block;
  margin-bottom:12px;
}

.who-we-are .d2 .door-kicker{color:var(--gold-bright);}
.who-we-are .d3 .door-kicker{color:var(--purple-glow);}
.who-we-are .door h3{font-size:1.4rem; margin:0 0 10px;}
.who-we-are .door p{margin:0 0 14px; font-size:0.95rem;}
.who-we-are .door .go{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; color:var(--gold-bright); margin:0;}

@media (max-width:900px){
  .who-we-are{padding:120px 24px 64px;}
  .who-wrap{flex-direction:column; gap:35px;}
  .who-logo{width:min(420px, 100%); flex:none;}
  .who-content{max-width:100%;}
  .who-we-are .stack-verticals{grid-template-columns:1fr;}
}

/* Phones. The 140px header clearance above is sized for the desktop
   two row nav. On a narrow screen that nav is much shorter, which left
   a large empty gap under it. */
@media (max-width: 820px){
  :root{ --header-h: 96px; }
}
@media (max-width: 560px){
  :root{ --header-h: 84px; }
}