@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
:root{--black:#080808;--white:#f7f7f2;--lime:#b9ff00;--muted:#8c8c8c;--line:#292929;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:"DM Sans",sans-serif;line-height:1.6}h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;line-height:1.05;letter-spacing:-.04em}h1{font-size:clamp(3.2rem,7vw,6.8rem);margin:0 0 25px}h2{font-size:clamp(2.4rem,4.5vw,4.5rem);margin:0 0 20px}h3{font-size:1.5rem}p{color:var(--muted)}a{color:inherit}.container{width:min(var(--max),calc(100% - 44px));margin:auto}.header{position:sticky;top:0;z-index:20;background:rgba(8,8,8,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between}.brand{font:700 1.3rem "Space Grotesk";text-decoration:none;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px}.brand-mark{color:var(--lime)!important;font-family:"Noto Sans Devanagari","Nirmala UI","Mangal",sans-serif;font-size:1.45rem;font-weight:700;display:inline-block;margin-right:4px;line-height:1}.nav{display:flex;align-items:center;gap:25px}.nav a{text-decoration:none;font-size:.9rem;color:#ddd}.nav a:hover,.nav .active{color:var(--lime)}.nav-cta{background:var(--lime)!important;color:#050505!important;padding:11px 17px;font-weight:700}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem}.hero{min-height:720px;border-bottom:1px solid var(--line);display:flex;align-items:center;background:radial-gradient(circle at 75% 45%,#233500 0,#101600 16%,transparent 38%)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:#aaa;margin-bottom:18px}.hero h1 span,.page-hero h1 span,h2 span{color:var(--lime)}.hero-copy>p:not(.eyebrow){max-width:590px;font-size:1.1rem}.actions{display:flex;gap:12px;margin-top:30px}.btn{display:inline-block;text-decoration:none;padding:13px 21px;font-weight:700;border:1px solid var(--lime)}.lime{background:var(--lime);color:#050505}.outline{border-color:#777}.black{background:#080808;color:#fff;border-color:#080808}.hero-visual{min-height:520px;display:grid;place-items:center}.globe{width:min(470px,85vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#caff55 0 1%,transparent 2%),repeating-radial-gradient(circle,#5b7e00 0 1px,transparent 2px 17px),repeating-linear-gradient(25deg,transparent 0 18px,#456000 19px 20px);box-shadow:0 0 100px #7fa90055;display:grid;place-items:center;position:relative}.globe:after{content:"";position:absolute;inset:12%;border:1px solid #b9ff0055;border-radius:50%;transform:rotate(25deg) scaleX(.42)}.a-mark{font:700 10rem "Noto Sans Devanagari","Nirmala UI","Mangal",sans-serif;color:var(--lime);text-shadow:0 0 35px #b9ff00}.trust{border-bottom:1px solid var(--line);padding:22px 0}.trust-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.trust-row>span{font-size:.65rem;color:#666;letter-spacing:.13em}.fake-logos{display:flex;gap:28px;color:#777;font-size:.85rem}.section{padding:105px 0}.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:55px}.section-intro>p{max-width:470px;align-self:end}.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.service-card{background:#111;padding:35px;border:1px solid #252525;min-height:360px;position:relative}.service-card:hover{border-color:var(--lime)}.service-card .icon{font-size:2.4rem;color:var(--lime)}.number{font-size:.75rem;color:#555}.service-card p:not(.number){min-height:80px}.service-card a{color:var(--lime);text-decoration:none;font-weight:700}.dark-section{padding:100px 0;background:#0c0c0c;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.center-heading{text-align:center;max-width:700px;margin:0 auto 55px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.feature-grid strong{font-size:2rem;color:var(--lime)}.feature-grid h3{margin:12px 0}.lime-cta{background:var(--lime);color:#050505;padding:42px 0}.lime-cta h2{font-size:clamp(1.8rem,3vw,3rem);margin:0}.cta-row{display:flex;align-items:center;justify-content:space-between;gap:30px}.page-hero{padding:110px 0 90px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 75% 30%,#243800,transparent 32%)}.page-hero p:last-child{font-size:1.15rem;max-width:680px}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stats div{border-top:1px solid #333;padding-top:25px}.stats b{display:block;font:700 3rem "Space Grotesk";color:var(--lime)}.stats span{color:#888}.service-list{display:flex;flex-direction:column}.service-row{display:grid;grid-template-columns:70px 1fr 50px;gap:25px;padding:42px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:center}.service-row:hover h2,.service-row:hover b{color:var(--lime)}.service-row>span{color:#666}.service-row h2{margin:0;font-size:clamp(2rem,4vw,4rem)}.service-row p{max-width:600px}.service-row b{font-size:2rem}.mini-cta{display:flex;justify-content:space-between;align-items:center}.service-hero{padding:120px 0 100px;border-bottom:1px solid var(--line)}.service-hero.drupal{background:radial-gradient(circle at 75% 35%,#394f00,transparent 30%)}.service-hero.ai{background:radial-gradient(circle at 75% 35%,#28004a,transparent 30%)}.service-hero.geo{background:radial-gradient(circle at 75% 35%,#003b42,transparent 30%)}.service-hero .lead{max-width:700px;font-size:1.25rem}.check-list{list-style:none;padding:0;margin:0}.check-list li{padding:14px 0;border-bottom:1px solid var(--line)}.check-list li:before{content:"✓";color:var(--lime);font-weight:700;margin-right:12px}.blog-filter{display:flex;gap:20px;margin-bottom:40px;color:#777}.blog-filter span:first-child{color:var(--lime)}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.blog-card{background:#111;border:1px solid #252525;padding:30px;min-height:340px}.blog-card small{color:var(--lime);font-weight:700;letter-spacing:.1em}.blog-card h2{font-size:1.7rem;margin-top:35px}.blog-card a{color:var(--lime);text-decoration:none;font-weight:700}.sitemap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.sitemap-grid h2{font-size:1.7rem}.sitemap-grid a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:#bbb}.sitemap-grid a:hover{color:var(--lime)}.article{padding:100px 0}.article-inner{max-width:820px}.article h1{font-size:clamp(3rem,6vw,5.5rem)}.article-intro{font-size:1.25rem}.article hr{border:0;border-top:1px solid var(--line);margin:50px 0}.article h2{font-size:2.2rem;margin-top:55px}.article-cta{background:var(--lime);color:#050505;padding:35px;margin-top:60px}.footer{background:#050505;padding:70px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer-grid h4{font-size:1rem}.footer-grid a{display:block;text-decoration:none;color:#888;margin:7px 0}.footer-grid a:hover{color:var(--lime)}.footer-bottom{border-top:1px solid var(--line);margin-top:55px;padding-top:18px;color:#555;font-size:.8rem}
@media(max-width:800px){.nav{display:none;position:absolute;top:76px;left:0;right:0;background:#080808;padding:20px;flex-direction:column;align-items:stretch}.nav.open{display:flex}.menu-toggle{display:block}.hero-grid,.section-intro,.split{grid-template-columns:1fr;gap:35px}.hero{padding:70px 0}.hero-visual{min-height:350px}.service-cards,.blog-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.sitemap-grid{grid-template-columns:1fr}.cta-row,.mini-cta{flex-direction:column;align-items:flex-start}.fake-logos{flex-wrap:wrap}.trust-row{flex-direction:column;align-items:flex-start}.service-row{grid-template-columns:35px 1fr 30px}}

/* ABOUT PAGE */
.about-hero{min-height:650px;padding:85px 0;border-bottom:1px solid var(--line);background:radial-gradient(circle at 72% 50%,#263900 0,transparent 35%)}
.about-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.about-lead{font-size:1.15rem;max-width:650px}
.about-symbol{width:min(480px,80vw);aspect-ratio:1;margin:auto;position:relative;display:grid;place-items:center}
.about-orbit{position:absolute;border:1px solid #b9ff0050;border-radius:50%;transform:rotate(-25deg)}
.orbit-one{width:88%;height:48%}
.orbit-two{width:72%;height:92%;transform:rotate(45deg)}
.orbit-three{width:52%;height:105%;transform:rotate(-55deg)}
.about-mark{font:700 9rem "Noto Sans Devanagari","Nirmala UI","Mangal",sans-serif;color:var(--lime);text-shadow:0 0 45px #b9ff0070;z-index:2}
.about-intro{background:#090909}
.about-mission{align-items:start}
.about-mission>div:last-child p{font-size:1.05rem;margin-top:0;margin-bottom:25px}
.about-principles{padding-top:110px;padding-bottom:110px}
.principle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#292929}
.principle{background:#0c0c0c;padding:38px;min-height:250px}
.principle>span{color:var(--lime);font-size:.75rem;font-weight:700;letter-spacing:.12em}
.principle h3{margin:25px 0 12px}
.principle p{max-width:500px}
.about-difference{background:#f7f7f2;color:#080808}
.about-difference p{color:#666}
.about-difference .eyebrow{color:#777}
.about-difference h2 span{color:#557500}
.difference-heading{max-width:800px;margin-bottom:55px}
.difference-list{border-top:1px solid #ccc}
.difference-list>div{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:28px 0;border-bottom:1px solid #ccc}
.difference-list b{font:600 1.8rem "Space Grotesk"}
.difference-list p{margin:0;max-width:650px;font-size:1.05rem}
@media(max-width:800px){
.about-hero{padding:70px 0}
.about-hero-grid{grid-template-columns:1fr}
.about-symbol{order:-1;width:280px}
.about-mark{font-size:6rem}
.principle-grid{grid-template-columns:1fr}
.difference-list>div{grid-template-columns:1fr;gap:5px}
}

/* FOUNDERS */
.founders-section{background:#090909}
.founders-heading{max-width:760px}
.founders-heading>p:last-child{max-width:600px;margin:25px auto 0}
.founder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#292929}
.founder-card{background:#111;padding:30px;min-height:430px;display:flex;flex-direction:column;position:relative;border:1px solid transparent}
.founder-card:hover{border-color:var(--lime)}
.founder-number{color:#555;font-size:.75rem;font-weight:700;letter-spacing:.12em}
.founder-avatar{width:92px;height:92px;border:1px solid var(--lime);border-radius:50%;display:grid;place-items:center;color:var(--lime);font:600 2.5rem "Space Grotesk";margin:35px 0 25px}
.founder-info{margin-top:auto}
.founder-role{color:var(--lime)!important;font-size:.68rem!important;letter-spacing:.16em;font-weight:700;margin:0 0 8px!important}
.founder-info h3{font-size:1.65rem;margin:0 0 12px}
.founder-info p:not(.founder-role){min-height:72px;margin-bottom:20px}
.founder-info a{color:var(--lime);text-decoration:none;font-weight:700;font-size:.9rem}
.founder-info a:hover{text-decoration:underline}
@media(max-width:800px){
.founder-grid{grid-template-columns:1fr}
.founder-card{min-height:360px}
}

/* ABOUT — FOUNDERS */
.founders-section{background:#080808}
.founders-heading{max-width:760px;margin-bottom:55px}
.founders-heading>p:last-child{max-width:620px;margin:0 auto}
.founders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.founder-card{background:#111;border:1px solid #252525;padding:34px;min-height:390px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.founder-card:hover{border-color:var(--lime);transform:translateY(-3px)}
.founder-avatar{width:82px;height:82px;border:1px solid var(--lime);color:var(--lime);display:grid;place-items:center;font:600 2.2rem "Space Grotesk";margin-bottom:35px}
.founder-role{font-size:.68rem;letter-spacing:.14em;color:var(--lime)!important;font-weight:700;margin:0 0 10px!important}
.founder-card h3{font-size:1.65rem;margin:0 0 14px}
.founder-card p:not(.founder-role){font-size:.95rem}
.founder-content{display:flex;flex-direction:column;flex:1}
.founder-link{margin-top:auto;padding-top:25px;color:var(--lime);font-weight:700;text-decoration:none;font-size:.9rem}
.founder-link:hover{text-decoration:underline}
.about-approach{border-top:1px solid var(--line)}
@media(max-width:800px){
.founders-grid{grid-template-columns:1fr}
.founder-card{min-height:320px}
}

/* DRUPAL SEO SERVICE PAGE */
.drupal-hero-new{padding:95px 0 90px;min-height:680px}
.service-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
.drupal-hero-new .lead{max-width:690px}
.drupal-visual{width:min(470px,80vw);aspect-ratio:1;margin:auto;position:relative;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#243900 0,transparent 65%)}
.drupal-grid{position:absolute;inset:8%;border:1px solid #b9ff0040;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 18px,#b9ff0028 19px 20px),repeating-linear-gradient(90deg,transparent 0 18px,#b9ff0028 19px 20px);transform:perspective(500px) rotateX(60deg) rotateZ(20deg)}
.drupal-grid:before,.drupal-grid:after{content:"";position:absolute;inset:10%;border:1px solid #b9ff0050;border-radius:50%;transform:rotate(45deg)}
.drupal-grid:after{transform:rotate(-45deg)}
.drupal-mark{font:700 9rem "Space Grotesk";color:var(--lime);text-shadow:0 0 45px #b9ff0080;z-index:2}
.drupal-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#292929}
.drupal-service-card{background:#0c0c0c;padding:34px;min-height:260px}
.drupal-service-card>span{color:var(--lime);font-size:.72rem;letter-spacing:.14em;font-weight:700}
.drupal-service-card h3{margin:26px 0 12px}
.drupal-service-card p{margin:0}
.drupal-process{border-top:1px solid var(--line)}
.process-row{display:grid;grid-template-columns:80px 1fr;gap:30px;padding:35px 0;border-bottom:1px solid var(--line)}
.process-number{color:var(--lime);font-weight:700;font-size:.85rem;letter-spacing:.12em}
.process-row h3{margin:0 0 10px}
.process-row p{max-width:750px;margin:0}
.drupal-faq{background:#f7f7f2;color:#080808}
.drupal-faq p{color:#666}
.drupal-faq .eyebrow{color:#777}
.faq-list{max-width:900px;margin:auto;border-top:1px solid #ccc}
.faq-list details{border-bottom:1px solid #ccc;padding:0}
.faq-list summary{cursor:pointer;list-style:none;padding:24px 0;font:600 1.2rem "Space Grotesk";display:flex;justify-content:space-between;gap:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";font-size:1.5rem}
.faq-list details[open] summary:after{content:"−"}
.faq-list details p{padding:0 40px 25px 0;margin:0;max-width:760px}
@media(max-width:800px){
.service-hero-grid{grid-template-columns:1fr}
.drupal-visual{width:290px}
.drupal-mark{font-size:6rem}
.drupal-services-grid{grid-template-columns:1fr}
.process-row{grid-template-columns:45px 1fr;gap:18px}
.drupal-hero-new{padding:75px 0}
}

/* DRUPAL HERO — TEXT-ONLY LAYOUT MATCHING THE AI SEO TEMPLATE */
.service-text-hero{max-width:900px;padding-top:85px;padding-bottom:105px}
.service-text-hero .eyebrow{margin-bottom:48px}
.service-text-hero h1{max-width:850px;margin:0 0 38px;font-size:clamp(4.5rem,8vw,8.5rem);line-height:.92;letter-spacing:-.055em}
.service-text-hero .lead{max-width:760px;font-size:1.25rem;line-height:1.6}
.drupal-hero-new{min-height:auto;padding:0;background:radial-gradient(circle at 72% 38%,#263900 0,transparent 35%)}
@media(max-width:800px){
.service-text-hero{padding-top:65px;padding-bottom:75px}
.service-text-hero h1{font-size:clamp(3.5rem,14vw,6rem)}
.service-text-hero .lead{font-size:1.05rem}
}

/* DRUPAL HERO — LIME WORD */
.service-text-hero h1 .drupal-lime{
  color:var(--lime);
}
.service-text-hero{
  text-align:left;
  margin-left:0;
  margin-right:auto;
}

/* DRUPAL HERO — MATCH THE UPLOADED REFERENCE ALIGNMENT */
.service-hero.drupal{
  padding:120px 0 100px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 75% 35%,#394f00,transparent 30%);
}
.drupal-text-hero{
  text-align:left;
}
.drupal-text-hero .eyebrow{
  margin-bottom:48px;
}
.drupal-text-hero h1{
  max-width:850px;
  margin:0 0 38px;
  font-size:clamp(4.5rem,8vw,8.5rem);
  line-height:.92;
  letter-spacing:-.055em;
}
.drupal-text-hero h1 .drupal-lime{
  color:var(--lime);
}
.drupal-text-hero .lead{
  max-width:760px;
  font-size:1.25rem;
  line-height:1.6;
}
@media(max-width:800px){
  .service-hero.drupal{
    padding:75px 0 70px;
  }
  .drupal-text-hero h1{
    font-size:clamp(3.5rem,14vw,6rem);
  }
  .drupal-text-hero .lead{
    font-size:1.05rem;
  }
}

/* CONTACT PAGE */

.contact-hero{padding:110px 0 90px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 75% 35%,#263900 0,transparent 34%)}
.contact-hero-inner{max-width:1000px}
.contact-hero h1{font-size:clamp(4.5rem,8vw,8.5rem);line-height:.92;letter-spacing:-.055em;margin:0 0 35px}
.contact-hero h1 span,.contact-copy h2 span{color:var(--lime)}
.contact-intro{max-width:700px;font-size:1.2rem;line-height:1.65}
.contact-section{background:#080808}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}
.contact-copy h2{font-size:clamp(3rem,5vw,5.5rem);line-height:.95;letter-spacing:-.045em;margin:0 0 28px}
.contact-copy>p:not(.eyebrow){max-width:500px}
.contact-services{margin-top:45px;border-top:1px solid var(--line)}
.contact-services div{padding:18px 0;border-bottom:1px solid var(--line);font-weight:600}
.contact-services span{color:var(--lime);font-size:.7rem;letter-spacing:.12em;margin-right:18px}
.contact-form{background:#101010;border:1px solid #292929;padding:38px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{margin-bottom:25px}
.form-field label{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.form-field label span{color:#777;text-transform:none;letter-spacing:0}
.form-field input{width:100%;box-sizing:border-box;background:#080808;border:1px solid #333;color:#f5f5f2;padding:16px;font:inherit;outline:none}
.form-field input:focus{border-color:var(--lime)}
.contact-submit{border:0;cursor:pointer;font:700 1rem "Space Grotesk";padding:16px 24px}
.form-note{font-size:.75rem;color:#777;margin:15px 0 0}
@media(max-width:800px){
.contact-hero{padding:75px 0 65px}
.contact-hero h1{font-size:clamp(3.5rem,14vw,6rem)}
.contact-grid{grid-template-columns:1fr;gap:50px}
.form-row{grid-template-columns:1fr;gap:0}
.contact-form{padding:25px}
}

/* Contact page: keep the enquiry form visible beside the main contact intro */
.contact-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact-top-grid .contact-hero-inner{max-width:none;padding-top:12px}
.contact-hero .contact-form{position:relative;z-index:1}
.contact-details-section{background:#080808;border-top:1px solid var(--line)}
.contact-details{max-width:760px}
.contact-details h2{font-size:clamp(2.6rem,4.5vw,4.6rem);margin-bottom:20px}
.contact-details>p:not(.eyebrow){max-width:650px}
#contact-form{scroll-margin-top:76px}

@media(max-width:900px){
  .contact-top-grid{grid-template-columns:1fr;gap:45px}
}
@media(max-width:800px){
  .contact-top-grid{grid-template-columns:1fr;gap:35px}
  .contact-top-grid .contact-hero-inner{padding-top:0}
}

/* VIEWPORT SECTION RHYTHM — desktop
   Keeps each major page section readable as one screen while allowing
   content to grow naturally when it genuinely needs more room. */
@media (min-width: 901px) and (min-height: 700px){
  html{
    scroll-snap-type:y proximity;
    scroll-padding-top:76px;
  }

  main > section{
    scroll-snap-align:start;
    scroll-margin-top:76px;
  }

  main > section:not(.lime-cta){
    min-height:calc(100svh - 76px);
    display:flex;
    align-items:center;
  }

  main > section:not(.lime-cta) > .container{
    width:min(var(--max),calc(100% - 44px));
  }

  .section,
  .dark-section,
  .page-hero,
  .service-hero,
  .about-hero,
  .contact-hero{
    padding-top:clamp(42px,6vh,66px);
    padding-bottom:clamp(42px,6vh,66px);
  }

  .section-intro{
    margin-bottom:clamp(22px,3vh,34px);
  }

  .center-heading{
    margin-bottom:clamp(24px,3.5vh,38px);
  }

  /* Service-page grids: compact enough to keep all cards in one view. */
  .drupal-service-card{
    min-height:0;
    padding:clamp(20px,2.8vh,28px) 32px;
  }

  .drupal-service-card h3{
    margin:clamp(10px,1.6vh,16px) 0 8px;
  }

  /* The AVARNYA Method section is intentionally denser so all 4 steps
     remain visible together instead of breaking across two screens. */
  #approach .section-intro{
    gap:60px;
    margin-bottom:clamp(16px,2vh,24px);
  }

  #approach .section-intro h2{
    font-size:clamp(2.5rem,4vw,4rem);
  }

  .process-row{
    padding:clamp(15px,2vh,22px) 0;
  }

  .process-row h3{
    margin-bottom:6px;
  }

  /* Drupal hero: preserve the bold type but remove excess vertical space. */
  .service-hero.drupal{
    padding-top:clamp(42px,5.5vh,62px);
    padding-bottom:clamp(42px,5.5vh,62px);
  }

  .drupal-text-hero .eyebrow{
    margin-bottom:clamp(20px,3vh,30px);
  }

  .drupal-text-hero h1{
    margin-bottom:clamp(20px,3vh,28px);
    font-size:clamp(4.25rem,7.2vw,7.6rem);
  }

  /* FAQ fits as a single screen when all answers are collapsed. */
  .drupal-faq .center-heading{
    margin-bottom:clamp(18px,2.5vh,28px);
  }

  .faq-list summary{
    padding:clamp(15px,2vh,20px) 0;
  }

  /* Footer and CTA remain content-height so they never feel artificially tall. */
  .lime-cta,
  .footer{
    scroll-snap-align:start;
  }
}

/* Short laptop screens need a little more compression to avoid clipping. */
@media (min-width: 901px) and (max-height: 780px){
  .section,
  .dark-section,
  .page-hero,
  .service-hero,
  .about-hero,
  .contact-hero{
    padding-top:34px;
    padding-bottom:34px;
  }

  .center-heading{margin-bottom:20px}
  .section-intro{margin-bottom:18px}
  .drupal-service-card{padding:18px 28px}
  .drupal-service-card h3{margin:8px 0 6px;font-size:1.35rem}
  .drupal-service-card p{font-size:.95rem;line-height:1.5}
  .process-row{padding:13px 0}
  .process-row h3{font-size:1.35rem;margin-bottom:4px}
  .process-row p{font-size:.95rem;line-height:1.45}
  #approach .section-intro h2{font-size:3rem}
  .drupal-text-hero h1{font-size:clamp(4rem,6.6vw,6.6rem)}
  .drupal-text-hero .lead{font-size:1.08rem}
}

/* === Full-screen section pass: homepage hero + stronger desktop snapping === */
@media (min-width: 901px){
  html{
    scroll-snap-type:y proximity;
  }

  /* The slim trust strip belongs to the hero flow and is not a snap destination. */
  main > .trust{
    scroll-snap-align:none;
    min-height:auto;
    display:block;
  }

  /* Homepage hero: everything stays visible inside one viewport below the header. */
  .hero{
    min-height:calc(100svh - 76px);
    height:calc(100svh - 76px);
    padding:clamp(24px,3.5vh,40px) 0;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-margin-top:76px;
  }

  .hero-grid{
    height:100%;
    gap:clamp(24px,3vw,48px);
  }

  .hero-copy .eyebrow{
    margin-bottom:clamp(10px,1.8vh,18px);
  }

  .hero h1{
    font-size:clamp(4rem,6.1vw,6.6rem);
    line-height:.94;
    margin-bottom:clamp(14px,2vh,22px);
  }

  .hero-copy>p:not(.eyebrow){
    font-size:clamp(.98rem,1.15vw,1.08rem);
    line-height:1.55;
    margin-top:0;
    margin-bottom:0;
  }

  .hero .actions{
    margin-top:clamp(18px,2.5vh,26px);
  }

  .hero-visual{
    min-height:0;
    height:100%;
  }

  .hero .globe{
    width:min(58vh,440px,38vw);
  }

  .hero .a-mark{
    font-size:clamp(7rem,10vw,9.5rem);
  }
}

@media (min-width: 901px) and (max-height: 820px){
  .hero{
    padding-top:20px;
    padding-bottom:20px;
  }

  .hero h1{
    font-size:clamp(3.7rem,5.65vw,5.9rem);
  }

  .hero .globe{
    width:min(54vh,400px,35vw);
  }

  .hero-copy>p:not(.eyebrow){
    font-size:.98rem;
  }

  .hero .actions{
    margin-top:16px;
  }
}

/* === Fit-to-viewport correction: prevent section content from being cut off === */
@media (min-width: 901px){
  main > section:not(.lime-cta):not(.trust){
    height:calc(100svh - 76px);
    min-height:calc(100svh - 76px);
    overflow:hidden;
  }

  /* General section typography/spacing scales with available viewport height. */
  .section,
  .dark-section,
  .page-hero,
  .service-hero,
  .about-hero,
  .contact-hero{
    padding-top:clamp(24px,4vh,48px);
    padding-bottom:clamp(24px,4vh,48px);
  }

  .center-heading{margin-bottom:clamp(16px,2.6vh,30px)}
  .section-intro{margin-bottom:clamp(16px,2.6vh,30px)}

  /* Homepage services: heading + all three cards fit completely in one snap. */
  .service-cards .service-card{
    min-height:0;
    padding:clamp(20px,3vh,30px);
  }
  .service-card .icon{font-size:clamp(1.8rem,3vh,2.4rem)}
  .service-card h3{margin:clamp(8px,1.4vh,14px) 0}
  .service-card p:not(.number){min-height:0;margin:0 0 clamp(10px,1.6vh,16px);font-size:clamp(.88rem,1.8vh,.98rem);line-height:1.48}

  /* About: founders screen. */
  .founders-heading{margin-bottom:clamp(16px,2.5vh,28px)}
  .founders-heading h2{font-size:clamp(2.5rem,5.4vh,4.3rem);margin-bottom:clamp(10px,1.5vh,16px)}
  .founders-heading>p:last-child{font-size:clamp(.86rem,1.7vh,1rem);line-height:1.45}
  .founder-card{min-height:0;padding:clamp(18px,2.7vh,28px)}
  .founder-avatar{width:clamp(58px,8vh,76px);height:clamp(58px,8vh,76px);font-size:clamp(1.7rem,3.4vh,2.1rem);margin-bottom:clamp(14px,2.2vh,24px)}
  .founder-role{margin-bottom:6px!important}
  .founder-card h3{font-size:clamp(1.25rem,2.6vh,1.55rem);margin-bottom:clamp(7px,1.1vh,11px)}
  .founder-card p:not(.founder-role){font-size:clamp(.82rem,1.65vh,.94rem);line-height:1.45;margin:0}
  .founder-link{padding-top:clamp(10px,1.6vh,18px)}

  /* About: principles screen. */
  .about-principles .center-heading h2{font-size:clamp(2.7rem,6vh,4.5rem);margin-bottom:0}
  .principle{min-height:0;padding:clamp(18px,2.7vh,30px)}
  .principle h3{font-size:clamp(1.25rem,2.6vh,1.5rem);margin:clamp(8px,1.3vh,14px) 0 clamp(5px,1vh,10px)}
  .principle p{font-size:clamp(.82rem,1.65vh,.96rem);line-height:1.45;margin:0}
}

/* Extra compression for common 768–900px-tall laptop/browser viewports. */
@media (min-width: 901px) and (max-height: 900px){
  .section,
  .dark-section,
  .page-hero,
  .service-hero,
  .about-hero,
  .contact-hero{padding-top:24px;padding-bottom:24px}

  .section-intro{gap:50px;margin-bottom:18px}
  .section-intro h2{font-size:clamp(2.4rem,5.2vh,3.5rem)}
  .center-heading{margin-bottom:18px}

  .founders-heading{margin-bottom:16px}
  .founders-heading .eyebrow,.about-principles .eyebrow{margin-bottom:8px}
  .founders-heading h2{font-size:clamp(2.4rem,5.2vh,3.8rem)}
  .founder-card{padding:18px 24px}
  .founder-avatar{width:58px;height:58px;font-size:1.65rem;margin-bottom:12px}
  .founder-card h3{font-size:1.25rem;margin-bottom:7px}
  .founder-card p:not(.founder-role){font-size:.82rem;line-height:1.38}
  .founder-link{padding-top:8px;font-size:.8rem}

  .about-principles .center-heading h2{font-size:clamp(2.5rem,5.4vh,3.8rem)}
  .principle{padding:16px 24px}
  .principle h3{font-size:1.2rem;margin:7px 0 5px}
  .principle p{font-size:.8rem;line-height:1.38}
}


/* === Smooth desktop scrolling + homepage trust-strip integration === */
@media (min-width: 901px){
  html{
    scroll-snap-type:y proximity;
    scroll-behavior:smooth;
    scroll-padding-top:76px;
  }

  main > section{
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }

  /* Trust marks are part of the hero, not a separate scroll destination. */
  .hero{
    display:block;
  }

  .hero-shell{
    height:100%;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    align-items:center;
  }

  .hero-grid{
    width:100%;
    min-height:0;
    height:auto;
    align-self:center;
  }

  .hero-trust{
    width:100%;
    padding:14px 0 4px;
    border-top:1px solid var(--line);
    margin-top:8px;
  }

  .hero-trust>span{color:#666}
  .hero-trust .fake-logos{color:#777}
}

@media (min-width: 901px) and (max-height: 900px){
  .hero-trust{
    padding-top:10px;
    margin-top:4px;
  }
  .hero-trust .fake-logos{gap:20px;font-size:.78rem}
}

@media (max-width: 900px){
  .hero-shell{display:block}
  .hero-trust{
    padding:20px 0;
    margin-top:24px;
    border-top:1px solid var(--line);
  }
}


/* === Controlled section glide: no blank snap screens, no competing browser snap === */
@media (min-width: 901px){
  html{
    scroll-snap-type:none !important;
    scroll-behavior:auto !important;
    scroll-padding-top:0 !important;
  }

  main > section,
  .footer{
    scroll-snap-align:none !important;
    scroll-margin-top:0 !important;
  }

  /* The homepage hero is one complete screen; the former trust-only area is removed. */
  .hero{
    height:calc(100svh - 76px);
    min-height:calc(100svh - 76px);
    padding:clamp(18px,3vh,34px) 0;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  .hero-shell{
    height:auto;
    display:block;
  }

  .hero-grid{
    height:auto;
    min-height:0;
    align-items:center;
  }

  /* Keep every full-screen section positioned beneath the sticky header. */
  main > section:not(.lime-cta){
    height:calc(100svh - 76px);
    min-height:calc(100svh - 76px);
  }
}

/* === Final layout/readability pass: uniform type + complete viewport sections === */
@media (min-width: 901px){
  :root{
    --section-copy-size: clamp(.98rem, 1.55vh, 1.08rem);
    --section-copy-line: 1.5;
    --card-title-size: clamp(1.35rem, 2.35vh, 1.6rem);
    --section-title-size: clamp(3rem, 5.8vh, 4.35rem);
  }

  /* A section should never hide content. The layout is sized to fit one screen,
     but this remains a safe fallback for unusually short browser windows. */
  main > section:not(.lime-cta):not(.hero){
    height:auto !important;
    min-height:calc(100svh - 76px);
    overflow:visible !important;
  }

  /* Keep the design language consistent from page to page. */
  .section h2,
  .dark-section h2,
  .page-hero h1,
  .service-hero h1,
  .contact-details h2{
    line-height:.98;
  }

  .section p:not(.eyebrow):not(.number):not(.founder-role):not(.form-note),
  .dark-section p:not(.eyebrow):not(.number):not(.founder-role):not(.form-note),
  .page-hero p:last-child,
  .service-hero .lead{
    font-size:var(--section-copy-size);
    line-height:var(--section-copy-line);
  }

  .section h3,
  .dark-section h3,
  .service-card h3,
  .drupal-service-card h3,
  .process-row h3{
    font-size:var(--card-title-size);
    line-height:1.08;
  }

  .eyebrow{
    font-size:.72rem;
    line-height:1.2;
    margin-bottom:12px;
  }

  /* CONTACT: left copy + the COMPLETE form must fit below the sticky header. */
  .contact-hero{
    min-height:calc(100svh - 76px) !important;
    height:calc(100svh - 76px) !important;
    padding:clamp(22px,3.2vh,34px) 0 !important;
    display:flex;
    align-items:center;
    overflow:hidden !important;
  }

  .contact-top-grid{
    width:100%;
    grid-template-columns:minmax(0,.96fr) minmax(520px,1.04fr);
    gap:clamp(38px,4vw,68px);
    align-items:center;
  }

  .contact-top-grid .contact-hero-inner{
    padding-top:0;
    align-self:center;
  }

  .contact-hero h1{
    font-size:clamp(4rem,5.35vw,6.25rem) !important;
    line-height:.91;
    margin:0 0 clamp(18px,2.5vh,26px);
  }

  .contact-intro{
    max-width:600px;
    font-size:clamp(1rem,1.8vh,1.12rem) !important;
    line-height:1.55;
    margin:0;
  }

  .contact-form{
    padding:clamp(20px,2.7vh,28px);
  }

  .form-row{gap:16px}
  .form-field{margin-bottom:clamp(12px,1.8vh,17px)}
  .form-field label{margin-bottom:7px;font-size:.7rem;line-height:1.2}
  .form-field input{height:clamp(46px,6.2vh,54px);padding:10px 14px}
  .contact-submit{padding:12px 22px}
  .form-note{margin-top:10px;line-height:1.35}

  /* ABOUT: make text comfortably readable while still keeping each section whole. */
  .founders-section,
  .about-principles{
    padding-top:clamp(24px,3.2vh,34px) !important;
    padding-bottom:clamp(24px,3.2vh,34px) !important;
  }

  .founders-heading,
  .about-principles .center-heading{
    margin-bottom:clamp(18px,2.4vh,26px) !important;
  }

  .founders-heading h2,
  .about-principles .center-heading h2{
    font-size:var(--section-title-size) !important;
    line-height:.96;
  }

  .founders-heading>p:last-child{
    max-width:720px;
    font-size:clamp(.98rem,1.65vh,1.08rem) !important;
    line-height:1.48 !important;
  }

  .founder-card{
    min-height:0;
    padding:clamp(22px,3vh,30px) !important;
  }

  .founder-avatar{
    width:clamp(64px,8vh,78px) !important;
    height:clamp(64px,8vh,78px) !important;
    font-size:clamp(1.8rem,3.2vh,2.15rem) !important;
    margin-bottom:clamp(16px,2.2vh,22px) !important;
  }

  .founder-card h3{
    font-size:clamp(1.38rem,2.35vh,1.58rem) !important;
    margin-bottom:9px !important;
  }

  .founder-card p:not(.founder-role){
    font-size:clamp(.96rem,1.55vh,1.04rem) !important;
    line-height:1.45 !important;
  }

  .founder-link{
    padding-top:clamp(10px,1.5vh,16px) !important;
    font-size:.9rem !important;
  }

  .principle{
    min-height:0;
    padding:clamp(20px,2.8vh,28px) !important;
  }

  .principle h3{
    font-size:clamp(1.35rem,2.25vh,1.55rem) !important;
    margin:10px 0 7px !important;
  }

  .principle p{
    max-width:620px;
    font-size:clamp(.96rem,1.52vh,1.04rem) !important;
    line-height:1.45 !important;
  }

  /* Keep other repeated cards from shrinking below the new readable baseline. */
  .service-card p:not(.number),
  .drupal-service-card p,
  .process-row p,
  .feature-grid p,
  .difference-list p{
    font-size:clamp(.96rem,1.52vh,1.04rem) !important;
    line-height:1.48 !important;
  }
}

/* Short desktop/laptop windows: retain readability, reduce empty spacing instead of text. */
@media (min-width: 901px) and (max-height: 780px){
  .contact-hero{padding-top:18px !important;padding-bottom:18px !important}
  .contact-hero h1{font-size:clamp(3.7rem,4.9vw,5.45rem) !important;margin-bottom:16px}
  .contact-intro{font-size:1rem !important;line-height:1.45}
  .contact-form{padding:18px 22px}
  .form-field{margin-bottom:10px}
  .form-field input{height:44px}
  .contact-submit{padding:11px 20px}
  .form-note{font-size:.72rem}

  .founders-section,
  .about-principles{padding-top:18px !important;padding-bottom:18px !important}
  .founders-heading,
  .about-principles .center-heading{margin-bottom:14px !important}
  .founders-heading h2,
  .about-principles .center-heading h2{font-size:clamp(2.9rem,5.5vh,3.6rem) !important}
  .founders-heading>p:last-child{font-size:.96rem !important}
  .founder-card{padding:18px 24px !important}
  .founder-avatar{width:58px !important;height:58px !important;font-size:1.65rem !important;margin-bottom:12px !important}
  .founder-card h3{font-size:1.35rem !important}
  .founder-card p:not(.founder-role){font-size:.94rem !important;line-height:1.4 !important}
  .principle{padding:16px 24px !important}
  .principle h3{font-size:1.3rem !important}
  .principle p{font-size:.94rem !important;line-height:1.4 !important}
}

/* Mobile/tablet: never crop form or content; normal document flow. */
@media (max-width: 900px){
  main > section,
  .contact-hero{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .contact-hero{padding:58px 0 !important}
  .contact-hero h1{font-size:clamp(3.2rem,13vw,5.4rem) !important}
  .founder-card p:not(.founder-role),
  .principle p{font-size:1rem !important;line-height:1.5 !important}
}

/* Navigation, dropdown, breadcrumb and footer consistency */
.nav-dropdown{position:relative;display:flex;align-items:center;height:76px}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:5px}
.dropdown-caret{font-size:.72em;transition:transform .2s ease}
.nav-dropdown-menu{position:absolute;top:calc(100% - 1px);left:-18px;min-width:190px;padding:9px;background:#0b0b0b;border:1px solid #292929;box-shadow:0 18px 45px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:40}
.nav-dropdown-menu a{display:block;padding:10px 12px;white-space:nowrap;color:#cfcfcf!important;border-bottom:1px solid #1c1c1c}
.nav-dropdown-menu a:last-child{border-bottom:0}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus{color:var(--lime)!important;background:#121212}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown:hover .dropdown-caret,.nav-dropdown:focus-within .dropdown-caret{transform:rotate(180deg)}

.breadcrumb{border-bottom:1px solid var(--line);background:#090909}
.breadcrumb-inner{min-height:42px;display:flex;align-items:center;gap:9px;font-size:.74rem;letter-spacing:.04em;color:#6f6f6f}
.breadcrumb a{color:#909090;text-decoration:none;transition:color .18s ease}
.breadcrumb a:hover{color:var(--lime)}
.breadcrumb-current{color:#c5c5c5}
.breadcrumb-separator{color:#4c4c4c}

.footer-grid{grid-template-columns:2fr 1fr 1fr}
.footer-grid h4{letter-spacing:.02em}

@media(max-width:800px){
  .nav-dropdown{height:auto;display:block}
  .nav-dropdown-trigger{width:100%;justify-content:space-between}
  .nav-dropdown-menu{position:static;min-width:0;margin-top:7px;padding:4px 0 4px 14px;border:0;border-left:1px solid #282828;box-shadow:none;opacity:1;visibility:visible;transform:none;background:transparent}
  .nav-dropdown-menu a{padding:8px 10px;border:0;font-size:.84rem;color:#9f9f9f!important}
  .dropdown-caret{transform:none!important}
  .breadcrumb-inner{min-height:38px;overflow-x:auto;white-space:nowrap}
  .footer-grid{grid-template-columns:1fr;gap:28px}
}

/* Clickable content cards: the whole card follows its existing text link. */
.service-card[data-card-link],
.blog-card[data-card-link]{
  cursor:pointer;
  transition:border-color .2s ease,transform .2s ease,background-color .2s ease;
}
.service-card[data-card-link]:focus-visible,
.blog-card[data-card-link]:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}
.service-card[data-card-link]:hover,
.blog-card[data-card-link]:hover{
  border-color:var(--lime);
  transform:translateY(-2px);
}


/* === SERVICE HERO VISUAL SYSTEM === */
.service-lime{color:var(--lime)}
.service-visual-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);gap:clamp(30px,4vw,70px);align-items:center;width:min(var(--max),calc(100% - 44px))}
.service-visual-grid .drupal-text-hero{min-width:0}
.service-visual-grid .drupal-text-hero h1{max-width:760px}
.service-infographic{width:100%;max-width:560px;justify-self:end;position:relative;filter:drop-shadow(0 0 36px rgba(185,255,0,.08))}
.service-infographic:before{content:"";position:absolute;inset:10% 6%;background:radial-gradient(circle,rgba(185,255,0,.13),rgba(185,255,0,.035) 35%,transparent 68%);filter:blur(18px);pointer-events:none}
.service-infographic svg{display:block;width:100%;height:auto;position:relative}
.service-infographic .panel{fill:#0e0e0e;stroke:#303030;stroke-width:1.5}
.service-infographic .panel-top{fill:#121212;stroke:#303030;stroke-width:1.5}
.service-infographic .searchbar{fill:#080808;stroke:#515151;stroke-width:1.3}
.service-infographic .muted-stroke{stroke:#565656;stroke-width:1.4;fill:none;stroke-linecap:round}
.service-infographic .lime-stroke{stroke:var(--lime);stroke-width:2;fill:none;stroke-linecap:round}
.service-infographic .connector{stroke:var(--lime);stroke-width:1.25;fill:none;opacity:.7;stroke-dasharray:5 6}
.service-infographic .core-ring{fill:none;stroke:var(--lime);stroke-width:1.4;stroke-dasharray:3 7}
.service-infographic .core-fill{fill:#b9ff00;stroke:#d6ff6e;stroke-width:1}
.service-infographic .big-mark{font:700 42px "Space Grotesk",sans-serif;fill:#060606;letter-spacing:-2px}
.service-infographic .node circle{fill:#0a0a0a;stroke:#b9ff00;stroke-width:1.5}.service-infographic .node path{fill:none;stroke:#b9ff00;stroke-width:1.5}
.service-infographic .tag{fill:#101010;stroke:#353535;stroke-width:1}.service-infographic .tag-text{font:700 11px "Space Grotesk",sans-serif;letter-spacing:1.7px;fill:#9a9a9a}
.service-infographic .geo-orbit{fill:#090d05;stroke:#b9ff00;stroke-width:1.4}.service-infographic .geo-grid{fill:none;stroke:#567500;stroke-width:1;opacity:.85}.service-infographic .geo-grid.faint{opacity:.45}.service-infographic .geo-mark{font:700 28px "Space Grotesk",sans-serif;fill:#080808}.service-infographic .geo-sub{font:700 8px "Space Grotesk",sans-serif;letter-spacing:1.1px;fill:#263000}.service-infographic .geo-point circle{fill:#b9ff00;stroke:#d6ff6e}.service-infographic .geo-point text{font:700 10px "Space Grotesk",sans-serif;letter-spacing:1.5px;fill:#9a9a9a}.service-infographic .lime-fill{fill:#b9ff00}.service-infographic .muted-fill{fill:#555}.service-infographic .wire-box{fill:#0a0a0a;stroke:#3d3d3d;stroke-width:1.2}

/* AI/GEO now use the AVARNYA green-light atmosphere instead of unrelated accent colors. */
.service-hero.ai,.service-hero.geo{background:radial-gradient(circle at 78% 42%,#263900 0,#111800 17%,transparent 38%)}

@media (min-width:901px){
  .service-hero.ai,.service-hero.geo,.service-hero.drupal{padding-top:clamp(34px,4.5vh,54px);padding-bottom:clamp(34px,4.5vh,54px);overflow:hidden}
  .service-visual-grid{min-height:calc(100svh - 76px - 54px);}
  .service-visual-grid .drupal-text-hero .eyebrow{margin-bottom:clamp(16px,2.2vh,24px)}
  .service-visual-grid .drupal-text-hero h1{font-size:clamp(3.9rem,6.25vw,6.75rem);margin-bottom:clamp(16px,2.1vh,24px)}
  .service-visual-grid .drupal-text-hero .lead{font-size:clamp(1rem,1.1vw,1.13rem);line-height:1.55;max-width:650px}
  .service-infographic{max-height:62vh}
  .service-infographic svg{max-height:62vh}
}
@media (min-width:901px) and (max-height:780px){
  .service-visual-grid{min-height:calc(100svh - 130px)}
  .service-visual-grid .drupal-text-hero h1{font-size:clamp(3.55rem,5.7vw,5.8rem)}
  .service-infographic,.service-infographic svg{max-height:56vh}
}
@media (max-width:900px){
  .service-visual-grid{grid-template-columns:1fr;gap:26px}
  .service-infographic{justify-self:center;max-width:520px;order:2}
  .service-visual-grid .drupal-text-hero h1{font-size:clamp(3.4rem,13vw,5.8rem)}
}
@media (max-width:600px){.service-infographic{max-width:430px}.service-visual-grid{width:min(var(--max),calc(100% - 28px))}}


/* === Blog filters + long-form article readability === */
.blog-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.blog-filter-btn{appearance:none;background:transparent;border:1px solid transparent;color:#777;font:inherit;padding:8px 12px;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}
.blog-filter-btn:hover,.blog-filter-btn:focus-visible{color:var(--white);border-color:#333;outline:none}
.blog-filter-btn.active{color:var(--lime);border-color:#3a4d00;background:#0d1205}
.blog-card[hidden]{display:none!important}
.article-inner{max-width:900px}
.article .eyebrow{color:var(--lime)}
.article-intro{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.65;max-width:800px}
.article-section{margin-top:52px}
.article-section h2{font-size:clamp(1.75rem,3vw,2.35rem);margin:0 0 18px}
.article-section p{font-size:1.05rem;line-height:1.78;margin:0 0 17px;color:#aaa}
.article-cta p{color:#171717;max-width:650px;margin:0 0 22px}
@media(max-width:800px){.blog-filter{gap:6px}.blog-filter-btn{padding:8px 9px}.article-section{margin-top:38px}.article-section p{font-size:1rem;line-height:1.7}}


/* === AVARNYA service content flow + subtle conversion prompts === */
.service-copy-stack{max-width:1040px;margin:0 auto;display:block}
.service-section-heading{max-width:760px}
.service-section-heading h2{margin-bottom:clamp(18px,2.2vh,28px)}
.service-section-copy{max-width:820px;margin-top:0}
.service-section-copy p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.7;margin:0 0 14px}
.service-method-intro{margin-bottom:clamp(24px,4vh,42px)}
.service-method-intro>.service-section-copy{display:block;max-width:820px;align-self:auto}
.subtle-cta{margin-top:clamp(24px,4vh,42px);padding-top:18px;border-top:1px solid #262626;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#777;font-size:.9rem}
.subtle-cta a{color:var(--lime);text-decoration:none;font-weight:700;white-space:nowrap}
.subtle-cta a:hover{text-decoration:underline;text-underline-offset:4px}

/* Blog listing: flat until hover; full card space remains clickable. */
.blog-filter{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.blog-filter-btn{appearance:none;border:0;background:transparent;color:#777;padding:7px 0;font:inherit;cursor:pointer;position:relative}
.blog-filter-btn:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.blog-filter-btn:hover,.blog-filter-btn.active{color:var(--lime)}
.blog-filter-btn.active:after{transform:scaleX(1)}
.blog-grid{gap:0;border-top:1px solid #252525;border-bottom:1px solid #252525}
.blog-card{background:transparent;border:0;border-right:1px solid #252525;padding:38px;min-height:360px;cursor:pointer;transition:background .22s ease,transform .22s ease}
.blog-card:last-child{border-right:0}
.blog-card:hover,.blog-card:focus-visible{background:#101010;outline:none;transform:translateY(-3px)}
.blog-card[hidden]{display:none!important}

/* Expanded blog guides */
.article-expanded{padding-top:70px}
.article-expanded .article-inner{max-width:1040px}
.article-head{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:40px;align-items:end}
.article-head h1{margin-bottom:20px}
.article-count{border-left:1px solid #2d2d2d;padding-left:28px;display:flex;align-items:flex-end;gap:12px;padding-bottom:14px}
.article-count strong{font:700 clamp(4rem,7vw,6rem) "Space Grotesk";line-height:.8;color:var(--lime)}
.article-count span{font-size:.72rem;letter-spacing:.15em;color:#999;line-height:1.4}
.article-infographic{margin:48px 0 54px;border-top:1px solid #252525;border-bottom:1px solid #252525;padding:24px 0}
.article-infographic svg{display:block;width:100%;height:auto;max-height:330px}
.ig-panel{fill:#0d0d0d;stroke:#2a2a2a}.ig-core{fill:#b9ff00;stroke:#b9ff00}.ig-core-box{fill:#111;stroke:#b9ff00}.ig-ring{fill:none;stroke:#6a9100;stroke-width:2}.ig-node circle,.ig-source rect{fill:#111;stroke:#566f13}.ig-line{fill:none;stroke:#b9ff00;stroke-width:2}.ig-big{font:700 34px "Space Grotesk";fill:#050505}.ig-big-sm{font:700 27px "Space Grotesk";fill:#b9ff00}.ig-label{font:700 12px "Space Grotesk";letter-spacing:1.3px;fill:#b9ff00}.ig-caption{font:600 12px "Space Grotesk";letter-spacing:1.7px;fill:#777}
.article-summary{display:grid;grid-template-columns:180px 1fr;gap:30px;padding:28px 0 42px;border-bottom:1px solid #2b2b2b}
.article-summary ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.article-summary li{color:#bbb}.article-summary li:before{content:"→";color:var(--lime);margin-right:9px}
.article-point{padding:54px 0;border-bottom:1px solid #292929}
.article-point-kicker{display:flex;gap:10px;align-items:center;margin-bottom:12px}.article-point-kicker span{color:var(--lime);font-weight:700;letter-spacing:.12em}.article-point-kicker em{font-style:normal;color:#555;font-size:.72rem;letter-spacing:.12em}
.article-point h2{font-size:clamp(2rem,3.6vw,3.1rem);margin:0 0 18px}.article-point p{font-size:1.04rem;line-height:1.75;max-width:900px}

@media(max-width:800px){
 .subtle-cta{align-items:flex-start;flex-direction:column}
 .blog-grid{border-bottom:0}.blog-card{border-right:0;border-bottom:1px solid #252525;padding:28px 0;min-height:0}.blog-card:hover,.blog-card:focus-visible{padding-left:16px;padding-right:16px}
 .article-head{grid-template-columns:1fr}.article-count{border-left:0;border-top:1px solid #2d2d2d;padding:20px 0 0}.article-summary{grid-template-columns:1fr}.article-summary ul{grid-template-columns:1fr}
}


/* === Readability refinement: one-step larger supporting text === */
p{font-size:1.0625rem}
.nav a{font-size:.9625rem}
.breadcrumb{font-size:.9rem}
.footer-grid a{font-size:.95rem}
.footer-grid p{font-size:1rem}
.blog-filter{font-size:1rem}
.check-list li{font-size:1.02rem;line-height:1.5}
.sitemap-grid a{font-size:1rem}

.service-context-copy{max-width:690px}
.service-context-copy p{margin:0 0 15px;font-size:1.0625rem;line-height:1.58}
.service-context-copy p:last-child{margin-bottom:0}

@media (min-width:901px){
  :root{
    --section-copy-size:clamp(1.04rem,1.62vh,1.14rem);
    --card-title-size:clamp(1.41rem,2.4vh,1.66rem);
  }
  .eyebrow{font-size:.78rem}
  .drupal-service-card p,
  .process-row p,
  .feature-grid p,
  .difference-list p,
  .founder-card p:not(.founder-role),
  .principle p{
    font-size:clamp(1.02rem,1.58vh,1.10rem) !important;
  }
  .service-context-section{padding-top:clamp(62px,8vh,90px);padding-bottom:clamp(62px,8vh,90px)}
  .service-context-section .split{align-items:center}
  .service-context-copy p{font-size:clamp(1.04rem,1.62vh,1.14rem);line-height:1.52;margin-bottom:clamp(10px,1.4vh,15px)}
}

@media (min-width:901px) and (max-height:780px){
  .service-context-section{padding-top:42px;padding-bottom:42px}
  .service-context-copy p{font-size:1rem;line-height:1.45;margin-bottom:9px}
}

@media (max-width:900px){
  p{font-size:1rem}
  .nav a{font-size:1rem}
  .service-context-copy p{font-size:1rem;line-height:1.55}
}


/* === Global readability + animated header summaries === */
html{font-size:17px}
body{font-size:1rem}
p{font-size:1.08rem;line-height:1.68}
.nav a{font-size:1rem}
.eyebrow{font-size:.8rem}
.btn{font-size:1rem}
.footer-grid a{font-size:1rem}
.footer-grid h4{font-size:1.08rem}
.breadcrumb{font-size:.96rem}
.service-row p,.service-card p,.blog-card p,.feature-grid p,.principle p,.difference-list p{font-size:1.08rem}
.check-list li,.sitemap-grid a{font-size:1.06rem}

.page-hero.has-motion-summary{padding:82px 0 76px;overflow:hidden}
.page-hero.has-motion-summary>.container{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:64px;align-items:center}
.hero-motion-summary{position:relative;min-height:330px;display:grid;place-items:center;overflow:hidden}
.hero-motion-orbit{position:absolute;width:290px;height:290px;border:1px solid #b9ff0044;border-radius:50%;animation:summarySpin 18s linear infinite}
.hero-motion-orbit:before,.hero-motion-orbit:after{content:"";position:absolute;inset:38px;border:1px solid #b9ff002f;border-radius:50%}
.hero-motion-orbit:after{inset:78px}
.hero-motion-core{position:relative;z-index:2;width:128px;height:128px;border:1px solid var(--lime);border-radius:50%;display:grid;place-items:center;text-align:center;background:#0a0d05;box-shadow:0 0 50px #b9ff001e}
.hero-motion-core strong{font:700 1.2rem "Space Grotesk";color:var(--lime);letter-spacing:.05em}
.hero-motion-item{position:absolute;z-index:3;padding:9px 13px;border-left:2px solid var(--lime);background:#0b0b0be8;font:700 .76rem "Space Grotesk";letter-spacing:.1em;color:#ddd;animation:summaryFloat 5s ease-in-out infinite}
.hero-motion-item:nth-of-type(1){left:2%;top:18%}.hero-motion-item:nth-of-type(2){right:0;top:28%;animation-delay:-1.2s}.hero-motion-item:nth-of-type(3){left:8%;bottom:19%;animation-delay:-2.4s}.hero-motion-item:nth-of-type(4){right:3%;bottom:12%;animation-delay:-3.6s}
.hero-motion-pulse{position:absolute;width:180px;height:180px;border:1px solid #b9ff0035;border-radius:50%;animation:summaryPulse 3s ease-out infinite}
@keyframes summarySpin{to{transform:rotate(360deg)}}
@keyframes summaryFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(7px)}}
@keyframes summaryPulse{0%{transform:scale(.7);opacity:.75}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-motion-orbit,.hero-motion-item,.hero-motion-pulse{animation:none}}
@media(max-width:900px){html{font-size:16px}.page-hero.has-motion-summary>.container{grid-template-columns:1fr;gap:28px}.hero-motion-summary{min-height:280px}.hero-motion-orbit{width:240px;height:240px}}

/* === Header orbit + homepage alignment refinement === */
@media (min-width:901px){
  /* Homepage: keep the intro copy visually aligned and avoid awkward headline wrapping. */
  .section .section-intro{
    grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
    gap:clamp(48px,6vw,92px);
    align-items:center;
  }
  .section .section-intro > div{align-self:center}
  .section .section-intro > p{
    align-self:center;
    justify-self:start;
    max-width:520px;
    margin:0;
  }
  .section .section-intro h2{
    max-width:760px;
    font-size:clamp(3rem,4.8vw,4.25rem);
    line-height:1.02;
  }

  /* Animated summary sits on the visual centreline of the left hero copy. */
  .page-hero.has-motion-summary>.container{
    grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);
    gap:clamp(48px,6vw,88px);
    align-items:center;
  }
  .page-hero.has-motion-summary .page-hero-copy{align-self:center}
  .hero-motion-summary{
    min-height:430px;
    width:100%;
    max-width:570px;
    justify-self:center;
    align-self:center;
    transform:translateY(-12px);
    overflow:visible;
  }

  /* Each label is its own planet, with its own orbit radius, speed and phase. */
  .hero-motion-item{
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform-origin:0 0;
    animation-name:summaryPlanet!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
    will-change:transform;
  }
  .hero-motion-item:nth-of-type(1){--orbit-r:175px;--orbit-start:18deg;animation-duration:14s!important;animation-delay:-2s!important}
  .hero-motion-item:nth-of-type(2){--orbit-r:205px;--orbit-start:112deg;animation-duration:19s!important;animation-delay:-7s!important}
  .hero-motion-item:nth-of-type(3){--orbit-r:155px;--orbit-start:205deg;animation-duration:12s!important;animation-delay:-4s!important}
  .hero-motion-item:nth-of-type(4){--orbit-r:225px;--orbit-start:292deg;animation-duration:23s!important;animation-delay:-11s!important}
  .hero-motion-orbit{width:320px;height:320px;animation-duration:28s}
  .hero-motion-core{width:136px;height:136px}
}

@keyframes summaryPlanet{
  from{transform:translate(-50%,-50%) rotate(var(--orbit-start)) translateX(var(--orbit-r)) rotate(calc(-1 * var(--orbit-start)))}
  to{transform:translate(-50%,-50%) rotate(calc(var(--orbit-start) + 360deg)) translateX(var(--orbit-r)) rotate(calc(-1 * (var(--orbit-start) + 360deg)))}
}

@media (min-width:901px) and (max-height:820px){
  .hero-motion-summary{min-height:350px;transform:translateY(-6px)}
  .hero-motion-item:nth-of-type(1){--orbit-r:145px}
  .hero-motion-item:nth-of-type(2){--orbit-r:170px}
  .hero-motion-item:nth-of-type(3){--orbit-r:125px}
  .hero-motion-item:nth-of-type(4){--orbit-r:185px}
  .hero-motion-orbit{width:270px;height:270px}
  .hero-motion-core{width:118px;height:118px}
  .section .section-intro h2{font-size:clamp(2.75rem,5.3vh,3.7rem)}
}

@media (max-width:900px){
  .hero-motion-summary{overflow:hidden;transform:none}
  .hero-motion-item{animation:summaryFloat 5s ease-in-out infinite}
}

@media (prefers-reduced-motion:reduce){
  .hero-motion-item{animation:none!important}
}

/* === Equal-spaced large page-summary orbit === */
@media (min-width:901px){
  .page-hero.has-motion-summary>.container{
    grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr);
    gap:72px;
    align-items:center;
  }
  .hero-motion-summary{
    min-height:520px;
    width:100%;
    max-width:620px;
    justify-self:center;
    overflow:visible;
    transform:none;
  }
  .hero-motion-orbit{
    width:420px;
    height:420px;
    animation:summarySpin 30s linear infinite;
  }
  .hero-motion-orbit:before{inset:54px}
  .hero-motion-orbit:after{inset:108px}
  .hero-motion-pulse{width:230px;height:230px}
  .hero-motion-core{
    width:150px;
    height:150px;
    font-size:1.05rem;
  }
  .hero-motion-item{
    --orbit-r:245px;
    --orbit-start:0deg;
    left:50%;
    top:50%;
    min-width:96px;
    text-align:center;
    padding:11px 15px;
    white-space:nowrap;
    animation:summaryPlanetEqual 22s linear infinite!important;
    animation-delay:0s!important;
  }
  .hero-motion-item:nth-of-type(1){--orbit-start:0deg}
  .hero-motion-item:nth-of-type(2){--orbit-start:90deg}
  .hero-motion-item:nth-of-type(3){--orbit-start:180deg}
  .hero-motion-item:nth-of-type(4){--orbit-start:270deg}
}
@keyframes summaryPlanetEqual{
  from{transform:translate(-50%,-50%) rotate(var(--orbit-start)) translateX(var(--orbit-r)) rotate(calc(-1 * var(--orbit-start)))}
  to{transform:translate(-50%,-50%) rotate(calc(var(--orbit-start) + 360deg)) translateX(var(--orbit-r)) rotate(calc(-1 * (var(--orbit-start) + 360deg)))}
}
@media (min-width:901px) and (max-height:820px){
  .hero-motion-summary{min-height:430px;max-width:540px}
  .hero-motion-orbit{width:350px;height:350px}
  .hero-motion-item{--orbit-r:205px}
  .hero-motion-core{width:130px;height:130px}
  .hero-motion-pulse{width:200px;height:200px}
}


/* === Fixed four-arm rotating summary system === */
@media (min-width:901px){
  .hero-motion-summary{
    min-height:600px;
    max-width:700px;
  }
  .hero-motion-orbit{
    width:500px;
    height:500px;
    animation:none!important;
  }
  .hero-motion-orbit:before{inset:64px}
  .hero-motion-orbit:after{inset:128px}
  .hero-motion-pulse{width:270px;height:270px}
  .hero-motion-core{width:165px;height:165px;font-size:1.08rem}
  .hero-motion-rotor{
    position:absolute;
    left:50%;
    top:50%;
    width:560px;
    height:560px;
    transform:translate(-50%,-50%);
    transform-origin:center;
    animation:summaryRotor 24s linear infinite;
    pointer-events:none;
  }
  .hero-motion-rotor .hero-motion-item{
    position:absolute;
    left:50%;
    top:50%;
    min-width:118px;
    max-width:150px;
    padding:12px 17px;
    text-align:center;
    white-space:nowrap;
    animation:summaryLabelCounter 24s linear infinite!important;
    animation-delay:0s!important;
  }
  .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-280px)}
  .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(280px)}
  .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(280px)}
  .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-280px)}

  /* fixed-position child anchors; rotation is inherited from the rotor, while inner text is counter-rotated */
  .hero-motion-rotor .hero-motion-item:nth-child(1)::before,
  .hero-motion-rotor .hero-motion-item:nth-child(2)::before,
  .hero-motion-rotor .hero-motion-item:nth-child(3)::before,
  .hero-motion-rotor .hero-motion-item:nth-child(4)::before{content:none}
}
@keyframes summaryRotor{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
/* Preserve the fixed cardinal offset while counter-rotating label orientation. */
@keyframes summaryLabelCounter{
  from{rotate:0deg}
  to{rotate:-360deg}
}
@media (min-width:901px) and (max-height:820px){
  .hero-motion-summary{min-height:500px;max-width:610px}
  .hero-motion-orbit{width:420px;height:420px}
  .hero-motion-rotor{width:480px;height:480px}
  .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-240px)}
  .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(240px)}
  .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(240px)}
  .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-240px)}
  .hero-motion-pulse{width:230px;height:230px}
  .hero-motion-core{width:145px;height:145px}
}
@media (max-width:900px){
  .hero-motion-rotor{display:contents}
}
@media (prefers-reduced-motion:reduce){
  .hero-motion-rotor,.hero-motion-rotor .hero-motion-item{animation:none!important}
}


/* === CTA overlap + homepage balance refinement === */
.service-choice-cta .mini-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(44px,7vw,110px);
  align-items:center;
}
.service-choice-cta .mini-cta-copy{max-width:880px}
.service-choice-cta .mini-cta-copy .eyebrow{margin:0 0 16px}
.service-choice-cta .mini-cta h2{
  margin:0 0 18px;
  max-width:820px;
  font-size:clamp(2.7rem,4.6vw,5.2rem);
  line-height:.98;
}
.service-choice-cta .mini-cta-copy>p:last-child{
  margin:0;
  max-width:760px;
  font-size:clamp(1.03rem,1.3vw,1.16rem);
  line-height:1.65;
}
.service-choice-cta .mini-cta>.btn{
  min-width:180px;
  text-align:center;
  white-space:nowrap;
  justify-self:end;
}

.why-heading{max-width:900px;margin-bottom:clamp(38px,5vh,58px)}
.why-heading .why-intro{
  max-width:760px;
  margin:20px auto 0;
  font-size:clamp(1.02rem,1.25vw,1.16rem);
  line-height:1.65;
}
.feature-grid>div{position:relative;padding-top:24px;border-top:1px solid #2a2a2a}
.feature-grid .feature-no{
  display:block;
  color:var(--lime);
  font:700 .72rem "Space Grotesk",sans-serif;
  letter-spacing:.14em;
  margin-bottom:18px;
}
.feature-grid strong{display:block;font-size:1.55rem;line-height:1;margin-bottom:14px}
.feature-grid h3{font-size:clamp(1.35rem,1.55vw,1.65rem);margin:0 0 12px}
.feature-grid p{font-size:clamp(1rem,1.13vw,1.1rem);line-height:1.58;margin:0}

@media (min-width:801px){
  .service-choice-cta{min-height:calc(100svh - 76px);display:flex;align-items:center}
  .service-choice-cta>.container{width:min(var(--max),calc(100% - 44px))}
  .feature-grid{gap:clamp(30px,3vw,52px)}
}
@media (max-width:1050px){
  .service-choice-cta .mini-cta{grid-template-columns:1fr;gap:30px}
  .service-choice-cta .mini-cta>.btn{justify-self:start}
}
@media (max-width:800px){
  .service-choice-cta .mini-cta{display:flex;flex-direction:column;align-items:flex-start}
  .why-heading .why-intro{margin-left:0;margin-right:0}
  .feature-grid>div{padding-top:20px}
}
@media (min-width:801px) and (max-height:760px){
  .service-choice-cta .mini-cta h2{font-size:clamp(2.4rem,4vw,4.2rem)}
  .service-choice-cta .mini-cta-copy>p:last-child{font-size:1rem;line-height:1.5}
  .why-heading{margin-bottom:30px}
  .why-heading .why-intro{font-size:1rem;line-height:1.5;margin-top:14px}
  .feature-grid>div{padding-top:18px}
  .feature-grid .feature-no{margin-bottom:10px}
  .feature-grid h3{margin-bottom:8px}
  .feature-grid p{font-size:.98rem;line-height:1.45}
}

/* === Compact orbit + uniform type/motion pass === */
:root{
  --ui-ease:cubic-bezier(.22,.61,.36,1);
  --ui-fast:180ms;
  --ui-normal:280ms;
  --orbit-speed:26s;
}

/* Keep interactive transitions consistent site-wide. */
a,.btn,.nav a,.nav-cta,.service-card,.blog-card,.founder-card,.service-row,
.blog-filter-btn,.nav-dropdown-menu,.dropdown-caret,.sitemap-grid a{
  transition-duration:var(--ui-normal)!important;
  transition-timing-function:var(--ui-ease)!important;
}

/* Consistent readable typography without changing the established hierarchy. */
body{font-size:16px}
p,.service-card p,.feature-grid p,.founder-card p,.principle p,
.article-section p,.service-row p,.page-hero p:last-child{line-height:1.62}

@media (min-width:901px){
  /* Give text and animation equal visual breathing room. */
  .page-hero.has-motion-summary>.container{
    grid-template-columns:minmax(0,1.08fr) minmax(390px,.82fr);
    gap:clamp(42px,5vw,72px);
    align-items:center;
  }
  .hero-motion-summary{
    min-height:480px;
    max-width:540px;
    width:100%;
    justify-self:center;
  }
  .hero-motion-orbit{
    width:390px;
    height:390px;
  }
  .hero-motion-orbit:before{inset:50px}
  .hero-motion-orbit:after{inset:100px}
  .hero-motion-pulse{width:210px;height:210px}
  .hero-motion-core{width:138px;height:138px;font-size:1rem}
  .hero-motion-rotor{
    width:450px;
    height:450px;
    animation-duration:var(--orbit-speed)!important;
  }
  .hero-motion-rotor .hero-motion-item{
    min-width:108px;
    max-width:138px;
    padding:10px 14px;
    font-size:.72rem;
    animation-duration:var(--orbit-speed)!important;
  }
  .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-225px)}
  .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(225px)}
  .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(225px)}
  .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-225px)}
}

@media (min-width:901px) and (max-height:820px){
  .hero-motion-summary{min-height:410px;max-width:470px}
  .hero-motion-orbit{width:330px;height:330px}
  .hero-motion-orbit:before{inset:42px}
  .hero-motion-orbit:after{inset:84px}
  .hero-motion-pulse{width:180px;height:180px}
  .hero-motion-core{width:120px;height:120px;font-size:.92rem}
  .hero-motion-rotor{width:390px;height:390px}
  .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-195px)}
  .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(195px)}
  .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(195px)}
  .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-195px)}
}

@media (max-width:900px){
  .hero-motion-summary{max-width:420px;margin-inline:auto}
}


/* Search Essentials SEO/accessibility refinements */
.article-byline{margin-top:14px;font-size:.92rem;color:var(--muted,#9a9a9a);letter-spacing:.01em}
.article-sources{margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.article-sources h2{font-size:clamp(1.5rem,2.2vw,2.25rem);margin:0 0 10px}
.article-sources p{max-width:760px;color:var(--muted,#9a9a9a);margin:0 0 16px}
.article-sources ul{margin:0;padding-left:20px;display:grid;gap:8px}
.article-sources a{color:var(--lime,#b6ff00);text-decoration-thickness:1px;text-underline-offset:3px}
.article-sources a:hover{text-decoration:underline}

/* === Uniform header geometry pass ===
   Keeps hero height, text column, visual column and inter-column spacing stable
   across Home, About, Services, Blog, Contact and service detail pages. */
:root{
  --hero-header-h:76px;
  --hero-breadcrumb-h:42px;
  --hero-inner-h:520px;
  --hero-col-gap:clamp(56px,5.6vw,88px);
  --hero-visual-w:500px;
}

@media (min-width:901px){
  /* All internal-page hero sections occupy the same available screen height. */
  .page-hero.has-motion-summary,
  .service-hero,
  .contact-hero{
    min-height:calc(100svh - var(--hero-header-h) - var(--hero-breadcrumb-h))!important;
    padding:0!important;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  /* Home has no breadcrumb, so it uses the same frame below the sticky header. */
  .hero{
    min-height:calc(100svh - var(--hero-header-h))!important;
    padding:0!important;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  /* One shared two-column geometry for every header. */
  .hero .hero-grid,
  .page-hero.has-motion-summary>.container,
  .service-hero .service-visual-grid,
  .contact-hero .contact-top-grid{
    width:100%;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(440px,1fr)!important;
    gap:var(--hero-col-gap)!important;
    align-items:center!important;
  }

  /* Fixed text frame: same X position, same top edge, same vertical rhythm. */
  .hero .hero-copy,
  .page-hero.has-motion-summary .page-hero-copy,
  .service-hero .drupal-text-hero,
  .contact-hero .contact-hero-inner{
    min-height:var(--hero-inner-h)!important;
    padding:42px 0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-self:center!important;
    min-width:0;
  }

  /* Shared eyebrow / headline / supporting-copy spacing. */
  .hero .hero-copy>.eyebrow,
  .page-hero.has-motion-summary .page-hero-copy>.eyebrow,
  .service-hero .drupal-text-hero>.eyebrow,
  .contact-hero .contact-hero-inner>.eyebrow{
    margin:0 0 22px!important;
  }

  .hero .hero-copy>h1,
  .page-hero.has-motion-summary .page-hero-copy>h1,
  .service-hero .drupal-text-hero>h1,
  .contact-hero .contact-hero-inner>h1{
    margin:0 0 28px!important;
  }

  .hero .hero-copy>p:not(.eyebrow),
  .page-hero.has-motion-summary .page-hero-copy>p:not(.eyebrow),
  .service-hero .drupal-text-hero>.lead,
  .contact-hero .contact-hero-inner>.contact-intro{
    margin:0!important;
    max-width:650px!important;
  }

  .hero .actions{margin-top:28px!important}

  /* Every right-side object sits inside the same visual frame. */
  .hero .hero-visual,
  .page-hero.has-motion-summary .hero-motion-summary,
  .service-hero .service-infographic,
  .contact-hero .contact-form{
    width:min(100%,var(--hero-visual-w))!important;
    max-width:var(--hero-visual-w)!important;
    justify-self:center!important;
    align-self:center!important;
    margin:0!important;
  }

  .hero .hero-visual,
  .page-hero.has-motion-summary .hero-motion-summary,
  .service-hero .service-infographic{
    min-height:var(--hero-inner-h)!important;
    height:var(--hero-inner-h)!important;
    display:grid!important;
    place-items:center!important;
  }

  /* Keep the three animated summary headers visually identical. */
  .page-hero.has-motion-summary .hero-motion-summary{
    transform:none!important;
  }
  .page-hero.has-motion-summary .hero-motion-orbit{width:350px!important;height:350px!important}
  .page-hero.has-motion-summary .hero-motion-orbit:before{inset:45px!important}
  .page-hero.has-motion-summary .hero-motion-orbit:after{inset:90px!important}
  .page-hero.has-motion-summary .hero-motion-pulse{width:190px!important;height:190px!important}
  .page-hero.has-motion-summary .hero-motion-core{width:128px!important;height:128px!important}
  .page-hero.has-motion-summary .hero-motion-rotor{width:410px!important;height:410px!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-205px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(205px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(205px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-205px)!important}

  /* Home globe and service infographics occupy the same visual footprint. */
  .hero .globe{width:440px!important;max-width:88%!important}
  .service-hero .service-infographic svg{width:100%!important;max-width:470px!important;height:auto!important;max-height:470px!important}

  /* Contact form uses the same column width and is vertically centered. */
  .contact-hero .contact-form{max-height:var(--hero-inner-h);overflow:visible}
}

@media (min-width:901px) and (max-height:820px){
  :root{--hero-inner-h:440px;--hero-visual-w:455px;--hero-col-gap:clamp(46px,5vw,72px)}
  .hero .hero-copy,
  .page-hero.has-motion-summary .page-hero-copy,
  .service-hero .drupal-text-hero,
  .contact-hero .contact-hero-inner{padding:28px 0!important}
  .page-hero.has-motion-summary .hero-motion-orbit{width:310px!important;height:310px!important}
  .page-hero.has-motion-summary .hero-motion-rotor{width:360px!important;height:360px!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-180px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(180px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(180px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-180px)!important}
  .hero .globe{width:385px!important}
  .service-hero .service-infographic svg{max-width:410px!important;max-height:410px!important}
}

@media (max-width:900px){
  /* Mobile remains natural-flow, but spacing is still consistent. */
  .hero,.page-hero.has-motion-summary,.service-hero,.contact-hero{padding-top:54px!important;padding-bottom:54px!important}
  .hero .hero-grid,.page-hero.has-motion-summary>.container,.service-hero .service-visual-grid,.contact-hero .contact-top-grid{gap:34px!important}
  .hero .hero-copy>.eyebrow,.page-hero.has-motion-summary .page-hero-copy>.eyebrow,.service-hero .drupal-text-hero>.eyebrow,.contact-hero .contact-hero-inner>.eyebrow{margin-bottom:18px!important}
}

/* === Exact shared header frame alignment ===
   All desktop hero/header panels now use the same viewport frame, text origin,
   column split, and visual center. Breadcrumbs overlay the top of the frame so
   internal pages do not start 42px lower than Home. */
:root{
  --av-hero-frame-h:calc(100svh - 76px);
  --av-hero-top-pad:clamp(58px,7.2vh,76px);
  --av-hero-bottom-pad:clamp(42px,5.5vh,60px);
  --av-hero-gap:clamp(54px,5vw,78px);
  --av-hero-visual-slot:520px;
}

@media (min-width:901px){
  /* Breadcrumb remains visible, but no longer changes header geometry. */
  main>.breadcrumb{
    position:absolute!important;
    top:76px!important;
    left:0!important;
    right:0!important;
    z-index:14!important;
    background:rgba(8,8,8,.18)!important;
    border-bottom:0!important;
    pointer-events:auto;
  }
  main>.breadcrumb .breadcrumb-inner{
    min-height:42px!important;
  }

  /* Every primary page header has the exact same outer top/bottom frame. */
  .hero,
  .page-hero.has-motion-summary,
  .service-hero,
  .contact-hero{
    height:var(--av-hero-frame-h)!important;
    min-height:var(--av-hero-frame-h)!important;
    max-height:var(--av-hero-frame-h)!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:stretch!important;
    border-bottom:1px solid var(--line)!important;
    overflow:hidden!important;
  }

  /* Same container height and same 50/50 split on every page. */
  .hero>.container,
  .page-hero.has-motion-summary>.container,
  .service-hero>.container,
  .contact-hero>.container{
    height:100%!important;
    min-height:0!important;
  }
  .hero .hero-grid,
  .page-hero.has-motion-summary>.container,
  .service-hero .service-visual-grid,
  .contact-hero .contact-top-grid{
    height:100%!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:var(--av-hero-gap)!important;
    align-items:stretch!important;
  }
  .hero .hero-shell{height:100%!important}

  /* Left panel: identical top origin and bottom boundary, independent of copy length. */
  .hero .hero-copy,
  .page-hero.has-motion-summary .page-hero-copy,
  .service-hero .drupal-text-hero,
  .contact-hero .contact-hero-inner{
    height:100%!important;
    min-height:0!important;
    padding:var(--av-hero-top-pad) 0 var(--av-hero-bottom-pad)!important;
    margin:0!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
  }

  /* Keep the first baseline and vertical rhythm identical. */
  .hero .hero-copy>.eyebrow,
  .page-hero.has-motion-summary .page-hero-copy>.eyebrow,
  .service-hero .drupal-text-hero>.eyebrow,
  .contact-hero .contact-hero-inner>.eyebrow{
    margin:0 0 22px!important;
    flex:0 0 auto;
  }
  .hero .hero-copy>h1,
  .page-hero.has-motion-summary .page-hero-copy>h1,
  .service-hero .drupal-text-hero>h1,
  .contact-hero .contact-hero-inner>h1{
    margin:0 0 26px!important;
    flex:0 0 auto;
  }
  .hero .hero-copy>p:not(.eyebrow),
  .page-hero.has-motion-summary .page-hero-copy>p:not(.eyebrow),
  .service-hero .drupal-text-hero>.lead,
  .contact-hero .contact-hero-inner>.contact-intro{
    margin:0!important;
    max-width:650px!important;
  }
  .hero .actions{margin-top:26px!important}

  /* Right panel: one shared visual slot with one exact center point. */
  .hero .hero-visual,
  .page-hero.has-motion-summary .hero-motion-summary,
  .service-hero .service-infographic,
  .contact-hero .contact-form{
    width:min(100%,var(--av-hero-visual-slot))!important;
    max-width:var(--av-hero-visual-slot)!important;
    justify-self:center!important;
    align-self:center!important;
    margin:0!important;
    transform:none!important;
  }
  .hero .hero-visual,
  .page-hero.has-motion-summary .hero-motion-summary,
  .service-hero .service-infographic{
    height:var(--av-hero-visual-slot)!important;
    min-height:var(--av-hero-visual-slot)!important;
    display:grid!important;
    place-items:center!important;
  }

  /* Visuals use the same footprint inside that slot. */
  .hero .globe{width:420px!important;max-width:82%!important}
  .page-hero.has-motion-summary .hero-motion-orbit{width:340px!important;height:340px!important}
  .page-hero.has-motion-summary .hero-motion-rotor{width:400px!important;height:400px!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-200px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(200px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(200px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-200px)!important}
  .service-hero .service-infographic svg{width:470px!important;max-width:90%!important;height:auto!important;max-height:470px!important}
  .contact-hero .contact-form{max-height:calc(var(--av-hero-frame-h) - 80px)!important}
}

@media (min-width:901px) and (max-height:820px){
  :root{
    --av-hero-top-pad:48px;
    --av-hero-bottom-pad:38px;
    --av-hero-gap:clamp(44px,4.5vw,64px);
    --av-hero-visual-slot:450px;
  }
  .hero .globe{width:370px!important}
  .page-hero.has-motion-summary .hero-motion-orbit{width:300px!important;height:300px!important}
  .page-hero.has-motion-summary .hero-motion-rotor{width:350px!important;height:350px!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(1){transform:translate(-50%,-50%) translateY(-175px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(2){transform:translate(-50%,-50%) translateX(175px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(3){transform:translate(-50%,-50%) translateY(175px)!important}
  .page-hero.has-motion-summary .hero-motion-rotor .hero-motion-item:nth-child(4){transform:translate(-50%,-50%) translateX(-175px)!important}
  .service-hero .service-infographic svg{width:400px!important;max-height:400px!important}
}

@media (max-width:900px){
  /* Restore breadcrumb to normal document flow on small screens. */
  main>.breadcrumb{position:static!important;background:#090909!important;border-bottom:1px solid var(--line)!important}
}

/* === Center all primary hero/header frames on the same site container as Home === */
@media (min-width:901px){
  .hero>.container,
  .page-hero.has-motion-summary>.container,
  .service-hero>.container,
  .contact-hero>.container{
    width:min(var(--max),calc(100% - 44px))!important;
    max-width:var(--max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Internal animated page heroes use the container itself as the grid.
     Keep the grid centered instead of stretching it edge-to-edge. */
  .page-hero.has-motion-summary>.container{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:var(--av-hero-gap)!important;
  }
}


/* === Final unified hero baseline + breadcrumb frame ===
   Home now participates in the same breadcrumb/hero system as every internal page.
   Every desktop eyebrow begins on the exact same baseline and every hero ends on
   the exact same bottom border. */
@media (min-width:901px){
  :root{
    --av-hero-eyebrow-top:58px;
  }

  /* One frame height and one border edge for all top-level page heroes. */
  .hero,
  .page-hero.has-motion-summary,
  .service-hero,
  .contact-hero{
    height:calc(100svh - 76px)!important;
    min-height:calc(100svh - 76px)!important;
    max-height:calc(100svh - 76px)!important;
    border-bottom:1px solid var(--line)!important;
  }

  /* Breadcrumb occupies the same overlay band on Home and internal pages. */
  main>.breadcrumb{
    top:76px!important;
    height:42px!important;
  }
  main>.breadcrumb .breadcrumb-inner{
    height:42px!important;
    min-height:42px!important;
  }

  /* Force the content origin to the same y-coordinate in every hero. */
  .hero .hero-copy,
  .page-hero.has-motion-summary .page-hero-copy,
  .service-hero .drupal-text-hero,
  .contact-hero .contact-hero-inner{
    padding-top:var(--av-hero-eyebrow-top)!important;
  }

  .hero .hero-copy>.eyebrow,
  .page-hero.has-motion-summary .page-hero-copy>.eyebrow,
  .service-hero .drupal-text-hero>.eyebrow,
  .contact-hero .contact-hero-inner>.eyebrow{
    margin-top:0!important;
    margin-bottom:22px!important;
    min-height:18px!important;
    display:flex!important;
    align-items:center!important;
  }

  /* Keep all right-side hero visuals centered in exactly the same slot. */
  .hero .hero-visual,
  .page-hero.has-motion-summary .hero-motion-summary,
  .service-hero .service-infographic,
  .contact-hero .contact-form{
    align-self:center!important;
    justify-self:center!important;
  }
}

@media (min-width:901px) and (max-height:820px){
  :root{--av-hero-eyebrow-top:48px;}
}


/* === Blog hero: match Services headline composition and alignment === */
@media (min-width:901px){
  .blog-page .page-hero.has-motion-summary .page-hero-copy{
    padding-top:var(--av-hero-eyebrow-top)!important;
    padding-bottom:var(--av-hero-bottom-pad)!important;
    justify-content:flex-start!important;
    align-self:stretch!important;
  }
  .blog-page .page-hero.has-motion-summary .page-hero-copy>.eyebrow{
    margin:0 0 22px!important;
  }
  .blog-page .page-hero.has-motion-summary .page-hero-copy>h1{
    width:100%;
    max-width:620px;
    margin:0 0 26px!important;
    font-size:clamp(4.4rem,6.6vw,6.8rem);
    line-height:1.02;
    letter-spacing:-.045em;
  }
  .blog-page .page-hero.has-motion-summary .page-hero-copy>p:not(.eyebrow){
    max-width:620px!important;
    margin:0!important;
  }
}
@media (min-width:901px) and (max-height:820px){
  .blog-page .page-hero.has-motion-summary .page-hero-copy>h1{
    font-size:clamp(3.9rem,6vw,5.8rem);
  }
}


/* === Contact breadcrumb + lighter form + global floating CTA === */
@media (min-width:901px){
  /* Contact can be reached with #contact-form; keep the shared breadcrumb band visible. */
  #contact-form{scroll-margin-top:118px!important;}

  /* Contact uses the same hero grid and baseline as the other top-level pages. */
  .contact-hero>.container{
    width:min(var(--max),calc(100% - 44px))!important;
    max-width:var(--max)!important;
    margin-inline:auto!important;
  }
  .contact-hero .contact-top-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:var(--av-hero-gap)!important;
    align-items:stretch!important;
  }

  /* Remove the heavy card treatment around the form. */
  .contact-hero .contact-form{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:var(--av-hero-top-pad) 0 var(--av-hero-bottom-pad)!important;
    height:100%!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }
  .contact-hero .form-row{gap:22px!important;}
  .contact-hero .form-field{margin-bottom:18px!important;}
  .contact-hero .form-field label{margin-bottom:9px!important;}
  .contact-hero input,
  .contact-hero textarea,
  .contact-hero select{
    background:rgba(14,14,14,.58)!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.22)!important;
    border-radius:0!important;
    box-shadow:none!important;
    min-height:58px!important;
    padding:14px 14px!important;
  }
  .contact-hero input:focus,
  .contact-hero textarea:focus,
  .contact-hero select:focus{
    outline:0!important;
    border-bottom-color:var(--lime)!important;
    background:rgba(18,18,18,.82)!important;
  }
  .contact-hero .contact-submit{align-self:flex-start!important;margin-top:4px!important;}
  .contact-hero .form-note{margin-top:14px!important;}
}

.floating-get-in-touch{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 19px;
  background:var(--lime);
  color:#050505;
  border:1px solid var(--lime);
  font-weight:700;
  font-size:.94rem;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background-color .28s ease,color .28s ease,border-color .28s ease;
}
.floating-get-in-touch:hover,
.floating-get-in-touch:focus-visible{
  transform:translateY(-3px);
  background:#0b0b0b;
  color:var(--lime);
  outline:none;
}
@media (max-width:900px){
  #contact-form{scroll-margin-top:76px!important;}
  .contact-hero .contact-form{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
  .contact-hero input,.contact-hero textarea,.contact-hero select{border-radius:0!important;}
  .floating-get-in-touch{right:14px;bottom:14px;min-height:42px;padding:0 15px;font-size:.86rem;}
}
@media (prefers-reduced-motion:reduce){.floating-get-in-touch{transition:none!important;}}


/* === AVARNYA Exact 2.1: WordPress breadcrumb + viewport safety ===
   Keep the approved static design, but account for the WordPress admin bar and
   make breadcrumbs part of normal flow so they can never hide beneath the header. */

/* Breadcrumbs are always visible and consume a predictable 42px row. */
main > .breadcrumb{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:5!important;
  height:42px!important;
  min-height:42px!important;
  background:#090909!important;
  border-bottom:1px solid var(--line)!important;
}
main > .breadcrumb .breadcrumb-inner{
  height:42px!important;
  min-height:42px!important;
  width:min(var(--max),calc(100% - 44px))!important;
  margin-inline:auto!important;
  padding:0!important;
}

@media (min-width:901px){
  :root{--avx-breadcrumb-h:42px;--avx-header-h:76px;}

  /* With the breadcrumb in flow, every hero gets the remaining viewport height. */
  .hero,
  .page-hero.has-motion-summary,
  .service-hero,
  .contact-hero{
    height:calc(100svh - var(--avx-header-h) - var(--avx-breadcrumb-h))!important;
    min-height:calc(100svh - var(--avx-header-h) - var(--avx-breadcrumb-h))!important;
    max-height:calc(100svh - var(--avx-header-h) - var(--avx-breadcrumb-h))!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /* WordPress's logged-in toolbar removes another 32px of usable screen height. */
  body.admin-bar .hero,
  body.admin-bar .page-hero.has-motion-summary,
  body.admin-bar .service-hero,
  body.admin-bar .contact-hero{
    height:calc(100svh - var(--avx-header-h) - var(--avx-breadcrumb-h) - 32px)!important;
    min-height:calc(100svh - var(--avx-header-h) - var(--avx-breadcrumb-h) - 32px)!important;
    max-height:calc(100svh - var(--avx-header-h) - var(--avx-breadcrumb-h) - 32px)!important;
  }

  /* Service heroes: keep text and visual centered, readable and inside the border. */
  .service-hero .service-visual-grid{
    min-height:0!important;
    height:100%!important;
    width:min(var(--max),calc(100% - 44px))!important;
    grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;
    gap:clamp(44px,4.6vw,74px)!important;
    align-items:center!important;
    margin-inline:auto!important;
  }
  .service-hero .drupal-text-hero{
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    align-self:center!important;
    justify-content:center!important;
  }
  .service-hero .drupal-text-hero>.eyebrow{
    margin:0 0 clamp(12px,1.8vh,20px)!important;
  }
  .service-hero .drupal-text-hero h1{
    width:100%!important;
    max-width:690px!important;
    margin:0 0 clamp(14px,1.8vh,22px)!important;
    font-size:clamp(3.55rem,5.25vw,5.55rem)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  .service-hero .drupal-text-hero h1 span,
  .service-hero .drupal-text-hero h1 .drupal-lime,
  .service-hero .drupal-text-hero h1 .service-lime{color:var(--lime)!important;}
  .service-hero .drupal-text-hero .lead{
    margin:0!important;
    max-width:650px!important;
    font-size:clamp(.98rem,1.02vw,1.08rem)!important;
    line-height:1.52!important;
  }
  .service-hero .service-infographic{
    width:min(100%,520px)!important;
    max-width:520px!important;
    max-height:58vh!important;
    align-self:center!important;
    justify-self:center!important;
  }
  .service-hero .service-infographic svg{
    width:100%!important;
    height:auto!important;
    max-height:58vh!important;
  }
}

/* Short laptop screens and logged-in WordPress views need one more reduction. */
@media (min-width:901px) and (max-height:900px){
  .service-hero .drupal-text-hero h1{
    font-size:clamp(3.2rem,4.8vw,4.85rem)!important;
    line-height:.97!important;
  }
  .service-hero .drupal-text-hero .lead{font-size:.98rem!important;line-height:1.48!important;}
  .service-hero .service-infographic,.service-hero .service-infographic svg{max-height:52vh!important;}
}
@media (min-width:901px) and (max-height:760px){
  .service-hero .drupal-text-hero h1{font-size:clamp(2.9rem,4.35vw,4.25rem)!important;}
  .service-hero .drupal-text-hero>.eyebrow{margin-bottom:10px!important;}
  .service-hero .drupal-text-hero h1{margin-bottom:12px!important;}
  .service-hero .drupal-text-hero .lead{font-size:.92rem!important;line-height:1.42!important;}
  .service-hero .service-infographic,.service-hero .service-infographic svg{max-height:48vh!important;}
}

@media (max-width:900px){
  main > .breadcrumb{height:auto!important;min-height:38px!important;}
  main > .breadcrumb .breadcrumb-inner{height:auto!important;min-height:38px!important;width:min(var(--max),calc(100% - 28px))!important;}
  .service-hero,.page-hero.has-motion-summary,.contact-hero,.hero{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important;}
  .service-hero .drupal-text-hero h1{font-size:clamp(3rem,12vw,5rem)!important;}
}