/* ══════════════════════════════════════════════════════════════════════
   Prestige Mobile — prestigemobileci.com

   One stylesheet for all three pages. Lifted from the approved prototype;
   the design tokens live on :root and every page shares this file, so a
   colour or a type scale is changed in exactly one place.
   ══════════════════════════════════════════════════════════════════════ */
:root{
    color-scheme:light;
    --ink:#14100a; --ink-2:#4e4638; --muted:#6e6349;
    --paper:#f7f4ec; --paper-2:#efeadd; --card:#fffdf9;
    --band:#08070a; --band-2:#14110d; --band-3:#1e1a14;
    --rule:#e6e0d2; --rule-2:#d6cdba; --hair:#cfc5ae;
    --gold:#8a5310; --gold-br:#d4a83a; --gold-pl:#f0cc70;

    --t-xs:13px; --t-sm:15px; --t-base:17px; --t-md:21px;
    --t-lg:clamp(26px,3.2vw,34px); --t-xl:clamp(36px,6.2vw,68px);
    --t-num:clamp(34px,5vw,58px);
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --gold-rule:linear-gradient(90deg,#a06010,#f0cc70,#a06010);
    --ease:cubic-bezier(.22,.68,.28,1);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{background:var(--paper);color:var(--ink);margin:0;
    font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
    font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased}

  img,video{max-width:100%}
  .inner{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}

  /* 12-col grid — the page is built on it and deliberately breaks its symmetry */
  .g12{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2.2vw,28px)}
  @media (max-width:860px){ .g12{grid-template-columns:1fr} .g12>*{grid-column:1/-1!important} }

  /* ══ NAV ══ */
  .nav{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;
    justify-content:space-between;gap:16px;padding:0 clamp(20px,4vw,52px);
    box-sizing:content-box;padding-top:env(safe-area-inset-top,0px);
    background:rgba(247,244,236,.86);backdrop-filter:saturate(1.3) blur(14px);
    border-bottom:1px solid var(--rule)}
  .brandmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-height:48px}
  .brandmark .pm{width:44px;height:38px;background:var(--band);display:grid;place-items:center;flex:none}
  .brandmark .pm img{width:30px;height:auto;display:block}
  .brandmark .nm{font-family:"EB Garamond",Georgia,serif;font-size:var(--t-md);line-height:1}
  .navlinks{display:flex;gap:2px;align-items:center}
  .navlinks a{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-2);text-decoration:none;padding:0 14px;height:48px;display:flex;align-items:center;position:relative}
  .navlinks a::after{content:"";position:absolute;left:14px;right:14px;bottom:12px;height:1px;
    background:var(--gold-br);transform:scaleX(0);transform-origin:left}
  .navlinks a[aria-current]{color:var(--gold)}
  .navlinks a[aria-current]::after{transform:scaleX(1)}
  .nav-wa{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;
    background:var(--band);color:var(--gold-pl);text-decoration:none;flex:none;
    font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
  .nav-wa svg{width:16px;height:16px;fill:currentColor}

  .botbar{display:none}
  @media (max-width:760px){
    .navlinks{display:none}
    .botbar{display:flex;position:sticky;bottom:0;z-index:30;
      background:rgba(247,244,236,.94);backdrop-filter:blur(14px);
      border-top:1px solid var(--rule-2);padding-bottom:env(safe-area-inset-bottom,0px)}
    .botbar a{flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:3px;text-decoration:none;color:var(--ink-2);
      font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;position:relative}
    .botbar a[aria-current]{color:var(--gold)}
    .botbar a[aria-current]::before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:var(--gold-br)}
    .botbar svg{width:19px;height:19px;fill:currentColor}
  }

  /* ══ HERO — photo dominant, bleeds off the right edge ══ */
  .hero{position:relative;background:var(--band);color:#f2ede2;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(90% 80% at 0% 10%,rgba(212,168,58,.13),transparent 60%),
               linear-gradient(180deg,var(--band-2),var(--band) 70%)}
  /* faint technical grid */
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.32;
    background-image:linear-gradient(90deg,rgba(212,168,58,.09) 1px,transparent 1px);
    background-size:calc(100%/12) 100%}
  .hero .inner{position:relative;z-index:2}
  .hero .g12{align-items:center;min-height:clamp(440px,62vh,620px)}
  .herocopy{grid-column:1/7;padding:72px 0 76px}
  .heroshot{grid-column:7/13;position:relative;margin:0;align-self:stretch;
    display:flex;align-items:center}
  /* .inner caps at 1120, so a 5/12 copy column is ~408px at EVERY width above
     the split — 68px display type needs more measure than that, and the two
     buttons need ~392px side by side. 6 columns gives ~494px. The photo keeps
     the asymmetry by bleeding past the container padding instead. */
  @media (min-width:1080px){
    /* Belt and braces: the prototype capped every descendant of the demo
       card at 100%, which silently pinned this bleed to its grid column.
       That guard framed the card and is gone, but the override costs
       nothing and records that the photo is MEANT to run past the
       container padding rather than stop at it. */
    .heroshot{margin-right:calc(-1 * clamp(20px,4vw,52px));max-width:none}
  }
  /* The hero splits 5/7 only once the copy column can carry the display size.
     Measured: at 880px the column is 319px while the H1 renders at 54.6px —
     five lines, with the buttons stacked too. The H1 clamp keys off the
     VIEWPORT (6.2vw) but the column is 5/12 of it, so the type outruns its
     measure everywhere between 861px and roughly 1150px. Stack until 1080. */
  @media (max-width:1079px){
    .hero .g12{grid-template-columns:1fr;min-height:0}
    .herocopy{grid-column:1/-1;padding:56px 0 30px}
    .heroshot{grid-column:1/-1;margin:0 calc(-1*clamp(20px,4vw,52px));padding-bottom:52px}
    .hero .shotframe{aspect-ratio:16/9}  /* .hero scope: the base rule is declared later in source */
  }
  @media (max-width:860px){
    .herocopy{padding:52px 0 26px}
    .heroshot{padding-bottom:44px}
  }
  .shotframe{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
  .shotframe img{position:absolute;inset:-7% 0 auto 0;width:100%;height:114%;
    object-fit:cover;display:block;will-change:transform}
  /* registration ticks — blueprint cue */
  .shotframe::before,.shotframe::after{content:"";position:absolute;width:16px;height:16px;z-index:2;
    border-color:var(--gold-br);opacity:.85}
  .shotframe::before{top:10px;left:10px;border-top:1px solid;border-left:1px solid}
  .shotframe::after{bottom:10px;right:10px;border-bottom:1px solid;border-right:1px solid}
  .shotcap{position:absolute;left:0;bottom:0;z-index:3;padding:10px 14px;
    background:rgba(8,7,10,.72);backdrop-filter:blur(4px);
    font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#d9cdae}

  .hero .tagline{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.24em;
    text-transform:uppercase;color:var(--gold-br);margin:0 0 20px;display:flex;align-items:center;gap:12px}
  .hero .tagline::after{content:"";height:1px;width:46px;background:var(--gold-br);opacity:.6}
  .hero h1{font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:var(--t-xl);
    line-height:1;margin:0 0 20px;letter-spacing:-.02em;color:#fff;text-wrap:balance}
  .hero p.sub{font-size:var(--t-md);line-height:1.45;color:#c9bfa8;margin:0 0 32px;max-width:34ch}
  .cta{display:flex;gap:12px;flex-wrap:wrap}

  /* ══ PROOF — no heading; data, not prose ══ */
  .proof{border-bottom:1px solid var(--rule);background:var(--card)}
  .proof .g12{padding:38px 0}
  .proof .stat{grid-column:span 4}
  @media(max-width:860px){.proof .stat{margin-bottom:20px}}
  .proof .n{font-family:"EB Garamond",Georgia,serif;font-size:var(--t-num);line-height:.95;
    color:var(--ink);font-variant-numeric:tabular-nums;display:block;letter-spacing:-.02em}
  .proof .l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin-top:10px;display:block;max-width:24ch}

  /* ══ CONFIGURATOR ══ */
  .config{padding:clamp(56px,7vw,88px) 0;position:relative;
    background:linear-gradient(180deg,var(--paper),var(--paper-2))}
  .config::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(90deg,var(--hair) 1px,transparent 1px);
    background-size:calc(100%/12) 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
  .config .inner{position:relative;z-index:1}
  .config-head{grid-column:1/8;margin-bottom:30px}
  .eyebrow{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold);margin:0 0 12px}
  h2{font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:var(--t-lg);
    line-height:1.1;margin:0 0 12px;letter-spacing:-.015em;text-wrap:balance}
  .lede{color:var(--ink-2);font-size:var(--t-md);line-height:1.5;margin:0;max-width:52ch}

  .switch{grid-column:1/13;display:flex;gap:0;border:1px solid var(--rule-2);
    background:var(--card);margin-bottom:0;position:relative}
  .switch button{flex:1;appearance:none;background:none;border:0;cursor:pointer;
    padding:18px 20px;text-align:left;font:inherit;color:var(--ink-2);position:relative;
    border-right:1px solid var(--rule-2);min-height:78px}
  .switch button:last-child{border-right:0}
  .switch button .mname{font-family:"EB Garamond",Georgia,serif;font-size:var(--t-md);
    display:block;color:var(--ink);line-height:1.1}
  .switch button .mmeta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-top:7px;display:block}
  .switch button::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
    background:var(--gold-rule);transform:scaleX(0);transform-origin:center}
  .switch button[aria-selected="true"]{background:var(--band);}
  .switch button[aria-selected="true"] .mname{color:#fff}
  .switch button[aria-selected="true"] .mmeta{color:var(--gold-br)}
  .switch button[aria-selected="true"]::before{transform:scaleX(1)}
  .switch button:focus-visible{outline:2px solid var(--gold-br);outline-offset:-3px}

  .panel{grid-column:1/13;border:1px solid var(--rule-2);border-top:0;background:var(--card);
    display:grid;grid-template-columns:repeat(12,1fr);gap:0}
  .spec{grid-column:1/8;padding:clamp(24px,3vw,38px);border-right:1px solid var(--rule-2)}
  .aside{grid-column:8/13;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;
    justify-content:space-between;gap:24px;background:linear-gradient(180deg,var(--paper),var(--card))}
  @media (max-width:860px){
    .panel{grid-template-columns:1fr}
    .spec{grid-column:1;border-right:0;border-bottom:1px solid var(--rule-2)}
    .aside{grid-column:1}
  }
  /* specs as DATA */
  .specrows{list-style:none;margin:0;padding:0}
  .specrows li{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
    padding:14px 0;border-bottom:1px solid var(--rule)}
  .specrows li:last-child{border-bottom:0}
  .specrows .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .specrows .v{font-family:var(--mono);font-size:var(--t-md);color:var(--ink);
    font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .specrows .v .u{font-size:var(--t-xs);color:var(--muted);margin-left:5px}
  .specnote{font-size:var(--t-sm);color:var(--muted);margin:18px 0 0;max-width:44ch}

  /* blueprint dimension line */
  /* blueprint dimension line — weighted up so it reads as a measurement,
     not a stray hairline: darker rule, taller end ticks, label in ink. */
  .dimline{margin:26px 0 2px;position:relative;height:38px}
  .dimline .bar{position:absolute;left:0;right:0;top:17px;height:1px;background:var(--ink-2);opacity:.55}
  .dimline .bar::before,.dimline .bar::after{content:"";position:absolute;top:-8px;
    width:1px;height:17px;background:var(--ink-2);opacity:.75}
  .dimline .bar::before{left:0} .dimline .bar::after{right:0}
  .dimline .lbl{position:absolute;left:50%;transform:translateX(-50%);top:2px;
    background:var(--card);padding:0 12px;font-family:var(--mono);font-size:var(--t-xs);
    font-weight:500;letter-spacing:.12em;color:var(--ink)}
  .dimline .cap{position:absolute;top:22px;font-family:var(--mono);font-size:10px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .dimline .cap.l{left:0} .dimline .cap.r{right:0}

  .priceblock{display:flex;flex-direction:column;gap:4px}
  .priceblock .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}
  .priceblock .amt{font-family:"EB Garamond",Georgia,serif;font-size:var(--t-num);
    line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .priceblock .cur{font-size:.42em;letter-spacing:.06em;color:var(--ink-2);margin-left:8px}

  /* transition for the swap */
  .swappable{transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .panel.swapping .swappable{opacity:0;transform:translateY(6px)}
  @media (prefers-reduced-motion:reduce){ .swappable{transition:none} }

  /* ══ FULL-BLEED BREAK — photo at full strength ══ */
  .break{position:relative;overflow:hidden;background:var(--band);min-height:clamp(320px,44vw,480px);
    display:flex;align-items:flex-end}
  .break img,.break video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
  .break::after{content:"";position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(8,7,10,.92) 0%,rgba(8,7,10,.34) 46%,transparent 78%)}
  .break .inner{position:relative;z-index:2;padding-bottom:clamp(30px,4vw,48px);width:100%}
  .break p.line{font-family:"EB Garamond",Georgia,serif;font-size:clamp(24px,3.4vw,40px);
    line-height:1.14;color:#fff;margin:0;max-width:22ch;letter-spacing:-.015em}
  .break .meta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold-br);margin:0 0 14px}

  /* ══ TEAM — squared, asymmetric, offset ══ */
  .team{padding:clamp(56px,7vw,92px) 0;background:var(--card);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .person{display:grid;gap:18px}
  .person.a{grid-column:1/6}
  .person.b{grid-column:7/12;margin-top:clamp(0px,5vw,64px)}
  @media(max-width:860px){.person.b{margin-top:44px}}
  .person figure{margin:0;position:relative}
  .person img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.92)}
  .person figure::after{content:"";position:absolute;left:10px;top:10px;width:18px;height:18px;
    border-top:1px solid var(--gold-br);border-left:1px solid var(--gold-br);opacity:.9}
  .person .nm{font-family:"EB Garamond",Georgia,serif;font-size:var(--t-md);margin:0}
  .person .role{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold);margin:6px 0 10px}
  .person p{font-size:var(--t-base);color:var(--ink-2);margin:0}

  /* ══ CLOSER — the only centred block on the page ══ */
  .closer{position:relative;background:var(--band);color:#f2ede2;overflow:hidden;
    padding:clamp(64px,8vw,104px) 0;text-align:center}
  .closer::before{content:"";position:absolute;inset:0;
    background:radial-gradient(60% 120% at 50% 118%,rgba(212,168,58,.24),transparent 62%)}
  .closer::after{content:"";position:absolute;inset:0;opacity:.25;
    background-image:linear-gradient(90deg,rgba(212,168,58,.1) 1px,transparent 1px);
    background-size:calc(100%/12) 100%}
  .closer .inner{position:relative;z-index:2}
  .closer .eyebrow{color:var(--gold-br)}
  .closer h2{color:#fff;font-size:clamp(28px,4.6vw,50px);margin-bottom:16px}
  .closer p{color:#c9bfa8;font-size:var(--t-md);margin:0 auto 34px;max-width:44ch}
  .closer .cta{justify-content:center}

  /* ══ SECTIONS (remorques / devis) ══ */
  section.band{padding:clamp(50px,6vw,80px) 0}
  section.band.alt{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .incl{list-style:none;padding:0;margin:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 40px}
  .incl li{padding:14px 0 14px 26px;border-bottom:1px solid var(--rule);
    font-size:var(--t-base);color:var(--ink-2);position:relative}
  .incl li::before{content:"";position:absolute;left:0;top:23px;width:10px;height:1px;background:var(--gold-br)}
  .drivers{list-style:none;padding:0;margin:0}
  .drivers li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:18px 0;
    border-bottom:1px solid var(--rule);font-size:var(--t-base);color:var(--ink-2);max-width:66ch}
  .drivers .k{font-family:var(--mono);font-size:var(--t-xs);color:var(--gold);
    letter-spacing:.1em;padding-top:4px}
  .partner{border-left:1px solid var(--gold-br);padding:8px 0 8px 22px;margin:36px 0 0}
  .partner p{margin:0 0 6px;font-size:var(--t-base);color:var(--ink-2);max-width:58ch}
  .partner a{color:var(--gold);text-decoration:none;display:inline-flex;min-height:48px;
    align-items:center;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}

  /* ══ BUTTONS ══ */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:56px;padding:16px 30px;text-decoration:none;font-size:var(--t-base);
    font-weight:700;border:1px solid transparent;position:relative;letter-spacing:.01em}
  .btn svg{width:18px;height:18px;fill:currentColor;flex:none}
  .btn-gold{background:linear-gradient(180deg,var(--gold-pl),var(--gold-br));color:#14100a;
    box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 12px 30px -16px rgba(212,168,58,.95)}
  .btn-ghost{border-color:rgba(240,204,112,.4);color:#f0e6d2;background:rgba(255,255,255,.03)}
  .btn-dark{background:var(--band);color:var(--gold-pl)}
  .btn-line{border-color:var(--rule-2);color:var(--ink);background:var(--card)}

  /* ══ FOOTER / CONTACT / FORM ══ */
  footer.site-foot{background:var(--band);color:#9d907a;padding:36px 0;font-size:var(--t-sm)}
  footer.site-foot .inner{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between}
  footer.site-foot a{color:var(--gold-pl);text-decoration:none;display:inline-flex;
    min-height:48px;align-items:center}
  .contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
  .contact h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);margin:0 0 4px;font-weight:400}
  .contact a{color:var(--gold);text-decoration:none;font-size:var(--t-base);
    display:inline-flex;min-height:48px;align-items:center}
  .contact p{margin:0;font-size:var(--t-base);color:var(--ink-2)}

  .form{display:grid;gap:20px;max-width:600px}
  .row{display:grid;gap:7px}
  .row.two{grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:520px){.row.two{grid-template-columns:1fr}}
  label,legend{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:400}
  .hint{font-size:var(--t-sm);color:var(--muted);margin:-2px 0 0;text-transform:none;
    font-family:"DM Sans",sans-serif;letter-spacing:0}
  input,select,textarea{font:inherit;font-size:var(--t-base);padding:14px 15px;min-height:54px;
    border:1px solid var(--rule-2);background:var(--card);color:var(--ink);width:100%}
  textarea{min-height:96px;resize:vertical}
  input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--gold-br);outline-offset:1px;border-color:var(--gold-br)}
  fieldset{border:0;padding:0;margin:0;display:grid;gap:7px}
  .radios{display:flex;gap:9px;flex-wrap:wrap}
  .radios label{display:flex;align-items:center;gap:9px;font-family:"DM Sans",sans-serif;
    font-size:var(--t-base);letter-spacing:0;text-transform:none;color:var(--ink);
    border:1px solid var(--rule-2);padding:13px 15px;min-height:54px;background:var(--card);
    cursor:pointer;flex:1 1 auto}
  .radios input{width:auto;min-height:auto;padding:0;accent-color:var(--gold)}
  .msgout{border:1px solid var(--rule-2);border-left:2px solid #25D366;background:var(--card);padding:18px 20px}
  .msgout .t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin:0 0 10px}
  .msgout pre{margin:0;font-family:var(--mono);font-size:var(--t-sm);line-height:1.7;
    white-space:pre-wrap;word-break:break-word;color:var(--ink)}

  /* ══ CONFIGURATOR PRODUCT SHOT ══ */
  .prodshot{grid-column:1/13;border-bottom:1px solid var(--rule-2);position:relative;
    background:var(--card);padding:clamp(18px,2.4vw,30px) clamp(18px,3vw,38px) clamp(10px,1.4vw,18px)}
  .prodshot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
    background-image:linear-gradient(90deg,var(--hair) 1px,transparent 1px);
    background-size:calc(100%/8) 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent)}
  .prodshot>*{position:relative;z-index:1}
  .prodshot .bay{display:grid;place-items:center;height:clamp(210px,30vw,400px);
    grid-template-rows:minmax(0,1fr)}   /* otherwise the row grows to the intrinsic image height */
  /* height:100% + the width/height attributes give a definite box BEFORE the image
     loads; with width:auto it would be 2x2 and lazy-loading would never fire */
  .prodshot .bay img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
  .prodshot .bay img.plate{border:1px solid var(--rule-2)}
  .keydiff{border-left:2px solid var(--gold-br);padding-left:clamp(14px,2vw,20px);
    margin:28px 0 0;max-width:62ch;font-size:var(--t-sm);line-height:1.62;color:var(--ink-2)}
  .keydiff strong{color:var(--ink);font-weight:500}
  .specrows .v.txt{font-size:var(--t-sm);letter-spacing:.02em}
  .prodshot .cap{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);text-align:center;margin:4px 0 0}
  .prodshot .ph{text-align:left}
  .prodshot .ph .what{margin:0}
  /* both models are presented the same way: cut out, floating, on the grid */
  /* three facts that hold the aside column open next to a tall product shot */
  .asidefacts{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--rule)}
  .asidefacts li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
    font-size:var(--t-sm);line-height:1.45;color:var(--ink-2)}
  .asidefacts li::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;
    background:var(--gold-br);transform:rotate(45deg)}

  /* ══ TWO-UP DETAIL ══ */
  .duo{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(12px,1.6vw,20px);margin-top:34px}
  .duo figure{margin:0}
  .duo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
  .duo figure:last-child img{aspect-ratio:3/4}
  .duo figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.5}
  @media (max-width:700px){ .duo{grid-template-columns:1fr}
    .duo img,.duo figure:last-child img{aspect-ratio:3/2} }

  /* ══ FIELD / DEPLOYMENT STRIP ══ */
  .field{padding:clamp(52px,6.5vw,84px) 0;background:var(--paper-2)}
  .fieldgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);margin-top:28px}
  .fieldgrid figure{margin:0}
  .fieldgrid img{display:block;width:100%;height:auto;aspect-ratio:32/21;object-fit:cover;
    background:var(--band)}
  .fieldgrid figcaption{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);margin-top:12px}
  @media (max-width:760px){ .fieldgrid{grid-template-columns:1fr;gap:26px} }

  /* ══ CLOSER BACKDROP ══ */
  .closer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:.38;z-index:0}
  .closer .scrim{position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(8,7,10,.86),rgba(8,7,10,.93))}
  .closer .inner{position:relative;z-index:2}

  .ph{border:1px dashed #b4832e;background:
      repeating-linear-gradient(135deg,rgba(212,168,58,.08) 0 12px,transparent 12px 24px);
    padding:26px 22px;text-align:center;color:#8a6a24}
  .ph .lab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:#b4832e;display:block;margin-bottom:8px}
  .ph .what{font-size:var(--t-sm);line-height:1.5;color:#7d5f1f;max-width:46ch;margin:0 auto}
  figure.shot{margin:34px 0 0}
  figure.shot img{display:block;width:100%;height:auto}
  figure.shot figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-top:12px}


  /* ══ FAQ — question left, answer right; deliberately not the numbered
     driver list, so the two ruled lists on the site don't read as twins ══ */
  .faq{list-style:none;padding:0;margin:0}
  .faq li{display:grid;grid-template-columns:minmax(180px,4fr) 7fr;gap:8px clamp(20px,3vw,44px);
    padding:24px 0;border-top:1px solid var(--rule)}
  .faq li:last-child{border-bottom:1px solid var(--rule)}
  @media(max-width:760px){ .faq li{grid-template-columns:1fr;padding:20px 0} }
  .faq .q{font-family:"EB Garamond",Georgia,serif;font-size:var(--t-md);line-height:1.2;
    margin:0;color:var(--ink);letter-spacing:-.005em}
  .faq .a{margin:0;font-size:var(--t-base);color:var(--ink-2);max-width:60ch}
  .faq .a + .a{margin-top:10px}
  /* an unconfirmed figure must not read as fact */
  .todo{background:repeating-linear-gradient(135deg,rgba(212,168,58,.22) 0 7px,transparent 7px 14px);
    border-bottom:1px dashed #b4832e;color:#7d5f1f;padding:1px 5px;font-weight:700;
    font-family:var(--mono);font-size:.88em;white-space:nowrap}

  /* ══ TESTIMONIALS — pull-quotes on a dark band, deliberately unlike the ruled FAQ ══ */
  .quotes{background:var(--band);color:#f2ede2;padding:clamp(56px,7vw,88px) 0;position:relative}
  .quotes .eyebrow{color:var(--gold-br)}
  .quotes h2{color:#fff}
  .quotegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:34px}
  .quote{margin:0;display:flex;flex-direction:column;padding:26px 24px 22px;
    background:var(--band-2);border-top:1px solid var(--gold-br)}
  .quote .qmark{font-family:"EB Garamond",Georgia,serif;font-size:64px;line-height:.6;
    color:var(--gold-br);height:30px;display:block}
  .quote blockquote{margin:14px 0 22px;flex:1;
    font-family:"EB Garamond",Georgia,serif;font-size:var(--t-md);line-height:1.45;color:#f2ede2;
    min-height:calc(4 * 1.45em)}   /* holds the space a real 3–4 line quote will take */
  .quote figcaption{border-top:1px solid rgba(212,168,58,.22);padding-top:14px;
    display:flex;flex-direction:column;gap:6px;
    min-height:78px}   /* room for a two-line event caption, so every divider lines up */
  .quote .who{font-size:var(--t-sm);color:#fff;font-weight:500}
  .quote .evt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:#b8ac93}
  /* the hatched placeholder, re-inked for a dark ground (the light version is ~2:1 here) */
  .quotes .todo{color:#f0cc70;border-bottom-color:#d4a83a;
    background:repeating-linear-gradient(135deg,rgba(212,168,58,.2) 0 7px,transparent 7px 14px)}
  @media (max-width:860px){ .quotegrid{grid-template-columns:1fr} .quote blockquote{min-height:0} }

  /* ══ INTERACTION ══ */
  @media (prefers-reduced-motion:no-preference){
    .btn,.navlinks a,.contact a,.partner a,.nav-wa,.botbar a,footer.site-foot a,
    .switch button,.specrows li,.person img,.break img,.incl li{
      transition:background-color .2s var(--ease),border-color .2s var(--ease),
        color .2s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease),
        filter .4s var(--ease),opacity .3s var(--ease)}
    .navlinks a::after,.switch button::before{transition:transform .3s var(--ease)}
  }
  .btn-gold:hover{transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 18px 38px -16px rgba(212,168,58,1)}
  .btn-ghost:hover{border-color:var(--gold-br);color:#fff;background:rgba(212,168,58,.1);transform:translateY(-2px)}
  .btn-line:hover{border-color:var(--gold-br);color:var(--gold)}
  .btn-dark:hover{background:var(--band-3);transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
  .navlinks a:hover{color:var(--gold)} .navlinks a:hover::after{transform:scaleX(1)}
  .nav-wa:hover{background:var(--band-3);color:#fff}
  .switch button:hover:not([aria-selected="true"]){background:var(--paper-2)}
  .switch button:hover::before{transform:scaleX(1)}
  .specrows li:hover .v{color:var(--gold)}
  .person:hover img{filter:saturate(1.04);transform:translateY(-3px)}
  .break:hover img{transform:scale(1.02)}
  .incl li:hover::before{width:20px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--gold-br);outline-offset:3px}
  .hero a:focus-visible,.closer a:focus-visible,footer.site-foot a:focus-visible{outline-color:var(--gold-pl)}

  /* reveal — visible by default; JS arms only what is below the fold */
  @media (prefers-reduced-motion:no-preference){
    [data-reveal-armed] .reveal{opacity:0;transform:translateY(20px)}
    [data-reveal-armed] .reveal.in{opacity:1;transform:none;
      transition:opacity .7s var(--ease),transform .7s var(--ease)}
  }
  [hidden]{display:none!important}

  /* ══ STARTING PRICES (remorques) ══
     The same two facts the home page's configurator carries, on the page
     /pricing now redirects to. A visitor who came looking for a price must
     find one here without being sent back to the configurator. */
  .prices{display:grid;grid-template-columns:repeat(2,1fr);
    gap:clamp(14px,2vw,22px);margin:32px 0 0}
  .prices>div{border:1px solid var(--rule-2);background:var(--card);
    padding:clamp(18px,2.4vw,26px)}
  .prices .pm-name{font-family:"EB Garamond",Georgia,serif;font-size:var(--t-md);
    line-height:1.15;margin:0;color:var(--ink)}
  .prices .pm-from{font-family:"EB Garamond",Georgia,serif;
    font-size:clamp(20px,2.2vw,26px);line-height:1.2;color:var(--gold);
    margin:12px 0 0;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .prices .pm-note{font-size:var(--t-sm);color:var(--muted);margin:10px 0 0}
  @media (max-width:620px){ .prices{grid-template-columns:1fr} }

  /* ══ FORM VALIDATION ══
     The message is the error. An input ringed in red with no words is no
     use to someone on a phone who cannot see why the button did nothing. */
  .err{display:none;font-size:var(--t-sm);line-height:1.45;color:#a3301b;
    margin:2px 0 0;font-family:"DM Sans",sans-serif;letter-spacing:0;
    text-transform:none}
  .row.invalid .err{display:block}
  .row.invalid input,.row.invalid textarea,.row.invalid select{
    border-color:#a3301b;background:#fdf6f4}
  .row.invalid input:focus-visible,.row.invalid textarea:focus-visible{
    outline-color:#a3301b}
  .req{color:var(--gold);margin-left:3px}

  /* ══ TWO TESTIMONIALS, NOT THREE ══
     The grid is built for three; we have two real ones and will not invent
     a third. This lives in the stylesheet rather than a style attribute
     because an inline style outranks every rule here — including the
     breakpoint below, which is the one that matters on a phone. */
  .quotegrid.two{grid-template-columns:repeat(2,1fr)}
  @media (max-width:860px){ .quotegrid.two{grid-template-columns:1fr} }

  /* ══ SOCIAL LINKS (footer) ══
     Icon-only links, so the accessible name comes from aria-label on the
     anchor and the glyph is hidden from the accessibility tree. 48px square
     is the tap target; the icon inside is 20px. */
  footer.site-foot .social{display:flex;align-items:center;gap:2px}
  footer.site-foot .social a{min-width:48px;min-height:48px;
    display:inline-flex;align-items:center;justify-content:center;padding:0}
  footer.site-foot .social svg{width:20px;height:20px;fill:currentColor;display:block}
  footer.site-foot .social a:hover{color:#fff}