@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#202221;--paper:#F2F3F7;--coral:#f96758;--lime:#d9ed91;--lav:#c9baf0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk','Noto Sans JP',sans-serif}a{color:inherit;text-decoration:none}button,summary{cursor:pointer}button{font:inherit}header{height:88px;margin:16px;display:flex;align-items:center;padding:0 30px;background:#fff;border-radius:14px;gap:35px;position:relative;z-index:10}.brand{display:flex;gap:15px;align-items:center;font-size:15px;line-height:1.05;font-weight:800;letter-spacing:-.5px}.brand small{display:block;font-size:8px;letter-spacing:1.1px;margin-top:6px}.symbol{font-size:52px;font-weight:800;letter-spacing:-8px;display:flex;align-items:center}.symbol span{font-size:42px;margin-left:5px;color:var(--coral)}nav{margin-left:auto;display:flex;gap:32px;font-size:12px;font-weight:700}nav a:hover{color:#c83b30}.header-contact{background:var(--ink);color:white;padding:15px 20px;font-size:11px;border-radius:30px;display:flex;gap:35px}.menu{display:none;border:0;background:none;font-size:24px}.hero{position:relative;margin:0 16px;height:min(720px,77vw);min-height:590px}.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:100%}.panel{border-radius:12px;position:relative;overflow:hidden;background-image:url('assets/campaign.png');background-size:300% 100%;background-repeat:no-repeat}.p1{background-color:var(--coral);background-position:left}.p2{background-color:var(--lime);background-position:center}.p3{background-color:var(--lav);background-position:right}.panel:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#0008)}.outline{position:absolute;left:12%;top:6%;font-size:19vw;color:#fff1;-webkit-text-stroke:1px #ffffff60;font-weight:700;line-height:1}.panel-label{position:absolute;right:15px;top:24px;writing-mode:vertical-rl;font-size:9px;letter-spacing:2px;z-index:1}.hero-copy{position:absolute;left:4%;bottom:100px;color:#fff;z-index:2}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:600}.hero h1{font-size:clamp(48px,6.5vw,98px);line-height:1.22;margin:18px 0;letter-spacing:-.05em;font-weight:900}.dot{color:var(--coral)}.hero h1 .dot{color:var(--lime)}.hero-en{font-size:14px;letter-spacing:2px;font-weight:600}.hero-bottom{position:absolute;bottom:26px;left:4%;right:3%;display:flex;justify-content:space-between;color:white;font-size:11px;z-index:3;letter-spacing:1px}.hero-bottom a span{margin-left:22px}.ticker{overflow:hidden;padding:30px 0;border-bottom:1px solid #d5d5ce;white-space:nowrap}.ticker div{font-size:clamp(30px,4.5vw,70px);font-weight:600;letter-spacing:-2px;animation:ticker 35s linear infinite;width:max-content}.ticker span{color:var(--coral);padding:0 35px}@keyframes ticker{to{transform:translateX(-35%)}}.section{padding:100px 7%}.section-tag{font-size:11px;font-weight:700;letter-spacing:1.5px}.about{display:grid;grid-template-columns:1fr 3fr;gap:30px;padding-top:120px;padding-bottom:120px}.about h2{font-size:clamp(28px,3.5vw,52px);line-height:1.65;margin:0 0 40px;letter-spacing:-2px}.highlight{background:linear-gradient(transparent 65%,var(--lime) 65%)}.about-bottom{display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:30px}.cross-art{font-size:160px;line-height:1;color:var(--coral);transform:rotate(-15deg)}p{line-height:2;font-size:14px}.draft-note{font-size:10px;color:#767870}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:60px}.english-title{font-size:clamp(48px,6vw,86px);line-height:1.03;margin:25px 0;font-weight:600;letter-spacing:-4px}.english-title>span:not(.dot){color:#8f9189}.section-top p{margin:0 0 10px}.section-top small{display:block;font-size:10px;margin-top:18px;color:#75776f}.business{background:#eaece5}.business-list{border-top:1px solid #aeb0a7}.business-row{border-bottom:1px solid #aeb0a7}.business-row summary{list-style:none;display:flex;gap:45px;align-items:center;padding:30px 0}.business-row summary::-webkit-details-marker{display:none}.num{font-size:14px;align-self:flex-start;padding-top:4px}.business-row small{font-size:10px;letter-spacing:1.5px}.business-row h3{font-size:27px;margin:8px 0;font-weight:600}.toggle{margin-left:auto;font-size:28px}.business-row[open] .toggle{transform:rotate(45deg)}.business-detail{padding:0 0 38px 65px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.business-art{height:250px;border-radius:10px;padding:28px;overflow:hidden}.business-art>span{font-size:60px;line-height:.95;font-weight:700;letter-spacing:-3px}.coral{background:var(--coral)}.lime{background:var(--lime)}.lavender{background:var(--lav)}.spark{float:right;font-size:100px;color:#fee7d7}.business-detail h4{font-size:23px;margin:0}.business-detail p{color:#575a52}.category{font-size:10px;border-bottom:1px solid #999;padding-bottom:5px}.statement{background:var(--lav);padding:95px 12%;position:relative;overflow:hidden}.statement>p{font-size:11px;letter-spacing:2px}.statement h2{font-size:clamp(36px,4.5vw,65px);line-height:1.45;position:relative;z-index:1;margin:20px 0}.statement>span{font-size:13px;line-height:2}.statement-cross{position:absolute;font-size:600px;line-height:1;right:4%;top:-35px;color:#eee6ff88;transform:rotate(-15deg)}.news{display:grid;grid-template-columns:1fr 2fr;gap:65px}.news .english-title,.company .english-title{font-size:65px}.news-list{border-top:1px solid #bbbdb5}.news-list details{border-bottom:1px solid #bbbdb5}.news-list summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:15px;padding:25px 0}.news-list time{font-size:11px;color:#777}.badge{border:1px solid #b9bcb1;padding:3px 9px;font-size:9px;border-radius:20px}.news-list h3{font-size:13px;font-weight:500;width:calc(100% - 40px);margin:0}.news-list summary>span:last-child{margin-left:auto}.news-list details>p{font-size:12px;margin:0 0 25px}.company{border-top:1px solid #d5d5ce;display:grid;grid-template-columns:1fr 1.1fr;gap:50px}.company dl{margin:0}.company dl>div{display:grid;grid-template-columns:110px 1fr;border-bottom:1px solid #c4c6bd;padding:23px 0;font-size:12px}.company dt{color:#797b71}.company dd{margin:0}.contact{background:var(--lime);text-align:center;border-radius:18px;margin:0 16px}.contact h2{font-size:clamp(32px,4vw,56px);line-height:1.5}.contact button{border:0;background:var(--ink);color:#fff;border-radius:50px;padding:23px 35px;width:330px;max-width:100%;text-align:left;font-size:15px}.contact button span{float:right}.contact>p{font-size:11px}footer{padding:55px 5%;display:flex;align-items:center;gap:40px}footer>div{margin-left:auto;text-align:right}footer p{font-size:9px}.prototype{color:#777}.back-top{width:40px;height:40px;border:1px solid #bfc2b6;border-radius:50%;display:grid;place-items:center}dialog{border:0;border-radius:16px;padding:50px;max-width:90%;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#0008}dialog h2{font-size:22px}dialog p{font-size:13px}.close-dialog{position:absolute;right:15px;top:12px;border:0;background:none;font-size:28px}.dialog-ok{background:var(--ink);color:white;border:0;padding:12px 30px;border-radius:30px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #2874c4;outline-offset:5px}@media(max-width:800px){header{height:76px;padding:0 20px;gap:15px;margin:10px}.brand{font-size:12px}.symbol{font-size:42px}.symbol span{font-size:33px}nav{display:none;position:absolute;top:86px;left:0;right:0;background:white;padding:30px;border-radius:12px;flex-direction:column;gap:26px}nav.open{display:flex}.header-contact{margin-left:auto;font-size:9px;padding:12px;gap:15px}.menu{display:block}.hero{margin:0 10px;min-height:590px;height:75vh;max-height:800px}.panels{gap:7px;grid-template-columns:1fr 1fr}.p3{display:none}.panel{background-size:300% 100%}.hero-copy{left:6%;bottom:100px}.hero h1{font-size:clamp(44px,8.5vw,70px)}.hero-en{font-size:9px;letter-spacing:1px}.hero-bottom{font-size:9px;left:6%}.hero-bottom a{font-size:8px}.outline{font-size:35vw}.section{padding:65px 7%}.about{display:block}.about h2{margin-top:32px;font-size:29px;letter-spacing:-1px}.about-bottom{grid-template-columns:70px 1fr;gap:20px}.cross-art{font-size:90px}.about p{font-size:12px}.desktop{display:none}.section-top{display:block;margin-bottom:35px}.english-title{font-size:58px;letter-spacing:-3px}.section-top p{font-size:12px}.business-row summary{gap:20px;padding:24px 0}.business-row h3{font-size:20px}.business-row small{font-size:8px}.business-detail{padding-left:0;grid-template-columns:1fr;gap:25px}.business-art{height:220px}.business-detail h4{font-size:20px}.business-detail p{font-size:12px}.statement{padding:65px 8%}.statement-cross{font-size:360px;right:-90px;top:30px}.news,.company{display:block}.news-list,.company dl{margin-top:40px}.news .english-title,.company .english-title{font-size:55px}.contact{margin:0 10px}.contact h2{font-size:33px}footer{flex-wrap:wrap;padding:40px 7%;gap:20px}footer>div{order:3;width:100%;text-align:left;margin:0}.back-top{margin-left:auto}dialog{padding:40px 25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker div{animation:none}}

/* A viewport-height stage with independent colors and transparent portrait layers. */
.hero { --header-space: 120px; --intro-start: .15s; --intro-step: .45s; --intro-duration: .45s; --copy-start: calc(var(--intro-start) + 3 * var(--intro-step)); height: calc(100vh - var(--header-space) - 16px); height: calc(100dvh - var(--header-space) - 16px); min-height: 0; max-height: none; }
.panel { background-image: none; }
.portrait { position: absolute; inset: 12px 0 0; width: 100%; height: calc(100% - 12px); overflow: hidden; z-index: 1; }
.panel::after { z-index: 2; }
.panel-label { z-index: 3; }
.outline { z-index: 0; }
.hero-copy { bottom: clamp(55px, 12dvh, 100px); }
.hero h1 { font-size: clamp(36px, min(6.5vw, 12dvh), 98px); }
@media (max-width: 800px) {
  .hero { --header-space: 96px; height: calc(100vh - var(--header-space) - 10px); height: calc(100dvh - var(--header-space) - 10px); }
  .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p3 { display: block; }
  .panel-label { font-size: 7px; right: 8px; top: 15px; letter-spacing: 1px; }
  .outline { font-size: 24vw; }
  .hero h1 { font-size: clamp(32px, min(8.5vw, 12dvh), 70px); }
}
@media (max-height: 460px) {
  .hero-copy { bottom: 35px; }
  .hero h1 { font-size: clamp(24px, 9dvh, 42px); margin: 7px 0; }
  .eyebrow, .hero-en { font-size: 8px; margin: 5px 0; }
  .hero-bottom { bottom: 10px; font-size: 8px; }
}
/* Four beats on one timeline: left, center, right, then headline. */
@media (prefers-reduced-motion: no-preference) {
  .panels { overflow: hidden; border-radius: 12px; }
  .panel { transform-origin: center center; animation: panel-rise var(--intro-duration) cubic-bezier(.22,1,.36,1) var(--entry-delay) both; }
  .p1 { --entry-delay: var(--intro-start); --entry-angle: 1.4deg; }
  .p2 { --entry-delay: calc(var(--intro-start) + var(--intro-step)); --entry-angle: -1.4deg; }
  .p3 { --entry-delay: calc(var(--intro-start) + 2 * var(--intro-step)); --entry-angle: 1.4deg; }
  .panel::before { content: ''; position: absolute; inset: 0; z-index: 4; background: #fff; pointer-events: none; animation: panel-clear .3s ease-out var(--entry-delay) both; }
  .hero-copy { transform-origin: center center; animation: headline-rise var(--intro-duration) cubic-bezier(.22,1,.36,1) var(--copy-start) both, headline-opacity .3s ease-out var(--copy-start) both; }
  .hero-bottom { animation: hero-copy-in .3s ease-out var(--copy-start) both; }
  .intro-pending .panel, .intro-pending .panel::before, .intro-pending .hero-copy, .intro-pending .hero-bottom { animation-play-state: paused; }
}
@keyframes panel-rise {
  from { transform: translateY(20px) rotate(var(--entry-angle)); opacity: 0; }
  5% { opacity: 1; }
  to { transform: translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes panel-clear {
  from { opacity: .45; }
  18% { opacity: .72; }
  to { opacity: 0; }
}
@keyframes hero-copy-in {
  from { transform: translateY(32px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes headline-rise {
  from { transform: translateY(20px) rotate(1.4deg); }
  to { transform: translateY(0) rotate(0deg); }
}
@keyframes headline-opacity {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Small screens: one full-width portrait, advancing every two seconds. */
@media (max-width: 800px) {
  .hero { --intro-start: 0s; --copy-start: var(--intro-start); }
  .panels { display: block; position: relative; }
  .panel { display: block; position: absolute; inset: 0; opacity: 0; visibility: hidden; animation: none; }
  .panel::before { animation: none; opacity: 0; }
  .panel.is-active { opacity: 1; visibility: visible; }
  .panel-label { font-size: 9px; right: 16px; top: 20px; letter-spacing: 1.5px; }
  .outline { font-size: min(65vw, 50dvh); }
}
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .panel.is-active { animation: panel-rise var(--intro-duration) cubic-bezier(.22,1,.36,1) 0s both; }
  .panel.is-active::before { animation: panel-clear .3s ease-out 0s both; }
  .hero:has(.p1.is-active) .p1 { animation-delay: var(--intro-start); }
  .hero:has(.p1.is-active) .p1::before { animation-delay: var(--intro-start); }
}

/* Fixed overlay: the page continues scrolling beneath this white panel. */
.floating-menu { position: fixed; z-index: 30; top: 16px; right: 16px; bottom: 16px; width: clamp(240px, 23vw, 320px); padding: 26px 24px; border-radius: 14px; background: #fff; box-shadow: 0 12px 40px #20222112; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; transform: translateX(calc(100% + 32px)); visibility: hidden; transition: transform .55s cubic-bezier(.22,1,.36,1), visibility .55s; }
.floating-menu.is-visible { transform: translateX(0); visibility: visible; }
.floating-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #e9e9e3; }
.floating-menu .brand { gap: 10px; font-size: 11px; }
.floating-menu .symbol { font-size: 35px; letter-spacing: -6px; }
.floating-menu .symbol span { font-size: 28px; }
.floating-menu .brand small { font-size: 6px; letter-spacing: .6px; }
.floating-menu-close { flex: 0 0 28px; width: 28px; height: 32px; padding: 0; background: none; border: 0; font-size: 24px; color: #797c76; }
.floating-menu-nav { position: static; display: flex; flex-direction: column; gap: 0; margin: 26px 0; padding: 0; background: none; border-radius: 0; }
.floating-menu-nav a { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 17px 0; border-bottom: 1px solid #eee; }
.floating-menu-nav a>span { font-size: 16px; letter-spacing: .5px; }
.floating-menu-nav small { grid-column: 1; font-size: 10px; font-weight: 400; color: #82857b; }
.floating-menu-nav b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 14px; font-weight: 400; }
.floating-menu-bottom { margin-top: auto; padding-top: 25px; }
.floating-menu-bottom p { font-size: 14px; font-weight: 700; line-height: 1.8; }
.floating-menu-contact { display: flex; align-items: center; justify-content: space-between; padding: 18px; background: var(--lime); border-radius: 8px; font-size: 12px; font-weight: 600; }
.floating-menu-contact:hover { background: #cce279; }
.floating-menu-top { display: block; margin-top: 22px; font-size: 9px; letter-spacing: 1px; color: #7b7e74; }
@media (max-width: 800px) { .floating-menu { top: 10px; right: 10px; bottom: 10px; width: min(260px, calc(100vw - 40px)); padding: 22px; } }
@media (max-height: 600px) { .floating-menu { padding: 18px; } .floating-menu-head { padding-bottom: 14px; } .floating-menu-nav { margin: 8px 0; } .floating-menu-nav a { padding: 10px 0; } .floating-menu-bottom { padding-top: 8px; } .floating-menu-bottom p { margin: 8px 0; font-size: 12px; } .floating-menu-top { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .floating-menu { transition: none; } }

/* Follow the bottom edge of the hero until the menu reaches the top gutter. */
.floating-menu { top: var(--floating-top, 100dvh); bottom: auto; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
@media (max-width: 800px) { .floating-menu { top: var(--floating-top, 100dvh); bottom: auto; height: calc(100vh - 20px); height: calc(100dvh - 20px); } }

/* Mobile: a light bottom dock instead of the desktop side rail. */
.mobile-dock { display: none; }
@media (max-width: 800px) {
  .mobile-dock { display: flex; gap: 8px; position: fixed; z-index: 40; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); height: 64px; visibility: hidden; opacity: 0; transform: translateY(110px); transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .35s ease-out, visibility .4s; }
  .mobile-dock.is-visible { visibility: visible; opacity: var(--dock-opacity, 1); transform: translateY(var(--dock-offset, 0px)); }
  .mobile-dock-toggle { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 5px 25px #0000000c; }
  .mobile-dock-toggle>span { font-size: 23px; line-height: 1; }
  .mobile-dock-toggle small { font-size: 8px; letter-spacing: .7px; }
  .mobile-dock-contact { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px 14px; background: #fff; color: var(--ink); border-radius: 12px; box-shadow: 0 5px 25px #0000000c; }
  .mobile-dock-contact>span { font-size: 10px; }
  .mobile-dock-contact strong { font-size: 13px; }
  .mobile-dock-contact strong span { margin-left: 18px; color: #809e3a; }
  .floating-menu { top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 74px); left: 10px; right: 10px; width: auto; height: auto; max-height: calc(100dvh - 110px); opacity: 0; visibility: hidden; transform: translateY(20px); transition: transform .3s ease-out, opacity .3s, visibility .3s; }
  .floating-menu.is-mobile-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .floating-menu-nav { margin: 12px 0; }
  .floating-menu-nav a { padding: 12px 0; }
  .floating-menu-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mobile-dock, .floating-menu { transition: none; } }

/* Only one row is visible while two opposing marquees trade places vertically. */
.about { position: relative; overflow: hidden; isolation: isolate; }
.about>.section-tag, .about-content { position: relative; z-index: 1; }
.about-marquee-window { --marquee-row-height: clamp(80px, 12vw, 180px); position: absolute; top: 50%; left: 0; width: 100%; height: var(--marquee-row-height); transform: translateY(-50%); overflow: hidden; pointer-events: none; z-index: 0; }
.about-marquee-reel { transform: translateY(calc(-1 * var(--marquee-row-height) * var(--background-row-progress, 0))); transition: transform 1.2s ease-out; }
.about-marquee-row { height: var(--marquee-row-height); overflow: hidden; }
.about-marquee-track { display: flex; width: max-content; white-space: nowrap; color: #fff; font-size: var(--marquee-row-height); font-weight: 700; line-height: 1; letter-spacing: -.06em; }
.about-marquee-track>span { flex: 0 0 auto; }
.about-marquee-track.to-right { animation: about-drift-right 42s linear infinite; }
.about-marquee-track.to-left { animation: about-drift-left 42s linear infinite; }
@keyframes about-drift-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes about-drift-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes about-row-swap {
  0%, 40% { transform: translateY(0); }
  50%, 90% { transform: translateY(calc(-1 * var(--marquee-row-height))); }
  100% { transform: translateY(calc(-2 * var(--marquee-row-height))); }
}
@media (max-width: 800px) { .about-marquee-window { --marquee-row-height: clamp(76px, 18vw, 130px); top: 48%; } }
@media (prefers-reduced-motion: reduce) { .about-marquee-reel, .about-marquee-track.to-left, .about-marquee-track.to-right { animation: none; } }
@media (prefers-reduced-motion: reduce) { .about-marquee-reel { transition: none; } }

/* The one-row window stays at the viewport center while section copy scrolls. */
.about-marquee-window { position: fixed; top: 50%; clip-path: inset(var(--about-clip-top, 0px) 0 var(--about-clip-bottom, 0px) 0); }
@media (max-width: 800px) { .about-marquee-window { top: 50%; } }

/* One shared backdrop stays visible through the open page layout. */
body { isolation: isolate; }
main, footer { position: relative; z-index: 1; }
.about-marquee-window { z-index: 0; visibility: visible; clip-path: none; transform: translateY(calc(-50% + var(--background-scroll-offset, 100vh))); }
.business, .statement, .contact, .news, .company, .about, footer { background: transparent; }

/* A large closing navigation card with a continuous brand message. */
footer.site-footer { display: block; margin: 75px calc(clamp(240px, 23vw, 320px) + 48px) 16px 16px; padding: 48px 40px 0; background: #fff; border-radius: 14px; overflow: hidden; }
.site-footer .footer-nav { display: flex; position: static; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 65px; padding: 0; background: none; }
.footer-nav a { display: flex; align-items: baseline; gap: 14px; line-height: 1.08; padding: 3px 0; }
.footer-nav a>span { font-size: clamp(36px, 4.4vw, 68px); font-weight: 700; letter-spacing: -2px; }
.footer-nav small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.footer-nav a:hover { color: var(--coral); }
.site-footer .footer-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; text-align: left; }
.footer-wordmark { display: block; font-size: clamp(50px, 7.4vw, 118px); line-height: 1; font-weight: 700; letter-spacing: -.075em; white-space: nowrap; }
.footer-wordmark>span { color: var(--coral); font-size: .7em; vertical-align: .06em; margin: 0 .08em; }
.footer-page-top { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 10px; }
.footer-page-top b { width: 38px; height: 38px; border: 1px solid #c3c6bf; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 400; transition: background .2s, color .2s; }
.footer-page-top:hover b { background: var(--ink); color: #fff; }
.site-footer .footer-meta { display: flex; justify-content: space-between; gap: 15px; margin: 24px 0 0; padding-bottom: 25px; text-align: left; border-bottom: 1px solid #ededE8; }
.footer-meta p { margin: 0; font-size: 9px; color: #777c72; }
.site-footer .footer-message { margin: 0 -40px; padding: 30px 0 38px; text-align: left; overflow: hidden; }
.footer-message-track { display: flex; width: max-content; animation: footer-message-drift 35s linear infinite; }
.footer-message-track>span { flex: 0 0 auto; white-space: nowrap; font-size: clamp(34px, 5vw, 78px); font-weight: 800; line-height: 1.3; color: var(--coral); letter-spacing: -.04em; }
@keyframes footer-message-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 800px) {
  footer.site-footer { margin: 45px 10px 90px; padding: 32px 23px 0; }
  .site-footer .footer-nav { margin-bottom: 48px; }
  .footer-nav a { gap: 10px; }
  .footer-nav a>span { font-size: clamp(32px, 8vw, 54px); letter-spacing: -1px; }
  .footer-nav small { font-size: 9px; }
  .footer-wordmark { font-size: clamp(38px, 10vw, 75px); }
  .footer-page-top { flex-direction: column-reverse; gap: 5px; font-size: 8px; }
  .footer-page-top b { width: 30px; height: 30px; font-size: 17px; }
  .site-footer .footer-brand-row { gap: 12px; }
  .site-footer .footer-meta { flex-direction: column; gap: 5px; }
  .site-footer .footer-message { margin: 0 -23px; padding: 24px 0 30px; }
}
@media (prefers-reduced-motion: reduce) { .footer-message-track { animation: none; } }

/* Full-screen navigation opened from the right rail's hamburger. */
.floating-menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.floating-menu-toggle>span { display: block; width: 22px; height: 1px; background: #777c74; }
.fullscreen-menu { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 45px 6%; border: 0; border-radius: 0; overflow-y: auto; background: var(--paper); color: var(--ink); }
.fullscreen-menu::backdrop { background: var(--paper); }
.fullscreen-menu[open] { display: flex; flex-direction: column; animation: fullscreen-open .35s ease-out; }
.fullscreen-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.fullscreen-menu-close { border: 0; background: none; display: flex; flex-direction: column; align-items: center; color: #85897e; padding: 0 8px; }
.fullscreen-menu-close>span { font-size: 40px; line-height: 1; font-weight: 400; }
.fullscreen-menu-close small { font-size: 8px; letter-spacing: 1px; margin-top: 4px; }
.fullscreen-menu-content { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 10%; width: min(100%, 1080px); margin: auto; padding: 55px 0; }
.fullscreen-nav { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; padding: 0; background: none; border-radius: 0; }
.fullscreen-nav a { display: flex; align-items: baseline; gap: 14px; line-height: 1.07; }
.fullscreen-nav a>span { font-size: clamp(34px, 4.5vw, 70px); font-weight: 700; letter-spacing: -2px; }
.fullscreen-nav small { font-size: 11px; font-weight: 500; }
.fullscreen-menu[open] .fullscreen-nav a { animation: fullscreen-item .65s cubic-bezier(.22,1,.36,1) calc(.12s + var(--menu-order) * .09s) both; }
.fullscreen-contact { background: #fff; border-radius: 14px; padding: 35px; text-align: center; }
.fullscreen-contact p { font-size: 20px; font-weight: 700; line-height: 1.7; }
.fullscreen-spark { display: block; color: var(--coral); font-size: 100px; line-height: 1.5; }
.fullscreen-contact>a { display: flex; align-items: center; justify-content: space-between; background: var(--lime); border-radius: 30px; padding: 17px 22px; font-size: 13px; }
.fullscreen-menu .fullscreen-menu-copyright { margin: 0; font-size: 9px; color: #85897e; }
@keyframes fullscreen-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes fullscreen-item { from { transform: translateY(22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 800px) {
  .fullscreen-menu { padding: 25px 7%; }
  .fullscreen-menu-content { grid-template-columns: 1fr; gap: 28px; padding: 35px 0; }
  .fullscreen-nav a>span { font-size: clamp(32px, 8vw, 56px); letter-spacing: -1px; }
  .fullscreen-nav small { font-size: 10px; }
  .fullscreen-contact { padding: 20px; }
  .fullscreen-contact p { font-size: 15px; margin-top: 0; }
  .fullscreen-spark { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fullscreen-menu[open], .fullscreen-menu[open] .fullscreen-nav a { animation: none; } }

/* Two businesses, one switchable features story inspired by the About reference. */
.business-showcase { width: calc(100% - clamp(240px, 23vw, 320px) - 32px); padding: 80px 5%; }
.business-intro h2 { font-size: clamp(30px, 3.5vw, 52px); line-height: 1.55; letter-spacing: -.04em; margin: 26px 0 18px; }
.business-intro p { font-size: 13px; }
.business-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 38px 0 24px; }
.business-tabs button { border: 1px solid #dadcd3; background: #fff; color: #74786b; border-radius: 12px; padding: 20px 12px; font-size: clamp(15px, 1.7vw, 23px); font-weight: 700; letter-spacing: .02em; }
.business-tabs button span { display: block; font-size: 11px; font-weight: 500; margin-top: 6px; }
.business-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.business-feature-panel { --feature-bg: #dfedc3; --feature-ink: #3c5141; border-radius: 18px; padding: 42px 25px; background: var(--feature-bg); color: var(--feature-ink); }
.business-feature-panel[data-business="renovation"] { --feature-bg: #f8dfd3; --feature-ink: #79523f; }
.feature-heading { text-align: center; }
.feature-heading>p { font-size: 11px; letter-spacing: 2px; margin: 0 0 10px; }
.feature-heading h3 { font-size: clamp(24px, 2.4vw, 36px); margin: 0 0 15px; line-height: 1.5; }
.feature-heading .feature-description { font-size: 12px; letter-spacing: 0; line-height: 1.9; max-width: 480px; margin: 0 auto; }
.feature-orbit { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; margin: 32px auto; list-style: none; padding: 0; }
.feature-orbit::before { content: ''; position: absolute; width: 66%; height: 66%; left: 17%; top: 17%; border: 2px solid #ffffffc9; border-radius: 50%; }
.feature-orbit::after { content: 'M ×'; position: absolute; top: 41%; left: 39%; font-size: clamp(28px, 4.3vw, 65px); font-weight: 700; letter-spacing: -5px; }
.feature-orbit li { position: absolute; width: 29%; aspect-ratio: 1; border-radius: 50%; background: var(--feature-ink); color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 10px; text-align: center; transform: translate(-50%, -50%); }
.feature-orbit li:nth-child(1) { left: 30%; top: 19%; }
.feature-orbit li:nth-child(2) { left: 70%; top: 19%; }
.feature-orbit li:nth-child(3) { left: 83%; top: 59%; }
.feature-orbit li:nth-child(4) { left: 50%; top: 85%; }
.feature-orbit li:nth-child(5) { left: 17%; top: 59%; }
.feature-orbit small { font-size: clamp(7px, .8vw, 10px); background: #ffffffed; color: var(--feature-ink); padding: 3px 6px; border-radius: 4px; margin-bottom: 9px; }
.feature-orbit h4 { font-size: clamp(12px, 1.6vw, 23px); line-height: 1.45; margin: 0; }
.feature-other { padding: 28px 22px; background: #ffffffba; border-radius: 12px; }
.feature-other h4, .feature-flow h4 { font-size: 20px; margin: 0 0 22px; text-align: center; }
.feature-other h4 small, .feature-flow h4 small { display: block; font-size: 10px; font-weight: 500; margin-top: 6px; letter-spacing: 1px; }
.feature-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; }
.feature-tags li { display: grid; place-items: center; background: #fff; border-radius: 8px; padding: 20px 8px; font-size: 12px; text-align: center; }
.feature-flow { margin-top: 40px; }
.feature-flow ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 0; }
.feature-flow li { border-top: 1px solid #ffffffb3; padding-top: 20px; }
.feature-flow li>span { font-size: 10px; letter-spacing: 1px; }
.feature-flow h5 { font-size: 17px; line-height: 1.5; margin: 12px 0; }
.feature-flow li p { font-size: 11px; margin: 0; }
.feature-contact { display: flex; justify-content: space-between; align-items: center; margin: 30px auto 0; max-width: 300px; border-radius: 30px; padding: 17px 24px; background: var(--feature-ink); color: #fff; font-size: 13px; }
.business-draft { font-size: 10px; color: #74786b; margin-top: 18px; }
@media (max-width: 800px) {
  .business-showcase { width: auto; padding: 55px 5%; }
  .business-intro h2 { font-size: 30px; }
  .business-tabs { gap: 7px; }
  .business-tabs button { font-size: 16px; padding: 16px 8px; }
  .business-tabs button span { font-size: 10px; }
  .business-feature-panel { padding: 30px 12px; }
  .feature-orbit { margin: 25px auto; }
  .feature-orbit h4 { font-size: clamp(11px, 3vw, 19px); }
  .feature-orbit small { margin-bottom: 6px; font-size: 7px; padding: 2px 4px; }
  .feature-orbit::after { font-size: 35px; }
  .feature-other { padding: 24px 12px; }
  .feature-tags { grid-template-columns: repeat(2, 1fr); }
  .feature-tags li { padding: 16px 6px; font-size: 11px; }
  .feature-flow ol { grid-template-columns: 1fr; gap: 20px; }
}

/* One-time company opening, evaluated before the first page paint. */
.company-opening { display: none; }
html.opening-active { overflow: hidden; }
.opening-active .company-opening { display: grid; place-items: center; position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 10000; background: #fff; color: #202221; }
.company-opening-logo { position: relative; width: min(420px, 94vw); height: 100px; }
.company-opening-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Space Grotesk', sans-serif; font-size: 90px; font-weight: 700; line-height: 1; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.company-opening-name { position: absolute; left: calc(50% - 50px); top: 50%; transform: translate(-35px, -50%); width: 210px; clip-path: inset(0 100% 0 0); opacity: 0; font-family: 'Space Grotesk', sans-serif; font-size: 31px; line-height: 1.08; font-weight: 700; letter-spacing: -.8px; transition: transform .65s cubic-bezier(.22,1,.36,1), clip-path .65s cubic-bezier(.22,1,.36,1), opacity .3s; }
.opening-reveal .company-opening-mark { transform: translate(calc(-50% - 110px), -50%); }
.opening-reveal .company-opening-name { transform: translate(0, -50%); clip-path: inset(0 0 0 0); opacity: 1; }
@media (max-width: 400px) {
  .company-opening-mark { font-size: 72px; }
  .company-opening-name { left: calc(50% - 40px); width: 180px; font-size: 26px; }
  .opening-reveal .company-opening-mark { transform: translate(calc(-50% - 90px), -50%); }
}
@media (prefers-reduced-motion: reduce) { .company-opening-mark, .company-opening-name { transition-duration: .01s; } }

/* Pale blue brand accents and a left-to-right sweep over linked text. */
:root { --link-blue: #93d9ee; --link-glow: #d9f5ff; --contact-blue: #287fb8; }
.footer-message-track>span { color: var(--link-blue); }
a:hover, nav a:hover, .footer-nav a:hover { color: var(--link-blue); }
.link-shine-text { background-image: linear-gradient(90deg, var(--link-blue) 0%, var(--link-blue) 43%, #eafaff 50%, var(--link-original-color, var(--ink)) 57%, var(--link-original-color, var(--ink)) 100%); background-size: 240% 100%; background-position: 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: background-position .7s cubic-bezier(.22,1,.36,1), filter .7s; }
a:hover .link-shine-text, a:focus-visible .link-shine-text { background-position: 0 0; filter: drop-shadow(0 0 3px #93d9ee66); }
.floating-menu-contact:hover { background: var(--lime); }
.footer-page-top:hover b { background: #effaff; border-color: var(--link-blue); color: var(--link-blue); }
@media (prefers-reduced-motion: reduce) { .link-shine-text { transition: none; } }

.about-page-heading { position: relative; padding: 60px 7% 30px; margin-right: calc(clamp(240px, 23vw, 320px) + 32px); }
.about-page-heading>p { font-size: 10px; letter-spacing: 1px; margin: 0 0 48px; color: #777c72; }
.about-page-heading>span { display: block; font-size: clamp(70px, 12vw, 170px); font-weight: 700; line-height: 1; letter-spacing: -.07em; }
.about-page-heading h1 { font-size: 22px; margin: 20px 0; }
html[data-page="about"] .about.section { display: block; margin-right: calc(clamp(240px, 23vw, 320px) + 32px); padding: 50px 7%; }
html[data-page="about"] .about>.section-tag { margin-bottom: 25px; }
.business-home-intro h2 { font-size: clamp(28px, 3.5vw, 48px); line-height: 1.6; }
.business-home-intro .feature-contact { margin-left: 0; background: var(--ink); }
@media(max-width:800px) { .about-page-heading, html[data-page="about"] .about.section { margin-right: 0; } .about-page-heading { padding: 35px 7% 20px; } .about-page-heading>p { margin-bottom: 30px; } }

/* Inner pages use the side menu, with a small location trail at upper left. */
html[data-page] body>header { display: none; }
.page-breadcrumb { position: absolute; top: 16px; left: 16px; z-index: 5; display: block; margin: 0; padding: 7px 11px; background: #fff; border-radius: 7px; color: #61665e; font-size: 10px; font-weight: 600; letter-spacing: .3px; }
.page-breadcrumb ol { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.page-breadcrumb li { display: flex; align-items: center; }
.page-breadcrumb a { display: flex; align-items: center; }
.breadcrumb-divider { color: #b6b9b0; font-size: 14px; font-weight: 400; }
html[data-page] .about-page-heading { padding-top: 110px; }
@media (max-width: 800px) { .page-breadcrumb { top: 10px; left: 10px; } html[data-page] .about-page-heading { padding-top: 85px; } }

/* A folded-M silhouette passes upward on inner-page arrivals. */
.page-transition { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; z-index: 20000; pointer-events: none; }
.page-transition-fold { position: absolute; left: -10%; top: 0; width: 120%; height: 190dvh; background: var(--page-transition-color, #93d9ee); clip-path: polygon(0 15%, 25% 0, 50% 15%, 75% 0, 100% 15%, 100% 85%, 75% 100%, 50% 85%, 25% 100%, 0 85%); animation: folded-page-wipe 1.35s cubic-bezier(.65,0,.35,1) both; }
@keyframes folded-page-wipe { 0% { transform: translateY(110dvh); } 46%, 54% { transform: translateY(-35dvh); } 100% { transform: translateY(-210dvh); } }
@media (prefers-reduced-motion: reduce) { .page-transition { display: none; } }

/* Company uses the same inner-page frame as About. */
html[data-page="company"] .about-page-heading { padding-top: 110px; }
.company-page-content { margin-right: calc(clamp(240px, 23vw, 320px) + 32px); padding: 20px 5% 60px; }
.company-page-content>section { padding: 50px 0; }
.company-section-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 36px; }
.company-section-title h2 { font-size: 26px; margin: 0; }
.company-section-title>span { font-size: 11px; letter-spacing: 1px; }
.company-service { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center; margin-bottom: 48px; }
.company-service-art { aspect-ratio: 1.15; border-radius: 14px; padding: 28px 24px; overflow: hidden; position: relative; }
.company-service-art>span { position: relative; font-size: clamp(20px, 2.3vw, 38px); line-height: 1; letter-spacing: -1.5px; font-weight: 700; }
.system-art { background: #d9edc1; color: #3c5141; }
.space-art { background: #f8dfd3; color: #79523f; }
.company-service-art .art-cross { display: block; font-size: clamp(80px, 10vw, 150px); margin-top: 20px; line-height: .8; }
.company-service h3 { font-size: 23px; margin: 12px 0; }
.company-service p { font-size: 12px; }
.company-service .section-tag { font-size: 9px; }
.company-service a { font-size: 11px; display: inline-block; border-bottom: 1px solid #bbb; padding-bottom: 7px; margin-top: 10px; }
.company-vision-message { background: #e4dcf4; border-radius: 16px; padding: 45px 35px; text-align: center; }
.company-vision-message>span { font-size: 11px; letter-spacing: 2px; }
.company-vision-message h3 { font-size: clamp(27px, 3.2vw, 44px); line-height: 1.7; margin: 22px 0 0; }
.company-mission-title { margin: 35px 0 20px; font-size: 12px; letter-spacing: 2px; }
.company-missions { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.company-missions article { background: #ffffffc9; border-radius: 12px; padding: 25px; }
.company-missions article>span { font-size: 10px; color: #89818f; }
.company-missions h4 { font-size: 28px; margin: 12px 0; }
.company-missions p { font-size: 12px; margin: 0; }
.company-overview dl { margin: 0; }
.company-overview dl>div { display: grid; grid-template-columns: 120px 1fr; padding: 25px 0; border-bottom: 1px solid #d2d5ca; font-size: 13px; line-height: 1.8; }
.company-overview dt { color: #828677; }
.company-overview dd { margin: 0; }
.company-overview small, .company-copy-note { font-size: 10px; color: #828677; }
@media(max-width:800px) { html[data-page="company"] .about-page-heading { padding-top: 85px; } .company-page-content { margin-right: 0; padding: 0 7% 30px; } .company-service { grid-template-columns: 1fr; gap: 20px; } .company-service-art { aspect-ratio: 1.5; } .company-service-art>span { font-size: 32px; } .company-service-art .art-cross { font-size: 100px; } .company-missions article { padding: 20px 15px; } .company-missions p { font-size: 11px; } .company-overview dl>div { grid-template-columns: 85px 1fr; font-size: 12px; } .company-vision-message { padding: 35px 20px; } }

/* Centered editorial company layout, leaving room for the fixed side rail. */
html[data-page="company"] .about-page-heading { text-align: center; }
.company-page-content { width: min(680px, calc(100% - clamp(240px, 23vw, 320px) - 80px)); margin: 0 0 0 max(24px, calc((100% - clamp(240px, 23vw, 320px) - 64px - 680px) / 2)); padding: 35px 38px 55px; background: #fff; border-radius: 14px; }
.company-page-content>section { padding: 40px 0; }
.company-section-title { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-bottom: 38px; }
.company-section-title>span { font-size: 10px; }
.company-service { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 65px; }
.company-service h3 { order: 0; text-align: center; font-size: 23px; margin: 10px 0 25px; }
.company-service>.section-tag { margin: 0; text-align: center; }
.company-service-art { width: 100%; aspect-ratio: 1.8; padding: 28px; }
.company-service-art>span { font-size: clamp(25px, 3vw, 38px); }
.company-service-art .art-cross { position: absolute; right: -270px; top: 22px; margin: 0; font-size: 135px; }
.company-service .company-service-description { width: 90%; margin: 22px auto 12px; font-size: 13px; line-height: 2; }
.company-service>a { align-self: flex-start; margin-left: 5%; }
.company-vision-message { background: transparent; padding: 0 0 15px; }
.company-vision-message h3 { font-size: clamp(26px, 3vw, 38px); }
.company-mission-title { text-align: center; margin-bottom: 12px; }
.company-mission-orbit { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto 35px; }
.mission-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 10px; color: #a3a49d; letter-spacing: 1px; }
.mission-bubble { width: 35%; aspect-ratio: 1; border-radius: 50%; position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.mission-bubble:nth-child(2) { left: 50%; top: 19%; background: #f6b3ab; }
.mission-bubble:nth-child(3) { left: 81%; top: 50%; background: #a9dfef; }
.mission-bubble:nth-child(4) { left: 50%; top: 81%; background: #c9baf0; }
.mission-bubble:nth-child(5) { left: 19%; top: 50%; background: #d9ed91; }
.mission-bubble strong { font-size: clamp(20px, 2.4vw, 29px); margin-bottom: 8px; }
.mission-bubble small { font-size: 10px; line-height: 1.6; }
.company-missions article:nth-child(1) { background: #f6b3ab; }
.company-missions article:nth-child(2) { background: #a9dfef; }
.company-missions article:nth-child(3) { background: #c9baf0; }
.company-missions article:nth-child(4) { background: #d9ed91; }
.company-missions article>span { color: #555c52; }
.company-missions h4 { margin-top: 8px; }
@media(max-width:800px) {
  .company-page-content { width: calc(100% - 20px); margin: 0 10px; padding: 25px 20px 35px; }
  .company-service h3 { font-size: 21px; }
  .company-service-art { aspect-ratio: 1.6; }
  .company-service-art .art-cross { position: static; display: block; font-size: 70px; margin-top: 15px; }
  .company-service .company-service-description { width: 100%; font-size: 12px; }
  .company-service>a { margin-left: 0; }
  .mission-bubble small { font-size: 8px; }
  .mission-bubble strong { margin-bottom: 5px; }
}
.company-service-art>span { display: block; width: 100%; height: 100%; }
.company-service-art .art-cross { right: 0; top: auto; bottom: 0; }

/* News cards share the About page frame and its roomy two-column rhythm. */
html[data-page="news"] .about-page-heading { padding-top: 110px; }
.news-page-content { margin-right: calc(clamp(240px, 23vw, 320px) + 32px); padding: 15px 5% 70px; }
.news-page-lead { font-size: 13px; margin: 0 0 25px; }
.news-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.news-filters button { background: #fff; border: 1px solid #dedfe5; color: #666d74; border-radius: 30px; padding: 10px 17px; font-size: 11px; }
.news-filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.news-sample-note { font-size: 10px; color: #777e86; margin-bottom: 25px; }
.news-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.news-card { background: var(--news-card-color); padding: 15px 15px 20px; border-radius: 12px; position: relative; transform-origin: center center; }
.news-card[hidden] { display: none; }
.news-card>a { display: block; color: #252b32; }
.news-card img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; border-radius: 8px; }
.news-card-info { display: grid; grid-template-columns: 52px 1fr; gap: 10px; margin-top: 16px; }
.news-card-date strong { display: block; color: #365970; font-size: 30px; line-height: 1; letter-spacing: -1px; }
.news-card-date>span { display: block; font-size: 8px; margin-top: 5px; color: #365970; }
.news-card h2 { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.news-card ul { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; }
.news-card li { font-size: 8px; background: #ffffffdf; padding: 4px 6px; border-radius: 3px; }
.news-result-count { font-size: 11px; text-align: center; color: #7e838a; margin: 28px 0 0; }
.news-detail { padding: 45px 35px; width: min(680px, 90vw); max-height: 85dvh; overflow-y: auto; }
.news-detail h2 { line-height: 1.6; padding-right: 10px; }
.news-detail-close { position: absolute; top: 10px; right: 15px; font-size: 28px; border: 0; background: none; }
.news-detail-ok { border: 0; background: var(--ink); color: #fff; padding: 13px 24px; border-radius: 30px; font-size: 12px; margin-top: 15px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .news-card:hover, .news-card:focus-within { z-index: 2; animation: news-card-pop .65s cubic-bezier(.22,1,.36,1) both; box-shadow: 0 15px 30px #26324b1a; }
  @keyframes news-card-pop { 0% { transform: scale(1) rotate(0); } 32% { transform: scale(1.045) rotate(-1deg); } 58% { transform: scale(1.025) rotate(.7deg); } 78% { transform: scale(1.035) rotate(-.3deg); } 100% { transform: scale(1.03) rotate(0); } }
  .news-card { transition: transform .25s ease-out, box-shadow .25s; }
}
@media(max-width:800px) { html[data-page="news"] .about-page-heading { padding-top: 85px; } .news-page-content { margin-right: 0; padding: 10px 7% 45px; } .news-card-grid { grid-template-columns: 1fr; gap: 18px; } .news-card h2 { font-size: 15px; } .news-card-info { grid-template-columns: 48px 1fr; } }

/* Consistent centered titles across all inner pages. */
html[data-page] .about-page-heading { text-align: center; }

/* Contact and completion pages share Company's centered white card. */
.contact-page-link { display: flex; justify-content: space-between; align-items: center; width: min(330px,100%); margin: 0 auto; padding: 23px 35px; background: var(--ink); color: #fff; border-radius: 50px; font-size: 15px; }
.contact-form-card { width: min(680px, calc(100% - clamp(240px, 23vw, 320px) - 80px)); margin: 0 0 70px max(24px, calc((100% - clamp(240px, 23vw, 320px) - 64px - 680px) / 2)); padding: 45px 38px; border-radius: 14px; background: #fff; }
.contact-form-intro { text-align: center; font-size: 14px; margin: 0 0 25px; }
.contact-demo-note { padding: 15px 18px; border-radius: 8px; background: #edf8fc; color: #446575; font-size: 12px; line-height: 1.8; }
.inquiry-field { margin: 28px 0; }
.inquiry-field label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.inquiry-field label>span, .inquiry-consent b { font-size: 9px; background: #e2f3fa; color: #416778; padding: 3px 7px; border-radius: 4px; }
.inquiry-field input, .inquiry-field select, .inquiry-field textarea { display: block; width: 100%; border: 1px solid #d9dee5; border-radius: 7px; background: #f8f9fb; padding: 15px; color: var(--ink); font: inherit; font-size: 14px; }
.inquiry-field textarea { resize: vertical; min-height: 160px; }
.inquiry-field input:focus, .inquiry-field select:focus, .inquiry-field textarea:focus { outline: 2px solid var(--link-blue); outline-offset: 2px; background: #fff; }
.inquiry-field>small { display: block; margin-top: 7px; color: #818893; font-size: 10px; }
.inquiry-privacy { padding: 23px; background: #f5f6f8; border-radius: 9px; }
.inquiry-privacy h2 { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.inquiry-privacy p { font-size: 11px; line-height: 1.9; margin: 10px 0; }
.inquiry-consent { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0; font-size: 12px; cursor: pointer; line-height: 1.9; }
.inquiry-consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; accent-color: #509fbb; }
.inquiry-consent b { margin-left: 8px; }
.inquiry-submit { display: flex; align-items: center; justify-content: space-between; width: min(330px,100%); margin: 25px auto 0; padding: 19px 27px; background: var(--ink); color: #fff; border: 0; border-radius: 40px; font: inherit; font-size: 13px; cursor: pointer; }
.inquiry-submit:disabled { opacity: .55; cursor: wait; }
.inquiry-error { color: #b44040; font-size: 12px; }
.inquiry-caption { font-size: 10px; color: #858b94; text-align: center; }
.contact-complete-card { text-align: center; padding-top: 50px; padding-bottom: 50px; }
.contact-complete-mark { width: 75px; height: 75px; border-radius: 50%; background: #e3f4fb; color: #509fbb; display: grid; place-items: center; font-size: 38px; margin: 0 auto 25px; }
.contact-complete-card h2 { font-size: 25px; line-height: 1.5; }
.contact-complete-card>p { font-size: 13px; }
.contact-again { display: inline-block; margin-top: 22px; font-size: 12px; }
@media(max-width:800px) { .contact-form-card { width: calc(100% - 20px); margin: 0 10px 35px; padding: 30px 22px; } .contact-form-intro { font-size: 12px; } .inquiry-privacy { padding: 17px; } .contact-complete-card h2 { font-size: 21px; } }

/* Completion title: sweep blue from left to right, then keep the final blue. */
.thank-you-title { --thank-you-blue: #509fcb; background-image: linear-gradient(90deg, var(--thank-you-blue) 0%, var(--thank-you-blue) 43%, #b9eaff 50%, var(--ink) 57%, var(--ink) 100%); background-size: 240% 100%; background-position: 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: thank-you-blue-sweep 1.2s cubic-bezier(.22,1,.36,1) 1.15s both; }
@keyframes thank-you-blue-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .thank-you-title { animation: none; background-position: 0 0; } }

/* Privacy policy and clear, field-level validation. */
.privacy-page-title { font-size: clamp(36px, 6vw, 84px) !important; letter-spacing: -.05em !important; line-height: 1.2 !important; }
.privacy-policy-card { width: min(720px, calc(100% - clamp(240px, 23vw, 320px) - 80px)); margin: 0 0 70px max(24px, calc((100% - clamp(240px, 23vw, 320px) - 64px - 720px) / 2)); padding: 42px; background: #fff; border-radius: 14px; }
.privacy-policy-card p, .privacy-policy-card li, .privacy-policy-card dd { font-size: 13px; line-height: 2; }
.privacy-policy-card>section { margin-top: 36px; }
.privacy-policy-card h2 { font-size: 20px; line-height: 1.6; margin-bottom: 15px; }
.privacy-draft-note { background: #edf8fc; color: #446575; padding: 18px; border-radius: 8px; }
.privacy-policy-card dl>div { padding: 15px 0; border-bottom: 1px solid #e3e6eb; }
.privacy-policy-card dt { font-size: 12px; font-weight: 700; }
.privacy-policy-card dd { margin: 7px 0 0; }
.privacy-updated { color: #818893; font-size: 11px !important; }
.footer-policy-link { margin: 22px 0 0 !important; text-align: left !important; }
.footer-policy-link a { font-size: 10px; letter-spacing: .5px; }
.footer-policy-link small { font-size: 9px; margin-left: 8px; }
.inquiry-privacy a { color: #367f9c; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.inquiry-privacy small { display: block; color: #7f8893; font-size: 10px; margin-top: 8px; }
.inquiry-field .is-invalid { border: 2px solid #ed95b3; background: #fff4f8; }
.inquiry-field .is-invalid:focus { outline-color: #ed95b3; }
.inquiry-consent.is-invalid { padding: 12px; border: 2px solid #ed95b3; border-radius: 7px; background: #fff4f8; }
.inquiry-consent input.is-invalid { outline: 2px solid #ed95b3; outline-offset: 2px; }
.inquiry-field-error { color: #b83c69; font-size: 11px; line-height: 1.7; margin: 8px 0 0; }
.inquiry-field-error[hidden] { display: none; }
.inquiry-error:not(:empty) { border: 1px solid #ed95b3; background: #fff0f6; border-radius: 7px; padding: 15px; color: #a3305a; font-size: 13px; font-weight: 600; }
@media(max-width:800px) { .privacy-policy-card { width: calc(100% - 20px); margin: 0 10px 35px; padding: 28px 22px; } .privacy-policy-card p, .privacy-policy-card li, .privacy-policy-card dd { font-size: 12px; } .privacy-policy-card h2 { font-size: 18px; } }

/* Shared contact actions across desktop, mobile and full-screen menus. */
.header-contact, .contact-page-link, .floating-menu-contact, .mobile-dock-contact, .fullscreen-contact>a, .feature-contact, .business-home-intro .feature-contact, .inquiry-submit { background: var(--contact-blue); color: #fff; transition: background-color .25s ease; }
.header-contact:hover, .contact-page-link:hover, .floating-menu-contact:hover, .mobile-dock-contact:hover, .fullscreen-contact>a:hover, .feature-contact:hover, .inquiry-submit:hover { background: #1b6496; color: #fff; }
.mobile-dock-contact strong span { color: #fff; }
.header-contact .link-shine-text, .contact-page-link .link-shine-text, .floating-menu-contact .link-shine-text, .mobile-dock-contact .link-shine-text, .fullscreen-contact>a .link-shine-text, .feature-contact .link-shine-text { --link-original-color: #fff !important; }

/* Approved rounded M mark. */
.brand-mark { display:block; width:48px; height:52px; object-fit:contain; flex-shrink:0; }
.floating-menu .brand-mark, .fullscreen-menu-header .brand-mark { width:38px; height:44px; }
.company-opening-mark img { display:block; width:100px; height:110px; object-fit:contain; }
.footer-wordmark img { display:block; width:clamp(210px,30vw,430px); height:auto; max-width:100%; }
@media(max-width:800px) { .brand-mark { width:38px; height:44px; } .company-opening-mark img { width:80px; height:90px; } }

.service-page-heading>span { font-size:clamp(30px,4.5vw,68px)!important; letter-spacing:-.05em; }
.service-page { --service-accent:#d4edf7; width:min(720px,calc(100% - clamp(240px,23vw,320px) - 80px)); margin:0 0 60px max(24px,calc((100% - clamp(240px,23vw,320px) - 64px - 720px)/2)); }
.service-page[data-service=renovation] { --service-accent:#f6dfd2; }
.service-page>section { margin-bottom:65px; } .service-page h2 { font-size:clamp(25px,3vw,38px); line-height:1.65; letter-spacing:-.04em; } .service-page h3 { font-size:19px; } .service-page p { font-size:13px; } .service-lead { text-align:center; } .service-lead>p:not(.section-tag) { max-width:540px; margin:20px auto; }
.service-graphic { display:flex; align-items:center; justify-content:center; gap:30px; padding:45px 20px; margin-top:35px; background:var(--service-accent); border-radius:18px; color:#28617d; } [data-service=renovation] .service-graphic {color:#865e48;} .service-graphic span {font-size:90px;font-weight:500;} .service-graphic b {font-size:32px;line-height:1.1;text-align:left;letter-spacing:-1px;}
.service-features {display:grid;grid-template-columns:1fr 1fr;gap:14px;} .service-features article {background:#fff;padding:28px;border-radius:14px;} .service-features small {font-size:10px;letter-spacing:1px;color:#6b8190;} .service-features h3 {margin:15px 0 10px;} .service-features p {margin:0;}
.service-list {list-style:none;padding:0;background:#fff;border-radius:14px;overflow:hidden;} .service-list li {padding:24px;display:flex;justify-content:space-between;border-bottom:1px solid #edf0f4;font-size:14px;} .service-list span {color:#287fb8;}
.service-steps {padding:0;list-style:none;} .service-steps li {display:flex;gap:25px;padding:24px 10px;border-bottom:1px solid #dce0e7;} .service-steps b {color:#287fb8;font-size:29px;} .service-steps h3,.service-steps p {margin:0;} .service-inquiry {background:#fff;border-radius:16px;padding:35px 20px;text-align:center;} .service-inquiry h2 {font-size:26px;} .service-other {display:block;margin-top:28px;font-size:11px;}
.home-service-links {display:flex;gap:14px;flex-wrap:wrap;} .home-service-links .feature-contact {font-size:11px;gap:20px;margin-left:0;}
.floating-menu-nav a>span {font-size:clamp(10px,1vw,13px);} .footer-nav a>span {font-size:clamp(26px,4.4vw,62px);} .fullscreen-nav a>span {font-size:clamp(24px,4vw,60px);}
@media(max-width:800px){.service-page {width:calc(100% - 32px);margin:0 16px 35px;} .service-features article {padding:19px;} .service-features h3 {font-size:16px;} .service-page p {font-size:12px;} .service-graphic {gap:15px;} .service-graphic b {font-size:27px;} .service-page>section {margin-bottom:45px;} .service-other {line-height:1.8;} header nav {gap:20px;} }

.home-business-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:42px; }
.home-business-card { display:flex; flex-direction:column; padding:36px; border-radius:18px; background:#d4edf7; }
.home-business-card.home-renovation { background:#f6dfd2; }
.home-business-card .section-tag {font-size:11px;letter-spacing:1.2px;margin:0;}
.home-business-card h3 {font-size:clamp(23px,2.3vw,34px);line-height:1.5;margin:15px 0 8px;letter-spacing:-.04em;}
.home-business-card>p:not(.section-tag) {font-size:13px;line-height:1.9;}
.home-business-card ul {padding:0;list-style:none;margin:10px 0 30px;font-size:12px;line-height:2;}
.home-business-card li {border-bottom:1px solid #20222118;padding:9px 0;}
.home-business-card li:before {content:'＋';margin-right:9px;}
.home-business-link {display:flex;justify-content:space-between;gap:14px;margin-top:auto;padding:17px 19px;background:#fff;border-radius:30px;font-size:12px;font-weight:600;}
@media(max-width:800px){.home-business-grid {grid-template-columns:1fr;gap:18px;margin-top:30px;}.home-business-card {padding:26px;}.home-business-link {font-size:11px;}}
@media(min-width:801px){.business-home-intro {padding-right:calc(clamp(240px,23vw,320px) + 40px);} .home-business-card {padding:28px;} .home-business-card h3 {font-size:clamp(21px,2vw,29px);} }
@media(min-width:801px) and (max-width:1100px){.home-business-grid {grid-template-columns:1fr;}}

.service-mixed-title {display:block;line-height:1.05;}
.service-mixed-title em {font-style:normal;font-weight:400;color:#287fb8;letter-spacing:-.06em;}
.service-mixed-title .service-title-soft {font-weight:400;color:#946c57;}
.service-mixed-title>small {display:block;font-size:10px;font-weight:500;letter-spacing:2.5px;line-height:1.8;margin-top:18px;color:#75808c;}
@media(max-width:800px){.service-mixed-title>small {font-size:8px;letter-spacing:1.5px;}}