/*
Theme Name: TowYo 2.0
Theme URI: https://towyo.com
Description: Cutting-edge reskin of TowYo as a child theme of "towyo". New site-wide header, footer, and homepage with the trailer-builder design system. Inherits all existing templates and functions from the parent theme until they're redesigned one at a time.
Author: TowYo
Template: towyo
Version: 1.0.0
*/

:root{
  --ink:#0C1016; --steel:#141B24; --panel:#1B2430; --panel-2:#222D3B;
  --navy:#16315E; --navy-2:#2E5AA8; --tick:#3F6FC6;
  --paper:#ECEFF3; --card:#FFFFFF; --line:#E1E5EC; --line-2:#D0D6DF;
  --muted:#5B6573; --muted-2:#8A93A2; --muted-d:#9AA6B8;
  --torch:#E0231F; --torch-ink:#B11910; --go:#1F8A4C;
  --disp:"Saira Condensed",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,monospace; --r:14px;
}
body.towyo2{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.55}
.towyo2 *{box-sizing:border-box}
.tw2-wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.towyo2 a{color:inherit;text-decoration:none}
.tw2 h1,.tw2 h2,.tw2 h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:.98}
.tw2-eyebrow{font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--navy-2)}

/* utility + nav */
.tw2-util{background:var(--ink);color:#AEB6C4;font-size:12.5px}
.tw2-util .tw2-wrap{display:flex;gap:18px;align-items:center;height:38px}
.tw2-util a:hover{color:#fff}.tw2-util .r{margin-left:auto;display:flex;gap:18px;align-items:center}.tw2-util b{color:#fff}
.tw2-nav{position:sticky;top:0;z-index:40;background:rgba(12,16,22,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.tw2-nav .tw2-wrap{display:flex;align-items:center;gap:26px;height:64px}
.tw2-logo{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:.02em;display:flex;align-items:center;gap:9px;color:#fff}
.tw2-logo .dot{width:11px;height:11px;background:var(--torch);border-radius:2px;transform:translateY(1px)}
.tw2-links{display:flex;gap:22px;margin-left:8px;font:600 14px/1 var(--body);list-style:none;padding:0;margin-top:0;margin-bottom:0}
.tw2-links a{color:#C9D1DE}.tw2-links a:hover{color:#fff}
.tw2-navcta{margin-left:auto;display:flex;gap:10px;align-items:center}
.tw2-burger{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.tw2-btn{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-size:15px;font-weight:600;padding:11px 18px;border-radius:9px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.tw2-btn.red{background:var(--torch);color:#fff}.tw2-btn.red:hover{background:var(--torch-ink)}
.tw2-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25)}.tw2-btn.ghost:hover{border-color:#fff}
.tw2-btn.lg{padding:15px 24px;font-size:18px}
@media(max-width:880px){.tw2-links{display:none}.tw2-burger{display:block}
  .tw2-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--ink);padding:16px 22px;gap:14px}}

/* hero */
.tw2-hero{position:relative;background:radial-gradient(1100px 500px at 80% -10%,rgba(46,90,170,.30),transparent 60%),linear-gradient(180deg,#0C1016,#0F1722 60%,#12203a);color:#fff;overflow:hidden}
.tw2-hero .tw2-wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;padding:64px 22px 70px;align-items:center}
.tw2-hero h1{font-size:clamp(40px,6.4vw,80px);font-weight:800}.tw2-hero h1 .red{color:var(--torch)}
.tw2-hero .sub{color:#BCC8DD;font-size:17px;max-width:30em;margin:18px 0 0}
.tw2-specrow{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.tw2-spec{font-family:var(--mono);font-size:13px;color:#8FA1BC}.tw2-spec b{display:block;font-family:var(--disp);font-size:26px;color:#fff;line-height:1}
@media(max-width:920px){.tw2-hero .tw2-wrap{grid-template-columns:1fr;gap:28px}}
.tw2-bp{position:absolute;right:-40px;bottom:-30px;width:520px;max-width:55%;opacity:.20;pointer-events:none}
@media(max-width:920px){.tw2-bp{display:none}}

.tw2-bcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px;backdrop-filter:blur(4px)}
.tw2-bhead{display:flex;align-items:center;justify-content:space-between}
.tw2-bhead .t{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:17px}
.tw2-bhead .step{font-family:var(--mono);font-size:11px;color:var(--muted-d)}
.tw2-blabel{font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#7E8DA6;margin:16px 0 9px}
.tw2-opts{display:flex;flex-wrap:wrap;gap:8px}
.tw2-pill{font:500 13.5px/1 var(--body);color:#D6DEEC;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);padding:9px 13px;border-radius:999px;cursor:pointer;transition:.13s}
.tw2-pill:hover{border-color:var(--navy-2)}.tw2-pill.on{background:#fff;color:var(--ink);border-color:#fff;font-weight:600}
.tw2-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:480px){.tw2-sizes{grid-template-columns:repeat(3,1fr)}}
.tw2-size{display:block;font-family:var(--mono);font-size:14px;font-weight:600;color:#fff;text-decoration:none;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 6px;text-align:center;cursor:pointer;transition:.13s}
.tw2-size small{display:block;font:500 10px/1.4 var(--body);color:var(--muted-d);margin-top:3px;letter-spacing:.05em}
.tw2-size:hover{border-color:var(--torch);background:rgba(224,35,23,.14)}.tw2-size.on{border-color:var(--torch);background:rgba(224,35,23,.14)}
.tw2-size.wide{grid-column:1/-1;padding:13px;letter-spacing:.02em}
.tw2-bload{grid-column:1/-1;color:var(--muted-d);font:500 13px/1 var(--body);padding:8px 2px}
.tw2-bgo{margin-top:18px}.tw2-bgo .tw2-btn{width:100%;justify-content:center}
.tw2-bfoot{font-family:var(--mono);font-size:11px;color:var(--muted-d);margin-top:11px;text-align:center}

/* trust */
.tw2-trust{background:var(--ink);color:#9AA6B8;border-top:1px solid rgba(255,255,255,.06)}
.tw2-trust .tw2-wrap{display:flex;gap:34px;align-items:center;height:54px;font-family:var(--mono);font-size:12.5px;overflow-x:auto;white-space:nowrap}
.tw2-trust b{color:#fff;font-family:var(--disp);letter-spacing:.03em}

/* sections */
.tw2-sec{padding:78px 0}
.tw2-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.tw2-sechead h2{font-size:clamp(28px,4vw,44px);font-weight:700}.tw2-sechead p{color:var(--muted);margin:8px 0 0;max-width:36em}
.tw2-sechead .link{font:600 14px/1 var(--body);color:var(--navy-2);white-space:nowrap}

.tw2-brands{background:var(--card)}
.tw2-bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:900px){.tw2-bgrid{grid-template-columns:repeat(2,1fr)}}
.tw2-brand{border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px;transition:.14s;background:#fff}
.tw2-brand:hover{border-color:var(--navy-2);box-shadow:0 8px 26px rgba(20,40,80,.08);transform:translateY(-2px)}
.tw2-brand .nm{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:21px}
.tw2-brand .ds{font-size:13.5px;color:var(--muted);margin-top:5px}.tw2-brand .meta{font-family:var(--mono);font-size:11px;color:var(--navy-2);margin-top:12px}

.tw2-process{background:linear-gradient(180deg,#0F1722,#12203a);color:#fff}
.tw2-process .tw2-sechead h2{color:#fff}.tw2-process .tw2-sechead p{color:#AEBBD0}
.tw2-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:900px){.tw2-steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.tw2-steps{grid-template-columns:1fr}}
.tw2-step{border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:22px 20px;background:rgba(255,255,255,.03)}
.tw2-step .n{font-family:var(--mono);font-size:13px;color:var(--torch);font-weight:600}
.tw2-step h3{font-size:21px;margin:12px 0 8px;color:#fff;font-weight:600}.tw2-step p{font-size:14px;color:#B7C2D6;margin:0}

.tw2-buildgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:980px){.tw2-buildgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.tw2-buildgrid{grid-template-columns:1fr}}
.tw2-build{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.14s}.tw2-build:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,40,80,.10)}
.tw2-build .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#1B2430,#16315E);position:relative;display:grid;place-items:center}
.tw2-build .ph .tag{position:absolute;top:12px;left:12px;font:600 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--torch);padding:5px 8px;border-radius:5px}
.tw2-build .ph .px{font-family:var(--disp);color:rgba(255,255,255,.28);font-size:40px;font-weight:800}
.tw2-build .bd{padding:16px 17px 18px}.tw2-build h3{font-size:19px;font-weight:600}.tw2-build .ds{font-size:13px;color:var(--muted);margin-top:5px}.tw2-build .pr{font-family:var(--mono);font-size:14px;color:var(--navy-2);margin-top:11px;font-weight:600}

.tw2-types{background:var(--card)}
.tw2-typegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:900px){.tw2-typegrid{grid-template-columns:repeat(2,1fr)}}
.tw2-type{border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;cursor:pointer;transition:.14s;background:#fff;display:flex;flex-direction:column;gap:6px}
.tw2-type:hover{border-color:var(--torch);transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,40,80,.08)}
.tw2-type .nm{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:19px}.tw2-type .ds{font-size:12.5px;color:var(--muted)}.tw2-type .go{font-family:var(--mono);font-size:11px;color:var(--navy-2);margin-top:4px}

.tw2-finance{background:linear-gradient(180deg,#12203a,#0F1722);color:#fff}.tw2-finance .tw2-sechead h2{color:#fff}.tw2-finance .tw2-sechead p{color:#AEBBD0}
.tw2-fingrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:900px){.tw2-fingrid{grid-template-columns:1fr 1fr}}
.tw2-fin{border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:20px;background:rgba(255,255,255,.03)}.tw2-fin h3{font-size:18px;color:#fff;font-weight:600}.tw2-fin p{font-size:13px;color:#B7C2D6;margin:7px 0 0}

.tw2-locgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:900px){.tw2-locgrid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.tw2-locgrid{grid-template-columns:1fr}}
.tw2-loc{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#fff}.tw2-loc .nm{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:18px}
.tw2-loc .ad{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}.tw2-loc .ph{font-family:var(--mono);font-size:13px;color:var(--navy-2);margin-top:10px;font-weight:600}
.tw2-loc .hr{font:600 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:8px}

.tw2-bigcta{background:var(--torch);color:#fff;text-align:center;padding:74px 0}
.tw2-bigcta h2{font-size:clamp(32px,5vw,56px);font-weight:800;color:#fff}.tw2-bigcta p{color:rgba(255,255,255,.85);margin:12px 0 26px;font-size:17px}
.tw2-bigcta .tw2-btn.white{background:#fff;color:var(--torch-ink)}.tw2-bigcta .tw2-btn.line{background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff}

/* generic page wrapper (so inner pages get new chrome) */
.tw2-page{padding:54px 0 70px;min-height:50vh}
.tw2-page h1.tw2-title{font-size:clamp(30px,4.5vw,48px);font-weight:700;color:var(--ink);margin-bottom:24px}
.tw2-page-body{max-width:820px;font-size:16px}
.tw2-page-body h2{font-family:var(--disp);text-transform:uppercase;color:var(--navy);margin:28px 0 10px}
.tw2-page-body a{color:var(--navy-2);text-decoration:underline}
.tw2-builderwrap{padding:30px 0 70px}

/* footer */
.tw2-footer{background:var(--ink);color:#9AA6B8;padding:54px 0 30px;font-size:14px}
.tw2-fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}@media(max-width:820px){.tw2-fcols{grid-template-columns:1fr 1fr}}
.tw2-footer h4{font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.tw2-footer a{display:block;color:#9AA6B8;padding:5px 0}.tw2-footer a:hover{color:#fff}
.tw2-footer .blurb{color:#7E8A9B;max-width:24em;margin-top:12px;font-size:13px}
.tw2-fbot{border-top:1px solid rgba(255,255,255,.08);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:#6F7B8C}

.towyo2 :focus-visible{outline:2px solid var(--navy-2);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.towyo2 *{transition:none!important}}
