:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: left-aligned editorial column; hero = statement + one "operations board" object; two-track rows for services; everything else quiet. */
:root{
  --paper:#F3F5F2;      /* morning paper, faint sage */
  --surface:#FFFFFF;
  --ink:#1C2A2E;        /* deep slate */
  --muted:#56676A;
  --line:#D3DBD7;
  --accent:#C9821F;     /* dawn amber: marks only, never body text */
  --accent-ink:#8A5610; /* amber dark enough for small text on paper */
  --ok:#2F6F4E;
  --ok-bg:#E3EFE7;
  --wait:#8A5610;
  --wait-bg:#F6EAD6;
  --glow:rgba(233,166,72,.38);
  --glow-2:rgba(201,130,31,.10);
  --head-bg:rgba(243,245,242,.86);
  --btn-fg:#F3F5F2;
  --shadow:0 1px 2px rgba(28,42,46,.06), 0 12px 32px -12px rgba(28,42,46,.18);

  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  --f-mark:"Jost","Futura","Avenir Next","Segoe UI",sans-serif;

  --s-1:.8125rem; --s0:1rem; --s1:1.1875rem; --s2:1.5rem; --s3:2rem; --s4:clamp(2.2rem,5.6vw,3.75rem);
  --head-h:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121A1C; --surface:#182326; --ink:#E6ECE9; --muted:#9AABAD; --line:#29373A;
    --accent:#EDB25A; --accent-ink:#EDB25A; --ok:#86CFA3; --ok-bg:#1D3328; --wait:#EDB25A; --wait-bg:#3A2E18;
    --glow:rgba(237,178,90,.18); --glow-2:rgba(237,178,90,.06); --head-bg:rgba(18,26,28,.86); --btn-fg:#121A1C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 36px -14px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121A1C; --surface:#182326; --ink:#E6ECE9; --muted:#9AABAD; --line:#29373A;
  --accent:#EDB25A; --accent-ink:#EDB25A; --ok:#86CFA3; --ok-bg:#1D3328; --wait:#EDB25A; --wait-bg:#3A2E18;
  --glow:rgba(237,178,90,.18); --glow-2:rgba(237,178,90,.06); --head-bg:rgba(18,26,28,.86); --btn-fg:#121A1C;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 36px -14px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--head-h) + 16px)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--s0); line-height:1.9; letter-spacing:.04em; line-break:strict;
  -webkit-font-smoothing:antialiased; text-size-adjust:100%;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--paper)}
h1,h2,h3{word-break:auto-phrase; font-feature-settings:"palt" 1; text-wrap:balance}
.wrap{
  max-width:1120px; margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:16px; top:calc(env(safe-area-inset-top,0px) + 8px); z-index:50; background:var(--ink); color:var(--btn-fg); padding:8px 14px; border-radius:2px}

/* ---------- header ---------- */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--head-bg); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent; transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:20px; min-height:var(--head-h)}
.mark{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-mark); font-weight:500; letter-spacing:.3em; font-size:1.02rem; margin-right:auto; white-space:nowrap}
.mark svg{width:22px; height:22px; flex:none}
.nav{display:flex; gap:24px; font-size:.875rem; font-feature-settings:"palt" 1}
.nav a{text-decoration:none; color:var(--muted); padding-block:6px; border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.lang{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px; gap:2px}
.lang button{font:500 .75rem/1 var(--f-mark); letter-spacing:.08em; border:0; background:transparent; color:var(--muted); min-height:34px; min-width:38px; padding:0 9px; border-radius:999px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--btn-fg)}
.head-cta{display:inline-flex; align-items:center; text-decoration:none; background:var(--ink); color:var(--btn-fg); padding:9px 16px; border-radius:2px; font-size:.875rem; font-weight:700; white-space:nowrap}
.menu-btn{display:none; width:42px; height:42px; border:1px solid var(--line); background:transparent; border-radius:2px; color:var(--ink); cursor:pointer; align-items:center; justify-content:center}
.menu-btn svg{width:18px; height:18px}
.mnav{display:none}

/* ---------- hero ---------- */
.hero{position:relative; overflow:clip; border-bottom:1px solid var(--line)}
.hero-stage{position:relative}
.hero-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 44% 72% at 84% 14%, var(--glow), transparent 70%),
    radial-gradient(ellipse 80% 40% at 58% 0%, var(--glow-2), transparent 75%);
  animation:dawn 2.4s ease-out both;
}
@keyframes dawn{from{opacity:.45; transform:translateY(24px)} to{opacity:1; transform:none}}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; padding-block:clamp(48px,8vw,104px) clamp(48px,7vw,88px)}
.hero h1{font-family:var(--f-display); font-weight:700; font-size:var(--s4); line-height:1.38; letter-spacing:.04em; margin:0 0 26px}
.hero h1 span{display:block}
html[lang="pt"] .hero h1, html[lang="en"] .hero h1{font-size:clamp(2rem,4.4vw,3.1rem); letter-spacing:0; line-height:1.2}
.lead{max-width:34em; margin:0 0 32px; color:var(--muted); font-size:1.0625rem; line-height:2}
.actions{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; margin-bottom:28px}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; background:var(--ink); color:var(--btn-fg); padding:14px 24px; border-radius:2px; font-weight:700; font-size:.95rem; border:0; cursor:pointer; font-family:inherit}
.btn:hover{background:color-mix(in oklab, var(--ink) 86%, var(--accent))}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.textlink{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:6px; text-decoration-thickness:1.5px; font-size:.95rem}
.checks{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.875rem}
.checks li{display:flex; align-items:center; gap:8px}
.checks svg{width:16px; height:16px; flex:none; color:var(--accent)}
.verify{margin:22px 0 0; font-size:var(--s-1); color:var(--muted)}
.verify a{color:var(--ink)}
.verify .num{font-family:var(--f-mark); letter-spacing:.06em; font-variant-numeric:tabular-nums}

/* operations board (the one "object" on the page) */
.board{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:20px 20px 16px; min-width:0}
.board-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.board-title{font-weight:700; font-size:.95rem}
.tag{font-size:.7rem; border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:2px 9px}
.board ol{list-style:none; margin:0; padding:0; display:grid}
.board li{display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line); font-size:.9rem}
.board li:first-child{border-top:0}
.board .dot{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:500 .7rem/1 var(--f-mark); background:var(--paper); color:var(--muted)}
.pill{font-size:.72rem; padding:3px 10px; border-radius:999px; white-space:nowrap; font-weight:700}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.wait{background:var(--wait-bg); color:var(--wait)}
.pill.lng{background:var(--paper); color:var(--muted)}
.board-note{margin:10px 0 0; font-size:.72rem; color:var(--muted)}

/* ---------- sections ---------- */
section.block .wrap{padding-block:clamp(56px,8vw,96px)}
section.block + section.block .wrap{border-top:1px solid var(--line)}
.sec-head{display:grid; gap:10px; margin:0 0 36px; max-width:40em}
.sec-head h2{font-family:var(--f-display); font-weight:700; font-size:var(--s3); letter-spacing:.06em; margin:0; line-height:1.35}
.sec-head p{margin:0; color:var(--muted); word-break:auto-phrase; text-wrap:pretty}

/* services */
.svc{list-style:none; margin:0; padding:0; display:grid}
.svc > li{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:20px 56px; padding-block:36px; border-top:1px solid var(--line)}
.svc > li:last-child{border-bottom:1px solid var(--line)}
.svc h3{margin:0 0 14px; font-size:var(--s2); font-weight:700; line-height:1.45; letter-spacing:.02em}
.when{margin:0; font-size:.9rem; color:var(--muted); max-width:22em}
.when b{display:block; color:var(--accent-ink); font-weight:700; font-size:var(--s-1); margin-bottom:2px}
.svc .body{min-width:0}
.svc .body > p{margin:0 0 16px; max-width:36em}
.eg-label{font-size:var(--s-1); color:var(--ink); font-weight:700; margin:0 0 6px; display:flex; align-items:center; gap:8px}
.eg-label::before{content:""; width:14px; height:1.5px; background:var(--accent)}
.eg{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:.94rem; color:var(--muted)}
.eg li{padding-left:1.1em; position:relative}
.eg li::before{content:""; position:absolute; left:0; top:.85em; width:5px; height:5px; border-radius:50%; background:var(--line)}
.cycle{display:flex; flex-wrap:wrap; gap:6px 0; margin:14px 0 0; padding:0; list-style:none; font-size:var(--s-1)}
.cycle li{display:flex; align-items:center}
.cycle li + li::before{content:""; width:22px; height:1px; background:var(--muted); margin-inline:8px; opacity:.6}
.cycle b{font-weight:400; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.ask{margin-top:20px; display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:.9rem; font-weight:700; background:transparent; border:1px solid var(--line); color:var(--ink); padding:9px 16px; border-radius:2px; cursor:pointer}
.ask:hover{border-color:var(--ink)}
.ask svg{width:14px; height:14px}

/* steps (a real sequence, so numbered) */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; counter-reset:step}
.steps li{counter-increment:step; min-width:0; padding-top:18px; border-top:1.5px solid var(--ink)}
.steps li::before{content:counter(step); display:block; font-family:var(--f-mark); font-size:1.6rem; line-height:1; margin-bottom:14px; color:var(--accent)}
.steps h3{margin:0 0 6px; font-size:var(--s1); font-weight:700}
.steps p{margin:0; color:var(--muted); font-size:.94rem}

/* faq */
.faq{display:grid; border-top:1px solid var(--line); max-width:52em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 2px; font-weight:700; font-feature-settings:"palt" 1}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:12px; height:12px; flex:none; background:
  linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,
  linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px; color:var(--muted); max-width:40em}

/* representative */
.rep{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:16px 56px; padding-block:4px 36px; max-width:72em}
.rep-name{margin:0; font-family:var(--f-display); font-weight:700; font-size:var(--s2); letter-spacing:.08em; line-height:1.4}
.rep-name small{display:block; font-family:var(--f-body); font-size:var(--s-1); letter-spacing:.04em; color:var(--muted); font-weight:400}
.rep p{margin:0; max-width:36em}

/* company */
.profile{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:3px; max-width:52em}
.profile > div{display:grid; grid-template-columns:9.5em minmax(0,1fr); gap:6px 24px; padding:17px 24px; border-top:1px solid var(--line)}
.profile > div:first-child{border-top:0}
.profile dt{color:var(--muted); font-size:.92rem}
.profile dd{margin:0; min-width:0; overflow-wrap:anywhere}
.profile dd ul{margin:0; padding-left:1.1em}
.profile .num{font-family:var(--f-mark); letter-spacing:.05em; font-variant-numeric:tabular-nums}
.profile .sub{display:block; font-size:var(--s-1); color:var(--muted)}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:32px 48px; align-items:start}
.form{display:grid; gap:20px; min-width:0}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend, .field label{font-weight:700; font-size:.9rem; margin-bottom:8px; padding:0; display:block}
.opt{font-weight:400; color:var(--muted); font-size:var(--s-1); margin-left:6px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip span{display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:.88rem; cursor:pointer; background:var(--surface); user-select:none}
.chip input:checked + span{border-color:var(--ink); background:var(--ink); color:var(--btn-fg)}
.chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.field{display:grid; min-width:0}
.field input, .field textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:11px 13px; width:100%}
.field textarea{min-height:140px; resize:vertical; line-height:1.8}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.field input[aria-invalid="true"]{border-color:#B4432F}
.err{color:#B4432F; font-size:var(--s-1); margin:6px 0 0}
.letter{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); min-width:0; position:sticky; top:calc(var(--head-h) + 24px)}
.letter-head{display:grid; gap:2px; padding:16px 20px; border-bottom:1px solid var(--line); font-size:var(--s-1); color:var(--muted)}
.letter-head b{color:var(--ink); font-weight:700}
.mail-addr{font-family:var(--f-mark); letter-spacing:.02em; user-select:all; overflow-wrap:anywhere}
.letter pre{margin:0; padding:18px 20px; font-family:var(--f-body); font-size:.9rem; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; max-height:340px; overflow:auto}
.letter-actions{display:flex; flex-wrap:wrap; gap:10px; padding:16px 20px; border-top:1px solid var(--line)}
.letter-actions .btn{padding:11px 18px; font-size:.9rem}
.status{margin:0; padding:0 20px 16px; font-size:var(--s-1); color:var(--muted); min-height:1.5em}
.note{color:var(--muted); font-size:var(--s-1); margin:14px 0 0}

/* footer */
.site-foot .wrap{padding-block:40px 56px; border-top:1px solid var(--line); display:grid; gap:18px; font-size:var(--s-1); color:var(--muted)}
.foot-row{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:baseline; justify-content:space-between}
.site-foot details{max-width:46em}
.legal-links{display:flex; flex-wrap:wrap; gap:6px 22px}
.legal-links a{color:var(--ink); text-underline-offset:3px}
.site-foot summary{cursor:pointer; color:var(--ink)}
.site-foot details p{margin:10px 0 0}
.policy{margin:10px 0 0; padding-left:1.2em; display:grid; gap:4px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav, .site-head .head-cta{display:none}
  .menu-btn{display:inline-flex}
  .mnav{display:block; border-top:1px solid var(--line); background:var(--paper)}
  .mnav[hidden]{display:none!important}
  .mnav .wrap{display:grid; gap:2px; padding-block:10px 18px}
  .mnav a{text-decoration:none; padding:12px 2px; border-bottom:1px solid var(--line); font-size:1rem}
  .mnav .btn{margin-top:14px; justify-content:center}
  .hero .wrap{grid-template-columns:minmax(0,1fr); gap:40px}
  .svc > li, .contact-grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .letter{position:static}
}
@media (max-width:560px){
  .profile > div{grid-template-columns:minmax(0,1fr); gap:2px; padding:14px 18px}
  .cycle{flex-direction:column; align-items:flex-start; gap:4px}
  .cycle li{flex-direction:column; align-items:flex-start}
  .cycle li + li::before{width:1px; height:10px; margin:0 0 4px 18px; display:block}
  .steps{grid-template-columns:minmax(0,1fr)}
  .site-head .wrap{gap:10px}
  .mark{letter-spacing:.22em}
}
@media (prefers-reduced-motion: reduce){
  .hero-stage::before{animation:none}
  .faq summary::after{transition:none}
}

/* ================= motion layer (v3) =================
   Everything below only switches on when the script adds .motion to <html>
   (with prefers-reduced-motion it also adds .calm: same light and fades, nothing travels or loops). Without JS the page is still. */
.progress{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; height:2px; z-index:40; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; display:none}
.motion .progress{display:block; transform:scaleX(var(--sp,0))}
#slips{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:none; z-index:0}
.hero .wrap{z-index:1}
.story #slips{display:block}
.story-cap, .scroll-hint{display:none}

/* story: board is revealed by the scroll progress (--reveal 0..1) */
.story .board{opacity:var(--reveal,1); transform:translate3d(0, calc((1 - var(--reveal,1)) * 14px), 0); will-change:transform, opacity}
.story .story-cap{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:var(--s-1); color:var(--muted); min-height:1.6em}
.cap-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--glow); animation:pulse 2.4s ease-out 3}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent}}

/* pinned version on large screens: the stage sticks while the slips line up */
.story.story-pin .hero-track{height:235vh}
.story.story-pin .hero-stage{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--head-h)); height:calc(100svh - var(--head-h) - env(safe-area-inset-top,0px)); display:flex; align-items:center}
.story.story-pin .hero .wrap{width:100%; padding-block:24px}
.story.story-pin .scroll-hint{display:flex; position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); flex-direction:column; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.2em; color:var(--muted); opacity:var(--hint,1); transition:opacity .3s}
.scroll-hint i{display:block; width:1px; height:34px; background:linear-gradient(var(--muted), transparent); transform-origin:top; animation:drip 1.8s ease-in-out 3 both}
@keyframes drip{0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0}}

/* headline: characters rise once on load and on language change */
.motion #hero-title .ch{display:inline-block; animation:rise 1.3s cubic-bezier(.2,.75,.15,1) both; animation-delay:calc(var(--i) * 42ms + 200ms)}
.motion #hero-title .sp{display:inline-block; width:.3em}
@keyframes rise{from{opacity:.12; transform:translateY(.45em) rotate(4deg)} to{opacity:1; transform:none}}


/* service rows: a soft light sweeps across on hover */
@media (hover:hover){
  .motion .svc > li{position:relative}
  .motion .svc > li::before{content:""; position:absolute; inset:0 -16px; pointer-events:none; opacity:0; transition:opacity .3s;
    background:linear-gradient(100deg, transparent 20%, var(--glow-2) 45%, var(--glow) 50%, var(--glow-2) 55%, transparent 80%) 120% 0/250% 100% no-repeat}
  .motion .svc > li:hover::before{opacity:.35; animation:sweep 1.6s cubic-bezier(.3,.6,.2,1) both}
}
@keyframes sweep{from{background-position:120% 0} to{background-position:-20% 0}}

/* monthly cycle chips light up in order when the row comes into view */
.motion .cycle.run b{animation:lit 2s ease both; animation-delay:calc(var(--k) * .6s)}
@keyframes lit{0%{border-color:var(--line)} 35%{border-color:var(--accent); box-shadow:0 0 0 4px var(--glow-2)} 100%{border-color:var(--accent); box-shadow:none}}

/* process: the rule above each step fills as the section scrolls past */
.motion .steps li{border-top-color:var(--line); position:relative}
.motion .steps li::after{content:""; position:absolute; left:0; right:0; top:-1.5px; height:1.5px; background:var(--ink); transform-origin:0 50%; transform:scaleX(var(--fill,0))}
.motion .steps li::before{opacity:calc(.35 + var(--fill,0) * .65)}

/* closing wordmark: the light rises through the letters as the footer arrives */
.wordmark-wrap{overflow:clip; border-top:1px solid var(--line)}
.wordmark{font-family:var(--f-mark); font-weight:500; font-size:clamp(3rem,15.5vw,13.5rem); letter-spacing:.16em; line-height:1; text-align:center; padding:clamp(28px,6vw,72px) 0 clamp(8px,2vw,24px); margin-right:-.16em; white-space:nowrap; user-select:none;
  color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:radial-gradient(42% 120% at var(--lx,50%) var(--ly,85%), var(--accent), transparent 72%), linear-gradient(var(--line), var(--line))}
/* ================= v4: diagrams ================= */
/* statement: one sentence, set large; lights up word by word with scroll (motion only) */
.statement .wrap{padding-block:clamp(64px,10vw,128px)}
.stmt-text{margin:0; max-width:21em; font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem,4vw,2.9rem); line-height:1.65; letter-spacing:.05em; font-feature-settings:"palt" 1; word-break:auto-phrase}
html[lang="pt"] .stmt-text, html[lang="en"] .stmt-text{letter-spacing:0; line-height:1.35}
.stmt-text .w{white-space:nowrap}
.motion .stmt-text .w{color:var(--line); transition:color .7s ease}
.motion .stmt-text .w.lit{color:var(--ink)}

/* marquee band of real task names, moved by scroll (not by a timer) */
.marquee{border-block:1px solid var(--line); overflow:clip; padding-block:14px; display:grid; gap:6px; background:var(--surface)}
.mq-row{white-space:nowrap; overflow:clip}
.mq-move{display:inline-block; will-change:transform; transform:translate3d(var(--x,0px),0,0)}
.mq-track{display:inline-block; padding-right:.6em; font-weight:700; font-size:clamp(1.05rem,2.4vw,1.6rem); letter-spacing:.06em; font-feature-settings:"palt" 1}
.mq-row[data-dir="-1"] .mq-track{color:var(--muted); font-weight:400}

/* before / after comparison */
.cmp{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); user-select:none; -webkit-user-select:none; touch-action:pan-y}
.cmp-pane{padding:22px 22px 26px}
.cmp-before{position:absolute; inset:0; background:var(--paper); clip-path:inset(0 calc(100% - var(--pos)) 0 0); overflow:hidden;
  background-image:repeating-linear-gradient(-45deg, transparent 0 11px, color-mix(in oklab, var(--line) 45%, transparent) 11px 12px)}
.cmp.ease .cmp-before{transition:clip-path .55s cubic-bezier(.3,.7,.2,1)}
.cmp.ease .cmp-handle{transition:left .55s cubic-bezier(.3,.7,.2,1)}
.cmp-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 18px; font-weight:700}
.cmp-head em{font-style:normal; font-weight:400; font-size:var(--s-1); color:var(--muted)}
.cmp-after .cmp-head{justify-content:flex-end; text-align:right}
.cmp-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.cmp-steps li{position:relative; display:grid; gap:10px; align-content:start; padding:14px; border-radius:6px; min-height:118px; font-size:.9rem; line-height:1.6}
.cmp-after .cmp-steps li{background:var(--surface); border:1px solid var(--line)}
.cmp-after .cmp-steps li + li::before{content:""; position:absolute; left:-12px; top:50%; width:10px; height:1.5px; background:var(--accent)}
.cmp-before .cmp-steps li{background:var(--surface); border:1px dashed var(--muted)}
.cmp-before .cmp-steps li:nth-child(odd){transform:rotate(-1.4deg)}
.cmp-before .cmp-steps li:nth-child(even){transform:rotate(1.1deg) translateY(4px)}
.cmp-steps .n{font:500 .75rem/1 var(--f-mark); color:var(--muted)}
.cmp-steps .t{min-width:0}
.who{justify-self:start; font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:999px}
.who.hand{background:var(--wait-bg); color:var(--wait)}
.who.auto{background:var(--ok-bg); color:var(--ok)}
.cmp-handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--accent); pointer-events:none; z-index:2}
.cmp-handle span{position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:var(--ink); color:var(--btn-fg); display:grid; place-items:center; box-shadow:var(--shadow)}
.cmp-handle svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cmp-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3}
.cmp:has(.cmp-range:focus-visible) .cmp-handle span{outline:2px solid var(--accent); outline-offset:3px}
.cmp-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.seg-btn{display:inline-flex; align-items:center; font:inherit; font-size:.9rem; font-weight:700; background:transparent; border:1px solid var(--line); color:var(--ink); padding:9px 16px; border-radius:2px; cursor:pointer}
.seg-btn:hover{border-color:var(--ink)}

/* service flow diagrams */
.flow{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1.25fr) 40px minmax(0,1fr); align-items:center; margin:2px 0 22px; padding:18px 14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); max-width:36em}
.node{display:grid; justify-items:center; text-align:center; gap:5px; font-size:.8rem; line-height:1.45; min-width:0}
.node b{font-weight:700}
.node small{font-size:.72rem; color:var(--muted)}
.node.hub b{font-family:var(--f-mark); font-weight:500; letter-spacing:.22em; font-size:.78rem; margin-right:-.22em}
.node .ic{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--paper); color:var(--ink); transition:transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s}
.node.hub .ic{background:var(--ink); color:var(--btn-fg)}
.node .ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.node .ic .fillacc{fill:var(--accent); stroke:none}
.node .ic .stracc{stroke:var(--accent); stroke-width:1.8}
.node.hot .ic{transform:scale(1.12); background:var(--wait-bg); color:var(--accent-ink)}
.node.hub.hot .ic{background:var(--accent); color:var(--btn-fg)}
.link{position:relative; height:1.5px; background:var(--line); overflow-x:clip; overflow-y:visible}
.link::before{content:""; position:absolute; inset:0; background:var(--accent); transform-origin:0 50%; transform:scaleX(0)}
.link i{position:absolute; left:0; right:0; top:-3.5px; height:8px; transform:translateX(-100%); opacity:0}
.link i::after{content:""; position:absolute; right:0; top:0; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--glow-2), 0 0 12px var(--glow)}
.link.go::before{animation:fillx 1.1s cubic-bezier(.4,.1,.2,1) forwards}
.link.go i{animation:packet 1.1s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes fillx{to{transform:scaleX(1)}}
@keyframes packet{0%{transform:translateX(-100%); opacity:1} 90%{opacity:1} 100%{transform:translateX(0); opacity:0}}
.replay{position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--muted); display:none; place-items:center; cursor:pointer; padding:0}
.motion .replay{display:grid}
.replay:hover{color:var(--ink); border-color:var(--ink)}
.replay svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* process runner (wide screens): one line with a light that rides the scroll */
.runner{display:none; position:relative; height:1.5px; background:var(--line); margin:0 0 -1.5px}
.runner::before{content:""; position:absolute; inset:0; background:var(--ink); transform-origin:0 50%; transform:scaleX(var(--pr,0))}
.runner i{position:absolute; top:-5px; left:calc(var(--pr,0) * 100%); width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--glow-2), 0 0 16px var(--glow)}
@media (min-width:901px){
  .motion .runner{display:block}
  .motion .steps li{border-top-color:transparent}
  .motion .steps li::after{display:none}
}

/* contact: three-step strip */
.csteps{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 0; font-size:.88rem}
.csteps li{display:flex; align-items:center; gap:8px}
.csteps li + li::before{content:""; width:28px; height:1px; background:var(--muted); margin:0 10px; opacity:.6}
.csteps .n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--btn-fg); font:500 .72rem/1 var(--f-mark)}

/* FAQ opens smoothly where the browser supports animating to auto height */
@supports (interpolate-size: allow-keywords){
  .motion{interpolate-size:allow-keywords}
  .motion .faq details::details-content{height:0; overflow:clip; transition:height .35s cubic-bezier(.3,.7,.2,1), content-visibility .35s allow-discrete}
  .motion .faq details[open]::details-content{height:auto}
}

@media (max-width:900px){
  .cmp-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp-after .cmp-steps li + li::before{display:none}
}
@media (max-width:560px){
  .cmp-pane{padding:16px 14px 18px}
  .cmp-steps{grid-template-columns:minmax(0,1fr); gap:10px}
  .cmp-steps li{min-height:0; grid-template-columns:auto minmax(0,1fr) auto; align-items:center}
  .flow{grid-template-columns:minmax(0,1fr) 18px minmax(0,1.2fr) 18px minmax(0,1fr); padding:16px 8px 14px}
  .node{font-size:.72rem}
  .node small{font-size:.66rem}
  .node .ic{width:34px; height:34px}
  .csteps{gap:8px 16px}
  .csteps li + li::before{display:none}
}
/* ================= v7: photoreal dawn =================
   Footage generated with Higgsfield (MiniMax H3 from two GPT Image stills).
   Static (no JS / reduced motion): the morning frame. With motion: the frames are
   scrubbed by scroll from 4:30 (cluttered desk) to sunrise (one neat stack). */
.cine{position:relative; margin-top:calc(-1 * var(--head-h)); color:#F6F4EE; background:#0B1218}
.cine-stage{position:relative; height:100svh; min-height:540px; overflow:clip; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate}
.dawn-pic{position:absolute; inset:0; z-index:-2}
.dawn-pic picture, .dawn-pic img{position:absolute; inset:0; width:100%; height:100%}
.dawn-pic img{object-fit:cover; object-position:56% 50%; display:block}
.dawn-pic .d-night{display:none}
#dawn{position:absolute; inset:0; width:100%; height:100%; z-index:-1; display:none}
.cine-shade{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,9,12,.62) 0%, rgba(5,9,12,0) 24%),
    linear-gradient(0deg, rgba(5,9,12,.82) 0%, rgba(5,9,12,.42) 30%, rgba(5,9,12,0) 56%),
    radial-gradient(80% 70% at 0% 100%, rgba(5,9,12,.5), transparent 72%)}
.cine-inner{position:relative; z-index:2; width:100%; padding-bottom:calc(clamp(40px,9svh,96px) + env(safe-area-inset-bottom,0px))}
.cine-clock{margin:0 0 16px; font:500 .78rem/1 var(--f-mark); letter-spacing:.26em; color:rgba(246,244,238,.8); display:flex; align-items:center; gap:12px; font-variant-numeric:tabular-nums}
.cine-clock::before{content:""; width:26px; height:1px; background:currentColor; opacity:.7}
.cine-title{font-family:var(--f-display); font-weight:700; font-size:clamp(2.1rem,5.6vw,4.6rem); line-height:1.28; letter-spacing:.05em; margin:0 0 16px; color:#FAF7F0; text-shadow:0 2px 30px rgba(3,6,10,.55)}
.cine-title span{display:block}
.cine-title span:nth-child(2){opacity:var(--l2,1); transform:translateY(calc((1 - var(--l2,1)) * 18px))}
html[lang="pt"] .cine-title, html[lang="en"] .cine-title{font-size:clamp(1.9rem,4.6vw,3.5rem); letter-spacing:0; line-height:1.14}
.cine-sub{margin:0; font-size:.95rem; letter-spacing:.06em; color:rgba(246,244,238,.88); text-shadow:0 1px 14px rgba(3,6,10,.6)}
.cine-hint{display:none}

/* scrubbed version (motion only) */
.cine-on .cine-track{height:520vh}
.cine-on .cine-stage{position:sticky; top:0}
.cine-seq #dawn{display:block}
.cine-seq .dawn-pic .d-day{display:none}
.cine-seq .dawn-pic .d-night, .cine-lite .dawn-pic .d-night{display:block}
.cine-lite .dawn-pic .d-day{opacity:var(--day,0)}
.cine-on .cine-hint{display:flex; position:absolute; right:max(16px, env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:3;
  flex-direction:column; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.2em; color:rgba(246,244,238,.78); opacity:var(--hint,1); transition:opacity .3s; writing-mode:vertical-rl}
.cine-hint i{display:block; width:1px; height:34px; background:linear-gradient(rgba(246,244,238,.85), transparent); transform-origin:top; animation:drip 1.8s ease-in-out 3 both}
.cine-on .cine-inner{transform:translate3d(0, calc(var(--push,0) * -28px), 0); opacity:calc(1 - var(--push,0) * .2)}

/* header over the photograph */
.head-dark .site-head{background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}
.head-dark .mark, .head-dark .nav a{color:#F6F4EE}
.head-dark .nav a[aria-current="true"]{color:#FFFFFF}
.head-dark .mark svg path:first-of-type{stroke:#F6F4EE}
.head-dark .lang{border-color:rgba(246,244,238,.38)}
.head-dark .lang button{color:rgba(246,244,238,.84)}
.head-dark .lang button[aria-pressed="true"]{background:#F6F4EE; color:#0B1218}
.head-dark .head-cta{background:#F6F4EE; color:#0B1218}
.head-dark .menu-btn{color:#F6F4EE; border-color:rgba(246,244,238,.38)}
.head-dark body::before, .head-dark::before{background:transparent}

/* the hero below no longer opens the page */
.hero .wrap{padding-block:clamp(48px,7vw,88px)}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink); max-width:30em}

/* comparison: "today" is night, "after" is day */
.cmp-before{background-color:#0E1620; color:#E6ECE9; background-image:repeating-linear-gradient(-45deg, transparent 0 11px, rgba(230,236,233,.05) 11px 12px)}
.cmp-before .cmp-head em{color:#9AABAD}
.cmp-before .cmp-steps li{background:#16212C; border-color:#3A4A57; color:#E6ECE9}
.cmp-before .cmp-steps .n{color:#9AABAD}
.cmp-before .who.hand{background:#3A2E18; color:#EDB25A}

@media (max-width:560px){
  .cine-on .cine-track{height:430vh}
}
@media (prefers-reduced-motion: reduce){ .cine-hint i{animation:none} }
/* ================= v6: finishing pass ================= */
/* the second line catches the first light */
.motion #hero-title span.glint .ch{animation:glint 1.9s ease both; animation-delay:calc(var(--i) * 50ms - 260ms)}
@keyframes glint{0%{text-shadow:0 2px 30px rgba(3,6,10,.55)} 35%{text-shadow:0 0 .32em rgba(255,214,140,.95), 0 0 .08em rgba(255,244,220,.9)} 100%{text-shadow:0 2px 30px rgba(3,6,10,.55)}}
/* the small sun in the logo rises with the dawn */
.mark svg circle{transform-box:fill-box; transform-origin:center; transform:translateY(calc((1 - var(--sunup,1)) * 4px)); opacity:calc(.45 + var(--sunup,1) * .55)}
/* interaction polish */
.btn{transition:background-color .2s, transform .12s}
.btn:active, .seg-btn:active, .ask:active, .copy:active{transform:translateY(1px)}
.seg-btn, .ask, .copy, .replay, .nav a{transition:border-color .2s, color .2s}
.chip span{transition:background-color .15s, border-color .15s, color .15s}
.chip span:hover{border-color:var(--ink)}
.textlink{transition:text-decoration-thickness .15s}
.textlink:hover{text-decoration-thickness:2.5px}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--accent-ink)}
.lang button{min-height:36px}
.mail-addr a, a.mail-addr{text-decoration-color:var(--accent); text-underline-offset:4px}
@media (prefers-reduced-motion: reduce){ .btn, .chip span, .faq summary{transition:none} }
@media (max-width:360px){
  .site-head .wrap{gap:8px}
  .mark{letter-spacing:.14em; font-size:.92rem; gap:7px}
  .lang button{min-width:30px; padding:0 6px}
}
.menu-btn, .lang{flex:none}


/* ================= v11: the statement — words that light up, a spark of light runs behind them ================= */
.statement.pulse{position:relative; overflow:clip; color:#F2F5F3;
  background:radial-gradient(90% 120% at 12% 0%, #14272C 0%, #0C171A 52%, #070C0E 100%)}
.statement.pulse::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(40% 60% at 85% 100%, rgba(201,130,31,.10), rgba(201,130,31,0) 70%)}
.statement.pulse .wrap{position:relative; padding-block:clamp(104px,17vh,190px)}
.motion .stmt-track{height:240vh}
.motion .stmt-stage{position:sticky; top:0; height:100svh; display:flex; align-items:center}
.motion .stmt-stage .wrap{width:100%; padding-block:calc(var(--head-h) + 24px) 24px}
.stmt-box{position:relative; max-width:max-content}
.stmt-kicker{margin:0 0 clamp(18px,2.6vw,30px); font:500 .78rem/1 var(--f-mark); letter-spacing:.3em; color:rgba(242,245,243,.55)}
.stmt-kicker::before{content:""; display:inline-block; width:28px; height:1px; margin-right:14px; vertical-align:middle; background:#C9821F}
.statement.pulse .stmt-text{color:#F2F5F3; max-width:13.5em; font-size:clamp(1.85rem,4.3vw,3.5rem); line-height:1.6}
html[lang="pt"] .statement.pulse .stmt-text, html[lang="en"] .statement.pulse .stmt-text{max-width:15em; font-size:clamp(1.6rem,3.6vw,2.9rem)}
.motion .statement.pulse .stmt-text .w{color:rgba(242,245,243,.16); transition:color .9s ease, text-shadow 1.4s ease}
.motion .statement.pulse .stmt-text .w.lit{color:#F7F5EF}
.motion .statement.pulse .stmt-text .w.s2.lit{color:#F2C27A; text-shadow:0 0 .6em rgba(232,163,61,.28)}
.stmt-spark{position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; pointer-events:none; opacity:0;
  transform:translate(var(--spx,0px), var(--spy,0px)); transition:transform .9s cubic-bezier(.3,.7,.2,1), opacity .8s ease;
  background:radial-gradient(circle, #FFF8E8 0%, #FFD58F 30%, rgba(232,163,61,.45) 55%, rgba(232,163,61,0) 72%);
  box-shadow:0 0 18px 6px rgba(232,163,61,.35)}
.stmt-spark::before{content:""; position:absolute; right:50%; top:50%; width:72px; height:2px; margin-top:-1px; border-radius:2px;
  background:linear-gradient(90deg, rgba(232,163,61,0), rgba(255,213,143,.85))}
.stmt-spark.on{opacity:1}
@media (max-width:760px){
  .statement.pulse .wrap{padding-block:clamp(84px,14vh,130px)}
  .motion .stmt-track{height:220vh}
  .statement.pulse .stmt-text{font-size:clamp(1.55rem,7vw,2.1rem); max-width:13.5em}
  .stmt-spark::before{width:44px}
}

/* ================= v7: service photographs ================= */
.svc-pic{margin:24px 0 0; max-width:420px; aspect-ratio:3/2; overflow:hidden; border-radius:4px; background:color-mix(in oklab, var(--line) 60%, var(--paper))}
.svc-pic{display:grid}
.svc-pic img{grid-area:1/1; display:block; width:100%; height:100%; object-fit:cover}
.svc-pic .pa{visibility:hidden}               /* static: only the tidy "after" */
/* motion: the cluttered "before" turns into the tidy "after" as the photo scrolls up the screen */
.motion .svc-pic .pa{visibility:visible}
.motion .svc-pic .pb{opacity:var(--sv,0); transform:scale(calc(1.035 - var(--sv,0) * .035)); will-change:opacity}
@media (max-width:900px){ .svc-pic{max-width:none; margin-top:18px} }

/* ================= v7: comparison — the same desk at 4:30 and at sunrise ================= */
.cmp-before{background-image:linear-gradient(rgba(10,16,24,.8), rgba(10,16,24,.9)), url(dawn/d/000.webp); background-size:cover; background-position:56% 62%}
.cmp-after{background-image:linear-gradient(color-mix(in oklab, var(--surface) 78%, transparent), color-mix(in oklab, var(--surface) 90%, transparent)), url(dawn/d/071.webp); background-size:cover; background-position:56% 62%}

/* ================= v7: closing — LUM|ERA standing on the morning sea =================
   (v9: the oversized "LUM|ERA" letters were replaced by a quiet name card) */
.finale{position:relative; background:#0B1218; overflow:clip; border-top:1px solid var(--line)}
.sea{position:relative; width:100%; height:clamp(260px, min(52svh, 34vw), 560px)}
.sea video, .sea img, .sea svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.sea video, .sea img{object-fit:cover; object-position:50% 42%}
.sea video{opacity:0; transition:opacity 3s ease}
.sea.playing video{opacity:1}
/* v9: a quiet end card — the real sun on the horizon is the logo's sun; the name sits in the sky above it */
.sea-lock{position:absolute; left:0; right:0; top:16%; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding-inline:16px; pointer-events:none}
.sea-word{margin:0 -.42em 0 0; font-family:var(--f-mark); font-weight:500; font-size:clamp(22px,3.1vw,48px); line-height:1; letter-spacing:.42em; color:#FFF8EC; text-shadow:0 2px 26px rgba(4,10,20,.35)}
.sea-rule{display:block; width:clamp(32px,3.2vw,46px); height:1px; margin:clamp(13px,1.5vw,20px) 0; background:linear-gradient(90deg, rgba(243,190,114,0), #F3BE72, rgba(243,190,114,0))}
.sea-tag{margin:0; max-width:30em; font-family:var(--f-display); font-weight:700; font-size:clamp(13px,1.2vw,18px); line-height:1.7; letter-spacing:.14em; color:rgba(255,248,236,.92); text-shadow:0 1px 18px rgba(4,10,20,.45)}
html[lang="pt"] .sea-tag, html[lang="en"] .sea-tag{letter-spacing:.03em; font-weight:500}
/* v13: the sea stays on screen while you scroll; the name appears letter by letter, then the line, then the words */
.sea-word span{display:inline-block}
.sea-word span:nth-child(1){--i:0} .sea-word span:nth-child(2){--i:1} .sea-word span:nth-child(3){--i:2} .sea-word span:nth-child(4){--i:3}
.sea-word span:nth-child(5){--i:4} .sea-word span:nth-child(6){--i:5} .sea-word span:nth-child(7){--i:6}
.motion .sea-word span{--k:clamp(0, calc((var(--fq,0) - .06 - var(--i) * .06) * 6), 1); opacity:var(--k); transform:translateY(calc((1 - var(--k)) * 10px)); filter:blur(calc((1 - var(--k)) * 3px))}
.motion .sea-rule{--k:clamp(0, calc((var(--fq,0) - .5) * 6), 1); opacity:var(--k); transform:scaleX(var(--k))}
.motion .sea-tag{--k:clamp(0, calc((var(--fq,0) - .6) * 4.5), 1); opacity:var(--k); transform:translateY(calc((1 - var(--k)) * 10px))}
@media (max-width:700px){
  .sea{height:auto; aspect-ratio:5/4}
  .sea-lock{top:14%}
  .sea-word{font-size:clamp(20px,6.2vw,30px)}
  .sea-tag{font-size:12.5px; letter-spacing:.08em}
}
@media (prefers-reduced-motion: reduce){ html:not(.motion) .sea video{display:none} }
/* v21: the light behind the slips (a compositor layer) */
.slips-fx{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; display:none}
.story .slips-fx{display:block}
.slips-fx i{position:absolute; left:0; top:0; width:800px; height:800px; border-radius:50%; background:radial-gradient(closest-side, var(--glow), transparent); opacity:0; will-change:transform, opacity}
/* v21: section headings — a short amber rule draws, the heading wipes in, the lead follows (once) */
.sec-head::before{content:""; display:block; width:28px; height:1.5px; background:var(--accent); transform-origin:0 50%}
.rv .sec-head::before{transform:scaleX(0); transition:transform .7s cubic-bezier(.65,0,.2,1)}
.rv .sec-head h2{clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.65,0,.2,1) .18s}
.rv .sec-head > p{opacity:0; transform:translateY(8px); transition:opacity .9s ease .5s, transform .9s cubic-bezier(.3,.7,.2,1) .5s}
.rv .sec-head.in::before{transform:none}
.rv .sec-head.in h2{clip-path:inset(0 0 0 0)}
.rv .sec-head.in > p{opacity:1; transform:none}
/* v21: the company table is ruled line by line */
.rv .profile > div{border-top-color:transparent; position:relative}
.rv .profile > div::before{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s cubic-bezier(.65,0,.2,1) calc(var(--r,0) * 90ms)}
.rv .profile > div:first-child::before{content:none}
.rv .profile > div > *{opacity:0; transition:opacity .8s ease calc(var(--r,0) * 90ms + .3s)}
.rv .profile.in > div::before{transform:none}
.rv .profile.in > div > *{opacity:1}
/* v21: a light passes over the address once */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rv:not(.calm) .cbox-addr{background:linear-gradient(100deg, var(--ink) 0 40%, var(--accent) 47%, #F4C77E 50%, var(--accent) 53%, var(--ink) 60% 100%) 100% 0 / 280% 100% no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  .rv:not(.calm) .cbox.in .cbox-addr{animation:addr-sweep 2.4s cubic-bezier(.45,.05,.2,1) .5s both}
}
@keyframes addr-sweep{from{background-position:100% 0} to{background-position:0 0}}
@media (forced-colors: active){ .rv .cbox-addr{background:none !important; -webkit-text-fill-color:currentColor !important} }
/* v21: one marker slides under the current menu item */
.nav{position:relative}
.nav-ink{position:absolute; left:0; bottom:0; width:100px; height:1.5px; background:var(--accent); transform-origin:0 50%; transform:translateX(var(--nx,0px)) scaleX(var(--nw,0)); opacity:0; pointer-events:none; transition:transform .6s cubic-bezier(.3,.7,.2,1), opacity .3s ease}
.nav-ink.on{opacity:1}
.nav-ink.snap, .calm .nav-ink{transition:opacity .3s ease}
.motion .nav a[aria-current="true"]{border-bottom-color:transparent}
/* v21: an opened answer settles in */
.motion .faq details[open] > p{animation:faq-in .55s cubic-bezier(.3,.7,.2,1) both}
@keyframes faq-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
/* v21: moving to and from the legal pages fades instead of cutting */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-group(root){animation-duration:.4s}
}
/* v20: gentle motion (reduce-motion visitors): the same effects as light and fades, no travel */
@keyframes fadein{from{opacity:.12} to{opacity:1}}
.motion.calm #hero-title .ch{animation-name:fadein}
.calm.cine-on .cine-inner{transform:none}
.calm .cine-title span:nth-child(2){transform:none}
.calm.story .board{transform:none}
.motion.calm .svc-pic .pb{transform:none}
.motion.calm .sea-word span, .motion.calm .sea-tag{transform:none}
/* v21 gentle: headings, table rules and answers fade; nothing wipes or slides */
.calm.rv .sec-head::before{transform:none; opacity:0; transition:opacity .6s ease}
.calm.rv .sec-head.in::before{opacity:1}
.calm.rv .sec-head h2{clip-path:none; opacity:0; transition:opacity .9s ease .1s}
.calm.rv .sec-head.in h2{opacity:1}
.calm.rv .sec-head > p{transform:none}
.calm.rv .profile > div::before{transform:none; opacity:0; transition:opacity .7s ease calc(var(--r,0) * 90ms)}
.calm.rv .profile.in > div::before{opacity:1}
.calm .faq details[open] > p{animation-name:fadein}
.calm .build.armed .bw-logo, .calm .build.armed .bw-links i, .calm .build.armed .bw-h1, .calm .build.armed .bw-h2, .calm .build.armed .bw-cards span{transform:none; opacity:0}
.calm .build.armed .bw-load{transform:none; opacity:0}
.calm .build.armed.b5 .bw-load{opacity:.8}
.calm .build.armed.b1 .bw-logo{opacity:.75}
.calm .build.armed.b1 .bw-links i{opacity:.5}
.calm .build.armed.b2 .bw-h1{opacity:.8}
.calm .build.armed.b2 .bw-h2{opacity:.55}
.calm .build.armed.b4 .bw-cards span{opacity:1}
.calm.rv .price-list > div:not(:first-child)::before, .calm.rv .svc > li::after{transform:none; opacity:0; transition:opacity .7s ease calc(var(--r,0) * 110ms)}
.calm.rv .price.in .price-list > div::before, .calm.rv .svc > li.in::after{opacity:1}
.calm .ask:hover svg{transform:none}
.calm .link i, .calm .runner i, .calm .stmt-spark{display:none}
.calm .svc > li:hover::before{animation:none}
html.calm{scroll-behavior:auto}
.calm .hero-stage::before, .calm .scroll-hint i, .calm .cine-hint i{animation:none}
/* v21: print shows everything, without the long scroll tracks */
@media print{
  .rv .sec-head h2{clip-path:none !important; opacity:1 !important}
  .rv .sec-head::before, .rv .profile > div::before{transform:none !important; opacity:1 !important}
  .rv .sec-head > p, .rv .profile > div > *{opacity:1 !important; transform:none !important}
  .rv .price-list dd, .build *{opacity:1 !important; transform:none !important}
  .rv .price-list > div::before, .rv .svc > li::after{transform:none !important; opacity:1 !important}
  .svc-index, .build .replay{display:none !important}
  .cine-on .cine-track, .motion .stmt-track{height:auto !important}
  .cine-on .cine-stage, .motion .stmt-stage{position:relative !important}
  #dawn, #slips, .slips-fx, .progress, .sea video, .cine-hint, .scroll-hint, .nav-ink{display:none !important}
  .cine-seq .dawn-pic .d-night{display:none !important}
  .cine-seq .dawn-pic .d-day{display:block !important; opacity:1 !important}
  .site-head{position:static !important}
  .rv .cbox-addr{background:none !important; -webkit-text-fill-color:currentColor !important; color:#111 !important; animation:none !important}
  .cine-title span:nth-child(2), .story .board{opacity:1 !important; transform:none !important}
  .cine-title, .cine-sub, .cine-clock, .statement, .statement *{color:#111 !important; text-shadow:none !important}
  .sea, .cbox-alt{display:none !important}
}
/* v21: forced colours keep the table lines and the plain underline under the current menu item */
@media (forced-colors: active){
  .rv .profile > div:not(:first-child){border-top-color:CanvasText}
  .rv .profile > div::before, .nav-ink{display:none}
  .rv .price-list > div:not(:first-child), .rv .svc > li{border-top-color:CanvasText}
  .rv .price-list > div::before, .rv .svc > li::after{display:none}
  .svc-index a[aria-current="true"][href]{forced-color-adjust:none; color:HighlightText; background:Highlight; border-color:Highlight}
  .build .bw-logo, .build .bw-links i, .build .bw-h1, .build .bw-h2, .build .bw-cta, .build .bw-load, .build .bw-bar > i{forced-color-adjust:none; background:CanvasText}
  .build .bw-pic{forced-color-adjust:none; background:Canvas; border:1px solid CanvasText}
  .build .bw-steps li.on::before{forced-color-adjust:none; background:Highlight; border-color:Highlight}
  .motion .nav a[aria-current="true"]{border-bottom-color:Highlight}
}
/* v15: the telecom example sits under the task list as its own small label + chip row */
.svc .body > p.eg-case{margin:22px 0 12px}
.eg-case + .cycle{margin-top:0}
.svc .ph{word-break:keep-all; overflow-wrap:anywhere}
/* v18: contact = the address only */
.cbox{display:grid; justify-items:start; gap:16px; max-width:40em; padding:clamp(22px,3vw,32px); background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow)}
.cbox-addr{font:500 clamp(1.15rem,2.6vw,1.7rem)/1.3 var(--f-mark); letter-spacing:.02em; color:var(--ink); max-width:100%}
.cbox-actions{display:flex; flex-wrap:wrap; gap:10px}
.cbox-actions .btn{padding:12px 20px; font-size:.92rem}
.cbox .status{padding:0; min-height:0}
.cbox .status:empty{display:none}
.cbox .note{margin:0}
.price{margin:18px 0 16px; padding:14px 18px 16px; max-width:34em; background:var(--surface); border:1px solid var(--line); border-radius:6px}
.price-plan{margin:0 0 2px; font-size:var(--s-1); font-weight:700; letter-spacing:.06em; color:var(--muted)}
.price-list{margin:0 0 12px}
.price-list > div{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 16px; padding:10px 0; border-top:1px solid var(--line)}
.price-list > div:first-child{border-top:0}
.price-list dt{margin:0; min-width:0}
.price .ph{word-break:keep-all; overflow-wrap:anywhere}
.price-list dd{margin:0; display:flex; flex-direction:column; align-items:flex-end; text-align:right; white-space:nowrap}
.price-list dd b{font:500 1.15rem/1.2 var(--f-mark); letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.price-list dd small{font-size:var(--s-1); line-height:1.4; color:var(--muted)}
.price-note{margin:0; font-size:var(--s-1); color:var(--muted)}
.price{break-inside:avoid}
.price-list dt.ph{overflow-wrap:break-word}
/* v23: services index — sticks under the header while the services are on screen */
.svc-index{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--head-h)); z-index:6; display:flex; gap:8px; margin:0 -6px 4px; padding:10px 6px; scroll-padding-inline:6px; background:var(--paper); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.svc-index::-webkit-scrollbar{display:none}
.svc-index a{flex:none; padding:7px 14px; border:1px solid var(--line); border-radius:999px; font-size:var(--s-1); font-weight:700; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .25s, border-color .25s, background-color .25s}
.svc-index a:hover{color:var(--ink); border-color:var(--ink)}
.svc-index a[aria-current="true"]{color:var(--paper); background:var(--ink); border-color:var(--ink)}
.svc > li{scroll-margin-top:72px}
.svc > li :is(a, button, summary, [tabindex]){scroll-margin-top:72px; scroll-margin-bottom:24px}
/* v23: website creation — a small browser window */
.build{position:relative; margin:2px 0 18px; padding:16px 16px 12px; max-width:34em; background:var(--surface); border:1px solid var(--line); border-radius:8px}
.bw{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper)}
.bw-bar{display:flex; align-items:center; gap:5px; padding:7px 9px; background:var(--surface); border-bottom:1px solid var(--line)}
.bw-bar > i{width:7px; height:7px; border-radius:50%; background:var(--line)}
.bw-addr{position:relative; flex:1; height:9px; margin-left:8px; border-radius:5px; background:color-mix(in oklab, var(--line) 55%, transparent); overflow:hidden}
.bw-load{position:absolute; inset:0; background:var(--accent); opacity:.8; transform-origin:0 50%}
.bw-page{display:grid; gap:12px; padding:12px 14px 14px}
.bw-nav{display:flex; justify-content:space-between; align-items:center}
.bw-logo{width:46px; height:8px; border-radius:2px; background:var(--ink); opacity:.75; transform-origin:0 50%}
.bw-links{display:flex; gap:7px}
.bw-links i{width:20px; height:5px; border-radius:2px; background:var(--muted); opacity:.5; transform-origin:0 50%}
.bw-hero{display:grid; grid-template-columns:1.25fr 1fr; gap:7px 14px; align-items:center}
.bw-h1{grid-column:1; width:92%; height:10px; border-radius:2px; background:var(--ink); opacity:.8; transform-origin:0 50%}
.bw-h2{grid-column:1; width:70%; height:6px; border-radius:2px; background:var(--muted); opacity:.55; transform-origin:0 50%}
.bw-cta{grid-column:1; width:56px; height:14px; border-radius:3px; background:var(--accent)}
.bw-pic{grid-column:2; grid-row:1 / span 3; height:62px; border-radius:4px; background:color-mix(in oklab, var(--accent) 22%, var(--surface))}
.bw-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.bw-cards span{height:30px; border:1px solid var(--line); border-radius:4px; background:var(--surface)}
.build .replay{top:auto; bottom:8px; right:10px}
.bw-steps{display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 0; padding:0 32px 0 0; list-style:none; font-size:var(--s-1); color:var(--muted)}
.bw-steps li{display:flex; align-items:center; gap:7px; transition:color .4s}
.bw-steps li::before{content:""; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--line); transition:background-color .4s, border-color .4s}
.bw-steps li.on{color:var(--ink)}
.bw-steps li.on::before{background:var(--accent); border-color:var(--accent)}
.build .bw-logo, .build .bw-links i, .build .bw-h1, .build .bw-h2, .build .bw-load{transition:transform .8s cubic-bezier(.65,0,.2,1), opacity .6s ease}
.build .bw-cta, .build .bw-pic, .build .bw-cards span{transition:opacity .7s ease, transform .8s cubic-bezier(.3,.7,.2,1)}
.build .bw-links i:nth-child(2), .build .bw-cards span:nth-child(2){transition-delay:.12s}
.build .bw-links i:nth-child(3), .build .bw-cards span:nth-child(3){transition-delay:.24s}
.build .bw-h2{transition-delay:.15s}
.build.armed .bw-logo, .build.armed .bw-links i, .build.armed .bw-h1, .build.armed .bw-h2, .build.armed .bw-load{transform:scaleX(0)}
.build.armed .bw-cta, .build.armed .bw-pic{opacity:0}
.build.armed .bw-cards span{opacity:0; transform:translateY(8px)}
.build.armed.b1 .bw-logo, .build.armed.b1 .bw-links i{transform:none}
.build.armed.b2 .bw-h1, .build.armed.b2 .bw-h2{transform:none}
.build.armed.b3 .bw-cta, .build.armed.b3 .bw-pic{opacity:1}
.build.armed.b4 .bw-cards span{opacity:1; transform:none}
.build.armed.b5 .bw-load{transform:none; transition-duration:1s}
.build.reset *, .build.reset *::before{transition:none !important}
/* v23: the price rows and the lines between services are ruled in */
.rv .price-list > div{position:relative; border-top-color:transparent}
.rv .price-list > div:not(:first-child)::before{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line); transform:scaleX(0); transform-origin:0 50%; transition:transform 1s cubic-bezier(.65,0,.2,1) calc(var(--r,0) * 110ms)}
.rv .price-list dd{opacity:0; transition:opacity .7s ease calc(var(--r,0) * 110ms + .25s)}
.rv .price.in .price-list > div::before{transform:none}
.rv .price.in .price-list dd{opacity:1}
.rv .svc > li{position:relative; border-top-color:transparent}
.rv .svc > li::after{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s cubic-bezier(.65,0,.2,1)}
.rv .svc > li.in::after{transform:none}
.ask svg{transition:transform .25s ease}
.ask:hover svg{transform:translateY(2px)}
@media (max-width:520px){ .price-list > div{grid-template-columns:minmax(0,1fr); gap:2px} .price-list dd{flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; gap:2px 8px; white-space:normal} .price-list dd small{text-align:right} }
.cbox-alt{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:var(--s-1); color:var(--muted)}
.cbox-alt[hidden]{display:none}
.cbox-alt a{display:inline-block; padding:9px 2px; color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px}
.cbox-alt{row-gap:0}
.cbox-alt > span{flex:1 0 100%; margin-bottom:-6px}
.cbox .ph{word-break:keep-all; overflow-wrap:anywhere}
.rep .ph{word-break:keep-all; overflow-wrap:anywhere}
.rep-name span{word-break:keep-all}
@media (max-width:700px){ .rep{grid-template-columns:minmax(0,1fr); gap:10px} }

figure.board{margin:0}
#cmp{--pos:50%}
/* 404 page */
.nf{padding-block:clamp(80px,18vh,180px) 80px; max-width:40em}
.nf-code{margin:0 0 10px; font:500 .85rem/1 var(--f-mark); letter-spacing:.32em; color:var(--accent-ink)}
.nf h1{font-family:var(--f-display); font-weight:700; font-size:var(--s3); letter-spacing:.06em; margin:0 0 12px}
.nf p{color:var(--muted)}
.nf .btn{margin-top:18px; color:var(--btn-fg)}

/* legal pages (特定商取引法に基づく表記・プライバシーポリシー・利用規約) */
.lg-head{border-bottom:1px solid var(--line); background:var(--paper)}
.lg-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.lg-head .mark{margin-right:0}
.lg-tools{display:flex; align-items:center; gap:16px}
.lg-back{font-size:var(--s-1); color:var(--ink)}
.legal{padding-block:clamp(40px,7vh,72px) 80px; max-width:48em}
.legal h1{font-family:var(--f-display); font-weight:700; font-size:var(--s3); letter-spacing:.04em; line-height:1.4; margin:0 0 6px}
.legal h1 small{display:block; font-family:var(--f-body); font-weight:400; font-size:var(--s-1); letter-spacing:0; color:var(--muted); margin-top:6px}
.lg-doc > h1 + *{margin-top:22px}
html[lang="pt"] .legal h1, html[lang="en"] .legal h1{letter-spacing:0}
.legal h2{font-size:var(--s1); line-height:1.5; margin:30px 0 8px}
.legal p, .legal li{line-height:1.9}
.legal ol{padding-left:1.5em; margin:8px 0}
.legal li{margin:4px 0}
.legal table{width:100%; border-collapse:collapse; font-size:var(--s-1); background:var(--surface); border:1px solid var(--line)}
.legal th, .legal td{text-align:left; vertical-align:top; padding:13px 14px; border-bottom:1px solid var(--line); line-height:1.8}
.legal th{width:12.5em; color:var(--muted); font-weight:700; background:color-mix(in oklab, var(--paper) 60%, var(--surface))}
.legal a{color:var(--ink); text-underline-offset:3px}
.legal .date{color:var(--muted); font-size:var(--s-1); margin-top:26px}
.lg-foot .wrap{padding-block:32px 48px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 24px; font-size:var(--s-1); color:var(--muted)}
.lg-foot a{color:var(--ink)}
@media (max-width:640px){
  .lg-tools{gap:10px}
  .legal th, .legal td{display:block; width:auto; border-bottom:0; padding:10px 14px 0}
  .legal td{padding:2px 14px 12px; border-bottom:1px solid var(--line)}
}
@media (max-width:420px){ .lg-back{display:none} }