/* Shared layouts for the WebSight multi-page site */
.inner-page .site-header:not(.is-scrolled) .site-nav a[aria-current="page"] { color: var(--white); background: rgba(255,255,255,.16); }
.inner-page .site-header.is-scrolled .site-nav a[aria-current="page"] { color: var(--blue-dark); background: rgba(15,95,143,.1); }
body:not(.inner-page) .site-header:not(.is-scrolled) .site-nav a[aria-current="page"] { color: var(--white); background: rgba(255,255,255,.16); }
html.has-js body:not(.inner-page) .hero .hero__content.is-visible,
html.has-js body:not(.inner-page) .hero .hero__actions.is-visible { opacity: var(--hero-content-opacity); transform: translate3d(0,var(--hero-content-shift),0); }

/* Pinned homepage camera pull-back */
body:not(.inner-page) { background: #061423; }
body:not(.inner-page) main { position: relative; overflow: clip; background: transparent; }
body:not(.inner-page) .hero { --hero-scale: 1.18; --hero-world-scale: 2.5; --sea-horizon: 50.6vh; --sea-depth: 77vh; position: relative; z-index: 0; display: block; height: 100svh; min-height: 0; padding: 0; overflow: visible; background: transparent; }
body:not(.inner-page) .hero::before,
body:not(.inner-page) .hero::after { content: none; }
body:not(.inner-page) .hero__stage { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-rows: 1fr auto auto; align-items: center; width: 100%; height: 100svh; padding: 126px clamp(16px,4vw,64px) 64px; overflow: hidden; color: var(--white); background: #061423; }
body:not(.inner-page) .hero__stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 43%,rgba(242,170,119,.04),rgba(3,13,24,.12) 55%,rgba(3,13,24,.38) 100%),linear-gradient(180deg,rgba(4,15,27,.12),rgba(4,15,27,.01) 43%,rgba(4,15,27,.28) 78%,rgba(6,20,35,.58)); }
body:not(.inner-page) .hero__stage::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 190px; pointer-events: none; background: linear-gradient(180deg,transparent,rgba(6,20,35,.5)); }
body:not(.inner-page) .hero__world { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
body:not(.inner-page) .hero__world img { position: relative; z-index: 0; flex: 0 0 auto; width: auto; height: 140%; max-width: none; transform: scale(var(--hero-world-scale)); transform-origin: 50.3% 30%; will-change: transform; }
body:not(.inner-page) .hero__world::before { content: ""; position: absolute; top: var(--sea-horizon); left: -10%; z-index: 1; width: 120%; height: var(--sea-depth); pointer-events: none; opacity: .2; background: repeating-linear-gradient(176deg,transparent 0 13px,rgba(255,255,255,.2) 14px,transparent 16px 29px),repeating-linear-gradient(184deg,transparent 0 24px,rgba(126,187,207,.18) 25px,transparent 28px 48px); mix-blend-mode: soft-light; -webkit-mask-image: linear-gradient(180deg,transparent,#000 14%,rgba(0,0,0,.86) 70%,transparent); mask-image: linear-gradient(180deg,transparent,#000 14%,rgba(0,0,0,.86) 70%,transparent); animation: sea-drift 11s ease-in-out infinite alternate; will-change: transform,background-position; }
body:not(.inner-page) .hero__world::after { content: ""; position: absolute; top: calc(var(--sea-horizon) - 1vh); left: 38%; z-index: 2; width: 24%; height: 50vh; pointer-events: none; opacity: .24; background: radial-gradient(ellipse at 50% 0,rgba(255,237,164,.62),rgba(255,184,89,.2) 28%,transparent 68%); mix-blend-mode: screen; transform-origin: 50% 0; animation: sea-shimmer 5.5s ease-in-out infinite alternate; }
body:not(.inner-page) .hero__video { z-index: 1; width: 104%; max-width: none; transform-origin: 50% 42%; -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 42%,#000 48%,rgba(0,0,0,.98) 68%,transparent 100%); mask-image: radial-gradient(ellipse 82% 82% at 50% 42%,#000 48%,rgba(0,0,0,.98) 68%,transparent 100%); }
body:not(.inner-page) .hero__stage > *:not(.hero__video):not(.hero__world) { position: relative; z-index: 3; }
body:not(.inner-page) .intro { background: linear-gradient(180deg,transparent 0%,rgba(6,20,35,.1) 58%,rgba(6,20,35,.2) 100%); }
body:not(.inner-page) .intro,
body:not(.inner-page) .referral,
body:not(.inner-page) .split-section,
body:not(.inner-page) .services,
body:not(.inner-page) .work-preview,
body:not(.inner-page) .cta,
body:not(.inner-page) .site-footer { position: relative; z-index: 4; }

/* Seamless, readable homepage content over the persistent scene */
body:not(.inner-page) .about-copy { padding: clamp(26px,3vw,42px); background: rgba(251,252,253,.82); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; box-shadow: 0 24px 70px rgba(6,20,35,.16); backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); }
body:not(.inner-page) .about-copy h2 { color: #0b2135; }
body:not(.inner-page) .about-copy .copy-stack p { color: #3e5365; }
body:not(.inner-page) .services { background: linear-gradient(180deg,transparent 0%,rgba(248,251,253,.64) 10%,rgba(248,251,253,.84) 24%,rgba(248,251,253,.84) 76%,rgba(248,251,253,.58) 91%,transparent 100%); }
body:not(.inner-page) .services .section-heading { padding: clamp(22px,3vw,34px); background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.58); border-radius: 18px; box-shadow: 0 20px 55px rgba(6,20,35,.11); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body:not(.inner-page) .service-card { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.74); box-shadow: 0 18px 46px rgba(6,20,35,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body:not(.inner-page) .work-preview { background: linear-gradient(180deg,transparent 0%,rgba(6,20,35,.56) 10%,rgba(6,20,35,.82) 26%,rgba(6,20,35,.84) 74%,rgba(6,20,35,.5) 91%,transparent 100%); }
body:not(.inner-page) .work-preview .section-heading { padding: clamp(22px,3vw,34px); background: rgba(6,20,35,.58); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body:not(.inner-page) .cta { min-height: 78svh; align-content: center; background: linear-gradient(180deg,transparent 0%,rgba(6,20,35,.08) 24%,rgba(6,20,35,.28) 100%); }
body:not(.inner-page) .cta > div { padding: clamp(24px,3vw,38px); color: var(--white); background: rgba(6,20,35,.58); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; box-shadow: 0 20px 55px rgba(6,20,35,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body:not(.inner-page) .cta h2,
body:not(.inner-page) .cta p { color: var(--white); }
body:not(.inner-page) .site-footer { color: var(--white); background: rgba(6,20,35,.5); border-top-color: rgba(255,255,255,.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body:not(.inner-page) .site-footer .brand,
body:not(.inner-page) .site-footer__brand p,
body:not(.inner-page) .site-footer__nav a,
body:not(.inner-page) .site-footer__meta { color: var(--white); }
body:not(.inner-page) .site-footer .brand img { filter: brightness(0) invert(1); }

@keyframes sea-drift {
  0% { transform: translate3d(-1.2%,0,0) scaleX(1.01); background-position: 0 0,40px 0; }
  55% { transform: translate3d(.5%,1px,0) scaleX(1.025); }
  100% { transform: translate3d(1.2%,-1px,0) scaleX(1.01); background-position: 90px 7px,-55px 4px; }
}

@keyframes sea-shimmer {
  from { opacity: .17; transform: scale3d(.82,1,1) translateY(0); filter: blur(2px); }
  to { opacity: .3; transform: scale3d(1.08,1.035,1) translateY(3px); filter: blur(4px); }
}

.page-hero { position: relative; display: grid; align-content: end; min-height: 620px; padding-top: 180px; padding-bottom: 92px; overflow: hidden; color: var(--white); background: radial-gradient(circle at 78% 18%, rgba(201,106,85,.34), transparent 28%), radial-gradient(circle at 18% 84%, rgba(47,123,104,.26), transparent 34%), linear-gradient(135deg,#071827,#0c3e5c 58%,#283e4d); }
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg,transparent 0 60%,rgba(255,255,255,.05) 60% 60.2%,transparent 60.2%),linear-gradient(180deg,transparent 50%,rgba(3,14,24,.35)); }
.page-hero > * { position: relative; z-index: 1; max-width: 920px; }
.page-hero .eyebrow { color: #91ddcc; }
.page-hero h1 { max-width: 1100px; margin-bottom: 26px; font-size: clamp(3.2rem,7vw,7.4rem); line-height: .92; letter-spacing: -.055em; }
.page-hero > p:last-child { max-width: 720px; margin: 0; color: rgba(255,255,255,.76); font-size: clamp(1.05rem,1.6vw,1.3rem); }

.split-section--page { padding-top: 110px; padding-bottom: 110px; margin-bottom: 0; }
.principles-section,.process-section,.concept-section,.testimonial-section { padding-top: 110px; padding-bottom: 110px; }
.principles-section,.testimonial-section { background: var(--mist); }
.principles-grid,.testimonial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.principles-grid article,.testimonial-grid blockquote { margin: 0; padding: 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.principles-grid article > span,.service-number { display: block; margin-bottom: 44px; color: var(--coral); font-size: .78rem; font-weight: 800; }
.principles-grid p,.section-heading > p:last-child,.portfolio-project__copy p,.testimonial-grid cite { color: var(--muted); }

.page-cta { display: grid; justify-items: center; padding-top: 118px; padding-bottom: 118px; color: var(--white); text-align: center; background: linear-gradient(135deg,#071827,#0c4465); }
.page-cta .eyebrow { color: #91ddcc; }
.page-cta h2 { max-width: 920px; }
.page-cta .button { margin-top: 18px; }
.cta--compact { align-items: center; }
.cta--compact > .button { justify-self: end; color: var(--white); background: var(--blue-dark); }

.service-detail-list { padding-top: 50px; padding-bottom: 50px; }
.service-detail { display: grid; grid-template-columns: minmax(0,.9fr) minmax(320px,.8fr); gap: clamp(36px,8vw,130px); padding: 70px 0; border-bottom: 1px solid var(--line); }
.service-detail h2 { max-width: 650px; font-size: clamp(2rem,4vw,4rem); }
.service-detail > div:last-child > p { color: var(--muted); font-size: 1.08rem; }
.service-detail ul { display: grid; gap: 12px; padding: 0; margin: 28px 0 0; list-style: none; }
.service-detail li { padding: 12px 0; font-weight: 700; border-bottom: 1px solid var(--line); }
.process-section { background: var(--mist); }
.process-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; padding: 0; margin: 44px 0 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.process-list li { min-height: 230px; padding: 28px; background: var(--white); }
.process-list span,.process-list strong { display: block; }
.process-list span { margin-bottom: 56px; color: var(--coral); font-size: .75rem; font-weight: 800; }
.process-list strong { font-size: 1.2rem; }
.process-list p { color: var(--muted); }

.portfolio-list { padding-top: 110px; padding-bottom: 70px; }
.portfolio-project { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: clamp(34px,6vw,90px); align-items: center; margin-bottom: 120px; }
.portfolio-project--reverse .portfolio-project__image { order: 2; }
.portfolio-project__image,.concept-image { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.portfolio-project__image,.concept-image { display: flex; align-items: center; justify-content: center; background: #f4f7f9; }
.portfolio-project__image img,.concept-image img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; transition: transform 500ms ease; }
.portfolio-project:hover .portfolio-project__image img,.concept-grid article:hover img { transform: scale(1.018); }
.project-type,.concept-grid article > span { display: inline-block; margin-bottom: 14px; color: var(--green); font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-project__copy h2 { font-size: clamp(2rem,3.3vw,3.5rem); }
.text-link { display: inline-block; margin-top: 16px; color: var(--blue-dark); font-weight: 800; border-bottom: 1px solid currentColor; }
.concept-section { color: var(--white); background: #0a2235; }
.concept-section .eyebrow,.concept-grid article > span { color: #91ddcc; }
.concept-section .section-heading p:last-child { color: rgba(255,255,255,.68); }
.concept-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.concept-image { margin-bottom: 22px; border-color: rgba(255,255,255,.16); box-shadow: 0 28px 70px rgba(0,0,0,.3); }
.concept-grid h3 { font-size: 1.5rem; }
.testimonial-grid blockquote { display: grid; align-content: space-between; min-height: 270px; }
.testimonial-grid blockquote p { font-size: 1.08rem; font-weight: 700; }
.testimonial-grid cite { font-size: .86rem; font-style: normal; font-weight: 700; }

.contact-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(380px,.7fr); gap: clamp(50px,8vw,130px); align-items: start; min-height: 100vh; padding-top: 180px; padding-bottom: 110px; background: linear-gradient(180deg,#071827 0 108px,transparent 108px),radial-gradient(circle at 10% 15%,rgba(47,123,104,.12),transparent 28%),linear-gradient(180deg,var(--mist),var(--white)); }
.contact-intro h1 { max-width: 760px; margin-bottom: 28px; font-size: clamp(3rem,6.5vw,6.8rem); letter-spacing: -.055em; }
.contact-intro > p:not(.eyebrow) { max-width: 650px; color: var(--muted); font-size: 1.12rem; }
.contact-notes { display: grid; gap: 18px; margin-top: 54px; }
.contact-notes > div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.contact-notes span { color: var(--coral); font-size: .75rem; font-weight: 800; }
.contact-notes p,.contact-notes strong { display: block; margin: 0; }
.contact-notes p { color: var(--muted); }
.contact-notes strong { color: var(--ink); }
.contact-form--page { padding: clamp(24px,4vw,42px); }
.contact-form--page .button--primary { width: 100%; color: var(--white); background: var(--blue-dark); box-shadow: 0 16px 34px rgba(9,54,84,.18); }
.contact-form--page .button--primary:hover,.contact-form--page .button--primary:focus-visible { background: var(--blue); }
.contact-form select { width: 100%; min-height: 46px; padding: 12px 13px; color: var(--ink); font: inherit; background: #f8fbfd; border: 1px solid var(--line); border-radius: var(--radius); }
.form-note { margin: 0; color: var(--muted); font-size: .78rem; text-align: center; }

@media (max-width: 940px) {
  .page-hero { min-height: 560px; }
  .principles-grid,.testimonial-grid { grid-template-columns: 1fr; }
  .service-detail,.portfolio-project,.contact-layout { grid-template-columns: 1fr; }
  .portfolio-project--reverse .portfolio-project__image { order: 0; }
  .process-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-layout { padding-top: 150px; }
  .cta--compact > .button { justify-self: start; }
}

@media (max-width: 720px) {
  body:not(.inner-page) main { display: flex; flex-direction: column; }
  body:not(.inner-page) .hero { order: 0; }
  body:not(.inner-page) .work-preview { order: 1; }
  body:not(.inner-page) .intro { display: none; order: 2; }
  body:not(.inner-page) .referral { order: 3; }
  body:not(.inner-page) .split-section { order: 4; }
  body:not(.inner-page) .services { order: 5; }
  body:not(.inner-page) .cta { order: 6; }

  body:not(.inner-page) .hero { height: 100svh; padding: 0; }
  body:not(.inner-page) .hero__stage { min-height: 100svh; padding: 96px 18px 28px; }
  body:not(.inner-page) .hero__world img { width: auto; height: 140%; transform-origin: 50.3% 30%; }
  body:not(.inner-page) .about-copy,
  body:not(.inner-page) .services .section-heading,
  body:not(.inner-page) .work-preview .section-heading,
  body:not(.inner-page) .cta > div { padding: 22px; border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  body:not(.inner-page) .cta { min-height: auto; }

  .page-hero { min-height: 430px; padding-top: 124px; padding-bottom: 54px; }
  .page-hero h1 { max-width: 12ch; margin-bottom: 18px; font-size: clamp(2.55rem,11.5vw,3.65rem); line-height: .96; letter-spacing: -.045em; text-wrap: balance; }
  .page-hero > p:last-child { font-size: 1rem; line-height: 1.65; }
  .split-section--page,.principles-section,.process-section,.concept-section,.testimonial-section,.portfolio-list { padding-top: 58px; padding-bottom: 58px; }

  .split-section--page { gap: 34px; }
  .split-section--page .founders-portraits { min-height: 310px; }
  .principles-grid,.testimonial-grid { gap: 12px; }
  .principles-grid article,.testimonial-grid blockquote { padding: 22px; border-radius: 16px; }
  .principles-grid article > span { margin-bottom: 24px; }
  .testimonial-grid blockquote { min-height: 210px; }

  .service-detail-list { padding-top: 20px; padding-bottom: 20px; }
  .service-detail { gap: 18px; padding: 46px 0; }
  .service-detail h2 { font-size: clamp(2rem,9vw,2.75rem); }
  .service-detail .service-number { margin-bottom: 20px; }
  .service-detail > div:last-child > p { font-size: 1rem; }
  .service-detail ul { gap: 0; margin-top: 18px; }
  .service-detail li { padding: 11px 0; font-size: .94rem; }

  .portfolio-project { gap: 24px; margin-bottom: 64px; }
  .portfolio-project__image { border-radius: 14px; box-shadow: 0 18px 42px rgba(6,20,35,.14); }
  .portfolio-project__copy h2 { font-size: clamp(2rem,9vw,2.75rem); }
  .concept-grid { gap: 44px; }
  .concept-image { margin-bottom: 16px; border-radius: 14px; }
  .concept-grid,.process-list { grid-template-columns: 1fr; }
  .process-list { gap: 10px; margin-top: 30px; background: transparent; border: 0; }
  .process-list li { min-height: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; }
  .process-list span { margin-bottom: 24px; }

  .contact-layout { gap: 38px; min-height: 0; padding-top: 118px; padding-bottom: 58px; }
  .contact-intro h1 { margin-bottom: 20px; font-size: clamp(2.6rem,12vw,3.7rem); line-height: .96; }
  .contact-intro > p:not(.eyebrow) { font-size: 1rem; }
  .contact-notes { gap: 14px; margin-top: 32px; }
  .contact-form--page { padding: 22px; border-radius: 16px; }
  .contact-form input,.contact-form select,.contact-form textarea { font-size: 16px; }

  .page-cta { padding-top: 68px; padding-bottom: 68px; }
  .page-cta h2 { max-width: 12ch; text-wrap: balance; }
  .page-cta .button,.cta--compact > .button { width: 100%; justify-self: stretch; }

  .inner-page .site-footer { gap: 24px; padding-top: 42px; padding-bottom: 32px; }
  .inner-page .site-footer__nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 4px; }
  .inner-page .site-footer__nav a { padding: 10px 0; }
}

@media (max-width: 430px) {
  .page-hero { min-height: 400px; padding-top: 112px; padding-bottom: 46px; }
  .page-hero h1 { font-size: clamp(2.35rem,11vw,3rem); }
  .split-section--page,.principles-section,.process-section,.concept-section,.testimonial-section,.portfolio-list { padding-top: 50px; padding-bottom: 50px; }
  .split-section--page .founders-portraits { min-height: 280px; }
  .contact-layout { padding-top: 106px; }
  .contact-notes > div { grid-template-columns: 30px 1fr; }
  .contact-form--page { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { --hero-scale: 1; --hero-shift: 0px; --hero-video-opacity: 1; --hero-world-scale: 1; --hero-content-opacity: 1; --hero-content-shift: 0px; }
  body:not(.inner-page) .hero__world::before,
  body:not(.inner-page) .hero__world::after { animation: none; }
}