/* ===================================================
   Simples Tech — folha de estilos
   =================================================== */

:root{
  --navy: #16234f;
  --navy-ink: #101a38;
  --blue: #4a9fe0;
  --blue-soft: #eaf4fd;
  --paper: #f7f9fc;
  --paper-alt: #ffffff;
  --line: #dde5f0;
  --text: #26314f;
  --text-soft: #5b6784;

  --font-head: "Archivo", sans-serif;
  --font-body: "Saira", sans-serif;
  --font-menu: "IBM Plex Sans", sans-serif;

  --max: 1080px;
  --hero-content-gap: 64px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--font-menu);
  color:var(--navy-ink);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}

h1{ font-size:clamp(2.1rem, 4.5vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size:1.15rem; }

p{ margin:0 0 1em; color:var(--text); max-width:62ch; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:0;
  font-family:var(--font-menu); font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em;
  text-decoration:none !important;
}
.btn::after{ content:">"; font-weight:700; }
.btn-primary{ background:var(--navy-ink); color:#fff !important; }
.btn-primary:hover{ background:var(--blue); color:var(--navy-ink) !important; }
.btn-outline{ border:1.5px solid var(--navy-ink); color:var(--navy-ink) !important; }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue) !important; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:96px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:54px; width:auto; }

.nav-links{
  display:flex; align-items:center; gap:clamp(12px, 2.3vw, 30px); list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family:var(--font-menu);
  color:var(--navy-ink); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.nav-links a.active{ color:var(--blue); font-weight:600; }

.nav-cta{
  font-family:var(--font-menu);
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:var(--navy-ink) !important;
  padding:11px 22px; border-radius:0; font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em;
  border:1.5px solid var(--navy-ink);
  text-decoration:none !important;
}
.nav-cta::after{ content:">"; font-weight:700; }
.nav-cta:hover{ background:var(--navy-ink); color:#fff !important; }

.menu-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px; position:relative; flex-shrink:0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; position:absolute; left:4px; right:4px; height:2px; background:var(--navy-ink);
}
.menu-toggle span{ top:21px; }
.menu-toggle span::before{ top:-8px; }
.menu-toggle span::after{ top:8px; }

/* ---------- Hero (painel + menu lateral) ---------- */
.hero{
  background:var(--paper); padding:36px 0 0;
}
.hero-row{
  display:grid; grid-template-columns:1fr 220px; gap:6px;
  align-items:stretch; background:#fff;
}
.hero-row.no-sidebar{ grid-template-columns:1fr; }
.hero-panel-grey{
  position:relative; overflow:hidden; border-radius:0;
  min-height:460px;
}
.hero-slide{
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center right;
  display:flex; align-items:center;
}
.hero-slide.active{ z-index:2; }
.hero-slide-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(238,241,246,.97) 0%, rgba(238,241,246,.82) 32%, rgba(238,241,246,.15) 58%, rgba(238,241,246,0) 72%);
}
.hero-slide-copy{
  position:relative; z-index:2; max-width:460px; padding:0 24px 0 56px;
}
.hero-slide-copy :is(h1, h2){ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:14px; }
.hero-slide-copy .accent{ color:var(--blue); }
.hero-slide-copy p.lead{ color:var(--text-soft); max-width:36ch; margin-bottom:22px; }
.hero-about{ display:block; margin-top:14px; }
.hero-panel-grey:has(.hero-about){ min-height:520px; }
.hero-dots{
  position:absolute; left:56px; bottom:22px; z-index:3; display:flex; gap:8px;
}
.hero-dots .dot{
  width:8px; height:8px; border-radius:50%; background:#c3cbdb; cursor:pointer;
  border:none; padding:0; transition:all .25s ease;
}
.hero-dots .dot.active{ background:var(--blue); width:22px; border-radius:4px; }

/* ---------- Reusable side menu (services list / single service pages) ---------- */
.page-with-sidebar{
  display:grid; grid-template-columns:1fr 260px; gap:40px; align-items:start;
}
.side-col{ position:sticky; top:112px; }
.services-overview .kicker{
  display:block; color:var(--blue);
  font-family:var(--font-head); font-size:.95rem; font-weight:600;
}
.services-overview .section-head{ max-width:64ch; margin-bottom:32px; }
.services-overview .section-head p:last-child{ margin-bottom:0; }

.service-list{ display:flex; flex-direction:column; }
.service-list-item{
  display:grid; grid-template-columns:64px 1fr; gap:22px;
  padding:28px 0; border-top:1px solid var(--line);
}
.service-list-item:first-child{ border-top:none; padding-top:0; }
.service-list-item .icon{ width:64px; height:64px; }
.service-list-item h2{ font-size:1.1rem; margin-bottom:6px; }
.service-list-item p{ color:var(--text-soft); font-size:.92rem; margin-bottom:8px; max-width:60ch; }
.service-list-item a.more{ font-weight:600; font-size:.85rem; }

.testimonial-box{
  background:#fff; border:1px solid var(--line); padding:24px; margin-top:12px;
}
.testimonial-box blockquote{
  font-style:italic; color:var(--text); font-size:.92rem; margin:0 0 14px; line-height:1.6;
}
.testimonial-box cite{ font-style:normal; font-weight:700; color:var(--navy-ink); font-size:.85rem; display:block; }
.testimonial-box .role{ display:block; font-weight:400; color:var(--text-soft); font-size:.8rem; margin-top:2px; }

/* Lateral de serviços: menu, contato, CTA e perfil ilustrativo. */
.service-sidebar{ position:static; display:flex; flex-direction:column; gap:32px; min-width:0; }
.service-sidebar .hero-sidebar{ margin:0; }
.sidebar-contact{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 22px; background:var(--navy-ink); color:#fff;
  font-family:var(--font-menu); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em;
}
.sidebar-contact:hover{ background:var(--navy); text-decoration:none; }
.sidebar-cta{
  aspect-ratio:1; box-sizing:border-box; padding:26px;
  background:var(--blue); display:flex; flex-direction:column; justify-content:center; gap:16px;
}
.sidebar-cta h3{
  font-size:1.15rem; line-height:1.25; font-weight:600;
  text-transform:none; letter-spacing:0; margin:0;
}
.sidebar-cta p{ color:var(--navy-ink); font-size:.85rem; line-height:1.55; margin:0; }
.sidebar-cta-button{
  display:inline-flex; align-self:flex-start; align-items:center; gap:10px;
  padding:11px 14px; background:#fff; color:var(--navy-ink);
  font-family:var(--font-menu); font-size:.8rem; font-weight:600; line-height:1.4;
}
.sidebar-cta-button:hover{ background:var(--navy-ink); color:#fff; text-decoration:none; }
.sidebar-contact:focus-visible, .sidebar-cta-button:focus-visible{ outline:3px solid var(--navy); outline-offset:4px; }
.sidebar-testimonial{ margin:0; }
.testimonial-bubble{
  position:relative; background:#fff; border:3px solid var(--line); padding:24px 26px 54px;
}
.testimonial-bubble::after{
  content:""; position:absolute; bottom:-11px; left:32px;
  width:17px; height:17px; background:#fff;
  border-right:3px solid var(--line); border-bottom:3px solid var(--line); transform:rotate(45deg);
}
.testimonial-disclosure{ display:block; color:var(--text-soft); font-size:.7rem; line-height:1.4; margin-bottom:14px; }
.testimonial-heading{
  margin:0 0 8px; font-family:var(--font-menu); font-size:.95rem;
  font-weight:600; line-height:1.3; text-transform:none; letter-spacing:0;
}
.testimonial-bubble blockquote{ margin:0; font-size:.9rem; line-height:1.55; font-style:normal; color:var(--text-soft); }
.testimonial-quote{
  position:absolute; right:8px; bottom:-25px; height:94px;
  color:var(--blue); font-family:Georgia, serif; font-size:112px; font-weight:700; line-height:1;
}
.testimonial-profile{ display:flex; align-items:center; gap:12px; margin-top:24px; }
.testimonial-profile img{ flex:none; width:52px; height:52px; border-radius:50%; object-fit:cover; }
.testimonial-profile strong{ display:block; font-family:var(--font-menu); font-size:.85rem; font-weight:600; color:var(--navy-ink); }
.testimonial-profile span{ display:block; font-size:.75rem; line-height:1.45; font-style:italic; color:var(--text-soft); margin-top:3px; }

.section-divider{ border:none; border-top:1px solid var(--line); margin:0; }

.posts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.post-card .post-visual{
  background:var(--navy-ink); aspect-ratio:16/10; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
}
.post-card .post-visual svg{ width:44%; height:44%; }
.post-card time{
  font-family:var(--font-menu); font-size:.72rem; color:var(--text-soft);
  text-transform:uppercase; letter-spacing:.06em;
}
.post-card h3{ font-size:1.05rem; margin:8px 0 8px; }
.post-card p{ color:var(--text-soft); font-size:.9rem; }
.post-card a.more{ font-weight:600; font-size:.85rem; }

/* ---------- Footer info bar ---------- */
.footer-info{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0; }
.footer-info .container{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.footer-info-item{ display:flex; gap:12px; align-items:flex-start; }
.footer-info-item .ico{ flex:none; width:20px; height:20px; margin-top:2px; color:var(--blue); }
.footer-info-item strong{
  display:block; font-family:var(--font-menu); text-transform:uppercase; letter-spacing:.06em;
  font-size:.72rem; color:var(--text-soft); margin-bottom:4px;
}
.footer-info-item span, .footer-info-item a{
  color:var(--navy-ink); font-size:.92rem; text-decoration:none;
}
.footer-info-item a:hover{ color:var(--blue); text-decoration:none; }

/* ---------- Blog ---------- */
.post-article{ max-width:70ch; }
.post-article .post-meta{
  font-family:var(--font-menu); text-transform:uppercase; letter-spacing:.06em;
  font-size:.75rem; color:var(--text-soft); margin-bottom:10px;
}
.post-article h2{ margin-top:1.3em; }
.post-article p{ max-width:none; }
.post-cover{
  background:var(--navy-ink); border-radius:0; aspect-ratio:21/9;
  display:flex; align-items:center; justify-content:center; margin-bottom:32px;
}
.post-cover svg{ width:22%; height:22%; }

.hero-sidebar{ display:flex; flex-direction:column; background:#e7ebf2; }
.hero-sidebar a{
  font-family:var(--font-menu);
  padding:11px 22px; border-bottom:2px solid #fff; background:transparent;
  color:var(--navy-ink); font-weight:600; font-size:.76rem; border-left:3px solid transparent;
  text-transform:uppercase; letter-spacing:.05em;
  text-decoration:none !important;
}
.hero-sidebar a:hover, .hero-sidebar a.active{
  border-left-color:var(--blue); background:#fff; color:var(--blue);
}
.hero-sidebar .cta-bar{
  margin-top:auto; background:var(--navy-ink); color:#fff !important;
  display:flex; align-items:center; gap:10px; padding:16px 22px;
  font-weight:600; font-size:.78rem; border-left:none;
}
.hero-sidebar .cta-bar::after{ content:">"; margin-left:auto; font-weight:700; }
.hero-sidebar .cta-bar:hover{ background:var(--blue); color:var(--navy-ink) !important; }

/* ---------- Sections ---------- */
section{ padding:76px 0; }
.hero + :is(section, article){ padding-top:var(--hero-content-gap); }
.page-intro{ padding-bottom:32px; }
.page-intro .section-head{ max-width:64ch; margin-bottom:0; }
.page-intro .kicker{ color:var(--blue); }
.page-intro .lead{ color:var(--text-soft); max-width:64ch; }
.page-intro p:last-child{ margin-bottom:0; }
.blog-article{ padding-bottom:20px; }
.section-alt{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.section-head{ max-width:56ch; margin-bottom:44px; }
.section-head span.kicker{
  color:var(--blue); font-family:var(--font-head); font-size:.95rem; font-weight:600;
}

.tile-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;
}
.tile{
  display:flex; flex-direction:column;
}
.tile.featured{ grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1fr; gap:0; }
.tile.featured .tile-visual{ aspect-ratio:auto; border-radius:14px 0 0 14px; }
.tile.featured .tile-body{ border:1px solid var(--line); border-left:none; border-radius:0 14px 14px 0; display:flex; flex-direction:column; justify-content:center; }
.tile-visual{
  background:var(--navy-ink); aspect-ratio:16/11; border-radius:14px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.tile-visual svg{ width:62%; height:62%; }

/* Fotografias de conteúdo: preservar os espaços e cortes do layout. */
.post-visual, .post-cover, .service-list-item .icon{
  position:relative; overflow:hidden;
}
.content-photo{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.post-cover .photo-naas{ object-position:center 25%; }
.about-grid .photo-sobre{ object-position:22% center; }
.tile.featured .photo-suporte{ object-position:center 75%; }
.post-cover :is(.photo-backup, .photo-aluguel, .photo-seguranca){ object-position:center 65%; }
.tile-body{
  padding:26px 30px;
}
.tile-body h3{ font-size:1.2rem; margin-bottom:8px; }
.tile-body p{ color:var(--text-soft); font-size:.95rem; margin-bottom:12px; }
.tile-body a.more{ font-weight:600; font-size:.9rem; }
.tile:not(.featured) .tile-body{ padding:20px 4px 0; }

.why-band{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.why-cell{
  padding:32px 26px; border-right:1px solid var(--line);
}
.why-cell:last-child{ border-right:none; }
.why-cell strong{
  font-family:var(--font-head); color:var(--navy-ink); display:block; font-size:1.05rem; margin-bottom:8px;
}
.why-cell p{ font-size:.9rem; color:var(--text-soft); margin:0; }

.cta-section{
  background:var(--blue);
  padding:0;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  min-height:124px;
  padding:30px 24px;
}
.cta-inner > div{ flex:1 1 560px; }
.cta-inner > .btn{ flex-shrink:0; }
.cta-inner h2{ color:var(--navy-ink); margin:0; font-size:1.1rem; }
.cta-inner p{ color:rgba(22,35,79,.72); margin:2px 0 0; font-size:.85rem; }
.cta-inner .btn-primary{ background:var(--navy-ink); color:#fff !important; }
.cta-inner .btn-primary:hover{ background:#fff; color:var(--navy-ink) !important; }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line); padding:40px 0; background:var(--paper-alt);
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.footer-row .brand img{ height:54px; }
.footer-links{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.footer-links a{
  font-family:var(--font-menu);
  color:var(--navy-ink); font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.footer-links a:hover{ color:var(--blue); }
.copyright{ font-size:.85rem; color:var(--text-soft); }

/* Clear navigation, readable links and stable content on small screens. */
a{ color:#176aa3; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--navy); outline-offset:4px;
}
.skip-link{ position:fixed; top:8px; left:16px; z-index:100; padding:12px 18px; background:#fff; transform:translateY(-160%); }
.skip-link:focus{ transform:translateY(0); }
main{ scroll-margin-top:112px; }
.breadcrumbs{ padding-top:28px; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; font-size:.85rem; }
.breadcrumbs li+li::before{ content:"/"; margin-right:8px; color:var(--text-soft); }
.breadcrumbs li[aria-current]{ color:var(--text-soft); }
.breadcrumbs + section, .breadcrumbs + article{ padding-top:28px; }
.services-main{ min-width:0; }
.service-subheading{ font-size:1.25rem; text-transform:none; line-height:1.35; }
.service-context{ margin-top:32px; }
.contact-heading{ font-size:1.15rem; }
.contact-note{ font-size:.85rem; color:var(--text-soft); }
.hero-location{ font-size:.9rem; font-weight:600; color:var(--navy-ink); }
.hero-panel-grey{ display:grid; }
.hero-slide{ grid-area:1 / 1; position:relative; inset:auto; min-width:0; min-height:inherit; transform:translateX(100%); pointer-events:none; padding:32px 0 48px; }
.hero-slide.active{ transform:translateX(0); pointer-events:auto; }
.hero-ready .hero-slide{ transition:transform 1.1s cubic-bezier(.45,0,.2,1); }
.hero-dots .dot{ width:24px; height:24px; border:7px solid var(--paper); }
.hero-dots .dot.active{ width:36px; }
.nav-links a.active, .hero-sidebar a.active, .hero-sidebar a:hover{ color:#176aa3; }
.footer-links{ flex-wrap:wrap; }
.post-card, .tile-body{ min-width:0; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--navy-ink);
  padding:68px 0 48px;
}
.page-hero .container{ position:relative; display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center; }
.page-hero h1{ color:#fff; letter-spacing:-.01em; }
.page-hero span.kicker{ color:var(--blue); }
.page-hero p.lead{ color:#a9b6d6; font-size:1.1rem; max-width:56ch; }
.page-hero .mini-orbit{ justify-self:end; width:100%; max-width:180px; }
@media (max-width:860px){ .page-hero .container{ grid-template-columns:1fr; } .page-hero .mini-orbit{ display:none; } }

.service-detail{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center;
  padding:52px 0; border-top:1px solid var(--line);
}
.service-detail:first-of-type{ border-top:none; }
.service-detail .tile-visual{ aspect-ratio:4/3; }
.service-detail:nth-of-type(even){ direction:rtl; }
.service-detail:nth-of-type(even) > *{ direction:ltr; }
.service-detail ul{ padding-left:20px; margin:0; color:var(--text-soft); }
.service-detail li{ margin-bottom:8px; }

.about-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center;
}
.about-photo{
  background:var(--blue-soft); border-radius:16px; aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
}
.about-photo img{ height:120px; width:auto; }

.values-list{ list-style:none; margin:24px 0 0; padding:0; }
.values-list li{
  padding:14px 0; border-top:1px solid var(--line); font-size:.96rem; color:var(--text-soft);
}

.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
}
.contact-card{
  border:1px solid var(--line); border-radius:14px; padding:28px; background:var(--paper-alt);
  margin-bottom:16px;
}
.contact-card h3{ margin-bottom:6px; }
.contact-card p{ margin:0; color:var(--text-soft); font-size:.95rem; }

form.contact-form{ display:flex; flex-direction:column; gap:16px; }
.contact-form label{ font-size:.9rem; font-weight:600; color:var(--navy-ink); margin-bottom:6px; display:block; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:var(--font-body); font-size:.96rem; background:var(--paper-alt);
}
.contact-form textarea{ min-height:120px; resize:vertical; }
.contact-form button{ align-self:flex-start; border:none; cursor:pointer; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  :root{ --hero-content-gap:40px; }
  .hero-row{ grid-template-columns:1fr; }
  .hero-panel-grey{ min-height:380px; }
  .hero-slide{ background-position:center 30%; }
  .hero-slide-overlay{ background:linear-gradient(180deg, rgba(238,241,246,.35) 0%, rgba(238,241,246,.97) 62%, rgba(238,241,246,1) 100%); }
  .hero-slide-copy{ max-width:100%; padding:0 24px; align-self:flex-end; margin-bottom:56px; }
  .hero-dots{ left:24px; }
  .hero-sidebar{ margin-top:16px; }
  .tile-grid{ grid-template-columns:1fr; }
  .tile.featured{ grid-template-columns:1fr; }
  .tile.featured .tile-visual{ border-radius:14px; aspect-ratio:16/11; }
  .tile.featured .tile-body{ border:none; padding:20px 4px 0; }
  .why-band{ grid-template-columns:1fr 1fr; }
  .service-detail{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .nav-links{
    position:fixed; top:96px; left:0; right:0; bottom:0;
    background:var(--paper); flex-direction:column; padding:24px; gap:0;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-ready .nav-links{ visibility:hidden; overflow-y:auto; }
  .nav-ready .nav-links.open{ visibility:visible; }
  .site-header:not(.nav-ready) .container{ height:auto; min-height:96px; flex-wrap:wrap; }
  .site-header:not(.nav-ready) #site-navigation{ width:100%; }
  .site-header:not(.nav-ready) .nav-links{ position:static; transform:none; padding:12px 0; }
  .site-header:not(.nav-ready) .menu-toggle{ display:none; }
  body.menu-open{ overflow:hidden; }
  .nav-links li{ border-bottom:1px solid var(--line); }
  .nav-links a{ display:block; padding:16px 4px; }
  .menu-toggle{ display:block; }
  .page-with-sidebar{ grid-template-columns:1fr; }
  .side-col{ position:static; }
  .posts-grid{ grid-template-columns:1fr; }
  .footer-info .container{ grid-template-columns:1fr 1fr; gap:20px; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .cta-inner > div{ flex:auto; }
  .hero-slide{ padding-top:24px; padding-bottom:0; }
  .hero-slide-copy{ width:100%; }
  .posts-grid[style]{ grid-template-columns:1fr !important; }
}
@media (max-width:480px){
  .brand img, .footer-row .brand img{ width:min(215px, 65vw); height:auto; }
  .footer-info .container, .why-band{ grid-template-columns:1fr; }
  h1{ overflow-wrap:break-word; }
  .post-article h1{ font-size:2rem; }
}