/* ============================================================
   SG Leather 鑫革皮房 — 全站共用樣式
   設計系統依美編「網站版型佈局規範」實作
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --umber:   #4C362D;
  --tan:     #A7805A;
  --gold:    #C8AF8F;
  --bg:      #DEDCD6;
  --white:   #F5F5F0;
  --taupe:   #CBB9A3;
  --fossil:  #363D37;
  --noir:    #353433;
  --forest:  #4D5038;
  --sage:    #666D57;
  --sage-bg: #C2C8B2;
}

html { scroll-behavior: smooth; }

body {
  background: #F5F5F0;
  color: var(--fossil);
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.en { font-family: 'Inter', sans-serif; }

h1, h2, .serif { font-family: 'Noto Serif TC', 'Lora', Georgia, serif; }

h1 {
  font-family: 'Noto Serif TC', 'Lora', Georgia, serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400; line-height: 1.6;
  letter-spacing: 0.18em; color: var(--noir);
  margin-bottom: 28px;
}
h2 {
  font-family: 'Noto Serif TC', 'Lora', Georgia, serif;
  font-size: clamp(24px, 2.4vw, 28px);
  font-weight: 400; line-height: 1.6;
  letter-spacing: 0.16em; color: var(--noir);
}
h3 {
  font-family: 'Noto Sans TC', 'Inter', sans-serif;
  font-size: 18px; font-weight: 500;
  line-height: 1.6; letter-spacing: 0.08em;
}
.label, .hero-label, .svc-num {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-size: 13px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 48px; }

/* ── NAV ─────────────────────────────────────────────────── */
#nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 28px 48px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .35s, padding .35s;
}
#nav.solid {
  background: #F5F5F0; padding-top: 18px; padding-bottom: 18px;
  box-shadow: 0 1px 0 rgba(167,128,90,.15);
}
.nav-left { display: flex; align-items: center; gap: 28px; }
.logo { text-decoration: none; display: flex; align-items: center; }
.logo img { height: 32px; width: auto; display: block; }
.lang {
  display: inline-flex; gap: 4px;
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .12em;
  white-space: nowrap;
}
.lang a {
  color: var(--fossil); opacity: .45; text-decoration: none;
  transition: opacity .2s;
}
.lang a:hover, .lang a[aria-current="true"] { opacity: 1; }
.lang span { opacity: .3; }

.burger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--fossil); transition: transform .3s, opacity .3s; }

/* ── SLIDE-IN MENU ───────────────────────────────────────── */
#overlay { position: fixed; inset: 0; z-index: 200; background: rgba(54,61,55,0); pointer-events: none; transition: background .4s; }
#overlay.open { background: rgba(54,61,55,.22); pointer-events: all; }

#panel {
  position: fixed; top: 0; right: -420px; bottom: 0; width: 380px;
  background: var(--forest); z-index: 201;
  padding: 36px 44px 44px 44px;
  display: flex; flex-direction: column; overflow-y: auto;
  transition: right .4s cubic-bezier(.25,.46,.45,.94);
}
#panel.open { right: 0; }
.panel-close {
  align-self: flex-end; background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--white); opacity: .45;
  margin-bottom: 40px; transition: opacity .2s;
}
.panel-close:hover { opacity: 1; }
.panel-sec { margin-bottom: 26px; }
.panel-sec-label {
  font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); opacity: .65; margin-bottom: 10px;
}
.panel-links { display: flex; flex-direction: column; gap: 0; }
.panel-link {
  font-family: 'Noto Sans TC', sans-serif; font-size: 19px; font-weight: 700;
  color: var(--white); text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid rgba(200,175,143,.18);
  transition: color .2s;
}
.panel-link:hover { color: var(--gold); }
.panel-hint {
  font-family: 'Noto Sans TC', sans-serif; font-size: 13px; font-weight: 300;
  color: var(--gold); opacity: .6; padding: 6px 0 12px;
  border-bottom: 1px solid rgba(200,175,143,.18);
}
.panel-cta {
  margin-top: auto; display: inline-block; text-align: center;
  background: #CBB9A3; color: var(--fossil);
  font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; padding: 14px 28px;
  transition: background .25s;
}
.panel-cta:hover { background: #bca890; }

/* ── DIVIDERS / BUTTONS ──────────────────────────────────── */
.rule { height: 1px; background: var(--tan); opacity: .2; }

.btn-f, .btn-s, .btn-u {
  display: inline-block;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding: 13px 28px; border: none; cursor: pointer;
  transition: background .25s;
}
.btn-f { background: var(--forest); color: var(--white); }
.btn-f:hover { background: var(--sage); }
.btn-s { background: var(--sage); color: var(--white); }
.btn-s:hover { background: var(--forest); }
.btn-u { background: #CBB9A3; color: var(--fossil); }
.btn-u:hover { background: #bca890; }

/* ── IMAGE PLACEHOLDER (給美工填空用) ─────────────────────── */
.img-ph {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, #e7e4dd 0 12px, #ded9d0 12px 24px);
}
.img-ph figcaption {
  position: relative; font-family: monospace; font-size: 11px;
  color: var(--fossil); opacity: .5; text-align: center; line-height: 1.7;
  padding: 8px 14px; background: rgba(245,245,240,.7); border-radius: 2px;
}

/* ── HERO ────────────────────────────────────────────────── */
#hero { padding-top: 96px; background: #F5F5F0; }
.hero-split {
  display: grid; grid-template-columns: 5fr 6fr; gap: 64px;
  align-items: start; padding: 80px 0 100px;
}
.hero-label {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fossil); opacity: .5; margin-bottom: 32px; display: block;
}
.hero-cta {
  display: inline-block; margin-top: 40px; padding: 14px 36px;
  background: #4D5038; color: #F5F5F0;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  transition: background .25s;
}
.hero-cta:hover { background: #363D37; }
.hero-body {
  font-family: 'Noto Sans TC', 'Inter', sans-serif; font-size: 15px;
  font-weight: 400; line-height: 2.0; color: var(--fossil); opacity: .68;
  max-width: 300px; margin-top: 6px;
}
.hero-float-wrap { position: relative; padding: 0 0 30px 0; }
.hero-float-wrap::after {
  content: ''; position: absolute; top: 30px; bottom: 0; left: 30px; right: -24px;
  background: var(--taupe); z-index: 0;
}
.hero-photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ── STATEMENT ───────────────────────────────────────────── */
#statement { padding: 72px 0; }
.statement-text {
  font-family: 'Noto Serif TC', 'Lora', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 400;
  line-height: 1.65; color: #353433; text-align: center;
  max-width: 760px; margin: 0 auto; letter-spacing: .05em;
}

/* ── SERVICES ────────────────────────────────────────────── */
#services { background: #DEDCD6; padding: 120px 0 140px; }
.svc-section-header { text-align: center; margin-bottom: 100px; }
.svc-section-tag {
  font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.3em;
  text-transform: uppercase; color: #4D5038; display: block; margin-bottom: 20px;
}
.svc-section-title {
  font-family: 'Noto Serif TC', 'Lora', Georgia, serif;
  font-size: clamp(28px, 3vw, 36px); font-weight: 400;
  letter-spacing: 0.18em; color: #353433;
}
.svc-list { display: flex; flex-direction: column; gap: 100px; max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.svc-row:nth-child(even) .svc-text-box { order: -1; }
.svc-img-box { background: #F5F5F0; height: 420px; overflow: hidden; }
.svc-img-box img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.svc-text-box { max-width: 480px; }
.svc-meta {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #A7805A; padding-bottom: 12px; margin-bottom: 28px;
}
.svc-num { font-family: 'Lora', Georgia, serif; font-size: 14px; font-weight: 400; letter-spacing: 0.12em; color: #A7805A; }
.svc-label { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.2em; color: #87826c; text-transform: uppercase; }
.svc-name {
  font-family: 'Noto Serif TC', 'Lora', Georgia, serif;
  font-size: 26px; font-weight: 400; letter-spacing: 0.14em;
  color: #353433; margin-bottom: 24px; line-height: 1.5;
}
.svc-desc { font-family: 'Noto Sans TC', 'Inter', sans-serif; font-size: 14px; line-height: 2.0; color: var(--fossil); opacity: .75; margin-bottom: 36px; }
.svc-link {
  font-family: 'Noto Sans TC', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.05em; color: #363D37; text-decoration: none;
  border-bottom: 1px solid #363D37; padding-bottom: 5px; display: inline-block;
  transition: color .25s, border-color .25s, padding-left .25s;
}
.svc-link:hover { color: #4D5038; border-bottom-color: #4D5038; padding-left: 8px; }

/* ── OTHER SERVICES ──────────────────────────────────────── */
#other { padding: 80px 0; background: #F5F5F0; }
.other-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: stretch; }
.other-mid-text { font-family: 'Noto Sans TC', 'Inter', sans-serif; font-size: 14px; line-height: 2.0; color: var(--fossil); opacity: .75; }
.other-card { background: var(--sage); padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; height: 100%; }
.other-card-label { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: .8; }
.other-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.other-tag {
  font-family: 'Noto Sans TC', sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 0.04em;
  color: #F5F5F0; border: 1px solid rgba(245,245,240,.3); border-radius: 6px;
  padding: 6px 16px; background: transparent; transition: background .2s, border-color .2s; cursor: default;
}
.other-tag:hover { background: rgba(167,128,90,.4); border-color: rgba(167,128,90,.7); }
.other-card-cta {
  margin-top: 8px; display: inline-block; align-self: flex-start; border: 1px solid #CBB9A3;
  color: #CBB9A3; background: none; font-family: 'Inter', sans-serif; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 10px 22px;
  transition: background .25s, color .25s;
}
.other-card-cta:hover { background: #CBB9A3; color: #353433; }

/* ── CONTACT ─────────────────────────────────────────────── */
#contact { background: var(--forest); padding: 80px 0 100px; }
.contact-top { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: stretch; margin-bottom: 48px; }
#contact .lbl { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: .7; }
#contact h2 { color: var(--white); font-size: clamp(24px, 3vw, 38px); max-width: 480px; line-height: 1.45; margin: 14px 0 0; letter-spacing: .14em; }
.contact-sub { font-family: 'Noto Sans TC', sans-serif; font-size: 14px; color: var(--white); opacity: .65; line-height: 1.95; max-width: 400px; margin: 18px 0 32px; }

/* contact form */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field label { font-family: 'Inter','Noto Sans TC',sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: .8; }
.cf-field input, .cf-field textarea, .cf-field select {
  font-family: 'Noto Sans TC', sans-serif; font-size: 14px; color: var(--white);
  background: rgba(0,0,0,.16); border: 1px solid rgba(200,175,143,.28);
  padding: 12px 14px; border-radius: 2px; transition: border-color .2s, background .2s;
  width: 100%;
}
.cf-field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: rgba(245,245,240,.35); }
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,.24); }
.cf-field select { appearance: none; cursor: pointer; }
.cf-field select option { color: #353433; }
.cf-submit {
  align-self: flex-start; margin-top: 6px; background: #CBB9A3; color: var(--fossil);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; border: none; padding: 14px 36px; cursor: pointer; transition: background .25s, opacity .25s;
}
.cf-submit:hover { background: #bca890; }
.cf-submit:disabled { opacity: .55; cursor: default; }
.cf-status { font-family: 'Noto Sans TC', sans-serif; font-size: 13px; line-height: 1.7; min-height: 20px; }
.cf-status.ok { color: #cfe0b8; }
.cf-status.err { color: #e8b9a8; }
.cf-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.contact-map {
  width: 100%; flex: 1; min-height: 340px; display: block;
  border: 1px solid rgba(200,175,143,.18);
}
.map-link {
  align-self: flex-start;
  font-family: 'Inter','Noto Sans TC',sans-serif; font-size: 12px; letter-spacing: .06em;
  color: var(--gold); opacity: .75; text-decoration: none; transition: opacity .2s;
}
.map-link:hover { opacity: 1; }
.contact-map-label { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--white); opacity: .55; }
.contact-map-addr { font-family: 'Noto Sans TC', sans-serif; font-size: 13px; color: var(--white); opacity: .5; text-align: center; line-height: 1.7; }

.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin-top: 56px; padding-top: 44px; border-top: 1px solid rgba(200,175,143,.18); }
.info-block .lbl2 { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: .6; margin-bottom: 10px; }
.info-block .val { font-family: 'Noto Sans TC', sans-serif; font-size: 14px; color: var(--white); opacity: .7; line-height: 1.95; }
.info-block .val a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(245,245,240,.3); }
.info-block .val a:hover { border-color: var(--gold); }
.social-col { display: flex; flex-direction: column; gap: 6px; }
.soc { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: .04em; color: var(--white); opacity: .55; text-decoration: none; transition: opacity .2s; }
.soc:hover { opacity: 1; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer { background: #353433; padding: 28px 48px; }
.foot-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.foot-logo { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); text-decoration: none; }
.foot-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.foot-copy { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .06em; color: var(--taupe); opacity: .5; }
.foot-lang { display: inline-flex; gap: 4px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .1em; }
.foot-lang a { color: var(--taupe); opacity: .55; text-decoration: none; }
.foot-lang a:hover, .foot-lang a[aria-current="true"] { opacity: 1; }

/* ============================================================
   子網頁共用元件 (sub-page templates)
   ============================================================ */
.subpage main { padding-top: 0; }
.page-hero {
  position: relative; padding: 150px 0 70px; background: var(--white);
  border-bottom: 1px solid rgba(167,128,90,.18);
}
.page-hero.on-dark { background: var(--forest); border-bottom: none; }
.breadcrumb { font-family: 'Inter','Noto Sans TC',sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--fossil); text-decoration: none; }
.breadcrumb a:hover { opacity: .7; text-decoration: underline; }
.page-hero.on-dark .breadcrumb, .page-hero.on-dark .breadcrumb a { color: var(--gold); }
.page-eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--tan); display: block; margin-bottom: 18px; }
.page-hero.on-dark .page-eyebrow { color: var(--gold); }
.page-hero h1 { margin-bottom: 18px; }
.page-hero.on-dark h1 { color: var(--white); }
.page-lead { font-family: 'Noto Sans TC', sans-serif; font-size: 16px; line-height: 2.0; color: var(--fossil); opacity: .72; max-width: 620px; }
.page-hero.on-dark .page-lead { color: var(--white); opacity: .72; }

.section { padding: 80px 0; }
.section.alt { background: var(--bg); }
.section-head { margin-bottom: 48px; }
.section-head .eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--tan); display: block; margin-bottom: 14px; }
.section-head h2 { letter-spacing: .12em; }

/* 圖文交錯區塊 */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature-row + .feature-row { margin-top: 72px; }
.feature-row:nth-child(even) .feature-text { order: -1; }
.feature-media { aspect-ratio: 3/2; overflow: hidden; background: var(--bg); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-text h3 { font-family: 'Noto Serif TC','Lora',serif; font-size: 22px; font-weight: 400; letter-spacing: .1em; color: var(--noir); margin-bottom: 16px; }
.feature-text p { font-size: 14px; line-height: 2.0; color: var(--fossil); opacity: .78; }
.feature-text p + p { margin-top: 14px; }

/* 條列清單 */
.list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 48px; }
.list-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(167,128,90,.18); }
.list-item .li-num { font-family: 'Lora', serif; font-size: 13px; color: var(--tan); padding-top: 2px; min-width: 26px; }
.list-item .li-body h4 { font-family: 'Noto Sans TC', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .04em; color: var(--noir); margin-bottom: 4px; }
.list-item .li-body p { font-size: 13px; line-height: 1.85; color: var(--fossil); opacity: .7; }

/* 步驟 / 流程 */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step { padding: 26px 22px; background: var(--white); border: 1px solid rgba(167,128,90,.2); }
.section.alt .step { background: var(--white); }
.step .step-num { font-family: 'Lora', serif; font-size: 22px; color: var(--tan); display: block; margin-bottom: 12px; }
.step h4 { font-family: 'Noto Sans TC', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--noir); margin-bottom: 8px; }
.step p { font-size: 13px; line-height: 1.8; color: var(--fossil); opacity: .72; }

/* 標籤卡 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: 'Noto Sans TC', sans-serif; font-size: 13px; font-weight: 300; color: var(--fossil); border: 1px solid var(--taupe); padding: 8px 18px; border-radius: 4px; transition: background .2s, color .2s, border-color .2s; cursor: default; }
.chip:hover { background: var(--fossil); color: var(--white); border-color: var(--fossil); }

/* FAQ (利於 GEO/AI 與 SEO) */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid rgba(167,128,90,.22); padding: 4px 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative;
  font-family: 'Noto Sans TC', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .03em; color: var(--noir);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-size: 22px; font-weight: 300; color: var(--tan); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0 22px; font-size: 14px; line-height: 2.0; color: var(--fossil); opacity: .8; max-width: 720px; }

/* CTA banner */
.cta-band { background: var(--forest); padding: 64px 0; text-align: center; }
.cta-band h2 { color: var(--white); letter-spacing: .14em; margin-bottom: 12px; }
.cta-band p { font-family: 'Noto Sans TC', sans-serif; font-size: 14px; color: var(--white); opacity: .68; max-width: 460px; margin: 0 auto 28px; line-height: 1.9; }

/* placeholder note for 美工 */
.fill-note {
  font-family: monospace; font-size: 11px; letter-spacing: .02em; line-height: 1.7;
  color: #8a6d44; background: #f3ede2; border: 1px dashed #c9b48f;
  padding: 4px 10px; border-radius: 3px; display: inline-block;
}


/* ── SUBPAGE NAV: always show 米白 background ─────────────── */
.subpage #nav {
  background: #F5F5F0;
  padding-top: 18px;
  padding-bottom: 18px;
  box-shadow: 0 1px 0 rgba(167,128,90,.15);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row:nth-child(even) .feature-text { order: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .list-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .svc-list { gap: 60px; }
  .svc-row, .svc-row:nth-child(even) { grid-template-columns: 1fr; gap: 32px; }
  .svc-row:nth-child(even) .svc-img-box { order: 0; }
  .svc-row:nth-child(even) .svc-text-box { order: 1; }
  .svc-img-box { height: 280px; }
  .other-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-top { grid-template-columns: 1fr; gap: 32px; }
  .cf-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-hero { padding: 120px 0 56px; }
  .foot-inner { flex-direction: column; gap: 18px; }
}
@media (max-width: 640px) {
  #nav { padding: 20px 24px; }
  .wrap, .svc-list { padding-left: 24px; padding-right: 24px; }
  footer { padding: 24px; }
  #panel { width: 100%; right: -100%; }
  .steps { grid-template-columns: 1fr; }
}