/* Self-hosted Plus Jakarta Sans (brand font) — no external CDN dependency */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/PlusJakartaSans-Light.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/PlusJakartaSans-LightItalic.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/PlusJakartaSans-Regular.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/PlusJakartaSans-Italic.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/PlusJakartaSans-Medium.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');}
/* Urbanist — used only for the People/Process/Product stage labels per the Figma spec */
@font-face{font-family:'Urbanist';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Urbanist-Medium.woff2') format('woff2');}

/* ==========================================================================
   Courageous Leadership — Global Design System
   Dark theme. Eclipse base, Carbon blocks, Pale Blue accents, Blue primary.
   ========================================================================== */


/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* Colors — 9 total (5 brand + 2 surfaces + 2 text) */
  --c-blue:        #408CF5;   /* primary / accent / links / italic emphasis */
  --c-carbon:      #003B5A;   /* deep section background */
  --c-eclipse:     #011221;   /* near-black base bg + dark text on pale bands */
  --c-white:       #FFFFFF;
  --c-pale:        #BEE3FA;   /* tints, CTA band, hero accent */
  --c-eclipse-2:   #061A2C;   /* slightly lifted eclipse (cards on eclipse) */
  --c-line:        #1C3346;   /* hairline borders on dark */
  --t-on-dark:        #E8F1FB;  /* primary body text on dark */
  --t-on-dark-muted:  #9FB4C7;  /* muted body text on dark */

  /* Typography scale (fluid) */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-accent: 'Urbanist', var(--font-body);   /* P/P/P labels only; headings currently use --font-body too */
  --fs-hero:   clamp(3.25rem, 8vw, 6rem);     /* H1 hero */
  --fs-h1:     clamp(2.5rem, 5.5vw, 4rem);
  --fs-h2:     clamp(2rem, 4vw, 2.75rem);
  --fs-h3:     clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h4:     clamp(1.35rem, 0.9rem + 1.4vw, 1.8rem);   /* small heading + prominent subhead (~29px); absorbed old --fs-lead-lg */
  --fs-body:   clamp(1.15rem, 1.6vw, 1.45rem);           /* THE body text (~23px, most-used); was --fs-lead */
  --fs-sm:     clamp(1rem, 1.2vw, 1.15rem);              /* small text (~17px); was --fs-body */
  --fs-xs:     0.95rem;                                   /* fine print (~15px); was --fs-sm */

  /* Weights */
  --w-light:   300;
  --w-reg:     400;
  --w-med:     500;
  --w-semi:    600;
  --w-bold:    700;

  /* Spacing — lean 7-step t-shirt scale (trimmed from --space-xs..10; 4px folded to 8,
     96px folded to 64, 128px dropped — all were ≤1 use; section rhythm = --sec-y). */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* Section vertical rhythm. --sec-y is THE standard for non-hero sections (default
     .section). --sec-y-lg is the roomier exception, applied via .section--lg. */
  --sec-y:     clamp(3rem, 6vw, 5rem);   /* standard, 48→80px */
  --sec-y-lg:  clamp(4rem, 9vw, 8rem);   /* roomier exception, 64→128px */
  --hero-y:    clamp(3rem, 7vw, 6rem);   /* CLI-specific: home hero top/bottom margin = its height. Change here to retune. */

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 48px;     /* large rounded section corners */
  --r-pill: 999px;

  /* Layout */
  --container: 1040px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Effects */
  --shadow-card: 0 18px 50px rgba(0,0,0,.35);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }   /* native scroll — no forced smooth easing */
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--w-reg);
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--t-on-dark);
  background:var(--c-eclipse);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--c-blue); outline-offset:3px; border-radius:4px; }

/* ---------- Typography --------------------------------------------------- */
h1,h2,h3,h4{ font-weight:var(--w-semi); line-height:1.05; letter-spacing:-.01em; color:var(--c-white); }  /* Figma display headings are semibold (600) */
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); font-weight:var(--w-reg); }
p{ font-size:var(--fs-sm); color:var(--t-on-dark); }
.lead{ font-size:var(--fs-body); line-height:1.5; color:var(--t-on-dark); }
.muted{ color:var(--t-on-dark-muted); }

/* Blue italic emphasis helper (hero "work") */
.em-italic{ font-style:italic; color:var(--c-blue); font-weight:var(--w-light); }
/* Blue accent (non-italic) */
.em-blue{ color:var(--c-blue); }

/* Eyebrow / kicker — blue, semibold, used above lists & sections */
.eyebrow{
  font-size:var(--fs-body);
  font-weight:var(--w-semi);
  color:var(--c-blue);
  line-height:1.15;
  letter-spacing:-.01em;
}

/* ---------- Container & layout ------------------------------------------ */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:880px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.stack > * + *{ margin-top:var(--space-lg); }
.text-center{ text-align:center; }

/* ---------- Section wrappers --------------------------------------------
   Default = Eclipse. .is-carbon = #003B5A block with large rounded corners.
   .is-pale  = #BEE3FA light band (CTA / contact hero).
   Round-top / round-bottom create the mockup's curved section transitions.
   ------------------------------------------------------------------------ */
.section{
  position:relative;
  padding-block:var(--sec-y);
  background:var(--c-eclipse);
}
.section--lg{ padding-block:var(--sec-y-lg); }   /* opt-in roomier section */
.section--flush-top{ padding-top:0; }
.section--flush-bottom{ padding-bottom:0; }

.section.is-carbon{ background:var(--c-carbon); color:var(--t-on-dark); }
.section.is-pale{ background:var(--c-pale); color:var(--c-eclipse); }
.section.is-pale h1,.section.is-pale h2,.section.is-pale h3,.section.is-pale h4{ color:var(--c-blue); }
.section.is-pale p{ color:var(--c-eclipse); }

/* Large rounded section corners (the curved block transitions) */
.section.round-top{ border-top-left-radius:var(--r-2xl); border-top-right-radius:var(--r-2xl); }
.section.round-bottom{ border-bottom-left-radius:var(--r-2xl); border-bottom-right-radius:var(--r-2xl); }
/* Single-corner curves seen in the hero image mask & pale hero foot */
.section.round-tl{ border-top-left-radius:var(--r-2xl); }
.section.round-tr{ border-top-right-radius:var(--r-2xl); }
.section.round-br{ border-bottom-right-radius:var(--r-2xl); }
.section.round-bl{ border-bottom-left-radius:var(--r-2xl); }
/* Big alternating section-band curves — Figma uses 140px on one diagonal */
.section.round-diag-a{ border-radius:0 140px 0 140px; }   /* rounded TR + BL */
.section.round-diag-b{ border-radius:140px 0 140px 0; }   /* rounded TL + BR */

/* When a carbon/pale block sits over eclipse and should overlap the seam */
.section.overlap{ margin-top:calc(var(--r-2xl) * -1); }

/* ---------- Header / Nav ------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--c-eclipse);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ border-bottom-color:var(--c-line); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-lg);
  min-height:84px;
}
.nav__logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.nav__logo img{ height:42px; width:auto; }

.nav__links{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem);
}
.nav__links a{
  font-size:var(--fs-sm);
  font-weight:var(--w-reg);
  color:var(--t-on-dark);
  padding-block:var(--space-xs);
  transition:color .18s var(--ease);
}
.nav__links a:hover{ color:var(--c-blue); }
.nav__links a.is-active{ color:var(--c-blue); }

.nav__toggle{
  display:none;
  width:46px; height:46px;
  border:1px solid var(--c-line); border-radius:var(--r-sm);
  background:transparent;
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.nav__toggle span{ width:22px; height:2px; background:var(--c-white); border-radius:2px; transition:.2s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-sm); font-weight:var(--w-semi);
  padding:var(--space-sm) var(--space-xl);
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:transform .15s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--c-blue); color:var(--c-white); position:relative; overflow:hidden; isolation:isolate; }
/* On pale bands the primary CTA reads as solid blue; on dark, the soft pale pill is used for the form submit */
.btn--pale{ background:var(--c-pale); color:var(--c-eclipse); }
.btn--pale:hover{ background:#a9d6f3; }
.btn--ghost{ background:transparent; color:var(--c-white); border-color:var(--c-line); }
.btn--ghost:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.btn .arrow{ transition:transform .15s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
/* Primary CTA cooler hover: the arrow slides off the right edge and fades while a
   chevron-shaped wipe sweeps in from the left, shifting the fill to a deeper blue. */
.btn--primary::before{
  content:""; position:absolute; top:0; bottom:0; left:0; right:-22px; z-index:-1; background:#1e5fe0;
  transform:translateX(-102%);
  -webkit-clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  transition:transform .42s var(--ease);
}
.btn--primary .arrow{ transition:transform .38s var(--ease), opacity .28s var(--ease); }
.btn--primary:hover::before{ transform:translateX(0); }
.btn--primary:hover .arrow{ transform:translateX(2.4rem); opacity:0; }
/* As the arrow leaves, slide the label into the freed pocket (~half the gap +
   arrow width) so it ends optically centred instead of leaving a right-side gap.
   Same .38s as the arrow so it reads as one motion; button width stays constant. */
.btn--primary .btn__label{ transition:transform .38s var(--ease); }
.btn--primary:hover .btn__label{ transform:translateX(0.8rem); }

/* Inline text link with arrow ("Learn more →") */
.link-more{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--c-blue); font-weight:var(--w-bold); font-size:var(--fs-sm);
}
.link-more .arrow{ transition:transform .15s var(--ease); }
.link-more:hover .arrow{ transform:translateX(3px); }

/* ---------- Hero --------------------------------------------------------- */
.hero{ position:relative; }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; min-height:540px; }
.hero__title{ font-size:var(--fs-hero); font-weight:var(--w-semi); }  /* heroes are 600 (home overrides to 400) */
.hero__sub{ font-size:var(--fs-body); color:var(--t-on-dark); max-width:36ch; margin-top:var(--space-lg); }
/* Hero image mask with large curved corners */
.hero__media{ border-radius:var(--r-2xl) 0 var(--r-2xl) var(--r-2xl); overflow:hidden; }
.hero__media .img-ph{ border-radius:inherit; }

/* ---------- Logo strip / carousel --------------------------------------- */
.logo-strip{ text-align:center; }
.logo-strip__title{ font-size:var(--fs-body); font-weight:var(--w-semi); color:var(--c-blue); margin-bottom:var(--space-2xl); }
.carousel{ position:relative; display:flex; align-items:center; gap:var(--space-md); }
.carousel__track-wrap{ flex:1 1 auto; overflow:hidden; }
.carousel__track{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:clamp(2rem,5vw,4rem);
  transition:transform .4s var(--ease);
}
.carousel__track img,
.carousel__track .logo-item{
  height:46px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1); /* render client logos white on dark */
  opacity:.92;
}
.carousel__btn{
  flex:0 0 auto;
  width:54px; height:54px; border-radius:var(--r-pill);
  background:var(--c-carbon); color:var(--c-blue);
  border:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-body); line-height:1;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.carousel__btn:hover{ background:var(--c-blue); color:var(--c-white); }

/* ---------- Cards -------------------------------------------------------- */
.card{
  background:var(--c-eclipse-2);
  border:1px solid var(--c-line);
  border-radius:var(--r-xl);
  padding:var(--space-xl);
}
.card--carbon{ background:var(--c-carbon); border-color:transparent; }

/* Service block (icon badge + heading + copy + learn-more) */
.service{ display:flex; flex-direction:column; gap:var(--space-md); }
.service__head{ display:flex; align-items:center; gap:var(--space-md); }
.service__title{ font-size:var(--fs-h3); font-weight:var(--w-semi); color:var(--c-pale); line-height:1.05; }  /* Figma: 48px w600 #BEE3FA */
.service__body{ color:var(--t-on-dark); max-width:42ch; }

/* Icon badge — rounded-square, blue or pale-blue fill, holds a brand SVG icon */
.icon-badge{
  flex:0 0 auto;
  width:72px; height:72px;
  border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-blue);
}
.icon-badge--pale{ background:var(--c-pale); }
.icon-badge img,.icon-badge svg{ width:42px; height:42px; }

/* Service media (paired photo) with large curved corners */
.service-media{ border-radius:var(--r-xl); overflow:hidden; }
.service-media.curve-tr{ border-radius:var(--r-xl) var(--r-2xl) var(--r-xl) var(--r-xl); }
.service-media.curve-tl{ border-radius:var(--r-2xl) var(--r-xl) var(--r-xl) var(--r-xl); }

/* ---------- Parallax media viewbox -------------------------------------- */
/* A fixed-aspect frame holding the photo as an oversized background that
   drifts on scroll (true parallax — not a static crop). Default corner is the
   CLI asymmetric sweep: rounded top-left + bottom-right, sharp top-right +
   bottom-left. Use .pmedia--mirror for the opposite diagonal. */
.pmedia{ position:relative; overflow:hidden;
  border-radius:61px 0 61px 0; }   /* exact Figma spec: rounded TL+BR, sharp TR+BL */
.pmedia--mirror{ border-radius:0 61px 0 61px; }
.pmedia__bg{
  position:absolute; left:0; right:0; top:-16%; bottom:-16%;
  background-size:cover; background-position:center;
  will-change:transform; transform:translate3d(0,0,0);
}
@media (prefers-reduced-motion:reduce){
  .pmedia__bg{ top:0; bottom:0; transform:none !important; }
}

/* ---------- Lists with custom bullets ----------------------------------- */
.list-bullets{ display:flex; flex-direction:column; gap:var(--space-md); }
.list-bullets li{
  position:relative;
  padding-left:var(--space-xl);
  font-size:var(--fs-h4);
  font-weight:var(--w-light);
  line-height:1.25;
  color:var(--c-white);
}
.list-bullets li::before{
  content:""; position:absolute; left:0; top:50%;   /* middle of the li → centers to the middle of a wrapped 2-line item */
  width:9px; height:9px; border-radius:50%;
  background:var(--c-blue);
  transform:translateY(-50%);
}
/* On carbon the bullets stay white; this block is the "We've been where you are" list */

/* ---------- Pipeline tabs (People / Process / Product chevrons) ---------- */
.pipeline{
  display:flex; align-items:stretch;
  background:var(--c-eclipse-2);
  border-radius:var(--r-md);
  overflow:hidden;
}
.pipeline__step{
  flex:1 1 0;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-lg) var(--space-md);
  font-size:var(--fs-h3);
  font-weight:var(--w-light);
  color:rgba(190,227,250,.4);
  background:transparent;
  border:none;
  -webkit-clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
}
.pipeline__step:first-child{
  -webkit-clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.pipeline__step.is-active{ color:var(--c-eclipse); }
.pipeline__step.is-active[data-tone="pale"]{ background:var(--c-pale); }
.pipeline__step.is-active[data-tone="grad"]{ background:var(--c-blue); color:var(--c-white); }
.pipeline__step.is-active[data-tone="carbon"]{ background:var(--c-carbon); color:var(--c-white); }

/* ---------- FAQ accordion ------------------------------------------------ */
.faq{ display:flex; flex-direction:column; gap:var(--space-md); }
.faq__item{
  /* CONSTANT radius: reads as a pill on the ~77px closed bar (40 ≈ half its
     height) and as a rounded rect when open. The radius never animates, so
     closing is a true reverse of opening — only the answer height moves. */
  border-radius:40px;
  background:var(--c-carbon);
  overflow:hidden;
  transition:background .2s var(--ease);
}
.faq__item.is-open{ background:var(--c-carbon); }
.faq__q{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  padding:var(--space-lg) var(--space-xl);
  background:transparent; border:none; color:var(--c-white);
  font-size:var(--fs-body); font-weight:var(--w-semi);
  /* fade the blue in/out in step with the height collapse (.3s) so closing
     isn't an abrupt colour snap while the answer animates smoothly. */
  transition:background .3s var(--ease), border-radius .3s var(--ease);
}
.faq__item.is-open > .faq__q{
  background:var(--c-blue);
  border-radius:var(--r-pill);
}
.faq__sign{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-body); line-height:1; color:var(--c-blue);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.faq__item.is-open .faq__sign{ background:var(--c-eclipse); color:var(--c-pale); }
.faq__a{ padding:0 1.75rem; max-height:0; overflow:hidden; transition:max-height .3s var(--ease), padding .3s var(--ease); }
.faq__item.is-open .faq__a{ padding:var(--space-lg) var(--space-xl) var(--space-xl); max-height:500px; }
.faq__a p{ color:var(--t-on-dark); font-size:var(--fs-body); line-height:1.55; }

/* ---------- Forms (contact) --------------------------------------------- */
.field{ width:100%; margin-bottom:var(--space-md); }
.field input,.field textarea{
  width:100%;
  background:transparent;
  color:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:var(--space-md) var(--space-lg);
  font-family:inherit; font-size:var(--fs-sm);
}
.field textarea{ min-height:160px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--t-on-dark-muted); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--c-blue); }

/* ---------- Image placeholder ------------------------------------------- */
.img-ph{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  background:
    linear-gradient(135deg, rgba(0,59,90,.55), rgba(6,26,44,.85));
  border:1px solid var(--c-line);
  border-radius:var(--r-xl);
  color:var(--t-on-dark-muted);
  font-size:var(--fs-xs); font-weight:var(--w-med);
  text-align:center; padding:var(--space-lg);
  min-height:120px;
}
.img-ph::after{ content:attr(data-note); display:block; }
.img-ph[data-note=""]::after{ content:"[ photo ]"; }

/* ---------- CTA band (Ready to learn more?) ----------------------------- */
.cta-band{ text-align:center; }
.cta-band h2{ color:var(--c-blue); font-size:var(--fs-h1); }
.cta-band p{ color:var(--c-eclipse); font-size:var(--fs-body); margin-top:var(--space-sm); }
.cta-band .btn{ margin-top:var(--space-xl); }

/* ---------- Footer ------------------------------------------------------- */
.site-footer{ background:var(--c-eclipse); padding-block:var(--sec-y); }
.site-footer address{ font-style:normal; }   /* <address> is italic by default; Figma is upright */
.footer__grid{
  display:grid;
  /* Figma: logo · address · links kept CLOSE together (auto), copyright pushed to the
     far right (the 1fr soaks up the space). D + L share this 3-col-plus-copyright row. */
  grid-template-columns:auto auto auto 1fr;
  gap:clamp(1.25rem,3vw,2.25rem);
  align-items:center;
}
.footer__logo img{ height:60px; width:auto; }
.footer__col h4{ font-size:var(--fs-sm); font-weight:var(--w-bold); color:var(--c-white); margin-bottom:var(--space-sm); }
.footer__col a,.footer__col p{ color:var(--t-on-dark); font-size:var(--fs-xs); line-height:1.7; }
.footer__col a:hover{ color:var(--c-blue); }
.footer__nap p{ margin:0; }
.footer__copy{ text-align:right; color:var(--t-on-dark); font-size:var(--fs-xs); line-height:1.6; }
/* The whole "Web dev by Amadeo Consulting" line is the link: c-blue @30% → 100% on hover. */
.footer__copy a{ color:rgba(64,140,245,.3); text-decoration:none; transition:color .2s var(--ease); }
.footer__copy a:hover{ color:var(--c-blue); }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:979.98px){
  .grid-2,.hero__inner{ grid-template-columns:1fr; }
  .hero__inner{ min-height:0; }
  .hero__media{ order:-1; border-radius:var(--r-xl); }
}
@media (max-width:767.98px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--c-eclipse);
    border-top:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
    padding:var(--space-sm) var(--gutter);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav__links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links a{ width:100%; padding:var(--space-sm) 0; border-bottom:1px solid var(--c-line); font-size:var(--fs-sm); }
  .nav__links a:last-child{ border-bottom:none; }
  .section.round-top,.section.round-bottom,.section.round-tl,.section.round-tr,.section.round-br,.section.round-bl{ border-radius:var(--r-xl); }
  .section.round-diag-a{ border-radius:0 56px 0 56px; }
  .section.round-diag-b{ border-radius:56px 0 56px 0; }
  /* Tablet portrait: logo · address · Links on one left-aligned row; copyright centred on its own row. */
  .footer__grid{ grid-template-columns:auto auto 1fr; justify-items:start; text-align:left; column-gap:var(--space-xl); row-gap:var(--space-lg); align-items:center; }
  .footer__logo{ grid-column:1; }
  .footer__nap{ grid-column:2; }
  .footer__grid > .footer__col:not(.footer__nap){ grid-column:3; justify-self:end; text-align:right; }
  .footer__copy{ grid-column:1 / -1; justify-self:stretch; text-align:center; }
  .carousel__track{ gap:2rem; }
  .carousel__track img,.carousel__track .logo-item{ height:36px; }
  .pipeline__step{ font-size:var(--fs-sm); padding:var(--space-md) var(--space-xs); }
}
@media (max-width:479.98px){   /* Cornerstone MOBILE tier */
  .icon-badge{ width:60px; height:60px; }
  .icon-badge img,.icon-badge svg{ width:34px; height:34px; }
  /* M: single centred column (undo the tablet-portrait row / float / left-align rules) */
  .footer__grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer__logo,.footer__nap,.footer__grid > .footer__col:not(.footer__nap),.footer__copy{ grid-column:1; justify-self:center; text-align:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}
/* placed photos fill their box flush — drop the placeholder chrome (navy
   bg / border / padding) so the real image sits edge-to-edge with only its
   own rounded corners, matching the mockups. The chrome stays on non-img
   .img-ph placeholders (e.g. brand-logo cards). */
img.img-ph{ object-fit:cover; width:100%; height:100%; display:block;
  padding:0; border:0; background:none; min-height:0; }