/* Limina Labs – Founding Offer CTA & case study content headings */
.founding-offer-cta {
    padding: 4rem 3rem;
    background-color: #F5EFEC;
    text-align: center;
    position: relative;
}

.founding-offer-content {
    max-width: 600px;
    margin: 0 auto;
}

/* Scroll-up wrapper: position set via inline style so it always stays bottom-right */

/* Scroll-up: match hero scroll-down exactly (black arrow, same circle) */
.founding-offer-cta .scroll-up,
.scroll-up {
    position: static;
    display: inline-block;
    text-decoration: none;
    color: #000000;
}
.founding-offer-cta .scroll-up:link,
.founding-offer-cta .scroll-up:visited,
.founding-offer-cta .scroll-up:hover,
.scroll-up:link,
.scroll-up:visited,
.scroll-up:hover {
    color: #000000;
}

/* Same circle as scroll-down; up-arrow hovers upward */
.scroll-up .scroll-circle {
    background-color: transparent;
    border: 1px solid #000000;
}
.scroll-up .scroll-circle:hover {
    transform: translateY(-5px);
    background-color: #F5EFEC;
}

.founding-offer-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 2rem;
    color: #000000;
    margin-bottom: 0.5rem;
}

.founding-offer-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.1rem;
    color: #000000;
    margin-bottom: 1.5rem;
}

.founding-offer-btn {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: #000000;
    text-decoration: none;
    padding: 0.6rem 1.5rem;
    border: 1px solid #000000;
    border-radius: 50px;
    background: transparent;
    transition: all 0.2s;
}

.founding-offer-btn:hover {
    background: #000000;
    color: #FFFFFF;
}

/* Shared line above primary “Start a project” CTAs */
.cta-scoping-note {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin: 0 0 1.25rem;
    max-width: 36rem;
}

.cta-scoping-note--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.start-project-content .start-project-title {
    margin-bottom: 0.75rem;
}

.start-project-content .start-project-scoping-note {
    margin-bottom: 2rem;
    max-width: none;
}

.approach-text-section .cta-scoping-note,
.contact-text-section .cta-scoping-note {
    font-size: 1.25rem;
    line-height: 1.8;
    margin: 0;
    max-width: none;
}

/* Case study content headings – Inter medium */
.content-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    margin-top: 2rem;
}

.content-heading:first-of-type {
    margin-top: 0;
}

/* Case study page title – Georgia Pro Condensed only (not Inter, not bold) */
.case-title-semibold,
.case-study-hero .case-title-semibold,
.case-study-hero h1.case-title-semibold {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
}

.content-list {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin: 1rem 0 1rem 1.5rem;
    padding-left: 0.5rem;
}

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

/* Start a Project page: slightly more air before the form on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .start-project-page .start-project-content .start-project-scoping-note {
        margin-bottom: 2.75rem;
    }
}

/* Rooted portal: admin-only notes column (right rail in two-column steps) */
.client-portal-page .project-column.portal-admin-notes {
    align-self: start;
}

.client-portal-page .portal-admin-notes-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 200px;
    resize: vertical;
}

/* Hide empty feedback rail until branding assets unlock the review gate (see portal.js) */
.client-portal-page .project-column--branding-feedback {
    display: none;
}

.client-portal-page .portal-message-from-limina {
    border-left: 3px solid rgba(107, 101, 96, 0.35);
    padding-left: 1rem;
}

.client-portal-page .portal-message-to-limina .feedback-box {
    margin-top: 0;
}

.client-portal-page .portal-feedback-section-title {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
    color: #000000;
}

@media (max-width: 520px) {
    .client-portal-page .decision-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .client-portal-page .decision-actions > .portal-btn {
        width: 100%;
        justify-content: center;
    }

    .client-portal-page .feedback-actions {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }

    .client-portal-page .feedback-actions > .portal-btn {
        width: 100%;
        justify-content: center;
    }
}

.client-portal-page .portal-shared-notes-body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #3d3835;
    white-space: pre-wrap;
}

.client-portal-page .portal-shared-notes-body.portal-shared-notes-placeholder {
    font-style: italic;
    font-weight: 200;
    color: #91887f;
}

/* Step 1 branding: one full-width column — visuals → notes from Limina → client feedback */
.client-portal-page .project-grid--branding-fullwidth {
    grid-template-columns: 1fr;
    width: 100%;
}

/* Step 1: emphasize board + logo; keep reference thumbnails compact */
.client-portal-page #step-branding .brandkit-grid.single-focus {
    grid-template-columns: 1.45fr 0.95fr;
    gap: 1.15rem;
    align-items: start;
}

.client-portal-page #step-branding .brandkit-section {
    padding: 0.85rem 1rem;
}

.client-portal-page #step-branding .brandkit-section img[data-branding-image],
.client-portal-page #step-branding .brandkit-section img[data-logo-image] {
    width: 100%;
    display: block;
}

.client-portal-page #step-branding .brandkit-section:first-of-type img[data-branding-image] {
    min-height: 260px;
    max-height: min(56vh, 560px);
    object-fit: contain;
}

.client-portal-page #step-branding .brandkit-section:nth-of-type(2) img[data-logo-image] {
    max-height: min(30vh, 260px);
    object-fit: contain;
}

.client-portal-page .brandkit-extras {
    margin-top: 1.35rem !important;
}

.client-portal-page .brandkit-extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.55rem 0.65rem;
    margin-top: 0.65rem;
}

.client-portal-page .brandkit-extra-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
    padding: 0.35rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 253, 250, 0.85);
}

.client-portal-page .brandkit-extra-cell img {
    max-height: 100px !important;
    width: 100% !important;
    object-fit: contain;
    border-radius: 6px;
}

.client-portal-page .brandkit-extra-cell .asset-link-wrap {
    margin-top: 0 !important;
}

/* Multiple logos: equal visual weight, side-by-side when two */
.client-portal-page #step-branding .brandkit-logo-grid--equal {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem 0.85rem;
    align-items: stretch;
}

.client-portal-page #step-branding .brandkit-logo-grid--equal.brandkit-logo-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-portal-page #step-branding .brandkit-logo-grid--equal .brandkit-extra-cell img {
    max-height: min(38vh, 300px) !important;
    min-height: 120px;
    width: 100% !important;
    object-fit: contain;
}

.client-portal-page .brandkit-extra-cell .upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 0.67rem;
    padding: 0.28rem 0.42rem;
    min-height: 34px;
    width: 100%;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    text-transform: none;
    letter-spacing: 0;
}

.upload-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.upload-row--stack .feedback-label {
    margin-bottom: 0.15rem;
}

/* File inputs in stacked branding rows: full width (Crafted used nested flex rows that broke multi-select on some browsers). */
.upload-row--stack > .portal-input[type="file"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Image preview: modest panel — whole image visible without claiming the viewport */
.asset-preview-viewport {
    max-height: min(52vh, 520px);
    min-height: 0;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
}

.asset-preview-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(46vh, 460px);
    object-fit: contain;
    flex-shrink: 0;
}

.asset-preview-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.55rem;
    margin-bottom: 0.25rem;
}

.asset-preview-nav.is-hidden {
    display: none;
}

.asset-preview-nav-btn {
    min-width: 2.5rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    font-size: 1.1rem;
    line-height: 1;
}

.asset-preview-counter {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.55);
    min-width: 3rem;
    text-align: center;
}

/* Responsive toolbar; reset client portal link word-breaking on controls */
#asset-preview-modal .portal-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    width: 100%;
    box-sizing: border-box;
}

#asset-preview-modal .portal-modal-actions > .portal-btn,
#asset-preview-modal .portal-modal-actions > a.portal-btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 8.4rem;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.03em;
    font-size: 0.76rem;
    padding: 0.5rem 0.7rem;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.15;
}

@media (max-width: 560px) {
    #asset-preview-modal .portal-modal-actions > .portal-btn,
    #asset-preview-modal .portal-modal-actions > a.portal-btn {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

#asset-preview-modal.portal-modal {
    width: min(96vw, 560px);
    max-height: min(92vh, 880px);
    overflow-y: auto;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* Client portals — branding step: phones / narrow tablets (Crafted + Rooted) */
/* Fixes two-column board/logo squeeze and cramped multi-logo / extras grids. */
/* -------------------------------------------------------------------------- */

.client-portal-page #step-branding .version-card.branding-block,
.client-portal-page #step-branding .brandkit-section {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.client-portal-page #step-branding .brandkit-section img {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .client-portal-page #step-branding .brandkit-grid.single-focus {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        align-items: stretch;
    }

    .client-portal-page #step-branding .brandkit-section {
        padding: 0.65rem 0.75rem;
    }

    .client-portal-page #step-branding .brandkit-section:first-of-type img[data-branding-image] {
        min-height: 0;
        max-height: min(52vh, 480px);
    }

    .client-portal-page #step-branding .brandkit-section:nth-of-type(2) img[data-logo-image] {
        max-height: min(40vh, 260px);
    }
}

@supports (height: 100svh) {
    @media (max-width: 900px) {
        .client-portal-page #step-branding .brandkit-section:first-of-type img[data-branding-image] {
            max-height: min(52svh, 480px);
        }

        .client-portal-page #step-branding .brandkit-section:nth-of-type(2) img[data-logo-image] {
            max-height: min(40svh, 260px);
        }
    }

    @media (max-width: 640px) {
        .client-portal-page #step-branding .brandkit-logo-grid--equal .brandkit-extra-cell img {
            max-height: min(44svh, 300px) !important;
        }
    }

    @media (max-width: 480px) {
        .asset-preview-viewport {
            max-height: min(58svh, 560px);
        }

        .asset-preview-image {
            max-height: min(50svh, 420px);
        }
    }
}

@media (max-width: 640px) {
    .client-portal-page #step-branding .brandkit-logo-grid--equal,
    .client-portal-page #step-branding .brandkit-logo-grid--equal.brandkit-logo-grid--pair {
        grid-template-columns: 1fr !important;
        gap: 0.65rem 0.7rem;
    }

    .client-portal-page #step-branding .brandkit-logo-grid--equal .brandkit-extra-cell img {
        min-height: 0;
        max-height: min(44vh, 300px) !important;
    }

    .client-portal-page .brandkit-extras-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem 0.5rem;
    }

    .client-portal-page .brandkit-extra-cell .upload-btn {
        white-space: normal;
        font-size: 0.62rem;
        padding: 0.26rem 0.38rem;
        min-height: 32px;
        line-height: 1.2;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .client-portal-page .brandkit-extras-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .client-portal-page #step-branding .decision-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .client-portal-page #step-branding .decision-actions .portal-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .asset-preview-viewport {
        max-height: min(58vh, 560px);
        padding: 0.35rem;
    }

    .asset-preview-image {
        max-height: min(50vh, 420px);
    }
}

.client-portal-page .feedback-visibility-pill {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.48);
    margin-right: 0.28rem;
    vertical-align: middle;
    font-weight: 500;
}

.client-portal-page .feedback-visibility-row .feedback-visibility-select {
    border-radius: 8px;
}

/* Confirms the browser loaded the expected portal.js (Safari cache issues). */
.portal-mode-bar .portal-bundle-stamp {
    flex-basis: 100%;
    text-align: right;
    margin-top: -0.15rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(116, 106, 99, 0.75);
    user-select: text;
}

/* Fern Website case study — slow, quiet pacing */
.fern-website-cs .case-study-content--quiet {
    padding-top: 5.5rem;
    padding-bottom: 8.5rem;
}

.fern-website-cs .case-study-content--quiet .content-section {
    margin-bottom: 6.75rem;
}

.fern-website-cs .case-study-content--quiet .content-section--intro {
    max-width: 42rem;
}

.fern-website-cs .case-study-content--quiet .fern-cs-stagger--last {
    margin-bottom: 0;
}

.fern-website-cs .content-text--spaced {
    margin-top: 1.75rem;
}

.fern-website-cs .case-study-hero-content {
    gap: 4.5rem;
}

.fern-website-cs .case-study-hero-details .case-tags {
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
}

.fern-website-cs .fern-cs-figure--hero {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.fern-website-cs .fern-cs-figure--hero img {
    display: block;
    width: 100%;
    max-height: min(58vh, 600px);
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

.fern-website-cs .case-study-content--quiet .layout-text-image,
.fern-website-cs .case-study-content--quiet .layout-image-text {
    gap: 4rem 5rem;
    align-items: center;
}

.fern-website-cs .fern-cs-figure {
    max-width: 27rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.fern-website-cs .layout-text-image .fern-cs-figure {
    margin-right: 0;
    margin-left: 2.25rem;
}

.fern-website-cs .layout-image-text .fern-cs-figure {
    margin-left: 0;
    margin-right: 2.25rem;
}

.fern-website-cs .fern-cs-figure img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.fern-website-cs .case-study-content--quiet .content-text-wrapper {
    max-width: 36rem;
}

.fern-website-cs .case-study-content--quiet .content-list {
    font-size: 1.15rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.fern-website-cs .case-study-content--quiet .content-list + .content-text--spaced {
    margin-top: 2.25rem;
}

@media (max-width: 1024px) {
    .fern-website-cs .case-study-content--quiet .layout-text-image,
    .fern-website-cs .case-study-content--quiet .layout-image-text {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .fern-website-cs .fern-cs-figure,
    .fern-website-cs .layout-text-image .fern-cs-figure,
    .fern-website-cs .layout-image-text .fern-cs-figure {
        max-width: min(24rem, 90vw);
        margin-left: auto;
        margin-right: auto;
    }

    .fern-website-cs .layout-image-text.fern-cs-stagger--flip .fern-cs-figure {
        order: -1;
    }
}

@media (max-width: 768px) {
    .fern-website-cs .case-study-content--quiet .content-section {
        margin-bottom: 4.5rem;
    }
}

/* TEST: hero background image — fills entire viewport including behind header */
.index-page .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: transparent;
}

.index-page .hero {
    min-height: 100vh;
    padding-top: 7rem;
    position: relative;
}

.index-page .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("portfolioimages/heroimg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    z-index: 0;
    pointer-events: none;
}

.index-page .hero-content {
    position: relative;
    z-index: 2;
}

.index-page .hero .hero-graphic,
.index-page .hero .scroll-down {
    z-index: 2;
}

/* Realign squiggle + scroll arrow with the hero statement (compensating for padding-top: 7rem) */
.index-page .hero .hero-graphic {
    top: calc(50% + 1.25rem);
    transform: translateY(-50%);
}

.index-page .hero .scroll-down {
    top: auto;
    bottom: 4rem;
}

/* START A PROJECT button — solid white fill (hero only) */
.index-page .hero .lets-talk-btn.hero-cta {
    background: #FFFFFF;
}

.index-page .hero .lets-talk-btn.hero-cta:hover {
    background: #FFFFFF;
}

/* ============================================================
   DIGITAL ARCHITECTURE — stonecard.png material samples.
   Each card is a single object: a portrait stone with text
   typeset onto its central area. The asset has a painted
   white margin (RGB, no alpha), so it melts into the section's
   #FFFFFF background — no card outline needed.
   ============================================================ */

.digital-architecture {
    /* Left stays at 6rem to align with the hero headline. */
    position: relative;
    padding: 5rem 4rem 6.5rem 6rem;
    background-color: #FFFFFF;
    overflow: visible;
}

.digital-architecture-intro {
    max-width: 60rem;
    margin: 0 0 3.25rem;
    text-align: left;
    padding-left: 0;
}

.digital-architecture-title {
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.digital-architecture-title-1,
.digital-architecture-title-2 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    color: #1a1a1a;
}

.digital-architecture-title-2 {
    font-style: italic;
    color: #746A63;
}

.digital-architecture-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.98rem;
    color: #4a4640;
    margin: 0;
    letter-spacing: 0.005em;
}

/* ============================================================
   Service Index — editorial four-column spread.
   No cards, no objects, no stagger. A single hairline rule
   threads across all four columns; content packs from the top.
   Reads as a monograph / exhibition-catalog index, not as a
   service grid.
   ============================================================ */
.service-index {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.5rem;
    align-items: start;
    max-width: calc(100vw - 10rem);
    margin: 0;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(20, 17, 14, 0.16);
}

.service-entry {
    display: flex;
    flex-direction: column;
}

.service-numeral {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(20, 17, 14, 0.45);
    margin: 0 0 1.75rem;
}

.service-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 400 !important;
    font-size: clamp(26px, 2vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.018em;
    color: #14110e;
    margin: 0 0 1.35rem;
}

.service-description {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.6;
    color: #3a342e;
    margin: 0 0 2.25rem;
    max-width: 32ch;
}

.service-list {
    list-style: none;
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(20, 17, 14, 0.1);
}

.service-list li {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(12px, 0.82vw, 14px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(20, 17, 14, 0.65);
    line-height: 2;
}

/* Scroll-in: gentle column fade. No translate, no scale. */
.digital-architecture.animate-on-scroll .service-entry {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.digital-architecture.animate-on-scroll.in-view .service-entry {
    opacity: 1;
}

.digital-architecture.animate-on-scroll .service-entry:nth-child(1) { transition-delay: 0s; }
.digital-architecture.animate-on-scroll .service-entry:nth-child(2) { transition-delay: 0.08s; }
.digital-architecture.animate-on-scroll .service-entry:nth-child(3) { transition-delay: 0.16s; }
.digital-architecture.animate-on-scroll .service-entry:nth-child(4) { transition-delay: 0.24s; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .digital-architecture {
        padding: 4rem 3rem 5rem;
    }
    .service-index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem 3rem;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .digital-architecture {
        background-color: #FFFFFF;
        padding: 2.5rem var(--mobile-left-padding, 1.5rem) 3.5rem;
    }
    .digital-architecture-intro {
        margin-bottom: 2rem;
    }
    .digital-architecture-title {
        font-size: 2rem;
    }
    .service-index {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 1.75rem;
    }
    /* Each entry past the first gets a hairline above it, so the column
       reads as a single editorial index running down the page. */
    .service-entry + .service-entry {
        border-top: 1px solid rgba(20, 17, 14, 0.12);
        padding-top: 2.25rem;
        margin-top: 2.25rem;
    }
    .service-numeral {
        margin-bottom: 1rem;
    }
    .service-title {
        font-size: 28px;
        margin-bottom: 1rem;
    }
    .service-description {
        margin-bottom: 1.5rem;
        max-width: none;
    }

    /* ----- Hero squiggle: environmental light behind the text layer.
       Centered vertically on the hero so it sits behind the description
       paragraphs (below the headline, above the CTA). Lower opacity so
       it reads as atmosphere, not as an object. ----- */
    .index-page .hero .hero-graphic {
        display: block !important;
        top: 50%;
        bottom: auto;
        left: auto;
        right: 5%;
        width: 75%;
        max-width: 420px;
        transform: translateY(-50%);
        opacity: 0.22;
        z-index: 0;
        pointer-events: none;
    }
    .index-page .hero .hero-graphic img {
        min-height: 0;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .digital-architecture.animate-on-scroll .service-entry {
        transition: none;
    }
}