/* Fonts: served from this container. Fraunces is open (site/fonts/, SIL Open Font License, see OFL-fraunces.txt there; latin
   subset only, the site is en-GB). Nure, Sys 2.0 and PragmataPro are licensed (site/fonts/nure, sys, ppro): the Caddyfile refuses
   them to any request that is not from one of this site's own pages, as the licences require. The faces in use are preloaded from
   the page head. Fraunces uses font-display:block so the fallback never flashes first; Nure and PragmataPro swap, showing the
   fallback at once rather than hiding text on a slow connection. Nure is the Serenity app's variable font cut down (as its licence
   allows) to the latin range above, normal width only (weight and optical size stay variable) and the layout features the site
   uses: 115 KB against 569 KB. Its stylistic sets are the app's less ss01, whose single-storey "a" clashed with the wordmark's:
   ss03 (g), ss04 (l), ss09 (6 and 9); ss02 (the Franklin "a") is kept in the file should it be wanted. Mono text uses Essential
   PragmataPro (the vendor's reduced character set, 50 KB against 458 KB for PragmataPro Mono), scaled up 15% because its narrow
   letters read small beside the other faces; the ascent and descent overrides are the Serenity app's 95% and 18% divided by that
   115%. It has one weight, so mono text asking for 500 renders at 400. Sys 2.0 and PragmataPro Mono are declared for use but load
   nothing until a rule asks for them. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:block;src:url(/fonts/fraunces-v38-latin-italic-400.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:'Fraunces';font-style:normal;font-weight:400 500;font-display:block;src:url(/fonts/fraunces-v38-latin-normal-400-500.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:'Nure';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/nure/Nure12-VF-latin.woff2) format('woff2-variations');font-feature-settings:"ss03","ss04","ss09";ascent-override:95%;descent-override:18%;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:'Sys2';font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/sys/sys200-webfont.woff2) format('woff2')}
@font-face{font-family:'Sys2';font-style:italic;font-weight:200;font-display:swap;src:url(/fonts/sys/sys200i-webfont.woff2) format('woff2')}
@font-face{font-family:'Sys2';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/sys/sys300-webfont.woff2) format('woff2')}
@font-face{font-family:'Sys2';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/sys/sys300i-webfont.woff2) format('woff2')}
@font-face{font-family:'Sys2';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sys/sys400-webfont.woff2) format('woff2')}
@font-face{font-family:'Sys2';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/sys/sys400i-webfont.woff2) format('woff2')}
@font-face{font-family:'Sys2';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sys/sys700-webfont.woff2) format('woff2')}
@font-face{font-family:'Sys2';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/sys/sys700i-webfont.woff2) format('woff2')}
@font-face{font-family:'PragmataPro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ppro/Essential-PPro-R_1.2.woff2) format('woff2');size-adjust:115%;ascent-override:82.6%;descent-override:15.7%}
@font-face{font-family:'PragmataPro Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ppro/PragmataPro_Mono_R_0829.woff2) format('woff2')}

:root{
  --bg:#121615;--surface:#1A201E;--card:#161B1A;--card2:#1E2624;--line:#2C3432;--line2:#4A5450;
  --text:#EDE8DE;--muted:#BCC2BA;--faint:#8E968D;--glow:#7FE0C8;--moss:#A3B77A;--ink:#121615;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nure",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"PragmataPro",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(20px,6vw,120px);
  --head-h:89px; /* the header, border included: always in view, so jumps land below it */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
/* Clachan is a dark-ground brand: the same tokens apply in both viewer themes */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#121615;--text:#EDE8DE}}
:root[data-theme="dark"]{--bg:#121615;--text:#EDE8DE}
html{scroll-padding-top:calc(var(--head-h) + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
[tabindex="-1"]:focus{outline:none} /* a section focused by an in-page link */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
h1,h2,h3,p{margin:0}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.eyebrow.glow{color:var(--glow)}
.lede{color:var(--muted);font-size:clamp(17px,1.4vw,19px);line-height:1.6}
.h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(34px,4vw,52px);line-height:1.08}
.h2 em,.h1 em{font-style:italic}
.h2 em{display:inline-block} /* an italic phrase wraps as one unit, never mid-phrase */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:500;font-size:16px;background:var(--text);color:var(--ink);border:1px solid var(--text);transition:background .15s}
.btn:hover{background:#fff}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes step{0%,100%{opacity:.45}50%{opacity:1}}
.pulse{animation:step 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}html{scroll-behavior:auto}}
/* Scroll reveal: site.js adds .reveal to the home page's blocks and .in as each enters the viewport. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media print{.reveal{opacity:1;transform:none}}

/* header: always in view. On the home page it is fixed over the hero and site.js gives it a ground
   once the page has left the top; the other pages share one (.solid) that is sticky with a ground */
.site-head{position:fixed;inset:0 0 auto 0;z-index:10;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background-color .2s,border-color .2s}
.site-head.solid{position:sticky}
.site-head.stuck,.site-head.solid{background:rgba(18,22,21,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-head.stuck,.site-head.solid{border-bottom-color:var(--line)}
.site-head .bar{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4.5vw,64px)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:40px;font-size:15px}
.nav a:not(.btn){opacity:.92}.nav a:not(.btn):hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.nav .btn{min-height:44px;padding:0 20px;font-size:15px}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(18,22,21,.6);color:var(--text);cursor:pointer;align-items:center;justify-content:center}

/* hero desktop */
.hero-d{position:relative;width:100%;aspect-ratio:1440/804}
.hero-d img,.hero-d svg,.hero-d .shade,.hero-d .fade{position:absolute;inset:0;width:100%;height:100%}
.hero-d img{object-fit:cover}
.hero-d .shade{background:radial-gradient(circle at 50% 49.8%,rgba(10,14,12,.68) 0,rgba(10,14,12,.44) 13.2vw,rgba(10,14,12,.24) 29.9vw,rgba(10,14,12,.55) 62.5vw)}
.hero-d .fade{top:auto;height:17.4%;background:linear-gradient(rgba(18,22,21,0),var(--bg))}
.tag{position:absolute;font-family:var(--mono);font-size:13px;line-height:20px;background:rgba(18,22,21,.76);padding:8px 12px;border:1px solid rgba(237,232,222,.18);border-radius:6px;white-space:nowrap}
.tag b{font-weight:500;color:var(--glow)}
.tag.t1{left:72.5%;top:18.2%}.tag.t2{right:73.3%;top:47%}.tag.t3{left:73.6%;top:75.9%}
/* The stone ring is a C open to the right, so the copy reads centred a touch right of the true centre */
.hero-copy{position:absolute;left:52%;top:49.3%;transform:translate(-50%,-50%);width:30%;display:flex;flex-direction:column;align-items:center;gap:1.4vw;text-align:center}
.hero-copy .h1{font-family:var(--serif);font-weight:400;font-size:3.2vw;line-height:1.05;letter-spacing:-.02em;color:#fff}
.hero-copy p{max-width:78%;font-size:max(13px,1.11vw);line-height:1.5;color:#E4E6DF}
/* hero mobile */
.hero-m{display:none;padding-top:calc(72px + env(safe-area-inset-top,0px))}
.crop{position:relative;width:100%;max-width:600px;margin:0 auto;aspect-ratio:390/440;overflow:hidden}
.crop img{position:absolute;left:-57.44%;top:0;width:211.8%;height:auto;max-width:none}
.crop svg{position:absolute;inset:0;width:100%;height:100%}
.crop .fade{position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(rgba(18,22,21,0),var(--bg))}
.hero-m .copy{width:min(600px,100% - 48px);margin:0 auto;padding:4px 0 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.hero-m .h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,10.5vw,56px);line-height:1.04;letter-spacing:-.02em}
@media (max-width:1099px){
  .hero-d{display:none}.hero-m{display:block}
  .nav{display:none}.menu-btn{display:inline-flex}
  .site-head .bar{height:72px}
  html:has(.site-head){--head-h:73px}
  .site-head.open .nav{display:flex;position:absolute;top:72px;left:16px;right:16px;flex-direction:column;align-items:stretch;gap:4px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
  .site-head.open .nav a:not(.btn){padding:12px 10px;font-size:17px}
  .site-head.open .nav .btn{margin-top:8px}
}

/* sections */
section{position:relative}
.intro{padding:40px 0 100px}
.intro .wrap{display:flex;flex-direction:column;gap:28px}
.pillars{padding-bottom:140px}
.pillars .rule{height:1px;background:var(--line);margin-bottom:56px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.pillar{display:flex;flex-direction:column;gap:18px}
.pillar h3{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15}
.pillar p,.muted{color:var(--muted)}
.modules{background:var(--surface);padding:120px 0 140px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:64px}
.sec-head .left{display:flex;flex-direction:column;gap:20px;max-width:700px}
.sec-head>p{max-width:440px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:36px;display:flex;flex-direction:column;gap:14px}
.card h3{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.2}
.card p{font-size:16px;color:var(--muted)}
/* product screenshots: text beside a framed capture, sides alternating */
.inside{padding:140px 0 80px}
.inside .sec-head{margin-bottom:8px}
.inside .sec-head .left{max-width:none} /* no lede beside it, so the heading may run the full width */
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:center;padding:56px 0}
.row.flip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.row.flip .text{order:2}
.row .text{display:flex;flex-direction:column;gap:16px}
.row h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.row p{color:var(--muted)}
.shot{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.shot img{display:block;width:100%;height:auto}
.autonomy{background:var(--surface);padding:140px 0}
.autonomy .head{display:flex;flex-direction:column;gap:20px;margin-bottom:64px}
.autonomy .h2{font-size:clamp(36px,4.3vw,56px);line-height:1.06}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stage{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:36px;display:flex;flex-direction:column;gap:12px}
.stage .n{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--glow)}
.stage h3{font-family:var(--serif);font-weight:500;font-size:28px}
.stage p{color:var(--muted);font-size:16px}
.raiven{background:var(--surface);padding:140px 0}
.geum{padding:140px 0}
.raiven .head,.geum .head{display:flex;flex-direction:column;gap:20px;margin-bottom:64px}
.raiven .h2,.geum .h2{font-size:clamp(34px,3.7vw,48px)}
.reg{font-size:.4em;vertical-align:top;position:relative;top:.35em;margin-left:.05em;font-weight:400}
.uses{padding:140px 0}
.uses .head{display:flex;flex-direction:column;gap:20px;margin-bottom:56px}
.uses .h2{font-size:clamp(34px,3.7vw,48px)}
.use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
.use{padding:32px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.use h3{font-size:20px;font-weight:600}
.use p{font-size:16px;color:var(--muted)}
.cta{border-top:1px solid var(--line);padding:120px 0;text-align:center}
.cta .wrap{display:flex;flex-direction:column;align-items:center;gap:32px}
.cta .h2{font-size:clamp(40px,5vw,64px);line-height:1.05}
.cta .lede{max-width:580px}
.cta-page{border-top:0;min-height:100vh;display:flex;align-items:center}
.cta form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:center}
.cta label{display:flex;flex-direction:column;gap:8px;text-align:left;font-size:13px;color:var(--muted)}
.cta input{width:min(340px,80vw);height:52px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:400 16px var(--sans)}
.cta input::placeholder{color:var(--faint)}
.cta .form-privacy{flex-basis:100%;margin-top:4px;text-align:center;font-size:13px;color:var(--faint)}
.cta .form-privacy a{text-decoration:underline;text-underline-offset:3px}
.cta .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* honeypot: bots fill it, people never see it */
/* The Turnstile widget draws its own square, grey-edged box inside an iframe in a closed shadow root, which page CSS cannot reach. Its host, the one child Turnstile adds to the container, can be: it is pulled 2px past the container on every side, and the container clips that edge away and draws the form's own border and corners instead. The fixed height holds the space while the widget loads. Both widgets are flexible-width so the iframe fills its host. */
.cf-turnstile{box-sizing:border-box;height:63px;overflow:hidden;border:1px solid var(--line2);background:var(--surface)}
.cf-turnstile>div{margin:-2px;width:calc(100% + 4px)}
.cta .check{flex-basis:100%;display:flex;justify-content:center}
.cta .check[hidden]{display:none} /* hidden until the button is pressed; the flex rule above would otherwise win over the attribute */
.cta .cf-turnstile{width:300px;border-radius:20px}
.form-note{min-height:24px;font-size:15px;color:var(--glow)}
.form-note.err{color:#F2A7A0}
/* contact page: the legal pages' column and rail, with the form in the column */
.contact-form{position:relative;display:flex;flex-direction:column;gap:20px;margin-top:40px} /* the legal pages' gap under the date */
.contact-form .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:14px 18px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:400 16px/1.5 var(--sans)}
.contact-form input{height:52px}
.contact-form textarea{min-height:200px;resize:vertical}
.contact-form ::placeholder{color:var(--faint)}
.contact-form .send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.contact-form .btn{cursor:pointer}
.contact-form .btn:disabled{opacity:.6;cursor:default}
.doc .contact-form .form-privacy{margin:0;font-size:13px;color:var(--faint)}
.doc .contact-form .form-note{margin:0}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-form .cf-turnstile{border-radius:14px}
@media (max-width:560px){.contact-form .pair{grid-template-columns:1fr}}
/* legal pages */
.doc{padding:64px 0 96px}
.doc-grid{display:grid;grid-template-columns:minmax(0,72ch);justify-content:center}
.doc h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(34px,4vw,48px);line-height:1.1;margin:0 0 12px}
.doc .updated{font-family:var(--mono);font-size:13px;color:var(--faint);margin-bottom:40px}
.doc h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;font-size:24px;margin:40px 0 12px;scroll-margin-top:32px}
.doc p,.doc li{color:var(--muted);margin-bottom:14px}
.doc ul{padding-left:22px;margin:0 0 14px}
.doc li{margin-bottom:10px}
.doc strong{color:var(--text);font-weight:500}
.doc a{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.doc dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;margin:0 0 14px}
.doc dt{color:var(--faint)}
.doc dd{margin:0}
.doc dd+dd{grid-column:2}
@media (max-width:560px){.doc dl{grid-template-columns:1fr;gap:2px}.doc dt{margin-top:10px}.doc dd+dd{grid-column:auto}}
/* The rail beside the text: "On this page" on the legal pages, other ways to reach us on the contact
   page. "On this page" is built by site.js from the h2s: a sticky rail on the right when there is
   room, a disclosure under the title when there is not. The current section is lit as you read. */
.doc-grid.has-toc,.doc-grid.has-rail{grid-template-columns:minmax(0,72ch) 15rem;column-gap:clamp(48px,6vw,96px)}
.toc,.rail{position:sticky;top:calc(32px + var(--head-h));align-self:start;margin-top:12px;padding-left:20px;border-left:1px solid var(--line);font-size:14px;line-height:1.45}
.toc .eyebrow{font-size:12px;margin-bottom:12px}
.rail{display:flex;flex-direction:column;gap:28px}
.doc .rail h2{margin:0 0 12px;font:400 12px/1.45 var(--mono);letter-spacing:.12em}
.doc .rail p{margin:0}
.toc ol,.toc-m ol{list-style:none;margin:0;padding:0}
.doc .toc li{margin:0;padding:6px 0}
.doc .toc a{display:block;margin-left:-21px;padding-left:19px;border-left:2px solid transparent;color:var(--faint);text-decoration:none;transition:color .15s}
.doc .toc a:hover{color:var(--text)}
.doc .toc a.on{color:var(--glow);border-left-color:var(--glow)}
.toc-m{display:none;margin:0 0 40px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.toc-m summary{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;list-style:none}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.toc-m[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.toc-m ol{padding:0 18px 8px}
.doc .toc-m li{margin:0;padding:10px 0;border-top:1px solid var(--line)}
.doc .toc-m a{color:var(--muted);text-decoration:none}
@media (max-width:1099px){
  .doc-grid.has-toc,.doc-grid.has-rail{grid-template-columns:minmax(0,72ch)}.toc{display:none}.toc-m{display:block}
  .rail{position:static;margin-top:56px;padding:32px 0 0;border-left:0;border-top:1px solid var(--line)}
}

/* scroll to top / bottom, shown once the page is tall enough to need them */
.scroll-btns{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9;display:flex;flex-direction:column;gap:8px}
.scroll-btns[hidden]{display:none}
.scroll-btns button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;border:1px solid var(--line2);background:rgba(26,32,30,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:opacity .2s,transform .2s,border-color .15s,color .15s}
@media (hover:hover){.scroll-btns button:hover{border-color:var(--glow);color:var(--glow)}} /* touch latches :hover after a tap */
.scroll-btns button.off{opacity:0;transform:scale(.85);pointer-events:none}

footer{border-top:1px solid var(--line);padding:48px 0}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px 64px;align-items:start}
footer .l{display:flex;flex-direction:column;gap:10px;max-width:60ch}
footer .l .mark{font-family:var(--serif);font-size:22px;font-weight:500}
footer .l p{margin:0;font-size:14px;line-height:1.55;color:var(--faint)}
footer .l p a{text-decoration:underline;text-underline-offset:3px}
footer nav{display:grid;grid-template-columns:repeat(3,auto);gap:32px 56px;font-size:14px}
footer nav div{display:flex;flex-direction:column;gap:10px}
footer nav h4{margin:0 0 6px;font-family:var(--mono);font-weight:500;font-size:12px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
footer nav a:hover{text-decoration:underline;text-underline-offset:5px}

@media (max-width:1099px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head{flex-direction:column;align-items:flex-start}
  .row{grid-template-columns:1fr;gap:32px;padding:40px 0}
  .row.flip{grid-template-columns:1fr}
  .row.flip .text{order:0}
  .stages{grid-template-columns:1fr}
}
@media (max-width:1099px){footer .wrap{grid-template-columns:1fr}footer nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){footer nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .grid3,.cards,.use-grid{grid-template-columns:1fr}
  .grid3{gap:44px}
  .modules,.inside,.autonomy,.raiven,.geum,.uses{padding:88px 0}
  .pillars{padding-bottom:88px}
  .cta{padding:88px 0}
}