/* Larkway. Homepage matches the supplied reference (Larkway_Reference (1).zip); legal and 404 styles added in the same system. */

@font-face{font-family:"Archivo";src:url(/fonts/archivo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#F4F3EF; --ink:#111110; --soft:#5C5B57; --rule:#D9D7D0;
  --accent:#1F4D3A; --dark:#111110; --on-dark:#F4F3EF; --on-dark-soft:#9C9A93;
  --sans:"Archivo",system-ui,sans-serif; --mono:"Plex Mono",ui-monospace,monospace;
  --g:24px; --max:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
.wrap{max-width:calc(var(--max) + 2*var(--g));margin:0 auto;padding:0 var(--g)}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;min-height:52px;padding:0 24px;background:var(--accent);color:var(--on-dark);font:500 16px/1 var(--sans);text-decoration:none;border-radius:0}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.7,0,1)}
.btn:hover::before{transform:none}

/* accessibility (invisible until used) */
.skip{position:absolute;left:var(--g);top:-100px;z-index:10;padding:10px 16px;background:var(--ink);color:var(--on-dark);font:500 15px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.close :focus-visible{outline-color:var(--on-dark)}

/* header */
.header{display:flex;align-items:center;justify-content:space-between;height:72px;border-bottom:1px solid var(--rule)}
.wordmark{font:800 20px/1 var(--sans);letter-spacing:-.02em;text-decoration:none}
.header a.link{font:500 15px/1 var(--sans);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* hero */
.hero{padding:clamp(64px,9vw,136px) 0 clamp(48px,6vw,80px)}
.hero h1{font:800 clamp(46px,8.4vw,128px)/.94 var(--sans);letter-spacing:-.045em;max-width:17.5ch}
.hero__row{display:grid;gap:28px;margin-top:clamp(40px,6vw,88px);padding-top:24px;border-top:1px solid var(--ink)}
.hero__sub{font:400 clamp(19px,1.7vw,24px)/1.35 var(--sans);max-width:26ch}

/* photo */
.photo{margin:0 auto;max-width:calc(var(--max) + 2*var(--g));padding:0 var(--g)}
.photo__mask{overflow:hidden}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:55% 50%}
@media (min-width:900px){.photo img{aspect-ratio:21/9;object-position:55% 42%}}
.photo + .get{border-top:0}

/* what you get */
.get{padding:clamp(64px,7vw,112px) 0;border-top:1px solid var(--rule)}
.get h2{font:700 clamp(28px,3vw,40px)/1.05 var(--sans);letter-spacing:-.03em}
.cols{display:grid;gap:32px;margin-top:clamp(32px,4vw,56px)}
.cols li{position:relative}
.cols li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ink);transform-origin:left center}
.cols h3{font:700 clamp(21px,1.9vw,26px)/1.15 var(--sans);letter-spacing:-.015em;padding-top:20px}
.cols p{color:var(--soft);margin-top:10px;max-width:30ch}
.note{margin-top:clamp(32px,4vw,56px);color:var(--soft);font-size:15px}

/* closing */
.close{background:var(--dark);color:var(--on-dark);padding:clamp(88px,11vw,160px) 0 0}
.close h2{font:800 clamp(40px,6.6vw,104px)/.95 var(--sans);letter-spacing:-.045em;max-width:13ch}
.close__row{display:grid;gap:24px;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid #2E2D2A}
.close__row p{color:var(--on-dark-soft);max-width:34ch}
.close .btn{background:var(--on-dark);color:var(--ink)}
.close__alt{margin-top:14px;font-size:15px;color:var(--on-dark-soft)}
.close__alt a{color:inherit;text-underline-offset:.2em}
.close__alt a:hover{color:var(--on-dark)}
.close .btn::before{background:#fff}
.foot{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(88px,10vw,140px);padding:24px 0 28px;border-top:1px solid #2E2D2A;font:400 13px/1.4 var(--mono);color:var(--on-dark-soft)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--on-dark)}
.foot .r{margin-left:auto}

/* shared by legal and 404 pages (not used on the homepage) */
.label{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.sec{padding:clamp(64px,7vw,104px) 0;border-top:1px solid var(--rule)}

/* footer-only dark band (legal and 404 pages) */
.page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.page > :not(.skip){width:100%}
.close--foot{padding-top:0;margin-top:auto}
.close--foot .foot{margin-top:0;border-top:0}

/* legal and 404 pages */
.doc{padding:clamp(64px,9vw,136px) 0 clamp(64px,7vw,104px)}
.doc .label{display:block;margin-bottom:18px}
.doc h1{font:800 clamp(40px,6.6vw,104px)/.95 var(--sans);letter-spacing:-.045em;max-width:13ch}
.doc__meta{margin-top:clamp(40px,6vw,88px);padding-top:24px;border-top:1px solid var(--ink);font:400 13px/1.4 var(--mono);color:var(--soft)}
.doc__body{max-width:64ch}
.doc__body h2{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);font:700 clamp(20px,1.9vw,26px)/1.15 var(--sans);letter-spacing:-.015em}
.doc__body p,.doc__body ul{margin-top:14px}
.doc__body p:first-child{margin-top:32px}
.doc__body ul{padding-left:1.2em;list-style:disc}
.doc__body li+li{margin-top:6px}
.doc__body strong{font-weight:700}
.doc__body a{text-underline-offset:.2em}
.doc__body a:hover{color:var(--accent)}
.doc__lead{margin-top:28px;font:400 clamp(19px,1.7vw,24px)/1.35 var(--sans);color:var(--soft);max-width:34ch}
.doc .btn{margin-top:40px}
.doc__home{margin-top:32px;font:500 clamp(19px,1.7vw,24px)/1.35 var(--sans)}
.doc__home a{text-underline-offset:.2em}
.doc__home a:hover{color:var(--accent)}

@media (min-width:900px){
  :root{--g:48px}
  .hero__row{grid-template-columns:1fr auto;align-items:end}
  .cols{grid-template-columns:repeat(3,1fr);gap:48px}
  .close__row{grid-template-columns:1fr auto;align-items:end}
  .doc__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:48px}
  .doc__grid .doc__body{grid-column:6/span 7}
  .doc__grid .doc__side{grid-column:1/span 4}
}
@media (max-width:899px){
  .btn{width:100%;justify-content:center}
  .header .link{font-size:14px}
  .foot .r{margin-left:0}
}

/* motion: hidden start states only apply when JS has run (html.js) */
.w{display:inline-block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em;vertical-align:top}
.w__i{display:inline-block}
.js .w__i{transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.7,0,1);transition-delay:calc(var(--i,0) * 55ms)}
.js .is-in .w__i{transform:none}

.js .hero__sub,.js .hero .btn{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,0,1),transform .8s cubic-bezier(.2,.7,0,1)}
.js .hero__sub{transition-delay:450ms}
.js .hero .btn{transition-delay:570ms}
.js .hero.is-in .hero__sub,.js .hero.is-in .btn{opacity:1;transform:none}

.js .photo__mask{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.js .photo__mask img{transform:scale(1.12);transition:transform 1.8s cubic-bezier(.2,.7,0,1)}
.js .photo.is-in .photo__mask{clip-path:inset(0)}
.js .photo.is-in .photo__mask img{transform:none}

.js .cols li::before{transform:scaleX(0);transition:transform 1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--c,0) * 120ms)}
.js .cols h3,.js .cols p{opacity:0;transform:translateY(12px);transition:opacity .8s cubic-bezier(.2,.7,0,1),transform .8s cubic-bezier(.2,.7,0,1);transition-delay:calc(var(--c,0) * 120ms + 350ms)}
.js .cols.is-in li::before{transform:none}
.js .cols.is-in h3,.js .cols.is-in p{opacity:1;transform:none}

.js .close__row{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,0,1),transform .8s cubic-bezier(.2,.7,0,1)}
.js .close__row.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important}
  .js .w__i,.js .hero__sub,.js .hero .btn,.js .photo__mask img,.js .cols li::before,.js .cols h3,.js .cols p,.js .close__row{opacity:1;transform:none}
  .js .photo__mask{clip-path:none}
}