/* Tampa Chute Connect: quiet, system-native typography; no external assets. */
:root {
  font-size:100%;
  --ink:#15181b; --ink-2:#22272b;
  --cream:#faf9f6; --cream-2:#efeee8;
  --rule:#c9c9c1; --rule-dark:#454a4e;
  --muted:#51565a; --muted-dark:#d0d2ce;
  --accent:#d3d890; --accent-deep:#555a19;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --max:80rem; --gut:clamp(1.25rem,4vw,3rem);
  --step-0:1.0625rem;
  --step-1:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);
  --step-3:clamp(2.125rem,1.5rem + 3.4vw,4.25rem);
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body { margin:0; background:var(--cream); color:var(--ink); font:400 var(--step-0)/1.65 var(--sans); font-optical-sizing:auto; text-rendering:optimizeLegibility }
/* Long words and enlarged text must not define grid minimum widths. */
body { overflow-wrap:anywhere }
.hero-grid,.section-grid,.foot-grid,.request-layout,.field-pair,.split { grid-template-columns:minmax(0,1fr) }
img,svg { max-width:100%; display:block }
h1,h2,h3 { font-family:var(--sans); font-weight:600; line-height:1.15; letter-spacing:-.025em; margin:0 0 .65em; text-wrap:balance; overflow-wrap:anywhere }
h1 { font-size:var(--step-3); line-height:1.08; letter-spacing:-.035em }
h2 { font-size:var(--step-2) }
h3 { font-size:var(--step-1); letter-spacing:-.015em }
p { margin:0 0 1em; max-width:62ch }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em; overflow-wrap:anywhere }
a:hover { text-decoration-thickness:2px }
:focus-visible { outline:3px solid var(--ink); outline-offset:4px; box-shadow:0 0 0 7px var(--cream) }
.on-ink :focus-visible { outline-color:var(--accent); box-shadow:0 0 0 7px var(--ink) }
/* Translation, not a fixed negative top, keeps enlarged skip text offscreen. */
.skip { position:absolute; left:1rem; top:0; transform:translateY(-150%); max-width:calc(100% - 2rem); z-index:10; background:var(--accent); color:var(--ink); padding:.75rem 1rem; font-weight:600; min-height:44px }
.skip:focus { top:1rem; transform:none }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gut) }
.eyebrow { font:600 .8125rem/1.5 var(--sans); letter-spacing:.075em; text-transform:uppercase; margin:0 0 1rem }
/* Solid materials keep disclosures legible; no decorative glass or sticky chrome. */
.site-head { background:var(--ink); color:var(--cream); border-bottom:1px solid var(--rule-dark) }
.site-head .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 2rem; padding-block:1rem }
.brand { font:600 1.25rem/1.35 var(--sans); letter-spacing:-.035em; text-decoration:none; display:block; align-content:center; min-height:44px; max-width:100%; overflow-wrap:anywhere }
.brand span { color:var(--accent) }
.nav { min-width:0; max-width:100% }
.nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 1.25rem }
.nav a { display:inline-flex; align-items:center; min-height:44px; font-size:.9375rem; text-decoration:none; border-bottom:1px solid transparent }
.nav a:hover,.nav a[aria-current="page"] { border-bottom-color:var(--accent) }
.nav .nav-cta { color:var(--accent) }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; max-width:100%; padding:.875rem 1.25rem; font:600 1rem/1.4 var(--sans); text-align:center; text-decoration:none; border:1px solid currentColor; border-radius:.75rem; touch-action:manipulation; transition:background-color 120ms ease,color 120ms ease }
.btn-fill { background:var(--accent); color:var(--ink); border-color:var(--accent) }
.btn-fill:hover { background:#e1e5b0; border-color:#e1e5b0 }
.btn-line { background:transparent; color:var(--cream); border-color:#a5aaa9 }
.btn-line:hover { background:var(--ink-2) }
.btn-ink { background:var(--ink); color:var(--cream); border-color:var(--ink) }
.btn-ink:hover { background:#353b40 }
/* Immediate pointer-down/keyboard press feedback, without motion or input delays. */
.btn:active:not(:disabled) { background:#555a19; color:#fff; border-color:#555a19; box-shadow:inset 0 0 0 2px currentColor; transition:none }
a:not(.btn):active { text-decoration:underline; text-decoration-thickness:2px }
.actions { display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2rem }
.hero { background:var(--ink); color:var(--cream); padding:clamp(3rem,8vw,7rem) 0 clamp(3rem,6vw,5rem) }
.hero .eyebrow { color:var(--accent) }
.hero-grid { display:grid; gap:2.5rem }
.hero-copy { min-width:0 }
.hero h1 { max-width:17ch }
.hero .lede { font-size:var(--step-1); line-height:1.5; color:var(--muted-dark); max-width:40ch }
.status { border:1px solid #8e9363; border-radius:1rem; padding:1.5rem; align-self:start; background:var(--ink-2) }
.status h2 { font:600 .8125rem/1.5 var(--sans); letter-spacing:.075em; text-transform:uppercase; color:var(--accent); margin-bottom:.875rem }
.status p { font-size:1rem; margin-bottom:.75em }
.status p:last-child { margin-bottom:0 }
.status strong { color:var(--cream) }
.section { padding:clamp(3rem,7vw,6rem) 0; border-top:1px solid var(--rule) }
.section-grid { display:grid; gap:2rem 3rem }
.section-grid>* { min-width:0 }
.section .eyebrow { color:var(--accent-deep) }
.kicker { color:var(--muted) }
.ruled { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.ruled>li { padding:1.25rem 0; border-bottom:1px solid var(--rule) }
.ruled>li p { margin:.35rem 0 0; color:var(--muted) }
.ruled h3 { margin:0; font-size:var(--step-1) }
.index>li { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.25rem 1rem; align-items:baseline }
.index .num { font:600 .875rem/1.4 var(--sans); font-variant-numeric:tabular-nums; color:var(--accent-deep) }
.index a { text-decoration:none; display:inline-flex; min-height:44px; align-items:center }
.index a:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em }
.index .go { grid-column:2; font-size:1rem; color:var(--muted) }
.split { list-style:none; margin:0; padding:0; display:grid; gap:2rem }
.split>div>h3 { font:600 .8125rem/1.5 var(--sans); letter-spacing:.075em; text-transform:uppercase; padding-bottom:.75rem; margin:0 }
.steps { counter-reset:s; list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.steps>li { counter-increment:s; padding:1.25rem 0 1.25rem 3rem; border-bottom:1px solid var(--rule); position:relative }
.steps>li::before { content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1.5rem; font:600 .875rem/1 var(--sans); color:var(--accent-deep) }
.band { background:var(--cream-2); border-block:1px solid var(--rule) }
.band .section { border-top:0 }
.closing { background:var(--ink); color:var(--cream) }
.closing .eyebrow { color:var(--accent) }
.closing p { color:var(--muted-dark) }
.site-foot { background:var(--ink); color:var(--muted-dark); border-top:1px solid var(--rule-dark); padding:3rem 0; font-size:.9375rem }
.foot-grid { display:grid; gap:2rem }
.site-foot ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 1.25rem }
.site-foot a { display:inline-flex; align-items:center; min-height:44px; color:var(--cream) }
.site-foot .legal { font-size:.875rem; max-width:70ch }
.page-head { padding-block:clamp(3rem,6vw,5rem) 2rem }
.page-head h1 { max-width:23ch }
.article { padding-bottom:5rem; max-width:64rem }
.article h2 { margin-top:2.5rem }
.article li { margin-bottom:.65rem }
.article aside { padding:1.5rem; border-left:4px solid var(--accent-deep); border-radius:0 .75rem .75rem 0; background:var(--cream-2); margin-bottom:2rem }
.article p { max-width:72ch }
.article ul { padding-left:1.3rem }
.article:has(.request-layout) { max-width:var(--max) }
.request-layout { display:grid; gap:3rem }
.request-layout>* { min-width:0 }
.request-layout h2 { margin-top:0 }
form { min-width:0 }
form label { display:block; font-weight:600; font-size:1rem; margin-bottom:1.25rem }
input,select,textarea { display:block; width:100%; min-width:0; padding:.85rem; font:inherit; line-height:1.5; margin-top:.5rem; border:1px solid #767b7d; background:#fff; color:var(--ink); border-radius:.625rem; min-height:48px }
input::placeholder,textarea::placeholder { color:#596065; opacity:1 }
textarea { resize:vertical }
.field-pair { display:grid; gap:0 1.25rem; min-width:0 }
.consent { display:flex!important; align-items:flex-start; gap:.875rem; font-weight:400!important; line-height:1.6; cursor:pointer }
.consent input { width:24px; min-width:24px; height:24px; min-height:24px; margin-top:.25rem; accent-color:var(--accent-deep) }
.consent span { min-width:0 }
.bot-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.small { font-size:.875rem; color:var(--muted) }
button { cursor:pointer }
button:disabled { cursor:default; background:#e1e2dc; color:#51565a; border-color:#767b7d }
#form-status:not(:empty) { padding:1rem; margin-top:1.5rem; border:1px solid var(--ink); border-radius:.75rem; overflow-wrap:anywhere }
/* Keep tablet content comfortably wide; side-by-side only with ample room. */
@media (min-width:60em) {
  .hero-grid { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:4rem }
  .status { margin-top:3.75rem }
  .section-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); gap:4rem }
  .section-grid.flip { grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) }
  .section-grid.flip>.head { order:2 }
  .section-grid.flip>.body { order:1 }
  .split { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foot-grid { grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start }
  .request-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:4rem }
  .field-pair { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:30em) {
  .nav ul { gap:0 1rem }
  .hero { padding-top:3rem }
  .actions { flex-direction:column; align-items:stretch }
  .brand { font-size:1.125rem }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
}
@media (prefers-reduced-transparency:reduce) {
  .site-head,.closing,.site-foot { background:var(--ink); backdrop-filter:none }
  .status { background:var(--ink-2); backdrop-filter:none }
}
@media (prefers-contrast:more) {
  :root { --rule:#15181b; --rule-dark:#faf9f6; --muted:#15181b; --muted-dark:#faf9f6; --accent-deep:#333800 }
  .status,.btn,input,select,textarea { border-width:2px }
  .status,.btn-line { border-color:var(--cream) }
}
@media (forced-colors:active) {
  .btn,.status,input,select,textarea { border:2px solid CanvasText }
  :focus-visible,.on-ink :focus-visible { outline:3px solid Highlight; box-shadow:none }
  .btn:active:not(:disabled) { background:Highlight; color:HighlightText; border-color:Highlight }
}