/* ============================================================
   BREAKPOINTS
   1180  tighten header, 3-up team
   1000  nav → drawer, panels stack, grids go 2-up
   700   single column, mobile typography and touch targets
   400   small-phone tuning
   ============================================================ */

@media (max-width:1180px){
  .nav > ul{gap:.1rem}
  .nav-link{font-size:.875rem;padding-inline:.3rem}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.3fr repeat(3,1fr)}
  .footer-grid > .footer-col:last-child{grid-column:2 / -1}
}

@media (max-width:1000px){
  .nav-toggle{display:flex}
  .header-cta{display:none}

  /* ---------- mobile drawer ---------- */
  .nav{
    position:fixed;
    inset:var(--header-h) 0 auto;
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    margin:0;
    padding:var(--space-sm) var(--gutter) var(--space-xl);
    background:rgba(4,8,14,.98);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--color-border);
    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
  }
  body.nav-open{overflow:hidden}
  body.nav-open .nav{opacity:1;visibility:visible;transform:none}

  .nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-item{border-bottom:1px solid var(--color-border)}
  .nav-link{
    padding:.95rem .25rem;
    min-height:52px;
    font-size:1rem;
    justify-content:space-between;
    width:100%;
  }

  .submenu{
    position:static;
    translate:none;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
    min-width:0;
    padding:0 0 .6rem .85rem;
    background:none;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
  }
  .submenu::before{display:none}
  .nav-item.is-expanded > .submenu{display:block}
  .nav-item.is-expanded > .nav-link .chev{transform:rotate(180deg)}
  .submenu a{padding:.7rem .6rem;min-height:44px;display:flex;align-items:center;font-size:.94rem}

  .grid-3,.grid-2{grid-template-columns:repeat(2,1fr)}
  .slide{flex-basis:calc((100% - clamp(.9rem,1.4vw,1.35rem)) / 2)}

  .why-panel{grid-template-columns:1fr}
  .why-visual{order:-1;aspect-ratio:16/9}

  .faq-layout{grid-template-columns:1fr}
  .faq-aside{position:static}

  .contact-layout{grid-template-columns:1fr}
  .blog-layout:has(.blog-sidebar){grid-template-columns:1fr}

  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:1 / -1}
  .footer-grid > .footer-col:last-child{grid-column:auto}
}

@media (max-width:700px){
  :root{
    --header-h:62px;
    --section-y:clamp(2.75rem,10vw,3.75rem);
    --gutter:1.15rem;
  }

  .grid-3,.grid-2,.team-grid{grid-template-columns:1fr}
  .slide{flex-basis:100%}

  /* ---------- hero ---------- */
  .hero{
    min-height:auto;
    padding-block:calc(var(--header-h) + 2.75rem) 3.25rem;
  }
  .hero h1{
    font-size:clamp(2rem,8.6vw,2.75rem);
    letter-spacing:-.03em;
  }
  .hero-eyebrow{font-size:.95rem;margin-bottom:1rem}
  .hero-tagline{font-size:.85rem;letter-spacing:.08em;margin-bottom:1.5rem}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn,
  .page-hero__actions .btn{width:100%}
  .hero-scroll{display:none}
  .hero-glow{bottom:-70%}

  .page-hero{padding-block:calc(var(--header-h) + 2.25rem) 2.5rem}
  .page-hero h1{font-size:clamp(1.75rem,7.2vw,2.35rem)}
  .page-hero__subtitle{font-size:.98rem}
  .page-hero__actions{flex-direction:column}

  /* Left-align section heads on phones: centred short lines read poorly
     next to left-aligned card text below them. */
  .section-head.is-center{text-align:left}
  .section-head.is-center .eyebrow{justify-content:flex-start}
  .section-head.is-center .eyebrow::after{display:none}
  .section-head.is-center .lede{margin-inline:0}
  .section-title{font-size:clamp(1.6rem,6.4vw,2.1rem)}

  .domains-title{font-size:1.02rem;text-align:left}
  .domain-list{justify-content:flex-start}

  .card-media{aspect-ratio:16/9}
  .card-body{padding:1.15rem}
  .card-title{font-size:1.08rem}
  .card-text{font-size:.9rem}

  .why-panel{padding:1.15rem}

  /* Careers: photo above the quote, and never reorder on a phone. */
  .person{grid-template-columns:1fr;gap:1.25rem}
  .person:nth-child(even) .person__media{order:0}
  .person__media{aspect-ratio:1/1;max-width:200px}
  .person__name{font-size:1.5rem}
  .careers-statement__text{max-width:none;font-size:clamp(1.5rem,7vw,2.1rem)}
  .prose--center{text-align:left}
  .life-strip__item{flex-basis:76vw}
  .why-actions{flex-direction:column}
  .why-actions .btn{width:100%}

  .quote-meta{flex-wrap:wrap;gap:.65rem}
  .quote-logo{margin-left:0}
  .slider-controls{gap:.85rem}
  .slider-btn{width:44px;height:44px}

  .faq-q{padding:.95rem 1rem;font-size:.95rem;min-height:56px}
  .faq-aside{margin-bottom:1.5rem}

  .final-cta.has-media{min-height:auto;padding-block:clamp(4rem,16vw,6rem)}
  .final-cta h2{font-size:clamp(1.6rem,6.8vw,2.1rem)}

  .search-form{flex-direction:column}
  .search-form .btn{width:100%}

  .prose{font-size:1rem}
  .article-figure{border-radius:var(--radius-md)}

  .footer-grid{grid-template-columns:1fr;gap:1.75rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}

  /* Every tappable element clears the 44px minimum. */
  .socials a{width:44px;height:44px}
  .btn{min-height:46px}
  .domain-chip{min-height:40px}
}

@media (max-width:400px){
  .domain-chip{font-size:.8rem;padding:.45rem .85rem}
  .btn{padding:.8rem 1.15rem;font-size:.9rem}
  .brand .mark{width:34px;height:28px}
  .brand-text b{font-size:.88rem;letter-spacing:.1em}
  .brand-text span{font-size:.52rem}
  .card-icon{width:42px;height:42px}
}

/* Respect the operating system setting above everything else. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important;transition-delay:0s!important}
  /* Background footage is decorative; hide it rather than loop motion. */
  .media-bg__video,.media-bg__frame{display:none!important}
  .slider-track{transition:none!important}
  .faq-a{transition:none!important}
  .card:hover{transform:none}
  .card:hover .card-media__image{transform:none}
}

/* Coarse pointers get no hover-dependent affordances. */
@media (hover:none){
  .card:hover{transform:none}
  .card::before{opacity:.6}
}

@media print{
  .site-header,.site-footer,.final-cta,.slider-controls,.nav-toggle,.skip-link,.media-bg{display:none!important}
  body{background:#fff;color:#000}
  .prose{max-width:none}
}