/* QREVO corporate site.
   Sections 1-3 are the first view (header, hero, business index): the approved layout, artwork and headline.
   On 2026-11-12 the owner had the English slogan, the abstract sub-line and the English labels of the index taken out.
   Everything after the first view starts at section 4. */

/* 1. Font and tokens */
@font-face { font-family:"Qrevo JP"; src:url("assets/qrevo-jp.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
:root {
  --ink:#06152b; --lime:#b8f500; --text:#1d2c40; --muted:#55647a; --line:#d2d8df; --rule:#99a7b8; --paper:#f3f5f2;
  --on-ink:#c5cfdb; --on-ink-muted:#9fb0c3;
  --edge:3.8%; --rule-edge:3%; --gap:clamp(20px,2.5vw,40px); --section:clamp(88px,10.4vw,168px);
  color:var(--ink); font-family:"Qrevo JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:#fff; line-height:1.8; }
[hidden] { display:none !important; }
a { color:inherit; text-underline-offset:.3em; }
a:focus-visible,button:focus-visible { outline:3px solid #538200; outline-offset:5px; }
h1,h2,h3,p { margin-top:0; }
p { line-height:1.95; }
img { max-width:100%; }
.skip { position:absolute; left:1rem; top:-5rem; z-index:30; background:#fff; padding:1rem; }
.skip:focus { top:1rem; }

/* 2. Header (approved) */
.mast { position:sticky; top:0; z-index:20; height:clamp(84px,6.94vw,110px); display:flex; align-items:center; justify-content:space-between; gap:22px; padding-left:3.8%; padding-right:2.5%; background:rgba(255,255,255,.97); border-bottom:1px solid transparent; transition:border-color .2s; }
/* Opaque once content scrolls beneath it, so nothing shows through the header. */
.mast.is-scrolled { border-color:var(--line); background:#fff; }
.brand-lockup { display:flex; align-items:center; gap:30px; flex-shrink:0; text-decoration:none; }
.wordmark { position:relative; width:clamp(155px,17.5vw,278px); aspect-ratio:1545/430; display:block; overflow:hidden; }
.wordmark img { position:absolute; width:117.865%; max-width:none; height:auto; left:-9.0615%; top:-52.7907%; }
.company-name { border-left:1px solid #acb5c0; padding-left:26px; font-weight:700; font-size:clamp(17px,1.8vw,28px); white-space:nowrap; }
.mast nav { display:flex; align-items:center; gap:clamp(24px,3.7vw,60px); font-size:clamp(15px,1.45vw,23px); font-weight:700; }
.mast nav a { position:relative; text-decoration:none; white-space:nowrap; padding-block:12px; }
.mast nav a:not(.nav-contact)::after { content:""; position:absolute; bottom:4px; left:0; width:100%; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.mast nav a:not(.nav-contact):hover::after,.mast nav a[aria-current]:not(.nav-contact)::after { transform:scaleX(1); }
.mast .nav-contact { background:var(--ink); color:#fff; padding:10px 30px; transition:background-color .2s,color .2s; }
.mast .nav-contact:hover { background:var(--lime); color:var(--ink); }

/* 3. Hero and business index (approved) */
.hero { position:relative; isolation:isolate; height:clamp(565px,42.7vw,678px); overflow:hidden; }
.hero-copy { position:relative; z-index:1; margin-left:3.8%; padding-top:clamp(58px,5.3vw,86px); width:52%; animation:hero-in .8s ease-out both; }
.hero h1 { font-size:clamp(84px,8.45vw,134px); font-weight:900; font-feature-settings:"palt"; letter-spacing:.005em; line-height:1.08; margin-bottom:clamp(22px,2vw,30px); }
.lead { font-size:clamp(15px,1.5vw,22px); font-weight:500; letter-spacing:.02em; line-height:1.8; margin-bottom:clamp(34px,3vw,46px); }
.lead .l { display:block; }
.lead .l > span { display:inline-block; }
.hero-actions { display:flex; gap:20px; }
.action { display:flex; align-items:center; justify-content:center; background:var(--lime); width:248px; max-width:30vw; min-height:60px; padding:10px 20px; text-decoration:none; font-size:clamp(19px,1.8vw,28px); font-weight:750; }
.action.dark { background:var(--ink); color:#fff; width:225px; }
.action:hover { text-decoration:underline; }
/* Display only the artwork region of the supplied 1586x992 mock. Text remains live HTML. */
.hero-art { position:absolute; z-index:0; width:57.125%; aspect-ratio:906/674; right:0; top:0; overflow:hidden; animation:art-in 1s ease-out both; }
.hero-art img { position:absolute; width:175.0552%; max-width:none; height:auto; left:-75.0552%; top:-16.1721%; }
@keyframes hero-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes art-in { from { opacity:0; } to { opacity:1; } }
.service-index { margin:0 3%; border-top:1px solid var(--rule); display:grid; grid-template-columns:1fr 1.055fr .945fr; padding:37px 0 30px; }
.service-index a { position:relative; display:block; text-decoration:none; padding:0 3.2vw 7px 2.8vw; border-left:1px solid var(--line); }
.service-index a:first-child { padding-left:13px; border:0; }
.service-index a:hover strong { text-decoration:underline; text-underline-offset:.2em; }
.service-number { display:block; color:#748294; font-size:clamp(23px,2.2vw,35px); font-weight:750; line-height:1; margin-bottom:13px; }
.service-index strong span { display:inline-block; }
.service-index strong { display:block; font-size:clamp(17px,1.79vw,28px); font-feature-settings:"palt"; letter-spacing:.01em; line-height:1.4; margin-bottom:10px; white-space:nowrap; }
.service-arrow { position:absolute; right:2.2vw; bottom:2px; font-size:34px; line-height:1; font-weight:300; transition:transform .2s; }
.service-index a:hover .service-arrow { transform:translateX(5px); }
@media (max-width:1100px) {
  .company-name { display:none; }
  .hero { height:565px; }
  .hero-copy { padding-top:62px; width:57%; }
  .hero h1 { font-size:88px; }
  .lead { font-size:16px; margin-bottom:34px; }
  .hero-art { width:58%; top:38px; }
  .service-index strong { white-space:normal; }
}
@media (max-width:720px) {
  .mast { position:relative; height:auto; min-height:110px; flex-wrap:wrap; padding:16px 5%; gap:12px; }
  .brand-lockup { gap:14px; }
  .wordmark { width:154px; }
  .company-name { display:block; font-size:14px; padding-left:13px; }
  .mast nav { justify-content:space-between; width:100%; font-size:13px; gap:10px; }
  .mast .nav-contact { padding:8px 14px; }
  .hero { height:auto; padding-bottom:0; }
  .hero-copy { width:90%; margin:0 5%; padding-top:35px; }
  .hero h1 { font-size:clamp(66px,15.5vw,104px); line-height:1.12; margin-bottom:22px; }
  .lead { font-size:15px; margin-bottom:25px; }
  .lead .l { display:inline; }
  .hero-actions { gap:12px; }
  .action { width:166px; min-height:49px; max-width:none; font-size:18px; padding:8px 16px; }
  .action.dark { width:148px; }
  .hero-art { position:relative; width:100%; top:auto; margin-top:24px; aspect-ratio:906/520; }
  .hero-art img { top:-20.9615%; }
  .service-index { display:block; margin:0 5%; padding:0; }
  .service-index a,.service-index a:first-child { border-left:0; border-bottom:1px solid var(--line); padding:24px 38px 24px 44px; }
  .service-number { position:absolute; left:0; top:28px; font-size:22px; }
  .service-index strong { font-size:19px; white-space:normal; }
  .service-arrow { right:0; bottom:24px; font-size:28px; }
}
/* Narrowest phones: the headline keeps its two lines instead of breaking inside 問いから、 */
@media (max-width:360px) { .company-name { font-size:12px; } .wordmark { width:135px; } .action { max-width:50%; } .hero h1 { font-size:clamp(52px,17.6vw,66px); } }

/* 4. Tokens and primitives for everything below the first view */
@font-face { font-family:"Qrevo Display"; src:url("assets/qrevo-display.woff2") format("woff2"); font-weight:700 900; font-display:swap; }
:root {
  --navy-2:#0c2140; --on-ink:#c5cfdb; --on-ink-muted:#9fb0c3; --ink-line:rgba(255,255,255,.22);
  --edge:3.8%; --rule-edge:3%; --gap:clamp(20px,2.5vw,40px); --section:clamp(80px,8.6vw,140px);
  --display:"Qrevo Display","Qrevo JP",sans-serif; --ease:cubic-bezier(.2,.6,.2,1);
}
@view-transition { navigation:auto; }
.shell { padding-inline:var(--edge); }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); }
.ruled::before { content:""; display:block; margin-inline:var(--rule-edge); border-top:1px solid var(--rule); }
[id] { scroll-margin-top:clamp(96px,8vw,130px); }
h2,h3,h4 { font-feature-settings:"palt"; letter-spacing:.02em; }
.ph { display:inline-block; }
.sec-title { font-size:clamp(26px,2.8vw,40px); font-weight:900; letter-spacing:.03em; line-height:1.35; margin:0; }
.no { display:block; color:#748294; font-family:var(--display); font-size:clamp(18px,1.6vw,24px); font-weight:800; line-height:1; }
.note { color:var(--muted); font-size:13px; line-height:1.9; }
.tag { display:inline-block; border:1px solid var(--rule); padding:1px 12px; color:var(--ink); font-size:12px; font-weight:700; line-height:1.8; white-space:nowrap; }
.copy p,.copy li { color:var(--text); }
.copy p { max-width:40em; margin-bottom:1.4em; }
.copy p:last-child { margin-bottom:0; }
.copy.after { margin-top:clamp(24px,2.6vw,36px); }
/* Japanese line endings: no one-character last lines; short copy breaks between phrases where supported.
   Safari has no auto-phrase: the prominent lines carry .ph marks instead, and strict line breaking keeps
   long vowel marks and small kana off the start of a line everywhere. */
body { line-break:strict; }
.copy p,.group-lead,.opener-lead p,.page-head-lead,.lead-text,.dir-desc,.rows p,.rows dd,.steps p,.facts dd,.note,.inquiry-body p,.news-title,.news-body h2,.news-body p { text-wrap:pretty; word-break:auto-phrase; overflow-wrap:anywhere; }
/* The first view's menu gained a fourth entry; keep it on one line on the narrowest phones.
   The line height keeps the header exactly as tall as before (13px x 1.8), so the hero below it does not move by a fraction of a pixel. */
@media (max-width:360px) { .mast nav { font-size:12px; line-height:1.95; gap:6px; } .mast .nav-contact { padding:8px 10px; } }

/* 5. Links and buttons */
.ico { width:1.5em; height:1.5em; flex:none; transition:transform .2s var(--ease); }
.more { display:inline-flex; align-items:center; gap:12px; padding-block:8px; border-bottom:1px solid currentColor; text-decoration:none; font-size:15px; font-weight:700; line-height:1.5; }
.more:hover .ico { transform:translateX(5px); }
.more.ext:hover .ico { transform:translate(3px,-3px); }
.btn { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:60px; min-width:240px; padding:12px 22px 12px 26px; border:1px solid var(--ink); background:var(--ink); color:#fff; text-decoration:none; font-size:16px; font-weight:700; line-height:1.4; transition:background-color .2s,color .2s,border-color .2s; }
.btn:hover { background:#fff; color:var(--ink); }
.btn:hover .ico { transform:translateX(5px); }
.btn.ext:hover .ico { transform:translate(3px,-3px); }
.btn.lime { border-color:var(--lime); background:var(--lime); color:var(--ink); }
.btn.lime:hover { background:#fff; }
.btn.line { background:transparent; color:var(--ink); }
.btn.line:hover { background:var(--ink); color:#fff; }
.actions { display:flex; flex-wrap:wrap; gap:16px 20px; }

/* 6. Top page: businesses, with the screen of the selected service beside the list */
.home-business { padding-bottom:var(--section); }
.home-business .sec-head { padding-top:clamp(56px,6vw,96px); }
.sec-head { align-items:end; padding-bottom:clamp(36px,4.4vw,72px); }
.sec-head .sec-title { grid-column:1 / span 5; }
.sec-more { grid-column:7 / -1; justify-self:end; margin:0; }
.showcase { display:block; }
.stage { display:none; }
.group { padding-top:clamp(24px,2.6vw,36px); border-top:1px solid var(--ink); }
.group + .group { margin-top:clamp(56px,6vw,96px); }
.group-head { display:flex; align-items:baseline; gap:clamp(14px,1.4vw,20px); }
.group-head h3 { font-size:clamp(18px,1.6vw,22px); font-weight:800; line-height:1.5; margin:0; }
.group-lead { color:var(--text); font-size:15px; margin:clamp(12px,1.2vw,18px) 0 0; max-width:34em; }
.item { padding-block:clamp(32px,3.6vw,56px); border-bottom:1px solid var(--line); }
.group .item:last-child { border-bottom:0; padding-bottom:0; }
.item h4 { position:relative; font-size:clamp(24px,2.4vw,36px); font-weight:900; line-height:1.35; margin:0 0 8px; }
.item h4 a { text-decoration:none; }
.item h4 a:hover { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.22em; }
.item-cat { color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.04em; line-height:1.7; margin-bottom:clamp(14px,1.4vw,20px); }
.item-links { display:flex; flex-wrap:wrap; gap:10px 32px; margin:0; }
.item .item-fig { margin-bottom:clamp(24px,2.6vw,36px); }
.showcase-note { margin:clamp(28px,3vw,44px) 0 0; }

/* 6-1. Figures: the real screen of each service on that service's ground colour */
.fig { position:relative; overflow:hidden; overflow:clip; margin:0; aspect-ratio:16 / 10; background:var(--paper); }
.fig-logo { position:absolute; left:6.5%; top:8%; z-index:1; }
.fig-logo img { display:block; width:auto; height:clamp(22px,2.7vw,44px); }
.fig-screen { position:absolute; left:11%; top:27%; width:96%; overflow:hidden; border-radius:clamp(5px,.6vw,9px) 0 0 0; box-shadow:0 0 0 1px rgba(6,21,43,.1),0 24px 48px -28px rgba(6,21,43,.24); }
.fig-screen img,.fig-video { display:block; width:100%; height:auto; }
.fig-houday-ai { background:#faf3e4; }
.fig-houday-ai .fig-logo img { height:clamp(34px,4.1vw,66px); }
.fig-houday-ai .fig-screen { top:33%; }
.fig-mieru-ai { background:#f3e9f0; }
.fig-toybaco { background:#f4ecdf; }
.fig-toybaco .fig-logo img { height:clamp(34px,4.1vw,66px); }
.fig-toybaco .fig-screen { top:33%; }
.fig-l-log { background:#e9e1d3; }
/* Manaque is a game screen: it is shown whole, never cropped. */
.fig-manaque { background:#14162a; }
.fig-manaque .fig-logo img { height:clamp(13px,1.5vw,24px); }
.fig-manaque .fig-screen { left:12%; top:24%; width:76%; border-radius:clamp(4px,.5vw,8px); box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.7); }
.fig-marketing { background:#eff1f4; }
.fig-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
a.fig { display:block; }

/* 6-2. Top page: the way to the company information */
.home-company > .shell { padding-block:clamp(48px,5.2vw,84px); }
.jump-list { grid-column:4 / -1; list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.jump-list li { border-bottom:1px solid var(--line); }
.jump-list a { display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding-block:clamp(20px,2vw,30px); text-decoration:none; font-size:clamp(15px,1.2vw,17px); font-weight:600; line-height:1.8; }
.jump-list a:hover { text-decoration:underline; text-underline-offset:.3em; }
.jump-list a:hover .ico { transform:translateX(5px); }

/* 6-3. Top page: notices */
.home-news { padding-block:clamp(48px,5.2vw,84px); }
.sec-side { grid-column:1 / span 3; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2vw,28px); }
.news-wrap { grid-column:4 / -1; }
.news-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.news-list li { border-bottom:1px solid var(--line); }
.news-list a { display:grid; grid-template-columns:8.5em 6.5em minmax(0,1fr) auto; column-gap:var(--gap); align-items:baseline; padding-block:clamp(20px,2vw,30px); text-decoration:none; }
.news-list time,.news-meta time { color:var(--muted); font-size:14px; font-weight:600; line-height:1.8; white-space:nowrap; }
.news-list .tag { justify-self:start; }
.news-title { font-size:clamp(15px,1.2vw,17px); font-weight:600; line-height:1.8; }
.news-list a:hover .news-title { text-decoration:underline; text-underline-offset:.3em; }
.news-list .ico { align-self:center; }
.news-list a:hover .ico { transform:translateX(5px); }

/* 7. Entrances: a short fade, only when the script has confirmed it can show the block again */
.reveal { transition:opacity .5s var(--ease),transform .5s var(--ease); }
.motion .reveal:not(.in) { opacity:0; transform:translateY(12px); }

/* 8. Facts */
.facts { margin:0; border-top:1px solid var(--ink); }
.facts > div { display:grid; grid-template-columns:minmax(6.5em,2fr) 7fr; column-gap:var(--gap); padding-block:clamp(22px,2.2vw,32px); border-bottom:1px solid var(--line); }
.facts dt { color:var(--muted); font-size:14px; font-weight:700; line-height:1.9; }
.facts dd { margin:0; color:var(--ink); font-size:clamp(16px,1.25vw,18px); font-weight:500; line-height:1.9; }
.facts dd a { text-decoration-thickness:1px; }

/* 9. Inquiry band: the mark as a background shape */
.inquiry { position:relative; overflow:hidden; background:var(--ink); color:#fff; padding-block:clamp(72px,8vw,136px); }
.inquiry .shell { position:relative; z-index:1; }
.inquiry .sec-title { grid-column:1 / span 4; }
.inquiry-body { grid-column:5 / span 5; }
.inquiry-body p { color:var(--on-ink); font-size:clamp(15px,1.2vw,18px); margin-bottom:clamp(24px,2.6vw,36px); }
.inquiry-mail { display:block; width:fit-content; margin-top:clamp(24px,2.6vw,36px); color:#fff; font-family:var(--display); font-size:clamp(18px,1.7vw,26px); font-weight:700; letter-spacing:.01em; text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:.35em; transition:color .2s; }
.inquiry-mail:hover { color:var(--lime); }
.inquiry a:focus-visible { outline-color:var(--lime); }
.super { position:absolute; pointer-events:none; }
.super-navy { fill:var(--navy-2); }
.super-lime { fill:var(--lime); }
.super-inquiry { right:-7%; bottom:-46%; width:min(46vw,780px); height:auto; }

/* 10. Footer */
.site-footer { background:#fff; padding-top:clamp(56px,6vw,96px); }
.footer-main { padding-bottom:clamp(48px,5vw,80px); row-gap:48px; }
.footer-brand { grid-column:1 / span 4; }
.footer-logo { display:block; position:relative; width:clamp(150px,13vw,200px); aspect-ratio:1545/430; overflow:hidden; margin-bottom:28px; }
.footer-logo img { position:absolute; width:117.865%; max-width:none; height:auto; left:-9.0615%; top:-52.7907%; }
.footer-brand p { color:var(--text); font-size:14px; line-height:1.9; margin-bottom:6px; }
.footer-brand a { font-size:14px; }
.footer-nav { grid-column:span 2; }
.footer-nav.wide { grid-column:6 / span 3; }
.footer-nav h2 { color:var(--ink); font-size:14px; font-weight:800; letter-spacing:.04em; line-height:1.7; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.footer-nav h2 a { text-decoration:none; }
.footer-nav ul { list-style:none; margin:0; padding:0; }
.footer-nav li { margin-bottom:10px; }
.footer-nav a { font-size:14px; line-height:1.7; text-decoration:none; }
.footer-nav a:hover { text-decoration:underline; }
.footer-nav .sub { color:var(--muted); font-size:12px; font-weight:600; margin:18px 0 8px; }
.footer-nav .sub:first-of-type { margin-top:0; }
.footer-nav .sub.solo a { color:var(--ink); font-size:14px; font-weight:400; }
.footer-base { display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; margin-inline:var(--rule-edge); padding:22px .8%; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.footer-policy { display:flex; flex-wrap:wrap; gap:8px 28px; list-style:none; margin:0; padding:0; }
.footer-policy a { color:var(--text); text-decoration:none; }
.footer-policy a:hover { text-decoration:underline; }
.footer-base small { font-size:12px; margin-left:auto; }
.to-top { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; text-decoration:none; }
.to-top .ico { transform:rotate(-90deg); width:1.4em; height:1.4em; }
.to-top:hover .ico { transform:rotate(-90deg) translateX(4px); }

/* 11. Sub pages: heading on navy, with a brand visual on the right */
.page-top { position:relative; overflow:hidden; background:var(--ink); color:#fff; }
.page-art { position:absolute; right:0; top:0; height:100%; width:auto; max-width:none; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 44%); mask-image:linear-gradient(to right,transparent 0,#000 44%); }
.page-top .shell { position:relative; z-index:1; }
.crumbs { display:flex; flex-wrap:wrap; gap:10px; padding-top:clamp(20px,2.2vw,32px); color:var(--on-ink-muted); font-size:12px; line-height:1.6; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs span[aria-hidden] { color:#5b6f88; }
.page-head { padding-top:clamp(48px,5.6vw,96px); padding-bottom:clamp(56px,6.6vw,112px); align-items:end; }
.page-head-title { grid-column:1 / span 7; }
.page-head h1,.mail-top h1 { font-size:clamp(32px,3.9vw,56px); font-weight:900; font-feature-settings:"palt"; letter-spacing:.02em; line-height:1.25; margin:0; }
.page-head-lead { color:var(--on-ink); font-size:clamp(15px,1.2vw,18px); line-height:2; max-width:30em; margin:clamp(20px,2.2vw,32px) 0 0; }
.page-head.product { padding-bottom:clamp(140px,16vw,300px); }
.page-head .lead-text { color:#fff; font-size:clamp(17px,1.6vw,24px); font-weight:700; font-feature-settings:"palt"; letter-spacing:.02em; line-height:1.7; max-width:24em; margin:clamp(24px,2.6vw,40px) 0 clamp(14px,1.4vw,20px); }
.page-head.product .page-head-lead { max-width:34em; margin:0 0 .6em; }
.page-head.product .actions { margin-top:clamp(24px,2.6vw,38px); }
.page-top .btn:not(.lime) { border-color:#fff; background:#fff; color:var(--ink); }
.page-top .btn:not(.lime):hover { background:transparent; color:#fff; }
.page-top a:focus-visible { outline-color:var(--lime); }
.stage-note { margin:14px 0 0; }
.product-stage { position:relative; z-index:2; margin-top:calc(clamp(80px,10.5vw,200px) * -1); padding-bottom:clamp(40px,5vw,88px); }
.product-stage .fig { aspect-ratio:2 / 1; }
.product-stage .fig-screen { left:26%; top:20%; width:68%; }
.product-stage .fig-houday-ai .fig-screen,.product-stage .fig-toybaco .fig-screen { top:20%; }
.product-stage .fig-logo { top:10%; left:5%; }
.product-stage .fig-manaque .fig-screen { left:26%; top:16%; width:68%; }
.local-nav { border-bottom:1px solid var(--line); }
.local-nav ul { display:flex; flex-wrap:wrap; gap:0 clamp(24px,3.2vw,52px); list-style:none; margin:0; padding:0 var(--edge); }
.local-nav a { display:inline-flex; align-items:center; gap:8px; padding-block:18px; border-bottom:2px solid transparent; margin-bottom:-1px; font-size:14px; font-weight:700; line-height:1.6; text-decoration:none; }
.local-nav a:hover { border-color:var(--ink); }
.local-nav .ico { width:1.1em; height:1.1em; transform:rotate(90deg); }

/* 12. Sub pages: rail sections */
.page-top + .ruled::before,.local-nav + .ruled::before { display:none; }
.rail { padding-top:clamp(40px,4vw,64px); padding-bottom:clamp(64px,7vw,112px); }
.rail > h2 { grid-column:1 / span 4; font-size:clamp(22px,2.2vw,32px); font-weight:900; line-height:1.45; margin:0 0 28px; }
.rail-body { grid-column:5 / -1; }
.rail-body.narrow { grid-column:5 / span 7; }
.rail.wide > h2,.rail.wide > .rail-body { grid-column:1 / -1; }
.rows { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.rows > li,.rows > div { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); column-gap:var(--gap); padding-block:clamp(22px,2.2vw,32px); border-bottom:1px solid var(--line); }
.rows h3,.rows dt { font-size:clamp(16px,1.35vw,19px); font-weight:800; line-height:1.7; margin:0; }
.rows p,.rows dd { color:var(--text); font-size:15px; line-height:1.95; margin:0; }
.steps { list-style:none; margin:0; padding:0; counter-reset:step; border-top:1px solid var(--ink); }
.steps li { counter-increment:step; display:grid; grid-template-columns:4.4em minmax(0,3fr) minmax(0,5fr); column-gap:var(--gap); padding-block:clamp(22px,2.2vw,32px); border-bottom:1px solid var(--line); }
.steps li::before { content:counter(step,decimal-leading-zero); color:#748294; font-family:var(--display); font-size:clamp(18px,1.6vw,24px); font-weight:800; line-height:1.4; }
.steps h3 { font-size:clamp(16px,1.35vw,19px); font-weight:800; line-height:1.7; margin:0; }
.steps h3:last-child { grid-column:2 / -1; }
.steps p { color:var(--text); font-size:15px; margin:0; }
.rail-links { display:flex; flex-wrap:wrap; gap:16px 20px; margin-top:clamp(28px,3vw,44px); }
.tint { background:var(--paper); }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.8vw,28px); }
.gallery figure { margin:0; }
.gallery img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.gallery figcaption { color:var(--text); font-size:13px; line-height:1.8; margin-top:12px; }

/* 13. Services directory */
.directory { padding-bottom:var(--section); }
.dir-head { padding-top:clamp(40px,4vw,64px); padding-bottom:clamp(32px,3.6vw,56px); align-items:end; }
.dir-head .dir-title { grid-column:1 / span 6; display:flex; align-items:baseline; gap:clamp(14px,1.4vw,20px); }
.dir-head h2 { font-size:clamp(24px,2.6vw,38px); font-weight:900; line-height:1.4; margin:0; }
.dir-head .opener-lead { grid-column:8 / -1; }
.dir-head .opener-lead p { color:var(--text); font-size:clamp(15px,1.15vw,17px); margin-bottom:.6em; }
.dir-head .opener-lead p:last-child { margin-bottom:0; }
.dir-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.dir-item { border-bottom:1px solid var(--line); }
.dir-item a { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:center; padding-block:clamp(24px,2.6vw,40px); text-decoration:none; transition:background-color .2s; }
.dir-item a:hover { background:var(--paper); }
.dir-thumb { grid-column:1 / span 3; }
.dir-thumb .fig { aspect-ratio:16 / 10; }
.dir-thumb .fig-logo { display:none; }
.dir-thumb .fig-screen { left:14%; top:16%; width:100%; box-shadow:0 0 0 1px rgba(6,21,43,.08); }
.dir-thumb .fig-manaque .fig-screen { left:8%; top:12.5%; width:84%; }
.dir-name { grid-column:4 / span 3; font-size:clamp(20px,2vw,30px); font-weight:900; font-feature-settings:"palt"; letter-spacing:.02em; line-height:1.4; }
.dir-cat { display:block; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.04em; line-height:1.7; margin-top:8px; }
.dir-desc { grid-column:7 / span 5; color:var(--text); font-size:15px; line-height:1.9; }
.dir-item .ico { grid-column:12; justify-self:end; width:28px; height:28px; margin-right:8px; }
.dir-item a:hover .ico { transform:translateX(6px); }
.dir-item a:hover .dir-name { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.22em; }
.dir-item a:hover .dir-cat { text-decoration:none; }

/* 15. Company */
.name-rows > div { align-items:center; grid-template-columns:minmax(0,2fr) minmax(0,6fr); }
.name-rows dt { font-family:var(--display); font-size:clamp(28px,3vw,44px); font-weight:800; letter-spacing:0; line-height:1.2; }
.name-rows dd { color:var(--ink); font-size:clamp(16px,1.3vw,19px); font-weight:500; }
.name-rows dd b { font-family:var(--display); font-weight:700; letter-spacing:.01em; }

/* 16. Notices page and contact */
.news-articles { padding-bottom:var(--section); }
.news-article { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); padding-block:clamp(36px,4vw,64px); border-bottom:1px solid var(--line); }
.news-meta { grid-column:1 / span 3; display:flex; flex-wrap:wrap; align-items:center; align-content:flex-start; gap:10px 18px; margin:0; padding-top:.3em; }
.news-body { grid-column:4 / span 8; }
.news-body h2 { font-size:clamp(19px,1.8vw,26px); font-weight:800; line-height:1.65; margin:0 0 clamp(16px,1.6vw,24px); }
.news-body p { color:var(--text); font-size:16px; max-width:40em; margin-bottom:.6em; }
.news-body .news-links { display:flex; flex-wrap:wrap; gap:8px 32px; margin:clamp(20px,2vw,28px) 0 0; }
.mail-top { padding-top:clamp(48px,5.6vw,96px); padding-bottom:clamp(56px,6.6vw,112px); }
.mail-top .page-head-lead { margin-bottom:clamp(28px,3vw,44px); }
.mail-address { display:inline-block; color:#fff; font-family:var(--display); font-size:clamp(22px,3vw,44px); font-weight:800; letter-spacing:0; line-height:1.3; text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:clamp(2px,.25vw,4px); text-decoration-skip-ink:none; text-underline-offset:.25em; margin-bottom:clamp(18px,1.8vw,24px); overflow-wrap:anywhere; transition:color .2s; }
.mail-address:hover { color:var(--lime); }
.mail-top .note { color:var(--on-ink); font-size:14px; margin:0; }
.route-links { display:flex; flex-wrap:wrap; gap:8px 28px; margin:0; }
.rows.routes > li { align-items:center; }
.rows.after { margin-top:clamp(24px,2.6vw,36px); }
.rows.routes .more { padding-block:6px; font-size:14px; }

/* 17. Wide and medium screens */
@media (min-width:1101px) {
  .js .showcase { display:grid; grid-template-columns:7fr 5fr; column-gap:clamp(40px,5vw,96px); align-items:start; }
  .js .stage { display:block; position:sticky; top:calc(clamp(84px,6.94vw,110px) + 28px); height:min(calc(100vh - clamp(84px,6.94vw,110px) - 56px),46vw); }
  .js .stage .fig { position:absolute; inset:0; aspect-ratio:auto; opacity:0; visibility:hidden; }
  .js .stage .fig.was-active { opacity:1; visibility:visible; }
  .js .stage .fig.is-active { opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
  .js .showcase .item .item-fig { display:none; }
  /* Wide enough to read one exchange or one table of the screen; the right edge still runs off the frame. */
  .js .stage .fig .fig-screen { left:8%; top:23%; width:112%; }
  .js .stage .fig-houday-ai .fig-screen { top:29%; }
  /* A compact chat screen: shown whole, so that one exchange can be read. */
  .js .stage .fig-toybaco .fig-screen { left:6%; top:29%; width:88%; border-radius:clamp(5px,.6vw,9px); }
  /* Whole in both directions: as wide as the stage allows, but never taller than the room below the logo. */
  .js .stage { container-type:size; }
  .js .stage .fig-manaque .fig-screen { left:50%; top:30%; width:86%; width:min(86cqw,calc(62cqh * 16 / 9)); transform:translateX(-50%); }
  .js .item:not(.is-active) h4 a { color:var(--muted); }
  .js .item.is-active h4::before { content:""; position:absolute; left:calc(clamp(20px,2.5vw,48px) * -.6); top:.3em; bottom:.3em; width:5px; background:var(--lime); }
  .js .group .item:last-child { padding-bottom:clamp(32px,3.6vw,56px); }
}
@media (max-width:1100px) {
  .sec-head .sec-title { grid-column:1 / -1; }
  .sec-more { grid-column:1 / -1; justify-self:start; margin-top:20px; }
  .sec-side { grid-column:1 / -1; flex-direction:row; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
  .news-wrap,.jump-list { grid-column:1 / -1; }
  .inquiry .sec-title { grid-column:1 / -1; margin-bottom:28px; }
  .inquiry-body { grid-column:1 / span 8; }
  .page-head-title { grid-column:1 / span 8; }
  .page-art { right:-22%; }
  .rail > h2 { grid-column:1 / -1; }
  .rail-body,.rail-body.narrow { grid-column:1 / -1; }
  .footer-brand { grid-column:1 / -1; }
  .footer-nav,.footer-nav.wide { grid-column:span 4; }
  .dir-head .dir-title { grid-column:1 / -1; }
  .dir-head .opener-lead { grid-column:1 / span 9; margin-top:20px; }
  .dir-name { grid-column:4 / span 8; }
  .dir-desc { grid-column:4 / span 8; margin-top:10px; }
  .dir-item .ico { grid-column:12; grid-row:1; }
  .news-meta { grid-column:1 / -1; margin-bottom:14px; }
  .news-body { grid-column:1 / -1; }
  .super-inquiry { width:64vw; right:-18%; bottom:-30%; }
}

/* 18. Small screens */
@media (max-width:720px) {
  :root { --edge:5%; --rule-edge:5%; --gap:16px; --section:72px; }
  [id] { scroll-margin-top:24px; }
  p { line-height:1.9; }
  .sec-title { font-size:26px; }
  .home-business .sec-head { padding-top:48px; }
  .item { padding-block:36px; }
  .item h4 { font-size:26px; }
  .sec-side { margin-bottom:24px; }
  .news-list a { grid-template-columns:auto minmax(0,1fr) auto; row-gap:8px; column-gap:14px; }
  .news-title { grid-column:1 / span 2; grid-row:2; }
  .news-list .ico { grid-column:3; grid-row:1 / span 2; }
  .facts > div { grid-template-columns:5.5em 1fr; }
  .inquiry { padding-block:64px 150px; }
  .inquiry-body { grid-column:1 / -1; }
  .super-inquiry { width:104vw; right:-34%; bottom:-12%; }
  .btn { width:100%; min-width:0; }
  .actions { gap:12px; }
  .footer-main { row-gap:36px; }
  .footer-nav { grid-column:span 6; }
  .footer-nav.wide { grid-column:1 / -1; }
  .footer-nav li { margin-bottom:0; }
  .footer-nav a { display:inline-block; padding-block:7px; }
  .footer-nav h2 a { padding-block:0; }
  .footer-base { padding-inline:0; }
  .footer-base small { margin-left:0; }
  .page-head { padding-top:40px; padding-bottom:56px; }
  .page-head h1,.mail-top h1 { font-size:32px; }
  .page-head-title { grid-column:1 / -1; }
  /* Small screens: the key visual sits below the text instead of behind it; the text ends where the visual only begins to show. */
  .page-art { top:auto; bottom:0; right:-8%; width:min(116%,520px); height:auto; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%); mask-image:linear-gradient(to bottom,transparent 0,#000 30%); }
  .page-top .page-head:not(.product),.page-top .mail-top { padding-bottom:min(74vw,332px); }
  .crumbs { align-items:center; }
  .crumbs a { padding-block:8px; }
  .page-top .page-head.product { padding-bottom:calc(30vw + 120px); }
  .product-stage { margin-top:-88px; }
  .product-stage .fig { aspect-ratio:16 / 10; }
  .product-stage .fig-screen { left:11%; top:30%; width:96%; }
  /* The taller logos need the screen to start lower, or it covers them. */
  .product-stage .fig-houday-ai .fig-screen,.product-stage .fig-toybaco .fig-screen { top:33%; }
  .product-stage .fig-manaque { aspect-ratio:4 / 3; }
  .product-stage .fig-manaque .fig-screen { left:6%; top:22%; width:88%; }
  .local-nav ul { gap:0 24px; }
  .local-nav a { padding-block:14px; font-size:13px; }
  .rail { padding-top:32px; padding-bottom:56px; }
  .rail > h2 { font-size:22px; margin-bottom:20px; }
  .rows > li,.rows > div { display:block; padding-block:20px; }
  .rows h3,.rows dt { margin-bottom:6px; }
  .name-rows > div { display:grid; grid-template-columns:5.5em 1fr; }
  .steps li { grid-template-columns:3em 1fr; }
  .steps p { grid-column:2; margin-top:6px; }
  .gallery { grid-template-columns:minmax(0,1fr); gap:28px; }
  .dir-head .opener-lead { grid-column:1 / -1; }
  .dir-item a { position:relative; display:block; padding:24px 40px 24px 0; }
  .dir-thumb { display:block; margin-bottom:16px; }
  .dir-name { font-size:22px; }
  .dir-desc { display:block; margin-top:10px; font-size:14px; }
  .dir-item .ico { position:absolute; right:0; bottom:28px; width:24px; height:24px; margin:0; }
  .news-article { display:block; padding-block:32px; }
  .mail-top { padding-top:40px; padding-bottom:56px; }
  .mail-address { font-size:clamp(20px,6.6vw,30px); }
}

/* 19. Reduced motion and print */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  @view-transition { navigation:none; }
}
@media print {
  .mast { position:static; }
  .inquiry,.page-top { background:#fff; color:var(--ink); }
  .super,.page-art { display:none; }
  .inquiry-body p,.inquiry-mail,.page-head-lead,.crumbs,.page-head .lead-text,.mail-address,.mail-top .note { color:var(--ink) !important; }
  .inquiry-mail,.mail-address { text-decoration-color:var(--ink); }
  .btn.lime,.page-top .btn { border-color:var(--ink); }
  .reveal { opacity:1 !important; transform:none !important; }
}