:root{
  --bg:#ffffff; --surface:#f6f9fd; --surface-2:#eef3fa;
  --ink:#0d1a2b; --ink-soft:#4d5f78; --ink-faint:#8496ac;
  --line:#e1e9f4; --accent:#1868c8; --accent-soft:#e8f1fc;
  --navy:#0a1b30; --navy-2:#0f2542;
  --on-dark:#eef4fb; --on-dark-soft:#a9bdd6;
  --shadow:0 1px 2px rgba(13,26,43,.05),0 10px 30px rgba(13,26,43,.07);
  --shadow-lg:0 18px 50px rgba(13,26,43,.16);
  --r:10px; --maxw:1140px;
  --g1:#3b82e8; --g2:#2ab8d4; --g3:#41c46a; --g4:#f3c320; --g5:#f5872e; --g6:#ec5f97; --g7:#9b6ff0;
  --grad:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5),var(--g6),var(--g7));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#080f1c; --surface:#0e1a2c; --surface-2:#132340;
    --ink:#e9f0f9; --ink-soft:#9db0c8; --ink-faint:#6d8199;
    --line:#1c2c45; --accent:#5fa8f2; --accent-soft:#122943;
    --on-dark:#eef4fb; --on-dark-soft:#a9bdd6;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
    --shadow-lg:0 18px 50px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#080f1c; --surface:#0e1a2c; --surface-2:#132340;
  --ink:#e9f0f9; --ink-soft:#9db0c8; --ink-faint:#6d8199;
  --line:#1c2c45; --accent:#5fa8f2; --accent-soft:#122943;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 18px 50px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.85;font-size:15.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:"palt" 1;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.gradline{height:3px;background:var(--grad);}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.navrow{display:flex;align-items:center;gap:22px;height:70px;}
.brand img{height:30px;width:auto;}
nav{margin-left:auto;}
nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:500;}
nav a{text-decoration:none;color:var(--ink-soft);position:relative;padding-bottom:4px;white-space:nowrap;}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.3,1);border-radius:2px;}
nav a:hover{color:var(--ink);}
nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.langsw{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;font-size:11.5px;font-weight:600;letter-spacing:.06em;}
.langsw button{background:none;border:0;padding:6px 12px;cursor:pointer;color:var(--ink-faint);font:inherit;transition:.2s;}
.langsw button.on{background:var(--accent);color:#fff;}
.navcta{display:inline-block;background:var(--accent);color:#fff;padding:10px 20px;border-radius:100px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s;}
.navcta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,104,200,.35);}
@media (max-width:1020px){nav{display:none;}}
@media (max-width:520px){.navcta{display:none;}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--on-dark);overflow:hidden;padding:110px 0 96px;}
.mesh{position:absolute;inset:0;pointer-events:none;}
.mesh i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 18s ease-in-out infinite;}
.mesh i:nth-child(1){width:520px;height:520px;background:#2f6fe0;top:-160px;left:-100px;}
.mesh i:nth-child(2){width:460px;height:460px;background:#2ab8d4;top:40px;right:-120px;animation-delay:-4s;}
.mesh i:nth-child(3){width:400px;height:400px;background:#9b6ff0;bottom:-180px;left:36%;animation-delay:-9s;}
.mesh i:nth-child(4){width:320px;height:320px;background:#f5872e;bottom:-140px;right:18%;opacity:.28;animation-delay:-13s;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(28px,-22px) scale(1.09);}}
.gridlines{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%);}
.hero .wrap{position:relative;z-index:2;}
.tagpill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);padding:6px 15px 6px 8px;border-radius:100px;font-size:11.5px;letter-spacing:.14em;font-weight:600;margin-bottom:26px;}
.tagpill b{background:var(--grad);color:#08111e;padding:3px 9px;border-radius:100px;font-size:10.5px;letter-spacing:.1em;}
h1{font-size:clamp(30px,5.1vw,56px);line-height:1.34;font-weight:800;margin:0 0 24px;letter-spacing:-.01em;}
h1 .gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lead{font-size:15.5px;color:var(--on-dark-soft);max-width:40em;margin:0 0 38px;}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:100px;text-decoration:none;font-size:14px;font-weight:600;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s,color .22s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{box-shadow:0 12px 28px rgba(24,104,200,.42);}
.btn-onnavy{background:#fff;color:#0a1b30;}
.btn-onnavy:hover{box-shadow:0 12px 28px rgba(0,0,0,.35);}
.btn-outline{border:1px solid rgba(255,255,255,.42);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.heronote{margin:26px 0 0;font-size:12.5px;color:var(--on-dark-soft);opacity:.8;}

/* ---------- stats ---------- */
.stats{background:var(--navy-2);color:var(--on-dark);border-top:1px solid rgba(255,255,255,.08);}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:34px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.09);}
.stat:last-child{border-right:0;}
.stat .v{font-size:clamp(24px,3.3vw,34px);font-weight:800;line-height:1.2;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .k{font-size:11.5px;color:var(--on-dark-soft);margin-top:6px;letter-spacing:.04em;}
@media (max-width:760px){
  .statgrid{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2){border-right:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.09);}
}

/* ---------- sections ---------- */
section{padding:96px 0;}
.alt{background:var(--surface);border-block:1px solid var(--line);}
.sechead{margin-bottom:52px;max-width:52em;}
.sechead .en{font-size:11px;letter-spacing:.22em;font-weight:700;margin:0 0 12px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sechead h2{font-size:clamp(23px,3.3vw,34px);font-weight:800;margin:0 0 14px;letter-spacing:-.01em;line-height:1.45;}
.sechead p{color:var(--ink-soft);font-size:14.5px;margin:0;}

/* vision */
.vision{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.vcard{border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;background:var(--bg);position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s;}
.vcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.vcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);}
.vcard .w{font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--accent);margin:0 0 12px;}
.vcard h3{font-size:17px;margin:0 0 10px;font-weight:700;}
.vcard p{margin:0;color:var(--ink-soft);font-size:13.5px;}
@media (max-width:880px){.vision{grid-template-columns:1fr;}}

/* pillars (license 3) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pillar{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s,border-color .35s;}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--accent);}
.pillar .top{padding:26px 26px 0;}
.pillar .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;background:var(--accent-soft);}
.pillar .ico svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pillar h3{font-size:18px;margin:0 0 6px;font-weight:800;}
.pillar .sub{font-size:11.5px;letter-spacing:.1em;color:var(--ink-faint);font-weight:600;margin:0 0 14px;}
.pillar p{margin:0 0 18px;color:var(--ink-soft);font-size:13.5px;}
.pillar ul{list-style:none;margin:0;padding:0 26px 26px;font-size:13px;color:var(--ink-soft);}
.pillar li{padding-left:20px;position:relative;margin-bottom:8px;}
.pillar li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:2px;border-radius:2px;background:var(--grad);}
.pillar .foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 26px;font-size:12px;font-weight:600;color:var(--accent);}
@media (max-width:880px){.pillars{grid-template-columns:1fr;}}

/* arklin */
.ark{background:var(--navy);color:var(--on-dark);position:relative;overflow:hidden;}
.ark .mesh i{opacity:.34;}
.ark .wrap{position:relative;z-index:2;}
.ark .sechead h2,.ark .sechead p{color:inherit;}
.ark .sechead p{color:var(--on-dark-soft);}
.arkband{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:14px 28px;margin-bottom:44px;font-weight:700;font-size:15px;}
.arkband em{font-style:normal;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}
.flow3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:14px;margin-bottom:48px;}
.fcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:24px 22px;}
.fcard h4{margin:0 0 10px;font-size:15px;font-weight:700;}
.fcard p{margin:0;font-size:12.5px;color:var(--on-dark-soft);}
.farrow{display:grid;place-items:center;color:rgba(255,255,255,.5);}
.farrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;}
@media (max-width:900px){
  .flow3{grid-template-columns:1fr;}
  .farrow{transform:rotate(90deg);padding:2px 0;}
}
.modal4{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.mcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:20px 18px;text-align:center;transition:background .3s,transform .3s;}
.mcard:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);}
.mcard .ico{width:38px;height:38px;margin:0 auto 12px;border-radius:10px;display:grid;place-items:center;background:var(--grad);}
.mcard .ico svg{width:19px;height:19px;stroke:#08111e;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mcard h4{margin:0 0 6px;font-size:14px;font-weight:700;}
.mcard p{margin:0;font-size:11.5px;color:var(--on-dark-soft);line-height:1.7;}
@media (max-width:900px){.modal4{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.modal4{grid-template-columns:1fr;}}
.arkfoot{margin-top:44px;text-align:center;}
.arkfoot .line{font-size:clamp(17px,2.4vw,23px);font-weight:800;margin:0 0 22px;}

/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:13.5px;}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{background:var(--surface-2);font-size:11px;letter-spacing:.14em;color:var(--ink-faint);font-weight:700;white-space:nowrap;}
tbody tr{transition:background .25s;}
tbody tr:hover{background:var(--accent-soft);}
tbody tr:last-child td{border-bottom:0;}
td.h{font-weight:700;white-space:nowrap;}
td.h small{display:block;font-weight:500;color:var(--ink-faint);font-size:11px;letter-spacing:.06em;margin-top:2px;}
td.why{font-weight:700;color:var(--accent);white-space:nowrap;}
.note{font-size:12.5px;color:var(--ink-faint);margin:18px 0 0;}

/* dev / works */
.devgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.dev{background:var(--bg);padding:32px 28px;transition:background .3s;}
.dev:hover{background:var(--surface);}
.dev .n{font-size:11px;letter-spacing:.16em;font-weight:700;margin:0 0 12px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dev h3{font-size:17px;margin:0 0 10px;font-weight:800;}
.dev p{margin:0;color:var(--ink-soft);font-size:13.5px;}
@media (max-width:880px){.devgrid{grid-template-columns:1fr;}}

.works{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px;}
.work{border:1px solid var(--line);border-radius:var(--r);padding:24px 26px 24px 30px;background:var(--bg);position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;}
.work::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);}
.work:hover{transform:translateX(4px);box-shadow:var(--shadow);}
.work .cat{font-size:clamp(12px,1.1vw,13.5px);letter-spacing:.08em;font-weight:800;
  color:var(--ink-faint);margin:0 0 10px;}
.work h4{font-size:clamp(18px,1.85vw,23px);margin:0 0 10px;font-weight:800;
  line-height:1.5;}
.work p{margin:0;font-size:clamp(13.5px,1.25vw,15px);color:var(--ink-soft);}
/* the whole card is the trigger, so say so */
.work[data-vd]{cursor:pointer;padding-bottom:52px;}
.work[data-vd]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.work .more{position:absolute;left:30px;bottom:20px;margin:0;font-size:13.5px;
  font-weight:800;letter-spacing:.04em;color:var(--accent);
  opacity:.75;transition:opacity .3s,transform .3s;}
.work[data-vd]:hover .more{opacity:1;transform:translateX(3px);}
@media (max-width:880px){.works{grid-template-columns:1fr;}}

/* partner */
.partner{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:44px 42px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;}
.partner h3{font-size:clamp(19px,2.6vw,26px);margin:0 0 12px;font-weight:800;}
.partner p{margin:0 0 18px;color:var(--ink-soft);font-size:14px;}
.partner ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--ink-soft);}
.partner li{padding-left:22px;position:relative;margin-bottom:9px;}
.partner li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;background:var(--grad);}
@media (max-width:880px){.partner{grid-template-columns:1fr;padding:32px 26px;gap:26px;}}

/* clients */
/* ===== logo wall =========================================================
   Set in one face at one size and greyed back, so the row reads as a wall of
   marks rather than a list of sentences. Real logos are trademarks and need
   each owner's written permission; until that exists, this carries the same
   visual weight and none of the exposure. Fixed aspect ratio keeps every
   tile identical whatever the length of the name. */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;}
.client{background:var(--bg);aspect-ratio:16/7;display:grid;place-items:center;
  padding:18px 20px;text-align:center;transition:background .35s;}
.client span{font-weight:800;font-size:clamp(13px,1.35vw,16px);line-height:1.45;
  letter-spacing:.01em;color:var(--ink-faint);
  transition:color .35s,transform .35s cubic-bezier(.2,.7,.3,1);}
.client:hover{background:var(--accent-soft);}
.client:hover span{color:var(--navy);transform:scale(1.045);}
@media (max-width:900px){.clients{grid-template-columns:1fr 1fr;}
  .client{aspect-ratio:16/8;}}
@media (prefers-reduced-motion:reduce){.client span{transition:color .35s;}
  .client:hover span{transform:none;}}

/* company */
.dl{display:grid;grid-template-columns:auto 1fr;font-size:14px;border-top:1px solid var(--line);}
.dl dt{padding:16px 32px 16px 0;color:var(--ink-faint);border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px;}
.dl dd{padding:16px 0;margin:0;border-bottom:1px solid var(--line);}
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}
.mapbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2);aspect-ratio:4/3;}
.mapbox svg{width:100%;height:100%;}
@media (max-width:880px){.cgrid{grid-template-columns:1fr;gap:32px;}}

/* cta */
.cta{background:var(--navy);color:var(--on-dark);text-align:center;position:relative;overflow:hidden;}
.cta .wrap{position:relative;z-index:2;}
.cta h2{font-size:clamp(24px,3.6vw,38px);font-weight:800;margin:0 0 16px;letter-spacing:-.01em;}
.cta .sub{color:var(--on-dark-soft);margin:0 0 36px;font-size:14.5px;}
.ctarow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.ctainfo{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--on-dark-soft);}
.ctainfo b{display:block;color:#fff;font-size:19px;font-weight:800;letter-spacing:.02em;margin-bottom:2px;}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding:52px 0 28px;font-size:13px;}
.frow{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px;}
.frow .fb img{height:26px;margin-bottom:12px;}
.frow .fb p{margin:0;color:var(--ink-soft);font-size:12.5px;}
.flinks{display:flex;gap:48px;flex-wrap:wrap;}
.flinks ul{list-style:none;margin:0;padding:0;}
.flinks li{margin-bottom:9px;}
.flinks a{text-decoration:none;color:var(--ink-soft);transition:color .2s,padding-left .2s;font-size:12.5px;}
.flinks a:hover{color:var(--accent);padding-left:4px;}
.flinks .head{color:var(--ink-faint);font-size:10.5px;letter-spacing:.16em;font-weight:700;margin-bottom:14px;}
.copy{border-top:1px solid var(--line);padding-top:20px;color:var(--ink-faint);font-size:11.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

.totop{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(12px);transition:.35s;}
.totop.show{opacity:1;pointer-events:auto;transform:none;}
.totop svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;}

.draftbar{background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:11.5px;text-align:center;padding:7px 16px;}

/* ================= FULL-BLEED HERO ================= */
body.lock{overflow:hidden;}
header.over{position:absolute;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom:0;z-index:100;}
header.over .navrow{height:88px;}
header.over nav a{color:rgba(255,255,255,.82);}
header.over nav a:hover{color:#fff;}
header.over .langsw{border-color:rgba(255,255,255,.34);}
header.over .langsw button{color:rgba(255,255,255,.7);}
header.over .langsw button.on{background:#fff;color:#0a1b30;}
header.over .navcta{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px);}
header.over .navcta:hover{background:#fff;color:#0a1b30;box-shadow:none;}
header.solid{position:fixed;top:0;left:0;right:0;z-index:100;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.7,.3,1);}
header.solid.show{transform:none;}

.burger{width:44px;height:44px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);backdrop-filter:blur(6px);border-radius:50%;cursor:pointer;display:grid;place-items:center;gap:0;padding:0;flex:0 0 auto;}
.burger span{display:block;width:16px;height:1.5px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s;}
.burger span+span{margin-top:4px;}
header.solid .burger{border-color:var(--line);background:var(--surface);}
header.solid .burger span{background:var(--ink);}
.burger.x span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.hero-full{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#050c16;color:#fff;}
.hero-full .layer{position:absolute;inset:0;}
.hero-full canvas{width:100%;height:100%;display:block;}
.photolayer{background-size:cover;background-position:center;opacity:0;transition:opacity .9s;filter:saturate(.72) contrast(1.05);}
.photolayer.on{opacity:1;}
.veil{position:absolute;inset:0;background:linear-gradient(105deg,rgba(4,11,22,.9) 0%,rgba(4,11,22,.72) 42%,rgba(4,11,22,.42) 100%);}
.veil2{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,11,22,.85) 0%,transparent 34%);}
.hero-inner{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:center;}
.hcopy{font-size:clamp(42px,8.4vw,104px);line-height:1.16;font-weight:900;margin:0 0 26px;letter-spacing:.01em;}
.hcopy .l{display:block;overflow:hidden;}
.hcopy .l i{display:inline-block;font-style:normal;transform:translateY(105%);opacity:0;}
.hcopy .l i.go{animation:lineup .95s cubic-bezier(.16,.9,.3,1) forwards;}
.hcopy .l:nth-child(2) i.go{animation-delay:.13s;}
.hcopy .gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes lineup{to{transform:none;opacity:1;}}
.hsub{font-size:clamp(15.5px,1.85vw,20px);color:rgba(255,255,255,.86);max-width:30em;margin:0;opacity:0;transform:translateY(16px);}
.hsub.go{animation:lineup2 .9s .42s cubic-bezier(.16,.9,.3,1) forwards;}
@keyframes lineup2{to{transform:none;opacity:1;}}
.heropill{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);backdrop-filter:blur(6px);padding:6px 16px 6px 7px;border-radius:100px;font-size:11px;letter-spacing:.16em;font-weight:700;margin-bottom:30px;opacity:0;transform:translateY(14px);animation:lineup2 .8s .1s cubic-bezier(.16,.9,.3,1) forwards;}
.heropill b{background:var(--grad);color:#08111e;padding:3px 10px;border-radius:100px;font-size:10px;letter-spacing:.1em;}

.marquee{position:absolute;left:0;right:0;bottom:86px;z-index:5;overflow:hidden;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:11px 0;}
.mtrack{display:flex;gap:44px;white-space:nowrap;animation:march 34s linear infinite;width:max-content;}
.mtrack span{font-size:12.5px;letter-spacing:.2em;font-weight:600;color:rgba(255,255,255,.62);display:inline-flex;align-items:center;gap:44px;}
.mtrack span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--g2);}
@keyframes march{to{transform:translateX(-50%);}}

.scrollind{position:absolute;left:0;right:0;bottom:26px;z-index:5;display:flex;justify-content:center;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.26em;font-weight:700;color:rgba(255,255,255,.66);}
.scrollind .bar{width:1px;height:34px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;}
.scrollind .bar::after{content:"";position:absolute;top:-34px;left:0;width:1px;height:34px;background:#fff;animation:dropbar 2.1s cubic-bezier(.6,0,.4,1) infinite;}
@keyframes dropbar{0%{transform:translateY(0);}60%,100%{transform:translateY(68px);}}
@media (max-width:700px){.marquee{bottom:76px;}.hero-full{min-height:520px;}}

/* fullscreen menu */
.mfull{position:fixed;inset:0;z-index:120;background:rgba(5,12,22,.97);backdrop-filter:blur(14px);display:none;opacity:0;transition:opacity .35s;}
.mfull.open{display:block;}
.mfull.show{opacity:1;}
.mfull .inner{max-width:var(--maxw);margin:0 auto;padding:110px 24px 40px;height:100%;overflow-y:auto;}
.mfull .mgrid{display:grid;grid-template-columns:1.4fr .6fr;gap:56px;}
.mfull ul{list-style:none;margin:0;padding:0;}
.mfull .big li{border-bottom:1px solid rgba(255,255,255,.12);}
.mfull .big a{display:flex;align-items:baseline;gap:18px;text-decoration:none;color:#fff;padding:19px 0;font-size:clamp(20px,3.2vw,32px);font-weight:800;transition:padding-left .35s,color .35s;opacity:0;transform:translateY(18px);}
.mfull.show .big a{animation:lineup2 .6s forwards;}
.mfull.show .big li:nth-child(1) a{animation-delay:.06s}
.mfull.show .big li:nth-child(2) a{animation-delay:.12s}
.mfull.show .big li:nth-child(3) a{animation-delay:.18s}
.mfull.show .big li:nth-child(4) a{animation-delay:.24s}
.mfull.show .big li:nth-child(5) a{animation-delay:.30s}
.mfull.show .big li:nth-child(6) a{animation-delay:.36s}
.mfull .big a em{font-style:normal;font-size:11px;letter-spacing:.2em;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex:0 0 auto;width:46px;}
.mfull .big a:hover{padding-left:14px;}
.mfull .side p{color:rgba(255,255,255,.6);font-size:12.5px;margin:0 0 8px;}
.mfull .side .tel{font-size:26px;font-weight:800;color:#fff;margin:0 0 4px;letter-spacing:.02em;}
.mfull .side .hd{font-size:10.5px;letter-spacing:.2em;font-weight:700;color:rgba(255,255,255,.45);margin:0 0 14px;}
@media (max-width:860px){.mfull .mgrid{grid-template-columns:1fr;gap:34px;}.mfull .inner{padding-top:96px;}}

/* draft-only control panel */
.draftbar{display:none;}


/* ===== hero slider ===== */
.hbgs{position:absolute;inset:0;}
.hbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.3s ease;transform:scale(1.06);}
.hbg.on{opacity:1;transform:scale(1.14);transition:opacity 1.3s ease,transform 8s linear;}
#cv{opacity:.45;}
.hveil{position:absolute;inset:0;background:linear-gradient(102deg,rgba(4,10,20,.92) 0%,rgba(4,10,20,.76) 40%,rgba(4,10,20,.34) 100%);}
.hveil2{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,10,20,.9) 0%,transparent 36%);}
.hdots{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:14px;}
.hdots button{width:3px;height:38px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.26);border-radius:3px;overflow:hidden;position:relative;}
.hdots button span{position:absolute;inset:0;background:#fff;transform:scaleY(0);transform-origin:top;}
.hdots button.on span{animation:fillv 7s linear forwards;}
@keyframes fillv{to{transform:scaleY(1);}}
.hero-full.paused .hdots button.on span{animation-play-state:paused;}
.hnum{position:absolute;left:24px;bottom:150px;z-index:6;font-size:11px;letter-spacing:.2em;font-weight:700;color:rgba(255,255,255,.55);}
.hnum b{color:#fff;font-size:15px;}
.hcat{display:inline-block;font-size:10.5px;letter-spacing:.2em;font-weight:800;padding:5px 12px;border-radius:100px;background:var(--grad);color:#08111e;margin-bottom:20px;opacity:0;transform:translateY(14px);}
.hcat.go{animation:lineup2 .8s .06s cubic-bezier(.16,.9,.3,1) forwards;}
@media (max-width:820px){.hdots{right:14px;}.hnum{display:none;}}

/* ===== section photo backgrounds ===== */
.ark{background:var(--navy);}
.arkphoto{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;}
.arkveil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,48,.86),rgba(10,27,48,.94));}
#partner{position:relative;overflow:hidden;}
.pnetphoto{position:absolute;inset:0;background-size:cover;background-position:right center;opacity:.08;pointer-events:none;}
:root[data-theme="dark"] .pnetphoto{opacity:.14;}

/* ===== parallax band ===== */
.band{position:relative;min-height:420px;display:grid;place-items:center;overflow:hidden;background:#08131f;color:#fff;text-align:center;}
.bandimg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;will-change:transform;}
.bandveil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,26,.78),rgba(6,15,26,.86));}
.band .inner{position:relative;z-index:3;padding:70px 24px;max-width:840px;}
.band .big{font-size:clamp(34px,7vw,74px);font-weight:900;line-height:1.1;margin:0 0 10px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.band h3{font-size:clamp(18px,2.6vw,26px);font-weight:800;margin:0 0 14px;}
.band p{margin:0;color:rgba(255,255,255,.76);font-size:14px;}


/* ===== horizontal slide track ===== */
.hbgs{position:absolute;inset:0;display:flex;transition:transform .62s cubic-bezier(.55,0,.3,1);will-change:transform;}
.hbg{position:relative;flex:0 0 100%;height:100%;overflow:hidden;opacity:1;transform:none;}
.hbgi{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);}
.hbg.on .hbgi{animation:kenburns 7.6s linear forwards;}
@keyframes kenburns{from{transform:scale(1.02);}to{transform:scale(1.1);}}
.hero-full.paused .hbgi{animation-play-state:paused;}
.hero-full.paused .mtrack{animation-play-state:paused;}

/* ===== hero copy: left aligned ===== */
.hero-inner .wrap{max-width:none;margin:0;width:100%;padding:0 24px 0 clamp(24px,5.6vw,110px);}
.hcopy{max-width:15em;}
.hsub{max-width:30em;line-height:1.8;}
.hcat{margin-left:2px;}
.marquee .mtrack{padding-left:0;}
.hnum{left:clamp(24px,5.6vw,110px);}
@media (max-width:820px){
  .hero-inner .wrap{padding-left:24px;}
  .hcopy{max-width:none;}
}


.hcopy.one{font-size:clamp(28px,6vw,84px);max-width:none;white-space:nowrap;letter-spacing:-.01em;}
@media (max-width:620px){.hcopy.one{white-space:normal;font-size:clamp(27px,8.2vw,42px);}}

/* ===== header: full-bleed, tracks the window edges (not the centred container) ===== */
header .wrap.navrow{
  max-width:none;
  width:100%;
  margin:0;
  padding-left:clamp(20px,5.6vw,110px);
  padding-right:clamp(20px,5.6vw,110px);
}
@media (max-width:820px){
  header .wrap.navrow{padding-left:20px;padding-right:20px;}
}
/* keep the menu overlay on the same left line as the logo */
.mfull .inner{max-width:none;padding-left:clamp(20px,5.6vw,110px);padding-right:clamp(20px,5.6vw,110px);}
@media (max-width:820px){.mfull .inner{padding-left:20px;padding-right:20px;}}


/* ===== larger, fluid logo ===== */
.brand img{height:clamp(42px,3.9vw,68px);transition:height .3s cubic-bezier(.2,.7,.3,1);}
header.over .navrow{height:96px;}
/* The logo is one size everywhere. The solid bar used to shrink it, which
   left the sub-pages carrying a visibly smaller mark than the top page.
   The bar gains height to hold it instead. */
header.solid .navrow{height:88px;}
@media (max-width:820px){
  .brand img{height:40px;}
  header.over .navrow{height:76px;}
}
.frow .fb img{height:34px;}


/* ===== sub-page hero ===== */
.subhero{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding:clamp(150px,20vh,210px) 0 clamp(56px,8vh,80px);}
.subhero .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;}
.subhero .bgveil{position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(4,10,20,.95) 0%,rgba(4,10,20,.8) 44%,rgba(4,10,20,.5) 100%);}
.subhero .wrap{position:relative;z-index:3;max-width:none;width:100%;
  padding-left:clamp(20px,5.6vw,110px);padding-right:clamp(20px,5.6vw,110px);}
.subhero .en{font-size:clamp(30px,5.9vw,70px);line-height:1.05;letter-spacing:.1em;font-weight:800;margin:0 0 6px;
  line-height:1.2;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.subhero h1{font-size:clamp(29px,5.2vw,62px);font-weight:900;margin:0 0 20px;letter-spacing:-.01em;line-height:1.28;}
.subhero p.lead{font-size:clamp(15px,1.72vw,19.5px);line-height:2.05;
  color:rgba(255,255,255,.82);max-width:52em;margin:0;}
@media (max-width:820px){.subhero .wrap{padding-left:20px;padding-right:20px;}}

/* section body uses the same fluid gutter as the hero */
section>.wrap,.band .inner{max-width:1180px;}

/* ===== gateway cards (top page) ===== */
.gates{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.gate{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);padding:26px 24px 22px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;}
.gate::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.gate:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--accent);}
.gate:hover::before{transform:scaleX(1);}
.gate .n{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--ink-faint);margin:0 0 14px;}
.gate h3{font-size:16.5px;font-weight:800;margin:0 0 10px;}
.gate p{font-size:12.5px;color:var(--ink-soft);margin:0 0 18px;line-height:1.8;}
.gate .go{margin-top:auto;font-size:12px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:7px;}
.gate .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .3s;}
.gate:hover .go svg{transform:translateX(4px);}
.gate.nolink{cursor:default;}
.gate.nolink:hover{transform:none;box-shadow:none;border-color:var(--line);}
.gate.nolink:hover::before{transform:scaleX(0);}
.gate .go.soon{color:var(--ink-faint);font-weight:600;font-size:11.5px;}
@media (max-width:1040px){.gates{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.gates{grid-template-columns:1fr;}}

/* ===== vision block ===== */
.visionlead{max-width:44em;margin:0 auto 56px;text-align:center;}
.visionlead p{color:var(--ink-soft);font-size:15px;margin:0;}
.vwords{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.vwords span{font-size:11.5px;letter-spacing:.2em;font-weight:800;padding:6px 16px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink-soft);}

/* ===== nav current state ===== */
nav a.cur{color:var(--ink);}
nav a.cur::after{transform:scaleX(1);}
header.over nav a.cur{color:#fff;}
.mfull .big a.cur em{opacity:1;}

/* preview-only page switching */
.pg{display:none;}
.pg.on{display:block;}
body.is-top .flinks{display:none;}

/* ===== photo-backed section (dark) ===== */
.photosec{position:relative;overflow:hidden;background:#071220;color:#fff;border-block:1px solid rgba(255,255,255,.1);}
.photosec .secimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.92;}
/* dark enough at the top for the white lead text, then opens up over the cards */
.photosec .secveil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,13,24,.8) 0%,rgba(5,13,24,.6) 24%,
    rgba(5,13,24,.24) 52%,rgba(5,13,24,.2) 78%,rgba(5,13,24,.5) 100%);}
.photosec > .wrap{position:relative;z-index:3;}
.photosec .visionlead p{color:rgba(255,255,255,.84);}
.photosec .visionlead p{text-shadow:0 1px 14px rgba(3,10,20,.75);}
.photosec .vwords span{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.66);
  color:#08111e;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);}
/* frosted glass cards - the photo reads clearly through */
.photosec .reason{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.66);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 10px 34px rgba(0,0,0,.2);}
.photosec .reason{padding:40px 36px 38px;}
.photosec .reason h3{color:#050d18;text-shadow:0 1px 10px rgba(255,255,255,.5);margin-bottom:14px;}
.photosec .reason p{color:#16263c;}
@media (max-width:600px){.photosec .reason{padding:32px 26px 30px;}}

/* CONNECT / EXPAND / SUPPORT - set like the NEXENTS logotype */
.brandword{font-family:"Quicksand","Inter",sans-serif;text-transform:lowercase;
  font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.005em;
  line-height:1;margin:0 0 20px;display:flex;}
.brandword span{display:inline-block;}
.brandword span:nth-child(7n+1){color:var(--g1);}
.brandword span:nth-child(7n+2){color:var(--g2);}
.brandword span:nth-child(7n+3){color:var(--g3);}
.brandword span:nth-child(7n+4){color:var(--g4);}
.brandword span:nth-child(7n+5){color:var(--g5);}
.brandword span:nth-child(7n+6){color:var(--g6);}
.brandword span:nth-child(7n+7){color:var(--g7);}
.photosec .brandword span{text-shadow:0 1px 10px rgba(255,255,255,.85),0 0 26px rgba(255,255,255,.5);}
.photosec .reason:hover .brandword span{transform:translateY(-2px);}
.brandword span{transition:transform .35s cubic-bezier(.3,1.4,.5,1);}
.photosec .reason:hover .brandword span:nth-child(2){transition-delay:.03s;}
.photosec .reason:hover .brandword span:nth-child(3){transition-delay:.06s;}
.photosec .reason:hover .brandword span:nth-child(4){transition-delay:.09s;}
.photosec .reason:hover .brandword span:nth-child(5){transition-delay:.12s;}
.photosec .reason:hover .brandword span:nth-child(6){transition-delay:.15s;}
.photosec .reason:hover .brandword span:nth-child(7){transition-delay:.18s;}
.photosec .reason:hover{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.9);
  box-shadow:0 22px 56px rgba(0,0,0,.34);}

/* --- overlap fix: frosted panels + reveal animation + hover lift --- */
.photosec .reasons{align-items:start;gap:28px;}
.photosec .reason{position:relative;z-index:1;isolation:isolate;overflow:hidden;}
.photosec .reason:hover{z-index:6;}
/* a panel that has not animated in yet must not paint its blur/shadow at all,
   otherwise a ghost frame shows through the card below */
.photosec .reason.reveal:not(.in){
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  background:transparent;border-color:transparent;pointer-events:none;}
.photosec .reason.reveal:not(.in) *{visibility:hidden;}
/* keep the letters inside the panel */
.photosec .reason:hover .brandword span{transform:none;}
.brandword{flex-wrap:wrap;}

/* ===== vision: heading + bigger lead ===== */
.visionlead .vtitle{font-size:clamp(23px,3.4vw,36px);font-weight:800;margin:0 0 22px;
  letter-spacing:.01em;line-height:1.45;}
.photosec .visionlead .vtitle{color:#fff;text-shadow:0 2px 18px rgba(3,10,20,.8);}
.photosec .visionlead p{font-size:clamp(15.5px,1.75vw,20px);line-height:2.05;}
.visionlead{max-width:46em;}

/* ===== clickable value cards ===== */
.vcards .reason{text-align:left;font:inherit;cursor:pointer;width:100%;
  display:flex;flex-direction:column;border-radius:var(--r);}
.vcards .reason .vmore{margin-top:auto;padding-top:18px;font-size:12.5px;font-weight:700;
  color:#0b3f7a;letter-spacing:.04em;}
.photosec .vcards .reason:hover .vmore{color:#062a54;}
.vcards .reason:focus-visible{outline:2px solid #fff;outline-offset:3px;}




/* ===== vision cards: one frame, two sheets ==============================
   Hovering slides the whole of sheet 1 up and out of the frame. Sheet 2 does
   not move at all - it is simply uncovered - and its fade is delayed so the
   two identical headings are never both on screen. */
.photosec .vcards .reason{background:rgba(255,255,255,.34);
  border-color:rgba(255,255,255,.7);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 10px 34px rgba(0,0,0,.2);
  display:grid;cursor:default;overflow:hidden;
  transition:background .5s,border-color .5s,box-shadow .5s;}
.photosec .vcards .reason:hover{background:rgba(255,255,255,.52);
  border-color:rgba(255,255,255,.94);box-shadow:0 22px 56px rgba(0,0,0,.34);}
.photosec .reasons{align-items:stretch;}

/* both sheets share one grid cell: the frame takes the taller of the two */
.vsheet{grid-area:1/1;display:flex;flex-direction:column;}
.vfront{z-index:2;
  transition:transform .58s cubic-bezier(.45,0,.2,1),opacity .3s ease .2s;}
.vback{opacity:0;transition:opacity .34s ease .22s;}
.vcards .reason:hover .vfront{transform:translateY(-102%);opacity:0;}
.vcards .reason:hover .vback{opacity:1;}

.vword{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:.05em;
  line-height:1.3;color:#050d18;margin:0 0 18px;
  text-shadow:0 1px 12px rgba(255,255,255,.6);}
.vfront h3{margin-bottom:13px;}
.vhint{margin-top:auto;padding-top:22px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;color:#0b3f7a;opacity:.85;}

/* sheet 2 runs long, so it is set smaller and - uniquely on this site -
   its sentences wrap across the line instead of breaking at every 。 */
.vback p:not(.vword){font-size:clamp(12.6px,1.28vw,14.2px);line-height:1.9;
  color:#16263c;margin:0 0 .95em;}
.vback p:last-child{margin-bottom:0;font-weight:700;color:#08203a;}

/* a card that has not animated in yet must not paint its glass at all */
.photosec .vcards .reason.reveal:not(.in){
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  background:transparent;border-color:transparent;}

/* no hover on touch: show the full text and drop sheet 1 entirely */
@media (hover:none){
  .vfront{display:none;}
  .vback{opacity:1;transition:none;}
}
@media (prefers-reduced-motion:reduce){
  .vfront{transition:opacity .2s;}
  .vcards .reason:hover .vfront{transform:none;}
}


/* ===== vision: the three words, on flat navy between the two photos ===== */
.vstate{background:var(--navy);color:#fff;padding:clamp(62px,8.5vw,104px) 0;}
.vstate .trimark{margin:0 0 14px;}
.vstate h2{font-size:clamp(29px,5.2vw,62px);font-weight:900;letter-spacing:-.01em;
  line-height:1.28;margin:0 0 22px;color:#fff;}
.vstate p{font-size:clamp(15px,1.72vw,19.5px);line-height:2.05;
  color:rgba(255,255,255,.82);max-width:44em;margin:0;}
.vstate .trimark .sep{font-style:normal;color:rgba(255,255,255,.42);
  padding:0 .18em;font-weight:600;}

/* the tagline carries two languages, so it wraps a little tighter */
.subhero h1.tagline{line-height:1.34;}


/* the statement paragraph is the whole argument now, so give it more room */
.vstate p{max-width:52em;}


/* ===== vision frames: wider, so the type can be read ===================== */
.photosec > .wrap{max-width:min(1560px,94vw);}
.photosec .reasons{gap:30px;}

/* the value word is set at the same size as the line under it.
   .vsheet prefix on purpose: .vfront>p / .vback p would otherwise outrank it */
.vsheet p.vword{font-size:clamp(20px,1.95vw,26px);line-height:1.6;margin:0 0 10px;}
.vfront h3{font-size:clamp(20px,1.95vw,26px);line-height:1.6;margin-bottom:15px;}
.vfront > p:not(.vword){font-size:clamp(15px,1.5vw,18px);line-height:1.95;}
.vhint{font-size:12.5px;}
.vback p:not(.vword){font-size:clamp(14.5px,1.42vw,17px);line-height:1.95;margin:0 0 .9em;}
.photosec .vcards .reason{padding:44px 40px 40px;}
@media (max-width:900px){
  .photosec > .wrap{max-width:100%;}
  .photosec .vcards .reason{padding:34px 28px 30px;}
}


/* ===== footer: dark, so it sits with the rest of the page instead of
   dropping a white slab under it ======================================== */
footer{background:var(--navy);border-top:none;color:#fff;}
footer .frow .fb .fname{color:#fff;}
footer .frow .fb p{color:rgba(255,255,255,.72);
  font-size:clamp(21px,2.6vw,30px);line-height:1.75;}
footer .frow .fb .ftel{color:#fff;font-weight:400;
  font-size:clamp(21px,2.6vw,30px);letter-spacing:.01em;}
footer .frow .fb .ftel:hover{color:var(--g2);}
footer .flinks .head{color:rgba(255,255,255,.44);}
footer .flinks a{color:rgba(255,255,255,.76);}
footer .flinks a:hover{color:#fff;}
footer .copy{border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.5);}
footer .copy .ftagline{color:rgba(255,255,255,.8);}
.totop{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);}
.totop svg{stroke:#fff;}
.totop:hover{background:var(--accent);border-color:var(--accent);}


/* ===== section headings: the English label is a heading, not a tag =======
   Same relationship as the page header: label a notch above the line under it.
   The letter-spacing that worked at 11px is far too loose at this size. */
.sechead .en{font-size:clamp(26px,3.7vw,40px);letter-spacing:.09em;line-height:1.1;
  margin:0 0 10px;}
.sechead h2{font-size:clamp(23px,3.3vw,34px);}
.sechead p{font-size:clamp(15px,1.6vw,17.5px);line-height:1.95;}
@media (max-width:600px){.sechead .en{letter-spacing:.06em;}}


/* ===== business: dark ground, light cards ================================
   The section takes the navy of the top page; the six frames stay light so
   they read as cards sitting on it, which is what Aki asked to keep. */
.darksec{background:var(--navy);color:#fff;}
.darksec .sechead h2{color:#fff;}
.darksec .sechead p{color:rgba(255,255,255,.78);}
.darksec .gate{background:var(--bg);border-color:rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.26);}
.darksec .gate h3{color:var(--ink);}
.darksec .gate p{color:var(--ink-soft);}
.darksec .gate .n{color:var(--ink-faint);}
.darksec .gate:hover{border-color:var(--accent);
  box-shadow:0 20px 46px rgba(0,0,0,.4);}


/* ===== dialog ===== */
.vdlg-back{position:fixed;inset:0;z-index:200;background:rgba(4,10,20,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s;}
.vdlgs.open .vdlg-back{opacity:1;pointer-events:auto;}
.vdlg{position:fixed;inset:0;z-index:201;display:none;align-items:center;justify-content:center;
  padding:24px;pointer-events:none;}
.vdlg.open{display:flex;}
.vdlg-panel{position:relative;pointer-events:auto;width:min(900px,94vw);max-height:88vh;overflow-y:auto;
  background:var(--bg);color:var(--ink);border-radius:16px;padding:48px 52px 46px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .34s cubic-bezier(.2,.7,.3,1),transform .34s cubic-bezier(.2,.7,.3,1);}
.vdlg.show .vdlg-panel{opacity:1;transform:none;}
/* the logotype word is the visual anchor of the dialog - set large enough to
   fill the panel; it wraps rather than overflowing on narrow screens */
/* the word is set to span exactly the width of the body text below it:
   panel content width / (letter count x average advance) */
.vdlg-panel{container-type:inline-size;}
.vdlg .vdlg-word{font-size:calc(100cqw / (var(--len,7) * 1.27));
  line-height:.92;margin:0 0 14px;letter-spacing:-.02em;
  flex-wrap:nowrap;white-space:nowrap;}
@supports not (width:100cqw){
  .vdlg .vdlg-word{font-size:clamp(30px,5.5vw,54px);}
}
.vdlg-panel h2{font-size:clamp(30px,4.2vw,48px);line-height:1.15;font-weight:900;
  margin:0 0 28px;letter-spacing:.02em;}
.vdlg-panel p{font-size:15.5px;line-height:1.95;color:var(--ink-soft);margin:0 0 22px;}
.vdlg-panel p:last-child{margin-bottom:0;}
.vdlg-x{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  font-size:22px;line-height:1;cursor:pointer;transition:.2s;}
.vdlg-x:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
@media (max-width:600px){.vdlg-panel{padding:44px 26px 34px;border-radius:12px;}}

/* card word: a label above the heading, not a display size */
.photosec .vcards .brandword{font-size:clamp(28px,3.4vw,42px);
  line-height:1;margin:0 0 18px;letter-spacing:-.005em;
  flex-wrap:nowrap;white-space:nowrap;}

/* three value words above the vision page title */
.subhero .trimark,.vstate .trimark{font-size:clamp(22px,3.6vw,44px);line-height:1.15;margin:0 0 12px;
  letter-spacing:-.01em;flex-wrap:nowrap;white-space:nowrap;align-items:baseline;
  width:max-content;max-width:100%;
  text-shadow:0 2px 16px rgba(3,10,20,.6);}
.subhero .trimark .sep{font-style:normal;color:rgba(255,255,255,.42);
  font-family:"Noto Sans JP",sans-serif;font-size:.62em;padding:0 .12em;}


/* ===== the one tagline ===== */
.copy .ftagline{font-size:clamp(12.5px,1.4vw,15px);font-weight:700;color:var(--ink-soft);
  letter-spacing:.02em;}
/* ===== contact page ===== */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ccard{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:36px 32px 32px;
  position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;}
.ccard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);}
.ccard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--accent);}
.ccard:hover::before{transform:scaleX(1);}
.cico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--accent-soft);}
.cico svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ccard h3{font-size:14px;letter-spacing:.06em;font-weight:700;color:var(--ink-faint);margin:0 0 10px;}
.cbig{display:block;font-size:clamp(20px,2.5vw,27px);font-weight:800;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;margin:0 0 12px;word-break:break-all;}
a.cbig:hover{color:var(--accent);}
.cbig.sm{font-size:clamp(19px,2.2vw,24px);}
.ccard p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.9;}
@media (max-width:900px){.ccards{grid-template-columns:1fr;}}

/* ===== slim call-to-action bar on inner pages ===== */
.ctabar{background:var(--navy);}
.ctabar a{display:flex;align-items:center;justify-content:center;gap:14px;
  max-width:var(--maxw);margin:0 auto;padding:30px 24px;
  color:#fff;text-decoration:none;font-size:clamp(14px,1.7vw,17px);font-weight:700;
  letter-spacing:.02em;transition:gap .3s;}
.ctabar a:hover{gap:22px;}
.ctabar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;flex:0 0 auto;}

/* ===== footer ===== */
footer{position:relative;overflow:hidden;padding:clamp(56px,7vw,84px) 0 34px;}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);}
.frow{align-items:flex-start;gap:48px;}
.frow .fb img{height:clamp(52px,6.4vw,88px);margin-bottom:26px;}
.frow .fb .fname{font-size:clamp(21px,2.6vw,30px);font-weight:800;color:var(--ink);
  margin:0 0 14px;letter-spacing:.02em;line-height:1.5;}
.frow .fb p{font-size:clamp(15.5px,1.75vw,19px);line-height:2;color:var(--ink-soft);margin:0;}
.frow .fb .ftel{display:inline-block;margin-top:16px;font-size:clamp(26px,3.2vw,38px);
  font-weight:800;letter-spacing:.02em;color:var(--ink);text-decoration:none;line-height:1.3;}
.frow .fb .ftel:hover{color:var(--accent);}
.flinks{gap:56px;}
.flinks a{font-size:14.5px;}
.flinks .head{font-size:11.5px;margin-bottom:16px;}
.flinks li{margin-bottom:11px;}
.copy{font-size:12.5px;padding-top:26px;}
.photosec .sechead h2{color:#fff;}
.photosec .sechead p{color:rgba(255,255,255,.78);}

/* ===== body copy scale =================================================
   Descriptions across the site sat at 12.5-13.5px, which reads small for
   Japanese. Raised to a single fluid scale. Eyebrow labels (01, BUSINESS,
   category tags) are deliberately left small - they are not reading text. */
.gate p,.fcard p,.mcard p,.work p,.dev p,.pillar p,.partner p,
.ccard p,.vcard p,.note,.ctainfo,.client,.band p,.cta .sub{
  font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.9;}
.pillar ul,.partner ul,.dl,.dl dt{font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.9;}
table,.tablewrap table{font-size:clamp(14px,1.3vw,15.5px);line-height:1.8;}

/* headings inside cards, nudged so they stay ahead of the bigger body */
.gate h3{font-size:clamp(17.5px,1.7vw,21px);}
.mcard h4,.fcard h4{font-size:clamp(16px,1.55vw,19px);}
.ccard h3{font-size:clamp(14px,1.3vw,15.5px);}
.work h3,.dev h3{font-size:clamp(17px,1.65vw,20px);}

/* links and buttons follow the same step up */
.gate .go{font-size:clamp(13px,1.25vw,14.5px);}
.btn,.navcta{font-size:clamp(14px,1.35vw,15.5px);}
nav ul{font-size:clamp(14px,1.3vw,15.5px);}
footer,.flinks a{font-size:clamp(14px,1.3vw,15.5px);}



/* ===== 01/02/03: two stacked cards, the top one peels ====================
   Card 2 sits offset up and to the right and is visible from the start, so
   the pair reads as two sheets of paper. Every few seconds card 1 tips up on
   its bottom-right corner and a wedge of the text underneath shows through.
   Hovering throws card 1 away for good and card 2 is left standing. */
.fbox{position:relative;display:grid;border:none;background:none;padding:0;
  box-shadow:none;overflow:visible;margin-top:18px;}
.fbox::before{content:none;}
.fbox::after{content:none;}

.fsheet{grid-area:1/1;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:22px 24px;}

/* card 2 - always present, peeking out behind */
.fback{opacity:1;z-index:1;justify-content:flex-start;
  transform:translateY(-7px);
  transition:border-color .4s,box-shadow .4s;}

/* card 1 - the lid */
.ffront{z-index:2;justify-content:center;
  box-shadow:0 5px 16px rgba(10,27,48,.10);
  animation:fpeel 7.2s ease-in-out infinite;
  transition:transform .52s cubic-bezier(.45,0,.35,1),opacity .3s ease .14s,
             box-shadow .4s;}
/* one card at a time: 1.2s to lift and settle, then 1.2s of quiet before the
   next one goes. 2.4s per card, 7.2s round the three. */
@keyframes fpeel{
  0%          {transform:translateY(0);
               box-shadow:0 5px 16px rgba(10,27,48,.10);}
  6%,10.7%    {transform:translateY(-50%);
               box-shadow:0 20px 36px rgba(10,27,48,.26);}
  16.7%,100%  {transform:translateY(0);
               box-shadow:0 5px 16px rgba(10,27,48,.10);}
}
.reasons .fbox:nth-child(1) .ffront{animation-delay:0s;}
.reasons .fbox:nth-child(2) .ffront{animation-delay:2.4s;}
.reasons .fbox:nth-child(3) .ffront{animation-delay:4.8s;}
.fbox:hover .ffront{animation:none;opacity:0;
  transform:translate(46%,-135%) rotate(7deg);}
.fbox:hover .fback{border-color:var(--accent);
  box-shadow:0 16px 40px rgba(10,27,48,.18);}

.fbox .num{display:none;}
.fbox h3{font-size:clamp(16.5px,1.6vw,19.5px);font-weight:800;margin:0;line-height:1.5;}
.fbox .fback p{margin:0;line-height:1.8;}

/* no hover on touch: one card, both blocks stacked in flow */
@media (hover:none){
  .fbox{display:block;margin-top:0;}
  .fsheet{transform:none !important;animation:none;box-shadow:none;}
  .ffront{border-bottom:none;padding-bottom:4px;
    border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .fback{border-top:none;padding-top:10px;
    border-top-left-radius:0;border-top-right-radius:0;}
}
@media (prefers-reduced-motion:reduce){
  .ffront{animation:none;}
  .fbox:hover .ffront{transform:none;}
}


/* ===== figures ==========================================================
   Digits come from Inter, the Japanese around them from Noto Sans JP, so a
   number in a Japanese sentence renders visibly smaller than its neighbours.
   Lift it, and open half a space on whichever side touches Japanese. */
.fig{font-size:1.09em;letter-spacing:.01em;font-feature-settings:"tnum" 1;}
.fig-l{margin-left:.25em;}
.fig-r{margin-right:.25em;}


/* table headings were 11px against 15.5px body copy - match the body */
thead th{font-size:clamp(14px,1.3vw,15.5px);letter-spacing:.04em;
  color:var(--ink-soft);}
td.h small{font-size:clamp(13px,1.2vw,14px);letter-spacing:.02em;margin-top:4px;}


/* ===== per-business cost note ===========================================
   What used to be the pricing page, split up and set beside the business it
   explains. Deliberately quiet: a rule down the side, not a banner. */
.qnote{border-left:3px solid var(--accent);padding:2px 0 2px 22px;max-width:54em;}
.qnote h3{font-size:clamp(20px,2.1vw,27px);font-weight:800;margin:0 0 14px;
  letter-spacing:.02em;line-height:1.5;color:var(--ink);}
.qnote p{margin:0;color:var(--ink-soft);}


/* ===== Arklin: three square cards, flipped on hover ======================
   Its own component, not the peel used on the business page - two different
   sections should not animate the same way. The back face is navy so the
   flip lands on an obvious change of state. */
.aflips{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.aflip{perspective:1500px;}
.aflip-in{position:relative;width:100%;aspect-ratio:1/1;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.3,.85,.3,1);}
.aflip:hover .aflip-in,
.aflip:focus-within .aflip-in{transform:rotateY(180deg);}

.aface{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;padding:30px 28px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 6px 20px rgba(10,27,48,.08);}
.afront h3{font-size:clamp(17px,1.75vw,21px);font-weight:800;margin:0;line-height:1.55;}
.afront::after{content:"›";position:absolute;right:18px;bottom:16px;
  width:26px;height:26px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:15px;line-height:1;
  color:var(--ink-faint);transition:color .3s,border-color .3s;}
.aflip:hover .afront::after{color:var(--accent);border-color:var(--accent);}

.aback{transform:rotateY(180deg);background:var(--navy);border-color:var(--navy);
  box-shadow:0 16px 40px rgba(10,27,48,.28);}
.aback p{margin:0;color:rgba(255,255,255,.88);
  font-size:clamp(13.5px,1.3vw,15px);line-height:1.9;}

@media (max-width:900px){.aflips{grid-template-columns:1fr;}}
/* no hover on touch: no flip, both faces stacked and readable */
@media (hover:none){
  .aflip{perspective:none;}
  .aflip-in{aspect-ratio:auto;transform:none !important;transform-style:flat;}
  .aface{position:static;backface-visibility:visible;transform:none !important;
    box-shadow:none;}
  .afront{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .afront::after{display:none;}
  .aback{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}
}
@media (prefers-reduced-motion:reduce){.aflip-in{transition:none;}}


/* ===== capability icons <-> table, linked ===============================
   Both are generated from one list and share a data-cap key, so hovering an
   icon can light up the row that describes it. */
.modal4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.modal4{grid-template-columns:repeat(2,1fr);}}
.mcard[data-cap]{cursor:default;transition:transform .3s cubic-bezier(.2,.7,.3,1),
  border-color .3s,box-shadow .3s;}
.mcard[data-cap]:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:var(--shadow-lg);}

tbody tr[data-cap]{transition:background .3s,box-shadow .3s;}
tbody tr[data-cap].hl{background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent);}
tbody tr[data-cap].hl td{color:var(--ink);}


/* the use-case flip cards: six of them, so three across rather than the
   three-up default used higher on the page */
.aflips.scenes{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.aflips.scenes{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.modal4{grid-template-columns:1fr;}}

/* ===== work-case dialogs =================================================
   Reuses the vision page's dialog shell. Only the inner typography differs:
   a case title is a sentence, not a single word, so it cannot take the 48px
   treatment the value words use. */
.wdlg .wdlg-h{font-size:clamp(21px,2.5vw,31px);line-height:1.45;font-weight:900;
  margin:6px 0 20px;}
.wdlg .cat{font-size:11.5px;letter-spacing:.12em;font-weight:800;
  color:var(--ink-faint);margin:0;}
.wdlg h3{font-size:12px;letter-spacing:.14em;font-weight:800;color:var(--accent);
  margin:30px 0 12px;}
.wdlg h3:first-of-type{margin-top:26px;}
.wtags{display:flex;flex-wrap:wrap;gap:8px;}
.wtags span{border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font-size:12.5px;font-weight:700;color:var(--ink-soft);background:var(--bg-soft,transparent);}

/* the flip cards on the sub-pages carry a POINT label the Arklin ones lack */
.afront .num{font-size:11px;letter-spacing:.18em;font-weight:800;
  color:var(--ink-faint);margin:0 0 14px;}
/* POINT 版だけ縦を内容に合わせる。Arklin の正方形カードには触れない */
.aflips.pts .aflip-in{aspect-ratio:auto;min-height:300px;}
/* never clip: if copy outgrows the face, let that one face scroll */
.aflips.pts .aback{overflow-y:auto;}
@media (max-width:900px){.aflips.pts .aflip-in{min-height:0;}}

/* ===== type scale =======================================================
   Four jobs, four tokens. Anything that does one of these jobs uses the
   token rather than picking its own number.

     label  eyebrow text above a heading - POINT 01, CREATE, 事業内容
     micro  captions, tags, inline notes
     body   paragraph text inside cards and sections
     card   the heading inside a card

   Appended last on purpose: it settles the earlier rules by order, so no
   !important is needed anywhere. */
:root{
  --fs-label:clamp(12px,1.12vw,13.5px);
  --fs-micro:clamp(12.5px,1.18vw,14.5px);
  --fs-body:clamp(14.5px,1.4vw,16.5px);
  --fs-card:clamp(18px,1.85vw,23px);
}

/* --- labels ---------------------------------------------------------- */
.gate .n,
.dev .n,
.afront .num,
.work .cat,
.wdlg .cat,
.wdlg h3,
.vcard .w,
.pillar .sub,
.stat .k,
.flinks .head,
.mfull .side .hd{
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.13em;
}
/* the label sits closer to its heading once it carries real weight */
.gate .n,.afront .num,.dev .n{margin-bottom:12px;}

/* --- micro ------------------------------------------------------------ */
.wtags span,
.work .more,
.gate .go,
.heronote,
.vhint,
.tagpill,
.langsw{font-size:var(--fs-micro);}

/* --- card headings ---------------------------------------------------- */
.gate h3,
.afront h3,
.work h4,
.fbox h3,
.mcard h4,
.fcard h4,
.vcard h3,
.ccard h3,
.pillar h3{
  font-size:var(--fs-card);
  font-weight:800;
  line-height:1.5;
}

/* --- body ------------------------------------------------------------- */
.gate p,.fcard p,.mcard p,.work p,.pillar p,.partner p,.ccard p,.vcard p,
.note,.ctainfo,.band p,.cta .sub,.pillar ul,.partner ul,.dl,
.aback p,.wdlg .vdlg-panel p{font-size:var(--fs-body);}

/* the development panels label themselves with a word, not a number, so it
   carries the same weight as the heading it introduces */
.afront .num.theme{font-size:var(--fs-card);letter-spacing:.02em;
  color:var(--accent);margin:0 0 6px;line-height:1.4;}

/* ===== partner: advantages as icons wired to a table ====================
   Shares the .mcard / tr[data-cap] contract with the Arklin page, so
   initCapLink picks it up with no new JS. */
.blockhead{font-size:clamp(19px,2.1vw,25px);font-weight:800;margin:0 0 22px;}
.blocklabel{font-size:var(--fs-label);letter-spacing:.16em;font-weight:800;
  color:var(--ink-faint);margin:0 0 14px;}
.flowstep{padding:11px 0 11px 36px;position:relative;
  border-bottom:1px solid var(--line);font-size:var(--fs-body);
  color:var(--ink-soft);}
.flowstep:last-child{border-bottom:0;}

/* ===== company: a real map, with the drawn one behind it ================
   The iframe sits on top. Where external frames are blocked - the
   single-file preview does block them - the illustration underneath shows
   through instead of a white hole. */
/* ===== the map, on a screen =============================================
   nexents runs cloud rendering: the picture is computed on a server in a
   data center and only the image arrives at your end. A display housing is
   therefore not decoration borrowed from somewhere else - it is the shape
   of one of the businesses. The chin carries the coordinates so the frame
   is still telling you where the office is. */
.mapbox{position:relative;overflow:hidden;min-height:372px;
  border-radius:16px;padding:0;
  background:linear-gradient(180deg,#162941 12%,#0b1c31 60%,#08172a 100%);
  border:1px solid #22395a;
  box-shadow:0 1px 2px rgba(8,20,36,.2),0 22px 44px rgba(8,20,36,.28),
             inset 0 1px 0 rgba(255,255,255,.09);}
.mapbox .mapfall,
.mapbox .mapframe{position:absolute;top:15px;left:15px;right:15px;bottom:46px;
  width:auto;height:auto;border-radius:5px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.35);}
.mapbox .mapfall svg{width:100%;height:100%;display:block;}
.mapframe{border:0;display:block;}

/* light catching the glass, kept faint enough to read through */
.mapbox::before{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:46px;
  pointer-events:none;z-index:3;border-radius:5px;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,
             rgba(255,255,255,.05) 26%,transparent 46%);}

/* the chin: a power light and where this screen is pointed */
.mapbox::after{content:"EBISU, TOKYO   35.6510° N  139.7048° E";
  position:absolute;left:0;right:0;bottom:0;height:46px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.16em;font-weight:700;
  color:rgba(233,241,251,.62);
  background:radial-gradient(circle at 24px 50%,
             var(--g2) 0 3px, rgba(95,168,242,.28) 3px 7px, transparent 7px);}

@media (max-width:880px){
  .mapbox{min-height:300px;border-radius:12px;}
  .mapbox .mapfall,.mapbox .mapframe,.mapbox::before{top:10px;left:10px;right:10px;bottom:38px;}
  .mapbox::after{height:38px;font-size:9.5px;letter-spacing:.1em;}
}
.maplink{display:inline-flex;align-items:center;gap:7px;font-weight:700;
  color:var(--accent);text-decoration:none;}
.maplink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.maplink:hover{text-decoration:underline;}
@media (max-width:880px){.mapbox{min-height:260px;}}

.mapnote{position:absolute;left:15px;right:15px;top:15px;margin:0;padding:12px 16px;z-index:4;
  background:rgba(10,27,48,.82);color:rgba(255,255,255,.9);
  font-size:var(--fs-micro);text-align:center;}

/* ===== history =========================================================
   A rail down the left with the year sitting on it. The year is the thing
   people scan, so it gets the weight; the sentence follows at body size. */
.hist{list-style:none;margin:30px 0 0;padding:0;position:relative;}
.hist::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:var(--line);}
.hitem{position:relative;display:grid;grid-template-columns:112px 1fr;gap:20px;
  padding:0 0 17px 24px;}
.hitem:last-child{padding-bottom:0;}
.hitem::before{content:"";position:absolute;left:-4px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--bg);border:2px solid var(--accent);}
.hy{font-size:clamp(19px,2vw,24px);font-weight:900;line-height:1.3;
  letter-spacing:.01em;color:var(--ink);white-space:nowrap;}
.hy em{font-style:normal;font-size:.56em;font-weight:800;color:var(--ink-faint);
  margin-left:1px;}
.hb p{margin:0;font-size:var(--fs-body);color:var(--ink-soft);line-height:1.7;}
@media (max-width:760px){
  .hitem{grid-template-columns:1fr;gap:6px;padding-bottom:26px;}
  .hy{font-size:19px;}
}

/* --- history: the hovered row comes forward, the rest step back --------
   Scaling alone is not enough to read as focus on a full-width row, so the
   siblings dim at the same time. transform-origin sits on the left edge to
   keep the years lined up on the rail while the row grows. */
/* No hover state on the rows: once the sheet has peeled away the timeline
   is simply there to be read, and dimming the rows the pointer is not on
   fights that. */


/* ===== history behind a SINCE panel ====================================
   The cover and the list share one grid cell, so the list sets the height
   and the cover can never be the wrong size. */
.histbox{position:relative;display:grid;margin-top:30px;overflow:hidden;
  border-radius:var(--r);}
.histbox > .histcover,
.histbox > .hist{grid-area:1/1;}
.histbox > .hist{margin-top:0;padding:24px 28px;}
/* the rail is positioned from the ol's edge, so it has to move in with
   the padding or it parts company with the dots */
.histbox > .hist::before{left:30px;}

.histcover{z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:var(--bg);
  border-radius:var(--r);transform-origin:100% 100%;
  /* The fold is written as two explicit polygons rather than a custom
     property, because clip-path interpolates between polygons of equal
     point count everywhere, while animating a registered property does not
     work in every browser - and where it failed, the peel jumped instantly
     instead of animating at all.
     The cut climbs higher up the right edge than it reaches across the
     bottom, so the fold travels upward rather than into the corner. */
  /* At rest the polygon is the full rectangle, written with the fold's
     two points collapsed onto the corner so it still has five points and
     can interpolate to the peeled shape. The sheet therefore looks
     untouched until the pointer arrives. The rounded corners come from
     .histbox, which clips this element - clip-path would square them. */
  clip-path:polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
  filter:drop-shadow(0 5px 15px rgba(10,27,48,.14));
  /* The idle bounce runs on transform; the peel runs on clip-path. They
     must stay on separate properties - an animation holds the property it
     drives, and stopping it on hover makes that value jump rather than
     transition, which is what swallowed the peel before. */
  animation:hhop 3s infinite;
  transition:clip-path .75s cubic-bezier(.45,.02,.3,1),
             opacity .22s ease .56s;}

/* the shadow the lifted corner throws back onto the sheet */
.histcover::before{content:"";position:absolute;right:0;bottom:0;
  width:0;height:0;pointer-events:none;
  background:radial-gradient(120% 120% at 100% 100%,
             rgba(10,27,48,.20) 0%, rgba(10,27,48,.07) 42%, transparent 68%);
  transition:width .75s cubic-bezier(.45,.02,.3,1),
             height .75s cubic-bezier(.45,.02,.3,1);}

/* the flap: the back of the sheet, showing in the space the cut opened */
.histcover::after{content:"";position:absolute;right:0;bottom:0;
  width:0;height:0;transform-origin:100% 100%;
  background:linear-gradient(315deg,
             var(--surface-2) 0%, var(--surface) 38%, #fff 78%, var(--bg) 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  box-shadow:-5px -5px 12px rgba(10,27,48,.16) inset;
  border-bottom-right-radius:var(--r);
  transition:width .75s cubic-bezier(.45,.02,.3,1),
             height .75s cubic-bezier(.45,.02,.3,1);}

.hsince{margin:0;font-size:var(--fs-label);letter-spacing:.34em;font-weight:800;
  color:var(--ink-faint);text-indent:.34em;}
.hsy{margin:0;font-size:clamp(38px,6.4vw,76px);font-weight:900;line-height:1.05;
  letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.hsy em{font-style:normal;font-size:.44em;}

/* three flicks of the corner, then a beat of quiet */
/* three hops, then two seconds of quiet. Each hop leaves fast and drops
   back under its own weight, so the easing is set per keyframe. */
@keyframes hhop{
  0%   {transform:translateY(0);animation-timing-function:cubic-bezier(.25,.7,.35,1);}
  5%   {transform:translateY(-15px);animation-timing-function:cubic-bezier(.6,0,.85,.4);}
  10%  {transform:translateY(0);animation-timing-function:cubic-bezier(.25,.7,.35,1);}
  15%  {transform:translateY(-15px);animation-timing-function:cubic-bezier(.6,0,.85,.4);}
  20%  {transform:translateY(0);animation-timing-function:cubic-bezier(.25,.7,.35,1);}
  25%  {transform:translateY(-15px);animation-timing-function:cubic-bezier(.6,0,.85,.4);}
  30%,100%{transform:translateY(0);}
}

/* The peel follows the pointer: the sheet lifts on hover and settles back
   when it leaves. */
@media (hover:hover){
  .histbox:hover .histcover{animation:none;opacity:0;
    clip-path:polygon(0 0, 100% 0, 100% -95%, -70% 100%, 0 100%);}
  .histbox:hover .histcover::after{width:1500px;height:1950px;}
  .histbox:hover .histcover::before{width:1700px;height:2200px;}
}
/* no pointer, no reveal: show the timeline outright */
@media (hover:none){
  .histcover{display:none;}
  .histbox{overflow:visible;}
  .histbox > .hist{padding:0;}
}
@media (prefers-reduced-motion:reduce){
  .histcover{animation:none;transition:opacity .3s;}
  .histbox:hover .histcover{transform:none;}
}

/* ===== company profile: a step down from the hero into the history ======
   The section used to sit as flat white between a dark hero and a tinted
   band, which read as two hard edges. It now starts on the tinted surface
   and settles onto exactly the colour the next section uses, so the two
   run together and only the hero keeps a visible boundary. */
/* Three steps down from the hero, each one a shade lighter than the band
   above it: navy photo, then PROFILE, then HISTORY. Flat tones rather than
   a blend, so the staircase is actually visible. */
.profilesec{background:#e2ebf6;}
.profilesec + .alt{background:#edf3fa;border-top:0;}

/* The tinted panel eats the contrast the white version had: the faint ink
   used for the labels and the pale rules both sat only a shade away from
   the new background. Both step down one level inside this section only. */
.profilesec .sechead p{color:var(--ink-soft);}
.profilesec .dl dt{color:#5b6e88;}
.profilesec .dl dd{color:var(--ink);}
.profilesec .dl dt,
.profilesec .dl dd{border-bottom-color:#cfdcec;}
.profilesec .mapbox{border-color:#cfdcec;}
.profilesec .maplink{color:#0f57ad;}

/* ===== the globe on the screen =========================================
   A dot lattice with a graticule, not a map: it turns because the lattice
   drifts, and the sphere comes from shading rather than from geometry.
   When the panel scrolls into view it dives into the map underneath. */
.globe{position:absolute;top:15px;left:15px;right:15px;bottom:46px;z-index:5;
  display:grid;place-items:center;overflow:hidden;border-radius:5px;
  background:radial-gradient(120% 120% at 50% 0%,#12294a 0%,#0a1a2e 55%,#06111f 100%);
  pointer-events:none;
  transition:opacity .9s ease .55s, visibility 0s linear 1.45s;}
.globe .ball{position:relative;display:block;--gw:190px;
  width:var(--gw);height:var(--gw);border-radius:50%;
  /* the texture is set inline on the element itself. A url() inside a
     custom property is resolved against the stylesheet in some engines, so
     assets/earth.jpg became assets/assets/earth.jpg and silently 404'd. */
  /* twice the width of the ball, so the circle shows one hemisphere */
  background-size:calc(var(--gw) * 2) var(--gw);
  background-repeat:repeat-x;
  background-position:0 0;
  box-shadow:inset -16px -12px 38px rgba(2,8,18,.82),
             inset 12px 9px 26px rgba(150,205,255,.10),
             0 0 52px rgba(31,116,214,.34);
  animation:spin 34s linear infinite;}

/* the highlight stays put while the surface moves under it */
.globe .ball::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(58% 52% at 29% 23%,rgba(255,255,255,.26),transparent 62%),
    radial-gradient(115% 115% at 26% 20%,transparent 46%,rgba(3,10,22,.30) 74%,
                    rgba(2,7,16,.62) 100%);}

/* exactly one tile, so the seam never shows */
@keyframes spin{
  to{background-position:calc(var(--gw) * -2) 0;}
}

/* the dive: the sphere rushes at you and the map is already behind it */
.mapbox.dive .globe{opacity:0;visibility:hidden;}
.mapbox.dive .globe .ball{animation-play-state:paused;
  transform:scale(9);
  transition:transform 1.45s cubic-bezier(.62,.02,.35,1);}
.globe .ball{transition:transform 1.45s cubic-bezier(.62,.02,.35,1);}

@media (max-width:880px){
  .globe{top:10px;left:10px;right:10px;bottom:38px;}
  .globe .ball{--gw:148px;}
}
@media (prefers-reduced-motion:reduce){
  .globe .ball{animation:none;}
  .mapbox.dive .globe .ball{transform:none;}
  .globe{transition:opacity .4s;}
}

/* ===== the founder ======================================================
   Name on the left with room around it, the record on the right. No photo
   yet, so the type carries it: the name is set large enough to be the
   anchor a portrait would otherwise be. */
.ceo{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(28px,4vw,64px);
  margin-top:clamp(38px,5vw,58px);padding-top:clamp(30px,4vw,44px);
  border-top:1px solid #cfdcec;}
.ceorole{margin:0 0 8px;font-size:clamp(15px,1.5vw,18px);letter-spacing:.06em;
  font-weight:800;color:#4a5d78;}
.ceonm{margin:0;font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:.02em;
  line-height:1.2;color:var(--ink);}
.ceoen{margin:6px 0 0;font-size:var(--fs-micro);letter-spacing:.14em;font-weight:700;
  color:var(--ink-faint);text-transform:uppercase;}
.ceobio h3{margin:0 0 12px;font-size:clamp(15px,1.5vw,18px);letter-spacing:.06em;
  font-weight:800;color:#4a5d78;}
.ceobio p{margin:0;font-size:var(--fs-body);line-height:1.95;color:var(--ink-soft);}
@media (max-width:760px){
  .ceo{grid-template-columns:1fr;gap:22px;}
}

/* ===== vision cards: the face states the value, the sheet explains it ====
   The two sheets used to open with the same wordmark and the same word, so
   nothing told you there was more underneath. The face is now the word
   alone. Height comes down with it: the panel is sized by the sheet with
   the copy on it, and that copy is one paragraph on tighter leading.

   No idle animation on these cards. They carry a backdrop-filter, and an
   animation - even one that spends nine tenths of its cycle at rest - keeps
   the element on its own compositing layer for good. The glass then samples
   a backdrop that is stale or offset, which showed up as a second
   translucent panel bleeding over the lower edge. Motion and glass cannot
   share this element; see the note in the reply for the two ways round it. */
.photosec .vcards{max-width:75%;margin-left:auto;margin-right:auto;}
@media (max-width:900px){.photosec .vcards{max-width:none;}}
.photosec .vcards .reason{padding:30px 34px 28px;}
.vback p:not(.vword){line-height:1.75;margin:0;font-weight:400;}
/* the closing sentence used to be its own paragraph and was set bold to
   land it. Now that the whole block is one paragraph, that rule would
   embolden all of it. */
.vback p:not(.vword):last-child{font-weight:400;color:inherit;}
.vsheet p.vword{margin:0 0 14px;}
.vfront{justify-content:center;align-items:center;text-align:center;}
.photosec .vcards .reason{text-align:center;}
/* the sheet underneath keeps its left edge: a paragraph of running text set
   centred is markedly harder to read, because every line starts somewhere
   different */
.photosec .vcards .vback{text-align:left;align-items:stretch;}

/* Breathing, on the contents rather than on the panel. The panel carries a
   backdrop-filter; anything animated on it stays promoted to its own
   compositing layer for good, and the glass then samples a backdrop that is
   stale or offset. The wordmark has no such filter, so it can move freely
   while the sheet behind it stays perfectly still.
   Each card breathes a little behind the one above it, so the three read as
   a sequence rather than as one pulse. */
/* .vfront only. Without that qualifier this also caught the wordmark on
   the sheet underneath, which scaled up with it and pushed "expand" past the
   edge of the panel. The two sheets carry the same classes; only the front
   one breathes. */
.photosec .vcards .vfront .brandword,
.photosec .vcards .vfront .vword{
  transform-origin:center center;
  animation:vbreathe 2.6s ease-in-out infinite;}
/* the back sheet's word is set once and stays there */
.photosec .vcards .vback .brandword,
.photosec .vcards .vback .vword{animation:none;transform:none;}
.vcards .reason:nth-child(1) .vfront .brandword,
.vcards .reason:nth-child(1) .vfront .vword{animation-delay:0s;}
.vcards .reason:nth-child(2) .vfront .brandword,
.vcards .reason:nth-child(2) .vfront .vword{animation-delay:.3s;}
.vcards .reason:nth-child(3) .vfront .brandword,
.vcards .reason:nth-child(3) .vfront .vword{animation-delay:.6s;}
.photosec .vcards .reason:hover .vfront .brandword,
.photosec .vcards .reason:hover .vfront .vword{animation-play-state:paused;}

@keyframes vbreathe{
  0%,100%{transform:scale(1);}
  46%    {transform:scale(1.18);}
}
@media (prefers-reduced-motion:reduce){
  .photosec .vcards .vfront .brandword,
  .photosec .vcards .vfront .vword{animation:none;}
}


/* the use-case cards carry real sentences now; never let one get clipped */
.aflips .aback{overflow-y:auto;}
.aflips .aflip-in{min-height:250px;}

/* ===== privacy: a plain reading column ==================================
   No cards and no columns. A policy is read in order, or searched for one
   clause; both are better served by a single measure of text than by a
   grid that scatters the clauses across the page. */
.pvlist{max-width:840px;margin-top:34px;}
.pv{padding:26px 0;border-bottom:1px solid var(--line);}
.pv:first-child{border-top:1px solid var(--line);}
.pv h3{margin:0 0 10px;font-size:clamp(17px,1.7vw,20px);font-weight:800;}
.pv p{margin:0;font-size:var(--fs-body);line-height:1.95;color:var(--ink-soft);}

/* The texture, addressed from this stylesheet rather than through a custom
   property. A url() inside a custom property is resolved against the
   stylesheet in some engines, so assets/earth.jpg became
   assets/assets/earth.jpg and silently 404'd. site.css lives in assets/,
   so a bare filename lands in the right place either way. */
.globe .ball{background-image:url(earth.jpg);}
/* An iframe is a replaced element: pinning all four sides while width stays
   auto leaves it at its intrinsic 300x150 rather than stretching to the box.
   It has to be told its size outright. */
.mapbox .mapframe{width:calc(100% - 30px);height:calc(100% - 61px);right:auto;bottom:auto;}
@media (max-width:880px){
  .mapbox .mapframe{width:calc(100% - 20px);height:calc(100% - 48px);}
}

/* ===== enquiry form ====================================================
   Two columns on a wide screen, one on a narrow one; the enquiry itself
   always spans the full width. Labels sit above their fields rather than
   beside them - a label to the left of an input has to be given a fixed
   width, and Japanese and English labels are never the same length. */
.cform{max-width:820px;margin-top:34px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;}
.fld{display:flex;flex-direction:column;gap:8px;}
.fld.wide{grid-column:1/-1;}
.lbl{font-size:var(--fs-label);font-weight:800;letter-spacing:.06em;color:#4a5d78;
  display:flex;align-items:center;gap:6px;}
.req{color:#c8412f;font-weight:900;}
.opt{font-style:normal;font-size:.86em;font-weight:700;color:var(--ink-faint);}
.cform input,.cform select,.cform textarea{
  font:inherit;font-size:var(--fs-body);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;width:100%;transition:border-color .25s,box-shadow .25s;}
.cform textarea{resize:vertical;line-height:1.8;min-height:180px;}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.cform input:user-invalid,.cform textarea:user-invalid{border-color:#c8412f;}

/* the field no person can see; robots fill it in and are discarded */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.agree{display:flex;align-items:flex-start;gap:10px;margin:22px 0 6px;
  font-size:var(--fs-body);color:var(--ink-soft);cursor:pointer;}
.agree input{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--accent);}
.agree a{color:var(--accent);}
.cform .btn{margin-top:18px;min-width:200px;justify-content:center;}
.fmsg{margin:16px 0 0;font-size:var(--fs-body);font-weight:700;min-height:1.6em;}
.fmsg.ok{color:#0f7a48;}
.fmsg.ng{color:#c8412f;}
.cform.sent .fgrid,.cform.sent .agree,.cform.sent .btn{display:none;}
@media (max-width:700px){.fgrid{grid-template-columns:1fr;}}

/* ===== the three enquiry kinds, each behind its own fold =================
   The same sheet as the company history, one to a card. Cover and body
   share a grid cell, so the body sets the height and the cover can never
   be the wrong size for it. */
.rboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;}
.rbox{position:relative;display:grid;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg);}
.rbox > .rbody,.rbox > .rcover{grid-area:1/1;}
.rbody{padding:32px 30px 34px;display:flex;flex-direction:column;gap:12px;}
.rbody .num{margin:0;font-size:var(--fs-label);font-weight:800;letter-spacing:.22em;
  color:var(--accent);}
.rbody h3{margin:0;font-size:var(--fs-card);font-weight:800;line-height:1.45;}
.rbody p:last-child{margin:0;font-size:var(--fs-body);line-height:1.95;
  color:var(--ink-soft);}

/* The fold is two explicit polygons with the same point count: at rest the
   two fold points sit on top of the corner, so the sheet looks untouched
   and can still interpolate to the peeled shape. The hop runs on transform
   and the peel on clip-path - an animation holds the property it drives,
   so sharing one would make the peel jump instead of travel. */
.rcover{z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding:26px 22px;text-align:center;
  background:var(--bg);border-radius:var(--r);transform-origin:100% 100%;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
  filter:drop-shadow(0 5px 15px rgba(10,27,48,.14));
  animation:hhop 3s infinite;
  transition:clip-path .75s cubic-bezier(.45,.02,.3,1),
             opacity .22s ease .56s;}
/* left to right, so the three read as one gesture rather than a jolt */
.rboxes .rbox:nth-child(2) .rcover{animation-delay:.22s;}
.rboxes .rbox:nth-child(3) .rcover{animation-delay:.44s;}

/* the shadow the lifted corner throws back onto the sheet */
.rcover::before{content:"";position:absolute;right:0;bottom:0;
  width:0;height:0;pointer-events:none;
  background:radial-gradient(120% 120% at 100% 100%,
             rgba(10,27,48,.20) 0%, rgba(10,27,48,.07) 42%, transparent 68%);
  transition:width .75s cubic-bezier(.45,.02,.3,1),
             height .75s cubic-bezier(.45,.02,.3,1);}
/* the flap: the back of the sheet, showing in the space the cut opened */
.rcover::after{content:"";position:absolute;right:0;bottom:0;
  width:0;height:0;transform-origin:100% 100%;
  background:linear-gradient(315deg,
             var(--surface-2) 0%, var(--surface) 38%, #fff 78%, var(--bg) 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  box-shadow:-5px -5px 12px rgba(10,27,48,.16) inset;
  border-bottom-right-radius:var(--r);
  transition:width .75s cubic-bezier(.45,.02,.3,1),
             height .75s cubic-bezier(.45,.02,.3,1);}

.rnum{margin:0;font-size:clamp(34px,4.4vw,54px);font-weight:900;line-height:1;
  letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.rttl{margin:0;font-size:var(--fs-card);font-weight:800;color:var(--ink);
  line-height:1.45;}

@media (hover:hover){
  .rbox:hover .rcover{animation:none;opacity:0;
    clip-path:polygon(0 0, 100% 0, 100% -95%, -70% 100%, 0 100%);}
  .rbox:hover .rcover::after{width:900px;height:1150px;}
  .rbox:hover .rcover::before{width:1000px;height:1300px;}
}
/* no pointer, no reveal: show the text outright */
@media (hover:none){
  .rcover{display:none;}
  .rbox{overflow:visible;}
}
@media (prefers-reduced-motion:reduce){
  .rcover{animation:none;transition:opacity .3s;}
}
@media (max-width:880px){.rboxes{grid-template-columns:1fr;gap:20px;}}