/* ============================================================
   ASAYA : Shared stylesheet
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --navy:   #1a2a4a;
  --deep:   #0a1220;
  --gold:   #c8a84b;
  --gold-l: #e2c97e;
  --white:  #ffffff;
  --off:    #f4f3f0;
  --text:   #2c2c2c;
  --muted:  #6b7280;
}

/* ---------- RESET ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Montserrat', sans-serif;
  background:var(--white);
  color:var(--text);
  overflow-x:hidden;
}

/* ============================================================
   NAVIGATION (desktop)
   ============================================================ */
nav {
  position:absolute; top:0; left:0; right:0; z-index:9999;
  display:flex; align-items:center; justify-content:flex-end;
  padding:28px 60px; gap:40px;
  background:linear-gradient(to bottom, rgba(8,14,28,0.65) 0%, transparent 100%);
}
nav a {
  color:#fff; text-decoration:none; font-size:11px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; transition:color .25s;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
nav a:hover, nav a[aria-current="page"] { color:var(--gold-l); }
.nav-links { display:flex; flex-direction:row; gap:40px; }

/* ============================================================
   MOBILE MENU (hamburger + overlay)
   ============================================================ */
.mobile-hamburger {
  position:fixed; top:16px; right:16px; z-index:99999;
  width:48px; height:48px;
  background:rgba(8,14,28,0.55);
  border:none; border-radius:6px;
  cursor:pointer;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px;
}
.mobile-hamburger span {
  display:block; width:24px; height:2px; background:#fff;
}
.mobile-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(8,14,28,0.97);
  z-index:999999;
  flex-direction:column; align-items:center; justify-content:center;
  gap:32px;
}
.mobile-overlay.open { display:flex; }
.mobile-overlay a {
  color:#fff; font-size:18px; text-decoration:none;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Montserrat', sans-serif;
}
.mobile-overlay a[aria-current="page"] { color:var(--gold-l); }
.mobile-close {
  position:absolute; top:20px; right:24px;
  background:none; border:none;
  color:#fff; font-size:36px;
  cursor:pointer; line-height:1;
}

@media (max-width: 768px) {
  .mobile-hamburger { display:flex !important; }
  nav .nav-links { display:none !important; }
  nav {
    position:fixed !important;
    padding:14px 20px !important;
    background:transparent !important;
    transition:background .3s ease, transform .3s ease;
  }
  nav.nav-hidden { transform:translateY(-100%) !important; }
  nav.nav-scrolled { background:rgba(8,14,28,0.97) !important; }
}
@media (min-width: 769px) {
  .mobile-hamburger { display:none !important; }
  .mobile-overlay { display:none !important; }
}

/* ============================================================
   HERO (used on every page)
   ============================================================ */
.hero {
  width:100%; height:100vh; min-height:600px;
  position:relative;
}
.hero-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:brightness(1.15) contrast(1.05) saturate(1.1);
}
.hero-logo-link {
  position:absolute; top:20px; left:48px; z-index:102;
  display:block; width:120px;
}
.hero-logo-link img {
  width:100%; height:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}
.hero-content {
  position:absolute; z-index:10;
  top:57%; left:50%;
  transform:translate(-50%, -50%);
  width:100%; max-width:900px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:0; text-align:center;
}
.hero-title {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(36px, 4.5vw, 60px); font-weight:700;
  color:#fff; line-height:1.1; margin-bottom:28px;
  text-shadow:0 2px 16px rgba(0,0,0,0.5);
  letter-spacing:-0.5px;
  width:100%; text-align:center; display:block;
}
.hero-divider {
  width:640px; max-width:90%; height:3px;
  background:rgba(200,168,75,0.55);
  margin:0 auto 28px;
}
.hero-sub {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(14px, 1.4vw, 20px); font-weight:300;
  color:rgba(255,255,255,0.9);
  letter-spacing:1.5px;
  text-shadow:0 1px 8px rgba(0,0,0,0.35);
  max-width:700px; white-space:normal;
}
.hero-pipe {
  display:inline-block; width:2px; height:22px;
  background:rgba(200,168,75,0.85);
  margin:0 24px; vertical-align:middle;
  position:relative; top:-1px;
}
.hero-body {
  font-family:'Montserrat', sans-serif;
  font-size:15px; font-weight:300;
  color:rgba(255,255,255,0.72);
  letter-spacing:0.3px; line-height:1.7;
  margin-top:20px; max-width:640px;
}

/* ============================================================
   COMMON SECTION TYPOGRAPHY HELPERS
   ============================================================ */
.gold-sep { width:40px; height:2px; background:var(--gold); margin:0 auto 32px; }
.section-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold);
}
.section-title {
  font-family:'Cormorant Garamond', serif; font-size:36px; font-weight:600;
  color:var(--navy);
}

/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro {
  background:var(--white); padding:80px 60px;
  display:flex; justify-content:center;
  border-bottom:1px solid rgba(26,42,74,0.08);
}
.intro-inner { max-width:820px; text-align:center; }
.intro-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:20px;
}
.intro-text {
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:300;
  line-height:1.85; color:var(--navy);
}
.intro-text p { margin-bottom:22px; }
.intro-text p:last-child { margin-bottom:0; }
.intro-pullquote {
  font-family:'Cormorant Garamond', serif;
  font-size:26px; font-style:italic; font-weight:400;
  color:var(--navy); line-height:1.5;
  margin:36px auto; padding:0 32px;
  border-left:2px solid var(--gold);
  text-align:left; max-width:680px;
}

/* ============================================================
   SERVICES / CARD GRID (used on services pages + about)
   ============================================================ */
.services { background:var(--off); padding:90px 60px; }
.services-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold);
  text-align:center; margin-bottom:12px;
}
.services-title {
  font-family:'Cormorant Garamond', serif; font-size:36px; font-weight:600;
  color:var(--navy); text-align:center; margin-bottom:56px;
}
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; max-width:1100px; margin:0 auto;
}
.services-grid.cols-4 {
  grid-template-columns:repeat(4,1fr);
  gap:20px; max-width:1240px;
}
.scard {
  position:relative; overflow:hidden;
  border-radius:3px; height:380px; cursor:default;
}
.services-grid.cols-4 .scard { height:420px; }
.scard-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .6s ease;
  filter:brightness(0.75) saturate(0.9);
}
.scard:hover .scard-bg { transform:scale(1.04); filter:brightness(0.65) saturate(0.9); }
.scard-content {
  position:absolute; inset:0; padding:36px 32px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top, rgba(8,14,30,0.95) 0%, rgba(8,14,30,0.55) 45%, rgba(8,14,30,0.2) 100%);
}
.scard-icon {
  width:36px; height:2px; background:var(--gold);
  margin-bottom:16px; transition:width .3s ease;
}
.scard:hover .scard-icon { width:56px; }
.scard-title {
  font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:600;
  color:var(--white); line-height:1.2; margin-bottom:14px;
  min-height:calc(26px * 1.2 * 2); /* reserve 2 lines of space for alignment */
  display:flex; align-items:flex-end;
}
.scard-text {
  font-size:11.5px; font-weight:300; color:rgba(255,255,255,0.72);
  line-height:1.7; letter-spacing:0.2px;
}
/* Variant: minimal card (no background image) */
.scard-minimal .scard-bg {
  background-image:none;
  background:linear-gradient(135deg, rgba(26,42,74,0.95) 0%, rgba(10,18,32,0.92) 100%);
  filter:none;
}
.scard-minimal:hover .scard-bg { filter:none; }
.scard-minimal .scard-icon { background:var(--gold-l); }

/* ============================================================
   2-COL CARD GRID (home page)
   ============================================================ */
.card-grid-2 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:28px; max-width:1100px; margin:0 auto;
}
.card {
  position:relative; overflow:hidden;
  border-radius:4px; height:420px; cursor:pointer;
}
.card-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .6s ease;
}
.card:hover .card-bg { transform:scale(1.04); }
.card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,18,40,0.92) 0%, rgba(10,18,40,0.45) 55%, rgba(10,18,40,0.15) 100%);
  transition:background .4s ease;
}
.card:hover .card-overlay {
  background:linear-gradient(to top, rgba(10,18,40,0.95) 0%, rgba(10,18,40,0.55) 55%, rgba(10,18,40,0.25) 100%);
}
.card-content { position:absolute; bottom:0; left:0; right:0; padding:40px 44px; }
.card-label {
  display:inline-block; font-size:13px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.card-title {
  font-family:'Cormorant Garamond', serif; font-size:36px; font-weight:600;
  color:var(--white); line-height:1.15; margin-bottom:12px;
}
.card-sub {
  font-size:12px; font-weight:300; color:rgba(255,255,255,0.72);
  line-height:1.6; letter-spacing:0.3px; margin-bottom:24px;
}
.card-cta {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold-l); text-decoration:none;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.card:hover .card-cta { opacity:1; transform:translateY(0); }
.card-cta::after { content:'→'; font-size:14px; }

/* ============================================================
   ABOUT (home about section + page)
   ============================================================ */
.about { background:var(--off); padding:90px 60px; text-align:center; }
.about-label {
  font-size:13px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:20px;
}
.about-text {
  font-family:'Cormorant Garamond', serif; font-size:24px; font-weight:300;
  line-height:1.75; color:var(--navy); max-width:780px; margin:0 auto;
}

/* ============================================================
   WHY / CONVICTIONS (numbered items)
   ============================================================ */
.why { background:var(--white); padding:90px 60px; }
.why-inner { max-width:1100px; margin:0 auto; }
.why-header { text-align:center; margin-bottom:64px; }
.why-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.why-title {
  font-family:'Cormorant Garamond', serif; font-size:36px;
  font-weight:600; color:var(--navy);
}
.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
}
.why-grid.cols-2 {
  grid-template-columns:repeat(2,1fr);
  max-width:880px; margin:0 auto;
}
.why-item { border-top:2px solid var(--gold); padding-top:28px; }
.why-num {
  font-family:'Cormorant Garamond', serif; font-size:48px;
  font-weight:300; color:rgba(26,42,74,0.28);
  line-height:1; margin-bottom:16px;
}
.why-item-title {
  font-size:13px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--navy); margin-bottom:14px;
}
.why-item-text {
  font-size:13px; font-weight:300; color:var(--muted);
  line-height:1.8;
}

/* ============================================================
   FOUNDER (about page)
   ============================================================ */
.founder { background:var(--off); padding:100px 60px; }
.founder-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:320px 1fr;
  gap:64px; align-items:start;
}
.founder-photo-wrap { position:relative; }
.founder-photo-wrap picture {
  display:block;
  width:100%;
}
.founder-photo-img {
  display:block;
  width:100%; height:auto;
  aspect-ratio:4/5;
  object-fit:cover; object-position:center top;
  border-radius:3px;
  border:1px solid rgba(26,42,74,0.08);
}
.founder-photo-wrap::before {
  content:""; position:absolute;
  top:12px; left:12px; right:-12px; bottom:-12px;
  border:1px solid var(--gold); border-radius:3px;
  z-index:-1; opacity:0.6;
}
/* Legacy placeholder styling (kept for backwards compatibility) */
.founder-photo {
  width:100%; aspect-ratio:4/5;
  background:linear-gradient(135deg, rgba(26,42,74,0.08) 0%, rgba(200,168,75,0.12) 100%);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(26,42,74,0.35);
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  font-weight:600;
  border:1px solid rgba(26,42,74,0.08);
}
.founder-content .founder-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.founder-name {
  font-family:'Cormorant Garamond', serif; font-size:42px; font-weight:600;
  color:var(--navy); line-height:1.1; margin-bottom:6px;
}
.founder-role {
  font-size:12px; font-weight:500; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin-bottom:28px;
}
.founder-gold-bar { width:48px; height:2px; background:var(--gold); margin-bottom:28px; }
.founder-bio p {
  font-size:14px; font-weight:300; color:var(--text);
  line-height:1.9; margin-bottom:18px;
}
.founder-bio p:last-child { margin-bottom:0; }

/* ============================================================
   CREDENTIALS (about page)
   ============================================================ */
.credentials { background:var(--white); padding:90px 60px; }
.credentials-inner { max-width:640px; margin:0 auto; }
.cred-block-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.cred-block-title {
  font-family:'Cormorant Garamond', serif; font-size:28px; font-weight:600;
  color:var(--navy); margin-bottom:32px;
}
.cred-list { list-style:none; padding:0; margin:0; }
.cred-list li {
  padding:18px 0; border-bottom:1px solid rgba(26,42,74,0.08);
  font-size:13px; font-weight:400; color:var(--text);
  line-height:1.6;
}
.cred-list li:last-child { border-bottom:none; }
.cred-list .cred-role {
  font-weight:600; color:var(--navy); display:block; margin-bottom:4px;
  letter-spacing:0.2px;
}
.cred-list .cred-meta {
  font-size:12px; font-weight:300; color:var(--muted);
  letter-spacing:0.3px;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background:linear-gradient(135deg, var(--navy) 0%, var(--deep) 100%);
  padding:100px 60px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-glow {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(200,168,75,0.10) 0%, transparent 60%);
  pointer-events:none;
}
.cta-title {
  font-family:'Cormorant Garamond', serif; font-size:36px; font-weight:600;
  color:var(--white); margin-bottom:18px; position:relative;
}
.cta-sub {
  font-size:14px; font-weight:300;
  color:rgba(255,255,255,0.7); margin-bottom:36px;
  letter-spacing:0.5px; position:relative;
}
.cta-btn {
  display:inline-block; padding:16px 44px;
  border:1.5px solid var(--gold);
  color:var(--gold); text-decoration:none;
  font-size:11px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase;
  transition:all .3s ease; position:relative;
}
.cta-btn:hover {
  background:var(--gold); color:var(--navy);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background:linear-gradient(135deg, var(--navy) 0%, var(--deep) 100%);
  padding:60px 60px 40px; position:relative; overflow:hidden;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
}
footer::after {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:600px; height:200px;
  background:radial-gradient(ellipse, rgba(200,168,75,0.10) 0%, transparent 70%);
  pointer-events:none;
}
.footer-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto;
  gap:40px; align-items:start;
}
.footer-brand {
  font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:600;
  color:var(--white); letter-spacing:2px; margin-bottom:6px;
}
.footer-tagline {
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px;
}
.footer-info {
  font-size:11px; font-weight:300; color:rgba(255,255,255,0.7); line-height:1.9;
}
.footer-info a { color:rgba(255,255,255,0.7); text-decoration:none; transition:color .2s; }
.footer-info a:hover { color:var(--gold-l); }
.footer-links {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:12px; padding-top:4px;
}
.footer-links a {
  font-size:10px; font-weight:500; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,0.65);
  text-decoration:none; transition:color .2s;
}
.footer-links a:hover { color:var(--gold-l); }
.footer-bottom {
  max-width:1100px; margin:40px auto 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.07);
  font-size:10px; font-weight:300; color:rgba(255,255,255,0.5);
  letter-spacing:0.5px;
}

/* ============================================================
   WHO WE CONNECT (business development page : tag pills)
   ============================================================ */
.who { background:var(--off); padding:90px 60px; text-align:center; }
.who-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.who-title {
  font-family:'Cormorant Garamond', serif; font-size:36px; font-weight:600;
  color:var(--navy); margin-bottom:56px;
}
.who-grid {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:16px; max-width:900px; margin:0 auto;
}
.who-tag {
  border:1px solid var(--gold); color:var(--navy);
  padding:14px 32px; font-size:12px; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase;
  transition:background .3s ease, color .3s ease; cursor:default;
}
.who-tag:hover { background:var(--gold); color:var(--white); }

/* ============================================================
   CONTACT SECTION (form)
   ============================================================ */
.contact-section {
  background:var(--white); padding:90px 60px;
  display:flex; justify-content:center;
}
.contact-inner {
  width:100%; max-width:680px;
}
.contact-intro {
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:300;
  line-height:1.7; color:var(--navy); text-align:center; margin-bottom:48px;
}
.contact-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold);
  text-align:center; display:block; margin-bottom:20px;
}
.direct-contact {
  display:flex; justify-content:center; gap:48px;
  padding:24px 0; margin-bottom:40px;
  border-top:1px solid rgba(26,42,74,0.08);
  border-bottom:1px solid rgba(26,42,74,0.08);
}
.direct-contact-item { text-align:center; }
.direct-contact-label {
  display:block; font-size:11px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.direct-contact-item a {
  font-size:14px; font-weight:500; color:var(--navy);
  text-decoration:none; transition:color .25s;
}
.direct-contact-item a:hover { color:var(--gold); }
.form { display:flex; flex-direction:column; gap:24px; }
.form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.form-group { display:flex; flex-direction:column; }
.form-group label {
  font-size:11px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--navy); margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family:'Montserrat', sans-serif; font-size:14px; font-weight:400;
  padding:14px 16px; border:1px solid rgba(26,42,74,0.15);
  border-radius:2px; background:var(--white); color:var(--text);
  transition:border-color .25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--gold);
}
.form-group textarea { resize:vertical; min-height:140px; }
.form-honeypot {
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}
.form-submit {
  align-self:flex-start; margin-top:8px;
  padding:16px 44px;
  border:1.5px solid var(--gold);
  background:transparent; color:var(--navy);
  font-family:'Montserrat', sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase;
  cursor:pointer; transition:all .3s ease;
}
.form-submit:hover {
  background:var(--gold); color:var(--white);
}

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.privacy { background:var(--white); padding:90px 60px; }
.privacy-inner { max-width:820px; margin:0 auto; }
.privacy-intro {
  font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:300;
  line-height:1.75; color:var(--navy);
  margin-bottom:48px; padding-bottom:32px;
  border-bottom:1px solid rgba(26,42,74,0.08);
}
.privacy h2 {
  font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:600;
  color:var(--navy); margin:40px 0 16px;
}
.privacy h2:first-of-type { margin-top:0; }
.privacy p, .privacy li {
  font-size:14px; font-weight:400; color:var(--text);
  line-height:1.85; margin-bottom:14px;
}
.privacy ul { padding-left:20px; margin-bottom:20px; }

/* ============================================================
   ALIAS: .how is identical to .why (legacy support)
   ============================================================ */
.how { background:var(--white); padding:90px 60px; }
.how-inner { max-width:1100px; margin:0 auto; }
.how-header { text-align:center; margin-bottom:64px; }
.how-label {
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.how-title {
  font-family:'Cormorant Garamond', serif; font-size:36px;
  font-weight:600; color:var(--navy);
}
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.how-item { border-top:2px solid var(--gold); padding-top:28px; }
.how-num {
  font-family:'Cormorant Garamond', serif; font-size:48px;
  font-weight:300; color:rgba(26,42,74,0.28);
  line-height:1; margin-bottom:16px;
}
.how-item-title {
  font-size:13px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--navy); margin-bottom:14px;
}
.how-item-text {
  font-size:13px; font-weight:300; color:var(--muted);
  line-height:1.8;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim { opacity:0; animation:fadeUp .8s ease forwards; }
.d1 { animation-delay:.1s; }
.d2 { animation-delay:.3s; }
.d3 { animation-delay:.5s; }
.d4 { animation-delay:.7s; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .anim { opacity:1 !important; }
}

/* ============================================================
   FOCUS STATES (accessibility)
   ============================================================ */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ============================================================
   RESPONSIVE : TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  nav { padding:20px 30px; gap:24px; }
  .services-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .services-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .scard, .services-grid.cols-4 .scard { height:340px; }
  .why-grid, .how-grid { grid-template-columns:repeat(2,1fr); gap:32px; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-links { align-items:flex-start; }
  .founder-inner { grid-template-columns:280px 1fr; gap:48px; }
}

/* ============================================================
   RESPONSIVE : MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  nav { padding:16px 20px; gap:16px; }
  nav a { font-size:9px; letter-spacing:1.5px; }

  .hero-title { font-size:32px !important; }
  .hero-sub { font-size:14px !important; letter-spacing:0.5px; }
  .hero-divider { width:80% !important; }

  .intro, .services, .why, .how, .who, .about, .founder, .credentials, .contact-section, .privacy { padding:60px 24px; }
  .intro-text { font-size:18px; }
  .intro-pullquote { font-size:20px; padding:0 20px; margin:28px auto; }

  .card-grid-2, .services-grid, .services-grid.cols-4 { grid-template-columns:1fr; }
  .scard, .services-grid.cols-4 .scard, .card { height:300px; }
  .scard-title { min-height:auto; display:block; }
  .services-title, .why-title, .how-title, .who-title { font-size:28px; }

  .why-grid, .why-grid.cols-2, .how-grid { grid-template-columns:1fr; gap:32px; }

  .who-grid { gap:12px; }
  .who-tag { padding:10px 20px; font-size:11px; }

  .form-row { grid-template-columns:1fr; }

  .founder-inner { grid-template-columns:1fr; gap:40px; }
  .founder-photo-wrap { max-width:280px; margin:0 auto; }
  .founder-name { font-size:32px; }

  .footer-inner { grid-template-columns:1fr; gap:32px; }
  .footer-links { align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:16px; }
  footer { padding:40px 24px 28px; }

  .cta-section { padding:70px 24px; }
  .cta-title { font-size:28px; }
}

@media (max-width: 480px) {
  .hero-title { font-size:26px !important; }
  .hero-sub { font-size:13px !important; }
  .intro-text, .about-text, .contact-intro, .privacy-intro { font-size:17px; }
  .scard-title { font-size:22px; }
  .founder-name { font-size:28px; }
}