/* Styr website: shared styles for every page.
   Media-led pages on a green-tinted ground. One flight route (a survey pattern) runs from a home
   marker in the hero down the page edges, crossing between sections, and lands home in the footer.
   Radius rule: media and panels 16px, buttons and chips full pill. Light theme only.
   Contents: tokens, base, buttons, nav, hero, sections, app-screen mockups, FAQ, closing, footer,
   flight route + drone, motion. Page-only styles live in pages/. */


/* Tokens */
:root{
  --bg:#F2F6F4; --surface:#FFFFFF; --fg:#0B1F1A; --fg2:#4A5E57; --line:#D8E2DD;
  --accent:#147A61; --accent-hover:#0F6450; --on-accent:#FFFFFF; --route:#1C9E7A; --soon:#8A5A00; --soon-bg:#FFF1CC;
  --media-fg:#F3F8F6; --media-fg2:#C9D8D2; --scrim:rgba(4,20,16,.62);
  --app-bg:#08131A; --app-raised:#0D1B24; --app-line:#1C2B34; --app-fg:#F8FAFC; --app-fg2:#A9B7C3; --app-ok:#2CC295; --app-warn:#F59E0B; --app-map:#0B1A16;
  --display:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:16px;
  --inv-bg:#0A2620; --inv-card:#123A30; --inv-line:#1F4A3E; --inv-fg:#ECF5F1; --inv-fg2:#A9C2B8; --inv-accent:#5FE0B8; --mark-shade:.4;
  color-scheme:light; /* one light theme only; no dark mode (user, 2026-10-08) */
  --drone-body:#1D2326; --drone-arm:#2B3236; --drone-shell:#3C454A; --drone-prop:#121618; --drone-metal:#A9B3B7; --drone-edge:rgba(255,255,255,.22);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;position:relative;overflow-x:clip}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);margin:0;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
p,figure{margin:0}
img,video{max-width:100%;display:block}
.wrap{max-width:1296px;margin:0 auto;padding-inline:16px}
@media (min-width:900px){.wrap{padding-inline:56px}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Buttons, links, labels */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background-color .25s,border-color .25s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{color:var(--media-fg);border-color:rgba(243,248,246,.45);background:rgba(4,20,16,.25)}
.btn-ghost:hover{border-color:var(--media-fg)}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
.link svg{width:16px;height:16px}
.soon{display:inline-block;font:600 12px/1 var(--body);padding:5px 9px;border-radius:999px;background:var(--soon-bg);color:var(--soon);white-space:nowrap;vertical-align:3px}
.z7{justify-self:start;display:inline-block;font:600 12px/1 var(--body);padding:5px 9px;border-radius:999px;border:1px solid currentColor;color:var(--accent);text-decoration:none;white-space:nowrap;vertical-align:1px}
.z7:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.inverse .z7{color:var(--inv-accent)}
.inverse .z7:hover{background:var(--inv-accent);border-color:var(--inv-accent);color:var(--inv-bg)}
.tcard.hi .z7{color:inherit}
.tcard.hi .z7:hover{background:var(--on-accent);border-color:var(--on-accent);color:var(--accent)}

/* Main nav: a floating rounded bar. Clear with white type over the hero video, light glass over
   light sections, dark glass over the other dark sections (state set by navState() in the script).
   The header takes no height, so the hero runs up behind the bar to the top of the page. */
header.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:30;height:0;padding-inline:max(44px,calc((100vw - 1296px) / 2 + 60px));pointer-events:none} /* inset past the route's side lanes (build(): xL) so the line never runs along the bar */
header.top .bar{pointer-events:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:64px;padding:0 10px;border-radius:999px;
  color:var(--fg);background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line);box-shadow:0 12px 32px -18px rgba(4,20,16,.35);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:background-color .35s,border-color .35s,box-shadow .35s,color .35s}
header.top.clear .bar{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--media-fg)}
header.top.dark .bar{background:rgba(6,22,18,.55);border-color:rgba(243,248,246,.14);color:var(--media-fg)}
header.top:is(.clear,.dark) nav.links{color:var(--media-fg2)}
header.top:is(.clear,.dark) nav.links a:hover{color:var(--media-fg)}
header.top:is(.clear,.dark) .logo svg{color:var(--inv-accent)}
header.top .logo{justify-self:start;margin-left:14px;font-size:27px} /* even bar padding keeps the links truly centred */
header.top .logo svg{height:33px}
html{scroll-padding-top:96px}
.logo{display:flex;align-items:center;gap:10px;font:700 22px/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.logo svg{height:26px;width:auto;color:var(--accent)}
.logo small{font-size:.5em;letter-spacing:0} /* "GCS" at 50% of "Styr", on its baseline */
nav.links{display:flex;gap:30px;font-size:15px;color:var(--fg2)}
nav.links a{text-decoration:none;transition:color .2s}
nav.links a:hover{color:var(--fg)}
nav.links a[aria-current="page"]{color:var(--fg);font-weight:600}
header.top:is(.clear,.dark) nav.links :is(a,.dd-btn)[aria-current="page"],header.top:is(.clear,.dark) nav.links .dd-btn[data-current]{color:var(--media-fg)}
/* Use cases dropdown: a light panel under the bar, the same in every bar state */
.dd{position:relative;display:flex}
.dd-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:color .2s}
.dd-btn:hover,.dd.open .dd-btn{color:var(--fg)}
header.top:is(.clear,.dark) .dd-btn:hover,header.top:is(.clear,.dark) .dd.open .dd-btn{color:var(--media-fg)}
.dd-btn[data-current]{color:var(--fg);font-weight:600}
.dd-btn svg{width:14px;height:14px;transition:transform .25s}
.dd:is(:hover,:focus-within,.open) .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 22px);left:50%;width:380px;padding:8px;display:grid;gap:2px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 48px -20px rgba(4,20,16,.35);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .2s,visibility .2s}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px} /* keeps the hover alive across the gap */
.dd:is(:hover,:focus-within,.open) .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-menu a{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:8px;border-radius:14px;color:var(--fg);transition:background-color .2s}
.dd-menu a:hover,.dd-menu a:focus-visible{background:var(--bg)}
header.top nav.links .dd-menu a,header.top nav.links .dd-menu a:hover{color:var(--fg)} /* beats the white hover colour of the clear and dark bar states */
.dd-menu img{width:64px;height:48px;object-fit:cover;border-radius:10px}
.dd-menu .dd-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--bg);color:var(--accent);transition:background-color .2s}
.dd-menu .dd-ic svg{width:22px;height:22px}
.dd-menu a:hover .dd-ic,.dd-menu a:focus-visible .dd-ic{background:var(--surface)}
.dd-menu b{display:block;font-size:15px;font-weight:600}
.dd-menu small{display:block;font-size:13px;color:var(--fg2);line-height:1.35}
small .soon{font-size:10px;padding:2px 6px;vertical-align:1px}
.dd-menu a[aria-current="page"] b{color:var(--accent)}
header .btn{justify-self:end;min-height:44px;padding:0 20px;font-size:14px}
.menu-btn{display:none}
/* Phones and tablets: the links fold into a panel under the bar, opened by the menu button; the two
   dropdowns become accordions inside it */
@media (max-width:960px){
  header.top .bar{position:relative;min-height:58px;grid-template-columns:1fr auto auto;gap:6px}header.top .logo{font-size:24px}header.top .logo svg{height:29px}
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
  .menu-btn svg{width:24px;height:24px}
  .menu-btn .i-close{display:none;transform:rotate(45deg)}
  header.top.menu-open .menu-btn .i-open{display:none}
  header.top.menu-open .menu-btn .i-close{display:block}
  header.top nav.links,header.top:is(.clear,.dark) nav.links{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:0;padding:8px;max-height:calc(100dvh - 100px);overflow-y:auto;
    background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 48px -20px rgba(4,20,16,.35);font-size:16px}
  header.top nav.links{--media-fg:var(--fg);--media-fg2:var(--fg)} /* the clear and dark bar states colour links with these; the panel is always light */
  header.top.menu-open nav.links{display:flex}
  header.top nav.links>a,header.top nav.links .dd-btn{min-height:48px;padding:0 10px;display:flex;align-items:center;color:var(--fg)}
  header.top nav.links .dd-btn{width:100%;justify-content:space-between}
  .dd{flex-direction:column}
  .dd-menu,.dd:is(:hover,:focus-within,.open) .dd-menu{position:static;width:auto;padding:0 0 8px;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none;display:none}
  .dd.open .dd-menu{display:grid}
  .dd-menu::before{content:none}
  .dd:is(:hover,:focus-within) .dd-btn svg{transform:none}
  .dd.open .dd-btn svg{transform:rotate(180deg)}
}
@media (max-width:420px){header .btn{padding:0 14px}}

/* Hero: full-bleed aerial video under a scrim */
.hero{position:relative;color:var(--media-fg);min-height:clamp(560px,86dvh,880px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,20,16,.55) 0%,rgba(4,20,16,.15) 28%,rgba(4,20,16,.15) 40%,rgba(4,20,16,.78) 100%)} /* darker top edge keeps the clear nav's white type readable */
.hero .wrap{width:100%;padding-block:96px 72px;display:grid;gap:28px}
.hero h1{font-size:clamp(40px,7vw,100px);line-height:1;letter-spacing:-.045em}
.hero h1>span,.hero h1>em{display:block}
.hero h1 em{font-style:normal}
@media (min-width:600px){.hero h1>span,.hero h1>em{white-space:nowrap}}
.hero p{font-size:clamp(17px,1.5vw,20px);color:var(--media-fg2);max-width:40ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
section{padding-block:clamp(80px,10vw,136px)}
.head{display:grid;gap:16px;margin-bottom:clamp(40px,5vw,64px);max-width:44rem}
.head h2{font-size:clamp(34px,4.4vw,58px);line-height:1.04}
.head p{color:var(--fg2);font-size:18px;max-width:52ch}

/* Inverse section: deep green ground with lighter cards (mark it data-dark too). At most one per page. */
.inverse{background:var(--inv-bg);color:var(--inv-fg)}
.inverse .head p{color:var(--inv-fg2)}

/* App-screen mockups (drawn placeholders for real captures) */
.screen{background:var(--app-bg);color:var(--app-fg);border-radius:var(--r);overflow:hidden;border:1px solid var(--app-line);box-shadow:0 30px 60px -30px rgba(4,20,16,.45)}
.screen-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--app-line);font-size:12px;color:var(--app-fg2)}
.screen-bar b{color:var(--app-fg);font-weight:600}
.screen-bar .st{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--app-warn)}
.screen-bar .st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.screen svg.map{display:block;width:100%;height:auto;background:var(--app-map)}
.screen-body{padding:16px;display:grid;gap:12px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--app-line)}
.stats div{padding:10px 16px;border-right:1px solid var(--app-line);min-width:0}
.stats div:last-child{border-right:0}
.stats small{display:block;font-size:11px;color:var(--app-fg2)}
.stats b{font:600 15px/1.3 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}.stats div:nth-child(2){border-right:0}.stats div:nth-child(n+3){border-top:1px solid var(--app-line)}}

.insight{background:var(--app-raised);border:1px solid var(--app-line);border-radius:10px;padding:12px 14px;display:grid;grid-template-columns:20px 1fr;gap:10px}
.insight svg{width:18px;height:18px;color:var(--app-warn);margin-top:2px}
.insight b{display:block;font-size:14px}
.insight span{font-size:13px;color:var(--app-fg2)}

.chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip.fly{color:var(--app-ok);background:rgba(44,194,149,.14)}
.chip.svc{color:var(--app-warn);background:rgba(245,158,11,.14)}
.chip.gnd{color:var(--app-fg2);background:rgba(169,183,195,.12)}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}
.faq h2{font-size:clamp(32px,3.6vw,48px);line-height:1.06}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:600;font-size:18px;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary svg{width:18px;height:18px;flex:none;color:var(--fg2);transition:transform .25s}
details[open] summary svg{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--fg2);max-width:60ch}
@media (max-width:860px){.faq{grid-template-columns:1fr;gap:24px}}

/* Closing video */
.closing{position:relative;color:var(--media-fg);overflow:hidden;isolation:isolate;text-align:left;padding-block:clamp(120px,16vw,220px)}
.closing video,.closing .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.closing::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim)}
.closing .wrap{display:grid;gap:28px;justify-items:start}
.closing h2{font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.045em;max-width:14ch}

/* Shared footer, same on every page */
/* Closing wordmark: logo + "Styr GCS" (GCS at 30% of Styr). The hero's aerial, darkened, shows only
   through the shapes, which fade out toward the bottom edge of the page. Laid out by layoutMark(). */
.bigmark{display:block;width:100%;height:auto;margin-top:clamp(20px,3vw,36px)}
.bigmark .shade{opacity:var(--mark-shade)}
.bigmark text{font-family:var(--display);font-weight:700;letter-spacing:-.05em}
.site-footer{padding-block:72px 0;font-size:15px;color:var(--fg2)}
.site-footer .grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px}
.site-footer .brand{display:grid;gap:14px;align-content:start}
.site-footer .brand .logo{color:var(--fg)}
.site-footer .socials{list-style:none;margin:4px 0 0;padding:0;display:flex;gap:10px}
.socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);color:var(--fg);transition:background-color .2s,color .2s,border-color .2s}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.socials svg{width:18px;height:18px}
.site-footer h4{margin:0 0 14px;font:600 15px/1 var(--body);color:var(--fg)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--fg)}
.email a{color:var(--fg)}
.site-footer .base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
@media (max-width:860px){.site-footer .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer .brand{grid-column:1/-1}}

/* Flight route overlay: planned (dashed) and flown (solid). The flown line and the aircraft follow
   the reader's position, measured with IntersectionObserver so it works in any scrolling frame. */
.route{position:absolute;inset:0 0 auto 0;pointer-events:none;z-index:20;overflow:hidden}
.route svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route .planned{fill:none;stroke:var(--route);stroke-width:1.5;stroke-dasharray:3 8;stroke-linecap:round;opacity:.5}
.route .flown{fill:none;stroke:var(--route);stroke-width:3;stroke-linecap:round}
.route .wp{fill:var(--bg);stroke:var(--route);stroke-width:2;transition:fill .4s}
.route .wp.on{fill:var(--route)}
.route .home rect{fill:var(--bg);stroke:var(--route);stroke-width:2}
.route .home text{fill:var(--route);font:700 13px/1 var(--mono)}
.route .sn{position:absolute;left:0;width:1px;height:1px}
.route.no-flight>svg,.route.no-flight .drone{display:none} /* tracking only: no line or aircraft on this page */
.drone{position:absolute;left:0;top:0;width:88px;height:88px;margin:-44px 0 0 -44px;will-change:transform}
.drone svg{width:100%;height:100%;overflow:visible;will-change:filter}
/* over dark sections (videos, the inverse band) the aircraft switches to its white livery */
.drone.on-dark{--drone-body:#D5DEDA; --drone-arm:#B7C3BE; --drone-shell:#F4F8F6; --drone-prop:#E9EFED; --drone-metal:#5E6B67; --drone-edge:rgba(0,0,0,.28)}
@media (max-width:899px){.drone{width:58px;height:58px;margin:-29px 0 0 -29px}}

/* Entrances: hero copy rises on load. Everything below the fold is scrubbed by the scroll:
   --r (0..1) is set per element from where it sits in the visible area, so it moves with the wheel */
@media (prefers-reduced-motion: no-preference){
  .hero p,.hero .ctas{animation:rise 1s cubic-bezier(.16,1,.3,1) both}
  .hero p{animation-delay:.75s}.hero .ctas{animation-delay:.95s}
  /* headings: each word rises out of its own mask, one after another */
  .ws .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
  /* each word starts a little after the one before it; --n is the heading's word count */
  .ws .w>span{display:inline-block;--k:clamp(0,var(--r,1) * (1 + var(--n,0) * .12) - var(--wi) * .12,1);transform:translateY(calc((1 - var(--k)) * 112%))}
  .ws .tm{font-size:.6em;vertical-align:.35em}
  .hero h1 .w>span{animation:word-up 1.15s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.15s + var(--wi)*85ms)}
  .rv{opacity:var(--r,1);transform:translateY(calc((1 - var(--r,1)) * 36px))}
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes word-up{from{transform:translateY(112%)}}
@media (max-width:899px){.wrap{padding-inline:32px}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.marquee ul{animation:none}}

/* Request-a-demo form (built by main.js) */
#demo{width:min(460px,calc(100% - 32px));padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--fg);box-shadow:0 24px 48px -20px rgba(4,20,16,.45)}
#demo::backdrop{background:var(--scrim)}
#demo form{display:grid;gap:14px;padding:28px}
#demo h3{font-size:24px}
#demo p{margin:0;color:var(--fg2);font-size:15px}
#demo label{display:grid;gap:6px;font-size:14px;font-weight:600}
#demo :is(input,textarea){font:16px/1.4 var(--body);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);resize:vertical}
#demo .acts{display:flex;gap:10px;margin-top:6px}
#demo .acts .btn:not(.btn-primary){border-color:var(--line);background:none;color:var(--fg)}