/* ART-DIRECTION-P2 — premium refinement layer over the reversible P1 checkpoint */
:root {
  --p2-ease-out: cubic-bezier(.16, 1, .3, 1);
  --p2-ease-state: cubic-bezier(.2, .75, .25, 1);
}

/* Global precision: restrained state changes and a calmer material scale */
.p2 .site-header {
  background: linear-gradient(180deg, rgba(3,5,6,.975), rgba(5,8,10,.91));
  backdrop-filter: blur(10px);
}
.p2 .desktop-nav a,
.p2 .footer-main a {
  transition: color .22s var(--p2-ease-state);
}
.p2 .desktop-nav a:hover,
.p2 .desktop-nav a:focus-visible,
.p2 .footer-main a:hover,
.p2 .footer-main a:focus-visible { color: var(--ad-silver-0); }

/* Hero: the same composition, with directed material progression */
.p2 .hero {
  background:
    radial-gradient(ellipse 48% 70% at 79% 43%, rgba(77,94,104,.14), transparent 70%),
    linear-gradient(137deg, #020405 0%, #06090b 57%, #090d10 100%);
}
.p2 .hero-content { padding-top: clamp(154px, 18vh, 208px); }
.p2 .hero h1 {
  max-width: 1060px;
  letter-spacing: -.057em;
  line-height: .94;
  text-wrap: balance;
}
.p2 .hero h1 em {
  display: block;
  transform: translate3d(calc((1 - var(--p2-hero, 0)) * 12px), calc((1 - var(--p2-hero, 0)) * 5px), 0);
  opacity: calc(.86 + var(--p2-hero, 0) * .14);
}
.p2 .hero-plane-grid {
  opacity: calc(.72 - var(--p2-hero, 0) * .18);
  background-size: clamp(112px, 10.5vw, 164px) clamp(112px, 10.5vw, 164px);
}
.p2 .hero-plane-axis {
  transform: rotate(-35deg) scaleX(calc(.52 + var(--p2-hero, 0) * .48));
  opacity: calc(.32 + var(--p2-hero, 0) * .36);
}
.p2 .hero-plane-mark {
  right: -3vw;
  top: 15%;
  height: 72vh;
  width: 56vw;
  transform: translate3d(calc(var(--p1-pointer-x, 0) * 3px), calc(var(--p2-hero, 0) * -12px + var(--p1-pointer-y, 0) * 3px), 0)
    scale(calc(.992 + var(--p2-hero, 0) * .024));
}
.p2 .hero-plane-mark img {
  opacity: calc(.55 + var(--p2-hero, 0) * .11);
  filter: grayscale(1) brightness(.39) contrast(1.42)
    drop-shadow(1px 0 rgba(225,232,236,.28))
    drop-shadow(-1px 0 rgba(0,0,0,.9));
}
.p2 .hero-plane-mark::before {
  opacity: calc(.42 + var(--p2-hero, 0) * .28);
  transform: scaleX(calc(.6 + var(--p2-hero, 0) * .16)) rotate(calc(-16deg + var(--p2-hero, 0) * 3deg));
}
.p2 .hero-plane-mark::after {
  inset: 21% 9%;
  opacity: calc(.1 + var(--p2-hero, 0) * .58);
  background: linear-gradient(110deg,
    transparent 0%,
    transparent calc(var(--p2-light, 16%) - 11%),
    rgba(142,184,207,.035) calc(var(--p2-light, 16%) - 7%),
    rgba(226,236,241,.58) var(--p2-light, 16%),
    rgba(45,133,184,.22) calc(var(--p2-light, 16%) + 5%),
    transparent calc(var(--p2-light, 16%) + 12%),
    transparent 100%);
  filter: none;
}
.p2 .hero-plane-measure i { transform: scaleX(calc(.24 + var(--p2-hero, 0) * .76)); box-shadow: none; }
.p2 .hero-plane-measure span { opacity: calc(.48 + var(--p2-hero, 0) * .4); }
.p2 .hero-lower { margin-top: clamp(40px, 5.2vh, 64px); }
.p2 .hero-exit { min-height: 78px; }
.p2 .hero-exit > span:last-child { opacity: .68; }

/* A local editorial turn: progression without a page-wide technical line */
.p2 .idea { padding-block: clamp(128px, 15vw, 214px); }
.p2 .idea-main { max-width: 915px; }
.p2 .idea h2 { letter-spacing: -.052em; text-wrap: balance; }
.p2 .idea-rule span { transform: scaleX(calc(.12 + var(--p2-idea, 0) * .88)); }

/* Web: second statement, material object first and technical effect second */
.p2 .solutions { padding-top: clamp(130px, 14vw, 206px); }
.p2 .solutions-intro { margin-bottom: clamp(104px, 11vw, 164px); }
.p2 .web-feature {
  min-height: clamp(560px, 48vw, 680px);
  background:
    linear-gradient(116deg, rgba(255,255,255,.015), transparent 34%),
    linear-gradient(180deg, transparent 68%, rgba(142,184,207,.014));
}
.p2 .feature-watermark {
  background: linear-gradient(106deg,
    #080c0e 0%,
    #11171b calc(var(--p2-web-light, 9%) - 14%),
    #3c484f calc(var(--p2-web-light, 9%) - 4%),
    #8ca6b4 var(--p2-web-light, 9%),
    #252e33 calc(var(--p2-web-light, 9%) + 7%),
    #080c0e calc(var(--p2-web-light, 9%) + 17%));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 1px 0 rgba(226,232,235,.035), -1px 0 rgba(0,0,0,.92);
  transform: translate3d(calc(var(--p2-web, 0) * -5px), calc((.5 - var(--p2-web, 0)) * 5px), 0);
  opacity: calc(.68 + var(--p2-web, 0) * .16);
}
.p2 .web-title-block h3 {
  letter-spacing: -.055em;
  transform: translate3d(0, calc((.5 - var(--p2-web, 0)) * 3px), 0);
}
.p2 .web-title-block h3 em { color: color-mix(in srgb, var(--ad-blue-silver) 88%, white 12%); }
.p2 .web-copy { align-self: center; max-width: 380px; }
.p2 .feature-baseline span { width: calc(13% + var(--p2-web, 0) * 19%); }
.p2 .feature-baseline i { left: calc(13% + var(--p2-web, 0) * 19%); box-shadow: 0 0 0 3px rgba(0,79,132,.08); }

/* Ecommerce and Systems: quieter than Web, still intentionally composed */
.p2 .other-solutions { gap: clamp(44px, 7vw, 108px); margin-top: clamp(88px, 9vw, 136px); }
.p2 .other-solutions article { padding-block: clamp(44px, 5vw, 72px); }
.p2 .other-solutions h3 { letter-spacing: -.045em; margin-bottom: 28px; }
.p2 .other-solutions p { max-width: 530px; }
.p2 .solution-eyebrow { margin-bottom: clamp(52px, 6vw, 88px); }
.p2 .solution-notation { opacity: .78; }
.p2 .other-solutions article:hover .solution-notation,
.p2 .other-solutions article:focus-within .solution-notation { opacity: 1; }

/* Care resolves the family as a continuing layer */
.p2 .care-layer {
  margin-top: clamp(94px, 10vw, 150px);
  padding-block: clamp(48px, 5vw, 72px);
  background: linear-gradient(90deg, rgba(198,205,209,.018), transparent 58%);
}
.p2 .care-line { height: 1px; opacity: calc(.36 + var(--p2-care, 0) * .5); width: calc(20% + var(--p2-care, 0) * 54%); }
.p2 .care-layer::after {
  left: calc(var(--p2-care, 0) * 66% - 5%);
  width: 10%;
  height: 1px;
  opacity: calc(var(--p2-care, 0) * .38);
  background: linear-gradient(90deg, transparent, var(--ad-blue-silver), transparent);
}

/* Process: paper-like through tone, spacing and rules only */
.p2 .process {
  background: linear-gradient(180deg, #ebecee 0%, #e5e7e8 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.95), inset 0 -1px rgba(62,73,79,.2);
  padding-block: clamp(128px, 13vw, 190px);
}
.p2 .process-heading h2 { letter-spacing: -.052em; }
.p2 .process-sequence { border-top-color: #7e8a90; }
.p2 .process-sequence > div { padding-block: 27px; border-bottom-color: #a2aaae; }

/* Partners: same publication, a distinct audience, less overtly "tech" */
.p2 .partners {
  background:
    linear-gradient(120deg, rgba(255,255,255,.03) 0%, transparent 25%),
    radial-gradient(ellipse 66% 125% at 94% 14%, rgba(142,184,207,.11), transparent 57%),
    linear-gradient(136deg, #10171b 0%, #0c171e 51%, #092638 100%);
}
.p2 .partners::before { opacity: calc(.42 + var(--p2-partners, 0) * .22); }
.p2 .partners::after { opacity: .42; }
.p2 .partners h2 { letter-spacing: -.052em; text-wrap: balance; }
.p2 .partners-copy { max-width: 420px; }

/* Conversion scene: one designed interface, not a collection of controls */
.p2 .contact { padding-block: clamp(132px, 13vw, 188px); }
.p2 .contact-head { align-items: end; margin-bottom: clamp(76px, 8vw, 112px); }
.p2 .contact-head h2 { max-width: 760px; letter-spacing: -.055em; text-wrap: balance; }
.p2 .contact-head p { max-width: 390px; padding-bottom: 8px; }
.p2 .contact-options { grid-template-columns: minmax(260px,.72fr) minmax(540px,1.45fr); }
.p2 .contact-direct { padding: 44px clamp(28px,4vw,58px) 44px 0; }
.p2 .contact-form-wrap { padding: 44px 0 0 clamp(44px,5vw,72px); }
.p2 .contact-form-wrap h3 { margin-top: 27px; letter-spacing: -.035em; }
.p2 .contact-form-wrap > p { margin-top: 10px; }
.p2 .form-grid { gap: 28px 24px; margin-top: 40px; }
.p2 .field { gap: 9px; }
.p2 .field label { font-size: .79rem; }
.p2 .field input,
.p2 .field select,
.p2 .field textarea {
  min-height: 52px;
  padding-inline: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.013), transparent), #0e1417;
  border-color: #48555c;
  border-bottom-color: #748087;
  border-radius: 0;
}
.p2 .field textarea { min-height: 132px; padding-block: 14px; resize: vertical; }
.p2 .field input:hover,
.p2 .field select:hover,
.p2 .field textarea:hover { background: #11181c; border-color: #718087; }
.p2 .field input:focus,
.p2 .field select:focus,
.p2 .field textarea:focus {
  outline: 2px solid var(--ad-blue-silver);
  outline-offset: 3px;
  border-color: #657b87;
  background: #11181c;
  box-shadow: inset 2px 0 var(--ad-blue);
}
.p2 .field::after { height: 1px; background: linear-gradient(90deg, var(--ad-blue-silver), var(--ad-blue)); }
.p2 .form-consent { max-width: 680px; margin-top: 28px; line-height: 1.55; }
.p2 .form-actions { margin-top: 24px; align-items: center; }
.p2 .form-actions button,
.p2 .contact-direct > a {
  transition: background-color .22s var(--p2-ease-state), border-color .22s var(--p2-ease-state), transform .22s var(--p2-ease-state);
}
.p2 .form-actions button { min-height: 54px; padding-inline: 26px; }

/* Mobile is recomposed: tighter hero crop, shorter scenes, W retained as atmosphere */
@media (max-width: 700px) {
  .p2 .site-header { backdrop-filter: none; }
  .p2 .hero { min-height: max(760px, 100svh); }
  .p2 .hero-content { padding-top: 210px; }
  .p2 .hero h1 { font-size: clamp(3.05rem, 14vw, 4rem); line-height: .96; letter-spacing: -.06em; }
  .p2 .hero h1 em { transform: none; }
  .p2 .hero-plane-mark { right: -50%; top: 3%; width: 112%; height: 49vh; transform: none; }
  .p2 .hero-plane-mark img { opacity: .5; }
  .p2 .hero-plane-mark::after { inset: 17% 5%; opacity: calc(.08 + var(--p2-hero, 0) * .28); }
  .p2 .hero-lower { margin-top: 34px; }
  .p2 .hero-exit > span:last-child { display: none; }
  .p2 .idea { padding-block: 112px; }
  .p2 .idea h2 { font-size: clamp(3.1rem, 14vw, 4.35rem); }
  .p2 .solutions { padding-top: 112px; }
  .p2 .solutions-intro { margin-bottom: 82px; }
  .p2 .web-feature { min-height: 600px; overflow: hidden; }
  .p2 .feature-watermark {
    display: block;
    left: -8%;
    top: 22%;
    font-size: min(104vw, 26rem);
    opacity: .34;
    background: linear-gradient(112deg, #090d0f 15%, #263239 48%, #0a0e10 72%);
    -webkit-background-clip: text;
    background-clip: text;
    transform: none;
  }
  .p2 .web-title-block { position: relative; z-index: 1; }
  .p2 .web-title-block h3 { transform: none; }
  .p2 .web-copy { position: relative; z-index: 1; align-self: auto; }
  .p2 .other-solutions { gap: 54px; margin-top: 74px; }
  .p2 .other-solutions article { padding-block: 42px; }
  .p2 .solution-eyebrow { margin-bottom: 42px; }
  .p2 .care-layer { margin-top: 78px; padding-block: 44px; }
  .p2 .process { padding-block: 110px; }
  .p2 .partners { padding-block: 112px; }
  .p2 .partners::after { opacity: .22; }
  .p2 .contact { padding-block: 112px; }
  .p2 .contact-head { margin-bottom: 64px; }
  .p2 .contact-options { display: block; }
  .p2 .contact-direct { padding: 38px 0 54px; }
  .p2 .contact-form-wrap { border-top: 1px solid var(--ad-silver-3); padding: 54px 0 0; }
  .p2 .form-grid { gap: 24px; margin-top: 34px; }
  .p2 .form-actions { align-items: stretch; }
  .p2 .form-actions button { width: 100%; justify-content: space-between; }
}

@media (max-width: 370px) {
  .p2 .hero-content { padding-top: 188px; }
  .p2 .hero h1 { font-size: clamp(2.78rem, 14.5vw, 3.35rem); }
  .p2 .hero-plane-mark { right: -59%; width: 124%; }
  .p2 .web-feature { min-height: 570px; }
}

@media (prefers-reduced-motion: reduce) {
  .p2 .hero h1 em,
  .p2 .hero-plane-axis,
  .p2 .hero-plane-mark,
  .p2 .hero-plane-mark::before,
  .p2 .hero-plane-measure i,
  .p2 .idea-rule span,
  .p2 .feature-watermark,
  .p2 .web-title-block h3 { transform: none; }
  .p2 .hero-plane-mark::after { --p2-light: 55%; opacity: .22; }
  .p2 .feature-watermark { background: #11171a; -webkit-background-clip: text; background-clip: text; opacity: .8; }
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .p2 .web-title-block h3 em { color: var(--ad-blue-silver); }
}