:root{
  --black:#050505;
  --soft-black:#0d0d0d;
  --white:#fff;
  --paper:#f4f1ea;
  --red:#bb1e2d;
  --green:#315c2b;
  --line:rgba(255,255,255,.82);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;background:var(--black);color:#fff;font-family:Georgia,"Times New Roman",serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

.masthead{background:#050505;position:relative;z-index:50;padding:18px 22px 0;border-bottom:1px solid #292929}
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;max-width:100%;margin:0 auto}
.brand-eagles{width:220px;height:118px;object-fit:cover;object-position:center;background:#000;mix-blend-mode:screen;filter:contrast(1.35) brightness(1.15)}
.brand-name{font-size:clamp(27px,5vw,44px);font-weight:700;letter-spacing:.02em;line-height:1;text-align:center;white-space:nowrap}
.action-row{display:flex;justify-content:center;align-items:center;gap:12px;margin:18px auto 13px;flex-wrap:wrap}
.icon-btn,.join-top{height:58px;border:3px solid #fff;display:grid;place-items:center;background:#050505}
.icon-btn{width:58px;border-radius:5px}
.icon-btn svg{width:31px;height:31px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:nth-child(2) svg{fill:#fff;stroke:none}
.join-top{padding:0 27px;font-size:28px;font-weight:700;letter-spacing:.02em;border-radius:3px}
.main-nav{display:flex;justify-content:center;gap:clamp(16px,4.5vw,46px);font-weight:700;font-size:clamp(22px,4vw,34px);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{padding:0 0 18px;position:relative}
.main-nav a.active::after{content:"";position:absolute;height:6px;background:#fff;left:0;right:0;bottom:0}

.hero{min-height:760px;height:min(82vh,900px);position:relative;overflow:hidden;border-bottom:1px solid #222}
.video-stack,.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-video{object-fit:cover;opacity:0;transition:opacity 1.1s ease;filter:grayscale(1) contrast(1.06)}
.hero-video.is-active{opacity:1}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.04) 45%,rgba(0,0,0,.7) 100%);z-index:1}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;padding:44px 20px 28px}
.hero-join{border:3px solid #fff;background:#050505;padding:15px 30px;font-size:clamp(26px,4.8vw,43px);font-weight:700;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.hero-spacer{flex:1}
.hero-kicker{text-align:center;font-weight:700;letter-spacing:.13em;font-size:clamp(15px,2.5vw,24px);text-shadow:0 2px 12px #000;margin:0 0 14px}
.video-dots{display:flex;gap:12px}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid white;background:transparent;padding:0;cursor:pointer}
.dot.active{background:#fff}

.story{display:grid;grid-template-columns:1fr 1fr;min-height:530px;border-bottom:1px solid #777}
.story.reverse .story-copy{order:2}
.story.reverse .story-image{order:1}
.story-copy{padding:52px clamp(28px,6vw,78px);align-self:center}
.story h1,.story h2,.sovereignty-banner h2,.join-section h2,.faq-section h2,.contact-section h2{font-size:clamp(34px,4.8vw,62px);line-height:.98;margin:0 0 14px;font-weight:700;letter-spacing:-.02em}
.story p{font-size:clamp(18px,2vw,25px);line-height:1.24;margin:15px 0}
.story-dark{background:#080808;color:#fff}
.story-light{background:#f4f1ea;color:#080808}
.red-rule{display:block;width:70px;height:4px;background:var(--red);margin:14px 0 22px}
.red-rule.centered{margin:14px auto 24px}
.story-image{min-height:500px;background-position:center;background-size:cover;filter:grayscale(.78) contrast(1.05)}
.fire-image{background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.18)),url('assets/images/powwow.jpg');background-position:center center}
.circle-image{background-image:url('assets/images/rounddance.jpg');background-position:center center}
.family-image{background-image:url('assets/images/family.jpg');background-position:center center}
.choice-lines{font-weight:700}

.sovereignty-banner{padding:38px 22px 35px;text-align:center;background:#060606;border-bottom:1px solid #666}
.sovereignty-banner h2{font-size:clamp(30px,4.5vw,58px);line-height:1.05}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);min-height:380px}
.quote-card{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px;position:relative;background-size:cover;background-position:center;border-right:1px solid #aaa;isolation:isolate}
.quote-card:last-child{border-right:0}
.quote-card::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.58);z-index:-1}
.q1{background-image:url('assets/images/rounddance.jpg')}
.q2{background-image:url('assets/images/powwow.jpg')}
.q3{background-image:url('assets/images/family.jpg')}
.quote-card blockquote{font-size:clamp(26px,3vw,42px);font-style:italic;font-weight:700;line-height:1.08;margin:0 0 24px;text-shadow:0 2px 8px #000}
.quote-card span{font-weight:700;letter-spacing:.12em;font-size:14px;border-bottom:4px solid var(--red);padding-bottom:10px}

.join-section,.faq-section,.contact-section{padding:80px 20px;background:#0a0a0a;border-top:1px solid #222}
.faq-section{background:#f4f1ea;color:#090909}
.contact-section{background:#080808}
.section-inner{max-width:1100px;margin:0 auto;text-align:center}
.section-inner.narrow{max-width:760px}
.eyebrow{letter-spacing:.18em;font-weight:700;font-size:13px;margin:0 0 13px}
.lead{font-size:22px;line-height:1.4;max-width:700px;margin:0 auto 32px}
.netlify-form{display:grid;gap:15px;text-align:left;margin-top:28px}
.netlify-form label{font-size:13px;font-weight:700;letter-spacing:.13em}
.netlify-form input,.netlify-form textarea{width:100%;margin-top:8px;background:transparent;border:2px solid currentColor;color:inherit;padding:14px 15px;border-radius:0;outline:none}
.netlify-form textarea{resize:vertical}
.netlify-form button{background:#050505;color:#fff;border:3px solid #fff;padding:15px 22px;font-weight:700;font-size:21px;cursor:pointer}
.faq-section .netlify-form button{border-color:#050505}
.hidden{position:absolute!important;left:-9999px!important}
.faq-section details{border-top:2px solid #111;text-align:left;padding:17px 0}
.faq-section details:last-of-type{border-bottom:2px solid #111}
.faq-section summary{font-size:22px;font-weight:700;cursor:pointer}
.faq-section details p{font-size:18px;line-height:1.4}

footer{padding:30px 35px 24px;background:#050505;border-top:1px solid #333}
.footer-brand{font-size:27px;font-weight:700;margin-bottom:20px}
footer nav{display:flex;gap:28px;flex-wrap:wrap;font-weight:700}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #333;margin-top:28px;padding-top:18px;font-size:12px;letter-spacing:.08em;color:#bbb}

@media (min-width:1000px){
  .masthead{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand actions" "brand nav";align-items:center;padding:16px 48px 0;gap:0 30px}
  .brand{grid-area:brand;align-items:flex-start;margin:0}.brand-eagles{width:150px;height:78px}.brand-name{font-size:37px}.action-row{grid-area:actions;margin:0 0 8px}.main-nav{grid-area:nav;justify-content:flex-end;font-size:23px;gap:30px}.main-nav a{padding-bottom:14px}
}

@media (max-width:760px){
  .masthead{padding:12px 12px 0}
  .brand-eagles{width:175px;height:100px}
  .brand-name{font-size:31px}
  .action-row{gap:8px;margin-top:14px}
  .icon-btn{width:48px;height:48px;border-width:2px}.icon-btn svg{width:26px;height:26px}.join-top{height:48px;padding:0 18px;font-size:22px;border-width:2px}
  .main-nav{font-size:22px;gap:20px;justify-content:flex-start;padding:0 18px}
  .main-nav a{padding-bottom:14px}.main-nav a.active::after{height:4px}
  .hero{min-height:670px;height:71vh}.hero-content{padding-top:43px}.hero-join{font-size:28px;padding:13px 22px;border-width:2px}
  .story{grid-template-columns:1fr;min-height:0}.story.reverse .story-copy,.story.reverse .story-image{order:initial}.story-copy{padding:42px 24px}.story h1,.story h2{font-size:39px}.story p{font-size:19px}.story-image{min-height:350px}
  .quotes{grid-template-columns:1fr}.quote-card{min-height:310px;border-right:0;border-bottom:1px solid #aaa}
  .join-section,.faq-section,.contact-section{padding:62px 20px}
  .footer-brand{font-size:23px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-video{transition:none}}

/* Hero crest layout — mirrors the reference site's JOIN button above a large crest */
.hero-video{filter:grayscale(1) contrast(.92) brightness(.68)}
.hero-content{padding-bottom:18px}
.hero-spacer{flex:1;min-height:34px}
.hero-crest{
  display:block;
  width:min(62vw,470px);
  max-height:67%;
  object-fit:contain;
  position:relative;
  z-index:3;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.75));
  margin:0 auto 18px;
}
.video-dots{position:absolute;right:18px;bottom:16px;z-index:4}

@media (max-width:760px){
  .hero{min-height:720px;height:74vh}
  .hero-content{padding:42px 12px 12px}
  .hero-join{position:relative;z-index:4}
  .hero-spacer{min-height:46px}
  .hero-crest{width:min(72vw,500px);max-height:64%;margin-bottom:26px}
  .video-dots{right:12px;bottom:10px}
}

/* 2026-10-04 mobile alignment pass — match the compact Second Sons header/hero proportions */
@media (max-width:760px){
  .masthead{
    padding:9px 8px 0;
  }
  .brand-eagles{
    width:158px;
    height:86px;
    object-fit:cover;
  }
  .brand-name{
    font-size:27px;
    line-height:1;
    letter-spacing:.01em;
  }
  .action-row{
    width:100%;
    max-width:344px;
    flex-wrap:nowrap;
    gap:6px;
    margin:11px auto 10px;
  }
  .icon-btn{
    width:43px;
    height:43px;
    flex:0 0 43px;
    border-width:2px;
  }
  .icon-btn svg{
    width:24px;
    height:24px;
  }
  .join-top{
    height:43px;
    padding:0 12px;
    flex:1 1 auto;
    min-width:96px;
    font-size:20px;
    line-height:1;
    border-width:2px;
    white-space:nowrap;
  }
  .main-nav{
    width:100%;
    justify-content:center;
    gap:15px;
    padding:0;
    overflow:visible;
    font-size:20px;
  }
  .main-nav a{
    padding-bottom:12px;
    flex:0 0 auto;
  }

  .hero{
    min-height:390px;
    height:390px;
  }
  .hero-content{
    padding:25px 10px 10px;
  }
  .hero-join{
    font-size:24px;
    line-height:1;
    padding:12px 24px;
    border-width:2px;
    white-space:nowrap;
  }
  .hero-spacer{
    flex:0 0 24px;
    min-height:24px;
    height:24px;
  }
  .hero-crest{
    width:52vw;
    max-width:205px;
    height:auto;
    max-height:none;
    margin:0 auto;
    object-fit:contain;
    clip-path:polygon(0 0,100% 0,100% 61%,98% 68%,93% 76%,85% 84%,74% 91%,62% 96%,50% 100%,38% 96%,26% 91%,15% 84%,7% 76%,2% 68%,0 61%);
    filter:drop-shadow(0 3px 10px rgba(0,0,0,.85));
  }
  .video-dots{display:none}
}

@media (max-width:380px){
  .brand-name{font-size:26px}
  .action-row{max-width:338px;gap:5px}
  .icon-btn{width:41px;height:41px;flex-basis:41px}
  .join-top{height:41px;padding:0 10px;font-size:19px;min-width:92px}
  .main-nav{font-size:19px;gap:13px}
}

/* 2026-10-04 hero motion update — replace mockup-logo video with moving crowd imagery */
.hero-slide{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  will-change:transform, opacity;
  filter:grayscale(1) contrast(1.18) brightness(.52) blur(.2px);
}
.hero-slide-1{background-image:url('assets/images/hero_motion/hero1.jpg');animation:heroRushLeft 7s linear infinite alternate;}
.hero-slide-2{background-image:url('assets/images/hero_motion/hero2.jpg');animation:heroRushRight 6.5s linear infinite alternate;}
.hero-slide-3{background-image:url('assets/images/hero_motion/hero3.jpg');animation:heroRushCenter 7.2s linear infinite alternate;}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 28%,rgba(0,0,0,.58) 100%);}

@keyframes heroRushLeft{
  0%{transform:scale(1.18) translate3d(-10%,0,0)}
  100%{transform:scale(1.28) translate3d(8%,0,0)}
}
@keyframes heroRushRight{
  0%{transform:scale(1.22) translate3d(9%,0,0)}
  100%{transform:scale(1.3) translate3d(-9%,0,0)}
}
@keyframes heroRushCenter{
  0%{transform:scale(1.17) translate3d(0,-4%,0)}
  100%{transform:scale(1.27) translate3d(0,4%,0)}
}

@media (max-width:760px){
  .hero-slide{filter:grayscale(1) contrast(1.2) brightness(.48) blur(.25px)}
}

@media (prefers-reduced-motion:reduce){
  .hero-slide{animation:none}
}

/* Join Us page — compact reference-style application form */
.join-page-body{background:#f4f4f2;color:#090909}
.join-page-body .masthead{color:#fff}
.join-page{min-height:70vh;background:
  linear-gradient(rgba(255,255,255,.91),rgba(255,255,255,.91)),
  url('assets/images/family.jpg') center/cover fixed;
  padding:44px 18px 64px;
}
.join-card{max-width:860px;margin:0 auto}
.join-card h1{font-size:clamp(48px,8vw,72px);line-height:1;margin:0 0 34px;font-weight:400;letter-spacing:.01em}
.reference-join-form{display:grid;gap:24px}
.reference-join-form>label{display:grid;gap:7px;font-size:clamp(25px,4vw,34px);font-weight:700;line-height:1.05}
.reference-join-form input,
.reference-join-form select,
.reference-join-form textarea{
  width:100%;border:2px solid #7d8389;background:#fff;color:#111;border-radius:5px;
  padding:16px 18px;font-size:clamp(22px,3.4vw,31px);font-family:Georgia,"Times New Roman",serif;
  box-shadow:none;outline:none;
}
.reference-join-form input:focus,
.reference-join-form select:focus,
.reference-join-form textarea:focus{border-color:#111}
.reference-join-form select{min-height:70px}
.reference-join-form textarea{resize:vertical;min-height:170px}
.reference-join-form input::placeholder{color:#6a6a6a;opacity:1}
.required{color:#d01818;font-family:Arial,sans-serif}
.consent-box{border:0;padding:8px 0 0;margin:0}
.consent-box legend{font-size:clamp(23px,3.7vw,31px);font-weight:700;margin-bottom:14px}
.check-row{display:flex;align-items:flex-start;gap:13px;font-size:18px;line-height:1.35;font-weight:400}
.check-row input{width:24px;height:24px;flex:0 0 24px;margin-top:1px;accent-color:#111}
.apply-button{justify-self:start;background:#070707;color:#fff;border:2px solid #070707;padding:15px 42px;font-size:28px;font-weight:700;cursor:pointer}
.join-page-body footer{color:#fff}

@media (max-width:760px){
  .join-page{padding:40px 24px 55px;background-attachment:scroll}
  .join-card h1{font-size:55px;margin-bottom:30px}
  .reference-join-form{gap:22px}
  .reference-join-form>label{font-size:25px}
  .reference-join-form input,
  .reference-join-form select,
  .reference-join-form textarea{font-size:23px;padding:15px 17px}
  .reference-join-form select{min-height:64px}
  .consent-box legend{font-size:24px}
  .check-row{font-size:16px}
}

/* 2026-10-04 MEDIA panels — user's YouTube videos as muted moving backgrounds */
.quote-card{overflow:hidden;isolation:isolate}
.quote-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:inherit;pointer-events:none}
.quote-video iframe{
  position:absolute;
  top:50%;left:50%;
  width:178%;height:178%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}
.quote-card::before{z-index:1;background:rgba(0,0,0,.52)}
.quote-card blockquote,.quote-card>span{position:relative;z-index:2}
@media (max-width:760px){
  .quote-video iframe{width:185%;height:185%}
  .quote-card::before{background:rgba(0,0,0,.48)}
}

/* 2026-10-04 center section logos/images */
.fire-image,.circle-image,.family-image{background-position:center center!important;}

/* First Sons Canada Proton Mail contact */
.contact-email{margin:4px 0 24px;font-size:clamp(18px,2.6vw,24px);font-weight:700;word-break:break-word}
.contact-email a,.join-contact-email a,.footer-bottom a{text-decoration:underline;text-underline-offset:4px}
.join-contact-email{text-align:center;margin:24px 0 0;font-size:16px;font-weight:700}

/* 2026-10-04 — cinematic YouTube Shorts hero background */
.hero-youtube-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#000;
  pointer-events:none;
}
.hero-youtube{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  border:0;
  transform:translate(-50%,-50%) scale(1.12);
  transform-origin:center center;
  filter:grayscale(1) contrast(1.28) brightness(.50) saturate(0);
  pointer-events:none;
}
.hero-shade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.28) 66%,rgba(0,0,0,.72) 100%),
    radial-gradient(circle at center,rgba(255,255,255,.02),rgba(0,0,0,.34));
}

@media (max-width:760px){
  .hero-youtube{
    /* A Shorts clip is vertical; enlarge slightly so it behaves like a full-bleed cinematic background. */
    width:118%;
    height:118%;
    transform:translate(-50%,-50%) scale(1.08);
    filter:grayscale(1) contrast(1.32) brightness(.46) saturate(0);
  }
}

/* Netlify form confirmation — keep the visitor on-page and avoid 404 redirects */
.form-status{
  margin:22px 0 0;
  padding:22px 18px;
  border:2px solid currentColor;
  text-align:center;
  font-size:clamp(18px,4vw,26px);
  line-height:1.25;
  font-weight:700;
}
.form-status.success{
  background:#fff;
  color:#050505;
}
.form-status.success strong{
  font-size:1.25em;
}
.form-status.error{
  background:#050505;
  color:#fff;
}
.form-status.error a{
  text-decoration:underline;
}
button[disabled]{opacity:.72;cursor:wait}

/* 2026-10-04 revert hero to the darker, non-branded moving background */
.hero-youtube-wrap,.hero-youtube{display:none!important}
.hero-slide{
  display:block!important;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.18) brightness(.43) blur(.2px)!important;
}
.hero-slide-1{background-image:url('assets/images/hero_motion/hero1.jpg')!important}
.hero-slide-2{background-image:url('assets/images/hero_motion/hero2.jpg')!important}
.hero-slide-3{background-image:url('assets/images/hero_motion/hero3.jpg')!important}
.hero-shade{
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.20) 34%,rgba(0,0,0,.45) 72%,rgba(0,0,0,.78) 100%)!important;
}
@media (max-width:760px){
  .hero-slide{filter:grayscale(1) contrast(1.2) brightness(.38) blur(.25px)!important}
}

/* Form fallback: if Netlify Forms is unavailable, open a prepared Proton Mail message instead of showing an error. */
.form-status.fallback{
  background:#050505;
  color:#fff;
  border-color:#fff;
}
.form-status.fallback a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* 2026-10-05 precision mobile alignment — match Second Sons header/hero spacing */
@media (max-width:760px){
  /* Keep the title centered, but pull the action controls inward from the screen edges. */
  .action-row{
    width:auto;
    max-width:none;
    flex-wrap:nowrap;
    gap:6px;
    margin:11px auto 10px;
  }
  .icon-btn{
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-width:2px;
  }
  .icon-btn svg{
    width:22px;
    height:22px;
  }
  .join-top{
    width:100px;
    height:40px;
    min-width:100px;
    flex:0 0 100px;
    padding:0;
    font-size:20px;
    border-width:2px;
  }

  /* Match the reference navigation width and lower edge. */
  .main-nav{
    gap:18px;
    font-size:20px;
  }
  .main-nav a{
    padding-bottom:15px;
  }

  /* Match the reference hero button and shield proportions. */
  .hero-content{
    padding-top:25px;
  }
  .hero-join{
    font-size:20px;
    line-height:1;
    padding:10px 14px;
    border-width:2px;
  }
  .hero-spacer{
    flex:0 0 24px;
    min-height:24px;
    height:24px;
  }
  .hero-crest{
    width:50vw;
    max-width:198px;
  }
}

@media (max-width:380px){
  .action-row{gap:5px}
  .icon-btn{width:39px;height:39px;flex-basis:39px}
  .join-top{width:98px;min-width:98px;flex-basis:98px;height:39px;font-size:19px}
  .main-nav{gap:16px;font-size:19px}
}

/* 2026-10-05 top mark centering fix — full wings + centered V point */
.brand-eagles{
  display:block;
  object-fit:contain;
  object-position:center center;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:760px){
  .brand-eagles{
    width:158px;
    height:auto;
    max-height:none;
    transform:none;
  }
}

/* First Sons Canada social links — Telegram uses the user-provided official-style icon */
.icon-btn .social-icon{
  width:62%;
  height:62%;
  object-fit:contain;
  display:block;
  border-radius:50%;
}
.icon-btn .telegram-icon{background:#fff;}