/* The public homepage (homepage.mjs). Everything is scoped to .home-* so it
   never touches the workspace. Brand ivory and burgundy; Marcellus for
   headings, Archivo for everything else. One spacing scale for every section. */
.home-page{--h-ivory:#FAF6F0;--h-sand:#F1E9E0;--h-ink:#2A1A1F;--h-muted:#6B5560;--h-line:#E4D8D0;--h-chrome:#300916;--h-deep:#1F050D;--h-rule:#5E2A3C;--h-soft:#E6C7D1;--h-dim:#B98594;
  --h-edge:clamp(20px,5vw,80px);--h-max:1440px;--h-sec:clamp(64px,10vw,120px);background:var(--h-ivory);color:var(--h-ink);color-scheme:light}
.home-page body,body.home-page{background:var(--h-ivory)}
.home-bar,.home,.home-foot{font-family:'Archivo',Arial,sans-serif}
.home h1,.home h2,.home h3{font-family:'Marcellus',Georgia,serif;font-weight:400;letter-spacing:-.01em;color:var(--h-ink);margin:0;text-wrap:balance}
.home p{margin:0}
.home-wrap,.home-hero,.home-tech,.home-routes,.home-close{box-sizing:border-box}

/* Header */
.home-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:0 var(--h-edge);background:var(--h-chrome);color:#F7EAE2}
.home-brand img{display:block;width:140px;height:auto}
.home-nav{display:flex;align-items:center;gap:28px}
.home-nav a{color:#F7EAE2;text-decoration:none;font-size:15px;font-weight:500}
.home-nav a:not(.home-btn):hover{text-decoration:underline}

/* Buttons: one primary, one quieter outline. */
.home-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:12px;border:1px solid var(--h-chrome);background:var(--h-chrome);color:#FFF7F0!important;font-size:16px;font-weight:600;text-decoration:none}
.home-btn:hover{background:#63253A;border-color:#63253A}
.home-btn-ghost{background:transparent;color:var(--h-chrome)!important;border-color:#C9AFB7}
.home-btn-ghost:hover{background:#F3E7E3;border-color:var(--h-chrome)}
.home-btn-light{background:var(--h-ivory);border-color:var(--h-ivory);color:var(--h-chrome)!important}
.home-btn-light:hover{background:#FFFFFF;border-color:#FFFFFF}
.home-link{color:var(--h-chrome);font-size:16px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.home-link:hover{text-decoration-thickness:2px}
.home-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.home a:focus-visible,.home-bar a:focus-visible,.home button:focus-visible{outline:3px solid #B7476A;outline-offset:3px}

/* 01 Hero: the sign-in page's burgundy band. Reel left, headline and the
   four steps right; every step line is always set, so nothing jumps. */
.home-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:clamp(40px,4vw,64px);align-items:start;padding:clamp(48px,6vw,88px) var(--h-edge) clamp(56px,7vw,96px);background:var(--h-chrome);color:#FAF6F0}
/* Soft velvet in the same burgundy, masked in from below so the band has body
   under the reel and steps while the headline sits on the flat colour. */
.home-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/home-assets/home-velvet.jpg) center/cover;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
.home-hero h1{grid-column:1/-1}
.home-hero>*{min-width:0}
.home-reel-frame{margin:0;overflow:hidden;border-radius:16px;background:#1A0509;aspect-ratio:16/9}
.home-reel-frame video{display:block;width:100%;height:100%;object-fit:cover}
/* Desktop: the reel sits beside the four steps, its top on their top rule; the buttons sit below.
   The frame is always the reel's own 16:9, so nothing at its sides is cropped (stretched to the steps'
   height it lost 15% of its width at 1440px; Katie, 1 Nov). */
@media (min-width:1420px){
 .home-hero-copy{display:contents}
 .home-reel-frame{grid-column:1;grid-row:2;align-self:start;aspect-ratio:16/9}
 .home-reel-steps{grid-column:2;grid-row:2}
 .home-reel-cta{grid-column:2;grid-row:3;margin-top:calc(clamp(28px,2.4vw,40px) - clamp(40px,4vw,64px))}
}
.home-hero h1{color:#FAF6F0;font-size:clamp(40px,5.6vw,96px);line-height:1;letter-spacing:-.025em;text-wrap:balance;margin-bottom:clamp(8px,1.5vw,24px)}
/* On laptop and wider screens the tagline sits on one line (it measures about 19.9em), leaving more room for the reel. */
@media (min-width:1000px){.home-hero h1{font-size:min(4.4vw,96px);white-space:nowrap}}
.home-reel-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--h-rule)}
.home-reel-step{position:relative;padding:14px 0 16px;border-bottom:1px solid var(--h-rule)}
.home-reel-head{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:400 clamp(22px,1.9vw,30px)/1.15 'Marcellus',Georgia,serif}
.home-reel-head b{font-weight:400;color:var(--h-dim);transition:color .35s}
.home-reel-step p{margin-top:6px;font-size:16px;line-height:1.5;color:#A9808D;max-width:46ch;transition:color .35s}
.home-reel-step.is-on .home-reel-head b{color:#FAF6F0}
.home-reel-step.is-on p{color:var(--h-soft)}
.home-reel-head:hover b{color:#F5DFE5}
.home-reel-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.home-reel-bar i{display:block;height:100%;width:0;background:#FAF6F0}
.home-reel-cta .home-btn{background:#FAF6F0;border-color:#FAF6F0;color:var(--h-chrome)!important}
.home-reel-cta .home-btn:hover{background:#F5DFE5;border-color:#F5DFE5}
.home-reel-cta .home-btn-ghost{background:transparent;color:#FAF6F0!important;border-color:var(--h-dim)}
.home-reel-cta .home-btn-ghost:hover{background:#4E1A2C}
@media (prefers-reduced-motion:reduce){.home-reel-head b,.home-reel-step p{transition:none}}

/* 02 The capture story: one dark section, three frames in sequence. */
.home-tech{padding:var(--h-sec) var(--h-edge);background:var(--h-deep);color:#FAF6F0}
.home-tech-head{max-width:760px}
.home-tech h2{color:#FAF6F0;font-size:clamp(32px,3.6vw,56px);line-height:1.06}
.home-tech-head p{margin-top:24px;font-size:18px;line-height:1.55;color:var(--h-soft)}
.home-tech-flow{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);margin:clamp(48px,6vw,80px) 0 0;padding:0}
.home-tech-pic{margin:0 0 24px;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:#2C0A15}
.home-tech-pic img{display:block;width:100%;height:100%;object-fit:cover}
.home-tech h3{color:#FAF6F0;font-size:clamp(24px,2vw,32px);line-height:1.15;padding-top:16px;border-top:1px solid var(--h-rule)}
.home-tech-flow p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--h-soft)}

/* 03 Audiences: one heading, two equal cards with actions on one line. */
.home-routes{padding:var(--h-sec) var(--h-edge)}
.home-routes-head h2{font-size:clamp(32px,3.6vw,56px);line-height:1.06}
.home-routes-head p{margin-top:20px;font-size:18px;line-height:1.55;color:var(--h-muted)}
.home-routes-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.home-routes article{display:flex;flex-direction:column;padding:clamp(28px,3.2vw,48px);border-radius:16px;background:var(--h-sand)}
.home-route-for{font-size:16px;font-weight:600;color:var(--h-chrome)}
.home-routes h3{margin-top:16px;font-size:clamp(26px,2.3vw,36px);line-height:1.12;max-width:20ch}
.home-routes article>p:not(.home-route-for){margin:24px 0 32px;font-size:17px;line-height:1.6;color:var(--h-muted);max-width:52ch}
.home-routes article .home-link{margin-top:auto;align-self:flex-start}

/* 04 Close: typographic, nothing else. */
.home-close{padding:var(--h-sec) var(--h-edge);border-top:1px solid var(--h-line);text-align:left}
.home-close h2{font-size:clamp(40px,5vw,80px);line-height:1.02;letter-spacing:-.02em}
.home-close p{margin-top:24px;font-size:18px;line-height:1.55;color:var(--h-muted);max-width:44ch}
[data-placeholder]{outline:1px dashed transparent}

.home-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:32px var(--h-edge);background:var(--h-chrome);color:var(--h-soft);font-size:15px}
.home-foot img{width:110px;height:auto}
.home-foot nav{display:flex;gap:24px;margin-left:auto}
.home-foot a{color:#FAF6F0;text-decoration:none}
.home-foot a:hover{text-decoration:underline}
.home-foot small{font-size:14px;color:var(--h-dim)}

@media (max-width:900px){
 .home-nav .home-btn{display:none}
 .home-nav a{display:inline-flex;align-items:center;min-height:44px}
 .home-bar{min-height:64px}
 .home-brand img{width:116px}
 .home-btn{min-height:44px;padding:0 18px;font-size:15px}
 .home-hero{grid-template-columns:1fr;gap:28px;padding:40px var(--h-edge) 56px}
 .home-hero-copy{display:contents}
 .home-hero h1{order:-2;font-size:clamp(36px,10vw,46px);text-wrap:balance}
 .home-reel-frame{order:-1;border-radius:12px}
 .home-reel-steps{margin:0}
 .home-actions{margin-top:28px}
 .home-reel-cta{margin-top:0}
 .home-tech-flow{grid-template-columns:1fr;gap:40px}
 .home-routes-cards{grid-template-columns:1fr}
 .home-routes article{padding:28px 24px;border-radius:12px}
 .home-tech-pic{border-radius:12px}
 .home-foot nav{margin-left:0}
}
@media (max-width:420px){.home-bar .home-btn{padding:0 14px}.home-nav{gap:18px}}

.home-close{scroll-margin-top:88px}
.home-close .home-contact-note{font-size:14px}
.home-contact-note a{color:inherit;text-underline-offset:3px}