@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
}

:root {
    --brand: #329b9b;
    --brand-dark: #237575;
    --brand-soft: #edf6f5;
    --logo-grey: #58595b;
    --ink: #111111;
    --muted: #55585a;
    --line: #e4e8e6;
    --paper: #ffffff;
    --header-height: 104px;
    --gutter: clamp(24px, 4.45vw, 80px);
    --menu-duration: 500ms;
    --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.75 Montserrat, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-is-open { overflow: hidden; }
[hidden] { display: none !important; }
::selection { background: #cce8e5; color: #111; }
a { color: inherit; text-underline-offset: .3em; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 6px; border-radius: 3px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; overflow-wrap: break-word; hyphens: auto; }
.content-grid > *, .contact-layout > * { min-width: 0; }
ul { margin: 0; padding: 0; }
address { font-style: normal; }
.container { width: min(100%, 1600px); margin-inline: auto; padding-inline: var(--gutter); }
.icon { flex: 0 0 auto; vertical-align: middle; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; line-height: 1.7; letter-spacing: .13em; text-transform: uppercase; }
.brand-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 56px; padding: 15px 22px; border: 1px solid transparent; border-radius: 5px; background: var(--brand); color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background .25s, transform .3s var(--ease), box-shadow .3s; }
.button .icon { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.button-small { min-height: 46px; padding: 12px 17px; gap: 20px; font-size: 12px; }
.text-link { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; color: var(--brand-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.text-link span { border-bottom: 1px solid currentColor; }
.text-link .icon { width: 20px; transition: transform .3s var(--ease); }
.skip-link { position: fixed; top: 12px; left: var(--gutter); z-index: 100; padding: 12px 20px; background: white; color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

/* The navigation is fully usable without JavaScript; JS enhances the mobile panel. */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 4px 24px #11111106; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; min-height: var(--header-height); }
.brand { flex: 0 0 auto; display: block; }
.brand { --logo-width: 166px; }
.brand-art { position: relative; display: block; width: var(--logo-width); aspect-ratio: 784 / 267; pointer-events: none; }
.brand .brand-art img { width: 100%; height: auto; }
.brand-hand { position: absolute; inset: 0; }
/* Pivot at each wrist: upper left, lower right.
   Negative rotations open the fingertips away from the central symbols. */
.brand-hand-top { transform-origin: 0% 16.85%; --hand-open: translateY(-2px) rotate(-25deg); }
.brand-hand-bottom { transform-origin: 30.87% 83.15%; --hand-open: translateY(2px) rotate(-25deg); }
.brand.is-logo-animating .brand-hand { animation: logo-hands-close 700ms both; }
@keyframes logo-hands-close {
    0%, 28.5714% { transform: var(--hand-open); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    100% { transform: translateY(0) rotate(0); }
}
.navigation-panel { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.nav-list { display: flex; align-items: center; gap: clamp(20px, 2.15vw, 35px); list-style: none; }
.nav-link { display: flex; position: relative; align-items: center; min-height: 48px; padding-block: 10px; color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.nav-link::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-link.is-current::after { transform: scaleX(1); }
.nav-arrow { display: none; }
.nav-cta:disabled { opacity: 1; cursor: default; }
.menu-toggle { display: flex; align-items: center; gap: 14px; padding: 8px 0 8px 12px; min-width: 92px; min-height: 48px; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
.menu-toggle-label { font-size: 11px; font-weight: 600; }
.menu-symbol { position: relative; display: block; width: 32px; height: 28px; }
.menu-symbol span { position: absolute; right: 0; width: 27px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), width .3s var(--ease); }
.menu-symbol span:first-child { top: 9px; }
.menu-symbol span:nth-child(2) { top: 18px; width: 20px; }
.menu-symbol i { position: absolute; top: 17px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); transition: transform .3s, opacity .2s; }
.menu-is-open .menu-symbol span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-is-open .menu-symbol span:nth-child(2) { width: 27px; transform: translateY(-4.5px) rotate(-45deg); }
.menu-is-open .menu-symbol i { opacity: 0; transform: scale(0); }
.menu-backdrop { position: fixed; inset: 0; z-index: 40; background: #11111130; backdrop-filter: blur(5px); opacity: 0; transition: opacity var(--menu-duration) var(--ease); }
.menu-backdrop.is-visible { opacity: 1; }

/* Restrained, image-free page foundations. The interactive scene is a later phase. */
main { min-height: 0; }
.hero { padding-block: clamp(68px, 8vw, 124px) 64px; }
.hero .eyebrow::before, .page-intro .eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--brand); }
.hero h1 { margin-top: 30px; max-width: 1040px; font-size: clamp(42px, 5.3vw, 82px); font-weight: 500; line-height: 1.13; letter-spacing: -.055em; text-wrap: balance; }
.hero h1 em { font-style: normal; position: relative; }
.hero h1 em::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; background: var(--brand); transform-origin: left; animation: line-enter 1s .3s var(--ease) both; }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; margin-top: 48px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.hero-description { max-width: 480px; justify-self: end; color: var(--muted); font-size: 15px; line-height: 1.9; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; border-top: 1px solid var(--line); margin-top: 64px; padding-top: 27px; }
.principles p { display: flex; align-items: baseline; gap: 16px; font-size: 12px; font-weight: 500; }
.principles span { color: var(--brand-dark); font-size: 10px; }
.page-intro { padding-block: 78px 44px; }
.page-intro h1 { max-width: 1000px; margin-top: 24px; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; }
.page-intro .lead { max-width: 700px; margin-top: 28px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.page-content { padding-bottom: 80px; }
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 64px; }
.content-block { border-top: 1px solid var(--line); padding-top: 25px; }
.content-block .section-number { color: var(--brand-dark); font-size: 11px; }
.content-block h2 { margin-block: 10px 14px; font-size: 23px; line-height: 1.4; letter-spacing: -.03em; }
.content-block p { max-width: 590px; color: var(--muted); font-size: 14px; }
.content-block .text-link { margin-top: 18px; }
.contact-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; }
.contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.contact-details > a { display: inline-flex; align-items: center; gap: 24px; color: var(--brand-dark); font-size: clamp(20px, 3vw, 36px); text-decoration: none; letter-spacing: -.03em; }
.contact-details address { color: var(--muted); font-size: 14px; margin-top: 22px; }
.steps { list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 18px 0 18px 42px; border-top: 1px solid var(--line); }
.steps li::before { content: '0' counter(step); position: absolute; left: 0; top: 22px; color: var(--brand-dark); font-size: 11px; }
.steps h2 { font-size: 17px; }
.steps p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.prose { max-width: 850px; padding-bottom: 90px; }
.prose h2 { font-size: 23px; margin-block: 30px 10px; }
.prose p, .prose address { color: var(--muted); font-size: 14px; }
.prose a { color: var(--brand-dark); }
.editorial-note { padding: 18px 22px; border-left: 2px solid var(--brand); background: var(--brand-soft); }

/* Restrained footer in the supplied logo grey. */
.site-footer { background: var(--logo-grey); color: white; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 60px; padding-block: clamp(48px, 5vw, 72px); }
.footer-grid > * { min-width: 0; }
.site-footer .footer-logo { --logo-width: 166px; width: fit-content; }
.footer-logo .brand-core { filter: brightness(0) invert(1); }
.footer-statement { max-width: 400px; margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--brand); font-size: 18px; font-weight: 400; color: #f0f0f0; line-height: 1.65; }
.footer-grid h3 { margin: 0 0 14px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: #e3e3e3; }
.footer-links { list-style: none; }
.footer-links a { display: inline-block; min-height: 36px; padding-block: 4px; font-size: 12px; text-decoration: none; }
.footer-contact > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 240px; min-height: 36px; padding-block: 4px; font-size: 12px; text-decoration: none; }
.footer-contact .icon { width: 15px; height: 15px; }
.footer-contact address { margin-top: 15px; font-size: 12px; line-height: 1.8; color: #f0f0f0; }
.footer-bottom { display: flex; align-items: center; gap: 38px; border-top: 1px solid #ffffff2e; padding-block: 20px; }
.footer-bottom small { margin-right: auto; font-size: 10px; }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom a { display: inline-flex; min-height: 36px; align-items: center; font-size: 10px; text-decoration: none; }
.back-to-top { gap: 12px; }
.back-to-top .icon { width: 16px; height: 16px; }
.site-footer a:not(.button) { transition: color .2s; }
.site-footer a:focus-visible { outline-color: #b4efec; }
.site-footer a[aria-current='page'] { text-decoration: underline; }
@media (max-width: 1100px) {
    .footer-grid { gap: 35px; }
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-block: 34px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-statement { margin-top: 20px; font-size: 16px; }
    .footer-grid h3 { font-size: 9px; letter-spacing: .09em; }
    .footer-links a, .footer-contact > a { font-size: 11px; min-height: 44px; }
    .footer-contact > a { gap: 5px; }
    .footer-contact address { font-size: 11px; }
    .footer-bottom { flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 19px; }
    .footer-bottom small { flex-basis: 100%; margin-bottom: 3px; }
    .footer-bottom nav { gap: 17px; }
    .footer-bottom a { font-size: 9px; min-height: 44px; }
    .back-to-top { gap: 6px; }
}
@media (max-width: 360px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
}

@media (hover: hover) {
    .nav-link:hover::after { transform: scaleX(1); }
    .button:not(:disabled):hover { background: #49aaaa; box-shadow: 0 5px 16px #1111110a; }
    .button:not(:disabled):hover .icon { transform: translate(2px, -2px); }
    .text-link:hover .icon { transform: translateX(4px); }
    .site-footer a:not(.button):hover { color: #b4efec; }
    .menu-toggle:hover .menu-symbol span:nth-child(2) { width: 27px; }
    .contact-details > a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
}
@keyframes line-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero > .eyebrow, .hero h1, .hero-bottom, .page-intro > * { animation: intro-enter .8s var(--ease) both; }
.hero h1 { animation-delay: .06s; }
.hero-bottom { animation-delay: .13s; }

@media (max-width: 1100px) {
    :root { --header-height: 88px; }
    .brand { --logo-width: 150px; }
    .header-inner { flex-wrap: wrap; gap: 0; padding-block: 15px; }
    .navigation-panel { width: 100%; display: block; padding-block: 20px; }
    .nav-list { flex-wrap: wrap; gap: 10px 24px; }
    .nav-cta { margin-top: 18px; }
    .js .header-inner { flex-wrap: nowrap; height: var(--header-height); padding-block: 0; }
    .js .navigation-panel {
        position: fixed; top: var(--header-height); right: 0; left: auto;
        width: min(460px, 100%); height: calc(100dvh - var(--header-height));
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        overflow-y: auto; overscroll-behavior: contain;
        padding: clamp(28px, 5vw, 52px) clamp(24px, 5vw, 44px) max(32px, env(safe-area-inset-bottom));
        background: white; border-left: 1px solid var(--line);
        box-shadow: -20px 20px 70px #1111110a;
        transform: translateX(100%);
        transition: transform var(--menu-duration) cubic-bezier(.22, .8, .25, 1);
    }
    .js .navigation-panel::before {
        content: ''; display: block; flex-shrink: 0; width: 40px; height: 3px;
        margin-bottom: 26px; border-radius: 2px; background: var(--brand);
        transform: scaleX(0); transform-origin: right;
        transition: transform 350ms var(--ease);
    }
    .js .site-header.menu-is-open .navigation-panel::before { transform: scaleX(1); transition-delay: 130ms; }
    .js .site-header.menu-is-open .navigation-panel { transform: translateX(0); }
    .js .nav-list { display: block; max-width: 100%; }
    .js .nav-list li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(26px); transition: opacity 220ms ease, transform 350ms var(--ease); }
    .js .site-header.menu-is-open .nav-list li { opacity: 1; transform: translateX(0); transition-delay: 100ms; }
    .js .site-header.menu-is-open .nav-list li:nth-child(2) { transition-delay: 135ms; }
    .js .site-header.menu-is-open .nav-list li:nth-child(3) { transition-delay: 170ms; }
    .js .site-header.menu-is-open .nav-list li:nth-child(4) { transition-delay: 205ms; }
    .js .site-header.menu-is-open .nav-list li:nth-child(5) { transition-delay: 240ms; }
    .js .nav-label { transition: transform 300ms var(--ease); }
    .js .nav-arrow { transition: transform 300ms var(--ease); }
    .js .nav-link:hover .nav-label, .js .nav-link:focus-visible .nav-label { transform: translateX(5px); }
    .js .nav-link:hover .nav-arrow, .js .nav-link:focus-visible .nav-arrow { transform: translate(2px, -2px); }
    .js .nav-link { min-height: 62px; gap: 19px; font-size: clamp(21px, 3.4vw, 31px); line-height: 1.3; letter-spacing: -.035em; padding-block: 14px; }
    .js .nav-link::after { display: none; }
    .js .nav-arrow { display: block; margin-left: auto; color: var(--brand-dark); }
    .js .nav-arrow .icon { width: 20px; }
    .js .nav-link.is-current > .nav-label { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 7px; }
    .js .nav-cta { display: flex; flex-shrink: 0; width: 100%; margin-top: 32px; min-height: 50px; font-size: 12px; opacity: 0; transform: translateX(20px); transition: opacity 220ms ease, transform 350ms var(--ease); }
    .js .site-header.menu-is-open .nav-cta { opacity: 1; transform: translateX(0); transition-delay: 275ms; }
    .hero h1 { font-size: clamp(42px, 6.5vw, 72px); }
    .hero-bottom { gap: 35px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 700px) {
    :root { --header-height: 80px; }
    .brand { --logo-width: 136px; }
    .hero { padding-block: 62px 40px; }
    .hero > .eyebrow { max-width: 300px; font-size: 9px; gap: 10px; letter-spacing: .09em; }
    .hero > .eyebrow::before { width: 20px; flex-shrink: 0; }
    .hero h1 { margin-top: 25px; font-size: clamp(36px, 8.3vw, 58px); line-height: 1.19; letter-spacing: -.05em; }
    .hero h1 em::after { height: 2px; bottom: -4px; }
    .hero-bottom { grid-template-columns: 1fr; gap: 27px; margin-top: 32px; }
    .hero-description { grid-row: 1; justify-self: start; font-size: 13px; }
    .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
    .button { min-height: 52px; font-size: 12px; gap: 23px; padding-inline: 18px; }
    .text-link { font-size: 11px; }
    .principles { grid-template-columns: 1fr; gap: 12px; margin-top: 37px; padding-top: 23px; }
    .principles p { font-size: 11px; }
    .page-intro { padding-block: 52px 36px; }
    .page-intro .eyebrow { font-size: 9px; }
    .page-intro h1 { font-size: clamp(34px, 8vw, 52px); }
    .page-intro .lead { font-size: 14px; margin-top: 22px; }
    .page-content { padding-bottom: 54px; }
    .content-grid { grid-template-columns: 1fr; gap: 28px; }
    .content-block h2 { font-size: 22px; }
    .content-block p { font-size: 13px; }
    .contact-layout { grid-template-columns: 1fr; gap: 36px; }
    .contact-details > a { font-size: 26px; gap: 12px; }
    .prose { padding-bottom: 60px; }
}
@media (max-width: 360px) {
    .hero h1 { font-size: 33px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
    .site-header { position: static; }
    .navigation-panel, .menu-toggle, .menu-backdrop, .skip-link, .site-footer, .hero-actions { display: none !important; }
    .hero, .page-intro { padding-block: 30px; }
    .hero h1 { font-size: 40px; }
    body { color: #000; }
}

/* Temporary image on subpages; original page content remains commented out. */
.construction-placeholder {
    display: flex;
    justify-content: center;
    padding-block: clamp(28px, 5vw, 64px);
}
.construction-placeholder img {
    width: min(100%, 560px);
    height: auto;
    object-fit: contain;
}

/* Scale the artwork only, keeping the link and surrounding layout stable. */
.brand-art { transform-origin: center; transition: transform 400ms var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .brand:hover .brand-art { transform: scale(1.045); }
}
@media (prefers-reduced-motion: no-preference) {
    .brand:focus-visible .brand-art { transform: scale(1.045); }
}

/* Section 4: temporary continuation marker. */