/* ===== Interior page hero ===== */
.page-hero{background:var(--grey);color:var(--ink);padding:190px 0 50px;position:relative;overflow:hidden;background-image:linear-gradient(rgba(46,125,247,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(46,125,247,.1) 1px,transparent 1px);background-size:44px 44px}
.page-hero:before{content:'';position:absolute;top:-140px;right:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,var(--mustard-soft),transparent 70%);pointer-events:none}
.page-hero h1{font-size:clamp(46px,6.5vw,84px);max-width:800px;position:relative;z-index:1}
.page-hero p{max-width:520px;color:var(--muted);line-height:1.75;position:relative;z-index:1}

/* Hero variant with a topical background photo (set inline per page) + a dark scrim for contrast */
.page-hero.has-media{background-color:var(--ink);background-size:cover;background-position:center 40%;background-repeat:no-repeat;color:#fff;min-height:clamp(420px,62vh,680px);display:flex;align-items:flex-end}.page-hero.has-media .section-shell{width:min(1180px,calc(100% - 64px))}.page-hero.has-media h1,.page-hero.has-media p{text-shadow:0 2px 18px rgba(0,0,0,.55)}@media(max-width:760px){.page-hero.has-media{min-height:clamp(380px,70vh,560px);background-position:center}}
.page-hero.has-media:before{content:'';position:absolute;inset:0;top:0;right:0;width:auto;height:auto;border-radius:0;background:linear-gradient(100deg,rgba(10,13,19,.8) 0%,rgba(10,13,19,.42) 48%,rgba(10,13,19,.1) 100%);z-index:1}
.page-hero.has-media:after{content:'';position:absolute;top:-140px;right:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(46,125,247,.3),transparent 70%);pointer-events:none;z-index:0}
.page-hero.has-media .section-shell{position:relative;z-index:2}
.page-hero.has-media .eyebrow{color:var(--brand-blue)}
.page-hero.has-media p{color:#d8d6cc}

/* ===== Detail layout ===== */
.page-main{padding:0 0 120px;position:relative;overflow:hidden;isolation:isolate}
.page-main:before{content:'';position:absolute;inset:-40px;z-index:-3;background-image:repeating-linear-gradient(118deg,rgba(46,125,247,.075) 0,rgba(46,125,247,.075) 1.5px,transparent 1.5px,transparent 26px);background-size:300% 300%;animation:pageStripeDrift 50s linear infinite}
.page-main:after{content:'';position:absolute;inset:-15%;z-index:-2;pointer-events:none;background:radial-gradient(circle at 12% 18%,rgba(46,125,247,.12),transparent 32%),radial-gradient(circle at 88% 28%,rgba(46,125,247,.13),transparent 30%),radial-gradient(circle at 30% 85%,rgba(46,125,247,.11),transparent 32%),radial-gradient(circle at 92% 92%,rgba(46,125,247,.12),transparent 32%);animation:pageBlobDrift 22s ease-in-out infinite alternate}
.page-network{position:absolute;inset:0;width:100%;height:100%;opacity:.34;pointer-events:none;z-index:-1}
.page-network circle{fill:var(--mustard);animation:networkPulse 3.6s ease-in-out infinite}
.page-network line{stroke:var(--mustard);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:5 9;animation:networkFlow 4s linear infinite}
@keyframes pageStripeDrift{from{transform:translate(0,0)}to{transform:translate(-40px,40px)}}
@keyframes pageBlobDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-2.5%,3%) scale(1.08)}100%{transform:translate(3%,-2%) scale(1.03)}}
@media(max-width:760px){.page-network{opacity:.26}}
@media(prefers-reduced-motion:reduce){.page-main:before,.page-main:after,.page-network circle,.page-network line{animation:none}}
.detail-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;padding-top:40px}
.detail-copy{color:var(--muted);line-height:1.85}
.detail-copy p{margin-top:0}
.feature-list{margin-top:38px}
.feature-list .info-card{min-height:auto}

/* ===== Cards on interior pages (share .info-card component from styles.css) ===== */
/* ===== Contact page ===== */
.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding-top:85px}
.contact-details{background:var(--grey);color:var(--ink);padding:40px;border-radius:var(--r-lg);border-top:3px solid var(--mustard);position:relative;overflow:hidden}
.contact-details:before{content:'';position:absolute;inset:0;opacity:.6;background-image:linear-gradient(rgba(46,125,247,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(46,125,247,.1) 1px,transparent 1px);background-size:36px 36px;pointer-events:none}
.contact-details>*{position:relative;z-index:1}
.contact-details h3{font-size:28px;margin-bottom:30px}
.contact-details p{color:var(--muted);font-size:14px;line-height:1.75;margin:24px 0}
.contact-details strong{display:block;color:var(--brand-blue-dark);font-size:11px;text-transform:uppercase;letter-spacing:.15em;margin-bottom:6px}
.contact-details a{color:var(--brand-blue-dark);transition:color var(--t-fast) var(--ease)}
.contact-details a:hover{color:var(--brand-blue)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-card)}
.contact-form label{font-size:12px;font-weight:700;color:var(--ink)}
.contact-form label:nth-child(3),.contact-form label:nth-child(4),.contact-form button{grid-column:1/-1}
.contact-form input,.contact-form textarea,.contact-form select{display:block;width:100%;margin-top:9px;padding:15px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--off-white);color:var(--ink);font:14px 'Inter';transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--brand-blue);outline:none;box-shadow:0 0 0 3px rgba(46,125,247,.18)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form button{border:0;cursor:pointer;justify-content:center;margin-top:6px}
.form-status{font-size:13px;color:#3f7a51;grid-column:1/-1;margin:0}

/* ===== Clients page directory grid ===== */
.clients-page-grid{grid-template-columns:repeat(3,1fr)}

/* ===== Responsive ===== */
@media(max-width:960px){
  .detail-grid,.contact-layout{grid-template-columns:1fr;gap:38px}
  .contact-layout{padding-top:55px}
}
@media(max-width:760px){
  .page-hero{padding-top:130px}
  .clients-page-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .feature-list,.contact-form{grid-template-columns:1fr}
  .contact-form label:nth-child(3),.contact-form label:nth-child(4),.contact-form button{grid-column:auto}
}
@media(max-width:480px){
  .section-shell{width:calc(100% - 40px)}
  .clients-page-grid{grid-template-columns:1fr}
  .contact-details,.contact-form{padding:26px}
}

/* ===== Our Journey timeline ===== */
.timeline{position:relative;margin:60px 0 60px;padding:10px 0}
.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:rgba(46,125,247,.18);border-radius:3px}
.timeline-fill{display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(var(--tl,0));background:linear-gradient(180deg,var(--mustard),var(--mustard-dark));border-radius:3px;box-shadow:0 0 14px rgba(46,125,247,.6);will-change:transform}
.tl-item{position:relative;width:50%;padding:0 54px 70px 0;box-sizing:border-box}
.tl-item:nth-child(odd){margin-left:0}
.tl-item:nth-child(even){margin-left:50%;padding:0 0 70px 54px}
.tl-dot{position:absolute;top:26px;right:-11px;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--mustard);box-shadow:0 0 0 0 rgba(46,125,247,.5);transform:scale(0);transition:transform .6s cubic-bezier(.2,1.6,.4,1)}
.tl-item:nth-child(even) .tl-dot{right:auto;left:-11px}
.tl-item.in .tl-dot{transform:scale(1);animation:tlPulse 2.4s ease-out .6s 3}
@keyframes tlPulse{0%{box-shadow:0 0 0 0 rgba(46,125,247,.5)}100%{box-shadow:0 0 0 18px rgba(46,125,247,0)}}
.tl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 34px;box-shadow:var(--shadow-card);opacity:0;transform:translateX(-60px) scale(.96);transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .4s var(--ease)}
.tl-item:nth-child(even) .tl-card{transform:translateX(60px) scale(.96)}
.tl-item.in .tl-card{opacity:1;transform:none}
.tl-card:hover{box-shadow:var(--shadow-lift)}
.tl-layer{display:block;opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(.35s + var(--d,0) * .22s)}
.tl-item.in .tl-layer{opacity:1;transform:none}
.tl-year{font-family:'Syne','Inter',sans-serif;font-size:clamp(38px,5vw,60px);font-weight:700;letter-spacing:-.03em;color:var(--brand-blue-dark);line-height:1}
.tl-card h3{font-size:24px;margin:14px 0 10px;color:var(--ink)}
.tl-card p{color:var(--muted);line-height:1.75;margin:0}
.tl-card strong{color:var(--ink)}
.tl-tag{display:inline-block;margin-top:18px;padding:7px 14px;border-radius:999px;background:rgba(46,125,247,.12);color:var(--brand-blue-dark);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tl-figure{margin-top:22px}
.tl-count{display:block;font-family:'Syne','Inter',sans-serif;font-size:clamp(34px,4vw,48px);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.tl-bar{display:block;height:10px;margin-top:10px;border-radius:10px;background:rgba(46,125,247,.15);overflow:hidden}
.tl-bar i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--mustard),var(--mustard-dark));transition:width 1.6s var(--ease) 1.1s}
.tl-item.in .tl-bar i{width:var(--w)}
.tl-brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tl-brands a{padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.tl-brands a:hover{background:var(--mustard);color:var(--ink);transform:translateY(-3px)}
.tl-next .tl-card{background:linear-gradient(135deg,var(--graphite),var(--soft-black));border-color:rgba(46,125,247,.4)}
.tl-next .tl-card h3,.tl-next .tl-card strong{color:#fff}
.tl-next .tl-card p{color:#d8d6cc}
.tl-next .tl-year{color:var(--mustard)}
.tl-next .tl-tag{background:rgba(46,125,247,.15);color:var(--mustard)}
@media(max-width:820px){
  .timeline-line{left:14px;margin-left:0}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 46px 46px}
  .tl-dot,.tl-item:nth-child(even) .tl-dot{left:4px;right:auto}
  .tl-card,.tl-item:nth-child(even) .tl-card{transform:translateX(40px) scale(.96);padding:26px 24px}
}
@media(prefers-reduced-motion:reduce){.tl-card,.tl-layer,.tl-dot,.tl-bar i{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}.tl-bar i{width:var(--w)!important}}

/* ===== Pause continuous animations while off-screen (perf) =====
   pages.css loads after styles.css and redefines these same animations, so the
   equivalent block in styles.css alone never wins the specificity tie here - it
   has to be repeated in this file too, appended after the definitions above. */
.page-main:before,.page-main:after,.page-network circle,.page-network line{animation-play-state:paused}
.page-main.in-view:before,.page-main.in-view:after{will-change:transform}
.page-main.in-view:before,.page-main.in-view:after,
.page-main.in-view .page-network circle,.page-main.in-view .page-network line{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.page-main:before,.page-main:after,.page-network circle,.page-network line{animation-play-state:paused!important}}