/* ===== Contact Us page (extends base / components / layout) ===== */

/* 1. banner: navy panel, photo behind a gold diagonal on the right, badges along the bottom */
.page-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--white);background:radial-gradient(60% 90% at 20% 0%,rgba(6,70,168,.6),transparent 70%),linear-gradient(120deg,#071A3D 0%,#0A2A66 60%,#0B3A8F 130%)}
.ch-photo{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:48%;overflow:hidden;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);background:var(--navy)}
.ch-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 22%}
.ch-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071A3D 0,rgba(7,26,61,.15) 38%),linear-gradient(0deg,rgba(7,26,61,.8),transparent 50%)}
.ch-edge{position:absolute;inset:0;z-index:1;background:var(--gold-grad);clip-path:polygon(18% 0,calc(18% + 4px) 0,4px 100%,0 100%)}
.ch-mark{position:absolute;z-index:-1;left:30%;top:50%;width:min(34vw,520px);aspect-ratio:1;translate:0 -50%;background:var(--wm) 50% 50%/contain no-repeat;opacity:.07;pointer-events:none}
.page-hero-grid{position:relative;display:block;min-height:clamp(380px,28vw,430px)}
.page-hero-copy{max-width:36rem;padding-block:2.2rem 2.6rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.crumbs ol::before{content:"";width:3.2rem;height:3px;margin-right:.6rem;border-radius:2px;background:var(--gold-grad)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--gold)}
.crumbs a{transition:color .3s}.crumbs a:hover{color:var(--gold-hi)}
.crumbs [aria-current]{color:var(--gold-hi)}
.page-hero h1{margin:1.1rem 0 .2rem;font-size:clamp(1.87rem,4.2vw,2.98rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:var(--white);animation:chUp .9s .15s var(--ease-out) both}
.page-hero h1 span{color:var(--gold)}
.page-hero-sub{margin:0 0 .9rem;font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:600;color:#fff}
.ch-lead{max-width:30rem;margin:0 0 1.5rem;font-size:.98rem;line-height:1.65;color:var(--on-navy)}
.ch-badges{display:flex;flex-wrap:wrap;gap:1rem 1.8rem}
.ch-badges li{display:flex;align-items:center;gap:.7rem;font-size:.78rem;line-height:1.25;color:var(--on-navy)}
.ch-badges .ico{flex:none;box-sizing:content-box;width:1.1rem;height:1.1rem;padding:.6rem;color:var(--gold);border:1.5px solid var(--gold);border-radius:50%;background:rgba(212,175,55,.1)}
.ch-tag{position:absolute;right:0;bottom:2.4rem;width:16rem;text-shadow:0 2px 14px rgba(2,9,28,.9);margin:0;padding-bottom:1rem;font:600 .86rem/1.55 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88);background:linear-gradient(90deg,var(--gold),transparent) 0 100%/6rem 2px no-repeat}
@keyframes chUp{from{opacity:0;transform:translateY(18px)}}
.js:not(.no-anim) .page-hero [data-reveal]{opacity:0}

/* 2. contact cards: three light cards + a navy "help" card */
.info-wrap{position:relative;z-index:2;margin-top:-1px;padding:2.2rem 0 2.6rem;background:linear-gradient(180deg,#fff,#F6F8FC)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.12fr;gap:1.2rem}
.info-card{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:1.5rem 1.5rem 1.4rem;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 26px 46px -34px rgba(7,26,61,.55);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.info-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold-grad);transform:scaleX(.18);transform-origin:left;transition:transform .9s var(--ease-out)}
.info-card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.6);box-shadow:0 36px 56px -32px rgba(7,26,61,.6)}
.info-card:hover::after{transform:scaleX(1)}
.info-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.info-ico{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;color:var(--gold-hi);background:var(--navy);box-shadow:0 0 0 3px rgba(212,175,55,.5);transition:transform .8s var(--ease-out)}
.info-ico .ico{width:1.4rem;height:1.4rem}
.info-card:hover .info-ico{transform:rotate(360deg)}
.info-card h2{margin:0 0 .15rem;font-size:0.98rem;font-weight:800}
.info-note{margin:0;font-size:.84rem;color:var(--muted)}
.info-list{flex:1;margin-bottom:1.1rem}
.info-list li{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:.3rem}
.info-list .ico{flex:none;margin-top:.2rem;width:1.1rem;height:1.1rem;color:var(--navy)}
.info-list a{display:inline-block;font-weight:700;font-size:.98rem;color:var(--navy);word-break:break-word;transition:color .3s,transform .4s var(--ease)}
.info-list a:hover{color:var(--royal);transform:translateX(5px)}
.info-list a[data-placeholder],.info-list span[data-cfg]{color:var(--muted);font-weight:500;font-size:.92rem}
.info-btn{display:inline-flex;align-items:center;align-self:flex-start;gap:.6rem;padding:.7rem 1.2rem;font:700 .82rem/1 var(--sans);color:var(--navy);border:1.5px solid rgba(7,26,61,.3);border-radius:99px;transition:transform .4s var(--ease),box-shadow .4s,background .3s,border-color .3s}
.info-btn .ico{width:1rem;height:1rem;transition:transform .4s var(--ease)}
.info-btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 14px 22px -14px rgba(7,26,61,.55)}
.info-btn:hover .ico:last-child{transform:translateX(3px)}
.info-btn[data-placeholder]{opacity:.7}
.info-btn-gold{background:var(--gold-grad);border-color:transparent;box-shadow:0 14px 24px -14px rgba(184,146,31,.95)}
.info-help{justify-content:center;color:var(--on-navy);background:radial-gradient(70% 60% at 100% 100%,rgba(212,175,55,.2),transparent 70%),linear-gradient(135deg,#0B3A8F -20%,#0A2A66 30%,#071A3D 100%);border-color:transparent}
.info-help-shield{position:absolute;right:-1.5rem;bottom:-1.5rem;width:11rem;height:11rem;fill:none;stroke:rgba(243,214,117,.35);stroke-width:.6}
.info-help-eyebrow{display:flex;align-items:center;gap:.8rem;margin:0 0 .8rem;font:700 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.info-help-eyebrow::after{content:"";flex:1;max-width:2.6rem;height:2px;background:var(--gold-grad)}
.info-help h2{margin:0 0 .8rem;font-size:clamp(1.27rem,2.2vw,1.62rem);line-height:1.15;color:#fff}
.info-help h2 span{color:var(--gold)}
.info-help p:not(.info-help-eyebrow){max-width:15rem;margin:0 0 1.3rem;font-size:.9rem;line-height:1.55}
.info-help .info-btn{position:relative}
.info-help:hover{border-color:transparent}

/* 3. form */
.touch{background:var(--soft)}
.touch-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.touch-copy .title{margin-bottom:1.2rem}
.trust-list{display:grid;gap:.8rem;margin:1.8rem 0 2rem}
.trust-list li{display:flex;align-items:center;gap:.8rem;font-weight:600;color:var(--navy)}
.trust-list .ico{width:1.4rem;height:1.4rem;color:var(--gold-deep)}
.touch-brand{position:relative;max-width:320px;padding-top:1.8rem}
.tb-line{position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0))}
.touch-brand img{width:210px}
.form-card{position:relative;padding:2.4rem;background:var(--white);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--radius);box-shadow:0 40px 70px -36px rgba(7,26,61,.6)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.1rem}
.form-grid .full{grid-column:1/-1}
.btn-block{width:100%;margin-top:.6rem}
.form-status{margin:1rem 0 0;font-size:.94rem;font-weight:600}
.form-status:empty{display:none}
.form-status.ok{padding:.9rem 1rem;color:#14683F;background:#E7F6EE;border:1px solid #9AD3B4;border-radius:4px}
.form-status.bad{padding:.9rem 1rem;color:#8E2B20;background:#FCEDEA;border:1px solid #E4A9A1;border-radius:4px}
.form-fine{margin:1rem 0 0;font-size:.8rem;color:var(--muted)}
.form-fine b{color:var(--gold-deep)}

/* 3b. "Get in touch" refresh: light left side with a faint photo, navy diagonal behind the form card, icon fields */
.touch{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#fff 0%,#F6F8FC 100%)}
.touch-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.touch-art img{position:absolute;left:26%;bottom:0;width:30%;height:62%;object-fit:cover;object-position:20% 20%;opacity:.2;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.ta-navy{position:absolute;right:0;top:0;bottom:0;width:36%;background:radial-gradient(70% 50% at 100% 0%,rgba(6,70,168,.6),transparent 70%),linear-gradient(160deg,#0A2A66,#071A3D 60%,#050F26);clip-path:polygon(34% 0,100% 0,100% 100%,0 100%)}
.ta-line{position:absolute;right:0;height:2px;width:46%;background:linear-gradient(90deg,transparent,var(--gold));transform-origin:right center}
.ta-line-1{top:46%;rotate:-38deg}
.ta-line-2{bottom:8%;rotate:-38deg;opacity:.6;width:38%}
.touch-copy .title .ct-gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.trust-list .ico{flex:none;box-sizing:content-box;width:1rem;height:1rem;padding:.4rem;color:#fff;background:var(--gold-grad);border-radius:50%;stroke-width:2}
.trust-list li{gap:1rem}
.touch-brand{max-width:360px}
.touch-brand img{width:230px}
.form-card{border-radius:18px;border-top:5px solid var(--gold)}
.field.ct .fico{position:absolute;left:1.1rem;top:1.25rem;z-index:1;width:1.2rem;height:1.2rem;color:var(--gold-deep);pointer-events:none}
.field.ct.select .fico{top:50%;translate:0 -50%}
.field.ct input,.field.ct select,.field.ct textarea{padding-left:3.3rem;border-radius:10px}
.field.ct label{left:3.3rem}
.field.ct.select select{padding-top:1.5rem}
.form-fine{display:flex;align-items:center;gap:.5rem}
.field.ct textarea::placeholder{color:transparent;transition:color .3s}
.field.ct textarea:focus::placeholder{color:#8A95A8}
.form-fine .ico{flex:none;width:1.05rem;height:1.05rem;color:var(--gold-deep)}
@media (max-width:980px){.ta-navy,.ta-line,.touch-art img{display:none}}
/* 4. map */
.location{background:var(--white)}
.map-card{position:relative;padding:.7rem;background:var(--white);border:1px solid rgba(212,175,55,.55);border-radius:12px;box-shadow:0 40px 70px -40px rgba(7,26,61,.6)}
.map-frame{position:relative;overflow:hidden;height:clamp(300px,38vw,430px);border-radius:8px;background:var(--soft)}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.map-empty{display:grid;place-content:center;justify-items:center;gap:.8rem;height:100%;padding:2rem;text-align:center;color:var(--muted);background:var(--wm) 50% 50%/min(60%,420px) auto no-repeat,linear-gradient(135deg,#EEF2FA,#E2E9F6)}
.map-empty .ico{width:2.4rem;height:2.4rem;color:var(--gold-deep)}
.map-empty p{max-width:26rem;margin:0}
.map-dir{position:absolute;right:1.6rem;bottom:1.6rem;box-shadow:0 18px 30px -14px rgba(7,26,61,.7)}
.map-dir[data-placeholder]{opacity:.55;pointer-events:none}

/* responsive */
@media (max-width:980px){
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .touch-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-hero-grid{min-height:0}
  .page-hero-copy{max-width:none;padding-block:2.2rem 2.4rem}
  .ch-photo{width:100%;clip-path:none;opacity:.35}
  .ch-photo::after{background:linear-gradient(90deg,rgba(7,26,61,.9),rgba(7,26,61,.5))}
  .ch-edge,.ch-tag,.ch-mark{display:none}
}
@media (max-width:600px){
  .info-grid{grid-template-columns:1fr}
  .form-card{padding:1.5rem 1.2rem}
  .form-grid{grid-template-columns:1fr}
  .map-dir{position:static;width:100%;margin-top:.7rem;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .page-hero h1{animation:none}
  .js .page-hero [data-reveal]{opacity:1!important}
}

/* ===== hero right side: arch photo, pulsing call badge and three floating contact cards ===== */
.ct-visual{position:relative;justify-self:end;width:min(100%,460px);min-height:370px;padding:0;margin-right:1.6rem}
.ct-sweep{position:absolute;right:-6%;top:6%;width:62%;height:3px;background:var(--gold-grad);rotate:-38deg;box-shadow:0 0 24px rgba(243,214,117,.55);opacity:.9}
.ct-orbit{position:absolute;left:4%;top:2%;width:68%;aspect-ratio:1;border:1.5px dashed rgba(243,214,117,.5);border-radius:50%;animation:ctSpin 70s linear infinite}
@keyframes ctSpin{to{rotate:360deg}}
.ct-arch{position:absolute;left:0;top:0;width:56%;aspect-ratio:3/4;margin:0;overflow:hidden;background:var(--navy);border-radius:999px 999px 26px 26px;box-shadow:0 0 0 6px rgba(255,255,255,.1),0 0 0 8px var(--gold),0 44px 70px -34px rgba(2,9,28,.9)}
.ct-arch .bl-pic{position:absolute;inset:0}
.ct-arch img{object-position:50% 45%}
.ct-call{position:absolute;left:-1.6rem;top:50%;z-index:3;display:grid;place-items:center;width:72px;height:72px;color:var(--navy);background:var(--gold-grad);border-radius:50%;box-shadow:0 0 0 6px rgba(243,214,117,.22),0 24px 36px -14px rgba(0,0,0,.75);transition:transform .4s var(--ease)}
.ct-call:hover{transform:scale(1.08)}
.ct-call .ico{width:1.8rem;height:1.8rem;animation:ctRing 2.4s ease-in-out infinite;transform-origin:50% 50%}
.ct-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(243,214,117,.8);animation:ctPulse 2.4s ease-out infinite}
.ct-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(243,214,117,.6);animation:ctPulse 2.4s ease-out .8s infinite}
@keyframes ctPulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
@keyframes ctRing{0%,60%,100%{rotate:0deg}65%{rotate:-14deg}70%{rotate:12deg}75%{rotate:-10deg}80%{rotate:8deg}85%{rotate:0deg}}
.ct-cards{position:absolute;right:-1.2rem;top:12%;z-index:2;display:grid;gap:.7rem;width:min(58%,270px)}
.ct-card{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem .9rem .9rem;background:#fff;border-radius:16px;box-shadow:0 28px 44px -24px rgba(2,9,28,.85);transition:transform .45s var(--ease),box-shadow .45s}
.ct-cards li:nth-child(2) .ct-card{margin-left:-1.2rem}
.ct-cards li:nth-child(3) .ct-card{margin-left:.4rem}
.ct-card:hover{transform:translateX(-6px) translateY(-3px);box-shadow:0 36px 54px -24px rgba(2,9,28,.95),0 0 0 2px var(--gold)}
.ct-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--gold-hi);background:var(--navy);border-radius:50%;box-shadow:0 0 0 3px rgba(212,175,55,.45)}
.ct-ico .ico{width:1.2rem;height:1.2rem}
.ct-txt{display:grid;min-width:0;line-height:1.25}
.ct-txt small{font:700 .6rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.ct-txt b{margin-top:.3rem;font-size:.85rem;font-weight:800;color:var(--navy);overflow-wrap:anywhere}
.ct-card[data-placeholder] .ct-txt b{font-weight:600;font-size:.82rem;color:var(--muted)}
.js:not(.no-anim) [data-ctv-in]{opacity:0}
@media (max-width:900px){.ct-visual{width:min(100%,430px);justify-self:center;min-height:560px;margin:5rem 0 0}.ct-arch{left:0;width:60%}.ct-cards{top:auto;bottom:0;right:0;width:min(72%,300px)}.ct-call{top:38%}.ct-orbit{left:-4%}}
@media (max-width:420px){.ct-arch{width:64%}.ct-cards{width:78%}.ct-cards li:nth-child(n) .ct-card{margin-left:0}}
@media (prefers-reduced-motion:reduce){.ct-orbit,.ct-pulse,.ct-pulse::after,.ct-call .ico{animation:none}}

/* phones: centred arch photo, call badge on its edge, contact cards stacked full-width beneath */
@media (max-width:600px){
  .bl-hero-grid .bl-hero-copy{text-align:center}
  .bl-hero-copy .bl-crumbs ol{justify-content:center}
  .bl-hero-copy .bl-hero-text{margin-inline:auto}
  .bl-hero-actions{justify-content:center}
  .ct-visual{container-type:inline-size;display:flex;flex-direction:column;align-items:center;width:min(100%,360px);min-height:0;margin:3.2rem auto 0;padding-bottom:2.2rem}
  .ct-orbit{left:50%;top:-5%;width:92%;translate:-50% 0}
  .ct-sweep{right:-2%;top:2%;width:46%}
  .ct-arch{position:relative;left:auto;top:auto;width:70%;margin:0 auto}
  .ct-call{left:auto;right:calc(15% - 28px);top:38cqw;width:56px;height:56px}
  .ct-cards{position:relative;right:auto;top:auto;bottom:auto;width:100%;margin-top:-2.6rem;gap:.6rem}
  .ct-cards li:nth-child(n) .ct-card{margin-left:0}
  .ct-card{padding:.75rem 1rem .75rem .8rem;border-radius:14px}
  .ct-ico{width:40px;height:40px}
}