/* WarCal Modern — styles.css */
/* Reset and base */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5;background:#0f1220;color:#e8e9ee}
img{max-width:100%;display:block;border:0}
a{color:inherit}
:root{
  --bg:#0f1220;
  --panel:#161a2a;
  --ink:#e8e9ee;
  --muted:#b7bccd;
  --gold:#c9a86b;
  --gold-2:#b8935f;
  --gold-grad:linear-gradient(135deg,#f7db98 0%,#e2c078 28%,#c9a86b 55%,#9f7d49 100%);
  --ring: 0 0 0 3px rgba(201,168,107,.35);
  --radius:16px;
}

/* Layout helpers */
.wrap{width:min(1160px,92%);margin-inline:auto}
.section-pad{padding:clamp(64px,8vw,96px) 0}
.maxw{max-width:65ch;color:var(--muted)}
.kicker{color:var(--gold);font-weight:600;letter-spacing:.3px;text-transform:uppercase;font-size:.9rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(15,18,32,.9),rgba(15,18,32,.6) 40%,rgba(15,18,32,0));backdrop-filter:saturate(140%) blur(8px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:inline-flex;gap:.6rem;align-items:center;font-weight:800;letter-spacing:.2px}
.brand svg{color:var(--gold)}
.nav{display:flex;gap:1.25rem;align-items:center}
.nav a{opacity:.9;text-decoration:none;font-weight:600}
.nav .pill{background:var(--gold);color:#131520;padding:.55rem .9rem;border-radius:999px}
.nav .pill:hover{background:var(--gold-2)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}

/* Hero */
.hero{position:relative}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 20% 10%,rgba(201,168,107,.12),transparent 60%),radial-gradient(50% 40% at 80% 20%,rgba(93,131,255,.12),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero-copy h1{margin:.2rem 0 1rem;font-size:clamp(32px,5vw,56px);line-height:1.05}
.lead{color:var(--muted);font-size:1.1rem}
.actions{display:flex;gap:.75rem;margin-top:1.25rem}
.btn{background:var(--gold);color:#131520;border:0;border-radius:12px;padding:.85rem 1.15rem;font-weight:700;text-decoration:none;display:inline-block}
.btn:hover{background:var(--gold-2)}
.btn.ghost{background:transparent;color:var(--gold);outline:2px solid var(--gold)}
.btn.ghost:hover{color:#131520;background:var(--gold)}
.hero-card{background:linear-gradient(180deg,var(--panel),#0f1220);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);min-height:340px;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative;overflow:hidden}
.hero-card::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 60% at -10% 0%,rgba(201,168,107,.08),transparent 60%)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:20px}
.stat{display:block;font-weight:800;font-size:clamp(16px,2.8vw,24px)}
.label{display:block;color:var(--muted);font-size:.9rem}

/* About */
.section-head h2{margin:0 0 .4rem;font-size:clamp(24px,3.6vw,40px)}
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:24px}
.person{display:grid;grid-template-columns:120px 1fr;gap:18px;background:var(--panel);border-radius:var(--radius);padding:18px;border:1px solid rgba(255,255,255,.06)}
.person img{width:120px;height:120px;object-fit:cover;border-radius:12px;filter:grayscale(1)}
.person-body h3{margin:.2rem 0 .2rem}
.person-body p{color:var(--muted)}

/* Strategy cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.25)}

/* Portfolio */
.portfolio .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.tile{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden}
.tile img{aspect-ratio:16/10;object-fit:cover}
.tile figcaption{padding:16px}
.placeholder .ph{height:180px;background:linear-gradient(90deg,#1c2033 25%,#23283f 50%,#1c2033 75%);animation:sheen 1.4s infinite linear;background-size:200% 100%}
@keyframes sheen{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Principles */
.principle-list{display:grid;gap:.6rem;counter-reset:pc}
.principle-list li{list-style:none;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px;color:var(--muted)}

/* Contact */
form{display:grid;gap:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
label{display:grid;gap:6px}
input,textarea{background:#0f1326;border:1px solid #2a314d;color:var(--ink);padding:12px 14px;border-radius:12px;font-size:1rem}
input:focus,textarea:focus{outline:none;box-shadow:var(--ring)}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0}
button{cursor:pointer}
.status{margin-top:6px;color:var(--muted)}
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;color:var(--muted);text-align:center}

/* Floating CTA */
.floating-cta{position:fixed;right:18px;bottom:18px;background:var(--gold);color:#131520;padding:.8rem 1rem;border-radius:14px;text-decoration:none;font-weight:800;box-shadow:0 12px 32px rgba(0,0,0,.35)}

/* Utility */
.scroll-cue{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.2);margin-inline:auto;margin-top:18px;opacity:.7}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;color:#000;padding:8px 10px;border-radius:10px}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .people-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .portfolio .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav{position:fixed;inset:64px 12px auto 12px;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:12px;display:none;flex-direction:column}
  .nav a{padding:10px 12px;border-radius:10px}
  .nav-toggle{display:block}
  .portfolio .grid{grid-template-columns:1fr}
}

.btn{
  background-image:var(--gold-grad);
  color:#131520;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.btn:hover{
  filter:brightness(1.06);
}
.btn.ghost{
  background:transparent;
  background-image:none;
}
.btn.ghost:hover{
  color:#131520;
  background-image:var(--gold-grad);
  outline:none;
}
.nav .pill{
  background-image:var(--gold-grad);
  color:#131520;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.floating-cta{
  background-image:var(--gold-grad);
  color:#131520;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.brand{
  display:inline-flex;
  gap:.6rem;
  align-items:center;
  font-weight:800;
  letter-spacing:.2px;
  text-decoration:none;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  background:radial-gradient(circle at 25% 20%,#24283c 0%,#141728 40%,#0a0c17 100%);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.12),
    inset -4px -4px 8px rgba(0,0,0,.9),
    0 6px 14px rgba(0,0,0,.55);
}
.brand-mark img{
  width:20px;
  height:20px;
  display:block;
  filter:drop-shadow(-1px -1px 0 rgba(255,255,255,.12)) drop-shadow(1px 1px 0 rgba(0,0,0,.65));
}
.brand-word{
  font-size:1.05rem;
}
.brand:hover .brand-mark{
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.18),
    inset -3px -3px 6px rgba(0,0,0,.85),
    0 10px 26px rgba(0,0,0,.7);
}

.theme{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.4rem .55rem;color:inherit;cursor:pointer}

html[data-theme="light"]{
  --bg:#fbfbfd;
  --panel:#ffffff;
  --ink:#0f1220;
  --muted:#5b6074;
}
html[data-theme="dark"]{
  --bg:#0f1220;
  --panel:#161a2a;
  --ink:#e8e9ee;
  --muted:#b7bccd;
}
body{background:var(--bg);color:var(--ink)}
.maxw,.lead,.person-body p,.label,.status{color:var(--muted)}

@supports (-webkit-backdrop-filter: none){.hero-card,.person,.card,.tile{background-color:var(--panel)}}

@keyframes gold-sheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn:not(.ghost),.nav .pill,.floating-cta{background-image:var(--gold-grad);background-size:220% 220%;animation:gold-sheen 16s linear infinite}

.site-version{
  margin-left:.5rem;
  padding:.15rem .5rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:.85rem;
  letter-spacing:.2px;
  opacity:.85;
}


/* v0.23 — hero architectural reveal + gold sweep + theme refinements */

/* Header: lighten overall weight (both themes, subtle) */
.site-header{
  background:linear-gradient(180deg,rgba(15,18,32,.72),rgba(15,18,32,.44) 40%,rgba(15,18,32,0));
}
.site-header{box-shadow:none}
.site-header[data-elevate].is-elevated{box-shadow:0 10px 26px rgba(0,0,0,.18)}

/* Hero stat card: soften gradient contrast */
.hero-card{
  background:linear-gradient(180deg,rgba(22,26,42,.78),rgba(15,18,32,.92));
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}

/* Rhythm break: subtle section wash (mid-page) */
.principles{
  position:relative;
}
.principles::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(70% 60% at 50% 0%, rgba(201,168,107,.08), transparent 62%);
  pointer-events:none;
}

/* Form emphasis */
.contact form{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
}

/* Footer readability */
.site-footer{color:rgba(183,188,205,.92)}
html[data-theme="light"] .site-footer{color:rgba(15,18,32,.72)}
html[data-theme="light"] .site-version{border-color:rgba(15,18,32,.16)}

/* Gold: animated metal feel (kept subtle) */
@keyframes gold-sheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn:not(.ghost),.nav .pill,.floating-cta{
  background-image:var(--gold-grad);
  background-size:220% 220%;
  animation:gold-sheen 16s linear infinite;
}

/* Hero spectacle: architectural draw-in + gold sweep (one-time) */
.hero{position:relative; overflow:hidden}
.hero-arch{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.95;
}
.arch-svg{
  position:absolute;
  right:clamp(24px,5vw,64px);
  top:clamp(72px,8vw,104px);
  width:clamp(220px,26vw,340px);
  height:auto;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.35));
  opacity:.24;
}
.arch-stroke{
  fill:none;
  stroke:rgba(201,168,107,.78);
  stroke-width:6;
  stroke-linecap:square;
  stroke-linejoin:miter;
  stroke-dasharray:900;
  stroke-dashoffset:900;
}

/* gold sweep layer */
.gold-sweep{
  position:absolute;
  left:-40%;
  top:-60%;
  width:80%;
  height:220%;
  background:linear-gradient(115deg, transparent 0%, rgba(247,219,152,.0) 28%, rgba(247,219,152,.28) 42%, rgba(201,168,107,.22) 55%, rgba(159,125,73,.0) 72%, transparent 100%);
  transform:translateX(0) rotate(8deg);
  opacity:0;
}

/* Light theme tuning for arch */
html[data-theme="light"] .arch-svg{opacity:.14}
html[data-theme="light"] .arch-stroke{stroke:rgba(159,125,73,.70)}

/* Motion control */
@media (prefers-reduced-motion: reduce){
  .btn:not(.ghost),.nav .pill,.floating-cta{animation:none}
  .arch-stroke{stroke-dashoffset:0}
  .gold-sweep{display:none}
}



/* v0.23 PATCH — hero z-index + visibility */
.hero{position:relative;overflow:hidden}
.hero::before{z-index:0}
.hero-arch{z-index:1;opacity:1}
.hero-grid,.hero-copy,.hero-card{position:relative;z-index:2}

/* Make the architectural strokes slightly more present */
.arch-svg{opacity:.38}
.arch-stroke{stroke-width:6.5}

/* Ensure gold sweep sits above the hero wash but below content */
.gold-sweep{z-index:1}


/* v0.26 LOGO — header mark + gold sheen */
.logo-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  overflow:hidden;
}
.logo{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.logo-wrap::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(115deg,
    rgba(247,219,152,0) 0%,
    rgba(247,219,152,.30) 30%,
    rgba(201,168,107,.55) 45%,
    rgba(159,125,73,.25) 60%,
    rgba(247,219,152,0) 100%
  );
  transform:translateX(-40%) rotate(12deg);
  mix-blend-mode:overlay;
  opacity:.85;
  animation:logo-sheen 5.8s linear infinite;
  pointer-events:none;
}
@keyframes logo-sheen{
  0%{transform:translateX(-55%) rotate(12deg)}
  55%{transform:translateX(55%) rotate(12deg)}
  100%{transform:translateX(55%) rotate(12deg)}
}
@media (prefers-reduced-motion: reduce){
  .logo-wrap::after{animation:none}
}

/* v0.26 HERO — watermark seal (Option 3) */
.hero{position:relative}
.hero::after{
  content:"";
  position:absolute;
  right:clamp(16px,4vw,54px);
  top:clamp(72px,8vw,104px);
  width:clamp(220px,26vw,360px);
  height:clamp(220px,26vw,360px);
  background-image:url("/images/Logo_Basic.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.10;
  filter:blur(.2px) drop-shadow(0 30px 80px rgba(0,0,0,.30));
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}
.hero-grid,.hero-copy,.hero-card{position:relative;z-index:2}
html[data-theme="light"] .hero::after{
  opacity:.06;
  mix-blend-mode:multiply;
  filter:blur(.2px) drop-shadow(0 22px 60px rgba(0,0,0,.10));
}


/* LOGO — header mark + gold sheen */
.logo-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  overflow:hidden;
}
.logo{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.logo-wrap::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(115deg,
    rgba(247,219,152,0) 0%,
    rgba(247,219,152,.30) 30%,
    rgba(201,168,107,.55) 45%,
    rgba(159,125,73,.25) 60%,
    rgba(247,219,152,0) 100%
  );
  transform:translateX(-55%) rotate(12deg);
  mix-blend-mode:overlay;
  opacity:.85;
  animation:logo-sheen 5.8s linear infinite;
  pointer-events:none;
}
@keyframes logo-sheen{
  0%{transform:translateX(-55%) rotate(12deg)}
  55%{transform:translateX(55%) rotate(12deg)}
  100%{transform:translateX(55%) rotate(12deg)}
}
@media (prefers-reduced-motion: reduce){
  .logo-wrap::after{animation:none}
}

/* HERO — watermark seal */
.hero{position:relative}
.hero::after{
  content:"";
  position:absolute;
  right:clamp(16px,4vw,54px);
  top:clamp(72px,8vw,104px);
  width:clamp(220px,26vw,360px);
  height:clamp(220px,26vw,360px);
  background-image:url("/images/Logo_Basic.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.10;
  filter:blur(.2px) drop-shadow(0 30px 80px rgba(0,0,0,.30));
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}
.hero-grid,.hero-copy,.hero-card{position:relative;z-index:2}
html[data-theme="light"] .hero::after{
  opacity:.06;
  mix-blend-mode:multiply;
  filter:blur(.2px) drop-shadow(0 22px 60px rgba(0,0,0,.10));
}


/* v0.27 POLISH — logo authority */
.logo-wrap{
  width:34px;
  height:34px;
  border-radius:10px;
}
.logo{
  width:34px;
  height:34px;
}
.brand-word{
  font-weight:700;
  letter-spacing:.1px;
  font-size:1.02rem;
}


/* v0.27 POLISH — abstract hero motif (crop to icon-only feel) */
.hero::after{
  background-image:url("/images/Logo_Basic.png");
  background-size:260% 260%;
  background-position:12% 18%;
  opacity:.075;
}
html[data-theme="dark"] .hero::after{
  opacity:.085;
  mix-blend-mode:overlay;
}
html[data-theme="light"] .hero::after{
  opacity:.045;
  mix-blend-mode:multiply;
}


/* v0.27 POLISH — floating cta align with Bricks */
.floating-cta{
  max-width:240px;
  text-align:center;
}


/* v0.27 PATCH — make polish visible */

/* 1) Logo authority: make the mark actually lead */
.logo-wrap{
  width:42px;
  height:42px;
  border-radius:12px;
}
.logo{
  width:42px;
  height:42px;
}
.brand{
  gap:.7rem;
}
.brand-word{
  font-weight:650;
  font-size:1.02rem;
  letter-spacing:.08px;
  opacity:.95;
}

/* Make the shimmer read as “gold” (still tasteful) */
.logo-wrap::after{
  opacity:1;
  animation-duration:4.8s;
}

/* 2) Abstract hero motif: turn it into a cropped architectural texture */
.hero::after{
  background-image:url("/images/Logo_Basic.png");
  background-size:520% 520%;
  background-position:18% 22%;
  opacity:.12;
  filter:blur(.25px) drop-shadow(0 34px 90px rgba(0,0,0,.30));
}
html[data-theme="light"] .hero::after{
  opacity:.06;
  background-size:560% 560%;
  background-position:16% 20%;
  filter:blur(.25px) drop-shadow(0 22px 60px rgba(0,0,0,.10));
}

/* De-emphasize the existing arch overlay so the motif reads cleanly */
.arch-svg{
  opacity:.18;
}
html[data-theme="light"] .arch-svg{
  opacity:.10;
}

/* 3) Floating CTA already aligned, but improve legibility and balance */
.floating-cta{
  max-width:260px;
  padding:.85rem 1.05rem;
  font-weight:850;
}


/* v0.28 — hero watermark removed (Option A) */
.hero::after{content:none !important; display:none !important}


/* v0.28 — logo authority + legibility */
.logo-wrap{
  width:56px;
  height:56px;
  border-radius:14px;
}
.logo{
  width:56px;
  height:56px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
html[data-theme="dark"] .logo{
  filter:invert(1) brightness(1.15) contrast(1.05) drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.brand-word{
  font-weight:650;
  font-size:1.05rem;
  letter-spacing:.08px;
}


/* v0.28 — stat card dominate + architectural feel */
.hero-grid{align-items:start}
.hero-card{
  min-height:420px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(201,168,107,.10), transparent 60%),
    radial-gradient(80% 60% at 85% 20%, rgba(93,131,255,.10), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 24px),
    linear-gradient(180deg, rgba(22,26,42,.96), rgba(15,18,32,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.45);
}
.hero-stats{
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:24px;
}
.hero-stats .stat{
  letter-spacing:.2px;
  font-size:clamp(18px,2.6vw,28px);
}
.hero-stats .label{
  opacity:.9;
}

/* Keep the architectural linework but make it feel integrated */
.arch-svg{
  opacity:.26;
  right:clamp(10px,2.5vw,32px);
  top:clamp(90px,10vw,130px);
  width:clamp(240px,30vw,420px);
}
.arch-stroke{
  stroke:rgba(201,168,107,.70);
  stroke-width:5.5;
}

/* Animation: stat card “arrives” and the blueprint breathes */
@keyframes stat-arrive{
  0%{transform:translateY(10px) scale(.985); opacity:.0; filter:blur(1px)}
  55%{opacity:1}
  100%{transform:translateY(0) scale(1); opacity:1; filter:none}
}
@keyframes blueprint-breathe{
  0%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
  50%{background-position:0 0, 0 0, 0 18px, 18px 0, 0 0}
  100%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
}
.hero-card{
  animation:stat-arrive 900ms cubic-bezier(.2,.8,.2,1) 120ms both;
}
.hero-card{
  background-size:auto, auto, auto, auto, auto;
  animation:
    stat-arrive 900ms cubic-bezier(.2,.8,.2,1) 120ms both,
    blueprint-breathe 10s ease-in-out 900ms infinite;
}

@media (prefers-reduced-motion: reduce){
  .hero-card{animation:none}
}


/* v0.29 — header icon-only + light stat card */

/* Make logo meaningfully larger */
.logo-wrap{
  width:64px;
  height:64px;
  border-radius:16px;
}
.logo{
  width:64px;
  height:64px;
}

/* Make the icon legible in dark header (icon is black) */
html[data-theme="dark"] .logo{
  filter:invert(1) brightness(1.08) contrast(1.05) drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* Stat card: light theme should be lighter and readable */
html[data-theme="light"] .hero-card{
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(201,168,107,.12), transparent 60%),
    radial-gradient(80% 60% at 85% 20%, rgba(93,131,255,.10), transparent 65%),
    repeating-linear-gradient(0deg, rgba(15,18,32,.06) 0px, rgba(15,18,32,.06) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(15,18,32,.05) 0px, rgba(15,18,32,.05) 1px, transparent 1px, transparent 24px),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,246,250,.98));
  border:1px solid rgba(15,18,32,.12);
  box-shadow:0 22px 60px rgba(0,0,0,.18);
}
html[data-theme="light"] .hero-card .stat,
html[data-theme="light"] .hero-card .label{
  color:rgba(15,18,32,.92);
}
html[data-theme="light"] .arch-stroke{
  stroke:rgba(15,18,32,.22);
}
html[data-theme="light"] .arch-svg{
  opacity:.18;
}


/* v0.292 — body logo mark (header text-only) */
.brand{gap:0}
.body-mark{
  width:60px;
  height:60px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.body-logo{
  width:40px;
  height:40px;
  object-fit:contain;
  opacity:.9;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
html[data-theme="light"] .body-mark{
  background:rgba(15,18,32,.02);
  border:1px solid rgba(15,18,32,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}
html[data-theme="light"] .body-logo{
  opacity:.85;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.18));
}


/* Hero seal placement (v0.292) */
.hero-seal{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:.6rem 0 1.1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.10),
    inset -3px -3px 8px rgba(0,0,0,.55),
    0 18px 50px rgba(0,0,0,.25);
}
.hero-seal__img{
  width:40px;
  height:40px;
  object-fit:contain;
  opacity:.9;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
html[data-theme="light"] .hero-seal{
  background:rgba(15,18,32,.02);
  border:1px solid rgba(15,18,32,.10);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.85),
    inset -3px -3px 8px rgba(0,0,0,.10),
    0 18px 45px rgba(0,0,0,.10);
}
html[data-theme="light"] .hero-seal__img{
  opacity:.85;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}


/* Crop the PNG so only the top icon is visible (hides the wordmark area) */
.hero-seal__img{
  width:240%;
  height:240%;
  object-fit:cover;
  object-position:50% 18%;
  opacity:.95;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.22));
}

/* Dark theme: keep it clean and legible */
/* Light theme: keep it lighter and airy */
html[data-theme="light"] .hero-seal{
  background:rgba(15,18,32,.02);
  border:1px solid rgba(15,18,32,.10);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.90),
    inset -6px -6px 18px rgba(0,0,0,.08),
    0 22px 60px rgba(0,0,0,.10);
}
html[data-theme="light"] .hero-seal__img{
  opacity:.88;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.14));
}

/* Mobile: scale down to avoid pushing the headline too low */
@media (max-width: 720px){
  .hero-seal{
    width:120px;
    height:120px;
    border-radius:22px;
  }
  .hero-seal__img{
    width:240%;
    height:240%;
    object-position:50% 18%;
  }
}


/* v0.293 — hero seal icon-only (uses icon-only Logo_Basic.png) */
.hero-seal{
  width:112px;
  height:112px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:.55rem 0 1.05rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.10),
    inset -6px -6px 18px rgba(0,0,0,.55),
    0 26px 70px rgba(0,0,0,.20);
}
.hero-seal__img{
  width:64px;
  height:64px;
  object-fit:contain;
  opacity:.92;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.22));
}

/* Dark theme: icon is black, invert for legibility */
/* Light theme: keep it subtle and clean */
html[data-theme="light"] .hero-seal{
  background:rgba(15,18,32,.02);
  border:1px solid rgba(15,18,32,.10);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.90),
    inset -6px -6px 18px rgba(0,0,0,.08),
    0 22px 60px rgba(0,0,0,.10);
}
html[data-theme="light"] .hero-seal__img{
  opacity:.88;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.14));
}

@media (max-width: 720px){
  .hero-seal{
    width:92px;
    height:92px;
    border-radius:20px;
  }
  .hero-seal__img{
    width:54px;
    height:54px;
  }
}


/* v0.294 — hero seal scale (double size) */
.hero-seal{
  width:220px;
  height:220px;
  border-radius:30px;
  margin:.55rem 0 1.15rem;
}
.hero-seal__img{
  width:124px;
  height:124px;
}

/* Remove visible 'WarCal' word in header without collapsing layout */
.brand-word{display:none}
.brand{min-width:42px}


/* v0.294 — hero seal circular (emblem style) */
.hero-seal{
  width:220px;
  height:220px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:.55rem 0 1.25rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.12),
    inset -8px -8px 20px rgba(0,0,0,.55),
    0 30px 80px rgba(0,0,0,.25);
}

.hero-seal__img{
  width:120px;
  height:120px;
  object-fit:contain;
  opacity:.92;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.22));
}

/* Dark theme legibility */
/* Light theme refinement */
html[data-theme="light"] .hero-seal{
  background:rgba(15,18,32,.02);
  border:1px solid rgba(15,18,32,.12);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.90),
    inset -8px -8px 20px rgba(0,0,0,.08),
    0 26px 70px rgba(0,0,0,.12);
}
html[data-theme="light"] .hero-seal__img{
  opacity:.88;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.16));
}

/* Mobile scale */
@media (max-width: 720px){
  .hero-seal{
    width:160px;
    height:160px;
  }
  .hero-seal__img{
    width:90px;
    height:90px;
  }
}


/* v0.294 PATCH — seal matches stat card + remove old hero overlay remnants */

/* Remove remnants from earlier hero spectacle layers */
.hero-arch,
.arch-svg,
.gold-sweep{
  display:none !important;
}

/* Make the circular seal feel like the stat card (architectural glass + grid) */
.hero-seal{
  border-radius:50%;
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(201,168,107,.10), transparent 60%),
    radial-gradient(80% 60% at 85% 20%, rgba(93,131,255,.08), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 20px),
    linear-gradient(180deg, rgba(22,26,42,.92), rgba(15,18,32,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.22);
}

/* Light theme version: brighter, readable, same grid language */
html[data-theme="light"] .hero-seal{
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(201,168,107,.10), transparent 60%),
    radial-gradient(80% 60% at 85% 20%, rgba(93,131,255,.08), transparent 65%),
    repeating-linear-gradient(0deg, rgba(15,18,32,.06) 0px, rgba(15,18,32,.06) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(15,18,32,.05) 0px, rgba(15,18,32,.05) 1px, transparent 1px, transparent 20px),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,246,250,.98));
  border:1px solid rgba(15,18,32,.12);
  box-shadow:0 22px 60px rgba(0,0,0,.10);
}

/* Keep icon crisp */
.hero-seal__img{
  opacity:.92;
}
/* STAT DRIFT — subtle micro-motion inside the stat card (premium, not random) */
@keyframes stat-drift-a{
  0%{transform:translate(0,0)}
  40%{transform:translate(4px,-3px)}
  70%{transform:translate(-3px,2px)}
  100%{transform:translate(0,0)}
}
@keyframes stat-drift-b{
  0%{transform:translate(0,0)}
  35%{transform:translate(-4px,3px)}
  65%{transform:translate(3px,2px)}
  100%{transform:translate(0,0)}
}
@keyframes stat-drift-c{
  0%{transform:translate(0,0)}
  45%{transform:translate(3px,3px)}
  75%{transform:translate(-2px,-3px)}
  100%{transform:translate(0,0)}
}

.hero-stats > div{
  will-change:transform;
}

.hero-stats > div:nth-child(1){
  animation:stat-drift-a 14s ease-in-out infinite;
}
.hero-stats > div:nth-child(2){
  animation:stat-drift-b 16s ease-in-out infinite;
}
.hero-stats > div:nth-child(3){
  animation:stat-drift-c 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .hero-stats > div{animation:none !important}
}


/* v0.30.1 — hero seal first-paint correctness
   If theme is not explicitly light, treat as dark for logo legibility. */
html:not([data-theme="light"]) .hero-seal__img{
  filter:invert(1) brightness(1.10) contrast(1.05) drop-shadow(0 18px 32px rgba(0,0,0,.38));
  opacity:.90;
}
html[data-theme="light"] .hero-seal__img{
  opacity:.88;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.16));
}


/* Bricks examples: keep disclaimers small and non-distracting */
.example-note{
  margin-top:.6rem;
  font-size:.85rem;
  opacity:.72;
}


/* BIO MODAL */
.person-click{cursor:pointer}
.person-click:focus{outline:none; box-shadow:0 0 0 3px rgba(201,168,107,.25)}
.linklike{
  margin-top:.55rem;
  padding:0;
  background:transparent;
  border:0;
  color:var(--gold);
  font-weight:700;
  cursor:pointer;
  text-align:left;
}
.linklike:hover{text-decoration:underline}

.bio-modal{position:fixed; inset:0; z-index:9999}
.bio-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.bio-modal__panel{
  position:relative;
  width:min(760px,92vw);
  margin:clamp(18px,6vh,60px) auto 0;
  border-radius:20px;
  padding:22px 22px 18px;
  background:linear-gradient(180deg,var(--panel),var(--bg));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.bio-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-size:22px;
  cursor:pointer;
}
.bio-modal__close:hover{background:rgba(255,255,255,.08)}
.bio-modal__content{margin-top:10px; color:var(--muted); max-width:70ch}
.bio-modal__content p{margin:0 0 12px}
.bio-modal__content .bio-role{color:var(--ink); opacity:.92; font-weight:700; margin:8px 0 10px}

html[data-theme="light"] .bio-modal__panel{
  background:linear-gradient(180deg,#ffffff,#f6f7fb);
  border:1px solid rgba(15,18,32,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
html[data-theme="light"] .bio-modal__backdrop{background:rgba(15,18,32,.30)}


/* FOOTER LINKEDIN */
.footer-linkedin{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:10px;
  color:inherit;
  text-decoration:none;
  opacity:.85;
  font-weight:700;
}
.footer-linkedin:hover{
  opacity:1;
  color:var(--gold);
}
.icon-linkedin{
  width:18px;
  height:18px;
  fill:currentColor;
}


/* STAT ROTATOR (v0.32) */
.hero-card{position:relative}
.hero-stats{gap:12px}
.stat-slot{will-change:transform,opacity}
.stat-slot.is-out{opacity:0;transform:translateY(6px);transition:opacity 320ms ease, transform 320ms ease}
.stat-slot.is-in{opacity:1;transform:translateY(0);transition:opacity 420ms ease, transform 420ms cubic-bezier(.2,.8,.2,1)}
.stat-subline{
  margin-top:10px;
  padding:0 20px 18px;
  color:var(--muted);
  font-size:.92rem;
  opacity:.88;
}

/* Noticeable-but-premium motion */
@keyframes stat-drift{
  0%{transform:translate(0,0)}
  35%{transform:translate(4px,-2px)}
  70%{transform:translate(-3px,2px)}
  100%{transform:translate(0,0)}
}
.hero-card .hero-stats{animation:stat-drift 14s ease-in-out infinite}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-card .hero-stats{animation:none}
}


/* v0.32.1 — stat card breathing room */
.hero-card .hero-stats{
  padding:32px !important;
}
.hero-card .stat-subline{
  padding:0 32px 26px !important;
}
.hero-card{
  padding-bottom:10px;
}



/* v0.32.2 — stat padding (strong override) */
.hero-card #stat-rotator{
  padding:38px !important;
}
.hero-card .stat-subline{
  padding:0 38px 28px !important;
}

/* clickable seal */
.hero-seal-link{
  display:inline-flex;
  text-decoration:none;
}


/* v0.32.3 — stat card cleanup (remove legacy bottom-left block + increase inner spacing) */

/* Hide the legacy bottom area inside hero-card if present */
.hero-card .hero-stats + .stat-subline + *{
  display:none !important;
}

/* Extra breathing room so nothing kisses edges */
.hero-card #stat-rotator{
  padding:42px !important;
}
.hero-card .stat-subline{
  padding:0 42px 34px !important;
}


/* v0.32.3 — stat card padding (final) */
.hero-card #stat-rotator{
  padding:44px !important;
}
.hero-card .stat-subline{
  padding:0 44px 34px !important;
}


/* v0.33 — stat card rectangle + denser layout */
.hero-card{
  min-height:250px;
  border-radius:18px;
}
.hero-card #stat-rotator{
  padding:28px !important;
}
.hero-card .stat-subline{
  padding:0 28px 22px !important;
  font-size:.9rem;
}

/* 2x2 stat grid */
.hero-card .hero-stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  align-items:start;
}
.hero-card .stat{
  font-size:clamp(18px,2.4vw,28px);
}


/* v0.33.1 — animated stat-card grid (theme-aware, subtle) */

/* Make the hero-card background layers animate (only the grid layers move) */
@keyframes grid-drift{
  0%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
  50%{background-position:0 0, 0 0, 0 18px, 18px 0, 0 0}
  100%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
}

.hero-card{
  background-size:auto, auto, auto, auto, auto;
  animation:
    grid-drift 11s ease-in-out infinite;
}

/* Light theme: ensure the grid remains visible but not heavy */
html[data-theme="light"] .hero-card{
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(201,168,107,.10), transparent 60%),
    radial-gradient(80% 60% at 85% 20%, rgba(93,131,255,.08), transparent 65%),
    repeating-linear-gradient(0deg, rgba(15,18,32,.06) 0px, rgba(15,18,32,.06) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(15,18,32,.05) 0px, rgba(15,18,32,.05) 1px, transparent 1px, transparent 20px),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,246,250,.98));
}

/* Dark theme: keep architectural feel, slightly brighter grid */
html:not([data-theme="light"]) .hero-card{
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(201,168,107,.10), transparent 60%),
    radial-gradient(80% 60% at 85% 20%, rgba(93,131,255,.10), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 20px),
    linear-gradient(180deg, rgba(22,26,42,.94), rgba(15,18,32,.98));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-card{animation:none !important}
}