/* ==========================================================================
   BRAND TOKENS — Gate Tech Pros
   Navy and blue sampled directly from the logo artwork.
   The two derived blues exist because the logo's bright blue fails WCAG
   contrast as small text on white (3.34:1). Large graphic use = logo blue;
   text and buttons = the contrast-checked derivatives. All values verified.
   ========================================================================== */
:root{
  /* --- exact logo values --- */
  --brand-navy:#103E84;      /* logo navy  — "GATE TECH", upper mark        */
  --brand-blue:#0693E3;      /* logo blue  — "PROS", lower mark             */

  /* --- derived, contrast-checked against white --- */
  --brand-cta:#0A73BF;       /* button fill, white label      4.98:1  AA    */
  --brand-cta-dk:#103E84;    /* button hover -> logo navy    10.27:1  AAA   */
  --brand-link:#0B68B4;      /* small text + links on light   5.75:1  AA    */
  --brand-ink:#0A1526;       /* darkest surface, navy-tinted                */
}

/* ---- derived system palette (leave alone) ---- */
:root{
  --ink:var(--brand-ink);
  --graphite:#111E33;
  --steel:#23344C;
  --steel-2:#33475F;
  --zinc:#93A2B5;
  --zinc-2:#C0CAD7;
  --mill:#E9EDF3;
  --paper:#FFFFFF;
  --caution:var(--brand-link);      /* accent in LIGHT contexts  */
  --caution-dk:var(--brand-cta-dk);
  --weld:var(--brand-blue);         /* accent in DARK contexts   */
  --ok:#2E7D5B;

  --shell:min(1240px,92vw);
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sect:clamp(3.5rem,8vw,7rem);

  --f-disp:"Saira Condensed",Impact,"Haettenschweiler",sans-serif;
  --f-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --r:2px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--graphite);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--f-disp);
  font-weight:700;
  line-height:.98;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.6rem,1.6rem + 4.4vw,5.4rem);font-weight:800;letter-spacing:-.005em}
h2{font-size:clamp(1.9rem,1.35rem + 2.4vw,3.4rem)}
h3{font-size:clamp(1.3rem,1.1rem + .85vw,1.85rem)}
h4{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);letter-spacing:.02em}
p{margin:0 0 1.15em;max-width:74ch}
strong{font-weight:600;color:var(--ink)}

/* the shop-drawing dimension label */
.spec{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--caution);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.1rem;
}
.spec::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--zinc-2),transparent);
}
.spec--q::after{display:none}
.on-dark .spec{color:var(--weld)}
.on-dark .spec::after{background:linear-gradient(90deg,var(--steel-2),transparent)}

.lede{
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  line-height:1.55;
  color:var(--steel);
  max-width:62ch;
}

/* ---------- layout ---------- */
.shell{width:var(--shell);margin-inline:auto}
.sect{padding-block:var(--sect)}
.sect--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.dark{background:var(--ink);color:var(--zinc-2)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--paper)}
.dark p{color:var(--zinc-2)}
.mill{background:var(--mill)}

.split{display:grid;gap:clamp(2rem,5vw,4.5rem)}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;align-items:start}
  .split--rail{grid-template-columns:minmax(0,1fr) 20rem}
  .split--wide{grid-template-columns:1.35fr 1fr}
}

.grid{display:grid;gap:1.25rem}
@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- skip + focus ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--caution);color:#fff;padding:.75rem 1.25rem;
  font-family:var(--f-mono);font-size:.8rem;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--caution);outline-offset:3px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(14,18,22,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--steel);
}
.hdr__bar{
  display:flex;align-items:center;gap:1.5rem;
  min-height:4.25rem;
}
.brand{
  font-family:var(--f-disp);font-weight:800;font-size:1.35rem;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;
  text-decoration:none;line-height:1;
  display:flex;align-items:center;gap:.7rem;
}
.brand__mark{width:2.4rem;height:2.4rem;flex:0 0 auto}
.brand__txt{display:flex;flex-direction:column}
.brand__pro{color:var(--brand-blue);font-weight:inherit}
.brand small{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.22em;
  color:var(--zinc);font-weight:400;margin-top:.3rem;
}
.nav{margin-left:auto;display:none}
@media(min-width:1000px){.nav{display:flex;align-items:center;gap:1.75rem}}
.nav a{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--zinc-2);text-decoration:none;
  padding-block:.4rem;border-bottom:2px solid transparent;transition:.18s;
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-color:var(--caution)}
.hdr__call{
  margin-left:auto;display:flex;align-items:center;gap:.6rem;
  background:var(--brand-cta);color:#fff;text-decoration:none;
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.02em;
  padding:.6rem 1.15rem;border-radius:var(--r);transition:.18s;
  white-space:nowrap;
}
@media(min-width:1000px){.hdr__call{margin-left:0}}
.hdr__call:hover{background:var(--brand-cta-dk)}
.burger{
  background:none;border:1px solid var(--steel-2);color:#fff;
  width:2.75rem;height:2.5rem;border-radius:var(--r);cursor:pointer;
  display:grid;place-items:center;
}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:18px;height:2px;background:#fff;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
.mnav{display:none;border-top:1px solid var(--steel);padding-block:1rem 1.5rem}
.mnav[data-open]{display:block}
@media(min-width:1000px){.mnav{display:none!important}}
.mnav a{
  display:block;padding:.65rem 0;color:var(--zinc-2);text-decoration:none;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;border-bottom:1px solid var(--graphite);
}
.mnav a:hover{color:var(--caution)}

/* ---------- SIGNATURE: the hero opens like a gate ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding-block:clamp(4rem,10vw,8.5rem);
  isolation:isolate;
}
.hero::before{
  /* galvanized spangle wash */
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60rem 40rem at 78% 12%,color-mix(in srgb, var(--brand-blue) 20%, transparent),transparent 62%),
    radial-gradient(48rem 30rem at 8% 88%,color-mix(in srgb, var(--brand-navy) 38%, transparent),transparent 60%),
    linear-gradient(160deg,var(--brand-ink),#152340 58%,var(--brand-ink));
}
.hero::after{
  /* drawing grid */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    linear-gradient(rgba(147,162,181,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(147,162,181,.085) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.hero__in{position:relative;z-index:2}
.hero h1{color:#fff;max-width:16ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--caution);display:block}
.hero .lede{color:var(--zinc-2);margin-top:1.5rem}

/* the two gate leaves */
.leaf{
  position:absolute;top:0;bottom:0;width:50%;z-index:3;
  background:
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(16,62,132,.55) 22px 25px),
    linear-gradient(180deg,var(--steel),#0C1729);
  border-inline:2px solid var(--steel-2);
  pointer-events:none;
}
.leaf--l{left:0;transform-origin:left center}
.leaf--r{right:0;transform-origin:right center}
@media(prefers-reduced-motion:no-preference){
  .leaf--l{animation:swingL 1.35s var(--ease) .15s both}
  .leaf--r{animation:swingR 1.35s var(--ease) .15s both}
}
@media(prefers-reduced-motion:reduce){.leaf{display:none}}
@keyframes swingL{
  0%{transform:perspective(1400px) rotateY(0);opacity:1}
  100%{transform:perspective(1400px) rotateY(-96deg);opacity:0;visibility:hidden}
}
@keyframes swingR{
  0%{transform:perspective(1400px) rotateY(0);opacity:1}
  100%{transform:perspective(1400px) rotateY(96deg);opacity:0;visibility:hidden}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.02em;text-decoration:none;
  padding:.85rem 1.6rem;border-radius:var(--r);border:2px solid transparent;
  transition:.18s var(--ease);cursor:pointer;
}
.btn--pri{background:var(--brand-cta);color:#fff}
.btn--pri:hover{background:var(--brand-cta-dk);transform:translateY(-2px)}
.btn--ghost{border-color:var(--zinc);color:var(--paper)}
.btn--ghost:hover{border-color:var(--caution);color:var(--caution)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--steel)}
.btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* ---------- cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--zinc-2);
  border-top:3px solid var(--ink);
  padding:1.6rem 1.5rem 1.75rem;
  border-radius:var(--r);
  transition:.2s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{border-top-color:var(--caution);transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(14,18,22,.45)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem;margin-bottom:1rem}
.card__spec{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);
  margin-top:auto;padding-top:.9rem;border-top:1px dashed var(--zinc-2);
}
.card a.more{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--caution);text-decoration:none;font-weight:500;
}
.card a.more:hover{text-decoration:underline}
.dark .card{background:var(--graphite);border-color:var(--steel);border-top-color:var(--caution)}
.dark .card p{color:var(--zinc-2)}
.dark .card__spec{color:var(--zinc);border-top-color:var(--steel)}

/* ---------- callout / caution strip ---------- */
.caution-strip{
  background:repeating-linear-gradient(45deg,var(--brand-blue) 0 14px,var(--brand-navy) 14px 28px);
  height:6px;
}
.note{
  border-left:4px solid var(--caution);
  background:var(--mill);
  padding:1.25rem 1.4rem;
  border-radius:0 var(--r) var(--r) 0;
  margin-block:1.75rem;
}
.note p:last-child{margin-bottom:0}
.note h4{margin-bottom:.4rem}

/* ---------- spec table (shop drawing schedule) ---------- */
.schedule{width:100%;border-collapse:collapse;font-size:.9rem;margin-block:1.5rem}
.schedule caption{
  text-align:left;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--caution);padding-bottom:.7rem;
}
.schedule th,.schedule td{
  text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--zinc-2);vertical-align:top;
}
.schedule thead th{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--steel);border-bottom:2px solid var(--ink);font-weight:500;
}
.schedule tbody th{font-weight:600;color:var(--ink);font-family:var(--f-body)}

/* ---------- FAQ ---------- */
.faq details{
  border-bottom:1px solid var(--zinc-2);padding:1.1rem 0;
}
.faq summary{
  cursor:pointer;list-style:none;font-family:var(--f-disp);
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem);text-transform:uppercase;
  color:var(--ink);display:flex;gap:1rem;align-items:flex-start;line-height:1.15;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";color:var(--caution);font-family:var(--f-mono);font-weight:500;
  flex:0 0 auto;transition:.2s;
}
.faq details[open] summary::before{content:"–"}
.faq details p{margin-top:.9rem;font-size:.97rem}
.dark .faq summary{color:var(--paper)}
.dark .faq summary::before{color:var(--brand-blue)}
.dark .faq details{border-bottom-color:var(--steel)}
.dark .card a.more,.dark .more{color:var(--brand-blue)}

/* ---------- area list ---------- */
.areas{display:grid;gap:.5rem;padding:0;margin:0;list-style:none}
@media(min-width:700px){.areas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.areas{grid-template-columns:repeat(3,1fr)}}
.areas a{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem 1rem;background:var(--paper);border:1px solid var(--zinc-2);
  text-decoration:none;border-radius:var(--r);transition:.16s;
}
.areas a:hover{border-color:var(--caution);background:#fff}
.areas .nm{font-family:var(--f-disp);font-size:1.15rem;text-transform:uppercase;color:var(--ink)}
.areas .mi{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--caution)}

/* ---------- breadcrumb ---------- */
.crumb{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--zinc);padding-block:1.1rem;
}
.crumb a{color:var(--zinc);text-decoration:none}
.crumb a:hover{color:var(--caution)}
.crumb span{color:var(--zinc-2);margin-inline:.4rem}
.dark .crumb,.dark .crumb a{color:var(--zinc)}

/* ---------- CTA band ---------- */
.band{
  background:var(--ink);color:#fff;
  padding-block:clamp(3rem,6vw,4.5rem);
  position:relative;overflow:hidden;
}
.band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(50rem 26rem at 88% 30%,color-mix(in srgb, var(--brand-blue) 24%, transparent),transparent 65%);
}
.band__in{position:relative;display:grid;gap:1.75rem;align-items:center}
@media(min-width:900px){.band__in{grid-template-columns:1.4fr auto}}
.band h2{color:#fff;margin-bottom:.4rem}
.band p{color:var(--zinc-2);margin:0}

/* ---------- SIGNATURE: drawing title block footer ---------- */
.ftr{background:var(--graphite);color:var(--zinc-2);padding-top:clamp(3rem,6vw,4.5rem)}
.ftr a{color:var(--zinc-2);text-decoration:none}
.ftr a:hover{color:var(--caution)}
.ftr h4{color:#fff;font-size:.95rem;letter-spacing:.12em;margin-bottom:1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem}
.ftr__cols{display:grid;gap:2.5rem}
@media(min-width:760px){.ftr__cols{grid-template-columns:1.3fr 1fr 1fr 1.2fr}}

.titleblock{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border-top:2px solid var(--steel-2);
  display:grid;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;
}
@media(min-width:760px){.titleblock{grid-template-columns:repeat(4,1fr)}}
.titleblock div{
  padding:.85rem 1rem;border-bottom:1px solid var(--steel);
}
@media(min-width:760px){
  .titleblock div{border-right:1px solid var(--steel)}
  .titleblock div:last-child{border-right:0}
}
.titleblock dt{color:var(--zinc);margin:0 0 .3rem;font-size:.6rem}
.titleblock dd{margin:0;color:#fff}
.ftr__legal{
  padding-block:1.25rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--zinc);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem}
.field label{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.4rem;
}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .9rem;font:inherit;font-size:.95rem;
  border:1px solid var(--zinc);border-radius:var(--r);background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--caution);outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-blue) 26%, transparent)}
@media(min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
.form__status{margin:.25rem 0 0;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;color:var(--steel);min-height:1.2em}
.form__status[data-kind="error"]{color:#B3261E}

/* ---------- misc ---------- */
.stack>*+*{margin-top:1.1rem}
.mono{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em}
.eyebrow-num{font-family:var(--f-mono);color:var(--caution);font-size:.7rem;letter-spacing:.14em}
hr.rule{border:0;border-top:1px solid var(--zinc-2);margin-block:2.5rem}
.dark hr.rule{border-top-color:var(--steel)}
ul.checks{list-style:none;padding:0;margin:0 0 1.25em;display:grid;gap:.6rem}
ul.checks li{padding-left:1.6rem;position:relative;font-size:.97rem}
ul.checks li::before{
  content:"";position:absolute;left:0;top:.55em;width:.7rem;height:2px;background:var(--caution);
}


/* ==========================================================================
   BRIGHTER PALETTE v2
   Dark surfaces move from near-black to a bright brand navy; the dark-context
   accent moves to a lighter tint of the logo blue so contrast holds.
   All pairs verified at or above 4.5:1.
   ========================================================================== */
:root{
  --brand-ink:#143A7A;   /* bright brand navy  (was near-black #0A1526) */
  --graphite:#1B2A45;    /* body text on light                          */
  --steel:#2E5DA8;
  --steel-2:#4478C4;
  --zinc:#9DB6DA;
  --zinc-2:#C5D8F0;
  --mill:#F4F8FC;        /* light band         (was #E9EDF3)            */
  --weld:#7ACCF7;        /* accent on dark - lighter tint of logo blue  */
}

/* surfaces that carried a hardcoded or dual-purpose colour */
.hdr{background:rgba(20,58,122,.95)}
.ftr{background:#123468}
.dark .card{background:#1B4489;border-color:#2E5DA8}
.mnav a{border-bottom-color:#2E5DA8}

/* the logo blue is too dark against the new navy - use the lighter tint */
.dark .spec,.hero .spec,.band .spec{color:var(--weld)}
.dark .card a.more,.dark .more{color:var(--weld)}
.dark .faq summary::before{color:var(--weld)}

/* softer hairlines on the light side */
.card,.areas a,.field input,.field select,.field textarea{border-color:#D6E3F4}
.schedule th,.schedule td,.faq details{border-bottom-color:#D6E3F4}
hr.rule{border-top-color:#D6E3F4}


/* footer: sister brands */
.ftr__brands{display:grid;gap:.45rem;margin-top:1.15rem;font-size:.86rem}
.ftr__brands span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zinc)}