/* ==========================================================================
   RM Roofing & Renovations — Swiss editorial
   White ground, one neo-grotesque at extreme scale contrast, hard-edged
   photography. Violet is the single accent and it is structural.
   ========================================================================== */

:root{
  --paper:#0B0A0F;          /* ground: near-black with a violet bias */
  --paper-2:#16141C;        /* image wells, lifted panels */
  --ink:#F5F3F7;            /* type. 17.89:1 */
  --ink-2:#9B94A8;          /* secondary. 6.76:1 - passes AA body */
  --line:#282331;
  --line-2:#3A3345;

  /* On the dark ground the violet roles are the reverse of the white build:
     bright carries text (4.69:1), deep is fill-only (1.95:1). */
  /* Toned 2026-09-06: same hue family, saturation roughly halved, so the violet
     reads as a chosen brand colour rather than the stock electric one. Every
     contrast ratio below was measured and is equal to or better than the
     saturated values it replaces - toning down cost no accessibility. */
  --violet:#9B6ACB;         /* links, rules, active. 5.00:1 - passes AA body (was 4.69) */
  --violet-fill:#4E3573;    /* button + stamp fills. white on it = 10.09:1 */
  --violet-lt:#C3AAD9;      /* sustained accent text. 9.46:1 (was 9.03) */
  --violet-hi:#C3AAD9;
  --violet-wash:#1E1926;

  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --maxw:1560px;

  --t-micro:.78rem;
  --t-sm:.9rem;
  --t-0:1rem;
  --t-lede:clamp(1.05rem,.98rem + .4vw,1.32rem);
  --t-mid:clamp(1.5rem,1.05rem + 2vw,2.9rem);
  --t-big:clamp(2.3rem,1.2rem + 4.6vw,5.2rem);
  --t-huge:clamp(3.6rem,.6rem + 12.5vw,13rem);

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-0);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

html[data-lang="fr"] [lang="en"]{display:none}
html[data-lang="en"] [lang="fr"]{display:none}

img,video{display:block;max-width:100%}

a{color:var(--violet);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--violet);color:#fff;padding:.8rem 1.2rem}
.skip:focus{left:0}

/* ---------- shared type ---------- */
.huge,.big,.mid{
  font-weight:800;letter-spacing:-.035em;line-height:.86;
  margin:0;text-transform:uppercase;text-wrap:balance;
}
.huge{font-size:var(--t-huge);letter-spacing:-.045em}
.hero h1.huge{color:var(--violet)}
.big{font-size:var(--t-big)}
.mid{font-size:var(--t-mid);letter-spacing:-.02em;line-height:1.05;text-transform:none;font-weight:600}

.lede{font-size:var(--t-lede);line-height:1.4;margin:0;max-width:38ch}
.micro{font-size:var(--t-micro);line-height:1.55;color:var(--ink-2);margin:0;max-width:44ch}
.pending{color:var(--violet-lt)}
.tag{font-size:var(--t-micro);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--violet-fill);color:#fff;border:1px solid var(--violet-fill);
  padding:.85rem 1.5rem;font:inherit;font-size:var(--t-sm);font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:var(--violet);border-color:var(--violet);color:#0B0A0F}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost b{font-weight:700}
.btn.ghost:hover{background:transparent;border-color:var(--violet);color:var(--violet-lt)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:none}
/* logo.png has no alpha channel, but on a dark ground `screen` drops the
   black plate. Still replace with the vector when it arrives. */
.brand img{height:34px;width:auto;display:block;mix-blend-mode:screen;filter:contrast(1.2) saturate(1.35) brightness(1.15)}
.brand .mark{display:grid;place-items:center;flex:none}
.brand-txt{font-size:var(--t-sm);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.brand-txt b{font-weight:400;color:var(--ink-2)}

.nav-links{display:flex;gap:1.9rem}
.nav-links a{color:var(--ink);text-decoration:none;font-size:var(--t-sm);position:relative;padding-block:.2rem}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--violet);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}

.nav-act{display:flex;align-items:center;gap:.7rem;flex:none}
.lang{
  display:flex;gap:.25rem;background:transparent;border:1px solid var(--line-2);
  padding:.45rem .55rem;font:inherit;font-size:var(--t-micro);font-weight:700;cursor:pointer;color:var(--ink-2);
}
.lang:hover{border-color:var(--violet)}
.lang .a{color:var(--violet)}
html[data-lang="en"] .lang .a{color:var(--ink-2)}
html[data-lang="en"] .lang .b{color:var(--violet)}
.nav-cta{
  font-size:var(--t-sm);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}
.nav-cta:hover{color:var(--violet);border-color:var(--violet)}

.burger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:.5rem;width:40px}
.burger span{display:block;height:1.5px;background:var(--ink);width:18px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:flex}
  .nav-cta{display:none}
  .nav-links{
    position:fixed;inset:var(--nav-h,60px) 0 auto 0;background:var(--paper);
    flex-direction:column;gap:0;padding:0 var(--pad) 1.6rem;
    border-bottom:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
main > section{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- photo panels: hard edges, no shadow, no radius ---------- */
.panel{position:relative;margin:0;overflow:hidden;background:var(--paper-2)}
.panel img,.panel video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.panel.tall img,.panel.tall video{aspect-ratio:3/4}
.panel.wide img,.panel.wide video{aspect-ratio:16/10}
.panel.small img{aspect-ratio:16/11}
.ph{
  position:absolute;top:0;left:0;z-index:2;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--violet-fill);padding:.25rem .5rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding-block:clamp(2rem,5vw,4rem) clamp(3.5rem,7vw,6rem);
  align-items:start;
}
@media(min-width:1000px){.hero{grid-template-columns:1.35fr .65fr;gap:clamp(2rem,4vw,4rem)}}

.hero-labels{display:flex;gap:clamp(2rem,8vw,7rem);margin-bottom:1.2rem}
.hero-labels p{margin:0;font-size:var(--t-micro);line-height:1.45;color:var(--ink)}

.hero h1.huge{margin:0 0 1.6rem}

.hero-body{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.hero-act{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

.hero-media{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:560px) and (max-width:999px){.hero-media{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement{padding-block:clamp(3rem,7vw,7rem);border-top:1px solid var(--line)}
.statement .big{margin-bottom:clamp(2rem,4vw,3.5rem)}
.cols{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:820px){.cols{grid-template-columns:1.1fr .9fr .9fr;gap:clamp(1.5rem,3vw,3rem)}}
.col-txt{display:flex;flex-direction:column;gap:1.1rem}
.col-txt p{font-size:var(--t-sm);line-height:1.6;margin:0;max-width:36ch}

/* ==========================================================================
   SERVICES + MARQUEE
   ========================================================================== */
.svc{padding-block:clamp(3rem,7vw,7rem) clamp(1.6rem,3vw,2.6rem);border-top:1px solid var(--line)}
.svc-head{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:900px){.svc-head{grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,6vw,5rem);align-items:start}}

.svc-list{list-style:none;margin:0;padding:0}
.svc-list li.svc-label{
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);border:0;padding:0 0 1.1rem;
}
.svc-list li.svc-label::before{content:none;counter-increment:none}
.svc-list li.svc-label:hover{color:var(--ink-2);transform:none}
.svc-list li{
  display:flex;align-items:baseline;gap:.9rem;
  font-size:1.02rem;color:var(--ink);padding:.7rem 0;
  border-top:1px solid var(--line);transition:color .25s var(--ease),transform .25s var(--ease);
}
.svc-list li:last-child{border-bottom:1px solid var(--line)}
.svc-list li::before{
  content:counter(svc,decimal-leading-zero);counter-increment:svc;
  font-size:var(--t-micro);color:var(--violet);font-variant-numeric:tabular-nums;flex:none;
}
.svc-list{counter-reset:svc}
.svc-list li:hover{color:var(--violet-lt);transform:translateX(.4rem)}

/* the heading sits on the same top line as the list, not floating mid-column */
.svc-head .mid{align-self:start;max-width:20ch}

/* the signature moment: words and photographs on one moving strip */
.marquee{
  width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  border-block:1px solid var(--line);padding-block:1.6rem;
}
.track{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3.5rem);width:max-content;will-change:transform}
.mw{
  font-size:clamp(2.6rem,7vw,7rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;text-transform:uppercase;white-space:nowrap;
}
.mw:nth-child(4n+1){color:var(--ink)}
.mw:nth-child(4n+3){color:var(--violet)}
.mi{flex:none;display:block;width:clamp(150px,17vw,300px)}
.mi img{width:100%;aspect-ratio:16/10;object-fit:cover}
.marquee-note{font-size:var(--t-micro);margin:.9rem 0 0}

/* ==========================================================================
   WORK
   ========================================================================== */
.work{padding-block:clamp(3rem,7vw,7rem);border-top:1px solid var(--line)}
.work-head{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2.5rem;align-items:end}
@media(min-width:900px){.work-head{grid-template-columns:1.5fr .8fr;gap:clamp(2rem,5vw,5rem)}}
.work-side{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.types{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.types li{font-size:var(--t-sm);color:var(--ink-2)}
.types li.on{color:var(--ink);font-weight:600}

.cards{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{margin:0;position:relative}
.card-media{position:relative;overflow:hidden;background:var(--paper-2)}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* black panel slides up from the bottom edge of the image */
.card-panel{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:var(--violet-fill);color:#fff;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:1.4rem;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.card:hover .card-panel,.card:focus-within .card-panel{transform:translateY(0)}
.cp-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.cp-name{font-size:var(--t-sm);font-weight:600}
.cp-cta{color:#fff;font-size:var(--t-sm);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.cp-cta:hover{border-color:#fff;color:#fff}
.cp-bot{display:flex;justify-content:space-between;align-items:center}
.count{font-size:var(--t-micro);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.count b{font-weight:700}
.count i{font-style:normal;opacity:.6}
.arrows{display:flex;gap:.3rem}
.arrows button{
  background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.arrows button:hover{background:#fff;border-color:#fff;color:var(--violet-fill)}
.arrows svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the panel covers the image bottom, so the card's own label sits below it */
.card-foot{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  margin:.7rem 0 0;font-size:var(--t-sm);
}
.card-foot em{font-style:normal;position:static;background:var(--violet-fill);color:#fff;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.2rem .45rem}
.cards-note{font-size:var(--t-micro);margin:1.2rem 0 0}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{
  padding-block:clamp(3rem,7vw,7rem);border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;
}
@media(min-width:960px){.about{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem)}}
.about-copy{display:flex;flex-direction:column;gap:1.5rem}
.statement-lg{font-size:clamp(1.2rem,.9rem + 1.2vw,1.95rem);line-height:1.3;margin:0;max-width:26ch;font-weight:500}
.about-stack{display:grid;gap:1rem;grid-template-columns:1fr 1fr;align-items:start}
.about-stack .panel:first-child{margin-top:clamp(1.5rem,5vw,5rem)}
.about-stack .panel img{aspect-ratio:3/4}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.avis{padding-block:clamp(3rem,7vw,7rem);border-top:1px solid var(--line)}
.avis-flag{font-size:var(--t-micro);margin:0 0 2rem;max-width:60ch;line-height:1.55}
.avis-in{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media(min-width:820px){.avis-in{grid-template-columns:.7fr 1.8fr;gap:clamp(2rem,6vw,6rem)}}

.avis-who{display:flex;flex-direction:column;gap:.45rem}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--violet-wash);border:1px solid var(--line-2);display:block;margin-bottom:.5rem}
.who-name{margin:0;font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.who-loc{margin:0;font-size:var(--t-micro);color:var(--ink-2)}
.avis-nav{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem}
.avis-nav .count{font-size:var(--t-micro);color:var(--ink-2);font-variant-numeric:tabular-nums}
.avis-nav .count b{color:var(--ink);font-weight:700}
.avis-nav .arrows button{
  background:transparent;border:1px solid var(--line-2);color:var(--ink);
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.avis-nav .arrows button:hover{background:var(--violet-fill);border-color:var(--violet-fill);color:#fff}
.avis-nav .arrows svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* without JS every quote is readable; the carousel is the enhancement */
.quote-wrap{position:relative}
.quote-wrap .quote{margin:0 0 2rem}
.quote-wrap.carousel .quote{display:none;margin:0}
.quote-wrap.carousel .quote.on{display:block}
.quote p{
  font-size:clamp(1.25rem,.85rem + 1.7vw,2.5rem);line-height:1.22;margin:0;
  font-weight:500;letter-spacing:-.015em;
}
.quote p.plain{color:var(--ink)}

.avis-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:2.5rem;
  padding-top:2rem;border-top:1px solid var(--line);max-width:640px;margin-left:auto}
.avis-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ==========================================================================
   QUOTE FORM - three steps, triage first
   ========================================================================== */
.quote-sec{padding-block:clamp(3rem,7vw,7rem);border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:900px){.quote-sec{grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem)}}
.q-head{display:flex;flex-direction:column;gap:1.2rem}

.qform{display:flex;flex-direction:column;gap:1.6rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-prog{height:2px;background:var(--line);width:100%}
.q-prog span{display:block;height:100%;width:100%;background:var(--violet);transform:scaleX(.3333);transform-origin:left center;transition:transform .45s var(--ease)}
.q-step-n{margin:0;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.q-step-n b{color:var(--ink)}

.step{border:0;padding:0;margin:0;display:none}
.step.on{display:block}
.step legend{
  font-size:clamp(1.1rem,.95rem + .6vw,1.6rem);font-weight:600;letter-spacing:-.015em;
  color:var(--ink);padding:0;margin-bottom:1.4rem;
}

/* step 1 - the options are the triage */
.opts{display:grid;grid-template-columns:1fr;gap:.7rem}
@media(min-width:620px){.opts{grid-template-columns:1fr 1fr}}
.opt{
  display:flex;flex-direction:column;gap:.25rem;cursor:pointer;
  border:1px solid var(--line-2);padding:1rem 1.1rem;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.opt:hover{border-color:var(--ink-2)}
.opt input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.opt b{font-size:1rem;font-weight:600;color:var(--ink)}
.opt em{font-style:normal;font-size:var(--t-micro);color:var(--ink-2);line-height:1.5}
.opt:has(input:checked){border-color:var(--violet);background:rgba(94,29,147,.18)}
.opt:has(input:focus-visible){outline:2px solid var(--violet);outline-offset:3px}
.opt.urgent b{color:var(--violet-lt)}
.opt.urgent:has(input:checked){border-color:var(--violet-lt)}

.urgent-out{
  margin-top:1.2rem;border:1px solid var(--violet);padding:1.2rem 1.3rem;
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;
}
.urgent-out p{margin:0;font-size:var(--t-sm);color:var(--ink);max-width:52ch;line-height:1.55}
.urgent-out[hidden]{display:none}
.linkish{
  background:transparent;border:0;padding:0;font:inherit;font-size:var(--t-micro);
  color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.linkish:hover{color:var(--violet-lt)}

.fg{display:grid;grid-template-columns:1fr;gap:1.4rem 2rem}
@media(min-width:640px){.fg{grid-template-columns:1fr 1fr}}
.f{margin:0;display:flex;flex-direction:column;gap:.35rem}
.f.full,.f-photos{grid-column:1 / -1;margin-top:1.4rem}
.f label{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.f input,.f textarea,.f select{
  font:inherit;font-size:var(--t-0);color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line-2);padding:.55rem 0;width:100%;resize:vertical;
  transition:border-color .25s var(--ease);
}
.f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 10px) 1.15rem,calc(100% - 5px) 1.15rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.6rem}
.f select option{background:var(--paper-2);color:var(--ink)}
.f input[type=file]{border-bottom:1px dashed var(--line-2);padding:.7rem 0;font-size:var(--t-sm);color:var(--ink-2);cursor:pointer}
.filelist{font-size:var(--t-micro);color:var(--violet-lt);line-height:1.5;word-break:break-word}
.filelist:empty{display:none}
.f input:hover,.f textarea:hover,.f select:hover{border-bottom-color:var(--ink-2)}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-bottom-color:var(--violet)}
.f.invalid input,.f.invalid textarea,.f.invalid select{border-bottom-color:#FF6B4A}
.hint{font-size:var(--t-micro);color:var(--ink-2);line-height:1.5}
.hint.pending{color:var(--violet-lt)}
.err{font-size:var(--t-micro);color:#FF6B4A;min-height:1.05em}

.f-wide{grid-column:1 / -1}

.q-send{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;border-top:1px solid var(--line)}
.q-send [hidden]{display:none}
.formstate{margin:0;font-size:var(--t-sm);color:var(--violet-lt);min-height:1.3em}
.formstate.bad{color:#FF6B4A}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--paper-2);color:var(--ink);margin-top:clamp(3rem,7vw,6rem);border-top:1px solid var(--line)}
.foot-in{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(2.5rem,5vw,4.5rem) var(--pad) 2.5rem;
  display:grid;grid-template-columns:1fr;gap:2.2rem;
}
@media(min-width:820px){.foot-in{grid-template-columns:1.4fr 1fr .7fr .9fr;gap:2.5rem}}
.foot-brand img{height:38px;width:auto;mix-blend-mode:screen;filter:contrast(1.2) saturate(1.3) brightness(1.15);margin-bottom:1rem}
.foot .micro{color:var(--ink-2)}
.foot .micro.pending{color:var(--violet-lt)}
.foot-svc,.foot-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot-svc li{font-size:1.02rem;font-weight:500}
.foot-nav a{color:var(--ink-2);text-decoration:none;font-size:var(--t-sm)}
.foot-nav a:hover{color:var(--violet)}
.foot-contact{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.foot-contact a{color:var(--ink);text-decoration:none;font-size:var(--t-sm);border-bottom:1px solid var(--line-2)}
.foot-contact a:hover{color:var(--violet);border-color:var(--violet)}
.foot-contact .tel{font-size:1.3rem;font-weight:700;border:0}
.foot-legal{
  max-width:var(--maxw);margin-inline:auto;padding:1.2rem var(--pad) 2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);font-size:var(--t-micro);color:var(--ink-2);
}
.foot-legal p{margin:0}
.foot-legal a{color:var(--ink-2)}
.foot-legal a:hover{color:var(--violet)}

/* ==========================================================================
   MOTION
   Nothing is hidden in CSS: the page renders complete without JavaScript.
   GSAP sets its start states inside gsap.matchMedia(), which reverts them
   wholesale when prefers-reduced-motion matches.
   ========================================================================== */
.ln{padding-bottom:.1em}
.huge .ln,.big .ln{padding-bottom:.14em}

@media(prefers-reduced-motion:reduce){
  .track{transform:none!important}
  .hero video{display:none}
}

/* Law 25 s.8 collection notice, sits directly under the send button. Quiet by
   design - it has to be readable, not loud, and it must not compete with the
   submit action. */
.q-notice{
  max-width:66ch;margin:1.4rem 0 0;
  font-size:.82rem;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:1rem;
}
.q-notice b{color:var(--ink);font-weight:600}
.q-notice a{color:var(--violet)}