/* ============================================================
   NOESIS MANAGEMENT CONSULTING — Premium Website Stylesheet
   Light Edition: White primary · Charcoal accents · Gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Brand colours */
    --gold:          #D5B15B;
    --gold-dim:      rgba(213,177,91,0.10);
    --gold-border:   rgba(213,177,91,0.28);
    --charcoal:      #2a2a2a;   /* dark accent sections */
    --dark-section:  #1a1a1a;   /* footer / CTA */

    /* Light palette */
    --white:         #FFFFFF;
    --off-white:     #F7F6F2;   /* alternate section bg */
    --light-rule:    rgba(0,0,0,0.08);

    /* Text on light bg */
    --ink:           #111111;
    --ink-mid:       #3a3a3a;
    --ink-low:       #777777;

    /* Text on dark bg */
    --on-dark:       rgba(255,255,255,0.85);
    --on-dark-mid:   rgba(255,255,255,0.55);

    /* Typography */
    --font-h:        'Cormorant Garamond', Georgia, serif;
    --font-b:        'Jost', sans-serif;

    /* Motion */
    --ease:          all 0.32s ease;
    --ease-slow:     all 0.60s ease;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-b);
    background: var(--white);
    color: var(--ink);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Typography --- */
h1,h2,h3,h4,h5 { font-family: var(--font-h); font-weight: 400; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.8rem,5.5vw,5.2rem); }
h2 { font-size: clamp(2rem,4vw,3.6rem); }
h3 { font-size: clamp(1.4rem,2.5vw,2.3rem); }
h4 { font-size: clamp(1.1rem,1.8vw,1.6rem); }
p  { font-size: .95rem; color: var(--ink-low); line-height: 1.85; }
a  { text-decoration: none; color: inherit; transition: var(--ease); }

/* --- Layout --- */
.container { max-width: 1220px; margin: 0 auto; padding: 0 2.5rem; }
.section    { padding: 7rem 0; }
.text-center { text-align: center; }
.bg-white    { background: var(--white); }
.bg-off      { background: var(--off-white); }
.bg-dark     { background: var(--charcoal); }
.bg-darker   { background: var(--dark-section); }

/* --- Gold Accents --- */
.gold-line { width: 50px; height: 1px; background: var(--gold); margin: 1.5rem 0; }
.gold-line.center { margin-left: auto; margin-right: auto; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .9rem;
    font-family: var(--font-b); font-size: .7rem; font-weight: 500;
    letter-spacing: .35em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 1.2rem;
}
.eyebrow::before { content:''; display:block; width:36px; height:1px; background:var(--gold); }
.eyebrow.center  { justify-content: center; }
.eyebrow.center::before { display: none; }

/* --- Divider --- */
.section-rule { width:100%; height:1px; background: var(--light-rule); }

/* --- Buttons --- */
.btn {
    display: inline-block; font-family: var(--font-b); font-size: .75rem;
    font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
    padding: .9rem 2.6rem; cursor: pointer; border: none; transition: var(--ease);
}
.btn-gold         { background: var(--gold); color: #111; }
.btn-gold:hover   { background: #c9a44e; }
.btn-outline      { border: 1px solid var(--gold); color: var(--gold); background: transparent; }
.btn-outline:hover{ background: var(--gold); color: #111; }
.btn-dark         { border: 1px solid rgba(255,255,255,.3); color: #fff; background: transparent; }
.btn-dark:hover   { border-color: var(--gold); color: var(--gold); }
.btn-ink          { border: 1px solid rgba(0,0,0,.25); color: var(--ink-mid); background: transparent; }
.btn-ink:hover    { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; padding: 1.8rem 0;
    transition: var(--ease-slow);
}
/* On hero (dark bg image) — keep white text */
.navbar .nav-logo-name { color: var(--white); }
.navbar .nav-logo-name .o { color: var(--gold); }
.navbar .nav-logo-tag { color: rgba(255,255,255,.45); }
.navbar .nav-links > li > a { color: rgba(255,255,255,.78); }
.navbar .nav-cta { border-color: rgba(255,255,255,.5); color: var(--white); }
.navbar .hamburger span { background: var(--white); }

/* Scrolled — white bar, dark text */
.navbar.scrolled {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px);
    padding: 1rem 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.07);
    border-bottom: 1px solid var(--gold-border);
}
.navbar.scrolled .nav-logo-name { color: var(--ink); }
.navbar.scrolled .nav-logo-name .o { color: var(--gold); }
.navbar.scrolled .nav-logo-tag { color: rgba(0,0,0,.35); }
.navbar.scrolled .nav-links > li > a { color: var(--ink-mid); }
.navbar.scrolled .nav-links > li > a:hover { color: var(--gold); }
.navbar.scrolled .nav-cta { border-color: var(--gold); color: var(--gold); }
.navbar.scrolled .nav-cta:hover { background: var(--gold); color: #111; }
.navbar.scrolled .hamburger span { background: var(--ink); }

.navbar .container { display:flex; align-items:center; justify-content:space-between; gap:2rem; }

/* Logo */
.nav-logo { display:flex; flex-direction:column; line-height:1; }
.nav-logo-name { font-family:var(--font-h); font-size:1.75rem; font-weight:500; letter-spacing:.18em; }
.nav-logo-tag  { font-family:var(--font-b); font-size:.52rem; letter-spacing:.38em; text-transform:uppercase; margin-top:4px; }

/* Nav links */
.nav-links { display:flex; list-style:none; align-items:center; gap:2.8rem; }
.nav-links > li { position:relative; }
.nav-links > li > a { font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:.35rem; transition: var(--ease); }
.nav-links > li > a.active { color: var(--gold) !important; }

.nav-arrow { font-size:.55rem; transition:var(--ease); }
.nav-links > li:hover .nav-arrow { transform:rotate(180deg); }

/* Dropdown */
.dropdown {
    position:absolute; top:calc(100% + 1.8rem); left:50%; transform:translateX(-50%);
    background:var(--white); border:1px solid var(--gold-border);
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    min-width:230px; opacity:0; visibility:hidden; transition:var(--ease); padding:.4rem 0;
}
.dropdown::before {
    content:''; position:absolute; top:-6px; left:50%;
    transform:translateX(-50%) rotate(45deg); width:10px; height:10px;
    background:var(--white); border-left:1px solid var(--gold-border); border-top:1px solid var(--gold-border);
}
.nav-links > li:hover .dropdown { opacity:1; visibility:visible; top:calc(100% + 1rem); }
.dropdown a {
    display:block; padding:.72rem 1.6rem; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-mid); border-left:2px solid transparent; transition:var(--ease);
}
.dropdown a:hover { color:var(--gold); border-left-color:var(--gold); background:rgba(213,177,91,.05); padding-left:2.2rem; }

/* CTA & Hamburger */
.nav-cta { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:.58rem 1.6rem; border:1px solid; white-space:nowrap; transition:var(--ease); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { display:block; width:24px; height:1px; transition:var(--ease); }

/* Mobile overlay */
.mobile-overlay {
    display:none; position:fixed; inset:0; background:var(--white);
    z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:2rem; padding:2rem;
}
.mobile-overlay.open { display:flex; }
.mobile-overlay a { font-family:var(--font-h); font-size:2.2rem; color:var(--ink); }
.mobile-overlay a:hover { color:var(--gold); }
.mob-close { position:absolute; top:2rem; right:2.5rem; background:none; border:none; color:var(--ink); font-size:1.6rem; cursor:pointer; }

/* ============================================================
   HERO — IMAGE BACKGROUND
   ============================================================ */
.hero {
    min-height: 100vh; display:flex; align-items:center;
    position:relative; overflow:hidden;
    background: var(--charcoal);  /* fallback */
}
.hero-img {
    position:absolute; inset:0;
    background-size: cover; background-position: center;
    background-repeat: no-repeat;
}
.hero-overlay {
    position:absolute; inset:0;
    background: linear-gradient(
        105deg,
        rgba(10,10,10,0.80) 0%,
        rgba(10,10,10,0.55) 55%,
        rgba(10,10,10,0.30) 100%
    );
}
.hero-content { position:relative; z-index:1; max-width:720px; padding-top:5rem; }
.hero h1 { color:var(--white); font-weight:300; margin-bottom:1.6rem; }
.hero h1 em { font-style:italic; color:var(--gold); }
.hero-desc { font-size:1rem; color:rgba(255,255,255,.65); max-width:520px; margin-bottom:3rem; line-height:2; }
.hero-actions { display:flex; gap:1.5rem; flex-wrap:wrap; }
.scroll-cue {
    position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.7rem;
    font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.4);
}
.scroll-cue-line { width:1px; height:50px; background:linear-gradient(to bottom, var(--gold), transparent); }

/* ============================================================
   HERO — INNER PAGES
   ============================================================ */
.page-hero {
    padding: 11rem 0 6rem;
    background: var(--charcoal);
    position:relative; overflow:hidden;
}
.page-hero::after {
    content:''; position:absolute; bottom:0; left:0; width:100%; height:1px;
    background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
.page-hero-bg {
    position:absolute; inset:0;
    background: radial-gradient(ellipse 50% 80% at 90% 50%, rgba(213,177,91,.08) 0%, transparent 60%);
}
.page-hero-content { position:relative; z-index:1; }
.page-hero h1 { color:var(--white); margin:1rem 0 1.5rem; }
.page-hero p  { max-width:600px; color:rgba(255,255,255,.55); font-size:1rem; }

/* Two-col layout for service page heroes */
.page-hero-inner {
    display:grid; grid-template-columns:1.1fr 1fr; gap:5rem; align-items:center;
}
.page-hero-inner .page-hero-text p { max-width:100%; }
.page-hero-graphic {
    display:flex; align-items:center; justify-content:flex-end;
    opacity:.9;
}
.hero-svg { width:100%; max-width:400px; }

/* SVG fade-in for hero */
.hero-svg line, .hero-svg rect, .hero-svg polyline,
.hero-svg circle, .hero-svg path {
    animation: svgDraw 1.8s ease forwards;
}
@keyframes svgDraw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media(max-width:900px){
    .page-hero-inner { grid-template-columns:1fr; }
    .page-hero-graphic { display:none; }
}

/* ============================================================
   IMAGE BLOCKS
   ============================================================ */
.img-block {
    width:100%; aspect-ratio:3/2;
    background-size:cover; background-position:center;
    position:relative; overflow:hidden;
}
.img-block-tall  { aspect-ratio:3/4; }
.img-block-wide  { aspect-ratio:16/9; }
.img-block::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25) 100%);
}

/* Offset frame decoration */
.img-frame { position:relative; }
.img-frame::before {
    content:''; position:absolute;
    top:18px; left:18px; right:-18px; bottom:-18px;
    border:1px solid var(--gold-border); z-index:-1;
}

/* ============================================================
   SERVICES GRID — HOME
   ============================================================ */
.services-home-grid {
    display:grid; grid-template-columns:repeat(5,1fr);
    border:1px solid var(--light-rule); gap:1px; background:var(--light-rule);
    margin-top:4rem;
}
.svc-card {
    background:var(--white); padding:0;
    position:relative; overflow:hidden; transition:var(--ease);
    display:flex; flex-direction:column; border-bottom:3px solid transparent;
}
.svc-card:hover { border-bottom-color:var(--gold); }
.svc-card:hover .svc-card-header { background:#c9a44e; }
.svc-card:hover .svc-card-body { background:var(--off-white); }

/* Gold header band */
.svc-card-header {
    background: var(--gold);
    padding: 1.8rem 2rem 1.2rem;
    transition: var(--ease);
}
.svc-num {
    font-family:var(--font-h); font-size:3rem;
    color:rgba(0,0,0,0.18); line-height:1; margin:0;
}

/* Card body */
.svc-card-body {
    padding: 2rem 2rem 2.5rem;
    display:flex; flex-direction:column; flex:1;
    background:var(--white); transition:var(--ease);
}
.svc-card h4 { font-size:1.1rem; color:var(--ink); margin-bottom:1rem; }
.svc-card p  { font-size:.84rem; color:var(--ink-low); flex:1; }
.svc-link {
    display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem;
    font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.svc-link::after { content:'→'; font-size:.8rem; transition:var(--ease); }
.svc-link:hover::after { transform:translateX(5px); }

/* ============================================================
   STATS BAR  — dark band
   ============================================================ */
.stats-bar {
    display:grid; grid-template-columns:repeat(4,1fr);
    border:none; background:var(--charcoal);
}
.stat { background:transparent; padding:4rem 2rem; text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.stat:last-child { border-right:none; }
.stat-n { font-family:var(--font-h); font-size:3.8rem; font-weight:300; color:var(--gold); line-height:1; }
.stat-l { font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:.5rem; }

/* ============================================================
   ABOUT SECTION — HOME (with image)
   ============================================================ */
.about-home { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.about-home-text p { margin-bottom:1.2rem; }

/* ============================================================
   WHY US — HOME
   ============================================================ */
.why-home-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--light-rule); border:1px solid var(--light-rule); margin-top:4rem;
}
.why-card { background:var(--white); padding:3rem 2.5rem; transition:var(--ease); border-bottom:3px solid transparent; }
.why-card:hover { background:var(--off-white); border-bottom-color:var(--gold); }
.why-icon-box {
    width:46px; height:46px;
    background: var(--gold);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.05rem; margin-bottom:1.8rem;
    transition:var(--ease);
}
.why-card:hover .why-icon-box { background:#c9a44e; }
.why-card h4 { font-size:1.05rem; color:var(--ink); margin-bottom:.9rem; }
.why-card p  { font-size:.85rem; color:var(--ink-low); }

/* ============================================================
   INDUSTRIES — HOME
   ============================================================ */
.ind-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:1px; background:var(--light-rule); border:1px solid var(--light-rule); margin-top:4rem;
}
.ind-card { background:var(--white); padding:3rem 2rem; text-align:center; transition:var(--ease); }
.ind-card:hover { background:var(--off-white); }
.ind-card .ind-icon { font-size:2rem; color:var(--gold); display:block; margin:0 auto 1.5rem; }
.ind-card h4 { font-size:1rem; color:var(--ink); margin-bottom:.5rem; }
.ind-card p  { font-size:.78rem; color:var(--ink-low); }

/* ============================================================
   CTA BAND — dark
   ============================================================ */
.cta-band {
    background:var(--dark-section); padding:9rem 0; text-align:center;
    position:relative; overflow:hidden;
}
.cta-band::before {
    content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:700px; height:700px; border:1px solid rgba(213,177,91,.06); border-radius:50%;
}
.cta-band::after {
    content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:400px; height:400px; border:1px solid rgba(213,177,91,.06); border-radius:50%;
}
.cta-band h2 { color:var(--white); position:relative; margin-bottom:1.5rem; }
.cta-band p  { max-width:480px; margin:0 auto 2.8rem; color:rgba(255,255,255,.5); position:relative; }
.cta-band .btn { position:relative; }
.cta-band .eyebrow { position:relative; }

/* ============================================================
   SERVICE DETAIL PAGES
   ============================================================ */
.svc-overview { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.svc-overview p { font-size:.95rem; color:var(--ink-low); margin-bottom:1.5rem; }

.svc-items-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1px; background:var(--light-rule); border:1px solid var(--light-rule);
}
.svc-item {
    background:var(--white); padding:2.8rem 2.5rem; transition:var(--ease);
    position:relative; overflow:hidden; border-left:3px solid transparent;
}
.svc-item:hover { background:var(--off-white); border-left-color:var(--gold); }
.svc-item h4 { font-size:1.15rem; color:var(--ink); margin-bottom:1rem; }
.svc-item p  { font-size:.85rem; color:var(--ink-low); margin-bottom:1.5rem; }
.svc-item ul { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.svc-item ul li { font-size:.8rem; color:var(--ink-low); padding-left:1.1rem; position:relative; }
.svc-item ul li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; background:var(--gold); border-radius:50%; }

/* Compliance numbered */
.comp-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1px; background:var(--light-rule); border:1px solid var(--light-rule); margin-top:3rem;
}
.comp-item { background:var(--white); padding:2.5rem; transition:var(--ease); }
.comp-item:hover { background:var(--off-white); }
.comp-num { font-family:var(--font-h); font-size:2.5rem; color:rgba(213,177,91,.25); line-height:1; margin-bottom:1rem; }
.comp-item h4 { font-size:1rem; color:var(--ink); margin-bottom:.7rem; font-family:var(--font-b); font-weight:400; }
.comp-item p  { font-size:.82rem; color:var(--ink-low); }

/* Process Steps */
.process-steps {
    display:grid; grid-template-columns:repeat(4,1fr);
    border:1px solid var(--light-rule); gap:1px; background:var(--light-rule); margin-top:3rem;
}
.p-step { background:var(--white); padding:3rem 2.2rem; }
.p-step-num { font-family:var(--font-h); font-size:4rem; color:rgba(213,177,91,.2); line-height:1; margin-bottom:1rem; }
.p-step h4 { font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-family:var(--font-b); font-weight:500; margin-bottom:.8rem; }
.p-step p  { font-size:.84rem; color:var(--ink-low); }

/* Process Steps on dark bg */
.process-steps.dark { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.06); }
.process-steps.dark .p-step { background:rgba(255,255,255,.03); }
.process-steps.dark .p-step p { color:rgba(255,255,255,.45); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:start; }
.about-blockquote {
    font-family:var(--font-h); font-size:1.9rem; font-style:italic;
    color:var(--gold); line-height:1.5;
    border-left:2px solid var(--gold); padding-left:2rem; margin:3rem 0;
}
.values-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--light-rule); border:1px solid var(--light-rule); margin-top:3rem; }
.value-card { background:var(--white); padding:2.5rem 2rem; transition:var(--ease); }
.value-card:hover { background:var(--off-white); }
.value-card h4 { font-size:1rem; color:var(--gold); margin-bottom:.7rem; font-family:var(--font-b); font-weight:500; letter-spacing:.05em; }
.value-card p  { font-size:.84rem; color:var(--ink-low); }

.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px; background:var(--light-rule); border:1px solid var(--light-rule); margin-top:3rem; }
.team-card { background:var(--white); padding:2.5rem; transition:var(--ease); }
.team-card:hover { background:var(--off-white); }
.team-avatar { width:72px; height:72px; border-radius:50%; background:var(--off-white); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.5rem; color:var(--gold); margin-bottom:1.5rem; }
.team-name  { font-family:var(--font-h); font-size:1.3rem; color:var(--ink); }
.team-title { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:.3rem 0 1rem; }
.team-card p { font-size:.83rem; color:var(--ink-low); }

/* ============================================================
   INDUSTRIES PAGE
   ============================================================ */
.ind-detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--light-rule); border:1px solid var(--light-rule); margin-top:3rem; }
.ind-detail-card { background:var(--white); padding:4rem 3.5rem; transition:var(--ease); border-bottom:3px solid transparent; }
.ind-detail-card:hover { background:var(--off-white); border-bottom-color:var(--gold); }
.ind-detail-icon { font-size:2.2rem; color:var(--gold); margin-bottom:1.8rem; }
.ind-detail-card h3 { font-size:1.9rem; color:var(--ink); margin-bottom:1rem; }
.ind-detail-card > p { font-size:.9rem; color:var(--ink-low); margin-bottom:2rem; }
.ind-detail-card ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.ind-detail-card ul li { font-size:.83rem; color:var(--ink-low); padding-left:1.1rem; position:relative; }
.ind-detail-card ul li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; background:var(--gold); border-radius:50%; }

/* ============================================================
   WHY US PAGE
   ============================================================ */
.diff-list { display:flex; flex-direction:column; gap:1px; background:var(--light-rule); border:1px solid var(--light-rule); margin-top:3rem; }
.diff-item { background:var(--white); padding:3.5rem; display:grid; grid-template-columns:70px 1fr; gap:3rem; align-items:start; transition:var(--ease); border-left:3px solid transparent; }
.diff-item:hover { background:var(--off-white); border-left-color:var(--gold); }
.diff-n { font-family:var(--font-h); font-size:4rem; color:rgba(213,177,91,.2); line-height:1; }
.diff-item h3 { font-size:1.6rem; color:var(--ink); margin-bottom:.9rem; }
.diff-item p  { font-size:.9rem; color:var(--ink-low); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:6rem; align-items:start; }
.contact-info-block { margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--light-rule); }
.contact-info-block:last-child { border-bottom:none; }
.cib-label { font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
.cib-value { font-family:var(--font-h); font-size:1.3rem; color:var(--ink); }

.contact-form { display:flex; flex-direction:column; gap:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.f-group { display:flex; flex-direction:column; gap:.5rem; }
.f-label { font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-low); }
.f-input,.f-textarea {
    background:transparent; border:none; border-bottom:1px solid rgba(0,0,0,.15);
    padding:.75rem 0; color:var(--ink); font-family:var(--font-b); font-size:.95rem;
    outline:none; width:100%; transition:var(--ease);
}
.f-input:focus,.f-textarea:focus { border-bottom-color:var(--gold); }
.f-textarea { resize:none; height:130px; }
.f-input::placeholder,.f-textarea::placeholder { color:rgba(0,0,0,.2); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--dark-section); padding:5.5rem 0 2.5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; margin-bottom:4rem; }
.footer-logo-name { font-family:var(--font-h); font-size:1.8rem; letter-spacing:.15em; color:var(--white); }
.footer-logo-name .o { color:var(--gold); }
.footer-logo-tag { font-size:.52rem; letter-spacing:.35em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-top:4px; }
.footer-brand p { font-size:.84rem; color:rgba(255,255,255,.35); margin-top:1.2rem; max-width:270px; line-height:1.9; }
.footer-col-title { font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.footer-links a { font-size:.83rem; color:rgba(255,255,255,.38); }
.footer-links a:hover { color:var(--gold); padding-left:.4rem; }
.footer-contact-row { display:flex; gap:.8rem; align-items:flex-start; font-size:.83rem; color:rgba(255,255,255,.38); margin-bottom:.9rem; }
.footer-contact-row span:first-child { color:var(--gold); flex-shrink:0; margin-top:2px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:2rem; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.72rem; color:rgba(255,255,255,.25); }

/* ============================================================
   SCROLL ANIMATIONS — reduced, section-level only
   ============================================================ */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.reveal.d1 { transition-delay:.15s; }
.reveal.d2 { transition-delay:.3s; }
.reveal.d3 { transition-delay:.45s; }
.reveal.visible { opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
    .services-home-grid { grid-template-columns:repeat(3,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; gap:3rem; }
    .about-grid,.about-home,.svc-overview,.contact-grid { grid-template-columns:1fr; gap:3rem; }
    .img-frame::before { display:none; }
}
@media(max-width:860px){
    .nav-links,.nav-cta { display:none; }
    .hamburger { display:flex; }
    .services-home-grid { grid-template-columns:repeat(2,1fr); }
    .stats-bar { grid-template-columns:repeat(2,1fr); }
    .why-home-grid,.values-row { grid-template-columns:1fr; }
    .ind-grid { grid-template-columns:repeat(2,1fr); }
    .ind-detail-grid { grid-template-columns:1fr; }
    .process-steps { grid-template-columns:repeat(2,1fr); }
    .diff-item { grid-template-columns:50px 1fr; gap:1.5rem; padding:2.5rem; }
    .form-row { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
    .services-home-grid { grid-template-columns:1fr; }
    .stats-bar { grid-template-columns:1fr 1fr; }
    .ind-grid { grid-template-columns:1fr; }
    .process-steps { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
}

/* ============================================================
   BLOG — Archive & Single Post
   ============================================================ */

/* Blog grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 4rem;
}

.blog-card {
    background: var(--white);
    border: 1px solid var(--light-rule);
    transition: box-shadow .3s;
}
.blog-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.08); }

.blog-card-img {
    height: 220px;
    background-size: cover;
    background-position: center;
}

.blog-card-body { padding: 2rem; }

.blog-card-meta {
    display: flex;
    gap: 1rem;
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--ink-low);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.blog-cat {
    color: var(--gold);
    font-weight: 500;
}

.blog-card-title {
    font-family: var(--font-h);
    font-size: 1.35rem;
    font-weight: 500;
    margin-bottom: .8rem;
    line-height: 1.35;
}
.blog-card-title a {
    color: var(--ink);
    text-decoration: none;
}
.blog-card-title a:hover { color: var(--gold); }

.blog-card-excerpt {
    font-size: .88rem;
    color: var(--ink-low);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Pagination */
.blog-pagination {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
}
.blog-pagination .nav-links { display: flex; gap: 0.5rem; }
.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--light-rule);
    font-size: .85rem;
    color: var(--ink);
    text-decoration: none;
    transition: all .25s;
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

/* Single post layout */
.single-post-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 5rem;
    align-items: start;
}

.single-post-hero-img {
    margin-bottom: 3rem;
    overflow: hidden;
}
.single-post-hero-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.post-body {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--ink-mid);
}
.post-body h2, .post-body h3, .post-body h4 {
    font-family: var(--font-h);
    color: var(--ink);
    margin: 2.5rem 0 1rem;
}
.post-body h2 { font-size: 1.9rem; }
.post-body h3 { font-size: 1.5rem; }
.post-body p { margin-bottom: 1.4rem; }
.post-body ul, .post-body ol {
    margin: 1rem 0 1.4rem 1.5rem;
    color: var(--ink-mid);
}
.post-body li { margin-bottom: .5rem; }
.post-body a { color: var(--gold); }
.post-body blockquote {
    border-left: 3px solid var(--gold);
    padding: 1.2rem 1.8rem;
    margin: 2rem 0;
    font-family: var(--font-h);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--ink-mid);
    background: var(--off-white);
}

.sidebar-block { position: sticky; top: 120px; }

/* Page content generic */
.page-content-layout { max-width: 820px; margin: 0 auto; }
.page-content-main { font-size: 1rem; line-height: 1.85; color: var(--ink-mid); }

/* Responsive blog */
@media(max-width:1024px){
    .blog-grid { grid-template-columns: repeat(2,1fr); }
    .single-post-layout { grid-template-columns: 1fr; }
    .sidebar-block { position: static; }
}
@media(max-width:640px){
    .blog-grid { grid-template-columns: 1fr; }
}