/* ==========================================================================
   Sierra Auto Spa and Films — site stylesheet
   Served from Vercel, loaded site-wide by the sierra-assets mu-plugin.
   Edit locally → git push → live in ~5 minutes.

   Conventions
   -----------
   - One section per page, in page-flow order.
   - Class prefixes: sas-rev- (reviews), sas-tint- (window tinting), etc.
     Never reuse a prefix across pages.
   - Colours come from the tokens below. Don't hardcode new hexes.
   ========================================================================== */

:root {
  --sas-gold: #C9A84C;
  --sas-gold-bright: #e0c56b;
  --sas-gold-deep: #b8943e;
  --sas-navy: #0D1B2A;
  --sas-navy-mid: #112233;
  --sas-navy-alt: #0f1c2b;
  --sas-offwhite: #F5F5F0;
  --sas-font-head: 'Bebas Neue', sans-serif;
  --sas-font-body: 'Manrope', sans-serif;
}

/* ==========================================================================
   REVIEWS PAGE  —  /reviews/
   ========================================================================== */

/* --- shared bits ---------------------------------------------------------- */

.sas-rev-label {
  font-family: var(--sas-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sas-gold);
  margin-bottom: 14px;
}
.sas-rev-label-c { text-align: center; }

.sas-rev-h2 {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--sas-offwhite);
  text-align: center;
  margin: 0 0 52px;
}
.sas-rev-h2-tight { margin-bottom: 14px; }

/* --- 1. hero -------------------------------------------------------------- */
/* padding trimmed from 88px → 64px (post-launch audit item 7: hero ran ~470px
   tall for three lines of text) */

.sas-rev-hero {
  background: var(--sas-navy);
  padding: 64px 24px 48px;
  position: relative;
  overflow: hidden;
}
.sas-rev-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sas-gold), transparent);
}
.sas-rev-hero-inner { max-width: 840px; margin: 0 auto; text-align: center; }

.sas-rev-h1 {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--sas-offwhite);
  margin: 0 0 18px;
}
.sas-rev-sub {
  font-family: var(--sas-font-body);
  font-size: clamp(.98rem, 2.2vw, 1.1rem);
  line-height: 1.65;
  color: rgba(245, 245, 240, .72);
  margin: 0 auto;
  max-width: 620px;
}

/* --- 2. stats bar --------------------------------------------------------- */

.sas-rev-stats {
  background: var(--sas-navy-mid);
  padding: 40px 24px 34px;
  border-top: 1px solid rgba(201, 168, 76, .14);
  border-bottom: 1px solid rgba(201, 168, 76, .14);
}
.sas-rev-stats-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 72px);
  flex-wrap: wrap;
}
.sas-rev-stat { text-align: center; }
.sas-rev-stars { color: var(--sas-gold); font-size: 1rem; letter-spacing: .18em; margin-bottom: 6px; }
.sas-rev-statnum {
  font-family: var(--sas-font-head);
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--sas-offwhite);
}
.sas-rev-statlbl {
  font-family: var(--sas-font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, .55);
  margin-top: 7px;
}
.sas-rev-divider { width: 1px; height: 52px; background: rgba(201, 168, 76, .22); }

.sas-rev-stats-foot {
  text-align: center;
  margin: 26px 0 0;
  font-family: var(--sas-font-body);
  font-size: .85rem;
}

/* --- gold link treatment -------------------------------------------------- */
/* Kadence sets its own anchor colour with enough specificity to beat a bare
   `.class a` rule — that's why "See all on Google" was rendering browser-blue.
   Scoping to the section AND naming :visited wins it back. */

/* Scoped to the SECTION, not the paragraph, on purpose.

   The live page injects the Trustindex widget inside the <p class="sas-rev-wallnote">.
   A <p> can't legally contain block elements, so the HTML parser closes the
   paragraph early and the "See all on Google" link ends up as a sibling of
   .sas-rev-wallnote rather than a child of it. A `.sas-rev-wallnote a` selector
   silently misses it — which is exactly why that link stayed blue after the
   stylesheet went live while the stats-bar link went gold.

   Matching on the section catches it either way. */
.sas-rev-stats .sas-rev-stats-foot a,
.sas-rev-stats .sas-rev-stats-foot a:visited,
.sas-rev-wallfoot a,
.sas-rev-wallfoot a:visited {
  color: var(--sas-gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201, 168, 76, .35);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.sas-rev-stats .sas-rev-stats-foot a:hover,
.sas-rev-wallfoot a:hover {
  color: var(--sas-gold-bright) !important;
  border-bottom-color: var(--sas-gold-bright);
}

/* --- 3. featured spotlight ------------------------------------------------ */

.sas-rev-spot { background: var(--sas-navy); padding: 78px 24px; }
.sas-rev-spot-inner { max-width: 1120px; margin: 0 auto; }

.sas-rev-lead {
  position: relative;
  background: linear-gradient(160deg, #132639 0%, var(--sas-navy-mid) 100%);
  border: 1px solid rgba(201, 168, 76, .2);
  border-radius: 8px;
  padding: clamp(30px, 5vw, 52px);
  margin: 0 0 26px;
}
.sas-rev-quotemark {
  position: absolute;
  top: -6px;
  left: 22px;
  font-family: Georgia, serif;
  font-size: 120px;
  line-height: 1;
  color: rgba(201, 168, 76, .16);
  pointer-events: none;
}
.sas-rev-leadtext {
  position: relative;
  font-family: var(--sas-font-body);
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  line-height: 1.6;
  font-weight: 500;
  font-style: normal;
  color: var(--sas-offwhite);
  margin: 0 0 28px;
  border: 0;
  padding: 0;
}
.sas-rev-leadcap,
.sas-rev-ccap {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--sas-font-body);
}
.sas-rev-av {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(201, 168, 76, .14);
  border: 1px solid rgba(201, 168, 76, .4);
  color: var(--sas-gold);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sas-rev-capmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sas-rev-capmeta strong { font-size: .94rem; font-weight: 700; color: var(--sas-offwhite); }
.sas-rev-capmeta em { font-style: normal; font-size: .78rem; color: rgba(245, 245, 240, .55); }
.sas-rev-src {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sas-gold);
  border: 1px solid rgba(201, 168, 76, .32);
  border-radius: 3px;
  padding: 5px 10px;
  white-space: nowrap;
}

.sas-rev-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.sas-rev-card {
  display: flex;
  flex-direction: column;
  background: var(--sas-navy-mid);
  border: 1px solid rgba(201, 168, 76, .14);
  border-radius: 8px;
  padding: clamp(24px, 3.4vw, 34px);
  margin: 0;
  transition: border-color .25s ease, transform .25s ease;
}
.sas-rev-card:hover { border-color: rgba(201, 168, 76, .4); transform: translateY(-3px); }
.sas-rev-cstars { color: var(--sas-gold); letter-spacing: .16em; font-size: .9rem; margin-bottom: 15px; }
.sas-rev-ctext {
  font-family: var(--sas-font-body);
  font-size: .95rem;
  line-height: 1.68;
  font-style: normal;
  color: rgba(245, 245, 240, .84);
  margin: 0 0 24px;
  border: 0;
  padding: 0;
  flex: 1 1 auto;   /* equalises card heights in the pair */
}

/* --- 4. live review wall (Trustindex) ------------------------------------- */

.sas-rev-wall { background: var(--sas-navy-alt); padding: 74px 24px 28px; }
.sas-rev-wall-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.sas-rev-wallsub {
  font-family: var(--sas-font-body);
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(245, 245, 240, .66);
  max-width: 560px;
  margin: 0 auto;
}

.sas-rev-wallwrap { background: var(--sas-navy-alt); padding: 0 24px; }
.sas-rev-wallwrap-inner { max-width: 1120px; margin: 0 auto; }

.sas-rev-wallfoot { background: var(--sas-navy-alt); padding: 6px 24px 74px; }
.sas-rev-wallfoot-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.sas-rev-wallnote {
  font-family: var(--sas-font-body);
  font-size: .85rem;
  color: rgba(245, 245, 240, .5);
  margin: 22px 0 0;
}

/* Trustindex overrides.
   The plugin ships its own theme and sets styles inline, so these need the
   extra class in the chain to win. If a card still looks wrong after a plugin
   update, inspect it and add the new class name here. */

.sas-rev-wallwrap .ti-widget,
.sas-rev-wallwrap .ti-widget .ti-widget-container {
  background: transparent !important;
  font-family: var(--sas-font-body) !important;
}
.sas-rev-wallwrap .ti-widget .ti-review-item .ti-inner {
  background: var(--sas-navy-mid) !important;
  border: 1px solid rgba(201, 168, 76, .14) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-align: left !important;          /* was centred — mismatched the spotlight */
  transition: border-color .25s ease !important;
}
.sas-rev-wallwrap .ti-widget .ti-review-item:hover .ti-inner {
  border-color: rgba(201, 168, 76, .4) !important;
}
.sas-rev-wallwrap .ti-widget .ti-review-text,
.sas-rev-wallwrap .ti-widget .ti-review-content {
  color: rgba(245, 245, 240, .84) !important;
  font-size: .94rem !important;
  line-height: 1.66 !important;
  text-align: left !important;
}
.sas-rev-wallwrap .ti-widget .ti-name,
.sas-rev-wallwrap .ti-widget .ti-profile-name { color: var(--sas-offwhite) !important; font-weight: 700 !important; }
.sas-rev-wallwrap .ti-widget .ti-date { color: rgba(245, 245, 240, .45) !important; }
.sas-rev-wallwrap .ti-widget a,
.sas-rev-wallwrap .ti-widget .ti-read-more { color: var(--sas-gold) !important; }

/* Keep "read more" visible — Trustindex hides it in some layouts, which left
   reviews truncated mid-sentence with no way to expand. */
.sas-rev-wallwrap .ti-widget .ti-read-more { display: inline !important; }

/* Hide the widget's own rating header; the stats bar already covers it. */
.sas-rev-wallwrap .ti-widget .ti-header,
.sas-rev-wallwrap .ti-widget .ti-rating-text { display: none !important; }

/* --- 5. leave a review ---------------------------------------------------- */

.sas-rev-ask {
  background: var(--sas-navy);
  padding: 70px 24px;
  border-top: 1px solid rgba(201, 168, 76, .12);
}
.sas-rev-ask-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.sas-rev-asklabel {
  font-family: var(--sas-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sas-gold);
  margin-bottom: 12px;
}
.sas-rev-askh {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  line-height: 1.05;
  color: var(--sas-offwhite);
  margin: 0 0 14px;
}
.sas-rev-asktext {
  font-family: var(--sas-font-body);
  font-size: .98rem;
  line-height: 1.65;
  color: rgba(245, 245, 240, .7);
  margin: 0 0 30px;
}
.sas-rev-askbtn {
  display: inline-block;
  background: transparent;
  color: var(--sas-gold);
  border: 1.5px solid var(--sas-gold);
  font-family: var(--sas-font-body);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.sas-rev-ask .sas-rev-askbtn:visited { color: var(--sas-gold); }
.sas-rev-askbtn:hover { background: rgba(201, 168, 76, .12); color: var(--sas-gold-bright); }

/* --- 6. closing CTA ------------------------------------------------------- */

.sas-rev-cta {
  background: linear-gradient(160deg, var(--sas-navy-mid) 0%, var(--sas-navy) 100%);
  padding: 78px 24px;
  border-top: 1px solid rgba(201, 168, 76, .18);
}
.sas-rev-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.sas-rev-ctalabel {
  font-family: var(--sas-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sas-gold);
  margin-bottom: 12px;
}
.sas-rev-ctah {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 1.04;
  color: var(--sas-offwhite);
  margin: 0 0 14px;
}
.sas-rev-ctatext {
  font-family: var(--sas-font-body);
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(245, 245, 240, .66);
  margin: 0 0 32px;
}
.sas-rev-ctabtns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sas-rev-btnprimary {
  background: var(--sas-gold);
  color: var(--sas-navy);
  font-family: var(--sas-font-body);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease;
}
.sas-rev-cta .sas-rev-btnprimary,
.sas-rev-cta .sas-rev-btnprimary:visited { color: var(--sas-navy); }
.sas-rev-btnprimary:hover { background: var(--sas-gold-deep); }
.sas-rev-btnghost {
  background: transparent;
  color: var(--sas-gold);
  border: 1.5px solid var(--sas-gold);
  font-family: var(--sas-font-body);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease;
}
.sas-rev-cta .sas-rev-btnghost,
.sas-rev-cta .sas-rev-btnghost:visited { color: var(--sas-gold); }
.sas-rev-btnghost:hover { background: rgba(201, 168, 76, .1); }

.sas-rev-ctafoot {
  font-family: var(--sas-font-body);
  font-size: .82rem;
  line-height: 1.7;
  color: rgba(245, 245, 240, .45);
  margin: 30px 0 0;
}
.sas-rev-cta .sas-rev-ctafoot a,
.sas-rev-cta .sas-rev-ctafoot a:visited {
  color: rgba(201, 168, 76, .85);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, .28);
}
.sas-rev-cta .sas-rev-ctafoot a:hover { color: var(--sas-gold); }

/* --- reviews page: responsive (scoped to sas-rev-) ------------------------ */

@media (max-width: 820px) {
  .sas-rev-pair { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sas-rev-hero    { padding: 52px 20px 40px; }
  .sas-rev-spot    { padding: 56px 20px; }
  .sas-rev-wall    { padding: 54px 20px 20px; }
  .sas-rev-wallwrap{ padding: 0 20px; }
  .sas-rev-wallfoot{ padding: 6px 20px 54px; }
  .sas-rev-ask     { padding: 54px 20px; }
  .sas-rev-cta     { padding: 58px 20px; }

  .sas-rev-divider    { display: none; }
  .sas-rev-stats-inner{ gap: 28px; }
  .sas-rev-stat       { min-width: 44%; }

  .sas-rev-src       { display: none; }
  .sas-rev-quotemark { font-size: 88px; left: 14px; }

  .sas-rev-ctabtns { flex-direction: column; }
  .sas-rev-btnprimary,
  .sas-rev-btnghost { width: 100%; box-sizing: border-box; text-align: center; }
}


/* ==========================================================================
   CONTACT PAGE  —  /contact-us/
   ==========================================================================

   THE FORM IS A SHADOW DOM. Nothing in this file can reach inside it.
   Selectors like `.sas-con-formwrap input {}` will do nothing — that isolation
   is deliberate and it's what stops the Kadence theme from breaking the form.

   To change anything INSIDE the form (colours, labels, button text), edit
   widget/src/styles.css in the booking project and redeploy it. Not here.

   What we CAN style is everything around it: the section, the wrapper width,
   the heading above it, the cards beside it.
   ========================================================================== */

/* --- shared bits ---------------------------------------------------------- */

.sas-con-label {
  font-family: var(--sas-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sas-gold);
  margin-bottom: 14px;
}
.sas-con-label-c { text-align: center; }

.sas-con-h2 {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--sas-offwhite);
  margin: 0 0 14px;
}

/* --- 1. hero -------------------------------------------------------------- */

.sas-con-hero {
  background: var(--sas-navy);
  padding: 64px 24px 48px;
  position: relative;
  overflow: hidden;
}
.sas-con-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sas-gold), transparent);
}
.sas-con-hero-inner { max-width: 840px; margin: 0 auto; text-align: center; }

.sas-con-h1 {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--sas-offwhite);
  margin: 0 0 18px;
}
.sas-con-sub {
  font-family: var(--sas-font-body);
  font-size: clamp(.98rem, 2.2vw, 1.1rem);
  line-height: 1.65;
  color: rgba(245, 245, 240, .72);
  margin: 0 auto;
  max-width: 600px;
}

/* --- 2. contact method cards ---------------------------------------------- */

.sas-con-methods {
  background: var(--sas-navy);
  padding: 8px 24px 64px;
}
.sas-con-methods-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sas-con-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--sas-navy-mid);
  border: 1px solid rgba(201, 168, 76, .14);
  border-radius: 8px;
  padding: 26px 22px;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
a.sas-con-card:hover {
  border-color: rgba(201, 168, 76, .45);
  transform: translateY(-3px);
}
.sas-con-cardico {
  color: var(--sas-gold);
  margin-bottom: 12px;
  line-height: 0;
}
.sas-con-cardico svg { width: 26px; height: 26px; display: block; }

.sas-con-cardlbl {
  font-family: var(--sas-font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, .5);
}
.sas-con-cardval {
  font-family: var(--sas-font-body);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sas-offwhite);
}
.sas-con-cardnote {
  font-family: var(--sas-font-body);
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(245, 245, 240, .5);
  margin-top: 2px;
}
/* the theme colours anchors; these cards are anchors, so restate it */
.sas-con-methods a.sas-con-card,
.sas-con-methods a.sas-con-card:visited { color: inherit; }
.sas-con-methods a.sas-con-card:hover .sas-con-cardval { color: var(--sas-gold); }

/* --- 3. form section ------------------------------------------------------ */
/* Background is navy-mid so the form's own darker navy (#0a1628) reads as a
   distinct card sitting on the section rather than blending into it. */

.sas-con-form {
  background: var(--sas-navy-mid);
  padding: 72px 24px;
  border-top: 1px solid rgba(201, 168, 76, .14);
  border-bottom: 1px solid rgba(201, 168, 76, .14);
}
.sas-con-form-inner { max-width: 1120px; margin: 0 auto; }

/* No heading rules here — the widget renders its own header inside its Shadow
   DOM, and having one of ours too meant two stacked headings on the live page.
   See the note in pages/contact-us.html. */

/* The wrapper the widget mounts into.
   Contract with the booking app is the data attribute, not this class —
   don't rename `data-sas-contact-inline`. */
.sas-con-formwrap {
  max-width: 720px;
  margin: 0 auto;
  min-width: 0;              /* lets it shrink inside a grid column */
}
.sas-con-formwrap > [data-sas-contact-inline] { display: block; }

/* Reserved height so the page doesn't jump while booking.js loads. Stops
   applying the instant the real form renders.

   Measured against the live form 2026-08-05, not guessed:
     ≥600px wide → 853px tall
     480px       → 889px
     390px       → 906px
     360px       → 924px
   Reserving 640px (the original estimate) caused a 213px jump on load, which
   is a real Core Web Vitals hit. These numbers track the measurements.

   Re-measure if the form gains or loses a field. */
.sas-con-formwrap > [data-sas-contact-inline]:empty { min-height: 856px; }

/* --- 4. what happens next ------------------------------------------------- */

.sas-con-next { background: var(--sas-navy); padding: 72px 24px; }
.sas-con-next-inner { max-width: 1000px; margin: 0 auto; }
.sas-con-next-head { text-align: center; margin-bottom: 44px; }

.sas-con-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: sas-con-step;
}
.sas-con-step {
  position: relative;
  background: var(--sas-navy-mid);
  border: 1px solid rgba(201, 168, 76, .12);
  border-radius: 8px;
  padding: 30px 24px 26px;
  overflow: hidden;
}
.sas-con-step::before {
  counter-increment: sas-con-step;
  content: '0' counter(sas-con-step);
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--sas-font-head);
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(201, 168, 76, .1);
  pointer-events: none;
}
.sas-con-steph {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .02em;
  color: var(--sas-offwhite);
  margin: 0 0 8px;
}
.sas-con-stept {
  font-family: var(--sas-font-body);
  font-size: .9rem;
  line-height: 1.62;
  color: rgba(245, 245, 240, .66);
  margin: 0;
}

/* --- 5. service area ------------------------------------------------------ */

.sas-con-area {
  background: var(--sas-navy-alt);
  padding: 66px 24px;
  border-top: 1px solid rgba(201, 168, 76, .12);
}
.sas-con-area-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.sas-con-areatext {
  font-family: var(--sas-font-body);
  font-size: .98rem;
  line-height: 1.7;
  color: rgba(245, 245, 240, .68);
  margin: 0 0 26px;
}
.sas-con-arealist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sas-con-arealist li {
  font-family: var(--sas-font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(245, 245, 240, .82);
  background: rgba(201, 168, 76, .07);
  border: 1px solid rgba(201, 168, 76, .22);
  border-radius: 4px;
  padding: 9px 16px;
}
.sas-con-areanote {
  font-family: var(--sas-font-body);
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(245, 245, 240, .45);
  margin: 26px 0 0;
}

/* --- 6. closing CTA ------------------------------------------------------- */

.sas-con-cta {
  background: linear-gradient(160deg, var(--sas-navy-mid) 0%, var(--sas-navy) 100%);
  padding: 72px 24px;
  border-top: 1px solid rgba(201, 168, 76, .18);
}
.sas-con-cta-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.sas-con-ctah {
  font-family: var(--sas-font-head);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1.04;
  color: var(--sas-offwhite);
  margin: 0 0 14px;
}
.sas-con-ctatext {
  font-family: var(--sas-font-body);
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(245, 245, 240, .66);
  margin: 0 0 30px;
}
.sas-con-ctabtns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sas-con-btnprimary {
  background: var(--sas-gold);
  font-family: var(--sas-font-body);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease;
}
.sas-con-cta .sas-con-btnprimary,
.sas-con-cta .sas-con-btnprimary:visited { color: var(--sas-navy); }
.sas-con-btnprimary:hover { background: var(--sas-gold-deep); }

.sas-con-btnghost {
  background: transparent;
  border: 1.5px solid var(--sas-gold);
  font-family: var(--sas-font-body);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease;
}
.sas-con-cta .sas-con-btnghost,
.sas-con-cta .sas-con-btnghost:visited { color: var(--sas-gold); }
.sas-con-btnghost:hover { background: rgba(201, 168, 76, .1); }

.sas-con-ctafoot {
  font-family: var(--sas-font-body);
  font-size: .82rem;
  line-height: 1.7;
  color: rgba(245, 245, 240, .45);
  margin: 28px 0 0;
}
.sas-con-cta .sas-con-ctafoot a,
.sas-con-cta .sas-con-ctafoot a:visited {
  color: rgba(201, 168, 76, .85);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, .28);
}
.sas-con-cta .sas-con-ctafoot a:hover { color: var(--sas-gold); }

/* --- contact page: responsive (scoped to sas-con-) ------------------------ */

@media (max-width: 900px) {
  .sas-con-methods-inner { grid-template-columns: repeat(2, 1fr); }
  .sas-con-steps         { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sas-con-hero    { padding: 52px 20px 40px; }
  .sas-con-methods { padding: 8px 20px 48px; }
  .sas-con-form    { padding: 56px 20px; }
  .sas-con-next    { padding: 56px 20px; }
  .sas-con-area    { padding: 52px 20px; }
  .sas-con-cta     { padding: 56px 20px; }

  .sas-con-methods-inner { grid-template-columns: 1fr; gap: 14px; }
  .sas-con-card          { padding: 22px 20px; }

  /* form is taller on narrow screens — reserve more so nothing jumps */
  .sas-con-formwrap > [data-sas-contact-inline]:empty { min-height: 910px; }

  .sas-con-ctabtns { flex-direction: column; }
  .sas-con-btnprimary,
  .sas-con-btnghost { width: 100%; box-sizing: border-box; text-align: center; }
}