/* Sightline Aviation AI: silver on midnight (brand kit, 2026-10-28).
   Midnight navy and near-black surfaces, platinum silver type and lines,
   ivory for light layouts. Typography-led: no stock aviation imagery.
   Bodoni Moda (display) + Archivo (UI and body). */
:root {
  --navy: #071323;        /* midnight navy: dark surfaces */
  --ink: #080D14;         /* near-black: footer, deepest surface */
  --platinum: #F5F7FA;    /* silver highlight: text on dark */
  --silver: #B8BEC6;      /* silver midtone: secondary text on dark */
  --silver-shadow: #929AA4; /* lines and small labels on dark only */
  --ivory: #F5F2EB;       /* light layouts */
  --ivory-deep: #ECE7DC;  /* alternate light surface */
  --graphite: #111923;    /* text and artwork on light */
  --muted: #4E5661;       /* secondary text on ivory (6.0:1 or better) */
  --line: rgba(17,25,35,.16);
  --line-dark: rgba(184,190,198,.22);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(.2,.7,.1,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--graphite); font: 400 1.0625rem/1.65 var(--ui); -webkit-font-smoothing: antialiased; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; margin: 0 0 .45em; }
h1 { font-size: clamp(2.8rem, 6.4vw, 6rem); }
h2 { font-size: clamp(2.3rem, 5vw, 4.6rem); }
h3 { font: 500 1.35rem/1.25 var(--ui); margin: 0 0 .5em; }
p { margin: 0 0 1em; max-width: 36em; }
.wrap { padding-inline: var(--gutter); max-width: 1560px; margin-inline: auto; }
section { padding-block: clamp(4rem, 7.5vw, 6.5rem); }
.label { font: 500 .78rem/1 var(--ui); letter-spacing: .32em; text-transform: uppercase; margin: 0 0 1.75rem; }
.lead { font-size: 1.25rem; color: var(--muted); }
.dark { background: var(--navy); color: var(--platinum); }
.dark .lead, .dark p { color: var(--silver); }
.dark .label { color: var(--silver); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* Hairline: the brand's thin silver rule */
.rule { width: 72px; height: 1px; background: currentColor; opacity: .5; border: 0; margin: 2rem 0; }
.center .rule { margin-inline: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .6rem; font: 500 .82rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; padding: 1.15rem 1.9rem; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; transition: background .35s var(--ease), color .35s var(--ease); }
.btn-solid { background: var(--graphite); color: var(--ivory); border-color: var(--graphite); }
.btn-solid:hover { background: transparent; color: var(--graphite); }
.dark .btn-solid, .on-dark .btn-solid { background: var(--platinum); color: var(--navy); border-color: var(--platinum); }
.dark .btn-solid:hover, .on-dark .btn-solid:hover { background: transparent; color: var(--platinum); }
.btn-line:hover { background: currentColor; }
.btn-line:hover span { color: var(--ivory); }
.dark .btn-line:hover span, .on-dark .btn-line:hover span { color: var(--navy); }
.actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }
.center .actions { justify-content: center; }

/* LOGO: the kit's outlined SVGs, used as supplied. The files carry wide
   transparent margins, so each frame below shows only the artwork's bounds
   (measured from the files) and scales the image by its width: the aspect
   ratio never changes, so the logo is never distorted. */
.logo { display: inline-flex; text-decoration: none; color: inherit; line-height: 0; flex-shrink: 0; }
.logo-full, .logo-mono { display: block; overflow: hidden; }
.logo img { height: auto; }
.logo-full { aspect-ratio: 810 / 605; height: var(--logo-h, 84px); }
.logo-full img { width: 197.53%; max-width: none; margin: -11.73% 0 0 -48.77%; }
.logo-mono { display: none; aspect-ratio: 388 / 278; height: var(--mono-h, 38px); }
.logo-mono img { width: 131.96%; max-width: none; margin: -26.29% 0 0 -14.43%; }

/* HEADER (always on navy, so it always carries the silver logo) */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 2.5rem; padding: 1.1rem var(--gutter); color: var(--platinum); background: var(--navy); border-bottom: 1px solid transparent; transition: padding .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); }
.site-head.compact { padding-block: .8rem; border-bottom-color: var(--line-dark); }
.site-head.compact .logo-full, .home .site-head .logo-full { display: none; }
.site-head.compact .logo-mono, .home .site-head .logo-mono { display: block; }
.home .site-head:not(.compact) { background: transparent; padding-block: 1.6rem; }
.site-nav { display: flex; gap: 2.4rem; margin-left: auto; }
.site-nav a { text-decoration: none; font: 500 .8rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--platinum); }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--silver-shadow); }
.site-head .btn { padding: .85rem 1.3rem; font-size: .72rem; }
.site-head .btn-line:hover span { color: var(--navy); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: .6rem 1.1rem; font: 500 .75rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.page main { padding-top: 10rem; }

/* HERO (home): the full silver logo on midnight, type-led */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 7rem 0 5rem; color: var(--platinum); background: radial-gradient(ellipse 80% 60% at 50% 30%, #0E2038 0%, var(--navy) 62%, var(--ink) 100%); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--gutter); }
.hero-logo { --logo-h: clamp(170px, 26vw, 330px); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero h1 { font-size: clamp(1.9rem, 3.8vw, 3.4rem); line-height: 1.08; margin: 0 auto .55em; max-width: none; }
.hero h1 .line { display: inline-block; overflow: hidden; vertical-align: top; }
.hero h1 .line > span { display: inline-block; }
.hero .lead { color: var(--silver); max-width: 34em; margin-inline: auto; font-size: 1.05rem; }
.hero .actions { margin-top: 1.75rem; justify-content: center; }
.motion .hero h1 .line > span { transform: translateY(105%); animation: rise 1.2s var(--ease) .2s forwards; }
.motion .hero h1 .line:nth-child(2) > span { animation-delay: .35s; }
.motion .hero-logo { animation: settle 1.6s var(--ease) both; }
@keyframes rise { to { transform: none; } }
@keyframes settle { from { transform: translateY(14px); } to { transform: none; } }
.hero-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.8rem; display: flex; justify-content: center; font: 500 .72rem/1 var(--ui); letter-spacing: .28em; text-transform: uppercase; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--silver); text-decoration: none; }
.scroll-cue::after { content: ""; width: 1px; height: 38px; background: var(--silver-shadow); }

/* INTRO STATEMENT */
.intro p.statement { font: 400 clamp(1.7rem, 3.2vw, 2.8rem)/1.25 var(--display); max-width: 30ch; margin: 0 auto; }

/* WORK WALL */
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.work-head h2 { margin: 0; }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.8vw, 28px); }
.tile { margin: 0; }
.tile .frame { overflow: hidden; background: var(--ivory-deep); }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile figcaption { margin-top: 1rem; font: 500 .95rem/1.35 var(--ui); }
.tile figcaption span { display: block; color: var(--muted); font-weight: 400; }
.tile-a { grid-column: span 8; } .tile-a .frame { aspect-ratio: 16 / 10; }
.tile-b { grid-column: span 4; } .tile-b .frame { aspect-ratio: 4 / 5; }
.work-note { margin-top: 3rem; color: var(--muted); font-size: .95rem; max-width: 44em; }

/* TYPE BAND: a large statement on midnight with a rising silver hairline */
.band { position: relative; overflow: hidden; padding-block: clamp(6rem, 12vw, 10rem); background: linear-gradient(160deg, var(--navy) 0%, var(--ink) 100%); }
.band h2 { max-width: 16ch; }
.band .wrap { position: relative; z-index: 1; }
.band-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.band-line path { fill: none; stroke: var(--silver-shadow); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }

/* CAPABILITIES: large rows */
.cap-list { list-style: none; margin: 3.5rem 0 0; padding: 0; border-top: 1px solid var(--graphite); }
.cap-list li { border-bottom: 1px solid var(--line); }
.cap-list a, .cap-list .cap-row { display: grid; grid-template-columns: 4rem 1.2fr 1fr; gap: 2rem; align-items: baseline; padding: 2.2rem 0; text-decoration: none; color: var(--graphite); }
.cap-num { font: 500 .8rem/1 var(--ui); letter-spacing: .2em; color: var(--muted); }
.cap-name { font: 500 clamp(2.2rem, 4.8vw, 4.4rem)/1 var(--display); transition: transform .6s var(--ease), opacity .6s var(--ease); }
.cap-desc { color: var(--muted); max-width: 30em; }
.cap-list a:hover .cap-name { transform: translateX(.6rem); }
.cap-list:hover a:not(:hover) .cap-name { opacity: .45; }

/* STATEMENT BAND */
.statement-band p.big { font: 400 clamp(2rem, 4.2vw, 3.8rem)/1.12 var(--display); max-width: 22ch; color: var(--platinum); margin: 0; }
.statement-band p.sub { margin-top: 1.75rem; max-width: 36em; }

/* QUESTIONS */
.queries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.queries li { font: italic 400 clamp(1.5rem, 2.8vw, 2.4rem)/1.25 var(--display); padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.asking .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }

/* PROCESS */
.route { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; counter-reset: leg; }
.route li { counter-increment: leg; border-top: 1px solid var(--graphite); padding-top: 1.5rem; }
.route li::before { content: "0" counter(leg); display: block; font: 400 2.4rem/1 var(--display); margin-bottom: 1.25rem; }
.route p { color: var(--muted); font-size: .98rem; }
.pricing-note { margin-top: 4rem; display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.pricing-note strong { font: 400 1.9rem/1.1 var(--display); }

/* INSIGHTS */
.insights { background: var(--ivory-deep); }
.insights .post-link { border-top: 1px solid var(--graphite); padding-top: 1.5rem; }
.post-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 3rem; }
.post-link { text-decoration: none; color: var(--graphite); display: block; }
.post-link h3 { font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.15 var(--display); }
.post-link p { color: var(--muted); }

/* CLOSING CALL on midnight */
.closing { position: relative; overflow: hidden; color: var(--platinum); padding: 0; background: radial-gradient(ellipse 70% 70% at 50% 100%, #0E2038 0%, var(--navy) 60%, var(--ink) 100%); }
.closing .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(6rem, 12vw, 9rem); }
.closing h2 { font-size: clamp(3rem, 8vw, 7.5rem); line-height: .98; max-width: 12ch; margin-inline: auto; }
.closing p { color: var(--silver); }
.closing a:not(.btn) { color: var(--platinum); }

/* FOOTER (near-black, silver logo) */
.site-foot { background: var(--ink); color: var(--silver); padding-block: 5rem 2.5rem; font-size: .92rem; }
.site-foot a { color: var(--platinum); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.foot-grid .foot-title { font: 500 .75rem/1 var(--ui); letter-spacing: .28em; text-transform: uppercase; color: var(--platinum); margin-bottom: 1.25rem; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: .6rem; }
.foot-brand .logo { --logo-h: 150px; margin-bottom: 1.75rem; }
.foot-brand p { max-width: 24em; }
.foot-legal { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .8rem; }

/* ARTICLE AND SERVICE PAGES */
.article { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.article > h1 { font-size: clamp(3rem, 6vw, 5.4rem); }
.article-body { max-width: 46rem; }
.article-body h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; }
.article-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-top: 3rem; }
.article-body h3 { margin-top: 2rem; }
.article-body p, .article-body li { max-width: none; }
.article-body li { margin-bottom: .55rem; }
.article-body a { text-decoration: underline; }
.crumbs { font: 500 .78rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 2rem; }
.crumbs a { text-decoration: none; }
.byline { color: var(--muted); font-size: .95rem; }
.answer { background: var(--ivory-deep); border-left: 2px solid var(--graphite); padding: 1.6rem 1.8rem; margin: 2rem 0 2.5rem; }
.answer p { margin: 0; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; padding: 1.3rem 0; font: 400 1.4rem/1.25 var(--display); }
.faq-list details p { margin-top: 0; color: var(--muted); }
.article-call { background: var(--navy); color: var(--platinum); padding: clamp(2rem, 5vw, 3.5rem); margin-top: 4rem; }
.article-call h2 { margin-top: 0; color: var(--platinum); }
.article-call p { color: var(--silver); }
.article-call .btn-solid { background: var(--platinum); color: var(--navy); border-color: var(--platinum); }
.article-call .btn-solid:hover { background: transparent; color: var(--platinum); }
.article-call .btn-line:hover span { color: var(--navy); }
.post-list.plain .post-link { border-top: 1px solid var(--graphite); padding-top: 1.5rem; }

/* Keep Bodoni's hairlines visible at display sizes. Placed after the `font:`
   shorthands above, which reset optical sizing. */
h1, h2, .cap-name, .statement, .queries li, .post-link h3, .statement-band p.big,
.pricing-note strong, .route li::before, .faq-list summary, .intro p.statement {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 24;
}

/* REVEAL ON SCROLL */
/* Content is always visible; scroll motion is only a short slide, so a
   missed trigger can never leave an empty section. */
.motion .reveal { transform: translateY(24px); transition: transform .9s var(--ease); }
.motion .reveal.in { transform: none; }
.motion .reveal.d1 { transition-delay: .1s; } .motion .reveal.d2 { transition-delay: .2s; } .motion .reveal.d3 { transition-delay: .3s; }

/* Contrail: a silver flight path that draws itself down the page as you scroll */
.flight { position: relative; }
.flight > section { position: relative; z-index: 1; }
.contrail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.contrail path { fill: none; stroke: var(--silver-shadow); vector-effect: non-scaling-stroke; }
.contrail .trail-base { stroke-width: 1; stroke-opacity: .25; stroke-dasharray: 2 6; }
.contrail .trail { stroke-width: 1.4; stroke-opacity: .8; }

/* Statement: words light up as you scroll through them */
.word-light .w { opacity: .2; transition: opacity .25s linear; }

/* Tables in insights posts (rendered by ops/scripts/git_publish.py) */
.table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line); }
.table-wrap th { font-weight: 600; border-bottom-color: var(--graphite); }

/* Homepage FAQ (aviation marketing agency questions) */
.faq-home .wrap > .faq-list, .faq-home h2 { max-width: 46rem; }
.faq-home h2 { margin-bottom: 1.5rem; }

/* Free AI visibility check form */
.check-form { margin: 1.5rem 0 1rem; display: grid; gap: 1.25rem; }
.check-form .field { display: grid; gap: .45rem; }
.check-form label { font: 500 .78rem/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; }
.check-form label span { text-transform: none; letter-spacing: 0; color: var(--muted); }
.check-form input, .check-form select, .check-form textarea { font: 400 1rem/1.4 var(--ui); padding: .9rem 1rem; border: 1px solid rgba(17,25,35,.45); border-radius: 0; background: #fff; color: var(--graphite); width: 100%; }
.check-form input:focus, .check-form select:focus, .check-form textarea:focus { outline: 2px solid var(--graphite); outline-offset: 1px; border-color: var(--graphite); }
.check-form .privacy { color: var(--muted); font-size: .9rem; margin: 0; }
.check-form button { justify-self: start; cursor: pointer; }
.check-form .hp { position: absolute; left: -9999px; }
.check-form .form-status { margin: 1rem 0 0; font-size: .95rem; }

/* RESPONSIVE */
@media (max-width: 1000px) {
  .asking .wrap, .pricing-note { grid-template-columns: 1fr; }
  .tile-a, .tile-b { grid-column: span 12; }
  .tile-b .frame { aspect-ratio: 4 / 3; }
  .cap-list a, .cap-list .cap-row { grid-template-columns: 1fr; gap: .7rem; }
  .route { grid-template-columns: 1fr 1fr; }
  .post-list { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* Phones: the standalone monogram, as the kit directs for small headers */
  .site-head .logo-full { display: none; }
  .site-head .logo-mono { display: block; }
  .page main { padding-top: 7rem; }
  .menu-btn { display: block; }
  .site-head { flex-wrap: wrap; gap: 1rem; padding-block: .9rem; }
  .home .site-head:not(.compact) { padding-block: 1.1rem; }
  .site-head.open { background: var(--navy); }
  .site-nav { display: none; width: 100%; flex-direction: column; gap: 0; margin: 0; }
  .site-head.open .site-nav { display: flex; }
  .site-nav a { padding: 1.1rem 0; border-top: 1px solid var(--line-dark); font-size: .85rem; }
  .site-head > .btn { display: none; }
  .route { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand .logo { --logo-h: 128px; }
  .hero-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .word-light .w { opacity: 1 !important; }
  .contrail .trail { stroke-dashoffset: 0 !important; }
}