/* Hero rework, 7 October 2026. Loaded last. Three owner-comparison layouts
   on the same real hero A footage: title, framed, first. Removing this file
   and its <link> returns to the screens-pass hero. */

/* Title card: the headline centred between the towers, like a film title. */
[data-hero-layout=title] .hero{align-items:center}
[data-hero-layout=title] .hero-copy{align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(88px + 2svh) 0 7svh}
[data-hero-layout=title] .hero-eyebrow{justify-content:center}
[data-hero-layout=title] .hero h1{font-size:clamp(64px,min(8.4vw,13svh),150px);line-height:.92;margin:14px 0 0}
[data-hero-layout=title] .hero-description{max-width:620px;margin:clamp(14px,2.4svh,26px) auto clamp(20px,3.4svh,32px)}
[data-hero-layout=title] .hero-description .desktop-break{display:none}
[data-hero-layout=title] .hero-actions{justify-content:center}
/* A wide, soft shade behind the text: no visible oval edge on the footage. */
[data-hero-layout=title] .hero-overlay{background:radial-gradient(ellipse 75% 65% at 50% 52%,#0202049e 0%,#02020466 45%,#02020414 80%,#02020400 100%),linear-gradient(180deg,#02020466 0%,#02020400 22%,#02020400 78%,#020204 100%)}
[data-hero-layout=title] .hero-scroll{justify-content:center}

/* Framed: the headline on clean dark, the footage bright inside a large
   rounded frame, and four real films one click away. */
[data-hero-layout=framed] .hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:100svh;padding:calc(88px + clamp(4px,1.6svh,20px)) clamp(14px,2.2vw,32px) clamp(14px,2.2vw,32px);gap:clamp(18px,3.4svh,40px);background:#020204}
[data-hero-layout=framed] .hero-copy{order:1;align-self:center;width:min(1280px,calc(100% - 64px));display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);grid-template-areas:"eyebrow ." "title desc" "title actions";column-gap:clamp(32px,5vw,80px);align-items:end;padding:0}
[data-hero-layout=framed] .hero-eyebrow{grid-area:eyebrow}
[data-hero-layout=framed] .hero h1{grid-area:title;font-size:clamp(56px,min(7.4vw,11.5svh),132px);line-height:.92;margin:10px 0 0}
[data-hero-layout=framed] .hero-description{grid-area:desc;margin:0 0 22px;font-size:clamp(16px,1.3vw,19px);color:#C0C8D7}
[data-hero-layout=framed] .hero-description .desktop-break{display:none}
[data-hero-layout=framed] .hero-actions{grid-area:actions;gap:14px;flex-wrap:nowrap}
/* flex-basis 0: the frame takes the space left under the copy, never the
   video's own 16:9 height. The hero is one screen when the copy fits and
   grows on short phones rather than clipping the frame. */
[data-hero-layout=framed] .hero-media{position:relative;inset:auto;order:2;flex:1 1 0;min-height:clamp(220px,34svh,420px);width:auto;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;z-index:0}
[data-hero-layout=framed] .hero-overlay,[data-hero-layout=framed] .hero-scroll{display:none}
.hero-chapters{display:none}
[data-hero-layout=framed] .hero-chapters{position:absolute;z-index:2;left:calc(clamp(14px,2.2vw,32px) + 18px);bottom:calc(clamp(14px,2.2vw,32px) + 18px);display:flex;gap:6px;padding:8px;border-radius:16px;background:#020204b8;border:1px solid #ffffff1f}
.hero-chapter{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:11px;color:#F3F1EB;font-size:13px;line-height:1.3;transition:background .2s}
.hero-chapter:hover{background:#ffffff14}
.hero-chapter:focus-visible{outline:2px solid #F3F1EB;outline-offset:2px}
.hero-chapter-thumb{width:46px;height:46px;flex:none;border-radius:8px;overflow:hidden;background:#111}
.hero-chapter-thumb .media-picture,.hero-chapter-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero-chapter-text{display:flex;flex-direction:column;color:#C0C8D7}
.hero-chapter-text strong{color:#F3F1EB;font-weight:650}

/* Footage first: the opening screen is the film itself; the statement
   follows as its own screen. */
[data-hero-layout=first] .hero{align-items:end}
[data-hero-layout=first] .hero-overlay{background:linear-gradient(180deg,#0202048c 0%,#02020400 22%,#02020400 62%,#020204e6 100%)}
.hero-caption{position:relative;z-index:5;align-self:end;padding-bottom:clamp(64px,10svh,110px)}
.hero-caption .hero-eyebrow{margin:0 0 10px}
.hero-caption-line{margin:0;max-width:520px;color:#F3F1EB;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.statement{min-height:100svh;display:flex;align-items:center;background:#020204;padding-block:var(--screen-pad)}
.statement-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);grid-template-areas:"eyebrow ." "title desc" "title actions";column-gap:clamp(32px,5vw,80px);align-items:end}
.statement-copy .hero-eyebrow{grid-area:eyebrow;display:none}
.statement h1{grid-area:title;margin:0;color:#F3F1EB;font-weight:800;font-size:clamp(72px,min(11vw,19svh),210px);line-height:.88;letter-spacing:-.065em}
.statement .hero-description{grid-area:desc;margin:0 0 22px;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:#C0C8D7}
.statement .hero-description .desktop-break{display:none}
.statement .hero-actions{grid-area:actions;display:flex;gap:14px;flex-wrap:nowrap}

/* Lucide process icons on the main page: larger, cobalt accents. */
.process-illustration:has(.lc-art){width:clamp(84px,12svh,108px)}

@media(max-width:900px){
  [data-hero-layout=framed] .hero-copy,.statement-copy{grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "desc" "actions";width:calc(100% - 36px)}
  [data-hero-layout=framed] .hero-description,.statement .hero-description{margin:16px 0 20px}
  [data-hero-layout=framed] .hero-actions,.statement .hero-actions{flex-wrap:wrap}
}
@media(max-width:700px){
  [data-hero-layout=title] .hero h1{font-size:clamp(52px,15vw,80px)}
  [data-hero-layout=title] .hero-actions{width:min(100%,320px);margin-inline:auto;align-items:stretch}
  [data-hero-layout=title] .hero-actions .pill{width:100%;justify-content:space-between}
  /* Phones: an even top-to-bottom shade instead of the radial one. */
  [data-hero-layout=title] .hero-overlay{background:linear-gradient(180deg,#02020473 0%,#0202046b 28%,#02020480 58%,#020204c4 86%,#020204 100%)}
  [data-hero-layout=framed] .hero{padding:calc(67px + 10px) 10px 10px}
  [data-hero-layout=framed] .hero h1{font-size:clamp(50px,14.6vw,76px)}
  [data-hero-layout=framed] .hero-chapters{left:20px;right:20px;bottom:20px;justify-content:space-between}
  .hero-chapter{padding:0}
  .hero-chapter-text{display:none}
  .statement h1{font-size:clamp(64px,19vw,104px)}
}

/* Pause control: no floating button (owner, 7 Oct). It lives in the footer as
   a quiet text control, keeping a pause mechanism for WCAG 2.2.2. */
.motion-controls.footer-motion{position:static;display:flex;justify-content:flex-start;width:auto;padding:0 0 22px;z-index:auto}
.footer-motion .motion-toggle{background:none;border:0;box-shadow:none;padding:6px 0;min-height:32px;color:#A6ABAD;font-size:13px}
.footer-motion .motion-toggle:hover{background:none;color:#F3F1EB}
.footer-motion .motion-toggle:focus-visible{outline:2px solid #F3F1EB;outline-offset:3px;border-radius:4px}

/* Audit fixes, 7 October 2026. Sections are one screen and the header is not
   sticky, so menu links should land exactly on the section top. */
html{scroll-padding-top:0}
/* Smallest phones: the hero already offers "Start a project"; drop the header
   copy so the menu button stays on screen. */
@media(max-width:360px){.site-header .project-pill{display:none}}

/* FAQ, 7 October 2026: plain answers from approved copy, native disclosures. */
.faq-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-intro h2{font-size:var(--h2);font-weight:800;letter-spacing:-.055em;line-height:1.02;margin:0}
.faq-intro>p:last-child{margin:22px 0 0;max-width:380px;color:#C0C8D7;font-size:17px;line-height:1.6}
.faq-intro a{color:#F3F1EB;text-decoration:underline;text-decoration-color:#365BFF;text-decoration-thickness:2px;text-underline-offset:5px}
.faq-intro a:hover{text-decoration-color:#F3F1EB}
.faq-list{border-top:1px solid #ffffff24}
.faq-item{border-bottom:1px solid #ffffff24}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(16px,2.3svh,22px) 0;cursor:pointer;list-style:none;font-size:clamp(17px,1.4vw,20px);font-weight:650;color:#F3F1EB}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:#fff}
.faq-item summary:focus-visible{outline:2px solid #F3F1EB;outline-offset:4px;border-radius:4px}
.faq-icon{position:relative;width:16px;height:16px;flex:none}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:2px;background:#365BFF;transition:transform .25s var(--ease)}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon::after{transform:rotate(0deg)}
.faq-item p{margin:0 0 clamp(16px,2.4svh,22px);max-width:620px;color:#C0C8D7;font-size:16px;line-height:1.65}
@media(min-width:901px) and (min-height:600px){.faq-section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:var(--screen-pad)}}
@media(max-width:900px){.faq-layout{grid-template-columns:1fr;gap:28px}}
@media(prefers-reduced-motion:reduce){.faq-icon::before,.faq-icon::after{transition:none}}
.faq-item p a{color:#F3F1EB;text-decoration:underline;text-decoration-color:#365BFF;text-decoration-thickness:2px;text-underline-offset:5px}
.faq-item p a:hover{text-decoration-color:#F3F1EB}