/* ============================================================
   RESPONSIVE — tablet + mobile refinements
   Mobile is a first-class citizen, not a squeezed desktop.
   ============================================================ */

@media (max-width:1180px){
  .grid .card{ grid-column:span 6; }
  .grid .card:nth-child(9n+1),
  .grid .card:nth-child(9n+2){ grid-column:span 6; }
  .grid .card:nth-child(9n+1) .card__media,
  .grid .card:nth-child(9n+2) .card__media{ aspect-ratio:4/5; }
  .journal__grid{ grid-template-columns:1fr 1fr; }
  .journal__grid .note:last-child{ grid-column:1/-1; }
  .journal__grid .note:last-child .note__media{ aspect-ratio:21/9; }
  .related__grid{ grid-template-columns:1fr 1fr; }
  .related__grid .card:last-child{ display:none; }
}

@media (max-width:1024px){
  .masthead__nav{ display:none; }
  .menu-btn{ display:grid; }

  .statement__grid,
  .regions__layout,
  .why__grid,
  .brief__grid,
  .pview__masthead,
  .pview__body{ grid-template-columns:minmax(0,1fr); }

  .why__sticky,.pview__aside{ position:static; }

  /* Region explorer becomes an image-led swipe rail */
  .regions__layout{ gap:0; }
  .regions__list,.regions__stage{ display:none; }
  .regions__scroller{
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
    padding-bottom:10px;
  }
  .region-card{
    flex:0 0 min(74vw,320px); scroll-snap-align:start;
    position:relative; aspect-ratio:3/4; overflow:hidden;
    background:var(--forest-2); text-align:left; color:var(--ink-on-dark);
  }
  .region-card img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.04); }
  .region-card__body{
    position:absolute; inset:auto 0 0 0; padding:18px;
    background:linear-gradient(0deg,rgba(9,26,20,.88),transparent);
    display:grid; gap:8px;
  }
  .region-card__body h3{ font:300 1.7rem/1 var(--serif); letter-spacing:-.03em; }
  .region-card__body span{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-on-dark-65); }
  .region-card.is-active{ outline:2px solid var(--sand-2); outline-offset:-2px; }

  .pview__strip{ grid-template-columns:1fr; }
  .pview__strip figure:first-child{ aspect-ratio:4/3; }
}

@media (max-width:768px){
  .hero{ min-height:92svh; }
  .hero__deck{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .hero__scroll{ display:none; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ flex:1; justify-content:center; }

  .statement__cols{ grid-template-columns:1fr; }
  .statement__marks{ grid-template-columns:1fr; gap:20px; }
  .statement__marks > div{ padding-bottom:18px; border-bottom:1px solid var(--line); }

  /* The filter bar wraps rather than scrolls: hidden controls are
     unfindable controls on a phone. */
  .filters__row{
    padding-block:12px; gap:10px;
    flex-wrap:wrap; overflow-x:visible;
  }
  .filters__group{ flex-wrap:wrap; gap:8px; }
  .filters__group > .label{ display:none; }
  .filters__divider{ display:none; }
  .filters__selects{
    width:100%; margin-left:0;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  }
  .filters__select{ flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
  .filters__select select{ width:100%; font-size:12px; padding-right:18px; }

  .grid{ gap:34px 16px; }
  .grid .card,
  .grid .card:nth-child(9n+1),
  .grid .card:nth-child(9n+2){ grid-column:1/-1; }
  /* Every card is portrait on a phone — one deliberate ratio, stated at a
     specificity that beats the wide-card overrides above. */
  .grid .card .card__media,
  .grid .card:nth-child(9n+1) .card__media,
  .grid .card:nth-child(9n+2) .card__media{ aspect-ratio:4/5; }

  .journal__grid{ grid-template-columns:1fr; }
  .journal__grid .note:last-child .note__media{ aspect-ratio:5/4; }
  .related__grid{ grid-template-columns:1fr; }
  .related__grid .card:nth-child(n+3){ display:none; }

  .brief__row,.brief__row--3{ grid-template-columns:1fr; }
  .brief__submit .btn{ width:100%; justify-content:center; }

  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__grid > div:first-child{ grid-column:1/-1; }

  .cap__btn{ grid-template-columns:32px minmax(0,1fr) 20px; gap:12px; }
  .cap__panel-inner{ padding-left:44px; }

  .pview__masthead{ padding-block:32px; }
  .pgal__stage{ height:56svh; }
  .features{ grid-template-columns:1fr; }
  .invest__stats{ grid-template-columns:1fr; gap:14px; }
  .invest__stats > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
  .invest__stats .stat__label{ margin:0; }

  .panel{ width:100%; }
  .mini{ grid-template-columns:72px minmax(0,1fr) auto; gap:12px; }

  /* Dock becomes a full-width bottom bar */
  .dock{ left:var(--gutter); right:var(--gutter); bottom:14px; }
  .dock__group{ width:100%; }
  .dock__group button{ flex:1; padding:15px 10px; text-align:center; }
  .dock__group button[data-dock-secondary]{ display:none; }

  .toast{ bottom:84px; }
}

@media (max-width:600px){
  /* Masthead keeps identity, shortlist and menu. Enquiry lives in the
     persistent dock at the bottom of the screen on small viewports. */
  .masthead__actions .btn{ display:none; }
  .brand__type small{ display:none; }
}

@media (max-width:480px){
  .brand__type strong{ letter-spacing:.2em; font-size:11px; }
  .masthead__actions{ gap:6px; }
  .icon-btn{ width:38px; height:38px; }
  .hero__eyebrow .label--rule::before{ width:20px; }
  .pview__bar-title{ display:none; }
  .pgal__thumbs button{ flex-basis:64px; }
  .results-bar{ align-items:flex-start; flex-direction:column; }
}

/* Devices without hover: always show card CTA affordance */
@media (hover:none){
  .card__cta{ opacity:1; transform:none; }
  .rail{ cursor:default; }
}

/* Large screens: let the grid breathe rather than stretch */
@media (min-width:1800px){
  :root{ --gutter:clamp(48px,4vw,88px); }
}