/* HogeyTech UX V3 — compact, professional public-site refinement */
:root{
  --v3-ink:#13262d;--v3-muted:#667980;--v3-line:#dfe7e9;--v3-soft:#f6f9f9;
  --v3-teal:#087f8c;--v3-teal-dark:#086d77;--v3-teal-soft:#edf7f8;
  --v3-orange:#ff9318;--v3-navy:#0b242c;--v3-white:#fff;
  --v3-shadow:0 18px 44px rgba(16,45,53,.08);
}
.ht-v2{background:#fff;color:var(--v3-ink)}
.ht-v2-shell{width:min(calc(100% - 48px),1120px);margin-inline:auto}
.ht-v2-header{height:72px;background:rgba(255,255,255,.97);border-bottom:1px solid #e6ecee;backdrop-filter:blur(14px)}
.ht-v2-header .ht-nav-wrap{max-width:1160px;height:100%}
.ht-v2-header .ht-logo img{width:178px;max-height:34px}
.ht-v2-header .ht-nav a{font-size:.82rem;font-weight:700;color:#33474f}
.ht-v2-header .ht-portal-link{font-size:.8rem;font-weight:800;color:var(--v3-teal)}
.ht-v2-header .nav-cta-desktop{padding:11px 18px;border-radius:9px;font-size:.79rem;box-shadow:none}
.ht-theme-toggle{width:38px;height:38px}

.ht-v2-hero{position:relative;padding:54px 0 48px;background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%);overflow:hidden}
.ht-v2-hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 76% 28%,rgba(8,127,140,.08),transparent 28%)}
.ht-v2-hero-grid{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:58px;align-items:center}
.ht-v2-eyebrow{display:flex;align-items:center;gap:10px;color:var(--v3-teal);font-size:.68rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.ht-v2-eyebrow span{width:22px;height:2px;background:var(--v3-orange)}
.ht-v2-hero h1{max-width:620px;margin:16px 0 16px;font-size:clamp(2.55rem,4vw,3.55rem);line-height:1.03;letter-spacing:-.045em;color:var(--v3-ink)}
.ht-v2-hero-copy>p{max-width:570px;margin:0;color:var(--v3-muted);font-size:.96rem;line-height:1.65}
.ht-v2-actions{display:flex;gap:12px;margin-top:28px}
.ht-v2-actions .btn{min-height:46px;padding:0 19px;border-radius:9px;font-size:.82rem;font-weight:800}
.ht-v2-primary{box-shadow:0 9px 20px rgba(255,147,24,.18)}
.ht-v2-secondary{border-color:#acd4d8;color:var(--v3-teal)!important;background:#fff}
.ht-v2-hero-proof{display:flex;gap:18px;margin-top:18px;color:#607279;font-size:.73rem;font-weight:700}
.ht-v2-hero-proof span{display:flex;align-items:center;gap:7px}.ht-v2-hero-proof i{width:7px;height:7px;border-radius:50%;background:var(--v3-teal);box-shadow:0 0 0 4px rgba(8,127,140,.08)}
.ht-v2-stack{padding:23px;border:1px solid var(--v3-line);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:var(--v3-shadow)}
.ht-v2-stack-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.ht-v2-stack-head>div>span{display:block;color:#829197;font-size:.61rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.ht-v2-stack-head strong{display:block;margin-top:6px;font-size:1.03rem;line-height:1.4}
.ht-v2-live{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#edf8f2;color:#2b7951;font-size:.62rem;font-weight:800}.ht-v2-live i{width:6px;height:6px;border-radius:50%;background:#2cac6e}
.ht-v2-stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.ht-v2-stack-grid article{display:flex;align-items:center;gap:11px;min-height:74px;padding:13px;border:1px solid #e2e9eb;border-radius:12px;background:#fbfcfc}.ht-v2-stack-grid img{width:25px;height:25px}.ht-v2-stack-grid strong{display:block;font-size:.84rem}.ht-v2-stack-grid span{display:block;margin-top:2px;color:#7c8a90;font-size:.69rem;line-height:1.35}.ht-v2-stack-foot{display:flex;align-items:center;gap:8px;margin-top:15px;padding:12px 2px 0;color:#6c7d83;font-size:.58rem;font-weight:850;text-transform:uppercase;letter-spacing:.09em}.ht-v2-stack-foot b{height:1px;flex:1;background:#dfe7e9}

.ht-v2-strip{background:#fff;border-top:1px solid #e8edef;border-bottom:1px solid #e8edef}.ht-v2-strip-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:21px 0}.ht-v2-strip-grid>div{padding:0 24px;border-left:1px solid #e5ebed}.ht-v2-strip-grid>div:first-child{padding-left:0;border-left:0}.ht-v2-strip-grid strong{display:block;font-size:.79rem}.ht-v2-strip-grid span{display:block;margin-top:4px;color:#78878d;font-size:.71rem;line-height:1.45}

.ht-v2-section{padding:72px 0}.ht-v2-section-head{display:grid;grid-template-columns:1.12fr .65fr;gap:60px;align-items:end;margin-bottom:28px}.ht-v2-kicker{display:block;color:var(--v3-teal);font-size:.65rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.ht-v2-section-head h2,.ht-v2-about-copy h2,.ht-v2-contact-copy h2{margin:8px 0 0;font-size:clamp(2.15rem,3.2vw,3.05rem);line-height:1.06;letter-spacing:-.042em}.ht-v2-section-head>p{margin:0;color:var(--v3-muted);font-size:.9rem;line-height:1.68}
.ht-v2-services{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ht-v2-service{min-height:330px;padding:21px;border:1px solid var(--v3-line);border-radius:14px;background:#fff;transition:.18s ease}.ht-v2-service:hover{transform:translateY(-2px);border-color:rgba(8,127,140,.32);box-shadow:0 14px 32px rgba(16,45,53,.06)}.ht-v2-service-featured{background:linear-gradient(150deg,#f1fafa,#fff 72%);border-color:#b7dfe2}.ht-v2-service-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.ht-v2-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--v3-teal-soft)}.ht-v2-icon img{width:25px;height:25px}.ht-v2-tag{font-size:.59rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--v3-teal)}.ht-v2-service h3{margin:0;font-size:1.04rem;line-height:1.28;letter-spacing:-.018em}.ht-v2-service>p{margin:9px 0 0;color:var(--v3-muted);font-size:.79rem;line-height:1.58}.ht-v2-service ul{margin:15px 0 0;padding:13px 0 0;border-top:1px solid #edf1f2;list-style:none}.ht-v2-service li{position:relative;padding:3px 0 3px 14px;color:#596a70;font-size:.73rem}.ht-v2-service li:before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--v3-orange)}

.ht-v2-approach{padding:68px 0;background:var(--v3-navy);color:#fff}.ht-v2-section-head-light h2{color:#fff}.ht-v2-section-head-light>p{color:#b8c7cb}.ht-v2-section-head-light .ht-v2-kicker{color:#76d0d6}.ht-v2-lifecycle{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}.ht-v2-lifecycle article{min-height:162px;padding:23px 24px;border-right:1px solid rgba(255,255,255,.12)}.ht-v2-lifecycle article:last-child{border-right:0}.ht-v2-lifecycle article>span{color:#69cbd1;font-size:.61rem;font-weight:850;letter-spacing:.1em}.ht-v2-lifecycle strong{display:block;margin-top:17px;font-size:1.08rem}.ht-v2-lifecycle p{max-width:290px;margin:7px 0 0;color:#acbdc2;font-size:.77rem;line-height:1.55}

.ht-v2-about-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:72px;align-items:start}.ht-v2-about-copy>p{max-width:600px;color:var(--v3-muted);font-size:.9rem;line-height:1.72}.ht-v2-text-link{display:inline-flex;gap:7px;align-items:center;margin-top:8px;color:var(--v3-ink)!important;font-size:.82rem;font-weight:800}.ht-v2-text-link span{color:var(--v3-orange);font-size:1.05rem}.ht-v2-principles{border-top:1px solid var(--v3-line)}.ht-v2-principles article{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:17px 0;border-bottom:1px solid var(--v3-line)}.ht-v2-principles article>span{color:var(--v3-teal);font-size:.61rem;font-weight:850;letter-spacing:.1em}.ht-v2-principles strong{display:block;font-size:.86rem}.ht-v2-principles p{margin:4px 0 0;color:#74848a;font-size:.74rem;line-height:1.5}

.ht-v2-process{padding:68px 0 74px;background:#f7f9f9}.ht-v2-process-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--v3-line);border-radius:14px;overflow:hidden;background:#fff}.ht-v2-process-grid article{min-height:150px;padding:20px 18px;border-right:1px solid var(--v3-line)}.ht-v2-process-grid article:last-child{border-right:0}.ht-v2-process-grid article>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--v3-teal-soft);color:var(--v3-teal);font-size:.6rem;font-weight:850}.ht-v2-process-grid h3{margin:17px 0 6px;font-size:.86rem}.ht-v2-process-grid p{margin:0;color:#76868b;font-size:.7rem;line-height:1.5}

.ht-v2-contact{padding:72px 0;background:linear-gradient(135deg,#087f8c 0%,#096f79 62%,#0a5962 100%)}.ht-v2-contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:66px;align-items:center}.ht-v2-kicker-light{color:#c2f1f3}.ht-v2-contact-copy h2{color:#fff}.ht-v2-contact-copy>p{max-width:500px;color:#d5e9eb;font-size:.9rem;line-height:1.65}.ht-v2-contact-routes{display:grid;gap:7px;margin-top:22px}.ht-v2-contact-routes a{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);color:#fff!important}.ht-v2-contact-routes span{color:#c0e2e5;font-size:.69rem}.ht-v2-contact-routes strong{font-size:.77rem}.ht-v2-form{padding:25px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 22px 55px rgba(0,0,0,.13)!important}.ht-v2-form-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px;padding-bottom:14px;border-bottom:1px solid #edf1f2}.ht-v2-form-head span{display:block;color:var(--v3-teal);font-size:.6rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.ht-v2-form-head strong{display:block;margin-top:4px;font-size:.95rem}.ht-v2-form-head img{width:25px;height:25px}.ht-v2-form .field{margin-bottom:12px}.ht-v2-form label{font-size:.7rem}.ht-v2-form input,.ht-v2-form select,.ht-v2-form textarea{min-height:42px;border-radius:8px!important}.ht-v2-form textarea{min-height:92px}.ht-v2-form .ht-submit{min-height:44px;border-radius:9px}
.ht-v2-footer{background:#091b21}.ht-v2-footer .ht-footer-main{padding-top:42px}.ht-v2-footer .ht-footer-brand img{width:164px}.ht-v2-footer .ht-footer-brand p{font-size:.78rem;line-height:1.55}.ht-v2-footer .ht-footer-nav a,.ht-v2-footer .ht-footer-bottom{font-size:.72rem}
/* Disable the old floating assistance prompt in V3 even if JS tries to show it. */
#assistPrompt{display:none!important}

html.dark .ht-v2{--v3-ink:#eef6f7;--v3-muted:#9eb1b7;--v3-line:#233a41;background:#0d2026;color:#eef6f7}.dark .ht-v2-header{background:rgba(9,28,34,.96);border-color:#1d363d}.dark .ht-v2-header .ht-nav a,.dark .ht-v2-header .ht-portal-link{color:#c7d5d8}.dark .ht-v2-hero{background:linear-gradient(180deg,#0d2026,#0c1d23)}.dark .ht-v2-hero h1{color:#f4f8f9}.dark .ht-v2-stack,.dark .ht-v2-service{background:#10262d;border-color:#254048}.dark .ht-v2-stack-grid article{background:#122a31;border-color:#29444c}.dark .ht-v2-strip{background:#0d2026;border-color:#233a41}.dark .ht-v2-strip-grid>div{border-color:#233a41}.dark .ht-v2-service-featured{background:linear-gradient(150deg,#123138,#10262d 70%)}.dark .ht-v2-service ul{border-color:#263f46}.dark .ht-v2-about-copy h2,.dark .ht-v2-section-head h2,.dark .ht-v2-text-link{color:#eef6f7!important}.dark .ht-v2-principles,.dark .ht-v2-principles article{border-color:#29424a}.dark .ht-v2-process{background:#0b1c22}.dark .ht-v2-process-grid{background:#10262d;border-color:#29424a}.dark .ht-v2-process-grid article{border-color:#29424a}

@media(max-width:1020px){.ht-v2-hero-grid{grid-template-columns:1fr;gap:38px}.ht-v2-stack{max-width:760px}.ht-v2-services{grid-template-columns:repeat(2,1fr)}.ht-v2-section-head{gap:32px}.ht-v2-about-grid,.ht-v2-contact-grid{grid-template-columns:1fr;gap:42px}.ht-v2-process-grid{grid-template-columns:repeat(3,1fr)}.ht-v2-process-grid article{border-bottom:1px solid var(--v3-line)}.ht-v2-process-grid article:nth-child(3){border-right:0}}
@media(max-width:800px){.ht-v2-header{height:68px}.ht-v2-shell{width:min(100% - 30px,1120px)}.ht-v2-hero{padding:52px 0}.ht-v2-hero h1{font-size:clamp(2.35rem,8vw,3.2rem)}.ht-v2-section{padding:58px 0}.ht-v2-section-head{grid-template-columns:1fr;align-items:start;margin-bottom:24px}.ht-v2-strip-grid{grid-template-columns:1fr;padding:14px 0}.ht-v2-strip-grid>div,.ht-v2-strip-grid>div:first-child{padding:11px 0;border-left:0;border-bottom:1px solid var(--v3-line)}.ht-v2-strip-grid>div:last-child{border-bottom:0}.ht-v2-services{grid-template-columns:1fr}.ht-v2-service{min-height:0}.ht-v2-lifecycle{grid-template-columns:1fr}.ht-v2-lifecycle article{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}.ht-v2-lifecycle article:last-child{border-bottom:0}.ht-v2-process-grid{grid-template-columns:1fr 1fr}.ht-v2-contact{padding:60px 0}}
@media(max-width:560px){.ht-v2-shell{width:calc(100% - 26px)}.ht-v2-hero{padding-top:44px}.ht-v2-eyebrow{font-size:.61rem}.ht-v2-hero h1{font-size:2.15rem}.ht-v2-hero-copy>p{font-size:.92rem}.ht-v2-actions{flex-direction:column}.ht-v2-actions .btn{width:100%;justify-content:center}.ht-v2-hero-proof{gap:12px;flex-wrap:wrap}.ht-v2-stack{padding:14px;border-radius:14px}.ht-v2-stack-head{display:block}.ht-v2-live{margin-top:10px}.ht-v2-stack-grid{grid-template-columns:1fr}.ht-v2-stack-grid article{min-height:72px}.ht-v2-stack-foot{font-size:.52rem}.ht-v2-section-head h2,.ht-v2-about-copy h2,.ht-v2-contact-copy h2{font-size:2rem}.ht-v2-about-grid{gap:34px}.ht-v2-process-grid{grid-template-columns:1fr}.ht-v2-process-grid article{border-right:0}.ht-v2-form{padding:18px!important}.ht-v2-contact-routes a{align-items:flex-start;flex-direction:column;gap:4px}.ht-v2-footer .ht-footer-main{grid-template-columns:1fr 1fr}}

/* =========================================================
   HogeyTech V3 Professional Density Refinement
   ========================================================= */

/* General vertical rhythm */
.ht-v2-section {
  padding: 58px 0;
}

.ht-v2-section-head {
  gap: 48px;
  margin-bottom: 24px;
}

/* Secondary section headings should not compete with hero */
.ht-v2-section-head h2,
.ht-v2-about-copy h2 {
  font-size: clamp(1.95rem, 2.6vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

/* Services */
.ht-v2-services {
  gap: 11px;
}

.ht-v2-service {
  min-height: 292px;
  padding: 19px;
}

.ht-v2-service-top {
  margin-bottom: 16px;
}

.ht-v2-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.ht-v2-icon img {
  width: 23px;
  height: 23px;
}

.ht-v2-service h3 {
  font-size: .98rem;
  line-height: 1.25;
}

.ht-v2-service > p {
  font-size: .76rem;
  line-height: 1.52;
}

.ht-v2-service ul {
  margin-top: 13px;
  padding-top: 11px;
}

.ht-v2-service li {
  font-size: .70rem;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* About */
.ht-v2-about-grid {
  gap: 60px;
}

.ht-v2-about-copy > p {
  font-size: .86rem;
  line-height: 1.66;
}

.ht-v2-principles article {
  padding: 14px 0;
}

/* Process */
.ht-v2-process {
  padding: 56px 0 60px;
}

.ht-v2-process-grid article {
  min-height: 134px;
  padding: 18px 17px;
}

.ht-v2-process-grid h3 {
  margin-top: 14px;
}

.ht-v2-process-grid p {
  font-size: .68rem;
}

/* Contact — professional, not oversized */
.ht-v2-contact {
  padding: 60px 0;
}

.ht-v2-contact-grid {
  gap: 56px;
}

.ht-v2-contact-copy h2 {
  max-width: 460px;
  font-size: clamp(2.05rem, 3vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.ht-v2-contact-copy > p {
  max-width: 455px;
  font-size: .86rem;
  line-height: 1.62;
}

.ht-v2-contact-routes {
  margin-top: 18px;
}

.ht-v2-form {
  padding: 22px !important;
  border-radius: 14px !important;
}

/* Keep mobile comfortable */
@media (max-width:800px) {
  .ht-v2-section {
    padding: 50px 0;
  }

  .ht-v2-contact {
    padding: 52px 0;
  }
}

@media (max-width:560px) {
  .ht-v2-section-head h2,
  .ht-v2-about-copy h2,
  .ht-v2-contact-copy h2 {
    font-size: 1.85rem;
  }
}

/* =========================================================
   HogeyTech compact professional hero
   ========================================================= */

.ht-v2-hero h1 {
    max-width: 620px;
    margin: 16px 0 16px;
    font-size: clamp(1.35rem, 2vw, 1.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

.ht-v2-hero-copy > p {
    max-width: 590px;
    font-size: 0.94rem;
    line-height: 1.65;
}

/* Maintain sensible mobile sizing */
@media (max-width: 700px) {
    .ht-v2-hero h1 {
        font-size: 1.65rem !important;
        line-height: 1.08 !important;
    }
}

/* =========================================================
   HogeyTech compact professional heading scale
   ========================================================= */

/* Section kickers */
.ht-v2-kicker {
    font-size: .68rem !important;
    letter-spacing: .16em !important;
    margin-bottom: 10px !important;
}

/* Main content section headings */
.ht-v2-section-head h2,
.ht-v2-about-copy h2,
.ht-v2-process h2,
.ht-v2-contact-copy h2 {
    font-size: clamp(1.45rem, 2vw, 1.75rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.032em !important;
}

/* Keep headings from spreading too wide */
.ht-v2-section-head h2 {
    max-width: 610px !important;
}

.ht-v2-about-copy h2 {
    max-width: 520px !important;
}

.ht-v2-process h2 {
    max-width: 610px !important;
}

.ht-v2-contact-copy h2 {
    max-width: 500px !important;
}

/* Supporting text beside headings */
.ht-v2-section-head > p,
.ht-v2-process-head > p {
    font-size: .90rem !important;
    line-height: 1.6 !important;
}

/* Mobile */
@media (max-width: 700px) {
    .ht-v2-section-head h2,
    .ht-v2-about-copy h2,
    .ht-v2-process h2,
    .ht-v2-contact-copy h2 {
        font-size: 1.55rem !important;
    }
}

/* =========================================================
   HogeyTech top-of-page spacing refinement
   ========================================================= */

/* Compact hero */
.ht-v2-hero {
    padding-top: 48px !important;
    padding-bottom: 28px !important;
    min-height: 0 !important;
}

.ht-v2-hero-grid {
    align-items: center !important;
    gap: 64px !important;
}

/* Keep left copy compact */
.ht-v2-hero-copy {
    align-self: center !important;
}

.ht-v2-hero-copy > p {
    margin-top: 14px !important;
}

.ht-v2-actions {
    margin-top: 24px !important;
}

.ht-v2-hero-proof {
    margin-top: 18px !important;
}

/* Delivery card should visually align with copy */
.ht-v2-stack {
    margin: 0 !important;
    align-self: center !important;
}

/* Remove excessive air around the principles strip */
.ht-v2-strip {
    margin-top: 0 !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
}

.ht-v2-strip-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tighten individual principle rows */
.ht-v2-strip article {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Pull Capabilities section upward */
#services.ht-v2-section {
    padding-top: 42px !important;
}

/* Tighter section header */
#services .ht-v2-section-head {
    margin-bottom: 24px !important;
}

/* Avoid giant blank regions caused by inherited min-heights */
.ht-v2-hero,
.ht-v2-strip,
.ht-v2-section,
.ht-v2-section-head {
    min-height: 0 !important;
}

/* Desktop visual balance */
@media (min-width: 901px) {
    .ht-v2-hero-grid {
        grid-template-columns: 1.08fr .92fr !important;
    }

    .ht-v2-stack {
        max-width: 450px !important;
        width: 100% !important;
        justify-self: end !important;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .ht-v2-hero {
        padding-top: 34px !important;
        padding-bottom: 24px !important;
    }

    .ht-v2-hero-grid {
        gap: 30px !important;
    }

    #services.ht-v2-section {
        padding-top: 38px !important;
    }
}

/* =========================================================
   HogeyTech branded icons — service assurance strip
   ========================================================= */

.ht-v2-strip-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
}

.ht-v2-strip-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(0, 142, 157, .07);
    border: 1px solid rgba(0, 142, 157, .08);
}

.ht-v2-strip-icon img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.ht-v2-strip-item > div {
    min-width: 0;
}

.ht-v2-strip-item strong {
    display: block;
    margin: 1px 0 5px;
}

.ht-v2-strip-item span:not(.ht-v2-strip-icon) {
    display: block;
}

@media (max-width: 800px) {
    .ht-v2-strip-item {
        gap: 11px !important;
    }

    .ht-v2-strip-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .ht-v2-strip-icon img {
        width: 20px;
        height: 20px;
    }
}

/* =========================================================
   HogeyTech service assurance strip — visual refinement
   ========================================================= */

.ht-v2-strip {
    position: relative;
}

.ht-v2-strip-grid {
    gap: 14px !important;
}

.ht-v2-strip-item {
    position: relative;
    padding: 18px 18px 17px !important;
    border: 1px solid rgba(15, 75, 86, .10);
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            rgba(0, 145, 158, .035),
            rgba(255, 255, 255, .96) 52%,
            rgba(255, 145, 22, .025)
        );
    box-shadow: 0 5px 18px rgba(15, 43, 50, .035);
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease;
    overflow: hidden;
}

/* subtle branded top accent */
.ht-v2-strip-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    width: 42px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(
        90deg,
        #0793a3 0%,
        #0793a3 70%,
        #ff9418 70%,
        #ff9418 100%
    );
}

.ht-v2-strip-item:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 142, 157, .22);
    box-shadow: 0 10px 28px rgba(14, 48, 57, .075);
}

/* stronger branded icon treatment */
.ht-v2-strip-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            145deg,
            rgba(0, 145, 158, .10),
            rgba(255,255,255,.92)
        ) !important;
    border: 1px solid rgba(0, 142, 157, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

.ht-v2-strip-icon img {
    width: 23px !important;
    height: 23px !important;
}

/* stronger hierarchy */
.ht-v2-strip-item strong {
    font-size: .80rem !important;
    line-height: 1.35 !important;
    color: #18292f !important;
    letter-spacing: -.01em;
}

.ht-v2-strip-item span:not(.ht-v2-strip-icon) {
    font-size: .71rem !important;
    line-height: 1.5 !important;
    color: #71838a !important;
}

/* subtle divider is no longer needed inside card layout */
.ht-v2-strip-grid > * + * {
    border-left: 1px solid rgba(15, 75, 86, .10) !important;
}

/* allow spacing to feel intentional */
.ht-v2-strip {
    padding-top: 22px !important;
    padding-bottom: 30px !important;
}

@media (max-width: 800px) {
    .ht-v2-strip-grid {
        gap: 10px !important;
    }

    .ht-v2-strip-item {
        padding: 16px !important;
    }

    .ht-v2-strip-grid > * + * {
        border-left: 1px solid rgba(15, 75, 86, .10) !important;
    }
}

/* =========================================================
   HogeyTech service cards — professional visual refinement
   ========================================================= */

.ht-v2-services {
    gap: 14px !important;
}

.ht-v2-service {
    position: relative;
    overflow: hidden;
    min-height: 276px !important;
    padding: 20px !important;
    border: 1px solid rgba(18, 84, 95, .11) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(
            145deg,
            rgba(0, 145, 158, .025),
            rgba(255, 255, 255, .98) 48%,
            rgba(255, 145, 22, .018)
        ) !important;
    box-shadow: 0 5px 20px rgba(20, 48, 55, .03);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

/* Brand accent */
.ht-v2-service::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    width: 48px;
    height: 2px;
    background: linear-gradient(
        90deg,
        #078f9f 0%,
        #078f9f 72%,
        #ff9418 72%,
        #ff9418 100%
    );
    border-radius: 0 0 3px 3px;
}

.ht-v2-service:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 142, 157, .24) !important;
    box-shadow: 0 12px 30px rgba(12, 52, 61, .075);
}

/* Icon */
.ht-v2-service .ht-v2-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            145deg,
            rgba(0, 145, 158, .10),
            rgba(255,255,255,.95)
        ) !important;
    border: 1px solid rgba(0, 142, 157, .10) !important;
}

.ht-v2-service .ht-v2-icon img {
    width: 23px !important;
    height: 23px !important;
}

/* Category label */
.ht-v2-service-label {
    font-size: .61rem !important;
    letter-spacing: .17em !important;
    color: #007f8d !important;
    font-weight: 700 !important;
}

/* Titles */
.ht-v2-service h3 {
    margin-top: 15px !important;
    margin-bottom: 8px !important;
    font-size: .96rem !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em;
}

/* Body copy */
.ht-v2-service > p {
    margin-bottom: 12px !important;
    font-size: .74rem !important;
    line-height: 1.55 !important;
    color: #6e8087 !important;
}

/* Feature list */
.ht-v2-service ul {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(15, 73, 83, .08) !important;
}

.ht-v2-service li {
    position: relative;
    padding-left: 13px !important;
    font-size: .69rem !important;
    line-height: 1.5 !important;
    color: #607178 !important;
}

.ht-v2-service li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .67em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff9418;
}

/* remove legacy bullet if any */
.ht-v2-service li::marker {
    content: "";
}

/* Small hover response on icon */
.ht-v2-service:hover .ht-v2-icon {
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 800px) {
    .ht-v2-service {
        min-height: 0 !important;
        padding: 18px !important;
    }

    .ht-v2-services {
        gap: 10px !important;
    }
}

/* =========================================================
   HogeyTech full-width approach section
   ========================================================= */

/* Let the dark section span the full viewport */
.ht-v2-approach {
    position: relative;
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: #0a2830 !important;
}

/* Full bleed even when nested inside a centered wrapper */
.ht-v2-approach::before {
    content: "";
    position: absolute;
    inset: 0 50%;
    width: 100vw;
    margin-left: -50vw;
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(8, 150, 164, .08),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #0a2830 0%,
            #09252d 100%
        );
    z-index: 0;
}

/* Keep actual content aligned with the rest of the site */
.ht-v2-approach > * {
    position: relative;
    z-index: 1;
}

.ht-v2-approach-inner,
.ht-v2-approach .ht-v2-shell {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 58px 24px 56px !important;
}

/* Header */
.ht-v2-approach-head {
    display: grid !important;
    grid-template-columns: 1.35fr .75fr !important;
    gap: 70px !important;
    align-items: end !important;
    margin-bottom: 24px !important;
}

.ht-v2-approach h2 {
    max-width: 650px !important;
    font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
}

.ht-v2-approach-head > p {
    max-width: 390px;
    margin-left: auto;
    font-size: .86rem !important;
    line-height: 1.6 !important;
    color: rgba(226, 238, 241, .74) !important;
}

/* Three stages */
.ht-v2-approach-grid {
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.ht-v2-approach-grid article {
    position: relative;
    min-height: 150px !important;
    padding: 28px 24px !important;
    transition:
        background .2s ease,
        transform .2s ease;
}

.ht-v2-approach-grid article:hover {
    background: rgba(255,255,255,.025);
}

.ht-v2-approach-grid article + article {
    border-left: 1px solid rgba(255,255,255,.11) !important;
}

/* Step number */
.ht-v2-approach-grid .ht-v2-step,
.ht-v2-approach-grid article > span:first-child {
    color: #61d3dc !important;
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    font-weight: 700 !important;
}

/* Headings */
.ht-v2-approach-grid h3 {
    margin: 21px 0 7px !important;
    font-size: 1.02rem !important;
    color: #ffffff !important;
}

/* Body */
.ht-v2-approach-grid p {
    max-width: 300px;
    font-size: .73rem !important;
    line-height: 1.55 !important;
    color: rgba(225, 238, 241, .69) !important;
}

/* Subtle orange accent on hover */
.ht-v2-approach-grid article::after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: #ff9418;
    transition: width .22s ease;
}

.ht-v2-approach-grid article:hover::after {
    width: 42px;
}

/* Mobile */
@media (max-width: 800px) {
    .ht-v2-approach-inner,
    .ht-v2-approach .ht-v2-shell {
        padding: 46px 20px 44px !important;
    }

    .ht-v2-approach-head {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .ht-v2-approach-head > p {
        margin-left: 0;
    }

    .ht-v2-approach-grid article + article {
        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.11) !important;
    }
}

/* =========================================================
   Correct full-width HogeyTech approach section
   Actual classes: .ht-v2-approach / .ht-v2-lifecycle
   ========================================================= */

.ht-v2-approach {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 56px 0 !important;
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(0, 145, 158, .10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #092a32 0%,
            #071f26 100%
        ) !important;
    color: #fff !important;
}

/* content stays aligned with rest of website */
.ht-v2-approach > .ht-v2-shell {
    width: min(1100px, calc(100% - 48px)) !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/* header area */
.ht-v2-approach .ht-v2-section-head {
    grid-template-columns: 1.35fr .75fr !important;
    gap: 64px !important;
    margin-bottom: 24px !important;
    align-items: end !important;
}

.ht-v2-approach .ht-v2-section-head h2 {
    max-width: 650px !important;
    margin-top: 9px !important;
    font-size: clamp(1.55rem, 2vw, 1.9rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    color: #fff !important;
}

.ht-v2-approach .ht-v2-section-head > p {
    max-width: 390px !important;
    margin-left: auto !important;
    color: rgba(224, 238, 241, .72) !important;
    font-size: .84rem !important;
    line-height: 1.6 !important;
}

.ht-v2-approach .ht-v2-kicker {
    color: #74d4dc !important;
}

/* three lifecycle columns */
.ht-v2-lifecycle {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    border-top: 1px solid rgba(255,255,255,.13) !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
}

.ht-v2-lifecycle article {
    position: relative !important;
    min-height: 142px !important;
    padding: 25px 26px !important;
    border-right: 1px solid rgba(255,255,255,.11) !important;
    background: transparent !important;
    transition:
        background .20s ease,
        transform .20s ease !important;
}

.ht-v2-lifecycle article:last-child {
    border-right: 0 !important;
}

.ht-v2-lifecycle article:hover {
    background: rgba(255,255,255,.028) !important;
}

/* step number */
.ht-v2-lifecycle article > span {
    color: #6bd2da !important;
    font-size: .61rem !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
}

/* title */
.ht-v2-lifecycle strong {
    display: block !important;
    margin-top: 17px !important;
    font-size: 1rem !important;
    color: #fff !important;
}

/* body */
.ht-v2-lifecycle p {
    max-width: 285px !important;
    margin-top: 7px !important;
    color: rgba(220,235,238,.68) !important;
    font-size: .72rem !important;
    line-height: 1.55 !important;
}

/* orange hover accent */
.ht-v2-lifecycle article::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: #ff9418;
    transition: width .2s ease;
}

.ht-v2-lifecycle article:hover::after {
    width: 44px;
}

/* mobile */
@media (max-width: 800px) {
    .ht-v2-approach {
        padding: 44px 0 !important;
    }

    .ht-v2-approach > .ht-v2-shell {
        width: min(100% - 36px, 1100px) !important;
    }

    .ht-v2-approach .ht-v2-section-head {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .ht-v2-approach .ht-v2-section-head > p {
        margin-left: 0 !important;
    }

    .ht-v2-lifecycle {
        grid-template-columns: 1fr !important;
    }

    .ht-v2-lifecycle article {
        min-height: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
    }

    .ht-v2-lifecycle article:last-child {
        border-bottom: 0 !important;
    }
}

/* =========================================================
   TRUE FULL-BLEED APPROACH SECTION
   Breaks out of the site's centered parent container.
   ========================================================= */

html,
body {
    overflow-x: clip;
}

#approach.ht-v2-approach {
    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 56px 0 !important;

    background:
        radial-gradient(
            circle at 18% 5%,
            rgba(0, 145, 158, .11),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0a2a32 0%,
            #071f26 100%
        ) !important;
}

/* Old pseudo full-bleed workaround is no longer needed */
#approach.ht-v2-approach::before {
    display: none !important;
}

/* Constrain ONLY the content, not the background */
#approach > .ht-v2-shell {
    width: min(1100px, calc(100% - 48px)) !important;
    max-width: 1100px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Keep header balanced */
#approach .ht-v2-section-head {
    margin-bottom: 24px !important;
}

/* Lifecycle remains aligned with the content column */
#approach .ht-v2-lifecycle {
    width: 100% !important;
}


/* Mobile */
@media (max-width: 800px) {

    #approach.ht-v2-approach {
        padding: 44px 0 !important;
    }

    #approach > .ht-v2-shell {
        width: calc(100% - 36px) !important;
    }
}

/* =========================================================
   APPROACH — TRUE EDGE-TO-EDGE BACKGROUND
   Content remains centered.
   ========================================================= */

html,
body,
main {
    overflow-x: visible !important;
}

/* Keep this section's content geometry intact */
#approach.ht-v2-approach {
    position: relative !important;
    isolation: isolate;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Background now comes from ::before */
    background: transparent !important;
}

/* Actual viewport-wide dark background */
#approach.ht-v2-approach::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    top: 0 !important;
    bottom: 0 !important;

    left: 50% !important;
    width: 100vw !important;
    max-width: none !important;

    margin: 0 !important;
    transform: translateX(-50%) !important;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(0, 145, 158, .11),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0a2a32 0%,
            #071f26 100%
        ) !important;
}

/* Center only the content */
#approach > .ht-v2-shell {
    position: relative !important;
    z-index: 1 !important;

    width: min(1100px, calc(100% - 48px)) !important;
    max-width: 1100px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/* Prevent any inherited container clipping */
.ht-site-v2 main,
.ht-site-v2,
body {
    overflow-x: clip !important;
}

/* Mobile content margin */
@media (max-width: 800px) {
    #approach > .ht-v2-shell {
        width: calc(100% - 36px) !important;
    }
}

/* =========================================================
   APPROACH FINAL — TRUE EDGE-TO-EDGE VISUAL BAND

   Uses oversized box shadow + clip-path so this works even
   when an ancestor/container constrains the section width.
   ========================================================= */

#approach.ht-v2-approach {
    position: relative !important;

    /* Keep existing content geometry */
    width: auto !important;

    /* Actual section color */
    background: #08272f !important;

    /*
     Extend identical background far outside the centered
     section without depending on the parent's width.
    */
    box-shadow:
        0 0 0 100vmax #08272f !important;

    clip-path:
        inset(0 -100vmax) !important;

    padding-top: 54px !important;
    padding-bottom: 54px !important;
}

/* Disable prior experimental pseudo-background */
#approach.ht-v2-approach::before {
    content: none !important;
    display: none !important;
}

/* Keep content aligned with rest of website */
#approach > .ht-v2-shell {
    width: min(calc(100% - 48px), 1120px) !important;
    max-width: 1120px !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Slight branded depth without making the band flashy */
#approach.ht-v2-approach {
    background-image:
        radial-gradient(
            circle at 12% 0%,
            rgba(0, 147, 162, .10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.008),
            rgba(0,0,0,.03)
        ) !important;
    background-color: #08272f !important;
}

/* More polished heading arrangement */
#approach .ht-v2-section-head {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr) !important;
    gap: 70px !important;
    align-items: end !important;
    margin-bottom: 25px !important;
}

#approach .ht-v2-section-head h2 {
    max-width: 620px !important;
    font-size: clamp(1.45rem, 1.9vw, 1.8rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.033em !important;
}

#approach .ht-v2-section-head > p {
    max-width: 420px !important;
    margin: 0 0 2px auto !important;
    color: rgba(221,236,239,.72) !important;
    font-size: .81rem !important;
    line-height: 1.65 !important;
}

/* Lifecycle columns */
#approach .ht-v2-lifecycle article {
    min-height: 152px !important;
    padding: 26px !important;
}

#approach .ht-v2-lifecycle strong {
    font-size: .98rem !important;
}

#approach .ht-v2-lifecycle p {
    max-width: 310px !important;
    font-size: .72rem !important;
    line-height: 1.55 !important;
}

/* Small orange interaction accent */
#approach .ht-v2-lifecycle article::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: #ff9418;
    transition: width .2s ease;
}

#approach .ht-v2-lifecycle article:hover::after {
    width: 42px;
}

@media (max-width: 800px) {

    #approach.ht-v2-approach {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    #approach .ht-v2-section-head {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #approach .ht-v2-section-head > p {
        margin-left: 0 !important;
    }

    #approach > .ht-v2-shell {
        width: calc(100% - 32px) !important;
    }
}

/* =========================================================
   APPROACH — COMPACT FULL-WIDTH BANNER
   ========================================================= */

#approach.ht-v2-approach {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
}

/* Keep content compact inside the banner */
#approach > .ht-v2-shell {
    width: min(calc(100% - 48px), 1120px) !important;
    max-width: 1120px !important;
}

/* Header row */
#approach .ht-v2-section-head {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr) !important;
    gap: 54px !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

#approach .ht-v2-kicker {
    margin-bottom: 7px !important;
}

#approach .ht-v2-section-head h2 {
    max-width: 650px !important;
    margin: 0 !important;
    font-size: clamp(1.35rem, 1.7vw, 1.65rem) !important;
    line-height: 1.08 !important;
}

#approach .ht-v2-section-head > p {
    max-width: 390px !important;
    margin: 0 0 0 auto !important;
    font-size: .76rem !important;
    line-height: 1.55 !important;
}

/* Shorter lifecycle row */
#approach .ht-v2-lifecycle {
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

#approach .ht-v2-lifecycle article {
    min-height: 112px !important;
    padding: 18px 26px !important;
}

#approach .ht-v2-lifecycle article > span {
    font-size: .58rem !important;
}

#approach .ht-v2-lifecycle strong {
    margin-top: 12px !important;
    font-size: .92rem !important;
}

#approach .ht-v2-lifecycle p {
    margin-top: 5px !important;
    max-width: 310px !important;
    font-size: .68rem !important;
    line-height: 1.45 !important;
}

/* Tone down the empty lower area */
#approach .ht-v2-lifecycle {
    margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 800px) {
    #approach.ht-v2-approach {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    #approach .ht-v2-section-head {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #approach .ht-v2-section-head > p {
        margin-left: 0 !important;
    }

    #approach .ht-v2-lifecycle article {
        min-height: 0 !important;
        padding: 16px 18px !important;
    }
}

/* =========================================================
   APPROACH — TRUE COMPACT BANNER
   ========================================================= */

#approach.ht-v2-approach {
    padding: 24px 0 !important;
    min-height: 0 !important;
}

/* Main content width */
#approach > .ht-v2-shell {
    width: min(calc(100% - 48px), 1120px) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

/* Top banner row */
#approach .ht-v2-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr) !important;
    gap: 52px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
}

/* Kicker */
#approach .ht-v2-kicker {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: .58rem !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;
}

/* Main banner headline */
#approach .ht-v2-section-head h2 {
    max-width: 650px !important;
    margin: 0 !important;
    font-size: 1.35rem !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
}

/* Right-side supporting copy */
#approach .ht-v2-section-head > p {
    max-width: 390px !important;
    margin: 0 0 0 auto !important;
    font-size: .70rem !important;
    line-height: 1.45 !important;
}

/* Compact Build / Operate / Support row */
#approach .ht-v2-lifecycle {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* Kill the inherited tall cards */
#approach .ht-v2-lifecycle article {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 26px 13px !important;
}

/* Step number */
#approach .ht-v2-lifecycle article > span {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: .54rem !important;
    line-height: 1 !important;
}

/* Build / Operate / Support */
#approach .ht-v2-lifecycle strong {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
}

/* Descriptions */
#approach .ht-v2-lifecycle p {
    max-width: 300px !important;
    margin: 0 !important;
    font-size: .62rem !important;
    line-height: 1.42 !important;
}

/* Remove anything creating extra lower space */
#approach .ht-v2-lifecycle,
#approach .ht-v2-lifecycle article,
#approach .ht-v2-section-head {
    padding-bottom: initial;
}

/* Mobile becomes stacked but remains compact */
@media (max-width: 800px) {

    #approach.ht-v2-approach {
        padding: 24px 0 !important;
    }

    #approach .ht-v2-section-head {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-bottom: 13px !important;
    }

    #approach .ht-v2-section-head > p {
        margin-left: 0 !important;
    }

    #approach .ht-v2-lifecycle {
        grid-template-columns: 1fr !important;
    }

    #approach .ht-v2-lifecycle article {
        padding: 13px 16px !important;
    }
}

/* =========================================================
   HOGEYTECH APPROACH — TRUE FULL-BLEED BANNER WITH BLOBS
   ========================================================= */

/* Allow bleed area to show */
html,
body,
.ht-site-v2,
.ht-site-v2 main,
main {
    overflow-x: visible !important;
}

/* Banner section itself */
#approach.ht-v2-approach {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;

    margin: 42px 0 46px !important;
    padding: 28px 0 !important;

    background:
        radial-gradient(circle at 12% 18%, rgba(0, 166, 184, .18) 0, rgba(0, 166, 184, .12) 10%, transparent 30%),
        radial-gradient(circle at 84% 16%, rgba(0, 117, 145, .18) 0, rgba(0, 117, 145, .10) 12%, transparent 28%),
        radial-gradient(circle at 58% 88%, rgba(255, 148, 24, .09) 0, rgba(255, 148, 24, .05) 10%, transparent 24%),
        linear-gradient(90deg, #062730 0%, #07313b 28%, #062d36 58%, #04242c 100%) !important;

    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.04);
}

/*
  Force the background to continue to the browser edges.
  These side panels inherit the same banner artwork.
*/
#approach.ht-v2-approach::before,
#approach.ht-v2-approach::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 50vw;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 166, 184, .18) 0, rgba(0, 166, 184, .12) 10%, transparent 30%),
        radial-gradient(circle at 84% 16%, rgba(0, 117, 145, .18) 0, rgba(0, 117, 145, .10) 12%, transparent 28%),
        radial-gradient(circle at 58% 88%, rgba(255, 148, 24, .09) 0, rgba(255, 148, 24, .05) 10%, transparent 24%),
        linear-gradient(90deg, #062730 0%, #07313b 28%, #062d36 58%, #04242c 100%) !important;
}

#approach.ht-v2-approach::before {
    right: 100%;
}

#approach.ht-v2-approach::after {
    left: 100%;
}

/* centered content only */
#approach > .ht-v2-shell {
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* top row */
#approach .ht-v2-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr) !important;
    gap: 48px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
}

#approach .ht-v2-kicker {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: .60rem !important;
    line-height: 1.2 !important;
    letter-spacing: .22em !important;
    color: #7be0e7 !important;
    text-transform: uppercase !important;
}

#approach .ht-v2-section-head h2 {
    margin: 0 !important;
    max-width: 690px !important;
    font-size: clamp(1.40rem, 1.85vw, 1.75rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    color: #ffffff !important;
}

#approach .ht-v2-section-head > p {
    margin: 0 0 0 auto !important;
    max-width: 400px !important;
    font-size: .74rem !important;
    line-height: 1.55 !important;
    color: rgba(224, 237, 240, .80) !important;
}

/* lifecycle row */
#approach .ht-v2-lifecycle {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.015) !important;
    backdrop-filter: blur(1.5px);
}

#approach .ht-v2-lifecycle article {
    position: relative !important;
    min-height: 0 !important;
    padding: 14px 26px 13px !important;
    border-right: 1px solid rgba(255,255,255,.10) !important;
    transition: background .18s ease, transform .18s ease !important;
}

#approach .ht-v2-lifecycle article:last-child {
    border-right: 0 !important;
}

#approach .ht-v2-lifecycle article:hover {
    background: rgba(255,255,255,.025) !important;
}

#approach .ht-v2-lifecycle article::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: #ff9418;
    transition: width .18s ease;
}

#approach .ht-v2-lifecycle article:hover::after {
    width: 42px;
}

#approach .ht-v2-lifecycle article > span {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: .55rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    color: #72dbe4 !important;
}

#approach .ht-v2-lifecycle strong {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: .84rem !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
}

#approach .ht-v2-lifecycle p {
    margin: 0 !important;
    max-width: 310px !important;
    font-size: .66rem !important;
    line-height: 1.45 !important;
    color: rgba(219, 234, 237, .74) !important;
}

/* mobile */
@media (max-width: 800px) {
    #approach.ht-v2-approach {
        margin: 34px 0 38px !important;
        padding: 24px 0 !important;
    }

    #approach > .ht-v2-shell {
        width: calc(100% - 32px) !important;
    }

    #approach .ht-v2-section-head {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    #approach .ht-v2-section-head > p {
        margin-left: 0 !important;
        max-width: none !important;
    }

    #approach .ht-v2-lifecycle {
        grid-template-columns: 1fr !important;
    }

    #approach .ht-v2-lifecycle article {
        padding: 13px 16px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
    }

    #approach .ht-v2-lifecycle article:last-child {
        border-bottom: 0 !important;
    }
}

/* =========================================================
   FIX PAGE HORIZONTAL SCROLL + SAFE FULL-BLEED BANNER
   ========================================================= */

/* Restore normal page geometry */
html,
body,
.ht-site-v2,
.ht-site-v2 main,
main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

/*
   Do NOT use 100vw side panels or viewport-width margins.
   Keep the section normal and paint beyond it using box-shadow.
*/
#approach.ht-v2-approach {
    position: relative !important;
    isolation: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: visible !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(0, 166, 184, .17) 0,
            rgba(0, 166, 184, .08) 16%,
            transparent 34%
        ),
        radial-gradient(
            circle at 84% 15%,
            rgba(0, 117, 145, .15) 0,
            transparent 31%
        ),
        radial-gradient(
            circle at 62% 90%,
            rgba(255, 148, 24, .06) 0,
            transparent 25%
        ),
        #072a32 !important;

    /*
      Extend only the painted background.
      This does NOT alter page width.
    */
    box-shadow:
        50vw 0 0 #072a32,
        -50vw 0 0 #072a32 !important;

    clip-path: none !important;
}

/* Disable every previous pseudo-element full-bleed experiment */
#approach.ht-v2-approach::before,
#approach.ht-v2-approach::after {
    content: none !important;
    display: none !important;
}

/* Keep content properly centered */
#approach > .ht-v2-shell {
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    transform: none !important;
}

/* Prevent accidental wide children */
#approach *,
#approach *::before,
#approach *::after {
    max-width: 100%;
}

/* Banner sizing */
#approach.ht-v2-approach {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
    margin-top: 38px !important;
    margin-bottom: 42px !important;
}

/* Mobile */
@media (max-width: 800px) {
    #approach > .ht-v2-shell {
        width: calc(100% - 32px) !important;
    }

    #approach.ht-v2-approach {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

/* =========================================================
   APPROACH BANNER — FINAL VISUAL POLISH
   Keeps current full-width behavior intact.
   ========================================================= */

#approach.ht-v2-approach {
    padding-top: 24px !important;
    padding-bottom: 24px !important;

    background:
        radial-gradient(
            ellipse at 14% 18%,
            rgba(0, 173, 191, .16) 0%,
            rgba(0, 173, 191, .08) 18%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 82% 15%,
            rgba(0, 120, 146, .18) 0%,
            rgba(0, 120, 146, .07) 20%,
            transparent 44%
        ),
        radial-gradient(
            ellipse at 64% 95%,
            rgba(255, 148, 24, .07) 0%,
            rgba(255, 148, 24, .03) 18%,
            transparent 40%
        ),
        linear-gradient(
            90deg,
            #062831 0%,
            #08343e 32%,
            #082f38 62%,
            #06262e 100%
        ) !important;
}

/* Add very subtle decorative blobs without affecting layout */
#approach > .ht-v2-shell {
    position: relative !important;
    z-index: 1 !important;
}

#approach > .ht-v2-shell::before,
#approach > .ht-v2-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    filter: blur(2px);
    border-radius: 50%;
}

#approach > .ht-v2-shell::before {
    width: 240px;
    height: 240px;
    left: -120px;
    top: -110px;
    background: rgba(0, 164, 181, .045);
}

#approach > .ht-v2-shell::after {
    width: 180px;
    height: 180px;
    right: -80px;
    bottom: -90px;
    background: rgba(255, 148, 24, .035);
}

/* Tighter header */
#approach .ht-v2-section-head {
    margin-bottom: 12px !important;
}

/* Slightly stronger heading hierarchy */
#approach .ht-v2-section-head h2 {
    font-size: clamp(1.40rem, 1.8vw, 1.72rem) !important;
}

/* Lifecycle row gets a subtle glass tint */
#approach .ht-v2-lifecycle {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.010)
        ) !important;
}

/* Slightly improve text contrast */
#approach .ht-v2-lifecycle p,
#approach .ht-v2-section-head > p {
    color: rgba(226, 239, 242, .78) !important;
}

/* Subtle hover emphasis */
#approach .ht-v2-lifecycle article:hover {
    background: rgba(255,255,255,.026) !important;
}

/* Mobile */
@media (max-width: 800px) {
    #approach.ht-v2-approach {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    #approach > .ht-v2-shell::before {
        width: 170px;
        height: 170px;
        left: -80px;
        top: -70px;
    }

    #approach > .ht-v2-shell::after {
        width: 140px;
        height: 140px;
        right: -60px;
        bottom: -60px;
    }
}

/* =========================================================
   HERO — PROFESSIONAL VISUAL POLISH
   ========================================================= */

#hero.ht-v2-hero {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            ellipse at 72% 22%,
            rgba(0, 151, 166, .085) 0%,
            rgba(0, 151, 166, .035) 22%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 18% 74%,
            rgba(255, 148, 24, .035) 0%,
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfd 100%
        ) !important;
}

/* very subtle technical grid */
#hero.ht-v2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(0, 122, 137, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 122, 137, .025) 1px, transparent 1px);

    background-size: 44px 44px;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.55) 26%,
        rgba(0,0,0,.32) 62%,
        transparent 100%
    );

    opacity: .58;
    z-index: 0;
}

/* ambient teal blob behind stack card */
#hero.ht-v2-hero::after {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    right: 8%;
    top: 4%;
    border-radius: 50%;
    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0, 153, 169, .10) 0%,
            rgba(0, 153, 169, .045) 34%,
            transparent 70%
        );

    filter: blur(8px);
    z-index: 0;
}

/* Keep real content above effects */
#hero .ht-v2-shell,
#hero .ht-v2-hero-grid {
    position: relative !important;
    z-index: 1 !important;
}

/* Kicker gets a sharper brand accent */
#hero .ht-v2-kicker {
    position: relative;
    padding-left: 32px !important;
}

#hero .ht-v2-kicker::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        #ff9418 0%,
        #ff9418 68%,
        #0794a4 68%,
        #0794a4 100%
    );
}

/* Buttons feel a little more finished */
#hero .ht-v2-actions a {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

#hero .ht-v2-actions a:hover {
    transform: translateY(-2px);
}

#hero .ht-v2-actions .ht-v2-primary,
#hero .ht-v2-actions a:first-child {
    box-shadow: 0 8px 20px rgba(255, 148, 24, .14);
}

#hero .ht-v2-actions .ht-v2-primary:hover,
#hero .ht-v2-actions a:first-child:hover {
    box-shadow: 0 11px 26px rgba(255, 148, 24, .20);
}

/* Small Build / Host / Support indicators */
#hero .ht-v2-hero-proof {
    gap: 16px !important;
}

#hero .ht-v2-hero-proof span {
    position: relative;
    padding-left: 14px;
}

#hero .ht-v2-hero-proof span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #078f9f;
    box-shadow: 0 0 0 4px rgba(7, 143, 159, .07);
}

/* Delivery stack gets a more premium glass treatment */
#hero .ht-v2-stack {
    position: relative !important;
    border: 1px solid rgba(17, 88, 99, .12) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(250,253,253,.91)
        ) !important;

    box-shadow:
        0 18px 50px rgba(15, 55, 65, .08),
        inset 0 1px 0 rgba(255,255,255,.8) !important;

    backdrop-filter: blur(8px);
}

/* Subtle accent at top of stack card */
#hero .ht-v2-stack::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    width: 54px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(
        90deg,
        #0794a4 0%,
        #0794a4 75%,
        #ff9418 75%,
        #ff9418 100%
    );
}

/* Slight lift on stack cells */
#hero .ht-v2-stack-grid article {
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

#hero .ht-v2-stack-grid article:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 142, 157, .18) !important;
    background: rgba(255,255,255,.92) !important;
}

/* Production badge */
#hero .ht-v2-stack-badge,
#hero .ht-v2-status {
    box-shadow: inset 0 0 0 1px rgba(29, 158, 101, .05);
}

/* Mobile simplification */
@media (max-width: 800px) {
    #hero.ht-v2-hero::before {
        opacity: .32;
    }

    #hero.ht-v2-hero::after {
        width: 260px;
        height: 260px;
        right: -70px;
        top: 18%;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    #hero .ht-v2-actions a,
    #hero .ht-v2-stack-grid article {
        transition: none !important;
    }
}

/* =========================================================
   HERO + NAV — CONTINUOUS AMBIENT BACKGROUND
   ========================================================= */

html,
body {
    overflow-x: clip !important;
}

/*
   Allow hero ambient artwork to extend upward behind header.
   Keep actual hero content unchanged.
*/
#hero.ht-v2-hero {
    overflow: visible !important;
    position: relative !important;
    z-index: 1;
}

/*
   Larger, softer ambient glow.
   It begins above the hero and fades naturally through the
   navigation area rather than starting below it.
*/
#hero.ht-v2-hero::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    width: 760px !important;
    height: 500px !important;

    right: -70px !important;
    top: -165px !important;

    pointer-events: none !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 158, 174, .115) 0%,
            rgba(0, 158, 174, .072) 27%,
            rgba(0, 158, 174, .030) 48%,
            transparent 72%
        ) !important;

    filter: blur(7px) !important;
}

/*
   Header becomes slightly translucent so the same ambient
   color can be seen behind the navigation.
*/
header.ht-v2-header {
    position: relative !important;
    z-index: 20 !important;

    background: rgba(255,255,255,.88) !important;

    -webkit-backdrop-filter: blur(12px) saturate(115%);
    backdrop-filter: blur(12px) saturate(115%);

    border-bottom: 1px solid rgba(20, 65, 75, .08) !important;
}

/*
   Add a very light continuation on the right side of header.
   This prevents a visible hard edge where the hero glow meets it.
*/
header.ht-v2-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 78% 115%,
            rgba(0, 158, 174, .075) 0%,
            rgba(0, 158, 174, .035) 30%,
            transparent 62%
        );
}

/* Header content stays crisp above the atmosphere */
header.ht-v2-header > * {
    position: relative;
    z-index: 1;
}

/* Soften the upper-right hero glow further */
#hero.ht-v2-hero {
    background:
        radial-gradient(
            ellipse at 79% 5%,
            rgba(0, 153, 169, .090) 0%,
            rgba(0, 153, 169, .040) 25%,
            transparent 53%
        ),
        radial-gradient(
            ellipse at 18% 76%,
            rgba(255, 148, 24, .028) 0%,
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfd 100%
        ) !important;
}

/* Mobile: keep effect subtle */
@media (max-width: 800px) {
    #hero.ht-v2-hero::after {
        width: 500px !important;
        height: 380px !important;
        right: -190px !important;
        top: -120px !important;
    }

    header.ht-v2-header {
        background: rgba(255,255,255,.93) !important;
    }
}

/* =========================================================
   SERVICES / CAPABILITIES — AMBIENT BRAND BLOBS
   ========================================================= */

#services.ht-v2-section {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* upper-right teal glow */
#services.ht-v2-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;

    width: 520px;
    height: 520px;
    right: -170px;
    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 157, 173, .095) 0%,
            rgba(0, 157, 173, .050) 28%,
            rgba(0, 157, 173, .020) 48%,
            transparent 72%
        );

    filter: blur(8px);
}

/* lower-left soft teal/orange blend */
#services.ht-v2-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;

    width: 430px;
    height: 430px;
    left: -150px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 45% 45%,
            rgba(0, 147, 162, .080) 0%,
            rgba(0, 147, 162, .035) 35%,
            transparent 66%
        ),
        radial-gradient(
            circle at 70% 68%,
            rgba(255, 148, 24, .040) 0%,
            transparent 48%
        );

    filter: blur(10px);
}

/* ensure content stays crisp */
#services > .ht-v2-shell {
    position: relative !important;
    z-index: 1 !important;
}

/* slight extra ambient depth under cards */
#services .ht-v2-services {
    position: relative;
}

#services .ht-v2-services::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;

    width: 360px;
    height: 220px;

    left: 50%;
    top: 46%;

    transform: translate(-50%, -50%);
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 145, 158, .035),
            transparent 70%
        );

    filter: blur(18px);
}

/* mobile: tone it down */
@media (max-width: 800px) {
    #services.ht-v2-section::before {
        width: 360px;
        height: 360px;
        right: -180px;
        top: -90px;
        opacity: .75;
    }

    #services.ht-v2-section::after {
        width: 300px;
        height: 300px;
        left: -160px;
        bottom: -120px;
        opacity: .7;
    }
}

/* =========================================================
   HOGEYTECH — CONTINUOUS MAIN-PAGE AMBIENT BACKGROUND
   Replaces section-bound blobs with one smooth page canvas.
   ========================================================= */

.ht-site-v2 main {
    position: relative !important;
    isolation: isolate !important;

    background:
        /* upper-right hero / capabilities glow */
        radial-gradient(
            ellipse 620px 520px at 82% 8%,
            rgba(0, 157, 173, .095) 0%,
            rgba(0, 157, 173, .055) 27%,
            rgba(0, 157, 173, .020) 48%,
            transparent 73%
        ),

        /* left-side transition into capabilities */
        radial-gradient(
            ellipse 520px 440px at 7% 31%,
            rgba(0, 149, 164, .060) 0%,
            rgba(0, 149, 164, .025) 40%,
            transparent 70%
        ),

        /* soft center wash */
        radial-gradient(
            ellipse 700px 420px at 53% 34%,
            rgba(0, 137, 151, .030) 0%,
            transparent 72%
        ),

        /* subtle orange warmth lower on page */
        radial-gradient(
            ellipse 470px 390px at 87% 56%,
            rgba(255, 148, 24, .032) 0%,
            rgba(255, 148, 24, .012) 42%,
            transparent 70%
        ),

        /* lower-left teal */
        radial-gradient(
            ellipse 540px 440px at 5% 72%,
            rgba(0, 150, 165, .050) 0%,
            rgba(0, 150, 165, .018) 43%,
            transparent 72%
        ),

        #ffffff !important;

    background-repeat: no-repeat !important;
}

/* Sections should not clip the continuous page atmosphere */
#hero.ht-v2-hero,
#services.ht-v2-section,
#about.ht-v2-section,
#process.ht-v2-process,
#contact.ht-v2-contact {
    position: relative !important;
    background-color: transparent !important;
}

/*
   Remove old service-specific blob layers.
   They were causing the visible hard boundary.
*/
#services.ht-v2-section::before,
#services.ht-v2-section::after {
    content: none !important;
    display: none !important;
}

#services .ht-v2-services::before {
    content: none !important;
    display: none !important;
}

/*
   Remove the large standalone hero circle.
   Main now provides the continuous teal atmosphere.
*/
#hero.ht-v2-hero::after {
    content: none !important;
    display: none !important;
}

/*
   Preserve only the very subtle hero technical grid.
*/
#hero.ht-v2-hero {
    background: transparent !important;
}

#hero.ht-v2-hero::before {
    z-index: 0 !important;
}

/* Content stays above page artwork */
.ht-site-v2 main > section > .ht-v2-shell,
.ht-site-v2 main > section > .ht-v2-hero-grid,
.ht-site-v2 main > section > * {
    position: relative;
    z-index: 1;
}

/*
   The dark approach banner intentionally remains opaque,
   creating a strong visual break through the page.
*/
#approach.ht-v2-approach {
    background-color: #072a32 !important;
}

/* Mobile: use fewer/lighter ambient shapes */
@media (max-width: 800px) {
    .ht-site-v2 main {
        background:
            radial-gradient(
                ellipse 430px 400px at 100% 7%,
                rgba(0, 157, 173, .075),
                transparent 70%
            ),
            radial-gradient(
                ellipse 390px 360px at -8% 40%,
                rgba(0, 149, 164, .045),
                transparent 72%
            ),
            radial-gradient(
                ellipse 360px 320px at 100% 68%,
                rgba(255, 148, 24, .022),
                transparent 72%
            ),
            #ffffff !important;
    }
}

/* =========================================================
   CONTACT — AMBIENT PROFESSIONAL POLISH
   ========================================================= */

#contact.ht-v2-contact {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(67, 211, 220, .20) 0%,
            rgba(67, 211, 220, .08) 24%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 88% 82%,
            rgba(255, 148, 24, .10) 0%,
            rgba(255, 148, 24, .035) 22%,
            transparent 46%
        ),
        radial-gradient(
            ellipse at 65% 8%,
            rgba(0, 80, 96, .18) 0%,
            transparent 42%
        ),
        linear-gradient(
            115deg,
            #118a94 0%,
            #0d7f89 38%,
            #086f7a 72%,
            #075e69 100%
        ) !important;
}

/* subtle technical mesh */
#contact.ht-v2-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

    background-size: 52px 52px;
    opacity: .34;
}

/* large blurred accent */
#contact.ht-v2-contact::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;

    width: 520px;
    height: 520px;
    right: -170px;
    top: -130px;

    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.07) 0%,
            rgba(255,255,255,.025) 34%,
            transparent 70%
        );

    filter: blur(10px);
}

/* content above effects */
#contact > .ht-v2-shell,
#contact .ht-v2-contact-grid {
    position: relative !important;
    z-index: 1 !important;
}

/* left-side copy */
#contact .ht-v2-kicker {
    color: rgba(220, 250, 252, .88) !important;
}

#contact .ht-v2-contact-copy h2 {
    color: #fff !important;
}

#contact .ht-v2-contact-copy > p {
    color: rgba(236, 248, 250, .82) !important;
}

/* contact detail rows */
#contact .ht-v2-contact-routes {
    margin-top: 24px !important;
}

#contact .ht-v2-contact-routes > * {
    transition:
        background .18s ease,
        transform .18s ease,
        border-color .18s ease !important;
}

#contact .ht-v2-contact-routes > *:hover {
    transform: translateX(3px);
    background: rgba(255,255,255,.025);
}

/* brighter dividers */
#contact .ht-v2-contact-routes > * {
    border-color: rgba(255,255,255,.16) !important;
}

/* form card gets more depth */
#contact .ht-v2-form {
    position: relative !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.985),
            rgba(249,252,252,.96)
        ) !important;

    border: 1px solid rgba(255,255,255,.52) !important;

    box-shadow:
        0 26px 70px rgba(0, 44, 52, .20),
        0 8px 24px rgba(0, 44, 52, .10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    backdrop-filter: blur(10px);
}

/* top accent on form */
#contact .ht-v2-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 58px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #078f9f 0%,
            #078f9f 74%,
            #ff9418 74%,
            #ff9418 100%
        );

    border-radius: 0 0 3px 3px;
}

/* inputs */
#contact input,
#contact select,
#contact textarea {
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

#contact input:focus,
#contact select:focus,
#contact textarea:focus {
    border-color: rgba(0, 142, 157, .55) !important;
    box-shadow: 0 0 0 3px rgba(0, 142, 157, .08) !important;
    background: #fff !important;
}

/* submit button feels more premium */
#contact button[type="submit"] {
    box-shadow: 0 10px 24px rgba(255, 148, 24, .18);
    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

#contact button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 148, 24, .24);
}

/* Mobile */
@media (max-width: 800px) {
    #contact.ht-v2-contact::after {
        width: 340px;
        height: 340px;
        right: -160px;
        top: -80px;
    }

    #contact .ht-v2-form {
        box-shadow:
            0 18px 42px rgba(0, 44, 52, .16),
            0 6px 18px rgba(0, 44, 52, .08) !important;
    }
}

/* =========================================================
   CONTACT — DARKER, MORE RESTRAINED TONE
   ========================================================= */

#contact.ht-v2-contact {
    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(52, 190, 199, .12) 0%,
            rgba(52, 190, 199, .045) 26%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 88% 82%,
            rgba(255, 148, 24, .055) 0%,
            rgba(255, 148, 24, .018) 24%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 68% 6%,
            rgba(0, 54, 67, .22) 0%,
            transparent 44%
        ),
        linear-gradient(
            115deg,
            #0b747d 0%,
            #096a73 38%,
            #075d67 72%,
            #064f58 100%
        ) !important;
}

/* tone down mesh */
#contact.ht-v2-contact::before {
    opacity: .20 !important;
}

/* soften right-side glow */
#contact.ht-v2-contact::after {
    width: 460px !important;
    height: 460px !important;
    right: -180px !important;
    top: -150px !important;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.035) 0%,
            rgba(255,255,255,.012) 36%,
            transparent 72%
        ) !important;
}

/* left-side text stays readable but less stark */
#contact .ht-v2-contact-copy > p {
    color: rgba(234, 246, 248, .76) !important;
}

#contact .ht-v2-contact-routes {
    color: rgba(240, 249, 250, .90) !important;
}

/* slightly quieter form shadow */
#contact .ht-v2-form {
    box-shadow:
        0 22px 54px rgba(0, 35, 42, .18),
        0 6px 18px rgba(0, 35, 42, .08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* =========================================================
   ABOUT + PROCESS — PROFESSIONAL TOUCH-UP
   ========================================================= */

/* -------------------------
   ABOUT
   ------------------------- */

#about.ht-v2-section {
    position: relative !important;
    overflow: hidden !important;
    padding-top: 54px !important;
    padding-bottom: 50px !important;
}

/* subtle ambient wash */
#about.ht-v2-section::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;

    width: 520px;
    height: 420px;
    right: -130px;
    top: -110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 151, 166, .065) 0%,
            rgba(0, 151, 166, .025) 36%,
            transparent 70%
        );

    filter: blur(10px);
}

#about.ht-v2-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;

    width: 280px;
    height: 280px;
    left: -90px;
    bottom: -110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 148, 24, .035) 0%,
            transparent 70%
        );

    filter: blur(8px);
}

#about > .ht-v2-shell {
    position: relative !important;
    z-index: 1 !important;
}

/* tighten left text */
#about .ht-v2-about-copy > p {
    max-width: 600px !important;
}

#about .ht-v2-about-copy a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    transition: transform .18s ease, color .18s ease;
}

#about .ht-v2-about-copy a:hover {
    transform: translateX(3px);
}

/* principle rows */
#about .ht-v2-principles article {
    position: relative;
    padding: 16px 14px 16px 0 !important;
    transition:
        background .18s ease,
        transform .18s ease,
        padding-left .18s ease !important;
}

#about .ht-v2-principles article:hover {
    padding-left: 10px !important;
    background: rgba(0, 145, 158, .022);
}

#about .ht-v2-principles article::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        #078f9f 0%,
        #078f9f 72%,
        #ff9418 72%,
        #ff9418 100%
    );
    transition: width .20s ease;
}

#about .ht-v2-principles article:hover::before {
    width: 48px;
}

#about .ht-v2-principles article > span:first-child {
    color: #008493 !important;
    font-weight: 800 !important;
    letter-spacing: .12em;
}

/* -------------------------
   PROCESS
   ------------------------- */

#process.ht-v2-process {
    position: relative !important;
    padding-top: 48px !important;
    padding-bottom: 54px !important;

    background:
        linear-gradient(
            180deg,
            rgba(247,250,250,.84),
            rgba(255,255,255,.96)
        ) !important;
}

#process > .ht-v2-shell {
    position: relative;
}

/* small brand accent above process */
#process > .ht-v2-shell::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    width: 58px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #078f9f 0%,
        #078f9f 72%,
        #ff9418 72%,
        #ff9418 100%
    );
}

/* process cards */
#process .ht-v2-process-grid {
    border: 1px solid rgba(17, 78, 88, .10) !important;
    border-radius: 14px !important;
    overflow: hidden;
    background: rgba(255,255,255,.76);
    box-shadow: 0 8px 24px rgba(20, 48, 55, .03);
}

#process .ht-v2-process-grid article {
    position: relative;
    background: rgba(255,255,255,.65);
    transition:
        background .18s ease,
        transform .18s ease !important;
}

#process .ht-v2-process-grid article:hover {
    background: rgba(0, 145, 158, .025);
}

/* stronger numbered chips */
#process .ht-v2-process-grid article > span {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50%;
    background: rgba(0, 145, 158, .075) !important;
    color: #007f8d !important;

    font-size: .60rem !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
}

/* process titles */
#process .ht-v2-process-grid h3 {
    margin-top: 13px !important;
    margin-bottom: 7px !important;
    font-size: .88rem !important;
}

/* supporting copy */
#process .ht-v2-process-grid p {
    font-size: .68rem !important;
    line-height: 1.48 !important;
    color: #72838a !important;
}

/* subtle orange marker on hover */
#process .ht-v2-process-grid article::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #ff9418;
    transition: width .18s ease;
}

#process .ht-v2-process-grid article:hover::after {
    width: 34px;
}

/* reduce the visual gap between About and Process */
#about + #process {
    margin-top: -4px !important;
}

/* mobile */
@media (max-width: 800px) {
    #about.ht-v2-section {
        padding-top: 46px !important;
        padding-bottom: 42px !important;
    }

    #process.ht-v2-process {
        padding-top: 42px !important;
        padding-bottom: 46px !important;
    }

    #about .ht-v2-principles article:hover {
        padding-left: 6px !important;
    }
}

/* =========================================================
   FOOTER — FINAL PROFESSIONAL POLISH
   ========================================================= */

footer.ht-v2-footer {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    padding-top: 38px !important;
    padding-bottom: 22px !important;

    background:
        radial-gradient(
            ellipse at 12% 0%,
            rgba(0, 158, 174, .10) 0%,
            rgba(0, 158, 174, .035) 30%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 92% 100%,
            rgba(255, 148, 24, .045) 0%,
            transparent 44%
        ),
        linear-gradient(
            100deg,
            #071f27 0%,
            #08252d 45%,
            #061c23 100%
        ) !important;
}

/* subtle technical texture */
footer.ht-v2-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);

    background-size: 52px 52px;
    opacity: .24;
}

/* content stays above texture */
footer.ht-v2-footer > * {
    position: relative;
    z-index: 1;
}

/* footer grid */
footer .ht-v2-footer-grid {
    gap: 56px !important;
}

/* logo */
footer .ht-v2-footer-brand img {
    width: 165px !important;
    height: auto !important;
    opacity: .96;
}

/* brand description */
footer .ht-v2-footer-brand p {
    max-width: 320px !important;
    margin-top: 13px !important;
    color: rgba(217, 234, 237, .62) !important;
    font-size: .76rem !important;
    line-height: 1.55 !important;
}

/* column headings */
footer .ht-v2-footer-nav strong {
    color: #ffffff !important;
    font-size: .70rem !important;
    letter-spacing: .02em;
}

/* links */
footer .ht-v2-footer-nav a {
    position: relative;
    display: inline-block;

    color: rgba(216, 232, 235, .62) !important;
    font-size: .72rem !important;

    transition:
        color .18s ease,
        transform .18s ease !important;
}

footer .ht-v2-footer-nav a:hover {
    color: #ffffff !important;
    transform: translateX(3px);
}

/* little teal/orange hover marker */
footer .ht-v2-footer-nav a::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;

    width: 5px;
    height: 5px;

    transform: translateY(-50%) scale(0);
    border-radius: 50%;

    background: #0aa1af;
    box-shadow: 5px 0 0 #ff9418;

    transition: transform .18s ease;
}

footer .ht-v2-footer-nav a:hover::before {
    transform: translateY(-50%) scale(1);
}

/* footer bottom divider */
footer .ht-v2-footer-bottom {
    position: relative;
    margin-top: 26px !important;
    padding-top: 18px !important;

    border-top: 1px solid rgba(255,255,255,.09) !important;
}

/* branded accent on divider */
footer .ht-v2-footer-bottom::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;

    width: 58px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #0794a4 0%,
            #0794a4 74%,
            #ff9418 74%,
            #ff9418 100%
        );
}

/* copyright */
footer .ht-v2-footer-bottom {
    color: rgba(207, 226, 229, .46) !important;
    font-size: .67rem !important;
}

/* right-side tagline */
footer .ht-v2-footer-bottom span:last-child {
    letter-spacing: .04em;
}

/* Mobile */
@media (max-width: 800px) {
    footer.ht-v2-footer {
        padding-top: 32px !important;
    }

    footer .ht-v2-footer-grid {
        gap: 30px !important;
    }

    footer .ht-v2-footer-brand img {
        width: 150px !important;
    }
}

/* =========================================================
   MOBILE NAV + HEADER FINAL POLISH
   ========================================================= */

@media (max-width: 800px) {

    /* Header */
    header.ht-v2-header {
        min-height: 64px !important;
    }

    header.ht-v2-header .ht-v2-shell {
        width: calc(100% - 30px) !important;
        padding: 0 !important;
    }

    header.ht-v2-header img {
        max-width: 158px !important;
        height: auto !important;
    }

    /* Moon + hamburger */
    #modeToggle,
    #mobileMenuToggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
    }

    /* FULL-SCREEN mobile menu */
    #mobileNav.mobile-nav-overlay {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        background:
            radial-gradient(
                ellipse at 90% 8%,
                rgba(0, 145, 158, .12),
                transparent 34%
            ),
            linear-gradient(
                160deg,
                #111719 0%,
                #121618 60%,
                #0e1315 100%
            ) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 99999 !important;
    }

    /* Menu inner content */
    #mobileNav .mobile-nav-inner,
    #mobileNav > div {
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;

        padding:
            calc(22px + env(safe-area-inset-top))
            22px
            calc(30px + env(safe-area-inset-bottom)) !important;

        box-sizing: border-box !important;
    }

    /* Top row */
    #mobileNav .mobile-nav-top {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 26px !important;
    }

    #mobileNav .mobile-nav-top img {
        width: 165px !important;
        max-width: 52vw !important;
        height: auto !important;
    }

    /* Close button */
    #mobileNav .mobile-nav-close,
    #mobileNav button[aria-label*="Close"] {
        width: 34px !important;
        height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 50% !important;

        color: #fff !important;
        background: rgba(255,255,255,.045) !important;
    }

    /* Menu links */
    #mobileNav nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    #mobileNav nav a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 42px !important;

        padding: 9px 0 !important;

        color: rgba(255,255,255,.91) !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;

        border-bottom: 1px solid rgba(255,255,255,.045);
    }

    #mobileNav nav a:hover {
        color: #fff !important;
        padding-left: 6px !important;
    }

    /* CTA inside menu */
    #mobileNav .ht-v2-primary,
    #mobileNav a[href="#contact"].ht-v2-btn {
        width: 100% !important;
        min-height: 42px !important;

        margin-top: 16px !important;

        justify-content: center !important;

        background: #ff9418 !important;
        color: #111 !important;

        border-radius: 9px !important;
        box-shadow: 0 10px 28px rgba(255,148,24,.16) !important;
    }

    /* Mobile hero refinement */
    #hero.ht-v2-hero {
        padding-top: 38px !important;
        padding-bottom: 30px !important;
    }

    #hero .ht-v2-hero-grid {
        gap: 24px !important;
    }

    #hero .ht-v2-hero-copy > p {
        font-size: .94rem !important;
        line-height: 1.55 !important;
    }

    #hero .ht-v2-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 22px !important;
    }

    #hero .ht-v2-actions a {
        width: 100% !important;
        justify-content: center !important;
    }

    #hero .ht-v2-hero-proof {
        flex-wrap: wrap !important;
        gap: 10px 16px !important;
        margin-top: 18px !important;
    }
}

/* =========================================================
   MOBILE HEADER ALIGNMENT + DARK MODE CONSISTENCY
   ========================================================= */

/* ---------- MOBILE HEADER ---------- */

@media (max-width:800px) {

    header.ht-v2-header {
        height:64px !important;
        min-height:64px !important;
    }

    header.ht-v2-header .ht-nav-wrap {
        width:calc(100% - 28px) !important;
        height:64px !important;
        margin:0 auto !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
    }

    header.ht-v2-header .ht-logo {
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    header.ht-v2-header .ht-logo img {
        display:block !important;
        width:158px !important;
        max-width:46vw !important;
        height:auto !important;
    }

    header.ht-v2-header .ht-nav-actions {
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        flex:0 0 auto !important;
        gap:8px !important;
        margin:0 !important;
    }

    #modeToggle,
    #mobileMenuToggle {
        flex:0 0 36px !important;
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        min-height:36px !important;
        margin:0 !important;
    }

    #modeToggle {
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    #mobileMenuToggle {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .nav-desktop,
    .ht-portal-link,
    .nav-cta-desktop {
        display:none !important;
    }
}


/* ---------- MOBILE OVERLAY ---------- */

/*
   Actual markup is:
   close button
   logo
   nav
   CTA

   Align them explicitly instead of relying on a nonexistent
   mobile-nav-top wrapper.
*/

@media (max-width:800px) {

    #mobileNav.mobile-nav-overlay {
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:100dvh !important;
        max-width:none !important;

        display:flex !important;
        justify-content:center !important;
        align-items:flex-start !important;

        background:
            radial-gradient(
                ellipse at 85% 4%,
                rgba(0,150,165,.10),
                transparent 34%
            ),
            #101517 !important;

        z-index:99999 !important;
    }

    #mobileNav .mobile-nav-inner {
        position:relative !important;

        width:100% !important;
        max-width:430px !important;
        min-height:100dvh !important;

        margin:0 auto !important;
        padding:
            calc(20px + env(safe-area-inset-top))
            20px
            calc(28px + env(safe-area-inset-bottom))
            !important;

        box-sizing:border-box !important;
    }

    #mobileNav .mobile-nav-close {
        position:absolute !important;
        top:calc(19px + env(safe-area-inset-top)) !important;
        right:20px !important;

        width:36px !important;
        height:36px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:0 !important;
        margin:0 !important;

        border-radius:50% !important;
        background:rgba(255,255,255,.05) !important;

        font-size:1.35rem !important;
        line-height:1 !important;
    }

    #mobileNav .ht-mobile-logo {
        display:flex !important;
        align-items:center !important;

        width:max-content !important;
        height:36px !important;

        margin:0 54px 24px 0 !important;
    }

    #mobileNav .ht-mobile-logo img {
        display:block !important;
        width:168px !important;
        max-width:56vw !important;
        height:auto !important;

        filter:brightness(0) invert(1) !important;
    }

    #mobileNav .mobile-nav-links {
        display:flex !important;
        flex-direction:column !important;

        width:100% !important;
        gap:0 !important;

        margin:0 !important;
    }

    #mobileNav .mobile-nav-links a {
        display:flex !important;
        align-items:center !important;

        width:100% !important;
        min-height:48px !important;

        padding:12px 2px !important;

        border-bottom:1px solid rgba(255,255,255,.07);

        font-size:.98rem !important;
        line-height:1.2 !important;
        text-align:left !important;
    }

    #mobileNav .mobile-nav-links a:last-child {
        border-bottom:0;
    }

    #mobileNav .mobile-nav-cta {
        display:flex !important;
        width:100% !important;
        height:44px !important;

        margin:18px 0 0 !important;

        align-items:center !important;
        justify-content:center !important;

        border-radius:9px !important;
    }
}


/* =========================================================
   DARK MODE — FINAL OVERRIDES
   ========================================================= */

/* Page */
html.dark body.ht-site.ht-v2 {
    background:#0b1c22 !important;
    color:#edf5f6 !important;
}


/* Header must actually be dark when theme is dark */
html.dark header.ht-v2-header {
    background:rgba(7,23,29,.94) !important;
    border-bottom-color:rgba(255,255,255,.08) !important;

    -webkit-backdrop-filter:blur(14px) saturate(115%);
    backdrop-filter:blur(14px) saturate(115%);
}

/* Remove the light-mode header glow in dark mode */
html.dark header.ht-v2-header::before {
    background:
        radial-gradient(
            ellipse at 78% 115%,
            rgba(0,159,174,.055),
            transparent 62%
        ) !important;
}

/* White logo now sits on an actually dark header */
html.dark header.ht-v2-header .ht-logo img {
    filter:brightness(0) invert(1) !important;
}


/* Header controls */
html.dark #modeToggle,
html.dark #mobileMenuToggle {
    background:#102229 !important;
    border-color:rgba(255,255,255,.15) !important;
    color:#eef5f6 !important;
}

html.dark #mobileMenuToggle span {
    background:#eef5f6 !important;
}


/* ---------- DARK HERO ---------- */

html.dark #hero.ht-v2-hero {
    background:
        radial-gradient(
            ellipse at 79% 7%,
            rgba(0,155,170,.12),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 17% 75%,
            rgba(255,148,24,.025),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #0b2027 0%,
            #091a20 100%
        ) !important;
}

html.dark #hero.ht-v2-hero::before {
    background-image:
        linear-gradient(rgba(100,200,210,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,200,210,.025) 1px, transparent 1px)
        !important;
}

html.dark #hero .ht-v2-hero-copy h1 {
    color:#f1f7f8 !important;
}

html.dark #hero .ht-v2-hero-copy > p {
    color:#9fb3b9 !important;
}

html.dark #hero .ht-v2-hero-proof {
    color:#9fb2b8 !important;
}


/* Buttons in dark hero */
html.dark #hero .ht-v2-secondary {
    background:#10252c !important;
    color:#dcebed !important;
    border-color:#31505a !important;
}


/* ---------- DARK DELIVERY STACK ---------- */

html.dark #hero .ht-v2-stack {
    background:
        linear-gradient(
            145deg,
            #10282f,
            #0d2228
        ) !important;

    border-color:#29444c !important;

    box-shadow:
        0 18px 46px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025)
        !important;
}

html.dark #hero .ht-v2-stack-head > div > span {
    color:#8fa5ab !important;
}

html.dark #hero .ht-v2-stack-head strong {
    color:#eff6f7 !important;
}

html.dark #hero .ht-v2-stack-grid article {
    background:#10252c !important;
    border-color:#29454d !important;
}

html.dark #hero .ht-v2-stack-grid article:hover {
    background:#133038 !important;
}

html.dark #hero .ht-v2-stack-grid strong {
    color:#edf5f6 !important;
}

html.dark #hero .ht-v2-stack-grid span {
    color:#90a6ac !important;
}

html.dark #hero .ht-v2-stack-foot {
    color:#91a6ac !important;
}

html.dark #hero .ht-v2-stack-foot b {
    background:#34515a !important;
}

/* badge */
html.dark #hero .ht-v2-live {
    background:rgba(29,158,101,.12) !important;
    color:#77d5a4 !important;
}


/* ---------- DARK STRIP / SERVICE CARDS ---------- */

html.dark .ht-v2-strip {
    background:#0b1c22 !important;
    border-color:#263d44 !important;
}

html.dark .ht-v2-strip-item,
html.dark .ht-v2-service {
    background:
        linear-gradient(
            145deg,
            #10272e,
            #0d2127
        ) !important;

    border-color:#29434b !important;
}

html.dark .ht-v2-strip-item strong,
html.dark .ht-v2-service h3 {
    color:#edf5f6 !important;
}

html.dark .ht-v2-strip-item span:not(.ht-v2-strip-icon),
html.dark .ht-v2-service > p,
html.dark .ht-v2-service li {
    color:#91a6ac !important;
}


/* ---------- DARK ABOUT / PROCESS ---------- */

html.dark #about.ht-v2-section {
    background:transparent !important;
}

html.dark #about h2,
html.dark #process h2 {
    color:#edf5f6 !important;
}

html.dark #about p,
html.dark #process p {
    color:#91a6ac !important;
}

html.dark #about .ht-v2-principles article {
    border-color:#29424a !important;
}

html.dark #process.ht-v2-process {
    background:
        linear-gradient(
            180deg,
            #0a1b21,
            #0b2026
        ) !important;
}

html.dark #process .ht-v2-process-grid {
    background:#10262d !important;
    border-color:#29434b !important;
}

html.dark #process .ht-v2-process-grid article {
    background:#10262d !important;
    border-color:#29434b !important;
}

html.dark #process .ht-v2-process-grid h3 {
    color:#eef5f6 !important;
}


/* ---------- DARK MOBILE HEADER ---------- */

@media (max-width:800px) {

    html.dark header.ht-v2-header {
        background:#0b1b21 !important;
    }

    html.dark header.ht-v2-header .ht-logo img {
        filter:brightness(0) invert(1) !important;
    }
}

/* =========================================================
   DARK MODE — BRAND ICON CLEANUP
   ========================================================= */

/* Service strip icon tiles */
html.dark .ht-v2-strip-icon {
    background:#10262d !important;
    border:1px solid rgba(67,190,202,.24) !important;
    box-shadow:none !important;
}

/* Service-card icon tiles */
html.dark .ht-v2-service .ht-v2-icon {
    background:#10262d !important;
    border:1px solid rgba(67,190,202,.24) !important;
    box-shadow:none !important;
}

/* Hero delivery-stack icon areas */
html.dark #hero .ht-v2-stack-grid article img,
html.dark .ht-v2-strip-icon img,
html.dark .ht-v2-service .ht-v2-icon img {
    filter:none !important;
    opacity:1 !important;
}

/* Keep SVG artwork crisp */
html.dark .ht-v2-strip-icon img,
html.dark .ht-v2-service .ht-v2-icon img {
    width:22px !important;
    height:22px !important;
    object-fit:contain !important;
}

/* Remove light-mode inset shine */
html.dark .ht-v2-strip-icon,
html.dark .ht-v2-service .ht-v2-icon {
    background-image:none !important;
}

/* Small hover response */
html.dark .ht-v2-strip-item:hover .ht-v2-strip-icon,
html.dark .ht-v2-service:hover .ht-v2-icon {
    border-color:rgba(88,214,224,.38) !important;
    background:#123038 !important;
}

/* Avoid washed-out icons from inherited opacity */
html.dark svg,
html.dark img[src$=".svg"] {
    opacity:1;
}