/* ===========================================================
   REAXIV TECHNOLOGIES — Core Stylesheet
   Palette sampled directly from brand mark:
   gold highlight #EFBF50, gold mid #CC9633, gold deep #A36C10,
   ink #141414, paper #FDFDFC
   =========================================================== */

:root{
  /* Fallback header height (JS overrides this with the real measured
     value on load — see main.js). Used so the hero can subtract the
     sticky header's height and fill exactly the remaining viewport. */
  --header-h:84px;

  /* Brand gold ramp */
  --gold-100:#F9EBC7;
  --gold-200:#F0D488;
  --gold-300:#EFBF50;
  --gold-400:#DDA83A;
  --gold-500:#CC9633;
  --gold-600:#B07F22;
  --gold-700:#A36C10;
  --gold-gradient: linear-gradient(115deg, #F5D585 0%, #DDA83A 32%, #C48A1F 66%, #A36C10 100%);
  --gold-gradient-soft: linear-gradient(115deg, rgba(245,213,133,.92) 0%, rgba(221,168,58,.92) 32%, rgba(196,138,31,.92) 66%, rgba(163,108,16,.92) 100%);

  /* Ink / neutrals */
  --ink:#141414;
  --ink-2:#0B0B0C;
  --ink-soft:#2A2A28;
  --paper:#FDFDFC;
  --paper-warm:#FAF6EC;
  --paper-deep:#F3EEDF;
  --line:#E7E1CF;
  --line-strong:#D8CFB3;
  --gray-600:#5C574C;
  --gray-500:#797365;
  --gray-400:#9C9686;

  /* Type — Open Sans is the single typeface used across the site */
  --font-display:'Open Sans', 'Segoe UI', sans-serif;
  --font-body:'Open Sans', 'Segoe UI', sans-serif;
  --font-mono:'Open Sans', 'Segoe UI', sans-serif;

  /* Layout */
  --container:1240px;
  --radius-sm:4px;
  --radius-md:10px;
  --radius-lg:20px;
  --fold:22px; /* signature clipped-corner size */
  --fold-lg:34px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* Elevation */
  --shadow-sm:0 2px 10px -4px rgba(20,20,20,.12);
  --shadow-md:0 16px 40px -16px rgba(20,20,20,.22);
  --shadow-lg:0 30px 70px -24px rgba(20,20,20,.35);
  --shadow-gold:0 20px 46px -18px rgba(163,108,16,.45);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

html{
  overflow-x:hidden;
  overscroll-behavior-x:none;
  /* Root cause of the horizontal "shake" on page navigation: without this,
     the vertical scrollbar only appears once a page's content exceeds the
     viewport height. Pages differ in length (Home/About have many more
     sections than Our Work/Contact), and even the same page is briefly
     shorter than its final height while hero images are still decoding.
     Each time the scrollbar appears or disappears, the browser's usable
     viewport width changes by the scrollbar's width (~15-17px), and every
     centered, margin:0 auto element (the nav, .container, etc.) shifts
     sideways by half that amount. Reserving the scrollbar's space
     permanently — whether or not it's actually needed on a given page —
     removes that variable entirely, so nothing can ever shift because of
     it, on any page, at any point during load. */
  scrollbar-gutter:stable;
}
body{
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--paper);
  line-height:1.7;
  font-size:16px;
  font-weight:400;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font-family:inherit;font-size:1rem;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-0.01em;
}
h1,h2{font-weight:700;}
h1{font-size:clamp(1.75rem,4.6vw,4rem);line-height:1.15;}
h2{font-size:clamp(1.4rem,3.2vw,2.75rem);line-height:1.2;}
h3,h4{font-weight:600;letter-spacing:-0.005em;}
h3{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.32;}
h4{font-size:1.05rem;line-height:1.4;}
p,h1,h2,h3,h4,span,a,label,dt,dd{overflow-wrap:break-word;word-break:break-word;}
p{color:var(--gray-600);line-height:1.75;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(14px, 4vw, 32px);
}

section{padding:112px 0;}
.section-tight{padding:72px 0;}

/* Anchor-link scroll offset — footer/nav links such as
   services.html#digital-marketing or #ukg-boomi-integration jump to an
   id'd section. Without this, the browser scrolls that section flush to
   the top of the viewport, and the sticky header (which sits on top of
   everything else on the page) covers the heading it was supposed to
   reveal. :where() keeps this at zero specificity so it never overrides
   a more specific rule elsewhere. */
:where([id]){scroll-margin-top:104px;}
@media (max-width:480px){
  :where([id]){scroll-margin-top:82px;}
}

:focus-visible{
  outline:2px solid var(--gold-600);
  outline-offset:3px;
}

/* ---------- Eyebrow / label ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-700);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--gold-500);
  display:inline-block;
}
.eyebrow-light{color:var(--gold-200);}
.eyebrow-light::before{background:var(--gold-200);}
.eyebrow-num{
  color:var(--ink);
  background:var(--gold-gradient);
  font-weight:700;
  padding:2px 7px;
  clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
.eyebrow-light .eyebrow-num{color:var(--ink);}

/* ---------- Signature fold shape ---------- */
.fold{
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
.fold-alt{
  clip-path: polygon(var(--fold) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fold));
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .35s, color .35s, border-color .35s;
  white-space:nowrap;
  position:relative;
  will-change:transform;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.btn-primary:hover{
  background:var(--gold-600);
  color:var(--ink);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.btn-gold{
  background:var(--gold-gradient);
  background-size:160% 160%;
  color:var(--ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-gold);
  background-position:100% 0;
}
.btn-outline{
  border:1px solid var(--line-strong);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);transform:translateY(-3px);}
.btn-outline-light{
  border:1px solid rgba(253,253,252,.4);
  color:var(--paper);
}
.btn-outline-light:hover{background:rgba(253,253,252,.12);border-color:var(--paper);transform:translateY(-3px);}
.btn-sm{padding:11px 22px;font-size:0.85rem;}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline-offset:4px;}
@media (prefers-reduced-motion: reduce){
  .btn:hover{transform:none;}
}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  box-shadow:0 12px 30px -22px rgba(20,20,20,.5);
}
.site-header.menu-open{
  background:var(--paper);
}
.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* Padding is intentionally fixed (not scroll-dependent). Animating a
     layout property like padding/height on a position:sticky element
     forces the browser to reflow every element below it on every
     transition frame, which is what produced the page-wide
     shaking/flickering (most visible on the About page, since its
     full-bleed hero sits directly under the header). The "compact on
     scroll" feel is now done with transform (see .brand img below),
     which is compositor-only and never reflows the page.

     Horizontal padding is symmetric and uses the same fluid gutter and
     --container width as .container, so the nav's left/right edges are
     always centered and line up exactly with the page content below it,
     on every page and at every viewport width.

     .brand sits at the start and .nav-cta at the end via
     justify-content:space-between. .nav-links is taken out of this flow
     entirely (position:absolute, centered with left:50% + translateX
     on .nav, which is the positioning context) so its position is the
     true midpoint of the bar, independent of the logo's or the CTA
     button's own width — this avoids the nav links shifting between
     pages whenever CTA text length differs, without needing a grid
     track (which has cross-browser quirks when combined with
     absolutely/fixed-positioned items, such as the off-canvas mobile
     drawer below). */
  padding:20px clamp(20px, 4vw, 32px);
  max-width:var(--container);
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  /* .nav-links (the off-canvas drawer) is a fixed sibling inside this
     same header and has z-index:210 so it can slide in over the page.
     Without an explicit stacking order here, the brand mark has no
     z-index of its own, so the drawer painted over it whenever the menu
     opened - clipping the wordmark mid-word at the drawer's left edge.
     Matching the toggle button's z-index keeps the logo fully visible,
     in front of the open drawer, at every width. */
  position:relative;
  z-index:220;
}
.brand img{
  height:36px;
  width:auto;
  transform-origin:left center;
  transition:transform .3s var(--ease);
}
.site-header.is-scrolled .brand img{transform:scale(0.833);}
.brand-word{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:var(--ink);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.brand-word span{color:var(--gold-600);}

.nav-links{
  display:flex;
  align-items:center;
  gap:36px;
  /* Absolute + translate centers this on the true midpoint of the nav
     bar, regardless of how the logo and CTA button's widths compare to
     each other. (grid justify-self:center would only centre this
     correctly if the two flanking 1fr tracks happened to have equal
     min-content width, which they don't once the CTA button's label
     is wider than the logo — see the .nav comment above.) */
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.nav-links a{
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  position:relative;
  padding:6px 0;
  white-space:nowrap;
  transition:color .25s;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:2px;
  background:var(--gold-500);
  transition:width .3s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-700);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%;}

.nav-cta{display:flex;align-items:center;gap:24px;}

/* CTA button — scoped to the navbar only: rounded, bordered "pill"
   sizing/shape to match the reference layout while keeping the
   site's own brand color (gold) instead of the reference's orange. */
.nav-cta .btn-primary{
  background:transparent;
  color:var(--gold-700);
  border:1.5px solid var(--gold-600);
  border-radius:8px;
  clip-path:none;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.nav-cta .btn-primary:hover{
  background:var(--gold-600);
  color:var(--paper);
  border-color:var(--gold-600);
}
.nav-cta .btn-sm{padding:12px 26px;font-size:0.8rem;}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:26px;
  z-index:220;
}
.nav-toggle span{
  height:2px;width:100%;
  background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s;
}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (min-width:961px) and (max-width:1150px){
  .nav-links{gap:20px;}
  .nav-links a{font-size:0.92rem;}
  .nav-cta .btn-sm{padding:10px 18px;font-size:0.76rem;}
}
@media (max-width:960px){
  .nav-links{
    position:fixed;
    top:0;
    bottom:0;
    left:auto;
    right:0;
    width:min(340px, 88vw);
    background:var(--paper);
    z-index:210;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:40px clamp(20px, 5vw, 36px);
    gap:24px;
    transform:translateX(100%);
    transition:transform .45s var(--ease), visibility .45s;
    border-left:1px solid var(--line);
    box-shadow:-12px 0 35px rgba(20,20,20,.16);
    visibility:hidden;
    pointer-events:none;
  }
  .nav-links.open{transform:translateX(0);visibility:visible;pointer-events:auto;}
  .nav-links a{font-size:1.3rem;display:block;width:100%;padding:6px 0;}
  .nav-cta .btn-sm{display:none;}
  .nav-toggle{display:flex;}
}

/* ===========================================================
   HERO v3 — full-screen cinematic video hero (enterprise)
   =========================================================== */
.hero{
  position:relative;
  height:calc(100vh - var(--header-h));
  height:calc(100svh - var(--header-h));
  min-height:clamp(480px, 75vh, 750px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink-2);
  isolation:isolate;
}

/* ---- background video + overlays ---- */
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-kenburns{
  position:absolute;
  inset:-3%;
  background-size:cover;
  background-position:40% center;
  animation:heroKenBurns 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKenBurns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.1) translate(-1.5%,-1%);}
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 50% 46%, rgba(6,8,10,.4) 0%, rgba(6,8,10,.2) 55%, rgba(6,8,10,0) 100%),
    linear-gradient(180deg, rgba(6,8,10,.3) 0%, rgba(6,8,10,0) 22%, rgba(6,8,10,0) 78%, rgba(6,8,10,.4) 100%);
}
.hero-grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(253,253,252,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(253,253,252,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 90%);
  opacity:.5;
}

/* ---- content ---- */
.hero-cinematic{position:relative;z-index:2;width:100%;padding:0;}
.hero-cinematic-inner{max-width:720px;}

.hero-cinematic-centered{display:flex;justify-content:center;text-align:center;}
.hero-cinematic-centered .hero-cinematic-inner{max-width:900px;display:flex;flex-direction:column;align-items:center;}
.hero-cinematic-centered .hero-cinematic-lead{margin-left:auto;margin-right:auto;}
.hero-cinematic-centered .hero-cinematic-actions{justify-content:center;}

.hero-logo-mark{margin-bottom:32px;}
.hero-logo-mark img{height:52px;width:auto;filter:drop-shadow(0 4px 20px rgba(0,0,0,.35));}

.hero-cinematic-headline{
  color:var(--paper);
  font-weight:700;
  font-size:clamp(2.2rem,4.2vw,3.6rem);
  line-height:1.15;
  letter-spacing:-0.015em;
  margin-bottom:0;
  text-shadow:0 4px 26px rgba(0,0,0,.4);
}
.hero-cinematic-headline em{
  font-style:normal;
  background:var(--gold-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero-cinematic-lead{
  color:rgba(253,253,252,.9);
  font-size:1.16rem;
  line-height:1.7;
  max-width:600px;
  margin-bottom:40px;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}

.hero-cinematic-actions{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:34px;}

.hero-trust-line{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:rgba(253,253,252,.68);
}
.hero-trust-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold-300);
  box-shadow:0 0 0 4px rgba(239,191,80,.18);
  flex-shrink:0;
}

/* ---- entrance animation (independent of scroll-reveal system) ---- */
.hero-fade{
  opacity:0;
  transform:translateY(22px);
  animation:heroFadeUp .9s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
@keyframes heroFadeUp{
  to{opacity:1;transform:translateY(0);}
}

.hero-scroll-cue{
  position:absolute;
  bottom:36px;left:32px;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid rgba(253,253,252,.55);
  border-radius:50%;
  color:rgba(253,253,252,.9);
  opacity:0;
  animation:heroFadeUp .9s var(--ease) .75s forwards, scrollBounce 2.2s ease-in-out 1.6s infinite;
}
.hero-scroll-cue span{display:none;}
.hero-scroll-cue svg{width:18px;height:18px;}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}
@media (max-width:960px){
  .hero{height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));}
  .hero-scroll-cue{display:none;}
  .hero-cinematic{padding:130px 0 60px;}
}
@media (max-width:640px){
  .hero-logo-mark img{height:42px;}
  .hero-cinematic-headline{font-size:clamp(1.9rem,8vw,2.4rem);}
  .hero-cinematic-lead{font-size:1.05rem;}
  .hero-cinematic-actions .btn{width:100%;justify-content:center;}
  .hero-kenburns{background-position:70% center;}
  .hero-cinematic{padding:120px 0 50px;}
}
@media (max-width:400px){
  .hero-cinematic{padding:110px 0 40px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-fade{opacity:1;transform:none;animation:none;}
  .hero-scroll-cue{opacity:.85;animation:none;}
  .hero-scroll-cue span.line::after{animation:none;}
  .hero-kenburns{animation:none;inset:0;}
  .hero-media{background:var(--ink-2) url('https://images.unsplash.com/photo-1587702068694-a909ef4aa346?auto=format&fit=crop&w=2400&q=80') 40% center/cover;}
}
@media (prefers-reduced-motion: reduce) and (max-width:640px){
  .hero-media{background-position:70% center;}
}

.services-hero h1,
.work-hero h1,
.contact-hero h1{
  font-size:clamp(2.3rem,4.4vw,3.4rem);
}

/* ---------- Services / Our Work / Contact hero (image banner, matches About) ---------- */
.services-hero,
.work-hero,
.contact-hero{
  position:relative;
  min-height:78vh;
  min-height:78svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink-2);
  isolation:isolate;
}
.services-hero-media,
.work-hero-media,
.contact-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.services-hero-media img,
.work-hero-media img,
.contact-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.services-hero-overlay,
.work-hero-overlay,
.contact-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(6,8,10,.5) 0%, rgba(6,8,10,.48) 55%, rgba(6,8,10,.5) 100%);
}
.services-hero .container,
.work-hero .container,
.contact-hero .container{
  position:relative;
  z-index:2;
}
.services-hero h1,
.work-hero h1,
.contact-hero h1{
  color:var(--paper);
  text-shadow:0 4px 30px rgba(0,0,0,.45);
}
.services-hero-subtitle,
.work-hero-subtitle,
.contact-hero-subtitle{
  color:rgba(253,253,252,.92);
  font-size:1.1rem;
  line-height:1.75;
  max-width:600px;
  margin-top:20px;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
@media (max-width:960px){
  .services-hero,.work-hero,.contact-hero{min-height:70vh;min-height:70svh;}
}
@media (max-width:640px){
  .services-hero,.work-hero,.contact-hero{min-height:64vh;min-height:64svh;}
}

.page-hero{
  padding:70px 0 64px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(var(--paper-warm), var(--paper-warm));
  position:relative;
  overflow:hidden;
}
.page-hero .container{position:relative;z-index:2;}
.page-hero h1{max-width:760px;font-weight:800;letter-spacing:-0.015em;line-height:1.15;}
.page-hero p{max-width:620px;margin-top:18px;font-size:1.08rem;line-height:1.7;}
.page-hero-corner{
  position:absolute;
  top:-40px;right:-40px;
  width:340px;height:340px;
  background:var(--gold-gradient);
  clip-path:polygon(30% 0,100% 0,100% 70%,70% 100%,0 100%,0 30%);
  opacity:.14;
}

/* ---------- About page hero (elevated variant) ---------- */
.about-hero{padding:96px 0 76px;}
.about-hero .eyebrow{margin-bottom:22px;}
.about-hero h1{max-width:820px;font-size:clamp(2.3rem,4.4vw,3.4rem);}
.about-hero-lead{max-width:640px;margin-top:22px;font-size:1.1rem;line-height:1.75;}
.page-hero-trust{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 16px;
  margin-top:32px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.page-hero-trust-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.76rem;
  letter-spacing:0.05em;
  color:var(--gray-600);
  white-space:nowrap;
}
.page-hero-trust-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold-500);
  box-shadow:0 0 0 4px rgba(204,150,51,.16);
  flex-shrink:0;
}
.page-hero-trust-sep{
  width:1px;height:14px;
  background:var(--line-strong);
  flex-shrink:0;
}
@media (max-width:640px){
  .about-hero{padding:80px 0 56px;}
  .page-hero-trust{gap:10px 0;}
  .page-hero-trust-item{width:100%;}
  .page-hero-trust-sep{display:none;}
}

/* ===========================================================
   SECTIONS shared
   =========================================================== */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.section-head p{max-width:460px;}
.bg-warm{background:var(--paper-warm);}
.bg-ink{background:var(--ink);color:var(--paper);}
.bg-ink h2,.bg-ink h3{color:var(--paper);}
.bg-ink p{color:#C9C4B4;}

/* ===========================================================
   CREDIBILITY — confidence statement immediately after Hero
   =========================================================== */
.credibility{
  padding:88px 0 84px;
  border-bottom:1px solid var(--line);
}
.credibility-intro{
  max-width:760px;
  margin-bottom:56px;
}
.credibility-intro .eyebrow{margin-bottom:22px;}
.credibility-intro h2{
  font-size:clamp(1.7rem,2.7vw,2.35rem);
  max-width:680px;
}
.credibility-intro p{
  margin-top:20px;
  font-size:1.05rem;
  max-width:640px;
  color:var(--gray-600);
}

.credibility-markers{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.credibility-marker{
  padding:0 32px;
  border-left:1px solid var(--line);
}
.credibility-marker:first-child{border-left:none;padding-left:0;}
.credibility-marker-label{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
  margin-bottom:10px;
  letter-spacing:-0.01em;
}
.credibility-marker p{
  font-size:0.88rem;
  color:var(--gray-500);
  line-height:1.6;
}
@media (max-width:900px){
  .credibility-markers{grid-template-columns:repeat(2,1fr);row-gap:36px;}
  .credibility-marker:nth-child(2){border-left:1px solid var(--line);}
  .credibility-marker:nth-child(odd){border-left:none;padding-left:0;}
}
@media (max-width:560px){
  .credibility{padding:64px 0 60px;}
  .credibility-markers{grid-template-columns:1fr;row-gap:28px;}
  .credibility-marker{border-left:none !important;padding-left:0 !important;padding-right:0;border-top:1px solid var(--line);padding-top:24px;}
  .credibility-marker:first-child{border-top:none;padding-top:0;}
}

/* ===========================================================
   DISCIPLINE SECTIONS — Digital Marketing (primary) &
   UKG + Dell Boomi (secondary), one shared editorial language
   =========================================================== */
.discipline-head{
  max-width:640px;
  margin-bottom:64px;
}
.discipline-head .eyebrow{margin-bottom:20px;}
.discipline-head p{
  margin-top:18px;
  font-size:1.04rem;
  max-width:560px;
}

.discipline-body{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:80px;
  align-items:start;
}
.discipline-secondary .discipline-body{
  grid-template-columns:1fr 1.15fr;
}
.discipline-secondary .discipline-visual{order:-1;}

.discipline-copy p{
  font-size:1.03rem;
  margin-bottom:32px;
  max-width:480px;
}

.discipline-list{
  border-top:1px solid var(--line-strong);
}
.discipline-item{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid var(--line-strong);
  transition:padding-left .35s var(--ease);
}
.discipline-item:hover{padding-left:10px;}
.discipline-num{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--gold-600);
  padding-top:3px;
}
.discipline-item h4{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:-0.005em;
}
.discipline-item p{
  font-size:0.92rem;
  color:var(--gray-500);
  max-width:440px;
  margin:0;
}

.discipline-cta{
  margin-top:36px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  color:var(--ink);
  position:relative;
  padding-bottom:3px;
}
.discipline-cta::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--ink);
  transform-origin:right;
  transform:scaleX(1);
  transition:transform .4s var(--ease), background .3s;
}
.discipline-cta:hover{color:var(--gold-700);}
.discipline-cta:hover::after{background:var(--gold-600);}

/* ---- abstract visual panel (shared) ---- */
.discipline-visual{position:relative;}
.discipline-visual-frame{
  position:relative;
  background:var(--ink-2);
  aspect-ratio:6/5;
  overflow:hidden;
}
.discipline-visual-frame svg{width:100%;height:100%;display:block;}
.discipline-visual-caption{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gray-400);
}

/* growth-arc animation (marketing) */
.growth-arc-path{
  stroke-dasharray:640;
  stroke-dashoffset:640;
  animation:drawArc 2.2s var(--ease) forwards;
  animation-play-state:paused;
}
.discipline-visual-frame.in-view .growth-arc-path{animation-play-state:running;}
@keyframes drawArc{to{stroke-dashoffset:0;}}
.growth-arc-glow{
  animation:pulseGlow 4.5s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}

/* systems-flow animation (UKG + Boomi) */
.flow-line{
  stroke-dasharray:6 7;
  animation:flowDash 1.6s linear infinite;
}
@keyframes flowDash{to{stroke-dashoffset:-52;}}
.flow-node-pulse{
  animation:nodePulse 3.6s ease-in-out infinite;
}
@keyframes nodePulse{
  0%,100%{opacity:.4;}
  50%{opacity:.9;}
}

@media (max-width:960px){
  .discipline-body,
  .discipline-secondary .discipline-body{
    grid-template-columns:1fr;
    gap:52px;
  }
  .discipline-secondary .discipline-visual{order:0;}
  .discipline-visual-frame{aspect-ratio:16/10;}
}
@media (max-width:560px){
  .discipline-item{grid-template-columns:40px 1fr;gap:16px;}
}

/* ---------- Value props ---------- */
.value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.value-item{padding:0;}
.value-num{
  font-family:var(--font-mono);
  color:var(--gold-500);
  font-size:0.8rem;
  margin-bottom:14px;
  display:block;
}
.value-item h3{margin-bottom:10px;font-size:1.1rem;}
.value-item p{font-size:0.92rem;}
@media (max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.value-grid{grid-template-columns:1fr;}}

/* ===========================================================
   FEATURED CASE STUDY — new section
   =========================================================== */
.case-study{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:60px;
  align-items:center;
}
.case-media{position:relative;}
.case-media-frame{
  position:relative;
  aspect-ratio:4/3.4;
  overflow:hidden;
  clip-path: polygon(0 0, calc(100% - var(--fold-lg)) 0, 100% var(--fold-lg), 100% 100%, 0 100%);
  box-shadow:var(--shadow-lg);
}
.case-media-frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.case-media:hover .case-media-frame img{transform:scale(1.05);}
.case-metric-chip{
  position:absolute;left:-20px;bottom:-20px;
  background:var(--ink-2);color:var(--paper);
  padding:20px 24px;
  box-shadow:var(--shadow-lg);
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  max-width:230px;
}
.case-metric-chip strong{
  display:block;font-family:var(--font-display);font-size:1.6rem;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px;
}
.case-metric-chip span{font-size:0.78rem;color:#C9C4B4;}

.case-tag{
  display:inline-block;
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold-700);background:var(--paper-warm);border:1px solid var(--gold-300);
  padding:6px 13px;margin-bottom:18px;
}
.case-content h3{margin-bottom:16px;}
.case-content > p{margin-bottom:28px;font-size:1.02rem;}
.case-steps{display:grid;gap:6px;margin-bottom:30px;position:relative;}
.case-step{display:flex;gap:18px;position:relative;padding-bottom:22px;}
.case-step::before{
  content:"";position:absolute;left:14px;top:30px;bottom:-2px;width:1px;
  background:repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.case-step:last-child::before{display:none;}
.case-step:last-child{padding-bottom:0;}
.case-step-num{
  flex-shrink:0;width:29px;height:29px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.68rem;font-weight:600;
  color:var(--gold-700);background:var(--paper);
  border:1px solid var(--gold-300);
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  position:relative;z-index:2;
}
.case-step-label{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gold-700);margin-bottom:5px;
}
.case-step-body p{font-size:0.94rem;color:var(--gray-600);margin:0;}
.case-note{font-size:0.82rem;color:var(--gray-500);margin-top:4px;}

@media (max-width:900px){
  .case-study{grid-template-columns:1fr;gap:40px;}
  .case-metric-chip{position:static;margin-top:-40px;margin-left:20px;}
}

/* ===========================================================
   WHY CHOOSE US — new section
   =========================================================== */
.why-us{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.why-media{position:relative;}
.why-media-frame{
  position:relative;aspect-ratio:4/4.4;overflow:hidden;
  clip-path: polygon(var(--fold-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fold-lg));
  box-shadow:var(--shadow-lg);
}
.why-media-frame img{width:100%;height:100%;object-fit:cover;}
.why-badge{
  position:absolute;top:-18px;right:-18px;
  width:96px;height:96px;border-radius:50%;
  background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  box-shadow:var(--shadow-gold);
  text-align:center;
  animation:floatY 6s ease-in-out infinite;
}
.why-badge strong{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--ink);line-height:1;}
.why-badge span{font-size:0.56rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-soft);}

.why-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.why-item{display:flex;gap:14px;align-items:flex-start;}
.why-item-card{
  padding:20px;
  border:1px solid var(--line);
  background:var(--paper);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.why-item-card:hover{
  border-color:var(--gold-300);
  background:var(--paper-warm);
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
}
.why-item-icon{
  flex-shrink:0;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-warm);border:1px solid var(--gold-300);
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  transition:background .3s var(--ease);
}
.why-item-card:hover .why-item-icon{background:var(--gold-gradient);}
.why-item-icon svg{width:16px;height:16px;stroke:var(--gold-700);transition:stroke .3s;}
.why-item-card:hover .why-item-icon svg{stroke:var(--ink);}
.why-item h4{font-family:var(--font-display);font-size:0.98rem;color:var(--ink);margin-bottom:4px;}
.why-item p{font-size:0.88rem;margin:0;}

@media (max-width:900px){
  .why-us{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:560px){
  .why-list{grid-template-columns:1fr;}
}

/* ===========================================================
   PROCESS v2 — connected step-line (namespaced to avoid
   clashing with the shared .process-step component)
   =========================================================== */
.proc2-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  position:relative;
  margin-top:12px;
}
.proc2-list::before{
  content:"";
  position:absolute;top:27px;left:6%;right:6%;height:1px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
}
.proc2-step{position:relative;padding-top:0;}
.proc2-num{
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);
  border:1px solid var(--gold-300);
  font-family:var(--font-display);font-weight:700;color:var(--gold-700);
  margin-bottom:22px;position:relative;z-index:2;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition:background .3s, color .3s;
}
.proc2-step:hover .proc2-num{background:var(--gold-gradient);color:var(--ink);}
.proc2-step h3{font-size:1.05rem;margin-bottom:8px;}
.proc2-step p{font-size:0.92rem;}
@media (max-width:900px){
  .proc2-list{grid-template-columns:1fr 1fr;}
  .proc2-list::before{display:none;}
}
@media (max-width:560px){.proc2-list{grid-template-columns:1fr;}}

/* ===========================================================
   TESTIMONIALS v2 — slider
   =========================================================== */
.testi2{max-width:760px;margin:0 auto;text-align:center;position:relative;}
.testi2-card{
  border:1px solid var(--line-strong);
  background:var(--paper);
  padding:52px 56px 44px;
  position:relative;
  box-shadow:var(--shadow-sm);
  clip-path: polygon(0 0, calc(100% - var(--fold-lg)) 0, 100% var(--fold-lg), 100% 100%, 0 100%);
}
.testi2-mark{
  width:34px;height:34px;
  color:var(--gold-300);
  margin:0 auto 18px;
  display:block;
}
.testi2-track{position:relative;min-height:190px;}
.testi2-slide{
  position:absolute;inset:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.testi2-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative;}
.testi2-quote{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--ink);font-weight:500;line-height:1.5;margin-bottom:26px;
}
.testi2-person{display:flex;align-items:center;justify-content:center;gap:14px;}
.testi2-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:0.92rem;
}
.testi2-person-info{text-align:left;}
.testi2-person-info strong{display:block;font-family:var(--font-display);font-size:0.94rem;color:var(--ink);}
.testi2-person-info span{font-size:0.8rem;color:var(--gray-500);}
.testi2-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:32px;}
.testi2-dots{display:flex;justify-content:center;gap:10px;}
.testi2-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--line-strong);border:none;padding:0;cursor:pointer;
  transition:background .3s, transform .3s;
}
.testi2-dot.active{background:var(--gold-600);transform:scale(1.3);}
.testi2-dot:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px;}
.testi2-arrow{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);
  background:var(--paper);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.testi2-arrow svg{width:16px;height:16px;stroke:var(--ink);}
.testi2-arrow:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px);}
.testi2-arrow:hover svg{stroke:var(--gold-300);}
@media (max-width:560px){
  .testi2-card{padding:40px 26px 34px;}
}

/* ---------- Process / timeline ---------- */
.process-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line-strong);
}
.process-step{
  padding:32px 26px 32px 0;
  border-right:1px solid var(--line);
  position:relative;
}
.process-step:last-child{border-right:none;}
.process-step .value-num{color:var(--gold-600);font-size:1.6rem;font-family:var(--font-display);font-weight:700;}
.process-step h3{margin:10px 0;font-size:1.02rem;}
.process-step p{font-size:0.88rem;}
@media (max-width:900px){
  .process-list{grid-template-columns:1fr 1fr;}
  .process-step{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:8px;}
}
@media (max-width:560px){.process-list{grid-template-columns:1fr;}}

/* ---------- Stats bar v2 ---------- */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(253,253,252,.1);
  border:1px solid rgba(253,253,252,.12);
}
.stat{
  background:var(--ink-2);
  padding:40px 28px;
  text-align:center;
  transition:background .3s;
  position:relative;
  overflow:hidden;
}
.stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gold-gradient);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.stat:hover{background:#151517;}
.stat:hover::before{transform:scaleX(1);}
.stat strong{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,5vw,2.6rem);
  display:block;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:6px;
}
.stat span{font-size:0.76rem;text-transform:uppercase;letter-spacing:0.08em;color:#B8B2A0;}
@media (max-width:840px){.stats-bar{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media (max-width:480px){.stats-bar{grid-template-columns:1fr;gap:14px;}}

/* ---------- Cards (portfolio / general) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.project-card{
  border:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.project-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(20,20,20,.25);}
.project-media{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--paper-deep),var(--paper-warm));
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.project-media svg{width:52%;opacity:1;}
.project-tag{
  position:absolute;top:16px;left:16px;
  font-family:var(--font-mono);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  background:var(--ink);
  color:var(--gold-300);
  padding:6px 12px;
}
.project-body{padding:24px 26px 28px;}
.project-body h3{margin-bottom:8px;font-size:1.08rem;}
.project-body p{font-size:0.9rem;margin-bottom:14px;}
.project-meta{
  display:flex;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.card-grid{grid-template-columns:1fr;}}

/* ---------- Filter tabs ---------- */
.filter-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px;}
.filter-tab{
  padding:10px 20px;
  border:1px solid var(--line-strong);
  font-size:0.85rem;
  font-weight:500;
  transition:all .25s;
}
.filter-tab.active,.filter-tab:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ---------- Testimonial / quote ---------- */
.quote-block{
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
.quote-block svg{width:38px;margin:0 auto 24px;stroke:var(--gold-500);}
.quote-block p{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  color:var(--ink);
  font-weight:500;
  line-height:1.45;
  margin-bottom:26px;
}
.quote-cite{font-size:0.85rem;color:var(--gray-500);}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%);
  color:var(--paper);
  padding:96px 0;
  position:relative;
  overflow:hidden;
}
.cta-banner .container{
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
  position:relative;z-index:2;
}
.cta-banner h2{color:var(--paper);max-width:560px;font-size:clamp(1.9rem,3vw,2.6rem);}
.cta-copy{max-width:600px;}
.cta-sub{color:#C9C4B4;font-size:0.98rem;margin-top:14px;max-width:460px;}
.cta-corner{
  position:absolute;bottom:-80px;left:-80px;
  width:340px;height:340px;
  background:var(--gold-gradient);
  clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%);
  opacity:.18;
}
.cta-banner::after{
  content:"";
  position:absolute;top:-120px;right:-90px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,191,80,.25),transparent 70%);
  pointer-events:none;
}
.cta-banner .btn-group{display:flex;gap:16px;flex-wrap:wrap;position:relative;z-index:2;}

@media (max-width:768px){
  .cta-banner .container{flex-direction:column;text-align:center;align-items:center;gap:24px;}
  .cta-copy{margin:0 auto;text-align:center;}
  .cta-copy .eyebrow{justify-content:center;}
  .cta-sub{margin-left:auto;margin-right:auto;}
  .cta-banner .btn-group{justify-content:center;width:100%;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-2);color:#B8B2A0;padding:80px 0 28px;position:relative;}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,191,80,.5),transparent);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(240px, 320px) 1fr 1fr 1fr;
  column-gap:40px;
  row-gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(253,253,252,.12);
}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.footer-brand img{height:38px;filter:brightness(1);}
.footer-brand span{font-family:var(--font-display);font-weight:700;color:var(--paper);font-size:1.1rem;}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold-300);
  margin-bottom:20px;
}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{font-size:0.92rem;transition:color .25s, padding-left .25s var(--ease);display:inline-block;}
.footer-col ul li a:hover{color:var(--gold-300);padding-left:4px;}
.footer-desc{font-size:0.92rem;max-width:280px;margin-bottom:20px;}
.footer-trust{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.04em;
  color:#8F8A7A;margin-bottom:8px;
}
.footer-bottom{
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:10px 20px;
  padding-top:20px;
  font-size:0.82rem;
  color:var(--gray-400);
  text-align:center;
}
.footer-bottom a{margin-left:0;}
.footer-bottom a:hover{color:var(--gold-300);}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:28px;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;row-gap:28px;}
}

/* ===========================================================
   Reveal on scroll
   =========================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===========================================================
   Forms
   =========================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:0.8rem;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:0.04em;}
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line-strong);
  background:var(--paper);
  padding:14px 16px;
  transition:border-color .25s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--gold-600);
  outline:none;
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-note{font-size:0.8rem;color:var(--gray-500);margin-top:16px;}
.form-status{
  margin-top:18px;
  font-size:0.9rem;
  padding:14px 16px;
  border:1px solid var(--line-strong);
  display:none;
}
.form-status.show{display:block;}
.form-status.success{border-color:var(--gold-500);color:var(--gold-700);background:var(--paper-warm);}

@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* ---------- Contact info cards ---------- */
.contact-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:64px;}
.contact-info-card{background:var(--paper);padding:32px;}
.contact-info-card svg{width:28px;height:28px;stroke:var(--gold-600);margin-bottom:16px;}
.contact-info-card h4{font-family:var(--font-display);font-size:1rem;color:var(--ink);margin-bottom:8px;}
.contact-info-card p{font-size:0.9rem;}
@media (max-width:800px){.contact-info-grid{grid-template-columns:1fr;}}

.culture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:900px){.culture-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.culture-grid{grid-template-columns:1fr;}}
/* Modifier for instances that should always show exactly 2 columns down
   to tablet (used instead of an inline style so the 560px collapse below
   still applies — an inline style's specificity would otherwise beat the
   @media rule above and force 2 cramped columns even on small phones,
   pushing the section wider than the viewport). */
.culture-grid.is-two-col{grid-template-columns:1fr 1fr;}
@media (max-width:560px){.culture-grid.is-two-col{grid-template-columns:1fr;}}

/* ---------- About page ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:36px;}}

.values-list{border-top:1px solid var(--line-strong);}
.values-row{
  display:grid;grid-template-columns:60px 1fr 1.4fr;gap:24px;
  padding:28px 0;border-bottom:1px solid var(--line);align-items:start;
}
.values-row .value-num{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--gold-600);}
.values-row h3{font-size:1.05rem;}
.values-row p{font-size:0.92rem;}
@media (max-width:700px){
  .values-row{grid-template-columns:1fr;gap:8px;}
}

.timeline{border-left:1px solid var(--line-strong);margin-left:8px;}
.timeline-item{position:relative;padding:0 0 44px 34px;}
.timeline-item::before{
  content:"";position:absolute;left:-6px;top:4px;
  width:11px;height:11px;background:var(--gold-500);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transform:rotate(45deg);
}
.timeline-item h4{font-family:var(--font-mono);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--gold-700);margin-bottom:8px;}
.timeline-item p{font-size:0.94rem;max-width:520px;}

/* util */
.text-center{text-align:center;}
.mt-lg{margin-top:64px;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* tool badges */
.tool-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.tool-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--gold-300);
  background:var(--paper-warm);
  font-family:var(--font-display);
  font-size:0.82rem;font-weight:600;
  color:var(--ink);
}
.tool-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-600);flex-shrink:0;}
.tool-badges-label{
  font-family:var(--font-body);font-size:0.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);
  opacity:.7;width:100%;margin-bottom:2px;
}

/* ===========================================================
   INDUSTRIES WE SERVE — dark glassmorphism grid
   =========================================================== */
.industries{position:relative;overflow:hidden;}
.industries::before{
  content:"";
  position:absolute;
  top:-20%;right:-10%;
  width:640px;height:640px;
  background:radial-gradient(circle, rgba(239,191,80,0.14) 0%, rgba(239,191,80,0) 70%);
  pointer-events:none;
}
.industries::after{
  content:"";
  position:absolute;
  bottom:-15%;left:-8%;
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(163,108,16,0.16) 0%, rgba(163,108,16,0) 70%);
  pointer-events:none;
}
.industries .section-head p{color:#B8B2A0;}
.industries-subtitle{
  max-width:640px;margin:0 auto;color:#B8B2A0;
  font-size:1rem;line-height:1.7;
}

.industries-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.industry-card{
  position:relative;
  background:rgba(253,253,252,0.045);
  border:1px solid rgba(253,253,252,0.10);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding-bottom:28px;
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.industry-card:hover{
  transform:translateY(-9px);
  border-color:rgba(239,191,80,0.5);
  background:rgba(253,253,252,0.075);
  box-shadow:0 34px 64px -22px rgba(163,108,16,0.4), 0 0 0 1px rgba(239,191,80,0.18);
}
.industry-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.industry-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
  filter:saturate(0.92) brightness(0.92);
}
.industry-card:hover .industry-media img{transform:scale(1.09);}
.industry-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,0) 35%, rgba(11,11,12,0.95) 100%);
}
.industry-icon{
  position:absolute;left:20px;bottom:-22px;z-index:2;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-gradient);
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  box-shadow:var(--shadow-gold);
  transition:transform .44s var(--ease-spring);
}
.industry-card:hover .industry-icon{transform:translateY(-3px) rotate(-4deg);}
.industry-icon svg{width:22px;height:22px;stroke:var(--ink);}
.industry-body{padding:32px 22px 0;}
.industry-body h3{color:var(--paper);font-size:1.05rem;margin-bottom:9px;}
.industry-body p{color:#B0AA9A;font-size:0.88rem;line-height:1.55;margin:0;}

@media (max-width:1024px){
  .industries-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media (min-width:601px) and (max-width:1024px){
  .capability-group .industries-grid .industry-card:nth-child(3):last-child{
    grid-column:1 / -1;
    max-width:560px;
    margin:0 auto;
    width:100%;
  }
}
@media (max-width:600px){
  .industries-grid{grid-template-columns:1fr;gap:18px;}
}

/* ===========================================================
   WHY CHOOSE REAXIV — trust & value pillars
   =========================================================== */
.advantage-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-top:8px;
}
.advantage-card{
  position:relative;
  padding:44px 40px 40px;
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.advantage-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold-gradient);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.advantage-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
  border-color:var(--gold-300);
}
.advantage-card:hover::before{transform:scaleX(1);}
.advantage-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-warm);
  border:1px solid var(--gold-300);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  margin-bottom:24px;
  transition:background .35s var(--ease);
}
.advantage-card:hover .advantage-icon{background:var(--gold-gradient);}
.advantage-icon svg{width:24px;height:24px;stroke:var(--gold-700);transition:stroke .3s;}
.advantage-card:hover .advantage-icon svg{stroke:var(--ink);}
.advantage-card h3{font-size:1.08rem;margin-bottom:10px;}
.advantage-card p{font-size:0.92rem;margin:0;}

.advantage-trust{
  display:flex;justify-content:center;flex-wrap:wrap;
  margin-top:56px;
  padding-top:44px;
  border-top:1px solid var(--line);
}

@media (max-width:700px){
  .advantage-grid{grid-template-columns:1fr;}
  .advantage-card{padding:34px 28px 30px;}
  .advantage-trust{margin-top:40px;padding-top:32px;}
}

/* ===========================================================
   FEATURED SUCCESS STORY
   =========================================================== */
.success-story .section-head{margin-bottom:64px;}
.success-body{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:start;
}

/* narrative / timeline column */
.success-narrative{display:flex;flex-direction:column;}
.success-step{display:flex;gap:20px;position:relative;padding-bottom:34px;}
.success-step::before{
  content:"";position:absolute;left:14px;top:34px;bottom:2px;width:1px;
  background:repeating-linear-gradient(180deg, rgba(253,253,252,.18) 0 6px, transparent 6px 12px);
}
.success-step:last-of-type::before{display:none;}
.success-step:last-of-type{padding-bottom:0;}
.success-step-num{
  flex-shrink:0;width:29px;height:29px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.68rem;font-weight:600;
  color:var(--gold-300);background:var(--ink-2);
  border:1px solid rgba(240,199,103,0.35);
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  position:relative;z-index:2;
}
.success-step-label{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:6px;
}
.success-step-body h4{color:var(--paper);font-size:1.05rem;margin-bottom:8px;}
.success-step-body p{font-size:0.94rem;color:#C9C4B4;margin:0;}
.success-narrative-cta{margin-top:10px;align-self:flex-start;}

/* results panel */
.success-panel{
  position:relative;
  background:var(--ink-2);
  border:1px solid rgba(253,253,252,.12);
  padding:40px 36px;
  clip-path:polygon(0 0, calc(100% - var(--fold-lg)) 0, 100% var(--fold-lg), 100% 100%, 0 100%);
  box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.success-panel:hover{transform:translateY(-4px);}
.success-panel-tag{
  display:inline-block;
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold-300);background:rgba(240,199,103,0.1);
  border:1px solid rgba(240,199,103,0.3);
  padding:6px 13px;margin-bottom:28px;
}
.success-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:32px;
  padding-bottom:30px;
  border-bottom:1px solid rgba(253,253,252,.12);
}
.success-stat strong{
  font-family:var(--font-display);font-size:1.85rem;display:block;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.success-stat span{
  display:block;font-size:0.7rem;line-height:1.4;
  text-transform:uppercase;letter-spacing:0.04em;color:#B8B2A0;
}
.success-quote{position:relative;}
.success-quote-mark{width:26px;height:26px;color:var(--gold-500);opacity:.6;margin-bottom:12px;}
.success-quote p{
  font-family:var(--font-display);font-size:1.05rem;font-weight:500;
  color:var(--paper);line-height:1.5;margin-bottom:16px;
}
.success-quote footer{display:flex;flex-direction:column;font-style:normal;}
.success-quote footer strong{font-family:var(--font-display);font-size:0.88rem;color:var(--paper);}
.success-quote footer span{font-size:0.78rem;color:#B8B2A0;}
.success-note{margin-top:24px;font-size:0.78rem;color:#8A857A;}

@media (max-width:960px){
  .success-body{grid-template-columns:1fr;gap:48px;}
}
@media (max-width:560px){
  .success-stats{grid-template-columns:1fr;gap:18px;}
  .success-panel{
    padding:32px 24px;
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  }
}

/* ===========================================================
   GLOBAL RESPONSIVE HARDENING
   Fluid container/spacing + explicit small-phone and
   ultra-wide (2K/4K) tiers layered on top of existing rules.
   Nothing above this line is overridden except where noted.
   =========================================================== */

/* Fluid container gutters instead of a fixed 32px on every size */
.container{padding:0 clamp(20px, 4vw, 32px);}

/* Fluid section rhythm so vertical spacing scales with viewport, not just width */
section{padding:clamp(64px, 9vw, 112px) 0;}
.section-tight{padding:clamp(48px, 6vw, 72px) 0;}

/* Collapse the doubled whitespace that appears when two full-padding
   sections of the same (transparent/white) background sit back-to-back
   with no color change to justify a full two-section gap. Both the
   bottom padding of the first section and the top padding of the
   second are trimmed so the combined gap reads as one section's worth
   of breathing room instead of two stacked on top of each other.
   Everything else — card spacing, internal rhythm, other pages — is
   untouched. */
section.credibility:has(+ section){padding-bottom:clamp(32px, 4vw, 56px);}
.credibility + section{padding-top:clamp(32px, 4vw, 56px);}
.advantage:has(+ .journey){padding-bottom:clamp(32px, 4vw, 56px);}
.advantage + .journey{padding-top:clamp(32px, 4vw, 56px);}

/* Small phones: 320–480px */
@media (max-width:480px){
  .nav{padding:12px 16px;}
  .brand img{height:32px;}
  .brand-word{font-size:1.02rem;}
  .nav-cta{gap:10px;}
  .nav-links{left:auto;right:0;width:min(320px, 88vw);padding:32px 22px;}
  .btn{padding:13px 20px;font-size:0.88rem;white-space:normal;text-align:center;max-width:100%;}
  h1{font-size:clamp(1.75rem,8vw,2.6rem);}
  h2{font-size:clamp(1.4rem,6.5vw,2rem);}
  .eyebrow{font-size:0.66rem;letter-spacing:0.12em;}
  .success-panel-tag,.case-tag{font-size:0.64rem;padding:5px 10px;}
  .cta-banner .btn-group{width:100%;}
  .cta-banner .btn-group .btn{width:100%;justify-content:center;}
}
@media (max-width:360px){
  .brand img{height:28px;}
  .brand-word{font-size:0.95rem;}
  .brand-word span{display:none;}
  .hero-cinematic-lead{font-size:0.92rem;}
  .nav-links{width:min(300px, 90vw);padding:28px 18px;}
}
@media (max-width:320px){
  .container{padding:0 12px;}
  .nav{padding:10px 12px;}
  .btn{padding:11px 16px;font-size:0.84rem;}
  .stat strong{font-size:1.75rem;}
  .footer-grid{column-gap:12px;row-gap:20px;}
}

/* Large laptops / small desktops: nudge container slightly wider so
   content doesn't feel cramped between the tablet and desktop tiers */
@media (min-width:1441px){
  :root{--container:1320px;}
}

/* 2K and 4K displays: cap line-length and let type/spacing breathe
   instead of just centering a desktop layout in empty space */
@media (min-width:1920px){
  :root{--container:1440px;}
  body{font-size:17px;}
  h1{font-size:clamp(3.4rem,4vw,4.6rem);}
  h2{font-size:clamp(2.4rem,2.8vw,3.1rem);}
  .hero-cinematic-lead,.case-content > p,.credibility-intro p{font-size:1.12rem;}
}
@media (min-width:2560px){
  :root{--container:1600px;}
  body{font-size:18px;}
}

/* ===========================================================
   PARTNERSHIP JOURNEY
   =========================================================== */
.journey-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px, 2.4vw, 28px);
  margin-top:8px;
}
.journey-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-right:8px;
}
.journey-node{
  width:44px;height:44px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:0.85rem;
  color:var(--gold-700);
  background:var(--paper);
  border:1px solid var(--gold-300);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  position:relative;z-index:2;
  margin-bottom:22px;
  transition:background .3s, color .3s;
}
.journey-step:hover .journey-node{background:var(--gold-gradient);color:var(--ink);}
.journey-line{
  position:absolute;
  top:22px;left:0;right:0;
  height:2px;
  background:var(--line-strong);
  z-index:1;
}
.journey-line-fill{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:var(--gold-gradient);
  transition:width 1.6s var(--ease) .1s;
}
.journey-track.in .journey-line-fill{width:100%;}
.journey-step h4{font-size:1rem;margin-bottom:8px;}
.journey-step p{font-size:0.88rem;color:var(--gray-600);margin:0;}
.journey-cta{display:flex;justify-content:center;margin-top:clamp(40px, 6vw, 56px);}

@media (max-width:960px){
  .journey-track{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .journey-line{display:none;}
  .journey-step{
    flex-direction:row;
    align-items:flex-start;
    gap:20px;
    padding:0 0 34px;
  }
  .journey-step::before{
    content:"";position:absolute;left:21px;top:44px;bottom:2px;width:1px;
    background:repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  .journey-step:last-child::before{display:none;}
  .journey-step:last-child{padding-bottom:0;}
  .journey-node{margin-bottom:0;}
}
@media (max-width:480px){
  .journey-step{gap:16px;}
  .journey-node{width:38px;height:38px;font-size:0.76rem;}
  .journey-step::before{left:18px;top:38px;}
}

/* ===========================================================
   CLIENT SUCCESS STORIES — bento-style story grid
   =========================================================== */
.stories-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:1fr;
  gap:clamp(18px, 2.4vw, 28px);
}
.story-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(28px, 3vw, 34px) clamp(24px, 2.6vw, 30px) 30px;
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.story-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold-gradient);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.story-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--gold-300);}
.story-card:hover::before{transform:scaleX(1);}

.story-tag{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold-700);background:var(--paper-warm);border:1px solid var(--gold-300);
  padding:6px 12px;margin-bottom:22px;
}
.story-metric{margin-bottom:18px;}
.story-metric strong{
  display:block;font-family:var(--font-display);font-size:1.9rem;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px;
}
.story-metric span{
  display:block;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--gray-500);
}
.story-quote-mark{width:22px;height:22px;color:var(--gold-500);opacity:.55;margin-bottom:12px;}
.story-quote{font-size:0.96rem;color:var(--gray-600);line-height:1.55;margin-bottom:22px;flex-grow:1;}
.story-person{margin-top:auto;display:flex;flex-direction:column;}
.story-person strong{font-family:var(--font-display);font-size:0.9rem;color:var(--ink);}
.story-person span{font-size:0.78rem;color:var(--gray-500);}

/* featured story — larger, dark, spans the bento grid */
.story-featured{
  grid-column:span 2;
  grid-row:span 2;
  background:var(--ink-2);
  border-color:rgba(253,253,252,.14);
  clip-path:polygon(0 0, calc(100% - var(--fold-lg)) 0, 100% var(--fold-lg), 100% 100%, 0 100%);
  padding:clamp(36px, 3.6vw, 46px) clamp(32px, 3.4vw, 40px) 38px;
}
.story-featured:hover{border-color:rgba(240,199,103,.4);}
.story-featured .story-tag{color:var(--gold-300);background:rgba(240,199,103,.1);border-color:rgba(240,199,103,.3);}
.story-featured .story-metric strong{font-size:clamp(2.4rem, 3vw, 3rem);}
.story-featured .story-metric span{color:#B8B2A0;}
.story-featured .story-quote{font-size:1.15rem;color:var(--paper);font-family:var(--font-display);font-weight:500;line-height:1.5;}
.story-featured .story-person strong{color:var(--paper);}
.story-featured .story-person span{color:#B8B2A0;}

.stories-note{margin-top:32px;font-size:0.82rem;color:var(--gray-500);text-align:center;}

@media (max-width:960px){
  .stories-grid{grid-template-columns:repeat(2, 1fr);}
  .story-featured{grid-column:span 2;grid-row:span 1;}
}
@media (max-width:640px){
  .stories-grid{grid-template-columns:1fr;}
  .story-featured{grid-column:span 1;}
}
@media (max-width:480px){
  .story-card{padding:26px 22px 28px;}
  .story-metric strong{font-size:1.6rem;}
  .story-featured .story-metric strong{font-size:2rem;}
}

/* ===========================================================
   ABOUT PAGE — large feature image banner (full-bleed)
   =========================================================== */
.growth-feature{
  position:relative;
  padding:clamp(96px, 12vw, 150px) 0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
.growth-feature::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg, rgba(11,11,12,.94) 10%, rgba(11,11,12,.72) 55%, rgba(11,11,12,.45) 100%);
}
.growth-feature-inner{position:relative;z-index:2;}
.growth-feature-stats{
  margin-top:clamp(36px, 5vw, 52px);
  justify-content:flex-start;
  gap:clamp(28px, 5vw, 56px);
}
@media (max-width:700px){
  .growth-feature-stats{gap:28px 36px;}
}

/* Reuse case-tag as a small inline label chip outside case-content contexts */
.value-item .case-tag{display:inline-block;}


/* ================= ABOUT — premium full-bleed hero banner ================= */
.about-hero-banner{
  position:relative;
  min-height:78vh;
  min-height:78svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink-2);
  isolation:isolate;
}
.about-hero-banner-media{position:absolute;inset:0;z-index:0;}
.about-hero-banner-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.about-hero-banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,8,10,.5) 0%, rgba(6,8,10,.48) 55%, rgba(6,8,10,.5) 100%);
}
.about-hero-banner-inner{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:center;
}
.about-hero-banner-content{
  max-width:820px;
  padding:0 8px;
  text-align:center;
}
.about-hero-banner-content .eyebrow{
  justify-content:center;
  margin-bottom:22px;
}
.about-hero-banner-headline{
  color:var(--paper);
  font-weight:800;
  font-size:clamp(2.3rem,4.4vw,3.4rem);
  letter-spacing:-0.025em;
  line-height:1.1;
  margin:0;
  text-shadow:0 4px 26px rgba(0,0,0,.4);
}
.about-hero-banner-lead{
  color:rgba(253,253,252,.92);
  font-size:1.08rem;
  line-height:1.6;
  max-width:620px;
  margin:20px auto 0;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
@media (max-width:960px){
  .about-hero-banner{min-height:70vh;min-height:70svh;}
}
@media (max-width:768px){
  .about-hero-banner-content{max-width:100%;}
}
@media (max-width:640px){
  .about-hero-banner{min-height:64vh;min-height:64svh;}
}
@media (max-width:360px){
  .about-hero-banner-inner{padding-top:34px;padding-bottom:34px;}
}
@media (max-width:330px){
  .about-hero-banner-inner{padding-top:8px;padding-bottom:8px;}
}