/* ==========================================================================
   SIGNL - signlbio.com
   One stylesheet for the whole site. You rarely need to touch this file.
   To change a brand colour, edit the hex values in :root below and every
   page updates at once.
   ========================================================================== */

:root {
  --mint:  #62D2A2;   /* brand mint. logo, graphics, big display words     */
  --deep:  #00825A;   /* readable green. links and small labels            */
  --dark:  #005B4B;   /* dark green. sub-headings, tuned efficacy          */
  --pink:  #CB3293;   /* hot pink. static, inflammation, accent rules      */
  --pale:  #F8C0F6;   /* pale pink. tuned inflammation bar only            */
  --ink:   #0A1F18;   /* body and headline text                           */
  --muted: #4F6862;   /* secondary text                                    */
  --line:  #DCE6E1;   /* hairlines and bar tracks                          */
  --band:  #F3F8F5;   /* pale green section background                     */
  --gut:   104px;     /* left gutter on desktop, clears the rail           */
  --gutr:  80px;      /* right gutter on desktop                          */
  --frame: 1440px;    /* widest layout. Wider screens center it           */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--deep); text-decoration: none; }
a:hover { color: var(--pink); }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink);
  color: #fff; padding: 12px 18px; z-index: 999;
}
.skip:focus { left: 0; }

/* --- the console rail, desktop only -------------------------------------- */
@media (min-width: 1100px) {
  body::before {
    content: "";
    position: absolute; top: 0; bottom: 0; width: 13px;
    left: calc(44px + max(0px, (100% - var(--frame)) / 2));  /* follows the frame */
    z-index: 1; pointer-events: none; opacity: .75;
    background-image:
      linear-gradient(to bottom, var(--line) 0 100%),
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 28px);
    background-size: 1px 100%, 6px 100%;
    background-repeat: no-repeat, repeat-y;
  }
}

/* --- shared layout ------------------------------------------------------- */
/* Above 1440px every page keeps its 1440px layout and sits centered. The
   extra width becomes equal side margins; backgrounds still run edge to edge. */
.wrap {
  padding-left:  calc(var(--gut)  + max(0px, (100% - var(--frame)) / 2));
  padding-right: calc(var(--gutr) + max(0px, (100% - var(--frame)) / 2));
  position: relative; z-index: 2;
}
.section { padding-top: 88px; }
.section--band { background: var(--band); padding-top: 78px; padding-bottom: 76px; margin-top: 96px; }

.split { display: flex; gap: 64px; align-items: flex-start; }
.split--mid { align-items: center; }
.margincol { width: 176px; flex-shrink: 0; padding-top: 12px; }
.body-col { flex: 1 1 auto; min-width: 0; }

/* --- type ---------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 200; letter-spacing: -0.04em; line-height: 1.02; }
h1 { font-size: clamp(42px, 6.4vw, 84px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; letter-spacing: -0.03em; }
h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.22; font-weight: 300; letter-spacing: -0.02em; color: var(--dark); }
p  { margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 62ch; }
p.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--muted); }
.accent { color: var(--mint); font-weight: 500; }
.accent-pink { color: var(--pink); font-weight: 500; }

.label {
  font-size: 10px; font-weight: 500; letter-spacing: .20em;
  text-transform: uppercase; color: var(--pink);
  display: block; margin-bottom: 20px;
}
.label--green { color: var(--deep); }
.label--muted { color: var(--muted); }
.num {
  font-size: 34px; font-weight: 300; line-height: 1; color: var(--pink); display: block; margin-bottom: 12px;
}
.rule { display: block; width: 64px; height: 2px; background: var(--pink); margin: 26px 0; }

/* --- header -------------------------------------------------------------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; min-height: 98px;
  border-bottom: 1px solid var(--line);
}
.site-header .logo img { width: 146px; height: auto; }
.nav { display: flex; gap: 38px; }
.nav a {
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 7px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--deep); }
.nav a[aria-current="page"] { color: var(--deep); border-bottom-color: var(--pink); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 30px;
  font-size: 15px; font-weight: 500; background: var(--mint); color: #06150F;
}
.btn:hover { background: var(--dark); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-left: 2px solid var(--pink);
}
.btn--ghost:hover { background: var(--band); color: var(--ink); }
.btn--ghost-green { border-left-color: var(--deep); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- waveform ------------------------------------------------------------ */
.wave { position: relative; height: 132px; margin-top: 62px; z-index: 2; }
.wave::before {
  content: ""; position: absolute; inset: 0;
  background: url("images/wave-line.svg") center / 100% 100% no-repeat;
}
.wave__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 112px; height: 112px; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.wave__mark img { width: 72px; height: 72px; }
.wave--plain::before { background-image: url("images/wave-line-plain.svg"); }
.wave--plain .wave__mark { display: none; }

/* --- hero layout ---------------------------------------------------------- */
/* 861px and up: text on the left, the two panels on the right. The panel
   column is at most 618px (two 300px panels) and gives way first, so on
   laptops the panels get narrower instead of stacking. The text column never
   drops below the width of the headline. Under 861px the hero stacks: text,
   then the two panels side by side. */
@media (min-width: 861px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(min(38vw, 480px), 1fr) minmax(0, 618px);
    column-gap: 64px; align-items: start;
  }
}

/* --- channel strips (the two hero panels) -------------------------------- */
/* The two panels never wrap: they always sit side by side. */
.consoles { display: flex; gap: 18px; }
.console {
  flex: 1 1 0; min-width: 0; max-width: 300px; padding: 24px 22px;
  background: var(--band); border-top: 2px solid var(--pink);
  display: flex; flex-direction: column; gap: 22px;
}
.console--tuned { border-top-color: var(--mint); }
.console__title {
  font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink);
}
.console__cap { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }
.strips { display: flex; justify-content: center; gap: 30px; }
/* Each strip is 100px wide and shrinks when a panel is narrower than 274px.
   Labels stay centered under their fader and may run past the strip. */
.strip { flex: 0 1 100px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.strip__track { position: relative; width: 52px; height: 208px; }
.strip__groove { position: absolute; left: 23px; top: 0; width: 6px; height: 100%; background: var(--line); }
.strip__fill { position: absolute; left: 23px; bottom: 0; width: 6px; }
.strip__cap { position: absolute; left: 9px; width: 34px; height: 18px; background: var(--ink); }
.strip__line { position: absolute; left: 9px; width: 34px; height: 2px; }
.strip__label {
  font-size: 9px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; text-align: center; white-space: nowrap;
}
/* Laptop widths where the hero layout leaves each panel under 274px wide:
   the two strips size to their labels and spread evenly, as on phones. */
@media (min-width: 861px) and (max-width: 1093px), (min-width: 1100px) and (max-width: 1293px) {
  .console { padding-left: 14px; padding-right: 14px; }
  .strips { justify-content: space-evenly; gap: 4px; }
  .strip { flex: 0 0 auto; }
  .strip__label { letter-spacing: .14em; }
}

/* --- channels figure (/02) ----------------------------------------------- */
.bars { display: flex; flex-direction: column; gap: 30px; }
.bargroup__title {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 10px; margin-bottom: 18px; border-bottom: 2px solid;
}
.bargroup--infl .bargroup__title { color: var(--pink); border-color: var(--pink); }
.bargroup--eff  .bargroup__title { color: var(--deep); border-color: var(--dark); }
.bar { display: flex; align-items: center; gap: 18px; margin-bottom: 13px; }
.bar__label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); width: 76px; flex-shrink: 0;
}
.bar__track { position: relative; flex-grow: 1; height: 10px; background: var(--line); }
.bar__fill { position: absolute; left: 0; top: 0; height: 10px; }

/* --- chips --------------------------------------------------------------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--deep); background: #fff;
  border: 1px solid var(--line); border-left: 2px solid var(--pink);
  padding: 10px 16px;
}
.chipset { display: flex; gap: 56px; flex-wrap: wrap; }

/* Sections whose photo runs to the right edge. Above 1440px the photo stops
   at the edge of the centered layout. Mobile puts the gutter back. */
.bleed-right { padding-right: max(0px, (100% - var(--frame)) / 2); }

/* --- photo with corner marks --------------------------------------------- */
.photo { position: relative; }
.photo::before, .photo::after {
  content: ""; position: absolute; width: 34px; height: 34px; z-index: 2;
}
.photo::before { left: 0; top: 0; border-top: 2px solid var(--pink); border-left: 2px solid var(--pink); }
.photo::after { right: 0; bottom: 0; border-bottom: 2px solid var(--pink); border-right: 2px solid var(--pink); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- news rows ----------------------------------------------------------- */
.newslist { border-top: 1px solid var(--line); }
.newsrow {
  display: flex; gap: 28px; align-items: flex-start;
  padding: 30px 0; border-bottom: 1px solid var(--line);
}
.newsrow:hover .newsrow__title { color: var(--deep); }
.newsrow__n {
  font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--pink);
  width: 34px; flex-shrink: 0; padding-top: 5px;
}
.newsrow__meta { width: 215px; flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; }
.newsrow__src, .newsrow__date {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.newsrow__src { color: var(--deep); font-weight: 500; }
.newsrow__date { color: var(--muted); }
.newsrow__body { flex: 1 1 auto; min-width: 0; }
.newsrow__title { font-size: 21px; line-height: 1.35; color: var(--ink); margin-bottom: 9px; }
.newsrow__desc { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.newsrow__arrow { color: var(--pink); flex-shrink: 0; padding-top: 4px; }

/* --- contact rows -------------------------------------------------------- */
.bigmail {
  display: inline-block; font-size: clamp(22px, 3vw, 30px); font-weight: 300;
  letter-spacing: -.02em; color: var(--deep);
  border-bottom: 2px solid var(--pink); padding-bottom: 8px; margin-bottom: 38px;
}
.deetrow { display: flex; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.deetrow__k {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  width: 120px; flex-shrink: 0; padding-top: 3px; color: var(--deep);
}
.deetrow__k--pink { color: var(--pink); }
.deetrow p { margin: 0; }

/* --- seed round ---------------------------------------------------------- */
.seed { background: var(--band); margin-top: 100px; padding-top: 52px; padding-bottom: 56px; }
.seed .mail {
  font-size: 16px; font-weight: 500; color: var(--deep);
  border-bottom: 2px solid var(--pink); padding-bottom: 4px;
}

/* --- footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line); margin-top: 96px;
  padding-top: 38px; padding-bottom: 46px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.site-footer .logo img { width: 84px; }
.site-footer .copy { font-size: 13px; color: var(--muted); }
.footnav { display: flex; gap: 30px; flex-wrap: wrap; }
.footnav a {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.footnav a:last-child { color: var(--deep); }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 1099px) {
  :root { --gut: 24px; --gutr: 24px; }
}
@media (max-width: 860px) {
  /* Stacked columns must fill the width. Without this, flex-start on the
     cross axis shrinks each child to its content and the bars collapse. */
  .split { flex-direction: column; gap: 32px; align-items: stretch; }
  .split > * { flex-basis: auto !important; }

  /* Put the right gutter back on the sections that bleed on desktop. */
  .bleed-right { padding-right: var(--gutr); }

  /* Show the whole photograph rather than a tall centre crop of it. */
  .photo { height: auto !important; }
  .photo img { height: auto; }
  .margincol { width: auto; padding-top: 0; }
  .num { font-size: 26px; }
  .section { padding-top: 56px; }
  .section--band { margin-top: 56px; padding-top: 52px; padding-bottom: 52px; }
  .seed { margin-top: 56px; }
  .site-footer { margin-top: 56px; }
  .wave { height: 92px; margin-top: 40px; }
  .wave__mark { width: 84px; height: 84px; }
  .wave__mark img { width: 54px; height: 54px; }
  .site-header { min-height: 0; padding-top: 22px; padding-bottom: 18px; }
  .site-header .logo img { width: 118px; }
  .nav { gap: 22px; width: 100%; }
  .nav a { font-size: 11px; letter-spacing: .12em; }
  .consoles { gap: 12px; }
  .console { max-width: none; }
  .newsrow { flex-wrap: wrap; gap: 14px; }
  .newsrow__meta { width: auto; flex-direction: row; gap: 14px; }
  .newsrow__body { flex-basis: 100%; }
  .newsrow__arrow { display: none; }
  .deetrow { flex-direction: column; gap: 8px; }
  .deetrow__k { width: auto; }
  .chipset { gap: 28px; }
}

/* Phones, under 608px: the panels are at their narrowest. Fader height is
   unchanged; labels and track margins shrink to fit. */
@media (max-width: 607px) {
  .consoles { gap: 10px; }
  .console { padding: 20px 10px; gap: 18px; }
  .strips { justify-content: space-evenly; gap: 4px; }
  .strip { flex: 0 0 auto; }
  .strip__track { width: 34px; }
  .strip__groove, .strip__fill { left: 14px; }
  .strip__cap, .strip__line { left: 0; }
  .strip__label { font-size: 8px; letter-spacing: .1em; }
}
/* Narrow phones, under 375px, and the smallest, under 360px. */
@media (max-width: 374px) {
  .console { padding-left: 8px; padding-right: 8px; }
  .strip__label { letter-spacing: .06em; }
}
@media (max-width: 359px) {
  .strip__label { font-size: 7.5px; }
}