:root{--px:min(calc(100vw / 1440),calc(100dvh / 900))}
.disp{font-family:'Bricolage Grotesque','Noto Sans SC','PingFang SC',system-ui,sans-serif}
.serif{font-family:'Instrument Serif','Noto Serif SC','Songti SC',Georgia,serif}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
button{font:inherit;cursor:pointer}

/* ---------- frame ---------- */
.home{--header-h:calc(96 * var(--px));--strip-h:calc(150 * var(--px));--hero-region-h:calc(100dvh - var(--header-h) - var(--strip-h));position:relative;overflow:hidden;width:100%;height:100dvh;min-height:0;font-family:'Geist','Noto Sans SC','PingFang SC',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .9s ease,color .9s ease}

/* ---------- header ---------- */
.hdr{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(calc(100% - 32px),max(1216px,calc(1216 * var(--px))));height:var(--header-h);padding:0;display:flex;align-items:center;justify-content:space-between;z-index:5}
.logo{display:flex;align-items:center;text-decoration:none}
.logo svg{width:175px;height:35px}
.nav{display:flex;align-items:center;gap:36px}
.navbtn{background:none;border:0;min-height:44px;padding:12px 2px;position:relative;transition:opacity .3s,color .8s;font-size:14px;font-weight:500;letter-spacing:.01em}
.navbtn:hover{opacity:1 !important}
.menu-btn{display:none;width:44px;height:44px;border-radius:22px;border:0;background:transparent;align-items:center;justify-content:center;padding:0}

/* ---------- hero ---------- */
.hero{position:absolute;left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),max(1216px,calc(1216 * var(--px))));top:var(--header-h);bottom:var(--strip-h);padding-bottom:calc(var(--hero-region-h) * .05);display:grid;grid-template-columns:minmax(0,1fr) var(--vis-width,calc(640 * var(--px)));column-gap:calc(var(--gap,64) * var(--px));align-items:center}
.h-text{display:flex;flex-direction:column;min-width:0}
.eyebrow{display:flex;align-items:center;gap:calc(12 * var(--px));font-size:max(11px,calc(12 * var(--px)));letter-spacing:.14em;text-transform:uppercase}
.eyebrow .rule{width:calc(28 * var(--px));height:1px}
.title{margin:clamp(14px,3.1dvh,44px) 0 0;font-size:calc(var(--ts,116) * var(--px));line-height:.9;letter-spacing:-.05em;font-weight:700}
.kicker{margin-top:clamp(14px,3.1dvh,44px);font-size:max(14px,calc(18 * var(--px)));font-weight:500;letter-spacing:.02em}
.kicker + .title{margin-top:clamp(6px,1.1dvh,16px)}
.tag{margin:clamp(16px,3.2dvh,48px) 0 0;font-size:calc(var(--tg,30) * var(--px));line-height:1.22;font-weight:500;letter-spacing:-.015em;text-wrap:pretty}
.desc{margin:clamp(10px,1.8dvh,24px) 0 0;max-width:calc(440 * var(--px));font-size:max(14px,calc(16 * var(--px)));line-height:1.75;text-wrap:pretty}
.actions{margin-top:clamp(20px,4.8dvh,56px);display:flex;align-items:center;gap:calc(24 * var(--px))}
.meta{font-size:12px}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;height:calc(48 * var(--px));padding:0 max(18px,calc(22 * var(--px)));border-radius:999px;font-size:max(14px,calc(15 * var(--px)));font-weight:600;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.1,1)}
.cta:hover{transform:translateY(-2px)}
.cta-arrow{transition:transform .3s}
.cta:hover .cta-arrow{transform:translate(2px,-2px)}
.vis{position:relative;width:var(--vis-width,calc(640 * var(--px)));height:var(--vis-height,calc(480 * var(--px)));flex:none}
.vis-in{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-origin:0 0;transform:scale(var(--vscale,1))}


/* ---------- switcher ---------- */
.strip{position:absolute;left:0;right:0;bottom:calc(36 * var(--px));display:flex;justify-content:center;gap:calc(12 * var(--px));z-index:5}
.thumb{position:relative;width:calc(176 * var(--px));min-height:44px;height:calc(80 * var(--px));padding:calc(12 * var(--px)) calc(14 * var(--px));border-radius:12px;overflow:hidden;text-align:left;display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s cubic-bezier(.2,.7,.1,1),width .45s cubic-bezier(.2,.7,.1,1),opacity .35s,box-shadow .35s}
.thumb:hover{transform:translateY(-4px);opacity:1 !important}
.t-idx{position:relative;font-size:10px;letter-spacing:.1em;opacity:.7}
.t-name{position:relative;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.t-motif{position:absolute;right:12px;top:12px;width:64px;height:56px}
.t-dot{display:none}
.t-bar{position:absolute;left:0;bottom:0;height:3px;transition:width .1s linear}

/* ---------- mobile menu ---------- */
.menu{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;box-sizing:border-box;padding:0 24px 40px}
.menu-top{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;margin-right:-4px}
.menu-list{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.menu-item{display:flex;align-items:baseline;gap:16px;background:none;border:0;padding:10px 0;text-align:left}

/* ---------- decor ---------- */
.dotgrid{background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse at 70% 45%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 45%,#000 10%,transparent 70%)}
.ruled{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,rgba(23,23,26,.05) 35px,rgba(23,23,26,.05) 36px)}
.mi-rings{position:absolute;left:74%;top:47%;width:0;height:0}
.mi-ring{position:absolute;left:0;top:0;width:max(calc(1100 * var(--px)),72vmax);height:auto;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,106,19,.35);animation:ring 6s ease-out infinite}
.mi-ring:nth-child(2){animation-delay:2s}
.mi-ring:nth-child(3){animation-delay:4s}
.decor-planask{position:absolute;right:calc(-160 * var(--px));top:calc(-200 * var(--px));width:max(calc(720 * var(--px)),50vmax);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(124,140,255,.28),rgba(124,140,255,0) 62%);animation:drift 16s ease-in-out infinite}
.decor-motion{position:absolute;right:calc(-280 * var(--px));top:calc(-220 * var(--px));width:max(calc(980 * var(--px)),68vmax);height:auto;animation:spinSlow 80s linear infinite}
.decor-magpie{position:absolute;right:8%;bottom:calc(-320 * var(--px));width:max(calc(760 * var(--px)),53vmax);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(94,230,168,.18),rgba(94,230,168,0) 62%);animation:drift 18s ease-in-out infinite}
.blog-margin{position:absolute;top:0;bottom:0;left:calc(80 * var(--px));width:1px;background:rgba(184,50,42,.18)}
.decor-mi{position:absolute;right:calc(-200 * var(--px));top:calc(60 * var(--px));width:max(calc(700 * var(--px)),49vmax);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,106,19,.16),rgba(255,106,19,0) 62%)}
.decor-contact-ring{position:absolute;left:calc(-240 * var(--px));bottom:calc(-380 * var(--px));width:max(calc(820 * var(--px)),57vmax);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.decor-contact-ring.inner{left:calc(-120 * var(--px));bottom:calc(-260 * var(--px));width:max(calc(580 * var(--px)),40vmax);border-color:rgba(255,255,255,.1)}
.decor-contact-glow{position:absolute;right:calc(-180 * var(--px));top:calc(-220 * var(--px));width:max(calc(700 * var(--px)),49vmax);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,225,77,.22),rgba(255,225,77,0) 60%);animation:drift 16s ease-in-out infinite}

@media(min-aspect-ratio:67/50){
  .hero-mi{padding-top:calc(var(--hero-region-h) * .05);padding-bottom:0}
}

/* A tall window uses its extra height for the artwork and text, not empty margins. */
@media(max-aspect-ratio:67/50){
  .hero{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(20px,3.2dvh,56px)}
  .hero .vis{order:-1;align-self:center}
  .hero .h-text{align-items:center;max-width:560px;text-align:center}
  .hero .eyebrow,.hero .actions{justify-content:center}
  .hero .title{margin-top:clamp(12px,1.8dvh,24px);font-size:calc(var(--ts,116) * var(--px) * .78)}
  .hero .kicker{margin-top:clamp(12px,1.8dvh,24px)}
  .hero .kicker + .title{margin-top:clamp(6px,.9dvh,12px)}
  .hero .tag{justify-content:center;margin-top:clamp(12px,1.6dvh,22px);font-size:calc(var(--tg,30) * var(--px) * .84)}
  .hero .desc{max-width:560px;margin-top:10px;line-height:1.55}
  .hero .actions{margin-top:clamp(16px,2.2dvh,30px)}
}

/* Portrait tablets retain the mobile composition at a larger scale. */
@media(max-aspect-ratio:5/6) and (min-width:768px){
  .home{--header-h:88px;--strip-h:132px}
  .home .hdr{width:calc(100% - 64px)}
  .home .nav{display:none}
  .home .menu-btn{display:flex}
  .home .hero{width:min(calc(100% - 64px),860px);gap:clamp(30px,4dvh,58px)}
  .home .title{font-size:calc(var(--ts,116) * var(--px) * 1.1)}
  .home .tag{font-size:calc(var(--tg,30) * var(--px) * 1.1)}
  .home .desc{font-size:max(16px,calc(16 * var(--px) * 1.2))}
  .home .meta{display:none}
  .home .strip{bottom:32px;gap:9px}
  .home .thumb{width:52px;height:54px;padding:0;border-radius:11px;align-items:center;justify-content:center}
  .home .thumb.on{width:100px}
  .home .t-idx,.home .t-name,.home .t-motif{display:none}
  .home .t-dot{display:block;width:9px;height:9px;border-radius:50%}
}

@media(max-width:767px){
  .home{--header-h:64px;--strip-h:92px}
  .home .hdr{left:0;transform:none;width:100%;height:64px;padding:0 20px 0 24px}
  .home .logo img{width:140px;height:42px}
  .home .nav{display:none}
  .home .menu-btn{display:flex}
  .home .hero{left:24px;right:24px;transform:none;width:auto;top:72px;bottom:92px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(12px,2.4dvh,26px)}
  .home .h-text{text-align:left;align-items:stretch;max-width:none}
  .home .eyebrow,.home .actions{justify-content:flex-start}
  .home .vis{order:-1;align-self:center}
  .home .eyebrow{font-size:11px;gap:10px}
  .home .eyebrow .rule{width:20px}
  .home .title{margin-top:clamp(9px,1.7dvh,14px);font-size:clamp(40px,calc(var(--ts,116) * var(--px) * 1.7),82px)}
  .home .kicker{margin-top:14px;font-size:14px}
  .home .kicker + .title{margin-top:6px}
  .home .tag{justify-content:flex-start;margin-top:clamp(9px,1.7dvh,14px);font-size:calc(var(--tg,30) * var(--px) * 2.3)}
  .home .desc{margin-top:8px;max-width:none;font-size:14px;line-height:1.6}
  .home .actions{margin-top:clamp(13px,2.6dvh,22px)}
  .home .meta{display:none}
  .home .cta{height:44px;padding:0 18px;font-size:14px}
  .home .strip{bottom:max(28px,env(safe-area-inset-bottom));gap:8px}
  .home .thumb{width:40px;height:44px;padding:0;border-radius:10px;align-items:center;justify-content:center}
  .home .thumb.on{width:80px}
  .home .t-idx,.home .t-name,.home .t-motif{display:none}
  .home .t-dot{display:block;width:8px;height:8px;border-radius:50%}
  .home .mi-rings{left:50%;top:36%}
  .home .blog-margin{left:12px}
}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#F5F2EA}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:where(a,button):focus-visible{outline:2px solid currentColor;outline-offset:4px}
.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}
.skip-link{position:fixed;z-index:30;top:10px;left:10px;padding:8px 12px;background:#fff;color:#111;text-decoration:none;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.navbtn[aria-current=true]{opacity:1}
.navbtn{color:inherit}
.navbtn .nav-dot{position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .4s cubic-bezier(.2,.7,.1,1)}
.navbtn[aria-current=true] .nav-dot{transform:scale(1)}
.logo img{display:block;width:175px;height:52px}
.menu-btn{color:inherit}
@media(max-width:767px) and (max-height:760px){
  .home .hero{top:62px;bottom:74px;gap:12px;padding-bottom:calc(var(--hero-region-h) * .06)}
  .home .title,.home .tag{margin-top:9px}
  .home .desc{font-size:14px;line-height:1.45;margin-top:6px}
  .home .actions{margin-top:13px}
  .home .cta{height:44px}
  .home .strip{bottom:16px}
  .home .eyebrow{font-size:10px}
}