/* =========================================================
   animator.css  —  neutral, intentional, focused
   ========================================================= */

/* Smooth-scroll for navbar anchor clicks; sections offset so they don't
   sit underneath the fixed top navbar (~63px tall). */
html { scroll-behavior: smooth; }
section[id],
[id="experience"],
[id="education"] { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

:root {
    --ease-main: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Light palette — warm off-white (Image #2 reference) */
    --bg: #FAF6F0;
    --bg-soft: #F4ECE0;
    --ink: #14202E;
    --ink-rgb: 20, 32, 46;
    --muted: rgba(20, 32, 46, 0.68);
    --subtle: rgba(20, 32, 46, 0.46);
    --hair: rgba(20, 32, 46, 0.12);
    --rule: rgba(20, 32, 46, 0.22);
    --card: #FFFFFF;
    --card-border: rgba(20, 32, 46, 0.10);
    --card-highlight: rgba(255, 255, 255, 0.85);
    --card-shadow: 0 2px 4px rgba(20, 32, 46, 0.04),
                   0 18px 32px rgba(20, 32, 46, 0.08);
    --card-shadow-hover: 0 4px 8px rgba(20, 32, 46, 0.06),
                         0 28px 48px rgba(20, 32, 46, 0.12);

    /* Accent = skinscolor — used for pill headings, CTAs, focal moments */
    --stroke: var(--skinscolor, #54B9B7);
    --accent: var(--skinscolor, #54B9B7);
    --accent-ink: #ffffff;

    --container: 1180px;
    --radius-card: 22px;
    --radius-pill: 999px;

    /* Fixed navbar height — used by every section's scroll-margin-top so
       anchor-links land below the navbar instead of being covered by it.
       Also used by multipage pages to push the first section below nav. */
    --nav-h: 72px;

    /* Section padding vars (--section-pad-y / --section-pad-x-min /
       --section-pad-x-max) are owned by options.php → action_header_before(),
       which emits a :root { } block from the Style → Spacing admin panel.
       Defining them here too would *override* the admin values, because
       master.blade.php loads animator.css AFTER the inline <style>, and equal-
       specificity rules resolve in source order. The consuming rules at
       .section-shell, .section-body > .container, and .section-pages all use
       inline `var(..., 120px)` fallbacks, so an unconfigured site still
       renders sensibly without :root defaults living here. */

    /* Three-font system (2026-04-27 design ref) — doodle base aliases that
       every component in this file references. Each alias derives from the
       matching admin slot first (--ff-heading / --ff-body / --ff-accent set
       by options.php from the Style → Fonts panel) and falls back to the
       doodle defaults so an unconfigured site still renders correctly.
       - --ff-display: chunky rounded marker for pill section headings + display
       - --ff-sans:    clean body sans for descriptions, cards, paragraphs
       - --ff-hand:    handwritten accent for personal touches (Contact, captions)
       --ff-mono kept as a back-compat alias pointing at the body sans so any
       old class still works without a serif/mono mismatch. */
    --ff-display: var(--ff-heading, 'Fredoka'), var(--fontfamily, system-ui), sans-serif;
    --ff-sans:    var(--ff-body,    'Plus Jakarta Sans'), var(--fontfamily, system-ui), sans-serif;
    --ff-hand:    var(--ff-accent,  'Caveat'), 'Plus Jakarta Sans', cursive;
    --ff-serif:   var(--ff-heading, 'Fredoka'), Georgia, serif;
    --ff-mono:    var(--ff-body,    'Plus Jakarta Sans'), ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Admin font slots — options.php writes --ff-{slot} / --fw-{slot} / --fs-{slot}
   on :root from Style → Fonts. Slot hierarchy:
     1. hero          (.hero-name)
     2. heading       (.section-pill, h1-h4 — the Portfolio/Experience pill labels)
     3. subsection    (.project-card-title, .timeline-role — project + role titles)
     4. subsubsection (.timeline-company — company / workplace / school)
     5. accent / meta (.timeline-date, .about-role, contact rows — small captions)
     6. body          (paragraphs, descriptions)
     7. buttons       (.hand-btn, .chip, button) */
body {
    font-family: var(--ff-body, var(--ff-sans));
    font-weight: var(--fw-body, 400);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4,
.section-title h2, .section-title h3 {
    font-family: var(--ff-heading, var(--ff-display));
    font-weight: var(--fw-heading, 600);
}
/* h5/h6 are CARD-LEVEL titles (services / blog grid / pricing / clients).
   Map them to --ff-subsubsection so they render sans even when the admin
   picked a serif for --ff-subsection (project/role titles). */
h5, .h5, h6, .h6,
.featured-meta h5, .featured-meta h5 a {
    font-family: var(--ff-subsubsection, var(--ff-subsection, var(--ff-heading, var(--ff-display))));
    font-weight: var(--fw-subsubsection, var(--fw-subsection, var(--fw-heading, 600)));
}
.section-pill {
    font-family: var(--ff-heading, var(--ff-display));
    font-weight: var(--fw-heading, 700);
}
.project-card-title, .timeline-role, .card-title {
    font-family: var(--ff-subsection, var(--ff-heading, var(--ff-display)));
    font-weight: var(--fw-subsection, var(--fw-heading, 700));
}
.timeline-company {
    font-family: var(--ff-subsubsection, var(--ff-heading, var(--ff-display)));
    font-weight: var(--fw-subsubsection, var(--fw-heading, 600));
}
.timeline-date, .about-role, .skill-bar-pct,
.contact-follow-label, .contact-pill--plain {
    font-family: var(--ff-accent, var(--ff-display));
    font-weight: var(--fw-accent, 600);
}
.hand-btn, .chip, button,
.contact-pill, a.contact-pill,
.project-card-action,
.button, a.button, .btn, a.btn,
input[type="submit"], input[type="button"] {
    font-family: var(--ff-buttons, var(--ff-hand));
    font-weight: var(--fw-buttons, 600);
}

/* Normal (non-doodle) variant — strip the handwritten/playful fonts and the
   wobbly-edge filters so the theme renders as a clean, classic portfolio.
   Triggered by body.variant-normal (set from the Style → Theme admin tab).
   Reference: clean rectangular cards, sans-serif everything, flat pills,
   no SVG-filter brushed edges, no scribble flourishes. */
body.variant-normal {
    --ff-display: var(--ff-heading, var(--fontfamily, 'Plus Jakarta Sans')), system-ui, sans-serif;
    --ff-hand:    var(--ff-accent, var(--fontfamily, 'Plus Jakarta Sans')), system-ui, sans-serif;
    --ff-serif:   var(--ff-heading, Georgia), 'Times New Roman', serif;
}

/* Strip every brushed/wobble filter site-wide so no element gets the
   feTurbulence rough edge. Pseudo-elements get the same treatment. */
body.variant-normal *,
body.variant-normal *::before,
body.variant-normal *::after { filter: none !important; }

/* Hide all hand-drawn flourishes (doodles, scribble underlines, sparkles). */
body.variant-normal .section-doodle,
body.variant-normal .nav-doodle,
body.variant-normal .section-pill-star,
body.variant-normal .scribble,
body.variant-normal .doodle-flourish,
body.variant-normal .hero-doodle { display: none !important; }

/* Section pill — flat solid rectangle, no brushed background,
   no rotation, no playful tilt. */
body.variant-normal .section-pill {
    transform: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    background: var(--accent) !important;
    color: #fff !important;
}
body.variant-normal .section-pill::before,
body.variant-normal .section-pill::after { display: none !important; }
body.variant-normal .section-pill:hover { transform: translateY(-1px) !important; }

/* Hand button — flat outlined or filled rectangle, no brushed background. */
body.variant-normal .hand-btn {
    border-radius: 8px !important;
    transform: none !important;
    font-family: var(--ff-buttons, var(--ff-display)) !important;
    letter-spacing: normal !important;
    border: 1px solid var(--card-border) !important;
    background: var(--card) !important;
}
body.variant-normal .hand-btn::before,
body.variant-normal .hand-btn::after { display: none !important; }
body.variant-normal .hand-btn:hover { transform: translateY(-1px) !important; }

/* Chips — flat pill, no brushed edges. */
body.variant-normal .chip {
    border-radius: 999px !important;
    transform: none !important;
    background: var(--bg-soft) !important;
    border: 1px solid var(--card-border) !important;
    font-family: var(--ff-buttons, var(--ff-display)) !important;
    letter-spacing: normal !important;
}
body.variant-normal .chip::before,
body.variant-normal .chip::after { display: none !important; }

/* Cards — drop the brushed border pseudo-element on every card class so
   the variant toggle reads as "all cards = plain". Add a flat 1px border
   on the card itself in its place. Keep this list in sync whenever a new
   card class is introduced — the rule is "every card border matches". */
body.variant-normal .project-card,
body.variant-normal .timeline-card,
body.variant-normal .skills-card,
body.variant-normal .featured-post,
body.variant-normal .pricing-item,
body.variant-normal .pricing-plan,
body.variant-normal .planbox,
body.variant-normal .clients-card,
body.variant-normal .appointments-card,
body.variant-normal .faqs .accordion .section-content,
body.variant-normal .post-grid {
    transform: none !important;
    background: var(--card) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-card, 14px) !important;
    box-shadow: var(--card-shadow) !important;
}
body.variant-normal .project-card::before,
body.variant-normal .project-card::after,
body.variant-normal .timeline-card::before,
body.variant-normal .timeline-card::after,
body.variant-normal .skills-card::before,
body.variant-normal .skills-card::after,
body.variant-normal .featured-post::before,
body.variant-normal .featured-post::after,
body.variant-normal .pricing-item::before,
body.variant-normal .pricing-item::after,
body.variant-normal .pricing-plan::before,
body.variant-normal .pricing-plan::after,
body.variant-normal .planbox::before,
body.variant-normal .planbox::after,
body.variant-normal .clients-card::before,
body.variant-normal .clients-card::after,
body.variant-normal .appointments-card::before,
body.variant-normal .appointments-card::after,
body.variant-normal .faqs .accordion .section-content::before,
body.variant-normal .faqs .accordion .section-content::after,
body.variant-normal .post-grid::before,
body.variant-normal .post-grid::after { display: none !important; }
body.variant-normal .project-card:hover,
body.variant-normal .timeline-card:hover,
body.variant-normal .skills-card:hover { transform: translateY(-3px) !important; }

/* About card content — drop the dashed accent rail on the left. */
body.variant-normal .about-card-content { padding-left: 0 !important; }
body.variant-normal .about-card-content::before { display: none !important; }
body.variant-normal .about-card {
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
}

/* Timeline connector + nodes — drop wobbly filter; keep dashed line. */
body.variant-normal .timeline-rail,
body.variant-normal .timeline-line,
body.variant-normal .timeline-dot { filter: none !important; }

/* Default body / heading typography uses the picked sans/heading family
   so there's nothing handwritten left when variant-normal. */
body.variant-normal,
body.variant-normal h1,
body.variant-normal h2,
body.variant-normal h3,
body.variant-normal h4,
body.variant-normal h5,
body.variant-normal h6,
body.variant-normal p,
body.variant-normal a,
body.variant-normal button,
body.variant-normal .hero-name,
body.variant-normal .hero-typewriter,
body.variant-normal .hero-greeting,
body.variant-normal .hero-tagline,
body.variant-normal .about-role,
body.variant-normal .timeline-date {
    font-family: var(--ff-display) !important;
    letter-spacing: normal;
}
body.variant-normal h1, body.variant-normal .hero-name {
    font-family: var(--ff-hero, var(--ff-display)) !important;
    font-weight: var(--fw-hero, 700) !important;
}
body.variant-normal h2,
body.variant-normal h3,
body.variant-normal h4 {
    font-family: var(--ff-heading, var(--ff-display)) !important;
    font-weight: var(--fw-heading, 700) !important;
}
body.variant-normal p,
body.variant-normal .about-card-bio,
body.variant-normal .project-card-desc {
    font-family: var(--ff-body, var(--ff-display)) !important;
    font-weight: var(--fw-body, 400) !important;
}
body.variant-normal .hand-btn,
body.variant-normal button,
body.variant-normal .chip {
    font-family: var(--ff-buttons, var(--ff-display)) !important;
    font-weight: var(--fw-buttons, 500) !important;
}

/* Dark overrides — applied when .theme-dark sits on <html> or <body>.
   Image #2 dark reference: deep navy, slightly lighter cards. */
.theme-dark {
    --bg: #0E1521;
    --bg-soft: #131C2A;
    --ink: #F2EAD8;
    --ink-rgb: 242, 234, 216;
    --muted: rgba(242, 234, 216, 0.72);
    --subtle: rgba(242, 234, 216, 0.48);
    --hair: rgba(255, 255, 255, 0.10);
    --rule: rgba(255, 255, 255, 0.20);
    --card: #182232;
    --card-border: rgba(255, 255, 255, 0.06);
    --brush-border: rgba(255, 255, 255, 0.14);
    --card-highlight: rgba(255, 255, 255, 0.04);
    --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.35),
                   0 18px 32px rgba(0, 0, 0, 0.45);
    --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.45),
                         0 30px 48px rgba(0, 0, 0, 0.6);
}

/* Explicit light — overrides anything stale (Image #2 light reference). */
.theme-light {
    --bg: #FAF6F0;
    --bg-soft: #F4ECE0;
    --ink: #14202E;
    --ink-rgb: 20, 32, 46;
    --muted: rgba(20, 32, 46, 0.68);
    --subtle: rgba(20, 32, 46, 0.46);
    --hair: rgba(20, 32, 46, 0.12);
    --rule: rgba(20, 32, 46, 0.22);
    --card: #FFFFFF;
    --card-border: rgba(20, 32, 46, 0.10);
    --brush-border: rgba(20, 32, 46, 0.18);
    --card-highlight: rgba(255, 255, 255, 0.85);
    --card-shadow: 0 2px 4px rgba(20, 32, 46, 0.04),
                   0 18px 32px rgba(20, 32, 46, 0.08);
    --card-shadow-hover: 0 4px 8px rgba(20, 32, 46, 0.06),
                         0 28px 48px rgba(20, 32, 46, 0.12);
}

/* =========================================================
   SECTION HEADING — solid teal blob + flanking doodles.
   Reference Image #4–#11: pill is a chunky teal brush-stroke blob with
   white serif/handwriting text inside. Each section is flanked left + right
   by a different hand-drawn doodle so the page reads as drawn, not templated.
   Light mode: brighter teal gradient. Dark mode: darker teal gradient.
   ========================================================= */
.section-heading {
    display: inline-flex;
    width: max-content;
    justify-self: start;
    align-self: flex-start;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
}

.section-pill {
    position: relative;
    display: inline-block;
    width: max-content;
    justify-self: start;
    align-self: flex-start;
    padding: 0.18em 0.85em 0.24em;
    color: #ffffff;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0;
    transform: rotate(-1.5deg);
    z-index: 0;
    transition: transform 280ms var(--ease-bounce);
}
/* The teal blob lives on a ::before so the SVG turbulence filter only
   roughs up the background — text stays crisp, the brush edge looks real.
   Flat fill (no gradient/inset shadow) — the look is highlighter, not 3D. */
.section-pill::before {
    content: '';
    position: absolute;
    inset: -2px -6px;
    z-index: -1;
    background: var(--accent);
    /* default shape — overridden per variant. */
    border-radius: 50% / 60%;
    filter: url(#pill-brush-a);
}
/* Second highlighter pass — slightly offset, same accent. Flat fill, no
   blend mode, no opacity: just a second stroke shape that bleeds past the
   first to keep the brushed silhouette varied. */
.section-pill::after {
    content: '';
    position: absolute;
    inset: 1px -10px -3px -2px;
    z-index: -2;
    background: var(--accent);
    border-radius: inherit;
    filter: url(#pill-brush-b);
}
.section-pill:hover { transform: rotate(0deg) translateY(-1px); }

/* Per-variant: each pill gets a different silhouette + brush filter so
   they read as five distinct hand-drawn shapes, not five copies. */
.section-pill--a {
    transform: rotate(-1.5deg);
}
.section-pill--a::before {
    border-radius: 60% / 70%;
    filter: url(#pill-brush-a);
}

.section-pill--b {
    transform: rotate(-2.4deg);
}
.section-pill--b::before {
    /* Stretched lozenge — more pointed at ends */
    border-radius: 75% 50% 70% 55% / 80% 70% 60% 80%;
    filter: url(#pill-brush-b);
    transform: skewX(-3deg);
}

.section-pill--c {
    transform: rotate(-0.7deg);
}
.section-pill--c::before {
    /* Wide soft cloud — bulges upper-right */
    border-radius: 35% 70% 55% 80% / 70% 50% 80% 55%;
    filter: url(#pill-brush-c);
}

.section-pill--d {
    transform: rotate(-1.8deg);
}
.section-pill--d::before {
    /* Lopsided egg — bottom-heavy */
    border-radius: 45% 65% 80% 35% / 50% 80% 50% 70%;
    filter: url(#pill-brush-d);
    transform: skewX(2deg) scaleY(1.05);
}

.section-pill--e {
    transform: rotate(-1.1deg);
}
.section-pill--e::before {
    /* Slim oval, tilted */
    border-radius: 65% 35% 65% 35% / 50% 50% 50% 50%;
    filter: url(#pill-brush-e);
    transform: skewX(-1deg);
}

/* Dark mode: same flat accent — keeping it true to highlighter. */
.theme-dark .section-pill::before {
    background: var(--accent);
}

/* Doodles use the accent (skin) colour, not ink. */
.section-doodle {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    line-height: 0;
    transform: translateY(-1px);
}
.section-doodle--left  { transform: translateY(-1px) rotate(-6deg); }
.section-doodle--right { transform: translateY(-1px) rotate(5deg); }
.section-doodle svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.section-doodle--accent { color: var(--accent); }

/* Legacy ✦ star kept as alias so older blades don't break. */
.section-pill-star {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    margin-left: 10px;
    transform: translateY(-2px);
}

/* Handwritten accent — used for personal touches, never structure. */
.hand-accent {
    font-family: var(--ff-hand);
    font-weight: 600;
    color: var(--accent);
    line-height: 1.1;
    letter-spacing: 0.01em;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ff-sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 240ms var(--ease-main),
                color 240ms var(--ease-main);
}
body, p, span, a, li { font-weight: 300; }
strong, b { font-weight: 500; }


/* Paper layer: a subtle accent wash, visible only in dark mode.
   Light mode is pure white — no wash so the background stays true white. */
#paper {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: transparent;
}
.theme-dark #paper {
    background:
        radial-gradient(1100px 700px at 82% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        radial-gradient(900px 600px at 10% 88%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%);
    opacity: 0.7;
}
#wrapper { position: relative; z-index: 1; }
#main.content-pages { position: relative; z-index: 1; }

/* =========================================================
   Brush + paint-trail cursor
   ========================================================= */
/* Brush-stroke cursor — a loaded brush tip. JS sets the `--brush-len`,
   `--brush-rot`, and translate values so the dab stretches in the motion
   direction and rotates to follow the cursor's heading. */
/* Brush tip is rendered offscreen — only the trail is shown. */
#brush { display: none !important; }

/* Paint trail — a pool of dabs we recycle in JS. Each dab fades on a
   keyframe so the trail looks like wet paint thinning out. */
#cursor-trail {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
}
.brush-dab {
    position: absolute;
    top: 0; left: 0;
    width: 18px;
    height: 8px;
    margin-left: -9px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    filter: url(#ink-brush-c);
    will-change: transform, opacity;
}
.brush-dab.is-active {
    animation: brush-paint-fade 900ms var(--ease-main) forwards;
}
@keyframes brush-paint-fade {
    0%   { opacity: 0.85; }
    50%  { opacity: 0.55; }
    100% { opacity: 0; }
}

/* =========================================================
   Section shell
   ========================================================= */
section {
    position: relative;
    isolation: isolate;
}
.section-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
}
.section-bg svg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    will-change: transform;
}
.section-bg [data-parallax] { will-change: transform; }
.section-bg path,
.section-bg rect,
.section-bg line {
    fill: none;
    stroke: var(--ink);
    stroke-opacity: 0.14;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Background circles take the accent — one per section, always subtle */
.section-bg circle {
    fill: var(--accent);
    stroke: none;
    opacity: 0.28;
}

.section-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: var(--section-pad-y, 120px)
             clamp(var(--section-pad-x-min, 28px), 4vw, var(--section-pad-x-max, 96px));
}

/* Anchor-link scroll offset — every named section pushes its scroll
   landing below the fixed navbar so headings aren't hidden behind it.
   Covers all three section idioms (.section-shell direct, .section-body
   wrapper, .section-pages wrapper) plus the <section id="..."> element
   that onepage.blade.php wraps each widget in. */
section[id],
.section-shell,
.section-body,
.section-pages,
.section-page { scroll-margin-top: var(--nav-h, 72px); }

/* Multipage standalone pages (aboutme.blade.php, faqs.blade.php, etc.)
   wrap content in <section class="section-page ...">. They have no
   full-viewport hero, so the first section sits flush under the fixed
   navbar. Push it down by --nav-h. The home page's <section id="home">
   doesn't carry .section-page, so this rule doesn't touch the hero. */
#main > .section-page {
    padding-top: var(--nav-h, 72px);
}

.section-head {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4px;
    margin-bottom: 40px;
}
.section-head .counter,
.section-head .eyebrow { display: none; }
.section-head h2 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--ink);
}
.section-head p {
    font-family: var(--ff-sans);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--muted);
    max-width: 54ch;
    margin: 0;
}

/* =========================================================
   NAV  —  left: initials, center: links, right: theme toggle
   ========================================================= */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    /* Horizontal padding mirrors .section-shell so the brand on the
       left and the hamburger/theme-toggle on the right sit on the
       same content rails as every section heading below. The hardcoded
       24px was making the navbar feel offset from the rest of the page
       at mobile widths where section padding shrinks to ~16px. */
    padding: 12px clamp(var(--section-pad-x-min, 28px), 4vw, var(--section-pad-x-max, 96px));
    z-index: 100;
    color: var(--ink);
    font-family: var(--ff-sans);
    background: var(--card);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border-bottom: 1px solid var(--hair);
}
.site-nav-brand {
    display: inline-flex; align-items: center;
    text-decoration: none; color: var(--ink);
    gap: 10px;
}
.site-nav-brand-img {
    display: block;
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--hair);
    background: var(--card);
}
.site-nav-brand-name {
    font-family: var(--ff-navbar, var(--ff-sans));
    font-weight: var(--fw-navbar, 600);
    font-size: var(--fs-navbar, 0.9rem);
    letter-spacing: 0.04em;
    color: var(--ink);
}
.site-nav-links {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
}
/* Each link shows the doodle icon + the menu name side by side. Hover/active
   tints the entire pill in the accent. */
.site-nav-links a {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    text-decoration: none; color: var(--muted);
    /* Navbar slot is its own admin-controlled typography slot (Style →
       Fonts → "8. Navbar"). Falls back to --ff-hand/600/1.15rem so an
       unconfigured site keeps the original handwritten look. */
    font-family: var(--ff-navbar, var(--ff-hand));
    font-size: var(--fs-navbar, 1.15rem);
    font-weight: var(--fw-navbar, 600);
    line-height: 1;
    transition: color 220ms var(--ease-main),
                background 220ms var(--ease-main);
}
.site-nav-links a .nav-doodle {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transform: rotate(-2deg);
}
.site-nav-links a .nav-label {
    line-height: 1;
    transform: translateY(1px);
}
.site-nav-links a:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.site-nav-links a.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Active-link underline lives on ::before so the tooltip ::after below
   can still render on the active item — a single element only gets one
   pseudo of each kind, and the more-specific is-active rule otherwise
   wins. */
.site-nav-links a.is-active::before {
    content: '';
    position: absolute;
    left: 16px; bottom: 4px; right: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}
/* Tablet: drop the labels but keep the doodle icons (still legible). */
@media (max-width: 1080px) {
    .site-nav-links a { padding: 0 8px; }
    .site-nav-links a .nav-label { display: none; }
}
/* Admin-driven nav label style: icon_only / text_only / icon_text. */
.site-nav.nav-icon-only .site-nav-links a .nav-label,
.site-nav.nav-icon-only .site-nav-cv .nav-label { display: none; }
.site-nav.nav-text-only .site-nav-links a > i,
.site-nav.nav-text-only .site-nav-links a > .nav-doodle,
.site-nav.nav-text-only .site-nav-cv > i { display: none; }

/* CSS-only tooltips for icon-only nav (Bootstrap JS isn't on the frontend).
   The label sits in [data-tooltip]; show it as a small pill on hover/focus.
   Only shows when nav is icon-only, otherwise the label is already visible. */
.site-nav.nav-icon-only [data-tooltip] { position: relative; }
.site-nav.nav-icon-only [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--ff-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 60;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.site-nav.nav-icon-only [data-tooltip]:hover::after,
.site-nav.nav-icon-only [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.site-nav-cv {
    height: 36px;
    padding: 0 14px;
    gap: 6px;
    font-family: var(--ff-hand);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
}
.site-nav-cv i { font-size: 1.1em; }
.site-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}
.site-nav-toggle { display: none; }

@media (max-width: 820px) {
    .site-nav-links { display: none; }
    .site-nav-toggle {
        display: inline-flex; width: 36px; height: 36px;
        border: 1px solid var(--hair); border-radius: 50%;
        background: transparent; align-items: center; justify-content: center;
        flex-direction: column; gap: 4px; cursor: pointer;
    }
    .site-nav-toggle span { width: 14px; height: 1.5px; background: var(--ink); display: block; }
}

/* Mobile sheet — hidden by default. The .site-nav-toggle button flips
   `.is-open` on this element (handled in animator.js). Without this rule
   the SVG doodles inside fall back to the browser's 300×150 default size
   and stack visibly between the navbar and the hero. */
.site-nav-sheet {
    display: none;
}
.site-nav-sheet.is-open {
    display: flex;
    position: fixed;
    top: 64px; left: 12px; right: 12px;
    z-index: 200;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: 14px;
    box-shadow: 0 12px 32px color-mix(in srgb, black 18%, transparent);
}
.site-nav-sheet a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 10px;
    font-family: var(--ff-display);
    font-weight: 500;
}
.site-nav-sheet a:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
}
.site-nav-sheet .nav-doodle {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* =========================================================
   Theme toggle  —  lives inside the navbar, right side
   ========================================================= */
#theme-toggle {
    position: relative;
    width: 56px; height: 26px;
    border-radius: 999px;
    border: 1px solid var(--hair);
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 220ms var(--ease-main);
}
#theme-toggle:hover { border-color: var(--subtle); }
#theme-toggle .theme-toggle-track {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ink);
    transition: transform 320ms var(--ease-bounce);
    z-index: 0;
}
.theme-dark #theme-toggle .theme-toggle-track {
    transform: translateX(30px);
}
#theme-toggle .theme-toggle-icon {
    position: relative;
    z-index: 1;
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: color 220ms var(--ease-main);
}
#theme-toggle .theme-toggle-sun  { color: var(--bg); }
#theme-toggle .theme-toggle-moon { color: var(--muted); }
.theme-dark #theme-toggle .theme-toggle-sun  { color: var(--muted); }
.theme-dark #theme-toggle .theme-toggle-moon { color: var(--bg); }

/* =========================================================
   HERO v2 — handwritten name + section pills + 4-image collage
   with optional 5th overlay (avatar). Painterly tile edges via
   feTurbulence filter. Motion-load: tiles pop in one by one,
   text gets a left-to-right "highlight reveal".
   ========================================================= */
section#home {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
}
.hero.hero-v2 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hero .hero-bg-image {
    background-size: cover;
    background-position: center;
    opacity: 0.55;
}
.hero.hero-bg-bgdark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 22, 0.72);
    z-index: 0;
    pointer-events: none;
}
.hero .hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hero-typewriter {
    margin: 4px 0 0;
    font-family: var(--ff-hand);
    font-size: 1.4rem;
    color: var(--muted);
    min-height: 1.6em;
}
.hero-typewriter-text {
    border-right: 2px solid var(--accent);
    padding-right: 2px;
    animation: hero-caret-blink 1s steps(1) infinite;
}
@keyframes hero-caret-blink {
    50% { border-color: transparent; }
}
.hero-v2 .hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    /* Balanced 55/45 split — copy column gets a bit more room than the
       collage so 2-word names fit on one line at desktop. Long names
       (3+ words) wrap cleanly via overflow-wrap on .hero-name; that's
       the intended behaviour at narrower widths. At ≤1024px the grid
       collapses entirely (media query below) so name + collage stack
       vertically on tablets and phones. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    width: 100%;
    margin: 0;
    /* Horizontal padding mirrors .section-shell so hero content aligns
       with every other section. Vertical padding adds 60px above the
       admin-set --section-pad-y to give the hero some extra breathing
       room (it lives at the top of the page above any nav). */
    padding: calc(var(--section-pad-y, 120px) + 60px)
             clamp(var(--section-pad-x-min, 28px), 4vw, var(--section-pad-x-max, 96px))
             var(--section-pad-y, 120px);
    min-height: 100vh;
}
/* Stack breakpoint at 1024px (tablet boundary) — at narrower-than-this
   viewports the 2-column grid can't fit a long name beside the collage
   without crashing; collapsing to one column gives the name the full
   row width and lets the collage slot below as a stacked element. */
@media (max-width: 1024px) {
    .hero-v2 .hero-grid {
        grid-template-columns: 1fr;
        padding: calc(var(--section-pad-y, 120px) + 30px)
                 clamp(var(--section-pad-x-min, 28px), 4vw, var(--section-pad-x-max, 96px))
                 var(--section-pad-y, 120px);
        gap: 48px;
    }
}

.hero-v2 .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    /* Use the grid track as the upper bound — no fixed max-width — so
       longer headlines ("Joami Mynhardt Frontend developer") have the
       full copy track to expand into. Below 1024px the grid collapses
       to one column so this stretches across the full row. */
    width: 100%;
}

/* Greeting / tagline pills — reuse section-pill base + per-instance entrance.
   Greeting is a small intro pill (smaller than the heading-level pills used
   in section headers); tagline keeps the heading scale. */
.hero-greeting {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    padding: 0.36em 0.95em 0.42em;
}
.hero-tagline {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    padding: 0.32em 0.95em 0.4em;
}
.hero-greeting,
.hero-tagline {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 480ms var(--ease-main),
                transform 480ms var(--ease-main);
}
.hero.is-in .hero-greeting {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 120ms, 120ms;
}
.hero.is-in .hero-tagline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 360ms, 360ms;
}

/* Big handwritten name (Caveat) — matches the reference signature.
   Painted in the accent so the name reads as the personal brand mark.
   No wipe/typewriter — fade + lift in like the about card text. */
.hero-name {
    font-family: var(--ff-hero, var(--ff-hand));
    font-weight: var(--fw-hero, 600);
    font-size: clamp(3rem, 6.4vw, 5.6rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--accent);
    margin: 0;
    padding: 0.06em 0;
    /* Responsive wrap target — max-width in em (relative to this
       heading's own font-size) so it scales proportionally on every
       viewport. 8em fits a 2-word name like "Joami Mynhardt" on one
       line at any size, and forces longer copy ("…Frontend developer")
       to wrap to a second line. Em-based means: at 48px mobile font
       the cap is 384px; at 89px desktop font the cap is 712px — the
       wrap point stays consistent relative to the type, so behaviour
       reads the same on phone and desktop. */
    max-width: min(100%, 8em);
    overflow-wrap: break-word;
    transform: rotate(-1.2deg) translateY(10px);
    opacity: 0;
    transition: opacity 600ms var(--ease-main),
                transform 600ms var(--ease-main);
}
.hero.is-in .hero-name {
    opacity: 1;
    transform: rotate(-1.2deg) translateY(0);
    transition-delay: 220ms, 220ms;
}

.hero-v2 .hero-lede {
    font-family: var(--ff-sans);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--muted);
    margin: 6px 0 4px;
    max-width: 48ch;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms var(--ease-main) 1280ms,
                transform 600ms var(--ease-main) 1280ms;
}
.hero.is-in .hero-v2 .hero-lede,
.hero.hero-v2.is-in .hero-lede {
    opacity: 1;
    transform: translateY(0);
}

.hero-v2 .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms var(--ease-main) 1480ms,
                transform 600ms var(--ease-main) 1480ms;
}
.hero.hero-v2.is-in .hero-buttons {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Collage: 2x2 of landscape tiles + optional 5th overlay ----
   Tiles are landscape (5:4) so wide portfolio thumbnails crop minimally.
   Wrapper has padding so the rotated/displaced edges never get clipped. */
.hero-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: clamp(16px, 1.8vw, 28px);
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    padding: 18px 14px;
}
/* Tiles are landscape (16:10) so the wide portfolio thumbnails (≈345×200)
   fill the frame with minimal cropping. */
.hero-collage-tile {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    z-index: 0;
}
.hero-collage-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Painterly edge per tile — feDisplacementMap warps the image edges so each
   tile reads as torn paper / brushed crop, never crisp rectangles. */
.hero-collage-tile {
    border-radius: 18px;
}
.hero-collage-tile--1 { filter: url(#pill-brush-a); transform: rotate(-1.4deg); }
.hero-collage-tile--2 { filter: url(#pill-brush-c); transform: rotate(1.6deg);  }
.hero-collage-tile--3 { filter: url(#pill-brush-b); transform: rotate(1.2deg);  }
.hero-collage-tile--4 { filter: url(#pill-brush-d); transform: rotate(-1.8deg); }

/* Optional 5th tile — circular avatar overlay floating in the middle. */
.hero-collage-tile--5 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    border: 4px solid var(--bg);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    filter: url(#pill-brush-e);
    z-index: 2;
    background: var(--bg);
}
.hero-collage-tile--5 img {
    border-radius: 50%;
}

/* Motion-load: each tile pops in staggered. Avatar overlay lands last. */
.hero-collage-tile {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
    transition: opacity 520ms var(--ease-main),
                transform 720ms var(--ease-bounce);
}
.hero.is-in .hero-collage-tile--1 {
    opacity: 1; transform: scale(1) rotate(-1.4deg);
    transition-delay: 200ms, 200ms;
}
.hero.is-in .hero-collage-tile--2 {
    opacity: 1; transform: scale(1) rotate(1.6deg);
    transition-delay: 400ms, 400ms;
}
.hero.is-in .hero-collage-tile--3 {
    opacity: 1; transform: scale(1) rotate(1.2deg);
    transition-delay: 600ms, 600ms;
}
.hero.is-in .hero-collage-tile--4 {
    opacity: 1; transform: scale(1) rotate(-1.8deg);
    transition-delay: 800ms, 800ms;
}
.hero.is-in .hero-collage-tile--5 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-3deg);
    transition-delay: 1100ms, 1100ms;
}

/* Hero collage on narrow viewports — keep 2x2 down to ~520px (so the grid
   still reads as a collage), then collapse to a single column where two
   side-by-side tiles would each be too small to recognize. The overlay
   avatar shrinks at 640px so it doesn't dominate the visible area. */
@media (max-width: 900px) {
    .hero-collage {
        max-width: 560px;
        margin-inline: auto;
        padding: 12px 6px;
    }
}
@media (max-width: 640px) {
    .hero-collage {
        gap: clamp(10px, 3vw, 18px);
    }
    .hero-collage-tile--5 {
        width: 38%;
        border-width: 3px;
    }
}
@media (max-width: 480px) {
    .hero-collage {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
    .hero-collage-tile--5 {
        width: 44%;
    }
    /* On a single column the 5th overlay floats over tile 2 — nudge it down
       slightly so it lands on the visual centre of the now-tall stack. */
    .hero-collage-tile--5 {
        top: 50%;
    }
}

/* About — handwritten role list (the words formerly in the typewriter) */
.about-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 6px 0 14px;
    font-family: var(--ff-hand);
    font-size: 1.55rem;
    color: var(--accent);
    line-height: 1.1;
}
.about-role {
    display: inline-block;
    transform: rotate(-0.5deg);
}
.about-role:nth-child(2n)  { transform: rotate(0.6deg);  }
.about-role:nth-child(3n)  { transform: rotate(-1.1deg); color: var(--ink); }
.about-role:not(:last-child)::after {
    content: ' / ';
    color: var(--muted);
    margin-left: 12px;
    font-family: var(--ff-sans);
    font-size: 1rem;
    vertical-align: middle;
}

/* =========================================================
   GLASS SURFACE  —  shared fill
   ========================================================= */
.glass,
.glass-surface {
    background: var(--card);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 var(--card-highlight),
        var(--card-shadow);
}

/* =========================================================
   ABOUT  —  single soft rounded card (2026-04-27 ref).
   Optional avatar tile on the left, content on the right.
   ========================================================= */
.about-card {
    position: relative;
    display: grid;
    /* Portrait gets meaningful real-estate (≈40%) so the photo reads as a
       portrait, not a thumbnail. Content takes the remaining 60% and the
       bio fills it — no 60ch cap leaving the right side empty. */
    grid-template-columns: minmax(260px, 0.7fr) 1.4fr;
    gap: clamp(28px, 4vw, 52px);
    align-items: stretch;
    padding: clamp(26px, 3.5vw, 44px);
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    z-index: 0;
}
/* Brushed doodle border — matches .project-card::before and
   .timeline-card::before so all three block styles read as the same hand. */
.about-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
}
.about-card { transition: transform 220ms var(--ease-main); }
.about-card::before {
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
.about-card:hover { transform: translateY(-2px); }
.about-card:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
.about-card:has(> .about-card-content:only-child) { grid-template-columns: 1fr; }
@media (max-width: 800px) {
    .about-card { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
}

.about-card-portrait {
    position: relative;
    margin: 0;
    width: 100%;
    /* Slightly taller than square so the portrait reads as a person photo,
       not a circular avatar tile. Stretches to card height when possible. */
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    background: var(--bg-soft);
    overflow: hidden;
    align-self: stretch;
    min-height: 280px;
}
.about-card-portrait img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 800ms var(--ease-main);
}
.about-card:hover .about-card-portrait img { transform: scale(1.03); }

.about-card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}
/* The dashed accent rail used to live on a ::before — it made the about
   card feel heavier than the rest of the layout. Removed so the about
   card now matches the standard card border treatment. */

.about-card-bio {
    font-family: var(--ff-sans);
    color: var(--ink);
    margin: 0;
}
.about-card-bio > p { margin: 0 0 12px; }
.about-card-bio > p:first-child {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.45;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.about-card-bio > p:nth-of-type(n+2) {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--muted);
}
.about-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.chip-pct {
    margin-left: 6px;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.85;
}
.about-card-location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--muted);
    font-family: var(--ff-sans);
    font-size: 0.86rem;
}
.about-card-location i { color: var(--accent); font-size: 1rem; }
.about-card-location-pin {
    color: var(--accent);
    flex: 0 0 auto;
    transform: translateY(-1px);
}

/* Generic card — used by a few older includes */
.card {
    background: var(--card);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 var(--card-highlight),
        var(--card-shadow);
    padding: 22px;
    opacity: 0;
    transform: translateY(16px);
    transition: transform 380ms var(--ease-bounce),
                opacity 380ms var(--ease-main),
                box-shadow 380ms var(--ease-main),
                border-color 220ms var(--ease-main);
}
.card.is-in { opacity: 1; transform: translateY(0); }
.card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 var(--card-highlight),
        var(--card-shadow-hover);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--card-border));
}
.card-title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: var(--ink);
}
.card-body {
    font-family: var(--ff-sans);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--muted);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--ff-sans);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--card-border);
    background: var(--card);
    color: var(--ink);
    transition: border-color 220ms var(--ease-main),
                color 220ms var(--ease-main),
                background 220ms var(--ease-main);
}
.chip:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    color: var(--accent);
}

/* =========================================================
   PROJECTS  —  2-col glass grid (admin override supported)
   ========================================================= */

/* Category filter pills above the grid */
/* Portfolio header — heading on the left, filter pills inline on the right. */
.section-head--portfolio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-bottom: 36px;
}
.section-head--portfolio .section-heading { margin-bottom: 0; }

.projects-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 0;
}
@media (max-width: 720px) {
    .projects-filter { margin-left: 0; }
}
.projects-filter-pill {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--card-border);
    background: var(--card);
    color: var(--ink);
    font-family: var(--ff-sans);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1;
    transition: background 200ms var(--ease-main),
                border-color 200ms var(--ease-main),
                color 200ms var(--ease-main),
                transform 200ms var(--ease-main);
}
.projects-filter-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--card-border));
    color: var(--accent);
    transform: translateY(-1px);
}
.projects-filter-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.projects-filter-pill.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.projects-filter-pill.is-active .projects-filter-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.projects-filter-count {
    font-family: var(--ff-sans);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--muted);
}

/* Filter hides cards via JS — keep layout collapse instant */
.project-card-wrap.is-hidden { display: none; }
/* Load-more pagination — initial render hides cards beyond the admin
   limit; the JS handler reveals them in batches when the user clicks
   the load-more button. Same display:none trick as filter so the grid
   collapses instantly with no transition flicker. */
.project-card-wrap.is-loadmore-hidden { display: none; }

.portfolio-loadmore-actions {
    display: flex;
    justify-content: center;
    margin: 32px 0 0;
}
.portfolio-loadmore-btn {
    padding: 0.85em 1.6em;
    font-family: var(--ff-navbar, var(--ff-hand));
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    border: 0;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    transition: transform 200ms var(--ease-main),
                box-shadow 200ms var(--ease-main),
                opacity 200ms var(--ease-main);
}
.portfolio-loadmore-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.portfolio-loadmore-btn:active { transform: translateY(0); }

.projects-grid {
    /* `--cols` is set inline from the admin "Columns" portfolio option
       (size-2..size-5). Step down at narrower viewports but never exceed
       the chosen count. */
    --portfolio-cols: var(--cols, 4);
    display: grid;
    grid-template-columns: repeat(var(--portfolio-cols), 1fr);
    gap: 20px;
}
@media (max-width: 1400px) { .projects-grid { grid-template-columns: repeat(min(var(--cols, 4), 4), 1fr); } }
@media (max-width: 1100px) { .projects-grid { grid-template-columns: repeat(min(var(--cols, 4), 3), 1fr); } }
@media (max-width: 800px)  { .projects-grid { grid-template-columns: repeat(min(var(--cols, 4), 2), 1fr); } }
@media (max-width: 520px)  { .projects-grid { grid-template-columns: 1fr; } }

.project-card-wrap { position: relative; display: block; }

.project-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    opacity: 0;
    transform: translateY(16px);
    z-index: 0;
    transition: transform 420ms var(--ease-bounce),
                opacity 420ms var(--ease-main);
}
/* Brushed doodle border — same treatment as timeline-card so the two
   block styles read as the same hand. */
.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
.project-card-wrap:nth-child(2n) .project-card::before { filter: url(#pill-brush-b); }
.project-card-wrap:nth-child(3n) .project-card::before { filter: url(#pill-brush-d); }
.project-card-wrap:nth-child(4n) .project-card::before { filter: url(#pill-brush-e); }
.project-card.is-in { opacity: 1; transform: translateY(0); }
.project-card:hover {
    transform: translateY(-4px) scale(1.01);
}
.project-card:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
/* Image is inset from the card edges so the brushed border reads as a
   frame around the artwork, not a sleeve glued to the photo. */
.project-card-media {
    position: relative;
    margin: 0;
    padding: 10px 10px 0;
    aspect-ratio: 4 / 3;
    background: transparent;
    overflow: visible;
}
.project-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: calc(var(--radius-card) - 6px);
    transition: transform 900ms var(--ease-main);
}
.project-card--no-lightbox .project-card-media,
.project-card--no-lightbox .project-card-media img { cursor: default; }
.project-card--no-lightbox:hover .project-card-media img { transform: none; }
.project-card:hover .project-card-media img {
    transform: scale(1.04);
}
.project-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--subtle);
    font-family: var(--ff-mono);
    font-size: 0.8rem; letter-spacing: 0.08em;
}

.project-card-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex; justify-content: space-between; align-items: center;
    pointer-events: none;
}
.project-card-counter,
.project-card-type {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.project-card-type {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-card-meta {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Category pill in the meta area (under the image, before the title).
   Uses the accent palette + a soft background tint so categories like
   "Animation" / "UI" / "Frontend" read as a chip, not as plain text.
   Same visual language for portfolio + blog cards. */
.project-card-cat {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--ff-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    padding: 4px 10px 5px;
    border-radius: 999px;
    margin: 0 0 6px;
    transition: background 200ms var(--ease-main), color 200ms var(--ease-main);
}
.project-card-cat:hover {
    background: var(--accent);
    color: var(--accent-ink);
}

.project-card-title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--ink);
}
/* Blog cards wrap the title in an <a> for keyboard/accessibility focus
   on the same destination as the thumbnail link. Remove the default
   underline + inherit colour so it renders identically to the portfolio
   card's plain heading. Hover lifts to --accent for affordance. */
.project-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms var(--ease-main);
}
.project-card-title a:hover { color: var(--accent); }
/* Blog variant — slightly tighter card so excerpts feel right next to
   the date/category badge row. Same .project-card chrome otherwise. */
.project-card--blog .project-card-counter {
    font-family: var(--ff-sans);
    text-transform: none;
    letter-spacing: 0.02em;
}
.project-card-desc {
    font-family: var(--ff-sans);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--muted);
    font-weight: 400;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.project-card-foot {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    color: var(--subtle);
    padding-top: 10px;
    border-top: 1px solid var(--hair);
}
.project-card-arrow {
    font-family: var(--ff-sans);
    font-size: 0.84rem;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap 220ms var(--ease-main);
}
.project-card:hover .project-card-arrow { gap: 12px; }

/* Preview button */
.project-card-preview {
    position: absolute;
    bottom: 14px; right: 14px;
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 240ms var(--ease-main),
                transform 320ms var(--ease-bounce),
                background 200ms var(--ease-main);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.project-card-wrap:hover .project-card-preview,
.project-card-wrap:focus-within .project-card-preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
@media (hover: none) {
    .project-card-preview {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}
.project-card-preview:hover { background: var(--accent); color: #fff; }
.project-card-preview i { font-size: 1.05rem; }

/* Image lightbox trigger — strips button chrome so the <img> sits flush */
.project-card-image-trigger {
    all: unset;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    position: relative;
}
.project-card-image-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.project-card-image-trigger::after {
    content: "\ea7f"; /* boxicons bx-search-alt-2 fallback shape */
    font-family: 'boxicons';
    position: absolute;
    inset: auto 12px 12px auto;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 220ms var(--ease-main), transform 220ms var(--ease-main);
    pointer-events: none;
}
.project-card:hover .project-card-image-trigger::after,
.project-card-image-trigger:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* Card actions row — replaces the old single-link arrow foot */
.project-card-actions {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.project-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-family: var(--ff-sans);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background 200ms var(--ease-main),
                color 200ms var(--ease-main),
                border-color 200ms var(--ease-main),
                transform 200ms var(--ease-main);
}
.project-card-action i { font-size: 0.95rem; }
.project-card-action--primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
}
.project-card-action--primary:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--accent) 88%, var(--ink));
    color: #fff;
}
.project-card-action--secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--card-border);
    margin-left: auto;
}
.project-card-action--secondary:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--card-border));
    color: var(--accent);
}
.project-card-action .project-card-arrow {
    font-size: inherit;
    color: inherit;
    gap: 4px;
}
.project-card:hover .project-card-action--secondary .project-card-arrow { gap: 10px; }

/* Education logo when clickable — strip button chrome, keep tile look */
.timeline-logo--clickable {
    all: unset;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--hair);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    cursor: zoom-in;
    transition: border-color 200ms var(--ease-main), transform 200ms var(--ease-main);
}
.timeline-logo--clickable:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--hair));
    transform: scale(1.04);
}
.timeline-logo--clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (max-width: 720px) {
    .timeline-logo--clickable { width: 40px; height: 40px; flex-basis: 40px; }
}

/* =========================================================
   RESUME / EXPERIENCE  —  dates | rule | card
   ========================================================= */
section#resume .section-bg { display: none; }

.timeline-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 28px;
}
.timeline-label--education { margin-top: 36px; }

.timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.timeline-rule { display: none; }

/* Multi-column grid mode (admin → resume.experience_column /
   education_column = col-lg-6/4/3). Drops the vertical connector line and
   the date|rail|card sub-grid; each item becomes a self-contained card so
   the layout reads as a wall of credentials instead of a chronology. */
.timeline--grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
.timeline--grid.timeline--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.timeline--grid.timeline--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.timeline--grid.timeline--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
    .timeline--grid.timeline--cols-3,
    .timeline--grid.timeline--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .timeline--grid { grid-template-columns: 1fr !important; }
}
.timeline--grid .timeline-item {
    grid-template-columns: 1fr;
    padding: 0;
    row-gap: 6px;
}
.timeline--grid .timeline-item::before { display: none; }
.timeline--grid .timeline-node { display: none; }
.timeline--grid .timeline-date {
    margin-top: 0;
    padding-right: 0;
    transform: none;
    text-align: left;
    font-size: 1rem;
}

.timeline-item {
    position: relative;
    display: grid;
    /* date | node-rail | card */
    grid-template-columns: clamp(120px, 12vw, 170px) 28px 1fr;
    column-gap: 0;
    align-items: start;
    padding: 14px 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms var(--ease-main),
                transform 500ms var(--ease-main);
}
.timeline-item.is-in { opacity: 1; transform: translateY(0); }

/* Per-item connector line — hand-drawn dashed thread between nodes.
   Repeating gradient gives the dashes; ink-brush filter wobbles each
   segment so it reads as drawn, not printed. */
.timeline-item::before {
    content: '';
    position: absolute;
    /* Left edge of node-rail = date column width; rail centerline is +13px (-1px to centre 3px stroke) */
    left: calc(clamp(120px, 12vw, 170px) + 12px);
    width: 3px;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        var(--accent) 0 7px,
        transparent 7px 13px
    );
    opacity: 0.85;
    filter: url(#ink-brush-a);
    z-index: 0;
}
.timeline-item:nth-of-type(2n)::before { filter: url(#ink-brush-c); }
.timeline-item:nth-of-type(3n)::before { filter: url(#ink-brush-e); }
.timeline-item:first-of-type::before { top: 43.5px; }
.timeline-item:last-of-type::before  { bottom: auto; height: 43.5px; }
.timeline-item:only-of-type::before  { display: none; }

/* Dates anchor the left rail in handwriting — accent colored so they read
   as the chronology key. */
.timeline-date {
    font-family: var(--ff-hand);
    font-size: clamp(1.15rem, 1.4vw, 1.4rem);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--accent);
    line-height: 1.15;
    margin-top: 18px;
    padding-right: 18px;
    transform: rotate(-1deg);
    text-align: right;
    white-space: normal;
}

.timeline-node {
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    /* All dots use the dashboard skin color (style.skinscolor → --skinscolor → --accent) */
    background: var(--accent);
    border: 1.5px solid var(--accent);
    justify-self: center;
    align-self: start;
    margin-top: 24px;
    z-index: 2;
    box-shadow: 0 0 0 3px var(--bg);
}
.timeline-node.is-current {
    box-shadow:
        0 0 0 3px var(--bg),
        0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Card with hand-drawn brushed border — ::before carries the displaced
   stroke so the card outline reads as drawn rather than CAD-perfect. */
.timeline-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px 22px;
    background: transparent;
    border: none;
    border-radius: 18px;
    min-width: 0;
    z-index: 0;
    transition: transform 280ms var(--ease-bounce);
}
.timeline-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
.timeline-item:nth-of-type(2n) .timeline-card::before { filter: url(#pill-brush-b); }
.timeline-item:nth-of-type(3n) .timeline-card::before { filter: url(#pill-brush-d); }
.timeline-card:hover { transform: translateY(-2px) rotate(-0.3deg); }
.timeline-card:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}

.timeline-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--hair));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
}
.timeline-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.timeline-logo--empty span {
    font-family: var(--ff-sans);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--accent);
}

.timeline-body {
    padding-top: 2px;
    min-width: 0;
}
.timeline-role {
    font-family: var(--ff-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 2px;
    line-height: 1.3;
}
.timeline-company {
    font-family: var(--ff-display);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--accent);
    margin: 0 0 8px;
}
.timeline-desc {
    font-family: var(--ff-sans);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}
.timeline-desc p { margin: 0 0 4px; }
.timeline-desc p:last-child { margin: 0; }

@media (max-width: 720px) {
    /* Mobile padding inherits from .section-shell (80px / 22px) — keep all
       sections identical, no per-section override here. */
    /* On mobile collapse to: node-rail | content. Date moves above the role
       inside the card body so we keep a single column for content. */
    .timeline-item {
        grid-template-columns: 22px 1fr;
        padding: 12px 0;
    }
    .timeline-item::before { left: 10px; }
    .timeline-item:first-of-type::before { top: 27.5px; }
    .timeline-item:last-of-type::before  { bottom: auto; height: 27.5px; }
    .timeline-date {
        grid-column: 1 / -1;
        text-align: left;
        padding: 0 0 6px 32px;
        margin-top: 0;
        transform: rotate(0);
    }
    .timeline-node { margin-top: 10px; grid-column: 1; }
    .timeline-card { grid-column: 2; }
    .timeline-card {
        padding: 14px 16px;
        grid-template-columns: 40px 1fr;
        gap: 12px;
    }
    .timeline-logo { width: 40px; height: 40px; flex-basis: 40px; }
}

/* =========================================================
   SKILLS  —  percent-bar grid, lives inside the resume page
   alongside experience + education. Each row is title + pct
   + a horizontal track that fills to var(--skill-pct).
   ========================================================= */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px clamp(28px, 4vw, 56px);
    margin: 0 0 12px;
}
@media (max-width: 720px) {
    .skills-grid { grid-template-columns: 1fr; gap: 16px; }
}
.skill-bar { display: flex; flex-direction: column; gap: 6px; }
.skill-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.skill-bar-title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.skill-bar-pct {
    font-family: var(--ff-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
}
.skill-bar-track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 8%, var(--bg));
    overflow: hidden;
}
.skill-bar-fill {
    display: block;
    height: 100%;
    width: var(--skill-pct, 0%);
    background: var(--accent);
    border-radius: inherit;
    transition: width 720ms var(--ease-main);
}

/* =========================================================
   SKILLS — category cards with pill chips. Each category is
   a brushed card (matches .project-card / .timeline-card so
   borders stay consistent across the site). Pills are inline
   chips by default; admin can flip resume.skills_show_bars
   ON to surface a thin progress bar + pct beside each label.
   ========================================================= */
.skills-cardgrid {
    display: grid;
    /* --skills-cols is set inline by onepage_skills.blade.php from the
       resume.skills_column admin radio. Default ("auto") falls back to
       auto-fit + 280px floor; explicit 1/2/3/4 emit `repeat(N, minmax(0, 1fr))`
       to force a fixed track count regardless of card width. */
    grid-template-columns: var(--skills-cols, repeat(auto-fit, minmax(280px, 1fr)));
    gap: clamp(18px, 2.5vw, 28px);
    margin: 0 0 12px;
}
.skills-card {
    position: relative;
    padding: 22px 22px 20px;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    z-index: 0;
}
.skills-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
.skills-cardgrid > .skills-card:nth-child(2n)::before { filter: url(#pill-brush-b); }
.skills-cardgrid > .skills-card:nth-child(3n)::before { filter: url(#pill-brush-d); }
.skills-cardgrid > .skills-card:nth-child(4n)::before { filter: url(#pill-brush-e); }
.skills-card:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
.skills-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}
.skills-card-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.skills-card-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.skills-card-icon svg { width: 22px; height: 22px; }
.skills-card-title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.skills-pill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
}
.skills-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    font-family: var(--ff-sans);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    transition: background 200ms var(--ease-main),
                border-color 200ms var(--ease-main);
}
.skills-pill:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg));
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.skills-pill-label { display: inline-block; }
/* Rating-enabled variant — chips grow inline-flex so the dot row sits
   beside the label without wrapping. Discrete dots (5-bucket scale)
   replace horizontal bars; see onepage_skills.blade.php for the
   round(pct/20) → dot count mapping. */
.skills-cardgrid.has-rating .skills-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
}
.skills-rating {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    flex: 0 0 auto;
}
.skills-rating-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 16%, transparent);
    transition: background 220ms var(--ease-main);
}
.skills-rating-dot.is-on { background: var(--accent); }
/* Mobile collapse — admin column choice respected up to tablet width;
   below 720px we drop to 2-up; below 540px to 1-up. The !important is
   needed because --skills-cols is set inline (specificity 1,0,0,0) and
   would otherwise win against a media-query rule of equal specificity. */
@media (max-width: 720px) {
    .skills-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
    .skills-cardgrid { grid-template-columns: 1fr !important; }
}

.timeline-actions {
    margin-top: 28px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Resume / hero hand-drawn button — handwriting font, brushed border. Solid
   = filled accent + white text. Outline = transparent + dark drawn border. */
.hand-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px 9px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--ff-hand);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-decoration: none;
    z-index: 0;
    border-radius: 999px;
    transition: transform 260ms var(--ease-bounce),
                color 220ms var(--ease-main);
    cursor: pointer;
}
.hand-btn i { font-size: 1.05rem; line-height: 1; }
.hand-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
    filter: url(#ink-brush-a);
    transition: background-color 220ms var(--ease-main),
                border-color 220ms var(--ease-main);
}
.hand-btn:nth-of-type(2)::before { filter: url(#ink-brush-c); }
.hand-btn:nth-of-type(3)::before { filter: url(#ink-brush-e); }

.hand-btn--solid { color: #ffffff; }
.hand-btn--solid::before {
    background: var(--accent);
    border: 2px solid var(--accent);
}
.hand-btn--solid:hover {
    color: var(--accent);
    transform: translateY(-2px) rotate(-0.5deg);
}
.hand-btn--solid:hover::before {
    background: var(--bg);
    border-color: var(--accent);
}

/* Outline variant is now drawn in the accent: brushed accent border + accent
   text, hover inverts to filled accent + white text. This is the default
   hero/CV button look — the "skin color, inverted on hover" pattern. */
.hand-btn--outline { color: var(--accent); }
.hand-btn--outline::before {
    background: transparent;
    border: 2px solid var(--accent);
}
.hand-btn--outline:hover {
    color: #ffffff;
    transform: translateY(-2px) rotate(0.5deg);
}
.hand-btn--outline:hover::before {
    background: var(--accent);
    border-color: var(--accent);
}

/* Legacy timeline-actions fallback — keep working but match new aesthetic. */
.timeline-actions .hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--ff-hand);
    font-size: 1.3rem;
    font-weight: 600;
    transition: transform 260ms var(--ease-bounce),
                border-color 220ms var(--ease-main);
}
.timeline-actions .hero-btn:hover { transform: translateY(-2px); border-color: var(--subtle); }

/* =========================================================
   CONTACT  —  pills left, social icons right, single row
   ========================================================= */
/* Plain subhead (no brush, no pill) used for in-column titles like the
   appointments "Working hours" block. Clean type so it doesn't compete with
   the section-level brushed pill above it. */
#main .subhead-plain { margin: 0 0 18px; }
#main .subhead-plain h4 {
    font-family: var(--ff-subsection, var(--ff-heading, var(--ff-display)));
    font-weight: var(--fw-subsection, 600);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.25;
}
#main .subhead-plain p {
    font-family: var(--ff-body, var(--ff-sans));
    color: var(--muted);
    font-size: var(--fs-body, 0.95rem);
    margin: 0;
    line-height: 1.5;
}

/* ============================================================================
   APPOINTMENTS — onepage_appointments.blade.php
   The legacy theme styled .form-input / .form-control / .list-appointments in
   style.css which we no longer load. Re-style here in the brushed-card idiom
   so the booking form reads as a sibling of .about-card / .project-card. */
#main .list-appointments { margin: 8px 0 0; padding: 0; list-style: none; }
#main .list-appointments ul { margin: 0; padding: 0; list-style: none; }
#main .list-appointments li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body, 1rem);
    color: var(--ink);
    border-bottom: 1px dashed var(--brush-border, rgba(80,80,90,0.18));
}
#main .list-appointments li:last-child { border-bottom: 0; }
#main .list-appointments li i { font-size: 1.05rem; line-height: 1; }
#main .list-appointments li.available i { color: var(--accent); }
#main .list-appointments li.not-available i { color: var(--muted, #888); opacity: 0.7; }
#main .list-appointments li.not-available { opacity: 0.6; }
#main .list-appointments .day { font-weight: 600; min-width: 110px; }
#main .list-appointments .time { color: var(--muted); }

#main .contact-form { width: 100%; }
#main .appointments-form,
#main .contactForm { display: block; width: 100%; }
#main .appointments-form .form-group,
#main .contactForm .form-group { margin: 0 0 16px; }
#main .appointments-form .row > .form-group,
#main .contactForm .row > .form-group { margin-bottom: 16px; }
#main .form-input {
    position: relative;
    display: block;
    width: 100%;
}
#main .form-input > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted, #888);
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}
#main .form-control,
#main .appointments-form .form-control,
#main .contactForm .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px 12px 44px;
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body, 0.95rem);
    color: var(--ink);
    background: var(--card, #fff);
    border: 1.25px solid var(--brush-border, rgba(80,80,90,0.18));
    border-radius: var(--radius-card, 14px);
    box-shadow: var(--card-shadow, 0 1px 0 rgba(0,0,0,0.02));
    outline: none;
    transition: border-color 180ms var(--ease-main, ease), box-shadow 180ms var(--ease-main, ease);
}
#main .appointments-form textarea.form-control,
#main .contactForm textarea.form-control {
    padding-left: 14px;
    min-height: 120px;
    resize: vertical;
}
#main .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
#main .form-control::placeholder { color: var(--muted, #999); opacity: 0.85; }

/* The legacy .button on the booking form lacked padding/cursor — give it the
   same hand-btn idiom we use elsewhere so it doesn't sit as raw underline. */
#main .appointments-form .button.btn-block,
#main .contactForm .button.btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--ff-buttons, var(--ff-body, var(--ff-sans)));
    font-weight: 600;
    font-size: var(--fs-body, 0.95rem);
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms var(--ease-main, ease), box-shadow 180ms var(--ease-main, ease), background 180ms;
}
#main .appointments-form .button.btn-block:hover,
#main .contactForm .button.btn-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 36%, transparent);
}
#main .appointments-form .validation,
#main .contactForm .validation {
    color: #d02e37;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Appointments — each column wraps its content in `.appointments-card` so
   we can brush the whole column as one card. Matches the brushed ::before
   idiom used by .project-card / .skills-card / .timeline-card. */
#main :is(.appointments, .section-appointments) .appointments-card {
    position: relative;
    padding: 22px 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    z-index: 0;
}
#main :is(.appointments, .section-appointments) .appointments-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
#main :is(.appointments, .section-appointments) .row > [class*="col-"]:nth-child(2n) .appointments-card::before {
    filter: url(#pill-brush-b);
}
#main :is(.appointments, .section-appointments) .appointments-card:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
#main :is(.appointments, .section-appointments) .appointments-card > .subhead-plain {
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px dashed var(--hair, rgba(0,0,0,0.08));
}
#main :is(.appointments, .section-appointments) .list-appointments ul { list-style: none; padding: 0; margin: 0; }
#main :is(.appointments, .section-appointments) .list-appointments li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--hair, rgba(0,0,0,0.06));
    font-family: var(--ff-sans);
    font-size: 0.95rem;
    color: var(--ink);
}
#main :is(.appointments, .section-appointments) .list-appointments li:last-child { border-bottom: none; }
#main :is(.appointments, .section-appointments) .list-appointments li i { color: var(--accent); font-size: 1.05rem; }
#main :is(.appointments, .section-appointments) .list-appointments li.not-available { color: var(--muted); }
#main :is(.appointments, .section-appointments) .list-appointments li.not-available i { color: var(--muted); }
#main :is(.appointments, .section-appointments) .list-appointments .day { font-weight: 600; flex: 0 0 auto; }
#main :is(.appointments, .section-appointments) .list-appointments .time { margin-left: auto; color: var(--muted); }
#main :is(.appointments, .section-appointments) .subhead-plain h4 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 0 4px;
    color: var(--ink);
}
#main :is(.appointments, .section-appointments) .subhead-plain p {
    font-family: var(--ff-sans);
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0;
}

/* =========================================================
   FAQs — each accordion row is a brushed card matching the
   project / skills / appointments / clients card system.
   ========================================================= */
#main :is(.faqs, .section-faqs) .accordion .section-content {
    position: relative;
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    z-index: 0;
}
#main :is(.faqs, .section-faqs) .accordion .section-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
#main :is(.faqs, .section-faqs) .accordion .section-content:nth-child(2n)::before { filter: url(#pill-brush-b); }
#main :is(.faqs, .section-faqs) .accordion .section-content:nth-child(3n)::before { filter: url(#pill-brush-d); }
#main :is(.faqs, .section-faqs) .accordion .section-content:nth-child(4n)::before { filter: url(#pill-brush-e); }
#main :is(.faqs, .section-faqs) .accordion .section-content:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
#main :is(.faqs, .section-faqs) .accordion-title {
    margin: 0;
    padding: 0;
    font-size: 1rem;
}
#main :is(.faqs, .section-faqs) .accordion-title .btn-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.35;
    transition: color 200ms var(--ease-main);
}
#main :is(.faqs, .section-faqs) .accordion-title .btn-title:hover { color: var(--accent); }
#main :is(.faqs, .section-faqs) .accordion-title i {
    flex: 0 0 auto;
    transition: transform 240ms var(--ease-bounce), color 200ms var(--ease-main);
    color: var(--muted);
    font-size: 1.1rem;
}
#main :is(.faqs, .section-faqs) .section-content.active .accordion-title .btn-title { color: var(--accent); }
#main :is(.faqs, .section-faqs) .section-content.active .accordion-title i {
    transform: rotate(180deg);
    color: var(--accent);
}
#main :is(.faqs, .section-faqs) .accordion-inner {
    padding: 0 20px 16px;
    font-family: var(--ff-sans);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--muted);
    border-top: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent);
}
#main :is(.faqs, .section-faqs) .accordion-inner p:first-child { margin-top: 12px; }
#main :is(.faqs, .section-faqs) .accordion-inner p:last-child  { margin-bottom: 0; }

section#contactme .section-shell { text-align: left; }
/* Padding inherits from .section-shell so every section breathes the same.
   Per project rule: all sections must have identical vertical padding. */
/* Contact slot wiring is handled at :root level (buttons slot for .contact-pill,
   accent slot for .contact-follow-label). The original blanket --ff-hand override
   was removed so the admin-chosen Buttons / Meta fonts actually take effect. */
/* Reveal — both pieces fade up on scroll-enter via initReveal in animator.js */
.contact-intro,
.contact-row {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease-main),
                transform 600ms var(--ease-main);
}
.contact-intro.is-in,
.contact-row.is-in {
    opacity: 1;
    transform: translateY(0);
}
.contact-intro {
    margin-bottom: 22px;
}
.contact-follow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.contact-follow-label {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}
.contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}
.contact-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Email pill (and any other actionable) — solid teal with white text, drawn
   border via brush filter. Hover inverts to white bg + teal text. */
.contact-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    z-index: 0;
    transition: transform 260ms var(--ease-bounce),
                color 220ms var(--ease-main);
}
.contact-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 999px;
    filter: url(#ink-brush-a);
    transition: background-color 220ms var(--ease-main),
                border-color 220ms var(--ease-main);
}
.contact-pills > .contact-pill:nth-of-type(2)::before { filter: url(#ink-brush-c); }
.contact-pills > .contact-pill:nth-of-type(3)::before { filter: url(#ink-brush-e); }
.contact-pill i {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
    transition: color 220ms var(--ease-main);
}
.contact-pill span { min-width: 0; }
a.contact-pill:hover {
    transform: translateY(-2px) rotate(-0.5deg);
    color: var(--accent);
}
a.contact-pill:hover i { color: var(--accent); }
a.contact-pill:hover::before {
    background: var(--bg);
    border-color: var(--accent);
}

/* Address — plain handwriting in the accent, no border. */
.contact-pill--plain {
    color: var(--accent);
    padding: 10px 0 6px;
}
.contact-pill--plain::before { display: none; }

.contact-socials {
    display: inline-flex; gap: 12px; flex-wrap: wrap;
    margin: 0;
}
.contact-socials a {
    position: relative;
    display: inline-flex; width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: none;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    z-index: 0;
    transition: transform 260ms var(--ease-bounce),
                color 220ms var(--ease-main);
}
.contact-socials a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 50%;
    filter: url(#ink-brush-a);
    transition: background-color 220ms var(--ease-main),
                border-color 220ms var(--ease-main);
}
.contact-socials a:nth-child(5n+2)::before { filter: url(#ink-brush-b); }
.contact-socials a:nth-child(5n+3)::before { filter: url(#ink-brush-c); }
.contact-socials a:nth-child(5n+4)::before { filter: url(#ink-brush-d); }
.contact-socials a:nth-child(5n+5)::before { filter: url(#ink-brush-e); }
.contact-socials a svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.contact-socials a i { font-size: 1.05rem; }
.contact-socials a:hover {
    color: var(--accent);
    transform: translateY(-2px) rotate(-3deg);
}
.contact-socials a:hover::before {
    background: var(--bg);
    border-color: var(--accent);
}

@media (max-width: 640px) {
    .contact-row { flex-direction: column; align-items: flex-start; gap: 22px; }
    .contact-pills { width: 100%; }
    .contact-pill {
        max-width: 100%;
        padding: 9px 18px 6px;
        font-size: clamp(0.95rem, 3.4vw, 1.2rem);
        line-height: 1.2;
    }
    .contact-pill span {
        display: block;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .contact-follow { flex-wrap: wrap; }
    .contact-socials { gap: 10px; }
    .contact-socials a { width: 40px; height: 40px; }
}

/* =========================================================
   Footer
   ========================================================= */
footer, .footer {
    padding: 40px 24px;
    text-align: center;
    color: var(--subtle);
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* =========================================================
   SINGLE PORTFOLIO
   ========================================================= */
.single-portfolio {
    /* Width + padding now mirror .section-shell so single-portfolio sits
       at the same content rails as every other page on the site. The old
       max-width: 1180px was making the page noticeably narrower than the
       portfolio grid you arrived from. Top padding adds --nav-h on top
       of --section-pad-y to clear the fixed navbar (this is a top-level
       page wrapper, not a section inside the multipage section-page).  */
    width: 100%;
    margin: 0;
    padding: calc(var(--nav-h, 72px) + var(--section-pad-y, 120px))
             clamp(var(--section-pad-x-min, 28px), 4vw, var(--section-pad-x-max, 96px))
             var(--section-pad-y, 120px);
}
/* Mobile override removed — single-portfolio uses the same
   clamp(--section-pad-x-min, 6vw, --section-pad-x-max) horizontal
   padding at every viewport so detail-page width matches the listing
   pages it links from. */

.single-portfolio-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.single-portfolio-topbar .single-portfolio-back { margin-right: auto; }
.single-portfolio-topbar .single-portfolio-breadcrumbs { margin-left: auto; }
.single-portfolio-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--ink);
    font-family: var(--ff-sans);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: transform 220ms var(--ease-bounce),
                border-color 220ms var(--ease-main),
                color 220ms var(--ease-main);
}
.single-portfolio-back i { font-size: 1.05rem; }
.single-portfolio-back:hover {
    transform: translateX(-2px);
    border-color: var(--accent);
    color: var(--accent);
}

.single-portfolio-breadcrumbs {
    font-family: var(--ff-sans);
    font-size: 0.78rem;
    letter-spacing: 0;
    color: var(--subtle);
    display: flex; flex-wrap: wrap; gap: 6px;
}
.single-portfolio-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color 220ms var(--ease-main);
}
.single-portfolio-breadcrumbs a:hover { color: var(--ink); }
.single-portfolio-breadcrumbs .sep { color: var(--subtle); }

.single-portfolio-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    margin-bottom: 40px;
}
@media (max-width: 900px) { .single-portfolio-head { grid-template-columns: 1fr; } }

.single-portfolio-hero {
    position: relative;
    border-radius: var(--radius-card);
    background: transparent;
    aspect-ratio: 16 / 10;
    padding: 10px;
    z-index: 0;
}
.single-portfolio-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-b);
}
.single-portfolio-hero img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: calc(var(--radius-card) - 6px);
}

.single-portfolio-panel {
    position: relative;
    padding: 26px 28px;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    align-self: start;
    z-index: 0;
}
.single-portfolio-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-d);
}
.single-portfolio-title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--ink);
}
.single-portfolio-excerpt {
    font-family: var(--ff-sans);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 20px;
}

/* Primary action — sits inside the side panel, near the description, so the
   user reads the description first then sees the button. Replaces the old
   .single-portfolio-hero-action overlay that floated on the screenshot. */
.single-portfolio-cta {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-ink, #fff);
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1;
    margin-bottom: 22px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent);
    transition: transform 260ms var(--ease-bounce),
                box-shadow 260ms var(--ease-main);
}
.single-portfolio-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-ink, #fff);
}
.single-portfolio-cta i { font-size: 1.05rem; }
.single-portfolio-details {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; gap: 10px;
}
.single-portfolio-detail {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 10px 0;
    border-top: none;
    font-family: var(--ff-sans);
    font-size: 0.9rem;
}
.single-portfolio-detail::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--accent) 0 6px, transparent 6px 11px);
    opacity: 0.55;
    filter: url(#ink-brush-c);
}
.single-portfolio-detail:first-child { padding-top: 0; }
.single-portfolio-detail:first-child::before { display: none; }
.single-portfolio-detail-label {
    font-family: var(--ff-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    padding-top: 2px;
}
.single-portfolio-detail-value {
    color: var(--ink); font-weight: 500;
    letter-spacing: -0.01em;
}
.single-portfolio-detail-value i { margin-right: 8px; color: var(--muted); }

.single-portfolio-actions {
    position: relative;
    display: flex; gap: 10px; flex-wrap: wrap;
    padding-top: 16px;
    margin-top: 6px;
    border-top: none;
}
.single-portfolio-actions::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--accent) 0 6px, transparent 6px 11px);
    opacity: 0.55;
    filter: url(#ink-brush-c);
}

.single-portfolio-section-head {
    display: flex; align-items: baseline; gap: 14px;
    margin: 50px 0 22px;
    position: relative;
    padding-bottom: 12px;
}
.single-portfolio-section-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 56px; height: 3px;
    background: repeating-linear-gradient(to right, var(--accent) 0 6px, transparent 6px 11px);
    filter: url(#ink-brush-a);
}
.single-portfolio-section-head h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
}
.single-portfolio-section-head .count {
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    color: var(--subtle);
    letter-spacing: 0.04em;
}

.single-portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .single-portfolio-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .single-portfolio-gallery { grid-template-columns: 1fr; } }

.single-portfolio-gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 0;
    transition: transform 360ms var(--ease-bounce);
}
.single-portfolio-gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: filter 220ms var(--ease-main);
}
.single-portfolio-gallery-item:nth-child(2n)::before { filter: url(#pill-brush-b); }
.single-portfolio-gallery-item:nth-child(3n)::before { filter: url(#pill-brush-d); }
.single-portfolio-gallery-item:nth-child(4n)::before { filter: url(#pill-brush-e); }
.single-portfolio-gallery-item:hover { transform: translateY(-3px); }
.single-portfolio-gallery-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: calc(var(--radius-card) - 6px);
    transition: transform 900ms var(--ease-main);
}
.single-portfolio-gallery-item:hover img { transform: scale(1.04); }

.single-portfolio-content,
.single-portfolio-body .post-content {
    font-family: var(--ff-sans);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--ink);
    max-width: 70ch;
}
.single-portfolio-content p,
.single-portfolio-body .post-content p { margin: 0 0 14px; font-weight: 300; }
.single-portfolio-content h2, .single-portfolio-content h3,
.single-portfolio-body .post-content h2,
.single-portfolio-body .post-content h3 {
    font-family: var(--ff-sans); font-weight: 500;
    letter-spacing: -0.02em;
    margin: 26px 0 10px;
}

/* Long-form body section + related grid (single_post + single_portfolio
   share the same chrome — these are the body slots between the head
   panel and the related grid). */
.single-portfolio-body {
    margin: 32px 0 0;
}
.single-portfolio-related {
    margin: 56px 0 0;
}
.single-portfolio-related .single-portfolio-section-head {
    margin-bottom: 24px;
}

/* The single big detail card — wraps head + body + (portfolio's gallery
   + content) on both /post/<slug> and /portfolio/<slug>. Brushed border
   matches the project-card / skills-card pattern, so the detail page
   reads as one unified card rather than three loose blocks. */
.single-portfolio-card {
    position: relative;
    z-index: 0;
    padding: clamp(20px, 3vw, 36px);
    border-radius: var(--radius-card);
}
.single-portfolio-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: inherit;
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
}
@media (max-width: 800px) {
    .single-portfolio-card { padding: 18px; }
}

/* When .single-portfolio-hero / .single-portfolio-panel sit INSIDE the
   unified detail card, suppress their own brushed ::before so the page
   doesn't render three nested card outlines. The hero image keeps its
   border-radius via .single-portfolio-hero img, and the panel keeps
   its internal padding — they just stop drawing their own shells. */
.single-portfolio-card .single-portfolio-hero { padding: 0; }
.single-portfolio-card .single-portfolio-hero::before { display: none; }
.single-portfolio-card .single-portfolio-panel { padding: 0; }
.single-portfolio-card .single-portfolio-panel::before { display: none; }

/* Plugins.breadcrumbs partial outputs <div class="section-title">
   <nav class="bread-crums">… on every detail page. Force its margin
   off so it sits inline beside the back-button instead of pushing the
   topbar into a 2-row stack. The `.bread-crums` styling itself stays. */
.single-portfolio-topbar .section-title {
    margin: 0;
    flex: 1 1 auto;
    text-align: right;
}
.single-portfolio-topbar .bread-crums {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 0.84rem;
    color: var(--muted);
}
.single-portfolio-topbar .bread-crums a {
    color: var(--muted);
    text-decoration: none;
    transition: color 200ms var(--ease-main);
}
.single-portfolio-topbar .bread-crums a:hover { color: var(--accent); }
.single-portfolio-topbar .bread-crums .bread-crums-span {
    opacity: 0.5;
    margin: 0 2px;
}
.single-portfolio-topbar .bread-crums .current { color: var(--ink); }

/* =========================================================
   Media modal
   ========================================================= */
.media-modal {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(6, 5, 4, 0.88);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    display: none;
    align-items: center; justify-content: center;
    padding: 5vw;
    opacity: 0;
    transition: opacity 240ms var(--ease-main);
}
.media-modal.is-open { display: flex; opacity: 1; }
.media-modal-stage {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    max-height: 82vh;
}
.media-modal-stage iframe,
.media-modal-stage video,
.media-modal-stage img {
    width: 100%; height: 100%;
    display: block;
    border: none;
    border-radius: 10px;
    background: #000;
    object-fit: contain;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
}
.media-modal-close {
    position: absolute;
    top: 24px; right: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 24px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 1;
    transition: background 200ms var(--ease-main),
                transform 260ms var(--ease-bounce);
}
.media-modal-close:hover { background: rgba(255, 255, 255, 0.18); transform: rotate(90deg); }

/* =========================================================
   Reduced motion + touch
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .hero-brace, .hero-tri { stroke-dashoffset: 0 !important; }
    .hero-tri { fill-opacity: 1 !important; }
    .hero-film-cell { opacity: 1 !important; transform: none !important; }
    .hero-logo { transition: none !important; }
    .hero.is-text-in .hero-headline,
    .hero.is-text-in .hero-lede,
    .hero.is-text-in .hero-scroll { opacity: 1 !important; transform: none !important; }
    .hero .hero-headline, .hero .hero-lede, .hero .hero-scroll { opacity: 1 !important; transform: none !important; }
    #brush, #cursor-trail { display: none !important; }
    .card, .project-card, .timeline-item {
        opacity: 1 !important; transform: none !important;
    }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}
@media (hover: none) { #brush, #cursor-trail { display: none; } }

/* ===== Admin-controlled font sizes & accent color (Style → Fonts) =====
   Each rule consumes a CSS var emitted by options.php. When the admin
   leaves a slot blank the size var is unset, the value resolves to
   invalid, and the declaration is discarded — so the rules above stay
   in effect. Setting a value in admin overrides. The accent color is
   applied to every heading level so the whole hierarchy reflects the
   admin skinscolor. */
.hero-name { font-size: var(--fs-hero); }
.section-pill,
h1, h2, h3, h4,
.section-head h1, .section-head h2, .section-head h3, .section-head h4 { font-size: var(--fs-heading); }
.project-card-title, .timeline-role, .card-title { font-size: var(--fs-subsection); }
.timeline-company { font-size: var(--fs-subsubsection); }
.about-role, .timeline-date, .hand-label,
.hero-tagline, .skill-bar-title, .skill-bar-pct,
.contact-follow-label, .contact-pill--plain { font-size: var(--fs-accent); }
.contact-pill, a.contact-pill,
.project-card-action { font-size: var(--fs-buttons); }
body, p, .hero-lede, .about-card-bio,
.project-card-desc, .timeline-desc { font-size: var(--fs-body); }
.hand-btn, .chip, .site-nav-cv,
button:not([class*="dt-"]):not([class*="select2"]) { font-size: var(--fs-buttons); }

/* Heading hierarchy → accent color. Project/role/company titles previously
   inherited body color — pull them onto --accent so the admin skinscolor
   actually paints the hierarchy as the user expects. Section pill is
   intentionally excluded — it has its own brushed background that already
   uses --accent as fill. */
.project-card-title,
.timeline-role,
.timeline-company,
.card-title,
.featured-meta h5,
.featured-meta h5 a { color: var(--accent); }
.featured-meta h5 a:hover { color: var(--ink); }

/* Legacy / secondary pages (blog, appointments, support, pricings, faqs)
   that still use the older blade structure (.section-title, .featured-*,
   .button, .post-*) need the same admin-driven typography + accent palette.
   Map their class names onto the slot vars so admin choices flow through
   without rewriting those templates. */
.section-title h2 { font-size: var(--fs-heading); color: var(--ink); }
.section-title p,
.section-title small { font-size: var(--fs-body); color: var(--muted); }
.section-title h2,
.section-title p { font-family: var(--ff-heading, var(--ff-display)); }
.section-title p { font-family: var(--ff-body, var(--ff-sans)); }
.featured-meta h5 { font-size: var(--fs-subsection); }
.post-meta, .post-date, .post-views,
.featured-meta .post-meta li,
.featured-meta .post-meta a {
    font-family: var(--ff-accent, var(--ff-display));
    font-size: var(--fs-accent);
    color: var(--muted);
}
.post-meta a:hover { color: var(--accent); }
.button, a.button, .btn, a.btn,
input[type="submit"], input[type="button"] {
    font-size: var(--fs-buttons);
    color: var(--accent);
    border: 1px solid var(--brush-border, var(--card-border));
    background: transparent;
    transition: color 220ms var(--ease-main),
                border-color 220ms var(--ease-main),
                background 220ms var(--ease-main);
}
.button:hover, a.button:hover, .btn:hover, a.btn:hover,
input[type="submit"]:hover, input[type="button"]:hover {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
}

/* ============================================================================
   Legacy section partials (sections/section_*.blade.php)
   These partials ship from the original Basma theme using Bootstrap-grid
   markup (.row / .col-*) and component classes (.services-item, .pricing-item,
   .testimonial-item, .counter-block, .client-logo, .working-way .item, etc).
   Bootstrap CSS is not loaded in this theme, so we provide a minimal flex
   grid plus component styling re-skinned with motion tokens.
   ============================================================================ */

/* --- minimal flex grid shim (Bootstrap is not loaded in the frontend) --- */
#main .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}
#main .row.g-0 { margin-left: 0; margin-right: 0; }
#main [class*="col-"] {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}
#main .row.g-0 [class*="col-"] { padding-left: 0; padding-right: 0; }
/* Mobile-first: every col is 100% by default. Then in cascading order
   col-sm → col-md → col-lg, larger breakpoints override smaller. */
#main [class*="col-xs-"],
#main [class*="col-sm-"],
#main [class*="col-md-"],
#main [class*="col-lg-"] { width: 100%; }
#main .col-xs-12 { width: 100%; }
#main .col-xs-8  { width: 66.6667%; }
#main .col-xs-6  { width: 50%; }
#main .col-xs-4  { width: 33.3333%; }
#main .col-xs-3  { width: 25%; }
@media (min-width: 576px) {
    #main .col-sm-12 { width: 100%; }
    #main .col-sm-8  { width: 66.6667%; }
    #main .col-sm-6  { width: 50%; }
    #main .col-sm-4  { width: 33.3333%; }
    #main .col-sm-3  { width: 25%; }
}
@media (min-width: 768px) {
    #main .col-md-12 { width: 100%; }
    #main .col-md-9  { width: 75%; }
    #main .col-md-8  { width: 66.6667%; }
    #main .col-md-6  { width: 50%; }
    #main .col-md-5  { width: 41.6667%; }
    #main .col-md-4  { width: 33.3333%; }
    #main .col-md-3  { width: 25%; }
}
@media (min-width: 992px) {
    #main .col-lg-12 { width: 100%; }
    #main .col-lg-9  { width: 75%; }
    #main .col-lg-8  { width: 66.6667%; }
    #main .col-lg-7  { width: 58.3333%; }
    #main .col-lg-6  { width: 50%; }
    #main .col-lg-5  { width: 41.6667%; }
    #main .col-lg-4  { width: 33.3333%; }
    #main .col-lg-3  { width: 25%; }
}
#main .mb-30 { margin-bottom: 30px; }
#main .mt-30 { margin-top: 30px; }
#main .text-center { text-align: center; }
#main .img-fluid,
#main .img-responsive { max-width: 100%; height: auto; display: block; }

/* --- shared section heading used by all legacy partials ---
   Match the .section-pill brushed look so these headings read as siblings
   to "About Me" / "Portfolio" / etc, not as generic h3 text.
   Layout uses a 3-column grid so doodles flank the pill ONLY on row 1,
   and the description (<p>) drops to its own row below. Left-aligned
   to match .section-heading. */
#main .head-title {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    column-gap: 14px;
    row-gap: 14px;
    justify-content: start;
    align-items: center;
    margin: 0 0 36px;
    text-align: left;
}
/* Hand-drawn doodles flank every brushed-pill heading. The base rule sets
   geometry only — the mask URL (the actual doodle shape) is set per-section
   below so each heading gets its own pair, not a single sparkle repeated.
   Same SVG library as the inline .section-doodle--left/right markup, just
   delivered as CSS masks for partials whose blade templates don't render
   the doodle spans directly. */
#main .head-title::before,
#main .head-title::after,
#main .section-body .section-title::before,
#main .section-body .section-title::after,
#main .section-pages .section-title::before,
#main .section-pages .section-title::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 22px;
    background: var(--accent);
    opacity: 0.78;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
#main .head-title::before { grid-column: 1; grid-row: 1; transform: translateY(-1px) rotate(-6deg); }
#main .head-title h3       { grid-column: 2; grid-row: 1; }
#main .head-title::after  { grid-column: 3; grid-row: 1; transform: translateY(-1px) rotate(5deg); }

#main .section-body .section-title,
#main .section-pages .section-title {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    column-gap: 16px;
    row-gap: 14px;
    justify-content: start;
    align-items: center;
    text-align: left;
}
#main .section-body .section-title::before,
#main .section-pages .section-title::before { grid-column: 1; grid-row: 1; transform: translateY(-2px) rotate(-6deg); width: 36px; height: 26px; }
#main .section-body .section-title h2,
#main .section-body .section-title h3,
#main .section-pages .section-title h2,
#main .section-pages .section-title h3 { grid-column: 2; grid-row: 1; }
#main .section-body .section-title::after,
#main .section-pages .section-title::after { grid-column: 3; grid-row: 1; transform: translateY(-2px) rotate(5deg); width: 36px; height: 26px; }

/* === Doodle library — six distinct pairs, mapped to each section parent.
       Each ::before uses the "left" doodle, each ::after uses the "right".
       Geometry above stays neutral; only the mask URL changes here. */

/* PAIR A — three dots / curl-arrow (services / "What I'm Doing") */
#main :is(.services, .section-services) .head-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='black' stroke='none'><circle cx='4' cy='7' r='1.8'/><circle cx='14' cy='7' r='1.8'/><circle cx='24' cy='7' r='1.8'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='black' stroke='none'><circle cx='4' cy='7' r='1.8'/><circle cx='14' cy='7' r='1.8'/><circle cx='24' cy='7' r='1.8'/></svg>");
}
#main :is(.services, .section-services) .head-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 12 Q 10 0, 22 7'/><path d='M 22 7 L 17 4 M 22 7 L 18 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 12 Q 10 0, 22 7'/><path d='M 22 7 L 17 4 M 22 7 L 18 12'/></svg>");
}

/* PAIR B — heart / arrow-curl (working-way) */
#main .working-way .head-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 10 16 C 2 10, 1 4, 7 3 C 9 3, 9.6 4.6, 10 6.6 C 10.4 4.6, 11 3, 13 3 C 19 4, 18 10, 10 16 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 10 16 C 2 10, 1 4, 7 3 C 9 3, 9.6 4.6, 10 6.6 C 10.4 4.6, 11 3, 13 3 C 19 4, 18 10, 10 16 Z'/></svg>");
}
#main .working-way .head-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 14 Q 8 4, 18 10 Q 22 12, 22 6'/><path d='M 22 0 L 28 6 L 22 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 14 Q 8 4, 18 10 Q 22 12, 22 6'/><path d='M 22 0 L 28 6 L 22 12'/></svg>");
}

/* PAIR C — star outline / star filled (testimonials) */
#main :is(.testimonials, .section-testimonials) .head-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 11 2 L 14 9 L 21 9.4 L 15.4 13.6 L 17 20.4 L 11 16.6 L 5 20.4 L 6.6 13.6 L 1 9.4 L 8 9 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 11 2 L 14 9 L 21 9.4 L 15.4 13.6 L 17 20.4 L 11 16.6 L 5 20.4 L 6.6 13.6 L 1 9.4 L 8 9 Z'/></svg>");
}
#main :is(.testimonials, .section-testimonials) .head-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 11 2 L 14 9 L 21 9.4 L 15.4 13.6 L 17 20.4 L 11 16.6 L 5 20.4 L 6.6 13.6 L 1 9.4 L 8 9 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 11 2 L 14 9 L 21 9.4 L 15.4 13.6 L 17 20.4 L 11 16.6 L 5 20.4 L 6.6 13.6 L 1 9.4 L 8 9 Z'/></svg>");
}

/* PAIR D — plus marks / squiggle (clients) */
#main :is(.clients, .section-clients) .head-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M 5 3 L 5 9 M 2 6 L 8 6 M 14 12 L 14 18 M 11 15 L 17 15'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M 5 3 L 5 9 M 2 6 L 8 6 M 14 12 L 14 18 M 11 15 L 17 15'/></svg>");
}
#main :is(.clients, .section-clients) .head-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M 2 8 Q 8 0, 14 8 T 28 8'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M 2 8 Q 8 0, 14 8 T 28 8'/></svg>");
}

/* PAIR E — bolt / dot-dash-dot (counters / fun-facts) */
#main .counters .head-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 9 2 L 2 13 L 7 13 L 5 20 L 12 9 L 7 9 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 9 2 L 2 13 L 7 13 L 5 20 L 12 9 L 7 9 Z'/></svg>");
}
#main .counters .head-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='4' cy='7' r='1.8' fill='black' stroke='none'/><path d='M 8 7 L 14 7'/><circle cx='18' cy='7' r='1.8' fill='black' stroke='none'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='4' cy='7' r='1.8' fill='black' stroke='none'/><path d='M 8 7 L 14 7'/><circle cx='18' cy='7' r='1.8' fill='black' stroke='none'/></svg>");
}

/* PAIR F — ticket / barcode (pricings) — pricings uses .section-title (not
   .head-title) so its doodle override needs both selectors to land. */
#main :is(.pricings, .section-pricings) .section-body .section-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 4 L 14 4 L 18 7 L 14 10 L 2 10 Z'/><circle cx='5' cy='7' r='1' fill='black' stroke='none'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 4 L 14 4 L 18 7 L 14 10 L 2 10 Z'/><circle cx='5' cy='7' r='1' fill='black' stroke='none'/></svg>");
}
#main :is(.pricings, .section-pricings) .section-body .section-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M 4 2 L 4 12 M 8 2 L 8 12 M 12 2 L 12 12 M 16 2 L 16 12 M 20 2 L 20 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M 4 2 L 4 12 M 8 2 L 8 12 M 12 2 L 12 12 M 16 2 L 16 12 M 20 2 L 20 12'/></svg>");
}
/* Appointments — calendar / clock pair so the booking section reads as a
   scheduling block, not another generic .section-title fallback. */
#main :is(.appointments, .section-appointments) .section-body .section-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='16' height='14' rx='2'/><path d='M 7 3 L 7 7 M 15 3 L 15 7 M 3 10 L 19 10'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='16' height='14' rx='2'/><path d='M 7 3 L 7 7 M 15 3 L 15 7 M 3 10 L 19 10'/></svg>");
}
#main :is(.appointments, .section-appointments) .section-body .section-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M 11 6 L 11 11 L 14.4 13'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M 11 6 L 11 11 L 14.4 13'/></svg>");
}

/* Legacy alias kept so PAIR F still has effect if any future template uses
   .head-title for pricings. */
#main :is(.pricings, .section-pricings) .head-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 4 L 14 4 L 18 7 L 14 10 L 2 10 Z'/><circle cx='5' cy='7' r='1' fill='black' stroke='none'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 4 L 14 4 L 18 7 L 14 10 L 2 10 Z'/><circle cx='5' cy='7' r='1' fill='black' stroke='none'/></svg>");
}
#main :is(.pricings, .section-pricings) .head-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M 4 2 L 4 12 M 8 2 L 8 12 M 12 2 L 12 12 M 16 2 L 16 12 M 20 2 L 20 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M 4 2 L 4 12 M 8 2 L 8 12 M 12 2 L 12 12 M 16 2 L 16 12 M 20 2 L 20 12'/></svg>");
}

/* PAIR G — book / leaf (blog .section-body and .section-pages) */
#main .section-body .section-title::before,
#main .section-pages .section-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 4 L 11 4 L 11 16 L 2 16 Z'/><path d='M 11 4 L 20 4 L 20 16 L 11 16'/><path d='M 6 8 L 9 8 M 6 11 L 9 11'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 4 L 11 4 L 11 16 L 2 16 Z'/><path d='M 11 4 L 20 4 L 20 16 L 11 16'/><path d='M 6 8 L 9 8 M 6 11 L 9 11'/></svg>");
}
#main .section-body .section-title::after,
#main .section-pages .section-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 11 2 Q 4 9, 6 16 Q 11 18, 18 13 Q 20 8, 11 2 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M 11 2 Q 4 9, 6 16 Q 11 18, 18 13 Q 20 8, 11 2 Z'/></svg>");
}

/* Per-section rules above (specificity 0,3,2) always beat this base
   fallback (specificity 0,2,2), so any future .head-title still gets a
   real doodle instead of going un-masked. */
#main .head-title::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='black' stroke='none'><circle cx='4' cy='7' r='1.8'/><circle cx='14' cy='7' r='1.8'/><circle cx='24' cy='7' r='1.8'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='black' stroke='none'><circle cx='4' cy='7' r='1.8'/><circle cx='14' cy='7' r='1.8'/><circle cx='24' cy='7' r='1.8'/></svg>");
}
#main .head-title::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 12 Q 10 0, 22 7'/><path d='M 22 7 L 17 4 M 22 7 L 18 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 12 Q 10 0, 22 7'/><path d='M 22 7 L 17 4 M 22 7 L 18 12'/></svg>");
}
/* The <p>/<ul>/<div> children inside .section-title drop to their own row
   below the brushed pill (grid row 2, spanning all three columns). */
#main .section-body .section-title > p,
#main .section-body .section-title > .divider,
#main .section-pages .section-title > p,
#main .section-pages .section-title > ul,
#main .section-pages .section-title > .divider { grid-column: 1 / -1; margin-left: 0; margin-right: 0; }
#main .head-title h3 {
    position: relative;
    display: inline-block;
    padding: 0.18em 0.85em 0.24em;
    margin: 0;
    color: #ffffff;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    letter-spacing: -0.005em;
    line-height: 1.15;
    transform: rotate(-1.2deg);
    z-index: 0;
}
#main .head-title h3::before {
    content: '';
    position: absolute;
    inset: -2px -8px;
    z-index: -1;
    background: var(--accent);
    border-radius: 60% / 70%;
    filter: url(#pill-brush-c);
}
#main .head-title h3::after {
    content: '';
    position: absolute;
    inset: 1px -10px -3px -2px;
    z-index: -2;
    background: var(--accent);
    border-radius: inherit;
    filter: url(#pill-brush-b);
}
/* Subtitle (the inline <span> after the title) reads as a hand-written
   sub-line under/next to the brushed pill, not part of the painted shape. */
#main .head-title h3 span {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    opacity: 0.92;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0;
    transform: none;
    filter: none;
}
#main .head-title h3 span::before,
#main .head-title h3 span::after { content: none; }
#main .head-title > p { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: 60ch; color: var(--muted); font-size: var(--fs-body); }

/* spacing between sub-section blocks inside About */
.section-shell > .services,
.section-shell > .counters,
.section-shell > .pricings,
.section-shell > .clients,
.section-shell > .testimonials,
.section-shell > .working-way { margin-top: 56px; }

/* Row gap for legacy section_*.blade.php — these wrap their cards in a plain
   `.row` with no per-col margin, so when cards wrap to a second row they sit
   flush against the row above. CSS row-gap on the flex .row gives every
   inter-row break consistent spacing without touching markup. */
#main :is(.services, .section-services) > .row,
#main .working-way > .row,
#main .counters > .row,
#main :is(.pricings, .section-pricings) > .row,
#main :is(.clients, .section-clients) > .row,
#main :is(.testimonials, .section-testimonials) > .row,
#main :is(.skills, .section-skills) > .row { row-gap: 36px; }

/* ============================================================================
   SERVICES — section_services.blade.php
   ============================================================================ */
/* Same brushed-border treatment as .about-card / .project-card / .timeline-card
   so these new partials read as siblings, not generic Bootstrap cards. */
.services-item {
    position: relative;
    z-index: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    padding: 28px 24px;
    text-align: center;
    transition: transform 220ms var(--ease-main, ease);
    height: 100%;
    margin-bottom: 36px;
}
.services-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main, ease),
                box-shadow 220ms var(--ease-main, ease);
}
.services-item:hover { transform: translateY(-3px); }
.services-item:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
.services-item .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--ink-rgb), 0.04);
    color: var(--accent);
}
.services-item .icon img {
    max-width: 36px;
    max-height: 36px;
    width: auto;
    height: auto;
}
.services-item .icon i {
    font-size: 30px;
    color: var(--accent);
}
.services-item h5 {
    font-family: var(--ff-subsubsection, var(--ff-subsection, var(--ff-heading, var(--ff-display))));
    font-weight: 600;
    font-size: var(--fs-subsubsection, 1.05rem);
    margin: 0 0 8px;
    color: var(--ink);
}
.services-item p {
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body, 0.92rem);
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

/* ============================================================================
   FUNFACTS / COUNTERS — section_funfacts.blade.php
   ============================================================================ */
.counter-block {
    position: relative;
    z-index: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    padding: 26px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    transition: transform 220ms var(--ease-main, ease);
}
.counter-block::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main, ease),
                box-shadow 220ms var(--ease-main, ease);
}
.counter-block:hover { transform: translateY(-2px); }
.counter-block:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
.counter-block .icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--ink-rgb), 0.04);
    color: var(--accent);
}
.counter-block .icon i { font-size: 26px; color: var(--accent); }
.counter-block .details-info { flex: 1 1 auto; min-width: 0; }
.counter-block .details-info h5 {
    font-family: var(--ff-body, var(--ff-sans));
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 4px;
}
.counter-block .counter-value {
    font-family: var(--ff-buttons, var(--ff-body, var(--ff-sans)));
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1;
    color: var(--accent);
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.counter-block-mask { display: none; }

/* ============================================================================
   PRICINGS — section_pricings.blade.php (style1 / style2 / default)
   ============================================================================ */
.pricing.pricing-palden {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}
/* Full-bleed image / colour-block cards keep the border on the parent
   instead of using ::before with a brushed filter — the wavy filter would
   bleed past the straight image edge. */
.pricing-item {
    position: relative;
    flex: 1 1 260px;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    display: flex;
    flex-direction: column;
    z-index: 0;
    transition: transform 220ms var(--ease-main, ease);
}
.pricing-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main, ease),
                box-shadow 220ms var(--ease-main, ease);
}
.pricing-item:hover {
    transform: translateY(-4px);
}
.pricing-item:hover::before {
    box-shadow: var(--card-shadow-hover);
}
.pricing-item.pricing-featured::before {
    border-color: var(--accent);
    box-shadow: 0 8px 28px rgba(var(--ink-rgb), 0.08);
}
/* Inner header with curved SVG bottom — round only top corners and clip. */
.pricing-item .pricing-deco {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.pricing-deco {
    position: relative;
    padding: 36px 24px 90px;
    color: var(--accent-ink, #fff);
    background: var(--accent);
    text-align: center;
    overflow: hidden;
}
.pricing-deco-img {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    color: var(--card);
}
.pricing-price {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1;
    margin: 0 0 6px;
    color: inherit;
}
.pricing-currency {
    font-size: 0.55em;
    vertical-align: super;
    margin-right: 4px;
    opacity: 0.85;
}
.pricing-period {
    display: block;
    font-size: 0.4em;
    font-weight: 400;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-top: 4px;
}
.pricing-title {
    font-family: var(--ff-subsection, var(--ff-display));
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    color: inherit;
}
.pricing-feature-list {
    list-style: none;
    margin: 0;
    padding: 24px 28px;
    flex: 1 1 auto;
}
.pricing-feature {
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body, 0.92rem);
    color: var(--ink);
    padding: 10px 0;
    border-bottom: 1px dashed var(--card-border);
}
.pricing-feature:last-child { border-bottom: 0; }
.pricing-action {
    display: block;
    margin: 0 28px 28px;
    padding: 12px 18px;
    text-align: center;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink, #fff) !important;
    font-family: var(--ff-buttons, var(--ff-display));
    font-weight: 600;
    text-decoration: none;
    transition: background 220ms ease, transform 220ms ease;
}
.pricing-action:hover {
    background: var(--ink);
    transform: translateY(-1px);
}
/* Fallback CTA text when the dummy/admin data leaves the anchor empty.
   Real data renders the post_excerpts field as the button label and overrides
   this. The :empty selector only matches when the <a> has no children at all. */
.pricing-action:empty::before {
    content: 'Get started';
    font-family: inherit;
    font-weight: inherit;
}

/* style2 .pricing-plan + default .planbox — same brushed treatment. */
.pricing-plan,
.planbox {
    position: relative;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    margin-bottom: 24px;
    text-align: center;
    z-index: 0;
}
.pricing-plan::before,
.planbox::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms ease, box-shadow 220ms ease;
}
.pricing-plan:hover::before,
.planbox:hover::before {
    box-shadow: var(--card-shadow-hover);
}
.pricing-plan h3,
.planbox .title h3 {
    font-family: var(--ff-subsection, var(--ff-display));
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    padding: 22px 18px 0;
    color: var(--ink);
}
.pricing-plan h4 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 2rem;
    margin: 12px 0 18px;
    color: var(--accent);
}
.pricing-plan h4 .amount span {
    font-size: 0.5em;
    vertical-align: super;
    margin-right: 4px;
    opacity: 0.8;
}
.pricing-plan .features ul,
.planbox ul {
    list-style: none;
    margin: 0;
    padding: 18px 24px;
    text-align: left;
}
.pricing-plan .features li,
.planbox ul li {
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body, 0.92rem);
    color: var(--ink);
    padding: 9px 0;
    border-bottom: 1px dashed var(--card-border);
}
.pricing-plan .features li:last-child,
.planbox ul li:last-child { border-bottom: 0; }
.pricing-plan .features a,
.planbox .prices a {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink, #fff) !important;
    font-family: var(--ff-buttons, var(--ff-display));
    font-weight: 600;
    text-decoration: none;
    transition: background 220ms ease;
}
.pricing-plan .features a:hover,
.planbox .prices a:hover { background: var(--ink); }
.planbox .prices {
    padding: 16px 22px 22px;
    text-align: center;
}
.planbox .prices strong {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 2rem;
    display: block;
    color: inherit;
}
.planbox .prices b {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 4px 0 12px;
}
.planbox .prices b em {
    text-decoration: line-through;
    margin-left: 6px;
    font-style: normal;
}

/* ============================================================================
   CLIENTS — section_clients.blade.php
   ============================================================================ */
/* Clients — wrap whichever variant (grid or carousel) in `.clients-card`
   and brush THAT, so the section reads as a single panelled strip
   regardless of admin-chosen layout. Matches .project-card /
   .skills-card / .timeline-card / .appointments-card. */
.clients-card {
    position: relative;
    padding: 18px 22px;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    z-index: 0;
}
.clients-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
.clients-card:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
/* Grid variant — keep inner divider lines but drop the redundant outer
   border now that .clients-card is doing that job. */
.clients-wrap {
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 22px;
    border-right: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    min-height: 110px;
    transition: background 220ms ease;
}
.client-logo:hover { background: rgba(var(--ink-rgb), 0.03); }
.client-logo img {
    max-width: 70%;
    max-height: 60px;
    width: auto;
    height: auto;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 220ms ease, opacity 220ms ease;
}
.client-logo:hover img { filter: grayscale(0); opacity: 1; }
.owl-client .client {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

/* ============================================================================
   TESTIMONIALS — section_testimonials.blade.php
   ============================================================================ */
.testimonial-item {
    position: relative;
    z-index: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    padding: 26px 26px 22px;
    margin-bottom: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 220ms var(--ease-main, ease);
}
.testimonial-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main, ease),
                box-shadow 220ms var(--ease-main, ease);
}
.testimonial-item:hover { transform: translateY(-2px); }
.testimonial-item:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
.testimonial-content {
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body, 0.95rem);
    line-height: 1.6;
    color: var(--ink);
    position: relative;
    padding-left: 28px;
    flex: 1 1 auto;
}
.testimonial-content::before {
    content: "\201C";
    position: absolute;
    left: -2px;
    top: -10px;
    font-family: var(--ff-display);
    font-size: 3rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.4;
}
.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--card-border);
}
.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
}
.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.testimonial-owner h6 {
    font-family: var(--ff-subsubsection, var(--ff-subsection, var(--ff-display)));
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
    color: var(--ink);
}
.testimonial-owner span {
    font-family: var(--ff-accent, var(--ff-sans));
    font-size: 0.82rem;
    color: var(--muted);
}
.testimonial-rating {
    margin-top: 4px;
    color: var(--accent);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}
.testimonial-rating::before { content: "\2605\2605\2605\2605\2605"; opacity: 0.3; }
.testimonial-rating.rating-1::before { content: "\2605\2606\2606\2606\2606"; opacity: 1; }
.testimonial-rating.rating-2::before { content: "\2605\2605\2606\2606\2606"; opacity: 1; }
.testimonial-rating.rating-3::before { content: "\2605\2605\2605\2606\2606"; opacity: 1; }
.testimonial-rating.rating-4::before { content: "\2605\2605\2605\2605\2606"; opacity: 1; }
.testimonial-rating.rating-5::before { content: "\2605\2605\2605\2605\2605"; opacity: 1; }

/* ============================================================================
   WORKING-WAY — section_workingway.blade.php
   ============================================================================ */
.working-way .item {
    position: relative;
    z-index: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    padding: 26px 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 36px;
    transition: transform 220ms var(--ease-main, ease);
}
.working-way .item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main, ease),
                box-shadow 220ms var(--ease-main, ease);
}
.working-way .item:hover { transform: translateY(-3px); }
.working-way .item:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
.working-way .icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--ink-rgb), 0.04);
    color: var(--accent);
}
.working-way .icon img {
    max-width: 32px;
    max-height: 32px;
}
.working-way .cont-step { flex: 1 1 auto; min-width: 0; }
.working-way .cont-step h4 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--accent);
    margin: 0 0 4px;
    line-height: 1;
}
.working-way .cont-step h5 {
    font-family: var(--ff-subsubsection, var(--ff-subsection, var(--ff-display)));
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 6px;
}
.working-way .cont-step p {
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body, 0.9rem);
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

/* ============================================================================
   Blog widget on home (onepage_blog.blade.php) + each_blog grid
   Uses .section-body / .container / .section-inner / .section-title /
   .featured-post / .featured-image / .featured-meta / .post-grid /
   .post-detail / .post-meta — all unstyled by default. Re-skin to motion.
   ============================================================================ */
/* section_blog, section_pricings, section_clients etc. wrap content in
   `.section-body > .container > .section-inner`. The .container needs the
   *exact* same padding rule as `.section-shell` (lines ~568-578) — using
   the same CSS custom-property values keeps blog/pricing/clients flush
   with the rest of the page on every viewport. No max-width: section-shell
   doesn't have one either, and tying it down to 1200px was making these
   sections noticeably narrower than the others on wide screens. */
#main .section-body { width: 100%; }
#main .section-body > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--section-pad-y, 120px)
             clamp(var(--section-pad-x-min, 28px), 4vw, var(--section-pad-x-max, 96px));
}
/* Mobile override removed — same single-source-of-truth rule as
   .section-shell so widths align with the rest of the page. */
#main .section-body .section-inner { width: 100%; }

/* The blog widget lives inside section#blog which has its own padding.
   Layout is the 3-column grid declared above (~line 2916); only override
   margin here so the heading sits flush-left and gets a 40px gap to content.
   Do NOT re-set display/text-align — that would undo the grid + left-align. */
#main .section-body .section-title {
    margin: 0 0 40px;
}
#main .section-body .section-title h2 {
    position: relative;
    display: inline-block;
    padding: 0.18em 0.85em 0.24em;
    margin: 0;
    color: #ffffff;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    letter-spacing: -0.005em;
    line-height: 1.15;
    transform: rotate(-1.5deg);
    z-index: 0;
}
#main .section-body .section-title h2::before {
    content: '';
    position: absolute;
    inset: -2px -8px;
    z-index: -1;
    background: var(--accent);
    border-radius: 60% / 70%;
    filter: url(#pill-brush-a);
}
#main .section-body .section-title h2::after {
    content: '';
    position: absolute;
    inset: 1px -10px -3px -2px;
    z-index: -2;
    background: var(--accent);
    border-radius: inherit;
    filter: url(#pill-brush-b);
}
#main .section-body .section-title p {
    margin: 0;
    font-family: var(--ff-body, var(--ff-sans));
    color: var(--muted);
    font-size: var(--fs-body);
    max-width: 60ch;
}
#main .section-body .divider { display: none; }
#main .section-body .row.merged { margin-left: -12px; margin-right: -12px; }
#main .mb-50 { margin-bottom: 50px; }
#main .mb-20 { margin-bottom: 20px; }
#main .clearfix::after { content: ''; display: table; clear: both; }
#main .float-left { float: left; }
#main .float-right { float: right; }

/* Featured-post — large pinned card + small siblings.
   Brushed outline matches .project-card / .timeline-card so blog cards read
   as the same hand. Outer parent is `overflow: visible` so the wavy ::before
   border can flex outwards; image clipping is delegated to .featured-image. */
#main .featured-post {
    position: relative;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    margin-bottom: 24px;
    height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    z-index: 0;
    transition: transform 220ms ease, box-shadow 220ms ease;
}
#main .featured-post::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms ease, box-shadow 220ms ease;
}
#main .featured-post:hover {
    transform: translateY(-3px);
}
#main .featured-post:hover::before {
    box-shadow: var(--card-shadow-hover);
    border-color: var(--accent);
}
#main .featured-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: rgba(var(--ink-rgb), 0.06);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}
#main .featured-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 360ms ease;
}
#main .featured-post:hover .featured-image img { transform: scale(1.04); }
#main .featured-image .post-date,
#main .featured-image .post-views,
#main .featured-image .post-format-icon {
    position: absolute;
    top: 12px;
    background: rgba(var(--ink-rgb), 0.85);
    color: var(--bg);
    font-family: var(--ff-buttons, var(--ff-sans));
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 1;
    line-height: 1.2;
}
#main .featured-image .post-date { left: 12px; }
#main .featured-image .post-views,
#main .featured-image .post-format-icon { right: 12px; }
#main .featured-image .post-date i,
#main .featured-image .post-views i,
#main .featured-image .post-format-icon i { margin-right: 4px; vertical-align: -1px; }

#main .featured-meta { padding: 18px 20px 20px; }
#main .featured-meta h5 {
    font-family: var(--ff-subsubsection, var(--ff-subsection, var(--ff-display)));
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 10px;
    line-height: 1.3;
}
#main .featured-meta h5 a {
    color: var(--ink) !important;
    text-decoration: none;
    transition: color 220ms ease;
}
#main .featured-meta h5 a:hover { color: var(--accent) !important; }
#main .featured-meta.small h5 { font-size: 0.95rem; }
#main .featured-meta .post-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-family: var(--ff-body, var(--ff-sans));
    font-size: 0.78rem;
    color: var(--muted);
}
#main .featured-meta .post-meta li { display: inline-flex; align-items: center; }
#main .featured-meta .post-meta li i { color: var(--accent); margin-right: 4px; font-size: 0.95rem; }
#main .featured-meta .post-meta a {
    color: var(--muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
#main .featured-meta .post-meta a:hover { color: var(--accent); }

/* each_blog (.post-grid) — secondary post grid below the featured row.
   Brushed ::before outline matches .project-card / .skills-card / .timeline-card. */
#main .post-grid {
    position: relative;
    background: transparent;
    border: none;
    border-radius: var(--radius-card);
    overflow: visible;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 24px);
    z-index: 0;
    transition: transform 220ms ease;
}
#main .post-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--card);
    border: 1.25px solid var(--brush-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    filter: url(#pill-brush-c);
    transition: border-color 220ms var(--ease-main),
                box-shadow 220ms var(--ease-main);
}
#main .post-grid:nth-child(2n)::before { filter: url(#pill-brush-b); }
#main .post-grid:nth-child(3n)::before { filter: url(#pill-brush-d); }
#main .post-grid:nth-child(4n)::before { filter: url(#pill-brush-e); }
#main .post-grid:hover { transform: translateY(-3px); }
#main .post-grid:hover::before {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}
#main .post-grid-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: rgba(var(--ink-rgb), 0.06);
}
#main .post-grid-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 360ms ease;
}
#main .post-grid:hover .post-grid-image img { transform: scale(1.04); }
#main .post-grid-image .post-date,
#main .post-grid-image .post-views,
#main .post-grid-image .post-format-icon {
    position: absolute;
    top: 12px;
    background: rgba(var(--ink-rgb), 0.85);
    color: var(--bg);
    font-family: var(--ff-buttons, var(--ff-sans));
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 1;
    line-height: 1.2;
}
#main .post-grid-image .post-date { left: 12px; }
#main .post-grid-image .post-views,
#main .post-grid-image .post-format-icon { right: 12px; }
#main .post-grid-image .post-date i,
#main .post-grid-image .post-views i,
#main .post-grid-image .post-format-icon i { margin-right: 4px; vertical-align: -1px; }
/* Image-overlay meta band (author + tag) at the bottom of the card image. */
#main .post-grid-image .post-meta {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    padding: 28px 14px 10px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    z-index: 1;
}
#main .post-grid-image .post-meta ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 12px;
    font-family: var(--ff-body, var(--ff-sans));
    font-size: 0.78rem;
}
#main .post-grid-image .post-meta li,
#main .post-grid-image .post-meta a {
    color: #ffffff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
#main .post-grid-image .post-meta i { margin-right: 4px; }
#main .post-grid-image .post-meta a:hover { color: var(--accent) !important; }

#main .post-detail {
    padding: 18px 20px 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
#main .post-detail h5 {
    font-family: var(--ff-subsubsection, var(--ff-subsection, var(--ff-display)));
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 10px;
    line-height: 1.3;
}
#main .post-detail h5 a {
    color: var(--ink) !important;
    text-decoration: none;
    transition: color 220ms ease;
}
#main .post-detail h5 a:hover { color: var(--accent) !important; }
#main .post-detail p {
    font-family: var(--ff-body, var(--ff-sans));
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 14px;
    flex: 1 1 auto;
}
#main .post-detail .post-more {
    align-self: flex-start;
    color: var(--accent);
    font-family: var(--ff-buttons, var(--ff-display));
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 2px dashed var(--accent);
    padding-bottom: 2px;
}
#main .post-detail .post-more:hover { color: var(--ink); border-color: var(--ink); }

/* Browse-all CTA centered below the grid */
#main .row.mb-20.text-center { justify-content: center; margin-top: 12px; }
#main .row.mb-20.text-center .button {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink, #fff) !important;
    font-family: var(--ff-buttons, var(--ff-display));
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: background 220ms ease, transform 220ms ease;
}
#main .row.mb-20.text-center .button:hover {
    background: var(--ink);
    transform: translateY(-1px);
}

/* ============================================================
   Owl Carousel — minimum CSS to make .owl-testimonial / .owl-client
   render. Owl JS (in app.min.js) wraps slides in .owl-stage-outer >
   .owl-stage > .owl-item; without these rules the slides collapse.
   ============================================================ */
.owl-carousel,
.owl-carousel .owl-item {
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.owl-carousel {
    display: none;
    width: 100%;
    z-index: 1;
}
.owl-carousel.owl-loaded { display: block; }
.owl-carousel.owl-loading { opacity: 0; display: block; }
.owl-carousel.owl-hidden { opacity: 0; }
.owl-carousel .owl-stage {
    position: relative;
    touch-action: pan-Y;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.owl-carousel .owl-stage::after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item img {
    display: block;
    width: 100%;
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled { display: none; }
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: 0;
}
.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
    vertical-align: middle;
    padding: 4px;
    line-height: 1;
}
.owl-carousel.owl-drag .owl-item { user-select: none; }
.owl-carousel.owl-grab { cursor: grab; }
.owl-carousel.owl-rtl { direction: rtl; }
.owl-carousel.owl-rtl .owl-item { float: right; }
.owl-carousel .owl-dots { text-align: center; margin-top: 18px; }
.owl-carousel .owl-dots .owl-dot span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    background: rgba(var(--ink-rgb), 0.18);
    transition: background 200ms ease, transform 200ms ease;
}
.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
    background: var(--accent);
    transform: scale(1.2);
}

/* Logo carousel — clients in a row of plates */
#main :is(.clients, .section-clients) .owl-client .item {
    padding: 6px;
}
#main :is(.clients, .section-clients) .client {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
#main :is(.clients, .section-clients) .client:hover {
    border-color: var(--accent);
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}
#main :is(.clients, .section-clients) .client a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#main :is(.clients, .section-clients) .client img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.6);
    opacity: 0.75;
    transition: filter 220ms ease, opacity 220ms ease;
}
#main :is(.clients, .section-clients) .client:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Testimonial carousel — DOM is .owl-testimonial > .item > .testimonial-item.
   The .testimonial-item rules already exist higher up; this just makes sure
   the inline-block carousel children inherit a sane width before owl resizes. */
#main :is(.testimonials, .section-testimonials) .owl-testimonial .item { padding: 6px; }
#main :is(.testimonials, .section-testimonials) .testimonial-item { height: 100%; }

/* ============================================================================
   Inner pages (/blog, /post/*, /portfolio, /portfolio/*, /service/*)
   These render through `.section-pages > .section-inner > .section-title`,
   which is the same shape as the home blog widget but at a different selector.
   Bring the brushed-pill heading + motion typography into this branch.
   ============================================================================ */
#main .section-pages {
    width: 100%;
    /* nav-h on top so the heading isn't covered by the fixed navbar
       (this wrapper is a top-level page wrapper on /blog, /articles,
       /portfolio, /post/<slug>, etc.) plus section-pad-y for breathing
       room. Bottom padding stays at section-pad-y. */
    padding: calc(var(--nav-h, 72px) + var(--section-pad-y, 120px))
             clamp(var(--section-pad-x-min, 28px), 4vw, var(--section-pad-x-max, 96px))
             var(--section-pad-y, 120px);
    color: var(--ink);
    background: transparent;
}
/* Mobile override removed — same single-source-of-truth rule as
   .section-shell so widths align with the rest of the page. */
#main .section-pages .container { padding: 0; max-width: none; margin: 0; width: 100%; }
#main .section-pages .section-inner { width: 100%; }

/* The big brushed pill above the post — title is rendered as <h3>.
   Layout is the 3-column grid declared above (~line 2916); keep this rule
   to margin only so the heading stays flush-left like every other section. */
#main .section-pages .section-title {
    margin: 0 0 32px;
}
#main .section-pages .section-title h2,
#main .section-pages .section-title h3 {
    position: relative;
    display: inline-block;
    padding: 0.18em 0.85em 0.24em;
    margin: 0;
    color: #ffffff;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    letter-spacing: -0.005em;
    line-height: 1.18;
    transform: rotate(-1.2deg);
    z-index: 0;
    max-width: min(90vw, 60ch);
    word-break: break-word;
}
#main .section-pages .section-title h2::before,
#main .section-pages .section-title h3::before {
    content: '';
    position: absolute;
    inset: -2px -10px;
    z-index: -1;
    background: var(--accent);
    border-radius: 60% / 70%;
    filter: url(#pill-brush-c);
}
#main .section-pages .section-title h2::after,
#main .section-pages .section-title h3::after {
    content: '';
    position: absolute;
    inset: 1px -12px -3px -2px;
    z-index: -2;
    background: var(--accent);
    border-radius: inherit;
    filter: url(#pill-brush-b);
}
#main .section-pages .section-title .post-meta,
#main .section-pages .section-title ul.post-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: flex-start;
    font-family: var(--ff-body, var(--ff-sans));
    font-size: 0.85rem;
    color: var(--muted);
}
#main .section-pages .section-title .post-meta li { display: inline-flex; align-items: center; }
#main .section-pages .section-title .post-meta li i {
    color: var(--accent);
    margin-right: 6px;
    font-size: 0.95rem;
}
#main .section-pages .section-title .post-meta a {
    color: var(--muted);
    text-decoration: none;
    transition: color 200ms ease;
}
#main .section-pages .section-title .post-meta a:hover { color: var(--accent); }
#main .section-pages .section-title .divider { display: none; }

/* Titlebar / breadcrumbs — older layout chunk we still inherit. Hide the
   redundant <h2>Blog</h2> tag and restyle the breadcrumb trail to match the
   rest of the site (small, soft, accent on hover). */
#main #titlebar { width: 100%; margin: 0 0 36px; }
#main #titlebar .special-block-bg { text-align: center; padding: 0; background: transparent; }
#main #titlebar .special-block-bg > h2 {
    font-family: var(--ff-subsection, var(--ff-display));
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#main #breadcrumbs { background: transparent; padding: 0; }
#main #breadcrumbs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    justify-content: center;
    font-family: var(--ff-body, var(--ff-sans));
    font-size: 0.82rem;
    color: var(--muted);
}
#main #breadcrumbs ul li { display: inline-flex; align-items: center; }
#main #breadcrumbs ul li + li::before {
    content: '/';
    margin-right: 8px;
    color: rgba(var(--ink-rgb), 0.35);
}
#main #breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color 200ms ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#main #breadcrumbs a:hover { color: var(--accent); }
#main #breadcrumbs i { font-size: 0.85em; }

/* Single post body — the article itself. */
#main .single-post { width: 100%; }
#main .single-post .single-content { width: 100%; }
#main .single-post .post-thumbnail {
    margin: 0 0 28px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(var(--ink-rgb), 0.06);
    border: 1px solid var(--card-border);
}
#main .single-post .post-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
#main .single-post .post-content {
    font-family: var(--ff-body, var(--ff-sans));
    font-size: var(--fs-body);
    color: var(--ink);
    line-height: 1.7;
}
#main .single-post .post-content p { margin: 0 0 1.1em; }
#main .single-post .post-content h1,
#main .single-post .post-content h2,
#main .single-post .post-content h3,
#main .single-post .post-content h4,
#main .single-post .post-content h5 {
    font-family: var(--ff-subsection, var(--ff-display));
    color: var(--ink);
    margin: 1.6em 0 0.6em;
    line-height: 1.2;
}
#main .single-post .post-content blockquote {
    margin: 1.4em 0;
    padding: 14px 22px;
    border-left: 3px solid var(--accent);
    background: rgba(var(--accent-rgb, 139, 106, 174), 0.06);
    color: var(--ink);
    font-style: italic;
    border-radius: 0 12px 12px 0;
}
#main .single-post .post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#main .single-post .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 12px 0;
}
#main .single-post .post-content ul,
#main .single-post .post-content ol { padding-left: 1.4em; margin: 0 0 1.1em; }
#main .single-post .post-content code {
    background: rgba(var(--ink-rgb), 0.07);
    padding: 0.12em 0.4em;
    border-radius: 6px;
    font-size: 0.92em;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
}
#main .single-post .post-content pre {
    background: rgba(var(--ink-rgb), 0.07);
    padding: 16px 18px;
    border-radius: 12px;
    overflow: auto;
    font-size: 0.9em;
    line-height: 1.55;
    border: 1px solid var(--card-border);
}

/* Tags strip below the article. */
#main .single-post .tags {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#main .single-post .tags li {}
#main .single-post .tags a {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(var(--ink-rgb), 0.06);
    color: var(--ink);
    font-family: var(--ff-buttons, var(--ff-sans));
    font-size: 0.78rem;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
#main .single-post .tags a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

/* Related-post block on single post. Reuse .post-grid card style from blog widget. */
#main .single-post .related-post { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--card-border); }
#main .single-post .related-post .head-title { text-align: center; margin: 0 0 28px; }
#main .single-post .related-post .head-title h5 {
    display: inline-block;
    position: relative;
    padding: 0.16em 0.8em 0.22em;
    margin: 0;
    color: #ffffff;
    background: transparent;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    transform: rotate(-1deg);
    z-index: 0;
}
#main .single-post .related-post .head-title h5::before {
    content: '';
    position: absolute;
    inset: -2px -10px;
    z-index: -1;
    background: var(--accent);
    border-radius: 60% / 70%;
    filter: url(#pill-brush-d);
}

/* Sidebar widgets — search + categories + recent posts on single post / blog list. */
#main .widget {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 22px 22px 24px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
}
#main .widget .widget-title,
#main .widget h4,
#main .widget > h5 {
    font-family: var(--ff-subsection, var(--ff-display));
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border);
}
#main .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#main .widget ul li {
    padding: 12px 4px;
    border-bottom: 1px dashed var(--card-border);
    font-family: var(--ff-body, var(--ff-sans));
    font-size: 0.9rem;
}
#main .widget ul li:last-child { border-bottom: 0; }
#main .widget ul li a {
    color: var(--ink);
    text-decoration: none;
    transition: color 200ms ease;
}
#main .widget ul li a:hover { color: var(--accent); }

/* Recent / popular post widgets — thumb beside meta, not stacked below.
   Markup: <li><a class="thumb"><img></a><div class="recent-post-widget-content">…</div></li>
   Uses CSS grid so the thumb keeps a fixed track and the title column
   wraps cleanly without pushing the thumb out of alignment. */
#main .widget-recent-post ul li,
#main .widget-popular-post ul li {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 4px;
}
#main .widget-recent-post ul li > a.thumb,
#main .widget-popular-post ul li > a.thumb {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-soft);
}
#main .widget-recent-post ul li > a.thumb img,
#main .widget-popular-post ul li > a.thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 320ms var(--ease-main);
}
#main .widget-recent-post ul li > a.thumb:hover img,
#main .widget-popular-post ul li > a.thumb:hover img { transform: scale(1.04); }
#main .recent-post-widget-content,
#main .popular-post-widget-content {
    min-width: 0;
}
#main .recent-post-widget-content h5,
#main .popular-post-widget-content h5 {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px;
    /* Two-line clamp keeps long titles from blowing out the column. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#main .recent-post-widget-content h5 a,
#main .popular-post-widget-content h5 a { color: var(--ink); }
#main .recent-post-widget-content .recent-post-date,
#main .popular-post-widget-content .popular-post-date {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
}

#main .search-blog-input form {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
/* The .input wrapper holds BOTH the search field and the submit button
   (markup quirk in widget_search.blade.php) — without flex here the
   button stacks below the input. Make it a row so they sit inline. */
#main .search-blog-input .input {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: 6px;
}
#main .search-blog-input .input input {
    flex: 1 1 auto;
    min-width: 0;
}
#main .search-blog-input .input button {
    flex: 0 0 auto;
}
#main .search-blog-input input[type="text"],
#main .search-blog-input input[type="search"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    background: var(--bg);
    color: var(--ink);
    border-radius: 999px;
    font-family: var(--ff-body, var(--ff-sans));
    font-size: 0.9rem;
}
#main .search-blog-input input[type="text"]:focus,
#main .search-blog-input input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
}
#main .search-blog-input button,
#main .search-blog-input .button {
    padding: 0 16px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--ff-buttons, var(--ff-sans));
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 200ms ease;
}
#main .search-blog-input button:hover,
#main .search-blog-input .button:hover { background: var(--ink); }

/* Pagination strip on /blog and /portfolio listings. */
#main .pagination {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
#main .pagination li a,
#main .pagination li span {
    display: inline-block;
    min-width: 38px;
    text-align: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--ink);
    font-family: var(--ff-buttons, var(--ff-sans));
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
#main .pagination li.active a,
#main .pagination li.active span,
#main .pagination li a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}