/* ==========================================================================
   Trunion Gates — demo site
   Brand tokens live in :root. Swap the five --brand-* values to recolour
   the entire site from the logo palette.
   ========================================================================== */

:root{
  /* --- BRAND (placeholder — replace with Trunion Gates logo colours) ------ */
  --brand-deep:   #06121e;   /* darkest — page/footer ground        */
  --brand-navy:   #0a2033;   /* primary dark surface                */
  --brand-mid:    #14405c;   /* mid tone, gradients, hovers         */
  --brand-accent: #00a9ce;   /* accent — arrows, rules, highlights  */
  --brand-light:  #f4f2ee;   /* light surface / paper               */

  --ink:        #0b1a26;
  --ink-soft:   #4a5c69;
  --line:       rgba(11,26,38,.14);
  --line-dark:  rgba(255,255,255,.14);
  --paper:      #ffffff;

  --max: 1360px;
  --gut: clamp(20px, 5vw, 72px);

  --sans: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.025em; line-height:1.02}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
.wrap-wide{max-width:1680px; margin:0 auto; padding-inline:var(--gut)}

/* ------------------------------------------------------------- typography */
.d1{font-size:clamp(44px,7.6vw,104px); letter-spacing:-.04em; font-weight:400}
.d2{font-size:clamp(32px,4.6vw,64px); letter-spacing:-.035em; font-weight:400}
.d3{font-size:clamp(24px,2.6vw,38px); letter-spacing:-.028em; font-weight:400}
.d4{font-size:clamp(19px,1.6vw,24px); letter-spacing:-.02em; font-weight:500}
.lead{font-size:clamp(18px,1.55vw,23px); line-height:1.5; color:var(--ink-soft); letter-spacing:-.01em}
.eyebrow{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--brand-accent); margin:0 0 22px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brand-accent); flex:none}
.muted{color:var(--ink-soft)}

/* ------------------------------------------------------------------ links */
.arrow-link{
  display:inline-flex; align-items:center; gap:12px; font-size:15px;
  font-weight:500; letter-spacing:.01em; padding:6px 0;
  border-bottom:1px solid var(--line); transition:gap .35s var(--ease), border-color .35s;
}
.arrow-link svg{flex:none; transition:transform .35s var(--ease)}
.arrow-link:hover{gap:18px; border-color:var(--brand-accent)}
.arrow-link:hover svg{transform:translateX(4px)}
.on-dark .arrow-link,.dark .arrow-link{border-color:var(--line-dark)}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; border-radius:2px; font-size:14.5px; font-weight:500;
  letter-spacing:.02em; background:var(--brand-accent); color:#04141c;
  transition:transform .3s var(--ease), background .3s;
}
.btn:hover{transform:translateY(-2px); background:#28c0e0}
.btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}

/* ----------------------------------------------------------------- header */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s, height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr .wrap-wide{display:flex; align-items:center; gap:40px; width:100%}
.hdr.solid,.hdr.open{background:var(--brand-deep); border-bottom-color:rgba(255,255,255,.1)}
.hdr.scrolled{height:64px}

.logo{display:flex; align-items:center; gap:12px; flex:none}
.logo svg{height:30px; width:auto}
.logo-txt{display:flex; flex-direction:column; line-height:1}
.logo-txt b{font-size:19px; font-weight:600; letter-spacing:.16em; color:#fff}
.logo-txt span{font-size:8.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--brand-accent); margin-top:5px}

.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav > a,.nav > button{
  position:relative; padding:10px 16px; font-size:14.5px; color:rgba(255,255,255,.86);
  letter-spacing:.005em; transition:color .25s;
}
.nav > a::after,.nav > button::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:1px;
  background:var(--brand-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav > a:hover::after,.nav > button:hover::after,.nav > a.active::after,.nav .has-panel[aria-expanded="true"]::after{transform:scaleX(1)}
.nav > a:hover,.nav > button:hover{color:#fff}
.nav .cta{margin-left:16px; padding:11px 24px; border:1px solid rgba(255,255,255,.3); border-radius:2px}
.nav .cta::after{display:none}
.nav .cta:hover{background:#fff; color:var(--brand-deep)}

.burger{display:none; margin-left:auto; width:44px; height:44px; position:relative}
.burger i{position:absolute; left:11px; right:11px; height:1.5px; background:#fff; transition:.35s var(--ease)}
.burger i:nth-child(1){top:17px} .burger i:nth-child(2){top:23px} .burger i:nth-child(3){top:29px}
.hdr.open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.open .burger i:nth-child(2){opacity:0}
.hdr.open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mega panel */
.panel{
  position:fixed; left:0; right:0; top:var(--header-h); z-index:110;
  background:var(--brand-deep); color:#fff; border-bottom:1px solid rgba(255,255,255,.1);
  display:none; padding:48px 0 56px;
}
.panel.show{display:block; animation:panelIn .4s var(--ease)}
@keyframes panelIn{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
.panel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px}
.panel-grid a{
  padding:26px 26px 30px; background:rgba(255,255,255,.03);
  display:flex; flex-direction:column; gap:8px; min-height:150px;
  transition:background .3s var(--ease);
}
.panel-grid a:hover{background:rgba(0,169,206,.14)}
.panel-grid b{font-size:17px; font-weight:500; letter-spacing:-.01em}
.panel-grid span{font-size:14px; color:rgba(255,255,255,.6); line-height:1.45}
.panel-grid .go{margin-top:auto; color:var(--brand-accent); font-size:13px; letter-spacing:.06em}

/* --------------------------------------------------------------- sections */
section{position:relative}
.pad{padding-block:clamp(72px,10vw,150px)}
.pad-s{padding-block:clamp(52px,6vw,92px)}
.dark{background:var(--brand-navy); color:#fff}
.dark .lead,.dark .muted{color:rgba(255,255,255,.66)}
.deep{background:var(--brand-deep); color:#fff}
.deep .lead,.deep .muted{color:rgba(255,255,255,.62)}
.paperbg{background:var(--brand-light)}

.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,96px); align-items:start}
.split.tight{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative; min-height:clamp(600px,94vh,1000px);
  display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  background:var(--brand-deep);
}
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:slowzoom 22s var(--ease) forwards}
@keyframes slowzoom{to{transform:scale(1)}}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,18,30,.72) 0%,rgba(6,18,30,.18) 34%,rgba(6,18,30,.72) 78%,rgba(6,18,30,.95) 100%);
}
.hero-in{position:relative; width:100%; padding-block:clamp(60px,9vw,120px)}
.hero h1{max-width:15ch}
.hero .lead{max-width:52ch; margin-top:28px; color:rgba(255,255,255,.82)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}

/* rotating word */
.rot{display:inline-grid; vertical-align:bottom}
.rot span{
  grid-area:1/1; opacity:0; transform:translateY(.35em);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  color:var(--brand-accent); white-space:nowrap;
}
.rot span.on{opacity:1; transform:none}

.hero-jump{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero-jump .wrap-wide{display:flex; flex-wrap:wrap}
.hero-jump a{
  flex:1 1 0; min-width:170px; padding:22px 4px; font-size:14px; color:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-right:1px solid rgba(255,255,255,.12); transition:color .3s, background .3s;
}
.hero-jump a:first-child{padding-left:0}
.hero-jump a:last-child{border-right:0}
.hero-jump a:hover{color:#fff; background:rgba(255,255,255,.05)}

/* page banner (inner pages) */
.banner{
  position:relative; min-height:clamp(380px,58vh,620px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--brand-deep);
}
.banner img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,18,30,.78),rgba(6,18,30,.3) 45%,rgba(6,18,30,.92));
}
.banner .wrap{position:relative; z-index:2; padding-block:clamp(48px,7vw,88px); width:100%}
.crumb{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:18px}
.crumb a:hover{color:#fff}

/* ------------------------------------------------------------------ cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,26px)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative; display:flex; flex-direction:column; min-height:400px;
  overflow:hidden; background:var(--brand-navy); color:#fff; isolation:isolate;
}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform 1s var(--ease)}
.card::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,18,30,.25),rgba(6,18,30,.9)); transition:background .5s}
.card:hover img{transform:scale(1.07)}
.card:hover::after{background:linear-gradient(180deg,rgba(6,18,30,.35),rgba(10,32,51,.92))}
.card-in{margin-top:auto; padding:30px}
.card h3{margin-bottom:12px}
.card p{font-size:15px; color:rgba(255,255,255,.72); line-height:1.5; margin-bottom:20px}
.card .go{font-size:13.5px; color:var(--brand-accent); display:inline-flex; align-items:center; gap:10px;
  transition:gap .35s var(--ease)}
.card:hover .go{gap:16px}

.tile{
  padding:34px 30px 38px; background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; transition:border-color .35s, transform .35s var(--ease);
}
.tile:hover{border-color:var(--brand-accent); transform:translateY(-3px)}
.tile .num{font-size:12px; letter-spacing:.2em; color:var(--brand-accent); font-weight:600}
.tile p{font-size:15px; color:var(--ink-soft)}
.dark .tile,.deep .tile{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.dark .tile p,.deep .tile p{color:rgba(255,255,255,.66)}

/* feature row (image + text alternating) */
.feature{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.feature .fig{position:relative; aspect-ratio:4/3; overflow:hidden}
.feature .fig img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.feature:hover .fig img{transform:scale(1.05)}
.feature.rev .fig{order:2}
.feature + .feature{margin-top:clamp(60px,8vw,120px)}

/* ------------------------------------------------------------------ stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dark)}
.stats > div{padding:40px 26px 44px; border-right:1px solid var(--line-dark)}
.stats > div:last-child{border-right:0}
.stats .k{font-size:clamp(30px,3.6vw,52px); letter-spacing:-.035em; line-height:1; margin-bottom:14px}
.stats .l{font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.6)}

/* ------------------------------------------------------------------ table */
.tbl{width:100%; border-collapse:collapse; font-size:15px}
.tbl th{
  text-align:left; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--brand-accent); padding:0 18px 16px; border-bottom:1px solid var(--line);
}
.tbl td{padding:20px 18px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:hover td{background:rgba(0,169,206,.05)}
.tbl td:first-child,.tbl th:first-child{padding-left:0}
.tbl .name{font-weight:500}
.tbl .sub{display:block; font-size:13.5px; color:var(--ink-soft); margin-top:4px}
.pill{
  display:inline-block; padding:5px 12px; border-radius:100px; font-size:12px;
  letter-spacing:.04em; background:rgba(0,169,206,.12); color:#0d6c85;
}

/* ------------------------------------------------------------------- news */
.news{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border-top:1px solid var(--line-dark)}
.news a{
  padding:34px 28px 40px; background:rgba(255,255,255,.03); display:flex; flex-direction:column;
  min-height:290px; transition:background .35s var(--ease);
}
.news a:hover{background:rgba(0,169,206,.12)}
.news .tag{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-accent)}
.news h4{margin:20px 0 auto; font-size:19px; font-weight:400; letter-spacing:-.02em; line-height:1.3}
.news .date{font-size:13px; color:rgba(255,255,255,.5); margin-top:24px}

/* ---------------------------------------------------------------- quote/cta */
.cta-band{position:relative; overflow:hidden; color:#fff}
.cta-band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cta-band::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,18,30,.94),rgba(6,18,30,.55))}
.cta-band .wrap{position:relative; z-index:2}

/* ------------------------------------------------------------------- form */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit; font-size:16px; padding:14px 16px; border:1px solid var(--line);
  background:#fff; border-radius:2px; color:var(--ink); transition:border-color .3s;
}
.field textarea{min-height:150px; resize:vertical}
.field :is(input,select,textarea):focus{outline:0; border-color:var(--brand-accent)}

/* ----------------------------------------------------------------- footer */
.ftr{background:var(--brand-deep); color:#fff; padding-block:clamp(56px,7vw,90px) 0}
.ftr-top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.ftr h5{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-accent);
  margin:0 0 20px; font-weight:600}
.ftr ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.ftr li a{font-size:15px; color:rgba(255,255,255,.72); transition:color .25s}
.ftr li a:hover{color:#fff}
.ftr .emergency{
  margin-top:26px; padding:18px 20px; border:1px solid rgba(255,255,255,.16); border-left:2px solid var(--brand-accent);
  font-size:14px; color:rgba(255,255,255,.78); max-width:340px;
}
.ftr .emergency b{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand-accent); margin-bottom:6px}
.ftr-bot{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; padding:26px 0 34px;
  font-size:13px; color:rgba(255,255,255,.5)}
.ftr-bot nav{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
.ftr-bot a:hover{color:#fff}
.demo-note{
  margin-top:8px; padding:12px 16px; font-size:12.5px; letter-spacing:.02em;
  background:rgba(255,196,0,.08); border:1px solid rgba(255,196,0,.28); color:#f5d98a;
}

/* --------------------------------------------------------------- reveals */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.dly1{transition-delay:.09s} .rv.dly2{transition-delay:.18s} .rv.dly3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none} .hero-bg img{animation:none}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------- responsive */
.callout{
  padding:18px 20px; border:1px solid var(--line); border-left:2px solid var(--brand-accent);
  font-size:15px; max-width:340px;
}
.callout b{
  display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand-accent); margin-bottom:6px; font-weight:600;
}

.stats.compact > div .k{font-size:clamp(19px,1.8vw,26px)}
.stats.light{border-top-color:var(--line)}
.stats.light > div{border-right-color:var(--line); border-bottom-color:var(--line)}
.stats.light .k{color:var(--ink)}
.stats.light .l{color:var(--ink-soft)}

@media (max-width:1080px){
  .cards,.cards.four{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2n){border-right:0}
  .stats div{border-bottom:1px solid var(--line-dark)}
  .panel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{
    position:fixed; inset:var(--header-h) 0 0 0; background:var(--brand-deep);
    flex-direction:column; align-items:stretch; gap:0; padding:20px var(--gut) 60px;
    overflow-y:auto; transform:translateX(100%); transition:transform .45s var(--ease);
    margin-left:0;
  }
  .hdr.open .nav{transform:none}
  .nav > a,.nav > button{
    padding:20px 0; font-size:20px; text-align:left; border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav > a::after,.nav > button::after{display:none}
  .nav .cta{margin:24px 0 0; text-align:center; justify-content:center; display:block; padding:16px}
  .panel{display:none !important}
  .split,.split.tight,.feature{grid-template-columns:1fr}
  .feature.rev .fig{order:0}
  .ftr-top{grid-template-columns:repeat(2,1fr)}
  .form{grid-template-columns:1fr}
}
@media (max-width:620px){
  .cards,.cards.two,.cards.four,.news{grid-template-columns:1fr}
  .panel-grid{grid-template-columns:1fr}
  .hero{flex-direction:column; justify-content:flex-end}
  .hero-in{margin-top:auto}
  .hero-jump{position:static; width:100%; border-top-color:rgba(255,255,255,.16)}
  .hero-jump a{flex:1 1 100%; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); padding:18px 0}
  .ftr-top{grid-template-columns:1fr}
  .tbl thead{display:none}
  .tbl td{display:block; padding:6px 0; border:0}
  .tbl tr{display:block; padding:22px 0; border-bottom:1px solid var(--line)}
}