/* ==========================================================================
   Dunvale Court Limited — Responsive
   All @media breakpoints. Loaded after style.css and animations.css.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media (min-width:1680px){
  :root{ --maxw:1520px; }
}

@media (max-width:960px){
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    max-height:0;
    opacity:0;
    overflow:hidden;
    padding:0 var(--gutter);
    transition:max-height .35s ease, opacity .3s ease, padding .35s ease;
  }
  .nav-links.nav-open{
    max-height:420px;
    opacity:1;
    padding:12px var(--gutter) 20px;
  }
  .nav-links a{
    width:100%;
    padding:12px 0;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .nav-toggle{ display:flex; position:relative; z-index:2; }
  .nav-toggle.is-open span{ background:transparent; }
  .nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }
  .nav-backdrop{
    position:fixed;
    inset:0;
    top:76px;
    background:rgba(18,13,7,.35);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:90;
  }
  .nav-backdrop.is-visible{ opacity:1; pointer-events:auto; }

  .pill{ min-height:44px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .problem-grid, .mv-grid, .trust-block{ grid-template-columns:1fr; gap:32px; }
  .tier-grid{ grid-template-columns:1fr 1fr; }
  .tier-grid .tier-card{ border-bottom:1px solid var(--line); padding-top:36px !important; }
  .pillars{ grid-template-columns:1fr; }
  .property-grid, .testimonial-strip, .blog-grid, .cat-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .tier-detail{ grid-template-columns:1fr; gap:28px; }
  .contact-grid{ grid-template-columns:minmax(0,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  .blog-feature{ grid-template-columns:1fr; }
  .neigh-row{ grid-template-columns:1fr; gap:8px; }
  .portfolio-row{ grid-template-columns:1fr 1fr; row-gap:6px; }
  .value-row{ grid-template-columns:40px 1fr; }
  .value-row h4{ grid-column:2; }
  .value-row p{ grid-column:2; }
}

@media (max-width:640px){
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .property-grid, .testimonial-strip, .blog-grid, .cat-grid, .footer-grid{ grid-template-columns:1fr; }
  section{ padding-top:64px; padding-bottom:64px; }
  .hero{ padding-top:80px; padding-bottom:260px; }
  .hero .hero-stats{ grid-template-columns:1fr 1fr; gap:20px; }

  /* portfolio rows become labelled cards instead of a cramped grid */
  .portfolio-row{
    grid-template-columns:1fr;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .portfolio-row > *{ padding:3px 0; }
  .portfolio-row .status{ margin-top:6px; }
  .portfolio-row > *::before{
    content:attr(data-label);
    display:block;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--brown-500);
    text-transform:uppercase;
  }

  .cookie-banner{ left:12px; right:12px; bottom:12px; padding:16px 18px; }
  .back-to-top{ right:16px; bottom:16px; }

  /* header row was overflowing 390px viewports (logo + CTA + toggle) —
     shrink the logo and CTA so all three actually fit */
  .nav{ gap:10px; }
  .nav-logo img{ height:32px; }
  .nav-cta{
    white-space:normal;
    text-align:center;
    padding:9px 12px;
    font-size:.76rem;
    line-height:1.25;
    max-width:112px;
  }
}

@media (max-width:400px){
  h1{ font-size:clamp(1.7rem,7vw,2.2rem) !important; }
  .section-head h2{ font-size:clamp(1.5rem,6vw,2rem); }
  .btn{ padding:13px 20px; font-size:.86rem; }
}

@media (max-width:960px){
  .related-grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .property-modal{ grid-template-columns:1fr; }
  .modal-gallery{ min-height:220px; }
}