/* ═══════════════════════════════════════════════════════════
   Gallery filter, services imagery band, 404 page.
   ═══════════════════════════════════════════════════════════ */

/* ── GALLERY FILTER ────────────────────────────────────── */
.gal__filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,34px)}
.gfl{
  background:none;border:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 15px;transition:background .22s,color .22s,border-color .22s;
}
.gfl:hover{border-color:var(--ink);color:var(--ink)}
.gfl.on{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.gfl:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* portrait tiles span two rows so the grid stays even */
.gal__grid{grid-auto-flow:dense}
.gi--portrait{grid-row:span 2}
.gi--portrait img{height:100%;min-height:clamp(320px,38vw,500px)}

.lb__n{font-family:var(--ff-mono);font-size:11px;color:rgba(255,255,255,.55);
  letter-spacing:.1em;margin-left:6px}

/* ── SERVICES IMAGERY BAND ─────────────────────────────── */
.svcband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--navy-deep)}
.svcband figure{margin:0;position:relative;overflow:hidden}
.svcband img{width:100%;height:clamp(200px,22vw,300px);object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.svcband figure:hover img{transform:scale(1.06)}
.svcband figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(4,23,61,.9),rgba(4,23,61,0));
}

/* ── 404 ───────────────────────────────────────────────── */
.nf{background:var(--navy-deep);color:#fff;min-height:100svh;display:flex;align-items:center;
  padding:clamp(90px,14vh,150px) 0 clamp(50px,8vw,90px)}
.nf__t{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;
  font-size:clamp(46px,9vw,120px);line-height:.88;margin:18px 0 0}
.nf__d{margin:22px 0 0;max-width:46ch;font-size:16px;line-height:1.7;color:var(--on-dark-2)}
.nf__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3.6vw,40px)}
.nf__links a{
  display:inline-flex;align-items:center;padding:12px 20px;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.34);font-size:14px;font-weight:500;
  transition:background .22s,color .22s,border-color .22s;
}
.nf__links a:hover{background:#fff;color:var(--navy-deep);border-color:#fff}
.nf__help{margin-top:clamp(26px,3.4vw,38px);font-size:14.5px;color:var(--on-dark-2)}
.nf__help a{color:#fff;display:inline-block;padding:4px 0;min-height:24px}

@media(max-width:900px){
  .svcband{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .gi--portrait{grid-row:span 1}
  .gi--portrait img{min-height:0}
}

/* ── TAP TARGETS ───────────────────────────────────────── */
/* Footer and inline list links rendered ~23px tall, just under the WCAG 2.2
   24x24 minimum. Padding rather than font-size keeps the visual density. */
.foot__col a{padding:3px 0;min-height:24px;display:flex;align-items:center}
.foot__col p{padding:3px 0}
.foot__row--links a{display:inline-block;padding:4px 0;min-height:24px}
.nf__links a{min-height:44px}
.gfl{min-height:36px}
.mast__ph,.nav__wa,.nav__book,.nav__lang{min-height:38px;display:inline-flex;align-items:center}
.cta__details a{min-height:24px;display:flex;align-items:center}

/* ── HONEYPOT ──────────────────────────────────────────── */
/* The markup uses .hp-trap; site.css only defined .hp, so the spam-trap field
   was rendering visibly and anyone who typed in it had their enquiry silently
   dropped. Scoped to .hp-trap ONLY — `.hp` is the hero photo-plane class and
   matching it here collapsed every hero image to 1x1px off-screen. */
.hp-trap{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

/* ── CONTRAST + TARGET FIXES ───────────────────────────── */
/* the "+" suffix measured 2.93:1 on navy, just under the 3:1 large-text floor */
.h2s__suf,.st__suf{color:#FF7A70}
.hero2__ghost{min-height:26px;display:inline-flex;align-items:center}

/* ── TESTIMONIALS ──────────────────────────────────────── */
.testi-sec{background:var(--paper-2);padding:clamp(60px,9vw,110px) 0}
.testi__grid{margin-top:clamp(28px,3.6vw,46px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2.2vw,26px)}
.testi{margin:0;background:#fff;border:1px solid var(--line);padding:clamp(22px,2.8vw,32px);
  display:flex;flex-direction:column;justify-content:space-between}
.testi__q{margin:0;font-size:16px;line-height:1.7;color:var(--ink);quotes:'\201C' '\201D'}
.testi__q::before{content:open-quote;color:var(--red);font-family:var(--ff-hero);
  font-size:34px;line-height:0;vertical-align:-8px;margin-right:2px}
.testi__by{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px}
.testi__by b{font-family:var(--ff-hero);font-weight:900;text-transform:uppercase;font-size:17px}
.testi__by span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2)}

/* ── CREDENTIALS CAROUSEL ──────────────────────────────── */
/* Replaces a pinned horizontal scroll that locked the page for ~4300px. */
.creds__ctrl{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,52px);
  display:flex;gap:10px;justify-content:flex-end;margin-bottom:14px}
.credbtn{
  width:44px;height:44px;background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
  transition:background .22s,border-color .22s,opacity .22s;
}
.credbtn:hover:not(:disabled){background:var(--red-bright);border-color:var(--red-bright)}
.credbtn:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
.credbtn:disabled{opacity:.28;cursor:default}

.creds__vp--carousel{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;cursor:grab;
}
.creds__vp--carousel.is-dragging{cursor:grabbing;scroll-snap-type:none}
.creds__vp--carousel:focus-visible{outline:2px solid var(--red-bright);outline-offset:-2px}
.creds__vp--carousel::-webkit-scrollbar{height:8px}
.creds__vp--carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26)}
.creds__vp--carousel .cred{scroll-snap-align:start}
.creds__vp--carousel .creds__track{transform:none!important}

/* The skip link focuses <main> programmatically. Without this the browser
   draws its default focus ring around the entire main element — a box around
   the whole page — which reads as a rendering fault. The link's own visible
   focus state is what tells the user where they are. */
main[tabindex="-1"]:focus{outline:none}