/* ============================================================
   the Art Deco — additions since October 2026
   Loaded after style.css on every page. Kept in its own file so the
   new pages and homepage changes work without replacing style.css.
   ============================================================ */

/* ---------- homepage hero ---------- */
/* The search phrase rides inside the H1 as a small line under
   "Advise ◆ Prepare ◆ Finish", set in exactly the same type as it, so the
   page keeps one H1 while the brand line stays the thing you read. */
.hero__kick{
  display:block; max-width:40ch; margin:0 auto var(--sp-3);
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.32em; line-height:1.7; text-transform:uppercase;
  color:var(--gold); text-shadow:none;
}
.hero__ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin:0 0 var(--sp-4); }
/* Outline button for dark grounds: white text and a white outline. */
.btn.hero__alt{ color:#fff; box-shadow:inset 0 0 0 1px #fff; }
.btn.hero__alt:hover{ background:#fff; color:var(--ink); box-shadow:none; }

/* Form spam trap: off-screen rather than display:none, which some bots skip. */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.tcases{ margin:0 0 clamp(1.4rem,3vw,1.9rem); color:var(--tx-2); font-size:.95rem; }
.tcases a{ color:var(--gold-ink); text-underline-offset:.2em; }

/* ---------- service and landing pages ---------- */
/* On a phone the section's own top padding (56px) is shorter than the fixed
   header (76px), which hid the breadcrumb. Never start above the header. */
.svcp__top{ padding-top:max(clamp(3.5rem,8vw,7rem), calc(var(--hdr-h) + 1.5rem)); }

/* The steps list reused as a plain list of services: a gold rule in place
   of the step number, since these are not a sequence. */
.svcp__list li{ padding-left:1.2rem; border-left:1px solid var(--gold); }
.svcp__list li::before{ content:none; }
.svcp__list a{ color:var(--gold); text-underline-offset:.2em; white-space:nowrap; }

.tstrip--onDark .tstrip__t{ color:var(--tx-onDark-2); }
.tstrip--onDark .tstrip__i a:hover .tstrip__t{ color:var(--gold); }
.tstrip--onDark .tstrip__i a:focus-visible{ outline-color:var(--gold-soft); }

.areas__list--page{ margin:0 0 1.3rem; padding:0; list-style:none; max-width:30rem; }
.areas__list--page li{ font-size:1rem; }

.svcp__body a{ color:var(--gold-ink); text-underline-offset:.2em; }
.sec--teal .svcp__body a,.sec--ink .svcp__body a{ color:var(--gold); }
.svcp__body .h2{ margin:0 0 1.4rem; }
.svcp__body .h3{ margin:2.2rem 0 .6rem; }

/* Four reasons instead of three: two by two rather than a lone fourth. */
@media (min-width:820px){ .crafts--4{ grid-template-columns:repeat(2,1fr); } }

/* ---------- case studies ---------- */
.cs__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem 2rem;
  margin:0 0 2rem; padding:1.2rem 0; border-block:1px solid var(--line); }
.cs__facts div{ margin:0; }
.cs__facts dt{ font-family:var(--f-head); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-ink); margin:0 0 .3rem; }
.cs__facts dd{ margin:0; font-size:.98rem; color:var(--tx); }
.cs__stages{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(2rem,5vw,3.2rem); }
.cs__stage{ display:grid; gap:1rem clamp(1.6rem,4vw,3rem); align-items:center; }
@media (min-width:760px){ .cs__stage{ grid-template-columns:1fr 1fr; } .cs__stage:nth-child(even) .cs__pic{ order:2; } }
.cs__pic{ margin:0; }
.cs__pic img{ display:block; width:auto; max-width:100%; height:auto; max-height:620px; margin-inline:auto; }
.cs__tag{ display:inline-block; margin:0 0 .5rem; font-family:var(--f-head); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.cs__stage h3{ font-family:var(--f-head); font-size:1.12rem; font-weight:600; color:var(--cream); margin:0 0 .5rem; }
.cs__stage p{ margin:0; color:var(--tx-onDark-2); line-height:1.7; }

/* ---------- Our work filter bar ---------- */
/* Tucked 1px under the header so the two always meet, whatever sub-pixel
   height the header ends up at on a given screen. */
.pfil{ top:calc(var(--hdr-pin) - 1px); }