/* Manrope, subset and repacked — component review 07, 16 September 2026.
   The shipped TTFs carry 737 glyphs including Cyrillic, Greek and Vietnamese, for a page that uses
   65 characters: 189,900 bytes. These carry a full Latin set plus the punctuation the copy needs —
   233 codepoints, so editing the text cannot silently knock a glyph out — at 13,672 bytes each.
   Declared under their own family name rather than overriding the base sheet's @font-face, which is
   read-only here; the original Manrope stays next in the stack as the safety net, so a character
   outside the subset would still render rather than fall through to Arial. */
@font-face{font-family:"Manrope Subset";src:url(assets/manrope-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope Subset";src:url(assets/manrope-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
body{font-family:"Manrope Subset",Manrope,Arial,sans-serif}

/* Shared UI rules for the complete page. Layout and scroll choreography stay separate. */
:root{--page-gutter:max(4%,calc((100vw - 1520px)/2));--ui-size:14px;
 /* Corners: the Fold corner is the unit — half it, it, double it. A pill is fully round through one token,
    never a repeated literal. (Lightship writes its pills as calc(height/2); ours are padding-sized, not height-sized.) */
 --r-sm:5px;--r-md:10px;--r-lg:20px;--control-radius:999px}
body{-webkit-font-smoothing:antialiased}
::selection{background:#d6d6d0;color:#171717}
header{margin-inline:var(--page-gutter)}
.copy,.canvas,.service-section,.faq-section,.contact-footer{padding-inline:var(--page-gutter)}
.hero>.services{margin-inline:var(--page-gutter)}

/* Buttons & links — Set A from buttons-library: OriginKit Label Slide roll, Sterly Labs arrow reveal, Great UI Animated Link underline.
   Two-class selectors outrank the shared base stylesheet's .actions span, padding and hover-shift rules. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.btn{--ease:cubic-bezier(.16,1,.3,1);position:relative;display:inline-flex;align-items:center;border-radius:var(--control-radius);font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .25s var(--ease)}
.btn:after{content:"";position:absolute;inset:-4px 0}
.btn.btn-primary{min-height:36px;padding:0 16px;background:#fff;color:#171717}
.btn.btn-outline{min-height:32px;padding:0 12px;border:1px solid #ffffff80;color:#fff}
.btn-outline:after{inset:-7px 0}
.btn .roll{display:block;flex:none;height:20px;margin:0;overflow:hidden;width:var(--w1,auto);transition:width .35s var(--ease)}
.btn .roll>span{display:block;width:max-content;margin:0;transition:transform .35s var(--ease)}
.btn .reveal{display:inline-flex;align-items:center;max-width:0;margin-left:0;overflow:hidden;opacity:0;transform:translateX(-4px);transition:max-width .285s cubic-bezier(0,0,.2,1),margin-left .285s cubic-bezier(0,0,.2,1),opacity .285s cubic-bezier(0,0,.2,1),transform .285s cubic-bezier(0,0,.2,1)}
.btn .reveal .i{width:14px;height:14px;stroke-width:22}
.btn:focus-visible .roll{width:var(--w2,auto)}
.btn:focus-visible .roll>span{transform:translateY(-100%)}
.btn:focus-visible .reveal{max-width:16px;margin-left:6px;opacity:1;transform:none}
.text-link{--ease:cubic-bezier(.22,1,.36,1);--line:#1717174d;display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:14px;line-height:20px;white-space:nowrap}
.actions .text-link{padding:0}
.hero .text-link,.contact-footer .text-link{--line:#ffffff73}
.contact-footer .text-link{color:#ddd}
.text-link .u{display:inline;margin:0;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;transition:background-size .3s ease-out}
.text-link:is(:hover,:focus-visible) .u{transform:none}
.text-link:focus-visible .u{background-size:100% 1px,100% 1px}
.text-link .i{transition:transform .32s var(--ease)}

/* Navigation — option 03 from nav-concepts: pill links left, Fold symbol centred, Let's talk right.
   Three grid columns keep the symbol on the centre line; pills follow Sterly Labs' nav at 32px, inverted for the dark hero. */
.hero header{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.hero header>nav{justify-self:start;gap:4px}
.hero header>.btn{justify-self:end}
.brand-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;transition:opacity .15s cubic-bezier(.4,0,.2,1)}
header .brand{display:block;width:auto;height:28px;aspect-ratio:330/320;fill:currentColor}
nav>a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--control-radius);font-size:14px;line-height:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background-color .15s cubic-bezier(.4,0,.2,1)}

/* Hover motion only where a pointer can hover, so a tap on a phone does not leave a pill expanded. */
@media(hover:hover){
 .btn.btn-primary:hover{background:#ecebe6}
 .btn.btn-outline:hover{border-color:#fff;background:#ffffff14}
 .btn:hover .roll{width:var(--w2,auto)}
 .btn:hover .roll>span{transform:translateY(-100%)}
 .btn:hover .reveal{max-width:16px;margin-left:6px;opacity:1;transform:none}
 .text-link:hover .u{background-size:100% 1px,100% 1px}
 .text-link:hover .i{transform:translate(2px,-2px)}
 .text-link:hover .i.dn{transform:translateY(2px)}
 nav>a:hover{background:#ffffff2e}
 .brand-link:hover{opacity:.8}
}
@media(hover:none){.actions .btn:hover span{transform:none}}
.btn.btn-primary:active{background:#e2e1db;transform:scale(.97)}
.btn.btn-outline:active{background:#ffffff24;transform:scale(.97)}

.actions{gap:28px;font-size:var(--ui-size)}
.site-footer>a:last-child{display:inline-flex;align-items:center;min-height:44px;line-height:1.5}
a:focus-visible,button:focus-visible,summary:focus-visible,.screen:focus-visible{outline:2px solid #292929;outline-offset:5px}
.hero a:focus-visible,.hero summary:focus-visible,.contact-footer a:focus-visible{outline-color:#fff}
.skip{background:#fff;color:#171717;border-radius:var(--r-sm);min-height:44px}
#skip-intro{border-radius:var(--control-radius)}
.faq-list summary{min-height:72px;transition:background-color .18s}
.faq-list summary:hover{background:#eeeeeb}
.faq-sign{color:#626262}.faq-list details[open] .faq-sign{color:#171717}
.site-footer>a:first-child{display:inline-flex;align-items:center;min-height:44px}
.mobile-menu{display:none}
@media(max-width:600px){
 :root{--page-gutter:22px;--ui-size:13px}
 .hero header{gap:12px}
 header .brand{height:24px}
 nav>a{display:none}
 .mobile-menu{display:block;position:relative}
 .mobile-menu summary{position:relative;list-style:none;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--control-radius);font-size:14px;line-height:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer}
 .mobile-menu summary:after{content:"";position:absolute;inset:-6px 0}
 .mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu-links{position:absolute;top:calc(100% + 8px);left:0;width:180px;padding:8px;background:#f7f7f5;color:#171717;border:1px solid #d5d5d2;border-radius:var(--r-md);box-shadow:0 12px 28px #0003;z-index:10}
 .mobile-menu-links a{display:flex;align-items:center;min-height:44px;padding:10px 14px;font-size:14px;border-radius:var(--r-sm)}
 .mobile-menu-links a:hover{background:#e8e8e5}
 .hero .mobile-menu-links a:focus-visible{outline-color:#292929;outline-offset:-2px}
 .actions{gap:18px;flex-wrap:wrap}
 .faq-list summary{min-height:68px}
}
@media(max-width:360px){:root{--page-gutter:18px}}