/* Chooser page: a quiet frame in the logo's own typeface; each band is painted in its direction's palette and type. */
:root{
  --ground:#F4F5F2; --ink:#121A17; --muted:#58615D; --line:rgba(18,26,23,.12);
  --frame:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --pad:clamp(20px,5vw,64px); --wrap:min(1240px, 100% - 2*var(--pad));
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:rgba(18,26,23,.35) transparent}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--frame);font-stretch:100%;-webkit-tap-highlight-color:transparent;overflow-x:clip}
::selection{background:var(--ink);color:var(--ground)}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,p{margin:0}
.wrap{width:var(--wrap);margin-inline:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.i{width:18px;height:18px;flex:none}
.skip{position:absolute;left:12px;top:-64px;z-index:10;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--ground);font-weight:600;text-decoration:none;transition:top .2s ease}
.skip:focus{top:12px}
main:focus{outline:none}

/* Intro */
.intro{padding:clamp(36px,7vw,96px) 0 clamp(40px,6vw,80px)}
.lockup{height:clamp(38px,5.4vw,60px);width:auto;color:var(--ink);margin-bottom:clamp(36px,6vw,72px)}
.intro h1{font-size:clamp(34px,5.2vw,68px);line-height:1.02;letter-spacing:-.03em;font-weight:720;font-stretch:112%;max-width:17ch;text-wrap:balance}
.intro p{margin-top:20px;max-width:52ch;color:var(--muted);font-size:clamp(17px,1.4vw,19px)}
@media (prefers-reduced-motion:no-preference){
  .lockup{animation:rise .9s var(--ease-out) both}
  .intro h1{animation:rise .9s var(--ease-out) both .08s}
  .intro p{animation:rise .9s var(--ease-out) both .16s}
}
@keyframes rise{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Direction bands */
.dir{position:relative;overflow:clip}
.dir .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(48px,7vw,104px) 0}
.copy{display:grid;gap:18px;align-content:start}
.tag{font-size:14px;font-weight:600;font-family:var(--frame);opacity:.8}
.dir h2{text-wrap:balance}
.dir h2 a{text-decoration:none}
.dir h2 a::after{content:"";position:absolute;inset:0;z-index:2}
.why{max-width:40ch;font-family:var(--frame);font-size:17px;opacity:.86}
.sw{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.sw li{display:flex;align-items:center;gap:8px;font:500 13px/1 var(--frame);font-variant-numeric:tabular-nums;opacity:.9}
.sw i{width:22px;height:22px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.type{font:500 14px/1.4 var(--frame);opacity:.75}
.open{display:inline-flex;align-items:center;gap:10px;justify-self:start;min-height:48px;padding:0 20px;border-radius:999px;background:var(--acc);color:var(--on-acc);font:650 15px/1 var(--frame);margin-top:8px;transition:transform .16s var(--ease-out)}
.open .i{transition:transform .45s var(--ease-out)}
.pic{overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.dir:active .open{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .dir:hover .pic img{transform:scale(1.045)}
  .dir:hover .open .i{transform:translateX(5px)}
}
.dir:has(h2 a:focus-visible){outline:3px solid var(--acc);outline-offset:-10px}
.dir h2 a:focus-visible{outline:none}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .pic{animation:open-up linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .copy{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes open-up{from{clip-path:inset(7% 7% 7% 7% round var(--r))}to{clip-path:inset(0 0 0 0 round var(--r))}}

.dir-a{background:#EDEFE9;color:#16211D;--acc:#1F4A3F;--on-acc:#EDEFE9;--r:2px}
.dir-a h2{font:500 clamp(36px,4.8vw,66px)/1 "Funnel Display",var(--frame);letter-spacing:-.035em}
.dir-a .pic{aspect-ratio:5/4;border-radius:2px 160px 2px 2px}
.dir-a .c1{background:#1F4A3F}.dir-a .c2{background:#EDEFE9}.dir-a .c3{background:#E0A43A}.dir-a .c4{background:#16211D}

.dir-b{background:#0F1C24;color:#EAF0EE;--acc:#A8D8F0;--on-acc:#0F1C24;--r:0px}
.dir-b .wrap{grid-template-columns:1fr;min-height:min(640px,86vh);align-items:end;padding:0}
.dir-b .pic{position:absolute;inset:0;z-index:0}
.dir-b .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,28,36,.94) 0%,rgba(15,28,36,.72) 42%,rgba(15,28,36,.15) 100%),linear-gradient(0deg,rgba(15,28,36,.8),transparent 45%)}
.dir-b .copy{position:relative;z-index:1;max-width:560px;padding:clamp(48px,7vw,96px) 0}
.dir-b h2{font:650 clamp(48px,7vw,104px)/.9 "Bricolage Grotesque",var(--frame);font-variation-settings:"wdth" 78,"opsz" 96;letter-spacing:-.035em}
.dir-b .c1{background:#0F1C24}.dir-b .c2{background:#A8D8F0}.dir-b .c3{background:#172A34}.dir-b .c4{background:#EAF0EE}
.dir-b .pic{animation:none!important}

.dir-c{background:#E6EAEC;color:#1D252B;--acc:#A9472A;--on-acc:#FFFFFF;--r:22px}
.dir-c .wrap{grid-template-columns:7fr 5fr}
.dir-c .pic{order:-1;aspect-ratio:4/3;border-radius:22px;box-shadow:0 26px 48px -18px rgba(46,59,68,.42)}
.dir-c h2{font:800 clamp(34px,4.4vw,60px)/.98 "Archivo",var(--frame);font-stretch:125%;letter-spacing:-.03em}
.dir-c .c1{background:#A9472A}.dir-c .c2{background:#E6EAEC}.dir-c .c3{background:#2E3B44}.dir-c .c4{background:#F6F8F9}

@media (max-width:860px){
  .dir .wrap,.dir-c .wrap{grid-template-columns:1fr;gap:26px}
  .dir-a .pic,.dir-c .pic{order:-1;aspect-ratio:16/11}
  .dir-a .pic{border-radius:2px 96px 2px 2px}
  .dir-b .wrap{min-height:0;padding-top:260px}
  .dir-b .pic::after{background:linear-gradient(0deg,rgba(15,28,36,.97) 0%,rgba(15,28,36,.88) 55%,rgba(15,28,36,.2) 100%)}
  .open{justify-self:stretch;justify-content:space-between}
}

/* The mark */
.mark{padding:clamp(64px,9vw,128px) 0}
.mark .wrap{display:grid;gap:clamp(32px,5vw,56px)}
.mark-copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:end}
.mark h2{font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.03em;font-weight:720;font-stretch:112%}
.mark-copy p{color:var(--muted);max-width:56ch}
.plates{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
.plate{display:grid;place-items:center;padding:clamp(36px,6vw,72px) clamp(20px,3vw,40px);min-height:180px}
.plate svg{width:min(100%,280px);height:auto}
.p-a{background:#1F4A3F;color:#EDEFE9}
.p-b{background:#0F1C24;color:#A8D8F0}
.p-c{background:#E6EAEC;color:#A9472A}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 44px;color:var(--ink)}
.ladder li{display:grid;gap:10px;justify-items:start;font-size:13px;color:var(--muted)}
.ladder .m{height:28px;width:auto;color:var(--ink)}
.ladder .lk{height:44px;width:auto;color:var(--ink)}
@media (max-width:860px){ .mark-copy{grid-template-columns:1fr} .plates{grid-template-columns:1fr} .plate{min-height:0;padding:40px 24px} .plate svg{width:220px} }

.ft{padding:24px 0 28px;font-size:14px;color:var(--muted);box-shadow:0 -1px 0 var(--line)}
.ft .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-property:color,background-color,opacity,box-shadow!important}
}

/* ---------- Motion pass 2: the mark assembles ---------- */
.seven{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .intro .lockup .seven{animation:seven-lock 1.1s var(--ease-out) both .35s}
  @supports (animation-timeline: view()){
    .plates{view-timeline:--plates block}
    .plate{animation:rise linear both;animation-timeline:--plates}
    .plate .seven{animation:seven-lock linear both;animation-timeline:--plates}
    .plate:nth-child(1),.plate:nth-child(1) .seven{animation-range:entry 10% cover 38%}
    .plate:nth-child(2),.plate:nth-child(2) .seven{animation-range:entry 20% cover 46%}
    .plate:nth-child(3),.plate:nth-child(3) .seven{animation-range:entry 30% cover 54%}
    .ladder li{animation:rise linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
    .mark-copy{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes seven-lock{from{transform:translateX(34%);opacity:.3}60%{opacity:1}to{transform:none;opacity:1}}