/* ==========================================================================
   RESMA — Real Estate Studies and Management Academy
   Design system: obsidian / coral institutional-futurist identity
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- brand colour system ---- */
  --coral: #EF795F;
  --coral-dim: #C85F47;
  --coral-glow: rgba(239,121,95,0.35);
  --obsidian: #101112;
  --graphite: #202225;
  --graphite-2: #2A2C30;
  --titanium: #92969B;
  --ivory: #F6F4F0;
  --white: #FFFFFF;

  --ink: var(--obsidian);
  --paper: var(--ivory);

  /* ---- type ---- */
  --f-display: 'Sora', 'Manrope', sans-serif;
  --f-body: 'Manrope', sans-serif;

  --fs-hero: clamp(3.2rem, 8vw, 8.5rem);
  --fs-xxl: clamp(2.4rem, 5.4vw, 5.6rem);
  --fs-xl: clamp(1.9rem, 3.6vw, 3.4rem);
  --fs-lg: clamp(1.4rem, 2.2vw, 2rem);
  --fs-md: clamp(1.1rem, 1.3vw, 1.3rem);
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- spacing ---- */
  --space-section: clamp(5rem, 11vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur: .7s;

  --maxw: 1800px;
}

/* ---------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* scroll-behavior left as 'auto' deliberately — Lenis (js/gsap-fx.js) owns smooth
   scrolling. Native CSS smooth-scroll fights Lenis frame-by-frame and causes the
   stutter/hang this was tuned to avoid. */
html{ scroll-behavior:auto; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--obsidian);
  color:var(--ivory);
  font-family:var(--f-body);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
svg{ display:block; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

section{ position:relative; }

/* ---- utility type ---- */
.font-display{ font-family:var(--f-display); }
.eyebrow{
  font-family:var(--f-body);
  font-size:var(--fs-xs);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--coral);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:0.8em;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background:var(--coral);
  display:inline-block;
}
.eyebrow.light::before{ background:var(--ink); }
.eyebrow.light{ color:var(--coral-dim); }

.huge-number{
  font-family:var(--f-display);
  font-weight:800;
  color:var(--coral);
  font-size:clamp(2.6rem,5vw,4.6rem);
  line-height:1;
  letter-spacing:-0.02em;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  padding:1rem 1.8rem;
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:0.02em;
  border:1px solid currentColor;
  border-radius:100px;
  transition:all .45s var(--ease-out);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.6rem;}
.btn-primary{
  background:var(--coral);
  border-color:var(--coral);
  color:var(--obsidian);
}
.btn-primary:hover{ background:transparent; color:var(--coral); }
.btn-ghost{
  color:var(--ivory);
  border-color:rgba(246,244,240,0.3);
}
.btn-ghost:hover{ border-color:var(--coral); color:var(--coral); }
.btn-ghost.dark{ color:var(--ink); border-color:rgba(16,17,18,0.25); }
.btn-ghost.dark:hover{ border-color:var(--coral); color:var(--coral-dim); }
.btn .arrow{ transition:transform .4s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Header / Navigation                                                     */
/* ---------------------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:260;
  padding:1.4rem 0;
  transition:background .5s var(--ease-out), padding .5s var(--ease-out), border-color .5s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(14,15,16,0.96);
  padding:0.9rem 0;
  border-color:rgba(246,244,240,0.08);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.brand{ display:flex; align-items:center; }
.brand img{ height:34px; width:auto; transition:height .4s var(--ease-out); }
.site-header.scrolled .brand img{ height:28px; }

.main-nav{ display:flex; align-items:center; gap:2.4rem; }
.main-nav a{
  font-size:0.84rem;
  font-weight:600;
  letter-spacing:0.03em;
  position:relative;
  padding:0.3rem 0;
  color:var(--ivory);
  opacity:0.85;
  transition:opacity .3s;
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--coral);
  transition:right .4s var(--ease-out);
}
.main-nav a:hover{ opacity:1; }
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.header-actions .btn{ padding:0.75rem 1.4rem; font-size:0.78rem; }

.burger{
  display:none;
  width:44px; height:44px;
  position:relative;
  z-index:300;
}
.burger span{
  position:absolute; left:10px; right:10px; height:1.5px; background:var(--ivory);
  transition:transform .4s var(--ease-out), opacity .3s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.nav-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0;
  background:var(--obsidian);
  z-index:250;
  display:flex; flex-direction:column;
  justify-content:center;
  padding:2rem var(--gutter);
  transform:translateY(-100%);
  transition:transform .6s var(--ease-in-out);
  visibility:hidden;
}
.nav-open .mobile-menu{ transform:translateY(0); visibility:visible; }
.mobile-menu a{
  font-family:var(--f-display);
  font-size:clamp(2rem,8vw,3rem);
  font-weight:600;
  padding:0.5rem 0;
  display:block;
  border-bottom:1px solid rgba(246,244,240,0.08);
}
.mobile-menu .mm-actions{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero{
  position:relative;
  height:100vh;
  min-height:680px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--obsidian);
}
#hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(16,17,18,0.9) 0%, rgba(16,17,18,0.2) 45%, transparent 70%),
    linear-gradient(to top, rgba(16,17,18,0.95) 0%, rgba(16,17,18,0.3) 38%, transparent 68%);
  z-index:2;
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:3;
  width:100%;
  padding-bottom:clamp(3rem,7vw,6rem);
}
.hero-kicker{
  font-size:var(--fs-sm);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--titanium);
  margin-bottom:1.4rem;
  display:flex; align-items:center; gap:1rem;
  opacity:0;
}
.hero-kicker::before{ content:''; width:40px; height:1px; background:var(--coral); }
.hero-title{
  font-family:var(--f-display);
  font-weight:800;
  font-size:var(--fs-hero);
  line-height:0.96;
  letter-spacing:-0.02em;
  max-width:16ch;
}
.hero-title .line{ overflow:hidden; display:block; }
.hero-title .line span{ display:inline-block; transform:translateY(110%); }
.hero-title .accent{ color:var(--coral); }
.hero-sub{
  margin-top:1.8rem;
  max-width:36ch;
  font-size:var(--fs-md);
  color:var(--titanium);
  font-weight:400;
  opacity:0;
}
.hero-actions{
  margin-top:2.6rem;
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0;
}
.hero-scroll{
  position:absolute;
  right:var(--gutter); bottom:2.4rem;
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:0.8rem;
  font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--titanium);
  opacity:0;
}
.hero-scroll .line{
  width:1px; height:50px; background:rgba(246,244,240,0.2); position:relative; overflow:hidden;
}
.hero-scroll .line::after{
  content:''; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--coral);
  animation:scrollline 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollline{ 0%{ top:-50%; } 100%{ top:100%; } }

.hero-meta{
  position:absolute; left:var(--gutter); bottom:2.4rem; z-index:3;
  display:flex; gap:2.6rem;
}
.hero-meta div{ font-size:var(--fs-xs); color:var(--titanium); }
.hero-meta strong{ display:block; color:var(--ivory); font-family:var(--f-display); font-size:1.1rem; font-weight:700; }

/* ---------------------------------------------------------------------- */
/* Section scaffolding                                                     */
/* ---------------------------------------------------------------------- */
.section{ padding:var(--space-section) 0; }
.section-dark{ background:var(--obsidian); color:var(--ivory); }
.section-light{ background:var(--ivory); color:var(--ink); }
.section-graphite{ background:var(--graphite); color:var(--ivory); }
.section-coral{ background:var(--coral); color:var(--obsidian); }

.section-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  margin-bottom:clamp(2.5rem,5vw,5rem);
}
.section-head .eyebrow{ grid-column:1/13; margin-bottom:1.2rem; }
.section-title{
  grid-column:1/9;
  font-family:var(--f-display);
  font-size:var(--fs-xxl);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.015em;
}
.section-title.narrow{ grid-column:1/8; }
.section-note{
  grid-column:9/13;
  align-self:end;
  font-size:var(--fs-md);
  opacity:0.65;
  padding-bottom:0.3rem;
}
@media (max-width:900px){
  .section-title, .section-title.narrow{ grid-column:1/13; }
  .section-note{ grid-column:1/13; margin-top:1rem; }
}

/* generic 12-col grid helper */
.grid12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }

/* reveal-on-scroll base */
[data-reveal]{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }

/* ---------------------------------------------------------------------- */
/* Institution section (02)                                                */
/* ---------------------------------------------------------------------- */
.institution{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:var(--gutter);
  align-items:start;
}
.institution-copy p{ font-size:var(--fs-md); color:rgba(246,244,240,0.75); max-width:52ch; margin-bottom:1.3rem; }
.institution-copy p strong{ color:var(--ivory); font-weight:600; }
.institution-visual{ position:relative; }
.institution-visual img{ width:100%; height:560px; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.institution-visual .frame-number{
  position:absolute; top:-14px; left:-14px;
  font-family:var(--f-display); font-size:5rem; font-weight:800;
  color:transparent; -webkit-text-stroke:1px rgba(246,244,240,0.3);
}
.stat-row{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--gutter);
  border-top:1px solid rgba(246,244,240,0.12);
  padding-top:2.4rem;
}
.stat-row .stat-label{ font-size:var(--fs-xs); color:var(--titanium); letter-spacing:0.06em; text-transform:uppercase; margin-top:0.5rem; }
@media (max-width:1000px){
  .institution{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:repeat(2,1fr); row-gap:2rem; }
}

/* ---------------------------------------------------------------------- */
/* Philosophy — horizontal journey (03)                                    */
/* ---------------------------------------------------------------------- */
.philosophy-track{
  position:relative;
  display:flex;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:1.5rem;
  margin:0 calc(var(--gutter) * -1);
  padding-left:var(--gutter); padding-right:var(--gutter);
  scrollbar-width:thin;
  scrollbar-color:var(--coral) transparent;
}
.philosophy-track::-webkit-scrollbar{ height:4px; }
.philosophy-track::-webkit-scrollbar-thumb{ background:var(--coral); }
.stage{
  flex:0 0 clamp(220px,22vw,300px);
  scroll-snap-align:start;
  padding:2.2rem 1.6rem 2rem;
  border-right:1px solid rgba(246,244,240,0.1);
  cursor:pointer;
  position:relative;
  transition:background .4s;
}
.stage:first-child{ border-left:1px solid rgba(246,244,240,0.1); }
.stage .stage-index{ font-family:var(--f-display); font-size:0.78rem; color:var(--titanium); letter-spacing:0.1em; }
.stage .stage-shape{
  width:56px; height:56px; margin:1.6rem 0 1.8rem;
  position:relative;
}
.stage .stage-shape svg{ width:100%; height:100%; }
.stage h3{ font-family:var(--f-display); font-size:1.3rem; font-weight:700; letter-spacing:0.02em; margin-bottom:0.9rem; }
.stage p{ font-size:0.92rem; color:var(--titanium); line-height:1.6; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease-out), opacity .4s; }
.stage.active{ background:rgba(239,121,95,0.06); }
.stage.active p{ max-height:200px; opacity:1; }
.stage.active .stage-index{ color:var(--coral); }
.stage.active h3{ color:var(--coral); }
.stage-connector{
  position:absolute; top:62px; right:-1px; width:24px; height:1px; background:rgba(246,244,240,0.15); z-index:2;
}

/* ---------------------------------------------------------------------- */
/* Programs (04)                                                           */
/* ---------------------------------------------------------------------- */
.program-list{ border-top:1px solid rgba(246,244,240,0.12); }
.program-row{
  border-bottom:1px solid rgba(246,244,240,0.12);
  padding:2.2rem 0;
  display:grid;
  grid-template-columns:70px 1fr auto auto;
  align-items:center;
  gap:1.6rem;
  cursor:pointer;
  transition:background .4s;
}
.program-row:hover{ background:rgba(246,244,240,0.03); }
.program-row .p-index{ font-family:var(--f-display); font-size:1rem; color:var(--titanium); }
.program-row .p-name{ font-family:var(--f-display); font-size:clamp(1.3rem,2.6vw,2.1rem); font-weight:700; transition:color .3s; }
.program-row:hover .p-name{ color:var(--coral); }
.program-row .p-meta{ font-size:var(--fs-sm); color:var(--titanium); text-align:right; display:flex; flex-direction:column; gap:0.2rem;}
.program-row .p-arrow{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(246,244,240,0.25);
  display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease-out); flex-shrink:0;
}
.program-row:hover .p-arrow{ background:var(--coral); border-color:var(--coral); color:var(--obsidian); transform:rotate(45deg); }
.program-panel{
  max-height:0; overflow:hidden; transition:max-height .6s var(--ease-out);
  grid-column:1/-1;
}
.program-row.open .program-panel{ max-height:900px; }
.program-panel-inner{
  display:grid; grid-template-columns:1.1fr 1fr; gap:3rem;
  padding-top:2.2rem;
}
.program-panel h4{ font-family:var(--f-display); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--coral); margin-bottom:0.8rem; }
.program-panel p, .program-panel li{ font-size:0.95rem; color:rgba(246,244,240,0.75); line-height:1.7; }
.program-panel li{ padding:0.4rem 0; border-bottom:1px dashed rgba(246,244,240,0.12); }
.program-fact{ display:flex; gap:2rem; margin-top:1.6rem; }
@media (max-width:900px){
  .program-row{ grid-template-columns:40px 1fr auto; }
  .program-row .p-meta{ display:none; }
  .program-panel-inner{ grid-template-columns:1fr; gap:1.6rem; }
}

/* ---------------------------------------------------------------------- */
/* Ecosystem (05)                                                          */
/* ---------------------------------------------------------------------- */
.ecosystem-wrap{ position:relative; }
.ecosystem-diagram{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  margin-bottom:2rem;
}
.eco-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(110px,14vw,170px); height:clamp(110px,14vw,170px);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--coral), var(--coral-dim));
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--f-display); font-weight:800; font-size:clamp(0.8rem,1.1vw,1rem);
  color:var(--obsidian); z-index:3; box-shadow:0 0 70px var(--coral-glow);
  padding:0.5rem;
}
.eco-node{
  position:absolute;
  width:clamp(110px,13vw,160px);
  padding:1rem 1.1rem;
  border:1px solid rgba(246,244,240,0.18);
  background:rgba(32,34,37,0.6);
  backdrop-filter:blur(6px);
  cursor:pointer;
  transition:all .35s var(--ease-out);
  z-index:2;
}
.eco-node:hover, .eco-node.active{ border-color:var(--coral); background:rgba(239,121,95,0.12); transform:translateY(-4px); }
.eco-node .eco-title{ font-family:var(--f-display); font-weight:700; font-size:0.88rem; margin-bottom:0.2rem; }
.eco-node .eco-sub{ font-size:0.72rem; color:var(--titanium); }
.eco-lines{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.eco-detail{
  border-top:1px solid rgba(246,244,240,0.15);
  padding-top:2rem;
  min-height:120px;
}
.eco-detail h3{ font-family:var(--f-display); font-size:1.5rem; color:var(--coral); margin-bottom:0.7rem; }
.eco-detail p{ max-width:60ch; color:rgba(246,244,240,0.75); font-size:1rem; line-height:1.7; }
@media (max-width:900px){
  .ecosystem-diagram{ display:none; }
  .eco-list-mobile{ display:flex; flex-direction:column; gap:0.8rem; }
  .eco-list-mobile .eco-node{ position:static; width:100%; }
}
@media (min-width:901px){ .eco-list-mobile{ display:none; } }

/* ---------------------------------------------------------------------- */
/* People / Faculty (06)                                                   */
/* ---------------------------------------------------------------------- */
.leader-feature{
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
  padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid rgba(16,17,18,0.1);
  margin-bottom:clamp(3rem,6vw,5rem);
}
.leader-feature img{ width:100%; filter:grayscale(1); }
.leader-list{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2rem; }
.leader-item{ border-top:1px solid rgba(16,17,18,0.15); padding-top:1rem; }
.leader-item .l-name{ font-family:var(--f-display); font-size:1.3rem; font-weight:700; }
.leader-item .l-role{ font-size:0.85rem; color:var(--coral-dim); font-weight:600; margin:0.3rem 0; }
.leader-item .l-desc{ font-size:0.88rem; color:#555; }

.faculty-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(16,17,18,0.1);
}
.faculty-card{ background:var(--ivory); padding:1.8rem 1.4rem 2rem; position:relative; overflow:hidden; }
.faculty-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(1); margin-bottom:1.1rem; transition:filter .4s; }
.faculty-card:hover img{ filter:grayscale(0); }
.faculty-card .f-name{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; }
.faculty-card .f-role{ font-size:0.78rem; color:var(--coral-dim); margin-top:0.3rem; }
@media (max-width:900px){
  .leader-feature{ grid-template-columns:1fr; }
  .leader-list{ grid-template-columns:1fr 1fr; }
  .faculty-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------------------------------------------------------------- */
/* Learning experience (07)                                                */
/* ---------------------------------------------------------------------- */
.exp-mosaic{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(2,minmax(180px,34vw));
  gap:var(--gutter);
}
.exp-tile{ position:relative; overflow:hidden; }
.exp-tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.exp-tile:hover img{ transform:scale(1.06); }
.exp-tile .exp-cap{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem; background:linear-gradient(to top, rgba(16,17,18,0.85), transparent); font-size:0.85rem; }
.exp-tile.a{ grid-column:1/4; grid-row:1/3; }
.exp-tile.b{ grid-column:4/7; grid-row:1/2; }
.exp-tile.c{ grid-column:4/6; grid-row:2/3; }
.exp-tile.d{ grid-column:6/7; grid-row:2/3; }
@media (max-width:900px){
  .exp-mosaic{ grid-template-columns:1fr; grid-template-rows:none; }
  .exp-tile{ grid-column:auto !important; grid-row:auto !important; height:260px; }
}

/* ---------------------------------------------------------------------- */
/* Insights / editorial (08)                                               */
/* ---------------------------------------------------------------------- */
.insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.insight-card{ border-top:1px solid rgba(246,244,240,0.15); padding-top:1.6rem; }
.insight-card .i-tag{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--coral); }
.insight-card h3{ font-family:var(--f-display); font-size:1.4rem; font-weight:700; margin:0.8rem 0; line-height:1.3; }
.insight-card p{ font-size:0.9rem; color:var(--titanium); }
.insight-card .i-date{ font-size:0.76rem; color:var(--titanium); margin-top:1rem; display:block; }
@media (max-width:900px){ .insight-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* News/events strip                                                       */
/* ---------------------------------------------------------------------- */
.news-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(246,244,240,0.1); }
.news-card{ background:var(--obsidian); padding:2.2rem; }
.news-card .n-date{ font-size:0.75rem; color:var(--coral); letter-spacing:0.08em; }
.news-card h3{ font-family:var(--f-display); font-size:1.3rem; margin:1rem 0; }
.news-card p{ color:var(--titanium); font-size:0.9rem; }
@media (max-width:900px){ .news-strip{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* Final CTA                                                               */
/* ---------------------------------------------------------------------- */
.final-cta{
  position:relative;
  min-height:70vh;
  display:flex; align-items:center;
  overflow:hidden;
}
#cta-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.8; }
.final-cta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(16,17,18,0.2), var(--obsidian) 92%);
  z-index:1;
}
.final-cta .wrap{ position:relative; z-index:2; text-align:center; }
.final-cta h2{ font-family:var(--f-display); font-size:var(--fs-xxl); font-weight:800; max-width:16ch; margin:0 auto; }
.final-cta p{ max-width:48ch; margin:1.6rem auto 2.4rem; color:var(--titanium); font-size:var(--fs-md); }
.final-cta .hero-actions{ justify-content:center; opacity:1; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{ background:var(--obsidian); border-top:1px solid rgba(246,244,240,0.08); padding:4rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:3rem; }
.footer-grid h4{ font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--titanium); margin-bottom:1.2rem; }
.footer-grid a, .footer-grid p{ font-size:0.88rem; color:rgba(246,244,240,0.7); display:block; margin-bottom:0.65rem; transition:color .3s; }
.footer-grid a:hover{ color:var(--coral); }
.footer-brand img{ height:30px; margin-bottom:1.2rem; }
.footer-brand p{ max-width:34ch; color:var(--titanium); }
.footer-bottom{ border-top:1px solid rgba(246,244,240,0.08); padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.78rem; color:var(--titanium); }
.footer-bottom a{ color:var(--titanium); }
.footer-bottom a:hover{ color:var(--coral); }
.footer-tagline{ font-family:var(--f-display); font-size:0.78rem; letter-spacing:0.08em; }
@media (max-width:1000px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Inner-page hero banner (used by internal pages)                         */
/* ---------------------------------------------------------------------- */
.page-banner{
  position:relative;
  padding:calc(7rem + var(--space-section)) 0 var(--space-section);
  background:var(--obsidian);
  overflow:hidden;
}
.page-banner img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.28; filter:grayscale(1); }
.page-banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,17,18,0.3), var(--obsidian) 90%); }
.page-banner .wrap{ position:relative; z-index:2; }
.page-banner .crumb{ font-size:0.78rem; color:var(--titanium); margin-bottom:1.6rem; letter-spacing:0.05em; }
.page-banner .crumb a:hover{ color:var(--coral); }
.page-banner h1{ font-family:var(--f-display); font-size:var(--fs-xxl); font-weight:800; max-width:20ch; }
.page-banner .lede{ margin-top:1.4rem; max-width:50ch; font-size:var(--fs-md); color:var(--titanium); }

/* back-to-top / cursor dot */
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--coral); pointer-events:none; z-index:999; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease-out), height .3s var(--ease-out), border-width .3s;
  display:none;
}
@media (min-width:1000px){ .cursor-dot{ display:block; } }
.cursor-dot.grow{ width:30px; height:30px; background:transparent; border:1px solid var(--coral); }

/* ---------------------------------------------------------------------- */
/* Responsive nav collapse                                                 */
/* ---------------------------------------------------------------------- */
@media (max-width:1080px){
  .main-nav{ display:none; }
  .header-actions .btn-ghost{ display:none; }
  .burger{ display:block; }
}

@media (max-width:640px){
  .hero-title{ max-width:100%; font-size:clamp(2.1rem, 10.5vw, 3.1rem); }
  .hero-meta{ display:none; }
  .final-cta h2{ font-size:clamp(1.9rem, 9vw, 2.8rem); }
}

/* misc content helpers used across inner pages */
.prose{ max-width:70ch; font-size:1.02rem; color:var(--titanium); line-height:1.85; }
.prose.dark-text{ color:#444; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

.divider{ height:1px; background:rgba(246,244,240,0.12); margin:3rem 0; }
.divider.on-light{ background:rgba(16,17,18,0.12); }

.tag-pill{
  display:inline-block; padding:0.4rem 0.9rem; border:1px solid rgba(246,244,240,0.2);
  border-radius:100px; font-size:0.74rem; letter-spacing:0.04em; margin:0 0.4rem 0.4rem 0;
}

.accordion-item{ border-bottom:1px solid rgba(246,244,240,0.12); }
.accordion-q{ padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.accordion-q .plus{ font-size:1.4rem; color:var(--coral); transition:transform .4s var(--ease-out); flex-shrink:0; margin-left:1rem; }
.accordion-item.open .plus{ transform:rotate(45deg); }
.accordion-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.accordion-item.open .accordion-a{ max-height:300px; }
.accordion-a p{ padding-bottom:1.6rem; color:var(--titanium); font-size:0.95rem; line-height:1.7; max-width:65ch; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
.form-field{ margin-bottom:1.4rem; }
.form-field label{ display:block; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--titanium); margin-bottom:0.6rem; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(246,244,240,0.25);
  padding:0.8rem 0; color:var(--ivory); font-family:var(--f-body); font-size:1rem; transition:border-color .3s;
}
.form-field textarea{ resize:vertical; min-height:100px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--coral); }
.form-field select option{ background:var(--graphite); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.info-block{ margin-bottom:2rem; }
.info-block h4{ font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--coral); margin-bottom:0.6rem; }
.info-block p, .info-block a{ font-size:1rem; color:var(--ivory); }

.timeline{ border-left:1px solid rgba(246,244,240,0.15); padding-left:2rem; }
.timeline-item{ position:relative; padding-bottom:2.6rem; }
.timeline-item::before{ content:''; position:absolute; left:-2.45rem; top:0.3rem; width:10px; height:10px; border-radius:50%; background:var(--coral); }
.timeline-item .t-year{ font-family:var(--f-display); font-weight:800; color:var(--coral); font-size:1.3rem; }

.back-link{ display:inline-flex; align-items:center; gap:0.6rem; font-size:0.85rem; color:var(--titanium); margin-bottom:1.5rem; }
.back-link:hover{ color:var(--coral); }

/* ==========================================================================
   MOTION LAYER — rotation marks, marquee, tilt, magnetic, scanner rings
   ========================================================================== */

/* ---- header hide/show on scroll direction ---- */
.site-header{ transform:translateY(0); transition:background .5s var(--ease-out), padding .5s var(--ease-out), border-color .5s, transform .5s var(--ease-out); }
.site-header.header-hidden{ transform:translateY(-110%); }

/* ---- rotating circular badge (institutional seal) ---- */
.rotating-badge{
  position:relative;
  width:clamp(96px,9vw,132px);
  height:clamp(96px,9vw,132px);
  color:var(--ivory);
  flex-shrink:0;
}
.rotating-badge.dark-mark{ color:var(--obsidian); }
.badge-spin{
  width:100%; height:100%;
  animation:badge-rotate 16s linear infinite;
  transform-origin:50% 50%;
}
@keyframes badge-rotate{ to{ transform:rotate(360deg); } }
.badge-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.badge-center svg{ width:30%; height:30%; color:var(--coral); }
.banner-badge{
  position:absolute;
  top:clamp(5.5rem,11vw,8rem);
  right:var(--gutter);
  z-index:3;
  opacity:0.9;
}
.hero-badge{
  position:absolute;
  right:var(--gutter);
  top:clamp(6rem,14vh,9rem);
  z-index:3;
}
@media (max-width:900px){
  .banner-badge{ display:none; }
  .hero-badge{ display:none; }
}

/* ---- marquee ticker ---- */
.marquee{
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid rgba(246,244,240,0.1);
  border-bottom:1px solid rgba(246,244,240,0.1);
  background:var(--graphite);
  padding:1.3rem 0;
}
.marquee-track{
  display:inline-flex;
  align-items:center;
  animation:marquee-scroll 32s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  display:inline-flex;
  align-items:center;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.8rem);
  letter-spacing:0.01em;
  color:var(--ivory);
  padding:0 1.6rem;
  text-transform:uppercase;
}
.marquee-track span.outline{ -webkit-text-stroke:1px var(--ivory); color:transparent; }
.marquee-track span::after{
  content:'✦';
  margin-left:1.6rem;
  color:var(--coral);
  font-size:0.9rem;
  -webkit-text-stroke:0;
}
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- eco-center scanner rings (radar effect) ---- */
.eco-center{ position:absolute; }
.eco-center::before, .eco-center::after{
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.eco-center::before{
  inset:-16px;
  border:1px dashed rgba(239,121,95,0.45);
  animation:badge-rotate 14s linear infinite;
}
.eco-center::after{
  inset:-32px;
  border:1px dotted rgba(246,244,240,0.18);
  animation:eco-rotate-rev 22s linear infinite;
}
@keyframes eco-rotate-rev{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }

/* ---- 3D tilt cards (will-change toggled via JS only while interacting) ---- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .15s ease-out, box-shadow .3s ease;
}

/* ---- magnetic buttons (will-change toggled via JS only while interacting) ---- */

/* ---- philosophy pinned horizontal journey ---- */
.philosophy-pin-section{ overflow:hidden; }
@media (min-width:901px){
  .philosophy-pin-section .philosophy-track{
    overflow:visible;
    flex-wrap:nowrap;
    width:max-content;
  }
}

/* ---- ambient ember particles (pure CSS, decorative) ---- */
.ember-field{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.ember-field span{
  position:absolute;
  bottom:-10px;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--coral);
  opacity:0;
  animation:ember-rise linear infinite;
  box-shadow:0 0 8px 1px var(--coral-glow);
}
@keyframes ember-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.8; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-120vh) translateX(var(--drift,20px)); opacity:0; }
}

/* ---- section reveal base: will-change is toggled via JS only during the
   one-time reveal animation, not left on permanently (that pins a GPU layer
   per element for the whole page lifetime, which is costly on long pages). ---- */

/* ---- spinning accent rings used decoratively near headings ---- */
.spin-ring{
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(239,121,95,0.3);
  animation:badge-rotate 24s linear infinite;
  pointer-events:none;
}
.spin-ring.rev{ animation-name:eco-rotate-rev; animation-duration:30s; border-style:dotted; border-color:rgba(246,244,240,0.15); }