/* Cielo v2 design system (Liron's 2026-10 redesign).
   Source of truth: design_handoff_cielo_website/Cielo Website.dc.html + README.md.
   Page sections keep the design's inline styles verbatim for pixel fidelity; this file holds
   the base, the header (transparent at the top, solid once the page scrolls), the footer,
   the FAQ accordion, the hover states and the responsive breakpoints the prototype leaves open. */

:root {
  --bg: #0f0e0c;
  --surface: #171513;
  --placeholder: #211e1b;
  --ink: #efe9df;
  --warm-ink: #e3c9a8;
  --body: #cfc7ba;
  --muted: #a59d91;
  --accent: #c8a27a;
  --hh: 76px;
}

html, body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.6; min-height: 100vh; }
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
input, textarea, select { font: inherit; }
::selection { background: var(--accent); color: var(--bg); }
[hidden] { display: none !important; }
[id^="cl-"] { scroll-margin-top: calc(var(--hh) - 6px); }
picture { display: contents; }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.v2h { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background 500ms ease, border-color 500ms ease; }
.v2h::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15,14,12,0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity 500ms ease; }
.v2h.is-scrolled, .v2h.is-open { border-bottom-color: rgba(239,233,223,0.08); }
.v2h.is-scrolled::before, .v2h.is-open::before { opacity: 1; }
.v2h.is-open::before { background: rgba(15,14,12,0.97); }
.v2h-in { max-width: 1360px; margin: 0 auto; padding: 18px clamp(20px,4vw,48px); display: flex; align-items: center; gap: clamp(16px,2.4vw,32px); }
.v2h-logo { display: flex; align-items: center; }
.v2h-logo img { height: 30px; display: block; }
.v2h-nav { display: flex; gap: clamp(14px,2vw,28px); flex: 1; white-space: nowrap; font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.v2h-link { color: var(--body); display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; line-height: inherit; font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.v2h-link:hover { color: var(--ink); }
.v2h-link .v2h-caret { font-size: 9px; }
.v2h-dd { position: relative; }
.v2h-dd-p { position: absolute; top: 100%; left: -16px; padding-top: 14px; z-index: 30; visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 200ms; }
.v2h-dd:hover .v2h-dd-p, .v2h-dd.is-open .v2h-dd-p, .v2h-dd:focus-within .v2h-dd-p { visibility: visible; opacity: 1; }
.v2h-dd-box { background: var(--surface); border: 1px solid rgba(239,233,223,0.12); padding: 10px 0; min-width: 240px; display: flex; flex-direction: column; text-transform: none; letter-spacing: 0; font-size: 14px; }
.v2h-dd-box a { padding: 10px 18px; color: var(--body); }
.v2h-dd-box a:hover { background: rgba(239,233,223,0.06); color: var(--warm-ink); }
.v2h-dd-box a.v2h-dd-lead { color: var(--warm-ink); }
.v2h-dd-box a.v2h-dd-group { padding: 12px 18px 4px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.v2h-dd-box a.v2h-dd-group:hover { background: none; color: var(--accent); }
.v2h-dd-rule { height: 1px; margin: 10px 18px; background: rgba(239,233,223,0.12); }
.v2h-act { display: flex; align-items: center; gap: 20px; font-size: 14px; }
/* the page you are on: its menu link (and the dropdown that holds it) in warm ink with a fine accent underline */
.v2h-link[aria-current="page"], .v2h-dd:has(a[aria-current="page"]) .v2h-dd-t { color: var(--warm-ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 7px; text-decoration-thickness: 1px; }
.v2h-dd-box a[aria-current="page"], .v2h-m a[aria-current="page"] { color: var(--warm-ink); }
.v2h-tel { display: flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; font-size: 14px; font-weight: 500; }
.v2h-tel:hover { color: var(--warm-ink); }
/* Google rating (Liron 2026-10-31; one row since 2026-11-03, Gilad): the G and the score, then five stars, sized with the menu */
.v2h-rev { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; flex: none; color: var(--ink); transition: opacity 240ms ease; }
.v2h-rev:hover { color: var(--ink); opacity: 0.75; }
.v2h-rev-stars { display: flex; gap: 2px; }
.v2h-rev-stars svg { width: 12px; height: 12px; display: block; fill: var(--accent); }
.v2h-rev-row { display: flex; align-items: center; gap: 6px; }
.v2h-rev-g { width: 15px; height: 15px; display: block; flex: none; fill: var(--ink); }
.v2h-rev-n { font-size: 13.5px; letter-spacing: 0.04em; line-height: 1; }
.v2h-cta { padding: 11px 20px; border: 1px solid var(--accent); color: var(--ink); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background 200ms ease, color 200ms ease; }
.v2h-cta:hover { background: var(--accent); color: var(--bg); }
.v2h-burger { display: none; width: 40px; height: 40px; margin-right: -8px; background: none; border: 0; cursor: pointer; position: relative; }
.v2h-burger span { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--ink); transition: transform 250ms ease, top 250ms ease; }
.v2h-burger span:first-child { top: 16px; }
.v2h-burger span:last-child { top: 23px; }
.v2h.is-open .v2h-burger span:first-child { top: 20px; transform: rotate(45deg); }
.v2h.is-open .v2h-burger span:last-child { top: 20px; transform: rotate(-45deg); }
.v2h-m { display: none; }

/* the larger menu (13.5px) leaves too little room just above the mobile breakpoint: the phone keeps its icon only */
@media (max-width: 1240px) { .v2h-tel .v2h-tel-n { display: none; } .v2h-tel svg { width: 18px; height: 18px; } }
@media (max-width: 1080px) {
  .v2h-nav { display: none; }
  .v2h-act { margin-left: auto; }
  .v2h-burger { display: block; }
  .v2h-m { max-height: calc(100vh - var(--hh)); overflow-y: auto; padding: 8px clamp(20px,4vw,48px) 40px; flex-direction: column; }
  .v2h.is-open .v2h-m { display: flex; }
  .v2h-m-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 24px 0 6px; }
  .v2h-m a { font-family: 'Cormorant Garamond', serif; font-size: 28px; line-height: 1.15; padding: 9px 0; color: var(--warm-ink); border-bottom: 1px solid rgba(239,233,223,0.08); }
  .v2h-m a.v2h-m-sub { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 17px; color: var(--body); padding: 10px 0; }
  .v2h-rev { display: none; }
  .v2h-m .v2h-m-cta { margin-top: 28px; align-self: flex-start; font-family: 'Instrument Sans', system-ui, sans-serif; padding: 16px 28px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 0; }
  html.v2-lock { overflow: hidden; }
}
@media (max-width: 600px) {
  .v2h-tel .v2h-tel-n { display: none; }
  .v2h-tel svg { width: 18px; height: 18px; }
  .v2h-cta { display: none; }
}

/* ---------- "Start a Project" popup ---------- */
.v2-pop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 300ms ease; }
.v2-pop.is-in { opacity: 1; }
.v2-pop-backdrop { position: absolute; inset: 0; background: rgba(15,14,12,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v2-pop-panel { position: relative; width: 100%; max-width: 560px; background: var(--surface); border: 1px solid rgba(239,233,223,0.12); outline: none; transform: translateY(12px); transition: transform 300ms ease; }
.v2-pop.is-in .v2-pop-panel { transform: none; }
.v2-pop-head { display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(24px,4vw,40px); border-bottom: 1px solid rgba(239,233,223,0.12); }
.v2-pop-title { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.v2-pop-x { position: relative; width: 32px; height: 32px; margin-right: -6px; background: none; border: 0; cursor: pointer; }
.v2-pop-x span { position: absolute; left: 7px; right: 7px; top: 15px; height: 1px; background: var(--ink); }
.v2-pop-x span:first-child { transform: rotate(45deg); }
.v2-pop-x span:last-child { transform: rotate(-45deg); }
.v2-pop-x:hover span { background: var(--accent); }
.v2-pop-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 20px; align-items: center; gap: 20px; padding: 24px clamp(24px,4vw,40px); border-bottom: 1px solid rgba(239,233,223,0.12); color: var(--warm-ink); transition: background 200ms ease; }
.v2-pop-row:last-child { border-bottom: 0; }
.v2-pop-row:hover { background: rgba(239,233,223,0.04); color: var(--warm-ink); }
.v2-pop-ico { color: var(--accent); display: flex; }
.v2-pop-ico svg { width: 22px; height: 22px; }
.v2-pop-txt { display: flex; flex-direction: column; gap: 4px; }
.v2-pop-lb { font-family: 'Cormorant Garamond', serif; font-size: 28px; line-height: 1.15; }
.v2-pop-sub { font-size: 14px; color: var(--muted); }
.v2-pop-arrow { color: var(--accent); display: flex; transition: transform 200ms ease; }
.v2-pop-row:hover .v2-pop-arrow { transform: translateX(4px); }
.v2-pop-row:focus-visible, .v2-pop-x:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
html.v2-pop-lock { overflow: hidden; }

/* ---------- footer ---------- */
.v2f { border-top: 1px solid rgba(239,233,223,0.08); }
.v2f-grid { max-width: 1360px; margin: 0 auto; padding: 72px clamp(20px,4vw,48px) 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px),1fr)); gap: 40px; font-size: 14px; }
.v2f-brand { display: flex; flex-direction: column; gap: 16px; grid-column: span 2; min-width: 0; }
.v2f-brand img { height: 28px; align-self: flex-start; }
.v2f-brand p { margin: 0; color: var(--muted); max-width: 300px; }
.v2f-col { display: flex; flex-direction: column; gap: 10px; }
.v2f-col > div:first-child { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.v2f-col a { color: var(--body); }
.v2f-col a:hover { color: var(--accent); }
.v2f-bottom { max-width: 1360px; margin: 0 auto; padding: 24px clamp(20px,4vw,48px) 40px; border-top: 1px solid rgba(239,233,223,0.08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
/* three parts: copyright left, Handmade in the USA centred, credit right (Gilad 2026-11-01); stacked on phones */
.v2f-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.v2f-made { text-align: center; }
.v2f-credit { justify-self: end; text-align: right; }
@media (max-width: 700px) { .v2f-bottom { grid-template-columns: 1fr; } .v2f-made { text-align: left; } .v2f-credit { justify-self: start; text-align: left; } }
@media (max-width: 440px) { .v2f-brand { grid-column: auto; } }

/* ---------- FAQ accordion ---------- */
.v2-faq-a { display: none; }
.v2-faq-item.is-open .v2-faq-a { display: block; }

/* rich FAQ answers (FAQ page): lists and links inside an answer */
.v2-faq-rich ul, .v2-faq-rich ol { margin: 14px 0; padding-left: 20px; }
.v2-faq-rich li { margin: 4px 0; }
.v2-faq-rich li::marker { color: var(--accent); }
.v2-faq-rich a { color: var(--warm-ink); border-bottom: 1px solid var(--accent); }
.v2-faq-rich strong { color: var(--warm-ink); font-weight: 500; }
.v2-faq-item button:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ---------- Book a Meeting: one screen, the calendar fills the height left under the header ---------- */
.v2-book-screen { height: 100vh; height: 100svh; min-height: 640px; padding-top: var(--hh); box-sizing: border-box; display: flex; }
.v2-book-grid { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: clamp(16px,3vh,40px) clamp(20px,4vw,48px) clamp(16px,2.5vh,32px); display: flex; flex-direction: column; gap: clamp(16px,2.5vh,28px); min-height: 0; }
.v2-book-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px clamp(32px,5vw,80px); align-items: end; }
.v2-book { flex: 1; min-height: 0; border-top: 1px solid rgba(239,233,223,0.12); padding-top: clamp(12px,2vh,20px); overflow: hidden; }
.v2-book .tidycal-embed { height: 100%; }
.v2-book .tidycal-embed, .v2-book .tidycal-embed iframe { background: transparent !important; }
.v2-book iframe { display: block; width: 100%; height: 100% !important; min-height: 0 !important; border: 0; }
@media (min-width: 901px) and (max-height: 860px) {  /* short laptop screens: one line of copy so the whole calendar stays on screen */
  .v2-book-tall { display: none; }
  .v2-book-h1 { font-size: 34px !important; white-space: nowrap; }
  .v2-book-copy { align-items: center; }
}
@media (max-width: 900px) {
  .v2-book-screen { height: auto; min-height: 0; display: block; }
  .v2-book-copy { grid-template-columns: minmax(0,1fr); }
  .v2-book { flex: none; height: 900px; }
}

/* ---------- Sauna check (Sauna Maintenance) ---------- */
.v2-quiz-box { width: 18px; height: 18px; flex-shrink: 0; border: 1px solid rgba(239,233,223,0.35); position: relative; transition: background 200ms ease, border-color 200ms ease; }
.v2-quiz-q:hover .v2-quiz-box { border-color: var(--accent); }
.v2-quiz-q.is-checked .v2-quiz-box { background: var(--accent); border-color: var(--accent); }
.v2-quiz-q.is-checked .v2-quiz-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.v2-quiz-q:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ---------- Journal (blog index) filters ---------- */
.v2-jf { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(32px,4vw,64px); align-items: start; }
.v2-jf-side { position: sticky; top: calc(var(--hh) + 24px); display: flex; flex-direction: column; }
.v2-jf-group { border-bottom: 1px solid rgba(239,233,223,0.12); }
.v2-jf-group-head { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; font-size: 14px; color: var(--warm-ink); }
.v2-jf-group-head:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.v2-jf-icon { color: var(--accent); font-size: 18px; }
.v2-jf-group-body { display: none; flex-direction: column; gap: 10px; padding: 0 0 18px; }
.v2-jf-group.is-open .v2-jf-group-body { display: flex; }
.v2-jf-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); cursor: pointer; }
.v2-jf-check input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid rgba(239,233,223,0.35); background: transparent; cursor: pointer; flex-shrink: 0; }
.v2-jf-check input:checked { background: var(--accent); border-color: var(--accent); }
.v2-jf-check:hover { color: var(--ink); }
@media (max-width: 860px) {
  .v2-jf { grid-template-columns: minmax(0,1fr); }
  .v2-jf-side { position: static; }
}

/* ---------- lead form ---------- */
.v2-form input:focus, .v2-form textarea:focus, .v2-form select:focus { border-bottom-color: var(--accent) !important; }
.v2-form button[disabled] { opacity: 0.6; cursor: default; }
.v2-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.v2-form-fail { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--warm-ink); }

/* ---------- responsive (the prototype leaves these open; README asks for breakpoints) ---------- */
@media (max-width: 900px) {
  .v2-mosaic { grid-template-columns: repeat(2, minmax(0,1fr)) !important; grid-template-rows: none !important; grid-auto-rows: clamp(200px, 42vw, 340px); }
  .v2-mosaic > * { grid-area: auto !important; }
  .v2-mosaic > *:first-child { grid-row: span 2 !important; }
  .v2-mosaic > *:last-child { grid-column: 1 / -1 !important; }
  .v2-gallery { grid-template-columns: repeat(2, minmax(0,1fr)) !important; grid-template-rows: none !important; grid-auto-rows: clamp(160px, 40vw, 300px); }
  .v2-gallery > * { grid-area: auto !important; }
  .v2-gallery > *:first-child { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
}
@media (max-width: 560px) {
  .v2-mosaic { grid-template-columns: minmax(0,1fr) !important; grid-auto-rows: 280px; }
  .v2-mosaic > *:first-child { grid-row: auto !important; }
  .v2-form { grid-template-columns: minmax(0,1fr) !important; }
  .v2-buildrow { grid-template-columns: minmax(0,1fr) 32px !important; row-gap: 8px !important; }
  .v2-buildrow > span:nth-child(2) { grid-row: 2; grid-column: 1; }
  .v2-buildrow > span:nth-child(3) { grid-row: 1 / 3; grid-column: 2; }
  .v2-stats3 { grid-template-columns: minmax(0,1fr) !important; }
}
@media (hover: none) {
  .v2-tile-ov { opacity: 1 !important; }
}

/* ---------- hover and focus states from the design (generated by the v2 build, do not edit by hand) ---------- */
/* V2-HOVER:START */
.hv-22c898:hover, a:hover > .hv-22c898 { opacity:1 !important; }
.hv-25d141:hover, a:hover > .hv-25d141 { transform:scale(1.04) !important; }
.hv-2a756c:hover, a:hover > .hv-2a756c { background:#c8a27a !important; color:#0f0e0c !important; }
.hv-2dfabb:hover, a:hover > .hv-2dfabb { color:#e3c9a8 !important; }
.hv-65fc74:hover, a:hover > .hv-65fc74 { background:#c8a27a !important; }
.hv-764687:hover, a:hover > .hv-764687 { color:#c8a27a !important; }
.hv-c408d5:hover, a:hover > .hv-c408d5 { border-color:#efe9df !important; color:#e3c9a8 !important; }
.hv-cfb9b5:hover, a:hover > .hv-cfb9b5 { background:rgba(15,14,12,0.55) !important; }
/* V2-HOVER:END */