/* Self-hosted Inter and Inter Tight. These are the same variable WOFF2 files
   Google Fonts served, so rendering is byte-for-byte what the site had before.
   One file per family+subset covers the whole 100-900 weight axis, and
   unicode-range is kept verbatim so a browser still fetches only what it needs.
   Licence: SIL Open Font License 1.1. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-tight-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-tight-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* THE AKYN — theakyn.com */
/* 01 base + home */

html{background:#000 !important}
body{background:transparent !important}
.akyn{--ink:#000;--void:#0a0a0a;--panel:#141414;--hair:#2a2a2a;--mist:#8a8a8a;--fog:#b8b8b8;--paper:#fff;
  background:transparent;color:var(--paper);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
.akyn *{box-sizing:border-box}
.akyn a{color:inherit;text-decoration:none}
.akyn h1,.akyn h2,.akyn h3{font-family:'Inter Tight','Inter',sans-serif;font-weight:500;margin:0;letter-spacing:-.02em}
.lock{display:inline-flex;align-items:center;gap:14px;color:var(--paper)}
.lock-type{display:flex;flex-direction:column}
.lock-word{font-family:'Inter Tight',sans-serif;font-weight:500;letter-spacing:.3em;font-size:26px;line-height:1;padding-left:.15em}
.lock-rule{height:2px;background:currentColor;margin:6px 0 5px;width:100%}
.lock-sub{font-size:9px;letter-spacing:.34em;color:var(--mist);text-align:center}
.lock-c .lock-word{font-size:17px}
.lock-c .lock-rule{margin:3px 0 3px;height:1px}
.lock-c .lock-sub{font-size:6.5px;letter-spacing:.28em}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,64px);mix-blend-mode:difference}
.nav-links{display:flex;align-items:center;gap:clamp(14px,3vw,34px);font-size:12.5px;letter-spacing:.08em;color:var(--paper)}
.nav-links a{position:relative;padding-bottom:3px;text-transform:uppercase}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .35s ease}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{border:1px solid currentColor;border-radius:999px;padding:9px 16px}

.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;overflow:hidden}
.depth{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.depth .ring{position:absolute;color:#fff;display:flex}
.r1{opacity:.035;transform:translateY(calc(var(--sc,0)*0.10px))}
.r2{opacity:.06;transform:translateY(calc(var(--sc,0)*0.16px))}
.r3{opacity:.09;transform:translateY(calc(var(--sc,0)*0.24px))}
.hero-mark{position:relative;color:#fff;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
.wordmark{position:relative;margin-top:30px;font-size:clamp(46px,9.5vw,126px);letter-spacing:.12em;line-height:.9;padding-left:.12em}
.rule{width:min(340px,70vw);height:2px;background:#fff;margin:22px 0 20px;opacity:.9;transform:scaleX(calc(0.4 + var(--sc,0)*0.0004));transform-origin:center}
.tagline{color:var(--fog);font-size:clamp(14px,1.7vw,19px);letter-spacing:.03em;max-width:34ch}
.scrollcue{position:absolute;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mist);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.scrollcue i{width:1px;height:46px;background:linear-gradient(#8a8a8a,transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.band{position:relative;padding:clamp(80px,13vh,150px) clamp(20px,7vw,120px);border-top:1px solid var(--hair)}
.js .band{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.js .band.in{opacity:1;transform:none}
.eyebrow{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:12px;letter-spacing:.34em;text-transform:uppercase;margin:0 0 26px}
.lede{font-size:clamp(28px,4.6vw,58px);line-height:1.06;max-width:18ch}
.lede.sm{font-size:clamp(24px,3.2vw,40px);max-width:18ch}
.para{color:var(--fog);font-size:clamp(15px,1.55vw,18px);line-height:1.7;max-width:64ch;margin:28px 0 0}
.para.center{margin-left:auto;margin-right:auto;text-align:center}
.para.small{font-size:15px;max-width:52ch}
.stats{list-style:none;margin:54px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.stats li{background:var(--ink);padding:26px 22px;display:flex;flex-direction:column;gap:8px}
.stat-k{font-family:'Inter Tight',sans-serif;font-size:clamp(30px,4vw,50px);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-v{color:var(--mist);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.model-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,90px);align-items:start}
@media(max-width:860px){.model-grid{grid-template-columns:1fr}}
.model-copy .para:first-child{margin-top:0}
.prin-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:760px){.prin-grid{grid-template-columns:1fr}}
.prin{background:var(--ink);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:14px}
.prin-n{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.prin-t{font-size:clamp(19px,2vw,25px)}
.prin-d{color:var(--fog);font-size:15px;line-height:1.65;margin:0}
.svc-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:900px){.svc:nth-child(3n+1):last-child{grid-column:auto}.svc:nth-child(2n+1):last-child{grid-column:1/-1}.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--ink);padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column;gap:12px;transition:background .4s ease}
.svc:hover{background:#0f0f0f}
.svc-mark{color:#fff;opacity:.85}
.svc-t{font-size:clamp(18px,1.9vw,23px)}
.svc-d{color:var(--fog);font-size:14.5px;line-height:1.6;margin:0}
.cohead{margin-bottom:24px}
.co-grid{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:760px){.co-grid{grid-template-columns:1fr}}
.cocard{background:var(--ink)}
.cocard a{display:grid;grid-template-rows:auto auto auto auto;gap:16px;padding:clamp(28px,3vw,44px);height:100%;transition:background .4s ease}
.cocard a:hover{background:#0f0f0f}
.cocard-logo{height:64px;display:flex;align-items:center}
.cocard-logo img{max-height:52px;max-width:230px;width:auto;object-fit:contain;filter:brightness(1)}
.cocard-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding-top:16px}
.cocard-name{font-family:'Inter Tight',sans-serif;font-size:clamp(19px,2vw,24px);font-weight:500}
.cocard-tag{color:var(--mist);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cocard-line{color:var(--fog);font-size:14.5px;line-height:1.6}
.cocard-visit{color:var(--fog);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.cocard-visit b{display:inline-block;transition:transform .35s ease}
.cocard a:hover .cocard-visit b{transform:translate(4px,-4px)}
.agency-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center}
@media(max-width:820px){.agency-inner{grid-template-columns:1fr}}
.ghostbtn{display:inline-flex;align-items:center;gap:8px;margin-top:26px;border:1px solid var(--hair);border-radius:999px;padding:13px 24px;font-size:14px;letter-spacing:.04em;transition:border-color .35s ease,background .35s ease}
.ghostbtn:hover{border-color:var(--paper);background:rgba(255,255,255,.03)}
.ghostbtn b{transition:transform .35s ease}
.ghostbtn:hover b{transform:translate(3px,-3px)}
.vision{text-align:center}
.vision .lede{max-width:22ch;margin:0 auto}
.contact{text-align:center;display:flex;flex-direction:column;align-items:center}
.contact .lede{max-width:none}
.contact-mark{color:#fff;opacity:.9;margin-bottom:24px}
.contact-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:32px}
.solidbtn{background:var(--paper);color:#000;border-radius:999px;padding:16px 30px;font-family:'Inter Tight',sans-serif;font-size:clamp(15px,1.8vw,18px);transition:transform .25s ease,opacity .25s ease}
.solidbtn:hover{transform:translateY(-2px)}
.mailpill{display:inline-block;border:1px solid var(--paper);border-radius:999px;padding:15px 28px;font-family:'Inter Tight',sans-serif;font-size:clamp(15px,1.8vw,18px);position:relative;overflow:hidden;transition:color .4s ease}
.mailpill::before{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:-1}
.mailpill:hover{color:#000}
.mailpill:hover::before{transform:scaleX(1)}
.foot{display:flex;flex-wrap:wrap;gap:22px 28px;align-items:center;justify-content:space-between;padding:44px clamp(20px,7vw,120px) 60px;border-top:1px solid var(--hair)}
.foot-meta{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--mist);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.hero-lead{color:var(--fog);font-size:clamp(14px,1.6vw,17px);line-height:1.6;max-width:46ch;margin:18px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.hero-ghost{border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:15px 26px;font-family:'Inter Tight',sans-serif;font-size:clamp(15px,1.8vw,17px);transition:border-color .3s ease,background .3s ease}
.hero-ghost:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.hero-spline{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;pointer-events:none}
.hero-inner{position:absolute;z-index:2;right:clamp(20px,7vw,110px);top:50%;transform:translateY(-50%);max-width:520px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero-eyebrow{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:12px;letter-spacing:.34em;text-transform:uppercase;margin:0 0 18px}
.hero-inner .wordmark{margin-top:0;text-align:left;padding-left:0;line-height:.86}
.wordmark .the{display:block;font-size:.28em;letter-spacing:.5em;color:var(--fog);margin-bottom:.14em;font-weight:500}
.hero-inner .rule{margin-left:0;width:200px}
.hero-inner .tagline{text-align:left;max-width:30ch}
@media(max-width:820px){.hero-inner{right:auto;left:0;right:0;padding:0 24px;max-width:none;align-items:center;text-align:center}.hero-inner .wordmark,.hero-inner .tagline{text-align:center}.hero-inner .rule{margin:22px auto 20px}.hero-cta{justify-content:center}}
.hero-lead{color:var(--fog);font-size:15px;line-height:1.6;max-width:40ch;margin:18px 0 0}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-tags span{border:1px solid var(--hair);border-radius:999px;padding:6px 13px;font-size:12px;color:var(--fog);letter-spacing:.04em}
.cocard-shot{display:block;width:100%}
.cocard-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease}
.cocard a:hover .cocard-shot img{transform:scale(1.03)}
@media(max-width:820px){.hero-tags{justify-content:center}}
.starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.hero-spline{mix-blend-mode:screen}
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:0 20px}
.flight-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}

.solidbtn{background:#ffffff !important;color:#000000 !important;border:none;font-weight:500}
.cocard .cocard-inner{display:grid;gap:16px;padding:clamp(28px,3vw,44px);height:100%}
.cocard-inner:hover .cocard-shot img{transform:scale(1.03)}
.imgband{padding:0;border-top:1px solid var(--hair)}
.imgband-img{display:block;width:100%;height:clamp(300px,52vh,600px);object-fit:cover;opacity:.92;mix-blend-mode:screen}
.svc-link{display:flex;flex-direction:column;gap:12px;height:100%;color:inherit}
.svc-more{margin-top:auto;padding-top:6px;color:var(--fog);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.svc-link:hover .svc-more{color:#fff}
.foot-note{width:100%;color:var(--mist);font-size:11.5px;line-height:1.6;max-width:74ch;margin:18px 0 0;letter-spacing:.02em}

.steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--ink);padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;gap:12px}
.step-n{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:13px;letter-spacing:.24em}
.step-t{font-size:clamp(18px,1.9vw,23px)}
.step-d{color:var(--fog);font-size:14.5px;line-height:1.6;margin:0}
.cs-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center;margin-top:8px}
@media(max-width:860px){.cs-grid{grid-template-columns:1fr}}
.cs-media img{width:100%;border:1px solid var(--hair);border-radius:12px;display:block}
.cs-body .para:first-child{margin-top:0}
.cs-body .para b{color:#fff;font-weight:500}
.ctaband{text-align:center;display:flex;flex-direction:column;align-items:center}
.ctaband .para{margin-left:auto;margin-right:auto}
.ctaband .solidbtn{margin-top:26px}

.capstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:20px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.capstrip span{color:var(--mist);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.browser{display:block;border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:#0d0d0d}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--hair);background:#111}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#2f2f2f;display:block}
.browser-bar em{margin-left:12px;font-style:normal;color:var(--mist);font-size:11.5px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-view{display:block;aspect-ratio:16/10;overflow:hidden}
.browser-view img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.svc-mark{color:#fff;opacity:.9}
.reply-line{color:var(--mist);font-size:13px;letter-spacing:.04em;margin:16px 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 0}
.foot-links a{color:var(--fog);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.foot-links a:hover{color:#fff}

.faq-list{margin:8px 0 0;border-top:1px solid var(--hair)}
.faq-list details{border-bottom:1px solid var(--hair)}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 4px;font-family:'Inter Tight',sans-serif;font-size:clamp(16px,1.9vw,20px);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';color:var(--mist);font-size:22px;line-height:1;transition:transform .25s ease}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{color:var(--fog);font-size:15px;line-height:1.7;max-width:66ch;margin:0 4px 24px}

.scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 clamp(20px,7vw,120px);opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.scene.in{opacity:1;transform:none}
.scene h2{font-family:'Inter Tight',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(34px,7vw,86px);line-height:1.02;max-width:15ch;margin:0}

.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cursor-dot{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px}
.cursor-ring{width:32px;height:32px;border:1px solid rgba(255,255,255,.75);margin:-16px 0 0 -16px;transition:width .25s ease,height .25s ease,margin .25s ease}
.cursor-ring.hover{width:52px;height:52px;margin:-26px 0 0 -26px}
.solidbtn,.hero-ghost,.nav-cta,.mailpill,.ghostbtn{will-change:transform}
@media(hover:hover) and (pointer:fine){.cursor-on .akyn,.cursor-on .akyn a,.cursor-on .akyn button,.cursor-on .akyn summary{cursor:none}.cursor-on .akyn input,.cursor-on .akyn textarea,.cursor-on .akyn select{cursor:auto}}
@media(prefers-reduced-motion:reduce){.js .band,.js .band .eyebrow,.js .band .lede,.js .band .para{opacity:1;transform:none;transition:none}.hero-mark,.scrollcue i{animation:none}}

/* 02 estimate */

.est{--ink:#000;--hair:#2a2a2a;--mist:#8a8a8a;--fog:#b8b8b8;--paper:#fff;min-height:100dvh;background:var(--ink);color:var(--paper);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.est *{box-sizing:border-box}
.est a{color:inherit;text-decoration:none}
.e-nav{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,64px);border-bottom:1px solid var(--hair)}
.e-brand{display:flex;align-items:center;gap:10px}
.e-brand span{font-family:'Inter Tight',sans-serif;letter-spacing:.3em;font-size:16px}
.e-back{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.e-back:hover{color:var(--paper)}
.e-wrap{max-width:720px;margin:0 auto;padding:clamp(48px,9vh,96px) clamp(20px,5vw,40px) 100px}
.e-eyebrow{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:12px;letter-spacing:.34em;text-transform:uppercase;margin:0 0 18px}
.e-title{font-family:'Inter Tight',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(30px,5vw,52px);line-height:1.05;margin:0}
.e-sub{color:var(--fog);font-size:16px;line-height:1.6;max-width:52ch;margin:20px 0 0}
.e-form{margin-top:44px;display:flex;flex-direction:column;gap:40px}
.e-set{border:none;border-top:1px solid var(--hair);padding:28px 0 0;margin:0;display:flex;flex-direction:column;gap:22px}
.e-set legend{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:0}
.e-field{display:flex;flex-direction:column;gap:10px}
.e-field>span{font-size:14.5px;color:var(--paper)}
.e-field input,.e-field select,.e-field textarea{background:#0d0d0d;border:1px solid var(--hair);border-radius:10px;color:var(--paper);font-family:inherit;font-size:15px;padding:13px 14px;outline:none;transition:border-color .25s ease}
.e-field input:focus,.e-field select:focus,.e-field textarea:focus{border-color:var(--paper)}
.e-field textarea{resize:vertical}
.e-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:transparent;border:1px solid var(--hair);border-radius:999px;color:var(--fog);font-family:inherit;font-size:14px;padding:10px 20px;cursor:pointer;transition:all .25s ease}
.chip:hover{border-color:var(--paper);color:var(--paper)}
.chip.on{background:var(--paper);color:#000;border-color:var(--paper)}
.e-hint{color:var(--mist);font-size:13.5px;line-height:1.55;margin:2px 0 0}
.e-submit{align-self:flex-start;background:var(--paper);color:#000;border:none;border-radius:999px;font-family:'Inter Tight',sans-serif;font-size:17px;padding:16px 34px;cursor:pointer;transition:transform .25s ease}
.e-submit:hover{transform:translateY(-2px)}
.e-note{color:var(--mist);font-size:13.5px;line-height:1.6;margin:0}
.e-note a{color:var(--fog);text-decoration:underline;text-underline-offset:3px}
.e-done{margin-top:56px;border-top:1px solid var(--hair);padding-top:40px}
.e-done-mark{color:var(--paper);margin-bottom:20px}
.e-done-t{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:clamp(24px,3.4vw,34px);margin:0}
.e-done-p{color:var(--fog);font-size:16px;line-height:1.65;max-width:52ch;margin:16px 0 0}
.e-done-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.e-solid{background:var(--paper);color:#000;border-radius:999px;padding:14px 26px;font-family:'Inter Tight',sans-serif;font-size:16px}
.e-ghost{border:1px solid var(--hair);border-radius:999px;padding:14px 26px;font-size:15px}
.e-ghost:hover{border-color:var(--paper)}

/* 03 services */

.svcpage{--hair:#2a2a2a;--mist:#8a8a8a;--fog:#b8b8b8;min-height:100dvh;background:#000;color:#fff;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.svcpage *{box-sizing:border-box}
.svcpage a{color:inherit;text-decoration:none}
.sp-nav{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,64px);border-bottom:1px solid var(--hair);position:sticky;top:0;background:#000;z-index:5}
.sp-brand span{font-family:'Inter Tight',sans-serif;letter-spacing:.3em;font-size:15px}
.sp-back{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.sp-back:hover{color:#fff}
.sp-wrap{max-width:820px;margin:0 auto;padding:clamp(48px,9vh,90px) clamp(20px,5vw,40px) 40px}
.sp-eyebrow{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:12px;letter-spacing:.34em;text-transform:uppercase;margin:0 0 16px}
.sp-title{font-family:'Inter Tight',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(30px,5vw,52px);margin:0}
.sp-sub{color:var(--fog);font-size:16px;line-height:1.6;max-width:56ch;margin:18px 0 0}
.sp-index{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 8px}
.sp-index a{border:1px solid var(--hair);border-radius:999px;padding:9px 16px;font-size:13px;color:var(--fog);transition:all .25s ease}
.sp-index a:hover{border-color:#fff;color:#fff}
.sp-svc{border-top:1px solid var(--hair);padding:clamp(44px,7vh,80px) 0;scroll-margin-top:80px}

.sp-svc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.sp-svc-grid.rev .sp-svc-media{order:-1}
@media(max-width:760px){.sp-svc-grid{grid-template-columns:1fr}.sp-svc-grid.rev .sp-svc-media{order:0}}
.sp-svc-media img{width:100%;border:1px solid var(--hair);border-radius:12px;display:block;aspect-ratio:4/3;object-fit:cover}
.sp-svc-eyebrow{font-family:'Inter Tight',sans-serif;color:var(--mist);font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 14px}
.sp-svc-h{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:clamp(24px,3.4vw,38px);letter-spacing:-.02em;margin:0}
.sp-svc-p{color:var(--fog);font-size:16px;line-height:1.7;max-width:62ch;margin:18px 0 0}
.sp-list{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px}
@media(max-width:640px){.sp-list{grid-template-columns:1fr}}
.sp-list li{position:relative;padding-left:20px;color:#e8e8e8;font-size:15px;line-height:1.5}
.sp-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border:1px solid #fff;transform:rotate(45deg)}
.sp-cta{display:inline-block;margin-top:30px;background:#fff;color:#000;border-radius:999px;padding:14px 28px;font-family:'Inter Tight',sans-serif;font-size:16px;transition:transform .25s ease}
.sp-cta:hover{transform:translateY(-2px)}
.sp-foot{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding:36px clamp(20px,5vw,40px) 60px;border-top:1px solid var(--hair);max-width:820px;margin:0 auto;color:var(--mist);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sp-note{width:100%;text-transform:none;letter-spacing:.02em;font-size:11.5px;line-height:1.6;color:var(--mist);margin:8px 0 0}

/* 04 legal */

.lg{--hair:#2a2a2a;--mist:#8a8a8a;--fog:#b8b8b8;min-height:100dvh;background:#000;color:#fff;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.lg *{box-sizing:border-box}
.lg a{color:inherit}
.lg-nav{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,64px);border-bottom:1px solid var(--hair)}
.lg-brand span{font-family:'Inter Tight',sans-serif;letter-spacing:.3em;font-size:15px}
.lg-back{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);text-decoration:none}
.lg-back:hover{color:#fff}
.lg-wrap{max-width:760px;margin:0 auto;padding:clamp(44px,8vh,80px) clamp(20px,5vw,40px) 80px}
.lg-title{font-family:'Inter Tight',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(30px,5vw,46px);margin:0}
.lg-sub{color:var(--mist);font-size:14px;line-height:1.6;max-width:64ch;margin:16px 0 0}
.lg-sec{border-top:1px solid var(--hair);margin-top:44px;padding-top:32px;scroll-margin-top:20px}
.lg-h{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:clamp(22px,3vw,30px);margin:0 0 8px}
.lg-p{color:var(--fog);font-size:15.5px;line-height:1.75;max-width:70ch;margin:16px 0 0}
.lg-p b{color:#fff;font-weight:500}
.lg-p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.lg-contact{margin-top:44px;color:var(--mist);font-size:14px}
.lg-contact a{color:#fff;text-decoration:underline;text-underline-offset:3px}


/* enhancements: a11y + mobile */
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:#fff;color:#000;padding:10px 18px;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:3px}



.progress{position:fixed;top:0;left:0;width:100%;height:2px;background:#fff;transform-origin:0 0;transform:scaleX(0);z-index:260;mix-blend-mode:difference;pointer-events:none}

/* refinements */
::selection{background:#fff;color:#000}
.lock-c .lock-word{font-size:20px}
.lock-c .lock-sub{font-size:7.5px}
.js .band .eyebrow,.js .band .lede,.js .band .para{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .band .eyebrow{transition-delay:.05s}
.js .band .lede{transition-delay:.15s}
.js .band .para{transition-delay:.25s}
.js .band.in .eyebrow,.js .band.in .lede,.js .band.in .para{opacity:1;transform:none}
.cocard{transition:transform .35s ease}
.cocard:hover{transform:translateY(-4px)}
.cocard-shot img{filter:saturate(.85)}
.cocard-inner:hover .cocard-shot img{filter:saturate(1)}
.svcpage a.sp-cta{background:#fff !important;color:#000 !important}
.est a.e-solid{background:#fff !important;color:#000 !important}

.cocard-cta .cocard-inner{align-content:center;justify-items:start;gap:14px;min-height:300px}
.ctatile-h{font-family:'Inter Tight',sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:500}
.ctatile-s{color:var(--fog);font-size:15px}
.sp-brand{display:inline-flex;align-items:center;gap:10px}
.lg-brand{display:inline-flex;align-items:center;gap:10px}

/* scroll-flight hero */
.hero{min-height:0;padding:0;display:block;overflow:visible}
.flight-stage{position:relative;height:400vh}
.flight-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:block}
.flight-sticky .hero-inner{position:absolute;z-index:2;right:clamp(20px,7vw,110px);left:auto;top:50%;transform:translateY(-50%);max-width:520px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;transition:opacity .6s ease}
.flight-sticky.past .hero-inner{opacity:0}
.flight-caption{position:absolute;left:0;right:0;bottom:clamp(80px,12vh,120px);z-index:2;pointer-events:none;height:1.4em}
.flight-caption span{position:absolute;left:0;right:0;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;font-family:'Inter Tight',sans-serif;font-size:clamp(13px,1.5vw,17px);letter-spacing:.34em;text-transform:uppercase;color:#b8b8b8}
.flight-caption span.on{opacity:1;transform:none}
.hero::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.12) 0%,rgba(0,0,0,.7) 100%)}



/* the flight continues behind the content */
.akyn .band,.akyn .capstrip,.akyn .foot{background:rgba(0,0,0,.72)}
.akyn .band.imgband{background:transparent}
html.flying .hero::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.88) 100%)}
.hero::after{transition:background .8s ease}
@media(max-width:820px){.akyn .band,.akyn .capstrip,.akyn .foot{background:#000}}
@media(prefers-reduced-motion:reduce){.akyn .band,.akyn .capstrip,.akyn .foot{background:#000}}

/* last services card fills its row so no empty grid cells show.
   Only span when the last card would actually be orphaned, so the rule keeps
   working whatever the card count is: 3 columns by default, 2 under 900px. */
.svc:nth-child(3n+1):last-child{grid-column:1/-1}
.svc:last-child .svc-d{max-width:70ch}

/* team */
.team-grid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}
.member{background:var(--ink);padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;gap:8px}
.member-mark{color:#fff;opacity:.5;margin-bottom:4px;display:block}
.member-n{font-family:'Inter Tight',sans-serif;font-size:clamp(17px,1.9vw,21px);font-weight:500;margin:0}
.member-r{color:#fff;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;margin:0}
.member-d{color:var(--fog);font-size:14.5px;line-height:1.6;margin:0}

/* hero copy sits right, as originally designed */
.flight-sticky .hero-inner .wordmark,.flight-sticky .hero-inner .tagline,.flight-sticky .hero-inner .hero-lead{text-align:left}
.flight-sticky .hero-inner .rule{margin-left:0}
.flight-caption{text-align:center}


/* native smooth scrolling for anchor links; wheel stays native for max smoothness */
@media(prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}


.worklink{color:#fff;border-bottom:1px solid var(--hair);padding-bottom:2px;font-size:15px}
.worklink:hover{border-color:#fff}

/* the flight runs on every device; only the distance and copy layout change */
@media(max-width:1024px){.flight-stage{height:340vh}}
@media(max-width:820px){
  .flight-stage{height:300vh}
  .flight-sticky{display:flex;flex-direction:column;justify-content:center;padding:0 24px}
  .flight-sticky .hero-inner{position:relative;right:auto;left:auto;top:auto;transform:none;max-width:none}
  .flight-caption{bottom:56px;font-size:11px}
  .hero::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0%,rgba(0,0,0,.85) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .flight-stage{height:auto}
  .flight-sticky{position:relative;height:auto;min-height:100dvh}
  .flight-video{position:absolute}
}

/* four projects in a 2x2 grid, invitation tile spans the row */
.cocard-cta{grid-column:1/-1}
@media(max-width:760px){.cocard-cta{grid-column:auto}}

/* phones: keep every nav link visible, just scaled down */
@media(max-width:720px){
  .nav{padding:12px 16px}
  .nav-links{gap:14px;font-size:11px;letter-spacing:.06em}
  .nav-cta{padding:8px 14px;font-size:10.5px}
  .lock-c .lock-word{font-size:15px;letter-spacing:.22em}
  .lock-c .lock-sub{display:none}
  .lock-c .lock-rule{display:none}
  .lock-c .lock-mark svg{width:26px;height:26px}
}
@media(max-width:560px){
  .nav{padding:10px 12px}
  .nav-links{gap:10px;font-size:10px}
  .nav-cta{padding:7px 11px;font-size:9.5px;letter-spacing:.04em}
  .brand .lock-type{display:none}
}

/* team folded into the studio section */
.team-intro{margin-top:26px}
.agency .team-grid{margin-top:30px}

/* mobile hero matches the desktop treatment: left-aligned, vertically centred */
@media(max-width:820px){
  .flight-sticky{align-items:flex-start;text-align:left}
  .flight-sticky .hero-inner{align-items:flex-start;text-align:left;max-width:none;padding-right:8px}
  .flight-sticky .hero-inner .wordmark,
  .flight-sticky .hero-inner .tagline,
  .flight-sticky .hero-inner .hero-lead{text-align:left}
  .flight-sticky .hero-inner .rule{margin-left:0;margin-right:0}
  .hero-cta{justify-content:flex-start}
  .hero-tags{justify-content:flex-start}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ---- 09 pre-launch hardening ---------------------------------------- */

main{display:block}
picture{display:contents}          /* the <img> keeps behaving as a direct child */

/* grid and flex children must be allowed to shrink, or long words blow the
   layout out sideways on 320px phones */
.co-grid,.team-grid,.svc-grid{min-width:0}
.cocard,.member,.svc{min-width:0}
.cocard a,.cocard .cocard-inner{min-width:0}
.cocard-meta{min-width:0;flex-wrap:wrap;row-gap:6px}
.cocard-name,.cocard-line,.cocard-tag{min-width:0;overflow-wrap:anywhere}
.cocard-tag{white-space:normal}

/* fieldsets ignore width unless min-width is reset; selects refuse to shrink */
.e-set{min-width:0}
.e-field{min-width:0}
.e-field input,.e-field select,.e-field textarea{width:100%;max-width:100%;min-width:0}

/* touch targets: expand the hit area without moving a single pixel of design */
.nav-links a,.sp-back,.sp-brand,.foot a,.worklink,.sp-crumbs a{position:relative}
.nav-links a::before,.sp-back::before,.sp-brand::before,.worklink::before{
  content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.solidbtn,.hero-ghost,.nav-cta,.sp-cta,.e-solid,.e-ghost,.mailpill,.chip,.e-submit{min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}

/* reduced motion: no scroll-scrubbed film, just the still frame */
@media(prefers-reduced-motion:reduce){
  .flight-video{display:none}
  .flight-sticky{background:#000 url("/assets/video/flight-poster-hq.jpg") center/cover no-repeat}
  .hero::after{position:absolute}
}

/* estimate: copyable fallback if the visitor has no mail app configured */
.e-copy{margin-top:22px;color:var(--fog)}
.e-copy summary{cursor:pointer;font-size:13.5px;color:var(--mist)}
.e-copy summary:hover{color:var(--paper)}
.e-pre{margin:14px 0 0;padding:16px;background:#0d0d0d;border:1px solid var(--hair);border-radius:10px;
  white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.6;color:var(--fog);text-align:left}

/* print: the film and the chrome are noise on paper */
@media print{
  .flight-video,.starfield,.progress,.scrollcue,.flight-caption,.cursor-dot,.cursor-ring,.nav{display:none!important}
  .flight-stage{height:auto}.flight-sticky{position:static;height:auto}
  .akyn,.akyn .band,.akyn .foot{background:#fff!important;color:#000!important}
  a{color:#000!important;text-decoration:underline}
}

/* The height="900" / height="1050" attributes on these images act as a
   presentational hint, which pins the box and defeats the aspect-ratio above —
   the pictures were rendering as a narrow vertical sliver. Let the ratio win. */
.sp-svc-media img{height:auto}
.cs-media img{height:auto}

/* remaining small hit areas: legal-page chrome and service breadcrumbs */
.lg-back,.lg-brand,.e-back,.sp-index a,.sp-eyebrow a{position:relative}
.lg-back::before,.lg-brand::before,.e-back::before,.sp-eyebrow a::before{
  content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}

/* footer links are navigation, not prose — give them a thumb-sized target
   (padding rather than an overlay, so wrapped rows never overlap) */
.foot-links{gap:0 20px}
.foot-links a{padding:9px 0}


/* estimate form: real submission (Web3Forms) */
.e-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.e-submit[disabled]{opacity:.55;cursor:progress}
.e-copy[open] .e-pre{display:block}

/* `hidden` must always win. The attribute works via display:none in the
   browser's own stylesheet, and .e-form sets display:flex — which silently
   beat it, leaving the submitted form on screen under the confirmation. */
[hidden]{display:none!important}

/* service-page FAQ — question/answer is the format AI answer engines extract best */
.sp-faq{border-top:1px solid var(--hair);margin-top:clamp(40px,6vh,72px);padding-top:clamp(28px,4vh,44px)}
.sp-faq-i{border-bottom:1px solid var(--hair)}
.sp-faq-i summary{cursor:pointer;list-style:none;padding:22px 0;font-family:'Inter Tight',sans-serif;
  font-size:clamp(17px,2vw,20px);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px}
.sp-faq-i summary::-webkit-details-marker{display:none}
.sp-faq-i summary::after{content:"+";color:var(--mist);font-size:22px;line-height:1;flex:none}
.sp-faq-i[open] summary::after{content:"\2013"}
.sp-faq-i p{margin:0 0 24px;color:var(--fog);font-size:15.5px;line-height:1.7;max-width:70ch}
.sp-byline{color:var(--mist);font-size:14px;margin:14px 0 0}
.sp-byline span{color:var(--fog)}
.sp-foot-links{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center}
.sp-foot-links a{color:var(--mist)}
.sp-foot-links a:hover{color:#fff}
.e-next{margin-top:64px;padding-top:36px;border-top:1px solid var(--hair)}
.e-next h2{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:clamp(20px,2.6vw,26px);margin:0}
.e-next dl{margin:22px 0 0;display:grid;gap:20px}
.e-next dt{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin:0 0 5px}
.e-next dd{margin:0;color:var(--fog);font-size:15.5px;line-height:1.62;max-width:56ch}
/* links inside prose need to be findable: brighter than the body text and
   underlined, so colour is not the only signal */
.sp-svc-p a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sp-svc-p a:hover{text-decoration-thickness:2px}
/* phones: the film layer is sized to the large viewport so it does not resize and
   re-crop when the iOS address bar collapses on the first swipe (that read as a
   stutter at the top of the page). Keep 820 in step with main.js. */
@media(max-width:820px){
  .flight-video{bottom:auto;height:100vh;height:100lvh}
}