/* ==========================================================================
   SHANTHA HI TECH — ENQUIRE
   css/enquire.css

   Deliberately the simplest stylesheet on the site. This isn't a hub page —
   it's the moment someone has already decided to get in touch, so the job
   is to get email and phone in front of them immediately, full-bleed black,
   reusing the exact register index.html's bottom .hero section and every
   header .contact-btn have already trained visitors to recognise.

   No JS file — mailto:/tel: links are native, nothing to wire up.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: #000000;
  color: #ffffff;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Matches the reset every other page stylesheet uses. The decoration half
   was missing here, so any anchor without its own text-decoration rule
   rendered underlined on this page only. */
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 300;
  padding: 16px 24px;
  background: #ffffff;
  color: #111111;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
}

.skip-link:focus { top: 16px; }

.enquire {
  width: 100%;
  min-height: calc(100vh - 193px); /* full screen minus the fixed header height (--header-h) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 120px;
  gap: 56px;
}

.enquire__eyebrow {
  color: #898989;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.enquire__title {
  max-width: 720px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.06;
  font-size: clamp(34px, 3.4vw + 20px, 60px);
}

.enquire__sub {
  max-width: 480px;
  margin-top: -32px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 17px;
  line-height: 1.5;
}

.enquire__channels {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* <address> renders italic by default in every browser; nothing else in
     this file resets it, so this is the only thing standing between the
     email/phone links and an unintended slant. */
  font-style: normal;
}

.enquire__channel-label {
  color: #898989;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.enquire__channel-link {
  display: inline-block;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2vw + 16px, 34px);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 4px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.enquire__channel-link:hover {
  border-bottom-color: #ffffff;
}

.enquire__note {
  max-width: 440px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .enquire__channels {
    flex-direction: row;
    gap: 80px;
  }
}


/* ==========================================================================
   FOOTER
   Matches the .foot convention used by solutions/applications/website/
   services/marketing.css, rather than index.html's older .footer naming —
   this page is built alongside the newer pages, not index.html.
   ========================================================================== */

.foot {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 32px 24px 16px;
}

.foot__container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.foot__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 24px;
}

.foot__logo { height: 48px; width: auto; }

.foot__tag {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.foot__t {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #898989;
  margin-bottom: 36px;
}

/* gap: 0 — the links carry their own spacing via padding now, so the two
   wouldn't stack. */
.foot__list { display: grid; gap: 0; list-style: none; }

.foot__list a {
  font-size: 14px;
  color: #898989;
  text-decoration: none;
  transition: color 0.2s ease;
  /* WCAG 2.2 SC 2.5.8 (Target Size, Minimum) wants 24px; 36px keeps a
     comfortable margin over that floor without the AAA-level 44px this used
     to carry. min-height (not padding) so font metrics can't leave it a
     pixel short. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.foot__list a:hover { color: #ffffff; }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 36px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #898989;
  font-size: 14px;
}

.foot__base a {
  text-decoration: none;
  /* Matches .enquire__channels' target-size treatment above — WCAG 2.2
     SC 2.5.8 wants 24px; min-height (not padding) so font metrics can't
     leave it a pixel short. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.foot__base a:hover { color: #ffffff; }

@media (max-width: 1023px) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  .foot__grid { grid-template-columns: 1fr; }
}