/* Theme Name: Atimi
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Atimi Master Stylesheet (Unified, Optimized, GPU Accelerated)
Author: Architect / Elementor Team
Template: hello-elementor
Version: 8.0.0
*/

/* ==========================================================================
   1. GLOBAL TOKENS & FOUNDATION
   ========================================================================== */
:root {
  /* Core Brand Colors */
  --color-brand-deep-blue: #00416A;
  --color-brand-headline-blue: #0083C1;
  --color-brand-sky: #32C0E9;
  --color-brand-turquoise: #0BD3C5;
  --color-brand-purple: #976AB8;
  --color-neutral-600: #707173;
  --color-neutral-500: #9C9E9F;
  
  /* Dark Theme Tokens */
  --color-page: #030A11;
  --color-surface: rgba(6, 18, 29, 0.62);
  --color-surface-solid: #06131B;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #AECBDE;
  --color-line: rgba(255, 255, 255, 0.13);
  --color-dark-page-case-study: #030b12;

  /* Gradients */
  --gradient-button: linear-gradient(105deg, #00416A 0%, #0083C1 24%, #32C0E9 48%, #0BD3C5 72%, #976AB8 100%);
  --gradient-progress: linear-gradient(90deg, #32C0E9 0%, #0BD3C5 58%, #976AB8 100%);
  
  /* Layout & Spacing */
  --layout-max: 1440px;
  --content-max: 1280px;
  --page-gutter: 80px;
  --section-space: clamp(104px, 10vw, 160px);
  --section-space-end: clamp(112px, 11vw, 176px);
  
  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --type-hero: 80px;
  --type-section: 50px;
  --type-h3: 25px;
  --type-lead: 18px;
  --type-body: 18px;
  --type-meta: 14px;
  --type-ui: 18px;
  --type-stat: 80px;
  --type-stat-label: 25px;
  
  /* Animation Easings */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasized: cubic-bezier(.22, 1, .36, 1);
}

/* Type scale steps (design system 6.2): desktop >=1025 / tablet 701-1024 / mobile <=700.
   Replaces the old fluid clamps, which landed between canonical sizes at tablet widths. */
@media (max-width: 1024px) {
  :root { --type-hero: 64px; --type-section: 42px; --type-h3: 23px; --type-ui: 17px; --type-stat: 64px; --type-stat-label: 21px; }
}
@media (max-width: 700px) {
  :root { --type-hero: 48px; --type-section: 34px; --type-h3: 21px; --type-lead: 17px; --type-body: 17px; --type-meta: 13px; --type-ui: 16px; --type-stat: 48px; --type-stat-label: 18px; }
}

@media (max-width: 1024px) { :root { --page-gutter: 48px; } }
@media (max-width: 700px) { :root { --page-gutter: 24px; } }

/* Atimi Hero Ripple — required canvas layout */
.atimi-hero-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #030a11;
}

.atimi-hero-ripple__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.atimi-hero-ripple > :not(.atimi-hero-ripple__canvas) {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   2. BASE DOM HYGIENE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-page); }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.section-shell {
  width: min(100%, var(--layout-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ==========================================================================
   3. SHARED COMPONENTS (Buttons, Typography)
   ========================================================================== */
/* ==========================================================================
   Primary button (.primary-cta on an Elementor Button widget). GLOBAL.
   Spec = final CSS of Home_page.html / Careers_page.html / About_page.html
   (blocks *-homepage-header-cta), measured 2026-09-24:
   - rest: 110deg brand gradient, 15px 32px padding (53px tall), 18px/500 Inter
   - hover/focus: gradient flips direction, crossfading over .58s; soft two-layer
     glow over .32s; NO lift; arrow nudges 5px over .28s
   Page files must not restyle this; add a modifier class instead.
   (Header "Contact us" and About Quality "Contact us" are a separate pill style.)
   ========================================================================== */
.elementor-widget-button.primary-cta .elementor-button, 
.elementor-widget-button.contact-submit .elementor-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  min-height: 0;
  padding: 15px 32px !important;
  border-radius: 999px !important;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(110deg, #006DA6 0%, #007FA0 42%, #00819A 70%, #73518E 100%) !important;
  background-size: 100% 100% !important;
  background-position: 50% 50% !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-image .58s cubic-bezier(.22,1,.36,1), box-shadow .32s ease, border-color .32s ease !important;
  cursor: pointer;
  text-transform: none !important;
}

.elementor-widget-button.primary-cta .elementor-button-icon, 
.elementor-widget-button.contact-submit .elementor-button-icon {
  display: none !important;
}

.elementor-widget-button.primary-cta .elementor-button::after, 
.elementor-widget-button.contact-submit .elementor-button::after {
  content: "→";
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 18px;
  line-height: 1;
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.elementor-widget-button.primary-cta .elementor-button:hover, 
.elementor-widget-button.primary-cta .elementor-button:focus-visible, 
.elementor-widget-button.contact-submit .elementor-button:hover {
  background-image: linear-gradient(110deg, #73518E 0%, #00819A 30%, #007FA0 58%, #006DA6 100%) !important;
  background-position: 50% 50% !important;
  box-shadow: 0 0 8px rgb(50 192 233 / .16), 0 8px 16px rgb(11 211 197 / .20) !important;
  transform: none !important;
}

.elementor-widget-button.primary-cta .elementor-button:hover::after, 
.elementor-widget-button.primary-cta .elementor-button:focus-visible::after, 
.elementor-widget-button.contact-submit .elementor-button:hover::after {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-button.primary-cta .elementor-button,
  .elementor-widget-button.primary-cta .elementor-button::after { transition: none !important; }
}

h1, h2, h3, .section-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  text-rendering: optimizeLegibility;
}

.section-heading {
  font-size: var(--type-section);
  text-align: center;
  margin-inline: auto;
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  min-height: max(650px, calc(100svh - 162px + 8px)); 
  display: grid;
  place-items: stretch;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-black, #000000);
}

.hero-layout {
  position: relative;
  z-index: 3;
  width: min(100% - 40px, 1280px) !important;
  min-height: inherit;
  margin-inline: auto;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr) !important;
  align-items: center !important;
  gap: clamp(20px, 3.2vw, 54px) !important;
  padding-top: 96px !important;
  padding-bottom: 48px !important;
}

.hero .hero-content {
  width: auto !important;
  max-width: 690px !important;
  margin-inline: 0 !important;
  padding: 32px 0 42px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
}

.hero .eyebrow {
  color: var(--color-brand-sky) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 20px !important;
  text-align: left !important;
  text-transform: uppercase;
}

.hero h1 { color: #ffffff !important; font-size: var(--type-hero); line-height: 1.06; text-align: left !important; margin: 0 !important;}
.hero .subhead { color: var(--color-text-secondary) !important; font-size: var(--type-lead); text-align: left !important; margin: 24px 0 0 !important;}
.hero .primary-cta { align-self: flex-start !important; margin-top: 32px !important; }

@media (max-width: 820px) {
  .hero-layout { grid-template-columns: 1fr !important; padding-top: 108px !important; }
  .hero .hero-content { margin-inline: auto !important; align-items: center !important; text-align: center !important; }
  .hero .eyebrow, .hero h1, .hero .subhead { text-align: center !important; }
  .hero .primary-cta { align-self: center !important; }
}

.hero h1 .accent,
.hero .elementor-heading-title .accent {
    background: linear-gradient(100deg, var(--color-brand-headline-blue) 0%, var(--color-brand-sky) 55%, var(--color-brand-turquoise) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

/* ==========================================================================
   5. CLIENT LOGOS
   ========================================================================== */
.client-logos { position: relative; z-index: 2; padding: 48px 0; overflow: hidden; background: var(--color-page); }
.logo-marquee { width: 100vw; max-width: 100%; overflow: hidden; }
.logo-track {
  display: flex !important; flex-wrap: nowrap !important; width: max-content !important; margin: 0 !important; padding: 0 !important;
  will-change: transform;
  animation: logoMarquee 42s linear infinite; 
}
.logo-track:hover { animation-play-state: paused; }
.logo-set {
  display: flex !important; flex-wrap: nowrap !important;
  align-items: center !important; flex: 0 0 auto !important; 
  margin: 0 !important; gap: clamp(48px, 4.8vw, 80px) !important;
  padding-right: clamp(48px, 4.8vw, 80px) !important; 
}
.client-logo {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important;
  width: clamp(120px, 10.8vw, 166px) !important; height: 58px !important;
}
.client-logos img {
  max-height: 42px !important;
  width: auto !important; object-fit: contain !important;
  filter: grayscale(1) brightness(0) invert(1); opacity: 0.50;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.client-logos .client-logo:hover img { opacity: 0.67; transform: translateY(-4px); }
@keyframes logoMarquee { 100% { transform: translate3d(-50%, 0, 0); } }

/* ==========================================================================
   6. STATISTICS (Elementor template 893 "Stats", .atimi-stats-wrapper)
   One global layout for every page that shows the template (Home, Careers, ...).
   Ported from the Home design's statistics module (Careers uses the same module):
   - 4 columns at 701px+, column gap 3.2vw, 1px sky divider between columns.
   - 2 x 2 grid at 700px and below with the design's cross divider.
   - Suffix (+) is smaller than the number, as in the design (span.atimi-stat-suffix in the template).
   Type uses the global tokens (--type-stat 80/64/48, --type-stat-label 25/21/18).
   Entrance motion: js/atimi-stats-spread.js (sets --stats-spread 0 -> 1; dividers fade in with it).
   2026-09-23: replaces the old flex version (stacked to one column at 820px) and the Home-only grid.
   ========================================================================== */
.atimi-stats-wrapper{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:3.2vw!important;row-gap:0!important;
  align-items:start!important;
  width:min(1280px,calc(100% - var(--page-gutter,48px) - var(--page-gutter,48px)))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:64px 0!important;
}
.atimi-stat-item{
  position:relative!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  gap:18px!important;
  width:100%!important;max-width:none!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;
  text-align:center!important;
}
.atimi-stat-value,.atimi-stat-value .elementor-heading-title{
  margin:0!important;
  color:#fff!important;
  font-family:var(--font-heading)!important;font-size:var(--type-stat)!important;font-weight:500!important;
  line-height:1!important;letter-spacing:-.015em!important;white-space:nowrap;
  transition:color .3s ease;
}
.atimi-stat-suffix{font-size:.7em;margin-left:.02em;display:inline-block;transform:translateY(.02em);}
.atimi-stat-label,.atimi-stat-label p{
  margin:0!important;
  color:#9c9e9f!important;
  font-family:var(--font-body)!important;font-size:var(--type-stat-label)!important;font-weight:500!important;
  line-height:1.4!important;text-align:center!important;text-wrap:balance;
  transition:color .3s ease;
}
.atimi-stat-item:hover .atimi-stat-value,.atimi-stat-item:hover .atimi-stat-value *{color:var(--color-brand-sky)!important;}
.atimi-stat-item:hover .atimi-stat-label,.atimi-stat-item:hover .atimi-stat-label *{color:#fff!important;}
/* Column dividers (701px+): centred in the gap to the left of columns 2-4. */
.atimi-stat-item::after{content:none;}
.atimi-stat-item:not(:first-child)::after{
  content:"";position:absolute;z-index:1;left:-1.6vw;top:-16px;bottom:-16px;width:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(50,192,233,.34) 12%,rgba(50,192,233,.88) 50%,rgba(50,192,233,.34) 88%,rgba(0,0,0,0) 100%);
  opacity:var(--stats-spread,1);
}
.atimi-stats-wrapper::before,.atimi-stats-wrapper::after{content:none;}
@media (max-width:1024px){
  .atimi-stats-wrapper{padding:56px 0!important;}
  .atimi-stat-item{gap:13px!important;}
}
@media (max-width:700px){
  .atimi-stats-wrapper{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;row-gap:44px!important;
    width:calc(100% - 32px)!important;
    padding:48px 0!important;
  }
  .atimi-stat-item{gap:12px!important;}
  .atimi-stat-item:not(:first-child)::after{content:none;}
  /* Cross divider: one vertical line through the centre, one horizontal line between the rows. */
  .atimi-stats-wrapper::before,.atimi-stats-wrapper::after{
    content:"";position:absolute;pointer-events:none;opacity:var(--stats-spread,1);
  }
  /* Elementor gives .e-con::before/::after width/height 100% (background overlay); override the geometry. */
  .atimi-stats-wrapper::before{
    left:50%!important;right:auto!important;top:48px;bottom:48px;width:1px!important;height:auto!important;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(50,192,233,.34) 12%,rgba(50,192,233,.86) 50%,rgba(50,192,233,.34) 88%,rgba(0,0,0,0) 100%);
  }
  .atimi-stats-wrapper::after{
    left:0!important;right:0!important;top:50%!important;bottom:auto!important;width:auto!important;height:1px!important;
    background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(50,192,233,.34) 12%,rgba(50,192,233,.86) 50%,rgba(50,192,233,.34) 88%,rgba(0,0,0,0) 100%);
  }
}
@media (max-width:480px){
  .atimi-stats-wrapper{column-gap:16px!important;row-gap:38px!important;}
}
/* Careers design gives the stats block more air than Home. */
.page-id-903 .atimi-stats-wrapper{padding:112px 0!important;}
@media (max-width:1024px){.page-id-903 .atimi-stats-wrapper{padding:80px 0!important;}}
@media (max-width:700px){.page-id-903 .atimi-stats-wrapper{padding:56px 0!important;}.page-id-903 .atimi-stats-wrapper::before{top:56px;bottom:56px;}}
/* ==========================================================================
   7. CASE STUDIES: MASTER STRUCTURE & OVERRIDES
   ========================================================================== */
.elementor-widget-loop-grid,
.elementor-widget-loop-grid .elementor-widget-container,
.elementor-loop-container {
    overflow: visible !important;
}
.elementor-loop-container {
    display: block !important;
}
.elementor-loop-container > .e-loop-item {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    will-change: transform;
}
.case-study {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    background: var(--color-dark-page-case-study); 
    border-radius: clamp(28px, 3.4vw, 54px);
    margin-bottom: clamp(34px, 4.6vw, 72px);
}
.case-studies-title-sticky {
    position: sticky !important;
    top: clamp(80px, 10vh, 120px) !important;
    z-index: 50 !important; 
    pointer-events: none; 
}
.case-studies-title-sticky .elementor-heading-title { pointer-events: auto; }
.case-study-logo { width: 100% !important; }
.case-study-logo .elementor-widget-container { text-align: left !important; display: flex !important; justify-content: flex-start !important; }
.case-study-logo img, .case-study-logo svg {
    /* 2026-09-23: size cap from the Home design (max 62px tall, max 300px / 82% wide, left aligned).
       Applies to every case study using the loop template (301). Logos show in their supplied colours:
       the white SVGs stay white and Best Buy keeps its brand colours (the design exempts it from the white filter). */
    display: block !important; width: auto !important; height: auto !important;
    max-width: min(300px, 82%) !important; max-height: 62px !important;
    object-fit: contain !important; object-position: left center !important;
    margin: 0 !important; opacity: 1 !important;
}
.case-study-wordmark, .case-study-wordmark *, .case-study-summary, .case-study-summary * { color: #ffffff !important; text-align: left !important; margin-left: 0 !important; font-family: var(--font-heading); }
.case-study-wordmark { font-size: clamp(36px, 4vw, 60px) !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.026em !important; }
.case-study-bestbuy .case-study-wordmark { color: #ffe500 !important; }
.case-study-summary { font-family: var(--font-body) !important; font-size: 18px !important; line-height: 1.6 !important; }

.case-study-link .elementor-button { background: transparent !important; border: none !important; padding: 0 0 8px 0 !important;
color: #ffffff !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: none !important;
box-shadow: none !important; border-radius: 0 !important; position: relative; display: inline-flex !important; align-items: center !important; gap: 13px !important;
transition: color 300ms var(--ease-standard) !important; }
.case-study-link .elementor-button::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, #32C0E9, #0BD3C5) !important; transform-origin: left; transition: transform 0.35s var(--ease-emphasized); }
.case-study-link .elementor-button::after { content: "→" !important; font-size: 19px !important;
line-height: 1 !important; transition: transform 0.3s ease !important; position: static !important; }
.case-study-link .elementor-button-icon { display: none !important; }
.case-study-link .elementor-button:hover, .case-study-link .elementor-button:focus-visible { color: var(--color-brand-sky) !important; }
.case-study-link .elementor-button:hover::before, .case-study-link .elementor-button:focus-visible::before { transform: scaleX(0.72) !important; }
.case-study-link .elementor-button:hover::after, .case-study-link .elementor-button:focus-visible::after { transform: translateX(5px) !important; }

/* 2026-09-25: case study card matched to the Home design render.
   Selectors are class/structure based (no page IDs) so they apply to every loop item
   (301 home, 851 landing) and every page that shows the card (94, 852, template 854).
   - CTA: 18px, no tracking (was 14px / 0.08em).
   - Logo to summary: 34px (was the widget's 20px bottom padding). Targets the image widget
     by structure because loop item 851's logo widget has no case-study-logo class.
   - Summary measure: 490px at desktop, which gives the design's line breaks. */
.case-study-link .elementor-button { font-size: 18px !important; letter-spacing: 0 !important; line-height: 1.3 !important; }
.case-study-copy .elementor-widget-image { padding-bottom: 34px !important; }
.case-study-copy .case-study-link { margin-top: 3px !important; } /* summary to CTA: ~52px ink gap, as designed */
/* CTA hover: underline shrinks to exactly the 'Read case study' text (design), not 72% of text + arrow.
   32px = 13px gap + 19px arrow. Animates 'right' instead of scaleX so the end point is exact. */
.case-study-link .elementor-button::before { transition: right 0.35s var(--ease-emphasized) !important; }
.case-study-link .elementor-button:hover::before, .case-study-link .elementor-button:focus-visible::before { transform: none !important; right: 32px; }
.case-study-copy .elementor-widget-image > .elementor-widget-container { padding-bottom: 0 !important; }
@media (min-width: 768px) {
    .case-study-copy .elementor-widget-text-editor { max-width: 490px !important; }
}

/* ==========================================================================
   8. CASE STUDIES: ENTRANCE ANIMATION & MASKS
   ========================================================================== */
.case-study-visual {
    position: absolute !important;
    inset: 0 !important; 
    z-index: 0 !important; 
    width: 100% !important; 
    height: 100% !important;
    transform: translateZ(0) !important; 
    backface-visibility: hidden !important;
    clip-path: inset(99.9% 0 0 0 round clamp(28px, 3.4vw, 54px)) !important;
    transition: clip-path 1.15s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: clip-path !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 4%, rgba(0,0,0,0.56) 9%, #000 17%, #000 83%, rgba(0,0,0,0.56) 91%, rgba(0,0,0,0.18) 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 4%, rgba(0,0,0,0.56) 9%, #000 17%, #000 83%, rgba(0,0,0,0.56) 91%, rgba(0,0,0,0.18) 96%, transparent 100%);
}
.case-study-visual img { 
    width: 100%; height: 100%; object-fit: cover; 
    transform: scale(1.15) translateZ(0) !important;
    backface-visibility: hidden !important;
    transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform !important;
}
.case-study-visual::before { content: ""; position: absolute;
inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(2,8,14,0.93) 0%, rgba(2,8,14,0.78) 28%, rgba(2,8,14,0.30) 50%, transparent 76%); }
.case-study-kelloggs .case-study-visual::before { background: linear-gradient(90deg, rgba(31,3,10,0.92) 0%, rgba(31,3,10,0.74) 30%, rgba(31,3,10,0.22) 56%, transparent 78%); } /* 2026-09-28: after-freeze design (red tint, copy on the left like every card) */

.case-study-copy {
    position: absolute !important; z-index: 10 !important; left: clamp(30px, 5.3vw, 86px) !important;
    bottom: clamp(34px, 5.5vw, 88px) !important; width: min(550px, 43%) !important; max-width: calc(100% - 60px) !important;
    display: flex !important; flex-direction: column;
    align-items: flex-start !important; gap: 24px;
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.7s ease 0.32s, transform 0.9s cubic-bezier(.22, 1, .36, 1) 0.25s !important;
    will-change: opacity, transform !important;
}
/* 2026-09-28: removed Kellogg's right-aligned copy (not in the after-freeze design) */

.case-study[data-direction="from-top"] .case-study-visual { clip-path: inset(0 0 99.9% 0 round clamp(28px, 3.4vw, 54px)) !important; }
.case-study[data-direction="from-top"] .case-study-copy { transform: translateY(-30px) !important; }
.case-study[data-direction="from-bottom"] .case-study-visual { clip-path: inset(99.9% 0 0 0 round clamp(28px, 3.4vw, 54px)) !important; }
.case-study[data-direction="from-bottom"] .case-study-copy { transform: translateY(30px) !important; }

.case-study.is-visible .case-study-visual { clip-path: inset(0 0 0 0 round clamp(28px, 3.4vw, 54px)) !important; }
.case-study.is-visible .case-study-visual img { transform: scale(1) translateZ(0) !important; }
.case-study.is-visible .case-study-copy { opacity: 1 !important; transform: translateY(0) !important; }

@media (max-width: 767px) {
    .case-study-copy, .case-study-kelloggs .case-study-copy { left: 24px !important; right: 24px !important; bottom: 28px !important;
    width: auto !important; max-width: none !important; }
    .case-study-visual::before { background: linear-gradient(0deg, rgba(2,8,14,0.96) 0%, rgba(2,8,14,0.80) 37%, rgba(2,8,14,0.12) 72%, transparent 100%); }
    .case-study-visual {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 3%, #000 8%, #000 92%, rgba(0,0,0,0.55) 97%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 3%, #000 8%, #000 92%, rgba(0,0,0,0.55) 97%, transparent 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-study-visual { clip-path: inset(0 0 0 0 round clamp(28px, 3.4vw, 54px)) !important; transition: none !important; }
    .case-study-visual img { transform: scale(1) translateZ(0) !important; transition: none !important; }
    .case-study-copy { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; }
}

/* ==========================================================================
   9. DIGITAL EVOLUTION (Botanical Topography)
   ========================================================================== */
.evolution-section { 
    position: relative; z-index: 2;
    padding: var(--section-space) 0 var(--section-space-end); color: var(--color-text-primary); isolation: isolate; background: transparent;
    padding-block: var(--section-spacing, 120px) !important;
    overflow: hidden;
}
.evolution-shell {
    width: 100% !important;
    max-width: var(--layout-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--page-gutter) !important;
    box-sizing: border-box !important;
}

.evolution-layout { display: grid; grid-template-columns: minmax(0, .94fr) minmax(460px, 1.06fr); align-items: center; gap: clamp(48px, 5vw, 72px); }
.evolution-heading { max-width: 12.5ch; margin: 0 0 32px; text-align: left; }
.evolution-heading .accent { color: var(--color-brand-sky); white-space: nowrap; }

.evolution-copy { width: 100%; max-width: 570px; text-align: left; }
.evolution-copy p { font-size: var(--type-body); line-height: 1.6; margin-bottom: 24px; color: rgba(217, 238, 247, 0.76); }

.evolution-copy-panel .elementor-widget {
    margin-bottom: 0 !important;
}

.evolution-botanical-visual { position: relative; z-index: 2; width: 100%; min-height: clamp(560px, 43vw, 650px); display: grid; place-items: center; isolation: isolate; pointer-events: none; }
.evolution-botanical-visual .hero-botanical-stage { position: relative; width: min(100%, 1000px); height: 100%; }
.evolution-botanical-visual .hero-botanical-fallback, .evolution-botanical-visual .hero-botanical-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(.96) contrast(1.035) drop-shadow(0 26px 56px rgba(0,0,0,0.34)); }

@media(max-width: 900px) { .evolution-layout { grid-template-columns: 1fr; } .evolution-heading, .evolution-copy { max-width: 700px; margin-inline: auto; } }

/* ==========================================================================
   10. OUR EXPERTISE 
   ========================================================================== */
.expertise-section { padding: var(--section-space) 0 var(--section-space-end); background: #06111a; color: var(--color-text-primary); overflow: hidden; isolation: isolate; }
.expertise-section::before { content: ""; position: absolute; width: min(72vw, 980px); aspect-ratio: 1; right: -28%; top: -34%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0, 131, 193, 0.14) 0%, rgba(50, 192, 233, 0.045) 34%, transparent 70%); filter: blur(10px); opacity: 0.8; }

.expertise-intro { display: grid; grid-template-columns: 1fr; row-gap: 32px; margin-bottom: 64px; text-align: left; }
.expertise-lead { width: min(100%, 52ch); font-size: var(--type-lead); color: var(--color-text-secondary); margin: 0 auto; justify-self: center; text-align: left; }

.expertise-card-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }

.expertise-card { 
    grid-column: span 2 !important;
    position: relative;
    isolation: isolate; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    min-height: clamp(420px, 31vw, 470px); 
    padding: clamp(180px, 15vw, 220px) clamp(24px, 2.4vw, 36px) clamp(36px, 2.8vw, 46px) clamp(39px, 3.5vw, 51px) !important;
    border: 0; 
    border-right: 1px solid rgba(255,255,255,0.1); 
    opacity: 1; 
    overflow: hidden; 
    outline: none; 
    transition: background-color 0.3s ease; 
}
.expertise-card:last-child { border-right: 0; }
.expertise-card:nth-child(4) { grid-column: 2 / span 2 !important; }
.expertise-card:nth-child(3) { border-right: 0 !important; }
/* Row divider is drawn by the inset bottom row (cards 4-5) via border-top at desktop, not a full-width bottom border here. See desktop block below. */

.expertise-card:nth-child(1) { --service-a: #32C0E9; --service-b: #0BD3C5; }
.expertise-card:nth-child(3) { --service-a: #8BBCC8; --service-b: #32C0E9; }
.expertise-card:nth-child(2) { --service-a: #B688D8; --service-b: #32C0E9; }
.expertise-card:nth-child(4) { --service-a: #40A8E8; --service-b: #32C0E9; }
.expertise-card:nth-child(5) { --service-a: #10D1C9; --service-b: #32C0E9; }
.expertise-card { --expertise-text-tone: var(--service-a); }

@media (max-width: 1040px) {
    .expertise-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .expertise-card, .expertise-card:nth-child(4) { grid-column: span 1 !important; }
    .expertise-card:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.1) !important; }
    .expertise-card:nth-child(even) { border-right: 0 !important; }
    .expertise-card:nth-child(-n+4) { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
    .expertise-card:nth-child(5) { grid-column: 1 / -1 !important; border-right: 0 !important; border-bottom: 0 !important; }
}

@media (max-width: 700px) {
    .expertise-card-grid { grid-template-columns: 1fr !important; }
    .expertise-card { min-height: 0; padding-top: clamp(140px, 20vw, 180px) !important; }
    .expertise-card, .expertise-card:nth-child(n) { grid-column: span 1 !important; border-right: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
    .expertise-card:last-child { border-bottom: 0 !important; }
}

.expertise-card::after { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--service-a), transparent 88%); opacity: 0; transform: scaleY(0.72); transform-origin: top; transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.expertise-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--service-a) 13%, transparent) 0%, transparent 63%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.expertise-card:hover::after, .expertise-card:focus-visible::after { opacity: 1; transform: scaleY(1); }
.expertise-card:hover::before, .expertise-card:focus-visible::before { opacity: 1; }

.expertise-organic-icon { 
    position: absolute !important; 
    z-index: 0;
    top: clamp(24px, 2.5vw, 32px); 
    left: clamp(39px, 3.5vw, 51px);
    width: clamp(132px, 10.4vw, 168px); 
    height: clamp(112px, 9vw, 136px); 
    margin: 0 !important;
    opacity: 1; 
    transform: none;
    transform-origin: left center; 
    filter: drop-shadow(0 18px 32px rgba(0, 131, 193, 0.14));
    transition: filter 300ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 700px) {
    .expertise-organic-icon { left: auto; right: 16px; top: 14px; width: 88px; height: 74px; transform: none; } .expertise-card:hover .expertise-organic-icon { transform: scale(1.02); }
}

.expertise-organic-icon img { position: absolute !important; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain; object-position: left center; transform-origin: 0% 50%; will-change: transform; }

.expertise-organic-icon--mobile img { animation: expertiseOrganicMobile 7.6s ease-in-out infinite; }
.expertise-organic-icon--web img { animation: expertiseOrganicWeb 8.4s ease-in-out infinite; animation-delay: -1.7s; }
.expertise-organic-icon--backend img { animation: expertiseOrganicBackend 8s ease-in-out infinite; animation-delay: -3.1s; }
.expertise-organic-icon--data img { animation: expertiseOrganicData 8.8s ease-in-out infinite; animation-delay: -4.4s; }

.expertise-card:hover .expertise-organic-icon { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 22px 36px color-mix(in srgb, var(--service-b) 26%, transparent)); }

.expertise-title .elementor-heading-title { 
    margin-top: 0 !important;
    color: var(--expertise-text-tone) !important; 
    font-family: var(--font-heading) !important; 
    font-size: var(--type-h3) !important; 
    font-weight: 500 !important; 
    line-height: 1.28 !important; 
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    transition: color 0.3s ease !important; 
}

.expertise-description, .expertise-description p { 
    color: rgba(255,255,255,0.70) !important;
    font-family: var(--font-body) !important; 
    font-size: var(--type-body) !important; 
    line-height: 1.6 !important; 
    margin: 0 !important; 
    z-index: 1; 
    transition: color 0.3s ease !important;
}

.expertise-card:hover .expertise-description, 
.expertise-card:focus-visible .expertise-description,
.expertise-card:hover .expertise-description p, 
.expertise-card:focus-visible .expertise-description p { 
    color: #ffffff !important;
}

@keyframes expertiseOrganicMobile { 0%, 100% { transform: translate3d(0, 1px, 0) rotate(-0.35deg) scale(0.998); } 50% { transform: translate3d(2px, -4px, 0) rotate(0.4deg) scale(1.008); } }
@keyframes expertiseOrganicWeb { 0%, 100% { transform: translate3d(-2px, 1px, 0) rotate(-0.2deg) scale(1); } 50% { transform: translate3d(3px, -2px, 0) rotate(0.25deg) scale(1.006); } }
@keyframes expertiseOrganicBackend { 0%, 100% { transform: translate3d(0, 1px, 0) scale(0.998); } 50% { transform: translate3d(0, -3px, 0) scale(1.008); } }
@keyframes expertiseOrganicData { 0%, 100% { transform: translate3d(-1px, 1px, 0) rotate(-0.45deg) scale(0.998); } 50% { transform: translate3d(2px, -3px, 0) rotate(0.5deg) scale(1.009); } }

/* ==========================================================================
   11. TECHNOLOGY WALL
   ========================================================================== */

/* ==========================================================================
   12. WHY WORK WITH US (Stable Grid Architecture)
   ========================================================================== */

/* The Core Grid */

/* Soften the card shell - Let Elementor's UI handle the flexbox padding/gaps naturally */

/* Clean Title Hover */

.why-static-card:hover .why-panel-title .elementor-heading-title {
    color: var(--color-brand-sky, #32C0E9) !important;
}

/* Clean Description */

/* Restored Divider Physics */

.why-static-card:hover .why-panel-rule .elementor-widget-container,
.why-static-card:hover .why-panel-rule .elementor-spacer-inner {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

/* Responsive Grid */

/* ==========================================
   Restored Divider Physics (Bulletproof)
   ========================================== */

/* 1. Force the gradient and dimensions onto the main class */

/* 2. Hover Expansion */
.why-static-card:hover .why-panel-rule {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

/* 3. Failsafe: Hide Elementor's internal spacer elements so they don't block the background */

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.testimonials-section { padding: var(--section-space) 0 var(--section-space-end); overflow: hidden; background: var(--color-page); }
.testimonials-shell { width: min(100%, 1280px); margin: 0 auto; padding: 0 var(--page-gutter); }
.testimonials-header { margin-bottom: 64px; text-align: center; }
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.testimonial-card { padding: 48px; border: 1px solid rgba(255,255,255,0.13); border-radius: 24px; background: rgba(255,255,255,0.02); }
.testimonial-quote-mark { font-family: Georgia, serif; font-size: 80px; color: var(--color-brand-sky); line-height: 0.5; }
.testimonial-quote { font-size: 24px; font-weight: 400; line-height: 1.5; color: #ffffff; margin-top: 24px; text-wrap: balance; }
.testimonial-person { margin-top: 32px; display: flex; align-items: center; gap: 16px; }
.testimonial-logo-slot img { max-height: 48px; filter: brightness(0) invert(1); }

/* ==========================================================================
   14. CONTACT & FOOTER
   ========================================================================== */
.contact-conclusion { padding: clamp(100px, 10vw, 160px) 0; background: #04111c; color: #ffffff; }
.contact-conclusion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.contact-kicker { color: var(--color-brand-sky); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; }
.contact-lead { font-size: 18px; color: rgba(226, 244, 252, 0.76); margin-top: 24px; }
.contact-detail-row { display: grid; grid-template-columns: 120px 1fr; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.contact-form-panel { padding: 40px; border-radius: 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.contact-field input, .contact-field textarea { width: 100%; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); background: transparent; color: #fff; padding: 12px 0; margin-bottom: 24px; }
/* Footer styles moved to /css/global-footer.css (Elementor Theme Builder
   template 844, ported from the design prototype). The old four-column
   block that lived here was never rendered by any page. */

@media (max-width: 820px) { 
  .contact-conclusion-grid { grid-template-columns: 1fr; } 
}

/* ==========================================================================
   ARCHITECT FIX: Two-Column Testimonial Layout
   ========================================================================== */

/* 1. The Card Shell */
.testimonial-card {
    padding: clamp(32px, 4vw, 48px) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    height: 100% !important; /* Ensure all cards stretch equally in a carousel */
}

/* 2. The Inner Two-Column Flex Container */
.testimonial-card-front {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(32px, 5vw, 64px) !important;
    height: 100%;
}

/* 3. The Left Column (Logo + Author) */
.testimonial-brand-column {
    flex: 0 0 clamp(180px, 25%, 260px) !important; /* Locks width between 180px and 260px */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Pushes logo up, author down */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: clamp(24px, 4vw, 40px);
}

.testimonial-bestbuy-logo {
    max-height: 48px !important;
    width: auto !important;
    filter: brightness(0) invert(1); /* Makes logos white for dark mode */
}

.testimonial-person {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 32px;
}

.testimonial-person strong {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
}

.testimonial-person span {
    color: var(--color-text-secondary, #AECBDE);
    font-size: 14px;
    line-height: 1.4;
}

/* 4. The Right Column (Quote) */
.testimonial-quote-column {
    flex: 1 !important; /* Consumes remaining space */
    display: flex !important;
    align-items: center !important; /* Vertically centers the quote */
}

.testimonial-quote {
    font-size: clamp(20px, 2vw, 24px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-wrap: balance;
}

/* 5. Mobile Responsive Stacking */
@media (max-width: 768px) {
    .testimonial-card-front {
        flex-direction: column !important;
        gap: 32px !important;
    }
    .testimonial-brand-column {
        flex: auto !important;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 32px;
    }
}

/* ==========================================================================
   ARCHITECT FIX: Platforms Marquee - Universal Tooltips & Infinite Loop
   ========================================================================== */

/* 1. Full Width & Masking (Bypass Elementor) */

/* Add vertical breathing room so tooltips aren't hidden */

/* 2. Track Math & Universal Pause */

/* Both rows pause on hover */

/* 3. Infinite Loop Keyframes (-50% mapping for cloned tracks) */

/* 4. Logo Sizes & Tile Rendering */

/* 5. Universal Tooltips (Both Rows) */

/* ==========================================================================
   ARCHITECT CONTROL PANEL: Tech Marquee Physics
   ========================================================================== */

/* --- The Engine (Do not edit below this line) --- */

/* Apply Speed to Top Row */

/* Apply Speed to Bottom Row */

/* Apply Gap & Ensure Tooltip Visibility */

/

/* ==========================================================================
   ARCHITECT FIX: Elementor Form Native Override (Nuclear Specificity)
   ========================================================================== */

/* 1. The Glass Panel & Orb (Forced rendering) */
.contact-form-panel {
    position: relative !important;
    z-index: 1 !important;
    padding: clamp(30px, 3.6vw, 54px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: clamp(26px, 3vw, 42px) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)) !important;
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    overflow: hidden !important;
}

.contact-form-panel::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 300px !important;
    aspect-ratio: 1 !important;
    right: -100px !important;
    top: -100px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(50, 192, 233, 0.35), transparent 68%) !important;
    pointer-events: none !important;
}

/* 2. Force Elementor Form into the Grid */
.contact-form-panel .elementor-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(28px, 3vw, 40px) clamp(22px, 2.5vw, 36px) !important;
}

.contact-form-panel .elementor-form .elementor-field-group.elementor-column-100 {
    grid-column: 1 / -1 !important;
}

.contact-form-panel .elementor-form .elementor-field-type-submit {
    grid-column: 1 / -1 !important;
    margin-top: 16px !important;
}

/* 3. Label & Asterisk Styling */
.contact-form-panel .elementor-form .elementor-field-label {
    color: rgba(226, 244, 252, 0.6) !important;
    font-size: var(--type-meta, 14px) !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

.contact-form-panel .elementor-form .elementor-mark-required {
    color: var(--color-brand-sky, #32C0E9) !important;
}

/* 4. Annihilate Elementor's Default White Inputs */
.contact-form-panel .elementor-form .elementor-field-group .elementor-field {
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 !important;
    outline: 0 !important;
    padding: 0 0 14px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: var(--type-body, 18px) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    transition: border-color .3s ease, box-shadow .3s ease !important;
}

.contact-form-panel .elementor-form .elementor-field-group textarea.elementor-field {
    min-height: 132px !important;
    resize: vertical !important;
}

.contact-form-panel .elementor-form .elementor-field-group .elementor-field:focus {
    border-bottom-color: var(--color-brand-sky, #32C0E9) !important;
    box-shadow: 0 1px 0 var(--color-brand-turquoise, #0BD3C5) !important;
}

/* 5. The Glowing Submit Button Override */
.contact-form-panel .elementor-form .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    min-height: 52px !important;
    padding: 13px 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    background-image: linear-gradient(105deg, var(--color-brand-deep-blue, #00416A) 0%, var(--color-brand-headline-blue, #0083C1) 24%, var(--color-brand-sky, #32C0E9) 48%, var(--color-brand-turquoise, #0BD3C5) 72%, var(--color-brand-purple, #976AB8) 100%) !important;
    background-size: 220% 100% !important;
    background-position: 0% 50% !important;
    color: #ffffff !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: var(--type-button, 18px) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 14px 34px rgba(0, 131, 193, 0.25) !important;
    transition: transform .28s ease, box-shadow .32s ease, background-position .58s cubic-bezier(.22,1,.36,1) !important;
}

.contact-form-panel .elementor-form .elementor-button:hover,
.contact-form-panel .elementor-form .elementor-button:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 44px rgba(11, 211, 197, 0.25), 0 10px 28px rgba(0, 131, 193, 0.24) !important;
    background-position: 100% 50% !important;
}
/* ==========================================================================
   ARCHITECT FIX: Contact Section Left Column (Information)
   ========================================================================== */

/* 1. Layout & Spacing */
.contact-conclusion .contact-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.contact-conclusion .contact-heading {
    margin: 0 0 40px 0 !important;
    font-family: var(--font-heading, sans-serif) !important;
    font-size: var(--type-section) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* 2. The Border Engine (Using hardcoded RGBA to prevent variable failure) */
.contact-conclusion .contact-details {
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    width: 100% !important;
}

.contact-conclusion .contact-detail-row {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 3. Typography & Visual Hierarchy */
.contact-conclusion .contact-detail-label {
    color: rgba(226, 244, 252, 0.6) !important; /* Muted light blue */
    font-family: var(--font-body, sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

.contact-conclusion .contact-detail-value,
.contact-conclusion .contact-detail-value a {
    color: #ffffff !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

/* 4. Animated Premium Link Underlines */
.contact-conclusion .contact-detail-value a {
    position: relative !important;
    display: inline !important;
    background-image: linear-gradient(90deg, var(--color-brand-sky, #32C0E9), var(--color-brand-turquoise, #0BD3C5)) !important;
    background-repeat: no-repeat !important;
    background-size: 0 1px !important;
    background-position: 0 100% !important;
    padding-bottom: 2px !important;
    transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease !important;
}

.contact-conclusion .contact-detail-value a:hover,
.contact-conclusion .contact-detail-value a:focus-visible {
    color: var(--color-brand-sky, #32C0E9) !important;
    background-size: 100% 1px !important;
}

/* 5. Mobile Responsiveness */
@media (max-width: 768px) {
    .contact-conclusion .contact-detail-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ==========================================================================
   Elementor Form: 100% Container Stretch & Precise Button Sizing
   ========================================================================== */

/* 1. Force the Form Element and Wrapper to occupy 100% of the Container */
selector .elementor-form,
selector .elementor-form-fields-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* 2. Ensure individual field wrappers span 100% unless specified otherwise */
selector .elementor-field-group {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3. Reset Button Wrapper & Fix Oversized Button */
selector .elementor-field-type-submit {
  width: 100% !important; /* Change to 'auto' or 'fit-content' if button should not be full-width */
  display: flex;
  justify-content: flex-start; /* Options: flex-start, center, flex-end */
}

selector .elementor-button {
  /* Dimensions & Scaling */
  width: 100%; /* Set to 'auto' if you want a compact button */
  max-width: 100%;
  
  /* Reset Padding & Typography scale override */
  padding: clamp(12px, 1.2vw, 16px) clamp(24px, 2vw, 32px) !important;
  font-size: clamp(0.875rem, 1vw, 1rem) !important;
  line-height: 1.2 !important;
  height: auto !important;
  
  /* Layout Hygiene */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   ABOUT PAGE
   Sections unique to /about. Home-page conventions: widgets carry content +
   a class only; all visual styling lives here.
   ========================================================================== */

/* --- Shared ------------------------------------------------------------- */
.section-heading-left .elementor-heading-title,
.section-heading-left { text-align: left; margin-inline: 0; }

.section-accent-line .elementor-divider-separator,
.mission-accent-line .elementor-divider-separator,
.apple-accent-line .elementor-divider-separator,
.contact-accent-line .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 96px;
}
.section-accent-line, .mission-accent-line { --divider-align: center; }
.apple-accent-line .elementor-divider,
.contact-accent-line .elementor-divider { justify-content: flex-start; }
.apple-accent-line .elementor-divider-separator,
.contact-accent-line .elementor-divider-separator { width: 64px; }

/* --- Hero --------------------------------------------------------------- */
/* --- Mission ------------------------------------------------------------ */
.mission-statement h2 {
  font-family: var(--font-heading);
  font-size: var(--type-section);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.75px;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}
.mission-statement .mission-ideas,
.mission-statement .mission-connections { color: var(--color-brand-sky); }
.mission-statement .mission-life { color: var(--color-brand-turquoise); }
.mission-mark img { width: 150px; height: auto; }

@media (max-width: 767px) {
  .page-id-691 .mission-orbit { width: 268px; margin-top: 28px; }
  .page-id-691 .mission-mark { margin-top: -268px !important; height: 268px; max-width: 268px; }
  .page-id-691 .mission-mark img { width: 98px; }
}

/* --- Apple story (two-column: copy left, image right, equal height) ----- */
/* Left column: sizes the row. */
/* Right column: stretches to the copy column's height. */
.page-id-691 #apple-heading {
  margin: 0 0 28px;
  max-width: none;
  text-align: left;
  color: #f4fbff;
  font-family: var(--font-heading);
  font-size: var(--type-section);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
/* Tablet and below: stack to a single column, image under the copy. */
@media (max-width: 1024px) {
  .page-id-691 #apple-heading { font-size: 42px; line-height: 1.12; }
}
@media (max-width: 700px) {
  .page-id-691 #apple-heading { font-size: 34px; line-height: 1.12; }
}

/* --- Our story timeline (about-story-moments) --------------------------- */
/* Rebuilt from the design source: atimi-about-styles + about-v121 route
   layer, about-v141 white icons, about-v164 icon centring and about-v165
   route clearance. v165 is the last layer and wins. */
.page-id-691 .about-story-moments {
  --moment-route: rgba(174, 203, 222, 0.42);
  --moment-line: rgba(226, 244, 252, 0.92);
  --story-icon-size: 58px;
  --story-route-top: 126px;
  position: relative;
  height: auto;
  min-height: 0;
  padding: var(--section-space) 0 var(--section-space-end);
  background: var(--color-page);
  color: var(--color-text-primary);
  overflow: clip;
}
.page-id-691 .about-story-moments__shell {
  width: min(1280px, calc(100% - 2 * var(--page-gutter)));
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.page-id-691 .about-story-moments .timeline-flow__head {
  display: flex;
  justify-content: center;
  margin: 0 0 64px;
  padding: 0;
  text-align: center;
}
.page-id-691 .about-story-moments .timeline-flow__head .section-heading[data-section-heading-reveal],
.page-id-691 .about-story-moments .timeline-flow__head .section-heading,
.page-id-691 .about-story-moments .timeline-flow__head .section-heading-group {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}
.page-id-691 .about-story-moments__rows {
  display: grid;
  gap: 80px;
}
.page-id-691 .about-story-moments__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  min-height: 520px;
  padding: 0;
  isolation: isolate;
  overflow: visible;
}
/* Route layer: one per row, holds the curve and the three pointers. */
.page-id-691 .about-story-moments__row > .elementor-widget-html {
  position: absolute;
  z-index: 3;
  top: var(--story-route-top);
  left: 0;
  width: 100%;
  height: 176px;
  overflow: visible;
  pointer-events: none;
}
.page-id-691 .about-story-route-layer { position: absolute; inset: 0; overflow: visible; }
.page-id-691 .about-story-route-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page-id-691 .about-story-route-base,
.page-id-691 .about-story-route-draw {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.page-id-691 .about-story-route-base { stroke: var(--moment-route); opacity: 0.08; }
.page-id-691 .about-story-route-draw {
  stroke: var(--moment-line);
  filter: drop-shadow(0 0 5px rgba(50, 192, 233, 0.22));
}
/* The route is revealed by a clip rect that sweeps left to right. Dashes are
   unreliable here because non-scaling-stroke resolves dash lengths in screen
   units, which do not match the normalised path length. */
.page-id-691 .about-story-route-clip {
  width: 0;
  transition: width 1400ms linear;
}
.page-id-691 .about-story-moments__row.is-route-active .about-story-route-clip { width: 1120px; }
.page-id-691 .about-story-route-pointer {
  --pointer-accent: #32C0E9;
  position: absolute;
  z-index: 5;
  left: calc(var(--pointer-x) * 1%);
  top: calc(var(--pointer-y) * 1px);
  width: 28px;
  height: 28px;
  background: var(--pointer-accent);
  border: 8px solid var(--color-page);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.78);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pointer-accent) 18%, transparent),
              0 0 18px color-mix(in srgb, var(--pointer-accent) 72%, transparent),
              0 0 34px color-mix(in srgb, var(--pointer-accent) 36%, transparent);
  transition: opacity 220ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-id-691 .about-story-moments__row.is-route-active .about-story-route-pointer {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* Each dot lights exactly as the sweep edge crosses its x. The clip runs
   linearly from user-x -40 to 1080 over 1400ms, so the delay for a point at
   user-x X is 1400 * (X + 40) / 1120. Points sit at 166.67, 500 and 833.33. */
.page-id-691 .about-story-route-pointer:nth-of-type(1) { transition-delay: 258ms; }
.page-id-691 .about-story-route-pointer:nth-of-type(2) { transition-delay: 675ms; }
.page-id-691 .about-story-route-pointer:nth-of-type(3) { transition-delay: 1092ms; }
/* Superseded by the route layer in the source; retired here. */
.page-id-691 .about-story-moments__marker { display: none !important; }
/* Milestone column. */
.page-id-691 .about-story-moments__item {
  --accent: #32C0E9;
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  padding-inline: clamp(14px, 1.75vw, 28px);
  border: 0;
  box-sizing: border-box;
}
.page-id-691 .about-story-moments__row > .about-story-moments__item:first-of-type { padding-left: 0; }
.page-id-691 .about-story-moments__row > .about-story-moments__item:last-of-type { padding-right: 0; }
/* The decorative html widget is child 1, so columns are children 2 to 4. */
.page-id-691 .about-story-moments__item:nth-child(2) { --column-index: 0; }
.page-id-691 .about-story-moments__item:nth-child(3) { --column-index: 1; }
.page-id-691 .about-story-moments__item:nth-child(4) { --column-index: 2; }
/* Accent colours, per the design's per-milestone sequence. */
.page-id-691 .about-story-moments__row:nth-of-type(1) .about-story-moments__item:nth-child(2) { --accent: #976AB8; }
.page-id-691 .about-story-moments__row:nth-of-type(1) .about-story-moments__item:nth-child(3) { --accent: #10D1C9; }
.page-id-691 .about-story-moments__row:nth-of-type(1) .about-story-moments__item:nth-child(4) { --accent: #CEFB04; }
.page-id-691 .about-story-moments__row:nth-of-type(2) .about-story-moments__item:nth-child(2) { --accent: #32C0E9; }
.page-id-691 .about-story-moments__row:nth-of-type(2) .about-story-moments__item:nth-child(3) { --accent: #976AB8; }
.page-id-691 .about-story-moments__row:nth-of-type(2) .about-story-moments__item:nth-child(4) { --accent: #10D1C9; }
.page-id-691 .about-story-moments__row:nth-of-type(3) .about-story-moments__item:nth-child(2) { --accent: #CEFB04; }
.page-id-691 .about-story-moments__row:nth-of-type(3) .about-story-moments__item:nth-child(3) { --accent: #32C0E9; }
.page-id-691 .about-story-moments__row:nth-of-type(3) .about-story-moments__item:nth-child(4) { --accent: #976AB8; }

/* Icon: 58px ring with two counter-rotating orbits, centred above the route. */
.page-id-691 .about-story-moments__icon {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--story-icon-size);
  height: var(--story-icon-size);
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.52);
  background: rgb(255 255 255 / 0.07);
  box-shadow: 0 12px 30px rgb(255 255 255 / 0.08);
  color: #FFFFFF;
  transform: translateX(-50%) translateY(22px) scale(0.84);
  opacity: 0;
  transition: opacity 430ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, filter 280ms ease;
}
.page-id-691 .about-story-moments__icon::before,
.page-id-691 .about-story-moments__icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.52);
  pointer-events: none;
  animation: aboutStoryIconOrbit 8s linear infinite;
}
.page-id-691 .about-story-moments__icon::before { inset: -7px; border-top-color: #FFFFFF; }
.page-id-691 .about-story-moments__icon::after { inset: -13px; opacity: 0.55; border-bottom-color: #FFFFFF; animation-duration: 12s; animation-direction: reverse; }
.page-id-691 .about-story-moments__icon svg { width: 26px; height: 26px; overflow: visible; }
.page-id-691 .about-story-moments__icon svg * {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.page-id-691 .about-story-moments__item:is(:hover, :focus-within) .about-story-moments__icon {
  border-color: #FFFFFF;
  background: rgb(255 255 255 / 0.11);
  filter: drop-shadow(0 0 15px rgb(255 255 255 / 0.24));
}
@keyframes aboutStoryIconOrbit { to { transform: rotate(360deg); } }
/* Year sits below the 176px route band, per about-v165. */
.page-id-691 .about-story-moments__year .elementor-heading-title,
.page-id-691 .about-story-moments__year {
  position: relative;
  z-index: 3;
  max-width: none;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.page-id-691 .about-story-moments__year { margin-top: 328px; }
.page-id-691 .about-story-moments__copy {
  width: 100%;
  max-width: none;
  margin: 24px 0 0;
}
.page-id-691 .about-story-moments__copy,
.page-id-691 .about-story-moments__copy .elementor-widget-container { color: var(--color-text-primary); }
.page-id-691 .about-story-moments__copy p {
  margin: 0;
  /* Milestone copy matches the year, not the muted body colour. */
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Entrance: staggered per column once the row enters view. */
.page-id-691 .about-story-moments__year,
.page-id-691 .about-story-moments__copy {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 430ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-id-691 .about-story-moments__row.is-route-active .about-story-moments__year,
.page-id-691 .about-story-moments__row.is-route-active .about-story-moments__copy {
  opacity: 1;
  transform: none;
  transition-delay: calc(620ms + (var(--column-index, 0) * 155ms));
}
.page-id-691 .about-story-moments__row.is-route-active .about-story-moments__icon {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition-delay: calc(620ms + (var(--column-index, 0) * 155ms));
}
/* Elementor editor and reduced motion: never hide content. */
body.elementor-editor-active.page-id-691 .about-story-moments__year,
body.elementor-editor-active.page-id-691 .about-story-moments__copy,
body.elementor-editor-preview.page-id-691 .about-story-moments__year,
body.elementor-editor-preview.page-id-691 .about-story-moments__copy,
body.elementor-editor-active.page-id-691 .about-story-route-pointer,
body.elementor-editor-preview.page-id-691 .about-story-route-pointer {
  opacity: 1 !important;
  transform: none !important;
}
body.elementor-editor-active.page-id-691 .about-story-moments__icon,
body.elementor-editor-preview.page-id-691 .about-story-moments__icon {
  opacity: 1 !important;
  transform: translateX(-50%) !important;
}
body.elementor-editor-active.page-id-691 .about-story-route-clip,
body.elementor-editor-preview.page-id-691 .about-story-route-clip { width: 1120px !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .page-id-691 .about-story-moments__year,
  .page-id-691 .about-story-moments__copy,
  .page-id-691 .about-story-route-pointer { opacity: 1 !important; transform: none !important; transition: none !important; }
  .page-id-691 .about-story-route-pointer { transform: translate(-50%, -50%) !important; }
  .page-id-691 .about-story-moments__icon { opacity: 1 !important; transform: translateX(-50%) !important; transition: none !important; }
  .page-id-691 .about-story-moments__icon::before,
  .page-id-691 .about-story-moments__icon::after { animation: none !important; }
  .page-id-691 .about-story-route-clip { width: 1120px !important; transition: none !important; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .page-id-691 .about-story-moments { --story-route-top: 104px; --story-icon-size: 50px; }
  .page-id-691 .about-story-moments__rows { gap: 68px; }
  .page-id-691 .about-story-moments__row { min-height: 470px; }
  .page-id-691 .about-story-moments__row > .elementor-widget-html { height: 148px; }
  .page-id-691 .about-story-moments__year { margin-top: 284px; }
  .page-id-691 .about-story-moments__year .elementor-heading-title { font-size: clamp(26px, 3vw, 38px); }
  .page-id-691 .about-story-moments__copy,
.page-id-691 .about-story-moments__copy .elementor-widget-container { color: var(--color-text-primary); }
.page-id-691 .about-story-moments__copy p { font-size: clamp(14px, 1.52vw, 16px); }
  .page-id-691 .about-story-route-pointer { width: 22px; height: 22px; border-width: 2px; }
  .page-id-691 .about-story-moments__icon svg { width: 22px; height: 22px; }
}
@media (max-width: 760px) {
  .page-id-691 .about-story-moments__shell { width: calc(100% - 2 * var(--page-gutter)); }
  .page-id-691 .about-story-moments .timeline-flow__head { margin-bottom: 52px; }
  .page-id-691 .about-story-moments__rows { position: relative; display: block; padding-left: 0; }
  .page-id-691 .about-story-moments__rows::before {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 23px;
    left: 8px;
    width: 1px;
    background: var(--moment-route);
  }
  .page-id-691 .about-story-moments__row { display: block; min-height: 0; }
  .page-id-691 .about-story-moments__row > .elementor-widget-html { display: none; }
  .page-id-691 .about-story-moments__item {
    display: grid;
    grid-template-columns: minmax(96px, .45fr) minmax(0, 1.55fr);
    column-gap: 20px;
    padding: 0 0 48px;
    border: 0;
  }
  .page-id-691 .about-story-moments__icon {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    width: 46px;
    height: 46px;
    margin: 0 0 14px;
    transform: none;
    opacity: 1;
  }
  .page-id-691 .about-story-moments__row.is-route-active .about-story-moments__icon { transform: none; }
  .page-id-691 .about-story-moments__icon svg { width: 21px; height: 21px; }
  .page-id-691 .about-story-moments__year { grid-column: 1; grid-row: 1; margin-top: 0; }
  .page-id-691 .about-story-moments__year .elementor-heading-title { font-size: clamp(29px, 9vw, 42px); line-height: 1.04; }
  .page-id-691 .about-story-moments__copy { grid-column: 2; max-width: 35ch; margin: 0; padding-top: 1px; }
}
/* --- Why work with us --------------------------------------------------- */

.why-static-card:hover {
  border-color: rgba(50, 192, 233, 0.42);
  background: rgba(255, 255, 255, 0.06);
}
.why-panel-rule .elementor-divider { justify-content: flex-start; }
.why-panel-rule .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 48px;
}

/* --- Quality ------------------------------------------------------------ */
.quality-copy {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  line-height: 1.6;
  color: rgba(243, 248, 250, 0.92);
  text-align: center;
  text-wrap: balance;
}
.quality-mark img { width: 96px; height: auto; }

/* --- Values ------------------------------------------------------------- */
.value-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 32px;
}
.value-index .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--color-brand-sky);
}
.value-title .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.25px;
  color: var(--color-brand-sky);
}
.value-accent-line .elementor-divider { justify-content: flex-start; }
.value-accent-line .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 48px;
}
.value-subtitle {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-primary);
}
.value-description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(226, 244, 252, 0.58);
}

/* --- Testimonials (static grid variant) --------------------------------- */
#testimonials .testimonial-card { padding: 32px; border-radius: 18px; }
.testimonial-logo img { width: 110px; height: auto; }
#testimonials .testimonial-person { display: block; margin-top: 16px; }
#testimonials .testimonial-person .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.testimonial-role {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  color: var(--color-brand-sky);
}
.testimonial-rule .elementor-divider { justify-content: flex-start; }
.testimonial-rule .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 40px;
}
#testimonials .testimonial-quote {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(243, 248, 250, 0.92);
  margin-top: 0;
}

/* --- Contact ------------------------------------------------------------ */
.contact-form-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 36px;
}
.contact-form .elementor-field-group > label {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  color: rgba(243, 248, 250, 0.92);
  margin-bottom: 8px;
}
.contact-form .elementor-field-textual {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: var(--color-text-primary);
  padding: 12px 14px;
}
.contact-form .elementor-field-textual:focus {
  border-color: var(--color-brand-sky);
  outline: none;
}
.contact-form .elementor-field-textual::placeholder { color: rgba(226, 244, 252, 0.42); }

/* --- Footer (page-level; retire when a Theme Builder footer exists) ------ */
.site-footer .footer-logo img { width: 124px; height: auto; }
.footer-brand-copy,
.footer-legal {
  font-family: var(--font-body);
  color: rgba(226, 244, 252, 0.58);
}
.footer-brand-copy { font-size: 16px; }
.footer-legal { font-size: var(--type-meta); }
.footer-rule .elementor-divider-separator {
  border-block-start: 1px solid rgba(255, 255, 255, 0.10);
  width: 100%;
}
.footer-links .elementor-icon-list-items { justify-content: flex-end; gap: 24px; }
.footer-links .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  color: rgba(226, 244, 252, 0.58);
}
.footer-links a:hover .elementor-icon-list-text { color: var(--color-brand-sky); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .why-static-card, .value-card, #testimonials .testimonial-card { padding: 28px; }
  .contact-form-panel { padding: 28px; }
}
@media (max-width: 767px) {
  .why-static-card, .value-card, #testimonials .testimonial-card { padding: 24px 20px; }
  .contact-form-panel { padding: 24px 20px; }
  .footer-links .elementor-icon-list-items { justify-content: flex-start; }
}

/* ==========================================================================
   ABOUT PAGE OVERRIDES
   Scoped to the About page only (.page-id-691) so Home is never affected.
   Matches classes as actually applied: `hero` / `hero-title` are classes here.
   ========================================================================== */

/* --- Reveal / stagger scroll-in (shared across About sections) --------- */
.page-id-691 .reveal { opacity: 0; transform: translateY(26px); transition: opacity .72s ease, transform .92s var(--ease-standard); }
.page-id-691 .reveal.is-visible { opacity: 1; transform: none; }
.page-id-691 .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .72s ease, transform .92s var(--ease-standard); }
.page-id-691 .stagger.is-visible > * { opacity: 1; transform: none; }
.page-id-691 .stagger.is-visible > *:nth-child(2) { transition-delay: .10s; }
.page-id-691 .stagger.is-visible > *:nth-child(3) { transition-delay: .20s; }
.page-id-691 .stagger.is-visible > *:nth-child(4) { transition-delay: .30s; }

/* Elementor editor: always show reveal/stagger content. The scroll JS does not
   run reliably inside the editor iframe, so without this the widgets are
   invisible (opacity:0) and cannot be selected or edited. */
body.elementor-editor-active .reveal,
body.elementor-editor-active .stagger > *,
body.elementor-editor-preview .reveal,
body.elementor-editor-preview .stagger > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body.elementor-editor-active [data-section-heading-reveal] .section-heading-reveal-word-inner,
body.elementor-editor-preview [data-section-heading-reveal] .section-heading-reveal-word-inner {
  opacity: 1 !important;
  transform: none !important;
}
body.elementor-editor-active #mission-heading .mission-copy-word,
body.elementor-editor-preview #mission-heading .mission-copy-word {
  color: #FFFFFF !important;
}

/* --- Hero (mark-hero--cinematic: photo layer + gradient wash) ---------- */
.page-id-691 .mark-hero.mark-hero--cinematic {
  position: relative;
  min-height: 702px;
  background-color: #02090F;
  isolation: isolate;
  overflow: hidden;
}
.page-id-691 .mark-hero.mark-hero--cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2, 9, 15, 0.92) 0%,
      rgba(2, 9, 15, 0.78) 28%,
      rgba(2, 9, 15, 0.48) 52%,
      rgba(2, 9, 15, 0.14) 78%,
      rgba(2, 9, 15, 0.06) 100%),
    linear-gradient(180deg,
      rgba(2, 9, 15, 0.30) 0%,
      rgba(2, 9, 15, 0.02) 36%,
      rgba(2, 9, 15, 0.12) 68%,
      rgba(2, 9, 15, 0.55) 100%);
}
.page-id-691 .mark-hero.mark-hero--cinematic::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 185px;
  z-index: 1;
  opacity: 0.45;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(2, 9, 15, 0.5));
}
.page-id-691 .mark-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-id-691 .mark-hero__media,
.page-id-691 .mark-hero__media .e-con-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
}
.page-id-691 .mark-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-id-691 .mark-hero__image .elementor-widget-container,
.page-id-691 .mark-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-id-691 .mark-hero__media img {
  object-fit: cover;
  object-position: center 48%;
}
.page-id-691 .mark-hero__layout {
  position: relative;
  z-index: 2;
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center;
  gap: 0 !important;
  width: min(100% - 40px, 1280px) !important;
  margin-inline: auto;
  min-height: 702px;
  padding-block: 132px 84px;
}
.page-id-691 .mark-hero__copy h1 {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 500;
  line-height: 84.8px;
  letter-spacing: -1.2px;
  color: var(--color-text-primary);
  max-width: 462px;
  margin: 0;
}
.page-id-691 .mark-hero__intro {
  max-width: 420px !important;
  margin: 28px 0 0 !important;
  text-align: left !important;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
@media (max-width: 1024px) {
  .page-id-691 .mark-hero__layout { gap: 0 !important; }
  .page-id-691 .mark-hero__copy h1 {
    font-size: 64px;
    line-height: 67.84px;
    max-width: 380px;
  }
}
@media (max-width: 767px) {
  .page-id-691 .mark-hero.mark-hero--cinematic,
  .page-id-691 .mark-hero__layout { min-height: 560px; }
  .page-id-691 .mark-hero__layout { padding-block: 118px 72px; }
  .page-id-691 .mark-hero.mark-hero--cinematic::before {
    background:
      linear-gradient(180deg,
        rgba(2, 9, 15, 0.62) 0%,
        rgba(2, 9, 15, 0.42) 42%,
        rgba(2, 9, 15, 0.78) 100%);
  }
  .page-id-691 .mark-hero__copy h1 {
    font-size: 48px;
    line-height: 50.88px;
    max-width: none;
  }
  .page-id-691 .mark-hero__intro { max-width: none !important; margin: 22px 0 0 !important; }
}
/* --- Mission (heading reveal, orbit mark) ------------------------------ */
.page-id-691 .section-heading[data-section-heading-reveal]:not(.section-heading--left) {
  width: fit-content;
  max-width: min(22ch, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--type-section);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: inherit;
  text-wrap: balance;
  overflow: visible;
}
.page-id-691 .mission-centered__heading-line,
.page-id-691 .atimi-heading-line { display: none; }
.page-id-691 .section-heading-reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.page-id-691 .section-heading-reveal-word-inner {
  display: inline-block;
  transform: translateY(112%);
  opacity: .01;
  transition: transform 780ms cubic-bezier(.22,1,.36,1), opacity 780ms cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--word-index, 0) * 55ms);
  will-change: transform, opacity;
}
.page-id-691 [data-section-heading-reveal].is-heading-visible .section-heading-reveal-word-inner,
.page-id-691 [data-section-heading-reveal].is-heading-fallback .section-heading-reveal-word-inner {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .page-id-691 .section-heading-reveal-word-inner { transition: none; transform: none; opacity: 1; }
}

/* Mission word-by-word scroll highlight + emphasis coloring */
.page-id-691 #mission-heading .mission-copy-word {
  color: #9C9E9F;
  transition: color .5s ease;
}
.page-id-691 #mission-heading .mission-copy-word.is-highlighted { color: #FFFFFF; }
.page-id-691 #mission-heading .mission-copy-word.is-emphasis-word.is-highlighted { color: var(--color-brand-sky); font-weight: 600; }
.page-id-691 #mission-heading .mission-copy-word.is-mission-ideas.is-highlighted,
.page-id-691 .mission-centered .mission-ideas,
.page-id-691 .mission-centered .mission-connections { color: #32C0E9; }
.page-id-691 #mission-heading .mission-copy-word.is-mission-life.is-highlighted,
.page-id-691 .mission-centered .mission-life { color: #CEFB04; }

/* Orbit visual: glow + 3 rings + 2 orbit rings + Atimi mark image */
.page-id-691 .mission-centered__hero-animation {
  position: relative;
  width: 100%;
  margin-top: 48px;
  display: grid;
  place-items: center;
}
.page-id-691 .mission-centered .mark-hero__visual {
  position: relative;
  width: min(100%, 580px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: visible;
  pointer-events: none;
}
.page-id-691 .mark-hero__glow {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50,192,233,.17) 0%, rgba(11,211,197,.075) 42%, transparent 72%);
  filter: blur(18px);
  opacity: .82;
  animation: aboutMarkGlow 12s var(--ease-standard) infinite alternate;
}
.page-id-691 .mark-hero__ring,
.page-id-691 .mark-hero__orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  transform-origin: center;
  will-change: transform;
}
.page-id-691 .mark-hero__ring::before,
.page-id-691 .mark-hero__orbit::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand-sky);
  box-shadow: 0 0 18px rgba(50,192,233,.58);
  transform: translateX(-50%);
}
.page-id-691 .mark-hero__ring::after,
.page-id-691 .mark-hero__orbit::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-turquoise);
  box-shadow: 0 0 16px rgba(11,211,197,.50);
  transform: translateY(-50%);
}
.page-id-691 .mark-hero__ring--outer { inset: 3%; border-color: rgba(255,255,255,.13); animation: aboutMarkSpin 34s linear infinite; }
.page-id-691 .mark-hero__ring--mid { inset: 17%; border-color: rgba(50,192,233,.27); animation: aboutMarkSpinReverse 27s linear infinite; }
.page-id-691 .mark-hero__ring--inner { inset: 31%; border-color: rgba(11,211,197,.25); animation: aboutMarkSpin 21s linear infinite; }
.page-id-691 .mark-hero__orbit--one { width: 88%; height: 88%; border-style: dashed; border-color: rgba(50,192,233,.23); animation: aboutMarkSpinReverse 42s linear infinite; }
.page-id-691 .mark-hero__orbit--two { width: 59%; height: 59%; border-style: dashed; border-color: rgba(11,211,197,.25); animation: aboutMarkSpin 29s linear infinite; }
/* Neutralise Elementor container defaults so inset-based ring sizing works. */
.page-id-691 .mission-centered .mark-hero__visual > .e-con-inner {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}
.page-id-691 .mark-hero__glow,
.page-id-691 .mark-hero__ring,
.page-id-691 .mark-hero__orbit {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  --width: auto;
}
/* Centre orbits with inset/margin, not transform - their spin animation owns transform. */
.page-id-691 .mark-hero__orbit {
  inset: auto auto auto 50%;
  top: 50%;
  transform: none;
}
.page-id-691 .mark-hero__orbit--one {
  width: 88%;
  height: 88%;
  margin-left: -44%;
  margin-top: -44%;
}
.page-id-691 .mark-hero__orbit--two {
  width: 59%;
  height: 59%;
  margin-left: -29.5%;
  margin-top: -29.5%;
}
.page-id-691 .mission-centered .mark-hero__mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(56%, 280px);
  height: auto;
  margin: 0;
  filter: drop-shadow(0 20px 50px rgba(0,131,193,.24));
  transform-origin: center;
  animation: aboutMarkFloat 8s var(--ease-standard) infinite alternate;
}
.page-id-691 .mission-centered .mark-hero__mark .elementor-widget-container,
.page-id-691 .mission-centered .mark-hero__mark img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes aboutMarkSpin { to { transform: rotate(360deg); } }
@keyframes aboutMarkSpinReverse { to { transform: rotate(-360deg); } }
@keyframes aboutMarkGlow { from { opacity: .66; transform: scale(.97); } to { opacity: .94; transform: scale(1.035); } }
@keyframes aboutMarkFloat { from { transform: translate(-50%, -50%) translate3d(0,5px,0) scale(.99); } to { transform: translate(-50%, -50%) translate3d(0,-7px,0) scale(1.01); } }
@media (max-width: 1024px) {
  .page-id-691 .mission-centered .mark-hero__visual { width: min(82vw, 520px); }
}
@media (max-width: 700px) {
  .page-id-691 .mission-centered__hero-animation { margin-top: 38px; }
  .page-id-691 .mission-centered .mark-hero__visual { width: min(92vw, 430px); }
}
@media (max-width: 430px) {
  .page-id-691 .mission-centered .mark-hero__visual { width: min(94vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .page-id-691 .mark-hero__glow,
  .page-id-691 .mark-hero__ring,
  .page-id-691 .mark-hero__orbit,
  .page-id-691 .mission-centered .mark-hero__mark { animation: none; }
}

/* --- Apple story -------------------------------------------------------- */
.apple-paragraph {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: rgba(243, 248, 250, 0.92);
}
.apple-paragraph strong { color: var(--color-text-primary); font-weight: 500; }
.apple-image img { width: 100%; height: auto; border-radius: 18px; }

/* --- Our story timeline ------------------------------------------------- */
.story-year .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: clamp(34px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.67px;
  color: var(--color-text-primary);
}
.story-accent-line .elementor-divider { justify-content: flex-start; }
.story-accent-line .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 40px;
}
.story-copy {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(226, 244, 252, 0.58);
}

/* --- Why work with us --------------------------------------------------- */

.why-static-card:hover {
  border-color: rgba(50, 192, 233, 0.42);
  background: rgba(255, 255, 255, 0.06);
}
.why-panel-rule .elementor-divider { justify-content: flex-start; }
.why-panel-rule .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 48px;
}

/* --- Quality ------------------------------------------------------------ */
.quality-copy {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  line-height: 1.6;
  color: rgba(243, 248, 250, 0.92);
  text-align: center;
  text-wrap: balance;
}
.quality-mark img { width: 96px; height: auto; }

/* --- Values ------------------------------------------------------------- */
.value-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 32px;
}
.value-index .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--color-brand-sky);
}
.value-title .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.25px;
  color: var(--color-brand-sky);
}
.value-accent-line .elementor-divider { justify-content: flex-start; }
.value-accent-line .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 48px;
}
.value-subtitle {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-primary);
}
.value-description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(226, 244, 252, 0.58);
}

/* --- Testimonials (static grid variant) --------------------------------- */
#testimonials .testimonial-card { padding: 32px; border-radius: 18px; }
.testimonial-logo img { width: 110px; height: auto; }
#testimonials .testimonial-person { display: block; margin-top: 16px; }
#testimonials .testimonial-person .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.testimonial-role {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  color: var(--color-brand-sky);
}
.testimonial-rule .elementor-divider { justify-content: flex-start; }
.testimonial-rule .elementor-divider-separator {
  border-block-start: 2px solid var(--color-brand-sky);
  width: 40px;
}
#testimonials .testimonial-quote {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(243, 248, 250, 0.92);
  margin-top: 0;
}

/* --- Contact ------------------------------------------------------------ */
.contact-form-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 36px;
}
.contact-form .elementor-field-group > label {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  color: rgba(243, 248, 250, 0.92);
  margin-bottom: 8px;
}
.contact-form .elementor-field-textual {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: var(--color-text-primary);
  padding: 12px 14px;
}
.contact-form .elementor-field-textual:focus {
  border-color: var(--color-brand-sky);
  outline: none;
}
.contact-form .elementor-field-textual::placeholder { color: rgba(226, 244, 252, 0.42); }

/* --- Footer (page-level; retire when a Theme Builder footer exists) ------ */
.site-footer .footer-logo img { width: 124px; height: auto; }
.footer-brand-copy,
.footer-legal {
  font-family: var(--font-body);
  color: rgba(226, 244, 252, 0.58);
}
.footer-brand-copy { font-size: 16px; }
.footer-legal { font-size: var(--type-meta); }
.footer-rule .elementor-divider-separator {
  border-block-start: 1px solid rgba(255, 255, 255, 0.10);
  width: 100%;
}
.footer-links .elementor-icon-list-items { justify-content: flex-end; gap: 24px; }
.footer-links .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  color: rgba(226, 244, 252, 0.58);
}
.footer-links a:hover .elementor-icon-list-text { color: var(--color-brand-sky); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .why-static-card, .value-card, #testimonials .testimonial-card { padding: 28px; }
  .contact-form-panel { padding: 28px; }
}
@media (max-width: 767px) {
  .why-static-card, .value-card, #testimonials .testimonial-card { padding: 24px 20px; }
  .contact-form-panel { padding: 24px 20px; }
  .footer-links .elementor-icon-list-items { justify-content: flex-start; }
}

/* ==========================================================================
   ABOUT PAGE OVERRIDES
   Scoped to the About page only (.page-id-691) so Home is never affected.
   Matches classes as actually applied: `hero` / `hero-title` are classes here.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------
   Source: linear wash dark-left -> clear-right, plus vertical depth and a
   bottom fade. Reproduces .mark-hero ::before / ::after exactly.          */
.page-id-691 .hero {
  position: relative;
  min-height: 702px;
  background-color: #02090F;
  isolation: isolate;
  overflow: hidden;
}
.page-id-691 .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2, 9, 15, 0.92) 0%,
      rgba(2, 9, 15, 0.78) 28%,
      rgba(2, 9, 15, 0.48) 52%,
      rgba(2, 9, 15, 0.14) 78%,
      rgba(2, 9, 15, 0.06) 100%),
    linear-gradient(180deg,
      rgba(2, 9, 15, 0.30) 0%,
      rgba(2, 9, 15, 0.02) 36%,
      rgba(2, 9, 15, 0.12) 68%,
      rgba(2, 9, 15, 0.55) 100%);
}
.page-id-691 .hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 185px;
  z-index: 1;
  opacity: 0.45;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(2, 9, 15, 0.5));
}
.page-id-691 .hero-layout {
  position: relative;
  z-index: 2;
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center;
  gap: 0 !important;
  width: min(100% - 40px, 1280px) !important;
  margin-inline: auto;
  min-height: 702px;
  padding-block: 132px 84px;
}
.page-id-691 .hero-title .elementor-heading-title,
.page-id-691 #hero-title .elementor-heading-title {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 500;
  line-height: 84.8px;
  letter-spacing: -1.2px;
  color: var(--color-text-primary);
  max-width: 462px;
  margin: 0;
}
.page-id-691 .subhead {
  max-width: 420px !important;
  margin: 28px 0 0 !important;
  text-align: left !important;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
@media (max-width: 1024px) {
  .page-id-691 .hero-layout { gap: 0 !important; }
  .page-id-691 .hero-title .elementor-heading-title,
  .page-id-691 #hero-title .elementor-heading-title {
    font-size: 64px;
    line-height: 67.84px;
    max-width: 380px;
  }
}
@media (max-width: 767px) {
  .page-id-691 .hero,
  .page-id-691 .hero-layout { min-height: 560px; }
  .page-id-691 .hero-layout { padding-block: 118px 72px; }
  .page-id-691 .hero::before {
    background:
      linear-gradient(180deg,
        rgba(2, 9, 15, 0.62) 0%,
        rgba(2, 9, 15, 0.42) 42%,
        rgba(2, 9, 15, 0.78) 100%);
  }
  .page-id-691 .hero-title .elementor-heading-title,
  .page-id-691 #hero-title .elementor-heading-title {
    font-size: 48px;
    line-height: 50.88px;
    max-width: none;
  }
  .page-id-691 .subhead { max-width: none !important; margin: 22px 0 0 !important; }
}
/* --- Mission (A): heading + mark stage ------------------------------- */
.page-id-691 .mission-accent-line { display: none !important; }
.page-id-691 .mission-statement h2 { font-family: var(--font-heading); font-size: var(--type-section); font-weight: 500; line-height: 1.12; letter-spacing: -0.75px; color: var(--color-text-primary); max-width: 705px; margin: 0 auto; text-align: center; text-wrap: balance; }
.page-id-691 .mission-ideas, .page-id-691 .mission-connections { color: #32C0E9; }
.page-id-691 .mission-life { color: #CEFB04; }
.page-id-691 .mission-mark { position: relative; width: 381px; height: 381px; margin: 40px auto 0; display: grid; place-items: center; isolation: isolate; }
.page-id-691 .mission-mark .elementor-widget-container { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.page-id-691 .mission-mark img { width: 140px; height: auto; position: relative; z-index: 3; }

/* --- Mission (B): rings, orbits, dots -------------------------------- */
@media (max-width: 767px) { .page-id-691 .mission-mark { width: 268px; height: 268px; margin-top: 28px; } .page-id-691 .mission-mark img { width: 98px; } }

/* --- Apple story ----------------------------------------------------- */
.page-id-691 .apple-accent-line { display: none !important; }
.page-id-691 .apple-layout { align-items: center !important; gap: 40px 64px !important; }
.page-id-691 .apple-copy { position: relative; flex: 0 0 410px !important; width: 410px !important; max-width: 410px !important; color: rgb(244,251,255); }
.page-id-691 .apple-copy::after { content: ''; display: block; width: 420px; max-width: 100%; height: 1px; margin-top: 40px; opacity: .54; background: linear-gradient(90deg, #32C0E9 0%, #0BD3C5 58%, #976AB8 100%); }
.page-id-691 .section-heading-left .elementor-heading-title { font-family: var(--font-heading); font-size: 50px; font-weight: 500; line-height: 56px; letter-spacing: -0.75px; color: var(--color-text-primary); text-align: left; max-width: 417px; margin: 0; }
.page-id-691 .apple-paragraph { color: rgba(237,248,252,.9); font-family: var(--font-body); font-size: 18px; line-height: 1.6; margin: 32px 0 0 !important; }
.page-id-691 .apple-image-wrap { flex: 1 1 auto !important; width: auto !important; max-width: 773px !important; }
.page-id-691 .apple-image img { width: 100%; height: auto; border-radius: 0; display: block; }
/* --- Apple story: responsive ----------------------------------------- */
@media (max-width: 1024px) {
  .page-id-691 .apple-layout { flex-direction: column !important; gap: 48px 56px !important; }
  .page-id-691 .apple-copy { flex: 1 1 100% !important; width: 100% !important; max-width: 620px !important; }
  .page-id-691 .apple-image-wrap { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  .page-id-691 .section-heading-left .elementor-heading-title { font-size: 42px; line-height: 47.04px; max-width: none; }
  .page-id-691 .apple-paragraph { margin-top: 28px !important; }
}
@media (max-width: 767px) {
  .page-id-691 .apple-layout { gap: 32px 48px !important; }
  .page-id-691 .section-heading-left .elementor-heading-title { font-size: 34px; line-height: 38.08px; }
  .page-id-691 .apple-paragraph { margin-top: 24px !important; }
  .page-id-691 .apple-copy::after { margin-top: 32px; }
}

/* --- Our story: timeline --------------------------------------------- */
/* the source has no rule under any section heading */
.page-id-691 .section-accent-line { display: none !important; }
.page-id-691 .story-accent-line { display: none !important; }
.page-id-691 #story > .e-con-inner { gap: 80px; }
.page-id-691 .story-row { display: grid !important; gap: 0 !important; align-items: start; width: 100%; }
.page-id-691 .story-row-five { grid-template-columns: repeat(5, 1fr); }
.page-id-691 .story-row:not(.story-row-five) { grid-template-columns: repeat(4, 1fr); }
.page-id-691 .story-item { padding: 0 28.8px !important; width: auto !important; max-width: none !important; }
.page-id-691 .story-year .elementor-heading-title { font-family: var(--font-heading); font-size: 44.64px; font-weight: 500; line-height: 44.64px; letter-spacing: -0.6696px; color: var(--color-text-primary); margin: 0; }
.page-id-691 .story-copy { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.87); margin: 22px 0 0 !important; max-width: 215px; }
/* --- Our story: route decoration (SVG from source) ------------------- */
.page-id-691 .story-route { grid-column: 1 / -1; }
.page-id-691 .atimi-route { position: relative; width: 100%; height: 302px; pointer-events: none; }
.page-id-691 .atr-icons { position: absolute; inset: 0 0 auto; display: grid; }
.page-id-691 .atimi-route--5 .atr-icons { grid-template-columns: repeat(5, 1fr); }
.page-id-691 .atimi-route--4 .atr-icons { grid-template-columns: repeat(4, 1fr); }
.page-id-691 .atr-icon { position: relative; justify-self: center; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.52); box-shadow: 0 12px 30px rgba(255,255,255,.08); color: #fff; }
.page-id-691 .atr-icon::before, .page-id-691 .atr-icon::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.52); pointer-events: none; animation: atimiRouteOrbit 8s linear infinite; }
.page-id-691 .atr-icon::before { inset: -7px; border-top-color: var(--accent); }
.page-id-691 .atr-icon::after { inset: -13px; opacity: .55; border-bottom-color: var(--accent); animation-duration: 12s; animation-direction: reverse; }
.page-id-691 .atr-icon svg { width: 26px; height: 26px; overflow: visible; }
.page-id-691 .atr-icon svg * { fill: none; stroke: #fff; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes atimiRouteOrbit { to { transform: rotate(360deg); } }
/* --- Our story: curve + nodes ---------------------------------------- */
.page-id-691 .atr-layer { position: absolute; top: 126px; left: 0; width: 100%; height: 176px; overflow: visible; }
.page-id-691 .atr-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page-id-691 .atr-base, .page-id-691 .atr-draw { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.page-id-691 .atr-base { stroke: rgba(255,255,255,.55); opacity: .08; }
.page-id-691 .atr-draw { stroke: rgba(255,255,255,.92); filter: drop-shadow(0 0 5px rgba(50,192,233,.22)); }
.page-id-691 .atr-dot { position: absolute; z-index: 5; left: calc(var(--px) * 1%); top: calc(var(--py) * 1px); width: 22px; height: 22px; background: var(--accent); border: 3px solid #000; border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 72%, transparent); }
/* the years clear the 302px decoration band */
.page-id-691 .story-item > .elementor-widget-heading:first-child { margin-top: 26px; }
@media (max-width: 1024px) {
  .page-id-691 .atimi-route { height: 236px; }
  .page-id-691 .atr-layer { top: 96px; height: 140px; }
  .page-id-691 .atr-icon { width: 46px; height: 46px; }
  .page-id-691 .atr-icon svg { width: 21px; height: 21px; }
  .page-id-691 .atr-dot { width: 16px; height: 16px; border-width: 2px; }
}
@media (max-width: 767px) {
  .page-id-691 .story-route { display: none !important; }
}

/* --- Our story: responsive ------------------------------------------- */
@media (max-width: 1024px) {
  .page-id-691 #story > .e-con-inner { gap: 68px; }
  .page-id-691 .story-item { padding: 0 16.2px !important; }
  .page-id-691 .story-year .elementor-heading-title { font-size: 25.11px; line-height: 25.11px; }
  .page-id-691 .story-copy { font-size: 16px; }
}
@media (max-width: 767px) {
  .page-id-691 .story-row, .page-id-691 .story-row-five { display: block !important; }
  .page-id-691 .story-item { padding: 0 0 52px !important; }
  .page-id-691 .story-year .elementor-heading-title { font-size: 21px; line-height: 26.88px; }
  .page-id-691 .story-copy { margin-top: 12px !important; max-width: none; }
}

/* --- Why work with us ------------------------------------------------ */

.page-id-691 #why-work-with-us .section-heading { margin-bottom: 64px; }

.page-id-691 .why-panel-title .elementor-heading-title { font-family: var(--font-heading); font-size: 25px; font-weight: 500; line-height: 32px; letter-spacing: -0.25px; color: var(--color-text-primary); max-width: 353px; min-height: 63.75px; margin: 0; }
.page-id-691 .why-panel-rule .elementor-divider { padding: 0; }
.page-id-691 .why-panel-rule .elementor-divider-separator { border: 0 !important; height: 1px; width: 72px; max-width: 112px; background: rgba(255,255,255,.24); border-radius: 999px; }

.page-id-691 #why-work-with-us .primary-cta { margin-top: 64px; align-self: center; }
/* --- Why work with us: responsive ------------------------------------ */
@media (max-width: 1024px) {
  
  .page-id-691 #why-work-with-us .section-heading { margin-bottom: 56px; }
  .page-id-691 .why-panel-title .elementor-heading-title { font-size: 23px; line-height: 29.44px; min-height: 0; }

}
@media (max-width: 767px) {
  
  .page-id-691 #why-work-with-us .section-heading { margin-bottom: 48px; }

}

/* --- Quality ---------------------------------------------------------- */
/* Quality and Values DO carry a rule under the heading (atimi-heading-line);
   the other sections do not. Re-enable it here only. */
.page-id-691 .atimi-heading-line { display: block !important; }
.page-id-691 .atimi-heading-line .elementor-divider { justify-content: center; padding: 0; }
.page-id-691 .atimi-heading-line .elementor-divider-separator { border: 0 !important; height: 2px; width: 96px; background: #32C0E9; margin: 24px auto 0; }
/* --- Quality: section frame + responsive ------------------------------ */

/* --- Testimonials: lighter card treatment ------------------------------- */
.page-id-691 .testimonial-card {
  padding: 32px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   8b. CASE STUDIES: keep the panel under the image
   The photo is a background-image on .case-study-visual, which IS the element
   clipped by clip-path - so it already reveals with the wipe. The dark panel
   sat on .case-study, which is never clipped, so it appeared at full size the
   moment the card scrolled in and the image wiped in afterwards.
   Clearing the panel from the card removes that early reveal. background-color
   only - the shorthand would reset the background-image Elementor sets per card.
   ========================================================================== */
.case-study { background-color: transparent !important; }
/* backdrop moved to .case-study::before - see 8c */

/* ==========================================================================
   ABOUT PAGE: WHY WORK WITH US (#about-why)
   Deliberately NOT using .why-panel-* or #why-work-with-us: the global
   why-section.css (Home) styles those bare class names with !important and
   is loaded on this page too. Fresh names keep the two independent.
   Values taken from the source render: borderless panels, 88px icons.
   ========================================================================== */

.page-id-691 .about-why-rule .elementor-divider{ padding:0; justify-content:flex-start; }

.page-id-691 .about-why-rule .elementor-divider-separator{ border:0 !important; height:1px; width:72px !important; max-width:112px; background:rgba(255,255,255,.24); border-radius:999px; }

/* --- about-why: hover + scroll highlight ------------------------------- */
/* word-by-word highlight, lit progressively by about-why-reveal.js */

.page-id-691 .about-why-desc .aw-word.is-lit{ color:var(--color-text-primary,#FFFFFF); }
/* hovering a panel brightens the whole paragraph, per the source design */
.page-id-691 .about-why-card:hover .about-why-desc .aw-word,
.page-id-691 .about-why-card:focus-within .about-why-desc .aw-word{ color:var(--color-text-primary,#FFFFFF); }
/* rule: short and grey at rest, longer and brand-coloured on hover */
.page-id-691 .about-why-rule .elementor-divider-separator{ transition:width 340ms var(--ease-emphasized), background 280ms var(--ease-standard); }
.page-id-691 .about-why-card:hover .about-why-rule .elementor-divider-separator,
.page-id-691 .about-why-card:focus-within .about-why-rule .elementor-divider-separator{ width:112px !important; background:linear-gradient(90deg,#32C0E9 0%,#0BD3C5 100%); }
/* title colour shift */

.page-id-691 .about-why-card:hover .about-why-title .elementor-heading-title,
.page-id-691 .about-why-card:focus-within .about-why-title .elementor-heading-title{ color:var(--color-brand-sky-soft,#32C0E9); }
/* icon lifts slightly */

.page-id-691 .about-why-card:hover .about-why-icon img,
.page-id-691 .about-why-card:focus-within .about-why-icon img{ transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){
  .page-id-691 .about-why-desc .aw-word{ color:var(--color-text-primary,#FFFFFF); transition:none; }
  .page-id-691 .about-why-icon img,
  .page-id-691 .about-why-rule .elementor-divider-separator{ transition:none; }
}

/* ==========================================================================
   8c. CASE STUDIES: opaque backdrop that reveals with the wipe
   .case-study-visual carries a horizontal mask-image that fades its left and
   right edges to transparent. That mask affects its background too, so a
   colour set there cannot cover the card beneath - the gap shows exactly
   where the copy sits. This adds an unmasked panel on .case-study::before
   and drives it with the same clip-path states as the visual, so it reveals
   in step with the image, stays inside the rounded card, and hides whatever
   is behind. Painted before .case-study-visual, so it sits underneath.
   ========================================================================== */
.case-study::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--color-dark-page-case-study);
  border-radius:inherit;
  clip-path:inset(99.9% 0 0 0 round clamp(28px, 3.4vw, 54px));
  transition:clip-path 1.15s cubic-bezier(.22, 1, .36, 1);
  will-change:clip-path;
}
.case-study[data-direction="from-top"]::before{ clip-path:inset(0 0 99.9% 0 round clamp(28px, 3.4vw, 54px)); }
.case-study[data-direction="from-bottom"]::before{ clip-path:inset(99.9% 0 0 0 round clamp(28px, 3.4vw, 54px)); }
.case-study.is-visible::before{ clip-path:inset(0 0 0 0 round clamp(28px, 3.4vw, 54px)); }
@media (prefers-reduced-motion: reduce){
  .case-study::before{ clip-path:inset(0 0 0 0 round clamp(28px, 3.4vw, 54px)); transition:none; }
}

/* ==========================================================================
   9. HERO VIDEO: Safari transparency
   Chrome plays WebM with a VP8/VP9 alpha channel, so the hero renders
   transparent. Safari plays WebM but has never implemented the alpha plane -
   it composites over opaque black. A mix-blend-mode fallback was tried here
   and removed: Safari composites <video> on a separate hardware layer, so
   blend modes are ignored on video elements entirely.
   The only fix is a second <source> in HEVC-with-alpha (MP4/MOV, hvc1),
   listed BEFORE the WebM so Safari picks it and Chrome falls through.
   ========================================================================== */

/* ==========================================================================
   15. GLOBAL HEADER: MOBILE ORDER (logo / CTA / burger)
   ========================================================================== */

/* ==========================================================================
   EXPERTISE CARDS: Learn more CTA
   Solid per-card --service-a color, no gradient (design file is explicit on this).
   ========================================================================== */
/* Equal visual rhythm title > copy > CTA, matched to the design render (~32px ink gap each).
   Box gaps differ (22 / 24) because the heading line box carries ~10px below the ink
   and the CTA wrapper adds 6px above the button. */
.expertise-card .expertise-title { margin-bottom: 22px !important; }
.expertise-card .expertise-cta { margin-top: 18px !important; }
.expertise-card .expertise-cta .elementor-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    color: var(--service-a) !important;
    opacity: 0.82;
    font-family: var(--font-body) !important;
    font-size: var(--type-meta) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: none !important;
    line-height: 1.45 !important;
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
    transition: opacity 0.35s ease, color 0.35s ease !important;
}
.expertise-card .expertise-cta .elementor-button::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--service-a) !important;
    transform-origin: left;
    transition: transform 0.35s var(--ease-emphasized) !important;
}
.expertise-card .expertise-cta .elementor-button::after {
    content: "\2192 " !important;
    font-size: 19px !important;
    line-height: 1 !important;
    position: static !important;
    transition: transform 0.3s ease !important;
}
.expertise-card .expertise-cta .elementor-button-icon { display: none !important; }
.expertise-card:hover .expertise-cta .elementor-button,
.expertise-card .expertise-cta .elementor-button:hover,
.expertise-card .expertise-cta .elementor-button:focus-visible { opacity: 1 !important; }
.expertise-card:hover .expertise-cta .elementor-button::before,
.expertise-card .expertise-cta .elementor-button:hover::before,
.expertise-card .expertise-cta .elementor-button:focus-visible::before { transform: scaleX(0.72) !important; }
.expertise-card:hover .expertise-cta .elementor-button::after,
.expertise-card .expertise-cta .elementor-button:hover::after,
.expertise-card .expertise-cta .elementor-button:focus-visible::after { transform: translateX(5px) !important; }
@media (max-width: 760px) {
    .expertise-card .expertise-cta .elementor-button { min-height: 44px; }
}

/* ==========================================================================
   EXPERTISE GRID: inset row divider (desktop only)
   Design draws the divider as border-top on cards 4 and 5, which sit at grid
   columns 2-3 and 4-5. Result is a divider spanning columns 2-5, not 1-6.
   Scoped to >1040px so the approved tablet/mobile borders are untouched.
   ========================================================================== */
@media (min-width: 1041px) {
    .expertise-card:nth-child(4) {
        grid-column: 2 / span 2 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .expertise-card:nth-child(5) {
        grid-column: 4 / span 2 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 0 !important;
    }
}

/* ==========================================================================
   CASE STUDIES: boxed width
   Design caps the panel at 1440px centred rather than full viewport width.
   .case-study-copy is absolutely positioned against .case-study, so capping
   the width also insets the logo/summary/CTA and exposes the existing
   horizontal mask fade on both edges against the page background.
   min() means this is a no-op below 1440px, so no breakpoint needed.
   ========================================================================== */
.case-study {
    width: min(100%, 1440px) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   SECTION HEADING WORD REVEAL
   Ported from the design file's shared heading-reveal component.
   JS (atimi-heading-reveal.js) wraps each word in a clipping span; the inner
   span slides up from 112% with a 55ms-per-word stagger.
   Currently applied to .evolution-heading only.
   ========================================================================== */
.main-heading-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
    transition: none !important;
}
.main-heading-reveal .heading-reveal-visual { display: inline; }
.main-heading-reveal .heading-reveal-word {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
    padding: 0.08em 0.04em 0.24em;
    margin: -0.08em -0.04em -0.24em;
}
.main-heading-reveal .heading-reveal-word-inner {
    display: inline-block;
    opacity: 0.01;
    transform: translate3d(0, 112%, 0);
    transition:
        opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--heading-word-index, 0) * 55ms);
    will-change: opacity, transform;
}
.main-heading-reveal.is-heading-revealed .heading-reveal-word-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.main-heading-reveal.is-heading-reveal-settled .heading-reveal-word-inner {
    will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
    .main-heading-reveal .heading-reveal-word-inner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* ================================
   Expertise section entrance animation (home page)
   ================================ */
#services.expertise-current .expertise-intro .expertise-lead {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: opacity, transform;
  transition: opacity .72s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
#services.expertise-current.is-revealed .expertise-intro .expertise-lead {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: .16s;
}
/* "Our expertise" heading reveal is handled by the shared word-by-word
   component (atimi-heading-reveal.js, TARGET_SELECTOR), not here. */

#services.expertise-motion-ready .expertise-card:not(.is-expertise-card-revealed) .expertise-organic-icon,
#services.expertise-motion-ready .expertise-card:not(.is-expertise-card-revealed) .expertise-title,
#services.expertise-motion-ready .expertise-card:not(.is-expertise-card-revealed) .expertise-description {
  opacity: 0 !important;
}
#services .expertise-card.is-expertise-card-revealed .expertise-organic-icon {
  animation: expertiseIconReveal 800ms cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--expertise-order,0) * 90ms + 70ms);
}
#services .expertise-card.is-expertise-card-revealed .expertise-title {
  animation: expertiseTitleReveal 800ms cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--expertise-order,0) * 90ms + 130ms);
}
#services .expertise-card.is-expertise-card-revealed .expertise-description {
  animation: expertiseCopyReveal 720ms cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--expertise-order,0) * 90ms + 280ms);
}

@keyframes expertiseIconReveal {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: .94; transform: scale(1); }
}
@keyframes expertiseTitleReveal {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0,24px,0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
}
@keyframes expertiseCopyReveal {
  from { opacity: 0; transform: translate3d(0,18px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  #services.expertise-current .expertise-intro .section-heading,
  #services.expertise-current .expertise-intro .expertise-lead,
  #services.expertise-motion-ready .expertise-card .expertise-organic-icon,
  #services.expertise-motion-ready .expertise-card .expertise-title,
  #services.expertise-motion-ready .expertise-card .expertise-description {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* --- Why work with us: keyword as an editable heading widget ------------ */
/* The global why-section.css positions and styles .why-panel-keyword. When
   that class sits on an Elementor heading wrapper, the inner title element
   must inherit rather than impose its own type. */

/* Keep it visible and upright in the Elementor editor so it can be selected. */
body.elementor-editor-active #why-work-with-us .why-panel-keyword,
body.elementor-editor-preview #why-work-with-us .why-panel-keyword {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   CONTACT PAGE (post 827) — ported from Contact_page_v25.html
   Scoped to .page-id-827. Adapted to Elementor 4 container/widget DOM.
   ========================================================================== */

.page-id-827 {
  --muted: #aecbde;
  --shell: min(1280px, calc(100vw - 160px));
  --ease: cubic-bezier(.22, 1, .36, 1);
  background: #030a11;
}

/* --- Neutralise Elementor container/widget defaults on this page --------- */
.page-id-827 .e-con,
.page-id-827 .e-con-inner {
  --padding-top: 0px; --padding-bottom: 0px;
  --padding-left: 0px; --padding-right: 0px;
  --margin-top: 0px; --margin-bottom: 0px;
  --margin-left: 0px; --margin-right: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --width: 100%; --content-width: 100%;
  max-width: none;
}
.page-id-827 .elementor-widget { margin: 0; }
.page-id-827 .elementor-element:not(:last-child) { margin-block-end: 0; }
.page-id-827 .elementor-widget-container { margin: 0; padding: 0; }
.page-id-827 .elementor-heading-title { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; }
.page-id-827 .elementor-widget-image img { display: block; max-width: 100%; }
.page-id-827 .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --- 1. Hero ------------------------------------------------------------ */
.page-id-827 .contact-hero {
  position: relative; display: grid; min-height: 820px;
  overflow: hidden; background: #030a11; isolation: isolate;
}
.page-id-827 .hero-media { position: absolute; inset: 0; z-index: -2; display: block; }
.page-id-827 .hero-media .elementor-widget-image,
.page-id-827 .hero-media .elementor-widget-container { height: 100%; }
.page-id-827 .hero-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }
.page-id-827 .contact-hero:after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,10,17,.28) 0%, rgba(3,10,17,.12) 35%, rgba(3,10,17,0) 66%),
    linear-gradient(180deg, rgba(3,10,17,.25) 0%, transparent 25%, rgba(3,10,17,.14) 100%);
}
.page-id-827 .hero-shell { display: flex; flex-direction: row; align-items: center; width: var(--shell); margin: auto; padding: 160px 0 82px; }
.page-id-827 .hero-copy { display: block; width: 100%; max-width: 536px; text-align: left; }
.page-id-827 .hero-copy h1 { max-width: 520px; margin: 0; color: #fff; font: 500 80px/1.06 Poppins, Arial, sans-serif; letter-spacing: -.015em; }
.page-id-827 .hero-copy .elementor-widget-text-editor { margin-top: 26px; }
.page-id-827 .hero-copy p { max-width: 476px; margin: 0; color: var(--muted); font: 400 18px/1.6 Inter, Arial, sans-serif; }
.page-id-827 .hero-copy > * { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.page-id-827.page-ready .hero-copy > * { opacity: 1; transform: none; }
.page-id-827.page-ready .hero-copy .elementor-widget-text-editor { transition-delay: .14s; }

@media (max-width: 1439px) {
  .page-id-827 .contact-hero { min-height: 760px; }
  .page-id-827 .hero-copy h1 { font-size: 64px; }
}
@media (max-width: 700px) {
  .page-id-827 .contact-hero { min-height: 650px; }
  .page-id-827 .hero-media img { object-position: 61% center; }
  .page-id-827 .contact-hero:after { background: linear-gradient(180deg, rgba(3,10,17,.42), rgba(3,10,17,.14) 46%, rgba(3,10,17,.64)); }
  .page-id-827 .hero-shell { justify-content: center; padding: 130px 0 72px; }
  .page-id-827 .hero-copy { margin-inline: auto; }
  .page-id-827 .hero-copy h1 { font-size: 48px; }
  .page-id-827 .hero-copy p { margin: 0; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-id-827 .hero-copy > * { opacity: 1; transform: none; }
}

/* --- 2. Contact information -------------------------------------------- */
.page-id-827 .contact-information { display: block; background: #030a11; padding: 120px 24px; }
.page-id-827 .contact-information-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 24px; width: min(1280px, 100%); margin-inline: auto;
}
.page-id-827 .contact-information-card { display: block; min-width: 0; padding-inline: 40px; }
.page-id-827 .contact-information-icon img { width: 50px; height: 50px; object-fit: contain; }
.page-id-827 .contact-information-title { margin-top: 32px; }
.page-id-827 .contact-information-title .elementor-heading-title { color: #fff; font: 500 25px/1 Poppins, Arial, sans-serif; letter-spacing: -.25px; }
.page-id-827 .contact-information-rule {
  display: block; width: 72px; height: 2px; min-height: 2px; margin-top: 32px;
  border-radius: 999px; background: linear-gradient(90deg, #32c0e9, #0083c1 42%, #0bd3c5);
}
.page-id-827 .contact-information-card--call .contact-information-rule { background: linear-gradient(90deg, #8bbcc8, #32c0e9); }
.page-id-827 .contact-information-card--connect .contact-information-rule { background: linear-gradient(90deg, #10d1c9, #32c0e9); }
.page-id-827 .contact-information-card--canada .contact-information-rule { background: linear-gradient(90deg, #32c0e9, #40a8e8); }
.page-id-827 .contact-information-card--us .contact-information-rule { background: linear-gradient(90deg, #b688d8, #32c0e9); }
.page-id-827 .contact-information-card--india .contact-information-rule { background: linear-gradient(90deg, #89d85d, #32c0e9); }
.page-id-827 .contact-information-detail { margin-top: 32px; min-height: 41px; }
.page-id-827 .contact-information-detail p { margin: 0; color: #fff; font: 400 18px/1.13 Inter, Arial, sans-serif; }
.page-id-827 .contact-information-detail a { color: inherit; text-decoration: none; }
.page-id-827 .contact-information-detail a:hover,
.page-id-827 .contact-information-detail a:focus-visible { color: #32c0e9; }
.page-id-827 .contact-socials { display: flex; flex-direction: row; align-items: center; gap: 32px; min-height: 41px; margin-top: 32px; }
.page-id-827 .contact-socials .elementor-widget-image { width: 32px; flex: 0 0 auto; }
.page-id-827 .contact-socials a { display: inline-grid; place-items: center; width: 32px; height: 32px; }
.page-id-827 .contact-socials img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; transition: opacity .2s ease, transform .28s var(--ease); }
.page-id-827 .contact-socials a:hover img,
.page-id-827 .contact-socials a:focus-visible img { opacity: .82; transform: translateY(-2px); }
.page-id-827 .contact-location-image { margin-top: 28px; }
.page-id-827 .contact-location-image img { width: 100%; max-width: 331px; height: 400px; border-radius: 8px; object-fit: cover; object-position: center; }
.page-id-827 .contact-location-frame--india {
  position: relative; display: block; width: 100%; max-width: 331px; height: 400px;
  margin-top: 28px; overflow: hidden; border-radius: 8px;
}
.page-id-827 .contact-location-frame--india .contact-location-image,
.page-id-827 .contact-location-frame--india .elementor-widget-container { position: static; margin: 0; }
.page-id-827 .contact-location-frame--india .contact-location-image img {
  position: absolute; left: -39.58%; top: -124.75%; width: 181%; max-width: none;
  height: 224.75%; margin: 0; border-radius: 0; object-fit: cover; object-position: center;
}

@media (max-width: 1024px) {
  .page-id-827 .contact-information { padding-inline: 48px; }
  .page-id-827 .contact-information-card { padding-inline: 24px; }
  .page-id-827 .contact-information-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-id-827 .contact-information-card--connect { grid-column: 1 / -1; max-width: 50%; }
}
@media (max-width: 700px) {
  .page-id-827 .contact-information { padding: 76px 24px; }
  .page-id-827 .contact-information-grid { grid-template-columns: 1fr; gap: 56px; }
  .page-id-827 .contact-information-card { padding: 0; }
  .page-id-827 .contact-information-card--connect { grid-column: auto; max-width: none; }
  .page-id-827 .contact-information-title .elementor-heading-title { font-size: var(--type-h3); }
  .page-id-827 .contact-location-image img { max-width: none; height: auto; aspect-ratio: 331 / 400; }
  .page-id-827 .contact-location-frame--india { max-width: none; height: auto; aspect-ratio: 331 / 400; }
  .page-id-827 .contact-information-card--india .contact-location-image img { object-position: center bottom; }
}

/* Card reveal on scroll (class toggled by atimi-contact.js) */
@media (prefers-reduced-motion: no-preference) {
  .page-id-827 .contact-information-grid > .contact-information-card {
    opacity: 0; transform: translateY(20px);
    transition: opacity .86s var(--ease), transform .86s var(--ease);
    transition-delay: var(--contact-card-delay, 0ms); will-change: opacity, transform;
  }
  .page-id-827 .contact-information-grid > .contact-information-card:nth-child(2) { --contact-card-delay: 230ms; }
  .page-id-827 .contact-information-grid > .contact-information-card:nth-child(3) { --contact-card-delay: 460ms; }
  .page-id-827 .contact-information-grid > .contact-information-card:nth-child(4) { --contact-card-delay: 690ms; }
  .page-id-827 .contact-information-grid > .contact-information-card:nth-child(5) { --contact-card-delay: 920ms; }
  .page-id-827 .contact-information-grid > .contact-information-card:nth-child(6) { --contact-card-delay: 1150ms; }
  .page-id-827 .contact-information.is-revealed .contact-information-card { opacity: 1; transform: translateY(0); }
  .page-id-827 .contact-information .contact-information-icon {
    opacity: .25; transform: scale(.94);
    transition: opacity .62s var(--ease) calc(var(--contact-card-delay, 0ms) + 150ms),
                transform .62s var(--ease) calc(var(--contact-card-delay, 0ms) + 150ms);
  }
  .page-id-827 .contact-information.is-revealed .contact-information-icon { opacity: 1; transform: scale(1); }
  .page-id-827 .contact-information .contact-information-rule {
    transform: scaleX(0); transform-origin: left center;
    transition: transform .68s var(--ease) calc(var(--contact-card-delay, 0ms) + 250ms);
  }
  .page-id-827 .contact-information.is-revealed .contact-information-rule { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page-id-827 .contact-information .contact-information-card,
  .page-id-827 .contact-information .contact-information-icon,
  .page-id-827 .contact-information .contact-information-rule {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* --- 3. Contact form section ------------------------------------------- */
.page-id-827 .contact-form-section {
  position: relative; display: block; isolation: isolate;
  min-height: 1079px; overflow: hidden; padding: 120px 24px 130px;
  background:
    radial-gradient(ellipse 38% 48% at 79% 15%, rgba(50,192,233,.13), transparent 71%),
    radial-gradient(ellipse 40% 50% at 12% 82%, rgba(0,131,193,.09), transparent 73%),
    #03101a;
}
.page-id-827 .contact-form-mark {
  position: absolute; z-index: -1; top: 5%; left: 4%;
  width: min(56vw, 840px); opacity: .13; pointer-events: none; user-select: none;
}
.page-id-827 .contact-form-mark img { width: 100%; height: auto; max-width: none; }
.page-id-827 .contact-form-content { position: relative; z-index: 1; display: block; width: min(624px, 100%); margin-inline: auto; }
.page-id-827 .contact-form-intro { display: block; text-align: left; }
.page-id-827 .contact-form-heading .elementor-heading-title { margin: 0; color: #fff; font: 500 50px/1.12 Poppins, Arial, sans-serif; letter-spacing: -.015em; }
.page-id-827 .contact-form-copy { margin-top: 50px; }
.page-id-827 .contact-form-copy p { max-width: 480px; margin: 0; color: #aecbde; font: 400 18px/1.6 Inter, Arial, sans-serif; }
.page-id-827 .contact-form-panel {
  display: block; width: 100%; margin-top: 58px; padding: 50px 51px;
  border: 1px solid rgba(174,203,222,.22); border-radius: 24px;
  background: linear-gradient(116deg, rgba(25,48,62,.92), rgba(14,35,48,.88) 55%, rgba(15,51,67,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 26px 58px rgba(0,0,0,.12);
  backdrop-filter: blur(16px);
}

/* Elementor Pro form, restyled to match the export markup */
.page-id-827 .contact-form-panel .elementor-form .elementor-form-fields-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 34px; margin: 0;
}
.page-id-827 .contact-form-panel .elementor-field-group {
  display: grid; align-content: start; gap: 10px;
  width: auto !important; max-width: none !important; flex: none !important;
  padding: 0 !important; margin: 0 !important;
}
.page-id-827 .contact-form-panel .elementor-field-group.elementor-col-100,
.page-id-827 .contact-form-panel .elementor-field-type-submit,
.page-id-827 .contact-form-panel .elementor-message { grid-column: 1 / -1; }
.page-id-827 .contact-form-panel .elementor-field-label {
  margin: 0; padding: 0; color: #aecbde; font: 500 14px/1.45 Inter, Arial, sans-serif;
}
.page-id-827 .contact-form-panel .elementor-mark-required .elementor-field-label:after { content: " *"; color: #32c0e9; }
.page-id-827 .contact-form-panel .elementor-field-textual {
  width: 100%; padding: 0 0 9px; border: 0; border-bottom: 1px solid rgba(174,203,222,.30);
  border-radius: 0; outline: 0; background: transparent; color: #fff;
  font: 400 17px/1.45 Inter, Arial, sans-serif; box-shadow: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.page-id-827 .contact-form-panel input.elementor-field-textual { height: 44px; }
.page-id-827 .contact-form-panel textarea.elementor-field-textual { height: 132px; min-height: 132px; resize: vertical; }
.page-id-827 .contact-form-panel .elementor-field-textual:focus { border-bottom-color: #32c0e9; box-shadow: 0 1px 0 #32c0e9; }
.page-id-827 .contact-form-panel .elementor-field-textual::placeholder { color: rgba(174,203,222,.55); }
.page-id-827 .contact-form-panel .elementor-field-type-submit { justify-items: start; }
.page-id-827 .contact-form-panel .elementor-form .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 24px; border: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(105deg, #00416a 0%, #0083c1 24%, #32c0e9 48%, #0bd3c5 72%, #976ab8 100%);
  background-size: 220% 100%; background-position: 0 50%;
  box-shadow: 0 12px 28px rgba(0,131,193,.28); color: #fff; cursor: pointer;
  font: 500 18px/1.3 Inter, Arial, sans-serif;
  transition: background-position .58s var(--ease), box-shadow .3s ease;
}
.page-id-827 .contact-form-panel .elementor-form .elementor-button:is(:hover, :focus-visible) {
  background-position: 100% 50%;
  box-shadow: 0 17px 36px rgba(11,211,197,.20), 0 10px 28px rgba(0,131,193,.25);
}
.page-id-827 .contact-form-panel .elementor-button-content-wrapper { display: inline-flex; align-items: center; }
.page-id-827 .contact-form-panel .elementor-button-text:after {
  content: "\2192"; display: inline-block; margin-left: 14px;
  font-size: 23px; line-height: .8; vertical-align: middle;
  transition: transform .28s var(--ease);
}
.page-id-827 .contact-form-panel .elementor-form .elementor-button:is(:hover, :focus-visible) .elementor-button-text:after { transform: translateX(5px); }
.page-id-827 .contact-form-panel .elementor-message {
  margin: 0; min-height: 1.45em; color: #aee8e3; font: 400 14px/1.45 Inter, Arial, sans-serif;
}

@media (max-width: 700px) {
  .page-id-827 .contact-form-section { min-height: auto; padding: 78px 24px 90px; }
  .page-id-827 .contact-form-heading .elementor-heading-title { font-size: var(--type-section); }
  .page-id-827 .contact-form-copy { margin-top: 24px; }
  .page-id-827 .contact-form-copy p { max-width: 340px; font-size: 17px; }
  .page-id-827 .contact-form-panel { margin-top: 40px; padding: 32px 24px; border-radius: 20px; }
  .page-id-827 .contact-form-panel .elementor-form .elementor-form-fields-wrapper { grid-template-columns: 1fr; gap: 28px; }
  .page-id-827 .contact-form-panel .elementor-field-group.elementor-col-100,
  .page-id-827 .contact-form-panel .elementor-field-type-submit,
  .page-id-827 .contact-form-panel .elementor-message { grid-column: auto; }
  .page-id-827 .contact-form-panel textarea.elementor-field-textual { height: 120px; min-height: 120px; }
  .page-id-827 .contact-form-mark { top: 4%; left: -8%; width: 128vw; opacity: .09; }
}

/* Keep everything visible and unanimated inside the Elementor editor.
   NOTE: in the editor preview iframe, `elementor-editor-active` and the
   `page-id-827` class sit on the SAME <body> element, so these can never be
   written as `body.elementor-editor-active .page-id-827 ...` descendants.
   These classes never appear on the front end, so the live page is unaffected. */
body.elementor-editor-active .hero-copy > *,
body.elementor-editor-active .contact-information-grid > .contact-information-card,
body.elementor-editor-active .contact-information-icon,
body.elementor-editor-active .contact-information-rule,
body.e-preview--show-hidden-elements .hero-copy > *,
body.e-preview--show-hidden-elements .contact-information-grid > .contact-information-card,
body.e-preview--show-hidden-elements .contact-information-icon,
body.e-preview--show-hidden-elements .contact-information-rule {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- Contact page corrections, pass 1 ----------------------------------- */
/* Elementor 4 defines its own grid on .elementor-form-fields-wrapper and its
   own sizing on image widgets / empty containers; these win on source order,
   so the page-scoped overrides below are forced. */
.page-id-827 .contact-form-panel .elementor-form .elementor-form-fields-wrapper {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content;
  gap: 32px 34px !important;
  align-items: start;
}
.page-id-827 .contact-form-panel .elementor-field-label {
  padding: 0 !important; margin: 0 !important; line-height: 1.45 !important;
}
.page-id-827 .contact-form-panel .elementor-field-group { row-gap: 10px !important; }
.page-id-827 .contact-information-rule {
  width: 72px !important; min-width: 72px !important; max-width: 72px !important;
  height: 2px !important; min-height: 2px !important; flex: 0 0 auto !important;
}
.page-id-827 .contact-information-icon { width: 50px; }
.page-id-827 .contact-information-icon img {
  width: 50px !important; height: 50px !important; max-width: 50px !important; object-fit: contain;
}
.page-id-827 .contact-socials .elementor-widget-image img { width: 32px !important; height: 32px !important; max-width: 32px !important; object-fit: contain; }
.page-id-827 .contact-form-panel .elementor-button-content-wrapper { gap: 0 !important; }
.page-id-827 .contact-form-panel .elementor-button .elementor-button-icon { display: none; }

@media (max-width: 700px) {
  .page-id-827 .contact-form-panel .elementor-form .elementor-form-fields-wrapper {
    grid-template-columns: 1fr !important; gap: 28px !important;
  }
}

/* --- Contact page corrections, pass 2 ----------------------------------- */
/* Elementor 4 makes .elementor-form itself a grid, which was constraining the
   fields wrapper to a single narrow column. Let the wrapper own the grid. */
.page-id-827 .contact-form-panel .elementor-form {
  display: block !important; width: 100% !important; max-width: none !important;
}
.page-id-827 .contact-form-panel .elementor-form .elementor-form-fields-wrapper {
  width: 100% !important; max-width: none !important;
}
.page-id-827 .contact-form-panel .elementor-form .elementor-button {
  padding: 14px 24px !important; min-width: 0 !important; width: auto !important;
}

/* --- Contact page corrections, pass 3 ----------------------------------- */
/* The export reserves a status line under the submit button. Elementor only
   injects its message node after a submit, so reserve the same row height. */
.page-id-827 .contact-form-panel .elementor-form .elementor-form-fields-wrapper::after {
  content: ""; grid-column: 1 / -1; min-height: 1.45em;
  font: 400 14px/1.45 Inter, Arial, sans-serif;
}

/* ==========================================================================
   HOME DESIGN PARITY PASS (page 94)
   Measured against Home/Home_page.html rendered at 1440 and 375.
   ========================================================================== */

/* --- Hero type ----------------------------------------------------------- */
body.page-id-94 .hero .eyebrow .elementor-heading-title {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #77dff2 !important;
}
body.page-id-94 .hero h1 { letter-spacing: -0.015em !important; }

@media (max-width: 700px) {
  body.page-id-94 .hero .eyebrow .elementor-heading-title { font-size: 13px !important; }
  body.page-id-94 .hero h1 { max-width: 338px; margin-inline: auto; }
  body.page-id-94 .hero .subhead { max-width: 321px; margin-inline: auto; }
  body.page-id-94 .hero .primary-cta .elementor-button { font-size: 16px !important; }
}

/* (Home statistics grid + old entrance moved into section 6, 2026-09-23) */

/* (Expertise card mobile icon rules moved to css/expertise-section.css, 2026-09-24) */

/* --- Evolution: heading, then the tree, then the copy (mobile) ----------- */
@media (max-width: 900px) {
  body.page-id-94 .evolution-layout { display: flex !important; flex-direction: column !important; gap: 32px !important; }
  body.page-id-94 .evolution-copy-panel { display: contents !important; }
  body.page-id-94 .evolution-heading { order: 1; width: 100%; text-align: center !important; }
  body.page-id-94 .evolution-heading .elementor-heading-title { text-align: center !important; }
  body.page-id-94 .evolution-botanical-visual { order: 2; width: 100%; }
  body.page-id-94 .evolution-copy { order: 3; width: 100%; }
  body.page-id-94 .evolution-layout .primary-cta { order: 4; width: 100%; }
}

/* Why-section mobile rules live at the end of uploads/atimi/why-section.css,
   next to the v6/v8/v9 layers they have to override. */

/* ==========================================================================
   SERVICES PAGE (post 835) - ported from Services_landingpage.html
   Scoped to .page-id-835. Elementor 4 container/widget DOM.
   ========================================================================== */

.page-id-835 {
  --muted: #9c9e9f;
  --sky: #32c0e9;
  --teal: #10d1c9;
  --line: rgba(255,255,255,.10);
  --shell: min(1280px, calc(100vw - 160px));
  background: #030a11;
}

/* Neutralise Elementor container/widget defaults on this page.
   Excludes the shared expertise section (template 939), which must render exactly as on the home page. */
.page-id-835 .e-con:where(:not(.expertise-section, .expertise-section *)),
.page-id-835 .e-con-inner:where(:not(.expertise-section *)) {
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px;
  --margin-top:0px; --margin-bottom:0px; --margin-left:0px; --margin-right:0px;
  --gap:0px; --row-gap:0px; --column-gap:0px;
  --width:100%; --content-width:100%;
  max-width:none;
}
.page-id-835 .elementor-widget:where(:not(.expertise-section *)) { margin:0; }
.page-id-835 .elementor-element:not(:last-child):where(:not(.expertise-section *)) { margin-block-end:0; }
.page-id-835 .elementor-widget-container:where(:not(.expertise-section *)) { margin:0; padding:0; }
.page-id-835 .elementor-heading-title:where(:not(.expertise-section *)) { margin:0; font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; }
.page-id-835 .elementor-widget-text-editor:where(:not(.expertise-section *)) p:last-child { margin-bottom:0; }

/* --- 1. Hero ------------------------------------------------------------- */
.page-id-835 .services-hero {
  position:relative; display:grid; align-items:center; min-height:820px;
  overflow:hidden; isolation:isolate; background-color:#041019;
  /* Hero image is set on the Elementor container (Style > Background > Image).
     Do not hardcode background-image here or the Elementor media picker stops working. */
}
.page-id-835 .services-hero__shade {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Design v29 (services-hero-clean-embedded-v29): lighter shade over the clean banner. */
  background:
    linear-gradient(90deg, rgba(3,10,17,.72) 0%, rgba(3,10,17,.48) 36%, rgba(3,10,17,.14) 64%, rgba(3,10,17,.08) 100%),
    linear-gradient(180deg, rgba(3,10,17,.4), transparent 28%, rgba(3,10,17,.42) 100%);
}
.page-id-835 .services-hero__copy {
  position:relative; z-index:1; width:var(--shell); max-width:var(--shell);
  margin-inline:auto; padding-top:52px; display:block;
}
.page-id-835 .services-hero__title .elementor-heading-title {
  display:block; max-width:760px; color:#fff;
  font-family:'Poppins',Arial,sans-serif; font-size:80px; font-weight:500;
  line-height:1.06; letter-spacing:-1.2px; text-align:left;
}
.page-id-835 .services-hero__intro { margin-top:26px; }
.page-id-835 .services-hero__intro p {
  max-width:390px; margin:0; color:#aecbde;
  font-family:'Inter',Arial,sans-serif; font-size:18px; font-weight:400; line-height:1.6; text-align:left;
}

/* --- 2. Our expertise (reused block) -------------------------------------- */
/* Entrance animation is driven by atimi-expertise-reveal.js + atimi-heading-reveal.js,
   now enqueued for this page too. The earlier visibility override is removed so the
   theme's #services reveal states can run here exactly as they do on the home page. */
/* (AI icon loop moved to css/expertise-section.css, 2026-09-24) */

/* --- 3. How we engage ----------------------------------------------------- */
.page-id-835 .engage { padding:120px 0; background:#030a11; color:#fff; }
.page-id-835 .engage__shell { width:var(--shell); max-width:var(--shell); margin-inline:auto; display:block; }
.page-id-835 .engage .section-heading .elementor-heading-title {
  display:block; margin-inline:auto; width:fit-content; max-width:min(22ch,100%); text-align:center;
  font-family:'Poppins',Arial,sans-serif; font-weight:500; font-size:var(--type-section); line-height:1.12; letter-spacing:-.015em; color:#fff;
}
.page-id-835 .engage__intro { margin:32px auto 0; max-width:700px; }
.page-id-835 .engage__intro p { margin:0; text-align:center; font-family:'Inter',Arial,sans-serif; font-size: var(--type-body); line-height:1.6; color:#fff; }
.page-id-835 .engagement-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; align-items:start; }
.page-id-835 .engagement { display:block; padding:28px 24px 30px 0; }
.page-id-835 .engagement--project { border-right:1px solid var(--line); padding-right:24px; }
.page-id-835 .engagement .engagement-icon img { display:block; width:72px; height:72px; max-width:72px; object-fit:contain; }
.page-id-835 .engagement .engagement-icon { margin-bottom:24px; }
.page-id-835 .engagement .accent-rule { width:80px; min-height:3px; height:3px; border-radius:3px; background:var(--sky); margin-bottom:24px; }
.page-id-835 .engagement--staff .accent-rule { background:var(--teal); }
.page-id-835 .engagement__title .elementor-heading-title { margin:0; font-family:'Poppins',Arial,sans-serif; font-size: var(--type-h3); font-weight:500; line-height:1.28; letter-spacing:-.01em; color:#fff; }
.page-id-835 .engagement__copy { margin:16px 0; max-width:576px; }
.page-id-835 .engagement__copy p { margin:0; font-family:'Inter',Arial,sans-serif; font-size: var(--type-body); line-height:1.6; color:#aecbde; }
.page-id-835 .engagement__list-title .elementor-heading-title { margin:0 0 8px; font-family:'Inter',Arial,sans-serif; font-size:18px; font-weight:500; line-height:1.45; color:#fff; }
.page-id-835 .feature-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.page-id-835 .feature-list li { display:flex; gap:12px; align-items:flex-start; font-family:'Inter',Arial,sans-serif; font-size:18px; line-height:1.6; color:#aecbde; }
.page-id-835 .feature-list li:before { content:'✦'; width:28px; flex:0 0 28px; text-align:center; color:var(--sky); }
.page-id-835 .engagement--staff .feature-list li:before { color:var(--teal); }

/* --- 4. Contact us (conclusion block) ------------------------------------- */
.page-id-835 .contact-conclusion { position:relative; overflow:hidden; padding:176px 0 128px; background:#03101a; color:#fff; isolation:isolate; }
.page-id-835 .contact-conclusion:before {
  content:''; position:absolute; z-index:-1; width:1150px; height:1400px; left:2%; top:-113px;
  background:radial-gradient(ellipse at center, rgba(50,192,233,.13), transparent 64%);
  filter:blur(22px); transform:rotate(-18deg); pointer-events:none;
}
.page-id-835 .contact-grid { position:relative; display:grid; grid-template-columns:482px 1fr; gap:132px; width:var(--shell); max-width:var(--shell); margin-inline:auto; align-items:start; }
.page-id-835 .contact-copy { display:block; }
.page-id-835 .contact-heading .elementor-heading-title { margin:0; font-family:'Poppins',Arial,sans-serif; font-size:var(--type-section); font-weight:500; line-height:1.12; letter-spacing:-.015em; color:#fff; text-align:left; }
.page-id-835 .contact-details { margin-top:32px; }
.page-id-835 .contact-detail-row { display:grid; grid-template-columns:126px 1fr; min-height:74px; padding:20px 0; border-bottom:1px solid var(--line); align-items:center; }
.page-id-835 .contact-detail-row:nth-child(3) { min-height:103px; }
.page-id-835 .contact-detail-label { font-family:'Inter',Arial,sans-serif; font-size:14px; font-weight:500; line-height:1.45; color:var(--muted); }
.page-id-835 .contact-detail-value, .page-id-835 .contact-detail-value a { font-family:'Inter',Arial,sans-serif; font-size:18px; font-weight:400; line-height:1.6; color:#fff; text-decoration:none; }
.page-id-835 .contact-detail-value a:hover { color:var(--sky); }
.page-id-835 .contact-form-panel {
  position:relative; display:block; border:1px solid rgba(50,192,233,.22); border-radius:24px; padding:55px;
  background:linear-gradient(145deg, rgba(10,37,50,.9), rgba(4,17,25,.94)); overflow:hidden;
}
.page-id-835 .contact-form-panel:before { content:''; position:absolute; width:260px; height:260px; top:-119px; right:-110px; border-radius:50%; background:radial-gradient(circle, rgba(50,192,233,.28), transparent 70%); pointer-events:none; }
.page-id-835 .contact-form-panel .elementor-widget-form { position:relative; z-index:1; }
.page-id-835 .contact-form-widget .elementor-form, .page-id-835 .contact-form-widget .elementor-form-fields-wrapper { display:grid !important; grid-template-columns:1fr 1fr; gap:40px 36px; width:100%; }
.page-id-835 .contact-form-widget .elementor-field-group { display:grid; gap:10px; width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; grid-column:span 1; align-content:start; }
.page-id-835 .contact-form-widget .elementor-field-group.elementor-field-type-textarea, .page-id-835 .contact-form-widget .elementor-field-group.elementor-field-type-submit { grid-column:1 / -1; }
.page-id-835 .contact-form-widget .elementor-field-label { font-family:'Inter',Arial,sans-serif; font-size:14px; font-weight:500; line-height:1.45; color:#fff; }
.page-id-835 .contact-form-widget .elementor-field-required .elementor-field-label:after { content:' *'; color:var(--sky); }
.page-id-835 .contact-form-widget input:not([type=submit]), .page-id-835 .contact-form-widget textarea {
  width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.32); border-radius:0; outline:none; background:transparent;
  padding:9px 0; color:#fff; font-family:'Inter',Arial,sans-serif; font-size:18px; font-weight:400; line-height:1.4; box-shadow:none;
}
.page-id-835 .contact-form-widget input:not([type=submit]):focus, .page-id-835 .contact-form-widget textarea:focus { border-color:var(--sky); box-shadow:none; }
.page-id-835 .contact-form-widget textarea { height:132px; resize:vertical; }
.page-id-835 .contact-form-widget .elementor-button[type=submit] {
  justify-self:start; min-height:52px; padding:0 24px; border:0; border-radius:999px; cursor:pointer;
  color:#03101a; font-family:'Inter',Arial,sans-serif; font-size:18px; font-weight:500; line-height:1.3;
  background-image:linear-gradient(105deg,#0083c1,#32c0e9,#10d1c9);
}
.page-id-835 .contact-form-widget .elementor-button[type=submit]:after { content:' →'; }

/* --- 5. Services responsive ----------------------------------------------- */
@media (max-width:1439px) {
  .page-id-835 .services-hero { min-height:760px; }
  .page-id-835 .services-hero__title .elementor-heading-title { font-size:64px; letter-spacing:-.96px; }
  .page-id-835 .contact-grid { gap:72px; }
}
@media (max-width:1024px) {
  .page-id-835 .services-hero { min-height:680px; }
  .page-id-835 .engage { padding:96px 0; }
  .page-id-835 .engagement-columns { gap:48px; }
  .page-id-835 .contact-grid { grid-template-columns:1fr; gap:64px; }
  .page-id-835 .contact-copy { max-width:640px; }
  .page-id-835 .contact-form-panel { max-width:720px; }
}
@media (max-width:700px) {
  .page-id-835 { --shell:calc(100vw - 48px); }
  .page-id-835 .services-hero { min-height:620px; background-position:65% center; }
  .page-id-835 .services-hero__shade { background:linear-gradient(180deg, rgba(3,10,17,.72), rgba(3,10,17,.3) 44%, rgba(3,10,17,.76)); }
  .page-id-835 .services-hero__copy { padding-top:60px; }
  .page-id-835 .services-hero__title .elementor-heading-title { font-size:48px; letter-spacing:-.72px; text-align:left; /* 2026-09-28 Ron: left-aligned like the other page heroes (was center) */ }
  .page-id-835 .services-hero__intro p { margin:0; font-size:17px; text-align:left; }
  .page-id-835 .engage { padding:72px 0; }
  .page-id-835 .engage__intro { margin-top:24px; }
  .page-id-835 .engage__intro p { text-align:left; }
  .page-id-835 .engagement-columns { grid-template-columns:1fr; margin-top:48px; gap:0; }
  .page-id-835 .engagement, .page-id-835 .engagement--project { padding:28px 0 48px; border-right:0; border-bottom:1px solid var(--line); }
  .page-id-835 .engagement--staff { border-bottom:0; padding-bottom:0; }
  .page-id-835 .engagement .engagement-icon img { width:62px; height:62px; max-width:62px; }
  .page-id-835 .engagement__title .elementor-heading-title { font-size: var(--type-h3); }
  .page-id-835 .contact-conclusion { padding:104px 0 72px; }
  .page-id-835 .contact-grid { gap:48px; }
  .page-id-835 .contact-detail-row { grid-template-columns:110px 1fr; }
  .page-id-835 .contact-form-panel { padding:32px 24px; border-radius:20px; }
  .page-id-835 .contact-form-widget .elementor-form, .page-id-835 .contact-form-widget .elementor-form-fields-wrapper { grid-template-columns:1fr; gap:28px; }
}

/* --- Services: revision pass 1 -------------------------------------------- */
/* Elementor 4 widget --width/--max-width was winning over the ported measures. */
.page-id-835 .engage__intro { max-width:700px !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; }
.page-id-835 .engagement__copy { max-width:576px !important; width:100% !important; margin:16px 0 !important; }
.page-id-835 .engagement__list-title { margin:0 !important; }

/* --- Services: revision pass 2 -------------------------------------------- */
/* Same Elementor 4 issue solved on the contact page: .elementor-form is itself
   a grid and constrains the fields wrapper. Let the wrapper own the grid. */
.page-id-835 .contact-form-panel .elementor-form { display:block !important; width:100% !important; max-width:none !important; }
.page-id-835 .contact-form-panel .elementor-form .elementor-form-fields-wrapper {
  display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  grid-auto-rows:min-content; gap:40px 36px !important; align-items:start;
  width:100% !important; max-width:none !important;
}
.page-id-835 .contact-form-panel .elementor-field-group { row-gap:10px !important; padding:0 !important; margin:0 !important; }
.page-id-835 .contact-form-panel .elementor-field-label { padding:0 !important; margin:0 !important; line-height:1.45 !important; }
.page-id-835 .contact-form-panel .elementor-form .elementor-button { padding:0 24px !important; min-width:0 !important; width:auto !important; }
.page-id-835 .contact-form-panel .elementor-button-content-wrapper { gap:0 !important; }
.page-id-835 .contact-form-panel .elementor-button .elementor-button-icon { display:none !important; }
/* Detail rows: kill the inherited column gap so the 126px label column is exact. */
.page-id-835 .contact-detail-row { column-gap:0 !important; row-gap:0 !important; grid-template-columns:126px minmax(0,1fr) !important; }
@media (max-width:700px) {
  .page-id-835 .contact-form-panel .elementor-form .elementor-form-fields-wrapper { grid-template-columns:1fr !important; gap:28px !important; }
  .page-id-835 .contact-detail-row { grid-template-columns:110px minmax(0,1fr) !important; }
}

/* (Expertise icon hover moved to css/expertise-section.css and made global, 2026-09-24) */

/* --- Services: How we engage text reveal ------------------------------------ */
/* Ported from the design file's services-engage-text-reveal-v32 block.
   Left column slides in from the left, right column from the right, intro fades up.
   Driven by atimi-engage-reveal.js. Source animates text only: the 72px icons and
   the accent rules stay static, as authored. */
@keyframes engageIntroReveal { from { opacity:0; transform:translate3d(0,12px,0); } to { opacity:1; transform:none; } }
@keyframes engageTextFromLeft { from { opacity:0; transform:translate3d(-20px,0,0); } to { opacity:1; transform:none; } }
@keyframes engageTextFromRight { from { opacity:0; transform:translate3d(20px,0,0); } to { opacity:1; transform:none; } }

.page-id-835 .engage.engage-text-motion-ready .engage__intro {
  opacity:0; transform:translate3d(0,12px,0);
}
.page-id-835 .engage.engage-text-motion-ready .engagement--project .engagement__title,
.page-id-835 .engage.engage-text-motion-ready .engagement--project .engagement__copy,
.page-id-835 .engage.engage-text-motion-ready .engagement--project .engagement__list-title,
.page-id-835 .engage.engage-text-motion-ready .engagement--project .feature-list li {
  opacity:0; transform:translate3d(-20px,0,0);
}
.page-id-835 .engage.engage-text-motion-ready .engagement--staff .engagement__title,
.page-id-835 .engage.engage-text-motion-ready .engagement--staff .engagement__copy,
.page-id-835 .engage.engage-text-motion-ready .engagement--staff .engagement__list-title,
.page-id-835 .engage.engage-text-motion-ready .engagement--staff .feature-list li {
  opacity:0; transform:translate3d(20px,0,0);
}

.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engage__intro {
  animation: engageIntroReveal .9s cubic-bezier(.22,1,.36,1) 260ms both;
}
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--project .engagement__title,
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--project .engagement__copy,
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--project .engagement__list-title,
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--project .feature-list li {
  animation-name: engageTextFromLeft;
  animation-duration: 1.05s;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
  animation-fill-mode: both;
}
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--staff .engagement__title,
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--staff .engagement__copy,
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--staff .engagement__list-title,
.page-id-835 .engage.engage-text-motion-ready.is-engage-text-visible .engagement--staff .feature-list li {
  animation-name: engageTextFromRight;
  animation-duration: 1.05s;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
  animation-fill-mode: both;
}

/* Per-element stagger, exactly as authored in the design file. NOTE: item 1 is
   760ms in the source while items 2-11 run 410-770ms, so the first bullet lands
   near-last. Ported verbatim; flagged to Ron as a likely typo in the design. */
.page-id-835 .engage.is-engage-text-visible .engagement__title { animation-delay: 380ms; }
.page-id-835 .engage.is-engage-text-visible .engagement__copy { animation-delay: 520ms; }
.page-id-835 .engage.is-engage-text-visible .engagement__list-title { animation-delay: 660ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(1) { animation-delay: 760ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(2) { animation-delay: 410ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(3) { animation-delay: 450ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(4) { animation-delay: 490ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(5) { animation-delay: 530ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(6) { animation-delay: 570ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(7) { animation-delay: 610ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(8) { animation-delay: 650ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(9) { animation-delay: 690ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(10) { animation-delay: 730ms; }
.page-id-835 .engage.is-engage-text-visible .feature-list li:nth-child(11) { animation-delay: 770ms; }

@media (prefers-reduced-motion: reduce) {
  .page-id-835 .engage.engage-text-motion-ready .engage__intro,
  .page-id-835 .engage.engage-text-motion-ready .engagement__title,
  .page-id-835 .engage.engage-text-motion-ready .engagement__copy,
  .page-id-835 .engage.engage-text-motion-ready .engagement__list-title,
  .page-id-835 .engage.engage-text-motion-ready .feature-list li {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* --- Services: How we engage text colour ------------------------------------ */
/* Source sets no colour on .engagement > p, h3, h4 or .feature-list li, so they
   all inherit body colour, which resolves to --color-dark-text-primary #ffffff.
   The earlier build used the secondary blue #aecbde; corrected here.
   Only the bullet glyphs carry a colour: sky on the left column, teal on the right. */
.page-id-835 .engagement__copy p,
.page-id-835 .feature-list li {
  color: #ffffff;
}
.page-id-835 .engagement--project .feature-list li:before { color: var(--sky); }
.page-id-835 .engagement--staff .feature-list li:before { color: var(--teal); }

/* --- About (691): Quality section - ported from About_page.html final state --- */
/* Design removes the standalone mark/micro visual in the final Quality state. */

/* --- About: mission visual scale, emphasis weight, Apple story divider ------ */
/* about-mission-visual-scale
   Design file renders the mission orbit at a 290px visual with a 140px mark.
   The build was running at exactly 2x that. Rings and orbits are percentage
   based, so constraining the visual scales the whole composition. */
.page-id-691 .mission-centered__hero-animation {
  margin-top: 40px;
}
.page-id-691 .mission-centered .mark-hero__visual {
  width: min(100%, 290px) !important;
  max-width: 290px !important;
}
.page-id-691 .mission-centered .mark-hero__mark img {
  width: auto !important;
  max-width: 140px !important;
  height: auto !important;
}
/* Design keeps every mission word at weight 500, including the emphasis words. */
.page-id-691 #mission-heading .mission-copy-word.is-emphasis-word.is-highlighted {
  font-weight: 500;
}

/* Header: Elementor Pro Sticky clones the container into .elementor-sticky__spacer and the clone
   keeps id="atimiHeader", so the ported '#atimiHeader{position:fixed}' rule applied to the clone too
   and produced a second fixed header (offset by the admin bar for logged-in users) that swallowed clicks.
   Neutralise the spacer only. 2026-09-20. */
#atimiHeader.elementor-sticky__spacer,
.elementor-location-header .elementor-sticky__spacer{
	position:static!important;
	height:0!important;
	min-height:0!important;
	padding:0!important;
	margin:0!important;
	border:0!important;
	visibility:hidden!important;
	pointer-events:none!important;
}

/* ==========================================================================
   OUR STORY: 2026-09-23 design revision (About_page.html, about-v117 interactions + final heading rule)
   - Each milestone opens with a blue subtitle span, body copy stays white.
   - Hover / keyboard focus: item brightens, icon lifts 4px and scales 1.06, white ring + glow.
   Lift uses the individual translate/scale properties so it composes with whatever
   transform the base layout already applies (desktop and mobile differ).
   ========================================================================== */
.page-id-691 .about-story-moments__heading {
  display: block;
  margin: 0 0 8px;
  color: #32C0E9;
  font: inherit;
  font-weight: 800; /* design value; Inter is loaded at 400/500/600, so this renders at 600 */
}
.page-id-691 .about-story-moments__item { transition: filter 280ms ease; outline: none; }
.page-id-691 .about-story-moments__item:is(:hover, :focus-within) { filter: brightness(1.15); }
.page-id-691 .about-story-moments__item:focus-visible .about-story-moments__icon { outline: 2px solid #32C0E9; outline-offset: 16px; }
/* about-responsive.css kills transitions on the icon with !important (entrance animation removal);
   this selector is more specific and restores the design's hover easing. */
.page-id-691 .about-story-moments__item .about-story-moments__icon {
  transition: translate 620ms cubic-bezier(0.22, 1, 0.36, 1), scale 620ms cubic-bezier(0.22, 1, 0.36, 1), color 280ms ease, border-color 280ms ease, background-color 280ms ease, filter 280ms ease !important;
}
.page-id-691 .about-story-moments__item:is(:hover, :focus-within) .about-story-moments__icon {
  translate: 0 -4px;
  scale: 1.06;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  background: rgb(255 255 255 / 0.11) !important;
  filter: drop-shadow(0 0 15px rgb(255 255 255 / 0.24)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .page-id-691 .about-story-moments__item:is(:hover, :focus-within) .about-story-moments__icon { translate: none; scale: none; }
  .page-id-691 .about-story-moments__item .about-story-moments__icon { transition: none !important; }
}

/* ==========================================================================
   ABOUT PAGE TYPE SCALE (2026-09-23): heading rhythm + story copy override
   The global :root tokens are fluid clamps (e.g. --type-section: clamp(34px, 4.4vw, 50px))
   that land between canonical sizes at tablet: H2 34px at 781, 45.6px at 1037;
   body 14-15.8px in the story columns. Design system 6.2: fluid type is allowed only when
   it resolves to the canonical value at each breakpoint. Scoped to About (691) for now;
   the same fix on :root would correct every page and is pending Ron's go-ahead.
   Desktop >=1025 / tablet 701-1024 / mobile <=700.
   ========================================================================== */
/* Tokens now step globally in :root (see Type scale steps near the top of this file). */
body.page-id-691 .section-heading { font-size: var(--type-section); line-height: 1.12 !important; letter-spacing: -0.015em; }
/* Our story copy: about-responsive.css pins 14px / clamp(14px, 1.52vw, 16px) at tablet. */
body.page-id-691 #story .about-story-moments__copy,
body.page-id-691 #story .about-story-moments__copy p { font-size: var(--type-body) !important; line-height: 1.6 !important; }

/* ==========================================================================
   GLOBAL TYPE ROLE ENFORCEMENT (2026-09-23)
   Section and card headings that older ported rules pinned to px or vw values.
   Each maps to its design-system role token, which steps at 1024 / 700.
   Selectors carry html body + the section ID so they outrank the ported files
   (why-section.css loads after this stylesheet).
   ========================================================================== */

html body.page-id-827 .contact-form-heading .elementor-heading-title { font-size: var(--type-section) !important; }
html body.page-id-827 .contact-information-title .elementor-heading-title { font-size: var(--type-h3) !important; }

/* ==========================================================================
   ABOUT HERO: media wash + bottom fade (2026-09-23)
   From About_page.html computed styles. The design darkens the photo
   (brightness .82 / saturate .92) and lays a wash over it on
   .mark-hero__media::after: dark at the top (under the header), clear in the
   middle, dark again at the bottom so the image dissolves into the mission
   section, plus a faint deep-blue / turquoise side tint. The site had neither.
   The hero ::after fade is a percentage of the hero, not a fixed 185px.
   ========================================================================== */
.page-id-691 .mark-hero__media { filter: brightness(.82) saturate(.92); }
.page-id-691 .mark-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 10, 17, .76) 0%, rgba(3, 10, 17, .40) 18%, rgba(3, 10, 17, 0) 42%, rgba(3, 10, 17, 0) 65%, rgba(3, 10, 17, .30) 82%, rgba(3, 10, 17, .72) 100%),
    linear-gradient(90deg, rgba(0, 65, 106, .18) 0%, rgba(0, 65, 106, 0) 28%, rgba(11, 211, 197, 0) 72%, rgba(11, 211, 197, .10) 100%);
}
.page-id-691 .mark-hero.mark-hero--cinematic::after { top: auto !important; bottom: 0 !important; height: 24% !important; }
/* 701-767px: the old mobile wash started at 767; the design keeps the desktop wash down to 701 */
@media (min-width: 701px) and (max-width: 767px) {
  .page-id-691 .mark-hero.mark-hero--cinematic::before {
    background:
      linear-gradient(90deg, rgba(2, 9, 15, .92) 0%, rgba(2, 9, 15, .78) 28%, rgba(2, 9, 15, .48) 52%, rgba(2, 9, 15, .14) 78%, rgba(2, 9, 15, .06) 100%),
      linear-gradient(180deg, rgba(2, 9, 15, .30) 0%, rgba(2, 9, 15, .02) 36%, rgba(2, 9, 15, .12) 68%, rgba(2, 9, 15, .55) 100%) !important;
  }
}
@media (max-width: 700px) {
  .page-id-691 .mark-hero.mark-hero--cinematic::before {
    background:
      linear-gradient(180deg, rgba(2, 9, 15, .18) 0%, rgba(2, 9, 15, .16) 30%, rgba(2, 9, 15, .62) 62%, rgba(2, 9, 15, .94) 100%),
      linear-gradient(90deg, rgba(2, 9, 15, .42), rgba(2, 9, 15, .08)) !important;
  }
  .page-id-691 .mark-hero.mark-hero--cinematic::after {
    height: 38% !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(2, 9, 15, .82)) !important;
  }
}

/* expertise-editor-visible: the expertise reveal states hide content until JS adds .is-revealed /
   .is-expertise-card-revealed. Elementor's editor re-renders the section and drops those classes,
   so without this the lead and card copy are invisible (and unclickable) in the editor. */
.elementor-editor-active #services.expertise-current .expertise-intro .expertise-lead,
.elementor-editor-active #services.expertise-motion-ready .expertise-card .expertise-organic-icon,
.elementor-editor-active #services.expertise-motion-ready .expertise-card .expertise-title,
.elementor-editor-active #services.expertise-motion-ready .expertise-card .expertise-description {
  opacity: 1 !important;
  transform: none !important;
}

/* engage-header-v2 (2026-09-24): How we engage intro per Services_landing_page.html.
   Heading-to-intro gap 60px (36px <=700), copy #aecbde, left-aligned in a centred 700px column. */
.page-id-835 .engage .engage__intro { margin-top: 60px; max-width: 700px; margin-left: auto; margin-right: auto; }
.page-id-835 .engage .engage__intro p { color: #aecbde; text-align: left; }
@media (max-width: 700px) { .page-id-835 .engage .engage__intro { margin-top: 36px; } }

/* engage-list-icons-v1 (2026-09-24): How we engage list icons per Services_landing_page.html
   (block services-engagement-v15-figma). Each <li> carries its own SVG icon (media library,
   services-engage-*.svg); the old star bullet is removed. All icons 14x14. */
.page-id-835 .feature-list li { align-items: center; gap: 12px; min-width: 0; white-space: nowrap; color: #fff; font: 400 18px/28.8px 'Inter', Arial, sans-serif; }
.page-id-835 .feature-list li:before { display: none; content: none; }
.page-id-835 .feature-list li img { display: block; width: 14px; height: 14px; max-width: none; flex: 0 0 14px; margin: 0; object-fit: contain; }
/* The two AI items use services-engage-ai-mentoring-14.svg, a 14x14 crop of the 28x14 design file,
   so their labels align with the rest of the list (Ron, 2026-09-24; deliberate deviation from the HTML). */
@media (max-width: 1024px) { .page-id-835 .feature-list li { white-space: normal; } }
@media (max-width: 700px) { .page-id-835 .feature-list li { align-items: flex-start; } }

/* mobile-overflow-v1 (2026-09-25): stop sideways panning on phones. clip (not hidden) so body does not become a scroll container and sticky sections keep working. Browsers without clip keep the existing body overflow-x:hidden. */
@supports (overflow: clip){
  html{overflow-x:clip;}
  body{overflow-x:clip!important;}
}
html,body{max-width:100%;}

/* evolution-mobile-gap-v1 (2026-09-25): on phones the tree image is ~310px tall inside a 560px min-height box, leaving ~320px of empty space above the copy. Let the box fit the image. */
@media (max-width:767px){
  .evolution-botanical-visual{min-height:0!important;}
}

/* ===== ATIMI WHY ICONS 2026-10-01 START (delete through END to roll back) ===== */
@media (min-width:1025px){
/* Why work with us: icon geometry ported from Home_page (after freeze version).html, desktop only (>=1025px).
   The design targets img.why-panel-icon-image; Elementor renders the img with no class, so selectors use .why-panel-icon > img.
   Generated 2026-10-01. Tablet/mobile keep the site's own icon rules. */
html body #why-work-with-us.why-v6.why-v9{--why-copy-x:48px}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(2){--why-icon-art-scale:1.14}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(4){--why-icon-art-scale:.88}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(1),html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(3),html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(5),html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(6){--why-icon-art-scale:1}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(1){--why-icon-nudge-x:-4px}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(2){--why-icon-nudge-x:-8px}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(3){--why-icon-nudge-x:-5px}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(4){--why-icon-nudge-x:-3px}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(5){--why-icon-nudge-x:-5px}
html body #why-work-with-us.why-v6.why-v9 .why-panel:nth-child(6){--why-icon-nudge-x:-4px}
.why-panel-icon{width:56px;height:56px;display:grid;transform:translate3d(10px,0px,0px) scale(0.92)}
.why-panel-icon svg{width:23px;height:23px;display:block}
.why-panel.is-active .why-panel-icon{transform:translate3d(0px,0px,0px) scale(1)}
.why-panel-icon{margin-top:0px;margin-right:0px;margin-bottom:clamp(22px,2.4vw,32px);margin-left:0px;transform:translate3d(0px,10px,0px) scale(0.92)}
.why-panel.is-active .why-panel-icon{transform:translate3d(0px,0px,0px) scale(1)}
.why-panel-icon{width:56px!important;height:56px!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:28px!important;margin-left:0px!important;transform:none!important}
html body #why-work-with-us .why-panel-icon{width:44px!important;height:44px!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:28px!important;margin-left:0px!important;transform:none!important}
html body #why-work-with-us .why-panel-icon svg{width:32px!important;height:32px!important}
html body #why-work-with-us .why-panel:hover .why-panel-icon,html body #why-work-with-us .why-panel:focus-visible .why-panel-icon,html body #why-work-with-us .why-panel:focus-within .why-panel-icon{scale:1.035}
html body #why-work-with-us .why-panel-icon{position:relative!important;width:66px!important;height:66px!important;margin-bottom:30px!important;display:grid!important}
html body #why-work-with-us .why-panel-icon .why-tech-symbol{position:relative;width:48px!important;height:48px!important}
html body #why-work-with-us .why-panel-icon .why-organic-accent{position:absolute;top:0px;right:0px;bottom:0px;left:0px;transform-origin:50% 72%;width:66px!important;height:66px!important}
html body #why-work-with-us .why-panel-icon{width:88px!important;height:88px!important;margin-bottom:28px!important;display:grid!important}
html body #why-work-with-us .why-panel-icon > img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important}
html body #why-work-with-us .why-panel-icon{transform-origin:center center!important}
html body #why-work-with-us .why-panel-icon > img{transform-origin:center center}
html body #why-work-with-us .why-panel:hover .why-panel-icon,html body #why-work-with-us .why-panel:focus-visible .why-panel-icon,html body #why-work-with-us .why-panel:focus-within .why-panel-icon{scale:1.045!important}
html body #why-work-with-us .why-panel-icon{margin-bottom:22px!important}
html body #why-work-with-us .why-panel-icon{margin-bottom:16.5px!important}
html body #why-work-with-us .why-panel-icon{position:relative!important;width:clamp(220px,18vw,280px)!important;height:auto!important;margin-top:0px!important;margin-right:auto!important;margin-bottom:42px!important;margin-left:auto!important;display:block!important}
html body #why-work-with-us .why-panel-icon > img{display:none!important}
html body #why-work-with-us .why-panel-icon::before{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:grid}
html body #why-work-with-us .why-panel-icon::after{position:absolute;top:0px;right:0px;bottom:0px;left:0px}
html body #why-work-with-us .why-panel:nth-child(1) .why-panel-icon::after{transform:rotate(-5deg) scaleX(1.015)}
html body #why-work-with-us .why-panel:nth-child(6) .why-panel-icon::after{transform:rotate(5deg) scaleX(1.015)}
html body #why-work-with-us .why-panel-icon{position:relative!important;width:min(100%,280px)!important;height:auto!important;margin-top:0px!important;margin-right:auto!important;margin-bottom:clamp(28px,2.4vw,36px)!important;margin-left:auto!important;display:grid!important;transform:none!important;scale:1!important}
html body #why-work-with-us .why-panel-icon > img{display:none!important}
html body #why-work-with-us .why-panel-icon::before,html body #why-work-with-us .why-panel-icon::after{position:absolute;top:0px;right:0px;bottom:0px;left:0px}
html body #why-work-with-us .why-panel-icon::after{display:none}
html body #why-work-with-us .why-panel-icon--evolution::before,html body #why-work-with-us .why-panel-icon--quality::before{transform:rotate(-8deg) scale(1.02)}
html body #why-work-with-us .why-panel-icon--evolution::after,html body #why-work-with-us .why-panel-icon--quality::after{display:block;top:1.5%;right:1.5%;bottom:1.5%;left:1.5%;transform:rotate(7deg) scale(0.985)}
html body #why-work-with-us .why-panel:hover .why-panel-icon,html body #why-work-with-us .why-panel:focus-visible .why-panel-icon,html body #why-work-with-us .why-panel:focus-within .why-panel-icon{transform:scale(1.018)!important}
html body #why-work-with-us .why-panel-icon .why-circle-keyword{position:relative!important}
html body #why-work-with-us .why-panel-icon--evolution::after,html body #why-work-with-us .why-panel-icon--quality::after{display:block!important;top:1.5%!important;right:1.5%!important;bottom:1.5%!important;left:1.5%!important}
html body #why-work-with-us .why-panel-icon--senior::after,html body #why-work-with-us .why-panel-icon--modernize::after{display:block!important;top:1.25%!important;right:1.25%!important;bottom:1.25%!important;left:1.25%!important}
html body #why-work-with-us .why-panel-icon--evolution::before,html body #why-work-with-us .why-panel-icon--evolution::after,html body #why-work-with-us .why-panel-icon--quality::before,html body #why-work-with-us .why-panel-icon--quality::after{display:none!important}
html body #why-work-with-us .why-panel-icon--enterprise::after,html body #why-work-with-us .why-panel-icon--ai::after{display:none!important}
html body #why-work-with-us .why-panel-icon--senior::after,html body #why-work-with-us .why-panel-icon--modernize::after{display:block!important;top:1.5%!important;right:1.5%!important;bottom:1.5%!important;left:1.5%!important}
html body #why-work-with-us .why-panel-icon--evolution::before,html body #why-work-with-us .why-panel-icon--quality::before{display:block!important;position:absolute!important;top:-1%!important;right:-1%!important;bottom:-1%!important;left:-1%!important}
html body #why-work-with-us .why-panel-icon--evolution::after,html body #why-work-with-us .why-panel-icon--quality::after{display:block!important;position:absolute!important;top:1.5%!important;right:1.5%!important;bottom:1.5%!important;left:1.5%!important}
html body #why-work-with-us .why-panel-icon--evolution::before,html body #why-work-with-us .why-panel-icon--evolution::after,html body #why-work-with-us .why-panel-icon--quality::before,html body #why-work-with-us .why-panel-icon--quality::after{display:none!important}
html body #why-work-with-us .why-panel-icon--evolution::before,html body #why-work-with-us .why-panel-icon--quality::before{display:block!important;position:absolute!important;top:-7%!important;right:-7%!important;bottom:-7%!important;left:-7%!important;transform-origin:50% 50%!important}
html body #why-work-with-us .why-panel-icon{margin-bottom:32px!important}
html body #why-work-with-us .why-panel-icon--evolution::after,html body #why-work-with-us .why-panel-icon--quality::after{display:none!important}
html body #why-work-with-us .why-panel-icon--evolution::before,html body #why-work-with-us .why-panel-icon--senior::before,html body #why-work-with-us .why-panel-icon--modernize::before{display:block!important;top:0px!important;right:0px!important;bottom:0px!important;left:0px!important}
html body #why-work-with-us .why-panel-icon--evolution::after,html body #why-work-with-us .why-panel-icon--senior::after,html body #why-work-with-us .why-panel-icon--modernize::after{display:none!important}
html body #why-work-with-us .why-panel-icon--enterprise::before,html body #why-work-with-us .why-panel-icon--ai::before,html body #why-work-with-us .why-panel-icon--quality::before{display:block!important;top:0px!important;right:0px!important;bottom:0px!important;left:0px!important}
html body #why-work-with-us .why-panel-icon--enterprise::after,html body #why-work-with-us .why-panel-icon--ai::after,html body #why-work-with-us .why-panel-icon--quality::after{display:block!important;top:1.5%!important;right:1.5%!important;bottom:1.5%!important;left:1.5%!important}
html body #why-work-with-us .why-panel:hover .why-panel-icon,html body #why-work-with-us .why-panel:focus-visible .why-panel-icon,html body #why-work-with-us .why-panel:focus-within .why-panel-icon{scale:1!important;transform:none!important}
html body #why-work-with-us.why-v5 .why-panel-icon{position:absolute!important;left:24px!important;top:28px!important;width:40px!important;height:40px!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;transform:none!important}
html body #why-work-with-us.why-v5 .why-panel-icon::before,html body #why-work-with-us.why-v5 .why-panel-icon::after{display:none!important}
html body #why-work-with-us.why-v5 .why-panel-icon img{width:100%!important;height:100%!important;object-fit:contain!important}
html body #why-work-with-us.why-v6 .why-panel-icon{position:absolute!important;left:32px!important;top:30px!important;width:40px!important;height:40px!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;transform:none!important}
html body #why-work-with-us.why-v6 .why-panel-icon::before,html body #why-work-with-us.why-v6 .why-panel-icon::after{display:none!important}
html body #why-work-with-us.why-v6 .why-panel-icon img{width:100%!important;height:100%!important;object-fit:contain!important}
html body #why-work-with-us.why-v6.why-v8 .why-panel-icon{display:grid!important}
html body #why-work-with-us.why-v6.why-v8 .why-panel-icon::before,html body #why-work-with-us.why-v6.why-v8 .why-panel-icon::after{display:none!important}
html body #why-work-with-us.why-v6.why-v8 .why-panel-icon > img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon > img{transform:none!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel:hover .why-panel-icon,html body #why-work-with-us.why-v6.why-v9 .why-panel:focus-visible .why-panel-icon,html body #why-work-with-us.why-v6.why-v9 .why-panel:focus-within .why-panel-icon{scale:1!important;transform:none!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon{left:24px!important;top:28px!important;width:68px!important;height:68px!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon{left:50%!important;right:auto!important;transform:translateX(-50%)!important}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{left:40px!important}}
@media (min-width: 1025px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{left:48px!important}}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon{display:grid!important;width:68px!important;height:68px!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon > img{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important;object-fit:contain!important;object-position:center center!important;transform:scale(var(--why-icon-art-scale,1))!important;transform-origin:center center!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon{display:block!important;width:82px!important;height:82px!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon > img{display:block!important;width:70px!important;height:70px!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;transform-origin:left center!important}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{left:40px!important;transform:none!important}}
@media (min-width: 1025px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{left:48px!important;transform:none!important}}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon{margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{left:var(--why-copy-x)!important;right:auto!important;transform:none!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon > img{margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;object-fit:contain!important;object-position:left center!important;transform-origin:left center!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon > img{transform:translateX(var(--why-icon-nudge-x,0px)) scale(var(--why-icon-art-scale,1))!important}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon > img{transform-origin:center center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--evolution > img{transform:scale(1.15)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--enterprise > img{transform:translateX(-14px) scale(1.097)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--senior > img{transform:translateX(-11px) scale(1.086)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--ai > img{transform:translateX(-8px) scale(0.724)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--modernize > img{transform:scale(0.933)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--quality > img{transform:translateX(-10px) scale(0.85)!important}}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon{display:block!important}
html body #why-work-with-us.why-v6.why-v9 .why-panel-icon > img{display:block!important;max-width:none!important;max-height:none!important}
html body #why-work-with-us .why-panel-icon > img{display:block!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:left center!important}
html body #why-work-with-us .why-panel-icon::before,html body #why-work-with-us .why-panel-icon::after{display:none!important}
html body #why-work-with-us .why-panel-icon{display:block!important;width:82px!important;height:82px!important}
html body #why-work-with-us .why-panel-icon > img{display:block!important;width:70px!important;height:70px!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:left center!important}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon,html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-keyword{left:50%!important;right:auto!important;margin-left:0px!important;margin-right:0px!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon{transform:translateX(-50%)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon{position:absolute!important;left:50%!important;right:auto!important;margin-left:-41px!important;margin-right:0px!important;transform:none!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon{position:absolute!important;left:50%!important;right:auto!important;margin-left:0px!important;margin-right:0px!important;transform:translateX(-50%)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{position:absolute!important;left:var(--why-copy-x)!important;right:auto!important;top:26px!important;width:72px!important;height:72px!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;transform:none!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{left:var(--why-copy-x)!important;right:auto!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--enterprise > img{transform:translateX(-14px) scale(1.14)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--senior > img{transform:translateX(-11px) scale(1)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--quality > img{transform:translateX(-10px) scale(1)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--ai > img{transform:translateX(-8px) scale(0.88)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon{position:absolute!important;top:28px!important;left:50%!important;right:auto!important;width:68px!important;height:68px!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;transform:translateX(-50%)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon > img{width:100%!important;height:100%!important;object-position:center center!important;transform:none!important;transform-origin:center center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--evolution > img{transform:scale(1.216)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--enterprise > img{transform:scale(1.16)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--senior > img{transform:scale(1.148)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--ai > img{transform:scale(0.766)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--modernize > img{transform:scale(0.986)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--quality > img{transform:scale(0.899)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{width:68px!important;height:68px!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon > img{transform-origin:center center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--evolution > img{transform:scale(1.216)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--enterprise > img{transform:translateX(-14px) scale(1.16)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--senior > img{transform:translateX(-11px) scale(1.148)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--ai > img{transform:translateX(-8px) scale(0.766)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--modernize > img{transform:scale(0.986)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--quality > img{transform:translateX(-10px) scale(0.899)!important}}
@media (min-width: 1025px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--enterprise > img{transform:translateX(-7px) scale(1.16)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon{left:50%!important;right:auto!important;margin-left:0px!important;margin-right:0px!important;transform:translateX(-50%)!important;align-self:center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon > img{object-position:center center!important;transform-origin:center center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--evolution > img{transform:scale(1.216)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--enterprise > img{transform:scale(1.16)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--senior > img{transform:scale(1.148)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--ai > img{transform:scale(0.766)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--modernize > img{transform:scale(0.986)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--quality > img{transform:scale(0.899)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{position:absolute!important;left:var(--why-copy-x)!important;right:auto!important;top:26px!important;width:68px!important;height:68px!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;transform:none!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon > img{width:68px!important;height:68px!important;max-width:none!important;max-height:none!important;object-position:left center!important;transform-origin:left center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--evolution > img{transform:translateX(-6.44px) scale(1.216)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--enterprise > img{transform:translateX(-10.03px) scale(1.16)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--senior > img{transform:translateX(-6.24px) scale(1.148)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--ai > img{transform:translateX(-7.2px) scale(0.766)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--modernize > img{transform:translateX(-5.37px) scale(0.986)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--quality > img{transform:translateX(-4.78px) scale(0.899)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--senior,html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--quality{left:var(--why-copy-x)!important;right:auto!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--senior > img{transform:scale(1.148)!important;transform-origin:left center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--quality > img{transform:scale(0.899)!important;transform-origin:left center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon{left:50%!important;right:auto!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important;transform:translateX(-50%)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon > img{object-position:center center!important;transform-origin:center center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--evolution > img{transform:translateX(0%) scale(1.216)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--enterprise > img{transform:translateX(0%) scale(1.16)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--senior > img{transform:translateX(-5.38%) scale(1.148)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--ai > img{transform:translateX(-0.07%) scale(0.766)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--modernize > img{transform:translateX(4.62%) scale(0.986)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel:not(.is-v6-active) .why-panel-icon--quality > img{transform:translateX(0.09%) scale(0.899)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon{left:var(--why-copy-x)!important;right:auto!important;margin-top:0px!important;margin-right:0px!important;margin-bottom:0px!important;margin-left:0px!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon > img{object-position:left center!important;transform-origin:left center!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--evolution > img{transform:translateX(-9.5%) scale(1.216)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--enterprise > img{transform:translateX(-14.72%) scale(1.16)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--senior > img{transform:translateX(-19.96%) scale(1.148)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--ai > img{transform:translateX(-10.62%) scale(0.766)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--modernize > img{transform:translateX(-7.9%) scale(0.986)!important}}
@media (min-width: 701px){html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-icon--quality > img{transform:translateX(-7.02%) scale(0.899)!important}}
html body #why-work-with-us.why-v6.why-v9 .why-panel.is-v6-active .why-panel-copy{padding-left:48px!important;padding-right:48px!important}
}
/* ===== ATIMI WHY ICONS 2026-10-01 END ===== */

/* ===== ATIMI GLOBAL STANDARDS 2026-10-02 START =====
   Approved by Atimi (Mike) 2026-10-01/02.
   1. H1 + 50px section H2 line-height 1.2. 25px row titles keep their own.
   2. Hero copy (not title) max-width 600px on every page except Home.
      Titles keep their previous measure so they do not rewrap.
   High specificity on purpose: page stylesheets load after style.css and
   several set heading line-height with !important. */
:root { --atimi-heading-lh: 1.2; --atimi-hero-copy-max: 600px; }

html body h1:not(#atimi-std):not(#atimi-std-2),
html body h2:not(.cs-title h2):not(.contact-form-heading h2):not(.contact-information-title h2):not(#atimi-std):not(#atimi-std-2) {
  line-height: var(--atimi-heading-lh) !important;
}

/* Contact: copy column was 536, widen to 600; title keeps 536 */
html body.page-id-827 .hero-copy:not(#atimi-std) { max-width: var(--atimi-hero-copy-max) !important; }
html body.page-id-827 .hero-copy .elementor-element:has(> h1):not(#atimi-std) { max-width: 536px !important; }

/* Hero copy */
html body.error404 .subhead:not(#atimi-std), html body.error404 .subhead p:not(#atimi-std),
html body .services-hero__intro:not(#atimi-std), html body .services-hero__intro p:not(#atimi-std),
html body .mark-hero__intro:not(#atimi-std), html body .mark-hero__intro p:not(#atimi-std),
html body.page-id-827 .hero-copy .elementor-widget-text-editor:not(#atimi-std), html body.page-id-827 .hero-copy .elementor-widget-text-editor p:not(#atimi-std),
html body .careers-hero-intro:not(#atimi-std), html body .careers-hero-intro p:not(#atimi-std),
html body .careers-hero-recruiter:not(#atimi-std), html body .careers-hero-recruiter p:not(#atimi-std),
html body .case-landing-hero-intro:not(#atimi-std), html body .case-landing-hero-intro p:not(#atimi-std),
html body .harp-hero-lead:not(#atimi-std), html body .harp-hero-lead p:not(#atimi-std) {
  max-width: var(--atimi-hero-copy-max) !important;
}
/* About: about-responsive.css also fixes width at 477px */
html body .mark-hero__intro:not(#atimi-std), html body .mark-hero__intro p:not(#atimi-std) { width: auto !important; }
/* Avoid single-word last lines (Chrome, Edge, Safari 26+; others ignore it) */
html body.error404 .subhead p, html body .services-hero__intro p, html body .mark-hero__intro p,
html body.page-id-827 .hero-copy .elementor-widget-text-editor p, html body .careers-hero-intro p,
html body .careers-hero-recruiter p, html body .case-landing-hero-intro p, html body .harp-hero-lead p {
  text-wrap: pretty;
}
/* ===== ATIMI GLOBAL STANDARDS 2026-10-02 END ===== */
/* 2026-10-13: <picture> wrapper from the Image widget 'Mobile image' option (functions.php). Layout-neutral. */
.atimi-picture { display: contents; }