@font-face{
  font-family:Archivo;
  src:url(/assets/fonts/archivo-var.woff2) format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}

:root{
  --ink:#000;
  --paper:#fff;
  --paper-2:#F2F1EF;
  --ink-60:#4A4A4A;
  --rule:#E2E2E2;
  --signal:#1B44FF;
  --dark-2:#B5B5B5;
  --dark-rule:#3A3A3A;
  --wrap:1280px;
  --pad:80px;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px; --sp-7:120px;
  --face:Archivo,"Helvetica Neue",Arial,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--face);font-size:17px;line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

h1,h2{font-weight:700;font-variation-settings:"wdth" 125;margin:0}
h1{font-size:64px;line-height:1.02;letter-spacing:-.02em}
h2{font-size:40px;line-height:1.1;letter-spacing:-.015em}
h3{font-size:20px;line-height:1.3;font-weight:600;margin:0;font-variation-settings:"wdth" 108}
p{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.lede{margin-top:var(--sp-2);max-width:62ch;color:var(--ink-60);font-size:19px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:100}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.btn--solid{background:var(--ink);color:var(--paper);padding:14px 24px;transition:background .12s linear}
.btn--solid:hover{background:#1B1B1B}
.btn--text{padding:14px 0;border-bottom:1px solid var(--ink);margin-left:var(--sp-3)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper)}
.nav[data-scrolled]{border-bottom:1px solid var(--rule)}
.nav__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:72px;display:flex;align-items:center;justify-content:space-between}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__mark{width:55px;height:32px;background:currentColor;
  -webkit-mask:url(/assets/logo/mark.svg) no-repeat center/contain;
  mask:url(/assets/logo/mark.svg) no-repeat center/contain}
.nav__name{font-weight:700;font-variation-settings:"wdth" 125;letter-spacing:-.01em;font-size:19px}
.nav__menu{display:flex;align-items:center;gap:var(--sp-4)}
.nav__menu a{font-size:15px;font-weight:500;text-decoration:none}
.nav__menu a:not(.btn){padding-bottom:3px;background-image:linear-gradient(var(--ink),var(--ink));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .15s ease}
.nav__menu a:not(.btn):hover{background-size:100% 1px}
.nav__toggle{display:none}

/* ---------- hero ---------- */
.hero{padding:var(--sp-7) 0}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-5);align-items:center}
.hero__sub{margin-top:var(--sp-3);max-width:620px;font-size:19px;line-height:1.55;color:var(--ink-60)}
.hero__cta{margin-top:var(--sp-4);display:flex;align-items:center}
.hero__art{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero__lead{grid-column:1/-1;aspect-ratio:4/5;overflow:hidden}
.hero__lead img{width:100%;height:100%;object-fit:cover}
.hero__sup{aspect-ratio:1/1;overflow:hidden}
.hero__sup img{width:100%;height:100%;object-fit:cover}

/* ---------- pathway ---------- */
.path{background:var(--ink);color:var(--paper);padding:var(--sp-7) 0}
.path__intro{margin-top:var(--sp-2);color:var(--dark-2);max-width:62ch;font-size:19px}
.rail{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);position:relative}
.rail::before{content:"";position:absolute;left:5px;right:5px;top:46px;height:1px;background:var(--paper);transform-origin:left center;transform:scaleX(var(--draw,1))}
.rail__step{position:relative;padding-top:78px}
.rail__num{position:absolute;top:0;left:0;font-size:13px;letter-spacing:.04em;color:var(--dark-2);font-variant-numeric:tabular-nums}
.rail__node{position:absolute;top:41px;left:0;width:10px;height:10px;border:1px solid var(--paper);border-radius:50%;background:var(--ink);opacity:var(--pop,1)}
.rail__step--hub::before{content:"";position:absolute;left:-14px;top:34px;width:100px;height:24px;background:var(--ink)}
.rail__node--hub{top:25px;left:-8px;width:72px;height:42px;border:0;border-radius:0;background:var(--paper);
  -webkit-mask:url(/assets/logo/mark.svg) no-repeat left center/contain;
  mask:url(/assets/logo/mark.svg) no-repeat left center/contain;
  transform:scale(var(--hub,1))}
.rail__label{font-size:17px}
.rail__copy{margin-top:var(--sp-1);font-size:14px;line-height:1.45;color:var(--dark-2)}

/* ---------- services ---------- */
.svc{padding:var(--sp-7) 0}
.svc__grid{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);align-items:start}
.panel{border:1px solid var(--rule);padding:var(--sp-3)}
.panel__desc{margin-top:var(--sp-2);font-size:15px;color:var(--ink-60)}
.panel__preview{margin-top:var(--sp-3);font-size:15px}
.panel__preview li{padding:6px 0;border-top:1px solid var(--rule)}
.panel__more{margin-top:var(--sp-3)}
.panel__more summary{cursor:pointer;font-size:14px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.panel__more summary::-webkit-details-marker{display:none}
.panel__more summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.panel__more[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.panel__more ul{margin-top:var(--sp-2);font-size:15px}
.panel__more li{padding:6px 0;border-top:1px solid var(--rule)}

/* ---------- work ---------- */
.work{background:var(--paper-2);padding:var(--sp-7) 0}
.reels{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.reel{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font-family:inherit}
.reel picture{display:block;aspect-ratio:9/16;overflow:hidden}
.reel img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.reel:hover img{transform:scale(1.03)}
.reel__play{position:absolute;left:50%;top:calc(50% - 22px);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(0,0,0,.9)}
.reel__play::after{content:"";position:absolute;left:19px;top:15px;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.reel__cap{display:block;margin-top:10px;min-height:2.9em;font-size:14px;color:var(--ink-60)}
.shots{margin-top:var(--sp-3);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-3)}
.shots__a{grid-column:span 5}
.shots__b{grid-column:span 4}
.shots__c{grid-column:span 3}
.shots figure picture{display:block;height:420px;overflow:hidden}
.shots img{width:100%;height:100%;object-fit:cover}
.shots figcaption{margin-top:10px;min-height:2.9em;font-size:14px;color:var(--ink-60)}

/* ---------- why ---------- */
.why{background:var(--ink);color:var(--paper);padding:var(--sp-7) 0}
.why__grid{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.why__grid article{padding-left:var(--sp-3);border-left:1px solid var(--dark-rule)}
.why__grid article:first-child{padding-left:0;border-left:0}
.why__grid p{margin-top:var(--sp-2);font-size:15px;color:var(--dark-2)}

/* ---------- contact ---------- */
.contact{padding:var(--sp-7) 0}
.contact__grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-5)}
.contact__email{margin-top:var(--sp-4);font-size:22px;font-weight:600}
.contact__email a{text-decoration:none;border-bottom:1px solid var(--ink)}
.contact__email a:hover{color:var(--signal);border-color:var(--signal)}
.contact__ig{margin-top:var(--sp-2);font-size:15px;color:var(--ink-60)}
.contact__ig a{display:inline-block;padding:5px 0;min-height:24px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.field{display:block;margin:0 0 var(--sp-3)}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;padding:12px 14px;min-height:48px;
  border:1px solid var(--rule);border-radius:0;background:var(--paper);color:var(--ink)}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--signal)}
.field [aria-invalid="true"]{border-color:var(--signal);border-width:2px}
.err{display:block;margin-top:6px;font-size:14px;color:var(--signal);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__act{margin-top:var(--sp-1)}
.form__note{margin-top:var(--sp-2);font-size:14px;color:var(--ink-60)}
.form__note a{display:inline-block;padding:5px 2px;min-height:24px}
.form__status{margin-top:var(--sp-3);font-size:16px;font-weight:600}
.form__status[data-ok]{color:var(--ink)}
.form__status[data-err]{color:var(--signal)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:var(--sp-6) 0 var(--sp-4)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:var(--sp-4)}
.foot__logo{display:block;width:190px;height:90px;background:currentColor;
  -webkit-mask:url(/assets/logo/logo-stacked.svg) no-repeat left center/contain;
  mask:url(/assets/logo/logo-stacked.svg) no-repeat left center/contain}
.foot__brand p{margin-top:var(--sp-3);font-size:14px;color:var(--dark-2);max-width:44ch}
.foot__col h2{font-size:14px;font-weight:600;letter-spacing:.02em;font-variation-settings:"wdth" 100}
.foot__col ul{margin-top:var(--sp-2)}
.foot__col li{margin-bottom:4px;font-size:14px;color:var(--dark-2)}
.foot__col a{display:inline-block;padding:5px 0;min-height:24px;text-decoration:none}
.foot__col a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.foot__legal a{display:inline-block;padding:5px 2px;min-height:24px}
.foot__legal{max-width:var(--wrap);margin:var(--sp-5) auto 0;padding:var(--sp-3) var(--pad) 0;border-top:1px solid var(--dark-rule);font-size:13px;color:var(--dark-2)}

/* ---------- lightbox ---------- */
.lb{border:0;padding:0;background:transparent;max-width:min(92vw,460px);max-height:92vh;overflow:visible}
.lb::backdrop{background:rgba(0,0,0,.93)}
.lb__stage{aspect-ratio:9/16;background:#000}
.lb video{width:100%;height:100%;display:block}
.lb__x{position:absolute;top:-44px;right:0;width:36px;height:36px;background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb__cap{margin-top:12px;color:#fff;font-size:14px}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  :root{--pad:40px;--sp-7:88px;--sp-6:64px}
  h1{font-size:46px}
  h2{font-size:34px}
  .hero__grid,.contact__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .svc__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
  .why__grid article:nth-child(3){padding-left:0;border-left:0}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:767px){
  :root{--pad:20px;--sp-7:64px;--sp-6:48px}
  h1{font-size:38px;line-height:1.05}
  h2{font-size:28px}
  body{font-size:16px}
  .hero{padding:var(--sp-6) 0}
  .hero__sub{font-size:17px}
  .hero__cta{display:block}
  .hero__cta .btn--solid{display:block;text-align:center}
  .btn--text{display:block;margin:var(--sp-3) 0 0;text-align:center;border-bottom:0;text-decoration:underline;text-underline-offset:6px}

  .nav__in{height:64px}
  .nav__toggle{display:block;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
  .nav__bars,.nav__bars::before,.nav__bars::after{position:absolute;left:11px;width:22px;height:2px;background:var(--ink)}
  .nav__bars{top:21px}
  .nav__bars::before{content:"";top:-7px}
  .nav__bars::after{content:"";top:7px}
  .nav__menu{position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;gap:var(--sp-4);transform:translateY(-100%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  .nav[data-open] .nav__menu{transform:none;visibility:visible}
  .nav[data-open] .nav__bars{background:transparent}
  .nav[data-open] .nav__bars::before{transform:rotate(45deg);top:0}
  .nav[data-open] .nav__bars::after{transform:rotate(-45deg);top:0}
  .nav__menu a{font-size:28px;font-weight:600}
  .nav__menu .btn{font-size:17px;padding:16px 32px}
  .nav__toggle{z-index:60}

  .rail{grid-template-columns:1fr;gap:var(--sp-4);margin-top:var(--sp-4)}
  .rail::before{left:5px;right:auto;top:10px;bottom:10px;width:1px;height:auto;transform:scaleY(var(--draw,1));transform-origin:center top}
  .rail__step{padding:0 0 0 40px;min-height:44px}
  .rail__num{position:static;display:block;margin-bottom:4px}
  .rail__node{top:26px;left:0}
  .rail__step--hub{padding-left:64px}
  .rail__step--hub::before{left:-2px;top:16px;width:14px;height:40px}
  .rail__node--hub{top:23px;left:-2px;width:48px;height:28px}

  .svc__grid,.why__grid{grid-template-columns:1fr}
  .why__grid article{padding:var(--sp-3) 0 0;border-left:0;border-top:1px solid var(--dark-rule)}
  .why__grid article:first-child{padding-top:0;border-top:0}
  .panel__preview{display:none}
  .panel__preview--all{display:block}

  .reels{display:flex;gap:var(--sp-2);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:0 var(--pad) var(--sp-2);
    -webkit-overflow-scrolling:touch}
  .reels li{flex:0 0 44%;scroll-snap-align:start}
  .shots{grid-template-columns:1fr;gap:var(--sp-3)}
  .shots__a,.shots__b,.shots__c{grid-column:auto}
  .shots figure picture{height:300px}
  .shots__c figure picture{height:220px}

  .form__row{grid-template-columns:1fr;gap:0}
  .foot__grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .foot__legal{margin-top:var(--sp-4)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rail::before{transform:none!important}
  .rail__node{opacity:1!important}
  .rail__node--hub{transform:none!important}
  .reel:hover img{transform:none}
}