@charset "UTF-8";
/* ==========================================================================
   We Buy Any Cabin — responsive.css
   Desktop first breakpoints. Mobile landscape handled explicitly.
   ========================================================================== */

/* ── Large desktop down ──────────────────────────────────────────────────── */
@media (max-width:1180px){
  .primary a{padding:.7rem .6rem;font-size:.86rem}
  .brand-sub{display:none}
}

/* ── Contact bar ─────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .topbar-hours{display:none}
  .topbar-inner{justify-content:space-between;gap:1rem}
}
@media (max-width:560px){
  :root{--bar-h:32px}
  .topbar-inner{font-size:.78rem;gap:.7rem}
  .topbar-lab{display:none}
}
@media (max-width:360px){
  .topbar-inner{font-size:.72rem}
}

/* ── Tablet landscape / small laptop ─────────────────────────────────────── */
@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .foot-cols{grid-template-columns:1fr 1fr}
}

/* ── Tablet portrait: switch to the off-canvas menu ──────────────────────── */
@media (max-width:900px){
  :root{--head-h:74px}

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:48px;height:48px;padding:0 11px;background:transparent;
    border:2px solid var(--brand);border-radius:var(--radius);cursor:pointer;
  }
  .nav-toggle .bar{display:block;height:3px;background:var(--brand-bright);width:100%}
  .nav-toggle[aria-expanded="true"] .bar{background:#fff}

  .nav-close{
    display:block;position:absolute;top:14px;right:16px;
    width:48px;height:48px;font-size:2.1rem;line-height:1;
    background:transparent;border:2px solid var(--line-dark);color:#fff;cursor:pointer;
  }

  .primary{
    position:fixed;inset:0;background:var(--ink);
    transform:translateX(100%);transition:transform .25s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:5.2rem 1.2rem 3rem;z-index:120;
  }
  .primary.open{transform:none}
  .primary ul{flex-direction:column;align-items:stretch;gap:0}
  .primary>ul>li{border-bottom:1px solid var(--line-dark)}
  .primary a{
    padding:1.05rem .6rem;font-size:1.05rem;text-align:center;
    min-height:48px;display:flex;align-items:center;justify-content:center;
  }
  .primary .sub{
    display:flex;position:static;min-width:0;box-shadow:none;
    background:var(--ink-2);border-top:0;border-left:3px solid var(--brand);
    padding:.2rem 0;margin:0 0 .5rem;
  }
  .primary .sub a{font-size:.96rem;padding:.8rem .6rem}
  .nav-cta{margin:1.4rem 0 0;border-bottom:0}
  .nav-cta a{padding:1.05rem 1.2rem}

  .hero-grid,.split,.split-wide{grid-template-columns:1fr}
  .hero-media{order:-1}
  .g3{grid-template-columns:repeat(2,1fr)}
  .band-cta-inner{flex-direction:column;align-items:flex-start}
}

/* ── Mobile portrait ─────────────────────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:16px}
  :root{--gap:1rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .stats{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:1fr;gap:2rem}
  .foot-base-inner{flex-direction:column;align-items:flex-start}
  .hero-actions .btn,.band-cta-actions .btn{width:100%}
  .spec{font-size:.88rem}
  .spec th,.spec td{padding:.55rem .6rem}
  .brand-name{font-size:1.05rem}
  .steps li{padding-left:2.9rem}
  .steps li::before{width:2.1rem;height:2.1rem;font-size:.92rem}
}

@media (max-width:400px){
  .brand-mark{width:54px;height:36px}
  .brand-name{font-size:.95rem}
  h1{font-size:1.72rem}
}

/* ── Mobile landscape: short viewports ───────────────────────────────────── */
@media (max-height:520px) and (orientation:landscape){
  :root{--head-h:60px;--bar-h:30px}
  .primary{padding:4.2rem 1.2rem 2rem}
  .primary a{padding:.65rem .6rem;min-height:42px;font-size:.95rem}
  .nav-close{top:8px;right:12px;width:42px;height:42px;font-size:1.8rem}
  .hero{padding:2.2rem 0}
  section{padding:2rem 0}
  .primary ul{max-width:640px;margin:0 auto}
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print{
  .site-head,.primary,.band-cta,.site-foot,.nav-toggle{display:none}
  body{padding-top:0 !important;font-size:12pt;color:#000}
  a{color:#000;text-decoration:underline}
}

/* ── Touch target sizing on small screens ────────────────────────────────── */
@media (max-width:640px){
  .foot-links a,.foot-legal a,.foot-addr a{
    display:inline-block;padding:.42rem 0;min-height:40px;line-height:1.55;
  }
  .foot-inline li a{padding-right:.6rem}
  .crumb a,.crumb span{display:inline-block;padding:.45rem 0;min-height:36px}
  .brand{min-height:44px;align-items:center}
  .faq-item{padding-top:1.3rem;padding-bottom:1.3rem}
  .more-link a{display:inline-block;padding:.4rem 0;min-height:40px}
}

/* ── Region/town definition list stacks on narrow screens ────────────────── */
@media (max-width:700px){
  .spec-list{grid-template-columns:1fr}
  .spec-list dt{padding:.8rem 0 .2rem;border-bottom:0}
  .spec-list dd{padding:0 0 .8rem;border-left:0}
}