/* ==========================================================================
   B2B & Custom page
   hero (ink) · who we make for (paper sheet grid) · your logo on a real piece
   (ink, the bold moment: the lamp lights a drawing) · how we work + terms
   (theme) · seasons (paper) · quote form (theme) · FAQ · closing CTA (lamp)
   ========================================================================== */

/* Amber on paper is under AA for small text, so paper surfaces on this page
   use a deeper amber mixed from the brand constants. */
main[data-page="b2b"] .band--paper,
:root[data-theme="light"] main[data-page="b2b"] .band {
  --accent-text: color-mix(in srgb, var(--amber) 70%, var(--ink));
}

/* mono labels: the engineer voice in English, plain body type in Arabic
   (letter-spacing breaks Arabic joins) */
.bz-mono-label,
.bz-tile__spec dt,
.bz-terms__rows dt,
.tb dt,
.bz-facts li,
.bz-group__title,
.bz-direct__k {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[lang="ar"] .bz-tile__spec dt,
html[lang="ar"] .bz-terms__rows dt,
html[lang="ar"] .tb dt,
html[lang="ar"] .bz-facts li,
html[lang="ar"] .bz-group__title,
html[lang="ar"] .bz-direct__k {
  font-family: var(--font-body);
  letter-spacing: 0;
  font-size: var(--fs-sm);
}

/* ---------- shared line-drawing style (SVG) ---------- */
.dw { width: 100%; height: auto; overflow: visible; direction: ltr; }
.dw path, .dw rect, .dw circle, .dw polygon { vector-effect: non-scaling-stroke; }
.dw-solid { fill: var(--bg-2); stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; }
.dw-thin { fill: none; stroke: var(--fg-3); stroke-width: 1; }
.dw-tk { fill: none; stroke: var(--tick); stroke-width: 1; }
.dw-dash { stroke-dasharray: 4 3; }
.dw-acc { fill: none; stroke: var(--accent-text); stroke-width: 1.5; }
.dw-accf { fill: var(--accent-text); }
.dw-arr { fill: var(--fg-3); }
.dw-ghost path { fill: none; stroke: var(--fg-3); stroke-width: 1.25; stroke-dasharray: 5 4; stroke-linejoin: round; }
.dw-t {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  fill: var(--fg-3);
}
.dw-t--acc { fill: var(--accent-text); }
@media (max-width: 640px) {
  /* drawings scale down on phones: keep their labels readable */
  .dw-t { font-size: 19px; letter-spacing: .04em; }
}

/* ---------- 1 · hero ---------- */
.bz-hero {
  padding-block: clamp(2rem, 1.2rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  overflow: hidden;
}
.bz-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 920px) {
  .bz-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); }
}
.bz-hero__text { display: grid; gap: var(--s-5); justify-items: start; }
.bz-hero h1 { max-width: 11ch; font-size: clamp(2.4rem, 1.5rem + 3.7vw, 4.4rem); }
html[lang="en"] .bz-hero h1 { max-width: 14ch; }
.bz-hero .lede { max-width: 34rem; }
.bz-hero__cta { --cluster: var(--s-3); }
.bz-hero__cta .ico { width: 1.05em; height: 1.05em; }

.bz-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  color: var(--fg-2);
  padding-top: var(--s-2);
}
.bz-facts li { display: inline-flex; align-items: center; gap: .6rem; }
.bz-facts li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--accent-text);
  transform: rotate(45deg);
}

.bz-hero__art {
  margin: 0;
  width: 100%;
  max-width: 640px;
  justify-self: center;
  padding-block: var(--s-2);
}
@media (max-width: 919px) {
  .bz-hero__art { padding-top: var(--s-4); border-top: 1px solid var(--line); }
}

/* ---------- 2 · who we make for: a sheet grid ---------- */
.bz-tiles {
  list-style: none;
  display: grid;
  border-top: 1px solid var(--line-strong);
}
.bz-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line-strong);
  min-width: 0;
}
.bz-glyph {
  position: absolute;
  top: var(--s-5);
  inset-inline-end: 0;
  width: 48px;
  height: 36px;
  color: var(--fg);
  overflow: visible;
}
.bz-tile h3 { padding-inline-end: 64px; }
.bz-glyph path, .bz-glyph circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bz-glyph .g-f { stroke: var(--fg-3); stroke-width: 1; }
.bz-glyph .g-a { stroke: var(--accent-text); stroke-width: 1.75; }
.bz-glyph .g-af { fill: var(--accent-text); stroke: none; }
.bz-glyph .g-dash { stroke-dasharray: 3 3; stroke-width: 1.25; }
.bz-tile__body { display: grid; gap: var(--s-3); justify-items: start; min-width: 0; }
.bz-tile h3 { font-size: var(--fs-md); }
.bz-tile__spec { margin: 0; display: grid; gap: .4rem; width: 100%; }
.bz-tile__spec > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.bz-tile__spec dt { color: var(--fg-3); }
.bz-tile__spec dd { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.5; }
.bz-tile__spec .bz-tile__offer { color: var(--fg); font-weight: 500; }
.bz-tile__offer .chip { margin-top: .35rem; vertical-align: middle; }
html[lang="en"] .bz-tile__offer .chip { margin-inline-start: .25rem; margin-top: 0; }
.bz-tile__note { color: var(--fg-2); font-size: var(--fs-sm); max-width: 30ch; }
.bz-tile__go { min-height: 44px; font-size: var(--fs-sm); }
.bz-tile--other .bz-glyph { color: var(--fg-3); }

@media (min-width: 760px) {
  .bz-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-inline-start: 1px solid var(--line-strong);
  }
  .bz-tile {
    grid-template-rows: auto 1fr;
    gap: var(--s-5);
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-inline-end: 1px solid var(--line-strong);
  }
  .bz-glyph { position: static; width: 72px; height: 54px; }
  .bz-tile h3 { padding-inline-end: 0; }
  .bz-tile__body { align-content: start; height: 100%; grid-template-rows: auto 1fr auto; }
  .bz-tile__spec > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .bz-tile--other { background: var(--bg-2); }
}
@media (min-width: 1000px) {
  .bz-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bz-tile { padding: var(--s-6) var(--s-6) var(--s-5); }
}

/* ---------- 3 · your logo, on a real piece (bold moment) ---------- */
.bz-logo { overflow: hidden; }
.bz-logo__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-areas: "head" "fig" "try" "cta";
}
.bz-logo__head { grid-area: head; display: grid; gap: var(--s-4); max-width: 34rem; }
.bz-logo__head h2 { max-width: 14ch; }
.bz-logo__fig { grid-area: fig; }
.bz-logo__try { grid-area: try; max-width: 26rem; }
.bz-logo__cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.bz-logo__cta .link-arrow { min-height: 44px; font-size: var(--fs-sm); }
@media (min-width: 920px) {
  .bz-logo__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head fig" "try fig" "cta fig";
    column-gap: var(--s-8);
    row-gap: var(--s-6);
    align-items: start;
  }
  .bz-logo__head { padding-top: var(--s-6); }
}

.mock { margin: 0; display: grid; gap: 0; max-width: 620px; width: 100%; justify-self: center; }
.mk { display: block; }
.mk-head { fill: var(--lamp); }
.mk-stop { stop-color: var(--lamp); }
.mk-face { stroke: var(--paper); stroke-width: 1.75; stroke-linejoin: round; }
.mk-base { fill: color-mix(in srgb, var(--lamp) 16%, var(--ink)); stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
.mk-side { fill: color-mix(in srgb, var(--lamp) 7%, var(--ink)); stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
.mk-zone { fill: none; stroke: var(--lamp); stroke-width: 1.5; stroke-dasharray: 6 4; }
.mk-ph {
  fill: var(--lamp);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .14em;
}
.mk-ph--ar { font-family: var(--font-body); font-size: 21px; font-weight: 600; letter-spacing: 0; }
html[lang="ar"] .mk-ph--en, html[lang="en"] .mk-ph--ar, .mock.has-name .mk-ph { display: none; }
.mk-name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
}
.mock.has-name .mk-zone { stroke-dasharray: none; stroke-opacity: .55; }
@media (max-width: 640px) {
  .mk-ph { font-size: 19px; letter-spacing: .06em; }
  .mk-ph--ar { font-size: 19px; letter-spacing: 0; }
}

/* title block under the drawing */
.tb {
  margin: var(--s-2) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-strong);
}
.tb > div { padding: .55rem .8rem; min-width: 0; border-top: 1px solid var(--line-strong); }
.tb > div + div + div { border-inline-start: 1px solid var(--line-strong); }
.tb .tb__client { grid-column: 1 / -1; border-top: 0; }
.tb dt { color: var(--fg-3); line-height: 1.4; }
.tb dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; line-height: 1.4; }
html[lang="en"] .tb dd { font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.tb dd[data-tb-client] { color: var(--accent-text); }
@media (min-width: 560px) {
  .tb { grid-template-columns: 1.6fr 1fr 1fr; }
  .tb > div { border-top: 0; }
  .tb > div + div { border-inline-start: 1px solid var(--line-strong); }
  .tb .tb__client { grid-column: auto; }
}
.bz-logo__cap { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--fg-3); }

/* ---------- 4 · how we work + terms ---------- */
.bz-steps h3 { font-size: var(--fs-md); }
@media (min-width: 960px) {
  .bz-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-bottom: 0;
  }
  .bz-steps > li {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--s-3);
    padding: var(--s-5) 0 0;
    padding-inline-end: var(--s-5);
    border-top: 1px solid var(--line-strong);
    background: repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 10px) 0 0 / 100% 6px no-repeat;
  }
  html[dir="rtl"] .bz-steps > li { background-position: 100% 0; }
  .bz-steps > li::after {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline-start: 0;
    width: 2px;
    height: 16px;
    background: var(--accent-text);
  }
  .bz-steps > li::before { padding-top: .35rem; justify-self: start; }
}

.bz-terms {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
}
.bz-terms__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) clamp(1rem, .7rem + 1.2vw, 1.75rem);
  border-bottom: 1px solid var(--line-strong);
}
.bz-terms__head h3 { font-size: var(--fs-lg); }
.bz-terms__code { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em; color: var(--fg-3); direction: ltr; }
.bz-terms__rows { margin: 0; }
.bz-term {
  display: grid;
  gap: .15rem var(--s-5);
  padding: var(--s-4) clamp(1rem, .7rem + 1.2vw, 1.75rem);
  border-bottom: 1px dashed var(--line-strong);
}
.bz-term:last-child { border-bottom: 0; }
.bz-term dt { color: var(--accent-text); }
.bz-term dd { margin: 0; }
.bz-term .dim { --dim-c: var(--fg-3); max-width: 25rem; width: 100%; }
.bz-term .dim__val { font-size: var(--fs-md); color: var(--fg); letter-spacing: .04em; }
html[lang="ar"] .bz-term .dim__val { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; direction: rtl; unicode-bidi: isolate; }
@media (max-width: 520px) {
  .bz-term .dim { gap: .5rem; }
  .bz-term .dim__val { font-size: 1rem; letter-spacing: 0; }
}
.bz-term__note { color: var(--fg-2); font-size: var(--fs-sm); }
@media (min-width: 820px) {
  .bz-term {
    grid-template-columns: 8.5rem minmax(16rem, 25rem) minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------- 5 · seasons ---------- */
/* by day, "how we work" and the quote are paper too: mark where the bands meet */
:root[data-theme="light"] .bz-seasons,
:root[data-theme="light"] .bz-quote { box-shadow: inset 0 1px 0 var(--line-strong); }
.bz-season-list { list-style: none; display: grid; border-top: 1px solid var(--line-strong); }
.bz-season {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line-strong);
  justify-items: start;
}
.bz-season__name { font-size: var(--fs-xl); }
.bz-season__what { color: var(--fg-2); }
.bz-season__go { min-height: 44px; font-size: var(--fs-sm); }
@media (min-width: 820px) {
  .bz-season {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-6);
    padding-block: var(--s-6);
  }
}
.bz-tip {
  --cut: 12px;
  margin-top: var(--s-6);
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  max-width: 44rem;
  padding: var(--s-4) var(--s-5);
  background: var(--lamp);
  color: var(--ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  font-weight: 400;
}
.bz-tip__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  padding: .1rem .4rem;
  border: 1px solid var(--ink);
}

/* ---------- 6 · quote form ---------- */
.bz-quote__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .bz-quote__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--s-7); align-items: start; }
  .bz-quote__aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); margin-top: clamp(9rem, 8rem + 3vw, 12rem); }
}
.bz-quote__head { margin-bottom: var(--s-6); }

.bz-sheet {
  --cut: 22px;
  background: var(--bg-2);
  padding: clamp(1rem, .6rem + 2vw, 2.25rem);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px var(--line);
}
:root[data-theme="light"] main[data-page="b2b"] .bz-sheet { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.bz-sheet .ticket { --cut: 18px; }

.bz-form { gap: var(--s-6); }
.bz-group { display: grid; gap: var(--s-5); min-width: 0; }
.bz-group + .bz-group { padding-top: var(--s-5); border-top: 1px dashed var(--line-strong); }
.bz-group__title { color: var(--accent-text); display: flex; align-items: center; gap: .6em; }
.bz-group__title::before {
  content: "";
  width: 18px;
  height: 7px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 4px) 0 100% / 100% 4px no-repeat;
}
.bz-form .choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); }
.bz-form .choice__box { padding-inline: .75rem; }
.bz-form .choice__box { align-content: center; }
@media (min-width: 640px) {
  .bz-form__row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-field--half { max-width: calc(50% - var(--s-5) / 2); }
}
.bz-form input[type="date"].input { min-width: 0; }
html[dir="rtl"] .bz-form input[type="date"].input { text-align: right; }
.bz-form__actions { display: grid; gap: var(--s-3); justify-items: start; padding-top: var(--s-2); }
.bz-form__actions .form__note { font-size: var(--fs-sm); color: var(--fg-2); max-width: 40rem; }
@media (max-width: 520px) {
  .bz-form__actions .btn { width: 100%; }
}

/* aside */
.bz-quote__aside { display: grid; gap: var(--s-5); }
.bz-next { display: grid; gap: var(--s-4); }
.bz-next__list { list-style: none; counter-reset: nx; display: grid; gap: 0; border-top: 1px solid var(--line); }
.bz-next__list li {
  counter-increment: nx;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  font-size: var(--fs-sm);
}
.bz-next__list li::before {
  content: counter(nx, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-text);
  padding-top: .2em;
  direction: ltr;
}
.bz-next__list .mono { font-size: .95em; color: var(--fg); font-weight: 500; }
.bz-direct { display: grid; gap: var(--s-3); }
.bz-direct__title { font-weight: 500; }
.bz-direct__list { list-style: none; display: grid; gap: 0; }
.bz-direct__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--s-3); border-bottom: 1px solid var(--line); }
.bz-direct__k { color: var(--fg-3); }
.bz-direct__list a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); text-decoration: none; color: var(--fg); overflow-wrap: anywhere; }
.bz-direct__list a:hover { color: var(--accent-text); text-decoration: underline; }

/* ---------- 7 · FAQ ---------- */
.bz-faq { padding-top: 0; }
.bz-faq__grid { display: grid; gap: var(--s-5); padding-top: calc(var(--section) * .7); border-top: 1px solid var(--line-strong); }
.bz-faq__head h2 { font-size: var(--fs-xl); }
@media (min-width: 900px) {
  .bz-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-7); }
  .bz-faq__head { margin-bottom: 0; align-content: start; }
}

/* ---------- closing CTA ---------- */
.bz-close__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5); }
.bz-close h2 { font-size: var(--fs-xl); max-width: 30ch; }
.bz-close .btn--ghost { box-shadow: inset 0 0 0 1.5px var(--ink); }
.bz-close .btn--ghost:hover { background: var(--ink); color: var(--lamp); }
@media (max-width: 520px) {
  .bz-close .cluster { width: 100%; }
  .bz-close .cluster .btn { flex: 1 1 100%; }
}

/* briefly mark the cards a tile link picked in the form */
@media (prefers-reduced-motion: no-preference) {
  .choice.is-picked .choice__box { animation: bz-pick 1.2s var(--ease) 1; }
}
@keyframes bz-pick {
  0% { box-shadow: inset 0 0 0 1px var(--fg), 0 0 0 0 color-mix(in srgb, var(--lamp) 60%, transparent); }
  40% { box-shadow: inset 0 0 0 1px var(--fg), 0 0 0 6px color-mix(in srgb, var(--lamp) 0%, transparent); }
  100% { box-shadow: inset 0 0 0 1px var(--fg); }
}