@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&display=swap');

:root{
  --paper: #FCFCF9;
  --paper-deep: #F3F5F0;
  --ink: #0F1210;
  --ink-soft: #6B6F68;
  --clay: #0E7A5E;
  --clay-deep: #0A5C46;
  --sage: #0E7A5E;
  --sage-deep: #0A5C46;
  --gold: #C48A2E;
  --cream-line: #E6E8DF;
  --white: #FFFFFF;
  --logo-blue: #007CA5;
  --logo-blue-soft: #E6F0F5;
  --logo-blue-ring: rgba(0,124,165,0.14);
  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 32px;
  --max: 1280px;
}


*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden was on body here — on many mobile browsers that
     turns body into the containing block for position:fixed children,
     so the full-screen mobile nav panel got clipped to body's box
     instead of the real viewport (only "Home" was visible before the
     clip). Moved the horizontal-scroll guard to html instead, which
     doesn't have this side effect. */
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.08;
  color:var(--ink);
}
em{font-style:italic; font-weight:500; color:var(--clay); font-family:'Fraunces', serif;}
.mono, .eyebrow, .kicker{font-family:'JetBrains Mono', monospace;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}
section{position:relative;}
button{font-family:inherit; cursor:pointer;}

@media (prefers-reduced-motion: reduce){
  /* Kill all animations/transitions site-wide EXCEPT the purely
     decorative marquee/logo-strip loops (trust-slider-track and the
     services marquee track), which the client wants to keep scrolling
     continuously on every device regardless of the OS/browser
     "reduce motion" preference. This blanket "*" rule was previously
     freezing those too, which is what made the strip appear stuck on
     laptops that report prefers-reduced-motion. */
  *:not(.trust-slider-track):not(.marquee-light .track){
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:4px;
}

::selection{background:var(--clay); color:var(--white);}

/* ================= HEADER — Wolters Kluwer-inspired flat corporate UI ================= */
header{
  position:sticky; top:0; z-index:210;
  background:#FFFFFF;
  border-bottom:1px solid rgba(15,18,16,0.08);
  transition:border-color 0.22s ease;
}
header.scrolled{
  background:#FFFFFF;
  border-bottom-color:rgba(15,18,16,0.08);
  box-shadow:0 1px 0 rgba(15,18,16,0.04), 0 10px 28px -16px rgba(15,18,16,0.12), 0 4px 12px -8px rgba(15,18,16,0.06);
}
header .logo, header .logo-img{filter:none;}
header .logo:hover{opacity:0.90;}
header .logo:hover .logo-img{filter:none;}
header .burger span{background:var(--ink);}
header .burger:hover{background:rgba(15,18,16,0.06);}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
  height:76px;
  max-width:1320px; margin:0 auto; padding:0 32px;
  position:relative;
}
.nav-right{
  display:flex; align-items:center; gap:22px; flex-shrink:0;
}
/* NOTE: the nav's desktop-vs-mobile breakpoint was raised from 1080/1081px
   to 1260/1261px (see all @media queries below and in the rest of this
   file). With 4 nav items ("EdTech Solutions", "Tech Trends", "Digital
   Marketing", "Why Digital Pathway") plus the logo, search icon and CTA
   button all needing to fit in one nowrap row, small-laptop widths
   (~1280–1366px physical screens, or any laptop at 90-100% browser zoom)
   didn't have enough room — text was getting clipped at the right edge
   (e.g. "Digital Marketing" cut to "Digital Ma..."). Squeezing font-size
   further was not reliable across all label lengths, so instead the
   hamburger/mobile menu now takes over earlier, at 1260px, guaranteeing
   nothing overlaps or gets cut on small laptop screens. */
.logo{
  display:flex; align-items:center;
  flex-shrink:0; min-width:0; line-height:1;
  transition:opacity 0.2s ease;
}
.logo .mark{width:30px; height:30px; flex-shrink:0;}
.logo .mark svg{width:100%; height:100%;}
.logo-img{
  height:42px !important; width:auto !important; max-width:none;
  display:block;
  background:transparent !important;
  object-fit:contain;
}
.footer-brand .logo-img{
  height:30px !important; width:auto !important; background:transparent !important; object-fit:contain;
}
/* Navigation — flat text links, no underline animation, WK-style plain hover */
.nav-links{
  display:flex; gap:34px; align-items:center; height:100%;
}
.nav-links li{display:flex; align-items:center; height:100%;}
.nav-links a{
  font-family:'Inter', sans-serif;
  font-size:0.92rem; font-weight:500; color:rgba(15,18,16,0.88);
  position:relative; padding:0;
  transition:color 0.16s ease;
  line-height:1.2; letter-spacing:0;
  display:inline-flex; align-items:center; height:100%; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav-links a.active{color:var(--logo-blue); border-bottom-color:var(--logo-blue);}
.nav-links a::after{display:none;}
header .nav-links a:hover{color:var(--logo-blue);}

.burger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  cursor:pointer; background:none; border:none;
  width:42px; height:42px; padding:0; border-radius:50%;
  transition:background 0.2s ease; flex-shrink:0;
}
.burger:hover{background:rgba(15,18,16,0.06);}
.burger.open:hover{background:rgba(15,18,16,0.06);}
.burger span{width:19px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform 0.3s ease, opacity 0.3s ease;}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.has-mega{position:relative; display:flex; align-items:center; height:100%;}
.mega-trigger{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; border-bottom:2px solid transparent; font-family:'Inter', sans-serif;
  font-size:0.92rem; font-weight:500; color:rgba(15,18,16,0.88);
  padding:0; height:100%; cursor:pointer; position:relative;
  transition:color 0.16s ease, border-color 0.16s ease; line-height:1.2; letter-spacing:0; white-space:nowrap;
}
.mega-trigger::after{display:none;}
.mega-trigger .chev{
  display:inline-block; width:6px; height:6px; flex-shrink:0;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  border-top:none; border-left:none;
  transform:rotate(45deg) translateY(-1px);
  transition:transform 0.18s ease; opacity:0.75;
}
.has-mega:hover .mega-trigger,
.has-mega.mega-open .mega-trigger{color:var(--logo-blue); border-bottom-color:var(--logo-blue);}
.has-mega.mega-open .mega-trigger .chev{transform:rotate(225deg) translateY(1px);}
.has-mega::before{content:''; position:absolute; top:100%; left:0; width:100%; height:10px;}

/* Search — flat plain icon, no pill/circle background, WK-style minimal */
.search-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:4px;
  border:none; background:transparent;
  color:#0F1210; cursor:pointer; flex-shrink:0;
  transition:color 0.16s ease;
}
.search-toggle:hover{ color:var(--logo-blue); background:transparent; }
.search-toggle:active{ opacity:0.7; }
.search-toggle svg{ width:18px; height:18px; display:block; }
.search-toggle[aria-expanded="true"]{ color:var(--logo-blue); }

/* Search panel — compact flat overlay under header */
.search-panel{
  position:absolute; top:100%; left:0; right:0;
  background:#FFFFFF;
  border-top:1px solid rgba(15,18,16,0.10);
  border-bottom:1px solid rgba(15,18,16,0.10);
  box-shadow:none;
  padding:18px 0 20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:none;
  transition:opacity 0.18s ease, visibility 0.18s;
  z-index:205;
}
header.search-open .search-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.search-panel-inner{
  max-width:720px; margin:0 auto; padding:0 32px;
  display:flex; flex-direction:column; gap:12px;
}
.search-form{
  display:flex; align-items:center; gap:12px;
}
.search-field-wrap{
  flex:1; display:flex; align-items:center; gap:10px;
  background:#FFFFFF;
  border:1.5px solid #DDE0D4; border-radius:100px;
  padding:10px 16px 10px 16px;
  transition:border-color 0.20s ease, box-shadow 0.20s ease;
}
.search-field-wrap:focus-within{
  border-color:var(--logo-blue);
  box-shadow:0 0 0 4px var(--logo-blue-ring);
}
.search-field-wrap svg{ width:18px; height:18px; flex-shrink:0; color:#6B6F68; }
.search-field-wrap input{
  flex:1; border:none; outline:none; background:transparent;
  font-family:'Inter', sans-serif; font-size:0.98rem; font-weight:400; color:var(--ink);
  min-width:0;
}
.search-field-wrap input::placeholder{ color:#9AA09A; }
.search-submit{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:none;
  background:var(--logo-blue); color:#fff; cursor:pointer; flex-shrink:0;
  transition:background 0.20s ease, transform 0.15s ease;
}
.search-submit:hover{ background:#006A8F; }
.search-submit:active{ transform:scale(0.96); }
.search-submit svg{ width:18px; height:18px; }
.search-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:1px solid #E6E8DF;
  background:#FFFFFF; color:#6B6F68; cursor:pointer; flex-shrink:0;
  transition:background 0.20s ease, border-color 0.20s ease, color 0.20s ease;
}
.search-close:hover{ background:rgba(15,18,16,0.06); border-color:rgba(15,18,16,0.08); color:var(--ink); }
.search-hint{
  font-size:0.80rem; color:#9AA09A; line-height:1.4; padding-left:2px;
}
.search-results{
  background:#FFFFFF; border:1px solid #E6E8DF; border-radius:14px;
  overflow:hidden; max-height:320px; overflow-y:auto;
  box-shadow:0 10px 28px -16px rgba(15,18,16,0.12);
}
.search-results a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; font-size:0.92rem; color:rgba(15,18,16,0.88);
  border-bottom:1px solid #F3F5F0; transition:background 0.16s ease, color 0.16s ease;
}
.search-results a:last-child{ border-bottom:none; }
.search-results a:hover{ background:var(--logo-blue-soft); color:var(--logo-blue); }
.search-results .res-title{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-results .res-url{ font-size:0.78rem; color:#9AA09A; font-family:'JetBrains Mono', monospace; white-space:nowrap; }
.search-no-results{ padding:14px; font-size:0.90rem; color:#6B6F68; text-align:center; }

/* nav-cta retained for compatibility if used elsewhere */
.nav-cta{
  background:var(--ink); color:#fff !important;
  padding:10px 18px; border-radius:100px;
  font-weight:600; font-size:0.88rem;
  white-space:nowrap; flex-shrink:0;
  margin-left:4px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background 0.22s, transform 0.22s, box-shadow 0.22s;
  border:1px solid transparent; text-decoration:none;
}
.nav-cta:hover{background:var(--logo-blue); color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(0,124,165,0.45);}
.nav-cta::after{display:none;}

/* ===== Generic mega-panel (small dropdowns) — QBS compact ===== */
.mega-panel{
  position:absolute; top:100%; left:0;
  transform:none;
  width:300px;
  background:var(--white);
  border:1px solid rgba(15,18,16,0.10);
  border-top:3px solid var(--logo-blue);
  border-radius:0;
  box-shadow:0 12px 24px -12px rgba(14,27,38,0.14);
  padding:8px 0;
  display:block; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.16s ease, visibility 0.16s;
  z-index:220; max-height:min(68vh, 520px); overflow-y:auto; overflow-x:hidden;
}
.has-mega:hover .mega-panel,
.has-mega.mega-open .mega-panel{opacity:1; visibility:visible; pointer-events:auto; transform:none;}
.mega-col ul{display:flex; flex-direction:column; gap:0;}
.mega-col a{
  display:block; font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:400; color:rgba(15,18,16,0.88);
  padding:9px 20px; margin:0; border-radius:0;
  border-left:2px solid transparent;
  transition:background 0.14s, color 0.14s, border-left-color 0.14s; line-height:1.4;
}
.mega-col a:hover{background:#F5F7F9; color:var(--logo-blue); border-left-color:var(--logo-blue); text-decoration:none;}
.has-submenu{position:relative; display:flex; flex-direction:column;}
.mega-link-parent{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:600; color:rgba(15,18,16,0.88);
  padding:9px 20px; margin:0; border-radius:0; width:100%; text-align:left;
  border-left:2px solid transparent;
  background:none; border-top:none; border-right:none; border-bottom:none; cursor:pointer;
  transition:background 0.14s, color 0.14s, border-left-color 0.14s;
  position:relative;
}
.mega-link-parent:hover{background:#F5F7F9; color:var(--logo-blue); border-left-color:var(--logo-blue);}
.mega-link-parent[aria-expanded="true"]{background:#F5F7F9; color:var(--logo-blue); border-left-color:var(--logo-blue);}
.sub-chev{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto; flex-shrink:0;
  border:none; transform:none; opacity:0.75;
  font-size:0.95rem; line-height:1; color:currentColor;
  transition:transform 0.18s ease, opacity 0.18s;
}
.sub-chev::before{content:'›'; display:block; font-weight:500; transform:translateX(0); transition:transform 0.18s ease;}
.has-submenu:hover .sub-chev::before,
.has-submenu.is-open .sub-chev::before{transform:translateX(2px);}
.has-submenu > .mega-link-parent .sub-chev::before{content:'›';}

/* QBS-style inline nested submenu — sub-topics appear INSIDE their parent
   category as an indented, contained list, not as a detached flyout box.
   Compact, aligned, with left accent + soft background when open. */
.submenu-panel{
  position:static;
  width:auto;
  background:#F5F7F9;
  border:none;
  border-left:2px solid transparent;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  max-height:0; overflow:hidden;
  transition:max-height 0.24s ease, padding 0.2s ease, border-color 0.2s ease;
  z-index:auto;
}
.has-submenu:hover .submenu-panel,
.has-submenu.submenu-open .submenu-panel,
.has-submenu.is-open .submenu-panel{
  max-height:900px;
  padding:4px 0;
  margin:0;
  border-left-color:var(--logo-blue);
  background:#F5F7F9;
}
/* Keep parent highlighted while its submenu is open */
.has-submenu:hover > .mega-link-parent,
.has-submenu.is-open > .mega-link-parent,
.has-submenu.submenu-open > .mega-link-parent{
  background:#F5F7F9; color:var(--logo-blue); border-left-color:var(--logo-blue);
}
.submenu-panel ul{display:flex; flex-direction:column; gap:0;}
.submenu-panel a{
  display:flex; align-items:center; gap:0;
  font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:400; color:rgba(15,18,16,0.88);
  padding:7px 20px 7px 32px; border-radius:0; transition:background 0.14s, color 0.14s; line-height:1.35;
}
.submenu-panel a::before{display:none;}
.submenu-panel a:hover{background:#EDF1F4; color:var(--logo-blue); box-shadow:none; text-decoration:none;}
.mega-panel-dropdown .mega-col{width:100%;}

/* Two-column grid INSIDE the nested panel (e.g. Hire Developers, Web Dev) — stays
   compact because it lives inside the same 290-320px dropdown width, not as a
   separate widened flyout. Keeps alignment clean and prevents overlapping. */
.submenu-panel.submenu-2col{
  width:auto;
  display:flex; flex-direction:column; gap:0;
  padding:0;
}
.submenu-panel.submenu-2col ul{flex:none; min-width:0; display:flex; flex-direction:column; gap:0;}
/* Same overflow fix as the EdTech grid panes: without min-width:0 + wrap,
   longer labels ("Custom Software Developers") push past their column and
   visually collide with the item beside them. */
.submenu-panel.submenu-2col li{min-width:0;}
.submenu-panel.submenu-2col a{white-space:normal; word-break:break-word;}
/* Vertical-first: stack all sub-topics in one column. Only go 2-column
   once there are enough short items (8+) to justify splitting the list,
   applied via an explicit modifier so short/medium lists stay vertical. */
.submenu-panel.submenu-2col.submenu-2col-wide{
  display:grid; grid-template-columns:1fr 1fr; gap:4px 8px;
}
.submenu-panel.submenu-2col.submenu-2col-wide ul{flex:none;}
.has-submenu:hover .submenu-panel.submenu-2col,
.has-submenu.is-open .submenu-panel.submenu-2col{padding:4px 0;}
@media (max-width:1260px){
  .submenu-panel.submenu-2col{
    width:100%; display:flex; flex-direction:column; gap:0; padding:0;
  }
}

/* Premium dropdown treatment — aligns visual language with EdTech */
.mega-panel.mega-premium{
  box-shadow:0 12px 24px -12px rgba(14,27,38,0.14);
  padding:8px 0;
}
.mega-premium .mega-col-title{
  font-family:'Inter', sans-serif; font-weight:700; font-size:0.92rem;
  letter-spacing:0; text-transform:none; color:rgba(15,18,16,0.88);
  padding:10px 20px 8px; margin-bottom:0; border-bottom:1px solid rgba(15,18,16,0.08);
}
.mega-premium .mega-col a,
.mega-premium .submenu-panel a{
  display:flex; align-items:center; gap:0;
  padding:8px 20px; margin:0; border-radius:0; border-left:2px solid transparent;
  font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:400; color:rgba(15,18,16,0.88); line-height:1.4;
}
.mega-premium .mega-col a::before,
.mega-premium .submenu-panel a::before{display:none;}
.mega-premium .mega-col a:hover,
.mega-premium .submenu-panel a:hover{border-left-color:var(--logo-blue); background:#F5F7F9; color:var(--logo-blue); text-decoration:none;}
.mega-premium .mega-col ul{gap:0;}
.mega-premium .mega-link-parent{
  padding:8px 20px; margin:0; border-radius:0; font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:600; color:rgba(15,18,16,0.88); border-left:2px solid transparent;
}
.mega-premium .submenu-panel{padding:0; background:#F5F7F9;}
.mega-premium .submenu-panel a{padding-left:32px;}
.mega-premium .submenu-panel ul{gap:0;}
.mega-premium .has-submenu:hover .submenu-panel,
.mega-premium .has-submenu.is-open .submenu-panel{padding:4px 0;}
/* Compact widths — professional, not huge */
.mega-panel.mega-premium.mega-compact{width:420px;}
.mega-premium.mega-compact .submenu-panel.submenu-2col{width:auto;}

/* ===== EDTECH SOLUTIONS — full-width mega menu (desktop/tablet landscape) ===== */
.has-mega[data-mega="edtech"]{position:relative;}
.has-mega[data-mega="techtrends"]{position:relative;}
.mega-panel-edtech{
  position:absolute; top:100%; left:0;
  transform:none;
  width:min(920px, calc(100vw - 32px));
  background:var(--white);
  border:1px solid rgba(15,18,16,0.10); border-top:3px solid var(--logo-blue);
  border-radius:0;
  box-shadow:0 16px 32px -14px rgba(14,27,38,0.16);
  padding:0; display:block; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.16s ease, visibility 0.16s;
  z-index:225; overflow:hidden; max-height:min(72vh, 560px);
}
/* Tech Trends sits further right in the nav than EdTech Solutions, so a
   left:0-anchored 760px panel would overflow past the right edge of the
   viewport. Anchor it from the trigger's right edge instead so the panel
   grows leftward and always stays on-screen. */
.has-mega[data-mega="techtrends"] .mega-panel-edtech,
.has-mega[data-mega="edtech"] .mega-panel-edtech{left:50%; right:auto; transform:translate(-50%,-6px);}
/* QBS-style: compact anchored dropdown — NOT full-viewport.
   Stays positioned under its own trigger, fixed compact width, so there is
   no huge empty panel. Max-width keeps it safely inside the viewport on
   smaller desktops. */
@media (min-width:1261px){
  .mega-panel-edtech{
    position:absolute;
    top:100%;
    left:0;
    right:auto;
    width:920px;
    max-width:calc(100vw - 32px);
    transform:none;
    border-radius:0;
    box-shadow:0 16px 32px -14px rgba(14,27,38,0.16);
    border:1px solid rgba(15,18,16,0.10);
    border-top:3px solid var(--logo-blue);
  }
  .has-mega[data-mega="techtrends"] .mega-panel-edtech,
  .has-mega[data-mega="edtech"] .mega-panel-edtech{left:50%; right:auto; transform:translateX(-50%);}
}
.has-mega[data-mega="edtech"]:hover .mega-panel-edtech,
.has-mega[data-mega="edtech"].mega-open .mega-panel-edtech,
.has-mega[data-mega="techtrends"]:hover .mega-panel-edtech,
.has-mega[data-mega="techtrends"].mega-open .mega-panel-edtech{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%);}
.edtech-mega{display:flex; min-height:200px; max-height:min(68vh, 520px); transition:min-height 0.18s ease; overflow:hidden; border-radius:0;}
.edtech-left{
  width:270px; flex-shrink:0; background:#F7F8F9; border-right:1px solid rgba(15,18,16,0.08);
  padding:16px 0; display:flex; flex-direction:column; gap:0; overflow-y:auto;
}
.edtech-cat{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:transparent; border:none; border-left:3px solid transparent; border-radius:0;
  padding:13px 24px; text-align:left; cursor:pointer;
  font-family:'Inter', sans-serif; font-weight:500; font-size:0.92rem; color:rgba(15,18,16,0.88);
  transition:background 0.14s, color 0.14s, border-color 0.14s; line-height:1.35;
  position:relative;
}
.edtech-cat:hover{background:#ECEEF0; color:var(--logo-blue);}
.edtech-cat.is-active{background:#ECEEF0; color:var(--logo-blue); box-shadow:none; border:none; border-left:3px solid var(--logo-blue); font-weight:700;}
.edtech-cat .cat-chev{
  width:6px; height:6px; flex-shrink:0; opacity:0.75;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg); transition:opacity 0.16s;
  color:currentColor;
}
.edtech-cat.is-active .cat-chev{opacity:1;}
.edtech-cat:focus-visible{outline:2px solid var(--logo-blue); outline-offset:1px;}
.edtech-right{flex:1; padding:16px 0; overflow-y:auto; background:var(--white);}
@media (min-width:1261px){
  .edtech-right{padding:16px 0;}
}
.edtech-pane{display:none;}
.edtech-pane.is-active{display:block;}
.edtech-pane-title{display:none;}
/* WK-style: plain, airy vertical list — no boxes, no pills, no accent bars */
.edtech-pane ul{display:flex; flex-direction:column; gap:2px;}
.edtech-pane.pane-grid ul{
  display:flex; flex-direction:column; gap:2px;
}
.edtech-pane.pane-grid ul > li{
  min-width:0;
}
.edtech-pane.pane-grid a{
  white-space:normal;
  word-break:break-word;
}
.edtech-pane.pane-grid ul li.has-submenu{
  grid-column:1 / -1;
}
.edtech-pane.pane-grid.pane-grid-2col ul{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2px 32px; align-content:start;
}
.edtech-pane a{
  display:flex; align-items:center; gap:0;
  font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:400; color:rgba(15,18,16,0.88);
  padding:9px 32px; margin:0; border-radius:0; border-left:none;
  transition:color 0.14s; line-height:1.4;
}
.edtech-pane a:hover{background:transparent; color:var(--logo-blue); text-decoration:none;}
.edtech-pane a::before{display:none;}
/* The list item that contains a sub-submenu becomes a flex-column wrapper so
   its nested list stacks directly underneath inside the same category — not as
   a detached absolute flyout. */
.edtech-pane .has-submenu{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:100%;
}
.edtech-sub-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:transparent; border:none; border-left:none; border-radius:0;
  padding:9px 32px; margin:0; text-align:left;
  font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:600; color:rgba(15,18,16,0.88); cursor:pointer;
  transition:color 0.14s;
}
.edtech-sub-btn:hover{background:transparent; color:var(--logo-blue);}
.edtech-sub-btn[aria-expanded="true"]{background:transparent; color:var(--logo-blue);}
.edtech-sub-btn .sub-chev{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto; flex-shrink:0;
  border:none; transform:none; opacity:0.75;
  font-size:0.95rem; line-height:1; color:currentColor;
  transition:transform 0.18s ease;
}
.edtech-sub-btn .sub-chev::before{content:'›'; display:block; font-weight:500;}
.edtech-pane .has-submenu:hover .edtech-sub-btn .sub-chev::before,
.edtech-pane .has-submenu.is-open .edtech-sub-btn .sub-chev::before{transform:translateX(2px);}

/* Sub-sub-topics — WK-style: a plain indented link list under its parent
   heading, same flat typography as top-level links, no boxes/pills/bars. */
.edtech-submenu-flyout{
  position:static;
  background:transparent;
  border:none;
  border-left:none;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  max-height:0; overflow:hidden;
  transition:max-height 0.24s ease, padding-top 0.2s ease, padding-bottom 0.2s ease;
}
.edtech-pane .has-submenu:hover .edtech-submenu-flyout,
.edtech-pane .has-submenu.is-open .edtech-submenu-flyout,
.edtech-pane .has-submenu:focus-within .edtech-submenu-flyout{
  max-height:600px;
  padding-top:2px;
  padding-bottom:8px;
  opacity:1; visibility:visible; pointer-events:auto;
}
.edtech-pane .has-submenu:hover > .edtech-sub-btn,
.edtech-pane .has-submenu.is-open > .edtech-sub-btn,
.edtech-pane .has-submenu:focus-within > .edtech-sub-btn{
  background:transparent; color:var(--logo-blue);
}
.edtech-submenu-flyout ul{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 20px;}
.edtech-submenu-flyout a{
  font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:400; padding:6px 8px 6px 44px; margin:0; color:rgba(15,18,16,0.88); line-height:1.4;
  display:flex; align-items:center; gap:0;
  border-left:none; border-radius:0; white-space:normal;
  background:transparent; border:none;
}
@media (min-width:1261px){ .edtech-submenu-flyout a{padding-right:16px;} }
.edtech-submenu-flyout a::before{display:none;}
.edtech-submenu-flyout a:hover{background:transparent; color:var(--logo-blue); text-decoration:none;}

/* ===== QBS compact dropdown — inline nested, no side flyouts =====
   Sub-sub lists stay INSIDE their parent category (indented, contained),
   so no overflow-clipping or viewport-flipping is needed. Panels stay
   compact: internal scroll handles tall content without huge empty panel. */
@media (min-width:1261px){
  .mega-panel{ max-height:min(68vh, 520px); overflow-y:auto; overflow-x:hidden; }
  .mega-panel-edtech{ max-height:min(68vh, 520px); overflow-y:auto; overflow-x:hidden; overflow:hidden; }
  .edtech-mega{ max-height:none; overflow:visible; }
  .edtech-left, .edtech-right{ max-height:none; overflow:visible; }
}

/* Submenu arrow — clean chevron, shifts slightly on open/hover for feedback */
.has-submenu > .mega-link-parent .sub-chev,
.has-submenu > .edtech-sub-btn .sub-chev{
  width:auto; height:auto; border:none; transform:none; opacity:1;
  font-size:0.95rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:currentColor;
}
.has-submenu > .mega-link-parent .sub-chev::before,
.has-submenu > .edtech-sub-btn .sub-chev::before{
  content:'›'; display:block; font-weight:500; letter-spacing:0; transition:transform 0.18s ease;
}
.has-submenu:hover > .mega-link-parent .sub-chev::before,
.has-submenu.is-open > .mega-link-parent .sub-chev::before,
.has-submenu:focus-within > .mega-link-parent .sub-chev::before,
.has-submenu:hover > .edtech-sub-btn .sub-chev::before,
.has-submenu.is-open > .edtech-sub-btn .sub-chev::before,
.has-submenu:focus-within > .edtech-sub-btn .sub-chev::before{
  transform:translateX(2px);
}

/* Keyboard accessibility — inline nested panels expand on focus-within */
@media (min-width:1261px){
  .has-submenu:focus-within .submenu-panel,
  .edtech-pane .has-submenu:focus-within .edtech-submenu-flyout{
    max-height:900px; padding:6px 0 6px 10px; border-left-color:var(--logo-blue-ring);
  }
  .has-submenu:focus-within > .mega-link-parent,
  .has-submenu:focus-within > .edtech-sub-btn{
    background:var(--logo-blue-soft); color:var(--logo-blue);
  }
}

@media (min-width:1261px){
  .mega-panel, .mega-panel-edtech{
    transition:opacity 0.20s ease, transform 0.20s ease, visibility 0.20s;
  }
  .has-submenu:hover > .mega-link-parent,
  .has-submenu.is-open > .mega-link-parent,
  .has-submenu:focus-within > .mega-link-parent,
  .has-submenu.submenu-open > .mega-link-parent,
  .has-submenu:hover > .edtech-sub-btn,
  .has-submenu.is-open > .edtech-sub-btn,
  .has-submenu:focus-within > .edtech-sub-btn{
    background:var(--logo-blue-soft); color:var(--logo-blue);
  }
  .submenu-panel, .edtech-submenu-flyout{
    transition:max-height 0.30s cubic-bezier(.2,.7,.3,1), padding 0.28s ease, margin 0.28s ease, border-color 0.28s ease;
  }
}

/* ================= BUTTONS ================= */
.btn-primary{
  background:var(--ink); color:var(--paper);
  padding:16px 32px; border-radius:100px; font-weight:600; font-size:0.95rem;
  display:inline-flex; align-items:center; gap:10px;
  transition:background 0.3s cubic-bezier(.2,.7,.3,1), transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease;
  border:1px solid var(--ink);
}
.btn-primary:hover{background:var(--logo-blue); border-color:var(--logo-blue); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(0,124,165,0.45);}
.btn-primary:active{transform:translateY(0); box-shadow:none;}
.btn-secondary{
  border:1.5px solid var(--ink); color:var(--ink);
  padding:14.5px 30px; border-radius:100px; font-weight:600; font-size:0.95rem;
  transition:border-color 0.25s, background 0.25s, transform 0.25s cubic-bezier(.2,.7,.3,1);
  display:inline-flex; align-items:center; gap:10px;
}
.btn-secondary:hover{background:var(--logo-blue); color:var(--paper); border-color:var(--logo-blue);}
.btn-secondary:active{transform:scale(0.98);}
.btn-ghost{
  color:var(--clay-deep); font-weight:600; font-size:0.93rem;
  display:inline-flex; align-items:center; gap:8px;
  border-bottom:1.5px solid transparent;
  padding-bottom:2px;
  transition:border-color 180ms ease, color 180ms ease;
}
.btn-ghost:hover{border-color:var(--logo-blue); color:var(--logo-blue);}
.btn-ghost svg{transition:transform 0.25s;}
.btn-ghost:hover svg{transform:translateX(4px);}

/* ================= SECTION HEAD ================= */
.eyebrow,
.eyebrow-sec{
  display:none !important;
}
.eyebrow::before,
.eyebrow-sec::before{
  display:none !important;
}
.section-head{max-width:620px; margin-bottom:60px;}
.section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom:18px; letter-spacing:-0.015em;}
.section-head p{color:var(--ink-soft); font-size:1.08rem; line-height:1.6;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ================= HERO (shared pattern, page-specific mods) ================= */
.page-hero{
  padding:90px 0 70px;
  position:relative;
  border-bottom:1px solid var(--cream-line);
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero-tag{
  font-size:0.85rem; font-weight:600; color:var(--clay-deep);
  letter-spacing:0.04em; margin-bottom:20px; display:block;
}
.page-hero h1{
  font-size:clamp(2rem, 7.5vw, 3.6rem);
  line-height:1.08;
  margin-bottom:24px; max-width:760px;
}
.page-hero p.lead{
  font-size:1.15rem; color:var(--ink-soft); max-width:520px;
}

/* ================= SERVICE & PAGE HERO VISUALS ================= */
.svc-hero-visual, .about-visual, .approach-visual{
  width:100%;
  height:auto;
  aspect-ratio:1200 / 560;
  max-height:560px;
  border-radius:var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  margin-top:40px;
  background:linear-gradient(135deg, var(--svc-accent, #007CA5) 0%, var(--svc-accent-deep, #005A78) 100%);
  position:relative;
  overflow:hidden;
}
.svc-hero-visual img, .about-visual img, .approach-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.svc-hero-visual:hover img, .about-visual:hover img, .approach-visual:hover img{
  transform:scale(1.03);
}
.svc-hero-visual svg, .about-visual svg, .approach-visual svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

/* ================= FOOTER ================= */
footer{background:var(--ink); color:rgba(243,247,250,0.7); padding-top:80px;}
.footer-cta{
  text-align:center; padding-bottom:70px; border-bottom:1px solid rgba(243,247,250,0.12);
  margin-bottom:60px;
}
.footer-cta h2{color:var(--paper); font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:24px; max-width:700px; margin-left:auto; margin-right:auto;}
.footer-cta .btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.footer-cta .btn-primary{background:var(--clay); border-color:var(--clay); color:var(--white);}
.footer-cta .btn-primary:hover{background:var(--logo-blue); border-color:var(--logo-blue); color:#fff;}
.footer-cta .btn-secondary{border-color:rgba(243,247,250,0.3); color:var(--paper);}
.footer-cta .btn-secondary:hover{background:rgba(243,247,250,0.1); border-color:var(--paper);}

.footer-grid{
  display:grid; grid-template-columns:1.5fr repeat(4, 1fr); gap:40px;
  padding-bottom:60px; border-bottom:1px solid rgba(243,247,250,0.1);
}
.footer-brand .logo{color:var(--paper);}
.footer-brand p{margin-top:18px; font-size:0.92rem; max-width:270px; color:rgba(243,247,250,0.5);}
.footer-brand .footer-address{
  display:block; margin-top:18px; font-size:0.92rem; max-width:270px;
  color:rgba(243,247,250,0.5); text-decoration:none; transition:color 0.2s;
}
.footer-brand .footer-address:hover{color:var(--logo-blue);}
.footer-social{display:flex; gap:12px; margin-top:24px;}
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,247,250,0.2);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-social a:hover{transform:translateY(-2px);}
.footer-social a:hover{background:var(--logo-blue); border-color:var(--logo-blue);}
.footer-col h4{
  color:var(--paper); font-size:0.82rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.06em; margin-bottom:22px; font-family:'Inter', sans-serif;
}
.footer-col ul{display:flex; flex-direction:column; gap:13px;}
.footer-col a{font-size:0.92rem; color:rgba(243,247,250,0.6); transition:color 180ms ease;}
.footer-col a:hover{color:var(--logo-blue);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 0; font-size:0.85rem; color:rgba(243,247,250,0.4);
  flex-wrap:wrap; gap:14px;
}
.footer-bottom a{color:rgba(243,247,250,0.4);}
.footer-bottom a:hover{color:var(--paper);}
.footer-bottom-links{display:flex; gap:26px;}

/* ================= REVEAL ANIMATION ================= */
/* Default (no-JS / JS-not-yet-run) state: fully visible. Only animate
   once JS confirms it's active, so content is never stuck hidden if a
   script fails to load. */
[data-reveal]{
  opacity:1; transform:none;
}
.js-ready [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].revealed{opacity:1; transform:translateY(0);}
[data-reveal="1"]{transition-delay:0.05s;}
[data-reveal="2"]{transition-delay:0.15s;}
[data-reveal="3"]{transition-delay:0.25s;}

header.scrolled{box-shadow:0 1px 0 rgba(15,18,16,0.04), 0 10px 28px -16px rgba(15,18,16,0.12), 0 4px 12px -8px rgba(15,18,16,0.06);}

/* ================= CUSTOM CURSOR ================= */
.has-custom-cursor{cursor:none;}
.has-custom-cursor a, .has-custom-cursor button{cursor:none;}
/* Fixed-position elements are clipped by an ancestor with overflow:hidden
   in some browsers (notably Safari/iOS) when the ancestor also creates a
   stacking/containing-block context. Since .cursor-icon/.cursor-glow are
   appended as direct children of <body> by JS, this rule is a defensive
   backstop only — it guarantees body itself never becomes a containing
   block that could clip them. */
body{transform:none !important;}

/* .cursor-glow: a soft trailing halo that eases toward the pointer,
   shared shape (circle) across pages — only its color changes per page.
   .cursor-icon: the page-specific SVG that sits exactly at the pointer
   tip and carries each page's distinct animated personality. */
.cursor-glow, .cursor-icon{
  position:fixed; top:0; left:0; pointer-events:none; z-index:2147483647;
  will-change:transform; contain:layout style;
}
.cursor-glow{
  width:46px; height:46px; margin:-23px 0 0 -23px;
  opacity:0; transition:opacity 0.25s;
  mix-blend-mode:multiply;
}
.cursor-glow-inner{
  display:block; width:46px; height:46px; border-radius:50%;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(27,122,158,0.07);
  transition:width 0.25s, height 0.25s, background 0.25s;
}
.cursor-grow .cursor-glow{opacity:1;}
.cursor-down .cursor-glow-inner{
  transform:translate(-50%,-50%) scale(0.75);
}
.cursor-icon{
  width:26px; height:26px; margin:-13px 0 0 -13px;
  transition:opacity 0.2s;
}
/* The icon's per-page keyframe animation and hover/press scaling are
   applied to this inner span, never to .cursor-icon itself — that
   element's own transform is reserved for JS position tracking
   (translate to the pointer coords). Splitting the two prevents the
   CSS animation from fighting with, and overwriting, the JS-driven
   translate on every frame. */
.cursor-icon-inner{display:block; width:100%; height:100%; transition:transform 0.15s ease;}
.cursor-icon svg{display:block; width:100%; height:100%; overflow:visible;}
.cursor-down .cursor-icon-inner{transform:scale(0.85);}
@media (max-width:980px){
  .cursor-glow, .cursor-icon{display:none;}
}

/* ---- Per-page cursor icon themes ----
   Each page gets its own SVG markup (injected by JS, see main.js) plus
   matching glow color and a distinct CSS keyframe animation, so every
   page's cursor genuinely looks and moves differently instead of just
   changing color. Falls back to a simple ring on unrecognized pages. */

/* Home / default — simple soft ring, gently pulsing. */
body[data-page="home"] .cursor-glow-inner{background:rgba(27,122,158,0.08);}
body[data-page="home"] .cursor-icon-inner{animation:cursorPulseHome 2.4s ease-in-out infinite;}
@keyframes cursorPulseHome{
  0%, 100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}

/* Staffing — two connected dots (people/connection): they gently
   orbit one another, echoing a handshake / pairing motion. */
body[data-page="staffing"] .cursor-glow-inner{background:rgba(41,182,125,0.10);}
body[data-page="staffing"] .cursor-icon-inner{animation:cursorOrbitStaffing 3s linear infinite;}
@keyframes cursorOrbitStaffing{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

/* Development — blinking text-cursor / bracket, like a code caret. */
body[data-page="development"] .cursor-glow-inner{
  background:rgba(20,94,124,0.08); border-radius:6px;
}
body[data-page="development"] .cursor-icon-inner{animation:cursorBlinkDev 1.1s steps(1) infinite;}
@keyframes cursorBlinkDev{
  0%, 49%{opacity:1;}
  50%, 100%{opacity:0.35;}
}

/* Publishing — pen nib, tilts slightly as if actively writing. */
body[data-page="publishing"] .cursor-glow-inner{background:rgba(46,196,224,0.10);}
body[data-page="publishing"] .cursor-icon-inner{
  transform-origin:20% 80%;
  animation:cursorWritePublishing 1.8s ease-in-out infinite;
}
@keyframes cursorWritePublishing{
  0%, 100%{transform:rotate(-4deg);}
  50%{transform:rotate(6deg);}
}

/* About — subtle breathing ring on interactive hover */
body[data-page="about"] .cursor-glow-inner{
  background:rgba(20,94,124,0.08);
}
body[data-page="about"] .cursor-icon-inner{animation:cursorBreatheAbout 3.2s ease-in-out infinite;}
@keyframes cursorBreatheAbout{
  0%, 100%{transform:scale(1); opacity:0.9;}
  50%{transform:scale(1.18); opacity:1;}
}

/* Contact — a small ping/beacon dot, like an outgoing signal. */
body[data-page="contact"] .cursor-glow-inner{background:rgba(41,182,125,0.10);}
body[data-page="contact"] .cursor-icon-inner{animation:cursorPingContact 1.6s ease-out infinite;}
@keyframes cursorPingContact{
  0%{transform:scale(0.85);}
  60%{transform:scale(1.25);}
  100%{transform:scale(0.85);}
}

/* Interactive-hover state: every page's icon perks up slightly when
   hovering a link/button, on top of its own idle animation. */
.cursor-grow .cursor-icon-inner{transform:scale(1.25) !important;}
body[data-page="development"].cursor-grow .cursor-icon-inner{opacity:1 !important;}

/* ================= PAGE TRANSITION ================= */
.page-wipe{
  position:fixed; inset:0; z-index:9998; background:var(--paper);
  pointer-events:none; opacity:0; transform:scale(1.02);
  transition:opacity 0.38s ease, transform 0.42s ease;
}
html.page-out .page-wipe{opacity:1; transform:scale(1);}
/* Body starts fully visible by default so the page is never blank if JS
   fails, is slow, or is blocked — only once JS confirms it's ready AND
   is about to run the fade-in do we dip opacity briefly for the effect. */
html.js-ready.page-transition-ready body{opacity:0; transform:translateY(6px);}
html.js-ready.page-transition-ready.page-in body{
  opacity:1; transform:translateY(0);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
@media (prefers-reduced-motion: reduce){
  .page-wipe{display:none;}
  body{opacity:1 !important; transform:none !important;}
}

/* ================= IMAGE REVEAL (clip-path wipe) ================= */
/* Apply .img-reveal to any image/media wrapper. Combine with a
   data-reveal attribute so the wipe fires alongside the existing
   Intersection Observer reveal system — no extra JS needed. */
.js-ready .img-reveal{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 0.9s cubic-bezier(.2,.7,.3,1);
}
.img-reveal.revealed{clip-path:inset(0 0 0% 0);}

/* ================= INTERACTIVE DEPTH ================= */
.stat-cell{transition:background 0.3s, transform 0.3s;}
.stat-cell:hover{background:var(--logo-blue-soft); transform:translateY(-3px);}
.testi-card{transition:transform 0.35s ease, box-shadow 0.35s ease;}
.testi-card:hover{transform:translateY(-4px); box-shadow:0 34px 64px -24px rgba(14,27,38,0.35);}

/* ===== Logo-blue hover for any content block (drag cursor over block) ===== */
body[data-page="home"] .bento-card-light:hover{border-color:var(--logo-blue); box-shadow:0 22px 48px -22px rgba(0,124,165,0.28);}
body[data-page="home"] .port-card-light:hover{border-color:var(--logo-blue); box-shadow:0 18px 44px -18px rgba(0,124,165,0.28);}
body[data-page="home"] .insight-card-light:hover{border-color:var(--logo-blue); box-shadow:0 16px 36px -16px rgba(0,124,165,0.26);}
body[data-page="home"] .why-card-light:hover{border-color:var(--logo-blue); box-shadow:0 14px 36px -18px rgba(0,124,165,0.24);}
body[data-page="home"] .pills-light span:hover{border-color:var(--logo-blue); color:var(--logo-blue); background:var(--logo-blue-soft);}
body[data-page="home"] .step-light:hover{background:var(--logo-blue-soft);}
body[data-page="home"] .stats-light .s:hover{background:var(--logo-blue-soft);}
body[data-page="home"] .bento-img{border-bottom-color:var(--logo-blue-ring);}
body[data-page="home"] .port-card-light .kicker{color:var(--logo-blue);}
body[data-page="home"] .insight-card-light .tag{background:var(--logo-blue-soft); color:var(--logo-blue); border-color:var(--logo-blue-ring);}

/* ================= RESPONSIVE — premium mobile, balanced desktop ================= */
@media (max-width:1260px){
  .nav-links{
    /* --header-h is set by JS to the header's real measured height so
       this panel always sits flush under the header at every breakpoint
       (the header's own height changes with nav padding/logo size below
       600px/400px) — 80px stays only as a safe fallback if JS hasn't
       run yet. */
    position:fixed; top:var(--header-h, 80px); left:0; right:0; bottom:0;
    background:var(--paper); flex-direction:column; align-items:stretch;
    padding:10px 28px 40px; gap:0; transform:translateX(-100%);
    transition:transform 0.35s ease; z-index:199;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* The desktop underline-grow effect (::after) reads as a stray,
     misaligned line inside the full-width mobile rows below — each
     mobile row already gets its own clean state via border-bottom
     and the .active treatment underneath, so switch it off here. */
  .nav-links a::after{display:none;}
  .nav-links a{
    font-family:'Inter', sans-serif !important;
    padding:18px 2px; font-size:0.92rem; font-weight:600; width:100%;
    border-bottom:1px solid var(--cream-line);
    display:flex; align-items:center; justify-content:space-between;
    color:rgba(15,18,16,0.88);
  }
  .nav-links a.active{
    color:var(--logo-blue);
  }
  .nav-links a.active:not(.nav-cta)::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background:var(--logo-blue); margin-right:10px; flex-shrink:0;
    order:-1;
  }
  .nav-links .nav-cta.active{color:var(--paper) !important;}
  .nav-links li{width:100%;}
  .nav-links li:last-child a{border-bottom:none;}
  .nav-links .nav-cta{
    margin-top:22px; text-align:center; justify-content:center;
    border-bottom:none; padding:16px 0; font-size:0.92rem;
    display:flex; width:100%;
  }
  .nav-links.open{transform:translateX(0);}
  .burger{display:flex; position:relative; z-index:201;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
  .footer-brand{grid-column:1 / -1; margin-bottom:8px;}

  /* mega menu -> mobile accordion */
  .has-mega{
    flex-direction:column; align-items:stretch; width:100%;
  }
  .has-mega::before{display:none;}
  .has-mega::after{display:none;}
  .mega-trigger{
    font-family:'Inter', sans-serif !important;
    width:100%; padding:18px 2px; font-size:0.92rem; font-weight:600; color:rgba(15,18,16,0.88);
    justify-content:space-between;
  }
  .mega-trigger::after{display:none;}
  .has-mega .mega-trigger{border-bottom:1px solid var(--cream-line);}
  .has-mega.mega-open .mega-trigger{border-bottom-color:transparent; color:var(--logo-blue);}
  .mega-panel{
    position:static; transform:none; width:auto; max-width:none;
    box-shadow:none; border:none; border-radius:0;
    background:var(--paper-deep);
    padding:6px 4px 10px;
    display:grid; grid-template-columns:1fr; gap:0;
    opacity:1; visibility:visible; pointer-events:auto;
    max-height:0; overflow:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease;
    border-bottom:1px solid var(--cream-line);
  }
  .has-mega.mega-open .mega-panel{
    max-height:2200px;
    padding:14px 4px 18px;
  }
  .mega-col{padding:10px 12px 4px;}
  .mega-col-title{margin-bottom:8px;}
  .mega-col a{padding:11px 10px; margin:0; color:rgba(15,18,16,0.88);}
  .mega-col a:hover{padding-left:10px; color:var(--logo-blue);}
  .mega-col-cta{padding-top:14px; flex-direction:column; align-items:flex-start;}

  /* nested submenu -> mobile inline accordion */
  .mega-panel-single{width:auto;}
  .mega-link-parent{padding:12px 10px; margin:0; color:rgba(15,18,16,0.88);}
  .mega-link-parent:hover{color:var(--logo-blue);}
  .submenu-panel{
    position:static; transform:none; width:auto;
    box-shadow:none; border:none; border-radius:0; border-top:none;
    background:transparent;
    padding:0 0 0 14px;
    max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto;
    transition:max-height 0.3s ease;
  }
  .has-submenu.submenu-open .submenu-panel{max-height:600px; padding:2px 0 8px 14px;}
  .submenu-panel a{padding:9px 10px; font-size:0.86rem; color:rgba(15,18,16,0.88);}
  .submenu-panel a:hover{color:var(--logo-blue);}

  .mega-panel-wide{grid-template-columns:1fr; width:auto; gap:0;}
  /* EdTech — mobile: stacked compact accordion */
  .mega-panel-edtech{
    position:static; left:auto; transform:none; width:auto; max-width:none;
    box-shadow:none; border:none; border-radius:0;
    background:var(--paper-deep);
    padding:0;
    display:block; opacity:1; visibility:visible; pointer-events:auto;
    max-height:0; overflow:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease;
    border-bottom:1px solid var(--cream-line);
  }
  .has-mega[data-mega="edtech"]:hover .mega-panel-edtech,
  .has-mega[data-mega="techtrends"]:hover .mega-panel-edtech{opacity:1; visibility:visible; pointer-events:auto;}
  .has-mega[data-mega="edtech"].mega-open .mega-panel-edtech,
  .has-mega[data-mega="techtrends"].mega-open .mega-panel-edtech{
    max-height:3200px; padding:12px 4px 16px;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }
  .edtech-mega{flex-direction:column; min-height:unset; max-height:none;}
  .edtech-left{width:100%; background:transparent; border-right:none; padding:0; gap:4px;}
  .edtech-cat{padding:13px 14px; border-radius:10px; background:#fff; border:1px solid var(--cream-line); font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:600; text-transform:none; letter-spacing:0; color:rgba(15,18,16,0.88);}
  .edtech-cat:hover{color:var(--logo-blue);}
  .edtech-cat.is-active{background:var(--logo-blue-soft); color:var(--logo-blue); border-color:var(--logo-blue-ring); box-shadow:none;}
  .edtech-right{padding:0; margin-top:4px; background:transparent;}
  .edtech-pane{padding:0;}
  .edtech-pane.is-active{display:block;}
  .edtech-pane:not(.is-active){display:none;}
  .edtech-pane-title{display:none;}
  .edtech-pane ul{gap:0;}
  .edtech-pane a{padding:10px 12px; margin:0; border-radius:8px; background:#fff; border:1px solid var(--cream-line); margin-bottom:4px; font-family:'Inter', sans-serif; font-size:0.92rem; color:rgba(15,18,16,0.88);}
  .edtech-pane a:hover{color:var(--logo-blue);}
  .edtech-pane .has-submenu{margin-bottom:4px; width:auto; max-width:none;} /* undo desktop's fit-content sizing */
  .edtech-sub-btn{width:100%; justify-content:space-between; padding:10px 12px; margin:0; border-radius:8px; background:#fff; border:1px solid var(--cream-line); font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:600; color:rgba(15,18,16,0.88);}
  .edtech-sub-btn:hover{background:#fff; color:var(--logo-blue);}
  .edtech-submenu-flyout{
    position:static; transform:none; width:auto; box-shadow:none; border:none; border-radius:0; background:transparent; padding:0 0 0 14px;
    max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto; transition:max-height 0.30s ease; border-left:2px solid transparent; margin-top:4px;
  }
  .edtech-pane .has-submenu.is-open .edtech-submenu-flyout{max-height:500px; border-left-color:var(--logo-blue-ring); padding:4px 0 6px 14px; opacity:1; transform:none;}
  .edtech-submenu-flyout a{background:var(--paper); font-family:'Inter', sans-serif; font-size:0.92rem; color:rgba(15,18,16,0.88);}
  .edtech-submenu-flyout a:hover{color:var(--logo-blue);}

  /* +/- accordion indicators replace the chevrons on mobile */
  .chev, .sub-chev{
    width:14px; height:14px; border:none; transform:none; position:relative; opacity:1;
  }
  .chev::before, .chev::after,
  .sub-chev::before, .sub-chev::after{
    content:''; position:absolute; top:50%; left:50%; background:currentColor;
    transform:translate(-50%,-50%);
  }
  .chev::before, .sub-chev::before{width:12px; height:1.6px;}
  .chev::after, .sub-chev::after{width:1.6px; height:12px; transition:transform 0.25s ease, opacity 0.25s ease;}
  .has-mega.mega-open > .mega-trigger .chev::after{transform:translate(-50%,-50%) scaleY(0); opacity:0;}
  .has-submenu.submenu-open > .mega-link-parent .sub-chev::after,
  .has-submenu.is-open > .mega-link-parent .sub-chev::after,
  .has-submenu.submenu-open > .edtech-sub-btn .sub-chev::after,
  .has-submenu.is-open > .edtech-sub-btn .sub-chev::after{transform:translate(-50%,-50%) scaleY(0); opacity:0;}
}
@media (max-width:1260px){
  /* keep generous header height even on tablet — slightly taller than before */
  .nav{height:76px; padding:0 24px;}
  .logo-img{height:38px !important; width:auto !important;}
  .search-panel-inner{padding:0 24px;}
  .nav-right{gap:12px;}
}
@media (max-width:600px){
  .wrap{padding:0 22px;}
  .nav{padding:0 22px; height:70px;}
  .page-hero{padding:56px 0 50px;}
  .footer-grid{grid-template-columns:1fr; gap:36px;}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:12px;}
  .footer-bottom-links{gap:18px; flex-wrap:wrap;}
  .footer-cta .btns{flex-direction:column; width:100%;}
  .footer-cta .btns .btn-primary, .footer-cta .btns .btn-secondary{width:100%; justify-content:center;}
  .section-head{margin-bottom:40px;}
  .logo{font-size:1.15rem; gap:8px;}
  .logo-img{height:36px !important; width:auto !important;}
  .nav-cta{padding:10px 18px; font-size:0.82rem;}
  .search-panel-inner{padding:0 22px;}
  .search-field-wrap{padding:9px 14px;}
}
@media (max-width:400px){
  .wrap{padding:0 18px;}
  .nav{padding:0 18px; height:66px;}
  .logo-img{height:34px !important; width:auto !important;}
  .search-panel-inner{padding:0 18px;}
  .btn-primary, .btn-secondary{padding:13px 22px; font-size:0.88rem;}
}
@media (max-width:360px){
  .wrap{padding:0 14px;}
  .nav{padding:0 14px; height:60px; gap:10px;}
  .nav-right{gap:6px;}
  .logo-img{height:28px !important; width:auto !important;}
}

/* TRUSTED-BY LOGO SLIDER */
.trust-strip{
  padding:34px 0 8px;
  border-top:1px solid var(--cream-line);
}
.trusted-by-light .trust-strip{margin-top:0;}
.trust-strip-label{
  text-align:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:22px;
  opacity:0.85;
}
.trust-slider{
  --trust-item-w:210px;
  --trust-gap:32px;
  position:relative;
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.trust-slider-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  animation:trust-scroll 34s linear infinite;
  will-change:transform;
  width:max-content;
}
.trust-slider:hover .trust-slider-track{animation-play-state:paused;}
.trust-item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:110px;
  /* Fixed intrinsic width sized to the logo, not a fraction of the
     container. Dividing the container width by a target "visible count"
     ignored how large the logos actually render, so at larger logo
     sizes only 2-3 fit on screen with big gaps between them. A fixed
     width means slot size always matches logo size, so 5-6 logos sit
     naturally in view on desktop with even spacing. */
  width:var(--trust-item-w);
  padding:0 16px;
  box-sizing:border-box;
}
.trust-item img{
  height:88px;
  width:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
@keyframes trust-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:1100px){
  .trust-slider{--trust-item-w:170px;}
  .trust-item{height:92px; padding:0 13px;}
  .trust-item img{height:70px;}
  .trust-slider-track{animation-duration:30s;}
}
@media (max-width:700px){
  .trust-slider{--trust-item-w:140px;}
  .trust-item{height:76px; padding:0 10px;}
  .trust-item img{height:56px;}
  .trust-slider-track{animation-duration:26s;}
}
@media (max-width:460px){
  .trust-slider{--trust-item-w:110px;}
  .trust-item{height:64px; padding:0 8px;}
  .trust-item img{height:46px;}
  .trust-slider-track{animation-duration:22s;}
}
@media (prefers-reduced-motion: reduce){
  /* This "Trusted By" strip is decorative logo marquee, not essential
     motion, and the client wants it to always scroll continuously
     regardless of device/OS reduced-motion preference. Intentionally
     NOT pausing the animation here (unlike a typical a11y best practice)
     per explicit request — layout stays single-row nowrap either way. */
}

/* ============================================================
   MOBILE-ONLY POLISH — phone view (≤1260px → 320px)
   Strictly scoped to max-width media queries so desktop >1260px
   remains 100% unchanged. Covers header, navigation, accordion,
   page layouts, typography, spacing, images/cards, footer and
   guards against horizontal overflow.
   ============================================================ */

/* --- Global horizontal-scroll guard (mobile only) --- */
@media (max-width:1260px){
  html, body{ max-width:100vw; overflow-x:clip; }
  /* any 100vw element can otherwise add scrollbar gutter */
  body{ position:relative; }
  main{ overflow-x:clip; }
  .wrap, .nav{ max-width:100%; min-width:0; }
  img, video, iframe, svg{ max-width:100%; }
  /* force long words / urls to break before they push viewport */
  h1,h2,h3,h4,p,li,a,span{ overflow-wrap:break-word; word-break:break-word; }
  /* sections must never force horizontal scroll via shadows/borders */
  section{ overflow-x:clip; }
}

/* --- Header / nav — polished mobile shell --- */
@media (max-width:1260px){
  header{ position:sticky; top:0; z-index:210; }
  .nav{
    height:66px !important;
    padding:0 20px !important;
    gap:14px !important;
    align-items:center;
  }
  .nav-right{ gap:8px !important; margin-left:auto; }
  .logo{ min-width:0; flex-shrink:0; }
  .logo-img{ height:34px !important; width:auto !important; }
  /* touch targets — 44×44 minimum */
  .search-toggle{
    width:42px !important; height:42px !important;
    border-radius:9px !important;
    flex-shrink:0;
  }
  .search-toggle svg{ width:18px; height:18px; }
  .burger{
    width:42px !important; height:42px !important;
    border-radius:9px !important;
    gap:5px !important;
    display:flex !important;
  }
  .burger span{ width:18px !important; height:1.8px !important; border-radius:2px; }
  /* search panel — compact under-header sheet */
  .search-panel{
    padding:12px 0 14px !important;
    border-top:1px solid rgba(15,18,16,0.07) !important;
    border-bottom:1px solid rgba(15,18,16,0.07) !important;
    box-shadow:0 10px 24px -16px rgba(15,18,16,0.12) !important;
  }
  .search-panel-inner{ padding:0 20px !important; gap:10px !important; }
  .search-form{ gap:8px !important; }
  .search-field-wrap{ padding:9px 12px 9px 12px !important; border-radius:100px !important; }
  .search-field-wrap input{ font-size:16px !important; }
  .search-results{ max-height:min(52vh, 340px) !important; }
  .search-hint{ font-size:0.76rem !important; }

  /* nav backdrop — dim page when drawer open */
  .nav-backdrop{
    position:fixed; left:0; right:0; bottom:0;
    top:var(--header-h, 66px);
    background:rgba(15,18,16,0.28);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.28s ease, visibility 0.28s;
    z-index:198;
  }
  html.nav-open .nav-backdrop{ opacity:1; visibility:visible; pointer-events:auto; }

  /* drawer — premium, tight, scrollable */
  .nav-links{
    position:fixed !important;
    top:var(--header-h, 66px) !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    width:auto !important; max-width:none !important;
    background:#FFFFFF !important;
    border-top:1px solid rgba(15,18,16,0.06) !important;
    border-right:none !important;
    padding:6px 0 28px !important;
    gap:0 !important;
    transform:translateX(-100%) !important;
    transition:transform 0.32s cubic-bezier(.2,.7,.3,1) !important;
    z-index:199 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    box-shadow:none !important;
  }
  .nav-links.open{ transform:translateX(0) !important; box-shadow:4px 0 24px -12px rgba(15,18,16,0.10) !important; }
  .nav-links a::after{ display:none !important; }

  /* Each top-level row — proper touch target, premium spacing */
  .nav-links > li{ width:100% !important; min-width:0; }
  .nav-links a{
    font-family:'Inter', sans-serif !important;
    width:100% !important;
    padding:15px 20px !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    min-height:48px;
    border-bottom:1px solid #EDEEF0 !important;
    justify-content:space-between;
    letter-spacing:-0.01em;
    color:rgba(15,18,16,0.88) !important;
  }
  .nav-links a:hover,
  .nav-links a.active{
    color:var(--logo-blue) !important;
  }
  .nav-links > li:last-child a{ border-bottom:none !important; }

  /* Mega trigger — same row treatment as links */
  .has-mega{ flex-direction:column !important; align-items:stretch !important; width:100% !important; }
  .has-mega::before{ display:none !important; }
  .mega-trigger{
    font-family:'Inter', sans-serif !important;
    width:100% !important;
    min-height:48px;
    padding:15px 20px !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    color:rgba(15,18,16,0.88) !important;
    justify-content:flex-start !important;
    gap:10px !important;
    border-bottom:1px solid #EDEEF0 !important;
    border-left:none !important; border-right:none !important;
    border-top:none !important;
  }
  .mega-trigger:hover{
    color:var(--logo-blue) !important;
  }
  .mega-trigger .chev{
    margin-left:auto !important;
    flex-shrink:0;
    width:22px !important; height:22px !important;
    border:none !important; transform:none !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    background:#F3F5F0; border-radius:6px;
    position:relative; opacity:1 !important;
  }
  /* plus / minus inside chev */
  .mega-trigger .chev::before, .mega-trigger .chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important;
    display:block !important;
  }
  .mega-trigger .chev::before{ width:10px !important; height:1.6px !important; }
  .mega-trigger .chev::after{ width:1.6px !important; height:10px !important; transition:opacity 0.22s, transform 0.22s !important; }
  .has-mega.mega-open > .mega-trigger{
    background:#F8FAF8 !important;
    color:var(--logo-blue) !important;
    border-bottom-color:#EDEEF0 !important;
  }
  .has-mega.mega-open > .mega-trigger .chev{ background:var(--logo-blue) !important; color:#fff !important; }
  .has-mega.mega-open > .mega-trigger .chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }

  /* Generic mega panel — inline accordion, not spacious card */
  .mega-panel{
    position:static !important;
    width:auto !important; max-width:none !important;
    transform:none !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:#F8FAF8 !important;
    border-bottom:1px solid #EDEEF0 !important;
    border-top:1px solid #EDEEF0 !important;
    padding:0 !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    max-height:0 !important; overflow:hidden !important;
    transition:max-height 0.34s cubic-bezier(.2,.7,.3,1), padding 0.28s ease !important;
  }
  .has-mega.mega-open .mega-panel{
    max-height:2800px !important;
    padding:10px 0 12px !important;
  }
  .mega-col{ padding:0 0 2px !important; }
  .mega-col ul{ gap:0 !important; }
  .mega-col a{
    padding:11px 20px 11px 36px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; line-height:1.45 !important;
    border-left:none !important;
    border-radius:0 !important;
    position:relative;
    color:rgba(15,18,16,0.88) !important;
  }
  .mega-col a::before{
    content:'' !important;
    position:absolute; left:20px; top:50%; width:4px; height:4px; border-radius:50%;
    background:var(--logo-blue); transform:translateY(-50%); display:block !important;
  }
  .mega-col a:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; border-left-color:transparent !important; }
  .mega-col a:hover::before{ background:var(--logo-blue) !important; }

  /* Nested submenu (AI Optimization etc.) — tighter inline */
  .mega-link-parent{
    width:100% !important;
    padding:11px 20px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; font-weight:600 !important;
    line-height:1.45 !important;
    border-left:none !important;
    border-radius:0 !important;
    background:transparent !important;
    justify-content:flex-start !important;
    gap:10px !important;
    color:rgba(15,18,16,0.88) !important;
  }
  .mega-link-parent:hover{
    color:var(--logo-blue) !important;
  }
  .mega-link-parent .sub-chev{
    margin-left:auto !important;
    width:20px !important; height:20px !important;
    background:#EDEEF0; border-radius:6px;
    display:inline-flex !important; align-items:center; justify-content:center;
    position:relative; border:none !important; transform:none !important;
    font-size:0 !important; opacity:1 !important;
  }
  .mega-link-parent .sub-chev::before, .mega-link-parent .sub-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important;
  }
  .mega-link-parent .sub-chev::before{ width:8px !important; height:1.5px !important; }
  .mega-link-parent .sub-chev::after{ width:1.5px !important; height:8px !important; transition:opacity 0.2s, transform 0.2s !important; }
  .has-submenu.is-open > .mega-link-parent .sub-chev::after,
  .has-submenu.submenu-open > .mega-link-parent .sub-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }
  .has-submenu.is-open > .mega-link-parent,
  .has-submenu.submenu-open > .mega-link-parent{ color:var(--logo-blue) !important; background:#FFFFFF !important; }

  .submenu-panel{
    position:static !important; width:auto !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:#EFEFF1 !important;
    border-top:1px solid #E6E8DF !important;
    border-bottom:1px solid #E6E8DF !important;
    padding:0 !important; margin:0 !important;
    max-height:0 !important; overflow:hidden !important;
    opacity:1 !important; visibility:visible !important;
    transition:max-height 0.30s ease !important;
  }
  .has-submenu.is-open .submenu-panel,
  .has-submenu.submenu-open .submenu-panel{
    max-height:900px !important;
    padding:6px 0 8px !important;
  }
  .submenu-panel ul{ gap:0 !important; }
  .submenu-panel a{
    padding:10px 20px 10px 36px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; line-height:1.45 !important;
    color:rgba(15,18,16,0.88) !important;
  }
  .submenu-panel a:hover{
    color:var(--logo-blue) !important;
  }
  .submenu-panel a::before{ left:20px !important; }

  /* EdTech mega — compact accordion, not empty card grid */
  .mega-panel-edtech{
    position:static !important; left:auto !important; right:auto !important; transform:none !important;
    width:auto !important; max-width:none !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:#F8FAF8 !important;
    border-bottom:1px solid #EDEEF0 !important;
    border-top:1px solid #EDEEF0 !important;
    padding:0 !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    max-height:0 !important; overflow:hidden !important;
    transition:max-height 0.36s cubic-bezier(.2,.7,.3,1) !important;
  }
  .has-mega[data-mega="edtech"].mega-open .mega-panel-edtech,
  .has-mega[data-mega="techtrends"].mega-open .mega-panel-edtech{
    max-height:4200px !important;
    padding:12px 14px 14px !important;
  }
  .edtech-mega{ flex-direction:column !important; min-height:unset !important; max-height:none !important; gap:10px !important; overflow:visible !important; }
  .edtech-left{
    width:100% !important; background:transparent !important; border-right:none !important;
    padding:0 !important; gap:8px !important; overflow:visible !important;
  }
  .edtech-cat{
    padding:12px 14px !important;
    border-radius:10px !important;
    background:#FFFFFF !important;
    border:1px solid #E6E8DF !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; font-weight:600 !important;
    letter-spacing:0 !important; text-transform:none !important;
    min-height:44px; gap:10px !important;
    color:rgba(15,18,16,0.88) !important;
  }
  .edtech-cat:hover{
    color:var(--logo-blue) !important;
  }
  .edtech-cat.is-active{
    background:var(--logo-blue-soft) !important; color:var(--logo-blue) !important;
    border-color:var(--logo-blue-ring) !important; box-shadow:none !important;
  }
  .edtech-cat .cat-chev{ width:18px !important; height:18px !important; background:#F3F5F0; border-radius:6px; display:inline-flex !important; align-items:center; justify-content:center; border:none !important; transform:none !important; font-size:0.75rem !important; opacity:1 !important; }
  .edtech-cat .cat-chev::before{ content:'›' !important; display:block !important; transform:none !important; font-weight:600; line-height:1; }
  .edtech-right{ padding:6px 0 0 !important; margin-top:0 !important; background:transparent !important; overflow:visible !important; }
  .edtech-pane{ padding:0 !important; }
  .edtech-pane-title{ display:none !important; }
  .edtech-pane ul{ gap:0 !important; }
  .edtech-pane a{
    display:flex !important; align-items:flex-start !important;
    padding:10px 12px !important; margin:0 0 6px !important;
    border-radius:9px !important; background:#FFFFFF !important; border:1px solid #E6E8DF !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; line-height:1.45 !important; font-weight:500 !important;
    color:rgba(15,18,16,0.88) !important;
  }
  .edtech-pane a:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; border-color:var(--logo-blue-ring) !important; text-decoration:none !important; }
  .edtech-pane .has-submenu{ margin-bottom:6px !important; width:auto !important; max-width:none !important; }
  .edtech-sub-btn{
    width:100% !important; justify-content:flex-start !important; gap:10px !important;
    padding:11px 12px !important; margin:0 !important; border-radius:9px !important;
    background:#FFFFFF !important; border:1px solid #E6E8DF !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; font-weight:600 !important; min-height:44px;
    color:rgba(15,18,16,0.88) !important;
  }
  .edtech-sub-btn:hover{
    color:var(--logo-blue) !important;
  }
  .edtech-sub-btn .sub-chev{
    margin-left:auto !important;
    width:20px !important; height:20px !important;
    background:#F3F5F0; border-radius:6px;
    display:inline-flex !important; align-items:center; justify-content:center;
    border:none !important; transform:none !important; font-size:0 !important; opacity:1 !important; position:relative;
  }
  .edtech-sub-btn .sub-chev::before, .edtech-sub-btn .sub-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important;
  }
  .edtech-sub-btn .sub-chev::before{ width:8px !important; height:1.5px !important; }
  .edtech-sub-btn .sub-chev::after{ width:1.5px !important; height:8px !important; transition:opacity 0.2s, transform 0.2s !important; }
  .has-submenu.is-open > .edtech-sub-btn .sub-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }
  .has-submenu.is-open > .edtech-sub-btn{ color:var(--logo-blue) !important; background:var(--logo-blue-soft) !important; border-color:var(--logo-blue-ring) !important; }
  .edtech-submenu-flyout{
    position:static !important; transform:none !important; width:auto !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:transparent !important; padding:0 0 0 10px !important; margin:6px 0 0 !important;
    max-height:0 !important; overflow:hidden !important; opacity:1 !important; visibility:visible !important;
    transition:max-height 0.28s ease !important;
    border-left:2px solid transparent !important;
  }
  .edtech-pane .has-submenu.is-open .edtech-submenu-flyout{
    max-height:900px !important;
    border-left-color:var(--logo-blue-ring) !important;
    padding:6px 0 6px 10px !important;
  }
  .edtech-submenu-flyout ul{
    display:flex !important; flex-direction:column !important; gap:6px !important;
    grid-template-columns:1fr !important;
  }
  .edtech-submenu-flyout a{
    background:#FFFFFF !important; border:1px solid #EDEEF0 !important;
    padding:9px 12px !important; margin:0 !important; border-radius:8px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    color:var(--logo-blue) !important;
  }
  /* TechTrends panes — same compact treatment */
  .edtech-pane.pane-grid ul, .edtech-pane.pane-grid.pane-grid-2col ul{
    display:flex !important; flex-direction:column !important; gap:0 !important;
    grid-template-columns:1fr !important;
  }

  /* Premium compact panel tweaks */
  .mega-panel.mega-premium.mega-compact{ width:auto !important; }

  /* Prevent iOS rubber-bounce double header height glitch */
  header{ border-bottom:1px solid rgba(15,18,16,0.07) !important; }
}

/* --- Mobile layout, spacing, typography system --- */
@media (max-width:1260px){
  /* wraps — tighter on tablet */
  .wrap{ padding:0 24px !important; }
  section{ padding-left:0 !important; padding-right:0 !important; }
  /* generic sections */
  .sec-light{ padding:64px 0 !important; }
  .sec-light.alt{ padding:64px 0 !important; }
  .head-light{ margin-bottom:28px !important; gap:16px !important; }
  .head-light h2{ font-size:clamp(1.65rem, 4vw, 2.2rem) !important; line-height:1.05 !important; max-width:100% !important; }
  .head-light p{ font-size:0.94rem !important; line-height:1.6 !important; max-width:100% !important; }
  .eyebrow-sec{ font-size:0.70rem !important; margin-bottom:10px !important; }

  /* bento / cards — 2 → 1 */
  .bento-light{ grid-template-columns:1fr 1fr !important; gap:14px !important; }
  .bento-card-light:last-child{ grid-column:1 / -1; }
  .bento-img{ height:160px !important; }
  .bento-body{ padding:18px 16px 16px !important; }
  .bento-body h3{ font-size:1.15rem !important; }
  .bento-body p{ font-size:0.88rem !important; }
  .bento-list-light li{ font-size:0.84rem !important; }

  .process-light{ grid-template-columns:1fr !important; }
  .step-light{ border-right:none !important; border-bottom:1px solid var(--line) !important; padding:22px 18px !important; }
  .step-light:last-child{ border-bottom:none !important; }
  .stats-light{ grid-template-columns:repeat(2,1fr) !important; }
  .stats-light .s{ padding:22px 14px !important; }
  .stats-light .s b{ font-size:2rem !important; }
  .why-light{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .why-card-light{ padding:18px 16px !important; }
  .port-grid-light{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .port-card-light:first-child{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .port-card-light:first-child .thumb{ aspect-ratio:16/10 !important; }
  .insights-grid-light{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .testi-light{ grid-template-columns:1fr !important; padding:20px !important; gap:18px !important; border-radius:20px !important; }
  .testi-light blockquote{ font-size:1.15rem !important; }
  .trust-strip{ padding:24px 0 8px !important; }
  .page-hero{ padding:64px 0 48px !important; }
  .page-hero h1{ font-size:clamp(1.9rem, 5.8vw, 2.6rem) !important; line-height:1.08 !important; max-width:100% !important; }
  .page-hero p.lead{ font-size:1rem !important; max-width:100% !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:28px 20px !important; }
  .footer-brand{ grid-column:1 / -1 !important; }
  .footer-cta{ padding-bottom:50px !important; margin-bottom:40px !important; }
  .footer-cta h2{ font-size:clamp(1.6rem, 4vw, 2.2rem) !important; }
}

@media (max-width:768px){
  .wrap{ padding:0 20px !important; }
  .sec-light{ padding:56px 0 !important; }
  .head-light{ flex-direction:column !important; align-items:flex-start !important; }
  .bento-light{ grid-template-columns:1fr !important; }
  .bento-card-light:last-child{ grid-column:auto !important; }
  .port-grid-light{ grid-template-columns:1fr !important; }
  .insights-grid-light{ grid-template-columns:1fr !important; }
  .why-light{ grid-template-columns:1fr !important; }
  .stats-light{ grid-template-columns:repeat(2,1fr) !important; }
  .process-light{ grid-template-columns:1fr !important; }
  .service-strip{ grid-template-columns:1fr !important; height:auto !important; gap:14px !important; padding:16px !important; }
  .service-groups{ height:auto !important; min-height:86px !important; }
  .service-infocard{ margin-top:0 !important; }
  /* hero-light embedded overrides via style.css important */
  .hero-light{ height:auto !important; min-height:auto !important; padding:36px 0 40px !important; }
  .hero-grid-light{ display:flex !important; flex-direction:column !important; gap:20px !important; padding:0 !important; }
  .hero-left-light{ display:contents !important; }
  .hero-light h1{ order:1 !important; font-size:clamp(2.15rem, 6.8vw, 2.9rem) !important; line-height:1.08 !important; letter-spacing:-0.035em !important; text-wrap:balance !important; }
  .hero-light h1 br{ display:none !important; }
  .hero-desc-light{ order:2 !important; font-size:1.02rem !important; line-height:1.6 !important; margin-top:0 !important; margin-bottom:0 !important; max-width:100% !important; }
  .hero-visual-light{ order:3 !important; width:100% !important; max-width:100% !important; margin:4px 0 0 !important; transform:none !important; }
  .hero-ctas-light{ order:4 !important; gap:12px !important; margin-top:6px !important; width:100% !important; }
  .hero-ctas-light .btn-dark, .hero-ctas-light .btn-light{ padding:14px 22px !important; font-size:0.96rem !important; }
  .visual-card-light{ border-radius:18px !important; }
  .watermark-light{ font-size:2.2rem !important; bottom:-4px !important; opacity:0.35 !important; max-width:100% !important; overflow:hidden !important; }
}

@media (max-width:600px){
  .nav{ height:60px !important; padding:0 16px !important; gap:10px !important; }
  .logo-img{ height:30px !important; }
  .search-toggle, .burger{ width:40px !important; height:40px !important; }
  .search-panel-inner{ padding:0 16px !important; }
  .nav-links a{ padding:14px 16px !important; font-size:0.92rem !important; min-height:46px; }
  .mega-trigger{ padding:14px 16px !important; font-size:0.92rem !important; min-height:46px; }
  .mega-col a{ padding:10px 16px 10px 32px !important; font-size:0.86rem !important; }
  .mega-col a::before{ left:16px !important; }
  .submenu-panel a{ padding:9px 16px 9px 32px !important; }
  .submenu-panel a::before{ left:16px !important; }
  .has-mega.mega-open .mega-panel{ padding:8px 0 10px !important; }
  .edtech-cat{ padding:11px 12px !important; font-size:0.86rem !important; min-height:42px; }
  .has-mega[data-mega="edtech"].mega-open .mega-panel-edtech,
  .has-mega[data-mega="techtrends"].mega-open .mega-panel-edtech{ padding:10px 12px 12px !important; }

  .wrap{ padding:0 16px !important; }
  .sec-light{ padding:48px 0 !important; }
  .sec-light.alt{ padding:48px 0 !important; }
  .head-light{ margin-bottom:22px !important; }
  .head-light h2{ font-size:1.55rem !important; }
  .eyebrow-sec{ font-size:0.68rem !important; }
  .eyebrow-sec::before{ width:20px !important; }
  .bento-body{ padding:16px 14px 14px !important; }
  .bento-img{ height:150px !important; }
  .bento-list-light{ gap:7px !important; margin-bottom:14px !important; }
  .btn-bento{ padding:9px 14px !important; font-size:0.84rem !important; }
  .process-light{ border-radius:16px !important; }
  .step-light{ padding:18px 14px !important; }
  .stats-light{ border-radius:16px !important; }
  .stats-light .s{ padding:18px 12px !important; }
  .stats-light .s b{ font-size:1.7rem !important; }
  .stats-light .s span{ font-size:0.62rem !important; letter-spacing:0.08em !important; }
  .why-card-light{ padding:16px 14px !important; border-radius:14px !important; }
  .port-card-light{ border-radius:16px !important; }
  .port-card-light .body{ padding:14px 14px 16px !important; }
  .insight-card-light{ border-radius:16px !important; }
  .insight-card-light .body{ padding:14px !important; }
  .testi-light{ padding:16px !important; border-radius:16px !important; }
  .trust-strip-label{ font-size:0.70rem !important; margin-bottom:14px !important; }
  .marquee-light{ padding:10px 0 !important; }
  .marquee-light span{ font-size:0.74rem !important; }
  .page-hero{ padding:44px 0 36px !important; }
  .page-hero h1{ font-size:1.75rem !important; }
  .page-hero p.lead{ font-size:0.95rem !important; }
  .page-hero-tag{ font-size:0.78rem !important; margin-bottom:14px !important; }
  .footer-cta h2{ font-size:1.45rem !important; }
  .footer-cta{ padding-bottom:36px !important; margin-bottom:32px !important; }
  .footer-cta .btns{ flex-direction:column !important; width:100% !important; }
  .footer-cta .btns .btn-primary, .footer-cta .btns .btn-secondary{ width:100% !important; justify-content:center !important; padding:14px 18px !important; font-size:0.92rem !important; }
  .footer-grid{ grid-template-columns:1fr !important; gap:28px !important; padding-bottom:36px !important; }
  .footer-col h4{ margin-bottom:14px !important; font-size:0.78rem !important; }
  .footer-col ul{ gap:10px !important; }
  .footer-col a{ font-size:0.88rem !important; }
  .footer-bottom{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; padding:18px 0 !important; font-size:0.82rem !important; }
  .hero-light h1{ font-size:clamp(1.95rem, 7.5vw, 2.45rem) !important; }
  .hero-desc-light{ font-size:0.98rem !important; }
  .hero-ctas-light .btn-dark, .hero-ctas-light .btn-light{ flex:1 1 auto !important; justify-content:center !important; }
  .visual-top{ height:42px !important; padding:0 12px !important; }
  .visual-top span{ font-size:0.68rem !important; }
  .code-light{ font-size:0.70rem !important; padding:10px 12px !important; }
  .visual-meta{ padding:12px 12px !important; gap:10px !important; }
  .visual-meta .left p{ font-size:0.92rem !important; }
}

@media (max-width:480px){
  .nav{ height:58px !important; padding:0 14px !important; }
  .logo-img{ height:28px !important; }
  .wrap{ padding:0 14px !important; }
  .sec-light{ padding:40px 0 !important; }
  .head-light h2{ font-size:1.40rem !important; }
  .head-light p{ font-size:0.90rem !important; }
  .bento-body h3{ font-size:1.05rem !important; }
  .bento-body p{ font-size:0.84rem !important; line-height:1.55 !important; }
  .page-hero h1{ font-size:1.60rem !important; }
  .hero-light{ padding:28px 0 32px !important; }
  .hero-light h1{ font-size:clamp(1.85rem, 8vw, 2.25rem) !important; }
  .hero-desc-light{ font-size:0.94rem !important; }
  .hero-ctas-light{ flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
  .hero-ctas-light .btn-dark, .hero-ctas-light .btn-light{ width:100% !important; flex:1 1 auto !important; }
  .stats-light{ grid-template-columns:1fr 1fr !important; gap:1px !important; }
  .stats-light .s{ padding:16px 10px !important; }
  .why-card-light h4{ font-size:0.95rem !important; }
  .why-card-light p{ font-size:0.82rem !important; }
  .footer-brand p{ font-size:0.88rem !important; }
  .search-field-wrap{ padding:8px 11px !important; }
  .search-submit, .search-close{ width:38px !important; height:38px !important; }
}

@media (max-width:400px){
  .nav{ height:56px !important; padding:0 12px !important; gap:8px !important; }
  .logo-img{ height:26px !important; }
  .search-toggle, .burger{ width:38px !important; height:38px !important; border-radius:8px !important; }
  .search-panel-inner{ padding:0 12px !important; }
  .nav-links a{ padding:13px 14px !important; font-size:0.90rem !important; }
  .mega-trigger{ padding:13px 14px !important; font-size:0.90rem !important; }
  .wrap{ padding:0 12px !important; }
  .sec-light{ padding:36px 0 !important; }
  .head-light h2{ font-size:1.30rem !important; }
  .bento-body{ padding:14px 12px 12px !important; }
  .stats-light{ grid-template-columns:1fr !important; }
  .stats-light .s b{ font-size:1.9rem !important; }
  .hero-light h1{ font-size:clamp(1.75rem, 8vw, 2.05rem) !important; }
  .btn-primary, .btn-secondary{ padding:12px 16px !important; font-size:0.86rem !important; }
}

@media (max-width:360px){
  .nav{ padding:0 10px !important; height:54px !important; gap:6px !important; }
  .nav-right{ gap:6px !important; }
  .logo-img{ height:24px !important; }
  .wrap{ padding:0 10px !important; }
  .head-light h2{ font-size:1.22rem !important; }
  .sec-light{ padding:32px 0 !important; }
  .page-hero{ padding:36px 0 28px !important; }
  .page-hero h1{ font-size:1.45rem !important; }
  .hero-light h1{ font-size:clamp(1.65rem, 8vw, 1.95rem) !important; }
  .bento-img{ height:132px !important; }
  .footer-bottom-links{ gap:12px !important; flex-wrap:wrap !important; }
}

@media (max-width:320px){
  .nav{ padding:0 8px !important; height:52px !important; }
  .logo-img{ height:22px !important; }
  .wrap{ padding:0 10px !important; }
  .sec-light{ padding:28px 0 !important; }
  .head-light{ margin-bottom:16px !important; }
  .head-light h2{ font-size:1.15rem !important; }
  .bento-body{ padding:12px 10px 10px !important; }
  .bento-body p{ font-size:0.82rem !important; }
  .hero-light h1{ font-size:1.55rem !important; }
  .hero-desc-light{ font-size:0.88rem !important; margin-top:10px !important; }
  .visual-meta{ flex-direction:column !important; align-items:flex-start !important; }
  .visual-meta .right{ width:100% !important; min-width:0 !important; text-align:left !important; display:flex !important; justify-content:space-between !important; align-items:center !important; }
}

/* --- Page-specific mobile refinements --- */
@media (max-width:1260px){
  /* prevent margin-neg trick from causing overflow on mobile */
  .dev-row:hover{ margin:0 !important; padding-left:0 !important; padding-right:0 !important; }
  .tl-item:hover{ margin:0 !important; padding-left:0 !important; padding-right:0 !important; }
  .contact-grid{ gap:32px !important; }
  .contact-grid.wrap{ padding-left:20px !important; padding-right:20px !important; }
}

@media (max-width:600px){
  /* generic page-hero visuals */
  .svc-hero-visual, .about-visual, .approach-visual{ height:auto !important; aspect-ratio:1200 / 560 !important; margin-top:22px !important; border-radius:16px 16px 0 0 !important; }
  .story{ padding:40px 0 !important; }
  .story-grid{ grid-template-columns:1fr !important; gap:18px !important; }
  .story-label{ position:static !important; font-size:1rem !important; }
  .story-visual{ height:180px !important; margin-top:14px !important; }
  .story-copy p{ font-size:0.95rem !important; max-width:100% !important; }
  .story-copy p:first-child{ font-size:1.05rem !important; }
  .values{ padding:40px 0 !important; }
  .values-grid{ grid-template-columns:1fr !important; gap:14px !important; }
  .value-card{ padding:20px 16px !important; border-radius:16px !important; }
  .timeline{ padding:40px 0 !important; }
  .tl-item{ grid-template-columns:1fr !important; gap:8px !important; padding:20px 0 !important; }
  .team{ padding:0 0 40px !important; }
  .team-grid{ grid-template-columns:1fr !important; gap:14px !important; }
  .team-photo{ height:160px !important; }
  .stack{ padding:40px 0 !important; }
  .stack-grid{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .stack-chip{ padding:14px 10px !important; font-size:0.82rem !important; }
  .dev-services{ padding:40px 0 !important; }
  .dev-row{ grid-template-columns:1fr !important; gap:12px !important; padding:20px 0 !important; }
  .approach{ padding:40px 0 !important; }
  .approach-grid{ grid-template-columns:1fr !important; gap:20px !important; }
  .approach-visual{ height:auto !important; aspect-ratio:1200 / 560 !important; }
  .approach-copy h2{ font-size:1.45rem !important; }
  .offers{ padding:40px 0 !important; }
  .offers-grid{ grid-template-columns:1fr !important; gap:12px !important; }
  .offer-card{ padding:20px 14px !important; border-radius:16px !important; }
  .why-section{ padding:40px 0 !important; }
  .why-grid{ grid-template-columns:1fr !important; gap:12px !important; }
  .why-card{ padding:18px 14px !important; }
  .process{ padding:40px 0 !important; }
  .process-steps{ grid-template-columns:1fr !important; gap:14px !important; }
  .anchor-section{ padding:40px 0 !important; }
  /* contact */
  .contact-hero{ padding-bottom:32px !important; }
  .contact-grid{ grid-template-columns:1fr !important; gap:24px !important; padding:32px 0 40px !important; }
  .contact-info{ padding-top:0 !important; }
  .contact-info h2{ font-size:1.45rem !important; margin-bottom:10px !important; }
  .contact-info > p{ margin-bottom:20px !important; font-size:0.92rem !important; }
  .info-block{ padding:14px 0 !important; gap:12px !important; }
  .info-icon{ width:40px !important; height:40px !important; border-radius:10px !important; }
  .form-card{ padding:18px 14px !important; border-radius:16px !important; }
  .form-card h3{ font-size:1.15rem !important; }
  .field-row{ grid-template-columns:1fr !important; gap:0 !important; }
  .field{ margin-bottom:14px !important; }
  .field input, .field select, .field textarea{ font-size:16px !important; padding:11px 12px !important; }
  .submit-row{ flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
  .submit-row .btn-primary{ width:100% !important; justify-content:center !important; }
  .map-section{ padding:0 0 40px !important; }
  .map-block{ height:220px !important; border-radius:16px !important; }
  .breadcrumb{ font-size:0.82rem !important; padding:6px 10px !important; }
  /* about hero grid */
  .about-hero-grid{ grid-template-columns:1fr !important; gap:0 !important; padding-bottom:28px !important; }
  /* ensure no fixed-width sections overflow */
  .svc-hero .wrap, .about-hero .wrap, .contact-hero .wrap{ padding-left:16px !important; padding-right:16px !important; }
}

@media (max-width:400px){
  .stack-grid{ grid-template-columns:1fr !important; }
  .svc-hero-visual, .about-visual, .approach-visual{ height:auto !important; aspect-ratio:1200 / 560 !important; }
  .map-block{ height:190px !important; }
}

@media (max-width:360px){
  .form-card{ padding:14px 10px !important; }
  .value-card{ padding:16px 12px !important; }
  .offer-card{ padding:16px 12px !important; }
}

/* --- Ensure trust slider compact on narrow phones --- */
@media (max-width:600px){
  .trust-slider{ --trust-item-w:130px !important; }
  .trust-item{ height:70px !important; padding:0 8px !important; }
  .trust-item img{ height:52px !important; }
}
@media (max-width:400px){
  .trust-slider{ --trust-item-w:110px !important; }
}

/* --- Header search — prevent flex min-width auto overflow at ultra-narrow widths --- */
@media (max-width:1260px){
  header{ overflow-x:clip !important; }
  .search-panel{ overflow-x:hidden !important; max-width:100vw; }
  .search-panel-inner{ min-width:0 !important; max-width:100% !important; }
  .search-form{ min-width:0 !important; }
  .search-field-wrap{ min-width:0 !important; flex:1 1 0% !important; }
  .search-field-wrap input{ min-width:0 !important; width:100% !important; }
  .search-field-wrap svg{ flex-shrink:0 !important; }
}
@media (max-width:360px){
  .search-panel-inner{ padding:0 10px !important; }
  .search-form{ gap:6px !important; }
  .search-field-wrap{ padding:7px 10px !important; }
  .search-field-wrap input{ font-size:15px !important; }
  .search-submit, .search-close{ width:36px !important; height:36px !important; }
}
@media (max-width:320px){
  /* ultra-tight: allow placeholder to be clipped, hint wraps */
  .search-field-wrap input::placeholder{ font-size:0.82rem !important; }
  .search-hint{ display:none !important; }
}

/* --- Section overflow guards for decorative wide elements --- */
@media (max-width:1260px){
  .hero-light{ overflow:hidden !important; }
  .watermark-light{ max-width:100vw; overflow:hidden; }
  .marquee-light{ overflow:hidden !important; }
  .trust-slider{ overflow:hidden !important; }
}

/* ===================================================================
   MOBILE HEADER REDESIGN — Academian-inspired UX, branded to DPathway
   STRICTLY phone/tablet only (≤1260px). Desktop >1260 remains 100% locked.
   - Compact 60px header, balanced 16px padding, logo left / search+burger right
   - Full-height drawer under header, backdrop dim, smooth slide+fade
   - Accordion with +/- circular indicator, entire row tappable, subtle animation
   - Tight, intentional spacing — no huge empty gaps, proper hierarchy
   - Works flawlessly 320 / 360 / 375 / 390 / 414 / 430 / 480
   =================================================================== */

/* -- Header shell — compact, professional, Academian clean -- */
@media (max-width:1260px){
  header{
    position:sticky !important;
    top:0 !important;
    z-index:210 !important;
    background:#FFFFFF !important;
    border-bottom:1px solid rgba(15,18,16,0.08) !important;
    box-shadow:none !important;
  }
  header.scrolled{
    background:#FFFFFF !important;
    border-bottom-color:rgba(15,18,16,0.08) !important;
    box-shadow:0 1px 0 rgba(15,18,16,0.04), 0 8px 20px -14px rgba(15,18,16,0.10) !important;
  }
  header::before{ display:none !important; }

  .nav{
    height:60px !important;
    min-height:60px !important;
    padding:0 16px !important;
    gap:12px !important;
    align-items:center !important;
    justify-content:space-between !important;
    max-width:100% !important;
  }
  .logo{
    flex-shrink:0 !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    line-height:1 !important;
  }
  .logo-img{
    height:32px !important;
    width:auto !important;
    max-width:160px !important;
    object-fit:contain !important;
    object-position:left center !important;
    display:block !important;
    background:transparent !important;
  }
  .nav-right{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-shrink:0 !important;
    margin-left:auto !important;
  }

  /* Touch targets — 40×40, consistent, ample spacing */
  .search-toggle{
    width:40px !important;
    height:40px !important;
    border-radius:9px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#0F1210 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
    transition:background 0.18s, color 0.18s, border-color 0.18s !important;
  }
  .search-toggle:hover{ background:#F3F5F0 !important; color:#0F1210 !important; border-color:#EDEEF0 !important; }
  .search-toggle:active{ transform:scale(0.97) !important; }
  .search-toggle[aria-expanded="true"]{ background:#E6F0F5 !important; color:var(--logo-blue) !important; border-color:var(--logo-blue-ring) !important; }
  .search-toggle svg{ width:18px !important; height:18px !important; display:block !important; }

  .burger{
    width:40px !important;
    height:40px !important;
    border-radius:9px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    gap:5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    flex-shrink:0 !important;
    transition:background 0.18s, border-color 0.18s !important;
    cursor:pointer !important;
  }
  .burger:hover{ background:#F3F5F0 !important; border-color:#EDEEF0 !important; }
  .burger:active{ transform:scale(0.97) !important; }
  .burger span{
    width:18px !important;
    height:1.9px !important;
    background:var(--ink) !important;
    border-radius:2px !important;
    transition:transform 0.28s cubic-bezier(.2,.7,.3,1), opacity 0.22s !important;
    display:block !important;
  }
  .burger.open span:nth-child(1){ transform:translateY(6.9px) rotate(45deg) !important; }
  .burger.open span:nth-child(2){ opacity:0 !important; transform:scaleX(0) !important; }
  .burger.open span:nth-child(3){ transform:translateY(-6.9px) rotate(-45deg) !important; }
  .burger.open{ background:#F3F5F0 !important; border-color:#EDEEF0 !important; }

  /* Search panel — compact sheet under header, mobile-friendly */
  .search-panel{
    position:absolute !important;
    top:100% !important;
    left:0 !important; right:0 !important;
    background:#FFFFFF !important;
    border-top:1px solid #EDEEF0 !important;
    border-bottom:1px solid #EDEEF0 !important;
    box-shadow:0 12px 28px -16px rgba(15,18,16,0.12) !important;
    padding:12px 0 14px !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transform:translateY(-6px) !important;
    transition:opacity 0.20s ease, transform 0.22s ease, visibility 0.20s !important;
    z-index:205 !important;
  }
  header.search-open .search-panel{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; }
  .search-panel-inner{ padding:0 16px !important; gap:10px !important; max-width:720px !important; margin:0 auto !important; }
  .search-form{ gap:8px !important; min-width:0 !important; }
  .search-field-wrap{
    flex:1 1 0% !important;
    min-width:0 !important;
    padding:9px 12px !important;
    border-radius:100px !important;
    border:1.5px solid #DDE0D4 !important;
    background:#FFFFFF !important;
    gap:10px !important;
  }
  .search-field-wrap:focus-within{ border-color:var(--logo-blue) !important; box-shadow:0 0 0 4px var(--logo-blue-ring) !important; }
  .search-field-wrap input{ font-size:16px !important; min-width:0 !important; width:100% !important; }
  .search-field-wrap svg{ flex-shrink:0 !important; }
  .search-submit, .search-close{ width:40px !important; height:40px !important; flex-shrink:0 !important; border-radius:50% !important; }
  .search-results{ max-height:min(52vh,340px) !important; border-radius:12px !important; }
  .search-hint{ font-size:0.74rem !important; color:#8A9190 !important; }
}

/* -- Drawer backdrop — subtle dim + blur, Academian-clean -- */
@media (max-width:1260px){
  .nav-backdrop{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    top:var(--header-h, 60px) !important;
    background:rgba(15,18,16,0.22) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transition:opacity 0.28s ease, visibility 0.28s !important;
    z-index:198 !important;
  }
  html.nav-open .nav-backdrop{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
  html.nav-open{ overflow:hidden !important; }
  /* Prevent body scroll jump — JS also uses position:fixed fallback */
  html.nav-open body{ overscroll-behavior:contain !important; }
}

/* -- Navigation drawer — Academian-style: white, divider-driven, compact -- */
@media (max-width:1260px){
  .nav-links{
    position:fixed !important;
    top:var(--header-h, 60px) !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    width:auto !important;
    max-width:none !important;
    background:#FFFFFF !important;
    border-top:1px solid #EDEEF0 !important;
    padding:0 0 24px !important;
    gap:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    transform:translateX(-100%) !important;
    transition:transform 0.34s cubic-bezier(.32,.72,.32,1) !important;
    z-index:199 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    box-shadow:none !important;
  }
  .nav-links.open{
    transform:translateX(0) !important;
    box-shadow:8px 0 32px -16px rgba(15,18,16,0.14) !important;
  }

  /* Remove desktop underline / hover artifacts */
  .nav-links a::after, .mega-trigger::after{ display:none !important; }

  /* Top-level rows — clean, scannable, proper hierarchy */
  .nav-links > li{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  /* Plain link rows (if any without mega) */
  .nav-links > li > a:not(.mega-trigger){
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:15px 16px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:-0.01em !important;
    color:var(--logo-blue) !important;
    min-height:50px !important;
    border-bottom:1px solid #EDEEF0 !important;
    background:#FFFFFF !important;
    transition:background 0.18s, color 0.18s !important;
  }
  .nav-links > li > a:not(.mega-trigger):active{ background:#F8FAF8 !important; }

  /* CTA inside drawer — keep as pill, centered */
  .nav-links .nav-cta{
    margin:16px 16px 0 !important;
    width:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px 20px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:700 !important;
    border-radius:100px !important;
    border:none !important;
    text-align:center !important;
  }

  /* Mega triggers — full row, divider, plus/minus indicator */
  .has-mega{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
  }
  .has-mega::before, .has-mega::after{ display:none !important; }
  .mega-trigger{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:15px 16px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:-0.01em !important;
    color:var(--logo-blue) !important;
    background:#FFFFFF !important;
    border:none !important;
    border-bottom:1px solid #EDEEF0 !important;
    border-radius:0 !important;
    min-height:50px !important;
    text-align:left !important;
    cursor:pointer !important;
    transition:background 0.18s, color 0.18s !important;
    text-decoration:none !important;
    position:relative !important;
    white-space:normal !important;
  }
  .mega-trigger:active{ background:#F8FAF8 !important; }
  .has-mega.mega-open > .mega-trigger{
    background:#F8FAF8 !important;
    color:var(--logo-blue) !important;
    border-bottom-color:#EDEEF0 !important;
  }
  /* Override any left-border accent from desktop */
  .mega-trigger{ border-left:none !important; }

  /* Plus/minus circular indicator — Academian clean */
  .mega-trigger .chev{
    margin-left:auto !important;
    flex-shrink:0 !important;
    width:24px !important;
    height:24px !important;
    border:none !important;
    border-radius:7px !important;
    background:#F2F3F1 !important;
    color:#6B6F68 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    opacity:1 !important;
    transform:none !important;
    transition:background 0.20s, color 0.20s !important;
  }
  .mega-trigger .chev::before, .mega-trigger .chev::after{
    content:'' !important;
    position:absolute !important;
    top:50% !important; left:50% !important;
    background:currentColor !important;
    transform:translate(-50%,-50%) !important;
    display:block !important;
    border-radius:1px !important;
  }
  .mega-trigger .chev::before{ width:11px !important; height:1.7px !important; }
  .mega-trigger .chev::after{ width:1.7px !important; height:11px !important; transition:opacity 0.20s, transform 0.20s !important; }
  .has-mega.mega-open > .mega-trigger .chev{ background:var(--logo-blue) !important; color:#FFFFFF !important; }
  .has-mega.mega-open > .mega-trigger .chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }

  /* Hide desktop chevron arrow remnants */
  .mega-trigger .chev{ font-size:0 !important; }
}

/* -- Mega panels — tight, no huge gaps, subtle expand animation -- */
@media (max-width:1260px){
  .mega-panel{
    position:static !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:#F8FAF8 !important;
    border-top:1px solid #EDEEF0 !important;
    border-bottom:1px solid #EDEEF0 !important;
    padding:0 !important;
    margin:0 !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    max-height:0 !important;
    overflow:hidden !important;
    transition:max-height 0.34s cubic-bezier(.2,.7,.3,1) !important;
  }
  .has-mega.mega-open .mega-panel{
    max-height:3200px !important;
    padding:8px 0 10px !important;
  }

  /* Generic single-col panels (Digital Marketing, Why DP) */
  .mega-col{ padding:0 !important; }
  .mega-col ul{ gap:0 !important; display:flex !important; flex-direction:column !important; }
  .mega-col a{
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
    padding:10px 16px 10px 28px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:500 !important;
    line-height:1.45 !important;
    color:var(--logo-blue) !important;
    border:none !important;
    border-left:none !important;
    border-radius:0 !important;
    background:transparent !important;
    position:relative !important;
    transition:background 0.16s, color 0.16s !important;
  }
  .mega-col a::before{
    content:'' !important;
    position:absolute !important;
    left:16px !important;
    top:50% !important;
    width:5px !important; height:5px !important;
    border-radius:50% !important;
    background:var(--logo-blue) !important;
    transform:translateY(-50%) !important;
    display:block !important;
  }
  .mega-col a:hover, .mega-col a:focus-visible{ background:#FFFFFF !important; color:var(--logo-blue) !important; }
  .mega-col a:hover::before{ background:var(--logo-blue) !important; }

  .mega-col-title{
    padding:10px 16px 8px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--logo-blue) !important;
    border-bottom:1px solid #EDEEF0 !important;
  }

  /* Submenu parent row — same row treatment, with indicator */
  .has-submenu{ position:relative !important; display:flex !important; flex-direction:column !important; width:100% !important; }
  .mega-link-parent{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:11px 16px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    color:var(--logo-blue) !important;
    background:transparent !important;
    border:none !important;
    border-left:none !important;
    border-radius:0 !important;
    text-align:left !important;
    cursor:pointer !important;
    text-decoration:none !important;
    transition:background 0.16s, color 0.16s !important;
    white-space:normal !important;
  }
  .mega-link-parent:active{ background:#FFFFFF !important; }
  .has-submenu.is-open > .mega-link-parent,
  .has-submenu.submenu-open > .mega-link-parent{ color:var(--logo-blue) !important; background:#FFFFFF !important; }

  .mega-link-parent .sub-chev{
    margin-left:auto !important;
    flex-shrink:0 !important;
    width:22px !important; height:22px !important;
    background:#EDEEF0 !important;
    color:#6B6F68 !important;
    border-radius:6px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    border:none !important;
    transform:none !important;
    font-size:0 !important;
    opacity:1 !important;
  }
  .mega-link-parent .sub-chev::before, .mega-link-parent .sub-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important; border-radius:1px !important;
  }
  .mega-link-parent .sub-chev::before{ width:9px !important; height:1.6px !important; }
  .mega-link-parent .sub-chev::after{ width:1.6px !important; height:9px !important; transition:opacity 0.20s, transform 0.20s !important; }
  .has-submenu.is-open > .mega-link-parent .sub-chev,
  .has-submenu.submenu-open > .mega-link-parent .sub-chev{ background:var(--logo-blue) !important; color:#fff !important; }
  .has-submenu.is-open > .mega-link-parent .sub-chev::after,
  .has-submenu.submenu-open > .mega-link-parent .sub-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }

  .submenu-panel{
    position:static !important;
    width:auto !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:#EFEFF1 !important;
    border-top:1px solid #E6E8DF !important;
    border-bottom:1px solid #E6E8DF !important;
    padding:0 !important;
    margin:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transition:max-height 0.30s ease !important;
  }
  .has-submenu.is-open .submenu-panel,
  .has-submenu.submenu-open .submenu-panel{ max-height:900px !important; padding:6px 0 8px !important; }

  .submenu-panel ul{ gap:0 !important; display:flex !important; flex-direction:column !important; }
  .submenu-panel a{
    padding:9px 16px 9px 28px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    line-height:1.45 !important;
    font-weight:500 !important;
    color:var(--logo-blue) !important;
    position:relative !important;
  }
  .submenu-panel a::before{
    content:'' !important;
    position:absolute !important;
    left:16px !important; top:50% !important;
    width:4px !important; height:4px !important;
    border-radius:50% !important;
    background:var(--logo-blue) !important;
    transform:translateY(-50%) !important;
    display:block !important;
  }
  .submenu-panel a:hover{ background:rgba(255,255,255,0.70) !important; color:var(--logo-blue) !important; }
}

/* -- EdTech & Tech Trends mega — clean inline accordion on mobile view -- */
@media (max-width:1260px){
  .mega-panel-edtech{
    position:static !important;
    left:auto !important; right:auto !important; transform:none !important;
    width:auto !important; max-width:none !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:#F8FAF8 !important;
    border-top:1px solid #EDEEF0 !important;
    border-bottom:1px solid #EDEEF0 !important;
    padding:0 !important;
    margin:0 !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    max-height:0 !important; overflow:hidden !important;
    transition:max-height 0.36s cubic-bezier(.2,.7,.3,1) !important;
  }
  .has-mega[data-mega="edtech"].mega-open .mega-panel-edtech,
  .has-mega[data-mega="techtrends"].mega-open .mega-panel-edtech{
    max-height:6500px !important;
    padding:4px 0 8px !important;
  }
  .edtech-mega{
    flex-direction:column !important;
    min-height:0 !important; max-height:none !important;
    gap:0 !important;
    overflow:visible !important;
  }
  .edtech-left{
    width:100% !important;
    background:transparent !important;
    border-right:none !important;
    padding:0 !important;
    gap:0 !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .edtech-cat{
    padding:13px 16px !important;
    border-radius:0 !important;
    background:#FFFFFF !important;
    border:none !important;
    border-bottom:1px solid #EDEEF0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    line-height:1.35 !important;
    min-height:48px !important;
    gap:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    color:var(--logo-blue) !important;
    transition:background 0.18s, color 0.18s, border-color 0.18s !important;
    box-shadow:none !important;
    text-align:left !important;
    cursor:pointer !important;
    width:100% !important;
  }
  .edtech-cat:active{ background:#F8FAF8 !important; }
  .edtech-cat.is-open,
  .edtech-cat.is-active{
    background:#F8FAF8 !important;
    color:var(--logo-blue) !important;
    border-bottom-color:#E6E8DF !important;
    font-weight:700 !important;
  }
  .edtech-cat .cat-chev{
    width:22px !important; height:22px !important;
    background:#F2F3F1 !important;
    color:#6B6F68 !important;
    border-radius:6px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:none !important;
    transform:none !important;
    font-size:0 !important;
    opacity:1 !important;
    flex-shrink:0 !important;
    position:relative !important;
    transition:background 0.20s, color 0.20s !important;
  }
  .edtech-cat .cat-chev::before, .edtech-cat .cat-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important; border-radius:1px !important;
  }
  .edtech-cat .cat-chev::before{ width:10px !important; height:1.6px !important; }
  .edtech-cat .cat-chev::after{ width:1.6px !important; height:10px !important; transition:opacity 0.20s, transform 0.20s !important; }
  .edtech-cat.is-open .cat-chev,
  .edtech-cat.is-active .cat-chev{ background:var(--logo-blue) !important; color:#fff !important; }
  .edtech-cat.is-open .cat-chev::after,
  .edtech-cat.is-active .cat-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }
  /* Remove old › glyph */
  .edtech-cat .cat-chev{ font-size:0 !important; }

  .edtech-right{
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }
  .edtech-pane{
    padding:0 !important;
    display:block !important;
    max-height:0 !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    background:#F8FAF8 !important;
    border-bottom:1px solid #EDEEF0 !important;
    transition:max-height 0.34s cubic-bezier(.2,.7,.3,1), padding 0.24s ease !important;
  }
  .edtech-pane.is-open,
  .edtech-pane.is-active{
    display:block !important;
    max-height:2800px !important;
    padding:6px 12px 10px !important;
  }
  .edtech-pane-title{ display:none !important; }
  .edtech-pane ul{ gap:0 !important; display:flex !important; flex-direction:column !important; }
  .edtech-pane.pane-grid ul, .edtech-pane.pane-grid.pane-grid-2col ul{
    display:flex !important; flex-direction:column !important; gap:0 !important; grid-template-columns:1fr !important;
  }
  .edtech-pane a{
    display:flex !important;
    align-items:center !important;
    padding:10px 14px !important;
    margin:0 0 5px !important;
    border-radius:8px !important;
    background:#FFFFFF !important;
    border:1px solid #E6E8DF !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    line-height:1.45 !important;
    font-weight:500 !important;
    color:var(--logo-blue) !important;
    transition:background 0.16s, border-color 0.16s, color 0.16s !important;
    text-decoration:none !important;
  }
  .edtech-pane a:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; border-color:var(--logo-blue-ring) !important; text-decoration:none !important; }

  .edtech-pane .has-submenu{ margin-bottom:5px !important; width:auto !important; max-width:none !important; }

  .edtech-sub-btn{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:11px 14px !important;
    margin:0 !important;
    border-radius:8px !important;
    background:#FFFFFF !important;
    border:1px solid #E6E8DF !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    color:var(--logo-blue) !important;
    min-height:44px !important;
    text-align:left !important;
    cursor:pointer !important;
    transition:background 0.16s, border-color 0.16s, color 0.16s !important;
  }
  .edtech-sub-btn:active{ background:#F8FAF8 !important; }
  .has-submenu.is-open > .edtech-sub-btn{ color:var(--logo-blue) !important; background:var(--logo-blue-soft) !important; border-color:var(--logo-blue-ring) !important; }

  .edtech-sub-btn .sub-chev{
    margin-left:auto !important;
    flex-shrink:0 !important;
    width:20px !important; height:20px !important;
    background:#F2F3F1 !important;
    color:#6B6F68 !important;
    border-radius:6px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:none !important;
    transform:none !important;
    font-size:0 !important;
    opacity:1 !important;
    position:relative !important;
  }
  .edtech-sub-btn .sub-chev::before, .edtech-sub-btn .sub-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important; border-radius:1px !important;
  }
  .edtech-sub-btn .sub-chev::before{ width:9px !important; height:1.6px !important; }
  .edtech-sub-btn .sub-chev::after{ width:1.6px !important; height:9px !important; transition:opacity 0.20s, transform 0.20s !important; }
  .has-submenu.is-open > .edtech-sub-btn .sub-chev{ background:var(--logo-blue) !important; color:#fff !important; }
  .has-submenu.is-open > .edtech-sub-btn .sub-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }

  .edtech-submenu-flyout{
    position:static !important;
    transform:none !important;
    width:auto !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    padding:0 0 0 10px !important;
    margin:5px 0 0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transition:max-height 0.28s ease, padding 0.22s ease !important;
    border-left:2px solid transparent !important;
  }
  .edtech-pane .has-submenu.is-open .edtech-submenu-flyout{
    max-height:900px !important;
    border-left-color:var(--logo-blue-ring) !important;
    padding:4px 0 6px 10px !important;
  }
  .edtech-submenu-flyout ul{ display:flex !important; flex-direction:column !important; gap:5px !important; grid-template-columns:1fr !important; }
  .edtech-submenu-flyout a{
    background:#FFFFFF !important;
    border:1px solid #EDEEF0 !important;
    padding:9px 12px !important;
    margin:0 !important;
    border-radius:7px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    line-height:1.45 !important;
    color:var(--logo-blue) !important;
  }
  .edtech-submenu-flyout a:hover{ border-color:var(--logo-blue-ring) !important; color:var(--logo-blue) !important; }
}

/* -- Responsive refinements — 320 to 480, no overflow, logo & icons always visible -- */
@media (max-width:600px){
  .nav{ height:58px !important; min-height:58px !important; padding:0 14px !important; gap:10px !important; }
  .logo-img{ height:30px !important; max-width:148px !important; }
  .search-toggle, .burger{ width:40px !important; height:40px !important; }
  .nav-links > li > a:not(.mega-trigger){ padding:14px 14px !important; font-family:'Inter', sans-serif !important; font-size:0.92rem !important; min-height:48px !important; color:var(--logo-blue) !important; }
  .mega-trigger{ padding:14px 14px !important; font-family:'Inter', sans-serif !important; font-size:0.92rem !important; min-height:48px !important; color:var(--logo-blue) !important; }
  .mega-col a{ padding:10px 14px 10px 26px !important; font-family:'Inter', sans-serif !important; font-size:0.92rem !important; color:var(--logo-blue) !important; }
  .mega-col a::before{ left:14px !important; background:var(--logo-blue) !important; }
  .submenu-panel a{ padding:9px 14px 9px 26px !important; font-family:'Inter', sans-serif !important; font-size:0.92rem !important; color:var(--logo-blue) !important; }
  .submenu-panel a::before{ left:14px !important; background:var(--logo-blue) !important; }
  .search-panel-inner{ padding:0 14px !important; }
  .has-mega.mega-open .mega-panel{ padding:8px 0 10px !important; }
  .edtech-cat{ padding:11px 12px !important; font-family:'Inter', sans-serif !important; font-size:0.92rem !important; min-height:42px !important; color:var(--logo-blue) !important; }
  .has-mega[data-mega="edtech"].mega-open .mega-panel-edtech,
  .has-mega[data-mega="techtrends"].mega-open .mega-panel-edtech{ padding:10px 10px 12px !important; }
  .edtech-pane a{ font-family:'Inter', sans-serif !important; font-size:0.92rem !important; padding:9px 12px !important; color:var(--logo-blue) !important; }
}
@media (max-width:480px){
  .nav{ height:56px !important; min-height:56px !important; padding:0 12px !important; gap:8px !important; }
  .logo-img{ height:28px !important; max-width:136px !important; }
  .nav-right{ gap:6px !important; }
  .search-toggle, .burger{ width:38px !important; height:38px !important; border-radius:8px !important; }
  .mega-trigger .chev{ width:22px !important; height:22px !important; }
  .search-field-wrap{ padding:8px 11px !important; }
  .search-submit, .search-close{ width:38px !important; height:38px !important; }
}
@media (max-width:400px){
  .nav{ height:54px !important; min-height:54px !important; padding:0 10px !important; gap:8px !important; }
  .logo-img{ height:26px !important; max-width:124px !important; }
  .search-panel-inner{ padding:0 10px !important; }
  .nav-links > li > a:not(.mega-trigger){ padding:13px 12px !important; font-size:0.88rem !important; }
  .mega-trigger{ padding:13px 12px !important; font-size:0.88rem !important; }
  .search-field-wrap input{ font-size:15px !important; }
}
@media (max-width:360px){
  .nav{ padding:0 10px !important; height:52px !important; min-height:52px !important; gap:6px !important; }
  .logo-img{ height:24px !important; max-width:112px !important; }
  .nav-right{ gap:5px !important; }
  .search-toggle, .burger{ width:36px !important; height:36px !important; border-radius:8px !important; }
  .search-panel{ padding:10px 0 12px !important; }
}
@media (max-width:320px){
  .nav{ padding:0 8px !important; height:52px !important; min-height:52px !important; }
  .logo-img{ height:22px !important; max-width:104px !important; }
  .search-panel-inner{ padding:0 8px !important; }
  .search-hint{ display:none !important; }
}

/* -- Premium polish — scrollbar, focus, animation smoothness -- */
@media (max-width:1260px){
  .nav-links::-webkit-scrollbar{ width:6px !important; }
  .nav-links::-webkit-scrollbar-thumb{ background:#DDE0D4 !important; border-radius:100px !important; }
  .nav-links::-webkit-scrollbar-track{ background:transparent !important; }

  .mega-trigger:focus-visible, .edtech-cat:focus-visible, .edtech-sub-btn:focus-visible, .mega-link-parent:focus-visible{
    outline:2px solid var(--logo-blue) !important;
    outline-offset:-2px !important;
    border-radius:8px !important;
  }

  /* Subtle staggered reveal when drawer opens — premium feel */
  .nav-links.open > li{ animation:mobileItemIn 0.32s ease both !important; }
  .nav-links.open > li:nth-child(1){ animation-delay:0.02s !important; }
  .nav-links.open > li:nth-child(2){ animation-delay:0.05s !important; }
  .nav-links.open > li:nth-child(3){ animation-delay:0.08s !important; }
  .nav-links.open > li:nth-child(4){ animation-delay:0.11s !important; }
  @keyframes mobileItemIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

  @media (prefers-reduced-motion: reduce){
    .nav-links, .mega-panel, .mega-panel-edtech, .submenu-panel, .edtech-submenu-flyout, .search-panel, .nav-backdrop{ transition:none !important; }
    .nav-links.open > li{ animation:none !important; }
  }
}

/* -- Ensure desktop >1260 is 100% untouched — explicitly re-assert hidden mobile extras -- */
@media (min-width:1261px){
  .nav-backdrop{ display:none !important; }
}

/* ===================================================================
   FINAL AUTHORITATIVE MOBILE FIX — replaces all previous conflicting
   mobile nav implementations. Placed LAST so it wins by cascade.
   Fixes root cause: height:100% persisting on mobile caused 219px rows
   (li flex shrink distribution). Now rows are compact 52-58px,
   Academian-inspired: clean white rows, divider lines, plus/minus
   circular indicator, tight hierarchy, no giant gaps, no cards.
   Strictly max-width:1260 so desktop >1260 is untouched.
   =================================================================== */
@media (max-width:1260px){
  /* --- Root cause fix: remove height:100% and min-height inherited from desktop --- */
  .has-mega,
  .nav-links li,
  .has-mega .mega-trigger,
  .nav-links a,
  .edtech-cat,
  .edtech-sub-btn,
  .mega-link-parent,
  .mega-col a,
  .submenu-panel a,
  .edtech-pane a,
  .edtech-submenu-flyout a{
    height:auto !important;
    min-height:0 !important;
  }
  .has-mega{ min-height:0 !important; }
  .nav-links li{ min-height:0 !important; }

  /* Header — compact 56-60px, clean white, 16px padding */
  header{
    position:sticky !important;
    top:0 !important;
    z-index:210 !important;
    background:#FFFFFF !important;
    border-bottom:1px solid rgba(15,18,16,0.08) !important;
  }
  .nav{
    height:58px !important;
    min-height:58px !important;
    padding:0 16px !important;
    gap:12px !important;
    align-items:center !important;
  }
  .logo-img{
    height:30px !important;
    width:auto !important;
    max-width:150px !important;
  }
  .nav-right{ gap:8px !important; margin-left:auto !important; }
  .search-toggle, .burger{
    width:40px !important;
    height:40px !important;
    border-radius:9px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
  }
  .search-toggle svg{ width:18px !important; height:18px !important; }
  .burger span{ width:17px !important; height:1.7px !important; }

  /* Backdrop — subtle dim, no dark overlay */
  .nav-backdrop{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    top:var(--header-h,58px) !important;
    background:rgba(15,18,16,0.18) !important;
    backdrop-filter:blur(2px) !important;
    -webkit-backdrop-filter:blur(2px) !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transition:opacity 0.24s ease, visibility 0.24s !important;
    z-index:198 !important;
  }
  html.nav-open .nav-backdrop{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }

  /* Drawer — full width, directly below header, white, scrollable */
  .nav-links{
    position:fixed !important;
    top:var(--header-h,58px) !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    width:auto !important; max-width:none !important;
    background:#FFFFFF !important;
    border-top:1px solid #EDEEF0 !important;
    padding:0 0 24px !important;
    margin:0 !important;
    gap:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    transform:translateX(-100%) !important;
    transition:transform 0.32s cubic-bezier(.32,.72,.32,1) !important;
    z-index:199 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    box-shadow:none !important;
    height:auto !important; /* override fixed 900px height calc */
    min-height:0 !important;
  }
  .nav-links.open{
    transform:translateX(0) !important;
    box-shadow:8px 0 24px -12px rgba(15,18,16,0.12) !important;
  }
  html.nav-open{ overflow:hidden !important; }
  html.nav-open body{ overscroll-behavior:contain !important; }

  /* Top-level items — COMPACT 52-58px, divider-based, clean */
  .nav-links > li{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    flex:0 0 auto !important; /* CRITICAL: prevents flex shrink distribution that made 219px rows */
    align-self:stretch !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
  }
  /* Plain link rows (if any) */
  .nav-links > li > a:not(.mega-trigger){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:52px !important;
    height:auto !important;
    padding:15px 16px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:-0.01em !important;
    color:var(--logo-blue) !important;
    background:#FFFFFF !important;
    border:none !important;
    border-bottom:1px solid #EDEEF0 !important;
    border-radius:0 !important;
    text-decoration:none !important;
    gap:12px !important;
  }
  /* Mega trigger — same compact row, full tappable, plus/minus on right */
  .has-mega{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    flex:0 0 auto !important;
  }
  .has-mega::before, .has-mega::after{ display:none !important; }
  .mega-trigger{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:52px !important;
    height:auto !important;
    padding:15px 16px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:-0.01em !important;
    color:var(--logo-blue) !important;
    background:#FFFFFF !important;
    border:none !important;
    border-bottom:1px solid #EDEEF0 !important;
    border-left:none !important; border-right:none !important; border-top:none !important;
    border-radius:0 !important;
    text-align:left !important;
    cursor:pointer !important;
    gap:12px !important;
    white-space:normal !important;
    position:relative !important;
    transition:background 0.16s, color 0.16s !important;
  }
  .mega-trigger:active{ background:#F8FAF8 !important; }
  .has-mega.mega-open > .mega-trigger{
    background:#F8FAF8 !important;
    color:var(--logo-blue) !important;
    border-bottom-color:#EDEEF0 !important;
  }
  /* Plus/minus indicator — small circular, fixed position, no shift */
  .mega-trigger .chev{
    margin-left:auto !important;
    flex-shrink:0 !important;
    width:22px !important;
    height:22px !important;
    border:none !important;
    border-radius:6px !important;
    background:#F2F3F1 !important;
    color:#6B6F68 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    opacity:1 !important;
    transform:none !important;
    font-size:0 !important;
    line-height:1 !important;
    transition:background 0.16s, color 0.16s !important;
  }
  .mega-trigger .chev::before, .mega-trigger .chev::after{
    content:'' !important;
    position:absolute !important;
    top:50% !important; left:50% !important;
    background:currentColor !important;
    transform:translate(-50%,-50%) !important;
    display:block !important;
    border-radius:1px !important;
  }
  .mega-trigger .chev::before{ width:9px !important; height:1.6px !important; }
  .mega-trigger .chev::after{ width:1.6px !important; height:9px !important; transition:opacity 0.18s, transform 0.18s !important; }
  .has-mega.mega-open > .mega-trigger .chev{
    background:var(--logo-blue) !important; color:#FFFFFF !important;
  }
  .has-mega.mega-open > .mega-trigger .chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }

  /* Remove desktop chevron remnants */
  .mega-trigger .chev{ font-size:0 !important; }

  /* Mega panels — inline accordion, max-height 0 when closed, compact when open */
  .mega-panel{
    position:static !important;
    width:auto !important; max-width:none !important;
    transform:none !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:#F8FAF8 !important;
    border-top:1px solid #EDEEF0 !important;
    border-bottom:1px solid #EDEEF0 !important;
    padding:0 !important; margin:0 !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    max-height:0 !important; overflow:hidden !important;
    transition:max-height 0.32s cubic-bezier(.2,.7,.3,1) !important;
    display:block !important;
  }
  .has-mega.mega-open .mega-panel{
    max-height:3200px !important;
    padding:6px 0 8px !important;
  }
  /* Generic single-col panels (Digital Marketing, Why DP) — clean divider list, no cards */
  .mega-col{ padding:0 !important; }
  .mega-col ul{ gap:0 !important; display:flex !important; flex-direction:column !important; }
  .mega-col a{
    display:flex !important;
    align-items:center !important;
    padding:9px 16px 9px 32px !important;
    min-height:40px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    font-weight:500 !important;
    line-height:1.45 !important;
    color:var(--logo-blue) !important;
    background:transparent !important;
    border:none !important; border-radius:0 !important;
    position:relative !important;
    transition:background 0.14s, color 0.14s !important;
    text-decoration:none !important;
  }
  .mega-col a::before{
    content:'' !important;
    position:absolute !important; left:16px !important; top:50% !important;
    width:4px !important; height:4px !important; border-radius:50% !important;
    background:var(--logo-blue) !important; transform:translateY(-50%) !important; display:block !important;
  }
  .mega-col a:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; }
  .mega-col a:hover::before{ background:var(--logo-blue) !important; }
  .mega-col-title{
    padding:8px 16px 6px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--logo-blue) !important;
    font-weight:700 !important;
    border-bottom:1px solid #EDEEF0 !important;
  }
  .has-submenu{ position:relative !important; display:flex !important; flex-direction:column !important; width:100% !important; flex:0 0 auto !important; }
  .mega-link-parent{
    width:100% !important;
    display:flex !important; align-items:center !important; justify-content:flex-start !important;
    gap:10px !important;
    padding:11px 16px !important;
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; font-weight:600 !important; line-height:1.45 !important;
    color:var(--logo-blue) !important;
    background:transparent !important;
    border:none !important; border-radius:0 !important;
    text-align:left !important; cursor:pointer !important;
    white-space:normal !important;
  }
  .mega-link-parent .sub-chev{
    margin-left:auto !important; flex-shrink:0 !important;
    width:20px !important; height:20px !important;
    background:#EDEEF0 !important; color:#6B6F68 !important; border-radius:6px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    position:relative !important; border:none !important; transform:none !important;
    font-size:0 !important; opacity:1 !important;
  }
  .mega-link-parent .sub-chev::before, .mega-link-parent .sub-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important; border-radius:1px !important;
  }
  .mega-link-parent .sub-chev::before{ width:8px !important; height:1.4px !important; }
  .mega-link-parent .sub-chev::after{ width:1.4px !important; height:8px !important; transition:opacity 0.18s, transform 0.18s !important; }
  .has-submenu.is-open > .mega-link-parent .sub-chev,
  .has-submenu.submenu-open > .mega-link-parent .sub-chev{ background:var(--logo-blue) !important; color:#fff !important; }
  .has-submenu.is-open > .mega-link-parent .sub-chev::after,
  .has-submenu.submenu-open > .mega-link-parent .sub-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }
  .has-submenu.is-open > .mega-link-parent,
  .has-submenu.submenu-open > .mega-link-parent{ color:var(--logo-blue) !important; background:#FFFFFF !important; }

  .submenu-panel{
    position:static !important; width:auto !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:#EFEFF1 !important;
    border-top:1px solid #E6E8DF !important; border-bottom:1px solid #E6E8DF !important;
    padding:0 !important; margin:0 !important;
    max-height:0 !important; overflow:hidden !important;
    opacity:1 !important; visibility:visible !important;
    transition:max-height 0.28s ease !important;
  }
  .has-submenu.is-open .submenu-panel,
  .has-submenu.submenu-open .submenu-panel{ max-height:800px !important; padding:6px 0 !important; }
  .submenu-panel ul{ gap:0 !important; display:flex !important; flex-direction:column !important; }
  .submenu-panel a{
    padding:8px 16px 8px 32px !important;
    min-height:38px !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; line-height:1.45 !important; font-weight:500 !important;
    color:var(--logo-blue) !important;
    position:relative !important;
  }
  .submenu-panel a::before{
    content:'' !important; position:absolute !important; left:16px !important; top:50% !important;
    width:4px !important; height:4px !important; border-radius:50% !important;
    background:var(--logo-blue) !important; transform:translateY(-50%) !important; display:block !important;
  }

  /* EdTech mega — compact, divider-driven, NO cards, Academian hierarchy */
  .mega-panel-edtech{
    position:static !important; left:auto !important; right:auto !important; transform:none !important;
    width:auto !important; max-width:none !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:#F8FAF8 !important;
    border-top:1px solid #EDEEF0 !important; border-bottom:1px solid #EDEEF0 !important;
    padding:0 !important; margin:0 !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    max-height:0 !important; overflow:hidden !important;
    transition:max-height 0.34s cubic-bezier(.2,.7,.3,1) !important;
  }
  .has-mega[data-mega="edtech"].mega-open .mega-panel-edtech,
  .has-mega[data-mega="techtrends"].mega-open .mega-panel-edtech{
    max-height:5000px !important;
    padding:8px 0 10px !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important;
  }
  .edtech-mega{
    flex-direction:column !important; min-height:0 !important; max-height:none !important;
    gap:0 !important; overflow:visible !important;
    display:flex !important;
  }
  .edtech-left{
    width:100% !important; background:transparent !important; border-right:none !important;
    padding:0 12px !important; gap:0 !important; overflow:visible !important;
    display:flex !important; flex-direction:column !important;
  }
  /* Category rows — compact 44px, subtle divider, plus indicator, NOT cards */
  .edtech-cat{
    width:100% !important;
    padding:11px 12px !important;
    margin:0 !important;
    border:none !important;
    border-bottom:1px solid #EDEEF0 !important;
    border-radius:0 !important;
    background:transparent !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; font-weight:600 !important; line-height:1.35 !important;
    letter-spacing:0 !important; text-transform:none !important;
    min-height:44px !important; height:auto !important;
    gap:10px !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    color:var(--logo-blue) !important;
    transition:background 0.14s, color 0.14s !important;
    box-shadow:none !important;
  }
  .edtech-cat:last-child{ border-bottom:none !important; }
  .edtech-cat:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; }
  .edtech-cat.is-active{
    background:#FFFFFF !important; color:var(--logo-blue) !important;
    border-bottom-color:#EDEEF0 !important; border-left:none !important;
    box-shadow:none !important; font-weight:700 !important;
  }
  .edtech-cat .cat-chev{
    width:20px !important; height:20px !important;
    background:#F2F3F1 !important; color:#6B6F68 !important; border-radius:6px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    border:none !important; transform:none !important; font-size:0 !important; opacity:1 !important;
    flex-shrink:0 !important; position:relative !important;
  }
  .edtech-cat .cat-chev::before, .edtech-cat .cat-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important; border-radius:1px !important;
  }
  .edtech-cat .cat-chev::before{ width:8px !important; height:1.4px !important; }
  .edtech-cat .cat-chev::after{ width:1.4px !important; height:8px !important; transition:opacity 0.16s, transform 0.16s !important; }
  .edtech-cat.is-active .cat-chev{ background:var(--logo-blue) !important; color:#fff !important; }
  .edtech-cat.is-active .cat-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }
  .edtech-cat .cat-chev{ font-size:0 !important; } /* hide old glyph */

  .edtech-right{
    padding:0 !important; margin:0 !important; background:transparent !important; overflow:visible !important;
  }
  .edtech-pane{ padding:0 !important; display:none !important; }
  .edtech-pane.is-active{ display:block !important; }
  .edtech-pane-title{ display:none !important; }
  .edtech-pane ul{ gap:0 !important; display:flex !important; flex-direction:column !important; }
  .edtech-pane.pane-grid ul, .edtech-pane.pane-grid.pane-grid-2col ul{
    display:flex !important; flex-direction:column !important; gap:0 !important; grid-template-columns:1fr !important;
  }
  /* Pane links — flat rows with left indent and divider, NOT cards */
  .edtech-pane a{
    display:flex !important; align-items:center !important;
    padding:8px 16px 8px 28px !important;
    min-height:40px !important;
    margin:0 !important;
    border:none !important; border-bottom:1px solid #EDEEF0 !important;
    border-radius:0 !important; background:transparent !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; line-height:1.45 !important; font-weight:500 !important;
    color:var(--logo-blue) !important; position:relative !important;
    transition:background 0.14s, color 0.14s !important;
    text-decoration:none !important;
  }
  .edtech-pane a::before{
    content:'' !important; position:absolute !important; left:16px !important; top:50% !important;
    width:4px !important; height:4px !important; border-radius:50% !important;
    background:var(--logo-blue) !important; transform:translateY(-50%) !important; display:block !important;
  }
  .edtech-pane a:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; text-decoration:none !important; }
  .edtech-pane a:last-child{ border-bottom:none !important; }
  .edtech-pane .has-submenu{ margin:0 !important; width:100% !important; max-width:none !important; flex:0 0 auto !important; }
  .edtech-sub-btn{
    width:100% !important; display:flex !important; align-items:center !important; justify-content:flex-start !important;
    gap:10px !important;
    padding:10px 16px !important; margin:0 !important;
    border:none !important; border-bottom:1px solid #EDEEF0 !important; border-radius:0 !important;
    background:transparent !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; font-weight:600 !important; line-height:1.35 !important;
    color:var(--logo-blue) !important; min-height:44px !important; height:auto !important;
    text-align:left !important; cursor:pointer !important;
    transition:background 0.14s, color 0.14s !important;
  }
  .edtech-sub-btn:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; }
  .has-submenu.is-open > .edtech-sub-btn{ color:var(--logo-blue) !important; background:#FFFFFF !important; }
  .edtech-sub-btn .sub-chev{
    margin-left:auto !important; flex-shrink:0 !important;
    width:20px !important; height:20px !important;
    background:#F2F3F1 !important; color:#6B6F68 !important; border-radius:6px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    border:none !important; transform:none !important; font-size:0 !important; opacity:1 !important; position:relative !important;
  }
  .edtech-sub-btn .sub-chev::before, .edtech-sub-btn .sub-chev::after{
    content:'' !important; position:absolute !important; top:50% !important; left:50% !important;
    background:currentColor !important; transform:translate(-50%,-50%) !important; display:block !important; border-radius:1px !important;
  }
  .edtech-sub-btn .sub-chev::before{ width:8px !important; height:1.4px !important; }
  .edtech-sub-btn .sub-chev::after{ width:1.4px !important; height:8px !important; transition:opacity 0.16s, transform 0.16s !important; }
  .has-submenu.is-open > .edtech-sub-btn .sub-chev{ background:var(--logo-blue) !important; color:#fff !important; }
  .has-submenu.is-open > .edtech-sub-btn .sub-chev::after{ opacity:0 !important; transform:translate(-50%,-50%) scaleY(0) !important; }

  .edtech-submenu-flyout{
    position:static !important; transform:none !important; width:auto !important;
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:#EFEFF1 !important;
    border-top:1px solid #E6E8DF !important; border-bottom:1px solid #E6E8DF !important;
    padding:0 !important; margin:0 !important;
    max-height:0 !important; overflow:hidden !important; opacity:1 !important; visibility:visible !important;
    transition:max-height 0.26s ease !important;
    border-left:none !important;
  }
  .edtech-pane .has-submenu.is-open .edtech-submenu-flyout{
    max-height:800px !important; padding:4px 0 !important;
    border-left:none !important;
  }
  .edtech-submenu-flyout ul{ display:flex !important; flex-direction:column !important; gap:0 !important; grid-template-columns:1fr !important; }
  .edtech-submenu-flyout a{
    background:transparent !important; border:none !important; border-bottom:1px solid #E8EAE8 !important;
    padding:7px 16px 7px 40px !important; min-height:38px !important; margin:0 !important; border-radius:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:0.92rem !important; line-height:1.45 !important; color:var(--logo-blue) !important;
  }
  .edtech-submenu-flyout a::before{ left:24px !important; width:3px !important; height:3px !important; background:var(--logo-blue) !important; }
  .edtech-submenu-flyout a:last-child{ border-bottom:none !important; }
  .edtech-submenu-flyout a:hover{ background:#FFFFFF !important; color:var(--logo-blue) !important; }

  /* Search panel — compact under header */
  .search-panel{
    position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
    background:#FFFFFF !important;
    border-top:1px solid #EDEEF0 !important; border-bottom:1px solid #EDEEF0 !important;
    box-shadow:0 8px 24px -16px rgba(15,18,16,0.12) !important;
    padding:12px 0 14px !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transform:translateY(-6px) !important;
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s !important;
    z-index:205 !important;
  }
  header.search-open .search-panel{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; }

  /* Scrollbar polish */
  .nav-links::-webkit-scrollbar{ width:6px !important; }
  .nav-links::-webkit-scrollbar-thumb{ background:#DDE0D4 !important; border-radius:100px !important; }
}

/* Narrow refinements 320-480 — keep compact, maintain 56-64 header & 44px touch */
@media (max-width:600px){
  .nav{ height:56px !important; min-height:56px !important; padding:0 14px !important; }
  .logo-img{ height:28px !important; }
  .mega-trigger, .nav-links > li > a:not(.mega-trigger){ min-height:52px !important; padding:14px 14px !important; font-family:'Inter', sans-serif !important; font-size:0.92rem !important; color:var(--logo-blue) !important; }
  .edtech-cat{ min-height:44px !important; padding:10px 12px !important; font-family:'Inter', sans-serif !important; font-size:0.92rem !important; color:var(--logo-blue) !important; }
}
@media (max-width:400px){
  .nav{ height:56px !important; min-height:56px !important; padding:0 12px !important; gap:8px !important; }
  .logo-img{ height:26px !important; }
  .search-toggle, .burger{ width:40px !important; height:40px !important; }
}
@media (max-width:360px){
  .nav{ height:56px !important; min-height:56px !important; padding:0 10px !important; }
  .logo-img{ height:24px !important; max-width:120px !important; }
  .search-toggle, .burger{ width:40px !important; height:40px !important; }
}
@media (max-width:320px){
  .nav{ height:56px !important; min-height:56px !important; padding:0 8px !important; }
  .logo-img{ height:22px !important; }
  .search-toggle, .burger{ width:40px !important; height:40px !important; }
}