:root{
  --navy:#071a2f;
  --navy2:#0d2945;
  --gold:#b58a3c;
  --ink:#17202a;
  --muted:#68717a;
  --paper:#f8f7f3;
  --white:#fff;
  --line:#dfe2e3;
  --serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  --content:1200px;
  --gutter:32px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:var(--sans);line-height:1.8;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Global container: fluid up to 1200px, centered on large screens. */
.container{width:calc(100% - (var(--gutter) * 2));max-width:var(--content);margin-inline:auto}

.header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);z-index:20}
.header .inner{width:calc(100% - (var(--gutter) * 2));max-width:var(--content);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;min-width:0}
.logo{font-family:var(--serif);letter-spacing:.04em;font-size:25px;line-height:1;white-space:nowrap}
.logo small{display:block;font:9px var(--sans);letter-spacing:.12em;margin-top:7px;color:#53606a}
.nav{display:flex;gap:22px;align-items:center;font-size:12px;white-space:nowrap}
.nav a:hover{color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--navy);color:#fff;padding:13px 20px;font-size:12px;border:0;transition:.2s ease}
.btn:hover{background:var(--navy2);color:#fff}
.btn.gold{background:var(--gold)}
.btn.gold:hover{background:#9d762f}
.menu{display:none;border:0;background:none;font-size:24px}

/* Full-bleed hero, but typography is aligned to the 1200px content grid. */
.hero{min-height:620px;display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.hero-copy{padding:76px 56px 68px max(32px,calc((100vw - var(--content))/2));display:flex;flex-direction:column;justify-content:center;min-width:0}
.eyebrow{font-size:11px;letter-spacing:.24em;color:var(--gold);font-weight:600}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.35}
h1{font-size:clamp(42px,4.2vw,66px);margin:18px 0 20px;letter-spacing:.01em}
.hero-copy p{max-width:560px;color:#4f5961;font-size:14px;margin:0 0 22px}
.hero-copy .btn{width:min(100%,520px);justify-content:flex-start}
.hero-photo{min-height:620px;background-image:url("../images/city-hero-v6.jpg");background-size:cover;background-position:center center;background-repeat:no-repeat}

.section{padding:92px 0}
.section.alt{background:var(--paper)}
.section-head{display:flex;justify-content:space-between;gap:36px;align-items:end;margin-bottom:42px}
.section-head h2{font-size:clamp(30px,3vw,40px);margin:6px 0}
.section-head p{color:var(--muted);max-width:560px;margin:0;font-size:13px}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{border:1px solid var(--line);background:#fff;min-width:0}
.card img{width:100%;aspect-ratio:1.6;object-fit:cover}
.card-body{padding:22px}
.card .num{font:13px var(--serif);color:var(--gold)}
.card h3{font-size:21px;margin:6px 0}
.card p{font-size:13px;color:var(--muted);margin:0}

.problems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.problem{padding:18px 20px;border:1px solid var(--line);background:#fff;display:flex;gap:16px;align-items:center;min-width:0}
.problem strong{font-size:14px}
.problem span{font-size:22px;color:var(--gold);flex:0 0 auto}

.projects{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.project{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-width:0}
.project img{width:100%;aspect-ratio:1/1.18;object-fit:cover;opacity:.9;transition:.35s}
.project:hover img{transform:scale(1.04);opacity:.72}
.project .overlay{position:absolute;inset:auto 0 0;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.project h3{font-size:18px;margin:0}
.project p{font-size:11px;margin:3px 0 0}

.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.case{background:#fff;border:1px solid var(--line);min-width:0}
.case img{width:100%;aspect-ratio:1.7;object-fit:cover}
.case-body{padding:20px}
.case-label{font-size:10px;letter-spacing:.16em;color:var(--gold)}
.case h3{font-size:22px;margin:8px 0}
.case p{font-size:13px;color:var(--muted)}

.note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.note{border-top:2px solid var(--navy);padding-top:14px}
.note h3{font-size:19px}
.note p{font-size:12px;color:var(--muted)}

.cta{background:var(--navy);color:#fff;padding:70px 0}
.cta .inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{font-size:clamp(30px,3vw,42px);margin:0}
.cta p{color:#c6ced6}

.page-hero{background:var(--navy);color:#fff;padding:96px 0}
.page-hero h1{margin:10px 0;font-size:clamp(42px,4vw,58px)}
.page-hero p{max-width:650px;color:#cbd3da}

.service-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.service-detail img{width:100%;aspect-ratio:1.5;object-fit:cover}
.service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.service-list div{border-top:1px solid var(--line);padding:15px 0;font-size:13px}

.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:55px}
.profile-table{width:100%;border-collapse:collapse;font-size:13px}
.profile-table th,.profile-table td{padding:13px;border-bottom:1px solid var(--line);text-align:left}
.profile-table th{width:32%;color:var(--muted);font-weight:500}

.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:50px}
.form{display:grid;gap:15px}
.form label{font-size:12px}
.form input,.form textarea,.form select{width:100%;padding:14px;border:1px solid #ccd2d6;font:inherit}
.form textarea{min-height:170px}
.tel{font-size:30px;font-family:var(--serif);letter-spacing:.04em}
.small{font-size:12px;color:var(--muted)}

.footer{background:#061526;color:#cbd3da;padding:55px 0}
.footer .inner{display:flex;justify-content:space-between;gap:30px}
.footer .logo{color:#fff}
.footer a{font-size:12px}
.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:35px;padding-top:20px;font-size:10px;color:#7f8c98}

/* Large laptop / tablet: preserve the grid instead of allowing content to stretch. */
@media(max-width:1180px){
  :root{--gutter:28px}
  .nav{gap:16px;font-size:11px}
  .hero-copy{padding-left:28px;padding-right:42px}
}

@media(max-width:900px){
  :root{--gutter:24px}
  .nav{display:none}.menu{display:block}.header{height:66px}
  .hero{grid-template-columns:1fr}
  .hero-photo{min-height:460px;order:-1;background-position:center 42%}
  .hero-copy{padding:58px 24px 64px}
  .hero-copy h1{font-size:clamp(40px,7vw,52px)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-grid,.note-grid,.about-grid,.contact-grid,.service-detail{grid-template-columns:1fr}
  .cta .inner,.footer .inner{flex-direction:column;align-items:flex-start}
  .section{padding:72px 0}.page-hero{padding:75px 0}
}

@media(max-width:560px){
  :root{--gutter:20px}
  .hero-photo{min-height:330px}
  .hero-copy{padding:48px 20px 54px}
  .hero-copy h1{font-size:38px}
  .hero-copy p{font-size:13px}
  .cards,.problems,.service-list{grid-template-columns:1fr}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project h3{font-size:15px}.project .overlay{padding:15px}
  .section-head{display:block}.section-head h2{font-size:31px;margin-bottom:15px}
  .section-head .btn{margin-top:18px}
  .section{padding:62px 0}
  .page-hero{padding:62px 0}
}

/* Official MIO logo supplied by the client */
header .brand { display:inline-flex; align-items:center; flex:0 0 auto; }
header .brand img { display:block; width:auto; height:42px; max-width:235px; object-fit:contain; }
@media (max-width:768px) {
  header .brand img { height:34px; max-width:190px; }
}


/* =========================================================
   MIO V10 — Header / Global Navigation / Hero final layer
   ========================================================= */

.site-header,
header {
  position: relative;
  z-index: 100;
}

.site-header .inner,
header .inner,
.site-header .container,
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

header .brand {
  flex: 0 0 auto;
}

header .brand img {
  display: block;
  width: auto;
  height: 42px;
  max-width: 235px;
  object-fit: contain;
}

header nav,
.site-header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin-left: auto;
}

header nav a,
.site-header nav a {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
}

.hero {
  grid-template-columns: 48% 52%;
}

.hero-copy {
  min-width: 0;
}

.hero h1 {
  font-size: 48px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  header nav,
  .site-header nav {
    gap: 14px;
  }

  header nav a,
  .site-header nav a {
    font-size: 13px;
  }

  .hero h1 {
    font-size: 42px;
  }
}

@media (max-width: 900px) {
  header nav,
  .site-header nav {
    gap: 10px;
  }

  header nav a,
  .site-header nav a {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  header .brand img {
    height: 34px;
    max-width: 190px;
  }

  header nav,
  .site-header nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.4;
    white-space: normal;
  }
}


/* MIO V11 — rebuilt global header */
.header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);z-index:100;}
.header .inner{width:calc(100% - (var(--gutter) * 2));max-width:var(--content);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0;}
.header .brand{display:inline-flex;align-items:center;flex:0 0 auto;}
.header .brand img{display:block;width:auto;height:42px;max-width:235px;object-fit:contain;}
.header .nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-left:auto;white-space:nowrap;flex:0 1 auto;}
.header .nav a{display:inline-block;font-size:11px;line-height:1;text-decoration:none;white-space:nowrap;color:var(--ink);} 
.header .nav a:hover{color:var(--gold);}
@media(max-width:1180px){.header .nav{gap:11px}.header .nav a{font-size:10px}.header .brand img{height:38px;max-width:210px}}
@media(max-width:900px){.header{height:66px}.header .nav{display:none}.header .brand img{height:34px;max-width:190px}}

/* MIO V12.1 — hero headline overflow fix */
.hero{grid-template-columns:55% 45%;}
.hero-copy{padding-right:40px;}
.hero h1{font-size:clamp(26px,2.65vw,42px);line-height:1.35;white-space:normal;word-break:keep-all;overflow-wrap:normal;}

@media (max-width: 768px){
  .hero{grid-template-columns:1fr;}
  .hero-copy{padding:48px 20px 54px;}
  .hero h1{font-size:38px;line-height:1.4;white-space:normal;}
}