/* ==========================================================================
   Design system — Baddam Prem Maheshwar Reddy
   Matched to the campaign poster language: cream/saffron ground, orange and
   deep-green Telugu display type, white pill chips, green banner strips.
   Layered on Bootstrap 5.
   ========================================================================== */

/* ----------------------------------------------------------------- fonts */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('/assets/fonts/sora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('/assets/fonts/sora-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('/assets/fonts/sora-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'NotoTelugu';src:url('/assets/fonts/noto-telugu.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0C00-0C7F,U+0964-0965,U+200C-200D,U+25CC}
@font-face{font-family:'NotoDevanagari';src:url('/assets/fonts/noto-devanagari.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+25CC}

/* ---------------------------------------------------------------- tokens */
:root{
  /* Brand — sampled from the campaign artwork */
  --saffron:#F4661B;
  --saffron-deep:#D9480F;
  --saffron-bright:#FF7A29;
  --saffron-soft:#FFF1E6;
  --saffron-tint:#FFD9BE;

  --green:#0F7A3D;
  --green-deep:#0B5730;
  --green-bright:#138808;
  --green-soft:#E8F5EC;
  --green-tint:#BFE3CC;

  /* Deep navy used for console sidebar, auth aside and dark surfaces.
     Must stay dark enough for white text (WCAG AA on all tints below). */
  --navy:#0E2A47;
  --navy-deep:#0A1F36;

  --gold:#E8A317;
  --gold-soft:#FDF3DD;

  --cream:#FFFBF6;
  --white:#FFFFFF;
  --paper:#FBF7F2;
  --paper-2:#F4EEE7;
  --line:#EFE4D8;
  --line-strong:#DFCDB9;

  --ink:#22303C;
  --ink-2:#4A5A68;
  --ink-3:#77878F;
  --ink-4:#A3B0B7;

  --danger:#D62839;
  --warning:#E3A008;
  --success:#0F7A3D;
  --info:#1B6EC2;

  --font-body:'Inter','NotoTelugu','NotoDevanagari',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Sora','Inter','NotoTelugu','NotoDevanagari',-apple-system,sans-serif;
  --font-te:'NotoTelugu','Inter',sans-serif;

  --step--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --step-0:clamp(.95rem,.92rem + .15vw,1.02rem);
  --step-1:clamp(1.08rem,1.02rem + .3vw,1.28rem);
  --step-2:clamp(1.32rem,1.2rem + .6vw,1.72rem);
  --step-3:clamp(1.65rem,1.4rem + 1.15vw,2.45rem);
  --step-4:clamp(2rem,1.55rem + 2.2vw,3.4rem);
  --step-5:clamp(2.4rem,1.7rem + 3.4vw,4.3rem);

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(90,58,30,.06);
  --shadow-sm:0 2px 10px rgba(90,58,30,.08);
  --shadow-md:0 10px 28px rgba(90,58,30,.10);
  --shadow-lg:0 20px 52px rgba(90,58,30,.15);
  --shadow-glow:0 10px 30px rgba(244,102,27,.32);

  /* ==================================================== SPACING SYSTEM ====
     One 4px-based scale for every gap in the product. Nothing should invent a
     padding or margin value: pick the nearest step. Composite tokens below
     name the *purpose* (page gutter, section rhythm, card padding) so a page
     reads intent rather than arithmetic, and so one change restyles the site.  */
  --space-0:0;
  --space-1:.25rem;   /*  4px */
  --space-2:.5rem;    /*  8px */
  --space-3:.75rem;   /* 12px */
  --space-4:1rem;     /* 16px */
  --space-5:1.25rem;  /* 20px */
  --space-6:1.5rem;   /* 24px */
  --space-7:2rem;     /* 32px */
  --space-8:2.5rem;   /* 40px */
  --space-9:3rem;     /* 48px */
  --space-10:4rem;    /* 64px */
  --space-11:5rem;    /* 80px */
  --space-12:6rem;    /* 96px */

  /* Page gutter: the breathing room between content and the viewport edge.
     Scales with the screen so 320px phones stay usable and 1440px does not
     glue content to the sides. */
  --gutter:clamp(1rem, 4vw, 2rem);

  /* Vertical rhythm between major sections, and its compact variant. */
  --section-y:clamp(2.5rem, 6vw, 5rem);
  --section-y-sm:clamp(1.75rem, 4vw, 3rem);

  /* Component-level spacing */
  --card-pad:clamp(1rem, 2.5vw, 1.75rem);
  --card-pad-sm:clamp(.875rem, 2vw, 1.25rem);
  --grid-gap:clamp(.75rem, 2vw, 1.5rem);
  --stack-gap:var(--space-4);

  /* Controls. --tap is the minimum comfortable touch target. */
  --tap:44px;
  --btn-h:44px;
  --btn-h-lg:52px;
  --btn-h-sm:36px;
  --btn-pad-x:clamp(1rem, 2vw, 1.5rem);
  --btn-pad-x-sm:.875rem;
  --input-h:44px;

  /* Content measure — stops prose running to uncomfortable line lengths. */
  --measure:68ch;

  /* ---- Floating capsule navigation ------------------------------------ */
  --nav-h:68px;              /* resting height  */
  --nav-h-compact:56px;      /* after scroll    */
  --nav-inset:clamp(.5rem, 1.5vw, 1rem);   /* gap from viewport edge */
  --nav-top:clamp(.5rem, 1.2vw, .875rem);
  --nav-top-compact:.375rem;
  --nav-pad-x:clamp(.75rem, 1.6vw, 1.25rem);
  --nav-link-pad-x:.85rem;
  --nav-link-pad-y:.5rem;

  --nav-h:74px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- Motion design system -------------------------------------------
     Three tiers, one signature easing. JS reads these via getComputedStyle
     so CSS stays the single source of truth. */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);          /* signature curve   */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);        /* playful overshoot */
  --t-fast:180ms;      /* hover, focus, toggles          */
  --t-standard:320ms;  /* cards, panels, dropdowns       */
  --t-cinematic:850ms; /* hero, page reveals             */

  /* Glass surfaces */
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-strong:rgba(255,255,255,.88);
  --glass-border:rgba(255,255,255,.55);
  --glass-blur:saturate(1.6) blur(16px);

  --bs-primary:#F4661B;
  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--white);
  --bs-border-color:var(--line);
  --bs-link-color:var(--saffron-deep);
  --bs-link-hover-color:var(--saffron);
}

/* -------------------------------------------------------------- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.16;letter-spacing:-.015em;color:var(--green-deep)}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)} h5{font-size:var(--step-0)}
p{margin-bottom:var(--space-4)}
a{text-decoration:none;transition:color .18s var(--ease)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:4px}
::selection{background:var(--saffron);color:#fff}

/* Telugu / Hindi display type — the poster voice */
.te{font-family:var(--font-te);line-height:1.45}
.hi{font-family:'NotoDevanagari',var(--font-body);line-height:1.5}
.te-display{font-family:var(--font-te);font-weight:700;line-height:1.35}
.te-orange{color:var(--saffron-deep)}
.te-green{color:var(--green)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--green-deep);color:#fff;
  padding:var(--space-3) var(--space-5);border-radius:0 0 var(--r-md) 0;font-weight:600}
.skip-link:focus{left:0}

/* ------------------------------------------------------------- utility -- */
.text-saffron{color:var(--saffron-deep)!important}
.text-green{color:var(--green)!important}
.text-navy{color:var(--green-deep)!important}
.text-gold{color:var(--gold)!important}
.text-muted-2{color:var(--ink-3)!important}
.bg-navy{background:var(--green-deep)!important;color:#fff}
.bg-saffron{background:var(--saffron)!important;color:#fff}
.bg-paper{background:var(--paper)!important}
.bg-cream{background:var(--cream)!important}
.bg-saffron-soft{background:var(--saffron-soft)!important}
.bg-green-soft{background:var(--green-soft)!important}
.fw-800{font-weight:800}
.section{padding:clamp(3rem,6.5vw,6rem) 0}
.section-sm{padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.container-narrow{max-width:880px;margin-inline:auto}

.bg-wash{background:
  radial-gradient(760px 420px at 92% -8%,rgba(244,102,27,.12),transparent 62%),
  radial-gradient(620px 380px at -8% 108%,rgba(15,122,61,.10),transparent 60%),
  var(--cream)}

.tricolour-rule{height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--saffron) 0 33.33%,#fff 33.33% 66.66%,var(--green-bright) 66.66% 100%);
  border:1px solid var(--line)}
.rule-accent{width:74px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--saffron),var(--gold));margin-bottom:var(--space-5)}

/* Dotted rule with a lotus, as between poster headings */
.lotus-rule{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0 var(--space-5);color:var(--saffron)}
.lotus-rule::before,.lotus-rule::after{content:'';flex:1;height:1px;max-width:120px;
  background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 10px);opacity:.55}
.lotus-rule.start::before{display:none}
.lotus-rule i{font-size:1.05rem}

.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--saffron-deep);margin-bottom:var(--space-3)}
.eyebrow::before{content:'';width:26px;height:2px;background:currentColor;border-radius:2px}
.eyebrow-light{color:var(--gold)}

.section-head{max-width:730px;margin-bottom:var(--space-8)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow::before{display:none}
.section-head p{color:var(--ink-2);font-size:var(--step-1);margin-bottom:0}

/* Green banner strip — the poster's section-header device */
.banner-strip{display:inline-block;background:linear-gradient(100deg,var(--green) 0%,var(--green-deep) 100%);
  color:#fff;padding:var(--space-3) var(--space-7) var(--space-3);border-radius:var(--r-pill);box-shadow:var(--shadow-md);
  font-family:var(--font-te);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.55rem)}
.banner-strip.skew{border-radius:6px 22px 6px 22px}

/* ---------------------------------------------------------------- buttons */
.btn{font-weight:600;border-radius:var(--r-pill);padding:var(--space-3) var(--space-6);transition:all .22s var(--ease);border-width:1.5px}
.btn:focus-visible{box-shadow:0 0 0 4px rgba(244,102,27,.3)}
.btn-lg{padding:var(--space-4) var(--space-7);font-size:1.02rem}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:.85rem}
.btn-saffron{background:linear-gradient(135deg,var(--saffron-bright),var(--saffron-deep));color:#fff;
  border-color:transparent;box-shadow:var(--shadow-glow)}
.btn-saffron:hover,.btn-saffron:focus{color:#fff;transform:translateY(-2px);box-shadow:0 16px 38px rgba(244,102,27,.4)}
.btn-navy{background:var(--green-deep);color:#fff;border-color:transparent}
.btn-navy:hover{background:var(--green);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-green{background:var(--green);color:#fff;border-color:transparent}
.btn-green:hover{background:var(--green-deep);color:#fff;transform:translateY(-2px)}
.btn-outline-navy{border-color:var(--line-strong);color:var(--green-deep);background:#fff}
.btn-outline-navy:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff;transform:translateY(-2px)}
.btn-ghost-light{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.btn-ghost-light:hover{background:#fff;color:var(--green-deep);border-color:#fff}
.btn-icon{display:inline-flex;align-items:center;gap:var(--space-2)}
.btn i{font-size:1.05em}

/* ------------------------------------------------------------------ cards */
.card-premium{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--card-pad);
  box-shadow:var(--shadow-xs);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
  height:100%;position:relative;overflow:hidden}
.card-premium::after{content:'';position:absolute;inset:0 auto auto 0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--saffron),var(--gold));transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.card-premium:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--saffron-tint)}
.card-premium:hover::after{transform:scaleX(1)}
.card-premium h3,.card-premium h4{margin-bottom:var(--space-2)}
.card-premium p{color:var(--ink-2);margin-bottom:0}

.card-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;
  background:linear-gradient(135deg,var(--saffron-bright),var(--saffron-deep));color:#fff;margin-bottom:var(--space-5);
  box-shadow:0 6px 16px rgba(244,102,27,.28);transition:transform .32s var(--ease)}
.card-premium:hover .card-icon{transform:scale(1.08) rotate(-5deg)}
.card-icon.green{background:linear-gradient(135deg,#18a04c,var(--green-deep));box-shadow:0 6px 16px rgba(15,122,61,.28)}
.card-icon.navy{background:linear-gradient(135deg,var(--green),var(--green-deep));box-shadow:0 6px 16px rgba(11,87,48,.28)}
.card-icon.gold{background:linear-gradient(135deg,#F5C043,var(--gold));box-shadow:0 6px 16px rgba(232,163,23,.3)}

.card-glass{background:rgba(255,255,255,.14);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-lg);padding:var(--space-6);color:#fff}

/* Works card — white card with a coloured title bar, as on the posters */
.work-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:100%;
  box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.work-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.work-card > header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);color:#fff;font-weight:700;
  font-family:var(--font-te);font-size:1rem;background:linear-gradient(100deg,var(--saffron-bright),var(--saffron-deep))}
.work-card > header .ic{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.24);
  display:grid;place-items:center;font-size:.95rem}
.work-card.green > header{background:linear-gradient(100deg,#18a04c,var(--green-deep))}
.work-card.gold > header{background:linear-gradient(100deg,#F5C043,#C98A0B)}
.work-card.navy > header{background:linear-gradient(100deg,var(--green),var(--green-deep))}
.work-card .body{padding:var(--space-4) var(--space-4) var(--space-5)}
.work-card ul{list-style:none;padding:0;margin:0;font-size:.9rem}
.work-card li{display:flex;gap:var(--space-2);align-items:flex-start;margin-bottom:var(--space-2);color:var(--ink-2)}
.work-card li i{color:var(--saffron);font-size:.85rem;margin-top:var(--space-1);flex:0 0 auto}

/* Pill list — the poster's white capsule + circular icon */
.pill-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.pill-item{display:flex;align-items:center;gap:var(--space-3);background:#fff;border:1.5px solid var(--saffron-tint);
  border-radius:var(--r-pill);padding:var(--space-2) var(--space-5) var(--space-2) var(--space-2);box-shadow:var(--shadow-xs);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.pill-item:hover{transform:translateX(5px);box-shadow:var(--shadow-sm);border-color:var(--saffron)}
.pill-item .ic{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:1.05rem;background:linear-gradient(135deg,var(--saffron-bright),var(--saffron-deep))}
.pill-item:nth-child(even) .ic{background:linear-gradient(135deg,#18a04c,var(--green-deep))}
.pill-item .tx{font-family:var(--font-te);font-weight:600;font-size:1rem;color:var(--ink)}
.pill-item .en{display:block;font-family:var(--font-body);font-size:.73rem;color:var(--ink-3);font-weight:500}

/* Nameplate — the poster's green bar with the name */
.nameplate{background:linear-gradient(100deg,var(--green-deep),#0d6b36 55%,var(--green-deep));
  border-radius:var(--r-lg);padding:var(--space-4) var(--space-6);text-align:center;box-shadow:var(--shadow-md);
  border:2px solid rgba(255,255,255,.16)}
.nameplate .nm{font-family:var(--font-display);font-weight:800;color:#fff;
  font-size:clamp(1.15rem,3.2vw,2rem);line-height:1.1;text-transform:uppercase}
.nameplate .role{display:inline-block;margin-top:var(--space-2);
  background:linear-gradient(100deg,var(--saffron-bright),var(--saffron-deep));color:#fff;font-weight:700;
  font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;padding:var(--space-1) var(--space-5);border-radius:var(--r-pill)}
.nameplate .div{display:block;margin-top:var(--space-2);color:rgba(255,255,255,.82);font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600}

/* --------------------------------------------------------------- navbar --
   Floating glass bar: detached, rounded, blurred. Compacts on scroll. */
/* ======================================================================
   FLOATING CAPSULE NAVIGATION
   A detached pill that hovers over the page: glass surface, thin border,
   layered shadow, and a sliding indicator that tracks the active link.
   On scroll it tightens — shorter, closer to the edge, more opaque — but
   never loses the capsule shape.
   ====================================================================== */
.site-header{
  position:sticky; top:0; z-index:1030;
  padding-top:var(--nav-top);
  transition:padding-top var(--t-standard) var(--ease-out-expo);
}

/* Utility strip above the capsule. Retracts on scroll to give the nav room. */
.top-strip{
  background:linear-gradient(100deg,var(--green-deep),var(--green));
  color:rgba(255,255,255,.92);
  font-size:var(--step--1);
  padding:var(--space-2) 0;
  margin:0 var(--nav-inset) var(--space-2);
  border-radius:var(--r-pill);
  overflow:hidden;
  max-height:44px; opacity:1;
  transition:max-height var(--t-standard) var(--ease-out-expo),
             opacity var(--t-fast) var(--ease),
             margin var(--t-standard) var(--ease-out-expo);
}
.top-strip a{color:rgba(255,255,255,.92)}
.top-strip a:hover{color:var(--gold)}

/* The shell owns the inset so the capsule itself can stay purely visual. */
.nav-shell{padding-inline:var(--nav-inset)}

.nav-capsule{
  position:relative;
  display:flex; align-items:center;
  min-height:var(--nav-h);
  padding:var(--space-2) var(--nav-pad-x);
  border-radius:var(--r-pill);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  /* Layered shadow: a tight contact shadow plus a wide soft lift. */
  box-shadow:
    0 1px 2px rgba(14,42,71,.05),
    0 8px 24px -6px rgba(14,42,71,.10),
    0 24px 48px -20px rgba(14,42,71,.16);
  transition:min-height var(--t-standard) var(--ease-out-expo),
             padding var(--t-standard) var(--ease-out-expo),
             background var(--t-standard) var(--ease),
             box-shadow var(--t-standard) var(--ease);
}

.nav-capsule-inner{
  display:flex; align-items:center; gap:var(--space-4);
  width:100%; min-width:0;
}

/* ---- scrolled state: compact, more opaque, hugs the edge --------------- */
.site-header.scrolled{padding-top:var(--nav-top-compact)}
.site-header.scrolled .top-strip{
  max-height:0; opacity:0; margin-block:0; padding-block:0;
}
.site-header.scrolled .nav-capsule{
  min-height:var(--nav-h-compact);
  padding-block:var(--space-1);
  background:var(--glass-bg-strong);
  box-shadow:
    0 1px 2px rgba(14,42,71,.06),
    0 10px 28px -8px rgba(14,42,71,.16),
    0 28px 56px -24px rgba(14,42,71,.20);
}
.site-header.scrolled .brand-logo{width:38px;height:38px}
.site-header.scrolled .brand-role{opacity:0;max-height:0}

/* ---- brand ------------------------------------------------------------ */
.brand-mark{
  display:flex;align-items:center;gap:var(--space-3);
  /* Shrinkable and capped: the brand must never crowd the links. */
  flex:0 1 auto;min-width:0;max-width:min(38vw,320px);
  text-decoration:none;
}
.brand-logo{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:#fff;border:2.5px solid var(--saffron);
  box-shadow:0 4px 14px rgba(244,102,27,.25);overflow:hidden;
  transition:width var(--t-standard) var(--ease-out-expo),
             height var(--t-standard) var(--ease-out-expo);
}
.brand-logo svg{width:28px;height:28px}
.brand-logo img.brand-logo-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name{
  font-family:var(--font-display);font-weight:800;font-size:.98rem;
  color:var(--green-deep);letter-spacing:-.02em;
  /* Ellipsis at every width. Without overflow handling the name rendered
     wider than its box and printed straight over the nav links. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.brand-role{
  font-size:.64rem;font-weight:700;color:var(--saffron-deep);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;max-height:1.2em;
  transition:opacity var(--t-fast) var(--ease), max-height var(--t-standard) var(--ease-out-expo);
}

/* ---- links + sliding indicator ---------------------------------------- */
.nav-links{
  display:flex;align-items:center;gap:var(--space-1);
  margin:0 0 0 auto;padding:0;list-style:none;position:relative;
}
.nav-capsule .nav-link{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-weight:600;font-size:.9rem;color:var(--ink-2);
  padding:var(--nav-link-pad-y) var(--nav-link-pad-x)!important;
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease);
}
.nav-capsule .nav-link:hover,
.nav-capsule .nav-link:focus-visible{color:var(--saffron-deep)}
.nav-capsule .nav-link.active{color:var(--saffron-deep)}

/* The indicator is one element that slides between links rather than a
   border on each, so the movement reads as a single continuous object. */
.nav-indicator{
  position:absolute;z-index:0;top:0;left:0;height:100%;
  /* height/top are overwritten from measured link geometry in app.js */
  border-radius:var(--r-pill);
  background:var(--saffron-soft);
  box-shadow:inset 0 0 0 1px var(--saffron-tint);
  opacity:0;
  transform:translateX(0);
  transition:transform var(--t-standard) var(--ease-out-expo),
             width var(--t-standard) var(--ease-out-expo),
             opacity var(--t-fast) var(--ease);
  pointer-events:none;
}
.nav-links.indicator-ready .nav-indicator{opacity:1}

.nav-cta{flex:0 0 auto;margin-left:var(--space-2)}

/* ---- dropdowns -------------------------------------------------------- */
.nav-capsule .dropdown-menu{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--space-2);
  margin-top:var(--space-2);
  font-size:.92rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
.dropdown-item{
  border-radius:var(--r-md);
  padding:var(--space-2) var(--space-3);
  font-weight:500;min-height:var(--tap);
  display:flex;align-items:center;
}
.dropdown-item:hover,
.dropdown-item:focus{background:var(--saffron-soft);color:var(--saffron-deep)}
.dropdown-divider{margin:var(--space-2) var(--space-1)}

/* ---- mobile: compact capsule + offcanvas ------------------------------ */
.nav-toggle{
  flex:0 0 auto;
  width:var(--tap);height:var(--tap);
  display:none;place-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:transparent;color:var(--green-deep);
  transition:background var(--t-fast) var(--ease);
}
.nav-toggle:hover{background:var(--saffron-soft)}
.nav-toggle:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}

@media (max-width:991.98px){
  .nav-capsule{min-height:var(--nav-h-compact);padding-inline:var(--space-3)}
  .site-header.scrolled .nav-capsule{min-height:52px}
  .nav-capsule-inner{gap:var(--space-2)}
  .brand-name{font-size:.92rem}
  /* The fixed bottom bar already carries a Menu control, so the header does
     not need its own trigger. */
  .nav-toggle{display:none}
}

/* Offcanvas panel — rounded, glassy, safe-area aware. */
.nav-offcanvas{
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  border:0;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:-20px 0 60px -20px rgba(14,42,71,.28);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.nav-offcanvas .offcanvas-header{padding:var(--space-5) var(--space-5) var(--space-3)}
.nav-offcanvas .offcanvas-body{padding:0 var(--space-4) var(--space-6);overflow-y:auto}
.nav-offcanvas .nav-link{
  display:flex;align-items:center;
  min-height:var(--tap);
  padding:var(--space-3) var(--space-4)!important;
  border-radius:var(--r-md);
  font-size:1rem;font-weight:600;color:var(--ink);
}
.nav-offcanvas .nav-link.active{background:var(--saffron-soft);color:var(--saffron-deep)}
.nav-offcanvas .dropdown-menu{
  border:0;box-shadow:none;background:transparent;
  padding:0 0 var(--space-2) var(--space-3);margin:0;
}
.nav-offcanvas .dropdown-item{font-size:.94rem;color:var(--ink-2)}
.nav-offcanvas .nav-cta{margin:var(--space-4) 0 0;width:100%}

@media (prefers-reduced-motion:reduce){
  .nav-indicator,.nav-capsule,.top-strip,.brand-logo,.brand-role{transition:none}
}

.ticker{background:linear-gradient(90deg,var(--saffron-bright),var(--saffron-deep));color:#fff;font-size:.85rem;
  padding:var(--space-2) 0;overflow:hidden}
.ticker-inner{display:flex;gap:var(--space-9);white-space:nowrap;animation:ticker 38s linear infinite}
.ticker:hover .ticker-inner{animation-play-state:paused}
.ticker a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;overflow:hidden;padding:clamp(2.25rem,5vw,4rem) 0 clamp(2.5rem,6vw,4.5rem);
  background:
    radial-gradient(900px 520px at 88% -6%,rgba(244,102,27,.26),transparent 60%),
    radial-gradient(700px 440px at -6% 96%,rgba(15,122,61,.16),transparent 58%),
    linear-gradient(165deg,#FFFDFA 0%,#FFF4E9 42%,#FFF9F2 100%)}
.hero::before{content:'';position:absolute;top:-16%;right:-12%;width:62%;height:72%;
  background:linear-gradient(122deg,rgba(244,102,27,.5),rgba(232,163,23,.26) 55%,transparent 78%);
  filter:blur(46px);border-radius:48% 52% 40% 60%}
.hero::after{content:'';position:absolute;bottom:-18%;left:-10%;width:52%;height:56%;
  background:linear-gradient(300deg,rgba(15,122,61,.3),transparent 72%);filter:blur(52px);
  border-radius:56% 44% 60% 40%}
.hero > *{position:relative;z-index:2}
.hero h1{color:var(--green-deep)}
.hero .hero-sub{font-size:var(--step-1);color:var(--ink-2);max-width:34rem;margin-bottom:var(--space-6)}
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:#fff;border:1.5px solid var(--saffron-tint);
  border-radius:var(--r-pill);padding:var(--space-2) var(--space-4);font-size:.8rem;font-weight:700;color:var(--green-deep);
  box-shadow:var(--shadow-xs);margin-bottom:var(--space-5)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--saffron);
  box-shadow:0 0 0 4px rgba(244,102,27,.22);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.35)}}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}

.hero-te{font-family:var(--font-te);font-weight:700;line-height:1.3;margin-bottom:var(--space-2);
  font-size:clamp(1.9rem,5.2vw,3.3rem)}
.hero-te .l1{display:block;color:var(--saffron-deep)}
.hero-te .l2{display:block;color:var(--green)}
.hero-te-sub{font-family:var(--font-te);font-size:clamp(1rem,2.2vw,1.25rem);color:var(--ink-2);font-weight:600}

.hero-portrait{position:relative;display:grid;place-items:center;max-width:100%}
.hero-portrait .frame{position:relative;width:min(100%,430px);aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;border:6px solid #fff;box-shadow:0 24px 60px rgba(90,58,30,.24),0 0 0 3px var(--saffron)}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero-portrait .halo{position:absolute;inset:-9%;border-radius:50%;
  background:conic-gradient(from 200deg,rgba(244,102,27,.55),rgba(232,163,23,.3),rgba(15,122,61,.4),rgba(244,102,27,.55));
  filter:blur(42px);opacity:.6;z-index:-1;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait-placeholder{display:grid;place-items:center;height:100%;text-align:center;color:var(--ink-3);
  padding:var(--space-7);background:var(--paper-2)}

.hero-stat{position:absolute;background:#fff;border-radius:var(--r-md);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line);animation:float 6s ease-in-out infinite}
.hero-stat .n{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--green-deep);line-height:1}
.hero-stat .l{font-size:.67rem;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.hero-stat.one{bottom:2%;left:-3%}
.hero-stat.two{top:4%;right:-3%;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ------------------------------------------------------------ quick nav -- */
.quick-actions{margin-top:-2.5rem;position:relative;z-index:5}
.quick-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--card-pad);height:100%;
  display:flex;gap:var(--space-4);align-items:flex-start;box-shadow:var(--shadow-md);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
/* Flex items are min-width:auto by default, so this text column refused to
   shrink below its longest word and pushed the card out of its col-6. */
.quick-card > span:last-child{min-width:0}
.quick-card h4,.quick-card p{overflow-wrap:anywhere}
.quick-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.quick-card .ic{width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:1.2rem;color:#fff}
.quick-card h4{font-size:1rem;margin-bottom:var(--space-1);color:var(--green-deep)}
.quick-card p{font-size:.85rem;color:var(--ink-3);margin:0}

/* ---------------------------------------------------------------- stats -- */
.stat-band{background:linear-gradient(115deg,var(--green-deep) 0%,#0d6b36 48%,var(--green-deep) 100%);
  color:#fff;position:relative;overflow:hidden}
.stat-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(720px 320px at 18% 0%,rgba(244,102,27,.3),transparent 62%)}
.stat-band .inner{position:relative;z-index:2}
.stat-item{text-align:center;padding:var(--space-5) var(--space-2)}
.stat-value{font-family:var(--font-display);font-size:clamp(1.9rem,4.5vw,3rem);font-weight:800;
  background:linear-gradient(135deg,#fff,#FFD9A0);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;line-height:1}
.stat-label{font-size:.8rem;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;margin-top:var(--space-2)}

/* ------------------------------------------------------------- SIR block - */
.sir-hero{background:linear-gradient(135deg,var(--saffron-soft),#fff 52%,var(--green-soft));
  border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.6rem,4vw,2.9rem);
  position:relative;overflow:hidden}
.sir-hero::before{content:'';position:absolute;top:-70px;right:-70px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,102,27,.18),transparent 70%)}
.sir-step{display:flex;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px dashed var(--line)}
.sir-step:last-child{border-bottom:0}
.sir-step .n{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-deep))}
.sir-step h4{font-size:1.02rem;margin-bottom:var(--space-1)}
.sir-step p{font-size:.9rem;color:var(--ink-2);margin:0}

.official-note{background:var(--green-soft);border-left:4px solid var(--green);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--space-4) var(--space-5);font-size:.9rem;color:var(--ink-2)}
.official-note strong{color:var(--green-deep)}
.notice-strip{background:var(--gold-soft);border:1px solid #F0DEB2;border-radius:var(--r-md);
  padding:var(--space-4) var(--space-5);font-size:.89rem;color:#6B5108;display:flex;gap:var(--space-3);align-items:flex-start}
.notice-strip i{font-size:1.15rem;flex:0 0 auto;color:var(--gold)}

/* ------------------------------------------------------------- forms ----- */
.form-label{font-weight:600;font-size:.88rem;color:var(--ink);margin-bottom:var(--space-2)}
.form-label .req{color:var(--danger)}
.form-control,.form-select{border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:var(--space-3) var(--space-4);
  font-size:.95rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);background:#fff}
.form-control:focus,.form-select:focus{border-color:var(--saffron);box-shadow:0 0 0 4px rgba(244,102,27,.14)}
.form-control::placeholder{color:var(--ink-4)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--danger)}
.form-text{font-size:.8rem;color:var(--ink-3)}
.input-group-text{background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--r-md);color:var(--ink-3)}
.form-check-input{width:1.15em;height:1.15em;border:1.5px solid var(--line-strong);margin-top:.2em}
.form-check-input:checked{background-color:var(--saffron);border-color:var(--saffron)}
.form-check-input:focus{box-shadow:0 0 0 4px rgba(244,102,27,.16);border-color:var(--saffron)}
.form-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.35rem,3vw,2.25rem);box-shadow:var(--shadow-sm)}

.search-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.search-tabs{display:flex;gap:var(--space-1);padding:var(--space-2);background:var(--paper);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.search-tabs::-webkit-scrollbar{display:none}
.search-tab{flex:1 0 auto;border:0;background:transparent;border-radius:var(--r-md);padding:var(--space-2) var(--space-4);
  font-weight:600;font-size:.88rem;color:var(--ink-2);white-space:nowrap;transition:all .22s var(--ease)}
.search-tab:hover{background:#fff;color:var(--saffron-deep)}
.search-tab.active{background:#fff;color:var(--saffron-deep);box-shadow:var(--shadow-xs)}
.search-body{padding:clamp(1.25rem,3vw,2rem)}

/* ---------------------------------------------------------- result cards - */
.result-card{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-5) var(--space-5);background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);margin-bottom:var(--space-3)}
.result-card:hover{border-color:var(--saffron-tint);box-shadow:var(--shadow-sm)}
.result-card .name{font-family:var(--font-display);font-weight:700;color:var(--green-deep);font-size:1.02rem}
.result-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:.83rem;color:var(--ink-3);margin-top:var(--space-1)}
.result-meta span{display:inline-flex;align-items:center;gap:var(--space-1)}

.booth-card{border:1px solid var(--line);border-left:4px solid var(--saffron);border-radius:var(--r-md);
  background:#fff;padding:var(--space-5);margin-bottom:var(--space-4);transition:box-shadow .25s var(--ease)}
.booth-card:hover{box-shadow:var(--shadow-md)}
.booth-number{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--green-deep);color:#fff;
  font-weight:700;font-size:.78rem;padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);letter-spacing:.04em}
.distance-chip{background:var(--green-soft);color:var(--green-deep);font-weight:700;font-size:.78rem;
  padding:var(--space-1) var(--space-3);border-radius:var(--r-pill)}

.chip{display:inline-flex;align-items:center;gap:var(--space-1);font-size:.76rem;font-weight:600;padding:var(--space-1) var(--space-3);
  border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line)}
.chip-saffron{background:var(--saffron-soft);color:var(--saffron-deep);border-color:var(--saffron-tint)}
.chip-green{background:var(--green-soft);color:var(--green-deep);border-color:var(--green-tint)}
.chip-navy{background:var(--green-soft);color:var(--green-deep);border-color:var(--green-tint)}
.chip-gold{background:var(--gold-soft);color:#8A6A0C;border-color:#F0DEB2}
.badge{font-weight:600;padding:.36em .7em;border-radius:var(--r-pill);font-size:.74rem}

/* ---------------------------------------------------------------- map ---- */
.map-shell{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md)}
#map,.leaflet-map{height:clamp(360px,58vh,620px);width:100%;background:var(--paper-2)}
.leaflet-container{font-family:var(--font-body)}
.leaflet-popup-content-wrapper{border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.leaflet-popup-content{margin:var(--space-4) var(--space-4);font-size:.88rem}
.map-legend{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-3) var(--space-4);font-size:.82rem}
.map-legend .k{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.map-legend .sw{width:12px;height:12px;border-radius:50%;flex:0 0 auto}

/* -------------------------------------------------------- news / gallery - */
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:100%;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.news-thumb{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--paper-2),var(--paper))}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.news-card:hover .news-thumb img{transform:scale(1.06)}
.news-thumb .ph{height:100%;display:grid;place-items:center;color:var(--ink-4);font-size:2rem}
.news-body{padding:var(--space-5) var(--space-5) var(--space-6);flex:1;display:flex;flex-direction:column}
.news-body h3{font-size:1.05rem;margin-bottom:var(--space-2)}
.news-body p{font-size:.88rem;color:var(--ink-2);flex:1}
.news-date{font-size:.78rem;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:var(--space-2)}

/*
 * Gallery tile: photo on top, caption in a white footer below.
 * Text never overlaps the image, and every photo shares one crop ratio so
 * the grid stays perfectly aligned regardless of source dimensions.
 */
.gallery-tile{position:relative;display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.gallery-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gallery-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper-2)}
.gallery-tile .cap{position:static;padding:var(--space-2) var(--space-3);color:var(--ink-2);font-size:.78rem;font-weight:600;
  background:#fff;border-top:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Poster tiles keep the overlay (posters are artwork, not photos) but the
   caption gets a solid scrim band so it can never blur into the art. */
.poster-tile{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--paper-2);box-shadow:var(--shadow-sm);position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.poster-tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:2/3;display:block}
.poster-tile:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-lg)}
.poster-tile .cap{position:absolute;inset:auto 0 0 0;padding:var(--space-3) var(--space-4);color:#fff;font-size:.83rem;
  font-weight:600;background:rgba(11,87,48,.92);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.video-card{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:#000;
  position:relative;aspect-ratio:16/9;display:block}
.video-card img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s var(--ease)}
.video-card:hover img{opacity:1}
.video-card .play{position:absolute;inset:0;display:grid;place-items:center}
.video-card .play i{width:58px;height:58px;border-radius:50%;background:rgba(244,102,27,.95);color:#fff;
  display:grid;place-items:center;font-size:1.4rem;box-shadow:var(--shadow-lg);transition:transform .3s var(--ease)}
.video-card:hover .play i{transform:scale(1.12)}

/* --------------------------------------------------------------- events -- */
.event-card{display:flex;gap:var(--space-4);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--space-5);transition:box-shadow .3s var(--ease),transform .3s var(--ease);height:100%}
.event-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.event-date{flex:0 0 auto;width:66px;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--saffron-bright),var(--saffron-deep));color:#fff;text-align:center;
  padding:var(--space-3) var(--space-1);height:fit-content;box-shadow:var(--shadow-glow)}
.event-date .d{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1}
.event-date .m{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;opacity:.95}

/* ------------------------------------------------------------- timeline -- */
.timeline{position:relative;padding-left:var(--space-7)}
.timeline::before{content:'';position:absolute;left:.62rem;top:.4rem;bottom:.4rem;width:2px;
  background:linear-gradient(var(--saffron),var(--line))}
.timeline-item{position:relative;padding-bottom:var(--space-6)}
.timeline-item::before{content:'';position:absolute;left:-1.63rem;top:.35rem;width:13px;height:13px;
  border-radius:50%;background:#fff;border:3px solid var(--saffron);box-shadow:0 0 0 4px rgba(244,102,27,.14)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item .t{font-size:.78rem;color:var(--ink-3);font-weight:600}

/* ---------------------------------------------------------------- FAQ ---- */
.accordion-item{border:1px solid var(--line);border-radius:var(--r-md)!important;margin-bottom:var(--space-3);overflow:hidden}
.accordion-button{font-weight:600;font-size:.98rem;color:var(--green-deep);padding:var(--space-4) var(--space-5);background:#fff}
.accordion-button:not(.collapsed){background:var(--saffron-soft);color:var(--saffron-deep);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 3px rgba(244,102,27,.2);border-color:transparent}
.accordion-button::after{width:1.1rem;height:1.1rem;background-size:1.1rem}
.accordion-body{padding:0 var(--space-5) var(--space-5);color:var(--ink-2);font-size:.93rem}

/* --------------------------------------------------------------- footer -- */
.site-footer{background:linear-gradient(160deg,var(--green-deep) 0%,#0a4527 100%);color:rgba(255,255,255,.76);
  padding-top:clamp(3rem,6vw,4.5rem);position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--saffron) 0 33.33%,#fff 33.33% 66.66%,var(--green-bright) 66.66%)}
.site-footer h5{color:#fff;font-size:.86rem;text-transform:uppercase;letter-spacing:.11em;margin-bottom:var(--space-4);
  font-family:var(--font-body);font-weight:700}
.site-footer a{color:rgba(255,255,255,.76);font-size:.9rem}
.site-footer a:hover{color:var(--gold)}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:var(--space-2)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:var(--space-8);padding:var(--space-5) 0;font-size:.83rem}
.social-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);
  color:#fff;transition:all .25s var(--ease);font-size:1.05rem}
.social-btn:hover{background:var(--saffron);color:#fff;transform:translateY(-3px)}
.disclaimer-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);
  padding:var(--space-4) var(--space-5);font-size:.81rem;line-height:1.6;color:rgba(255,255,255,.64)}

.contact-bar{background:linear-gradient(100deg,var(--green-deep),var(--green));color:#fff;
  border-radius:var(--r-pill);padding:var(--space-3) var(--space-6);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:var(--space-3) 1.75rem;box-shadow:var(--shadow-md);font-weight:600}
.contact-bar a{color:#fff;display:inline-flex;align-items:center;gap:var(--space-2)}
.contact-bar a:hover{color:var(--gold)}
.contact-bar .sep{opacity:.35}

/* ------------------------------------------------------- mobile bottom --- */
.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:1040;background:rgba(255,255,255,.98);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);display:none;
  padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(90,58,30,.1)}
.mobile-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-1);
  font-size:.65rem;font-weight:600;color:var(--ink-3);border-radius:var(--r-sm)}
.mobile-bar a i{font-size:1.2rem}
.mobile-bar a.active{color:var(--saffron-deep)}
@media (max-width:991.98px){
  .mobile-bar{display:flex}
  body{padding-bottom:var(--space-10)}
  .hero-stat{display:none}
}
.fab{position:fixed;right:1rem;bottom:5.5rem;z-index:1035;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--saffron-bright),var(--saffron-deep));color:#fff;display:grid;
  place-items:center;font-size:1.35rem;box-shadow:var(--shadow-glow);transition:transform .25s var(--ease)}
.fab:hover{color:#fff;transform:scale(1.08)}
@media (min-width:992px){.fab{bottom:1.5rem}}

/* ------------------------------------------------------------- states ---- */
.empty-state{text-align:center;padding:clamp(2.5rem,6vw,4rem) 1.25rem;border:1.5px dashed var(--line-strong);
  border-radius:var(--r-lg);background:var(--paper)}
.empty-state .ic{width:70px;height:70px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 1.15rem;font-size:1.8rem;color:var(--ink-4)}
.empty-state h3{font-size:1.15rem;margin-bottom:var(--space-2)}
.empty-state p{color:var(--ink-3);max-width:460px;margin:0 auto 1.25rem}

.skeleton{background:linear-gradient(90deg,var(--paper-2) 25%,#EFE6DB 37%,var(--paper-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-line{height:12px;margin-bottom:var(--space-2)}
.skeleton-line.short{width:60%}
.spinner-inline{width:1rem;height:1rem;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-2px}

.toast-stack{position:fixed;top:calc(var(--nav-h) + 1rem);right:1rem;z-index:1080;display:flex;
  flex-direction:column;gap:var(--space-2);max-width:min(380px,calc(100vw - 2rem))}
.toast-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--saffron);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:var(--space-4) var(--space-4);font-size:.9rem;display:flex;
  gap:var(--space-3);align-items:flex-start;animation:toastIn .35s var(--ease)}
.toast-item.success{border-left-color:var(--success)}
.toast-item.error{border-left-color:var(--danger)}
.toast-item.warning{border-left-color:var(--warning)}
.toast-item .close{margin-left:auto;border:0;background:transparent;color:var(--ink-4);font-size:1.1rem;line-height:1}
@keyframes toastIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* -------------------------------------------------------- scroll reveal -- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero-stat,.hero-portrait .halo,.ticker-inner{animation:none}
}

/* ------------------------------------------------------------ page head -- */
.page-header{background:linear-gradient(115deg,var(--green-deep) 0%,#0d6b36 55%,var(--green-deep) 100%);
  color:#fff;position:relative;overflow:hidden;padding:clamp(2.4rem,5vw,3.8rem) 0 clamp(2rem,4vw,2.9rem)}
.page-header::before{content:'';position:absolute;inset:0;
  background:radial-gradient(640px 320px at 88% 10%,rgba(244,102,27,.34),transparent 62%)}
.page-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--saffron) 0 33.33%,#fff 33.33% 66.66%,var(--green-bright) 66.66%)}
.page-header > *{position:relative;z-index:2}
.page-header h1{color:#fff;margin-bottom:var(--space-2)}
.page-header p{color:rgba(255,255,255,.84);max-width:640px;margin:0;font-size:var(--step-1)}
.breadcrumb{font-size:.83rem;margin-bottom:var(--space-4)}
.breadcrumb a{color:rgba(255,255,255,.76)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.45)}
.breadcrumb-item.active{color:#fff}

/* --------------------------------------------------------------- tables -- */
.table-premium{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.table-premium table{margin:0;width:100%}
.table-premium thead th{background:var(--paper);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);font-weight:700;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);white-space:nowrap}
.table-premium tbody td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:middle}
.table-premium tbody tr:last-child td{border-bottom:0}
.table-premium tbody tr:hover{background:var(--paper)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.pagination{gap:var(--space-1)}
.page-link{border:1px solid var(--line);border-radius:var(--r-sm)!important;color:var(--ink-2);font-weight:600;
  font-size:.86rem;padding:var(--space-2) var(--space-3)}
.page-link:hover{background:var(--saffron-soft);color:var(--saffron-deep);border-color:var(--saffron-tint)}
.page-item.active .page-link{background:var(--saffron);border-color:var(--saffron);color:#fff}
.page-item.disabled .page-link{color:var(--ink-4);background:var(--paper)}

@media print{
  .site-header,.site-footer,.mobile-bar,.fab,.btn,.toast-stack{display:none!important}
  body{padding:0}
  .page-header{background:#fff;color:#000}
  .page-header h1,.page-header p{color:#000}
}

/* =========================================================================
   PREMIUM MOTION LAYER
   Magnetic buttons, cursor glow cards, cinematic hero, reduced-motion safe.
   ========================================================================= */

/* ---- Magnetic buttons (pointer devices only; JS adds .is-magnetic) ------ */
@media (hover:hover) and (pointer:fine) {
  .btn-saffron,.btn-navy{will-change:transform}
  .btn-saffron.is-magnetic,.btn-navy.is-magnetic{
    transition:transform var(--t-fast) var(--ease-out-expo),
               box-shadow var(--t-standard) var(--ease)}
  .btn-saffron.is-magnetic:hover{box-shadow:0 14px 34px rgba(244,102,27,.42);
    transform:translate(var(--mx,0),var(--my,0)) scale(1.02)}
  .btn-navy.is-magnetic:hover{box-shadow:0 14px 34px rgba(11,87,48,.35);
    transform:translate(var(--mx,0),var(--my,0)) scale(1.02)}
  .btn.is-pressed{transform:scale(.97)!important;transition-duration:80ms}
}

/* ---- Interactive card: cursor-follow highlight + gentle tilt ------------ */
@media (hover:hover) and (pointer:fine) {
  .card-premium,.service-card,.news-card{position:relative;overflow:hidden}
  .card-premium::before,.service-card::before,.news-card::before{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
      rgba(244,102,27,.10),transparent 45%);
    opacity:0;transition:opacity var(--t-standard) var(--ease);z-index:1}
  .card-premium:hover::before,.service-card:hover::before,.news-card:hover::before{opacity:1}
  .tilt{transform-style:preserve-3d;
    transition:transform var(--t-standard) var(--ease-out-expo)}
  .tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
}

/* ---- Cinematic hero entrance -------------------------------------------- */
/* Staged reveal driven by CSS only; plays once on load. */
@media (prefers-reduced-motion:no-preference) {
  .hero [data-hero]{opacity:0;transform:translateY(26px);
    animation:heroIn var(--t-cinematic) var(--ease-out-expo) forwards;
    animation-delay:calc(var(--stage,0) * 130ms + 150ms)}
  .hero .hero-portrait[data-hero]{transform:translateY(18px) scale(.97)}
  @keyframes heroIn{to{opacity:1;transform:none}}
  /* Decorative hero glows drift slowly */
  .hero::before{animation:drift 16s ease-in-out infinite alternate}
  .hero::after{animation:drift 20s ease-in-out infinite alternate-reverse}
  @keyframes drift{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(-3%,4%,0) scale(1.06)}}
}
@media (prefers-reduced-motion:reduce){
  .hero [data-hero]{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---- Page enter transition (subtle, fast) ------------------------------- */
@media (prefers-reduced-motion:no-preference) {
  body.page-enter main{animation:pageIn 380ms var(--ease-out-expo)}
  @keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---- Skeleton shimmer for loading states -------------------------------- */
.skeleton{position:relative;overflow:hidden;background:var(--paper-2);border-radius:var(--r-sm)}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---- Background music control ------------------------------------------ */
.bg-music-toggle{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  z-index:1080;width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-border);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-md);cursor:pointer;display:grid;place-items:center;
  transition:transform var(--t-fast) var(--ease-out-expo),box-shadow var(--t-standard) var(--ease)}
.bg-music-toggle:hover{transform:scale(1.08);box-shadow:var(--shadow-lg)}
.bg-music-toggle .icon-on,.bg-music-toggle .icon-off{font-size:1.15rem;color:var(--ink-2);
  position:absolute;transition:opacity var(--t-fast) var(--ease)}
.bg-music-toggle .icon-off{opacity:1}
.bg-music-toggle .icon-on{opacity:0}
.bg-music-toggle.on .icon-off{opacity:0}
.bg-music-toggle.on .icon-on{opacity:1;color:var(--saffron-deep)}
/* Equalizer bars shown while playing */
.bg-music-toggle .bars{display:none;align-items:flex-end;gap:2px;height:14px;position:absolute}
.bg-music-toggle.on .bars{display:flex}
.bg-music-toggle.on .icon-on,.bg-music-toggle.on .icon-off{opacity:0}
.bg-music-toggle .bars i{width:3px;background:var(--saffron);border-radius:2px;
  animation:eq 1s ease-in-out infinite}
.bg-music-toggle .bars i:nth-child(1){height:6px;animation-delay:0ms}
.bg-music-toggle .bars i:nth-child(2){height:12px;animation-delay:150ms}
.bg-music-toggle .bars i:nth-child(3){height:8px;animation-delay:300ms}
.bg-music-toggle .bars i:nth-child(4){height:11px;animation-delay:450ms}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .bg-music-toggle .bars i{animation:none;height:9px}
}
@media (max-width:767.98px){
  .bg-music-toggle{left:.75rem;bottom:calc(4.6rem + env(safe-area-inset-bottom,0px));
    width:var(--tap);height:var(--tap)}
}

/* ---------------------------------------------------------------- touch targets
   Below the tablet breakpoint every control a finger has to hit gets at least a
   44px hit area (WCAG 2.5.5 / iOS HIG). Padding grows rather than font size, so
   the visual weight of the design is unchanged. */
@media (max-width: 767.98px) {
  .btn,
  .btn-sm,
  .navbar-toggler,
  .chip.lookup-chip,
  .station-item,
  .station-row {
    min-height: 44px;
  }

  .btn,
  .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .chip.lookup-chip {
    display: inline-flex;
    align-items: center;
    padding-block:var(--space-2);
  }

  /* Form controls must clear 44px and stay at >=16px so iOS does not zoom
     the viewport when the field takes focus. */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 16px;
  }

  /* Long unbroken tokens (EPIC numbers, station names) must wrap, not overflow. */
  .lookup-result strong,
  .lookup-result h3 {
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------ skeleton lines
   `.skeleton` and `@keyframes shimmer` are each declared twice earlier in this
   file; the later pair wins and paints via a ::after sweep. `.skeleton-line`
   only ever set height/margin, so a standalone loading line rendered as an
   invisible 12px box. Give it the same treatment as `.skeleton` so the loading
   state is actually visible. */
.skeleton-line {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  height: 12px;
  margin-bottom:var(--space-2);
}

.skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: shimmer 1.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line::after { animation: none; }
}

/* The touch UI (bottom nav, FAB, hamburger) runs to 991px, so the 44px minimum
   has to reach the same breakpoint rather than stopping at 767.98px. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .btn, .btn-sm, .navbar-toggler, .chip.lookup-chip,
  .station-item, .station-row { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; }
}

/* ------------------------------------------------------- mobile header layout
   Below the lg breakpoint the fixed bottom bar is shown, and its "Menu" item
   already toggles the very same #mainNav collapse as the header hamburger. Two
   controls for one panel is redundant, and the hamburger was also forcing the
   brand onto a second row, so hide it there. With it gone the brand is the only
   item on the row and Bootstrap's own navbar layout drops the collapse panel
   underneath correctly, so no flex overrides are needed. */
@media (max-width: 991.98px) {
  .navbar-main .navbar-toggler {
    display: none !important;
  }
}

/* Ellipsis is handled in the base .brand-name/.brand-role rules now, so this
   breakpoint only needs to widen the allowance on small screens. */
@media (max-width: 575.98px) {
  .brand-mark { max-width: 72vw; }
}

/* --------------------------------------------------- fixed-control clearance
   body{padding-bottom:var(--space-10)} clears the bottom nav only. The .fab sits a further
   5.5rem up and the music toggle beside it, so both float over whatever the page
   ends with — on /find-your-booth that was the Search button. Reserve enough
   room below the last content for the whole stack. */
@media (max-width: 991.98px) {
  body {
    padding-bottom: calc(66px + 5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* The floating map button duplicates an on-page control on the booth pages and
   floats over the primary Search action there, so hide it on those routes.
   Body classes are set from the layout. */
body.route-booth-lookup .fab { display: none; }

/* ======================================================================
   SPACING SYSTEM — applied
   Bootstrap's container/row/gutter defaults are re-pointed at the design
   tokens so the whole product shares one scale instead of a mix of g-3/g-4/
   g-5 and ad-hoc rem values.
   ====================================================================== */

/* Page gutter: one value, fluid, used by every container. */
.container,
.container-fluid,
.container-lg,
.container-xl {
  padding-inline: var(--gutter);
}

/* Grid gutters follow the token, so a `g-*` class cannot exceed the viewport
   on a 320px screen (Bootstrap's g-5 is a fixed 3rem and did). */
.row {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: 0;
}
.row.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.row.g-1, .row.gy-1 { --bs-gutter-y: var(--space-1); }
.row.g-2, .row.gy-2 { --bs-gutter-y: var(--space-2); }
.row.g-3, .row.gy-3 { --bs-gutter-y: var(--space-3); }
.row.g-4, .row.gy-4 { --bs-gutter-y: var(--space-4); }
.row.g-5, .row.gy-5 { --bs-gutter-y: var(--space-7); }

/* Section rhythm */
.section     { padding-block: var(--section-y); }
.section-sm  { padding-block: var(--section-y-sm); }
.section.pt-0, .section-sm.pt-0 { padding-top: 0; }
.section.pb-0, .section-sm.pb-0 { padding-bottom: 0; }

/* Cards share one internal padding rather than per-instance p-3/p-4/p-md-5. */
.card-premium { padding: var(--card-pad); }
.card-premium.p-0 { padding: 0; }

/* Controls: one height scale, all meeting the touch minimum on small screens. */
.btn {
  min-height: var(--btn-h);
  padding-inline: var(--btn-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-lg { min-height: var(--btn-h-lg); }
.btn-sm { min-height: var(--btn-h-sm); padding-inline: var(--btn-pad-x-sm); }
.form-control, .form-select { min-height: var(--input-h); }

/* Bootstrap's close button ships at 31px — under the touch minimum. */
.btn-close {
  /* Bootstrap ships this content-box at 1em, so a bare min-height stacks on
     top of the padding. Size it explicitly instead. */
  box-sizing: border-box;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background-position: center;
  background-size: .85em;
  border-radius: var(--r-pill);
}

/* Prose measure: stops long paragraphs running to uncomfortable line lengths
   on wide screens without capping layout containers. */
.measure { max-width: var(--measure); }

@media (max-width: 991.98px) {
  /* Every control a finger uses clears 44px, and inputs stay >=16px so iOS
     does not zoom the viewport on focus. */
  .btn, .btn-sm, .btn-lg,
  .form-control, .form-select,
  .chip.lookup-chip, .station-item, .station-row { min-height: var(--tap); }
  .form-control, .form-select { font-size: 16px; }
}

@media (max-width: 575.98px) {
  /* Two of these sit side by side in col-6; below ~576px the icon and text
     cannot share a row without overflowing, so stack them. */
  .quick-card { flex-direction: column; gap: var(--space-2); }
  .quick-card .ic { width: 38px; height: 38px; }
}

/* ----------------------------------------------------------------------
   Dropdowns must clear the capsule, not overlap its curve.
   The capsule centres a shorter link row inside its min-height, so the gap
   between a nav item and the capsule edge varies. Stretching the row makes
   that edge predictable, and the menu offset is then just the capsule's own
   padding + border + the gap we want.
   ---------------------------------------------------------------------- */
.nav-capsule-inner { align-self: stretch; }
.nav-links { align-self: stretch; }
.nav-links .nav-item { display: flex; align-items: center; align-self: stretch; }
.nav-links .dropdown-menu {
  margin-top: calc(var(--space-2) + 1px + var(--space-2));
}
.site-header.scrolled .nav-links .dropdown-menu {
  margin-top: calc(var(--space-1) + 1px + var(--space-2));
}