/* ==========================================================================
   swesstech.css - SwessTech site styles

   Loaded by index.html right after bootstrap.min.css, so these rules can
   override Bootstrap's defaults. Order matters: when two rules target the
   same element with equal specificity, the one further down this file wins.

   Contents
     1.  Theme variables
     2.  Base elements
     3.  Shared components
     4.  Utilities and small components
     5.  Components not used on this page
     6.  Contact buttons
     7.  Responsive: tablets and smaller (below 992px)
     8.  Responsive: phones (below 576px)
     9.  Reduced motion
     10. Print
     11. Concept 2 page sections
     12. Concept 2: tablets and smaller (below 992px)
     13. Concept 2: phones (below 576px)
   ========================================================================== */

/* ==========================================================================
   1. Theme variables
   Brand colors and the font stack in one place. Change a
   value here and every rule that uses var(--name) follows.
   ========================================================================== */

:root {
    /* Brand colors: navy (headings, buttons), anchor blue (labels, icons, hover), slate (accent) */
    --navy: #10345e;
    --anchor: #2e507c;
    --slate: #6d86a5;
    /* Text, border and background colors (--mist is defined but not used yet) */
    --ink: #152d48;
    --muted: #5d6e80;
    --line: #dce4ed;
    --paper: #fff;
    --mist: #f2f6fa;
    /* Hover and highlight color. Concept 2 switches it to --anchor (see .concept-2). */
    --accent: var(--slate);
    /* Hand the text color and font stack to Bootstrap. */
    --bs-body-color: var(--ink);
    /* Manrope is not loaded by the page, so visitors see it only if it is
       installed on their device; otherwise Segoe UI, then Arial, is used. */
    --bs-body-font-family: "Manrope", "Segoe UI", Arial, sans-serif;
}

/* ==========================================================================
   2. Base elements
   Defaults for the page itself and for plain HTML elements.
   ========================================================================== */

/* Smooth-scroll to in-page links. scroll-padding-top stops section
   headings from landing underneath the sticky navigation bar. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

/* Page defaults. overflow-x: clip stops anything wider
   than the window from causing sideways scrolling. */
body {
    margin: 0;
    line-height: 1.65;
    background: var(--paper);
    overflow-x: clip;
}

/* All headings: tight line height and letter spacing, bold, brand navy. */
h1,
h2,
h3,
h4 {
    line-height: 1.12;
    letter-spacing: -.04em;
    font-weight: 700;
    color: var(--navy);
}

/* Page title. clamp(min, preferred, max) scales the size with the window width. */
h1 {
    font-size: clamp(2.65rem, 5.4vw, 5rem);
}

/* Section headings (scale between 2rem and 3.25rem). */
h2 {
    font-size: clamp(2rem, 3.4vw, 3.25rem);
}

/* Card, row and step titles. */
h3 {
    font-size: 1.4rem;
}

/* Space below every paragraph. */
p {
    margin-bottom: 1.2rem;
}

/* ==========================================================================
   3. Shared components
   Building blocks used across the page. Rules that adjust Bootstrap
   components work because this file loads after bootstrap.min.css.
   ========================================================================== */

/* --- Layout and text ------------------------------------------------------ */

/* Maximum content width. Because this loads after Bootstrap, it replaces
   Bootstrap's stepped container widths: content stays fluid up to 1220px. */
.container {
    max-width: 1220px;
}

/* Small uppercase label above a heading (e.g. "What SwessTech does"). */
.eyebrow {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .19em;
    color: var(--anchor);
    margin-bottom: 1.05rem;
}

/* Larger intro paragraph under a heading. */
.lead-copy {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--muted);
    max-width: 630px;
}

/* --- Icons, links and keyboard focus -------------------------------------- */

/* Icons (SVG image files in resources/image/): a fixed 24px square that never shrinks,
   centered on the line of text. Each icon's color is drawn into its file. */
.icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Text link followed by an arrow icon (e.g. "See the approach"). */
.arrow-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
}

/* Arrow link hover color. */
.arrow-link:hover {
    color: var(--accent);
}

/* Clear outline for keyboard users. :focus-visible leaves mouse clicks without the outline. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #81a7d3;
    outline-offset: 5px;
    border-radius: 4px;
}

/* --- Buttons -------------------------------------------------------------- */

/* Size, weight and rounded corners for every Bootstrap button. */
.btn {
    padding: .82rem 1.35rem;
    font-weight: 650;
    border-radius: 7px;
}

/* Primary buttons in brand navy, anchor blue on hover
   and press (set through Bootstrap's button variables). */
.btn-primary {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--anchor);
    --bs-btn-hover-border-color: var(--anchor);
    --bs-btn-active-bg: var(--anchor);
    --bs-btn-active-border-color: var(--anchor);
}

/* Outline buttons in brand colors. Not used on this page. */
.btn-outline-primary {
    --bs-btn-color: var(--navy);
    --bs-btn-border-color: #bccbdc;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
}

/* --- Navigation bar ------------------------------------------------------- */

/* Top bar: white with a bottom border. z-index keeps the
   sticky bar above the content scrolling underneath it. */
.site-nav {
    background: #fff;
    border-bottom: 1px solid #e7edf3;
    min-height: 88px;
    z-index: 30;
}

/* Logo link: no extra spacing, never squeezed, and
   leaves 64px for the menu button on small screens. */
.navbar-brand {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    max-width: calc(100% - 64px);
}

/* Logo frame, 230px wide (less on very small phones) by 48px tall. overflow:
   hidden crops the blank space above and below the artwork in the logo image. */
.brand-window {
    position: relative;
    display: block;
    width: min(230px, calc(100vw - 126px));
    max-width: 100%;
    height: 48px;
    overflow: hidden;
}

/* Logo image fills the frame's width and is centered vertically, so the crop is even. */
.brand-window img {
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Space between menu links. */
.navbar-nav {
    gap: 18px;
}

/* Menu link text. !important is needed to beat Bootstrap's
   more specific navbar padding rule on wide screens. */
.nav-link {
    font-size: .88rem;
    font-weight: 600;
    color: #445971;
    padding: .6rem .3rem !important;
}

/* Menu link hover color. */
.nav-link:hover {
    color: var(--navy);
}

/* Menu (hamburger) button shown on smaller screens. */
.navbar-toggler {
    border: 1px solid var(--line);
    padding: .5rem;
}

/* Softer focus ring on the menu button than Bootstrap's default. */
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px #a9bdd7;
}

/* --- Page sections -------------------------------------------------------- */

/* Standard top and bottom padding for page sections. */
.section-space {
    padding: 95px 0;
}

/* Intro block (label, heading, text) at the top of a section. */
.section-intro {
    margin-bottom: 44px;
    max-width: 720px;
}

/* Intro text: muted and slightly larger. */
.section-intro p {
    color: var(--muted);
    font-size: 1.03rem;
}

/* --- Tags ----------------------------------------------------------------- */

/* Rounded pill labels (the founder's skills). */
.tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    padding: .28rem .68rem;
    border-radius: 50px;
    font-size: .74rem;
    color: var(--muted);
    font-weight: 600;
}

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

/* Page footer: small muted text under a top border. */
.site-footer {
    padding: 27px 0;
    color: var(--muted);
    font-size: .78rem;
    border-top: 1px solid var(--line);
}

/* Footer email link matches the footer text... */
.site-footer a {
    color: inherit;
    text-decoration: none;
}

/* ...and is underlined on hover. */
.site-footer a:hover {
    text-decoration: underline;
}

/* --- Review banner -------------------------------------------------------- */

/* Design-review banner above the navigation. Hidden unless
   the page address ends in ?review (see swesstech.js). */
.review-strip {
    background: #edf2f7;
    color: #536d8a;
    font-size: .75rem;
    padding: 7px 0;
}

/* Links in the review banner. */
.review-strip a {
    color: #254e7a;
    text-decoration: none;
    font-weight: 600;
}

/* --- Skip link ------------------------------------------------------------ */

/* "Skip to content" link for keyboard and screen
   reader users: parked above the top of the window... */
.skip-link {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 1000;
    padding: 12px;
    background: white;
    color: var(--navy);
}

/* ...and dropped into view when it receives keyboard focus. */
.skip-link:focus {
    top: 10px;
}

/* ==========================================================================
   4. Utilities and small components
   Single-purpose helper classes and small one-off pieces.
   ========================================================================== */

/* Very small muted text. Not used on this page. */
.tiny {
    font-size: .72rem;
    color: var(--muted);
}

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

/* Small uppercase label text. Not used on this page. */
.small-cap {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Large rounded corners. Not used on this page. */
.rounded-block {
    border-radius: 16px;
}

/* Founder monogram tile ("SJW"). */
.founder-initials {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--navy);
    background: #e6eef7;
    border-radius: 18px;
    letter-spacing: -.07em;
}

/* Large statistic figure. Not used on this page. */
.metric {
    font-size: 2.6rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--navy);
}

/* Anything with the hidden attribute stays hidden, even if a class gives it a display
   value (swesstech.js toggles hidden on the review banner and on project cards). */
[hidden] {
    display: none !important;
}

/* Small status message line. Not used on this page. */
.copy-status {
    min-height: 22px;
    font-size: .78rem;
    margin: 4px 0 0;
}

/* Email address link in the contact section: the size
   scales with the window and long addresses wrap. */
.contact-address {
    font-size: clamp(1.05rem, 2.25vw, 1.7rem);
    color: inherit;
    word-break: break-word;
    text-decoration: none;
}

/* Underline the email address on hover. */
.contact-address:hover {
    text-decoration: underline;
}

/* ==========================================================================
   5. Components not used on this page
   Styles for parts that do not appear in this page's HTML: project
   cards, mini interface mock-ups, project filters, dialogs and
   service lists. They can be deleted if no other page needs them.
   ========================================================================== */

/* --- Project cards -------------------------------------------------------- */

/* Card frame: fills its column's height, bordered with rounded corners. */
.project-card {
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* Padding around the card text. */
.project-card .project-copy {
    padding: 27px;
}

/* Card description text. */
.project-card p {
    font-size: .9rem;
    color: var(--muted);
}

/* Card title. */
.project-card h3 {
    font-size: 1.2rem;
    letter-spacing: -.03em;
}

/* Small caption line. */
.project-caption {
    font-size: .69rem;
    color: #7a8da3;
    margin-top: 12px;
}

/* --- Mini interface mock-ups (shown on project cards) --------------------- */

/* Mock-up panel at the top of a card. */
.mini-ui {
    padding: 20px;
    background: #f0f4f9;
    border-bottom: 1px solid var(--line);
    min-height: 184px;
}

/* Mock-up header row. */
.mini-ui .ui-top {
    font-size: .72rem;
    color: #49627d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px;
}

/* Small round status dot. */
.ui-dot {
    width: 6px;
    height: 6px;
    background: #6d86a5;
    border-radius: 50%;
    display: inline-block;
}

/* Mock-up list row. */
.mini-ui .ui-row {
    border: 1px solid #dce5ef;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 6px;
    padding: 7px 10px;
    display: flex;
    justify-content: space-between;
    font-size: .67rem;
    gap: 12px;
    color: #40576f;
}

/* Status text in a row (green). */
.mini-ui .ui-status {
    color: #466857;
    font-weight: 650;
}

/* Grey bar standing in for a line of text. */
.mini-ui .ui-line {
    height: 8px;
    background: #dbe5f0;
    border-radius: 3px;
    display: inline-block;
    width: 70px;
}

/* Small note under the mock-up. */
.ui-note {
    margin-top: 7px;
    color: #71839a;
    font-size: .65rem;
}

/* --- Project filter buttons ----------------------------------------------- */

/* Row of filter buttons. */
.project-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Pill-shaped filter button. */
.project-filter button {
    background: white;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .79rem;
    padding: 7px 14px;
    border-radius: 50px;
}

/* The active filter (swesstech.js sets aria-pressed). */
.project-filter button[aria-pressed="true"] {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

/* --- Dialogs (Bootstrap modal) -------------------------------------------- */

/* Dialog title size. */
.modal-title {
    font-size: 1.5rem;
}

/* Rounder dialog corners. */
.modal-content {
    border-radius: 14px;
}

/* Muted dialog text. */
.modal-body p {
    color: var(--muted);
}

/* --- Service lists -------------------------------------------------------- */

/* Small numbered label for a service. */
.service-number {
    color: var(--accent);
    font-size: .72rem;
    letter-spacing: .12em;
    font-weight: 700;
}

/* List without bullets; items stacked with a small gap. */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: .88rem;
}

/* List item: icon beside its text. */
.service-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Smaller icon, nudged down to line up with the first line of text. */
.service-list .icon {
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

/* ==========================================================================
   6. Contact buttons
   The two call-to-action buttons marked .contact-button.
   ========================================================================== */

/* Arrow icon inside the contact buttons ("Discuss your project", "Begin a conversation"). */
.contact-button .icon {
    margin-left: 12px;
    width: 19px;
    height: 19px;
}

/* ==========================================================================
   7. Responsive: tablets and smaller (below 992px)
   Below Bootstrap's lg breakpoint the menu collapses into the menu button.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* Less padding around sections. */
    .section-space {
        padding: 70px 0;
    }

    /* Breathing room around the opened menu. */
    .navbar-collapse {
        padding: 20px 0 8px;
    }

    /* Tighter spacing between the stacked menu links. */
    .navbar-nav {
        gap: 4px;
    }

    /* Space above the "Let's talk" button in the opened menu. */
    .navbar-nav .btn {
        margin-top: 10px;
    }

    /* Slightly shorter top bar. */
    .site-nav {
        min-height: 78px;
    }

    /* Hero padding. Not used on this page. */
    .hero-pad {
        padding: 65px 0;
    }

    /* Less space under section intros. */
    .section-intro {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   8. Responsive: phones (below 576px)
   Below Bootstrap's sm breakpoint.
   ========================================================================== */

@media (max-width: 575.98px) {

    /* Wider side padding than Bootstrap's default (12px). */
    .container {
        padding-left: 22px;
        padding-right: 22px;
    }

    /* Even less padding around sections. */
    .section-space {
        padding: 58px 0;
    }

    /* Slightly smaller buttons. */
    .btn {
        padding: .74rem 1.1rem;
    }

    /* Stack the footer text above the email link. */
    .site-footer .footer-flex {
        gap: 12px;
        align-items: flex-start !important;
        flex-direction: column;
    }

    /* Smaller intro text. */
    .lead-copy {
        font-size: 1.03rem;
    }

    /* Less card padding. Not used on this page. */
    .project-card .project-copy {
        padding: 22px;
    }

    /* Smaller statistic figure. Not used on this page. */
    .metric {
        font-size: 2.15rem;
    }

    /* Hide the "Concept 2 / Download HTML" part of the review banner. */
    .review-strip .review-details {
        display: none;
    }
}

/* ==========================================================================
   9. Reduced motion
   For visitors whose device is set to reduce motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    /* Jump to in-page links instead of smooth-scrolling. */
    html {
        scroll-behavior: auto;
    }

    /* Switch off all animations and transitions. */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   10. Print
   Cleaner printed pages.
   ========================================================================== */

@media print {

    /* Leave out things that are no use on paper: navigation, review
       banner, filter and contact buttons, and anything marked .no-print. */
    .site-nav,
    .review-strip,
    .project-filter,
    .contact-button,
    .no-print {
        display: none !important;
    }

    /* Tighter section spacing. */
    .section-space {
        padding: 28px 0;
    }

    /* Black text on white. */
    body {
        background: #fff !important;
        color: #000 !important;
    }

    /* Keep each card on one page. Not used on this page. */
    .project-card {
        break-inside: avoid;
    }
}

/* ==========================================================================
   11. Concept 2 page sections
   Styles for this page's design (concept 2), in the same order as
   the sections in index.html. Most class names start with c2-.
   ========================================================================== */

/* --- Theme ---------------------------------------------------------------- */

/* Concept 2 uses anchor blue as its accent color (the <body> tag has class="concept-2"). */
.concept-2 {
    --accent: var(--anchor);
}

/* --- Hero (top banner) ---------------------------------------------------- */

/* Dark navy banner at the top of the page. */
.c2-hero {
    background: #0d2b4b;
    color: white;
    position: relative;
    overflow: hidden;
    padding: 90px 0 0;
}

/* Faint 70px grid lines drawn behind the hero content. */
.c2-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#a9c0da09 1px, transparent 1px), linear-gradient(90deg, #a9c0da09 1px, transparent 1px);
    background-size: 70px 70px;
    pointer-events: none;
}

/* Keeps the hero content above the grid lines. */
.c2-hero .container {
    position: relative;
}

/* Hero headline: white, extra large, slightly lighter weight. */
.c2-hero h1 {
    color: white;
    max-width: 700px;
    font-size: clamp(3rem, 6.3vw, 5.9rem);
    font-weight: 650;
}

/* Second line of the headline in a softer blue. */
.c2-hero h1 span {
    color: #9bb0cb;
}

/* Label color for the dark background. */
.c2-hero .eyebrow {
    color: #a9bdd7;
}

/* Intro text color for the dark background. */
.c2-hero .lead-copy {
    color: #c0cede;
    max-width: 600px;
}

/* Light blue primary button so it stands out on navy. */
.c2-hero .btn-primary {
    background: #a8bdd7;
    color: #102e50;
    border-color: #a8bdd7;
}

/* Arrow link color for the dark background. */
.c2-hero .arrow-link {
    color: #d1deed;
}

/* Row of three highlights along the bottom of the hero, under a thin divider. */
.c2-rail {
    padding: 27px 0;
    border-top: 1px solid #91abc530;
    margin-top: 60px;
    display: flex;
    gap: 46px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: #a8bed5;
}

/* Highlight title, on its own line above the description. */
.c2-rail strong {
    color: #fff;
    font-size: 1.02rem;
    display: block;
    margin-bottom: 2px;
}

/* --- Hero illustration card ----------------------------------------------- */

/* Illustration card beside the headline ("Design the flow"). */
.process-art {
    position: relative;
    background: #123455;
    border: 1px solid #9bb4d035;
    border-radius: 14px;
    padding: 26px;
    max-width: 480px;
    margin-left: auto;
}

/* Card header: "Design the flow" on the left, "Build for reuse" on the right. */
.art-head {
    color: #c5d5e5;
    font-size: .69rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* Smaller right-hand header text. */
.art-head span:last-child {
    font-size: .6rem;
    letter-spacing: 0;
    color: #adc0d7;
}

/* Illustration tile. Not used on this page. */
.source-tile {
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid #9ab3cf3a;
    border-radius: 7px;
    background: #183d63;
    margin-bottom: 9px;
    color: #c9d9eb;
    font-size: .78rem;
}

/* Not used on this page. */
.source-tile span:last-child {
    color: #7f9eba;
}

/* Connector-line graphic. Not used on this page. */
.flow-lines {
    height: 76px;
    display: block;
    width: 100%;
    color: #6d86a5;
}

/* "One strong foundation" box near the bottom of the card. */
.process-core {
    padding: 20px;
    border: 1px solid #9bb3cd70;
    border-radius: 10px;
    background: #224c74;
    text-align: center;
    color: #edf4fb;
}

/* Box title. */
.process-core strong {
    display: block;
    font-size: .95rem;
}

/* Box subtitle (the second .process-core span rule further down adds to this). */
.process-core span {
    color: #aac2da;
    font-size: .71rem;
}

/* Illustration output bar. Not used on this page. */
.output-art {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    margin-top: 24px;
    background: #e9f0f7;
    border-radius: 7px;
    color: var(--navy);
    font-size: .79rem;
}

/* Not used on this page. */
.output-art .icon {
    width: 19px;
}

/* --- Solutions section (#solutions) --------------------------------------- */

/* Left-hand intro that stays in view (sticky) while the list of services scrolls past. */
.c2-services-intro {
    padding-right: 45px;
    position: sticky;
    top: 118px;
}

/* One service: icon column and text column, with a line above. */
.c2-service-row {
    padding: 30px 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 19px;
}

/* Closing line under the last service. */
.c2-service-row:last-child {
    border-bottom: 1px solid var(--line);
}

/* Service icon, nudged down to line up with the label. Its color is drawn into the file. */
.c2-service-row .icon {
    margin-top: 5px;
}

/* Service description. */
.c2-service-row p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 0;
    max-width: 560px;
}

/* Service title. */
.c2-service-row h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

/* --- Design principles section (#principles) ------------------------------ */

/* Section background: a pale blue-grey band between top and bottom borders. */
.c2-dark-work {
    background: #f0f4f8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* One principle: a white rounded card. */
.c2-work-row {
    background: white;
    border: 1px solid #dce5ee;
    border-radius: 10px;
    padding: 28px 30px;
    margin-bottom: 15px;
}

/* Principle name in the card's left column (e.g. "Common structure"). */
.c2-work-row .result {
    font-weight: 700;
    color: var(--anchor);
    font-size: 1rem;
}

/* Small step label under the name (e.g. "01 / NORMALIZE"). */
.c2-work-row .result span {
    font-size: .67rem;
    letter-spacing: .07em;
    display: block;
    margin-top: 5px;
    color: #72869c;
    font-weight: 500;
}

/* Principle heading. */
.c2-work-row h3 {
    font-size: 1.3rem;
}

/* Principle description. */
.c2-work-row p {
    color: var(--muted);
    font-size: .89rem;
    margin-bottom: 0;
}

/* --- Approach section (#approach) ----------------------------------------- */

/* Steps column. counter-reset: none is already the default, so this
   rule has no visible effect (the step numbers are typed in the HTML). */
.c2-steps {
    counter-reset: none;
}

/* One step: a vertical line down the left side with the text indented beside it. */
.c2-step {
    position: relative;
    padding: 0 0 31px 63px;
    border-left: 1px solid var(--line);
    margin-left: 19px;
}

/* No line and no bottom padding after the last step. */
.c2-step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

/* Numbered circle centered on the vertical line. */
.c2-step-number {
    position: absolute;
    left: -20px;
    top: 0;
    width: 40px;
    height: 40px;
    border: 1px solid #bbcada;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: white;
    color: var(--anchor);
    font-size: .77rem;
}

/* Step description. */
.c2-step p {
    color: var(--muted);
    max-width: 630px;
    font-size: .95rem;
}

/* Step title. */
.c2-step h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
}

/* --- Founder section (#founder) ------------------------------------------- */

/* Card with the monogram, name, role and skill tags. */
.c2-founder-card {
    background: #eaf0f6;
    padding: 46px;
    border-radius: 12px;
    border: 1px solid var(--line);
}

/* Founder's name: smaller than a normal section heading.
   (Moved here from an inline style attribute on the <h2>.) */
.c2-founder-name {
    font-size: 2.2rem;
}

/* Skill tags: white pills spaced apart. */
.c2-founder-card .tag {
    margin: 3px 5px 3px 0;
    background: #fff;
}

/* Bio column, spaced away from the card. */
.c2-founder-bio {
    padding-left: 36px;
}

/* --- Contact section (#contact) ------------------------------------------- */

/* Dark navy call-to-action band. */
.c2-contact {
    background: #0d2b4b;
    color: #fff;
    padding: 90px 0;
}

/* Large white heading that scales with the window. */
.c2-contact h2 {
    color: white;
    font-size: clamp(2.4rem, 4.8vw, 4.5rem);
    max-width: 770px;
}

/* Paragraph color for the dark background. */
.c2-contact p {
    color: #b5c8dc;
}

/* Label color for the dark background. */
.c2-contact .eyebrow {
    color: #98b0ce;
}

/* Light blue "Begin a conversation" button. */
.c2-contact .btn-light {
    background: #b1c3d9;
    border-color: #b1c3d9;
    color: #10345e;
}

/* Email address link color and size. */
.c2-contact .contact-address {
    color: #cfdeed;
    font-size: 1.05rem;
}

/* Right-hand column, set off by a thin divider on its left. */
.c2-contact .contact-side {
    border-left: 1px solid #91abc537;
    padding-left: 36px;
}

/* --- Hero illustration: the numbered design steps inside the card --------- */

/* Numbered list of the three design steps, without bullets. */
.design-flow {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

/* Step row: number circle beside the text. */
.design-flow li {
    display: flex;
    gap: 13px;
    position: relative;
    padding: 15px 0;
    color: #edf4fb;
}

/* Divider line between steps. */
.design-flow li+li {
    border-top: 1px solid #9ab3cf3a;
}

/* Numbered circle (01, 02, 03). */
.flow-number {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border: 1px solid #8faac769;
    border-radius: 50%;
    font-size: .68rem;
    color: #aac2da;
}

/* Step title. */
.design-flow strong {
    font-size: .95rem;
    line-height: 1.35;
    display: block;
}

/* Step description. */
.design-flow p {
    font-size: .78rem;
    line-height: 1.55;
    color: #b9cde1;
    margin: 6px 0 0;
}

/* Note at the bottom of the card. */
.flow-reuse-note {
    font-size: .74rem;
    line-height: 1.6;
    color: #b9cde1;
    margin: 16px 0 0;
}

/* Adds to the earlier .process-core span rule: puts the subtitle on its own line. */
.process-core span {
    display: block;
    margin-top: 6px;
}

/* Adds to the earlier .art-head rule: lets the two header labels wrap on narrow cards. */
.art-head {
    gap: 12px;
    flex-wrap: wrap;
}

/* ==========================================================================
   12. Concept 2: tablets and smaller (below 992px)
   ========================================================================== */

@media (max-width: 991.98px) {

    /* Less space above the hero. */
    .c2-hero {
        padding-top: 62px;
    }

    /* Illustration card spans the full width under the headline. */
    .process-art {
        max-width: none;
        margin: 10px 0 0;
    }

    /* Solutions intro stops being sticky and sits above the list. */
    .c2-services-intro {
        position: static;
        padding: 0;
    }

    /* Bio sits under the founder card without the extra indent. */
    .c2-founder-bio {
        padding: 0;
    }

    /* Drop the divider once the contact columns stack. */
    .c2-contact .contact-side {
        border-left: 0;
        padding-left: 0;
    }

    /* Less padding in the contact band. */
    .c2-contact {
        padding: 65px 0;
    }

    /* Tighter spacing in the hero highlights. */
    .c2-rail {
        gap: 30px;
        margin-top: 40px;
    }

    /* Less padding in each service row. */
    .c2-service-row {
        padding: 25px 0;
    }
}

/* ==========================================================================
   13. Concept 2: phones (below 576px)
   ========================================================================== */

@media (max-width: 575.98px) {

    /* Less padding in the illustration card. */
    .process-art {
        padding: 21px;
    }

    /* Less padding in the founder card. */
    .c2-founder-card {
        padding: 28px;
    }

    /* Step text indented less. */
    .c2-step {
        padding-left: 40px;
    }

    /* Less padding in the principle cards. */
    .c2-work-row {
        padding: 23px;
    }

    /* Even tighter spacing in the hero highlights. */
    .c2-rail {
        gap: 23px;
    }

    /* Hero headline at a fixed 3.25rem with slightly tighter letter spacing. */
    .c2-hero h1 {
        font-size: 3.25rem;
        letter-spacing: -.055em;
    }

    /* Even less padding in the contact band. */
    .c2-contact {
        padding: 55px 0;
    }
}