/* ═══════════════════════════════════════════════════════════════
     « LA NUIT BLEUE »
     Direction artistique : bleu marine profond / cinéma nocturne
     Palette : midnight navy, ink white, ice blue accent
     ═══════════════════════════════════════════════════════════════ */

  :root{
    /* Fond — bleu marine profond */
    --bg:           #060a18;
    --bg-2:         #0a1226;
    --bg-3:         #11183a;
    --bg-warm:      #18234f;

    /* Encre — blanc pur cinéma */
    --ink:          #f4f5fa;
    --ink-soft:     #c2c8de;
    --ink-mid:      #8590b3;
    --ink-muted:    #5a648a;

    /* Accents — bleu glace lumineux */
    --gold:         #7da3d4;
    --gold-bright:  #b8d4f0;
    --gold-deep:    #4a6a94;
    --sienna:       #5e84b8;
    --burgundy:     #1a2444;

    /* Lignes */
    --line:         rgba(244,245,250,.08);
    --line-mid:     rgba(244,245,250,.16);
    --line-warm:    rgba(184,212,240,.24);

    /* Easings — chacune une voix */
    --ease-out:     cubic-bezier(.22, 1, .36, 1);
    --ease-cinema: cubic-bezier(.65, .05, .15, 1);
    --ease-soft:    cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  }

  /* ─── Reset & base ────────────────────────────────────────── */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    cursor:none;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  body.no-scroll{overflow:hidden;height:100vh}
  ::selection{background:var(--gold);color:var(--bg)}

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

  /* ─── Background layers : grain + cool mesh ──────────────── */
  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 70% 50% at 15% 10%, rgba(26,36,68,.45), transparent 60%),
      radial-gradient(ellipse 60% 40% at 90% 85%, rgba(125,163,212,.12), transparent 65%),
      radial-gradient(ellipse 80% 60% at 50% 100%, rgba(74,106,148,.10), transparent 70%);
  }
  body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.35;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.6 0 0 0 0 0.85 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grainShift 8s steps(6) infinite;
  }
  @keyframes grainShift{
    0%   {transform:translate(0,0)}
    20%  {transform:translate(-3%,2%)}
    40%  {transform:translate(2%,-3%)}
    60%  {transform:translate(-2%,-2%)}
    80%  {transform:translate(3%,3%)}
    100% {transform:translate(0,0)}
  }

  /* ─── Cool spotlight follows cursor ───────────────────────── */
  .spotlight{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:radial-gradient(circle 650px at var(--mx,50%) var(--my,50%), rgba(184,212,240,.07), transparent 70%);
    transition:opacity .6s;
  }

  /* ─── Scroll progress bar ─────────────────────────────────── */
  .scroll-progress{
    position:fixed;
    top:0; left:0;
    height:2px;
    width:0%;
    background:linear-gradient(90deg, transparent, var(--gold-bright), var(--gold));
    z-index:9998;
    box-shadow:0 0 10px var(--gold-bright);
    transition:width .12s linear;
  }

  /* ═══════════════════════════════════════════════════════════
     CUSTOM CURSOR — dot + ring, hover variants, magnetic feel
     ═══════════════════════════════════════════════════════════ */
  .cursor{
    position:fixed;
    width:6px; height:6px;
    background:var(--gold-bright);
    border-radius:50%;
    pointer-events:none;
    z-index:10000;
    mix-blend-mode:difference;
    transform:translate(-50%,-50%);
    transition:width .35s var(--ease-out), height .35s var(--ease-out), background .35s;
  }
  .cursor-ring{
    position:fixed;
    width:36px; height:36px;
    border:1px solid rgba(240,201,146,.6);
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .4s var(--ease-out), height .4s var(--ease-out), border-color .3s, background .3s;
    backdrop-filter:blur(1px);
  }
  .cursor.hover{width:0;height:0}
  .cursor-ring.hover{
    width:78px; height:78px;
    border-color:var(--gold-bright);
    background:rgba(240,201,146,.08);
  }
  .cursor-ring.hover-photo{
    width:120px; height:120px;
    border-color:var(--gold-bright);
    background:rgba(240,201,146,.06);
  }
  .cursor-ring.hover-photo::after{
    content:'VOIR';
    position:absolute;
    inset:0;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:.9rem;
    letter-spacing:.2em;
    color:var(--gold-bright);
  }
  @media(hover:none){
    body{cursor:auto}
    .cursor,.cursor-ring,.spotlight{display:none}
  }

  /* ═══════════════════════════════════════════════════════════
     PRELOADER — aperture + name reveal + count
     ═══════════════════════════════════════════════════════════ */
  .preloader{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:10001;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3rem;
    transition:transform 1.2s var(--ease-cinema), opacity .6s 1s;
  }
  .preloader.done{
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
  }
  .aperture{
    width:80px; height:80px;
    position:relative;
  }
  .aperture-blade{
    position:absolute;
    inset:0;
    border:1px solid var(--gold-bright);
    border-radius:50%;
    clip-path:polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
    transform-origin:center;
    animation:apertureSpin 2.5s linear infinite;
    opacity:.4;
  }
  .aperture-blade:nth-child(2){animation-delay:-.4s;border-color:var(--gold);opacity:.6}
  .aperture-blade:nth-child(3){animation-delay:-.8s;border-color:var(--gold-bright);opacity:.8}
  .aperture-blade:nth-child(4){animation-delay:-1.2s;border-color:var(--gold);opacity:.5}
  @keyframes apertureSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
  .preloader-name{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-style:italic;
    font-size:2.2rem;
    letter-spacing:.04em;
    color:var(--ink-soft);
    overflow:hidden;
  }
  .preloader-name span{
    display:inline-block;
    transform:translateY(110%);
    animation:rise 1s .3s var(--ease-out) forwards;
  }
  @keyframes rise{to{transform:translateY(0)}}
  .preloader-count{
    font-family:'DM Sans',sans-serif;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:.3em;
    color:var(--ink-muted);
    font-variant-numeric:tabular-nums;
  }
  .preloader-bar{
    width:240px;
    height:1px;
    background:var(--line-mid);
    position:relative;
    overflow:hidden;
  }
  .preloader-bar::after{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateX(-100%);
    animation:loadBar 1.8s .2s var(--ease-cinema) forwards;
  }
  @keyframes loadBar{to{transform:translateX(0)}}

  /* ═══════════════════════════════════════════════════════════
     NAV — sticky, blur on scroll
     ═══════════════════════════════════════════════════════════ */
  nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    padding:1.6rem 3rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:background .6s, backdrop-filter .6s, padding .5s, border-color .5s;
    background:rgba(12,9,7,.4);
    backdrop-filter:blur(12px);
    border-bottom:1px solid transparent;
  }
  nav.scrolled{
    background:rgba(12,9,7,.88);
    backdrop-filter:blur(24px);
    padding:1rem 3rem;
    border-bottom:1px solid var(--line);
  }
  .nav-logo{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-style:italic;
    font-size:1.55rem;
    letter-spacing:.01em;
    color:var(--ink);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:.75rem;
  }
  .nav-logo .dot{
    width:8px; height:8px;
    background:var(--gold-bright);
    border-radius:50%;
    box-shadow:0 0 14px var(--gold-bright);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:.55;transform:scale(.85)}
    50%    {opacity:1;transform:scale(1.15)}
  }
  .nav-links{
    display:flex;
    gap:2.6rem;
    list-style:none;
    font-size:0.873rem;
    text-transform:uppercase;
    letter-spacing:.24em;
    font-weight:500;
    align-items:center;
  }
  .nav-links a{
    color:var(--ink);
    text-decoration:none;
    position:relative;
    padding:.4rem 0;
    transition:color .4s;
  }
  .nav-links a::after{
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:0; height:1px;
    background:var(--gold-bright);
    transition:width .5s var(--ease-cinema);
  }
  .nav-links a:hover{color:var(--gold-bright)}
  .nav-links a:hover::after{width:100%}
  .nav-ig{
    display:flex !important;
    align-items:center;
    gap:.55rem;
    padding:.55rem 1.1rem !important;
    border:1px solid var(--line-mid);
    border-radius:100px;
    transition:all .5s var(--ease-cinema) !important;
    overflow:hidden;
    position:relative;
  }
  .nav-ig::after{display:none}
  .nav-ig::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateY(100%);
    transition:transform .5s var(--ease-cinema);
    z-index:-1;
  }
  .nav-ig:hover{color:var(--bg) !important;border-color:var(--gold-bright)}
  .nav-ig:hover::before{transform:translateY(0)}
  .nav-ig svg{width:14px;height:14px;flex-shrink:0}

  .nav-burger{display:none}

  /* ═══════════════════════════════════════════════════════════
     HERO — full screen cinematic
     L'image est fixe (effet rideau), la page passe par-dessus
     ═══════════════════════════════════════════════════════════ */
  .hero{
    height:100vh;
    min-height:680px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
  }
  .hero-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    z-index:0;
    overflow:hidden;
  }
  .hero-bg img{
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.18);
    filter:brightness(.42) contrast(1.18) saturate(.9);
    animation:heroReveal 2.5s .6s var(--ease-cinema) forwards,
              heroFloat 18s 3s ease-in-out infinite;
    will-change:transform, filter;
  }
  @keyframes heroReveal{
    to{opacity:1;transform:scale(1.03)}
  }
  @keyframes heroFloat{
    0%,100%{transform:scale(1.03) translate(0,0)}
    50%    {transform:scale(1.06) translate(-1%,-1%)}
  }
  .hero-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(12,9,7,.55) 0%, rgba(12,9,7,.25) 30%, rgba(12,9,7,.45) 70%, rgba(12,9,7,.92) 100%),
      linear-gradient(95deg, rgba(12,9,7,.6) 0%, transparent 50%);
  }

  /* Toutes les sections passent au-dessus du hero fixé */
  .marquee, .section, .parallax, .about, .reviews, .ig-strip, .services, .contact, footer{
    position:relative;
    z-index:5;
  }
  .marquee, .section, .about, .reviews, .ig-strip, .services, .contact, footer{
    background-color:var(--bg);
  }
  /* Effet rideau : bordure lumineuse au top du marquee */
  .marquee{
    box-shadow:
      0 -1px 0 rgba(240,201,146,.18),
      0 -22px 60px rgba(12,9,7,.6);
  }

  .hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:0 2rem;
    max-width:1180px;
  }
  .hero-tag{
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    font-size:0.92rem;
    text-transform:uppercase;
    letter-spacing:.38em;
    color:var(--gold-bright);
    margin-bottom:2.8rem;
    font-weight:500;
    text-shadow:0 2px 24px rgba(12,9,7,.9);
    opacity:0;
    animation:fadeIn 1.2s 1.2s forwards;
  }
  .hero-tag::before, .hero-tag::after{
    content:'';
    width:42px; height:1px;
    background:var(--gold-bright);
    box-shadow:0 0 10px var(--gold-bright);
  }

  .hero h1{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(3rem, 9.2vw, 9rem);
    line-height:.95;
    letter-spacing:-.025em;
    color:var(--ink);
    margin-bottom:2.4rem;
    text-shadow:0 6px 50px rgba(12,9,7,.85);
  }
  .hero h1 .line{
    display:block;
    overflow:hidden;
    padding:.05em 0;
  }
  .hero h1 .word{
    display:inline-block;
    overflow:hidden;
    vertical-align:bottom;
    padding-bottom:.05em;
  }
  .hero h1 .word > span{
    display:inline-block;
    transform:translateY(115%);
  }
  /* Reveal + perpetual float — each word has its own unique drift */
  .hero h1 .word:nth-of-type(1) > span{
    animation:
      wordUp 1.5s 1.5s var(--ease-cinema) forwards,
      floatA 7s 3.2s ease-in-out infinite;
  }
  .hero h1 .word:nth-of-type(2) > span{
    animation:
      wordUp 1.5s 1.65s var(--ease-cinema) forwards,
      floatB 8s 3.5s ease-in-out infinite;
  }
  .hero h1 .word:nth-of-type(3) > span{
    animation:
      wordUp 1.5s 1.8s var(--ease-cinema) forwards,
      floatC 6.5s 3.7s ease-in-out infinite;
  }
  .hero h1 .word:nth-of-type(4) > span{
    animation:
      wordUp 1.5s 1.95s var(--ease-cinema) forwards,
      floatA 7.5s 4s ease-in-out infinite;
  }
  /* "plus." — second line — bigger drift */
  .hero h1 .line:nth-of-type(2) .word > span{
    animation:
      wordUp 1.5s 2.1s var(--ease-cinema) forwards,
      floatBig 9s 4.3s ease-in-out infinite;
  }

  @keyframes wordUp{
    from{transform:translateY(115%)}
    to  {transform:translateY(0)}
  }
  @keyframes floatA{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    25%    {transform:translate(-3px,-7px) rotate(-.35deg)}
    50%    {transform:translate(2px,-3px) rotate(.25deg)}
    75%    {transform:translate(-2px,5px) rotate(-.2deg)}
  }
  @keyframes floatB{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    30%    {transform:translate(3px,-5px) rotate(.3deg)}
    60%    {transform:translate(-4px,-2px) rotate(-.25deg)}
    85%    {transform:translate(2px,4px) rotate(.15deg)}
  }
  @keyframes floatC{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    20%    {transform:translate(-2px,-4px) rotate(-.25deg)}
    55%    {transform:translate(4px,-6px) rotate(.35deg)}
    80%    {transform:translate(-3px,3px) rotate(-.15deg)}
  }
  @keyframes floatBig{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    33%    {transform:translate(5px,-10px) rotate(.5deg)}
    66%    {transform:translate(-4px,6px) rotate(-.4deg)}
  }

  .hero h1 em{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:400;
    color:var(--gold-bright);
    text-shadow:
      0 4px 50px rgba(240,201,146,.45),
      0 0 40px rgba(240,201,146,.22);
    animation:glowPulse 4.5s ease-in-out infinite;
    display:inline-block;
  }
  @keyframes glowPulse{
    0%,100%{
      text-shadow:
        0 4px 50px rgba(240,201,146,.45),
        0 0 40px rgba(240,201,146,.22);
    }
    50%{
      text-shadow:
        0 4px 60px rgba(240,201,146,.75),
        0 0 70px rgba(240,201,146,.45),
        0 0 100px rgba(240,201,146,.15);
    }
  }

  @keyframes fadeIn{to{opacity:1}}

  .hero-sub{
    font-size:1.1rem;
    color:var(--ink);
    max-width:620px;
    margin:0 auto 3.2rem;
    line-height:1.75;
    font-weight:300;
    text-shadow:0 2px 20px rgba(12,9,7,.85);
    opacity:0;
    animation:fadeIn 1.2s 2.6s forwards;
  }

  .hero-cta-row{
    display:inline-flex;
    align-items:center;
    gap:1.5rem;
    flex-wrap:wrap;
    justify-content:center;
    opacity:0;
    animation:fadeIn 1.2s 2.9s forwards;
  }
  .hero-cta{
    display:inline-flex;
    align-items:center;
    gap:1rem;
    padding:1.2rem 2.6rem;
    background:rgba(240,201,146,.06);
    color:var(--ink);
    text-decoration:none;
    font-size:0.897rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    font-weight:500;
    border:1px solid var(--gold-bright);
    transition:all .5s var(--ease-cinema);
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(8px);
  }
  .hero-cta::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateY(101%);
    transition:transform .5s var(--ease-cinema);
    z-index:-1;
  }
  .hero-cta:hover{color:var(--bg)}
  .hero-cta:hover::before{transform:translateY(0)}
  .hero-cta .arrow{display:inline-block;transition:transform .4s var(--ease-cinema)}
  .hero-cta:hover .arrow{transform:translateX(8px)}

  .hero-cta.ghost{
    background:transparent;
    border-color:var(--line-mid);
    color:var(--ink-soft);
  }
  .hero-cta.ghost:hover{
    border-color:var(--ink);
    color:var(--ink);
    background:rgba(245,237,224,.05);
  }
  .hero-cta.ghost::before{display:none}

  /* Côtés : meta verticales */
  .hero-side{
    position:absolute;
    top:50%;
    transform-origin:center;
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.42em;
    color:var(--ink-soft);
    z-index:3;
    opacity:0;
    animation:fadeIn 1s 2.3s forwards;
    white-space:nowrap;
  }
  .hero-side.left {left:1.8rem; transform:translateY(-50%) rotate(-90deg)}
  .hero-side.right{right:1.8rem; transform:translateY(-50%) rotate(90deg)}

  .hero-scroll{
    position:absolute;
    bottom:2.5rem;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    font-size:0.802rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--ink-soft);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    opacity:0;
    animation:fadeIn 1.2s 3.2s forwards;
  }
  .hero-scroll-line{
    width:1px;
    height:54px;
    background:linear-gradient(to bottom, transparent, var(--gold-bright), transparent);
    animation:scrollLine 2.3s ease-in-out infinite;
  }
  @keyframes scrollLine{
    0%,100%{transform:scaleY(.35) translateY(-12px);opacity:.3}
    50%    {transform:scaleY(1) translateY(12px);opacity:1}
  }

  /* Corner frame counter — bottom left */
  .frame-counter{
    position:absolute;
    bottom:2.5rem;
    left:3rem;
    z-index:3;
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.3em;
    color:var(--ink-mid);
    font-variant-numeric:tabular-nums;
    opacity:0;
    animation:fadeIn 1s 3s forwards;
  }
  .frame-counter b{color:var(--gold-bright);font-weight:400}

  .frame-iso{
    position:absolute;
    bottom:2.5rem;
    right:3rem;
    z-index:3;
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.3em;
    color:var(--ink-mid);
    opacity:0;
    animation:fadeIn 1s 3s forwards;
  }
  .frame-iso b{color:var(--gold-bright);font-weight:400}

  /* ═══════════════════════════════════════════════════════════
     MARQUEE — double line opposing directions
     ═══════════════════════════════════════════════════════════ */
  .marquee{
    padding:1.6rem 0;
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--bg-2);
    position:relative;
  }
  .marquee-row + .marquee-row{
    border-top:1px solid var(--line);
    margin-top:1.6rem;
    padding-top:1.6rem;
  }
  .marquee-track{
    display:flex;
    gap:4.5rem;
    white-space:nowrap;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:300;
    font-size:1.85rem;
    color:var(--ink-soft);
    animation:scroll 38s linear infinite;
  }
  .marquee-row:nth-child(2) .marquee-track{
    animation-direction:reverse;
    animation-duration:46s;
    font-style:normal;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--ink-mid);
    font-weight:400;
  }
  .marquee-track span{display:flex;align-items:center;gap:4.5rem}
  .marquee-track .dot{
    color:var(--gold-bright);
    font-style:normal;
    font-size:0.78rem;
  }
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ═══════════════════════════════════════════════════════════
     HERO 3D CANVAS — photographer equipment orbiting in background
     ═══════════════════════════════════════════════════════════ */
  .hero-3d-canvas{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }
  .hero-3d-canvas canvas{
    display:block;
    width:100%;
    height:100%;
  }

  /* ═══════════════════════════════════════════════════════════
     SECTION TITLES
     ═══════════════════════════════════════════════════════════ */
  .section{
    padding:9rem 3rem;
  }
  .section-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:3rem;
    align-items:end;
    margin-bottom:4.5rem;
    padding-bottom:2.2rem;
    border-bottom:1px solid var(--line);
  }
  .section-num{
    font-size:0.85rem;
    letter-spacing:.32em;
    color:var(--gold-bright);
    text-transform:uppercase;
    font-weight:500;
    font-variant-numeric:tabular-nums;
  }
  .section-title{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(2.6rem, 6.2vw, 5.8rem);
    line-height:.96;
    letter-spacing:-.025em;
  }
  .section-title em{
    font-style:italic;
    color:var(--gold-bright);
    font-weight:400;
  }
  .section-meta{
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--ink-soft);
    text-align:right;
    line-height:1.7;
  }

  /* ═══════════════════════════════════════════════════════════
     PORTFOLIO — asymmetric filtered grid
     ═══════════════════════════════════════════════════════════ */
  .filters{
    display:flex;
    gap:.6rem;
    margin-bottom:3rem;
    flex-wrap:wrap;
  }
  .filter{
    padding:.75rem 1.7rem;
    background:transparent;
    border:1px solid var(--line-mid);
    color:var(--ink-soft);
    font-family:'DM Sans',sans-serif;
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-weight:500;
    cursor:none;
    transition:all .5s var(--ease-cinema);
    position:relative;
    overflow:hidden;
  }
  .filter::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateY(101%);
    transition:transform .5s var(--ease-cinema);
    z-index:-1;
  }
  .filter:hover{color:var(--bg);border-color:var(--gold-bright)}
  .filter:hover::before, .filter.active::before{transform:translateY(0)}
  .filter.active{color:var(--bg);border-color:var(--gold-bright)}

  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-auto-rows:95px;
    gap:1.2rem;
  }
  .photo{
    position:relative;
    overflow:hidden;
    background:var(--bg-3);
    cursor:none;
    opacity:0;
    transition:
      opacity 1s var(--ease-cinema),
      transform 1s var(--ease-cinema),
      filter 1s;
  }
  .photo[data-anim="left"] {transform:translateX(-90px) scale(.94)}
  .photo[data-anim="right"]{transform:translateX(90px)  scale(.94)}
  .photo[data-anim="up"]   {transform:translateY(70px)  scale(.94)}
  .photo[data-anim="pop"]  {transform:scale(.75); filter:blur(8px)}
  .photo[data-anim="fade"] {transform:translateY(40px) scale(.96); filter:blur(4px)}

  .photo.in{
    opacity:1;
    transform:translate(0,0) scale(1) !important;
    filter:blur(0) !important;
  }

  .photo img{
    width:100%; height:100%;
    object-fit:cover;
    filter:brightness(.82) contrast(1.06) saturate(.9);
    transition:transform 1.5s var(--ease-cinema), filter .6s;
  }
  .photo:hover img{
    transform:scale(1.08);
    filter:brightness(1) contrast(1.1) saturate(1);
  }
  .photo::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(12,9,7,.92) 100%);
    opacity:0;
    transition:opacity .6s;
    z-index:2;
  }
  .photo:hover::before{opacity:1}

  /* Corner indicator dot */
  .photo::after{
    content:'';
    position:absolute;
    top:1rem; right:1rem;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold-bright);
    box-shadow:0 0 14px var(--gold-bright);
    z-index:3;
    opacity:0;
    transform:scale(0);
    transition:opacity .7s .3s, transform .7s .3s var(--ease-spring);
  }
  .photo.in::after{opacity:.85;transform:scale(1)}

  .photo-info{
    position:absolute;
    bottom:0; left:0; right:0;
    padding:1.6rem;
    z-index:3;
    transform:translateY(20px);
    opacity:0;
    transition:all .55s var(--ease-cinema);
  }
  .photo:hover .photo-info{transform:translateY(0);opacity:1}
  .photo-cat{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--gold-bright);
    margin-bottom:.55rem;
    font-weight:500;
  }
  .photo-title{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:400;
    font-size:1.4rem;
    color:var(--ink);
    line-height:1.2;
  }

  .photo .watermark{
    position:absolute;
    bottom:.9rem; right:.9rem;
    z-index:4;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:rgba(245,237,224,.4);
    font-weight:500;
    pointer-events:none;
    text-shadow:0 1px 4px rgba(0,0,0,.7);
    transition:opacity .4s;
  }
  .photo:hover .watermark{opacity:0}

  /* Layout asymmetric — moins prévisible */
  .photo:nth-child(1){grid-column:span 7;grid-row:span 6}
  .photo:nth-child(2){grid-column:span 5;grid-row:span 4}
  .photo:nth-child(3){grid-column:span 5;grid-row:span 5}
  .photo:nth-child(4){grid-column:span 4;grid-row:span 6}
  .photo:nth-child(5){grid-column:span 3;grid-row:span 5}
  .photo:nth-child(6){grid-column:span 5;grid-row:span 4}
  .photo:nth-child(7){grid-column:span 4;grid-row:span 5}
  .photo:nth-child(8){grid-column:span 3;grid-row:span 4}
  .photo:nth-child(9){grid-column:span 6;grid-row:span 5}
  .photo:nth-child(10){grid-column:span 6;grid-row:span 5}

  /* ═══════════════════════════════════════════════════════════
     PARALLAX QUOTE
     ═══════════════════════════════════════════════════════════ */
  .parallax{
    height:85vh;
    min-height:560px;
    position:relative;
    overflow:hidden;
    margin:5rem 0;
  }
  
  .parallax-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center, transparent 30%, rgba(6,10,24,.55) 100%);
  }
  .parallax-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 2rem;
    gap:2.5rem;
  }
  .parallax-quote-mark{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:5rem;
    line-height:.8;
    color:var(--gold-bright);
    opacity:.6;
  }
  .parallax-content h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(2rem, 5.2vw, 4.6rem);
    line-height:1.25;
    color:var(--ink);
    max-width:1100px;
    text-shadow:0 4px 40px rgba(12,9,7,.85);
  }
  .parallax-content h2 em{
    color:var(--gold-bright);
    font-style:italic;
    font-weight:400;
  }
  .parallax-attr{
    font-family:'DM Sans',sans-serif;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:.34em;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:1rem;
  }
  .parallax-attr::before, .parallax-attr::after{
    content:'';
    width:30px; height:1px;
    background:var(--gold-bright);
    opacity:.5;
  }

  /* ═══════════════════════════════════════════════════════════
     ABOUT
     ═══════════════════════════════════════════════════════════ */
  .about{
    padding:9rem 3rem;
  }
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:5.5rem;
    align-items:center;
    max-width:1400px;
    margin:0 auto;
  }
  .about-portrait{
    position:relative;
    aspect-ratio:3/4;
    overflow:hidden;
  }
  .about-portrait img{
    width:100%; height:100%;
    object-fit:cover;
    filter:grayscale(.35) contrast(1.12) brightness(.88);
    transition:filter 1s, transform 1.4s var(--ease-cinema);
  }
  .about-portrait:hover img{
    filter:grayscale(0) contrast(1.1) brightness(.95);
    transform:scale(1.04);
  }
  .about-portrait::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 55%, var(--bg) 100%);
    pointer-events:none;
  }
  .about-decor{
    position:absolute;
    top:-22px; left:-22px;
    width:88px; height:88px;
    border-top:1px solid var(--gold-bright);
    border-left:1px solid var(--gold-bright);
    z-index:2;
    pointer-events:none;
  }
  .about-decor.br{
    top:auto;left:auto;
    bottom:-22px;right:-22px;
    border:none;
    border-bottom:1px solid var(--gold-bright);
    border-right:1px solid var(--gold-bright);
  }
  .about-tag-label{
    position:absolute;
    bottom:1.5rem;
    left:1.5rem;
    z-index:3;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--gold-bright);
    background:rgba(12,9,7,.6);
    padding:.45rem .8rem;
    backdrop-filter:blur(6px);
    border:1px solid var(--line-warm);
  }
  .about-text .tag{
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--gold-bright);
    margin-bottom:2rem;
    display:flex;
    align-items:center;
    gap:1rem;
    font-weight:500;
  }
  .about-text .tag::before{
    content:'';
    width:40px; height:1px;
    background:var(--gold-bright);
  }
  .about-text h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(2.2rem, 4.5vw, 4.2rem);
    line-height:1.04;
    letter-spacing:-.02em;
    margin-bottom:2.5rem;
  }
  .about-text h2 em{
    font-style:italic;
    color:var(--gold-bright);
    font-weight:400;
  }
  .about-text p{
    font-size:1.04rem;
    line-height:1.85;
    color:var(--ink-soft);
    margin-bottom:1.4rem;
    max-width:620px;
  }
  .about-text p:first-of-type::first-letter{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:4.2rem;
    float:left;
    line-height:.85;
    margin:.4rem .8rem 0 0;
    color:var(--gold-bright);
    font-weight:400;
  }

  .stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
    margin-top:3.2rem;
    padding-top:2.8rem;
    border-top:1px solid var(--line);
  }
  .stat-num{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:3.4rem;
    line-height:1;
    color:var(--ink);
    margin-bottom:.55rem;
    display:flex;
    align-items:baseline;
    gap:.3rem;
  }
  .stat-num em{
    font-style:italic;
    color:var(--gold-bright);
    font-size:1.6rem;
    font-weight:400;
  }
  .stat-label{
    font-size:0.78rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ═══════════════════════════════════════════════════════════
     REVIEWS — auto-rotating carousel
     ═══════════════════════════════════════════════════════════ */
  .reviews{
    padding:9rem 3rem;
    position:relative;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .reviews::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    opacity:.45;
  }
  .reviews-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:3rem;
    align-items:end;
    margin-bottom:1rem;
    padding-bottom:2.2rem;
    border-bottom:1px solid var(--line);
  }
  .reviews-rating{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    align-items:flex-end;
    text-align:right;
  }
  .reviews-rating .stars{
    color:var(--gold-bright);
    font-size:1.2rem;
    letter-spacing:.15em;
    text-shadow:0 0 14px rgba(240,201,146,.45);
  }
  .reviews-rating .score{
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--ink-soft);
  }
  .reviews-rating .score b{color:var(--ink);font-weight:500}

  .reviews-stage{
    position:relative;
    margin-top:4.5rem;
    min-height:400px;
  }
  .review{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 2rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(40px) scale(.97);
    transition:
      opacity .85s var(--ease-cinema),
      transform .95s var(--ease-cinema),
      visibility .85s;
    pointer-events:none;
  }
  .review.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .review-stars{
    color:var(--gold-bright);
    font-size:1.3rem;
    letter-spacing:.28em;
    margin-bottom:2.2rem;
    text-shadow:0 0 16px rgba(240,201,146,.5);
  }
  .review blockquote{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.4rem, 2.6vw, 2.4rem);
    line-height:1.4;
    max-width:1000px;
    margin:0 auto 2.6rem;
    color:var(--ink);
  }
  .review blockquote em{
    color:var(--gold-bright);
    font-weight:400;
  }
  .review cite{
    font-style:normal;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    align-items:center;
  }
  .review cite b{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-style:italic;
    font-size:1.2rem;
    color:var(--ink);
  }
  .review cite .meta{
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:.9rem;
  }
  .review cite .meta::before, .review cite .meta::after{
    content:'';
    width:22px; height:1px;
    background:var(--gold-bright);
    opacity:.5;
  }

  /* Big quote en filigrane */
  .reviews-stage::before{
    content:'"';
    position:absolute;
    top:-5rem;
    left:50%;
    transform:translateX(-50%);
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:20rem;
    color:var(--gold-bright);
    opacity:.06;
    line-height:1;
    pointer-events:none;
    z-index:-1;
  }

  .reviews-controls{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:4rem;
    gap:2rem;
  }
  .review-arrow{
    width:56px; height:56px;
    border:1px solid var(--line-mid);
    border-radius:50%;
    background:transparent;
    color:var(--ink-soft);
    cursor:none;
    font-family:inherit;
    font-size:1.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .5s var(--ease-cinema);
  }
  .review-arrow:hover{
    background:var(--gold-bright);
    border-color:var(--gold-bright);
    color:var(--bg);
    transform:scale(1.08);
  }
  .review-dots{
    display:flex;
    gap:.7rem;
    align-items:center;
  }
  .review-dot{
    width:30px;
    height:2px;
    background:var(--line-mid);
    border:none;
    cursor:none;
    padding:0;
    transition:background .4s, width .5s var(--ease-cinema);
  }
  .review-dot.active{
    background:var(--gold-bright);
    width:54px;
    box-shadow:0 0 12px var(--gold-bright);
  }
  .review-counter{
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }
  .review-counter b{color:var(--gold-bright);font-weight:500}

  /* ═══════════════════════════════════════════════════════════
     INSTAGRAM STRIP
     ═══════════════════════════════════════════════════════════ */
  .ig-strip{
    padding:7rem 3rem;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--bg-2);
  }
  .ig-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:3.5rem;
    flex-wrap:wrap;
    gap:1.5rem;
  }
  .ig-head h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(2rem, 4.5vw, 3.8rem);
    line-height:1;
    letter-spacing:-.02em;
    margin-bottom:.7rem;
  }
  .ig-head h2 em{
    font-style:italic;
    color:var(--gold-bright);
    font-weight:400;
  }
  .ig-head p{
    color:var(--ink-soft);
    font-size:.95rem;
  }
  .ig-handle{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    padding:.95rem 1.7rem;
    border:1px solid var(--gold-bright);
    color:var(--gold-bright);
    text-decoration:none;
    font-family:'DM Sans',sans-serif;
    font-size:0.897rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-weight:500;
    transition:all .5s var(--ease-cinema);
    position:relative;
    overflow:hidden;
  }
  .ig-handle::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateY(101%);
    transition:transform .5s var(--ease-cinema);
    z-index:-1;
  }
  .ig-handle:hover{color:var(--bg)}
  .ig-handle:hover::before{transform:translateY(0)}
  .ig-handle svg{width:16px;height:16px}

  .ig-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:.9rem;
  }
  .ig-item{
    aspect-ratio:1;
    overflow:hidden;
    position:relative;
    background:var(--bg-3);
    cursor:none;
  }
  .ig-item img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .9s var(--ease-cinema), filter .5s;
    filter:brightness(.88) saturate(.9);
  }
  .ig-item:hover img{
    transform:scale(1.1);
    filter:brightness(1.05) saturate(1.05);
  }
  .ig-item::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(6,10,24,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23b8d4f0' stroke-width='1.5'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23b8d4f0'/%3E%3C/svg%3E") center/28px no-repeat;
    opacity:0;
    transition:opacity .45s;
  }
  .ig-item:hover::after{opacity:1}

  /* ═══════════════════════════════════════════════════════════
     SERVICES — flip cards (3D)
     ═══════════════════════════════════════════════════════════ */
  .services{
    padding:9rem 3rem;
    background:linear-gradient(180deg, transparent, var(--bg-2) 50%, transparent);
  }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.5rem;
    perspective:1800px;
  }
  .service-card{
    aspect-ratio:3/4;
    min-height:550px;
    position:relative;
    transform-style:preserve-3d;
    transition:transform .9s var(--ease-cinema);
    will-change:transform;
  }
  .service-card.flipped{
    transform:rotateY(180deg) !important;
  }
  /* Service cards use opacity-only reveal to avoid transform conflict with flip */
  .service-card.reveal{
    transform:none;
  }
  .service-card.reveal.in{
    transform:none;
  }
  .service-face{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    background:var(--bg-2);
    border:1px solid var(--line-mid);
    padding:1.9rem;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:border-color .5s, background .5s;
  }
  .service-card:hover .service-face.front{
    border-color:var(--gold-bright);
    background:var(--bg-3);
  }
  .service-face::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    opacity:.5;
  }
  /* FRONT — service summary */
  .service-face.front .num{
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--gold-bright);
    font-weight:500;
    margin-bottom:1.5rem;
  }
  .service-face.front .icon{
    width:60px; height:60px;
    margin-bottom:1.5rem;
    color:var(--gold-bright);
    opacity:.85;
    transition:transform .6s var(--ease-cinema), opacity .5s;
  }
  .service-card:hover .service-face.front .icon{
    transform:translateY(-4px) rotate(-5deg);
    opacity:1;
  }
  .service-face.front h3{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-size:1.85rem;
    line-height:1.1;
    margin-bottom:1rem;
    color:var(--ink);
  }
  .service-face.front h3 em{
    font-style:italic;
    color:var(--gold-bright);
  }
  .service-face.front p{
    font-size:.92rem;
    color:var(--ink-soft);
    line-height:1.6;
    flex:1;
  }
  .service-face.front .flip-cue{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:1.5rem;
    border-top:1px solid var(--line);
    margin-top:1.5rem;
  }
  .service-face.front .from-price{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.15rem;
    white-space:nowrap;
    color:var(--gold-bright);
  }
  .service-face.front .from-price small{
    display:block;
    font-style:normal;
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.25em;
    color:var(--ink-mid);
    margin-bottom:.3rem;
  }
  .service-face.front .flip-btn{
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    font-size:0.944rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--gold-bright);
    font-weight:600;
    padding:.85rem 1.6rem;
    background:rgba(184,212,240,.08);
    border:1px solid var(--gold-bright);
    transition:all .5s var(--ease-cinema);
    position:relative;
    overflow:hidden;
  }
  .service-face.front .flip-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateY(101%);
    transition:transform .5s var(--ease-cinema);
    z-index:-1;
  }
  .service-card:hover .service-face.front .flip-btn{
    gap:.95rem;
    padding:.85rem 2rem;
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(184,212,240,.2);
  }
  .service-card:hover .service-face.front .flip-btn::before{
    transform:translateY(0);
  }
  .service-card:hover .service-face.front .flip-btn{
    color:var(--bg);
  }
  .service-face.front .flip-btn svg{
    width:16px; height:16px;
    transition:transform .5s var(--ease-cinema);
  }
  .service-card:hover .service-face.front .flip-btn svg{
    transform:rotate(180deg);
  }
  /* BACK — pricing details */
  .service-face.back{
    transform:rotateY(180deg);
    background:var(--bg-3);
    border-color:var(--gold-bright);
    overflow-y:auto;
  }
  .service-face.back::-webkit-scrollbar{width:4px}
  .service-face.back::-webkit-scrollbar-thumb{background:var(--gold-deep)}
  .service-face.back .back-tag{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--gold-bright);
    margin-bottom:1rem;
    font-weight:500;
  }
  .service-face.back h4{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-style:italic;
    font-size:1.4rem;
    color:var(--ink);
    margin-bottom:1.2rem;
    line-height:1.2;
  }
  .service-face.back .price-row{
    display:flex;
    align-items:baseline;
    gap:.5rem;
    margin-bottom:1.4rem;
    padding-bottom:1.2rem;
    border-bottom:1px solid var(--line);
  }
  .service-face.back .price-row .from{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.25em;
    color:var(--ink-mid);
  }
  .service-face.back .price-row .amount{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.7rem;
    white-space:nowrap;
    color:var(--gold-bright);
    line-height:1;
    font-weight:400;
  }
  .service-face.back ul{
    list-style:none;
    flex:1;
    margin-bottom:1.4rem;
  }
  .service-face.back li{
    padding:.55rem 0;
    color:var(--ink-soft);
    font-size:0.92rem;
    line-height:1.5;
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    border-bottom:1px solid var(--line);
  }
  .service-face.back li::before{
    content:'';
    width:5px; height:5px;
    background:var(--gold-bright);
    border-radius:50%;
    flex-shrink:0;
    margin-top:.45rem;
  }
  .service-face.back .actions{
    display:flex;
    gap:.8rem;
    margin-top:auto;
    padding-top:1rem;
  }
  .service-face.back .cta-back{
    flex:1;
    text-align:center;
    padding:.9rem 1rem;
    background:var(--gold-bright);
    color:var(--bg);
    text-decoration:none;
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-weight:600;
    transition:background .4s, transform .4s var(--ease-cinema);
  }
  .service-face.back .cta-back:hover{
    background:var(--ink);
    transform:translateY(-2px);
  }
  .service-face.back .flip-back-btn{
    padding:.9rem 1rem;
    background:transparent;
    border:1px solid var(--line-mid);
    color:var(--ink-soft);
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    cursor:none;
    transition:all .4s var(--ease-cinema);
  }
  .service-face.back .flip-back-btn:hover{
    border-color:var(--gold-bright);
    color:var(--gold-bright);
  }

  @media(max-width:1400px){
    .services-grid{grid-template-columns:repeat(3, 1fr)}
  }
  @media(max-width:1100px){
    .services-grid{grid-template-columns:repeat(2, 1fr)}
  }
  @media(max-width:680px){
    .services-grid{grid-template-columns:1fr;gap:1.2rem}
    .service-card{aspect-ratio:auto;min-height:570px}
    .service-face{padding:2rem 1.6rem}
  }

  /* ═══════════════════════════════════════════════════════════
     CONTACT
     ═══════════════════════════════════════════════════════════ */
  .contact{
    padding:9rem 3rem;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:5rem;
    align-items:start;
    max-width:1400px;
    margin:0 auto;
  }
  .contact-left h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(3rem, 7vw, 7rem);
    line-height:.95;
    letter-spacing:-.03em;
    margin-bottom:3rem;
  }
  .contact-left h2 em{
    font-style:italic;
    color:var(--gold-bright);
    font-weight:400;
  }
  .contact-left h2 .arrow{
    display:inline-block;
    color:var(--gold-bright);
    transform:rotate(-12deg);
    transition:transform .7s var(--ease-cinema);
  }
  .contact-left:hover h2 .arrow{transform:rotate(15deg) translate(12px, -12px)}

  .contact-info{
    display:flex;
    flex-direction:column;
    gap:.4rem;
  }
  .contact-item{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:2rem;
    padding:1.4rem 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
    transition:padding-left .45s var(--ease-cinema);
  }
  .contact-item:hover{padding-left:1.2rem}
  .contact-item .label{
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--ink-soft);
  }
  .contact-item .value{
    font-family:'Fraunces',serif;
    font-size:1.3rem;
    color:var(--ink);
    text-decoration:none;
    transition:color .35s;
  }
  .contact-item .value:hover{color:var(--gold-bright)}

  /* — Statut du formulaire de devis — */
  .form-status{
    margin-top:1.2rem;font-size:1.003rem;line-height:1.5;min-height:1.2em;
    font-family:'DM Sans',sans-serif;
  }
  .form-status.ok{color:var(--gold-bright)}
  .form-status.err{color:#e08a8a}
  .form-legal{
    margin-top:1.4rem;font-size:0.85rem;line-height:1.6;color:var(--ink-mid);
    font-family:'DM Sans',sans-serif;
  }
  .form-legal a{color:var(--ink-mid);text-decoration:underline;text-underline-offset:3px}
  .form-legal a:hover{color:var(--gold-bright)}
  .contact-form.sending .submit-btn{opacity:.5;pointer-events:none}

  .contact-form{
    background:var(--bg-2);
    border:1px solid var(--line);
    padding:3.2rem;
    position:relative;
    overflow:hidden;
  }
  .contact-form::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  }
  .contact-form h3{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-style:italic;
    font-size:1.8rem;
    margin-bottom:.5rem;
    color:var(--ink);
  }
  .contact-form .sub{
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--ink-soft);
    margin-bottom:2.5rem;
  }
  .field{
    margin-bottom:1.8rem;
    position:relative;
  }
  .field label{
    display:block;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--ink-soft);
    margin-bottom:.6rem;
    transition:color .4s;
  }
  .field input,
  .field textarea,
  .field select{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line-mid);
    padding:.85rem 0;
    font-family:'Fraunces',serif;
    font-size:1.05rem;
    color:var(--ink);
    outline:none;
    transition:border-color .5s;
    border-radius:0;
  }
  .field select{font-family:'DM Sans',sans-serif;font-size:.95rem}
  .field select option{background:var(--bg-2)}
  .field input::placeholder,
  .field textarea::placeholder{color:var(--ink-muted);font-style:italic}
  .field input:focus,
  .field textarea:focus,
  .field select:focus{border-bottom-color:var(--gold-bright)}
  .field:focus-within label{color:var(--gold-bright)}
  .field textarea{
    resize:vertical;
    min-height:96px;
    font-family:'DM Sans',sans-serif;
    font-size:.95rem;
    line-height:1.65;
  }
  .submit-btn{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line-mid);
    padding:1.2rem 2.5rem;
    font-family:'DM Sans',sans-serif;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:.25em;
    font-weight:500;
    cursor:none;
    width:100%;
    margin-top:.8rem;
    position:relative;
    overflow:hidden;
    transition:color .5s, border-color .5s;
  }
  .submit-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateY(101%);
    transition:transform .55s var(--ease-cinema);
    z-index:-1;
  }
  .submit-btn:hover{color:var(--bg);border-color:var(--gold-bright)}
  .submit-btn:hover::before{transform:translateY(0)}

  /* ═══════════════════════════════════════════════════════════
     FOOTER — massive name
     ═══════════════════════════════════════════════════════════ */
  footer{
    padding:6rem 3rem 2.5rem;
    border-top:1px solid var(--line);
    background:var(--bg-2);
    position:relative;
    overflow:hidden;
  }
  .footer-big{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(4rem, 17vw, 19rem);
    line-height:.85;
    letter-spacing:-.04em;
    margin-bottom:3rem;
    color:var(--ink);
    position:relative;
    cursor:none;
  }
  .footer-big em{
    font-style:italic;
    color:var(--gold-bright);
    font-weight:400;
  }
  .footer-meta{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:2.5rem;
    flex-wrap:wrap;
    gap:1.5rem;
    padding-bottom:2.5rem;
    border-bottom:1px solid var(--line);
  }
  .footer-meta .left p{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:300;
    font-size:1.2rem;
    color:var(--ink-soft);
    max-width:420px;
    line-height:1.5;
  }
  .footer-meta .right{
    display:flex;
    flex-direction:column;
    gap:.8rem;
    align-items:flex-end;
    text-align:right;
  }
  .footer-link{
    display:flex;
    align-items:center;
    gap:.7rem;
    color:var(--ink);
    text-decoration:none;
    font-size:0.92rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    transition:color .4s, gap .5s var(--ease-cinema);
  }
  .footer-link:hover{color:var(--gold-bright);gap:1.2rem}
  .footer-link svg{width:14px;height:14px}

  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--ink-soft);
    flex-wrap:wrap;
    gap:1rem;
  }
  .footer-bottom a{
    color:var(--ink-soft);
    text-decoration:none;
    margin-right:1.8rem;
    transition:color .35s;
  }
  .footer-bottom a:hover{color:var(--gold-bright)}

  /* ═══════════════════════════════════════════════════════════
     REVEAL ANIMATIONS (scroll-triggered)
     ═══════════════════════════════════════════════════════════ */
  .reveal{
    opacity:0;
    transform:translateY(45px);
    transition:
      opacity 1.1s var(--ease-cinema),
      transform 1.1s var(--ease-cinema);
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }

  /* ═══════════════════════════════════════════════════════════
     LIGHTBOX — project gallery overlay
     ═══════════════════════════════════════════════════════════ */
  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(6,10,24,.96);
    backdrop-filter:blur(20px);
    z-index:9500;
    opacity:0;
    visibility:hidden;
    transition:opacity .55s var(--ease-cinema), visibility .55s;
    display:flex;
    flex-direction:column;
  }
  .lightbox.active{opacity:1;visibility:visible}

  .lb-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.6rem 2.5rem;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .lb-back{
    display:flex;
    align-items:center;
    gap:.85rem;
    background:transparent;
    border:1px solid var(--line-mid);
    color:var(--ink);
    padding:.7rem 1.4rem;
    font-family:'DM Sans',sans-serif;
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.25em;
    cursor:none;
    transition:all .45s var(--ease-cinema);
    overflow:hidden;
    position:relative;
  }
  .lb-back::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold-bright);
    transform:translateX(-101%);
    transition:transform .5s var(--ease-cinema);
    z-index:-1;
  }
  .lb-back:hover{color:var(--bg);border-color:var(--gold-bright)}
  .lb-back:hover::before{transform:translateX(0)}
  .lb-back svg{
    width:14px;height:14px;
    transition:transform .4s var(--ease-cinema);
  }
  .lb-back:hover svg{transform:translateX(-4px)}

  .lb-title{
    text-align:center;
    flex:1;
    padding:0 2rem;
  }
  .lb-title .cat{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--gold-bright);
    margin-bottom:.4rem;
    font-weight:500;
  }
  .lb-title h3{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-style:italic;
    font-size:1.4rem;
    color:var(--ink);
  }
  .lb-counter{
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
    min-width:80px;
    text-align:right;
  }
  .lb-counter b{color:var(--gold-bright);font-weight:500}

  .lb-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    padding:2rem;
  }
  .lb-image-wrap{
    max-width:100%;
    max-height:100%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lb-image{
    max-width:100%;
    max-height:75vh;
    object-fit:contain;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    opacity:0;
    transform:scale(.96);
    transition:opacity .55s var(--ease-cinema), transform .65s var(--ease-cinema);
  }
  .lb-image.ready{
    opacity:1;
    transform:scale(1);
  }

  .lb-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px; height:60px;
    border:1px solid var(--line-mid);
    border-radius:50%;
    background:rgba(6,10,24,.6);
    backdrop-filter:blur(8px);
    color:var(--ink-soft);
    cursor:none;
    font-size:1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .5s var(--ease-cinema);
    z-index:2;
  }
  .lb-nav.prev{left:2rem}
  .lb-nav.next{right:2rem}
  .lb-nav:hover{
    background:var(--gold-bright);
    border-color:var(--gold-bright);
    color:var(--bg);
    transform:translateY(-50%) scale(1.08);
  }

  .lb-thumbs{
    display:flex;
    gap:.7rem;
    padding:1.5rem 2.5rem;
    overflow-x:auto;
    justify-content:center;
    border-top:1px solid var(--line);
    flex-shrink:0;
    background:var(--bg);
  }
  .lb-thumb{
    width:75px;
    height:75px;
    flex-shrink:0;
    overflow:hidden;
    cursor:none;
    opacity:.4;
    border:1px solid transparent;
    transition:opacity .4s, border-color .4s, transform .5s var(--ease-cinema);
    position:relative;
  }
  .lb-thumb img{
    width:100%;height:100%;
    object-fit:cover;
    pointer-events:none;
    filter:grayscale(.3);
    transition:filter .4s;
  }
  .lb-thumb:hover{opacity:.85;transform:translateY(-3px)}
  .lb-thumb.active{
    opacity:1;
    border-color:var(--gold-bright);
    box-shadow:0 0 0 1px var(--gold-bright);
  }
  .lb-thumb.active img{filter:none}

  /* Reveal the lightbox content with stagger */
  .lb-header{
    opacity:0;
    transform:translateY(-20px);
    transition:opacity .6s .2s var(--ease-cinema), transform .6s .2s var(--ease-cinema);
  }
  .lb-thumbs{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s .35s var(--ease-cinema), transform .6s .35s var(--ease-cinema);
  }
  .lightbox.active .lb-header,
  .lightbox.active .lb-thumbs{
    opacity:1;
    transform:translateY(0);
  }

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE — breakpoints progressifs
     ═══════════════════════════════════════════════════════════ */

  /* TABLETTE (768px) — layout qui s'adapte */
  @media(max-width:768px){
    body{cursor:auto}
    .cursor,.cursor-ring,.spotlight{display:none}

    nav{padding:1.1rem 1.5rem}
    nav.scrolled{padding:.9rem 1.5rem}
    .nav-logo{font-size:1.3rem}
    .nav-links{gap:1.4rem;font-size:0.78rem;letter-spacing:.18em}
    
    .hero-side{display:none}
    .frame-counter, .frame-iso{display:none}

    .section{padding:5.5rem 1.8rem}
    .section-head{
      grid-template-columns:1fr;
      gap:1.2rem;
      margin-bottom:3.5rem;
      padding-bottom:1.5rem;
    }
    .section-num{font-size:0.78rem}
    .section-title{font-size:clamp(2rem,6vw,3.5rem)}
    .section-meta{text-align:left;font-size:0.78rem}

    .portfolio-grid{
      grid-template-columns:repeat(2, 1fr);
      grid-auto-rows:140px;
      gap:1rem;
    }
    .photo:nth-child(n){grid-column:span 1;grid-row:span 2}
    .photo:nth-child(1),
    .photo:nth-child(4),
    .photo:nth-child(9),
    .photo:nth-child(10){grid-column:span 2;grid-row:span 3}
    .photo-info{padding:1.2rem}
    .photo-cat{font-size:0.78rem}
    .photo-title{font-size:1.2rem}

    .parallax{height:65vh;margin:2.5rem 0}
    .parallax-content h2{font-size:clamp(1.6rem,4.5vw,2.8rem);padding:0 1.5rem}

    .about{padding:5.5rem 1.8rem}
    .about-grid{grid-template-columns:1fr;gap:3.5rem}
    .about-portrait{aspect-ratio:4/5}
    .about-decor{width:70px;height:70px}
    .stats{grid-template-columns:repeat(2,1fr);gap:1.8rem}
    .stat-num{font-size:2.8rem}
    .stat-label{font-size:0.78rem}

    .reviews{padding:5.5rem 1.8rem}
    .reviews-head{grid-template-columns:1fr;gap:1.2rem}
    .reviews-rating{align-items:flex-start;text-align:left}
    .reviews-stage{min-height:420px;margin-top:3rem}
    .review blockquote{font-size:clamp(1.3rem,2.8vw,2.2rem);padding:0 1rem}
    .review-arrow{width:50px;height:50px}
    .review-dot{width:22px}
    .review-dot.active{width:38px}
    .reviews-controls{gap:1.2rem;margin-top:3rem}

    .ig-strip{padding:4.5rem 1.8rem}
    .ig-head{margin-bottom:2.5rem;gap:1.2rem}
    .ig-grid{grid-template-columns:repeat(3, 1fr);gap:.8rem}

    .services{padding:5.5rem 1.8rem}
    .service{
      grid-template-columns:70px 1fr auto;
      gap:1.5rem;
      padding:2.2rem 0;
    }
    .service-content h3{font-size:clamp(1.6rem,2.8vw,2.4rem)}
    .service-content p{font-size:1.038rem}
    .service-arrow{width:52px;height:52px}

    .modal{padding:2.2rem 1.8rem;max-width:90%}
    .modal-price .amount{font-size:2.8rem}

    .contact{padding:5.5rem 1.8rem}
    .contact-grid{grid-template-columns:1fr;gap:3.5rem}
    .contact-left h2{font-size:clamp(2.5rem,6vw,5rem);margin-bottom:2.5rem}
    .contact-form{padding:2.2rem}

    footer{padding:4rem 1.8rem 2.2rem}
    .footer-meta{flex-direction:column;align-items:flex-start;text-align:left;gap:2rem}
    .footer-meta .right{align-items:flex-start;text-align:left}
    .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}

    .marquee-track{font-size:1.5rem;gap:3.5rem}
    .marquee-row:nth-child(2) .marquee-track{font-size:.9rem;gap:3rem}

    .lb-header{padding:1.1rem 1.5rem;flex-wrap:wrap;gap:.6rem}
    .lb-title{order:3;width:100%;text-align:left;padding:0}
    .lb-nav{width:48px;height:48px;font-size:1.15rem}
    .lb-nav.prev{left:.8rem}
    .lb-nav.next{right:.8rem}
    .lb-image{max-height:65vh}
  }

  /* MOBILE PAYSAGE (640px) — optimisations */
  @media(max-width:640px){
    nav{padding:.9rem 1.2rem}
    nav.scrolled{padding:.8rem 1.2rem}
    .nav-logo{font-size:1.15rem}
    .nav-links{gap:1rem;font-size:0.78rem;letter-spacing:.15em}
    .nav-ig{padding:.4rem .6rem !important}
    .nav-ig span{display:none}

    .hero h1{font-size:clamp(2.5rem,8vw,6rem);line-height:.95}
    .hero-sub{font-size:.95rem;max-width:100%;padding:0 .5rem}
    .hero-cta{padding:1rem 2rem;font-size:0.802rem}

    .section{padding:4.5rem 1.2rem}
    .section-head{margin-bottom:2.8rem;gap:1rem;padding-bottom:1.2rem}
    .section-title{font-size:clamp(1.8rem,7vw,3rem)}

    .filters{gap:.5rem;margin-bottom:2.5rem}
    .filter{padding:.65rem 1.2rem;font-size:0.78rem;letter-spacing:.18em}

    .portfolio-grid{
      grid-auto-rows:130px;
      gap:.8rem;
    }

    .parallax{height:55vh;margin:2rem 0}
    .parallax-content h2{font-size:clamp(1.4rem,4vw,2.2rem);line-height:1.3}

    .about{padding:4.5rem 1.2rem}
    .about-grid{gap:2.8rem}
    .about-portrait{aspect-ratio:1/1}
    .about-decor{width:60px;height:60px;top:-15px;left:-15px}
    .about-decor.br{bottom:-15px;right:-15px}
    .about-text h2{font-size:clamp(1.8rem,5vw,3rem);margin-bottom:2rem}
    .about-text p{font-size:.95rem;line-height:1.75}
    .stats{grid-template-columns:1fr;gap:1.5rem}
    .stat-num{font-size:2.4rem}

    .reviews{padding:4.5rem 1.2rem}
    .reviews-stage{min-height:500px;margin-top:2.5rem}
    .review-stars{font-size:1.1rem;margin-bottom:1.5rem}
    .review blockquote{font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.4;padding:0 .5rem}
    .review-arrow{width:44px;height:44px;font-size:1.1rem}
    .review-dot{width:18px}
    .review-dot.active{width:32px}

    .ig-strip{padding:3.5rem 1.2rem}
    .ig-head h2{font-size:clamp(1.8rem,5vw,3rem)}
    .ig-handle{font-size:0.802rem;padding:.8rem 1.3rem}
    .ig-grid{grid-template-columns:repeat(2, 1fr);gap:.6rem}

    .services{padding:4.5rem 1.2rem}
    .service{
      grid-template-columns:60px 1fr auto;
      gap:1rem;
      padding:1.8rem 0;
    }
    .service-num{font-size:0.78rem}
    .service-content h3{font-size:clamp(1.4rem,3vw,2rem)}
    .service-content p{display:none}
    .service-arrow{width:44px;height:44px;font-size:.95rem}
    .service-arrow::after{display:none}

    .modal{padding:1.8rem 1.2rem;max-width:95%}
    .modal h2{font-size:clamp(1.6rem,4vw,2.4rem)}
    .modal-price .amount{font-size:2.4rem}
    .modal-includes li{font-size:1.038rem;padding:.6rem 0}

    .contact{padding:4.5rem 1.2rem}
    .contact-grid{gap:2.8rem}
    .contact-left h2{font-size:clamp(2.2rem,7vw,4rem);line-height:.92;margin-bottom:2rem}
    .contact-item{
      grid-template-columns:100px 1fr;
      gap:1.2rem;
      padding:1.2rem 0;
    }
    .contact-item .label{font-size:0.78rem}
    .contact-item .value{font-size:1.1rem}
    .contact-form{padding:1.8rem}
    .contact-form h3{font-size:1.5rem}
    .field{margin-bottom:1.5rem}
    .field input, .field textarea, .field select{padding:.75rem 0;font-size:.95rem}

    footer{padding:3rem 1.2rem 1.8rem}
    .footer-big{font-size:clamp(3rem,13vw,12rem);margin-bottom:2.5rem}
    .footer-meta{gap:1.5rem;margin-bottom:2rem;padding-bottom:2rem}
    .footer-meta .left p{font-size:1.05rem}
    .footer-link{font-size:0.826rem}

    .marquee{padding:1.5rem 0}
    .marquee-track{font-size:1.2rem;gap:2.5rem}
    .marquee-row:nth-child(2) .marquee-track{font-size:0.92rem;gap:2.5rem}

    .lb-header{padding:.9rem 1.2rem}
    .lb-back{padding:.6rem 1.1rem;font-size:0.78rem}
    .lb-title h3{font-size:1.15rem}
    .lb-nav{width:42px;height:42px;font-size:1rem}
    .lb-nav.prev{left:.5rem}
    .lb-nav.next{right:.5rem}
    .lb-image{max-height:60vh}
    .lb-thumbs{padding:.8rem;gap:.5rem}
    .lb-thumb{width:55px;height:55px}
  }

  /* MOBILE PORTRAIT (480px) — très petits écrans */
  @media(max-width:480px){
    body{font-size:15px}

    nav{padding:.8rem 1rem}
    .nav-logo{font-size:1.05rem}
    .nav-links{gap:.8rem;font-size:0.78rem;letter-spacing:.12em}
    
    .hero h1{font-size:clamp(2rem,10vw,5rem)}
    .hero-tag{font-size:0.78rem;letter-spacing:.28em;margin-bottom:2rem}
    .hero-sub{font-size:1.038rem;margin-bottom:2.5rem}
    .hero-cta{padding:.95rem 1.8rem;font-size:0.78rem;letter-spacing:.2em}
    .hero-scroll{bottom:2rem;font-size:0.78rem}

    .section{padding:3.5rem 1rem}
    .section-head{margin-bottom:2.5rem}
    .section-num{font-size:0.78rem;letter-spacing:.25em}
    .section-title{font-size:clamp(1.6rem,8vw,2.5rem)}
    .section-meta{font-size:0.78rem}

    .filters{flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
    .filter{padding:.6rem 1rem;font-size:0.78rem}

    .portfolio-grid{
      grid-template-columns:1fr;
      grid-auto-rows:180px;
      gap:.7rem;
    }
    .photo:nth-child(n){grid-column:span 1;grid-row:span 2}
    .photo:nth-child(1),
    .photo:nth-child(4){grid-row:span 3}
    .photo-info{padding:1rem}
    .photo-cat{font-size:0.78rem}
    .photo-title{font-size:1.05rem}

    .parallax{height:50vh;margin:1.5rem 0}
    .parallax-content{padding:0 1rem}
    .parallax-content h2{font-size:clamp(1.2rem,5vw,1.8rem);line-height:1.35}

    .about{padding:3.5rem 1rem}
    .about-grid{gap:2.5rem}
    .about-decor{width:50px;height:50px;top:-12px;left:-12px}
    .about-decor.br{bottom:-12px;right:-12px}
    .about-text .tag{font-size:0.78rem;margin-bottom:1.5rem}
    .about-text h2{font-size:clamp(1.6rem,6vw,2.5rem);margin-bottom:1.8rem}
    .about-text p{font-size:1.038rem;margin-bottom:1.2rem}
    .about-text p:first-of-type::first-letter{font-size:3.2rem;margin:.3rem .6rem 0 0}
    .stats{gap:1.2rem;margin-top:2.5rem;padding-top:2rem}
    .stat-num{font-size:2.2rem}
    .stat-num em{font-size:1.4rem}
    .stat-label{font-size:0.78rem}

    .reviews{padding:3.5rem 1rem}
    .reviews-head{margin-bottom:.8rem}
    .reviews-rating .stars{font-size:.95rem}
    .reviews-rating .score{font-size:0.78rem}
    .reviews-stage{min-height:520px;margin-top:2rem}
    .review-stars{font-size:1rem;margin-bottom:1.3rem}
    .review blockquote{font-size:clamp(1.1rem,4vw,1.5rem);line-height:1.45;margin-bottom:2rem}
    .review cite b{font-size:1rem}
    .review cite .meta{font-size:0.78rem;gap:.6rem}
    .review-arrow{width:40px;height:40px;font-size:1rem}
    .review-dot{width:16px;height:2px}
    .review-dot.active{width:28px}
    .review-counter{font-size:0.78rem}

    .ig-strip{padding:3rem 1rem}
    .ig-head{flex-direction:column;align-items:flex-start;gap:1.5rem;margin-bottom:2rem}
    .ig-head h2{font-size:clamp(1.6rem,6vw,2.5rem)}
    .ig-head p{font-size:1.038rem}
    .ig-handle{font-size:0.78rem;padding:.75rem 1.2rem}
    .ig-grid{grid-template-columns:repeat(2, 1fr);gap:.5rem}

    .services{padding:3.5rem 1rem}
    .service{
      grid-template-columns:50px 1fr 38px;
      gap:.8rem;
      padding:1.5rem 0;
    }
    .service-num{font-size:0.78rem}
    .service-content h3{font-size:clamp(1.3rem,4vw,1.7rem);margin-bottom:.5rem}
    .service-arrow{width:38px;height:38px;font-size:1.038rem}

    .modal{padding:1.5rem 1rem;max-width:96%;max-height:92vh}
    .modal-close{width:36px;height:36px;font-size:1rem;top:1rem;right:1rem}
    .modal-tag{font-size:0.78rem;margin-bottom:.8rem}
    .modal h2{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:.4rem}
    .modal-sub{font-size:1.003rem;margin-bottom:2rem;padding-bottom:1.5rem}
    .modal-price{margin-bottom:1.8rem}
    .modal-price .from{font-size:0.78rem}
    .modal-price .amount{font-size:2.2rem}
    .modal-includes h4{font-size:0.78rem;margin-bottom:1rem}
    .modal-includes ul{margin-bottom:1.5rem}
    .modal-includes li{font-size:0.968rem;padding:.5rem 0;gap:.6rem}
    .modal-note{font-size:0.92rem;margin-bottom:1.8rem;padding:.9rem 1rem}
    .modal-cta{padding:1rem 2rem;font-size:0.802rem}

    .contact{padding:3.5rem 1rem}
    .contact-grid{gap:2.5rem}
    .contact-left h2{font-size:clamp(2rem,9vw,3.5rem);line-height:.9;margin-bottom:1.8rem}
    .contact-info{gap:.4rem}
    .contact-item{
      grid-template-columns:85px 1fr;
      gap:1rem;
      padding:1rem 0;
    }
    .contact-item .label{font-size:0.78rem}
    .contact-item .value{font-size:1rem}
    .contact-form{padding:1.5rem}
    .contact-form h3{font-size:1.35rem;margin-bottom:.4rem}
    .contact-form .sub{font-size:0.78rem;margin-bottom:2rem}
    .field{margin-bottom:1.4rem}
    .field label{font-size:0.78rem;margin-bottom:.5rem}
    .field input, .field textarea, .field select{padding:.7rem 0;font-size:.9rem}
    .field textarea{min-height:85px}
    .submit-btn{padding:1.1rem 2rem;font-size:0.78rem;margin-top:.6rem}

    footer{padding:2.5rem 1rem 1.5rem}
    .footer-big{font-size:clamp(2.5rem,15vw,10rem);margin-bottom:2rem}
    .footer-meta{gap:1.2rem;margin-bottom:1.8rem;padding-bottom:1.8rem}
    .footer-meta .left p{font-size:.95rem;line-height:1.45;max-width:100%}
    .footer-link{font-size:0.78rem;gap:.6rem}
    .footer-link svg{width:12px;height:12px}
    .footer-bottom{gap:.8rem;font-size:0.78rem}
    .footer-bottom a{margin-right:1.2rem}

    .marquee{padding:1.2rem 0}
    .marquee-track{font-size:1rem;gap:2rem}
    .marquee-row:nth-child(2) .marquee-track{font-size:0.826rem;gap:2rem}

    .lb-header{padding:.8rem 1rem;gap:.5rem}
    .lb-back{padding:.55rem 1rem;font-size:0.78rem;gap:.6rem}
    .lb-back svg{width:12px;height:12px}
    .lb-title{padding:0}
    .lb-title .cat{font-size:0.78rem;margin-bottom:.3rem}
    .lb-title h3{font-size:1rem}
    .lb-counter{font-size:0.78rem;min-width:70px}
    .lb-main{padding:1.5rem 1rem}
    .lb-nav{width:38px;height:38px;font-size:.95rem}
    .lb-nav.prev{left:.4rem}
    .lb-nav.next{right:.4rem}
    .lb-image{max-height:55vh}
    .lb-thumbs{padding:.7rem;gap:.4rem;overflow-x:auto}
    .lb-thumb{width:50px;height:50px;flex-shrink:0}
  }

  /* prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.001s !important;
      transition-duration:.001s !important;
      animation-iteration-count:1 !important;
    }
    .reveal{opacity:1;transform:none}
    .photo{opacity:1;transform:none}
  }

  /* Protect images */
  .photo img, .hero-bg img, .about-portrait img, .ig-item img, .parallax-bg{
    -webkit-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  .photo, .ig-item{pointer-events:auto}

  /* ═══════════════════════════════════════════════════════════
     NAV — sous-menu « Prestations »
     ═══════════════════════════════════════════════════════════ */
  .nav-links li.has-sub{position:relative}
  .nav-sub-toggle{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:none;
    border:0;
    font-family:'DM Sans',sans-serif;
    font-size:inherit;
    letter-spacing:inherit;
    text-transform:inherit;
    font-weight:inherit;
    color:var(--ink);
    cursor:none;
    padding:.4rem 0;
    position:relative;
    transition:color .4s;
  }
  .nav-sub-toggle::after{
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:0; height:1px;
    background:var(--gold-bright);
    transition:width .5s var(--ease-cinema);
  }
  .nav-sub-toggle:hover{color:var(--gold-bright)}
  .nav-sub-toggle:hover::after{width:100%}
  .nav-sub-toggle .chev{
    width:7px; height:7px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .45s var(--ease-cinema);
  }
  .has-sub.open .nav-sub-toggle{color:var(--gold-bright)}
  .has-sub.open .nav-sub-toggle .chev{transform:rotate(-135deg) translateY(-2px)}

  .nav-sub{
    position:absolute;
    top:calc(100% + 1.1rem);
    left:50%;
    transform:translateX(-50%) translateY(-10px);
    min-width:290px;
    list-style:none;
    background:rgba(10,18,38,.97);
    backdrop-filter:blur(22px);
    border:1px solid var(--line-mid);
    padding:.6rem;
    opacity:0;
    visibility:hidden;
    transition:opacity .4s var(--ease-cinema), transform .4s var(--ease-cinema), visibility .4s;
    z-index:120;
  }
  .has-sub.open .nav-sub,
  .has-sub:hover .nav-sub{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  .nav-sub li{display:block}
  .nav-sub a{
    display:block;
    padding:.85rem 1rem;
    font-size:0.78rem;
    letter-spacing:.16em;
    color:var(--ink-soft);
    border-left:1px solid transparent;
    transition:color .35s, background .35s, border-color .35s;
  }
  .nav-sub a::after{display:none}
  .nav-sub a:hover{
    color:var(--gold-bright);
    background:rgba(184,212,240,.06);
    border-left-color:var(--gold-bright);
  }
  .nav-sub a[aria-current="page"]{
    color:var(--gold-bright);
    border-left-color:var(--gold-bright);
  }

  /* ═══════════════════════════════════════════════════════════
     PAGE MÉTIER — gabarit des pages de prestation
     ═══════════════════════════════════════════════════════════ */
  .page-hero{
    position:relative;
    min-height:72vh;
    display:flex;
    align-items:flex-end;
    padding:9rem 3rem 4.5rem;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .page-hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .page-hero-bg img{
    width:100%; height:100%;
    object-fit:cover;
    filter:brightness(.34) contrast(1.16) saturate(.85);
    transform:scale(1.04);
  }
  .page-hero::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(6,10,24,.72) 0%, rgba(6,10,24,.34) 42%, var(--bg) 100%);
    z-index:1;
  }
  .page-hero-content{position:relative;z-index:2;max-width:960px}

  .crumb{
    font-size:0.802rem;
    text-transform:uppercase;
    letter-spacing:.24em;
    color:var(--ink-mid);
    margin-bottom:2rem;
  }
  .crumb a{color:var(--ink-mid);text-decoration:none;transition:color .35s}
  .crumb a:hover{color:var(--gold-bright)}
  .crumb span{color:var(--gold-bright)}

  .page-hero h1{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(2.3rem, 5.4vw, 4.6rem);
    line-height:1.02;
    letter-spacing:-.025em;
    margin-bottom:1.8rem;
  }
  .page-hero h1 em{font-style:italic;color:var(--gold-bright);font-weight:400}
  .page-lede{
    font-size:clamp(1rem, 1.5vw, 1.18rem);
    color:var(--ink-soft);
    max-width:680px;
    line-height:1.75;
    margin-bottom:2.6rem;
  }
  .page-hero-cta{display:flex;gap:1rem;flex-wrap:wrap}

  /* ─── Corps rédactionnel ─────────────────────────────────── */
  .prose{max-width:760px}
  .prose h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(1.7rem, 3vw, 2.5rem);
    line-height:1.15;
    letter-spacing:-.02em;
    margin:3.4rem 0 1.3rem;
  }
  .prose h2:first-child{margin-top:0}
  .prose h2 em{font-style:italic;color:var(--gold-bright);font-weight:400}
  .prose h3{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-size:1.25rem;
    margin:2.2rem 0 .8rem;
    color:var(--ink);
  }
  .prose p{
    color:var(--ink-soft);
    line-height:1.85;
    margin-bottom:1.2rem;
  }
  .prose strong{color:var(--ink);font-weight:500}
  .prose ul{list-style:none;margin:1.4rem 0 1.8rem}
  .prose ul li{
    position:relative;
    padding-left:1.7rem;
    margin-bottom:.85rem;
    color:var(--ink-soft);
    line-height:1.75;
  }
  .prose ul li::before{
    content:'';
    position:absolute;
    left:0; top:.72em;
    width:7px; height:1px;
    background:var(--gold-bright);
  }
  .prose a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid var(--line-warm)}
  .prose a:hover{border-bottom-color:var(--gold-bright)}

  /* ─── Grille de contenu : texte + encart ─────────────────── */
  .page-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:5rem;
    align-items:start;
  }
  .page-aside{
    position:sticky;
    top:7rem;
    border:1px solid var(--line-mid);
    padding:2.2rem;
    background:linear-gradient(180deg, var(--bg-2), var(--bg));
  }
  .aside-label{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--gold-bright);
    margin-bottom:1.6rem;
  }
  .aside-row{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:.9rem 0;
    border-bottom:1px solid var(--line);
    font-size:0.968rem;
  }
  .aside-row:last-of-type{border-bottom:0}
  .aside-row .k{color:var(--ink-mid)}
  .aside-row .v{color:var(--ink);text-align:right;font-weight:500}
  .aside-cta{
    display:block;
    margin-top:1.8rem;
    padding:1rem 1.4rem;
    text-align:center;
    border:1px solid var(--gold-bright);
    color:var(--gold-bright);
    text-decoration:none;
    font-size:0.802rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    transition:background .45s var(--ease-cinema), color .45s;
  }
  .aside-cta:hover{background:var(--gold-bright);color:var(--bg)}

  /* ─── Points clés ────────────────────────────────────────── */
  .keypoints{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:1.4rem;
    margin:3rem 0 1rem;
  }
  .keypoint{
    border:1px solid var(--line);
    padding:1.8rem;
    background:var(--bg-2);
    transition:border-color .5s, transform .5s var(--ease-cinema);
  }
  .keypoint:hover{border-color:var(--line-warm);transform:translateY(-4px)}
  .keypoint .kp-num{
    font-size:0.78rem;
    letter-spacing:.28em;
    color:var(--gold-bright);
    margin-bottom:.9rem;
    font-variant-numeric:tabular-nums;
  }
  .keypoint h3{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-size:1.1rem;
    margin-bottom:.6rem;
  }
  .keypoint p{font-size:1.003rem;color:var(--ink-mid);line-height:1.7;margin:0}

  /* ─── Galerie de page métier ─────────────────────────────── */
  .svc-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:1.2rem;
  }
  .svc-gallery .photo{aspect-ratio:4/3}
  .svc-gallery .photo.tall{aspect-ratio:3/4}

  /* ─── FAQ ────────────────────────────────────────────────── */
  .faq{max-width:860px}
  .faq details{
    border-bottom:1px solid var(--line);
    padding:0;
  }
  .faq summary{
    list-style:none;
    cursor:none;
    padding:1.6rem 3rem 1.6rem 0;
    position:relative;
    font-family:'Fraunces',serif;
    font-size:1.08rem;
    font-weight:400;
    color:var(--ink);
    transition:color .4s;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--gold-bright)}
  .faq summary::after{
    content:'';
    position:absolute;
    right:.4rem; top:50%;
    width:11px; height:11px;
    border-right:1.5px solid var(--gold-bright);
    border-bottom:1.5px solid var(--gold-bright);
    transform:translateY(-70%) rotate(45deg);
    transition:transform .45s var(--ease-cinema);
  }
  .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .faq details p{
    color:var(--ink-soft);
    line-height:1.85;
    padding:0 2rem 1.8rem 0;
    margin:0;
  }

  /* ─── Maillage interne ───────────────────────────────────── */
  .crosslinks{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:1.2rem;
  }
  .crosslink{
    display:block;
    border:1px solid var(--line);
    padding:1.7rem;
    text-decoration:none;
    background:var(--bg-2);
    transition:border-color .5s, background .5s, transform .5s var(--ease-cinema);
  }
  .crosslink:hover{
    border-color:var(--line-warm);
    background:var(--bg-3);
    transform:translateY(-4px);
  }
  .crosslink .cl-kicker{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.26em;
    color:var(--gold-bright);
    margin-bottom:.8rem;
  }
  .crosslink .cl-title{
    font-family:'Fraunces',serif;
    font-size:1.15rem;
    font-weight:400;
    color:var(--ink);
    line-height:1.3;
  }
  .crosslink .cl-arrow{
    margin-top:1.1rem;
    font-size:1.003rem;
    color:var(--ink-mid);
    transition:transform .5s var(--ease-cinema), color .5s;
    display:inline-block;
  }
  .crosslink:hover .cl-arrow{transform:translateX(6px);color:var(--gold-bright)}

  /* ─── Bandeau CTA de fin de page ─────────────────────────── */
  .page-cta{
    text-align:center;
    padding:7rem 3rem;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, var(--bg), var(--bg-2));
  }
  .page-cta h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(1.9rem, 4vw, 3.2rem);
    line-height:1.1;
    letter-spacing:-.02em;
    margin-bottom:1.2rem;
  }
  .page-cta h2 em{font-style:italic;color:var(--gold-bright);font-weight:400}
  .page-cta p{
    color:var(--ink-mid);
    max-width:560px;
    margin:0 auto 2.6rem;
    line-height:1.8;
  }

  /* ─── Responsive du gabarit métier ───────────────────────── */
  @media(max-width:1100px){
    .page-body{grid-template-columns:1fr;gap:3rem}
    .page-aside{position:static;max-width:520px}
  }
  @media(max-width:768px){
    .page-hero{padding:7.5rem 1.8rem 3.5rem;min-height:62vh}
    .page-cta{padding:5rem 1.8rem}
    .nav-sub{
      position:fixed;
      left:1.5rem; right:1.5rem;
      top:auto;
      transform:translateY(-10px);
      min-width:0;
    }
    .has-sub.open .nav-sub,
    .has-sub:hover .nav-sub{transform:translateY(0)}
  }
  @media(max-width:640px){
    .page-hero{padding:6.5rem 1.2rem 3rem}
    .page-aside{padding:1.6rem}
    .page-cta{padding:4rem 1.2rem}
  }
  @media(hover:none){
    .nav-sub-toggle{cursor:pointer}
    .faq summary{cursor:pointer}
    .has-sub:hover .nav-sub{opacity:0;visibility:hidden}
    .has-sub.open .nav-sub{opacity:1;visibility:visible}
  }
  @media (prefers-reduced-motion: reduce){
    .page-hero-bg img{transform:none}
    .keypoint:hover, .crosslink:hover{transform:none}
  }

  /* ═══════════════════════════════════════════════════════════
     ACCESSIBILITÉ — focus clavier & lien d'évitement
     Le curseur custom masque le pointeur : sans anneau de focus
     visible, la navigation au clavier est impossible.
     ═══════════════════════════════════════════════════════════ */
  :focus{outline:none}
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:3px;
    border-radius:2px;
  }
  .photo:focus-visible,
  .service-card:focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:4px;
  }

  .skip-link{
    position:absolute;
    top:0; left:50%;
    transform:translate(-50%, -140%);
    z-index:9999;
    padding:.9rem 1.8rem;
    background:var(--gold-bright);
    color:var(--bg);
    font-size:0.826rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-weight:500;
    text-decoration:none;
    transition:transform .3s var(--ease-cinema);
  }
  .skip-link:focus{transform:translate(-50%, 0)}

  /* ─── Cibles tactiles : minimum 44px sur mobile ──────────── */
  @media(hover:none){
    .nav-links a,
    .nav-sub-toggle{
      min-height:44px;
      display:inline-flex;
      align-items:center;
    }
    .nav-sub a{min-height:44px;display:flex;align-items:center}
    .filter{min-height:44px}
    .footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
    .faq summary{min-height:44px}
  }

  /* ─── Formules tarifaires au verso des cartes ────────────── */
  .service-face.back .formulas-head{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--ink-mid);
    text-align:right;
    margin-bottom:.5rem;
    padding-bottom:.4rem;
    border-bottom:1px solid var(--line);
  }
  .service-face.back ul.formulas{
    list-style:none;
    flex:1;
    margin-bottom:.9rem;
  }
  .service-face.back li.formula{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:.7rem;
    padding:.6rem 0;
    border-bottom:1px solid var(--line);
  }
  .service-face.back li.formula::before{display:none}
  .formula .f-left{min-width:0;display:flex;flex-direction:column;gap:.12rem}
  .formula .f-name{
    font-size:0.932rem;
    font-weight:500;
    color:var(--ink);
    line-height:1.25;
  }
  .formula .f-detail{
    font-size:0.78rem;
    color:var(--ink-mid);
    line-height:1.35;
  }
  .formula .f-price{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.08rem;
    color:var(--gold-bright);
    white-space:nowrap;
    line-height:1;
    flex-shrink:0;
  }
  .formula .f-price.dual{font-size:0.968rem}
  .service-face.back .formulas-note{
    font-size:0.78rem;
    line-height:1.5;
    color:var(--ink-mid);
    margin-bottom:.5rem;
  }

  /* ─── Bandeau options / forfaits sous la grille ──────────── */
  .services-notes{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2.5rem;
    margin-top:3.5rem;
    padding-top:2.5rem;
    border-top:1px solid var(--line);
  }
  .services-notes .note-title{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:.26em;
    color:var(--gold-bright);
    margin-bottom:1.1rem;
  }
  .services-notes ul{list-style:none}
  .services-notes li{
    font-size:0.944rem;
    color:var(--ink-soft);
    padding:.42rem 0;
    line-height:1.5;
    border-bottom:1px solid var(--line);
  }
  .services-notes li b{color:var(--ink);font-weight:500;white-space:nowrap}
  .services-notes .note-legal{
    margin-top:1.1rem;
    font-size:0.802rem;
    line-height:1.6;
    color:var(--ink-mid);
  }
  .services-notes .note-legal a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid var(--line-warm)}
  .services-notes .note-legal a:hover{border-bottom-color:var(--gold-bright)}

  @media(max-width:900px){
    .services-notes{grid-template-columns:1fr;gap:2rem;margin-top:2.5rem}
  }