:root {
    color-scheme: light;
    --bg: #f7f5fc;
    --bg-2: #efebfa;
    --paper: #ffffff;
    --line: rgba(21, 22, 44, 0.12);
    --ink: #15162c;
    --ink-2: #585673;
    /* the four logo colours: fills */
    --vi: #509eec;
    --cc: #b9a5ff;
    --dm: #93e2f9;
    --dd: #f0b3f5;
    /* the same hues, deep enough for text on the light ground */
    --vi-ink: #1d6cc4;
    --cc-ink: #6a4ee0;
    --dm-ink: #0a7896;
    --dd-ink: #b0369f;
    --grad: linear-gradient(100deg, #509eec 0%, #85a1f5 26%, #b9a5ff 50%, #f0b3f5 70%, #93e2f9 100%);
    --grad-ink: linear-gradient(100deg, #1d6cc4 0%, #4f7be6 28%, #6a4ee0 52%, #9a4fd0 70%, #0a8fb3 100%);
    --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
    --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
    --gutter: clamp(16px, 4vw, 48px);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html.lenis, html.lenis body { height: auto; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 3px; border-radius: 4px; }
  .wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
  .label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
  .grad-text { background: var(--grad-ink); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
  .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--u); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--u) 25%, transparent); }
  [data-u="vi"] { --u: var(--vi); --u-ink: var(--vi-ink); --img: var(--img-vi); }
  [data-u="cc"] { --u: var(--cc); --u-ink: var(--cc-ink); --img: var(--img-cc); }
  [data-u="dm"] { --u: var(--dm); --u-ink: var(--dm-ink); --img: var(--img-dm); }
  [data-u="dd"] { --u: var(--dd); --u-ink: var(--dd-ink); --img: var(--img-dd); }

  /* ---------- Header ---------- */
  .top {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: rgba(247, 245, 252, 0.8);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 10px; }
  .brand img { height: 50px; width: auto; display: block; }
  .nav { display: flex; align-items: center; gap: 26px; }
  .nav a.u { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; color: var(--ink-2); transition: color .2s; }
  .nav a.u .dot { width: 7px; height: 7px; box-shadow: none; }
  .nav a.u:hover { color: var(--ink); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 20px; border-radius: 999px;
    font-family: var(--sans); font-size: 15px; font-weight: 600;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform .35s var(--ease), background-color .2s, border-color .2s, color .2s;
  }
  .btn-solid { background: var(--ink); color: var(--paper); }
  .btn-solid:hover { background: var(--cc-ink); }
  .btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
  .nav .btn { padding: 10px 18px; font-size: 14px; }

  /* ---------- Hero ---------- */
  .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
  .hero h1 {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(3.1rem, 8.2vw, 8rem); line-height: 0.94; letter-spacing: -0.03em;
    margin: 20px 0 26px; text-wrap: balance;
  }
  .hero h1 .line { display: block; animation: rise .9s var(--ease) both; }
  /* Slogan: line 1 in Cormorant Garamond, line 2 in a lighter Bodoni italic */
  .hero h1 .line:first-child { font-family: "Cormorant Garamond", var(--display); font-weight: 700; font-size: 1.08em; letter-spacing: -0.02em; }
  .hero h1 .line:nth-child(2) { animation-delay: .12s; }
  .hero h1 em { font-style: italic; font-weight: 500; letter-spacing: -0.02em; padding-right: .06em; animation: drift 9s ease-in-out infinite alternate; }
  .hero .lede { max-width: 36rem; font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); margin: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

  /* The mark: logo + construction drawing revealed by a lens */
  .mark { --lx: 50%; --ly: 50%; --lr: 0px; position: relative; justify-self: center; width: min(100%, 460px); aspect-ratio: 1; }
  .contours { position: absolute; inset: -100%; width: 300%; height: 300%; pointer-events: none; z-index: -1; }
  .contours circle { fill: none; stroke: rgba(106, 78, 224, .11); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .logo-layer { position: absolute; inset: 0; background: var(--logo) center / contain no-repeat; z-index: 1; }
  .logo-base {
    -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), transparent calc(var(--lr) - 1px), #000 var(--lr));
            mask-image: radial-gradient(circle at var(--lx) var(--ly), transparent calc(var(--lr) - 1px), #000 var(--lr));
  }
  .xray {
    position: absolute; inset: 0; z-index: 2;
    -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1px), transparent var(--lr));
            mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1px), transparent var(--lr));
  }
  .xray .logo-layer { opacity: .14; }
  .xray::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--lx) var(--ly), rgba(255,255,255,.75), rgba(247,245,252,.35) var(--lr)); }
  .build { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .build * { vector-effect: non-scaling-stroke; }
  .build .guides line { stroke: rgba(106, 78, 224, .32); stroke-width: 1; }
  .build .shapes > * { fill: none; stroke: var(--cc-ink); stroke-width: 1.4; stroke-dasharray: 18 12; }
  .build .shapes .fine { stroke-dasharray: 4 10; stroke-width: 1.2; }
  .build .marks > * { fill: none; stroke: var(--vi-ink); stroke-width: 1.4; }
  .build text { fill: var(--cc-ink); font-family: var(--sans); font-size: 30px; font-weight: 600; letter-spacing: .06em; }
  .lens-ring {
    position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
    width: calc(var(--lr) * 2); height: calc(var(--lr) * 2);
    transform: translate(calc(var(--lx) - var(--lr)), calc(var(--ly) - var(--lr)));
    border-radius: 50%; border: 1px solid rgba(106, 78, 224, .45);
    box-shadow: 0 10px 40px rgba(106, 78, 224, .12);
    opacity: 0; transition: opacity .3s;
  }
  .mark.lens-on .lens-ring { opacity: 1; }
  .lens-hint { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-size: 13px; color: var(--ink-2); z-index: 3; }

  /* ---------- Four universes (split panels) ---------- */
  .universes { padding-block: clamp(56px, 7vw, 96px) clamp(72px, 10vw, 140px); }
  .uni-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; margin-bottom: 20px; }
  .uni-head p { margin: 0; color: var(--ink-2); font-size: 15px; }
  .panels { display: flex; gap: 10px; height: clamp(440px, 68vh, 640px); }
  .panel {
    position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
    border-radius: 22px; text-decoration: none; isolation: isolate;
    transition: flex-grow .8s var(--ease), box-shadow .5s;
    border: 1px solid var(--line); background: var(--paper);
    container-type: inline-size;
  }
  .ph { background: var(--img) center / cover no-repeat; }
  .panel .ph { position: absolute; inset: 0; z-index: -2; transform: scale(1.04); transition: transform 1.2s var(--ease); }
  .panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(247,245,252,0) 36%, rgba(247,245,252,.86) 60%, rgba(247,245,252,.97) 100%); }
  .panel .in { position: absolute; inset: auto 0 0 0; padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 6px; }
  .panel .tag { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--u-ink); }
  .panel h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 13cqi, 2.6rem); line-height: 1.02; letter-spacing: -0.015em; }
  .panel p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 22rem; }
  .panel .go { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--u-ink); display: inline-flex; gap: 8px; align-items: center; }
  .panel .go span { transition: transform .4s var(--ease); }
  @media (hover: hover) and (min-width: 901px) {
    .panels:hover .panel, .panels:focus-within .panel { flex-grow: .75; }
    .panels .panel:hover, .panels .panel:focus-visible { flex-grow: 2.1; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--u) 70%, transparent); }
    .panel:hover .ph, .panel:focus-visible .ph { transform: scale(1); }
    .panel:hover .go span { transform: translateX(6px); }
  }
  /* rule-of-thirds grid on photography images */
  .thirds {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s; border-radius: inherit; z-index: 0;
    background:
      linear-gradient(90deg, transparent calc(100% / 3 - 1px), rgba(21,22,44,.3) calc(100% / 3 - 1px) calc(100% / 3), transparent calc(100% / 3) calc(200% / 3 - 1px), rgba(21,22,44,.3) calc(200% / 3 - 1px) calc(200% / 3), transparent calc(200% / 3)),
      linear-gradient(180deg, transparent calc(100% / 3 - 1px), rgba(21,22,44,.3) calc(100% / 3 - 1px) calc(100% / 3), transparent calc(100% / 3) calc(200% / 3 - 1px), rgba(21,22,44,.3) calc(200% / 3 - 1px) calc(200% / 3), transparent calc(200% / 3));
  }
  .panel:hover .thirds, .visual:hover .thirds { opacity: 1; }

  /* ---------- Chapters ---------- */
  .chapter { padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--line); }
  .chapter .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
  .chapter.flip .visual { order: 2; }
  .visual { position: sticky; top: 96px; border-radius: 22px; }
  .visual .ph { aspect-ratio: 4 / 5; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--u) 80%, transparent); }
  .u-name {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--display); font-style: italic; font-weight: 400;
    font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: 1; letter-spacing: -0.02em;
    color: var(--u-ink); margin: 0;
  }
  .u-name .dot { width: 14px; height: 14px; }
  .chapter h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.25; margin: 22px 0 14px; text-wrap: balance; max-width: 30ch; }
  .chapter .intro { color: var(--ink-2); margin: 0 0 36px; max-width: 38rem; }
  .offers { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
  .offers li { padding-block: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
  .offers li::before { content: ""; width: 8px; height: 8px; background: var(--u); margin-top: .58em; transform: rotate(45deg); }
  .offers b { font-weight: 600; display: block; }
  .offers span { grid-column: 2; color: var(--ink-2); font-size: 15px; }
  .chapter .btn-ghost { border-color: var(--u-ink); color: var(--u-ink); }
  .chapter .btn-ghost:hover { background: var(--u-ink); color: var(--paper); }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
      @keyframes reveal { from { opacity: .25; transform: translateY(36px); } to { opacity: 1; transform: none; } }
    }
  }

  /* ---------- Method ---------- */
  .method { background: var(--bg-2); border-block: 1px solid var(--line); padding-block: clamp(64px, 9vw, 120px); }
  .sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(32px, 5vw, 56px); }
  .sec-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; margin: 10px 0 0; }
  .sec-head p { max-width: 26rem; color: var(--ink-2); margin: 0; }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { padding-inline: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
  .steps li:first-child { border-left: 0; padding-left: 0; }
  .steps .n { font-family: var(--display); font-style: italic; font-size: 3rem; line-height: 1; color: var(--u-ink); }
  .steps h3 { font-size: 20px; font-weight: 600; margin: 20px 0 8px; }
  .steps p { margin: 0; color: var(--ink-2); font-size: 16px; }

  /* ---------- Contact ---------- */
  .contact { padding-block: clamp(72px, 10vw, 140px) 0; }
  .contact-card {
    border: 1px solid var(--line); border-radius: 28px;
    padding: clamp(28px, 5vw, 72px);
    background: radial-gradient(110% 130% at 100% 0%, rgba(80,158,236,.14), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(240,179,245,.22), transparent 60%), var(--paper);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px);
  }
  .contact h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -0.025em; margin: 14px 0 20px; text-wrap: balance; }
  .contact .side p { color: var(--ink-2); margin: 0 0 28px; max-width: 28rem; }
  .mail { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.8rem); text-decoration: none; overflow-wrap: anywhere; background-image: var(--grad); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 3px; }
  form { display: grid; gap: 18px; }
  fieldset { border: 0; margin: 0; padding: 0; }
  legend, label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 8px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { margin: 0; }
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .chip span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
  .chip input:checked + span { border-color: var(--u-ink); background: color-mix(in srgb, var(--u) 22%, var(--paper)); }
  .chip input:focus-visible + span { outline: 2px solid var(--u-ink); outline-offset: 2px; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 13px 15px; transition: border-color .2s, box-shadow .2s;
  }
  input:focus, textarea:focus { outline: none; border-color: var(--cc-ink); box-shadow: 0 0 0 4px rgba(185,165,255,.25); }
  textarea { min-height: 120px; resize: vertical; }
  .form-note { font-size: 14px; color: var(--cc-ink); min-height: 1.4em; margin: 0; }

  /* ---------- Footer ---------- */
  footer { margin-top: clamp(72px, 10vw, 140px); border-top: 1px solid var(--line); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
  footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
  footer img { height: 44px; width: auto; display: block; }
  footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
  footer a, footer small { color: var(--ink-2); text-decoration: none; font-size: 14px; }
  footer a:hover { color: var(--ink); }

  /* ---------- Visual Impact catalogue ---------- */
  .shop { padding-bottom: 140px; }
  .shop-top { padding-block: 22px 0; }
  .back { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
  .back:hover { color: var(--ink); }
  .shop-hero { padding-block: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 48px); }
  .shop-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
  .shop-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.8rem, 6.4vw, 6.2rem); line-height: .96; letter-spacing: -0.025em; margin: 18px 0 22px; text-wrap: balance; }
  .shop-hero h1 em { font-style: italic; font-weight: 400; color: var(--vi-ink); }
  .shop-hero .lede { color: var(--ink-2); max-width: 34rem; margin: 0 0 26px; font-size: clamp(16px, 1.4vw, 18px); }
  .facts { display: flex; flex-wrap: wrap; gap: 10px; }
  .facts span { padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
  .card-stage { position: relative; border-radius: 28px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(80% 90% at 50% 40%, #ffffff, #ece7fb 70%, #e4dcfa); }
  #card3d { width: 100%; aspect-ratio: 5 / 4; display: block; touch-action: pan-y; cursor: grab; }
  #card3d:active { cursor: grabbing; }
  .card-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
  .card-fallback div { width: 62%; aspect-ratio: 85 / 55; border-radius: 10px; background: var(--paper) var(--logo) 8% 50% / auto 80% no-repeat; box-shadow: 0 30px 60px -30px rgba(29,108,196,.5); transform: rotate(-8deg); }
  .card-ui { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
  .finishes { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--line); backdrop-filter: blur(8px); pointer-events: auto; }
  .finishes button { font: 600 13px var(--sans); color: var(--ink-2); background: none; border: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
  .finishes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .card-size { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: rgba(255,255,255,.85); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; }
  .fam-nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 71px); z-index: 15; background: rgba(247,245,252,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
  .fam-nav .wrap { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
  .fam-nav .wrap::-webkit-scrollbar { display: none; }
  .fam-nav a { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s; }
  .fam-nav a:hover { color: var(--ink); border-color: var(--line); }
  .fam-nav a.on { background: var(--ink); color: var(--paper); }
  .fam { padding-block: clamp(40px, 6vw, 72px) 0; scroll-margin-top: 140px; }
  .fam-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 32px; margin-bottom: 22px; }
  .fam-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; margin: 0; }
  .fam-head p { margin: 0; color: var(--ink-2); }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
  .prod { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  .prod:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -42px rgba(29,108,196,.55); }
  .stage {
    position: relative; aspect-ratio: 4 / 3; background-color: #f2effb;
    background-image:
      linear-gradient(rgba(106,78,224,.13) 1px, transparent 1px),
      linear-gradient(90deg, rgba(106,78,224,.13) 1px, transparent 1px),
      linear-gradient(rgba(106,78,224,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(106,78,224,.06) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -1px -1px;
  }
  .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .stage svg text { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .06em; fill: var(--ink-2); }
  .prod .body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
  .prod h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
  .prod .spec { margin: 0; font-size: 14px; color: var(--ink-2); }
  .price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
  .price b { font-family: var(--display); font-size: 1.7rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
  .price b small { font-family: var(--sans); font-size: 13px; font-weight: 600; margin-left: 4px; }
  .price span { font-size: 13px; color: var(--ink-2); }
  .prod .btn { margin-top: 12px; width: 100%; }
  .shop-note { margin-top: 48px; color: var(--ink-2); font-size: 14px; max-width: 60rem; }

  /* configurator + selection drawers */
  .drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgba(21,22,44,.28); opacity: 0; pointer-events: none; transition: opacity .35s; }
  .drawer.open { opacity: 1; pointer-events: auto; }
  .panel-d { width: min(100%, 460px); height: 100%; background: var(--paper); box-shadow: -30px 0 80px rgba(21,22,44,.18); transform: translateX(40px); transition: transform .5s var(--ease); display: flex; flex-direction: column; }
  .drawer.open .panel-d { transform: none; }
  .d-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
  .d-head h3 { margin: 0; font-size: 18px; }
  .x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 18px; cursor: pointer; }
  .d-body { flex: 1; overflow-y: auto; padding: 20px 22px; display: grid; gap: 18px; align-content: start; overscroll-behavior: contain; }
  .d-body .stage { border-radius: 16px; }
  .qtys { display: flex; flex-wrap: wrap; gap: 8px; }
  .qtys button { font: 600 14px var(--sans); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; gap: 2px; text-align: left; }
  .qtys button small { font-weight: 500; color: var(--ink-2); }
  .qtys button[aria-pressed="true"] { border-color: var(--vi-ink); background: color-mix(in srgb, var(--vi) 16%, var(--paper)); }
  .radios { display: flex; flex-wrap: wrap; gap: 8px; }
  .radios label { margin: 0; }
  .radios input { position: absolute; opacity: 0; }
  .radios span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--ink); cursor: pointer; }
  .radios input:checked + span { border-color: var(--vi-ink); background: color-mix(in srgb, var(--vi) 16%, var(--paper)); }
  .radios input:focus-visible + span { outline: 2px solid var(--vi-ink); outline-offset: 2px; }
  .d-price { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: var(--bg); }
  .d-price b { font-family: var(--display); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
  .d-foot { padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .d-foot .btn { width: 100%; }
  .btn-wa { background: #1f9d55; color: #fff; }
  .btn-wa:hover { background: #17834a; }
  .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
  .hint { font-size: 13px; color: var(--ink-2); margin: 0; }
  .sel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .sel-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
  .sel-list b { font-weight: 600; }
  .sel-list small { color: var(--ink-2); grid-column: 1; }
  .sel-list .rm { grid-row: 1 / span 2; grid-column: 2; align-self: center; border: 0; background: none; color: var(--ink-2); font-size: 13px; text-decoration: underline; cursor: pointer; }
  .selbar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 30; transform: translate(-50%, 140%); transition: transform .5s var(--ease); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 20px 50px rgba(21,22,44,.3); max-width: calc(100% - 32px); }
  .selbar.show { transform: translate(-50%, 0); }
  .selbar span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .selbar .btn { background: var(--paper); color: var(--ink); padding: 10px 16px; font-size: 14px; }

  /* page transition curtain */
  .curtain { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: linear-gradient(120deg, #509eec, #85a1f5 40%, #b9a5ff 70%, #93e2f9); clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%)); }
  .curtain.in { transition: clip-path .7s cubic-bezier(.7,0,.3,1); clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
  .curtain.out { transition: opacity .5s .05s; clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); opacity: 0; }

  @media (max-width: 900px) {
    .shop-hero .wrap { grid-template-columns: 1fr; }
  }

  /* ---------- Cursor: the tool of each trade ---------- */
  html.cursor-on, html.cursor-on body, html.cursor-on a, html.cursor-on button, html.cursor-on label { cursor: none; }
  html.cursor-on input, html.cursor-on textarea { cursor: text; }
  #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 55; }
  #cur { position: fixed; left: 0; top: 0; z-index: 71; pointer-events: none; opacity: 0; transition: opacity .3s; }
  #cur.on { opacity: 1; }
  #cur.is-text { opacity: 0; }
  #cur > * { position: absolute; left: 0; top: 0; will-change: transform; }
  .c-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); }
  .c-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(21,22,44,.35); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s, opacity .25s; }
  #cur.is-link .c-ring { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: rgba(185,165,255,.2); border-color: rgba(106,78,224,.5); }
  .c-tool { opacity: 0; transition: opacity .25s; }
  #cur[data-mode="vi"] .c-reg, #cur[data-mode="cc"] .c-af, #cur[data-mode="dm"] .c-target, #cur[data-mode="dd"] .c-neon { opacity: 1; }
  #cur[data-mode="vi"] .c-ring, #cur[data-mode="cc"] .c-ring, #cur[data-mode="dm"] .c-ring, #cur[data-mode="dd"] .c-ring, #cur[data-mode="lens"] .c-ring { opacity: 0; }
  #cur[data-mode="dd"] .c-dot, #cur[data-mode="cc"] .c-dot { opacity: 0; }
  .c-reg { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .c-reg * { fill: none; stroke: var(--vi-ink); stroke-width: 1.4; }
  .c-target { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .c-target * { fill: none; stroke: var(--dm-ink); stroke-width: 1.4; }
  .c-af { width: 64px; height: 64px; margin: -32px 0 0 -32px; transition: opacity .25s, width .22s var(--ease), height .22s var(--ease), margin .22s var(--ease); }
  .c-af i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ink); }
  .c-af i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
  .c-af i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
  .c-af i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
  .c-af i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
  .c-af b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ink); }
  #cur.locked .c-af { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #cur.locked .c-af i, #cur.locked .c-af b { border-color: var(--cc-ink); background-color: transparent; }
  #cur.locked .c-af b { background: var(--cc-ink); }
  .c-neon { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #de6cd6, 0 0 22px 8px rgba(240,179,245,.95); }
  .c-label {
    margin: 26px 0 0 20px; padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,.9); border: 1px solid var(--line);
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
    white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .25s;
  }
  .c-label.show { opacity: 1; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) { .nav a.u { display: none; } }
  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .mark { order: -1; width: min(72%, 320px); justify-self: center; margin-bottom: 40px; }
    .panels { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
    .panel { aspect-ratio: 3 / 4; }
    .panel p { display: none; }
    .chapter .wrap { grid-template-columns: 1fr; }
    .chapter.flip .visual { order: 0; }
    .visual { position: relative; top: auto; }
    .visual .ph { aspect-ratio: 16 / 11; }
    .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .steps li:nth-child(3) { border-left: 0; padding-left: 0; }
    .contact-card { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .brand img { height: 42px; }
    .offers { grid-template-columns: 1fr; }
    .row { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .steps li { border-left: 0; padding-left: 0; }
    .panel .in { padding: 14px; }
    .panel .go { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* ---------- WordPress: generic pages (panier, commande, mentions…) ---------- */
  .page-wrap { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 120px); }
  .page-wrap h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.02em; margin: 0 0 28px; }
  .entry { max-width: 72rem; }
  .entry a { color: var(--vi-ink); }
  .entry img { height: auto; border-radius: 12px; }
  .admin-bar .top { top: calc(env(safe-area-inset-top, 0px) + 32px); }
  .admin-bar .fam-nav { top: calc(env(safe-area-inset-top, 0px) + 103px); }
  @media (max-width: 782px) { .admin-bar .top { top: calc(env(safe-area-inset-top, 0px) + 46px); } .admin-bar .fam-nav { top: calc(env(safe-area-inset-top, 0px) + 117px); } }
  .form-note.err { color: #b3261e; }
  .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }