/* =========================================================
   강경해물칼국수 — 가맹안내
   Palette : 흰 바탕 / 중성 회색 / 먹빛 / 간판 금색 / 젓갈 붉은색 / 브랜드 주황
   Type    : Jua (제목) · IBM Plex Sans KR (본문) · Fredoka (숫자)
   밝은 배경 단일 테마 — 어두운 밴드는 대비를 위한 의도적 구간
   ========================================================= */

:root{
  color-scheme: light;

  --shell:        #FFFFFF;   /* 흰 바탕 */
  --shell-2:      #ECEAE7;
  --surface:      #F3F2F0;   /* 교차 섹션용 중성 회색 */
  --ink:          #1C1815;   /* 먹빛 */
  --ink-2:        #56514B;
  --ink-3:        #8B857D;
  --line:         #E2E0DC;
  --flame:        #B33A10;   /* 브랜드 주황(진한 쪽) */
  --flame-soft:   #C98A1E;   /* 간판 금색 */
  --seal:         #97202A;   /* 젓갈 붉은색 */
  --on-flame:     #FFF6EC;
  --band:         #1B120C;   /* 어두운 대비 구간 */
  --band-ink:     #F5EDE1;
  --band-ink-2:   #B3A08A;
  --band-line:    rgba(245,237,225,.18);
  --shadow:       0 18px 40px -28px rgba(28,24,21,.3);
  --cta-bg:       #97202A;

  --f-display: "Jua", "IBM Plex Sans KR", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans KR", system-ui, -apple-system, sans-serif;
  --f-num:     "Fredoka", "IBM Plex Sans KR", system-ui, sans-serif;

  --bg-op: .16;   /* 면 텍스처 투명도 — 여기 숫자만 바꾸면 됩니다 */
  --wash:  rgba(28,24,21,.045);  /* 교차 섹션의 옅은 톤 */
  --fade:  110px;                /* 위아래로 스며드는 거리 */

  --r:    18px;   /* 사진·카드 라운딩 */
  --r-sm: 10px;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1240px;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
html{ background:var(--shell); }
body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 전체 배경에 깔리는 면 텍스처 — 아주 옅게 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:url("../images/bg-noodle.jpg") center center / cover no-repeat;
  opacity:var(--bg-op);
  pointer-events:none;
}

img{ max-width:100%; display:block; }
figure{ margin:0; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; line-height:1.28; font-weight:400; letter-spacing:-.005em; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--flame); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--flame); color:var(--on-flame); padding:.7rem 1.1rem; font-size:.9rem;
}
.skip:focus{ left:1rem; top:1rem; }

.label{
  font-family:var(--f-body); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; color:var(--flame);
  margin-bottom:1.1rem;
}
.label::before{ content:"—"; margin-right:.7em; opacity:.55; }

/* ---------- photo slots (graceful when file missing) ---------- */
figure[data-slot]{ position:relative; background:var(--shell-2); overflow:hidden; border-radius:var(--r); }
figure[data-slot].missing::after{
  content:"사진 위치 · images/" attr(data-slot);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:1rem; text-align:center;
  font-family:var(--f-num); font-size:.78rem; letter-spacing:.12em; color:var(--ink-3);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(128,128,128,.07) 14px 28px),
    var(--shell-2);
}
figure[data-slot].missing{ min-height:200px; }
/* 어두운 풀블리드 섹션의 빈 사진 자리는 항상 어둡게 */
.hero figure[data-slot].missing::after,
.band figure[data-slot].missing::after,
.fr figure[data-slot].missing::after{
  color:#8F7C67;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.045) 14px 28px),
    #241811;
}
figure[data-slot].missing img{ visibility:hidden; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem var(--pad);
  background:color-mix(in srgb, var(--shell) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; }
.brand-mark{ width:42px; height:42px; flex:none; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text em{ font-family:var(--f-num); font-style:normal; font-size:.6rem; letter-spacing:.12em; color:var(--ink-3); }
.brand-text strong{ font-family:var(--f-display); font-weight:400; font-size:1.12rem; letter-spacing:.01em; }

.topnav{ display:flex; gap:1.6rem; font-size:.9rem; }
.topnav a{ text-decoration:none; color:var(--ink-2); padding-bottom:2px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.topnav a:hover{ color:var(--ink); border-color:var(--flame); }

.topcall{
  display:flex; flex-direction:column; align-items:flex-end; text-decoration:none; line-height:1.1;
}
.topcall span{ font-size:.66rem; font-weight:500; letter-spacing:.1em; color:var(--ink-3); }
.topcall b{ font-family:var(--f-num); font-weight:600; font-size:1.22rem; color:var(--flame); letter-spacing:.02em; font-variant-numeric:tabular-nums; }

@media (max-width:980px){ .topnav{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; background:var(--band); color:var(--band-ink); }
figure.hero-photo{ position:absolute; inset:0; z-index:0; border-radius:0; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(20,13,8,.95) 0%, rgba(20,13,8,.8) 42%, rgba(20,13,8,.2) 78%),
    linear-gradient(to top, rgba(20,13,8,.9), transparent 45%);
}
.hero-body{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(5rem,14vh,9rem) var(--pad) clamp(3.5rem,9vh,6rem);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  font-family:var(--f-body); font-weight:500; font-size:.8rem; letter-spacing:.06em;
  color:var(--flame-soft);
  border:1px solid rgba(242,168,29,.4); border-radius:999px;
  padding:.45rem 1.05rem; margin-bottom:1.8rem;
}
.eyebrow .dot{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }
.hero h1{
  font-family:var(--f-display);
  font-size:clamp(2.9rem, 8.2vw, 6.4rem);
  line-height:1.02; letter-spacing:-.01em;
  max-width:14ch;
  text-shadow:0 6px 40px rgba(0,0,0,.35);
}
.hero h1 em{ font-style:normal; color:var(--flame-soft); }
.hero-lead{ margin-top:1.9rem; max-width:44ch; color:var(--band-ink-2); font-size:clamp(1rem,1.5vw,1.12rem); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.6rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.9rem; text-decoration:none; font-weight:600; font-size:.98rem;
  border-radius:var(--r-sm); transition:transform .18s ease, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--flame); color:#FFF6EE; }
.btn-primary:hover{ background:var(--flame-soft); color:#142124; }
.btn-ghost{ border:1px solid rgba(245,237,225,.5); color:var(--band-ink); font-weight:500; letter-spacing:.01em; }
.btn-ghost:hover{ border-color:var(--flame-soft); color:var(--flame-soft); }

.hero-strip{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--band-line);
  background:rgba(20,13,8,.55);
}
.hero-strip div{
  padding:1.5rem var(--pad); border-left:1px solid var(--band-line);
  display:flex; flex-direction:column; gap:.15rem;
}
.hero-strip div:first-child{ border-left:0; }
.hero-strip b{ font-family:var(--f-num); font-weight:600; font-size:1.7rem; color:var(--flame-soft); line-height:1; font-variant-numeric:tabular-nums; }
.hero-strip span{ font-size:.82rem; color:var(--band-ink-2); }
@media (max-width:820px){
  .hero-strip{ grid-template-columns:repeat(2,1fr); }
  .hero-strip div{ padding:1.1rem 1.25rem; border-top:1px solid var(--band-line); }
  .hero-strip div:nth-child(odd){ border-left:0; }
}

/* =========================================================
   STORY
   ========================================================= */
.story{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,11vh,8rem) var(--pad);
  display:grid; grid-template-columns:minmax(240px,.85fr) 1.15fr; gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.story-poster{ border:1px solid var(--line); box-shadow:var(--shadow); }
.story-poster img{ width:100%; }
.story-body h2{ font-family:var(--f-display); font-size:clamp(1.8rem,3.6vw,2.9rem); margin-bottom:1.6rem; }
.story-body p{ color:var(--ink-2); margin-bottom:1.1rem; max-width:60ch; }
.story-body p b{ color:var(--ink); font-weight:700; }
.story-facts{ margin-top:2.2rem; border-top:1px solid var(--line); }
.story-facts li{ display:flex; gap:1.5rem; padding:.85rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.story-facts span{ font-size:.8rem; font-weight:500; letter-spacing:.06em; color:var(--ink-3); min-width:6.5rem; }
.story-facts b{ font-weight:500; }
@media (max-width:860px){ .story{ grid-template-columns:1fr; } .story-poster{ max-width:420px; } }

/* =========================================================
   TASTE
   ========================================================= */
.taste{ background:linear-gradient(to bottom, transparent 0, var(--wash) var(--fade), var(--wash) calc(100% - var(--fade)), transparent 100%); padding-block:clamp(4.5rem,11vh,8rem); }
.sec-head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,6vh,4rem); padding-inline:var(--pad); }
.sec-head h2{ font-family:var(--f-display); font-size:clamp(1.9rem,4.2vw,3.2rem); }

.tcard{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,4rem);
  align-items:center; margin-bottom:clamp(3rem,7vh,5rem);
}
.tcard:nth-child(even) figure{ order:2; }
.tcard figure{ box-shadow:var(--shadow); }
.tcard figure img{ width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.tcard:hover figure img{ transform:scale(1.035); }
.tcard-tag{
  font-family:var(--f-body); font-weight:600; font-size:.82rem; color:var(--seal);
  letter-spacing:.14em; margin-bottom:.6rem;
}
.tcard h3{ font-family:var(--f-display); font-size:clamp(1.35rem,2.6vw,2rem); margin-bottom:.9rem; }
.tcard-text p:last-child{ color:var(--ink-2); max-width:46ch; }
@media (max-width:820px){
  .tcard{ grid-template-columns:1fr; }
  .tcard:nth-child(even) figure{ order:0; }
}

/* =========================================================
   BROTH BAND
   ========================================================= */
.band{ position:relative; min-height:min(58vh,500px); display:grid; place-items:center; background:var(--band); }
figure.band-photo{ position:absolute; inset:0; background:none; z-index:0; border-radius:0; }
.band-photo img{ width:100%; height:100%; object-fit:cover; }
.band-photo::before{ content:""; position:absolute; inset:0; background:rgba(20,13,8,.66); }
.band blockquote{ position:relative; z-index:2; margin:0; padding:4rem var(--pad); text-align:center; color:var(--band-ink); }
.band blockquote p{ font-family:var(--f-display); font-size:clamp(1.6rem,4.6vw,3.4rem); line-height:1.3; text-shadow:0 4px 30px rgba(0,0,0,.4); }
.band blockquote em{ font-style:normal; color:var(--flame-soft); }
.band cite{
  display:block; margin-top:1.8rem; font-style:normal;
  font-family:var(--f-body); font-weight:400; font-size:.82rem; letter-spacing:.1em; color:var(--band-ink-2);
}

/* =========================================================
   HOW TO EAT
   ========================================================= */
.eat{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,11vh,8rem) var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5rem); align-items:center;
}
.eat-photo{ box-shadow:var(--shadow); }
.eat-photo img{ width:100%; height:auto; }
.eat-body h2{ font-family:var(--f-display); font-size:clamp(1.8rem,3.6vw,2.9rem); margin-bottom:2rem; }
.steps li{ display:flex; gap:1.3rem; padding:1.15rem 0; border-top:1px solid var(--line); }
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps b{ font-family:var(--f-num); font-weight:400; font-size:1.5rem; color:var(--flame); line-height:1.3; font-variant-numeric:tabular-nums; }
.steps h4{ font-size:1.05rem; font-weight:700; margin-bottom:.25rem; }
.steps p{ color:var(--ink-2); font-size:.95rem; }
@media (max-width:860px){ .eat{ grid-template-columns:1fr; } }

/* =========================================================
   PACKAGE
   ========================================================= */
/* .pack 은 최대폭 1240px 그리드라 배경을 그대로 칠하면 좌우에 경계가 생김
   → 화면 전체 폭으로 퍼지는 레이어를 뒤에 따로 깔아준다 */
.pack{ position:relative; }
.pack::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:calc(50% - 50vw); width:100vw;
  background:linear-gradient(to bottom, transparent 0, var(--wash) var(--fade), var(--wash) calc(100% - var(--fade)), transparent 100%);
}
.pack{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem);
  max-width:var(--maxw); margin-inline:auto; padding:clamp(4.5rem,11vh,8rem) var(--pad);
  align-items:start;
}
.pack-body h2{ font-family:var(--f-display); font-size:clamp(1.8rem,3.6vw,2.9rem); margin-bottom:1.3rem; }
.pack-body > p{ color:var(--ink-2); max-width:48ch; }
.packsteps{ margin-top:2.1rem; display:grid; gap:1.35rem; }
.packsteps li{ display:grid; grid-template-columns:1.9rem 1fr; gap:.9rem; align-items:baseline; }
.packsteps b{
  font-family:var(--f-display); font-size:1.45rem; line-height:1;
  color:var(--seal); text-align:right;
}
.packsteps p{ font-size:1rem; line-height:1.7; color:var(--ink-2); }

.pack-figs{ display:flex; flex-direction:column; gap:1.2rem; }
.pack-figs figure{ box-shadow:var(--shadow); }
.pack-figs figure.tall img{ width:100%; }
.pack-figs figure:not(.tall) img{ width:100%; height:auto; }
@media (max-width:860px){ .pack{ grid-template-columns:1fr; } }

/* =========================================================
   STORE
   ========================================================= */
.store{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,11vh,8rem) var(--pad);
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,6vw,5rem); align-items:center;
}
.store-body h2{ font-family:var(--f-display); font-size:clamp(1.8rem,3.6vw,2.9rem); margin-bottom:1.3rem; }
.store-body > p{ color:var(--ink-2); max-width:46ch; }
/* 익산점 주소 카드 */
.addr{
  display:flex; flex-direction:column; gap:.35rem;
  margin-top:2rem; padding:1.35rem 1.5rem; border-radius:var(--r-sm);
  font-style:normal;
  border:1px solid var(--line); border-left:3px solid var(--flame);
  background:var(--surface);
}
.addr b{ font-family:var(--f-display); font-size:1.15rem; }
.addr span{ font-size:1rem; color:var(--ink); }
.addr em{ font-style:normal; font-size:.88rem; color:var(--ink-3); }
.addr a{
  margin-top:.5rem; align-self:flex-start; text-decoration:none;
  font-family:var(--f-num); font-size:.86rem; letter-spacing:.08em; color:var(--flame);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.addr a:hover{ border-color:var(--flame); }

.hours{ margin-top:2.2rem; border-top:2px solid var(--ink); }
.hours > div{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--line); }
.hours dt{ font-family:var(--f-num); font-weight:500; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.hours dd{ margin:0; font-family:var(--f-num); font-weight:500; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.hours .park dd{ color:var(--flame); }
.note{ margin-top:1rem; font-size:.85rem; color:var(--ink-3); }
.store-figs{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
.store-figs figure{ box-shadow:var(--shadow); }
.store-figs figure:first-child img{ width:100%; }
.store-figs figure:last-child img{ width:100%; height:auto; }
@media (max-width:860px){ .store{ grid-template-columns:1fr; } }

/* =========================================================
   LOCATIONS
   ========================================================= */
.loc{ background:linear-gradient(to bottom, transparent 0, var(--wash) var(--fade), var(--wash) calc(100% - var(--fade)), transparent 100%); padding-block:clamp(4rem,10vh,7rem); }
.sync{
  max-width:var(--maxw); margin:0 auto clamp(2.2rem,5vh,3.2rem); padding-inline:var(--pad);
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.3rem,2.9vw,2.05rem); line-height:1.4; color:var(--ink);
}
.sync b{
  font-family:var(--f-num); font-weight:600;
  font-size:1.35em; color:var(--seal); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.loc-card .owner{
  margin-top:.55rem; padding-top:.55rem; border-top:1px dashed var(--line);
  font-size:.9rem; color:var(--ink-3);
}
.loc-card .owner b{ color:var(--ink); font-weight:700; }

.loc-grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:clamp(1.5rem,4vw,2.5rem);
}
.loc-card{ display:flex; flex-direction:column; background:color-mix(in srgb, var(--shell) 90%, transparent); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.loc-head{ display:flex; align-items:baseline; gap:.8rem; padding:1.4rem 1.6rem .6rem; }
.loc-head h3{ font-family:var(--f-display); font-size:1.45rem; }
.loc-tag{
  font-family:var(--f-body); font-weight:500; font-size:.75rem; letter-spacing:.04em;
  color:var(--seal); border:1px solid currentColor; border-radius:999px; padding:.2rem .7rem;
}
.loc-card address{ flex:1; font-style:normal; display:flex; flex-direction:column; gap:.3rem; padding:0 1.6rem 1.3rem; }
.loc-card .road{ font-size:1rem; color:var(--ink); }
.loc-card em{ font-style:normal; font-size:.86rem; color:var(--ink-3); }
.loc-map{ position:relative; aspect-ratio:4/3; border-block:1px solid var(--line); background:var(--shell-2); }
.loc-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.loc-links{ display:flex; }
.loc-links a{
  flex:1; text-align:center; padding:1rem .5rem; text-decoration:none;
  font-size:.92rem; font-weight:600; color:var(--ink-2);
  border-left:1px solid var(--line); transition:background .2s, color .2s;
}
.loc-links a:first-child{ border-left:0; }
.loc-links a:hover{ background:var(--flame); color:#FFF7F0; }

/* =========================================================
   FRANCHISE
   ========================================================= */
.fr{ position:relative; background:var(--band); color:var(--band-ink); }
figure.fr-bg{ position:absolute; inset:0; background:none; z-index:0; border-radius:0; }
.fr-bg img{ width:100%; height:100%; object-fit:cover; }
.fr-bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(20,13,8,.9), rgba(20,13,8,.96)); }
.fr-inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding:clamp(4.5rem,11vh,8rem) var(--pad); }
.fr .label{ color:var(--flame-soft); }
.fr h2{ font-family:var(--f-display); font-size:clamp(2rem,4.6vw,3.4rem); margin-bottom:clamp(2.5rem,6vh,4rem); }
.fr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--band-line); border:1px solid var(--band-line); border-radius:var(--r); overflow:hidden; }
.fr-grid article{ background:var(--band); padding:1.9rem 1.6rem; transition:background .25s; }
.fr-grid article:hover{ background:#251910; }
.fr-grid h3{ font-family:var(--f-display); font-size:1.15rem; color:var(--flame-soft); margin-bottom:.7rem; }
.fr-grid p{ font-size:.94rem; color:var(--band-ink-2); }

.flow{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(2.5rem,6vh,3.5rem); }
.flow li{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--band-line); border-radius:999px; padding:.7rem 1.1rem;
  font-size:.9rem; color:var(--band-ink);
}
.flow span{ font-family:var(--f-num); font-weight:500; font-size:.78rem; color:var(--flame); }

/* =========================================================
   CTA + FOOT
   ========================================================= */
.cta{
  text-align:center; padding:clamp(4.5rem,12vh,8rem) var(--pad);
  background:var(--cta-bg); color:#FFF7F0;
}
.cta .label{ color:rgba(255,247,240,.75); }
.cta h2{ font-family:var(--f-display); font-size:clamp(1.9rem,4.4vw,3.2rem); }
.phone{
  display:inline-block; margin-top:2rem; text-decoration:none;
  font-family:var(--f-num); font-weight:500; font-size:clamp(2.9rem,9vw,5.6rem);
  letter-spacing:.02em; line-height:1; font-variant-numeric:tabular-nums;
  border-bottom:4px solid rgba(255,247,240,.35); padding-bottom:.1em;
  transition:border-color .25s;
}
.phone:hover{ border-color:#FFF7F0; }
.cta-sub{ margin-top:1.4rem; font-size:.92rem; color:rgba(255,247,240,.8); }

.foot{
  display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; align-items:center;
  padding:2.2rem var(--pad) 6rem; background:var(--band); color:var(--band-ink-2); font-size:.85rem;
}
.foot-l{ display:flex; flex-direction:column; gap:.2rem; }
.foot-l strong{ font-family:var(--f-display); font-weight:400; font-size:1.05rem; color:var(--band-ink); }
.foot-r{ display:flex; flex-direction:column; gap:.2rem; text-align:right; }
.foot-r a{ text-decoration:none; color:var(--flame-soft); font-family:var(--f-num); font-weight:500; }

/* ---------- mobile sticky call ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:none; align-items:center; justify-content:center; gap:.8rem;
  padding:.95rem 1rem; text-decoration:none;
  background:var(--flame); color:#FFF7F0;
}
.callbar span{ font-size:.82rem; font-weight:500; letter-spacing:.02em; opacity:.85; }
.callbar b{ font-family:var(--f-num); font-weight:600; font-size:1.25rem; font-variant-numeric:tabular-nums; }
@media (max-width:980px){
  .callbar{ display:flex; }
  .topcall span{ display:none; }
}