@font-face{font-family:"Zilla Slab";src:url(fonts/zilla-slab/zilla-slab-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo/archivo-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo/archivo-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo/archivo-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass";src:url(fonts/overpass/overpass-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass";src:url(fonts/overpass/overpass-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans/public-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Metric-matched fallbacks, measured against Arial in headless Chrome */
@font-face{font-family:"Zilla Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:700;size-adjust:91.2%;ascent-override:103.5%;descent-override:28.1%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:400;size-adjust:97.9%;ascent-override:89.7%;descent-override:21.5%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:500;size-adjust:99.6%;ascent-override:88.2%;descent-override:21.1%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:600;size-adjust:94.8%;ascent-override:92.6%;descent-override:22.2%;line-gap-override:0%}
@font-face{font-family:"Overpass Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:700;size-adjust:96.9%;ascent-override:91.1%;descent-override:39.5%;line-gap-override:0%}
@font-face{font-family:"Overpass Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:800;size-adjust:98.3%;ascent-override:89.8%;descent-override:39%;line-gap-override:0%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:400;size-adjust:103.3%;ascent-override:92%;descent-override:21.8%;line-gap-override:0%}

:root{
  --caliche:#F6F1E7;--lime:#ECE4D4;--field:#C9BBA2;--bark:#5C4A3C;--mes:#2A211C;
  --brick:#9C3B22;--sun:#E0763A;--prairie:#4E5B35;--wheat:#E2B45A;
  --slab:"Zilla Slab","Zilla Fallback",Georgia,serif;
  --sans:Archivo,"Archivo Fallback",Arial,sans-serif;
  --head:Overpass,"Overpass Fallback",Arial,sans-serif;
  --body:"Public Sans","Public Sans Fallback",Arial,sans-serif;
  --gut:clamp(20px,5vw,64px);
  --mortar:6px;
  --focus:var(--brick);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--caliche);color:var(--mes);font:400 1.125rem/1.6 var(--body);text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus,.closing:focus{outline:none}
.top,.hero,.skip{--focus:var(--mes)}
.flagship,.how,.foot{--focus:var(--wheat)}
.closing{--focus:var(--mes)}

/* ---------- Texas header band (brand8, kept intact) ---------- */
.skip{position:absolute;left:var(--gut);top:-100px;z-index:20;background:var(--mes);color:var(--caliche);padding:12px 18px;font:600 1.0625rem/1.6 var(--sans);text-decoration:none}
.skip:focus{top:12px}

.top{position:sticky;top:0;z-index:10;background:var(--caliche);border-bottom:2px solid var(--mes);font:400 1.0625rem/1.6 var(--sans)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:block;flex:none;padding:6px 0}
.brand svg{height:38px;width:auto;aspect-ratio:400/64}
.top nav ul{display:flex;gap:clamp(16px,3vw,40px)}
.top nav a{font-weight:500;font-size:.98rem;text-decoration:none;padding:10px 0;background:linear-gradient(var(--brick),var(--brick)) 0 100%/0 3px no-repeat;transition:background-size .25s ease}
.top nav a:hover{background-size:100% 3px}

.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);min-height:min(760px,calc(100svh - 74px));border-bottom:2px solid var(--mes);font:400 1.0625rem/1.6 var(--sans)}
.hero__copy{padding:clamp(48px,8vw,112px) var(--gut) clamp(48px,6vw,80px);padding-left:max(var(--gut),calc((100vw - 1280px)/2 + var(--gut)));display:flex;flex-direction:column;justify-content:center}
h1{font:700 clamp(2.75rem,5.6vw,5.5rem)/.98 var(--slab);letter-spacing:-.018em}
h1 .l{display:block}
h1 .l--em{color:var(--brick)}
.hero__sub{max-width:38em;margin-top:clamp(24px,3vw,36px);font-size:clamp(1.0625rem,1.3vw,1.2rem);color:var(--bark)}
.btn{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;margin-top:clamp(28px,3.4vw,44px);padding:18px 24px 18px 26px;min-height:56px;background:var(--brick);color:var(--caliche);font:600 1.0625rem/1 var(--sans);text-decoration:none;box-shadow:6px 6px 0 var(--mes);transition:transform .18s ease,box-shadow .18s ease}
.btn svg{width:20px;height:12px;fill:currentColor;transition:transform .18s ease}
.btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--mes)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--mes)}
.hero__art{border-left:2px solid var(--mes);overflow:hidden;background:var(--caliche)}
.hero__art svg{width:100%;height:100%}

.courses{height:18px;background:
  repeating-linear-gradient(90deg,var(--mes) 0 148px,transparent 148px 154px,var(--brick) 154px 214px,transparent 214px 220px,var(--field) 220px 330px,transparent 330px 336px,var(--prairie) 336px 372px,transparent 372px 378px);
  background-color:var(--caliche)}

/* ---------- Body: Civic composition in the Texas palette ---------- */
.sect{padding:clamp(64px,9vw,128px) 0}
.sect-in{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.rail{position:sticky;top:104px;border-top:6px solid var(--mes);padding-top:20px}
h2{font:800 clamp(2rem,3.4vw,2.875rem)/1.02 var(--head);letter-spacing:-.015em;color:var(--mes)}
h3{font-family:var(--head)}

/* What we do */
.flagship{background:var(--mes);color:var(--caliche);padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px) clamp(44px,5vw,72px);box-shadow:inset 0 -10px 0 var(--sun)}
.tab{display:inline-block;background:var(--wheat);color:var(--mes);font:800 .9375rem/1 var(--head);letter-spacing:.04em;padding:9px 12px 7px}
.flagship h3{margin-top:24px;font-weight:800;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.02;letter-spacing:-.018em;max-width:12em}
.flag-text{margin-top:20px;max-width:36em;color:var(--lime);font-size:clamp(1.0625rem,1.3vw,1.1875rem)}
.flag-art{margin-top:36px;width:100%;max-width:480px;height:auto;aspect-ratio:480/56}

.services{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:6px solid var(--mes)}
.svc p{color:var(--bark)}
.svc-a{grid-column:span 7;padding:32px 40px 44px 0}
.svc-a h3,.svc-c h3{font-weight:800;font-size:clamp(1.75rem,2.8vw,2.375rem);line-height:1.06;letter-spacing:-.015em}
.svc-a p{margin-top:14px;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;max-width:18em}
.svc-b{grid-column:span 5;padding:36px 0 44px 32px;border-left:1px solid var(--field)}
.svc-b h3,.svc-d h3,.svc-e h3{font-weight:700;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.2}
.svc-b p,.svc-d p,.svc-e p{margin-top:10px}
.svc-c{grid-column:span 12;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 40px;align-items:end;background:var(--lime);border-top:6px solid var(--brick);padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px)}
.svc-c p{margin-top:14px;max-width:30em}
.signoff{display:flex;align-items:flex-end;gap:14px}
.svc-mark{flex:none;width:64px;height:64px}
.signoff-line{flex:1;height:2px;margin-bottom:7px;background:var(--mes)}
.svc-d{grid-column:span 5;padding:36px 32px 8px 0}
.svc-e{grid-column:span 7;padding:36px 0 8px 32px;border-left:1px solid var(--field)}

/* How we work */
.how{background:var(--mes);color:var(--caliche);padding-bottom:0}
.how .rail{border-top-color:var(--wheat)}
.how h2{color:var(--caliche)}
.how .wrap{padding-bottom:clamp(56px,7vw,96px)}
.pr-lead h3{font-weight:800;font-size:clamp(3rem,7.2vw,6.25rem);line-height:.92;letter-spacing:-.03em}
.pr-lead h3 span{color:var(--wheat)}
.pr-lead p{margin-top:clamp(20px,2.4vw,32px);max-width:22em;font-size:clamp(1.25rem,1.8vw,1.625rem);line-height:1.4;color:var(--lime)}
.signline{margin-top:40px;width:100%;max-width:520px;height:auto;aspect-ratio:520/44}
.pr-log{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--bark);padding-top:32px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 40px}
.pr-log h3{font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1}
.pr-log p{color:var(--field);max-width:30em}
.log{margin-top:24px;width:100%;max-width:360px;height:auto;aspect-ratio:360/100}
.pr-base{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--bark);padding-top:32px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 40px}
.pr-base h3{grid-column:1/-1;font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1;letter-spacing:-.02em;color:var(--wheat)}
.pr-base p{grid-column:2;max-width:30em;color:var(--lime)}
.footing{height:76px;background:
  repeating-linear-gradient(90deg,var(--wheat) 0 120px,transparent 120px 126px) 0 0/100% 10px no-repeat,
  repeating-linear-gradient(90deg,transparent 0 6px,var(--field) 6px 94px) 0 16px/100% 20px no-repeat,
  repeating-linear-gradient(90deg,var(--bark) 0 142px,transparent 142px 148px) 0 42px/100% 34px no-repeat;
  background-color:var(--mes)}

/* Who we serve */
.who{background:var(--lime);border-top:2px solid var(--mes)}
.signs{display:grid;gap:16px}
.sign{display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--caliche);padding:clamp(24px,3.4vw,44px) clamp(24px,3.4vw,48px);border-left:12px solid}
.sign p{font:700 clamp(1.5rem,3vw,2.5rem)/1.1 var(--head);letter-spacing:-.012em;max-width:20em}
.sign-a{background:var(--mes);border-left-color:var(--wheat)}
.sign-b{background:var(--prairie);border-left-color:var(--sun);margin-left:clamp(0px,6vw,96px)}

/* Closing band */
.closing{position:relative;overflow:hidden;background:var(--wheat);color:var(--mes);padding:clamp(72px,10vw,136px) 0 clamp(150px,16vw,220px);border-top:6px solid var(--mes)}
.closing-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px 64px;align-items:end}
.closing h2{font-size:clamp(2.5rem,6vw,5rem);line-height:.98;letter-spacing:-.022em}
.closing p{font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.5;border-top:3px solid var(--mes);padding-top:20px}
.closing-sun{position:absolute;right:clamp(-120px,-5vw,-40px);bottom:0;width:clamp(240px,30vw,440px);aspect-ratio:2/1;border-radius:999px 999px 0 0;background:var(--sun)}

/* ---------- Texas footer band (brand8, kept intact) ---------- */
.horizon{height:93px;background:
  linear-gradient(var(--mes),var(--mes)) 0 0/100% 3px no-repeat,
  linear-gradient(var(--prairie),var(--prairie)) 0 9px/100% 14px no-repeat,
  repeating-linear-gradient(90deg,var(--field) 0 92px,var(--caliche) 92px 98px) 0 29px/100% 22px no-repeat,
  repeating-linear-gradient(90deg,var(--bark) 0 132px,var(--caliche) 132px 138px) 40px 57px/100% 30px no-repeat;
  background-color:var(--caliche)}
.foot{background:var(--mes);color:var(--field);padding:36px 0;font:400 1.0625rem/1.6 var(--sans)}
.foot__in{display:flex;align-items:center;gap:18px}
.foot__mark svg{width:40px;height:40px}
.foot p{font-size:.95rem}

/* Motion: content stays visible unless JS opts in and motion is allowed */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
  .js .hero__art .sun{transform:translateY(46px);animation:set 1.4s cubic-bezier(.2,.7,.2,1) .15s forwards}
  @keyframes set{to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

@media (max-width:1000px){
  .sect-in{grid-template-columns:1fr}
  .rail{position:static}
  .svc-a,.svc-b,.svc-d,.svc-e{grid-column:span 12;padding:28px 0 32px;border-left:0}
  .svc-b,.svc-d,.svc-e{border-top:1px solid var(--field)}
  .svc-c{grid-template-columns:1fr}
  .pr-log,.pr-base{grid-template-columns:1fr}
  .pr-base p{grid-column:1}
  .sign-b{margin-left:0}
  .closing-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .top{position:static}
  .top__in{height:auto;flex-wrap:wrap;gap:4px 24px;padding-top:12px;padding-bottom:4px}
  .brand svg{height:32px}
  .top nav{width:100%}
  .top nav ul{flex-wrap:wrap;gap:0 20px}
  .top nav a{display:inline-block;font-size:.92rem;padding:10px 0}
  html{scroll-padding-top:12px}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__art{order:-1;border-left:0;border-bottom:2px solid var(--mes);height:clamp(220px,62vw,320px)}
  .hero__copy{padding:40px var(--gut) 52px}
  .sign{border-left-width:8px}
  .closing-sun{width:260px;right:-60px}
}
@media (min-width:761px) and (max-width:900px){
  .top nav a{font-size:.9rem}
}