/* ================================================================
   Lanka Food Palace UK Ltd — Stylesheet
   All colours / fonts / sizes live in theme.css — edit there.
   ================================================================ */

/* ── Full-page scroll snap ─────────────────────────────────────── */
/*
   scroll-snap-type: y mandatory  → browser handles snap natively (GPU, no JS cost)
   scroll-snap-stop: always       → guarantees one section at a time,
                                    even on fast trackpad / momentum swipes
*/
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    height: 100%;
}

/* Ensure anchors and programmatic scrolls account for fixed navbar */
:root { scroll-padding-top: var(--nav-h); }

/* Improve touch scrolling behaviour on mobile */
html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
    font-family: var(--ff-body);
    background:  var(--c-dark);
    color:       var(--c-text);
    line-height: 1.75;
    overflow-x:  hidden;
    -webkit-font-smoothing: antialiased;
}
img    { max-width:100%; height:auto; display:block; }
a      { color:inherit; text-decoration:none; }
ul     { list-style:none; }
button { font-family:inherit; }
strong { color:var(--c-primary-dk); font-weight:600; }   /* darker blue = readable on white */

/* Italic accent */
em {
    font-family: var(--ff-display);
    font-style:  italic;
    color: var(--c-primary-lt);
}

/* ── Layout ────────────────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 28px; }

/* ── Image Placeholders ────────────────────────────────────────── */
.img-ph {
    display: block; width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    object-fit: cover;
    transition: box-shadow var(--t-fast);
}
.img-ph:hover { box-shadow: var(--sh); }

/* Compact variants */
.brand-logo-ph { width: 76px; min-width: 76px; height: 76px; border-radius: 14px; }

/* ── Logo images ───────────────────────────────────────────────── */
.nav-logo-img {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 10px; object-fit: contain;
    background: #000; display: block;
}
.footer-logo-img {
    width: 64px; height: 64px; min-width: 64px;
    border-radius: 12px; object-fit: contain;
    background: #000; display: block;
}

/* ── Navbar ────────────────────────────────────────────────────── */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--nav-h);
    background: rgba(255,255,255,0.94);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    backdrop-filter: blur(14px);
    transition: background var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.navbar.hero,
.navbar.scrolled {
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
}
.navbar.hero .nav-brand,
.navbar.scrolled .nav-brand { color: var(--c-primary-dk); }
.navbar.hero .nav-sub,
.navbar.scrolled .nav-sub { color: var(--c-muted); }
.navbar.hero .nav-link,
.navbar.scrolled .nav-link { color: var(--c-primary-dk); }
.navbar.hero .nav-link:hover,
.navbar.scrolled .nav-link:hover { color: var(--c-primary-dk); background: rgba(var(--c-primary-rgb), .1); }
.navbar.hero .nav-toggle span,
.navbar.scrolled .nav-toggle span { background: var(--c-text); }
.navbar .nav-brand,
.navbar .nav-sub,
.navbar .nav-link { color: var(--c-primary-dk) !important; }
.navbar .nav-link.active   { background: var(--c-primary) !important; color: #fff !important; box-shadow: 0 3px 14px rgba(var(--c-primary-rgb), .28); }
.navbar .nav-toggle span { background: var(--c-text) !important; }
.nav-container {
    max-width: var(--max-w); margin: 0 auto; padding: 0 28px;
    height: 100%; display: flex; align-items: center; gap: 20px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-brand {
    font-family: var(--ff-display); font-size: .98rem; font-weight: 700;
    color: var(--c-primary-lt); white-space: nowrap;
}
.nav-sub { font-size: .68rem; color: var(--c-muted); letter-spacing: 1.2px; text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
    padding: 8px 14px; font-size: .875rem; font-weight: 500;
    color: var(--c-primary-dk); border-radius: var(--r-sm);
    transition: color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
}
.nav-link:hover { color: var(--c-primary-dk); background: rgba(var(--c-primary-rgb), .1); }
.nav-link.active {
    background: var(--c-primary); color: #fff !important;
    border-radius: 100px; font-weight: 600;
    box-shadow: 0 3px 14px rgba(var(--c-primary-rgb), .28);
}
.nav-link.nav-cta:hover {
    background:  rgba(var(--c-primary-rgb), .1);
    color: var(--c-primary-dk);
}
.nav-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px;
}
.nav-toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--c-text); border-radius: 2px; transition: var(--t-fast);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg);   }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0);           }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navbar over dark hero — keep text readable on transparent bg */

/* ── Hero Section ──────────────────────────────────────────────── */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: #0D1B2E;
}
.hero::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 65% at 18% 48%, rgba(10,61,143,.55) 0%, transparent 65%),
        radial-gradient(ellipse 48% 52% at 82% 22%, rgba(201,168,76,.09) 0%, transparent 58%),
        radial-gradient(ellipse 40% 45% at 62% 88%, rgba(0,17,46,.6) 0%, transparent 55%);
    animation: heroGlow 10s ease-in-out infinite;
}
@keyframes heroGlow {
    0%, 100% { opacity: 1; }
    50%       { opacity: .68; }
}

/* Hero dark-background text overrides */
.hero .hero-line         { color: #FFFFFF; }
.hero .hero-line-accent  { color: #A8BCD8; }
.hero .hero-tagline      { color: rgba(255,255,255,.65); }
.hero .hero-brand-chip   { color: rgba(255,255,255,.55); }
.hero .hero-dot          { color: rgba(255,255,255,.3); }
.hero .hero-scroll span  { color: rgba(255,255,255,.45); }
.hero .btn-primary {
    background: #fff; color: var(--c-primary);
    box-shadow: 0 4px 22px rgba(0,0,0,.25);
}
.hero .btn-primary:hover {
    background: var(--c-dark-3); color: var(--c-primary-dk);
    box-shadow: 0 8px 34px rgba(0,0,0,.35);
}
.hero .btn-outline {
    color: rgba(255,255,255,.88);
    border-color: rgba(255,255,255,.35);
}
.hero .btn-outline:hover {
    background:   rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.7);
    color: #fff;
}

.hero-content {
    position: relative; z-index: 2; text-align: center;
    padding: 0 24px; max-width: 900px; margin: 0 auto;
    padding-top: var(--nav-h);
}
.hero-title {
    font-family: var(--ff-display);
    font-size: clamp(3rem, 8.5vw, 7rem);
    font-weight: 700; line-height: 1.04;
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 30px;
}
.hero-line        { display: block; color: var(--c-cream); }
.hero-line-accent {
    color: var(--c-primary-lt);
    font-style: normal;
}
.hero-tagline {
    font-size: clamp(1rem, 2.4vw, 1.22rem);
    color: var(--c-muted); max-width: 600px; margin: 0 auto 44px;
    line-height: 1.85; font-weight: 300;
}
.hero-cta    { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; }
.hero-brands { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-brand-chip { font-size: .8rem; color: var(--c-muted); font-weight: 500; letter-spacing: .5px; }
.hero-dot        { color: var(--c-primary); font-size: 1.4rem; }

/* ── Brands preview row (two cards side-by-side) ─────────────── */
.brands-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; margin: 28px 0 48px;
}
.brands-preview .preview-card {
    background: var(--c-card); border-radius: var(--r-md); padding: 18px; display: flex; gap: 18px; align-items: center; box-shadow: var(--sh);
}
.preview-card .preview-info { flex: 1; }
.preview-card h4 { margin-bottom: 6px; font-size: 1.06rem; }
.preview-card p { color: var(--c-muted); font-size: .95rem; line-height: 1.45; }
.preview-card .btn { margin-top: 10px; }

@media (max-width: 860px) {
    .brands-preview { grid-template-columns: 1fr; }
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 32px; border-radius: 100px;
    font-weight: 600; font-size: .94rem;
    cursor: pointer; border: none;
    transition: all var(--t-fast); white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t-fast); flex-shrink: 0; }

.btn-primary {
    background: var(--c-primary);
    color: #fff; box-shadow: 0 4px 22px rgba(var(--c-primary-rgb), .3);
}
.btn-primary:hover {
    background:  var(--c-primary-lt);
    transform:   translateY(-2px);
    box-shadow:  0 8px 34px rgba(var(--c-primary-rgb), .44);
}
.btn-primary:hover svg { transform: translateX(4px); }

.btn-outline {
    background: transparent; color: var(--c-primary-lt);
    border: 1.5px solid rgba(var(--c-primary-rgb), .38);
}
.btn-outline:hover {
    background: rgba(var(--c-primary-rgb), .1);
    border-color: var(--c-primary); transform: translateY(-2px);
}

/* ── Hero one-shot reveals ─────────────────────────────────────── */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    animation: revealUp .72s var(--ease) both;
    animation-delay: var(--delay, 0s);
}
@keyframes revealUp { to { opacity: 1; transform: none; } }

/* ── Scroll-triggered animations ──────────────────────────────── */
.anim-el {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
    transition-delay: var(--delay, 0s);
}
.anim-el.from-left  { transform: translateX(-44px); }
.anim-el.from-right { transform: translateX( 44px); }
.anim-el.visible    { opacity: 1; transform: none; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .anim-el, .anim-el.visible { transition: none !important; animation: none !important; }
    .btn, .nav-toggle, .nav-link { transition: none !important; }
}

/* ── Scroll-snap targets ───────────────────────────────────────── */
#hero,
.section,
.footer {
    scroll-snap-align: start;      /* snap to top of each section   */
    scroll-snap-stop:  always;     /* never skip — one page at once */
    min-height: 100vh;             /* each section fills the screen */
}
.footer { min-height: auto; }     /* footer doesn't need full-vh   */

/* ── Sections shared ───────────────────────────────────────────── */
.section { padding: 108px 0; position: relative; }
.decorative-line {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 80px;
    background: linear-gradient(to bottom, transparent, var(--c-primary));
    opacity: .5;
}
.section-header { text-align: center; margin-bottom: 68px; }
.section-tag {
    display: inline-block; font-size: .72rem; font-weight: 600;
    letter-spacing: 2.8px; text-transform: uppercase;
    color: var(--c-primary); margin-bottom: 14px;
    position: relative; padding: 0 22px;
}
.section-tag::before,
.section-tag::after {
    content: ''; position: absolute; top: 50%;
    width: 28px; height: 1px; background: var(--c-primary); opacity: .5;
}
.section-tag::before { right: 100%; margin-right: -16px; }
.section-tag::after  { left:  100%; margin-left:  -16px; }

.section-title {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    font-weight: 700; color: var(--c-cream); line-height: 1.14; margin-bottom: 18px;
}
.section-desc { font-size: 1.04rem; color: var(--c-muted); max-width: 560px; margin: 0 auto; line-height: 1.85; }

/* ── About Section ─────────────────────────────────────────────── */
.about-section { background: var(--c-dark); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.about-lead { font-size: 1.16rem; color: var(--c-text); font-weight: 300; line-height: 1.9; margin-bottom: 22px; }
.about-body { color: var(--c-muted); line-height: 1.9; margin-bottom: 20px; font-size: .98rem; }
.about-highlight {
    position: relative;
    background: rgba(var(--c-primary-rgb), .08);
    border: 1px solid rgba(var(--c-primary-rgb), .25);
    border-radius: var(--r-md);
    padding: 22px 24px 22px 28px;
    margin-bottom: 20px;
    overflow: hidden;
}
.about-highlight-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--c-primary-lt);
    border-radius: 4px 0 0 4px;
}
.about-highlight p {
    color: var(--c-cream);
    font-size: 1.06rem;
    line-height: 1.85;
    margin: 0;
}
.about-highlight strong {
    color: var(--c-primary-lt);
    font-weight: 700;
}

.about-quote {
    margin-top: 36px; padding: 22px 28px;
    background:   rgba(var(--c-primary-rgb), .07);
    border-left:  3px solid var(--c-primary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.about-quote blockquote {
    font-family: var(--ff-display); font-style: italic;
    font-size: 1.05rem; color: var(--c-text); line-height: 1.8;
}
.about-visual { display: flex; flex-direction: column; gap: 20px; }
.about-img-ph { width: 100%; min-height: 300px; border-radius: var(--r-xl); border: 3px solid var(--c-primary); box-shadow: var(--sh-lg); }

.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card {
    background: var(--c-card); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: 26px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.stat-card:hover { transform: translateY(-4px); border-color: var(--c-border-h); box-shadow: var(--sh); }
.stat-num  { font-family: var(--ff-display); font-size: 2.4rem; font-weight: 700; color: var(--c-gold); line-height: 1; display: inline; }
.stat-unit { font-family: var(--ff-display); font-size: 1.7rem; color: var(--c-gold); font-weight: 700; }
.stat-icon { font-size: 2rem; line-height: 1; }
.stat-lbl  { font-size: .78rem; color: var(--c-muted); font-weight: 500; line-height: 1.45; }

/* ── Brands Section ────────────────────────────────────────────── */
.brands-section { background: var(--c-dark-2); }
.brand-card {
    background: var(--c-card); border: 1px solid var(--c-border);
    border-radius: var(--r-xl); overflow: hidden; margin-bottom: 52px;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.brand-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--c-primary-rgb), .28);
    box-shadow: var(--sh-lg);
}
/* Brand card — dark hero banner with centred logo */
.brand-hero-dark {
    position: relative; overflow: hidden;
    background: #0D1B2E;
    min-height: 260px;
    display: flex; align-items: center; justify-content: center;
    padding: 52px 40px;
}
.brand-hero-dark::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 80% at 15% 50%, rgba(var(--c-primary-rgb), .38) 0%, transparent 62%),
        radial-gradient(ellipse 55% 60% at 85% 25%, rgba(var(--c-gold-rgb), .09) 0%, transparent 55%),
        radial-gradient(ellipse 45% 50% at 60% 90%, rgba(0,17,46,.5) 0%, transparent 55%);
}
.brand-hero-logo {
    position: relative; z-index: 1;
    width: 220px; max-width: 58%;
    object-fit: contain;
    filter: drop-shadow(0 12px 32px rgba(0,0,0,.55));
    transition: transform var(--t-med);
}
.brand-card:hover .brand-hero-logo { transform: scale(1.05); }
.brand-loc-badge {
    position: absolute; bottom: 20px; right: 20px; z-index: 2;
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
    padding: 7px 16px; border-radius: 100px;
    font-size: .76rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
}
.brand-body      { padding: 40px; }
.brand-head      { margin-bottom: 26px; }
.brand-title-col { flex: 1; }
.brand-name  { font-family: var(--ff-display); font-size: 1.85rem; font-weight: 700; color: var(--c-cream); line-height: 1.25; margin-bottom: 0; }
.brand-name-accent {
    width: 48px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), var(--c-primary));
    margin: 12px 0 16px;
}
.brand-cta { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--c-border); }

/* Herb brand — green-tinted hero overlay */
.brand-hero-herb::before {
    background:
        radial-gradient(ellipse 70% 80% at 15% 50%, rgba(30,90,40,.45) 0%, transparent 62%),
        radial-gradient(ellipse 55% 60% at 85% 25%, rgba(120,200,80,.07) 0%, transparent 55%),
        radial-gradient(ellipse 45% 50% at 60% 90%, rgba(0,17,46,.5) 0%, transparent 55%);
}
.brand-hero-herb-banner::before {
    background:
        radial-gradient(ellipse 65% 65% at 18% 48%, rgba(30,90,40,.5) 0%, transparent 65%),
        radial-gradient(ellipse 48% 52% at 82% 22%, rgba(120,200,80,.08) 0%, transparent 58%),
        radial-gradient(ellipse 40% 45% at 62% 88%, rgba(0,17,46,.6) 0%, transparent 55%);
}
/* Herb inner page — feature logo area */
.brand-herb-hero-img {
    background: #0D1B2E; border-radius: var(--r-xl); margin-bottom: 32px;
    min-height: 260px; display: flex; align-items: center; justify-content: center;
    padding: 48px; position: relative; overflow: hidden;
}
.brand-herb-hero-img::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 80% at 20% 50%, rgba(30,90,40,.4) 0%, transparent 62%),
        radial-gradient(ellipse 55% 60% at 80% 30%, rgba(120,200,80,.07) 0%, transparent 55%);
}
.brand-herb-feature-logo {
    position: relative; z-index: 1;
    width: 200px; max-width: 55%; object-fit: contain;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.5));
}
.brand-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
    background: rgba(var(--c-primary-rgb), .1);
    border:     1px solid rgba(var(--c-primary-rgb), .22);
    color: var(--c-muted); padding: 4px 13px; border-radius: 100px;
    font-size: .74rem; font-weight: 500;
}
.brand-desc { color: var(--c-muted); line-height: 1.9; margin-bottom: 16px; font-size: .97rem; }
.brand-gallery-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 26px 0; }
.gph-sm { width: 100%; aspect-ratio: 4/3; border-radius: var(--r-md); object-fit: cover; display: block; }
.brand-highlights {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 22px; border-top: 1px solid var(--c-border);
}
.brand-highlights li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--c-muted); }
.brand-highlights li svg { color: var(--c-primary); flex-shrink: 0; }

/* ── Services Section ──────────────────────────────────────────── */
.services-section { background: var(--c-dark); }
.services-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.svc-card {
    background: var(--c-card); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: 42px;
    position: relative; overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.svc-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-lt));
    opacity: 0;
    transition: opacity var(--t-fast);
}
.svc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--c-primary-rgb), .25);
    box-shadow: var(--sh-lg);
}
.svc-card:hover::before { opacity: 1; }
.svc-icon {
    width: 66px; height: 66px;
    background: rgba(var(--c-primary-rgb), .1);
    border:     1px solid rgba(var(--c-primary-rgb), .2);
    border-radius: 18px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 26px;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.svc-card:hover .svc-icon {
    background: rgba(var(--c-primary-rgb), .18);
    border-color: rgba(var(--c-primary-rgb), .4);
    transform: scale(1.1);
}
.svc-icon svg { width: 30px; height: 30px; color: var(--c-primary-lt); }
.svc-title { font-family: var(--ff-display); font-size: 1.28rem; font-weight: 600; color: var(--c-cream); margin-bottom: 14px; line-height: 1.3; }
.svc-desc  { color: var(--c-muted); font-size: .95rem; line-height: 1.85; }

/* ── Gallery Section ───────────────────────────────────────────── */
.gallery-section { background: var(--c-dark-2); }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto;
    gap: 16px;
}
.gph       { width: 100%; min-height: 220px; border-radius: var(--r-md); transition: transform var(--t-med), box-shadow var(--t-med); }
.gph:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.gph-tall  { grid-row: 1/3; min-height: 456px; }
.gph-wide  { grid-column: 2/4; }

/* ── Vision Section ────────────────────────────────────────────── */
.vision-section { background: var(--c-dark); position: relative; }
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; position: relative; }
.vision-icon-box {
    width: 82px; height: 82px;
    background: rgba(var(--c-primary-rgb), .1);
    border:     1.5px solid rgba(var(--c-primary-rgb), .3);
    border-radius: 22px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px;
}
.vision-icon-box svg { width: 38px; height: 38px; color: var(--c-primary-lt); }
.vision-title { font-family: var(--ff-display); font-size: 1.9rem; font-weight: 700; color: var(--c-cream); line-height: 1.28; margin-bottom: 24px; }
.vision-desc  { color: var(--c-muted); line-height: 1.9; margin-bottom: 16px; font-size: .97rem; }
.vision-features { display: flex; flex-direction: column; gap: 20px; margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--c-border); }
.vision-feat { display: flex; align-items: flex-start; gap: 16px; }
.vf-icon {
    flex-shrink: 0; width: 50px; height: 50px;
    background: rgba(var(--c-primary-rgb), .1);
    border: 1px solid rgba(var(--c-primary-rgb), .2);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.vf-icon svg {
    width: 22px; height: 22px;
    color: var(--c-primary-lt);
}
.vision-feat:hover .vf-icon {
    background: rgba(var(--c-primary-rgb), .18);
    border-color: rgba(var(--c-primary-rgb), .42);
    transform: translateY(-3px) scale(1.06);
}.vision-feat strong { display: block; color: var(--c-text); margin-bottom: 4px; font-size: .94rem; }
.vision-feat p      { color: var(--c-muted); font-size: .84rem; line-height: 1.55; margin: 0; }
.vision-imgs    { display: flex; flex-direction: column; gap: 16px; }
.vision-ph-main { width: 100%; min-height: 270px; border-radius: var(--r-xl); }
.vision-ph-sub  { width: 100%; min-height: 160px; border-radius: var(--r-md); }

/* ── Contact Section ───────────────────────────────────────────── */
.contact-section { background: var(--c-dark-2); }
.contact-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.contact-card {
    background: var(--c-card); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: 36px 28px;
    display: flex; flex-direction: column; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.contact-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-lt));
    opacity: 0; transition: opacity var(--t-fast);
}
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(var(--c-primary-rgb), .25); }
.contact-card:hover::before { opacity: 1; }
.contact-card-icon {
    width: 56px; height: 56px; flex-shrink: 0;
    background: rgba(var(--c-primary-rgb), .1);
    border: 1px solid rgba(var(--c-primary-rgb), .2);
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
}
.contact-card-icon svg { width: 26px; height: 26px; color: var(--c-primary-lt); }
.contact-card-label {
    font-size: .7rem; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase;
    color: var(--c-primary);
}
.contact-card-values { display: flex; flex-direction: column; gap: 5px; }
.contact-card-values span,
.contact-card-values a {
    font-size: .97rem; color: var(--c-text); line-height: 1.65; text-decoration: none;
}
.contact-card-values a:hover { color: var(--c-primary); }

/* ── Footer ────────────────────────────────────────────────────── */
.footer     { background: #0D1B2E; border-top: 1px solid rgba(255,255,255,.08); }
.footer-top { padding: 80px 0 52px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px; }
.footer-brand-col  { display: flex; flex-direction: column; gap: 14px; }
.footer-brand-name { font-family: var(--ff-display); font-size: 1.08rem; color: #fff; line-height: 1.35; }
.footer-tagline    { color: rgba(255,255,255,.55); font-size: .875rem; line-height: 1.75; }
.footer-col-title  { font-size: .72rem; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 20px; }
.footer-links      { display: flex; flex-direction: column; gap: 10px; }
.footer-links a    { font-size: .88rem; color: rgba(255,255,255,.55); transition: color var(--t-fast); }
.footer-links a:hover { color: #fff; }
.footer-social     { display: flex; gap: 10px; margin-bottom: 14px; }
.social-btn {
    width: 42px; height: 42px; border-radius: 11px;
    background: rgba(255,255,255,.08);
    border:     1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.social-btn svg   { width: 18px; height: 18px; }
.social-btn:hover {
    background:   rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.3);
    color: #fff; transform: translateY(-2px);
}
.footer-social-note { font-size: .78rem; color: rgba(255,255,255,.3); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 26px 0; text-align: center; }
.footer-copy   { font-size: .84rem; color: rgba(255,255,255,.45); line-height: 1.6; }
.footer-sub    { font-size: .74rem; color: rgba(255,255,255,.25); margin-top: 4px; }

/* ── Page dots navigation (right side) ────────────────────────── */
.page-dots {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 9px;
    background: rgba(var(--c-dark-rgb), .65);
    border: 1px solid var(--c-border);
    border-radius: 24px;
}
.page-dot {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none; padding: 0; cursor: pointer;
    background: rgba(var(--c-primary-rgb), .28);
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
/* Tooltip label */
.page-dot::after {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%; transform: translateY(-50%);
    background: rgba(var(--c-dark-rgb), .92);
    color: var(--c-cream);
    font-family: var(--ff-body);
    font-size: .7rem; font-weight: 500;
    white-space: nowrap;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast);
}
.page-dot:hover::after { opacity: 1; }
.page-dot.active {
    background: var(--c-primary);
    transform: scale(1.6);
    box-shadow: 0 0 10px rgba(var(--c-primary-rgb), .55);
}
.page-dot:hover:not(.active) {
    background: rgba(var(--c-primary-rgb), .6);
    transform: scale(1.25);
}
/* Hide dots on mobile — not enough space */
@media (max-width: 900px) { .page-dots { display: none; } }

/* ── Back to top ───────────────────────────────────────────────── */
.back-to-top {
    position: fixed; bottom: 30px; right: 30px; z-index: 900;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--c-primary);
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(var(--c-primary-rgb), .35);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.back-to-top svg     { width: 22px; height: 22px; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover   { box-shadow: 0 6px 26px rgba(var(--c-primary-rgb), .52); transform: translateY(-3px); }

/* ── Brand inner pages ─────────────────────────────────────────── */
html:has(body.page-inner) { scroll-snap-type: none; }
body.page-inner .section,
body.page-inner .footer {
    scroll-snap-align: none; scroll-snap-stop: normal; min-height: auto;
}

.brand-hero-banner {
    background: #0D1B2E;
    padding: calc(var(--nav-h) + 88px) 0 88px;
    position: relative; overflow: hidden; text-align: center;
}
.brand-hero-banner::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 60% at 22% 50%, rgba(10,61,143,.48) 0%, transparent 65%),
        radial-gradient(ellipse 45% 50% at 80% 22%, rgba(201,168,76,.09) 0%, transparent 55%);
}
.brand-hero-banner .container { position: relative; z-index: 1; }
.brand-hero-tag  { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: 2.8px; text-transform: uppercase; color: var(--c-gold); margin-bottom: 18px; }
.brand-hero-name { font-family: var(--ff-display); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 14px; }
.brand-hero-city { font-size: 1rem; color: rgba(255,255,255,.5); letter-spacing: .4px; }

.brand-inner-content { padding: 80px 0; }
.brand-inner-grid {
    display: grid; grid-template-columns: 1fr 380px; gap: 52px; align-items: start;
}

.brand-back-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .875rem; color: var(--c-primary); font-weight: 500;
    transition: gap var(--t-fast), color var(--t-fast);
    margin-bottom: 44px;
}
.brand-back-link:hover { color: var(--c-primary-lt); gap: 13px; }
.brand-back-link svg   { width: 16px; height: 16px; flex-shrink: 0; }

.brand-inner-main .img-ph { border-radius: var(--r-xl); margin-bottom: 32px; aspect-ratio: 16/9; object-fit: cover; }
.brand-inner-photo {
    width: 100%; border-radius: var(--r-xl); margin-bottom: 32px;
    aspect-ratio: 16/9; object-fit: cover;
    box-shadow: var(--sh-lg); display: block;
}
.brand-photo-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px;
}
.brand-photo-thumb {
    width: 100%; border-radius: var(--r-md);
    aspect-ratio: 4/3; object-fit: cover;
    box-shadow: var(--sh); display: block;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.brand-photo-thumb:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.brand-inner-main h3 { font-family: var(--ff-display); font-size: 1.6rem; color: var(--c-cream); margin-bottom: 18px; line-height: 1.3; }
.brand-inner-main p  { color: var(--c-muted); line-height: 1.9; margin-bottom: 16px; font-size: .97rem; }

.brand-inner-aside { position: sticky; top: calc(var(--nav-h) + 28px); display: flex; flex-direction: column; gap: 20px; }
.brand-aside-logo {
    width: 100%; border-radius: var(--r-lg);
    background: #0D1B2E; padding: 32px;
    object-fit: contain; display: block;
    box-shadow: var(--sh-lg);
    border: 1px solid rgba(var(--c-primary-rgb), .18);
}

.brand-highlights-card {
    background: var(--c-dark-2); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: 28px 26px;
}
.brand-highlights-card h4 { font-family: var(--ff-display); font-size: 1.05rem; color: var(--c-cream); margin-bottom: 18px; }
.brand-highlights-card ul { display: flex; flex-direction: column; gap: 13px; }
.brand-highlights-card li {
    display: flex; align-items: center; gap: 12px;
    color: var(--c-muted); font-size: .91rem; line-height: 1.5;
}
.brand-highlights-card li::before {
    content: ''; display: block; flex-shrink: 0;
    width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary);
}

@media (max-width: 900px) {
    .brand-inner-grid  { grid-template-columns: 1fr; }
    .brand-inner-aside { position: static; }
    .brand-inner-content { padding: 52px 0; }
    .brand-hero-banner { padding: calc(var(--nav-h) + 60px) 0 60px; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .about-grid    { grid-template-columns: 1fr; gap: 44px; }
    .about-visual  { order: -1; }
    .about-img-ph  { min-height: 240px; }
    .services-grid { grid-template-columns: 1fr; }          /* 3 → 1 col on tablet */
    .vision-grid   { grid-template-columns: 1fr; gap: 44px; }
    .footer-grid   { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand-col { grid-column: 1/-1; flex-direction: row; align-items: flex-start; gap: 18px; }
    /* Directional anims fall back to fade-up on tablet (avoids edge clipping) */
    .anim-el.from-left,
    .anim-el.from-right { transform: translateY(34px); }
}

@media (max-width: 768px) {
    :root { --nav-h: 62px; }
    .section   { padding: 76px 0; }
    .container { padding: 0 20px; }

    .nav-links {
        position: fixed; top: var(--nav-h); left: 0; right: 0;
        background: #0D1B2E;
        flex-direction: column; padding: 24px 20px 32px; gap: 4px;
        border-bottom: 1px solid rgba(255,255,255,.1);
        transform: translateY(-110%); opacity: 0; visibility: hidden;
        transition: transform var(--t-slow), opacity var(--t-slow), visibility var(--t-slow);
        z-index: 999;
    }
    .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-link       { width: 100%; padding: 13px 18px; font-size: 1rem; border-radius: var(--r-md); color: rgba(255,255,255,.75); }
    .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
    .nav-link.active { background: #fff !important; color: var(--c-primary) !important; font-weight: 600; border-radius: 100px; }
    .nav-link.nav-cta { margin-top: 0; }
    /* Override the desktop !important rule so mobile menu text is visible on dark bg */
    .navbar .nav-link           { color: rgba(255,255,255,.80) !important; }
    .navbar .nav-link:hover     { color: #fff !important; background: rgba(255,255,255,.1) !important; }
    .navbar .nav-link.active    { background: #fff !important; color: var(--c-primary) !important; }
    .nav-toggle { display: flex; margin-left: auto; }

    .hero-content { padding: calc(var(--nav-h) + 24px) 20px 20px; }
    .hero-title   { font-size: clamp(2.4rem, 11vw, 3.8rem); }
    .hero-cta     { flex-direction: column; align-items: center; }
    .btn          { width: 100%; max-width: 310px; justify-content: center; }

    .services-grid { grid-template-columns: 1fr; }   /* 3 → 1 col on mobile */
    .gallery-grid  { grid-template-columns: 1fr 1fr; }
    .gph-tall      { grid-row: auto; grid-column: 1/-1; min-height: 220px; }
    .gph-wide      { grid-column: 1/-1; }
    .brand-body    { padding: 26px; }
    .contact-grid  { grid-template-columns: 1fr 1fr; }
    .footer-grid   { grid-template-columns: 1fr; gap: 30px; }
    .footer-brand-col { flex-direction: row; gap: 14px; }
    .back-to-top   { bottom: 20px; right: 20px; width: 42px; height: 42px; }
}

@media (max-width: 480px) {
    .section       { padding: 60px 0; }
.hero-brands   { flex-direction: column; gap: 6px; }
    .hero-dot      { display: none; }
    .stats-row     { grid-template-columns: 1fr 1fr; }
    .brand-head    { flex-wrap: wrap; }
    .brand-gallery-row { grid-template-columns: 1fr 1fr; }
    .brand-gallery-row .gph-sm:last-child { grid-column: 1/-1; }
    .gallery-grid  { grid-template-columns: 1fr; }
    .svc-card      { padding: 30px 24px; }
    .contact-grid  { grid-template-columns: 1fr; }
    .section-title { font-size: 1.9rem; }
    .footer-brand-col { flex-direction: column; }
}

/* ── Dark Mode — component overrides ──────────────────────────── */
/*
   CSS variables in theme.css handle backgrounds, text, and borders
   automatically. The rules below fix elements that use hardcoded
   rgba(255,255,255,...) or rgba(0,...) values, or have !important
   overrides that need matching !important responses.
*/
@media (prefers-color-scheme: dark) {

    /* Inline semantics */
    strong { color: var(--c-cream); }
    em     { color: var(--c-gold-lt); }

    /* ── Navbar ── */
    .navbar {
        background: rgba(13, 20, 33, 0.90);
        border-bottom: 1px solid rgba(255,255,255,.07);
        box-shadow: 0 8px 28px rgba(0,0,0,.35);
    }
    .navbar.hero,
    .navbar.scrolled {
        background: rgba(13, 20, 33, 0.96);
        border-bottom: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 8px 28px rgba(0,0,0,.40);
    }
    /* Override the global !important color rule for nav links */
    .navbar .nav-brand              { color: rgba(255,255,255,.92) !important; }
    .navbar .nav-sub                { color: rgba(255,255,255,.42) !important; }
    .navbar .nav-link               { color: rgba(255,255,255,.76) !important; }
    .navbar.hero .nav-link,
    .navbar.scrolled .nav-link      { color: rgba(255,255,255,.76) !important; }
    .navbar .nav-link:hover,
    .navbar.hero .nav-link:hover,
    .navbar.scrolled .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.09); }
    .navbar .nav-link.active         { background: var(--c-primary) !important; color: #fff !important; }
    /* Hamburger bars */
    .navbar .nav-toggle span,
    .navbar.hero .nav-toggle span,
    .navbar.scrolled .nav-toggle span { background: rgba(255,255,255,.80) !important; }

    /* ── Buttons ── */
    .btn-outline {
        color: var(--c-primary-lt);
        border-color: rgba(var(--c-primary-rgb), .45);
    }
    .btn-outline:hover {
        background: rgba(var(--c-primary-rgb), .15);
        border-color: var(--c-primary-lt);
        color: #fff;
    }
    /* Hero inverted button stays white-on-dark hero (no change needed) */

    /* ── About section image border ── */
    .about-img-ph { border-color: var(--c-primary-lt); }
}