/* Font Awesome 6 — icon font for fas/fab classes used across the public theme.
   Lives in the theme (not Blade) so the theme owns its visual dependencies. */
@import url('/vendor/fontawesome/css/all.min.css');

/* Kor Bilişim Color Palette - Directly from GIMP Palette */
:root {
    /* Primary Colors - Direct from GIMP palette */
    --color-primary-50: rgb(239, 246, 255);  /* Lightest blue - derived */
    --color-primary-100: rgb(219, 234, 254); /* Light blue - derived */
    --color-primary-200: rgb(191, 219, 254); /* Light blue - derived */
    --color-primary-300: rgb(147, 197, 253); /* Light blue - derived */
    --color-primary-400: rgb(96, 165, 250);  /* Medium blue - derived */
    --color-primary-500: rgb(40, 65, 118);   /* From .0 */
    --color-primary-600: rgb(16, 77, 151);   /* From .9 */
    --color-primary-700: rgb(53, 128, 164);  /* From .48 */
    --color-primary-800: rgb(30, 64, 175);   /* Dark blue */
    --color-primary-900: rgb(30, 58, 138);   /* Darker blue */
    
    /* RGB versions for rgba() usage */
    --color-primary-500-rgb: 40, 65, 118;
    --color-primary-600-rgb: 16, 77, 151;

    /* Neutral Colors - From GIMP palette */
    --color-neutral-50: rgb(248, 250, 252);   /* Lightest */
    --color-neutral-100: rgb(241, 245, 249);  /* Very light */
    --color-neutral-200: rgb(226, 232, 240);  /* Light */
    --color-neutral-300: rgb(203, 213, 225);  /* Medium light */
    --color-neutral-400: rgb(148, 163, 184);  /* Medium */
    --color-neutral-500: rgb(109, 110, 123);  /* From .41 */
    --color-neutral-600: rgb(89, 68, 93);     /* From .15 */
    --color-neutral-700: rgb(71, 85, 105);    /* Dark */
    --color-neutral-800: rgb(51, 65, 85);     /* Darker */
    --color-neutral-900: rgb(30, 41, 59);     /* Very dark */

    /* Accent Colors - Direct from palette */
    --color-accent-teal: rgb(53, 128, 164);    /* From .48 */
    --color-accent-amber: rgb(245, 158, 11);   /* Warm color */
    --color-accent-rose: rgb(244, 63, 94);     /* From .57 */

    /* Semantic Colors - Using palette colors */
    --color-success: rgb(62, 142, 164);        /* From .72 */
    --color-warning: rgb(245, 158, 11);        /* Amber */
    --color-error: rgb(244, 63, 94);           /* From .57 */
    --color-info: rgb(49, 168, 206);           /* From .120 */

    /* Backgrounds */
    --color-bg-light: rgb(255, 255, 255);
    --color-bg-dark: rgb(15, 23, 42);
    --color-bg-hero: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    --color-bg-cta: linear-gradient(rgba(30, 41, 59, 0.9), rgba(51, 65, 85, 0.9));

    /* Additional colors from the GIMP palette for reference */
    --color-palette-0: rgb(40, 65, 118);
    --color-palette-9: rgb(16, 77, 151);
    --color-palette-48: rgb(53, 128, 164);
    --color-palette-72: rgb(62, 142, 164);
    --color-palette-120: rgb(49, 168, 206);
    --color-palette-133: rgb(32, 180, 219);
    --color-palette-157: rgb(53, 187, 220);
    --color-palette-202: rgb(46, 213, 218);
    --color-palette-213: rgb(51, 225, 217);
}


/* Ember color system */
:root {
    --ember-950: #07090d;
    --ember-900: #0d1018;
    --ember-800: #151a24;
    --ember-700: #1e2636;
    --ember-600: #2a3448;
    --ember-glow: #e8692a;
    --ember-bright: #f5813d;
    --ember-deep: #c4511a;
    --ember-copper: #b86a28;
    --ember-soft: #fca56a;
    --ember-text: #f0f2f5;
    --ember-text-muted: var(--color-muted, #8b9bb4);
}

/* Base styles */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--color-page-bg, var(--color-neutral-50));
    color: var(--color-neutral-800);
}

.font-poppins, .font-display {
    font-family: 'Syne', sans-serif;
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Custom animation for feature images */
.feature-image-hover {
    transition: transform 0.5s ease;
}
.feature-image-hover:hover {
    transform: scale(1.05);
}

/* Custom scrollbar using ember colors */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ember-900);
}
::-webkit-scrollbar-thumb {
    background: var(--ember-deep);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ember-glow);
}

/* Additional utility classes using palette */
.bg-primary-500 {
    background-color: var(--color-primary-500);
}
.bg-primary-600 {
    background-color: var(--color-primary-600);
}
.bg-primary-700 {
    background-color: var(--color-primary-700);
}
.text-primary-600 {
    color: var(--color-primary-600);
}
.text-primary-700 {
    color: var(--color-primary-700);
}
.border-primary-300 {
    border-color: var(--color-primary-300);
}
.bg-neutral-50 {
    background-color: var(--color-neutral-50);
}
.bg-neutral-900 {
    background-color: var(--color-neutral-900);
}
.text-neutral-600 {
    color: var(--color-neutral-600);
}
.text-neutral-300 {
    color: var(--color-neutral-300);
}

/* Markdown content styling */
.markdown-content {
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.7;
    color: var(--color-neutral-800);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.markdown-content h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

.markdown-content h2 {
    font-size: 2rem;
    line-height: 1.3;
    border-bottom: 2px solid var(--color-primary-200);
    padding-bottom: 0.5rem;
}

.markdown-content h3 {
    font-size: 1.5rem;
    line-height: 1.4;
}

.markdown-content p {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.7;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1.5rem;
    padding-inline-start: 1.5rem;
}

.markdown-content li {
    margin-bottom: 0.5rem;
}

.markdown-content blockquote {
    border-inline-start: 4px solid var(--color-primary-500);
    padding-inline-start: 1.5rem;
    font-style: italic;
    background-color: var(--color-neutral-50);
    padding: 1.5rem;
    border-start-start-radius: 0;
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    border-end-start-radius: 0;
    margin: 2rem 0;
}

.markdown-content a {
    color: var(--color-primary-600);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.markdown-content a:hover {
    color: var(--color-primary-800);
    text-decoration: underline;
}

.markdown-content code {
    background-color: var(--color-neutral-100);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.markdown-content pre {
    background-color: var(--color-neutral-900);
    color: var(--color-neutral-100);
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin: 1.5rem 0;
}

/* Override Tailwind colors with palette variables */
.bg-blue-600 {
    background-color: var(--color-primary-600) !important;
}
.bg-blue-700 {
    background-color: var(--color-primary-700) !important;
}
.text-blue-600 {
    color: var(--color-primary-600) !important;
}
.text-blue-300 {
    color: var(--color-primary-300) !important;
}
[class*="border-blue-500/30"] {
    border-color: rgba(var(--color-primary-500-rgb), 0.3) !important;
}
[class*="bg-blue-600/20"] {
    background-color: rgba(var(--color-primary-600-rgb), 0.2) !important;
}
.bg-gray-50 {
    background-color: var(--color-neutral-50) !important;
}
.bg-gray-900 {
    background-color: var(--color-neutral-900) !important;
}
.text-gray-600 {
    color: var(--color-neutral-600) !important;
}
.text-gray-800 {
    color: var(--color-neutral-800) !important;
}
.text-gray-200 {
    color: var(--color-neutral-200) !important;
}
.text-gray-300 {
    color: var(--color-neutral-300) !important;
}
.text-gray-500 {
    color: var(--color-neutral-500) !important;
}
.border-gray-100 {
    border-color: var(--color-neutral-100) !important;
}
.bg-gray-800 {
    background-color: var(--color-neutral-800) !important;
}

/* Background gradients */
.bg-gradient-hero {
    position: relative;
    overflow: hidden;
    background: var(--ember-950);
}

/* ── Ember hero ─────────────────────────────────────────────── */
.hero-ember, .block-hero--slideshow {
    background: var(--ember-950);
    position: relative;
    overflow: hidden;
}

/* The slideshow hero must stay a block positioning context for its absolutely
   positioned slides/overlays/content, even when a theme's base .block-hero rule
   sets display:flex/grid. Compound specificity (0,2,0) beats a theme's .block-hero. */
.block-hero.block-hero--slideshow {
    display: block;
    align-items: initial;
    flex-direction: initial;
}

/* Slideshow background images — visible immediately, cross-fade between slides */
.hero-slide,
.page-hero__slide,
.block-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* scroll (not fixed): fixed parallax mis-renders in screenshots, iOS, and
       certain stacking contexts, detaching the bg from the hero box. */
    background-attachment: scroll;
    will-change: opacity;
}
.hero-slide-1,
.page-hero__slide--1,
.block-hero__slide--1 {
    background-image: var(--hero-slide-1, url('/images/slide/slide04.jpg'));
    opacity: 1;
}
.hero-slide-2,
.page-hero__slide--2,
.block-hero__slide--2 {
    background-image: var(--hero-slide-2, url('/images/slide/slide05.jpg'));
    opacity: 0;
}
@keyframes hero-slide-a {
    0%, 45%   { opacity: 1; }
    55%, 95%  { opacity: 0; }
    100%      { opacity: 1; }
}
@keyframes hero-slide-b {
    0%, 45%   { opacity: 0; }
    55%, 95%  { opacity: 1; }
    100%      { opacity: 0; }
}

/* Hero text legibility: keep text crisp over varied imagery */
.hero-ember h1,
.hero-ember p,
.block-hero--slideshow h1,
.block-hero--slideshow p {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero-ember-glow-1,
.page-hero__glow--1,
.block-hero__glow--1 {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,105,42,0.28) 0%, rgba(180,60,18,0.12) 45%, transparent 70%);
    left: -200px;
    top: 50%;
    transform: translateY(-50%);
    filter: blur(70px);
    /* static glow, no pulse */
    z-index: 1;
    pointer-events: none;
}

.hero-ember-glow-2,
.page-hero__glow--2,
.block-hero__glow--2 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,122,60,0.18) 0%, transparent 65%);
    right: 5%;
    top: 15%;
    filter: blur(90px);
    /* static glow, no pulse */
    z-index: 1;
    pointer-events: none;
}

.hero-grid-pattern,
.page-hero__pattern,
.block-hero__pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(232,105,42,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232,105,42,0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    z-index: 1;
    pointer-events: none;
}

@keyframes ember-pulse-1 {
    0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
    50%       { opacity: 1;   transform: translateY(-52%) scale(1.06); }
}

@keyframes ember-pulse-2 {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 0.8; transform: scale(1.08); }
}

/* Ember text utilities */
.text-ember        { color: var(--ember-glow); }
.text-ember-bright { color: var(--ember-bright); }
.text-ember-soft   { color: var(--ember-soft); }

/* Ember primary button */
.btn-ember, .btn-primary {
    background: linear-gradient(135deg, var(--ember-deep) 0%, var(--ember-glow) 60%, var(--ember-bright) 100%);
    color: var(--color-on-primary, white);
    text-decoration: none;
    padding: 1.25rem 2.5rem;
    border-radius: 0.875rem;
    font-weight: 600;
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 40px rgba(232,105,42,0.35), 0 4px 20px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    /* Own stacking context so the hover-gradient ::before (z-index:-1 below) is
       contained — it sits ABOVE the base background but BELOW the label, even
       when the label is a bare text node (not wrapped in a .btn-ember > * child).
       Without this the opaque ::before painted over the text on hover. */
    isolation: isolate;
}
.btn-ember::before, .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ember-glow) 0%, var(--ember-bright) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.btn-ember:hover::before, .btn-primary:hover::before { opacity: 1; }
.btn-ember:hover, .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 60px rgba(232,105,42,0.55), 0 8px 30px rgba(0,0,0,0.4);
    text-decoration: none;
    color: white;
}
.btn-ember > *, .btn-primary > * { position: relative; z-index: 1; }

/* Hero brand accent line */
.hero-accent-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.hero-accent-line .line   { height: 1px; width: 4rem; background: linear-gradient(90deg, transparent, var(--ember-glow)); }
.hero-accent-line .line-r { background: linear-gradient(90deg, var(--ember-glow), transparent); }
.hero-accent-line .label  {
    color: var(--ember-glow);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* CTA section — warm ember */
.bg-gradient-cta, .cta-prefooter {
    animation: fadeInUp 0.8s ease-out;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ember-950) 0%, var(--ember-900) 40%, var(--ember-950) 70%, var(--ember-950) 100%);
}
.bg-gradient-cta::before, .cta-prefooter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, color-mix(in srgb, var(--ember-glow) 18%, transparent) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.bg-gradient-cta::after, .cta-prefooter::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--ember-glow) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ember-glow) 4%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 1;
    pointer-events: none;
}
.bg-gradient-cta > *, .cta-prefooter > * { position: relative; z-index: 2; }

.cta-prefooter { padding: 6rem 0; }
.cta-prefooter__inner { max-width: 700px; margin: 0 auto; text-align: center; }
.cta-prefooter__eyebrow { margin-bottom: 1.5rem; }
.cta-prefooter__heading {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ember-text);
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    letter-spacing: -0.015em;
}
.cta-prefooter__body {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    color: color-mix(in srgb, var(--ember-text) 72%, transparent);
}

.service-index-section {
    padding: 3rem 0 4rem;
    background: var(--color-surface, #f8f7f5);
}

/* Utility classes */
.transition-all-300 {
    transition: all 0.3s ease;
}
.shadow-soft {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.shadow-hover:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Fix for code block display issues - exclude MathJax elements */
.markdown-content pre:not(.MathJax),
.markdown-content code:not(.MathJax),
article pre:not(.MathJax),
article code:not(.MathJax),
.content pre:not(.MathJax),
.content code:not(.MathJax) {
    display: block;
    background: #1a1a1a;
    color: #f8f8f2;
    padding: 1em;
    border-radius: 0.5em;
    overflow-x: auto;
    white-space: pre;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.95em;
    line-height: 1.5;
    margin: 1.5em 0;
}

/* Inline code - exclude MathJax */
.markdown-content code:not(pre code):not(.MathJax),
article code:not(pre code):not(.MathJax),
.content code:not(pre code):not(.MathJax) {
    display: inline;
    padding: 0.2em 0.4em;
    background: #2d2d2d;
    color: #f8f8f2;
    border-radius: 0.3em;
    font-size: 0.9em;
}

/* Ensure code blocks are not affected by flexbox */
.markdown-content,
article .content,
.content {
    display: block;
}

/* Make sure the background is dark for code blocks */
pre code:not(.MathJax) {
    background: transparent;
    color: inherit;
}

/* KaTeX styles */
.katex {
    font-size: 1.1em;
}
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 1.5em 0;
    text-align: center;
}
.katex-display > .katex {
    display: inline-block;
    white-space: nowrap;
}
/* Ensure math doesn't break line heights */
.katex-html {
    line-height: 1.2;
}
/* Math inside lists */
li .katex,
li .katex-display {
    margin: 0.5em 0;
}
li .katex-display {
    text-align: start;
    margin-inline-start: 0;
}
/* Prevent list items from breaking math */
li {
    overflow-wrap: break-word;
}

/* Bump-out image treatment — mirrors the Hugo render-hook heuristic: a LOCAL
   .jpg/.jpeg in prose body content renders as a right-floated editorial card
   aligned with the content-card edge; everything else (SVG/PNG/GIF/webp,
   external URLs) stays a plain centered image.

   The CMS renders markdown images as `<p><img></p>` inside `.post-body`
   (service + blog) or `.post-body--page > .prose` (pages — that wrapper is
   ALSO `.post-body`), so `.post-body p img` is the single container selector
   across services, about pages, AND articles. Scoping to `p img` keeps
   block-rendered images (galleries, cards) out of this treatment. No `.img-bump`
   markup is required — the [src] attribute selectors stand in for Hugo's render
   hook — but an explicit `.img-bump` class is still honored if a block emits one. */

/* Base: every prose content image is a plain capped, centered card. */
.post-body p img {
    display: block;
    max-width: min(100%, 640px);
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 1.75rem auto;
    border-radius: 0.75rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Local JPEG (or explicit .img-bump) → bump-out card. Higher specificity than
   the base rule above, so it wins regardless of source order. */
.post-body img.img-bump,
.post-body p img[src$=".jpg" i]:not([src^="http"]):not([src^="//"]),
.post-body p img[src$=".jpeg" i]:not([src^="http"]):not([src^="//"]) {
    width: 100%;
    max-width: none;
    max-height: 280px;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    margin: 1.25rem 0;
}

@media (min-width: 768px) {
    .post-body img.img-bump,
    .post-body p img[src$=".jpg" i]:not([src^="http"]):not([src^="//"]),
    .post-body p img[src$=".jpeg" i]:not([src^="http"]):not([src^="//"]) {
        float: right;
        width: 300px;
        height: 300px;
        /* The right edge sticks to the card border at EVERY breakpoint with no
           magic numbers: the bleed is the card's own padding token, so it always
           cancels the gutter exactly. Change the card padding and the image still
           lands on the border. --panel-pad is set on .content-panel and the page
           prose card; the 3rem fallback covers any other .post-body host. */
        margin: 0 calc(-1 * var(--panel-pad, 3rem)) 1rem 1.5rem;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-inline-end: 5px solid var(--ember-deep);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
        object-fit: cover;
    }
}

/* Clearfix: contain the floated image inside the prose container so it
   doesn't bleed into the comments / prev-next nav / back-link below. */
.post-body::after {
    content: '';
    display: table;
    clear: both;
}

/* Only H1 clears the float. Every other heading and paragraph wraps alongside
   a floated image so it stays aligned with the surrounding text. */
.post-body h1 {
    clear: right;
}

/* Match the Hugo content card. By default public.css gives every .post-body
   child a narrow centered 820px measure with 1.5rem inline padding. Inside a
   service card the .content-panel ALREADY supplies the 64px gutter (mirrors
   Hugo's `p-16` card), so that inner measure double-pads the text AND clamps the
   image's wrapping <p> to 820px — which traps the floated .img-bump ~60px short
   of the card edge instead of bleeding onto it. Drop the redundant measure so
   prose fills the card width (Hugo lets paragraphs fill the card) and the float's
   containing block reaches the panel edge, landing the -4rem bleed on the border.
   Applies to single articles too (.article-single) — matching Hugo, body text
   fills the card so the bump-out image's right edge lands on the wrapper border. */
.content-panel > .prose > .post-body > :is(p, h1, h2, h3, h4, ul, ol, blockquote, figure, pre) {
    max-width: none;
    margin-inline: 0;
}
/* Zero inline padding so top-level prose blocks align to the panel gutter — but
   NOT blockquote/pre: those keep their own internal padding (quote-bar indent /
   code-block inset), otherwise the text is jammed against the bar/edge. */
.content-panel > .prose > .post-body > :is(p, h1, h2, h3, h4, ul, ol, figure) {
    padding-inline: 0;
}

/* Content-layout guard (ported to the shared baseline). A theme's own blocks.css
   often re-caps `.post-body`/`.prose` to a narrow LEFT-aligned measure
   (e.g. max-width:72ch, no auto margin) and redefines lists without the float BFC,
   which leaves article/service/page content stuck to the left and lets bump-out
   images overlap lists. Re-assert the correct layout at higher specificity so it
   wins over any theme override, for BOTH wrapper types:
     • articles/services → `.content-panel > .prose > .post-body`
     • pages (about/contact/etc.) → `.post-body.post-body--page > .prose`
   The wrappers themselves supply the centred measure (content-panel; or kor's
   `.post-body--page > :not(section)` → 64rem auto), so we only defeat the cap. */
.content-panel .post-body,
.content-panel .prose,
.content-panel .markdown-content {
    max-width: none;
    margin-inline: auto;
    width: auto;
}
.post-body.post-body--page {
    max-width: none;
    width: auto;
}
.content-panel .post-body ul, .content-panel .post-body ol,
.content-panel .prose ul, .content-panel .prose ol,
.content-panel .markdown-content ul, .content-panel .markdown-content ol,
.post-body.post-body--page ul, .post-body.post-body--page ol {
    overflow: hidden;
}

/* DEFINITIVE blockquote/code padding guard. Multiple gutter-align rules zero the
   inline padding of top-level prose blocks (`> :is(...)` on services, `.article-single
   .post-body > *` on articles, and any future one). For blockquotes and code blocks
   that flattens the text against the quote bar / code edge. !important guarantees they
   ALWAYS keep their inset, on every page type and every theme — so this never regresses. */
.post-body blockquote, .prose blockquote, .markdown-content blockquote,
.post-body pre, .prose pre, .markdown-content pre {
    padding-inline: 1.5rem !important;
}

/* Block-component blockquotes (e.g. .block-testimonials__quote) routinely render
   INSIDE .post-body on block-composed pages (About, etc.). The prose/article
   blockquote decoration above (beige fill, left bar, radius, italic) must NOT
   bleed onto them — these components own their own look. (0,2,0) beats the
   `.post-body blockquote` (0,1,1) article rule that themes layer on top. */
.block-testimonials .block-testimonials__quote {
    background: none;
    border: 0;
    border-radius: 0;
    font-style: normal;
}

/* Section-level block components (CTA, stats, testimonials, value-props, hero,
   service grids/lists) render full-width sections that routinely sit INSIDE
   .post-body on block-composed pages. The prose heading rules (`.post-body h2`
   etc., specificity 0,1,1) must not hijack the block's own headings — most
   visibly, a dark prose h2 colour painting a dark-variant CTA headline
   invisible against its dark background. Hand the colour back to the block:
   the heading inherits its section's text colour, which each block sets per
   variant (dark → light, light → dark). (0,2,1) beats `.post-body h2`. Note:
   text-align is deliberately left untouched so block centring is preserved. */
.post-body :is(.block-cta, .block-stats, .block-testimonials, .block-vpg, .block-hero, .block-scg, .block-scl) :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    border-bottom: 0;
}

/* ── Prose lists ──────────────────────────────────────────────────────────────
   Tailwind Preflight strips list markers and indent from every ul/ol; the
   article/page body (.post-body) renders raw markdown lists and needs them back,
   or bullets/numbers vanish and items sit flush-left as bare lines. */
.post-body ul,
.post-body ol {
    margin: 1.25rem 0;
    padding-inline-start: 1.6rem;
    /* BFC so a list following a floated bump-out image sits beside it, not under it. */
    overflow: hidden;
}
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body ul ul { list-style: circle; }
.post-body ul ul ul { list-style: square; }
.post-body li {
    margin-block: 0.4rem;
    padding-inline-start: 0.25rem;
    line-height: 1.65;
}
.post-body li::marker { color: var(--ember-deep, #c2410c); }
/* Nested lists hug their parent item instead of carrying the full block gap. */
.post-body li > ul,
.post-body li > ol { margin-block: 0.4rem; }
/* The full-width rule above zeroes inline padding on direct .post-body children;
   lists must keep their marker indent, so restore it at matching specificity. */
.content-panel > .prose > .post-body > ul,
.content-panel > .prose > .post-body > ol {
    padding-inline-start: 1.6rem;
}

/* ── Prose tables ─────────────────────────────────────────────────────────────
   Raw markdown tables ship with no borders/padding (cells run together). Give
   them an editorial frame: header band, padded cells, hairline row dividers,
   subtle zebra. display:block + overflow-x lets a wide table (e.g. KaTeX math)
   scroll inside the card instead of bursting the wrapper. */
.post-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.95em;
    border: 1px solid var(--color-border, #e8e3de);
}
.post-body thead th {
    text-align: start;
    background: var(--color-surface-2, #f6f7f9);
    border-bottom: 2px solid var(--color-border, #d9d2ca);
    font-weight: 700;
}
.post-body th,
.post-body td {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border, #e8e3de);
    vertical-align: top;
}
.post-body tbody tr:nth-child(even) { background: rgba(15, 23, 41, 0.025); }

.image-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 3rem 0;
}

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

.image-grid-item {
    width: 100%;
    height: 16rem;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 0.5rem;
}

.image-grid + .highlight-box {
    margin-top: 3rem;
}

.highlight-box {
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-primary) 8%, #ffffff), color-mix(in srgb, var(--color-primary) 16%, #ffffff));
    border-inline-start: 4px solid var(--color-primary);
    border-start-start-radius: 0;
    border-start-end-radius: 1rem;
    border-end-end-radius: 1rem;
    border-end-start-radius: 0;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .highlight-box {
        padding: 3rem;
    }
}

.highlight-box::before,
.highlight-box::after {
    content: '';
    position: absolute;
    width: 2rem;
    height: 2rem;
    border: 2px solid color-mix(in srgb, var(--color-primary) 45%, white);
}

.highlight-box::before {
    top: 0;
    left: 0;
    border-inline-end: none;
    border-bottom: none;
    border-radius: 0.5rem 0 0 0;
}

.highlight-box::after {
    bottom: 0;
    right: 0;
    border-inline-start: none;
    border-top: none;
    border-radius: 0 0 0.5rem 0;
}

.highlight-box h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .highlight-box h2 {
        font-size: 2.25rem;
    }
}

.highlight-box p {
    color: #374151;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    position: relative;
    z-index: 10;
}

.highlight-box a {
    color: var(--color-primary);
    font-weight: 600;
}

.highlight-box a:hover {
    color: var(--color-primary-dark, var(--color-primary));
    text-decoration: underline;
}

/* Prose h1 — narrative content typography only, no decorative underline.
   Scoped to direct prose children so block-* sections inside .post-body
   keep their own typography. */
.prose > h1, article.entry-content > h1 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    color: var(--color-neutral-900);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}
.prose > h1:first-child, article.entry-content > h1:first-child {
    margin-top: 0;
}

/* Make h1 in hero sections light */
.bg-gradient-hero h1 {
    color: white !important;
    border-bottom: none;
    padding-bottom: 0;
}
.bg-gradient-hero h1::after {
    display: none;
}

/* Inner-page hero — ember slideshow (matches Hugo hero.html).
   Background, overlays and glows are rendered as child elements in
   _page_hero.blade.php so the section just needs positioning context. */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--ember-950);
}

/* Page hero (dark navy strip) — defeat global h1 dark color + underline */
.page-hero h1,
.page-hero .page-hero__title,
.block-hero h1,
.block-hero .block-hero__headline {
    color: var(--color-on-dark, #f0f2f5) !important;
    border-bottom: none;
    padding-bottom: 0;
}
.page-hero h1::after,
.block-hero h1::after,
.block-hero .block-hero__headline::after {
    display: none;
}
.page-hero p,
.page-hero .page-hero__lead {
    /* Near-solid light so the subtitle stays legible over the busy hero imagery
       (matches Hugo hero.html, which uses rgba(248,247,245,0.95) + text-shadow). */
    color: rgba(248, 247, 245, 0.95);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Breadcrumb block (.block-breadcrumb) ───────────────────────────────────
   Light trail bar rendered between the header and the page hero. Ported from the
   Hugo reference's .breadcrumb so the CMS breadcrumb block matches core.gen.tr. */
.block-breadcrumb {
    background: #faf9f7;
    border-bottom: 1px solid rgba(232, 105, 42, 0.1);
    padding: 0.45rem 0;
}
.block-breadcrumb__inner {
    max-width: 1280px;       /* matches the site-wide header/hero/.container width */
    margin-inline: auto;
    padding-inline: 1.5rem;  /* matches px-6 */
}
.block-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.78rem;
    gap: 0;
    margin: 0;
    padding: 0;
}
.block-breadcrumb--center .block-breadcrumb__list { justify-content: center; }
.block-breadcrumb__item { display: flex; align-items: center; }
.block-breadcrumb__sep { color: var(--ember-glow, #e8692a); margin: 0 0.35rem; }
.block-breadcrumb__item a {
    color: var(--ember-text-muted, #8b9bb4);
    text-decoration: none;
    transition: color 0.2s;
}
.block-breadcrumb__item a:hover { color: var(--ember-glow, #e8692a); }
.block-breadcrumb__current { color: var(--color-neutral-800, #1f2937); font-weight: 500; }

/* CTA heading styles */
.bg-gradient-cta h2, .cta-prefooter h2 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Make h1 smaller inside content areas - now handled by Tailwind classes */

/* Prose h2 — narrative content typography only, no decorative underline.
   Scoped to direct prose children so block-* sections inside .post-body
   keep their own typography. */
.prose > h2, article.entry-content > h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.prose > h2:first-child, article.entry-content > h2:first-child {
    margin-top: 0;
}

/* Page prose paragraphs — the article body gets its rhythm from `.post-body > p`
   (direct children of .post-body), but page content nests its <p>s inside a
   .prose block, so they fall through with zero margin and collapse into a wall of
   text. Give the prose block's own direct paragraphs editorial spacing. Article/
   service bodies are unaffected (their <p>s sit in .post-body, not directly in
   .prose). Headings (.prose > h2) and lists (.post-body ul/ol) already spaced. */
.prose > p, article.entry-content > p {
    margin: 0 0 1.25em;
    line-height: 1.75;
}
.prose > p:first-child, article.entry-content > p:first-child { margin-top: 0; }
.prose > p:last-child, article.entry-content > p:last-child { margin-bottom: 0; }

/* Adjust for highlight-box h2 to not conflict */
.highlight-box h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
}

.highlight-box h2::after {
    display: none;
}

/* Keep .section-heading for backward compatibility */
.section-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--color-primary-300);
    position: relative;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100px;
    height: 3px;
    background-color: var(--color-primary-600);
}

.section-heading:first-child {
    margin-top: 0;
}

.highlight-box .section-heading {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
}

.highlight-box .section-heading::after {
    display: none;
}

/* Fixed background with tiled pattern for far distance effect */
.bg-fixed-cover {
    position: relative;
    background-attachment: fixed;
    background-size: 300px auto; /* Adjust tile size as needed */
    background-repeat: repeat;
    background-position: center;
}

/* On smaller screens, use smaller tiles for better effect */
@media (max-width: 768px) {
    .bg-fixed-cover {
        background-size: 150px auto;
    }
}

/* Enhanced bg-fixed-cover with overlay support */
.bg-fixed-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7); /* bg-white/70 */
    z-index: 1;
}

.bg-fixed-cover > * {
    position: relative;
    z-index: 2;
}

/* Reusable pattern for content sections with tiled background and overlay */
.section-tiled-bg {
    position: relative;
}

/* Scroll animation classes — fail-safe: hide-on-scroll only kicks in when JS
   has marked <html> as scroll-fx-ready. If JS fails, content stays visible. */
html.scroll-fx-ready .scroll-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

html.scroll-fx-ready .scroll-animate.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered animation delays */
html.scroll-fx-ready .scroll-animate.delay-100 { transition-delay: 0.1s; }
html.scroll-fx-ready .scroll-animate.delay-200 { transition-delay: 0.2s; }
html.scroll-fx-ready .scroll-animate.delay-300 { transition-delay: 0.3s; }
html.scroll-fx-ready .scroll-animate.delay-400 { transition-delay: 0.4s; }
html.scroll-fx-ready .scroll-animate.delay-500 { transition-delay: 0.5s; }

/* CTA section animation (see .bg-gradient-cta definition above) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-tiled-bg .bg-tiled-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-attachment: fixed;
    background-size: 300px auto;
    background-repeat: repeat;
    background-position: center;
    background-image: var(--section-tiled-image, url('/images/bg/bg15.jpg'));
}

.section-tiled-bg .bg-tiled-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Token-driven so the panel tracks the active theme: light themes mix a
       near-white veil (dark text stays readable), dark themes mix a dark
       surface veil (light text stays readable). Themes may override the whole
       overlay via --section-tiled-overlay. */
    background-color: var(--section-tiled-overlay, color-mix(in srgb, var(--color-surface, #ffffff) calc(var(--surface-overlay-alpha, 0.85) * 100%), transparent));
}

.section-tiled-bg .bg-tiled-content {
    position: relative;
    z-index: 2;
}

/* Dark variant — same image, ember-tinted dark overlay so texture shows on dark sections */
.section-tiled-bg-dark .bg-tiled-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-attachment: fixed;
    background-size: 300px auto;
    background-repeat: repeat;
    background-position: center;
    background-image: var(--section-tiled-image, url('/images/bg/bg15.jpg'));
    opacity: 0.18;
    filter: brightness(0.6) saturate(0.7);
}
.section-tiled-bg-dark .bg-tiled-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,105,42,0.10) 0%, transparent 70%),
        linear-gradient(180deg, rgba(13,16,24,0.78) 0%, rgba(21,26,36,0.88) 100%);
}
.section-tiled-bg-dark .bg-tiled-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .section-tiled-bg .bg-tiled-image,
    .section-tiled-bg-dark .bg-tiled-image {
        background-size: 150px auto;
    }
    .bg-fixed-cover {
        background-size: 150px auto;
    }
}

/* CTA button hover colors */
.bg-gradient-cta a.bg-white, .cta-prefooter a.bg-white {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.bg-gradient-cta a.bg-white:hover, .cta-prefooter a.bg-white:hover {
    background-color: var(--color-primary-100) !important;
    color: var(--color-primary-800) !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}
.bg-gradient-cta a.bg-white::after, .cta-prefooter a.bg-white::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}
.bg-gradient-cta a.bg-white:hover::after, .cta-prefooter a.bg-white:hover::after {
    animation: ripple 1s ease-out;
}
@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Animated gradient background */
.bg-gradient-animated {
    background: linear-gradient(90deg, 
        var(--color-primary-600) 0%, 
        var(--color-primary-700) 25%, 
        var(--color-primary-600) 50%, 
        var(--color-primary-700) 75%, 
        var(--color-primary-600) 100%);
    background-size: 200% 100%;
    /* gradient-shift animation removed — was looping */
    position: relative;
}

/* Shimmer animation */
.animate-shimmer {
    /* shimmer animation removed — was looping */
}

/* Keyframes for gradient shift */
@keyframes gradient-shift {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Keyframes for shimmer effect */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Utility classes */
.bg-size-200 {
    background-size: 200% 100%;
}

/* Ensure hover utilities work with transitions */
[class*="hover:scale-105"]:hover {
    transform: scale(1.05);
}

[class*="hover:shadow-2xl"]:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Make sure transform is included in transition for scale effect */
.transition-all-300 {
    transition: all 0.3s ease;
    will-change: transform, box-shadow;
}

/* Service box hover effects */
[class*="hover:-translate-y-2"]:hover {
    transform: translateY(-0.5rem);
}

/* Contact button gradient */
.btn-contact-gradient {
    background: linear-gradient(90deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
    transition: all 0.3s ease;
}
.btn-contact-gradient:hover {
    background: linear-gradient(90deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Amber color override */
.bg-amber-600 {
    background-color: var(--color-accent-amber) !important;
}

/* Hugo theme specific */
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

/* ═══════════════════════════════════════════════════════
   ROUND 2 — NEW COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
    background: #faf9f7;
    border-bottom: 1px solid rgba(232,105,42,0.1);
    padding: 0.45rem 0;
}
.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.78rem;
    gap: 0;
}
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-sep { color: var(--ember-glow); margin: 0 0.35rem; }
.breadcrumb-item a { color: var(--ember-text-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb-item a:hover { color: var(--ember-glow); }
.breadcrumb-current { color: var(--color-neutral-800); font-weight: 500; }

/* ── Mobile bottom bar ──────────────────────────────────── */
.mobile-bottom-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: var(--ember-950);
    border-top: 1px solid rgba(232,105,42,0.15);
    display: flex;
    align-items: stretch;
    z-index: 60;
    padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--ember-text-muted);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: color 0.2s;
}
.mobile-tab i { font-size: 1.05rem; }
.mobile-tab.active, .mobile-tab:hover { color: var(--ember-glow); }

/* ── Reading progress bar ────────────────────────────────── */
.reading-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: var(--ember-glow);
    z-index: 200;
    width: 0%;
    transition: width 0.08s linear;
    pointer-events: none;
    border-start-start-radius: 0;
    border-start-end-radius: 2px;
    border-end-end-radius: 2px;
    border-end-start-radius: 0;
}

/* ── Reading time badge ──────────────────────────────────── */
.reading-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(232,105,42,0.15);
    color: var(--ember-soft);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
}

/* ── Article TOC (blue palette to match article heading underlines) ─── */
.article-toc {
    position: relative;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
        linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem 1.5rem 2.5rem;
    margin: 0 auto 2.75rem;
    max-width: 100%;
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.article-toc::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 1.75rem;
    bottom: 1.5rem;
    width: 3px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}
.article-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
    user-select: none;
}
.article-toc-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-primary-dark, var(--color-primary));
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
.article-toc-title::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--color-primary);
}
.article-toc-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: transform 0.25s ease, background 0.2s;
}
.article-toc-toggle:hover {
    background: rgba(59, 130, 246, 0.22);
}
.article-toc.collapsed .article-toc-toggle { transform: rotate(-90deg); }
.article-toc.collapsed .article-toc-body { display: none; }

.article-toc-body { padding-top: 0.25rem; }
.article-toc nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: tocitem;
    columns: 1;
    column-gap: 2rem;
}
@media (min-width: 1024px) {
    .article-toc nav > ul { columns: 2; }
}
.article-toc nav > ul > li {
    counter-increment: tocitem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(59, 130, 246, 0.18);
    break-inside: avoid;
    position: relative;
}
.article-toc nav > ul > li:last-child { border-bottom: none; }
.article-toc nav > ul > li > a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1f2c;
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 0.95rem;
    transition: color 0.2s, transform 0.2s;
    line-height: 1.45;
}
.article-toc nav > ul > li > a::before {
    content: counter(tocitem, decimal-leading-zero);
    font-family: 'Syne', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--color-primary);
    flex-shrink: 0;
    width: 2.1rem;
    min-width: 2.1rem;
    background: rgba(59, 130, 246, 0.12);
    border-radius: 4px;
    text-align: center;
    padding: 0.2rem 0;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}
.article-toc nav > ul > li > a:hover {
    color: var(--color-primary-dark, var(--color-primary));
}
.article-toc nav > ul > li > a:hover::before {
    background: var(--color-primary);
    color: #ffffff;
}
.article-toc nav ul ul {
    list-style: none;
    padding-inline-start: 2.45rem;
    margin: 0.4rem 0 0.25rem;
    border-inline-start: 1px dashed color-mix(in srgb, var(--color-primary) 20%, transparent);
    margin-inline-start: 0.7rem;
}
.article-toc nav ul ul li {
    padding: 0.2rem 0;
    position: relative;
}
.article-toc nav ul ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: -1.75rem;
    top: 0.85rem;
    width: 1rem;
    height: 1px;
    background: rgba(59, 130, 246, 0.28);
}
.article-toc nav ul ul a {
    font-size: 0.98rem;
    font-weight: 500;
    color: #3a4250;
    text-decoration: none;
    display: block;
    transition: color 0.2s, padding-inline-start 0.2s;
    line-height: 1.55;
}
.article-toc nav ul ul a:hover {
    color: var(--color-primary-dark, var(--color-primary));
    padding-inline-start: 0.25rem;
}
.article-toc nav a.toc-active {
    color: var(--color-primary-dark, var(--color-primary)) !important;
    font-weight: 700;
}
.article-toc nav > ul > li > a.toc-active::before {
    background: var(--color-primary);
    color: #ffffff;
}

/* ── Prev/Next navigation ────────────────────────────────── */
.prev-next-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 3rem auto 2rem;
    max-width: 760px;
}
@media (max-width: 640px) { .prev-next-nav { grid-template-columns: 1fr; } }
.prev-next-card {
    background: #faf9f7;
    border: 1px solid rgba(232,105,42,0.12);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: all 0.25s;
}
.prev-next-card:hover { border-color: var(--ember-glow); background: rgba(232,105,42,0.04); }
.prev-next-card.next-card { text-align: end; }
.prev-next-direction {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ember-glow);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.prev-next-card.next-card .prev-next-direction { justify-content: flex-end; }
.prev-next-title { font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--color-neutral-900); line-height: 1.3; }
.prev-next-date { font-size: 0.72rem; color: var(--color-neutral-500); }

/* ── Service conversion block ────────────────────────────── */
.service-conversion-block {
    background: linear-gradient(135deg, #1a0d05 0%, #2a1408 50%, #1f1008 100%);
    border-radius: 1rem;
    padding: 2.5rem;
    margin: 3rem auto;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}
.service-conversion-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232,105,42,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.service-conversion-block > * { position: relative; z-index: 1; }
.service-conversion-block h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.service-conversion-block h3::after { display: none !important; }
.service-conversion-block p { color: rgba(240,242,245,0.72); font-size: 1rem; margin: 0; }
.service-conversion-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.btn-ember-outline, .btn-outline {
    border: 1px solid rgba(232,105,42,0.5);
    color: var(--ember-soft);
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-ember-outline:hover, .btn-outline:hover { background: rgba(232,105,42,0.15); border-color: var(--ember-glow); color: white; }

/* ── Founder card ────────────────────────────────────────── */
.founder-card {
    background: #faf9f7;
    border: 1px solid rgba(232,105,42,0.15);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem 0;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (max-width: 640px) { .founder-card { flex-direction: column; } }
.founder-card-photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(232,105,42,0.3);
    flex-shrink: 0;
}
.founder-card-name { font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--color-neutral-900); margin-bottom: 0.2rem; }
.founder-card-title { color: var(--ember-glow); font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
.founder-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.founder-badge {
    background: rgba(232,105,42,0.1);
    border: 1px solid rgba(232,105,42,0.25);
    color: var(--ember-deep);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    letter-spacing: 0.03em;
}

/* ── Trust pillars (legacy, still referenced elsewhere) ──── */
.trust-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (min-width: 768px) { .trust-pillars { grid-template-columns: repeat(4, 1fr); } }
.trust-pillar { text-align: center; padding: 1.5rem 1rem; }
.trust-pillar-icon { font-size: 2rem; color: var(--ember-glow); margin-bottom: 0.75rem; }
.trust-pillar-label { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--color-neutral-900); margin-bottom: 0.35rem; }
.trust-pillar-desc { font-size: 0.82rem; color: var(--color-neutral-600); line-height: 1.5; }

/* ── Principle cells (homepage trust manifesto) ──────────── */
.principle-cell {
    position: relative;
    padding: 2.25rem 1.75rem;
    border-inline-end: 1px solid rgba(232, 105, 42, 0.14);
    transition: background 0.25s;
}
.principle-cell:last-child {
    border-inline-end: none;
}
@media (max-width: 1023px) {
    .principle-cell:nth-child(2n) { border-inline-end: none; }
    .principle-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(232, 105, 42, 0.14); }
}
@media (max-width: 767px) {
    .principle-cell {
        border-inline-end: none !important;
        border-bottom: 1px solid rgba(232, 105, 42, 0.14);
    }
    .principle-cell:last-child { border-bottom: none; }
}
.principle-cell:hover {
    background: rgba(232, 105, 42, 0.04);
}
.principle-num {
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--ember-glow);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.principle-num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(232, 105, 42, 0.4), transparent);
}
.principle-icon {
    font-size: 1.5rem;
    color: var(--ember-bright);
    margin-bottom: 1rem;
    display: block;
}
.principle-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8f7f5;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}
.principle-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(248, 247, 245, 0.62);
}

/* ── Article cards (list pages) ──────────────────────────── */
.article-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-neutral-100);
    border-inline-start: 3px solid transparent;
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: all 0.3s ease;
    text-decoration: none;
}
.article-card:hover {
    border-inline-start-color: var(--ember-glow);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.article-card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.article-tag {
    background: rgba(232,105,42,0.1);
    color: var(--ember-deep);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.article-card-date { font-size: 0.75rem; color: var(--color-neutral-500); }
.article-card-title { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--color-neutral-900); line-height: 1.3; }
.article-card-subtitle { font-size: 0.875rem; color: var(--color-neutral-600); line-height: 1.5; }
.article-card-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--color-neutral-500); margin-top: 0.25rem; }
.article-card-link {
    color: var(--ember-glow);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.5rem;
    transition: color 0.2s;
}
.article-card-link:hover { color: var(--ember-deep); }

/* ── Services grid (homepage) ────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(232,105,42,0.1);
    border-radius: 0.875rem;
    overflow: hidden;
}
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
.services-grid-item {
    background: var(--ember-800);
    padding: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-decoration: none;
    transition: background 0.2s;
}
.services-grid-item:hover { background: var(--ember-700); }
.services-grid-icon { font-size: 1.4rem; color: var(--ember-glow); flex-shrink: 0; margin-top: 0.15rem; }
.services-grid-title { font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--ember-text); margin-bottom: 0.2rem; }
.services-grid-desc { font-size: 0.78rem; color: var(--ember-text-muted); line-height: 1.5; }
.services-grid-arrow { color: var(--ember-deep); font-size: 0.7rem; margin-top: 0.4rem; }

/* ── Latest articles strip (footer) ──────────────────────── */
.articles-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .articles-strip { grid-template-columns: repeat(3, 1fr); }
}
.articles-strip-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.2rem 1rem;
    background: rgba(232, 105, 42, 0.04);
    border: 1px solid rgba(232, 105, 42, 0.12);
    border-radius: 0.625rem;
    text-decoration: none;
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
    overflow: hidden;
}
.articles-strip-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember-deep) 100%);
    opacity: 0;
    transition: opacity 0.25s;
}
.articles-strip-item:hover {
    background: rgba(232, 105, 42, 0.09);
    border-color: rgba(232, 105, 42, 0.32);
    transform: translateY(-2px);
}
.articles-strip-item:hover::before { opacity: 1; }
.articles-strip-date {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ember-glow);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.articles-strip-date::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ember-glow);
    box-shadow: 0 0 8px rgba(232, 105, 42, 0.6);
}
.articles-strip-title {
    font-family: 'Syne', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ember-text);
    line-height: 1.35;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.articles-strip-meta {
    margin-top: auto;
    padding-top: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--ember-text-muted);
}
.articles-strip-read {
    color: var(--ember-glow);
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap 0.25s;
}
.articles-strip-item:hover .articles-strip-read { gap: 0.55rem; }

/* ── Form ember styles ───────────────────────────────────── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--ember-glow) !important;
    box-shadow: 0 0 0 3px rgba(232,105,42,0.15) !important;
}
.form-success {
    background: rgba(232,105,42,0.08);
    border-inline-start: 4px solid var(--ember-glow);
    border-start-start-radius: 0;
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    border-end-start-radius: 0;
    padding: 1rem 1.25rem;
    color: var(--ember-deep);
    font-weight: 500;
}
.form-error {
    background: rgba(244,63,94,0.08);
    border-inline-start: 4px solid #f43f5e;
    border-start-start-radius: 0;
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    border-end-start-radius: 0;
    padding: 1rem 1.25rem;
    color: #be123c;
}
.form-info {
    background: rgba(232,105,42,0.06);
    border-inline-start: 4px solid var(--ember-copper);
    border-start-start-radius: 0;
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    border-end-start-radius: 0;
    padding: 1rem 1.25rem;
    color: var(--ember-copper);
}

/* ── Service list editorial cards ────────────────────────── */
.service-editorial-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.875rem;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    text-decoration: none;
    transition: all 0.25s;
}
.service-editorial-card:hover {
    border-color: rgba(232,105,42,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.service-editorial-icon {
    width: 52px; height: 52px;
    background: rgba(232,105,42,0.1);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--ember-glow);
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.service-editorial-card:hover .service-editorial-icon { background: var(--ember-glow); color: white; }
.service-editorial-title { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--color-neutral-900); margin-bottom: 0.35rem; }
.service-editorial-desc { font-size: 0.875rem; color: var(--color-neutral-600); line-height: 1.5; margin-bottom: 0.5rem; }
.service-editorial-link { color: var(--ember-glow); font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; transition: gap 0.2s ease, color 0.2s ease; }
.service-editorial-card:hover .service-editorial-link { gap: 0.55rem; color: var(--ember-deep); }

/* ═══════════════════════════════════════════════════════
   POLISH PASS — hover, focus, active, micro-interactions
   ═══════════════════════════════════════════════════════ */

/* Smooth global cubic transitions for interactive elements */
a, button, .btn-ember, .btn-primary, .btn-ember-outline, .btn-outline,
.article-card, .service-editorial-card, .articles-strip-item,
.principle-cell, .prev-next-card, .mobile-tab,
.founder-badge, .article-tag, .reading-time-badge {
    transition-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Focus-visible rings — accessibility for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--ember-glow);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Buttons — add press-down feedback on active */
.btn-ember:active, .btn-primary:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 0.08s;
}
.btn-ember-outline, .btn-outline {
    transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn-ember-outline:active, .btn-outline:active {
    transform: scale(0.98);
    transition-duration: 0.08s;
}

/* Card hover lifts — soften and unify across the grid components */
.article-card,
.service-editorial-card {
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s, background 0.3s;
    transform: translateZ(0);
    will-change: transform;
}
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.service-editorial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* Article-card title gets subtle ember tint on hover */
.article-card:hover .article-card-title {
    color: var(--ember-deep);
    transition: color 0.25s ease;
}
.article-card-title { transition: color 0.25s ease; }

/* Article-card link arrow shifts on hover */
.article-card-link {
    transition: gap 0.25s ease, color 0.25s ease;
}
.article-card:hover .article-card-link {
    gap: 0.55rem;
    color: var(--ember-deep);
}

/* Article tags — gentle pop on card hover */
.article-tag {
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.article-card:hover .article-tag {
    background: rgba(232, 105, 42, 0.18);
}

/* Founder badges — interactive feel */
.founder-badge {
    transition: background 0.2s ease, transform 0.2s ease;
}
.founder-badge:hover {
    background: rgba(232, 105, 42, 0.2);
    transform: translateY(-1px);
}

/* Service editorial icon — smoother color flip */
.service-editorial-icon {
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.service-editorial-card:hover .service-editorial-icon {
    transform: scale(1.05) rotate(-3deg);
}

/* Reading-time badge in hero */
.reading-time-badge {
    transition: background 0.2s ease, transform 0.2s ease;
}
.reading-time-badge:hover {
    background: rgba(232, 105, 42, 0.25);
}

/* Prev/Next nav — arrow nudge on hover */
.prev-next-card .prev-next-direction i,
.prev-next-card.next-card .prev-next-direction i {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.prev-next-card.prev-card:hover .prev-next-direction i {
    transform: translateX(-3px);
}
.prev-next-card.next-card:hover .prev-next-direction i {
    transform: translateX(3px);
}
.prev-next-card:hover .prev-next-title {
    color: var(--ember-deep);
}
.prev-next-title {
    transition: color 0.2s ease;
}

/* Latest articles strip cards — subtle scale on hover */
.articles-strip-item {
    transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.articles-strip-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Footer top separator — the footer (bg-dark) often sits directly below a dark
   section (e.g. the CTA block), so the two blacks merge. Two things keep them
   apart: (1) the footer gets a distinctly lighter, cooler slate background so it
   reads as its own slab below the warm near-black CTA, and (2) an ember gradient
   hairline at the top edge — the site's signature accent — marks the seam. */
footer.bg-dark {
    position: relative;
    border-top: 1px solid var(--ember-700, #1e2636);
}
footer.bg-dark::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--ember-deep, #c4511a) 0%,
        var(--ember-glow, #e8692a) 50%,
        var(--ember-bright, #f5813d) 100%
    );
}

/* Footer LinkedIn social button — smoother color shift */
footer a[href*="linkedin"] {
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
footer a[href*="linkedin"]:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(232, 105, 42, 0.25);
}

/* Footer quick-link list — color and slide */
footer ul li a {
    transition: color 0.2s ease, padding-inline-start 0.2s ease;
}
footer ul li a:hover {
    padding-inline-start: 0.25rem;
}

/* Scroll-to-top button — smooth spring on appear/hover */
#scrollToTop {
    transition: opacity 0.3s, visibility 0.3s, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.25s ease, box-shadow 0.25s ease;
}
#scrollToTop:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 24px rgba(232, 105, 42, 0.5);
}

/* TOC links — smooth left-padding nudge */
.article-toc nav > ul > li > a {
    transition: color 0.25s ease, transform 0.25s ease;
}
.article-toc nav > ul > li > a:hover {
    transform: translateX(2px);
}

/* Markdown content links — animated underline grow */
.markdown-content a:not(.btn-ember):not(.btn-primary):not(.btn-ember-outline):not(.btn-outline) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease, color 0.2s ease;
    text-decoration: none;
    padding-bottom: 1px;
}
.markdown-content a:not(.btn-ember):not(.btn-primary):not(.btn-ember-outline):not(.btn-outline):hover {
    background-size: 100% 1px;
}

/* Header desktop nav links — smooth color/background transition unified */
nav a[data-active], nav a {
    transition: color 0.2s ease, background 0.2s ease;
}

/* Form inputs — smooth focus ring grow */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Form submit buttons — subtle press feedback */
button[type="submit"]:active {
    transform: scale(0.98);
    transition-duration: 0.08s;
}

/* Image bump-out cards — mild lift on hover (only the linked ones).
   IMPORTANT: do NOT change `display` on the wrapping <a> — the image
   inside is float:right and an inline-block parent traps the float. */
img.img-bump,
.post-body p img[src$=".jpg" i]:not([src^="http"]):not([src^="//"]),
.post-body p img[src$=".jpeg" i]:not([src^="http"]):not([src^="//"]) {
    transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
a:hover > img.img-bump,
img.img-bump:hover,
.post-body p a:hover > img[src$=".jpg" i]:not([src^="http"]):not([src^="//"]),
.post-body p a:hover > img[src$=".jpeg" i]:not([src^="http"]):not([src^="//"]),
.post-body p img[src$=".jpg" i]:not([src^="http"]):not([src^="//"]):hover,
.post-body p img[src$=".jpeg" i]:not([src^="http"]):not([src^="//"]):hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
    filter: brightness(1.04) saturate(1.05);
}

/* Selection color — match brand */
::selection {
    background: rgba(232, 105, 42, 0.25);
    color: var(--ember-900);
}

/* ═══════════════════════════════════════════════════════
   AMBIENT EFFECTS — static decorations only, no idle pulses
   ═══════════════════════════════════════════════════════ */

/* Header logo — static ember glow (no pulse) */
nav img[alt="Kor Bilişim"] {
    box-shadow: 0 0 14px rgba(232, 105, 42, 0.18);
}

/* Hero accent line — static gradient (no shimmer) */
.hero-accent-line .line {
    background: linear-gradient(90deg, transparent, var(--ember-glow));
}
.hero-accent-line .line-r {
    background: linear-gradient(90deg, var(--ember-glow), transparent);
}

/* Reading-progress bar — soft ember glow at the leading edge (static) */
.reading-progress {
    box-shadow: 0 0 10px rgba(232, 105, 42, 0.6);
}
.reading-progress::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 8px;
    background: var(--ember-bright);
    filter: blur(4px);
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════
   ENJOYMENT LAYER — richer micro-interactions and warmth
   ═══════════════════════════════════════════════════════ */

/* (Hero slide cross-fade is handled by hero-slide-a / hero-slide-b
   keyframes earlier in this file — no override here.) */

/* Article cards — ember-tinted glow on hover, deeper shadow */
.article-card:hover {
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(232, 105, 42, 0.15),
        0 0 28px rgba(232, 105, 42, 0.10);
}
.service-editorial-card:hover {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(232, 105, 42, 0.18),
        0 0 32px rgba(232, 105, 42, 0.12);
}

/* btn-ember — shine sweep on hover (diagonal gloss) */
.btn-ember::after, .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0) 35%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0.0) 65%,
        transparent 100%);
    transition: left 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}
.btn-ember:hover::after, .btn-primary:hover::after { left: 140%; }

/* Article tags — gentle bounce on hover */
@keyframes tag-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08) rotate(-1.5deg); }
    100% { transform: scale(1) rotate(0); }
}
.article-tag:hover { animation: tag-pop 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); }

/* Founder badges — same playful pop on hover */
.founder-badge:hover { animation: tag-pop 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); }

/* Homepage Trust Pillars (4 mini-cards: Native Cloud / Open Source / etc.)
   Subtle hover: card lifts, icon bubble tints deeper, title shifts ember-deep,
   thin ember underline grows under the title. No bounce, no pulse. */
.trust-pillar {
    position: relative;
    border-radius: 0.75rem;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.3s ease;
    cursor: default;
}
.trust-pillar > div:first-child {
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}
.trust-pillar > div:first-child > i {
    transition: color 0.3s ease;
}
.trust-pillar > .font-poppins {
    transition: color 0.3s ease;
}
.trust-pillar::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}
.trust-pillar:hover {
    transform: translateY(-4px);
    background: rgba(232, 105, 42, 0.04);
}
.trust-pillar:hover::after {
    width: 92%;
}
.trust-pillar:hover > div:first-child {
    background: rgba(232, 105, 42, 0.18) !important;
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(232, 105, 42, 0.18);
}
.trust-pillar:hover > div:first-child > i {
    color: var(--ember-deep) !important;
}
.trust-pillar:hover > .font-poppins {
    color: var(--ember-deep) !important;
}

/* Same bottom-border-grow trick reused: */

/* Iletisim email + working-hours info cards */
.info-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.info-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}
.info-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 105, 42, 0.28) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.info-card:hover::after { width: 92%; }

/* Footer Latest Articles strip items — keep ember left-bar accent, add bottom underline */
.articles-strip-item::before { z-index: 1; }
.articles-strip-item::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}
.articles-strip-item:hover::after { width: 92%; }

/* Prev/Next nav cards */
.prev-next-card {
    position: relative;
    overflow: hidden;
}
.prev-next-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}
.prev-next-card:hover::after { width: 92%; }

/* Founder card — bottom underline on hover too */
.founder-card {
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.founder-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}
.founder-card:hover::after { width: 92%; }

/* Article-card top accent — gradient bar slides on card hover */
.article-card {
    position: relative;
    overflow: hidden;
}
.article-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ember-deep) 20%,
        var(--ember-glow) 50%,
        var(--ember-bright) 80%,
        transparent 100%);
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}
.article-card:hover::after { transform: translateX(0); }

/* Homepage 3-pillar cards (Cloud / Open Source / 24-7 Support) */
.homepage-pillar {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
.homepage-pillar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ember-deep) 20%,
        var(--ember-glow) 50%,
        var(--ember-bright) 80%,
        transparent 100%);
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
    border-radius: 1rem 1rem 0 0;
}
.homepage-pillar:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 105, 42, 0.35) !important;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(232, 105, 42, 0.18),
        0 0 36px rgba(232, 105, 42, 0.14);
}
.homepage-pillar:hover::after {
    transform: translateX(0);
}
.homepage-pillar h3 {
    transition: color 0.25s ease;
}
.homepage-pillar:hover h3 {
    color: var(--ember-deep) !important;
}
.homepage-pillar a {
    transition: gap 0.25s ease, color 0.25s ease;
}
.homepage-pillar:hover a {
    gap: 0.65rem !important;
    color: var(--ember-deep) !important;
}
.homepage-pillar:hover a i {
    transform: translateX(3px);
}

/* Service editorial card — same top-accent slide */
.service-editorial-card {
    position: relative;
    overflow: hidden;
}
.service-editorial-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ember-deep) 20%,
        var(--ember-glow) 50%,
        var(--ember-bright) 80%,
        transparent 100%);
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
    border-radius: 0.875rem 0.875rem 0 0;
}
.service-editorial-card:hover::after { transform: translateX(0); }

/* Founder card photo — static ember ring (no breathing) */
.founder-card-photo {
    box-shadow: 0 0 0 3px rgba(232, 105, 42, 0.30), 0 0 0 6px rgba(232, 105, 42, 0.08);
}

/* Service-editorial-link arrow — gentle hover wiggle */
@keyframes link-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}
.service-editorial-card:hover .service-editorial-link i {
    transform: translateX(3px);
}
.article-card:hover .article-card-link i {
    transform: translateX(3px);
}

/* Hero h1 orange accent — static drop-shadow glow, no shimmer */
.hero-ember h1 span,
section.hero-ember h1 span,
.block-hero--slideshow h1 span,
section.block-hero--slideshow h1 span,
section[class*="hero"] h1 span[style*="f5813d"] {
    filter: drop-shadow(0 0 12px rgba(245, 129, 61, 0.4));
}

/* Ember-glow-1 / ember-glow-2 already pulse — kick up the warmth a notch */
.hero-ember-glow-1,
.page-hero__glow--1,
.block-hero__glow--1 { filter: blur(70px) saturate(1.2); }
.hero-ember-glow-2,
.page-hero__glow--2,
.block-hero__glow--2 { filter: blur(90px) saturate(1.2); }

/* TOC numbered badge — soft entry hover scale */
.article-toc nav > ul > li > a:hover::before {
    transform: scale(1.08);
}
.article-toc nav > ul > li > a::before {
    transform-origin: center;
}

/* Header brand link — ember glow on hover for both logo and wordmark */
.brand-link .brand-logo {
    box-shadow: 0 0 14px rgba(232, 105, 42, 0.18);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.brand-link .brand-text {
    transition: color 0.3s ease, text-shadow 0.35s ease;
}
.brand-link:hover .brand-logo {
    box-shadow: 0 0 22px rgba(232, 105, 42, 0.55), 0 0 6px rgba(245, 129, 61, 0.35);
    transform: translateY(-1px);
}
.brand-link:hover .brand-text {
    color: #c4511a;
    text-shadow: 0 0 14px rgba(232, 105, 42, 0.45), 0 0 4px rgba(245, 129, 61, 0.35);
}

/* Smooth scroll snap-back when reduced motion isn't requested */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================================== */
/* Block-system styles (moved here from shared block-styles.css) */
/* ========================================================== */
/* W2 — block style variations. Mirror WP `.is-style-*` convention. */

/* Button */
.block-button.is-style-outline { background: transparent; border: 2px solid currentColor; color: inherit; }
.block-button.is-style-ghost { background: transparent; color: inherit; }
.block-button.is-style-link { background: transparent; padding: 0; color: var(--color-primary, #1976d2); text-decoration: underline; }

/* Image */
figure.is-style-rounded img { border-radius: 12px; }
figure.is-style-framed { padding: 8px; background: var(--color-paper, #fff); border: 1px solid rgba(0,0,0,.08); }
figure.is-style-circle img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Quote */
blockquote.is-style-large { font-size: 1.5rem; line-height: 1.4; border-inline-start: 4px solid var(--color-primary, #1976d2); padding-inline-start: 1rem; }
blockquote.is-style-pullquote { text-align: center; font-size: 1.75rem; border: none; padding: 1.5rem 0; }

/* Paragraph */
p.is-style-lead { font-size: 1.25rem; line-height: 1.6; }
p.is-style-small-caps { font-variant: small-caps; letter-spacing: .04em; }

/* Separator */
hr.is-style-dotted { border: none; border-top: 2px dotted currentColor; }
hr.is-style-wide { border: none; border-top: 1px solid currentColor; width: 80%; margin: 2rem auto; }

/* ─────────────────────────────────────────────────────────────── */
/*  Landing-page blocks                                            */
/*  Theme tokens only. No hardcoded colors outside graceful        */
/*  fallbacks for var() defaults.                                  */
/* ─────────────────────────────────────────────────────────────── */

.block-hero,
.block-scg,
.block-scl,
.block-vpg,
.block-cta,
.block-rp,
.block-cf {
    box-sizing: border-box;
}

.block-hero *,
.block-scg *,
.block-scl *,
.block-vpg *,
.block-cta *,
.block-rp *,
.block-cf * {
    box-sizing: border-box;
}

/* Shared container */
.block-hero__inner,
.block-cta__inner,
.block-scg,
.block-scl,
.block-vpg,
.block-rp {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Shared icon sizing (IconAllowlist SVGs come 24×24 with currentColor) */
.block-scg__card svg,
.block-scl__icon svg,
.block-vpg__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ─── Hero ──────────────────────────────────────────────────── */

.block-hero {
    width: 100%;
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.block-hero--gradient-primary {
    background: linear-gradient(
        135deg,
        var(--color-primary, #1976d2) 0%,
        color-mix(in srgb, var(--color-primary, #1976d2) 75%, #000 25%) 100%
    );
    color: #fff;
}

.block-hero--gradient-dark {
    background: linear-gradient(
        135deg,
        var(--color-on-background, #1a1a1a) 0%,
        #000 100%
    );
    color: #fff;
}

/* Image variant — photo background with scrim */
.block-hero--image {
    background-color: var(--color-surface, #f5f5f5);
    color: #fff;
}

/* Scrim: dark overlay so text is legible over any photo */
.block-hero--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    z-index: 0;
}

/* Force all text children to white — overrides theme-specific color tokens */
.block-hero--image .block-hero__inner,
.block-hero--image .block-hero__headline,
.block-hero--image .block-hero__subheadline,
.block-hero--image .block-hero__eyebrow {
    color: #fff;
}

/* Inner sits above scrim */
.block-hero--image .block-hero__inner {
    position: relative;
    z-index: 1;
}

.block-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.block-hero__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 1;
    color: var(--color-accent);
}

.block-hero__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: var(--font-heading-h1-weight, 700);
    max-width: 22ch;
}

.block-hero__subheadline {
    margin: 0;
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    line-height: 1.55;
    max-width: 60ch;
    opacity: 0.92;
}

.block-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.block-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.block-hero__cta:hover {
    transform: translateY(-1px);
}

.block-hero__cta--primary {
    background-color: #fff;
    color: var(--color-primary, #1976d2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.block-hero__cta--primary:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.block-hero__cta--secondary {
    background-color: transparent;
    color: inherit;
    border: 1.5px solid currentColor;
}

.block-hero__cta--secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Image variant CTAs — solid primary + white secondary border */
.block-hero--image .block-hero__cta--primary {
    background-color: var(--color-primary, #1976d2);
    color: #fff;
    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary, #1976d2), transparent 50%);
}

.block-hero--image .block-hero__cta--secondary {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.block-hero--image .block-hero__cta--secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* ─── Split layout ────────────────────────────────────────── */

.block-hero--layout-split .block-hero__inner {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    text-align: start;
    gap: clamp(2rem, 5vw, 4rem);
}

.block-hero--layout-split .block-hero__headline {
    max-width: none;
}

.block-hero--layout-split .block-hero__ctas {
    justify-content: flex-start;
}

.block-hero__media {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 16px);
    object-fit: cover;
    aspect-ratio: 4 / 3;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.3);
    display: block;
}

@media (max-width: 768px) {
    .block-hero--layout-split .block-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .block-hero--layout-split .block-hero__ctas {
        justify-content: center;
    }

    .block-hero__media-wrap {
        order: -1;
    }
}

/* ─── Hero: ember-outline secondary button (centered-slideshow variant) ─── */

.block-hero__ember-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(232,105,42,0.4);
    color: #f0f2f5;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s;
}
.block-hero__ember-outline:hover {
    border-color: #e8692a;
    color: #e8692a;
}

/* ─── Service Card Grid ────────────────────────────────────── */

.block-scg {
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.block-scg__header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.block-scg__eyebrow {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary, #ff6b35);
}
.block-scg__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.18;
    font-weight: 700;
    color: var(--color-on-background);
}

.block-scg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.block-scg__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1.75rem;
    border-radius: var(--radius-lg, 16px);
    background-color: var(--color-background, #fff);
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Ember sliding top-border accent — slides in on hover like the reference site */
.block-scg__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ember-deep, #c4511a) 20%,
        var(--ember-glow, #e8692a) 50%,
        var(--ember-bright, #f5813d) 80%,
        transparent 100%);
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
}

.block-scg__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10),
                0 0 0 1px rgba(232, 105, 42, 0.18),
                0 0 36px rgba(232, 105, 42, 0.10);
    border-color: rgba(232, 105, 42, 0.35) !important;
}

.block-scg__card:hover::before {
    transform: translateX(0);
}

.block-scg__card svg {
    width: 40px;
    height: 40px;
    color: var(--color-primary, #1976d2);
}

.block-scg__card-title {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
}

.block-scg__card-body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 75%, transparent);
    flex-grow: 1;
}

.block-scg__card-body p {
    margin: 0;
}

.block-scg__card-body p + p {
    margin-top: 0.75rem;
}

.block-scg__card-cta {
    align-self: flex-start;
    margin-top: auto;
    color: var(--color-primary, #1976d2);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.block-scg__card-cta::after {
    content: '→';
    transition: transform 0.15s ease;
}

.block-scg__card-cta:hover::after {
    transform: translateX(3px);
}

/* ─── Service List ─────────────────────────────────────────── */

.block-scl-wrap {
    padding-block: clamp(3rem, 6vw, 4.5rem);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.block-scl__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.25rem;
}
.block-scl__header-text { flex: 1 1 auto; }
.block-scl__eyebrow {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary, #ff6b35);
}
.block-scl__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.18;
    font-weight: 700;
    color: inherit;
}
.block-scl__view-all {
    color: var(--color-primary, #ff6b35);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.block-scl__view-all:hover { text-decoration: underline; }

.block-scl-wrap .block-scl {
    /* When wrapped, the inner grid no longer needs its own padding/container */
    padding-block: 0;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.block-scl {
    display: grid;
    gap: 1.25rem;
    padding-block: clamp(3rem, 6vw, 4.5rem);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.block-scl--cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-scl--cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    .block-scl--cols-2,
    .block-scl--cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .block-scl--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.block-scl__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    background-color: var(--color-background, #fff);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
                border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Ember left-border accent slides in on hover */
.block-scl__item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        var(--ember-deep, #c4511a) 0%,
        var(--ember-glow, #e8692a) 50%,
        var(--ember-bright, #f5813d) 100%);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
    border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
}

.block-scl__item:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 105, 42, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(232, 105, 42, 0.12);
}

.block-scl__item:hover::before {
    transform: scaleY(1);
}

/* SCL item image thumbnail */
.block-scl__image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    display: block;
    flex-shrink: 0;
}

.block-scl__item--has-image {
    gap: 0.875rem;
}

.block-scl__icon {
    width: 44px;
    height: 44px;
    color: var(--color-primary, #1976d2);
    /* tint from the glyph's OWN colour so the chip always matches it — themes
       that set the glyph to --color-accent get an accent chip automatically,
       no per-theme retint, no grey chip behind a coloured glyph. */
    background: color-mix(in srgb, currentColor, transparent 90%);
    border: 1px solid color-mix(in srgb, currentColor, transparent 80%);
    border-radius: var(--radius-md, 10px);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-scl__title {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
}

.block-scl__blurb {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 70%, transparent);
}

.block-scl__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ─── Value Props Grid ─────────────────────────────────────── */

.block-vpg-wrap {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.block-vpg__header {
    text-align: center;
    margin-bottom: 2.25rem;
}
.block-vpg__eyebrow {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary, #ff6b35);
}
.block-vpg__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.18;
    font-weight: 700;
    color: inherit;
}

.block-vpg-wrap .block-vpg {
    /* When wrapped, the inner grid no longer needs its own padding/container */
    padding-block: 0;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.block-vpg {
    display: grid;
    gap: 2rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    text-align: center;
}

.block-vpg__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0.5rem;
    border-radius: 0.75rem;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.3s ease;
    cursor: default;
    position: relative;
}

/* Ember bottom-line accent expands on hover */
.block-vpg__pillar::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-glow, #e8692a), transparent);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}

.block-vpg__pillar:hover {
    transform: translateY(-4px);
    background: rgba(232, 105, 42, 0.04);
}

.block-vpg__pillar:hover::after {
    width: 92%;
}

.block-vpg__pillar:hover .block-vpg__icon {
    background: color-mix(in srgb, var(--color-primary, #e8692a), transparent 75%) !important;
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(232, 105, 42, 0.18);
}

.block-vpg__icon {
    width: 64px;
    height: 64px;
    color: var(--color-primary, #1976d2);
    background: color-mix(in srgb, currentColor, transparent 88%);
    border: 1px solid color-mix(in srgb, currentColor, transparent 75%);
    border-radius: var(--radius-md, 12px);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}

.block-vpg__title {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
}

.block-vpg__description {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 70%, transparent);
    max-width: 28ch;
}

/* ─── CTA Section ──────────────────────────────────────────── */

.block-cta {
    padding: clamp(3rem, 7vw, 5rem) 0;
    text-align: center;
}

.block-cta--primary {
    background: linear-gradient(
        135deg,
        var(--color-primary, #1976d2) 0%,
        color-mix(in srgb, var(--color-primary, #1976d2) 75%, #000 25%) 100%
    );
    color: #fff;
}

.block-cta--subtle {
    background-color: var(--color-surface, #f5f5f5);
    color: var(--color-on-surface, #1a1a1a);
}

.block-cta--dark {
    background: linear-gradient(135deg, var(--ember-950) 0%, var(--ember-900) 40%, var(--ember-950) 70%, var(--ember-950) 100%);
    position: relative;
    overflow: hidden;
    color: var(--ember-text);
}
.block-cta--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, color-mix(in srgb, var(--ember-glow) 18%, transparent) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.block-cta--dark .block-cta__inner {
    position: relative;
    z-index: 2;
}

.block-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.block-cta__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.85;
}

.block-cta__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    font-weight: var(--font-heading-h2-weight, 700);
    max-width: 26ch;
}

.block-cta__subheadline {
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.55;
    max-width: 50ch;
    opacity: 0.9;
}

.block-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    font-size: 1.0625rem;
    text-decoration: none;
    margin-top: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.block-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.block-cta--primary .block-cta__btn {
    background-color: #fff;
    color: var(--color-primary, #1976d2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

/* Dark CTA button uses ember orange gradient — matching reference site's btn-ember */
.block-cta--dark .block-cta__btn {
    background: linear-gradient(135deg,
        var(--ember-deep, #c4511a) 0%,
        var(--ember-glow, #e8692a) 60%,
        var(--ember-bright, #f5813d) 100%);
    color: #fff;
    box-shadow: 0 0 40px rgba(232, 105, 42, 0.35), 0 4px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.block-cta--dark .block-cta__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--ember-glow, #e8692a) 0%,
        var(--ember-bright, #f5813d) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.block-cta--dark .block-cta__btn:hover::before {
    opacity: 1;
}

.block-cta--dark .block-cta__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 60px rgba(232, 105, 42, 0.55), 0 8px 30px rgba(0, 0, 0, 0.4);
}

.block-cta--dark .block-cta__btn > * {
    position: relative;
    z-index: 1;
}

.block-cta--subtle .block-cta__btn {
    background-color: var(--color-primary, #1976d2);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary, #1976d2) 30%, transparent);
}

/* ─── Recent Posts ─────────────────────────────────────────── */

.block-rp {
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.block-rp__header {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.block-rp__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #1976d2);
}

.block-rp__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
}

.block-rp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.block-rp__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg, 16px);
    background-color: var(--color-background, #fff);
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.block-rp__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-primary, #1976d2) 30%, transparent);
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.12);
}

.block-rp__card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.block-rp__card-date {
    margin: 0;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 55%, transparent);
}

.block-rp__card-reading-time {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 45%, transparent);
}

.block-rp__card-title {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
}

.block-rp__card-title a {
    color: var(--color-on-background, #1a1a1a);
    text-decoration: none;
}

.block-rp__card-title a:hover {
    color: var(--color-primary, #1976d2);
}

.block-rp__card-excerpt {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 72%, transparent);
    flex-grow: 1;
}

/* `.block-rp__card-link` wraps the entire card (title + excerpt + date),
   so it must be a block-level container, not inline-flex. */
.block-rp__card-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}
.block-rp__card-link:hover .block-rp__card-title {
    color: var(--color-primary, #1976d2);
}

.block-rp__footer {
    margin-top: 2.5rem;
    text-align: center;
}

.block-rp__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    background-color: transparent;
    color: var(--color-primary, #1976d2);
    border: 1.5px solid currentColor;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.block-rp__view-all:hover {
    background-color: var(--color-primary, #1976d2);
    color: #fff;
}

/* ─── Contact Form ─────────────────────────────────────────── */

.block-cf {
    padding-block: clamp(3rem, 7vw, 5rem);
}

.block-cf__inner {
    max-width: 640px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-cf__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #1a56db);
}

.block-cf__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.15;
    font-weight: var(--font-heading-h1-weight, 700);
    color: var(--color-on-background, #1a1a1a);
}

.block-cf__intro {
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 75%, transparent);
    max-width: 58ch;
}

.block-cf__success {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md, 8px);
    background-color: color-mix(in srgb, #16a34a 12%, transparent);
    border: 1px solid color-mix(in srgb, #16a34a 30%, transparent);
    color: #14532d;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.block-cf__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.block-cf__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.block-cf__label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-on-background, #1a1a1a);
}

.block-cf__optional {
    font-weight: 400;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 55%, transparent);
    font-size: 0.875rem;
}

.block-cf__input,
.block-cf__textarea,
.block-cf__select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm, 6px);
    border: 1.5px solid color-mix(in srgb, currentColor 20%, transparent);
    background-color: var(--color-background, #fff);
    color: var(--color-on-background, #1a1a1a);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.block-cf__input:focus,
.block-cf__textarea:focus,
.block-cf__select:focus {
    border-color: var(--color-primary, #1a56db);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #1a56db) 18%, transparent);
}

.block-cf__textarea {
    resize: vertical;
    min-height: 120px;
}

.block-cf__field--error .block-cf__input,
.block-cf__field--error .block-cf__textarea,
.block-cf__field--error .block-cf__select {
    border-color: #dc2626;
}

.block-cf__error {
    margin: 0;
    font-size: 0.8125rem;
    color: #dc2626;
}

.block-cf__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-primary, #1a56db);
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary, #1a56db) 28%, transparent);
}

.block-cf__submit:hover {
    background-color: color-mix(in srgb, var(--color-primary, #1a56db) 85%, #000 15%);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary, #1a56db) 35%, transparent);
}

.block-cf__submit:active {
    transform: translateY(0);
}

/* ─── Layout variants ─────────────────────────────────────── */

/* Hero layout variants */
.block-hero--layout-default  { /* baseline; inherits centred flex from __inner */ }

.block-hero--layout-centered {
    text-align: center;
}
.block-hero--layout-centered .block-hero__inner {
    max-width: 56rem;
    margin-inline: auto;
    padding-inline: var(--space-l, 2rem);
    align-items: center;
}

.block-hero--layout-split .block-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl, 3rem);
    align-items: center;
    text-align: start;
}
.block-hero--layout-split .block-hero__ctas {
    justify-content: flex-start;
}

.block-hero--layout-asymmetric .block-hero__inner {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-xl, 3rem);
    align-items: center;
    text-align: start;
}
.block-hero--layout-asymmetric .block-hero__ctas {
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .block-hero--layout-split .block-hero__inner,
    .block-hero--layout-asymmetric .block-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .block-hero--layout-split .block-hero__ctas,
    .block-hero--layout-asymmetric .block-hero__ctas {
        justify-content: center;
    }
}

/* Service Card Grid layout variants — target the inner grid */
.block-scg--layout-default .block-scg__grid  { /* inherits auto-fit */ }

.block-scg--layout-grid-2 .block-scg__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.block-scg--layout-grid-3 .block-scg__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.block-scg--layout-grid-4 .block-scg__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.block-scg--layout-feature-row .block-scg__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-l, 2rem);
}

@media (max-width: 768px) {
    .block-scg--layout-grid-2 .block-scg__grid,
    .block-scg--layout-grid-3 .block-scg__grid,
    .block-scg--layout-grid-4 .block-scg__grid,
    .block-scg--layout-feature-row .block-scg__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .block-scg--layout-grid-3 .block-scg__grid,
    .block-scg--layout-grid-4 .block-scg__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .block-scg--layout-feature-row .block-scg__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* SCG cover image (bleeds to card edges when present) */
/* The card has padding: 2rem 1.75rem. Negative margins pull the cover
   flush to all three non-bottom edges; padding-top:0 is NOT set so the
   positive margin offsets cancel correctly (margin-top: -2rem pulls from
   inside the 2rem top-padding to the card's physical top edge). */
.block-scg__cover {
    margin: -2rem -1.75rem 1rem;
    overflow: hidden;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
}

.block-scg__cover img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* SCG icon wrapper */
.block-scg__icon {
    width: 56px;
    height: 56px;
    color: var(--color-primary, #1976d2);
    background: color-mix(in srgb, currentColor, transparent 88%);
    border: 1px solid color-mix(in srgb, currentColor, transparent 75%);
    border-radius: var(--radius-md, 12px);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.block-scg__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.block-scg__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Value Props Grid layout variants */
.block-vpg--layout-default  { /* inherits auto-fit grid */ }

/* Scope the horizontal flex to the CARDS container (.block-vpg) only. The
   layout class is also on the outer .block-vpg-wrap, and an unscoped rule made
   the wrap a flex row too — laying the section header out as a narrow column to
   the LEFT of the cards instead of centred above them. */
.block-vpg.block-vpg--layout-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l, 2rem);
    align-items: flex-start;
}
.block-vpg--layout-horizontal .block-vpg__pillar {
    flex: 1 1 200px;
    text-align: start;
    align-items: flex-start;
}
/* Force icon-TOP cards for horizontal value props. Markup is icon/title/text as
   siblings (no text wrapper), so most themes set the pillar flex-direction:row —
   which lines up icon|title|description as three columns, wrapping the titles and
   forcing an ugly N-1 + orphan grid. (0,3,0) overrides every theme's
   `.block-vpg--layout-horizontal .block-vpg__pillar{flex-direction:row}` (0,2,0)
   while leaving each theme's card padding/border/accent intact. */
.block-vpg.block-vpg--layout-horizontal .block-vpg__pillar {
    flex-direction: column;
    align-items: flex-start;
}

.block-vpg--layout-numbered {
    counter-reset: vpg;
}
.block-vpg--layout-numbered .block-vpg__pillar {
    counter-increment: vpg;
    text-align: start;
    align-items: flex-start;
}
.block-vpg--layout-numbered .block-vpg__icon::before {
    content: counter(vpg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--color-primary, #1976d2);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}
.block-vpg--layout-numbered .block-vpg__icon svg {
    display: none;
}

.block-vpg--layout-iconless .block-vpg__icon {
    display: none;
}

@media (max-width: 768px) {
    .block-vpg--layout-horizontal {
        flex-direction: column;
    }
    .block-vpg--layout-horizontal .block-vpg__pillar {
        flex: 1 1 100%;
    }
}

/* CTA Section layout variants */
.block-cta--layout-default  { /* inherits centred flex from __inner */ }

.block-cta--layout-centered .block-cta__inner {
    align-items: center;
    text-align: center;
    max-width: 56rem;
    margin-inline: auto;
    padding-inline: var(--space-l, 2rem);
}

.block-cta--layout-split-image {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-xl, 3rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.block-cta--layout-split-image .block-cta__inner {
    align-items: flex-start;
    text-align: start;
    max-width: none;
    padding-inline: 0;
}

.block-cta--layout-inline-banner {
    padding-block: var(--space-l, 2rem);
}
.block-cta--layout-inline-banner .block-cta__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m, 1.5rem);
    text-align: start;
    max-width: 1200px;
}
.block-cta--layout-inline-banner .block-cta__btn {
    flex-shrink: 0;
    margin-top: 0;
}

@media (max-width: 768px) {
    .block-cta--layout-split-image {
        grid-template-columns: 1fr;
    }
    .block-cta--layout-split-image .block-cta__inner {
        align-items: center;
        text-align: center;
    }
    .block-cta--layout-inline-banner .block-cta__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ─── Unknown block fallback ───────────────────────────────── */

.block-unknown {
    margin: 1rem auto;
    max-width: 720px;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md, 8px);
    background-color: color-mix(in srgb, currentColor 5%, transparent);
    border: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
    font-size: 0.875rem;
    color: color-mix(in srgb, currentColor 70%, transparent);
    text-align: center;
}

/* ─── Section background variants (Stream E — token-extension pass) ─── */
.block-section {
    /* position: relative so decoration pseudo-elements can anchor absolutely. */
    position: relative;
}
.block-section--bg-default {
    background: var(--color-background, #fff);
    color: var(--color-on-background, #0f172a);
    position: relative;
}
.block-section--bg-muted {
    background-color: var(--color-surface-alt, var(--color-surface, #f1f5f9));
    background-image:
        radial-gradient(
            color-mix(in srgb, var(--color-on-background, #0f172a), transparent 92%) 1px,
            transparent 1.5px
        );
    background-size: 24px 24px;
    background-position: 0 0;
    color: var(--color-on-background, #0f172a);
    position: relative;
}
.block-section--bg-dark {
    background-color: var(--color-dark, #0f172a);
    background-image:
        radial-gradient(
            ellipse 80% 50% at 50% 0%,
            color-mix(in srgb, var(--color-primary, #1976d2), transparent 70%),
            transparent 60%
        ),
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-dark, #0f172a), black 30%) 100%);
    color: var(--color-on-dark, #f8fafc);
    position: relative;
}
.block-section--bg-bordered {
    background: var(--color-background, #fff);
    color: var(--color-on-background, #0f172a);
    border-block: 1px solid var(--color-border, #e2e8f0);
    position: relative;
}

.block-section--bg-dark .block-hero__headline,
.block-section--bg-dark .block-hero__subheadline,
.block-section--bg-dark .block-scg__card-title,
.block-section--bg-dark .block-scl__title,
.block-section--bg-dark .block-vpg__title,
.block-section--bg-dark .block-cta__headline,
.block-section--bg-dark .block-faq__question,
.block-section--bg-dark .block-stats__value,
.block-section--bg-dark .block-stats__headline,
.block-section--bg-dark .block-testimonials__author-name,
.block-section--bg-dark .block-testimonials__headline {
    color: var(--color-on-dark, #f8fafc);
}
.block-section--bg-dark .block-vpg__description,
.block-section--bg-dark .block-scg__card-body,
.block-section--bg-dark .block-scl__blurb,
.block-section--bg-dark .block-stats__label,
.block-section--bg-dark .block-stats__eyebrow,
.block-section--bg-dark .block-testimonials__quote,
.block-section--bg-dark .block-testimonials__author-role,
.block-section--bg-dark .block-faq__answer {
    color: color-mix(in srgb, var(--color-on-dark, #f8fafc) 80%, transparent);
}
/* Section wrappers own the background. Per-theme rules often paint the
   outer block wrapper (.block-vpg, .block-cta, etc.) with surface/primary
   — when wrapped in a section, that competes with the section's own bg.
   Force the immediate block wrapper transparent so the section's color
   shows through. Block-level *variant* classes (e.g. block-hero--variant-primary)
   are more specific and still win when explicitly used. */
.block-section .block-vpg,
.block-section .block-scg,
.block-section .block-scl,
.block-section .block-stats,
.block-section .block-testimonials,
.block-section .block-faq,
.block-section .block-rp {
    background: transparent;
}

/* ─── Decoration layer — ::after pseudo-elements sit below block content ─── */

/* Elevate all direct block content above decoration pseudo-elements */
.block-section > * {
    position: relative;
    z-index: 1;
}

.block-section--decoration-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 40% at 80% 50%,
        color-mix(in srgb, var(--color-primary, #1976d2), transparent 80%),
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 30% 50% at 20% 30%, color-mix(in srgb, var(--color-primary, #1976d2), transparent 85%), transparent 60%),
        radial-gradient(ellipse 30% 50% at 80% 70%, color-mix(in srgb, var(--color-accent, #f59e0b), transparent 85%), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-dots::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        color-mix(in srgb, currentColor, transparent 88%) 1px,
        transparent 1.5px
    );
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.block-section--decoration-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, currentColor, transparent 92%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, currentColor, transparent 92%) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.block-section--decoration-rays::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        conic-gradient(
            from 90deg at 50% 100%,
            transparent 0deg,
            color-mix(in srgb, var(--color-primary, #1976d2), transparent 88%) 60deg,
            transparent 120deg,
            transparent 240deg,
            color-mix(in srgb, var(--color-accent, #f59e0b), transparent 88%) 300deg,
            transparent 360deg
        );
    pointer-events: none;
    z-index: 0;
}

/* ─── SVG-backed decoration shapes (mask-image tinting) ─── */

.block-section--decoration-circles::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/circles.svg);
    mask-image: url(/decorations/circles.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top right -50px;
    mask-position: top right -50px;
    -webkit-mask-size: 600px;
    mask-size: 600px;
    background-color: var(--color-primary, #1976d2);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-hex-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/hex-grid.svg);
    mask-image: url(/decorations/hex-grid.svg);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 48px;
    mask-size: 48px;
    background-color: var(--color-accent, #f59e0b);
    opacity: 0.20;
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-plus-marks::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/plus-marks.svg);
    mask-image: url(/decorations/plus-marks.svg);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 24px;
    mask-size: 24px;
    background-color: var(--color-on-background, #0f172a);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-stripes::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/stripes.svg);
    mask-image: url(/decorations/stripes.svg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    background-color: var(--color-primary, #1976d2);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-triangles::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/triangles.svg);
    mask-image: url(/decorations/triangles.svg);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 36px;
    mask-size: 36px;
    background-color: var(--color-secondary, #64748b);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-blob::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/blob.svg);
    mask-image: url(/decorations/blob.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    -webkit-mask-size: 700px;
    mask-size: 700px;
    background-color: var(--color-accent, #f59e0b);
    opacity: 0.20;
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-dots-large::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/dots-large.svg);
    mask-image: url(/decorations/dots-large.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top right;
    mask-position: top right;
    -webkit-mask-size: 500px;
    mask-size: 500px;
    background-color: var(--color-primary, #1976d2);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.block-section--decoration-ray-fan::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(/decorations/rays.svg);
    mask-image: url(/decorations/rays.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    background-color: var(--color-primary, #1976d2);
    opacity: 0.20;
    pointer-events: none;
    z-index: 0;
}

/* VPG pillars are flat by default (no card bg) — keep them flat on dark too.
   Only force on-dark text color so titles + description inherit correctly. */
.block-section--bg-dark .block-vpg__pillar {
    background: transparent;
    border: none;
    color: var(--color-on-dark, #f8fafc);
}

/* Card-like blocks (SCG, SCL, Testimonials, FAQ) — lift to a lighter dark
   tone with a tinted border so they read as clearly card-shaped, not as
   "barely darker shade" boxes. */
.block-section--bg-dark .block-scg__card,
.block-section--bg-dark .block-scl__item,
.block-section--bg-dark .block-testimonials__item,
.block-section--bg-dark .block-faq__item {
    background: color-mix(in srgb, var(--color-dark, #0f172a), white 14%);
    border-color: color-mix(in srgb, var(--color-on-dark, #f8fafc), transparent 85%);
    color: var(--color-on-dark, #f8fafc);
}

/* Icon containers pop brighter on dark sections — make them visible halos
   instead of barely-tinted chips. */
.block-section--bg-dark .block-vpg__icon,
.block-section--bg-dark .block-scl__icon,
.block-section--bg-dark .block-scg__icon,
.block-section--bg-dark .block-stats__icon {
    background: color-mix(in srgb, var(--color-primary, #1976d2), transparent 65%);
    border-color: color-mix(in srgb, var(--color-primary, #1976d2), transparent 40%);
    color: var(--color-on-dark, #f8fafc);
    box-shadow: 0 0 24px -6px color-mix(in srgb, var(--color-primary, #1976d2), transparent 60%);
}

/* SVG decorations need more presence on dark sections — bump opacity so the
   geometric shapes actually read instead of fading into the page-dark. */
.block-section--bg-dark.block-section--decoration-circles::after,
.block-section--bg-dark.block-section--decoration-blob::after,
.block-section--bg-dark.block-section--decoration-dots-large::after,
.block-section--bg-dark.block-section--decoration-ray-fan::after {
    opacity: 0.35;
}
.block-section--bg-dark.block-section--decoration-hex-grid::after,
.block-section--bg-dark.block-section--decoration-plus-marks::after,
.block-section--bg-dark.block-section--decoration-stripes::after,
.block-section--bg-dark.block-section--decoration-triangles::after,
.block-section--bg-dark.block-section--decoration-grid::after,
.block-section--bg-dark.block-section--decoration-dots::after {
    opacity: 0.28;
}

/* ─── Stats ──────────────────────────────────────────────── */

.block-stats {
    box-sizing: border-box;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.block-stats *,
.block-stats *::before,
.block-stats *::after {
    box-sizing: border-box;
}

.block-stats__intro {
    text-align: center;
    margin-bottom: var(--space-xl, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.block-stats__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #1976d2);
}

.block-stats__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
}

.block-stats__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-xl, 3rem);
    text-align: center;
}

.block-stats--layout-grid-3 .block-stats__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block-stats--layout-grid-4 .block-stats__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.block-stats--layout-grid-6 .block-stats__items {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.block-stats__item {
    display: grid;
    grid-template-rows: 48px auto auto;
    align-items: center;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
}

.block-stats__item .block-stats__icon { grid-row: 1; }
.block-stats__item .block-stats__value { grid-row: 2; }
.block-stats__item .block-stats__label { grid-row: 3; }

.block-stats__icon {
    width: 48px;
    height: 48px;
    color: var(--color-primary, #1976d2);
    background: color-mix(in srgb, currentColor, transparent 88%);
    border: 1px solid color-mix(in srgb, currentColor, transparent 75%);
    border-radius: var(--radius-md, 10px);
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-stats__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.block-stats__value {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1;
    font-weight: 700;
    color: var(--color-on-background, #1a1a1a);
    letter-spacing: -0.02em;
}

.block-stats__suffix {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--color-primary, #1976d2);
    vertical-align: super;
    line-height: 1;
}

.block-stats__label {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 65%, transparent);
    max-width: 18ch;
}

@media (max-width: 768px) {
    .block-stats--layout-grid-3 .block-stats__items,
    .block-stats--layout-grid-4 .block-stats__items,
    .block-stats--layout-grid-6 .block-stats__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .block-stats--layout-grid-3 .block-stats__items,
    .block-stats--layout-grid-4 .block-stats__items,
    .block-stats--layout-grid-6 .block-stats__items {
        grid-template-columns: 1fr;
    }
}

/* ─── Testimonials ───────────────────────────────────────── */

.block-testimonials {
    box-sizing: border-box;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.block-testimonials *,
.block-testimonials *::before,
.block-testimonials *::after {
    box-sizing: border-box;
}

.block-testimonials__intro {
    text-align: center;
    margin-bottom: var(--space-xl, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.block-testimonials__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #1976d2);
}

.block-testimonials__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
}

.block-testimonials__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-l, 2rem);
}

.block-testimonials--layout-grid-2 .block-testimonials__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.block-testimonials--layout-grid-3 .block-testimonials__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block-testimonials__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 1.5rem);
    margin: 0;
    padding: var(--space-xl, 3rem) var(--space-l, 2rem);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-surface, #f5f5f5);
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.block-testimonials__quote {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 85%, transparent);
    flex-grow: 1;
    position: relative;
    padding-top: var(--space-l, 2rem);
}

.block-testimonials__quote::before {
    content: '\201C';
    position: absolute;
    top: -0.25rem;
    left: 0;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--color-primary, #1976d2);
    font-family: var(--font-heading, Georgia), serif;
    opacity: 0.4;
}

.block-testimonials__author {
    display: flex;
    align-items: center;
    gap: var(--space-s, 0.75rem);
}

.block-testimonials__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.block-testimonials__author-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.block-testimonials__author-name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
    line-height: 1.3;
}

.block-testimonials__author-role {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 60%, transparent);
}

@media (max-width: 768px) {
    .block-testimonials--layout-grid-2 .block-testimonials__items,
    .block-testimonials--layout-grid-3 .block-testimonials__items {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .block-testimonials--layout-grid-3 .block-testimonials__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ─── FAQ ────────────────────────────────────────────────── */

.block-faq {
    box-sizing: border-box;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.block-faq *,
.block-faq *::before,
.block-faq *::after {
    box-sizing: border-box;
}

.block-faq__intro {
    text-align: center;
    margin-bottom: var(--space-xl, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.block-faq__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #1976d2);
}

.block-faq__headline {
    margin: 0;
    font-family: var(--font-heading, Inter), system-ui, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-on-background, #1a1a1a);
}

.block-faq__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 0.75rem);
}

.block-faq--layout-two-column .block-faq__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s, 0.75rem);
}

.block-faq__item {
    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-background, #fff);
    overflow: hidden;
}

.block-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m, 1.5rem);
    padding: var(--space-m, 1.5rem) var(--space-l, 2rem);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-on-background, #1a1a1a);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.block-faq__question::-webkit-details-marker {
    display: none;
}

.block-faq__question::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary, #1976d2);
    transition: transform 0.2s ease;
}

.block-faq__item[open] .block-faq__question::after {
    content: '\2212';
    transform: rotate(0deg);
}

.block-faq__answer {
    padding: 0 var(--space-l, 2rem) var(--space-m, 1.5rem);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--color-on-background, #1a1a1a) 75%, transparent);
}

.block-faq__answer p {
    margin: 0;
}

.block-faq__answer p + p {
    margin-top: 0.75rem;
}

.block-faq__answer ul,
.block-faq__answer ol {
    margin: 0.75rem 0;
    padding-inline-start: 1.5rem;
}

.block-faq__answer li + li {
    margin-top: 0.375rem;
}

.block-faq__answer a {
    color: var(--color-primary, #1976d2);
    text-underline-offset: 2px;
}

@media (max-width: 768px) {
    .block-faq--layout-two-column .block-faq__items {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   block-media-text — image beside rich text, stacks on mobile
   ============================================================= */
.block-media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl, 32px);
    align-items: center;
    margin-block: var(--space-xl, 2rem);
}

.block-media-text__media {
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

.block-media-text__media img {
    width: 100%;
    height: auto;
    display: block;
}

.block-media-text__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 12px);
}

@media (max-width: 768px) {
    .block-media-text { grid-template-columns: 1fr; }
}

/* =============================================================
   block-data-table — imported CSV/XLSX rendered as sortable table
   ============================================================= */
.block-data-table {
    margin: 2rem 0;
    font-size: 0.95rem;
}

.block-data-table > figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0 0.75rem;
    color: var(--color-on-surface, #1a202c);
    font-weight: 600;
}

.block-data-table__caption-text {
    font-size: 1.05rem;
}

.block-data-table__download {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
}
.block-data-table__download:hover {
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    border-color: var(--color-primary);
}

.block-data-table__scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 4px;
}

.block-data-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.block-data-table thead th {
    text-align: start;
    padding: 0.75rem 0.85rem;
    background: var(--color-surface-2, #f6f7f9);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    font-weight: 700;
    white-space: nowrap;
}

.block-data-table thead th[data-sortable="true"] {
    cursor: pointer;
    user-select: none;
}

.block-data-table thead th[data-sortable="true"]:focus-visible {
    outline: 2px solid var(--color-primary, #ff6b35);
    outline-offset: -2px;
}

.block-data-table__th-label {
    display: inline-block;
    margin-inline-end: 0.4rem;
}

.block-data-table__sort-indicator {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    opacity: 0.3;
    vertical-align: middle;
    background:
        linear-gradient(45deg, transparent 50%, currentColor 50%) 0 100% / 50% 50% no-repeat,
        linear-gradient(-45deg, transparent 50%, currentColor 50%) 100% 100% / 50% 50% no-repeat,
        linear-gradient(135deg, transparent 50%, currentColor 50%) 0 0 / 50% 50% no-repeat,
        linear-gradient(-135deg, transparent 50%, currentColor 50%) 100% 0 / 50% 50% no-repeat;
}
.block-data-table thead th.is-sorted-asc .block-data-table__sort-indicator {
    opacity: 1;
    background:
        linear-gradient(135deg, transparent 50%, currentColor 50%) 0 0 / 50% 50% no-repeat,
        linear-gradient(-135deg, transparent 50%, currentColor 50%) 100% 0 / 50% 50% no-repeat;
}
.block-data-table thead th.is-sorted-desc .block-data-table__sort-indicator {
    opacity: 1;
    background:
        linear-gradient(45deg, transparent 50%, currentColor 50%) 0 100% / 50% 50% no-repeat,
        linear-gradient(-45deg, transparent 50%, currentColor 50%) 100% 100% / 50% 50% no-repeat;
}

.block-data-table tbody td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--color-border-soft, #f1f3f5);
    vertical-align: top;
}

.block-data-table--compact tbody td,
.block-data-table--compact thead th {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

.block-data-table--striped tbody tr:nth-child(even) td {
    background: var(--color-surface-2, #fafbfc);
}

.block-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* site-navigation */
.block-sn { display: flex; }
.block-sn__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.block-sn--stacked .block-sn__list { flex-direction: column; }
.block-sn__link { color: inherit; text-decoration: none; }
.block-sn__link:hover { text-decoration: underline; }

/* footer-columns */
.block-fc { padding: 2rem 0; }
.block-fc__inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.block-fc__title { margin: 0 0 .5rem 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; }
.block-fc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.block-fc__link { color: inherit; text-decoration: none; }
.block-fc__link:hover { text-decoration: underline; }

/* contact-info */
.block-ci__heading { margin: 0 0 .5rem 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; }
.block-ci__address { font-style: normal; display: flex; flex-direction: column; gap: 0.25rem; }
.block-ci__line { margin: 0; }
.block-ci__social { list-style: none; padding: 0; margin: 0.5rem 0 0 0; display: flex; gap: 0.75rem; }
.block-ci__social-item a { color: inherit; text-decoration: none; }
.block-ci__social-item a:hover { text-decoration: underline; }

/* link card */
.block-link { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--color-neutral-200, #e2e8f0); border-radius: 0.5rem; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.block-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.block-link__thumbnail { flex-shrink: 0; width: 120px; }
@media (max-width: 400px) { .block-link__thumbnail { width: 88px; } }
.block-link__thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.block-link__body { flex: 1; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.block-link__site-name { margin: 0; font-size: 0.75rem; color: var(--color-neutral-500, #6d7280); }
.block-link__title { margin: 0; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-link__description { margin: 0; font-size: 0.875rem; color: var(--color-neutral-600, #595d5d); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.block-link__url { margin: 0; font-size: 0.75rem; color: var(--color-neutral-400, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── content-blocks plugin ──────────────────────────────────────────────── */

/* table-of-contents */
.block-toc {
    background: var(--color-neutral-50, #f8fafb);
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-inline-start: 3px solid var(--ember-glow, #e8692a);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-block: 1.5rem;
    max-width: 640px;
}

.block-toc__title {
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-600, #596475);
    margin: 0 0 0.6rem;
}

.block-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.block-toc__item a {
    color: var(--color-primary-600, #104d97);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
}

.block-toc__item a:hover {
    color: var(--ember-glow, #e8692a);
    text-decoration: underline;
}

.block-toc__item--h3 {
    padding-inline-start: 1.25rem;
}

.block-toc__item--h3 a {
    font-size: 0.85rem;
    color: var(--color-neutral-600, #596475);
}

/* ── Single-article reading column ────────────────────────────────────────────
   Every top-level element of a single article — taxonomy/meta, featured image,
   table of contents, body text, social share, prev/next, related posts, comments
   and the comment form — fills the full card width (like Hugo), so the page reads
   as a single aligned spine flush to the card's padding edge. Full width is what
   lets the bump-out image's right edge reach the wrapper border; an 820px measure
   trapped the floated image ~38px short of it. The 18px body text keeps a
   comfortable reading measure at this width (mirrors Hugo's prose-lg). */
.article-single > * {
    max-width: none;
    margin-inline: 0;
}
/* The body wrapper stays full-width; its own children carry the column below. */
.article-single > .post-body { max-width: none; }
/* .content-panel already supplies the horizontal gutter, so drop the extra
   per-element inline padding that pushed body text out of line with the meta,
   image and TOC above it — now every line shares the same left edge. */
.article-single .post-body > *:not(blockquote):not(pre) { padding-inline: 0; }
/* Larger body type to match Hugo's prose-lg (18px / 1.7) now that the column
   spans the full card; headings keep their own absolute sizes. */
.article-single .post-body {
    font-size: 1.125rem;
    line-height: 1.7;
}
/* Table of contents lines up with — and reads as part of — that same column. */
.article-single > .block-toc {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* related-posts */
.block-related {
    margin-block: 2rem;
}

.block-related__title {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-neutral-700, #475569);
    margin: 0 0 1rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--color-neutral-200, #e2e8f0);
}

.block-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .block-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .block-related__grid { grid-template-columns: repeat(3, 1fr); }
}

.block-related__card {
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.block-related__card:hover {
    border-color: var(--ember-glow, #e8692a);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.block-related__card-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
}

.block-related__card-title {
    font-family: 'Syne', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-neutral-900, #1e293b);
    margin: 0;
    line-height: 1.35;
}

.block-related__card-excerpt {
    font-size: 0.82rem;
    color: var(--color-neutral-600, #596475);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.block-related__card-date {
    font-size: 0.72rem;
    color: var(--color-neutral-500, #6d7280);
    margin-top: auto;
    padding-top: 0.25rem;
}

/* social-share */
.block-share {
    margin-block: 1.5rem;
}

.block-share__heading {
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-600, #596475);
    margin: 0 0 0.6rem;
}

.block-share__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.block-share__link {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.15s, transform 0.15s;
    line-height: 1;
}

.block-share__link:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.block-share__link--x        { background: #000; }
.block-share__link--facebook  { background: #1877f2; }
.block-share__link--linkedin  { background: #0a66c2; }
.block-share__link--whatsapp  { background: #25d366; }
.block-share__link--email     { background: var(--color-neutral-600, #596475); }

/* ═══════════════════════════════════════════════════════
   CONTACT FORM — page layout matching Hugo single.html
   section-tiled-bg → info cards row → white form card
   ═══════════════════════════════════════════════════════ */

/* Override bare .block-cf when it uses the --page variant */
.block-cf--page {
    padding-block: clamp(4rem, 8vw, 6rem);
}

/* Centred column, matches Hugo max-w-5xl */
.block-cf__page-inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Info cards row (E-posta / Telefon / Konum) ──
   Auto-fit so 1–3 cards flow evenly and reflow to a single column on narrow
   screens without a hardcoded breakpoint. All colour/geometry is token-driven
   so the cards are light+crisp on kor and dark+amber on karbon. */
.block-cf__info-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.block-cf__info-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e8e3de);
    border-radius: var(--radius-lg, 0.75rem);
    padding: 1.4rem 1.45rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Accent hairline that wipes in along the top edge on hover. */
.block-cf__info-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--color-primary, #ff6b35);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.block-cf__info-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-primary, #ff6b35) 45%, var(--color-border, #e8e3de));
    box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--color-primary, #ff6b35) 45%, transparent);
}
.block-cf__info-card:hover::before { transform: scaleX(1); }

.block-cf__info-icon {
    width: 44px;
    height: 44px;
    background: color-mix(in srgb, var(--color-primary, #ff6b35) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #ff6b35) 24%, transparent);
    border-radius: var(--radius-md, 0.6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary, #e8692a);
    font-size: 1.05rem;
}

.block-cf__info-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--color-secondary, #8b9bb4);
    margin-bottom: 0.25rem;
}

.block-cf__info-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-primary, #e8692a);
    text-decoration: none;
    word-break: break-word;
}
.block-cf__info-value:hover { text-decoration: underline; }

.block-cf__info-value--text {
    color: var(--color-on-surface, #0d1018);
    font-weight: 600;
}

/* ── Form card (surface-token-driven) ── */
.block-cf__card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e8e3de);
    border-radius: var(--radius-lg, 1.25rem);
    padding: clamp(1.5rem, 5vw, 2.5rem);
}

.block-cf__card-heading {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-on-surface, #0d1018);
    margin: 0 0 1.5rem;
    padding: 0;
    border: none;
}

/* ── Eyebrow inside card ── */
.block-cf--page .block-cf__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ember-glow, #e8692a);
    margin: 0 0 0.5rem;
}

/* ── Form fields — rounded ember-focus style matching Hugo ── */
.block-cf--page .block-cf__form {
    gap: 1.25rem;
    margin-top: 0;
}

.block-cf--page .block-cf__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
    display: block;
}

.block-cf--page .block-cf__input,
.block-cf--page .block-cf__textarea,
.block-cf--page .block-cf__select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1.5px solid #d1d5db;
    background: #fafafa;
    color: #111827;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.block-cf--page .block-cf__input:focus,
.block-cf--page .block-cf__textarea:focus,
.block-cf--page .block-cf__select:focus {
    border-color: #e8692a;
    box-shadow: 0 0 0 3px rgba(232, 105, 42, 0.12);
}

.block-cf--page .block-cf__textarea {
    resize: vertical;
    min-height: 140px;
}

/* Select dropdown arrow */
.block-cf--page .block-cf__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-inline-end: 2.5rem;
}

/* Error state */
.block-cf--page .block-cf__field--error .block-cf__input,
.block-cf--page .block-cf__field--error .block-cf__textarea,
.block-cf--page .block-cf__field--error .block-cf__select {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

/* ── Consent row ── */
.block-cf--page .block-cf__field--consent .block-cf__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    cursor: pointer;
}

.block-cf--page .block-cf__field--consent input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
    accent-color: var(--ember-glow, #e8692a);
    border-radius: 3px;
}

/* Cross-theme consent guard (ported to the shared baseline). The consent LABEL
   carries `.block-cf__consent`; the checkbox is its child <input>. Some themes
   mistakenly style `.block-cf__consent` itself as the checkbox (width/height:1.1rem),
   which collapses the label so its long text overlaps the submit button. Force the
   label to a flex row and size the checkbox child. Specificity (0,2,1) beats every
   theme's `.block-cf__consent` rule but stays below kor's `.block-cf--page` rules
   above, so kor is untouched while every other theme is fixed. */
.block-cf__field--consent label.block-cf__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: auto;
    height: auto;
    font-weight: 400;
    cursor: pointer;
}
.block-cf__field--consent .block-cf__consent input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin-block-start: 0.2rem;
}

.block-cf--page .block-cf__field--consent a {
    color: var(--ember-glow, #e8692a);
    font-weight: 600;
    text-decoration: none;
}
.block-cf--page .block-cf__field--consent a:hover {
    text-decoration: underline;
}

/* ── Full-width ember submit button ── */
.block-cf__submit--full {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, var(--ember-deep, #c4511a) 0%, var(--ember-glow, #e8692a) 60%, var(--ember-bright, #f5813d) 100%);
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 4px 18px rgba(232, 105, 42, 0.30);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.block-cf__submit--full::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ember-glow, #e8692a) 0%, var(--ember-bright, #f5813d) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.block-cf__submit--full:hover::before { opacity: 1; }
.block-cf__submit--full:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(232, 105, 42, 0.45);
}
.block-cf__submit--full:active { transform: translateY(0); }
.block-cf__submit--full > * { position: relative; z-index: 1; }

/* ── Success banner inside card ── */
.block-cf--page .block-cf__success {
    background: rgba(232, 105, 42, 0.08);
    border-inline-start: 4px solid var(--ember-glow, #e8692a);
    border-start-start-radius: 0;
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    border-end-start-radius: 0;
    padding: 1rem 1.25rem;
    color: var(--ember-deep, #c4511a);
    font-weight: 500;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ── Founder card photo fallback (div with user SVG icon) ── */
.founder-card-photo--fallback {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(232, 105, 42, 0.12);
    border: 3px solid rgba(232, 105, 42, 0.3);
    box-shadow: 0 0 0 3px rgba(232, 105, 42, 0.30), 0 0 0 6px rgba(232, 105, 42, 0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ember-glow, #e8692a);
}

/* White content panel for single-page bodies (services, articles, pages) —
   matches Hugo's bg-white/90 backdrop-blur rounded-3xl shadow-2xl content card
   so prose never floats directly on the tiled section background. */
.content-panel {
    /* Single source of truth for the gutter: padding AND the bump-out image's
       negative-margin bleed both read --panel-pad, so they can never drift. */
    --panel-pad: 1.5rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    /* Surface-token-driven so the panel is white on light themes and dark on
       dark themes — the text inside is already token-driven (--color-on-surface),
       so this keeps real contrast instead of light-gray-on-white. */
    background: color-mix(in srgb, var(--color-surface, #ffffff) 92%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid #e8e3de;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.22), 0 8px 24px -14px rgba(0, 0, 0, 0.12);
    padding: var(--panel-pad);
}
@media (min-width: 768px) {
    .content-panel { --panel-pad: 3rem; }
}
@media (min-width: 1024px) {
    .content-panel { --panel-pad: 4rem; }
}
.content-panel > .prose,
.content-panel > .post-body,
.content-panel .markdown-content { max-width: none; }

/* Page-template flow blocks — on landing/static pages the body blocks render
   straight into .post-body--page (no .content-panel wrapper like blog/service
   pages). Full-bleed blocks always resolve to a <section> (their own, or a
   .block-section wrapper when they carry a background/decoration) and manage
   their own width. EVERY OTHER child is flow content — prose html blocks,
   founder card, paragraphs, headings, lists, images, quotes — and would
   otherwise span the full viewport. Center all non-section children on the
   64rem article column; give .prose blocks the .content-panel padding so
   .img-bump's negative right margins land on the column edge, not out of bounds.
   Structural (section vs flow), so it covers every page with no per-page rules. */
/* Tiled backdrop so the flow-content cards read against it. The image comes from
   the theme's --page-bg-image token (theme.json → global-styles), NOT hardcoded,
   so it's editable site-wide and inherited by every page. Overlay + tile match
   the .section-tiled-bg blocks so it's continuous with the full-bleed sections. */
.post-body--page {
    /* flow-root establishes a block formatting context so the first child's
       top margin does NOT collapse through the top edge. Without this the
       margin renders ABOVE the tiled backdrop, exposing the white body
       background as an empty band between the hero and the content. */
    display: flow-root;
    background-color: #f8f7f5;
    /* Fallback to the shared tiled texture so EVERY theme gets the page backdrop,
       not just the one theme (kor) that sets backgrounds.page.image in theme.json.
       Without a real fallback, non-kor themes resolved --page-bg-image to `none`
       and the main-content card sat on bare surface — "bg image lost on the sides".
       A theme can still override via its --page-bg-image token. */
    background-image:
        linear-gradient(var(--section-tiled-overlay, color-mix(in srgb, var(--color-surface, #ffffff) calc(var(--surface-overlay-alpha, 0.85) * 100%), transparent)), var(--section-tiled-overlay, color-mix(in srgb, var(--color-surface, #ffffff) calc(var(--surface-overlay-alpha, 0.85) * 100%), transparent))),
        var(--page-bg-image, url('/images/bg/bg15.jpg'));
    background-repeat: repeat, repeat;
    background-size: auto, 300px auto;
    background-position: center, center;
    background-attachment: fixed, fixed;
}
.post-body--page > :not(section) {
    max-width: 64rem;
    margin-inline: auto;
    box-sizing: border-box;
}
/* Prose flow blocks get the same white content card the blog/service pages use,
   so the "main content area" looks designed instead of bare floating text. The
   responsive padding doubles as the gutter .img-bump's negative margins meet. */
.post-body--page > .prose,
.post-body--page > .block-html > .prose {
    --panel-pad: 1.5rem;
    margin-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--color-surface, #ffffff);
    border: 1px solid #e8e3de;
    border-radius: 20px;
    box-shadow:
        0 22px 44px -18px rgba(0, 0, 0, 0.18),
        0 6px 18px -12px rgba(0, 0, 0, 0.10);
    padding: var(--panel-pad);
}
@media (min-width: 768px) {
    .post-body--page > .prose,
    .post-body--page > .block-html > .prose {
        --panel-pad: 3rem;
    }
}
@media (min-width: 1024px) {
    .post-body--page > .prose,
    .post-body--page > .block-html > .prose {
        --panel-pad: 4rem;
    }
}
/* The page hero already gives a hard visual break, so the backdrop band between
   it and the first flow block should be slim — not the full section-gap margin
   the prose/founder cards carry for spacing between each other. */
/* Slim backdrop band between the hero and the first FLOW block (prose/founder
   card). Full-bleed sections (.block-cf, .block-section, …) must stay flush —
   a top margin there exposes a white strip of the page background above the
   section's own tiled/coloured backdrop. */
.post-body--page > :first-child:not(section) {
    margin-top: clamp(1rem, 2vw, 1.5rem);
}
/* The founder card is a compact profile chip, not a full-width column. The
   generic :not(section) rule stretches every flow block to 64rem, which leaves
   the founder card mostly empty (reads as a white band). Shrink it to its
   content and center it instead. */
.post-body--page > .founder-card {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — all max-width overrides
   Scope: public Kor theme only. Desktop rules are UNCHANGED.
   Target breakpoint: max-width 640px (phone viewport).
   ═══════════════════════════════════════════════════════ */

/* ── Article card grid (/makaleler and archives) ─────────────────────────────
   Base .card-grid (public.css) uses auto-fit minmax(280px,1fr) which is fine.
   The article-list page was injecting an inline style with minmax(500px,1fr)
   that overflowed at 390px. We replaced that inline style with .article-card-grid
   and define it here to be fluid at all widths. */
.article-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr));
}

/* ── Service index grid (/servisler) ─────────────────────────────────────────
   Two-column desktop layout collapses to one column on mobile. The last-service
   full-width span (grid-column: 1/-1) is a no-op on 1-col layouts — harmless. */
.service-index-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .service-index-grid {
        grid-template-columns: 1fr;
    }
}

/* ── block-rp (Recent Posts / Related Posts homepage block) ──────────────────
   minmax(400px,1fr) is too wide for a 390px phone — every card forces overflow.
   Clamp the minimum to fit the viewport. */
.block-rp__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
}

/* ── block-scg auto-fit grid ─────────────────────────────────────────────────
   minmax(260px,1fr): fine at 390px but explicit 1-col safety net for edge cases. */
@media (max-width: 640px) {
    .block-scg__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Trust pillars (4-col at 768px → 2-col at <768px, 1-col at <480px) ───── */
@media (max-width: 480px) {
    .trust-pillars {
        grid-template-columns: 1fr;
    }
}

/* ── block-vpg (Value Props Grid) ───────────────────────────────────────────
   auto-fit minmax(200px,1fr): fine at 390px, but make explicit 1-col for small. */
@media (max-width: 480px) {
    .block-vpg {
        grid-template-columns: 1fr;
    }
}

/* ── Cookie consent banner ───────────────────────────────────────────────────
   On narrow phones the flex row wraps, but the message's flex-basis of 20rem
   (320px) combined with banner padding can still clip the right edge.
   Allow it to shrink to the viewport width and add safe padding. */
@media (max-width: 640px) {
    .cookie-consent {
        padding: 0.875rem 1rem;
        gap: 0.5rem 0.75rem;
    }
    .cookie-consent__message {
        flex: 1 1 100%;
        min-width: 0;
    }
    .cookie-consent__actions {
        flex-shrink: 0;
        flex-wrap: wrap;
    }
}

/* ── Site topbar (thin utility/contact bar above the header) ─────────────────
   Settings-driven partial (_topbar). Token-driven so it adopts the active
   theme's palette. One slim row; secondary items collapse on small screens. */
.site-topbar {
    background: var(--color-dark-alt, var(--color-dark, #0e1729));
    color: var(--color-on-dark, #ffffff);
    font-size: 0.8rem;
    border-block-end: 1px solid color-mix(in srgb, var(--color-on-dark, #ffffff) 12%, transparent);
}
.site-topbar__inner {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    min-block-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-topbar__group {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    min-width: 0;
}
.site-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    font-weight: 500;
    transition: color 0.15s ease;
}
a.site-topbar__item:hover {
    color: var(--color-accent, var(--color-primary, #ff6b35));
    text-decoration: none;
}
.site-topbar__item i {
    color: var(--color-accent, var(--color-primary, #ff6b35));
    font-size: 0.85em;
}
.site-topbar__item--muted {
    color: color-mix(in srgb, var(--color-on-dark, #ffffff) 68%, transparent);
}
.site-topbar__item span {
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 860px) {
    .site-topbar__item--hide-sm {
        display: none;
    }
    .site-topbar__inner {
        min-block-size: 2.2rem;
        padding-inline: 1rem;
        gap: 0.75rem;
    }
    .site-topbar__group {
        gap: 1rem;
    }
}
@media (max-width: 480px) {
    .site-topbar__group--end {
        display: none;
    }
}

/* ── Property gallery (editorial mosaic, no JS lightbox/scroller) ─────────────
   Lead tile spans 2×2; remaining tiles fill a dense 4-col grid. Each tile links
   to the full-resolution image (opens in a new tab) — no modal dialog. */
.property-gallery {
    margin-block: clamp(1.5rem, 4vw, 2.5rem);
}
.property-gallery__heading {
    font-family: var(--font-heading, inherit);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-on-surface, var(--color-text, #1a202c));
}
.property-gallery__heading::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 2px;
    background: var(--color-accent, var(--color-primary, #ff6b35));
    flex-shrink: 0;
}
.property-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(86px, 11vw, 142px);
    grid-auto-flow: dense;
    gap: 0.65rem;
}
.property-gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.05));
    grid-column: span 1;
    grid-row: span 1;
}
.property-gallery__item--lead {
    grid-column: span 2;
    grid-row: span 2;
}
.property-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.property-gallery__item:hover img,
.property-gallery__item:focus-visible img {
    transform: scale(1.05);
}
.property-gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 45%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.property-gallery__item:hover::after,
.property-gallery__item:focus-visible::after {
    opacity: 1;
}
.property-gallery__item:focus-visible {
    outline: 2px solid var(--color-accent, #ff6b35);
    outline-offset: 2px;
}
.property-gallery__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-dark, #0e1729) 55%, transparent);
    color: #ffffff;
    font-family: var(--font-heading, inherit);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
@media (max-width: 700px) {
    .property-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(96px, 30vw, 150px);
    }
    .property-gallery__item--lead {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* CRM Forms plugin — embedded form block */
.block-crm-form { margin: 1.5rem 0; }
.block-crm-form__heading { font-weight: 600; margin: 0 0 0.75rem; }
.block-crm-form__frame { display: block; width: 100%; border: 0; }
.block-crm-form--empty .block-crm-form__placeholder {
    padding: 1.5rem;
    border: 1px dashed var(--color-border, #d4d4d4);
    border-radius: 6px;
    color: var(--color-muted, #6b7280);
    text-align: center;
}