/* ═══════════════════════════════════════════════════════════════
   TAHITI WEBSITES — frontier build 2026-07-11
   Soul: monolog discipline × dash-creative ember × arrodz directness
   Duotone: warm-black #0C0B0A ↔ bone #EFE7D6 · ember: ochre #C99A3B
   ═══════════════════════════════════════════════════════════════ */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:'Clash Display';src:url('assets/fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Display';src:url('assets/fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('assets/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('assets/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/fraunces-italic.woff2') format('woff2');font-style:italic;font-weight:400 600;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#0C0B0A;
  --ink-2:#161311;
  --bone:#EFE7D6;
  --bone-dim:rgba(239,231,214,.66);
  --bone-faint:rgba(239,231,214,.56);
  --hairline:rgba(239,231,214,.14);
  --ochre:#C99A3B;
  --ochre-bright:#E0B45A;
  --on-gold:#1B1206;

  /* live theme (flips on bone sections) */
  --bg:var(--ink);
  --fg:var(--bone);
  --fg-dim:var(--bone-dim);
  --fg-faint:var(--bone-faint);
  --line:var(--hairline);

  --display:'Clash Display','General Sans',sans-serif;
  --body:'General Sans',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;

  --pad:clamp(1.25rem,4.5vw,4.5rem);
  --sect:clamp(5rem,12vw,10.5rem);
}
/* (global theme flip removed — full-page repaint on scroll; works is self-bone) */

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}   /* smooth scrolling = Lenis (CSS smooth would double-ease anchors) */
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* clip, NOT hidden — overflow-x:hidden on body breaks position:sticky (the card stack) */
}
::selection{background:var(--ochre);color:var(--on-gold)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:.95;letter-spacing:-.02em}
h2{font-size:clamp(2.1rem,5.4vw,4.2rem)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
.accent{font-family:var(--serif);font-style:italic;font-weight:480;color:var(--ochre);letter-spacing:0;line-height:inherit}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}

/* ---------- film grain glue ---------- */
/* static by design: animating a fixed full-viewport layer repaints the whole
   screen every step — the #1 jank source. Premium sites ship grain STATIC. */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:100;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .8s ease,visibility .8s;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader__count{font-family:var(--mono);font-size:.9rem;letter-spacing:.5em;color:var(--bone-dim)}
.preloader__track{position:absolute;left:0;right:0;bottom:9%;height:1px;background:var(--hairline)}
.preloader__fill{height:100%;width:100%;background:var(--ochre);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .3s ease}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem var(--pad);
  transition:background-color .5s ease,backdrop-filter .5s ease,border-color .5s ease;
  border-bottom:1px solid transparent;
}
/* solid tint, NO backdrop-filter: blur over an animating canvas re-blurs every frame */
.nav.scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:var(--line)}
.nav__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:.01em}
.nav__brand img{border-radius:50%}
.nav__links{display:flex;gap:1.8rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.nav__links a{color:var(--fg-dim);transition:color .3s}
.nav__links a:hover{color:var(--ochre)}
.nav__cta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--ochre);color:var(--ochre);border-radius:99px;padding:.55em 1.3em;
  transition:background-color .35s,color .35s;
}
.nav__cta:hover{background:var(--ochre);color:var(--on-gold)}
@media(max-width:760px){.nav__links{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1em 2.1em;border-radius:99px;transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .35s,color .35s,border-color .35s;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--ochre);color:var(--on-gold)}
.btn--gold:hover{background:var(--ochre-bright)}
.btn--ghost{border:1px solid var(--line);color:var(--fg)}
.btn--ghost:hover{border-color:var(--ochre);color:var(--ochre)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(6rem,16vh,9rem) var(--pad) clamp(3rem,7vh,5rem);overflow:hidden;background:var(--ink);
}
.hero__field{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__scrim{position:absolute;inset:0;
  background:radial-gradient(115% 95% at 32% 40%,rgba(12,11,10,.66) 0%,rgba(12,11,10,.90) 62%,rgba(12,11,10,.97) 100%);
}
.hero__inner{position:relative;z-index:2;max-width:64rem}
.hero__title{font-size:clamp(2.02rem,8.4vw,7rem);color:var(--bone);margin:.9rem 0 1.4rem;letter-spacing:-.025em;line-height:1}
.hero__title .dot{color:var(--ochre)}
.hero__title .line{display:block;overflow:hidden;white-space:nowrap;margin-top:-.06em}
.hero__title .line--serif{padding-bottom:.14em;margin-bottom:-.14em}   /* italic descender room */
.hero__title .line>span{display:inline-block;transform:translateY(115%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
body.loaded .hero__title .line:nth-child(2)>span{transition-delay:.1s}
body.loaded .hero__title .line:nth-child(3)>span{transition-delay:.2s}
body.loaded .hero__title .line>span{transform:translateY(0)}
.hero__sub{color:var(--bone-dim);max-width:36rem;font-size:clamp(1rem,1.4vw,1.15rem)}
.hero__ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}
.hero__stats{display:flex;flex-wrap:wrap;gap:1.2rem clamp(1.6rem,5vw,4.5rem);margin-top:clamp(2.6rem,6vh,4.5rem);border-top:1px solid var(--hairline);padding-top:1.4rem;max-width:44rem}
.hero__stats dt{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--bone);letter-spacing:-.01em}
.hero__stats dd{color:var(--bone-faint);margin-top:.25rem;font-size:.68rem}
/* ---------- sections shared ---------- */
section{padding:var(--sect) var(--pad)}
.section-head{margin-bottom:clamp(2.6rem,6vw,4.5rem);max-width:64rem}
.index{color:var(--ochre);margin-bottom:1.1rem;display:block}

/* ---------- works (bone) — compact grid, scales to 10+ clients ---------- */
/* self-contained bone palette: fg+bg always paired (no mid-transition mismatch) */
.works{
  background:var(--bone);color:var(--ink);
  --fg:var(--ink);
  --fg-dim:rgba(12,11,10,.66);
  --fg-faint:rgba(12,11,10,.60);
  --line:rgba(12,11,10,.16);
  --accent-on-ground:#7A5A1E;   /* deep ochre, AA on bone */
  content-visibility:auto;contain-intrinsic-size:auto 1300px;
}
.works .index,.works .accent{color:var(--accent-on-ground)}
.works .work__visit{color:var(--accent-on-ground)}
.works__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(23rem,100%),1fr));
  gap:clamp(1.3rem,2.6vw,2.2rem);max-width:76rem}
.work{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.35);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s ease}
.work:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent-on-ground) 55%,transparent)}
.work__media{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:#dfd6c2}
.work__media img{width:100%;height:100%;object-fit:cover;object-position:top center}
.work__tag{position:absolute;top:.8rem;left:.8rem;z-index:3;background:var(--ochre);color:var(--on-gold);
  padding:.45em .95em;border-radius:99px;letter-spacing:.1em}
.work__meta{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  padding:1rem 1.2rem 1.1rem;color:var(--fg-dim)}
.work__num{display:none}
.work__name{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:-.01em;text-transform:none;color:var(--fg)}
.work__kind{flex:1;font-size:.62rem}
.work__visit{color:var(--ochre);transition:opacity .3s}
.work__visit:hover{opacity:.7}

/* reveal: transform+opacity ONLY (compositor-accelerated — clip-path repaints per frame) */
.reveal-clip{opacity:0;transform:translateY(42px) scale(.965);will-change:transform,opacity;
  transition:opacity .9s ease,transform 1.15s cubic-bezier(.16,1,.3,1);
}
.reveal-clip.in{opacity:1;transform:none;will-change:auto}

/* ---------- included — scroll-fill wordlist ---------- */
.included{padding-bottom:clamp(4rem,9vw,7rem);content-visibility:auto;contain-intrinsic-size:auto 900px}
.wordlist{list-style:none;max-width:76rem}
.wordlist li{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.5rem,7.2vw,6rem);line-height:1.06;letter-spacing:-.025em;
  color:color-mix(in srgb,var(--fg) calc(46% + 54% * var(--fill,0)),var(--bg));
  transform:translateX(calc(var(--fill,0) * 10px));   /* P2 notre-métier slide */
}
.wordlist li::after{content:'';display:block;height:1px;background:var(--line);margin:.18em 0}
.included__note{color:var(--fg-dim);margin-top:2.2rem}

/* ---------- method — sticky stacking cards (P2 méthode animation, P1 skin) ---------- */
.steps{list-style:none;max-width:64rem;display:grid;gap:clamp(1.1rem,2.4vh,1.8rem)}
.step{display:grid;grid-template-columns:5.5rem 1fr;gap:1.2rem;align-items:center;
  border:1px solid rgba(239,231,214,.17);border-radius:14px;
  background:
    radial-gradient(120% 130% at 85% -20%, rgba(201,154,59,.12), transparent 55%),
    linear-gradient(180deg,#1E1915 0%,#151110 100%);
  box-shadow:0 -14px 40px -18px rgba(0,0,0,.85), 0 1px 0 rgba(239,231,214,.06) inset;
  padding:clamp(1.8rem,4vw,3.4rem);
}
/* tall cards = a real stacking window: each pins ~a full card-height while the next rides over it.
   All viewports — mobile included (was gated behind min-width:760px, which killed the stack on phones) */
.steps{--stacktop:84px}
.step{position:sticky;min-height:58vh}
.step:nth-child(1){top:calc(var(--stacktop) + 0px)}
.step:nth-child(2){top:calc(var(--stacktop) + 22px)}
.step:nth-child(3){top:calc(var(--stacktop) + 44px)}
@media(max-width:759px){.steps{--stacktop:64px}}
.step__num{font-size:1rem;color:var(--ochre)}
.step h3{font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:500;margin-bottom:.5rem}
.step p{color:var(--fg-dim);max-width:34rem}
@media(max-width:600px){.step{grid-template-columns:3rem 1fr}}
.specrow{display:flex;gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap;margin-top:3rem;color:var(--fg-dim)}
.specrow dt{color:var(--fg-faint)}
.specrow dd{color:var(--fg);margin-top:.2rem}

/* ---------- pricing ---------- */
.pricing{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr));gap:1.4rem;max-width:66rem}
.price{position:relative;border:1px solid var(--line);border-radius:10px;padding:clamp(1.6rem,3.4vw,2.6rem);
  display:flex;flex-direction:column;background:color-mix(in srgb,var(--fg) 3%,transparent);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s ease}
/* selection glow: pre-painted on a pseudo, revealed by opacity (compositor-only, no shadow repaint) */
.price::after{content:"";position:absolute;inset:-1px;border-radius:10px;pointer-events:none;opacity:0;
  border:1px solid var(--ochre);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ochre) 45%,transparent),
             0 18px 60px -18px color-mix(in srgb,var(--ochre) 60%,transparent),
             0 0 44px -8px color-mix(in srgb,var(--ochre) 35%,transparent);
  transition:opacity .4s ease}
.price:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ochre) 60%,transparent)}
.price:hover::after{opacity:1}
.price:active::after{opacity:1}   /* touch: tap lights the selection glow */
.price--ecom{border-color:color-mix(in srgb,var(--ochre) 55%,transparent)}
.price__tag{position:absolute;top:-0.8em;left:1.6rem;background:var(--ochre);color:var(--on-gold);
  padding:.42em 1em;border-radius:99px;letter-spacing:.1em}
.price__name{font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:500;margin-bottom:.3rem}
.price__for{color:var(--fg-faint);margin-bottom:1.6rem}
.price__promo{color:var(--ochre);margin-bottom:.4rem}
.price__amount{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1;margin-bottom:.5rem}
.price__amount s{font-size:clamp(1.05rem,1.8vw,1.4rem);color:var(--fg-faint);font-weight:500;margin-right:.45rem}
.price__amount strong{font-size:clamp(2.2rem,4.4vw,3.2rem)}
.price__amount strong span{font-size:.42em;font-weight:500;color:var(--fg-dim)}
.price__once{color:var(--fg-dim);margin-bottom:1.6rem}
.price__specs{list-style:none;text-transform:none;letter-spacing:.02em;font-size:.82rem;
  color:var(--fg-dim);margin-bottom:2rem;flex:1}
.price__specs li{padding:.55em 0;border-top:1px solid var(--line)}
.price__specs li::before{content:'✦';color:var(--ochre);margin-right:.7em;font-size:.7em}
.price__cta{text-align:center}
.pricing__note{color:var(--fg-faint);margin-top:2.4rem}

/* ---------- close — ochre wall ---------- */
/* endcap: close + footer together = exactly the final screen */
.endcap{min-height:100svh;display:flex;flex-direction:column}
.close{background:var(--ochre);color:var(--on-gold);text-align:center;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(5.5rem,12vh,8rem) var(--pad) clamp(3rem,7vh,5rem)}   /* top clears the fixed nav */
.close__title{font-size:clamp(3rem,9.5vw,8.2rem);line-height:.9;letter-spacing:-.03em;color:var(--on-gold)}
.close__title .line{display:inline-block;overflow:hidden;vertical-align:bottom}
.close__title .line>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.close.in .close__title .line:nth-child(2)>span{transition-delay:.1s}
.close.in .close__title .line>span{transform:translateY(0)}
.close__sub{font-size:clamp(1rem,1.6vw,1.25rem);margin-top:1.4rem;color:rgba(27,18,6,.78)}
.close__row{display:flex;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem);
  flex-wrap:wrap;margin-top:clamp(2.2rem,5vh,4rem)}
.close__contact{display:flex;flex-direction:column;gap:.7rem;text-align:left;color:rgba(27,18,6,.82)}
.close__contact a{font-size:1rem;letter-spacing:.06em;transition:opacity .3s}
.close__contact a:hover{opacity:.65}
.close__contact span{font-size:.66rem;color:rgba(27,18,6,.82)}

/* orb portal (negotiated-intelligence, ochre retune) */
.portal-wrap{position:relative;display:grid;place-items:center;gap:1.1rem}
.portal{position:relative;width:clamp(180px,20vw,225px);aspect-ratio:1;display:grid;place-items:center;
  border:none;background:none;padding:0;cursor:pointer;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.portal:hover{transform:scale(1.055)}
/* call-or-mail chooser */
.portal__choice{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.portal-wrap.open .portal__choice{opacity:1;transform:none;pointer-events:auto}
.portal-wrap.open .portal{transform:scale(.94)}
.choice{display:flex;flex-direction:column;align-items:center;gap:.25rem;
  background:var(--ink);color:var(--bone);border-radius:14px;padding:.9rem 1.6rem;
  font-family:var(--display);font-weight:500;font-size:1.05rem;
  transition:transform .4s cubic-bezier(.16,1,.3,1),background-color .3s ease}
.choice:hover{transform:translateY(-3px);background:#241d16}
.choice .mono{color:var(--ochre-bright);font-size:.62rem}
/* static organic shape + transform-only breathing: border-radius morphs repaint
   the blob + glows every frame — that was the close-section lag */
.portal__blob{position:absolute;inset:0;overflow:hidden;background:var(--ink);
  border-radius:56% 44% 47% 53% / 55% 52% 48% 45%;
  box-shadow:0 0 70px 6px rgba(224,180,90,.30) inset,0 22px 60px -12px rgba(12,11,10,.45);
  animation:blob-breathe 9s ease-in-out infinite;
}
.portal__grain{position:absolute;inset:0;width:100%;height:100%;opacity:.42;
  border-radius:56% 44% 47% 53% / 55% 52% 48% 45%;pointer-events:none;
  animation:blob-breathe 9s ease-in-out infinite}
.portal__label{position:relative;z-index:2;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--bone);text-shadow:0 0 10px rgba(0,0,0,.85);pointer-events:none}
@keyframes blob-breathe{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.045) rotate(2.2deg)}
}

/* ---------- footer ---------- */
.footer{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;
  padding:clamp(2.6rem,5vw,4rem) var(--pad) clamp(2.2rem,7vw,7.5rem)}
.footer__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.6rem;
  padding-bottom:clamp(3rem,8vw,6rem)}
.footer__brand{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:500;font-size:.95rem}
.footer__links{display:flex;gap:1.6rem;flex-wrap:wrap;color:var(--bone-dim)}
.footer__links a:hover{color:var(--ochre)}
.footer__copy{color:var(--bone-faint)}
.footer__monolith{position:absolute;bottom:0;left:50%;width:max-content;
  font-family:var(--display);font-weight:600;white-space:nowrap;
  font-size:clamp(3.2rem,9vw,10rem);line-height:.74;letter-spacing:-.03em;
  color:var(--bone);opacity:.06;
  transform:translateX(-50%) translateY(.18em);pointer-events:none;user-select:none}
.footer__monolith::after{content:"TAHITI WEBSITES"}   /* text lives in CSS: decorative watermark, not DOM text */

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}

/* ---------- verify mode (?still=1 — QA screenshots) ---------- */
html.still{scroll-behavior:auto}
html.still .hero{min-height:900px;height:900px}
html.still .reveal,html.still .reveal-clip{opacity:1;transform:none;clip-path:inset(0 round 6px);transition:none}
html.still .hero__title .line>span,html.still .close__title .line>span{transform:none;transition:none}
html.still .wordlist li{--fill:1}
html.still .preloader{display:none}

/* ---------- reduced motion: DELIBERATELY NOT HONORED ----------
   Fleet lock (2026-06-15 "we want quality" + 2026-07-11 "always animated, even
   with windows animations off, even on mobile"). No @media reduce block: every
   animation runs for every visitor on every device. */