/* ===========================================================
   Red Z Apps — redzapps.com
   Brand: #231f20 / #ffffff / #dc1e3d  (from Company Logo.ai)
   =========================================================== */

:root{
  --bg:        #080808;
  --bg-alt:    #0f0f0f;
  --surface:   #141414;
  --surface-2: #1b1b1b;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --red:       #dc1e3d;
  --red-lift:  #ff4a63;
  --red-deep:  #8e1226;

  --text:      #f5f5f5;
  --muted:     rgba(245,245,245,.62);
  --faint:     rgba(245,245,245,.42);

  /* Brand face: Agency FB Bold (the logo font). Monotype-licensed and bundled
     with MS Office, so it cannot be embedded as a webfont — it renders exactly
     for visitors who have it, and falls back to the closest free condensed match. */
  --display: "Agency FB", "Saira Condensed", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r: 14px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button):focus-visible{
  outline:2px solid var(--red-lift); outline-offset:3px; border-radius:4px;
}

/* ---------- typography ---------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.01em;
  margin:0;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.3rem); }
h3{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }

h1 em{ font-style:normal; color:var(--red); }

p{ margin:0 0 1em; }

.eyebrow{
  font-family:var(--body);
  font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--red);
  margin:0 0 14px;
}

.lede{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--muted); max-width:56ch; }

/* ---------- nav ---------- */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.scrolled{ border-bottom-color:var(--line); background:rgba(8,8,8,.92); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px; }

/* the wordmark is an SVG, so no type styling is needed here */
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ height:24px; width:auto; display:block; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--muted);
  position:relative; transition:color .2s ease;
}
.nav-links a:hover{ color:#fff; }
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--red); transition:width .25s ease;
}
.nav-links a:not(.nav-cta):hover::after{ width:100%; }

.nav-cta{
  background:var(--red); color:#fff !important;
  padding:9px 20px; border-radius:999px; font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{ background:var(--red-lift); transform:translateY(-1px); }

.burger{
  display:none; flex-direction:column; gap:5px; background:none; border:0;
  padding:10px; cursor:pointer;
}
.burger span{ width:24px; height:2px; background:#fff; transition:transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 24px 22px; border-top:1px solid var(--line);
  background:rgba(8,8,8,.97);
}
/* a class rule outranks the UA style for [hidden], so restate it */
.mobile-menu[hidden]{ display:none; }
/* and keep it closed if the viewport grows while the menu is open */
@media (min-width:721px){ .mobile-menu{ display:none; } }
.mobile-menu a{
  text-decoration:none; padding:13px 0; color:var(--muted);
  font-weight:500; border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom:0; }

/* ---------- hero ---------- */

.hero{ position:relative; padding:clamp(48px,7vw,96px) 0 clamp(52px,6vw,80px); overflow:hidden; }

.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(720px 460px at 22% 24%, rgba(220,30,61,.20), transparent 68%),
    radial-gradient(540px 420px at 88% 6%, rgba(220,30,61,.09), transparent 70%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
}

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,64px); align-items:center;
}

/* --- anniversary emblem --- */

.emblem-wrap{ display:flex; justify-content:center; }

.emblem{
  width:min(100%, 460px); height:auto;
  filter:drop-shadow(0 26px 60px rgba(220,30,61,.34));
  animation:emblem-in 1s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes emblem-in{
  from{ opacity:0; transform:scale(.86) rotate(-6deg); }
  to{ opacity:1; transform:none; }
}

.emblem .rays{ transform-origin:210px 210px; animation:spin 34s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --- tap to celebrate -------------------------------------------------
   The rays keep their CSS animation as the no-JS baseline; app.js reaches
   it through getAnimations() and ramps playbackRate, so the speed-up is a
   smooth acceleration rather than a restart. Everything below is the
   one-shot burst, driven by the .burst class. -------------------------- */

.emblem{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.emblem:focus{ outline:none; }
.emblem:focus-visible{ outline:2px solid var(--red-lift); outline-offset:6px; border-radius:50%; }

/* every animated part spins/scales about the emblem centre unless told otherwise */
.emblem .e-five,
.emblem .e-plate,
.emblem .e-arc-top,
.emblem .e-arc-bot,
.emblem .e-ring-outer,
.emblem .e-ring-mid,
.emblem .e-disc,
.emblem .e-pulse{ transform-origin:210px 210px; }

.emblem:hover .e-five{ animation:five-nudge .5s ease-out; }

.emblem.burst .e-five{ animation:five-pop 1.1s cubic-bezier(.2,1.5,.35,1); }
.emblem.burst .e-plate{ animation:plate-flip .9s cubic-bezier(.2,.9,.3,1) .06s both; }
.emblem.burst .e-arc-top{ animation:arc-sweep 1s cubic-bezier(.2,.8,.3,1) both; }
.emblem.burst .e-arc-bot{ animation:arc-sweep 1s cubic-bezier(.2,.8,.3,1) .1s both; }
.emblem.burst .e-ring-outer{ animation:ring-throb .8s ease-out; }
.emblem.burst .e-ring-mid{ animation:ring-throb .8s ease-out .08s; }
.emblem.burst .e-pulse{ animation:pulse-out 1.1s cubic-bezier(.15,.7,.3,1); }
.emblem .e-leaf{
  /* fill-box + 0% 50% pins the origin to the leaf's own stem joint. Without
     this, an SVG element resolves transform-origin against the view-box and
     every leaf would pivot around the middle of the emblem instead. */
  transform-box:fill-box;
  transform-origin:0% 50%;
}
.emblem.burst .e-leaf{
  /* --i is written into each leaf by tools/build_emblem.py, 0 at the tip */
  animation:leaf-flutter .75s cubic-bezier(.3,1.4,.4,1) both;
  animation-delay:calc(var(--i, 0) * 55ms);
}
.emblem.burst .e-stem{ animation:ring-throb .7s ease-out; }

@keyframes five-nudge{
  50%{ transform:scale(1.04); }
}
@keyframes five-pop{
  0%{ transform:scale(1) rotate(0); }
  28%{ transform:scale(1.22) rotate(-5deg); }
  55%{ transform:scale(.94) rotate(3deg); }
  78%{ transform:scale(1.06) rotate(-1deg); }
  100%{ transform:scale(1) rotate(0); }
}
@keyframes plate-flip{
  0%{ transform:perspective(400px) rotateX(0) scale(1); }
  35%{ transform:perspective(400px) rotateX(-70deg) scale(1.08); }
  100%{ transform:perspective(400px) rotateX(0) scale(1); }
}
@keyframes arc-sweep{
  0%{ transform:rotate(-14deg); opacity:.15; }
  100%{ transform:rotate(0); opacity:1; }
}
@keyframes ring-throb{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.035); }
  100%{ transform:scale(1); }
}
@keyframes pulse-out{
  0%{ transform:scale(1); opacity:.85; stroke-width:3; }
  100%{ transform:scale(1.52); opacity:0; stroke-width:.5; }
}
@keyframes leaf-flutter{
  0%{ transform:scale(1) rotate(0); }
  40%{ transform:scale(1.4) rotate(12deg); }
  100%{ transform:scale(1) rotate(0); }
}


.hero-copy h1{ margin-bottom:20px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:.94rem; letter-spacing:.01em;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 28px rgba(220,30,61,.3); }
.btn-primary:hover{ background:var(--red-lift); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--red); color:#fff; transform:translateY(-2px); }

/* ---------- stats ---------- */

.stats{
  position:relative; z-index:1;
  list-style:none; margin:clamp(40px,6vw,72px) 0 0; padding:26px 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.stats li{ display:flex; flex-direction:column; gap:3px; }
.stats strong{
  font-family:var(--display); font-size:clamp(2.4rem,4.4vw,3.4rem);
  font-weight:800; line-height:1; color:var(--red);
}
.stats span{ font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }

/* ---------- sections ---------- */

.section{ padding:clamp(64px,8vw,120px) 0; }
.section.alt{ background:var(--bg-alt); border-block:1px solid var(--line); }

.sec-head{ max-width:660px; margin-bottom:clamp(38px,5vw,66px); }

/* ---------- projects ---------- */

.project{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4.5vw,64px); align-items:center;
  padding:clamp(28px,4vw,48px) 0;
  border-top:1px solid var(--line);
}
.project:first-of-type{ border-top:0; padding-top:0; }
/* order: moves the media to the right, so mirror the tracks too —
   otherwise the copy lands in the narrow column and the rows cramp. */
.project.reverse{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
.project.reverse .project-media{ order:2; }

.media-frame{
  position:relative; aspect-ratio:1/1;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.media-frame img{ width:58%; height:auto; position:relative; z-index:1;
  transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.project:hover .media-frame img{ transform:scale(1.06); }

.frame-bmm{ background:radial-gradient(circle at 50% 42%, #16413c 0%, #0b1a19 62%, #080d0d 100%); }
.frame-dnd{ background:radial-gradient(circle at 50% 42%, #3a2a06 0%, #1a1405 62%, #0c0a04 100%); }
.frame-ccdc{ background:radial-gradient(circle at 50% 42%, #1b2740 0%, #0e1523 62%, #070a10 100%); }

.project-index{
  font-family:var(--display); font-size:3.2rem; font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1.4px rgba(220,30,61,.55);
  margin-bottom:10px;
}
.project-kicker{
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); margin:0 0 8px;
}
.project-body h3{ margin-bottom:14px; }
.project-body > p{ color:var(--muted); max-width:60ch; }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 24px; padding:0; }
.tags li{
  font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--muted);
}

.deliverables{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.deliverable{
  /* minmax(0,1fr): a bare 1fr keeps min-width:auto, so a long unbreakable
     name (bachelorsmealmanager.web.app) would push the nowrap link out. */
  display:grid; grid-template-columns:118px minmax(0,1fr) auto;
  align-items:center; gap:14px;
  padding:15px 18px; background:var(--surface);
  transition:background .2s ease;
}
.deliverable:hover{ background:var(--surface-2); }
.d-type{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
.d-name{ font-weight:600; font-size:.95rem; min-width:0; overflow-wrap:anywhere; }
.d-link{ font-size:.8rem; font-weight:600; white-space:nowrap; }
a.d-link.live{ color:var(--red); text-decoration:none; transition:color .2s ease; }
a.d-link.live:hover{ color:var(--red-lift); text-decoration:underline; }
.d-link.soon{
  color:var(--faint); border:1px dashed var(--line-2);
  padding:4px 11px; border-radius:999px; font-weight:500; font-size:.72rem;
}

.project-note{
  margin:14px 0 0; font-size:.82rem; color:var(--faint);
  padding-left:13px; border-left:2px solid rgba(220,30,61,.5);
}

/* ---------- capability cards ---------- */

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px; }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 26px 26px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(220,30,61,.5); background:var(--surface-2); }
.card-num{
  font-family:var(--display); font-size:.95rem; font-weight:700; letter-spacing:.2em;
  color:var(--red); margin-bottom:16px;
}
.card h3{ font-size:1.32rem; margin-bottom:10px; }
.card p{ color:var(--muted); font-size:.93rem; margin:0; }

/* ---------- about ---------- */

.about-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(28px,5vw,72px); }
.about-copy p{ color:var(--muted); }
.about-copy p:last-child{ margin-bottom:0; }

/* ---------- contact ---------- */

.contact{ position:relative; overflow:hidden; background:var(--bg-alt); border-top:1px solid var(--line); }
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 340px at 50% 0%, rgba(220,30,61,.17), transparent 70%);
}
.contact-inner{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.contact-inner .lede{ margin-bottom:34px; }

.mail-cta{
  display:inline-flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; padding:22px 46px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(20,20,20,.7);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.mail-cta:hover{ border-color:var(--red); transform:translateY(-3px); background:var(--surface-2); }
.mail-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); font-weight:700; }
.mail-addr{
  font-family:var(--display); font-weight:700; letter-spacing:.02em;
  font-size:clamp(1.5rem,3.6vw,2.3rem); color:#fff; text-transform:none;
}
.contact-note{ margin:22px 0 0; font-size:.86rem; color:var(--faint); }

/* ---------- footer ---------- */

.footer{ border-top:1px solid var(--line); padding:52px 0 26px; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.footer-wordmark{ height:30px; width:auto; display:block; }
.footer-brand span{ font-size:.85rem; color:var(--faint); }
.footer-links{ display:flex; flex-wrap:wrap; gap:26px; }
.footer-links a{ font-size:.88rem; color:var(--muted); text-decoration:none; transition:color .2s ease; }
.footer-links a:hover{ color:var(--red); }
.footer-base{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--faint);
}

/* ---------- reveal ---------- */

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.emblem-wrap.reveal{ opacity:1; transform:none; }

/* ---------- responsive ---------- */

@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .emblem-wrap{ order:-1; }
  .emblem{ width:min(100%,380px); }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  /* .project.reverse must be named here — a media query adds no specificity,
     so a bare .project selector would lose to it and stay two-column. */
  .project, .project.reverse, .about-grid{ grid-template-columns:1fr; }
  .project.reverse .project-media{ order:0; }
  .media-frame{ max-width:340px; margin-inline:auto; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:26px 20px; }
}

@media (max-width:720px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  body{ font-size:16px; }
  .deliverable{ grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:14px 16px; }
  .d-type{ grid-column:1 / -1; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-base{ flex-direction:column; }
  .mail-cta{ padding:20px 26px; width:100%; }
}

@media (max-width:480px){
  /* no room for name + pill side by side — stack the row */
  .deliverable{ grid-template-columns:minmax(0,1fr); }
  .d-link{ justify-self:start; margin-top:2px; }
}

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

/* ---------- founder page ---------- */

.founder-hero{ padding-bottom:clamp(44px,5vw,64px); }

.founder-intro{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(28px,5vw,64px); align-items:center;
}

.portrait-wrap{ display:flex; justify-content:center; }
.portrait{
  position:relative; width:min(100%,320px); aspect-ratio:1/1;
  border-radius:50%; overflow:hidden;
  border:2px solid rgba(220,30,61,.55);
  box-shadow:0 22px 60px rgba(220,30,61,.28);
  background:linear-gradient(160deg,#1b1b1b,#0c0c0c);
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }

.founder-copy h1{ margin-bottom:10px; }
.founder-role{
  font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;
}

/* ---------- timeline ---------- */

.timeline{ list-style:none; margin:0; padding:0; }
.tl-item{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:clamp(16px,3vw,40px);
  padding:26px 0; border-top:1px solid var(--line); position:relative;
}
.tl-item:first-child{ border-top:0; padding-top:0; }
.tl-date{
  font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--red); padding-top:4px;
}
.tl-body h3{ font-size:1.35rem; margin-bottom:4px; }
.tl-org{ font-size:.9rem; font-weight:600; color:var(--text); margin:0 0 8px; }
.tl-body > p:last-child{ color:var(--muted); font-size:.95rem; margin:0; max-width:62ch; }

/* ---------- credentials ---------- */

.creds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
/* four cards auto-fit to 3+1 at desktop and leave a hole; 2x2 reads better */
@media (min-width:900px){ .creds{ grid-template-columns:repeat(2,1fr); } }
.cred{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:28px 26px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.cred:hover{ transform:translateY(-4px); border-color:rgba(220,30,61,.5); background:var(--surface-2); }
.cred-tag{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin:0 0 10px;
}
.cred h3{ font-size:1.3rem; margin-bottom:10px; }
.cred p{ color:var(--muted); font-size:.93rem; }
.cred-link{
  display:inline-block; margin-top:4px; font-size:.85rem; font-weight:600;
  color:var(--red); text-decoration:none; transition:color .2s ease;
}
.cred-link:hover{ color:var(--red-lift); text-decoration:underline; }
.cred-tags{ margin:0 0 14px; }
.cred-note{ margin:0; font-size:.85rem; color:var(--faint); }

@media (max-width:960px){
  .founder-intro{ grid-template-columns:1fr; text-align:center; }
  .portrait-wrap{ order:-1; }
  .portrait{ width:min(100%,240px); }
  .founder-copy .lede{ margin-inline:auto; }
  .tl-item{ grid-template-columns:1fr; gap:8px; }
  .tl-body > p:last-child{ max-width:none; }
}

/* ---------- justified body copy ---------- */

/* Justified only where the measure is wide enough to absorb the slack.
   The capability and credential cards run about 30 characters per line, and
   justifying that narrow without hyphenation tears rivers of whitespace
   through the text, so they stay ragged right. */
.hero-copy .lede,
.founder-copy .lede,
.sec-head .lede,
.about-copy p,
.project-body > p,
.tl-body > p:last-child,
.project-note{
  text-align:justify;
  text-justify:inter-word;
}

/* Centred blocks must stay centred: justifying them strands the last line
   hard left inside an otherwise centred column. */
.contact-inner .lede{ text-align:center; }

@media (max-width:960px){
  /* the hero centres at this width, so its lede follows suit */
  .hero-copy .lede,
  .founder-copy .lede{ text-align:center; }
}