/* ==========================================================================
   GRM Engineering Ltd — "The Spool"
   --------------------------------------------------------------------------
   One spool, drawn in isometric, annotated with dimensions and a parts list.
   The page is the fabrication sheet it belongs to: hairline rules, sheet
   headers, mono figures, sections alternating white -> ink -> safety yellow.

   GROUND: solid #ffffff. No bone, no cream, no warm off-white anywhere.
   base.css owns the reset, shell, header/nav mechanics, buttons, footer
   skeleton, reveals, preloader shell and the hero headline contract.
   ========================================================================== */

:root{
  /* ---------- the palette, from the brief ---------- */
  --ink:      #15181a;
  --ink-2:    #1b1f22;
  --ink-3:    #212629;
  --white:    #ffffff;
  --yellow:   #f2c300;
  --steel:    #6b7075;
  --blue:     #2c5a7c;
  --panel:    #f4f4f2;
  --line-d:   rgba(21,24,26,.14);
  --line:     rgba(244,244,242,.16);

  /* ---------- base.css contract ---------- */
  --surface:    #ffffff;
  --surface-2:  #f4f4f2;
  --text:       #f4f4f2;
  --muted:      rgba(244,244,242,.56);
  --ink-text:   #15181a;
  --ink-mute:   #5d6367;
  --accent:     #2c5a7c;
  --accent-lit: #9dc0d8;
  --accent-2:   #f2c300;

  /* ---------- type ---------- */
  --font-display: "Encode Sans Condensed", "Arial Narrow", sans-serif;
  --font-body:    "K2D", system-ui, -apple-system, sans-serif;
  --font-mono:    "Nanum Gothic Coding", ui-monospace, "SFMono-Regular", monospace;

  --wrap-max: 1260px;
  --pad:      clamp(1.15rem, 4vw, 2.6rem);
  --radius:   0px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:84px; }
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.66;
}
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.skip{
  position:absolute; left:.5rem; top:.5rem; z-index:10000;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  padding:.7rem 1rem; background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

.mono{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }

/* ==========================================================================
   PRELOADER — the flange face, never the client's logo
   ========================================================================== */
.pre{ background:var(--ink); }
.pre__mark{ width:84px; height:84px; }
.pre__mark svg{ width:100%; height:100%; display:block; }
.pre__ring,.pre__bore{ stroke:rgba(244,244,242,.8); stroke-width:1.5; }
.pre__bolts circle{ fill:var(--yellow); }
.pre__bolts{ transform-origin:60px 60px; animation:flangeSpin 3.6s linear infinite; }
.pre__tick{ stroke:var(--blue); stroke-width:2.2; }
@keyframes flangeSpin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   HEADER — white sheet header, ink type, yellow call block
   ========================================================================== */
.hdr{ background:var(--white); border-bottom:1px solid var(--line-d); }
@media (min-width:1024px){
  .hdr{
    background:color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter:blur(14px) saturate(1.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
  }
}
.hdr__in{ color:var(--ink); min-height:74px; gap:.9rem; }
.burger{ border-color:var(--line-d); }
.burger span{ background:var(--ink); }
.brand img{ width:170px; }

.nav__link{
  font-family:var(--font-display);
  font-size:.83rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
}
.nav__link:hover{ color:var(--blue); background:rgba(21,24,26,.05); }
.nav__item.is-open > .nav__link{ color:var(--blue); }
.nav__foot{ display:none; }

.mega{ background:var(--ink-3); border-top:2px solid var(--yellow); }
.mega__n{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em;
  color:rgba(244,244,242,.38); flex:none;
}
.mega a{ display:flex; align-items:baseline; gap:.6rem; }
.mega a:hover .mega__n{ color:var(--yellow); }
.mega__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1rem; padding-top:.8rem; border-top:1px solid rgba(244,244,242,.16);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,244,242,.45);
}
.mega__foot a{ padding:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--yellow); }

.hdr__call{
  display:none; flex-direction:column; gap:.05rem;
  padding:.48rem .85rem; background:var(--yellow); color:var(--ink);
  border:1px solid var(--yellow);
  transition:background .2s;
}
.hdr__call span{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.7;
}
.hdr__call b{ font-family:var(--font-display); font-size:.92rem; font-weight:700; letter-spacing:.03em; }
.hdr__call:hover{ background:#ffd51f; }
@media (min-width:1180px){ .hdr__call{ display:flex; } }

/* ==========================================================================
   SHARED GRAMMAR — sheet tags, rules, headings, links
   ========================================================================== */
.sect--dark-2{ color:var(--text); }

.tag{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
  margin-bottom:clamp(1.5rem,2.8vw,2.2rem);
}
.tag span:first-child{ color:var(--ink); }
.tag i{ flex:1; height:1px; background:var(--line-d); min-width:1.2rem; }
.sect--dark-2 .tag{ color:rgba(244,244,242,.55); }
.sect--dark-2 .tag span:first-child{ color:var(--text); }
.sect--dark-2 .tag i{ background:rgba(244,244,242,.2); }
.tag--ink{ color:rgba(21,24,26,.6); }
.tag--ink span:first-child{ color:var(--ink); }
.tag--ink i{ background:rgba(21,24,26,.3); }

.h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.6vw,3.5rem);
  font-weight:700; line-height:.98; letter-spacing:-.026em;
  min-width:0;
}
.shead__row{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.2rem,3vw,2.8rem);
  align-items:end;
  margin-bottom:clamp(2rem,3.4vw,2.9rem);
}
.shead__row .sect__lead{ padding-bottom:.35rem; }
.sect__lead{ min-width:0; }

.link{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.5rem; padding-bottom:.35rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--ink);
  transition:gap .2s var(--ease), color .2s, border-color .2s;
}
.link:hover{ gap:.85rem; color:var(--blue); border-color:var(--blue); }
.link--light{ color:var(--text); border-color:rgba(244,244,242,.42); }
.link--light:hover{ color:var(--yellow); border-color:var(--yellow); }

.btn{
  border-radius:0;
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.95rem 1.35rem;
}
.btn--solid{ background:var(--yellow); color:var(--ink); }
.btn--solid:hover{ background:#ffd51f; filter:none; transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--line-d); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* the weld tick — a 45 degree mark where two things genuinely meet */
.tick{ width:13px; height:13px; flex:none; color:var(--blue); }
.tick path{ fill:none; stroke:currentColor; stroke-width:1.6; }
.tick circle{ fill:currentColor; }
.tick--ink{ color:var(--ink); }

/* ==========================================================================
   HERO — the spool
   ========================================================================== */
.hero{
  background:var(--white); color:var(--ink);
  padding-block:clamp(2rem,4vw,3.4rem) clamp(2.6rem,5vw,4.4rem);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:clamp(2rem,4.4vw,4rem);
  align-items:center;
}
@media (min-width:1024px){ .hero__grid{ min-height:calc(100svh - 74px); } }

.hero__copy{ min-width:0; }
.hero__h1{
  font-size:var(--h1-size, clamp(2.7rem, 6.4vw, 5.2rem));
  line-height:.92; letter-spacing:-.032em;
}
.hero__lead{
  margin-top:clamp(1.2rem,2.2vw,1.7rem);
  max-width:38ch; min-width:0;
  font-size:clamp(.98rem,1.1vw,1.08rem); line-height:1.62;
  color:var(--ink-mute);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.6rem,2.8vw,2.1rem); }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem;
  margin-top:clamp(2rem,3.6vw,2.8rem); padding-top:1rem;
  border-top:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.hero__trust li{ display:flex; align-items:baseline; gap:.5rem; }
.hero__trust span{ color:var(--ink); font-size:.72rem; letter-spacing:.08em; }

.hero__fig{ margin:0; min-width:0; }
.spool{ display:block; width:100%; height:auto; color:var(--ink); }

/* --- the drawing ------------------------------------------------------- */
.s-fill{ fill:#fff; stroke:currentColor; stroke-width:1.3; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.s-valve{ fill:rgba(44,90,124,.09); stroke:var(--blue); stroke-width:1.3; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.s-bolt{ fill:#fff; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke; }
.s-centre{ fill:none; stroke:var(--blue); stroke-width:.9; stroke-dasharray:16 5 3 5; opacity:.5; vector-effect:non-scaling-stroke; }
.s-weld{ stroke:var(--blue); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.s-dim{ fill:none; stroke:var(--steel); stroke-width:.9; vector-effect:non-scaling-stroke; }
.s-dot{ fill:var(--steel); }
.s-rule{ stroke:currentColor; stroke-opacity:.28; stroke-width:.8; vector-effect:non-scaling-stroke; }
.d-dim-t{ font-family:var(--font-mono); font-size:18px; fill:var(--steel); letter-spacing:.03em; }
.d-balloon circle{ fill:#fff; stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.d-balloon text{ font-family:var(--font-mono); font-size:17px; font-weight:700; fill:var(--ink); text-anchor:middle; }
.d-tb-h{ font-family:var(--font-mono); font-size:15px; font-weight:700; fill:var(--ink); letter-spacing:.07em; }
.d-tb-s{ font-family:var(--font-mono); font-size:13px; fill:var(--steel); letter-spacing:.07em; }
.d-tb-k{ font-family:var(--font-mono); font-size:9px; fill:var(--steel); letter-spacing:.16em; }
.d-tb-v{ font-family:var(--font-mono); font-size:14px; fill:var(--ink); }
@media (max-width:720px){
  .d-dim, .d-lead, .d-balloon, .d-tb, .s-centre{ display:none; }
}

/* --- parts list -------------------------------------------------------- */
.parts{
  display:grid; gap:.55rem;
  margin-top:-1px;
  padding:.85rem 1rem 1rem;
  background:var(--panel);
  border-top:1px solid var(--line-d);
  min-width:0;
}
.parts__h{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
}
.parts__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(76px,100%),1fr));
  gap:.45rem .6rem;
}
.parts__list li{
  display:flex; align-items:center; gap:.45rem; min-width:0;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
}
.parts__list i{
  display:grid; place-items:center; flex:none;
  width:18px; height:18px; border:1px solid var(--ink); border-radius:50%;
  font-style:normal; font-size:.54rem;
}

/* ==========================================================================
   01 — WHAT WE DO
   ========================================================================== */
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,4.2vw,3.8rem);
  align-items:start;
}
.about__copy{ min-width:0; }
.about__copy p{
  max-width:46ch; min-width:0; margin-top:1.05rem;
  font-size:1rem; line-height:1.72; color:var(--ink-mute);
}
.about__copy .h2{ margin-bottom:.4rem; }

.ticket{
  position:relative; min-width:0;
  background:var(--ink); color:var(--text);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  margin-top:.2rem;
}
.ticket::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--yellow); }
.ticket__h{
  display:flex; justify-content:space-between; gap:1rem;
  padding-bottom:.9rem; border-bottom:1px solid rgba(244,244,242,.18);
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(244,244,242,.5);
}
.ticket__rows > div{
  display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:1rem;
  padding:.85rem 0; border-bottom:1px solid rgba(244,244,242,.13);
}
.ticket__rows > div:last-child{ border-bottom:0; padding-bottom:0; }
.ticket dt{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(244,244,242,.48);
}
.ticket dd{ min-width:0; overflow-wrap:anywhere; font-size:.9rem; line-height:1.5; }
.ticket dd a{ border-bottom:1px solid rgba(244,244,242,.3); }
.ticket dd a:hover{ color:var(--yellow); border-color:var(--yellow); }

/* ==========================================================================
   02 — SERVICES
   ========================================================================== */
.svc{ border-top:1px solid rgba(244,244,242,.2); }
.svc li{ border-bottom:1px solid rgba(244,244,242,.2); }
.svc__row{
  display:grid;
  grid-template-columns:3rem minmax(0,1fr) minmax(0,1.3fr) 1.6rem;
  gap:clamp(.6rem,1.8vw,1.6rem);
  align-items:baseline;
  padding:clamp(1rem,1.9vw,1.4rem) .35rem;
  transition:background .22s, padding-left .22s;
}
.svc__row:hover{ background:rgba(244,244,242,.055); padding-left:.85rem; }
.svc__n{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; color:rgba(244,244,242,.42); }
.svc__name{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.3rem,2.3vw,1.85rem); line-height:1.05; letter-spacing:-.01em;
  transition:color .2s;
}
.svc__d{ min-width:0; font-size:.9rem; line-height:1.5; color:rgba(244,244,242,.6); }
.svc__go{
  justify-self:end; font-size:.95rem; color:rgba(244,244,242,.3);
  transition:transform .22s var(--ease), color .22s;
}
.svc__row:hover .svc__name,
.svc__row:hover .svc__go{ color:var(--yellow); }
.svc__row:hover .svc__go{ transform:translate(2px,-2px); }
@media (max-width:720px){
  .svc__row{ grid-template-columns:2.1rem minmax(0,1fr); gap:.3rem .7rem; padding:1rem .2rem; }
  .svc__name,.svc__d{ grid-column:2; }
  .svc__go{ display:none; }
  .svc__row:hover{ padding-left:.2rem; }
}

/* ==========================================================================
   03 — IN THE WORKS
   ========================================================================== */
.works__plate{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
  grid-template-rows:1fr 1fr;
  gap:clamp(.5rem,1.2vw,1rem);
  padding:clamp(.5rem,1.2vw,1rem);
  background:var(--ink);
}
.shot{ margin:0; min-width:0; display:grid; grid-template-rows:1fr auto; }
.shot--lead{ grid-row:1 / span 2; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/10; }
.shot--lead img{ aspect-ratio:4/3; }
.shot figcaption{
  display:flex; align-items:flex-start; gap:.5rem;
  padding:.8rem .85rem .2rem;
  font-size:.8rem; line-height:1.45; color:rgba(244,244,242,.74);
}
.shot figcaption .mono{ flex:none; color:var(--yellow); padding-top:.1rem; }
.shot .tick{ color:var(--accent-lit); margin-top:.15rem; }
@media (max-width:820px){
  .works__plate{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto; }
  .shot--lead{ grid-row:auto; }
  .shot--lead img{ aspect-ratio:16/10; }
}

/* ==========================================================================
   04 — TECHNICAL SERVICES
   ========================================================================== */
.tech__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,4.2vw,3.8rem);
  align-items:start;
}
.tech__copy{ min-width:0; }
.tech__copy p{
  max-width:50ch; min-width:0; margin-bottom:1rem;
  font-size:1rem; line-height:1.72; color:var(--ink-mute);
}
.register{
  min-width:0; padding:clamp(1.2rem,2.2vw,1.7rem);
  background:var(--panel); border-left:3px solid var(--blue);
}
.register__h{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding-bottom:.8rem; border-bottom:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel);
}
.register__list{ margin-top:.2rem; }
.register__list li{
  display:flex; align-items:center; gap:.7rem;
  padding:.72rem 0; border-bottom:1px solid var(--line-d);
  font-family:var(--font-display); font-size:1.12rem; font-weight:600; letter-spacing:-.005em;
}
.register__list li:last-child{ border-bottom:0; }
.register__list li::before{ content:""; flex:none; width:6px; height:6px; background:var(--blue); }
.register__foot{ margin-top:.9rem; font-size:.78rem; line-height:1.55; color:var(--steel); }

/* ==========================================================================
   05 — ACCREDITATIONS
   ========================================================================== */
.acc__h{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.1rem,6vw,4.8rem); line-height:.98; letter-spacing:-.028em;
}
.acc__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:1.2rem 2rem; margin-top:clamp(1.8rem,3.6vw,3rem); padding-top:1.3rem;
  border-top:1px solid rgba(244,244,242,.2);
}
.acc__note{ max-width:52ch; font-size:.92rem; line-height:1.6; color:rgba(244,244,242,.6); }

/* ==========================================================================
   06 — COVERAGE (the only yellow band)
   ========================================================================== */
.cover{ background:var(--yellow); color:var(--ink); }
.cover__lead{ max-width:42ch; font-size:.98rem; line-height:1.6; color:rgba(21,24,26,.72); }
.cover__grid{
  position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(21,24,26,.28);
}
.cover__grid::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(21,24,26,.28);
}
.cover__grid li{
  display:flex; align-items:baseline; gap:.6rem; min-width:0;
  padding:.95rem .35rem; border-bottom:1px solid rgba(21,24,26,.28);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.4rem); letter-spacing:-.01em;
}
.cover__grid li span{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.1em;
  color:rgba(21,24,26,.48);
}
.cover__note{
  display:flex; align-items:center; flex-wrap:wrap; gap:.45rem;
  margin-top:1.1rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(21,24,26,.72);
}
@media (max-width:720px){ .cover__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(2rem,4.2vw,3.8rem);
  align-items:start;
}
.contact__copy{ min-width:0; }
.contact__copy .sect__lead{ margin-top:1rem; }
.contact__tel{
  display:inline-block; margin-top:clamp(1.5rem,3vw,2.2rem);
  padding-bottom:.15rem; border-bottom:2px solid var(--yellow);
  font-family:var(--font-mono); font-size:clamp(1.4rem,3.2vw,2.2rem); letter-spacing:-.01em;
  overflow-wrap:anywhere; max-width:100%;
}
.contact__tel:hover{ color:var(--blue); border-color:var(--blue); }
.contact__mails{ display:grid; gap:.5rem; margin-top:1.2rem; }
.contact__mails a{
  width:fit-content; max-width:100%;
  padding-bottom:.3rem; border-bottom:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:clamp(.76rem,1.5vw,.9rem);
  color:var(--blue); overflow-wrap:anywhere;
}
.contact__mails a:hover{ border-color:var(--blue); }
.contact__addr{
  min-width:0; padding:clamp(1.3rem,2.4vw,1.8rem);
  background:var(--panel); border-top:3px solid var(--ink);
}
.addr__h{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); margin-bottom:.8rem;
}
.addr__lines{ font-size:1rem; line-height:1.8; }
.contact__addr .btn{ margin-top:1.4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot__logo{ display:inline-block; background:#fff; padding:10px 14px; margin-bottom:1.4rem; }
.foot__logo img{ width:190px; height:auto; }
.foot__blurb{ max-width:34ch; font-size:.84rem; line-height:1.65; color:rgba(244,244,242,.6); }
.foot__contact{ display:grid; gap:.35rem; margin-top:1.2rem; font-family:var(--font-mono); font-size:.72rem; }
.foot__contact a{ color:rgba(244,244,242,.78); overflow-wrap:anywhere; }
.foot__contact a:hover{ color:var(--yellow); }
.foot__nav address{ font-size:.83rem; line-height:1.75; color:rgba(244,244,242,.78); }
.foot__bottom p{ max-width:64ch; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .nav{ color:var(--text); }
  .mega{ background:none; border-top:0; box-shadow:none; }
  .mega__foot{ display:none; }
  .nav .nav__link{ color:var(--text); }
  .nav .nav__link:hover{ color:var(--yellow); }
  .nav__foot{ display:grid; }
  .mega__n{ color:rgba(244,244,242,.45); }
}

@media (max-width:900px){
  .hero__grid,
  .about__grid,
  .tech__grid,
  .contact__grid,
  .shead__row{ grid-template-columns:minmax(0,1fr); }
  .shead__row{ align-items:start; gap:1rem; }
  .hero__grid{ gap:2.4rem; }
  .ticket{ margin-top:0; }
}

@media (max-width:560px){
  .hero__trust{ gap:.7rem 1.1rem; }
  .ticket__rows > div{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .ticket__rows > div:last-child{ padding-bottom:0; }
  .foot__logo img{ width:160px; }
}