/*
 * SMASH v2 "Industrial" (smashrecycling.ca oxblood) shared stylesheet.
 *
 * Loaded by templates/home_ca_v2.html and templates/public/for_auto_recyclers_ca.html.
 * Tokens and shared components were moved here verbatim from the homepage's inline
 * <style> on 2026-10-07. Every component rule is scoped under .v2 with the same
 * specificity the homepage had under .v2home, so the homepage renders identically
 * (proved by a computed-style and pixel diff at 390 and 1440 px before release).
 *
 * Rules: class selectors only for new components (no styling by heading level),
 * square corners, no Bootstrap button colours, none of the old palette.
 * Contrast on --bg: text 16.7:1, muted 9.3:1, gold 10.5:1, gold-soft 13.6:1.
 * --accent is 4.3:1: decorative or large text only.
 */

:root{
  --bg:#170A09; --bg-rgb:23,10,9; --line:rgba(255,226,216,.17); --hair:rgba(232,196,160,.32);
  --text:#F7ECE7; --muted:#C7AFA8;
  --accent:#D6412F; --gold:#D8BC7A; --gold-soft:#E8D8A0;
  --foil:linear-gradient(105deg,#F0DCA4 0%,#C4A25E 38%,#E9D69A 55%,#A8874C 100%);
}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes slam{to{transform:none}}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes reelup{to{transform:translateY(-50%)}}

/* page chrome: oxblood ground, flush content, hide base footer (v2 footer supersedes it) */
html{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden}
.container-fluid.main-content{padding:0;max-width:100%}
footer.footer{display:none}
/* the fixed .bgphoto paints above non-positioned base chrome — lift it */
.commodity-ticker{position:relative;z-index:2;border-bottom:1px solid rgba(232,196,160,.32);background:rgba(23,10,9,.85)}
nav.navbar{position:relative;z-index:5}

/* ---- base type and links ---- */
.v2{font-family:'Archivo','Segoe UI',Arial,sans-serif;color:var(--text)}
.v2 a{color:var(--text);text-decoration:none;transition:color .3s,background .3s}
.v2 a:hover{color:var(--gold-soft)}
.v2 .mono{font-family:'IBM Plex Mono',monospace}
.v2 .anton{font-family:'Anton','Impact','Arial Black',sans-serif}
.v2 .grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- fixed background photo ---- */
.v2 .bgphoto{position:fixed;inset:0;z-index:0;pointer-events:none}
.v2 .bgphoto .im{position:absolute;inset:0;background-size:cover;background-position:center 65%;animation:kb 38s ease-in-out infinite alternate;filter:saturate(.42) contrast(1.08) brightness(.9)}
.v2 .bgphoto .im.ca-im{background-image:url("../images/v2/cat-barrel.jpg")}
.v2 .bgphoto .im.ca-im{background-position:center 50%}
.v2 .bgphoto::after{content:'';position:absolute;inset:0;background:
  radial-gradient(120% 90% at 30% 40%, transparent 30%, rgba(var(--bg-rgb),.55) 100%),
  linear-gradient(100deg,rgba(var(--bg-rgb),.96) 0%,rgba(var(--bg-rgb),.88) 45%,rgba(var(--bg-rgb),.62) 100%)}

/* ---- top nav (anonymous visitors) ---- */
.v2 .v2nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 48px;border-bottom:1px solid var(--line);position:relative;z-index:2;background:rgba(var(--bg-rgb),.5);backdrop-filter:blur(6px)}
.v2 .brand{display:flex;align-items:center;gap:16px}
.v2 .brand img{height:40px;width:auto;filter:saturate(.85)}
.v2 .brand span{font-size:15px;letter-spacing:.32em;font-weight:600}
.v2 .links{display:flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em}
.v2 .links a{padding:13px 24px;color:var(--muted)}
.v2 .links .login{margin-left:10px;border:1px solid var(--gold);background:rgba(216,188,122,.1);color:var(--gold-soft);font-weight:500;border-radius:1px}
.v2 .links .login:hover{background:rgba(216,188,122,.2);color:#FFF7DF}
.v2 .links .reg{margin-left:16px;background:var(--foil);color:#141208;font-weight:600;border-radius:1px}
.v2 .links .reg:hover{color:#141208;filter:brightness(1.06)}

/* ---- chips, supporting line, buttons ---- */
.v2 .chips{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace}
.v2 .chip-gold{padding:8px 18px;border:1px solid var(--hair);color:var(--gold-soft);font-size:10px;letter-spacing:.28em;background:rgba(var(--bg-rgb),.5)}
.v2 .chip-line{padding:8px 18px;border:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.28em;background:rgba(var(--bg-rgb),.5)}
.v2 .sub{margin:0;font-size:16.5px;line-height:1.75;font-weight:400;color:var(--muted);max-width:600px;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.v2 .ctas{display:flex;align-items:stretch;gap:0}
.v2 .cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:19px 38px;background:var(--foil);color:#141208;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;font-weight:600;white-space:nowrap;transition:transform .35s cubic-bezier(.19,1,.22,1),box-shadow .35s}
.v2 .cta:hover{color:#141208;transform:translateY(-2px);box-shadow:0 16px 44px rgba(216,188,122,.22)}
.v2 .cta2{display:inline-flex;align-items:center;justify-content:center;padding:19px 38px;border:1px solid var(--hair);border-left:none;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;white-space:nowrap;background:rgba(var(--bg-rgb),.45);backdrop-filter:blur(4px)}
.v2 .cta2:hover{background:rgba(216,188,122,.1)}

/* ---- entrance motion ---- */
.v2 .rv{opacity:0;transform:translateY(18px);animation:rise .95s cubic-bezier(.19,1,.22,1) forwards}
.v2 .d1{animation-delay:.05s}.v2 .d2{animation-delay:.2s}.v2 .d3{animation-delay:.38s}.v2 .d4{animation-delay:.56s}.v2 .d5{animation-delay:.74s}

@media (max-width:1100px){
  .v2 .ctas{flex-direction:column;align-items:stretch}
  .v2 .cta,.v2 .cta2{font-size:11px;padding:16px 26px}
  .v2 .cta2{border:1px solid var(--hair);border-top:none}
  .v2 .links a:not(.login):not(.reg){display:none}
  .v2 .v2nav{padding:12px 22px}
}
@media (max-width:640px){
  .v2 .v2nav{flex-wrap:wrap;padding:10px 14px;gap:8px}
  .v2 .brand img{height:34px}
  .v2 .brand span{font-size:13px;letter-spacing:.2em}
  .v2 .links .login{display:inline-flex;align-items:center;min-height:44px;margin-left:0;padding:11px 14px;font-size:9.5px}
  .v2 .links .reg{margin-left:0;padding:11px 16px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  .v2 .bgphoto .im{animation:none}
  .v2 .rv{animation:none;opacity:1;transform:none}
  .v2 .cta{transition:none}
}

/* ---- lower page: wrapper, reveal, section heads ---- */
.v2 .below{position:relative;z-index:2;background:var(--bg)}
.v2 .wrap{max-width:1280px;margin:0 auto;padding:0 56px}
.v2 .wrap-narrow{max-width:880px}
/* Must stay above .foot-bottom: on the homepage this media rule came first, so the
   footer row keeps its 22px top padding at narrow widths (same specificity, later wins). */
@media (max-width:1024px){.v2 .wrap{padding:0 24px}}
.v2 .srv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
.v2 .srv.vis{opacity:1;transform:none}
.v2 .bnum{font-family:'Anton','Impact','Arial Black',sans-serif;font-size:52px;letter-spacing:.02em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2 .shead{display:flex;flex-direction:column;gap:18px;margin-bottom:60px}
.v2 .skick{display:flex;align-items:center;gap:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.32em;color:var(--gold)}
.v2 .skick::after{content:'';width:52px;height:1px;background:var(--hair)}
.v2 .stitle{margin:0;font-family:'Anton','Impact','Arial Black',sans-serif;font-size:52px;font-weight:400;letter-spacing:.01em;text-transform:uppercase}

/* ---- FAQ ---- */
.v2 .faqs details{border-bottom:1px solid var(--line)}
.v2 .faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:24px 4px;font-size:16px;font-weight:500;letter-spacing:.02em}
.v2 .faqs summary::-webkit-details-marker{display:none}
.v2 .faqs summary:hover{color:var(--gold-soft)}
.v2 .fx{width:12px;height:12px;position:relative;flex-shrink:0}
.v2 .fx::before,.v2 .fx::after{content:'';position:absolute;background:var(--gold);transition:transform .35s}
.v2 .fx::before{left:0;top:5px;width:12px;height:1px}
.v2 .fx::after{left:5px;top:0;width:1px;height:12px}
.v2 details[open] .fx::after{transform:scaleY(0)}
.v2 .faqs p{margin:0;padding:0 4px 26px;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:680px}
.v2 .faqs details:first-of-type{border-top:1px solid}
.v2 .faqs details:first-of-type{border-top-color:var(--line)}

/* ---- closing call to action ---- */
.v2 .cta-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.v2 .cta-title{margin:0;font-family:'Anton','Impact','Arial Black',sans-serif;font-size:clamp(44px,5.6vw,84px);letter-spacing:.01em;line-height:1.02;text-transform:uppercase}
.v2 .cta-sub{margin:0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--gold)}
.v2 .cta-actions{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:8px}
.v2 .cta-main{display:inline-flex;align-items:center;gap:14px;padding:19px 42px;background:var(--foil);color:#141208;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;font-weight:600;transition:transform .35s,box-shadow .35s}
.v2 .cta-main:hover{color:#141208;transform:translateY(-2px);box-shadow:0 16px 44px rgba(216,188,122,.22)}
.v2 .cta-contact{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.v2 .cta-contact i{margin:0 12px;font-style:normal}

/* ---- v2 footer ---- */
.v2 .s-foot{border-top:1px solid var(--line);padding:56px 0 64px}
.v2 .foot-grid{display:flex;gap:64px;flex-wrap:wrap;justify-content:space-between}
.v2 .fcol{display:flex;flex-direction:column;gap:12px}
.v2 .fword{font-size:13px;letter-spacing:.3em;font-weight:600}
.v2 .ftag{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.26em;color:var(--muted)}
.v2 .flinks a{font-size:13px;color:var(--muted)}
.v2 .fnote{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.v2 .ftagline{font-size:12px;line-height:1.7;letter-spacing:.06em;font-weight:600;opacity:.85;margin-top:6px}
.v2 .fcontact{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.9;letter-spacing:.08em;margin-top:6px}
.v2 .fhead{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.28em;opacity:.6;margin-bottom:4px}
.v2 .foot-bottom{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;margin-top:44px;padding-top:22px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;opacity:.55}
.v2 .fdmca{max-width:520px}
@media (prefers-reduced-motion:reduce){.v2 .srv{opacity:1;transform:none;transition:none}}
@media (max-width:700px){.v2 .foot-bottom{flex-direction:column}}

/* ---- big foil number ---- */
.v2 .cov-num{font-size:76px;line-height:.9;font-weight:600;letter-spacing:-.02em}
.v2 .cov-num{font-family:'Anton','Impact','Arial Black',sans-serif;font-weight:400;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- keyboard focus ---- */
.v2 a:focus-visible,.v2 button:focus-visible,.v2 summary:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:1px}
.v2 summary:focus-visible{outline-offset:-2px}


/* =====================================================================
 * Components added 2026-10-07 for /for-auto-recyclers/ (class-only).
 * The homepage does not use these, so they cannot change it.
 * ===================================================================== */

/* hero */
.v2 .v2-hero{position:relative;z-index:1;padding:64px 56px 72px;display:flex;flex-direction:column;gap:30px;max-width:1280px;margin:0 auto}
.v2.v2-page .shead{margin-bottom:40px}
.v2 .v2-crumb{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--muted)}
.v2 .v2-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.v2 .v2-crumb li+li::before{content:'/';margin-right:10px;color:var(--hair)}
.v2 .v2-crumb a{color:var(--muted)}
.v2 .v2-crumb [aria-current]{color:var(--gold-soft)}
.v2 .v2-h1{margin:0;font-family:'Anton','Impact','Arial Black',sans-serif;font-weight:400;font-size:clamp(54px,7.4vw,110px);line-height:.97;letter-spacing:.008em;text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.v2 .v2-h1 .line{display:block}
.v2 .foil-text{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.v2 .v2-hero .sub{max-width:640px}
.v2 .cta2.v2-solo{border-left:1px solid var(--hair)}

/* featured-in strip */
.v2 .v2-press{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(var(--bg-rgb),.9)}
.v2 .v2-press .wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px 72px;align-items:center;padding-top:52px;padding-bottom:52px}
.v2 .v2-press-title{margin:0;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.v2 .v2-press-name{display:block;margin-top:12px;font-family:'Anton','Impact','Arial Black',sans-serif;font-size:30px;font-weight:400;letter-spacing:.02em;line-height:1.1;color:var(--text);text-transform:uppercase}
.v2 .v2-quote{margin:0}
.v2 .v2-quote blockquote{margin:0;padding-left:26px;border-left:2px solid var(--gold);font-size:20px;line-height:1.6;font-weight:500;color:var(--text)}
.v2 .v2-quote blockquote p{margin:0}
.v2 .v2-quote figcaption{margin-top:18px;padding-left:28px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.9;letter-spacing:.08em;color:var(--muted)}
.v2 .v2-quote figcaption a{color:var(--gold-soft);border-bottom:1px solid var(--hair)}

/* sections */
.v2 .v2-sec{padding:104px 0 24px}
.v2 .v2-lede{margin:0 0 22px;font-size:17px;line-height:1.8;color:var(--text);max-width:760px}
.v2 .v2-copy{margin:0 0 22px;font-size:15px;line-height:1.8;color:var(--muted);max-width:760px}
.v2 .v2-note{margin:28px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;line-height:1.9;color:var(--gold-soft)}
.v2 .v2-more{display:inline-flex;margin:30px 32px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;line-height:1.7;color:var(--gold-soft);border-bottom:1px solid var(--hair);padding-bottom:4px}
.v2 .v2-gap{margin-top:28px}
.v2 .v2-upper{text-transform:uppercase}
.v2 .v2-copy a{color:var(--gold-soft);border-bottom:1px solid var(--hair)}

/* scroll reveal that never hides content without JavaScript: the page script adds
   .v2-js first, and skips itself under prefers-reduced-motion */
.v2.v2-js .v2-rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
.v2.v2-js .v2-rv.vis{opacity:1;transform:none}

/* cards with the 34x2 foil bar above the heading */
.v2 .v2-cards{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 56px}
.v2 .v2-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.v2 .card-h{margin:0 0 12px;font-family:'Archivo','Segoe UI',Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:.18em;line-height:1.5;text-transform:uppercase;color:var(--text)}
.v2 .card-h::before{content:'';display:block;width:34px;height:2px;background:var(--foil);margin-bottom:18px}
.v2 .card-p{margin:0;font-size:14.5px;line-height:1.75;color:var(--muted)}

/* six steps */
.v2 .v2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.v2 .v2-step{background:var(--bg);padding:40px 34px;display:flex;flex-direction:column;gap:14px}
.v2 .v2-step .bnum{font-size:40px;line-height:1}
.v2 .v2-step .card-h{margin:0}
.v2 .v2-step .card-h::before{display:none}

/* callout */
.v2 .v2-callout{margin-top:44px;padding:30px 34px;border:1px solid var(--hair);background:rgba(216,188,122,.05);max-width:860px}
.v2 .v2-callout p{margin:0;font-size:15px;line-height:1.8;color:var(--text)}

/* material chips */
.v2 .v2-cloud{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.v2 .v2-cloud li{padding:10px 18px;border:1px solid var(--hair);color:var(--gold-soft);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.24em;background:rgba(var(--bg-rgb),.5)}

/* FAQ layout with an h3 inside each summary */
.v2 .v2-faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 72px;align-items:start}
.v2 .v2-faq-grid .shead{margin-bottom:0}
.v2 .faq-q{margin:0;font-family:inherit;font-size:16px;font-weight:500;letter-spacing:.02em;line-height:1.5;color:inherit;text-transform:none}

/* final call to action */
.v2 .v2-final{padding:120px 0 110px}
.v2 .v2-final .cta-title{font-size:clamp(44px,5.6vw,84px)}
.v2 .v2-person{margin:0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--gold)}
.v2 .v2-final .v2-copy{text-align:center;margin:0 auto}
.v2 .v2-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em}
.v2 .v2-contact-list a{color:var(--gold-soft)}

@media (max-width:1100px){
  .v2 .v2-hero{padding:44px 24px 56px}
  .v2 .v2-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .v2 .v2-press .wrap{grid-template-columns:1fr}
  .v2 .v2-cards,.v2 .v2-cards.two{grid-template-columns:1fr;gap:40px}
  .v2 .v2-faq-grid{grid-template-columns:1fr;gap:44px}
  .v2.v2-page .stitle{font-size:44px}
}
@media (max-width:640px){
  .v2 .v2-steps{grid-template-columns:1fr}
  .v2 .v2-step{padding:32px 24px}
  .v2 .v2-sec{padding:76px 0 16px}
  .v2 .v2-quote blockquote{font-size:17px;padding-left:18px}
  .v2 .v2-quote figcaption{padding-left:20px}
  .v2.v2-page .stitle{font-size:38px}
  .v2 .v2-press-name{font-size:24px}
  /* long button labels wrap instead of running off a phone screen */
  .v2.v2-page .cta,.v2.v2-page .cta2,.v2.v2-page .cta-main{white-space:normal;text-align:center;justify-content:center;letter-spacing:.16em;line-height:1.5}
  .v2.v2-page .cta-main{padding:17px 24px}
}