/* =========================================================
   Seibel Consulting — design system
   Clean, modern, technical. Soft gray background, near-black
   text, one restrained accent color (navy, overridable via
   Ghost custom setting --color-accent).
   ========================================================= */

:root {
    --color-bg: #f7f8fa;
    --color-bg-alt: #eceef3;
    --color-header-bg: #e8e8ea; /* neutral gray — distinct from the slightly
                                  blue --color-bg-alt used for page sections */
    --color-text: #14161a;
    --color-text-muted: #565b66;
    --color-border: #e3e5ea;
    --color-accent: #1e3a6f; /* overridden inline by theme setting */
    --color-accent-dark: #152a52;
    --color-accent-contrast: #ffffff;

    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --gh-font-heading: var(--font-sans);
    --gh-font-body: var(--font-sans);

    --wrap-max: 1120px;
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
    --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.08);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--gh-font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

h1, h2, h3, h4 {
    font-family: var(--gh-font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p {
    margin: 0 0 1em;
}

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.75em 1.4em;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.btn-primary:hover {
    background: var(--color-accent-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

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

/* ---------------------------------------------------------
   Header / Nav
   --------------------------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-header-bg);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Image background on the nav, enabled by `has-bg-image` in partials/nav.hbs.
   Remove that class to fall back to the flat --color-header-bg.
   The scrim is not optional: nav text over unmodified falling-code fails
   contrast at any color, and at this weight the image reads as texture rather
   than as a picture — which is the point. Chrome stays quiet. */
.site-header.has-bg-image {
    background:
        linear-gradient(rgba(10, 12, 16, 0.62), rgba(10, 12, 16, 0.62)),
        url("/content/images/2026/08/nav-bg-plain.jpg") center / cover no-repeat;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.site-header.has-bg-image .site-logo,
.site-header.has-bg-image .site-nav a {
    color: #f4f5f7;
}

.site-header.has-bg-image .site-logo:hover,
.site-header.has-bg-image .site-nav a:hover {
    color: #ffffff;
}

.site-header.has-bg-image .nav-toggle-bar {
    background: #f4f5f7;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.site-logo {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.site-logo:hover {
    text-decoration: none;
    color: var(--color-accent);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav .nav {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
}

.site-nav a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.site-nav-cta {
    padding: 0.55em 1.1em;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast) !important;
    font-weight: 600 !important;
}

.site-nav-cta:hover {
    background: var(--color-accent-dark);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.nav-toggle-bar {
    width: 22px;
    height: 2px;
    background: var(--color-text);
}

/* ---------------------------------------------------------
   Nav — section sub-bar
   ---------------------------------------------------------
   Ghost has no nested nav, so "- Child" items are lifted into a full-width
   bar under the header by main.js. A bar rather than a floating dropdown:
   it opens on click (touch works like desktop), sits in normal flow (no
   z-index or positioning edge cases), and stays open while you're inside a
   section so sibling pages are one click apart. */

.nav-item.has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-item.has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.15s ease;
    opacity: 0.6;
}

.nav-item.has-children.is-open > a::after {
    transform: rotate(225deg) translateY(1px);
}

.site-subnav {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    /* Above the mobile nav panel, which is `position: fixed` and would
       otherwise paint over this bar, leaving its children unreachable on
       touch. Harmless on desktop, where nothing overlaps it. */
    position: relative;
    z-index: 60;
}

.site-subnav[hidden] {
    display: none;
}

.site-subnav-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-subnav a {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.site-subnav a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.site-subnav a.is-current {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

@media (max-width: 760px) {
    .site-subnav-inner {
        flex-direction: column;
        gap: 0;
    }

    /* With the menu open, the fixed panel starts at 72px and the sub-bar
       would land on top of the first two links — you'd tap "Services" and
       watch it disappear behind its own children. Push the bar to the foot
       of the panel so both stay readable; it keeps its normal in-flow
       position when the menu is closed. */
    .site-header:has(.site-nav.is-open) .site-subnav:not([hidden]) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 55vh;
        overflow-y: auto;
        border-bottom: none;
        box-shadow: 0 -6px 18px rgba(10, 12, 16, 0.10);
    }

    .site-subnav a {
        padding: 11px 0;
        border-bottom: 1px solid var(--color-border);
    }

    .site-subnav a:last-child {
        border-bottom: none;
    }

    .site-subnav a.is-current {
        border-bottom-color: var(--color-border);
    }
}

@media (max-width: 760px) {
    .nav-toggle {
        display: flex;
    }

    .site-nav {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-bg);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px 24px 24px;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .site-nav.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .site-nav .nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .site-nav a {
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid var(--color-border);
    }

    /* The has-bg-image rules above light the nav text for the dark scrimmed
       header. Below 760px the nav is no longer on that image — it's a fixed
       panel on --color-bg — so that light-on-dark pairing inverts into
       #f4f5f7 on #f7f8fa (1.02:1) and the menu reads as empty. Put the
       normal text color back for the panel only. */
    .site-header.has-bg-image .site-nav a {
        color: var(--color-text);
    }

    .site-header.has-bg-image .site-nav a:hover {
        color: var(--color-accent);
    }

    .site-nav-cta {
        margin-top: 16px;
        text-align: center;
    }
}

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

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    margin-top: 96px;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 24px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.site-footer-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.site-footer-links a {
    color: var(--color-text-muted);
}

.site-footer-links a:hover {
    color: var(--color-accent);
}

/* ---------------------------------------------------------
   Generic page
   --------------------------------------------------------- */

.page-header {
    padding: 64px 24px 32px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.page-feature-image {
    max-width: var(--wrap-max);
    margin: 0 auto 24px;
    border-radius: var(--radius);
    overflow: hidden;
}

.page-content {
    padding: 56px 24px;
    max-width: 760px;
}

.page-content h2 {
    margin-top: 1.6em;
}

.page-content ul,
.page-content ol {
    padding-left: 1.3em;
}

.page-content li {
    margin-bottom: 0.4em;
}

/* Koenig editor cards — image/gallery/etc. can be set to wide or full
   width in the editor; the theme has to give those classes somewhere to
   go, since .page-content itself is a narrow (760px) reading column. */
.page-content .kg-width-wide {
    width: 100%;
    margin-left: calc(50% - 50vw + 12px);
    margin-right: calc(50% - 50vw + 12px);
    max-width: none;
}

.page-content .kg-width-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
}

.page-content .kg-width-wide img,
.page-content .kg-width-full img {
    width: 100%;
}

@media (min-width: 1200px) {
    .page-content .kg-width-wide {
        width: 1040px;
        margin-left: calc(50% - 520px);
        margin-right: calc(50% - 520px);
    }
}

/* Tables and images break out of the reading column.
   Prose stays at 760px because long lines are hard to read — the eye loses
   its place returning to the next line past roughly 90 characters. Tables and
   diagrams have the opposite problem: cramming them into a text-width column
   makes them unreadable. So they get the full wrap width instead.
   Capped at --wrap-max so they still line up with the nav and footer. */
.page-content figure,
.page-content table {
    width: calc(100vw - 48px);
    max-width: var(--wrap-max);
    margin-left: calc(50% - min(50vw - 24px, var(--wrap-max) / 2));
}

.page-content table {
    border-collapse: collapse;
    font-size: 0.95rem;
    margin-top: 1.6em;
    margin-bottom: 1.6em;
}

.page-content th,
.page-content td {
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.page-content th {
    background: var(--color-bg-alt);
    font-weight: 600;
}

.page-content figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* Photographs are not diagrams.
   The breakout above exists so architecture diagrams and wide tables aren't
   crammed into a 760px text column. Applied to a portrait snapshot it does
   the opposite kind of damage: a 502px-wide photo stretched to 1120px goes
   soft, and a column of full-width photos buries the prose they illustrate.

   `.page-photos` keeps images inside the reading column, caps their height so
   a portrait can't run past a screenful, and never upscales past the file's
   own resolution. Set it on the page wrapper (see page.hbs) for any page
   whose images are photographs rather than figures. */
.page-content.page-photos figure {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}

.page-content.page-photos figure img {
    width: auto;
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--radius);
}

/* Consecutive photos form a row rather than a column.
   Three portraits stacked vertically each sit at their own natural width, so
   the left edge stair-steps and the page runs long. Side by side they read as
   a set, share a baseline, and the whole group costs one screenful.
   Ghost emits each image as its own <figure>, so this targets runs of
   adjacent figures. */
@media (min-width: 700px) {
    /* A figure that is followed by another figure, OR preceded by one, is part
       of a run — :has() handles the first of the group, which a sibling
       combinator alone cannot reach. A lone photo between paragraphs matches
       neither and keeps its standalone size. */
    .page-content.page-photos figure:has(+ figure),
    .page-content.page-photos figure + figure {
        display: inline-block;
        vertical-align: top;
        width: calc(33.333% - 8px);
        margin: 28px 0;
        /* Kill the whitespace between inline-block siblings, which otherwise
           offsets the first item in the row by a few pixels. */
        font-size: 0;
    }

    /* One fixed height for every photo in a row. Mixed aspect ratios would
       otherwise stagger the tops; object-fit crops to fill instead of
       distorting, biased upward so faces survive the crop. */
    .page-content.page-photos figure:has(+ figure) img,
    .page-content.page-photos figure + figure img {
        width: 100%;
        height: 280px;
        max-height: none;
        object-fit: cover;
        object-position: center 25%;
    }
}

/* A single portrait beside the opening paragraphs.
   Third image mode, after the diagram breakout and `page-photos`. Set
   `page-portrait` on the page wrapper and the FIRST figure floats right at a
   fixed size while text wraps beside it; any later figure on the page falls
   through to the default treatment.

   Fixed width rather than a percentage: this is a face at a known size, not
   content that should scale with the column. The ring is load-bearing — a
   headshot shot on white has no edge against a white page. */
.page-content.page-portrait figure:first-of-type {
    float: right;
    width: 220px;
    max-width: 40%;
    margin: 6px 0 20px 32px;
}

.page-content.page-portrait figure:first-of-type img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    /* Square at content scale — see .hero-portrait for why the hero differs.
       The panel gives the cutout an edge; no ring, since a border around a
       transparent image outlines the empty box rather than the subject. */
    border-radius: 22px;
    background: #e7eaf0;
}

/* Stop the float before the next heading, or a short intro lets a later
   section slide up alongside the portrait. */
.page-content.page-portrait h2 {
    clear: both;
}

/* Below the breakout threshold a 220px float leaves ~40 characters of wrap,
   which reads as a column of fragments. Center it instead and let the text
   run full width. */
@media (max-width: 700px) {
    .page-content.page-portrait figure:first-of-type {
        float: none;
        width: 180px;
        max-width: 100%;
        margin: 0 auto 24px;
    }
}

.page-content figcaption {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* Below the breakout threshold there's no room to widen — sit inside the
   column like everything else, and let a wide table scroll rather than
   forcing the page to scroll sideways. */
@media (max-width: 860px) {
    .page-content figure,
    .page-content table {
        width: 100%;
        margin-left: 0;
    }

    .page-content .table-scroll {
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------
   Home — hero
   --------------------------------------------------------- */

.hero {
    padding: 96px 24px 88px;
    text-align: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent),
        var(--color-bg);
}

/* The hero claims "you work with me directly" — the portrait is what makes
   that checkable. Centered above the eyebrow rather than floated: the whole
   hero is center-aligned over a radial gradient, and a float would break that
   axis. On a white background a white-backdrop headshot has no edge of its
   own, so the ring is structural, not decorative. */
/* Square, like the in-page portraits. A circle would read as an avatar, but
   this sits in the page body at content scale, not in the header — and a
   circular mask crops away the frame the photo was composed with. */
.hero-portrait {
    /* Softer than the 10px --radius used by buttons and cards: at portrait
       size a small radius reads as an accident rather than a choice. */
    width: 148px;
    height: 148px;
    border-radius: 26px;
    object-fit: cover;
    /* Filled panel behind the cutout. A transparent PNG has no edge of its own,
       so without this the shoulders dissolve into the page and it reads as a
       floating head rather than a portrait. */
    background: #e7eaf0;
    margin: 0 auto 24px;
    display: block;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 20px;
}

.hero h1 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subhead {
    max-width: 620px;
    margin: 20px auto 20px;
    font-size: 1.15rem;
    color: var(--color-text-muted);
}

/* Qualifier under the subhead — deliberately quieter than it, so it filters
   without competing with the pitch. */
.hero-filter {
    max-width: 560px;
    margin: 0 auto 36px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    opacity: 0.85;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   Home — sections
   --------------------------------------------------------- */

.home-section {
    padding: 72px 24px;
}

.home-section-alt {
    background: var(--color-bg-alt);
}

.home-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.home-section-header p {
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.service-card {
    padding: 28px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.service-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 16px;
}

.service-card h3 {
    margin-bottom: 0.4em;
}

.service-card p {
    color: var(--color-text-muted);
    margin-bottom: 0;
    font-size: 0.96rem;
}

.cta-band {
    padding: 80px 24px;
    text-align: center;
}

.cta-band h2 {
    margin-bottom: 0.3em;
}

.cta-band p {
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto 32px;
}

/* ---------------------------------------------------------
   Posts / feed (used sparingly — no blog nav item yet)
   --------------------------------------------------------- */

.post-feed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 700px) {
    .post-feed {
        grid-template-columns: 1fr;
    }
}

.post-card {
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.post-card-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.post-card h3 {
    margin-bottom: 0.3em;
}

.post-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   Work / case studies
   --------------------------------------------------------- */

.work-list {
    display: grid;
    gap: 20px;
}

.work-item {
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.work-item-meta {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.work-item h3 {
    margin-bottom: 0.5em;
}

/* ---------------------------------------------------------
   Contact
   --------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 700px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-card {
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
}

.contact-card h3 {
    margin-bottom: 0.3em;
}

.contact-card a {
    font-weight: 600;
}