/* ==========================================================================
   Mountain Edge — Andaman B2B DMC
   Standalone stylesheet. No Bootstrap, no template CSS, no framework.
   Palette derived from brand logo (red / charcoal mountain mark).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:wght@100..900&family=Open+Sans:wght@300..800&display=swap");
:root {
  /* Palette — derived from logo (red gradient peak + charcoal peak) */
  --marine:        #1c1c1c;   /* charcoal — primary dark */
  --white:         #fff;
  --marine-deep:   #0a0a0a;   /* footer, overlays */
  --marine-mid:    #2c2c2c;   /* raised surfaces on dark */
  --sand:          #fff;   /* page background */
  --sand-warm:     #f4f4f4;   /* alternating band */
  --paper:         #ffffff;   /* cards */
  --brass:         #e0392e;   /* the accent — surfaces and large type only */
  --brass-bright:  #ff5a45;   /* accent on dark surfaces */
  --brass-deep:    #a3241a;   /* accent for small text on light — AA safe */
  --ink:           #16181c;   /* body text */
  --slate:         #5c6670;   /* muted text */
  --line:          #dcdcdc;   /* hairlines on sand */
  --line-dark:     rgba(240, 240, 240, 0.16);

  /* Type */
  --display: "Montserrat", sans-serif;
  --body: "Open Sans", sans-serif;
  --mono: "Inter", sans-serif;

  /* Scale — 1.25 ratio from 1rem */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;
  --t-4xl:  4rem;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Structure */
  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --radius: 3px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

p  { margin: 0 0 var(--s-4); }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

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

.shell .rounded{
    border-radius:30px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 860px; }

.band { padding-block: clamp(3.5rem, 9vw, var(--s-9)); }
.band--tight { padding-block: clamp(2.5rem, 6vw, var(--s-8)); }
.band--sand  { background: var(--sand-warm); }
.band--dark  { background: var(--marine); color: var(--sand); }

.band--dark h1,
.band--dark h2,
.band--dark h3 { color: var(--sand); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brass);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Icons (SVG sprite, images/icons.svg)
   -------------------------------------------------------------------------- */

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}

.icon.spin { animation: spin 0.9s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. Signature: depth-sounding rule
   Vertical ticks of varying height, after the marine chart convention.
   Used under section headings. Encodes hierarchy, not decoration.
   -------------------------------------------------------------------------- */

.sounding {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 22px;
  margin-bottom: var(--s-5);
}

.sounding i {
  display: block;
  width: 2px;
  background: var(--brass);
  opacity: 0.85;
}

/* Heights read as a depth profile: shelf, drop, trench, shelf */
.sounding i:nth-child(1) { height: 7px; }
.sounding i:nth-child(2) { height: 13px; }
.sounding i:nth-child(3) { height: 22px; }
.sounding i:nth-child(4) { height: 16px; }
.sounding i:nth-child(5) { height: 9px; }
.sounding i:nth-child(6) { height: 5px; }

.sounding--light i { background: var(--brass-bright); }
.sounding--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Typographic roles
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 var(--s-3);
}

.band--dark .eyebrow { color: var(--brass-bright); }

.h-display {
  font-size: clamp(2.25rem, 6vw, var(--t-2xl));
  letter-spacing: -0.03em;
}

.h-section {
  font-size: clamp(1.75rem, 4vw, var(--t-2xl));
}

.h-card {
  font-family: var(--body);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--slate);
  max-width: 62ch;
}

.band--dark .lede { color: rgba(240, 240, 240, 0.78); }

.muted { color: var(--slate); }
.band--dark .muted { color: rgba(240, 240, 240, 0.62); }

.small { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brass);
  color: var(--white);
  border-color: var(--brass);
}
.btn--primary:hover {
  background: var(--brass-bright);
  border-color: var(--brass-bright);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn--ghost:hover { border-color: var(--brass-bright); color: var(--brass-bright); }

.btn--dark {
  background: var(--marine);
  color: var(--sand);
  border-color: var(--marine);
}
.btn--dark:hover { background: var(--marine-mid); border-color: var(--marine-mid); }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   8. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: var(--s-5);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.masthead__logo img { height: 130px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s-6); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav__link {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(240, 240, 240, 0.82);
  padding-block: var(--s-2);
  transition: color 0.18s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--brass-bright);
  transition: width 0.24s var(--ease);
}

.nav__link:hover { color: var(--sand); }
.nav__link:hover::after { width: 100%; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(240, 240, 240, 0.3);
  border-radius: var(--radius);
  color: var(--sand);
  font-size: 1.1rem;
  cursor: pointer;
}

/* Sticky variant, toggled by JS */
.masthead--stuck {
  position: fixed;
  top: 0;
  background: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
  padding-block: var(--s-3);
  animation: dropIn 0.32s var(--ease);
}

.masthead--stuck .masthead__logo img { height: 65px; }

@keyframes dropIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 700px;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(9rem, 18vh, 12rem) clamp(3rem, 8vh, var(--s-8));
  overflow: hidden;
  background: var(--marine-deep);
  color: var(--sand);
}
.hero__media {
  position: absolute;
  inset: -10% 0 0;
  height: 120%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
   linear-gradient(rgba(15, 15, 15, 0.4) 0%, rgb(15, 15, 15) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-6), 6vw, var(--s-9));
  align-items: end;
  width: 100%;
  margin-top: clamp(2.5rem, 10vh, 140px);
  margin-bottom: 20px;
}

.hero h1 { margin-bottom: var(--s-4); }

.hero__sub {
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: var(--s-5);
}

.hero__body {
  color: rgba(240, 240, 240, 0.82);
  max-width: 54ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* Hero capability list */
.capabilities { border-top: 1px solid var(--line-dark); }

.capability {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line-dark);
}
.capability:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.capability__icon {
  font-size: 1.35rem;
  color: var(--brass-bright);
  line-height: 1.2;
}

.capability h3 {
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
  color: var(--sand);
}

.capability p {
  margin: 0;
  font-size: var(--t-sm);
  color: rgba(240, 240, 240, 0.68);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   10. Section heading block
   -------------------------------------------------------------------------- */

.head { margin-bottom: var(--s-7); }
.head--center { text-align: center; }
.head--center .sounding { justify-content: center; }
.head--center .lede { margin-inline: auto; }
.head .lede { margin-top: var(--s-4); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Split (image + text)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s-6), 6vw, var(--s-7));
  align-items: center;
}
.split h2 {
    margin-bottom:20px;
}

.split__media { position: relative; }

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.split--flip .split__media { order: 2; }

/* Pull-quote from a real guest */
.quote {
  border-left: 2px solid var(--brass);
  padding-left: var(--s-5);
  margin-top: var(--s-6);
}

.quote p {
  font-family: var(--display);
  font-size: var(--t-sm);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
}

.quote cite {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   12. Service grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}

.service {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
  text-align:center;
}

.service:hover {
  border-color: var(--brass);
  transform: translateY(-3px);
}

.service__icon {
  font-size: 3rem;
  color: var(--brass);
display: flex;
justify-content: center;
  margin-bottom: var(--s-4);
}

.service h3 { margin-bottom: var(--s-2); }

.service p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   13. Commitments (mission / why / promise)
   -------------------------------------------------------------------------- */

.commitments { border-top: 1px solid var(--line); }

.commitment {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
}

.commitment__icon {
  font-size: 1.25rem;
  color: var(--brass);
  padding-top: 0.2rem;
}

.commitment h3 { margin-bottom: var(--s-2); }

.commitment p {
  margin: 0;
  color: var(--slate);
  font-size: var(--t-sm);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   14. FAQ — accordion + CTA panel
   -------------------------------------------------------------------------- */

/* Layout: accordion + side CTA -------------------------------------------- */
.faq-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 768px) {
  .faq-wrap {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
    #standards .why_choose {
         grid-template-columns: inherit;}
}

/* Accordion ----------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.18s var(--ease);
}

.faq__q:hover {
  color: var(--brass-deep);
}

.faq__q:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Plus / minus toggle icon */
.faq__sign {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color 0.18s var(--ease), transform 0.28s var(--ease);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--brass);
  transform: translate(-50%, -50%);
  transition: opacity 0.2s var(--ease);
}

.faq__sign::before { width: 10px; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 10px; }

.faq__q:hover .faq__sign {
  border-color: var(--brass);
}

.faq__q[aria-expanded="true"] .faq__sign {
  border-color: var(--brass);
  transform: rotate(180deg);
}

.faq__q[aria-expanded="true"] .faq__sign::after {
  opacity: 0;
}

/* Answer panel */
.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.3s var(--ease);
}

.faq__a > div {
  padding-bottom: var(--s-5);
}

.faq__a p {
  margin: 0;
  color: var(--slate);
  font-size: var(--t-sm);
  line-height: 1.7;

}

/* CTA panel ------------------------------------------------------------------ */
.faq-cta {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  border-radius: 2px;
  transition: border-color 0.2s var(--ease);
}

.faq-cta:hover {
  border-color: var(--brass);
}

.faq-cta__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--s-4);
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass-deep);
}

.faq-cta__title {
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-base);
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.faq-cta__sub {
  font-size: var(--t-sm);
  color: var(--slate);
  margin: 0 0 var(--s-5);
}
/* --------------------------------------------------------------------------
   15. Evidence panel (counts + testimonials)
   -------------------------------------------------------------------------- */

.evidence {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--s-6), 6vw, var(--s-8));
  align-items: start;
}

.tally {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 3rem);
  line-height: 1;
  color: var(--brass-deep);
  letter-spacing: -0.04em;
  font-weight: 500;
}
.tally span{
    font-size: 16px;
    color: var(--ink);
    letter-spacing: 0.5px;    
}

.tally + p {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--s-6);
}

.testimonial {
    padding-block: var(--s-4);
    border-top: 1px solid var(--line);
    margin: 0px 0px 0px 20px;
}

.testimonial p {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--slate);
    text-align: justify;
} 

.testimonial footer {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.testimonial footer span { color: var(--slate); }

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.gallery a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 1;
  background: var(--sand-warm);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease), filter 0.3s var(--ease);
}

.gallery a:hover img { transform: scale(1.06); filter: brightness(1.06); }

/* --------------------------------------------------------------------------
   16. Credentials strip
   -------------------------------------------------------------------------- */

.credentials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-5), 5vw, var(--t-base));
}

.credentials img:nth-child(2) {
    max-height: 68px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.8;
}



/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: var(--s-4); }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  color: var(--slate);
}

.band--dark .field label,
.contact .field label,
.modal__panel .field label { color: rgba(240, 240, 240, 0.72); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.5;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.field textarea { resize: vertical; min-height: 120px; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(224, 57, 46, 0.16);
}

/* Dark-surface fields */
.contact .field input,
.contact .field textarea,
.modal__panel .field input,
.modal__panel .field textarea {
  background: rgba(240, 240, 240, 0.07);
  border-color: rgba(240, 240, 240, 0.26);
  color: var(--sand);
}

.contact .field input::placeholder,
.contact .field textarea::placeholder,
.modal__panel .field input::placeholder,
.modal__panel .field textarea::placeholder { color: rgba(240, 240, 240, 0.66); }

.contact .field input:focus,
.contact .field textarea:focus,
.modal__panel .field input:focus,
.modal__panel .field textarea:focus {
  background: rgba(240, 240, 240, 0.12);
  border-color: var(--brass-bright);
  box-shadow: 0 0 0 3px rgba(255, 90, 69, 0.22);
}

.field--invalid input,
.field--invalid textarea { border-color: #c0554b; }

.field__error {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: #d9776c;
}

/* Honeypot — hidden from humans, present for bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form__note {
  font-size: var(--t-xs);
  color: var(--slate);
  margin-top: var(--s-4);
}

.contact .form__note,
.modal__panel .form__note { color: rgba(240, 240, 240, 0.62); }

/* Inline status message */
.form__status {
  display: none;
  padding: var(--s-4);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  margin-bottom: var(--s-4);
}

.form__status.is-visible { display: block; }
.form__status--ok  { background: rgba(93, 138, 92, 0.16); border: 1px solid #5d8a5c; color: #cfe6cd; }
.form__status--err { background: rgba(192, 85, 75, 0.16);  border: 1px solid #c0554b; color: #f0c8c3; }

.band--sand .form__status--ok  { color: #2f5c2e; }
.band--sand .form__status--err { color: #8a2f26; }

/* --------------------------------------------------------------------------
   18. Contact + footer
   -------------------------------------------------------------------------- */

.contact {
background:
    linear-gradient(rgb(10 10 10 / 70%), rgb(15 15 15 / 93%)), url(https://www.andaman-dmc.com/images/footer_banner.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--sand);
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--s-6), 6vw, var(--s-9));
}

.contact h2 { color: var(--sand); }

.details { margin: 0; }

.detail {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line-dark);
}
.detail:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.detail dt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.55);
  margin-bottom: var(--s-1);
}

.detail dt .icon { color: var(--brass-bright); font-size: 1rem; }

.detail dd {
  margin: 0;
  padding-left: calc(1rem + var(--s-2));
  font-size: var(--t-sm);
  color: var(--sand);
}
.detail dd a:hover { color: var(--brass-bright); }

.socials { display: flex; gap: var(--s-3); margin-top: var(--s-6); }

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: rgba(240, 240, 240, 0.75);
  transition: all 0.18s var(--ease);
}

.socials a:hover {
  border-color: var(--brass-bright);
  color: var(--brass-bright);
  transform: translateY(-2px);
}

.colophon {
  background: var(--marine-deep);
  color: rgba(240, 240, 240, 0.55);
  padding-block: var(--s-5);
  font-size: var(--t-xs);
}

.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
}

.colophon a:hover { color: var(--brass-bright); }
.colophon nav { display: flex; gap: var(--s-5); }

/* --------------------------------------------------------------------------
   19. Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox.is-open { display: grid; animation: fade 0.22s var(--ease); }

.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(240, 240, 240, 0.1);
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--sand);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.18s var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(240, 240, 240, 0.22); }

.lightbox__close { top: var(--s-5); right: var(--s-5); }
.lightbox__nav--prev { left: var(--s-5); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--s-5); top: 50%; transform: translateY(-50%); }

.lightbox__caption {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.75);
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   20. Dialog (enquiry modal)
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
}

.modal.is-open { display: grid; animation: fade 0.22s var(--ease); }

.modal__panel {
  position: relative;
  width: min(560px, 100%);
  background: var(--marine);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 5vw, var(--s-7));
  color: var(--sand);
  animation: riseIn 0.28s var(--ease);
  margin-block: auto;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--sand);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.modal__close:hover { border-color: var(--brass-bright); color: var(--brass-bright); }

.modal h2 { margin-bottom: var(--s-2); }
.modal .lede {
  font-size: var(--t-sm);
  margin-bottom: var(--s-5);
  color: rgba(240, 240, 240, 0.78);
}

/* --------------------------------------------------------------------------
   21. WhatsApp
   -------------------------------------------------------------------------- */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 120;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  transition: transform 0.2s var(--ease);
}

.wa:hover { transform: scale(1.08); color: #fff; }

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero__inner,
  .split,
  .evidence,
  .contact__inner,
  .why_choose {
    grid-template-columns: 1fr;
  }

  .hero { min-height: auto; padding-top: clamp(7rem, 22vh, 9rem); }
  .split--flip .split__media { order: 0; }
  .evidence__gallery { margin-top: var(--s-6); }
  .masthead__logo img { height: 90px; }
}

@media (max-width: 800px) {
  .nav__toggle { display: grid; place-items: center; }

  .nav__list {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-5);
    padding: var(--s-8) var(--s-6);
    background: var(--marine-deep);
    border-left: 1px solid var(--line-dark);
    transform: translateX(100%);
    transition: transform 0.32s var(--ease);
    z-index: 90;
  }

  .nav__list.is-open { transform: translateX(0); }
  .nav__list .nav__link { font-size: var(--t-lg); color: var(--sand); }

  .nav__cta { display: none; }

  .nav__scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease);
  }

  .nav__scrim.is-open { opacity: 1; pointer-events: auto; }

  .masthead__logo img { height: 72px; }
  #operating .split:first-child .content { padding-top: var(--s-5); }
  #operating .split:nth-child(2) .eyebrow { padding-top: var(--s-3); }
  .faq-cta { padding: var(--s-6) var(--s-5); }
}
#gallery{
    padding-top:0px;
}
#standards{
padding-top: 35px;
}
#standards h2{
background: var(--brass);
color: #fff;
padding: 15px;
display: inline;
}
    

#services{
    padding:0px;
}
#services .since-dmc{
    padding: 40px 0px;
}
#services img{
    aspect-ratio: auto;
}
.why_choose{
       gap: 18px;
    grid-template-columns: 560px repeat(1, minmax(0, 1fr));

}
.why_choose h3{
    font-size: 1.3rem;
    border-bottom: 1px solid var(--brass);
    margin-bottom: 10px;
    padding-bottom: 10px; 
    display:inline-flex;
    align-items: center;
    gap: 10px;
}
.why_choose .info img {
    width:35px;
}
    

    .text-justify{
        text-align:justify;
    }
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  /*.capability, .commitment { grid-template-columns: 1fr; gap: var(--s-2); }*/
  .capability__icon, .commitment__icon { font-size: 1.15rem; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: var(--s-2); }
  .lightbox__nav--next { right: var(--s-2); }
  .masthead__logo img { height: 58px; }
  .credentials img:nth-child(2) { max-height: 44px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .f-flex { flex-direction: column; align-items: stretch; }
  .why_choose { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   24. Motion + print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
}

@media print {
  .masthead, .wa, .modal, .lightbox, .hero__media, .nav__toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .band--dark, .contact { background: #fff !important; color: #000 !important; }
  .faq__a { height: auto !important; }
}
#operating .inset {
  margin: var(--s-5) 0;
}
/* Add alongside your existing .split styles */
.split--full {
    grid-template-columns: 1fr;
}
.split--full .content {
    max-width: 100%;
}
#operating .split{
        align-items: start;
}
#operating .split:first-child .content {
    padding-top: 60px;
}
#operating .split:nth-child(2) .eyebrow {
    padding-top: 20px;
}
#operating .inset img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* Optional caption if you add <figcaption> inside the figure */
#operating .inset figcaption {
  margin-top: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.f-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.f-flex .field{
    width:100%;
}