/* Skeeter Laser — equipment site
   Same family as the SUN MELLON portal; ground colour is this brand's own. */

:root {
  --ink:       #0E1620;
  --ink-card:  #121C28;
  --ink-raise: #16212F;
  --line:      rgba(255, 255, 255, 0.08);
  --line-warm: rgba(255, 138, 31, 0.3);

  --sun-core:  #FF6A00;
  --sun-mid:   #FF8A1F;
  --sun-high:  #FFB454;
  --sun-pale:  #FFD9A8;

  --text:      #EDEAE5;
  --text-soft: #B7B9BD;
  --text-mute: #818892;

  --serif: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sun-core); color: #fff; }
:focus-visible { outline: 2px solid var(--sun-high); outline-offset: 3px; border-radius: 2px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sun-high);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--sun-core), transparent);
}

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- top bar */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
.topbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,22,32,.95) 0%, rgba(14,22,32,.7) 55%, rgba(14,22,32,0) 100%);
  transition: opacity .35s ease;
}
.topbar.is-stuck {
  background: rgba(14, 22, 32, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.topbar.is-stuck::before { opacity: 0; }
.topbar__inner { position: relative; display: flex; align-items: center; gap: 24px; height: 74px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand__mark { width: 30px; height: 30px; border-radius: 7px; }
.brand__name {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav__link { font-size: 14px; color: var(--text-soft); position: relative; padding-block: 4px; transition: color .2s; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--sun-core), var(--sun-high));
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }

.langs { display: flex; gap: 2px; flex: none; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.langs__item { font-size: 12px; letter-spacing: .04em; color: var(--text-mute); padding: 4px 10px; border-radius: 999px; transition: .2s; }
.langs__item:hover { color: var(--text); }
.langs__item[aria-current="true"] {
  color: #17110A; font-weight: 600;
  background: linear-gradient(135deg, var(--sun-high), var(--sun-mid));
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500;
  padding: 15px 26px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, background-color .22s, border-color .22s;
}
.btn--sm { font-size: 13.5px; padding: 9px 17px; }
.btn__arrow { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--sun {
  background: linear-gradient(135deg, var(--sun-mid), var(--sun-core) 55%, #E85D00);
  color: #FFF8F1;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 30px -12px rgba(255,106,0,.65);
}
.btn--sun:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 18px 42px -14px rgba(255,106,0,.8); }
.btn--ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.015); }
.btn--ghost:hover { border-color: var(--line-warm); background: rgba(255,138,31,.06); transform: translateY(-2px); }

/* -------------------------------------------------------------- hero */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(140px, 19vh, 205px);
  padding-bottom: clamp(70px, 10vh, 115px);
}
/* A beam from above right, echoing the mark. */
.hero__glow {
  position: absolute; top: -28%; right: -6%;
  width: min(900px, 85vw); aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 60% 40%,
    rgba(255,122,10,.3) 0%, rgba(255,106,0,.14) 32%, rgba(255,106,0,0) 66%);
  filter: blur(18px);
  z-index: -1; pointer-events: none;
}
/* Two columns on a wide screen, scene on the left. The copy comes first in the
   DOM -- it is what matters to a reader and to a crawler -- and `order` moves
   the scene across visually. That `order` holds at every width: left on a wide
   screen becomes top on a narrow one, which is the stacking a reader expects. */
.hero__inner {
  display: grid;
  /* The copy side is the wider of the two. Narrowing the artwork shortens it
     (it is a fixed 1.6:1) while giving the headline room to grow, which is what
     brings the two columns to the same height. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 56px);
  /* The eyebrow sits above this row and the buttons below it, so the two columns
     now hold comparable amounts: artwork on one side, headline and two paragraphs
     on the other. Centring them keeps the shorter column from leaving a gap at
     one end of the taller one. */
  align-items: center;
}
.hero__scene { order: -1; min-width: 0; margin: 0; }
.hero__scene img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
/* The HUD figures are set dressing. Say so, quietly, rather than stripping the
   artwork of the thing that makes it look like equipment. */
.hero__scene-note {
  margin: 10px 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--text-mute);
  opacity: .75;
}

/* Its own row across the full shell, flush with the page's left edge -- it reads
   as a label for the whole hero, not for the column of copy beside it. */
.hero__eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .21em; text-transform: uppercase;
  color: var(--sun-high); display: flex; align-items: center; gap: 11px;
  margin: 0 0 clamp(30px, 5vh, 48px);
}
.hero__eyebrow::before { flex: none; }
.hero__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun-mid);
  box-shadow: 0 0 0 4px rgba(255,138,31,.16), 0 0 16px 2px rgba(255,138,31,.5);
}
.hero__title {
  /* Sized to the column it actually sits in, not to the viewport. The cap is set
     so the longest line ("without the mosquitoes.") still clears its column with
     room to spare -- two lines at every width, never four -- while being large
     enough that the copy column matches the artwork beside it. */
  font-size: clamp(1.95rem, 3.5vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
  margin: 0;
  max-width: 20ch;
  background: linear-gradient(174deg, #FFFCF8 10%, #FFE8CC 58%, var(--sun-pale) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero__lede {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.75vw, 1.36rem);
  line-height: 1.5; color: var(--text);
  max-width: 40ch; margin: clamp(22px, 3.2vh, 30px) 0 0;
}
.hero__body { font-size: .97rem; line-height: 1.7; color: var(--text-soft); max-width: 46ch; margin: 22px 0 0; text-wrap: pretty; }
/* Below both columns and centred on the page, so the call to action belongs to
   the hero rather than to the right-hand column. */
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: clamp(40px, 6vh, 64px);
}

/* -------------------------------------------------------------- sections */

.section { padding-block: clamp(76px, 11vh, 130px); }
.section--tint {
  background: radial-gradient(130% 80% at 50% 0%, rgba(255,106,0,.06), transparent 62%), var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section__head { max-width: 720px; margin-bottom: clamp(40px, 6vh, 64px); }
.section__title { font-size: clamp(1.85rem, 4vw, 2.9rem); }

/* -------------------------------------------------------------- lines */

.lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(16px, 2vw, 22px); }
.line {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: clamp(28px, 3vw, 38px);
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent 60%), var(--ink-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.line::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--sun-core), var(--sun-high), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.line:hover { border-color: var(--line-warm); transform: translateY(-4px); box-shadow: 0 24px 60px -34px rgba(255,106,0,.5); }
.line:hover::before { transform: scaleX(1); }

/* Product media. The illustration is a schematic, not a product photo -- no
   supplier is committed yet, and a real photo would imply a specific model.
   With a video id set it becomes a click-to-load facade: nothing is requested
   from YouTube until the visitor presses play, so the page keeps its
   zero-third-party-request promise on first load. */
.line__media {
  position: relative;
  margin: -8px -4px 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.03), transparent 60%), #0B131C;
  border: 1px solid var(--line);
  aspect-ratio: 400 / 230;
}
.line__illus { width: 100%; height: 100%; object-fit: cover; }

.line__play {
  position: absolute; inset: 0; margin: auto;
  width: max-content; height: max-content;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px 12px 16px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: #FFF8F1; cursor: pointer;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--sun-mid), var(--sun-core) 60%, #E85D00);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.8);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.line__play:hover { transform: scale(1.05); box-shadow: 0 14px 36px -10px rgba(255,106,0,.7); }

.line__consent {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 9px 14px;
  font-size: 11.5px; line-height: 1.45; color: var(--text-mute);
  background: linear-gradient(180deg, transparent, rgba(11,19,28,.92) 40%);
}
.line__frame { width: 100%; height: 100%; border: 0; display: block; }

.line__credit {
  margin: -16px 0 20px;
  font-size: 12.5px; color: var(--text-mute);
}
.line__credit a { color: var(--text-soft); border-bottom: 1px solid var(--line); }
.line__credit a:hover { color: var(--sun-high); border-bottom-color: var(--line-warm); }

.line__tag {
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; margin-bottom: 20px;
  border: 1px solid var(--line-warm); color: var(--sun-high); background: rgba(255,138,31,.07);
}
.line--trap .line__tag { color: #8FE3B0; border-color: rgba(143,227,176,.28); background: rgba(143,227,176,.07); }
.line__name { font-size: clamp(1.5rem, 2.3vw, 1.95rem); margin-bottom: 14px; }
.line__lede { font-size: 15.5px; line-height: 1.68; color: var(--text-soft); margin: 0 0 24px; text-wrap: pretty; }
.line__points { list-style: none; margin: 0; padding: 22px 0 0; display: grid; gap: 11px; border-top: 1px solid var(--line); }
.line__points li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.line__points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--sun-mid); opacity: .85; }

/* -------------------------------------------------------------- compliance */

.compliance { max-width: 760px; }
.compliance__body { margin-top: 30px; }
.compliance__body p { font-size: 1.0rem; line-height: 1.8; color: var(--text-soft); margin: 0 0 20px; text-wrap: pretty; }
.compliance__body p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.14rem, 1.8vw, 1.36rem);
  line-height: 1.55; letter-spacing: -.012em; color: var(--text);
}
.compliance__note {
  margin: 30px 0 0; padding: 18px 22px;
  border-left: 2px solid var(--sun-core);
  background: rgba(255,106,0,.05);
  font-size: 14.5px; line-height: 1.7; color: var(--text-soft);
}

/* -------------------------------------------------------------- area */

.area { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.area__body p { font-size: 1.0625rem; line-height: 1.78; color: var(--text-soft); margin: 0 0 18px; text-wrap: pretty; }
.area__note { font-size: 14.5px; color: var(--text-mute); }

/* -------------------------------------------------------------- contact */

.contact {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid var(--line-warm); border-radius: var(--radius);
  padding: clamp(42px, 6vw, 80px);
  background: radial-gradient(120% 140% at 10% 108%, rgba(255,106,0,.18), transparent 56%),
              linear-gradient(180deg, rgba(255,255,255,.022), transparent 50%), var(--ink-card);
}
.contact .eyebrow { justify-content: center; }
.contact__title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 20px; }
.contact__lede { margin-inline: auto; text-align: center; }
.contact__mail { margin-top: clamp(30px, 4.5vh, 42px); }
.contact__mail-label { font-size: 11.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 14px; }
.contact__mail-link {
  font-family: var(--serif); font-size: clamp(1.3rem, 3.2vw, 2.1rem); letter-spacing: -.02em;
  background: linear-gradient(135deg, #FFF4E6, var(--sun-high));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  border-bottom: 1px solid var(--line-warm); padding-bottom: 4px; word-break: break-word;
  transition: border-color .25s;
}
.contact__mail-link:hover { border-bottom-color: var(--sun-high); }
.contact__note { margin: 26px 0 0; font-size: 13.5px; color: var(--text-mute); }

/* -------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--line); padding-top: clamp(52px, 7vh, 78px); padding-bottom: 38px; background: linear-gradient(180deg, transparent, rgba(255,106,0,.03)); }
.footer__grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2, minmax(0,1fr)); gap: clamp(32px, 4vw, 56px); padding-bottom: clamp(40px, 5.5vh, 60px); }
.footer__brand .brand { margin-bottom: 18px; }
.footer__tagline { font-size: 14.5px; line-height: 1.7; color: var(--text-mute); max-width: 34ch; margin: 0; }
.footer__sister { font-size: 13.5px; line-height: 1.7; color: var(--text-mute); margin: 12px 0 0; }
.footer__sister span { font-family: var(--mono); color: var(--sun-high); }
.footer__heading { font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--text); margin: 0 0 18px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__list a { font-size: 14px; color: var(--text-mute); transition: color .2s; }
.footer__list a:hover, .footer__list a[aria-current="true"] { color: var(--sun-high); }
.footer__bar { border-top: 1px solid var(--line); padding-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 12.5px; color: var(--text-mute); }
.footer__bar .sep { opacity: .4; }
.footer__bar a:hover { color: var(--sun-high); }

/* -------------------------------------------------------------- legal */

.legal { padding-top: clamp(130px, 17vh, 176px); padding-bottom: clamp(66px, 9vh, 104px); }
.legal__head { max-width: 740px; padding-bottom: clamp(32px, 4.5vh, 48px); border-bottom: 1px solid var(--line); margin-bottom: clamp(40px, 5.5vh, 58px); }
.legal__title { font-size: clamp(2.2rem, 5.5vw, 3.5rem); margin-bottom: 18px; }
.legal__updated { font-family: var(--mono); font-size: 12.5px; color: var(--text-mute); }
.legal__body { max-width: 72ch; }
.legal__body section { margin-bottom: clamp(30px, 4vh, 44px); }
.legal__body h2 { font-size: clamp(1.22rem, 2vw, 1.5rem); margin-bottom: 13px; }
.legal__body p { margin: 0; font-size: 1rem; line-height: 1.78; color: var(--text-soft); text-wrap: pretty; }
.legal__back { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(14px, 2.5vh, 26px); font-size: 14.5px; color: var(--sun-high); border-bottom: 1px solid rgba(255,180,84,.24); padding-bottom: 2px; transition: border-color .25s; }
.legal__back:hover { border-bottom-color: var(--sun-high); }

/* -------------------------------------------------------------- reveal */

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s cubic-bezier(.2,.7,.3,1), transform .72s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) { .area { grid-template-columns: 1fr; } }
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
  /* order: -1 from the base rule still applies -- scene on top, headline under
     it, the single-column reading of the two-column layout. Capped, because at
     full column width the 1.6:1 artwork is tall enough to push the headline off
     a tablet screen entirely. */
  .hero__scene { max-width: 520px; }
  .hero__title { max-width: 17ch; font-size: clamp(2.1rem, 5.6vw, 2.9rem); }
  .hero__lede { max-width: 44ch; }
  .hero__body { max-width: 56ch; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .langs { margin-left: auto; }
  html { scroll-padding-top: 78px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .topbar__inner { height: 64px; gap: 12px; }
  .topbar__cta { display: none; }
  .brand__name { font-size: 14px; }
  .hero { padding-top: 116px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .lines { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact { padding: 34px 22px; }
  .compliance__note { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}