/* ==========================================================================
   Main Stylesheet — Pranav Global Theme
   Figma reference: Kovaion-Website-Design / Pranav Global Website (412:103)
   Variables imported from variables.css (enqueued separately).
   ========================================================================== */


/* --------------------------------------------------------------------------
   Base Reset
   -------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    color: var(--color-dark);
    margin-top: 0;
    margin-bottom: 0.5em;
}

h1 { font-size: var(--font-size-hero); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

p {
    margin-top: 0;
    margin-bottom: var(--space-16);
    font-family: var(--font-body);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    margin: 0 0 var(--space-16);
    padding-left: 1.5em;
}

strong { font-weight: var(--fw-semibold); }


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-overlay);
    background: var(--color-dark);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.skip-link:focus {
    left: 0;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/* --------------------------------------------------------------------------
   Layout — Container
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow {
    max-width: 900px;
}

.container--full {
    max-width: var(--container-max);
    padding-inline: 0;
}

/* Inner content wrapper used by sections */
.section-inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* --------------------------------------------------------------------------
   Site Wrapper
   -------------------------------------------------------------------------- */

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
}


/* --------------------------------------------------------------------------
   Site Header — Floating Pill Navigation
   Pixel-perfect from Figma 422:387 (407 × 51 px)
   -------------------------------------------------------------------------- */

/*
 * Outer shell: fixed, horizontally centred, 30 px from top.
 * Exact Figma dimensions: w=407, h=51, bg=#faf8f6, border-radius=15, overflow=hidden.
 */
.site-header {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    /* Figma: 407 × 51 px */
    width: 407px;
    height: 51px;
    background: #faf8f6;
    border-radius: 15px;
    overflow: hidden;
    z-index: var(--z-header);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

/* Scrolled state: pin pill flush to the very top of the viewport */
.is-scrolled .site-header {
    top: 0;
}

/* Keep the desktop dropdown overlay aligned with the scrolled pill */
.is-scrolled .nav-overlay {
    top: 0;
}

/*
 * Pill flex row: space-between pushes mark left, hamburger right.
 * Padding mirrors the Figma left margin (28 px) and right margin (22 px).
 * The centre logo sits in a absolutely-positioned child.
 */
.site-header__pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    /* left pad = 28 px (Figma logo mark left offset) */
    /* right pad = 22 px (407 − 365 − 20 = 22 px) */
    padding: 0 22px 0 28px;
}

/* -------------------------------------------------------------------------
   Logo mark (left)
   Figma: left=28, top=13, container w=18.395, h=23.546, overflow hidden.
   Source image: logo-mark.png 250×250 px.
   The Figma clip scales the image to 45.99×45.99 and offsets it so only the
   coral-chevrons region (approx. src x:75-175, y:26-154) is visible.
   Scale: 250 → 45.99 (factor 0.18396)
   CSS clip math (all % relative to the 18.395 × 23.546 container):
     width:  250 % = 45.99 px
     height: 195.31 % = 45.99 px
     left:   -75 %   = -13.80 px (crop left edge in from 75 px of src)
     top:    -20.31 % = -4.78 px  (crop top edge in from 26 px of src)
   ------------------------------------------------------------------------- */
.site-header__logo-mark {
    /* Exact Figma clip container */
    width: 18.395px;
    height: 23.546px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    position: relative;
    text-decoration: none;
}

.site-header__logo-mark img {
    /* Scale 250×250 → 45.99×45.99, then clip */
    position: absolute;
    width: 250%;        /* 18.395 × 2.5   = 45.988 px */
    height: 195.31%;    /* 23.546 × 1.9531 = 45.989 px */
    left: -75%;         /* 18.395 × -0.75  = -13.796 px */
    top:  -20.31%;      /* 23.546 × -0.2031 = -4.782 px */
    max-width: none;
    display: block;
}

/* -------------------------------------------------------------------------
   Logo centre (text / wordmark)
   Figma: left=159, top=14, w=90.4, h=23.546
   Using absolute + 50% centering:  (407/2) − (90.4/2) = 203.5 − 45.2 = 158.3 ≈ 159 px ✓
   ------------------------------------------------------------------------- */
.site-header__logo-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Figma: 90.4 × 23.546 px */
    width: 90.4px;
    height: 23.546px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* let clicks on the mark / button through */
}

/* Make the logo link inside clickable */
.site-header__logo-center a,
.site-header__logo-center .custom-logo-link {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Custom logo image: fill the 90.4 × 23.546 area */
.site-header__logo-center .custom-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    max-width: none;
}

/* ---- HTML text fallback (when no custom logo is uploaded) --------------- */
.site-header__wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-decoration: none;
    line-height: 1;
}

.site-header__wordmark-name {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: #1e252f;
    text-transform: uppercase;
    display: block;
    white-space: nowrap;
}

.site-header__wordmark-sub {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 7px;
    letter-spacing: 0.18em;
    color: #1e252f;
    text-transform: uppercase;
    display: block;
    white-space: nowrap;
    opacity: 0.75;
}

/* Overlay variant: slightly larger for the 407-wide overlay panel */
.site-header__wordmark--overlay .site-header__wordmark-name { font-size: 14px; }
.site-header__wordmark--overlay .site-header__wordmark-sub  { font-size: 8px; }

/* Legacy .site-title-link (kept for back-compat) */
.site-title-link {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    text-decoration: none;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Hamburger toggle
   Figma: left=365, top=19, w=20, h=11 px
   Two bars: each 20 × 1.5 px. Gap between bar tops: 9.5 px → gap between
   bar bottom and next bar top = 9.5 − 1.5 = 8 px.
   X-animation translateY: midpoint = (0.75 + 10.25)/2 = 5.5, offset = ±4.75 px.
   ------------------------------------------------------------------------- */
.nav-toggle {
    /* Exact Figma hit area: 20 × 11 px */
    width: 20px;
    height: 11px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    /* Vertically centre in 51-px pill: (51 − 11) / 2 = 20 px from top — handled by flex align-items on pill */
}

/* Each bar: 20 × 1.5 px, dark #2e2e2e (matches hamburger.svg fill fallback) */
.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 1px;
    background: #2e2e2e;
    border-radius: 0;
    transition:
        transform 0.15s ease,
        opacity   0.15s ease;
}

/* X state when overlay is open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
    /* Move down to midpoint (5.5 px) from bar 1 centre (0.75 px) = +4.75 px */
    transform: translateY(4.75px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
    /* Move up to midpoint (5.5 px) from bar 2 centre (10.25 px) = -4.75 px */
    transform: translateY(-4.75px) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   Navigation Overlay Panel
   Figma reference: 442:150 "Nav Bar Extended WIP" (407 × ~370 px)
   -------------------------------------------------------------------------- */

/*
 * Desktop: pill-aligned dropdown (same width, top-aligned).
 * Tablet/mobile: full-width slide-in panel (see responsive overrides below).
 */
.nav-overlay {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 407px;
    background: var(--color-bg-header);
    border-radius: var(--radius-15);
    box-shadow: var(--shadow-overlay);
    z-index: calc(var(--z-header) + 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    overflow: hidden;
}

.nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-overlay__inner {
    /* 68 px top puts first menu item directly below the 51 px overlay header */
    padding: 68px 27px 32px;
    display: flex;
    flex-direction: column;
}

/* ---- Overlay header: logo mark + wordmark + close button ---- */
.nav-overlay__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 27px;
}

/* Full logo (mark + wordmark) side-by-side — matches Figma 442:189 */
.nav-overlay__brand {
    display: flex;
    align-items: center;
    gap: 4.166px;
    text-decoration: none;
}

/* Logo-mark clip inside overlay header — identical maths to pill */
.nav-overlay__logo-mark {
    width: 18.276px;
    height: 23.393px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    position: relative;
}

.nav-overlay__logo-mark img {
    position: absolute;
    width: 250%;
    height: 195.31%;
    left: -75%;
    top: -20.31%;
    max-width: none;
    display: block;
}

/* Dark logo shown in overlay when menu is open */
.nav-overlay__logo-dark {
    height: 30px;
    width: auto;
    max-width: 180px;
    display: block;
    object-fit: contain;
    object-position: left center;
}

/* Close button — X formed by two crossed bars (Figma: 28×28 hit area) */
.nav-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    flex-shrink: 0;
}

.nav-overlay__close-icon,
.nav-overlay__close-icon::before {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--color-dark);
    border-radius: 2px;
    position: absolute;
}

.nav-overlay__close-icon {
    transform: rotate(45deg);
}

.nav-overlay__close-icon::before {
    content: '';
    transform: rotate(-90deg);
}

/* ---- Nav links ---- */
.nav-overlay__nav {
    flex: 1;
}

.nav-overlay__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top-level menu items — 32 px Clash Display (Figma) */
.nav-overlay__nav > ul > li {
    /* No border separators — Figma design uses open spacing */
}

.nav-overlay__nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    font-family: var(--font-heading);
    font-size: 1.5rem;           /* 32 px — matches Figma */
    font-weight: var(--fw-regular);
    color: var(--color-dark);
    padding: 11px 0;           /* 11+32+11 = 54 px per item slot */
    text-decoration: none;
    transition: color var(--transition-fast);
    line-height: 1.1;
}

.nav-overlay__nav > ul > li > a:hover {
    color: var(--color-primary);
}

/* Active / current-page highlight — top-level items */
.nav-overlay__nav > ul > li.current-menu-item > a,
.nav-overlay__nav > ul > li.current-menu-ancestor > a,
.nav-overlay__nav > ul > li.current-menu-parent > a,
.nav-overlay__nav > ul > li.current_page_item > a,
.nav-overlay__nav > ul > li.current_page_ancestor > a,
.nav-overlay__nav > ul > li.current_page_parent > a {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

/* All parent menu links (top-level and nested) use flex so the chevron sits on the right */
.nav-overlay__nav .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

/* Chevron toggle indicator — injected by JS for every parent item at every level */
.nav-overlay__nav .menu-item-has-children > a .nav-submenu-toggle {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
    pointer-events: none;
}

/* When expanded: parent item turns coral (Figma), chevron flips up */
.nav-overlay__nav .menu-item-has-children.is-expanded > a {
    color: var(--color-primary);
}

.nav-overlay__nav .menu-item-has-children.is-expanded > a .nav-submenu-toggle {
    transform: rotate(-135deg) translateY(2px);
}

/* ---- Sub-menu — animated expand with max-height ---- */
.nav-overlay__nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 18px;  /* indent from parent; Figma sub-items at left:45 vs parent left:27 */
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-base) ease;
}

.nav-overlay__nav .menu-item-has-children.is-expanded > .sub-menu {
    max-height: 400px;  /* generous cap; real content is ~120 px */
}

/* Sub-menu items — 16 px Clash Grotesk, 7 px gap (Figma) */
.nav-overlay__nav .sub-menu li {
    margin-top: 0;
}

.nav-overlay__nav .sub-menu li + li {
    margin-top: 7px;  /* Figma: gap-[7px] between sub-items */
}

.nav-overlay__nav .sub-menu li a {
    display: block;
    font-family: var(--font-body);
    font-size: 1.125rem;   /* 18 px — slightly larger for readability */
    color: var(--color-text-muted);
    padding: 0;
    text-decoration: none;
    transition: color var(--transition-fast);
    line-height: 1.4;
}

/* Active sub-item (current page) — dark & bold */
.nav-overlay__nav .sub-menu .current-menu-item > a,
.nav-overlay__nav .sub-menu .current-menu-ancestor > a,
.nav-overlay__nav .sub-menu .current-menu-parent > a,
.nav-overlay__nav .sub-menu .current_page_item > a,
.nav-overlay__nav .sub-menu .current_page_ancestor > a,
.nav-overlay__nav .sub-menu .current_page_parent > a,
.nav-overlay__nav .sub-menu .current-page-ancestor > a {
    color: var(--color-dark);
    font-weight: var(--fw-medium);
}

.nav-overlay__nav .sub-menu li a:hover {
    color: var(--color-dark);
}

/* All sub-items show the arrow icon to their left */
.nav-overlay__nav .sub-menu li > a {
    position: relative;
    padding-left: 20px;
}

.nav-overlay__nav .sub-menu li > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url('../images/header/right-aero-logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Bottom padding after sub-menu */
.nav-overlay__nav .menu-item-has-children.is-expanded {
    padding-bottom: 6px;
}

/* Keyboard focus rings — visible, on-brand */
.nav-overlay__nav a:focus-visible,
.nav-overlay__close:focus-visible,
.nav-overlay__brand:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Backdrop — sits between page content and header so hamburger stays accessible */
.nav-overlay__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30, 37, 47, 0.4);
    z-index: calc(var(--z-header) - 1);  /* 99: above page, below pill header */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.nav-overlay__backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
}

/* Primary CTA — coral pill (matches Figma "Book a consultation") */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    padding: var(--space-20) var(--space-32);
    border-radius: var(--radius-42);
}

.btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    box-shadow: 0 4px 16px rgba(255, 90, 60, 0.35);
    transform: translateY(-1px);
}

.btn--primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Secondary — outlined pill */
.btn--secondary {
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    padding: calc(var(--space-20) - 2px) calc(var(--space-32) - 2px);
    border-radius: var(--radius-42);
    border: 2px solid var(--color-primary);
}

.btn--secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 16px rgba(255, 90, 60, 0.25);
    transform: translateY(-1px);
}

/* Ghost — dark outlined */
.btn--ghost {
    background: transparent;
    color: var(--color-dark);
    font-size: var(--font-size-base);
    padding: var(--space-12) var(--space-24);
    border-radius: var(--radius-42);
    border: 1.5px solid var(--color-dark);
}

.btn--ghost:hover {
    background: var(--color-dark);
    color: var(--color-white);
}

/* Icon arrow button — used in CTA block */
.btn--icon-arrow {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.btn--icon-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
}

.btn--icon-arrow svg,
.btn--icon-arrow img {
    width: 24px;
    height: 24px;
}


/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */

/* Section padding */
.section {
    padding-block: var(--space-80);
}

.section--sm {
    padding-block: var(--space-48);
}

.section--lg {
    padding-block: var(--space-120);
}

/* Section heading (matches Figma "What we offer", "Why Pranav Global?") */
.section-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--fw-regular);
    color: var(--color-dark);
    text-align: center;
    margin-bottom: var(--space-40);
    line-height: var(--lh-heading);
}

/* Label / eyebrow text (uppercase coral, matches "CONTACT US", "Address") */
.eyebrow {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-regular);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    display: block;
    margin-bottom: var(--space-24);
}

/* Numbered label (DM Mono, matches "01", "02"...) */
.step-number {
    font-family: var(--font-mono);
    font-size: var(--font-size-mono);
    font-weight: var(--fw-regular);
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-40);
}

/* Text helpers */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-primary   { color: var(--color-primary) !important; }
.text-dark      { color: var(--color-dark) !important; }
.text-white     { color: var(--color-white) !important; }
.text-muted     { color: var(--color-text-muted) !important; }

/* Background helpers */
.bg-dark        { background-color: var(--color-dark); }
.bg-white       { background-color: var(--color-white); }
.bg-page        { background-color: var(--color-bg); }
.bg-gradient-offer { background: var(--gradient-offer); }
.bg-gradient-cta   { background: var(--gradient-cta-block); }

/* Display helpers */
.d-flex             { display: flex; }
.align-center       { align-items: center; }
.justify-center     { justify-content: center; }
.justify-between    { justify-content: space-between; }
.flex-wrap          { flex-wrap: wrap; }
.gap-15             { gap: var(--space-15); }
.gap-20             { gap: var(--space-20); }
.gap-24             { gap: var(--space-24); }
.gap-27             { gap: var(--space-27); }
.gap-40             { gap: var(--space-40); }

/* Image rounded corners */
.img-rounded-sm { border-radius: var(--radius-10); }
.img-rounded    { border-radius: var(--radius-25); }


/* --------------------------------------------------------------------------
   Card Component (matches service & enterprise cards in Figma)
   -------------------------------------------------------------------------- */

.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-25);
    overflow: hidden;
    position: relative;
}

.card--shadow {
    box-shadow: var(--shadow-card);
}

.card--active {
    background: var(--gradient-card-active);
    color: var(--color-white);
}

.card--featured {
    background: var(--gradient-featured-card);
    box-shadow: var(--shadow-card);
}

.card__body {
    padding: var(--space-26) var(--space-28);
}

.card__number {
    font-family: var(--font-mono);
    font-size: var(--font-size-mono);
    color: var(--color-primary);
    margin-bottom: var(--space-40);
}

.card--active .card__number {
    color: var(--color-white);
}

.card__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--fw-regular);
    color: var(--color-dark);
    margin-bottom: var(--space-20);
    line-height: var(--lh-heading);
}

.card--active .card__heading {
    color: var(--color-white);
}

.card__text {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.card--active .card__text {
    color: rgba(255, 255, 255, 0.85);
}

.card__icon {
    position: absolute;
    bottom: var(--space-26);
    left: var(--space-28);
    width: 45px;
    height: 45px;
}

.card__image {
    position: absolute;
    bottom: 0;
    left: var(--space-28);
    right: var(--space-28);
    height: 90px;
    border-radius: var(--radius-10) var(--radius-10) 0 0;
    overflow: hidden;
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Mini service cards (Talent / Workspace / Operations / Advisory) */
.service-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-25);
    width: 236px;
    height: 213px;
    position: relative;
    flex-shrink: 0;
}

.service-card--featured {
    background: var(--gradient-featured-card);
    box-shadow: var(--shadow-card);
}

.service-card__content {
    position: absolute;
    top: var(--space-22);
    left: var(--space-22);
    right: var(--space-22);
}

.service-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    color: var(--color-primary);
    margin-bottom: var(--space-10);
    line-height: 1.25;
}

.service-card__desc {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

.service-card__image {
    position: absolute;
    bottom: 0;
    left: var(--space-28);
    right: var(--space-28);
    height: 90px;
    border-radius: var(--radius-10) var(--radius-10) 0 0;
    overflow: hidden;
}

.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}


/* --------------------------------------------------------------------------
   Enterprise Cards (Built for global enterprises)
   -------------------------------------------------------------------------- */

.enterprise-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-25);
    overflow: hidden;
    position: relative;
    width: 546px;
    height: 304px;
    flex-shrink: 0;
}

.enterprise-card__image {
    position: absolute;
    inset: 0;
    height: 181px;
}

.enterprise-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enterprise-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 123px;
    background: var(--color-white);
}

.enterprise-card__body {
    position: absolute;
    bottom: 0;
    left: var(--space-36);
    right: var(--space-36);
    padding-bottom: var(--space-20);
    height: 88px;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    justify-content: flex-end;
}

.enterprise-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.25;
}

.enterprise-card__desc {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}


/* --------------------------------------------------------------------------
   CTA Banner Block (matches "Why Pranav Global?" section)
   -------------------------------------------------------------------------- */

.cta-block {
    background: var(--gradient-cta-block);
    border-radius: var(--radius-25);
    padding: var(--space-48) var(--space-52);
    position: relative;
    overflow: hidden;
}

.cta-block__watermark {
    position: absolute;
    top: -108px;
    left: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 278px;
    line-height: 1;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.4) 37%,
        rgba(255, 255, 255, 0) 98%
    );
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.cta-block__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--fw-regular);
    color: var(--color-white);
    margin-bottom: var(--space-20);
    position: relative;
    z-index: 1;
}

.cta-block__text {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-white);
    line-height: var(--lh-base);
    max-width: 1136px;
    margin: 0;
    position: relative;
    z-index: 1;
}

.cta-block__arrow {
    position: absolute;
    top: var(--space-16);
    right: var(--space-32);
}


/* --------------------------------------------------------------------------
   Site Footer — Pixel-perfect from Figma 412:166 (1440 × 267 px)
   -------------------------------------------------------------------------- */

/*
 * Outer shell: full-width dark strip, clips overflowing chevron shapes.
 * Height is driven by content padding — matches 267 px at desktop.
 */
.site-footer {
    background: #1e252f;
    position: relative;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   Chevron decoration — Figma node 442:141
   Three brand-mark shapes (200.34 × 241.749 px each) overlapping in the
   horizontal centre of the footer.

   OPACITY STACK (exactly as exported from Figma):
     SVG <g opacity="0.09">  ×  CSS opacity: 0.4  =  3.6 % effective.
     Fill: #FFCBC1 (warm peach — the --fill-0 fallback from Figma).
     At 3.6 % over #1e252f this produces the barely-visible warm shimmer
     visible in the Figma screenshot. DO NOT raise the CSS opacity above 0.4
     or the shapes will overpower the footer text.

   POSITIONS (Figma calc-based, relative to footer height so they stay
   centred even when the footer grows taller than 267 px on small screens):
     left  → 29.17 %  centre-Y = calc(50% + 84px)   [267/2 + 84.35 = 217.85]
     center→ 43.08 %  centre-Y = calc(50% − 32px)   [267/2 − 32.35 = 101.15]
     right → 56.94 %  centre-Y = calc(50% + 84px)   [267/2 + 83.57 = 217.07]

   The shapes deliberately overflow the footer top/bottom — site-footer's
   overflow:hidden clips them to the 267 px canvas.
   ------------------------------------------------------------------------- */
.site-footer__chevrons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* Prevent the wrapper itself from creating a stacking context that
       would confuse the per-chevron z-index values. */
    isolation: auto;
}

.site-footer__chevron {
    position: absolute;
    /*
     * Width: 200.34 px / 1440 px = 13.89 % — scales with viewport.
     * Height via explicit aspect-ratio so browsers never stretch the SVG.
     * 200.34 : 241.749 ≈ 0.829 (wider than tall).
     */
    width: 13.89%;
    height: auto;
    aspect-ratio: 200.34 / 241.749;
    /*
     * CSS opacity = 0.4 (matches Figma container opacity-40).
     * SVG <g opacity="0.09"> is embedded in the file itself.
     * Combined effective: 0.4 × 0.09 = 0.036 (3.6 %) — subtle shimmer.
     */
    opacity: 0.4;
    display: block;
    object-fit: contain;
}

/* ---- Left chevron ---------------------------------------------------------
   Figma: left[29.17%], top = calc(50% + 84.35px), translateY(-50%)
   → centre lands at 267/2 + 84.35 = 217.85 px from footer top. ----------- */
.site-footer__chevron--left {
    left: 29.17%;
    top: calc(50% + 84px);
    transform: translateY(-50%);
    z-index: 1;
}

/* ---- Centre chevron -------------------------------------------------------
   Figma: left[43.08%], top = calc(50% − 32.35px), translateY(-50%)
   → centre lands at 267/2 − 32.35 = 101.15 px from footer top.
   Sits on the highest z-layer so it overlaps the outer two. ---------------- */
.site-footer__chevron--center {
    left: 43.08%;
    top: calc(50% - 32px);
    transform: translateY(-50%);
    z-index: 2;
}

/* ---- Right chevron --------------------------------------------------------
   Figma: left[56.94%], top = calc(50% + 83.57px), translateY(-50%)
   → centre lands at 267/2 + 83.57 = 217.07 px from footer top. ----------- */
.site-footer__chevron--right {
    left: 56.94%;
    top: calc(50% + 84px);
    transform: translateY(-50%);
    z-index: 1;
}

/* -------------------------------------------------------------------------
   Inner content wrapper
   padding-top  : 52 px  (from Figma: top-of-content = 52 px)
   padding-side : 80 px  (from Figma: left/right margins = 80 px in 1440-px frame)
   padding-bot  : 32 px  (267 − 215 top-of-social − 20 social-height = 32 px)
   min-height   : 267 px (exact Figma canvas height)
   flex-col + margin-top:auto on bottom row → social row lands at y = 215 px
   ------------------------------------------------------------------------- */
.site-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 52px 80px 32px;
    min-height: 267px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* -------------------------------------------------------------------------
   Top row: CONTACT US (left) | ADDRESS (right)
   ------------------------------------------------------------------------- */
.site-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

/* ---- CONTACT US section ------------------------------------------------- */
/*
 * Figma: left=80 px, top=52 px — widened from 177 px to 220 px to accommodate
 * the 16 px icon + 10 px gap alongside the email address text.
 */
.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 220px;
    flex-shrink: 0;
}

/* Shared label style for CONTACT US and ADDRESS */
.site-footer__section-label {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ff5a3c;
    text-transform: uppercase;
    letter-spacing: 1.12px;
    white-space: nowrap;
    display: block;
}

/* Each contact item: icon (left) + text (right) in a flex row */
.site-footer__contact-item {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    letter-spacing: 0.07px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.15s ease;
}

.site-footer__contact-item:hover {
    color: #ff5a3c;
    text-decoration: none;
}

/* SVG icon — inherits currentColor so it follows the link hover tint */
.site-footer__contact-icon {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
}

/* Two-line phone block: country label stacked above the number */
.site-footer__contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-footer__contact-country {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: #ff5a3c;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ---- ADDRESS sections ---------------------------------------------------- */
/*
 * .site-footer__addresses wraps both the India and UK address columns,
 * pinned to the right of the top row (justify-content: space-between on
 * .site-footer__top pushes it right, matching the original single-address
 * right=80 px Figma anchor).
 */
.site-footer__addresses {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    flex-shrink: 0;
}

.site-footer__address {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 220px;
    flex-shrink: 0;
    text-align: left;
}

.site-footer__address-text {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    letter-spacing: 0.07px;
    margin: 0;
}

/* -------------------------------------------------------------------------
   Bottom row: social icons (left) | copyright (right)
   margin-top: auto pushes this row to y = 267 − 32(padding-bot) − 20(height) = 215 px
   ------------------------------------------------------------------------- */
.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

/* ---- Social icons ------------------------------------------------------- */
/*
 * Figma: left=80 px, top=215 px
 * Icons: Facebook(20×20) → X(16×20) → YouTube(20×20) → LinkedIn(16×20) → Instagram(20×20)
 * Gap between icons: 16 px
 */
.site-footer__social {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Touch target */
    min-width: 20px;
    min-height: 20px;
    transition: opacity 0.15s ease;
    text-decoration: none;
}

.site-footer__social-link:hover {
    opacity: 0.65;
}

.site-footer__social-link svg {
    display: block;
    flex-shrink: 0;
}

/* ---- Copyright ---------------------------------------------------------- */
/*
 * Figma: right=80 px, top=217 px, width=382 px, height=16 px
 * Font: 12px / Clash Grotesk, color #9aa4b2, opacity 0.4, letter-spacing 0.6 px
 */
.site-footer__copy {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #9aa4b2;
    letter-spacing: 0.6px;
    opacity: 0.4;
    text-align: right;
    max-width: 382px;
    margin: 0;
    white-space: nowrap;
}

/* =========================================================================
   Footer — Responsive overrides
   ========================================================================= */

/* Tablet (≤ 1024 px) — reduce horizontal padding */
@media (max-width: 1024px) {
    .site-footer__inner {
        padding-left:  40px;
        padding-right: 40px;
    }

    .site-footer__copy {
        white-space: normal;
        max-width: 260px;
    }
}

/* Tablet (≤ 900 px) — tighten address gap before they wrap */
@media (max-width: 900px) {
    .site-footer__addresses {
        gap: 24px;
    }

    .site-footer__address {
        max-width: 180px;
    }
}

/* Mobile (≤ 768 px) — stack vertically */
@media (max-width: 768px) {
    .site-footer {
        overflow: visible; /* let content breathe */
    }

    .site-footer__chevrons {
        display: none; /* hide decoration on mobile */
    }

    .site-footer__inner {
        padding: 40px 20px 28px;
        min-height: unset;
    }

    .site-footer__top {
        flex-direction: column;
        gap: 32px;
    }

    .site-footer__contact {
        width: 100%;
    }

    .site-footer__contact-item {
        align-items: flex-start; /* icon top-aligns when text wraps */
    }

    .site-footer__contact-icon {
        margin-top: 2px; /* optically align with first text line */
    }

    .site-footer__addresses {
        flex-direction: column;
        gap: 32px;
        width: 100%;
    }

    .site-footer__address {
        max-width: 100%;
        text-align: left;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-top: 36px;
    }

    .site-footer__copy {
        text-align: left;
        white-space: normal;
        max-width: 100%;
    }
}


/* --------------------------------------------------------------------------
   Site Main — top offset to clear the fixed pill header
   -------------------------------------------------------------------------- */

/* Non-hero pages: push content below the fixed header (30px top + 51px height + 20px gap) */
.site-main {
    padding-top: calc(var(--space-30) + 51px + var(--space-24));
}

/* Hero pages: hero itself provides top padding; main needs no extra clearance */
.has-hero .site-main {
    padding-top: 0;
}


/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 800px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: var(--space-60);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 961px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-30);
}

.hero__headline {
    font-family: var(--font-heading);
    font-size: var(--font-size-hero);
    font-weight: var(--fw-regular);
    color: var(--color-white);
    line-height: var(--lh-hero);
    margin: 0;
}

.hero__headline .highlight {
    color: var(--color-primary);
}

.hero__sub {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-white);
    max-width: 635px;
    line-height: var(--lh-base);
    margin: 0;
}


/* --------------------------------------------------------------------------
   Page / Post Content
   -------------------------------------------------------------------------- */

.entry-header {
    margin-bottom: var(--space-40);
}

.entry-title {
    font-size: var(--font-size-hero);
    margin-bottom: var(--space-16);
}

.entry-meta {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.entry-content {
    max-width: 750px;
    margin-inline: auto;
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
}

/*
 * Full-width / wide blocks — break out of the 750px content column.
 * Technique: negative margin-left + width:100vw centres the block on the
 * viewport regardless of its offset within the page flow.
 * Applied to .alignfull and also unconditionally to .pranav-hero-gcc so the
 * hero works even when alignment is not explicitly set in the editor.
 */
.entry-content .alignfull,
.entry-content .alignwide,
.entry-content .pranav-hero-gcc,
.entry-content .pranav-what-we-offer {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
}

.entry-content > * + * {
    margin-top: var(--space-16);
}

.entry-categories a {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
}

.post-thumbnail {
    margin-bottom: var(--space-40);
    border-radius: var(--radius-25);
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
}


/* --------------------------------------------------------------------------
   Posts Grid
   -------------------------------------------------------------------------- */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-24);
    margin-bottom: var(--space-64);
}

.post-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-25);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.post-card:hover {
    box-shadow: var(--shadow-card);
}

.post-card__thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.post-card__body {
    padding: var(--space-22) var(--space-28) var(--space-28);
}

.post-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.post-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    margin-bottom: var(--space-10);
}

.post-card__title a {
    color: var(--color-dark);
}

.post-card__title a:hover {
    color: var(--color-primary);
}

.post-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--lh-body);
}


/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.nav-links,
.posts-navigation .nav-links {
    display: flex;
    gap: var(--space-16);
    padding-block: var(--space-40);
    align-items: center;
}

.page-numbers,
.nav-links a {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.page-numbers.current,
.nav-links a:hover {
    color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   Widgets / Sidebar
   -------------------------------------------------------------------------- */

.widget-area {
    padding: var(--space-40);
}

.widget {
    margin-bottom: var(--space-40);
}

.widget-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-16);
}


/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */

.page-header {
    padding-block: var(--space-80);
    border-bottom: 1px solid rgba(30, 37, 47, 0.08);
    margin-bottom: var(--space-64);
}

.page-title {
    font-size: var(--font-size-h1);
    margin: 0;
}


/* --------------------------------------------------------------------------
   404 / No Results
   -------------------------------------------------------------------------- */

.error-404 {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-120);
    text-align: center;
}

.error-404__inner {
    max-width: 640px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}

.error-404__eyebrow {
    margin-bottom: 0;
}

.error-404__number {
    font-family: var(--font-heading);
    font-size: clamp(7rem, 20vw, 12rem);
    font-weight: var(--fw-regular);
    line-height: 1;
    background: var(--gradient-cta-block);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    user-select: none;
    letter-spacing: -0.02em;
}

.error-404__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--fw-regular);
    color: var(--color-dark);
    margin: 0;
    line-height: var(--lh-tight);
}

.error-404__message {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
    max-width: 480px;
    margin: 0;
}

.error-404__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.no-results {
    padding-block: var(--space-96);
    text-align: center;
}

@media (max-width: 768px) {
    .error-404 {
        padding-block: var(--space-80);
    }

    .error-404__heading {
        font-size: clamp(1.75rem, 6vw, var(--font-size-h1));
    }

    .error-404__actions {
        flex-direction: column;
        width: 100%;
    }

    .error-404__actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* --------------------------------------------------------------------------
   ACF Block Base Styles
   (Each block lives in /acf-blocks/{name}/. These are global shared helpers.)
   -------------------------------------------------------------------------- */

/* Block outer wrapper — handles consistent vertical rhythm */
.acf-block-wrapper {
    padding-block: var(--space-80);
}

.acf-block-wrapper--sm {
    padding-block: var(--space-48);
}

.acf-block-wrapper--lg {
    padding-block: var(--space-120);
}

/* Block that spans full viewport width (background color/image) */
.acf-block-wrapper--full-bleed {
    padding-block: var(--space-80);
}

/* Standard inner content container for blocks */
.acf-block-inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Two-column block grid */
.acf-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-40);
    align-items: center;
}

/* Four-column block grid (service cards) */
.acf-block-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-27);
}

/* Example block (starter) */
.block-example {
    padding-block: var(--space-80);
}

.block-example__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
    align-items: center;
}

.block-example__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-16);
}

.block-example__content {
    margin-bottom: var(--space-40);
    color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Responsive — Tablet (max 1024px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    :root {
        --container-padding: 40px;
    }

    .site-header {
        width: 90%;
        max-width: 407px;
    }

    /* When pill shrinks below 407 px, scale logo mark proportionally */
    .site-header__logo-mark {
        width: 4.52%;   /* 18.395 / 407 = 4.52% */
        height: auto;
        aspect-ratio: 18.395 / 23.546;
    }

    /* Keep logo text centred at 22.2% width (90.4/407) */
    .site-header__logo-center {
        width: 22.2%;
    }

    /* Tablet drawer — full-width slide-in from top */
    .nav-overlay {
        width: 100%;
        max-width: none;
        left: 0;
        top: 0;
        transform: translateX(0) translateY(-100%);
        border-radius: 0 0 var(--radius-15) var(--radius-15);
        z-index: calc(var(--z-header) + 1);
        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .nav-overlay.is-open {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }

    /* Slightly larger menu text on wide tablets */
    .nav-overlay__nav > ul > li > a {
        font-size: 2rem;
    }

    .acf-block-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .enterprise-card {
        width: 100%;
    }

    .hero__headline {
        font-size: clamp(2.25rem, 5vw, var(--font-size-hero));
    }

    .cta-block__watermark {
        font-size: clamp(100px, 18vw, 278px);
    }
}


/* --------------------------------------------------------------------------
   Responsive — Mobile (max 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        --container-padding: var(--container-padding-sm);
    }

    .site-header {
        width: calc(100% - 40px);
        top: 16px;
    }

    /* Proportional logo mark for narrow pills */
    .site-header__logo-mark {
        width: 4.52%;
        height: auto;
        aspect-ratio: 18.395 / 23.546;
    }

    .site-header__logo-center {
        width: 22.2%;
    }

    .site-header__wordmark-name { font-size: 11px; }
    .site-header__wordmark-sub  { font-size: 6px; }

    .nav-overlay {
        border-radius: 0;
        /* Slightly smaller text on small phones */
    }

    .nav-overlay__nav > ul > li > a {
        font-size: 1.75rem; /* 28 px — readable on small screens */
        padding: 9px 0;
    }

    .nav-overlay__inner {
        padding-top: 60px;
        padding-bottom: 24px;
    }

    .hero {
        min-height: 600px;
        padding-top: 80px;
        align-items: flex-start;
    }

    .hero__headline {
        font-size: clamp(1.875rem, 8vw, 2.5rem);
        line-height: 1.2;
    }

    .hero__sub {
        font-size: var(--font-size-base);
        max-width: 100%;
    }

    h2 {
        font-size: clamp(1.5rem, 5vw, var(--font-size-h2));
    }

    .section-title {
        font-size: clamp(1.5rem, 5vw, var(--font-size-h2));
    }

    .acf-block-grid,
    .acf-block-grid--4,
    .block-example__inner {
        grid-template-columns: 1fr;
    }

    .posts-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        width: 100%;
        height: auto;
        min-height: 213px;
    }

    .enterprise-card {
        width: 100%;
        height: auto;
    }

    .enterprise-card__image {
        position: relative;
        height: 200px;
    }

    .enterprise-card__overlay,
    .enterprise-card__body {
        position: relative;
        height: auto;
    }

    .enterprise-card__body {
        padding: var(--space-20) var(--space-22);
    }

    .cta-block {
        padding: var(--space-32) var(--space-24);
    }

    .cta-block__heading {
        font-size: clamp(1.5rem, 6vw, var(--font-size-h1));
    }

    .cta-block__watermark {
        font-size: clamp(80px, 20vw, 200px);
    }

}