/* ── Typography ──────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--ff-heading);
   font-weight: 700;
   color: var(--text-title);
   line-height: 1.1;
   letter-spacing: -0.01em;
}

h1 {
   font-size: clamp(var(--fs-4xl), 6vw, var(--fs-7xl));
}

h2 {
   font-size: clamp(var(--fs-3xl), 4vw, var(--fs-6xl));
   margin-top: var(--sp-10);
   margin-bottom: var(--sp-3);
}

h3 {
   font-size: clamp(var(--fs-2xl), 2.5vw, var(--fs-4xl));
   margin-top: var(--sp-8);
   margin-bottom: var(--sp-3);
}

h4 {
   font-size: clamp(var(--fs-xl), 1.125vw, var(--fs-3xl));
   margin-top: var(--sp-6);
   margin-bottom: var(--sp-2);
   letter-spacing: 0.03em;
   text-transform: uppercase;
}

h5 {
   font-size: var(--fs-lg);
   margin-top: var(--sp-5);
   margin-bottom: var(--sp-2);
}

h6 {
   font-size: var(--fs-base);
   margin-top: var(--sp-4);
   margin-bottom: var(--sp-1);
}

/* Reset heading margin inside components (global margins only for flowing content) */
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.service-card h2,
.service-card h3,
.service-card h4,
.cta-strip h2,
.process-item h3,
.process-item h4,
.service-choice h3,
.page-hero h1,
.page-hero h2,
.cs-hero h1,
.cs-hero h2,
.page-404 h1,
.page-404 h2,
.contact-success h2,
.cookie-banner h3 {
   margin-top: 0;
}

p {
   color: var(--text-secondary);
   line-height: 1.7;
   max-width: 68ch;
}

.text-primary {
   color: var(--text-primary);
}

.text-secondary {
   color: var(--text-secondary);
}

.text-muted {
   color: var(--text-muted);
}

.text-accent {
   color: var(--clr-accent);
}

.text-sm {
   font-size: var(--fs-sm);
}

.text-xs {
   font-size: var(--fs-xs);
}

.text-lg {
   font-size: var(--fs-lg);
}

.text-xl {
   font-size: var(--fs-xl);
}

.text-2xl {
   font-size: var(--fs-2xl);
}

.font-heading {
   font-family: var(--ff-heading);
}

.font-bold {
   font-weight: 700;
}

.font-semibold {
   font-weight: 600;
}

.uppercase {
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.no-wrap {
   white-space: nowrap;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

/* Hero headline */
.headline {
   font-family: var(--ff-heading);
   font-weight: 700;
   font-size: clamp(var(--fs-4xl), 7vw, var(--fs-8xl));
   line-height: 1.0;
   color: var(--text-title);
   letter-spacing: -0.02em;
   max-width: 22ch;
   text-wrap: balance;
}

.headline--center {
   max-width: 100%;
   text-align: center;
}

/* Hero headline override — large display size */
.hero .headline {
   font-size: clamp(3.5rem, 8vw, 6rem);
   line-height: 0.95;
   letter-spacing: -0.03em;
   max-width: 18ch;
}

/* Subheadline / lead */
.lead {
   font-size: clamp(var(--fs-base), 1.5vw, var(--fs-xl));
   color: var(--text-lead);
   line-height: 1.6;
   max-width: 32ch;
   text-wrap: pretty;
}

.hero .lead {
   font-size: clamp(var(--fs-lg), 2vw, var(--fs-2xl));
   max-width: 46ch;
   margin-inline: auto;
}

.lead--center {
   text-align: center;
   margin-inline: auto;
}

/* Prose — long-form CMS content */
.prose {
   max-width: 72ch;
   color: var(--text-secondary);
   display: flow-root; /* contains floated images without clipping absolute children */
}

.prose h2 {
   font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
   font-family: var(--ff-heading);
   font-weight: 700;
   line-height: 1.2;
   color: var(--text-title);
   margin-top: var(--sp-12);
   margin-bottom: var(--sp-4);
}

.prose h3 {
   font-size: clamp(var(--fs-sm), 1vw, var(--fs-base));
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-top: var(--sp-8);
   margin-bottom: var(--sp-3);
}

.prose h4 {
   margin-top: var(--sp-6);
   margin-bottom: var(--sp-2);
}

/* ── Floating section icons in prose headings ─────────────────── */

.prose-h__icon {
   position: absolute;
   left: -2.25rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted);
   display: flex;
   align-items: center;
   line-height: 0;
   pointer-events: none;
}

.prose-h__icon svg {
   width: 1.125rem;
   height: 1.125rem;
}

@media (max-width: 768px) {
   .prose-h__icon {
      display: none;
   }
}

.prose h5 {
   margin-top: var(--sp-5);
   margin-bottom: var(--sp-2);
}

.prose h6 {
   margin-top: var(--sp-4);
   margin-bottom: var(--sp-2);
}

.prose p {
   margin-bottom: var(--sp-4);
}

.prose ul {
   list-style: disc;
   padding-left: var(--sp-6);
   margin-bottom: var(--sp-4);
}

.prose ol {
   list-style: decimal;
   padding-left: var(--sp-6);
   margin-bottom: var(--sp-4);
}

.prose li {
   margin-bottom: var(--sp-2);
}

.prose a {
   color: var(--clr-accent);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.prose img {
   border-radius: var(--radius-md);
   float: right !important;
   width: 42% !important;
   max-width: 42% !important;
   height: auto !important;
   margin: var(--sp-2) 0 var(--sp-6) var(--sp-8) !important;
   box-shadow: var(--shadow-md);
   cursor: zoom-in;
}

/* Lightbox */
.lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: rgba(0, 0, 0, 0.88);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: zoom-out;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.25s ease;
}

.lightbox.is-open {
   opacity: 1;
   pointer-events: auto;
}

.lightbox__img {
   max-width: 92vw;
   max-height: 90vh;
   border-radius: var(--radius-md);
   box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
   cursor: zoom-out;
   object-fit: contain;
   transform: scale(0.88);
   transition: transform 0.25s ease;
}

.lightbox.is-open .lightbox__img {
   transform: scale(1);
}

@media (max-width: 640px) {
   .prose img {
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: var(--sp-6) 0 !important;
      cursor: default;
   }
}

.prose blockquote {
   border-left: 3px solid var(--clr-accent);
   padding-left: var(--sp-4);
   margin: var(--sp-8) 0;
   color: var(--text-muted);
   font-style: italic;
}

.prose code {
   font-size: var(--fs-sm);
   background: var(--bg-overlay);
   padding: 2px 6px;
   border-radius: var(--radius-sm);
   color: var(--clr-accent-light);
}

/* Skip link */
.skip-link {
   position: fixed;
   top: 1rem;
   left: 1rem;
   z-index: 9999;
   padding: var(--sp-2) var(--sp-4);
   background: var(--clr-accent);
   color: #fff;
   font-size: var(--fs-sm);
   border-radius: var(--radius-sm);
   transform: translateY(-200%);
   transition: transform var(--duration-fast);
}

.skip-link:focus {
   transform: translateY(0);
}

/* Inline link */
.link {
   color: var(--clr-accent);
   text-underline-offset: 3px;
}

.link:hover {
   color: var(--clr-accent-light);
}

/* Inline link — use inside body copy and dialogs */
.inline-link {
   color: var(--text-primary);
   text-decoration: underline;
   text-decoration-color: var(--clr-accent);
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
   transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}

.inline-link:hover {
   color: var(--clr-accent);
   text-decoration-color: var(--clr-accent);
}