/* =========================================================
   LANDERBUDGET — GLOBAL STYLESHEET
   HTML + CSS + Vanilla JavaScript

   ORGANIZATION
   01. Design tokens
   02. Reset, typography and shared layout
   03. Buttons and text links
   04. Header and navigation
   05. Shared hero banner and entrance animation
   06. HOME — hero and decorative browser preview
   07. HOME — overview, proof strip and package cards
   08. SERVICES — package details and demo gallery
   09. PROCESS — inquiry to project close
   10. FAQ — accordions and contact prompt
   11. CONTACT — shared layout styles
   12. PRIVACY / TERMS — legal content
   13. SHARED — notices, callouts and error page
   14. Footer
   15. Responsive layout
   16. Reduced-motion accessibility

   Notes:
   - All opening hero sections share the same text colors and description panel.
   - The existing .layer element is the only gray image layer; no diagonal panels are used.
   - Other page content reveals when it enters the viewport; main.js
     adds the .lb-reveal and .is-visible classes with IntersectionObserver.
   - Banner images should use loading="eager" and fetchpriority="high".
   - Use loading="lazy" for below-the-fold content images.
   ========================================================= */

/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */
:root {
    --dark: #0B0F19;
    --dark-soft: #121A2A;
    --dark-light: #1C2940;
    --cyan: #FF823D;
    --cyan-soft: #FFF0E6;

    --white: #FFFFFF;
    --background: #F7F9FC;
    --surface: #FFFFFF;
    --surface-soft: #F0F4F8;

    --text: #192235;
    --text-secondary: #5E697B;
    --text-muted: #8490A2;

    --border: #E1E7EF;
    --border-dark: #2A3548;
    --success: #128C62;

    --font-main: Inter, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --container-width: 1160px;
    --container-padding: 24px;
    --section-spacing: 92px;

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 22px;

    --shadow-small: 0 4px 16px rgba(11, 15, 25, 0.045);
    --shadow-medium: 0 14px 36px rgba(11, 15, 25, 0.08);
    --shadow-large: 0 24px 64px rgba(11, 15, 25, 0.13);

    --transition-fast: 180ms ease;
    --transition-normal: 280ms ease;

    /* Compatibility aliases for existing page markup */
    --ink: var(--dark);
    --soft: var(--background);
    --muted: var(--text-secondary);
    --line: var(--border);
    --radius: var(--radius-medium);
    --shadow: var(--shadow-medium);
    --font-heading: var(--font-main);

    --lb-safe-top: env(safe-area-inset-top, 0px);
    --lb-safe-right: env(safe-area-inset-right, 0px);
    --lb-safe-bottom: env(safe-area-inset-bottom, 0px);
    --lb-safe-left: env(safe-area-inset-left, 0px);
}

/* =========================================================
   02. RESET, TYPOGRAPHY AND SHARED LAYOUT
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    scroll-padding-bottom: 20px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    overflow-wrap: break-word;
    color: var(--text);
    background: var(--white);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(255, 130, 61, 0.14);
    -webkit-overflow-scrolling: touch;
}

body,
button,
input,
textarea,
select {
    font-family: var(--font-main);
}

button,
input,
textarea,
select {
    font-size: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

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

svg {
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    color: var(--dark);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(2.65rem, 5vw, 4.15rem);
}

h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
}

h3 {
    font-size: 1.2rem;
}

p {
    color: var(--text-secondary);
}

::selection {
    color: var(--dark);
    background: var(--cyan);
}

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}

.container {
    width: min(var(--container-width), calc(100% - 2 * var(--container-padding)));
    margin-inline: auto;
}

.section,
.section-space {
    padding-block: var(--section-spacing);
}

.soft-section,
.section-soft {
    background: var(--background);
}

.section-heading {
    max-width: 760px;
    margin-bottom: 43px;
}

.section-heading h2 {
    margin-bottom: 17px;
}

.section-intro {
    max-width: 670px;
    margin-bottom: 0;
    font-size: 1.03rem;
    line-height: 1.85;
}

.section-heading-center {
    margin-inline: auto;
    text-align: center;
}

.section-heading-center .eyebrow {
    justify-content: center;
}

.section-heading-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 45px;
}

.section-heading-split>div {
    max-width: 680px;
}

.section-heading-split .section-intro {
    max-width: 420px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: #FF823D;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 22px;
    height: 2px;
    flex-shrink: 0;
    background: var(--cyan);
    content: "";
}

.eyebrow-light {
    color: #AAB6C6;
}

.eyebrow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(255, 130, 61, 0.11);
}

.inline-link {
    color: #FF823D;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

/* =========================================================
   03. BUTTONS AND TEXT LINKS
   ========================================================= */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 51px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.button>span {
    font-size: 1.12em;
    transition: transform var(--transition-fast);
}

.button:hover>span {
    transform: translateX(3px);
}

.button-primary {
    color: var(--dark);
    background: var(--cyan);
    border-color: var(--cyan);
}

.button-primary:hover {
    background: #F2732F;
    border-color: #F2732F;
    box-shadow: 0 8px 22px rgba(255, 130, 61, 0.16);
    transform: translateY(-2px);
}

.button-secondary {
    color: var(--dark);
    background: var(--white);
    border-color: #CDD5E0;
}

.button-secondary:hover {
    background: var(--surface-soft);
    border-color: #AEB9C8;
    transform: translateY(-2px);
}

.button-outline-light {
    color: var(--white);
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.27);
}

.button-outline-light:hover {
    color: var(--white);
    background: rgba(255, 130, 61, 0.08);
    border-color: var(--cyan);
}

.text-link,
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #FF823D;
    font-size: 0.86rem;
    font-weight: 750;
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.text-link:hover,
.card-link:hover {
    gap: 13px;
    color: var(--dark);
}

.text-link span,
.card-link span {
    font-size: 1.1em;
}

.section-action {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* =========================================================
   04. HEADER AND NAVIGATION
   Supports .header-inner / .primary-nav / .nav-toggle used
   by the supplied HTML. Legacy aliases are retained.
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(225, 231, 239, 0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.header-inner,
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-width: 0;
    flex-shrink: 0;
    color: var(--dark);
}

/* Main logo must remain exactly 50 × 50 px. */
.brand-logo-image {
    display: block;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    flex: 0 0 50px;
    object-fit: contain;
    object-position: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.brand-name {
    color: var(--dark);
    font-size: 1.14rem;
    font-weight: 820;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

.brand-name span {
    color: #FF823D;
}

.primary-nav,
.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.8vw, 25px);
    margin-inline: auto;
}

.primary-nav>a,
.site-nav>a {
    position: relative;
    padding-block: 10px;
    color: #566174;
    font-size: 0.81rem;
    font-weight: 650;
    transition: color var(--transition-fast);
}

.primary-nav>a::after,
.site-nav>a::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 2px;
    background: var(--cyan);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
}

.primary-nav>a:hover,
.primary-nav>a.active,
.primary-nav>a[aria-current="page"],
.site-nav>a:hover,
.site-nav>a.active {
    color: var(--dark);
}

.primary-nav>a:hover::after,
.primary-nav>a.active::after,
.primary-nav>a[aria-current="page"]::after,
.site-nav>a:hover::after,
.site-nav>a.active::after {
    transform: scaleX(1);
}

.header-cta {
    min-height: 44px;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.nav-toggle,
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--white);
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    touch-action: manipulation;
    cursor: pointer;
}

.nav-toggle span,
.menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 10px;
    background: var(--dark);
    flex-shrink: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-mobile-cta {
    display: none;
}

/* =========================================================
   05. SHARED HERO BANNER, TEXT STYLE AND PAGE-OPEN ANIMATION
   All opening sections use the same text palette and description panel.
   ========================================================= */
.hero-with-banner,
.page-hero,
.process-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(68px, 9vw, 112px) 0 76px;
    color: var(--dark);
    background: #F8FAFD;

}

.hero-with-banner,
.page-hero {
    display: flex;
    align-items: center;
    min-height: 480px;
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.hero-with-banner {
    min-height: 560px;
}

.page-hero {
    border-bottom: 1px solid #EDF0F5;
}

.hero-with-banner>.hero-banner-image,
.page-hero>.hero-banner-image,
.process-page-hero>.hero-banner-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    
}

.hero-with-banner>.hero-grid,
.page-hero>.page-hero-content,
.process-page-hero>.container {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: min(var(--container-width), calc(100% - 2 * var(--container-padding)));
    max-width: var(--container-width);
    min-width: 0;
    margin-inline: auto;
}

.hero-with-banner .hero-content,
.page-hero .page-hero-content,
.process-page-hero>.container {
    position: relative;
    min-width: 0;
    max-width: 100%;
    isolation: isolate;
}

/* Keep eyebrow labels consistent, including the Process page. */
.hero-with-banner .eyebrow,
.page-hero .eyebrow,
.process-page-hero .eyebrow {
    color: var(--cyan);
}

/* Main-site hero headings use one solid black color. */
.hero-content h1,
.page-hero-content h1,
.process-page-hero h1 {
    max-width: 690px;
    margin-bottom: 24px;
    color: #000000;
    font-size: clamp(2.65rem, 4.8vw, 4rem);
    line-height: 1.12;
    letter-spacing: -0.047em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Simple white description panels: no pseudo-elements or angled shapes. */
.hero-description,
.hero-description-secondary,
.page-hero-content>p:not(.eyebrow),
.process-page-hero .process-intro {
    display: block;
    color: #000000;
    position: relative;
    width: fit-content;
    max-width: min(100%, 590px);
    margin-bottom: 19px;
    padding: 0.82rem 1.2rem;
    font-size: 1.03rem;
    font-style: normal;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.page-hero-compact {
    min-height: 340px;
    padding-block: 64px 54px;
}

.page-hero-compact .page-hero-content>p:not(.eyebrow) {
    margin-bottom: 0;
    font-size: 0.92rem;
}

/* Reveal hero text in sequence when a page opens. */
.hero-with-banner .hero-content>*,
.page-hero .page-hero-content>*,
.process-page-hero>.container>* {
    animation: lbHeroTextReveal 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lbHeroTextReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-with-banner .hero-content> :nth-child(1),
.page-hero .page-hero-content> :nth-child(1),
.process-page-hero>.container> :nth-child(1) {
    animation-delay: 100ms;
}

.hero-with-banner .hero-content> :nth-child(2),
.page-hero .page-hero-content> :nth-child(2),
.process-page-hero>.container> :nth-child(2) {
    animation-delay: 200ms;
}

.hero-with-banner .hero-content> :nth-child(3),
.page-hero .page-hero-content> :nth-child(3),
.process-page-hero>.container> :nth-child(3) {
    animation-delay: 320ms;
}

.hero-with-banner .hero-content> :nth-child(4),
.page-hero .page-hero-content> :nth-child(4),
.process-page-hero>.container> :nth-child(4) {
    animation-delay: 440ms;
}

.hero-with-banner .hero-content> :nth-child(5),
.page-hero .page-hero-content> :nth-child(5),
.process-page-hero>.container> :nth-child(5) {
    animation-delay: 560ms;
}

.hero-with-banner .hero-content> :nth-child(6),
.process-page-hero>.container> :nth-child(6) {
    animation-delay: 680ms;
}

/* =========================================================
   06. HOME — HERO AND DECORATIVE BROWSER PREVIEW
   ========================================================= */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: 94px 88px;
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 130, 61, 0.075), transparent 31%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%);
}

.hero:not(.hero-with-banner)::before {
    position: absolute;
    top: 60px;
    left: -190px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(255, 130, 61, 0.09);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.hero.hero-with-banner {
    background: #F8FAFD;
      position: relative;
    width: 100%;
    max-width: 1920px;
    height: auto;
    min-height: 0;
    max-height: 43vw;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    overflow: hidden;
}

.hero.hero-with-banner::before {
    display: none;
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 58px;
}

/* If an optional visual column is present, use a two-column layout. */
.hero-grid:has(.hero-visual) {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.hero-content {
    min-width: 0;
    max-width: 820px;
}

.hero-actions,
.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hero-actions {
    margin-bottom: 33px;
}

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.hero-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #586579;
    font-size: 0.77rem;
    font-weight: 600;
}

.note-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cyan);
}

/* Decorative browser preview. Used only if the HTML contains it. */
.hero-visual {
    min-width: 0;
    padding-block: 8px 5px;
}

.preview-window {
    overflow: hidden;
    border: 1px solid #D7DFE8;
    border-radius: 15px;
    background: var(--white);
    box-shadow: var(--shadow-large);
    transform: rotate(1deg);
    transition: transform 400ms ease;
}

.preview-window:hover {
    transform: rotate(0deg) translateY(-3px);
}

.preview-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding-inline: 14px;
    border-bottom: 1px solid var(--border);
    background: #F9FAFC;
}

.preview-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.preview-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #CBD3DE;
}

.preview-dots span:first-child {
    background: #F17B72;
}

.preview-dots span:nth-child(2) {
    background: #F4C768;
}

.preview-dots span:nth-child(3) {
    background: #76CFA8;
}

.preview-address {
    overflow: hidden;
    padding: 5px 9px;
    border: 1px solid #E6EAF0;
    border-radius: 5px;
    color: #8590A2;
    background: #FFFFFF;
    font-size: 0.58rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-status {
    color: #FF823D;
    font-size: 0.54rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.preview-website {
    min-height: 370px;
    overflow: hidden;
    padding: 0 23px 24px;
    background: #FFFFFF;
}

.preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 59px;
    border-bottom: 1px solid #EEF1F5;
}

.preview-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #263247;
    font-size: 0.47rem;
    font-weight: 850;
    letter-spacing: 0.03em;
}

.preview-logo-image {
    display: block;
    width: 25px;
    height: 25px;
    min-width: 25px;
    max-width: 25px;
    min-height: 25px;
    max-height: 25px;
    flex: 0 0 25px;
    object-fit: contain;
    object-position: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.preview-nav-links {
    display: flex;
    gap: 9px;
}

.preview-nav-links span {
    width: 25px;
    height: 4px;
    border-radius: 10px;
    background: #E0E6EE;
}

.preview-nav-links span:first-child {
    background: var(--cyan);
}

.preview-hero-content {
    padding: 27px 3px 23px;
    border-bottom: 1px solid #EEF1F5;
}

.preview-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #FF823D;
    font-size: 0.45rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.preview-heading-line {
    width: 87%;
    height: 13px;
    margin-bottom: 8px;
    border-radius: 3px;
    background: #152035;
}

.preview-heading-short {
    width: 62%;
    height: 13px;
    margin-bottom: 15px;
    background: #26354C;
}

.preview-text-line {
    width: 79%;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: #CBD4E0;
}

.preview-text-short {
    width: 53%;
    margin-bottom: 17px;
}

.preview-buttons {
    display: flex;
    gap: 8px;
}

.preview-button-accent,
.preview-button-outline {
    display: block;
    width: 88px;
    height: 23px;
    border-radius: 4px;
    background: var(--cyan);
}

.preview-button-outline {
    width: 70px;
    border: 1px solid #CBD4E0;
    background: #FFFFFF;
}

.preview-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 19px;
}

.preview-service-card {
    min-width: 0;
    padding: 12px 9px;
    border: 1px solid #E8EDF3;
    border-radius: 6px;
    background: #FFFFFF;
}

.preview-card-icon {
    display: block;
    width: 23px;
    height: 23px;
    margin-bottom: 12px;
    border: 5px solid rgba(255, 130, 61, 0.19);
    border-radius: 6px;
    background: var(--cyan);
}

.preview-card-line {
    display: block;
    width: 90%;
    height: 5px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: #8793A5;
}

.preview-card-line-short {
    width: 56%;
    height: 4px;
    background: #D1D9E3;
}

.preview-caption {
    margin: 18px 0 0;
    color: #6B7689;
    font-size: 0.72rem;
    text-align: right;
}

/* =========================================================
   07. HOME — PORTFOLIO CARDS AND PROCESS SUMMARY
   ========================================================= */
.home-portfolio-section {
    padding-top: clamp(54px, 6vw, 78px);
    padding-bottom: clamp(54px, 6vw, 78px);
    background: #FFFFFF;
}

.home-portfolio-section .section-heading {
    margin-bottom: 28px;
}

.home-portfolio-grid,
.portfolio-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.home-portfolio-card,
.portfolio-project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.home-portfolio-card:hover,
.portfolio-project-card:hover,
.service-overview-card:hover {
    border-color: #FFC9AA;
    box-shadow: var(--shadow-medium);
    transform: translateY(-3px);
}

.portfolio-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 230px;
    overflow: hidden;
    padding: 30px 20px;
}

.portfolio-art::before,
.portfolio-art::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.portfolio-art::before {
    top: -75px;
    right: -45px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.36);
}

.portfolio-art::after {
    bottom: -100px;
    left: -25px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.13);
}

.portfolio-art-service {
    background: linear-gradient(135deg, #FFD9C5, #FFAD7D);
}

.portfolio-art-contractor {
    background: linear-gradient(135deg, #D7DBF8, #AAB5F0);
}

.portfolio-art-business {
    background: linear-gradient(135deg, #F9E1C7, #F3C6A3);
}

.portfolio-art-window {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    max-width: 285px;
    min-height: 155px;
    padding: 22px;
    border: 1px solid rgba(20, 30, 50, 0.12);
    border-radius: 9px;
    background: #FFFFFF;
    box-shadow: 0 14px 28px rgba(20, 30, 50, 0.15);
    transform: rotate(-2deg);
    transition: transform var(--transition-normal);
}

.home-portfolio-card:hover .portfolio-art-window,
.portfolio-project-card:hover .portfolio-art-window {
    transform: rotate(0deg) scale(1.02);
}

.portfolio-art-label {
    margin-bottom: 16px;
    color: #FF823D;
    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.portfolio-art-line {
    display: block;
    width: 92%;
    height: 9px;
    margin-bottom: 8px;
    border-radius: 3px;
    background: #1A263B;
}

.portfolio-art-line.short {
    width: 65%;
    margin-bottom: 16px;
    background: #43526A;
}

.portfolio-art-button {
    display: block;
    width: 85px;
    height: 23px;
    border-radius: 4px;
    background: var(--cyan);
}

.home-portfolio-section .portfolio-art {
    min-height: 172px;
    padding: 20px 18px;
}

.home-portfolio-body,
.portfolio-project-body {
    display: flex;
    flex: 1;
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
}

.home-portfolio-body {
    padding: 20px;
}

.card-category {
    display: block;
    margin-bottom: 10px;
    color: #FF823D;
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.1em;
}

.home-portfolio-body h3,
.portfolio-project-body h3 {
    margin-bottom: 11px;
    font-size: 1.15rem;
}

.home-portfolio-body h3 {
    margin-bottom: 8px;
}

.home-portfolio-body p,
.portfolio-project-body p {
    margin-bottom: 19px;
    font-size: 0.88rem;
    line-height: 1.8;
}

.home-portfolio-body p {
    margin-bottom: 18px;
    font-size: 0.84rem;
    line-height: 1.7;
}

.home-portfolio-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    padding: 10px 13px;
    border: 1px solid var(--dark);
    border-radius: 7px;
    color: var(--white);
    background: var(--dark);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.25;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.home-portfolio-preview:hover {
    transform: translateY(-2px);
    border-color: var(--cyan);
    color: var(--dark);
    background: var(--cyan);
}

.home-portfolio-preview:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-list li {
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: #59667A;
    background: #FAFBFC;
    font-size: 0.7rem;
    font-weight: 650;
}

.portfolio-disclaimer {
    margin: 23px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.7;
}

.home-portfolio-section .portfolio-disclaimer {
    margin-top: 18px;
    font-size: 0.76rem;
}

.process-summary-section {
    background: var(--background);
}

.process-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 75px;
}

.process-summary-grid>div:first-child h2 {
    margin-bottom: 17px;
}

.process-summary-grid>div:first-child>p:not(.eyebrow) {
    margin-bottom: 22px;
    line-height: 1.9;
}

.process-summary-points {
    display: grid;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
}

.process-summary-point {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 22px;
    border-bottom: 1px solid var(--border);
}

.process-summary-point:last-child {
    border-bottom: 0;
}

.process-summary-point>span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 9px;
    color: #FF823D;
    background: var(--cyan-soft);
    font-size: 0.8rem;
    font-weight: 850;
}

.process-summary-point h3 {
    margin-bottom: 5px;
    font-size: 1rem;
}

.process-summary-point p {
    margin-bottom: 0;
    font-size: 0.84rem;
    line-height: 1.8;
}

/* =========================================================
   08. ABOUT — INTRODUCTION, PRINCIPLES AND CALLOUT
   ========================================================= */
.introduction-section {
    padding-block: 76px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDF0F5;
}

.introduction-grid,
.content-two-column {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: start;
    gap: 80px;
}

.introduction-heading h2,
.content-intro h2 {
    max-width: 540px;
    margin-bottom: 0;
    font-size: clamp(1.9rem, 3.2vw, 2.65rem);
}

.introduction-content>p {
    margin-bottom: 17px;
    font-size: 0.98rem;
    line-height: 1.9;
}

.introduction-content .text-link {
    margin-top: 8px;
}

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

.principle-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
}

.principle-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border: 1px solid #FFD9C5;
    border-radius: 10px;
    color: #FF823D;
    background: #FFF2E9;
    font-size: 0.82rem;
    font-weight: 850;
}

.principle-card h3 {
    margin-bottom: 12px;
    font-size: 1.22rem;
}

.principle-card>p {
    margin-bottom: 0;
    font-size: 0.91rem;
    line-height: 1.85;
}

.split-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 45px;
    padding: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
}

.split-callout h2 {
    margin-bottom: 16px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.split-callout>div:first-child>p:last-child {
    max-width: 700px;
    margin-bottom: 0;
    line-height: 1.9;
}

.split-callout-action {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
}

/* =========================================================
   09. SERVICES — OVERVIEW CARDS, DELIVERABLES AND NOTICE
   ========================================================= */
.services-overview-section {
    background: var(--background);
}

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

.service-overview-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 29px 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.service-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border: 1px solid #FFD9C5;
    border-radius: 12px;
    color: #FF823D;
    background: #FFF2E9;
    font-size: 0.82rem;
    font-weight: 850;
}

.service-icon svg {
    width: 23px;
    height: 23px;
}

.service-overview-card h3 {
    margin-bottom: 12px;
    font-size: 1.18rem;
    line-height: 1.4;
}

.service-overview-card>p {
    flex: 1;
    margin-bottom: 23px;
    font-size: 0.9rem;
    line-height: 1.85;
}

.card-link {
    margin-top: auto;
    font-size: 0.8rem;
}

.service-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.service-detail-card {
    padding: 29px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
}

.detail-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border: 1px solid #FFD9C5;
    border-radius: 10px;
    color: #FF823D;
    background: #FFF2E9;
    font-size: 0.82rem;
    font-weight: 850;
}

.service-detail-card h3 {
    margin-bottom: 12px;
    font-size: 1.22rem;
}

.service-detail-card>p {
    font-size: 0.91rem;
    line-height: 1.85;
}

.simple-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding-left: 19px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.notice-panel {
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid #DDE6EF;
    border-radius: var(--radius-medium);
    background: #FFFFFF;
}

.notice-panel strong {
    display: block;
    margin-bottom: 7px;
    color: var(--dark);
    font-size: 0.92rem;
}

.notice-panel p {
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.85;
}

/* =========================================================
   10. PORTFOLIO — CONCEPT ART AND DEMO PREVIEWS
   ========================================================= */
.portfolio-hero,
.legal-hero.portfolio-hero {
    position: relative;
    overflow: hidden;
    padding-block: 84px 78px;
    color: #FFFFFF;
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 130, 61, 0.12), transparent 30%),
        linear-gradient(135deg, #0B0F19 0%, #121A2A 100%);
}

.portfolio-hero::after {
    position: absolute;
    top: -90px;
    right: -40px;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(255, 130, 61, 0.16);
    border-radius: 38px;
    content: "";
    pointer-events: none;
    transform: rotate(24deg);
}

.portfolio-hero>.container {
    position: relative;
    z-index: 1;
}

.portfolio-hero>.container>.eyebrow {
    margin-bottom: 20px;
}

.portfolio-hero h1 {
    max-width: 850px;
    margin-bottom: 20px;
    color: #FFFFFF;
}

.portfolio-hero h1 span {
    color: var(--cyan);
}

.portfolio-hero .portfolio-hero-description {
    max-width: 650px;
    margin: 0;
    color: #AAB6C6;
    font-size: 15px;
    line-height: 1.9;
}

.portfolio-section {
    padding-block: var(--section-spacing);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
}

.project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 0 0 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.project-card:hover {
    border-color: #FFC9AA;
    box-shadow: var(--shadow-medium);
    transform: translateY(-3px);
}

.project-art-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.project-art-link:focus-visible,
.portfolio-preview-link:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
    border-radius: 12px;
}

.project-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 226px;
    overflow: hidden;
    margin: 0;
    padding: 22px;
    border-bottom: 1px solid var(--border);
    background: #EFF3F6;
}

.project-art::before,
.project-art::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.project-art::before {
    top: -90px;
    right: -55px;
    width: 220px;
    height: 220px;
}

.project-art::after {
    bottom: -120px;
    left: -65px;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.1);
}

.project-art-paint {
    background: linear-gradient(135deg, #E9E4DB, #D0D9D5);
}

.project-art-roof {
    background: linear-gradient(160deg, #DBEAF0, #9FC6D7);
}

.project-art-home {
    background: linear-gradient(145deg, #E5E8F0, #D3DFE4);
}

.art-browser {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 310px;
    height: 174px;
    overflow: hidden;
    border: 4px solid #FFFFFF;
    border-radius: 9px;
    background: #FFFFFF;
    box-shadow: 0 13px 32px rgba(22, 39, 58, 0.13);
    transform: translateY(8px);
}

.art-browser-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 17px;
    padding-inline: 7px;
    border-bottom: 1px solid #E5E8ED;
}

.art-browser-bar i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #CBD3DD;
}

.paint-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    height: calc(100% - 17px);
}

.paint-copy {
    padding: 15px 0 8px 12px;
    background: #F9F5EE;
}

.paint-copy i {
    display: block;
    width: 76%;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 3px;
    background: #B5B9B8;
}

.paint-copy i:first-child {
    width: 45%;
    height: 3px;
    margin-bottom: 9px;
    background: #6A9C92;
}

.paint-copy i:nth-child(2),
.paint-copy i:nth-child(3) {
    height: 8px;
    background: #233E40;
}

.paint-copy i:nth-child(2) {
    width: 86%;
}

.paint-copy i:nth-child(3) {
    width: 70%;
    margin-bottom: 11px;
}

.paint-copy i:nth-child(6) {
    width: 43%;
    height: 12px;
    margin-top: 9px;
    border-radius: 2px;
    background: #DF7857;
}

.paint-room {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #D9C3AA, #B58E70);
}

.room-window {
    position: absolute;
    top: 17px;
    left: 15px;
    width: 47%;
    height: 65%;
    border: 4px solid #F7F4EC;
    background: #A8C9C7;
    box-shadow: inset 0 0 0 2px #DAC9B1;
}

.room-frame {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 33%;
    height: 55%;
    border: 6px solid #EEE7DA;
    background: #E2B27E;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
}

.room-plant {
    position: absolute;
    top: 18px;
    right: 12px;
    width: 15px;
    height: 30px;
    border-radius: 70% 10% 70% 10%;
    background: #476F58;
    transform: rotate(-22deg);
}

.roof-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(#A7D4E5 0%, #F0D3C0 66%, #829F8A 66%);
}

.roof-sun {
    position: absolute;
    top: 20px;
    right: 35px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F7D78B;
}

.roof-house {
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 105px;
    background: #F5F3E8;
    box-shadow: 10px 0 0 rgba(50, 76, 84, 0.15);
}

.roof-shape {
    position: absolute;
    top: -44px;
    left: -7%;
    width: 114%;
    height: 54px;
    background: #364E5A;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.roof-wall {
    position: absolute;
    bottom: 0;
    left: 44%;
    width: 20%;
    height: 55px;
    background: #B9C5C5;
}

.roof-info {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 34%;
    padding: 9px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.87);
    box-shadow: 0 3px 10px rgba(20, 40, 50, 0.08);
}

.roof-info i {
    display: block;
    height: 4px;
    margin-bottom: 5px;
    border-radius: 3px;
    background: #8A9AA6;
}

.roof-info i:first-child {
    width: 78%;
    height: 6px;
    background: #1C3443;
}

.roof-info i:nth-child(3) {
    width: 68%;
}

.home-dashboard {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 35px 1fr;
    width: 90%;
    max-width: 310px;
    height: 165px;
    overflow: hidden;
    border: 4px solid #FFFFFF;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(22, 39, 58, 0.12);
    transform: translateY(8px);
}

.home-dash-sidebar {
    padding: 12px 7px;
    background: #152436;
}

.home-dash-sidebar i {
    display: block;
    height: 5px;
    margin-bottom: 9px;
    border-radius: 3px;
    background: #526477;
}

.home-dash-sidebar i:first-child {
    height: 8px;
    margin-bottom: 15px;
    background: var(--cyan);
}

.home-dash-main {
    padding: 13px 12px;
    background: #F6F8FA;
}

.dash-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 11px;
}

.dash-title i {
    width: 55px;
    height: 7px;
    border-radius: 3px;
    background: #26384B;
}

.dash-title i:last-child {
    width: 23px;
    background: #B2BDC9;
}

.dash-feature {
    height: 45px;
    margin-bottom: 9px;
    border-radius: 4px;
    background: linear-gradient(110deg, #FFE5D7, #FFC19E);
}

.dash-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.dash-cards i {
    height: 38px;
    border: 1px solid #E3E7ED;
    border-radius: 3px;
    background: #FFFFFF;
}

.art-label {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    padding: 5px 8px;
    border: 1px solid rgba(13, 24, 40, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.88);
    color: #566274;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 21px 22px 9px;
    color: #596779;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.project-number {
    color: #9AA5B4;
    font-variant-numeric: tabular-nums;
}

.project-card h3 {
    margin: 0 22px 9px;
    font-size: 1.2rem;
}

.project-card>p {
    margin: 0 22px 15px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.8;
}

.project-card .portfolio-preview-button {
    display: inline-flex;
    align-self: flex-start;
    justify-content: space-between;
    width: auto;
    min-height: 43px;
    margin: auto 22px 12px;
}

.project-card .concept-note {
    display: table;
    margin: 0 22px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: #667386;
    font-size: 0.65rem;
    font-weight: 700;
}

.portfolio-preview-link {
    position: relative;
    display: grid;
    text-decoration: none;
}

.portfolio-preview-link:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}

.portfolio-preview-overlay {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    color: #0B0F19;
    background: rgba(255, 255, 255, 0.94);
    font-size: 0.72rem;
    font-weight: 750;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.portfolio-preview-link:hover .portfolio-preview-overlay {
    background: var(--cyan);
    transform: translateY(-2px);
}

.portfolio-project-body .tag-list {
    margin-bottom: 2px;
}

.portfolio-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* =========================================================
   11. PROCESS — HERO, STEPS, PLANNING, REVIEW AND SUPPORT
   ========================================================= */
.process-page-cta-copy h2 span {
    color: var(--cyan);
}

.process-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.process-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #9EADBE;
    font-size: 0.72rem;
}

.process-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: inherit;
}

.process-hero-meta span::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--cyan);
    content: "";
}

.process-overview .section-heading {
    max-width: 760px;
}

.process-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.process-overview-card {
    position: relative;
    min-width: 0;
    min-height: 250px;
    padding: 27px 23px 25px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.process-overview-card:hover {
    border-color: rgba(255, 130, 61, 0.55);
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px);
}

.process-overview-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin-bottom: 29px;
    border: 1px solid rgba(255, 130, 61, 0.4);
    border-radius: 12px;
    background: rgba(255, 130, 61, 0.09);
    color: #C65319;
    font-size: 0.75rem;
    font-weight: 800;
}

.process-overview-card h3 {
    margin-bottom: 10px;
    font-size: 1.05rem;
    line-height: 1.4;
}

.process-overview-card p {
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.85;
}

.process-discovery {
    background: var(--background);
}

.process-discovery-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(36px, 7vw, 92px);
}

.process-discovery-copy h2 {
    max-width: 570px;
    margin-bottom: 19px;
}

.process-discovery-copy h2 span {
    color: #79869A;
}

.process-discovery-copy>p:not(.eyebrow) {
    max-width: 550px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.9;
}

.process-check-list {
    display: grid;
    gap: 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.process-check-list li {
    position: relative;
    padding-left: 32px;
    color: #39475A;
    font-size: 0.82rem;
    line-height: 1.75;
}

.process-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--dark);
    content: "✓";
    font-size: 0.7rem;
    font-weight: 900;
}

.process-planning-panel {
    padding: clamp(25px, 4vw, 38px);
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: var(--shadow-medium);
}

.process-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.process-panel-top span:first-child {
    color: #7D8998;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.process-panel-tag {
    padding: 6px 9px;
    border-radius: 5px;
    background: rgba(255, 130, 61, 0.11);
    color: #C65319;
    font-size: 0.6rem;
    font-weight: 800;
    white-space: nowrap;
}

.process-planning-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-planning-list li {
    display: grid;
    grid-template-columns: 37px minmax(0, 1fr);
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid #EDF0F4;
}

.process-planning-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.process-planning-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    background: #F0F4F8;
    color: #27364A;
    font-size: 0.95rem;
    font-weight: 800;
}

.process-planning-list strong {
    display: block;
    margin: 1px 0 4px;
    color: #1B2738;
    font-size: 0.82rem;
}

.process-planning-list p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.73rem;
    line-height: 1.8;
}

.process-support-heading {
    max-width: 750px;
}

.process-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.process-support-card {
    min-width: 0;
    padding: clamp(25px, 4vw, 38px);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
}

.process-support-card.is-featured {
    border-color: rgba(255, 130, 61, 0.48);
    background: linear-gradient(145deg, #FFF9F5 0%, #FFFFFF 70%);
}

.process-support-kicker {
    display: block;
    margin-bottom: 18px;
    color: #728095;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.process-support-card h3 {
    margin-bottom: 13px;
    font-size: 1.4rem;
}

.process-support-card>p {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.9;
}

.process-support-card ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-support-card li {
    position: relative;
    padding-left: 24px;
    color: #344256;
    font-size: 0.76rem;
    line-height: 1.8;
}

.process-support-card li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: #C65319;
    content: "✓";
    font-weight: 900;
}

.process-support-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--background);
    color: #667386;
    font-size: 0.72rem;
    line-height: 1.8;
}

.process-support-note>span {
    color: #FF823D;
    font-size: 1rem;
}

.process-support-note strong {
    color: #263448;
}

.process-page-faq {
    background: var(--background);
}

.process-page-faq .faq-layout,
.process-page-faq .faq-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 75px;
}

.process-page-faq .faq-intro h2,
.process-page-faq .faq-page-intro h2 {
    max-width: 430px;
}

.process-page-faq .faq-intro>p:not(.eyebrow),
.process-page-faq .faq-page-intro>p:not(.eyebrow) {
    max-width: 350px;
    line-height: 1.9;
}

.process-page-faq .faq-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 30px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
}

.process-page-faq .faq-contact-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #FFE8D8;
    color: #C65319;
    font-weight: 800;
}

.process-page-faq .faq-contact-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--dark);
    font-size: 0.8rem;
}

.process-page-faq .faq-contact-card p {
    margin-bottom: 9px;
    font-size: 0.73rem;
    line-height: 1.7;
}

.process-page-faq .faq-contact-card .text-link {
    font-size: 0.7rem;
}

/* Compatible with both <details> FAQ items and the older button accordion. */
.process-page-faq .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 23px 0;
    border: 0;
    background: transparent;
    color: var(--dark);
    text-align: left;
    cursor: pointer;
}

.process-page-faq .faq-question>span:first-child {
    font-size: 0.94rem;
    font-weight: 720;
    line-height: 1.6;
}

.process-page-faq .faq-toggle {
    position: relative;
    display: block;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 1px solid #D7E0E9;
    border-radius: 50%;
    background: #FFFFFF;
}

.process-page-faq .faq-toggle::before,
.process-page-faq .faq-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    border-radius: 2px;
    background: #243047;
    content: "";
    transform: translate(-50%, -50%);
    transition: transform var(--transition-fast);
}

.process-page-faq .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.process-page-faq .faq-item.is-open .faq-toggle,
.process-page-faq .faq-item[open] .faq-toggle {
    border-color: #FFD9C5;
    background: #FFF2E9;
}

.process-page-faq .faq-item.is-open .faq-toggle::after,
.process-page-faq .faq-item[open] .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.process-page-faq .faq-answer {
    display: block;
    padding: 0 44px 23px 0;
    animation: faqReveal 220ms ease both;
}

.process-page-faq .faq-answer p {
    max-width: 650px;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.9;
}

.process-page-cta {
    padding: 0 0 100px;
    background: var(--background);
}

.process-page-cta-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    padding: clamp(30px, 5vw, 54px);
    border-radius: var(--radius-large);
    background: var(--dark);
    color: #FFFFFF;
}

.process-page-cta-inner::after {
    position: absolute;
    top: -90px;
    right: 15%;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 130, 61, 0.17);
    border-radius: 34px;
    content: "";
    pointer-events: none;
    transform: rotate(24deg);
}

.process-page-cta-copy,
.process-page-cta-actions {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.process-page-cta-copy .eyebrow {
    margin-bottom: 14px;
}

.process-page-cta-copy .eyebrow::before {
    display: none;
}

.process-page-cta-copy h2 {
    max-width: 660px;
    margin-bottom: 14px;
    color: #FFFFFF;
    font-size: clamp(30px, 4vw, 43px);
}

.process-page-cta-copy p:last-child {
    max-width: 610px;
    margin-bottom: 0;
    color: #AAB6C6;
    font-size: 0.82rem;
    line-height: 1.9;
}

.process-page-cta-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
}

.process-page-cta-actions .button {
    white-space: nowrap;
}

/* =========================================================
   12. FAQ — ACCORDION AND CONTACT PROMPT
   ========================================================= */
.faq-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 75px;
}

.faq-page-intro {
    position: sticky;
    top: 120px;
}

.faq-page-intro h2 {
    margin-bottom: 17px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.faq-page-intro>p:not(.eyebrow) {
    margin-bottom: 24px;
    font-size: 0.94rem;
    line-height: 1.9;
}

.faq-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 30px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FFFFFF;
}

.faq-contact-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #FFE8D8;
    color: #C65319;
    font-weight: 800;
}

.faq-contact-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--dark);
    font-size: 0.8rem;
}

.faq-contact-card p {
    margin-bottom: 9px;
    font-size: 0.78rem;
    line-height: 1.7;
}

.faq-list {
    border-top: 1px solid #DCE3EC;
}

.faq-item {
    border-bottom: 1px solid #DCE3EC;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 0;
    color: var(--dark);
    font-size: 0.96rem;
    font-weight: 720;
    line-height: 1.6;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-toggle {
    position: relative;
    display: block;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border: 1px solid #D7E0E9;
    border-radius: 50%;
    background: #FFFFFF;
}

.faq-toggle::before,
.faq-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    border-radius: 2px;
    background: #243047;
    content: "";
    transform: translate(-50%, -50%);
    transition: transform var(--transition-fast);
}

.faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-toggle {
    border-color: #FFD9C5;
    background: #FFF2E9;
}

.faq-item[open] .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
    padding: 0 42px 23px 0;
    animation: faqReveal 220ms ease both;
}

.faq-answer p {
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.9;
}

@keyframes faqReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   13. CONTACT — DETAILS, CONTACT METHODS AND GUIDANCE
   ========================================================= */
.contact-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.contact-page-intro h2 {
    margin-bottom: 19px;
    font-size: clamp(1.9rem, 3.2vw, 2.65rem);
}

.contact-page-intro>p:not(.eyebrow) {
    margin-bottom: 27px;
    line-height: 1.9;
}

.contact-detail-list {
    display: grid;
    gap: 18px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.contact-detail-row {
    display: grid;
    gap: 4px;
}

.contact-detail-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.contact-detail-row a {
    width: fit-content;
    color: var(--dark);
    font-size: 0.92rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.contact-detail-row a:hover {
    color: #FF823D;
}

.contact-methods {
    display: grid;
    gap: 14px;
}

.contact-method-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
    box-shadow: var(--shadow-small);
    transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.contact-method-card:hover {
    border-color: #FFC9AA;
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.contact-method-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #FFD9C5;
    border-radius: 12px;
    color: #FF823D;
    background: #FFF2E9;
}

.contact-method-icon svg {
    width: 23px;
    height: 23px;
}

.contact-method-content {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.contact-method-content strong {
    color: var(--dark);
    font-size: 0.96rem;
}

.contact-method-content>span {
    color: var(--text-secondary);
    font-size: 0.81rem;
    line-height: 1.7;
}

.contact-method-arrow {
    color: #FF823D;
    font-size: 1.2rem;
}

.guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.guidance-grid p {
    margin-bottom: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: #FFFFFF;
    font-size: 0.87rem;
    line-height: 1.8;
}

.guidance-grid strong {
    color: var(--dark);
}

/* =========================================================
   14. PRIVACY / TERMS — LEGAL CONTENT
   ========================================================= */
.policy-section {
    padding-top: 65px;
}

.policy-content {
    max-width: 820px;
}

.prose>p,
.policy-content>p {
    margin-bottom: 20px;
    font-size: 0.96rem;
    line-height: 1.9;
}

.prose h2,
.policy-content h2 {
    margin-top: 38px;
    margin-bottom: 13px;
    font-size: 1.35rem;
    letter-spacing: -0.025em;
}

.prose h2:first-child,
.policy-content h2:first-of-type {
    margin-top: 0;
}

.policy-content .notice-panel {
    margin-top: 38px;
}

.terms-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.terms-summary-card {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #FFFFFF;
}

.terms-summary-value {
    display: block;
    margin-bottom: 18px;
    color: #FF823D;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.1;
}

.terms-summary-card h3 {
    margin-bottom: 12px;
}

.terms-summary-card p {
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.9;
}

/* =========================================================
   15. SHARED CALLOUTS AND ERROR PAGE
   ========================================================= */
.process-timeline {
    max-width: 920px;
    border-top: 1px solid var(--border);
}

.process-detail-step {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 23px;
    padding: 29px 4px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.process-detail-step:hover {
    background: #FAFCFE;
}

.process-detail-number {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #FFD9C5;
    border-radius: 11px;
    color: #FF823D;
    background: #FFF2E9;
    font-size: 0.85rem;
    font-weight: 850;
}

.process-detail-label {
    display: block;
    margin-bottom: 7px;
    color: #FF823D;
    font-size: 0.67rem;
    font-weight: 820;
    letter-spacing: 0.11em;
}

.process-detail-step h3 {
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.process-detail-step p {
    max-width: 730px;
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.9;
}

.home-contact-section {
    padding-block: 78px;
    background: #FFFFFF;
}

.home-contact-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
    align-items: center;
    gap: 50px;
    overflow: hidden;
    padding: 56px;
    border: 1px solid #29374C;
    border-radius: var(--radius-large);
    color: #FFFFFF;
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 130, 61, 0.11), transparent 35%),
        linear-gradient(135deg, #121B2B, #0B0F19);
    box-shadow: var(--shadow-medium);
}

.home-contact-panel::after {
    position: absolute;
    right: -160px;
    bottom: -235px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(255, 130, 61, 0.13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.home-contact-content,
.home-contact-actions {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.home-contact-content .eyebrow {
    color: var(--cyan);
}

.home-contact-content h2 {
    max-width: 650px;
    margin-bottom: 20px;
    color: #FFFFFF;
    font-size: clamp(2rem, 3.3vw, 2.8rem);
}

.home-contact-content>p:last-child {
    max-width: 610px;
    margin-bottom: 0;
    color: #ACB8CB;
    font-size: 0.95rem;
    line-height: 1.9;
}

.home-contact-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.home-contact-actions .button {
    max-width: 100%;
}

.home-contact-actions>p {
    margin-bottom: 0;
    color: #91A0B5;
    font-size: 0.77rem;
    line-height: 1.7;
}

.error-section {
    display: grid;
    min-height: 65vh;
    padding-block: 90px;
    place-items: center;
    background: var(--background);
}

.error-content {
    max-width: 760px;
    text-align: center;
}

.error-code {
    display: block;
    margin-bottom: 16px;
    color: #FF823D;
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 850;
    letter-spacing: -0.09em;
    line-height: 1;
}

.error-content .eyebrow {
    justify-content: center;
}

.error-content h1 {
    font-size: clamp(2.1rem, 5vw, 3.3rem);
}

.error-content>p:not(.eyebrow) {
    max-width: 580px;
    margin: 0 auto 28px;
    line-height: 1.9;
}

.error-content .page-hero-actions {
    justify-content: center;
}

/* =========================================================
   16. FOOTER
   Supports the supplied .footer-navigation markup and older
   .footer-links markup on existing pages.
   ========================================================= */
.site-footer {
    padding-top: 62px;
    color: #FFFFFF;
    background: #080C14;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.5fr);
    gap: 76px;
    padding-bottom: 48px;
}

.footer-brand-link,
.footer-brand-block>.brand {
    margin-bottom: 18px;
}

.footer-brand-link .brand-name,
.footer-brand-block .brand-name,
.site-footer .brand-name {
    color: #FFFFFF;
}

.footer-brand-link .brand-name span,
.footer-brand-block .brand-name span,
.site-footer .brand-name span {
    color: var(--cyan);
}

.footer-brand>p,
.footer-brand-block>p {
    max-width: 320px;
    margin-bottom: 0;
    color: #919DB1;
    font-size: 0.83rem;
    line-height: 1.9;
}

.footer-navigation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.footer-column,
.site-footer .footer-links {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.footer-column h3 {
    margin-bottom: 7px;
    color: #FFFFFF;
    font-size: 0.86rem;
    font-weight: 750;
    letter-spacing: 0;
}

.footer-column a,
.site-footer .footer-links a {
    color: #98A4B7;
    font-size: 0.78rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    transition: color var(--transition-fast);
}

.footer-column a:hover,
.site-footer .footer-links a:hover,
.site-footer .footer-links a[aria-current="page"],
.footer-legal a:hover {
    color: var(--cyan);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 76px;
    border-top: 1px solid #222B3A;
    padding-right: 50px;

    @media (max-width: 600px) {
        .footer-bottom {
            padding-bottom: 125px;
        }
    }
}

.footer-bottom>p {
    margin: 0;
    color: #8592A7;
    font-size: 0.74rem;
}

.footer-legal,
.site-footer .footer-bottom>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.footer-legal a,
.site-footer .footer-bottom a {
    color: #929EB1;
    font-size: 0.74rem;
    transition: color var(--transition-fast);
}

.footer-separator {
    color: #4E5A6C;
}

/* =========================================================
   17. RESPONSIVE LAYOUT
   ========================================================= */
@media (max-width: 1100px) {
    :root {
        --container-padding: 26px;
        --section-spacing: 82px;
    }

    .header-inner,
    .header-container {
        gap: 15px;
    }

    .brand {
        gap: 8px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .primary-nav,
    .site-nav {
        gap: 13px;
    }

    .primary-nav>a,
    .site-nav>a {
        font-size: 0.75rem;
    }

    .header-cta {
        padding-inline: 11px;
        font-size: 0.72rem;
    }

    .hero-grid:has(.hero-visual) {
        gap: 37px;
    }

    .hero-content h1,
    .page-hero-content h1,
    .process-page-hero h1 {
        font-size: clamp(2.5rem, 4.7vw, 3.6rem);
    }

    .introduction-grid,
    .content-two-column,
    .process-summary-grid {
        gap: 48px;
    }

    .home-contact-panel {
        gap: 35px;
        padding: 44px;
    }

    .footer-main {
        gap: 48px;
    }

    .project-grid {
        gap: 18px;
    }

    .project-art {
        min-height: 205px;
        padding: 16px;
    }

    .process-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-overview-card {
        min-height: 225px;
    }

    .process-discovery-grid {
        gap: 36px;
    }
}

@media (max-width: 920px) {

    .header-inner,
    .header-container {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 17px;
    }

    .nav-toggle,
    .menu-toggle {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .header-inner>.header-cta,
    .header-container>.header-cta {
        grid-column: 3;
        grid-row: 1;
    }

    .primary-nav,
    .site-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 9px 17px;
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 12px 12px;
        background: #FFFFFF;
        box-shadow: var(--shadow-medium);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-7px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    }

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

    .primary-nav>a,
    .site-nav>a {
        padding: 13px 5px;
        border-bottom: 1px solid #EDF0F4;
        color: var(--text);
        font-size: 0.9rem;
    }

    .primary-nav>a:last-child,
    .site-nav>a:last-child {
        border-bottom: none;
    }

    .primary-nav>a::after,
    .site-nav>a::after {
        display: none;
    }

    .primary-nav .nav-mobile-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #FF823D;
        font-weight: 800;
    }

    .nav-toggle.is-active span:first-child,
    .menu-toggle.is-active span:first-child {
        transform: translateY(3.5px) rotate(45deg);
    }

    .nav-toggle.is-active span:nth-child(2),
    .menu-toggle.is-active span:nth-child(2) {
        transform: translateY(-3.5px) rotate(-45deg);
    }

    .hero {
        padding-block: 70px 65px;
    }

    .hero-grid:has(.hero-visual) {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        max-width: 750px;
    }

    .hero-content h1,
    .page-hero-content h1,
    .process-page-hero h1 {
        max-width: 730px;
        font-size: clamp(2.8rem, 7.2vw, 4rem);
    }

    .hero-visual {
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .preview-website {
        min-height: 410px;
        padding-inline: 28px;
    }

    .preview-hero-content {
        padding-block: 30px 25px;
    }

    .preview-heading-line,
    .preview-heading-short {
        height: 15px;
    }

    .preview-service-grid {
        gap: 14px;
        padding-top: 24px;
    }

    .preview-service-card {
        padding: 15px;
    }

    .introduction-grid,
    .content-two-column,
    .process-summary-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .introduction-heading h2,
    .content-intro h2 {
        max-width: 650px;
    }

    .introduction-content,
    .prose {
        max-width: 730px;
    }

    .home-portfolio-grid,
    .portfolio-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-portfolio-card:last-child,
    .portfolio-project-card:last-child {
        grid-column: 1 / -1;
    }

    .service-overview-grid,
    .principles-grid,
    .guidance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-overview-card:last-child {
        grid-column: 1 / -1;
    }

    .process-summary-grid {
        align-items: start;
    }

    .faq-page-layout,
    .contact-page-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .faq-page-intro {
        position: static;
        max-width: 650px;
    }

    .home-contact-panel {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px;
    }

    .home-contact-actions {
        align-items: flex-start;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-brand>p {
        max-width: 480px;
    }

    .split-callout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

    .process-discovery-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .process-discovery-copy,
    .process-planning-panel {
        max-width: 700px;
    }

    .process-page-faq .faq-layout,
    .process-page-faq .faq-page-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .process-page-cta-inner {
        grid-template-columns: 1fr;
    }

    .process-page-cta-actions {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .site-footer .footer-main:has(.footer-links) {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .footer-brand-block {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    :root {
        --container-padding: 20px;
        --section-spacing: 62px;
    }

    body {
        font-size: 15px;
    }

    html {
        scroll-padding-top: 85px;
    }

    .header-inner,
    .header-container {
        min-height: 76px;
        gap: 8px;
    }

    .brand {
        gap: 7px;
    }

    .brand-name {
        font-size: 0.88rem;
    }

    /* Main logo remains exactly 50 × 50 px on mobile. */
    .brand-logo-image {
        width: 50px;
        height: 50px;
        min-width: 50px;
        max-width: 50px;
        min-height: 50px;
        max-height: 50px;
        flex: 0 0 50px;
    }

    .nav-toggle,
    .menu-toggle {
        width: 37px;
        height: 37px;
    }

    .header-cta {
        min-height: 38px;
        padding: 8px 9px;
        font-size: 0.66rem;
    }

    .header-cta>span {
        display: none;
    }

    .section-heading {
        margin-bottom: 31px;
    }

    .section-heading h2 {
        margin-bottom: 14px;
        font-size: clamp(1.9rem, 8vw, 2.5rem);
    }

    .section-intro {
        font-size: 0.94rem;
        line-height: 1.8;
    }

    .eyebrow {
        margin-bottom: 15px;
        font-size: 0.67rem;
    }

    .button {
        min-height: 48px;
        padding: 12px 15px;
        font-size: 0.84rem;
    }

    .hero-note {
        font-size: 0.77rem;
    }

    .preview-topbar {
        gap: 8px;
        min-height: 40px;
        padding-inline: 9px;
    }

    .preview-address {
        max-width: 145px;
        font-size: 0.54rem;
    }

    .preview-status {
        font-size: 0.45rem;
    }

    .preview-website {
        min-height: 295px;
        padding: 0 13px 17px;
    }

    .preview-nav {
        min-height: 47px;
    }

    .preview-logo {
        gap: 5px;
        font-size: 0.37rem;
    }

    .preview-logo-image {
        width: 25px;
        height: 25px;
        min-width: 25px;
        max-width: 25px;
        min-height: 25px;
        max-height: 25px;
        flex: 0 0 25px;
    }

    .preview-nav-links {
        gap: 5px;
    }

    .preview-nav-links span {
        width: 16px;
        height: 3px;
    }

    .preview-hero-content {
        padding: 19px 2px 17px;
    }

    .preview-eyebrow {
        margin-bottom: 9px;
        font-size: 0.37rem;
    }

    .preview-heading-line,
    .preview-heading-short {
        height: 9px;
        margin-bottom: 6px;
    }

    .preview-heading-short {
        margin-bottom: 11px;
    }

    .preview-text-line {
        height: 3px;
        margin-bottom: 5px;
    }

    .preview-text-short {
        margin-bottom: 13px;
    }

    .preview-button-accent {
        width: 65px;
        height: 18px;
    }

    .preview-button-outline {
        width: 51px;
        height: 18px;
    }

    .preview-service-grid {
        gap: 6px;
        padding-top: 14px;
    }

    .preview-service-card {
        padding: 8px 6px;
    }

    .preview-card-icon {
        width: 17px;
        height: 17px;
        margin-bottom: 8px;
        border-width: 4px;
        border-radius: 4px;
    }

    .preview-card-line {
        height: 4px;
        margin-bottom: 4px;
    }

    .preview-card-line-short {
        height: 3px;
    }

    .preview-caption {
        margin-top: 13px;
        font-size: 0.65rem;
    }

    .introduction-section {
        padding-block: 53px;
    }

    .introduction-grid,
    .content-two-column {
        gap: 22px;
    }

    .introduction-heading h2,
    .content-intro h2 {
        font-size: 1.95rem;
    }

    .introduction-content>p,
    .prose>p,
    .policy-content>p {
        font-size: 0.9rem;
        line-height: 1.85;
    }

    .home-portfolio-grid,
    .portfolio-page-grid,
    .service-overview-grid,
    .process-overview-grid,
    .principles-grid,
    .service-detail-grid,
    .terms-summary-grid,
    .guidance-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .home-portfolio-card:last-child,
    .portfolio-project-card:last-child,
    .service-overview-card:last-child {
        grid-column: auto;
    }

    .service-overview-card,
    .service-detail-card,
    .principle-card,
    .terms-summary-card {
        padding: 24px 22px;
    }

    .service-icon {
        margin-bottom: 19px;
    }

    .service-overview-card h3,
    .service-detail-card h3,
    .process-overview-card h3 {
        font-size: 1.12rem;
    }

    .service-overview-card>p,
    .service-detail-card>p,
    .principle-card>p {
        font-size: 0.87rem;
    }

    .portfolio-art {
        min-height: 205px;
        padding: 25px 18px;
    }

    .home-portfolio-section .portfolio-art {
        min-height: 150px;
    }

    .home-portfolio-body,
    .portfolio-project-body {
        padding: 19px;
    }

    .home-portfolio-preview {
        width: 100%;
    }

    .section-action {
        margin-top: 27px;
    }

    .section-action .button {
        width: 100%;
    }

    .process-summary-grid {
        gap: 26px;
    }

    .process-summary-point {
        padding: 18px 15px;
    }

    .process-summary-point h3 {
        font-size: 0.93rem;
    }

    .process-detail-step {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
        padding: 22px 0;
    }

    .process-detail-number {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        font-size: 0.76rem;
    }

    .process-detail-step h3 {
        font-size: 1.12rem;
    }

    .process-detail-step p {
        font-size: 0.87rem;
        line-height: 1.85;
    }

    .terms-summary-value {
        font-size: 2.2rem;
    }

    .notice-panel {
        padding: 18px;
    }

    .split-callout {
        padding: 25px 21px;
        gap: 25px;
    }

    .split-callout h2 {
        font-size: 1.9rem;
    }

    .split-callout-action .button {
        width: 100%;
    }

    .faq-page-layout {
        gap: 28px;
    }

    .faq-page-intro h2 {
        font-size: 1.95rem;
    }

    .faq-item summary {
        gap: 12px;
        padding-block: 20px;
        font-size: 0.89rem;
    }

    .faq-toggle {
        width: 25px;
        height: 25px;
    }

    .faq-answer {
        padding: 0 6px 21px 0;
    }

    .faq-answer p {
        font-size: 0.85rem;
        line-height: 1.85;
    }

    .contact-page-grid {
        gap: 31px;
    }

    .contact-page-intro h2 {
        font-size: 1.95rem;
    }

    .contact-page-intro>p:not(.eyebrow) {
        font-size: 0.89rem;
        line-height: 1.85;
    }

    .contact-method-card {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 11px;
        padding: 17px 14px;
    }

    .contact-method-icon {
        width: 42px;
        height: 42px;
    }

    .contact-method-icon svg {
        width: 20px;
        height: 20px;
    }

    .contact-method-content strong {
        font-size: 0.86rem;
    }

    .contact-method-content>span {
        font-size: 0.76rem;
    }

    .error-section {
        min-height: 60vh;
        padding-block: 65px;
    }

    .error-content h1 {
        font-size: 2rem;
    }

    .home-contact-section {
        padding-block: 51px;
    }

    .home-contact-panel {
        gap: 25px;
        padding: 29px 21px;
        border-radius: 16px;
    }

    .home-contact-content h2 {
        font-size: 1.95rem;
        line-height: 1.16;
    }

    .home-contact-content>p:last-child {
        font-size: 0.87rem;
        line-height: 1.85;
    }

    .home-contact-actions {
        width: 100%;
    }

    .home-contact-actions .button {
        width: 100%;
    }

    .site-footer {
        padding-top: 43px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 34px;
    }

    .footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 29px 18px;
    }

    .footer-column {
        gap: 10px;
    }

    .footer-column h3 {
        font-size: 0.81rem;
    }

    .footer-column a {
        font-size: 0.73rem;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding-block: 20px;
    }

    .footer-bottom>p {
        font-size: 0.69rem;
        line-height: 1.7;
    }

    .footer-legal {
        gap: 16px;
    }

    .footer-legal a {
        font-size: 0.71rem;
    }

    .legal-hero.portfolio-hero,
    .portfolio-hero {
        padding-block: 62px 52px;
    }

    .portfolio-hero h1 {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }

    .portfolio-hero::after {
        top: -50px;
        right: -95px;
        width: 200px;
        height: 200px;
    }

    .section-heading-split {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

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

    .portfolio-cta-row {
        align-items: stretch;
        flex-direction: column;
    }

    .portfolio-cta-row>a {
        width: 100%;
    }

    .process-hero-meta {
        flex-direction: column;
        gap: 11px;
    }

    .process-overview-grid {
        grid-template-columns: 1fr;
    }

    .process-overview-card {
        min-height: 0;
        padding: 23px;
    }

    .process-overview-number {
        margin-bottom: 20px;
    }

    .process-planning-panel,
    .process-support-card {
        padding: 23px;
    }

    .process-panel-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .process-page-faq .faq-question {
        gap: 14px;
        padding-block: 19px;
    }

    .process-page-faq .faq-question>span:first-child {
        font-size: 0.86rem;
    }

    .process-page-faq .faq-answer p {
        padding-right: 0;
    }

    .process-page-cta {
        padding-bottom: 65px;
    }

    .process-page-cta-inner {
        gap: 24px;
        padding: 27px 22px;
        border-radius: 17px;
    }

    .process-page-cta-copy h2 {
        font-size: 1.95rem;
    }

    .process-page-cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .process-page-cta-actions .button {
        width: 100%;
        white-space: normal;
    }

    .site-footer .footer-main:has(.footer-links) {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-brand-block {
        grid-column: auto;
    }
}

@media (max-width: 360px) {
    :root {
        --container-padding: 16px;
    }

    .header-inner,
    .header-container {
        gap: 5px;
    }

    .brand {
        gap: 5px;
    }

    .brand-logo-image {
        width: 50px;
        height: 50px;
        min-width: 50px;
        max-width: 50px;
        min-height: 50px;
        max-height: 50px;
        flex: 0 0 50px;
    }

    .brand-name {
        font-size: 0.78rem;
    }

    .nav-toggle,
    .menu-toggle {
        width: 33px;
        height: 33px;
    }

    .header-cta {
        padding-inline: 7px;
        font-size: 0.6rem;
    }

    .preview-address {
        max-width: 102px;
    }

    .contact-method-card {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 9px;
        padding-inline: 11px;
    }

    .contact-method-icon {
        width: 36px;
        height: 36px;
    }

    .footer-navigation {
        gap: 25px 13px;
    }
}

/* =========================================================
   18. VIEWPORT REVEAL + REDUCED-MOTION ACCESSIBILITY
   Main content is revealed by main.js when it enters the viewport.
   Keep hero entrance animations separate: they run on page load.
   ========================================================= */

/* Initial state: JS adds .lb-reveal only when IntersectionObserver is available. */
.lb-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 700ms cubic-bezier(.22, .68, .25, 1),
        transform 700ms cubic-bezier(.22, .68, .25, 1);
    transition-delay: var(--lb-reveal-delay, 0ms);
}

/* Visible state after the element enters the viewport. */
.lb-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Optional short stagger for related blocks. */
.lb-reveal-delay-1 {
    --lb-reveal-delay: 70ms;
}

.lb-reveal-delay-2 {
    --lb-reveal-delay: 140ms;
}

.lb-reveal-delay-3 {
    --lb-reveal-delay: 210ms;
}

@media (max-width: 600px) {
    .lb-reveal {
        transform: translate3d(0, 14px, 0);
        transition-duration: 600ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .lb-reveal,
    .lb-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-with-banner .hero-content>*,
    .page-hero .page-hero-content>*,
    .process-page-hero>.container>* {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   19. LAZY RENDERING FOR ALL SECTIONS EXCEPT SECTION 1
   Applies to all pages using this stylesheet.
   CSS skips off-screen rendering; main.js adds viewport reveal.
   ========================================================= */

/* Defer rendering of sections after the first section in <main>.
   This is rendering optimization, not a substitute for img loading="lazy". */
@supports (content-visibility: auto) {
    main>section:not(:first-of-type) {
        content-visibility: auto;
        contain-intrinsic-size: auto 650px;
    }
}

/* If a section is revealed by main.js, use the existing .lb-reveal rules. */
main>section:not(:first-of-type).lb-reveal {
    will-change: opacity, transform;
}

/* Do not preserve extra rendering hints after the animation finishes. */
main>section:not(:first-of-type).lb-reveal.is-visible {
    will-change: auto;
}

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

    main>section:not(:first-of-type).lb-reveal,
    main>section:not(:first-of-type).lb-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}

/* =========================================================
   20. RESPONSIVE REFINEMENTS — ANDROID, iOS, TABLETS & DESKTOP
   Added after the existing styles to preserve the current design.
   ========================================================= */

@supports (overflow: clip) {
    body {
        overflow-x: clip;
    }
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

.container,
.header-inner,
.header-container,
.footer-main,
.footer-bottom,
main,
main>*,
.section-heading,
.policy-content,
.faq-page-layout,
.contact-page-grid,
.process-discovery-grid,
.process-page-cta-inner {
    min-width: 0;
}

h1,
h2,
h3,
h4,
p,
li,
summary,
.footer-column a,
.footer-legal a,
.contact-detail-row a {
    overflow-wrap: anywhere;
    word-break: normal;
}

button,
.button,
input,
textarea,
select,
summary,
a {
    touch-action: manipulation;
}

button,
.button,
input,
textarea,
select {
    max-width: 100%;
}

button,
.button {
    -webkit-appearance: none;
    appearance: none;
}

/* Keep anchor targets visible below the sticky header on phones. */
[id] {
    scroll-margin-top: 96px;
}

/* Never allow grids or long URLs to force the viewport wider. */
.home-portfolio-grid,
.portfolio-page-grid,
.portfolio-project-grid,
.project-grid,
.service-overview-grid,
.service-detail-grid,
.principles-grid,
.guidance-grid,
.process-overview-grid,
.process-support-grid,
.terms-summary-grid,
.process-summary-grid,
.process-discovery-grid,
.contact-page-grid,
.faq-page-layout,
.introduction-grid,
.content-two-column,
.footer-main,
.footer-navigation {
    min-width: 0;
}

.home-portfolio-card,
.portfolio-project-card,
.project-card,
.service-overview-card,
.service-detail-card,
.principle-card,
.process-overview-card,
.process-support-card,
.terms-summary-card,
.contact-method-card,
.faq-contact-card,
.notice-panel,
.split-callout,
.home-contact-panel,
.process-planning-panel,
.process-page-cta-inner {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Header touch targets are sized in the original navigation rules above. */

@media (max-width: 920px) {

    .primary-nav,
    .site-nav {
        z-index: 1002;
        max-height: calc(100vh - 88px - var(--lb-safe-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-right: max(17px, var(--lb-safe-right));
        padding-bottom: calc(10px + var(--lb-safe-bottom));
        padding-left: max(17px, var(--lb-safe-left));
        scrollbar-gutter: stable;
    }

    .primary-nav>a,
    .site-nav>a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .primary-nav .nav-mobile-cta,
    .site-nav .nav-mobile-cta {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 920px) {

        .primary-nav,
        .site-nav {
            max-height: calc(100dvh - 88px - var(--lb-safe-bottom));
        }
    }
}

/* Tablet landscape and smaller laptops. */
@media (min-width: 921px) and (max-width: 1100px) {
    :root {
        --container-padding: 22px;
        --section-spacing: 76px;
    }

    .header-inner,
    .header-container {
        gap: 12px;
    }

    .brand-name {
        font-size: 0.95rem;
    }

    .primary-nav,
    .site-nav {
        gap: 11px;
    }

    .primary-nav>a,
    .site-nav>a {
        font-size: 0.72rem;
    }

    .header-cta {
        padding-inline: 10px;
        font-size: 0.7rem;
    }
}

/* Portrait tablets and large phones. */
@media (max-width: 768px) {
    :root {
        --container-padding: 22px;
        --section-spacing: 68px;
    }

    .container {
        width: calc(100% - 2 * var(--container-padding));
    }

    .section-heading-split {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .section-heading-split .section-intro {
        max-width: 100%;
    }

    .process-support-grid,
    .process-summary-grid,
    .process-discovery-grid,
    .contact-page-grid,
    .faq-page-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .process-page-faq .faq-layout,
    .process-page-faq .faq-page-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-page-intro {
        position: static;
    }

    .project-card,
    .portfolio-project-card,
    .home-portfolio-card,
    .service-overview-card {
        height: auto;
    }

    .page-hero>.hero-banner-image,
    .hero-with-banner>.hero-banner-image,
    .process-page-hero>.hero-banner-image {
        object-position: 64% center;
    }

    .hero-with-banner,
    .page-hero {
        min-height: 0;
        padding-block: clamp(3rem, 7.5vw, 4rem);
    }

    .page-hero.page-hero-compact {
        min-height: 0;
        padding-block: clamp(2.5rem, 6.5vw, 3.25rem);
    }

    .process-page-hero {
        padding-top: clamp(3.5rem, 8.5vw, 4.5rem);
        padding-bottom: clamp(2.75rem, 7vw, 3.5rem);
    }

    .hero-content h1,
    .page-hero-content h1,
    .process-page-hero h1 {
        font-size: clamp(2.1rem, 6.3vw, 3.4rem);
        line-height: 1.12;
    }

    .hero-actions,
    .page-hero-actions,
    .process-hero-actions {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .home-contact-panel,
    .process-page-cta-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-main {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile phones: Android Chrome, iOS Safari and compact devices. */
@media (max-width: 600px) {
    :root {
        --container-padding: 18px;
        --section-spacing: 56px;
    }

    html {
        scroll-padding-top: 82px;
    }

    [id] {
        scroll-margin-top: 82px;
    }

    body {
        font-size: 15px;
        line-height: 1.7;
    }

    .container {
        width: calc(100% - 2 * var(--container-padding));
    }

    .site-header {
        padding-top: var(--lb-safe-top);
    }

    .header-inner,
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 70px;
    }

    .brand {
        min-width: 0;
        gap: 7px;
        flex: 1 1 auto;
    }

    .brand-name {
        min-width: 0;
        font-size: clamp(0.78rem, 3.3vw, 0.94rem);
        letter-spacing: -0.045em;
        white-space: nowrap;
    }

    /* Preserve the requested exact 50 x 50 px logo size. */
    .brand-logo-image {
        width: 50px;
        height: 50px;
        min-width: 50px;
        max-width: 50px;
        min-height: 50px;
        max-height: 50px;
        flex: 0 0 50px;
    }

    .nav-toggle,
    .menu-toggle {
        display: flex;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin-left: auto;
        flex: 0 0 44px;
    }

    /* The CTA remains accessible inside the mobile navigation. */
    .header-inner>.header-cta,
    .header-container>.header-cta {
        display: none;
    }

    .primary-nav,
    .site-nav {
        top: 100%;
        right: calc(-1 * var(--lb-safe-right));
        left: calc(-1 * var(--lb-safe-left));
        gap: 0;
        max-height: calc(100vh - 70px - var(--lb-safe-bottom));
        padding: 8px max(18px, var(--lb-safe-right)) calc(10px + var(--lb-safe-bottom)) max(18px, var(--lb-safe-left));
        border-right: 0;
        border-left: 0;
        border-radius: 0 0 12px 12px;
    }

    .primary-nav>a,
    .site-nav>a {
        min-height: 46px;
        padding: 12px 4px;
        font-size: 0.91rem;
    }

    .primary-nav .nav-mobile-cta,
    .site-nav .nav-mobile-cta {
        min-height: 48px;
        margin-top: 5px;
        padding-inline: 12px;
        border: 1px solid rgba(255, 130, 61, 0.35);
        border-radius: 8px;
        color: var(--dark);
        background: var(--cyan-soft);
    }

    .hero,
    .hero-with-banner {
        min-height: 0;
        padding-block: 54px 48px;
    }

    .hero-grid,
    .hero-grid:has(.hero-visual) {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .hero-content,
    .page-hero-content {
        min-width: 0;
        max-width: 100%;
    }

    .hero-actions,
    .page-hero-actions,
    .process-hero-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .hero-actions .button,
    .page-hero-actions .button,
    .process-hero-actions .button {
        width: 100%;
        max-width: 100%;
    }

    .hero-notes {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .page-hero {
        min-height: 0;
        padding-block: 53px 45px;
    }

    .process-page-hero {
        padding: clamp(2.8rem, 9vw, 3.6rem) 0 clamp(2.5rem, 8vw, 3.2rem);
    }

    .page-hero-compact {
        padding-block: 43px 35px;
    }

    .hero-content h1,
    .page-hero-content h1,
    .portfolio-hero h1,
    .process-page-hero h1 {
        margin-bottom: 18px;
        font-size: clamp(2.1rem, 9vw, 3rem);
        line-height: 1.14;
        letter-spacing: -0.045em;
        overflow-wrap: anywhere;
    }

    .hero-description,
    .hero-description-secondary,
    .page-hero-content>p:not(.eyebrow),
    .process-page-hero .process-intro {
        max-width: 100%;
        padding: 0.68rem 0.9rem;
        font-size: 0.92rem;
        line-height: 1.8;
    }

    .section-heading h2,
    .faq-page-intro h2,
    .contact-page-intro h2,
    .introduction-heading h2,
    .content-intro h2 {
        font-size: clamp(1.75rem, 7.5vw, 2.25rem);
        line-height: 1.22;
    }

    .section-intro,
    .introduction-content>p,
    .policy-content>p,
    .prose>p {
        font-size: 0.91rem;
        line-height: 1.82;
    }

    .button {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 0.88rem;
    }

    /* Contact cards wrap instead of overflowing on narrow screens. */
    .contact-method-card {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 16px 13px;
    }

    .contact-method-icon {
        width: 42px;
        height: 42px;
    }

    .contact-method-content {
        overflow-wrap: anywhere;
    }

    .contact-method-content strong {
        font-size: 0.88rem;
    }

    .contact-method-content>span {
        font-size: 0.76rem;
    }

    /* FAQ summaries are comfortable to tap and wrap naturally. */
    .faq-item summary,
    .process-page-faq .faq-question {
        min-height: 58px;
        gap: 12px;
        padding-block: 17px;
        font-size: 0.9rem;
    }

    .faq-toggle {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    .faq-answer,
    .process-page-faq .faq-answer {
        padding-right: 0;
        padding-bottom: 20px;
    }

    .faq-answer p,
    .process-page-faq .faq-answer p {
        font-size: 0.88rem;
        line-height: 1.82;
    }

    .faq-contact-card {
        padding: 16px;
    }

    /* One-column cards prevent tight columns on phones. */
    .home-portfolio-grid,
    .portfolio-page-grid,
    .project-grid,
    .service-overview-grid,
    .service-detail-grid,
    .principles-grid,
    .guidance-grid,
    .process-overview-grid,
    .process-support-grid,
    .terms-summary-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .home-portfolio-card:last-child,
    .portfolio-project-card:last-child,
    .service-overview-card:last-child {
        grid-column: auto;
    }

    .home-portfolio-body,
    .portfolio-project-body,
    .service-overview-card,
    .service-detail-card,
    .principle-card,
    .process-support-card,
    .terms-summary-card {
        padding: 21px 18px;
    }

    .portfolio-art,
    .project-art {
        min-height: 185px;
    }

    .home-portfolio-section .portfolio-art {
        min-height: 155px;
    }

    .home-portfolio-preview {
        width: 100%;
        min-height: 44px;
    }

    .project-card .portfolio-preview-button {
        min-height: 44px;
        max-width: calc(100% - 36px);
        white-space: normal;
    }

    .project-card h3,
    .project-card>p {
        margin-right: 18px;
        margin-left: 18px;
    }

    .project-meta {
        margin-right: 18px;
        margin-left: 18px;
        flex-wrap: wrap;
    }

    .process-overview-card {
        min-height: 0;
        padding: 22px 19px;
    }

    .process-overview-number {
        margin-bottom: 18px;
    }

    .process-planning-panel {
        padding: 20px 17px;
    }

    .process-planning-list li {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 11px;
    }

    .process-page-cta {
        padding-bottom: 56px;
    }

    .process-page-cta-inner,
    .home-contact-panel,
    .split-callout {
        grid-template-columns: minmax(0, 1fr);
        gap: 23px;
        padding: 25px 19px;
        border-radius: 16px;
    }

    .process-page-cta-actions,
    .split-callout-action,
    .home-contact-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .process-page-cta-actions .button,
    .split-callout-action .button,
    .home-contact-actions .button {
        width: 100%;
        max-width: 100%;
        white-space: normal;
    }

    .footer-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding-bottom: 32px;
    }

    .footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding-top: 18px;
        padding-bottom: calc(18px + var(--lb-safe-bottom));
    }

    .footer-bottom>p {
        font-size: 0.72rem;
        line-height: 1.7;
    }

    .footer-legal,
    .site-footer .footer-bottom>div {
        gap: 14px 18px;
    }

    .footer-legal a,
    .site-footer .footer-bottom a {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        font-size: 0.74rem;
    }

    /* Avoid permanent hover effects on touch devices. */
    .home-portfolio-card:hover,
    .portfolio-project-card:hover,
    .project-card:hover,
    .service-overview-card:hover,
    .contact-method-card:hover,
    .process-overview-card:hover {
        transform: none;
    }
}

/* Very small phones, including older iPhone SE-sized viewports. */
@media (max-width: 380px) {
    :root {
        --container-padding: 14px;
        --section-spacing: 48px;
    }

    .container {
        width: calc(100% - 2 * var(--container-padding));
    }

    .header-inner,
    .header-container {
        gap: 7px;
    }

    .brand {
        gap: 5px;
    }

    .brand-name {
        font-size: 0.77rem;
        letter-spacing: -0.04em;
    }

    .nav-toggle,
    .menu-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        flex-basis: 44px;
    }

    .hero-content h1,
    .page-hero-content h1,
    .portfolio-hero h1,
    .process-page-hero h1 {
        font-size: clamp(2rem, 9.2vw, 2.45rem);
    }

    .preview-address {
        max-width: 105px;
    }

    .contact-method-card {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 9px;
        padding-inline: 10px;
    }

    .contact-method-icon {
        width: 36px;
        height: 36px;
    }

    .footer-navigation {
        gap: 23px 12px;
    }
}

/* Landscape phones: keep the expanded navigation scrollable. */
@media (max-width: 920px) and (max-height: 520px) {

    .primary-nav,
    .site-nav {
        max-height: calc(100vh - 68px - var(--lb-safe-bottom));
        padding-top: 5px;
        padding-bottom: calc(6px + var(--lb-safe-bottom));
    }

    .primary-nav>a,
    .site-nav>a {
        min-height: 40px;
        padding-block: 8px;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 920px) and (max-height: 520px) {

        .primary-nav,
        .site-nav {
            max-height: calc(100dvh - 68px - var(--lb-safe-bottom));
        }
    }
}

/* Do not animate hover-only transforms on coarse pointer devices. */
@media (hover: none),
(pointer: coarse) {

    .button-primary:hover,
    .button-secondary:hover,
    .home-portfolio-card:hover,
    .portfolio-project-card:hover,
    .project-card:hover,
    .service-overview-card:hover,
    .contact-method-card:hover,
    .process-overview-card:hover {
        transform: none;
    }
}

/* Prevent iOS Safari from zooming form fields on focus. */
@media (max-width: 600px) {

    input,
    textarea,
    select,
    button,
    .button {
        font-size: max(16px, 1em);
    }

    input,
    textarea,
    select {
        width: 100%;
        min-height: 44px;
    }

    textarea {
        min-height: 120px;
        resize: vertical;
    }
}

/* Ensure content remains visible and readable if animations are disabled. */
@media (prefers-reduced-motion: reduce) {

    .primary-nav,
    .site-nav {
        transition: none !important;
    }

    .lb-reveal,
    .lb-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =========================================================
   MOBILE BANNER FIX — ANDROID & IPHONE
   Add this code at the END of style.css
   ========================================================= */

/* Tablet and mobile devices */
@media (max-width: 768px) {

    .hero-with-banner,
    .page-hero,
    .process-page-hero {
        position: relative;
        min-height: 420px;
        overflow: hidden;
    }

    .hero-with-banner>.hero-banner-image,
    .page-hero>.hero-banner-image,
    .process-page-hero>.hero-banner-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;

        /* Fill the banner without stretching the image */
        object-fit: cover;

        /* Keep the object on the right visible */
        object-position: 78% center;
    }
}

/* Smaller Android phones and iPhones */
@media (max-width: 480px) {

    .hero-with-banner,
    .page-hero,
    .process-page-hero {
        min-height: 390px;
    }

    .hero-with-banner>.hero-banner-image,
    .page-hero>.hero-banner-image,
    .process-page-hero>.hero-banner-image {
        object-fit: cover;
        object-position: 84% center;
    }
}

/* =========================================================
   LanderBudget package, proof-strip and contact form components
   ========================================================= */
.proof-strip {
    padding: 25px 0;
    border-block: 2px solid var(--border);
    background: #fff;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.proof-item {
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 4px 18px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.proof-item:last-child {
    border-right: 0;
}

.proof-item strong {
    color: var(--dark);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.05em;
}

.proof-item span {
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 650;
}

.portfolio-teaser {
    padding-block: 55px;
    background: var(--background);
}

.portfolio-teaser-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.portfolio-teaser-inner>div {
    max-width: 700px;
}

.portfolio-teaser-inner h2 {
    max-width: 650px;
    margin-bottom: 12px;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.portfolio-teaser-inner p:not(.eyebrow) {
    margin-bottom: 0;
    color: var(--text-secondary);
    line-height: 1.85;
}

.pricing-overview-section {
    background: #fff;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    max-width: 1000px;
    margin-inline: auto;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: #fff;
    box-shadow: var(--shadow-small);
}

.pricing-card-featured {
    border-color: #FFB48C;
    box-shadow: 0 15px 40px rgba(198, 83, 25, .09);
}

.pricing-card-top {
    margin-bottom: 18px;
}

.pricing-card-top .eyebrow {
    margin-bottom: 10px;
    color: #C65319;
}

.pricing-card h3 {
    margin-bottom: 8px;
    font-size: clamp(1.25rem, 2.3vw, 1.6rem);
}

.pricing-price {
    margin: 0 0 10px;
    color: var(--dark);
    font-size: clamp(2.4rem, 4vw, 3.1rem);
    font-weight: 850;
    letter-spacing: -.06em;
    line-height: 1.1;
}

.pricing-summary {
    min-height: 50px;
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: .91rem;
    line-height: 1.75;
}

.check-list {
    display: grid;
    gap: 11px;
    margin: 12px 0 26px;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 28px;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.7;
}

.check-list li::before {
    position: absolute;
    top: .1em;
    left: 0;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    color: #243047;
    background: #ff823d;
    font-size: .75rem;
    font-weight: 850;
    content: "✓";
}

.pricing-button {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

.pricing-footnote {
    max-width: 900px;
    margin: 28px auto 0;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.8;
    text-align: center;
}

.package-detail-section {
    background: #fff;
}

.package-detail-section.soft-section {
    background: var(--background);
}

.package-detail {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(35px, 6vw, 78px);
}

.package-detail-heading {
    position: sticky;
    top: 110px;
}

.package-detail-heading .eyebrow {
    color: #C65319;
}

.package-detail-heading h2 {
    max-width: 480px;
    margin-bottom: 15px;
    font-size: clamp(2rem, 3.8vw, 3rem);
}

.package-detail-description {
    max-width: 460px;
    color: var(--text-secondary);
    line-height: 1.85;
}

.package-detail-heading .pricing-price {
    margin: 22px 0;
}

.package-detail-heading .button {
    margin-top: 5px;
}

.package-detail-content {
    padding: clamp(24px, 3.2vw, 38px);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: #fff;
    box-shadow: var(--shadow-small);
}

.package-detail-content h3 {
    margin-bottom: 14px;
    font-size: 1.25rem;
}

.package-detail-content .check-list {
    margin-top: 0;
}

.package-detail-note {
    margin: 14px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: .85rem;
    line-height: 1.8;
}

.website-concepts-section {
    background: #fff;
}

.website-concepts-section .home-portfolio-grid {
    margin-top: 28px;
}

.contact-inquiry-section {
    background: var(--background);
}

.contact-form-layout {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: clamp(30px, 5vw, 68px);
}

.contact-form-intro {
    position: sticky;
    top: 110px;
}

.contact-form-intro h2 {
    margin-bottom: 15px;
    font-size: clamp(1.9rem, 3.3vw, 2.65rem);
}

.contact-form-intro>p:not(.eyebrow) {
    color: var(--text-secondary);
    line-height: 1.9;
}

.contact-form-assurance {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: #fff;
    font-size: .83rem;
}

.contact-form-card {
    min-width: 0;
    padding: clamp(22px, 3.2vw, 38px);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: #fff;
    box-shadow: var(--shadow-medium);
}

.contact-inquiry-form {
    display: grid;
    gap: 20px;
}

.contact-form-field {
    display: grid;
    gap: 8px;
}

.contact-form-field label {
    color: var(--dark);
    font-size: .88rem;
    font-weight: 750;
}

.contact-form-field label span {
    color: #C65319;
}

.contact-form-field input,
.contact-form-field textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 13px 15px;
    border: 1px solid #D8E0EA;
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: #fff;
    font: inherit;
    font-size: .93rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form-field textarea {
    min-height: 210px;
    resize: vertical;
    line-height: 1.7;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
    border-color: #FF823D;
    box-shadow: 0 0 0 3px rgba(255, 130, 61, .15);
}

.contact-form-field [aria-invalid="true"] {
    border-color: #C83232;
}

.form-help {
    margin: 0;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.7;
}

.form-help a {
    color: #B84C18;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    border: 0;
    cursor: pointer;
}

.contact-submit:disabled {
    opacity: .7;
    cursor: wait;
}

.contact-form-status {
    display: none;
    margin: 0;
    padding: 13px 15px;
    border-radius: 10px;
    font-size: .87rem;
    line-height: 1.7;
}

.contact-form-status.is-loading,
.contact-form-status.is-success,
.contact-form-status.is-error,
.contact-form-status.is-info {
    display: block;
}

.contact-form-status.is-loading {
    color: #34415A;
    background: #EEF3F8;
}

.contact-form-status.is-info {
    display: block;
    color: #34415A;
    background: #EEF3F8;
}

.contact-form-status.is-success {
    color: #126145;
    background: #E5F7EF;
}

.contact-form-status.is-error {
    color: #9F2525;
    background: #FFF0F0;
}

.contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.policy-updated {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: .83rem;
}

@media (max-width: 800px) {
    .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }

    .proof-item:nth-child(2) {
        border-right: 0;
    }

    .proof-item:nth-child(3),
    .proof-item:nth-child(4) {
        border-top: 1px solid var(--border);
        padding-top: 18px;
    }

    .portfolio-teaser-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .package-detail,
    .contact-form-layout {
        grid-template-columns: 1fr;
    }

    .package-detail-heading,
    .contact-form-intro {
        position: static;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
    }
}

@media (max-width: 480px) {
    .proof-item {
        padding-inline: 8px;
    }

    .proof-item span {
        font-size: .74rem;
    }

    .contact-form-card,
    .package-detail-content {
        padding: 20px;
    }

    .contact-form-field textarea {
        min-height: 190px;
    }
}

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

    .proof-item,
    .pricing-card,
    .package-detail-content {
        transition: none;
    }
}