/* KakeruHR redesign: shared styles for the pages that use the new design (top, about, service). Other pages keep styles.css. */
:root{
  /* Layout: the current top page, section for section, redrawn as a line-art handbook. White ground, heavy type, numbered tags, pastel boxes with colored outlines, navy monoline icons and drawings. Single light theme by choice. */
  /* colors follow the current site's styles.css: blue ink, cyan accent, pale blue grounds */
  --ink:#1A4C8C; --deep:#123A72; --brand:#1A4C8C; --paper:#FFFFFF; --mist:#F6FBFF; --line:#B9D3F6; --muted:#4F6B97;
  --accent:#00E5FF; --accent-d:#00B6D6; --yellow:#F6B72D;
  --fox:#F7931E;
  --mint:#5A8FDB; --mint-bg:#F6FBFF;
  --sun:#00B6D6; --sun-bg:#E8F8FC;
  --pink:#1A4C8C; --pink-bg:#D7EDF5;
  --sky:#5A8FDB; --sky-bg:#E8F8FC;
  --f-head:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-en:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  --hdr:72px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-head);font-weight:400;font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,li{word-break:auto-phrase}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:3px solid var(--accent-d);outline-offset:3px;border-radius:8px}
.hero h1,.h2{color:var(--deep)}
.page{overflow-x:clip}
.wrap{max-width:1160px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.sec{position:relative;padding-block:clamp(88px,11vw,144px)}
.sec > .wrap{position:relative;z-index:1}
[data-reveal]{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.armed{opacity:0;transform:translateY(22px)}

/* tag like "01 SERVICE" */
.h2{position:relative;font-family:var(--f-head);font-weight:900;font-size:clamp(30px,4.4vw,52px);line-height:1.3;letter-spacing:-.01em;margin:0}
.shead{position:relative;margin-bottom:clamp(32px,4vw,52px)}
.snum{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 16px/1 var(--f-en);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d)}
.snum::before{content:"";width:28px;height:2px;background:var(--accent)}
.bigword{margin:0 0 .12em;font:800 clamp(78px,13vw,188px)/.86 var(--f-en);letter-spacing:-.005em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px #A9C6EE;white-space:nowrap;user-select:none;pointer-events:none}
.bigword--sm{font-size:clamp(64px,8.4vw,120px)}
/* outline words: a band of light sweeps through the letters every few seconds */
.bigword{width:fit-content;max-width:none;background:linear-gradient(105deg,transparent 0 43%,#B8F7FF 46%,#00E5FF 50%,#B8F7FF 54%,transparent 57% 100%) no-repeat;background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:shine 8s ease-in-out infinite;animation-delay:var(--sd,0s)}
@keyframes shine{0%,80%{background-position:100% 0}100%{background-position:0% 0}}
/* page heroes (About, Service): the outline word fills in and clears again (#133 Text mask) */
.phero .bigword{background-image:linear-gradient(90deg,var(--deep) 0 49%,var(--accent) 49% 50.5%,transparent 50.5% 100%);background-size:200% 100%;background-position:100% 0;animation:fillwipe 8s cubic-bezier(.65,0,.35,1) 1s infinite}
@keyframes fillwipe{0%{background-position:100% 0}12%,58%{background-position:0% 0}70%,100%{background-position:-100% 0}}
.dot{color:var(--accent-d)}
.lead{margin:20px 0 0;color:var(--muted);max-width:34em}

/* buttons, links */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px/1.2 var(--f-head);padding:15px 26px;border-radius:12px;border:2px solid var(--deep);background:var(--fox);color:var(--deep);text-decoration:none;box-shadow:0 4px 0 var(--deep);transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--deep);background:#FFA63D}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--deep)}
/* second-rank button: white with a navy outline, so the orange one stays the main action */
.btn--ghost{background:var(--paper);box-shadow:0 4px 0 var(--line)}
.btn--ghost:hover{background:var(--sky-bg);box-shadow:0 6px 0 var(--line)}
.btn--ghost:active{box-shadow:0 1px 0 var(--line)}
.btn svg,.tlink svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px}
.tlink:hover{border-color:var(--ink)}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.hdr-in{position:relative;display:flex;align-items:center;height:var(--hdr);max-width:1240px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.hdr-logo img{height:40px;width:auto}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{font:700 16px var(--f-en);letter-spacing:.1em;text-decoration:none;padding:8px 14px;border-radius:8px}
.nav a{position:relative}
.nav a.nav-contact:hover{background:var(--mint-bg)}
.nav a:not(.nav-contact)::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:not(.nav-contact):hover::after{transform:scaleX(1)}
.nav a.nav-contact{border:2px solid var(--ink)}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);cursor:pointer;place-items:center}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
@media (max-width:760px){
  .hdr-logo img{height:34px}
  .menu-btn{display:grid}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:8px var(--gut-r) 16px var(--gut-l)}
  .nav.open{display:flex}
  .nav a{padding:12px 8px}
  .nav a.nav-contact{border:0}
}

/* hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(72px,9vw,120px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(28px,5vw,64px);align-items:center}
.pill{display:inline-block;font:700 14px/1.5 var(--f-en);letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--line-s,#5A8FDB);color:var(--ink);background:var(--sky-bg);border-radius:999px;padding:3px 12px;margin:0 0 22px}
.hero h1{font-family:var(--f-head);font-weight:900;font-size:clamp(44px,5.6vw,84px);line-height:1.16;letter-spacing:-.03em;margin:0}
.hero h1 .ln > span{white-space:nowrap}
.uline{position:relative;display:inline-block}
.uline svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.uline path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s 1s ease-out forwards}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.26em;margin-bottom:-.26em}
.hero h1 .ln > span{display:inline-block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.12s + .1s)}
@keyframes rise{from{transform:translateY(110%)}}
.cue{display:flex;width:max-content;align-items:center;gap:12px;margin-top:44px;font:700 11px/1 var(--f-en);letter-spacing:.24em;color:var(--muted);text-decoration:none}
.cue i{position:relative;width:56px;height:2px;background:var(--line);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:var(--mint);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateX(-18px)}100%{transform:translateX(56px)}}
@media (max-width:900px){.cue{display:none}}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lead{color:var(--ink);font-weight:700;font-size:17px;margin-top:28px}
.hero .btn{margin-top:30px}
.hero-art{position:relative}
.hero-art .art{width:100%}
.say{position:absolute;z-index:3;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:8px 14px;font-weight:700;font-size:14px;line-height:1.45;white-space:nowrap;animation:pop .5s 1s cubic-bezier(.3,1.5,.5,1) both}
.say::after{content:"";position:absolute;width:12px;height:12px;background:var(--paper);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.say--br::after{right:22px;bottom:-8px;transform:rotate(45deg)}
.say--bl::after{left:22px;bottom:-8px;transform:rotate(45deg)}
@keyframes pop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:none}}
.doodle{position:absolute;z-index:1;pointer-events:none;animation:wig 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes wig{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.spark{position:absolute;width:44px;height:44px;pointer-events:none}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
@media (max-width:520px){.pill{font-size:11px;letter-spacing:.04em;padding:3px 10px}}

/* service */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(24px,3.6vw,52px)}
.svc{--c:var(--sun);--bg:var(--sun-bg);display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0;border-top:3px solid var(--deep);background:var(--paper)}
.svc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;padding:20px 0 18px;border-bottom:1px solid var(--line)}
.ico{display:grid;place-items:center;width:40px;height:40px;color:var(--ink)}
.ico svg{width:30px;height:30px;fill:var(--accent);stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.svc-no{font:800 48px/.86 var(--f-en);color:var(--accent-d);letter-spacing:-.01em;margin:0}
.svc h3{font-weight:700;font-size:21px;line-height:1.4;margin:0;color:var(--deep)}
.svc h3 small{display:block;margin:3px 0 0;font:600 15px/1.2 var(--f-en);color:var(--muted);letter-spacing:.06em}
.svc-pic{position:relative;padding:22px 0 0;overflow:hidden}
.svc-pic img{width:100%;aspect-ratio:3/2;object-fit:contain;transition:transform .5s}
.svc:hover .svc-pic img{transform:scale(1.05)}
.svc p{margin:0;padding:16px 0 0}
.svc--hr{--c:var(--mint);--bg:var(--mint-bg)}
.svc--ai{--c:var(--pink);--bg:var(--pink-bg)}
.svc-more{margin-top:32px;text-align:center}
@media (max-width:960px){.svc-grid{grid-template-columns:1fr;max-width:540px;margin-inline:auto}}

/* program */
.prog{--pp:clamp(28px,5vw,60px);position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--pp);align-items:center;background:var(--sky-bg);border:2px solid var(--sky);border-radius:28px;padding:var(--pp)}
.soon{display:inline-block;margin-left:8px;font:800 12px/1 var(--f-en);letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:var(--deep);border-radius:999px;padding:6px 12px;vertical-align:middle}
.prog .tag{margin-bottom:18px}
.prog p{margin:18px 0 22px;max-width:28em}
.prog .dts-badge{margin:14px 0 10px}
.dts-badge .soon{margin-left:0}
.dts-name{margin:0;font:800 clamp(46px,5.8vw,84px)/.9 var(--f-en);letter-spacing:-.005em;color:var(--deep)}
.prog .dts-copy{margin:20px 0 0;font-weight:700;font-size:clamp(18px,2vw,24px);line-height:1.6;color:var(--deep)}
.laptop{position:relative}
.screen{border:3px solid var(--ink);border-radius:16px;background:var(--ink);padding:8px}
.screen img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px}
.base{height:14px;margin:0 -4%;border:3px solid var(--ink);border-top:0;border-radius:0 0 14px 14px;background:var(--paper)}
/* DTS cast: 25 round faces in a row of their own under the text and the laptop. site.js turns the list into an endless
   band drifting left to right (.is-loop) that runs out to the card's inner edges; without JS or with reduced motion it
   stays a small still grid. Each copy of the list (1500 px) is wider than the widest card, so the loop never shows a gap. */
.cast{grid-column:1/-1;margin-top:calc(26px - var(--pp))}
.cast ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cast li{flex:none}
.cast li img{display:block;width:40px;height:40px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);object-fit:cover;transition:transform .2s}
.cast li:hover img{transform:translateY(-5px) rotate(-6deg)}
.cast-view{--fade:calc(var(--pp) + 28px);margin-inline:calc(-1 * var(--pp));overflow:hidden;padding-block:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.cast-track{display:flex;width:max-content;animation:castflow 64s linear infinite}
.cast.is-loop ul{flex-wrap:nowrap;gap:8px;padding-right:8px}
.cast.is-loop li img{width:52px;height:52px}
.cast.is-off .cast-track{animation-play-state:paused}
@media (hover:hover){.cast-view:hover .cast-track{animation-play-state:paused}}
@keyframes castflow{from{transform:translateX(-50%)}to{transform:none}}
@media (max-width:900px){.prog{grid-template-columns:minmax(0,1fr)}}

/* approach: heading on white, then a navy card (body width) that plays three acts while it sticks to the screen.
   Base rules = the last picture (act 3). [data-act="1"] / [data-act="2"] (set by site.js while scrolling) override it; .lit = second half of act 2. */
.appr-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,5vw,64px);align-items:end}
.appr-head p:not(.bigword){margin:0 0 .5em;max-width:32em}
.pin{margin-top:clamp(36px,5vw,64px);padding-right:10px}
html.js .pin{height:300vh}
.scene{--p:1;--top:186px;position:relative;isolation:isolate;height:min(100vh - var(--hdr) - 28px,760px);height:min(100svh - var(--hdr) - 28px,760px);min-height:540px;overflow:hidden;border-radius:28px;background:var(--deep);color:var(--paper);box-shadow:10px 10px 0 var(--accent)}
html.js .scene{position:sticky;top:calc(var(--hdr) + 10px)}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.12) 1.4px,transparent 1.6px) 0 0/26px 26px}
/* the sentence: the part being acted out is lit, the rest waits */
.scene-say{position:relative;margin:0;padding:clamp(20px,3vw,38px) clamp(20px,3.4vw,48px) 0;font-weight:900;font-size:clamp(19px,2.3vw,31px);line-height:1.6;letter-spacing:-.01em}
.scene-say .lead{display:block;margin:0 0 .3em;font-weight:700;font-size:.58em;letter-spacing:0;color:#CFE2FF}
.scene-say .lead::before{content:"";display:inline-block;width:26px;height:2px;margin-right:12px;vertical-align:middle;background:var(--accent)}
.scene-say .a{background:linear-gradient(rgba(0,229,255,.5),rgba(0,229,255,.5)) 0 92%/0% .26em no-repeat;transition:opacity .45s,background-size .7s ease .1s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-act="1"] .a:not(:nth-of-type(2)),[data-act="2"] .a:not(:nth-of-type(3)),[data-act="3"] .a:not(:nth-of-type(4)){opacity:.32}
[data-act="1"] .a:nth-of-type(2),[data-act="2"] .a:nth-of-type(3),[data-act="3"] .a:nth-of-type(4){background-size:100% .26em}
.scene-art{position:absolute;left:0;right:0;top:var(--top);bottom:6px}
/* voices. last picture: tiny notes filed above their theme */
.vb{position:absolute;left:var(--qx);top:var(--qy);translate:-50% -50%;rotate:0deg;scale:.36;opacity:.8;width:max-content;max-width:15em;padding:.8em 1.15em;border-radius:1.1em;border:2px solid var(--deep);background:var(--paper);color:var(--deep);font-weight:700;font-size:clamp(14px,1.42vw,18px);line-height:1.7;letter-spacing:.03em;box-shadow:5px 5px 0 rgba(0,0,0,.28);
  transition:left .85s cubic-bezier(.6,-.2,.3,1) var(--d),top .85s cubic-bezier(.6,-.2,.3,1) var(--d),scale .8s ease var(--d),opacity .5s ease var(--d),rotate .8s ease var(--d)}
.vb::after{content:"";position:absolute;left:1.4em;bottom:-.48em;width:.75em;height:.75em;background:inherit;border:solid var(--deep);border-width:0 2px 2px 0;transform:rotate(45deg)}
.vb--c{background:var(--accent)}.vb--y{background:var(--yellow)}
.vb:nth-of-type(even)::after{left:auto;right:1.4em}
[data-act="2"] .vb{left:var(--px);top:var(--py);scale:.6;opacity:1;rotate:calc(var(--r) * .6)}
[data-act="1"] .vb{left:var(--x);top:var(--y);scale:1;opacity:1;rotate:var(--r);animation:bob 4.6s ease-in-out calc(var(--d) * -9) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* one column per theme: the theme label, an arrow, and the support that answers it */
.grp{position:absolute;top:0;bottom:0;left:var(--gx);width:30%;translate:-50% 0}
.tag{position:absolute;left:50%;top:35%;translate:-50% -50%;margin:0;display:flex;align-items:center;gap:.6em;white-space:nowrap;padding:.5em 1em .5em .55em;border-radius:999px;background:var(--yellow);color:var(--deep);font-weight:900;font-size:clamp(13px,1.3vw,17px);line-height:1.3;box-shadow:4px 4px 0 rgba(0,0,0,.3);transition:top .8s cubic-bezier(.5,0,.2,1),scale .5s cubic-bezier(.2,1.8,.4,1) var(--d),opacity .3s ease var(--d)}
.tag span{font:700 .72em/1 var(--f-mono);padding:.45em .7em;border-radius:999px;background:var(--deep);color:var(--paper)}
[data-act="2"] .tag{top:84%}
[data-act="1"] .tag,[data-act="2"]:not(.lit) .tag{top:84%;scale:.4;opacity:0;transition-delay:0s}
.down{position:absolute;left:50%;top:43%;height:11%;width:0;border-left:3px dotted var(--accent);transform-origin:50% 0;transition:scale .45s ease calc(var(--d) + .25s)}
.down::after{content:"";position:absolute;left:-8.5px;bottom:-9px;border-top:11px solid var(--accent);border-inline:7px solid transparent}
.card{position:absolute;left:50%;top:58%;translate:-50% 0;width:min(100%,336px);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:clamp(14px,1.6vw,20px);border-radius:18px;border:2px solid var(--deep);background:var(--paper);color:var(--deep);box-shadow:6px 6px 0 var(--accent);transition:scale .6s cubic-bezier(.2,1.7,.4,1) calc(var(--d) + .45s),opacity .25s ease calc(var(--d) + .45s),rotate .6s cubic-bezier(.2,1.7,.4,1) calc(var(--d) + .45s)}
.card .ico{width:clamp(40px,4.4vw,56px);height:clamp(40px,4.4vw,56px);border-radius:14px;background:var(--sky-bg)}
.card .ico svg{width:clamp(26px,2.9vw,36px);height:clamp(26px,2.9vw,36px)}
.card b{font-weight:900;font-size:clamp(14px,1.45vw,18px);line-height:1.35}
.card small{display:block;margin-top:2px;font:600 13px/1.2 var(--f-en);letter-spacing:.06em;color:var(--muted)}
[data-act="1"] .down,[data-act="2"] .down{scale:1 0;transition-delay:0s}
[data-act="1"] .card,[data-act="2"] .card{scale:.5;rotate:-6deg;opacity:0;transition-delay:0s}
/* how far through we are */
.scene-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.12)}
.scene-bar i{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--accent);box-shadow:0 0 12px rgba(0,229,255,.8)}
html:not(.js) .scene-bar{display:none}
@media (max-width:900px){
  .appr-head{grid-template-columns:1fr;align-items:start}
  .pin{padding-right:6px}
  .scene{--top:158px;border-radius:22px;box-shadow:6px 6px 0 var(--accent);min-height:560px}
  .vb{left:var(--mqx);top:var(--mqy);scale:.28;opacity:0;font-size:13.5px;line-height:1.6;padding:.6em .95em;max-width:14.6em}
  .vb--wide{display:none}
  [data-act="2"] .vb{left:var(--mpx);top:var(--mpy);scale:.5}
  [data-act="1"] .vb{left:var(--mx);top:var(--my)}
  .grp{left:0;width:100%;translate:none;top:var(--gy);bottom:auto;height:33.3%}
  .tag{top:30%;font-size:13px}
  [data-act="2"] .tag,[data-act="1"] .tag,[data-act="2"]:not(.lit) .tag{top:74%}
  .down{display:none}
  .card{top:50%;width:min(86%,320px);padding:10px 14px;border-radius:14px;box-shadow:4px 4px 0 var(--accent)}
  .card .ico{width:38px;height:38px;border-radius:10px}
  .card .ico svg{width:26px;height:26px}
  .card b{font-size:15px}
  .card small{font-size:12px}
}

/* quote */
.quote{position:relative;text-align:center;padding-top:clamp(48px,7vw,80px);border-top:2px dashed var(--line)}
.quote blockquote{margin:0;font-weight:900;font-size:clamp(30px,5vw,62px);line-height:1.45;letter-spacing:-.02em}
.quote .q{color:var(--accent-d)}
.quote-fox{width:clamp(110px,14vw,170px);animation:hop 1.4s ease-in-out infinite}
@keyframes hop{0%,100%{translate:0 0}50%{translate:0 -8px}}
html.js .reveal-txt .ch{color:#C4D6F0;transition:color .25s}
html.js .reveal-txt .ch.on{color:var(--ink)}
html.js .reveal-txt .q.ch.on{color:var(--accent-d)}
.hl{background:linear-gradient(#B8F5FF,#B8F5FF) 0 90%/100% 38% no-repeat}
html.js .hl{background-size:0% 38%;transition:background-size .9s ease}
html.js .quote.done .hl{background-size:100% 38%}

/* footer */
.foot{position:relative;margin-top:clamp(80px,9vw,110px);background:var(--mist);border-top:2px solid var(--ink);padding-block:48px calc(48px + env(safe-area-inset-bottom,0px))}
.foot-grid{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 48px}
.foot-logo img{height:30px;width:auto}
.foot-tag{margin:10px 0 0;font-weight:900}
.foot nav{display:flex;gap:6px 20px;flex-wrap:wrap;font:700 14px var(--f-en);letter-spacing:.1em}
.foot nav a{text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot address{font-style:normal}


/* approach statement: the three verbs get underlined in order */
.statement{margin:clamp(48px,6vw,80px) 0 0;padding-top:clamp(28px,3vw,40px);border-top:2px solid var(--deep);font-weight:700;font-size:clamp(21px,2.7vw,34px);line-height:2.2;color:var(--deep)}
.statement .lead-in{display:block;font-size:.6em;font-weight:500;line-height:1.6;color:var(--muted);margin-bottom:.2em}
.k{position:relative;background:linear-gradient(var(--accent),var(--accent)) 0 94%/100% .2em no-repeat}
html.js .k{background-size:0% .2em;transition:background-size .8s ease}
html.js .k.on{background-size:100% .2em}
.k sup{position:absolute;left:0;top:-.95em;font:800 .5em/1 var(--f-en);letter-spacing:.06em;color:var(--accent-d)}

/* values: five large rows */
.values{background:linear-gradient(to right,rgba(90,143,219,.13) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(rgba(90,143,219,.13) 1px,transparent 1px) 0 0/26px 26px,var(--mist);border-block:2px solid var(--ink)}
.vrows{list-style:none;margin:0;padding:0;border-top:2px solid var(--deep)}
.vrows li{position:relative;display:grid;grid-template-columns:clamp(84px,10vw,150px) minmax(0,11fr) minmax(0,10fr);gap:6px clamp(16px,3vw,44px);align-items:center;padding:clamp(22px,2.6vw,34px) clamp(4px,1vw,16px);border-bottom:1px solid var(--line);transition:background .3s}
.vrows li::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.vrows li:hover{background:rgba(255,255,255,.75)}
.vrows li:hover::after{transform:scaleX(1)}
.vrows .n{font:800 clamp(52px,6.4vw,92px)/.8 var(--f-en);letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px var(--accent-d);transition:color .6s .25s}
.vrows li.go .n,.vrows li:hover .n{color:var(--accent-d)}
/* values use an icon in place of a number: the five are not steps */
.vrows .vico{display:grid;place-items:center;width:clamp(52px,6vw,76px);height:clamp(52px,6vw,76px);color:var(--deep)}
.vrows .vico svg{width:100%;height:100%;fill:var(--accent);stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .3s}
.vrows li:hover .vico svg{transform:rotate(-6deg) scale(1.06)}
.vrows h3{margin:0;font-weight:900;font-size:clamp(20px,2.4vw,30px);line-height:1.4;letter-spacing:-.01em;color:var(--deep);transition:transform .3s}
.vrows li:hover h3{transform:translateX(6px)}
.vrows p{margin:0;color:var(--muted)}
.vmore{margin:28px 0 0;text-align:right}
@media (max-width:760px){
  .vrows li{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 18px}
  .vrows .n{grid-row:span 2;font-size:52px}
  .vrows .vico{grid-row:span 2;width:48px;height:48px}
  .vrows p{font-size:14px}
}

/* contact box */
.finale{position:relative;overflow:hidden;background:var(--sky-bg);border:2px solid var(--deep);border-radius:28px;padding:clamp(36px,5vw,64px)}
.fin-word{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(10px,2vw,24px);margin:0;font-size:clamp(80px,11vw,168px);-webkit-text-stroke-color:#9CC0EE}

/* quote: the fox dashes across and skids to a stop */
.fin-copy{position:relative;z-index:1;max-width:600px}
@media (max-width:860px){.fin-word{display:none}}
.fin-h{margin:0;font-weight:900;font-size:clamp(26px,3.4vw,42px);line-height:1.4;letter-spacing:-.01em;color:var(--deep)}
.fin-copy > p:not(.snum){margin:16px 0 26px;color:var(--muted)}
.finale .btn{animation:ring 2.4s ease-out infinite}
.lane{position:relative;height:clamp(176px,19vw,232px);margin:clamp(16px,3vw,32px) 0 0;cursor:pointer}
.lane::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:2px;background:repeating-linear-gradient(90deg,var(--deep) 0 14px,transparent 14px 26px)}
.lane.run::after{animation:road .25s linear infinite}
@keyframes road{to{background-position:-26px 0}}
.runner2{position:absolute;z-index:2;right:clamp(24px,8vw,120px);bottom:22px;width:clamp(140px,15.5vw,190px);aspect-ratio:440/468}
.runner2 img{position:absolute;left:0;bottom:-5.5%;width:100%;height:auto}
/* K on the lane: two running frames swap while it runs, one braking frame while it skids, then it stands and waves a few times.
   At rest (and with reduced motion) only .fox-s, the standing wave, is shown. */
.fox-r,.fox-r2,.fox-b,.fox-s2{opacity:0}
.lane.run .fox-r{animation:kA .24s steps(1) infinite}
.lane.run .fox-r2{animation:kB .24s steps(1) infinite}
.lane.skid .fox-b{opacity:1}
.lane.run .fox-s,.lane.skid .fox-s{opacity:0}
.lane.done .fox-s{animation:pop2 .45s cubic-bezier(.3,1.6,.5,1),kA .56s steps(1) .5s 4}
.lane.done .fox-s2{animation:kB .56s steps(1) .5s 4}
@keyframes kA{0%{opacity:1}50%,100%{opacity:0}}
@keyframes kB{0%{opacity:0}50%,100%{opacity:1}}
@keyframes pop2{0%{transform:scale(.7,1.15)}60%{transform:scale(1.08,.94)}100%{transform:none}}
.trail{position:absolute;right:88%;top:24%;width:180px;height:62%;opacity:0;transform-origin:right center;pointer-events:none;background:linear-gradient(90deg,transparent,var(--accent)) 0 12%/100% 4px no-repeat,linear-gradient(90deg,transparent,var(--line)) 30% 46%/70% 4px no-repeat,linear-gradient(90deg,transparent,var(--accent-d)) 10% 80%/90% 4px no-repeat}
.lane.run .trail{opacity:1}
.lane.skid .trail{opacity:0;transition:opacity .35s}
.ghost{position:absolute;z-index:1;pointer-events:none}
.puff{position:absolute;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--line);pointer-events:none}
.btn{position:relative;overflow:hidden}

/* motion-prompt extras */
.hdr{transition:transform .35s ease}
.hdr.hide{transform:translateY(calc(-100% - 4px))}
.pbar{position:absolute;left:0;bottom:-2px;height:3px;width:calc(var(--sp,0) * 100%);background:var(--accent);pointer-events:none}
.hero-art .doodle{translate:0 calc(var(--py,0) * -0.18px)}
.laptop{scale:calc(.9 + var(--z,1) * .1);transform-origin:50% 60%}
.prog.go .cast li{animation:popin .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0)*.07s + .35s)}
@keyframes popin{from{transform:scale(0)}}
@keyframes ring{0%{box-shadow:0 4px 0 var(--deep),0 0 0 0 rgba(247,147,30,.5)}70%,100%{box-shadow:0 4px 0 var(--deep),0 0 0 14px rgba(247,147,30,0)}}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:65;width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s;box-shadow:0 3px 0 var(--accent)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-90deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .laptop{scale:1}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .armed{opacity:1;transform:none}
  .uline path{stroke-dashoffset:0}
  .arrow path{stroke-dashoffset:0}
}

/* ===== About page ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* page hero */
.phero{padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,72px)}
.phero-grid{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,11fr);gap:clamp(28px,5vw,64px);align-items:end}
.ph-h{margin:0;font-weight:900;font-size:clamp(30px,3.75vw,54px);line-height:1.25;letter-spacing:-.03em;color:var(--deep)}
.ph-h .ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.ph-h .ln > span{display:inline-block;white-space:nowrap;animation:rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.12s + .1s)}
.phero .lead{color:var(--ink);font-weight:700;font-size:17px;margin-top:24px}
.ph-art{margin:0}
.ph-art img{width:100%}
@media (max-width:900px){.phero-grid{grid-template-columns:1fr}}

/* message */
.msg-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.msg-body p{margin:0 0 1.1em;max-width:30em}
.sign{margin:28px 0 0;display:flex;align-items:baseline;gap:14px;font-weight:700;font-size:20px;color:var(--deep)}
.sign span{font-size:13px;font-weight:500;color:var(--muted)}
.msg-photo{margin:0;border:2px solid var(--deep);border-radius:24px;overflow:hidden;background:var(--paper);box-shadow:8px 8px 0 var(--accent)}
.msg-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.msg-grid{grid-template-columns:1fr}}

/* mission and vision: a deep blue band */
.mvv{background:var(--deep);color:var(--paper);padding-block:clamp(88px,11vw,140px)}
.mvv .snum{color:var(--accent)}
.mvv .snum::before{background:var(--accent)}
.mvv .bigword{-webkit-text-stroke-color:rgba(255,255,255,.26)}
.mvv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.mvv-item{border-top:3px solid var(--accent);padding-top:24px}
.mvv-label{margin:0 0 18px;display:flex;align-items:baseline;gap:12px;font:800 30px/1 var(--f-en);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.mvv-label span{font:500 13px var(--f-head);letter-spacing:.04em;color:rgba(255,255,255,.72);text-transform:none}
.mvv-item h3{margin:0;font-weight:900;font-size:clamp(22px,2.6vw,34px);line-height:1.6;letter-spacing:-.01em}
.mvv .dot{color:var(--accent)}
@media (max-width:860px){.mvv-grid{grid-template-columns:1fr}}

/* values: value, "so", benefit, mock screen */
.values-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.values-pin{position:sticky;top:calc(var(--hdr) + 32px)}
.vindex{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px;border-left:2px solid var(--line)}
.vindex a{display:flex;gap:12px;align-items:baseline;margin-left:-2px;padding:7px 14px;border-left:2px solid transparent;text-decoration:none;color:var(--muted);font-weight:700;transition:color .3s,border-color .3s,background .3s}
.vindex b{font:800 15px var(--f-en);color:#8FB0E3}
.vindex a.on{color:var(--deep);border-left-color:var(--accent);background:rgba(255,255,255,.8)}
.vindex a.on b{color:var(--accent-d)}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,8vw,104px)}
.vitem{display:grid;gap:14px;padding-top:26px;border-top:2px solid var(--deep);scroll-margin-top:calc(var(--hdr) + 24px)}
.vhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:start;margin-bottom:8px}
.vno{margin:0;font:800 clamp(56px,6.4vw,88px)/.78 var(--f-en);letter-spacing:-.01em;color:var(--accent-d)}
.vtitle{margin:0;font-weight:900;font-size:clamp(22px,2.5vw,30px);line-height:1.4;letter-spacing:-.01em;color:var(--deep)}
.vdesc{margin:6px 0 0;color:var(--muted)}
.vlabel{margin:0;display:flex;align-items:center;gap:10px;font:500 13px/1.4 var(--f-mono);color:var(--muted)}
.vlabel::before{content:"";width:22px;height:2px;background:var(--accent)}
.vout{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-weight:700;font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--deep)}
.vout span{flex:none;font:700 12px/1 var(--f-head);color:var(--deep);background:var(--accent);border-radius:999px;padding:6px 12px}
.mock{width:min(100%,520px);border:2px solid var(--deep);border-radius:14px;background:var(--paper);overflow:hidden;text-align:left;box-shadow:6px 6px 0 rgba(26,76,140,.14)}
.mock-bar{display:flex;align-items:center;gap:6px;background:var(--deep);padding:8px 12px}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#FF7A6E}
.mock-bar i:nth-child(2){background:var(--yellow)}
.mock-bar i:nth-child(3){background:#3DDC97}
.mock-bar span{margin-left:8px;font:500 12px var(--f-mono);color:#CFE2FF}
.mock-body{position:relative;padding:16px 18px 14px;font-size:14px;line-height:1.7;min-height:178px}
.cm{font:500 12px/1.5 var(--f-mono);color:var(--muted);margin:0 0 10px}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk li{display:flex;align-items:center;gap:10px;font-weight:700}
.chk li::before{content:"";flex:none;width:18px;height:18px;border:2px solid var(--deep);border-radius:4px;background:var(--paper)}
.chk li.on::before{background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.caret{display:inline-block;width:8px;height:1.1em;margin-left:3px;vertical-align:-3px;background:var(--accent-d);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.mock-note{margin:10px 0 0;font-size:11px;color:var(--muted);text-align:right}
.loop3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.loop3 span{border:2px solid var(--deep);border-radius:8px;background:var(--sky-bg);padding:2px 10px;font-weight:700}
.loop3 i{font-style:normal;font-weight:900;color:var(--accent-d)}
.rows{list-style:none;margin:0;padding:0;border-top:1px dashed var(--line)}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-weight:700}
.rows em{font:700 11px/1.4 var(--f-mono);font-style:normal;background:var(--pink-bg);border-radius:6px;padding:3px 8px;color:var(--deep)}
.rows li:last-child em{background:var(--accent)}
.tl{list-style:none;margin:0;padding:0 0 0 20px;border-left:2px solid var(--line);display:grid;gap:12px}
.tl li{position:relative;font-weight:700}
.tl li::before{content:"";position:absolute;left:-28px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--deep)}
.tl li:last-child::before{background:var(--accent)}
.tl b{display:block;font:700 11px/1.5 var(--f-mono);color:var(--muted)}
.ver{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ver li{border:2px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center;font-weight:700}
.ver b{display:block;font:700 13px var(--f-mono);color:var(--muted)}
.ver li.now{border-color:var(--deep);background:var(--sky-bg)}
.ver li.now b{color:var(--accent-d)}
.grow{margin-top:14px;height:12px;border:2px solid var(--deep);border-radius:999px;background:var(--mist);overflow:hidden}
.grow i{display:block;height:100%;width:40%;background:repeating-linear-gradient(45deg,var(--accent) 0 8px,#8DF2FF 8px 16px);animation:growbar 3.2s ease-in-out infinite alternate}
@keyframes growbar{to{width:100%}}
.simplify{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.mess,.clean{display:grid;gap:6px;align-content:center;min-height:104px;border:2px solid var(--line);border-radius:10px;padding:12px}
.mess i{height:4px;border-radius:2px;background:#C4D6F0;width:var(--w);transform:rotate(var(--r))}
.clean{border-color:var(--deep)}
.clean i{height:7px;border-radius:4px;background:var(--deep)}
.clean i:nth-child(2){width:72%}
.clean i:nth-child(3){width:46%;background:var(--accent-d)}
.simplify .arr{font-weight:900;font-size:20px;color:var(--accent-d)}
@media (max-width:900px){.values-grid{grid-template-columns:1fr}.values-pin{position:static}.vindex{display:none}}

/* company */
.co-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,64px);align-items:start}
.co-table{margin:0;border-top:2px solid var(--deep)}
.co-table div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:16px;padding:18px 4px;border-bottom:1px solid var(--line)}
.co-table dt{font-weight:700;color:var(--deep)}
.co-table dd{margin:0}
.co-label{display:inline-block;font-size:12px;font-weight:700;background:var(--sky-bg);border-radius:6px;padding:1px 8px;margin-right:8px}
.co-art{margin:0}
.co-art img{width:100%}
@media (max-width:900px){.co-grid{grid-template-columns:1fr}.co-table div{grid-template-columns:6em minmax(0,1fr)}}

/* contact box with the fox */
.finale--fox{padding-right:clamp(22px,24vw,320px)}
.fin-fox{position:absolute;right:clamp(16px,4vw,60px);bottom:0;width:clamp(150px,17vw,230px);height:auto}
@media (max-width:760px){.finale--fox{padding-right:clamp(22px,5vw,64px);padding-bottom:178px}.fin-fox{right:calc(50% - 80px);width:160px}}

/* ===== Service page ===== */
/* lineup: four jump links in one row */
.jump-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px solid var(--deep);border-bottom:1px solid var(--line)}
.jump{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:12px;padding:24px 22px 26px;border-left:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .25s}
.jump:first-child{border-left:0}
.jump:hover{background:var(--sky-bg)}
.jump .n{font:800 48px/.84 var(--f-en);letter-spacing:-.01em;color:var(--accent-d)}
.jump .ico{width:44px;height:40px;place-items:center start}
.jump .ico svg{width:38px;height:38px}
.jump h3{margin:0;font-weight:700;font-size:19px;line-height:1.45;color:var(--deep)}
.jump h3 small{display:block;margin-top:3px;font:600 15px/1.2 var(--f-en);letter-spacing:.06em;color:var(--muted)}
.jump p{margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
.jump .go{display:inline-flex;align-items:center;gap:6px;font:700 15px var(--f-head);color:var(--deep)}
.jump .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .25s}
.jump:hover .go svg{transform:rotate(90deg) translateX(3px)}
.jump--soon{background:var(--deep)}
.jump--soon:hover{background:var(--ink)}
.jump--soon .n{color:var(--accent)}
.jump--soon h3,.jump--soon .go{color:var(--paper)}
.jump--soon h3 small{color:var(--accent)}
.jump--soon p{color:rgba(255,255,255,.75)}
@media (max-width:960px){
  .jump-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jump:nth-child(3){border-left:0}
  .jump:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .jump-grid{grid-template-columns:1fr}
  .jump{grid-template-rows:none;grid-row:auto;border-left:0;border-top:1px solid var(--line)}
  .jump:first-child{border-top:0}
}

/* detail sections: words on one side, picture or diagram on the other */
.detail-sec--tint{background:var(--mist);border-block:1px solid var(--line)}
.detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.detail--rev > :first-child{order:2}
.detail .body{margin:0;max-width:30em}
.items{list-style:none;margin:26px 0 0;padding:0;display:grid;max-width:30em;border-top:1px solid var(--line)}
.items li{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;line-height:1.6;color:var(--deep)}
.items li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-d);transform:translateY(-2px)}
.note{margin:20px 0 0;padding-left:14px;border-left:3px solid var(--accent);font-size:15px;color:var(--muted)}
.detail-art{margin:0}
.detail-art img{width:100%}
.mock--wide{width:100%;max-width:none}
@media (max-width:900px){.detail{grid-template-columns:1fr}.detail--rev > :first-child{order:0}}

/* HR system map, built in HTML */
.hrmap{position:relative;margin:0;padding:22px clamp(18px,3vw,32px) 30px;background:var(--paper);border:2px solid var(--deep);border-radius:24px;box-shadow:8px 8px 0 var(--accent)}
.hrmap .cm{margin-bottom:14px}
.hr-top,.hr-base{padding:18px 12px;border-radius:14px;text-align:center;font-weight:900;font-size:clamp(17px,1.9vw,21px);line-height:1.4}
.hr-top{background:var(--deep);color:var(--paper)}
.hr-base{background:var(--accent);color:var(--deep)}
.hr-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:30px}
.hr-links i{justify-self:center;width:2px;height:100%;background:var(--deep);transform-origin:top;transition:transform .5s .2s}
html.js .hrmap.armed .hr-links i{transform:scaleY(0)}
.hr-mid{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hr-mid::before{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--accent-d) 0 8px,transparent 8px 14px)}
.hr-mid div{padding:20px 6px;border:2px solid var(--deep);border-radius:12px;background:var(--sky-bg);text-align:center;font-weight:700;font-size:clamp(15px,1.6vw,18px);color:var(--deep)}

/* AI: four steps inside the mock window */
.steps4{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps4 li{position:relative;display:flex;align-items:center;gap:14px;padding:13px 16px;border:2px solid var(--line);border-radius:10px;font-weight:700;font-size:16px;color:var(--deep);background:var(--paper)}
.steps4 li + li::before{content:"";position:absolute;left:30px;top:-14px;width:2px;height:12px;background:var(--deep)}
.steps4 li:last-child{border-color:var(--deep);background:var(--sky-bg)}
.steps4 b{font:800 24px/1 var(--f-en);color:var(--accent-d)}
.steps4 svg{margin-left:auto;width:22px;height:22px;fill:var(--accent);stroke:var(--deep);stroke-width:1.4;stroke-linejoin:round}

/* consultation: large numbered rows */
.cons-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.deliv-h{margin:8px 0 12px;font:500 13px/1.4 var(--f-mono);color:var(--muted)}
.deliv{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.deliv li{padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px;font-weight:700;color:var(--deep)}
.crows{list-style:none;margin:0;padding:0;border-top:2px solid var(--deep)}
.crows li{position:relative;display:grid;grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr);align-items:center;gap:18px;padding:clamp(18px,2.2vw,28px) 8px;border-bottom:1px solid var(--line);transition:background .3s}
.crows li:hover{background:rgba(255,255,255,.75)}
.crows .n{font:800 clamp(42px,4.8vw,68px)/.8 var(--f-en);color:transparent;-webkit-text-stroke:1.5px var(--accent-d);transition:color .6s .25s}
.crows li.go .n,.crows li:hover .n{color:var(--accent-d)}
.crows p{margin:0;font-weight:700;font-size:clamp(17px,2vw,22px);line-height:1.55;color:var(--deep)}
@media (max-width:900px){.cons-grid{grid-template-columns:1fr}}

/* sandbox picture and note */
.prog-art{margin:0;border:2px solid var(--deep);border-radius:18px;overflow:hidden;background:var(--paper)}
.prog-art img{width:100%}
.soon-note{margin:0!important;font-size:14px;color:var(--muted)}

/* process: a timeline */
.tline{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.tline::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--line)}
.tline li{position:relative;padding-top:40px}
.tline li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--paper);border:3px solid var(--deep);box-sizing:border-box}
.tline li:last-child::before{background:var(--accent)}
.tline .n{margin:0;font:800 34px/1 var(--f-en);color:var(--accent-d)}
.tline h3{margin:8px 0 6px;font-weight:700;font-size:19px;line-height:1.45;color:var(--deep)}
.tline li > p:last-child{margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
@media (max-width:900px){
  .tline{grid-template-columns:1fr;gap:28px}
  .tline::before{left:10px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .tline li{padding:0 0 0 44px}
}

/* ===== DTS screens ===== */
/* the teaser video plays on top; the stills under it show before it loads and when it cannot play (reduced motion, data saver, error).
   The frames carry their own captions (bottom) and round counter (top right), so the zoom stays small and the controls sit top left. */
.shots{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:#FBF6EA}
.prog-art .shots{border-radius:0}
.shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s ease}
.shot.is-on{opacity:1;z-index:2}
.shot.was-on{z-index:1}
.shots .shot img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
html.js .shot.is-on img,html.js .shot.was-on img{animation:kenburns 6.2s linear both}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.03)}}
.shots video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}
.shots.is-video .shot img{animation:none}
.shots.is-video .shots-dots button:not(.shots-pp){display:none}
.shots.is-video .shots-dots .shots-pp{margin-left:0}
.shots-tag{position:absolute;z-index:3;left:10px;top:10px;padding:2px 10px;border-radius:99px;background:rgba(18,58,114,.86);color:#fff;font:700 11px/1.7 var(--f-head);letter-spacing:.05em}
.shots-dots{position:absolute;z-index:3;left:106px;top:12px;display:flex;gap:5px;padding:5px 7px;border-radius:99px;background:rgba(18,58,114,.5)}
.shots-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.7);cursor:pointer;transition:width .3s,background-color .3s}
.shots-dots button[aria-current="true"]{width:20px;background:var(--accent)}
.shots-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* pause / play: two bars while playing, a triangle while paused. ::after widens the tap area */
.shots-dots{align-items:center}
.shots-dots .shots-pp{position:relative;width:8px;height:9px;margin-left:5px;border-radius:0;background:none;border:solid #fff;border-width:0 3px;transition:none}
.shots-dots .shots-pp::after{content:"";position:absolute;inset:-10px -9px}
.shots.is-paused .shots-dots .shots-pp{width:0;height:0;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
.shots.is-paused .shot img{animation-play-state:paused}
@media (max-width:520px){.shots-tag{font-size:10px;left:6px;top:6px}.shots-dots{left:96px;top:7px}}

/* ===== prototype 2026-11: per-service contact buttons ===== */
.detail-cta{margin:28px 0 0}

/* ===== navy band (top: the message section) ===== */
.sec--navy{background:var(--deep);color:var(--paper)}
.sec--navy .quote{border-top:0;padding-top:0}
.sec--navy .quote .q{color:var(--accent)}
html.js .sec--navy .reveal-txt .ch{color:rgba(255,255,255,.3)}
html.js .sec--navy .reveal-txt .ch.on{color:var(--paper)}
html.js .sec--navy .reveal-txt .q.ch.on{color:var(--accent)}
.sec--navy .hl{background-image:linear-gradient(rgba(0,229,255,.42),rgba(0,229,255,.42))}
.sec--navy .lane::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 14px,transparent 14px 26px)}
main:has(> .sec--navy:last-child) + footer{padding-top:clamp(56px,7vw,96px)}

/* ===== values (about): lively mock windows =====
   Only under html.js, which is not set when the visitor asks for reduced motion.
   .in  = the window has popped in (stays)   .play = it is on screen, so its loop runs
   Pop/float use the separate translate/rotate/scale properties, so the pointer tilt can own transform. */
html.js .vitem .vno{opacity:0}
html.js .vitem.go .vno{animation:nopop .8s cubic-bezier(.2,1.6,.4,1) both;transform-origin:0 100%}
@keyframes nopop{0%{opacity:0;scale:.3;rotate:-25deg}100%{opacity:1;scale:1;rotate:0deg}}
html.js .vitem .mock{--fx:-48px;--fr:-9deg;opacity:0;cursor:pointer;transform-origin:50% 100%;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .25s;will-change:transform}
html.js .vitem .mock.from-r{--fx:48px;--fr:9deg}
html.js .vitem .mock.in{opacity:1;animation:mockpop .95s cubic-bezier(.2,1.2,.4,1) both,mockfloat 5.2s ease-in-out .95s infinite}
html.js .vitem:nth-child(even) .mock.in{animation-duration:.95s,6.1s}
html.js .vitem .mock:hover{box-shadow:10px 10px 0 var(--accent)}
@keyframes mockpop{
  0%{opacity:0;translate:var(--fx) 44px;rotate:var(--fr);scale:.6}
  55%{opacity:1;translate:0 -10px;rotate:calc(var(--fr) * -.3);scale:1.06}
  78%{translate:0 3px;rotate:calc(var(--fr) * .12);scale:.98}
  100%{opacity:1;translate:0 0;rotate:0deg;scale:1}
}
@keyframes mockfloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:.5deg}}
/* title bar: the three dots hop one after another */
html.js .mock.play .mock-bar i{animation:dothop 2.4s ease-in-out infinite}
html.js .mock.play .mock-bar i:nth-child(2){animation-delay:.15s}
html.js .mock.play .mock-bar i:nth-child(3){animation-delay:.3s}
@keyframes dothop{0%,30%,100%{translate:0 0;scale:1}12%{translate:0 -4px;scale:1.25}}
/* 01: the boxes get ticked one by one, then start over */
html.js .mock.play .chk li.on::before{animation:ck 6s infinite backwards}
html.js .mock.play .chk li.on:nth-child(1)::before{animation-delay:.5s}
html.js .mock.play .chk li.on:nth-child(2)::before{animation-delay:1.4s}
html.js .mock.play .chk li.on:nth-child(3)::before{animation-delay:2.3s}
@keyframes ck{0%{background-color:var(--paper);scale:1;rotate:0deg}6%{background-color:var(--deep);scale:1.45;rotate:-12deg}13%{scale:1;rotate:0deg}86%{background-color:var(--deep)}94%,100%{background-color:var(--paper)}}
/* 02: try → look back → fix lights up in turn, and so do the status tags */
html.js .mock.play .loop3 span{animation:chip 4.5s ease-in-out infinite}
html.js .mock.play .loop3 span:nth-of-type(2){animation-delay:1.5s}
html.js .mock.play .loop3 span:nth-of-type(3){animation-delay:3s}
@keyframes chip{0%,32%,100%{background-color:var(--sky-bg);scale:1;rotate:0deg}8%,24%{background-color:var(--accent);scale:1.16;rotate:-3deg}}
html.js .mock.play .loop3 i{animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:5px 0}}
html.js .mock.play .rows em{animation:tag 4.5s ease-in-out infinite}
html.js .mock.play .rows li:nth-child(1) em{animation-delay:.3s}
html.js .mock.play .rows li:nth-child(2) em{animation-delay:1.8s}
html.js .mock.play .rows li:nth-child(3) em{animation-delay:3.3s}
@keyframes tag{0%,30%,100%{scale:1;rotate:0deg}8%{scale:1.22;rotate:4deg}16%{scale:1.1;rotate:-3deg}}
/* 03: the timeline fills from the top */
html.js .mock.play .tl li{animation:tlin 6.4s ease-out infinite backwards}
html.js .mock.play .tl li::before{animation:tldot 6.4s ease-out infinite backwards}
html.js .mock.play .tl li:nth-child(1),html.js .mock.play .tl li:nth-child(1)::before{animation-delay:.4s}
html.js .mock.play .tl li:nth-child(2),html.js .mock.play .tl li:nth-child(2)::before{animation-delay:1.5s}
html.js .mock.play .tl li:nth-child(3),html.js .mock.play .tl li:nth-child(3)::before{animation-delay:2.6s}
@keyframes tlin{0%{opacity:.2;translate:-12px 0}9%{opacity:1;translate:3px 0}14%,90%{opacity:1;translate:0 0}100%{opacity:.2;translate:0 0}}
@keyframes tldot{0%{background-color:var(--paper);scale:1}8%{background-color:var(--accent);scale:1.7}15%{scale:1}90%{background-color:var(--accent)}100%{background-color:var(--paper)}}
/* 04: v1 → v2 → v3 hop in turn while the bar grows */
html.js .mock.play .ver li.now{border-color:var(--line);background:none}
html.js .mock.play .ver li{animation:verhop 4.8s ease-in-out infinite}
html.js .mock.play .ver li:nth-child(2){animation-delay:1.6s}
html.js .mock.play .ver li:nth-child(3){animation-delay:3.2s}
@keyframes verhop{0%,34%,100%{border-color:var(--line);background-color:transparent;translate:0 0;rotate:0deg}7%{translate:0 -9px;rotate:-3deg}12%,28%{border-color:var(--deep);background-color:var(--sky-bg);translate:0 -4px;rotate:0deg}}
html.js .mock.play .grow i{animation:growfill 4.8s linear infinite}
@keyframes growfill{0%{width:6%}92%,100%{width:100%}}
/* 05: the tangle keeps wriggling, the tidy lines draw themselves */
html.js .mock.play .mess i{animation:jit .55s ease-in-out infinite alternate}
html.js .mock.play .mess i:nth-child(even){animation-duration:.7s}
html.js .mock.play .mess i:nth-child(3n){animation-duration:.45s}
@keyframes jit{to{transform:rotate(calc(var(--r) * -1.8)) translateX(5px)}}
html.js .mock.play .simplify .arr{display:inline-block;animation:nudge 1s ease-in-out infinite}
html.js .mock.play .clean i{transform-origin:0 50%;animation:draw 3.6s cubic-bezier(.2,1.3,.4,1) infinite backwards}
html.js .mock.play .clean i:nth-child(2){animation-delay:.25s}
html.js .mock.play .clean i:nth-child(3){animation-delay:.5s}
@keyframes draw{0%{transform:scaleX(0)}16%,86%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* the little pieces that fly out when a window lands or is clicked (made in site.js) */
.bit{position:fixed;z-index:60;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:2px;pointer-events:none}
.bit--o{border-radius:50%}
.bit--l{width:14px;height:4px;border-radius:2px}
@media (max-width:900px){html.js .vitem .mock,html.js .vitem .mock.from-r{--fx:0px}}

/* ===== privacy page ===== */
/* one calm reading column (about 46em) shared by the hero and the policy text */
.policy-skip{position:absolute;left:var(--gut-l);top:-80px;z-index:80;padding:10px 16px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-weight:700;text-decoration:none;transition:top .2s}
.policy-skip:focus{top:12px}
.policy-wrap{max-width:calc(46em + 32px)}
.policy-hero{padding-bottom:clamp(28px,4vw,48px)}
.policy-hero .bigword{font-size:clamp(72px,12vw,150px)}
.policy-crumb{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 clamp(20px,3vw,32px);font-size:13px;line-height:1.6;color:var(--muted)}
.policy-crumb a{text-decoration:none;border-bottom:1px solid var(--line)}
.policy-crumb a:hover{color:var(--ink);border-color:var(--accent-d)}
.policy-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:18px 0 10px}
.policy-meta .snum{margin:0}
.policy.sec{padding-top:clamp(8px,2vw,24px)}
.policy-intro{margin:0 0 clamp(40px,5vw,56px);padding:clamp(18px,3vw,26px) clamp(18px,3vw,30px);background:var(--mist);border-left:3px solid var(--accent);border-radius:0 14px 14px 0;font-weight:500;color:var(--deep)}
.policy-art{padding:clamp(26px,3.2vw,38px) 0 clamp(30px,3.6vw,42px);border-top:1px solid var(--line)}
.policy-intro + .policy-art{border-top:2px solid var(--deep)}
.policy-art h2{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:2px 16px;margin:0 0 16px;font-weight:900;font-size:clamp(19px,2.2vw,24px);line-height:1.45;letter-spacing:-.01em;color:var(--deep)}
.policy-no{font:800 clamp(30px,3.2vw,38px)/1 var(--f-en);letter-spacing:.01em;color:var(--accent-d)}
.policy-art p{margin:0 0 1em}
.policy-art > :last-child{margin-bottom:0}
.policy-art ul{list-style:none;margin:0 0 1.2em;padding:0;border-top:1px solid var(--line)}
.policy-art ul li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--line);line-height:1.75}
.policy-art ul li::before{content:"";position:absolute;left:4px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--accent-d)}
.policy-links a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.policy-links a:hover{text-decoration-color:var(--ink)}
.policy-ext{font-weight:400;font-size:.86em;color:var(--muted)}
.policy-co{margin:6px 0 22px}
.policy-cta{margin-top:20px}
.policy-cta .tlink{display:inline;line-height:2}
.policy-back{margin:0;padding-top:clamp(26px,3vw,34px);border-top:2px solid var(--deep)}
@media (max-width:760px){
  .policy-art h2{gap:2px 12px}
  .policy-intro{border-radius:0 10px 10px 0}
}

/* ===== K accents (peek / listen / note) ===== */
.k-acc{display:block;height:auto;pointer-events:none;user-select:none}
/* top page: K peeks over the top border of the contact box (zero-height strip right above .finale) */
.k-acc-peek{position:relative;height:0}
.k-acc-peek.armed{opacity:1;transform:none}
.k-acc-peek-clip{position:absolute;bottom:0;right:11%;width:124px;overflow:hidden;line-height:0}
.k-acc-peek .k-acc{width:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1) .15s}
.k-acc-peek.armed .k-acc{transform:translateY(101%)}
@media (max-width:760px){.k-acc-peek-clip{width:80px;right:10%}}
/* service: K listening, under the deliverables in the consultation column */
.k-acc-listen{width:clamp(110px,11vw,140px);margin-top:clamp(28px,3vw,40px)}
@media (max-width:900px){.k-acc-listen{display:none}}
/* service: K taking notes, standing on the process timeline line at the right end of the heading */
.k-acc-note{position:absolute;right:0;bottom:calc(-1*clamp(32px,4vw,52px) - 10px);width:clamp(110px,11vw,138px);translate:0 5.5%}
@media (max-width:900px){.k-acc-note{display:none}}
@media (prefers-reduced-motion:reduce){.k-acc-peek .k-acc{transition:none;transform:none}}

/* ===== Contact page (contact/) =====
   Same reading column as the privacy policy. Fields: a 2px light border that turns navy with a cyan ring on focus.
   Errors use --err (red, 5.6:1 on white). The thank-you card (#sent) replaces the form once site.js sets .is-sent. */
.cform-sec{--err:#C62828}
.cform-lead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(10px,2vw,24px);margin:0 0 clamp(36px,4.5vw,52px)}
.cform-lead .policy-intro{margin:0}
.cform-k{width:clamp(78px,10vw,124px);height:auto;margin-bottom:-4px}
.cf-row{margin:0 0 26px;padding:0;border:0;min-width:0}
.cf-label{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:0;font-weight:700;font-size:15px;line-height:1.5;color:var(--deep)}
.cf-req,.cf-opt{font:700 11px/1 var(--f-head);letter-spacing:.04em;padding:4px 8px;border-radius:999px}
.cf-req{background:var(--deep);color:var(--paper)}
.cf-opt{background:var(--paper);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.cf-input{display:block;width:100%;margin:0;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:500 16px/1.6 var(--f-head);transition:border-color .2s,box-shadow .2s}
.cf-input:hover{border-color:var(--sky)}
.cf-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,229,255,.32)}
.cf-input--short{max-width:18em}
.cf-text{min-height:210px;resize:vertical}
.cf-input[aria-invalid="true"]{border-color:var(--err);background:#FFF8F8}
.cf-err{margin:6px 0 0;font-size:14px;font-weight:700;line-height:1.6;color:var(--err)}
.cf-err:empty{display:none}
.cf-under{display:flex;align-items:flex-start;gap:12px}
.cf-count{margin:6px 0 0 auto;font:500 13px/1.6 var(--f-mono);color:var(--muted);white-space:nowrap}
.cf-count.is-over{color:var(--err)}
/* topic: radio buttons drawn as pills; the real input stays in place (invisible) so keyboard and screen readers work */
.cf-chips{display:flex;flex-wrap:wrap;gap:10px}
.cf-chip{position:relative;cursor:pointer}
.cf-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.cf-chip span{display:inline-block;padding:9px 18px;border:2px solid var(--line);border-radius:999px;background:var(--paper);font-weight:700;font-size:15px;line-height:1.4;color:var(--ink);transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.cf-chip:hover span{border-color:var(--sky)}
.cf-chip input:checked + span{background:var(--deep);border-color:var(--deep);color:var(--paper);box-shadow:0 3px 0 var(--accent)}
.cf-chip input:focus-visible + span{outline:3px solid var(--accent-d);outline-offset:3px}
.cf-topics.is-invalid .cf-chip span{border-color:var(--err)}
.cf-consent{padding-top:24px;border-top:1px solid var(--line)}
.cf-check{display:inline-flex;align-items:flex-start;gap:12px;font-weight:500;line-height:1.7;cursor:pointer}
.cf-check input{flex:none;appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:22px;height:22px;margin:3px 0 0;border:2px solid var(--ink);border-radius:6px;background:var(--paper);cursor:pointer}
.cf-check input:checked{background:var(--deep);border-color:var(--deep)}
.cf-check input:checked::after{content:"";width:6px;height:11px;border:solid var(--paper);border-width:0 3px 3px 0;transform:translateY(-1px) rotate(45deg)}
.cf-check input[aria-invalid="true"]{border-color:var(--err)}
.cf-check a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.cf-check a:hover{text-decoration-color:var(--ink)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-send{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:clamp(22px,3vw,30px);border-top:2px solid var(--deep)}
.cf-small{margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
.cf-fail{margin:0;padding:12px 16px;border:2px solid var(--err);border-radius:12px;background:#FFF5F5;color:var(--err);font-weight:700;font-size:15px;line-height:1.7}
.cf-submit{min-width:12em;justify-content:center;cursor:pointer}
.cf-submit[disabled]{opacity:.65;cursor:progress;transform:none}
.cform-done{display:none;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(18px,3.5vw,40px);padding:clamp(24px,4vw,44px);border:2px solid var(--deep);border-radius:24px;background:var(--sky-bg);box-shadow:8px 8px 0 var(--accent)}
.is-sent .cform-done{display:grid}
.is-sent .cform{display:none}
.cform-done:focus{outline:none}
.cform-done-k{width:clamp(110px,14vw,170px);height:auto}
.cform-done-h{margin:0 0 14px;font-weight:900;font-size:clamp(24px,3vw,34px);line-height:1.3;letter-spacing:-.01em;color:var(--deep)}
.cform-done p{margin:0 0 10px}
.cform-done .cform-done-back{margin:22px 0 0}
@media (max-width:560px){
  .cform-done{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--accent)}
  .cform-done-k{width:110px}
  .cf-chip span{padding:8px 15px;font-size:14px}
}

/* ===== Motion: About's K in the contact box, and the three Service diagrams =====
   site.js ("run"): [data-run] gets .in the first time it is on screen (the entrance plays once) and .run while it is
   on screen (the loops play only then). Everything here is under html.js, which is not set with reduced motion, so
   those visitors see the finished pictures standing still.
   Service is meant to feel unlike About's popping, floating windows: things are built, stuck on, and run through. */

/* About: K pops up from below the contact box's bottom edge, hops twice, then hops again every few seconds */
html.js .finale[data-run] .fin-fox{translate:0 110%}
html.js .finale.in .fin-fox{translate:0 0;transition:translate .65s cubic-bezier(.2,1.5,.4,1) .15s}
html.js .finale.run .fin-fox{transform-origin:50% 100%;animation:khop 4.6s ease-in-out .9s infinite}
@keyframes khop{
  0%,34%,100%{transform:none}
  4%{transform:scale(1.07,.9)}
  11%{transform:translateY(-18%) scale(.95,1.06)}
  17%{transform:scale(1.06,.92)}
  22%{transform:translateY(-10%) scale(.97,1.04)}
  28%{transform:scale(1.03,.96)}
}

/* Service / training: the picture is uncovered from the left like a board, then three sticky notes are stuck along
   its top edge one by one (対話 → 実践 → 行動) and stir now and then */
.train-art{position:relative}
.tnote{position:absolute;top:-5%;z-index:1;display:grid;place-items:center;width:clamp(56px,6vw,76px);aspect-ratio:1;font-weight:900;font-size:clamp(13px,1.25vw,16px);line-height:1;color:var(--deep);box-shadow:3px 4px 0 rgba(18,58,114,.16);transform-origin:50% 0}
.tnote::before{content:"";position:absolute;top:-6px;left:50%;width:24px;height:11px;margin-left:-12px;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px var(--line);rotate:-4deg}
.tnote--a{right:27%;background:#FFE58A;rotate:-6deg}
.tnote--b{right:14%;background:#BDF4FF;rotate:4deg}
.tnote--c{right:1%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--deep),3px 4px 0 rgba(18,58,114,.16);rotate:-2deg}
@media (max-width:560px){.tnote{width:46px;font-size:12px}.tnote::before{width:18px;height:9px;margin-left:-9px;top:-5px}.tnote--a{right:31%}.tnote--b{right:16%}}
html.js .train-art[data-run] img{clip-path:inset(0 100% 0 0)}
html.js .train-art.in img{animation:uncover 1.1s cubic-bezier(.6,0,.2,1) .1s both}
@keyframes uncover{to{clip-path:inset(0 0 0 0)}}
html.js .train-art[data-run] .tnote{opacity:0}
html.js .train-art.in .tnote{animation:stick .6s cubic-bezier(.2,1.4,.4,1) both}
html.js .train-art.in .tnote--a{animation-delay:1s}
html.js .train-art.in .tnote--b{animation-delay:1.3s}
html.js .train-art.in .tnote--c{animation-delay:1.6s}
html.js .train-art.in.run .tnote{animation:stick .6s cubic-bezier(.2,1.4,.4,1) both,stir 5s ease-in-out infinite}
html.js .train-art.in.run .tnote--a{animation-delay:1s,2.6s}
html.js .train-art.in.run .tnote--b{animation-delay:1.3s,3.4s}
html.js .train-art.in.run .tnote--c{animation-delay:1.6s,4.2s}
@keyframes stick{0%{opacity:0;translate:0 -36px;scale:1.3}60%{opacity:1;translate:0 3px;scale:.95}100%{opacity:1;translate:0 0;scale:1}}
@keyframes stir{0%,24%,100%{transform:none}6%{transform:rotate(5deg)}12%{transform:rotate(-3deg)}18%{transform:rotate(1.5deg)}}

/* Service / HR system: the map builds itself (policy drops in, lines draw down, the three systems rise one by one,
   the base fills like a bar), then a signal keeps running from the policy through the systems to the base */
html.js .hrmap[data-run] .hr-top,html.js .hrmap[data-run] .hr-mid div{opacity:0}
html.js .hrmap[data-run] .hr-links i{position:relative;transform:scaleY(0);transition:none}
html.js .hrmap[data-run] .hr-base{background:linear-gradient(var(--accent),var(--accent)) 0 0/0% 100% no-repeat var(--sky-bg)}
html.js .hrmap.in .hr-top{animation:hrdrop .6s cubic-bezier(.2,.9,.3,1) .15s both}
html.js .hrmap.in .hr-links--a i{animation:hrline .4s ease-out .6s both}
html.js .hrmap.in .hr-links--b i{animation:hrline .4s ease-out 1.55s both}
html.js .hrmap.in .hr-mid div{animation:hrrise .55s cubic-bezier(.2,1.3,.4,1) both}
html.js .hrmap.in .hr-mid div:nth-child(1){animation-delay:.9s}
html.js .hrmap.in .hr-mid div:nth-child(2){animation-delay:1.05s}
html.js .hrmap.in .hr-mid div:nth-child(3){animation-delay:1.2s}
html.js .hrmap.in .hr-base{animation:hrfill .9s cubic-bezier(.6,0,.3,1) 1.9s both}
@keyframes hrdrop{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
@keyframes hrline{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hrrise{from{opacity:0;translate:0 16px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes hrfill{to{background-size:100% 100%}}
/* the signal: a dot runs down each line; the systems, then the base, light up as it arrives (cycle 2.8s) */
html.js .hrmap.run .hr-links i::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--paper);opacity:0;animation:hrsig 2.8s ease-in 2.8s infinite}
html.js .hrmap.run .hr-links--b i::after{animation-delay:3.5s}
@keyframes hrsig{0%{top:-4px;opacity:0}8%{opacity:1}30%{top:calc(100% - 5px);opacity:1}40%,100%{top:calc(100% - 5px);opacity:0}}
html.js .hrmap.in.run .hr-mid div{animation:hrrise .55s cubic-bezier(.2,1.3,.4,1) both,hrglow 2.8s ease-out 3.64s infinite}
html.js .hrmap.in.run .hr-mid div:nth-child(1){animation-delay:.9s,3.64s}
html.js .hrmap.in.run .hr-mid div:nth-child(2){animation-delay:1.05s,3.64s}
html.js .hrmap.in.run .hr-mid div:nth-child(3){animation-delay:1.2s,3.64s}
html.js .hrmap.in.run .hr-base{animation:hrfill .9s cubic-bezier(.6,0,.3,1) 1.9s both,hrglow 2.8s ease-out 4.34s infinite}
@keyframes hrglow{0%{box-shadow:0 0 0 0 rgba(0,229,255,0)}8%{box-shadow:0 0 0 6px rgba(0,229,255,.45)}35%,100%{box-shadow:0 0 0 0 rgba(0,229,255,0)}}
html.js .hrmap.run .hr-mid::before{animation:march .9s linear infinite}
@keyframes march{to{background-position:14px 0}}

/* Service / AI: the comment line types itself, then the four steps run one after another like a pipeline
   (site.js "steps" adds .on to each in turn, holds, clears, starts over): each fills in, its number jumps,
   a tick appears, the line to the next step turns cyan; step 04's spark spins */
html.js .ai-mock[data-run] .cm{clip-path:inset(0 100% 0 0)}
html.js .ai-mock.in .cm{animation:typein 1.2s steps(22,end) .25s both}
@keyframes typein{to{clip-path:inset(0 0 0 0)}}
html.js .steps4[data-steps] li{background:linear-gradient(90deg,var(--sky-bg),var(--sky-bg)) 0 0/0% 100% no-repeat var(--paper);transition:background-size .7s cubic-bezier(.4,0,.2,1),border-color .3s}
html.js .steps4[data-steps] li:last-child{border-color:var(--line)}
html.js .steps4[data-steps] li.on{background-size:100% 100%;border-color:var(--deep)}
html.js .steps4[data-steps] b{display:inline-block}
html.js .steps4[data-steps] li.on b{animation:numpop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes numpop{40%{scale:1.35;rotate:-6deg}}
html.js .steps4[data-steps] li::after{content:"";flex:none;margin:0 4px 4px auto;width:7px;height:13px;border:solid var(--accent-d);border-width:0 3px 3px 0;rotate:45deg;scale:0;transition:scale .35s cubic-bezier(.2,1.6,.4,1) .4s}
html.js .steps4[data-steps] li.on::after{scale:1}
html.js .steps4[data-steps] li:last-child::after{display:none}
html.js .steps4[data-steps] li.on svg{animation:spark 1.1s cubic-bezier(.3,1.3,.5,1) .35s}
@keyframes spark{50%{rotate:180deg;scale:1.45}100%{rotate:360deg;scale:1}}
html.js .steps4[data-steps] li + li::before{background:var(--line);transition:background-color .3s .5s}
html.js .steps4[data-steps] li.on + li::before{background:var(--accent-d)}