/* ============================================
   concept.zone — homepage (site.css)
   Loaded AFTER styles.css (which is kept for the CSS-drawn
   product cards). Everything here is prefixed z- and the
   shared tokens are redefined below.
   Idiom: broadsheet / workshop sheet. Heavy grotesque type,
   thick black rules, one blue, photographs cut into the grid,
   tables where everyone else puts cards.
   ============================================ */

:root {
  --bg: #F2EFE8;
  --ink: #0A0A0A;
  --blue: #1F2FE3;
  --blue-deep: #1520B5;
  --muted: #5A574F;
  --rule: #0A0A0A;
  --rule-soft: rgba(10, 10, 10, 0.18);
  --font: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;

  /* re-point the tokens styles.css uses for the product cards */
  --color-bg: var(--bg);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-accent: var(--blue);
  --color-accent-hover: var(--blue-deep);
  --color-border: var(--ink);
  --font-display: var(--font);
  --font-body: var(--font);
  --radius: 0;
  --radius-lg: 0;
}

html { scroll-behavior: auto; }
body {
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  font-optical-sizing: auto;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--blue); color: #fff; }

.z-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* ---- type ---- */
.z-h {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.z-h.small { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.z-p { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.5; max-width: 60ch; margin: 0 0 1rem; }
.z-p.muted { color: var(--muted); }
.z-p b { font-weight: 700; }
.z-big { font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* ---- buttons ---- */
.z-btn {
  display: inline-block;
  padding: 1rem 1.5rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  line-height: 1;
  transition: background .12s, border-color .12s, color .12s;
}
.z-btn:hover { background: var(--blue); border-color: var(--blue); }
.z-btn.line { background: transparent; color: var(--ink); }
.z-btn.line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.z-link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.z-link:hover { color: var(--blue); }

/* ---- masthead ---- */
.z-mast { border-top: 6px solid var(--ink); border-bottom: 1px solid var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.z-mast-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 64px; }
.z-mark { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; text-decoration: none; }
.z-mark span { color: var(--blue); }
.z-nav { display: flex; gap: 1.75rem; align-items: center; }
.z-nav a { text-decoration: none; font-weight: 500; font-size: 1rem; }
.z-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.z-nav a.z-cta { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.z-nav a.z-cta:hover { color: var(--blue); }
.z-burger { display: none; height: 44px; padding: 0 .9rem; border: 2px solid var(--ink); background: transparent; cursor: pointer; font: inherit; font-weight: 700; }

/* ---- hero ---- */
.z-hero { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch; padding-top: clamp(2rem, 5vw, 4.5rem); }
.z-hero h1 {
  font-weight: 800;
  font-size: clamp(3rem, 8.2vw, 8.6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.z-hero h1 span { color: var(--blue); }
.z-hero-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: end; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.z-hero-row .z-p { margin: 0; }
.z-hero-row .z-act { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.z-hero-row .z-act small { font-size: .95rem; color: var(--muted); }
.z-hero-photo { position: relative; min-height: 420px; }
.z-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- ticker rule ---- */
.z-ticker { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: .9rem 0; font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.15rem); }
.z-ticker-in { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; }
.z-ticker-in span b { color: var(--blue); }

/* ---- sections ---- */
.z-sec { padding: clamp(3rem, 7vw, 6.5rem) 0; border-top: 1px solid var(--rule); }
.z-sec.first { border-top: 0; }
.z-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.z-head .z-h { margin: 0; }
.z-head .z-p { margin: 0; }

/* ---- product strip (overrides for styles.css cards) ---- */
.z-strip .strip-scroller { margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; overflow: visible; }
.z-strip .strip-track { padding: 0; gap: 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.z-strip .strip-card { flex: 0 0 300px; border: 0; border-right: 1px solid var(--rule); border-radius: 0; background: #fff; }
.z-strip .strip-card:first-child { border-left: 0; }
.z-strip .strip-card:hover { transform: none; box-shadow: none; background: #fff; }
.z-strip .strip-card:hover h3 { color: var(--blue); }
.z-strip .strip-visual { height: 200px; border-bottom: 1px solid var(--rule-soft); }
.z-strip .strip-info { padding: 1.1rem 1.2rem 1.4rem; }
.z-strip .strip-info h3 { font-family: var(--font); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; margin: .1rem 0 .3rem; }
.z-strip .strip-info p { font-size: .95rem; color: var(--muted); line-height: 1.45; }
.z-strip .strip-tag { font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--blue); }
.z-strip .strip-card-endcap { background: var(--ink); color: #fff; }
.z-strip .strip-card-endcap h3, .z-strip .strip-card-endcap p { color: #fff; }
.z-strip .strip-card-endcap .strip-tag { color: #fff; opacity: .7; }
.z-strip-hint { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; font-size: .95rem; color: var(--muted); }
.z-strip-hint .z-link { color: var(--ink); }

/* ---- statement with photo ---- */
.z-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.z-split.rev { grid-template-columns: 7fr 5fr; }
.z-photo { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.z-photo.tall { aspect-ratio: 4 / 5; }
.z-photo.bw { filter: grayscale(1) contrast(1.05); }
.z-cap { font-size: .9rem; color: var(--muted); margin-top: .6rem; }
.z-lead { font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.3; letter-spacing: -0.02em; max-width: 30ch; margin: 0 0 1.5rem; }

/* ---- table rows (timetable / prices) ---- */
.z-rows { border-top: 3px solid var(--ink); }
.z-row { display: grid; grid-template-columns: 2fr 5fr 3fr; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.z-row:last-child { border-bottom: 3px solid var(--ink); }
.z-row .z-k { font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1; }
.z-row .z-k.blue { color: var(--blue); }
.z-row .z-v { font-size: 1.05rem; }
.z-row .z-v b { font-weight: 700; }
.z-row .z-s { font-size: 1rem; color: var(--muted); }

/* ops timetable */
.z-time { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; font-size: 1.02rem; }
.z-time:first-child { border-top: 3px solid var(--ink); }
.z-time:last-child { border-bottom: 3px solid var(--ink); }
.z-time time { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.z-time .st { font-weight: 700; color: var(--blue); font-size: .9rem; white-space: nowrap; }
.z-time .st.warn { color: var(--ink); }

/* prices */
.z-price { display: grid; grid-template-columns: 2.2fr 4.8fr 2.5fr 1.8fr; gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px solid var(--rule); align-items: start; position: relative; }
.z-price:last-child { border-bottom: 3px solid var(--ink); }
.z-price.hot { background: #fff; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding-left: calc(clamp(16px, 4vw, 48px) - 8px); padding-right: clamp(16px, 4vw, 48px); border-left: 8px solid var(--blue); }
.z-price .z-name { font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -0.04em; line-height: .95; }
.z-price .z-name small { display: block; font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-top: .5rem; }
.z-price .z-what { font-size: 1.05rem; }
.z-price .z-what b { font-weight: 700; }
.z-price .z-inc { font-size: .98rem; color: var(--muted); line-height: 1.5; }
.z-price .z-inc b { color: var(--ink); font-weight: 700; }
.z-price .z-amt { text-align: right; }
.z-price .z-amt b { display: block; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -0.04em; line-height: .95; }
.z-price .z-amt small { display: block; color: var(--muted); font-size: .9rem; margin: .35rem 0 .9rem; }
.z-price .z-amt .z-btn { padding: .8rem 1.1rem; font-size: .95rem; }
.z-flag { position: absolute; top: -0.85rem; right: clamp(16px, 4vw, 48px); background: var(--blue); color: #fff; font-weight: 700; font-size: .8rem; padding: .3rem .6rem; }
.z-fine { font-size: .92rem; color: var(--muted); margin-top: 1.25rem; max-width: 80ch; }

/* who */
.z-who { display: grid; grid-template-columns: 200px 1fr; gap: 1.75rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.z-who:first-child { border-top: 3px solid var(--ink); }
.z-who:last-child { border-bottom: 3px solid var(--ink); }
.z-who img { width: 200px; height: auto; aspect-ratio: 5 / 6; object-fit: cover; }
.z-who h3 { font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.03em; line-height: 1; margin: .2rem 0 .8rem; }
.z-who p { margin: 0; max-width: 60ch; font-size: 1.05rem; }

/* team */
.z-team { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.z-facts { border-top: 3px solid var(--ink); margin-top: 1.5rem; }
.z-facts div { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 1rem; }
.z-facts div:last-child { border-bottom: 3px solid var(--ink); }
.z-facts dt { font-weight: 700; }
.z-facts dd { margin: 0; }

/* Q&A */
.z-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 4rem); border-top: 3px solid var(--ink); }
.z-qa div { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.z-qa h3 { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; margin: 0 0 .5rem; }
.z-qa p { margin: 0; color: var(--muted); font-size: 1rem; }
.z-qa p a { color: var(--ink); }

/* end */
.z-end { border-top: 3px solid var(--ink); padding: clamp(3rem, 7vw, 6rem) 0; }
.z-end .z-h { font-size: clamp(3rem, 8vw, 8rem); line-height: .9; letter-spacing: -0.045em; max-width: 12ch; }
.z-end-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.z-end-row .z-act { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.z-end-row small { color: var(--muted); }

.z-foot { border-top: 1px solid var(--rule); padding: 1.5rem 0 2.5rem; font-size: .95rem; color: var(--muted); }
.z-foot-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.z-foot-in nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.z-foot-in a { text-decoration: none; }
.z-foot-in a:hover { text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .z-hero { grid-template-columns: minmax(0,1fr); }
  .z-hero > *, .z-hero-row > *, .z-split > *, .z-team > * { min-width: 0; }
  .z-hero-photo { min-height: 0; aspect-ratio: 16 / 10; order: -1; }
  .z-hero-row { grid-template-columns: minmax(0,1fr); }
  .z-head { grid-template-columns: 1fr; align-items: start; }
  .z-split, .z-split.rev, .z-team { grid-template-columns: 1fr; }
  .z-photo, .z-photo.tall { aspect-ratio: 16 / 10; min-height: 0; }
  .z-row { grid-template-columns: 1fr; gap: .5rem; }
  .z-price { grid-template-columns: 1fr 1fr; }
  .z-price .z-amt { grid-column: 2; grid-row: 1 / span 2; }
  .z-price .z-what, .z-price .z-inc { grid-column: 1; }
  .z-qa { grid-template-columns: 1fr; }
  .z-end-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 1.05rem; }
  .z-mast-in { height: 58px; }
  .z-nav { display: none; position: absolute; left: 0; right: 0; top: 58px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 3px solid var(--ink); padding: .5rem clamp(16px, 4vw, 48px) 1rem; }
  .z-nav.open { display: flex; }
  .z-nav a { padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 1.1rem; }
  .z-burger { display: block; }
  .z-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .z-ticker-in { flex-direction: column; gap: .35rem; }
  .z-strip .strip-card { flex: 0 0 260px; }
  .z-price { grid-template-columns: 1fr; }
  .z-price .z-amt { grid-column: 1; grid-row: auto; text-align: left; }
  .z-price.hot { margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); }
  .z-who { grid-template-columns: 1fr; }
  .z-who img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .z-time { grid-template-columns: 4.2rem 1fr; }
  .z-time .st { grid-column: 2; }
  .z-facts div { grid-template-columns: 1fr; gap: .2rem; }
}