/* 한백하우징 담벼락보수 — THE WALL GALLERY 디자인 시스템
   Obsidian Green #161D1B(35%) / Limestone #EEE9DF(40%) / Acid Lime #D7F06B(포인트 8%)
   Brick Dust #9C5848(보조 포인트 7%) / Mineral Grey #778A87(텍스트·선 10%) */

:root{
  --charcoal:#161D1B;    /* Obsidian Green — 다크 섹션 */
  --terracotta:#9C5848;  /* Brick Dust — 보조 포인트(태그·라벨·작은 요소) */
  --lime:#D7F06B;        /* Acid Lime — 핵심 포인트(버튼·화살표·선, 좁게만) */
  --sand:#E2DFD6;        /* 보조 밝은 패널(Limestone 변형) */
  --ivory:#EEE9DF;       /* Limestone — 기본 배경 */
  --sage:#778A87;        /* Mineral Grey — 보조 텍스트 */
  --ink:#1B211F;         /* 본문 텍스트 */
  --slate:#161D1B;
  --line:#CFC9BA;
  --max:1200px;
  --max-wide:1400px;
  --gap-section:clamp(64px,9vw,136px);
  --radius:10px;
  --radius-sm:6px;
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--ivory);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--charcoal);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--max-wide);margin:0 auto;padding:0 24px}
.wrap-full{padding:0 24px}

/* ---- Typography ---- */
h1{font-weight:800;line-height:1.1;letter-spacing:-0.02em}
h2{font-size:clamp(23px,3vw,34px);font-weight:700;line-height:1.28;letter-spacing:-0.012em}
h3{font-size:17px;font-weight:700;line-height:1.4}
p{font-size:16px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--terracotta);text-transform:uppercase;margin-bottom:10px}
.lead{font-size:18px;color:var(--sage);max-width:640px}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 28px;border-radius:999px;font-weight:700;font-size:16px;
  transition:transform .15s ease,background .15s ease,opacity .15s ease;
}
.btn--primary{background:var(--charcoal);color:#fff}
.btn--primary:hover{opacity:.88}
.btn--ghost{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn--ghost:hover{background:var(--charcoal);color:#fff}
.btn--terracotta{background:var(--terracotta);color:#fff}
.btn--terracotta:hover{opacity:.9}
.btn--lime{background:var(--lime);color:var(--charcoal)}
.btn--lime:hover{opacity:.88}
.btn--sm{height:44px;padding:0 20px;font-size:14px}
.btn--block{width:100%}
.btn:active{transform:scale(.98)}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:100;background:var(--ivory);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-weight:800;font-size:18px;color:var(--charcoal)}
.brand__tag{font-size:11px;color:var(--terracotta);font-weight:700;letter-spacing:.03em}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:28px}
.main-nav a{font-size:15px;font-weight:600;color:var(--sage);padding:6px 2px;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav a.is-active{color:var(--charcoal);border-color:var(--lime)}
.nav-contact-item{display:none}
.header-cta{margin-left:12px;flex-shrink:0}
.menu-toggle{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;flex-shrink:0}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--charcoal);transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .main-nav{position:fixed;inset:76px 0 0 0;background:var(--ivory);transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;padding:12px 0 40px}
  .main-nav.is-open{transform:translateX(0)}
  .main-nav ul{flex-direction:column;gap:0;padding:0 24px}
  .main-nav a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}
  .header-cta{display:none}
  .menu-toggle{display:flex}
  .nav-contact-item{display:block}
  .nav-contact-item a{color:var(--terracotta)}
}

/* ============================================================
   1. 히어로 — 건축 전시회 오프닝
   ============================================================ */
.hero{
  position:relative;
  width:100%;
  min-height:650px;
  height:calc(100svh - 76px);
  max-height:920px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--charcoal);
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,center 35%);z-index:0}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(22,29,27,.86) 0%,rgba(22,29,27,.5) 30%,rgba(22,29,27,0) 58%);
}
.hero__eyebrow{color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.82;margin-bottom:22px}
.hero__content{position:relative;z-index:2;width:100%;padding:18px 0 clamp(56px,8vh,96px)}
.hero h1{color:#fff;font-size:clamp(46px,9vw,124px);margin-bottom:18px}
.hero__hook{font-size:clamp(17px,1.8vw,21px);font-weight:600;color:#F2EEE6;line-height:1.5;margin-bottom:26px;max-width:480px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.btn--line{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75)}
.btn--line:hover{background:rgba(255,255,255,.12)}
.hero__scrollline{position:absolute;left:0;right:0;bottom:0;z-index:2;height:2px;background:var(--lime)}

@media (max-width:980px){
  .hero{--hero-pos:center 28%;min-height:580px;height:calc(100svh - 76px)}
  .hero__scrim{background:linear-gradient(0deg,rgba(22,29,27,.92) 0%,rgba(22,29,27,.55) 36%,rgba(22,29,27,.08) 62%)}
  .hero h1{font-size:clamp(40px,14vw,64px)}
}

/* ---- Section shell ---- */
.sec{padding:var(--gap-section) 0}
.sec--tight{padding:clamp(44px,6vw,72px) 0}
.sec--sand{background:var(--sand)}
.sec--charcoal{background:var(--charcoal);color:#fff}
.sec--charcoal .sec__head p{color:#B9C2BF}
.sec__head{max-width:680px;margin-bottom:44px}
.sec__head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec__head p{color:var(--sage);margin-top:10px}
.sec__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}
.wrap--narrow{max-width:760px}
.text-link{font-size:14px;font-weight:700;color:var(--charcoal);white-space:nowrap;padding-bottom:4px;border-bottom:1.5px solid var(--lime)}
.text-link:hover{color:var(--terracotta)}
.sec--charcoal .text-link{color:#fff}
@media (max-width:620px){.sec__head--row{flex-direction:column;align-items:flex-start}}

[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ============================================================
   2. 가로형 프로젝트 필름 스트립
   ============================================================ */
.filmstrip{padding-top:4px}
.filmstrip__layout{display:grid;grid-template-columns:25% 75%}
.filmstrip__head{padding-right:32px}
.filmstrip__head .eyebrow{color:var(--terracotta)}
.filmstrip__nav{display:flex;gap:10px;margin-top:28px}
.filmstrip__navbtn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--charcoal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.filmstrip__navbtn:hover{background:var(--charcoal);color:#fff}
.filmstrip__track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 24px 20px 0;cursor:grab;
  scrollbar-width:none;
}
.filmstrip__track::-webkit-scrollbar{display:none}
.filmstrip__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.filmstrip__item{position:relative;flex-shrink:0;height:480px;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;background:var(--charcoal)}
.filmstrip__item--portrait{width:340px}
.filmstrip__item--landscape{width:620px}
.filmstrip__item--square{width:480px}
.filmstrip__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .5s ease}
.filmstrip__item:hover img{transform:scale(1.03)}
.filmstrip__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,29,27,.82) 0%,rgba(22,29,27,0) 45%)}
.filmstrip__cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;color:#fff;display:flex;flex-direction:column;gap:3px}
.filmstrip__cap small{font-size:11px;font-weight:700;color:var(--lime);text-transform:uppercase;letter-spacing:.05em}
.filmstrip__cap span{font-size:15.5px;font-weight:700}

@media (max-width:980px){
  .filmstrip__layout{grid-template-columns:1fr;gap:20px}
  .filmstrip__head{padding-right:0;display:flex;align-items:center;justify-content:space-between;gap:20px}
  .filmstrip__head-text{flex:1;min-width:0}
  .filmstrip__nav{margin-top:0;flex-shrink:0}
}
@media (max-width:620px){
  .filmstrip__item{height:420px}
  .filmstrip__item--portrait{width:78vw}
  .filmstrip__item--landscape{width:88vw}
  .filmstrip__item--square{width:82vw}
  .filmstrip__track{padding-right:12px}
  .filmstrip__nav{display:none}
}

/* ============================================================
   3. 대표 현장 전체 화면
   ============================================================ */
.feature{background:var(--charcoal)}
.feature__frame{position:relative;aspect-ratio:16/9;max-height:820px}
.feature__frame img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.feature__label{position:absolute;left:24px;top:24px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.feature__label::before{content:'';width:22px;height:1px;background:var(--lime)}
.feature__body{background:var(--ivory);padding:var(--gap-section) 0}
.feature__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.feature__zoom{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;margin:0}
.feature__zoom img{width:100%;height:100%;object-fit:cover}
.feature__info h2{margin-bottom:16px}
.feature__info .eyebrow{color:var(--terracotta)}
.feature__info p{color:var(--sage)}
.feature__after{margin-top:var(--gap-section);border-radius:var(--radius);overflow:hidden;aspect-ratio:21/9}
.feature__after img{width:100%;height:100%;object-fit:cover}
.feature__after-cap{margin-top:14px;font-size:13.5px;color:var(--sage)}
@media (max-width:900px){
  .feature__frame{aspect-ratio:4/3;max-height:none}
  .feature__grid{grid-template-columns:1fr;gap:24px}
  .feature__after{aspect-ratio:4/3}
}

/* ============================================================
   4. 건축 편집형 서비스 섹션
   ============================================================ */
.svc-cat{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin-bottom:28px;border-radius:16px;overflow:hidden}
.svc-cat--a{grid-template-columns:70% 30%}
.svc-cat--b{grid-template-columns:40% 60%}
.svc-cat--b .svc-cat__media{order:2}
.svc-cat--c{grid-template-columns:1fr}
.svc-cat--c .svc-cat__media{aspect-ratio:21/8}
.svc-cat__media{margin:0;aspect-ratio:4/3;background:var(--sand)}
.svc-cat__media img{width:100%;height:100%;object-fit:cover}
.svc-cat__body{background:var(--sand);padding:40px;display:flex;flex-direction:column;justify-content:center}
.svc-cat__body h3{font-size:clamp(20px,2vw,26px)}
.svc-cat__body p{color:var(--sage);margin-top:12px}
.svc-cat__list{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.svc-cat__list li{font-size:14.5px;padding-left:16px;position:relative}
.svc-cat__list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--terracotta)}
@media (max-width:820px){
  .svc-cat,.svc-cat--a,.svc-cat--b{grid-template-columns:1fr}
  .svc-cat__media,.svc-cat--c .svc-cat__media{aspect-ratio:16/10}
  .svc-cat--b .svc-cat__media{order:0}
  .svc-cat__body{padding:28px 24px}
}

/* ============================================================
   5. 손상 지도 (Obsidian Green)
   ============================================================ */
.damage-map{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:stretch}
.damage-map__media{border-radius:var(--radius);overflow:hidden;margin:0;position:relative}
.damage-map__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.damage-map__panel{display:flex;flex-direction:column;justify-content:center}
.damage-map__panel h2{color:#fff;margin-bottom:28px}
.damage-item{display:block;width:100%;text-align:left;padding:18px 2px;border-top:1px solid rgba(255,255,255,.16);cursor:pointer}
.damage-item:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.damage-item h3{color:#B9C2BF;transition:color .2s;display:flex;align-items:center;gap:10px}
.damage-item h3::before{content:'';width:0;height:1px;background:var(--lime);transition:width .2s}
.damage-item.is-active h3::before{width:18px}
.damage-item p{font-size:14px;color:#8E9A96;margin-top:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
.damage-item.is-active h3{color:var(--lime)}
.damage-item.is-active p{max-height:60px;opacity:1}
@media (max-width:900px){
  .damage-map{grid-template-columns:1fr;gap:28px}
  .damage-map__media{aspect-ratio:4/3}
}

/* ============================================================
   6. 현장 디테일 스트립 (전후 자료 없을 때 대체 갤러리)
   ============================================================ */
.detail-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.detail-strip li{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;position:relative}
.detail-strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.detail-strip{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   7. 브랜드 선언문 (Obsidian Green)
   ============================================================ */
.manifesto{text-align:center}
.manifesto__statement{color:#fff;font-size:clamp(26px,4.4vw,46px);font-weight:800;line-height:1.3;max-width:720px;margin:0 auto 48px}
.manifesto__photo{border-radius:var(--radius);overflow:hidden;max-width:980px;margin:0 auto;aspect-ratio:21/8}
.manifesto__photo img{width:100%;height:100%;object-fit:cover}
.manifesto__desc{color:#C7CFCC;max-width:560px;margin:36px auto 0;font-size:17px}
.manifesto__biz{margin-top:32px;display:inline-flex;flex-direction:column;gap:4px;font-size:14px;color:#8E9A96}
.manifesto__biz strong{color:#fff;font-size:15px}
@media (max-width:760px){.manifesto__photo{aspect-ratio:4/3}}

/* ============================================================
   8. FAQ + CTA
   ============================================================ */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq-item{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.faq-item:last-of-type{border-bottom:1px solid var(--line)}
.faq-item[hidden]{display:none}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;cursor:pointer;font-weight:700;font-size:15.5px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;font-weight:400;color:var(--terracotta);flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 2px 22px;color:var(--sage);font-size:14.5px}
.faq-more{text-align:center;margin-top:24px}

.sec--cta{padding:clamp(72px,10vw,120px) 0}
.cta-full{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-full h2{color:#fff}
.cta-full p{margin-top:10px;max-width:460px;color:#B9C2BF}
@media (max-width:700px){.cta-full{flex-direction:column;align-items:flex-start}}

/* ---- Case cards (목록 페이지 공용) ---- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-grid--5 .case-card:nth-child(1){grid-column:span 2;grid-row:span 2}
.case-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.case-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,29,27,.12)}
.case-card__thumb{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.case-grid--5 .case-card:nth-child(1) .case-card__thumb{aspect-ratio:4/5}
.case-card__thumb img{width:100%;height:100%;object-fit:cover}
.case-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.case-card__type{font-size:12px;font-weight:700;color:var(--terracotta)}
.case-card__title{font-size:17px}
.case-card__go{margin-top:auto;font-size:13px;font-weight:700;color:var(--charcoal);padding-top:10px}
.case-list-more{text-align:center;margin-top:40px}

@media (max-width:980px){
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid--5 .case-card:nth-child(1){grid-column:span 2;grid-row:auto}
  .case-grid--5 .case-card:nth-child(1) .case-card__thumb{aspect-ratio:16/9}
}
@media (max-width:620px){
  .case-grid{grid-template-columns:1fr}
  .case-grid--5 .case-card:nth-child(1){grid-column:span 1}
}

/* ---- Service cards (서비스/서비스종류 페이지 공용) ---- */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.service-card{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.service-card__num{font-size:13px;font-weight:800;color:var(--terracotta);flex-shrink:0;width:28px}
.service-card h3{margin-bottom:6px}
.service-card p{color:var(--sage);font-size:14px}
@media (max-width:760px){.service-grid{grid-template-columns:1fr}}

.note-box{background:var(--sand);border-radius:var(--radius);padding:24px 28px;margin-top:32px;border-left:4px solid var(--terracotta)}
.note-box p{font-size:15px;color:var(--ink)}

/* ---- CTA (서브페이지 공용 밴드) ---- */
.cta-band{background:var(--charcoal);color:#fff;border-radius:16px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{color:#fff}
.cta-band p{color:#B9C2BF;margin-top:8px}
.cta-band__actions{flex-shrink:0}
@media (max-width:760px){.cta-band{flex-direction:column;text-align:center;padding:36px 24px}}

/* ---- Footer ---- */
.site-footer{background:var(--charcoal);color:#fff;padding:56px 0 0}
.site-footer__inner{display:flex;justify-content:space-between;gap:40px;padding-bottom:40px;flex-wrap:wrap}
.site-footer__biz p{font-size:14px;color:#B9C2BF;line-height:1.9}
.site-footer__name{font-size:18px;font-weight:800;color:#fff!important;margin-bottom:6px}
.site-footer__nav ul{display:flex;flex-direction:column;gap:10px}
.site-footer__nav a{font-size:14px;color:#B9C2BF}
.site-footer__nav a:hover{color:var(--lime)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;font-size:13px;color:#7C8884}
@media (max-width:620px){
  .site-footer__inner{flex-direction:column;gap:28px}
}

/* ---- Breadcrumb / page intro (서브페이지 공통 인트로) ---- */
.page-intro{background:var(--sand);padding:56px 0 44px}
.breadcrumb{font-size:13px;color:var(--sage);margin-bottom:14px}
.breadcrumb a{color:var(--sage)}
.breadcrumb a:hover{color:var(--charcoal)}
.page-intro h1{color:var(--charcoal);font-size:clamp(30px,4.2vw,44px)}
.page-intro p{color:var(--sage);margin-top:12px;max-width:640px;font-size:16px}

/* ---- Case detail ---- */
.case-detail__meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.case-detail__type{font-size:12px;font-weight:700;color:var(--terracotta);background:var(--sand);padding:4px 12px;border-radius:999px}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--sage);margin-bottom:24px}
.back-link:hover{color:var(--charcoal)}
.case-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:36px 0}
.case-gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line)}
.case-gallery img,.case-gallery video{width:100%;aspect-ratio:4/3;object-fit:cover}
.case-gallery figcaption{padding:12px 16px;font-size:13.5px;color:var(--sage)}
.video-wrap{position:relative}
.video-wrap video{background:#000}
@media (max-width:700px){.case-gallery{grid-template-columns:1fr}}

/* ---- Contact page ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:0 auto}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.contact-card__icon{width:56px;height:56px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--terracotta)}
.contact-card h2{font-size:20px}
.contact-card p{color:var(--sage);font-size:14px}
@media (max-width:700px){.contact-grid{grid-template-columns:1fr}}

/* ---- utility ---- */
.center{text-align:center}
.mt-sm{margin-top:16px}