/* ============================================================
   SQUARease — Awwwards-grade styling
   Palette derived from deep-blue caustic water inspiration
   ============================================================ */
:root{
  /* SQUARease brand palette (charte graphique) */
  --abyss:   #1b2140;   /* page base / deep panels */
  --deep:    #232a4d;   /* brand navy */
  --navy:    #2a3358;   /* navy step */
  --blue:    #395673;   /* brand steel blue */
  --steel:   #395673;
  --azure:   #c4124c;   /* accent = brand crimson (eyebrows, marks) */
  --crimson: #c4124c;
  --crimson-b:#e12a60;  /* brighter crimson (hover) */
  --glow:    #eef2f9;   /* bright highlight text / stroke */
  --foam:    #ffffff;
  --ink:     #eaeef7;   /* light text on dark */
  --ink-dark:#232a4d;   /* dark text on light */
  --muted:   #9fabc4;   /* muted on dark */
  --cream:   #f3f1ea;   /* light section background */
  --line:    rgba(255,255,255,.13);
  --ease: cubic-bezier(.19,1,.22,1);
  --f-display: 'Montserrat', sans-serif;   /* typo institutionnelle (charte) */
  --f-body: 'Montserrat', sans-serif;
  --f-cond: 'Roboto Condensed', sans-serif;/* typo secondaire (charte) */
}

/* charte: Roboto Condensed pour les libellés / éléments secondaires */
.eyebrow, .phero__eyebrow, .card__tag, .nav__links, .stat__lbl, .menu__idx,
.sitefoot__k, .post__meta, .svc__no, .live-hint, .marquee__track, .cursor__label,
.works__label, .manifesto__label, .contact__label, .hero__meta, .hero__scroll,
.card__live, .card__idx{ font-family:var(--f-cond); }

*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  background:var(--abyss);
  color:var(--ink);
  font-family:var(--f-body);
  overflow-x:hidden;
  cursor:none;
}
body.lock{ overflow:hidden; height:100vh; }
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
::selection{ background:var(--azure); color:var(--abyss); }

/* ---------- WATER CANVAS BG ---------- */
.water-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-2; display:block;
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:var(--foam); transform:translate(-50%,-50%);
}
.cursor__ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--foam); transform:translate(-50%,-50%);
  display:grid; place-items:center;
  transition:width .4s var(--ease), height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.cursor__label{
  font-family:var(--f-display); font-size:11px; font-weight:600; letter-spacing:.05em;
  color:var(--abyss); opacity:0; transform:scale(.6); transition:opacity .3s, transform .3s;
  text-transform:uppercase;
}
.cursor.is-hover .cursor__ring{ width:88px; height:88px; background:var(--foam); border-color:transparent; }
.cursor.is-hover .cursor__label{ opacity:1; transform:scale(1); }
.cursor.is-hover .cursor__dot{ opacity:0; }
.cursor.is-down .cursor__ring{ width:26px; height:26px; }

/* ---------- PRELOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:9000; background:var(--abyss);
  display:flex; align-items:flex-end; justify-content:center; padding:6vw;
}
.loader__inner{ width:100%; max-width:1400px; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.loader__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:800; letter-spacing:.14em; font-size:clamp(14px,1.4vw,18px); overflow:hidden; }
.loader__mark{ color:var(--azure); animation:spin 4s linear infinite; }
.loader__name{ display:inline-block; }
.loader__bar{ position:absolute; left:6vw; right:6vw; bottom:14vh; height:1px; background:var(--line); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--glow)); }
.loader__count{ font-family:var(--f-display); font-weight:700; font-size:clamp(48px,9vw,120px); line-height:.8; display:flex; align-items:flex-start; }
.loader__count em{ font-size:.3em; font-style:normal; margin-top:.4em; color:var(--muted); }
.loader__words{
  position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
  text-align:center; font-family:var(--f-display); font-weight:800;
  font-size:clamp(40px,10vw,140px); text-transform:uppercase; letter-spacing:-.02em;
  height:1.1em; overflow:hidden;
}
.loader__words span{ display:block; height:1.1em; line-height:1.1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3rem);
  transition:background .4s var(--ease), backdrop-filter .4s, padding .4s var(--ease);
}
.nav.scrolled{ background:#181d37; border-bottom:1px solid var(--line); padding-top:.85rem; padding-bottom:.85rem; }
.nav__logo{ display:flex; align-items:center; }
.nav__logo-img{ height:42px; width:auto; display:block; }
.nav.scrolled .nav__logo-img{ height:36px; }
.nav__logo-mark{ color:var(--azure); display:inline-block; }
.nav__links{ display:flex; gap:2.2rem; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.nav__links a{ position:relative; padding:.2rem 0; }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition:width .4s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__clock{ font-size:.8rem; font-variant-numeric:tabular-nums; letter-spacing:.06em; color:var(--muted); }

/* ---------- HERO ---------- */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 5vw;
  background:var(--deep); overflow:hidden;
}
/* hero video background + dark veil */
.hero__video{ position:absolute; inset:0; z-index:0; overflow:hidden; will-change:transform; }
.hero__video video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 76% 12%, rgba(196,18,76,.28), transparent 55%),
    linear-gradient(180deg, rgba(27,33,64,.80), rgba(27,33,64,.60) 42%, rgba(20,25,48,.88)); }
.hero__logo, .hero__sub, .hero__scroll{ position:relative; z-index:2; }
.hero__meta{ z-index:2; }
.hero__meta{ position:absolute; top:15vh; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); overflow:hidden; }
.hero__meta--l{ left:clamp(1.2rem,5vw,4rem); }
.hero__meta--r{ right:clamp(1.2rem,5vw,4rem); }
.hero__title{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(3rem,14vw,12rem); line-height:.84; letter-spacing:-.03em;
  max-width:100%;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .word{ display:inline-block; will-change:transform; }
.word--outline{
  color:transparent; -webkit-text-stroke:1.4px var(--glow);
  text-transform:lowercase; letter-spacing:-.01em;
}
.hero__sub{ margin-top:2.2rem; max-width:42ch; font-size:clamp(.95rem,1.5vw,1.15rem); color:var(--ink); font-weight:300; overflow:hidden; }
.hero__scroll{ position:absolute; bottom:5vh; display:flex; flex-direction:column; align-items:center; gap:.7rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.hero__scroll-line{ width:1px; height:60px; background:var(--line); overflow:hidden; position:relative; }
.hero__scroll-line i{ position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--glow); animation:scrolldrop 2s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

.hero__logo{ width:min(78vw,760px); margin:0 auto; will-change:transform; }
.hero__logo img{ width:100%; height:auto; object-fit:contain; }

.reveal-up{ display:inline-block; will-change:transform; }

/* ---------- MARQUEE ---------- */
.marquee{ padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; background:rgba(35,42,77,.4); }
.marquee__track{ display:inline-flex; align-items:center; gap:2.2rem; font-family:var(--f-display); font-weight:600; font-size:clamp(1.05rem,2.3vw,1.7rem); text-transform:uppercase; letter-spacing:-.01em; will-change:transform; }
.marquee__track .dot{ color:var(--azure); font-size:.6em; }

/* ---------- BLACK CUT SECTIONS (break from the water) ---------- */
.cut-black{ position:relative; background:var(--abyss); }
.cut-black::before,
.cut-black::after{ content:''; position:absolute; left:0; right:0; height:22vh; pointer-events:none; z-index:0; }
.cut-black::before{ top:0; transform:translateY(-100%); background:linear-gradient(to bottom, transparent, var(--abyss)); }
.cut-black::after{ bottom:0; transform:translateY(100%); background:linear-gradient(to top, transparent, var(--abyss)); }
.cut-black > *{ position:relative; z-index:1; }

/* ---------- MANIFESTO ---------- */
.manifesto{ padding:clamp(8rem,18vh,16rem) clamp(1.2rem,6vw,7rem); }
.manifesto__label, .manifesto__text{ max-width:1200px; margin-left:0; margin-right:0; }
.manifesto__label{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--azure); margin-bottom:2.5rem; }
.manifesto__text{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.35rem,3.2vw,2.8rem); line-height:1.2; letter-spacing:-.01em; }
.manifesto__text .l-line{ display:block; overflow:hidden; }
.manifesto__text .l-inner{ display:block; will-change:transform; }
.manifesto__text .l-inner.dim{ color:var(--muted); }

/* ---------- WORKS (horizontal) ---------- */
.works{ position:relative; }
.works__head{ padding:0 clamp(1.2rem,6vw,7rem) 2rem; }
.works__label{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--azure); }
.works__pin{ height:100vh; overflow:hidden; display:flex; align-items:center; }
.works__track{ display:flex; align-items:center; gap:clamp(2rem,5vw,6rem); padding:0 8vw; will-change:transform; }

.works__intro{ flex:0 0 auto; width:36vw; min-width:280px; padding-right:2vw; }
.works__intro h2{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(3rem,7vw,7rem); line-height:.86; letter-spacing:-.03em; }
.works__intro p{ margin-top:1.5rem; color:var(--muted); max-width:32ch; }

.card{ position:relative; flex:0 0 auto; width:30vw; min-width:300px; height:62vh; border-radius:14px; overflow:hidden; will-change:transform; }
.card--tall{ height:76vh; }
.card--wide{ width:44vw; height:56vh; }
/* live website preview (real site in iframe, scrolls on hover) */
.card--live{ cursor:none; }
.card__frame{ position:absolute; inset:0; overflow:hidden; background:#232a4d; z-index:0; }
.card__frame iframe{ position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; will-change:transform; background:#232a4d; }
.card__live{ position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:.4rem;
  font-family:var(--f-display); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--foam);
  background:rgba(4,7,15,.42); padding:.34rem .66rem; border-radius:100px; border:1px solid var(--line); }
.card__live i{ width:6px; height:6px; border-radius:50%; background:#57e08a; box-shadow:0 0 0 0 rgba(87,224,138,.7); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(87,224,138,.6);} 70%{ box-shadow:0 0 0 7px rgba(87,224,138,0);} 100%{ box-shadow:0 0 0 0 rgba(87,224,138,0);} }

/* WORKS carousel: uniform computer-screen format (16:10) so each project reads like a real website */
.works__track .card,
.works__track .card--tall,
.works__track .card--wide{ width:calc(64vh * 1.6); height:64vh; min-width:0; aspect-ratio:auto; box-shadow:0 34px 70px rgba(0,0,0,.4); }
.card__media{ position:absolute; inset:0; overflow:hidden; }
.card__media img{ transform:scale(1.15); transition:transform 1.2s var(--ease); will-change:transform; }
.card:hover .card__media img{ transform:scale(1.02); }
.card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(4,7,15,.65)); }
.card__meta{ position:absolute; left:0; bottom:0; z-index:2; padding:1.6rem; display:flex; flex-direction:column; gap:.3rem; width:100%; }
.card__idx{ font-family:var(--f-display); font-size:.8rem; color:var(--glow); letter-spacing:.1em; }
.card__meta h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem,2.4vw,2.4rem); line-height:1; text-transform:uppercase; }
.card__tag{ font-size:.78rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }

.works__outro{ flex:0 0 auto; width:34vw; min-width:280px; display:grid; place-items:center; }
.works__cta{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,2.4rem); line-height:.95; text-align:center; }
.works__cta-arrow{ width:76px; height:76px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:1.4rem; transition:background .4s var(--ease), color .4s var(--ease); }
.works__cta:hover .works__cta-arrow{ background:var(--glow); color:var(--abyss); }

/* ---------- FEATURE ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,7rem); align-items:center; padding:clamp(6rem,14vh,14rem) clamp(1.2rem,6vw,7rem); max-width:1600px; margin:0 auto; }
.feature__media{ position:relative; height:78vh; border-radius:16px; overflow:hidden; }
.feature__media img{ transform:scale(1.2); will-change:transform; }
.feature__label{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--azure); margin-bottom:1.6rem; }
.feature__title{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.8rem,3.6vw,3.4rem); line-height:1.05; letter-spacing:-.02em; margin-bottom:1.6rem; }
.feature__title .l-line{ display:block; overflow:hidden; }
.feature__title .l-inner{ display:block; will-change:transform; }
.feature__body{ color:var(--muted); max-width:46ch; font-weight:300; line-height:1.7; }
.feature__stats{ display:flex; gap:clamp(1.5rem,4vw,4rem); margin-top:3rem; }
.stat{ display:flex; flex-direction:column; gap:.4rem; }
.stat__num{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem,5vw,4rem); line-height:1; color:var(--glow); }
.stat__lbl{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

/* ---------- CONTACT ---------- */
.contact{ position:relative; padding:clamp(8rem,18vh,16rem) clamp(1.2rem,6vw,7rem) 3rem; text-align:center;
  background:var(--deep); }
.contact__label{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--azure); margin-bottom:2.5rem; }
.contact__title{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,9.5vw,9rem); line-height:.88; letter-spacing:-.03em; max-width:100%; }
.contact__title .line{ display:block; overflow:hidden; }
.contact__title .word{ display:inline-block; will-change:transform; }
.contact__mail{ display:inline-block; margin-top:3rem; font-family:var(--f-display); font-weight:600; font-size:clamp(1.1rem,2.4vw,2rem); position:relative; }
.contact__mail::after{ content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.contact__mail:hover::after{ transform:scaleX(1); }
.contact__bottom{ margin-top:clamp(6rem,12vh,10rem); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-top:1px solid var(--line); padding-top:2rem; }
.contact__social{ display:flex; gap:1.6rem; }
.contact__social a:hover{ color:var(--ink); }

/* ===================================================================
   SHARED COMPONENTS (multi-page)
   =================================================================== */
.nav__links a.is-active{ color:var(--glow); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; color:inherit; cursor:none; padding:6px; }
.nav__burger span{ display:block; width:26px; height:2px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
body.menu-open .nav__burger span:first-child{ transform:translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:last-child{ transform:translateY(-0px) rotate(-45deg); }

/* fullscreen menu */
.menu{ position:fixed; inset:0; z-index:90; background:rgba(3,6,14,.86); backdrop-filter:blur(18px); clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); pointer-events:none; }
body.menu-open .menu{ clip-path:inset(0 0 0% 0); pointer-events:auto; }
.menu__inner{ height:100%; display:grid; grid-template-columns:1.6fr 1fr; align-items:center; gap:3rem; padding:12vh clamp(1.5rem,7vw,8rem) 6vh; }
.menu__links{ display:flex; flex-direction:column; gap:.2rem; }
.menu__links a{ position:relative; font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(2rem,6.5vw,5rem); line-height:1.02; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:baseline; gap:1rem; transition:color .3s, padding-left .4s var(--ease); }
.menu__links a:hover{ color:var(--glow); padding-left:1.2rem; }
.menu__idx{ font-family:var(--f-body); font-size:.8rem; color:var(--muted); letter-spacing:.1em; }
.menu__aside{ border-left:1px solid var(--line); padding-left:2.4rem; align-self:center; }
.menu__k{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--azure); margin:1.6rem 0 .5rem; }
.menu__aside a{ display:block; color:var(--ink); font-size:1.05rem; }
.menu__aside a:hover{ color:var(--glow); }
.menu__soc{ display:flex; gap:1.2rem; }
.menu__soc a{ font-size:.85rem; }

/* logos */
.loader__logo{ height:48px; width:auto; }
.loader__mini{ margin:auto; opacity:0; }
.loader__mini .loader__logo{ height:40px; }
.foot-logo{ height:40px; width:auto; }

/* site footer */
.sitefoot{ position:relative; z-index:2; background:var(--abyss); border-top:1px solid var(--line); padding:clamp(4rem,9vh,7rem) clamp(1.2rem,6vw,7rem) 2.5rem; }
.sitefoot__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
.sitefoot__brand{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); }
.sitefoot__tag{ color:var(--muted); max-width:40ch; }
.sitefoot__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding:3rem 0; }
.sitefoot__k{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--azure); margin-bottom:1.1rem; }
.sitefoot__col a{ display:block; color:var(--muted); padding:.32rem 0; transition:color .3s, transform .3s var(--ease); }
.sitefoot__col a:hover{ color:var(--ink); transform:translateX(4px); }
.sitefoot__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-top:2rem; border-top:1px solid var(--line); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.sitefoot__bottom a:hover{ color:var(--glow); }

/* layout utilities */
.container{ max-width:1500px; margin:0 auto; }
.section{ position:relative; padding:clamp(6rem,13vh,12rem) clamp(1.2rem,6vw,7rem); }

/* ===== SECTION COLOUR SYSTEM (brand palette panels) ===== */
.panel-navy{ background:var(--deep); }
.panel-steel{ background:var(--steel); }
.panel-crimson{ background:var(--crimson); color:#fff;
  --ink:#ffffff; --muted:rgba(255,255,255,.82); --foam:#fff; --glow:#fff; --azure:#ffffff; --line:rgba(255,255,255,.28); }
.panel-crimson .btn{ background:#fff; color:var(--crimson); }
.panel-crimson .btn:hover{ background:var(--cream); }
.panel-crimson .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.panel-light{ background:var(--cream); color:var(--ink-dark);
  --ink:#232a4d; --muted:#526078; --foam:#232a4d; --glow:#232a4d; --line:rgba(35,42,77,.14); }
.panel-light .azure, .panel-light .eyebrow{ color:var(--crimson); }
.panel-light .stat__num{ color:var(--crimson); }

/* subpages: auto-alternate content sections so nothing feels black */
body:not([data-page="home"]) main .section:nth-of-type(even){ background:var(--steel); }
body:not([data-page="home"]) main .section:nth-of-type(odd){ background:var(--cream); color:var(--ink-dark);
  --ink:#232a4d; --muted:#526078; --foam:#232a4d; --glow:#232a4d; --line:rgba(35,42,77,.14); }
/* CTA bands (contain a .row-between) become crimson everywhere */
.section:has(.row-between){ background:var(--crimson)!important; color:#fff;
  --ink:#fff; --muted:rgba(255,255,255,.82); --foam:#fff; --glow:#fff; --azure:#fff; --line:rgba(255,255,255,.28); }
.section:has(.row-between) .btn{ background:#fff; color:var(--crimson); }
.section:has(.row-between) .btn:hover{ background:var(--cream); }
.section:has(.row-between) .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.section:has(.row-between) .eyebrow{ color:#fff; }
/* keep legacy cut-black usable as a plain navy panel */
.section.cut-black{ background:var(--deep); }
.cut-black::before, .cut-black::after{ display:none; }
.eyebrow{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--azure); margin-bottom:1.6rem; }
.lead{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.5rem,3.4vw,2.8rem); line-height:1.14; letter-spacing:-.02em; max-width:22ch; }
.lead .l-line{ display:block; overflow:hidden; } .lead .l-inner{ display:block; will-change:transform; }
.h2{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(2.4rem,6vw,5.5rem); line-height:.92; letter-spacing:-.03em; }
.h2 .l-line{ display:block; overflow:hidden; } .h2 .l-inner{ display:block; will-change:transform; }
.p-body{ color:var(--muted); font-weight:300; line-height:1.8; max-width:60ch; }
.p-body + .p-body{ margin-top:1.2rem; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-display); font-weight:600; font-size:.9rem; letter-spacing:.02em; padding:1rem 1.7rem; border-radius:100px; background:var(--crimson); color:#fff; transition:transform .4s var(--ease), background .3s; }
.btn:hover{ transform:translateY(-3px); background:var(--crimson-b); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); }

/* page hero */
.phero{ position:relative; min-height:82vh; display:flex; flex-direction:column; justify-content:flex-end; padding:16vh clamp(1.2rem,6vw,7rem) clamp(3rem,8vh,6rem); overflow:hidden;
  background:var(--deep); }
.phero__eyebrow{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--azure); margin-bottom:1.4rem; }
.phero__title{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(3rem,11vw,10rem); line-height:.86; letter-spacing:-.03em; max-width:100%; }
.phero__title .line{ display:block; overflow:hidden; } .phero__title .word{ display:inline-block; will-change:transform; }
.phero__sub{ margin-top:1.8rem; max-width:52ch; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--ink); font-weight:300; }
.phero__media{ display:none; }
.phero__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,7,15,.4),rgba(4,7,15,.85)); }
.phero__media img{ width:100%; height:100%; object-fit:cover; }

/* figures & galleries */
.fig{ position:relative; overflow:hidden; border-radius:14px; background:#232a4d; }
.fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.fig--r0{ border-radius:0; }
.gallery{ display:grid; gap:clamp(.8rem,1.5vw,1.4rem); }
.gallery--3{ grid-template-columns:repeat(3,1fr); }
.gallery--4{ grid-template-columns:repeat(4,1fr); }
.gallery--mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:22vh; }
.gallery--mosaic .fig:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gallery--mosaic .fig:nth-child(4){ grid-row:span 2; }
.gallery--mosaic .fig:nth-child(6){ grid-column:span 2; }
.tall{ aspect-ratio:3/4; } .wide{ aspect-ratio:16/9; } .sqr{ aspect-ratio:1/1; }

/* split section */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ height:min(78vh,720px); border-radius:16px; overflow:hidden; }
.split__media img{ width:100%; height:100%; object-fit:cover; }

/* stats row */
.section:has(.stats){ padding-top:clamp(2.6rem,6vh,4.5rem); padding-bottom:clamp(2.6rem,6vh,4.5rem); }
.stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(2rem,6vw,6rem); text-align:center; }
.stat{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.stat__num{ font-family:var(--f-display); font-weight:500; font-size:clamp(3.2rem,6.5vw,5.8rem); line-height:1; color:var(--glow); }
.stat__lbl{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

/* services list */
.svc{ border-top:1px solid var(--line); }
.svc__row{ display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:2.2rem 0; border-bottom:1px solid var(--line); transition:padding-left .5s var(--ease); }
.svc__row:hover{ padding-left:1.4rem; }
.svc__no{ font-family:var(--f-body); font-size:.8rem; color:var(--azure); letter-spacing:.1em; }
.svc__name{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,3.4vw,2.6rem); letter-spacing:-.01em; }
.svc__desc{ color:var(--muted); max-width:40ch; font-size:.95rem; }

/* team */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.4rem); }
.member__ph{ aspect-ratio:3/4; border-radius:14px; overflow:hidden; margin-bottom:1rem; }
.member__ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); filter:grayscale(.2); }
.member:hover .member__ph img{ transform:scale(1.05); filter:grayscale(0); }
.member h3{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; }
.member span{ color:var(--muted); font-size:.9rem; }

/* pricing */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem); }
.plan{ border:1px solid var(--line); border-radius:16px; padding:2.4rem; background:rgba(9,18,39,.35); backdrop-filter:blur(4px); display:flex; flex-direction:column; transition:transform .5s var(--ease), border-color .3s; }
.plan:hover{ transform:translateY(-6px); border-color:rgba(169,214,255,.4); }
.plan--feat{ background:linear-gradient(180deg,rgba(21,62,120,.5),rgba(9,18,39,.5)); border-color:rgba(169,214,255,.35); }
.plan__name{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.plan__price{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem,4vw,3.4rem); margin:1rem 0; color:var(--foam); }
.plan__price small{ font-size:.9rem; color:var(--muted); font-weight:400; }
.plan ul{ list-style:none; margin:1.4rem 0 2rem; display:flex; flex-direction:column; gap:.8rem; }
.plan li{ color:var(--muted); font-size:.95rem; padding-left:1.4rem; position:relative; }
.plan li::before{ content:'◆'; position:absolute; left:0; color:var(--azure); font-size:.7rem; top:.2rem; }
.plan .btn{ margin-top:auto; justify-content:center; }

/* faq */
.faq{ max-width:1000px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.8rem 0; cursor:none; font-family:var(--f-display); font-weight:600; font-size:clamp(1.1rem,2.2vw,1.6rem); }
.faq__q i{ flex:0 0 auto; width:26px; height:26px; position:relative; }
.faq__q i::before,.faq__q i::after{ content:''; position:absolute; background:var(--glow); transition:transform .4s var(--ease); }
.faq__q i::before{ top:12px; left:2px; right:2px; height:2px; }
.faq__q i::after{ left:12px; top:2px; bottom:2px; width:2px; }
.faq__item.open .faq__q i::after{ transform:scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq__item.open .faq__a{ max-height:320px; }
.faq__a p{ color:var(--muted); line-height:1.8; padding-bottom:1.8rem; max-width:70ch; }

/* journal / posts */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); }
.post__ph{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; margin-bottom:1.2rem; }
.post__ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.post:hover .post__ph img{ transform:scale(1.06); }
.post__meta{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--azure); margin-bottom:.6rem; }
.post h3{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; line-height:1.15; }
.post p{ color:var(--muted); margin-top:.6rem; font-size:.95rem; }

/* article */
.article{ max-width:820px; margin:0 auto; }
.article__body{ font-size:1.12rem; line-height:1.9; color:var(--ink); font-weight:300; }
.article__body h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); margin:2.8rem 0 1rem; }
.article__body p{ margin-bottom:1.4rem; color:#cbd8ea; }
.article__body blockquote{ border-left:2px solid var(--azure); padding-left:1.6rem; margin:2rem 0; font-family:var(--f-display); font-size:1.5rem; line-height:1.35; color:var(--foam); }
.article__body figure{ margin:2.4rem 0; border-radius:12px; overflow:hidden; }

/* contact form */
.cform{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:820px; }
.cform .full{ grid-column:1/-1; }
.cform label{ display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.cform input,.cform textarea,.cform select{ width:100%; background:rgba(9,18,39,.4); border:1px solid var(--line); border-radius:10px; padding:.95rem 1rem; color:var(--ink); font-family:var(--f-body); font-size:1rem; transition:border-color .3s; }
.cform input:focus,.cform textarea:focus,.cform select:focus{ outline:none; border-color:var(--azure); }
.cform textarea{ min-height:150px; resize:vertical; }

/* quote / testimonial */
.quote{ max-width:26ch; }
.quote__text{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.6rem,4vw,3rem); line-height:1.18; letter-spacing:-.01em; }
.quote__by{ margin-top:1.6rem; color:var(--muted); font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; }

/* small util */
.mt-s{ margin-top:1.4rem; } .mt-m{ margin-top:2.6rem; } .mt-l{ margin-top:4rem; }
.row-between{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }

/* large live embed (case studies) */
.live-embed{ position:relative; width:100%; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#232a4d; cursor:none; }
.live-embed__frame{ position:absolute; inset:0; overflow:hidden; }
.live-embed__frame iframe{ position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; will-change:transform; background:#232a4d; }
.live-embed .card__live{ top:16px; left:16px; }
.live-hint{ position:absolute; bottom:16px; right:16px; z-index:3; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--foam); background:rgba(4,7,15,.45); border:1px solid var(--line); padding:.4rem .8rem; border-radius:100px; }

/* projects grid (reuses .card / .card--live) */
.projgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.5vw,2rem); }
.projgrid .card{ position:relative; width:auto; min-width:0; height:auto; aspect-ratio:4/5; }
.projgrid .card--big{ grid-column:span 2; aspect-ratio:16/9; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .projgrid{ grid-template-columns:1fr; }
  .projgrid .card--big{ grid-column:auto; aspect-ratio:4/5; }
  body{ cursor:auto; }
  .cursor{ display:none; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .feature{ grid-template-columns:1fr; }
  .feature__media{ height:56vh; }
  .card, .card--wide{ width:74vw; }
  .card--tall{ height:66vh; }
  .works__track .card, .works__track .card--tall, .works__track .card--wide{ width:calc(46vh * 1.6); height:46vh; }
  .works__intro{ width:70vw; }
  .works__outro{ width:70vw; }
  .hero__meta{ top:16vh; }
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .split__media{ height:52vh; }
  .gallery--3,.gallery--4,.team,.pricing,.posts{ grid-template-columns:1fr 1fr; }
  .gallery--mosaic{ grid-template-columns:1fr 1fr; grid-auto-rows:18vh; }
  .menu__inner{ grid-template-columns:1fr; align-content:center; gap:2rem; }
  .menu__aside{ border-left:0; border-top:1px solid var(--line); padding:2rem 0 0; }
  .sitefoot__cols{ grid-template-columns:1fr 1fr; }
  .cform{ grid-template-columns:1fr; }
  .svc__row{ grid-template-columns:auto 1fr; }
  .svc__desc{ display:none; }
}
@media (max-width:560px){
  .gallery--3,.gallery--4,.team,.pricing,.posts,.gallery--mosaic{ grid-template-columns:1fr; }
  .gallery--mosaic .fig{ grid-column:auto!important; grid-row:auto!important; aspect-ratio:16/10; }
  .sitefoot__cols{ grid-template-columns:1fr; }
}