/* ==========================================================================
   Royal Financial Group — Contact page premium layer (v2 — editorial/ledger)
   Loaded ONLY on contact.html, after style.css. Adds new components for the
   institutional advisory contact experience. Does not redeclare or override
   brand tokens, header, nav, footer or hero — it reuses the variables and
   primitives already defined in style.css (--navy, --blue, --charcoal,
   --white, .register, .imgband, .papers/.paper, .contactlist, .btn, .field …)
   so every new section inherits the same light-corporate system.
 
   v2 deliberately trades the v1 card-grid/glassmorphism language for a more
   editorial, numbered, list-and-ledger language — a different structural and
   motion pattern for the same content and the same brand.
   ========================================================================== */
 
/* ---------- Shared icon sizing ------------------------------------------- */
.icon{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
 
/* ---------- Page-head photo fix ------------------------------------------
   style.css's .pagehead__bg rule hides the <img> by default and only shows
   it under max-width:700px or reduced-motion — that pattern assumes a
   <video> sits alongside it as the desktop source. This page's hero only
   has an <img> (no <video>), so without this override the background photo
   never appears above 700px width. Safe to force here since contact.css is
   loaded only on this page. */
.pagehead__bg img{display:block;}
 
/* ---------- Section 1 — Trust marquee (glass strip, sits on the hero) --- */
.trustmarquee{position:relative;z-index:3;margin-top:0;overflow:hidden;padding-block:clamp(36px,5.5vw,52px);margin-bottom:clamp(32px,5vw,56px);background:linear-gradient(135deg,var(--navy) 0%,var(--ink-raised) 100%);}
.trustmarquee__viewport{
  overflow:hidden;
  padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.trustmarquee__track{display:flex;gap:18px;width:max-content;animation:rfgMarquee 32s linear infinite;}
.trustmarquee__viewport:hover .trustmarquee__track,
.trustmarquee__viewport:focus-within .trustmarquee__track{animation-play-state:paused;}
@keyframes rfgMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.trustmarquee__item{
  display:flex;align-items:center;gap:10px;white-space:nowrap;flex:none;
  background:rgba(255,255,255,.10);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:14px 24px;
  color:var(--white);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
}
.trustmarquee__item .icon{width:15px;height:15px;color:#BFE0F5;flex:none;}
@media (prefers-reduced-motion:reduce){
  .trustmarquee__track{animation:none;flex-wrap:wrap;width:auto;}
  .trustmarquee__item[aria-hidden="true"]{display:none;}
}
@media (max-width:700px){
  .trustmarquee{margin-top:0;padding-block:clamp(28px,7vw,40px);margin-bottom:clamp(24px,6vw,40px);background:linear-gradient(135deg,var(--navy) 0%,var(--ink-raised) 100%);}
}
 
/* ---------- Section 2 — Executive consultation options (capability cards) */
.capgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.capcard{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,28px);box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.capcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue);}
.capcard:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-color:var(--blue);}
.capcard__top{display:flex;align-items:center;justify-content:space-between;}
.capcard__icon{
  width:52px;height:52px;flex:none;border-radius:14px;
  background:linear-gradient(135deg,var(--navy),var(--ink-raised));
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease-soft);
}
.capcard:hover .capcard__icon{transform:scale(1.08) rotate(-4deg);}
.capcard__icon .icon{width:24px;height:24px;color:var(--white);stroke-width:1.5;}
.capcard__ref{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--rule-strong);}
.capcard h3{margin:0;font-size:19px;}
.capcard p{margin:0;color:var(--text-soft);font-size:14.5px;line-height:1.62;flex:1;}
.capcard__tags{display:flex;flex-wrap:wrap;gap:8px;}
.capcard__go{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
  opacity:0;transform:translateX(-6px);transition:all .3s var(--ease-soft);
}
.capcard:hover .capcard__go,.capcard:focus-visible .capcard__go{opacity:1;transform:translateX(0);}
.capcard__go .icon{width:13px;height:13px;}
@media (max-width:980px){.capgrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.capgrid{grid-template-columns:1fr;}}
 
/* ---------- Section 3 — Premium contact form: 3-step wizard -------------- */
.wizard{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-lg);}
 
.wizard__rail{display:flex;align-items:flex-start;margin-bottom:10px;}
.wizard__step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;}
.wizard__num{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--border);background:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:13px;color:var(--text-soft);
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft),color .3s var(--ease-soft);
}
.wizard__label{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap;text-align:center;}
.wizard__step.is-active .wizard__num{border-color:var(--navy);background:var(--navy);color:var(--white);}
.wizard__step.is-active .wizard__label{color:var(--navy);}
.wizard__step.is-done .wizard__num{border-color:var(--blue);background:var(--blue);color:var(--white);}
.wizard__step.is-done .wizard__label{color:var(--blue);}
.wizard__connector{flex:1;height:1px;background:var(--border);margin:17px 10px 0;position:relative;overflow:hidden;}
.wizard__connector::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-soft);}
.wizard__connector.is-filled::after{transform:scaleX(1);}
@media (max-width:640px){.wizard__label{display:none;} .wizard__connector{margin:16px 6px 0;}}
 
.wizard__progress{display:flex;align-items:center;gap:14px;margin:22px 0 8px;}
.wizard__bar{flex:1;height:4px;border-radius:999px;background:var(--border);overflow:hidden;}
.wizard__fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--navy));border-radius:999px;transition:width .4s var(--ease-soft);}
.wizard__pct{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--navy);white-space:nowrap;min-width:34px;text-align:right;}
 
.wizardform{margin-top:22px;}
.wizardform__pane{display:none;}
.wizardform__pane.is-active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;animation:rfgPaneIn .45s var(--ease-soft);}
@keyframes rfgPaneIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
.wizardform__title{grid-column:1/-1;margin-bottom:4px;}
.wizardform__title h3{font-size:17px;color:var(--navy);}
.wizardform__title p{font-size:13.5px;color:var(--text-soft);margin-top:4px;}
.wizardform__nav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.wizardform__nav--end{justify-content:flex-end;}
 
/* Floating-label fields (carried over pattern, still the clearest premium
   affordance for a light form) */
.field--float{position:relative;}
.field--float input,.field--float select,.field--float textarea{padding-top:19px;padding-bottom:9px;}
.field--float textarea{padding-top:22px;}
.field--float > label{
  position:absolute;left:15px;top:14px;margin:0;
  font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:#98A2AF;
  background:var(--white);padding:0 4px;pointer-events:none;
  transition:top .2s var(--ease-soft),font-size .2s var(--ease-soft),color .2s var(--ease-soft),font-family .2s var(--ease-soft);
}
.field--float.is-filled > label,.field--float:focus-within > label{
  top:-8px;left:11px;font-size:10px;font-family:var(--mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
}
.field--float.is-invalid input,.field--float.is-invalid select,.field--float.is-invalid textarea{border-color:#C0392B;}
.field--float.is-invalid:focus-within input,.field--float.is-invalid:focus-within select{box-shadow:0 0 0 3px rgba(192,57,43,.13);}
.field--float.is-valid input,.field--float.is-valid select,.field--float.is-valid textarea{border-color:#2E8B57;}
.field__err{display:block;min-height:15px;font-size:12px;color:#C0392B;margin-top:5px;font-family:var(--sans);}
.field__label-top{display:block;margin-bottom:9px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);}
 
.segctrl{display:flex;flex-wrap:wrap;gap:8px;}
.segctrl input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.segctrl label{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:11px 16px;border:1px solid var(--border);border-radius:999px;color:var(--text-soft);cursor:pointer;transition:all .2s var(--ease-soft);}
.segctrl label:hover{border-color:var(--blue);color:var(--navy);}
.segctrl input:checked + label{background:var(--navy);border-color:var(--navy);color:var(--white);}
.segctrl input:focus-visible + label{outline:2px solid var(--blue);outline-offset:2px;}
 
.wizard__success{display:none;flex-direction:column;align-items:flex-start;gap:16px;padding:16px 0 8px;}
.wizard.is-success .wizard__rail,.wizard.is-success .wizard__progress,.wizard.is-success .wizardform{display:none;}
.wizard.is-success .wizard__success{display:flex;}
.wizard__success .tick{width:54px;height:54px;color:var(--blue);flex:none;}
.wizard__success .tick circle{stroke-dasharray:170;stroke-dashoffset:170;animation:rfgTickCircle .7s var(--ease-soft) forwards;}
.wizard__success .tick path{stroke-dasharray:44;stroke-dashoffset:44;animation:rfgTickCheck .45s var(--ease-soft) .55s forwards;}
@keyframes rfgTickCircle{to{stroke-dashoffset:0;}}
@keyframes rfgTickCheck{to{stroke-dashoffset:0;}}
.wizard__success h3{font-size:22px;}
.wizard__success p{color:var(--text-soft);max-width:52ch;}
 
.formwrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start;}
@media (max-width:960px){.formwrap{grid-template-columns:1fr;}}
@media (max-width:640px){.wizardform__pane.is-active{grid-template-columns:1fr;}}
 
.sidecard{display:flex;flex-direction:column;gap:28px;}
.sidecard__block{background:var(--bg-accent);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(22px,3vw,28px);}
.sidecard__block h3{font-size:16px;margin-bottom:10px;}
.sidecard__block p{font-size:14px;color:var(--text-soft);}
 
/* ---------- Section 4 — Client journey: vertical alternating timeline --- */
.tlz{position:relative;max-width:920px;margin-inline:auto;}
.tlz__line{position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:var(--border);transform:translateX(-50%);}
.tlz__linefill{position:absolute;left:50%;top:6px;width:2px;height:0%;background:linear-gradient(180deg,var(--blue),var(--navy));transform:translateX(-50%);transition:height 1.1s var(--ease-soft);}
.tlz__item{position:relative;display:grid;grid-template-columns:1fr 60px 1fr;align-items:start;gap:0;margin-bottom:clamp(30px,4vw,48px);}
.tlz__item:last-child{margin-bottom:0;}
.tlz__dot{
  grid-column:2;width:40px;height:40px;border-radius:50%;background:var(--white);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:14px;color:var(--text-soft);
  position:relative;z-index:1;margin-inline:auto;transition:border-color .4s var(--ease-soft),background .4s var(--ease-soft),color .4s var(--ease-soft);
}
.tlz__item.is-in .tlz__dot{border-color:var(--blue);background:var(--navy);color:#fff;}
.tlz__card{grid-column:1;text-align:right;padding-right:32px;}
.tlz__item:nth-child(even) .tlz__card{grid-column:3;text-align:left;padding-right:0;padding-left:32px;}
.tlz__card h3{font-size:17px;}
.tlz__card p{font-size:14px;line-height:1.6;color:var(--text-soft);margin-top:6px;}
@media (max-width:760px){
  .tlz__line,.tlz__linefill{left:20px;transform:none;}
  .tlz__item{grid-template-columns:40px 1fr;gap:16px;}
  .tlz__dot{grid-column:1;margin-inline:0;}
  .tlz__card,.tlz__item:nth-child(even) .tlz__card{grid-column:2;text-align:left;padding:0;}
}
 
/* ---------- Section 5 — Why clients contact us: numbered list ----------- */
.numlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border);}
.numlist__item{display:flex;gap:22px;padding:clamp(24px,3vw,30px) 0;border-bottom:1px solid var(--border);transition:background .25s var(--ease-soft);}
.numlist__item:nth-child(odd){padding-right:clamp(16px,3vw,40px);border-right:1px solid var(--border);}
.numlist__item:nth-child(even){padding-left:clamp(16px,3vw,40px);}
.numlist__n{font-family:var(--serif);font-weight:600;font-size:30px;color:var(--rule-strong);flex:none;line-height:1;min-width:46px;transition:color .3s var(--ease-soft);}
.numlist__item:hover .numlist__n{color:var(--blue);}
.numlist__item h3{font-size:17px;}
.numlist__item p{font-size:14.5px;line-height:1.6;color:var(--text-soft);margin-top:7px;}
@media (max-width:760px){
  .numlist{grid-template-columns:1fr;}
  .numlist__item:nth-child(odd){border-right:0;padding-right:0;}
  .numlist__item:nth-child(even){padding-left:0;}
}
 
/* ---------- Section 6 — Institutional metrics: photo band --------------- */
.imgband__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,44px);padding-top:clamp(26px,4vw,36px);border-top:1px solid rgba(255,255,255,.25);}
.imgband__stat-num{font-family:var(--mono);font-weight:600;font-size:clamp(26px,3.2vw,36px);color:#BFE0F5;font-variant-numeric:tabular-nums;line-height:1;}
.imgband__stat-lab{margin-top:9px;font-size:13px;color:rgba(255,255,255,.86);}
@media (max-width:760px){.imgband__stats{grid-template-columns:repeat(2,1fr);}}
 
/* Final CTA reuses .imgband as a bigger, centered variant */
.imgband--cta{min-height:clamp(340px,40vw,440px);display:flex;align-items:center;text-align:center;}
.imgband--cta .wrap{width:100%;}
.imgband--cta .imgband__inner{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:20px;}
.imgband--cta .imgband__inner .eyebrow{justify-content:center;}
.ctarow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
 
/* .btn--onink is a navy-fill button meant for LIGHT backgrounds — on this
   navy photo band it would render navy-on-navy. .btn--oncta is the filled
   "primary" treatment for dark/photo bands: white fill, navy text. */
.btn--oncta{background:var(--white);border-color:var(--white);color:var(--navy);}
.btn--oncta:hover{background:var(--blue);border-color:var(--blue);color:var(--white);box-shadow:var(--shadow-md);}
 
/* ---------- Section 7 — Dubai office: map with overlay card -------------- */
.mapfeature{position:relative;border-radius:var(--radius);overflow:hidden;min-height:520px;border:1px solid var(--border);}
.mapfeature__map{position:absolute;inset:0;background:var(--bg-accent);}
.mapfeature__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.12) contrast(1.04);}
.mapfeature__card{
  position:relative;z-index:1;max-width:400px;margin:clamp(20px,3vw,32px);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--radius);padding:clamp(24px,3vw,30px);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:18px;
}
.ctarow--tight{gap:10px;}
.ctarow--tight .btn{font-size:13px;padding:11px 18px;}
@media (max-width:760px){
  .mapfeature{min-height:0;display:flex;flex-direction:column;}
  .mapfeature__map{position:relative;height:260px;}
  .mapfeature__card{margin:16px 0 0;max-width:none;background:var(--white);backdrop-filter:none;box-shadow:none;padding:0;}
}
 
/* ---------- Section 8 — FAQ, two-column ---------------------------------- */
.faq2{columns:2 280px;column-gap:44px;border-top:1px solid var(--border);}
.faq2 .faq__item{break-inside:avoid;-webkit-column-break-inside:avoid;}
@media (max-width:820px){.faq2{columns:1;}}
.faq__item{border-bottom:1px solid var(--border);}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--serif);font-weight:500;font-size:16.5px;line-height:1.4;color:var(--navy);}
.faq__ic{width:17px;height:17px;flex:none;color:var(--blue);transition:transform .3s var(--ease-soft);}
.faq__item.is-open .faq__ic{transform:rotate(45deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-soft);}
.faq__a p{padding:0 2px 20px;font-size:15px;color:var(--text-soft);max-width:60ch;}
 
/* ---------- Section 9 — Thought leadership: scroll-snap carousel -------- */
.carousel__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none;-ms-overflow-style:none;}
.carousel__track::-webkit-scrollbar{display:none;}
.carousel__track .paper{flex:0 0 auto;width:clamp(250px,30vw,330px);scroll-snap-align:start;}
.carousel__nav{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;}
.carousel__btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);transition:all .25s var(--ease-soft);flex:none;}
.carousel__btn:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-sm);}
.carousel__btn:disabled{opacity:.35;cursor:default;box-shadow:none;border-color:var(--border);color:var(--navy);}
.carousel__btn .icon{width:16px;height:16px;}
.paper__kicker{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);}
 
@media (prefers-reduced-motion:reduce){
  .capcard,.capcard__icon,.capcard__go,.tlz__dot,.numlist__n,.wizard__num,.wizard__connector::after,.wizard__fill{transition:none;}
  .wizardform__pane.is-active{animation:none;}
}
/* ---------- Optimization additions (paste at the very end of assets/contact.css) ---------- */
 
/* Footer headings are <h3> now (same look as the old <h4>) */
.foot h3{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}
 
/* Skip link for keyboard users */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:#0A1A2F;color:#fff;padding:10px 16px;border-radius:0 0 8px 8px;font:600 14px/1.2 system-ui,sans-serif;text-decoration:none}
.skip-link:focus{left:12px}
 
/* Replace three inline styles */
.section-head.section-head--center{margin-inline:auto;text-align:center;align-items:center}
.sidecard h3.sidecard__title{margin-top:14px}
.contactlist.contactlist--flush{border-top:0;padding-top:0}
 
/* "Prefer to read first" links line and links inside FAQ answers / ledes */
.capmore{margin-top:28px;font-size:15px;line-height:1.7}
.capmore a,.faq__a a,.section .lede a{color:#1783C1;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.capmore a:hover,.faq__a a:hover,.section .lede a:hover{text-decoration-thickness:2px}
 
/* Visible keyboard focus */
main a:focus-visible,main button:focus-visible,main [role="button"]:focus-visible,main input:focus-visible,main select:focus-visible,main textarea:focus-visible{outline:3px solid #1783C1;outline-offset:3px}