/* HHR-1 17 Oct 2026: Hero + Two ways in made soft and animated. Own file, CSS only; does not touch uploads/pfh-hox/*. Photos, words and links unchanged. Finished state is the default (no scroll-timeline support or reduced motion = everything shown). */
@property --hhr-a{syntax:"<angle>";inherits:false;initial-value:0deg}
/* ---------- Hero ---------- */
.ox .ox-hero{margin:8px clamp(8px,1.2vw,16px) clamp(10px,1.4vw,18px);border-radius:var(--r-lg);overflow:clip}
.ox .ox-hero__card{position:relative;isolation:isolate}
.ox .ox-hero__card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--hhr-a),rgba(238,140,69,0) 0 52%,var(--hot) 72%,var(--green-hi) 88%,rgba(63,191,132,0) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ox .ox-hero__strip{margin:14px 0 0!important;padding:0!important;background:none!important;overflow:visible;display:flex;flex-wrap:wrap;gap:8px}
.ox .ox-hero__strip a{display:inline-flex;align-items:center;gap:8px;margin:0!important;padding:10px 16px;border-radius:999px;background:rgba(11,23,41,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);color:#fff!important;font-weight:600;line-height:1.3;text-decoration:none;transition:background-color .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.ox .ox-hero__strip a::after{content:"\2192";flex:none;color:var(--soft);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ox .ox-hero__strip a:hover{background:var(--ink);transform:translateY(-2px)}
.ox .ox-hero__strip a:hover::after{transform:translateX(4px)}
.ox .ox-tiles{gap:10px}
.ox .ox-tile,.ox .ox-tile.is-on{border-radius:20px;border:1px solid rgba(255,255,255,.16);background:rgba(11,23,41,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 40px -22px rgba(0,0,0,.7);transform:none;translate:0 0;transition:background-color .25s,box-shadow .3s,translate .3s cubic-bezier(.22,1,.36,1)}
.ox .ox-tile:hover,.ox .ox-tile.is-on:hover{background:var(--ink);translate:0 -5px;box-shadow:0 26px 44px -20px rgba(0,0,0,.8)}
.ox .ox-tiles li:nth-child(2) .ox-tile{background:linear-gradient(160deg,var(--hot-hi),#C9631D);border-color:rgba(255,255,255,.35)}
.ox .ox-tiles li:nth-child(2) .ox-tile:hover{background:linear-gradient(160deg,#F5A05F,var(--hot))}
.ox .ox-tiles li:nth-child(2) .ox-tile__t,.ox .ox-tiles li:nth-child(2) .ox-tile__t b,.ox .ox-tiles li:nth-child(2) .ox-tile__n{color:var(--ink)!important}
.ox .ox-tiles li:nth-child(2) .ox-tile__n{display:flex;align-items:center;gap:8px}
.ox .ox-tiles li:nth-child(2) .ox-tile__n::after{content:"";width:9px;height:9px;border-radius:50%;background:#1E5C42;box-shadow:0 0 0 0 rgba(30,92,66,.5)}
/* ---------- Two ways in ---------- */
.ox .ox-intro{position:relative;isolation:isolate;overflow:clip;margin:clamp(12px,1.6vw,24px) 0;border-radius:var(--r-lg);background:radial-gradient(50% 45% at 100% 0,rgba(63,191,132,.14),transparent 70%),radial-gradient(40% 40% at 0 100%,rgba(224,122,47,.1),transparent 70%),linear-gradient(180deg,#fff,var(--stone))}
.ox .ox-door{transition:translate .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.ox .ox-door:hover{translate:0 -6px;box-shadow:0 28px 50px -20px rgba(0,0,0,.55)}
.ox .ox-door .ox-pillar__k{display:flex;align-items:center;gap:12px}
.ox .ox-door .ox-pillar__k::before{content:"";flex:none;width:40px;height:40px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:21px;background-color:var(--green)}
.ox .ox-door--help .ox-pillar__k::before{background-color:var(--hot);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2305080D' d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E")}
.ox .ox-door--org .ox-pillar__k::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='6' cy='7' r='2.6'/%3E%3Ccircle cx='18' cy='7' r='2.6'/%3E%3Ccircle cx='12' cy='18' r='2.6'/%3E%3C/g%3E%3Cpath d='M8 8.8l3 7.2M16 8.8l-3 7.2M8.6 7h6.8' stroke='%23fff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")}
.ox .ox-door-strip .ox-pillar__k{display:flex;align-items:center;gap:12px}
.ox .ox-door-strip .ox-pillar__k::before{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--green-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2305080D' d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/18px no-repeat}
@media (max-width:767px){.ox .ox-hero__strip a{font-size:14px}.ox .ox-door:hover{translate:0 0}}
/* ---------- motion ---------- */
@keyframes hhr-spin{to{--hhr-a:360deg}}
@keyframes hhr-live{0%{box-shadow:0 0 0 0 rgba(30,92,66,.55)}100%{box-shadow:0 0 0 12px rgba(30,92,66,0)}}
@keyframes hhr-ring{0%{box-shadow:0 0 0 0 rgba(224,122,47,.5)}100%{box-shadow:0 0 0 14px rgba(224,122,47,0)}}
@keyframes hhr-ringg{0%{box-shadow:0 0 0 0 rgba(46,125,91,.5)}100%{box-shadow:0 0 0 14px rgba(46,125,91,0)}}
@keyframes hhr-dock{to{translate:0 -34px;opacity:.25}}
@keyframes hhr-rise{from{opacity:.4;translate:0 46px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes hhr-drift{from{background-position:center 28%}to{background-position:center 78%}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox .ox-hero__card::before{animation:hhr-spin 9s linear infinite}
  .ox .ox-tiles li:nth-child(2) .ox-tile__n::after{animation:hhr-live 1.8s ease-out infinite}
  .ox-mo .ox-tiles{animation:hhr-dock linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  .ox .ox-door--help .ox-pillar__k::before{animation:hhr-ring 2.6s ease-out infinite}
  .ox .ox-door--org .ox-pillar__k::before{animation:hhr-ringg 2.6s ease-out .9s infinite}
  .ox-mo .ox-intro .ox-pillars{view-timeline:--hhrp block}
  .ox-mo .ox-intro .ox-door,.ox-mo .ox-intro .ox-door-strip{animation:hhr-rise linear both;animation-timeline:--hhrp}
  .ox-mo .ox-intro .ox-door--help{animation-range:entry 30% entry 72%}
  .ox-mo .ox-intro .ox-door--org{animation-range:entry 38% entry 80%}
  .ox-mo .ox-intro .ox-door-strip{animation-range:entry 46% entry 88%}
  .ox .ox-intro .ox-pillars::before{animation:hhr-drift linear both;animation-timeline:--hhrp;animation-range:entry 0% cover 60%}
}}
@media (prefers-reduced-motion:reduce){.ox .ox-tile,.ox .ox-door,.ox .ox-hero__strip a{transition:none}}
@media (min-width:1025px){.ox .ox-tiles{grid-template-columns:repeat(3,auto);width:100%;max-width:680px}}
.ox .ox-tile{padding-inline:14px 12px}
/* HHR-1 pass 3 (17 Oct 2026): phone fit for the door cards */
@media (max-width:480px){.ox .ox-intro .ox-door :is(h2,h3){font-size:25px;letter-spacing:-.4px;overflow-wrap:anywhere}.ox .ox-door .ox-pillar__k{font-size:13px;letter-spacing:.06em;gap:10px}.ox .ox-door .ox-pillar__k::before{width:34px;height:34px;background-size:18px}.ox .ox-door .ox-btn,.ox .ox-door-strip .ox-btn{font-size:15px;letter-spacing:.02em}}
@media (min-width:1025px) and (max-width:1500px){.ox .ox-tile{padding-inline:12px 10px}.ox .ox-tile__t{font-size:12px}}
@media (min-width:1025px) and (max-width:1419px){.ox .ox-tiles{grid-template-columns:minmax(0,1fr);gap:8px}.ox .ox-tile{padding-block:9px}}
/* HHR-SMOOTH 1 (17 Oct 2026): scroll drift on transform (composited), no scale on the blurred door cards */
@keyframes hhr-drift{from{transform:translate3d(0,-8%,0)}to{transform:translate3d(0,8%,0)}}
@keyframes hhr-rise{from{opacity:.4;translate:0 46px}to{opacity:1;translate:0 0}}
.ox .ox-intro .ox-pillars::before{inset:-10% 0;background-position:center 58%;will-change:transform;backface-visibility:hidden}
@media (max-width:767px){.ox .ox-intro .ox-pillars::before{inset:auto;top:-30px;left:0;right:0;height:360px}}
/* HHR-SMOOTH 2 (17 Oct 2026): lighter door-card blur on phones */
@media (max-width:767px){.ox .ox-door,.ox .ox-door-strip{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}
/* HHR-SMOOTH 3 (17 Oct 2026): no entrance rise on the door cards on phones */
@media (max-width:767px){.ox-mo .ox-intro .ox-door,.ox-mo .ox-intro .ox-door-strip{animation:none;opacity:1;translate:none}}
/* HHR-SMOOTH 4 (17 Oct 2026): photo stays still on phones */
@media (max-width:767px){.ox .ox-intro .ox-pillars::before{animation:none;transform:none;will-change:auto}}
/* HHR-SMOOTH 5 (17 Oct 2026): text and heading words static on phones */
@media (max-width:767px){.ox-mo .ox-intro .ox-sx,.ox-mo .ox-intro .ox-ws i{animation:none!important;translate:none!important}}