/* Repairs are scoped to the existing mobile breakpoint; desktop rules stay intact. */
@media (max-width:900px) {
  html {overflow-x:clip}
  .wrap,.hero-grid>*,.svc-hero-grid>*,.contact-grid>*,.foot-grid>*,.two>* {min-width:0}
  .wrap {width:100%}
  .hero.hero-video {
    padding-top:120px;padding-bottom:110px;min-height:100vh;min-height:100svh;
    isolation:isolate;
  }
  .hero-video .hero-bg {z-index:0;object-fit:cover;object-position:center;width:100%;height:100%;pointer-events:none}
  .hero-video .hero-grid,.hero-video .scroll-hint {position:relative;z-index:1}
  .hero-video .scroll-hint {position:absolute;bottom:22px}
  .hero-video .hero-right {display:none}
  .hero.hero-video .hero-title {font-size:clamp(2rem,8.6vw,3.4rem);line-height:1.06;letter-spacing:0}
  .hero-video .hero-grid {gap:0}
  .hero-video .type-line {display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;align-items:center;position:relative}
  .hero-video #typeService {white-space:normal;overflow-wrap:normal;min-height:3em;display:flex;align-items:center;line-height:1.5}
  .hero-video .type-line>.cursor {position:absolute;right:-7px;bottom:8px}
  .hero-video .ticker {width:100%;font-size:clamp(.72rem,2.6vw,1rem)}
  .hero-actions .btn {min-width:0;max-width:100%}
  .foot-col a,.ci-row a {overflow-wrap:anywhere}
  .nav-inner {position:relative}
  .nav-links {position:absolute;top:calc(100% + 10px);left:0;right:0;max-height:calc(100svh - 100px);visibility:hidden}
  .nav-links.open {visibility:visible}
  .brand {min-width:0}
  .burger {flex-shrink:0}
  .dropdown a>span:last-child {min-width:0}
  .dropdown a b,.dropdown a span {white-space:normal}
  .svc-grid.grid4,.why-grid,.blog-grid,.proc-grid,.feat-grid,.pkg-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .svc-grid>*,.why-grid>*,.blog-grid>*,.proc-grid>*,.feat-grid>*,.pkg-grid>* {min-width:0}
  .tst-rotator {display:grid;min-height:0}
  .tst-slide {position:relative;inset:auto;grid-area:1/1;min-width:0}
  input,textarea,select {max-width:100%;min-width:0;font-size:16px}
  .faq-q {gap:12px}
}
@media (max-width:600px) {
  .hero.hero-video {padding-top:108px}
  .hero-video .type-wrap {padding:14px!important}
  .svc-grid.grid4,.why-grid,.blog-grid,.proc-grid,.feat-grid,.pkg-grid {grid-template-columns:minmax(0,1fr)!important}
  .hero-tagline .tl-lead {letter-spacing:.3em}
  .hero-agency {line-height:1.35}
}
@media (max-width:900px) {
  .feat-card .fimg {height:auto}
  .dropdown {visibility:hidden}
  .has-dropdown.open .dropdown {visibility:visible}
}

/* Portrait mobile hero: original KD artwork above a single overlaid brand composition. */
@media (max-width:600px) {
  .hero.hero-video {
    --scene-height:min(93.75vw,49svh);
    display:block;min-height:100svh;
    padding-top:calc(50px + var(--scene-height) - 32px);padding-bottom:34px;
    background:#061121;
  }
  .hero-video .hero-bg {
    top:50px;bottom:auto;height:var(--scene-height);aspect-ratio:auto;
    object-fit:contain;object-position:center;background:#061121;
  }
  .hero-video .hero-scrim {
    display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(to bottom,transparent calc(50px + var(--scene-height) - 105px),#061121 calc(50px + var(--scene-height) + 12px));
  }
  .hero-video .hero-grid {display:block}
  .hero-video .hero-copy {width:100%;max-width:500px;margin:auto;text-align:center}
  .hero.hero-video .hero-title {font-size:2rem;line-height:1;margin:4px 0 12px;letter-spacing:0}
  .hero-title .hero-brand-mark {
    display:block;font-size:clamp(3.6rem,16vw,4.75rem);font-weight:700;letter-spacing:-.06em;line-height:.98;
    background:linear-gradient(175deg,#fff 8%,#bbd4e9 43%,#7296bd 62%,#eef8ff 94%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 14px #2696e53b);
  }
  .hero-title .hero-brand-name {
    display:block;font-size:clamp(1.3rem,6.2vw,1.7rem);letter-spacing:.08em;line-height:1.35;margin-top:3px;
    background:linear-gradient(180deg,#fff,#b8cde1);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-video .hero-badge {margin-bottom:9px;padding:5px 11px;font-size:.58rem;letter-spacing:.1em}
  .hero-video .hero-agency {font-size:clamp(.96rem,4.3vw,1.15rem);letter-spacing:.06em;line-height:1.3;margin:auto}
  .hero-video .hero-tagline {margin:5px 0;gap:12px}
  .hero-video .hero-tagline .tl-lead {font-size:.6rem;letter-spacing:.35em}
  .hero-video .type-wrap {margin-top:16px;padding:10px 12px!important;border-radius:14px;text-align:left}
  .hero-video .type-line {font-size:.84rem;gap:8px}
  .hero-video #typeService {min-height:2.7em}
  .hero-video .type-label {font-size:.65rem}
  .hero-video .ticker {font-size:clamp(.65rem,2.7vw,.86rem)}
  .hero-video .hero-actions {margin-top:18px;gap:10px;justify-content:center}
  .hero-video .hero-actions .btn {min-width:0;flex:1 1 auto;padding:12px 16px;font-size:.8rem}
  .hero-video .scroll-hint {position:relative;left:auto;bottom:auto;transform:none;margin-top:18px;font-size:.6rem;gap:5px}
  .hero-video .scroll-hint .mouse {height:24px;width:17px}
  body[data-page="home"] .nav:not(.scrolled) .nav-inner {background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  body[data-page="home"] .nav:not(.scrolled) .brand b,
  body[data-page="home"] .nav:not(.scrolled) .brand .sub {color:#eef6ff}
  body[data-page="home"] .nav:not(.scrolled) .burger {border:1px solid #c9e1ff40;border-radius:50%;width:42px;height:42px;align-items:center;justify-content:center;background:#0a1b3070}
  body[data-page="home"] .nav:not(.scrolled) .burger span {background:#eef6ff;width:20px}
}
@media(max-width:900px) {
  .video-play {position:absolute;z-index:5;top:100px;right:18px;border:1px solid #ffffff80;border-radius:99px;padding:12px 18px;background:#10203bea;color:white;font:600 .85rem var(--font);cursor:pointer}
  .video-play[hidden] {display:none}
  .svc-card {isolation:isolate;touch-action:pan-y}
  .svc-card .curtain {z-index:0;pointer-events:none;transform:translate3d(-101%,0,0);transition:transform .65s cubic-bezier(.22,.61,.36,1);border-radius:inherit}
  .svc-card>:not(.curtain) {position:relative;z-index:1}
  .svc-card:hover .curtain {transform:translate3d(-101%,0,0)}
  .svc-card.curtain-open .curtain {transform:translate3d(0,0,0)}
  .svc-card:hover h3 {color:#16203a}
  .svc-card:hover p {color:#55617a}
  .svc-card:hover .more {color:var(--blue)}
  .svc-card:hover .ic-box,.svc-card:hover .ic-box svg {background:var(--grad);color:#fff}
  .svc-card.curtain-open h3,.svc-card.curtain-open p,.svc-card.curtain-open .more {color:#fff}
  .svc-card.curtain-open .ic-box,.svc-card.curtain-open .ic-box svg {background:var(--gold-sheen);color:#241a04}
  .svc-card .more {padding:10px 0;min-height:44px;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
  .svc-card .more:focus-visible {outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
}

.mobile-service-note {display:none}
@media(max-width:900px){
  #services .sec-head p:not(.mobile-service-note) {display:none}
  #services .mobile-service-note {display:block}
}

/* Consistent phone typography across every page, without changing desktop type. */
@media(max-width:600px){
  .wrap {padding-inline:20px}
  .page-head h1,.svc-hero h1 {font-size:clamp(1.9rem,8.2vw,2.7rem);line-height:1.15;letter-spacing:-.025em;overflow-wrap:normal;hyphens:none}
  .sec-head h2,.svc-info h2,.contact-info h2,.hero-grid h2:not(.hero-agency) {font-size:clamp(1.65rem,7.2vw,2.1rem);line-height:1.2;letter-spacing:-.025em;overflow-wrap:normal;hyphens:none}
  body[data-page="home"] .cta-band h2,.cta-band h2 {font-size:clamp(1.65rem,7.2vw,2.2rem);line-height:1.22;overflow-wrap:normal;hyphens:none}
  .sec-head {margin-bottom:32px}
  .sec-head p {font-size:.96rem;line-height:1.7}
  .hero-video .hero-grid {width:100%;max-width:100%;flex:none}
  .hero-video .hero-actions {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-video .hero-actions .btn {padding:13px 10px;font-size:.78rem;gap:6px;white-space:nowrap}
  .hero-video .type-line {grid-template-columns:92px minmax(0,1fr);gap:8px}
  .hero-video .type-label {padding:5px 6px;white-space:nowrap;text-align:center;font-size:.61rem;letter-spacing:.08em}
  .hero-video .ticker {font-size:clamp(.68rem,2.9vw,.9rem)}
}

@media(max-width:600px){
  .hero-video .hero-bg {background:#061121 url('img/hero-mobile-fast.webp') center/contain no-repeat}
}
@media(max-width:900px){
  .hero-video .hero-agency {margin-inline:auto}
}
