/* =========================================================================
   Gourou Group — bespoke layer (everything Tailwind utilities can't express)
   ========================================================================= */

/* =========================================================================
   BRAND THEME LAYER — endorsed-brand architecture.
   A page (or any subtree) declares data-brand="group|consultancy|traders";
   every token below re-resolves, so one attribute retints the full system.
   Triplets feed Tailwind's rgb(var()/alpha) tokens; the composed vars keep
   this bespoke layer working untouched. *-od = variant for .on-dark fields.
   ========================================================================= */
:root, [data-brand="group"]{
  /* Gourou Group — red + steel grey on cream (GG mark) */
  --charcoal-rgb: 22 24 29;      /* neutral institutional dark        */
  --cream-rgb:    249 248 246;
  --ink-rgb:      26 29 34;      /* near-black headings               */
  --gold-rgb:     200 32 42;     /* group red                         */
  --sage-rgb:     110 115 120;   /* steel grey                        */
  --gold-od-rgb:  216 78 88;     /* red lifted for dark ground        */
  --sage-od-rgb:  154 160 166;
}
[data-brand="traders"]{
  /* Gourou Traders — navy #001951 + red #CF010E (GT mark) */
  --charcoal-rgb: 11 16 36;      /* deep navy field                   */
  --cream-rgb:    249 248 246;
  --ink-rgb:      10 30 82;
  --gold-rgb:     207 1 14;
  --sage-rgb:     42 68 145;
  --gold-od-rgb:  216 35 46;
  --sage-od-rgb:  143 166 232;
}
[data-brand="consultancy"]{
  /* Gourou Consultancy — white-on-red (CG mark) */
  --charcoal-rgb: 142 14 31;     /* the red field IS the dark surface */
  --cream-rgb:    250 247 245;
  --ink-rgb:      58 16 20;      /* deep maroon headings              */
  --gold-rgb:     200 16 46;
  --sage-rgb:     142 14 31;     /* deep red kickers on light         */
  --gold-od-rgb:  250 247 245;   /* accents go white on the red field */
  --sage-od-rgb:  242 199 204;   /* rose kickers on the red field     */
}

:root{
  /* Composed tokens — resolve against whichever brand scope wraps them. */
  --charcoal: rgb(var(--charcoal-rgb)); --cream: rgb(var(--cream-rgb));
  --ink: rgb(var(--ink-rgb));
  --gold: rgb(var(--gold-rgb)); --sage: rgb(var(--sage-rgb));
  --gold-od: rgb(var(--gold-od-rgb)); --sage-od: rgb(var(--sage-od-rgb));
  --hair: rgb(var(--charcoal-rgb) / .14);
  --hair-strong: rgb(var(--charcoal-rgb) / .42);
  --hair-on-dark: rgb(var(--cream-rgb) / .16);
}

html,body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
body{ font-family:'Google Sans',system-ui,sans-serif; }

/* ---- Lenis smooth scroll ------------------------------------------------ */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---- Type details ------------------------------------------------------- */
.font-serif{ font-family:'Google Sans',sans-serif; }
.display{ font-family:'Google Sans',sans-serif; font-weight:700; line-height:.98;
  letter-spacing:-.02em; text-wrap:balance; }
.display-i{ font-style:normal; font-weight:700; color:var(--gold); }
.kicker{ font-family:'Google Sans',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; font-size:.7rem; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"cv01" 1; }

.selection-gold ::selection{ background:var(--gold); color:var(--charcoal); }

/* ---- Hairline rule system ---------------------------------------------- */
.rule{ border-color:var(--hair); }
.rule-dark .rule, .on-dark .rule{ border-color:var(--hair-on-dark); }

/* ---- Film grain (warm editorial ruggedness, not a gradient) ------------- */
.grain{ position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; }

/* ---- Blueprint / technical grid backdrop ------------------------------- */
.blueprint{
  background-image:
    linear-gradient(to right, rgba(11,37,69,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,37,69,.05) 1px, transparent 1px);
  background-size:42px 42px;
}
.on-dark .blueprint{
  background-image:
    linear-gradient(to right, rgba(249,248,246,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(249,248,246,.05) 1px, transparent 1px);
}

/* ---- Ghost numeral watermark ------------------------------------------- */
.ghost{ font-family:'Google Sans',serif; font-weight:900; line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(17,18,21,.13);
  letter-spacing:-.04em; }
.on-dark .ghost{ -webkit-text-stroke:1px rgba(249,248,246,.14); }

/* ---- Vertical label ----------------------------------------------------- */
.vertical{ writing-mode:vertical-rl; text-orientation:mixed; }

/* ---- Buttons ------------------------------------------------------------ */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.6rem; font-weight:500; font-size:.82rem; letter-spacing:.02em;
  text-transform:uppercase; overflow:hidden; isolation:isolate; transition:color .5s ease; }
.btn-fill{ background:var(--ink); color:var(--cream); }
.btn-fill::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:translateY(101%); transition:transform .55s cubic-bezier(.76,0,.24,1); }
.btn-fill:hover{ color:var(--charcoal); }
.btn-fill:hover::after{ transform:translateY(0); }
.btn-line{ border:1px solid var(--hair-strong); color:var(--charcoal); }
.btn-line::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--charcoal);
  transform:translateY(101%); transition:transform .55s cubic-bezier(.76,0,.24,1); }
.btn-line:hover{ color:var(--cream); }
.btn-line:hover::after{ transform:translateY(0); }
.btn .arrow{ transition:transform .45s cubic-bezier(.76,0,.24,1); }
.btn:hover .arrow{ transform:translate(.35rem,-.35rem); }

/* ---- Typographic accordion (Consultancy) ------------------------------- */
.acc{ border-top:1px solid var(--hair); }
.acc:last-child{ border-bottom:1px solid var(--hair); }
.acc__head{ width:100%; text-align:left; cursor:pointer; background:none; border:0;
  display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:baseline;
  padding:2.1rem 0; transition:padding-left .5s cubic-bezier(.76,0,.24,1); }
.acc__title{ font-family:'Google Sans',serif; font-weight:700; letter-spacing:-.02em;
  line-height:1.02; transition:color .4s ease; }
.acc__head:hover{ padding-left:1.25rem; }
.acc__head:hover .acc__title{ color:var(--ink); }
.acc__no{ font-family:'Google Sans',sans-serif; font-weight:500; font-size:.74rem;
  letter-spacing:.2em; color:var(--sage); padding-top:.55rem; }
.acc__sign{ width:34px; height:34px; position:relative; flex:none; align-self:center; }
.acc__sign::before,.acc__sign::after{ content:""; position:absolute; background:var(--charcoal);
  transition:transform .45s cubic-bezier(.76,0,.24,1),opacity .3s; }
.acc__sign::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.acc__sign::after{ left:50%; top:0; height:100%; width:1px; transform:translateX(-50%); }
.acc.is-open .acc__sign::after{ transform:translateX(-50%) scaleY(0); }
.acc.is-open .acc__title{ color:var(--ink); }
.acc__panel{ overflow:hidden; height:0; }
.acc__inner{ padding:0 0 2.6rem 0; }

/* hover-driven background image reveal target */
.acc-canvas{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease;
  pointer-events:none; }
.acc-canvas.is-active{ opacity:1; }
.acc-canvas > *:not(.acc-canvas__img){ position:relative; z-index:2; }
.acc-canvas__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(1) contrast(1.05) brightness(.95); transform:scale(1.04); }
.acc-canvas.is-active .acc-canvas__img{ animation:slowzoom 6s ease forwards; }
.acc-canvas::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(249,248,246,.50) 0%, rgba(249,248,246,.86) 78%); }
@keyframes slowzoom{ to{ transform:scale(1); } }

/* sector card editorial texture */
.sector__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(1) contrast(1.1) brightness(.45); opacity:.16;
  transition:opacity .6s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
.group:hover .sector__img{ opacity:.34; transform:scale(1.06); }

/* ---- Sector banner image (fills the leftover space at the card's foot) -- */
.sector-banner{ position:relative; overflow:hidden; flex:1 1 auto; min-height:15rem;
  border-top:1px solid var(--hair-on-dark); }
.sector-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) contrast(1.03) brightness(.92);
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease; }
.group:hover .sector-banner img{ transform:scale(1.05); filter:grayscale(0) contrast(1.03) brightness(.98); }

/* ---- Accent legibility on dark brand fields ------------------------------
   Accents swap to their on-dark variants so e.g. Consultancy's red accents
   never sit red-on-red. Group/Traders map to near-identical values. */
.on-dark .text-sage{ color:var(--sage-od); }
.on-dark .text-gold{ color:var(--gold-od); }
.on-dark .btn-gold-outline{ border-color:var(--gold-od); color:var(--gold-od); }
.on-dark .btn-gold-outline::after{ background:var(--gold-od); }
.on-dark .btn-gold-outline:hover{ color:var(--charcoal); }

/* ---- Procurement editorial strip ---------------------------------------- */
.proc-strip__cell{ aspect-ratio:4/3; overflow:hidden; background:var(--charcoal); }
.proc-strip__cell img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.02) brightness(.85);
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease; }
.proc-strip__cell:hover img{ transform:scale(1.05); filter:grayscale(0) contrast(1.02) brightness(.95); }

/* ---- Trade ticker marquee ---------------------------------------------- */
.marquee{ display:flex; gap:0; white-space:nowrap; width:max-content;
  animation:marquee 38s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee .tick{ padding:0 1.6rem; display:inline-flex; align-items:center; gap:1.6rem; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block; }

/* ---- Procurement data rows --------------------------------------------- */
.prow{ display:grid; grid-template-columns:5.5rem minmax(0,1.1fr) minmax(0,1.6fr);
  gap:1.5rem; align-items:start; padding:1.7rem 0; border-top:1px solid var(--hair-on-dark);
  transition:background .4s ease,padding-left .45s cubic-bezier(.76,0,.24,1); }
.prow:last-child{ border-bottom:1px solid var(--hair-on-dark); }
.prow:hover{ background:rgb(var(--gold-rgb) / .05); padding-left:1.1rem; }
.prow--light{ border-top-color:var(--hair); }
.prow--light:last-child{ border-bottom-color:var(--hair); }
@media (max-width:720px){ .prow{ grid-template-columns:4rem 1fr; } .prow__d{ grid-column:1 / -1; } }

/* ---- Portrait cells ----------------------------------------------------- */
.portrait{ filter:grayscale(1) contrast(1.04); transition:filter .6s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.portrait-cell:hover .portrait{ filter:grayscale(0) contrast(1); transform:scale(1.02); }
.portrait-wrap{ background:#e9e7e2; overflow:hidden; }
.on-dark .portrait-wrap{ background:#131836; }

/* ---- Reveal primitives (visible by default; hidden only once JS arms) --- */
.reveal{ opacity:1; transform:none; }
.is-ready .reveal{ opacity:0; transform:translateY(26px); }
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{ display:block; }
/* Non-hero .line-mask spans are hidden purely by GSAP's own yPercent:110
   gsap.set() in app.js (initMotion) — a parallel CSS percentage-transform
   rule here previously fought GSAP's yPercent tracking and left the
   reveal-to-0 tween unable to visually override it, permanently hiding
   every non-hero headline. The hero's own spans are handled separately
   below via .is-revealed (CSS-only, no GSAP, so no such conflict there). */

/* ---- Hero text reveal via .is-revealed class (CSS transitions, no GSAP) --- */
[data-intro].is-revealed [data-stagger] .line-mask > span{
  transform:translateY(0);
  transition:transform 1.15s cubic-bezier(0.16,1,0.3,1) 0s;
}
[data-intro].is-revealed [data-stagger] .line-mask:nth-child(2) > span{ transition-delay:.09s; }
[data-intro].is-revealed [data-stagger] .line-mask:nth-child(3) > span{ transition-delay:.18s; }
[data-intro].is-revealed [data-stagger] .line-mask:nth-child(4) > span{ transition-delay:.27s; }
[data-intro].is-revealed [data-stagger] .line-mask:nth-child(5) > span{ transition-delay:.36s; }
[data-intro].is-revealed [data-stagger] .line-mask:nth-child(6) > span{ transition-delay:.45s; }

/* ---- Misc --------------------------------------------------------------- */
a{ text-decoration:none; color:inherit; }
.link-underline{ background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s ease; padding-bottom:2px; }
.link-underline:hover{ background-size:100% 1px; }
.hide-scroll::-webkit-scrollbar{ display:none; }

/* ---- Header (auto hide/show) ------------------------------------------- */
[data-header]{ transition:transform .5s cubic-bezier(.76,0,.24,1); will-change:transform; }

/* ---- Scroll progress --------------------------------------------------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:0 50%; z-index:65; pointer-events:none; }


/* ---- Transition curtain (preloader + vertical page reveal) ------------- */
.curtain{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  pointer-events:none; }
.curtain__panels{ position:absolute; inset:0; display:flex; }
.curtain__panel{ flex:1 1 0; height:100%; background:var(--charcoal); }
.curtain__panel:nth-child(even){ background:color-mix(in srgb, var(--charcoal) 86%, black); }
.curtain__center{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:1.1rem; color:var(--cream); mix-blend-mode:difference; text-align:center; }
.curtain__label{ font-family:'Google Sans',serif; font-weight:900; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(2.2rem,7vw,5.2rem); }
.curtain__count{ font:500 .72rem/1 'Google Sans',sans-serif; letter-spacing:.34em; color:var(--gold); }
.has-js .curtain__panel{ transform:translateY(0); }     /* covers before GSAP lifts it */
.curtain-failsafe .curtain{ display:none; }             /* never trap behind a stuck curtain */

/* GSAP owns the marquee once armed — silence the CSS fallback to avoid conflict */
.gg-marquee-js .marquee{ animation:none; }

/* ---- Focus & reduced motion ------------------------------------------- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .line-mask > span{ transform:none; }
  .curtain, .cursor{ display:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---- Hero editorial image strip ---------------------------------------- */
.hero-editorial-strip{
  position:relative; overflow:hidden; width:100%;
  height:280px; flex:none;
}
/* ---- Full-image hero (homepage) — image is the dominant element -------- */
.hero-editorial-strip--full{
  height:min(64vh,640px);
  border-radius:1.25rem;
}
@media (min-width:1024px){ .hero-editorial-strip--full{ border-radius:1.75rem; } }
.hero-editorial-strip img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 80%; /* favor the skyline — city sits low in frame */
  filter:grayscale(0.15) contrast(1.05) brightness(.88) saturate(0.9);
}
.hero-editorial-strip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(249,248,246,.38) 0%, transparent 38%);
  pointer-events:none;
}
.hero-editorial-strip__kicker{
  position:absolute; bottom:1.15rem; left:1.25rem; z-index:2;
  font-family:'Google Sans',sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.28em; font-size:.58rem; color:var(--charcoal); opacity:.85;
}

/* ---- Stats strip ------------------------------------------------------- */
.stats-strip{
  background:var(--charcoal); color:var(--cream);
  border-top:1px solid rgba(249,248,246,.08);
}
.stats-strip__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
@media (max-width:640px){
  .stats-strip__grid{ grid-template-columns:repeat(2,1fr); }
}
.stats-strip__cell{
  padding:3.2rem 2.4rem;
  border-right:1px solid rgba(249,248,246,.1);
  position:relative;
}
.stats-strip__cell:last-child{ border-right:none; }
@media (max-width:640px){
  .stats-strip__cell:nth-child(2){ border-right:none; }
  .stats-strip__cell:nth-child(3){ border-right:1px solid rgba(249,248,246,.1); }
}
.stat-num{
  font-family:'Google Sans',Georgia,serif; font-weight:900; line-height:.88;
  letter-spacing:-.04em; color:var(--gold);
  font-feature-settings:"tnum" 1;
  font-size:clamp(3rem,6vw,5.5rem);
}
.stat-label{
  font-family:'Google Sans',sans-serif; font-weight:500; font-size:.82rem;
  color:rgba(249,248,246,.9); margin-top:.9rem; display:block;
}
.stat-sub{
  font-family:'Google Sans',sans-serif; font-weight:400; font-size:.65rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(249,248,246,.38); margin-top:.35rem; display:block;
}

/* ---- Mid-page CTA banner ----------------------------------------------- */
.cta-banner{
  position:relative; overflow:hidden;
  background:var(--ink);
  color:var(--cream);
}
.cta-banner__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter:grayscale(1) contrast(1.1) brightness(.38);
  opacity:.22;
}
.cta-banner__inner{
  position:relative; z-index:1;
}
.engagement-step{
  display:flex; align-items:baseline; gap:1.4rem;
  padding:.95rem 0; border-top:1px solid rgba(249,248,246,.12);
}
.engagement-step:last-child{ border-bottom:1px solid rgba(249,248,246,.12); }
.engagement-step__no{
  font-family:'Google Sans',serif; font-weight:900; font-size:1.05rem;
  color:var(--gold); letter-spacing:-.02em; flex:none; width:2.2rem;
}
.engagement-step__label{
  font-size:.9rem; color:rgba(249,248,246,.75); line-height:1.4;
}

/* ---- Buttons (additional variants) ------------------------------------- */
.btn-gold{
  position:relative; display:inline-flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.6rem; font-weight:500; font-size:.82rem; letter-spacing:.02em;
  text-transform:uppercase; overflow:hidden; isolation:isolate;
  background:var(--gold); color:var(--charcoal); transition:color .5s ease;
}
.btn-gold::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--cream);
  transform:translateY(101%); transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.btn-gold:hover::after{ transform:translateY(0); }
.btn-gold .arrow{ transition:transform .45s cubic-bezier(.76,0,.24,1); }
.btn-gold:hover .arrow{ transform:translate(.35rem,-.35rem); }

.btn-cream-line{
  position:relative; display:inline-flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.6rem; font-weight:500; font-size:.82rem; letter-spacing:.02em;
  text-transform:uppercase; overflow:hidden; isolation:isolate;
  border:1px solid rgba(249,248,246,.38); color:var(--cream); transition:color .5s ease;
}
.btn-cream-line::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--cream);
  transform:translateY(101%); transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.btn-cream-line:hover{ color:var(--charcoal); }
.btn-cream-line:hover::after{ transform:translateY(0); }
.btn-cream-line .arrow{ transition:transform .45s cubic-bezier(.76,0,.24,1); }
.btn-cream-line:hover .arrow{ transform:translate(.35rem,0); }

.btn-gold-outline{
  position:relative; display:inline-flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.6rem; font-weight:500; font-size:.82rem; letter-spacing:.02em;
  text-transform:uppercase; overflow:hidden; isolation:isolate;
  border:1px solid var(--gold); color:var(--gold); transition:color .5s ease;
}
.btn-gold-outline::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:translateY(101%); transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.btn-gold-outline:hover{ color:var(--charcoal); }
.btn-gold-outline:hover::after{ transform:translateY(0); }

/* ---- Contact form ------------------------------------------------------ */
.form-field{ display:flex; flex-direction:column; gap:.55rem; }
.form-field label{
  font-family:'Google Sans',sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; font-size:.6rem; color:rgba(249,248,246,.55);
}
.form-field input,
.form-field select,
.form-field textarea{
  background:transparent;
  border:1px solid rgba(249,248,246,.18);
  color:var(--cream);
  padding:.85rem 1rem;
  font-family:'Google Sans',sans-serif; font-size:.9rem;
  outline:none;
  transition:border-color .3s ease;
  -webkit-appearance:none; appearance:none;
  border-radius:0;
}
.form-field input::placeholder,
.form-field select::placeholder,
.form-field textarea::placeholder{
  color:rgba(249,248,246,.3);
}
.form-field select option{ background:var(--charcoal); color:var(--cream); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--gold);
}
.form-field textarea{ resize:vertical; min-height:120px; }
#form-status{
  font-size:.82rem; padding:.8rem 0; letter-spacing:.04em;
  min-height:1.4rem;
}
#form-status.ok{ color:var(--gold-od); }
#form-status.err{ color:#e05b5b; }