/* ===== AOI ARCHITECTS - common ===== */
:root{
  --ink:#1d1f1c;
  --ink-soft:#5a5e58;
  --paper:#ffffff;
  --paper-soft:#f6f5f1;
  --paper-deep:#edebe4;
  --line:#e0ded6;
  --accent:#3f5e4e;       /* ディープグリーン */
  --accent-deep:#314a3d;
  --maxw:1180px;
  --serif:"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.9;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.container-narrow{max-width:780px;}

.serif{font-family:var(--serif);}
.en{font-family:var(--sans);letter-spacing:.18em;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;font-size:14.5px;font-weight:700;
  border:1px solid var(--ink);transition:.25s;cursor:pointer;background:none;font-family:inherit;}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn-fill{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-fill:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}
.btn .arrow{transition:.25s;}
.btn:hover .arrow{transform:translateX(4px);}

/* ===== Header ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:.3s;}
.site-header.scrolled{border-bottom-color:var(--line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{display:flex;flex-direction:column;line-height:1.15;}
.brand .brand-jp{font-family:var(--serif);font-size:19px;letter-spacing:.06em;font-weight:600;}
.brand .brand-en{font-size:10px;letter-spacing:.28em;color:var(--ink-soft);}
.gnav{display:flex;align-items:center;gap:30px;}
.gnav a{font-size:14px;font-weight:600;color:var(--ink-soft);position:relative;transition:.2s;}
.gnav a:hover,.gnav a.current{color:var(--ink);}
.gnav a.current::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);}
.gnav .btn{padding:10px 22px;font-size:13px;}
.hamburger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px;}
.hamburger span{width:26px;height:1.5px;background:var(--ink);transition:.25s;}
.hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ===== Page hero (lower pages) ===== */
.page-hero{padding:160px 0 70px;background:var(--paper-soft);border-bottom:1px solid var(--line);}
.page-hero .en{display:block;margin-bottom:12px;}
.page-hero h1{font-family:var(--serif);font-size:clamp(30px,4.5vw,46px);font-weight:600;letter-spacing:.04em;}
.page-hero .crumb{margin-top:14px;font-size:13px;color:var(--ink-soft);}
.page-hero .crumb a:hover{color:var(--accent);}

/* ===== Sections ===== */
.section{padding:100px 0;}
.section-head{margin-bottom:54px;}
.section-head.center{text-align:center;}
.section-head .en{display:block;margin-bottom:14px;}
.section-head h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:.04em;line-height:1.5;}
.section-head p{margin-top:18px;color:var(--ink-soft);font-size:15px;}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:#c8ccc6;padding:70px 0 30px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer-brand .brand-jp{font-family:var(--serif);font-size:22px;color:#fff;letter-spacing:.06em;}
.footer-brand .brand-en{font-size:10px;letter-spacing:.28em;color:#8a8f88;margin-top:4px;}
.footer-brand p{margin-top:18px;font-size:13px;color:#9aa098;max-width:320px;}
.footer-col h4{font-size:12px;letter-spacing:.16em;color:#8a8f88;margin-bottom:16px;text-transform:uppercase;}
.footer-col a,.footer-col p{display:block;font-size:14px;color:#c8ccc6;margin-bottom:10px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{margin-top:54px;padding-top:24px;border-top:1px solid #34372f;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:#80857d;}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ===== Home: hero ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;
  background:
    linear-gradient(105deg, rgba(18,22,19,.86) 0%, rgba(18,22,19,.56) 36%, rgba(18,22,19,.16) 70%, rgba(18,22,19,.04) 100%),
    linear-gradient(0deg, rgba(18,22,19,.5) 0%, rgba(18,22,19,0) 42%),
    url("../img/hero.jpg") center/cover no-repeat;
  background-color:#2a332d;
  color:#fff;padding-bottom:70px;overflow:hidden;}
.hero::before{display:none;}
.hero-inner{position:relative;z-index:2;}
.hero .en{color:#dfe6db;}
.hero h1{font-family:var(--serif);font-size:clamp(34px,6vw,68px);font-weight:500;line-height:1.4;letter-spacing:.05em;margin:18px 0 22px;}
.hero p{font-size:16px;max-width:520px;color:#eef1ec;}
.scroll-hint{position:absolute;left:28px;bottom:24px;font-size:11px;letter-spacing:.2em;color:#fff;z-index:3;writing-mode:vertical-rl;}

/* ===== Home: intro ===== */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.intro-figure{aspect-ratio:4/3;position:relative;overflow:hidden;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 40px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 40px),
  linear-gradient(160deg,#5a6a5f,#3a4840);}
.intro-figure::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><rect x='66' y='74' width='108' height='84'/><polyline points='58,78 120,42 182,78'/><rect x='106' y='116' width='30' height='42'/><rect x='80' y='90' width='24' height='22'/><rect x='136' y='90' width='24' height='22'/></svg>") center/56% no-repeat;}
.intro-text h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1.6;letter-spacing:.04em;margin-bottom:24px;}
.intro-text p{color:var(--ink-soft);margin-bottom:20px;}

/* ===== Service list (home + services) ===== */
.services-list{border-top:1px solid var(--line);}
.service-row{display:grid;grid-template-columns:80px 1fr 2fr auto;gap:30px;align-items:center;
  padding:34px 0;border-bottom:1px solid var(--line);transition:.25s;}
.service-row:hover{padding-left:14px;background:var(--paper-soft);}
.service-row .num{font-family:var(--serif);font-size:20px;color:var(--accent);}
.service-row h3{font-family:var(--serif);font-size:21px;font-weight:600;}
.service-row p{color:var(--ink-soft);font-size:14.5px;}
.service-row .more{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;}

/* ===== Works grid ===== */
.works-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;}
.works-filter button{background:none;border:1px solid var(--line);padding:8px 20px;font-size:13.5px;
  font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink-soft);transition:.2s;border-radius:999px;}
.works-filter button.active,.works-filter button:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.work-card{cursor:default;transition:.25s;}
.work-card .thumb{aspect-ratio:4/3;position:relative;overflow:hidden;background:#cdd0c7;}
.work-card .thumb i{position:absolute;inset:0;transition:.5s;}
.work-card:hover .thumb i{transform:scale(1.06);}
.work-card .meta{padding:16px 2px 0;}
.work-card .cat{font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:700;text-transform:uppercase;}
.work-card h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:6px 0 2px;}
.work-card .year{font-size:13px;color:var(--ink-soft);}
.thumb-a{background:linear-gradient(160deg,#9aa49a,#5b6b5f);}
.thumb-b{background:linear-gradient(160deg,#c9bfae,#8a7d68);}
.thumb-c{background:linear-gradient(160deg,#aeb6bd,#6c7780);}
.thumb-d{background:linear-gradient(160deg,#bcae9c,#7d6f5b);}
.thumb-e{background:linear-gradient(160deg,#9bb0a6,#4f655a);}
.thumb-f{background:linear-gradient(160deg,#b7b2a6,#7a7468);}
.thumb-grid{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 34px);}

/* ===== CTA band ===== */
.cta-band{background:var(--accent);color:#fff;text-align:center;padding:80px 0;}
.cta-band h2{font-family:var(--serif);font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:.04em;margin-bottom:14px;}
.cta-band p{color:#dce7df;margin-bottom:30px;}
.cta-band .btn{border-color:#fff;color:#fff;}
.cta-band .btn:hover{background:#fff;color:var(--accent);}

/* ===== About ===== */
.philosophy{text-align:center;max-width:780px;margin:0 auto;}
.philosophy .big{font-family:var(--serif);font-size:clamp(26px,4vw,42px);font-weight:500;line-height:1.7;letter-spacing:.05em;}
.philosophy p{color:var(--ink-soft);margin-top:26px;}
.info-table{width:100%;border-collapse:collapse;}
.info-table th,.info-table td{text-align:left;padding:18px 4px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top;}
.info-table th{width:200px;font-weight:700;}
.info-table td{color:var(--ink-soft);}
.history{position:relative;}
.history-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);}
.history-item .yr{font-family:var(--serif);font-size:18px;color:var(--accent);}
.history-item p{color:var(--ink-soft);font-size:14.5px;}
.message-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:center;}
.message-figure{aspect-ratio:3/4;background:linear-gradient(160deg,#8f9a8e,#5d6a5f);position:relative;overflow:hidden;}
.message-figure::before{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' fill='none' stroke='%23ffffff' stroke-opacity='0.78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='100' cy='84' r='40'/><path d='M36 214 C36 152 78 142 100 142 C122 142 164 152 164 214'/></svg>") center 38%/64% no-repeat;}
.message-figure::after{content:"代表";position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-family:var(--serif);font-size:15px;color:rgba(255,255,255,.85);letter-spacing:.32em;}
.message-text h3{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:20px;line-height:1.7;}
.message-text p{color:var(--ink-soft);margin-bottom:16px;}
.message-sign{margin-top:24px;font-size:14px;}
.message-sign strong{font-family:var(--serif);font-size:20px;font-weight:600;margin-left:10px;}

/* ===== Services detail ===== */
.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:60px 0;border-bottom:1px solid var(--line);}
.service-detail:nth-child(even) .sd-figure{order:2;}
.sd-figure{aspect-ratio:4/3;position:relative;}
.sd-figure span{position:absolute;left:20px;top:16px;font-family:var(--serif);font-size:64px;color:rgba(255,255,255,.55);}
.service-detail h3{font-family:var(--serif);font-size:26px;font-weight:600;margin-bottom:18px;}
.service-detail p{color:var(--ink-soft);margin-bottom:18px;}
.sd-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.sd-list li{padding-left:22px;position:relative;font-size:14.5px;}
.sd-list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--accent);}

/* ===== Contact form ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:54px;}
.contact-info h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:20px;}
.contact-info dl{margin-bottom:24px;}
.contact-info dt{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:4px;}
.contact-info dd{font-size:15px;margin-bottom:16px;}
.form{display:flex;flex-direction:column;gap:22px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-weight:700;font-size:14px;}
.req{font-size:10.5px;background:var(--accent);color:#fff;padding:2px 8px;margin-left:8px;font-weight:700;}
.form input,.form select,.form textarea{width:100%;padding:14px 16px;border:1px solid var(--line);
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);transition:.2s;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,94,78,.14);}
.form input.invalid,.form textarea.invalid{border-color:#c0492f;box-shadow:0 0 0 3px rgba(192,73,47,.12);}
.error{color:#c0492f;font-size:13px;}
.form-success{background:#e8efe9;border:1px solid var(--accent);color:var(--accent-deep);padding:14px 18px;font-size:14px;font-weight:600;}

/* ===== Responsive ===== */
@media(max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .intro-grid,.message-grid,.service-detail,.contact-grid{grid-template-columns:1fr;gap:36px;}
  .service-detail:nth-child(even) .sd-figure{order:0;}
  .works-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
  .gnav{position:fixed;top:78px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;
    gap:0;padding:8px 0;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:.3s;box-shadow:0 14px 24px rgba(0,0,0,.07);}
  .gnav.open{transform:translateY(0);}
  .gnav a{padding:14px 28px;}
  .gnav .btn{margin:8px 28px;justify-content:center;}
  .hamburger{display:flex;}
  .service-row{grid-template-columns:50px 1fr;gap:8px 16px;}
  .service-row p{grid-column:1/-1;}
  .service-row .more{grid-column:1/-1;}
  .works-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:30px;}
  .section{padding:70px 0;}
  .info-table th{width:120px;}
  .hero::before{left:24px;right:24px;width:auto;top:96px;height:190px;background-size:58%;}
}

/* ===== Figure illustrations (SVG placeholders) ===== */
.work-card .thumb i::after{content:"";position:absolute;inset:0;
  background-position:center;background-repeat:no-repeat;background-size:44%;}
.work-card .thumb i.thumb-a::after,
.work-card .thumb i.thumb-e::after{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><rect x='66' y='74' width='108' height='84'/><polyline points='58,78 120,42 182,78'/><rect x='106' y='116' width='30' height='42'/><rect x='80' y='90' width='24' height='22'/><rect x='136' y='90' width='24' height='22'/></svg>");}
.work-card .thumb i.thumb-b::after,
.work-card .thumb i.thumb-f::after{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><rect x='72' y='86' width='96' height='72'/><polyline points='60,86 72,64 168,64 180,86'/><rect x='88' y='106' width='28' height='52'/><rect x='128' y='106' width='26' height='28'/></svg>");}
.work-card .thumb i.thumb-c::after,
.work-card .thumb i.thumb-d::after{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><rect x='86' y='40' width='68' height='118'/><line x1='102' y1='58' x2='138' y2='58'/><line x1='102' y1='80' x2='138' y2='80'/><line x1='102' y1='102' x2='138' y2='102'/><line x1='102' y1='124' x2='138' y2='124'/><line x1='120' y1='40' x2='120' y2='158'/></svg>");}

.sd-figure{overflow:hidden;}
.sd-figure span{z-index:3;}
.sd-figure::before{content:"";position:absolute;inset:0;z-index:1;
  background-position:center;background-repeat:no-repeat;background-size:48%;}
.sd-figure.thumb-a::before{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.8' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><rect x='66' y='74' width='108' height='84'/><polyline points='58,78 120,42 182,78'/><rect x='106' y='116' width='30' height='42'/><rect x='80' y='90' width='24' height='22'/><rect x='136' y='90' width='24' height='22'/></svg>");}
.sd-figure.thumb-b::before{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.8' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><rect x='72' y='86' width='96' height='72'/><polyline points='60,86 72,64 168,64 180,86'/><rect x='88' y='106' width='28' height='52'/><rect x='128' y='106' width='26' height='28'/></svg>");}
.sd-figure.thumb-d::before{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.8' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><rect x='86' y='40' width='68' height='118'/><line x1='102' y1='58' x2='138' y2='58'/><line x1='102' y1='80' x2='138' y2='80'/><line x1='102' y1='102' x2='138' y2='102'/><line x1='102' y1='124' x2='138' y2='124'/><line x1='120' y1='40' x2='120' y2='158'/></svg>");}
.sd-figure.thumb-e::before{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23ffffff' stroke-opacity='0.8' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'><line x1='24' y1='158' x2='216' y2='158'/><line x1='120' y1='158' x2='120' y2='104'/><circle cx='120' cy='78' r='40'/><line x1='120' y1='116' x2='98' y2='98'/><line x1='120' y1='126' x2='144' y2='104'/></svg>");}

/* ===== Nav CTA button (robust) ===== */
.gnav a.btn-fill{color:#fff;}
.gnav a.btn-fill:hover{background:var(--accent-deep);color:#fff;}
.gnav a.btn-fill.current{color:#fff;}
.gnav a.btn-fill.current::after{display:none;}

/* ===== Photo replacements ===== */
.intro-figure{background:url("../img/about.jpg") center/cover no-repeat;}
.intro-figure::after{display:none;}

.work-card .thumb i.thumb-a{background:url("../img/work-residence.jpg") center/cover no-repeat;}
.work-card .thumb i.thumb-b{background:url("../img/work-cafe.jpg") center/cover no-repeat;}
.work-card .thumb i.thumb-c{background:url("../img/work-office.jpg") center/cover no-repeat;}
.work-card .thumb i.thumb-d{background:url("../img/work-machiya.jpg") center/cover no-repeat;}
.work-card .thumb i.thumb-e{background:url("../img/work-hiraya.jpg") center/cover no-repeat;}
.work-card .thumb i.thumb-f{background:url("../img/work-shop.jpg") center/cover no-repeat;}
.work-card .thumb i.thumb-a::after,
.work-card .thumb i.thumb-b::after,
.work-card .thumb i.thumb-c::after,
.work-card .thumb i.thumb-d::after,
.work-card .thumb i.thumb-e::after,
.work-card .thumb i.thumb-f::after{display:none;}