/*
   Section styles for the About Us, Contact Us, Terms & Conditions and
   Privacy Policy pages.

   Every selector here is a class the approved five-page design does not use,
   and the file is only enqueued on those four templates — so it cannot alter
   the Home, Insurance or Claims pages.

   Tokens (--primary, --accent, --line, --r, --sh…) come from site.css.
*/

/* ============================================================
   1. Page hero — copy on the left, artwork on the right
   ============================================================ */
.p-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #f2f7f5 0%, #eaf3ef 45%, #dfeee7 100%);
}

.p-hero--light {
  background: linear-gradient(115deg, #f4f7fa 0%, #eef4f8 50%, #e6f0ee 100%);
}

.p-hero__inner {
  position: relative;
  z-index: 1;               /* above .p-hero__bg and the ::after wash */
  display: grid;
  gap: 2rem;
  padding-block: 2.75rem 2.5rem;
}

.p-hero__eyebrow {
  margin-bottom: .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.p-hero h1 {
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--dark);
  margin-bottom: .45rem;
}

.p-hero h1 .txt-accent { color: var(--primary); }

.p-hero__tagline {
  margin-bottom: 1rem;
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
  font-weight: 600;
  color: var(--primary);
}

.p-hero__lead {
  max-width: 34rem;
  font-size: .9375rem;
  color: var(--gray);
}

.p-hero__lead + .p-hero__lead { margin-top: .75rem; }

.p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}

.p-hero__media {
  position: relative;
  align-self: center;
}

.p-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  object-fit: cover;
  box-shadow: var(--sh);
}

/* Contact hero: the supplied photograph is a full composed scene (agent, logo,
   crest). It runs full-height, bleeds to the top, bottom and right edges of the
   hero, and fades softly into the copy on its left, so the section reads as one
   integrated banner rather than a text column beside a rounded card. Scoped to
   the contact page. */
.page-template-page-contact .p-hero__media {
  align-self: stretch;
  margin: 0 calc(-1 * var(--pad-x)) 0 0;
}

.page-template-page-contact .p-hero__media img {
  height: 100%;
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  object-position: left center;
  /* Melt the left edge into the hero background so photo and copy blend
     instead of meeting at a hard card edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
}

/* A compact, full-bleed banner: the photo sets the height and the copy is
   centred against it with its own breathing room, rather than both columns
   being padded tall (which left the wide gap and the tall card). */
@media (min-width: 768px) {
  .page-template-page-contact .p-hero__inner {
    padding-block: 0;
    gap: 2.5rem;
  }

  .page-template-page-contact .p-hero__copy {
    align-self: center;
    padding-block: 2.25rem;
  }

  /* The container is centred with a max-width, so on wide screens a gutter sits
     between its right edge and the viewport. Bleed the photo across that gutter
     to the true right edge (the section clips its overflow, so no scrollbar),
     removing the empty strip beside it. */
  .page-template-page-contact .p-hero__media {
    margin-right: calc(-1 * (var(--pad-x) + (100vw - var(--maxw)) / 2));
  }
}

/* About hero: a full composed photograph (team, car, shield) replaces the drawn
   crest. Like the contact hero it fills the section top-to-bottom and to the
   right edge, and fades into the copy on the left, so it reads as one banner
   with no empty bands above or below the photo. */
.page-template-page-about .p-hero__eyebrow { display: none; }
.page-template-page-about .p-hero h1 { text-transform: uppercase; }

.page-template-page-about .p-hero__media img {
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 100%);
}

@media (min-width: 768px) {
  /* The photo sets the height and the copy is centred against it, instead of
     both columns being padded tall — which is what left the gaps top and
     bottom. */
  .page-template-page-about .p-hero__inner {
    padding-block: 0;
    align-items: stretch;
  }

  .page-template-page-about .p-hero__copy {
    align-self: center;
    padding-block: 2.75rem;
  }

  .page-template-page-about .p-hero__media {
    align-self: stretch;
    margin-right: calc(-1 * (var(--pad-x) + (100vw - var(--maxw)) / 2));
  }

  .page-template-page-about .p-hero__media img {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* The mockup leads with a single all-caps "CONTACT US" and no separate small
   eyebrow above it. */
.page-template-page-contact .p-hero__eyebrow { display: none; }
.page-template-page-contact .p-hero h1 { text-transform: uppercase; }

/* Faint artwork behind the hero, when a background image is supplied. It has
   to stay well behind the copy — the headline is the point of the section. */
.p-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .1;
  filter: saturate(.55);
  pointer-events: none;
}

/* Wash over the artwork so the left-hand column always has a clean ground. */
.p-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, .3) 100%);
  pointer-events: none;
}

/* Shield crest — the design's recurring badge, drawn in CSS so the page is
   complete before any photography is uploaded. */
.crest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: min(17rem, 78%);
  margin-inline: auto;
  padding: 2.75rem 1.5rem 3.25rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(150deg, #0f6349 0%, var(--primary) 45%, var(--primary-dark) 100%);
  box-shadow: var(--sh-lg);
  clip-path: polygon(50% 100%, 100% 74%, 100% 0, 0 0, 0 74%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.crest::after {
  content: "";
  position: absolute;
  inset: 6px;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r) var(--r) 0 0;
  pointer-events: none;
}

.crest .ico { width: 2.75rem; height: 2.75rem; color: #fff; }

.crest strong {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.crest span { font-size: .6875rem; color: rgba(255, 255, 255, .78); }

/* Privacy hero — a supplied glossy shield illustration replaces the drawn
   crest. It is a transparent graphic, so it must not carry the photo card's
   rounded corners, cover-crop or box-shadow; a soft drop-shadow lets it float
   over the light ground with the faint figures, matching the approved mockup. */
:is(.page-template-page-privacy, .page-template-page-terms) .p-hero__media { align-self: center; }

/* The mockups set the legal-page headings in capitals. */
:is(.page-template-page-privacy, .page-template-page-terms) .p-hero h1 { text-transform: uppercase; }

:is(.page-template-page-privacy, .page-template-page-terms) .crest-img {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(11, 78, 59, .22));
}

/* The Terms hero uses a photographic clipboard that reads as one integrated
   banner: it fills the media column, bleeds to the right viewport edge and
   fades softly into the copy on its left — like the contact hero. */
.page-template-page-terms .p-hero__media {
  position: relative;
  align-self: stretch;
  min-height: 250px;
  overflow: hidden;
  margin-right: calc(-1 * (var(--pad-x) + (100vw - var(--maxw)) / 2));
}

/* Absolutely fill the media box so the photo always covers it top-to-bottom
   (no blank strips above/below). A compact banner height keeps the wide photo
   from being over-zoomed, so the whole clipboard stays in view. */
.page-template-page-terms .crest-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  object-fit: cover;
  object-position: 68% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 100%);
}

/* A shorter, wider banner (closer to the mockup's proportion) so the clipboard
   photo isn't zoomed in. */
@media (min-width: 768px) {
  .page-template-page-terms .p-hero__inner { padding-block: 1.75rem; }
}

/* The "Gi" shield badge overlaid in the corner, as the mockup shows. */
.page-template-page-terms .p-hero__media::after {
  content: "";
  position: absolute;
  right: 2.25rem;
  bottom: 1.1rem;
  width: 3.4rem;
  height: 2.85rem;
  background: url("gi-shield.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28));
  pointer-events: none;
  z-index: 2;
}

/* Badge strip under the hero copy — “Quick Response · Expert Support …” */
.p-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.p-hero__badges li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dark);
}

/* The hairline divider only makes sense while the badges sit on one row; on a
   phone they wrap, and a leading rule on a wrapped item reads as a mistake. */
@media (min-width: 576px) {
  .p-hero__badges li + li { padding-left: 1.75rem; border-left: 1px solid rgba(11, 78, 59, .14); }
}

/* ============================================================
   2. Small section labels — “WHO WE ARE ———”
   ============================================================ */
.label-rule {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.label-rule::after {
  content: "";
  flex: 1;
  max-width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.label-rule--center { justify-content: center; }
.label-rule--center::after { display: none; }

/* ============================================================
   3. Icon discs
   ============================================================ */
.icon-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary);
}

.icon-disc .ico { width: 1.5rem; height: 1.5rem; }

.icon-disc--solid { background: var(--primary); color: #fff; }
.icon-disc--sm { width: 2.5rem; height: 2.5rem; }
.icon-disc--sm .ico { width: 1.15rem; height: 1.15rem; }

/* ============================================================
   4. Two-column intro (Who we are / What we do)
   ============================================================ */
.duo {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}

.duo h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  margin-bottom: .9rem;
}

.duo p { font-size: .9375rem; }
.duo p + p { margin-top: .8rem; }

.duo .accent-line {
  font-weight: 600;
  color: var(--primary);
}

/* Highlight callout: “Our focus is simple: …” */
.callout {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 1.4rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg);
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--dark);
}

.callout .ico { flex: none; margin-top: .1rem; color: var(--accent); }
.callout strong { display: block; font-weight: 600; }

/* ============================================================
   5. Tile grids — What we do / Why choose us / We can help with
   ============================================================ */
.tiles {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
}

.tile {
  padding: 1.35rem 1.15rem;
  text-align: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.tile:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: transparent; }
.tile .icon-disc { margin: 0 auto .85rem; }
.tile h3 { font-size: .9375rem; margin-bottom: .3rem; }
.tile p { font-size: .8125rem; }

/* Inside a half-width column, four across leaves the copy too narrow to read;
   these two modifiers keep the tile text on sensible line lengths. */
.tiles--2,
.tiles--3 { grid-template-columns: repeat(2, 1fr); }

/* Two-up list with icon left, used by “Our Mission” */
.mission-list {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}

.mission-list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}

.mission-list h3 { font-size: .875rem; margin-bottom: .2rem; }
.mission-list p { font-size: .75rem; }

/* ============================================================
   6. Numbered process rail — 01 → 05
   ============================================================ */
.num-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  counter-reset: numstep;
}

.num-step {
  position: relative;
  padding: 1.25rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.num-step:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--accent); }

.num-step__n {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(11, 78, 59, .22);
}

.num-step h3 { font-size: .9375rem; margin-bottom: .25rem; }
.num-step p { font-size: .75rem; }

/* Compact arrow rail — claims support on About */
.mini-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .35rem;
  margin-top: 1.5rem;
}

.mini-rail li {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.mini-rail__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  width: 4.75rem;
  text-align: center;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dark);
}

.mini-rail__arrow { color: var(--gray-light); }
.mini-rail li:last-child .mini-rail__arrow { display: none; }

/* ============================================================
   7. Insurance vs Takaful split banner
   ============================================================ */
.split-banner {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.split-banner__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12.5rem;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.split-banner__panel--dark {
  background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
}

.split-banner__panel--dark h3 { color: #fff; }
.split-banner__panel--dark p { color: rgba(255, 255, 255, .82); }

.split-banner__panel--light {
  background: linear-gradient(120deg, #eef7f2 0%, #dcece4 100%);
  color: var(--dark);
  border: 1px solid var(--line);
}

.split-banner__panel--light p { color: var(--gray); }

.split-banner h3 {
  font-size: 1.0625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.split-banner p { font-size: .8125rem; max-width: 24rem; }
.split-banner .btn { margin-top: 1.15rem; align-self: flex-start; }

/* ============================================================
   8. Values row
   ============================================================ */
.values-row {
  display: grid;
  gap: 1.5rem 1rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

.values-row .icon-disc { margin: 0 auto .7rem; }
.values-row h3 { font-size: .875rem; margin-bottom: .25rem; }
.values-row p { font-size: .75rem; max-width: 14rem; margin-inline: auto; }

/* ============================================================
   9. Stat chips
   ============================================================ */
.stat-chips {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(2, 1fr);
}

.stat-chip {
  padding: 1.15rem 1rem;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  text-align: center;
}

.stat-chip strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-chip span {
  display: block;
  margin-top: .3rem;
  font-size: .6875rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .8);
}

/* ============================================================
   10. Commitment band
   ============================================================ */
.commit-band {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.85rem 1.5rem;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #eef7f2 0%, #e0efe8 100%);
  border: 1px solid var(--line);
}

.commit-band__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  box-shadow: var(--sh-sm);
}

.commit-band__mark .ico { width: 1.85rem; height: 1.85rem; }
.commit-band h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.commit-band blockquote { margin: 0; font-size: .875rem; color: var(--gray); font-style: italic; }
.commit-band cite { display: block; margin-top: .6rem; font-size: .75rem; font-style: normal; font-weight: 600; color: var(--primary); }

/* ============================================================
   11. Contact method cards
   ============================================================ */
.method-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

.method {
  padding: 1.3rem 1.2rem;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.method:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: transparent; }

.method__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
}

.method__head h3 { font-size: .9375rem; margin: 0; }

.method__value {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dark);
  overflow-wrap: break-word;   /* only breaks a word that genuinely cannot fit */
}

a.method__value:hover { color: var(--primary); }

.method__note {
  margin-top: .5rem;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--gray);
}

/* ============================================================
   12. Contact form + map panel
   ============================================================ */
.contact-split {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.panel {
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-sm);
}

.panel__h {
  margin-bottom: 1.15rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
}

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .85rem;
  font-size: .75rem;
  color: var(--gray);
}

.form-note .ico { color: var(--accent); }

.map-embed {
  position: relative;
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 11;
  background: #eef3f1;
}

.map-embed img { display: block; width: 100%; height: auto; }

/* Live map fills the frame. */
.map-embed__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Branded marker over the map centre — the embed is centred on the office, so
   the pin's tip sits on it. Non-interactive, so the map stays draggable. */
.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
  z-index: 2;
}

.map-pin .ico {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--primary-dark);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}

.map-pin__label {
  display: flex;
  flex-direction: column;
  padding: .3rem .6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  line-height: 1.2;
  white-space: nowrap;
}

.map-pin__label strong { font-size: .8125rem; color: var(--dark); }
.map-pin__label span { font-size: .6875rem; color: var(--gray); }

/* “Open in Google Maps” affordance, bottom-right. */
.map-embed__open {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 2;
  padding: .3rem .6rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(255, 255, 255, .9);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  text-decoration: none;
}

.map-embed__open:hover { background: #fff; }

.map-hint {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-top: .9rem;
  padding: .9rem 1rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--dark);
}

.map-hint .ico { flex: none; margin-top: .1rem; color: var(--primary); }

/* ============================================================
   12b. CTA band — "split" layout (badge · copy · buttons)
   Opt-in via the `cta-band--split` modifier, only the contact page passes it,
   so every other page's centred CTA is untouched. Base .cta-band lives in
   site.css and is left unmodified.
   ============================================================ */
.cta-band--split { padding-block: 1.6rem; }

.cta-band--split .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 2rem;
  text-align: left;
}

.cta-band--split .cta-band__badge {
  flex: none;
  width: 5.5rem;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3));
}

.cta-band--split .cta-band__copy { flex: 1 1 15rem; }

.cta-band--split .cta-band__copy h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.2;
}

.cta-band--split .cta-band__copy p {
  margin: .3rem 0 0;
  max-width: 42rem;
}

.cta-band--split .cta-band__actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* On the contact CTA both buttons read as outline chips on the green band, as
   that mockup shows. Scoped to contact so other split CTAs (e.g. About) keep a
   solid primary button beside the outline ones. */
.page-template-page-contact .cta-band--split .cta-band__actions .btn {
  border: 1.5px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  box-shadow: none;
}

.page-template-page-contact .cta-band--split .cta-band__actions .btn:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .7);
}

/* On narrow screens the three parts stack and centre, so the row never
   crushes the copy or the buttons together. */
@media (max-width: 640px) {
  .cta-band--split .container { justify-content: center; text-align: center; }
  .cta-band--split .cta-band__actions { margin-left: 0; flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   12c. Trust / assurance strip below the contact CTA
   The same component as the commercial page's assure-bar, ported here because
   plan.css (its usual home) is not enqueued on the contact template.
   ============================================================ */
.assure-section { background: #fff; }

.assure-bar {
  display: grid;
  gap: 1.25rem 0;
  grid-template-columns: repeat(2, 1fr);
  padding-block: 1.75rem;
}

.assure-bar li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding-inline: .75rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dark);
  text-align: left;
}

.assure-bar .ico { flex: none; width: 1.65rem; height: 1.65rem; color: var(--primary); }

@media (min-width: 576px) {
  .assure-bar { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .assure-bar { grid-template-columns: repeat(5, 1fr); }
  .assure-bar li + li { border-left: 1px solid var(--line); }
}

/* ============================================================
   13. Legal pages — notice panels and numbered clauses
   ============================================================ */
.notice {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--dark);
}

.notice .ico { flex: none; margin-top: .15rem; width: 1.4rem; height: 1.4rem; color: var(--primary); }
.notice + .notice { margin-top: .75rem; }

.notice--warn { background: #fff8e9; border-color: #f4e2bd; }
.notice--warn .ico { color: #b7791f; }

.notice--danger { background: #fdf0f0; border-color: #f3d2d2; }
.notice--danger .ico { color: #c53030; }

.notice--center { align-items: center; }
.notice--center .ico { width: 1.9rem; height: 1.9rem; margin-top: 0; }

/* Terms acknowledgement — a dark green bar with the Gi badge on the left, the
   copy in white and a handshake tile on the right, as the mockup shows. */
.terms-ack {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r);
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}

.terms-ack__gi {
  flex: none;
  width: 3.2rem;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.terms-ack__copy { min-width: 0; font-size: .85rem; line-height: 1.6; color: #fff; }

.terms-ack__hand {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: .7rem;
  background: rgba(255, 255, 255, .92);
  color: var(--primary);
}

.terms-ack__hand .ico { width: 1.7rem; height: 1.7rem; }

@media (max-width: 560px) { .terms-ack__hand { display: none; } }

.notice--brand {
  align-items: center;
  background: linear-gradient(120deg, #eef7f2 0%, #e2f0ea 100%);
  border-color: #cfe6dc;
}

/* The shield sits in a soft white rounded badge, as the mockup shows, rather
   than as a bare glyph. */
.notice--brand .ico {
  box-sizing: content-box;
  margin-top: 0;
  width: 1.15rem;
  height: 1.15rem;
  padding: .55rem;
  border-radius: .7rem;
  background: #fff;
  border: 1px solid #cfe6dc;
  box-shadow: 0 1px 2px rgba(11, 78, 59, .06);
  color: var(--primary);
}

.notice-row {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}

/* Equal-height cells with the icon + text centred, so the copy sits on one
   line across all three badges. grid-auto-rows:1fr forces every cell in the
   row to the same height even when one badge's text is longer than another's. */
.notice-row { align-items: stretch; grid-auto-rows: 1fr; }
.notice-row .notice { height: auto; align-items: center; font-size: .8125rem; }

/* Closing "Your trust is important to us." panel — a soft green bar with a
   shield-lock crest on the left and a dark padlock tile on the right, as the
   mockup shows. */
.trust-panel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid #cfe6dc;
  border-radius: var(--r);
  background: linear-gradient(120deg, #eef7f2 0%, #e2f0ea 100%);
}

.trust-panel__crest { flex: none; width: 3rem; height: 3.45rem; }
.trust-panel__crest img { width: 100%; height: 100%; object-fit: contain; }

.trust-panel__copy { min-width: 0; }
.trust-panel__copy strong { display: block; margin-bottom: .2rem; font-size: .9375rem; color: var(--dark); }
.trust-panel__copy > span { font-size: .8125rem; line-height: 1.6; color: var(--gray); }

.trust-panel__lock {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .7rem;
  background: var(--primary-dark);
  color: #fff;
}

.trust-panel__lock .ico { width: 1.5rem; height: 1.5rem; }

@media (max-width: 560px) {
  .trust-panel__lock { display: none; }
}

/* Numbered clause list */
.clauses {
  display: grid;
  gap: .9rem;
  counter-reset: clause;
}

.clause {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t), border-color var(--t);
}

.clause:hover { box-shadow: var(--sh); border-color: #cfe6dc; }

.clause__body { min-width: 0; }

.clause h2 {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--primary);
}

.clause h2 .clause__n { color: var(--accent); }

.clause p { font-size: .8125rem; line-height: 1.7; }
.clause p + p { margin-top: .55rem; }

.clause ul {
  margin-top: .55rem;
  display: grid;
  gap: .3rem;
}

.clause li {
  position: relative;
  padding-left: 1rem;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--gray);
}

.clause li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.legal-meta {
  margin-top: 1.25rem;
  font-size: .75rem;
  color: var(--gray-light);
}

/* ============================================================
   14. Help-with row (Contact) — icon above label, hairline separated
   ============================================================ */
.help-row {
  display: grid;
  gap: 1.5rem 0;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

.help-row li { padding-inline: .5rem; }
.help-row .icon-disc { margin: 0 auto .7rem; background: transparent; color: var(--primary); }
.help-row .icon-disc .ico { width: 1.85rem; height: 1.85rem; }
.help-row h3 { font-size: .875rem; margin-bottom: .25rem; }
.help-row p { font-size: .75rem; max-width: 13rem; margin-inline: auto; }

/* ============================================================
   15. Responsive
   ============================================================ */
@media (min-width: 576px) {
  .mission-list { grid-template-columns: repeat(2, 1fr); }
  .notice-row { grid-template-columns: repeat(2, 1fr); }
  .stat-chips { grid-template-columns: repeat(3, 1fr); }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .p-hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; padding-block: 3.5rem; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tiles--2 { grid-template-columns: repeat(2, 1fr); }
  .tiles--3 { grid-template-columns: repeat(3, 1fr); }
  .values-row { grid-template-columns: repeat(3, 1fr); }
  .help-row { grid-template-columns: repeat(3, 1fr); }
  .help-row li + li { border-left: 1px solid var(--line); }
  .help-row li:nth-child(3n + 1) { border-left: 0; }
  .num-steps { grid-template-columns: repeat(2, 1fr); }
  .split-banner { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr 1.15fr; gap: 2.75rem; }
  .contact-split { grid-template-columns: 1.05fr .95fr; }
  .commit-band { flex-direction: row; align-items: center; gap: 1.75rem; padding: 2.15rem 2rem; }
  .clause { padding: 1.4rem 1.6rem; }
}

@media (min-width: 992px) {
  .p-hero__inner { padding-block: 4rem; gap: 3rem; }
  .num-steps { grid-template-columns: repeat(5, 1fr); }
  /* Five across leaves each card ~175px of copy width — enough for the full
     email and web address on one line, but only at this size. */
  .method-grid { grid-template-columns: repeat(5, 1fr); }
  .method { padding: 1.3rem 1rem; }
  .method__value { font-size: .8125rem; }
  .values-row { grid-template-columns: repeat(6, 1fr); }
  .help-row { grid-template-columns: repeat(6, 1fr); }
  .help-row li:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .help-row li:first-child { border-left: 0; }
  .stat-chips { grid-template-columns: repeat(5, 1fr); }
  .notice-row { grid-template-columns: repeat(3, 1fr); }
  .clause p, .clause li { font-size: .875rem; }
}

/* ============================================================
   16. About — compact "Our Mission / Why Choose" block
   Flatten the boxed cards into clean icon + text items and set the five
   "Why Choose" tiles in a single row, for the tighter, more polished layout
   the mockup shows. Both .mission-list and .tiles--3 are used only on the
   About page, so this affects nothing else.
   ============================================================ */

/* Mission items: drop the card box, keep the icon-left layout, tighten. */
.mission-list li {
  padding: .35rem .1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Why-choose (5) tiles: flat (no card chrome), lighter padding, no lift on
   hover; separated by hairline dividers (added below). */
.tiles--3 .tile {
  padding: .5rem .4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tiles--3 .tile:hover { transform: none; box-shadow: none; }
.tiles--3 .tile p { line-height: 1.5; }

/* What-we-do (4) tiles: keep the light card, just compact it — four separated
   cards with gaps and no dividers, as the mockup shows. */
.tiles--2 .tile { padding: 1.35rem 1rem; }
.tiles--2 .tile p { font-size: .8125rem; line-height: 1.5; }

@media (min-width: 768px) {
  /* Why-choose: five in one row, hairline between each. */
  .tiles--3 { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .tiles--3 .tile { padding-inline: 1.25rem; }
  .tiles--3 .tile + .tile { border-left: 1px solid var(--line); }

  /* What-we-do: four in one row, separated cards with a gap. */
  .tiles--2 { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

@media print {
  .p-hero, .commit-band, .stat-chip { background: none !important; color: #000 !important; }
  .clause, .notice, .panel { box-shadow: none; border: 1px solid #ccc; }
}