/* ============================================================
   Bryan Volek — Senior Technical Recruiter
   Palette lifted from the TPA technologies mark:
   lime #BBD631 · teal #007EA4 · grey #59595B
   ============================================================ */

/* === defensive base — injected by harden_css.py; do not hand-edit === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-h, 72px) + 1rem); }
img, svg, video, iframe, canvas, table { display: block; max-width: 100%; }
p, li, h1, h2, h3, h4, blockquote, td, dd, dt { overflow-wrap: anywhere; }
form[style*="min-height"] { align-content: center; }
/* === end defensive base === */

:root{
  --ink:        #12161b;
  --ink-2:      #1b222a;
  --ink-3:      #2a333d;
  --paper:      #f7f5f0;
  --paper-2:    #efebe2;
  --paper-3:    #e4dfd4;
  --line:       #ddd7ca;

  --lime:       #bbd631;
  --lime-dk:    #8fa81c;
  --teal:       #007ea4;
  --teal-dk:    #05617d;
  --teal-lt:    #3fb6dc;
  --grey:       #59595b;
  --muted:      #6b7178;
  --muted-d:    #9aa3ad;

  --nav-h:      68px;
  --wrap:       1180px;
  --r:          14px;
  --r-lg:       22px;

  --disp: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Sora", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22,.68,.32,1);
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(.95rem, .9rem + .25vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; }

a{ color:inherit; }

h1,h2,h3{
  font-family:var(--disp);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.15rem, 4vw, 2.5rem);
}

.skip{
  position:absolute; left:.6rem; top:.6rem; z-index:200;
  width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; border-radius:10px; font-size:.85rem;
  text-decoration:none;
}
.skip:focus{ width:auto; height:auto; overflow:visible; clip-path:none; }

:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

/* ─────────────────────────── buttons ─────────────────────────── */

.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--bh);
  padding:0 1.4rem;
  border:1px solid transparent;
  border-radius:100px;
  font-family:var(--body);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .28s var(--ease), background-color .28s var(--ease),
             color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--lime{
  background:var(--lime); color:#171c07;
  box-shadow:0 8px 22px -12px rgba(143,168,28,.85);
}
.btn--lime:hover{ background:#c9e243; box-shadow:0 14px 30px -14px rgba(143,168,28,.95); }

.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(18,22,27,.24);
}
.btn--ghost:hover{ border-color:var(--ink); background:rgba(18,22,27,.05); }

.btn--outline{
  background:transparent; color:var(--paper);
  border-color:rgba(247,245,240,.34);
}
.btn--outline:hover{ border-color:var(--lime); color:var(--lime); }

.btn--sm{ --bh:42px; padding:0 1.05rem; font-size:.83rem; }

.btn--wide{ width:100%; }

/* ─────────────────────────── nav ─────────────────────────── */

.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{
  height:100%;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.15rem, 4vw, 2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand__mark{
  flex:none;
  width:38px; height:38px; border-radius:11px;
  background:var(--ink); color:var(--lime);
  display:grid; place-items:center;
  font-family:var(--disp); font-weight:800; font-size:.9rem; letter-spacing:.01em;
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{
  font-family:var(--disp); font-weight:700; font-size:1.02rem; letter-spacing:-.025em;
}
.brand__txt i{
  font-style:normal; font-size:.68rem; color:var(--muted);
  letter-spacing:.07em; text-transform:uppercase;
}

.nav__links{ display:flex; align-items:center; gap:1.55rem; }
.nav__links a:not(.btn){
  text-decoration:none; font-size:.88rem; font-weight:500; color:var(--ink-3);
  position:relative; padding-block:.25rem;
  transition:color .25s var(--ease);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--lime);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--ink); }
.nav__links a:not(.btn):hover::after{ transform:scaleX(1); }

.burger{
  display:none;
  width:44px; height:44px; flex:none;
  background:transparent; border:1px solid var(--line); border-radius:11px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ─────────────────────────── hero ─────────────────────────── */

.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(0,126,164,.10), transparent 58%),
    radial-gradient(90% 70% at 2% 96%, rgba(187,214,49,.20), transparent 62%),
    var(--paper);
  border-bottom:1px solid var(--line);
  padding-block:clamp(1.5rem, 4cqi, 3.75rem);
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(18,22,27,.14) .6px, transparent .6px);
  background-size:4px 4px;
  mask-image:linear-gradient(180deg, #000, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 78%);
}

.hero__in{
  container-type:inline-size;
  position:relative;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.15rem, 4vw, 2.5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(1.5rem, 4cqi, 3.5rem);
  align-items:center;
}

.hero__copy{ display:flex; flex-direction:column; gap:clamp(.85rem, 1.9cqi, 1.6rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:clamp(.62rem, 1.05cqi, .74rem);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-dk);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 4px rgba(187,214,49,.28);
  flex:none;
}

.hero h1{
  font-size:clamp(2rem, 7.4cqi, 4.75rem);
  letter-spacing:-.036em;
}
.hero h1 em{
  font-style:normal;
  color:var(--teal-dk);
  position:relative;
  white-space:nowrap;
  z-index:0;               /* own stacking context, so the swash sits behind
                              the glyphs but still above the hero background */
}
.hero h1 em::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.09em; height:.16em;
  background:var(--lime); opacity:.5; border-radius:2px; z-index:-1;
}

.lede{
  font-size:clamp(.92rem, 1.5cqi, 1.115rem);
  line-height:1.6;
  color:var(--muted);
  max-width:34em;
  font-weight:300;
}

.cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.cta-row--c{ justify-content:center; }

.proof{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.05rem;
  font-size:clamp(.68rem, 1.12cqi, .8rem);
  color:var(--muted);
  letter-spacing:.005em;
}
/* each claim stays whole — separators never dangle at a line end */
.proof span{ white-space:nowrap; position:relative; }
.proof b{ color:var(--ink); font-weight:600; }

/* dots only where all three claims share one line; wrapped, they would hang
   in the left gutter looking like stray bullets */
@media (min-width:1100px){
  .proof span + span::before{
    content:"·"; color:var(--lime-dk);
    position:absolute; left:-.6rem;
  }
}

/* portrait card */
.hero__card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 30px 60px -42px rgba(18,22,27,.55), 0 2px 6px -3px rgba(18,22,27,.1);
  transform:rotate(1.1deg);
}
.hero__card picture{ display:block; }
.hero__card picture img{
  width:100%; height:auto; aspect-ratio:1/1;
  filter:saturate(1.03) contrast(1.03);
}
.hero__card-ft{
  padding:.95rem 1.1rem 1.05rem;
  border-top:1px solid var(--paper-3);
  display:flex; flex-direction:column; gap:.5rem;
  background:#fff;
}
.hero__card-ft .role{
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

/* TPA mark + wordmark — the anniversary lockup turns to mush below ~240px,
   so tight spots get the mark itself with the name set in the site face. */
.lockup{
  display:flex; align-items:center; gap:.55rem;
  font-size:.95rem; letter-spacing:-.015em; line-height:1;
  color:var(--grey);
}
.lockup img{ width:26px; height:26px; flex:none; }
.lockup b{ font-weight:700; color:var(--ink); letter-spacing:.01em; }

/* ─────────────────────────── marquee strip ─────────────────────────── */

.strip{
  background:var(--ink);
  color:var(--paper);
  overflow-x:clip;              /* intentional bleed — scoped, never on body */
  padding-block:.85rem;
  border-bottom:1px solid var(--ink-2);
}
.strip__track{
  display:flex; align-items:center; gap:1.6rem;
  width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--disp); font-weight:500;
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
  white-space:nowrap;
}
.strip__track .sep{ color:var(--lime); font-size:.6rem; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ─────────────────────────── sections ─────────────────────────── */

.sec{ padding-block:clamp(3.75rem, 8vw, 7rem); }
.sec--paper{ background:var(--paper-2); border-block:1px solid var(--line); }
.sec--dark{ background:var(--ink); color:var(--paper); }
.sec--quote{ background:var(--paper-2); border-block:1px solid var(--line); }

.sec__head{ max-width:44rem; margin-bottom:clamp(2rem, 4vw, 3.25rem); }
.sec__head h2{ font-size:clamp(1.85rem, 5.2vw, 3.2rem); }
.sec__sub{
  margin-top:1rem; color:var(--muted); font-weight:300;
  font-size:clamp(.95rem, 1.6vw, 1.075rem); max-width:36em;
}

.kicker{
  font-size:.68rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--teal-dk); margin-bottom:.85rem;
}
.sec--dark .kicker,.cta .kicker{ color:var(--lime); }

/* ── approach cards ── */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap:1.15rem;
}
.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.9rem 1.6rem 1.7rem;
  display:flex; flex-direction:column; gap:.85rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--paper-3);
  box-shadow:0 26px 48px -34px rgba(18,22,27,.5);
}
.card__n{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  color:var(--muted-d);
}
.card h3{ font-size:1.24rem; letter-spacing:-.022em; line-height:1.2; }
.card > p{ color:var(--muted); font-size:.925rem; font-weight:300; }
.card--lime{ background:linear-gradient(168deg, #fbfdf1, #fff 62%); border-color:#dce9a8; }

.tick{ list-style:none; margin:.15rem 0 0; padding:0; display:grid; gap:.5rem; }
.tick li{
  position:relative; padding-left:1.4rem;
  font-size:.855rem; color:var(--ink-3); line-height:1.5;
}
.tick li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:8px; height:8px; border-radius:2px;
  background:var(--lime);
  transform:rotate(45deg);
}

.card__cta{
  margin-top:auto; padding-top:.4rem;
  font-size:.85rem; font-weight:600; color:var(--teal-dk);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
}
.card__cta span{ transition:transform .3s var(--ease); }
.card__cta:hover span{ transform:translateX(5px); }

.note{
  margin-top:1.6rem; font-size:.87rem; color:var(--muted);
  padding:1rem 1.15rem;
  border-left:3px solid var(--lime);
  background:rgba(187,214,49,.09);
  border-radius:0 10px 10px 0;
  max-width:52em;
}
.note a{ color:var(--teal-dk); font-weight:600; }

/* ── stats ── */

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap:2.1rem 1.6rem;
}
.stat{ display:flex; flex-direction:column; gap:.55rem; }
.stat b{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(2.5rem, 5.6vw, 3.9rem);
  line-height:.9; letter-spacing:-.045em;
  color:var(--lime);
  display:flex; align-items:baseline; gap:.1em;
}
.stat b small{ font-size:.3em; letter-spacing:.02em; color:var(--teal-lt); font-weight:600; }
.stat span{
  font-size:.845rem; color:var(--muted-d); font-weight:300; line-height:1.5;
  max-width:19em;
}

/* ── testimonial ── */

.quote{ margin:0; max-width:52rem; }
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.2rem, 2.9vw, 1.95rem);
  line-height:1.34; letter-spacing:-.025em;
  text-wrap:pretty;
}
.quote figcaption{
  margin-top:1.85rem; padding-top:1.35rem;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.28rem;
}
.quote figcaption b{ font-family:var(--disp); font-size:1.05rem; letter-spacing:-.02em; }
.quote figcaption i{ font-style:normal; font-size:.83rem; color:var(--muted); font-weight:300; }
.quote figcaption small{ font-size:.73rem; color:var(--muted-d); letter-spacing:.04em; margin-top:.3rem; }

/* ── timeline ── */

.tl{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.tl__i{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.6rem 2.5rem;
  padding:1.85rem 0;
  border-top:1px solid var(--line);
  position:relative;
}
.tl__i:last-child{ border-bottom:1px solid var(--line); }
.tl__when{
  font-family:var(--mono); font-size:.76rem; color:var(--muted);
  letter-spacing:-.01em; padding-top:.2rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.tl__when small{ font-size:.72rem; color:var(--muted-d); }
.tl__i--now .tl__when{ color:var(--teal-dk); font-weight:600; }
.tl__i--now::before{
  content:"Current"; position:absolute; top:-.66em; left:0;
  background:var(--lime); color:#171c07;
  font-family:var(--body); font-size:.6rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:100px;
}
.tl__what{ display:flex; flex-direction:column; gap:.5rem; }
.tl__what h3{ font-size:1.32rem; letter-spacing:-.026em; }
.tl__org{ font-size:.82rem; color:var(--teal-dk); font-weight:500; }
.tl__what > p:not(.tl__org):not(.tl__tags){
  color:var(--muted); font-size:.9rem; font-weight:300; max-width:44em;
}
.tl__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem; }
.tl__tags span{
  font-size:.7rem; letter-spacing:.03em;
  background:var(--paper-2); border:1px solid var(--line);
  color:var(--grey);
  padding:.24rem .6rem; border-radius:100px;
}

/* ── credentials ── */

.creds{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap:1.15rem;
}
.cred{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.7rem 1.5rem;
  display:flex; flex-direction:column; gap:.7rem;
  border-top:3px solid var(--teal);
}
.cred--edu{ border-top-color:var(--lime); }
.cred__by{
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted-d);
}
.cred h3{ font-size:1.08rem; line-height:1.28; letter-spacing:-.02em; }
.cred dl{ margin:.5rem 0 0; display:grid; gap:.55rem; }
.cred dl > div{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.cred dt{ font-size:.74rem; color:var(--muted-d); letter-spacing:.05em; text-transform:uppercase; flex:none; }
.cred dd{ margin:0; font-size:.83rem; text-align:right; color:var(--ink-3); }
.cred code{ font-family:var(--mono); font-size:.8rem; color:var(--teal-dk); }

.about{
  margin-top:2.25rem;
  border-top:1px dashed var(--line);
  padding-top:1.6rem;
}
.about p{ font-size:.98rem; color:var(--muted); font-weight:300; }
.about span{
  font-family:var(--disp); font-weight:700; color:var(--ink);
  letter-spacing:-.02em; margin-right:.3rem;
}

/* ── final CTA ── */

.cta{
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(0,126,164,.30), transparent 62%),
    var(--ink);
  color:var(--paper);
  padding-block:clamp(4rem, 9vw, 7.5rem);
  text-align:center;
}
.cta__in{ display:flex; flex-direction:column; align-items:center; }
.cta h2{ font-size:clamp(1.7rem, 5vw, 3.05rem); }
.cta__sub{
  margin:1.1rem 0 2rem; color:var(--muted-d);
  font-weight:300; max-width:38em;
  font-size:clamp(.93rem, 1.6vw, 1.05rem);
}

/* ─────────────────────────── footer ─────────────────────────── */

.ft{
  background:var(--ink-2); color:var(--muted-d);
  padding-block:2.75rem 2rem;
}
.ft__in{
  display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start;
  justify-content:space-between;
}
.ft__brand{ display:flex; gap:.8rem; align-items:flex-start; }
.ft__brand b{
  font-family:var(--disp); font-weight:700; color:var(--paper);
  font-size:1.05rem; letter-spacing:-.025em; display:block;
}
.ft__brand p{ font-size:.8rem; margin-top:.3rem; line-height:1.6; }
.ft__nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.35rem; }
.ft__nav a{ font-size:.85rem; text-decoration:none; transition:color .25s var(--ease); }
.ft__nav a:hover{ color:var(--lime); }

.ft__tpa{ color:var(--muted-d); font-size:.9rem; }
.ft__tpa b{ color:var(--paper); }

/* sits outside .ft__in, so it carries the wrapper's own width + gutters */
.site-credit{
  max-width:var(--wrap);
  margin:2.4rem auto 0;
  padding:1.4rem clamp(1.15rem, 4vw, 2.5rem) 0;
  border-top:1px solid rgba(247,245,240,.10);
  font-size:.78rem;
  color:var(--muted-d);
  text-align:center;
}
.site-credit a{
  color:var(--paper); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .25s var(--ease);
}
.site-credit a:hover{ color:var(--lime); }

/* ─────────────────────────── contact page ─────────────────────────── */

.pg{
  background:
    radial-gradient(90% 70% at 96% 0%, rgba(0,126,164,.10), transparent 56%),
    radial-gradient(70% 60% at 0% 100%, rgba(187,214,49,.16), transparent 60%),
    var(--paper);
  padding-block:clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
  border-bottom:1px solid var(--line);
}
.pg__head{ max-width:40rem; margin-bottom:clamp(2rem, 4vw, 3rem); }
.pg__head h1{ font-size:clamp(2rem, 6vw, 3.4rem); }
.pg__head .lede{ margin-top:1.05rem; }

.cx{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.5rem, 3.5vw, 3rem);
  align-items:start;
}

.formcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem, 3vw, 2.25rem);
  box-shadow:0 28px 58px -46px rgba(18,22,27,.55);
}
.formcard > h2{ font-size:1.42rem; letter-spacing:-.026em; }
.formcard > .hint{
  margin-top:.6rem; margin-bottom:1.5rem;
  font-size:.86rem; color:var(--muted); font-weight:300;
}

#estimate-form{ display:grid; gap:1.05rem; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-size:.78rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  color:var(--ink-3);
}
.field label .req{ color:var(--teal-dk); }
.field input,.field textarea,.field select{
  font-family:var(--body); font-size:.95rem; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line); border-radius:12px;
  padding:.82rem .95rem;
  width:100%;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ min-height:128px; resize:vertical; line-height:1.55; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; background:#fff;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,126,164,.16);
}
.field input::placeholder,.field textarea::placeholder{ color:#a9b0b8; }

.row2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap:1.05rem; }

.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.form-status{
  font-size:.92rem; line-height:1.55;
  padding:1rem 1.1rem; border-radius:12px;
  border:1px solid var(--line);
}
.form-status.ok{
  background:rgba(187,214,49,.14); border-color:#cfe07f; color:#3f4a11;
}
.form-status.err{
  background:rgba(214,74,49,.08); border-color:#e5b3a7; color:#8a3423;
}
.form-status b{ font-family:var(--disp); font-weight:700; display:block; margin-bottom:.2rem; font-size:1.05rem; }

button[type="submit"][disabled]{
  background:var(--ink); color:var(--lime);
  box-shadow:none; transform:none; cursor:default; opacity:1;
}

.legal{ font-size:.74rem; color:var(--muted-d); line-height:1.55; }

/* contact aside */
.aside{ display:grid; gap:1.15rem; }
.abox{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.75rem;
}
.abox h3{ font-size:1.05rem; letter-spacing:-.02em; }
.abox p{ font-size:.87rem; color:var(--muted); font-weight:300; }
.abox--ink{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.abox--ink p{ color:var(--muted-d); }
.abox--ink h3{ color:var(--paper); }
.alink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; color:var(--teal-dk); text-decoration:none;
}
.abox--ink .alink{ color:var(--lime); }
.alink span{ transition:transform .3s var(--ease); }
.alink:hover span{ transform:translateX(4px); }
.meta{ display:grid; gap:.6rem; margin-top:.2rem; }
.meta div{ display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; align-items:baseline; }
.meta dt,.meta b{
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted-d); font-weight:600; flex:none;
}
.meta i{ font-style:normal; text-align:right; color:var(--ink-3); }
.abox--ink .meta i{ color:var(--paper); }
/* the one place the full anniversary lockup gets enough width to read */
.abox .tpa{
  width:100%; max-width:250px; height:auto;
  margin-top:.9rem; padding-top:1.1rem;
  border-top:1px solid var(--paper-3);
}

/* ─────────────────────────── reveal (below the fold only) ─────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* ─────────────────────────── responsive ─────────────────────────── */

/* three-across: reserve the second title line so every card's body starts level */
@media (min-width:900px){
  .card h3{ min-height:2.4em; }
}

@media (max-width:1000px){
  .tl__i{ grid-template-columns:minmax(0,10.5rem) minmax(0,1fr); gap:.6rem 1.6rem; }
}

@media (max-width:880px){
  :root{ --nav-h:60px; }

  .burger{ display:flex; }

  .nav__links{
    display:none;
    position:absolute; left:0; right:0; top:var(--nav-h);
    flex-direction:column; align-items:stretch; gap:.15rem;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:.85rem clamp(1.15rem, 4vw, 2.5rem) 1.35rem;
    box-shadow:0 22px 34px -26px rgba(18,22,27,.55);
  }
  .nav__links.open{ display:flex; }
  .nav__links a:not(.btn){ padding:.72rem 0; border-bottom:1px solid var(--paper-3); font-size:.95rem; }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__links .btn{ margin-top:.8rem; }

  .hero__in{ grid-template-columns:minmax(0,1fr); gap:clamp(1rem, 3cqi, 1.6rem); }

  /* portrait becomes a compact business-card row above the headline */
  .hero__card{
    order:-1;
    display:flex; align-items:center; gap:1rem;
    transform:none;
    padding:.6rem 1.15rem .6rem .6rem;
    border-radius:100px;
    align-self:start; justify-self:start;   /* shrink-wrap, don't span the column */
    box-shadow:0 16px 30px -26px rgba(18,22,27,.55);
  }
  .hero__card picture{ flex:none; }
  .hero__card picture img{ width:56px; height:56px; border-radius:50%; }
  .hero__card-ft{
    border-top:0; padding:0; gap:.28rem; background:transparent;
    min-width:0;
  }
  .hero__card-ft .lockup{ font-size:.85rem; gap:.45rem; }
  .hero__card-ft .lockup img{ width:22px; height:22px; }
  .hero__card-ft .role{ font-size:.58rem; letter-spacing:.11em; }

  .tl__i{ grid-template-columns:minmax(0,1fr); gap:.7rem; padding:1.6rem 0; }
  .tl__when{ padding-top:0; flex-direction:row; align-items:baseline; gap:.55rem; }

  .cx{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:520px){
  .hero h1{ font-size:clamp(1.8rem, 8.6cqi, 2.6rem); }
  .cta-row .btn{ flex:1 1 auto; }
  .cred dl > div{ flex-direction:column; gap:.15rem; }
  .cred dd{ text-align:left; }
  .ft__in{ gap:1.6rem; }
}

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

/* Cloudflare Turnstile widget (injected by ensure_turnstile.py) */
.turnstile-box { margin-bottom: 1.25rem; min-height: 65px; }