:root{
  --navy:#204483;
  --blue:#008ad2;
  --sky:#59d4f7;
  --ink:#333;
  --rule:#e5eaf0;
  --white:#fff;
  --max:1280px;
  --inner:1060px;
  --header-h:128px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;font-size:16px;font-weight:500;
  line-height:1.7;letter-spacing:.05em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
::selection{background:var(--blue);color:#fff}

.site-header{
  position:absolute;z-index:80;top:0;left:0;width:100%;height:var(--header-h);
  display:flex;align-items:center;padding:0 40px;gap:45px;color:var(--navy);
}
.brand{display:flex;align-items:center;gap:12px;min-width:115px}
.brand-mark{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font:800 16px/1 "Heebo",sans-serif;letter-spacing:.02em
}
.brand-copy{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.brand-copy strong{font-size:14px;line-height:1.25;letter-spacing:.04em}
.brand-copy small{font:700 7px/1.2 "Heebo",sans-serif;letter-spacing:.16em;color:var(--blue)}
.desktop-nav{display:flex;align-items:center;gap:3px}
.desktop-nav a{
  padding:10px 12px;font:700 14px/1.3 "Noto Sans JP",sans-serif;
  transition:.35s ease
}
.desktop-nav a:hover{color:var(--blue)}
.menu-button{
  margin-left:auto;border:0;background:none;color:var(--navy);
  width:100px;height:64px;display:grid;grid-template-columns:1fr 28px;grid-template-rows:repeat(3,5px);
  align-content:center;column-gap:12px;cursor:pointer;padding:10px 0
}
.menu-button span{grid-row:1/4;align-self:center;font:700 13px/1 "Heebo",sans-serif;letter-spacing:.12em}
.menu-button i{display:block;width:28px;height:2px;background:currentColor;align-self:center;transition:.3s}
.menu-open .menu-button i:nth-of-type(1){transform:translateY(5px) rotate(45deg)}
.menu-open .menu-button i:nth-of-type(2){opacity:0}
.menu-open .menu-button i:nth-of-type(3){transform:translateY(-5px) rotate(-45deg)}

.menu-panel{
  position:fixed;z-index:70;inset:0;background:linear-gradient(135deg,#17376f 0%,#008ad2 62%,#59d4f7 130%);
  color:#fff;visibility:hidden;opacity:0;transform:translateY(-16px);transition:.35s ease;padding-top:var(--header-h);
  overflow-y:auto;-webkit-overflow-scrolling:touch
}
.menu-panel.open{visibility:visible;opacity:1;transform:none}
.menu-panel-inner{
  width:min(var(--inner),calc(100% - 80px));margin:0 auto;
  display:grid;grid-template-columns:.55fr 1.25fr .7fr;gap:70px;align-items:start;padding:50px 0 70px
}
.menu-logo{font:800 72px/.82 "Heebo",sans-serif;letter-spacing:-.04em;opacity:.2}
.menu-panel nav{display:flex;flex-direction:column}
.menu-panel nav a{
  display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:center;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.22);transition:.3s
}
.menu-panel nav a:hover{padding-left:10px}
.menu-panel nav small{font:700 9px/1 "Heebo",sans-serif;color:#9ee6ff}
.menu-panel nav span{font-size:25px;font-weight:700}
.menu-meta{align-self:end;font-size:11px;color:rgba(255,255,255,.7)}
.menu-meta p{margin:0 0 15px}
.menu-meta a{font:700 26px/1 "Heebo",sans-serif;color:#fff}

.hero{height:821px;position:relative;overflow:hidden;background:#fff}
.hero-ribbon{
  position:absolute;z-index:0;left:0;top:0;width:100%;height:790px;
  background:linear-gradient(64deg,var(--navy) 0%,var(--blue) 57%,var(--sky) 100%);
  border-radius:0 0 48% 0 / 0 0 24% 0
}
.hero-ribbon:after{
  content:"";position:absolute;left:-8%;bottom:-138px;width:74%;height:235px;background:#fff;
  border-radius:50% 50% 0 0 / 95% 95% 0 0;transform:rotate(2deg)
}
.hero-photo-shell{
  position:absolute;z-index:1;left:0;top:0;width:77%;height:615px;overflow:hidden;
  border-radius:0 0 58% 0 / 0 0 38% 0;background:#a5ddf0
}
.hero-photo{
  position:absolute;inset:0;background-size:cover;background-position:center 40%;
  opacity:0;transform:scale(1.04);transition:opacity 1s ease,transform 6s ease;filter:saturate(.86)
}
.hero-photo:nth-child(1){background-image:linear-gradient(rgba(0,126,197,.05),rgba(0,126,197,.12)),url("images/pexels-hero-metal-roof.jpg?v=20260926")}
.hero-photo:nth-child(2){background-image:linear-gradient(rgba(0,126,197,.08),rgba(0,126,197,.14)),url("images/pexels-craft-metal-roof.jpg?v=20260926")}
.hero-photo:nth-child(3){background-image:linear-gradient(rgba(0,126,197,.06),rgba(0,126,197,.12)),url("images/hero-clean-v3.png?v=20260926")}
.hero-photo.is-active{opacity:1;transform:scale(1)}
.hero-copy{
  position:absolute;z-index:4;right:5.4%;top:505px;color:#fff;width:320px
}
.hero-sub{margin:0 0 11px;font:700 8px/1.3 "Heebo",sans-serif;letter-spacing:.17em;color:rgba(255,255,255,.75)}
.hero h1{margin:0;font-size:48px;line-height:1.16;letter-spacing:.03em;font-weight:700}
.hero-dots{position:absolute;z-index:5;right:30px;top:295px;display:flex;flex-direction:column;gap:8px}
.hero-dots button{
  width:24px;height:24px;border:0;background:transparent;border-radius:50%;position:relative;cursor:pointer
}
.hero-dots button:before{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#fff;border-radius:50%
}
.hero-dots button.is-active{background:rgba(255,255,255,.22)}
.scroll-cue{
  position:absolute;z-index:6;left:80px;bottom:18px;display:flex;align-items:center;gap:9px;
  color:var(--navy);font:700 10px/1 "Heebo",sans-serif;letter-spacing:.13em
}
.scroll-cue span{width:7px;height:7px;border-radius:50%;background:var(--blue)}

.section{padding:140px 0}
.message{position:relative;overflow:hidden;padding-top:179px}
.message-grid{
  width:min(var(--inner),calc(100% - 48px));margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start
}
.ghost-word{
  position:absolute;left:7%;top:175px;font:800 210px/.8 "Heebo",sans-serif;
  color:#edf8fc;letter-spacing:-.05em;pointer-events:none;z-index:0
}
.message-title,.message-copy{position:relative;z-index:1}
.jp-label{margin:0 0 22px;color:var(--navy);font-size:20px;line-height:1.3;font-weight:700}
.message-title h2,.profile-intro h2{
  margin:0;color:var(--navy);font-size:40px;line-height:1.3;letter-spacing:.05em
}
.message-copy{padding-top:51px}
.message-copy p{margin:0 0 28px}
.message-lead{color:var(--navy);font-size:20px;line-height:1.8;font-weight:700}
.message-copy>p:not(.message-lead){font-size:14px;line-height:2;color:#5c6470}

.circle-link{
  min-height:64px;display:inline-flex;align-items:center;gap:16px;color:var(--navy);
  font:700 18px/1.4 "Heebo","Noto Sans JP",sans-serif
}
.circle-link i{
  width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-style:normal;font-size:36px;font-weight:400;padding-bottom:5px;transition:.35s
}
.circle-link:hover i{transform:translateX(5px);background:var(--navy)}

.service{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding-top:70px}
.section-heading .jp-label{margin-bottom:4px}
.section-heading h2{
  margin:0;color:var(--blue);font:700 150px/.9 "Heebo",sans-serif;letter-spacing:.02em
}
.service-cards{display:grid;grid-template-columns:1fr 1fr;gap:41px;margin-top:78px}
.service-card{display:block;position:relative}
.service-image{
  height:390px;border-radius:22px;overflow:hidden;position:relative;background-size:cover;background-position:center
}
.roof-image{background-image:url("images/pexels-hero-metal-roof.jpg?v=20260926")}
.wall-image{background-image:url("images/pexels-craft-metal-roof.jpg?v=20260926")}
.service-image:after{
  content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,51,103,.48),transparent 55%)
}
.service-image span{
  position:absolute;z-index:2;right:22px;top:20px;color:#fff;font:700 11px/1 "Heebo",sans-serif;letter-spacing:.12em
}
.service-card-body{position:relative;padding:24px 75px 12px 0;min-height:170px}
.service-card-body small{display:block;color:var(--blue);font:700 10px/1 "Heebo",sans-serif;letter-spacing:.13em;margin-bottom:3px}
.service-card-body h3{margin:0;color:var(--navy);font-size:28px}
.service-card-body p{margin:15px 0 0;font-size:14px;line-height:1.9;color:#4d535a}
.mini-arrow{
  position:absolute;right:0;top:30px;width:48px;height:48px;border-radius:50%;background:var(--blue);
  color:#fff;display:grid;place-items:center;font-style:normal;font-size:27px;padding-bottom:4px;transition:.3s
}
.service-card:hover .mini-arrow{transform:translateX(4px);background:var(--navy)}
.sheetmetal-wide{
  margin-top:75px;display:grid;grid-template-columns:43% 57%;min-height:270px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)
}
.sheetmetal-photo{
  min-height:270px;background:url("images/metal-roof-detail.jpg?v=20260926") center/cover no-repeat;
  border-radius:20px 0 0 20px
}
.sheetmetal-copy{display:grid;grid-template-columns:1fr 1.2fr 56px;gap:28px;align-items:center;padding:32px 0 32px 44px}
.sheetmetal-copy p{margin:0}
.sheetmetal-copy small{display:block;color:var(--blue);font:700 9px/1 "Heebo",sans-serif;letter-spacing:.13em;margin-bottom:8px}
.sheetmetal-copy strong{display:block;color:var(--navy);font-size:30px}
.sheetmetal-copy>span{font-size:13px;line-height:1.9;color:#555d66}
.sheetmetal-copy>i{
  width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:27px;padding-bottom:4px
}
.section-more{display:flex;justify-content:flex-end;margin-top:46px}

.company{
  width:min(var(--max),calc(100% - 48px));margin:0 auto;
  display:grid;grid-template-columns:55% 45%;gap:30px;align-items:center;padding-top:170px
}
.company-visual{height:690px;position:relative}
.company-loop{
  position:absolute;left:-180px;top:150px;width:860px;height:380px;border:98px solid transparent;border-radius:50%;
  background:linear-gradient(55deg,var(--navy),var(--blue) 60%,var(--sky)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transform:rotate(-12deg)
}
.company-photo-main{
  position:absolute;z-index:2;right:20px;top:0;width:510px;height:585px;object-fit:cover;border-radius:20px;
  filter:saturate(.82)
}
.company-photo-sub{
  position:absolute;z-index:3;left:0;bottom:0;width:290px;height:334px;object-fit:cover;border-radius:20px;
  box-shadow:0 18px 50px rgba(32,68,131,.14);filter:saturate(.75)
}
.company-content{padding-left:20px}
.company-content .section-heading h2{font-size:112px;line-height:1}
.company-list{margin:42px 0 20px;border-top:1px solid var(--rule)}
.company-list a{
  height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);
  color:var(--navy);font-size:20px;font-weight:700;transition:.3s
}
.company-list a:hover{padding-left:10px;color:var(--blue)}
.company-list i{
  width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-style:normal;font-size:17px;padding-bottom:3px
}

.profile{
  width:min(var(--inner),calc(100% - 48px));margin:0 auto;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;padding-top:115px
}
.profile-intro>p:last-child{margin:30px 0 0;font-size:13px;color:#707780}
.profile-table{margin:0;border-top:1px solid var(--rule)}
.profile-table>div{display:grid;grid-template-columns:155px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--rule)}
.profile-table dt{color:#77808a;font-size:12px}
.profile-table dd{margin:0;color:var(--navy);font-size:14px;font-weight:700;line-height:1.8}
.profile-table a{text-decoration:underline;text-underline-offset:4px}

.craft{
  min-height:680px;width:100%;position:relative;overflow:hidden;border-radius:60px 60px 0 0;color:#fff
}
.craft-bg{
  position:absolute;inset:0;background:
    linear-gradient(90deg,rgba(14,54,116,.88),rgba(0,138,210,.62),rgba(89,212,247,.26)),
    url("images/pexels-craft-metal-roof.jpg?v=20260926") center 42%/cover no-repeat;
  transform:scale(1.02)
}
.craft-content{
  position:relative;z-index:2;width:min(414px,calc(100% - 48px));min-height:680px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
}
.jp-label.light{color:#fff}
.craft h2{margin:0;color:#fff;font:700 80px/1 "Heebo",sans-serif;letter-spacing:.02em}
.craft-message{margin:35px 0 18px;font-size:28px;line-height:1.55;font-weight:700}
.craft-content>p:last-of-type{font-size:13px;line-height:2;color:rgba(255,255,255,.85)}
.light-link{color:#fff;margin-top:22px}
.light-link i{background:#fff;color:var(--blue)}
.light-link:hover i{background:#fff;color:var(--navy)}

.information{width:min(var(--inner),calc(100% - 48px));margin:0 auto;padding-top:150px}
.information-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:55px}
.information-head h2{margin:0;color:var(--blue);font:700 80px/1 "Heebo",sans-serif;letter-spacing:.02em}
.info-list{border-top:1px solid var(--rule)}
.info-row{
  min-height:120px;display:grid;grid-template-columns:220px 1fr 44px;gap:25px;align-items:center;
  border-bottom:1px solid var(--rule)
}
.info-meta{display:flex;align-items:center;gap:14px}
.info-meta span{color:var(--blue);font-size:11px;font-weight:700}
.info-meta time{font:600 12px/1 "Heebo",sans-serif;color:#7b8490;letter-spacing:.06em}
.info-row h3{margin:0;color:var(--navy);font-size:16px;line-height:1.7}
.info-row>i{
  width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:18px;padding-bottom:3px
}
.source-note{text-align:right;margin:18px 0 0;color:#8a929a;font-size:10px}

.brand-panel{
  height:600px;position:relative;overflow:hidden;border-radius:60px 60px 0 0;background:#0c427d;color:#fff
}
.brand-panel-bg{
  position:absolute;inset:0;background:
    linear-gradient(0deg,rgba(10,54,113,.7),rgba(0,138,210,.12)),
    url("images/pexels-hero-metal-roof.jpg?v=20260926") center 48%/cover no-repeat;
  filter:saturate(.82)
}
.brand-panel-title{
  position:absolute;z-index:2;left:-20px;bottom:-22px;display:flex;flex-direction:column;color:rgba(255,255,255,.9);
  font:700 190px/.8 "Heebo",sans-serif;letter-spacing:.02em;pointer-events:none
}
.brand-panel-copy{
  position:absolute;z-index:3;right:8%;top:90px;width:400px;text-shadow:0 2px 12px rgba(0,0,0,.15)
}
.brand-panel-copy p{margin:0 0 14px;font:700 9px/1.4 "Heebo",sans-serif;letter-spacing:.17em}
.brand-panel-copy h2{margin:0;font-size:32px;line-height:1.55}

.contact{
  min-height:700px;position:relative;overflow:hidden;
  background:linear-gradient(58deg,var(--navy) 0%,var(--blue) 55%,var(--sky) 120%);color:#fff
}
.contact-wave{
  position:absolute;left:-12%;top:-220px;width:125%;height:340px;background:#fff;border-radius:0 0 50% 50% / 0 0 100% 100%;
  transform:rotate(-4deg);opacity:.08
}
.contact-inner{
  width:min(var(--max),calc(100% - 48px));margin:0 auto;min-height:700px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center
}
.contact-slogan{font-size:64px;line-height:1.15;font-weight:700;letter-spacing:.03em}
.contact-card{border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.5);padding:34px 0}
.contact-card p{margin:0 0 12px;font-size:14px}
.contact-card a{display:block;font:700 48px/1.1 "Heebo",sans-serif;margin-bottom:16px}
.contact-card span{font-size:12px;color:rgba(255,255,255,.8)}

footer{
  background:linear-gradient(58deg,#153671 0%,#007fc4 60%,#4dcff3 120%);color:#fff;padding:74px 80px 34px
}
.footer-main{display:grid;grid-template-columns:1fr 1fr auto;gap:50px;align-items:start;padding-top:45px;border-top:1px solid rgba(255,255,255,.35)}
.footer-brand{display:flex;flex-direction:column;gap:5px}
.footer-brand strong{font-size:22px}
.footer-brand small{font:700 10px/1 "Heebo",sans-serif;letter-spacing:.15em;color:rgba(255,255,255,.7)}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.footer-links a{font-size:14px;font-weight:700}
.page-top{display:flex;flex-direction:column;align-items:center;gap:10px;font:700 9px/1 "Heebo",sans-serif;letter-spacing:.13em}
.page-top i{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-style:normal;font-size:20px}
.demo-note{margin:70px 0 0;color:rgba(255,255,255,.58);font-size:9px;line-height:1.8}

.floating-contact{
  position:fixed;z-index:60;right:12px;bottom:0;height:46px;padding:0 22px;border-radius:8px 8px 0 0;
  display:flex;align-items:center;gap:8px;background:#005290;color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.2);
  font-size:13px;font-weight:700
}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1100px){
  :root{--header-h:104px}
  .site-header{padding:0 28px}
  .hero{height:760px}
  .hero-ribbon{height:735px}
  .hero-photo-shell{width:80%;height:570px}
  .hero-copy{top:470px;width:280px}
  .hero h1{font-size:42px}
  .section-heading h2{font-size:112px}
  .company{grid-template-columns:52% 48%}
  .company-photo-main{width:420px}
  .company-photo-sub{width:250px}
  .company-content .section-heading h2{font-size:92px}
  .contact-slogan{font-size:52px}
}

@media(max-width:820px){
  :root{--header-h:96px}
  body{font-size:14px}
  .site-header{padding:0 24px}
  .desktop-nav{display:none}
  .menu-button{width:104px}
  .menu-panel-inner{width:calc(100% - 48px);grid-template-columns:1fr;padding-top:34px;gap:30px}
  .menu-logo{display:none}
  .menu-meta{align-self:start}
  .hero{height:663px}
  .hero-ribbon{height:620px;border-radius:0 0 58% 0 / 0 0 16% 0}
  .hero-ribbon:after{left:-20%;bottom:-95px;width:102%;height:160px}
  .hero-photo-shell{width:92%;height:505px;border-radius:0 0 64% 0 / 0 0 28% 0}
  .hero-copy{top:497px;right:6%;width:190px}
  .hero-sub{font-size:6px;margin-bottom:7px}
  .hero h1{font-size:28px;line-height:1.16}
  .hero-dots{right:13px;top:236px;gap:4px}
  .hero-dots button{width:16px;height:16px}
  .scroll-cue{left:24px;bottom:18px;font-size:8px}
  .section{padding:80px 0}
  .message{padding-top:92px}
  .message-grid{width:calc(100% - 48px);grid-template-columns:1fr;gap:28px}
  .ghost-word{left:0;top:92px;font-size:120px}
  .jp-label{font-size:14px;margin-bottom:14px}
  .message-title h2,.profile-intro h2{font-size:26px;line-height:1.3}
  .message-copy{padding-top:0;padding-left:62px}
  .message-lead{font-size:14px;line-height:1.8}
  .message-copy>p:not(.message-lead){font-size:12px}
  .circle-link{min-height:48px;font-size:16px}
  .circle-link i{width:48px;height:48px;font-size:26px}
  .service{width:calc(100% - 48px);padding-top:70px}
  .section-heading h2{font-size:56px;line-height:.9}
  .service-cards{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .service-image{height:245px;border-radius:18px}
  .service-card-body{padding-right:58px;min-height:0}
  .service-card-body h3{font-size:22px}
  .service-card-body p{font-size:12px}
  .mini-arrow{width:42px;height:42px}
  .sheetmetal-wide{grid-template-columns:1fr;margin-top:48px}
  .sheetmetal-photo{min-height:220px;border-radius:18px 18px 0 0}
  .sheetmetal-copy{grid-template-columns:1fr 40px;padding:24px 0;gap:12px}
  .sheetmetal-copy p{grid-column:1}
  .sheetmetal-copy>span{grid-column:1;font-size:12px}
  .sheetmetal-copy>i{grid-column:2;grid-row:1/3;width:40px;height:40px}
  .section-more{justify-content:flex-start}
  .company{width:calc(100% - 48px);grid-template-columns:1fr;padding-top:100px}
  .company-visual{height:570px}
  .company-loop{left:-190px;top:140px;width:760px}
  .company-photo-main{right:0;width:75%;height:470px}
  .company-photo-sub{width:42%;height:250px}
  .company-content{padding-left:0;margin-top:20px}
  .company-content .section-heading h2{font-size:56px}
  .company-list a{height:60px;font-size:16px}
  .profile{width:calc(100% - 48px);grid-template-columns:1fr;gap:46px;padding-top:80px}
  .profile-table>div{grid-template-columns:100px 1fr}
  .craft{min-height:600px;border-radius:30px 30px 0 0}
  .craft-content{min-height:600px}
  .craft h2{font-size:48px}
  .craft-message{font-size:22px}
  .information{width:calc(100% - 48px);padding-top:80px}
  .information-head h2{font-size:48px}
  .desktop-only{display:none}
  .info-row{grid-template-columns:1fr 30px;gap:12px;padding:30px 0}
  .info-meta{grid-column:1}
  .info-row h3{grid-column:1;font-size:14px}
  .info-row>i{grid-column:2;grid-row:1/3}
  .brand-panel{height:450px;border-radius:30px 30px 0 0}
  .brand-panel-title{font-size:112px;left:-24px;bottom:-10px}
  .brand-panel-copy{right:24px;top:50px;width:265px}
  .brand-panel-copy h2{font-size:23px}
  .contact{min-height:620px}
  .contact-inner{width:calc(100% - 48px);min-height:620px;grid-template-columns:1fr;gap:45px;align-content:center}
  .contact-slogan{font-size:36px}
  .contact-card a{font-size:36px}
  footer{padding:60px 24px}
  .footer-main{grid-template-columns:1fr;gap:34px}
  .footer-links{grid-template-columns:1fr}
  .page-top{position:static;justify-self:start}
}

@media(max-width:480px){
  .brand-copy strong{font-size:13px}
  .brand-copy small{font-size:6px}
  .brand-mark{width:38px;height:38px}
  .site-header{padding:0 18px}
  .menu-button{width:90px}
  .hero-photo-shell{width:96%;height:485px;background-position:center}
  .hero-copy{top:500px;right:22px}
  .hero-ribbon{height:620px}
  .hero-ribbon:after{width:115%}
  .message-grid,.service,.company,.profile,.information,.contact-inner{width:calc(100% - 36px)}
  .message-copy{padding-left:44px}
  .service-image{height:225px}
  .company-visual{height:500px}
  .company-photo-main{width:78%;height:405px}
  .company-photo-sub{width:45%;height:210px}
  .company-loop{left:-210px;top:125px;width:710px;height:330px}
  .sheetmetal-copy strong{font-size:24px}
  .profile-table>div{grid-template-columns:85px 1fr;gap:12px}
  .craft-content{width:calc(100% - 36px)}
  .brand-panel-title{font-size:96px}
  .brand-panel-copy{left:20px;right:auto;top:45px;width:250px}
  .floating-contact{bottom:12px;border-radius:23px;font-size:10.5px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-photo{transition:none}
  .menu-panel{transition:none}
}

/* ===== Multi-page corporate architecture ===== */
.subpage{background:#fff}
.sub-header{position:relative;background:#fff;border-bottom:1px solid var(--rule)}
.sub-hero{position:relative;min-height:560px;overflow:hidden;background:#f5fbfe}
.sub-hero-art{position:absolute;inset:0}
.sub-hero-roof .sub-hero-art{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.72) 43%,rgba(0,138,210,.08)),url("images/pexels-hero-metal-roof.jpg") center 42%/cover}
.sub-hero-wall .sub-hero-art{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.72) 43%,rgba(0,138,210,.08)),url("images/pexels-craft-metal-roof.jpg") center/cover}
.sub-hero-metal .sub-hero-art{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.74) 45%,rgba(0,138,210,.07)),url("images/metal-roof-detail.jpg") center/cover}
.sub-hero:after{content:"";position:absolute;right:-9%;bottom:-150px;width:66%;height:260px;border:75px solid transparent;border-radius:50%;background:linear-gradient(60deg,var(--navy),var(--blue) 62%,var(--sky)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transform:rotate(-8deg)}
.sub-hero-inner{position:relative;z-index:2;width:min(var(--inner),calc(100% - 48px));margin:0 auto;padding:92px 0 110px}
.breadcrumb{margin:0 0 72px;display:flex;gap:10px;color:#8090a0;font:600 10px/1.4 "Heebo","Noto Sans JP",sans-serif;letter-spacing:.08em}
.sub-kicker{margin:0 0 3px;color:var(--navy);font-size:18px;font-weight:700}
.sub-hero h1{margin:0;color:var(--blue);font:700 clamp(74px,11vw,150px)/.88 "Heebo",sans-serif;letter-spacing:.01em}
.sub-lead{width:min(520px,100%);margin:38px 0 0;color:var(--navy);font-size:18px;line-height:1.85;font-weight:700}
.sub-section{width:min(var(--inner),calc(100% - 48px));margin:0 auto;padding:120px 0}
.two-col{display:grid;grid-template-columns:1fr .72fr;gap:100px;align-items:start}
.sub-copy .mini-label,.mini-label{margin:0 0 16px;color:var(--blue);font:700 10px/1.4 "Heebo",sans-serif;letter-spacing:.17em}
.sub-copy h2,.section-mini-head h2,.source-policy h2,.works-note h2,.faq-page-intro h2{margin:0 0 34px;color:var(--navy);font-size:40px;line-height:1.35}
.sub-copy p{margin:0 0 24px;color:#5d6670;font-size:14px;line-height:2}
.sub-photo{margin:0;position:relative}
.sub-photo img{width:100%;object-fit:cover;border-radius:22px;filter:saturate(.82)}
.sub-photo.tall img{height:560px}
.sub-photo.wide img{height:520px}
.sub-photo figcaption{position:absolute;left:18px;bottom:14px;color:#fff;font:700 8px/1 "Heebo",sans-serif;letter-spacing:.15em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.page-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px}
.page-link-card{min-height:330px;border:1px solid var(--rule);border-radius:20px;padding:32px;position:relative;transition:.3s;background:#fff}
.page-link-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(32,68,131,.08)}
.page-link-card small,.service-detail-card small{color:var(--blue);font:700 9px/1.3 "Heebo",sans-serif;letter-spacing:.13em}
.page-link-card h3{margin:90px 0 15px;color:var(--navy);font-size:25px}
.page-link-card p{margin:0;color:#69717a;font-size:12px;line-height:1.9}
.page-link-card i,.service-detail-card i{position:absolute;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:25px;padding-bottom:4px}
.profile-block{display:grid;grid-template-columns:.6fr 1.4fr;gap:80px;border-top:1px solid var(--rule)}
.profile-block h2{margin:0;color:var(--navy);font-size:36px}
.intro-center{text-align:center;max-width:800px}
.intro-center h2{margin:0 0 30px;color:var(--navy);font-size:42px;line-height:1.4}
.intro-center>p:last-child{margin:0 auto;color:#616a74;font-size:14px;line-height:2;max-width:720px}
.service-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding-top:20px}
.service-detail-card{position:relative;padding-bottom:80px}
.detail-card-image{height:310px;border-radius:20px;margin-bottom:25px;background-size:cover;background-position:center}
.image-metal{background-image:url("images/metal-roof-detail.jpg")}
.image-roof{background-image:url("images/pexels-hero-metal-roof.jpg")}
.image-wall{background-image:url("images/pexels-craft-metal-roof.jpg")}
.service-detail-card h3{margin:7px 0 13px;color:var(--navy);font-size:27px}
.service-detail-card p{margin:0;color:#626b74;font-size:12px;line-height:1.9}
.sub-band{width:min(var(--max),calc(100% - 48px));margin:0 auto 120px;padding:80px;border-radius:30px;background:linear-gradient(65deg,var(--navy),var(--blue) 60%,var(--sky));color:#fff}
.sub-band>p{margin:0 0 10px;font:700 9px/1.4 "Heebo",sans-serif;letter-spacing:.15em;opacity:.7}
.sub-band h2{margin:0 0 34px;font-size:36px;line-height:1.45}
.white-button{display:inline-flex;padding:16px 24px;border-radius:999px;background:#fff;color:var(--navy);font-weight:700}
.service-hero-detail{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;align-items:center}
.service-prose h2{margin:0 0 30px;color:var(--navy);font-size:36px;line-height:1.45}
.service-prose p:last-child{color:#626b74;font-size:13px;line-height:2}
.symptom-section{border-top:1px solid var(--rule)}
.section-mini-head{margin-bottom:45px}
.symptom-cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.symptom-card{min-height:280px;padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.symptom-card span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif}
.symptom-card h3{margin:85px 0 12px;color:var(--navy);font-size:21px}
.symptom-card p{margin:0;color:#68717a;font-size:12px;line-height:1.8}
.flow-section{padding-top:40px}
.clean-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.clean-flow li{padding:30px;border-radius:18px;background:#f5fbfe}
.clean-flow span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif}
.clean-flow h3{margin:55px 0 12px;color:var(--navy);font-size:19px}
.clean-flow p{margin:0;color:#66707a;font-size:12px;line-height:1.8}
.guide-intro{display:grid;grid-template-columns:.4fr 1.6fr;gap:45px}
.big-number{color:#e9f7fc;font:800 190px/.8 "Heebo",sans-serif}
.guide-visual{height:650px;position:relative;overflow:hidden;background:#0d6aaa}
.guide-visual-image{position:absolute;inset:0;background:linear-gradient(rgba(0,99,161,.2),rgba(13,62,118,.5)),url("images/metal-roof-detail.jpg") center/cover}
.guide-visual p{position:absolute;z-index:2;right:5%;bottom:30px;margin:0;color:#fff;font:700 11px/1.4 "Heebo",sans-serif;letter-spacing:.16em}
.guide-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.guide-columns article{border-top:2px solid var(--blue);padding-top:22px}
.guide-columns span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif}
.guide-columns h3{margin:55px 0 12px;color:var(--navy);font-size:26px}
.guide-columns p{margin:0;color:#65707a;font-size:12px;line-height:2}
.faq-inline{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;border-top:1px solid var(--rule)}
.text-stack p{margin:0 0 25px;color:#626b74;font-size:14px;line-height:2.1}
.works-note{max-width:760px;text-align:center}
.works-note p:last-child{color:#626b74;line-height:2}
.works-placeholder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:20px}
.work-placeholder{border-radius:20px;overflow:hidden;background:#f6f9fb}
.work-photo{height:280px;background-size:cover;background-position:center;filter:saturate(.7)}
.work-photo.p1{background-image:url("images/pexels-hero-metal-roof.jpg")}
.work-photo.p2{background-image:url("images/pexels-craft-metal-roof.jpg")}
.work-photo.p3{background-image:url("images/metal-roof-detail.jpg")}
.work-placeholder>div:last-child{padding:24px}
.work-placeholder small{color:var(--blue);font:700 9px/1 "Heebo",sans-serif}
.work-placeholder h3{margin:7px 0 10px;color:var(--navy);font-size:20px}
.work-placeholder p{margin:0;color:#7b838a;font-size:11px}
.evidence-list{padding-bottom:50px}
.evidence{display:grid;grid-template-columns:140px 1fr;gap:60px;padding:55px 0;border-bottom:1px solid var(--rule)}
.evidence>span{color:#e2f5fc;font:800 100px/.8 "Heebo",sans-serif}
.evidence small{color:var(--blue);font:700 9px/1 "Heebo",sans-serif;letter-spacing:.14em}
.evidence h2{margin:8px 0 18px;color:var(--navy);font-size:32px}
.evidence p{margin:0;color:#5f6872;font-size:13px;line-height:2}
.source-policy{max-width:760px;margin-bottom:80px}
.source-policy p:last-child{color:#5f6872;line-height:2}
.faq-page{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.faq-accordion{border-top:1px solid var(--rule)}
.faq-accordion details{border-bottom:1px solid var(--rule)}
.faq-accordion summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px 1fr auto;gap:15px;align-items:center;padding:25px 0;color:var(--navy);font-size:15px;font-weight:700}
.faq-accordion summary::-webkit-details-marker{display:none}
.faq-accordion summary span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif}
.faq-accordion summary i{font-style:normal;font-size:22px;font-weight:400;transition:.25s}
.faq-accordion details[open] summary i{transform:rotate(45deg)}
.faq-accordion details p{margin:0 25px 26px 67px;color:#626b74;font-size:12px;line-height:2}
.contact-page{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.phone-panel{padding:45px;border-radius:24px;background:linear-gradient(60deg,var(--navy),var(--blue));color:#fff}
.phone-panel .mini-label{color:#a6e8ff}
.phone-panel h2{margin:0 0 45px;font-size:27px}
.phone-panel a{display:block;font:700 40px/1 "Heebo",sans-serif;margin-bottom:30px}
.phone-panel>p:last-child{font-size:11px;color:rgba(255,255,255,.75)}
.demo-form{padding:10px 0}
.demo-form h2{margin:0 0 10px;color:var(--navy);font-size:30px}
.form-note{margin:0 0 30px;color:#68717a;font-size:12px}
.demo-form label{display:block;margin-bottom:20px;color:var(--navy);font-size:12px;font-weight:700}
.demo-form input,.demo-form textarea{width:100%;margin-top:8px;padding:15px;border:1px solid #dbe2e8;border-radius:8px;background:#f7f9fb;font:inherit}
.demo-form textarea{height:150px;resize:vertical}
.demo-form button{border:0;border-radius:999px;background:#b9c2ca;color:#fff;padding:16px 24px}
.sub-contact-cta{width:100%;padding:90px max(24px,calc((100% - var(--inner))/2));display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;background:linear-gradient(65deg,var(--navy),var(--blue) 60%,var(--sky));color:#fff}
.sub-contact-cta p{margin:0 0 8px;font:700 10px/1 "Heebo",sans-serif;letter-spacing:.15em;opacity:.75}
.sub-contact-cta h2{margin:0;font-size:34px;line-height:1.45}
.sub-contact-cta>a{padding:26px 0;border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.5)}
.sub-contact-cta small{display:block;font:700 8px/1 "Heebo",sans-serif;letter-spacing:.16em;opacity:.7;margin-bottom:8px}
.sub-contact-cta strong{display:block;font:700 42px/1 "Heebo",sans-serif;margin-bottom:10px}
.sub-contact-cta span{font-size:11px}
.sub-footer{background:linear-gradient(58deg,#153671 0%,#007fc4 60%,#4dcff3 120%)}
@media(max-width:820px){
 .sub-hero{min-height:450px}.sub-hero-inner{padding:60px 0 80px}.breadcrumb{margin-bottom:48px}.sub-hero h1{font-size:64px}.sub-lead{font-size:14px}
 .two-col,.profile-block,.service-hero-detail,.faq-inline,.faq-page,.contact-page,.sub-contact-cta{grid-template-columns:1fr;gap:45px}
 .page-links,.service-detail-grid,.symptom-cards,.clean-flow,.guide-columns,.works-placeholder-grid{grid-template-columns:1fr}
 .sub-section{padding:80px 0}.sub-photo.tall img,.sub-photo.wide img{height:390px}.page-link-card{min-height:260px}.page-link-card h3{margin-top:60px}
 .sub-band{margin-bottom:80px;padding:50px 24px}.sub-band h2{font-size:26px}.service-prose h2,.sub-copy h2,.section-mini-head h2,.source-policy h2,.works-note h2,.faq-page-intro h2{font-size:28px}
 .big-number{font-size:110px}.guide-intro{grid-template-columns:1fr}.guide-visual{height:430px}.evidence{grid-template-columns:70px 1fr;gap:25px}.evidence>span{font-size:60px}
 .sub-contact-cta{padding:65px 24px}.sub-contact-cta h2{font-size:26px}.sub-contact-cta strong{font-size:34px}
}
@media(max-width:480px){
 .sub-hero-inner,.sub-section{width:calc(100% - 36px)}.sub-hero h1{font-size:48px}.sub-hero:after{right:-35%;width:110%}.sub-lead{font-size:13px}
 .sub-photo.tall img,.sub-photo.wide img{height:300px}.detail-card-image{height:240px}.profile-block{gap:35px}
 .faq-accordion summary{grid-template-columns:38px 1fr auto;font-size:13px}.faq-accordion details p{margin-left:53px}
 .phone-panel{padding:30px}.phone-panel a{font-size:32px}.sub-contact-cta strong{font-size:30px}
}

/* ===== Multi-page depth additions ===== */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px}
.check-card{min-height:250px;padding:28px;border-radius:18px;background:#f5fbfe;border:1px solid #e5f1f6}
.check-card span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif}.check-card h3{margin:70px 0 12px;color:var(--navy);font-size:24px}.check-card p{margin:0;color:#68717a;font-size:12px;line-height:1.9}
.maintenance-steps{padding-top:20px}.area-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.area-address{padding:45px;border-radius:24px;background:linear-gradient(60deg,var(--navy),var(--blue));color:#fff}.area-address .mini-label{color:#b4ecff}.area-address h2{margin:0 0 25px;font-size:34px}.area-address p{font-size:13px}.area-address a{display:block;margin-top:38px;font:700 36px/1 "Heebo",sans-serif}.area-policy h2{margin:0 0 25px;color:var(--navy);font-size:36px;line-height:1.4}.area-policy p:last-child{color:#616a74;font-size:13px;line-height:2}
.area-graphic{height:360px;background:linear-gradient(60deg,var(--navy),var(--blue) 62%,var(--sky));color:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.area-graphic div{font:800 180px/.8 "Heebo",sans-serif;opacity:.16}.area-graphic p{position:absolute;margin:0;font:700 11px/1 "Heebo",sans-serif;letter-spacing:.18em}
.news-page-list{padding-top:70px}.news-card{display:grid;grid-template-columns:130px 100px 1fr;gap:30px;align-items:start;padding:45px 0;border-bottom:1px solid var(--rule)}.news-card time{font:700 13px/1 "Heebo",sans-serif;color:#7b8490}.news-card>span{color:var(--blue);font-size:11px;font-weight:700}.news-card h2{grid-column:3;margin:0;color:var(--navy);font-size:20px;line-height:1.6}.news-card p{grid-column:3;margin:0;color:#68717a;font-size:12px;line-height:1.9}
.estimate-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.estimate-list{border-top:1px solid var(--rule)}.estimate-list>div{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--rule)}.estimate-list span{color:var(--blue);font:700 10px/1.8 "Heebo",sans-serif}.estimate-list p{margin:0;color:var(--navy);font-weight:700}.blue-button{background:var(--blue);color:#fff;margin-top:15px}
.sitemap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}.sitemap-card{min-height:140px;padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative}.sitemap-card small{display:block;color:var(--blue);font:700 9px/1 "Heebo",sans-serif;margin-bottom:22px}.sitemap-card span{color:var(--navy);font-size:19px;font-weight:700}.sitemap-card i{position:absolute;right:24px;bottom:24px;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px}.related-card{min-height:230px;padding:28px;border-radius:18px;background:#f5fbfe;position:relative}.related-card small{color:var(--blue);font:700 9px/1 "Heebo",sans-serif}.related-card h3{margin:65px 0 10px;color:var(--navy);font-size:20px}.related-card p{margin:0;color:#69727b;font-size:11px}.related-card i{position:absolute;right:22px;bottom:22px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal}
@media(max-width:820px){.check-grid,.related-grid{grid-template-columns:1fr}.area-layout,.estimate-grid{grid-template-columns:1fr;gap:45px}.news-card{grid-template-columns:1fr 1fr;gap:12px}.news-card h2,.news-card p{grid-column:1/-1}.sitemap-grid{grid-template-columns:1fr}.area-graphic div{font-size:110px}}


/* ===== depth upgrade 03 ===== */
.home-tech{width:min(var(--max),calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.home-tech-left h2{margin:0;color:var(--blue);font:700 clamp(70px,10vw,138px)/.82 "Heebo",sans-serif;letter-spacing:-.02em}
.home-tech-left>p:not(.jp-label){max-width:520px;color:#606a74;font-size:13px;line-height:2;margin:35px 0}
.home-tech-graphic{height:570px;position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#eef8fc,#d9f1fa)}
.metal-fold{position:absolute;width:68%;height:31%;border-radius:8px;background:linear-gradient(130deg,#fff 0%,#b9c9d2 28%,#f6fbfd 50%,#8ea4b1 78%,#eaf3f7 100%);box-shadow:0 22px 50px rgba(32,68,131,.12);transform:skewY(-9deg) rotate(-10deg)}
.metal-fold.f1{left:-10%;top:10%}.metal-fold.f2{right:-14%;top:34%;transform:skewY(8deg) rotate(12deg)}.metal-fold.f3{left:8%;bottom:2%;transform:skewY(-5deg) rotate(4deg)}
.home-tech-graphic>span{position:absolute;z-index:3;right:28px;bottom:28px;color:var(--navy);font:800 44px/.86 "Heebo",sans-serif;text-align:right;letter-spacing:-.03em}
.knowledge{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding-top:80px}
.knowledge .section-heading h2{font-size:110px}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
.knowledge-card{min-height:360px;padding:30px;border-radius:20px;background:#f5fbfe;position:relative;transition:.3s}
.knowledge-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(32,68,131,.08)}
.knowledge-card small{color:var(--blue);font:700 9px/1 "Heebo",sans-serif;letter-spacing:.13em}
.knowledge-card h3{margin:110px 0 16px;color:var(--navy);font-size:23px;line-height:1.5}.knowledge-card p{margin:0;color:#67717a;font-size:12px;line-height:1.9}
.knowledge-card i{position:absolute;right:26px;bottom:25px;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:25px}
.tech-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}.tech-big{color:#eaf7fc;font:800 clamp(70px,11vw,150px)/.8 "Heebo",sans-serif;letter-spacing:-.04em}.source-micro{font-size:9px!important;color:#9299a0!important;line-height:1.7!important}
.technology-visual{min-height:620px;position:relative;background:linear-gradient(140deg,#17376f,#008ad2 58%,#59d4f7);overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center}
.technology-lines{position:absolute;inset:0}.technology-lines i{position:absolute;display:block;width:110%;height:2px;background:rgba(255,255,255,.26);left:-5%;transform-origin:left center}.technology-lines i:nth-child(1){top:18%;transform:rotate(8deg)}.technology-lines i:nth-child(2){top:35%;transform:rotate(-6deg)}.technology-lines i:nth-child(3){top:50%;transform:rotate(13deg)}.technology-lines i:nth-child(4){top:67%;transform:rotate(-10deg)}.technology-lines i:nth-child(5){top:82%;transform:rotate(5deg)}
.technology-visual-copy{position:relative;z-index:2;text-align:center}.technology-visual-copy p{font:700 10px/1 "Heebo",sans-serif;letter-spacing:.2em}.technology-visual-copy h2{margin:20px 0 0;font-size:58px;line-height:1.25}
.tech-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}.tech-cards article{min-height:330px;padding:32px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}.tech-cards span{color:#dff4fc;font:800 90px/.8 "Heebo",sans-serif}.tech-cards small{display:block;margin:48px 0 5px;color:var(--blue);font:700 9px/1 "Heebo",sans-serif}.tech-cards h3{margin:0 0 14px;color:var(--navy);font-size:25px}.tech-cards p{margin:0;color:#66707a;font-size:12px;line-height:1.9}
.cross-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px}.cross-card{min-height:210px;border-radius:18px;background:#f5fbfe;padding:28px;position:relative}.cross-card small{color:var(--blue);font:700 9px/1 "Heebo",sans-serif}.cross-card h3{margin:70px 50px 0 0;color:var(--navy);font-size:19px}.cross-card i{position:absolute;right:22px;bottom:22px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal}
.duct-diagram{min-height:480px;border-radius:24px;background:#f1f8fb;position:relative;overflow:hidden}.duct-box{position:absolute;z-index:2;padding:17px 23px;border:2px solid var(--navy);background:#fff;color:var(--navy);font:800 13px/1 "Heebo",sans-serif;letter-spacing:.12em}.duct-box.d1{left:8%;bottom:16%}.duct-box.d2{left:42%;top:42%}.duct-box.d3{right:7%;top:12%}.duct-line{position:absolute;height:34px;background:linear-gradient(180deg,#c9d8e0,#f7fbfd 45%,#9cb1bd);transform-origin:left center}.duct-line.l1{left:20%;bottom:23%;width:42%;transform:rotate(-24deg)}.duct-line.l2{left:55%;top:42%;width:38%;transform:rotate(-31deg)}
.point-list{padding-top:20px}.point-row{display:grid;grid-template-columns:150px .8fr 1.2fr;gap:40px;align-items:start;padding:42px 0;border-bottom:1px solid var(--rule)}.point-row:first-child{border-top:1px solid var(--rule)}.point-row span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif;letter-spacing:.12em}.point-row h3{margin:0;color:var(--navy);font-size:22px}.point-row p{margin:0;color:#65707a;font-size:12px;line-height:2}.decision-note{max-width:820px;text-align:center}.decision-note p:last-child{color:#65707a;line-height:2}
.process-intro{max-width:800px;text-align:center}.process-intro h2{margin:0 0 25px;color:var(--navy);font-size:40px}.process-intro p:last-child{color:#65707a;line-height:2}.process-timeline{padding-top:20px}.process-step{display:grid;grid-template-columns:130px 1fr;gap:45px;padding:38px 0;border-bottom:1px solid var(--rule);align-items:start}.process-step>span{color:#e3f5fb;font:800 85px/.8 "Heebo",sans-serif}.process-step small{color:var(--blue);font:700 9px/1 "Heebo",sans-serif}.process-step h3{margin:6px 0 10px;color:var(--navy);font-size:24px}.process-step p{margin:0;color:#65707a;font-size:12px;line-height:1.9}
.materials-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}.material-swatch{height:400px;position:relative}.material-swatch i{position:absolute;display:block;width:75%;height:90px;border-radius:8px;background:linear-gradient(110deg,#9cadb7,#eef5f8 45%,#8299a6);box-shadow:0 12px 30px rgba(32,68,131,.12);left:10%}.material-swatch i:nth-child(1){top:15px;transform:rotate(-8deg)}.material-swatch i:nth-child(2){top:110px;left:20%;transform:rotate(6deg)}.material-swatch i:nth-child(3){top:205px;transform:rotate(-4deg)}.material-swatch i:nth-child(4){top:300px;left:20%;transform:rotate(8deg)}
.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px}.material-card{min-height:280px;padding:30px;border:1px solid var(--rule);border-radius:18px}.material-card small{color:var(--blue);font:700 9px/1 "Heebo",sans-serif}.material-card h3{margin:75px 0 14px;color:var(--navy);font-size:23px}.material-card p{margin:0;color:#65707a;font-size:12px;line-height:1.9}
.feature-four{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}.feature-four article{min-height:270px;padding:26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}.feature-four span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif}.feature-four h3{margin:70px 0 12px;color:var(--navy);font-size:21px}.feature-four p{margin:0;color:#66707a;font-size:11px;line-height:1.9}
.comparison-block{padding-top:30px}.compare-table{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}.compare-table>div{padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}.compare-table b{color:var(--navy);font-size:19px}.compare-table p{margin:16px 0 0;color:#66707a;font-size:12px;line-height:1.9}
.material-showcase>p{max-width:720px;color:#65707a;line-height:2}.tech-callout{border-radius:28px;background:linear-gradient(130deg,#edf9fd,#d8f2fb);display:flex;justify-content:space-between;align-items:end;gap:40px;padding:70px}.tech-callout h2{margin:0 0 20px;color:var(--navy);font-size:34px;line-height:1.4}.tech-callout p:last-child{margin:0;color:#63707b;font-size:13px}
.faq-category-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:70px}.faq-category-nav a{padding:11px 17px;border-radius:999px;background:#eef8fc;color:var(--navy);font-size:11px;font-weight:700}.faq-group{display:grid;grid-template-columns:.55fr 1.45fr;gap:60px;padding:65px 0;border-top:1px solid var(--rule)}.faq-group-head{display:flex;gap:18px;align-items:baseline}.faq-group-head span{color:var(--blue);font:700 10px/1 "Heebo",sans-serif}.faq-group-head h2{margin:0;color:var(--navy);font-size:28px}
.sitemap-summary{max-width:780px;text-align:center}.sitemap-summary h2{margin:0 0 25px;color:var(--navy);font-size:38px;line-height:1.4}.sitemap-summary p:last-child{color:#65707a;line-height:2}
@media(max-width:820px){
.home-tech,.tech-intro,.materials-intro{grid-template-columns:1fr}.home-tech-graphic{height:430px}.home-tech-left h2{font-size:75px}.knowledge .section-heading h2{font-size:60px}.knowledge-grid,.tech-cards,.cross-links,.material-grid,.feature-four,.compare-table{grid-template-columns:1fr}.technology-visual{min-height:480px}.technology-visual-copy h2{font-size:38px}.point-row{grid-template-columns:80px 1fr;gap:18px}.point-row p{grid-column:2}.process-step{grid-template-columns:85px 1fr}.faq-group{grid-template-columns:1fr;gap:30px}.tech-callout{padding:45px 25px;display:block}.tech-callout .circle-link{margin-top:25px}
}

/* Final mobile hero legibility */
@media(max-width:480px){
  .sub-lead{
    position:relative;
    z-index:4;
    color:#fff;
    text-shadow:0 1px 4px rgba(14,55,111,.28);
  }
  .sub-hero-service h1{
    color:var(--navy);
  }
}


/* CIAO fixed-image demo pattern 2026-09-28 */
.hero.hero-fixed{
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#f6f3ec!important;
  padding:var(--header-h) 0 26px!important;
}
.hero.hero-fixed:before,.hero.hero-fixed:after{display:none!important;content:none!important}
.hero-fixed-media{width:min(750px,100%);margin:0 auto;line-height:0}
.hero-fixed-media img{display:block;width:100%;height:auto}
.hero-fixed-actions{
  width:min(680px,calc(100% - 48px));margin:18px auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px
}
.hero-fixed-btn{
  min-height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  padding:0 18px;font-weight:800;font-size:15px;letter-spacing:.02em;
  border:2px solid var(--navy);transition:.2s
}
.hero-fixed-btn.primary{background:var(--navy);color:#fff}
.hero-fixed-btn.secondary{background:#fff;color:var(--navy)}
.hero-fixed-btn:hover{transform:translateY(-2px)}
.home-tech-graphic.home-tech-image{
  display:block!important;min-height:0!important;background:none!important;overflow:hidden!important;
  border-radius:26px!important
}
.home-tech-graphic.home-tech-image:before,
.home-tech-graphic.home-tech-image:after{display:none!important;content:none!important}
.home-tech-graphic.home-tech-image img{display:block;width:100%;height:auto;border-radius:26px}
@media(max-width:700px){
  .hero.hero-fixed{padding-top:90px!important;padding-bottom:18px!important}
  .hero-fixed-actions{width:calc(100% - 36px);gap:9px;margin-top:12px}
  .hero-fixed-btn{min-height:48px;font-size:12px;padding:0 10px}
  .home-tech-graphic.home-tech-image{margin-top:26px!important}
}
@media(max-width:360px){
  .hero-fixed-actions{grid-template-columns:1fr}
}


/* Ide Bankin hero mobile hardening 2026-09-28 */
html,body{max-width:100%;overflow-x:clip}
main{width:100%;max-width:100%}
.hero.hero-fixed{
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding-left:0!important;
  padding-right:0!important;
}
.hero-fixed-media{
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
}
.hero-fixed-media img{
  display:block!important;
  width:100vw!important;
  max-width:none!important;
  height:auto!important;
}
@media(max-width:820px){
  .site-header{
    height:96px!important;
    padding:0!important;
    background:transparent!important;
    pointer-events:none!important;
  }
  .site-header .brand,
  .site-header .desktop-nav{
    display:none!important;
  }
  .site-header .menu-button{
    position:absolute!important;
    top:6px!important;
    right:8px!important;
    width:126px!important;
    height:84px!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    pointer-events:auto!important;
  }
  .hero.hero-fixed{
    padding-top:0!important;
    padding-bottom:18px!important;
  }
  .hero-fixed-actions{
    width:calc(100% - 32px)!important;
    margin:12px auto 0!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .hero-fixed-btn{
    min-height:48px!important;
    padding:0 8px!important;
    font-size:12px!important;
    line-height:1.3!important;
    text-align:center!important;
  }
}
@media(max-width:360px){
  .hero-fixed-actions{grid-template-columns:1fr!important}
}


/* CIAO mobile hotfix 2026-09-28
   Fixed-image hero must own the full viewport width.
   Hide the separate site header on mobile because the approved hero artwork already contains the shop/company name and menu treatment. */
@media (max-width: 820px){
  .site-header{display:none!important}
  .hero.hero-fixed{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 0 18px!important;
    overflow:hidden!important;
  }
  .hero-fixed-media{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .hero-fixed-media img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
  }
  .hero-fixed-actions{
    width:calc(100% - 36px)!important;
    margin:12px auto 0!important;
  }
}


/* CIAO mobile containment fix 2026-09-28
   Prevent any fixed visual, grid child, heading or decorative element from widening the iPhone viewport. */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip!important;
}
main{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
@media(max-width:820px){
  main, main *{box-sizing:border-box}
  main section,
  .home-tech,
  .knowledge,
  .service,
  .company,
  .profile,
  .information,
  .message-grid,
  .contact-inner{
    max-width:100%!important;
    min-width:0!important;
  }
  .home-tech{
    width:calc(100% - 36px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px!important;
  }
  .home-tech > *{
    min-width:0!important;
    max-width:100%!important;
  }
  .home-tech-graphic.home-tech-image{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .home-tech-graphic.home-tech-image img,
  .hero-fixed-media img,
  .company-visual img,
  .service-image img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
  }
  .home-tech-left h2,
  .section-heading h2{
    max-width:100%!important;
    overflow-wrap:anywhere;
  }
  .floating-contact{
    max-width:calc(100vw - 24px)!important;
    right:12px!important;
  }
}


/* CIAO mobile typography fit 2026-09-28 */
@media(max-width:820px){
  .home-tech-left h2{
    font-size:52px!important;
    line-height:.9!important;
    letter-spacing:-.035em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .knowledge .section-heading h2{
    font-size:48px!important;
    line-height:.92!important;
    letter-spacing:-.03em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .company-content .section-heading h2,
  .information-head h2{
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
}