/* ===================================================================
   TechChiefX: design tokens
   A technical-drawing language: structural rules instead of decoration,
   precise alignment, no gradients, no rounded cards, restrained motion.
=================================================================== */

:root {
    --paper: #F6F4EE;
    --paper-dim: #E9F0EC;
    --ink: #102A43;
    --ink-soft: #526777;
    --charcoal: #102A43;
    --charcoal-soft: #193B56;
    --blue: #176B87;
    --blue-soft: #2D8AA4;
    --accent: #E06B4F;
    --line: #D2DED9;
    --line-dark: rgba(255,255,255,0.14);
    --font-head: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --max-width: 1180px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Backwards-compatible alias: --red kept so nothing silently loses its color. */
:root { --red: var(--accent); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Keep the page behind the mobile navigation from moving or showing through. */
body.menu-open { overflow: hidden; }

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

a { color: var(--blue); }

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Motion ---------- */
/* Content is visible by default (progressive enhancement); main.js adds
   .reveal only when it's about to animate it, so nothing is ever hidden
   behind JS or motion settings. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.btn, .nav-cta, .service-link, button, .work-card, .concept-badge, .main-nav a {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.work-card:hover { border-color: var(--blue); }

.service-link::after { content: " \2192"; display: inline-block; transition: transform 0.18s ease; }
.service-link:hover::after { transform: translateX(4px); }

.btn-primary::after { content: " \2192"; display: inline-block; transition: transform 0.18s ease; }
.btn-primary:hover::after { transform: translateX(4px); }

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

/* ---------- Site header ---------- */

.site-header {
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: rgba(247, 246, 243, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    z-index: 50;
    transition: height 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    transition: height 0.25s var(--ease);
}

.site-header.is-scrolled .wrap { height: 62px; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.brand {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.brand span { color: var(--red); }

.main-nav {
    display: flex;
    gap: 32px;
    align-items: center;
}

.main-nav a {
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.main-nav a:hover { border-bottom-color: var(--red); }

.nav-cta {
    background: var(--ink);
    color: var(--paper) !important;
    padding: 10px 20px;
    border: 1px solid var(--ink);
}

.nav-cta:hover { background: var(--blue); border-color: var(--blue); }

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    width: 44px;
    height: 44px;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.menu-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle.is-open .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
    border-bottom: 1px solid var(--line);
    padding: 88px 0 76px;
    position: relative;
}

/* When an image is supplied in Admin > Settings, use it as a full hero
   background. The left-to-right navy overlay keeps the copy readable while
   preserving the image's strongest detail on the right. */
.hero-with-image {
    min-height: min(720px, calc(100vh - 80px));
    display: flex;
    align-items: center;
    background-image: linear-gradient(90deg, rgba(16,42,67,.95) 0%, rgba(16,42,67,.82) 44%, rgba(16,42,67,.42) 100%), var(--hero-image);
    background-size: cover;
    background-position: center;
    color: var(--paper);
}
.hero-with-image .hero-grid { width: 100%; grid-template-columns: 1fr; }
.hero-with-image .hero-frame { max-width: 700px; border-left-color: var(--accent); }
.hero-with-image .hero-visual { display: none; }
.hero-with-image .hero-coord,
.hero-with-image p { color: rgba(246,244,238,.94); text-shadow: 0 1px 2px rgba(0,0,0,.16); }
.hero-with-image h1 { color: var(--paper); text-shadow: 0 2px 8px rgba(0,0,0,.18); }
.hero-with-image .hero-trustline { border-top-color: rgba(246,244,238,.28); }
.hero-with-image .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero-with-image .btn-primary:hover { background: #ef8066; border-color: #ef8066; }
.hero-with-image .btn-secondary { border-color: rgba(246,244,238,.72); color: var(--paper); }
.hero-with-image .btn-secondary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.hero-frame {
    position: relative;
    padding: 0 0 0 24px;
    border-left: 3px solid var(--blue);
}

.hero-coord {
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
    margin: 0 0 18px;
}

.hero h1 {
    font-family: var(--font-head);
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 24px;
    max-width: 16ch;
}

.hero p {
    font-size: 19px;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 0 34px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
    display: inline-block;
    padding: 14px 26px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--ink);
    color: var(--ink);
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--blue); border-color: var(--blue); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

/* ---------- Overview ---------- */

.overview-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .overview-grid { grid-template-columns: 1fr; } }
.overview-visual { border: 1px solid var(--line); background: #fff; padding: 12px; }
.overview-visual img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.overview-heading { font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 18px; max-width: 18ch; }
.overview-body { font-size: 17px; color: var(--ink-soft); max-width: 52ch; margin: 0; }

/* ---------- About ---------- */

.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-visual { border: 1px solid var(--line); background: #fff; padding: 12px; }
.about-visual img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }

/* ---------- Sections ---------- */

section.block { padding: 76px 0; border-bottom: 1px solid var(--line); }
section.block:last-of-type { border-bottom: none; }
.block-alt { background: var(--paper-dim); }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--font-head); font-size: clamp(26px, 3vw, 36px); margin: 0; letter-spacing: -0.01em; max-width: 20ch; }
.section-num { font-size: 13px; color: var(--ink-soft); border: 1px solid var(--line); padding: 4px 10px; white-space: nowrap; }

/* ---------- Services ---------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.service-item {
    padding: 30px 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-top: 2px solid transparent;
    transition: border-top-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.service-item:hover { border-top-color: var(--accent); background: #fff; }

.service-item h3 { font-size: 19px; margin: 0 0 10px; }
.service-item p { color: var(--ink-soft); margin: 0; font-size: 15.5px; }

/* ---------- Process ---------- */

.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-visual { border: 1px solid var(--line); background: #fff; padding: 20px; position: relative; }
.hero-visual svg, .hero-visual > img { width: 100%; height: auto; display: block; }
.hero-visual-tag {
    position: absolute;
    top: -1px; left: -1px;
    background: var(--charcoal);
    color: var(--paper);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
}
.hero-visual-tag.tag-right { left: auto; right: -1px; background: var(--accent); }

.hero-trustline { font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 30px !important; max-width: 44ch; }

.trust-strip-block { padding: 40px 0; background: var(--charcoal); border-bottom: 1px solid var(--charcoal); }
.trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.trust-item { display: flex; align-items: baseline; gap: 12px; }
.trust-mark { font-size: 13px; color: var(--accent); font-weight: 700; border: 1px solid var(--line-dark); padding: 3px 8px; }
.trust-item p { margin: 0; font-size: 15.5px; color: var(--paper); }

.service-index { display: block; font-size: 13px; color: var(--blue); font-weight: 700; margin-bottom: 10px; }
.service-deliverables { margin: 14px 0 4px; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }
.service-deliverables li { margin-bottom: 4px; }
.service-link { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); }
.service-link:hover { color: var(--ink); border-color: var(--ink); }

.work-card-concept { background: var(--paper-dim); }
.concept-badge { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 2px 8px; margin-bottom: 10px; font-weight: 600; }

.process-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; position: relative; }
.process-timeline .process-step { border-top: none; border-left: 2px solid var(--line); padding: 0 0 0 18px; margin-right: 10px; transition: border-left-color 0.25s var(--ease); }
.process-timeline .process-step.is-active { border-left-color: var(--accent); }
.process-timeline .step-index { font-size: 13px; color: var(--blue); font-weight: 700; transition: color 0.25s var(--ease); }
.process-timeline .process-step.is-active .step-index { color: var(--accent); }
.process-timeline h3 { font-size: 17px; margin: 8px 0 6px; }
.process-timeline p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

.principle-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; gap: 28px; flex-wrap: wrap; }
.principle-list li { font-size: 14.5px; color: var(--ink); border: 1px solid var(--line); padding: 8px 16px; background: #fff; }

/* ---------- Work / projects ---------- */

.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.work-card {
    border: 1px solid var(--line);
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.work-card:hover { transform: translateY(-3px); }
.work-card img { aspect-ratio: 16/10; object-fit: cover; border-bottom: 1px solid var(--line); }
.work-card-body { padding: 22px; }
.work-card h3 { font-size: 18px; margin: 0 0 8px; }
.work-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.work-empty { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }
.work-outcome { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px !important; color: var(--blue) !important; font-weight: 600; }

/* Carousel variant: same cards, horizontally scrollable with snap and
   explicit prev/next controls. Falls back to a plain scroll container
   (no JS required) - the buttons are a progressive enhancement. */
/* Carousel disabled per request: cards wrap normally instead of
   scrolling horizontally. Markup/JS is untouched - this is a pure
   CSS override. */
.work-carousel-wrap { position: relative; }
.work-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    overflow-x: visible;
}
.work-carousel .work-card,
.work-carousel .work-card-concept { scroll-snap-align: none; }
.carousel-controls { display: none; }
.carousel-btn {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.carousel-btn:hover { border-color: var(--accent); color: var(--accent); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-btn:disabled:hover { border-color: var(--line); color: var(--ink); }

/* ---------- About ---------- */

.about-copy { max-width: 68ch; font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--ink); }

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

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-info-item {
    border: 1px solid var(--line);
    background: #fff;
    padding: 18px 20px;
}
.contact-info-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.contact-info-item a, .contact-info-item span:not(.contact-info-label) { font-size: 16px; color: var(--ink); text-decoration: none; }
.contact-info-item a:hover { color: var(--accent); }
.form-submit { width: 100%; text-align: center; border: none; cursor: pointer; }

form.contact-form label { display: block; font-size: 13.5px; margin: 18px 0 6px; color: var(--ink-soft); }
form.contact-form label:first-child { margin-top: 0; }
form.contact-form input,
form.contact-form select,
form.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
}
form.contact-form textarea { resize: vertical; }
form.contact-form button { margin-top: 22px; }

.form-notice { background: #E8F0E6; border: 1px solid #9EBB98; padding: 14px 18px; font-size: 15px; }
.form-error { background: #F5E2DE; border: 1px solid var(--red); padding: 14px 18px; font-size: 15px; }

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

.site-footer { border-top: 1px solid var(--line); padding: 48px 0 32px; background: var(--paper-dim); }
.site-footer { border-top: 0; padding: 72px 0 28px; background: var(--charcoal); color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: minmax(250px, 2.2fr) repeat(3, minmax(120px, 1fr)); gap: 44px; margin-bottom: 56px; }
.footer-brand { max-width: 310px; }
.footer-kicker { display: block; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; margin-bottom: 16px; }
.footer-grid h4 { font-size: 14px; text-transform: none; color: var(--paper); margin: 0 0 18px; }
.footer-brand h4 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; }
.footer-grid a, .footer-grid p { font-size: 14.5px; color: rgba(246,244,238,.72); text-decoration: none; display: block; margin-bottom: 10px; }
.footer-grid a { transition: color .18s ease, transform .18s ease; }
.footer-grid a:hover { color: var(--paper); transform: translateX(3px); }
.footer-brand .footer-intro { color: var(--paper); line-height: 1.65; margin-bottom: 12px; }
.footer-brand .footer-address { color: rgba(246,244,238,.58); }
.footer-bottom { border-top: 1px solid rgba(246,244,238,.18); padding-top: 20px; font-size: 12.5px; color: rgba(246,244,238,.58); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) {
    .site-footer { padding: 56px 0 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
    .footer-brand { max-width: 100%; padding-bottom: 6px; border-bottom: 1px solid rgba(246,244,238,.18); }
    .footer-grid h4 { margin-bottom: 14px; }
    .footer-grid a, .footer-grid p { margin-bottom: 8px; }
}

/* ---------- Mobile nav ---------- */

@media (max-width: 860px) {
    /* backdrop-filter on a sticky ancestor can make fixed descendants use the
       header as their containing block on some browsers. Remove it while the
       mobile layout is active so the menu is truly viewport-sized. */
    .site-header { backdrop-filter: none; }

    /* Full-viewport overlay. The dynamic viewport unit handles mobile browser
       chrome better than height:100%, while the fallbacks cover older browsers. */
    .main-nav {
        display: none;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        background: var(--paper);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: clamp(112px, 16vh, 160px) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
        gap: 16px;
        z-index: 1001;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .main-nav.open { display: flex; }
    .main-nav a { font-size: 21px; }
    .main-nav.open a { animation: mobileMenuItemIn .42s var(--ease) both; }
    .main-nav.open a:nth-child(2) { animation-delay: .04s; }
    .main-nav.open a:nth-child(3) { animation-delay: .08s; }
    .main-nav.open a:nth-child(4) { animation-delay: .12s; }
    .main-nav.open a:nth-child(5) { animation-delay: .16s; }
    .menu-toggle { display: flex; position: relative; z-index: 1002; background: var(--blue); color: var(--paper); border-color: var(--blue); margin-top: 0; padding: 0; }
    .menu-toggle.is-open { background: var(--accent); border-color: var(--accent); }
    .menu-toggle-bar { background: currentColor; }
    .nav-cta { margin-top: 10px; }

    .hero-with-image {
        min-height: calc(100svh - 80px);
        padding: 72px 0 64px;
        background-position: 62% center;
        /* On mobile the hero collapses to one full-width column, so the
           desktop left-to-right overlay (dark on the left, fading out on
           the right for the image) ends up running under the full width
           of the text and washes it out on the right-hand side of each
           line. Use a near-uniform top-to-bottom wash instead so text
           stays legible no matter where it sits horizontally. */
        background-image: linear-gradient(180deg, rgba(16,42,67,.90) 0%, rgba(16,42,67,.88) 55%, rgba(16,42,67,.82) 100%), var(--hero-image);
    }
    .hero-with-image .hero-frame { max-width: 100%; }
}

@keyframes mobileMenuItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   Admin panel
=================================================================== */

.admin-body { background: var(--paper-dim); }

.admin-login {
    max-width: 380px;
    margin: 90px auto;
    background: #fff;
    border: 1px solid var(--line);
    padding: 40px;
}
.admin-login h1 { font-size: 22px; margin: 0 0 24px; }

.admin-shell { display: flex; min-height: 100vh; }
.admin-nav {
    width: 200px;
    flex-shrink: 0;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}
.admin-nav-brand { color: var(--paper); font-weight: 700; padding: 0 22px 20px; font-size: 15px; border-bottom: 1px solid #333; margin-bottom: 12px; }
.admin-nav-links { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.admin-nav-toggle { display: none; }
.admin-nav a { color: #C9CBD1; text-decoration: none; padding: 11px 22px; font-size: 14.5px; }
.admin-nav a:hover, .admin-nav a.active { background: #232631; color: #fff; }
.admin-nav-logout { margin-top: auto; }

.admin-main { flex: 1; padding: 40px 44px; max-width: 920px; }
.admin-main h1 { font-size: 24px; margin: 0 0 6px; }
.admin-intro { color: var(--ink-soft); margin: 0 0 28px; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px; }
.stat-box { background: #fff; padding: 22px; }
.stat-box-alert { background: #FBEDE9; }
.stat-number { display: block; font-size: 28px; font-weight: 700; }
.stat-label { font-size: 13px; color: var(--ink-soft); }

.admin-quicklinks { display: flex; gap: 14px; flex-wrap: wrap; }
.admin-quicklinks a { border: 1px solid var(--line); background: #fff; padding: 12px 18px; text-decoration: none; color: var(--ink); font-size: 14.5px; }

.admin-panel { background: #fff; border: 1px solid var(--line); padding: 26px 30px; margin-bottom: 28px; }
.admin-panel h2 { font-size: 17px; margin: 0 0 18px; }

.admin-panel form label,
.admin-login form label { display: block; font-size: 13.5px; color: var(--ink-soft); margin: 16px 0 6px; }
.admin-panel form label:first-of-type,
.admin-login form label:first-of-type { margin-top: 0; }
.admin-panel input[type=text],
.admin-panel input[type=number],
.admin-panel input[type=url],
.admin-panel input[type=password],
.admin-panel input[type=file],
.admin-panel textarea,
.admin-login input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 14.5px;
}
.checkbox-label { display: flex !important; align-items: center; gap: 8px; margin-top: 16px !important; font-size: 14.5px !important; color: var(--ink) !important; }
.checkbox-label input { width: auto !important; }

button, .btn-admin {
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    padding: 11px 22px;
    font-size: 14.5px;
    cursor: pointer;
    margin-top: 20px;
}
button:hover { background: var(--blue); border-color: var(--blue); }
.button-secondary { margin-left: 12px; color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.link-button { background: none; border: none; color: var(--red); padding: 0; margin: 0; text-decoration: underline; cursor: pointer; font-size: 14px; }
.inline-form { display: inline; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.admin-table th { color: var(--ink-soft); font-weight: 600; font-size: 13px; }
.admin-thumb { width: 140px; margin-top: 10px; border: 1px solid var(--line); }

.message-card { border: 1px solid var(--line); padding: 18px 20px; margin-bottom: 14px; }
.message-unread { border-left: 3px solid var(--red); }
.message-meta { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.message-date { float: right; }
.message-actions { display: flex; gap: 16px; margin-top: 10px; }


/* ===================================================================
   TechChiefX public refresh
   A quiet editorial system built from the existing brand colours.
   No stock photography, decorative icon set, or artificial interface art.
=================================================================== */
:root {
    --paper: #F8F7F3;
    --paper-dim: #EEF3F4;
    --ink: #092A46;
    --ink-soft: #526579;
    --charcoal: #092A46;
    --charcoal-soft: #123B5B;
    --blue: #176B87;
    --blue-soft: #DCECF1;
    --accent: #E86E50;
    --accent-dark: #C95339;
    --line: #D6DFE1;
    --line-dark: rgba(255,255,255,.18);
    --font-head: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { background: var(--paper); color: var(--ink); font-size: 16px; }
.wrap { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
.site-header { background: rgba(248,247,243,.94); border-bottom-color: var(--line); }
.site-header .wrap { height: 76px; }
.site-header.is-scrolled .wrap { height: 64px; }
.brand { font-family: var(--font-head); font-size: 22px; letter-spacing: -.04em; }
.main-nav { gap: 28px; }
.main-nav a { font-size: 14px; }
.nav-cta { background: var(--ink); border-color: var(--ink); padding: 12px 18px; }
.nav-cta:hover { background: var(--accent); border-color: var(--accent); }

.hero { padding: 112px 0 96px; background: var(--paper); overflow: hidden; }
.hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 76px; }
.hero-frame { padding-left: 28px; border-left: 2px solid var(--accent); }
.hero-coord { color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.01; letter-spacing: -.065em; max-width: 12ch; margin-bottom: 28px; }
.hero p { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 54ch; }
.hero-actions { gap: 12px; }
.btn { padding: 14px 20px; border-radius: 0; font-size: 14px; letter-spacing: .01em; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary { border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); }
.hero-trustline { max-width: 48ch; margin-top: 34px !important; padding-top: 18px; border-top-color: var(--line); font-size: 14px !important; color: var(--ink-soft) !important; }
.hero-panel { align-self: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.hero-panel-kicker { margin: 0 !important; padding: 16px 0 12px; color: var(--blue) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-panel-row { display: grid; grid-template-columns: 36px 1fr; gap: 6px 14px; padding: 18px 0; border-top: 1px solid var(--line); transition: padding-left .35s var(--ease), background-color .35s ease; }
.hero-panel-row:hover { padding-left: 12px; background: rgba(220,236,241,.35); }
.hero-panel-row span { grid-row: span 2; color: var(--accent); font-family: var(--font-head); font-size: 13px; font-weight: 700; }
.hero-panel-row strong { font-family: var(--font-head); font-size: 20px; letter-spacing: -.03em; }
.hero-panel-row small { color: var(--ink-soft); font-size: 14px; }

section.block { padding: 96px 0; border-bottom-color: var(--line); }
.section-head { margin-bottom: 48px; }
.section-head h2 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.055em; }
.section-num { border: 0; border-top: 1px solid var(--accent); padding: 8px 0 0; color: var(--blue); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.overview-grid { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.overview-heading { font-family: var(--font-head); font-size: clamp(32px, 4vw, 52px); letter-spacing: -.055em; max-width: 15ch; }
.overview-body { font-size: 18px; line-height: 1.65; max-width: 62ch; }
.trust-strip-block { background: var(--charcoal); padding: 28px 0; }
.trust-strip { grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item { padding: 0 22px; border-left: 1px solid var(--line-dark); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-mark { border: 0; padding: 0; color: var(--accent); font-family: var(--font-head); }
.trust-item p { font-size: 14px; }

.service-grid { border: 0; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.service-item { padding: 32px 28px 30px; border: 1px solid var(--line); background: transparent; min-height: 290px; }
.service-item:hover { border-color: var(--accent); background: #fff; }
.service-item h3 { font-family: var(--font-head); font-size: 22px; letter-spacing: -.03em; }
.service-item p, .service-deliverables { font-size: 15px; line-height: 1.6; }
.service-deliverables { list-style: none; padding-left: 0; margin-top: 24px; }
.service-deliverables li { border-top: 1px solid var(--line); padding: 8px 0; margin: 0; }
.service-link { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }

.work-carousel { gap: 16px; }
.work-section { position: relative; background: linear-gradient(180deg, var(--paper) 0%, #F1F5F5 20%, var(--paper) 100%); }
.work-section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1160px, calc(100% - 64px)); height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translateX(-50%); opacity: .7; }
.work-card { position: relative; border-color: var(--line); background: #fff; overflow: hidden; transition: border-color .35s ease, transform .55s var(--ease), box-shadow .55s var(--ease); }
.work-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--accent); transition: width .5s var(--ease); }
.work-card:hover { border-color: var(--accent); transform: translateY(-8px); box-shadow: 0 18px 36px rgba(9,42,70,.1); }
.work-card:hover::after { width: 100%; }
.work-card img { transition: transform .7s var(--ease), filter .7s ease; }
.work-card:hover img { transform: scale(1.035); filter: saturate(1.08); }
.work-card-body { padding: 26px; }
.work-card h3 { font-family: var(--font-head); font-size: 21px; letter-spacing: -.03em; transition: color .3s ease; }
.work-card:hover h3 { color: var(--accent-dark); }
.work-empty { max-width: 58ch; line-height: 1.65; }
.work-intro { max-width: 68ch; color: var(--ink-soft); font-size: 18px; line-height: 1.65; margin: -18px 0 38px; }
.systems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 64px; }
.system-card { position: relative; min-height: 250px; padding: 28px; border: 1px solid var(--line); background: #fff; overflow: hidden; transition: transform .45s var(--ease), border-color .3s ease, box-shadow .45s var(--ease); }
.system-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--accent); transition: width .45s var(--ease); }
.system-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 16px 32px rgba(9,42,70,.08); }
.system-card:hover::after { width: 100%; }
.system-card-number { display: block; margin-bottom: 34px; color: var(--accent); font-family: var(--font-head); font-size: 13px; font-weight: 700; }
.system-card h3 { max-width: 16ch; margin: 0 0 12px; font-family: var(--font-head); font-size: 25px; letter-spacing: -.045em; }
.system-card p { max-width: 44ch; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.system-card-story { margin-bottom: 10px !important; }
.system-card-outcome { color: var(--ink) !important; }
.system-card p strong { color: var(--ink); font-weight: 700; }
.system-card-detail { display: block; margin-top: 28px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.real-work-heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 22px; }
.real-work-heading p { max-width: 40ch; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.work-section .reveal { transition-duration: .72s; }
.concept-badge { border: 0; border-top: 1px solid var(--accent); padding: 8px 0 0; color: var(--accent-dark); }
.work-card-concept { background: var(--paper-dim); }

.block-alt { background: var(--paper-dim); }
.process-timeline { gap: 16px; }
.process-timeline .process-step { padding: 0 0 0 20px; border-left: 1px solid var(--line); }
.process-timeline h3 { font-family: var(--font-head); font-size: 20px; }
.process-timeline p { font-size: 15px; line-height: 1.6; }
.step-index { font-family: var(--font-head); }
.about-grid { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.about-copy { font-family: var(--font-body); font-size: 22px; line-height: 1.55; max-width: 38ch; letter-spacing: -.02em; }
.about-note { color: var(--ink-soft); font-size: 16px; max-width: 48ch; }
.principle-list { gap: 10px; }
.principle-list li { border-color: var(--line); background: transparent; padding: 8px 12px; font-size: 13px; }

.contact-grid { grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr); gap: 72px; align-items: start; }
.contact-form { border: 1px solid var(--line); padding: 30px; background: #fff; }
form.contact-form label { color: var(--ink); font-weight: 600; font-size: 13px; }
form.contact-form input, form.contact-form select, form.contact-form textarea { border-color: var(--line); border-radius: 0; padding: 14px; background: var(--paper); }
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus { border-color: var(--accent); outline: 2px solid rgba(232,110,80,.18); }
.contact-info { gap: 12px; }
.contact-info-item { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 16px 0; }
.contact-info-label { color: var(--blue); font-weight: 600; }
.contact-info-item a, .contact-info-item span:not(.contact-info-label) { font-size: 17px; }
.form-submit { background: var(--accent); }
.form-submit:hover { background: var(--accent-dark); }

.site-footer { background: var(--charcoal); padding: 64px 0 28px; }
.footer-kicker { letter-spacing: .14em; }

@media (max-width: 900px) {
    .hero { padding: 76px 0 68px; }
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-panel { max-width: 560px; width: 100%; }
    .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
    .trust-item:nth-child(3) { border-left: 0; padding-left: 0; }
    .service-grid { grid-template-columns: 1fr; }
    .service-item { min-height: auto; }
    .process-timeline { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
    .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .systems-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .wrap { padding-left: 22px; padding-right: 22px; }
    .site-header .wrap { height: 68px; }
    .main-nav { padding: 104px 22px 32px; background: var(--paper); }
    .main-nav a { font-size: 27px; font-family: var(--font-head); letter-spacing: -.04em; }
    .main-nav .nav-cta { font-family: var(--font-body); font-size: 15px; margin-top: 12px; padding: 15px 18px; }
    .menu-toggle { border-color: var(--ink); background: transparent; color: var(--ink); }
    .menu-toggle.is-open { background: var(--accent); border-color: var(--accent); }
}

@media (max-width: 600px) {
    body { font-size: 15px; }
    section.block { padding: 68px 0; }
    .hero h1 { font-size: clamp(38px, 12vw, 58px); }
    .hero p { font-size: 17px; }
    .hero-actions .btn { width: 100%; text-align: center; }
    .hero-panel-row strong { font-size: 18px; }
    .hero-panel-row small { font-size: 13px; }
    .trust-strip { grid-template-columns: 1fr; gap: 12px; }
    .trust-item, .trust-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-dark); padding: 12px 0 0; }
    .trust-item:first-child { border-top: 0; padding-top: 0; }
    .process-timeline { grid-template-columns: 1fr; }
    .contact-form { padding: 22px; }
    .real-work-heading { display: block; }
    .real-work-heading p { margin-top: 14px; }
}


/* ===================================================================
   UI polish pass
   Focused on hierarchy, rhythm, and calm interaction quality.
=================================================================== */
:root {
    --font-head: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --shadow-soft: 0 18px 50px rgba(16,42,67,.08);
}

html { scroll-padding-top: 84px; }
body { font-size: 16px; }

.site-header { background: rgba(246,244,238,.88); border-bottom-color: rgba(210,222,217,.8); }
.site-header .wrap { height: 76px; }
.site-header.is-scrolled .wrap { height: 64px; }
.brand { font-family: var(--font-head); font-size: 22px; letter-spacing: -.045em; }
.main-nav { gap: 26px; }
.main-nav a { font-size: 14px; font-weight: 500; }
.nav-cta { padding: 12px 18px; box-shadow: 0 8px 18px rgba(16,42,67,.08); }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(16,42,67,.14); }

.hero { min-height: min(760px, calc(100svh - 76px)); display: flex; align-items: center; padding: 104px 0 96px; background: linear-gradient(135deg, var(--paper) 0%, #F8F8F3 58%, #EAF1EF 100%); }
.hero-grid { gap: clamp(42px, 7vw, 96px); }
.hero-frame { padding-left: 28px; border-left-width: 2px; border-left-color: var(--accent); }
.hero-coord { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { font-family: var(--font-head); font-size: clamp(43px, 5.7vw, 76px); line-height: .99; letter-spacing: -.07em; max-width: 11ch; margin-bottom: 28px; }
.hero p { font-size: 17px; line-height: 1.65; max-width: 54ch; }
.hero-actions { gap: 12px; }
.btn { padding: 15px 20px; font-size: 14px; letter-spacing: .01em; transition: transform .35s var(--ease), background-color .25s ease, border-color .25s ease, box-shadow .35s var(--ease); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(16,42,67,.1); }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: #C9543A; border-color: #C9543A; }
.hero-trustline { margin-top: 34px !important; padding-top: 18px; font-size: 13px !important; line-height: 1.55 !important; }
.hero-panel { box-shadow: var(--shadow-soft); background: rgba(255,255,255,.58); border-top: 2px solid var(--ink); }
.hero-panel-kicker { padding: 18px 22px 13px; }
.hero-panel-row { padding: 19px 22px; }
.hero-panel-row strong { font-size: 18px; }
.hero-panel-row small { font-size: 13px; }
.hero-panel-row:hover { padding-left: 28px; background: rgba(220,236,241,.55); }
.hero-panel-footer { display: flex; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

section.block { padding: 104px 0; }
.section-head { margin-bottom: 42px; }
.section-head h2 { font-family: var(--font-head); font-size: clamp(31px, 4vw, 52px); line-height: 1.02; letter-spacing: -.065em; }
.section-num { color: var(--blue); border-top: 1px solid var(--accent); border-right: 0; border-bottom: 0; border-left: 0; padding: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.overview-heading { font-family: var(--font-head); font-size: clamp(34px, 4.5vw, 58px); line-height: 1; letter-spacing: -.07em; max-width: 13ch; }
.overview-body { font-size: 17px; line-height: 1.7; }
.trust-strip-block { padding: 30px 0; }
.trust-item { padding: 0 20px; }
.trust-mark { border: 0; padding: 0; font-family: var(--font-head); }

.service-grid { gap: 14px; border: 0; }
.service-item { min-height: 300px; padding: 30px 26px; border: 1px solid var(--line); background: rgba(255,255,255,.25); transition: transform .45s var(--ease), border-color .3s ease, background-color .3s ease, box-shadow .45s var(--ease); }
.service-item:hover { transform: translateY(-5px); border-color: var(--accent); background: #fff; box-shadow: var(--shadow-soft); }
.service-item h3 { font-family: var(--font-head); font-size: 23px; letter-spacing: -.04em; }
.service-item p, .service-deliverables { font-size: 14px; line-height: 1.6; }
.service-deliverables { margin-top: 22px; padding-left: 0; list-style: none; }
.service-deliverables li { padding: 8px 0; border-top: 1px solid var(--line); }

.work-section { background: linear-gradient(180deg, #F1F5F3 0%, var(--paper) 28%, var(--paper) 100%); }
.work-section::before { width: min(1180px, calc(100% - 56px)); opacity: .9; }
.work-intro { max-width: 66ch; margin-top: -14px; font-size: 17px; line-height: 1.7; }
.systems-grid { gap: 14px; margin-bottom: 74px; }
.system-card { min-height: 276px; padding: 30px; background: rgba(255,255,255,.78); transition: transform .55s var(--ease), border-color .3s ease, box-shadow .55s var(--ease), background-color .35s ease; }
.system-card:hover { transform: translateY(-8px); background: #fff; box-shadow: 0 22px 44px rgba(16,42,67,.1); }
.system-card-number { margin-bottom: 38px; font-family: var(--font-head); }
.system-card h3 { font-family: var(--font-head); font-size: 27px; line-height: 1.02; letter-spacing: -.06em; }
.system-card p { font-size: 14px; line-height: 1.58; }
.system-card-detail { margin-top: 26px; font-size: 10px; letter-spacing: .14em; }
.real-work-heading { margin-bottom: 24px; }
.work-carousel { gap: 14px; }
.work-card { border-color: var(--line); background: #fff; }
.work-card-body { padding: 26px 28px 30px; }
.work-card h3 { font-family: var(--font-head); font-size: 22px; letter-spacing: -.045em; }
.work-card p { line-height: 1.6; }
.work-card-concept { background: #F1F5F3; }
.concept-badge { color: var(--accent-dark); border: 0; border-top: 1px solid var(--accent); padding: 8px 0 0; }

.process-timeline { gap: 18px; }
.process-timeline .process-step { padding-left: 22px; }
.process-timeline h3 { font-family: var(--font-head); font-size: 21px; letter-spacing: -.035em; }
.process-timeline p { line-height: 1.6; }
.about-copy { font-family: var(--font-body); font-size: 22px; line-height: 1.55; letter-spacing: -.025em; }

.contact-grid { gap: 72px; }
.contact-form { padding: 32px; box-shadow: var(--shadow-soft); }
.contact-info-item { padding: 17px 0; }

.reveal { transform: translateY(20px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
.work-section .reveal { transition-duration: .82s; }

@media (max-width: 900px) {
    .hero { min-height: auto; padding: 82px 0 76px; }
    .hero-panel { max-width: 620px; }
    .systems-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .main-nav { padding: 104px 24px 32px; }
    .main-nav a { font-size: 26px; }
    .hero-grid { gap: 42px; }
}

@media (max-width: 600px) {
    .wrap { padding-left: 20px; padding-right: 20px; }
    section.block { padding: 76px 0; }
    .hero { padding: 62px 0 60px; }
    .hero-frame { padding-left: 20px; }
    .hero h1 { font-size: clamp(40px, 12vw, 58px); }
    .hero p { font-size: 16px; }
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; text-align: center; }
    .hero-panel-footer { display: block; line-height: 1.8; }
    .hero-panel-footer span { display: block; }
    .hero-panel-footer span + span { margin-top: 4px; }
    .section-head { margin-bottom: 34px; }
    .section-head h2 { font-size: 39px; }
    .overview-heading { font-size: 41px; }
    .service-item { min-height: auto; padding: 26px 22px; }
    .system-card { min-height: auto; padding: 24px; }
    .system-card-number { margin-bottom: 28px; }
    .system-card h3 { font-size: 25px; }
    .work-intro { font-size: 16px; }
    .work-card-body { padding: 22px; }
    .contact-form { padding: 22px; }
}


/* ---------- Portfolio proof and founder credibility ---------- */
.portfolio-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin: 0 0 24px; }
.portfolio-heading h3 { margin: 16px 0 0; font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); letter-spacing: -.05em; }
.portfolio-heading p { max-width: 48ch; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.portfolio-card { overflow: hidden; border: 1px solid var(--line); background: #fff; transition: transform .55s var(--ease), border-color .3s ease, box-shadow .55s var(--ease); }
.portfolio-card:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 22px 44px rgba(16,42,67,.1); }
.portfolio-image-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper-dim); }
.portfolio-image-wrap img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .75s var(--ease), filter .6s ease; }
.portfolio-card:hover .portfolio-image-wrap img { transform: scale(1.035); filter: saturate(1.06); }
.portfolio-badge { position: absolute; left: 16px; bottom: 16px; padding: 7px 9px; background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-card-body { padding: 24px 26px 28px; }
.portfolio-type { display: block; margin-bottom: 12px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-card h3 { margin: 0 0 10px; font-family: var(--font-head); font-size: 25px; letter-spacing: -.055em; }
.portfolio-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.62; }
.portfolio-note { display: block; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--accent-dark); font-size: 12px; font-weight: 600; }
.founder-proof { padding: 30px; border-top: 2px solid var(--accent); background: var(--paper-dim); }
.founder-kicker { margin: 0 0 18px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.founder-proof h3 { margin: 0 0 16px; font-family: var(--font-head); font-size: clamp(25px, 3vw, 38px); line-height: 1.05; letter-spacing: -.06em; }
.founder-proof > p:not(.founder-kicker) { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.capability-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.capability-list span { padding: 7px 9px; border: 1px solid var(--line); background: rgba(255,255,255,.56); color: var(--ink); font-size: 11px; }

@media (max-width: 860px) {
    .portfolio-heading { display: block; }
    .portfolio-heading p { margin-top: 16px; }
    .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-card-body { padding: 22px; }
    .founder-proof { padding: 24px; }
}

.portfolio-concepts-heading { margin-top: 82px; }
.concept-portfolio-grid .portfolio-card { background: #fbfcfa; }
.concept-portfolio-grid .portfolio-badge { background: var(--blue); }
@media (max-width: 600px) {
    .portfolio-concepts-heading { margin-top: 60px; }
}

@media (min-width: 1100px) {
    .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .portfolio-card-body { padding: 19px 20px 22px; }
    .portfolio-card h3 { font-size: 21px; }
    .portfolio-card p { font-size: 13px; line-height: 1.55; }
    .portfolio-note { margin-top: 16px; font-size: 11px; }
}