/* ============================================================
   city.css — MVP Site Builder content rendered as premium cards
   Alternating two-column SEO rows + a rotating companion-card library.
   Reuses the theme tokens from styles.css (pine + amber on cream).
   ============================================================ */

.seo-wrap { padding-block: clamp(40px,7vw,90px); }
.seo-intro { max-width: 60rem; }

/* alternating two-column row */
.seo-row { display: grid; gap: 32px; align-items: center; padding-block: clamp(34px,5vw,64px); }
@media (min-width: 940px) { .seo-row { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } .seo-row.flip .seo-text { order: 2; } }
.seo-row.tint { background: var(--paper-2); border-radius: 28px; padding-inline: clamp(22px,4vw,48px); }
.seo-text > .eyebrow { margin-bottom: 14px; }
.seo-text h2 { font-family: "Bricolage Grotesque"; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.8rem,4vw,2.9rem); line-height: 1.02; }
.seo-text p { color: var(--ink-2); margin-top: 16px; line-height: 1.65; max-width: 52ch; }
.seo-text p + p { margin-top: 12px; }

/* ---- companion cards ---- */
.cc { position: relative; border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden; }

/* 0 — checklist */
.cc-check { background: var(--card); border: 1px solid var(--line); padding: 28px; }
.cc-check h4 { font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.25rem; margin-bottom:6px; }
.cc-check ul { list-style:none; padding:0; margin:10px 0 0; }
.cc-check li { display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px dashed var(--line); font-weight:600; color:var(--ink); }
.cc-check li:last-child { border-bottom:0; }
.cc-check li svg { width:22px; height:22px; flex:none; color:var(--brand); margin-top:1px; }

/* 1 — numbered ladder */
.cc-ladder { background: var(--card); border:1px solid var(--line); padding: 26px; }
.cc-ladder .rung { display:flex; gap:16px; align-items:flex-start; padding:13px 0; }
.cc-ladder .rung + .rung { border-top:1px solid var(--line); }
.cc-ladder .n { flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-family:"Bricolage Grotesque"; font-weight:800; }
.cc-ladder .rung:nth-child(even) .n { background:var(--amber-soft); color:var(--amber-deep); }
.cc-ladder h5 { font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.05rem; }
.cc-ladder p { color:var(--ink-2); font-size:14px; margin-top:2px; }

/* 2 — stat panel (dark pine) */
.cc-stat { background: var(--brand-dark); color:#fff; padding: 30px; }
.cc-stat .glow { position:absolute; width:240px; height:240px; border-radius:50%; filter:blur(70px); top:-90px; right:-70px; background:rgba(243,146,0,.3); }
.cc-stat .grid3 { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:center; }
.cc-stat .n { font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(1.7rem,4vw,2.3rem); line-height:1; color:#fff; }
.cc-stat .n b { color:var(--amber); }
.cc-stat .l { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(238,243,240,.6); margin-top:6px; }
.cc-stat .cap { position:relative; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); color:rgba(238,243,240,.78); font-size:14px; }

/* 3 — chip grid */
.cc-chips { background: var(--card); border:1px solid var(--line); padding: 28px; }
.cc-chips h4 { font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.25rem; margin-bottom:16px; }
.cc-chips .row { display:flex; flex-wrap:wrap; gap:9px; }
.cc-chips .c { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; padding:9px 14px; border-radius:999px; background:var(--brand-soft); color:var(--brand-deep); }
.cc-chips .c svg { width:15px; height:15px; }

/* 4 — timeline */
.cc-time { background: var(--card); border:1px solid var(--line); padding: 28px; }
.cc-time .step { position:relative; padding-left:30px; padding-block:11px; }
.cc-time .step::before { content:""; position:absolute; left:6px; top:18px; bottom:-6px; width:2px; background:repeating-linear-gradient(180deg,var(--line-2) 0 5px,transparent 5px 11px); }
.cc-time .step:last-child::before { display:none; }
.cc-time .step::after { content:""; position:absolute; left:0; top:14px; width:14px; height:14px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px var(--amber-soft); }
.cc-time h5 { font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.02rem; }
.cc-time p { color:var(--ink-2); font-size:14px; margin-top:2px; }

/* 5 — quote */
.cc-quote { background: var(--brand-soft); padding: 32px 30px; }
.cc-quote .mk { font-family:"Bricolage Grotesque"; font-weight:800; font-size:64px; line-height:.55; color:var(--brand); opacity:.4; }
.cc-quote blockquote { font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.3rem; line-height:1.28; color:var(--ink); margin:6px 0 0; }
.cc-quote figcaption { display:flex; align-items:center; gap:12px; margin-top:18px; }
.cc-quote .av { width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; }
.cc-quote .av + div b { display:block; }
.cc-quote .av + div span { color:var(--mut); font-size:13.5px; }

/* 6 — price ribbon */
.cc-ribbon { background: var(--brand-dark); color:#fff; padding: 30px; }
.cc-ribbon .tab { position:absolute; top:18px; right:-44px; transform:rotate(45deg); background:var(--amber); color:#1a1206; font-weight:800; font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:6px 54px; }
.cc-ribbon .from { font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:rgba(238,243,240,.6); }
.cc-ribbon .price { font-family:"Bricolage Grotesque"; font-weight:800; font-size:54px; line-height:1; margin-top:4px; }
.cc-ribbon .price span { color:var(--amber); }
.cc-ribbon p { color:rgba(238,243,240,.72); margin-top:12px; font-size:14.5px; }
.cc-ribbon .btn { margin-top:18px; }

/* 7 — size match */
.cc-size { background: var(--card); border:1px solid var(--line); padding: 10px 26px; }
.cc-size .r { display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.cc-size .r:last-child { border-bottom:0; }
.cc-size .yd { font-family:"Bricolage Grotesque"; font-weight:800; font-size:2rem; color:var(--brand); min-width:3.6ch; }
.cc-size .yd b { color:var(--amber-deep); font-size:.5em; }
.cc-size .d b { display:block; font-weight:700; }
.cc-size .d span { color:var(--ink-2); font-size:13.5px; }

/* 8 — included stamp */
.cc-stamp { background: var(--card); border:1px solid var(--line); padding: 28px; }
.cc-stamp h4 { font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.25rem; }
.cc-stamp .badge { float:right; border:2px dashed var(--amber); color:var(--amber-deep); border-radius:13px; padding:10px 16px; font-family:"Bricolage Grotesque"; font-weight:800; text-transform:uppercase; letter-spacing:.06em; transform:rotate(-4deg); text-align:center; line-height:1.05; }
.cc-stamp .badge small { display:block; font-size:10px; letter-spacing:.12em; color:var(--mut); }
.cc-stamp ul { list-style:none; padding:0; margin:18px 0 0; clear:both; }
.cc-stamp li { display:flex; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-weight:500; color:var(--ink-2); }
.cc-stamp li:last-child { border-bottom:0; }
.cc-stamp li svg { width:19px; height:19px; color:var(--brand); flex:none; }

/* 9 — contact / QR */
.cc-contact { background: var(--brand-dark); color:#fff; padding: 30px; text-align:center; }
.cc-contact .glow { position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(70px); top:-80px; left:50%; transform:translateX(-50%); background:rgba(243,146,0,.28); }
.cc-contact .lab { position:relative; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:rgba(238,243,240,.6); }
.cc-contact .tel { position:relative; font-family:"Bricolage Grotesque"; font-weight:800; font-size:2rem; color:#fff; margin-top:6px; display:inline-block; }
.cc-contact .qr { position:relative; width:120px; height:120px; border-radius:14px; background:#fff; margin:16px auto 0; padding:8px; }
.cc-contact .qr img { width:100%; height:100%; }
.cc-contact .btn { position:relative; margin-top:16px; }
@media (max-width:640px){ .cc-contact .qr { display:none; } }

/* photo companion (when a section maps to an image) */
.cc-photo { aspect-ratio:4/3; }
.cc-photo img { width:100%; height:100%; object-fit:cover; }
.cc-photo .pin { position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:9px; background:rgba(255,253,248,.92); backdrop-filter:blur(8px); border-radius:13px; padding:9px 14px; font-weight:700; box-shadow:var(--shadow-md); }
.cc-photo .pin svg { width:17px; height:17px; color:var(--amber-deep); }