/* Scale Motion — night sky, light from blue to orange */
:root {
  --night:  #04050B;   /* page */
  --deep:   #0A0F22;   /* raised surfaces */
  --text:   #ECEFF7;
  --muted:  #98A0B8;
  --blue:   #2E5BFF;
  --violet: #7B5CFF;
  --pink:   #FF4D8D;
  --orange: #FF8A2B;
  --amber:  #FFB23F;
  --spectrum: linear-gradient(90deg, var(--blue), var(--violet) 40%, var(--pink) 65%, var(--orange));

  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;

  --gutter: clamp(16px, 4.5vw, 64px);
  --header-h: 76px;
  --max: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--text); color: var(--night);
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--gutter);
  transition: background .4s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.site-header.is-solid {
  background: rgba(4, 5, 11, .62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.site-header.is-hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.brand-mark { width: 40px; height: 29px; filter: drop-shadow(0 0 8px rgba(255, 77, 141, .45)); }
.brand-word {
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.45rem; letter-spacing: .08em; line-height: 1; text-transform: uppercase;
}
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--muted); transition: color .2s; }
.nav a:hover { color: var(--text); }
.header-end { display: flex; align-items: center; gap: 18px; }
.lang { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--muted); padding: 6px 4px; }
.lang:hover { color: var(--text); }

/* ---------- Buttons: light pill, text shimmering blue to orange ---------- */
.btn {
  --pad: 17px 28px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: var(--pad); border: 0; border-radius: 999px;
  background: var(--text);
  font: 600 1rem/1 var(--f-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 12px 40px -12px rgba(123, 92, 255, .7);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 18px 50px -12px rgba(255, 138, 43, .75); }
.btn-small { --pad: 11px 20px; font-size: .9rem; }
.btn-ghost {
  background: rgba(10, 15, 34, .45);
  box-shadow: inset 0 0 0 1.5px rgba(236, 239, 247, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text), 0 14px 40px -14px rgba(46, 91, 255, .8); }

.glow {
  background: linear-gradient(100deg,
      var(--night) 0%, var(--night) 34%,
      var(--blue) 42%, var(--violet) 48%, var(--pink) 54%, var(--orange) 60%,
      var(--night) 70%, var(--night) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 2.8s linear infinite;
}
.btn-ghost .glow {
  background-image: linear-gradient(100deg,
      var(--text) 0%, var(--text) 34%,
      #8fb0ff 42%, var(--violet) 48%, var(--pink) 54%, var(--amber) 60%,
      var(--text) 70%, var(--text) 100%);
}
@keyframes shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* ---------- Chapters ---------- */
main { position: relative; z-index: 1; }
.chapter {
  position: relative;
  min-height: 135vh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 80px;
}
.chapter-tall { min-height: 220vh; align-items: stretch; }
.chapter-tall .wrap { display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.copy { max-width: 560px; }
.copy-wide { max-width: 640px; }
.text-right .copy { margin-left: auto; }
.sticky-copy { position: sticky; top: calc(var(--header-h) + 6vh); }

.display {
  margin: 0 0 24px;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(3.4rem, 7.6vw, 7.8rem);
  line-height: .86; letter-spacing: -.005em;
  text-transform: uppercase;
  will-change: transform;
}
.display span { display: block; }
/* single long words (mostly in French) that cannot wrap */
.display-long { font-size: clamp(2.6rem, 5.4vw, 5.6rem); }
.outline { color: transparent; -webkit-text-stroke: 1.6px var(--text); }
.lede { margin: 0 0 28px; font-size: 1.14rem; color: var(--muted); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero { min-height: 150vh; align-items: flex-start; padding-top: calc(var(--header-h) + 13vh); }
.hero .copy { max-width: 700px; }
.hero .display { font-size: clamp(3.8rem, 9.6vw, 10rem); }
/* Hero title on 3 lines (both languages) so the call-to-action stays above the fold */
.hero .copy:has(.display-hero-wide) { max-width: 780px; }
.hero .display-hero-wide { font-size: clamp(3rem, 6.5vw, 6.8rem); }
.hero .lede { max-width: 540px; color: #B9BFD2; }
.scroll-cue {
  position: absolute; left: var(--gutter); top: calc(100vh - 60px);
  display: flex; align-items: center; gap: 12px;
  font-size: .82rem; font-weight: 500; color: var(--muted);
}
.scroll-line { width: 56px; height: 2px; background: var(--spectrum); transform-origin: left; animation: cue 2.2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes cue { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* Glass on the night sky */
.glass {
  background: rgba(10, 15, 34, .5);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}

.detail { padding: 24px 26px 22px; }
.detail h3 { margin: 0 0 10px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.detail ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.detail li {
  position: relative; padding: 10px 0 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-weight: 500; font-size: .97rem; line-height: 1.4;
}
.detail li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--spectrum);
  box-shadow: 0 0 10px rgba(255, 77, 141, .6);
}

/* Area of expertise */
.copy-xl { max-width: none; }
.services .display, .services .lede { text-align: right; }
.stages { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
.stage { padding: 24px 22px 22px; }
.stage h3 { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-display); font-weight: 800; font-size: 2.2rem; line-height: 1; text-transform: uppercase; }
.stage-n, .step-n { font-family: var(--f-body); font-size: .8rem; font-weight: 600; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage > p { margin: 0 0 14px; color: var(--muted); font-size: .96rem; }
.stage ul { margin: 0; padding: 0; list-style: none; }
.stage li { border-top: 1px solid rgba(255, 255, 255, .07); }
.stage li a { display: block; padding: 9px 0; font-weight: 500; font-size: .97rem; text-decoration: none; transition: color .2s, padding .3s; }
.stage li a:hover { color: var(--amber); padding-left: 6px; }

/* How we scale you */
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.steps li { padding: 22px 22px 24px; }
.steps h3 { margin: 6px 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; line-height: 1; text-transform: uppercase; }
.steps p { margin: 0; color: var(--muted); font-size: .96rem; }

/* AI */
.ai-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-card { padding: 22px 22px 20px; }
.ai-card h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.ai-card p { margin: 0; color: var(--muted); font-size: .96rem; }

/* Contact */
.contact { min-height: 150vh; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contact-info { font-style: normal; display: grid; gap: 6px; font-weight: 500; color: var(--muted); }
.contact-info a { font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; text-decoration: none; color: var(--text); }
.contact-info a:hover { color: var(--amber); }
.form { position: relative; padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: rgba(4, 5, 11, .55);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  padding: 12px 14px;
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--deep); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(123, 92, 255, .25); }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.captcha { min-height: 65px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--muted); min-height: 1.4em; }

/* Finale */
.finale { min-height: 115vh; align-items: flex-end; padding-bottom: 12vh; }
.finale-note { margin: 0; text-align: center; color: var(--muted); font-size: 1rem; }

/* Footer */
.site-footer { position: relative; z-index: 1; padding: 56px 0 40px; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(4, 5, 11, .8); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr auto; gap: 24px; align-items: start; }
.site-footer p { margin: 0; color: var(--muted); font-size: .95rem; }
.site-footer a:hover { color: var(--amber); }

/* ---------- AI section: Apple Intelligence style screen-edge glow ----------
   A solid band of colour hugging the screen edge, feathered on the inside with
   rounded inner corners, and big colour zones slowly flowing around the edge.
   The blur sits on the wrapper so it softens the already-cut ring. */
@property --siri-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.siri {
  --band: clamp(9px, .95vw, 15px);
  --inner-r: clamp(34px, 3.4vw, 52px);           /* rounded inner corners, like the phone screen */
  --over: 30px;                                   /* drawn past the screen so the outer edge stays solid */
  position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .6s ease;
  animation: siri-flow 7s linear infinite;
}
.siri.is-on { opacity: 1; }
.siri i { position: absolute; inset: 0; display: block; }
.siri i::before {
  content: ""; position: absolute; inset: calc(var(--over) * -1);
  padding: calc(var(--over) + var(--w));
  border-radius: calc(var(--over) + var(--w) + var(--inner-r));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the solid band with a short feather */
.siri-band { --w: var(--band); filter: blur(5px) saturate(1.2); }
.siri-band::before {
  background: conic-gradient(from var(--siri-a) at 50% 50%,
    #FF8D3A 0deg, #FF4F5E 50deg, #F55AB0 100deg, #A95CFF 155deg,
    #4F6BFF 210deg, #6E8BFF 245deg, #B77BFF 285deg, #FF5E6A 325deg, #FF8D3A 360deg);
}
/* light spilling a little further inward, slightly out of phase so colours shift */
.siri-glow { --w: calc(var(--band) * 1.6); filter: blur(16px); opacity: .7; mix-blend-mode: screen; animation: siri-breathe 2.4s ease-in-out infinite; }
.siri-glow::before {
  background: conic-gradient(from calc(var(--siri-a) * -1 + 60deg) at 50% 50%,
    #FFBA71, #FF6778 20%, #F564B6 38%, #C686FF 55%, #6E8BFF 72%, #AA6EEE 86%, #FFBA71);
}
@keyframes siri-flow { to { --siri-a: 360deg; } }
@keyframes siri-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }

/* ---------- Work gallery (lightbox) ---------- */
.work-open { margin-top: 18px; }
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(4, 5, 11, .94); color: var(--text);
  display: none; grid-template-rows: auto 1fr auto;
  /* fast repeated clicks on the arrows must not select the photo or counter */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lightbox[open] { display: grid; animation: lb-in .35s ease; }
.lightbox::backdrop { background: rgba(4, 5, 11, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@keyframes lb-in { from { opacity: 0; } }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); }
.lb-count { margin: 0; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 clamp(56px, 7vw, 110px); touch-action: pan-y; }
.lb-img {
  -webkit-user-drag: none; user-drag: none;
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px;
  box-shadow: 0 30px 90px -30px rgba(123, 92, 255, .55);
  transition: opacity .25s ease;
}
.lb-img.is-loading { opacity: .25; }
.lb-btn {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 15, 34, .6);
  color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .25s, border-color .25s, transform .25s;
}
.lb-btn:hover { background: rgba(123, 92, 255, .25); border-color: rgba(255, 138, 43, .7); transform: scale(1.06); }
.lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-prev { left: clamp(8px, 2vw, 32px); }
.lb-next { right: clamp(8px, 2vw, 32px); }
.lb-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 16px var(--gutter) 22px;
  scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.lb-thumb {
  flex: 0 0 auto; height: 76px; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--deep); cursor: pointer; opacity: .5; position: relative;
  transition: opacity .25s, transform .25s;
}
.lb-thumb img { display: block; height: 100%; width: auto; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb[aria-current="true"] { opacity: 1; transform: translateY(-3px); }
.lb-thumb[aria-current="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; padding: 2px;
  background: var(--spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.is-over-work, .is-over-work body { cursor: pointer; }
@media (max-width: 820px) {
  .lb-stage { padding: 0 10px; }
  .lb-prev, .lb-next { top: auto; bottom: 10px; transform: none; width: 46px; height: 46px; }
  .lb-prev:hover, .lb-next:hover { transform: none; }
  .lb-prev { left: calc(50% - 56px); } .lb-next { right: calc(50% - 56px); }
  .lb-img { max-height: calc(100% - 70px); margin-bottom: 60px; }
  .lb-thumb { height: 58px; }
}

/* ---------- Cursor ---------- */
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--text); box-shadow: 0 0 12px 2px rgba(255, 138, 43, .8); }
.cursor-ring { width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 1.5px solid rgba(143, 176, 255, .8); transition: opacity .3s, width .3s, height .3s, margin .3s, background .3s, border-color .3s; }
.cursor.is-on, .cursor-ring.is-on { opacity: 1; }
.cursor-ring.is-link { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(255, 77, 141, .1); border-color: rgba(255, 138, 43, .9); }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor select { cursor: none; }
}
@media (hover: none), (pointer: coarse) { .cursor, .cursor-ring { display: none; } }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1020px) {
  .stages, .steps { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .nav { display: none; }
  .header-end { margin-left: auto; gap: 12px; }
  .brand-word { font-size: 1.2rem; letter-spacing: .06em; }
  .brand-mark { width: 34px; height: 25px; }
  .chapter { min-height: 150vh; align-items: flex-start; }
  .hero { padding-top: calc(var(--header-h) + 5vh); }
  .hero .display { font-size: clamp(3.1rem, 14.5vw, 5.6rem); }
  .scroll-cue { display: none; }
  .text-right .copy { margin-left: 0; }
  .lede { font-size: 1.05rem; }
  .outline { -webkit-text-stroke-width: 1.2px; }
  .detail ul, .ai-cards, .stages, .steps { grid-template-columns: 1fr; }
  .services .display, .services .lede { text-align: left; }
  .form { grid-template-columns: 1fr; padding: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .siri, .siri-glow { animation: none; }
  .glow { animation: none; background-position: 50% 0; }
  .scroll-line { animation: none; transform: scaleX(1); }
}