/* =========================================================================
   /proudlycanadian/, The Canadian Strength Standard
   Campaign page. Red is the field here, not a punctuation mark. Brand
   tokens still govern type, radii, and the rest of the chrome.
   Motion: transform/opacity only. Reduced-motion: all static, all visible.
   ========================================================================= */

.ca-body{ background:#000; color:#fff; }
.ca-body .banner{ display:none; }

/* =========================================================================
   RED MASTHEAD, this page only.
   tokens.css calls red "accent only, <=20% of any composition". This page is
   the deliberate exception, so the flip is scoped to .ca-body and reaches
   nothing else on the site.

   It works by REMAPPING the header's own tokens rather than restating forty
   rules, so whatever gets added to the masthead later inherits the right
   colours for free. Two consequences, both of which bite if forgotten:

     1. Panels that drop out of the header (.mega, .dropd, .acx) are still
        DESCENDANTS of .nav2, so they would inherit the red mapping. They are
        separate dark surfaces, not part of the red field, so the tokens are
        reset back to the data-theme="dark" values on them.
     2. Anything that was ALREADY red (quick-order pill, project badge, leaf
        pill, drawer badge) resolves to --accent, which is now white. Left
        alone they turn white-on-white and vanish, so each inverts by hand.

   The bar is two fields, not one. Row 1 is WHITE with black type and rows 2-3
   are red, which lands the white-red banding of the flag and gives the red a
   hard top edge. They therefore map differently, and the site's quiet greys
   are wrong on BOTH: --atl-ink-400 is 4.27:1 on white, just under AA, so the
   white strip reaches for ink-500/ink-700 instead.

   Contrast on red #C22032 (relative luminance 0.1274):
     #fff                   5.92:1  passes AA everywhere
     rgba(255,255,255,.88)  4.86:1  the floor, and 10-11px labels need AA 4.5
     black                  3.55:1  surfaces only, NEVER text on this field
   Contrast on the white strip:
     --atl-ink-700         15.66:1  the 11px note
     --atl-ink-500          7.40:1  inactive language
   Verified with a contrast script, not eyeballed.
   ========================================================================= */
.ca-body .nav2{
  --fg:        #fff;
  --fg-2:      rgba(255,255,255,.94);
  --fg-3:      rgba(255,255,255,.90);
  --fg-4:      rgba(255,255,255,.88);
  --surface-2: rgba(0,0,0,.26);
  --rule-2:    rgba(255,255,255,.34);
  --rule-3:    rgba(0,0,0,.20);
  --accent:    #fff;
  --accent-fg: #C22032;
  background:#C22032;
}

/* Row 1, the white band. It scrolls away (only .nav2 is sticky), so it never
   has to fight a red section underneath it. This is also the one strip on the
   page where red goes back to being an accent rather than the field, so
   --accent stays the brand red here. */
.ca-body .mast-top{
  --fg:        var(--atl-ink-1000);
  --fg-2:      var(--atl-ink-700);
  --fg-3:      var(--atl-ink-500);
  --fg-4:      var(--atl-ink-700);
  --rule-2:    var(--atl-ink-200);
  --rule-3:    rgba(0,0,0,.12);
  --accent:    var(--atl-red);
  --accent-fg: #fff;
  background:#fff;
}

/* The header is sticky and this page has red sections (.ca-quote, .ca-stats).
   Without a hard edge the two reds merge and the bar stops reading as a layer
   floating over the page, so it keeps a dark hairline at all times. */
.ca-body .nav2{ border-bottom:1px solid rgba(0,0,0,.45); }
.ca-body .nav2.is-scrolled{ box-shadow:0 14px 34px -18px rgba(0,0,0,.95); }

/* Reset for the panels that hang BELOW the bar on their own dark surface. */
.ca-body .mega,
.ca-body .dropd,
.ca-body .acx{
  --fg:        var(--atl-ink-0);
  --fg-2:      var(--atl-ink-200);
  --fg-3:      var(--atl-ink-300);
  --fg-4:      var(--atl-ink-400);
  --surface-2: var(--atl-ink-800);
  --rule-2:    var(--atl-ink-700);
  --rule-3:    var(--atl-ink-800);
  --accent:    var(--atl-red);
  --accent-fg: var(--atl-ink-0);
}

/* The lockup is a white wordmark next to a BRAND-RED A-mark, so the mark
   alone would disappear here. Reversing the whole thing to solid white is the
   standard treatment and survives whatever the logo file becomes later. */
.ca-body .mast__logo img{ filter:brightness(0) invert(1); }

/* .lang hard-codes ink tokens instead of --fg-*, so it needs stating even
   here. On white, brightness tells the active language apart on its own, the
   way the rest of the site does it, so it needs no underline crutch. */
.ca-body .mast-top .lang{ color:var(--atl-ink-500); }
.ca-body .mast-top .lang:hover,
.ca-body .mast-top .lang.is-active{ color:var(--atl-ink-1000); }
.ca-body .mast-top .lang-sep{ color:var(--atl-ink-400); }

/* Search: the field sinks into the red rather than sitting on it as a slab.
   Placeholder is softened because it reads against that darkened well, not
   against the red (5.28:1 there, so still AA). */
.ca-body .mastsearch:focus-within{ background:rgba(0,0,0,.38); }
.ca-body .mastsearch__field::placeholder{ color:rgba(255,255,255,.72); }

/* Quick order was .btn--red on a dark bar; on red it has to leave the field
   entirely. Black is what .btn--onred already uses further down this page. */
.ca-body .quickorder.btn--red{ background:#000; border-color:#000; color:#fff; }
.ca-body .quickorder.btn--red:hover{ background:#161618; border-color:#161618; }
.ca-body .quickorder.btn--ghost{ color:#fff; border-color:rgba(255,255,255,.7); }
.ca-body .quickorder.btn--ghost:hover{ background:#fff; color:#000; border-color:#fff; }

/* Count badges: white pill, deep-red figure (9.2:1) so a 10px numeral stays
   readable. Straight --accent would have made them white on white. */
.ca-body .util__badge,
.ca-body .drawer__util-badge{ background:#fff; color:#8E1624; }

/* The leaf inverts: white mark on the bar, and a white pill holding a RED
   leaf once it is the current page, which is the only place the brand red
   still lands on this header. */
.ca-body .pnav__leaf{ color:#fff; }
.ca-body .pnav__leaf:hover,
.ca-body .pnav__leaf.is-current{ color:#C22032; background:#fff; }

/* The drawer is appended to <body>, not inside .nav2, so the mapping above
   never reaches it and it needs its own copy. Accordion bodies stay black
   (.drawer__panelbody hard-codes it) which nests fine under the red. */
.ca-body .drawer__panel{
  --fg:        #fff;
  --fg-2:      rgba(255,255,255,.94);
  --fg-3:      rgba(255,255,255,.90);
  --fg-4:      rgba(255,255,255,.88);
  --surface-2: rgba(0,0,0,.26);
  --rule-2:    rgba(255,255,255,.34);
  --rule-3:    rgba(0,0,0,.20);
  --accent:    #fff;
  --accent-fg: #C22032;
  background:#C22032; border-left-color:rgba(0,0,0,.35);
}

/* Leaf clip, used as a FRAME (campaign moodboard: the maple holds the photo,
   it is not a sticker in a corner). Path is the same 11-point mark as the nav. */

/* =========================================================================
   HERO. One screen, one image, everything on a grid.

   What was wrong before, and what each fix answers:

   - It could not fit a screen. min-height:100vh sat UNDER a ~165px header, so
     the first screen was always header + 100vh. Now the height is the viewport
     MINUS the header. --ca-head is measured by canada.js on load and resize;
     the 172px fallback is what that measurement returns on a default build,
     and is the best a stylesheet alone can know.
   - Nothing was ON anything. Photo, leaf, copy and scroll cue were four
     absolutely-placed layers floating over each other. This is a two-row grid,
     stage then rail, and the stage is a two-column grid. Every part has a slot.
   - Two images fought. A full-bleed photo AND a photo inside the leaf. Now the
     leaf is the only image, which finally gives it a job instead of making it
     a sticker, and the field behind is flat.
   - The title could not shrink. clamp() only watched WIDTH, so on a 768px-tall
     laptop a 118px headline in three lines blew past the fold. It now sizes on
     min(vw, vh), so the shorter side governs.
   - The leaf held a photo that never loaded. Its src asked photo.php for
     w=1200, and that resizer allows 160, 480 and 1000 only, so every visitor
     got a 400 and an empty outline. The leaf now carries a plant photo from
     the uploads, which is also what the section is arguing about.

   The rail along the bottom replaces the floating "Scroll" cue: it anchors the
   bottom edge instead of hovering near it, and it carries the three beats the
   lede used to list, so the copy could get shorter rather than repeat itself.
   ========================================================================= */
.ca-hero{
  position:relative; isolation:isolate;
  min-height:calc(100vh - var(--ca-head, 172px));
  min-height:calc(100svh - var(--ca-head, 172px));
  display:grid; grid-template-rows:1fr auto;
  overflow:hidden;
  /* Le fond de base, opaque. Il portait le degrade que .ca-hero__field posait
     par-dessus tout ; celui-ci est devenu un VOILE translucide pour laisser
     passer la video, il fallait donc redescendre l'opaque ici. */
  background:linear-gradient(180deg, #0B0B0C 0%, #000 100%);
}

/* Boucle d'atelier, en fond. Elle est posee SOUS le voile et ne porte aucune
   information : coupee, la section reste exactement la maquette validee.
   Le fondu d'entree evite qu'elle surgisse d'un coup quand elle finit d'arriver,
   ce qui attirait l'oeil au pire moment, pendant la lecture du titre. */
.ca-hero__video{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1400ms linear;
}
.ca-hero__video[data-pret]{ opacity:.45; }

/* Trame d'imprimerie par-dessus la video. Deux ecrans decales, comme un
   noir + un second passage: un seul pointille se lit comme du papier peint,
   deux donnent le grain d'un magazine. mix-blend-mode:multiply fait manger
   les tons moyens par les points, et laisse passer les etincelles. Sans
   video (reduced-motion), multiply sur du noir est invisible. */
.ca-hero__halftone{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle, #000 1.15px, transparent 1.3px),
    radial-gradient(circle, rgba(0,0,0,.7) .7px, transparent .85px);
  background-size:5px 5px, 8px 8px;
  background-position:0 0, 2.5px 2.5px;
  mix-blend-mode:multiply;
}

/* Le voile. Trois couches, dans cet ordre :
   1. le wash rouge de marque, inchange et toujours tenu a .18 : le surtitre
      est pile dans sa partie la plus vive, plus lourd il passe sous AA ;
   2. un degrade HORIZONTAL, la piece maitresse. Le texte vit dans la colonne
      de gauche, la video dans celle de droite : un voile uniforme aurait du
      choisir entre noyer la soudure et abimer le titre. Celui-ci donne .88 de
      noir sous le texte, ou il ne reste que 2 % de la video, et tombe a .18 au
      bord droit, ou elle passe presque entiere ;
   3. un degrade VERTICAL qui ferme le haut, sous l'en-tete colle, et le bas,
      derriere le bandeau de faits, pour que ni l'un ni l'autre ne flotte sur
      une image qui bouge. */
.ca-hero__field{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 8% 50%, rgba(194,32,50,.18) 0%, transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.78) 30%,
                           rgba(0,0,0,.50) 62%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 24%,
                            rgba(0,0,0,0) 60%, rgba(0,0,0,.70) 100%);
}
/* The stage is NOT boxed in the container: its left edge lines up with the
   container (and so with the rail below it), while the image column runs on to
   the edge of the screen. Boxed, the two columns were ~520px each at 1920, and
   that starved BOTH of them: the leaf is wider than it is tall, so 520px of
   column capped it at 481px tall however much vertical room it had, and a
   112px headline needs ~650px for the word STRENGTH, which it did not get
   either. Letting the right column bleed gives each one its width back and
   fills the dead field that made the whole thing look like a small island.
   The offset is computed from 100%, the element's own width, and not from
   100vw, which counts the scrollbar and would push the page sideways. */
.ca-hero__stage{
  position:relative; z-index:2;   /* au-dessus du voile, qui est passe a 1 */
  display:grid; align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 64px);
  width:100%;
  padding-block:clamp(18px, 3.6vh, 52px);
  padding-inline:max(var(--gutter-desk),
                     calc((100% - var(--container)) / 2 + var(--gutter-desk))) 0;
  min-height:0;                 /* laisse la colonne image retrecir */
}
.ca-hero__copy{ min-width:0; }
.ca-hero__eyebrow{
  margin:0 0 clamp(10px, 1.6vh, 18px);
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--atl-red-soft);    /* le rouge de marque tombe a 2.7:1 ici */
}
.ca-hero__title{
  margin:0 0 clamp(14px, 2vh, 24px); max-width:11ch;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(38px, min(6.6vw, 10vh), 112px);
  line-height:.9; letter-spacing:-.02em; text-transform:uppercase; color:#fff;
}
.ca-hero__lede{
  margin:0 0 clamp(18px, 3vh, 32px); max-width:42ch;
  font-size:clamp(15px, 1.4vw, 18px); line-height:1.5; color:rgba(255,255,255,.82);
  text-wrap:balance;            /* evite le "Not a" orphelin en fin de ligne */
}
.ca-hero__actions{ display:flex; flex-wrap:wrap; gap:12px 14px; }

/* The leaf is sized by HEIGHT so it can never push the stage past the fold;
   the aspect ratio then gives it its width. The 620px ceiling is what keeps a
   1920x1080 screen from showing a small island of content in a large black
   field, which is how the capped version read. */
.ca-hero__figure{
  margin:0; justify-self:center; align-self:center;
  height:min(56vh, 620px); aspect-ratio:220.4 / 202.8;
  width:auto; max-width:100%;
  will-change:transform;
}
.ca-hero__leaf{ display:block; width:100%; height:100%; }

.ca-hero__rail{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.14);
  /* .45 suffisait sur un fond fixe ; au-dessus d'une image qui bouge, le
     bandeau doit redevenir une surface a lui, sinon la soudure passe entre
     ses mots. Le degrade vertical du voile appuie deja dans le meme sens. */
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
}
.ca-hero__rail-inner{
  margin:0 auto; max-width:var(--container); padding:0 var(--gutter-desk);
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.ca-hero__fact{
  padding:clamp(12px, 1.8vh, 20px) 24px clamp(13px, 2vh, 21px) 0;
  border-right:1px solid rgba(255,255,255,.10);
}
.ca-hero__fact:last-child{ border-right:0; padding-right:0; }
.ca-hero__fact dt{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(13px, 1.05vw, 15px);
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
}
.ca-hero__fact dd{
  margin:5px 0 0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.66);
}

html.motion .ca-hero__copy > *{
  opacity:0; animation:caRise 720ms var(--ease-out) both;
}
html.motion .ca-hero__eyebrow{ animation-delay:80ms; }
html.motion .ca-hero__title{ animation-delay:170ms; }
html.motion .ca-hero__lede{ animation-delay:270ms; }
html.motion .ca-hero__actions{ animation-delay:360ms; }
@keyframes caRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* -------------------------------- Marquee ----------------------------- */
.ca-marquee{
  background:#C22032; color:#fff; overflow:hidden;
  border-block:1px solid rgba(0,0,0,.18);
}
.ca-marquee__track{
  display:flex; gap:0; width:max-content;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(18px, 2.4vw, 32px);
  letter-spacing:.08em; text-transform:uppercase;
  line-height:1; padding:18px 0 16px;
}
.ca-marquee__track[data-running="1"]{
  animation:caMarquee 36s linear infinite;
}
.ca-marquee__item{ padding:0 36px; white-space:nowrap; }
@keyframes caMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* -------------------------------- Quote (red field) ------------------- */
/* The quote used to set 52px display type inside a 288px column, so one
   sentence fell into 23 lines of one or two words and the section ran 1735px
   tall, close to two screens. The cause was max-width:18em on the WRAPPER:
   em there resolves against the wrapper's own 16px, not against the 52px of
   the text inside it, so an intended 18-character measure came out at four.
   The measure now lives on the type itself, and the sentence is a statement
   across the field instead of a column falling down it.

   The shape is the margin note: a narrow byline column, then the statement.
   It reads as the counterpart of the hero, whose weight sits on the left,
   and it reuses the hero rail's pairing of a display name over a mono line so
   the two red-and-black fields feel like one page. */
.ca-quote{
  position:relative; overflow:hidden;
  background:#C22032; color:#fff;
  padding:clamp(72px, 9vw, 132px) 0;
}
/* A field mark, so it is anchored into a corner and allowed to run off two
   edges, rather than a shape floated near one and cropped by accident. */
.ca-quote__leaf{
  position:absolute; z-index:0; pointer-events:none;
  right:-6%; bottom:-26%;
  width:min(56vw, 720px); aspect-ratio:220.4 / 202.8; opacity:.14;
  will-change:transform;
}
.ca-quote__inner{
  position:relative; z-index:1; margin:0 auto;
  display:grid; align-items:start;
  grid-template-columns:minmax(0, 200px) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 72px);
}
.ca-quote__side{ display:grid; gap:10px; align-content:start; }
.ca-quote__mark{
  font-family:var(--font-display); font-weight:800; font-size:64px;
  line-height:.6; color:rgba(0,0,0,.26);
  margin-bottom:clamp(10px, 1.6vw, 20px);
}
.ca-quote__who{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
}
/* Deux lignes voulues plutot qu'un repli subi: dans 200px, la mono espacee de
   .14em cassait "SINCE 1982" entre le mot et l'annee. */
.ca-quote__where{
  display:grid; gap:5px;
  padding-top:12px; border-top:1px solid rgba(0,0,0,.28);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);   /* .72 tombait a 3.66:1 sur ce rouge */
}
.ca-quote__text{
  margin:0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px, 3.4vw, 50px);
  line-height:1.06; letter-spacing:-.015em; text-transform:uppercase;
  text-wrap:balance;
}

/* -------------------------------- Reasons ----------------------------- */
.ca-why{ background:#000; padding:clamp(80px, 10vw, 140px) 0; }
/* La mesure appartient au titre, pas a son conteneur: sur le conteneur, 22em
   se resolvait sur SES 16px, soit 352px, et decoupait un titre de 64px en
   colonne de deux mots. C'est la meme faute que celle de la citation. */
.ca-why__head{ margin:0 0 clamp(40px, 6vw, 72px); }
.ca-why__kicker{
  margin:0 0 14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--atl-red-soft);
}
.ca-why__title{
  margin:0; max-width:18ch;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px, 5vw, 64px);
  line-height:.94; text-transform:uppercase; letter-spacing:-.015em;
  text-wrap:balance;
}
.ca-why__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.12);
}
.ca-reason{
  padding:36px 28px 40px 0; padding-right:28px;
  border-right:1px solid rgba(255,255,255,.12);
}
.ca-reason:last-child{ border-right:0; padding-right:0; }
.ca-reason__num{
  display:block; margin:0 0 22px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  color:var(--atl-red-soft);
}
.ca-reason__title{
  margin:0 0 14px;
  font-family:var(--font-display); font-weight:700; font-size:22px;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.05;
}
.ca-reason__text{
  margin:0; max-width:28ch;
  font-size:15px; line-height:1.55; color:rgba(255,255,255,.68);
}

/* -------------------------------- Floor (the line) -------------------- */
/* This was a parked number beside a list. The year sat sticky in a 466px
   column that held nothing else, so roughly 400px of the section was black
   nothing, and it ran 1030px, the tallest section on the page. The four
   thumbnails were catalogue renders of finished machines, greyscaled into
   120px squares: they showed neither the steel, the weld, the finish nor the
   dock, so they illustrated nothing, and they asked photo.php for a width it
   refuses, so they were blank on top of it. They are gone rather than fixed.

   Rows, not columns, and on purpose: both neighbours (.ca-why above and
   .ca-stats below) are four-column numbered grids, and a third would have
   read as the same section three times over. Full width also lets each stage
   sit on two lines instead of five, which is most of the height saved. */
.ca-floor{
  background:#0B0B0C; padding:clamp(72px, 9vw, 128px) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
/* The head no longer opens on a huge red 1982. The very next section, the red
   stats band, opens on its own giant 1982, so the page showed the same number
   twice within 800px; and a section whose subject is four production stages
   was announcing itself with a date. The year is still here, in the sentence,
   where it costs nothing and repeats nothing. */
.ca-floor__head{ margin:0 0 clamp(30px, 4vw, 52px); }
.ca-floor__kicker{
  margin:0 0 14px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--atl-red-soft);
}
.ca-floor__title{
  margin:0 0 16px; max-width:20ch;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px, 4.4vw, 56px);
  line-height:.96; letter-spacing:-.015em; text-transform:uppercase;
  text-wrap:balance;
}
.ca-floor__lede{
  margin:0; max-width:54ch;
  font-size:clamp(15px, 1.3vw, 18px); line-height:1.5; color:rgba(255,255,255,.82);
}

.ca-floor__steps{
  margin:0; padding:0; list-style:none;
  border-top:1px solid rgba(255,255,255,.18);
}
/* The <ol> carries the order, so the printed number is decoration and is
   hidden from screen readers rather than read out twice. */
.ca-step{
  display:grid;
  grid-template-columns:clamp(44px, 4.2vw, 62px) minmax(0, 210px) minmax(0, 1fr);
  align-items:baseline; gap:clamp(14px, 2.2vw, 36px);
  padding:clamp(17px, 2.1vw, 27px) 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:border-color 260ms var(--ease-out);
}
.ca-step:last-child{ border-bottom:1px solid rgba(255,255,255,.18); }
.ca-step:hover{ border-bottom-color:rgba(232,70,88,.55); }
.ca-step__idx{
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  letter-spacing:.16em; color:var(--atl-red-soft);
}
.ca-step__title{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px, 1.7vw, 24px);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.1;
}
.ca-step__text{
  margin:0; max-width:74ch;
  font-size:15px; line-height:1.55; color:rgba(255,255,255,.72);
}

/* -------------------------------- Stats ------------------------------- */
.ca-stats{
  background:#C22032; color:#fff;
  padding:clamp(64px, 8vw, 104px) 0;
}
.ca-stats__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.ca-stat__val{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(44px, 6.5vw, 88px);
  line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
}
.ca-stat__label{
  display:block; margin-top:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.78);
}

/* -------------------------------- Plant ------------------------------- */
.ca-plant{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0;
  min-height:70vh; background:#000;
}
.ca-plant__media{ position:relative; min-height:420px; overflow:hidden; }
.ca-plant__media img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.08);
}
.ca-plant__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 40%, rgba(0,0,0,.55) 100%);
}
.ca-plant__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
}
.ca-plant__kicker{
  margin:0 0 14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--atl-red-soft);
}
.ca-plant__title{
  margin:0 0 18px;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px, 4.4vw, 56px);
  line-height:.94; text-transform:uppercase;
}
.ca-plant__text{
  margin:0 0 28px; max-width:42ch;
  font-size:16px; line-height:1.55; color:rgba(255,255,255,.72);
}
.ca-plant__addr{
  margin:0 0 36px; font-style:normal;
  font-family:var(--font-mono); font-size:13px; line-height:1.7;
  letter-spacing:.04em; color:rgba(255,255,255,.88);
}
.ca-plant__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* -------------------------------- Close CTA --------------------------- */
.ca-close{
  background:#0B0B0C; padding:clamp(80px, 10vw, 140px) 0;
  text-align:center; border-top:1px solid rgba(255,255,255,.08);
}
.ca-close__kicker{
  margin:0 0 16px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--atl-red-soft);
}
.ca-close__title{
  margin:0 auto 28px; max-width:16em;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(36px, 5.5vw, 72px);
  line-height:.92; text-transform:uppercase;
}
.ca-close__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px 16px; }
.ca-close__lede{
  margin:0 auto 28px; max-width:46ch;
  font-size:16px; line-height:1.6; color:rgba(255,255,255,.72);
}

/* Official made-in-canada: five staple SKUs, five facility cards. */
.ca-staples, .ca-trust{
  background:#000; padding:clamp(72px, 9vw, 128px) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.ca-trust{ background:#0B0B0C; }
.ca-staples__head, .ca-trust__head{ margin:0 0 clamp(36px, 5vw, 64px); }
.ca-staples__kicker, .ca-trust__kicker{
  margin:0 0 14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--atl-red-soft);
}
.ca-staples__title, .ca-trust__title{
  margin:0; max-width:20ch;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px, 4.6vw, 56px);
  line-height:.94; text-transform:uppercase; letter-spacing:-.015em;
}
.ca-staples__grid, .ca-trust__grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;
}
.ca-staple, .ca-trustcard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#111; border:1px solid rgba(255,255,255,.12);
  transition:border-color var(--dur-base, .2s) ease, transform var(--dur-base, .2s) ease;
}
a.ca-staple:hover, a.ca-trustcard:hover{ border-color:var(--atl-red); transform:translateY(-3px); }
.ca-staple img, .ca-trustcard img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.ca-staple__name, .ca-trustcard__name{
  padding:14px 14px 18px;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.15;
}
.ca-trustcard__name{ font-size:13px; }

/* Buttons on this page sit on black or on red; keep them loud. */
.ca-body .btn--red{ background:#C22032; color:#fff; }
.ca-body .btn--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
}
.ca-body .btn--ghost:hover{ border-color:#fff; }
.ca-body .btn--onred{
  background:#000; color:#fff; border:1px solid transparent;
}
.ca-body .btn--onred:hover{ background:#161618; }
.ca-body .btn--ghost-onred{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45);
}
.ca-body .btn--ghost-onred:hover{ border-color:#fff; }

/* -------------------------------- Responsive -------------------------- */
@media (max-width:1080px){
  /* Below this the primary nav folds into the burger, so the header shrinks
     and the two-column stage runs out of room: it stacks, and the hero drops
     its one-screen contract rather than crushing the copy to keep it. */
  .ca-hero{ min-height:0; }
  /* Le degrade horizontal du voile protegeait une colonne de texte a gauche.
     Ici les colonnes sont empilees, le texte occupe TOUTE la largeur, et ce
     degrade laisserait passer la soudure sous la fin de chaque ligne. On
     repasse donc a un voile vertical, uniforme en largeur, un peu plus dense
     puisqu'il n'a plus de zone claire ou se rattraper. */
  .ca-hero__field{
    background:
      radial-gradient(120% 90% at 8% 40%, rgba(194,32,50,.18) 0%, transparent 62%),
      linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 42%,
                              rgba(0,0,0,.66) 72%, rgba(0,0,0,.86) 100%);
  }
  .ca-hero__stage{
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(24px, 4vh, 40px);
    padding-block:clamp(32px, 6vh, 64px);
    padding-inline:var(--gutter-desk);   /* plus de colonne a faire deborder */
  }
  .ca-hero__figure{ height:min(46vh, 340px); justify-self:start; }
  .ca-hero__title{ font-size:clamp(38px, 7.4vw, 76px); max-width:14ch; }
  .ca-hero__rail-inner{ grid-template-columns:repeat(2, 1fr); }
  .ca-hero__fact:nth-child(2){ border-right:0; padding-right:0; }
  .ca-hero__fact:nth-child(1),
  .ca-hero__fact:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.10); }
  .ca-why__grid{ grid-template-columns:1fr 1fr; }
  .ca-staples__grid, .ca-trust__grid{ grid-template-columns:repeat(3, 1fr); }
  .ca-reason:nth-child(2){ border-right:0; padding-right:0; }
  .ca-reason:nth-child(1),
  .ca-reason:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.12); }
  .ca-stats__grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .ca-plant{ grid-template-columns:1fr; }
  .ca-plant__media{ min-height:280px; }
  .ca-plant__media::after{
    background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%);
  }
  .ca-step{ grid-template-columns:clamp(40px, 5vw, 56px) minmax(0, 150px) minmax(0, 1fr); }
  /* Plus de place pour une colonne de marge: la signature passe SOUS la
     citation, ou une signature va naturellement. */
  .ca-quote__inner{ grid-template-columns:minmax(0, 1fr); gap:clamp(24px, 4vw, 36px); }
  .ca-quote__side{ order:2; }
  .ca-quote__text{ order:1; }
  .ca-quote__mark{ display:none; }
  .ca-quote__where{ justify-self:start; }
}
@media (max-width:640px){
  .ca-hero__figure{ height:min(38vh, 260px); }
  .ca-hero__title{ font-size:clamp(34px, 11vw, 54px); max-width:12ch; }
  .ca-hero__rail-inner{ grid-template-columns:1fr 1fr; }
  .ca-hero__fact{ padding-right:16px; }
  .ca-why__grid{ grid-template-columns:1fr; }
  .ca-staples__grid, .ca-trust__grid{ grid-template-columns:1fr 1fr; }
  .ca-reason{ border-right:0; padding-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .ca-reason:last-child{ border-bottom:0; }
  .ca-floor__head{ grid-template-columns:minmax(0, 1fr); align-items:start; }
  /* Le titre de l'etape ne tient plus a cote de son texte: il passe au-dessus,
     et le numero garde sa colonne pour que la sequence reste lisible. */
  .ca-step{
    grid-template-columns:clamp(38px, 9vw, 52px) minmax(0, 1fr);
    align-items:start; row-gap:8px;
  }
  .ca-step__title, .ca-step__text{ grid-column:2; }
  .ca-stats__grid{ grid-template-columns:1fr 1fr; }
  /* A 8vw, la phrase tombait en douze lignes sur un telephone: les mots longs
     de la capitale ("FASHIONABLE.") cassent bien avant la fin de la ligne, et
     text-wrap:balance abandonne au-dela de six lignes. Plus petit, elle en
     fait six ou sept et redevient une phrase. */
  .ca-quote__text{ font-size:clamp(22px, 6.2vw, 30px); text-wrap:pretty; }
  /* A cette largeur il ne depasse qu'un lobe, qui ne se lit plus comme une
     feuille mais comme une forme rouge posee la par erreur. */
  .ca-quote__leaf{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  html.motion .ca-hero__copy > *{ animation:none !important; opacity:1 !important; transform:none !important; }
  .ca-marquee__track, .ca-marquee__track[data-running="1"]{ animation:none !important; }
  .ca-hero__figure, .ca-quote__leaf{ transform:none !important; will-change:auto; }
}