/* ============================================================
   Inner-page HERO designs — one distinct design per page.
   Loaded ONLY on inner pages (home page is untouched).
   ============================================================ */

/* ---------- shared ---------- */
.ph {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--hh, 100px) * -1);
  padding: calc(var(--hh, 100px) + clamp(2rem, 4vw, 3.5rem)) 0 clamp(3.5rem, 6vw, 5rem);
}
.ph h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 1.3rem; }
.ph .lede { font-size: 1.1rem; line-height: 1.65; max-width: 560px; margin: 0; }
.ph-kicker { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1.3rem; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }
.ph canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ph-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.ph-rise { opacity: 0; transform: translateY(26px); animation: phRise .9s var(--ease) var(--d, .3s) forwards; }
@keyframes phRise { to { opacity: 1; transform: none; } }

/* pill buttons (deliberately unlike the home page's square CTA) */
.ph-btn { display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.35rem; border: 1.5px solid transparent; border-radius: 999px; font: 600 .95rem/1.2 var(--display); transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.ph-btn .arr { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -.55rem; border-radius: 50%; background: rgba(27, 55, 58, .14); transition: transform .25s var(--ease); }
.ph-btn:hover { transform: translateY(-2px); }
.ph-btn:hover .arr { transform: translateX(3px); }
.ph-btn.solid { background: var(--lime); color: var(--ink); }
.ph-btn.solid:hover { background: #fff; box-shadow: 0 14px 28px rgba(0, 0, 0, .25); }
.ph-btn.ink { background: var(--ink); color: #fff; }
.ph-btn.ink .arr { background: rgba(153, 244, 107, .2); color: var(--mint); }
.ph-btn.ink:hover { background: #0f2426; box-shadow: 0 14px 28px rgba(27, 55, 58, .3); }
.ph-btn.ghost { color: var(--ink); border-color: rgba(27, 55, 58, .35); background: transparent; }
.ph-btn.ghost:hover { border-color: var(--ink); background: rgba(27, 55, 58, .06); }
.ph-btn.line { padding: .4rem .2rem; border: 0; border-radius: 0; border-bottom: 2px solid var(--lime); color: var(--ink); }
.ph-btn.line:hover { border-bottom-color: var(--ink); }
.ph-dark .ph-btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ph-dark .ph-btn.ghost:hover { border-color: var(--mint); color: var(--mint); background: transparent; }

/* dark heroes */
.ph-dark { color: #fff; background: var(--ink); }
.ph-dark .crumbs { color: rgba(255, 255, 255, .6); }
.ph-dark .crumbs a:hover { color: #fff; }
.ph-dark .crumbs [aria-current] { color: #fff; }
.ph-dark .ph-kicker { color: var(--mint); }
.ph-dark .ph-kicker::before { content: ""; width: 26px; height: 2px; background: var(--mint); }
.ph-dark h1 { color: #fff; }
.ph-dark h1 .accent { background: linear-gradient(90deg, var(--mint), #d5ff9e, var(--mint)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--mint); animation: phShimmer 6s linear infinite; }
@keyframes phShimmer { to { background-position: -200% 0; } }
.ph-dark .lede { color: rgba(255, 255, 255, .82); }

/* ============================================================
   1 · SOLUTIONS — dark, centred, animated solution pipeline
   ============================================================ */
.ph-solutions { text-align: center; padding-bottom: calc(44px + clamp(3rem, 5vw, 4.5rem)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); }
.ph-solutions .ph-glow { background: radial-gradient(760px 420px at 50% 0%, rgba(153, 244, 107, .2), transparent 70%), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 20%, #000, transparent 80%); mask-image: radial-gradient(ellipse 80% 90% at 50% 20%, #000, transparent 80%); }
.ph-solutions .crumbs { justify-content: center; }
.ph-solutions h1 { font-size: clamp(2.3rem, 5vw, 4.3rem); max-width: 930px; margin-left: auto; margin-right: auto; }
.ph-solutions .lede { margin-left: auto; margin-right: auto; }
.ph-solutions .ph-actions { justify-content: center; }
.ph-solutions .ph-kicker { padding: .45rem .95rem; border: 1px solid rgba(153, 244, 107, .45); border-radius: 999px; }
.ph-solutions .ph-kicker::before { width: 8px; height: 8px; border-radius: 50%; animation: pulseMint 2s infinite; }

.pl { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); max-width: 980px; margin: 3.4rem auto 0; }
.pl-track { position: absolute; left: 8.33%; right: 8.33%; top: 31px; height: 2px; background: repeating-linear-gradient(90deg, rgba(153, 244, 107, .75) 0 6px, transparent 6px 12px); background-size: 12px 2px; animation: dashX 1s linear infinite; }
.pl-packet { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px 2px var(--mint); animation: plMove 6s linear infinite; }
@keyframes plMove { from { left: 0; } to { left: calc(100% - 10px); } }
.pl-node { position: relative; display: flex; flex-direction: column; align-items: center; }
.pl-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1px solid rgba(153, 244, 107, .4); color: var(--mint); animation: plLit 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s - .35s); }
.pl-ic svg { width: 28px; height: 28px; }
@keyframes plLit {
  0%, 18%, 100% { background: var(--ink-2); color: var(--mint); transform: scale(1); box-shadow: 0 0 0 0 rgba(153, 244, 107, 0); }
  5%, 12% { background: var(--lime); color: var(--ink); transform: scale(1.14); box-shadow: 0 0 0 9px rgba(153, 244, 107, .18), 0 0 26px rgba(153, 244, 107, .6); }
}
.pl-node b { margin-top: .95rem; font: 600 .86rem/1.3 var(--display); color: rgba(255, 255, 255, .9); }

.ph-strip { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 980px; margin: 3rem auto 0; border: 1px solid rgba(153, 244, 107, .28); border-radius: 16px; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: left; }
.ph-strip > div { padding: 1.15rem 1.5rem; border-right: 1px solid rgba(153, 244, 107, .22); }
.ph-strip > div:last-child { border-right: 0; }
.ph-strip dt { font: 700 1.3rem/1.2 var(--display); letter-spacing: -.02em; color: #fff; }
.ph-strip dd { margin: .25rem 0 0; font-size: .82rem; color: var(--mint); }
@media (max-width: 767.98px) {
  .pl { grid-template-columns: repeat(3, 1fr); row-gap: 1.8rem; }
  .pl-track { display: none; }
  .ph-strip { grid-template-columns: repeat(2, 1fr); }
  .ph-strip > div:nth-child(2) { border-right: 0; }
  .ph-strip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(153, 244, 107, .22); }
}

/* ============================================================
   2 · INDUSTRIES — light, editorial split + scrolling industry cards
   ============================================================ */
.ph-industries { padding-bottom: 0; background: linear-gradient(180deg, #fff 0%, #f6f9f4 100%); }
.ph-blob { position: absolute; z-index: -1; top: -120px; right: -100px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(76, 204, 12, .28), transparent 65%); animation: blobMove 14s ease-in-out infinite; }
@keyframes blobMove { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 50px) scale(1.12); } }
.ph-industries .crumbs { color: var(--label); }
.ph-industries .ph-kicker { color: var(--ink); }
.ph-industries .ph-kicker::before { content: ""; width: 26px; height: 2px; background: var(--lime); }
.ph-industries h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); color: var(--heading); margin: 0; }
.ph-industries h1 .accent { color: var(--lime); display: block; }
.ph-industries .lede { color: var(--slate); }
.ph-chips { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.ph-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .85rem; color: var(--slate); box-shadow: 0 6px 16px -10px rgba(27, 55, 58, .3); }
.ph-chip b { font: 700 1.05rem var(--display); color: var(--ink); }

.im { display: grid; gap: 1rem; margin-top: 3rem; padding-bottom: clamp(3rem, 5vw, 4.2rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.im-row { display: flex; gap: 1rem; width: max-content; animation: imLeft 46s linear infinite; }
.im-row.rev { animation-name: imRight; animation-duration: 52s; }
.im:hover .im-row { animation-play-state: paused; }
@keyframes imLeft { to { transform: translateX(-50%); } }
@keyframes imRight { from { transform: translateX(-50%); } to { transform: none; } }
.im-card { position: relative; flex: none; width: 280px; height: 158px; border-radius: 16px; overflow: hidden; background: var(--ink); color: #fff; box-shadow: 0 14px 28px -16px rgba(27, 55, 58, .5); }
.im-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.im-card:hover img { transform: scale(1.1); }
.im-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(27, 55, 58, .88)); }
.im-card span { position: absolute; left: 1rem; bottom: .85rem; z-index: 2; font: 600 .95rem var(--display); }
.im-card.g1 { background: linear-gradient(135deg, var(--ink), #2f6b5e); }
.im-card.g2 { background: linear-gradient(135deg, #25484a, #4a8f6d); }
.im-card .big { position: absolute; z-index: 2; right: 1rem; top: 1rem; width: 46px; height: 46px; color: var(--mint); }
@media (max-width: 575.98px) { .im-card { width: 220px; height: 128px; } }

/* ============================================================
   3 · CAPABILITIES — dark, 3D technology stack (visual on the left)
   ============================================================ */
.ph-capabilities { background: linear-gradient(160deg, #21474b 0%, var(--ink) 55%, #12292c 100%); }
.ph-capabilities .ph-glow { background: radial-gradient(560px 460px at 22% 55%, rgba(153, 244, 107, .16), transparent 70%); }
.ph-capabilities h1 { font-size: clamp(2.3rem, 4.5vw, 3.9rem); }
.iso { position: relative; height: clamp(330px, 42vw, 480px); display: grid; place-items: center; perspective: 1500px; }
.iso-stage { --s: clamp(190px, 22vw, 290px); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg) translateZ(-70px); }
.iso-stage::before { content: ""; position: absolute; inset: -12%; transform: translateZ(-30px); background: radial-gradient(rgba(0, 0, 0, .55), transparent 68%); filter: blur(16px); }
.iso-plate {
  position: absolute; inset: 0; border-radius: 16px; display: flex; align-items: flex-end; padding: .9rem 1rem;
  transform: translateZ(calc(var(--i) * var(--s) * .18));
  border: 1.5px solid rgba(153, 244, 107, .6);
  background: radial-gradient(rgba(153, 244, 107, .3) 1.4px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(135deg, rgba(43, 82, 84, .96), rgba(27, 55, 58, .96));
  box-shadow: 0 0 22px rgba(153, 244, 107, .12);
  animation: isoFloat 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s);
}
.iso-plate b { font: 700 clamp(.62rem, .9vw, .8rem)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.iso-plate:nth-of-type(5) { background: radial-gradient(rgba(27, 55, 58, .35) 1.4px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(135deg, var(--mint), var(--lime)); border-color: #d5ff9e; box-shadow: 0 0 40px rgba(153, 244, 107, .55); }
.iso-plate:nth-of-type(5) b { color: var(--ink); }
@keyframes isoFloat { 0%, 100% { translate: 0 0 0; } 50% { translate: 0 0 clamp(8px, 1.2vw, 16px); } }
.iso-scan { position: absolute; inset: -5%; border-radius: 20px; border: 2px solid var(--mint); box-shadow: 0 0 30px var(--mint), inset 0 0 26px rgba(153, 244, 107, .35); opacity: 0; animation: isoScan 5.5s ease-in-out infinite; }
@keyframes isoScan { 0% { translate: 0 0 0; opacity: 0; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { translate: 0 0 calc(var(--s) * .78); opacity: 0; } }

/* ============================================================
   4 · INSIGHTS — editorial, moving watermark + cycling article deck
   ============================================================ */
.ph-insights { background: #f4f6f4; }
.ph-mark { position: absolute; z-index: -1; left: 0; top: 50%; white-space: pre; font: 800 clamp(9rem, 22vw, 18rem)/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(27, 55, 58, .1); transform: translateY(-50%); animation: markMove 60s linear infinite; pointer-events: none; }
.ph-mark::before { content: "INSIGHTS   INSIGHTS   INSIGHTS   INSIGHTS   "; }
@keyframes markMove { to { transform: translate(-25%, -50%); } }
.ph-insights .ph-kicker { padding: .35rem .8rem; background: var(--ink); color: var(--mint); border-radius: 6px; }
.ph-insights h1 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); color: var(--heading); }
.ph-insights h1 .accent { color: var(--heading); background: linear-gradient(transparent 62%, rgba(76, 204, 12, .45) 62%) 0 0 / 0% 100% no-repeat; animation: hl 1.1s var(--ease) .8s forwards; }
@keyframes hl { to { background-size: 100% 100%; } }
.ph-insights .lede { color: var(--slate); }
.ph-inline { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 2.6rem; }
.ph-inline > div { padding-left: .9rem; border-left: 3px solid var(--lime); }
.ph-inline b { display: block; font: 700 1.45rem/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ph-inline > div > span { font-size: .8rem; color: var(--label); }

.deck { position: relative; width: min(100%, 370px); height: 310px; margin: 1rem auto 3.5rem; }
.dk { position: absolute; inset: 0; padding: 1.2rem 1.3rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 26px 46px -20px rgba(27, 55, 58, .38); animation: deck 12s cubic-bezier(.6, 0, .3, 1) infinite; animation-delay: var(--d); }
.dk-img { display: grid; place-items: center; height: 98px; margin-bottom: 1rem; border-radius: 12px; color: #fff; }
.dk-img svg { width: 38px; height: 38px; }
.dk-img.d1 { background: linear-gradient(135deg, var(--ink), #2f6b5e); }
.dk-img.d2 { background: linear-gradient(135deg, #3f8a5b, var(--lime)); }
.dk-img.d3 { background: linear-gradient(135deg, #12292c, #4a8f6d); }
.dk-img.d4 { background: linear-gradient(135deg, #2f6b5e, var(--mint)); color: var(--ink); }
.dk-tag { display: inline-block; padding: .28rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(76, 204, 12, .16); color: var(--ink); }
.dk h3 { margin: .7rem 0 .6rem; font-size: 1.05rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.dk p { display: grid; gap: .4rem; margin: 0 0 .7rem; }
.dk p i { display: block; height: 7px; border-radius: 4px; background: #e8ecef; }
.dk p i:last-child { width: 62%; }
.dk small { color: var(--label); font-size: .76rem; }
@keyframes deck {
  0%, 21%   { transform: translate(0, 0) rotate(-1.5deg) scale(1); opacity: 1; z-index: 4; }
  25%       { transform: translate(72%, -8%) rotate(13deg) scale(1); opacity: 0; z-index: 5; }
  25.01%    { transform: translate(-16px, 46px) rotate(2deg) scale(.86); opacity: 0; z-index: 1; }
  29%, 46%  { transform: translate(-16px, 46px) rotate(2deg) scale(.86); opacity: 1; z-index: 1; }
  50%, 71%  { transform: translate(-8px, 24px) rotate(1deg) scale(.93); opacity: 1; z-index: 2; }
  75%, 96%  { transform: translate(6px, 10px) rotate(-.5deg) scale(.965); opacity: 1; z-index: 3; }
  100%      { transform: translate(0, 0) rotate(-1.5deg) scale(1); opacity: 1; z-index: 4; }
}

/* ============================================================
   5 · ABOUT — centred statement + growing "journey" line
   ============================================================ */
.ph-about { text-align: center; background: linear-gradient(180deg, #fff 0%, #eff8e8 100%); }
.ph-about::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -220px; width: 900px; height: 500px; translate: -50% 0; background: radial-gradient(closest-side, rgba(76, 204, 12, .16), transparent); }
.ph-about .crumbs { justify-content: center; }
.ph-about .ph-kicker { color: var(--ink); }
.ph-about .ph-kicker::before, .ph-about .ph-kicker::after { content: ""; width: 26px; height: 2px; background: var(--lime); }
.ph-about h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); color: var(--heading); max-width: 900px; margin-left: auto; margin-right: auto; }
.ph-about h1 .accent { color: var(--lime); }
.ph-about .lede { color: var(--slate); margin: 0 auto; }
.ph-about .ph-actions { justify-content: center; }

.jr-wrap { margin-top: 3.4rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
.jr-wrap::-webkit-scrollbar { display: none; }
.jr { position: relative; min-width: 700px; max-width: 1000px; margin: 0 auto; padding-top: 1rem; }
.jr-plot { position: relative; height: 150px; }
.jr-svg { display: block; width: 100%; height: 150px; overflow: visible; }
.jr-svg path { fill: none; stroke-linecap: round; }
.jr-base { stroke: rgba(27, 55, 58, .14); stroke-width: 4; }
.jr-draw { stroke: var(--lime); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: jrDraw 2.8s var(--ease) .7s forwards; }
.jr-flow { stroke: #fff; stroke-width: 3; stroke-dasharray: 5 95; stroke-dashoffset: 5; opacity: .9; filter: drop-shadow(0 0 4px var(--lime)); animation: jrFlow 4.5s linear 3.4s infinite; }
@keyframes jrDraw { to { stroke-dashoffset: 0; } }
@keyframes jrFlow { to { stroke-dashoffset: -100; } }
.jr-node { position: absolute; width: 24px; height: 24px; translate: -50% -50%; border-radius: 50%; background: #fff; border: 3px solid var(--lime); box-shadow: 0 6px 14px rgba(27, 55, 58, .2); opacity: 0; animation: nodePop .6s var(--ease) forwards; animation-delay: calc(1s + var(--i) * .5s); }
.jr-node i { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; animation: nodePing 3s ease-out infinite; animation-delay: calc(3.4s + var(--i) * .5s); }
@keyframes nodePop { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes nodePing { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.jr-cols { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 1.4rem; }
.jr-cols > div { padding: 0 .5rem; opacity: 0; animation: phRise .7s var(--ease) forwards; animation-delay: calc(1.2s + var(--i) * .5s); }
.jr-cols span { display: block; font: 700 1.05rem var(--display); color: var(--lime); }
.jr-cols b { display: block; margin-top: .2rem; font: 600 .86rem/1.35 var(--display); color: var(--heading); }
.ph-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2.4rem; }
.ph-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.05rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 18px -12px rgba(27, 55, 58, .4); font-size: .84rem; color: var(--slate); }
.ph-pill b { font: 700 1rem var(--display); color: var(--ink); }

/* ============================================================
   6 · CAREERS — bright lime energy + rotating "team wall"
   ============================================================ */
.ph-careers { color: var(--ink); background: linear-gradient(135deg, #b4f98a 0%, #86e653 42%, #4ccc0c 100%); border-radius: 0 0 clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px); }
.ph-orb { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .28); animation: floaty 9s ease-in-out infinite; }
.ph-orb.o1 { width: 340px; height: 340px; top: -110px; left: -90px; }
.ph-orb.o2 { width: 220px; height: 220px; right: 6%; bottom: -70px; animation-delay: -4s; background: rgba(27, 55, 58, .1); }
.ph-careers .crumbs { color: rgba(27, 55, 58, .65); }
.ph-careers .crumbs [aria-current] { color: var(--ink); }
.ph-careers .ph-kicker { padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .55); }
.ph-careers h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); color: var(--ink); }
.ph-careers h1 .accent { display: inline-block; padding: 0 .22em; border-radius: .18em; background: var(--ink); color: var(--mint); transform: rotate(-1.5deg); }
.ph-careers .lede { color: rgba(27, 55, 58, .86); }
.ph-careers .ph-btn.ghost { border-color: rgba(27, 55, 58, .5); }

.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; max-width: 470px; margin: 0 auto; rotate: -5deg; }
.tw { aspect-ratio: 1 / .95; padding: .9rem; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 16px 28px -16px rgba(27, 55, 58, .5); animation: tileWave 5s ease-in-out infinite; animation-delay: calc((var(--r) + var(--c)) * .38s); }
.tw > div { font: 700 1.6rem/1 var(--display); }
.tw > div svg { width: 30px; height: 30px; }
.tw > div em { font-style: normal; font-size: 2.6rem; letter-spacing: -.04em; }
.tw span { font: 600 .78rem/1.25 var(--display); }
.tw.white { background: #fff; color: var(--ink); }
.tw.ink { background: var(--ink); color: var(--mint); }
.tw.glass { background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .7); color: var(--ink); }
.tw.av { align-items: center; justify-content: center; }
.tw.av > div { display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--mint), var(--lime)); color: var(--ink); font-size: 1.3rem; }
.tw.glass.av > div { background: var(--ink); color: var(--mint); }
@keyframes tileWave { 0%, 55%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-10px) scale(1.08); box-shadow: 0 26px 36px -14px rgba(27, 55, 58, .55); } }
.ph-inkband { display: grid; grid-template-columns: repeat(4, 1fr); margin: 3rem 0 0; padding: .5rem; border-radius: 20px; background: var(--ink); text-align: center; }
.ph-inkband > div { padding: 1rem .8rem; border-right: 1px solid rgba(153, 244, 107, .25); }
.ph-inkband > div:last-child { border-right: 0; }
.ph-inkband dt { font: 700 1.35rem/1.2 var(--display); color: #fff; }
.ph-inkband dd { margin: .25rem 0 0; font-size: .8rem; color: var(--mint); }
@media (max-width: 767.98px) {
  .wall { rotate: 0deg; max-width: 400px; }
  .ph-inkband { grid-template-columns: repeat(2, 1fr); }
  .ph-inkband > div:nth-child(2) { border-right: 0; }
  .ph-inkband > div:nth-child(-n+2) { border-bottom: 1px solid rgba(153, 244, 107, .25); }
}

/* ============================================================
   7 · CONTACT — centred, rippling signal + floating channels
   ============================================================ */
.ph-contact { text-align: center; background: radial-gradient(circle at 50% 28%, #ecfae1 0%, #fff 62%); }
.rp { position: absolute; z-index: -1; left: 50%; top: 36%; width: min(120vw, 1000px); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.rp i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(76, 204, 12, .45); opacity: 0; animation: rpl 8s ease-out infinite; }
.rp i:nth-child(2) { animation-delay: 2s; } .rp i:nth-child(3) { animation-delay: 4s; } .rp i:nth-child(4) { animation-delay: 6s; }
@keyframes rpl { 0% { transform: scale(.12); opacity: .7; } 100% { transform: scale(1); opacity: 0; } }
.fls { position: absolute; inset: 0; z-index: -1; }
.fl { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: var(--mint); box-shadow: 0 14px 26px -8px rgba(27, 55, 58, .5); animation: floaty 6s ease-in-out infinite; }
.fl svg { width: 22px; height: 22px; }
.fl:nth-child(even) { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.ph-contact .crumbs { justify-content: center; }
.ph-contact .ph-kicker { padding: .4rem .9rem; border: 1px solid rgba(76, 204, 12, .5); border-radius: 999px; background: #fff; color: var(--ink); }
.ph-contact .ph-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: pulseMint 2s infinite; }
.ph-contact h1 { font-size: clamp(2.5rem, 5.6vw, 4.8rem); color: var(--heading); max-width: 860px; margin-left: auto; margin-right: auto; }
.ph-contact h1 .accent { color: var(--lime); background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0% .12em no-repeat; animation: ul 1.2s var(--ease) .8s forwards; }
@keyframes ul { to { background-size: 100% .12em; } }
.ph-contact .lede { color: var(--slate); margin: 0 auto; }
.ph-contact .ph-actions { justify-content: center; }
.ph-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 900px; margin: 3.2rem auto 0; }
.ph-cards > div { padding: 1.2rem 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 36px -22px rgba(27, 55, 58, .5); animation: floaty 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
.ph-cards dt { font: 700 1.5rem/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ph-cards dd { margin: .3rem 0 0; font-size: .8rem; color: var(--label); }
@media (max-width: 767.98px) {
  .fl:nth-child(n+2) { display: none; }
  .fl { width: 40px; height: 40px; opacity: .85; }
  .ph-cards { grid-template-columns: repeat(2, 1fr); }
}