/* ============================================
   FAMA AGENCY — Stylesheet v4
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,900;1,400;1,600&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  --olive:        #636b2f;
  --olive-light:  #a8b05a;
  --olive-deep:   #2c2f1a;
  --olive-mid:    #4a5022;
  --olive-pale:   #c8cf8a;
  --cream:        #ede7e2;
  --cream-dark:   #ddd5cc;
  --off-white:    #f5f1ed;
  --warm-white:   #faf7f3;
  --red:          #c9392a;
  --amber:        #e8a422;

  --glass-bg:     rgba(44,47,26,0.6);
  --glass-border: rgba(168,176,90,0.2);
  --glass-blur:   blur(18px);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --font-body:    'Instrument Sans', sans-serif;

  --radius:    5px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --shadow:     0 4px 32px rgba(44,47,26,0.12);
  --shadow-lg:  0 16px 64px rgba(44,47,26,0.2);
  --glow-olive: 0 0 40px rgba(99,107,47,0.25);
  --glow-light: 0 0 60px rgba(168,176,90,0.18);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--off-white); color:var(--olive-deep); font-family:var(--font-body); line-height:1.6; overflow-x:hidden; }
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }

/* Typography */
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; letter-spacing:-0.02em; }
h1 { font-size:clamp(2.8rem,6vw,5.5rem); font-weight:900; }
h2 { font-size:clamp(2rem,4vw,3.2rem); font-weight:600; }
h3 { font-size:clamp(1.3rem,2.5vw,1.8rem); font-weight:600; }
h4 { font-size:1.05rem; font-weight:600; }
p  { font-size:1rem; line-height:1.75; }

.container { width:100%; max-width:1180px; margin:0 auto; padding:0 2rem; }
section    { padding:6rem 0; }

/* Grain */
body::after {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; mix-blend-mode:overlay;
}

/* ── Nav ──────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100; padding:1.2rem 0;
  transition:all var(--transition);
}
.nav.scrolled {
  background:rgba(44,47,26,0.9); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur); box-shadow:0 1px 0 var(--glass-border), var(--shadow);
}
.nav.nav-light.scrolled {
  background:rgba(245,241,237,0.94); backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 rgba(99,107,47,0.1), var(--shadow);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo  { display:flex; align-items:center; }
.nav-logo img { width:38px; height:38px; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a {
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(237,231,226,0.7); transition:color var(--transition);
}
.nav-links a:hover { color:var(--cream); }
.nav.nav-light .nav-links a { color:rgba(44,47,26,0.55); }
.nav.nav-light .nav-links a:hover { color:var(--olive-deep); }
.nav.nav-light:not(.scrolled) .nav-links a { color:rgba(237,231,226,0.8); }
.nav-cta {
  background:var(--olive) !important; color:var(--cream) !important;
  padding:0.5rem 1.25rem; border-radius:var(--radius);
  transition:background var(--transition) !important; opacity:1 !important;
}
.nav-cta:hover { background:var(--olive-light) !important; color:var(--olive-deep) !important; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; z-index:101; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--cream); transition:var(--transition); }
.nav.nav-light .nav-hamburger span { background:var(--olive-deep); }
.nav.nav-light:not(.scrolled) .nav-hamburger span { background:var(--cream); }

/* ── Buttons ──────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 2rem;
  border-radius:var(--radius); font-family:var(--font-body); font-size:0.95rem; font-weight:600;
  cursor:pointer; border:1.5px solid transparent; transition:all var(--transition); white-space:nowrap;
}
.btn-primary { background:var(--olive); color:var(--cream); border-color:var(--olive); box-shadow:0 4px 20px rgba(99,107,47,0.3); }
.btn-primary:hover { background:var(--olive-light); border-color:var(--olive-light); color:var(--olive-deep); transform:translateY(-2px); box-shadow:0 8px 28px rgba(99,107,47,0.4); }
.btn-outline { background:transparent; color:var(--cream); border-color:rgba(237,231,226,0.35); }
.btn-outline:hover { border-color:var(--cream); transform:translateY(-2px); }
.btn-outline-dark { background:transparent; color:var(--olive-deep); border-color:rgba(44,47,26,0.2); }
.btn-outline-dark:hover { border-color:var(--olive); color:var(--olive); transform:translateY(-2px); }
.btn-cream { background:var(--cream); color:var(--olive-deep); border-color:var(--cream); }
.btn-cream:hover { background:var(--warm-white); transform:translateY(-2px); box-shadow:0 8px 24px rgba(237,231,226,0.3); }
.btn-lg { padding:1.1rem 2.6rem; font-size:1.05rem; }

/* ── Section labels ───────────────────────── */
.section-label {
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--olive-light); margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem;
}
.section-label::before { content:''; display:block; width:2rem; height:1px; background:var(--olive-light); }
.section-label.on-cream { color:var(--olive); }
.section-label.on-cream::before { background:var(--olive); }

/* ── Score bands ──────────────────────────── */
.band { display:inline-block; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.3rem 0.85rem; border-radius:100px; font-weight:500; }
.band-invisible   { background:rgba(201,57,42,0.2);  color:#f4a89c; border:1px solid rgba(201,57,42,0.3); }
.band-developing  { background:rgba(232,164,34,0.18); color:#f0e08c; border:1px solid rgba(232,164,34,0.3); }
.band-competitive { background:rgba(99,107,47,0.3);  color:#a8d08c; border:1px solid rgba(99,107,47,0.4); }
.band-strong      { background:rgba(99,107,47,0.4);  color:#8cd4b0; border:1px solid rgba(99,107,47,0.5); }
/* light bg variants */
.band-lv.band-developing  { background:rgba(232,164,34,0.15); color:#7a5000; border:1px solid rgba(232,164,34,0.3); }
.band-lv.band-competitive { background:rgba(99,107,47,0.15);  color:#2c3a0a; border:1px solid rgba(99,107,47,0.3); }

/* ── Ticker ───────────────────────────────── */
.ticker-wrap { overflow:hidden; background:var(--olive-mid); padding:0.65rem 0; }
.ticker-track { display:flex; width:max-content; animation:ticker 35s linear infinite; }
.ticker-item { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--cream); padding:0 2.5rem; white-space:nowrap; opacity:0.75; }
.ticker-dot { color:var(--olive-light); opacity:1 !important; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Animations ───────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes orb1     { 0%,100%{transform:translate(0,0)} 33%{transform:translate(50px,-40px)} 66%{transform:translate(-30px,25px)} }
@keyframes orb2     { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-45px,30px)} 66%{transform:translate(35px,-20px)} }
@keyframes orb3     { 0%,100%{transform:translate(0,0)} 50%{transform:translate(25px,35px)} }

.fade-up   { opacity:0; animation:fadeUp 0.7s ease forwards; }
.fade-up-1 { animation-delay:0.1s; }
.fade-up-2 { animation-delay:0.22s; }
.fade-up-3 { animation-delay:0.34s; }
.fade-up-4 { animation-delay:0.46s; }
.reveal { opacity:0; transform:translateY(32px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* ── Orbs ─────────────────────────────────── */
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.15; pointer-events:none; }
.orb-1 { width:500px; height:500px; background:var(--olive); top:-80px; right:-60px; animation:orb1 20s ease-in-out infinite; }
.orb-2 { width:380px; height:380px; background:var(--olive-light); bottom:-40px; left:-40px; animation:orb2 24s ease-in-out infinite; opacity:0.1; }
.orb-3 { width:280px; height:280px; background:var(--amber); top:35%; left:30%; animation:orb3 17s ease-in-out infinite; opacity:0.07; }

/* ── Section backgrounds ──────────────────── */
/* Dark sections with richer gradient backgrounds */
.bg-dark {
  background: linear-gradient(135deg, #1e2110 0%, #2c2f1a 40%, #1a1d0e 100%);
  color:var(--cream);
}
.bg-dark-richer {
  background: linear-gradient(160deg, #141708 0%, #2c2f1a 30%, #1e220e 60%, #0e1008 100%);
  color:var(--cream);
}
.bg-olive-gradient {
  background: linear-gradient(135deg, #4a5022 0%, #636b2f 50%, #3d4218 100%);
  color:var(--cream);
}
/* Light sections with warmth variation */
.bg-cream {
  background: linear-gradient(160deg, #f5f1ed 0%, #ede7e2 60%, #e8e0d8 100%);
  color:var(--olive-deep);
}
.bg-warm {
  background: linear-gradient(135deg, #faf7f3 0%, #f0ebe4 50%, #e8e0d5 100%);
  color:var(--olive-deep);
}
.bg-white { background:#fff; color:var(--olive-deep); }
/* Contrast band — olive strip between sections */
.bg-olive-strip {
  background: linear-gradient(90deg, #3d4218 0%, #636b2f 30%, #7a8530 60%, #4a5022 100%);
  color:var(--cream);
}

/* ── Glass ────────────────────────────────── */
.glass {
  background:rgba(44,47,26,0.55); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-lg);
}
.glass-warm {
  background:rgba(245,241,237,0.88); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur); border:1px solid rgba(99,107,47,0.12); border-radius:var(--radius-lg);
  color:var(--olive-deep);
}

/* ── Footer ───────────────────────────────── */
.footer {
  background:linear-gradient(160deg, #141708 0%, #1e2110 40%, #0e1008 100%);
  color:var(--cream); padding:4rem 0 2rem;
  border-top:1px solid rgba(168,176,90,0.12);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:4rem; padding-bottom:3rem; border-bottom:1px solid rgba(237,231,226,0.07); }
.footer-brand p { opacity:0.5; font-size:0.88rem; margin-top:1rem; max-width:280px; line-height:1.7; }
.footer-logo    { font-family:var(--font-display); font-weight:900; font-size:1.8rem; letter-spacing:-0.03em; }
.footer-col h4  { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; opacity:0.35; margin-bottom:1.2rem; }
.footer-col ul  { list-style:none; display:flex; flex-direction:column; gap:0.65rem; }
.footer-col ul a { opacity:0.6; font-size:0.88rem; transition:opacity var(--transition); }
.footer-col ul a:hover { opacity:1; }
.footer-abn    { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; opacity:0.3; margin-top:0.75rem; }
.footer-bottom { padding-top:2rem; display:flex; justify-content:space-between; align-items:center; opacity:0.3; font-size:0.72rem; font-family:var(--font-mono); letter-spacing:0.06em; }

/* ── Shared form ──────────────────────────── */
.form-field { margin-bottom:1.25rem; }
.form-label { display:block; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; margin-bottom:0.5rem; color:var(--olive-deep); }
.form-label span { color:var(--red); opacity:1; }
.form-input,.form-select,.form-textarea {
  width:100%; padding:0.75rem 1rem; background:var(--off-white);
  border:1px solid rgba(99,107,47,0.18); border-radius:var(--radius);
  font-family:var(--font-body); font-size:0.9rem; color:var(--olive-deep);
  transition:border-color var(--transition), box-shadow var(--transition); appearance:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(99,107,47,0.1); }
.form-input::placeholder,.form-textarea::placeholder { opacity:0.35; }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232c2f1a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; cursor:pointer;
}
.form-textarea { resize:vertical; min-height:120px; }

@media (max-width:768px) {
  section { padding:4rem 0; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column; position:fixed; inset:0;
    background:rgba(44,47,26,0.97); backdrop-filter:var(--glass-blur);
    justify-content:center; align-items:center; gap:2.5rem; z-index:99;
  }
  .nav-links.open a { font-size:1rem; opacity:0.9; color:var(--cream) !important; }
  .footer-grid { grid-template-columns:1fr; gap:2.5rem; }
  .footer-bottom { flex-direction:column; gap:0.5rem; text-align:center; }
}