/* ============================================================
   KonnectAI — mobile & tablet layer
   Every rule lives inside a media query, so the finalized
   desktop composition is untouched.
   ============================================================ */

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width:1024px){
  .wrap{padding-left:26px;padding-right:26px}
}

/* ---------- NAV DRAWER (≤900px) ---------- */
@media (max-width:900px){
  nav{padding-left:20px;padding-right:20px}
  .menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;position:relative;z-index:120}

  .nav-links{
    display:flex;position:fixed;top:0;right:0;bottom:0;
    width:min(320px,86vw);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:0;padding:92px 26px 34px;
    background:linear-gradient(170deg,var(--ink-2),var(--ink-3));
    border-left:1px solid var(--line);
    box-shadow:-24px 0 70px rgba(0,0,0,.44);
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.2,.7,.2,1);
    z-index:110;overflow-y:auto;
  }
  /* nav has z-index:50 and creates a stacking context, so the drawer's own
     z-index is scoped inside it. Lift the whole nav above the scrim while open,
     otherwise the scrim's blur covers the drawer and eats every click. */
  body.nav-open nav#nav{z-index:120}
  body.nav-open .nav-links{transform:none}

  .nav-links a.nl{width:100%;padding:16px 2px;font-size:17px;color:var(--paper);border-bottom:1px solid var(--line)}
  .nav-links a.nl::after{display:none}
  .nav-links a.nl.active{color:var(--flame)}
  .nav-links .lang{margin-top:24px;align-self:flex-start;border-color:var(--line)}
  .nav-links .lang button{padding:9px 18px;font-size:14px;color:var(--stone-light)}
  .nav-links .lang button.active{color:var(--ink)}
  .nav-links .nav-wa{margin-top:18px;width:100%;justify-content:center;padding:15px 20px;font-size:15px}

  /* light inner pages keep a dark drawer, so force light text inside it */
  body.inner nav:not(.scrolled) .nav-links a.nl{color:var(--paper)}
  body.inner nav:not(.scrolled) .nav-links a.nl.active{color:var(--flame)}
  body.inner nav:not(.scrolled) .nav-links .lang{border-color:var(--line)}
  body.inner nav:not(.scrolled) .nav-links .lang button:not(.active){color:var(--stone-light)}

  .nav-scrim{position:fixed;inset:0;background:rgba(10,7,5,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;z-index:105}
  body.nav-open .nav-scrim{opacity:1;visibility:visible;pointer-events:auto}
  body.nav-open{overflow:hidden}
}
@media (min-width:901px){.nav-scrim{display:none}}

/* ---------- GLOBAL MOBILE (≤860px) ---------- */
@media (max-width:860px){
  html,body{overflow-x:hidden}
  .wrap{padding-left:22px;padding-right:22px}
  section{padding-top:clamp(50px,11vw,74px);padding-bottom:clamp(50px,11vw,74px)}

  .sec-head{font-size:clamp(26px,7.4vw,34px);line-height:1.16}
  .sec-lead{font-size:15px;line-height:1.65}
  .sec-eyebrow{font-size:11.5px}
  .cursor-glow{display:none}

  /* inner-page heroes */
  .page-hero{padding-top:clamp(104px,26vw,132px);padding-bottom:clamp(48px,12vw,68px)}
  .page-hero h1{font-size:clamp(30px,8.6vw,42px)!important;line-height:1.14;max-width:none!important;white-space:normal!important}
  .page-hero h1 .grad{white-space:normal!important}
  .page-hero .lead{font-size:15px;line-height:1.66;max-width:none!important}
  .breadcrumb{font-size:12px}
  .hs-eyebrow{font-size:11.5px}

  /* tap targets */
  .btn-primary,.btn-outline,.btn-ghost{min-height:50px;padding:15px 24px;font-size:15px}
  .page-hero .btn-primary,.page-hero .btn-outline,.page-hero .btn-ghost{width:100%;justify-content:center}

  /* hero stat rows */
  .hi-stats{gap:20px!important;margin-top:30px!important;flex-wrap:wrap}
  .hi-stat{min-width:44%}
  .hi-stat .n{font-size:19px}
  .hi-stat .l{font-size:12.5px}

  footer .foot-inner{padding-left:22px;padding-right:22px;grid-template-columns:1fr 1fr!important;gap:34px 24px}
  footer .foot-brand{grid-column:1/-1}
  .wa-float{width:54px;height:54px;right:18px;bottom:18px}
  .wa-float i{font-size:26px}

  /* two-column blocks collapse in source order */
  .founder,.proof-inner,.edu-cta-inner,.svc-detail,.hct-grid{grid-template-columns:1fr!important;gap:34px!important}
  .svc-detail.flip .sd-media{order:-1}
  .sd-media,.edu-visual{aspect-ratio:16/11}
}

/* ---------- HOME ---------- */
@media (max-width:860px){
  /* hero as vertical stack: eyebrow → framed video → content */
  .hero{min-height:auto;justify-content:flex-start;padding-left:0;padding-right:0;padding-top:clamp(104px,26vw,132px);padding-bottom:clamp(50px,12vw,72px);background:#140D0A}
  .hero-shade{display:none}
  .hero-bg .ember-1,.hero-bg .ember-2,.hero-bg .grain{display:none}
  .hero .eyebrow-mob{display:none}
  .hero-bg{position:relative;z-index:auto;order:1;width:100%;height:auto;aspect-ratio:16/10;overflow:hidden;margin-bottom:26px;background:transparent;border:0;border-radius:0;box-shadow:none}
  .hero-bg::before{content:none}
  /* feathers the video block's top/bottom into the hero colour — no seam */
  .hero-bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,#140D0A 0%,rgba(20,13,10,.72) 10%,rgba(20,13,10,.18) 24%,rgba(20,13,10,0) 38%,rgba(20,13,10,0) 60%,rgba(20,13,10,.22) 76%,rgba(20,13,10,.78) 90%,#140D0A 100%)}
  .hero-video{position:absolute;inset:0;top:0;transform:none;width:100%;height:100%;opacity:1;object-fit:cover;object-position:center;scale:1.2;mix-blend-mode:screen;filter:brightness(.85) contrast(1.35) saturate(1.06);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%)}
  .hero-inner{order:2;padding-left:22px;padding-right:22px;text-align:center}
  .hero-inner .eyebrow{display:none}
  .eyebrow{font-size:11.5px;margin-bottom:22px}
  h1.hero-title{font-size:clamp(32px,9.2vw,46px)!important;line-height:1.16;max-width:none;margin-bottom:24px}
  .hero-sub{font-size:15.5px;line-height:1.7;max-width:none;margin:0 auto 36px;max-width:34ch}
  .hero-cta{flex-direction:column;align-items:stretch;gap:16px}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%;justify-content:center}
  .btn-primary.lg{padding:16px 24px;font-size:15.5px}
  .scroll-cue,.scroll-hint{display:none}

  .mq-item{font-size:13px;padding:0 22px}
  .mq-item i{font-size:17px}
  .mq-group{padding:17px 0}

  /* roadmap: staggered path — hub, alternating cards, dashed elbow connectors */
  .rm-intro{max-width:none;margin-bottom:14px}
  .rm-intro .sec-eyebrow{margin-bottom:20px}
  .rm-intro .sec-head{margin-bottom:20px}
  .rmhub{margin-top:46px}
  .rmhub-node{padding:13px 22px;font-size:14px}
  /* hub drop: down from the badge, then left toward card 1 */
  .rmtree{display:block;position:relative;height:92px;margin-top:22px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 92' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M160 0 V36 Q160 52 144 52 H42 Q26 52 26 68 V92' stroke='%23FF8A52' stroke-opacity='0.42' stroke-width='2' stroke-dasharray='6 6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center top;background-size:100% 92px}
  .rmtree::before,.rmtree::after{content:none}
  .rm-hline,.rm-drop{display:none}

  .rmap{grid-template-columns:1fr!important;gap:46px;padding-bottom:6px}
  .rstep{position:relative;padding-bottom:0;width:74%;display:flex;z-index:1}
  .rstep:nth-child(odd){margin-right:auto}
  .rstep:nth-child(even){margin-left:auto}
  .rmap .rcard{min-height:244px;height:244px;position:relative;z-index:2}
  /* elbow: leaves the card's vertical middle, runs out, then drops behind the next card */
  .rstep::after{content:"";position:absolute;top:50%;width:26%;height:calc(50% + 78px);pointer-events:none;z-index:0;
    border-top:2px dashed rgba(255,138,82,.42)}
  .rstep:nth-child(odd)::after{right:-18%;border-right:2px dashed rgba(255,138,82,.42);border-top-right-radius:16px}
  .rstep:nth-child(even)::after{left:-18%;border-left:2px dashed rgba(255,138,82,.42);border-top-left-radius:16px}
  .rstep:last-child::after{display:none}

  .rcard{padding:24px 22px 24px;border-radius:16px}
  .rcard h3{font-size:18px;line-height:1.28;margin-bottom:10px;padding-right:34px}
  .rcard p{font-size:13px;line-height:1.62;margin-bottom:0}
  .ricon{font-size:27px;margin-bottom:18px}
  /* CTA becomes a subtle corner arrow */
  .rgo{position:absolute!important;left:auto!important;right:14px;top:16px;bottom:auto;transform:none!important;
    width:32px;height:32px;padding:0;border-radius:50%;background:rgba(255,107,43,.1);border:1px solid rgba(255,138,82,.26);
    font-size:0;letter-spacing:0;gap:0;box-shadow:none}
  .rgo i{font-size:15px;color:var(--flame)}
  .rsoon{font-size:10px}

  /* founder + why */
  /* founder: centred profile stack — label → photo → name → role → headline → body */
  .founder{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:0}
  .founder .founder-eyebrow-mob{display:inline-flex;justify-content:center;margin-bottom:22px}
  .founder > .reveal:last-child{display:flex;flex-direction:column;align-items:center;width:100%}
  .founder > .reveal > .sec-eyebrow{display:none}
  .founder-photo{aspect-ratio:1/1;width:230px;max-width:70vw;margin:0 auto;order:0;border-radius:50%;overflow:hidden}
  .founder-photo img{object-fit:cover;object-position:center 18%;scale:1.02}
  .founder-sign{order:-1;flex-direction:column;align-items:center;gap:0;margin:30px 0 0}
  .founder-sign .fdiv{display:none}
  .founder-sign .fname{position:relative;font-size:21px;font-weight:500;font-style:normal;letter-spacing:-.01em;padding-bottom:10px}
  .founder-sign .fname::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:78px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(196,80,30,0),var(--ember) 32%,var(--flame) 68%,rgba(255,107,43,0))}
  .founder-sign .frole{margin-top:13px;font-size:13px;font-weight:400;font-style:normal;letter-spacing:0;text-transform:none;color:#8A7D70;line-height:1.6}
  .founder-quote{font-size:17.5px;font-weight:400;font-style:normal;line-height:1.6;letter-spacing:0;margin:30px 0 26px;max-width:none;text-wrap:pretty}
  .founder .fbody{font-size:14.5px;font-weight:400;line-height:1.8;max-width:none;margin-bottom:18px;color:#6B6259}
  .why-card{padding:24px 22px}
  /* why choose us: centred heading block */
  #whyus .wrap{text-align:center}
  #whyus .sec-head,#whyus .sec-lead{margin-left:auto;margin-right:auto}
  #whyus .why-grid{text-align:left}
  /* automate: how-it-works heading block centred */
  .proc-eyebrow,.proc-head,.proc-lead{text-align:center}
  .proc-eyebrow{display:flex!important;justify-content:center}
  .proc-head,.proc-lead{margin-left:auto;margin-right:auto}
  /* tighten the gap between portfolio and how-it-works */
  .pg-automate #portfolio{padding-bottom:clamp(14px,3vw,20px)}
  .pg-automate #process{padding-top:clamp(6px,1.5vw,10px)}

  /* whatsapp community band */
  .cb-inner{padding:clamp(50px,13vw,74px) 22px}
  .cb-icon{width:58px;height:58px}
  .cb-icon i{font-size:29px}
  .pg-education .cb-perks span:nth-child(2){display:none}
  .cb-perks{grid-template-columns:1fr!important;gap:10px}
  .cb-long{display:none}
  .cb-short{display:block}
  .community-band .cb-short{font-size:15px;line-height:1.7;max-width:32ch;margin:0 auto 26px}
  .btn-wa{width:auto;justify-content:center;padding:14px 26px;font-size:15px}
}

/* ---------- AUTOMATE ---------- */
@media (max-width:860px){
  .pg-automate .hs-copy{max-width:100%!important}
  .pg-automate .page-hero .hero-canvas{opacity:.4}
  .ha-flow{gap:8px}
  .ha-flow .step{padding:9px 13px;font-size:12px}

  .pg-courses .page-hero .hs-eyebrow{display:none}
  .pg-courses .page-hero h1{margin-bottom:22px}
  .pg-courses .lead-long{display:none}
  .pg-courses .lead-short{display:block;max-width:30ch;margin:0 auto 34px}
  .pg-courses .hc-cta{display:flex!important;flex-wrap:nowrap!important;gap:12px;justify-content:center;margin-bottom:12px}
  .pg-courses .hc-cta a{flex:0 1 auto;width:auto!important;white-space:nowrap;padding:13px 17px;font-size:13.5px}
  .pg-courses .hc-cta a i{font-size:15px}
  .pg-courses .hc-modules{display:none}

  /* why learn from us: centred single column, resequenced */
  .pg-courses .proof-inner{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:0}
  .pg-courses .proof-copy{display:contents}
  /* course cards: badge + CTA side by side */
  .pg-courses .course-foot{align-items:center;text-align:center}
  .pg-courses .course-foot h3{text-align:center}
  .pg-courses .course-cta-row{display:flex;flex-direction:row!important;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;margin-top:auto}
  .pg-courses .course-foot .cbadge{align-self:center;margin:0;white-space:nowrap;font-size:9.5px;padding:6px 11px}
  .pg-courses .course-card .clink{align-self:center;margin:0;white-space:nowrap;padding:11px 18px;font-size:13.5px}

  .pg-courses #courses>.wrap{text-align:center}
  .pg-courses #courses>.wrap>.sec-head,.pg-courses #courses>.wrap>.sec-lead{margin-left:auto;margin-right:auto}
  .pg-courses .proof-inner .sec-eyebrow{order:0;margin-bottom:18px}
  .pg-courses .proof-media{order:1;width:100%;margin:0 0 22px}
  .pg-courses .proof-stats{order:2;display:flex!important;justify-content:center;gap:26px;margin:0 0 20px;text-align:center;width:100%}
  .pg-courses .proof-stat{text-align:center}
  .pg-courses .proof-stat .n{font-size:23px;margin-bottom:4px}
  .pg-courses .proof-stat .l{font-size:12.5px;line-height:1.45;max-width:18ch;margin:0 auto}
  .pg-courses .proof-inner .sec-head{order:3;margin:0 auto 12px;max-width:22ch}
  .pg-courses .proof-inner .sec-lead{order:4;margin:0 auto;max-width:42ch;line-height:1.66}

  /* service modal: centred header on mobile */
  .svc-dialog-head{text-align:center;padding:28px 22px 22px}
  .svc-dialog-icon{margin-left:auto;margin-right:auto}
  .svc-dialog-body{padding:22px 22px 26px}
  .svc-feats li{text-align:left}

  /* constellation → artistic node list on mobile */
  .constel-grid{display:flex!important;flex-direction:column;gap:12px!important;margin-top:34px!important}
  .cg-hub{order:-1;position:relative;overflow:hidden;padding:26px 22px!important;border-radius:20px!important;
    background:radial-gradient(120% 90% at 50% -10%,rgba(255,107,43,.16),rgba(20,13,10,0) 62%),linear-gradient(160deg,var(--ink-3),var(--ink-2))!important;
    border:1px solid rgba(255,138,82,.34)!important;margin-bottom:6px!important}
  .cg-hub::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:56%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,138,82,.7),transparent)}
  .cg-hub .ht{font-size:19px}
  .cg-hub .hs{font-size:11px;letter-spacing:.12em}

  .cg-item{position:relative;overflow:hidden;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto 34px 16px;align-items:center;align-content:center;
    column-gap:14px;row-gap:3px;padding:15px 44px 15px 16px!important;border-radius:14px;text-align:left;
    background:var(--ink-2);border:1px solid var(--line);transition:transform .35s,border-color .35s}
  /* corner arrow, hidden until hover/tap */
  .cg-item::after{content:"\ea61";font-family:'tabler-icons';position:absolute;right:14px;top:50%;
    width:26px;height:26px;margin-top:-13px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:14px;color:var(--flame);background:rgba(255,107,43,.12);border:1px solid rgba(255,138,82,.3);
    opacity:0;transform:translateX(-4px);transition:opacity .35s,transform .35s}
  .cg-item:hover::after,.cg-item:active::after,.cg-item:focus-visible::after{opacity:1;transform:translateX(0);animation:cgBreathe 2.6s ease-in-out infinite}
  @keyframes cgBreathe{0%,100%{box-shadow:0 0 0 0 rgba(255,107,43,0)}50%{box-shadow:0 0 12px 2px rgba(255,107,43,.28)}}
  @media (prefers-reduced-motion:reduce){.cg-item:hover::after{animation:none}}
  .cg-item::before{content:none}
  .cg-item:nth-child(odd),.cg-item:nth-child(even){margin-left:0;margin-right:0}
  /* order: AI content before chatbots */
  .cg-item[data-svc="websites"]{order:1}
  .cg-item[data-svc="whatsapp"]{order:2}
  .cg-item[data-svc="content"]{order:3}
  .cg-item[data-svc="chatbots"]{order:4}
  .cg-item[data-svc="custom"]{order:5}
  .cg-item .cnode-badge{grid-row:1/span 3;width:42px!important;height:42px!important;border-radius:12px!important;flex-shrink:0}
  .cg-item .cnode-badge i{font-size:19px!important}
  .cg-item .cnode-label{position:static!important;display:block;transform:none!important;white-space:normal!important;
    font-size:14px!important;font-weight:600;color:var(--paper);opacity:1!important;line-height:1.3;text-align:left;align-self:end}
  .cg-sub{display:block;font-size:12px;line-height:1.5;color:var(--stone);text-align:left;align-self:start;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cg-num{display:none}
  .cg-item .cnode-soon{position:static!important;transform:none!important;grid-column:2;grid-row:3;justify-self:start;align-self:center;
    margin-top:0;font-size:8.5px!important;padding:2px 7px!important;letter-spacing:.07em}
  .cg-item:active{transform:scale(.985);border-color:rgba(255,138,82,.4)}

  /* automate hero: homepage layout structure — visual on top, copy below */
  .pg-automate .page-hero{display:flex;flex-direction:column;padding-bottom:clamp(50px,12vw,72px);overflow:hidden}
  .pg-automate .page-hero .hero-canvas{display:block;position:relative;inset:auto;order:1;width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;height:auto;aspect-ratio:16/11;margin-bottom:26px;z-index:1;opacity:1!important;
    -webkit-mask-image:none!important;mask-image:none!important}
  .pg-automate .page-hero-inner{order:2;position:relative;z-index:2;text-align:center}
  /* breadcrumb to the hero's upper-left, above the animation */
  .pg-automate .page-hero .breadcrumb.bc-mob{display:flex;order:0;position:relative;z-index:2;justify-content:center!important;margin:0 0 6px;font-size:11.5px;opacity:.85}
  .pg-automate .page-hero{padding-top:clamp(88px,22vw,110px)}
  /* subtle floating background elements */
  .pg-automate .page-hero .hero-float{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .pg-automate .page-hero .hero-float span{position:absolute;border-radius:6px;border:1px solid rgba(196,80,30,.16);animation:heroDrift linear infinite}
  .pg-automate .page-hero .hero-float .f1{width:16px;height:16px;left:7%;top:26%;animation-duration:26s}
  .pg-automate .page-hero .hero-float .f2{width:9px;height:9px;right:9%;top:18%;border-radius:50%;background:rgba(196,80,30,.1);border-color:transparent;animation-duration:34s;animation-delay:-9s}
  .pg-automate .page-hero .hero-float .f3{width:22px;height:22px;left:16%;bottom:22%;animation-duration:40s;animation-delay:-16s}
  .pg-automate .page-hero .hero-float .f4{width:7px;height:7px;right:20%;bottom:30%;border-radius:50%;background:rgba(255,107,43,.12);border-color:transparent;animation-duration:30s;animation-delay:-22s}
  .pg-automate .page-hero .hero-float .f5{width:13px;height:13px;right:5%;bottom:12%;animation-duration:36s;animation-delay:-5s}
  @keyframes heroDrift{0%{transform:translate(0,0) rotate(0)}33%{transform:translate(7px,-11px) rotate(6deg)}66%{transform:translate(-6px,8px) rotate(-5deg)}100%{transform:translate(0,0) rotate(0)}}
  @media (prefers-reduced-motion:reduce){.pg-automate .page-hero .hero-float span{animation:none}}
  .pg-automate .page-hero-inner .breadcrumb{display:none}
  /* no eyebrow pill */
  .pg-automate .page-hero .hs-eyebrow{display:none}
  /* headline: exactly 3 lines at a comfortable size */
  .pg-automate .page-hero h1{font-size:clamp(25px,7vw,33px)!important;line-height:1.2;max-width:19ch!important}
  .pg-automate .page-hero h1 .grad{white-space:normal!important}
  /* CTAs side by side */
  .pg-automate .page-hero .hs-copy>div:last-child{display:flex!important;flex-wrap:nowrap!important;gap:10px;justify-content:center}
  .pg-automate .page-hero .hs-copy>div:last-child a{flex:0 1 auto;white-space:nowrap;padding:13px 18px;font-size:14px}
  .pg-automate .page-hero .breadcrumb{justify-content:center}
  .pg-automate .page-hero .hs-copy{max-width:100%}
  .pg-automate .page-hero h1,.pg-automate .page-hero .lead{margin-left:auto;margin-right:auto}
  .pg-automate .page-hero .hs-copy>div:last-child{justify-content:center}

  /* process timeline: smaller, airier */
  .proc{margin-top:36px;padding-left:8px;padding-right:12px}
  .proc-line{left:27px;top:16px;bottom:16px}
  .proc-step{gap:18px;padding:16px 0}
  .proc-num{width:40px;height:40px;font-size:13px;border-width:1.5px}
  .proc-body{padding-top:3px}
  .proc-body h4{font-size:16.5px;margin-bottom:7px}
  .proc-body p{font-size:14px;line-height:1.68;max-width:none}

  /* audience: two opposite-scrolling marquee rows, 3 cards in view */
  .aud-eyebrow,.aud-head,.aud-lead{text-align:center}
  .aud-eyebrow{display:flex!important;justify-content:center}
  .aud-head,.aud-lead{margin-left:auto;margin-right:auto}
  .aud-grid{display:none!important}
  .aud-mob{display:flex;flex-direction:column;gap:14px;margin:38px -18px 0}
  .audm-row{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .audm-track{display:flex;gap:14px;width:max-content;padding:0 14px 0 0}
  .audm-row.r1 .audm-track{animation:audmLeft 34s linear infinite}
  .audm-row.r2 .audm-track{animation:audmRight 34s linear infinite}
  @keyframes audmLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes audmRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .audm{flex:0 0 auto;width:calc((100vw - 72px)/3);min-height:120px;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
    padding:18px 16px;border-radius:14px;border:1px solid var(--line-dark);background:var(--paper)}
  .audm i{font-size:23px;color:var(--ember);margin-bottom:9px}
  .audm .l1{font-size:13px;font-weight:600;color:var(--ink);line-height:1.32}
  .audm .l2{font-size:12.5px;color:#8A7D70;line-height:1.32}
  @media (prefers-reduced-motion:reduce){.audm-row .audm-track{animation:none}}

  .pf-grid{grid-template-columns:1fr!important;gap:20px}
  .pf-card{padding:20px}
  .pf-gallery{grid-template-columns:1fr}
  .pf-gallery .pf-shot.wide{aspect-ratio:16/10}
  .pf-dialog,.svc-dialog{padding:24px 20px;max-height:88vh}

  .sec-divider{height:64px;margin:-18px 0 -16px}
}
@media (max-width:480px){
}

/* ---------- COURSES ---------- */
@media (max-width:860px){
  .course-grid{grid-template-columns:1fr!important;gap:20px}
  .course-cover{aspect-ratio:16/10}
  .course-card h3{font-size:19px}
  .planned{padding:34px 22px;margin-top:44px}
  .planned-list{flex-direction:column;align-items:stretch}
  .planned-chip{justify-content:center}
  .planned-cta{width:100%;justify-content:center}
  .proof-stats{gap:26px;margin-top:26px}
  .proof-stat .n{font-size:30px}

  .cmodal{padding:20px 16px}
  .cmodal-dialog{width:100%;max-height:86vh;border-radius:18px;border:1px solid rgba(255,138,82,.28)}
  .cmodal-cover{border-radius:18px 18px 0 0;aspect-ratio:16/9}
  .cmodal-body{padding:22px 20px 30px}
  .cmodal-body h3{font-size:22px}
  .cmodal-info span{font-size:12.5px;padding:8px 13px}
  .cmodal-cta{flex-direction:column}
  .cmodal-cta .btn-primary,.cmodal-cta .btn-outline{width:100%;justify-content:center}
  .acc-head{padding:14px 15px;font-size:14px}
}

/* ---------- EDUCATE ---------- */
@media (max-width:860px){
  /* hero: same layout logic as home/automate — breadcrumb, visual, centred copy */
  .pg-education .page-hero{padding-top:clamp(88px,22vw,110px);padding-bottom:clamp(50px,12vw,72px)}
  .hero-image .hi-grid{display:flex!important;flex-direction:column;align-items:stretch!important;grid-template-columns:1fr!important;gap:0}
  .pg-education .page-hero .breadcrumb.bc-mob{display:flex;order:0;justify-content:center;margin:0 0 26px;font-size:11.5px;opacity:.85}
  .pg-education .hi-copy .breadcrumb{display:none}
  .pg-education .hi-media{order:1;width:100%;align-self:stretch;height:clamp(300px,74vw,380px);margin-bottom:40px}
  /* give the layered pieces room so they stop colliding */
  .pg-education .hi-badge,.pg-education .hi-namecard{display:none!important}
  /* "Marathi · In your language" badge attached to the large photo card */
  .pg-education .hi-langcard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    position:absolute;right:14px;top:calc(66% - 22px);z-index:6;text-align:left;
    background:linear-gradient(150deg,var(--ember),var(--flame));border:0;border-radius:12px;
    padding:9px 14px;box-shadow:0 8px 22px rgba(196,80,30,.34);transform-origin:top center;
    transition:box-shadow .3s}
  .pg-education .hi-langcard .nm{font-size:14px;font-weight:600;color:#fff;line-height:1.15;letter-spacing:-.01em}
  .pg-education .hi-langcard .rl{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.86);letter-spacing:.02em}
  .pg-education .hi-langcard:hover,.pg-education .hi-langcard:active{box-shadow:0 12px 28px rgba(196,80,30,.46);animation:langSwing 1.1s ease-in-out}
  @keyframes langSwing{0%,100%{transform:rotate(0)}20%{transform:rotate(-2.6deg)}45%{transform:rotate(2deg)}70%{transform:rotate(-1.1deg)}88%{transform:rotate(.5deg)}}
  @media (prefers-reduced-motion:reduce){.pg-education .hi-langcard:hover{animation:none}}
  .pg-education .hi-photo.big{width:74%;height:66%;top:0;right:0}
  .pg-education .hi-photo.small{width:46%;height:66%;bottom:0;left:0}
  /* keep the ambient social marks behind the content */
  body.pg-education .page-hero .hero-canvas{opacity:.28!important;z-index:0!important}
  .pg-education .page-hero-inner{position:relative;z-index:2}
  .pg-education .hi-copy{order:2;text-align:center;position:relative;z-index:2}
  .pg-education .page-hero .hs-eyebrow{display:none}
  .pg-education .page-hero h1{font-size:clamp(26px,7.4vw,34px)!important;line-height:1.24;margin-bottom:20px!important;max-width:none!important}
  .pg-education .page-hero .lead{margin-left:auto;margin-right:auto;max-width:32ch;line-height:1.72}
  /* CTAs side by side */
  .pg-education .hi-copy>div[style*="margin-top"]{margin-top:32px!important;display:flex!important;flex-wrap:nowrap!important;gap:9px;justify-content:center;min-width:0}
  .pg-education .hi-copy>div[style*="margin-top"] a{flex:0 1 auto;min-width:0;white-space:nowrap;padding:12px 14px;font-size:12.5px;gap:7px}
  .pg-education .hi-copy>div[style*="margin-top"] a i{font-size:15px}
  .pg-education #bonus>.wrap{text-align:center}
  .pg-education #bonus .sec-eyebrow{display:flex!important;justify-content:center}
  .pg-education #bonus .sec-head,.pg-education #bonus .sec-lead{margin-left:auto;margin-right:auto}
  .hi-badge{display:inline-flex}
  .inc-grid{grid-template-columns:1fr!important;gap:14px}
  .inc-card{padding:24px 22px}
  .funnel{grid-template-columns:1fr!important;gap:12px}
  .fstep{padding:22px 20px}

  /* youtube carousel */
  .yt-rail{margin-bottom:-40px;padding:18px 0 64px}
  .yt-rail::before,.yt-rail::after{width:5%}
  .yt-track{gap:16px;animation-duration:40s}
  .yt-card{width:clamp(268px,78vw,330px);border-radius:14px}
  .yt-link{font-size:clamp(18px,5vw,22px)}
  .yt-bg{opacity:.4}

  .train-paidwrap{margin-bottom:20px}
  .train-copy h3{font-size:clamp(22px,6.4vw,28px);max-width:none}
  .train-copy p{max-width:none}
  .train-cta{flex-direction:column;align-items:stretch;gap:12px}
  .train-quote,.train-more{width:100%;justify-content:center}
  .train-media{aspect-ratio:16/11}
  .tmodal-dialog{width:100%;max-height:100vh;border-radius:0;padding:24px 20px}
}

/* ---------- CONTACT ---------- */
@media (max-width:860px){
  .hero-contact .hct-grid{grid-template-columns:1fr!important;gap:52px!important}
  .hct-left{gap:34px!important;text-align:center}
  .hct-left .breadcrumb{justify-content:center;opacity:.62;font-size:11.5px}
  /* quieter badge — hairline, no fill */
  .hct-copy .hs-eyebrow{justify-content:center;background:transparent;border:1px solid rgba(34,195,94,.28);color:#5F5750;font-size:9px;font-weight:500;letter-spacing:.1em;padding:7px 13px}
  .hct-copy .hs-eyebrow i{color:var(--acc);font-size:12px}
  .hct-copy h1{letter-spacing:-.03em;line-height:1.08;margin-bottom:20px}
  .hct-copy .lead{font-size:14.5px;line-height:1.78;color:#6B6259;max-width:34ch;margin:0 auto}
  .hct-avail{display:none}
  /* small muted label instead of the orange serif line */
  .hct-reach h3{text-align:center;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#9A8E80;margin-bottom:16px}
  .hct-pills{flex-direction:row;gap:10px;justify-content:center}
  .hct-pill{flex:1;min-width:0;padding:16px 12px;font-size:13.5px;font-weight:500;gap:8px;border-radius:14px}
  .hct-pill i{font-size:17px}
  .hct-pill.pri{background:var(--acc);border-color:var(--acc);box-shadow:none}
  .hct-pill:not(.pri){background:transparent;border-color:rgba(40,20,10,.14);color:#3A322C}
  /* form: restrained surfaces, hairline fields */
  .hct-formhead{font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:22px}
  .form-card{padding:28px 22px;border-radius:18px;background:transparent;border-color:rgba(40,20,10,.1);box-shadow:none}
  .row2{grid-template-columns:1fr!important;gap:0!important}
  .field label{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#8A7D70}
  .field input,.field select,.field textarea,
  .hct-right .form-card input,.hct-right .form-card select,.hct-right .form-card textarea{font-size:16px;background-color:transparent;background-image:none;border:0;border-bottom:1px solid rgba(40,20,10,.14);border-radius:0;padding:12px 14px}
  .field select,.hct-right .form-card select{-webkit-appearance:none;appearance:none;padding-right:38px;
    background-color:transparent;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%238A7D70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:13px}
  .field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--acc);box-shadow:none;outline:none}
  .form-card .btn-primary{width:100%;justify-content:center;border-radius:14px;box-shadow:none;font-weight:500}
}

/* ---------- PORTFOLIO ---------- */
@media (max-width:860px){
  .wp-hero{padding-top:clamp(104px,26vw,132px);padding-bottom:clamp(30px,8vw,44px)}
  .wp-grid{grid-template-columns:1fr!important;gap:26px!important;max-width:none}
  .wp-grid .wp-card:last-child:nth-child(odd){max-width:none;margin:0}
  .wp-card{padding:18px}
  .wp-head{gap:10px;margin-bottom:12px}
  .wp-label h3{font-size:16px}
  .wp-tag,.wp-premium{font-size:10.5px;padding:6px 11px}
  .wp-shot{border-radius:12px;margin-bottom:14px}
  .wp-shot .wp-live{width:500%!important;height:500%!important;transform:scale(.2)!important}
  .wp-wm .w,.wp-wm .c{display:none}
  .wp-wm .w1,.wp-wm .w3{display:block}
  .wp-dialog{width:100%;max-height:100vh;border-radius:0;padding:24px 20px}
  .wp-gallery{grid-template-columns:1fr}
  .wp-gallery .shot.wide{aspect-ratio:16/10}
  .site-exit{top:12px;right:12px;padding:9px 15px;font-size:12.5px}
}

/* ---------- SMALL PHONES ---------- */
@media (max-width:400px){
  .wrap{padding-left:18px;padding-right:18px}
  .brand{font-size:19px}
  h1.hero-title{font-size:clamp(30px,10vw,38px)!important}
  .page-hero h1{font-size:clamp(27px,8.8vw,34px)!important}
  .hi-stat{min-width:100%}
}

/* ---------- TOUCH DEVICES ---------- */
@media (hover:none){
  .rstep:hover .rcard,.why-card:hover,.aud:hover,.pf-card:hover,.wp-card:hover,
  .course-card:hover,.inc-card:hover,.yt-card:hover,.cg-item:hover{transform:none}
  .yt-rail:hover .yt-track,.marquee:hover .mq-track{animation-play-state:running}
}