/* Salon Tóc Tony Xèo — stylesheet v2
   Chrome (header icon-only + hamburger off-canvas + Zalo nổi + back-to-top)
   được xây theo đúng pattern đã xác minh từ huynguyengroup.com, áp dụng cho quy mô 1 salon.
   Placeholder cần thay trước khi public: ảnh (.ph-block), tên/giá sản phẩm cụ thể,
   link Zalo/Messenger thật. */

/* Bảng màu — nền SÁNG theo yêu cầu, vẫn giữ vàng đồng làm màu nhấn vì đó là
   màu thật của logo/biển hiệu salon (xác nhận từ ảnh thật 2026-08-15). */
:root{
  --bg:#FAF5E9;
  --surface:#FFFFFF;
  --surface-2:#F1E8D3;
  --ink:#241E17;
  --ink-soft:#7C7060;
  --line:#E7DCC3;
  --accent:#B8842C;
  --accent-soft:#F4E7C8;
  --accent-ink:#7A5518;

  --font-display: ui-serif, "Iowan Old Style", "Noto Serif", "Times New Roman", serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:18px;}
@media(max-width:640px){ html{font-size:16px;} }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
/* text-wrap:balance cố tình KHÔNG dùng — gây lỗi vỡ dấu tiếng Việt khi kết hợp
   với font serif hệ thống trong một số trình duyệt (đã kiểm chứng thực tế). */
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;color:var(--ink);letter-spacing:-0.01em;}
p{margin:0 0 14px;max-width:60ch;font-size:1.05rem;line-height:1.65;}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
@media(min-width:1440px){ .container{max-width:1360px;} }
@media(min-width:1800px){ .container{max-width:1560px;padding:0 40px;} }
.eyebrow{
  display:inline-block;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent-soft);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}

/* ---------- header: 2 tầng, toàn icon ---------- */
.topbar{
  background:var(--ink);
  color:var(--bg);
  font-size:0.8rem;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:8px;
  padding-bottom:8px;
}
.topbar a{text-decoration:none;color:inherit;}
.topbar .hotline{font-variant-numeric:tabular-nums;font-weight:600;display:flex;align-items:center;gap:6px;color:#E9C067;}
.topbar .social-row a{
  width:30px;height:30px;border-radius:50%;padding:0;justify-content:center;
  opacity:0.85;
  background:transparent;
  color:var(--bg);
  border-color:color-mix(in srgb, var(--bg) 25%, transparent);
}
.topbar .social-row a .social-label{display:none;}
.topbar .social-row a:hover{opacity:1;background:transparent;color:#E9C067;border-color:#E9C067;transform:none;}

header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-main{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:14px 0;
}
.header-icons{display:flex;align-items:center;gap:10px;}
.header-icons.left{justify-content:flex-start;}
.header-icons.right{justify-content:flex-end;}
.icon-btn{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.icon-btn:hover{border-color:var(--accent);transform:translateY(-1px);}
/* Zalo dùng đúng màu xanh thương hiệu Zalo (#0068FF), không dùng màu nhấn vàng đồng
   của site, để nhận diện đúng chuẩn Zalo ngay từ màu sắc. */
.icon-btn.accent{background:#0068FF;color:#fff;border-color:#0068FF;}
.icon-btn.accent:hover{border-color:#0052CC;background:#0052CC;}

.wordmark{display:flex;flex-direction:column;align-items:center;line-height:1.05;text-decoration:none;color:var(--ink);}
.wordmark .name{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--accent-ink);letter-spacing:0.02em;}
.wordmark .tag{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px;}

.hamburger{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex:none;
}
.hamburger span, .hamburger span:before, .hamburger span:after{
  content:"";display:block;width:16px;height:2px;background:var(--ink);position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger span:before{position:absolute;top:-5px;}
.hamburger span:after{position:absolute;top:5px;}

/* ---------- off-canvas menu ---------- */
.offcanvas-scrim{
  position:fixed;inset:0;
  background:rgba(20,17,14,.45);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.offcanvas-scrim.open{opacity:1;pointer-events:auto;}

.offcanvas{
  position:fixed;
  top:0;right:0;
  height:100%;
  width:min(340px,86vw);
  background:var(--surface);
  z-index:91;
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex;flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,.15);
}
.offcanvas.open{transform:translateX(0);}
.offcanvas-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
}
.offcanvas-head .name{font-family:var(--font-display);font-size:1.2rem;}
.offcanvas-close{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.offcanvas nav{padding:12px 10px;overflow-y:auto;}
.offcanvas nav a{
  display:block;
  padding:14px 12px;
  text-decoration:none;
  color:var(--ink);
  font-size:1.02rem;
  border-radius:8px;
}
.offcanvas nav a:hover{background:var(--accent-soft);color:var(--accent-ink);}
.offcanvas-foot{
  margin-top:auto;
  padding:20px 22px;
  border-top:1px solid var(--line);
  display:flex;gap:10px;flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn-primary{background:var(--accent);color:var(--ink);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(184,132,44,.35);}
.btn-accent{background:var(--ink);color:var(--bg);}
.btn-accent:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.3);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-block{width:100%;justify-content:center;}

/* ---------- floating utilities ---------- */
.fab-zalo{
  position:fixed;
  right:20px;bottom:78px;
  width:58px;height:58px;
  border-radius:50%;
  background:#0068FF;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,104,255,.45);
  z-index:60;
  font-size:0.78rem;font-weight:700;letter-spacing:0.02em;
  transition:transform .2s ease, background .2s ease;
}
.fab-zalo:hover{background:#0052CC;transform:translateY(-2px);}
.back-to-top{
  position:fixed;
  right:20px;bottom:16px;
  width:54px;height:54px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}

/* ---------- hero: tối giản chữ, ảnh dẫn dắt (full-bleed, đúng phong cách mẫu) ---------- */
.hero{position:relative;border-top:none;}
.hero .ph-block{aspect-ratio:16/9;border-radius:0;border:none;}
@media(min-width:860px){ .hero .ph-block{aspect-ratio:21/8;} }
.hero .ph-block img{object-position:center 75%;}
.hero-caption{
  position:absolute;
  left:0;right:0;top:0;
  padding:24px;
  background:linear-gradient(180deg, rgba(0,0,0,.65), transparent 75%);
  color:#fff;
}
.hero-caption .slogan{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.3rem,3.5vw,2rem);
}
.hero-caption .sub{font-size:1.05rem;opacity:0.95;margin-top:6px;font-weight:500;}

/* quick links */
.quick-links{padding:0;border-top:none;}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.quick-grid a{
  background:var(--surface);
  padding:22px 16px;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  font-size:1rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-weight:700;
  transition:background .2s ease, color .2s ease;
}
.quick-grid a:hover{background:var(--accent-soft);color:var(--accent-ink);}

/* trust badge row */
.badge-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center;
}
@media(max-width:760px){ .badge-row{grid-template-columns:repeat(2,1fr);} }
.badge{padding:6px;}
.badge .ic{
  width:52px;height:52px;margin:0 auto 12px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
}
.badge b{display:block;font-size:1.1rem;}
.badge span{display:block;font-size:0.92rem;color:var(--ink-soft);margin-top:5px;}

/* ---------- placeholder image blocks ----------
   Tỉ lệ khai báo riêng theo từng khu vực bên dưới (vuông cho thẻ dịch vụ/sản phẩm,
   dọc 9:16 chỉ riêng cho dải "Trước & sau" vì đó là nơi dùng video/ảnh dọc thật).
   Có thể thả thẳng <img> hoặc <video muted loop playsinline> vào .ph-block,
   đã có sẵn style object-fit:cover. */
.ph-block{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%),
    repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px);
  border:1px solid var(--line);
}
.ph-block img, .ph-block video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* ảnh thật chụp bằng điện thoại ở nhiều điều kiện sáng khác nhau (trong salon,
     trong xe hơi...) — chỉnh nhẹ để đồng bộ độ sáng/tương phản, nhìn "sạch" và
     chuyên nghiệp hơn như một bộ ảnh thống nhất, không lộ ảnh nào tối/xỉn màu hơn. */
  filter:brightness(1.05) contrast(1.06) saturate(1.08);
}
.ph-block iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.ph-block .cap{
  position:absolute;
  left:12px;bottom:12px;
  font-size:0.72rem;
  color:var(--ink-soft);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  padding:4px 10px;
  border-radius:999px;
}

/* ---------- sections ---------- */
section{padding:88px 0;border-top:1px solid var(--line);}
section:first-of-type{border-top:none;}
.section-head{max-width:62ch;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.9rem,3.8vw,2.6rem);}
.section-head p{color:var(--ink-soft);margin-top:12px;font-size:1.05rem;}

/* about */
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr;} }
.about-grid .ph-block{aspect-ratio:4/5;}
.about-grid .ph-block img{object-position:center 15%;}
.pull-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink);
  border-left:3px solid var(--accent);
  padding-left:18px;
  margin:20px 0;
}

/* card grid — dùng chung cho Dịch vụ & Sản phẩm, đúng kiểu thẻ Best Seller */
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
@media(max-width:980px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .card-grid{grid-template-columns:1fr;} }
.item-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.06);
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.item-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--accent) 45%, var(--line));box-shadow:0 4px 10px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.1);}
.item-card .ph-block{aspect-ratio:1/1;border-radius:0;border:none;border-bottom:1px solid var(--line);}
.item-card .body{padding:20px 20px 22px;}
.item-card h3{font-size:1.3rem;margin-bottom:10px;}
.item-card p{font-size:1rem;color:var(--ink-soft);margin-bottom:14px;}
.tag-contact{
  font-size:0.8rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent-soft);
  padding:6px 12px;
  border-radius:999px;
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  transition:background .2s ease, color .2s ease;
}
a.tag-contact:hover{background:var(--accent);color:var(--ink);}

/* products — chỉ 2 sản phẩm thật, canh giữa thay vì kéo giãn 4 cột */
.products-grid{grid-template-columns:repeat(2,1fr);max-width:680px;margin:0 auto;}
@media(max-width:640px){ .products-grid{grid-template-columns:1fr;} }

/* smoky palette strip */
.tone-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media(max-width:700px){ .tone-strip{grid-template-columns:repeat(2,1fr);} }
.tone-card{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface);}
.tone-card .fill{height:120px;}
.tone-card .meta{padding:12px 14px;}
.tone-card .meta .name{font-weight:700;font-size:1.1rem;}
.tone-card .meta .note{font-size:0.9rem;color:var(--ink-soft);}
.tone-note{font-size:0.95rem;color:var(--ink-soft);margin-top:20px;}
.tone-photos-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin:40px 0 18px;}
.tone-photos-grid .ph-block{aspect-ratio:1/1;}

/* trước & sau — lưới tĩnh 3 video hàng trên, 3 video hàng dưới, đủ to xem trên máy tính */
.ba-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media(max-width:860px){ .ba-strip{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .ba-strip{grid-template-columns:1fr;max-width:420px;margin:0 auto;} }
.ba-strip .ph-block{aspect-ratio:9/16;box-shadow:0 6px 20px rgba(0,0,0,.1);}

/* gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media(max-width:860px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
.gallery-grid .ph-block{aspect-ratio:1/1;}

/* không gian salon — băng chuyền vô hạn, 1 hàng, chạy liên tục trái sang phải */
.marquee{
  display:flex;
  gap:16px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex;
  flex-shrink:0;
  gap:16px;
  animation:marqueeScroll 36s linear infinite reverse;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  flex:none;
  width:400px;
  height:300px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.marquee-item img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes marqueeScroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
@media(max-width:640px){ .marquee-item{width:260px;height:195px;} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* customers portfolio — 2 hàng cuộn ngang, ~3-4 ảnh/màn hình, tối ưu cho mobile */
.customers-rows{display:flex;flex-direction:column;gap:14px;}
.customers-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:300px;
  gap:20px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.customers-row::-webkit-scrollbar{display:none;}
@media(max-width:640px){ .customers-row{grid-auto-columns:64%;} }
.customers-row .ph-block{aspect-ratio:1/1;scroll-snap-align:start;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease;}
.customers-row .ph-block:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 10px 24px rgba(0,0,0,.14);}
.customers-row .ph-block img{transition:transform .4s ease;}
.customers-row .ph-block:hover img{transform:scale(1.06);}
.customers-cta{display:flex;justify-content:center;margin-top:28px;}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:rgba(20,16,10,.92);
  padding:24px;
}
.lightbox.open{display:flex;}
.lightbox-img{
  max-width:min(92vw, 720px);
  max-height:86vh;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  object-fit:contain;
  animation:lightboxIn .25s ease;
}
@keyframes lightboxIn{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:scale(1);}}
.lightbox-close, .lightbox-nav{
  position:absolute;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{background:rgba(255,255,255,.18);transform:scale(1.05);}
.lightbox-close{top:20px;right:20px;}
.lightbox-nav.prev{left:16px;top:50%;transform:translateY(-50%);}
.lightbox-nav.next{right:16px;top:50%;transform:translateY(-50%);}
.lightbox-nav.prev:hover{transform:translateY(-50%) scale(1.05);}
.lightbox-nav.next:hover{transform:translateY(-50%) scale(1.05);}
.lightbox-count{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);
  font-size:.8rem;letter-spacing:.05em;
}
@media(max-width:640px){
  .lightbox-nav{width:38px;height:38px;}
  .lightbox-close{width:38px;height:38px;top:12px;right:12px;}
}

/* booking banner — dải vàng đồng, mirror đúng biển hiệu thật của salon */
.booking-banner{
  background:var(--accent);
  color:var(--ink);
  border-top:none;
}
.booking-banner .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.booking-banner h2{color:var(--ink);font-size:clamp(1.6rem,3vw,2.1rem);}
.booking-banner p{color:color-mix(in srgb, var(--ink) 75%, transparent);margin-top:8px;}
.booking-banner .slogan{font-family:var(--font-display);font-style:italic;color:var(--ink);}
.booking-banner .actions{display:flex;gap:12px;flex-wrap:wrap;}
.booking-banner .btn-primary{background:var(--ink);color:var(--bg);}
.booking-banner .btn-outline{border-color:color-mix(in srgb, var(--ink) 35%, transparent);color:var(--ink);}

/* contact */
.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
@media(max-width:900px){ .contact-wrap{grid-template-columns:1fr;} }
.info-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px;}
.info-list li{display:flex;gap:14px;align-items:flex-start;}
.info-list .ic{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.info-list .ic svg{width:20px;height:20px;}
.info-list b{display:block;font-size:1.15rem;}
.info-list span{color:var(--ink-soft);font-size:1rem;}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.map-block{aspect-ratio:4/3;}
.map-block iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(0.15) contrast(1.02);}
.map-block .map-caption{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;gap:10px;align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.map-block .map-caption svg{flex:none;margin-top:2px;color:var(--accent-ink);}
.map-block .map-caption b{display:block;color:var(--ink);font-size:1rem;}
.map-block .map-caption a{color:var(--accent-ink);font-size:0.9rem;text-decoration:underline;display:inline-block;margin-top:4px;}

/* footer */
footer.site{background:var(--surface-2);border-top:1px solid var(--line);padding:48px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px;}
@media(max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{font-size:0.88rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px;font-family:var(--font-body);font-weight:700;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:1rem;}
.footer-grid ul a{text-decoration:none;color:var(--ink-soft);}
.footer-grid ul a:hover{color:var(--ink);}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:0.92rem;color:var(--ink-soft);
}
.social-row{display:flex;flex-wrap:wrap;gap:10px;}
.social-row a{
  height:36px;border-radius:999px;
  border:1px solid var(--ink);
  background:var(--ink);
  display:flex;align-items:center;gap:7px;
  padding:0 14px 0 12px;
  text-decoration:none;color:var(--bg);font-size:0.85rem;
  transition:background 0.15s, border-color 0.15s, transform 0.15s;
}
.social-row a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);}
.social-row a .social-label{font-size:0.78rem;font-weight:500;white-space:nowrap;}