/* ==========================================================================
   トークン
   ========================================================================== */
:root{
  --cream:        #F7F3EA;
  --cream-alt:     #EEEFE6;
  --sage:          #E4E7DC;
  --sage-line:     #C9D0C0;
  --green-900:     #142B1E;
  --green-800:     #1B3A29;
  --green-700:     #234B34;
  --green-600:     #2F5F42;
  --gold:          #B5883F;
  --gold-dark:     #96702F;
  --ink:           #24291F;
  --ink-soft:      #4B5346;
  --white:         #FFFFFF;

  --font-serif: "Shippori Mincho", "Noto Serif JP", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  --container: 1180px;
  --gap-section: clamp(64px, 8vw, 128px);
  --radius: 4px;
}

/* ==========================================================================
   リセット & ベース
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size: 1rem; }

/* 日本語の改行制御:
   自動折り返しを基本としつつ、対応ブラウザでは意味のまとまり単位で折り返す。
   auto-phrase 非対応ブラウザでは通常の折返しにフォールバックする。 */
h1, h2, h3, p, li, dd, span, a, label, .faq-q h3, .flow-step p, .property-card p{
  overflow-wrap: normal;
  word-break: normal;
  line-break: strict;
}
@supports (word-break: auto-phrase){
  h1, h2, h3, p, .section-note, .contact-lead, .about-lead{
    word-break: auto-phrase;
  }
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

section.section{
  position: relative;
  padding-block: var(--gap-section);
  overflow: hidden;
}
section[id], main#top{ scroll-margin-top: 84px; }

.eyebrow{
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  margin: 0 0 14px;
}
.eyebrow-light{ color: rgba(255,255,255,.75); }
.eyebrow-line{
  position: relative;
  padding-left: 32px;
}
.eyebrow-line::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:22px; height:1px;
  background: var(--gold);
}

.section-title{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.45rem, 5.4vw, 2.7rem);
  line-height: 1.5;
  color: var(--green-800);
  margin: 0 0 20px;
}
.section-title.light{ color: var(--cream); }

.section-note{
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.section-note.center{ text-align:center; margin-top: 28px; }

.section-foot{
  text-align:center;
  color: var(--ink-soft);
  font-size: .92rem;
  margin-top: 40px;
  position: relative;
}

.rule{ width:100%; height:1px; background: var(--sage-line); margin-block: 22px; }
.rule-light{ background: rgba(255,255,255,.28); }
.rule-accent{ width:56px; height:2px; background: var(--gold); margin-block: 18px; }

/* ==========================================================================
   装飾リーフ
   ========================================================================== */
.brand-leaf{ width:34px; height:34px; color: var(--green-700); flex-shrink:0; }
.brand-leaf--light{ color: rgba(255,255,255,.8); width:40px; height:40px; }

.deco{
  position:absolute;
  width: clamp(140px, 18vw, 220px);
  height: auto;
  color: var(--sage-line);
  opacity: .8;
  pointer-events: none;
  z-index: 0;
}
.deco-top-right{ top: 10px; right: -20px; transform: scaleX(-1); }
.deco-bottom-left{ bottom: -10px; left: -30px; transform: rotate(200deg); }
.deco-side{ top: 40px; left: -40px; color: rgba(255,255,255,.12); }

/* ==========================================================================
   プレースホルダー写真
   ========================================================================== */
.photo-placeholder{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: var(--radius);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  text-align:center;
  color: var(--green-700);
  font-size: .85rem;
  line-height: 1.6;
  overflow:hidden;
}
.photo-placeholder::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 18px);
  mix-blend-mode: overlay;
  opacity:.5;
}
.photo-placeholder--warm{ background: linear-gradient(155deg, #E8DFC8, #C9D2BE 55%, #A9BBA1); }
.photo-placeholder--soft{ background: linear-gradient(155deg, #DCE3D4, #C7D2C0); min-height: 200px; }
.photo-placeholder--dark{ background: linear-gradient(155deg, #274A35, #16301F); color: rgba(255,255,255,.85); }
.ph-icon{ width:42px; height:42px; position:relative; opacity:.75; }

.photo-frame{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-caption{
  display:block; text-align:right; font-size:.78rem; color: rgba(255,255,255,.55); margin-top:10px;
}
.photo-note{ text-align:right; font-size:.78rem; color: var(--ink-soft); margin-top: 18px; }

/* ==========================================================================
   ボタン
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 30px;
  font-size: .96rem;
  border-radius: 2px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn .arrow, .btn .arrow-down{ transition: transform .25s ease; }
.btn:hover .arrow{ transform: translateX(4px); }
.btn:hover .arrow-down{ transform: translateY(3px); }

.btn-primary{
  background: var(--green-800);
  color: var(--cream);
  box-shadow: 0 6px 18px rgba(20,43,30,.18);
}
.btn-primary:hover{ background: var(--green-700); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,43,30,.24); }

.btn-text{
  color: var(--green-800);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 16px 6px;
}
.btn-text:hover{ color: var(--gold-dark); }

.btn-outline-light{
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
  color: var(--cream);
}
.btn-outline-light:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }

.btn-block{ width:100%; justify-content:center; }

/* ==========================================================================
   ホバーで浮き上がる（写真・カード共通）
   ========================================================================== */
.lift-hover{
  transition: transform .35s cubic-bezier(.22,.9,.3,1), box-shadow .35s ease;
}
.lift-hover:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 38px rgba(20,40,25,.16);
}

/* ==========================================================================
   スクロール出現アニメーション（グループ単位で一括フェード＋ライズ）
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,.9,.3,1), transform .8s cubic-bezier(.22,.9,.3,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

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

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color: var(--sage-line);
  box-shadow: 0 6px 18px rgba(20,40,25,.06);
}
.header-inner{
  display:flex; align-items:center; gap: 24px;
  padding-block: 16px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand-text{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(0.82rem, 2.6vw, 1.05rem);
  color: var(--green-800);
  line-height: 1.3;
  display:flex; flex-direction:column;
  white-space: nowrap;
}
.brand-text small{ font-family: var(--font-sans); font-weight:500; font-size:.62rem; letter-spacing:.1em; color: var(--ink-soft); }

.site-nav{ display:flex; gap: clamp(16px, 2.6vw, 32px); }
.site-nav a{
  font-size: .92rem;
  color: var(--ink);
  position: relative;
  padding-block: 4px;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.site-nav a:hover::after{ transform: scaleX(1); }

.header-tel{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--green-800);
  white-space: nowrap;
}
.header-tel svg{ width:18px; height:18px; }

.nav-toggle{
  display:none;
  width: 36px; height: 30px;
  background:none; border:none;
  flex-direction:column; justify-content:space-between;
  padding: 3px 0;
}
.nav-toggle span{ display:block; height:2px; background: var(--green-800); border-radius:1px; }

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero{ position:relative; background: var(--cream); padding-top: clamp(40px,6vw,72px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-bg-fade{
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    var(--cream) 0%,
    var(--cream) 40%,
    rgba(247,243,234,.82) 54%,
    rgba(247,243,234,.35) 68%,
    rgba(247,243,234,0) 82%
  );
}
.hero-grid{
  position:relative;
  z-index:1;
  display:flex;
  min-height: clamp(440px, 66vh, 640px);
  align-items:center;
  margin-inline: 0;
  max-width: none;
  padding-left: clamp(24px, 6vw, 100px);
  padding-right: clamp(20px, 5vw, 40px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.hero-copy{ max-width: 760px; }
.hero-title{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.5vw, 3.5rem);
  line-height: 1.42;
  color: var(--green-800);
  margin: 0 0 26px;
  white-space: normal;
}
.hero-lead{ font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 36px; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap: 14px 28px; }

.hero-strip{ background: var(--green-800); color: var(--cream); }
.hero-strip-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap: 12px 24px;
  padding-block: 16px;
  font-size: .92rem;
}
.hero-strip-tel{ display:flex; align-items:center; gap:8px; }
.hero-strip-tel svg{ width:16px; height:16px; }
.hero-strip-tel strong{ font-family: var(--font-serif); font-size: 1.15rem; letter-spacing:.02em; }
.hero-strip-divider{ width:1px; height:16px; background: rgba(255,255,255,.3); }

/* ==========================================================================
   ご相談の入口
   ========================================================================== */
.concerns{ background: var(--cream); }
.section-head{ max-width: 760px; margin-bottom: 48px; }

.concern-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--sage-line);
  position: relative; z-index:1;
}
.concern-item{
  display:flex; flex-direction:column; justify-content:space-between; gap: 22px;
  padding: 30px 26px;
  border-bottom: 1px solid var(--sage-line);
  transition: background-color .25s ease;
}
.concern-item:nth-child(3n+1),
.concern-item:nth-child(3n+2){ border-right: 1px solid var(--sage-line); }
.concern-item:hover{ background: rgba(255,255,255,.55); }
.concern-text{ font-size: 1.08rem; font-weight:500; color: var(--ink); }
.concern-link{ color: var(--gold-dark); font-size: .92rem; display:inline-flex; align-items:center; gap:6px; }

.wave-divider{
  height: 46px;
  background: var(--sage);
  clip-path: ellipse(60% 100% at 50% 100%);
  margin-top: 40px;
}

/* ==========================================================================
   サービス詳細（相続・遺言・成年後見）
   ========================================================================== */
.service-split{ background: var(--cream-alt); }
.service-split-grid{
  display:grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
}
.service-photo{ aspect-ratio: 3/4; border-radius: var(--radius); overflow:hidden; }
.service-photo .photo-placeholder, .service-photo .photo-frame{ min-height:100%; }

.numbered-list li{
  display:grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  padding-block: 24px;
  border-top: 1px solid var(--sage-line);
}
.numbered-list li:last-child{ border-bottom: 1px solid var(--sage-line); }
.numbered-list .num{
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--gold);
}
.numbered-list h3{ margin: 0 0 8px; font-size: 1.15rem; color: var(--green-800); }
.numbered-list p{ margin: 0 0 6px; color: var(--ink-soft); font-size: .95rem; }
.numbered-list .example{ font-size: .84rem; color: #7C8570; }

/* ==========================================================================
   不動産登記・会社設立・金銭貸借
   ========================================================================== */
.property{ background: var(--sage); }
.section-head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.section-head-row .section-note{ max-width: 320px; }

.property-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.property-card .photo-placeholder, .property-card .photo-frame{ aspect-ratio: 4/3; margin-bottom: 22px; min-height: 0; }
.property-card h3{ font-size: 1.1rem; color: var(--green-800); margin: 0 0 10px; }
.property-card p{ font-size: .92rem; color: var(--ink-soft); margin:0; }
.property-card .rule{ margin-block: 16px; background: var(--gold); width:28px; height:2px; }
.tag-line{ font-size: .9rem; color: var(--ink); }

/* ==========================================================================
   費用について
   ========================================================================== */
.costs{ background: var(--cream); }
.cost-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items:stretch;
  gap: 20px;
  margin-bottom: 8px;
}
.cost-card{
  background: var(--sage);
  border-radius: var(--radius);
  padding: 40px 34px;
  text-align:center;
}
.cost-icon{ width:44px; height:44px; margin: 0 auto 18px; color: var(--green-700); }
.cost-card h3{ font-size: 1.15rem; color: var(--green-800); margin:0; }
.cost-card .rule{ width:60px; margin: 18px auto; }
.cost-card p{ margin:0; font-size: .92rem; color: var(--ink-soft); }
.cost-plus{
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold);
}

.costs-cta{ background: var(--green-800); margin-top: 56px; }
.costs-cta-inner{
  display:flex; align-items:center; gap: 24px; flex-wrap:wrap;
  padding-block: 34px;
  position: relative;
}
.costs-cta .brand-leaf--light{ position:absolute; left: 8px; top:50%; transform: translateY(-50%); opacity:.5; }
.costs-cta-text{ margin-left: 56px; flex:1; min-width: 240px; color: var(--cream); }
.costs-cta-title{ font-family: var(--font-serif); font-size: 1.25rem; margin: 0 0 6px; }
.costs-cta-text p:last-child{ margin:0; color: rgba(255,255,255,.8); font-size:.92rem; }

/* ==========================================================================
   司法書士紹介
   ========================================================================== */
.about{ background: var(--green-800); }
.about-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
  position: relative; z-index:1;
}
.about-lead{ color: rgba(255,255,255,.82); margin-bottom: 30px; }
.about-office{ color: var(--cream); font-size: 1.05rem; margin:0 0 6px; }
.about-name{ color: rgba(255,255,255,.82); margin:0; }
.about-stance-label{ color: var(--gold); font-size: .88rem; margin:0 0 8px; }
.about-stance{ color: var(--cream); margin:0; }
.about-photo{ aspect-ratio: 1/1.05; border-radius: var(--radius); overflow:hidden; }
.about-photo .photo-placeholder, .about-photo .photo-frame{ min-height:100%; }

/* ==========================================================================
   ご相談の流れ
   ========================================================================== */
.flow{ background: var(--cream); }
.flow-track{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  position: relative;
  padding-top: 30px;
}
.flow-track::before{
  content:"";
  position:absolute; top: 45px; left: 4%; right: 4%; height:1px;
  background: var(--sage-line);
}
.flow-step{ position: relative; }
.flow-num{ font-family: var(--font-serif); color: var(--gold); font-size: 1.15rem; }
.flow-dot{
  display:block; width:9px; height:9px; border-radius:50%;
  background: var(--green-700); margin: 10px 0 22px;
}
.flow-icon{ width:34px; height:34px; color: var(--green-700); margin-bottom: 16px; }
.flow-step h3{ font-size: 1.02rem; color: var(--green-800); margin:0 0 8px; }
.flow-step p{ font-size: .9rem; color: var(--ink-soft); margin:0; }

.flow-note{
  display:flex; gap:16px; align-items:flex-start;
  background: var(--sage);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 44px;
}
.flow-note svg{ width:22px; height:22px; flex-shrink:0; margin-top:2px; color: var(--green-700); }
.flow-note p{ margin:0; font-size:.94rem; }
.flow-note span{ color: var(--ink-soft); font-size:.86rem; }

/* ==========================================================================
   よくあるご質問
   ========================================================================== */
.faq{ background: var(--sage); }
.faq-grid{
  display:grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
  gap: clamp(32px, 5vw, 64px);
  position: relative; z-index:1;
}
.faq-head .section-title{ margin-bottom: 0; }
.faq-item{ border-top: 1px solid var(--sage-line); padding-block: 22px; }
.faq-list{ border-bottom: 1px solid var(--sage-line); }
.faq-q{ display:flex; align-items:flex-start; gap: 16px; }
.faq-q h3{ margin:0; font-size: 1.05rem; color: var(--ink); font-weight: 700; flex:1; }
.faq-a{ display:flex; align-items:flex-start; gap: 16px; margin-top: 12px; }
.faq-a p{ margin:0; font-size:.92rem; color: var(--ink-soft); }
.faq-badge{
  flex-shrink:0;
  width: 26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: #CBD6C0; color: var(--green-800);
  font-size: .82rem; font-weight:700;
}
.faq-badge--a{ background: transparent; color: var(--ink-soft); }

/* ==========================================================================
   アクセス
   ========================================================================== */
.access{ background: var(--cream); }
.access-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items:stretch;
}
.access-table{ margin: 28px 0; }
.access-table > div{
  display:grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px;
  padding-block: 14px; border-top: 1px solid var(--sage-line);
}
.access-table > div:last-child{ border-bottom: 1px solid var(--sage-line); }
.access-table dt{ color: var(--ink-soft); font-size:.9rem; }
.access-table dd{ margin:0; }

.access-map{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  min-height: 340px;
  background: var(--green-800);
}
.access-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.contact{ background: var(--cream-alt); padding-bottom: 0; }
.contact-grid{
  display:grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: var(--gap-section);
}
.contact-lead{ color: var(--ink-soft); margin-bottom: 30px; }
.contact-tel-label{ font-size:.88rem; color: var(--ink-soft); margin:0 0 8px; }
.contact-tel{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-serif); font-size: 1.9rem; color: var(--green-800);
}
.contact-tel svg{ width:22px; height:22px; }
.contact-hours{ font-size:.88rem; color: var(--ink-soft); margin: 10px 0 30px; }
.contact-tagline{ font-size:.95rem; color: var(--green-700); }

.contact-form{
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 18px 40px rgba(20,40,25,.06);
}
.form-row{ margin-bottom: 22px; }
.form-row label, .form-label-standalone{ display:block; font-size:.9rem; margin-bottom: 8px; color: var(--ink); }
.req{ background: #E7C68A; color:#5C4319; font-size:.7rem; padding: 2px 6px; border-radius:2px; margin-left:4px; }
.form-row input[type=text], .form-row input[type=email], .form-row select, .form-row textarea{
  width:100%; padding: 13px 14px;
  border: 1px solid var(--sage-line);
  border-radius: 2px;
  background: var(--cream);
}
.form-row textarea{ resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: 2px solid var(--green-600); outline-offset: 1px;
}
.radio-group{ display:flex; gap: 24px; }
.radio-group label{ display:flex; align-items:center; gap:8px; font-size:.94rem; }

.privacy-details{ margin-bottom: 18px; font-size:.88rem; color: var(--ink-soft); }
.privacy-details summary{ cursor:pointer; color: var(--green-700); list-style:none; display:flex; gap:6px; }
.privacy-details summary::-webkit-details-marker{ display:none; }
.privacy-details p{ margin: 10px 0 0; }

.checkbox-row{ display:flex; align-items:center; gap:10px; font-size:.9rem; margin-bottom: 24px; }
.form-message{ margin-top: 14px; font-size:.9rem; color: var(--green-700); min-height: 1.4em; }

/* フッター */
.site-footer{ background: var(--green-800); color: rgba(255,255,255,.75); margin-top: var(--gap-section); }
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap: 20px 32px;
  padding-block: 24px;
  justify-content: space-between;
}
.brand--footer .brand-text{ color: var(--cream); }
.brand--footer .brand-text small{ color: rgba(255,255,255,.55); }
.brand--footer .brand-leaf{ color: rgba(255,255,255,.8); }
.footer-nav{ display:flex; gap: 24px; font-size:.88rem; }
.footer-copy{ font-size:.78rem; color: rgba(255,255,255,.5); margin:0; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 960px){
  .site-nav{
    position: fixed; inset: 64px 0 auto 0;
    background: var(--cream);
    flex-direction: column;
    padding: 12px 24px 24px;
    border-bottom: 1px solid var(--sage-line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .site-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .site-nav a{ padding-block: 12px; border-top: 1px solid var(--sage-line); }
  .nav-toggle{ display:flex; }
  .header-tel span{ display:none; }

  .hero-bg-fade{
    background: linear-gradient(180deg,
      var(--cream) 0%,
      var(--cream) 48%,
      rgba(247,243,234,.85) 66%,
      rgba(247,243,234,.4) 82%,
      rgba(247,243,234,.15) 100%
    );
  }
  .hero-copy{ max-width: none; }

  .concern-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concern-item:nth-child(3n+2){ border-right: 1px solid var(--sage-line); }
  .concern-item:nth-child(2n){ border-right: none; }

  .service-split-grid{ grid-template-columns: minmax(0, 1fr); }
  .service-photo{ order:-1; aspect-ratio: 16/9; }

  .property-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .cost-grid{ grid-template-columns: minmax(0, 1fr); }
  .cost-plus{ display:none; }

  .about-grid{ grid-template-columns: minmax(0, 1fr); }
  .about-photo{ order:-1; aspect-ratio: 16/9; }

  .flow-track{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 40px; }
  .flow-track::before{ display:none; }

  .faq-grid{ grid-template-columns: minmax(0, 1fr); }

  .access-grid{ grid-template-columns: minmax(0, 1fr); }
  .access-map{ min-height: 280px; }

  .contact-grid{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px){
  .concern-grid{ grid-template-columns: minmax(0, 1fr); }
  .concern-item{ border-right: none !important; }
  .property-grid{ grid-template-columns: minmax(0, 1fr); }
  .flow-track{ grid-template-columns: minmax(0, 1fr); }
  .section-head-row{ flex-direction: column; align-items:flex-start; }
  .costs-cta-text{ margin-left:0; }
  .costs-cta .brand-leaf--light{ display:none; }
  .access-map iframe{ position:relative; height:280px; }
  .access-map{ min-height:0; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}