:root{
  --bg:#000;
  --text:#fff;
  --muted:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.12);
  --gold:#d6a400;

  /* Layout tuning */
  --gutter:20px;
  --content-max: 1320px;     /* wider so it doesn’t feel “template centred” */
  --reading-max: 1100px;     /* text lines don’t get too long */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 520px at 55% 5%, rgba(255,196,0,.14), transparent 60%),
    radial-gradient(900px 520px at 45% 40%, rgba(255,255,255,.06), transparent 62%),
    #000;
  color:var(--text);
}

/* =========================================
   Header (stays consistent)
========================================= */
.ms-header{
  background:#000;
  border-bottom:1px solid var(--line);
}
.ms-header-inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.ms-left{ display:flex; gap:14px; align-items:flex-start; min-width: 260px; }
.ms-pay{ display:flex; flex-direction:column; gap:8px; padding-top:6px; }
.ms-pay img{ width:46px; height:auto; border-radius:6px; display:block; }

.ms-brand{ display:flex; flex-direction:column; gap:8px; }
.ms-brand-logo{ width:130px; height:auto; display:block; border-radius:6px; }
.ms-tagline{
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size:14px;
  color:var(--muted);
  padding-left:2px;
}

.ms-nav{ flex: 1; display:flex; justify-content:center; padding-top:6px; }
.ms-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  justify-content:center;
  font-weight:700;
}
.ms-nav-list a{
  color:var(--text);
  text-decoration:none;
  font-size:18px;
  opacity:.95;
}
.ms-nav-list a:hover{ opacity:1; text-decoration:underline; }

.ms-right{
  min-width: 260px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  padding-top:6px;
}

.ms-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}
.ms-whatsapp:hover{ border-color: rgba(255,255,255,.25); }

.ms-wa-dot{
  width:30px; height:30px;
  border-radius:50%;
  background:#25D366;
  box-shadow: 0 10px 30px rgba(37,211,102,.22);
}

.ms-awards{ display:flex; gap:10px; }
.ms-awards img{
  width: 86px;
  height:auto;
  border-radius:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}

/* =========================================
   MAIN LAYOUT FIX (the problem you described)
   - Not shoved left
   - Not clumped in the centre
   - Looks like “real” flowing pages
========================================= */

/* Outer: wide container with 20px gutters */
.ms-wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--gutter) 70px;
}

/*
Inner flow: we DON’T centre a tiny column.
We allow the page to breathe, but keep text readable.
This gives that “natural flow” you want.
*/
.ms-flow{
  max-width: var(--reading-max);
  /* Slightly off-centre to avoid “template perfect centering” */
  margin-left: clamp(0px, 3vw, 48px);
  margin-right: auto;
}

/* Headings + text */
h1{
  font-family:IBM Plex Sans;
  font-size: clamp(40px, 5vw, 68px);
  line-height:1.06;
  margin: 10px 0 10px;
  font-weight: 900;
}
h2{
  font-family:IBM Plex Sans;
  font-size: clamp(28px, 3vw, 42px);
  margin: 34px 0 12px;
  font-weight: 900;
}
p{
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
  margin: 10px 0;
}
ul{ margin: 12px 0 0 22px; }
li{ margin: 8px 0; }

/* Links under heading (buttons/CTAs row) */
.ms-underhead-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin: 14px 0 22px;
}
.ms-underhead-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration:none;
  font-weight: 900;
}
.ms-underhead-link:hover{
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}

/* Optional: make the “primary” CTA look gold if you add a class */
.ms-underhead-link.is-primary{
  background: linear-gradient(180deg, rgba(214,164,0,.95), rgba(214,164,0,.75));
  border-color: rgba(214,164,0,.65);
  color:#111;
}

/* Cards (if present) — they should NOT be forced into the center */
.ms-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
  margin: 18px 0 10px;
  max-width: var(--content-max);
}
.ms-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.05);
}
.ms-card-title{ font-weight: 900; margin-bottom: 6px; }
.ms-card-desc{ color: rgba(255,255,255,.82); line-height: 1.65; }
.ms-card-warning{ border-color: rgba(255,140,140,.35); }
.ms-card-tip{ border-color: rgba(140,200,255,.35); }
.ms-card-note{ border-color: rgba(255,255,255,.16); }

.ms-hr{ border:0; border-top:1px solid rgba(255,255,255,.10); margin: 24px 0; }

/* Footer */
.ms-footer{
  border-top: 1px solid var(--line);
  padding: 22px var(--gutter);
  color: var(--muted);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 980px){
  .ms-header-inner{ flex-wrap: wrap; }
  .ms-nav{ order: 3; width:100%; justify-content:flex-start; }
  .ms-nav-list{ justify-content:flex-start; gap: 14px; }
  .ms-right{ align-items:flex-start; }
  .ms-flow{ margin-left: 0; max-width: 100%; }
  .ms-cards{ grid-template-columns: 1fr; }
}
/* Clickable card */
.ms-card-link{
  display:block;
  color: inherit;
  text-decoration: none;
}
.ms-card-link:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
}

/* “Where to go next” as 2x2 grid on desktop */
.ms-cards--next{
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

/* On small screens it stacks naturally because .ms-cards already goes 1 column */

/* ============================================================
   GLOBAL IMAGE BLENDING — OPTION B (PRODUCTION LOCKED)
   Purpose: Subtle embedded frame so images sit naturally
   Do NOT remove or refactor.
   ============================================================ */

img {
  display: block;
  max-width: 100%;
  height: auto;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);

  background-color: rgba(0,0,0,0.35);
  padding: 7px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 10px 22px rgba(0,0,0,0.65);
}
/* EXCLUDE UI / BRAND / ICON IMAGES */
.ms-pay img,
.ms-brand-logo,
.ms-awards img,
img.icon,
img.no-frame {
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* ============================================================
   SECTION BLEND FIX — MOBILE SEAM REMOVAL
   Blends stacked sections into each other smoothly
   ============================================================ */

/* Any major vertical section */
.ms-section,
.ms-hero,
.ms-wrap {
  position: relative;
}

/* Soft gradient fade at the TOP of sections */
.ms-section::before {
  content: "";
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,0.55)
  );
}

/* Extra smoothing on small screens */
@media (max-width: 768px) {
  .ms-section::before {
    height: 64px;
    top: -64px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0),
      rgba(0,0,0,0.7)
    );
  }
}
/* ============================================================
   GLOBAL BACKGROUND UNIFICATION (removes visible "join lines")
   ============================================================ */

/* Put ONE continuous background behind everything */
html, body {
  background: #000;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* Your existing vibe: dark -> warm glow, but continuous page-wide */
  background:
    radial-gradient(900px 520px at 20% 35%, rgba(255,200,60,.14), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 70% 70%, rgba(255,200,60,.10), rgba(0,0,0,0) 65%),
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%);
}

/* Make sections/cards transparent so the unified background shows through */
.ms-hero,
.ms-section,
main,
.ms-wrap,
.ms-flow {
  background: transparent !important;
}

/* ============================================================
   REMOVE/FADE EXPLICIT HORIZONTAL DIVIDERS
   (this is usually the line you’re seeing)
   ============================================================ */

.ms-hr,
hr {
  border: 0 !important;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(to right,
    rgba(255,255,255,0),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0)
  ) !important;
}

/* --- Global image centering (site-wide) --- */

img {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

/* If you have inline icons/logos that should NOT be centered,

   you can opt them out by adding a class like .ms-inline-img */

.ms-inline-img,

.ms-header img,

.ms-pay img,

.ms-awards img,

.ms-brand-logo {

  display: inline-block;

  margin: 0;

}
/* --------------------------------------------------

   Center CTA groups while keeping buttons inline

-------------------------------------------------- */

/* Covers hero CTAs, under-heading CTAs, and generic CTA rows */

.ms-cta,

.ms-underhead-links,

.ms-cta-row {

  display: flex;

  justify-content: center;   /* center the group */

  align-items: center;

  gap: 12px;                 /* keep spacing */

  flex-wrap: wrap;           /* mobile-safe */

}

/* Ensure individual CTA buttons remain inline-sized */

.ms-cta a,

.ms-underhead-links a,

.ms-cta-row a {

  display: inline-flex;

}

/* --------------------------------------------------

   Mobile ONLY: "Where to go next" cards must stack

   Desktop / laptop / tablet unchanged

-------------------------------------------------- */

@media (max-width: 900px) {

  /* Any 2-col/4-col grids used for the card tiles */

  .ms-grid,

  .ms-grid2,

  .ms-grid3,

  .ms-grid4,

  .ms-next-grid,

  .ms-nextGrid,

  .ms-tiles,

  .ms-tileGrid,

  .ms-cardGrid,

  .ms-cardsGrid {

    display: grid !important;

    grid-template-columns: 1fr !important;

  }

  /* Ensure each tile/card fills the single column */

  .ms-tile,

  .ms-next-card,

  .ms-nextCard,

  .ms-card {

    width: 100% !important;

  }

}
/* ================================
   CONTACT FORM FIELD SIZING
================================ */

/* Base sizing for all inputs */
.ms-form input[type="text"],
.ms-form input[type="email"],
.ms-form input[type="tel"],
.ms-form input[type="file"],
.ms-form textarea {
    width: 100%;
    max-width: 640px;          /* hard cap for desktop */
    min-height: 48px;          /* consistent input height */
    padding: 10px 14px;
    font-size: 16px;
    box-sizing: border-box;    /* critical */
}

/* Textarea gets more height */
.ms-form textarea {
    min-height: 140px;
    resize: vertical;          /* allow user resize only vertically */
}

/* File input tweaks (browser-safe) */
.ms-form input[type="file"] {
    padding: 8px;
    min-height: auto;
}

/* Buttons */
.ms-form button {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 16px;
}

/* Mobile optimisation */
@media (max-width: 640px) {
    .ms-form input,
    .ms-form textarea,
    .ms-form button {
        max-width: 100%;
    }
}
/* =========================================================
   IMAGES — GLOBAL
   ========================================================= */
.ms-media { margin: 18px auto; max-width: 100%; }
.ms-media-left { text-align: left; }
.ms-media-right { text-align: right; }
.ms-media-center { text-align: center; }

.ms-img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:14px;
}

.ms-caption{
  opacity:.85;
  font-size:13px;
  margin-top:8px;
  text-align:center;
}

/* =========================================================
   CTA UNDER H1 — INLINE BUT CENTRED
   ========================================================= */
.ms-underhead-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin: 14px 0 18px 0;
}

/* =========================================================
   CARDS — MOBILE ONLY STACK (phones only)
   IMPORTANT: this targets "phones" width; tablets keep grid.
   ========================================================= */
@media (max-width: 600px){
  .ms-cards{
    display:block !important;
  }
  .ms-cards .ms-card{
    width:100% !important;
    display:block !important;
    margin: 0 0 12px 0 !important;
  }
}
.ms-images { margin: 18px 0; }
.ms-figure { margin: 18px auto; max-width: 900px; }
.ms-content-img { max-width: 100%; height: auto; border-radius: 16px; }
.ms-caption { opacity: 0.85; font-size: 14px; margin-top: 8px; text-align: center; }

/* Reasonable default sizing for all content images */
.ms-media {
  margin: 18px 0;
  text-align: center; /* keeps them centered by default */
}

.ms-media .ms-img {
  display: block;
  width: 380px;
  height: auto;
  max-width: 900px;          /* desktop/laptop cap */
  margin: 0 auto;            /* center */
  border-radius: 14px;
}

/* Tablet */
@media (max-width: 1024px) {
  .ms-media .ms-img { max-width: 720px; }
}

/* Mobile */
@media (max-width: 640px) {
  .ms-media .ms-img { max-width: 100%; }
}

/* Optional caption style */
.ms-caption {
  margin-top: 8px;
  font-size: 0.95rem;
  opacity: 0.85;
}