/* ──────────────────────────────────────────────────────────
   MONTRES PAGE STYLES
   ────────────────────────────────────────────────────────── */
.page-montres{background:var(--paper)}

/* ── EDITORIAL HERO ──────────────────────────────────────── */
.m-hero{
  max-width:1440px;margin:18px auto 0;padding:0 36px;
  position:relative;
}
.m-hero-frame{
  position:relative;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(91,223,234,.22), transparent 55%),
    radial-gradient(100% 70% at 20% 90%, rgba(230,57,70,.22), transparent 55%),
    linear-gradient(180deg, #0F1B22 0%, #06090C 100%);
  color:#fff;
  min-height:640px;
  padding:96px 64px 64px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
@media (max-width:900px){.m-hero-frame{grid-template-columns:1fr;padding:64px 32px}}

.m-hero-text{position:relative;z-index:2}
.m-hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  padding:9px 16px;border-radius:999px;margin-bottom:28px;
  backdrop-filter:blur(8px);
}
.m-hero-eyebrow .x{
  font-family:var(--display);font-size:9px;letter-spacing:.05em;
  padding:2px 6px;border-radius:4px;background:var(--accent);color:var(--ink);
}

.m-hero h1{
  font-family:var(--display);
  font-size:clamp(54px,7vw,108px);line-height:.88;letter-spacing:-.015em;
  margin:0;text-wrap:balance;
}
.m-hero h1 em{
  font-style:normal;font-family:var(--serif);font-weight:600;
  color:var(--accent);
  text-shadow:0 0 40px rgba(91,223,234,.45);
}
.m-hero-sub{
  margin:24px 0 0;font-size:17px;line-height:1.55;
  color:rgba(255,255,255,.78);max-width:540px;
}
.m-hero-stats{
  margin-top:38px;display:grid;grid-template-columns:repeat(3,auto);gap:38px;
  width:max-content;
}
.m-hero-stats .v{font-family:var(--display);font-size:34px;line-height:1;color:#fff}
.m-hero-stats .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}

/* Hero visual */
.m-hero-visual{
  position:relative;aspect-ratio:1;
  border-radius:20px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, #f0eee7 0%, #c7c3b6 65%, #5e5b51 100%);
  display:grid;place-items:center;
}
.m-hero-visual .ph-label{
  position:absolute;left:18px;top:18px;
  font:600 10px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(13,20,24,.55);
  background:rgba(255,255,255,.78);padding:7px 9px;border-radius:6px;z-index:3;
}
.m-hero-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* hex layer in hero */
.m-hero-hex{position:absolute;inset:0;pointer-events:none}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.crumbs{
  max-width:1440px;margin:0 auto;padding:14px 36px 0;
  font:500 12px/1 var(--sans);color:rgba(13,20,24,.55);
  display:flex;gap:8px;align-items:center;
}
.crumbs a{color:rgba(13,20,24,.55)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.crumbs .here{color:var(--ink);font-weight:600}

/* ── EDITORIAL CHAPTER ───────────────────────────────────── */
.chapter{
  max-width:1100px;margin:0 auto;padding:96px 36px 0;
}
.chapter .eyebrow{
  font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-deep);display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.chapter .eyebrow::before{content:"";width:24px;height:1.5px;background:var(--accent)}
.chapter h2{
  font-family:var(--display);
  font-size:clamp(36px,4.4vw,64px);
  line-height:.96;letter-spacing:-.01em;margin:0 0 28px;text-wrap:balance;
}
.chapter h2 em{
  font-style:italic;font-family:var(--serif);font-weight:600;color:var(--accent-deep);
}
.chapter .lede{
  font-family:var(--serif);font-size:24px;line-height:1.4;font-weight:500;
  color:var(--ink);margin:0 0 28px;max-width:820px;
}
.chapter p{
  font-size:16px;line-height:1.7;color:rgba(13,20,24,.78);
  max-width:720px;margin:0 0 18px;
}

/* Pull quote */
.pullquote{
  max-width:980px;margin:80px auto 0;padding:0 36px;
  text-align:center;
}
.pullquote::before{
  content:"";display:block;width:42px;height:42px;margin:0 auto 18px;
  background:var(--accent);border-radius:50%;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M7.17 6A5.17 5.17 0 0 0 2 11.17V18h6.83v-6.83H5.17A2 2 0 0 1 7.17 9V6zm10 0a5.17 5.17 0 0 0-5.17 5.17V18h6.83v-6.83h-3.66A2 2 0 0 1 17.17 9V6z'/></svg>") no-repeat center;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M7.17 6A5.17 5.17 0 0 0 2 11.17V18h6.83v-6.83H5.17A2 2 0 0 1 7.17 9V6zm10 0a5.17 5.17 0 0 0-5.17 5.17V18h6.83v-6.83h-3.66A2 2 0 0 1 17.17 9V6z'/></svg>") no-repeat center;
}
.pullquote blockquote{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(26px,3vw,40px);line-height:1.3;letter-spacing:-.01em;
  margin:0;color:var(--ink);text-wrap:balance;
}
.pullquote cite{
  display:block;margin-top:22px;font-style:normal;
  font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(13,20,24,.55);
}
.pullquote cite span{display:block;color:var(--accent-deep);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:none;margin-bottom:4px;font-family:var(--serif);font-style:italic}

/* ── GALLERY (8 models) ──────────────────────────────────── */
.gallery{
  max-width:1440px;margin:0 auto;padding:96px 36px 0;
}
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:20px}
.g-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media (max-width:900px){.g-grid{grid-template-columns:repeat(2,1fr)}}

.g-card{
  position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:var(--bg);
  cursor:pointer;
  isolation:isolate;
}
.g-card::after{
  content:"";position:absolute;inset:0;border:1px solid rgba(13,20,24,.06);
  border-radius:18px;pointer-events:none;
}
.g-card .ph-label{
  position:absolute;left:14px;top:14px;
  font:600 9.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(13,20,24,.55);
  background:rgba(255,255,255,.78);padding:6px 8px;border-radius:5px;z-index:3;
}
.g-card .g-num{
  position:absolute;right:14px;top:14px;z-index:3;
  font-family:var(--display);font-size:11px;letter-spacing:.1em;
  color:rgba(13,20,24,.65);
  background:rgba(255,255,255,.78);padding:6px 9px;border-radius:5px;
}
.g-card .g-info{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:14px 16px;
  display:flex;justify-content:space-between;align-items:flex-end;
  background:linear-gradient(0deg, rgba(13,20,24,.55), transparent 80%);
  color:#fff;
}
.g-card .g-info .n{font-family:var(--display);font-size:17px;line-height:1;letter-spacing:.02em}
.g-card .g-info .c{font-size:11px;opacity:.85;margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.g-card .g-watch{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60%;aspect-ratio:1;border-radius:50%;
  background:
    repeating-radial-gradient(circle, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 45% 40%, #fff 0%, var(--dial,#E63946) 55%, #1a1a1a 100%);
  box-shadow:0 0 0 10px rgba(255,255,255,.85), 0 0 0 12px rgba(0,0,0,.85),
             0 20px 40px rgba(0,0,0,.18);
}
.g-card .g-watch::before{
  content:"";position:absolute;inset:18%;border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.15) 1.5px, transparent 2px) 0 0/8px 8px,
    var(--dial,#E63946);
}
.g-card .g-watch::after{
  content:"";position:absolute;left:50%;top:50%;width:3%;height:34%;background:#1a1a1a;
  transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(40deg);border-radius:2px;
}
/* Flip card */
.g-card{perspective:1200px;cursor:pointer}
.g-flip{
  position:absolute;inset:0;z-index:2;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.g-card.is-flipped .g-flip{transform:rotateY(180deg)}
.g-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.g-back{transform:rotateY(180deg)}
.g-face img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:6%;
}
.g-flip-hint{
  position:absolute;left:14px;bottom:14px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(13,20,24,.65);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);
  padding:6px 9px;border-radius:999px;
  opacity:0;transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.g-card:hover .g-flip-hint,
.g-card.is-flipped .g-flip-hint{opacity:1;transform:translateY(0)}
.g-card.is-flipped .g-flip-hint{color:var(--ink);background:#fff}
.g-card.is-flipped .g-info{background:linear-gradient(0deg, rgba(13,20,24,.65), transparent 80%)}

/* Disable the photo hover scale when flip is in play */
.g-card:hover .g-photo{transform:none}
.g-card:hover .g-watch{transform:translate(-50%,-52%) rotate(-4deg)}
.g-card .g-watch{transition:transform .4s ease}

/* ── DESIGN DETAILS ──────────────────────────────────────── */
.details{
  max-width:1440px;margin:0 auto;padding:96px 36px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
@media (max-width:900px){.details{grid-template-columns:1fr}}
.details-visual{
  position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#E9E5DA,#CCC5B3);
  display:grid;place-items:center;
}
.details-visual .ph-label{
  position:absolute;left:18px;top:18px;
  font:600 10px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(13,20,24,.55);
  background:rgba(255,255,255,.78);padding:7px 9px;border-radius:6px;z-index:3;
}
.details-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.feature{
  display:grid;grid-template-columns:36px 1fr;gap:18px;align-items:flex-start;
  padding:18px 0;border-top:1px solid var(--rule);
}
.feature:last-child{border-bottom:1px solid var(--rule)}
.feature .fnum{
  font-family:var(--display);font-size:13px;color:var(--accent-deep);letter-spacing:.06em;
  padding-top:2px;
}
.feature h3{
  font-family:var(--display);font-size:18px;margin:0 0 6px;letter-spacing:.02em;
}
.feature p{font-size:14px;line-height:1.55;color:rgba(13,20,24,.7);margin:0;max-width:480px}

/* ── SPECS STRIP ─────────────────────────────────────────── */
.specs{
  background:var(--ink);color:var(--paper);margin-top:96px;padding:64px 36px;
}
.specs-inner{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:24px;
}
@media (max-width:900px){.specs-inner{grid-template-columns:repeat(2,1fr);gap:32px}}
.spec{display:flex;flex-direction:column;gap:10px}
.spec .v{font-family:var(--display);font-size:34px;line-height:1;color:var(--accent)}
.spec .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,247,.65)}
.spec .d{font-size:13px;color:rgba(250,250,247,.78);line-height:1.5}

/* ── CAUSE ──────────────────────────────────────────────── */
.cause{
  max-width:1100px;margin:0 auto;padding:96px 36px 0;text-align:center;
}
.cause .big{
  font-family:var(--display);font-size:clamp(56px,8vw,128px);
  line-height:.95;letter-spacing:-.01em;color:var(--accent-deep);
  margin:0 0 12px;
}
.cause h2{
  font-family:var(--display);font-size:clamp(28px,3vw,42px);
  letter-spacing:-.01em;margin:0 0 22px;
}
.cause p{
  font-size:16px;line-height:1.65;color:rgba(13,20,24,.72);
  max-width:680px;margin:0 auto;
}

/* ── CTA STRIP ──────────────────────────────────────────── */
.cta-strip{
  max-width:1440px;margin:96px auto 0;padding:0 36px;
}
.cta-frame{
  position:relative;overflow:hidden;border-radius:24px;
  background:
    radial-gradient(120% 80% at 20% 20%, rgba(230,57,70,.28), transparent 50%),
    radial-gradient(120% 80% at 80% 80%, rgba(91,223,234,.35), transparent 50%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
  padding:80px 64px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;
}
@media (max-width:900px){.cta-frame{grid-template-columns:1fr;padding:56px 32px}}
.cta-frame h2{
  font-family:var(--display);font-size:clamp(34px,4vw,56px);
  margin:0 0 14px;line-height:.95;
}
.cta-frame h2 em{font-style:italic;font-family:var(--serif);font-weight:600;color:var(--accent-deep)}
.cta-frame p{font-size:15px;line-height:1.55;color:rgba(13,20,24,.7);margin:0 0 24px;max-width:520px}
.cta-frame .btn-primary{background:var(--ink);color:#fff;box-shadow:none}
.cta-frame .btn-primary:hover{background:#000}

/* Reveal */
.r{opacity:0;transform:translateY(20px);animation:reveal .9s cubic-bezier(.2,.7,.2,1) forwards}
.r.d1{animation-delay:.1s}.r.d2{animation-delay:.22s}.r.d3{animation-delay:.34s}.r.d4{animation-delay:.46s}

/* ──────────────────────────────────────────────────────────
   MOBILE — 768px (montres page)
   ────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .m-hero{margin-top:10px;padding:0 16px}
  .m-hero-frame{
    grid-template-columns:1fr;gap:32px;
    padding:56px 24px 40px;min-height:auto;border-radius:18px;
  }
  .m-hero-eyebrow{font-size:10px;padding:7px 13px;margin-bottom:18px;letter-spacing:.18em}
  .m-hero h1{font-size:clamp(42px,11vw,72px)}
  .m-hero-sub{font-size:14.5px;margin-top:18px}
  .m-hero-stats{margin-top:28px;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
  .m-hero-stats .v{font-size:24px}
  .m-hero-stats .l{font-size:10px;letter-spacing:.12em}
  .m-hero-visual{aspect-ratio:1;border-radius:14px}

  .crumbs{padding:14px 16px 0;font-size:11.5px;flex-wrap:wrap;row-gap:4px}

  .chapter{padding:64px 16px 0}
  .chapter h2{font-size:clamp(28px,8vw,42px);margin-bottom:20px}
  .chapter .lede{font-size:18px;line-height:1.45;margin-bottom:20px}
  .chapter p{font-size:14.5px;line-height:1.65}

  .pullquote{padding:0 16px;margin-top:56px}
  .pullquote blockquote{font-size:clamp(20px,6vw,28px)}
  .pullquote::before{width:34px;height:34px}

  .gallery{padding:64px 16px 0}
  .gallery-head{margin-bottom:24px}
  .g-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .g-card{border-radius:14px}
  .g-card .g-info{padding:10px 12px}
  .g-card .g-info .n{font-size:14px}
  .g-card .g-info .c{font-size:10px}
  .g-card .ph-label,.g-card .g-num{font-size:8.5px;padding:5px 6px}
  .g-flip-hint{font-size:8.5px;padding:5px 7px;letter-spacing:.1em}

  .details{padding:64px 16px 0;grid-template-columns:1fr;gap:32px}
  .details-visual{aspect-ratio:4/5;border-radius:14px}
  .feature h3{font-size:16px}
  .feature p{font-size:13px}
  .feature{grid-template-columns:32px 1fr;gap:14px}

  .specs{padding:48px 20px;margin-top:64px}
  .specs-inner{grid-template-columns:1fr 1fr;gap:24px}
  .spec .v{font-size:26px}
  .spec .l{font-size:10px}
  .spec .d{font-size:12.5px}

  .cause{padding:64px 16px 0}
  .cause .big{font-size:clamp(48px,16vw,80px)}
  .cause h2{font-size:clamp(22px,6vw,30px)}
  .cause p{font-size:14.5px}

  .cta-strip{margin-top:64px;padding:0 16px}
  .cta-frame{grid-template-columns:1fr;padding:44px 24px;border-radius:18px;gap:20px}
  .cta-frame h2{font-size:clamp(28px,7.5vw,38px)}
  .cta-frame p{font-size:14px}
}