﻿
/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  TOKENS Â· brochure theme  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
:root{
  --navy-0:#0A1730;      /* page ground              */
  --navy-1:#101F3D;      /* alt sections             */
  --navy-2:#16294E;      /* cards                    */
  --navy-3:#1D3560;      /* raised surfaces          */
  --crimson:#B03040;     /* brochure red             */
  --crimson-2:#7E1F2E;   /* deep red                 */
  --gold:#F2B33D;        /* headline gold            */
  --orange:#EE7B24;      /* ribbon orange            */
  --white:#FFFFFF;
  --text:#C8D3E6;        /* body on navy             */
  --faint:#8FA0BE;       /* muted                    */
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.32);

  --disp:"DM Serif Display", Georgia, serif;
  --body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"Spline Sans Mono", "Courier New", monospace;
  --dev:"Tiro Devanagari Hindi", serif;

  --wrap:1160px;
  --r:14px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body); color:var(--text); background:var(--navy-0);
  font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 85% -100px, rgba(176,48,64,.28), transparent 60%),
    radial-gradient(900px 500px at -100px 30%, rgba(29,53,96,.5), transparent 60%);
  background-attachment:fixed;
}
/* brochure's geometric star lattice, very faint */
.pattern{ position:relative; }
.pattern::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M36 4 44 28 68 36 44 44 36 68 28 44 4 36 28 28Z'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3C/g%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--gold); color:var(--navy-0); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  TYPE  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.eyebrow{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.eyebrow::after{ content:""; height:1px; width:56px; background:var(--hair-2); }
h1,h2,h3{ font-family:var(--disp); font-weight:400; line-height:1.12; color:var(--white); }
h1{ font-size:clamp(2.5rem,5.6vw,4.1rem); letter-spacing:.01em; }
h2{ font-size:clamp(1.9rem,4vw,2.8rem); }
h3{ font-size:1.3rem; }
.hl{ color:var(--gold); }
.chip-word{
  display:inline-block;
  background:var(--navy-3);
  color:var(--gold);
  padding:.12em .28em .16em;
  border-radius:8px;
  line-height:1.05;
  vertical-align:baseline;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.section-head h1{ margin:18px 0 14px; line-height:1.28; }
.section-head .eyebrow{ margin-bottom:6px; }
.lead{ font-size:1.06rem; color:var(--text); max-width:60ch; }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  BUTTONS  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.btn{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem; padding:14px 26px; border-radius:10px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .18s; font-family:var(--body); }
.btn:hover{ transform:translateY(-1px); }
.btn svg{ width:17px; height:17px; flex:none; }
.btn-gold{ background:linear-gradient(180deg, #F7C25B, var(--gold)); color:#3A2404; }
.btn-line{ border-color:var(--hair-2); color:var(--white); background:rgba(255,255,255,.04); }
.btn-line:hover{ border-color:var(--gold); color:var(--gold); }
.btn-red{ background:linear-gradient(135deg, var(--crimson), var(--crimson-2)); color:#fff; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  NAV  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
header{ position:sticky; top:0; z-index:50; background:rgba(10,23,48,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg, var(--crimson), var(--crimson-2)); display:flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--disp); font-size:1rem; box-shadow:0 6px 16px -6px rgba(176,48,64,.6); }
.brand-name{ font-family:var(--disp); font-size:1.05rem; color:var(--white); }
.brand-name small{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:var(--faint); text-transform:uppercase; }
.nav-links{ display:flex; gap:24px; list-style:none; align-items:center; }
.nav-links a{ text-decoration:none; font-size:.9rem; font-weight:500; color:var(--text); padding:6px 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.nav-links a:hover{ color:var(--white); border-color:var(--gold); }
.nav-cta{ display:flex; gap:10px; align-items:center; }
.nav-social{ display:flex; gap:6px; }
.icon-btn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hair); border-radius:9px; color:var(--gold); transition:background .18s, border-color .18s; }
.icon-btn:hover{ background:var(--navy-2); border-color:var(--gold); }
.icon-btn svg{ width:16px; height:16px; }
.menu-toggle{ display:none; background:none; border:1px solid var(--hair); border-radius:9px; width:42px; height:42px; cursor:pointer; color:var(--gold); align-items:center; justify-content:center; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  HERO  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.hero{ position:relative; overflow:hidden; }
.hero-band{ position:absolute; inset:0 0 auto 0; height:100%; background:linear-gradient(118deg, rgba(126,31,46,.55) 0%, rgba(176,48,64,.25) 26%, transparent 55%); pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:76px 0 64px; }
.ribbon{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(180deg, #FF9440, var(--orange)); color:#3A1B02; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; padding:8px 14px; border-radius:6px; margin-bottom:20px; box-shadow:0 8px 18px -8px rgba(238,123,36,.7); }
.hero h1{ margin:6px 0 8px; }
.hero h1 .row2{ display:block; color:var(--gold); }
.hero h1 .row3{ display:block; }
.hero-quote{ font-family:var(--disp); font-style:italic; font-size:1.12rem; color:var(--text); border-left:3px solid var(--gold); padding-left:16px; margin:22px 0 30px; max-width:52ch; }
.hero-quote b{ color:var(--gold); font-weight:400; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.fact-row{ display:flex; flex-wrap:wrap; gap:10px 26px; border-top:1px solid var(--hair); padding-top:20px; }
.fact-row span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:8px; }
.fact-row span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* portrait card â€” brochure duotone frame */
.portrait{ position:relative; justify-self:center; width:min(380px,82vw); }
.portrait .frame{ position:relative; aspect-ratio:3/3.9; border-radius:18px; overflow:hidden; background:linear-gradient(160deg, #23406F 0%, var(--navy-1) 60%, #351B33 100%); border:1px solid var(--hair-2); box-shadow:0 34px 70px -30px rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; }
.portrait .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(176,48,64,.35), transparent 45%, rgba(29,53,96,.4)); pointer-events:none; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.ph{ text-align:center; color:#fff; padding:0 24px; position:relative; z-index:1; }
.ph .initials{ font-family:var(--disp); font-size:4rem; color:var(--gold); line-height:1; }
.ph .hint{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.75; margin-top:12px; line-height:1.7; }
.portrait .plate{ position:absolute; left:18px; right:18px; bottom:18px; background:rgba(10,23,48,.82); backdrop-filter:blur(6px); border:1px solid var(--hair); border-radius:12px; padding:12px 16px; text-align:center; z-index:2; }
.portrait .plate b{ font-family:var(--disp); font-weight:400; color:var(--white); font-size:1.05rem; letter-spacing:.02em; display:block; }
.portrait .plate span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.q-mark{ position:absolute; top:-26px; right:-10px; font-family:var(--disp); font-size:6rem; color:rgba(255,255,255,.12); line-height:1; user-select:none; }

/* auto photos: upload to images/ and they appear over the placeholder */
.frame{ position:relative; }
.frame img.auto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.portrait .frame::after, .shot .frame::after{ z-index:3; }
.portrait .plate{ z-index:4; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  STATS BAND  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.band{ background:linear-gradient(118deg, var(--crimson-2) 0%, var(--crimson) 38%, var(--navy-1) 100%); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.band-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:40px 0; }
.stat{ border-left:2px solid rgba(255,255,255,.25); padding-left:20px; }
.stat strong{ display:block; font-family:var(--disp); font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.1; color:var(--white); }
.stat span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#F3D9A8; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  SECTIONS  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.section{ padding:92px 0; }
.alt{ background:var(--navy-1); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.section-head{ max-width:720px; margin-bottom:50px; }
.section-head h2{ margin:16px 0 14px; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  ABOUT  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.about-grid{ display:grid; grid-template-columns:1fr .58fr; gap:56px; align-items:start; }
.about-copy p+p{ margin-top:16px; }
.about-copy .dev-quote{ font-family:var(--dev); color:var(--gold); font-size:1rem; margin-top:24px; padding-left:16px; border-left:2px solid var(--crimson); }
.side-card{ background:var(--navy-2); border:1px solid var(--hair); border-radius:var(--r); padding:28px; }
.side-card h3{ font-family:var(--body); font-weight:700; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.side-card .row{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair); }
.side-card .row:last-child{ border-bottom:none; }
.side-card dt{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding-top:3px; }
.side-card dd{ font-size:.94rem; font-weight:500; color:var(--white); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  POSITIONS  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.feature-card{ position:relative; overflow:hidden; background:linear-gradient(118deg, var(--crimson-2), var(--navy-2) 55%); border:1px solid var(--hair-2); border-radius:var(--r); padding:36px 34px; margin-bottom:22px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.feature-card h3{ font-size:clamp(1.5rem,2.6vw,2rem); margin:8px 0 6px; }
.feature-card .org{ font-family:var(--disp); font-style:italic; color:var(--gold); font-size:1.1rem; }
.feature-card p{ margin-top:10px; max-width:56ch; }
.feature-card .flink{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--white); text-decoration:none; border:1px solid var(--hair-2); border-radius:9px; padding:12px 18px; transition:border-color .18s, color .18s; white-space:nowrap; }
.feature-card .flink:hover{ border-color:var(--gold); color:var(--gold); }
.pos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pos-card{ background:var(--navy-2); border:1px solid var(--hair); border-radius:var(--r); padding:24px 22px; display:flex; flex-direction:column; gap:9px; transition:transform .2s, border-color .2s; }
.pos-card:hover{ transform:translateY(-4px); border-color:var(--hair-2); }
.sector-tag{ align-self:flex-start; font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; padding:6px 10px; border-radius:6px; border:1px solid var(--hair); }
.sector-tag.edu{ color:var(--gold); border-color:rgba(242,179,61,.4); }
.sector-tag.health{ color:#FF8E9A; border-color:rgba(255,142,154,.4); }
.sector-tag.sport{ color:#7FD1FF; border-color:rgba(127,209,255,.35); }
.sector-tag.comm{ color:#9BE8B8; border-color:rgba(155,232,184,.35); }
.pos-card h3{ font-family:var(--body); font-weight:700; font-size:1rem; line-height:1.4; color:var(--white); }
.pos-card .org{ font-family:var(--disp); font-style:italic; font-size:.98rem; color:var(--gold); }
.pos-card p{ font-size:.88rem; color:var(--faint); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  GROUP GRID  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.org-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.org-card{ background:var(--navy-2); border:1px solid var(--hair); border-radius:var(--r); padding:24px 22px; display:flex; flex-direction:column; gap:8px; }
.org-card h3{ font-family:var(--body); font-weight:700; font-size:.98rem; color:var(--white); line-height:1.4; }
.org-card .prog{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.org-card .nums{ margin-top:auto; padding-top:14px; border-top:1px solid var(--hair); display:flex; gap:18px; }
.org-card .nums b{ font-family:var(--disp); font-weight:400; font-size:1.25rem; color:var(--gold); display:block; line-height:1.1; }
.org-card .nums span{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  IMPACT  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.impact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:26px; }
.impact-card{ background:linear-gradient(160deg, var(--navy-3), var(--navy-2)); border:1px solid var(--hair); border-radius:var(--r); padding:28px 24px; }
.impact-card strong{ font-family:var(--disp); font-size:2.1rem; color:var(--gold); display:block; line-height:1.1; }
.impact-card span{ font-size:.92rem; color:var(--text); display:block; margin-top:8px; }
.cause-row{ display:flex; flex-wrap:wrap; gap:9px; }
.cause{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text); border:1px solid var(--hair); border-radius:999px; padding:9px 15px; }
.cause::before{ content:"â—† "; color:var(--gold); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  MOMENTS  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.shot .frame{ cursor:zoom-in; }
.shot:hover .frame img.auto{ transform:scale(1.05); }
.shot .frame img.auto{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.shot{ display:flex; flex-direction:column; gap:10px; }
.shot .frame{ position:relative; aspect-ratio:4/4.6; border-radius:14px; overflow:hidden; border:1px solid var(--hair); background:linear-gradient(165deg, #29477B 0%, var(--navy-1) 55%, #47203C 100%); display:flex; align-items:center; justify-content:center; }
.shot .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(205deg, rgba(176,48,64,.3), transparent 50%, rgba(29,53,96,.35)); pointer-events:none; }
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot figcaption{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); line-height:1.6; }
.shot figcaption b{ color:var(--white); font-weight:500; display:block; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  PRESS â€” brochure bracket rows  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.awards{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:46px; }
.award{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--hair-2); background:rgba(255,255,255,.03); border-radius:999px; padding:11px 16px; color:var(--white); }
.award::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }

.press-list{ display:grid; gap:16px; }
.news-row{
  position:relative; display:grid; grid-template-columns:54px 92px 1fr auto; gap:18px; align-items:center;
  border:1.5px solid var(--hair-2); border-radius:16px; padding:18px 22px;
  text-decoration:none; transition:border-color .18s, background .18s;
  background:rgba(255,255,255,.02);
}
/* gold corner brackets, as in the brochure */
.news-row::before, .news-row::after{
  content:""; position:absolute; left:-2px; width:5px; height:26px; background:var(--gold); border-radius:4px;
}
.news-row::before{ top:-2px; }
.news-row::after{ bottom:-2px; }
.news-row:hover{ border-color:var(--gold); background:rgba(255,255,255,.05); }
.logo-badge{ position:relative; width:48px; height:48px; border-radius:10px; background:#FFFFFF; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.logo-badge img{ width:30px; height:30px; object-fit:contain; position:relative; z-index:1; }
.logo-badge .fb{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:500; color:var(--navy-0); background:#fff; }
.news-date{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.news-body .pub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:4px; }
.news-body h3{ font-family:var(--disp); font-weight:400; font-size:1.08rem; line-height:1.35; color:var(--white); transition:color .15s; }
.news-row:hover .news-body h3{ color:var(--gold); }
.news-go{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); white-space:nowrap; transition:transform .18s; }
.news-row:hover .news-go{ transform:translateX(5px); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  VOICE  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.voice{ position:relative; overflow:hidden; background:linear-gradient(118deg, var(--navy-1) 40%, var(--crimson-2) 140%); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.voice .big-q{ position:absolute; top:8px; left:12px; font-family:var(--disp); font-size:9rem; color:rgba(255,255,255,.07); line-height:1; user-select:none; }
.voice-inner{ position:relative; z-index:1; max-width:840px; }
.voice blockquote{ font-family:var(--disp); font-size:clamp(1.7rem,3.5vw,2.6rem); line-height:1.3; margin:26px 0 16px; color:var(--white); }
.voice blockquote em{ color:var(--gold); }
.voice figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.voice .lead{ margin:24px 0 30px; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  CONNECT  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.connect-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.social-card{ display:flex; flex-direction:column; gap:13px; background:var(--navy-2); border:1px solid var(--hair); border-radius:var(--r); padding:30px; text-decoration:none; transition:transform .2s, border-color .2s; }
.social-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.social-card .top{ display:flex; align-items:center; justify-content:space-between; }
.badge{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; }
.badge.li{ background:#0A66C2; }
.badge.ig{ background:radial-gradient(circle at 30% 110%, #FDB040 0%, #F7284A 45%, #B92FA8 70%, #4F5BD5 100%); }
.badge svg{ width:22px; height:22px; }
.social-card .go{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.social-card h3{ font-family:var(--body); font-weight:700; font-size:1.06rem; color:var(--white); }
.social-card p{ font-size:.92rem; color:var(--faint); }
.social-card .handle{ font-family:var(--mono); font-size:11.5px; color:var(--gold); }
.mini-social{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.mini-social a{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--hair); border-radius:10px; padding:10px 16px; color:var(--text); transition:border-color .18s, color .18s; }
.mini-social a:hover{ border-color:var(--gold); color:var(--white); }
.mini-social svg{ width:14px; height:14px; }
.reach{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
.reach-card{ background:var(--navy-2); border:1px solid var(--hair); border-radius:var(--r); padding:32px; }
.reach-card h3{ font-family:var(--body); font-weight:700; font-size:1.08rem; color:var(--white); margin-bottom:8px; }
.reach-card p{ font-size:.92rem; color:var(--faint); margin-bottom:18px; }
.field-row{ display:flex; gap:10px; }
.field-row input{ flex:1; font-family:var(--body); font-size:.95rem; padding:13px 16px; border:1px solid var(--hair); border-radius:10px; background:var(--navy-1); color:var(--white); min-width:0; }
.field-row input::placeholder{ color:var(--faint); }
.field-row input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.form-note{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--faint); margin-top:12px; }
.contact-lines{ display:grid; gap:12px; }
.contact-lines a, .contact-lines span{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--white); font-size:.95rem; }
.contact-lines .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); min-width:64px; }
.contact-lines a:hover{ color:var(--gold); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  FOOTER  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
footer{ background:#081226; border-top:1px solid var(--hair); }
.foot-top{ display:grid; grid-template-columns:1.2fr .8fr; gap:48px; padding:60px 0 42px; border-bottom:1px solid var(--hair); }
.foot-brand{ display:flex; gap:16px; align-items:flex-start; }
.foot-brand h3{ font-family:var(--disp); color:var(--white); font-size:1.4rem; }
.foot-brand p{ font-size:.9rem; max-width:40ch; margin-top:8px; color:var(--faint); }
.foot-cols{ display:flex; gap:60px; justify-content:flex-end; }
.foot-cols h4{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:500; }
.foot-cols ul{ list-style:none; display:grid; gap:10px; }
.foot-cols a{ text-decoration:none; font-size:.92rem; color:var(--faint); transition:color .15s; }
.foot-cols a:hover{ color:var(--white); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:24px 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  PORTFOLIO FILTER  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.filter-btn{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--hair); border-radius:999px; padding:11px 18px; cursor:pointer; transition:border-color .18s, color .18s, background .18s, transform .18s; }
.filter-btn:hover{ border-color:var(--hair-2); color:var(--white); transform:translateY(-1px); }
.filter-btn.active{ background:linear-gradient(180deg,#F7C25B,var(--gold)); color:#3A2404; border-color:transparent; }
.filter-btn .fcount{ font-weight:500; opacity:.65; margin-left:4px; }
.pf-item.hide{ display:none; }
.pos-card .nums{ margin-top:auto; padding-top:12px; border-top:1px solid var(--hair); display:flex; gap:18px; }
.pos-card .nums b{ font-family:var(--disp); font-weight:400; font-size:1.2rem; color:var(--gold); display:block; line-height:1.1; }
.pos-card .nums span{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
@keyframes popIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  MARQUEE  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.marquee{ overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:16px 0; margin-bottom:42px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; align-items:center; gap:34px; width:max-content; animation:scrollX 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--disp); font-size:1.12rem; color:rgba(255,255,255,.85); white-space:nowrap; }
.marquee-track i{ color:var(--gold); font-style:normal; font-size:.65rem; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  SCROLL PROGRESS  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:100; background:linear-gradient(90deg, var(--gold), var(--orange)); box-shadow:0 0 12px rgba(242,179,61,.6); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  HERO ENTRANCE + FLOAT + SHINE  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero .ribbon{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both; }
.hero .eyebrow{ animation:rise .7s cubic-bezier(.2,.7,.3,1) .08s both; }
.hero h1{ animation:rise .7s cubic-bezier(.2,.7,.3,1) .16s both; }
.hero-quote{ animation:rise .7s cubic-bezier(.2,.7,.3,1) .24s both; }
.hero-ctas{ animation:rise .7s cubic-bezier(.2,.7,.3,1) .32s both; }
.hero .fact-row{ animation:rise .7s cubic-bezier(.2,.7,.3,1) .4s both; }
.portrait{ animation:rise .8s cubic-bezier(.2,.7,.3,1) .2s both; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.portrait .frame{ animation:floaty 6s ease-in-out infinite; }
.hero h1 .row2{ background:linear-gradient(90deg,#F2B33D 20%,#FFE7AE 40%,#F2B33D 60%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 5s linear infinite; }
@keyframes shine{ to{ background-position:-200% 0; } }

@media (prefers-reduced-motion: reduce){
  .marquee-track, .portrait, .portrait .frame, .hero .ribbon, .hero .eyebrow, .hero h1, .hero-quote, .hero-ctas, .hero .fact-row, .hero h1 .row2{ animation:none !important; }
  .filter-btn{ transition:none; }
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  LIGHTBOX  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(6,14,30,.94); backdrop-filter:blur(6px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:5vh 5vw; }
.lightbox.open{ display:flex; animation:fadeIn .25s ease both; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox img{ max-width:100%; max-height:78vh; border-radius:12px; border:1px solid var(--hair-2); box-shadow:0 30px 70px -20px rgba(0,0,0,.8); }
.lightbox p{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-align:center; }
.lb-close{ position:absolute; top:18px; right:24px; width:44px; height:44px; border-radius:50%; border:1px solid var(--hair-2); background:rgba(255,255,255,.06); color:#fff; font-size:26px; line-height:1; cursor:pointer; transition:border-color .18s, color .18s; }
.lb-close:hover{ border-color:var(--gold); color:var(--gold); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  MOTION  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.reveal{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .pos-card, .social-card, .news-go{ transition:none; }
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€  RESPONSIVE  â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .portrait{ order:-1; }
  .band-inner{ grid-template-columns:1fr 1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .pos-grid{ grid-template-columns:1fr 1fr; }
  .org-grid{ grid-template-columns:1fr 1fr; }
  .impact-grid{ grid-template-columns:1fr; }
  .shots{ grid-template-columns:1fr 1fr; }
  .connect-grid, .reach{ grid-template-columns:1fr; }
  .feature-card{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .foot-cols{ justify-content:flex-start; }
}
@media (max-width:720px){
  .nav-links{ position:fixed; inset:74px 0 auto 0; background:var(--navy-0); flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--hair); display:none; padding:10px 24px 20px; }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:14px 0; border-bottom:1px solid var(--hair); width:100%; }
  .menu-toggle{ display:flex; }
  .nav-social{ display:none; }
  .section{ padding:68px 0; }
  .band-inner{ grid-template-columns:1fr; }
  .pos-grid, .org-grid, .shots{ grid-template-columns:1fr; }
  .news-row{ grid-template-columns:44px 1fr; grid-template-rows:auto auto; gap:10px 14px; padding:16px; }
  .news-date{ grid-column:2; order:-1; }
  .news-body{ grid-column:1 / -1; }
  .news-go{ display:none; }
  .logo-badge{ width:44px; height:44px; }
}

