/* ==========================================================================
   Quantum Private Wealth — design system
   Ported 1:1 from the approved Lovable build (src/index.css + tailwind.config.ts).
   Every token below matches the original HSL values exactly; do not "round" them.
   Apply the component classes via Elementor's Advanced → CSS Classes field.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Quantum brand palette, taken from the firm's logo:
       #1275BC  brand blue   (42% of the mark)  = hsl(205 83% 40%)
       #231F20  brand black  (54% of the mark)  = hsl(345  6% 13%)
     The original comp used gold-on-parchment. The accent is now the brand
     blue and the ink is the brand black; the paper tone is neutralised from
     warm cream to a cool off-white so it sits with the blue instead of
     fighting it. The `--gold*` names are kept as aliases so the existing
     component classes (.eyebrow, .btn-gold, .q-accent…) keep working.
     -------------------------------------------------------------------- */
  --brand: 205 83% 40%;        /* #1275BC — logo blue           */
  --brand-soft: 205 70% 68%;   /* #74B7E7 — for dark backgrounds */
  --brand-deep: 205 83% 33%;   /* #0E609A — for light backgrounds (AA) */

  --background: 210 17% 97%;
  --foreground: 345 6% 15%;

  --ink: 345 6% 13%;           /* #231F20 — logo black */
  --ink-soft: 345 5% 24%;
  --parchment: 210 17% 97%;
  --parchment-deep: 210 16% 93%;
  --bone: 210 14% 88%;

  /* Aliases — these now carry the brand blue, not gold. */
  --gold: var(--brand);
  --gold-soft: var(--brand-soft);
  --gold-deep: var(--brand-deep);

  --muted-foreground: 220 15% 35%;
  --border: 220 15% 85%;

  --radius: 0;

  /* Display face. Named --font-serif historically; it now carries a sans. */
  --font-serif: 'Montserrat', ui-sans-serif, 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --shadow-elev: 0 30px 80px -40px hsl(220 50% 7% / 0.35);

  /* Layout — mirrors the Tailwind container (center, 1.5rem padding, 1440 max) */
  --container: 1440px;
  --gutter: 1.5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  background: hsl(var(--parchment));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

::selection { background: hsl(var(--gold) / 0.35); color: hsl(var(--ink)); }

/* The original design uses --radius: 0 everywhere. Elementor and Hello ship
   rounded defaults on buttons/inputs/images, so we flatten them globally. */
body,
.elementor-button,
.elementor-widget-image img,
input, select, textarea, button {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */

.font-display,
h1, h2, h3, h4,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  font-weight: 400;
}

/* `<em class="not-italic">` in the original renders upright, not italic —
   it is used purely as a colour accent inside display headings. */
.q-accent { font-style: normal; color: hsl(var(--gold-deep)); }
.q-accent-soft { font-style: normal; color: hsl(var(--gold-soft)); }
.q-accent-light { font-style: normal; color: hsl(var(--gold-deep)); font-weight: 300; }

.eyebrow,
.eyebrow .elementor-heading-title,
.eyebrow p {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: hsl(var(--gold-deep));
  margin: 0;
}
.eyebrow-gold, .eyebrow-gold .elementor-heading-title { color: hsl(var(--gold)); }
.eyebrow-muted, .eyebrow-muted .elementor-heading-title { color: hsl(var(--parchment) / 0.6); }

.rule {
  height: 1px;
  width: 6rem;
  background: linear-gradient(90deg, hsl(var(--gold)) 0%, transparent 100%);
}

.gold-line { color: hsl(var(--gold)); }

/* Fluid display sizes — the original used clamp() inside Tailwind arbitrary
   values, which Elementor's typography controls cannot express.
   Elementor applies CSS Classes to the widget WRAPPER, so every size rule must
   also reach the inner .elementor-heading-title / editor markup, otherwise the
   heading keeps its own font-size and simply ignores the class. */
.q-h1,        .q-h1 .elementor-heading-title        { font-size: clamp(2.7rem, 6.3vw, 5.85rem);      line-height: 0.95; }
.q-h1-sm,     .q-h1-sm .elementor-heading-title     { font-size: clamp(2.475rem, 5.4vw, 4.95rem);   line-height: 0.98; }
.q-h1-services, .q-h1-services .elementor-heading-title { font-size: clamp(2.475rem, 5.85vw, 5.4rem); line-height: 0.95; }
.q-h1-detail, .q-h1-detail .elementor-heading-title { font-size: clamp(2.475rem, 6.3vw, 5.85rem);   line-height: 0.95; }
/* `text-3xl md:text-5xl` in the original — 48px is the ceiling, not 60px. */
.q-h2,        .q-h2 .elementor-heading-title        { font-size: clamp(1.6875rem, 3.24vw, 2.7rem);  line-height: 1.15; }
/* Home hero — `text-[clamp(2rem,4vw,5rem)] font-medium leading-[1.15]`. */
.q-h1-home,   .q-h1-home .elementor-heading-title   { font-size: clamp(1.8rem, 3.6vw, 4.5rem); line-height: 1.15; font-weight: 500; }
/* "Outcome Based Portfolio Management" — `text-3xl md:text-4xl leading-[1.2]`. */
.q-h2-serve,  .q-h2-serve .elementor-heading-title  { font-size: clamp(1.6875rem, 2.7vw, 2.025rem); line-height: 1.2; }

/* Hero column order: image first on mobile, second from the lg breakpoint. */
.q-order-1-lg-2 { order: 1; }
.q-order-2-lg-1 { order: 2; }
@media (min-width: 1024px) {
  .q-order-1-lg-2 { order: 2; }
  .q-order-2-lg-1 { order: 1; }
}
/* `text-5xl md:text-6xl` (60px ceiling) vs `text-5xl md:text-7xl` (72px). */
.q-h2-lg,     .q-h2-lg .elementor-heading-title     { font-size: clamp(2.25rem, 3.96vw, 3.375rem); line-height: 1.05; }
.q-h2-xl,     .q-h2-xl .elementor-heading-title     { font-size: clamp(2.25rem, 4.68vw, 4.05rem);  line-height: 1.05; }
.q-h4,        .q-h4 .elementor-heading-title        { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.25; }
.q-card-title, .q-card-title .elementor-heading-title { font-size: 1.25rem; line-height: 1.35; }
.q-h3,        .q-h3 .elementor-heading-title        { font-size: clamp(1.575rem, 2.7vw, 2.025rem);  line-height: 1.25; }

.font-display .elementor-heading-title,
.font-display p {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.q-lede,
.q-lede .elementor-widget-container,
.q-lede p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: hsl(var(--ink) / 0.7);
}
.q-lede-lg, .q-lede-lg p { font-size: 1.25rem; }
.q-lede-invert, .q-lede-invert p, .q-lede-invert .elementor-widget-container { color: hsl(var(--parchment) / 0.75); }
.q-lede strong { color: hsl(var(--ink)); font-weight: 600; }
.q-lede-invert strong { color: hsl(var(--parchment)); }

/* Constrain measure the way `max-w-xl` / `max-w-2xl` did. */
.q-measure,  .q-measure p  { max-width: 36rem; }
.q-measure-lg, .q-measure-lg p { max-width: 42rem; }

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.btn-ink,
.btn-ghost,
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 0;
}

.btn-ink { background: hsl(var(--ink)); color: hsl(var(--parchment)); border: 0; }
.btn-ink:hover, .btn-ink:focus { background: hsl(var(--gold-deep)); color: hsl(var(--parchment)); }

.btn-ghost { border: 1px solid hsl(var(--ink) / 0.2); color: hsl(var(--ink)); background: transparent; }
.btn-ghost:hover, .btn-ghost:focus { border-color: hsl(var(--gold)); color: hsl(var(--gold-deep)); }

/* The gold CTA used on the dark sections (Home CTA, About, Services, detail). */
.btn-gold {
  background: hsl(var(--gold));
  color: hsl(var(--ink));
  padding: 1.25rem 2rem;
  font-size: 12px;
  letter-spacing: 0.25em;
}
.btn-gold:hover, .btn-gold:focus { background: hsl(var(--parchment)); color: hsl(var(--ink)); }

/* Outlined CTA on dark backgrounds (service detail "next discipline"). */
.btn-outline-invert {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 1px solid hsl(var(--parchment) / 0.3);
  color: hsl(var(--parchment));
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-outline-invert:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold-soft)); }

/* Animated-bar link. The bar grows from 32px to 56px on hover. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: hsl(var(--ink));
  transition: color 0.35s ease;
}
.arrow-link .bar,
.arrow-link::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: hsl(var(--ink));
  transition: width 0.35s ease, background 0.35s ease;
}
.arrow-link:hover { color: hsl(var(--gold-deep)); }
.arrow-link:hover::after,
.arrow-link:hover .bar { width: 56px; background: hsl(var(--gold-deep)); }

.arrow-link-invert { color: hsl(var(--parchment)); }
.arrow-link-invert::after { background: hsl(var(--parchment)); }
.arrow-link-invert:hover { color: hsl(var(--gold-soft)); }
.arrow-link-invert:hover::after { background: hsl(var(--gold-soft)); }

/* Underlined footer CTA. */
.q-underline-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--parchment));
  border-bottom: 1px solid hsl(var(--gold));
  padding-bottom: 0.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
}
.q-underline-cta:hover { color: hsl(var(--gold)); }

/* --------------------------------------------------------------------------
   Scroll reveal (replaces the React IntersectionObserver in Layout.tsx)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Entrance animations from tailwind.config.ts keyframes. */
@keyframes q-fade-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: none; } }
@keyframes q-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes q-scale-in { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } }

.animate-fade-up { animation: q-fade-up 0.9s cubic-bezier(.2,.7,.2,1) both; }
.animate-fade-in { animation: q-fade-in 1s ease both; }
.animate-scale-in { animation: q-scale-in 0.8s ease both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-fade-up, .animate-fade-in, .animate-scale-in { animation: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Marquee (Home hero)
   -------------------------------------------------------------------------- */

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.q-marquee {
  border-top: 1px solid hsl(var(--ink) / 0.1);
  border-bottom: 1px solid hsl(var(--ink) / 0.1);
  padding: 1.25rem 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-track span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: hsl(var(--ink) / 0.7);
}
@media (min-width: 768px) { .marquee-track span { font-size: 1.875rem; } }

/* --------------------------------------------------------------------------
   Grain overlay
   -------------------------------------------------------------------------- */

.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(hsl(var(--ink) / 0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.35;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Hairline grids
   The original collapses adjacent 1px borders using border-top/left on the
   wrapper and border-bottom/right on each cell. Elementor cannot express this
   with widget controls, so it is a class applied to the grid container.
   -------------------------------------------------------------------------- */

.q-hairline {
  display: grid;
  border-top: 1px solid hsl(var(--ink) / 0.15);
  border-left: 1px solid hsl(var(--ink) / 0.15);
}
.q-hairline > * {
  border-bottom: 1px solid hsl(var(--ink) / 0.15);
  border-right: 1px solid hsl(var(--ink) / 0.15);
  padding: 2.5rem;
  transition: background-color 0.3s ease;
}
.q-hairline > *:hover { background: hsl(var(--parchment-deep)); }

.q-hairline-2 { grid-template-columns: 1fr; }
.q-hairline-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .q-hairline-2 { grid-template-columns: repeat(2, 1fr); }
  .q-hairline-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .q-hairline-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Divided stack (Home three pillars, About timeline, principles lists). */
.q-divided {
  border-top: 1px solid hsl(var(--ink) / 0.15);
  border-bottom: 1px solid hsl(var(--ink) / 0.15);
}
.q-divided > * + * { border-top: 1px solid hsl(var(--ink) / 0.15); }
.q-divided-invert {
  border-color: hsl(var(--parchment) / 0.15);
}
.q-divided-invert > * + * { border-top-color: hsl(var(--parchment) / 0.15); }

/* --------------------------------------------------------------------------
   Home — overlapping imagery duo
   Negative offsets that Elementor's positioning controls handle badly at
   breakpoints; expressed here so the two crops nest exactly as designed.
   -------------------------------------------------------------------------- */

.q-overlap { position: relative; }
.q-overlap__main { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; display: block; }
.q-overlap__inset {
  position: absolute;
  bottom: -2.5rem;
  right: -1.5rem;
  width: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 8px solid hsl(var(--parchment));
  display: none;
}
.q-overlap__inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) { .q-overlap__inset { display: block; } }
@media (min-width: 1024px) { .q-overlap__inset { right: -4rem; } }

/* Hero card + rotated rail. */
.q-hero-media { position: relative; }
.q-hero-media__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.q-hero-media__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-hero-media__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--ink) / 0.4), transparent 50%);
}
.q-hero-card {
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  max-width: 280px;
  background: hsl(var(--parchment));
  border: 1px solid hsl(var(--ink) / 0.15);
  padding: 1.5rem 1.75rem;
  display: none;
}
@media (min-width: 768px) { .q-hero-card { display: block; } }
.q-hero-rail {
  position: absolute;
  top: -1.5rem;
  right: 0;
  transform: rotate(90deg);
  transform-origin: right;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.5);
  white-space: nowrap;
  display: none;
}
@media (min-width: 1024px) { .q-hero-rail { display: block; } }

/* --------------------------------------------------------------------------
   Services — giant sticky pillar numeral
   -------------------------------------------------------------------------- */

.q-pillar-sticky { position: static; }
@media (min-width: 1024px) { .q-pillar-sticky { position: sticky; top: 8rem; } }

.q-pillar-num,
.q-pillar-num .elementor-heading-title {
  font-family: var(--font-serif);
  font-size: 9rem;
  line-height: 1;
  color: hsl(var(--gold) / 0.3);
  margin-left: -0.5rem;
}

/* Included-items list. */
.q-included { list-style: none; margin: 0; padding: 0; border-top: 1px solid hsl(var(--ink) / 0.15); }
.q-included > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid hsl(var(--ink) / 0.15);
}
.q-included > li > span:first-child { font-family: var(--font-serif); font-size: 1.25rem; color: hsl(var(--ink)); }
.q-included > li > span:last-child {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.4);
  transition: color 0.3s ease;
}
.q-included > li:hover > span:last-child { color: hsl(var(--gold-deep)); }

/* Same list, built with Elementor's Icon List widget so it is editable in the
   visual editor. Elementor's own widget stylesheet loads after this file, so
   these selectors carry extra weight to win on specificity rather than
   !important. The right-hand "Included" label is generated, since it is the
   same on every row. */
.q-included.elementor-widget .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid hsl(var(--ink) / 0.15);
}
.q-included.elementor-widget .elementor-icon-list-items .elementor-icon-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  margin: 0;
  border-bottom: 1px solid hsl(var(--ink) / 0.15);
  font-size: inherit;
}
.q-included.elementor-widget .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: hsl(var(--ink));
  padding: 0;
}
.q-included.elementor-widget .elementor-icon-list-items .elementor-icon-list-item::after {
  /* Elementor uses this same pseudo-element, absolutely positioned, to draw the
     divider between items. Put it back in flow so it can sit in the row, and
     drop the border it carried — the item already has one. */
  position: static;
  width: auto;
  height: auto;
  border: 0;
  margin: 0;
  content: "Included";
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.4);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.q-included.elementor-widget .elementor-icon-list-items .elementor-icon-list-item:hover::after {
  color: hsl(var(--gold-deep));
}

/* Bulleted capability lists. */
.q-bullets { list-style: none; margin: 0; padding: 0; }
.q-bullets li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: hsl(var(--ink) / 0.75);
  line-height: 1.4;
  margin-bottom: 0.625rem;
}
.q-bullets li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--gold-deep));
  transform: translateY(-2px);
}

/* Icon square used on service + capability cards. */
.q-icon-box {
  width: 3rem;
  height: 3rem;
  border: 1px solid hsl(var(--ink) / 0.2);
  display: grid;
  place-items: center;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.q-icon-box svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.25; }
*:hover > * > .q-icon-box,
.q-hairline > *:hover .q-icon-box { border-color: hsl(var(--gold)); color: hsl(var(--gold-deep)); }

.q-tag {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.4);
}

/* --------------------------------------------------------------------------
   Stats (Home)
   -------------------------------------------------------------------------- */

.q-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.q-stat { border-top: 1px solid hsl(var(--ink) / 0.15); padding-top: 1rem; }
.q-stat__v { font-family: var(--font-serif); font-size: 2.025rem; color: hsl(var(--ink)); line-height: 1.1; }
.q-stat__l {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.55);
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Dark sections
   -------------------------------------------------------------------------- */

.q-dark { background: hsl(var(--ink)); color: hsl(var(--parchment)); }
.q-dark h1, .q-dark h2, .q-dark h3, .q-dark h4 { color: hsl(var(--parchment)); }
.q-dark a { color: hsl(var(--parchment)); }
.q-dark .q-tag { color: hsl(var(--parchment) / 0.4); }

.q-parchment-deep { background: hsl(var(--parchment-deep)); }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.q-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.q-header.is-scrolled {
  background: hsl(var(--parchment) / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: hsl(var(--ink) / 0.1);
}

.q-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Slim utility strip above the main bar. The main row is full at 1440px, so
   Form CRS and Client Login live here. It stays solid ink at all times while
   the bar below remains transparent until scrolled. */
.q-topbar { background: hsl(var(--ink)); }
.q-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;
  height: 2.25rem;
}
.q-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--parchment) / 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.q-topbar__link:hover { color: hsl(var(--parchment)); }
.q-topbar__link--login { color: hsl(var(--brand-soft)); }
.q-topbar__link--login:hover { color: hsl(var(--parchment)); }
.q-topbar__link svg { width: 0.75rem; height: 0.75rem; }
@media (max-width: 480px) {
  .q-topbar__inner { justify-content: center; gap: 1.25rem; }
  .q-topbar__link { letter-spacing: 0.16em; }
}

.q-header__bar { display: flex; align-items: center; justify-content: space-between; height: 5rem; }

.q-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.q-brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid hsl(var(--ink) / 0.3);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: hsl(var(--ink));
  transition: border-color 0.3s ease;
  flex: 0 0 auto;
}
.q-brand:hover .q-brand__mark { border-color: hsl(var(--gold)); }
/* The real logo replaces the lettermark entirely. It is a wide 2.8:1 lockup,
   so it is sized by height and allowed to run to its natural width. */
.q-brand__logo { display: block; height: 3.25rem; width: auto; }
@media (max-width: 480px) { .q-brand__logo { height: 2.5rem; } }
.q-brand__text { line-height: 1.15; }
.q-brand__name { display: block; font-family: var(--font-serif); font-size: 17px; color: hsl(var(--ink)); letter-spacing: -0.03em; }
.q-brand__sub { display: block; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(var(--ink) / 0.6); }

.q-nav { display: none; align-items: center; gap: 2.5rem; }
.q-nav a {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}
.q-nav a:hover { color: hsl(var(--ink)); }
.q-nav .current-menu-item > a,
.q-nav .current_page_item > a,
.q-nav .current-menu-parent > a,
.q-nav .current-menu-ancestor > a { color: hsl(var(--gold-deep)); }
.q-nav ul { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }

.q-header__actions { display: none; align-items: center; gap: 1rem; }
.q-header__tel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}
.q-header__tel:hover { color: hsl(var(--gold-deep)); }
.q-header__tel svg { width: 0.875rem; height: 0.875rem; }

.q-burger {
  display: inline-flex;
  padding: 0.5rem;
  color: hsl(var(--ink));
  background: none;
  border: 0;
  cursor: pointer;
}
.q-burger svg { width: 1.5rem; height: 1.5rem; }
.q-burger .icon-close { display: none; }
.q-burger[aria-expanded="true"] .icon-open { display: none; }
.q-burger[aria-expanded="true"] .icon-close { display: block; }

@media (min-width: 1024px) {
  .q-nav { display: flex; }
  .q-header__actions { display: flex; }
  .q-burger { display: none; }
}

.q-mobile-nav {
  display: none;
  background: hsl(var(--parchment));
  border-top: 1px solid hsl(var(--ink) / 0.1);
  animation: q-fade-in 1s ease both;
}
.q-mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .q-mobile-nav.is-open { display: none; } }
.q-mobile-nav__inner { padding: 2rem var(--gutter); display: flex; flex-direction: column; gap: 1.5rem; }
.q-mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.q-mobile-nav a { font-family: var(--font-serif); font-size: 1.6875rem; color: hsl(var(--ink)); text-decoration: none; }
.q-mobile-nav .btn-ink { width: fit-content; margin-top: 1rem; }

/* Pages start beneath the fixed header; Elementor sections supply their own
   top padding, matching the original pt-32/pt-40 hero offsets. */
body { padding-top: 0; }

/* Hello Elementor caps `.site-main` at 1140px via
   `body:not([class*=elementor-page-]) .site-main`. That selector skips Elementor
   pages but catches single.php and 404.php, insetting their full-bleed sections.
   Matching its specificity (0,2,2 vs 0,2,1) rather than reaching for !important. */
body:not([class*="elementor-page-"]) main.site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.q-footer { background: hsl(var(--ink)); color: hsl(var(--parchment)); position: relative; overflow: hidden; }
.q-footer__grid { display: grid; gap: 3rem; padding-block: 6rem; }
@media (min-width: 768px) { .q-footer__grid { grid-template-columns: repeat(12, 1fr); } }
.q-footer__lead { grid-column: span 5; }
.q-footer__nav { grid-column: 8 / span 3; }
.q-footer__contact { grid-column: span 2; }
@media (max-width: 767px) {
  .q-footer__lead, .q-footer__nav, .q-footer__contact { grid-column: auto; }
}
/* Elementor's global kit sets a dark colour on every h1–h3; the footer sits on
   ink, so it must win that back or the first line renders invisible. */
.q-footer h1, .q-footer h2, .q-footer h3, .q-footer h4 { color: hsl(var(--parchment)); }
.q-footer h3 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin-top: 1.5rem; }
.q-footer ul { list-style: none; margin: 0; padding: 0; }
.q-footer__nav li + li { margin-top: 0.75rem; }
.q-footer__nav a { color: hsl(var(--parchment) / 0.8); text-decoration: none; transition: color 0.3s ease; }
.q-footer__nav a:hover { color: hsl(var(--gold)); }
.q-footer__tel { font-family: var(--font-serif); font-size: 1.35rem; color: hsl(var(--parchment)); text-decoration: none; transition: color 0.3s ease; }
.q-footer__tel:hover { color: hsl(var(--gold)); }
.q-footer__note { color: hsl(var(--parchment) / 0.6); font-size: 0.875rem; margin-top: 1rem; }
/* Documents section on the About page: three cards, native Elementor widgets. */
.q-docs-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .q-docs-grid { grid-template-columns: repeat(3, 1fr); } }
.q-doc-card {
  background: hsl(var(--parchment-deep));
  border: 1px solid hsl(var(--ink) / 0.08);
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem;
}
.q-doc-card .elementor-heading-title { font-family: var(--font-serif); font-size: 1.125rem; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--ink)); margin: 0; }
.q-doc-card__note, .q-doc-card__note p { font-size: 0.875rem; color: hsl(var(--ink) / 0.6); margin: 0; }
.q-doc-card .elementor-button {
  background: transparent; color: hsl(var(--ink)); border: 1px solid hsl(var(--ink) / 0.35); border-radius: 0;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 0.9rem 1.6rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.q-doc-card .elementor-button:hover { background: hsl(var(--ink)); color: hsl(var(--parchment)); border-color: hsl(var(--ink)); }
/* Regulatory documents row in the footer. */
.q-footer__docs { border-top: 1px solid hsl(var(--parchment) / 0.12); }
.q-footer__docs-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 3rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.q-footer__docs-inner .eyebrow { margin: 0; }
.q-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }
.q-docs a {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  color: hsl(var(--parchment) / 0.85); text-decoration: none;
  font-size: 0.875rem; letter-spacing: 0.02em; transition: color 0.3s ease;
}
.q-docs a:hover { color: hsl(var(--parchment)); }
.q-docs__ext {
  font-size: 0.5625rem; letter-spacing: 0.18em; padding: 0.15rem 0.4rem;
  border: 1px solid hsl(var(--parchment) / 0.3); color: hsl(var(--parchment) / 0.55);
}
.q-footer__bar { border-top: 1px solid hsl(var(--parchment) / 0.1); }
.q-footer__bar-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: 0.75rem;
  color: hsl(var(--parchment) / 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (min-width: 768px) { .q-footer__bar-inner { flex-direction: row; } }

/* --------------------------------------------------------------------------
   Contact form (Contact Form 7, styled to the original underline inputs)
   -------------------------------------------------------------------------- */

.q-form .q-field { display: block; margin-bottom: 2.5rem; }
.q-form .q-field__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.55);
}
.q-form input[type="text"],
.q-form input[type="email"],
.q-form input[type="tel"],
.q-form select,
.q-form textarea {
  margin-top: 0.75rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid hsl(var(--ink) / 0.3);
  padding: 0.75rem 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: hsl(var(--ink));
  transition: border-color 0.3s ease;
  border-radius: 0;
}
.q-form input:focus,
.q-form select:focus,
.q-form textarea:focus {
  outline: none;
  border-bottom-color: hsl(var(--gold-deep));
  box-shadow: none;
}
.q-form textarea { resize: none; }
.q-form select { appearance: none; -webkit-appearance: none; background-image: none; }

.q-form__row { display: grid; gap: 0 2rem; }
@media (min-width: 768px) { .q-form__row { grid-template-columns: repeat(2, 1fr); } }
.q-form .q-field--full { grid-column: 1 / -1; }

.q-form .wpcf7-submit {
  margin-top: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  background: hsl(var(--ink));
  color: hsl(var(--parchment));
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  width: auto;
}
.q-form .wpcf7-submit:hover { background: hsl(var(--gold-deep)); color: hsl(var(--parchment)); }
.q-form .wpcf7-spinner { margin-left: 1rem; }
.q-form .wpcf7-not-valid-tip {
  color: hsl(0 70% 45%);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.wpcf7 form .wpcf7-response-output {
  border: 0;
  border-left: 2px solid hsl(var(--gold));
  margin: 2rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: hsl(var(--ink) / 0.75);
}

.q-form__disclaimer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.45);
}

/* Contact sidebar. */
.q-contact-aside { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 1024px) {
  .q-contact-aside { border-left: 1px solid hsl(var(--ink) / 0.15); padding-left: 3rem; }
}
.q-contact-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  color: hsl(var(--ink));
  text-decoration: none;
  transition: color 0.3s ease;
  word-break: break-word;
}
.q-contact-line:hover { color: hsl(var(--gold-deep)); }
.q-contact-line--lg { font-size: 2.25rem; }
.q-contact-line--md { font-size: 1.5rem; }
.q-contact-line svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.q-trust p:not(.eyebrow) { display: flex; gap: 0.75rem; color: hsl(var(--ink) / 0.75); line-height: 1.7; margin: 0 0 1rem; }
.q-trust p:not(.eyebrow)::before { content: "—"; color: hsl(var(--gold-deep)); }

/* --------------------------------------------------------------------------
   Insights
   -------------------------------------------------------------------------- */

.q-featured { display: grid; gap: 2.5rem; border-top: 1px solid hsl(var(--ink) / 0.15); border-bottom: 1px solid hsl(var(--ink) / 0.15); padding-block: 4rem; }
@media (min-width: 1024px) { .q-featured { grid-template-columns: 3fr 7fr 2fr; } }
.q-square-arrow {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid hsl(var(--ink) / 0.3);
  display: grid;
  place-items: center;
  color: hsl(var(--ink));
  transition: border-color 0.3s ease, color 0.3s ease;
}
.q-featured:hover .q-square-arrow { border-color: hsl(var(--gold)); color: hsl(var(--gold-deep)); }

.q-featured__date { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: hsl(var(--ink) / 0.5); margin-top: 1.5rem; }
.q-featured__title { font-size: clamp(2.025rem, 3.96vw, 3.375rem); line-height: 1.05; color: hsl(var(--ink)); margin: 0; }
.q-featured__title a { color: inherit; text-decoration: none; }
.q-featured__arrow { display: flex; align-items: flex-end; justify-content: flex-end; }
.q-square-arrow svg { width: 1.5rem; height: 1.5rem; }

/* Archive grid + filters. */
.q-archive__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem; }
.q-archive__title { font-size: 1.6875rem; color: hsl(var(--ink)); margin: 0; }
.q-archive__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* Topic disclosure. A <details>, so it opens and closes without JavaScript. */
.q-topics { position: relative; }
.q-topics__toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 1.1rem;
  border: 1px solid hsl(var(--ink) / 0.18);
  transition: border-color 0.3s ease;
}
.q-topics__toggle::-webkit-details-marker { display: none; }
.q-topics__toggle:hover { border-color: hsl(var(--ink) / 0.4); }
.q-topics[open] .q-topics__toggle { border-color: hsl(var(--brand)); }
.q-topics__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.45);
}
.q-topics__current {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: hsl(var(--ink));
  letter-spacing: -0.01em;
}
.q-topics__chevron {
  width: 0.5rem; height: 0.5rem;
  border-right: 1px solid hsl(var(--ink) / 0.55);
  border-bottom: 1px solid hsl(var(--ink) / 0.55);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s ease;
}
.q-topics[open] .q-topics__chevron { transform: rotate(-135deg) translateY(-2px); }
.q-topics__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  /* The control sits at the right of the archive head, so hang the panel from
     its right edge — anchoring left pushes it past the viewport. */
  right: 0;
  left: auto;
  min-width: 20rem;
  max-height: 60vh;
  overflow-y: auto;
  background: hsl(var(--parchment));
  border: 1px solid hsl(var(--ink) / 0.15);
  box-shadow: 0 24px 48px -24px hsl(var(--ink) / 0.35);
  padding: 0.4rem;
}
.q-topics__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.65rem 0.85rem;
  text-decoration: none;
  font-size: 0.875rem;
  color: hsl(var(--ink) / 0.75);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.q-topics__item:hover { background: hsl(var(--ink) / 0.05); color: hsl(var(--ink)); }
.q-topics__item.is-active { color: hsl(var(--brand-deep)); font-weight: 600; }
.q-topics__n {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: hsl(var(--ink) / 0.4);
  font-variant-numeric: tabular-nums;
}
.q-topics__clear {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.5);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.q-topics__clear:hover { color: hsl(var(--ink)); }
@media (max-width: 600px) {
  .q-topics__panel { min-width: min(20rem, calc(100vw - 3rem)); }
}

/* Archive pagination — 161 articles, so the grid is paged server-side. */
.q-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid hsl(var(--ink) / 0.15);
}
.q-pager__step {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: hsl(var(--ink));
  text-decoration: none;
  border: 1px solid hsl(var(--ink) / 0.2);
  padding: 0.7rem 1.1rem;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.q-pager__step:hover { border-color: hsl(var(--brand)); color: hsl(var(--brand-deep)); }
.q-pager__count {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.5);
  font-variant-numeric: tabular-nums;
  margin-inline: auto;
}

.q-archive__grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid hsl(var(--ink) / 0.15); }
.q-archive__grid > * { padding: 2.5rem 0; border-bottom: 1px solid hsl(var(--ink) / 0.15); transition: background-color 0.3s ease; }
@media (min-width: 768px) {
  .q-archive__grid { grid-template-columns: repeat(2, 1fr); }
  .q-archive__grid > * { padding: 2.5rem; }
  .q-archive__grid > *:nth-child(odd) { border-right: 1px solid hsl(var(--ink) / 0.15); }
}
.q-archive__grid > *:hover { background: hsl(var(--parchment-deep)); }
.q-post-card[hidden] { display: none; }

.q-post-card__title { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.16vw, 1.6875rem); line-height: 1.35; color: hsl(var(--ink)); min-height: 5rem; margin: 0; }
.q-post-card__meta {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.55);
}
.q-post-card a { text-decoration: none; color: inherit; }

/* --------------------------------------------------------------------------
   Elementor integration
   -------------------------------------------------------------------------- */

/* Match the Tailwind container exactly inside boxed Elementor containers. */
.e-con.e-con-boxed > .e-con-inner,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container);
  padding-inline: var(--gutter);
}

/* Elementor injects its own heading margins; the original relies on explicit
   spacing utilities, so we zero the defaults and space via container gaps. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Images in the design are never rounded and always cover their frame. */
.q-cover img, img.q-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-ratio-4-5 { aspect-ratio: 4 / 5; }
.q-ratio-5-6 { aspect-ratio: 5 / 6; }
.q-ratio-5-4 { aspect-ratio: 5 / 4; }
.q-ratio-1-1 { aspect-ratio: 1 / 1; }

/* An Elementor image widget nests the <img> three wrappers deep. `.q-fill` on
   the surrounding container makes every level stretch so object-fit can crop
   to the frame's aspect ratio, exactly as the React <img> did. */
.q-fill,
.q-fill > .elementor-widget-image,
.q-fill .elementor-widget-container,
.q-fill figure,
.q-fill .elementor-image { height: 100%; }
.q-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Elementor button bridge
   The button widget renders <a class="elementor-button"> inside a wrapper.
   CSS Classes land on the wrapper, so the design's button styles are mapped
   onto the inner anchor here. This keeps the widget's native text/link fields
   editable in the UI instead of forcing raw-HTML widgets.
   -------------------------------------------------------------------------- */

.q-btn-ink .elementor-button,
.q-btn-gold .elementor-button,
.q-btn-ghost .elementor-button,
.q-btn-outline .elementor-button,
.q-arrow .elementor-button {
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  fill: currentColor;
}
.q-btn-ink .elementor-button {
  background: hsl(var(--ink));
  color: hsl(var(--parchment));
  padding: 1rem 1.75rem;
  font-size: 13px;
  letter-spacing: 0.2em;
}
.q-btn-ink .elementor-button:hover { background: hsl(var(--gold-deep)); color: hsl(var(--parchment)); }

.q-btn-gold .elementor-button {
  background: hsl(var(--gold));
  color: hsl(var(--ink));
  padding: 1.25rem 2rem;
  font-size: 12px;
  letter-spacing: 0.25em;
}
.q-btn-gold .elementor-button:hover { background: hsl(var(--parchment)); color: hsl(var(--ink)); }

.q-btn-ghost .elementor-button {
  background: transparent;
  border: 1px solid hsl(var(--ink) / 0.2);
  color: hsl(var(--ink));
  padding: 1rem 1.75rem;
  font-size: 13px;
  letter-spacing: 0.2em;
}
.q-btn-ghost .elementor-button:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold-deep)); background: transparent; }

.q-btn-outline .elementor-button {
  background: transparent;
  border: 1px solid hsl(var(--parchment) / 0.3);
  color: hsl(var(--parchment));
  padding: 1rem 2rem;
  font-size: 12px;
  letter-spacing: 0.25em;
}
.q-btn-outline .elementor-button:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold-soft)); background: transparent; }

/* Animated-bar text link as a button widget. */
.q-arrow .elementor-button {
  background: transparent;
  color: hsl(var(--ink));
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.25em;
}
.q-arrow .elementor-button::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: hsl(var(--ink));
  transition: width 0.35s ease, background 0.35s ease;
}
.q-arrow .elementor-button:hover { color: hsl(var(--gold-deep)); background: transparent; }
.q-arrow .elementor-button:hover::after { width: 56px; background: hsl(var(--gold-deep)); }

.q-arrow-invert .elementor-button { color: hsl(var(--parchment)); }
.q-arrow-invert .elementor-button::after { background: hsl(var(--parchment)); }
.q-arrow-invert .elementor-button:hover { color: hsl(var(--gold-soft)); }
.q-arrow-invert .elementor-button:hover::after { background: hsl(var(--gold-soft)); }

/* --------------------------------------------------------------------------
   Home — three disciplines rows (dark, divided)
   -------------------------------------------------------------------------- */

/* Editorial grid columns. Widths come from Elementor as calc() values that
   already subtract the flex gap; this just stops long words from forcing
   a column wider than its computed basis. */
.q-col { min-width: 0; }

/* About — timeline rows. */
.q-timeline-row { padding: 2.5rem 0; }
.q-year { font-family: var(--font-serif); font-size: 1.6875rem; color: hsl(var(--gold-deep)); }

.q-disc-row { transition: background-color 0.3s ease; padding: 3.5rem 0.5rem; }
.q-disc-row:hover { background: hsl(var(--parchment) / 0.03); }
.q-disc-num { font-family: var(--font-serif); font-style: italic; font-size: 1.6875rem; color: hsl(var(--gold)); }
.q-square-link {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid hsl(var(--parchment) / 0.3);
  display: grid;
  place-items: center;
  color: hsl(var(--parchment));
  transition: border-color 0.3s ease, color 0.3s ease;
}
.q-disc-row:hover .q-square-link { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
.q-square-link svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   Home — insights teaser grid (3 up, vertical hairlines between)
   -------------------------------------------------------------------------- */

.q-insights-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid hsl(var(--ink) / 0.15); }
.q-insights-grid > * {
  padding: 2.5rem 0;
  border-bottom: 1px solid hsl(var(--ink) / 0.15);
  transition: background-color 0.3s ease;
}
@media (min-width: 768px) {
  .q-insights-grid { grid-template-columns: repeat(3, 1fr); }
  .q-insights-grid > * { padding: 2.5rem 2rem; border-bottom: 0; border-right: 1px solid hsl(var(--ink) / 0.15); }
  .q-insights-grid > *:first-child { padding-left: 0; }
  .q-insights-grid > *:last-child { border-right: 0; }
}
.q-insights-grid > *:hover { background: hsl(var(--parchment-deep)); }

/* --------------------------------------------------------------------------
   Quotes
   -------------------------------------------------------------------------- */

.q-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: hsl(var(--ink));
  margin: 0;
  border: 0;
  padding: 0;
  font-style: normal;
}
.q-quote-italic { font-style: italic; font-size: 1.35rem; }

.q-byline { display: flex; align-items: center; gap: 1rem; }
.q-byline::before { content: ""; width: 2.5rem; height: 1px; background: hsl(var(--gold)); flex: 0 0 auto; }
.q-byline__name { font-family: var(--font-serif); font-size: 1.125rem; color: hsl(var(--ink)); }
.q-byline__role { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: hsl(var(--ink) / 0.6); }

/* ==========================================================================
   About — The Quantum Team + Partner Firms
   These two bands use a lighter treatment (white cards on off-white) than the
   parchment/ink system, but draw on the same brand black + brand blue.
   ========================================================================== */

:root {
  --q-navy: #231F20;      /* brand black */
  --q-gold-alt: #1275BC;  /* brand blue  */
  --q-offwhite: #F7F8F9;
}

.q-team-head { background: var(--q-navy); padding: 6rem 0; text-align: center; }
.q-team-head__inner { max-width: 56rem; margin-inline: auto; padding-inline: 1rem; }
.q-team-head__h {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.025rem, 4.5vw, 3.375rem);
  color: #fff !important;
  letter-spacing: 0.025em;
  margin: 0;
}
.q-team-head__h .q-accent { color: hsl(var(--gold-deep)); font-style: normal; }

.q-team { background: var(--q-offwhite); padding: 4rem 0 6rem; }
@media (min-width: 640px) { .q-team { padding-top: 6rem; } }
.q-team__grid {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 3rem;
}
@media (min-width: 640px)  { .q-team__grid { grid-template-columns: repeat(2, 1fr); padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .q-team__grid { grid-template-columns: repeat(3, 1fr); padding-inline: 2rem; } }

.q-person {
  background: #fff;
  border: 1px solid rgba(229, 231, 235, 0.6);
  padding: 1.25rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.3s ease;
}
.q-person:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.q-person__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: #f9fafb;
  margin-bottom: 1.25rem;
  position: relative;
}
.q-person__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(15%);
  transition: filter 0.5s ease;
}
.q-person:hover .q-person__photo img { filter: grayscale(0); }
.q-person__badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  font-size: 10px; font-weight: 700;
  background: var(--q-gold-alt); color: #fff;
  padding: 0.125rem 0.5rem;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.q-person__id { text-align: center; }
.q-person__name { font-family: var(--font-serif); font-weight: 700; font-size: 1.125rem; color: var(--q-navy); letter-spacing: 0.025em; margin: 0; }
.q-person__role { font-size: 0.75rem; color: var(--q-gold-alt); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.25rem 0 0; }
.q-person__foot {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.75rem;
}
.q-person__tel { color: var(--q-navy); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 2px; transition: background-color 0.3s ease; }
.q-person__tel:hover { background: #e5e7eb; }
.q-person__more {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem; font-weight: 600;
  color: var(--q-gold-alt);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.q-person__more:hover { text-decoration: underline; }

/* Bio modal. */
.q-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; }
.q-modal[hidden] { display: none; }
.q-modal__scrim { position: fixed; inset: 0; background: rgb(2 6 23 / 0.7); backdrop-filter: blur(4px); }
.q-modal__panel {
  background: #fff; width: 100%; max-width: 48rem;
  border-radius: 2px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  position: relative; z-index: 10;
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #f3f4f6;
}
.q-modal__head { padding: 1.5rem; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #f8fafc; }
.q-modal__name { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; color: var(--q-navy); margin: 0; }
.q-modal__role { font-size: 0.75rem; color: var(--q-gold-alt); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.125rem 0 0; }
.q-modal__close { background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--q-navy); padding: 0 0.25rem; }
.q-modal__body { padding: 2rem 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .q-modal__body { flex-direction: row; padding: 2rem; } }
.q-modal__photo { width: 10rem; flex: 0 0 auto; margin-inline: auto; }
@media (min-width: 768px) { .q-modal__photo { margin-inline: 0; } }
.q-modal__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid #e5e7eb; border-radius: 2px; display: block; }
.q-modal__prose { flex: 1 1 auto; }
.q-modal__prose p { font-size: 0.9375rem; line-height: 1.7; color: #374151; font-weight: 300; margin: 0 0 1rem; }
.q-modal__tel { display: inline-block; margin-top: 0.5rem; color: var(--q-navy); font-size: 0.875rem; text-decoration: none; }
body.q-modal-open { overflow: hidden; }

/* Partner Firms. */
.q-partners { background: #fff; padding: 6rem 0; }
.q-partners__inner { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .q-partners__inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .q-partners__inner { padding-inline: 2rem; } }
.q-partners__head { text-align: center; max-width: 48rem; margin: 0 auto 4rem; }
.q-partners__h { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.025rem, 3.6vw, 2.7rem); color: var(--q-navy); margin: 0 0 1rem; }
.q-partners__lede { color: #4b5563; font-size: 0.9375rem; line-height: 1.7; max-width: 42rem; margin-inline: auto; font-weight: 300; }
.q-partners__band { background: rgb(211 201 209 / 0.5); padding: 1.5rem; border-radius: 2px; }
@media (min-width: 640px) { .q-partners__band { padding: 3rem; } }
@media (min-width: 768px) { .q-partners__band { padding: 4rem; } }
.q-partners__grid {
  display: flex; gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.q-partners__grid::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .q-partners__grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.q-firm { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: flex; flex-direction: column; }
@media (min-width: 640px)  { .q-firm { flex-basis: 50%; } }
@media (min-width: 1024px) { .q-firm { flex-basis: auto; } }
.q-firm__photo { width: 100%; aspect-ratio: 4 / 5; background: #f3f4f6; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.q-firm__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-firm__card {
  background: #fff; padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  width: 90%; margin: -5rem auto 0;
  position: relative; z-index: 2;
  flex-grow: 1; min-height: 15rem;
}
@media (min-width: 1024px) { .q-firm__card { min-height: 13.75rem; } }
.q-firm__h {
  font-family: var(--font-serif); font-size: 1.0625rem; color: var(--q-navy);
  letter-spacing: 0.025em; margin: 0 0 0.75rem;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: #9ca3af;
}
.q-firm__p { font-family: var(--font-serif); font-size: 0.8125rem; line-height: 1.7; color: #374151; font-weight: 300; margin: 0; }

/* --------------------------------------------------------------------------
   Home — expandable discipline copy ("Read More" / "Read Less")
   -------------------------------------------------------------------------- */

.q-disc-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s ease; }
.q-disc-body.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.q-readmore {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
  color: hsl(var(--parchment) / 0.6);
  border: 1px solid hsl(var(--parchment) / 0.2);
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  background: none; cursor: pointer;
  transition: all 0.3s ease;
}
.q-readmore:hover { background: hsl(var(--parchment) / 0.1); }
.q-disc-row:hover .q-readmore { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }

/* --------------------------------------------------------------------------
   Site-wide calls to action
   -------------------------------------------------------------------------- */

.q-ctas { background: hsl(var(--parchment-deep)); border-top: 1px solid hsl(var(--ink) / 0.1); }
.q-ctas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: hsl(var(--ink) / 0.12);
  border: 1px solid hsl(var(--ink) / 0.12);
  margin-block: 4rem;
}
@media (min-width: 640px)  { .q-ctas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .q-ctas__grid { grid-template-columns: repeat(4, 1fr); } }

.q-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  background: hsl(var(--parchment));
  text-decoration: none;
  color: hsl(var(--ink));
  transition: background-color 0.3s ease, color 0.3s ease;
}
.q-cta:hover { background: #fff; color: hsl(var(--brand-deep)); }
.q-cta__icon {
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  border: 1px solid hsl(var(--ink) / 0.2);
  display: grid; place-items: center;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.q-cta:hover .q-cta__icon { border-color: hsl(var(--brand)); color: hsl(var(--brand)); }
.q-cta__icon svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.25; }
.q-cta__text { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.q-cta__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.q-cta__note { font-family: var(--font-serif); font-size: 0.875rem; color: hsl(var(--ink) / 0.55); }
.q-cta__arrow { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; opacity: 0.4; transition: opacity 0.3s ease; }
.q-cta:hover .q-cta__arrow { opacity: 1; }
/* Awaiting an asset from the client — visibly present but not clickable. */
.q-cta.is-pending { opacity: 0.45; cursor: default; }
.q-cta.is-pending:hover { background: hsl(var(--parchment)); color: hsl(var(--ink)); }

/* --------------------------------------------------------------------------
   The e³ Mark
   The framework drawn as the logo's own hexagon cluster. Canvas is decorative;
   the key buttons below it carry the same controls for keyboard users.
   -------------------------------------------------------------------------- */

.q-mark { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .q-mark { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }

.q-mark__canvas { width: 100%; max-width: 34rem; margin-inline: auto; }
.q-mark__canvas canvas { width: 100%; height: auto; display: block; cursor: pointer; }

.q-mark__side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.q-mark__side .q-h3 { margin: 0; }
.q-mark__side .q-lede { margin: 0; max-width: 34rem; }

.q-mark__jump { margin-top: 0.5rem; }

.q-mark__keys { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.q-mark__key {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid hsl(var(--ink) / 0.2);
  background: transparent;
  color: hsl(var(--ink) / 0.65);
  padding: 0.5rem 0.8rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.q-mark__key:hover { border-color: hsl(var(--brand)); color: hsl(var(--brand-deep)); }
.q-mark__key[aria-pressed="true"] {
  background: hsl(var(--brand));
  border-color: hsl(var(--brand));
  color: hsl(var(--parchment));
}

/* --------------------------------------------------------------------------
   Building Legacies Across Generations
   -------------------------------------------------------------------------- */

.q-generations { margin-top: 2.5rem; }
.q-gen__chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; }
.q-gen {
  flex: 1 1 12rem;
  display: flex; flex-direction: column; gap: 0.375rem;
  border-top: 2px solid hsl(var(--brand));
  padding-top: 1rem;
}
.q-gen__n { font-family: var(--font-serif); font-size: 1.35rem; color: hsl(var(--ink)); line-height: 1.1; }
.q-gen__l { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--ink) / 0.55); }
.q-gen__arrow {
  align-self: center;
  font-size: 1.5rem;
  color: hsl(var(--brand));
  flex: 0 0 auto;
}
.q-gen__topics {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.625rem;
}
.q-gen__topics li {
  border: 1px solid hsl(var(--ink) / 0.15);
  padding: 0.5rem 0.875rem;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: hsl(var(--ink) / 0.7);
}
.q-dark .q-gen__topics li { border-color: hsl(var(--parchment) / 0.25); color: hsl(var(--parchment) / 0.75); }
.q-dark .q-gen__n { color: hsl(var(--parchment)); }
.q-dark .q-gen__l { color: hsl(var(--parchment) / 0.55); }

/* Closing line under each e³ pillar. */
.q-pillar-close,
.q-pillar-close p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.5;
  color: hsl(var(--brand-deep));
  max-width: 36rem;
}

/* Specialties list inside a bio modal. */
.q-specialties { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; }
.q-specialties__h { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--q-gold-alt); font-weight: 700; margin: 0 0 0.625rem; }
.q-specialties ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.q-specialties li { border: 1px solid #e5e7eb; padding: 0.3125rem 0.625rem; font-size: 0.75rem; color: #374151; }

/* --------------------------------------------------------------------------
   Contact — multiple offices
   -------------------------------------------------------------------------- */

.q-offices { display: flex; flex-direction: column; gap: 1.5rem; }
.q-office__name { font-family: var(--font-serif); font-size: 1.25rem; color: hsl(var(--ink)); margin: 0 0 0.25rem; }
.q-office__addr { color: hsl(var(--ink) / 0.6); font-size: 0.9375rem; line-height: 1.6; margin: 0; }
/* The office photo is a tall round tower shot square — a 16:9 crop would cut
   the building's head off, so the frame stays 1:1 (which also preserves the
   photographer credit baked into the bottom of the supplied image). */
.q-office__photo { margin: 0.5rem 0 0; }
.q-office__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Single Insights article
   -------------------------------------------------------------------------- */

.q-article__hero { padding: 10rem 0 3rem; }
.q-article__meta {
  margin-top: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.5);
}
.q-article__figure { margin-block: 3rem; }
.q-article__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.q-article__body { padding: 3rem 0 6rem; }
.q-article__prose { max-width: 46rem; }
.q-article__prose p { font-size: 1.125rem; line-height: 1.8; color: hsl(var(--ink) / 0.78); margin: 0 0 1.75rem; }
.q-article__prose h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 3rem 0 1rem; color: hsl(var(--ink)); }
.q-article__prose h3 { font-size: 1.5rem; margin: 2.5rem 0 1rem; color: hsl(var(--ink)); }
.q-article__prose blockquote {
  border: 0;
  border-left: 2px solid hsl(var(--gold));
  margin: 2.5rem 0;
  padding: 0 0 0 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.4;
  color: hsl(var(--ink));
}
.q-article__prose a { color: hsl(var(--gold-deep)); }
.q-article__cta { padding: 6rem 0; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.q-404 { display: grid; place-items: center; min-height: 70vh; padding: 10rem 0 8rem; background: hsl(var(--parchment-deep)); }
.q-404__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.q-404__code { font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: hsl(var(--ink)); margin: 0; }

/* Small print / footnotes. */
.q-footnote { font-size: 0.875rem; color: hsl(var(--ink) / 0.55); line-height: 1.7; margin: 0; }

/* --------------------------------------------------------------------------
   Services — cards inside the hairline grids
   -------------------------------------------------------------------------- */

.q-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.q-card-h { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; color: hsl(var(--ink)); margin: 0 0 1.25rem; }
.q-card-body { color: hsl(var(--ink) / 0.7); line-height: 1.7; margin: 0; }
.q-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}
.q-card-link svg { width: 0.875rem; height: 0.875rem; }
.q-hairline > *:hover .q-card-link,
.q-disc-card:hover .q-card-link { color: hsl(var(--gold-deep)); }
.q-card-note {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--ink) / 0.1);
  font-size: 0.875rem;
  font-style: italic;
  color: hsl(var(--ink) / 0.6);
  line-height: 1.7;
}

/* Sticky pillar heading. */
.q-pillar-label { margin-top: .5rem; }
.q-pillar-word .elementor-heading-title { font-size: clamp(2.25rem, 3.96vw, 3.375rem); line-height: 1.05; color: hsl(var(--ink)); margin: 1rem 0 0; }
.q-pillar-word { font-size: clamp(2.25rem, 3.96vw, 3.375rem); line-height: 1.05; color: hsl(var(--ink)); margin: 1rem 0 0; }

/* Three-discipline cards — 1px gutters produced by the parent background. */
.q-disc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: hsl(var(--ink) / 0.15);
  border: 1px solid hsl(var(--ink) / 0.15);
}
@media (min-width: 768px) { .q-disc-grid { grid-template-columns: repeat(3, 1fr); } }
.q-disc-card {
  background: hsl(var(--parchment));
  padding: 2.5rem;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease;
}
.q-disc-card:hover { background: hsl(var(--parchment-deep)); }
.q-disc-card__h { font-size: clamp(1.875rem, 3vw, 2.25rem); line-height: 1.15; color: hsl(var(--ink)); margin: 0 0 1.5rem; }
.q-disc-card .q-card-head { color: hsl(var(--ink) / 0.4); }
.q-disc-card .q-card-head svg { width: 1rem; height: 1rem; transition: color 0.3s ease; }
.q-disc-card:hover .q-card-head svg { color: hsl(var(--gold-deep)); }

/* Rule above the closing statement row. */
.q-top-rule { border-top: 1px solid hsl(var(--ink) / 0.15); padding-top: 2.5rem; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Service detail pages
   -------------------------------------------------------------------------- */

.q-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}
.q-back:hover { color: hsl(var(--gold-deep)); }
.q-back svg { width: 0.875rem; height: 0.875rem; }

.q-pillar-note {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.5);
  margin: 0;
}

.q-principle-row { padding: 2rem 0; }
.q-principle-k { font-family: var(--font-serif); font-size: 1.35rem; color: hsl(var(--ink)); }