/* =========================================================
   GEMS Pay India Pvt Ltd — styles.css
   White + Royal Blue, with red & orange pulled from the
   company logo (navy shield, red wordmark, blue→orange swoosh).
   ========================================================= */

/* ---------------- Tokens ---------------- */
:root{
  /* Brand — sampled from the official GEMS Pay logo */
  --navy:      #0E1F4D;
  --navy-800:  #142A63;
  --royal:     #1D4ED8;
  --royal-700: #1740AE;
  --royal-50:  #EDF2FE;
  --red:       #D62027;
  --orange:    #F5811F;
  --orange-600:#DE6C0C;
  --orange-50: #FFF3E8;
  --gold:      #FFB020;

  /* Neutrals */
  --ink:   #101828;
  --body:  #475467;
  --muted: #75809A;
  --line:  #E3E8F2;
  --line-2:#EDF0F7;
  --white: #FFFFFF;
  --tint:  #F6F8FC;

  /* Type */
  --f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --r:  4px;
  --r2: 10px;
  --wrap: 1200px;

  --sh: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 10px 30px -12px rgba(14,31,77,.16);

  /* Brand swoosh, drawn from the logo mark */
  --swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 158 C170 52 385 26 600 62' stroke='%23F5811F' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3Cpath d='M0 192 C180 84 405 58 600 98' stroke='%232563EB' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--f-body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--royal); text-decoration:none; }
a:hover{ color:var(--royal-700); }

h1,h2,h3,h4,h5{
  font-family:var(--f-display); color:var(--ink);
  margin:0 0 .5em; font-weight:700; letter-spacing:-.022em; line-height:1.1;
}
h1{ font-size:clamp(2.5rem,5.4vw,4.15rem); font-weight:800; letter-spacing:-.035em; }
h2{ font-size:clamp(1.7rem,3.1vw,2.5rem); }
h3{ font-size:1.24rem; }
h4{ font-size:1rem; }
p{ margin:0 0 1em; }

.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.container--mid{ max-width:880px; }

.ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.9;
     stroke-linecap:round; stroke-linejoin:round; flex:none; }

::selection{ background:var(--orange); color:#fff; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} html{scroll-behavior:auto;} }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-display); font-weight:600; font-size:.94rem;
  padding:.72rem 1.25rem; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; transition:background .16s,color .16s,border-color .16s,transform .16s;
  white-space:nowrap; letter-spacing:-.01em;
}
.btn .ic{ width:1.05em; height:1.05em; }
.btn--primary{ background:var(--royal); color:#fff; border-color:var(--royal); }
.btn--primary:hover{ background:var(--royal-700); border-color:var(--royal-700); color:#fff; }
.btn--orange{ background:var(--orange); color:#fff; border-color:var(--orange); }
.btn--orange:hover{ background:var(--orange-600); border-color:var(--orange-600); color:#fff; }
.btn--line{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--line:hover{ border-color:var(--ink); color:var(--ink); }
.btn--lg{ padding:.92rem 1.6rem; font-size:1rem; }
.btn--sm{ padding:.5rem .85rem; font-size:.85rem; }
.btn--full{ width:100%; }
.btn:active{ transform:translateY(1px); }

/* ---------------- Eyebrow / section headers ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-display); font-weight:600; font-size:.775rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--royal); margin:0 0 1.1rem;
}
.eyebrow--light{ color:#A9BEEC; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }
.dot--o{ background:var(--orange); }

.num{
  font-family:var(--f-display); font-weight:700; font-size:.8rem; letter-spacing:.1em;
  color:var(--orange); display:block; padding-top:.55rem;
  border-top:2px solid var(--orange);
  width:2.6rem; margin:0 0 .4rem;
}
.num--light{ color:var(--orange); }

.shead{
  display:grid; grid-template-columns:5rem 1fr; gap:0 2rem;
  margin-bottom:3.2rem; max-width:900px;
}
.shead h2{ margin-bottom:.55rem; }
.shead p{ color:var(--body); font-size:1.06rem; margin:0; max-width:62ch; }
.shead--stack{ grid-template-columns:5rem 1fr; }

.fine{ font-size:.86rem; color:var(--muted); margin:1.4rem 0 0; }
.fine--l{ text-align:center; margin-top:.9rem; }

@media (max-width:680px){
  .shead,.shead--stack{ grid-template-columns:1fr; gap:0; margin-bottom:2.4rem; }
  .shead .num{ margin-bottom:.85rem; }
  .sect{ padding:3.6rem 0; }
}

/* ---------------- Sections ---------------- */
.sect{ padding:5.5rem 0; }
.sect--tint{ background:var(--tint); border-block:1px solid var(--line); }
.sect--dark{ background:var(--navy); color:#C3CFEA; }
.sect--dark h2{ color:#fff; }

/* ---------------- Topbar ---------------- */
.topbar{ background:var(--navy); color:#B9C7E6; font-size:.8rem; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:38px; }
.topbar a{ color:#B9C7E6; display:inline-flex; align-items:center; gap:.4rem; }
.topbar a:hover{ color:#fff; }
.topbar__l,.topbar__r{ display:flex; align-items:center; gap:.85rem; }
.topbar__sep{ width:1px; height:13px; background:rgba(255,255,255,.18); }
.flagdot{ display:inline-flex; align-items:center; gap:.45rem; color:#fff; font-weight:500; }
.flagdot::before{
  content:""; width:16px; height:11px; border-radius:1px; flex:none;
  background:linear-gradient(to bottom,#FF9933 0 33.3%,#fff 33.3% 66.6%,#138808 66.6%);
}
@media (max-width:860px){ .topbar__r{ display:none; } .topbar__in{ justify-content:center; } }
@media (max-width:520px){ .topbar__l a:nth-child(3),.topbar__l .topbar__sep{ display:none; } }

/* ---------------- Navbar ---------------- */
.nav{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line); transition:box-shadow .2s;
}
.nav.is-scrolled{ box-shadow:0 1px 0 var(--line), 0 8px 22px -18px rgba(14,31,77,.4); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:76px; }

.brand{
  background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.brand__img{ height:44px; width:auto; }
.brand:active{ transform:scale(.985); }

.nav__links{ display:flex; align-items:center; gap:.35rem; }
.nav__links > a{
  font-family:var(--f-display); font-weight:500; font-size:.925rem; color:var(--ink);
  padding:.5rem .72rem; border-radius:var(--r); position:relative; letter-spacing:-.008em;
}
.nav__links > a:not(.btn):hover{ color:var(--royal); }
.nav__links > a:not(.btn).is-active::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.1rem;
  height:2px; background:var(--orange);
}
.nav__cta{ margin-left:.6rem; color:#fff !important; }
.nav__burger{
  display:none; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.nav__burger .ic{ width:22px; height:22px; }

@media (max-width:1000px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; background:#fff; border-bottom:1px solid var(--line); padding:.5rem 24px 1.1rem;
    box-shadow:var(--sh-2); display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__links > a{ padding:.85rem .25rem; border-bottom:1px solid var(--line-2); border-radius:0; }
  .nav__links > a:not(.btn).is-active::after{ left:.25rem; right:auto; width:22px; bottom:.5rem; }
  .nav__cta{ margin:.9rem 0 0; border-radius:var(--r); }
  .brand__img{ height:38px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding-top:4.6rem; }
.hero__grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:0 4rem; align-items:stretch;
}

.hero__copy{ padding-bottom:4.6rem; }
.hero h1{ margin-bottom:1.15rem; }
.uline{ background:linear-gradient(to top, rgba(245,129,31,.32) 0 .2em, transparent .2em); }

.hero__deck{ font-size:1.14rem; color:var(--body); max-width:47ch; margin-bottom:2rem; }
.hero__deck strong{ color:var(--ink); font-weight:600; }
.hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2.6rem; }

.hero__stats{ display:flex; gap:0; margin:0; border-top:1px solid var(--line); }
.hero__stats > div{ padding:1.1rem 1.4rem 0 0; margin-right:1.4rem; border-right:1px solid var(--line); }
.hero__stats > div:last-child{ border-right:0; margin-right:0; }
.hero__stats dt{
  font-family:var(--f-display); font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:.2rem;
}
.hero__stats dd{ margin:0; font-family:var(--f-display); font-weight:700; font-size:1.06rem; color:var(--ink); }

/* Navy panel bleeding to the right edge */
.hero__media{
  position:relative; background:var(--navy); padding:2.6rem 2.6rem 2.6rem 3.2rem;
  display:flex; align-items:center; justify-content:center;
}
.hero__media::after{
  content:""; position:absolute; left:100%; top:0; bottom:0; width:50vw; background:var(--navy);
}
.hero__media::before{
  content:""; position:absolute; inset:auto 0 0 0; height:150px;
  background-image:var(--swoosh); background-size:130% 100%;
  background-position:left bottom; background-repeat:no-repeat; opacity:.55;
}
.shot{ margin:0; position:relative; z-index:1; max-width:330px; width:100%; }
.shot img{
  width:100%; border-radius:var(--r2); border:1px solid rgba(255,255,255,.14);
}
.shot figcaption{
  margin-top:.85rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:#93A7D6; font-family:var(--f-display); font-weight:600;
  display:flex; align-items:center; gap:.5rem;
}
.shot figcaption::before{ content:""; width:18px; height:2px; background:var(--orange); }

/* Hero product film (replaces the still) */
.shot--video{ max-width:420px; }
.shot__vid{
  position:relative; border-radius:var(--r2); overflow:hidden;
  border:1px solid rgba(255,255,255,.14); background:#08132E; line-height:0;
}
.shot__vid video{ width:100%; height:auto; display:block; }
.vsound{
  position:absolute; right:.6rem; bottom:.6rem; width:34px; height:34px; padding:0;
  display:grid; place-items:center; cursor:pointer; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(8,19,46,.62); color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background .16s, border-color .16s;
}
.vsound:hover{ background:var(--orange); border-color:var(--orange); }
.vsound .ic{ width:16px; height:16px; }

/* Anchored to the figure, so it always sits on the film — not on the caption */
.hero__badge{
  position:absolute; left:-2.2rem; bottom:3.2rem; z-index:2;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--orange);
  padding:.9rem 1.1rem; display:flex; align-items:center; gap:.75rem; box-shadow:var(--sh-2);
}
.hero__badge b{ font-family:var(--f-display); font-size:2rem; font-weight:800; color:var(--navy); line-height:1; }
.hero__badge span{ font-size:.78rem; line-height:1.3; color:var(--body); }

/* Highlight strip */
.strip{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-top:0;
}
.strip li{
  display:flex; align-items:flex-start; gap:.8rem; padding:1.5rem 1.4rem;
  border-right:1px solid var(--line);
}
.strip li:last-child{ border-right:0; }
.strip .ic{ width:24px; height:24px; color:var(--royal); margin-top:2px; }
.strip li:nth-child(2) .ic{ color:var(--orange); }
.strip li:nth-child(3) .ic{ color:var(--red); }
.strip b{ display:block; font-family:var(--f-display); color:var(--ink); font-size:.98rem; }
.strip span{ font-size:.855rem; color:var(--muted); }

@media (max-width:1000px){
  .hero{ padding-top:3rem; }
  .hero__grid{ grid-template-columns:1fr; gap:2.6rem; }
  .hero__copy{ padding-bottom:0; }
  .hero__media{
    padding:2.2rem; border-radius:var(--r2);
    margin-inline:0;
  }
  .hero__media::after{ display:none; }
  .hero__media::before{ height:110px; }
  .shot--video{ max-width:560px; }
  .strip{ grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); margin-top:3rem; }
  .strip li:nth-child(2){ border-right:0; }
  .strip li:nth-child(1),.strip li:nth-child(2){ border-bottom:1px solid var(--line); }
}
@media (max-width:560px){
  .strip{ grid-template-columns:1fr; }
  .strip li{ border-right:0; border-bottom:1px solid var(--line); }
  .strip li:last-child{ border-bottom:0; }
  .hero__stats{ flex-direction:column; }
  .hero__stats > div{ border-right:0; margin-right:0; padding:.85rem 0 0; border-bottom:1px solid var(--line-2); }
  .hero__stats > div:last-child{ border-bottom:0; }
  .hero__media{ flex-direction:column; align-items:stretch; padding:1.6rem; }
  .shot{ max-width:none; }
  .shot--video{ max-width:none; }
  .hero__badge{ position:static; margin-top:1.2rem; width:max-content; max-width:100%; }
}

/* =========================================================
   01 · VALUE PROPS
   ========================================================= */
.vprops{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.vprops article{ padding:2rem 2rem 0 0; border-right:1px solid var(--line); margin-right:2rem; }
.vprops article:last-child{ border-right:0; margin-right:0; padding-right:0; }
.vprops__n{
  font-family:var(--f-display); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); font-weight:600; display:block; margin-bottom:.7rem;
}
.vprops h3{ font-size:1.2rem; margin-bottom:.5rem; }
.vprops p{ font-size:.97rem; margin:0; }
@media (max-width:900px){
  .vprops{ grid-template-columns:1fr; }
  .vprops article{ border-right:0; margin-right:0; padding:1.6rem 0; border-bottom:1px solid var(--line); }
  .vprops article:last-child{ border-bottom:0; }
}

/* =========================================================
   02 · ANATOMY
   ========================================================= */
.anat{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:start; }
.anat__fig{ margin:0; background:#fff; border:1px solid var(--line); padding:1.6rem; }
.anat__fig img{ width:100%; }
.anat__fig figcaption{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line-2);
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-family:var(--f-display); font-weight:600;
}
.anat__list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.anat__list li{ display:flex; gap:1.25rem; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.anat__list li:first-child{ padding-top:0; }
.anat__list li:last-child{ border-bottom:0; }
.anat__list span{
  font-family:var(--f-display); font-weight:700; font-size:.82rem; color:var(--orange);
  width:2rem; flex:none; padding-top:.2rem;
}
.anat__list b{ display:block; font-family:var(--f-display); color:var(--ink); font-size:1.03rem; margin-bottom:.1rem; }
.anat__list div{ font-size:.95rem; }
@media (max-width:900px){ .anat{ grid-template-columns:1fr; gap:2.4rem; } }

/* =========================================================
   03 · FEATURES
   ========================================================= */
.feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feat{
  padding:2.1rem 2.2rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .18s;
}
.feat:hover{ background:var(--tint); }
.feat__ic{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--royal-50); color:var(--royal); border-radius:var(--r);
}
.feat__ic .ic{ width:22px; height:22px; }
.feat__ic--o{ background:var(--orange-50); color:var(--orange-600); }
.feat__ic--r{ background:#FDECEC; color:var(--red); }
.feat h3{ font-size:1.14rem; margin-bottom:.4rem; }
.feat p{ margin:0; font-size:.96rem; }
@media (max-width:760px){ .feats{ grid-template-columns:1fr; } }

/* Cash deposit navy panel */
.panel{
  margin-top:3.5rem; background:var(--navy); color:#C3CFEA;
  display:grid; grid-template-columns:1fr 1.2fr; gap:0; position:relative; overflow:hidden;
}
.panel__head{ padding:2.6rem 2.6rem; position:relative; }
.panel__head h3{ color:#fff; font-size:1.7rem; margin-bottom:.5rem; }
.panel__deck{ margin:0; color:#A9BEEC; font-size:.99rem; }
.panel__opts{ display:grid; grid-template-columns:1fr 1fr; border-left:1px solid rgba(255,255,255,.13); }
.popt{ padding:2.6rem 2rem; border-right:1px solid rgba(255,255,255,.13); }
.popt:last-child{ border-right:0; }
.popt__tag{
  font-family:var(--f-display); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--navy); background:var(--orange); padding:.22rem .5rem; display:inline-block; margin-bottom:.9rem;
}
.popt:last-child .popt__tag{ background:#8FB0FF; }
.popt h4{ color:#fff; font-size:1.1rem; margin-bottom:.35rem; }
.popt p{ margin:0; font-size:.93rem; color:#A9BEEC; }
@media (max-width:900px){
  .panel{ grid-template-columns:1fr; }
  .panel__opts{ border-left:0; border-top:1px solid rgba(255,255,255,.13); }
  .panel__head{ padding:2.2rem 1.6rem; }
  .popt{ padding:1.8rem 1.6rem; }
}
@media (max-width:560px){
  .panel__opts{ grid-template-columns:1fr; }
  .popt{ border-right:0; border-bottom:1px solid rgba(255,255,255,.13); }
  .popt:last-child{ border-bottom:0; }
}

/* =========================================================
   04 · SERVICES
   ========================================================= */
.grid-svc{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line); background:#fff;
}
.svc{
  display:flex; align-items:center; gap:.85rem; padding:1.25rem 1.3rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .16s, color .16s;
}
.svc .ic{ width:21px; height:21px; color:var(--royal); transition:color .16s; }
.svc b{ font-family:var(--f-display); font-weight:600; font-size:.95rem; color:var(--ink); letter-spacing:-.008em; }
.svc:hover{ background:var(--navy); }
.svc:hover .ic{ color:var(--orange); }
.svc:hover b{ color:#fff; }
.svc--soon{ background:var(--orange-50); }
.svc--soon .ic{ color:var(--orange-600); }
.svc--soon:hover{ background:var(--orange); }
.svc--soon:hover .ic,.svc--soon:hover b{ color:#fff; }
@media (max-width:900px){ .grid-svc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid-svc{ grid-template-columns:1fr; } }

/* =========================================================
   05 · MODELS
   ========================================================= */
.models{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.model{
  border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;
  transition:border-color .2s, box-shadow .2s;
}
.model:hover{ border-color:#C9D5EC; box-shadow:var(--sh-2); }
.model--hero{ border-color:var(--navy); }
.model__img{
  background:var(--tint); border-bottom:1px solid var(--line);
  height:400px; display:flex; align-items:center; justify-content:center;
  padding:1.6rem; overflow:hidden; position:relative;
}
.model__img::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line);
}
.model--hero .model__img::after{ background:var(--orange); }
.model__img img{ height:100%; max-height:350px; width:auto; object-fit:contain; }
.model__body{ padding:1.9rem 1.9rem 2rem; display:flex; flex-direction:column; flex:1; }
.model__tag{
  font-family:var(--f-display); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--royal); margin-bottom:.6rem;
}
.model__tag--o{ color:var(--orange-600); }
.model h3{ font-size:1.75rem; margin-bottom:.45rem; }
.model__body > p{ font-size:.97rem; }
.ticks{ list-style:none; margin:1.1rem 0 1.8rem; padding:0; flex:1; }
.ticks li{ position:relative; padding:.44rem 0 .44rem 1.6rem; font-size:.95rem; color:var(--body); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.95em; width:9px; height:9px;
  border-left:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(-45deg) translateY(-2px);
}
@media (max-width:860px){ .models{ grid-template-columns:1fr; } .model__img{ height:330px; } }

/* =========================================================
   06 · WHITE LABEL
   ========================================================= */
.wl{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.wl__copy h2{ margin-bottom:.7rem; }
.wl__copy > p{ color:#B4C4E4; font-size:1.05rem; max-width:48ch; }
.wl__list{ list-style:none; margin:1.9rem 0 0; padding:0; }
.wl__list li{
  display:flex; align-items:center; gap:.9rem; padding:.95rem 0;
  border-top:1px solid rgba(255,255,255,.12); font-family:var(--f-display);
  font-weight:500; color:#fff; font-size:1rem;
}
.wl__list li:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.wl__list .ic{ width:20px; height:20px; color:var(--orange); }
.wl__fig{ margin:0; }
.wl__fig img{ width:100%; border-radius:var(--r2); border:1px solid rgba(255,255,255,.14); }
.wl__fig figcaption{
  margin-top:.9rem; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  color:#8FA4D2; font-family:var(--f-display); font-weight:600;
  display:flex; align-items:center; gap:.55rem;
}
.wl__fig figcaption::before{ content:""; width:18px; height:2px; background:var(--orange); flex:none; }
@media (max-width:900px){ .wl{ grid-template-columns:1fr; gap:2.4rem; } }

/* =========================================================
   07 · GALLERY
   ========================================================= */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.gal figure{ margin:0; }
.gal img{ width:100%; height:340px; object-fit:cover; object-position:center 30%; border:1px solid var(--line); }
.gal video{ width:100%; height:340px; object-fit:cover; border:1px solid var(--line); border-radius:4px; }
.gal.shot--video .shot__vid video{ width:100%; height:auto; display:block; border-radius:var(--r2); border:1px solid var(--line); }
.gal figcaption{
  margin-top:.8rem; font-size:.85rem; color:var(--muted);
  padding-left:.8rem; border-left:2px solid var(--orange);
}
@media (max-width:860px){ .gal{ grid-template-columns:1fr 1fr; } .gal figure:last-child{ grid-column:span 2; } .gal img{ height:280px; } .gal video{ height:280px; } }
@media (max-width:560px){ .gal{ grid-template-columns:1fr; } .gal figure:last-child{ grid-column:auto; } }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--line); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-weight:600; font-size:1.06rem; color:var(--ink);
  letter-spacing:-.012em;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary .ic{ width:20px; height:20px; color:var(--orange); transition:transform .22s; }
.faq__i[open] summary .ic{ transform:rotate(180deg); }
.faq__i p{ margin:0 0 1.3rem; font-size:.99rem; max-width:70ch; }

/* =========================================================
   CTA BAND
   ========================================================= */
.band{ background:var(--navy); position:relative; overflow:hidden; }
.band::after{
  content:""; position:absolute; right:-4%; bottom:-30%; width:46%; height:150%;
  background-image:var(--swoosh); background-size:100% 100%;
  background-repeat:no-repeat; opacity:.45; pointer-events:none;
}
.band__in{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:3.4rem 24px; position:relative; z-index:1;
}
.band h2{ color:#fff; margin-bottom:.25rem; }
.band p{
  margin:0; color:var(--orange); font-family:var(--f-display); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:.85rem;
}
@media (max-width:760px){ .band__in{ flex-direction:column; align-items:flex-start; padding:2.6rem 24px; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ display:grid; grid-template-columns:1fr .9fr; gap:4rem; align-items:start; }
.contact__deck{ font-size:1.05rem; max-width:44ch; }
.clist{ list-style:none; margin:2rem 0 0; padding:0; }
.clist li{ display:flex; gap:1rem; padding:1.05rem 0; border-top:1px solid var(--line); }
.clist li:last-child{ border-bottom:1px solid var(--line); }
.ci{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:var(--royal-50); color:var(--royal); border-radius:var(--r);
}
.ci .ic{ width:19px; height:19px; }
.clist b{ display:block; font-family:var(--f-display); color:var(--ink); font-size:.97rem; margin-bottom:.12rem; }
.clist div{ font-size:.94rem; line-height:1.55; }

.brs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.br{
  border:1px solid var(--line); padding:.55rem .85rem; font-size:.83rem; color:var(--muted);
  border-left:3px solid var(--orange);
}
.br b{ font-family:var(--f-display); color:var(--ink); display:block; font-size:.92rem; }
/* "Who it's for" row under the introduction */
.brs--seg{ margin-top:2.6rem; }

.cform{ background:var(--tint); border:1px solid var(--line); padding:2rem 1.9rem 2.1rem; }
.cform h3{ margin-bottom:1.3rem; font-size:1.3rem; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f2--tag{ grid-template-columns:1fr .48fr; }
.field{ margin-bottom:1rem; }
.field label{
  display:block; font-family:var(--f-display); font-size:.78rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;
}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--f-body); font-size:.97rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:.7rem .85rem; transition:border-color .16s, box-shadow .16s;
}
.field textarea{ resize:vertical; min-height:92px; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--royal); box-shadow:0 0 0 3px rgba(29,78,216,.12);
}
.field input::placeholder,.field textarea::placeholder{ color:#9AA5BD; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; gap:2.6rem; } }
@media (max-width:520px){ .f2,.f2--tag{ grid-template-columns:1fr; } }

/* =========================================================
   UPDATES PAGE
   ========================================================= */
.uphead{
  background:var(--navy); color:#B4C4E4; padding:4.2rem 0 3.6rem;
  position:relative; overflow:hidden;
}
.uphead::after{
  content:""; position:absolute; right:0; bottom:-40px; width:min(620px,52%); height:170px;
  background-image:var(--swoosh); background-size:100% 100%; background-repeat:no-repeat; opacity:.45;
}
.uphead .container{ position:relative; z-index:1; }
.uphead h1{ color:#fff; font-size:clamp(2.2rem,4.4vw,3.3rem); margin-bottom:.6rem; }
.uphead__deck{ margin:0; max-width:52ch; color:#A9BEEC; font-size:1.05rem; position:relative; z-index:1; }

.ups{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:0; border-left:1px solid var(--line); margin:0 0 5rem;
  border-top:1px solid var(--line);
}
.update{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.8rem 1.8rem 2rem; background:#fff;
  animation:up .45s both ease-out; transition:background .16s;
}
.update:hover{ background:var(--tint); }
@keyframes up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.update__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.update__tag{
  font-family:var(--f-display); font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:.24rem .55rem; color:#fff; background:var(--royal);
}
.update__tag[data-tag="Feature"]{ background:var(--orange); }
.update__tag[data-tag="Service"]{ background:var(--royal); }
.update__tag[data-tag="News"]{ background:var(--navy); }
.update__tag[data-tag="Event"]{ background:var(--red); }
.update__tag[data-tag="Offer"]{ background:#0E7C5A; }
.update__date{ font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.update h3{ font-size:1.18rem; margin-bottom:.45rem; }
.update p{ margin:0; font-size:.96rem; }

.upempty{
  text-align:center; padding:5rem 1rem 6rem; color:var(--muted);
}
.upempty .ic{ width:38px; height:38px; color:var(--orange); margin:0 auto 1rem; }
.upempty h3{ margin-bottom:.3rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background:var(--navy); color:#96A8CF; padding-top:4rem; }
.foot__grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3.2rem;
}
.foot__logo{
  display:inline-block; background:#fff; padding:.6rem .8rem; border-radius:var(--r); margin-bottom:1.2rem;
}
.foot__logo img{ height:40px; width:auto; }
.foot__brand p{ font-size:.94rem; max-width:40ch; }
.foot__addr{ font-size:.88rem; color:#7F92BC; }
.foot__col h4{
  color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:2px solid var(--orange);
  display:inline-block;
}
.foot__col a{ display:block; color:#96A8CF; font-size:.93rem; padding:.32rem 0; }
.foot__col a:hover{ color:#fff; }
.foot__bar{ border-top:1px solid rgba(255,255,255,.11); }
.foot__bar-in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem 24px; font-size:.85rem;
}
.foot__bar p{ margin:0; color:#7F92BC; }
@media (max-width:960px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; gap:2rem; } .foot__bar-in{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.totop{
  position:fixed; right:20px; bottom:20px; z-index:55; width:44px; height:44px;
  background:var(--navy); color:#fff; border:0; border-radius:var(--r); cursor:pointer;
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s, background .2s; box-shadow:var(--sh-2);
}
.totop .ic{ width:22px; height:22px; transform:rotate(180deg); }
.totop.show{ opacity:1; pointer-events:auto; }
.totop:hover{ background:var(--orange); }

/* =========================================================
   MODALS · ADMIN
   ========================================================= */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1.2rem; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(14,31,77,.62); backdrop-filter:blur(3px); }
.modal__box{
  position:relative; background:#fff; width:100%; max-width:430px; padding:2.2rem 2rem;
  border-top:3px solid var(--orange); box-shadow:0 30px 70px -20px rgba(14,31,77,.5);
  animation:pop .22s ease-out both; max-height:90vh; overflow:auto;
}
.modal__box--wide{ max-width:860px; }
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.99); } to{ opacity:1; transform:none; } }
.modal__x{
  position:absolute; right:.9rem; top:.9rem; width:34px; height:34px; border-radius:var(--r);
  background:var(--tint); border:1px solid var(--line); color:var(--body); cursor:pointer;
  display:grid; place-items:center;
}
.modal__x:hover{ background:#fff; color:var(--ink); border-color:var(--ink); }
.modal__x .ic{ width:17px; height:17px; }
.modal__ic{
  width:46px; height:46px; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--orange-50); color:var(--orange-600); border-radius:var(--r);
}
.modal__ic .ic{ width:23px; height:23px; }
.modal__sub{ font-size:.94rem; color:var(--body); margin-bottom:1.4rem; }
.lerr{
  background:#FDECEC; color:#A5161C; border-left:3px solid var(--red);
  padding:.6rem .8rem; font-size:.88rem; margin:0 0 1rem;
}

.adm__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem;
  padding-right:2.6rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); margin-bottom:1.6rem;
}
.adm__acts{ display:flex; gap:.5rem; flex-wrap:wrap; }
.adm__form{ background:var(--tint); border:1px solid var(--line); padding:1.4rem 1.4rem .6rem; margin-bottom:1.8rem; }
.adm__fa{ display:flex; gap:.6rem; flex-wrap:wrap; padding-bottom:.9rem; }
.adm__lh{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.adm__lh h4{ margin:0; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pill{
  background:var(--navy); color:#fff; font-family:var(--f-display); font-weight:700;
  font-size:.75rem; padding:.14rem .5rem; border-radius:99px;
}
.adm__list{ border-top:1px solid var(--line); }
.admin-item{
  display:flex; gap:1.2rem; align-items:flex-start; justify-content:space-between;
  padding:1.1rem 0; border-bottom:1px solid var(--line);
}
.admin-item__meta{ min-width:0; }
.admin-item__meta h5{
  font-family:var(--f-display); font-size:1.02rem; color:var(--ink); margin:.5rem 0 .2rem;
}
.admin-item__meta p{ margin:0 0 .35rem; font-size:.91rem; }
.admin-item__meta time{ font-size:.8rem; color:var(--muted); }
.admin-item__btns{ display:flex; gap:.4rem; flex:none; }
.iconbtn{
  width:34px; height:34px; border-radius:var(--r); border:1px solid var(--line);
  background:#fff; color:var(--body); cursor:pointer; display:grid; place-items:center;
  transition:background .16s,color .16s,border-color .16s;
}
.iconbtn .ic{ width:17px; height:17px; }
.iconbtn:hover{ border-color:var(--royal); color:var(--royal); }
.iconbtn--danger:hover{ border-color:var(--red); color:var(--red); background:#FDECEC; }
.admin-empty{ padding:1.6rem 0; color:var(--muted); font-size:.93rem; }
@media (max-width:640px){
  .adm__top{ flex-direction:column; padding-right:0; }
  .admin-item{ flex-direction:column; }
  .modal__box{ padding:1.8rem 1.3rem; }
}

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,18px); z-index:120;
  background:var(--navy); color:#fff; padding:.8rem 1.15rem; border-radius:var(--r);
  display:flex; align-items:center; gap:.6rem; font-size:.93rem;
  box-shadow:0 18px 40px -14px rgba(14,31,77,.6); opacity:0;
  transition:opacity .26s, transform .26s; border-left:3px solid var(--orange);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast .ic{ width:18px; height:18px; color:var(--orange); }

/* Utility */
[hidden]{ display:none !important; }