/*
Theme Name: Maini Consulting Services — Final
Theme URI: https://mainillc.com
Author: Maini Consulting Services, Inc.
Description: Oracle Cloud partner. Warm light theme — blends mainillc.com warmth with dev site structure.
Version: 3.0.0
License: Proprietary — All Rights Reserved
Text Domain: maini
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;600&display=swap');

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  /* ── Brand ─────────────────────────────────────────────────── */
  --red:        #C74634;
  --red-bright: #D45040;
  --red-deep:   #9B2E1E;
  --red-xs:     rgba(199,70,52,0.05);
  --red-sm:     rgba(199,70,52,0.12);
  --red-md:     rgba(199,70,52,0.22);

  /* ── Text ──────────────────────────────────────────────────── */
  --ink:    #1A1A1A;
  --ink-80: #2C2C2C;
  --ink-60: #484848;
  --ink-40: #6A6A6A;
  --ink-20: #9A9A9A;
  --ink-10: #C8C8C8;
  --ink-05: rgba(26,26,26,0.05);

  /* ── Backgrounds — all warm light ─────────────────────────── */
  --bg-page:    #FFFFFF;
  --bg-warm:    #F5F0EA;   /* warm cream — hero, alternating sections  */
  --bg-subtle:  #FAF7F4;   /* softer warm white                        */
  --bg-muted:   #EDE8E1;   /* muted warm for chips, hover fills        */
  --bg-border:  #E2DDD7;
  --white:      #FFFFFF;

  /* ── Accent (used sparingly for AI badges, teal elements) ─── */
  --ai-teal:    #0A9B82;
  --ai-teal-xs: rgba(10,155,130,0.07);
  --ai-teal-sm: rgba(10,155,130,0.15);
  --ai-blue:    #1A6FD4;
  --ai-blue-xs: rgba(26,111,212,0.07);

  /* ── Dark sections — deep navy-slate, premium & elegant */
  --dark:       #0E1C2E;   /* deep navy — AI section, adv-panel                      */
  --dark-2:     #0A1628;   /* footer body — slightly deeper navy                     */
  --dark-3:     #071122;   /* footer brand bar — darkest                             */
  --dark-light: #1A2E45;   /* hover states on dark surfaces                          */

  /* ── Typography ───────────────────────────────────────────── */
  --f-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;
  --f-serif:   'Georgia', serif;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* ── Fluid type scale ─────────────────────────────────────── */
  --text-2xs:  clamp(0.70rem,  0.65rem + 0.25vw, 0.80rem);
  --text-xs:   clamp(0.78rem,  0.72rem + 0.30vw, 0.90rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 0.9875rem);
  --text-md:   clamp(1.00rem,  0.94rem + 0.30vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem,1.00rem + 0.35vw, 1.1875rem);
  --text-xl:   clamp(1.1875rem,1.10rem + 0.45vw, 1.375rem);
  --head-sm:   clamp(1.10rem,  1.00rem + 0.50vw, 1.35rem);
  --head-md:   clamp(1.25rem,  1.10rem + 0.75vw, 1.625rem);
  --head-lg:   clamp(1.50rem,  1.25rem + 1.25vw, 2.125rem);
  --head-xl:   clamp(1.875rem, 1.50rem + 1.875vw,2.875rem);
  --head-2xl:  clamp(2.25rem,  1.75rem + 2.50vw, 3.75rem);
  --head-hero: clamp(2.50rem,  1.80rem + 3.50vw, 5.00rem);

  /* ── Spacing ─────────────────────────────────────────────── */
  --s-1:0.25rem; --s-2:0.5rem;  --s-3:0.75rem; --s-4:1rem;
  --s-5:1.25rem; --s-6:1.5rem;  --s-8:2rem;    --s-10:2.5rem;
  --s-12:3rem;   --s-16:4rem;   --s-20:5rem;
  --s-24:clamp(3rem,6vw,6rem);
  --s-32:clamp(4rem,8vw,8rem);

  /* ── Nav ────────────────────────────────────────────────── */
  --nav-h:          88px;
  --nav-h-scrolled: 68px;

  /* ── Radius ─────────────────────────────────────────────── */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px;
  --r-xl:20px; --r-2xl:32px; --r-pill:100px;

  /* ── Borders ────────────────────────────────────────────── */
  --b-faint: 1px solid var(--bg-border);
  --b-light: 1px solid var(--ink-10);
  --b-red:   1px solid var(--red-md);
  --b-teal:  1px solid var(--ai-teal-sm);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-io: cubic-bezier(0.4,0,0.2,1);
  --dur-fast:150ms; --dur-mid:280ms; --dur-slow:550ms; --dur-xslow:850ms;

  /* ── Z ──────────────────────────────────────────────────── */
  --z-dropdown:200; --z-nav:300; --z-toast:500;
}

/* ================================================================
   RESET
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:17px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;}
body{font-family:var(--f-body);font-size:var(--text-md);line-height:1.75;color:var(--ink-60);background:var(--bg-page);overflow-x:hidden;}
img,video,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font:inherit;}
input,textarea,select{font:inherit;font-size:var(--text-md);}
table{border-collapse:collapse;}
::selection{background:var(--red-sm);color:var(--red-deep);}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
.display-hero{font-family:var(--f-display);font-size:var(--head-hero);font-weight:var(--fw-extrabold);line-height:1.0;letter-spacing:-0.03em;}
.display-1{font-family:var(--f-display);font-size:var(--head-2xl);font-weight:var(--fw-extrabold);line-height:1.04;letter-spacing:-0.025em;}
.display-2{font-family:var(--f-display);font-size:var(--head-xl);font-weight:var(--fw-bold);line-height:1.08;letter-spacing:-0.02em;}
.display-3{font-family:var(--f-display);font-size:var(--head-lg);font-weight:var(--fw-bold);line-height:1.12;letter-spacing:-0.015em;}

h1{font-family:var(--f-display);font-size:var(--head-xl);font-weight:var(--fw-bold);line-height:1.12;letter-spacing:-0.02em;color:var(--ink);}
h2{font-family:var(--f-display);font-size:var(--head-lg);font-weight:var(--fw-bold);line-height:1.15;letter-spacing:-0.015em;color:var(--ink);}
h3{font-family:var(--f-display);font-size:var(--head-md);font-weight:var(--fw-semibold);line-height:1.22;color:var(--ink);}
h4{font-family:var(--f-body);font-size:var(--head-sm);font-weight:var(--fw-semibold);line-height:1.3;color:var(--ink);}
h5{font-family:var(--f-body);font-size:var(--text-lg);font-weight:var(--fw-bold);line-height:1.4;color:var(--ink);}
h6{font-family:var(--f-body);font-size:var(--text-md);font-weight:var(--fw-bold);color:var(--ink);}
p{font-size:var(--text-md);line-height:1.78;}

.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--f-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--red);}
.eyebrow::before{content:'';display:inline-block;width:16px;height:2px;background:currentColor;flex-shrink:0;border-radius:1px;}
.eyebrow--teal{color:var(--ai-teal);}
/* eyebrow--muted: white ONLY inside dark-background sections */
.hero .eyebrow--muted,
.page-hero .eyebrow--muted,
.ai-section .eyebrow--muted,
.cta-section .eyebrow--muted,
.adv-panel .eyebrow--muted,
.site-footer .eyebrow--muted,
.ticker .eyebrow--muted{color:rgba(255,255,255,0.55);}
.hero .eyebrow--muted::before,
.page-hero .eyebrow--muted::before,
.ai-section .eyebrow--muted::before,
.cta-section .eyebrow--muted::before,
.adv-panel .eyebrow--muted::before,
.site-footer .eyebrow--muted::before,
.ticker .eyebrow--muted::before{background:rgba(255,255,255,0.4);}
.eyebrow--muted{color:var(--ink-40);}  /* dark by default — only white inside dark sections */
.eyebrow--muted::before{background:var(--ink-40);}

.lead{font-size:var(--text-lg);line-height:1.78;color:var(--ink-60);font-weight:var(--fw-regular);}
.lead--light{color:rgba(255,255,255,0.75);}
.mono-tag{font-family:var(--f-mono);font-size:var(--text-xs);color:var(--ai-teal);}

/* ================================================================
   LAYOUT
   ================================================================ */
.container{width:100%;max-width:1260px;margin:0 auto;padding-inline:clamp(var(--s-4),5vw,var(--s-10));}
.container--sm{max-width:780px;}
.container--md{max-width:1000px;}
.container--xl{max-width:1480px;}
section{padding:var(--s-24) 0;position:relative;}
.section--sm{padding:var(--s-16) 0;}
.section--xl{padding:clamp(4rem,8vw,7rem) 0;}
.grid{display:grid;gap:clamp(var(--s-4),3vw,var(--s-6));}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.col-7-5{grid-template-columns:7fr 5fr;}
.col-5-7{grid-template-columns:5fr 7fr;}
.col-6-6{grid-template-columns:1fr 1fr;}

/* ================================================================
   NAVIGATION — white, clean, logo shows naturally
   ================================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  min-height:var(--nav-h);height:auto;padding:8px 0;
  display:flex;align-items:center;width:100%;
  background:rgba(255,255,255,0.97);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--bg-border);
  transition:min-height var(--dur-fast) var(--ease-io),
             box-shadow var(--dur-fast) var(--ease-io),
             padding var(--dur-fast) var(--ease-io);
}
/* Thin red top accent — brand identity */
.site-header::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--red);
}
.site-header.scrolled{
  min-height:var(--nav-h-scrolled);padding:6px 0;
  box-shadow:0 2px 20px rgba(0,0,0,0.07);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);width:100%;}

/* Logo — NO filter, white header = logo shows perfectly */
.nav-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.logo-img{
  height:clamp(56px,7vw,80px);width:auto;max-width:300px;
  object-fit:contain;filter:none !important;
  transition:height var(--dur-fast) var(--ease-io);
}
.site-header.scrolled .logo-img{height:clamp(46px,5.5vw,60px);}

.nav-primary{display:flex;align-items:center;gap:0;}
.nav-item{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:3px;
  font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--ink-60);
  padding:var(--s-2) clamp(var(--s-3),1.2vw,14px);
  border-radius:var(--r-sm);
  transition:color var(--dur-fast),background var(--dur-fast);
  white-space:nowrap;cursor:pointer;
}
.nav-link .chevron{font-size:9px;opacity:0.4;transition:transform var(--dur-fast);}
.nav-item:hover .nav-link .chevron{transform:rotate(180deg);}
.nav-link:hover,.nav-link.active{color:var(--red);}

.nav-mega{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--white);border:var(--b-faint);border-radius:var(--r-xl);
  padding:var(--s-5);min-width:520px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out),visibility var(--dur-mid);
  box-shadow:0 24px 64px rgba(0,0,0,0.10),0 4px 16px rgba(0,0,0,0.04);
  z-index:var(--z-dropdown);
}
.nav-item:hover .nav-mega,.nav-item:focus-within .nav-mega{
  opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0);
}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);}
.mega-label{font-family:var(--f-mono);font-size:var(--text-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-20);padding:var(--s-2) var(--s-3);margin-bottom:var(--s-1);grid-column:1/-1;}
.mega-link{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);transition:background var(--dur-fast);color:var(--ink-80);}
.mega-link:hover{background:var(--bg-warm);}
.mega-link:hover .mega-link-title{color:var(--red);}
.mega-link-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--bg-warm);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-fast);}
.mega-link:hover .mega-link-icon{background:var(--red-xs);}
.mega-link-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);line-height:1.2;margin-bottom:2px;}
.mega-link-desc{font-size:var(--text-xs);color:var(--ink-20);line-height:1.45;}

.nav-rail{display:flex;align-items:center;gap:var(--s-3);flex-shrink:0;}
.nav-badge{
  font-family:var(--f-mono);font-size:var(--text-2xs);font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ai-teal);background:var(--ai-teal-xs);border:var(--b-teal);
  padding:4px 11px;border-radius:var(--r-pill);
}
.btn-nav{
  font-family:var(--f-body);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  color:var(--white);background:var(--red);
  padding:10px 22px;border-radius:var(--r-pill);
  transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);
  white-space:nowrap;
}
.btn-nav:hover{background:var(--red-deep);transform:translateY(-1px);box-shadow:0 6px 18px rgba(199,70,52,0.28);}

.nav-mobile-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border-radius:var(--r-sm);padding:8px;transition:background var(--dur-fast);flex-shrink:0;}
.nav-mobile-toggle:hover{background:var(--ink-05);}
.nav-mobile-toggle .bar{display:block;width:22px;height:2px;background:var(--ink-60);border-radius:2px;transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-fast);}
.nav-mobile-toggle.open .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-mobile-toggle.open .bar:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-mobile-toggle.open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(360px,90vw);background:var(--white);z-index:calc(var(--z-nav) - 1);transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);overflow-y:auto;box-shadow:-16px 0 64px rgba(0,0,0,0.10);border-left:var(--b-faint);}
.mobile-drawer.open{transform:translateX(0);}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.22);z-index:calc(var(--z-nav) - 2);opacity:0;visibility:hidden;transition:opacity var(--dur-mid),visibility var(--dur-mid);}
.drawer-overlay.show{opacity:1;visibility:visible;}
.drawer-inner{padding:6rem var(--s-6) var(--s-8);}
.drawer-section{margin-bottom:var(--s-6);}
.drawer-section-label{font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-20);margin-bottom:var(--s-3);}
.drawer-link{display:block;padding:var(--s-4) 0;font-size:var(--text-lg);font-weight:var(--fw-medium);color:var(--ink-60);border-bottom:var(--b-faint);transition:color var(--dur-fast),padding-left var(--dur-fast);}
.drawer-link:hover{color:var(--red);padding-left:var(--s-3);}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--f-body);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  line-height:1;padding:0.82em 1.9em;border-radius:var(--r-pill);
  border:2px solid transparent;
  transition:all var(--dur-fast) var(--ease-io);
  white-space:nowrap;cursor:pointer;text-decoration:none;
}
.btn-primary{background:var(--red);color:var(--white);border-color:var(--red);}
.btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px);box-shadow:0 8px 24px rgba(199,70,52,0.28);}
.btn-primary:active{transform:translateY(0);box-shadow:none;}

.btn-outline{background:transparent;color:var(--red);border-color:var(--red);}
.btn-outline:hover{background:var(--red);color:var(--white);transform:translateY(-1px);}

/* Outlined dark — for light backgrounds. Strong enough to see. */
.btn-outline-dark{
  background:transparent;color:var(--ink-80);
  border-color:rgba(26,26,26,0.35);
}
.btn-outline-dark:hover{border-color:var(--ink-60);background:var(--bg-warm);}

/* White ghost — for dark/red backgrounds */
.btn-ghost-white{
  background:rgba(255,255,255,0.10);color:var(--white);
  border-color:rgba(255,255,255,0.58);font-weight:var(--fw-semibold);
}
.btn-ghost-white:hover{background:rgba(255,255,255,0.20);border-color:rgba(255,255,255,0.90);transform:translateY(-1px);}

.btn-ai{background:var(--ai-teal);color:var(--white);border-color:var(--ai-teal);font-weight:var(--fw-bold);}
.btn-ai:hover{background:#077D68;transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,155,130,0.28);}

.btn--sm{font-size:var(--text-xs);padding:0.65em 1.4em;}
.btn--lg{font-size:var(--text-md);padding:0.95em 2.2em;}
.btn--xl{font-size:var(--text-lg);padding:1.05em 2.6em;}
.btn .arr{display:inline-block;transition:transform var(--dur-fast);font-style:normal;}
.btn:hover .arr{transform:translateX(4px);}

/* ================================================================
   HERO — Light warm, professional, clean
   Blends mainillc.com warmth with dev site visual richness.
   ================================================================ */
.hero{
  min-height:100svh;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  background:
    /* top-center gloss highlight */
    radial-gradient(ellipse 100% 45% at 50% -8%, rgba(255,200,170,0.22) 0%, transparent 65%),
    /* strong brand red glow — left side where headline sits */
    radial-gradient(ellipse 65% 80% at 5%  55%, rgba(199,70,52,0.38)  0%, transparent 55%),
    /* warm accent top-right */
    radial-gradient(ellipse 45% 50% at 88% 18%, rgba(180,55,25,0.20)  0%, transparent 52%),
    /* deep shadow pool at bottom — adds cinematic depth */
    radial-gradient(ellipse 80% 40% at 50% 105%, rgba(20,5,2,0.70)   0%, transparent 65%),
    /* base gradient — rich deep terracotta */
    linear-gradient(152deg, #9E3A28 0%, #7A2A1A 35%, #5A1C10 65%, #38100A 100%);
  padding-top:var(--nav-h);
}

/* Fine grid overlay — slightly more visible for depth */
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px);
  background-size:56px 56px;z-index:0;
}

/* Diagonal accent line — brighter */
.hero-slash{
  position:absolute;top:0;right:18%;width:1px;height:100%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,140,100,0.22) 35%,
    rgba(199,70,52,0.28)   55%,
    rgba(199,70,52,0.08)   80%,
    transparent 100%);
  transform:skewX(-8deg);z-index:0;
}

/* ── Decorative rings — pulled in slightly from right edge ── */
.hero-circles{
  position:absolute;right:8%;top:50%;transform:translateY(-50%);
  width:min(400px,38vw);height:min(400px,38vw);z-index:1;
}
.hc-ring{position:absolute;border-radius:50%;border:1px solid;}
.hc-ring-1{inset:0;   border-color:rgba(255,255,255,0.22);animation:spin-slow 22s linear infinite;}
.hc-ring-2{inset:36px;border-color:rgba(10,155,130,0.40); animation:spin-slow 30s linear infinite reverse;}
.hc-ring-3{inset:76px;border-color:rgba(255,255,255,0.12);animation:spin-slow 16s linear infinite;}
.hc-ring-4{inset:118px;border-color:rgba(10,155,130,0.20);animation:spin-slow 38s linear infinite reverse;}

/* Orbit dots — larger, brighter glows */
.hc-ring::before{content:'';position:absolute;width:10px;height:10px;border-radius:50%;top:-5px;left:50%;transform:translateX(-50%);}
.hc-ring-1::before{background:var(--red);      box-shadow:0 0 16px 4px rgba(199,70,52,0.60);}
.hc-ring-2::before{background:var(--ai-teal);  box-shadow:0 0 16px 4px rgba(10,155,130,0.55);}
.hc-ring-3::before{background:#FF9070;          box-shadow:0 0 10px 2px rgba(255,144,112,0.45);}
.hc-ring-4::before{background:var(--ai-teal);  box-shadow:0 0 10px 2px rgba(10,155,130,0.40);}

/* Core — glowing centre */
.hc-core{
  position:absolute;inset:148px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%, rgba(199,70,52,0.18), rgba(0,0,0,0.30));
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 0 40px rgba(199,70,52,0.20), inset 0 0 30px rgba(0,0,0,0.30);
  display:flex;align-items:center;justify-content:center;
}
.hc-core-text{text-align:center;font-family:var(--f-mono);line-height:1.2;}
.hc-core-text .num{display:block;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:var(--fw-extrabold);color:var(--white);letter-spacing:-0.03em;}
.hc-core-text .sub{display:block;font-size:var(--text-2xs);letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.45);}

@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Floating data nodes — hidden */
.hero-nodes{display:none;}

/* ── Hero content ── */
.hero-content{position:relative;z-index:2;width:100%;padding:var(--s-12) 0 var(--s-4);max-width:58%;padding-left:clamp(var(--s-4),3vw,var(--s-8));}

/* Compact eyebrow row — two small badges */
.hero-eyebrow-row{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
}
.hero-eyebrow-badge{
  font-family:var(--f-mono);font-size:var(--text-2xs);font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.72);
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  padding:4px 12px;border-radius:var(--r-pill);
}
.hero-eyebrow-dot{
  color:rgba(255,255,255,0.25);
  font-size:var(--text-sm);
}

/* Headline */
.hero-headline{
  color:var(--white);
  margin-bottom:var(--s-6);
  line-height:1.0;           /* tight — no gap between lines */
}

/* Accent word — gradient text, the showpiece */
.hero-headline .accent{
  display:inline;            /* inline so "with AI." follows on same/next line naturally */
  background:linear-gradient(118deg, #FFE8D6 0%, #FF9A72 40%, #FF6644 70%, #FFB090 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 24px rgba(255,100,60,0.35));
}

/* "with AI." — clean white outline */
.hero-headline .stroke-text{
  display:block;             /* puts "with AI." on its own line below */
  -webkit-text-stroke:1.5px rgba(255,255,255,0.30);
  color:transparent;
  letter-spacing:-0.02em;
  margin-top:var(--s-1);    /* tiny gap, not a chasm */
}

.hero .hero-content .lead--light,
.hero .hero-content .hero-sub{color:rgba(255,255,255,0.75) !important;}
.hero-sub{font-size:var(--text-lg);color:rgba(255,255,255,0.75);line-height:1.78;max-width:560px;margin-bottom:var(--s-8);}
.hero-cta-row{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-6);}

/* Stats row */
.hero-proof-row{
  display:grid;grid-template-columns:repeat(4,auto);gap:clamp(var(--s-4),3vw,var(--s-8));
  padding-top:var(--s-4);
  margin-top:var(--s-3);
  border-top:1px solid rgba(255,255,255,0.18);
}
.hero-stat .n{
  display:block;font-family:var(--f-display);
  font-size:clamp(1.6rem,3vw,2.6rem);
  font-weight:var(--fw-extrabold);color:var(--white);
  line-height:1;letter-spacing:-0.03em;
}
.hero-stat .n em{
  background:linear-gradient(135deg,#FFE0C8,#FF8060);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-style:normal;
}
.hero-stat .l{display:block;font-size:var(--text-xs);color:rgba(255,255,255,0.50);text-transform:uppercase;letter-spacing:0.1em;margin-top:5px;font-family:var(--f-mono);}

/* ================================================================
   TICKER — warm medium-dark strip, clean chapter break
   ================================================================ */
.ticker{
  /* Slightly deeper than hero base — smooth chapter break, same warm family */
  background:#3C1A0E;
  border-top:none;border-bottom:none;
  padding:var(--s-3) 0;overflow:hidden;
}
.ticker-track{display:flex;align-items:center;gap:var(--s-10);animation:ticker 44s linear infinite;width:max-content;}
.ticker-item{display:flex;align-items:center;gap:var(--s-2);font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.50);flex-shrink:0;}
.ticker-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;}
.ticker-dot-red{background:var(--red);}.ticker-dot-teal{background:var(--ai-teal);}
.ticker-val{font-weight:var(--fw-bold);color:rgba(255,255,255,0.85);}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.sh{margin-bottom:var(--s-12);}
.sh--center{text-align:center;}
.sh--center .eyebrow{justify-content:center;}
.sh--center .sh-lead{margin:0 auto;}
.sh .eyebrow{margin-bottom:var(--s-3);}
.sh-title{margin-bottom:var(--s-4);}
.sh-lead{font-size:var(--text-lg);color:var(--ink-60);line-height:1.78;max-width:620px;}

/* ================================================================
   CARDS
   ================================================================ */
.card{
  border-radius:var(--r-xl);border:var(--b-faint);background:var(--white);
  padding:clamp(var(--s-5),3vw,var(--s-6));
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid),border-color var(--dur-mid);
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08);border-color:var(--red-md);}
.card-tinted{background:var(--bg-warm);}

/* Service cards */
.svc-card{
  background:var(--white);
  border:1px solid var(--bg-border);
  border-radius:var(--r-xl);
  padding:clamp(var(--s-6),4vw,var(--s-8)) clamp(var(--s-5),3vw,var(--s-6));
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid),border-color var(--dur-mid);
  display:flex;flex-direction:column;
}
/* Always-on faint top accent line */
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,rgba(14,28,46,0.10),rgba(14,28,46,0.04));
  transition:background var(--dur-mid);
}
/* Animated red line that slides in on hover */
.svc-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--red-bright));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease-out);
}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(0,0,0,0.10);border-color:rgba(199,70,52,0.20);}
.svc-card:hover::after{transform:scaleX(1);}
.svc-card:hover::before{background:transparent;}

/* Dark accent card variant */
.svc-card.svc-accent{background:var(--dark);border-color:rgba(255,255,255,0.08);color:var(--white);}
.svc-card.svc-accent::after{background:linear-gradient(90deg,var(--ai-teal),var(--ai-blue));transform:scaleX(1);}
.svc-card.svc-accent:hover{border-color:rgba(255,255,255,0.18);}

/* ── Numbers — bold, dark navy, prominent ── */
.svc-num{
  font-family:var(--f-display);
  font-size:clamp(2.8rem,5.5vw,4rem);
  font-weight:var(--fw-extrabold);
  line-height:1;
  color:var(--dark);          /* deep navy — bold and visible */
  letter-spacing:-0.06em;
  margin-bottom:var(--s-3);
  transition:color var(--dur-mid);
}
.svc-card:hover .svc-num{color:var(--red);}           /* brand red on hover */
.svc-card.svc-accent .svc-num{color:rgba(255,255,255,0.12);}

/* ── Service tag badge ── */
.svc-tag{
  display:inline-block;
  font-family:var(--f-mono);font-size:var(--text-xs);
  font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--red);background:var(--red-xs);
  border:1px solid var(--red-sm);
  padding:5px 14px;border-radius:var(--r-pill);
  margin-bottom:var(--s-4);
}
.svc-card.svc-accent .svc-tag{color:var(--ai-teal);background:var(--ai-teal-xs);border-color:var(--ai-teal-sm);}

/* ── Heading ── */
.svc-card h3{
  font-size:var(--head-sm);     /* slightly tighter for 4-column */
  margin-bottom:var(--s-3);
  line-height:1.22;
}
.svc-card.svc-accent h3{color:var(--white);}

/* ── Body copy ── */
.svc-card p{font-size:var(--text-sm);color:var(--ink-60);line-height:1.78;flex:1;}
.svc-card.svc-accent p{color:rgba(255,255,255,0.58);}

/* ── Module/feature pills ── */
.svc-modules{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-5);}
.svc-mod{
  font-family:var(--f-mono);font-size:var(--text-xs);
  color:var(--ink-60);
  background:#F3F2F0;
  border:1px solid rgba(0,0,0,0.08);
  padding:5px 12px;border-radius:var(--r-pill);
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.svc-card:hover .svc-mod{
  background:rgba(199,70,52,0.06);
  border-color:rgba(199,70,52,0.20);
  color:var(--red-deep);
}
.svc-card.svc-accent .svc-mod{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.50);}

.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(var(--s-3),2vw,var(--s-4));}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr;}}

/* ── Module/pill tags inside dark page-hero (ERP, HCM, SCM labels) ─
   These use .pill-module or .svc-mod which have dark text on light bg.
   Override for dark banner context.                                  */
.page-hero .pill,
.page-hero .pill-module,
.page-hero .svc-mod,
.page-hero [class*="module"],
.page-hero [class*="tag"]{
  background:rgba(255,255,255,0.14) !important;
  color:rgba(255,255,255,0.85) !important;
  border-color:rgba(255,255,255,0.28) !important;
}

/* Pills / badges */
.pill{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);}
.pill-red{background:var(--red-xs);color:var(--red-deep);}
.pill-teal{background:var(--ai-teal-xs);color:var(--ai-teal);}
.pill-muted{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.60);}
.pill-module{background:var(--bg-muted);color:var(--ink-40);border:var(--b-faint);}
.icon-badge{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-4);flex-shrink:0;}
.icon-badge--red{background:var(--red-xs);}
.icon-badge--teal{background:var(--ai-teal-xs);}

/* ================================================================
   ADVANTAGE SECTION
   ================================================================ */
.advantage-section{background:var(--bg-warm);}
.adv-cards{display:flex;flex-direction:column;gap:var(--s-3);}
.adv-card{display:flex;gap:var(--s-4);align-items:flex-start;background:var(--white);border:var(--b-faint);border-radius:var(--r-lg);padding:clamp(var(--s-4),3vw,var(--s-5));transition:border-color var(--dur-fast),box-shadow var(--dur-fast);box-shadow:0 1px 3px rgba(0,0,0,0.03);}
.adv-card:hover{border-color:var(--red-md);box-shadow:0 6px 24px rgba(0,0,0,0.06);}
.adv-num{font-family:var(--f-display);font-size:var(--text-sm);font-weight:var(--fw-extrabold);color:var(--red);opacity:0.5;min-width:28px;padding-top:3px;}
.adv-card h4{margin-bottom:var(--s-1);}
.adv-card p{font-size:var(--text-sm);color:var(--ink-60);line-height:1.75;}
/* Stats panel — warm coffee brown, clearly colored */
.adv-panel{
  background:var(--dark);border-radius:var(--r-2xl);
  padding:clamp(var(--s-6),4vw,var(--s-8));
  height:100%;display:flex;flex-direction:column;gap:var(--s-6);
  position:relative;overflow:hidden;
}
.adv-panel::before{content:'';position:absolute;top:-40px;right:-40px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(199,70,52,0.15);}
.adv-panel::after{content:'';position:absolute;bottom:-60px;left:-30px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(199,70,52,0.08);}
.adv-stat-block{position:relative;z-index:1;}
.adv-stat-n{font-family:var(--f-display);font-size:clamp(2rem,4vw,3.2rem);font-weight:var(--fw-extrabold);color:var(--white);line-height:1;letter-spacing:-0.04em;}
.adv-stat-n .accent{color:#FF7059;}
.adv-stat-n .accent-teal{color:var(--ai-teal);}
.adv-stat-label{font-size:var(--text-xs);color:rgba(255,255,255,0.48);margin-top:var(--s-1);text-transform:uppercase;letter-spacing:0.1em;font-family:var(--f-mono);}
.adv-divider{height:1px;background:rgba(255,255,255,0.10);}

/* ================================================================
   AI SECTION — deep navy, elegant gradient
   ================================================================ */
.ai-section{
  background:
    radial-gradient(ellipse 70% 60% at 10% 40%, rgba(199,70,52,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 90% 15%, rgba(10,155,130,0.10) 0%, transparent 52%),
    radial-gradient(ellipse 45% 50% at 55% 95%, rgba(26,111,212,0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0E1C2E 0%, #142338 50%, #0A1620 100%);
  position:relative;overflow:hidden;
}
.ai-atmo{position:absolute;pointer-events:none;}
.ai-atmo-1{top:-20%;left:-10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(199,70,52,0.08) 0%,transparent 70%);}
.ai-atmo-2{bottom:-30%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(10,155,130,0.08) 0%,transparent 70%);}

/* 5-column open feature columns — no rectangle cards */
/* 5-card grid — 3 on row 1, 2 centered on row 2 */
.ai-feature-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(var(--s-3),2vw,var(--s-4));
}
.aif{ grid-column:span 2; }
/* Centre the last 2 cards */
.aif:nth-child(4){ grid-column:2 / span 2; }
.aif:nth-child(5){ grid-column:4 / span 2; }

/* Card — elevated glass panel on dark background */
.aif{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r-xl);
  padding:clamp(var(--s-5),3vw,var(--s-6));
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background var(--dur-mid),border-color var(--dur-mid),transform var(--dur-mid),box-shadow var(--dur-mid);
}
.aif:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(10,155,130,0.35);
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
}

/* Teal top accent bar — full width, slides in on hover */
.aif::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, var(--red), var(--ai-teal));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease-out);
}
.aif:hover::before{transform:scaleX(1);}

/* Icon badge — brand red */
.aif-icon{
  width:42px;height:42px;
  background:var(--red-xs);
  border:1px solid var(--red-sm);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s-4);
  flex-shrink:0;
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.aif:hover .aif-icon{background:var(--red-sm);transform:scale(1.05);}

.aif h4{
  font-size:var(--text-md);
  color:var(--white);
  margin-bottom:var(--s-2);
  font-weight:var(--fw-semibold);
  line-height:1.3;
}
.aif p{
  font-size:var(--text-sm);
  color:rgba(255,255,255,0.52);
  line-height:1.75;
  flex:1;
}

/* Metric badge — brand red */
.aif-metric{
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-family:var(--f-mono);font-size:var(--text-xs);
  color:var(--red-bright);
  background:var(--red-xs);
  border:1px solid var(--red-sm);
  padding:4px 10px;border-radius:var(--r-pill);
  margin-top:var(--s-4);
  letter-spacing:0.04em;
  font-weight:600;
  width:fit-content;
}

/* AI section heading overrides — white text on dark */
.ai-section h2,.ai-section .sh-title{color:var(--white);}
.ai-section .eyebrow{color:var(--ai-teal);}
.ai-section .eyebrow::before{background:var(--ai-teal);}
.ai-section .sh-lead{color:rgba(255,255,255,0.62);}

/* ================================================================
   ORACLE PRODUCTS
   ================================================================ */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(var(--s-3),2vw,var(--s-4));}
.prod-card{border-radius:var(--r-xl);border:var(--b-faint);background:var(--white);padding:clamp(var(--s-4),3vw,var(--s-5));box-shadow:0 1px 4px rgba(0,0,0,0.03);transition:all var(--dur-mid) var(--ease-out);}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08);border-color:var(--red-md);}
.prod-bar{height:3px;border-radius:2px;margin-bottom:var(--s-4);}
.prod-abbr{font-family:var(--f-display);font-size:clamp(1.25rem,2vw,1.5rem);font-weight:var(--fw-extrabold);color:var(--ink-80);letter-spacing:-0.02em;margin-bottom:var(--s-1);}
.prod-name{font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-20);margin-bottom:var(--s-4);}
.prod-modules{display:flex;flex-direction:column;gap:var(--s-1);}
.prod-mod{font-size:var(--text-sm);color:var(--ink-40);padding:3px 0;border-bottom:var(--b-faint);}
.prod-mod:last-child{border-bottom:none;}

/* ================================================================
   TIER CARDS
   ================================================================ */
.tiers-section{background:var(--bg-warm);}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(var(--s-4),2.5vw,var(--s-5));align-items:start;}
.tier-card{border-radius:var(--r-xl);border:var(--b-light);background:var(--white);padding:clamp(var(--s-6),4vw,var(--s-8));position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all var(--dur-mid) var(--ease-out);}
.tier-card:hover{transform:translateY(-4px);box-shadow:0 20px 56px rgba(0,0,0,0.09);}
.tier-featured{background:var(--red);border-color:var(--red);box-shadow:0 24px 64px rgba(199,70,52,0.28);}
.tier-badge{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-50%);font-family:var(--f-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:var(--ai-teal);color:var(--white);padding:6px 16px;border-radius:var(--r-pill);white-space:nowrap;}
.tier-tier{font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-20);margin-bottom:var(--s-2);}
.tier-featured .tier-tier{color:rgba(255,255,255,0.65);}
.tier-name{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:var(--fw-bold);letter-spacing:-0.02em;margin-bottom:var(--s-1);}
.tier-featured .tier-name{color:var(--white);}
.tier-sub{font-size:var(--text-sm);color:var(--ink-40);margin-bottom:var(--s-6);padding-bottom:var(--s-6);border-bottom:var(--b-faint);}
.tier-featured .tier-sub{color:#ffffff !important;border-color:rgba(255,255,255,0.25);}
.tier-features{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-6);}
.tier-feat{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--text-sm);color:var(--ink-60);line-height:1.65;}
.tier-featured .tier-feat{color:rgba(255,255,255,0.97);}
.tier-feat::before{content:'';display:block;width:18px;height:18px;min-width:18px;border-radius:50%;background:var(--ai-teal-xs);border:1px solid var(--ai-teal-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A9B82' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:11px;background-repeat:no-repeat;background-position:center;margin-top:1px;}
.tier-featured .tier-feat::before{background-color:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}
.tier-cta{display:block;width:100%;text-align:center;padding:var(--s-3) var(--s-4);border-radius:var(--r-pill);font-size:var(--text-sm);font-weight:var(--fw-bold);transition:all var(--dur-fast);border:2px solid var(--red);color:var(--red);background:transparent;cursor:pointer;}
.tier-cta:hover{background:var(--red);color:var(--white);transform:translateY(-1px);}
.tier-featured .tier-cta{background:var(--white);color:var(--red);border-color:var(--white);}
.tier-featured .tier-cta:hover{background:rgba(255,255,255,0.92);}

/* ================================================================
   PROCESS STEPS — 5D Framework
   ================================================================ */
.process-section{background:var(--bg-warm);}
.process-row{display:grid;grid-template-columns:repeat(5,1fr);position:relative;gap:var(--s-4);padding-top:var(--s-6);}
.process-connector{position:absolute;top:calc(var(--s-6) + 28px);left:calc(10% + 28px);right:calc(10% + 28px);height:2px;background:linear-gradient(90deg,transparent,rgba(199,70,52,0.20),rgba(199,70,52,0.20),transparent);z-index:0;}
.proc-step{text-align:center;padding:0 var(--s-2);position:relative;z-index:1;}
.proc-circle{width:56px;height:56px;border-radius:50%;background:var(--red);border:3px solid var(--red);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-5);font-family:var(--f-display);font-size:var(--text-md);font-weight:var(--fw-extrabold);color:var(--white);box-shadow:0 4px 16px rgba(199,70,52,0.28);transition:all var(--dur-mid) var(--ease-out);}
.proc-step:hover .proc-circle{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-3px) scale(1.08);box-shadow:0 10px 28px rgba(199,70,52,0.36);}
.proc-step-card{background:var(--white);border:var(--b-faint);border-radius:var(--r-lg);padding:var(--s-5) var(--s-4) var(--s-4);transition:box-shadow var(--dur-mid),transform var(--dur-mid),border-color var(--dur-mid);}
.proc-step:hover .proc-step-card{box-shadow:0 8px 28px rgba(0,0,0,0.07);transform:translateY(-2px);border-color:var(--red-md);}
.proc-step-label{display:block;font-family:var(--f-mono);font-size:var(--text-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:var(--s-2);}
.proc-step h5{margin-bottom:var(--s-2);font-size:var(--text-sm);font-weight:var(--fw-bold);}
.proc-step p{font-size:var(--text-xs);color:var(--ink-40);line-height:1.65;}

/* ================================================================
   COMPARISON TABLE — polished design
   ================================================================ */
.comp-table-wrap{
  overflow-x:auto;
  border-radius:var(--r-2xl);
  border:1px solid var(--bg-border);
  -webkit-overflow-scrolling:touch;
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  background:var(--white);
}
.comp-table{width:100%;min-width:580px;border-collapse:collapse;}

/* Header row */
.comp-table thead tr{background:var(--bg-subtle);}
.comp-table th{
  padding:clamp(var(--s-3),2vw,var(--s-4)) clamp(var(--s-4),2.5vw,var(--s-5));
  font-family:var(--f-mono);font-size:var(--text-xs);
  letter-spacing:0.10em;text-transform:uppercase;
  font-weight:700;color:var(--ink-60);   /* darker — more readable */
  text-align:center;border-bottom:2px solid var(--bg-border);
  white-space:nowrap;
}
/* First col left-aligned */
.comp-table th:first-child{text-align:left;color:var(--ink-40);}

/* Maini column header — stands out */
.comp-table th.th-maini{
  background:var(--dark);
  color:#FFFFFF;
  border-bottom-color:var(--dark);
  position:relative;
  padding-top:var(--s-4);
  padding-bottom:var(--s-4);
}
.comp-table th.th-maini::after{
  content:'✦ Our Advantage';
  display:block;
  font-size:var(--text-2xs);
  letter-spacing:0.08em;
  color:var(--ai-teal);
  font-weight:600;
  margin-top:5px;
  text-transform:uppercase;
}

/* Body rows */
.comp-table tbody tr{transition:background var(--dur-fast);}
.comp-table tbody tr:hover td{background:var(--bg-warm);}
.comp-table tbody tr:hover td.td-maini{background:rgba(199,70,52,0.06);}
.comp-table tbody tr:last-child td{border-bottom:none;}

.comp-table td{
  padding:clamp(var(--s-3),2vw,var(--s-4)) clamp(var(--s-4),2.5vw,var(--s-5));
  font-size:var(--text-sm);
  color:var(--ink-60);
  border-bottom:1px solid var(--bg-border);
  vertical-align:middle;
  text-align:center;
}
.comp-table td:first-child{
  text-align:left;
  font-weight:var(--fw-medium);
  color:var(--ink-80);
}

/* Maini column cells */
.comp-table td.td-maini{
  background:rgba(199,70,52,0.04);
  border-left:2px solid rgba(199,70,52,0.15);
  border-right:2px solid rgba(199,70,52,0.15);
}

/* Check / cross / partial icons */
.chk-yes{
  color:var(--ai-teal);
  font-size:var(--text-xl);
  font-weight:var(--fw-extrabold);
  line-height:1;
}
.chk-no{
  color:var(--ink-10);
  font-size:var(--text-xl);
  line-height:1;
}
.chk-partial-label{
  font-size:var(--text-sm);
  color:var(--ink-60);
  font-weight:var(--fw-regular);
}

/* ** superscript — stays inline, never wraps to next line */
.comp-star{
  font-family:var(--f-mono);
  font-size:0.65em;
  font-weight:700;
  color:var(--ai-teal);
  vertical-align:super;
  letter-spacing:0;
  margin-left:2px;
  white-space:nowrap;
  display:inline;
}
/* Prevent the whole capability + star from orphaning the star alone */
.comp-table td:first-child{
  white-space:normal;
  word-break:keep-all;
}

/* Footnote bar */
.comp-footnote{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-4);
  padding:var(--s-3) var(--s-5);
  background:rgba(10,155,130,0.05);
  border:1px solid rgba(10,155,130,0.14);
  border-radius:var(--r-lg);
  font-size:var(--text-xs);
  color:var(--ink-60);
}
.comp-footnote-star{
  font-family:var(--f-mono);font-weight:700;
  color:var(--ai-teal);font-size:var(--text-sm);
  flex-shrink:0;
}
.comp-footnote a{
  color:var(--red);font-weight:var(--fw-semibold);
  margin-left:auto;
  white-space:nowrap;
  transition:color var(--dur-fast);
}
.comp-footnote a:hover{color:var(--red-deep);}

/* ================================================================
   INDUSTRIES — primary expertise showcase
   ================================================================ */

/* Section: deep navy gradient — stands out as the main feature area */
.ind-section{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(199,70,52,0.08) 0%, transparent 55%),
    linear-gradient(170deg, #0A1728 0%, #0E1E35 50%, #071120 100%);
  padding:clamp(4rem,7vw,7rem) 0;
  position:relative;overflow:hidden;
}
/* Subtle dot grid overlay */
.ind-section::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}

/* Section header: 2-column — title left, stats right */
.ind-section-header{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(var(--s-8),6vw,var(--s-16));
  align-items:end;
  margin-bottom:clamp(var(--s-10),5vw,var(--s-16));
}
.ind-section .eyebrow--muted{color:rgba(255,255,255,0.40) !important;}
.ind-section .eyebrow--muted::before{background:rgba(255,255,255,0.30) !important;}
.ind-section h2,.ind-section .sh-title{color:var(--white) !important;}
.ind-section h2 br{display:block;}
.ind-section .sh-lead{color:rgba(255,255,255,0.55) !important;max-width:560px;margin-top:var(--s-4);}

/* Stats column on the right */
.ind-section-stat-col{
  display:flex;flex-direction:column;gap:var(--s-5);
  flex-shrink:0;min-width:160px;
  border-left:1px solid rgba(255,255,255,0.10);
  padding-left:clamp(var(--s-6),3vw,var(--s-10));
}
.ind-hero-stat .n{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:var(--fw-extrabold);
  color:var(--white);
  line-height:1;
  letter-spacing:-0.04em;
}
.ind-hero-stat .n em{color:var(--red);font-style:normal;}
.ind-hero-stat .l{
  display:block;
  font-family:var(--f-mono);
  font-size:var(--text-xs);
  color:rgba(255,255,255,0.38);
  text-transform:uppercase;
  letter-spacing:0.10em;
  margin-top:4px;
}

/* 3+2 centered grid — 6 virtual columns, each card spans 2 */
.ind-grid-v2{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(var(--s-3),2vw,var(--s-4));
}
/* All cards span 2 of 6 columns → 3 per row */
.ind-card-v2{ grid-column:span 2; }
/* Last 2 cards: offset by 1 col each to centre them */
.ind-card-v2:nth-child(4){ grid-column: 2 / span 2; }
.ind-card-v2:nth-child(5){ grid-column: 4 / span 2; }

/* Card base — elevated dark */
.ind-card-v2{
  background:linear-gradient(160deg,#1E3552 0%,#162840 100%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r-xl);
  padding:clamp(var(--s-4),2vw,var(--s-5));
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 4px 24px rgba(0,0,0,0.28);
  transition:background var(--dur-mid),box-shadow var(--dur-mid),transform var(--dur-mid),border-color var(--dur-mid);
}
.ind-card-v2:hover{
  background:linear-gradient(160deg,#243E62 0%,#1A3050 100%);
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 16px 48px rgba(0,0,0,0.36);
  transform:translateY(-4px);
}

/* Colored left accent bar per industry */
.ind-card-v2::before{
  content:'';
  position:absolute;top:0;left:0;bottom:0;
  width:4px;
  border-radius:var(--r-2xl) 0 0 var(--r-2xl);
  transition:width var(--dur-mid);
}
.ind-card-v2:hover::before{width:5px;}

/* Per-industry accent colors */
.ind-healthcare::before{background:linear-gradient(180deg,#0A9B82,#07796600);}
.ind-healthcare{border-color:rgba(10,155,130,0.18);}
.ind-healthcare:hover{border-color:rgba(10,155,130,0.35);}

.ind-lifesci::before{background:linear-gradient(180deg,#3B82F6,#1D4ED800);}
.ind-lifesci{border-color:rgba(59,130,246,0.18);}
.ind-lifesci:hover{border-color:rgba(59,130,246,0.35);}

.ind-finance::before{background:linear-gradient(180deg,#8B5CF6,#5B21B600);}
.ind-finance{border-color:rgba(139,92,246,0.18);}
.ind-finance:hover{border-color:rgba(139,92,246,0.35);}

.ind-retail::before{background:linear-gradient(180deg,#F59E0B,#B4530000);}
.ind-retail{border-color:rgba(245,158,11,0.18);}
.ind-retail:hover{border-color:rgba(245,158,11,0.35);}

/* Card top row: icon + module tags */
.ind-card-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s-5);
}
.ind-badge{
  font-size:2rem;line-height:1;
  width:52px;height:52px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
}
.ind-modules{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.ind-modules span{
  font-family:var(--f-mono);font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.08em;
  padding:4px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.88);
  transition:background var(--dur-fast),color var(--dur-fast);
}
.ind-card-v2:hover .ind-modules span{
  background:rgba(255,255,255,0.16);
  color:#FFFFFF;
}

/* Heading — bright white */
.ind-card-v2 h3{
  font-size:var(--head-md);
  color:#FFFFFF !important;
  margin-bottom:var(--s-3);
  font-weight:var(--fw-bold);
  line-height:1.2;
}

/* Body text — high opacity, fully readable */
.ind-card-v2 p{
  font-size:var(--text-sm);
  color:rgba(255,255,255,0.82) !important;
  line-height:1.82;
  flex:1;
}

/* Highlight tags */
.ind-highlights{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:var(--s-5);
}
.ind-highlights span{
  font-size:var(--text-xs);
  color:rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  padding:5px 13px;border-radius:var(--r-pill);
  font-family:var(--f-mono);letter-spacing:0.04em;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
}
.ind-card-v2:hover .ind-highlights span{
  background:rgba(255,255,255,0.13);
  border-color:rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.95);
}

/* Integrations row inside card */
.ind-int-row{
  display:flex;align-items:baseline;gap:var(--s-2);
  margin-top:var(--s-4);
  padding-top:var(--s-3);
  border-top:1px solid rgba(255,255,255,0.07);
}
.ind-int-label{
  font-family:var(--f-mono);font-size:9px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  flex-shrink:0;
}
.ind-int-list{
  font-family:var(--f-mono);font-size:var(--text-xs);
  color:rgba(255,255,255,0.62);
  line-height:1.5;
}

/* ROI outcome line */
.ind-roi-line{
  font-size:var(--text-xs);
  color:rgba(255,255,255,0.50);
  line-height:1.65;
  margin-top:var(--s-2);
  padding:var(--s-2) var(--s-3);
  background:rgba(255,255,255,0.04);
  border-radius:var(--r-md);
  border-left:2px solid rgba(10,155,130,0.40);
}

/* CTA link — teal accent, visible on dark card */
.ind-link-v2{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-sm);font-weight:var(--fw-semibold);
  color:rgba(255,255,255,0.65);
  margin-top:var(--s-5);
  transition:color var(--dur-fast),gap var(--dur-fast);
  text-decoration:none;
}
.ind-link-v2:hover{color:#FFFFFF;}
.ind-link-v2 span{transition:transform var(--dur-fast);display:inline-block;}
.ind-link-v2:hover span{transform:translateX(4px);}

/* Per-industry link color on hover */
.ind-healthcare .ind-link-v2:hover{color:#0A9B82;}
.ind-lifesci   .ind-link-v2:hover{color:#60A5FA;}
.ind-finance   .ind-link-v2:hover{color:#A78BFA;}
.ind-retail    .ind-link-v2:hover{color:#FCD34D;}

/* Professional Services — cyan accent */
.ind-proserv::before{background:linear-gradient(180deg,#0891B2,#0E749200);}
.ind-proserv{border-color:rgba(8,145,178,0.18);}
.ind-proserv:hover{border-color:rgba(8,145,178,0.35);}
.ind-proserv .ind-link-v2:hover{color:#22D3EE;}

/* ── ROI by Industry — compact cards ── */
.ind-roi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--s-3),2vw,var(--s-4));
}
/* 5th card centered */
.ind-roi-card:nth-child(4){ grid-column:1/2; }
.ind-roi-card:nth-child(5){ grid-column:2/3; }

.ind-roi-card{
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  transition:background var(--dur-mid),transform var(--dur-mid);
}
.ind-roi-card:hover{background:rgba(255,255,255,0.07);transform:translateY(-2px);}

/* Coloured header strip */
.ind-roi-head{
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  font-family:var(--f-body);font-size:var(--text-sm);
  font-weight:var(--fw-semibold);color:#FFFFFF;
}
.ind-roi-icon{font-size:1.1rem;line-height:1;}
.ind-roi-modules{
  display:flex;gap:5px;margin-left:auto;flex-shrink:0;
}
.ind-roi-modules span{
  font-family:var(--f-mono);font-size:9px;font-weight:700;
  letter-spacing:0.08em;
  padding:2px 7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.90);
}

/* Per-industry header colours */
.ind-roi-healthcare{background:rgba(10,155,130,0.55);}
.ind-roi-lifesci   {background:rgba(59,130,246,0.55);}
.ind-roi-finance   {background:rgba(139,92,246,0.55);}
.ind-roi-retail    {background:rgba(245,158,11,0.55);}
.ind-roi-proserv   {background:rgba(8,145,178,0.55);}

/* Card body */
.ind-roi-body{padding:var(--s-4);}
.ind-roi-integrations{
  font-size:var(--text-xs);color:rgba(255,255,255,0.60);
  line-height:1.65;margin-bottom:var(--s-3);
}
.ind-roi-integrations strong{color:rgba(255,255,255,0.80);font-weight:var(--fw-semibold);}
.ind-roi-outcome{
  font-size:var(--text-xs);color:rgba(255,255,255,0.50);
  line-height:1.65;
  padding-top:var(--s-2);
  border-top:1px solid rgba(255,255,255,0.07);
}

@media(max-width:900px){
  .ind-roi-grid{grid-template-columns:repeat(2,1fr);}
  .ind-roi-card:nth-child(4),.ind-roi-card:nth-child(5){grid-column:span 1;}
  .ind-roi-card:nth-child(5){grid-column:1/3;max-width:50%;justify-self:center;}
}
@media(max-width:600px){
  .ind-roi-grid{grid-template-columns:1fr;}
  .ind-roi-card:nth-child(5){grid-column:span 1;max-width:100%;}
}

/* Keep old .ind-card/.ind-link for any other pages */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(var(--s-3),2.5vw,var(--s-4));}
.ind-card{padding:clamp(var(--s-5),3vw,var(--s-6)) clamp(var(--s-4),2.5vw,var(--s-5));border-radius:var(--r-lg);border:var(--b-faint);background:var(--white);position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.03);transition:all var(--dur-mid) var(--ease-out);}
.ind-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--red-bright));transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid) var(--ease-out);}
.ind-card:hover{border-color:var(--red-md);transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,0.07);}
.ind-card:hover::after{transform:scaleX(1);}
.ind-icon{font-size:1.75rem;margin-bottom:var(--s-3);line-height:1;}
.ind-card h4{margin-bottom:var(--s-2);}
.ind-card p{font-size:var(--text-sm);color:var(--ink-60);line-height:1.68;}
.ind-link{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--red);margin-top:var(--s-3);transition:gap var(--dur-fast);}
.ind-link:hover{gap:9px;}

/* ================================================================
   PROOF / TESTIMONIALS  — pure white, clean, let the cards breathe
   ================================================================ */
.proof-section{
  background:#FFFFFF;
  border-top:1px solid var(--bg-border);
  border-bottom:none;
  position:relative;
}
/* Subtle red shimmer line at the top edge */
.proof-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--red) 30%, var(--ai-teal) 70%, transparent 100%);
  opacity:0.35;
}
.metrics-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;background:var(--bg-border);border:var(--b-faint);border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--s-12);}
.met-item{background:var(--white);padding:clamp(var(--s-6),4vw,var(--s-8)) clamp(var(--s-4),3vw,var(--s-6));text-align:center;}
.met-n{font-family:var(--f-display);font-size:clamp(2rem,4vw,3rem);font-weight:var(--fw-extrabold);color:var(--red);line-height:1;letter-spacing:-0.04em;margin-bottom:var(--s-2);}
.met-l{font-size:var(--text-xs);color:var(--ink-40);text-transform:uppercase;letter-spacing:0.08em;font-family:var(--f-mono);}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(var(--s-4),3vw,var(--s-5));}
.testi-card{background:var(--white);border-radius:var(--r-xl);border:var(--b-faint);padding:clamp(var(--s-5),3vw,var(--s-6));box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:box-shadow var(--dur-mid),transform var(--dur-mid);}
.testi-card:hover{box-shadow:0 16px 40px rgba(0,0,0,0.08);transform:translateY(-3px);}
.testi-q{font-family:var(--f-serif);font-size:2.2rem;color:var(--red);line-height:1;margin-bottom:var(--s-3);opacity:0.35;}
.testi-text{font-size:var(--text-sm);line-height:1.82;color:var(--ink-60);font-style:italic;margin-bottom:var(--s-5);}
.testi-author{display:flex;align-items:center;gap:var(--s-3);}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--red-xs);border:var(--b-red);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:var(--text-xs);font-weight:var(--fw-extrabold);color:var(--red);flex-shrink:0;}
.testi-name{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--ink);line-height:1.2;}
.testi-role{font-size:var(--text-xs);color:var(--ink-20);font-family:var(--f-mono);letter-spacing:0.06em;margin-top:2px;text-transform:uppercase;}

/* ================================================================
   CTA SECTION — warm light, inviting, clearly distinct from dark footer
   ================================================================ */
.cta-section{
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(199,70,52,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 5%  80%,  rgba(199,70,52,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 95% 85%,  rgba(10,155,130,0.04) 0%, transparent 55%),
    linear-gradient(170deg, #FFFFFF 0%, #FDF5F3 55%, #FAF0EC 100%);
  text-align:center;position:relative;overflow:hidden;
  border-top:1px solid rgba(199,70,52,0.10);
  border-bottom:none;
}

/* Soft warm circles in background */
.cta-bg-circle{position:absolute;border-radius:50%;pointer-events:none;}
.cta-bg-c1{width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(199,70,52,0.05) 0%,transparent 65%);}
.cta-bg-c2{width:320px;height:320px;top:-80px;right:8%;border:1px solid rgba(199,70,52,0.08);}
.cta-bg-c3{width:220px;height:220px;bottom:-60px;left:6%;border:1px solid rgba(199,70,52,0.06);}

.cta-inner{position:relative;z-index:1;}

/* Dark text on light CTA */
.cta-section h2{color:var(--ink) !important;margin-bottom:var(--s-4);}
.cta-section p{color:var(--ink-60) !important;margin-bottom:var(--s-8);font-size:var(--text-lg);}

/* Trust trio row */
.cta-trust{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(var(--s-6),4vw,var(--s-10));
  flex-wrap:wrap;
  margin-bottom:var(--s-8);
}
.cta-trust-item{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-mono);font-size:var(--text-xs);
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-40);
}
.cta-trust-item::before{
  content:'✓';
  width:20px;height:20px;border-radius:50%;
  background:rgba(10,155,130,0.10);
  border:1px solid rgba(10,155,130,0.25);
  color:var(--ai-teal);
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.cta-actions{display:flex;align-items:center;justify-content:center;gap:var(--s-4);flex-wrap:wrap;}

/* Red primary button pops on light background */
.cta-section .btn-primary{
  background:var(--red);color:var(--white);border-color:var(--red);
  box-shadow:0 4px 20px rgba(199,70,52,0.22);
}
.cta-section .btn-primary:hover{
  background:var(--red-deep);border-color:var(--red-deep);
  transform:translateY(-2px);box-shadow:0 10px 32px rgba(199,70,52,0.32);
}
/* Outlined dark secondary */
.cta-section .btn-ghost-white{
  background:transparent;color:var(--ink-80);
  border-color:rgba(26,26,26,0.25);
}
.cta-section .btn-ghost-white:hover{
  background:var(--white);border-color:var(--ink-40);
  transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.08);
}
.cta-footnote{
  margin-top:var(--s-6);
  font-family:var(--f-mono);font-size:var(--text-xs);
  letter-spacing:0.10em;color:var(--ink-20);text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
  gap:var(--s-3);flex-wrap:wrap;
}
.cta-footnote-dot{color:var(--ink-10);}

/* ================================================================
   AI CHAT WIDGET
   ================================================================ */
.chat-widget{position:fixed;bottom:var(--s-6);right:var(--s-6);z-index:var(--z-toast);}
.chat-toggle-btn{width:58px;height:58px;border-radius:50%;background:var(--red);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(199,70,52,0.38);transition:transform var(--dur-fast),background var(--dur-fast);position:relative;z-index:2;}
.chat-toggle-btn:hover{background:var(--red-deep);transform:scale(1.08);}
.chat-pulse{position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(199,70,52,0.30);animation:chat-pulse 2.5s ease-out infinite;}
@keyframes chat-pulse{0%{transform:scale(1);opacity:0.8}100%{transform:scale(1.6);opacity:0}}
.chat-panel{position:absolute;bottom:72px;right:0;width:clamp(300px,90vw,380px);background:var(--white);border-radius:var(--r-xl);border:var(--b-faint);box-shadow:0 28px 72px rgba(0,0,0,0.13);overflow:hidden;opacity:0;visibility:hidden;transform:scale(0.92) translateY(12px);transform-origin:bottom right;transition:all var(--dur-mid) var(--ease-out);}
.chat-panel.open{opacity:1;visibility:visible;transform:scale(1) translateY(0);}
.chat-head{background:var(--red);padding:var(--s-4) var(--s-5);display:flex;align-items:center;justify-content:space-between;}
.chat-head-info{display:flex;align-items:center;gap:var(--s-3);}
.chat-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;}
.chat-name{font-size:var(--text-md);font-weight:var(--fw-bold);color:var(--white);}
.chat-status{font-size:var(--text-xs);color:rgba(255,255,255,0.65);display:flex;align-items:center;gap:4px;}
.chat-status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ai-teal);display:inline-block;}
.chat-close{color:rgba(255,255,255,0.6);font-size:1.4rem;line-height:1;cursor:pointer;transition:color var(--dur-fast);}
.chat-close:hover{color:var(--white);}
.chat-messages{height:280px;overflow-y:auto;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);scroll-behavior:smooth;}
.chat-msg{max-width:88%;font-size:var(--text-sm);line-height:1.62;border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);}
.chat-msg-bot{background:var(--bg-warm);color:var(--ink-80);border-bottom-left-radius:var(--r-xs);align-self:flex-start;}
.chat-msg-user{background:var(--red);color:var(--white);border-bottom-right-radius:var(--r-xs);align-self:flex-end;}
.chat-suggestions{padding:var(--s-2) var(--s-4) var(--s-3);display:flex;flex-wrap:wrap;gap:7px;border-top:var(--b-faint);}
.chat-sugg{font-size:var(--text-xs);font-family:var(--f-mono);letter-spacing:0.04em;color:var(--red);background:var(--red-xs);border:1px solid var(--red-sm);padding:5px 13px;border-radius:var(--r-pill);cursor:pointer;transition:all var(--dur-fast);}
.chat-sugg:hover{background:var(--red);color:var(--white);}
.chat-input-row{padding:var(--s-3) var(--s-4);border-top:var(--b-faint);display:flex;gap:var(--s-2);}
.chat-input{flex:1;border:var(--b-light);border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);font-size:var(--text-sm);color:var(--ink-80);outline:none;transition:border-color var(--dur-fast);}
.chat-input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-xs);}
.chat-send{width:36px;height:36px;border-radius:50%;background:var(--red);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-fast);}
.chat-send:hover{background:var(--red-deep);}

/* ================================================================
   PAGE HERO — light warm, inner pages (About, Services, etc.)
   ================================================================ */
.page-hero{
  /*
    Inner page banner — medium warm dark gradient.
    Starts at #7A4030 (visible warm brick, NOT black)
    fading to a deeper tone. Clearly dark but clearly warm.
    White text throughout — distinct from the light homepage hero.
  */
  background:
    radial-gradient(ellipse 88% 38% at 50% -5%, rgba(255,210,190,0.14) 0%, transparent 100%),
    radial-gradient(ellipse 58% 70% at 8% 58%, rgba(199,70,52,0.30) 0%, transparent 56%),
    radial-gradient(ellipse 35% 42% at 88% 22%, rgba(160,55,30,0.14) 0%, transparent 52%),
    linear-gradient(148deg, #7A4030 0%, #5E2E20 40%, #4A2218 75%, #3C1C14 100%);
  padding-top:calc(var(--nav-h) + clamp(2rem,4vw,3rem));
  padding-bottom:clamp(3rem,5vw,5rem);
  position:relative;overflow:hidden;
  border-bottom:none;
}
/* Subtle light grid on dark inner page banner */
.page-hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:56px 56px;
  z-index:0;
}
/* Right vertical gloss accent */
.page-hero-slash{
  position:absolute;top:0;bottom:0;right:18%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,0.12),transparent);
  transform:skewX(-6deg);
}
.page-hero-content{position:relative;z-index:1;}

/* Industry page — isometric stack graphic */
.ind-hero-geo{
  position:absolute;
  right:4%;top:50%;
  transform:translateY(-50%);
  width:min(420px,40vw);
  height:min(560px,54vw);
  z-index:1;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 78% 70% at 55% 48%, black 22%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 70% at 55% 48%, black 22%, transparent 76%);
  opacity:0.58;
}
@media(max-width:900px){.ind-hero-geo{display:none;}}

/* ── Page hero stat boxes (Case Studies, About, etc.) ────────
   Targets both custom .page-hero-stats/.page-hero-stat AND
   the reused .hero-proof-row/.hero-stat inside page-hero.
   Override the main-hero 4-column layout → 2×2 grid with cards. */
.page-hero-stats,
.page-hero .hero-proof-row{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:var(--s-3);
  border-top:none !important;
  padding-top:0 !important;
  margin-top:var(--s-5);
  align-content:start;
}
.page-hero-stat,
.page-hero .hero-stat{
  background:var(--white) !important;
  border:var(--b-faint) !important;
  border-radius:var(--r-lg) !important;
  padding:var(--s-4) var(--s-5) !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.06) !important;
  transition:box-shadow var(--dur-mid),transform var(--dur-mid);
}
.page-hero-stat:hover,
.page-hero .hero-stat:hover{
  box-shadow:0 8px 24px rgba(0,0,0,0.09) !important;
  transform:translateY(-3px);
}
.page-hero-stat .n,
.page-hero .hero-stat .n{
  display:block !important;
  font-family:var(--f-display) !important;
  font-size:clamp(1.8rem,3vw,2.4rem) !important;
  font-weight:var(--fw-extrabold) !important;
  color:var(--red) !important;
  line-height:1 !important;
  letter-spacing:-0.03em !important;
  margin-bottom:var(--s-2) !important;
}
.page-hero-stat .l,
.page-hero .hero-stat .l{
  display:block !important;
  font-family:var(--f-mono) !important;
  font-size:var(--text-xs) !important;
  color:var(--ink-40) !important;
  text-transform:uppercase !important;
  letter-spacing:0.10em !important;
}

/* ── Blank section gap fix ───────────────────────────────────
   Sections that render with no visible content (JS-dependent
   carousels, empty lists, unloaded blocks) create large white
   voids. Strip their padding and min-height so they collapse. */
section:empty{display:none !important;padding:0 !important;}
.section--empty{padding:0 !important;min-height:0 !important;}

/* Remove any min-height set on sections — the hero is the only
   section that intentionally uses 100svh */
section:not(.hero){min-height:0 !important;}

/* Tighten general section spacing on inner pages slightly */
.page-hero ~ section{
  padding-top:clamp(2rem,4.5vw,4rem);
  padding-bottom:clamp(2rem,4.5vw,4rem);
}
/* ── Text reset after dark page-hero ─────────────────────────
   Force dark text on ALL light content sections.
   Uses explicit values (not revert) for reliable cross-browser support. */

/* Headings */
.page-hero ~ section h1,
.page-hero ~ section h2,
.page-hero ~ section h3,
.page-hero ~ section h4,
.page-hero ~ section h5,
.page-hero ~ section h6{color:var(--ink) !important;}

/* Body & lead */
.page-hero ~ section p,
.page-hero ~ section .lead,
.page-hero ~ section .lead--light{color:var(--ink-60) !important;}

/* Eyebrow text + line — the main cause of "invisible red line" bug */
.page-hero ~ section .eyebrow,
.page-hero ~ section .eyebrow--muted,
.page-hero ~ * .eyebrow,
.page-hero ~ * .eyebrow--muted{
  color:var(--red) !important;
}
.page-hero ~ section .eyebrow::before,
.page-hero ~ section .eyebrow--muted::before,
.page-hero ~ * .eyebrow::before,
.page-hero ~ * .eyebrow--muted::before{
  background:var(--red) !important;
}

/* AI section — restore white text (dark brown background needs white) */
.ai-section h2,
.ai-section .sh-title{color:var(--white) !important;}
.ai-section .sh-lead,
.ai-section p{color:rgba(255,255,255,0.65) !important;}
.ai-section .eyebrow{color:var(--ai-teal) !important;}
.ai-section .eyebrow::before{background:var(--ai-teal) !important;}

/* CTA section — always dark text (light warm background) */
.cta-section h2,.cta-section .sh-title{color:var(--ink) !important;}
.cta-section p,.cta-section .lead{color:var(--ink-60) !important;}
.cta-section .eyebrow{color:var(--red) !important;}
.cta-section .eyebrow::before{background:var(--red) !important;}

/* Inner page hero — WHITE text (dark gradient background)
   Targets BOTH direct children of .page-hero AND those wrapped
   in .page-hero-content, covering all template variations.     */
.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero h4,
.page-hero h5,
.page-hero h6,
.page-hero .display-hero,
.page-hero .display-1,
.page-hero .display-2,
.page-hero .display-3,
.page-hero .page-hero-content h1,
.page-hero .page-hero-content h2,
.page-hero .page-hero-content h3,
.page-hero .page-hero-content h4,
.page-hero .page-hero-content .display-hero,
.page-hero .page-hero-content .display-1,
.page-hero .page-hero-content .display-2,
.page-hero .page-hero-content .display-3{color:var(--white) !important;}

.page-hero p,
.page-hero .lead,
.page-hero .lead--light,
.page-hero .hero-sub,
.page-hero .page-hero-content p,
.page-hero .page-hero-content .lead,
.page-hero .page-hero-content .lead--light,
.page-hero .page-hero-content .hero-sub{color:rgba(255,255,255,0.78) !important;}

.page-hero .eyebrow,
.page-hero .eyebrow--muted,
.page-hero .page-hero-content .eyebrow,
.page-hero .page-hero-content .eyebrow--muted{color:#FFB09A !important;}
.page-hero .eyebrow::before,
.page-hero .eyebrow--muted::before,
.page-hero .page-hero-content .eyebrow::before,
.page-hero .page-hero-content .eyebrow--muted::before{background:#FFB09A !important;}

/* Secondary/outline buttons in dark page-hero → white ghost */
.page-hero .btn-outline-dark,
.page-hero .btn-outline{
  color:var(--white) !important;
  border-color:rgba(255,255,255,0.55) !important;
  background:transparent !important;
}
.page-hero .btn-outline-dark:hover,
.page-hero .btn-outline:hover{
  background:rgba(255,255,255,0.14) !important;
  border-color:rgba(255,255,255,0.88) !important;
}

/* ================================================================
   CASE STUDIES — DARK TEXT RESET (must be AFTER page-hero rules)
   #cases sits inside .page-hero in the template. By placing these
   rules after the page-hero white-text block, higher ID specificity
   (101) beats class specificity (011) even with matching !important.
   ================================================================ */
#cases,
#cases h1, #cases h2, #cases h3, #cases h4,
#cases p, #cases span, #cases li, #cases a:not(.btn),
#cases button, #cases label, #cases div {
  color: var(--ink-60) !important;
}
#cases h1, #cases h2, #cases h3 {
  color: var(--ink) !important;
}
#cases .eyebrow, #cases .eyebrow--muted {
  color: var(--red) !important;
}
#cases .eyebrow::before, #cases .eyebrow--muted::before {
  background: var(--red) !important;
}
#cases .pill, #cases .pill-module, #cases [class*="tag"] {
  background: var(--bg-muted) !important;
  color: var(--ink-40) !important;
  border-color: var(--bg-border) !important;
}

.breadcrumb{display:flex;align-items:center;gap:var(--s-2);font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.08em;color:rgba(255,255,255,0.45);margin-bottom:var(--s-5);flex-wrap:wrap;}
.breadcrumb a{color:rgba(255,255,255,0.65);transition:color var(--dur-fast);}
.breadcrumb a:hover{color:var(--white);}
.breadcrumb span.sep{color:rgba(255,255,255,0.25);}
.breadcrumb span.current{color:#FFB09A;}
/* Breadcrumb slash separator "/" */
.breadcrumb .sep, .breadcrumb > span:not(.current){color:rgba(255,255,255,0.30);}

/* ================================================================
   ORACLE CLOUD MODULE CARDS — shared across all 6 product pages
   ================================================================ */

/* Section: light gradient using product colour via CSS custom property */
.oracle-mod-section{
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%, color-mix(in srgb, var(--mod-color,#C74634) 8%, transparent) 0%, transparent 65%),
    linear-gradient(170deg, var(--bg-page) 0%, var(--bg-warm) 100%);
  position:relative;
}
/* Subtle top accent line in product colour */
.oracle-mod-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--mod-color,#C74634) 30%, var(--mod-color,#C74634) 70%, transparent);
  opacity:0.25;
}

/* Card */
.oracle-mod-card{
  background:var(--white);
  border:1px solid var(--bg-border);
  border-left:3px solid var(--mod-color,#C74634);
  border-radius:var(--r-xl);
  padding:clamp(var(--s-4),2.5vw,var(--s-5));
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid),border-color var(--dur-mid);
}
.oracle-mod-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,0.09);
}

/* Icon badge */
.oracle-mod-badge{
  width:36px;height:36px;
  border-radius:var(--r-md);
  border:1px solid;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.oracle-mod-badge .ti{font-size:17px;}

/* Text */
.oracle-mod-body{flex:1;}
.oracle-mod-title{
  font-size:var(--text-md);
  font-weight:var(--fw-semibold);
  color:var(--ink-80);
  margin-bottom:var(--s-1);
  line-height:1.3;
}
.oracle-mod-desc{
  font-size:var(--text-sm);
  color:var(--ink-40);
  line-height:1.68;
  margin:0;
}

/* ================================================================
   ADVISORY SERVICE AREAS
   ================================================================ */
.adv-svc-section{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(199,70,52,0.05) 0%, transparent 60%),
    linear-gradient(170deg, var(--bg-warm) 0%, #F0EBE3 100%);
}
.adv-svc-card{
  background:var(--white);
  border:1px solid var(--bg-border);
  border-radius:var(--r-xl);
  padding:clamp(var(--s-5),3vw,var(--s-6));
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid);
}
.adv-svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.09);}
.adv-svc-bar{
  height:3px;border-radius:2px;
  margin-bottom:var(--s-4);
  width:40px;                   /* short accent bar, not full width */
  transition:width var(--dur-mid) var(--ease-out);
}
.adv-svc-card:hover .adv-svc-bar{width:100%;}
.adv-svc-title{
  font-size:var(--head-sm);font-weight:var(--fw-semibold);
  margin-bottom:var(--s-3);line-height:1.25;
}
.adv-svc-desc{
  font-size:var(--text-sm);color:var(--ink-60);line-height:1.75;
}

/* ================================================================
   CAREERS PAGE
   ================================================================ */

/* Hero geometric graphic */
.careers-geo{
  position:absolute;
  right:2%;top:50%;
  transform:translateY(-50%);
  width:min(540px,48vw);
  height:min(380px,34vw);
  z-index:1;pointer-events:none;
  opacity:0.80;
}
@media(max-width:900px){.careers-geo{display:none;}}

/* Open role cards */
.careers-role-card{
  background:var(--white);
  border:1px solid var(--bg-border);
  border-radius:var(--r-xl);
  padding:clamp(var(--s-5),3vw,var(--s-6));
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid),border-color var(--dur-mid);
  border-left:3px solid var(--red);
}
.careers-role-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,0.09);border-color:var(--red-md);}

.careers-role-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-4);margin-bottom:var(--s-3);
}
.careers-role-title{
  font-size:var(--head-sm);font-weight:var(--fw-semibold);
  color:var(--ink);margin-bottom:var(--s-2);line-height:1.25;
}
.careers-role-meta{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;}
.careers-role-level{
  font-family:var(--f-mono);font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--red);background:var(--red-xs);border:1px solid var(--red-sm);
  padding:3px 10px;border-radius:var(--r-pill);
}
.careers-role-loc{
  font-family:var(--f-mono);font-size:var(--text-xs);
  color:var(--ink-40);letter-spacing:0.04em;
}
.careers-role-desc{font-size:var(--text-sm);color:var(--ink-60);line-height:1.75;}

/* Form */
.careers-form .form-field{margin-bottom:var(--s-4);}

/* ================================================================
   CONTACT FORM
   ================================================================ */
.contact-form-card{background:var(--white);border-radius:var(--r-2xl);padding:clamp(var(--s-6),5vw,var(--s-10));border:var(--b-faint);box-shadow:0 4px 32px rgba(0,0,0,0.05);}
.form-field-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s-4);margin-bottom:var(--s-4);}
.form-field{display:flex;flex-direction:column;gap:var(--s-2);}
.form-field.full{grid-column:1/-1;}
label{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--ink-60);}
input[type="text"],input[type="email"],input[type="tel"],select,textarea{border:var(--b-light);border-radius:var(--r-md);padding:0.8rem var(--s-4);font-size:var(--text-md);color:var(--ink-80);background:var(--white);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);outline:none;width:100%;appearance:none;-webkit-appearance:none;}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-xs);}
textarea{resize:vertical;min-height:140px;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6A6A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;cursor:pointer;}
.form-status{display:none;padding:var(--s-4);border-radius:var(--r-md);font-size:var(--text-sm);font-weight:var(--fw-medium);margin-top:var(--s-4);}
.form-status.success{background:rgba(22,163,74,0.07);color:#15803d;border:1px solid rgba(22,163,74,0.18);}
.form-status.error{background:var(--red-xs);color:var(--red-deep);border:var(--b-red);}

/* ================================================================
   FOOTER — warm medium-dark coffee brown
   Clearly dark, clearly WARM — not black.
   Completely distinct from the red CTA section above it.
   ================================================================ */
.site-footer{
  background:var(--dark-2);   /* #5E3828 — medium warm brown, clearly lighter than red CTA */
  color:rgba(255,255,255,0.72);
  padding:0;
  border-top:none;  /* Light CTA → dark footer: color contrast is separator enough */
}

/* Footer brand bar — deeper accent */
.footer-brand-bar{
  background:var(--dark-3);   /* #2E1810 — slightly deeper */
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:var(--s-6) 0;
}
.footer-brand-bar-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-4);}

/* Logo in footer — dark background needs white-friendly version.
   OPTION A (best): use a separate logo file with white/light colors
   in the footer PHP template, then remove the filter below.
   OPTION B (fallback): full white inversion — M mark loses its red
   but logo stays readable. */
.footer-logo-img{
  height:clamp(56px,7vw,80px);width:auto;
  filter:brightness(0) invert(1);
  opacity:0.92;
}

/* White logo version — no filter needed */
.footer-logo-img-light{
  height:clamp(32px,4vw,44px);width:auto;
  filter:none !important;
  opacity:1;
  display:block;
}
.footer-tagline{font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.32);}
.footer-oracle-badge{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.10em;text-transform:uppercase;color:rgba(255,255,255,0.35);border:1px solid rgba(255,255,255,0.12);padding:5px 14px;border-radius:var(--r-pill);}
.footer-oracle-badge em{color:#FF7059;font-style:normal;}

/* Footer main columns — extra top padding creates breathing room from section above */
.footer-main{padding:clamp(3.5rem,6vw,6rem) 0 clamp(2rem,3vw,3rem);}

/*
  The footer PHP structure is: site-footer → container → footer-top
  (no .footer-main wrapper div exists in the PHP).
  So we target .site-footer > .container directly for padding.
*/
.site-footer > .container{
  padding-top:clamp(1.5rem,3vw,2.5rem);
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}

/* footer-top columns — add top gap so column headings aren't flush to footer edge */
.footer-top{
  padding-top:var(--s-3);
}

/* Override the inline margin-bottom on the <a> wrapping the footer logo.
   footer.php sets style="margin-bottom:var(--s-4)" — reduce it here. */
.footer-brand > a{
  margin-bottom:var(--s-2) !important;
  display:inline-block;
}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:clamp(var(--s-8),4vw,var(--s-12));margin-bottom:var(--s-10);}
.footer-brand p{font-size:var(--text-sm);color:rgba(255,255,255,0.45);line-height:1.80;margin:var(--s-4) 0 var(--s-5);max-width:280px;}
.footer-contacts{display:flex;flex-direction:column;gap:var(--s-3);}
.footer-contact-item{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--text-sm);color:rgba(255,255,255,0.48);transition:color var(--dur-fast);line-height:1.5;}
.footer-contact-item:hover{color:rgba(255,255,255,0.88);}
.footer-location{margin-top:var(--s-4);}
.footer-location-label{font-family:var(--f-mono);font-size:var(--text-2xs);letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:var(--s-2);display:flex;align-items:center;gap:var(--s-1);}
.footer-location-addr{font-size:var(--text-sm);color:rgba(255,255,255,0.42);line-height:1.65;}
.footer-social{display:flex;gap:var(--s-2);margin-top:var(--s-5);}
.footer-social-link{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast);}
.footer-social-link:hover{background:var(--red);border-color:var(--red);}
.footer-col h6{font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.30);margin-bottom:var(--s-5);}
.footer-nav{display:flex;flex-direction:column;gap:var(--s-3);}
.footer-nav a{font-size:var(--text-sm);color:rgba(255,255,255,0.52);transition:color var(--dur-fast),padding-left var(--dur-fast);display:inline-block;}
.footer-nav a:hover{color:rgba(255,255,255,0.90);padding-left:var(--s-1);}
.footer-bottom{padding:var(--s-5) 0;border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-3);}
.footer-copy{font-size:var(--text-xs);color:rgba(255,255,255,0.25);font-family:var(--f-mono);}
.footer-legal-links{display:flex;gap:var(--s-5);flex-wrap:wrap;}
.footer-legal-links a{font-size:var(--text-xs);color:rgba(255,255,255,0.25);font-family:var(--f-mono);transition:color var(--dur-fast);}
.footer-legal-links a:hover{color:rgba(255,255,255,0.68);}

/* ================================================================
   UTILITIES
   ================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.skip-link{position:absolute;top:-100px;left:var(--s-4);z-index:9999;padding:var(--s-3) var(--s-5);background:var(--red);color:var(--white);border-radius:var(--r-md);font-weight:var(--fw-semibold);font-size:var(--text-sm);transition:top var(--dur-fast);}
.skip-link:focus{top:var(--s-4);}
.sr{opacity:0;transform:translateY(20px);transition:opacity var(--dur-xslow) var(--ease-out),transform var(--dur-xslow) var(--ease-out);}
.sr.in{opacity:1;transform:translateY(0);}
.sr-d1{transition-delay:80ms}.sr-d2{transition-delay:160ms}.sr-d3{transition-delay:240ms}
.sr-d4{transition-delay:320ms}.sr-d5{transition-delay:400ms}

/* ================================================================
   CASE STUDIES FILTER TABS — cs-tab color fix
   The .cs-tab class has color:rgba(255,255,255,0.45) hardcoded,
   making tabs invisible on the light cream background.
   ================================================================ */
.cs-tab{
  color:var(--ink-40) !important;
  border-bottom-color:transparent !important;
}
.cs-tab:hover{
  color:var(--ink) !important;
  border-bottom-color:var(--red-sm) !important;
}
.cs-tab.active,
.cs-tab[aria-selected="true"],
.cs-tab.is-active{
  color:var(--red) !important;
  border-bottom-color:var(--red) !important;
}

/* ================================================================
   CASE STUDIES FILTER BAR — sticky background fix
   Without a background, scrolling cards bleed through the tab bar.
   Targets all common wrapper class names for the .cs-tab container.
   ================================================================ */
.cs-tabs-bar,
.cs-tabs,
.cs-filter-bar,
.cs-filter,
.cs-filter-wrap,
.case-filter-bar{
  background:var(--bg-page) !important;
  position:sticky !important;
  top:var(--nav-h) !important;
  z-index:100 !important;
  border-bottom:1px solid var(--bg-border);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width:1100px){
  .footer-top{grid-template-columns:1fr 1fr 1fr;}
  .process-row{grid-template-columns:repeat(3,1fr);}
  .process-connector{display:none;}
  .hero-circles{display:none;}
  .hero-content{max-width:100%;}
  .col-7-5,.col-5-7{grid-template-columns:1fr;}
  .ind-section-header{grid-template-columns:1fr;gap:var(--s-8);}
  .ind-section-stat-col{flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,0.10);padding-left:0;padding-top:var(--s-5);}
}
/* Tablet: 2 columns — 3 per row → 2 per row */
@media (max-width:900px){
  .ind-grid-v2{grid-template-columns:repeat(4,1fr);}
  .ind-card-v2{grid-column:span 2;}
  .ind-card-v2:nth-child(4){grid-column:span 2;}
  .ind-card-v2:nth-child(5){grid-column:span 2;}
}
@media (max-width:700px){
  .ind-grid-v2{grid-template-columns:1fr;}
  .ind-card-v2,.ind-card-v2:nth-child(4),.ind-card-v2:nth-child(5){grid-column:span 1;}
  .ind-section-stat-col{flex-wrap:wrap;gap:var(--s-4);}
}
@media (max-width:1100px){
  .ai-feature-grid{grid-template-columns:repeat(4,1fr);}
  .aif{grid-column:span 2;}
  .aif:nth-child(4){grid-column:span 2;}
  .aif:nth-child(5){grid-column:span 2;}
}
@media (max-width:900px){
  .nav-primary,.nav-badge{display:none;}
  .nav-mobile-toggle{display:flex;}
  .col-6-6{grid-template-columns:1fr;}
  .adv-panel{display:none;}
  .ai-feature-grid{grid-template-columns:repeat(2,1fr);}
  .aif:nth-child(3),.aif:nth-child(4),.aif:nth-child(5){border-top:1px solid rgba(255,255,255,0.07);}
  .aif:nth-child(3),.aif:nth-child(5){border-left:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand-bar-inner{flex-direction:column;align-items:flex-start;gap:var(--s-3);}
}
@media (max-width:640px){
  .ai-feature-grid{grid-template-columns:1fr;}
  .aif+.aif{border-left:none;border-top:1px solid rgba(255,255,255,0.07);}
  .aif::before{left:0;right:0;}
  .footer-top{grid-template-columns:1fr;gap:var(--s-8);}
  .process-row{grid-template-columns:1fr 1fr;}
  .process-connector{display:none;}
  .contact-form-card{padding:var(--s-6);}
}
@media (max-width:480px){
  :root{--nav-h:68px;--nav-h-scrolled:56px;}
  .hero-cta-row,.cta-actions{flex-direction:column;align-items:stretch;}
  .hero-cta-row .btn,.cta-actions .btn{justify-content:center;}
  .hero-proof-row{grid-template-columns:1fr 1fr;}
  .process-row{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}
@media (hover:none){
  .btn{min-height:44px;}
  .nav-link{min-height:44px;}
  .drawer-link{min-height:48px;display:flex;align-items:center;}
  .chat-sugg{min-height:36px;}
}