/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Email chooser modal */
.email-choice-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 9998;
}

.email-choice-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    width: min(92vw, 460px);
    background: #FEFEFE;
    border: 1px solid #000000;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
}

.email-choice-backdrop.is-open,
.email-choice-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.email-choice-modal.is-open {
    transform: translate(-50%, -50%);
}

.email-choice-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #746A63;
    margin-bottom: 0.5rem;
}

.email-choice-address {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.5rem;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 0.55rem;
}

.email-choice-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    color: #000000;
    margin-bottom: 1rem;
}

.email-choice-actions {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.email-choice-btn {
    border: 1px solid #000000;
    background: transparent;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    border-radius: 999px;
    padding: 0.6rem 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.email-choice-btn-primary {
    background: #000000;
    color: #FFFFFF;
}

.email-choice-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.email-choice-btn-primary:hover {
    background: #1E1E1E;
}

.email-choice-close {
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: #746A63;
    cursor: pointer;
    padding: 0;
}

.email-choice-close:hover {
    color: #000000;
}

@media (max-width: 640px) {
    .email-choice-modal {
        padding: 1.2rem;
        border-radius: 14px;
    }

    .email-choice-address {
        font-size: 1.25rem;
    }

    .email-choice-actions {
        flex-direction: column;
    }
}

img {
    display: block !important;
    max-width: 100%;
    height: auto;
    visibility: visible !important;
    opacity: 1 !important;
}

html {
    scroll-behavior: smooth;
}

:root {
    /* Mobile spacing system */
    --mobile-left-padding: 24px;
    --mobile-heading-margin-bottom: 8px;
    --mobile-paragraph-margin-bottom: 16px;
    --mobile-cta-to-heading-spacing: 24px;
    --mobile-nav-to-cta-spacing: 12px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
    color: #000000;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Prevent scroll jump on page load */
html:not(:target) {
    scroll-padding-top: 0;
}

/* Typography - Georgia Pro */
/* Using georgiapro from Adobe Fonts - Typekit link: https://use.typekit.net/ult4xsi.css */
/* Font-weight 300 = Light */

/* Header */
/* Desktop Header (default - min-width: 769px) */
.header {
    padding: 2rem 3rem;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    min-height: 4rem;
}

.logo {
    text-decoration: none;
    color: #000000;
    display: flex;
    align-items: baseline;
    width: fit-content;
    flex-shrink: 0;
}

.logo-sydney {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.6rem;
}

.logo-grignon {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: #746A63;
}

.nav {
    display: flex;
    gap: 2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.5rem;
    color: #000000;
    text-decoration: none;
    transition: font-weight 0.2s;
}

.nav-link:hover,
.nav-link.active {
    font-weight: 300;
}

.header-ctas {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: auto;
}

/* Language switcher: code only, no arrow; feels like nav */
.lang-switcher {
    position: relative;
}
.lang-switcher-trigger {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.5rem;
    color: #000000;
    letter-spacing: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
    transition: font-weight 0.2s ease, opacity 0.2s ease, text-decoration-color 0.2s ease;
}
.lang-switcher-trigger:hover {
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 0, 0, 0.3);
}
.lang-switcher-trigger:active {
    opacity: 0.85;
}
.lang-switcher-trigger[aria-expanded="true"] {
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 0, 0, 0.25);
}
.lang-switcher-caret {
    display: none;
}
.lang-switcher-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 10rem;
    background: #FEFEFE;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.5rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    z-index: 100;
}
.lang-switcher.open .lang-switcher-dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.lang-switcher-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.lang-switcher-dropdown button:hover,
.lang-switcher-dropdown button:focus {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

/* On desktop, accepting-clients is positioned below logo, above arrow */
.accepting-clients {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
    border: 1px solid #000000;
    border-radius: 50px;
    background: #FFFFFF;
    width: fit-content;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.85rem;
    color: #000000;
    white-space: nowrap;
    position: absolute;
    left: 3rem;
    top: calc(100% + 1rem);
    margin-top: 0;
    height: fit-content;
}

/* Start a Project CTA — minimal, architectural (Apple / Linear / Vercel feel) */
.lets-talk-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: #2a2a2a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 26px;
    border: 1px solid #6b6560;
    border-radius: 999px;
    background: transparent;
    transition: all 180ms ease;
    white-space: nowrap;
    display: inline-block;
}

.lets-talk-btn:hover {
    background: #F5EFEC;
    border-color: #5a5550;
    color: #2a2a2a;
}

.lets-talk-btn:active {
    background: #746A63;
    border-color: #746A63;
    color: #ffffff;
}

.lets-talk-btn:focus-visible {
    outline: 1px solid #5a5550;
    outline-offset: 2px;
}

.availability-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #90EE90;
    display: inline-block;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    padding: 4rem 3rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 50%;
    margin-left: 3rem;
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hero-line-1,
.hero-line-3 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 4.7rem;
    color: #000000;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.hero-line-2 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 4.7rem;
    color: #746A63;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.hero-description {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin-top: 30px;
    max-width: 95%;
}

.hero-content .lets-talk-btn.hero-cta {
    margin-top: 28px;
}

.hero-graphic {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 60%;
    max-width: 800px;
    display: block !important;
    visibility: visible !important;
    pointer-events: none;
}

.hero-graphic img {
    width: 100%;
    height: auto;
    min-height: 200px;
    object-fit: contain;
    display: block !important;
    visibility: visible !important;
    animation: hero-float 11s ease-in-out infinite;
}

@keyframes hero-float {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.95;
    }
    50% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

.scroll-down {
    position: absolute;
    bottom: 3rem;
    left: auto;
    right: 3rem;
    z-index: 3;
    color: #000000;
    text-decoration: none;
}
.scroll-down:link,
.scroll-down:visited,
.scroll-down:hover {
    color: #000000;
}

.scroll-down .scroll-circle {
    background-color: transparent;
    border: 1px solid #000000;
}

.scroll-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}

.scroll-circle:hover {
    background-color: #F5EFEC;
    transform: translateY(5px);
}

.scroll-circle svg {
    width: 20px;
    height: 20px;
}

/* Marquee Section */
.index-page .marquee-section {
    margin-top: -2rem;
}
.marquee-section {
    background-color: #F5EFEC;
    padding: 2.5rem 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee {
    display: flex;
    width: fit-content;
    animation: scroll 50s linear infinite;
    gap: 4rem;
    will-change: transform;
}

.marquee-content {
    display: flex;
    gap: 3rem;
    flex-shrink: 0;
    align-items: center;
    will-change: transform;
}

.marquee-content span {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 2rem;
    color: #746A63;
    white-space: nowrap;
    letter-spacing: -0.03em;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* What I Build Section */
.what-i-build {
    padding: 2rem 3rem;
    min-height: auto;
    background-color: #FFFCF6;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.title-part-1 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    color: #000000;
    letter-spacing: -0.03em;
}

.title-part-2 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    color: #746A63;
    letter-spacing: -0.03em;
}

.section-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    margin-bottom: 1.5rem;
    margin-top: -1rem;
}

/* Default: 4 columns for desktop */
.build-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Explicitly ensure 4 columns on desktop screens */
@media screen and (min-width: 769px) {
    .what-i-build .build-items {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.build-item {
    background-color: #F5EFEC;
    border-radius: 15px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 200px;
    position: relative;
}

.build-item img {
    width: 50%;
    min-width: 80px;
    height: auto;
    min-height: 80px;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain;
}

.build-item h3 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1rem;
    color: #000000;
    margin-bottom: 0.25rem;
}

.build-item p {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.85rem;
    color: #000000;
    line-height: 1.4;
}

.always-open {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    text-align: right;
    margin-top: 2rem;
}

/* Case Studies Section */
.case-studies {
    padding: 6rem 3rem 12rem 3rem;
    background-color: #FFFFFF;
}

.case-study {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    align-items: start;
}

.case-study:last-child {
    margin-bottom: 0;
}

.case-study-image {
    width: 100%;
}

.case-study-image a {
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}

.case-study-image a:hover {
    opacity: 0.8;
}

.case-study-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.case-study-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.case-number {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    color: #746A63;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.case-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 3rem;
    color: #000000;
    letter-spacing: -0.03em;
}

/* Force case study hero title to Georgia Pro (override any Inter inheritance) */
.case-study-hero .case-title,
.case-study-hero h1.case-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
}

.case-site {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #746A63;
    text-decoration: none;
}

.case-site:hover {
    text-decoration: underline;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.case-tags .tag:empty {
    display: none;
}

.tag {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.85rem;
    color: #000000;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
}

.case-description {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin-top: 1rem;
}

.read-case-study {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    text-decoration: none;
    margin-top: 1rem;
    display: inline-block;
}

.read-case-study:hover {
    text-decoration: underline;
}

/* Case Study Full Page Styles */
.case-study-hero {
    padding: 4rem 3rem;
    background-color: #FFFFFF;
    position: relative;
}

.case-study-hero .back-button {
    margin-bottom: 1rem;
}

.case-study-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.case-study-hero-image {
    width: 100%;
}

.case-study-hero-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.case-study-hero-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.case-study-content {
    padding: 6rem 3rem;
    background-color: #FFFFFF;
    max-width: 1400px;
    margin: 0 auto;
}

.content-section {
    margin-bottom: 5rem;
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.25rem;
    color: #000000;
    line-height: 1.8;
    margin-bottom: 0;
}

.content-text strong {
    font-weight: 300;
}

.content-text-wrapper {
    max-width: 100%;
}

/* Layout Variations */
.layout-text-image {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

.layout-image-text {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.content-images {
    display: grid;
    gap: 2rem;
}

.images-single img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.images-two {
    grid-template-columns: 1fr 1fr;
}

.images-two img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.images-three {
    grid-template-columns: repeat(3, 1fr);
}

.images-three img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.images-full {
    grid-template-columns: 1fr;
}

.images-full img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

/* Footer */
.footer {
    background-color: #FFFCF6;
    padding: 2.5rem 3rem;
    margin-top: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.footer-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 2rem;
}

.footer-title-1 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 2.5rem;
    color: #746A63;
    letter-spacing: -0.03em;
}

.footer-title-2 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 2.5rem;
    color: #000000;
    letter-spacing: -0.03em;
}

/* New footer content (Limina Labs, tagline, availability, CTA) */
.footer-brand {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 2rem;
    color: #000000;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.footer-tagline {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 1.25rem;
    color: #746A63;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.footer-availability {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    color: #000000;
    margin-bottom: 0;
}

.footer-cta {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #000000;
    text-decoration: none;
}

.footer-cta:hover {
    text-decoration: underline;
}

.copyright,
.footer-copyright {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    color: #000000;
}

.made-by-me {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.7rem;
    color: #746A63;
    margin-top: 0.5rem;
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 1.4;
}

.made-by-me-short {
    display: inline-block;
    transition: opacity 0.3s ease 0.1s;
}

.made-by-me-expanded {
    display: inline-block;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.3s ease, max-width 0.4s ease;
    vertical-align: top;
}

.made-by-me:hover .made-by-me-short {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.made-by-me:hover .made-by-me-expanded {
    opacity: 1;
    max-width: 500px;
    transition: opacity 0.3s ease 0.2s, max-width 0.4s ease 0.2s;
}

/* Back Button - positioned at top of content */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    transition: opacity 0.2s;
    margin-bottom: 1rem;
    padding: 0.375rem 0;
    width: fit-content;
}

/* Hide back button on home page */
.index-page .back-button {
    display: none;
}

.back-button:hover {
    opacity: 0.6;
}

.back-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.back-arrow:hover {
    opacity: 0.6;
}

.back-arrow svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* Other Projects Section */
.other-projects-section {
    padding: 4rem 3rem;
    background-color: #FFFFFF;
}

.other-projects-content {
    max-width: 1400px;
    margin: 0 auto;
}

.other-projects-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 2.5rem;
    color: #000000;
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
    text-transform: lowercase;
}

.other-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.other-project-card {
    text-decoration: none;
    color: #000000;
    background-color: #FFFCF6;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.other-project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.other-project-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.other-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.other-project-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.other-project-number {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.8rem;
    color: #746A63;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.other-project-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: normal;
    font-size: 1.5rem;
    color: #000000;
    letter-spacing: -0.03em;
}

/* Work Page Styles */
.work-page {
    padding: 4rem 3rem;
    background-color: #FFFFFF;
    min-height: 100vh;
    position: relative;
}

.work-page .back-button {
    margin-bottom: 1rem;
}

.work-page-content {
    max-width: 1400px;
    margin: 0 auto;
}

.work-page-title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.work-title-selected {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 3.5rem;
    color: #000000;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.work-title-case-studies {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 3.5rem;
    color: #746A63;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.work-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.filter-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    color: #000000;
    background: transparent;
    border: 1px solid #000000;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: lowercase;
}

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

.filter-btn.active {
    font-weight: 300;
    background-color: #000000;
    color: #FFFFFF;
}

.work-projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.work-project {
    background-color: #FFFCF6;
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Work page: projects slide in from sides (like logo assembly) */
.work-project.slide-in-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.work-project.slide-in-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.work-project.slide-in-left.in-view,
.work-project.slide-in-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .work-project.slide-in-left,
    .work-project.slide-in-right {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    .work-project.slide-in-left,
    .work-project.slide-in-right {
        transition: opacity 0.65s ease-out, transform 0.65s ease-out;
    }
}

.work-project-image {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.work-project-image a {
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}

.work-project-image a:hover {
    opacity: 0.8;
}

.work-project-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.work-project-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.work-project-number {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.85rem;
    color: #746A63;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.work-project-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 2.5rem;
    color: #000000;
    letter-spacing: -0.03em;
}

.work-project-site {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    color: #746A63;
    text-decoration: none;
}

.work-project-site:hover {
    text-decoration: underline;
}

.work-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.work-project-tags .work-tag:empty {
    display: none;
}

.work-tag {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.8rem;
    color: #000000;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
}

.work-project-description {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.work-read-case-study {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    text-decoration: none;
    margin-top: 0.5rem;
    display: inline-block;
}

.work-read-case-study:hover {
    text-decoration: underline;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.availability-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
}

.footer-email {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    text-decoration: none;
}

.footer-email:hover {
    text-decoration: underline;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-legal-link {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.82rem;
    color: #746A63;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.footer-legal-link:hover {
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.social-link {
    color: #000000;
    text-decoration: none;
    transition: opacity 0.2s;
}

.social-link:hover {
    opacity: 0.6;
}

.social-link svg {
    width: 24px;
    height: 24px;
}

/* Responsive Design */

@media (max-width: 1024px) {
    .hero-line-1,
    .hero-line-2,
    .hero-line-3 {
        font-size: 3rem;
    }

    .hero-graphic {
        width: 50%;
        right: 0%;
    }

    .case-study {
        grid-template-columns: 1fr;
    }

    .case-study-hero {
        padding: 3rem 2rem;
    }

    .case-study-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .case-study-content {
        padding: 4rem 2rem;
    }

    .layout-text-image,
    .layout-image-text {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .content-images {
        grid-template-columns: 1fr;
    }

    .work-page {
        padding: 2rem 2rem 3rem 2rem;
    }

    .case-study-hero {
        padding: 2rem 2rem 3rem 2rem;
    }

    .work-title-selected,
    .work-title-case-studies {
        font-size: 2.5rem;
    }

    .work-projects {
        grid-template-columns: 1fr;
    }

    .approach-page {
        padding: var(--mobile-cta-to-heading-spacing) var(--mobile-left-padding) 3rem var(--mobile-left-padding);
    }

    .approach-page-content {
        max-width: 100%;
        margin: 0;
        padding-left: 0;
    }

    .approach-page-title {
        margin-bottom: var(--mobile-heading-margin-bottom) !important;
        padding-left: 0;
        margin-left: 0;
    }

    .approach-title-hybrid,
    .approach-title-mindset {
        font-size: 2.5rem;
    }

    /* Force single-column layout - break two-column grid */
    .approach-content {
        display: block !important;
        grid-template-columns: none !important;
        gap: 3rem;
    }

    .approach-text-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        order: 1;
        margin-bottom: 0;
    }

    .approach-left-column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        order: 2;
        margin-top: 0;
    }

    .practical-stack-section {
        margin-top: 0;
        width: 100%;
    }

    .practical-stack-title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .approach-text {
        font-size: 1rem;
        width: 100%;
    }

    .other-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-page {
        padding: var(--mobile-cta-to-heading-spacing) var(--mobile-left-padding) 3rem var(--mobile-left-padding);
    }

    .contact-page-content {
        max-width: 100%;
        margin: 0;
        padding-left: 0;
    }

    .contact-page-title {
        margin-bottom: var(--mobile-heading-margin-bottom) !important;
        padding-left: 0;
        margin-left: 0;
    }

    .contact-title-lets,
    .contact-title-talk {
        font-size: 2.5rem;
    }

    /* Force single-column layout - break two-column grid */
    .contact-content {
        display: block !important;
        grid-template-columns: none !important;
        flex-direction: column;
        gap: 3rem;
    }

    .contact-text-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        order: 1;
        margin-bottom: 0;
    }

    .contact-info-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        order: 2;
        margin-top: 0;
    }

    .contact-text {
        font-size: 1rem;
        width: 100%;
    }

    .other-projects-section {
        padding: 3rem 2rem;
    }

    .other-projects-title {
        font-size: 2rem;
    }

    .other-projects-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .other-project-image {
        height: 180px;
    }
}

/*
 * iPad / tablet (768–1024px): max-1024 uses display:block, so gap is ignored.
 * Higher-specificity flex restores rhythm between the Start a project stack and
 * Architecture & Tools / Prefer to reach out (also beats max-768 block at 768).
 */
@media (min-width: 768px) and (max-width: 1024px) {
    .approach-page .approach-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        gap: 4.5rem;
    }

    .approach-page .approach-text-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem;
        margin-bottom: 0 !important;
    }

    .approach-page .approach-text-section .approach-text {
        margin-bottom: 0;
    }

    .approach-page .approach-left-column {
        margin-top: 0 !important;
    }

    .contact-page .contact-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        gap: 4.5rem;
    }

    .contact-page .contact-text-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem;
        margin-bottom: 0 !important;
    }

    .contact-page .contact-text-section .contact-text {
        margin-bottom: 0;
    }

    .contact-page .contact-info-section {
        margin-top: 0 !important;
    }
}

/* Contact Page Styles */
.contact-page {
    padding: 4rem 3rem;
    background-color: #FFFFFF;
    min-height: 100vh;
    position: relative;
}

.contact-page .back-button {
    margin-bottom: 1rem;
}

.contact-page-content {
    max-width: 1000px;
    margin: 0;
}

.contact-page-title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 4rem;
    padding-left: 0;
}

.contact-title-lets {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 3.5rem;
    color: #000000;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.contact-title-talk {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 3.5rem;
    color: #746A63;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.contact-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-text-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.25rem;
    color: #000000;
    line-height: 1.8;
}

.contact-info-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-method {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-method-label {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    color: #746A63;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.contact-email,
.contact-link {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
    text-decoration: none;
}

.contact-email:hover,
.contact-link:hover {
    text-decoration: underline;
}

/* Start Project Page & Form */
.start-project-page {
    padding: 4rem 3rem;
    background-color: #FFFFFF;
    min-height: 100vh;
    position: relative;
}

.start-project-page .back-button {
    margin-bottom: 1rem;
}

.start-project-content {
    max-width: 560px;
    margin: 0;
}

.start-project-title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 3rem;
    padding-left: 0;
}

.start-project-title-1 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 3.5rem;
    color: #000000;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.start-project-title-2 {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 3.5rem;
    color: #746A63;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.start-project-form-wrap {
    display: block;
}

.start-project-form-wrap[hidden] {
    display: none;
}

.start-project-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.start-project-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.start-project-form label {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    color: #2a2a2a;
}

.start-project-form input[type="text"],
.start-project-form input[type="email"],
.start-project-form select,
.start-project-form textarea {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #2a2a2a;
    padding: 0.6rem 0.75rem;
    border: 1px solid #6b6560;
    border-radius: 12px;
    background: #F5EFEC !important;
    transition: border-color 180ms ease;
}

.start-project-form input:focus,
.start-project-form select:focus,
.start-project-form textarea:focus {
    outline: none;
    border-color: #746A63;
}

/* Inline validation – pastel red highlight instead of pop-ups */
.start-project-form .form-field.has-error input[type="text"],
.start-project-form .form-field.has-error textarea {
    border-color: #e8a5a5;
    background: #fdf2f2 !important;
}
.start-project-form .form-field.has-error .custom-select-trigger {
    border-color: #e8a5a5;
    background-color: #fdf2f2 !important;
}
.start-project-form .form-field.has-error .custom-select.is-open .custom-select-frame {
    border-color: #e8a5a5;
}

/* Inline server/network error message */
.start-project-form-error {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    color: #8b4545;
    background: #fdf2f2;
    border: 1px solid #e8a5a5;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

/* Custom select dropdowns – single frame border when open, no overlapping lines */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-frame {
    position: relative;
    border-radius: 12px;
}

.custom-select.is-open .custom-select-frame {
    border: 1px solid #746A63;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #2a2a2a;
    padding: 0.6rem 0.75rem;
    padding-right: 2.25rem;
    border: 1px solid #6b6560;
    border-radius: 12px;
    background-color: #F5EFEC !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.custom-select-trigger:hover {
    border-color: #5a5550;
}

.custom-select.is-open .custom-select-trigger {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #d5d0c7;
}

.custom-select-trigger[data-value]:not([data-value=""]) {
    color: #000000;
    font-weight: 300;
}

.custom-select-dropdown {
    position: relative;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: #F5EFEC !important;
    transition: max-height 200ms ease;
}

.custom-select.is-open .custom-select-dropdown {
    max-height: min(280px, 60vh);
    overflow-y: auto;
}

.custom-select-option {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #2a2a2a;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.custom-select-option:not(:last-child) {
    box-shadow: 0 1px 0 0 #d5d0c7;
}

.custom-select-option:hover {
    background: #ddd8cf;
    color: #2a2a2a;
}

.custom-select-option.is-selected {
    background: #ddd8cf;
    font-weight: 300;
    color: #746A63;
}

.start-project-form textarea {
    resize: vertical;
    min-height: 120px;
    border-radius: 12px;
}

.start-project-submit {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2a2a2a;
    padding: 12px 26px;
    border: 1px solid #6b6560;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: all 180ms ease;
    width: fit-content;
    margin-top: 0.5rem;
}

.start-project-submit:hover:not(:disabled) {
    background: #F5EFEC;
    border-color: #5a5550;
}

.start-project-submit:active:not(:disabled) {
    background: #746A63;
    border-color: #746A63;
    color: #ffffff;
}

.start-project-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.start-project-success {
    padding: 2rem 0;
}

.start-project-success[hidden] {
    display: none;
}

.start-project-success-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 2rem;
    color: #000000;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.start-project-success-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.1rem;
    color: #2a2a2a;
    line-height: 1.6;
}

.start-project-success .start-project-back-btn {
    display: inline-block;
    text-decoration: none;
    margin-top: 1.5rem;
}

.start-project-success .start-project-back-btn:hover {
    background: #F5EFEC;
    border-color: #5a5550;
}

.start-project-success .start-project-back-btn:active {
    background: #746A63;
    border-color: #746A63;
    color: #ffffff;
}

/* Approach Page Styles */
.approach-page {
    padding: 4rem 3rem;
    background-color: #FFFFFF;
    min-height: 100vh;
    position: relative;
}

.approach-page .back-button {
    margin-bottom: 1rem;
}

.approach-page-content {
    max-width: 1400px;
    margin: 0;
}

.approach-page-title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 4rem;
    padding-left: 0;
}

.approach-title-hybrid {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 3.5rem;
    color: #000000;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.approach-title-mindset {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 3.5rem;
    color: #746A63;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.approach-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.approach-text-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.approach-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.25rem;
    color: #000000;
    line-height: 1.8;
}

.approach-left-column {
    display: flex;
    flex-direction: column;
}

/* Legal Pages */
.legal-page {
    padding: 4rem 3rem;
    background-color: #FFFFFF;
    min-height: 100vh;
    position: relative;
}

.legal-page .back-button {
    margin-bottom: 1rem;
}

.legal-page-content {
    max-width: 820px;
    margin: 0;
}

.legal-page-title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    padding-left: 0;
}

.legal-title-primary {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 3.5rem;
    color: #000000;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.legal-title-secondary {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 3.5rem;
    color: #746A63;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.legal-intro {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #746A63;
    margin-bottom: 2rem;
}

.legal-section {
    margin-bottom: 2rem;
}

.legal-section:last-of-type {
    margin-bottom: 0;
}

.legal-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.7rem;
}

.legal-section-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.05rem;
    color: #000000;
    line-height: 1.75;
}

.legal-section-text + .legal-section-text {
    margin-top: 0.8rem;
}

.legal-link {
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.practical-stack-section {
    margin-top: 0;
}

.practical-stack-title {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.5rem;
    color: #000000;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stack-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.stack-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stack-item-title {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1.5rem;
    color: #000000;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.stack-item-description {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    color: #746A63;
    line-height: 1.6;
}

/* Mobile Header (max-width: 768px) */
@media (max-width: 768px) {
    .header {
        padding: 1rem var(--mobile-left-padding) 1rem var(--mobile-left-padding);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1rem;
        position: relative;
    }

    /* Row 1: logo left, language right. Row 2: nav full width so translations don't wrap awkwardly. */
    .logo {
        order: 1;
        flex-shrink: 0;
    }

    .logo-sydney {
        font-size: 1.1rem;
    }

    .logo-grignon {
        font-size: 1.1rem;
    }

    .nav {
        position: static;
        transform: none;
        left: auto;
        order: 3;
        flex-basis: 100%;
        width: 100%;
        justify-content: flex-start;
        gap: 1.5rem;
        margin-left: 0;
        margin-right: 0;
        padding-right: 0;
        padding-top: 0.25rem;
    }

    .nav-link {
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .lang-switcher-trigger {
        font-size: 1.05rem;
    }

    .header-ctas {
        order: 2;
        gap: 0.75rem;
        justify-content: flex-end;
        width: auto;
        margin-left: auto;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
    }

    /* Keep language dropdown on-screen: align to viewport right */
    .lang-switcher-dropdown {
        right: 0;
        left: auto;
    }

    .lets-talk-btn {
        font-size: 0.8125rem;
        padding: 11px 20px;
        border-radius: 999px;
    }

    /* Accepting new projects below logo on mobile */
    .accepting-clients {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
        position: absolute !important;
        left: var(--mobile-left-padding) !important;
        top: calc(1rem + 2.5rem + 0.25rem + 1.6rem) !important;
        margin-top: 0 !important;
        width: auto;
        align-self: center;
    }
    
    /* Back button spacing on mobile */
    .back-button {
        margin-top: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .back-button svg {
        width: 14px;
        height: 14px;
    }

    /* Shared mobile left margin for all page content */
    /* Account for header: row1 (~40px) + nav row (~36px) + spacing (12px) + gap to heading (24px) */
    .approach-page,
    .contact-page,
    .start-project-page,
    .legal-page {
        padding-left: var(--mobile-left-padding);
        padding-right: var(--mobile-left-padding);
        padding-top: calc(76px + var(--mobile-nav-to-cta-spacing) + var(--mobile-cta-to-heading-spacing) - 0.5rem);
        padding-bottom: 3rem;
    }

    /* Tighten heading spacing */
    .approach-page-title,
    .contact-page-title,
    .start-project-title,
    .legal-page-title {
        margin-bottom: var(--mobile-heading-margin-bottom) !important;
        padding-left: 0;
        margin-left: 0;
    }

    .start-project-title-1,
    .start-project-title-2,
    .legal-title-primary,
    .legal-title-secondary {
        font-size: 2.5rem;
    }

    /* Approach Page - Force Single Column Layout with consistent spacing */
    .approach-content {
        display: block !important;
        grid-template-columns: none !important;
        gap: var(--mobile-paragraph-margin-bottom);
        padding-left: 0;
    }

    .approach-text-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: var(--mobile-paragraph-margin-bottom);
        padding-left: 0;
    }

    .approach-text {
        margin-bottom: var(--mobile-paragraph-margin-bottom);
    }

    .approach-left-column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-top: var(--mobile-paragraph-margin-bottom);
        padding-left: 0;
    }

    .practical-stack-section {
        width: 100%;
        padding-left: 0;
    }

    .practical-stack-title {
        margin-bottom: var(--mobile-heading-margin-bottom) !important;
    }

    /* Let's Talk Page - Force Single Column Layout with consistent spacing */
    .contact-content {
        display: block !important;
        grid-template-columns: none !important;
        gap: var(--mobile-paragraph-margin-bottom);
        padding-left: 0;
    }

    .contact-text-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: var(--mobile-paragraph-margin-bottom);
        padding-left: 0;
    }

    .contact-text {
        margin-bottom: var(--mobile-paragraph-margin-bottom);
    }

    .contact-info-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-top: var(--mobile-paragraph-margin-bottom);
        padding-left: 0;
    }

    .contact-method {
        margin-bottom: var(--mobile-paragraph-margin-bottom);
    }

    .hero {
        padding: 2rem var(--mobile-left-padding) 3rem var(--mobile-left-padding);
        min-height: 70vh;
    }

    .hero-content {
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
    }

    .hero-line-1,
    .hero-line-2,
    .hero-line-3 {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 0.95rem;
        margin-top: 1.5rem;
    }

    .hero-graphic {
        display: none;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .what-i-build {
        padding: 2rem var(--mobile-left-padding);
        overflow-x: hidden;
    }
    
    .case-studies {
        padding: 4rem 2rem 6rem 2rem;
    }
    
    .build-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
        margin-top: 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    .build-item {
        width: 100%;
        max-width: 100%;
        padding: 0.75rem;
        min-height: auto;
        box-sizing: border-box;
    }
    
    .build-item img {
        width: 35%;
        max-width: 80px;
        min-width: 50px;
        min-height: 50px;
    }
    
    .build-item h3 {
        font-size: 0.85rem;
    }
    
    .build-item p {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .footer {
        padding: 3rem 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .case-study-hero {
        padding: 3rem 2rem;
    }

    .case-study-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .case-study-content {
        padding: 4rem 2rem;
    }

    .layout-text-image,
    .layout-image-text {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .content-images {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ===== Splash: all pages (initial load + internal navigation) ===== */
.splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #FEFEFE;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.35s ease-out;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

.splash.fade-out {
    opacity: 0;
    pointer-events: none;
}

.splash-inner {
    display: flex;
    align-items: baseline;
}

/* Logo assembly: limina slides right, labs slides left; subtle, refined (~420ms ease-out) */
@keyframes splash-assemble-left {
    from {
        opacity: 0.9;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes splash-assemble-right {
    from {
        opacity: 0.9;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.splash-logo-sydney {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 2rem;
    color: #000000;
    animation: splash-assemble-left 0.42s ease-out forwards;
}

.splash-logo-grignon {
    font-family: "georgiapro", georgia-pro, 'Georgia Pro Condensed', 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 2rem;
    letter-spacing: -0.03em;
    color: #746A63;
    animation: splash-assemble-right 0.42s ease-out forwards;
}

/* Mobile: scale logo so it fits; keep animation subtle */
@media (max-width: 480px) {
    .splash-logo-sydney,
    .splash-logo-grignon {
        font-size: 1.5rem;
    }
}

/* Respect reduced motion: show logo immediately, no slide */
@media (prefers-reduced-motion: reduce) {
    .splash-logo-sydney,
    .splash-logo-grignon {
        animation: none;
        opacity: 1;
    }
    .splash {
        transition-duration: 0.2s;
    }
}

/* Hero enter: run once on load only (body.loaded added when splash ends) */
/* 1. Headline: refined rise + fade, cubic-bezier, second line ~130ms after first */
.index-page .hero.hero-animate .hero-line-1,
.index-page .hero.hero-animate .hero-line-2 {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s cubic-bezier(0.33, 0.01, 0.2, 1),
                transform 0.55s cubic-bezier(0.33, 0.01, 0.2, 1);
}
.index-page .hero.hero-animate .hero-line-1 { transition-delay: 0.05s; }
.index-page .hero.hero-animate .hero-line-2 { transition-delay: 0.18s; }

.index-page.loaded .hero.hero-animate .hero-line-1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}
.index-page.loaded .hero.hero-animate .hero-line-2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
}

/* Supporting hero content: same easing, staggered after headline. CTA and scroll-down always visible. */
.index-page .hero.hero-animate .hero-description {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.33, 0.01, 0.2, 1), transform 0.5s cubic-bezier(0.33, 0.01, 0.2, 1);
}
.index-page .hero.hero-animate .hero-cta,
.index-page .hero.hero-animate .scroll-down {
    opacity: 1;
    transform: none;
}
.index-page.loaded .hero.hero-animate .hero-description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* 2. Image: enters from the right, moves left into place + fade (after headline) */
.index-page .hero.hero-animate .hero-graphic {
    opacity: 0;
    transform: translate(32px, -50%);
    transition: opacity 0.5s cubic-bezier(0.33, 0.01, 0.2, 1), transform 0.5s cubic-bezier(0.33, 0.01, 0.2, 1);
}
.index-page.loaded .hero.hero-animate .hero-graphic {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: 0.72s;
}

/* Scroll-in sections: same subtle rise + fade */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* About & Contact: gentler rise + fade, staggered */
.approach-page .animate-on-scroll,
.contact-page .animate-on-scroll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.approach-page .animate-on-scroll.in-view,
.contact-page .animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}
.approach-page .approach-page-title.animate-on-scroll { transition-delay: 0s; }
.approach-page .approach-text-section.animate-on-scroll { transition-delay: 0.08s; }
.approach-page .approach-left-column.animate-on-scroll { transition-delay: 0.16s; }
.contact-page .contact-page-title.animate-on-scroll { transition-delay: 0s; }
.contact-page .contact-text-section.animate-on-scroll { transition-delay: 0.08s; }
.contact-page .contact-info-section.animate-on-scroll { transition-delay: 0.16s; }

@media (max-width: 768px) {
    .approach-page .animate-on-scroll,
    .contact-page .animate-on-scroll {
        transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .approach-page .approach-text-section.animate-on-scroll { transition-delay: 0.12s; }
    .approach-page .approach-left-column.animate-on-scroll { transition-delay: 0.26s; }
}

@media (prefers-reduced-motion: reduce) {
    .approach-page .animate-on-scroll,
    .contact-page .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* Case studies: each project slides up into view (larger travel, slower) */
.case-studies .case-study {
    opacity: 0;
    transform: translateY(72px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.case-studies .case-study.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Digital Architecture: cubes assemble when section enters view (once) */
.what-i-build.animate-on-scroll {
    overflow-x: hidden;
}
.what-i-build.animate-on-scroll .build-item {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.52s ease-out, transform 0.52s ease-out;
}
.what-i-build.animate-on-scroll.in-view .build-item:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0; }
.what-i-build.animate-on-scroll.in-view .build-item:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.08s; }
.what-i-build.animate-on-scroll.in-view .build-item:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.16s; }
.what-i-build.animate-on-scroll.in-view .build-item:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.24s; }

@media (max-width: 768px) {
    .what-i-build.animate-on-scroll .build-item {
        transform: translateY(30px);
    }
    .what-i-build.animate-on-scroll.in-view .build-item:nth-child(1),
    .what-i-build.animate-on-scroll.in-view .build-item:nth-child(2),
    .what-i-build.animate-on-scroll.in-view .build-item:nth-child(3),
    .what-i-build.animate-on-scroll.in-view .build-item:nth-child(4) {
        transform: translateY(0);
    }
}

/* Client Portal (v1, static + action-driven) */
html:has(body[data-role="client"]),
html:has(body[data-role="admin"]) {
    overflow-x: hidden;
}

body[data-role="client"],
body[data-role="admin"] {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.client-portal-page {
    padding: 3rem 3rem;
    background-color: #FFFFFF;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}

.client-portal-page img {
    max-width: 100%;
    height: auto;
}

.client-portal-page .portal-overview-grid,
.client-portal-page .project-grid {
    min-width: 0;
}

.client-portal-page .portal-overview-card,
.client-portal-page .project-column,
.client-portal-page .portal-section,
.client-portal-page .portal-hero,
.client-portal-page .portal-mode-bar,
.client-portal-page .client-portal-content {
    min-width: 0;
    max-width: 100%;
}

.client-portal-page a,
.client-portal-page p,
.client-portal-page li,
.client-portal-page .step-card-text,
.client-portal-page .muted-note,
.client-portal-page .inline-link,
.client-portal-page .portal-input,
.client-portal-page .feedback-textarea {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.client-portal-page .portal-title {
    min-width: 0;
    max-width: 100%;
}

.client-portal-page .feedback-actions,
.client-portal-page .decision-actions,
.client-portal-page .status-options {
    min-width: 0;
}

.client-portal-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.portal-hero {
    background: #FFFCF6;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    padding: 2rem;
    margin-bottom: 1.75rem;
}

.portal-kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #746A63;
    margin-bottom: 0.7rem;
}

.portal-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.portal-title-main {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 2.8rem;
    letter-spacing: -0.03em;
    color: #000000;
}

.portal-title-accent {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-style: italic;
    font-size: 2.8rem;
    letter-spacing: -0.03em;
    color: #746A63;
}

.portal-description {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #000000;
    max-width: none;
}

.portal-overview-grid {
    margin-top: 1.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
}

.portal-overview-card {
    background: #FEFEFE;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

.priority-card {
    margin-top: 1rem;
    background: #fffaf0;
    border: 1px solid rgba(211, 154, 35, 0.35);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

.priority-list {
    margin: 0;
    padding-left: 1.1rem;
}

.priority-list li {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    line-height: 1.58;
    margin-bottom: 0.3rem;
}

.step-signal {
    display: inline-block;
    margin-top: 0.3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.step-signal.is-action {
    color: #1f5f3e;
    border: 1px solid #84c79f;
    background: #eefaf1;
}

.step-signal.is-progress {
    color: #745a27;
    border: 1px solid #d9b268;
    background: #fff7e9;
}

.step-signal.is-next {
    color: #5f5852;
    border: 1px solid #c8bfb4;
    background: #f5f2ec;
}

.portal-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 0.6rem;
}

.portal-list {
    margin: 0;
    padding-left: 1.1rem;
}

.portal-list li {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.28rem;
}

.payment-summary {
    display: grid;
    gap: 0.45rem;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    line-height: 1.45;
}

.payment-label {
    color: #000000;
}

.payment-value {
    color: #000000;
    text-align: right;
}

.payment-value.is-positive {
    color: #2f6a46;
    font-weight: 300;
}

.payment-value.is-attention {
    color: #8d4f2f;
    font-weight: 300;
}

.portal-section {
    background: #FFFCF6;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    padding: 1.6rem;
    margin-bottom: 1rem;
}

.portal-section-head {
    margin-bottom: 1rem;
}

.portal-section-title {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1.95rem;
    letter-spacing: -0.03em;
    color: #000000;
    margin-bottom: 0.35rem;
}

.portal-section-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.97rem;
    line-height: 1.6;
    color: #746A63;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.project-column {
    background: #FEFEFE;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 1rem;
}

.project-name {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: #000000;
    margin-bottom: 0.2rem;
}

.project-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.73rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #746A63;
    margin-bottom: 0.9rem;
}

.step-card {
    background: #FFFCF6;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 12px;
    padding: 0.9rem;
    margin-bottom: 0.75rem;
}

.step-card:last-child {
    margin-bottom: 0;
}

.step-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #000000;
    margin-bottom: 0.55rem;
}

.step-card-text {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #000000;
}

.inline-link-list {
    margin: 0.7rem 0 0;
    display: grid;
    gap: 0.4rem;
}

.inline-link {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.92rem;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.instruction-list {
    margin: 0.55rem 0 0;
    padding-left: 1rem;
}

.instruction-list li {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.93rem;
    line-height: 1.55;
    margin-bottom: 0.2rem;
}

.feedback-box {
    margin-top: 0.8rem;
}

.feedback-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #746A63;
    margin-bottom: 0.45rem;
}

.feedback-textarea {
    width: 100%;
    min-height: 88px;
    border: 1px solid #c9c1b8;
    border-radius: 10px;
    padding: 0.7rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #000000;
    background: #FFFFFF;
    resize: vertical;
}

.feedback-textarea:focus {
    outline: none;
    border-color: #746A63;
}

.feedback-actions {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-btn {
    border: 1px solid #6b6560;
    background: transparent;
    border-radius: 999px;
    padding: 0.52rem 0.95rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2a2a2a;
    cursor: pointer;
    transition: all 160ms ease;
}

.portal-btn:hover {
    background: #F5EFEC;
}

.portal-btn.is-primary {
    background: #2a2a2a;
    color: #FFFFFF;
    border-color: #2a2a2a;
}

.portal-btn.is-primary:hover {
    background: #000000;
    border-color: #000000;
}

.portal-action-note {
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: #746A63;
    min-height: 1.2em;
    transition: color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.portal-action-note.is-success {
    color: #2f6a52;
    opacity: 1;
    transform: translateY(-1px);
}

.feedback-box.is-saved {
    box-shadow: 0 0 0 2px rgba(47, 106, 82, 0.15);
    transition: box-shadow 220ms ease;
}

.version-stack {
    display: grid;
    gap: 0.7rem;
}

.version-card {
    background: #FFFCF6;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 12px;
    padding: 0.72rem;
}

.version-card-title {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #000000;
    margin-bottom: 0.5rem;
}

.version-list {
    margin: 0;
    padding-left: 1rem;
}

.version-list li {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.16rem;
}

.mockup-placeholder {
    margin-top: 0.65rem;
    border: 1px dashed #b9b2a9;
    border-radius: 10px;
    padding: 0.7rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    color: #746A63;
    background: #f7f4ee;
}

.upload-cta {
    margin-top: 0.7rem;
}

.upload-btn {
    display: inline-block;
    border: 1px solid #2a2a2a;
    background: #2a2a2a;
    border-radius: 999px;
    padding: 0.62rem 1.05rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    text-decoration: none;
}

.upload-btn:hover {
    background: #000000;
    border-color: #000000;
}

.domain-list {
    margin: 0.45rem 0 0;
    padding-left: 1rem;
}

.domain-list li {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.18rem;
}

.domain-secondary {
    font-weight: 300;
}

.admin-state-note {
    margin-top: 0.45rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 300;
    color: #5f5852;
}

.branding-admin-form {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.45rem;
}

.branding-admin-form [data-branding-save],
.branding-admin-form [data-website-save] {
    position: relative;
    z-index: 2;
    justify-self: start;
}

.branding-admin-form .portal-input,
.branding-admin-form .feedback-textarea {
    background: #ffffff;
}

.branding-block {
    margin-top: 0.7rem;
}

.admin-thumb-row {
    margin-top: 0.45rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.admin-thumb-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.4rem;
    background: #fffdfa;
}

.admin-thumb-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    color: #746A63;
    margin-bottom: 0.25rem;
}

.admin-thumb-image {
    width: 100%;
    max-height: 74px;
    object-fit: contain;
    border-radius: 6px;
    display: none;
    background: #ffffff;
}

.admin-thumb-empty {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 200;
    color: #8a8178;
}

.admin-thumb-actions {
    margin-top: 0.3rem;
    display: flex;
    gap: 0.3rem;
}

.admin-thumb-actions .portal-btn {
    padding: 0.28rem 0.6rem;
    font-size: 0.66rem;
}

.admin-saved-reference-assets {
    width: 100%;
}

.admin-saved-refs-heading {
    font-weight: 500;
    color: #4a423c;
    margin: 0;
}

.admin-saved-refs-strip {
    align-items: stretch;
}

.admin-saved-ref-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.45rem;
    height: 1.45rem;
    border: none;
    border-radius: 50%;
    background: rgba(40, 36, 32, 0.62);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    font-family: system-ui, sans-serif;
}

.admin-saved-ref-remove:hover {
    background: rgba(40, 36, 32, 0.85);
}

.admin-saved-ref-reorder {
    display: flex;
    gap: 0.3rem;
    justify-content: stretch;
    margin-top: 0.05rem;
}

.admin-saved-ref-move {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.24rem 0.3rem;
    font-size: 0.78rem;
    line-height: 1.1;
    border: 1px solid rgba(74, 66, 60, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #3a342f;
    cursor: pointer;
    font-family: system-ui, sans-serif;
}

.admin-saved-ref-move:hover:not(:disabled) {
    background: rgba(245, 240, 235, 1);
    border-color: rgba(74, 66, 60, 0.28);
}

.admin-saved-ref-move:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

/* Step sections: collapse body when all projects in that step are DONE */
.portal-section-head--collapsible-target {
    position: relative;
    padding-right: 1.65rem;
}

.portal-section-collapse-chevron {
    position: absolute;
    right: 0.1rem;
    top: 0.38rem;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid rgba(74, 66, 60, 0.45);
    border-bottom: 2px solid rgba(74, 66, 60, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.portal-section:not(.is-step-all-done) .portal-section-collapse-chevron {
    display: none;
}

.portal-section.is-step-all-done .portal-section-head--collapsible-target {
    cursor: pointer;
}

.portal-section.is-step-all-done .portal-section-head--collapsible-target:hover .portal-section-title {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.portal-section.is-step-all-done:not(.is-step-user-expanded) .portal-section-collapsible-body {
    display: none !important;
}

.portal-section.is-step-all-done.is-step-user-expanded .portal-section-collapsible-body {
    display: block !important;
}

.portal-section.is-step-all-done.is-step-user-expanded .portal-section-collapse-chevron {
    transform: rotate(-135deg);
    top: 0.52rem;
}

.portal-section-done-collapsed-hint {
    margin: 0.35rem 0 0 !important;
    max-width: 38rem;
}

.branding-block img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0.5rem;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.palette-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: #f0eee7;
    flex-shrink: 0;
}

.palette-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    font-weight: 300;
    color: #3a3632;
}

.font-preview {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 200;
    color: #000000;
    line-height: 1.45;
    margin-top: 0.3rem;
}

.upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.upload-help {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 200;
    color: #746A63;
}

/* Admin branding uploads: one clear card per asset type, single styled picker each */
.branding-upload-panel {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.branding-upload-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    background: #fffdfa;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.branding-upload-card.is-dragover {
    border-color: rgba(0, 0, 0, 0.28);
    background: #f5f2ec;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.branding-upload-title {
    margin: 0 0 0.3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5a524c;
}

.branding-upload-desc {
    margin: 0 0 0.55rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 200;
    color: #746A63;
    line-height: 1.45;
    max-width: 42rem;
}

.branding-file-pick {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    margin: 0;
    cursor: pointer;
    min-height: 2.35rem;
    min-width: 8rem;
}

.branding-file-pick__face {
    pointer-events: none;
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: #3a3632;
    line-height: 1.3;
}

.branding-file-pick__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
}

.branding-file-pick:hover .branding-file-pick__face,
.branding-file-pick:focus-within .branding-file-pick__face {
    border-color: rgba(0, 0, 0, 0.32);
    background: #faf8f5;
}

.branding-upload-hint {
    margin: 0.45rem 0 0;
}

.branding-upload-clear {
    margin-top: 0.55rem;
}

.branding-request-review-wrap {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.branding-request-review-hint {
    margin: 0.35rem 0 0;
    max-width: 36rem;
}

/* Native file row: reliable file dialog (avoid opacity-0 overlay quirks in Safari/WebKit) */
.branding-upload-card .branding-file-input-native {
    width: 100%;
    max-width: min(100%, 28rem);
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0.05rem;
    min-height: 2.65rem;
    cursor: pointer;
    padding: 0.42rem 0.55rem;
    font-size: 0.85rem;
}

.brandkit-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0.55rem;
}

.brandkit-section {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 0.6rem;
    background: #fffdfa;
}

.brandkit-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3e3a36;
    margin-bottom: 0.42rem;
}

.font-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 300;
    color: #746A63;
    margin-bottom: 0.18rem;
}

.swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.swatch-item {
    min-width: 54px;
    text-align: center;
}

.asset-previews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.asset-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.45rem;
    background: #ffffff;
    min-height: 74px;
}

.asset-card img {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
    border-radius: 6px;
}

.asset-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    color: #746A63;
    margin-bottom: 0.25rem;
}

.asset-empty-note {
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 200;
    color: #746A63;
    margin-bottom: 0.45rem;
    line-height: 1.5;
}

.brandkit-grid.single-focus {
    grid-template-columns: 1.2fr 0.8fr;
}

.asset-link-wrap {
    margin-top: 0.45rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 300;
}

.decision-undo {
    display: none;
}

.decision-undo.is-visible {
    display: inline-flex;
}

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

    .brandkit-grid.single-focus {
        grid-template-columns: 1fr;
    }
}

.domain-note {
    margin-top: 0.55rem;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #746A63;
}

.status-pill {
    display: inline-block;
    margin-left: 0.4rem;
    border-radius: 999px;
    padding: 0.14rem 0.52rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.status-pill.is-review {
    color: #7a5a32;
    border-color: #cfa86b;
    background: #fff6e8;
}

.status-pill.is-approved {
    color: #2f6a46;
    border-color: #7cb592;
    background: #eefaf1;
}

.status-pill.is-changes {
    color: #8d4f2f;
    border-color: #d19f86;
    background: #fff2eb;
}

@media (max-width: 1024px) {
    .client-portal-page {
        padding: 3rem 2rem;
    }

    .portal-overview-grid,
    .project-grid {
        grid-template-columns: 1fr;
    }

    .portal-title-main,
    .portal-title-accent {
        font-size: 2.45rem;
    }

    .portal-description {
        font-size: 1rem;
        line-height: 1.65;
    }

    .portal-section-title {
        font-size: 1.72rem;
    }

    .portal-section {
        padding: 1.35rem;
    }

    .project-column {
        padding: 0.9rem;
    }

    .upload-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .client-portal-page {
        padding: 0.6rem var(--mobile-left-padding) 3rem var(--mobile-left-padding);
    }

    .portal-hero,
    .portal-section {
        padding: 1.2rem;
        border-radius: 14px;
    }

    .portal-title-main,
    .portal-title-accent {
        font-size: 2rem;
        line-height: 1.06;
    }

    .portal-section-title {
        font-size: 1.45rem;
        margin-bottom: 0.25rem;
    }

    .portal-description {
        font-size: 0.97rem;
        line-height: 1.62;
    }

    .portal-subtext {
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .portal-overview-card,
    .priority-card {
        padding: 0.85rem 0.9rem;
    }

    .portal-list li,
    .priority-list li,
    .instruction-list li,
    .domain-list li {
        font-size: 0.89rem;
        line-height: 1.52;
    }

    .version-card {
        padding: 0.62rem;
    }

    .brandkit-section {
        padding: 0.52rem;
    }

    .asset-card {
        min-height: 64px;
    }

    .feedback-textarea {
        min-height: 96px;
        font-size: 0.92rem;
    }

    .portal-btn {
        min-height: 42px;
        font-size: 0.74rem;
        padding: 0.56rem 0.9rem;
    }

    .decision-actions .portal-btn {
        min-height: 44px;
        padding: 0.64rem 1rem;
    }

    .status-options {
        gap: 0.32rem;
    }

    .status-chip {
        font-size: 0.64rem;
        padding: 0.24rem 0.5rem;
    }
}

/* Portal role system + status controls */
.portal-header-minimal {
    padding: 2rem 3rem 1rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portal-header-minimal .logo {
    margin: 0 auto;
}

.portal-mode-bar {
    max-width: 1200px;
    margin: 0 auto 0.9rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.portal-mode-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #746A63;
}

.portal-switch-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 300;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.status-control {
    margin-bottom: 0.8rem;
}

.status-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #746A63;
    margin-bottom: 0.38rem;
}

.status-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.status-chip {
    border: 1px solid #b7aea4;
    background: #FEFEFE;
    border-radius: 999px;
    padding: 0.25rem 0.58rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.67rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5f5852;
    cursor: pointer;
}

.status-chip.is-active {
    border-color: #000000;
    color: #000000;
    background: #FFFFFF;
}

.status-chip[data-status="NOT STARTED"].is-active {
    background: #4f4f4f;
    border-color: #4f4f4f;
    color: #ffffff;
}

.status-chip[data-status="IN PROGRESS"].is-active {
    background: #2f6dcb;
    border-color: #2f6dcb;
    color: #ffffff;
}

.status-chip[data-status="WAITING REVIEW"].is-active {
    background: #d39a23;
    border-color: #d39a23;
    color: #1f1a10;
}

.status-chip[data-status="DONE"].is-active {
    background: #2f8a59;
    border-color: #2f8a59;
    color: #ffffff;
}

.status-chip:disabled {
    opacity: 0.88;
    cursor: default;
}

.role-admin .client-only {
    display: none !important;
}

.role-client .admin-only {
    display: none !important;
}

.admin-readout {
    margin-top: 0.6rem;
    border: 1px dashed #b9b2a9;
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    background: #f7f4ee;
}

.admin-readout p {
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 200;
    color: #5f5852;
    line-height: 1.45;
}

.client-review-gate {
    margin-top: 0.65rem;
    border: 1px solid #d9d1c8;
    border-radius: 10px;
    padding: 0.7rem;
    background: #fffaf0;
}

.client-review-gate p {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 200;
    line-height: 1.5;
}

.muted-note {
    margin-top: 0.45rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    font-weight: 200;
    color: #746A63;
    line-height: 1.55;
}

.portal-anchor-list {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.portal-anchor-list li {
    margin-bottom: 0.28rem;
}

.portal-anchor-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 300;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.portal-subtext {
    margin-top: 0.55rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    line-height: 1.55;
    color: #5f5852;
}

.portal-emphasis-soft {
    font-weight: 300;
}

.portal-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: none;
    z-index: 9998;
}

.portal-modal-backdrop.is-open {
    display: block;
}

.portal-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: min(92vw, 520px);
    background: #FFFCF6;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 16px;
    padding: 1.1rem;
    display: none;
    z-index: 9999;
}

.portal-modal.is-open {
    display: block;
}

.portal-modal-title {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.45rem;
}

.portal-modal-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.93rem;
    font-weight: 200;
    line-height: 1.6;
    margin-bottom: 0.85rem;
}

.portal-modal-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.portal-access-gate {
    position: fixed;
    inset: 0;
    z-index: 13000;
    background: rgba(240, 238, 231, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.portal-access-card {
    width: min(92vw, 420px);
    background: #FFFCF6;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 16px;
    padding: 1.15rem;
}

.portal-access-title {
    font-family: "georgiapro", georgia-pro, 'Georgia', serif;
    font-weight: 300 !important;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.3rem;
    color: #000000;
}

.portal-access-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    color: #5f5852;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.portal-access-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.portal-access-input {
    flex: 1;
    border: 1px solid #c9c1b8;
    border-radius: 10px;
    padding: 0.62rem 0.72rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    background: #ffffff;
    color: #000000;
}

.portal-access-input:focus {
    outline: none;
    border-color: #746A63;
}

.portal-access-error {
    min-height: 1.1em;
    margin-top: 0.55rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 300;
    color: #a04035;
}

.portal-input {
    width: 100%;
    border: 1px solid #c9c1b8;
    border-radius: 10px;
    padding: 0.58rem 0.7rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    background: #ffffff;
    color: #000000;
}

.portal-input:focus {
    outline: none;
    border-color: #746A63;
}

.decision-actions {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.decision-actions .portal-btn {
    min-height: 44px;
    padding: 0.72rem 1.2rem;
    font-size: 0.84rem;
}

.decision-actions .portal-btn.is-active {
    background: #1f1f1f;
    color: #ffffff;
    border-color: #1f1f1f;
}

.decision-panel {
    margin-top: 0.75rem;
}

.portal-btn.is-danger {
    border-color: #9f5546;
    color: #9f5546;
}

.portal-btn.is-danger:hover {
    background: #fff1ee;
}

.request-panel {
    margin-top: 0.65rem;
    display: none;
}

.request-panel.is-open {
    display: block;
}

.preview-pending {
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 200;
    color: #746A63;
}

.preview-ready-link {
    display: none;
}

.preview-ready-link.is-visible {
    display: inline;
}

.decision-state {
    margin-top: 0.45rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    font-weight: 300;
    color: #2f6a46;
}

.decision-state.is-changes {
    color: #8d4f2f;
}

.approval-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    background: #FFFCF6;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    z-index: 12000;
    display: none;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}

.approval-toast.is-visible {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    animation: approval-pop 420ms ease-out forwards;
}

.approval-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2f8a59;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
}

.approval-toast-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 300;
    color: #1e1e1e;
}

@keyframes approval-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 768px) {
    .portal-header-minimal {
        padding: 0.75rem var(--mobile-left-padding) 0.25rem var(--mobile-left-padding);
    }

    .portal-mode-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 0.7rem;
    }
}