/*
Theme Name: Upstate Signal Redesign
Theme URI: https://upstatesignal.com
Author: Upstate Signal Co.
Author URI: https://upstatesignal.com
Description: Upstate Signal Co. theme. Signal identity, cross-document view transitions, scroll-driven animation, container queries, dark mode, and LiteSpeed-hardened layout.
Version: 3.7.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: upstate-signal-redesign
*/

:root{
  color-scheme:light;
  --paper:#f5f6f1;
  --paper-warm:#fffdf8;
  --mist:#e6ece7;
  --mist-2:#dbe5df;
  --ink:#111c19;
  --ink-soft:#35443f;
  --muted:#61706a;
  --line:#c7d3cc;
  --line-strong:#aebdb5;
  --cornell:#b31b1b;
  --cornell-dark:#841414;
  --forest:#0d675d;
  --lake:#2f6f91;
  --gold:#c7932d;
  --cream:#fff8e8;
  --inverse:#0d1715;
  --inverse-soft:#15231f;
  --inverse-ink:#eef5f0;
  --shadow:0 24px 70px -46px rgba(17,28,25,.62);
  --shadow-strong:0 32px 90px -52px rgba(17,28,25,.76);
  --glass:rgba(255,253,248,.92);
  --glass-2:rgba(255,253,248,.88);
  --glass-strong:rgba(255,253,248,.98);
  --glass-soft:rgba(255,253,248,.70);
  --band-a:rgba(255,253,248,.54);
  --band-b:rgba(230,236,231,.54);
  --field-bg:#fbfcf8;
  --radius:8px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  background:
    radial-gradient(860px 460px at 84% -8%, rgba(179,27,27,.12), transparent 72%),
    radial-gradient(680px 420px at -10% 8%, rgba(13,103,93,.12), transparent 70%),
    linear-gradient(180deg, #fbfcf8 0%, var(--paper) 44%, #eef2ec 100%);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto;
  z-index:90;
  height:3px;
  pointer-events:none;
  background:linear-gradient(90deg, var(--cornell), var(--gold), var(--forest), var(--lake));
}
a{ color:inherit; }
img,svg{ max-width:100%; }
img{ height:auto; }
::selection{ background:var(--cornell); color:var(--cream); }

h1,h2,h3,h4{
  margin:0;
  color:var(--ink);
  font-family:Georgia, "Times New Roman", serif;
  font-weight:650;
  line-height:1.08;
  text-wrap:balance;
}
p{ margin:0; }
ul{ margin:0; }
.wrap{
  width:min(100%, 1240px);
  margin-inline:auto;
  padding-inline:32px;
}
.screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link:focus{
  position:fixed;
  left:18px;
  top:18px;
  z-index:9999;
  width:auto;
  height:auto;
  clip:auto;
  padding:10px 14px;
  border-radius:6px;
  background:var(--cornell);
  color:var(--cream);
  text-decoration:none;
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:.65em;
  margin:0 0 1em;
  color:var(--forest);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  flex:none;
  background:linear-gradient(90deg, var(--forest), var(--gold));
}
.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--glass);
  box-shadow:var(--shadow);
}
.lift{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lift:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--cornell) 36%, var(--line));
  box-shadow:0 34px 82px -48px rgba(179,27,27,.52);
}

header.site-header{
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(199,211,204,.88);
  background:var(--glass-2);
  backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:0 18px 40px -38px rgba(17,28,25,.65);
}
.admin-bar header.site-header{ top:32px; }
.nav-row{
  min-height:78px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:20px;
}
.brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
}
.brand-mark{
  width:auto;
  min-width:34px;
  min-height:34px;
  display:grid;
  place-items:center;
  color:var(--cornell);
}
.brand-mark svg{
  width:32px;
  height:32px;
  display:block;
}
.brand-mark img{
  display:block;
  width:auto;
  max-width:180px;
  max-height:48px;
  object-fit:contain;
}
.brand span:last-child{
  display:grid;
  min-width:0;
  line-height:1.1;
}
.brand strong{
  overflow-wrap:anywhere;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.08rem;
  font-weight:750;
}
.brand small{
  margin-top:4px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}
nav.primary-nav{
  justify-self:end;
  min-width:0;
}
nav.primary-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
nav.primary-nav > ul,
nav.primary-nav .primary-menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px 17px;
  font-size:.9rem;
  font-weight:780;
  letter-spacing:0;
}
nav.primary-nav li{
  position:relative;
  min-width:0;
}
nav.primary-nav a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  border-radius:6px;
  color:var(--muted);
  text-decoration:none;
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}
nav.primary-nav > ul > li > a,
nav.primary-nav .primary-menu > li > a{
  padding:.3em 0;
}
nav.primary-nav > ul > li > a::after,
nav.primary-nav .primary-menu > li > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--cornell), var(--forest));
  transition:width .2s ease;
}
nav.primary-nav > ul > li:hover > a,
nav.primary-nav > ul > li:focus-within > a,
nav.primary-nav .primary-menu > li:hover > a,
nav.primary-nav .primary-menu > li:focus-within > a{
  color:var(--ink);
}
nav.primary-nav > ul > li:hover > a::after,
nav.primary-nav > ul > li:focus-within > a::after,
nav.primary-nav .primary-menu > li:hover > a::after,
nav.primary-nav .primary-menu > li:focus-within > a::after{
  width:100%;
}
nav.primary-nav a:focus-visible,
.btn:focus-visible,
.menu-toggle:focus-visible,
.nav-cta:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
}
nav.primary-nav .menu-item-has-children > a{
  gap:.35em;
}
nav.primary-nav .menu-item-has-children > a::before{
  content:"";
  order:2;
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
}
nav.primary-nav .sub-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:45;
  min-width:230px;
  display:grid;
  gap:4px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--glass-strong);
  box-shadow:0 28px 70px -44px rgba(17,28,25,.72);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
nav.primary-nav li:hover > .sub-menu,
nav.primary-nav li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
nav.primary-nav .sub-menu a{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:.55em .7em;
  white-space:nowrap;
}
nav.primary-nav .sub-menu a:hover,
nav.primary-nav .sub-menu a:focus-visible{
  background:var(--mist);
  color:var(--ink);
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.65em 1.15em;
  border:1px solid var(--cornell);
  border-radius:6px;
  background:var(--cornell);
  color:var(--cream);
  font-size:.86rem;
  font-weight:850;
  letter-spacing:0;
  text-decoration:none;
  box-shadow:0 16px 34px -26px rgba(179,27,27,.9);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-cta:hover{
  transform:translateY(-1px);
  background:var(--cornell-dark);
  box-shadow:0 18px 40px -22px rgba(179,27,27,.82);
}
.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper-warm);
  color:var(--ink);
  cursor:pointer;
  place-items:center;
}
.menu-toggle span:not(.screen-reader-text){
  grid-area:1 / 1;
  width:19px;
  height:2px;
  display:block;
  background:currentColor;
  transition:transform .18s ease;
}
.menu-toggle span:first-child{ transform:translateY(-5px); }
.menu-toggle span:nth-child(2){ transform:translateY(5px); }
.site-header.is-open .menu-toggle span:first-child{ transform:rotate(45deg); }
.site-header.is-open .menu-toggle span:nth-child(2){ transform:rotate(-45deg); }

.ticker{
  overflow:hidden;
  border-bottom:1px solid rgba(238,245,240,.12);
  background:var(--inverse);
  color:var(--inverse-ink);
  white-space:nowrap;
}
.ticker-track{
  display:inline-flex;
  flex-wrap:nowrap;
  gap:2.3em;
  min-width:max-content;
  padding:9px 0;
  color:rgba(238,245,240,.72);
  font-size:.73rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
  animation:ticker 34s linear infinite;
  will-change:transform;
}
.ticker-track span{
  display:inline-block;
  flex:none;
  white-space:nowrap;
}
.ticker-track .dot{
  color:#78d9c9;
}
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; }
}

.hero{
  position:relative;
  padding:92px 0 72px;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(179,27,27,.32), rgba(13,103,93,.32), transparent);
}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(380px,1.06fr);
  gap:64px;
  align-items:center;
}
.hero-copy{
  max-width:680px;
}
.hero h1{
  max-width:10.8em;
  margin:.22em 0 .32em;
  font-size:4.45rem;
}
.hero .clarify{
  max-width:48ch;
  color:var(--ink-soft);
  font-size:1.18rem;
  font-weight:620;
  line-height:1.52;
}
.hero .lede{
  max-width:51ch;
  margin-top:1.05em;
  color:var(--muted);
  font-size:1.06rem;
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:2em;
}
.btn{
  position:relative;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:6px;
  padding:.92em 1.32em;
  color:var(--ink);
  font-size:.9rem;
  font-weight:850;
  letter-spacing:0;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .2s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  border-color:var(--cornell);
  background:var(--cornell);
  color:var(--cream);
  box-shadow:0 20px 44px -30px rgba(179,27,27,.95);
}
.btn-primary:hover{
  background:var(--cornell-dark);
  box-shadow:0 24px 54px -28px rgba(179,27,27,.9);
}
.btn-ghost{
  background:var(--glass-soft);
}
.btn-ghost:hover{
  border-color:var(--ink);
  background:var(--paper-warm);
}
.proof-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:1.45em;
}
.proof-points span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.56em .85em;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--glass-soft);
  color:var(--ink-soft);
  font-size:.83rem;
  font-weight:760;
}
.proof-points span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--forest);
  box-shadow:0 0 0 3px rgba(13,103,93,.14);
}
.hero-media{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--mist);
  box-shadow:var(--shadow-strong);
  isolation:isolate;
}
.hero-media img{
  width:100%;
  height:100%;
  min-height:560px;
  display:block;
  object-fit:cover;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, transparent 24%, rgba(17,28,25,.72) 100%),
    linear-gradient(90deg, rgba(17,28,25,.26), transparent 42%);
  pointer-events:none;
}
.review-card{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  z-index:2;
  padding:24px;
  border:1px solid rgba(255,253,248,.46);
  border-radius:var(--radius);
  background:var(--glass);
  box-shadow:0 22px 50px -32px rgba(17,28,25,.92);
  backdrop-filter:blur(16px) saturate(1.05);
}
.review-card .eyebrow{
  margin-bottom:.75em;
}
.review-card h2{
  max-width:18em;
  font-size:1.55rem;
}
.check-list{
  display:grid;
  gap:10px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
}
.check-list li{
  position:relative;
  padding-left:26px;
  color:var(--muted);
  font-size:.94rem;
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:13px;
  height:7px;
  border-left:2px solid var(--forest);
  border-bottom:2px solid var(--forest);
  transform:rotate(-45deg);
}

.systems{
  border-top:1px solid rgba(238,245,240,.12);
  border-bottom:1px solid rgba(238,245,240,.12);
  background:linear-gradient(135deg, var(--inverse), var(--inverse-soft));
  color:var(--inverse-ink);
}
.systems-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.sys-item{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:24px 24px;
  border-left:1px solid rgba(238,245,240,.12);
}
.sys-item:first-child{ border-left:0; }
.sys-top{
  display:flex;
  align-items:center;
  gap:.55em;
  color:rgba(238,245,240,.66);
  font-size:.78rem;
  font-weight:820;
  letter-spacing:0;
  text-transform:uppercase;
}
.led{
  width:7px;
  height:7px;
  flex:none;
  border-radius:999px;
  background:#78d9c9;
  box-shadow:0 0 0 3px rgba(120,217,201,.12);
}
.sys-value{
  color:var(--inverse-ink);
  font-size:1.18rem;
  font-weight:850;
  overflow-wrap:anywhere;
}

section{
  position:relative;
  padding:86px 0;
}
main > section:nth-of-type(odd):not(.hero):not(.contact-section){
  border-top:1px solid rgba(199,211,204,.68);
  border-bottom:1px solid rgba(199,211,204,.68);
  background:linear-gradient(180deg, var(--band-a), var(--band-b));
}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:26px 42px;
  align-items:end;
  margin-bottom:38px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.section-head .eyebrow{
  grid-column:1 / -1;
  margin:0;
}
.section-head h2{
  font-size:2.55rem;
}
.section-head .note{
  color:var(--muted);
  font-size:.96rem;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.service-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:15px;
  padding:30px 26px 32px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--glass);
  box-shadow:var(--shadow);
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg, var(--cornell), var(--gold), var(--forest));
  opacity:.9;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--cornell) 36%, var(--line));
  background:var(--paper-warm);
  box-shadow:0 30px 76px -48px rgba(179,27,27,.46);
}
.icon{
  width:32px;
  height:32px;
  color:var(--cornell);
}
.service-num{
  color:var(--forest);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}
.service-card h3{
  font-size:1.28rem;
}
.service-card p{
  color:var(--muted);
  font-size:.95rem;
}

.split-section{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:46px;
  align-items:start;
}
.split-copy h2{
  max-width:10.5em;
  font-size:2.45rem;
}
.split-copy p:not(.eyebrow){
  max-width:42ch;
  margin-top:18px;
  color:var(--muted);
}
.insight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.insight-card{
  min-width:0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--glass-2);
}
.insight-card span{
  display:inline-flex;
  margin-bottom:18px;
  color:var(--cornell);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}
.insight-card h3{
  font-size:1.22rem;
  margin-bottom:.6em;
}
.insight-card p{
  color:var(--muted);
  font-size:.94rem;
}

.sequence{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.seq-step{
  min-width:0;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--glass), var(--glass-soft));
  box-shadow:var(--shadow);
}
.seq-index{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper-warm);
  color:var(--cornell);
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.25rem;
  font-weight:650;
}
.seq-body h3{
  font-size:1.24rem;
  margin-bottom:.55em;
}
.seq-body p{
  color:var(--muted);
  font-size:.95rem;
}

.plans{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.plan{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:15px;
  padding:28px 26px;
}
.plan.is-highlight{
  border-color:color-mix(in srgb, var(--cornell) 62%, var(--line));
  background:
    linear-gradient(180deg, rgba(179,27,27,.08), transparent 42%),
    var(--paper-warm);
  box-shadow:0 30px 82px -48px rgba(179,27,27,.58);
}
.plan-tag{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}
.ribbon{
  border-radius:999px;
  padding:.26em .62em;
  background:var(--cornell);
  color:var(--cream);
  font-size:.68rem;
  letter-spacing:0;
}
.plan h3{ font-size:1.36rem; }
.plan p{
  flex:1;
  color:var(--muted);
  font-size:.95rem;
}
.plan .btn{
  align-self:flex-start;
  margin-top:4px;
}

.county-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.county-card{
  min-width:0;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper-warm);
  box-shadow:var(--shadow);
}
.county-card h3{
  color:var(--cornell);
  font-size:1.28rem;
  margin-bottom:.72em;
}
.county-card p{
  color:var(--muted);
  font-size:.95rem;
}

.about-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:48px;
  align-items:start;
}
.about-layout blockquote{
  margin:0;
  color:var(--ink);
  font-family:Georgia, "Times New Roman", serif;
  font-size:2.05rem;
  font-weight:560;
  line-height:1.24;
}
.about-note{
  max-width:46ch;
  margin-top:1.35em;
  color:var(--muted);
}
.pillars{
  display:grid;
  gap:0;
}
.pillar{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:18px;
  padding:19px 0;
  border-top:1px solid var(--line);
}
.pillar:last-child{ border-bottom:1px solid var(--line); }
.pillar-name{
  color:var(--cornell);
  font-size:.8rem;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}
.pillar p{
  color:var(--muted);
  font-size:.95rem;
}
.area-row{
  grid-column:1 / -1;
  padding-top:8px;
}
.area{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.area span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.5em .88em;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--glass-2);
  color:var(--ink-soft);
  font-size:.84rem;
  font-weight:750;
}
.area span.hub{
  border-color:var(--forest);
  color:var(--forest);
}

.cta-band{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(179,27,27,.2), transparent 34%),
    linear-gradient(135deg, var(--inverse), #162721);
  color:var(--inverse-ink);
}
.cta-band::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(120,217,201,.1), transparent);
}
.cta-band .wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:72px;
  padding-bottom:72px;
}
.cta-band h2{
  max-width:18em;
  color:var(--inverse-ink);
  font-size:2.35rem;
}
.cta-band .eyebrow{
  color:#78d9c9;
}

.contact-section{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--paper-warm), var(--mist));
}
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:46px;
}
.contact-info h2{
  max-width:12em;
  font-size:2.35rem;
  margin-bottom:.42em;
}
.contact-info p:not(.eyebrow){
  max-width:43ch;
  color:var(--muted);
}
.contact-detail{
  display:grid;
  gap:10px;
  margin-top:1.7em;
  color:var(--ink-soft);
  font-size:.94rem;
  font-weight:650;
}
.contact-detail a{
  color:var(--forest);
  text-decoration:none;
}
.contact-detail a:hover{ text-decoration:underline; }
.notice-panel{
  margin-bottom:22px;
  padding:15px 18px;
  color:var(--forest);
  border-color:var(--forest);
  box-shadow:none;
}
.notice-error{
  color:var(--cornell);
  border-color:var(--cornell);
}
.form-panel{
  padding:28px;
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.field{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:18px;
}
.field label{
  color:var(--muted);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}
.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--field-bg);
  color:var(--ink);
  font:inherit;
  font-size:.98rem;
  padding:.82em .9em;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:0;
  border-color:var(--forest);
  background:var(--paper-warm);
  box-shadow:0 0 0 3px rgba(13,103,93,.12);
}
.honeypot{
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}
.form-submit{
  width:100%;
}

footer.site-footer{
  border-top:1px solid var(--line);
  padding:44px 0 40px;
  background:var(--glass-soft);
}
.foot-top{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:32px;
  padding-bottom:30px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.foot-brand-block .brand{
  margin-bottom:12px;
}
.foot-brand-block p{
  max-width:34ch;
  color:var(--muted);
  font-size:.92rem;
}
.foot-col h4{
  margin:0 0 12px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}
.foot-col ul,
.footer-menu{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.93rem;
}
.foot-col a{
  color:var(--ink);
  text-decoration:none;
}
.foot-col a:hover{ color:var(--cornell); }
.foot-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.foot-legal{
  color:var(--muted);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

.page-hero{
  position:relative;
  padding-top:72px;
  padding-bottom:52px;
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(560px 260px at 86% 18%, rgba(179,27,27,.1), transparent 70%),
    linear-gradient(135deg, var(--band-a), var(--band-b));
}
.page-hero h1{
  max-width:15em;
  margin:.22em 0 .32em;
  font-size:3.2rem;
}
.page-hero p:not(.eyebrow){
  max-width:58ch;
  color:var(--muted);
  font-size:1.06rem;
}
.content-narrow{
  max-width:74ch;
}
.content-narrow article{
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.content-narrow h2{
  font-size:1.55rem;
}
.content-narrow h2 a{
  text-decoration:none;
}
.content-narrow h2 a:hover{
  color:var(--cornell);
}
.quote-section{
  padding-top:0;
}
.work-quote{
  max-width:56ch;
  margin:0;
  color:var(--ink);
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.52rem;
  line-height:1.35;
}

[data-reveal]{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .45s ease, transform .45s ease;
  }
  [data-reveal].in{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:1080px){
  .services-grid,
  .insight-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-inner{
    grid-template-columns:1fr;
  }
  .hero h1{
    font-size:3.75rem;
  }
  .hero-media{
    min-height:480px;
  }
  .hero-media img{
    min-height:480px;
  }
}

@media (max-width:860px){
  body.has-menu-open{ overflow:hidden; }
  .wrap{ padding-inline:22px; }
  .admin-bar header.site-header{ top:46px; }
  .nav-row{
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:12px;
    min-height:70px;
  }
  .menu-toggle{ display:grid; }
  nav.primary-nav{
    grid-column:1 / -1;
    justify-self:stretch;
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0;
    border-top:0;
    transition:max-height .22s ease, opacity .18s ease, padding .18s ease;
  }
  .site-header.is-open nav.primary-nav{
    max-height:72vh;
    overflow:auto;
    opacity:1;
    padding:10px 0 4px;
    border-top:1px solid var(--line);
  }
  nav.primary-nav > ul,
  nav.primary-nav .primary-menu{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    justify-content:stretch;
  }
  nav.primary-nav > ul > li > a,
  nav.primary-nav .primary-menu > li > a{
    min-height:44px;
    display:flex;
    justify-content:center;
    padding:.65em .8em;
    border:1px solid var(--line);
    background:var(--paper-warm);
    text-align:center;
  }
  nav.primary-nav > ul > li > a::after,
  nav.primary-nav .primary-menu > li > a::after{
    display:none;
  }
  nav.primary-nav .menu-item-has-children > a{
    justify-content:center;
  }
  nav.primary-nav .sub-menu{
    position:static;
    min-width:0;
    opacity:1;
    visibility:visible;
    transform:none;
    padding:6px 0 0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  nav.primary-nav .sub-menu a{
    min-height:40px;
    justify-content:center;
    white-space:normal;
    border:1px solid var(--line);
    background:var(--mist);
  }
  .nav-cta{
    justify-self:end;
    padding:.58em .9em;
  }
  .section-head,
  .split-section,
  .contact-layout,
  .about-layout{
    grid-template-columns:1fr;
  }
  .section-head{
    gap:12px;
  }
  .section-head h2,
  .split-copy h2,
  .contact-info h2{
    font-size:2.18rem;
  }
  .systems-grid,
  .plans,
  .county-grid,
  .sequence{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sys-item:nth-child(3){
    border-left:0;
  }
  .cta-band .wrap{
    align-items:flex-start;
    flex-direction:column;
  }
  .cta-band h2{
    font-size:2.05rem;
  }
  .foot-top{
    grid-template-columns:1fr;
  }
}

@media (max-width:620px){
  .wrap{ padding-inline:18px; }
  .nav-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .nav-cta{
    grid-column:1 / -1;
    width:100%;
  }
  nav.primary-nav > ul,
  nav.primary-nav .primary-menu,
  .services-grid,
  .insight-grid,
  .systems-grid,
  .plans,
  .county-grid,
  .sequence,
  .field-row{
    grid-template-columns:1fr;
  }
  .sys-item{
    border-left:0;
    border-top:1px solid rgba(238,245,240,.12);
  }
  .sys-item:first-child{
    border-top:0;
  }
  .hero{
    padding:64px 0 52px;
  }
  .hero h1{
    font-size:2.7rem;
  }
  .hero .clarify{
    font-size:1.06rem;
  }
  .hero-media{
    min-height:420px;
  }
  .hero-media img{
    min-height:420px;
  }
  .review-card{
    left:14px;
    right:14px;
    bottom:14px;
    padding:18px;
  }
  .review-card h2{
    font-size:1.32rem;
  }
  .page-hero{
    padding-top:54px;
    padding-bottom:42px;
  }
  .page-hero h1{
    font-size:2.35rem;
  }
  .section-head h2,
  .split-copy h2,
  .contact-info h2,
  .cta-band h2{
    font-size:1.9rem;
  }
  .about-layout blockquote{
    font-size:1.72rem;
  }
  .pillar{
    grid-template-columns:1fr;
    gap:7px;
  }
}

/* ==========================================================================
   UPSTATE SIGNAL — SIGNAL ENGINE v3.0
   Modern CSS layer: typed custom properties, cross-document view transitions,
   scroll-driven animations, container queries, :has() states, dark mode.
   Everything here is progressive: unsupported browsers fall back to the
   static styles above, and nothing below is required for layout.
   ========================================================================== */

/* --- 1. Typed custom properties -------------------------------------------
   @property makes these values interpolatable, which is what lets a conic
   gradient angle or a glow radius actually animate instead of snapping. */
@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --beam {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --aurora {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* --- 2. Dark mode ---------------------------------------------------------
   The whole sheet is token-driven, so overriding the token block flips the
   entire site. Honors the OS setting, and the header toggle overrides it. */
:root{ color-scheme: light dark; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d1412;
    --paper-warm:#131c19;
    --mist:#172220;
    --mist-2:#1d2a27;
    --ink:#eaf2ee;
    --ink-soft:#c2d2cb;
    --muted:#94a79f;
    --line:#26332f;
    --line-strong:#35463f;
    --cornell:#f05a5a;
    --cornell-dark:#c93b3b;
    --forest:#42c6af;
    --lake:#6cb0d4;
    --gold:#e6b455;
    --inverse:#080f0d;
    --inverse-soft:#0e1917;
    --inverse-ink:#eef5f0;
    --glass:rgba(23,34,32,.92);
  --glass-2:rgba(23,34,32,.86);
  --glass-strong:rgba(19,28,25,.98);
  --glass-soft:rgba(23,34,32,.64);
  --band-a:rgba(19,28,25,.55);
  --band-b:rgba(13,20,18,.55);
  --field-bg:#0f1715;
  --shadow:0 24px 70px -46px rgba(0,0,0,.85);
    --shadow-strong:0 32px 90px -52px rgba(0,0,0,.92);
  }
  :root:not([data-theme="light"]) body{
    background:
      radial-gradient(860px 460px at 84% -8%, rgba(240,90,90,.10), transparent 72%),
      radial-gradient(680px 420px at -10% 8%, rgba(66,198,175,.10), transparent 70%),
      linear-gradient(180deg, #0b110f 0%, var(--paper) 44%, #080e0c 100%);
  }
}

:root[data-theme="dark"]{
  --paper:#0d1412;
  --paper-warm:#131c19;
  --mist:#172220;
  --mist-2:#1d2a27;
  --ink:#eaf2ee;
  --ink-soft:#c2d2cb;
  --muted:#94a79f;
  --line:#26332f;
  --line-strong:#35463f;
  --cornell:#f05a5a;
  --cornell-dark:#c93b3b;
  --forest:#42c6af;
  --lake:#6cb0d4;
  --gold:#e6b455;
  --inverse:#080f0d;
  --inverse-soft:#0e1917;
  --inverse-ink:#eef5f0;
  --glass:rgba(23,34,32,.92);
  --glass-2:rgba(23,34,32,.86);
  --glass-strong:rgba(19,28,25,.98);
  --glass-soft:rgba(23,34,32,.64);
  --band-a:rgba(19,28,25,.55);
  --band-b:rgba(13,20,18,.55);
  --field-bg:#0f1715;
  --shadow:0 24px 70px -46px rgba(0,0,0,.85);
  --shadow-strong:0 32px 90px -52px rgba(0,0,0,.92);
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(860px 460px at 84% -8%, rgba(240,90,90,.10), transparent 72%),
    radial-gradient(680px 420px at -10% 8%, rgba(66,198,175,.10), transparent 70%),
    linear-gradient(180deg, #0b110f 0%, var(--paper) 44%, #080e0c 100%);
}
:root[data-theme="dark"] .hero-media img{ filter:brightness(.82) contrast(1.06); }

/* Theme toggle button in the header. */
.theme-toggle{
  display:grid; place-items:center;
  width:40px; height:40px; flex:none;
  border:1px solid var(--line); border-radius:999px;
  background:var(--paper-warm); color:var(--ink-soft);
  cursor:pointer; padding:0;
  transition:color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.theme-toggle:hover{ color:var(--cornell); border-color:var(--cornell); transform:rotate(-18deg) scale(1.06); }
.theme-toggle:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; }
}

/* --- 3. Cross-document view transitions -----------------------------------
   WordPress is multi-page, so this makes moving between pages animate like a
   single-page app. Browsers without support just navigate normally. */
@view-transition{ navigation: auto; }

::view-transition-old(root){ animation:usc-vt-out .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:usc-vt-in .34s cubic-bezier(0,0,.2,1) both; }
@keyframes usc-vt-out{ to{ opacity:0; transform:translateY(-8px) scale(.994); } }
@keyframes usc-vt-in{ from{ opacity:0; transform:translateY(14px) scale(.994); } }

/* Persistent chrome morphs across the navigation instead of cross-fading. */
header.site-header{ view-transition-name: usc-header; }
.ticker{ view-transition-name: usc-ticker; }
footer.site-footer{ view-transition-name: usc-footer; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}

/* --- 4. Live scroll progress bar ------------------------------------------
   Replaces the static top rule with a real progress indicator, driven by a
   scroll timeline. No JS, no scroll listener, no jank. */
/* The plain progress bar was replaced by the section rail below. */

/* --- 5. Scroll-driven reveals + hero parallax -----------------------------
   Elements animate against their own position in the viewport rather than a
   JS IntersectionObserver, so they scrub smoothly and never fire late. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [data-reveal]{
      animation: usc-reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
    @keyframes usc-reveal{
      from{ opacity:0; transform:translateY(26px); }
      to{ opacity:1; transform:none; }
    }

    /* Staggered children inside grids. */
    .services-grid > *,
    .insight-grid > *,
    .county-grid > *,
    .plans > *{
      animation: usc-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 20%;
    }
    @keyframes usc-rise{
      from{ opacity:0; transform:translateY(30px) scale(.985); }
      to{ opacity:1; transform:none; }
    }

    /* Slow parallax drift on the hero photograph. */
    .hero-media img{
      animation: usc-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes usc-parallax{
      from{ transform:scale(1.12) translateY(-2.2%); }
      to{ transform:scale(1.12) translateY(2.2%); }
    }

    /* Section headings wipe their underline in as they arrive. */
    .section-head::after{
      animation: usc-underline linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 22%;
    }
    @keyframes usc-underline{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
    .section-head::after{ transform-origin:0 50%; }
  }
}

/* --- 6. Animated conic "signal sweep" ------------------------------------
   A rotating beam traced around the featured plan and the hero panel. Only
   possible because --sweep is registered as a real <angle> above. */
.plan.is-highlight,
.review-card{ position:relative; isolation:isolate; }

.plan.is-highlight::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--sweep),
    transparent 0turn,
    var(--cornell) .06turn,
    var(--gold) .12turn,
    transparent .28turn,
    transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;
  z-index:2;
  border:0;
}
@media (prefers-reduced-motion: no-preference){
  .plan.is-highlight::after{ animation: usc-sweep 6s linear infinite; }
}
@keyframes usc-sweep{ to{ --sweep:360deg; } }

/* --- 7. Pointer spotlight on cards ---------------------------------------
   theme.js writes --mx/--my; the gradient tracks the cursor across the card. */
.service-card,
.insight-card,
.county-card{ position:relative; overflow:hidden; }

/* Painted as an extra background layer rather than a pseudo-element, so it
   always sits above the card's background colour and below its text. */
.service-card,
.insight-card,
.county-card{
  background-image:radial-gradient(240px circle at var(--mx,-200px) var(--my,-200px),
    color-mix(in oklab, var(--cornell) 16%, transparent),
    transparent 60%);
  background-repeat:no-repeat;
}

/* --- 8. Headline gradient sweep ------------------------------------------ */
.hero h1 .grad-word,
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,
    var(--cornell) 0%, var(--gold) 26%, var(--forest) 52%, var(--lake) 74%, var(--cornell) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
@media (prefers-reduced-motion: no-preference){
  .hero h1 .grad-word,
  .hero h1 em{ animation: usc-shimmer 9s ease-in-out infinite; }
}
@keyframes usc-shimmer{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* --- 9. Hero signal overlay (LIVE TRACE) --------------------------------- */
.signal-strip{
  position:absolute; left:16px; right:16px; top:16px; z-index:3;
  display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:14px;
  padding:11px 16px; border-radius:var(--radius);
  background:color-mix(in srgb, var(--inverse) 62%, transparent);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
          backdrop-filter:blur(12px) saturate(1.2);
  color:var(--inverse-ink);
}
.signal-live{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:"SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.signal-live-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--forest);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--forest) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference){
  .signal-live-dot{ animation: usc-ping 2s ease-out infinite; }
}
@keyframes usc-ping{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--forest) 70%, transparent); }
  70%{ box-shadow:0 0 0 9px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.ring-wrap{ position:relative; width:56px; height:56px; flex:none; }
.ring-wrap svg{ transform:rotate(-90deg); display:block; }
.ring-fg{ stroke-dasharray:151; stroke-dashoffset:151; stroke-linecap:round; }
@media (prefers-reduced-motion: no-preference){
  .ring-fg{ animation: usc-ring 1.8s cubic-bezier(.2,.8,.2,1) .25s forwards; }
}
@keyframes usc-ring{ to{ stroke-dashoffset:6; } }
@media (prefers-reduced-motion: reduce){ .ring-fg{ stroke-dashoffset:6; } }
.ring-label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size:.74rem; font-weight:700; color:var(--inverse-ink);
}
.trace{ width:100%; height:40px; display:block; overflow:visible; }
.trace path{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:900; stroke-dashoffset:900;
}
.trace path.wave{ stroke:var(--forest); stroke-width:2; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--forest) 55%, transparent)); }
.trace path.echo{ stroke:var(--gold); stroke-width:1.2; opacity:.45; }
@media (prefers-reduced-motion: no-preference){
  .trace path.wave{ animation: usc-draw 2.6s ease-out .2s forwards, usc-pulse 3.4s ease-in-out 3s infinite; }
  .trace path.echo{ animation: usc-draw 2.6s ease-out .6s forwards; }
}
@keyframes usc-draw{ to{ stroke-dashoffset:0; } }
@keyframes usc-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .trace path{ stroke-dashoffset:0; } }

/* --- 10. Container queries ------------------------------------------------
   Cards respond to the width of their own column, not the viewport, so they
   stay correct in any layout they get dropped into. */
.service-card,
.insight-card,
.county-card{ container-type: inline-size; }

@container (max-width: 260px){
  .service-card h3,
  .insight-card h3,
  .county-card h3{ font-size:1.05rem; }
  .service-card .icon{ width:24px; height:24px; }
}

/* --- 11. :has() driven states -------------------------------------------- */
.form-panel:has(input:focus, textarea:focus, select:focus){
  border-color:var(--forest);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--forest) 12%, transparent), var(--shadow);
}
.field:has(input:focus, textarea:focus, select:focus) label{ color:var(--forest); }
.field:has(input:required:invalid:not(:placeholder-shown)) label::after{
  content:" — check this"; color:var(--cornell); font-weight:700;
}
.site-header:has(.menu-toggle[aria-expanded="true"]){ box-shadow:var(--shadow); }

/* --- 12. Depth + polish -------------------------------------------------- */
.hero-media{
  perspective:1200px;
  transform-style:preserve-3d;
}
.review-card{
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  transform:translate3d(0,0,0);
}
@media (hover:hover) and (min-width:861px){
  .hero-media:hover .review-card{
    transform:translate3d(0,-6px,42px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    box-shadow:var(--shadow-strong);
  }
}

/* Buttons get a soft magnetic lift driven by theme.js. */
.btn{ will-change:transform; }
.btn-primary{
  background-image:linear-gradient(135deg,
    var(--cornell) 0%, color-mix(in oklab, var(--cornell) 78%, var(--gold)) 100%);
}

/* Grain overlay — a very fine texture that keeps the flat areas from
   looking plasticky on large displays. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (max-width:860px){ body::after{ display:none; } }

/* Smooth, modern focus ring everywhere. */
:where(a, button, input, select, textarea):focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
  border-radius:4px;
}

/* Nicer text rendering for long-form paragraphs. */
p, li{ text-wrap: pretty; }

/* --- 13. Responsive guards for the new pieces ---------------------------- */
@media (max-width:860px){
  .signal-strip{ left:12px; right:12px; top:12px; padding:9px 12px; gap:10px; }
  .ring-wrap{ width:46px; height:46px; }
  .trace{ height:30px; }
}
@media (max-width:560px){
  .signal-strip{ grid-template-columns:auto auto; }
  .signal-strip .trace{ display:none; }
}

/* --- 14. Header grid with the theme toggle in place ----------------------
   Desktop: brand | nav | toggle | CTA  (menu-toggle is display:none there).
   Mobile: the collapsed nav still spans its own row beneath the controls. */
@media (max-width:860px){
  .nav-row{ grid-template-columns:minmax(0,1fr) auto auto auto; }
  .theme-toggle{ width:38px; height:38px; }
}
@media (max-width:620px){
  .nav-row{ grid-template-columns:minmax(0,1fr) auto auto; }
}

/* --- 15. Hero proportions -------------------------------------------------
   The fixed 4.45rem headline overflowed its column into five lines and
   pushed the supporting copy below the fold. Fluid type plus a slightly
   wider copy column keeps the whole pitch visible on a laptop screen. */
.hero-inner{
  grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
  gap:clamp(32px,4vw,58px);
}
.hero h1{
  font-size:clamp(2.45rem, 3.9vw, 3.85rem);
  max-width:13.5em;
  line-height:1.04;
}
.hero .clarify{ max-width:52ch; }
.hero .lede{ max-width:50ch; }

/* Keep the gradient inside the warm half of the palette — sweeping through
   the blue produced a muddy purple where it met the red. */
.hero h1 .grad-word,
.hero h1 em{
  background-image:linear-gradient(100deg,
    var(--cornell) 0%, var(--gold) 30%, var(--forest) 55%, var(--gold) 80%, var(--cornell) 100%);
}

@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero h1{ font-size:clamp(2.2rem, 7vw, 3rem); max-width:none; }
}

/* ==========================================================================
   SIGNATURE LAYER — the pieces that make this feel bespoke
   ========================================================================== */

/* --- 16. Kinetic headline -------------------------------------------------
   Each word rises and pulls into focus on its own beat. The blur resolving
   to zero is what sells it — it reads as the message "tuning in". */
.kinetic{ perspective:900px; }
.kinetic .kw{
  display:inline-block;
  transform-origin:50% 100%;
  will-change:transform, opacity, filter;
}
@media (prefers-reduced-motion: no-preference){
  .kinetic .kw{
    animation: usc-word-in .85s cubic-bezier(.16,.84,.28,1) both;
    animation-delay: calc(var(--i, 0) * 70ms + 100ms);
  }
}
@keyframes usc-word-in{
  from{ opacity:0; transform:translateY(.42em) rotateX(-52deg); filter:blur(9px); }
  60%{ filter:blur(0); }
  to{ opacity:1; transform:none; filter:blur(0); }
}

/* The accent phrase keeps its gradient while it animates. */
.kinetic em.kw{
  font-style:normal;
  background-image:linear-gradient(100deg,
    var(--cornell) 0%, var(--gold) 30%, var(--forest) 55%, var(--gold) 80%, var(--cornell) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
@media (prefers-reduced-motion: no-preference){
  .kinetic em.kw{
    animation:
      usc-word-in .85s cubic-bezier(.16,.84,.28,1) both,
      usc-shimmer 9s ease-in-out 1.4s infinite;
    animation-delay: calc(var(--i, 0) * 70ms + 100ms), 1.4s;
  }
}

/* --- 17. Scroll-reactive oscilloscope ------------------------------------
   theme.js feeds the visitor's scroll velocity into --amp, so the trace
   spikes while they move through the page and settles when they stop.
   The site's own signal responds to the person reading it. */
.trace{ --amp:1; }
.trace .wave,
.trace .echo{
  transform:scaleY(var(--amp));
  transform-origin:50% 50%;
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.trace .echo{ transform:scaleY(calc(var(--amp) * .82)); }
@media (prefers-reduced-motion: reduce){
  .trace .wave, .trace .echo{ transform:none; transition:none; }
}
.signal-live-dot{ transition:background .3s ease; }
.is-scanning .signal-live-dot{ background:var(--gold); }

/* --- 18. Process rails ----------------------------------------------------
   A charge runs left to right across the top of each step as it enters the
   viewport, staggered so the three cards read in order. */
.seq-step{ position:relative; overflow:hidden; }
.seq-step::before{
  content:"";
  position:absolute; inset:0 0 auto; height:3px;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--cornell), var(--gold), var(--forest));
  z-index:1;
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .seq-step::before{
      animation: usc-charge linear both;
      animation-timeline: view();
      animation-range: entry 18% cover 46%;
    }
    .seq-step:nth-child(2)::before{ animation-range: entry 24% cover 54%; }
    .seq-step:nth-child(3)::before{ animation-range: entry 30% cover 62%; }
  }
}
@keyframes usc-charge{ to{ transform:scaleX(1); } }

/* Without scroll timelines the rails simply appear filled. */
@supports not (animation-timeline: view()){
  .seq-step::before{ transform:scaleX(1); }
}
@media (prefers-reduced-motion: reduce){ .seq-step::before{ transform:scaleX(1); } }

/* --- 19. Shared element across page navigations --------------------------
   The hero image is captured by name, so it morphs between documents during
   a view transition instead of cross-fading. */
.hero-media img{ view-transition-name: usc-hero-media; }

/* Keep the brand, hamburger and theme toggle on one row at phone widths;
   only the full-width CTA and the collapsing nav get their own rows. */
@media (max-width:620px){
  .menu-toggle{ grid-row:1; grid-column:2; }
  .theme-toggle{ grid-row:1; grid-column:3; }
}

/* ==========================================================================
   REFINEMENT LAYER
   ========================================================================== */

/* --- 20. Header condenses as the page moves ------------------------------
   --nav-h is a registered length, so a scroll timeline can interpolate it.
   The header tightens by 18px over the first stretch of the page and stays
   there, which gives back vertical room without any scroll listener. */
@property --nav-h{
  syntax: '<length>';
  inherits: true;
  initial-value: 78px;
}
.nav-row{ min-height:var(--nav-h); transition:min-height .2s ease; }

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference) and (min-width:861px){
    header.site-header{
      animation: usc-condense linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 200px;
    }
    @keyframes usc-condense{ to{ --nav-h:60px; } }
  }
}

/* --- 21. The brand mark carries a live signal ----------------------------
   A short dash travels the waveform continuously, so the logo reads as a
   signal actually passing through rather than a static glyph. The dash and
   gap sum to 46, and the offset animates by exactly that, which makes the
   loop seamless whatever the path's true length. On hover the wave gains
   amplitude and the pulse quickens. */
.brand-wave{ overflow:visible; }
.brand-wave .wave-base{
  opacity:.42;
  transition:opacity .3s ease;
}
.brand-wave .wave-pulse{
  color:var(--forest);
  stroke-dasharray:6 40;
  stroke-dashoffset:46;
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--forest) 60%, transparent));
}
@media (prefers-reduced-motion: no-preference){
  .brand-wave .wave-pulse{ animation:usc-logo-travel 2.8s linear infinite; }
}
@keyframes usc-logo-travel{ to{ stroke-dashoffset:0; } }

/* Standing still, the mark still shows the full wave. */
@media (prefers-reduced-motion: reduce){
  .brand-wave .wave-pulse{ stroke-dasharray:none; stroke-dashoffset:0; opacity:.8; }
}

.brand-mark{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark{ transform:scaleY(1.28); }
.brand:hover .brand-wave .wave-base{ opacity:.6; }
@media (prefers-reduced-motion: no-preference){
  .brand:hover .brand-wave .wave-pulse{ animation-duration:1.1s; }
}
@media (prefers-reduced-motion: reduce){
  .brand-mark{ transition:none; }
  .brand:hover .brand-mark{ transform:none; }
}

/* --- 22. Return to top ---------------------------------------------------- */
.usc-top{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:var(--glass);
  color:var(--ink);
  cursor:pointer;
  opacity:0; transform:translateY(14px) scale(.9);
  pointer-events:none;
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1),
             color .2s ease, border-color .2s ease;
}
.usc-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.usc-top:hover{ color:var(--cornell); border-color:var(--cornell); transform:translateY(-3px); }
.usc-top:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }
.usc-top svg{ width:19px; height:19px; }
@media (max-width:560px){ .usc-top{ right:14px; bottom:14px; width:42px; height:42px; } }

/* --- 23. Cards gain a quiet beam along their edge on hover --------------- */
.service-card,
.insight-card,
.county-card,
.seq-step{ transition:transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s ease, box-shadow .26s ease; }
.service-card:hover,
.insight-card:hover,
.county-card:hover,
.seq-step:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--cornell) 34%, var(--line));
  box-shadow:0 30px 72px -46px color-mix(in srgb, var(--cornell) 58%, transparent);
}

/* --- 24. The ticker rests while a visitor reads it ----------------------- */
.ticker:hover{ cursor:default; }

/* --- 25. Regional cards read as a tidy three-by-two ---------------------- */
.county-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width:1040px){ .county-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .county-grid{ grid-template-columns:1fr; } }
.county-card h3{ text-wrap:balance; }

/* ==========================================================================
   SECTION PROGRESS RAIL
   A slim bar across the top of the window that fills as the page is read.
   A small chip rides the leading edge naming the section currently in view,
   so the reader always knows where they are and how much remains.
   ========================================================================== */
.usc-rail{
  position:fixed; inset:0 0 auto;
  height:3px; z-index:95;
  pointer-events:none;
  background:color-mix(in srgb, var(--line) 55%, transparent);
}
.usc-rail-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--cornell), var(--gold), var(--forest), var(--lake));
  transition:width .08s linear;
  will-change:width;
}

/* Faint marks showing where each section begins. */
.usc-rail-ticks{ position:absolute; inset:0; }
.usc-rail-ticks i{
  position:absolute; top:0; bottom:0;
  width:1px;
  background:color-mix(in srgb, var(--ink) 34%, transparent);
  opacity:.5;
}

/* The travelling label. */
.usc-rail-chip{
  position:absolute; top:9px; left:0;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 11px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.6);
  white-space:nowrap;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .28s ease, transform .18s linear;
  will-change:transform, opacity;
}
.usc-rail.is-active .usc-rail-chip{ opacity:1; }
.usc-rail-chip i{
  font-style:normal;
  font-family:"SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size:.62rem; font-weight:800;
  color:var(--cornell);
}
.usc-rail-chip b{
  font-size:.72rem; font-weight:800; letter-spacing:.02em;
  color:var(--ink);
}

@media (prefers-reduced-motion: reduce){
  .usc-rail-fill{ transition:none; }
  .usc-rail-chip{ transition:none; }
}
@media (max-width:700px){
  .usc-rail-chip{ display:none; }
}
.admin-bar .usc-rail{ top:32px; }
@media (max-width:782px){ .admin-bar .usc-rail{ top:46px; } }

/* --- 26. Punctuation after a gradient phrase -----------------------------
   The full stop sits inside the accent element so it can never wrap to a
   line of its own, and this returns it to the normal ink colour. When
   background-clip:text is in play, -webkit-text-fill-color is what actually
   governs the glyph, so it has to be reset alongside the background. */
.kinetic em.kw .kw-tail{
  background:none;
  -webkit-background-clip:border-box;
          background-clip:border-box;
  -webkit-text-fill-color:var(--ink);
  color:var(--ink);
}

/* ==========================================================================
   HERO CONSOLE — the signal map that replaced the photograph
   Drawn in SVG, a few kilobytes, sharp at every resolution, and it states
   the actual proposition: a signal broadcast from Ithaca across the state.
   ========================================================================== */
.hero-console{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--forest) 20%, transparent), transparent 62%),
    linear-gradient(170deg, var(--inverse-soft), var(--inverse));
  box-shadow:var(--shadow-strong);
  color:var(--inverse-ink);
}
.hero-console::before{
  content:"";
  position:absolute; inset:0 0 auto; height:3px; z-index:3;
  background:linear-gradient(90deg, var(--cornell), var(--gold), var(--forest), var(--lake));
}

.console-head{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.console-head .signal-live{ color:var(--inverse-ink); }
.console-head .ring-wrap{ width:52px; height:52px; }
.console-origin{
  margin-left:auto;
  font-family:"SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--inverse-ink) 62%, transparent);
  white-space:nowrap;
}

/* ---- The map ------------------------------------------------------------ */
.signal-map{ display:block; width:100%; height:auto; }

.map-grid line{
  stroke:rgba(255,255,255,.055);
  stroke-width:1;
}

/* Connections charge outward from the hub, one after another. */
.map-links .link{
  stroke:color-mix(in srgb, var(--forest) 70%, transparent);
  stroke-width:1;
  stroke-dasharray:260;
  stroke-dashoffset:260;
  opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .map-links .link{ animation:usc-link-charge 1.5s cubic-bezier(.3,.7,.3,1) var(--d, 0s) forwards; }
}
@keyframes usc-link-charge{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .map-links .link{ stroke-dashoffset:0; } }

/* Broadcast rings leaving Ithaca. */
.map-pings .ping{
  fill:none;
  stroke:var(--forest);
  stroke-width:1.2;
  transform-origin:120px 132px;
  opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .map-pings .ping{ animation:usc-map-ping 4.8s cubic-bezier(.2,.6,.4,1) var(--o, 0s) infinite; }
}
@keyframes usc-map-ping{
  0%{ transform:scale(.35); opacity:0; }
  12%{ opacity:.75; }
  100%{ transform:scale(6.2); opacity:0; }
}

.hub-glow{ opacity:.9; }

/* Cities light up as the signal reaches them. */
.map-nodes .node-dot{ fill:var(--inverse-ink); }
.map-nodes .node-halo{
  fill:none;
  stroke:var(--forest);
  stroke-width:1.4;
  opacity:.75;
}
@media (prefers-reduced-motion: no-preference){
  .map-nodes .node{ opacity:0; animation:usc-node-in .6s ease-out var(--d, 0s) forwards; }
  .map-nodes .node-halo{ transform-box:fill-box; transform-origin:center; animation:usc-node-halo 3.4s ease-out var(--d, 0s) infinite; }
}
@keyframes usc-node-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes usc-node-halo{
  0%{ transform:scale(1); opacity:.8; }
  55%,100%{ transform:scale(3.4); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .map-nodes .node{ opacity:1; } }

.map-hub circle{ fill:var(--forest); }
.map-hub text{
  fill:var(--inverse-ink);
  font-family:"SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size:8px; font-weight:700; letter-spacing:.12em;
}

/* ---- Trace + readout ---------------------------------------------------- */
.hero-console .trace{
  width:100%; height:44px; display:block;
  padding:0 4px;
  border-top:1px solid rgba(255,255,255,.09);
}
.console-readout{
  display:flex; flex-wrap:wrap; gap:6px 24px;
  padding:12px 18px 15px;
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.16);
}
.console-readout span{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:.72rem; font-weight:650; letter-spacing:.02em;
  color:color-mix(in srgb, var(--inverse-ink) 66%, transparent);
}
.console-readout b{
  font-family:"SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size:.95rem; font-weight:800;
  color:var(--inverse-ink);
}

/* The review card now sits beneath the console rather than over a photo. */
.hero-media{ display:flex; flex-direction:column; gap:16px; min-height:0; }
.hero-media .review-card{ position:static; }

/* Once the hero stacks into one column the console spans the full width, so
   the map is capped to keep the opening screen from running away. */
@media (max-width:860px){
  .signal-map{ max-height:270px; }
  .hero-console .trace{ height:34px; }
  .console-head{ padding:12px 14px 8px; }
  .console-readout{ padding:10px 14px 12px; gap:6px 18px; }
}
@media (max-width:520px){
  .signal-map{ max-height:210px; }
  .console-origin{ display:none; }
}

/* ==========================================================================
   HOW WE WORK — plain commitments, standing in for testimonials
   ========================================================================== */
.commitments{ background:var(--surface, transparent); }
.commit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}
.commit-card{
  position:relative;
  padding:26px 24px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--glass);
  box-shadow:var(--shadow);
  transition:transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s ease, box-shadow .26s ease;
}
.commit-card::before{
  content:"";
  position:absolute; inset:0 0 auto; height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, var(--forest), var(--gold));
  opacity:.85;
}
.commit-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--forest) 40%, var(--line));
  box-shadow:0 30px 72px -46px color-mix(in srgb, var(--forest) 52%, transparent);
}
.commit-num{
  display:block;
  margin-bottom:12px;
  font-family:"SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size:.72rem; font-weight:850; letter-spacing:.08em;
  color:var(--forest);
}
.commit-card h3{ font-size:1.12rem; line-height:1.3; margin-bottom:.55em; }
.commit-card p{ margin:0; color:var(--muted); font-size:.94rem; line-height:1.6; }

/* A quieter secondary action, so the primary button stands alone. */
.cta-quiet{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.92rem; font-weight:700;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.cta-quiet:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.cta-quiet:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }

/* The ring is now purely decorative, with no figure inside it. */
.console-head .ring-wrap{ opacity:.9; }

/* --- Opening screen: keep the call to action above the fold --------------
   The hero was centring the copy against a much taller console column, which
   pushed the button off a 768px laptop screen entirely. Aligning to the top
   and tightening the vertical rhythm brings the next step back into view on
   every common display without shrinking the message. */
.hero{ padding-top:clamp(34px, 4vw, 56px); padding-bottom:clamp(40px, 5vw, 64px); }
.hero-inner{ align-items:start; }
.hero h1{
  font-size:clamp(2.3rem, 3.5vw, 3.35rem);
  margin:.2em 0 .26em;
}
.hero .clarify{ margin-top:.7em; font-size:1.06rem; line-height:1.46; }
.hero .lede{ margin-top:.6em; font-size:1rem; line-height:1.55; }
.hero .cta-row{ margin-top:1.5em; }
.hero .proof-points{ margin-top:1.15em; }

/* The console keeps its proportions but no longer dictates the hero height. */
@media (min-width:861px){
  .hero-media{ position:sticky; top:96px; }
}

/* --- Accent phrase wrapping ----------------------------------------------
   Holding a multi-word accent in a single inline-block made it an unbreakable
   box, which overflowed the column and pushed the full stop onto its own
   line. Rendered inline it wraps like ordinary text, and because the gradient
   uses the default slice behaviour it still reads as one continuous sweep
   across the lines. The entrance animation drops to opacity and blur, which
   are the properties that do apply to inline elements. */
.kinetic em.kw{
  display:inline;
  transform:none;
}
@media (prefers-reduced-motion: no-preference){
  .kinetic em.kw{
    animation-name: usc-word-fade, usc-shimmer;
  }
}
@keyframes usc-word-fade{
  from{ opacity:0; filter:blur(8px); }
  to{ opacity:1; filter:blur(0); }
}
/* No whitespace precedes the full stop, so it cannot break from the word. */
.kinetic .kw-tail{ display:inline; }

/* The service verb reads as a kicker rather than body text. */
.service-num{ text-transform:uppercase; letter-spacing:.08em; }