/* ==========================================================
   Contact page — extra styles layered on top of index.css
   ========================================================== */



/* ===== Page banner (same look as the homepage hero) ===== */
.banner{position:relative;color:#fff;background:linear-gradient(135deg,#061a35 0%,#0d2d57 55%,#17609a 100%);overflow:hidden;isolation:isolate;min-height:440px;display:flex;align-items:center;padding-bottom:60px}
.banner::before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(135deg,#061a35 0%,#0d2d57 55%,#17609a 100%)}
.banner.has-photo::before{background:linear-gradient(135deg,rgba(7,30,61,.55),rgba(7,30,61,.2)),var(--photo) center/cover no-repeat;animation:kenburns 12s ease-out both}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
   radial-gradient(60% 70% at 85% 30%,rgba(79,163,220,.28),transparent 70%),
   radial-gradient(40% 50% at 10% 100%,rgba(255,138,42,.16),transparent 70%),
   linear-gradient(90deg,rgba(7,30,61,.86) 0%,rgba(7,30,61,.55) 55%,rgba(7,30,61,.1) 100%)}
.banner .art{position:absolute;right:-30px;bottom:30px;width:min(640px,60%);opacity:.95;z-index:-2;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35));animation:float 9s ease-in-out infinite}
.banner .wrap{position:relative}
.banner .content{max-width:660px;padding-block:70px 40px;animation:bannerIn .9s var(--ease) both}
@keyframes bannerIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.banner .eyebrow{color:var(--signal)}
.banner h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:18px}
.banner .banner-text{font-size:1.15rem;color:#cfe0f1;max-width:54ch}
.crumbs{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);font-size:.84rem;color:#d6e6f5}
.crumbs a{text-decoration:none;color:#fff;font-weight:600}
.crumbs a:hover{color:var(--signal)}
.crumbs span{opacity:.55}
.banner .hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:2;color:#fff;pointer-events:none}
.banner .hero-wave svg{width:100%;height:100%}


.crumbs{display:flex;width:fit-content}
@media (max-width:860px){.banner .art{width:100%;right:-20%;opacity:.22}}
@media (max-width:640px){.banner{min-height:380px}.banner .content{padding-block:50px 30px}}
@media (prefers-reduced-motion:reduce){.banner .content{animation:none}}

/* jump buttons in banner */
.jump{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}


/* ===== Staggered entrance ===== */
.js .stagger>*{opacity:0;transform:translateY(20px) scale(.95);transition:opacity .6s var(--ease),transform .7s cubic-bezier(.2,.9,.25,1.2),box-shadow .3s,border-color .3s}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:hover{transform:translateY(-4px)}
.js .stagger.in>*:nth-child(1){transition-delay:0.08s,0.08s,0s,0s}
.js .stagger.in>*:nth-child(2){transition-delay:0.16s,0.16s,0s,0s}
.js .stagger.in>*:nth-child(3){transition-delay:0.24s,0.24s,0s,0s}
.js .stagger.in>*:nth-child(4){transition-delay:0.32s,0.32s,0s,0s}
.js .stagger.in>*:nth-child(5){transition-delay:0.40s,0.40s,0s,0s}
.js .stagger.in>*:nth-child(6){transition-delay:0.48s,0.48s,0s,0s}
.js .stagger.in>*:nth-child(7){transition-delay:0.56s,0.56s,0s,0s}
.js .stagger.in>*:nth-child(8){transition-delay:0.64s,0.64s,0s,0s}
.js .stagger.in>*:nth-child(9){transition-delay:0.72s,0.72s,0s,0s}
.js .stagger.in>*:nth-child(10){transition-delay:0.80s,0.80s,0s,0s}
.js .stagger.in>*:nth-child(11){transition-delay:0.88s,0.88s,0s,0s}
.js .stagger.in>*:nth-child(12){transition-delay:0.96s,0.96s,0s,0s}
.js .stagger.in>*:hover{transition-delay:0s}
/* ticks: check marks pop after the row appears */
.js .ticks.stagger li::after{transform:rotate(-45deg) scale(0);transition:transform .45s cubic-bezier(.2,.9,.25,1.5) .5s}
.js .ticks.stagger.in li::after{transform:rotate(-45deg) scale(1)}

/* ===== Directional reveal ===== */
.js .reveal.rl{transform:translateX(-56px)}
.js .reveal.rr{transform:translateX(56px)}
.js .reveal.rl.in,.js .reveal.rr.in{transform:none}


/* ===== Contact cards ===== */
.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.contact-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px 30px;overflow:hidden;box-shadow:var(--shadow-sm)}
.contact-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--sea),var(--sea-l))}
.contact-card:first-child::before{background:linear-gradient(90deg,var(--signal),#ffa24f)}
.contact-card::after{content:"";position:absolute;width:160px;height:160px;right:-70px;bottom:-80px;border-radius:50%;background:radial-gradient(circle,rgba(31,122,184,.12),transparent 70%);transition:transform .5s var(--ease)}
.contact-card:hover::after{transform:scale(1.5)}
.contact-card .ci{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;margin-bottom:22px;background:var(--sky);transition:background .35s,transform .45s var(--ease);position:relative;z-index:1}
.contact-card:first-child .ci{background:var(--signal-soft)}
.contact-card .ci svg{width:28px;height:28px;color:var(--sea);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:color .35s}
.contact-card:first-child .ci svg{color:var(--signal-d)}
.contact-card:hover .ci{background:linear-gradient(135deg,var(--signal),#ffa24f);transform:rotate(-6deg) scale(1.06)}
.contact-card:hover .ci svg{color:#1b1205}
.js .contact-card .ci svg *{stroke-dasharray:1;stroke-dashoffset:1}
.js .stagger.in .contact-card .ci svg *{animation:drawIcon 1.3s ease forwards .5s}
.contact-card h3{font-size:1.1rem;margin-bottom:10px;position:relative;z-index:1}
.contact-card p{color:var(--ink);overflow-wrap:anywhere;position:relative;z-index:1}
.contact-card .small{color:var(--muted);font-size:.92rem;margin-top:6px}
.contact-card a{font-weight:700;color:var(--navy);text-decoration:none;background:linear-gradient(var(--signal),var(--signal)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease),color .25s}
.contact-card a:hover{color:var(--sea);background-size:100% 2px}

/* ===== Enquiry section extras ===== */
.enquiry .promise div{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.enquiry .promise div:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.form-note a{color:var(--sea);font-weight:700}
form.card .btn[type=submit]:disabled{opacity:.7;cursor:progress}

/* ===== Map ===== */
.map-wrap{position:relative;margin-top:44px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:
  radial-gradient(circle at 30% 30%,var(--sky),transparent 60%),var(--sand)}
.map-wrap iframe{display:block;width:100%;height:440px;border:0}
.map-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.map-actions .form-note{margin:0!important}

@media (max-width:1020px){.contact-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .contact-cards{grid-template-columns:1fr}
  .map-wrap iframe{height:320px}
}
@media (prefers-reduced-motion:reduce){.js .contact-card .ci svg *{stroke-dashoffset:0}}