/* ==========================================================================
   Top Sydney Cleaners - reusable global UI foundation   (Stage 6 / Prompt 4)
   --------------------------------------------------------------------------
   Class-based and INERT: every rule is scoped to a `.tsc-*` class or to
   `.tsc-scope` descendants, so no existing (Elementor) page changes until its
   markup opts in. Consumes + extends the tokens declared in style.css :root.
   Loaded after style.css. No JavaScript. No new icon/font libraries.
   ========================================================================== */

/* 1 - TOKEN EXTENSIONS ---------------------------------------------------- */
:root{
  /* semantic colour roles (map onto the Stage-5 Direction A palette) */
  --tsc-color-primary:        var(--tsc-blue);      /* trust blue - links, focus, primary emphasis */
  --tsc-color-primary-strong: var(--tsc-blue-700);  /* primary hover / active */
  --tsc-color-primary-soft:   var(--tsc-blue-050);  /* tinted surfaces, rings */
  --tsc-color-secondary:      var(--tsc-blue);      /* secondary (outline) CTA */
  --tsc-color-secondary-strong: var(--tsc-blue-700);
  --tsc-color-cta:            var(--tsc-amber);     /* warm amber - highest-intent CTA only */
  --tsc-color-cta-strong:     var(--tsc-amber-600); /* CTA hover / active */
  --tsc-color-accent:         var(--tsc-amber);     /* accent = the CTA hue, used sparingly */
  --tsc-color-accent-strong:  var(--tsc-amber-600);
  --tsc-color-bg:             #F6F8FB;              /* page ground */
  --tsc-color-surface:        #FFFFFF;              /* cards / panels */
  --tsc-color-card:           #FFFFFF;              /* alias: card background */
  --tsc-color-surface-2:      #F1F4F9;              /* alternate section background */
  --tsc-color-text:           var(--tsc-ink);
  --tsc-color-text-muted:     var(--tsc-ink-70);
  --tsc-color-text-subtle:    var(--tsc-ink-45);
  --tsc-color-border:         var(--tsc-rule);
  --tsc-color-border-strong:  #CBD4E1;
  --tsc-color-success:        #1B7F4B;
  --tsc-color-success-bg:     #E7F5EE;
  --tsc-color-success-border: #A7D9BF;
  --tsc-color-success-text:   #12643B;
  --tsc-color-error:          #B42318;
  --tsc-color-error-bg:       #FDECEA;
  --tsc-color-error-border:   #F1B5AE;
  --tsc-color-error-text:     #8A1C13;

  /* fluid type scale (min .. max across ~360-1280px viewport) */
  --tsc-text-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --tsc-text-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
  --tsc-text-base: clamp(0.9375rem, 0.90rem + 0.25vw, 1rem);
  --tsc-text-md:   clamp(1rem, 0.94rem + 0.35vw, 1.125rem);
  --tsc-text-lg:   clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --tsc-h4:        clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --tsc-h3:        clamp(1.375rem, 1.20rem + 0.8vw, 1.75rem);
  --tsc-h2:        clamp(1.75rem, 1.40rem + 1.6vw, 2.5rem);
  --tsc-h1:        clamp(2.125rem, 1.60rem + 2.6vw, 3.25rem);

  --tsc-leading-tight:  1.2;
  --tsc-leading-snug:   1.35;
  --tsc-leading-normal: 1.6;

  /* spacing scale extension (4px base) */
  --tsc-space-7:  32px;
  --tsc-space-8:  40px;
  --tsc-space-9:  56px;
  --tsc-space-10: 72px;
  --tsc-space-11: 96px;
  --tsc-section-y:    clamp(48px, 6vw, 96px);
  --tsc-section-y-sm: clamp(32px, 4vw, 56px);

  /* container / layout */
  --tsc-container-max:    1200px;
  --tsc-container-wide:   1360px;
  --tsc-container-narrow: 760px;
  --tsc-gutter:           clamp(16px, 4vw, 40px);

  /* elevation + motion + radius extensions */
  --tsc-shadow-xs: 0 1px 2px rgba(14,23,38,.06);
  --tsc-shadow-lg: 0 12px 32px rgba(14,23,38,.14);
  --tsc-radius-xs: 4px;
  --tsc-dur-fast:  120ms;
  --tsc-dur-slow:  240ms;

  --tsc-z-header:  100;
  --tsc-z-overlay: 900;
  --tsc-z-modal:   1000;
}

/* 2 - TYPOGRAPHY (opt-in: add .tsc-scope to a page/section wrapper) ------
   `:where()` keeps specificity at 0 so page-level and Elementor styles win
   by default; this only supplies a consistent baseline where nothing else
   sets it. Heading LEVELS stay page-authored - this styles by tag, not by
   forcing a level. */
.tsc-scope{ font-family:var(--tsc-font); color:var(--tsc-color-text); }
.tsc-scope :where(h1,h2,h3,h4,h5,h6){ font-family:var(--tsc-font); color:var(--tsc-color-text); text-wrap:balance; margin:0 0 .5em; }
.tsc-scope :where(h1){ font-size:var(--tsc-h1); line-height:var(--tsc-leading-tight); font-weight:700; letter-spacing:-.01em; }
.tsc-scope :where(h2){ font-size:var(--tsc-h2); line-height:var(--tsc-leading-tight); font-weight:700; letter-spacing:-.005em; }
.tsc-scope :where(h3){ font-size:var(--tsc-h3); line-height:var(--tsc-leading-snug); font-weight:600; }
.tsc-scope :where(h4){ font-size:var(--tsc-h4); line-height:var(--tsc-leading-snug); font-weight:600; }
.tsc-scope :where(p){ font-size:var(--tsc-text-base); line-height:var(--tsc-leading-normal); margin:0 0 1rem; }
.tsc-scope :where(p):last-child{ margin-bottom:0; }
.tsc-scope :where(small){ font-size:var(--tsc-text-xs); color:var(--tsc-color-text-subtle); }

.tsc-eyebrow{ font-size:var(--tsc-text-sm); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tsc-color-primary); }
.tsc-lead{ font-size:var(--tsc-text-md); line-height:var(--tsc-leading-normal); color:var(--tsc-color-text-muted); }
.tsc-text-muted{ color:var(--tsc-color-text-muted); }

/* 3 - CONTAINER -------------------------------------------------------- */
.tsc-container{ width:100%; max-width:var(--tsc-container-max); margin-inline:auto; padding-inline:var(--tsc-gutter); box-sizing:border-box; }
.tsc-container--wide{ max-width:var(--tsc-container-wide); }
.tsc-container--narrow{ max-width:var(--tsc-container-narrow); }

/* 4 - SECTION -------------------------------------------------------- */
.tsc-section{ padding-block:var(--tsc-section-y); }
.tsc-section--tight{ padding-block:var(--tsc-section-y-sm); }
.tsc-section--surface{ background:var(--tsc-color-surface); }
.tsc-section--alt{ background:var(--tsc-color-surface-2); }
.tsc-section--ink{ background:var(--tsc-ink); color:var(--tsc-white); }
.tsc-section--ink :where(.tsc-section__title){ color:var(--tsc-white); }
.tsc-section--ink :where(.tsc-section__lead){ color:rgba(255,255,255,.8); }
.tsc-section__head{ display:flex; flex-direction:column; gap:var(--tsc-space-3); max-width:60ch; margin-bottom:var(--tsc-space-8); }
.tsc-section__title{ font-size:var(--tsc-h2); line-height:var(--tsc-leading-tight); font-weight:700; letter-spacing:-.005em; margin:0; text-wrap:balance; }
.tsc-section__lead{ font-size:var(--tsc-text-md); line-height:var(--tsc-leading-normal); color:var(--tsc-color-text-muted); margin:0; }
.tsc-section__cta{ margin-top:var(--tsc-space-8); display:flex; flex-wrap:wrap; gap:var(--tsc-space-3); }
.tsc-section--center .tsc-section__head,
.tsc-section__head.tsc-section--center{ margin-inline:auto; align-items:center; text-align:center; }
.tsc-section__cta.tsc-section--center{ text-align:center; }

/* 5 - BUTTONS -------------------------------------------------------- */
.tsc-btn{
  --_bg:var(--tsc-color-primary);
  --_fg:var(--tsc-white);
  --_bg-hover:var(--tsc-color-primary-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:44px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:var(--tsc-radius-md);
  background:var(--_bg);
  color:var(--_fg);
  font-family:var(--tsc-font);
  font-size:var(--tsc-text-sm);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  text-transform:none;            /* reset Astra's global button uppercase */
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:var(--tsc-shadow-xs);
  transition:transform var(--tsc-dur) var(--tsc-ease),
             box-shadow var(--tsc-dur) var(--tsc-ease),
             background var(--tsc-dur) var(--tsc-ease),
             border-color var(--tsc-dur) var(--tsc-ease);
}
.tsc-btn:hover{ background:var(--_bg-hover); color:var(--_fg); transform:translateY(-2px); box-shadow:var(--tsc-shadow-md); }
.tsc-btn:active{ transform:translateY(0); box-shadow:var(--tsc-shadow-xs); }
.tsc-btn:focus-visible{ outline:2px solid var(--tsc-ink); outline-offset:2px; }
.tsc-btn[disabled], .tsc-btn.is-disabled{ opacity:.55; pointer-events:none; box-shadow:none; transform:none; }

.tsc-btn--primary{ --_bg:var(--tsc-color-cta); --_bg-hover:var(--tsc-color-cta-strong); --_fg:var(--tsc-ink); font-weight:700; }   /* highest-intent: Book a Clean. Ink on amber = 7:1 (WCAG AA). */
.tsc-btn--secondary{
  --_bg:transparent; --_fg:var(--tsc-color-primary); --_bg-hover:var(--tsc-color-primary-soft);
  border-color:currentColor; box-shadow:none;
}
.tsc-btn--secondary:hover{ color:var(--tsc-color-primary-strong); }
.tsc-btn--ghost{ --_bg:transparent; --_fg:var(--tsc-color-text); --_bg-hover:var(--tsc-color-surface-2); box-shadow:none; }
.tsc-btn--on-ink{ --_bg:var(--tsc-white); --_fg:var(--tsc-ink); --_bg-hover:#EAF0FF; }
.tsc-btn--sm{ min-height:36px; padding:8px 16px; font-size:var(--tsc-text-xs); }
.tsc-btn--lg{ min-height:52px; padding:16px 30px; font-size:var(--tsc-text-base); }
.tsc-btn--block{ display:flex; width:100%; }

.tsc-cta-link{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--tsc-font); font-weight:600; font-size:var(--tsc-text-sm);
  color:var(--tsc-color-primary); text-decoration:none;
}
.tsc-cta-link::after{ content:"\2192"; transition:transform var(--tsc-dur) var(--tsc-ease); }
.tsc-cta-link:hover{ color:var(--tsc-color-primary-strong); }
.tsc-cta-link:hover::after{ transform:translateX(3px); }
.tsc-cta-link:focus-visible{ outline:2px solid var(--tsc-color-primary); outline-offset:3px; border-radius:2px; }

/* 6 - HOVER-LIFT : one reusable interaction ------------------------- */
.tsc-lift{ transition:transform var(--tsc-dur-slow) var(--tsc-ease), box-shadow var(--tsc-dur-slow) var(--tsc-ease); }
.tsc-lift:hover, .tsc-lift:focus-within{ transform:translateY(-4px); box-shadow:var(--tsc-shadow-lg); }

/* 7 - CARDS -------------------------------------------------------- */
.tsc-card{
  display:flex; flex-direction:column;
  box-sizing:border-box;
  background:var(--tsc-color-surface);
  border:1px solid var(--tsc-color-border);
  border-radius:var(--tsc-radius-lg);
  padding:var(--tsc-space-6);
  box-shadow:var(--tsc-shadow-xs);
}
.tsc-card__media{
  margin:calc(var(--tsc-space-6) * -1) calc(var(--tsc-space-6) * -1) var(--tsc-space-5);
  border-radius:var(--tsc-radius-lg) var(--tsc-radius-lg) 0 0;
  overflow:hidden;
}
.tsc-card__icon{
  width:44px; height:44px; margin-bottom:var(--tsc-space-4);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--tsc-radius-md);
  background:var(--tsc-color-primary-soft); color:var(--tsc-color-primary);
}
.tsc-card__icon svg{ width:24px; height:24px; }
.tsc-card__title{ font-size:var(--tsc-h4); font-weight:600; line-height:var(--tsc-leading-snug); margin:0 0 var(--tsc-space-2); color:var(--tsc-color-text); }
.tsc-card__text{ font-size:var(--tsc-text-sm); line-height:var(--tsc-leading-normal); color:var(--tsc-color-text-muted); margin:0; }
.tsc-card__foot{ margin-top:auto; padding-top:var(--tsc-space-4); }
.tsc-card--flat{ box-shadow:none; }
.tsc-card--pad-lg{ padding:var(--tsc-space-8); }
.tsc-card--pad-lg .tsc-card__media{ margin:calc(var(--tsc-space-8) * -1) calc(var(--tsc-space-8) * -1) var(--tsc-space-6); }
.tsc-card--interactive{
  transition:transform var(--tsc-dur-slow) var(--tsc-ease),
             box-shadow var(--tsc-dur-slow) var(--tsc-ease),
             border-color var(--tsc-dur-slow) var(--tsc-ease);
}
.tsc-card--interactive:hover,
.tsc-card--interactive:focus-within{
  transform:translateY(-3px);            /* slight raise - controlled, no bounce/scale */
  box-shadow:var(--tsc-shadow-md);       /* one step up from the resting xs shadow */
  border-color:var(--tsc-color-border-strong);
}
/* priority service emphasis (Airbnb #1, Residential #2) - a quiet ring, no side rail */
.tsc-card--featured{ box-shadow:0 0 0 1.5px var(--tsc-color-primary) inset, var(--tsc-shadow-sm); }

/* 8 - CTA BAND : reusable Airbnb / Residential conversion pattern ---
   Same component for both services; content (title, badge) differentiates. */
.tsc-cta-band{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between;
  gap:var(--tsc-space-5) var(--tsc-space-8);
  box-sizing:border-box;
  background:var(--tsc-color-primary-soft);
  border:1px solid var(--tsc-color-border);
  border-radius:var(--tsc-radius-lg);
  padding:var(--tsc-space-8);
}
.tsc-cta-band__body{ display:flex; flex-direction:column; gap:var(--tsc-space-2); max-width:52ch; }
.tsc-cta-band__title{ font-size:var(--tsc-h3); font-weight:700; line-height:var(--tsc-leading-snug); margin:0; color:var(--tsc-color-text); text-wrap:balance; }
.tsc-cta-band__text{ font-size:var(--tsc-text-base); line-height:var(--tsc-leading-normal); color:var(--tsc-color-text-muted); margin:0; }
.tsc-cta-band__actions{ display:flex; flex-wrap:wrap; gap:var(--tsc-space-3); }
.tsc-cta-band--ink{ background:var(--tsc-ink); border-color:transparent; }
.tsc-cta-band--ink .tsc-cta-band__title{ color:var(--tsc-white); }
.tsc-cta-band--ink .tsc-cta-band__text{ color:rgba(255,255,255,.8); }
/* Phone CTA sitting on the dark band - recolour so it stays legible (AA on ink). */
.tsc-cta-band--ink .tsc-cta-phone{ color:var(--tsc-white); }
.tsc-cta-band--ink .tsc-cta-phone:hover{ color:rgba(255,255,255,.8); }
.tsc-cta-band--ink .tsc-cta-phone__ico{ color:var(--tsc-white); }
.tsc-cta-band--ink .tsc-cta-phone__label{ color:rgba(255,255,255,.7); }
.tsc-cta-band--ink .tsc-cta-phone:focus-visible{ outline-color:var(--tsc-white); }

/* 9 - FORMS : global visual foundation (opt-in via .tsc-form) ------
   Does NOT touch Fluent Forms markup - plugin forms are mapped in their
   own stages. Functionality is never altered here. */
.tsc-form{ display:flex; flex-direction:column; gap:var(--tsc-space-5); }
.tsc-field{ display:flex; flex-direction:column; gap:var(--tsc-space-2); }
.tsc-form-label,
.tsc-field > label{ font-size:var(--tsc-text-sm); font-weight:600; color:var(--tsc-color-text); }
.tsc-form-input,
.tsc-form input:where([type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],[type="search"],[type="date"]),
.tsc-form textarea,
.tsc-form select{
  width:100%; box-sizing:border-box;
  min-height:44px;
  padding:10px 14px;
  font:inherit;
  font-size:var(--tsc-text-sm);
  color:var(--tsc-color-text);
  background:var(--tsc-color-surface);
  border:1px solid var(--tsc-color-border-strong);
  border-radius:var(--tsc-radius-md);
  transition:border-color var(--tsc-dur) var(--tsc-ease), box-shadow var(--tsc-dur) var(--tsc-ease);
}
.tsc-form textarea{ min-height:120px; padding:12px 14px; resize:vertical; }
.tsc-form :where(input,textarea,select):focus{
  outline:none;
  border-color:var(--tsc-color-primary);
  box-shadow:0 0 0 3px var(--tsc-color-primary-soft);
}
.tsc-form :where(input,textarea)::placeholder{ color:var(--tsc-color-text-subtle); }
.tsc-field--invalid .tsc-form-input,
.tsc-form :where(input,textarea,select)[aria-invalid="true"]{ border-color:var(--tsc-color-error); }
.tsc-form-hint{ font-size:var(--tsc-text-xs); color:var(--tsc-color-text-subtle); }
.tsc-checkbox{ display:flex; align-items:flex-start; gap:var(--tsc-space-2); font-size:var(--tsc-text-sm); line-height:var(--tsc-leading-snug); }
.tsc-checkbox input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--tsc-color-primary); }

/* Fluent Forms submit button -> design-system button treatment.
   Scope: the new-design surfaces only - the custom homepage (.tsc-home) and an
   explicit .tsc-form-scope opt-in wrapper. Existing standalone form pages
   (Book a Clean, Contact) are intentionally left on the plugin's own styling
   in this prompt; rolling this treatment out site-wide is a later, QA'd step.
   The plugin default (#fff on var(--fluentform-primary) #1a7efb ~= 3.9:1)
   fails WCAG AA contrast; Fluent Forms sets it from a per-form rule at
   specificity 0-3-1, so the selector below is ~0-5-0 and also carries
   !important on the two colour declarations - the accessible amber / ink CTA
   (7:1) wins regardless of inject order or plugin version. Markup, fields and
   behaviour are untouched. The footer callback form keeps its own rule. */
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style){
  min-height:46px;
  padding:12px 26px;
  border:0;
  border-radius:var(--tsc-radius-pill);
  background:var(--tsc-color-cta) !important;
  color:var(--tsc-ink) !important;
  font-family:var(--tsc-font);
  font-size:var(--tsc-text-sm);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:none;
  cursor:pointer;
  box-shadow:var(--tsc-shadow-sm);
  transition:background var(--tsc-dur) var(--tsc-ease), box-shadow var(--tsc-dur) var(--tsc-ease), transform var(--tsc-dur) var(--tsc-ease);
}
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover{
  background:var(--tsc-color-cta-strong) !important;
  color:var(--tsc-ink) !important;
  transform:translateY(-1px);
  box-shadow:var(--tsc-shadow-md);
}
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):focus-visible{ outline:2px solid var(--tsc-ink); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  :is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style){ transition:none !important; }
  :is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover{ transform:none !important; }
}

/* Fluent Forms fields + status messages on the homepage quote form (S14).
   Same treatment as the footer callback form; markup/behaviour untouched. */
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form{ display:flex; flex-direction:column; gap:var(--tsc-space-4); }
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-el-group{ margin:0; }
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-el-input--label label{
  font-size:var(--tsc-text-sm); font-weight:600; color:var(--tsc-color-text);
}
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-el-form-control{
  width:100%; box-sizing:border-box;
  min-height:44px; padding:10px 14px;
  font:inherit; font-size:var(--tsc-text-sm);
  color:var(--tsc-color-text); background:var(--tsc-color-surface);
  border:1px solid var(--tsc-color-border-strong); border-radius:var(--tsc-radius-md);
  transition:border-color var(--tsc-dur) var(--tsc-ease), box-shadow var(--tsc-dur) var(--tsc-ease);
}
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form textarea.ff-el-form-control{ min-height:110px; resize:vertical; }
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-el-form-control:focus{
  outline:none; border-color:var(--tsc-color-primary);
  box-shadow:0 0 0 3px var(--tsc-color-primary-soft);
}
:is(.tsc-home, .tsc-form-scope) .frm-fluent-form .ff-el-group.ff-name-field-wrapper .ff-t-container{ gap:12px; }
:is(.tsc-home, .tsc-form-scope) :where(.ff-message-success, .ff_submit_msg_success){
  margin:0; padding:14px 18px;
  border:1px solid var(--tsc-color-success-border);
  border-radius:var(--tsc-radius-md);
  background:var(--tsc-color-success-bg);
  color:var(--tsc-color-success-text);
  font-size:var(--tsc-text-sm); font-weight:500; line-height:1.5;
}
:is(.tsc-home, .tsc-form-scope) :where(.ff-message-error, .error, .ff-el-is-error .text-danger){
  color:var(--tsc-color-error); font-size:12.5px;
}
:is(.tsc-home, .tsc-form-scope) .ff-el-is-error .ff-el-form-control,
:is(.tsc-home, .tsc-form-scope) .ff-el-form-control.has-error{ border-color:var(--tsc-color-error); }

/* 10 - SUCCESS / ERROR MESSAGES --------------------------------- */
.tsc-msg{
  display:flex; align-items:flex-start; gap:var(--tsc-space-3);
  box-sizing:border-box;
  padding:var(--tsc-space-4) var(--tsc-space-5);
  border:1px solid var(--tsc-color-border);
  border-radius:var(--tsc-radius-md);
  background:var(--tsc-color-surface-2);
  color:var(--tsc-color-text);
  font-size:var(--tsc-text-sm);
  line-height:var(--tsc-leading-normal);
}
.tsc-msg__icon{ flex:none; width:20px; height:20px; margin-top:1px; }
.tsc-msg__title{ font-weight:700; margin:0 0 2px; }
.tsc-msg--success{ background:var(--tsc-color-success-bg); border-color:var(--tsc-color-success-border); color:var(--tsc-color-success-text); }
.tsc-msg--success .tsc-msg__icon{ color:var(--tsc-color-success); }
.tsc-msg--error{ background:var(--tsc-color-error-bg); border-color:var(--tsc-color-error-border); color:var(--tsc-color-error-text); }
.tsc-msg--error .tsc-msg__icon{ color:var(--tsc-color-error); }

/* 11 - LINKS (in-content, opt-in) ------------------------------ */
.tsc-link{
  color:var(--tsc-color-primary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:color var(--tsc-dur) var(--tsc-ease);
}
.tsc-link:hover{ color:var(--tsc-color-primary-strong); }
.tsc-link:focus-visible{ outline:2px solid var(--tsc-color-primary); outline-offset:2px; border-radius:2px; }
.tsc-link--external::after{ content:"\2197"; margin-left:.15em; font-size:.85em; }

/* 12 - BADGES / LABELS --------------------------------------- */
.tsc-badge{
  display:inline-flex; align-items:center; gap:.35em;
  padding:4px 10px;
  border-radius:var(--tsc-radius-pill);
  border:1px solid var(--tsc-color-border);
  background:var(--tsc-color-surface-2);
  color:var(--tsc-color-text-muted);
  font-family:var(--tsc-font);
  font-size:var(--tsc-text-xs);
  font-weight:600;
  letter-spacing:.02em;
}
.tsc-badge--featured{ background:var(--tsc-color-primary-soft); color:var(--tsc-color-primary-strong); border-color:transparent; }
.tsc-badge--new{ background:var(--tsc-color-success-bg); color:var(--tsc-color-success-text); border-color:transparent; }
.tsc-badge--promo{ background:var(--tsc-amber); color:var(--tsc-ink); border-color:transparent; font-weight:700; }

/* 13 - ICONS ------------------------------------------------------------------
   `.tsc-ico` : the site icon set output by tsc_icon() in PHP. One style only -
   24 grid, fill:none, currentColor stroke @1.75, round joins. Colour + size
   come from context (currentColor, and width/height on the <svg> or a
   context class). Never mix with a fill icon or an icon font on the same page.
   `.tsc-icon` : legacy sizing wrapper for arbitrary inline SVG. */
.tsc-ico{
  display:inline-block;
  flex:none;
  width:1.15em;
  height:1.15em;
  vertical-align:middle;
  color:inherit;
}
.tsc-ico--sm{ width:1em; height:1em; }
.tsc-ico--lg{ width:1.5em; height:1.5em; }

.tsc-icon{ display:inline-flex; flex:none; width:1.25em; height:1.25em; line-height:0; color:currentColor; }
.tsc-icon svg,
svg.tsc-icon{ width:100%; height:100%; display:block; }
.tsc-icon--sm{ width:1em; height:1em; }
.tsc-icon--lg{ width:1.75em; height:1.75em; }

/* 14 - MEDIA / IMAGES ---------------------------------------- */
.tsc-media{ display:block; overflow:hidden; border-radius:var(--tsc-radius-lg); background:var(--tsc-color-surface-2); }
.tsc-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.tsc-media--16x9{ aspect-ratio:16 / 9; }
.tsc-media--4x3{ aspect-ratio:4 / 3; }
.tsc-media--3x2{ aspect-ratio:3 / 2; }
.tsc-media--square{ aspect-ratio:1 / 1; }
.tsc-media--contain img{ object-fit:contain; }
.tsc-avatar{ display:block; width:64px; height:64px; border-radius:var(--tsc-radius-pill); overflow:hidden; background:var(--tsc-color-surface-2); }
.tsc-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 15 - GRID helper for card rows --------------------------- */
.tsc-grid{ display:grid; gap:var(--tsc-space-6); grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tsc-grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.tsc-grid--4{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* 16 - VISUALLY-HIDDEN (a11y helper) ---------------------- */
.tsc-visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* 17 - RESPONSIVE ---------------------------------------- */
@media (max-width:768px){
  .tsc-cta-band{ padding:var(--tsc-space-6); }
  .tsc-cta-band__actions{ width:100%; }
  .tsc-cta-band__actions .tsc-btn{ flex:1 1 auto; }
  .tsc-card--pad-lg{ padding:var(--tsc-space-6); }
}

/* 18 - REDUCED MOTION ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tsc-lift,
  .tsc-card--interactive,
  .tsc-btn,
  .tsc-cta-link,
  .tsc-cta-link::after,
  .tsc-cta-phone,
  .tsc-cta-email{ transition:none !important; }
  .tsc-lift:hover,
  .tsc-card--interactive:hover,
  .tsc-btn:hover{ transform:none !important; }
}

/* ==========================================================================
   19 - CONVERSION / CTA SYSTEM   (Stage 6 / Prompt 5)
   Extends the button (section 5) and CTA band (section 8) components; adds
   only the conversion-specific pieces. Nothing renders until a page or the
   tsc_cta_* PHP helpers output the markup. Not injected into any page.
   ========================================================================== */

/* CTA group : primary + secondary shown together (hero / mid-page / section) */
.tsc-cta-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--tsc-space-3);
}
.tsc-cta-group--center{ justify-content:center; }
.tsc-cta-group__note{ flex-basis:100%; margin:0; font-size:var(--tsc-text-xs); color:var(--tsc-color-text-subtle); }
@media (max-width:480px){
  .tsc-cta-group{ gap:var(--tsc-space-2); }
  .tsc-cta-group > .tsc-btn{ flex:1 1 100%; }
  .tsc-cta-group--inline > .tsc-btn{ flex:0 1 auto; }
}

/* Phone CTA (reusable). The header keeps its own scoped .tsc-header-call. */
.tsc-cta-phone{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  min-height:44px;
  padding:8px 4px;
  color:var(--tsc-color-text);
  font-family:var(--tsc-font);
  font-weight:700;
  font-size:var(--tsc-text-md);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--tsc-dur) var(--tsc-ease);
}
.tsc-cta-phone__ico{ flex:none; width:1.15em; height:1.15em; color:var(--tsc-color-primary); }
.tsc-cta-phone__label{ font-weight:500; font-size:var(--tsc-text-xs); color:var(--tsc-color-text-subtle); }
.tsc-cta-phone:hover{ color:var(--tsc-color-primary); }
.tsc-cta-phone:focus-visible{ outline:2px solid var(--tsc-color-primary); outline-offset:3px; border-radius:3px; }

/* Email CTA */
.tsc-cta-email{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  min-height:40px;
  color:var(--tsc-color-primary);
  font-family:var(--tsc-font);
  font-weight:600;
  font-size:var(--tsc-text-sm);
  text-decoration:none;
  transition:color var(--tsc-dur) var(--tsc-ease);
}
.tsc-cta-email__ico{ flex:none; width:1.1em; height:1.1em; }
.tsc-cta-email:hover{ color:var(--tsc-color-primary-strong); text-decoration:underline; text-underline-offset:2px; }
.tsc-cta-email:focus-visible{ outline:2px solid var(--tsc-color-primary); outline-offset:3px; border-radius:3px; }

/* Service CTA band priority signal (Airbnb = featured, Residential = second) */
.tsc-cta-band--featured{
  border-color:var(--tsc-color-primary);
  box-shadow:0 0 0 1.5px var(--tsc-color-primary) inset, var(--tsc-shadow-sm);
}
.tsc-cta-band__eyebrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:var(--tsc-text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tsc-color-primary);
}
.tsc-cta-band--residential .tsc-cta-band__eyebrow{ color:var(--tsc-color-text-muted); }
.tsc-cta-band__actions .tsc-cta-phone{ margin-left:var(--tsc-space-2); }

/* Conversion service links : route supporting content into priority services */
.tsc-service-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--tsc-space-2);
}
.tsc-service-links--row{ flex-direction:row; flex-wrap:wrap; gap:var(--tsc-space-4); }
.tsc-service-links li:first-child .tsc-cta-link{ font-weight:700; }   /* Airbnb */

/* Mobile sticky CTA : Call + Book, distinct actions. Opt-in via
   tsc_sticky_cta() - NOT enabled on any page in this prompt. */
.tsc-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--tsc-z-header);
  display:none;
  gap:var(--tsc-space-2);
  padding:var(--tsc-space-2) var(--tsc-space-3);
  padding-bottom:calc(var(--tsc-space-2) + env(safe-area-inset-bottom, 0px));
  background:var(--tsc-color-surface);
  border-top:1px solid var(--tsc-color-border);
  box-shadow:0 -4px 16px rgba(14,23,38,.10);
}
.tsc-sticky-cta > *{ flex:1 1 0; min-height:48px; }
.tsc-sticky-cta .tsc-btn{ width:100%; }
.tsc-sticky-cta .tsc-cta-phone{
  justify-content:center;
  border:1px solid var(--tsc-color-border-strong);
  border-radius:var(--tsc-radius-md);
  padding:8px 12px;
  font-size:var(--tsc-text-sm);
}
@media (max-width:600px){
  .tsc-sticky-cta{ display:flex; }
  body.tsc-has-sticky-cta{ padding-bottom:76px; }
}

@media (prefers-reduced-motion:reduce){
  .tsc-cta-group > .tsc-btn{ transition:none !important; }
}

/* ==========================================================================
   Stage 8 - SITE-WIDE NAVY/GOLD TOKEN SCOPE
   body.tsc-scope is added to every front-end page (functions.php body_class).
   It re-maps the design-system tokens to the approved navy + gold so the
   SHARED CHROME - the announcement bar, the global footer and the header
   phone pill - is consistent on every page (not the old Stage-5 blue).
   Interior Elementor page bodies are unaffected: they colour themselves with
   their own --e-global-* / --ast-global-* variables, not these.
   The homepage (tsc-homev2) and service pages (tsc-servicev2) re-declare the
   same values at equal specificity, so this is a no-op there.
   ========================================================================== */
body.tsc-scope{
  --tsc-navy:#0E2A47; --tsc-navy-900:#0B2138; --tsc-navy-600:#17395B; --tsc-navy-050:#EAF1F8;
  --tsc-gold:#F4A62A; --tsc-gold-600:#DE9012; --tsc-gold-050:#FCEFD9;

  --tsc-color-primary:#0E2A47; --tsc-color-primary-strong:#0B2138; --tsc-color-primary-soft:#EAF1F8;
  --tsc-color-secondary:#0E2A47; --tsc-color-secondary-strong:#0B2138;
  --tsc-color-cta:#F4A62A; --tsc-color-cta-strong:#DE9012;
  --tsc-color-accent:#F4A62A; --tsc-color-accent-strong:#DE9012;

  --tsc-color-bg:#F5F8FC; --tsc-color-surface:#FFFFFF; --tsc-color-surface-2:#EEF3F9; --tsc-color-card:#FFFFFF;
  --tsc-color-text:#0E2A47; --tsc-color-text-muted:#45566A; --tsc-color-text-subtle:#566579;
  --tsc-color-border:#E2E9F1; --tsc-color-border-strong:#C7D4E1;

  --tsc-amber:#F4A62A; --tsc-amber-600:#DE9012;
  --tsc-blue:#0E2A47; --tsc-blue-700:#0B2138; --tsc-blue-050:#EAF1F8;
  --tsc-ink:#0E2A47; --tsc-ink-70:#3E4E62; --tsc-ink-45:#566579; --tsc-rule:#E2E9F1;
}
/* Announcement bar: navy field + gold pill (matches the homepage). */
body.tsc-scope .tsc-annc{ background:var(--tsc-navy-900); }
body.tsc-scope .tsc-annc__cta{ background:var(--tsc-gold); color:var(--tsc-navy); font-weight:700; }
body.tsc-scope .tsc-annc__cta:hover{ background:var(--tsc-gold-600); color:var(--tsc-navy); }
/* Header phone pill: solid navy, white text, gold icon.
   style.css sets `color: var(--tsc-blue) !important` on this element, so the
   override needs !important too (the token re-map alone would make it navy
   text on a navy pill). */
body.tsc-scope a.tsc-header-call{ background:var(--tsc-navy); border-color:var(--tsc-navy); color:#fff !important; }
body.tsc-scope a.tsc-header-call:hover{ background:var(--tsc-navy-900); border-color:var(--tsc-navy-900); color:#fff !important; }
body.tsc-scope a.tsc-header-call .tsc-header-call__icon{ color:var(--tsc-gold); }
/* Global footer: navy field, gold top-rule + headings + icons (matches the homepage). */
body.tsc-scope .tsc-footer{ background:var(--tsc-navy-900); border-top:3px solid var(--tsc-gold); color:#fff; }
body.tsc-scope .tsc-footer__h{ color:var(--tsc-gold); }
body.tsc-scope .tsc-footer__desc,
body.tsc-scope .tsc-footer__addr-hint,
body.tsc-scope .tsc-footer__hours,
body.tsc-scope .tsc-footer__hours span,
body.tsc-scope .tsc-footer__copy{ color:rgba(255,255,255,.74); }
body.tsc-scope .tsc-footer__links a,
body.tsc-scope .tsc-footer__contact-link{ color:rgba(255,255,255,.86); }
body.tsc-scope .tsc-footer__links a:hover,
body.tsc-scope .tsc-footer__contact-link:hover,
body.tsc-scope .tsc-footer__contact-link:hover span:not(.tsc-footer__addr-hint){ color:var(--tsc-gold); }
/* style.css colours the first Services link with --tsc-ink (now navy) - would be
   invisible on the navy footer. */
body.tsc-scope .tsc-footer__col[aria-label="Services"] .tsc-footer__links li:first-child a{ color:#fff; }
body.tsc-scope .tsc-footer__ico{ color:var(--tsc-gold); }
body.tsc-scope .tsc-footer__bar{ border-top-color:rgba(255,255,255,.14); }
body.tsc-scope .tsc-footer__logo img{ filter:brightness(0) invert(1); opacity:.92; }
body.tsc-scope .tsc-footer .tsc-btn--primary{ background:var(--tsc-gold); color:var(--tsc-navy); border-color:var(--tsc-gold); box-shadow:0 8px 20px rgba(244,166,42,.3); }
body.tsc-scope .tsc-footer .tsc-btn--primary:hover{ background:var(--tsc-gold-600); }

/* Stage 10 - the "Request a callback" heading sits on a WHITE form card
   (.tsc-footer__callback), not the navy footer, so the inherited gold
   (2.03:1) fails WCAG AA. Navy on white = ~15:1. Also tame the size: as an
   <h2> it was inheriting the 40px page-heading scale in the footer. */
body.tsc-s10 .tsc-footer__callback .tsc-footer__h{
  color:var(--tsc-navy);
  font-size:18px;
  letter-spacing:.04em;
}

/* Stage 10 - on the Elementor pages (About / Contact / Book) neither the
   tsc-servicev2 nor tsc-homev2 focus rule applies, so links + the skip link
   fall back to Astra's unconfigured accent (#5511F8 purple) for the
   keyboard-focus ring. Recolour to the design-system gold.
   --tsc-gold / --tsc-navy are declared on body.tsc-scope, which those
   Elementor pages do NOT carry - re-declare them here (same values, later
   in source order, so this is a no-op on scoped pages) so the rules below
   still resolve there instead of dropping the whole `outline` shorthand. */
body.tsc-s10{ --tsc-gold:#F4A62A; --tsc-navy:#0E2A47; }
body.tsc-s10 a:focus-visible,
body.tsc-s10 button:focus-visible,
body.tsc-s10 summary:focus-visible,
body.tsc-s10 .custom-logo-link:focus-visible{
  outline:2px solid var(--tsc-gold);
  outline-offset:2px;
}
/* The logo links + skip link carry no text, so nothing ever set their
   colour - they inherit Astra's #5511F8, which then paints the focus ring
   purple via currentColor and outranks the generic a:focus-visible rule
   above (Astra ships .site .skip-link:focus-visible at 0,3,0). Pin the
   colour and match that specificity with an explicit gold ring. */
body.tsc-s10 .custom-logo-link,
body.tsc-s10 .tsc-footer__logo,
body.tsc-s10 .skip-link{
  color:var(--tsc-navy);
}
body.tsc-s10 .custom-logo-link:focus,
body.tsc-s10 .custom-logo-link:focus-visible,
body.tsc-s10 .tsc-footer__logo:focus,
body.tsc-s10 .tsc-footer__logo:focus-visible,
body.tsc-s10 .skip-link:focus-visible{
  outline:2px solid var(--tsc-gold);
  outline-offset:2px;
}
body.tsc-s10 .skip-link:focus{
  color:var(--tsc-navy);
  background:#fff;
  outline:2px solid var(--tsc-gold);
  outline-offset:0;
}