/* =========================================
   EXTENSION STYLES – EXTENSION.MD
========================================= */

/* =================================================== */
/* ========== OPEN SERVICE BLOCK CONTAINER ========== */

/* 03 COLUMNS — DESKTOP DEFAULT */
.three-col-container-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  justify-items: center;
  margin-top: 2rem;
  padding: 0 0rem; /* prevents edge touching on small screens */
}

/* CARD */
.card1 {
  display: grid;
  grid-template-rows: auto auto auto auto;
  padding: 1.75rem;
  border-radius: 12px;
  text-align: center;
  max-width: 360px;
  background-color: var(--bg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  width: 100%; /* critical for mobile responsiveness */
}

/* ICON */
.icon1 {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

/* LABEL */
.label1 {
  font-size: 0.95rem;
  letter-spacing: 1px;
  opacity: 0.7;
  margin: 0;
}

/* H2 */
.card1 h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0.2rem 0 0.6rem 0;
  line-height: 1.2;
}

/* DESCRIPTION */
.desc1 {
  line-height: 1.6;
  margin: 0.5rem 0;
  text-align: left;
}

/* ======================== 
Responsive Breakpoints === */

/* TABLET (2 columns) */
@media (max-width: 1024px) {
  .three-col-container-1 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .card1 {
    max-width: 420px;
  }
}

/* MOBILE (1 column) */
@media (max-width: 768px) {
  .three-col-container-1 {
    grid-template-columns: 1fr; /* stack vertically */
    gap: 1.25rem;
  }

  .card1 {
    padding: 1.5rem;
    max-width: 100%;
  }

  .icon1 {
    font-size: 3.2rem;
  }

  .card1 h2 {
    font-size: 1.7rem;
  }

  .desc1 {
    font-size: 0.95rem;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
  .card1 {
    padding: 1.3rem;
  }

  .icon1 {
    font-size: 2.9rem;
  }

  .card1 h2 {
    font-size: 1.6rem;
  }
}


/* ================================= */
/* ========== TITLE BAR ========== */

/* Common for all below */
.title-bar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 1rem;
  margin-top: 2rem;
  background: var(--border);
  border-radius: 10px 0 0 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.title-bar h4 {
  margin: 0;
  line-height: 1;
}


/* ================================= */
/* ========== STRATEGIST ========== */

/* CONTENT + IMAGE CONTAINER (DESKTOP) */
.two-col-strategist {
  display: grid;
  grid-template-columns: calc(60% - 1rem) calc(40% - 1rem);
  gap: 2rem;
  width: 100%;
  align-items: stretch;
  margin-top: 1rem;
  padding: 0 1rem;
}

/* LEFT COLUMN */
.strategist-content {
  padding: 0rem 3rem 0rem 0rem;
}

/* RIGHT IMAGE COLUMN */
.strategist-img {
  width: 100%;
  height: 100%;
  padding: 1rem 0;
}

.strategist-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 16px 0 0;
}

/* TYPOGRAPHY CONTROL */
.strategist-content h1,
.strategist-content p {
  margin: 0;
}

.strategist-content p {
  margin-bottom: 3rem;
  font-size: 1rem;
}

.strategist-content p:has(strong) {
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
}

.strategist-content p:last-of-type {
  margin-bottom: 0;
}

/* ======================== 
Responsive Breakpoints === */

/* TABLET: stacked but image still prominent */
@media (max-width: 1024px) {
  .two-col-strategist {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .strategist-img img {
    border-radius: 0 0 16px 0px; /* softer finish on tablets */
    justify-content: center;   /* centres container content */
  }
}

/* MOBILE: clean vertical flow */
@media (max-width: 768px) {

  .two-col-container {
    grid-template-columns: 1fr;
    padding: 0 0.8rem;
    gap: 1rem;
  }

  .strategist-content {
    padding: 0.6rem 0;
  }

  .strategist-content h1 {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
  }

  .strategist-content p {
    font-size: 0.95rem;
    margin-bottom: 1.6rem;
  }

  .strategist-img {
    padding: 0.4rem 0;
    justify-content: center;   /* centres container content */
  }

  .strategist-img img {
    border-radius: 0 0 16px 0px;
    justify-content: center;   /* centres container content */
    display: block;
    margin: 0 auto;
    width: auto;      /* keeps natural width */
    height: auto;     /* keeps natural height */
    max-width: 100%;  /* prevents overflow */
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .strategist-content h1 {
    font-size: 1.6rem;
  }

  .strategist-img img {
    height: auto;
    justify-content: center;   /* centres container content */
  }
}

/*==============================
 THREE-COL-CONTAINER-2 */
.three-col-container-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  justify-items: left; /* centres each card as an object */
  margin-top: 2rem;
}

/* CARD */
.card2 {
  display: grid;
  grid-template-rows: auto auto auto auto;
  padding: 3rem 3rem 3rem 3rem;
  border: 0px solid #ddd;
  border-radius: 0px;
  text-align: left; /* centres icon, label, and h2 */
  max-width: 360px;
  background-color: var(--border);
}

.card2 {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* #NUMBER ICON */
.icon2 {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 1rem;
}

/* H2 */
.card2 h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0rem 0 0rem 0;
  line-height: 1.2;
}

/* DESCRIPTION — left aligned */
.desc2 {
  line-height: 1.65;
  margin-top: 0rem;
  margin-bottom: 0.6rem;
  text-align: left; /* only this stays left */
}

/* ======================== 
Responsive Breakpoints === */

/* ========== TABLET (≤ 1024px) ========== */
@media (max-width: 1024px) {

  .three-col-container-2 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .card2 {
    max-width: 100%;
    padding: 2.5rem;
  }

  .icon2 {
    font-size: 3.4rem;
  }

  .card2 h3 {
    font-size: 1.25rem;
  }

  .desc2 {
    font-size: 0.97rem;
  }
}

/* ========== MOBILE (≤ 768px) ========== */
@media (max-width: 768px) {

  .three-col-container-2 {
    grid-template-columns: 1fr; /* stacked vertically */
    gap: 1.2rem;
    padding: 0 0.8rem;
  }

  .card2 {
    max-width: 100%;
    padding: 2.5rem;
  }

  .icon2 {
    font-size: 3rem;
    margin-bottom: 0.6rem;
  }

  .card2 h3 {
    font-size: 1.2rem;
  }

  .desc2 {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* ========== SMALL MOBILE (≤ 480px) ========== */
@media (max-width: 480px) {

  .card2 {
    padding: 2.5rem;
  }

  .icon2 {
    font-size: 2.8rem;
  }

  .card2 h3 {
    font-size: 1.15rem;
  }
}


/* ================================= */
/* ========== AI MERGER ========== */

/* CONTENT + IMAGE CONTAINER */
.two-col-aimerger {
  display: grid;
  grid-template-columns: calc(50% - 1rem) calc(50% - 1rem); /* image takes natural width */
  gap: 2rem;
  width: 100%;
  align-items: start; /* IMPORTANT — stops vertical stretching */
  margin-top: 1rem;
  padding: 0 1rem;
}

/* LEFT IMAGE COLUMN */
.aimerger-img {
  width: auto;        /* allow natural image width */
  height: auto;       /* prevent forced stretch */
  padding: 1rem 0;
  justify-content: center;   /* centres container content */
}

.aimerger-img img {
  width: auto;        /* keeps original width */
  max-width: 100%;    /* still responsive */
  height: auto;       /* keeps original proportions */
  object-fit: contain; /* avoids cropping */
  display: block;
  justify-content: center;   /* centres container content */
}

/* RIGHT COLUMN */
.aimerger-content {
  padding: 0;
}


/* TYPOGRAPHY CONTROL */
.aimerger-content h1,
.aimerger-content p {
  margin: 0;
}

.aimerger-content p {
  margin-bottom: 3rem;
  font-size: 1rem;
}

.aimerger-content p:has(strong) {
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
}

.aimerger-content p:last-of-type {
  margin-bottom: 0;
}

/* ======================== 
Responsive Breakpoints === */

/* TABLET: stacked but image still prominent */
@media (max-width: 1024px) {
  .two-col-aimerger {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .aimerger-img img {
    border-radius: 0 0 0px 0px; /* softer finish on tablets */
    justify-content: center;   /* centres container content */
  }
}

/* MOBILE: clean vertical flow */
@media (max-width: 768px) {

  .two-col-aimerger {
    grid-template-columns: 1fr;
    padding: 0 0.8rem;
    gap: 1rem;
  }

  .aimerger-content {
    padding: 0.6rem 0;
  }

  .aimerger-content h1 {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
  }

  .aimerger-content p {
    font-size: 0.95rem;
    margin-bottom: 1.6rem;
  }

  .aimerger-img {
    padding: 0.4rem 0;
    justify-content: center;   /* centres container content */
  }

  .aimerger-img img {
    border-radius: 0 16px 0px 0px;
    justify-content: center;   /* centres container content */
    display: block;
    margin: 0 auto;
    width: auto;      /* keeps natural width */
    height: auto;     /* keeps natural height */
    max-width: 100%;  /* prevents overflow */
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .aimerger-content h1 {
    font-size: 1.6rem;
  }

  .aimerger-img img {
    height: auto;
    justify-content: center;   /* centres container content */
  }
}


/* ================================= */
/* ========== PRO MENTOR ========== */

/* TWO-COLUMN PRO MENTOR CONTAINER */
.two-col-promentor {
  display: grid;
  grid-template-columns: 1fr 1fr; /* clean 50/50 split */
  gap: 2rem;
  width: 100%;
  align-items: start; /* prevents vertical stretching */
  margin-top: 1rem;
  padding: 0 1rem;
}

/* LEFT COLUMN */
.left-content-career {
  padding: 1rem 0;
}

/* RIGHT COLUMN (QUOTE) */
.right-content-quote {
  padding: 1rem;                 /* equal padding all sides */
  border-left: 4px solid var(--highlight); /* colored stroke */
  display: flex;                 /* enables vertical centering */
  align-items: center;           /* centers content vertically */
  margin-top: 2rem;
}

/* keep text readable inside */
.right-content-quote p {
  margin: 0rem;
  line-height: 1.7;
  margin-left: 2rem;
  padding-left: 1rem;
}

/* TYPOGRAPHY CONTROL */
.left-content-career h1,
.left-content-career p,
.right-content-quote p {
  margin: 0;
}

/* Spacing for readability */
.left-content-career p {
  margin-top: 0.6rem;
  line-height: 1.65;
}

/* Quote styling — subtle distinction */
.right-content-quote p {
  font-style: italic;
  line-height: 1.7;
  opacity: 0.9;
}

/* ======================== 
Responsive Breakpoints === */
/* TABLET (≤ 1024px)        */
@media (max-width: 1024px) {
  .two-col-promentor {
    grid-template-columns: 1fr; /* stack vertically */
    gap: 1.2rem;
    padding: 0 1rem;
  }

  .right-content-quote {
    margin-top: 0.8rem; /* reduce heavy gap */
  }
}

/* Hide image on TABLET & MOBILE */
@media (max-width: 1024px) {
  .promentor-img {
    display: none !important;
  }
}

/* MOBILE (≤ 768px)         */
@media (max-width: 768px) {

  .title-bar {
    margin-top: 1.5rem;
    padding: 0.9rem;
  }

  .two-col-promentor {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.8rem;
  }

  .left-content-career {
    padding: 0.6rem 0;
  }

  .left-content-career h1 {
    font-size: 1.7rem;
  }

  .left-content-career p {
    font-size: 0.95rem;
  }

  .right-content-quote {
    padding: 1rem;
    margin-top: 0.6rem;
  }

  .right-content-quote p {
    margin-left: 1rem;   /* reduce indent on small screens */
    padding-left: 0.6rem;
    font-size: 0.95rem;
  }
}

/* SMALL MOBILE (≤ 480px)   */
@media (max-width: 480px) {

  .left-content-career h1 {
    font-size: 1.6rem;
  }

  .right-content-quote p {
    margin-left: 0.6rem;
    padding-left: 0.4rem;
    height: auto;
  }
}

/* TWO-COLUMN PRO MENTOR CONTAINER2 */
.two-col-promentor2 {
  display: grid;
  grid-template-columns: 2fr 1fr; /* left 60%, right 40% */
  gap: 1.5rem;
  width: 100%;
  align-items: start;
  margin-top: 2rem;
  padding: 0 1rem;
}

/* FOUR BOX GRID IN LEFT COLUMN */
.four-col-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1.5rem;
}

/* CARD STYLING (reuse existing card2 styles) */
.card3 {
  display: grid;
  grid-template-rows: auto auto auto auto;
  padding: 2rem;      /* internal spacing to avoid top collision */
  border-radius: 0;
  background-color: var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  text-align: left;
  max-width: 100%;
  margin: 0rem !important;           /* remove external margin */
}

.card3 {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.icon3 {
  font-size: 2.5rem;
  margin-bottom: 0rem;
  margin-top: -1rem !important;
}

.card3 h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0rem 0 0.5rem 0;
  line-height: 1.2;
}

.desc3 {
  font-size: .9rem;
  line-height: 1.65;
  margin: 0;
}

/* RIGHT IMAGE COLUMN */
.promentor-img {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0rem 0;
}

.promentor-img img {
  width: auto;       /* original width */
  height: auto;      /* original height */
  max-width: 100%;   /* responsive */
  display: block;
}

/* ======================== 
Responsive Breakpoints === */
/* TABLET */
@media (max-width: 1024px) {
  .two-col-promentor2 {
    grid-template-columns: 1fr;  /* stack vertically */
    gap: 1.5rem;
  }

  .four-col-container {
    grid-template-columns: 1fr 1fr; /* keep 2x2 but smaller */
    gap: 1rem;
  }

  .promentor-img {
    justify-content: center;
  }

  .promentor-img img {
    height: auto;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .four-col-container {
    grid-template-columns: 1fr;  /* stack boxes vertically */
    gap: 1rem;
  }

  .promentor-img img {
    height:auto;
  }

  .card3 {
    padding: 3rem;
  }

  .icon3 {
    font-size: 3rem;
  }

  .card3 h3 {
    font-size: 1.2rem;
  }

  .desc3 {
    font-size: 0.95rem;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
  .promentor-img img {
    height:auto;
  }

  .card3 {
    padding: 3rem;
  }

  .icon3 {
    font-size: 2.8rem;
  }

  .card3 h3 {
    font-size: 1.1rem;
  }

  .desc3 {
    font-size: 0.9rem;
  }
}


/* ================================= */
/* ========== PRACTICE ========== */

/* IMG + CONTENT CONTAINER */
.two-col-practice {
  display: grid;
  grid-template-columns: calc(50% - 1rem) calc(50% - 1rem); /* image takes natural width */
  gap: 2rem;
  width: 100%;
  align-items: start; /* IMPORTANT — stops vertical stretching */
  margin-top: 0.5rem;
  padding: 0 1rem;
}

/* LEFT IMAGE COLUMN */
.practice-img {
  display: flex;
  align-items: flex-start;
  width: auto;                /* allow natural image width */
  height: auto;               /* prevent forced stretch */
  padding: 0rem 0;
  justify-content: center;    /* centres container content */
}

.practice-img img {
  width: auto;        /* keeps original width */
  max-width: 100%;    /* still responsive */
  height: auto;       /* keeps original proportions */
  object-fit: contain; /* avoids cropping */
  display: block;
  justify-content: center;   /* centres container content */

  max-width: 100%;
  display: block;
  border-radius: 5px;           /* subtle premium curve */
  box-shadow: 0 1px 10px var(--bg); 
  object-fit: cover;
}

/* RIGHT COLUMN */
.practice-content {
  padding: 0;
}

/* TYPOGRAPHY CONTROL */
.practice-content h4,
.practice-content p {
  margin: 0;
}

.practice-content p {
  margin-bottom: 1.6rem;
  font-size: 1rem;
}

.practice-content p:has(strong) {
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
}

.practice-content p:last-of-type {
  margin-bottom: 0;
}

/* Desktop refinement */
@media (min-width: 900px) {
  .practice-img img {
    max-width: 100%;
  }
}

/* ======================== 
Responsive Breakpoints === */

/* TABLET: stacked but image still prominent */
@media (max-width: 1024px) {

  .two-col-practice {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .practice-img {
    width: 100%;              /* make container same width as content */
  }

  .practice-img img {
    width: 100%;              /* force image to match container width */
    height: auto;             /* keep original proportions */
    display: block;           /* removes inline spacing gaps */
    border-radius: 5px;
  }
}

/* MOBILE: clean vertical flow */
@media (max-width: 768px) {

  .two-col-practice {
    grid-template-columns: 1fr;
    padding: 0 0.8rem;
    gap: 1rem;
  }

  .practice-content {
    padding: 0.6rem 0;
  }

  .practice-content h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .practice-content p {
    font-size: 0.95rem;
    margin-bottom: 1.6rem;
  }

  .practice-img {
    padding: 0.4rem 0;
    justify-content: center;      /* centres container content */
  }

  .practice-img img {
    border-radius: 05px 05px 05px 05px;
    justify-content: center;   /* centres container content */
    display: block;
    margin: 0 auto;
    width: auto;      /* keeps natural width */
    height: auto;     /* keeps natural height */
    max-width: 100%;  /* prevents overflow */
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .practice-content h4 {
    font-size: 1rem;
  }

  .practice-img img {
    height: auto;
    justify-content: center;   /* centres container content */
  }
}

/* FORM TO FILL UP */
/* Custom CSS for the form */
/* ======================================================
   INDEPENDENT ENQUIRY FORM SYSTEM — UPDATED (ALIGNED)
   ====================================================== */

.note em {
  font-size: 0.6rem;
  font-weight: 300;
}

.enq-form {
  margin: 0 0 2rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.enq-form input[type="checkbox"] + label,
.enq-form input[type="radio"] + label {
  text-transform: none; /* display as typed in HTML */
}

.enq-form label {
  text-transform: none;
}

/* Labels for inputs, radios, checkboxes */
.enq-form label {
  font-size: 0.8rem;        /* Adjust size */
  font-weight: 600;          /* Boldish */
  line-height: 1.4;          /* Space between lines */
  color: var(--fg, #333);    /* Use your default foreground color */
  text-transform: none;      /* Show text as typed */
}

/* Placeholder text */
.enq-form ::placeholder {
  font-size: 0.8rem;
  color: var(--fg-light, #888);
}

/* Inputs and textarea text */
.enq-form input,
.enq-form select,
.enq-form textarea {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
}

/* -------- GRID SYSTEM (FIXED) -------- */

.enq-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* <-- CRITICAL FIX */
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Column spans */
.enq-grid .col-6 {
  grid-column: span 6;
}

.enq-grid .col-12 {
  grid-column: span 12;
}

.enq-grid .col-12 .enq-select {
  margin-top: -1.5rem !important;
}


.enq-grid .col-4 {
  grid-column: span 4;
}

.enq-grid .col-12 {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 2rem;
}

/* Responsive stacking */
@media (max-width: 900px) {
  .enq-grid .col-6,
  .enq-grid .col-4 {
    grid-column: span 12;
  }
}

/* -------- INPUTS & FIELDS (CONTAINED) -------- */

.enq-form input[type="text"],
.enq-form input[type="email"],
.enq-form select,
.enq-form textarea {
  appearance: none;
  background: var(--border);
  border: none;
  border-radius: 0;
  color: inherit;
  display: block;
  outline: 0;
  padding: 0 1em;
  width: 100%;
  box-sizing: border-box;   /* <-- CRITICAL FIX */
}

/* Focus state */
.enq-form input:focus,
.enq-form select:focus,
.enq-form textarea:focus {
  border-color: var(--highlight);
  box-shadow: 0 0 0 2px var(--highlight);
}

/* Heights */
.enq-form input[type="text"],
.enq-form input[type="email"],
.enq-form select {
  height: var(--element-height, 3rem);
}

.enq-form textarea {
  padding: 0.75em 1em;
}

/* -------- SELECT WRAPPER -------- */

.enq-select {
  position: relative;
  display: block;
  width: 100%;              /* <-- keeps inside boundary */
  box-sizing: border-box;
}

.enq-select:before {
  color: var(--border);
  content: '\f078';
  display: block;
  height: var(--element-height, 3rem);
  line-height: var(--element-height, 3rem);
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: var(--element-height, 3rem);
}

/* Hide default arrow in IE */
.enq-form select::-ms-expand {
  display: none;
}

/* -------- CHECKBOX & RADIO -------- */

.enq-form input[type="checkbox"],
.enq-form input[type="radio"] {
  appearance: none;
  display: block;
  float: left;
  margin-right: -2em;
  opacity: 0;
  width: 1em;
  z-index: -1;
  line-height: 3;   
}

.enq-form input[type="checkbox"] + label,
.enq-form input[type="radio"] + label {
  color: var(--fg);
  cursor: pointer;
  display: inline-block;
  padding-left: calc(var(--element-height, 3rem) * 0.6 + 1em);
  padding-right: 0.75em;
  position: relative;
}

.enq-form input[type="checkbox"] + label:before,
.enq-form input[type="radio"] + label:before {
  background: var(--border-bg);
  content: '';
  display: inline-block;
  height: calc(var(--element-height, 2rem) * 0.6);
  left: 0;
  line-height: calc(var(--element-height, 2rem) * 0.575);
  position: absolute;
  text-align: center;
  top: 0;
  width: calc(var(--element-height, 2rem) * 0.6);
}

/* Checked state */
.enq-form input[type="checkbox"]:checked + label:before,
.enq-form input[type="radio"]:checked + label:before {
  font-size: .5rem;  /* adjust size as needed */
  background: var(--fg-bold);
  border-color: var(--highlight);
  content: '\f00c';
  color: var(--bg);
}

/* Radios round */
.enq-form input[type="radio"] + label:before {
  border-radius: 100%;
}

/* -------- BUTTON ROW -------- */

.enq-buttons {
  grid-column: span 12;
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* -------- PLACEHOLDERS -------- */

.enq-form ::placeholder {
  color: var(--fg-light) !important;
  opacity: 1;
}























/* =================================================== */
/* ========== QUOTE SECTION ========== */

.quote-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* THE QUOTE CARD */
.quote-box {
  position: relative;
  padding: 2rem 2rem 2rem 2.5rem; /* extra left breathing space */
  margin: 0;
  border-left: 5px solid var(--highlight);
  background: var(--bg);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  line-height: 1.7;
}

/* BIG LEFT QUOTE MARK — TOP LEFT */
.quote-mark {
  position: relative;
  top: 0rem;
  left: 0rem;
  font-size: 7rem;
  font-weight: 700;
  font-family: serif;
  color: var(--highlight);
  line-height: 1;
  opacity: 0.75;
  padding: 0rem 0rem 0rem 0rem;
  margin-top: 0rem;
  margin-bottom: 0rem !important;
}

/* Actual quote text */
.quote-text {
  display: block;
  font-size: 0.8rem;
  margin-top: -2rem !important;
}

/* Author line */
.quote-author {
  margin-top: 0.8rem;
  font-weight: 600;
  opacity: 0.85;
  font-size: 0.8rem;
}

/* Kill default margins inside the quote */ 
.quote-box p { 
  margin: 0 0 0.8rem 0; /* controlled spacing only */  
} 
  
.quote-box p:last-child { 
  margin-bottom: 0; /* no bottom gap */ 
}