.home-page { background: var(--paper); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 16px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.home-hero { background: var(--navy); color: #fff; overflow: hidden; }
.hero-intro {
    position: relative;
    min-height: 440px;
    padding-top: clamp(72px, 9vw, 130px);
    padding-bottom: clamp(64px, 8vw, 112px);
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    align-items: end;
    gap: 64px;
}

.hero-intro::before {
    content: "";
    position: absolute;
    top: 0;
    right: 19%;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(255,255,255,.16), transparent);
}

.hero-eyebrow,
.section-kicker { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .28em; }
.hero-eyebrow { margin-bottom: 30px; }
.hero-title { font-family: var(--serif); font-size: clamp(54px, 7.1vw, 108px); font-weight: 400; line-height: 1.18; letter-spacing: .04em; }
.hero-title .accent-dot { display: inline-block; width: .13em; height: .13em; margin-left: .08em; border-radius: 50%; background: var(--accent); vertical-align: .13em; }
.hero-copy { align-self: end; padding-bottom: 10px; }
.hero-copy p { max-width: 34em; color: rgba(255,255,255,.67); font-family: var(--serif); font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.hero-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

.text-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-width: 174px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.36);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    transition: border-color .2s ease, color .2s ease;
}
.text-link::after { content: "↗"; font-size: 16px; font-weight: 400; transition: transform .2s ease; }
.text-link:hover { border-color: var(--accent); color: #fff; }
.text-link:hover::after { transform: translate(3px, -3px); }

.hero-panorama { position: relative; width: 100%; background: #102b3c; overflow: hidden; }
.hero-panorama::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 1px rgba(255,255,255,.1); pointer-events: none; }
.hero-panorama img { width: 100%; height: auto; min-height: 260px; object-fit: cover; object-position: center; }

.capability-strip { border-top: 1px solid rgba(255,255,255,.1); background: #061720; }
.capability-strip .container { padding-block: 0; }
.capability-list { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.capability-list li { padding: 25px 22px; border-right: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .19em; }
.capability-list li:first-child { border-left: 1px solid rgba(255,255,255,.1); }
.capability-list strong { display: block; margin-bottom: 4px; color: #fff; font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: .08em; }

.home-section { padding: clamp(88px, 10vw, 150px) 0; }
.section-heading { margin-top: 18px; font-family: var(--serif); font-size: clamp(36px, 5vw, 70px); font-weight: 400; line-height: 1.35; letter-spacing: .055em; }
.section-lead { color: #52616a; font-size: 14px; line-height: 2.15; letter-spacing: .04em; }

.vision-section { background: #fff; }
.vision-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); align-items: center; gap: clamp(52px, 8vw, 118px); }
.vision-media { position: relative; }
.vision-media::before { content: ""; position: absolute; top: -24px; right: -24px; width: 34%; height: 54%; border: 1px solid rgba(215,71,47,.42); }
.vision-media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1.42 / 1; object-fit: cover; box-shadow: 0 34px 70px rgba(7,27,38,.16); }
.media-credit { position: absolute; z-index: 2; right: 18px; bottom: 14px; color: rgba(255,255,255,.68); font-size: 8px; letter-spacing: .18em; }
.vision-content .section-lead { margin-top: 28px; max-width: 39em; }
.vision-points { margin: 38px 0; border-top: 1px solid var(--line); }
.vision-point { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.vision-point dt { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.vision-point dd { font-size: 13px; letter-spacing: .04em; }
.dark-link { border-color: var(--line); color: var(--ink); }
.dark-link:hover { color: var(--accent-dark); }

.services-section { background: var(--paper); }
.services-header { display: grid; grid-template-columns: 1fr minmax(300px, .62fr); align-items: end; gap: 64px; margin-bottom: 62px; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-entry { min-height: 284px; padding: 34px 36px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.25); display: flex; flex-direction: column; transition: background .28s ease, color .28s ease, transform .28s ease; }
.service-entry:hover { position: relative; z-index: 1; background: var(--navy); color: #fff; transform: translateY(-5px); box-shadow: 0 24px 50px rgba(7,27,38,.14); }
.service-no { margin-bottom: auto; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.service-entry h3 { margin: 34px 0 12px; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 29px); font-weight: 400; line-height: 1.55; letter-spacing: .04em; }
.service-entry p { max-width: 42em; color: #607079; font-size: 12px; line-height: 1.9; transition: color .28s ease; }
.service-entry:hover p { color: rgba(255,255,255,.6); }
.service-arrow { align-self: flex-end; margin-top: 20px; font-size: 18px; }

.principle-section { position: relative; min-height: 660px; display: flex; align-items: center; overflow: hidden; background: var(--navy); color: #fff; }
.principle-bg { position: absolute; inset: 0; }
.principle-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.03); }
.principle-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,15,22,.95) 0%, rgba(3,15,22,.78) 42%, rgba(3,15,22,.12) 82%); }
.principle-content { position: relative; z-index: 1; max-width: 680px; margin-left: max(32px, calc((100vw - 1240px) / 2)); padding: 90px 32px 90px 0; }
.principle-content .section-heading { margin-bottom: 28px; }
.principle-content p { max-width: 39em; color: rgba(255,255,255,.68); font-size: 14px; line-height: 2.15; }
.principle-content .text-link { margin-top: 30px; }

.contact-section { background: #fff; }
.contact-panel { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 52px; padding: 66px 0 22px; border-top: 1px solid var(--ink); }
.contact-title { margin-top: 18px; font-family: var(--serif); font-size: clamp(40px, 6vw, 82px); font-weight: 400; line-height: 1.22; letter-spacing: .05em; }
.contact-copy { color: #586970; font-size: 13px; line-height: 2; }
.contact-button { margin-top: 28px; min-height: 74px; padding: 0 28px; background: var(--accent); display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .13em; transition: background .2s ease, transform .2s ease; }
.contact-button:hover { background: var(--navy); transform: translateY(-3px); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
    .hero-intro { grid-template-columns: 1fr; gap: 42px; min-height: 0; }
    .hero-intro::before { right: 12%; }
    .hero-copy { max-width: 560px; }
    .hero-panorama img { width: 150%; max-width: none; transform: translateX(-22%); }
    .vision-grid { grid-template-columns: 1fr; }
    .vision-media { width: 88%; }
    .services-header { grid-template-columns: 1fr; gap: 28px; }
    .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .hero-intro { padding-top: 76px; padding-bottom: 66px; }
    .hero-title { font-size: clamp(39px, 11vw, 48px); line-height: 1.4; }
    .hero-copy p { font-size: 13px; }
    .hero-panorama { height: 250px; }
    .hero-panorama img { width: 200%; height: 100%; min-height: 0; max-width: none; transform: translateX(-31%); object-fit: cover; }
    .capability-list { grid-template-columns: repeat(2, 1fr); }
    .capability-list li:nth-child(3) { border-left: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1); }
    .capability-list li:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); }
    .home-section { padding-block: 82px; }
    .vision-media { width: calc(100% - 16px); }
    .vision-media::before { top: -16px; right: -16px; }
    .services-grid { grid-template-columns: 1fr; }
    .service-entry { min-height: 250px; padding: 28px 26px; }
    .principle-section { min-height: 570px; align-items: end; }
    .principle-bg::after { background: linear-gradient(0deg, rgba(3,15,22,.96) 0%, rgba(3,15,22,.66) 63%, rgba(3,15,22,.18) 100%); }
    .principle-content { margin: 0; padding: 190px 24px 68px; }
    .contact-panel { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}