:root {
    --section-space:clamp(24px,3vw,38px);
    /* Keep the site palette cool: slate neutrals, steel blue and ice accents. */
    --color-surface:#eef1f4;
    --color-ink:#171b20;
    --color-accent:#376180;
    --color-accent-hover:#254c6c;
    --color-accent-on-dark:#91bad8;
    --color-accent-ice:#b8d5e8;
    --color-action-accent:var(--color-accent);
    --color-focus:#477fa7;
    --font-display: Outfit, Arial, sans-serif;
    --font-text: Manrope, Arial, sans-serif;
}

.site-shell :is(h1,h2,h3),
.wordmark,
.gallery-caption p,
.mission-statement,
.intro-title {
    font-family:var(--font-display);
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:95px}

body {
    margin:0;
    background:#f8fafc;
    color:#171b20}

.site-shell,.intro-page {
    box-sizing:border-box;
    font-family:var(--font-text);
    font-size:15px;
    line-height:1.65}

.site-shell *,.intro-page * {
    box-sizing:border-box}

.site-shell :is(h1,h2,h3,p,figure),.intro-page :is(h1,p) {
    margin:0}

.site-shell a,.intro-page a {
    color:inherit;
    text-decoration:none}

.site-shell button {
    font:inherit}

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

.site-shell :is(a,button,summary):focus-visible,.intro-page a:focus-visible {
    outline:3px solid var(--color-focus);
    outline-offset:6px}

.page-pad {
    padding-left:5%;
    padding-right:5%}

.eyebrow {
    font-size:10px;
    font-weight:600;
    letter-spacing:.15em;
    line-height:1.7}

.light-word {
    font-weight:250}

.site-header {
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 5%;
    background:#171b20;
    color:#fff;
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid #373f48}

.wordmark {
    font-size:16px;
    font-weight:850;
    letter-spacing:-.045em;
    line-height:1.05}

.brand-light {
    font-weight:350}

.brand-house {
    font-size:24px;
    letter-spacing:.04em}

.brand-dot {
    color:var(--color-accent-on-dark)}

.desktop-nav {
    gap:clamp(18px,2vw,40px);
}

.desktop-nav a,.header-contact {
    font-size:clamp(15px,1.05vw,18px);
    font-weight:550;
    letter-spacing:.01em;
    white-space:nowrap;
    min-height:44px;
}

.desktop-nav a {
    position:relative;
    display:flex;
    align-items:center;
}

.desktop-nav a:hover {
    color:var(--color-accent-ice)}

.header-contact {
    border-bottom:1px solid #687580;
    padding-bottom:5px}

.header-contact span {
    font-size:21px}

.skip-link {
    position:fixed;
    left:20px;
    top:-100px;
    z-index:100;
    background:white;
    padding:10px 20px}

.skip-link:focus {
    top:10px}

.mobile-menu summary {
    cursor:pointer;
    font-size:16px;
    font-weight:550;
    min-height:44px;
    padding:9px 0;
    list-style:none;
}

.mobile-menu summary span {
    margin-left:10px;
}

.mobile-menu summary::-webkit-details-marker {
    display:none}

.mobile-menu nav {
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#171b20;
    padding:15px 5% 25px;
    border-bottom:1px solid #505a64}

.mobile-menu nav a {
    display:block;
    padding:12px 0;
    font-size:18px;
    font-weight:500;
    min-height:44px;
}

.home-opening {
    padding-block:var(--section-space);
    }

.status-square {
    width:7px;
    height:7px;
    background:var(--color-accent);
    display:inline-block}

.opening-grid {
    margin-top:22px}

.home-opening h1 {
    font-size:clamp(68px,8.4vw,132px);
    font-weight:850;
    line-height:.88;
    letter-spacing:-.045em}

.opening-copy {
    padding-bottom:5px;
    max-width:580px}

.opening-copy p {
    font-family:var(--font-text);
    font-size:clamp(24px,2.2vw,36px);
    line-height:1.22;
    font-weight:400}

.opening-copy strong {
    display:block;
    text-wrap:balance;
    font-weight:650}

.action-link {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    font-size:11px;
    font-weight:600;
    border-bottom:1px solid #a5aeb8;
    padding:15px 0 8px;
    transition:color .2s}

.action-link span {
    font-size:23px;
    line-height:1}

.action-link:hover {
    color:var(--color-action-accent)}

.opening-copy .action-link {
    margin-top:20px;
    font-size:clamp(13px,1vw,15px);
    min-height:44px;
    gap:32px}

.gallery-image {
    height:clamp(340px,34vw,540px);
    position:relative;
    background:#323c40;
    overflow:hidden}

.gallery-image>img {
    width:100%;
    height:100%;
    object-fit:cover;
    animation:photo-reveal .65s ease-out}

.gallery-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 65%)}

.gallery-caption {
    position:absolute;
    left:5%;
    bottom:35px;
    color:white;
    max-width:80%}

.gallery-caption p {
    font-weight:500;
    font-size:clamp(22px,2.6vw,39px);
    letter-spacing:-.025em;
    line-height:1.15;
    margin:9px 0 12px}

.gallery-caption a {
    font-size:11px;
    border-bottom:1px solid #b5bec7;
    padding-bottom:5px}

.gallery-caption a span {
    margin-left:20px}

.gallery-bar {
    min-height:74px;
    border-bottom:1px solid #d0d8e0;
    background:#edf1f5}

.gallery-label {
    font-size:9px;
    font-weight:600;
    letter-spacing:.1em}

.gallery button {
    border:1px solid #c2cbd4;
    background:transparent;
    width:37px;
    height:37px;
    font-size:22px;
    cursor:pointer;
    transition:background .2s}

.gallery .slideshow-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center}

.gallery button:hover {
    background:#171b20;
    color:white}

.slide-count {
    font-size:12px;
    font-weight:600;
    white-space:nowrap}

.slide-count span {
    color:#6f7984;
    font-weight:400;
    margin-left:5px}

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

.section-aside {
    font-size:11px;
    font-weight:500;
    margin-top:25px!important;
    line-height:1.8;
    color:#606b76}

.site-shell h2 {
    font-size:clamp(32px,3.7vw,58px);
    line-height:1.1;
    letter-spacing:-.035em;
    font-weight:750}

.vision-copy {
    margin-top:30px}

#visione .vision-copy {
    margin-top:24px}

.vision-copy p,.section-heading>p {
    font-family:var(--font-text);
    font-size:16px;
    font-weight:450;
    line-height:1.85;
    color:#525c66}

.universe-section {
    padding-block:var(--section-space);
    background:#fff;
    border-top:1px solid #d3dae2}

.section-heading {
    margin-bottom:43px}

.section-heading h2 {
    margin-top:20px}

.section-heading>p {
    font-size:13px;
    line-height:1.7;
    max-width:350px}

.universe-heading>p {
    font-size:clamp(15px,1.2vw,18px);
    line-height:1.6;
    max-width:380px;
    color:#525c66;
}

.universe-heading .eyebrow {
    color:var(--color-accent);
}

.universe-heading h2 {
    font-size:clamp(34px,3.6vw,56px);
    font-weight:600;
}

.universe-heading-dot {
    color:var(--color-accent);
}

.universe-heading {
    margin-bottom:38px;
}

.site-shell .universe-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    column-gap:clamp(24px,2vw,40px);
    row-gap:0;
    list-style:none;
    margin:0;
    padding:0;
}

.universe-grid>li {
    min-width:0;
    display:flex;
}

.site-shell .universe-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    padding:20px 0 22px;
    border-top:1px solid #bfcbd5;
    color:var(--color-ink);
    text-decoration:none;
    box-shadow:inset 0 3px 0 transparent;
    transition:border-color .2s ease,box-shadow .2s ease;
}

.universe-card-meta {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:34px;
}

.universe-card-icon {
    display:flex;
    flex:0 0 32px;
    color:var(--color-accent);
}

.universe-card-icon svg {
    display:block;
    width:32px;
    height:32px;
}

.universe-card-kicker {
    min-width:0;
    color:var(--color-ink);
    font-size:10px;
    font-weight:600;
    line-height:1.6;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.universe-card h3 {
    font-family:var(--font-display);
    font-size:clamp(26px,1.8vw,32px);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-.045em;
    margin:12px 0 0;
    transition:color .2s ease;
}

.universe-card h3>span {
    display:block;
}

.site-shell .universe-card-description {
    font-family:var(--font-text);
    font-size:16px;
    font-weight:450;
    line-height:1.6;
    color:#525c66;
    max-width:44ch;
    margin:14px 0 16px;
}

.universe-card-action {
    display:inline-flex;
    align-items:center;
    gap:24px;
    margin-top:auto;
    color:#335e79;
    font-size:13px;
    font-weight:550;
}

.universe-card-action>span {
    font-size:20px;
    line-height:1;
}

.site-shell .universe-card:is(:hover,:focus,:active) {
    border-top-color:var(--color-accent-hover);
    box-shadow:inset 0 3px 0 var(--color-accent-hover);
}

.universe-card:is(:hover,:focus,:active) h3 {
    color:var(--color-accent-hover);
}

@media (min-width:700px) {
    .site-shell .universe-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (min-width:1200px) {
    .site-shell .universe-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (min-width:1600px) {
    .site-shell .universe-grid {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

.ai-section {
    background:#171b20;
    color:#f2f5f8}

.ai-image {
    position:relative;
    height:clamp(230px,26vw,640px);
    overflow:hidden}

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

.image-label {
    position:absolute;
    bottom:0;
    left:0;
    background:#171b20;
    padding:13px 5%;
    font-size:8px;
    letter-spacing:.1em}

.ai-content {
    padding-block:var(--section-space);
    }

.ai-content>.eyebrow,.ai-content .eyebrow {
    color:var(--color-accent-on-dark)}

.ai-content h2 {
    font-size:clamp(30px,3.5vw,54px);
    margin-top:30px;
    line-height:1.15}

.ai-lead {
    font-family:var(--font-text);
    font-size:19px;
    font-weight:350;
    margin-top:28px!important;
    color:#cbd4de}

.ai-intro {
    font-size:14px;
    font-weight:350;
    line-height:1.9;
    color:#cbd4de}

.ai-process ol {
    list-style:none;
    padding:0;
    margin:25px 0 0}

.ai-process li {
    display:flex;
    gap:22px;
    border-top:1px solid #444e59;
    padding:20px 0}

.ai-process li>span {
    color:var(--color-accent-on-dark);
    font-size:10px;
    padding-top:4px}

.ai-process h3 {
    font-size:16px;
    font-weight:600;
    letter-spacing:-.025em}

.ai-process li p {
    font-family:var(--font-text);
    font-size:14px;
    line-height:1.8;
    color:#c3cdd7;
    margin-top:6px}

.ai-note {
    font-size:10px;
    color:#a4afba;
    border-top:1px solid #444e59;
    padding-top:15px}

.paths-section {
    background-color:#e7edf2;
    padding-block:var(--section-space);
    }

.paths-grid {
    gap:1px;
    background:#b2bec9;
    border:1px solid #b2bec9}

.path-block {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:clamp(24px,2.6vw,54px);
    background:#f1f4f7;
}
.paths-grid .path-block--dark {
    background:#252d35;
    color:#f8fafc;
    --color-action-accent:var(--color-accent-ice);
    --color-focus:var(--color-accent-ice);
}
.path-block h3 {
    margin:clamp(22px,2.5vw,48px) 0 clamp(15px,1.6vw,30px);
    font-size:clamp(32px,3.3vw,66px);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:750;
    text-transform:uppercase;
}
.path-block p { flex:1; max-width:46ch; line-height:1.75; }
.path-block .action-link { margin-top:clamp(20px,2.1vw,42px); width:100%; }
.path-block--dark .action-link { border-color:#78838d; }
.path-block:is(:hover,:focus-visible) .action-link { color:var(--color-action-accent); }
.site-shell .path-block:focus-visible { outline-offset:-4px; }

.path-resources {
    column-gap:clamp(28px,4vw,80px);
    row-gap:28px;
    margin-top:clamp(30px,3.4vw,64px);
}
.path-resource {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding-top:clamp(16px,1.3vw,26px);
    border-top:1px solid #b2bec9;
}
.path-resource .eyebrow, .path-resource-link { color:var(--color-accent); }
.path-resource h3 {
    margin:8px 0;
    font-size:clamp(24px,1.95vw,36px);
    line-height:1.13;
    letter-spacing:-.025em;
}
.path-resource p { flex:1; max-width:60ch; }
.path-resource-link {
    display:inline-flex;
    gap:.6em;
    margin-top:18px;
    font-weight:650;
}
.path-resource:is(:hover,:focus-visible) h3 { color:var(--color-accent-hover); }

.project-guide { padding-block:var(--section-space); }
.project-guide h2 { font-size:clamp(28px,3vw,44px); letter-spacing:-.035em; line-height:1.15; }
.project-guide :is(ol,ul) { list-style:none; padding:0; margin:24px 0; counter-reset:project-step; }
.project-guide ul > li { padding-left:0; }
.project-guide li {
    counter-increment:project-step;
    position:relative;
    padding:20px 0 20px 3.5rem;
    border-top:1px solid #c3cfd8;
}
.project-guide ol > li::before {
    content:counter(project-step,decimal-leading-zero);
    position:absolute;
    left:0;
    color:var(--color-accent);
    font-weight:650;
}
.project-guide li h3 { margin-bottom:6px; font-size:clamp(20px,2vw,27px); line-height:1.25; }
.project-guide p { max-width:76ch; }
.project-guide a { color:var(--color-accent); text-decoration:underline; text-underline-offset:.2em; }

.contact-section {
    background:#d6dee6;
    padding-block:var(--section-space);
    }

.contact-section h2 {
    font-size:clamp(32px,3.5vw,54px);
    margin-top:25px}

.contact-copy p {
    font-family:var(--font-text);
    font-size:15px;
    line-height:1.7}

.contact-email {
    font-size:29px;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #7d8996;
    padding:15px 0 8px;
    margin-top:15px}

.contact-address {
    font-size:12px;
    display:inline-block;
    margin-top:10px}

.site-footer {
    background:#171b20;
    color:#c4cdd6;
    padding-top:40px;
    padding-bottom:22px;
    font-size:10px;
    letter-spacing:.04em}

.footer-brand {
    color:#fff;
    font-size:13px;
    font-weight:750}

.footer-bottom {
    border-top:1px solid #414b56;
    padding-top:20px;
    margin-top:35px;
    font-size:8px;
    color:#a4afba}

.intro-page {
    overflow:clip;
    isolation:isolate;
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:48px 24px;
    background:#171b20;
    color:#f2f5f8;
    text-align:center;
}

.intro-content {
    display:grid;
    justify-items:center;
    gap:clamp(36px,6vh,64px);
    width:100%;
    max-width:1200px;
}

.intro-brand {
    font-family:var(--font-display);
    font-size:clamp(36px,min(12vw,14svh),116px);
    font-weight:850;
    line-height:.96;
    letter-spacing:-.045em;
    text-align:left;
    white-space:nowrap;
}

.intro-brand-light {
    font-weight:350;
}

.intro-brand-name {
    display:block;
    animation:intro-rise .95s cubic-bezier(.16,1,.3,1) both;
}

.intro-brand-house {
    display:block;
    font-size:1.49em;
    letter-spacing:.025em;
    animation:intro-house 1.1s cubic-bezier(.16,1,.3,1) both;
}

.intro-dot {
    position:relative;
    color:var(--color-accent-on-dark);
}

.intro-glow {
    position:absolute;
    pointer-events:none;
    left:50%;
    bottom:.2em;
    width:120vmax;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle, transparent 1%, rgb(147 194 228 / .34) 12%, rgb(106 164 205 / .12) 28%, transparent 60%);
    opacity:0;
    animation:intro-light 2s .45s ease-out both;
}

.intro-title {
    width:100%;
    font-size:clamp(24px,3.2vw,44px);
    animation:intro-rise .85s .75s ease-out both;
    font-weight:750;
    line-height:1.06;
    letter-spacing:-.045em;
}

.intro-statement,
.intro-emotion {
    display:block;
}

.intro-emotion {
    margin-top:.12em;
    font-size:.88em;
    font-weight:250;
    letter-spacing:-.035em;
}

.intro-emotion strong {
    color:var(--color-accent-on-dark);
    font-weight:500;
}

.intro-enter {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:44px;
    min-height:48px;
    padding:8px 0;
    border-bottom:1px solid #697685;
    font-size:15px;
    font-weight:500;
    transition:color .2s,border-color .2s;
}

.intro-enter span {
    color:var(--color-accent-on-dark);
    font-size:22px;
}

.intro-enter:hover {
    color:var(--color-accent-on-dark);
    border-color:var(--color-accent-on-dark);
}

@keyframes intro-rise {
    from { opacity:0; transform:translateY(.4em); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes intro-house {
    from { opacity:0; transform:translateY(.22em) scale(1.12); }
    to { opacity:1; transform:none; }
}
@keyframes intro-light {
    0% { opacity:0; transform:translate(-50%,50%) scale(.015); }
    20% { opacity:1; }
    100% { opacity:0; transform:translate(-50%,50%) scale(1); }
}

@keyframes photo-reveal {
    from {
    opacity:.5;
    transform:scale(1.02)}

to {
    opacity:1;
    transform:scale(1)}

}


@media(min-width:1600px) {
    .page-pad {
    padding-left:max(5%,calc((100vw - 1440px)/2));
    padding-right:max(5%,calc((100vw - 1440px)/2))}

}


@media(max-width:767px) {
    .site-header {
    min-height:76px}

.wordmark {
    font-size:13px}

.brand-house {
    font-size:21px}

.opening-grid {
    gap:25px}

.home-opening h1 {
    font-size:clamp(64px,17vw,105px)}

.opening-copy p {
    font-size:22px}

.opening-copy .action-link {
    margin-top:6px}

.gallery-image {
    height:400px}

.gallery-image>img {
    object-position:55% center}

.gallery-caption {
    bottom:25px}

.gallery-caption p {
    font-size:27px}

.gallery-bar {
    min-height:65px}

.gallery-label {
    max-width:150px;
    font-size:7px}

.gallery-bar .gap-5 {
    gap:12px}

.vision-section {
    gap:28px}

#visione {
    gap:24px}

#visione>div:first-child {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 16px}

#visione .vision-copy {
    margin-top:20px;
    row-gap:20px}

.section-aside {
    display:none}

.section-heading {
    margin-bottom:28px}





.ai-content {
    gap:35px}

.ai-content h2 {
    font-size:clamp(29px,7.2vw,52px)}

.ai-image {
    height:260px}

.image-label {
    font-size:7px;
    padding-top:10px;
    padding-bottom:10px}

.contact-section {
    gap:25px}

.contact-section .eyebrow {
    font-size:8px}

.contact-section h2 {
    font-size:clamp(30px,8vw,48px)}

.site-footer {
    padding-top:30px}


}


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

.site-shell *,.intro-page * {
    animation:none!important;
    transition:none!important}

}



/* Responsive sources preserve the original gallery framing. */
.house-picture { display: block; width: 100%; height: 100%; }
.gallery-image .house-picture img { width: 100%; height: 100%; object-fit: cover; animation: photo-reveal .65s ease-out; }
.gallery-controls { flex-shrink: 0; }
@media (max-width: 767px) {
    .gallery-label { max-width: 105px; }
    .gallery-controls { gap: 8px !important; }
    .gallery button { width: 32px; height: 36px; }
}

/* Mission: typography and editorial rhythm shared with the homepage. */
.nav-current { color: var(--color-accent-ice) !important; border-bottom: 1px solid currentColor; }
.mission-page main > section { padding-block: var(--section-space); }
.mission-page main > .mission-opening { padding-block-start: 24px; }
.mission-breadcrumb { font-size: 10px; color: #626f7c; margin-bottom: 40px; }
.mission-breadcrumb span { margin-left: 10px; }
.mission-opening h1 { font-size: clamp(44px, 7.7vw, 115px); line-height: .98; letter-spacing: -.045em; font-weight: 850; margin: 25px 0 40px; }
.mission-intro > div p { font-family: var(--font-text); font-size: 17px; line-height: 1.85; color: #525c66; }
.mission-intro > div p + p { margin-top: 18px; }
.mission-statement { font-size: clamp(24px, 2.8vw, 39px); font-weight: 300; line-height: 1.35; letter-spacing: -.04em; }
.mission-statement strong { font-weight: 650; }
.mission-panorama { height: clamp(280px, 34vw, 500px); position: relative; overflow: hidden; }
.mission-panorama img { width: 100%; height: 100%; object-fit: cover; }
.mission-panorama figcaption { position: absolute; bottom: 0; left: 0; padding: 15px 5%; background: #171b20; color: white; font-size: 9px; letter-spacing: .1em; }
.mission-principles { background: #eef1f4; }
.mission-principles article { padding: 22px 0 0; border-top: 1px solid #c4ccd5; }
.mission-principles h3 { font-size: clamp(25px, 2.6vw, 37px); line-height: 1.15; letter-spacing: -.045em; font-weight: 600; margin-top: 20px; }
.mission-principles p { font-family: var(--font-text); font-size: 16px; line-height: 1.85; margin-top: 22px; max-width: 530px; color: #525c66; }
.mission-principles > .grid { row-gap: 22px; }
.mission-manifesto { background: #171b20; color: #f2f5f8; }
.mission-manifesto > .eyebrow { color: var(--color-accent-on-dark); }
.mission-manifesto h2 { margin: 25px 0 50px; font-size: clamp(29px, 4vw, 60px); }
.mission-manifesto article { border-top: 1px solid #4f5b68; padding-top: 22px; }
.mission-manifesto article > span { color: var(--color-accent-on-dark); font-size: 11px; }
.mission-manifesto h3 { font-size: 18px; font-weight: 600; line-height: 1.4; margin-top: 15px; }
.mission-manifesto p { font-family: var(--font-text); font-size: 15px; line-height: 1.85; color: #c3cdd7; margin-top: 12px; }
@media (max-width: 767px) {
    .mission-breadcrumb { margin-bottom: 30px; }
    .mission-opening h1 { font-size: clamp(38px, 8.6vw, 62px); margin-bottom: 30px; }
    .mission-intro { gap: 25px; }
    .mission-intro > div p { font-size: 16px; }
    .mission-panorama figcaption { font-size: 7px; }
    .mission-manifesto h2 { font-size: clamp(25px, 6.8vw, 40px); }
}

/* Dedicated project paths: shared shell, with each page ready for its own content. */
.project-path-page {
    display:flex;
    flex-direction:column;
    min-height:100svh;
}

.project-path-page main {
    flex:1;
}

.project-path-opening {
    padding-block:24px var(--section-space);
}

.project-path-breadcrumb {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:48px;
    color:#626f7c;
    font-size:13px;
    line-height:1.6;
}

.project-path-breadcrumb a:hover {
    text-decoration:underline;
    text-underline-offset:5px;
}

.project-path-opening>.eyebrow,
.project-path-dot {
    color:var(--color-accent);
}

.project-path-opening h1 {
    margin:24px 0 28px;
    font-size:clamp(36px,7.5vw,112px);
    font-weight:750;
    letter-spacing:-.045em;
    line-height:1.03;
}

.site-shell .project-path-description {
    max-width:48ch;
    font-size:clamp(17px,1.6vw,23px);
    line-height:1.65;
    color:#525c66;
}

.project-path-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px 28px;
    margin-top:36px;
}
.project-path-actions .action-link {
    margin-top:0;
    min-height:44px;
    font-size:15px;
}

@media(max-width:767px) {

    .project-path-breadcrumb {
        margin-bottom:32px;
        font-size:12px;
    }
}
/* Slim native scrollbars: a fixed hit area avoids layout shifts on hover. */
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
    @supports selector(::-webkit-scrollbar-thumb) {
        html::-webkit-scrollbar,
        .site-navigation-panel::-webkit-scrollbar {
            width: 12px;
        }

        html::-webkit-scrollbar-track,
        .site-navigation-panel::-webkit-scrollbar-track {
            background: #eef1f4;
        }

        html::-webkit-scrollbar-thumb,
        .site-navigation-panel::-webkit-scrollbar-thumb {
            min-height: 44px;
            border: 4px solid transparent;
            border-radius: 999px;
            background-color: #879baa;
            background-clip: padding-box;
        }

        html::-webkit-scrollbar-thumb:hover,
        .site-navigation-panel::-webkit-scrollbar-thumb:hover {
            border-inline-width: 1px;
            background-color: #52758e;
        }

        html::-webkit-scrollbar-thumb:active,
        .site-navigation-panel::-webkit-scrollbar-thumb:active {
            border-inline-width: 1px;
            background-color: #376180;
        }

        html::-webkit-scrollbar-button:vertical,
        .site-navigation-panel::-webkit-scrollbar-button:vertical {
            display: none;
        }
    }

    /* Browsers without thumb selectors keep a native, thin scrollbar. */
    @supports not selector(::-webkit-scrollbar-thumb) {
        html,
        .site-navigation-panel {
            scrollbar-width: thin;
            scrollbar-color: #879baa #eef1f4;
        }
    }
}