/* AI Visibility Audit landing page.
   Standalone static page: no framework, no build step. Built this way because the
   main React site still throws hydration errors (#418/#423) that cause dead
   clicks, and this page is a conversion asset that must not inherit them. */

:root{
  --navy:#1F2C47;
  --navy-soft:#26355470;
  --gold:#CC8C33;
  --gold-bright:#E0A64D;
  --cream:#FCFAF8;
  --parchment:#F4EEE2;
  --ink:#2A3145;
  --measure:64rem;
  --pad:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Calibri,sans-serif;
  font-size:clamp(1rem,0.35vw + 0.95rem,1.075rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Cormorant Garamond",Cambria,Georgia,serif;font-weight:500;line-height:1.12;margin:0 0 .6em}
h1{font-size:clamp(2.75rem,7vw,5rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:1.25rem;margin-bottom:.35em}
p{margin:0 0 1.15em}
a{color:inherit}

.wrap{width:min(100% - (var(--pad) * 2),var(--measure));margin-inline:auto}
.narrow{--measure:44rem}
.center{text-align:center}
.small{font-size:.875rem;opacity:.75}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy);padding:.75rem 1rem;z-index:100}
.skip-link:focus{left:.5rem;top:.5rem}

/* Header — matches the main site: fixed, 80px tall, cream with blur and a hairline
   border, 56px logo beside a two-line wordmark, then the same seven nav items in
   the same order. The language selector is omitted because this page is English
   only and a switcher that does nothing is worse than none. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--cream) 95%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid #0000001a;
}
.header-inner{
  width:min(100% - (var(--pad) * 2),86rem);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;height:5rem;
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.brand img{height:3.5rem;width:auto;object-fit:contain;display:block}
.brand-text{display:none;flex-direction:column;line-height:1.15}
@media (min-width:40rem){.brand-text{display:flex}}
.brand-name{font-family:"Cormorant Garamond",Cambria,Georgia,serif;font-weight:600;font-size:1.125rem;color:var(--ink)}
.brand-sub{font-size:.7rem;letter-spacing:.08em;color:#00000099}

.site-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:1.35rem;list-style:none;margin:0;padding:0}
.nav-list > li{position:relative}
.nav-list > li > a{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.875rem;color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:.5rem 0;transition:color .2s;
}
.nav-list > li > a:hover{color:#8a5d18}
.nav-list a[aria-current="page"]{color:#8a5d18;font-weight:600}
.chev{width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6}

/* Dropdowns open on hover and on keyboard focus, so they are reachable by tab. */
.sub{
  position:absolute;top:100%;left:-.75rem;min-width:15rem;
  background:var(--cream);border:1px solid #0000001a;border-radius:2px;
  box-shadow:0 12px 32px #1f2c4720;
  list-style:none;margin:0;padding:.4rem 0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.has-sub:hover > .sub,.has-sub:focus-within > .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:.5rem .95rem;font-size:.85rem;color:var(--ink);text-decoration:none}
.sub a:hover{background:var(--parchment);color:#8a5d18}

/* Hamburger below the desktop breakpoint. */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:2.75rem;height:2.75rem;margin-left:auto;
  background:none;border:0;cursor:pointer;padding:0;
}
.nav-toggle span{display:block;height:2px;width:1.35rem;margin-inline:auto;background:var(--ink);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:72rem){
  .site-nav{
    position:fixed;inset:5rem 0 auto;margin:0;
    background:var(--cream);border-bottom:1px solid #0000001a;
    max-height:calc(100vh - 5rem);overflow-y:auto;
    display:none;
  }
  .site-nav.is-open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad) 1.25rem}
  .nav-list > li > a{padding:.85rem 0;border-bottom:1px solid #0000000f}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 .5rem .9rem}
  .sub a{padding:.5rem 0;font-size:.82rem;color:#000000b3}
  .nav-cta{margin-top:.9rem}
  .nav-cta .btn{width:100%}
  .chev{display:none}
}
@media (min-width:72.0625rem){ .nav-toggle{display:none} }

/* The header is fixed, so the hero starts beneath it. */
.hero{padding-top:calc(5rem + clamp(2rem,6vh,4rem))}

.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:.8rem 1.5rem;border:1px solid transparent;border-radius:2px;
  font-size:.9375rem;font-weight:600;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  transition:background-color .25s,color .25s,border-color .25s;
}
.btn-primary{background:var(--gold);color:#1a1a1a}
.btn-primary:hover{background:var(--gold-bright)}
.btn-quiet{background:transparent;color:var(--ink);border-color:#0000002e;padding:.55rem 1.1rem;font-size:.875rem}
.btn-quiet:hover{border-color:var(--gold);color:#8a5d18}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.85}
.btn-ghost:hover{opacity:1;border-color:var(--gold);color:var(--gold)}
.btn-lg{padding:1rem 2rem;font-size:1rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Media: aspect ratio is reserved up front so nothing shifts when video loads. */
.media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy);border-radius:2px}
.media img.poster,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media video{opacity:0;transition:opacity .5s}
.media video.is-playing{opacity:1}
.media.is-clickable{cursor:pointer}

.hero{padding-block:0 clamp(3rem,7vw,6rem);background:var(--navy);color:var(--cream)}
.media-hero{aspect-ratio:21/9;border-radius:0}
@media (max-width:48rem){.media-hero{aspect-ratio:4/3}}
.hero-copy{padding-top:clamp(2rem,5vw,3.5rem)}
.hero h1{color:var(--cream)}
.lede{font-size:clamp(1.075rem,1.1vw + .85rem,1.3rem);max-width:44rem;color:#FCFAF8d9}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0 .75rem}
.tertiary{font-size:.9rem;opacity:.8}
.tertiary a{text-decoration:underline;text-underline-offset:3px}

/* Faint spec line: the "1-inch CMOS" treatment. Kept at 4.5:1 minimum. */
.spec{font-size:.8125rem;letter-spacing:.04em;color:#0000008f;margin-top:1.5rem}
.band-dark .spec{color:#FCFAF8b8}
.hero .spec{color:#FCFAF8c9;text-shadow:0 1px 8px #1F2C47f0}

.band{padding-block:clamp(3.5rem,8vw,6.5rem)}
.band-parchment{background:var(--parchment)}
.band-dark{background:var(--navy);color:var(--cream)}
.band-dark h2,.band-dark h3{color:var(--cream)}
.wide{max-width:46rem}

.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:56rem){
  .split{grid-template-columns:1fr 1fr}
  .split-reverse .split-copy{order:2}
}
.split-copy p:last-of-type{margin-bottom:0}

.mirror{list-style:none;margin:0 0 1.75rem;padding:0}
.mirror li{position:relative;padding:.7rem 0 .7rem 1.75rem;border-bottom:1px solid #0000000f}
.mirror li::before{content:"";position:absolute;left:0;top:1.25rem;width:.5rem;height:.5rem;border-radius:50% 50% 50% 0;background:var(--gold);transform:rotate(-45deg)}
.close{font-weight:600}

.cols3{display:grid;gap:1.75rem;grid-template-columns:1fr;margin-top:2.5rem}
@media (min-width:48rem){.cols3{grid-template-columns:repeat(3,1fr)}}
.cols3 p{margin:0;opacity:.85;font-size:.95rem}

.media-row{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2.5rem}
@media (min-width:48rem){.media-row{grid-template-columns:1fr 1fr}}

.ticks{list-style:none;margin:0 0 1.5rem;padding:0}
.ticks li{position:relative;padding:.35rem 0 .35rem 1.5rem}
.ticks li::before{content:"·";position:absolute;left:.35rem;color:var(--gold);font-weight:700}

/* Anything still awaiting Da's sign-off is visibly tagged so it cannot ship quietly. */
[data-draft]{position:relative;display:inline-block;border-left:3px solid #C8891C;background:#C8891C1a;padding:.5rem .75rem;font-size:.9rem}
[data-draft]::before{content:"DRAFT";display:block;font-size:.65rem;letter-spacing:.14em;font-weight:700;color:#8a5d18;margin-bottom:.15rem}

.cards{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:52rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--cream);border:1px solid #0000001a;padding:1.5rem}
.card .evidence{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;background:#1f2c470d;padding:.6rem .7rem;margin:.75rem 0;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.card .fix{margin:0;font-size:.95rem}

.dare{position:relative;overflow:hidden}
.media-bg{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;opacity:.35}
.dare-copy{position:relative}

.faq{border-top:1px solid #0000001a}
.faq details{border-bottom:1px solid #0000001a}
.faq summary{cursor:pointer;padding:1.1rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .answer{padding:0 0 1.25rem;max-width:44rem}

.transcript{margin-top:2.5rem;border-top:1px solid #FCFAF826;padding-top:1.25rem}
.transcript summary{cursor:pointer;font-weight:600}
.transcript dl{margin:1rem 0 0}
.transcript dt{font-weight:600;margin-top:.85rem}
.transcript dd{margin:.15rem 0 0;opacity:.85}

.site-footer{background:var(--navy);color:#FCFAF8b8;padding-block:2.5rem;font-size:.9rem;border-top:1px solid #FCFAF81a}
.site-footer a{color:var(--cream)}

.lightbox{position:fixed;inset:0;z-index:200;background:#0b1220f2;display:grid;place-items:center;padding:var(--pad)}
.lightbox[hidden]{display:none}
.lightbox video{width:min(100%,72rem);max-height:85vh;background:#000}
.lightbox-close{position:absolute;top:1rem;right:1.25rem;background:none;border:0;color:var(--cream);font-size:2.25rem;line-height:1;cursor:pointer;padding:.25rem .5rem}

/* Honour reduced motion: nothing autoplays, posters stand in. */
@media (prefers-reduced-motion:reduce){
  .media video{display:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ---------- PATCH 2026-08-23: hero restructure and graceful media ---------- */

/* P0.1 + DJI-style hero — the media is the background across the full width and
   the copy sits on top of it. The art is composed subject-right, upper-left dark,
   so the headline lands in that dark space. A scrim guarantees contrast whatever
   the art or video underneath, and everything still fits the first viewport at
   1440x900 and 390x844. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100svh,54rem);
  display:flex;align-items:center;
  padding-block:clamp(4.5rem,10vh,7rem) clamp(2.5rem,6vh,4rem);
  background:var(--navy);
}
.hero-media{
  position:absolute;inset:0;z-index:-2;
  aspect-ratio:auto;height:100%;width:100%;border-radius:0;
}
.hero-media img.poster,.hero-media video{object-fit:cover;object-position:70% 50%}

/* Dark on the left where the words are, clear on the right where the art is. */
.hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,#1F2C47f2 0%,#1F2C47e0 34%,#1F2C4799 56%,#1F2C4726 78%,#1F2C4700 100%),
    linear-gradient(to top,#1F2C47cc 0%,#1F2C4700 42%);
}
@media (max-width:60rem){
  /* Narrow screens cannot dodge the art, so the scrim goes flat and heavier. */
  .hero-scrim{background:linear-gradient(to bottom,#1F2C47e6 0%,#1F2C47cc 45%,#1F2C47f2 100%)}
  .hero-media img.poster,.hero-media video{object-position:60% 45%}
}
.hero .wrap{--measure:78rem;position:relative;z-index:1}
.hero-copy{max-width:38rem}
.hero h1{margin-bottom:.3em}
.hero .lede{max-width:34rem}
.hero .cta-row{margin:1.5rem 0 .5rem}

/* P0.2 — the secondary CTA is an outline button, never a third gold one. */
.btn-outline{background:transparent;color:var(--cream);border-color:#FCFAF866}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:.65rem 1.15rem;font-size:.875rem;min-height:44px}

/* P0.4 — a section whose media never arrives must look designed, not degraded.
   The media container removes itself and the copy takes the full width. */
.media[data-optional].is-empty{display:none}
.split.is-single{grid-template-columns:1fr}
.split.is-single .split-copy{max-width:46rem;margin-inline:auto;text-align:left}
.media-row.is-empty{display:none}

/* P0.3 — the process line now carries real values, so it is ordinary copy. */
.process{font-size:.95rem;font-weight:600}

/* P1.4 — footer is a real exit, not a dead end. */
.footer-links{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.75rem}
.footer-links a{font-size:.875rem;text-decoration:underline;text-underline-offset:3px}

/* Hero video plays as the page background, so it must sit behind the scrim and
   fade in only once it has frames — otherwise the poster flashes to black. */
.hero-media video{opacity:0;transition:opacity .6s ease}
.hero-media video.is-playing{opacity:1}
.transcript-list{margin:.75rem 0 0;padding-left:1.25rem}
.transcript-list li{margin:.3rem 0;opacity:.9}

/* Film play surfaces — the poster is the button. Text links in the same place
   were live and correct but went unnoticed, so the affordance is now visual. */
.media.is-film{cursor:pointer}
.media.is-film::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,#1F2C47b3 0%,#1F2C4700 55%);
  opacity:.9;transition:opacity .25s;pointer-events:none;
}
.media.is-film:hover::after{opacity:1}
.play-badge{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.6rem .95rem .6rem .7rem;
  background:#FCFAF8f2;color:#1F2C47;border:0;border-radius:2px;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  box-shadow:0 6px 20px #1f2c4740;transition:background .2s,transform .2s;
}
.play-badge:hover{background:var(--cream);transform:translateY(-1px)}
.play-badge em{font-style:normal;font-weight:400;opacity:.65}
.play-icon{
  width:1.5rem;height:1.5rem;flex:0 0 auto;border-radius:50%;
  background:var(--gold);position:relative;
}
.play-icon::before{
  content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-left:.45rem solid #1F2C47;border-top:.3rem solid transparent;border-bottom:.3rem solid transparent;
}
@media (max-width:40rem){
  .play-badge{left:.6rem;bottom:.6rem;font-size:.78rem;padding:.5rem .75rem .5rem .55rem}
}