/* ===========================================================
   CLIQ — cliqcorporation.com
   Type:  Bodoni Moda (display) · Jost (text & tracked lockups)
   Field: lacquer wine ↔ porcelain · one accent per surface
   =========================================================== */

:root{
  --lacquer:  #2A0810;
  --wine:     #55101F;
  --ink:      #1C0B0E;
  --ink-soft: #5B4247;
  --porcelain:#FBF6F3;
  --blush:    #DBC9BB;   /* darkest perimeter pixel of assets/shades.jpg — see .palette img */
  --champagne:#D8B78C;
  --line:     rgba(28,11,14,.16);
  --line-dark:rgba(240,218,213,.20);
  --cream:    #F0DAD5;

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --text: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --gut: clamp(1.5rem, 5vw, 5rem);
  --band: clamp(5.5rem, 13vw, 11rem);
  --ease: cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem;
  /* paints the canvas behind the page: this is what iOS shows in the rubber-band
     overscroll. Dark, because both ends of the page (hero and footer) are dark —
     the porcelain on <body> would flash white when you pull past the edge. */
  background:var(--lacquer);
}
body.menu-open{ overflow:hidden; }
body{
  margin:0;
  background:var(--porcelain);
  color:var(--ink);
  font-family:var(--text);
  font-weight:300;
  font-size:clamp(.98rem,.94rem + .2vw,1.05rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
a{ color:inherit; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  background:var(--lacquer); color:var(--cream); padding:.7rem 1.2rem; z-index:99;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ top:.6rem; }

:focus-visible{ outline:1px solid var(--champagne); outline-offset:4px; }

/* ── nav ─────────────────────────────────────────────── */
.nav-sentinel{ position:absolute; top:0; left:0; width:1px; height:88px; pointer-events:none; }

.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:clamp(1.2rem,3vw,2.2rem) var(--gut);
  color:var(--cream);
  transition:background .45s var(--ease), color .45s var(--ease),
             padding .45s var(--ease), box-shadow .45s var(--ease);
}
/* Condensed state, once the page has moved off the hero.
   Deliberately opaque with NO backdrop-filter: that property makes the bar the
   containing block for its position:fixed descendants, which collapses the
   mobile menu panel from the viewport down to the height of the bar. */
.nav.is-solid{
  background:var(--porcelain);
  color:var(--ink);
  padding-block:clamp(.7rem,1.7vw,1.05rem);
  box-shadow:0 1px 0 var(--line);
}
.nav-mark{
  font-family:var(--display); font-size:1.15rem; letter-spacing:.34em;
  text-decoration:none; padding-left:.34em;
}
.nav-links{ display:flex; gap:clamp(1.3rem,3vw,2.6rem); }
.nav-links a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; opacity:.72; transition:opacity .3s var(--ease);
}
.nav-links a:hover{ opacity:1; }

.nav-end{ display:flex; align-items:center; gap:clamp(.9rem,2.4vw,1.5rem); }

.nav-toggle{
  display:none; background:none; border:0; padding:.4rem; cursor:pointer; color:inherit;
}
.nav-toggle-box{ display:block; width:26px; height:11px; position:relative; }
.nav-toggle-box span{
  position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .35s var(--ease);
}
.nav-toggle-box span:first-child{ top:0; }
.nav-toggle-box span:last-child{ bottom:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:first-child{ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:last-child{ transform:translateY(-5px) rotate(-45deg); }

.lang{ display:flex; align-items:center; gap:.45rem; font-size:.7rem; letter-spacing:.16em; opacity:.8; }
.lang button{
  background:none; border:0; padding:0; cursor:pointer;
  color:inherit; font:inherit; letter-spacing:inherit; opacity:.55;
  transition:opacity .3s var(--ease);
}
.lang button[aria-pressed="true"]{ opacity:1; }

/* ── hero ────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  /* vertical rhythm keyed to viewport HEIGHT, not width: a wide, short laptop
     was pushing the shade rail below the fold. svh (not vh) so a phone with the
     browser chrome showing still fits. */
  padding:clamp(5rem,11svh,8.5rem) var(--gut) clamp(2rem,5svh,4rem);
  color:var(--cream);
  background:
    radial-gradient(120% 90% at 18% 8%,  #6B1224 0%, transparent 55%),
    radial-gradient(90% 80% at 88% 22%,  #43101F 0%, transparent 60%),
    radial-gradient(110% 70% at 50% 108%,#7A1528 0%, transparent 62%),
    linear-gradient(168deg,#3A0C17 0%,#230710 52%,#330B16 100%);
}
/* No filter:blur() here, and nothing crossing the hero's overflow:hidden edge —
   a blurred layer clipped at that boundary leaves a 1px light seam in Chromium.
   The radial gradient is already soft; the blur was softening softness. */
.hero-glow{
  position:absolute; inset:auto 0 0 0; height:64%; z-index:-1;
  background:radial-gradient(58% 100% at 50% 104%, var(--tube) 0%, transparent 72%);
  opacity:.26;
  transition:background 1.1s var(--ease);
}
.hero-grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; text-align:center; width:100%; max-width:60rem; }

.lockup{
  margin:0 0 clamp(1rem,2.4svh,2rem);
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  --o:1; opacity:var(--o); padding-left:.42em;   /* --o is the dimmer: lower it to fade back */
}
.wordmark{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(3.2rem,min(15vw,16svh),9.5rem); line-height:.92;
  display:flex; justify-content:center;
}
.wordmark span{ display:inline-block; padding:0 clamp(.12em,.6vw,.16em); }

/* the sparkle sits in the counter of the Q — the two values below are the
   only ones to touch if it drifts off-centre in another typeface */
.wordmark .q{ position:relative; --spark-x:50%; --spark-y:51%; }
.spark{
  position:absolute; left:var(--spark-x); top:var(--spark-y);
  width:.19em; height:auto;
  transform:translate(-50%,-50%);
  fill:currentColor; opacity:.92; pointer-events:none;
}

.stage{ margin:clamp(1rem,3svh,2.6rem) 0 clamp(1.2rem,3.2svh,2.8rem); }
/* the tube is 200:430, so its height is ~2.15× its width — cap the width by
   height so the product can never be what pushes the composition off-screen */
.tube{ width:clamp(96px,min(22vw,16svh),178px); height:auto; overflow:visible; }
.tube-fill{ fill:var(--tube); transition:fill .7s var(--ease); }
.tube-star{ fill:#fff; opacity:.75; }
.tube-name{
  font-family:var(--display); font-size:14px; letter-spacing:3.4px;
  fill:#fff; fill-opacity:.88;
}
.tube-sweep{ opacity:0; }

/* ── shade rail ──────────────────────────────────────── */
.rail-head{
  margin:0 0 clamp(.7rem,1.6svh,1.1rem); font-size:.63rem; letter-spacing:.34em;
  text-transform:uppercase; opacity:.55; padding-left:.34em;
}
.rail-dots{ display:flex; justify-content:center; gap:clamp(.8rem,2.4vw,1.4rem); }
.dot{
  width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--c); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset -2px -3px 6px rgba(0,0,0,.45), inset 2px 2px 4px rgba(255,255,255,.22);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dot:hover{ transform:scale(1.12); }
.dot.is-on{
  box-shadow:
    inset -2px -3px 6px rgba(0,0,0,.45), inset 2px 2px 4px rgba(255,255,255,.22),
    0 0 0 1px var(--lacquer), 0 0 0 2px rgba(240,218,213,.75);
}
.rail-name{
  margin:clamp(.7rem,1.6svh,1.15rem) 0 0; font-family:var(--display); font-size:1.1rem;
  letter-spacing:.06em; opacity:.92;
}
.hero-status{
  margin:clamp(1.6rem,4.5svh,4rem) 0 0;
  font-size:.63rem; letter-spacing:.3em; text-transform:uppercase; --o:1; opacity:var(--o);
}

/* ── bands ───────────────────────────────────────────── */
.band{ padding:var(--band) var(--gut); position:relative; isolation:isolate; overflow:hidden; }
.band-light{ background:var(--porcelain); }
.band-blush{ background:var(--blush); }
.band-dark{
  color:var(--cream);
  background:
    radial-gradient(100% 80% at 20% 0%, #5E1122 0%, transparent 60%),
    linear-gradient(180deg,#2E0A13 0%,#1F060D 100%);
}

.col{ max-width:44rem; margin-inline:auto; }
.h-display{
  margin:0 0 clamp(1.4rem,3vw,2rem);
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,5.2vw,3.4rem); line-height:1.12; letter-spacing:-.005em;
  text-wrap:balance;
}
.lede{ font-size:clamp(1.05rem,.98rem + .45vw,1.28rem); line-height:1.65; margin:0 0 1.4rem; }
.col p{ max-width:62ch; }
.band-dark .lede{ opacity:.82; }
.note{ margin:clamp(2.6rem,5vw,3.6rem) auto 0; font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); }

/* ── claims (hairline grid, no cards) ────────────────── */
.claims{
  max-width:62rem; margin:clamp(3.5rem,8vw,6rem) auto 0;
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.claim{
  padding:clamp(1.8rem,4vw,2.8rem);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.claim h3{
  margin:0 0 .7rem; font-family:var(--display); font-weight:400;
  font-size:1.22rem; letter-spacing:.01em;
}
.claim p{ margin:0; font-size:.94rem; color:var(--ink-soft); max-width:34ch; }

/* ── shades: the swatched palette, photographed ──────── */
.shade-layout{
  max-width:60rem; margin-inline:auto;
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(2.5rem,7vw,6rem); align-items:center;
}
.shade-text .h-display{ margin-bottom:1.6rem; }
.shade-text .note{ margin:2rem 0 0; }

/* The poster carries a soft vignette, so no flat colour can meet all four of its
   edges. So don't match it — erase it: `darken` keeps the darker of image and
   backdrop per channel, and --blush is the darkest pixel in the poster's
   perimeter. Every background pixel is therefore lighter, collapses to the band
   colour, and the rectangle cannot show. Pigment and shadows are far darker and
   come through untouched. */
.palette{ margin:0; }
.palette img{
  display:block; width:clamp(230px,27vw,330px); height:auto;
  mix-blend-mode:darken;
}

/* ── mechanism ───────────────────────────────────────── */
.mech{
  max-width:62rem; margin:clamp(3.5rem,8vw,5.5rem) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3rem);
}
.mech-part{ padding-top:1.6rem; border-top:1px solid var(--line-dark); }
.mech-part h3{
  margin:0 0 .7rem; font-family:var(--display); font-weight:400; font-size:1.2rem;
}
.mech-part p{ margin:0; font-size:.94rem; opacity:.72; }

/* ── partnerships (register change: dossier) ─────────── */
.sheet{
  max-width:62rem; margin:clamp(3.5rem,8vw,5.5rem) auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem);
  border-top:1px solid var(--line); padding-top:clamp(2rem,4vw,3rem);
}
.sheet-head{
  margin:0 0 1.4rem; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--ink-soft);
}
.sheet-col > .sheet-head + *{ margin-top:0; }
.sheet-col .sheet-head:not(:first-child){ margin-top:clamp(2.2rem,4vw,3rem); }

.spec{ list-style:none; margin:0; padding:0; }
.spec li{
  padding:.7rem 0 .7rem 1.5rem; position:relative;
  border-bottom:1px solid var(--line); font-size:.95rem;
}
.spec li::before{
  content:""; position:absolute; left:0; top:1.28rem;
  width:6px; height:6px; background:var(--wine); transform:rotate(45deg);
}
.spec li:last-child{ border-bottom:0; }

.facts{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:0 1.5rem; }
.facts dt{
  padding:.7rem 0; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--line); white-space:nowrap;
}
.facts dd{
  margin:0; padding:.7rem 0; font-size:.95rem; border-bottom:1px solid var(--line);
}
.sheet-note{ margin:0; font-size:.95rem; color:var(--ink-soft); }

.cta{ margin-top:clamp(3.5rem,8vw,5.5rem); text-align:center; }
.cta p{ margin:0 auto 1.4rem; font-family:var(--display); font-size:1.35rem; max-width:24ch; }
.btn{
  display:inline-block; text-decoration:none;
  padding:1.05rem clamp(1.6rem,4vw,2.6rem);
  background:var(--lacquer); color:var(--cream);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  transition:background .4s var(--ease);
}
.btn:hover{ background:var(--wine); }

/* ── footer ──────────────────────────────────────────── */
.foot{
  background:var(--lacquer); color:var(--cream);
  padding:clamp(4rem,9vw,6rem) var(--gut) clamp(2.5rem,5vw,3.5rem);
  text-align:center;
}
.foot-mark{
  margin:0 0 1.6rem; font-family:var(--display); font-size:1.4rem;
  letter-spacing:.38em; padding-left:.38em;
}
.foot-line{ margin:.2rem 0; font-size:.8rem; letter-spacing:.1em; opacity:.72; }
.foot-line a{ text-decoration:none; border-bottom:1px solid var(--line-dark); }
.foot-small{
  margin:clamp(2.2rem,5vw,3rem) auto 0; max-width:46ch;
  font-size:.68rem; line-height:1.7; opacity:.38;
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:820px){
  .nav-toggle{ display:block; }
  .nav-mark,.nav-end{ position:relative; z-index:2; }

  /* the links become a full-screen panel rather than disappearing */
  .nav-links{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(1.4rem,4svh,2.4rem);
    background:linear-gradient(170deg,#3A0C17 0%,#230710 60%,#330B16 100%);
    opacity:0; visibility:hidden;
    transition:opacity .4s var(--ease), visibility 0s .4s;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
  .nav-links a{
    font-family:var(--display); font-size:clamp(1.7rem,7vw,2.4rem);
    letter-spacing:.03em; text-transform:none; opacity:1; color:var(--cream);
  }
  /* the open panel is dark, so the bar reverts to cream over it */
  .nav.is-open,.nav.is-open.is-solid{ color:var(--cream); background:none; box-shadow:none; }

  .claims{ grid-template-columns:1fr; }
  .mech{ grid-template-columns:1fr; gap:0; }
  .mech-part{ margin-top:1.8rem; }
  .sheet{ grid-template-columns:1fr; }
  .shade-layout{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .shade-text .lede,.shade-text .note{ margin-inline:auto; }
  .palette img{ width:min(300px,72vw); }
}
@media (max-width:420px){
  .facts{ grid-template-columns:1fr; gap:0; }
  .facts dt{ border-bottom:0; padding-bottom:0; }
  .facts dd{ padding-top:.2rem; }
}

/* ── the one orchestrated moment: the click ──────────── */
@media (prefers-reduced-motion:no-preference){
  /* Every hidden start-state lives inside .intro, which JS drops once the
     sequence has played — so nothing depends on animation-fill-mode later. */
  .intro .wordmark span{ opacity:0; animation:letter .9s var(--ease) forwards; }
  .intro .wordmark span:nth-child(1){ animation-delay:.10s }
  .intro .wordmark span:nth-child(2){ animation-delay:.18s }
  .intro .wordmark span:nth-child(3){ animation-delay:.26s }
  .intro .wordmark span:nth-child(4){ animation-delay:.34s }

  .intro .tube-cap{  opacity:0; animation:snapDown .75s var(--ease) .55s forwards; }
  .intro .tube-base{ opacity:0; animation:snapUp   .75s var(--ease) .55s forwards; }
  .intro .tube-shadow{ opacity:0; animation:fade .8s ease 1.15s forwards; }
  .intro .tube-sweep{ animation:sweep 1s var(--ease) 1.25s; }

  /* the sparkle lights up on the beat the tube lands — one moment, not two */
  .intro .spark{ opacity:0; animation:twinkle .7s var(--ease) 1.28s forwards; }
  @keyframes twinkle{
    0%  { opacity:0;   transform:translate(-50%,-50%) scale(.3) rotate(-25deg) }
    60% { opacity:1;   transform:translate(-50%,-50%) scale(1.12) rotate(4deg) }
    100%{ opacity:.92; transform:translate(-50%,-50%) scale(1) rotate(0) }
  }

  .intro .lockup,.intro .rail,.intro .hero-status{ opacity:0; animation:fade .9s ease forwards; }
  .intro .lockup{ animation-delay:.05s }
  .intro .rail{ animation-delay:1.3s }
  .intro .hero-status{ animation-delay:1.55s }

  @keyframes letter{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
  @keyframes snapDown{ 0%{opacity:0;transform:translateY(-34px)} 60%{opacity:1;transform:translateY(3px)} 100%{opacity:1;transform:none} }
  @keyframes snapUp{   0%{opacity:0;transform:translateY( 34px)} 60%{opacity:1;transform:translateY(-3px)} 100%{opacity:1;transform:none} }
  @keyframes sweep{ 0%{opacity:0;transform:translateX(0)} 20%{opacity:1} 100%{opacity:0;transform:translateX(340px)} }
  /* ends at each element's own resting opacity (--o), never at a flat 1 —
     otherwise they land bright white and then dim when .intro is removed */
  @keyframes fade{ from{ opacity:0 } to{ opacity:var(--o,1) } }

  .reclick .tube-cap{  animation:reclickDown .5s var(--ease); }
  .reclick .tube-base{ animation:reclickUp .5s var(--ease); }
  @keyframes reclickDown{ 0%{transform:none} 35%{transform:translateY(-7px)} 100%{transform:none} }
  @keyframes reclickUp{   0%{transform:none} 35%{transform:translateY( 7px)} 100%{transform:none} }
}