/* =====================================================================
   OutHyre v2 — stylesheet
   =====================================================================
   PHOTO SLOTS — drop a real photo in by adding one rule per slot, e.g.:
     .photo[data-photo="hero-contact-center"]{background-image:url(img/hero-contact-center.jpg)}
   The navy mask (::before) and designed fallback (ring grid + glow + grain)
   already sit under/over it, so nothing else needs to change.

     slot                 recommended size
     ------------------   ----------------
     hero-contact-center  1920 x 900
     hero-outsourcing     1920 x 900
     hero-about           1920 x 900
     hero-contact         1600 x 1000
     ceo-portrait         800  x 1000

   The home hero has no photo slot: it uses the "brand orbit" illustration
   below instead. A real photo of the floor/team could replace that orbit
   visual later (drop it into the right-hand column in place of .orbit-box).
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  --orange:#FFB511;
  --navy:#141B4D;
  --navy-80:#434971;
  --navy-60:#727694;
  --navy-30:#a1a4b8;
  --navy-15:#d0d1db;
  --navy-08:#e8e8ed;
  --ground:#F5F6FA;
  --white:#ffffff;

  --font:'Poppins', 'Segoe UI', Arial, sans-serif;

  --container:1240px;
  --pad-desktop:96px;
  --pad-mobile:64px;

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;

  --shadow-sm:0 8px 24px rgba(20,27,77,.08);
  --shadow-md:0 16px 40px rgba(20,27,77,.14);
  --shadow-lg:0 24px 60px rgba(20,27,77,.20);

  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--navy);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:600;color:var(--navy)}
svg{display:block;width:24px;height:24px;flex-shrink:0}

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:600px){
  .container{padding:0 22px}
}

/* skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--orange);
  color:var(--navy);
  font-weight:600;
  padding:12px 20px;
  z-index:2000;
  border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* ---------- eyebrow / headings ---------- */
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--orange);
  text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow.on-light{color:#141B4D}
.section-head{
  max-width:62ch;
  margin-bottom:48px;
}
.section-head h2{
  font-size:40px;
  line-height:1.15;
  margin-bottom:16px;
}
.section-head p{
  font-size:17px;
  line-height:1.7;
  color:var(--navy-80);
  font-weight:300;
}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
@media (max-width:700px){
  .section-head h2{font-size:28px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  border:2px solid transparent;
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--orange);
  color:var(--navy);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn-outline-light{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.6);
}
.btn-outline-light:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
  box-shadow:var(--shadow-sm);
}
.btn-outline-dark{
  background:transparent;
  color:var(--navy);
  border-color:var(--navy);
}
.btn-outline-dark:hover{
  transform:translateY(-2px);
  background:var(--navy);
  color:var(--white);
  box-shadow:var(--shadow-sm);
}
.btn svg{width:16px;height:16px}
.btn-arrow{transition:transform 180ms var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  height:76px;
  background:var(--white);
  box-shadow:0 1px 0 rgba(20,27,77,.08);
}
.site-header .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand img{
  width:160px;
  height:auto;
}

.nav-pill{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--navy);
  border-radius:999px;
  height:48px;
  padding:0 10px;
}
.nav-pill a{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:100%;
  padding:0 18px;
  font-size:14px;
  font-weight:500;
  color:var(--white);
  overflow:hidden;
}
.nav-pill a::after{
  content:'';
  position:absolute;
  left:18px;
  right:18px;
  bottom:11px;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 220ms var(--ease);
}
.nav-pill a:hover::after{transform:scaleX(1)}
.nav-pill a.active{color:var(--orange)}
.nav-pill a.active::after{display:none}

.header-cta{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--orange);
  color:var(--navy);
  border-radius:999px;
  padding:6px 18px 6px 6px;
  flex-shrink:0;
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.header-cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.header-cta .icon-circle{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.header-cta .icon-circle svg{width:18px;height:18px}
.header-cta .cta-text{line-height:1.25}
.header-cta .cta-label{
  display:block;
  font-size:11px;
  font-weight:500;
  opacity:.8;
}
.header-cta .cta-value{
  display:block;
  font-size:13px;
  font-weight:600;
}

.hamburger{
  display:none;
  width:44px;
  height:44px;
  border:none;
  background:var(--ground);
  border-radius:12px;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.hamburger span{
  position:relative;
  width:20px;
  height:2px;
  background:var(--navy);
  display:block;
}
.hamburger span::before,.hamburger span::after{
  content:'';
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--navy);
  transition:transform 200ms var(--ease), top 200ms var(--ease);
}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.hamburger[aria-expanded="true"] span{background:transparent}
.hamburger[aria-expanded="true"] span::before{transform:rotate(45deg);top:0}
.hamburger[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0}

.mobile-panel{
  position:fixed;
  top:76px;
  left:0;
  right:0;
  bottom:0;
  background:var(--navy);
  z-index:999;
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transform:translateY(-12px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
  overflow-y:auto;
}
.mobile-panel.open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s;
}
.mobile-panel a.mobile-link{
  font-size:24px;
  font-weight:600;
  color:var(--white);
  padding:14px 4px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-panel a.mobile-link.active{color:var(--orange)}
.mobile-panel .header-cta{
  margin-top:24px;
  align-self:flex-start;
}
body.menu-open{overflow:hidden}
@media (max-width:900px){
  .nav-pill{display:none}
  .site-header .header-cta{display:none}
  .hamburger{display:flex}
}
@media (min-width:901px){
  .mobile-panel{display:none}
}

/* =====================================================================
   PHOTO SLOTS (designed fallback + mask)
   ===================================================================== */
.photo{
  position:relative;
  background-color:var(--navy);
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.photo::before{
  /* navy mask, sits above the designed fallback / real photo */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(20,27,77,.72), rgba(20,27,77,.55));
  z-index:1;
}
.photo::after{
  /* designed fallback: glow (28% + 14% secondary) + ring grid (10%, baked into the svg) + grain (6%, baked into the svg) */
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle 450px at 85% 10%, rgba(255,181,17,.28) 0%, rgba(255,181,17,0) 70%),
    radial-gradient(circle 200px at 12% 92%, rgba(255,181,17,.14) 0%, rgba(255,181,17,0) 70%),
    url('img/ring-grid.svg'),
    url('img/grain.svg');
  background-repeat:no-repeat, no-repeat, repeat, repeat;
  background-size:100% 100%, 100% 100%, 220px 220px, 180px 180px;
  background-position:center, center, center, center;
  opacity:1;
  z-index:0;
}
.photo[style*="background-image"]::after,
.photo.has-photo::after{display:none}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:calc(76px + 64px) 0 130px;
  overflow:hidden;
}
.hero.hero-home{min-height:82vh}
.hero > .photo{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero .container{position:relative;z-index:2;width:100%}
.hero-content{
  max-width:720px;
}
.hero-content .eyebrow{
  opacity:0;
  transform:translateY(10px);
  animation:heroIn 600ms var(--ease) .1s forwards;
}
.hero-content h1{
  opacity:0;
  transform:translateY(14px);
  animation:heroIn 650ms var(--ease) .25s forwards;
  font-size:56px;
  line-height:1.08;
  font-weight:700;
  color:var(--white);
  margin-bottom:22px;
}
.hero-content .hero-sub{
  opacity:0;
  transform:translateY(14px);
  animation:heroIn 650ms var(--ease) .4s forwards;
  font-size:18px;
  line-height:1.65;
  font-weight:300;
  color:rgba(255,255,255,.9);
  max-width:56ch;
  margin-bottom:34px;
}
.hero-content .hero-actions{
  opacity:0;
  transform:translateY(14px);
  animation:heroIn 650ms var(--ease) .55s forwards;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .hero-content .eyebrow,.hero-content h1,.hero-content .hero-sub,.hero-content .hero-actions{
    animation:none;opacity:1;transform:none;
  }
}
.hero-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  width:100%;
  height:90px;
  z-index:2;
  line-height:0;
}
.hero-wave svg{width:100%;height:100%;display:block}
@media (max-width:700px){
  .hero{min-height:auto;padding:calc(76px + 48px) 0 90px}
  .hero-content h1{font-size:36px}
  .hero-content .hero-sub{font-size:16px}
  .hero-wave{display:block;visibility:visible;height:48px}
}

/* =====================================================================
   HOME - HERO (brand orbit)
   White hero: copy left, an orbiting brand-mark visual right (no photo
   slot here, see the note at the top of this file). Scoped to
   .page-home / .hero-home only; every other page keeps the plain
   full-bleed navy hero above untouched. No slant, no wave: the slanted
   seam belongs to the split section below, not the hero.
   ===================================================================== */
.page-home .hero.hero-home{
  display:block;
  min-height:0;
  overflow:hidden;
  background:var(--white);
  padding:calc(76px + 40px) 0 72px; /* 72px white gap before the split section */
}
.page-home .hero-home .hero-row{
  display:flex;
  align-items:center;
  gap:40px;
  min-height:78vh;
}
.page-home .hero-home .hero-content{
  width:52%;
  max-width:52%;
}
.page-home .hero-home .hero-content h1{
  color:var(--navy);
  font-size:56px;
  max-width:12.5em; /* sits in three lines at the desktop column width */
}
.page-home .hero-home .hero-content .hero-sub{
  color:var(--navy-60);
  max-width:42ch;
}
.page-home .hero-home .hero-orbit{
  width:48%;
  max-width:48%;
  display:flex;
  justify-content:center;
}
/* between the mobile stack and full desktop width the left column is
   narrower than the 56px line-length assumes; step the heading down a
   touch so it still settles into three lines (checked at 1024) */
@media (min-width:900px) and (max-width:1279px){
  .page-home .hero-home .hero-content h1{font-size:44px;max-width:11em}
}

/* the square visual box: every child inside is sized/positioned in %
   of this box, so the whole composition scales together */
.page-home .hero-home .orbit-box{
  position:relative;
  width:100%;
  max-width:560px;
  aspect-ratio:1/1;
}

/* background: the existing ring-grid pattern, desaturated and faded to
   a soft circle behind the composition, nothing else back there */
.page-home .hero-home .orbit-bg{
  position:absolute;
  inset:-10%;
  z-index:0;
  background-image:url('img/ring-grid.svg');
  background-repeat:repeat;
  background-size:140px 140px;
  filter:grayscale(1);
  opacity:.08;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
  pointer-events:none;
}

/* the two discs: navy behind, orange overlapping its lower-left edge,
   reading as one mark, echoing the logo's ring and dot */
.page-home .hero-home .orbit-disc{position:absolute;border-radius:50%}
.page-home .hero-home .orbit-disc-navy{
  width:68%;height:68%;left:22%;top:16%;
  background:var(--navy);
  z-index:2;
}
.page-home .hero-home .orbit-disc-orange{
  width:40%;height:40%;left:6%;top:57%;
  background:var(--orange);
  z-index:3;
}

/* three concentric outline rings, centred on the navy disc */
.page-home .hero-home .orbit-ring{
  position:absolute;
  left:56%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:1;
  pointer-events:none;
}
.page-home .hero-home .orbit-ring-inner{width:78%;height:78%;border:1px solid rgba(20,27,77,.18)}
.page-home .hero-home .orbit-ring-middle{width:92%;height:92%;border:1px solid rgba(20,27,77,.12)}
.page-home .hero-home .orbit-ring-outer{width:106%;height:106%;border:1px solid rgba(255,181,17,.30)}
.page-home .hero-home .ring-spin{position:absolute;inset:0;border-radius:50%}
.page-home .hero-home .orbit-ring-outer .ring-spin{animation:orbitSpin 60s linear infinite}
.page-home .hero-home .orbit-ring-middle .ring-spin{animation:orbitSpinReverse 90s linear infinite}
.page-home .hero-home .ring-dot{
  position:absolute;
  top:0;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.page-home .hero-home .ring-dot-orange{width:14px;height:14px;background:var(--orange)}
.page-home .hero-home .ring-dot-navy{width:10px;height:10px;background:var(--navy)}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbitSpinReverse{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){
  .page-home .hero-home .orbit-ring-outer .ring-spin,
  .page-home .hero-home .orbit-ring-middle .ring-spin{animation:none}
}

/* floating chips */
.page-home .hero-home .orbit-chip{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  border:1px solid rgba(20,27,77,.2);
  box-shadow:0 12px 30px -12px rgba(20,27,77,.25);
  border-radius:999px;
  padding:7px 16px 7px 7px;
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  white-space:nowrap;
  animation:chipFloat 7s ease-in-out infinite;
}
.page-home .hero-home .chip-icon{
  width:24px;height:24px;
  border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.page-home .hero-home .chip-icon svg{width:13px;height:13px;color:var(--white)}
.page-home .hero-home .chip-inbound{left:1%;top:15%;animation-delay:0s;animation-duration:7s}
.page-home .hero-home .chip-seat{right:1%;top:1%;animation-delay:1.6s;animation-duration:6.5s}
.page-home .hero-home .chip-recruit{right:-2%;top:66%;animation-delay:3.2s;animation-duration:8s}
.page-home .hero-home .chip-logistics{left:-6%;top:80%;animation-delay:4.8s;animation-duration:7.5s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .page-home .hero-home .orbit-chip{animation:none}
}

@media (max-width:899px){
  .page-home .hero.hero-home{padding:calc(76px + 32px) 0 48px}
  .page-home .hero-home .hero-row{flex-direction:column;align-items:stretch;min-height:auto;gap:0}
  .page-home .hero-home .hero-content{width:auto;max-width:none}
  .page-home .hero-home .hero-content h1{font-size:36px;max-width:none}
  .page-home .hero-home .hero-orbit{width:auto;max-width:none;height:320px;margin-top:28px}
  .page-home .hero-home .orbit-box{width:320px;max-width:100%;margin:0 auto}
  .page-home .hero-home .chip-seat,
  .page-home .hero-home .chip-logistics{display:none}
}

/* =====================================================================
   ABOUT — HERO (the "two halves" mark)
   White hero: copy left, a brand-mark visual right. Scoped to
   .page-about / .hero-about only. No wave, no slant: straight edge,
   72px white gap before the next section, mirroring the home hero.
   ===================================================================== */
.page-about .hero.hero-about{
  display:block;
  min-height:0;
  overflow:hidden;
  background:var(--white);
  padding:calc(76px + 40px) 0 72px;
}
.page-about .hero-about-row{
  display:flex;
  align-items:center;
  gap:40px;
  min-height:56vh;
}
.page-about .hero-about-row .hero-content{
  width:52%;
  max-width:52%;
}
.page-about .hero-about-row .hero-content h1{
  color:var(--navy);
  font-weight:700;
  font-size:52px;
  max-width:12em;
}
.page-about .hero-about-row .hero-about-visual{
  width:48%;
  max-width:48%;
  display:flex;
  justify-content:center;
}
.page-about .mark-box{
  position:relative;
  width:100%;
  max-width:480px;
  aspect-ratio:1/1;
}
.page-about .mark-ring{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}
.page-about .mark-ring-inner{width:86%;height:86%;border:1px solid rgba(20,27,77,.14)}
.page-about .mark-ring-outer{width:100%;height:100%;border:1px solid rgba(255,181,17,.26)}
.page-about .mark-orbit-wrap{
  position:absolute;
  inset:0;
  border-radius:50%;
  transform:rotate(30deg); /* rests at 1 o'clock */
  animation:markOrbit 80s linear infinite;
}
.page-about .mark-orbit-dot{
  position:absolute;
  top:-4px;left:50%;
  margin-left:-4px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 0 3px rgba(20,27,77,.08);
}
@keyframes markOrbit{to{transform:rotate(390deg)}}
@media (prefers-reduced-motion:reduce){
  .page-about .mark-orbit-wrap{animation:none}
}
.page-about .mark-circle{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:72%;height:72%;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  background:var(--white);
  z-index:2;
}
.page-about .mark-half{flex:1;height:100%}
.page-about .mark-half-navy{background:var(--navy);margin-right:1px}
.page-about .mark-half-orange{background:var(--orange);margin-left:1px}
.page-about .mark-chip{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  border:1px solid rgba(20,27,77,.15);
  box-shadow:0 12px 30px -12px rgba(20,27,77,.25);
  border-radius:999px;
  padding:7px 16px 7px 7px;
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  white-space:nowrap;
  animation:chipFloat 7s ease-in-out infinite;
}
.page-about .mark-chip .chip-icon{
  width:24px;height:24px;
  border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.page-about .mark-chip .chip-icon svg{width:13px;height:13px;color:var(--white)}
.page-about .mark-chip-left{left:-6%;top:36%;animation-delay:0s}
.page-about .mark-chip-right{right:-6%;top:58%;animation-delay:2.4s}
@media (prefers-reduced-motion:reduce){
  .page-about .mark-chip{animation:none}
}
@media (max-width:899px){
  .page-about .hero.hero-about{padding:calc(76px + 32px) 0 48px}
  .page-about .hero-about-row{flex-direction:column;align-items:stretch;min-height:auto;gap:0}
  .page-about .hero-about-row .hero-content{width:auto;max-width:none}
  .page-about .hero-about-row .hero-content h1{font-size:36px;max-width:none}
  .page-about .hero-about-row .hero-about-visual{width:auto;max-width:none;margin-top:28px}
  .page-about .mark-box{width:280px;max-width:100%;margin:0 auto}
  .page-about .mark-chip{left:auto}
  .page-about .mark-chip-left{left:2%;top:34%}
  .page-about .mark-chip-right{right:2%;top:60%}
}

/* =====================================================================
   ABOUT: WHO WE ARE
   Two columns: eyebrow + H2 on the left, the three paragraphs on the
   right, top-aligned. Stacks under 900px.
   ===================================================================== */
.page-about .about-who-grid{
  display:flex;
  align-items:flex-start;
  gap:64px;
}
.page-about .about-who-grid .section-head{
  flex:0 0 auto;
  margin-bottom:0;
}
.page-about .about-who-grid .section-head h2{
  max-width:14ch;
}
.page-about .about-who-copy{
  flex:1 1 auto;
  max-width:60ch;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.page-about .about-who-copy p{
  font-size:16px;
  line-height:1.7;
  color:var(--navy-80);
  font-weight:300;
  margin:0;
}
@media (max-width:899px){
  .page-about .about-who-grid{flex-direction:column;gap:32px}
  .page-about .about-who-grid .section-head h2{max-width:none}
  .page-about .about-who-copy{max-width:none}
}

/* =====================================================================
   SECTIONS
   ===================================================================== */
section{
  padding:var(--pad-desktop) 0;
  position:relative;
}
section.on-ground{background:var(--ground)}
section.on-white{background:var(--white)}
@media (max-width:700px){
  section{padding:var(--pad-mobile) 0}
}

.watermark-icon{
  position:absolute;
  top:50%;
  right:-240px;
  transform:translateY(-50%);
  width:600px;
  height:600px;
  opacity:.04;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.watermark-icon img{width:100%;height:100%;object-fit:contain}
@media (max-width:900px){
  .watermark-icon{width:340px;height:340px;right:-136px}
}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.in-view{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   HOME — SPLIT SECTION
   ===================================================================== */
.split{
  display:flex;
  min-height:520px;
  position:relative;
}
.split-half{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  padding:72px 64px;
  transition:flex 350ms ease;
  overflow:hidden;
}
.split-half.navy-half{
  background:var(--navy);
  color:var(--white);
  clip-path:polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  z-index:1;
}
.split-half.orange-half{
  background:var(--orange);
  color:var(--navy);
  margin-left:-60px;
  padding-left:124px;
}
@media (min-width:901px){
  .split-half.grow{flex:1.15}
  .split-half.shrink{flex:.85}
}
.split-ring{
  position:absolute;
  border-radius:50%;
  border:2px solid;
  pointer-events:none;
  z-index:0;
}
.navy-half .split-ring{
  border-color:rgba(255,181,17,.35);
  width:280px;height:280px;
  right:-90px;bottom:-90px;
}
.orange-half .split-ring{
  border-color:rgba(20,27,77,.25);
  width:220px;height:220px;
  left:-70px;top:-70px;
}
.split-inner{position:relative;z-index:2;max-width:440px}
.split-inner .eyebrow{margin-bottom:12px}
.navy-half .eyebrow{color:var(--orange)}
.orange-half .eyebrow{color:var(--navy)}
.split-inner h2{
  font-size:36px;
  line-height:1.18;
  margin-bottom:24px;
}
.orange-half h2{color:var(--navy)}
.navy-half h2{color:var(--white)}
.split-list{margin-bottom:32px}
.split-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:9px 0;
  font-size:15px;
  font-weight:300;
}
.split-list svg{width:18px;height:18px;flex-shrink:0;margin-top:3px}
.navy-half .split-list svg{color:var(--orange)}
.orange-half .split-list svg{color:var(--navy)}

@media (max-width:900px){
  .split{flex-direction:column;min-height:auto}
  .split-half.navy-half{clip-path:none}
  .split-half.orange-half{margin-left:0;padding-left:64px}
  .split-half{padding:56px 32px}
}
@media (max-width:600px){
  .split-half{padding:48px 24px}
  .split-inner h2{font-size:28px}
}

/* =====================================================================
   WHY CHOOSE US / POINTS
   ===================================================================== */
.points-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:48px;
}
.point-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:32px 28px;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.page-home .point-card:hover,
.page-home .point-card:focus-within{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -18px rgba(20,27,77,.35);
  border-color:rgba(255,181,17,.6);
}
.page-home .point-card .icon-circle{transition:background 220ms ease, color 220ms ease}
.page-home .point-card:hover .icon-circle,
.page-home .point-card:focus-within .icon-circle{
  background:var(--orange);
  color:var(--navy);
}
@media (prefers-reduced-motion:reduce){
  .page-home .point-card{transition:box-shadow 220ms ease, border-color 220ms ease}
  .page-home .point-card:hover,
  .page-home .point-card:focus-within{transform:none}
}
@media (hover:none){
  .page-home .point-card:active{
    box-shadow:0 18px 40px -18px rgba(20,27,77,.35);
    border-color:rgba(255,181,17,.6);
  }
}
.point-card h3{
  font-size:18px;
  margin-bottom:12px;
  color:var(--navy);
}
.point-card p{
  font-size:15px;
  line-height:1.7;
  color:var(--navy-80);
  font-weight:400;
}
@media (max-width:900px){
  .points-grid{grid-template-columns:1fr;gap:20px}
}

/* =====================================================================
   COUNTERS
   ===================================================================== */
.counters{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  text-align:center;
}
.counter-item .counter-num{
  font-size:56px;
  font-weight:700;
  color:var(--navy);
  line-height:1;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
}
.counter-item .counter-label{
  margin-top:10px;
  font-size:13px;
  font-weight:500;
  color:var(--navy-60);
}
@media (max-width:900px){
  .counters{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .counter-item .counter-num{font-size:44px}
}

/* =====================================================================
   SERVICE TILES
   ===================================================================== */
.tiles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.tile{
  position:relative;
  height:280px;
  border:none;
  border-radius:var(--radius-md);
  padding:0;
  text-align:left;
  overflow:hidden;
  color:var(--white);
  box-shadow:var(--shadow-sm);
}
.tile-face{
  position:absolute;
  inset:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:opacity 260ms var(--ease);
}
.tile-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.tile-icon svg{width:26px;height:26px}
.tile-title{
  font-size:20px;
  font-weight:600;
  line-height:1.3;
}
.tile-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tile-teaser{
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  opacity:.8;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tile-panel{
  position:absolute;
  inset:0;
  background:var(--white);
  color:var(--navy);
  padding:24px;
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform 320ms var(--ease);
  overflow-y:auto;
}
.tile-panel-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--navy);
  flex-shrink:0;
}
.tile-panel p{
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  color:var(--navy-80);
}
.tile[aria-expanded="true"] .tile-panel{transform:translateY(0)}
.tile[aria-expanded="true"] .tile-face{opacity:0}
@media (hover:hover){
  .tile:hover .tile-panel{transform:translateY(0)}
  .tile:hover .tile-face{opacity:0}
}

.tile-navy{background:var(--navy)}
.tile-orange{background:var(--orange);color:var(--navy)}
.tile-navy80{background:var(--navy-80)}
.tile-navy60{background:var(--navy-60)}
.tile-orange .tile-icon svg{color:var(--navy)}
.tile-navy .tile-icon svg,.tile-navy80 .tile-icon svg,.tile-navy60 .tile-icon svg{color:var(--navy)}

@media (max-width:900px){
  .tiles-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .tiles-grid{grid-template-columns:1fr}
}

/* full-width feature tile (e.g. an odd tile left orphaned in the grid) */
.tile-feature{
  grid-column:1 / -1;
  min-height:180px;
  background:var(--navy-80);
  color:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  gap:28px;
  padding:32px 40px;
}
.tile-feature .tile-icon{
  background:rgba(255,255,255,.92);
  flex-shrink:0;
}
.tile-feature .tile-icon svg{color:var(--navy)}
.tile-feature-copy{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tile-feature-title{
  font-size:20px;
  font-weight:600;
  color:var(--white);
}
.tile-feature-text{
  font-size:15px;
  line-height:1.65;
  font-weight:400;
  color:rgba(255,255,255,.85);
  max-width:64ch;
}
@media (max-width:700px){
  .tile-feature{
    flex-direction:column;
    align-items:flex-start;
    min-height:auto;
    padding:28px 24px;
  }
}

/* =====================================================================
   INDUSTRIES STRIP (marquee)
   ===================================================================== */
.industries-viewport{
  overflow:hidden;
  margin-top:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.industries-track{
  display:flex;
  width:max-content;
  animation:marquee 40s linear infinite;
}
.industries-set{
  display:flex;
  gap:56px;
  padding-right:56px;
}
.industries-viewport:hover .industries-track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.industry-item{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  white-space:nowrap;
}
.industry-icon{flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--navy-08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.industry-icon svg{width:24px;height:24px;color:var(--navy)}
.industry-item span:not(.industry-icon){font-size:14.5px;font-weight:500;color:var(--navy)}

@media (prefers-reduced-motion:reduce){
  .industries-track{animation:none;width:100%}
  .industries-viewport{mask-image:none;-webkit-mask-image:none}
  .industries-set{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px 24px;
    width:100%;
    padding-right:0;
  }
  .industries-set[aria-hidden="true"]{display:none}
  .industries-set .industry-item{white-space:normal}
}
@media (max-width:899px){
  .industries-track{animation:none;width:100%}
  .industries-viewport{mask-image:none;-webkit-mask-image:none}
  .industries-set{display:grid;grid-template-columns:1fr;gap:22px 14px;width:100%;padding-right:0}
  .industries-set[aria-hidden="true"]{display:none}
  .industry-item{white-space:normal;align-items:center;min-width:0;gap:10px}
  .industry-item span:not(.industry-icon){font-size:13.5px;line-height:1.35;white-space:normal;word-break:normal;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none;flex:1;min-width:0}
  .industry-icon{width:42px;height:42px;flex:0 0 42px}
  .industry-icon svg{width:20px;height:20px}
}
@media (min-width:701px) and (max-width:899px){
  .industries-set{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band{
  background:var(--navy);
  position:relative;
  overflow:hidden;
  text-align:left;
}
.cta-band-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-band h2{
  color:var(--white);
  font-size:34px;
  max-width:16ch;
}
@media (max-width:700px){
  .cta-band-inner{text-align:center;justify-content:center;flex-direction:column}
  .cta-band h2{max-width:none;font-size:26px}
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{
  background:var(--navy);
  color:var(--navy-15);
  padding:72px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:48px;
}
.footer-col img{width:150px;margin-bottom:18px}
.footer-col p{font-size:14px;line-height:1.7;color:var(--navy-30);font-weight:300}
.footer-col h4{
  color:var(--white);
  font-size:14px;
  font-weight:600;
  margin-bottom:18px;
  letter-spacing:.03em;
}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a,.footer-col ul li{
  font-size:14px;
  color:var(--navy-30);
  font-weight:300;
}
.footer-col ul li a:hover{color:var(--orange)}
.footer-socials{display:flex;gap:12px;margin-top:20px}
.footer-socials a{
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  transition:background 180ms var(--ease), transform 180ms var(--ease);
}
.footer-socials a:hover{background:var(--orange);transform:translateY(-2px)}
.footer-socials svg{width:16px;height:16px;color:var(--white)}
.footer-socials a:hover svg{color:var(--navy)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0;
  font-size:13px;
  color:var(--navy-30);
  text-align:center;
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:36px}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;row-gap:32px;text-align:left}
}

/* =====================================================================
   PAGE: contact-center — "Why Egypt" cards
   ===================================================================== */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.why-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:30px 24px;
  box-shadow:var(--shadow-sm);
}
.why-card .tile-icon{background:var(--navy-08);margin-bottom:18px}
.why-card .tile-icon svg{color:var(--navy)}
.why-card h3{font-size:17px;margin-bottom:10px}
.why-card p{font-size:15px;line-height:1.65;color:var(--navy-80);font-weight:400}
@media (max-width:900px){
  .why-grid{grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:600px){
  .why-grid{grid-template-columns:1fr}
}

/* =====================================================================
   PAGE: outsourcing — "Who we serve"
   ===================================================================== */
.serve-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
}
.serve-text p{
  font-size:17px;
  line-height:1.75;
  color:var(--navy-80);
  font-weight:300;
  margin-top:18px;
}
.serve-panel{
  background:var(--navy);
  border-radius:var(--radius-lg);
  padding:44px 36px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.serve-stat{
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.serve-stat:last-child{border-bottom:none}
.serve-stat .stat-num{
  font-size:34px;
  font-weight:700;
  color:var(--orange);
  margin-bottom:4px;
}
.serve-stat .stat-label{
  font-size:14px;
  color:rgba(255,255,255,.8);
  font-weight:300;
}
@media (max-width:900px){
  .serve-layout{grid-template-columns:1fr;gap:36px}
}

/* =====================================================================
   PAGE: about — mission/vision, CEO, careers
   ===================================================================== */
.mv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.mv-card{
  background:var(--white);
  border:1px solid rgba(20,27,77,.2);
  box-shadow:var(--shadow-sm);
  border-radius:20px;
  padding:40px 36px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mv-card .mv-icon{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  flex-shrink:0;
}
.mv-card.navy .mv-icon{background:var(--navy)}
.mv-card.orange .mv-icon{background:var(--orange)}
.mv-card .mv-icon svg{width:24px;height:24px;color:var(--white)}
.mv-card h3{font-size:22px;margin-bottom:14px;color:var(--navy)}
.mv-card p{font-size:15px;line-height:1.7;font-weight:400;color:var(--navy-80)}
@media (max-width:800px){
  .mv-grid{grid-template-columns:1fr}
}

.ceo-block{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:center;
}
.ceo-photo-wrap{position:relative}
.ceo-photo-wrap .photo{
  position:relative;
  z-index:1;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--navy);
}
.ceo-photo-wrap .photo::after{
  /* plain navy panel: no ring-grid, no glow, no grain */
  display:none;
}
.ceo-photo-wrap .photo .ceo-photo-mark{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:34%;
  height:auto;
  opacity:.22;
  pointer-events:none;
}
.ceo-photo-wrap .photo .ceo-photo-ring{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:60%;
  aspect-ratio:1/1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  pointer-events:none;
}
/* photo hook: once a real photo is added (see the note at the top of this
   file), the same rules the rest of the site uses to swap out a fallback
   also hide this designed placeholder so the photo shows cleanly. */
.ceo-photo-wrap .photo.has-photo .ceo-photo-mark,
.ceo-photo-wrap .photo.has-photo .ceo-photo-ring,
.ceo-photo-wrap .photo[style*="background-image"] .ceo-photo-mark,
.ceo-photo-wrap .photo[style*="background-image"] .ceo-photo-ring{
  display:none;
}
.ceo-quote{position:relative}
.ceo-quote .quote-mark{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:110px;
  line-height:.6;
  color:var(--orange);
  display:block;
  margin-bottom:8px;
}
.ceo-quote blockquote{
  font-size:28px;
  font-weight:500;
  line-height:1.4;
  color:var(--navy);
  margin:0 0 24px;
}
.ceo-quote .ceo-para{
  font-size:15.5px;
  line-height:1.75;
  color:var(--navy-80);
  font-weight:300;
  margin-bottom:22px;
}
.ceo-quote .ceo-name{font-size:17px;font-weight:600;color:var(--navy)}
.ceo-quote .ceo-title{font-size:14px;color:var(--navy-60)}
@media (max-width:900px){
  .ceo-block{grid-template-columns:1fr;gap:36px}
  .ceo-photo-wrap .photo{max-width:340px;margin:0 auto}
  .ceo-quote blockquote{font-size:22px}
}

.careers-panel{
  background:var(--navy);
  border-radius:var(--radius-lg);
  padding:64px;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.careers-panel .section-head{position:relative;z-index:1;max-width:640px}
.careers-panel .section-head p{font-size:15px;font-weight:400;color:rgba(255,255,255,.85)}
.careers-panel .section-head h2{color:var(--white)}
.careers-panel-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
@media (max-width:700px){
  .careers-panel{padding:44px 24px}
}

/* =====================================================================
   PAGE: contact — navy hero (thin ring + dot mark), straight edge, no
   wave, no slant, no pattern. Cards overlap the hero's bottom edge by
   80px (not a slant — a deliberate layered overlap).
   ===================================================================== */
.page-contact .contact-hero{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  min-height:58vh;
  background:var(--navy);
  padding:calc(76px + 40px) 0 64px;
}
.page-contact .contact-hero-row{
  display:flex;
  align-items:center;
  gap:40px;
  width:100%;
}
.page-contact .contact-hero-row .hero-content{
  width:52%;
  max-width:52%;
}
.page-contact .contact-hero-row .hero-content h1{font-size:52px}
.page-contact .contact-hero-row .hero-content .hero-sub{
  color:rgba(255,255,255,.8);
  max-width:42ch;
}
.page-contact .contact-hero-row .contact-hero-visual{
  width:48%;
  max-width:48%;
  display:flex;
  justify-content:center;
}
.page-contact .contact-mark-box{
  position:relative;
  width:100%;
  max-width:480px;
  aspect-ratio:1/1;
}
.page-contact .contact-mark-ring{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:79%;height:79%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  pointer-events:none;
}
.page-contact .contact-mark-dot{
  position:absolute;
  left:84%;top:30.5%;
  transform:translate(-50%,-50%);
  width:24px;height:24px;
  border-radius:50%;
  background:var(--orange);
  z-index:2;
}
.page-contact .contact-mark-chip{
  position:absolute;
  z-index:4;
  left:6%;top:68%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.35);
  border-radius:999px;
  padding:7px 16px 7px 7px;
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  white-space:nowrap;
  animation:chipFloat 7s ease-in-out infinite;
}
.page-contact .contact-mark-chip .chip-icon{
  width:24px;height:24px;
  border-radius:50%;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.page-contact .contact-mark-chip .chip-icon svg{width:13px;height:13px;color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .page-contact .contact-mark-chip{animation:none}
}
@media (max-width:899px){
  .page-contact .contact-hero{min-height:auto;padding:calc(76px + 32px) 0 40px}
  .page-contact .contact-hero-row{flex-direction:column;align-items:stretch;gap:0}
  .page-contact .contact-hero-row .hero-content{width:auto;max-width:none}
  .page-contact .contact-hero-row .contact-hero-visual{width:auto;max-width:none;margin-top:28px}
  .page-contact .contact-mark-box{width:260px;max-width:100%;margin:0 auto}
}
.contact-section{
  margin-top:-80px;
  position:relative;
  z-index:3;
  padding-top:0;
}
.contact-cards{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:28px;
}
.contact-card{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.contact-card.info{
  background:var(--orange);
  color:var(--navy);
  padding:44px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-card.info h3{font-size:22px;margin-bottom:26px;color:var(--navy)}
.info-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-bottom:1px solid rgba(20,27,77,.15);
}
.info-row:first-of-type{padding-top:0}
.info-row .icon-circle{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.info-row .icon-circle svg{width:18px;height:18px;color:var(--white)}
.info-row .info-label{font-size:12px;color:rgba(20,27,77,.65);margin-bottom:2px}
.info-row .info-value{font-size:15px;font-weight:500;color:var(--navy)}
.info-note{
  margin-top:22px;
  font-size:15px;
  color:rgba(20,27,77,.7);
  font-weight:400;
}
.contact-card.form{
  background:var(--white);
  border:1px solid rgba(20,27,77,.2);
  padding:44px 38px;
}
.contact-card.form h3{font-size:22px;margin-bottom:26px}
.field{margin-bottom:20px}
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--navy-80);
  margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;
  border:1.5px solid var(--navy-15);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  font-family:inherit;
  font-size:15px;
  color:var(--navy);
  background:var(--ground);
  transition:border-color 180ms var(--ease);
}
.field input:focus,.field textarea:focus{
  border-color:var(--orange);
  outline:none;
}
.field textarea{resize:vertical;min-height:120px}
.field .req{color:var(--orange)}
.form-error{
  color:#141B4D;
  font-size:12.5px;
  margin-top:6px;
  display:none;
}
.field.invalid input,.field.invalid textarea{border-color:#FFB511;box-shadow:0 0 0 3px rgba(255,181,17,.25)}
.field.invalid .form-error{display:block}
.thank-you{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:rgba(20,27,77,.2);
  border-radius:10px;
  padding:16px 18px;
  margin-top:18px;
  font-size:14px;
  line-height:1.6;
  color:var(--navy);
}
.thank-you[hidden]{display:none}
.thank-you svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:var(--orange)}

@media (max-width:900px){
  .contact-cards{grid-template-columns:1fr}
  .contact-section{margin-top:-60px}
}
@media (max-width:600px){
  .contact-card.info,.contact-card.form{padding:32px 24px}
}

/* =====================================================================
   PAGE: contact-center — "signal" hero
   Scoped entirely under .page-contact-center. Solid navy, no wave, no
   ring-grid/glow/grain fallback (no .photo element used at all — see
   the HTML comment in place of a photo slot). Left copy / right visual,
   52%/48% desktop, stacked on mobile.
   ===================================================================== */
.page-contact-center .hero-signal{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  min-height:64vh;
  background:var(--navy);
  padding:calc(76px + 48px) 0 48px;
}
.page-contact-center .hero-signal-row{
  display:flex;
  align-items:center;
  gap:40px;
  width:100%;
}
.page-contact-center .hero-signal-row .hero-content{
  width:52%;
  max-width:52%;
}
.page-contact-center .hero-signal-row .hero-content h1{
  font-size:52px;
}
.page-contact-center .hero-signal-row .hero-content .hero-sub{
  color:rgba(255,255,255,.8);
  max-width:42ch;
}
.page-contact-center .hero-signal-row .hero-signal-visual{
  width:48%;
  max-width:48%;
  display:flex;
  justify-content:center;
}

/* the square visual: every child is positioned in % of this box so the
   whole composition scales together */
.page-contact-center .signal-box{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:1/1;
  --cx:54%;
  --cy:50%;
  --pulse-start:.06;
}
.page-contact-center .signal-ring{
  position:absolute;
  left:var(--cx);
  top:var(--cy);
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  pointer-events:none;
  z-index:1;
}
.page-contact-center .signal-ring-1{width:18%;height:18%;border-color:rgba(255,255,255,.45)}
.page-contact-center .signal-ring-2{width:32%;height:32%;border-color:rgba(255,255,255,.38)}
.page-contact-center .signal-ring-3{width:46%;height:46%;border-color:rgba(255,255,255,.30)}
.page-contact-center .signal-ring-4{width:60%;height:60%;border-color:rgba(255,255,255,.23)}
.page-contact-center .signal-ring-5{width:74%;height:74%;border-color:rgba(255,255,255,.15)}
.page-contact-center .signal-ring-6{width:88%;height:88%;border-color:rgba(255,255,255,.08)}
.page-contact-center .signal-dot{
  position:absolute;
  left:var(--cx);
  top:var(--cy);
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--orange);
  transform:translate(-50%,-50%);
  z-index:3;
}
.page-contact-center .signal-pulse{
  position:absolute;
  left:var(--cx);
  top:var(--cy);
  width:100%;
  height:100%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  transform:translate(-50%,-50%) scale(var(--pulse-start));
  opacity:.3;
  animation:signalPulse 6s linear infinite;
  pointer-events:none;
  z-index:1;
}
.page-contact-center .signal-pulse-2{animation-delay:3s}
@keyframes signalPulse{
  0%{transform:translate(-50%,-50%) scale(var(--pulse-start));opacity:.3}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
.page-contact-center .signal-node{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  transform:translate(-50%,-50%);
  z-index:2;
}
.page-contact-center .signal-node-1{left:74%;top:38.5%}
.page-contact-center .signal-node-2{left:22%;top:68.5%}
.page-contact-center .signal-chip{
  position:absolute;
  left:80%;
  top:64%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  box-shadow:0 12px 30px -12px rgba(20,27,77,.25);
  border-radius:999px;
  padding:7px 16px 7px 7px;
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  white-space:nowrap;
  animation:chipFloat 7s ease-in-out infinite;
  z-index:4;
}
.page-contact-center .signal-chip .chip-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.page-contact-center .signal-chip .chip-icon svg{width:13px;height:13px;color:var(--navy)}

@media (prefers-reduced-motion:reduce){
  .page-contact-center .signal-pulse{display:none}
  .page-contact-center .signal-chip{animation:none}
}

/* exact 72px (48px mobile) white gap before the next (unmodified) section */
.page-contact-center .hero-signal + section{padding-top:72px}

@media (max-width:899px){
  .page-contact-center .hero-signal{min-height:auto;padding:calc(76px + 32px) 0 40px}
  .page-contact-center .hero-signal-row{flex-direction:column;align-items:stretch;gap:0}
  .page-contact-center .hero-signal-row .hero-content{width:auto;max-width:none}
  .page-contact-center .hero-signal-row .hero-content h1{font-size:36px}
  .page-contact-center .hero-signal-row .hero-signal-visual{width:auto;max-width:none;margin-top:28px}
  .page-contact-center .signal-box{width:300px;max-width:100%;margin:0 auto;--pulse-start:.1}
  .page-contact-center .hero-signal + section{padding-top:48px}
}

/* =====================================================================
   PAGE: contact-center — service tiles rework
   White tiles at rest, navy on hover/open, white text in the reveal
   panel. No color cycling: every tile identical. Overrides the shared
   .tile / .tile-panel / .tile-feature rules above, scoped to this page
   only — outsourcing.html keeps its tile-navy/orange/80/60 cycling.
   ===================================================================== */
.page-contact-center .tiles-grid .tile{
  background:var(--white);
  border:1px solid rgba(20,27,77,.2);
  color:var(--navy);
  box-shadow:0 10px 30px -18px rgba(20,27,77,.25);
  transition:background 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.page-contact-center .tiles-grid .tile .tile-icon{
  background:rgba(255,181,17,.15);
  transition:background 220ms var(--ease);
}
.page-contact-center .tiles-grid .tile .tile-icon svg{color:var(--navy)}
.page-contact-center .tiles-grid .tile .tile-title{
  color:var(--navy);
  font-size:20px;
  font-weight:600;
  transition:color 220ms var(--ease);
}
.page-contact-center .tiles-grid .tile .tile-teaser{
  color:var(--navy-60);
  opacity:1;
  font-size:15px;
}
.page-contact-center .tiles-grid .tile .tile-panel{
  background:var(--navy);
  color:var(--white);
}
.page-contact-center .tiles-grid .tile .tile-panel-title{color:var(--white)}
.page-contact-center .tiles-grid .tile .tile-panel p{color:rgba(255,255,255,.85)}

.page-contact-center .tiles-grid .tile[aria-expanded="true"]{
  background:var(--navy);
  border-color:var(--navy);
}
.page-contact-center .tiles-grid .tile[aria-expanded="true"] .tile-icon{background:var(--orange)}
.page-contact-center .tiles-grid .tile[aria-expanded="true"] .tile-icon svg{color:var(--navy)}
.page-contact-center .tiles-grid .tile[aria-expanded="true"] .tile-title{color:var(--white)}
@media (hover:hover){
  .page-contact-center .tiles-grid .tile:hover{
    background:var(--navy);
    border-color:var(--navy);
  }
  .page-contact-center .tiles-grid .tile:hover .tile-icon{background:var(--orange)}
  .page-contact-center .tiles-grid .tile:hover .tile-icon svg{color:var(--navy)}
  .page-contact-center .tiles-grid .tile:hover .tile-title{color:var(--white)}
}

/* consultation feature tile: the only navy block in the grid at rest */
.page-contact-center .tile-feature{
  background:var(--navy);
  transition:transform 220ms var(--ease);
}
.page-contact-center .tile-feature .tile-icon{background:var(--orange)}
.page-contact-center .tile-feature .tile-icon svg{color:var(--navy)}
@media (hover:hover){
  .page-contact-center .tile-feature:hover{transform:translateY(-4px)}
}

/* mobile: let an open tile grow to fit its text instead of clipping at
   the fixed tile height */
@media (max-width:600px){
  .page-contact-center .tiles-grid .tile[aria-expanded="true"]{height:auto}
  .page-contact-center .tiles-grid .tile[aria-expanded="true"] .tile-panel{
    position:relative;
    inset:auto;
    transform:none;
    overflow-y:visible;
  }
}

/* tile height 280px -> 250px and a larger icon badge, contact-center +
   outsourcing service tiles only (the feature tile is unchanged) */
.page-contact-center .tiles-grid .tile,
.page-outsourcing .tiles-grid .tile{
  height:250px;
}
.page-contact-center .tiles-grid .tile .tile-icon,
.page-outsourcing .tiles-grid .tile .tile-icon{
  width:56px;
  height:56px;
}
.page-contact-center .tiles-grid .tile .tile-icon svg,
.page-outsourcing .tiles-grid .tile .tile-icon svg{
  width:26px;
  height:26px;
}

/* =====================================================================
   PAGE: outsourcing — "route" hero
   Solid orange, no wave, no pattern, no glow, no grain. Left copy / right
   an inline SVG route winding through five nodes, a dot travelling it,
   two floating chips. Scoped entirely under .page-outsourcing, mirrors
   the contact-center hero-signal structure. Straight bottom edge, then
   an exact 72px (48px mobile) white gap before the next (unmodified)
   section.
   ===================================================================== */
.page-outsourcing :focus-visible{
  outline-color:var(--navy);
}
.page-outsourcing .hero-route{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  min-height:64vh;
  background:var(--orange);
  padding:calc(76px + 48px) 0 48px;
}
.page-outsourcing .hero-route-row{
  display:flex;
  align-items:center;
  gap:40px;
  width:100%;
}
.page-outsourcing .hero-route-row .hero-content{
  width:52%;
  max-width:52%;
}
.page-outsourcing .hero-route-row .hero-content .eyebrow{
  color:var(--navy);
}
.page-outsourcing .hero-route-row .hero-content h1{
  color:var(--navy);
  font-weight:700;
  font-size:52px;
}
.page-outsourcing .hero-route-row .hero-content .hero-sub{
  color:var(--navy-80);
  max-width:42ch;
}
.page-outsourcing .hero-route-row .hero-route-visual{
  width:48%;
  max-width:48%;
  display:flex;
  justify-content:center;
}

/* the visual box: 5/4, every child sized/positioned to scale together */
.page-outsourcing .route-box{
  position:relative;
  width:100%;
  max-width:560px;
  aspect-ratio:5/4;
}
.page-outsourcing .route-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.page-outsourcing .route-echo{
  stroke:rgba(255,255,255,.45);
  stroke-width:1;
}
.page-outsourcing .route-path{
  stroke:var(--navy);
  stroke-opacity:.55;
  stroke-width:1.5;
  stroke-dasharray:6 4;
  stroke-linecap:round;
}
.page-outsourcing .route-node-ring{
  fill:var(--orange);
  stroke:var(--navy);
  stroke-width:1.5;
}
.page-outsourcing .route-node-center{
  fill:var(--navy);
}
.page-outsourcing .route-halo{
  fill:#fff;
  fill-opacity:.35;
}
.page-outsourcing .route-dot{
  fill:var(--navy);
}
.page-outsourcing .route-static-dot{
  fill:var(--navy);
  display:none;
}
@media (prefers-reduced-motion:reduce){
  .page-outsourcing .route-moving{display:none}
  .page-outsourcing .route-static-dot{display:block}
}

/* floating chips */
.page-outsourcing .route-chip{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  box-shadow:0 12px 30px -12px rgba(20,27,77,.25);
  border-radius:999px;
  padding:7px 16px 7px 7px;
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  white-space:nowrap;
  animation:chipFloat 7s ease-in-out infinite;
}
.page-outsourcing .route-chip .chip-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.page-outsourcing .route-chip .chip-icon svg{width:13px;height:13px;color:var(--white)}
.page-outsourcing .route-chip-riders{left:16%;top:76%;animation-delay:0s;animation-duration:7s}
.page-outsourcing .route-chip-payroll{left:55%;top:39%;animation-delay:2.4s;animation-duration:7.6s}
@media (prefers-reduced-motion:reduce){
  .page-outsourcing .route-chip{animation:none}
}

/* exact 72px (48px mobile) white gap before the next (unmodified) section */
.page-outsourcing .hero-route + section{padding-top:72px}

@media (max-width:899px){
  .page-outsourcing .hero-route{min-height:auto;padding:calc(76px + 32px) 0 40px}
  .page-outsourcing .hero-route-row{flex-direction:column;align-items:stretch;gap:0}
  .page-outsourcing .hero-route-row .hero-content{width:auto;max-width:none}
  .page-outsourcing .hero-route-row .hero-content h1{font-size:36px}
  .page-outsourcing .hero-route-row .hero-route-visual{width:auto;max-width:none;height:280px;margin-top:28px}
  .page-outsourcing .route-box{width:350px;height:280px;max-width:100%;aspect-ratio:auto;margin:0 auto}
  .page-outsourcing .route-chip-payroll{display:none}
  .page-outsourcing .hero-route + section{padding-top:48px}
}

/* =====================================================================
   PAGE: outsourcing — service tiles rework
   White tiles at rest, orange on hover/open, navy text throughout. No
   color cycling: every tile identical (the tile-navy/orange/80/60
   modifier classes are not used on this page). Overrides the shared
   .tile / .tile-panel rules above, scoped to this page only —
   contact-center keeps its own separate rework further up this file.
   ===================================================================== */
.page-outsourcing .tiles-grid .tile{
  background:var(--white);
  border:1px solid rgba(20,27,77,.2);
  color:var(--navy);
  box-shadow:var(--shadow-sm);
  transition:background 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.page-outsourcing .tiles-grid .tile .tile-icon{
  background:rgba(20,27,77,.1);
  transition:background 220ms var(--ease);
}
.page-outsourcing .tiles-grid .tile .tile-icon svg{color:var(--navy)}
.page-outsourcing .tiles-grid .tile .tile-title{
  color:var(--navy);
  font-size:20px;
  font-weight:600;
}
.page-outsourcing .tiles-grid .tile .tile-teaser{
  color:var(--navy-60);
  opacity:1;
  font-size:15px;
}
.page-outsourcing .tiles-grid .tile .tile-panel{
  background:var(--orange);
  color:var(--navy);
}
.page-outsourcing .tiles-grid .tile .tile-panel-title{color:var(--navy)}
.page-outsourcing .tiles-grid .tile .tile-panel p{
  color:var(--navy);
  font-size:15px;
  line-height:1.6;
}

.page-outsourcing .tiles-grid .tile[aria-expanded="true"]{
  background:var(--orange);
  border-color:var(--orange);
}
.page-outsourcing .tiles-grid .tile[aria-expanded="true"] .tile-icon{background:var(--navy)}
.page-outsourcing .tiles-grid .tile[aria-expanded="true"] .tile-icon svg{color:var(--white)}
.page-outsourcing .tiles-grid .tile[aria-expanded="true"] .tile-title{color:var(--navy)}
@media (hover:hover){
  .page-outsourcing .tiles-grid .tile:hover{
    background:var(--orange);
    border-color:var(--orange);
  }
  .page-outsourcing .tiles-grid .tile:hover .tile-icon{background:var(--navy)}
  .page-outsourcing .tiles-grid .tile:hover .tile-icon svg{color:var(--white)}
  .page-outsourcing .tiles-grid .tile:hover .tile-title{color:var(--navy)}
}

/* mobile: let an open tile grow to fit its text instead of clipping at
   the fixed 280px tile height */
@media (max-width:600px){
  .page-outsourcing .tiles-grid .tile[aria-expanded="true"]{height:auto}
  .page-outsourcing .tiles-grid .tile[aria-expanded="true"] .tile-panel{
    position:relative;
    inset:auto;
    transform:none;
    overflow-y:visible;
  }
}

/* =====================================================================
   PAGE: outsourcing — "who we serve" stat panel
   Orange panel, navy numbers and labels, no pattern. Overrides the
   shared .serve-panel rules above (unstyled here for other pages,
   defined originally with a navy background — kept for reference).
   ===================================================================== */
.page-outsourcing .serve-panel{
  background:var(--orange);
  border-radius:20px;
}
.page-outsourcing .serve-stat{
  border-bottom:1px solid rgba(20,27,77,.15);
}
.page-outsourcing .serve-stat .stat-num{
  font-size:40px;
  font-weight:700;
  color:var(--navy);
}
.page-outsourcing .serve-stat .stat-label{
  color:rgba(20,27,77,.7);
  font-weight:300;
}

/* =====================================================================
   PAGE: ABOUT — CEO block without a portrait
   No client photo supplied, so the quote takes the full content
   width, centered, capped so it stays readable.
   ===================================================================== */
.page-about .ceo-block{
  grid-template-columns:1fr;
}
.page-about .ceo-quote{
  max-width:820px;
  margin:0 auto;
  text-align:center;
}