/* web.vi v2, plate 1: "Look alive." A hairline frame holds the opening. Phone: the headline, the ribbon knot whole and
   large in the middle, then the line and the button. Desktop (>=900px landscape): headline, line and offer on the left,
   the knot on the right, with two homepages standing in front of it. The copy never sits over the art. hero.js draws
   the knot to stay inside .hr-art and sets --px/--py (-1..1), the eased pointer, which the cards lean with. */
.hr{position:relative;isolation:isolate;overflow:clip;display:grid;grid-template-areas:"h" "art" "line" "foot";grid-template-rows:auto 1fr auto auto;
  min-height:max(100svh,620px);padding:calc(env(safe-area-inset-top) + 104px) 30px calc(env(safe-area-inset-bottom) + 34px);color:var(--marble);
  background:radial-gradient(90% 60% at 50% 52%,#0B4A47 0%,rgba(11,74,71,0) 70%),linear-gradient(#04211F,var(--sea) 46%,#05302D)}
.hr-frame{position:absolute;inset:calc(env(safe-area-inset-top) + 80px) 14px calc(env(safe-area-inset-bottom) + 14px);
  border:1px solid rgba(236,231,220,.42);pointer-events:none;animation:hr-frame 1.7s .15s var(--ease) both}

.hr-copy{display:contents}
.hr-h1{grid-area:h;width:min-content;animation:hr-rise 1.2s .2s var(--ease) both;font:400 min(28vw,150px)/.84 var(--didone);font-stretch:62.5%;
  letter-spacing:-.016em;margin-left:-.045em}
.hr-line{grid-area:line;max-width:17em;padding-top:8px;font:400 20px/1.36 var(--garamond);text-wrap:pretty;animation:hr-rise 1.2s .3s var(--ease) both}

/* the knot: as wide as the frame on a phone, never cropped */
.hr-art{grid-area:art;position:relative;min-height:min(calc(100vw - 40px),440px);margin:4px -14px 0}
.hr-art{--px:0;--py:0}
.hr-knot{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--ease)}
.hr-live .hr-knot{opacity:1}

/* ---- the two homepages, in front of the knot ---- */
.hr-card{position:absolute;z-index:2;container-type:inline-size;color:var(--ink);
  transform:perspective(1400px) rotateY(calc(var(--px) * 7deg)) rotateX(calc(var(--py) * -5deg)) rotate(var(--r));
  box-shadow:0 34px 60px -24px rgba(0,12,11,.85),0 10px 22px -12px rgba(0,12,11,.6);
  animation:hr-card 1.1s .35s var(--ease) both}
@keyframes hr-card{from{opacity:0;translate:0 48px}}

.hr-desk{--r:-4deg;left:4%;top:46%;width:62%;background:#F7F4EE;border-radius:8px;overflow:hidden}
.hr-bar{display:flex;align-items:center;gap:1.3cqi;height:6.6cqi;padding:0 2.8cqi;background:#EDE8DE}
.hr-bar i{width:1.7cqi;height:1.7cqi;border-radius:50%;background:#CFC7B8}
.hr-bar span{margin-left:2.4cqi;padding:1cqi 3.4cqi;border-radius:99px;background:#F7F4EE;font:500 2.3cqi/1 var(--mono);color:var(--ink-2)}
.hr-site{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/9}
.hr-site-copy{display:flex;flex-direction:column;align-items:flex-start;padding:5.6cqi 4.6cqi 5cqi}
.hr-brand{font:italic 500 3.2cqi/1 var(--garamond);color:#0B4A47}
.hr-site-h{margin-top:auto;font:400 7.2cqi/.94 var(--didone);font-stretch:62.5%;letter-spacing:-.006em;text-wrap:balance}
.hr-site-btn{margin-top:4cqi;padding:2.2cqi 3.4cqi;background:#0B4A47;color:#F7F4EE;font:600 2.7cqi/1 var(--garamond)}
.hr-card picture{display:contents}
.hr-site img{width:100%;height:100%;object-fit:cover}

/* the card is the query container, so the bezel is drawn by the inner screen in units of the card */
.hr-phone{--r:5deg;right:5%;top:40%;width:25%;border-radius:12%/5.6%;animation-delay:.5s}
.hr-phone-in{overflow:hidden;border:3cqi solid #0E1415;border-radius:12cqi;background:#F7F4EE}
.hr-phone img{width:100%;height:auto;aspect-ratio:1/1.08;object-fit:cover}
.hr-phone-copy{padding:6cqi 7cqi 8cqi}
.hr-phone-copy b{display:block;font:italic 500 7.4cqi/1 var(--garamond);color:#6B3A1E}
.hr-phone-copy p{margin-top:3.4cqi;font:400 13cqi/.92 var(--didone);font-stretch:62.5%;text-wrap:balance}
.hr-phone-copy span{display:block;margin-top:6cqi;padding:4.6cqi 0;text-align:center;background:var(--ink);color:#F7F4EE;font:600 6.6cqi/1 var(--garamond)}

/* the offer: on a phone the button and one line under it; on desktop a short index beside the button */
.hr-foot{grid-area:foot;padding-top:22px;animation:hr-rise 1.2s .4s var(--ease) both}
.hr-note{margin-top:14px;font:400 17px/1.35 var(--garamond);color:var(--foam);text-align:center}
.hr-index{display:none;margin:0;padding:0;list-style:none}
.hr-index li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0 9px;border-top:1px solid rgba(236,231,220,.26)}
.hr-index li:last-child{border-bottom:1px solid rgba(236,231,220,.26)}
.hr-index span{font:400 18px/1.2 var(--garamond);color:var(--foam)}
.hr-index b{font:italic 400 21px/1 var(--didone);font-stretch:75%;letter-spacing:-.005em;color:var(--marble);white-space:nowrap}
.hr-cta{display:flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;background:var(--marble);color:var(--ink);
  font:600 20px/1 var(--garamond);text-decoration:none;transition:background-color .3s var(--ease)}
.hr-cta:hover,.hr-cta:focus-visible{background:var(--lagoon)}

@keyframes hr-frame{from{clip-path:inset(46% 46% 46% 46%);opacity:0}}
@keyframes hr-rise{from{opacity:0;translate:0 26px}}

@media (min-width:900px) and (orientation:landscape){
  .hr{grid-template-columns:minmax(0,min(50vw,780px)) minmax(0,1fr);grid-template-areas:"h art" "line art" ". art" "foot art";grid-template-rows:auto auto 1fr auto;
    column-gap:clamp(24px,3vw,64px);min-height:max(100svh,640px);
    padding:clamp(128px,17svh,176px) calc(var(--g) + clamp(20px,2vw,40px)) clamp(56px,8svh,84px) calc(var(--g) + clamp(36px,3vw,60px));
    background:radial-gradient(70% 80% at 72% 54%,#0B4A47 0%,rgba(11,74,71,0) 70%),linear-gradient(#04211F,var(--sea) 46%,#05302D)}
  .hr-frame{inset:clamp(88px,11.5svh,104px) var(--g) clamp(26px,3.6svh,40px)}
  .hr-h1{font-size:clamp(132px,min(11.2vw,24svh),236px)}
  .hr-line{padding-top:clamp(18px,2.6svh,30px);max-width:19em;font-size:clamp(21px,1.45vw,27px)}
  /* the knot fills the right side of the frame, from just under its top line to just over its bottom line */
  .hr-art{min-height:0;margin:calc(-1 * clamp(28px,5svh,60px)) 0 calc(-1 * clamp(16px,3svh,36px))}
  .hr-desk{left:0;top:50%;width:min(58%,480px)}
  .hr-phone{right:4%;top:46%;width:min(20%,170px)}
  /* the index and the button side by side when the column allows, the button under the index when it does not */
  .hr-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px clamp(28px,3vw,52px);padding-top:32px}
  .hr-index{display:block;flex:1 1 290px;max-width:400px}
  .hr-note{display:none}
  .hr-index span{font-size:clamp(17px,1.1vw,21px)}
  .hr-index b{font-size:clamp(21px,1.35vw,26px)}
  .hr-cta{flex:none;min-height:62px;padding:0 24px;font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .hr-frame,.hr-h1,.hr-line,.hr-foot{animation:none}
  .hr-knot{transition:none}
  .hr-card{animation:none}
}