/* ==========================================================================
   Tenant Titans — Landing Page shared shell
   Shared across lp1-form.html / lp2-quiz.html / lp3-hybrid.html.

   PORTED (not eyeballed) from tenanttitans.com on 2026-08-06. Every token
   below is lifted from the live site's Elementor kit-5 global variables
   (/wp-content/uploads/elementor/css/post-5.css) and from the real header
   (post-501.css) and footer (post-507.css) stylesheets:

     --e-global-color-aaa31bb  #38618C  steel blue — headings, header, bands
     --e-global-color-0a5adb8  #ED6A5A  coral — "Free Consultation", submits
     --e-global-color-febd009  #F0A202  gold — category band, cards, CTA band
                                        AND the real hover state of the coral
                                        buttons (ported verbatim)
     --e-global-color-ad6d4d3  #FFFFFF  white
     --e-global-color-c80c825  #F9F9F9  off-white section background
     --e-global-color-00944a6  #000000  black
     --e-global-color-text     #7A7A7A  their body-copy grey  (see note below)

   Type (all Poppins — the same family Block LLP uses, different ramp):
     primary   Poppins 600 / 1.5em
     secondary Poppins 400 / 1.5em
     text      Poppins 15px / 400 / 1.5em
     headings  Poppins 700 / 1.2em, colour #38618C, TITLE CASE (never
               uppercase — this is the single biggest visual difference from
               the Block LLP pages, whose H1 is 800-weight UPPERCASE)
     hero H1   60px / 700 / 1.4em      section H2 45px / 700 / 1.2em

   THE SIGNATURE SHAPE. Tenant Titans does not use a plain pill or a plain
   rounded box. Every button and panel is rounded on three corners and square
   on the bottom-left:
     buttons        border-radius: 100px 100px 100px 0
     small panels   border-radius: 15px 15px 15px 0
     large panels   border-radius: 30px 30px 30px 0
   Ported straight out of post-501.css / post-507.css. Keep it — it is the
   most recognisable thing about the brand after the colours.

   DOCUMENTED DEVIATION (one, deliberate): their body-copy token #7A7A7A
   measures 4.48:1 on white, just under the 4.5:1 WCAG AA floor for body
   text. We darken it to #595959 (7.0:1) for running copy and keep #7A7A7A
   recorded here as the source value. Accessibility floor wins over an exact
   port; this is the only place we override a real token.
   ========================================================================== */

:root {
  /* --- real Tenant Titans palette -------------------------------------- */
  --steel: #38618c;             /* headings, header bar, dark bands */
  --steel-dark: #2f5378;        /* derived: tiles/panels inside a steel band */
  --steel-tint: rgba(56, 97, 140, .08);
  --coral: #ed6a5a;             /* "Free Consultation", phone pills, submits */
  --coral-hover: #f0a202;       /* their REAL hover — coral hovers to gold */
  --coral-tint: rgba(237, 106, 90, .10);
  --gold: #f0a202;              /* category band, feature cards, CTA band */
  --gold-dark: #d18f02;         /* derived: gold hover */
  --offwhite: #f9f9f9;
  --white: #ffffff;
  --black: #000000;
  --tt-text: #7a7a7a;           /* their token — recorded, see deviation note */

  /* --- roles ------------------------------------------------------------ */
  --ink: #38618c;               /* headings + default button = steel blue */
  --band: #38618c;              /* dark bands AND the footer are steel blue */
  --card-dark: #2f5378;         /* panels sitting inside a steel band */
  --muted: #595959;             /* running copy on white (see deviation) */
  --muted-on-dark: rgba(255, 255, 255, .82);
  --line: #e6e9ee;
  --line-2: rgba(255, 255, 255, .18);   /* hairline under the steel header */
  --gray: #f9f9f9;
  --gray-2: #f5f7f8;

  /* --- the signature shape ---------------------------------------------- */
  --radius: 15px 15px 15px 0;      /* cards, inputs, small panels */
  --radius-lg: 30px 30px 30px 0;   /* hero form card, big panels */
  --radius-btn: 100px 100px 100px 0;
  --radius-flat: 15px;             /* where a symmetric corner is required */

  --shadow-card: 0 10px 30px rgba(56, 97, 140, .14);
  --shadow-soft: 0 4px 14px rgba(56, 97, 140, .08);
  --shadow-header: 0 4px 4px 0 rgba(0, 0, 0, .11);

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, "Helvetica Neue", sans-serif;

  /* legacy aliases — the Block shell's class names are kept so the markup and
     lp.js port across unchanged. --red now means CORAL. */
  --red: #ed6a5a;
  --red-dark: #f0a202;
  --red-tint: rgba(237, 106, 90, .10);
  --navy: #38618c;
  --ink-soft: #595959;
  --gold-light: #f7c95c;
  --header-h: 74px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font);
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 700;
}

/* TT scale: everything 700, steel blue, TITLE CASE. Their H3 is 30px/700. */
h1 { font-size: 2.25rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.3rem; }

@media (min-width: 960px) {
  h1 { font-size: 3.75rem; line-height: 1.4; }  /* 60px / 1.4em */
  h2 { font-size: 2.8125rem; }                  /* 45px / 1.2em */
  h3 { font-size: 1.5rem; }
}

/* TT hero headline. NOTE: no text-transform. Their site is title case
   throughout ("Trusted by 5,000+ Tenants", "Why Tenant Titans"). Making this
   uppercase is the fastest way to make the page read as Block, not TT. */
.display {
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 960px) { .display { line-height: 1.15; } }

p { margin: 0 0 1em; color: inherit; }

a { color: var(--ink); }

.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) { .wrap { padding: 0 10px; } }

.section { padding: 60px 0; }
.section--gray { background: var(--gray); }
.section--gray2 { background: var(--gray-2); }

/* Dark accent band — the site's "Get in touch" band, #1F2732. */
.section--dark { background: var(--band); color: var(--muted-on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-head p { color: var(--muted-on-dark); }

/* Eyebrow — 17px/600 UPPERCASE on the real site. No gold. */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 .7em;
}
.eyebrow--gold { color: var(--gold); }  /* TT DOES use a gold eyebrow — their
                                           "About Us" kicker. Restored. */
@media (min-width: 960px) { .eyebrow { font-size: 1.0625rem; } }  /* real: 17px */
.section--dark .eyebrow, .cta-band .eyebrow { color: #fff; }

.section-head { text-align: center; margin-bottom: 34px; }
.section-head p {
  color: var(--muted);
  margin: 0 auto;
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------- Buttons ----------------------------------------------------
   Real site: Poppins 15px/600, padding 15px 30px, radius 10px.
   DEFAULT button is BLACK (#0E1720). Red is the phone / submit action.
   ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: inherit;
  font-weight: 500;             /* TT buttons are 500, not 600 */
  font-size: .9375rem;          /* 15px */
  line-height: 1.25;
  padding: 12px 30px;
  border-radius: var(--radius-btn);   /* 100px 100px 100px 0 — the signature */
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color .3s, color .3s, border-color .3s;
}

.btn:active { transform: translateY(1px); }

/* PRIMARY (site default) — steel blue */
.btn--black {
  background: var(--steel);
  color: #fff;
  border-color: var(--steel);
}
.btn--black:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* GOLD — the CTA band's own button */
.btn--gold-fill {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.btn--gold-fill:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

/* CORAL — "Free Consultation", phone pills, every form submit.
   Hover goes to GOLD. That is not a mistake: it is the real hover in
   post-501.css / post-507.css and it is ported verbatim. */
.btn--red, .btn--gold /* legacy aliases -> coral */ {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}
.btn--red:hover, .btn--gold:hover {
  background: var(--coral-hover);
  border-color: var(--coral-hover);
  color: #fff;
}

/* OUTLINE DARK — the header's "See if you qualify", ported exactly */
.btn--outline-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 0 10px 0 transparent;
}
.btn--outline-dark:hover { background: #fff; color: var(--steel); border-color: #fff; }

/* On dark bands */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .5);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--outline-navy {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline-navy:hover { background: var(--ink); color: #fff; }

.btn--block { display: flex; width: 100%; }
.btn--lg { font-size: 1rem; padding: 17px 32px; }
.btn--xl { font-size: 1.05rem; padding: 19px 34px; font-weight: 600; }

/* Header pill size — real values: 14px/600, 12px 24px, min-height 40px */
.btn--sm {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 12px 24px;
  min-height: 40px;
  white-space: nowrap;
  border-radius: var(--radius-btn);
}

/* Subtle pulse used on LP3's header call button */
@keyframes lpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 106, 90, .55); }
  60%      { box-shadow: 0 0 0 10px rgba(237, 106, 90, 0); }
}
.btn--pulse { animation: lpPulse 2.6s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .btn--pulse { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Header — ported from the real site header -------------------
   Real: white, sticky top, section padding 15px 0 (content 43.5px tall),
   sticky hairline #eaeaea + shadow 0 4px 4px rgba(0,0,0,.11).
   Logo renders 234 x 41.4 at desktop. Nav links dropped per Jack.
   ---------------------------------------------------------------------- */

/* TT's header is a STEEL BLUE bar with the white logo mark — not a white bar.
   Ported from post-501.css (background --e-global-color-aaa31bb, padding
   15px 0). Nav links dropped per Jack's landing-page rule. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 99999;
  background: var(--steel);
  border-bottom: 1px solid var(--line-2);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-header__logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-header__logo img {
  display: block;
  width: 150px;
  height: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;                 /* real: 8px margin-left on the phone pill */
  flex: 0 0 auto;
}

/* Mobile: the real site drops the two pills onto their own full-width row
   at 48% each. Ported. */
@media (max-width: 767px) {
  .site-header__logo { width: 45%; }
  .site-header__actions { width: 100%; }
  .site-header__actions .btn { flex: 1 1 0; min-width: 0; padding: 12px 8px; font-size: .8125rem; }
}

@media (min-width: 768px) {
  .site-header__inner { flex-wrap: nowrap; padding-top: 15px; padding-bottom: 15px; }
  .site-header__logo img { width: 190px; }
}

@media (min-width: 1024px) {
  .site-header__logo img { width: 234px; }
}

/* ---------- Icons ------------------------------------------------------
   PORTED ICON STYLE. blockinjury.law draws its card icons as single-colour
   inline SVG, never as an icon font and never as emoji:
     • practice-area cards (/wp-content/uploads/2026/03/1-4.svg) are OUTLINE —
       stroke-width 3 on a 32-40 box, round caps + round joins, no fill.
       Normalised to a 24 box that is stroke-width 2.  -> .ico--line
     • footer contact glyphs (phone / mail / pin) are SOLID single-colour
       fills.                                          -> .ico--solid
   Colour is never set on the SVG — it inherits `currentColor`, so an icon is
   white on a dark surface and ink (#0E1720) on a light one.
   NO EMOJI CHARACTERS ANYWHERE IN THESE PAGES.
   ---------------------------------------------------------------------- */

.ico {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -.22em;
}
.ico--line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--solid { fill: currentColor; stroke: none; }
.ico--a11y {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inside a button/chip the icon sits on the flex baseline, so kill the shim */
.btn .ico, .case-chip .ico, .form-note .ico,
.quiz__back .ico, .quiz__result-flag .ico { vertical-align: 0; }

/* Small "internal preview" style marker (index page only) */
.hdr-note {
  display: none;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
@media (min-width: 900px) { .hdr-note { display: inline-flex; } }

/* ---------- Trust strip ------------------------------------------------ */

.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.trust__tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.trust__icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  color: var(--ink);
}
.trust__icon .ico { width: 30px; height: 30px; vertical-align: 0; }
.trust__label {
  font-weight: 600;
  color: var(--ink);
  font-size: 1rem;
  display: block;
  line-height: 1.3;
}
.trust__sub { font-size: .85rem; color: var(--muted); display: block; margin-top: 4px; line-height: 1.5; }

/* Dark variant — the site's "Recent Victories" tiles, #12171E.
   Jack, round 3: the caption is WHITE, not gold, and both lines step up
   ~3px so the tile reads from across the room. */
.trust--on-dark .trust__tile {
  background: var(--card-dark);
  border-color: rgba(255, 255, 255, .07);
  box-shadow: none;
}
.trust--on-dark .trust__icon { color: #fff; }
.trust--on-dark .trust__label { color: #fff; font-size: 1.1875rem; }  /* 19px, was 16 */
.trust--on-dark .trust__sub {
  color: #fff;
  font-size: 1rem;            /* 16px, was 13.6 */
  margin-top: 6px;
}

@media (min-width: 860px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Cards / grids ---------------------------------------------- */

.grid-3 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
}
.card h3 { margin-bottom: .4em; }
.card p { margin: 0; color: var(--muted); font-size: 1rem; }

/* Numbered steps */
.steps { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.step { text-align: center; padding: 0 6px; }
.step__num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.step p { color: var(--muted); font-size: 1rem; margin: 0; }

/* Checkmark list */
.checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.checks li {
  position: relative;
  padding-left: 34px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}
/* The tick is the same stroke icon used everywhere else, drawn as a mask so
   the bullet stays a single element. No glyph, no emoji. */
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--coral)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}
.checks--on-dark li { color: var(--muted-on-dark); }

/* ---------- Forms ------------------------------------------------------ */

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 24px 28px;
}
.form-card__title { font-size: 1.5rem; font-weight: 600; margin-bottom: .15em; }
.form-card__sub { color: var(--muted); font-size: .95rem; margin-bottom: 18px; line-height: 1.6; }

.field { margin-bottom: 14px; }
.field > label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
}
.field .opt { font-weight: 400; color: var(--muted); }

.input, select.input, textarea.input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  padding: 12px 14px;
  border: 1px solid #d5d9dd;
  border-radius: var(--radius);
  appearance: none;
}
select.input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2338618c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
textarea.input { min-height: 84px; resize: vertical; }

.input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-tint); outline: none; }
.input:focus, .pill:focus-visible, .btn:focus-visible, .choice:focus-visible {
  outline: 3px solid #5b8fd6;
  outline-offset: 2px;
}

/* Yes / No pills */
.pills { display: flex; gap: 10px; }
.pills .pill {
  flex: 1 1 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 11px 10px;
  background: #fff;
  border: 2px solid #d5d9dd;
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.pills .pill[aria-pressed="true"] {
  background: var(--red-tint);
  border-color: var(--red);
  color: var(--ink);
}

/* Consent */
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 16px 0;
}
.consent input { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; }

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  margin: 10px 0 0;
}

/* Case-type chip — non-editable, always pre-filled */
.case-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--red-tint);
  border: 1px solid rgba(237, 106, 90, .40);
  color: #c2452f;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.case-chip--on-dark {
  background: rgba(237, 106, 90, .20);
  border-color: rgba(237, 106, 90, .55);
  color: #ffd9d9;
}

/* Demo submit confirmation */
.form-msg {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #edf7f0;
  border: 1px solid #a9d8bb;
  color: #1d5433;
  font-size: .9rem;
  font-weight: 500;
}
.form-msg.is-visible { display: block; }
/* Failed HubSpot POST — coral-family, not the green confirmation. */
.form-msg--err {
  background: #fdf1ee;
  border-color: #e9b6ab;
  color: #8a2c17;
}

/* ---------- FAQ -------------------------------------------------------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 46px 17px 20px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  font-size: 1rem;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--red);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------- Closing CTA band ------------------------------------------ */

.cta-band {
  background: var(--band);
  color: var(--muted-on-dark);
  text-align: center;
  padding: 60px 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--muted-on-dark); max-width: 700px; margin: 0 auto 24px; }
.cta-band__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  max-width: 400px;
  margin: 0 auto;
}
@media (min-width: 620px) {
  .cta-band__btns { flex-direction: row; justify-content: center; max-width: none; }
  .cta-band__btns .btn { flex: 0 0 auto; }
}

/* ---------- Testimonial placeholder ----------------------------------- */

.tstm {
  border: 1px dashed #d4d7da;
  background: var(--gray-2);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  font-style: italic;
  line-height: 1.6;
}
.tstm span { display: block; font-style: normal; font-size: .78rem; margin-top: 6px; }

/* ==========================================================================
   FOOTER — ported wholesale from blockinjury.law (Elementor post 121).
   Background #1F2732. Main section padding 60px 0. Five columns at
   20% / 27% / 15% / 18% / 20% of the 1320px container, 10px column padding.
   Headings Poppins 22px/500 white; links 16px/400 white, 20px rhythm,
   hover #d1d1d1. Contact icons 20px, social icons 25px, both white.
   Bottom bar: same #1F2732, socials left, copyright right at 17px/400.
   ========================================================================== */

.site-footer {
  background: var(--band);
  color: #fff;
  font-size: 1rem;
  line-height: 1.25;
}

.site-footer a { color: #fff; text-decoration: none; transition: color .3s; }
.site-footer a:hover { color: #d1d1d1; }

.site-footer__main { padding: 44px 0 36px; }
@media (min-width: 768px) { .site-footer__main { padding: 60px 0; } }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 20% 27% 15% 18% 20%;
    gap: 0;
  }
  /* The real container is 1320px with NO padding — the 10px lives on each
     column, which is what puts column 1 at x=70 in a 1440 viewport. */
  .site-footer .wrap { padding: 0; }
}
/* Elementor's .elementor-element-populated default is padding:10px all round —
   that 10px is what puts the footer logo at y=70 inside a 60px section pad. */
.site-footer__col { padding: 10px; min-width: 0; }

/* the real site's empty spacer column — desktop only */
.site-footer__col--spacer { display: none; }
@media (min-width: 1024px) { .site-footer__col--spacer { display: block; } }

/* Footer logo — renders 63.5 x 69.5 on the real site, left aligned */
.site-footer__logo { display: inline-block; margin: 0 0 40px; }
.site-footer__logo img { display: block; width: 63.5px; height: auto; }

.site-footer__h {
  font-family: var(--font);
  font-size: 1.375rem;      /* 22px */
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 20px;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.site-footer__list li { display: block; }
.site-footer__list a,
.site-footer__list .site-footer__item {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
}
.site-footer__list svg { flex: 0 0 auto; width: 20px; height: 20px; fill: #fff; transition: fill .3s; }
.site-footer__list a:hover svg { fill: #d1d1d1; }

/* Bottom bar */
.site-footer__bar {
  padding: 10px 0 30px;
}
.site-footer__bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
@media (min-width: 768px) {
  .site-footer__bar-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 16px;              /* real pitch is 41.6px on a 25px icon */
}
.site-footer__social a { display: inline-flex; padding: 0; }
.site-footer__social svg {
  width: 25px;
  height: 25px;
  min-width: 25px;
  fill: #fff;
  transition: fill .3s;
}
.site-footer__social a:hover svg { fill: #d1d1d1; }

.site-footer__copy {
  margin: 0;
  padding: 0 10px;
  font-size: 1.0625rem;     /* 17px */
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  text-align: center;
}
@media (min-width: 768px) { .site-footer__copy { text-align: right; } }

/* Attorney-advertising disclaimer — required on an LP, not on the main site */
.site-footer__disc {
  margin: 22px 0 0;
  padding: 0 10px;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted-on-dark);
  text-align: center;
}

/* clear the mobile sticky call bar */
@media (max-width: 768px) { .site-footer__bar { padding-bottom: 96px; } }

/* ---------- Mobile sticky call bar ------------------------------------ */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100000;
  background: #fff;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 14px rgba(14, 23, 32, .08);
}
.callbar .btn { width: 100%; font-size: 1rem; padding: 15px 12px; }

@media (min-width: 769px) { .callbar { display: none; } }

/* ---------- Utilities -------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100002;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 16px;
  clip: auto;
  overflow: visible;
  background: #fff;
  color: #263b4f;
  border: 2px solid #263b4f;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
}
.tc { text-align: center; }
.mb0 { margin-bottom: 0; }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ==========================================================================
   TENANT TITANS — brand-specific components
   Added on top of the ported Block shell. Everything here mirrors something
   that actually exists on tenanttitans.com.
   ========================================================================== */

/* ---------- Category band ----------------------------------------------
   Their homepage hero sits on a gold lozenge carrying five white pest icons
   with labels underneath, half-overlapping the steel band below it. The
   icons are the site's own PNG assets (wp-content/uploads/2025/03/*.png),
   copied into shared/site-assets/ — white silhouettes on transparent, so
   they drop straight onto the gold. Not redrawn, not emoji.
   ---------------------------------------------------------------------- */

.catband-wrap { background: var(--steel); }
.catband-wrap--split {
  /* the real one straddles the seam: white above, steel below */
  background: linear-gradient(to bottom, var(--white) 50%, var(--steel) 50%);
}

.catband {
  background: var(--gold);
  border-radius: 60px 60px 60px 0;
  padding: 20px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 8px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 700px) { .catband { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } }

.catband__item { text-align: center; color: #fff; }
.catband__item img {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto 8px;
}
.catband__item span {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
}
@media (min-width: 700px) { .catband__item span { font-size: .875rem; } }

/* ---------- Feature cards ----------------------------------------------
   Their "Why Tenant Titans" row: three steel-blue cards with GOLD headings,
   plus one gold card with WHITE headings. Same three-corner shape.
   ---------------------------------------------------------------------- */

.card--steel {
  background: var(--steel);
  border-color: var(--steel);
  box-shadow: none;
}
.card--steel h3 { color: var(--gold); }
.card--steel p  { color: rgba(255, 255, 255, .88); }

.card--gold {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: none;
}
.card--gold h3 { color: #fff; }
.card--gold p  { color: rgba(255, 255, 255, .95); }

.card--steel .card__icon, .card--gold .card__icon { color: #fff; display: block; margin-bottom: 12px; }
.card--steel .card__icon .ico, .card--gold .card__icon .ico { width: 34px; height: 34px; vertical-align: 0; }

/* ---------- Gold CTA lozenge -------------------------------------------
   Their "Free Consultation" strip: a wide gold panel with a steel headline
   on the left and a coral button on the right.
   ---------------------------------------------------------------------- */

.gold-strip {
  background: var(--gold);
  border-radius: 60px 60px 60px 0;
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.gold-strip h2 { margin: 0; color: var(--black); font-size: 1.5rem; }
@media (min-width: 760px) {
  .gold-strip { flex-direction: row; justify-content: space-between; text-align: left; padding: 18px 40px; }
  .gold-strip h2 { font-size: 2rem; }
}

/* ---------- Footer trim -------------------------------------------------
   Their footer is the steel band with a gold rule across the top, and the
   bottom bar carries the attorney-advertising line.
   ---------------------------------------------------------------------- */

.site-footer { border-top: 5px solid var(--gold); }
.site-footer__logo img { width: 150px; }
.site-footer__h { color: var(--gold); }
.site-footer__social svg { fill: #fff; }
.site-footer__social a {
  background: var(--coral);
  width: 30px; height: 30px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.site-footer__social a:hover { background: var(--gold); }
.site-footer__social svg { width: 15px; height: 15px; }

/* ---------- Contact cards (their "Contact Us" trio) --------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; align-items: center; gap: 14px; }
.contact-list__ico {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-list__ico .ico { width: 20px; height: 20px; vertical-align: 0; }
.contact-list b { display: block; color: var(--coral); font-size: 1.05rem; font-weight: 600; }
.contact-list a, .contact-list span.v { color: var(--muted); text-decoration: none; font-size: .95rem; }
.contact-list a:hover { color: var(--coral); }

/* Footer about paragraph + social marks.
   NOTE: the real tenanttitans.com social icons carry NO href — they are
   unlinked placeholders on the live site. Ported faithfully as non-interactive
   marks rather than inventing profile URLs. */
.site-footer__about {
  color: rgba(255, 255, 255, .82);
  font-size: .875rem;
  line-height: 1.7;
  margin: 0;
}
.tt-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--coral);
}
.tt-social svg { width: 14px; height: 14px; fill: #fff; }

/* Four-up card grid — their "Why Tenant Titans" row */
.grid-4 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Category band on a light run of sections — no steel underneath. */
.catband-wrap--plain { background: var(--white); padding: 10px 0 0; }

/* ==========================================================================
   FULL-SITE LAYER — added on top of the ported LP shell for the website demo.
   Everything below exists because this is a SITE (multi-page nav, page heroes,
   process timeline, team placeholders) rather than a single landing page.
   Deliberate anti-pattern note: no drop shadows on content containers. The
   competitor audit (2026-08-06) flagged shadowed boxes stacked on shadowed
   boxes as the main source of visual clutter. Panels here are separated by
   background tone and the 15/30px three-corner radius, not by shadow.
   ========================================================================== */

/* ---------- Site navigation (the LPs deliberately have none) ------------ */
.site-nav { display: none; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 26px;
}
.site-nav a {
  color: #fff; text-decoration: none;
  font-size: .9375rem; font-weight: 500; line-height: 1.25;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--coral); border-bottom-color: var(--coral); }
@media (min-width: 1024px) { .site-nav { display: block; } }

/* ---------- Language switch (EN | ES) ----------------------------------
   Replaces the old inert .lang-mark. These are two REAL links to the parallel
   WPML-style page (index.html <-> index-es.html), so the control works with JS
   off and is crawlable. Visible and usable at EVERY breakpoint: it sits in the
   header actions on desktop AND mobile (immediately before the hamburger) and
   is repeated inside the mobile drawer at a larger touch size.
   Shape is the brand's three-corner radius; no drop shadow. */
.langsw {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  min-height: 40px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-btn);
  overflow: hidden;          /* clips the active segment to the pill shape */
  white-space: nowrap;
}
.langsw__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
.langsw__opt + .langsw__opt { border-left: 1px solid rgba(255, 255, 255, .30); }
.langsw__opt:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.langsw__opt.is-active,
.langsw__opt.is-active:hover { background: var(--gold); color: #fff; font-weight: 700; }

/* LABELS. Jack, 2026-08-12: desktop reads the full words "English / Espanol",
   the narrow layouts read "En / Es". Both labels are in the markup and swapped
   HERE, by breakpoint — never by JavaScript, because the control has to keep
   working with JS off. display:none also removes the unused label from the
   accessibility tree, so a screen reader announces exactly one of them. */
.langsw__full { display: none; }
.langsw__short { display: inline; }
@media (min-width: 1024px) {
  .langsw__full { display: inline; }
  .langsw__short { display: none; }
  .langsw__opt { padding: 0 14px; }
}
@media (min-width: 1400px) { .langsw__opt { font-size: .8125rem; padding: 0 16px; } }

/* Drawer copy — same control, bigger targets. Below 1024 it carries the short
   labels like the rest of the mobile header. Jack, Round 1 item 02: centered
   horizontally in the menu panel (flex + max-content keeps the pill its
   natural width so the auto margins can center it). */
/* height, not min-height: iOS Safari can fail to propagate a flex container's
   min-height into the ancestor's auto height, which computed the drawer ~24px
   short and left the pill overhanging the panel edge on iPhone. */
.langsw--drawer { display: flex; width: max-content; height: 44px; margin: 16px auto 0; }
/* Bottom margin on the pill would collapse through the drawer (no padding or
   border below it) and leave the pill flush with the panel edge — padding on
   the drawer's wrap is what actually creates the gap. */
.mobile-nav .wrap { padding-bottom: 18px; }
/* display + border must be restated here: the generic `.mobile-nav a` rule
   (0,1,1) outweighs `.langsw__opt` (0,1,0), turning the segments into
   display:block — which kills the flex vertical centering (labels stuck to
   the segment top) and adds the nav rows' bottom border. */
.langsw--drawer .langsw__opt { display: inline-flex; padding: 0 22px; font-size: .8125rem; border-bottom: 0; }

/* Mobile drawer */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.45);
  border-radius: 15px 15px 15px 0; color: #fff; cursor: pointer;
}
.nav-toggle .ico { width: 22px; height: 22px; vertical-align: 0; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  background: var(--steel-dark);
  border-top: 1px solid rgba(255,255,255,.14);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 0 14px; }
.mobile-nav a {
  display: block; padding: 13px 4px; color: #fff;
  text-decoration: none; font-weight: 500; font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mobile-nav a[aria-current="page"] { color: var(--gold); }

/* The header on a website carries nav, so it needs a wider inner row. */
@media (max-width: 1023px) {
  .site-header__inner { flex-wrap: nowrap; }
  .site-header__logo { width: auto; }
  .site-header__actions { width: auto; gap: 8px; }
  .site-header__actions .btn--consult { display: none; }
}
@media (max-width: 480px) {
  .site-header__actions .btn--phone-lbl { display: none; }
  .langsw { min-height: 38px; }
  .langsw__opt { padding: 0 8px; }
}
/* Small phones (≤430px): logo + En/Es + phone icon + hamburger is ~388px at
   full size, which overflows a 375px iPhone. Tighten, never overflow. */
@media (max-width: 430px) {
  .site-header__inner { padding-left: 14px; padding-right: 14px; }
  .site-header__logo img { width: 132px; }
}

/* The row must never wrap or overflow: the nav is the only element allowed to
   give up space, and it does so by tightening, not by wrapping. */
.site-nav { min-width: 0; }
.site-nav ul { flex-wrap: nowrap; }
.site-nav a { white-space: nowrap; }

/* Nav + language switch + two pills is a lot for a 1024–1399 row. Tighten it
   rather than let anything overflow; the full-size treatment returns at 1400. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .site-header__logo img { width: 176px; }
  .site-nav ul { gap: 14px; }
  .site-nav a { font-size: .875rem; }
  .site-header__actions .btn--phone-lbl { display: none; }
  .site-header__actions .btn--consult { padding: 12px 16px; }
  .langsw__opt { padding: 0 8px; }
}

/* Spanish labels run ~20% longer than the English ones. Read the language off
   <html lang> so the header stays a single shared shell rather than forking. */
html[lang="es"] .site-nav ul { gap: 18px; }
html[lang="es"] .site-nav a { font-size: .875rem; }
@media (min-width: 1024px) and (max-width: 1399px) {
  html[lang="es"] .site-nav ul { gap: 11px; }
  html[lang="es"] .site-nav a { font-size: .8125rem; }
}

/* ---------- Home hero — their real layout: copy left, illustration right - */
.hero { background: var(--white); padding: 34px 0 30px; }
.hero__grid { display: grid; gap: 18px; grid-template-columns: minmax(0,1fr); align-items: center; }
.hero h1 { color: var(--steel); margin-bottom: .25em; }
.hero h1 span { display: block; }
.hero__sub { font-size: 1rem; font-weight: 600; color: var(--steel); margin-bottom: 22px; }
.hero__art { order: -1; text-align: center; }
.hero__art img { width: 100%; max-width: 360px; height: auto; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .hero { padding: 56px 0 40px; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 40px; }
  .hero__art { order: 0; }
  .hero__art img { max-width: 460px; }
  .hero__sub { font-size: 1.0625rem; }
}

/* ---------- Interior page hero — steel band, no image -------------------- */
.page-hero { background: var(--steel); color: #fff; padding: 42px 0 46px; }
.page-hero h1 { color: #fff; font-size: 2.1rem; margin-bottom: .3em; }
.page-hero p { color: rgba(255,255,255,.85); max-width: 640px; margin: 0; font-size: 1rem; }
.page-hero .eyebrow { color: var(--gold); }
@media (min-width: 900px) { .page-hero { padding: 58px 0 62px; } .page-hero h1 { font-size: 3rem; } }

.crumbs { font-size: .8125rem; color: rgba(255,255,255,.65); margin: 0 0 14px; }
.crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span { padding: 0 7px; }

/* ---------- Split section (image beside copy) ---------------------------- */
.split { display: grid; gap: 26px; grid-template-columns: minmax(0,1fr); align-items: center; }
.split__art img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .split--flip .split__art { order: 2; }
}
.split h2 { margin-bottom: .35em; }
.split p { color: var(--muted); }
.section--dark .split p { color: var(--muted-on-dark); }

/* ---------- Our Process timeline ----------------------------------------
   Structure adopted from the competitor audit (a numbered, linear "how your
   case works" run). Copy is Tenant Titans' own. */
.process { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr); position: relative; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; } }

.process__step { position: relative; padding-top: 8px; }
.process__num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-weight: 700; font-size: 1.0625rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 14px; position: relative; z-index: 2;
}
/* the connecting rule — desktop only, and it stops before the last step */
@media (min-width: 900px) {
  .process__step::before {
    content: ""; position: absolute;
    top: 31px; left: 46px; right: -22px; height: 2px;
    background: rgba(240, 162, 2, .35);
  }
  .process__step:last-child::before { display: none; }
}
.process__step h3 { font-size: 1.1875rem; margin-bottom: .35em; }
.process__step p { color: var(--muted); font-size: .9375rem; margin: 0; }
.section--dark .process__step h3 { color: var(--gold); }
.section--dark .process__step p { color: var(--muted-on-dark); }
.section--dark .process__num { background: var(--white); color: var(--steel); }
.section--dark .process__step::before { background: rgba(255,255,255,.28); }

/* ---------- Teaser blocks ("Read more" home-page previews) --------------- */
.teaser__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .9375rem; color: var(--coral);
  text-decoration: none; margin-top: 4px;
}
.teaser__more:hover { color: var(--gold); }
.teaser__more .ico { width: 1em; height: 1em; vertical-align: 0; }

/* ---------- Rights / education blocks ----------------------------------- */
.rights { display: grid; gap: 14px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 700px)  { .rights { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1050px) { .rights { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.rights__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  box-shadow: none;                     /* audit: no shadowed containers */
}
.rights__item .ico { width: 26px; height: 26px; vertical-align: 0; color: var(--coral); }
.rights__item h3 { font-size: 1.125rem; margin: 12px 0 .35em; }
.rights__item p { color: var(--muted); font-size: .9375rem; margin: 0; }

/* ---------- Team placeholder grid --------------------------------------- */
.team { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 800px) { .team { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.team__card {
  border: 1px dashed #cfd4da;
  background: var(--gray-2);
  border-radius: var(--radius);
  padding: 20px 16px 22px;
  text-align: center;
  color: var(--muted);
}
.team__ph {
  width: 74px; height: 74px; border-radius: 50%;
  background: #e4e8ec; color: #9aa3ac;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.team__ph .ico { width: 34px; height: 34px; vertical-align: 0; }
.team__card b { display: block; color: var(--steel); font-size: .9375rem; }
.team__card span { display: block; font-size: .8125rem; margin-top: 4px; line-height: 1.5; }

/* ---------- Spec note — visible only in the demo, removed in production -- */
.spec-note {
  border-left: 4px solid var(--gold);
  background: #fffaf0;
  border-radius: 0 15px 15px 0;
  padding: 14px 18px;
  font-size: .875rem;
  line-height: 1.6;
  color: #6b5417;
  margin: 20px 0 0;
}
.spec-note b { color: #4d3c10; }

/* ---------- Contact page ------------------------------------------------- */
.contact-grid { display: grid; gap: 28px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } }
.form-card--flat { box-shadow: none; }

.field-row { display: grid; gap: 0 14px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- Free Consultation page — their multi-step wizard -------------
   Recreated from qa/ttform-real-1440.png / qa/ttform-real-mobile.png.
   Split screen between our header and footer: a full-height photo panel on the
   left (~38%) with the headline overlaid, the wizard on the right. Stacks on
   mobile with the photo as a top hero. NO drop shadow on any container here —
   panels are separated by background tone and by the three-corner radius.
   ---------------------------------------------------------------------- */
.wizsec { padding: 0; background: var(--white); }
.wiz { display: grid; grid-template-columns: minmax(0, 1fr); }

/* --- left: the photo panel ------------------------------------------------
   Their image, under a dark gradient so white type clears AA over any part of
   the brickwork. The gradient is heaviest at the bottom, where the copy sits. */
.wiz__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 420px;
  padding: 40px 22px 34px;
  background: #14202c url("../img/form/bg-image-1.jpg") center 30% / cover no-repeat;
  text-align: center;
}
.wiz__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 24, .58) 0%, rgba(10, 16, 24, .34) 40%,
                                      rgba(10, 16, 24, .88) 100%);
}
.wiz__photo-copy { position: relative; max-width: 460px; }
.wiz__photo-copy h1, .wiz__photo-copy h2 {
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 .45em;
}
.wiz__photo-copy p {
  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

/* --- right: the wizard panel --------------------------------------------- */
.wiz__panel { background: var(--white); padding: 30px 20px 46px; }
.wiz__panel-inner { max-width: 860px; }

/* Jack, Round 1 item 01 (2026-08-14): on desktop the whole Step 1 view — hero
   copy bottom-left AND the full form through the Next Step button and the
   free-consultation line — must be visible on load, no scrolling, at 1080p and
   on 900px-tall laptops. Two tiers: a general compact pass at >=1024px, then a
   max-height tier that tightens further on short screens. The photo panel's
   fixed min-height is gone on desktop — the grid row stretches it to match the
   panel, so when the panel fits the fold, the overlaid copy does too. */
@media (min-width: 1024px) {
  .wiz { grid-template-columns: 38% minmax(0, 1fr); }
  .wiz__photo {
    min-height: 0;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding: 40px 40px 36px;
  }
  .wiz__photo-copy h1, .wiz__photo-copy h2 { font-size: 1.875rem; }
  .wiz__panel { padding: 26px 44px 32px; }
}
@media (min-width: 1400px) {
  .wiz__photo { padding: 48px 56px 44px; }
  .wiz__panel { padding: 30px 56px 36px; }
}
/* The rest of the item-01 compact pass lives at the END of this file — the
   wizard restyle section further down re-declares several of these selectors,
   and the compact rules must come after it to win the cascade. */

/* --- progress bar ---------------------------------------------------------
   Three circled icons joined by hairlines: `auto 1fr auto 1fr auto`, so the
   outer circles sit hard against the panel edges exactly as theirs do. The
   icons are their own SVGs; the completed state whitens them with a filter
   rather than shipping a second copy of each file. */
.wizprog {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: start;
  gap: 0 10px;
  margin: 0 0 26px;
  padding: 0;
}
.wizprog__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
}
.wizprog__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: #fff;
  border: 1.5px solid var(--steel);
  border-radius: 50%;
  transition: background-color .2s, border-color .2s;
}
.wizprog__dot img { display: block; width: 19px; height: 19px; }
.wizprog__lbl {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--steel);
  text-align: center;
}
.wizprog__bar { height: 1px; min-width: 20px; margin-top: 20px; background: #c9d2dc; }

.wizprog__step.is-current .wizprog__dot { border-width: 2px; border-color: var(--gold); background: #fff8ec; }
.wizprog__step.is-current .wizprog__lbl { color: var(--gold-dark); font-weight: 700; }
.wizprog__step.is-done .wizprog__dot { border-color: var(--gold); background: var(--gold); }
.wizprog__step.is-done .wizprog__dot img { filter: brightness(0) invert(1); }

@media (min-width: 600px) {
  .wizprog__step { width: 108px; }
  .wizprog__bar { min-width: 40px; }
}

/* --- steps ---------------------------------------------------------------
   GRACEFUL DEGRADATION. The default state is every step visible, stacked and
   headed, with the single Submit at the end — that is what a browser with no
   JavaScript gets. site.js adds .is-wizard, and only then do the steps become
   one-at-a-time and the Back / Next Step buttons appear. */
.wizform:not(.is-wizard) .wizstep + .wizstep {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.wizform:not(.is-wizard) .wizstep__h {
  display: block;
  font-size: 1.125rem;
  color: var(--steel);
  margin: 0 0 16px;
}
.wizform:not(.is-wizard) .wiz-back,
.wizform:not(.is-wizard) .wiz-next,
.wizform:not(.is-wizard) .wiznav--nextonly { display: none; }

.wizstep__h { display: none; }
.wizform.is-wizard .wizstep { display: none; }
.wizform.is-wizard .wizstep.is-active { display: block; }

.address-field { position: relative; }
.address-suggestions {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(18, 39, 65, .16);
}
.address-suggestions[hidden] { display: none; }
.address-suggestions__option {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .875rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.address-suggestions__option:hover,
.address-suggestions__option:focus-visible { background: #f2f6fa; }
.address-suggestions__attribution {
  padding: 7px 14px;
  color: #5e5e5e;
  font-family: Roboto, sans-serif;
  font-size: .75rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  text-align: right;
  white-space: nowrap;
}

.wiznav { display: flex; align-items: stretch; gap: 12px; margin-top: 22px; }
.wiz-back { flex: 0 0 auto; }
.wiz-next { flex: 1 1 auto; }
.wiznav .btn--block { flex: 1 1 auto; }

/* Their Next Step bar: full width, steel blue, brand three-corner radius. */
.btn--steel {
  background: var(--steel);
  border-color: var(--steel);
  color: #fff;
}
.btn--steel:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* Per-step validation message. Written by site.js from data-err-required on the
   form, so no copy lives in the JS. */
.wizerr {
  margin: 16px 0 0;
  padding: 11px 14px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #a3271a;
  background: var(--coral-tint);
  border-left: 4px solid var(--coral);
  border-radius: 0 12px 12px 0;
}
.input.is-invalid { border-color: var(--coral); background: #fff; }

/* --- fields inside the wizard --------------------------------------------
   Their inputs read as filled light-grey wells rather than outlined boxes. */
.wiz .input { background: #f4f6f8; border-color: #e4e8ec; }
.wiz .input:focus { background: #fff; }
.wiz .field { margin-bottom: 18px; }
.wiz .field > label { font-size: .9375rem; color: var(--steel); }
.req { color: #d92d20; font-weight: 700; }

/* Same look as a <label> for a group of controls that has no single input. */
.field__label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--steel);
  margin-bottom: 10px;
  line-height: 1.25;
}
.field__help { font-size: .8125rem; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.field__help--tight { margin: 8px 0 0; }

/* --- pest cards ----------------------------------------------------------
   Six illustrated cards plus Other: light-grey tile, circle indicator top-left,
   illustration centred, label under it. 2-up on mobile, 3-up on desktop, as
   theirs are. The native checkbox stays in the DOM and keyboard-focusable —
   only its rendering is replaced, so the submitted payload is untouched. */
.pestcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
@media (min-width: 1024px) { .pestcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.pestcard { display: block; margin: 0; }
.pestcard input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pestcard__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 100%;
  min-height: 142px;
  padding: 16px 12px 14px;
  background: #f4f6f8;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.pestcard__box:hover { background: #eef1f5; }
.pestcard__mark {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1.5px solid #b9c2cc;
  border-radius: 50%;
  transition: background-color .2s, border-color .2s;
}
.pestcard__art { display: block; width: auto; height: 62px; object-fit: contain; }
.pestcard__art--other {
  display: grid;
  place-items: center;
  width: 62px;
  border-radius: 50%;
  background: #f8debb;
  color: var(--steel);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.pestcard__lbl {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--steel);
  text-align: center;
}
.pestcard input:checked + .pestcard__box { border-color: var(--gold); background: #fff8ec; }
.pestcard input:checked + .pestcard__box .pestcard__mark {
  border-color: var(--gold);
  background: var(--gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}
.pestcard input:focus-visible + .pestcard__box { outline: 3px solid #5b8fd6; outline-offset: 2px; }

@media (min-width: 600px) { .pestcard__box { min-height: 158px; } .pestcard__art { height: 70px; } .pestcard__art--other { width: 70px; } }

/* File picker — dashed edge marks it as an upload target, not a text field. */
.filefield input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: .875rem;
  color: var(--muted);
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed #c8ced4;
  border-radius: var(--radius);
}
.filefield input[type="file"]:focus-visible { outline: 3px solid #5b8fd6; outline-offset: 2px; }

/* The demo spec-notes live under the wizard, quieter than the form itself. */
.wiz__notes { margin-top: 30px; }
.wiz__notes .spec-note { font-size: .8125rem; padding: 12px 16px; }

/* ---------- FAQ page ----------------------------------------------------- */
.faq--wide { max-width: 900px; }
.faq-cat { margin: 0 0 12px; }
.faq-cat h3 { font-size: 1.25rem; color: var(--steel); margin: 30px 0 12px; }
.faq-cat:first-child h3 { margin-top: 0; }

/* On a steel band the FAQ cards go white-on-steel, like their real site. */
.section--dark .faq details { background: var(--white); border-color: rgba(255,255,255,.2); }

/* ---------- Misc --------------------------------------------------------- */
.lead { font-size: 1.0625rem; line-height: 1.75; color: var(--muted); }
.section--dark .lead { color: var(--muted-on-dark); }
.mt24 { margin-top: 24px; }
.section--tight { padding: 44px 0; }

/* Skip link — visually hidden until focused, then a real coral pill. */
.sr-only:focus {
  position: fixed; top: 10px; left: 10px;
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: nowrap;
  z-index: 100002;
  background: var(--coral); color: #fff;
  padding: 10px 20px; border-radius: var(--radius-btn);
  font-weight: 600; text-decoration: none;
}

/* =========================================================================
   HEADER — Spanish-width overlap fixes.
   The ES nav labels run ~20% longer than EN. Two windows overflowed and,
   because .site-nav{min-width:0} lets the nav shrink below its nowrap
   content, the links PAINTED OVER the language switcher instead of pushing
   it: 1024–1149 (ES nav simply doesn't fit a tightened row) and 1400–1599
   (the full-size treatment returns before ES has room for it).
   Fix: ES keeps the drawer header through 1149, and keeps the tightened
   treatment through 1599. Plus a clip so a pathological width can never
   paint links over their neighbours again — clipping is the lesser failure.
   ------------------------------------------------------------------------ */
.site-nav { overflow: clip; }

@media (min-width: 1024px) and (max-width: 1149px) {
  html[lang="es"] .site-nav { display: none; }
  html[lang="es"] .nav-toggle { display: inline-flex; }
  html[lang="es"] .mobile-nav.is-open { display: block !important; }
}
/* No upper bound: the header row lives inside the .wrap max-width, so extra
   viewport past ~1600px adds no room — ES never gets space for full-size. */
@media (min-width: 1400px) {
  html[lang="es"] .site-header__logo img { width: 176px; }
  html[lang="es"] .site-nav ul { gap: 11px; }
  html[lang="es"] .site-nav a { font-size: .8125rem; }
  html[lang="es"] .site-header__actions .btn--phone-lbl { display: none; }
  html[lang="es"] .site-header__actions .btn--consult { padding: 12px 16px; }
  html[lang="es"] .langsw__opt { padding: 0 8px; }
}

/* =========================================================================
   FREE CONSULTATION — 2026 modernization layer.
   The rules above this section recreate tenanttitans.com/form/ faithfully;
   this layer deliberately overrides them into a more modern treatment:
   floating card panel, animated stepper with filled connectors, tactile
   pest tiles, tap-target pill answers instead of dropdowns, softer inputs,
   gradient CTAs, step transitions. Field set and payload are untouched.
   ------------------------------------------------------------------------ */

/* --- the split itself: cool-toned ground, floating white card ----------- */
.wizsec { background: linear-gradient(180deg, #f2f5f8 0%, #e9eef4 100%); }
.wiz__panel { background: transparent; padding: 26px 16px 44px; }
.wiz__panel-inner {
  max-width: 860px;
  background: var(--white);
  border: 1px solid #e6ebf0;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(20, 32, 45, .05), 0 16px 48px rgba(20, 32, 45, .10);
  padding: 28px 20px 36px;
}
@media (min-width: 1024px) {
  .wiz__panel { padding: 48px 48px 64px; display: flex; align-items: flex-start; justify-content: center; }
  /* width:100% matters: as a flex item the card otherwise shrinks to fit its
     content and strands a dead band of ground to its right. */
  .wiz__panel-inner { padding: 44px 52px 52px; width: 100%; max-width: 920px; }
}

/* photo side: deeper, warmer gradient + gold accent under the headline */
.wiz__photo::before {
  background: linear-gradient(200deg, rgba(20, 32, 45, .30) 0%, rgba(20, 32, 45, .45) 45%,
                                      rgba(13, 22, 32, .92) 100%);
}
.wiz__photo-copy h1, .wiz__photo-copy h2 { font-weight: 700; letter-spacing: -.01em; }
.wiz__photo-copy h1::after, .wiz__photo-copy h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--gold);
}
@media (max-width: 1023px) { .wiz__photo-copy h1::after, .wiz__photo-copy h2::after { margin-left: auto; margin-right: auto; } }

/* --- stepper: bigger dots, filled connectors, glow on the current step -- */
.wizprog { margin-bottom: 30px; }
.wizprog__dot {
  width: 44px;
  height: 44px;
  border: 2px solid #d7dee6;
  box-shadow: 0 1px 2px rgba(20, 32, 45, .06);
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.wizprog__lbl { font-size: .78125rem; color: #6b7c8e; transition: color .2s; }
.wizprog__bar {
  height: 3px;
  border-radius: 2px;
  margin-top: 21px;
  background: #dde4eb;
  transition: background-color .3s;
}
.wizprog__step.is-current .wizprog__dot {
  border-color: var(--gold);
  background: #fff8ec;
  box-shadow: 0 0 0 5px rgba(240, 162, 2, .16);
}
.wizprog__step.is-done .wizprog__dot { border-color: var(--gold); background: var(--gold); }
/* a connector fills once the step before it is complete */
.wizprog__step.is-done + .wizprog__bar { background: var(--gold); }

/* Small phones: the ES step labels ("Resumen del Caso") need a narrower
   column than the 92px default to keep the stepper inside 375–390px. */
@media (max-width: 480px) {
  .wizprog { gap: 0 6px; }
  .wizprog__step { width: auto; max-width: 86px; }
  .wizprog__lbl { font-size: .71875rem; }
}

/* --- step header: counter eyebrow + visible title ----------------------- */
.wizstep__count {
  margin: 0 0 4px;
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.wizform:not(.is-wizard) .wizstep__count { display: none; }
.wizform.is-wizard .wizstep__h {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--steel);
  letter-spacing: -.01em;
  margin: 0 0 20px;
}

/* step entrance */
@media (prefers-reduced-motion: no-preference) {
  .wizform.is-wizard .wizstep.is-active { animation: wizin .3s ease both; }
  @keyframes wizin {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- inputs: softer wells, strong steel focus ring ---------------------- */
.wiz .input {
  background: #f6f8fa;
  border: 1.5px solid #e3e9ef;
  border-radius: 14px 14px 14px 0;
  padding: 13px 16px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.wiz .input:hover { border-color: #cfd9e3; }
.wiz .input:focus {
  background: #fff;
  border-color: var(--steel);
  box-shadow: 0 0 0 4px rgba(56, 97, 140, .14);
  outline: none;
}
.wiz .input.is-invalid { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-tint); }

/* --- pest tiles: white cards that lift, tint and ring when chosen ------- */
.pestcard__box {
  background: #fff;
  border: 1.5px solid #e3e9ef;
  border-radius: 16px 16px 16px 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease,
              background-color .16s ease;
}
.pestcard:hover .pestcard__box {
  transform: translateY(-3px);
  border-color: #c6d3df;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
}
.pestcard input:checked + .pestcard__box {
  border-color: var(--steel);
  background: #f3f7fb;
  box-shadow: 0 0 0 3px rgba(56, 97, 140, .18), 0 8px 20px rgba(16, 24, 40, .08);
}
.pestcard input:focus-visible + .pestcard__box { outline: 3px solid #5b8fd6; outline-offset: 2px; }
/* indicator: quiet circle that becomes a filled steel check */
.pestcard__mark {
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5df;
  border-radius: 50%;
  background: #fff;
  transition: background-color .16s, border-color .16s;
}
.pestcard input:checked + .pestcard__box .pestcard__mark {
  border-color: var(--steel);
  background: var(--steel)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3L11 1' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px 10px no-repeat;
}

/* --- pill answers (replace the dropdowns) ------------------------------- */
.pillgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.pillopt { margin: 0; }
.pillopt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pillopt__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--steel);
  background: #fff;
  border: 1.5px solid #dbe3ea;
  border-radius: 100px 100px 100px 0;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.pillopt:hover .pillopt__btn { border-color: var(--steel); background: #f3f7fb; }
.pillopt input:checked + .pillopt__btn {
  background: var(--steel);
  border-color: var(--steel);
  color: #fff;
  box-shadow: 0 4px 12px rgba(56, 97, 140, .30);
}
.pillopt input:focus-visible + .pillopt__btn { outline: 3px solid #5b8fd6; outline-offset: 2px; }
.pillgroup.is-invalid .pillopt__btn { border-color: var(--coral); }
/* the two-column field row reads better stacked now the answers are pills */
.wiz .field-row { grid-template-columns: minmax(0, 1fr); }

/* --- file upload: dropzone look ----------------------------------------- */
.wiz .filefield {
  border: 2px dashed #c9d5e0;
  border-radius: 16px 16px 16px 0;
  background: #f8fafc;
  padding: 16px 18px 14px;
  transition: border-color .15s, background-color .15s;
}
.wiz .filefield:hover { border-color: var(--steel); background: #f3f7fb; }
.wiz .filefield input[type="file"] { font-size: .875rem; color: var(--muted); max-width: 100%; }
.wiz .filefield input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--steel);
  background: #fff;
  border: 1.5px solid #dbe3ea;
  border-radius: 100px 100px 100px 0;
  padding: 9px 18px;
  margin-right: 12px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.wiz .filefield input[type="file"]::file-selector-button:hover {
  border-color: var(--steel);
  background: #f3f7fb;
}

/* --- CTAs: gradient lift on the primary, ghost back --------------------- */
.wiz .btn--lg { min-height: 52px; font-size: 1.0625rem; }
.wiz .btn--steel {
  background: linear-gradient(135deg, #3f6c9c 0%, #2f5378 100%);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(47, 83, 120, .30);
  transition: box-shadow .16s, transform .16s, filter .16s;
}
.wiz .btn--steel:hover {
  background: linear-gradient(135deg, #3f6c9c 0%, #2f5378 100%);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(47, 83, 120, .38);
}
.wiz .btn--red { box-shadow: 0 6px 16px rgba(237, 106, 90, .32); }
.wiz .btn--red:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(240, 162, 2, .38); }

/* --- the dev spec-notes fold away so the page demos clean ---------------- */
.specnotes {
  margin-top: 8px;
  background: #fdf8ec;
  border: 1px solid #eadfbf;
  border-radius: 12px;
}
.specnotes summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: .875rem;
  font-weight: 700;
  color: #7a5d10;
  list-style-position: inside;
}
.specnotes summary:hover { color: #4d3c10; }
.specnotes[open] summary { border-bottom: 1px solid #eadfbf; }
.specnotes .spec-note { margin: 12px 16px; }

/* ==========================================================================
   Jack, Round 1 item 01 (2026-08-14) — desktop compact pass for the Free
   Consultation wizard. Step 1 (hero copy + full form through the Next Step
   button and the free-consultation line) must fit the viewport on load at
   1080p and on 900px-tall laptops; mobile stays scrollable and untouched
   (everything here is >=1024px). Kept at the END of the file on purpose: the
   wizard restyle section above re-declares .wiz .input, .pillopt__btn and
   .wizstep__h, and these must come later to win the cascade.
   ======================================================================== */
@media (min-width: 1024px) {
  /* the modernization layer's floating card is the biggest height cost:
     48/64 ground padding + 44/52 card padding. Tighten both. */
  .wiz__panel { padding: 20px 40px 28px; }
  .wiz__panel-inner { padding: 26px 44px 30px; }
  .wizprog { margin-bottom: 16px; }
  .wizprog__dot { width: 34px; height: 34px; }
  .wizprog__dot img { width: 17px; height: 17px; }
  .wizprog__bar { margin-top: 17px; }
  .wizform.is-wizard .wizstep__h { font-size: 1.25rem; margin-bottom: 12px; }
  .pestcards { gap: 10px; margin-bottom: 14px; }
  .pestcard__box { min-height: 106px; padding: 10px; gap: 8px; }
  .pestcard__art { height: 44px; }
  .pestcard__art--other { width: 44px; font-size: 1.5rem; }
  .wiz .field { margin-bottom: 12px; }
  .wiz .input { padding: 10px 14px; }
  .wiz .field__label { margin-bottom: 8px; }
  .pillopt__btn { min-height: 40px; padding: 7px 20px; }
  .wiznav { margin-top: 14px; }
  .wiz .form-note { margin-top: 8px; }
}
/* Short-desktop tier (900px-tall laptops: ~790-820px of viewport under the
   browser chrome, minus our sticky header). Text never drops below 12px here —
   if this still can't hold Step 1, the next lever is moving a question to
   Step 2, per Jack, not smaller type. */
@media (min-width: 1024px) and (max-height: 860px) {
  .wiz__panel { padding: 10px 40px 12px; }
  .wiz__panel-inner { padding: 14px 40px 16px; }
  .wiz__photo { padding-bottom: 24px; }
  .wizprog { margin-bottom: 8px; }
  .wizprog__step { gap: 4px; }
  .wizprog__dot { width: 30px; height: 30px; }
  .wizprog__bar { margin-top: 15px; }
  .wizstep__count { margin-bottom: 2px; }
  .wizform.is-wizard .wizstep__h { font-size: 1.125rem; margin-bottom: 6px; }
  .wiz .field__label { margin-bottom: 6px; }
  .pestcards { margin-bottom: 10px; }
  .pestcard__box { min-height: 92px; gap: 6px; }
  .pestcard__art { height: 36px; }
  .pestcard__art--other { width: 36px; font-size: 1.25rem; }
  .pestcard__lbl { font-size: .8125rem; }
  .wiz .field { margin-bottom: 8px; }
  .wiz .input { padding: 7px 14px; }
  .pillopt__btn { min-height: 34px; padding: 4px 18px; }
  .wiznav { margin-top: 8px; }
  .wiz .btn--lg { min-height: 44px; font-size: 1rem; }
  .wiz .form-note { margin-top: 5px; }
}