/* ==========================================================================
   MAHIRA SELECT - contact.css
   The Contact page only. Loaded by inc/enqueue.php exclusively on the
   Contact template, so nothing here can reach the shop, the product page,
   the cart, the checkout, the account area or the homepage.

   Every rule is scoped to .ms-contact or to body.ms-contact-page, and the
   two global chrome blocks, .ms-header and .ms-footer, are never selected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Measure

   The page uses the theme's own .ms-container, the same frame the header and
   footer sit on, so the breadcrumb, the headline and the panels all line up
   with the logo and the navigation above them. Nothing here redefines the
   width: if --ms-container is ever changed, this page follows the header
   rather than drifting away from it.

   The template prints no breadcrumb, so the hero is the first thing under the
   header and owns the whole gap.
   -------------------------------------------------------------------------- */

/* The page ends on a pale band, so the footer needs no extra separation. */
.ms-contact{padding-bottom:0;}

/* --------------------------------------------------------------------------
   2. Hero

   Compact by design. The headline, one supporting paragraph and the start
   of the contact panels all have to fit the first screen, so the hero is
   given only the height its type needs. The photograph is an accent on the
   right, faded into the cream rather than boxed, and it is dropped entirely
   below 900px where it would only push the WhatsApp button off screen.
   -------------------------------------------------------------------------- */
.ms-chero{
  position:relative;
  padding-block:clamp(18px,2vw,26px) clamp(34px,4vw,54px);
  overflow:hidden;
}

.ms-chero__body{
  position:relative;
  z-index:1;
  max-width:640px;
}

.ms-chero .ms-eyebrow{margin-bottom:14px;}

.ms-chero__title{
  font-size:clamp(2.25rem,1.5rem + 3vw,4rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
}

.ms-chero .ms-rule{margin:22px 0 20px;width:56px;}

.ms-chero__lead{
  color:var(--ms-muted);
  font-size:var(--ms-fs-lead);
  font-weight:300;
  line-height:1.55;
  max-width:46ch;
  margin:0;
}

/*
 * The photograph is a decorative accent, so it is painted as a background
 * rather than printed as an <img>. That is deliberate: the accent is hidden
 * below 900px, and a hidden <img> is still downloaded. Declaring the image
 * only inside the media query means a phone never requests it at all, which
 * is worth more here than srcset would be. The two urls come from the
 * template as custom properties, so the Customizer still owns the choice.
 */
.ms-chero__media{
  display:none;
  position:absolute;
  inset:0 0 0 auto;
  width:48%;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
/*
 * A gradient scrim rather than a CSS mask: masks drop the image entirely in
 * a few older WebKit builds, and a scrim degrades to a plain photograph.
 */
.ms-chero__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--ms-cream) 0%,rgba(245,242,234,.86) 26%,rgba(245,242,234,.18) 62%,rgba(245,242,234,0) 100%);
}

@media (min-width:900px){
  .ms-chero{padding-block:clamp(20px,2vw,30px) clamp(40px,4.4vw,60px);}
  .ms-chero__media{
    display:block;
    background-image:var(--ms-chero-img);
  }
  .ms-chero__body{max-width:min(620px,58%);}
}
/* Past 1500px the 768px wide file would start to soften, so the full size
   file takes over. Only one of the two is ever fetched. */
@media (min-width:1500px){
  .ms-chero__media{background-image:var(--ms-chero-img-wide);}
}
@media (min-width:1280px){
  .ms-chero__media{width:46%;}
}

/* --------------------------------------------------------------------------
   3. Main contact area

   Two surfaces, not three cards. The form is the working half and takes
   roughly 60% of the measure; the support panel takes the rest and stays
   wide enough that a phone number never wraps.
   -------------------------------------------------------------------------- */
.ms-cmain{padding-bottom:clamp(56px,6vw,84px);}

/* The last section before the strip gives up its bottom padding, because the
   strip already carries the gap. Without this the two stack into 168px of
   empty page, which is the exact fault this rebuild set out to remove. */
.ms-cmain--last{padding-bottom:0;}

.ms-cmain__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2vw,26px);
  align-items:start;
}

@media (min-width:1024px){
  .ms-cmain__grid{grid-template-columns:minmax(0,1.48fr) minmax(340px,1fr);}
}

.ms-panel{
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-radius);
  padding:clamp(24px,2.6vw,38px);
}

/*
 * Mobile order, per the brief: a customer on a phone wants WhatsApp before
 * they want a form. The panels are re-ordered rather than re-written, so the
 * document order still reads form then support for a screen reader on a
 * desktop, and the visual order matches the DOM again from 1024px up.
 */
.ms-panel--support{order:1;}
.ms-panel--form{order:2;}
@media (min-width:1024px){
  .ms-panel--support{order:2;}
  .ms-panel--form{order:1;}
}

/* Panel headings ------------------------------------------------------- */
.ms-panel__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:clamp(22px,2.4vw,30px);
}

.ms-panel__icon{
  flex:0 0 auto;
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ms-gold-soft);
  color:var(--ms-gold-ink);
}

.ms-panel__title{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-xs);
  font-weight:600;
  letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;
  color:var(--ms-ink);
  margin:0 0 6px;
  line-height:1.3;
}

.ms-panel__sub{
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
  margin:0;
  max-width:46ch;
}

/* --------------------------------------------------------------------------
   4. Support panel

   One surface holding three options separated by hairlines. WhatsApp sits
   first and carries the only filled button in the panel, so the fastest
   route out of the page is also the loudest thing in it.
   -------------------------------------------------------------------------- */
.ms-panel--support .ms-panel__title{
  font-size:var(--ms-fs-sm);
  letter-spacing:.14em;
}
.ms-panel--support > .ms-rule{width:44px;margin:15px 0 clamp(20px,2.2vw,26px);}

.ms-ways{margin:0;padding:0;list-style:none;}

.ms-way{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  padding-block:clamp(20px,2.2vw,26px);
}
.ms-way:first-child{padding-top:0;}
.ms-way:last-child{padding-bottom:0;}
.ms-way + .ms-way{border-top:1px solid var(--ms-border);}

.ms-way__icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ms-gold-soft);
  color:var(--ms-gold-ink);
}
/* WhatsApp keeps its own mark in its own green so the option is recognised
   at a glance. The glyph is the darker of the two brand greens so it holds
   up against the tint behind it. */
.ms-way--wa .ms-way__icon{
  background:rgba(37,211,102,.14);
  color:var(--ms-wa-green-dark);
}

.ms-way__label{
  display:block;
  font-size:var(--ms-fs-micro);
  font-weight:600;
  letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;
  color:var(--ms-muted);
  margin-bottom:7px;
}

/*
 * Poppins, not Playfair. These are a phone number and an email address: a
 * display serif sets figures as old style, spaces them for prose and leaves
 * the @ sitting oddly against the letters, which is what the client picked
 * out on 2026-09-10. The body face reads them as the reference strings they
 * are. Tabular figures keep the number's own digits on an even pitch, and a
 * little weight recovers the presence the larger serif was carrying.
 */
.ms-way__value{
  font-family:var(--ms-font-body);
  font-size:clamp(1.0625rem,.98rem + .34vw,1.25rem);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.005em;
  line-height:1.35;
  color:var(--ms-ink);
  margin:0 0 6px;
  max-width:none;
  overflow-wrap:anywhere;
}
.ms-way__value a{transition:color var(--ms-t) var(--ms-ease);}
.ms-way__value a:hover{color:var(--ms-gold-ink);}

.ms-way__note{
  font-size:var(--ms-fs-xs);
  color:var(--ms-muted);
  margin:0;
  max-width:none;
  line-height:1.6;
}

.ms-way .ms-btn{margin-top:16px;width:100%;}
.ms-way .ms-btn svg{flex:0 0 auto;}

/* --------------------------------------------------------------------------
   5. The form

   Forminator owns the markup and the submission. Everything below only
   restyles what it prints. The form is created with design "none" and the
   colour option set to "theme", so the plugin generates no stylesheet of
   its own to fight with.
   -------------------------------------------------------------------------- */

/* Forminator hides the form with an inline style and reveals it with script.
   The no-script fallback that overrides that inline rule lives in the
   template, inside a <noscript> block, so it costs nothing when JS runs. */
.ms-cform .forminator-custom-form{width:100%;}

/* Its own admin-only "Edit form" link. The client edits the form from
   wp-admin; it does not belong on the storefront. */
.ms-cform .forminator-edit-module{display:none;}

/* Layout ----------------------------------------------------------------
   Forminator prints every field of this form inside a single .forminator-row
   and sizes the columns with a float-era flex grid: negative row margins,
   15px column padding, and .forminator-col{flex:1} so six fields become six
   equal slivers. The page replaces that with a two column grid.

   inc/contact.php removes the plugin's grid stylesheet on this page, which is
   what actually makes these rules apply. The long selectors below are the
   safety net: they out-specify
     .forminator-ui.forminator-custom-form[data-grid=open] .forminator-row
   so the layout still holds if that stylesheet ever comes back under a
   different handle.                                                        */
.ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  margin:0;
}
.ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-row + .forminator-row{
  margin-top:18px;
}
.ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-col{
  min-width:0;
  flex:none;
  width:auto;
  max-width:none;
  padding:0;
  margin:0;
}

/* Two across only where a field still has room to breathe. Below 620px the
   name and email pair drops to one column rather than shrinking. */
@media (min-width:620px){
  .ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-col-12{grid-column:1 / -1;}
  .ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-col-6{grid-column:span 1;}
}

/*
 * Forminator prints the field description above the input. Ordering the
 * three children explicitly puts it back under the control it describes.
 */
.ms-cform .forminator-field{
  display:flex;
  flex-direction:column;
  margin:0;
}
.ms-cform .forminator-field > label.forminator-label{order:1;}
.ms-cform .forminator-field > input,
.ms-cform .forminator-field > select,
.ms-cform .forminator-field > textarea,
.ms-cform .forminator-field > .forminator-input-with-icon{order:2;}
.ms-cform .forminator-field > div:has(> .forminator-description){order:3;}
.ms-cform .forminator-field .forminator-description{
  display:block;
  font-size:var(--ms-fs-micro);
  color:var(--ms-muted);
  line-height:1.6;
  margin-top:7px;
}

/* Labels ---------------------------------------------------------------- */
.ms-cform .forminator-custom-form .forminator-label{
  display:block;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);
  font-weight:500;
  letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;
  color:var(--ms-muted);
  margin:0 0 9px;
  line-height:1.4;
}
.ms-cform .forminator-custom-form .forminator-required{
  color:var(--ms-gold-ink);
  margin-left:2px;
}

/* Controls -------------------------------------------------------------- */
.ms-cform .forminator-custom-form .forminator-field input.forminator-input,
.ms-cform .forminator-custom-form .forminator-field select.forminator-select--field,
.ms-cform .forminator-custom-form .forminator-field textarea.forminator-textarea{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-sm);
  font-weight:400;
  line-height:1.5;
  color:var(--ms-ink);
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-radius);
  box-shadow:none;
  transition:border-color var(--ms-t) var(--ms-ease),background var(--ms-t) var(--ms-ease);
}

.ms-cform .forminator-custom-form .forminator-field textarea.forminator-textarea{
  min-height:118px;
  line-height:1.65;
  resize:vertical;
}
/* A little more room once the field is past 800px wide, so it does not read
   as a letterbox. The drag handle is left on for anyone writing at length. */
@media (min-width:1400px){
  .ms-cform .forminator-custom-form .forminator-field textarea.forminator-textarea{min-height:132px;}
}

.ms-cform .forminator-custom-form .forminator-field select.forminator-select--field{
  appearance:none;
  cursor:pointer;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230D0D0D' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
/* The placeholder option is disabled and preselected, so it reads as a hint
   until a real subject is chosen. */
.ms-cform .forminator-custom-form .forminator-field select.forminator-select--field:invalid,
.ms-cform .forminator-custom-form .forminator-field select.forminator-select--field option[value='']{
  color:var(--ms-muted);
}

.ms-cform .forminator-custom-form ::placeholder{color:var(--ms-muted);opacity:1;}

.ms-cform .forminator-custom-form .forminator-field input.forminator-input:hover,
.ms-cform .forminator-custom-form .forminator-field select.forminator-select--field:hover,
.ms-cform .forminator-custom-form .forminator-field textarea.forminator-textarea:hover{
  border-color:var(--ms-beige-deep);
}

.ms-cform .forminator-custom-form .forminator-field input.forminator-input:focus,
.ms-cform .forminator-custom-form .forminator-field select.forminator-select--field:focus,
.ms-cform .forminator-custom-form .forminator-field textarea.forminator-textarea:focus{
  outline:none;
  border-color:var(--ms-gold);
  background:var(--ms-cream);
}
/* Keyboard users still get the ring the rest of the site uses. */
.ms-cform .forminator-custom-form .forminator-field input.forminator-input:focus-visible,
.ms-cform .forminator-custom-form .forminator-field select.forminator-select--field:focus-visible,
.ms-cform .forminator-custom-form .forminator-field textarea.forminator-textarea:focus-visible{
  outline:2px solid var(--ms-focus);
  outline-offset:2px;
}

/* Validation ------------------------------------------------------------ */
.ms-cform .forminator-custom-form .forminator-field input.forminator-has_error,
.ms-cform .forminator-custom-form .forminator-field select.forminator-has_error,
.ms-cform .forminator-custom-form .forminator-field textarea.forminator-has_error,
.ms-cform .forminator-custom-form .forminator-has_error input.forminator-input,
.ms-cform .forminator-custom-form .forminator-has_error select.forminator-select--field,
.ms-cform .forminator-custom-form .forminator-has_error textarea.forminator-textarea{
  border-color:var(--ms-sale);
  background:var(--ms-surface);
}

.ms-cform .forminator-custom-form .forminator-error-message{
  display:block;
  order:4;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);
  font-weight:400;
  line-height:1.5;
  color:var(--ms-sale);
  background:none;
  border:0;
  padding:0;
  margin:8px 0 0;
}

/* Submit ---------------------------------------------------------------- */
.ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-row-last{margin-top:26px;}
.ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-row-last .forminator-col{grid-column:1 / -1;}

.ms-cform .forminator-custom-form .forminator-button-submit{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:0 52px;
  font-family:var(--ms-font-body);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:var(--ms-track-btn);
  text-transform:uppercase;
  color:var(--ms-cream);
  background:var(--ms-ink);
  border:1px solid var(--ms-ink);
  border-radius:var(--ms-radius-btn);
  cursor:pointer;
  box-shadow:none;
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease),transform var(--ms-t-fast) var(--ms-ease);
}
/* The paper plane from the design board, drawn as a mask so it inherits the
   button's own colour instead of shipping a second asset. */
.ms-cform .forminator-custom-form .forminator-button-submit::after{
  content:'';
  position:absolute;
  right:22px;
  top:50%;
  width:19px;height:19px;
  margin-top:-9px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.2 2.8 10.6 13.4'/%3E%3Cpath d='M21.2 2.8 14.5 21.4l-3.9-8-8-3.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.2 2.8 10.6 13.4'/%3E%3Cpath d='M21.2 2.8 14.5 21.4l-3.9-8-8-3.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--ms-t) var(--ms-ease);
}
.ms-cform .forminator-custom-form .forminator-button-submit:hover{
  background:var(--ms-ink-hover);
  border-color:var(--ms-ink-hover);
}
.ms-cform .forminator-custom-form .forminator-button-submit:hover::after{transform:translateX(3px);}
.ms-cform .forminator-custom-form .forminator-button-submit:active{transform:translateY(1px);}
.ms-cform .forminator-custom-form .forminator-button-submit[disabled]{opacity:.5;cursor:default;}

/* Forminator's own loading spinner sits inside the button. */
.ms-cform .forminator-custom-form .forminator-button-submit.forminator-button-onload{color:transparent;}

/* Response messages ------------------------------------------------------
   The success panel is the page's own, not the plugin's: a champagne block
   with a gold hairline, a tick, and the two lines the brief asks for.       */
.ms-cform .forminator-response-message{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-sm);
  line-height:1.65;
  border-radius:var(--ms-radius);
  margin:0 0 20px;
  padding:0;
}
.ms-cform .forminator-response-message[aria-hidden='true']:empty{display:none;margin:0;}

.ms-cform .forminator-response-message.forminator-success{
  position:relative;
  background:var(--ms-champagne);
  border:1px solid var(--ms-gold-line);
  color:var(--ms-ink);
  padding:26px 28px 26px 68px;
  margin:0;
}
.ms-cform .forminator-response-message.forminator-success::before{
  content:'';
  position:absolute;
  left:26px;top:26px;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--ms-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
.ms-cform .forminator-response-message.forminator-success strong{
  display:block;
  font-family:var(--ms-font-heading);
  font-size:1.3125rem;
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.2;
  margin-bottom:8px;
}
.ms-cform .forminator-response-message.forminator-success p{margin:0;max-width:none;}
.ms-cform .forminator-response-message.forminator-success p + p{margin-top:6px;}

.ms-cform .forminator-response-message.forminator-error{
  background:rgba(190,40,23,.06);
  border:1px solid rgba(190,40,23,.32);
  color:var(--ms-ink);
  padding:16px 20px;
}
.ms-cform .forminator-response-message.forminator-error p{margin:0;max-width:none;}
.ms-cform .forminator-response-message.forminator-error p + p{margin-top:4px;}
.ms-cform .forminator-response-message ul{margin:6px 0 0;padding-left:1.1em;list-style:disc;}

/* The honeypot label Forminator appends after the submit row. */
.ms-cform .forminator-hidden{display:none;}

/* Privacy note under the form ------------------------------------------- */
.ms-cform__note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:var(--ms-fs-micro);
  color:var(--ms-muted);
  margin:18px 0 0;
  max-width:none;
}
/* flex-start, not center: on a phone the line wraps and a centred padlock
   floats between the two lines instead of sitting on the first. */
.ms-cform__note svg{flex:0 0 auto;margin-top:2px;color:var(--ms-gold-ink);}

/* --------------------------------------------------------------------------
   6. Metadata bands

   Business information and the grievance officer share one structure: a
   centred heading, a gold hairline with a diamond, and a row of labelled
   values divided by vertical rules that become horizontal ones on a phone.
   -------------------------------------------------------------------------- */
.ms-cband{
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  padding:clamp(28px,3vw,42px) clamp(20px,2.4vw,36px);
}
.ms-cband + .ms-cband{margin-top:clamp(18px,2vw,26px);}

.ms-cband__head{text-align:center;margin-bottom:clamp(24px,2.6vw,34px);}

.ms-cband__title{
  font-family:var(--ms-font-heading);
  font-size:clamp(1.1875rem,1.05rem + .5vw,1.5rem);
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ms-ink);
  margin:0;
}

/* The one flourish: the logo's rule with a lozenge set into the middle. */
.ms-rule--diamond{
  position:relative;
  width:62px;height:1px;
  border:0;
  background:var(--ms-gold);
  margin:14px auto 0;
  overflow:visible;
}
.ms-rule--diamond::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--ms-gold);
}

.ms-cband__note{
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
  margin:14px auto 0;
  max-width:56ch;
}

/* The metadata row ------------------------------------------------------ */
.ms-facts{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  margin:0;
}

.ms-fact{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:18px 0;
}
.ms-fact:first-child{padding-top:0;}
.ms-fact:last-child{padding-bottom:0;}
.ms-fact + .ms-fact{border-top:1px solid var(--ms-border);}

.ms-fact__icon{
  width:26px;height:26px;
  display:grid;place-items:center;
  color:var(--ms-gold-ink);
  margin-top:1px;
}

/* Stepped up from 11px on the client's instruction (2026-09-10). This band
   carries the registered business record and was the smallest type on the
   page. */
.ms-fact__label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ms-muted);
  margin:0 0 8px;
}

/*
 * break-word, not anywhere: a long address or email should only break when
 * it genuinely cannot fit, never mid-word while there is still room on the
 * line. "support@mahiraselect.com" split after the dot reads as a typo.
 */
.ms-fact__value{
  font-size:.9375rem;
  line-height:1.65;
  color:var(--ms-ink);
  margin:0;
  max-width:none;
  font-style:normal;
  overflow-wrap:break-word;
}
/*
 * The registered office is printed one line per line of the client's own copy
 * and must not be re-flowed, so it gets the leading of a stacked address
 * rather than of a paragraph.
 */
.ms-fact__value--addr{line-height:1.9;}
.ms-fact__value a{transition:color var(--ms-t) var(--ms-ease);}
.ms-fact__value a:hover{color:var(--ms-gold-ink);}

/* A GSTIN is a single reference to be copied, so it never wraps and it is
   set in tabular figures. */
.ms-fact__value--code{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  white-space:nowrap;
}

/*
 * The five columns are not equal. They are sized to the longest value each
 * one actually holds, so the legal entity, the GSTIN and the registered
 * address all sit on the lines they were written for instead of breaking.
 */
@media (min-width:860px){
  .ms-facts{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.7fr);
    gap:0;
  }
  .ms-fact{
    padding:0 clamp(14px,1.5vw,22px);
  }
  .ms-fact:first-child{padding-left:0;}
  .ms-fact:last-child{padding-right:0;}
  .ms-fact + .ms-fact{
    border-top:0;
    border-left:1px solid var(--ms-border);
  }
}

/* Grievance: four cells, the last one a plain paragraph. */
@media (min-width:860px){
  .ms-facts--griev{grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.5fr);}
}

.ms-fact--person .ms-fact__icon{
  width:50px;height:50px;
  border-radius:50%;
  background:var(--ms-champagne);
  color:var(--ms-gold-ink);
  margin-top:0;
}
.ms-fact--person{grid-template-columns:50px minmax(0,1fr);gap:14px;align-items:center;}

.ms-fact__name{
  font-family:var(--ms-font-heading);
  font-size:1.125rem;
  line-height:1.25;
  margin:0 0 3px;
  max-width:none;
}
.ms-fact__role{
  font-size:var(--ms-fs-xs);
  color:var(--ms-muted);
  margin:0;
  max-width:none;
}

.ms-fact--legal .ms-fact__value{
  font-size:var(--ms-fs-xs);
  color:var(--ms-muted);
  line-height:1.7;
}

/* --------------------------------------------------------------------------
   7. Reassurance strip

   Four short promises on the pale band that carries the page into the
   footer. Nothing here claims anything the policies do not already say.
   -------------------------------------------------------------------------- */
.ms-cstrip{
  background:var(--ms-sand);
  border-top:1px solid var(--ms-border);
  margin-top:clamp(52px,6vw,84px);
  padding-block:clamp(26px,3vw,38px);
}

.ms-cstrip__row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 0;
  margin:0;padding:0;
  list-style:none;
}
@media (min-width:900px){
  .ms-cstrip__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
}

.ms-cstrip__item{
  display:flex;
  align-items:center;
  gap:13px;
  padding-inline:clamp(12px,1.6vw,26px);
}
.ms-cstrip__item:first-child{padding-left:0;}
.ms-cstrip__item:last-child{padding-right:0;}

@media (min-width:900px){
  .ms-cstrip__item + .ms-cstrip__item{border-left:1px solid var(--ms-beige);}
}
@media (max-width:899px){
  .ms-cstrip__item:nth-child(odd){padding-left:0;}
  .ms-cstrip__item:nth-child(even){padding-right:0;}
}

.ms-cstrip__icon{
  flex:0 0 auto;
  color:var(--ms-gold-ink);
}

.ms-cstrip__title{
  display:block;
  font-size:var(--ms-fs-xs);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ms-ink);
  line-height:1.35;
}
.ms-cstrip__copy{
  display:block;
  font-size:var(--ms-fs-micro);
  color:var(--ms-muted);
  line-height:1.5;
  margin-top:2px;
}

/* --------------------------------------------------------------------------
   8. Small screens

   The stack is already correct from the grid rules above. What changes here
   is density: touch targets grow, the panel padding relaxes, and the
   support panel loses its inner gutters so the WhatsApp button runs the
   full width of the card.
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  .ms-panel{padding:22px 18px;}
  .ms-cband{padding:24px 18px;}

  .ms-chero__title{font-size:clamp(2rem,1.3rem + 4vw,2.5rem);}
  .ms-chero__lead{font-size:1rem;}

  .ms-way{grid-template-columns:40px minmax(0,1fr);gap:14px;}
  .ms-way__icon{width:40px;height:40px;}
  .ms-way .ms-btn{min-height:52px;}

  .ms-cform .forminator-custom-form .forminator-field input.forminator-input,
  .ms-cform .forminator-custom-form .forminator-field select.forminator-select--field{min-height:52px;}
  .ms-cform .forminator-custom-form .forminator-field textarea.forminator-textarea{min-height:124px;}
  .ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-row{gap:16px;}
  .ms-contact .ms-cform .forminator-ui.forminator-custom-form[data-grid] .forminator-row + .forminator-row{margin-top:16px;}
  .ms-cform .forminator-custom-form .forminator-button-submit{min-height:54px;}
}

/* Very narrow phones: 360px and 320px still have to hold a 16px gutter and
   a readable label without the panel border touching the text. */
@media (max-width:380px){
  .ms-panel{padding:20px 16px;}
  .ms-cband{padding:22px 16px;}
  .ms-way{grid-template-columns:36px minmax(0,1fr);gap:12px;}
  .ms-way__icon{width:36px;height:36px;}
  .ms-cform .forminator-custom-form .forminator-button-submit{padding:0 44px;font-size:.6875rem;}
}