/* =====================================================
   About page — tokens
   ===================================================== */
:root{
  --gs-container: 1200px;
  --space-xxs: 6px;
  --space-xs: 10px;
  --space-s: 14px;
  --space-m: 18px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 44px;

  --ink-900: #111;
  --ink-700: #333;
  --ink-500: #555;
  --line-200:#ececec;

  --brand-green:#28a745;
  --btn-dark:#5f5f5f;

  --radius-4: 4px;            /* per your rule */
  --shadow-card: 0 10px 30px rgba(0,0,0,.08);
}

/* container helper (aligns with site) */
.container{
  width: min(var(--gs-container), 92%);
  margin-inline: auto;
}

/* =====================================================
/* =====================================================
   HERO — full-bleed image with dark overlay
   ===================================================== */
.about-hero {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 40vw, 480px);  /* taller hero */
  overflow: hidden;                        /* no white frame */
}

.about-hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}

.about-hero .hero-inner {
  position: relative;
  z-index: 1;
  width: min(var(--gs-container), 92%);
  margin: 0 auto;
  height: 100%;
  display: grid;
  align-content: center;
  gap: var(--space-xs);
  text-align: center;
  color: #fff;

  /* NEW: top padding to push text lower */
  padding-top: 100px;  /* adjust to 120px/140px if you want more space */
}

.hero-title {
  margin: 0;  /* fixed: no invalid margin */
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(48px, 4.6vw, 54px);
}

.hero-sub {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 22px);  /* fixed: consistent clamp order */
  opacity: .95;
}

/* =====================================================
   Main “card”
   ===================================================== */
.about-main{ padding: var(--space-2xl) 0; }

.about-card{
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.about-h2{
  margin: 0 0 var(--space-s);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--ink-900);
}

.about-col p{
  margin: 0 0 var(--space-m);
  color: var(--ink-700);
  line-height: 1.7;
  font-size: clamp(14px, 1.5vw, 16px);
}

.about-list{
  margin: 0 0 var(--space-m);
  padding-left: 18px;
  color: var(--ink-700);
  line-height: 1.7;
  font-size: clamp(14px, 1.5vw, 16px);
}
.about-list li + li{ margin-top: 6px; }

.about-photo{
  margin: var(--space-m) 0 0;
  border-radius: var(--radius-4);
  overflow: hidden;
  border: 1px solid var(--line-200);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.about-photo img{
  display: block;
  width: 100%; height: auto;
}

/* ================== Enquiry card (matches your mock) ================== */
.about-cta{
  width: min(var(--gs-container), 92%);
  margin: var(--space-2xl) auto 0;
}

.about-cta-card{
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: var(--radius-4);          /* keep 4px */
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 22px;
}

.about-cta-title{
  margin: 0 0 18px;
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 18px);
}
.about-cta-title .muted{ color:#c98b00; font-weight:600; }

/* Grid: two columns desktop, one on mobile */
.about-cta form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
}

.about-cta .field{
  display: flex;
  flex-direction: column;                   /* label on top */
  gap: 8px;
  min-width: 0;
}

/* Message spans both columns */
.about-cta .field-message{ grid-column: 1 / -1; }

.about-cta .mini-label{
  font-weight: 700;
  color: var(--ink-900);
  font-size: 14px;
}
.about-cta .mini-label.required::before{
  content: "*";
  color: #e24a2a;                           /* red asterisk */
  margin-right: 6px;
}

/* Inputs */
.about-cta input[type="text"],
.about-cta input[type="email"],
.about-cta input[type="tel"],
.about-cta textarea{
  width: 100%;
  border: 1px solid #dcdcdc;
  border-radius: var(--radius-4);
  height: 46px;
  padding: 0 14px;
  background: #fff;
  font: inherit;
  color: var(--ink-900);
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.about-cta textarea{
  height: 180px;                             /* tall like your shot */
  padding: 12px 14px;
  resize: vertical;
}

.about-cta input:focus,
.about-cta textarea:focus{
  outline: none;
  border-color: #f0b24b;
  box-shadow: 0 0 0 3px rgba(240,178,75,.18);
}

/* Submit button (orange) */
/* Submit button (full width, padding, hover) */
.about-cta .btn-submit{
  grid-column: 1 / -1;                 /* span full width */
  width: 100%;
  padding: 14px 0;
  border-radius: var(--radius-4);
  border: none;
  background: #f2a732;                 /* Golden Sparrow yellow */
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .02s ease-in-out;
}

.about-cta .btn-submit:hover{
  background: #ffd84d;                 /* lighter yellow */
  color: #000;                         /* black text */
}

.about-cta .btn-submit:active{
  transform: translateY(1px);
}


/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 1100px){
  .about-card{
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .about-cta form{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .about-cta .field{ grid-template-columns: 1fr; }
  .about-cta textarea{ height: 90px; }
  .about-cta .btn-submit{ justify-self: start; }
}

@media (max-width: 640px){
  .about-cta form{ grid-template-columns: 1fr; }
  .about-cta .btn-submit{ width: 100%; }
}


/* === Footer v3 (universal) === */
.gsw-footer.v3{
  background:#fff;
  box-shadow: 0 -40px 120px rgba(0,0,0,.05) inset;
}
.gsw-footer.v3 .footer-wrap{
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 48px 0 40px;
}
.gsw-footer.v3 .footer-brandline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.gsw-footer.v3 .footer-badge{ width: clamp(220px, 36vw, 440px); height: auto; }
.gsw-footer.v3 .footer-tagline{
  margin: 0; color: #222; line-height: 1.3;
  font-size: clamp(16px, 1.8vw, 22px); text-align: right;
}
.gsw-footer.v3 .footer-tagline strong{ font-weight: 800; }
.gsw-footer.v3 .footer-divider{
  margin: 24px auto 0; border: 0; border-top: 1px solid rgba(0,0,0,.25);
}
.gsw-footer.v3 .footer-copy{
  margin: 16px 0 0; text-align: center; color: #4b4b4b; font-size: 14px;
}
@media (max-width: 640px){
  .gsw-footer.v3 .footer-brandline{ flex-direction: column; text-align: center; }
  .gsw-footer.v3 .footer-tagline{ text-align: center; }
}