@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 — MPS-inspired clean corporate (Digital Pathway branding) ================= */
header{
  position:sticky; top:0; z-index:210;
  background:#FFFFFF;
  border-bottom:1px solid rgba(15,18,16,0.08);
  transition:box-shadow 0.28s ease, border-color 0.28s 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:84px;
  max-width:1320px; margin:0 auto; padding:0 32px;
  position:relative;
}
.nav-right{
  display:flex; align-items:center; gap:18px; 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 — 4 items, evenly spaced, vertically centered, visually consistent */
.nav-links{
  display:flex; gap:28px; align-items:center;
}
.nav-links li{display:flex; align-items:center;}
.nav-links a{
  font-size:0.95rem; font-weight:500; color:rgba(15,18,16,0.88);
  position:relative; padding:6px 0;
  transition:color 0.20s ease;
  line-height:1.2; letter-spacing:-0.01em;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.nav-links a.active{color:var(--logo-blue);}
.nav-links a::after{
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background:var(--logo-blue); transition:width 0.25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
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;}
.mega-trigger{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:none; font-family:inherit;
  font-size:0.95rem; font-weight:500; color:rgba(15,18,16,0.88);
  padding:6px 2px; cursor:pointer; position:relative;
  transition:color 0.20s ease; line-height:1.2; letter-spacing:-0.01em; white-space:nowrap;
}
.mega-trigger::after{
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px;
  background:var(--logo-blue); transition:width 0.25s ease;
}
.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.22s ease; opacity:0.62;
}
.has-mega:hover .mega-trigger,
.has-mega.mega-open .mega-trigger{color:var(--logo-blue);}
.has-mega:hover .mega-trigger::after,
.has-mega.mega-open .mega-trigger::after{width:100%;}
.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:14px;}

/* Search — MPS-style icon at far right, aligned with nav */
.search-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid transparent; background:transparent;
  color:#0F1210; cursor:pointer; flex-shrink:0;
  transition:background 0.20s ease, border-color 0.20s ease, color 0.20s ease, transform 0.15s ease;
}
.search-toggle:hover{ background:rgba(15,18,16,0.06); border-color:rgba(15,18,16,0.06); color:var(--logo-blue); }
.search-toggle:active{ transform:scale(0.96); }
.search-toggle svg{ width:18px; height:18px; display:block; }
.search-toggle[aria-expanded="true"]{ background:var(--logo-blue-soft); border-color:var(--logo-blue-ring); color:var(--logo-blue); }

/* Search panel — compact overlay under header */
.search-panel{
  position:absolute; top:100%; left:0; right:0;
  background:#FFFFFF;
  border-top:1px solid rgba(15,18,16,0.08);
  border-bottom:1px solid rgba(15,18,16,0.08);
  box-shadow:0 16px 40px -20px rgba(15,18,16,0.14), 0 6px 16px -10px rgba(15,18,16,0.08);
  padding:18px 0 20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  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:calc(100% + 10px); left:0;
  transform:translateY(-6px);
  width:310px;
  background:var(--white);
  border:1px solid var(--cream-line);
  border-top:2px solid var(--logo-blue);
  border-radius:14px;
  box-shadow:0 16px 32px -14px rgba(14,27,38,0.16), 0 6px 14px -6px rgba(14,27,38,0.09);
  padding:12px;
  display:block; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.20s ease, transform 0.20s ease, visibility 0.20s;
  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:translateY(0);}
.mega-col ul{display:flex; flex-direction:column; gap:1px;}
.mega-col a{
  display:block; font-size:0.84rem; font-weight:400; color:var(--ink-soft);
  padding:7px 9px; margin:0 -9px; border-radius:8px;
  transition:background 0.18s, color 0.18s; line-height:1.45;
}
.mega-col a:hover{background:var(--logo-blue-soft); color:var(--logo-blue);}
.has-submenu{position:relative; display:flex; flex-direction:column;}
.mega-link-parent{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:0.84rem; font-weight:500; color:var(--ink);
  padding:7px 9px; margin:0 -9px; border-radius:8px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; font-family:inherit;
  transition:background 0.18s, color 0.18s;
  position:relative;
}
.mega-link-parent:hover{background:var(--logo-blue-soft); color:var(--logo-blue);}
.mega-link-parent[aria-expanded="true"]{background:var(--logo-blue-soft); 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.55;
  font-size:0.95rem; line-height:1;
  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:#F8F9F7;
  border:none;
  border-left:2px solid transparent;
  border-radius:8px;
  box-shadow:none;
  padding:0 0 0 10px;
  margin:2px 0 2px 6px;
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  max-height:0; overflow:hidden;
  transition:max-height 0.30s cubic-bezier(.2,.7,.3,1), padding 0.28s ease, margin 0.28s ease, border-color 0.28s ease, background 0.28s 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:6px 0 6px 10px;
  margin:4px 0 4px 6px;
  border-left-color:var(--logo-blue-ring);
  background:#F8F9F7;
}
/* 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:var(--logo-blue-soft); color:var(--logo-blue);
}
.submenu-panel ul{display:flex; flex-direction:column; gap:1px;}
.submenu-panel a{
  display:flex; align-items:center; gap:7px;
  font-size:0.82rem; font-weight:400; color:var(--ink-soft);
  padding:5px 8px; border-radius:7px; transition:background 0.18s, color 0.18s; line-height:1.35;
}
.submenu-panel a::before{content:''; width:4px; height:4px; border-radius:50%; background:var(--cream-line); flex-shrink:0; transition:background 0.16s;}
.submenu-panel a:hover{background:var(--white); color:var(--logo-blue); box-shadow:0 1px 4px rgba(14,27,38,0.05);}
.submenu-panel a:hover::before{background:var(--logo-blue);}
.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:1px;
  padding:0 0 0 10px;
}
.submenu-panel.submenu-2col ul{flex:none; min-width:0; display:flex; flex-direction:column; gap:1px;}
/* 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:8px 6px 8px 10px;}
@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 20px 44px -16px rgba(14,27,38,0.18), 0 6px 16px -8px rgba(14,27,38,0.10);
  padding:10px;
}
.mega-premium .mega-col-title{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.72rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);
  padding:2px 9px 8px; margin-bottom:4px; border-bottom:1px solid var(--cream-line);
}
.mega-premium .mega-col a,
.mega-premium .submenu-panel a{
  display:flex; align-items:center; gap:7px;
  padding:6px 8px; margin:0 -8px; border-radius:7px;
  font-size:0.84rem; line-height:1.4;
}
.mega-premium .mega-col a::before,
.mega-premium .submenu-panel a::before{
  content:''; width:4px; height:4px; border-radius:50%; background:var(--cream-line);
  flex-shrink:0; transition:background 0.16s;
}
.mega-premium .mega-col a:hover::before,
.mega-premium .submenu-panel a:hover::before{background:var(--logo-blue);}
.mega-premium .mega-col ul{gap:2px;}
.mega-premium .mega-link-parent{
  padding:6px 8px; margin:0 -8px; border-radius:7px; font-size:0.84rem;
}
.mega-premium .submenu-panel{padding:0 0 0 10px; background:#F8F9F7;}
.mega-premium .submenu-panel ul{gap:2px;}
.mega-premium .has-submenu:hover .submenu-panel,
.mega-premium .has-submenu.is-open .submenu-panel{padding:6px 0 6px 10px;}
/* 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:calc(100% + 10px); left:0;
  transform:translateY(-6px);
  width:min(720px, calc(100vw - 32px));
  background:var(--white);
  border:1px solid var(--cream-line); border-top:2px solid var(--logo-blue);
  border-radius:14px;
  box-shadow:0 20px 44px -16px rgba(14,27,38,0.18), 0 6px 16px -8px rgba(14,27,38,0.10);
  padding:0; display:block; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.20s ease, transform 0.20s ease, visibility 0.20s;
  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:calc(100% + 10px);
    left:0;
    right:auto;
    width:760px;
    max-width:calc(100vw - 32px);
    transform:translateY(-6px);
    border-radius:14px;
    box-shadow:0 20px 44px -16px rgba(14,27,38,0.18), 0 6px 16px -8px rgba(14,27,38,0.10);
    border:1px solid var(--cream-line);
    border-top:2px 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:translate(-50%,-6px);}
}
.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:translate(-50%,0);}
.edtech-mega{display:flex; min-height:200px; max-height:min(68vh, 520px); transition:min-height 0.18s ease; overflow:hidden; border-radius:13px;}
.edtech-left{
  width:242px; flex-shrink:0; background:#F8F9F7; border-right:1px solid var(--cream-line);
  padding:10px 8px; display:flex; flex-direction:column; gap:3px; 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:9px;
  padding:9px 10px 9px 11px; text-align:left; cursor:pointer;
  font-family:'Inter', sans-serif; font-weight:500; font-size:0.84rem; color:var(--ink-soft);
  transition:background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s; line-height:1.35;
  position:relative;
}
.edtech-cat:hover{background:var(--logo-blue-soft); color:var(--logo-blue); border-left-color:var(--logo-blue-ring);}
.edtech-cat.is-active{background:var(--white); color:var(--logo-blue); box-shadow:0 1px 8px rgba(14,27,38,0.07); border:1px solid var(--cream-line); border-left:3px solid var(--logo-blue); font-weight:600;}
.edtech-cat .cat-chev{
  width:5px; height:5px; flex-shrink:0; opacity:0;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(-45deg); transition:opacity 0.16s;
}
.edtech-cat.is-active .cat-chev{opacity:0.65;}
.edtech-cat:focus-visible{outline:2px solid var(--logo-blue); outline-offset:1px;}
.edtech-right{flex:1; padding:16px 18px; overflow-y:auto; background:var(--white);}
@media (min-width:1261px){
  .edtech-right{padding:22px 32px;}
}
.edtech-pane{display:none; animation:fadePane 0.18s ease;}
.edtech-pane.is-active{display:block;}
@keyframes fadePane{from{opacity:0; transform:translateX(4px);} to{opacity:1; transform:translateX(0);}}
.edtech-pane-title{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.72rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);
  padding-bottom:8px; border-bottom:1px solid var(--cream-line); margin-bottom:10px;
}
/* QBS-style: one clean vertical column, compact spacing, clear alignment.
   Pane-title + list + nested sub-sub lists all follow the same vertical rhythm. */
.edtech-pane ul{display:flex; flex-direction:column; gap:2px;}
/* Short categories (few sub-topics): 2-col grid keeps the right panel from
   looking empty, while still keeping nested sub-sub lists inside their cell. */
.edtech-pane.pane-grid ul{
  display:flex; flex-direction:column; gap:2px;
}
/* Grid cells must not let long link text overflow into the neighbouring
   column: min-width:0 lets the cell shrink to the grid track's width, and
   wrapping the anchor's text keeps long labels ("UI/UX, Wireframing &
   Product Prototyping") on multiple lines inside their own column instead
   of spilling over the item next to them. */
.edtech-pane.pane-grid ul > li{
  min-width:0;
}
.edtech-pane.pane-grid a{
  white-space:normal;
  word-break:break-word;
}
/* An item with a nested sub-submenu expands vertically when opened, which
   breaks the 2-col grid's row alignment and overlaps the neighbouring cell.
   Force it to span both columns so its expansion pushes rows below it
   down instead of colliding with the item next to it. */
.edtech-pane.pane-grid ul li.has-submenu{
  grid-column:1 / -1;
}
/* Vertical-first: panes stack in a single column by default. Only switch to
   a 2-column layout once the pane has enough short items to fill the space
   without crowding (5+ items, none of which open a nested submenu). */
.edtech-pane.pane-grid.pane-grid-2col ul{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2px 20px; align-content:start;
}
.edtech-pane a{
  display:flex; align-items:center; gap:7px;
  font-size:0.84rem; font-weight:400; color:var(--ink-soft);
  padding:6px 8px; margin:0 -8px; border-radius:7px;
  transition:background 0.16s, color 0.16s, box-shadow 0.16s; line-height:1.4;
}
.edtech-pane a:hover{background:var(--logo-blue-soft); color:var(--logo-blue);}
.edtech-pane a::before{content:''; width:4px; height:4px; border-radius:50%; background:var(--cream-line); flex-shrink:0; transition:background 0.16s;}
.edtech-pane a:hover::before{background:var(--logo-blue);}
/* 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-radius:7px;
  padding:6px 8px; margin:0 -8px; text-align:left;
  font-size:0.84rem; font-weight:500; color:var(--ink); cursor:pointer; font-family:inherit;
  transition:background 0.16s, color 0.16s;
}
.edtech-sub-btn:hover{background:var(--logo-blue-soft); color:var(--logo-blue);}
.edtech-sub-btn[aria-expanded="true"]{background:var(--logo-blue-soft); 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.55;
  font-size:0.95rem; line-height:1;
  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 — QBS-style inline nested list INSIDE its parent category,
   indented with a soft left accent + contained background, not a side flyout.
   Keeps hierarchy visually clear: Category > Sub-topic > Sub-sub topics. */
.edtech-submenu-flyout{
  position:static;
  background:#F8F9F7;
  border:none;
  border-left:2px solid transparent;
  border-radius:8px;
  box-shadow:none;
  padding:0 0 0 10px;
  margin:2px 0 2px 6px;
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  max-height:0; overflow:hidden;
  transition:max-height 0.30s cubic-bezier(.2,.7,.3,1), padding 0.28s ease, margin 0.28s ease, border-color 0.28s 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:400px;
  padding:6px 0 6px 10px;
  margin:4px 0 4px 6px;
  border-left-color:var(--logo-blue-ring);
  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:var(--logo-blue-soft); color:var(--logo-blue);
}
.edtech-submenu-flyout ul{display:flex; flex-direction:column; gap:1px;}
.edtech-submenu-flyout a{
  font-size:0.81rem; padding:5px 8px; margin:0; color:var(--ink-soft); line-height:1.35;
  display:flex; align-items:center; gap:7px;
}
.edtech-submenu-flyout a::before{width:4px; height:4px; background:var(--cream-line);}
.edtech-submenu-flyout a:hover{background:var(--white); color:var(--logo-blue);}
.edtech-submenu-flyout a:hover::before{background:var(--logo-blue);}

/* ===== 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{
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.78rem; font-weight:500; letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--clay-deep);
  margin-bottom:22px;
}
.eyebrow::before{
  content:''; width:22px; height:1.5px; background:var(--clay-deep);
}
.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;}
.center .eyebrow::before{display:none;}

/* ================= 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;
}

/* ================= 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 12px 40px -14px rgba(0,0,0,0.45), 0 4px 12px -6px rgba(0,0,0,0.22);}

/* ================= 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 — a big, soft, always-visible breathing ring (calm, easy
   feel per the reference screenshot, just larger and lighter).
   Unlike other pages, this ring shows even without hovering a link,
   so .cursor-glow's own opacity is forced to 1 here. */
body[data-page="about"] .cursor-glow{opacity:1;}
body[data-page="about"] .cursor-glow-inner{
  width:64px; height:64px;
  background:rgba(20,94,124,0.05);
  border:1px solid rgba(20,94,124,0.20);
  animation:cursorGlowBreatheAbout 3.2s ease-in-out infinite;
}
body[data-page="about"].cursor-grow .cursor-glow-inner{
  width:80px; height:80px;
  background:rgba(20,94,124,0.08);
}
@keyframes cursorGlowBreatheAbout{
  0%, 100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-50%) scale(1.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{
    padding:18px 2px; font-size:1.05rem; font-weight:600; width:100%;
    border-bottom:1px solid var(--cream-line);
    display:flex; align-items:center; justify-content:space-between;
    color:var(--ink);
  }
  .nav-links a.active{
    color:var(--clay-deep);
  }
  .nav-links a.active:not(.nav-cta)::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background:var(--clay-deep); 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.98rem;
    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{
    width:100%; padding:18px 2px; font-size:1.05rem; font-weight:600; color:var(--ink);
    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;}
  .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;}
  .mega-col a:hover{padding-left:10px;}
  .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;}
  .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;}

  .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-size:0.92rem; font-weight:600; text-transform:none; letter-spacing:0;}
  .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;}
  .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-size:0.88rem;}
  .edtech-sub-btn:hover{background:#fff;}
  .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);}

  /* +/- 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. */
}