/* =========================================================
   Earnest Digital Marketing — shared stylesheet

   All-blue palette, but with real tonal range instead of two flat
   notes: a deep ink navy for structure, a mid royal blue for the
   primary CTA/link accent, a bright sky-cyan for numerals and
   pop-accents, and a teal for tags/secondary badges. Four
   distinguishable blues doing different jobs, not one hue repeated.

   Palette: Ink Navy / Royal Blue / Sky Cyan / Teal / Cool Paper
   Type: Frank Ruhl Libre (display) + Public Sans (body/UI) — unchanged
   ========================================================= */

:root {
  --federal-blue: #0d3155;
  --federal-blue-light: #1d4d7a;
  --federal-blue-dark: #071f38;
  --brick: #1268b8;
  --brick-light: #3f9ae0;
  --brick-dark: #0c4d8f;
  --stamp: #0e7c86;
  --stamp-dark: #0a5b62;
  --parchment: #e9f2fb;
  --parchment-alt: #d7e7f7;
  --sky-tint: #f3f9fd;
  --card-bg: #ffffff;
  --ink: #17222c;
  --slate: #52606d;
  --brass: #0ea5e9;
  --brass-light: #7dd3fc;
  --line: rgba(23, 34, 44, 0.14);
  --white: #ffffff;

  --serif: "Frank Ruhl Libre", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-w: 1120px;
  --radius: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-sm: 0 1px 2px rgba(23, 34, 44, 0.07), 0 1px 1px rgba(23, 34, 44, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(7, 31, 56, 0.22), 0 2px 8px rgba(23, 34, 44, 0.07);
  --shadow-lg: 0 24px 48px -16px rgba(7, 31, 56, 0.32), 0 4px 12px rgba(23, 34, 44, 0.09);
  --shadow-brick: 0 10px 24px -8px rgba(18, 104, 184, 0.4);

  --grad-federal: linear-gradient(135deg, var(--federal-blue) 0%, var(--federal-blue-dark) 100%);
  --grad-brick: linear-gradient(135deg, var(--brick-light) 0%, var(--brick) 55%, var(--brick-dark) 100%);
  --grad-parchment: linear-gradient(180deg, var(--white) 0%, var(--parchment) 100%);
}

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

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  background:
    radial-gradient(1200px 480px at 85% -10%, rgba(18, 104, 184, 0.10), transparent 60%),
    radial-gradient(900px 420px at -10% 8%, rgba(14, 165, 233, 0.10), transparent 55%),
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-alt) 100%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Several soft white blobs that swim around the background as you
   scroll — each one moves along its own scroll-linked path (set as
   --b1x/--b1y etc. in script.js, a different speed/direction/wiggle
   per blob) plus a continuous shape-morph so nothing feels stagnant or
   like one shape sliding uniformly. Sits above the blue body backdrop
   but behind all real content since sections with their own background
   paint over it. */
.bg-glow {
  position: fixed;
  inset: -20% -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-glow-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0) 76%);
  filter: blur(36px);
  will-change: transform;
}
.bg-glow-blob-1 {
  top: 4vh;
  left: 8vw;
  width: clamp(360px, 46vw, 640px);
  height: clamp(360px, 46vw, 640px);
  transform: translate3d(var(--b1x, 0px), var(--b1y, 0px), 0);
  animation: blobMorph1 21s ease-in-out infinite;
}
.bg-glow-blob-2 {
  top: 46vh;
  left: 56vw;
  width: clamp(300px, 38vw, 540px);
  height: clamp(300px, 38vw, 540px);
  transform: translate3d(var(--b2x, 0px), var(--b2y, 0px), 0);
  animation: blobMorph2 26s ease-in-out infinite -8s;
}
.bg-glow-blob-3 {
  top: 92vh;
  left: 18vw;
  width: clamp(280px, 34vw, 480px);
  height: clamp(280px, 34vw, 480px);
  transform: translate3d(var(--b3x, 0px), var(--b3y, 0px), 0);
  animation: blobMorph3 24s ease-in-out infinite -15s;
}
@keyframes blobMorph1 {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  25%      { border-radius: 58% 42% 39% 61% / 55% 63% 37% 45%; }
  50%      { border-radius: 50% 50% 33% 67% / 58% 33% 67% 42%; }
  75%      { border-radius: 33% 67% 58% 42% / 45% 45% 55% 55%; }
}
@keyframes blobMorph2 {
  0%, 100% { border-radius: 60% 40% 46% 54% / 38% 52% 48% 62%; }
  33%      { border-radius: 40% 60% 62% 38% / 55% 40% 60% 45%; }
  66%      { border-radius: 52% 48% 35% 65% / 48% 60% 40% 52%; }
}
@keyframes blobMorph3 {
  0%, 100% { border-radius: 47% 53% 58% 42% / 52% 45% 55% 48%; }
  40%      { border-radius: 63% 37% 44% 56% / 40% 58% 42% 60%; }
  70%      { border-radius: 38% 62% 55% 45% / 60% 42% 58% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glow-blob-1, .bg-glow-blob-2, .bg-glow-blob-3 { animation: none; transform: none; }
}
.site-header, main, .site-footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--federal-blue-dark);
}

h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.35rem; }

.case-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(82, 96, 109, 0.15);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 12px;
  flex-shrink: 0;
}

p { margin: 0 0 1em; max-width: 62ch; color: var(--ink); }

.lede {
  font-size: 1.15rem;
  color: var(--slate);
  max-width: 56ch;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

section { padding: 56px 0; }
section.tight { padding: 40px 0; }
#services { scroll-margin-top: 140px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 3px;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242, 246, 250, 0.86);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, var(--shadow-sm);
}

.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Icon + a stacked name/tagline, mirroring the source logo's own
   typographic hierarchy (big serif name, small tracked sans tagline)
   instead of one line of running text competing with the icon for
   width — this is also what keeps it from ever getting squeezed by
   the rest of the nav row. */
.brand {
  font-family: var(--serif);
  color: var(--federal-blue-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-icon {
  height: 2.6rem;
  width: auto;
  aspect-ratio: 450 / 365;
  flex-shrink: 0;
}
/* The icon's monogram is navy — invisible on the dark navy footer, so it
   gets flattened to solid white there instead of a separate light asset. */
.brand-icon-footer {
  filter: brightness(0) invert(1);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  white-space: nowrap;
}
.brand-name {
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand-tagline {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brick);
  margin-top: 5px;
}

.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a {
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--brick);
  color: var(--brick-dark);
}

.nav-cta.nav-cta-mobile {
  display: none;
}

/* Call link inside the phone menu (hidden on wider screens) and landing spot for the Free Quote buttons */
.nav-call-mobile { display: none; }

/* Text-message links: shown only on touch devices (phones, tablets), where tapping opens the messaging app */
.text-touch-only { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  .btn.text-touch-only { display: inline-flex !important; }
  p.text-touch-only { display: block !important; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 1140px) {
  .nav-links.open li.text-touch-only { display: list-item !important; }
}
#contact-form { scroll-margin-top: 110px; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brick);
  color: var(--white);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 0.94rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-brick);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); background: var(--brick-dark); box-shadow: 0 14px 28px -8px rgba(18, 104, 184, 0.46); }
.nav-cta:active { transform: translateY(0); }

/* ---------- Language switch ---------- */
.lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 500;
  flex-shrink: 0;
}
.lang-switch a {
  padding: 6px 13px;
  text-decoration: none;
  color: var(--slate);
}
.lang-switch a[aria-current="true"] {
  background: var(--federal-blue);
  color: var(--white);
}
.lang-switch a { transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.lang-switch a:not([aria-current="true"]):hover { background: var(--parchment-alt); }

/* ---------- CJK typography (Chinese pages) ---------- */
:lang(zh-Hans) {
  font-family: "Noto Sans SC", var(--sans);
}
:lang(zh-Hans) h1,
:lang(zh-Hans) h2,
:lang(zh-Hans) h3,
:lang(zh-Hans) h4,
:lang(zh-Hans) .brand {
  font-family: "Noto Serif SC", var(--serif);
  letter-spacing: 0;
}
:lang(zh-Hans) p,
:lang(zh-Hans) li,
:lang(zh-Hans) label,
:lang(zh-Hans) input,
:lang(zh-Hans) textarea,
:lang(zh-Hans) select,
:lang(zh-Hans) button,
:lang(zh-Hans) .btn {
  font-family: "Noto Sans SC", var(--sans);
}
:lang(zh-Hans) .lede { line-height: 1.9; }
:lang(zh-Hans) p { line-height: 1.9; }
/* Chinese headlines contain long English place names ("Washington, DC"), so
   on phones they are set slightly smaller to wrap cleanly without overflow. */
@media (max-width: 480px) {
  :lang(zh-Hans) h1 { font-size: 2.05rem; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 1140px) {
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-height: 100vh;
    background: var(--parchment);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 4px 28px 18px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { display: none; }
  .nav-links.open .nav-cta-mobile {
    display: inline-flex;
    color: var(--white);
    padding: 10px 18px;
    border-bottom: none;
    margin-top: 10px;
    text-align: center;
  }
  .nav-links.open .nav-call-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 18px;
    border: 2px solid var(--federal-blue);
    border-radius: var(--radius);
    color: var(--federal-blue-dark);
    font-weight: 600;
    text-align: center;
  }
}

/* ---------- Hero ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero {
  padding: 48px 0 32px;
}
.hero h1 { font-size: clamp(2.2rem, 3.8vw, 3.1rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}
.hero-grid > * {
  animation: fadeInUp 0.7s var(--ease) both;
}
.hero-grid > *:nth-child(2) { animation-delay: 0.1s; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.eyebrow-line {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--brick-dark);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.eyebrow-line .rule {
  width: 38px;
  height: 7px;
  display: inline-block;
  background:
    linear-gradient(var(--brick), var(--brick)) top / 100% 2px no-repeat,
    linear-gradient(var(--brick), var(--brick)) bottom / 100% 2px no-repeat;
}

.hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.hero-stat .num {
  font-family: var(--serif);
  font-size: 2.1rem;
  background: var(--grad-federal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.hero-stat { flex: 0 1 230px; }
.hero-stat .label { color: var(--slate); font-size: 0.9rem; }

.hero-panel {
  position: relative;
  /* same lighter navy + sky glow as .band-dark */
  background: linear-gradient(135deg, #1f5a97 0%, #12406f 100%);
  color: var(--parchment);
  border-radius: var(--radius-md);
  padding: 36px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  box-shadow: 0 0 28px -2px rgba(125, 211, 252, 0.4), var(--shadow-lg);
  overflow: hidden;
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(125, 211, 252, 0.34), transparent 62%),
    radial-gradient(340px 240px at 0% 100%, rgba(125, 211, 252, 0.22), transparent 62%);
  pointer-events: none;
}
.hero-panel > * { position: relative; }
.hero-panel h3 { color: var(--white); }
.hero-panel p { color: rgba(255,255,255,0.82); }
.hero-panel ul { padding-left: 18px; margin: 0; color: rgba(255,255,255,0.9); }
.hero-panel li { margin-bottom: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size: 0.98rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--sans);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn-primary { background: var(--brick); color: var(--white); box-shadow: var(--shadow-brick); }
.btn-primary:hover { transform: translateY(-2px); background: var(--brick-dark); box-shadow: 0 16px 32px -10px rgba(18, 104, 184, 0.46); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { border-color: var(--federal-blue); color: var(--federal-blue-dark); background: transparent; }
.btn-outline:hover { background: var(--federal-blue); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline:active { transform: translateY(0); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Packages (four boxes, click to expand) ---------- */
.package-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 640px) {
  .package-grid { grid-template-columns: 1fr; }
}
/* While a card is open, don't stretch its neighbour to the same height
   (it would show a tall empty box). All-closed rows still match heights. */
.package-grid:has(.pkg-details[open]) { align-items: start; }

/* .pkg-card is a plain wrapper div (not the <details> itself) so the
   "Choose" button below can stay visible whether the details are open
   or collapsed — content after </summary> inside <details> only shows
   when open, so it can't live there. */
.pkg-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--shadow-sm);
  transition: outline-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.pkg-card:hover,
.pkg-card:focus-within,
.pkg-card:has(.pkg-details[open]) {
  outline-color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px rgba(18, 104, 184, 0.12), var(--shadow-md);
}
.pkg-details summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 26px 26px 20px;
}
.pkg-details summary::-webkit-details-marker { display: none; }
.pkg-card .no {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--brick);
  display: block;
  margin-bottom: 6px;
}
.pkg-card h3 { margin: 0 0 8px; }
.pkg-card .pkg-teaser { color: var(--slate); margin: 0 0 14px; }
/* Text link instead of a plus-icon circle — reads as an invitation to
   read more, not a generic expand widget. */
.toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brick);
}
.toggle-text::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}
.pkg-details[open] .toggle-text::after { transform: rotate(90deg); }
.toggle-text .icon-open { display: none; }
.pkg-details[open] .toggle-text .icon-closed { display: none; }
.pkg-details[open] .toggle-text .icon-open { display: inline; }
.pkg-more { padding: 0 26px 8px; }
.pkg-more .includes {
  margin: 0;
  padding-left: 18px;
  color: var(--slate);
}
.pkg-more .includes li { margin-bottom: 8px; }
/* "How a website project works" steps inside package 01 */
.pkg-more h3.process-h { margin: 24px 0 10px; font-size: 1.05rem; }
.pkg-more .process { margin: 0; padding-left: 22px; color: var(--slate); }
.pkg-more .process li { margin-bottom: 10px; padding-left: 4px; }
.pkg-more .process li strong { color: var(--ink); }
.pkg-more .process ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.pkg-more .process ul li { margin-bottom: 6px; padding-left: 0; }
.pkg-more .process-note { margin: 14px 0 0; color: var(--slate); }
.pkg-choose {
  padding: 18px 26px 26px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.pkg-choose .btn { width: 100%; text-align: center; }

/* Homepage teaser cards: same look as the full cards, no expand widget. */
.pkg-static { padding: 26px 26px 26px; }
a.toggle-text { text-decoration: none; }
a.toggle-text:hover { text-decoration: underline; }
.pkg-card { scroll-margin-top: 100px; }
.pkg-card:has(.pkg-details:not([open])),
.pkg-card:has(.pkg-static) { cursor: pointer; }

/* ---------- Reviews ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.review-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
}
.review-card .review-stars {
  display: block;
  color: #f5b800; /* bright yellow; the thin gold edge below keeps the stars visible on the white card */
  -webkit-text-stroke: 0.7px #946800;
  font-size: 1.1rem;
  letter-spacing: 3px;
  margin-bottom: 14px;
}
.review-card p {
  color: var(--ink);
  margin: 0 0 18px;
}
.review-card .review-more { display: none; }
.review-card .review-comma { display: none; }
.review-toggle:checked ~ p .ellipsis { display: none; }
.review-toggle:checked ~ p .review-comma { display: inline; }
.review-card label.toggle-text {
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin: -6px 0 18px;
}
.review-card label.toggle-text .icon-open { display: none; }
.review-toggle:checked ~ p .review-more { display: inline; }
.review-toggle:checked ~ label.toggle-text .icon-closed { display: none; }
.review-toggle:checked ~ label.toggle-text .icon-open { display: inline; }
.review-toggle:checked ~ label.toggle-text::after { transform: rotate(90deg); }
.review-author strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.review-author strong .review-role {
  display: inline;
  color: var(--slate);
  font-size: 0.875rem;
}
.review-author span {
  display: block;
  color: var(--slate);
  font-size: 0.88rem;
  margin-top: 2px;
}
.review-featured {
  transform: scale(1.06);
  border: 2px solid var(--brass);
  box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.12), var(--shadow-md);
  padding: 34px 30px;
}
@media (max-width: 860px) {
  .review-featured { transform: none; }
}
.review-featured .review-stars { font-size: 1.3rem; }
.review-featured p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.5;
}
.review-featured .review-author strong { font-size: 1.2rem; }
.review-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass);
  color: var(--federal-blue-dark);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Cards ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
/* Team cards (About page): align to the top instead of the grid's default
   stretch, so a shorter bio doesn't get forced to match a taller one. */
.team-grid {
  align-items: start;
}
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.plain-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  padding: 26px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.plain-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(18, 104, 184, 0.25);
}

/* ---------- About: team cards (original white-ish card background) ---------- */
.team-card {
  background: var(--card-bg);
  border: 0;
  border-radius: 24px;
  padding: 36px 34px 34px;
  box-shadow: 0 14px 32px -16px rgba(18, 104, 184, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -18px rgba(18, 104, 184, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.team-card h3 {
  margin: 0 0 10px;
  font-size: 2.3rem;
  line-height: 1.1;
  color: var(--federal-blue);
}
.team-role {
  color: var(--brick-dark);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(18, 104, 184, 0.22);
}
@media (max-width: 480px) {
  .team-card { padding: 26px 22px 24px; }
  .team-card h3 { font-size: 2rem; }
}

/* ---------- Section header pattern ---------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
@media (max-width: 640px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Case study blocks ---------- */
.case-block {
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 36px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm);
}
.case-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 22px 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-stats .num {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--brick);
  display: block;
}
.case-stats .label { color: var(--slate); font-size: 0.88rem; }

/* "At a glance" panel on an Our Work card: proven facts first, plain-language line under them */
.case-glance {
  margin: 22px 0;
  padding: 20px 22px;
  background: #eef5fc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brick);
  border-radius: var(--radius-md);
}
.case-glance-head { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.case-glance-grid { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.case-glance-grid > div { flex: 1 1 150px; min-width: 0; }
.case-glance .num { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; color: var(--brick-dark); }
.case-glance .label { display: block; margin-top: 4px; color: var(--slate); font-size: 0.9rem; line-height: 1.4; }
.case-glance-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-size: 0.95rem; }

/* ---------- Screenshot carousel ---------- */
.shot-carousel {
  position: relative;
  max-width: 420px;
  margin: 22px auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--federal-blue-dark);
  box-shadow: var(--shadow-md);
}
.shot-track {
  position: relative;
  aspect-ratio: 16 / 10;
}
.shot-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.shot-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.shot-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 248, 0.9);
  color: var(--federal-blue-dark);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-nav {
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.shot-nav:hover { background: var(--white); transform: translateY(-50%) scale(1.08); }
.shot-prev { left: 8px; }
.shot-next { right: 8px; }
.shot-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.shot-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.shot-dots button.is-active { background: var(--white); }

/* Text + screenshot side by side on desktop, stacked on mobile */
@media (min-width: 861px) {
  .case-block--split {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
  }
  .case-block--split .shot-carousel {
    margin: 0;
  }
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}
@media (max-width: 640px) { .before-after { grid-template-columns: 1fr; } }
.ba-panel {
  padding: 20px;
  border-radius: var(--radius-md);
}
.ba-before { background: var(--parchment-alt); border: 1px dashed var(--line); }
.ba-after { background: var(--grad-federal); color: var(--white); box-shadow: var(--shadow-md); }
.ba-after p { color: rgba(255,255,255,0.85); }
.ba-after h4 { color: var(--white); margin-bottom: 6px; }
.ba-tag {
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--brick-dark);
  margin-bottom: 6px;
  display: block;
}
.ba-after .ba-tag { color: rgba(255,255,255,0.85); }
/* Outbound text link (not a button): plain, underlined, clearly a link. */
/* Evidence-of-work links: light-teal pill with outline and arrow (still a link, not a button). */
.visit-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; background: #e0eef9; color: var(--brick-dark); border: 1px solid rgba(18, 104, 184, 0.40); border-radius: 22px; font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-decoration: none; }
.visit-link:hover { background: #cfe3f5; color: var(--federal-blue-dark); }
.visit-link:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; }
@media (max-width: 640px) { .visit-link { font-size: 1rem; } }
.case-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.case-top .case-no { margin-bottom: 0; flex: none; }
.case-top .visit-link { margin-top: 0; }

/* ---------- Service area list ---------- */
.locality-list {
  columns: 3;
  column-gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.locality-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
@media (max-width: 700px) { .locality-list { columns: 2; } }
@media (max-width: 480px) { .locality-list { columns: 1; } }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 20px; }
label { display: block; font-size: 0.92rem; margin-bottom: 6px; color: var(--federal-blue-dark); }
input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem;
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: rgba(13, 49, 85, 0.35); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--federal-blue);
  box-shadow: 0 0 0 3px rgba(13, 49, 85, 0.14);
}
textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Contact info strip ---------- */
.contact-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
@media (max-width: 640px) { .contact-info { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--grad-federal);
  color: var(--white);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(480px 260px at 90% 0%, rgba(63, 154, 224, 0.18), transparent 60%),
    radial-gradient(420px 260px at 5% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.82); }

/* ---------- DARK BAND (lighter navy ombre + corner glows + glowing top/bottom lines) ----------
   Reusable: add class="band-dark" to any <section>. To revert, remove this block
   and the band-dark class from the sections that use it.
   Uses its own lighter navy so the shared --grad-federal (CTA band, footer, hero panel) is unchanged. */
.band-dark {
  position: relative;
  background: linear-gradient(135deg, #1f5a97 0%, #12406f 100%);
  color: var(--white);
  border-top: 3px solid;
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #7dd3fc 0%, var(--brick-light) 50%, #7dd3fc 100%) 1;
  box-shadow:
    0 -14px 46px -6px rgba(125, 211, 252, 0.6),
    0 14px 46px -6px rgba(125, 211, 252, 0.45);
}
.band-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 340px at 92% 0%, rgba(125, 211, 252, 0.38), transparent 62%),
    radial-gradient(560px 320px at 6% 100%, rgba(125, 211, 252, 0.26), transparent 62%),
    linear-gradient(180deg, rgba(125, 211, 252, 0.16), transparent 22%);
  pointer-events: none;
}
.band-dark > .wrap { position: relative; }
.band-dark h1, .band-dark h2 { color: var(--white); }
.band-dark .lede { color: rgba(255, 255, 255, 0.86); }
.band-dark .eyebrow-line { color: #bfe3fb; }
.band-dark .eyebrow-line .rule {
  background:
    linear-gradient(#bfe3fb, #bfe3fb) top / 100% 2px no-repeat,
    linear-gradient(#bfe3fb, #bfe3fb) bottom / 100% 2px no-repeat;
}
.band-dark .section-head { border-bottom-color: rgba(255, 255, 255, 0.24); }
.band-dark .review-card { color: var(--ink); }
/* Featured review: white border + halo so it stands out against the lighter blue */
.band-dark .review-featured {
  border-color: var(--white);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.28), 0 0 34px 6px rgba(255, 255, 255, 0.35), var(--shadow-md);
}
.band-dark .review-badge { background: var(--white); color: var(--federal-blue); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3); }
/* Reviews band: extra bottom room so the featured card (scaled + haloed) clears the glow of the band below */
section.tight.band-reviews { padding-bottom: 64px; }
.band-dark .case-stats { border-color: rgba(255, 255, 255, 0.24); }
.band-dark .case-stats .num { color: #a5e3ff; }
.band-dark .case-stats .label { color: rgba(255, 255, 255, 0.84); }

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--federal-blue-dark) 0%, #050f1c 100%);
  color: rgba(255,255,255,0.78);
  padding: 56px 0 28px;
  border-top: 3px solid;
  border-image: var(--grad-brick) 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-grid > div { min-width: 0; }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.site-footer h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; overflow-wrap: break-word; }
.site-footer a { color: rgba(255,255,255,0.78); text-decoration: none; font-size: 0.94rem; overflow-wrap: break-word; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--brass-light); }
.site-footer a[href^="mailto"] { font-size: 0.875rem; }
/* Facebook link in the footer: Facebook-blue button with the Facebook logo, so it reads as Facebook at a glance */
.site-footer a.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -6px;
  color: #1877f2;
  text-decoration: none;
}
.site-footer a.footer-social:hover { color: #4599ff; }
.site-footer a.footer-social:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; color: #ffffff; }
.site-footer a.footer-social .footer-social-icon { flex: none; width: 32px; height: 32px; }
.site-footer .brand { color: var(--white); }
.site-footer .brand-tagline { color: var(--brass-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
}

.tag-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tag-list span {
  border: 1px solid rgba(18, 104, 184, 0.28);
  background: #cfe6fa;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brick-dark);
  box-shadow: var(--shadow-sm);
}

.work-sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.work-sample {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.work-sample img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Very narrow phones (320px) ----------
   Long words (an email address, a domain-name button) must wrap instead of forcing
   the page to scroll sideways. These rules only change anything when text would
   otherwise be wider than its box. */
.grid-2 > * { min-width: 0; }
.plain-card { overflow-wrap: anywhere; }
.btn { max-width: 100%; white-space: normal; }

/* ---------- Section color variety + flat boxes ----------
   Every ordinary section gets its own shade of blue (42% opaque, so the soft white background blobs clearly drift through) (four shades that rotate down
   the page, so two neighbouring sections never match). Dark bands (Reviews, bottom banner,
   footer) are left as they are. Boxes are plain white; the navy info panel is a solid navy. */
main > section:not(.band-dark):not(.cta-band):nth-of-type(4n+1) { background: rgba(255, 255, 255, 0.42) !important; border-top: 0 !important; border-bottom: 0 !important; }
main > section:not(.band-dark):not(.cta-band):nth-of-type(4n+2) { background: rgba(224, 241, 251, 0.42) !important; border-top: 0 !important; border-bottom: 0 !important; }
main > section:not(.band-dark):not(.cta-band):nth-of-type(4n+3) { background: rgba(193, 222, 243, 0.42) !important; border-top: 0 !important; border-bottom: 0 !important; }
main > section:not(.band-dark):not(.cta-band):nth-of-type(4n+4) { background: rgba(241, 250, 255, 0.42) !important; border-top: 0 !important; border-bottom: 0 !important; }
.hero-panel { background: #16487c; border-color: transparent; box-shadow: 0 12px 28px -10px rgba(7, 31, 56, 0.35); }
.hero-panel::before { display: none; }
/* "Why work with us": see-through white boxes so they read differently from the solid white ones */
.why-us .plain-card { background: rgba(255, 255, 255, 0.55); border: 1.5px solid #ffffff; box-shadow: none; }

/* ---------- Cross-browser + accessibility fixes (2026-09-21 compatibility check) ---------- */
/* 1. Heading levels: an h2 now sits where an h3 used to sit straight under the page's h1 (a correct
      outline for screen readers and search engines). These rules make each h2 look exactly like the
      h3 (or h4) it replaced. */
.hero-panel h2 { color: var(--white); font-size: 1.35rem; }
.pkg-card h2 { margin: 0 0 8px; font-size: 1.35rem; }
.plain-card h2 { font-size: 1.35rem; }
.case-text h2 { font-size: 1.35rem; }
.team-card h2 { margin: 0 0 10px; font-size: 2.3rem; line-height: 1.1; color: var(--federal-blue); }
@media (max-width: 480px) { .team-card h2 { font-size: 2rem; } }
.site-footer h2 { color: var(--white); font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0.02em; margin-bottom: 14px; }
h3.sub-h { font-size: 1em; }
.ba-after h3 { color: var(--white); margin-bottom: 6px; }

/* 2. Safari draws its own small, squashed dropdown; draw it like the other form fields. */
select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2317222c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 9px;
}

/* 3. Bigger tap areas on phones. Padding grows the touch target and an equal negative margin keeps
      the page layout exactly the same. */
a.toggle-text { padding: 10px 0; margin: -10px 0; }
.review-card label.toggle-text { padding: 10px 0; margin: -16px 0 8px; }
.shot-nav { width: 34px; height: 34px; }
.shot-dots { gap: 0; bottom: 0; }
.shot-dots button { width: 24px; height: 24px; background: none; position: relative; }
.shot-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.shot-dots button.is-active { background: none; }
.shot-dots button.is-active::before { background: var(--white); }

/* Phone spacing (2026-10-02): tighter sections and hero stats on small screens */
@media (max-width: 640px) {
  section { padding: 40px 0; }
  .hero { padding: 32px 0 24px; }
  .hero-stat { flex: 1 1 130px; }
  .hero-stats { gap: 20px 16px; }
}

/* Breadcrumb trail under the menu on inner pages: Home › Page */
.breadcrumb-bar { background: var(--sky-tint); border-bottom: 1px solid var(--line); }
.breadcrumb { padding: 9px 0; font-size: 0.875rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.breadcrumb li { color: var(--ink); font-weight: 600; }
.breadcrumb li + li::before { content: "\203A"; color: var(--slate); font-weight: 400; padding: 0 10px; }
.breadcrumb a { color: var(--brick-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; display: inline-block; }
.breadcrumb a:hover { color: var(--federal-blue); }
.breadcrumb a:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; border-radius: 2px; }

/* Navigation link (go somewhere) -- visually different from an action button (do something).
   Filled button = action; blue text link with an arrow = navigation. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 2px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brick-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.link-arrow::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.link-arrow:hover { color: var(--brick); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; border-radius: 3px; }
.cta-band .link-arrow, .band-dark .link-arrow { color: #ffffff; }
.cta-band .link-arrow:hover, .band-dark .link-arrow:hover { color: var(--brass-light); }

/* Phone hours line under the call button (Home hero) and under the phone number (Contact page) */
.hours-note { margin: 14px 0 0; max-width: 56ch; font-size: 0.95rem; line-height: 1.5; color: var(--slate); }
.plain-card .hours-note { margin-top: 8px; }

/* Our Work: long card text folds behind a "Read more" button (works without JavaScript);
   with JavaScript, a click anywhere on the text box also opens it. */
.case-more { margin-top: 10px; }
.case-more-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 24px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1rem; color: var(--brick-dark); background: #e0eef9; border: 1.5px solid rgba(18, 104, 184, 0.45); border-radius: 999px; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.case-more-toggle::-webkit-details-marker { display: none; }
.case-more-toggle::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform 0.25s var(--ease), margin 0.25s var(--ease); }
.case-more[open] > .case-more-toggle::after { transform: rotate(-135deg); margin-top: 4px; }
.case-more-toggle:hover { background: var(--brick); border-color: var(--brick); color: #ffffff; transform: translateY(-1px); }
.case-more-toggle:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; }
.case-more-toggle .icon-open { display: none; }
.case-more[open] > .case-more-toggle .icon-closed { display: none; }
.case-more[open] > .case-more-toggle .icon-open { display: inline; }
.case-more-body { padding-top: 14px; }
.case-text:has(> .case-more:not([open])) { cursor: pointer; }

/* Free Quote buttons carry a phone icon and dial the business number. */
.btn-call { display: inline-flex; align-items: center; gap: 10px; }
.btn-call .call-ico, .nav-cta .call-ico { flex: none; }

/* Home-page tiles jump to their own card on Our Work; leave room for the sticky menu. */
.case-block { scroll-margin-top: 110px; }