/* ==========================================================================
   BookZen — assets/css/bz-enhance.css
   Design refinement layer. Loads AFTER style.css and overrides it.
   Nothing in style.css was deleted, so removing this one <link> reverts
   the site to its previous appearance.

   1.  Extended tokens (depth, easing, surfaces)
   2.  Base polish
   3.  Header
   4.  Buttons
   5.  Hero
   6.  Section rhythm & headings
   7.  Cards, services, benefits
   8.  Portfolio & gallery
   9.  Process, timeline, provide rows
   10. Testimonials, FAQ, CTA band
   11. Forms
   12. Footer
   13. Floating actions (enquiry button, back to top)
   14. Enquiry modal
   15. Responsive & accessibility
   ========================================================================== */

/* 1. EXTENDED TOKENS ====================================================== */
:root {
  /* Depth scale — one shadow per elevation, used consistently. */
  --bz-sh-1: 0 1px 2px rgba(20, 32, 38, .04), 0 2px 8px -4px rgba(20, 32, 38, .08);
  --bz-sh-2: 0 2px 4px rgba(20, 32, 38, .04), 0 12px 24px -12px rgba(20, 32, 38, .16);
  --bz-sh-3: 0 4px 8px rgba(20, 32, 38, .05), 0 28px 48px -20px rgba(20, 32, 38, .24);
  --bz-sh-4: 0 40px 80px -28px rgba(12, 32, 38, .42);

  /* A teal-tinted dark, distinct from the footer's neutral #222.
     Used only for the enquiry panel so it reads as its own surface. */
  --bz-deep: #10262A;
  --bz-deep-2: #1A383D;

  --bz-primary-tint: rgba(24, 194, 194, .12);
  --bz-purple-tint: rgba(120, 104, 179, .12);

  --bz-ring: 0 0 0 3px rgba(24, 194, 194, .28);
  --bz-radius-sm: 8px;
  --bz-radius-xl: 22px;
}

/* 2. BASE POLISH ========================================================== */
body {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--bz-primary);
  color: #04292A;
}

/* Anchored sections clear the sticky header. */
:target { scroll-margin-top: 96px; }

/* A single, consistent focus treatment everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.filter-btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bz-primary-dark);
  outline-offset: 3px;
  border-radius: var(--bz-radius-sm);
}

/* Images render on a neutral ground while loading rather than flashing. */
.work-media,
.gallery-item img,
.page-hero-figure img { background-color: var(--bz-bg); }

/* 3. HEADER =============================================================== */
.site-header {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow .25s var(--bz-ease), background .25s var(--bz-ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--bz-sh-2);
}

.header-inner { min-height: 82px; }

/* Nav items get a quiet resting state and a filled hover, so the pointer
   always has an obvious target rather than only a colour change. */
.bz-nav > li > a,
.bz-nav > li > button { padding: 10px 15px; border-radius: var(--bz-pill); }
.bz-nav > li > a:hover,
.bz-nav > li > button:hover { background: var(--bz-primary-soft); }

.bz-nav > li > a.is-active,
.bz-nav > li > button.is-active { background: var(--bz-primary-soft); }
.bz-nav > li > a.is-active::after,
.bz-nav > li > button.is-active::after { display: none; }

.bz-nav > li > button[aria-expanded="true"] { background: var(--bz-primary-soft); }
.bz-nav > li > button[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.bz-nav .bi-chevron-down { transition: transform .2s var(--bz-ease); }

/* Mega panel: softer entry, clearer column separation. */
.mega-panel {
  border-top: 0;
  box-shadow: var(--bz-sh-3);
  border-radius: 0 0 var(--bz-radius-lg) var(--bz-radius-lg);
}
.mega-col h3 { letter-spacing: .01em; }
.mega-col a { border-radius: 0 var(--bz-radius-sm) var(--bz-radius-sm) 0; }
.mega-col a:hover { background: rgba(24, 194, 194, .07); }
.mega-footer { padding-bottom: 26px; }

/* 4. BUTTONS ============================================================== */
.btn-bz,
.btn-bz-outline,
.btn-bz-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  line-height: 1.3;
}

.btn-bz {
  background: linear-gradient(135deg, var(--bz-primary) 0%, var(--bz-primary-dark) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -10px rgba(16, 156, 156, .9);
}
.btn-bz:hover {
  background: linear-gradient(135deg, var(--bz-primary-dark) 0%, #0C8686 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 24px -10px rgba(16, 156, 156, .95);
}
.btn-bz:active,
.btn-bz-outline:active,
.btn-bz-light:active { transform: translateY(1px); }

.btn-bz-outline {
  border-color: #D3D8DF;
  color: var(--bz-dark);
  background: var(--bz-white);
}
.btn-bz-outline:hover {
  border-color: var(--bz-primary);
  color: var(--bz-primary-dark);
  background: var(--bz-primary-soft);
  transform: translateY(-1px);
}

.btn-bz-light { box-shadow: var(--bz-sh-1); }
.btn-bz-light:hover { transform: translateY(-1px); box-shadow: var(--bz-sh-2); }

.btn-header { padding: 11px 22px; }

/* 5. HERO ================================================================= */
.hero {
  background:
    radial-gradient(680px 420px at 88% 12%, rgba(24, 194, 194, .16), transparent 62%),
    radial-gradient(560px 380px at 6% 88%, rgba(120, 104, 179, .13), transparent 60%),
    linear-gradient(180deg, var(--bz-hero-top) 0%, var(--bz-hero-bottom) 100%);
}

/* The covers are the loudest thing on the page already, so the only
   treatment is a shadow that plants them on the background. */
.hero-figure img {
  filter: drop-shadow(0 26px 44px rgba(16, 46, 56, .22));
}

.hero-eyebrow { color: var(--bz-primary-dark); }

.hero-meta i { font-size: 1rem; }

.hero-indicators button[data-bs-target] {
  height: 4px;
  border-radius: var(--bz-pill);
  transition: background .25s var(--bz-ease), width .25s var(--bz-ease);
}
.hero-indicators button[data-bs-target]:hover { background: #B9C0C9; }
.hero-indicators button[data-bs-target].active { width: 72px; }

.hero-arrow { box-shadow: var(--bz-sh-1); }
.hero-arrow:hover { transform: translateY(-1px); box-shadow: var(--bz-sh-2); }

/* Inner page heroes get the same tinted ground, at lower volume. */
.page-hero {
  background:
    radial-gradient(560px 320px at 92% 0%, rgba(24, 194, 194, .1), transparent 60%),
    linear-gradient(180deg, #FBFDFE 0%, var(--bz-white) 100%);
}
.page-hero--soft {
  background:
    radial-gradient(560px 320px at 92% 0%, rgba(120, 104, 179, .1), transparent 60%),
    var(--bz-bg);
}
.page-hero--dark {
  background:
    radial-gradient(620px 360px at 88% 6%, rgba(24, 194, 194, .18), transparent 62%),
    var(--bz-dark);
}
.page-hero-figure img {
  box-shadow: var(--bz-sh-2);
  border-radius: var(--bz-radius-lg);
}

/* 6. SECTION RHYTHM & HEADINGS ============================================ */
.section-head { margin-bottom: 56px; }

.section-label {
  letter-spacing: .01em;
  gap: 14px;
}
.section-label::before {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bz-primary), rgba(24, 194, 194, .25));
}

.section--soft {
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(24, 194, 194, .06), transparent 58%),
    var(--bz-bg);
}
.section--dark {
  background:
    radial-gradient(700px 420px at 10% 100%, rgba(24, 194, 194, .14), transparent 60%),
    var(--bz-dark);
}

/* 7. CARDS, SERVICES, BENEFITS ============================================ */
.bz-card {
  position: relative;
  border-radius: var(--bz-radius-lg);
  box-shadow: var(--bz-sh-1);
  overflow: hidden;
  transition: transform .24s var(--bz-ease), border-color .24s var(--bz-ease),
              box-shadow .24s var(--bz-ease);
}
/* One rule wipes across the top edge on hover — the card's only motion. */
.bz-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bz-primary), var(--bz-purple));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--bz-ease);
}
.bz-card:hover {
  transform: translateY(-3px);
  border-color: #D8DDE4;
  box-shadow: var(--bz-sh-3);
}
.bz-card:hover::after { transform: scaleX(1); }

.bz-icon {
  border-radius: 14px;
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(24, 194, 194, .16);
  transition: background .24s var(--bz-ease), color .24s var(--bz-ease);
}
.bz-icon--purple { box-shadow: inset 0 0 0 1px rgba(120, 104, 179, .18); }
.bz-card:hover .bz-icon { background: var(--bz-primary); color: var(--bz-white); }
.bz-card:hover .bz-icon--purple { background: var(--bz-purple); color: var(--bz-white); }

.service-links a::before {
  border-radius: 50%;
  transition: transform .2s var(--bz-ease);
}
.service-links a:hover::before { transform: scale(1.6); }

.benefit {
  padding: 30px 0;
  transition: border-color .2s var(--bz-ease);
}
.benefit:hover { border-top-color: var(--bz-primary); }
.benefit i { font-size: 1.625rem; }

.industry-chip {
  border-radius: var(--bz-radius-lg);
  box-shadow: var(--bz-sh-1);
}
.industry-chip:hover { box-shadow: var(--bz-sh-2); }

.num-card,
.quote-card,
.related-card {
  border-radius: var(--bz-radius-lg);
  box-shadow: var(--bz-sh-1);
  transition: transform .24s var(--bz-ease), box-shadow .24s var(--bz-ease),
              border-color .24s var(--bz-ease);
}
.num-card:hover,
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bz-sh-3);
  border-color: #D8DDE4;
}

/* 8. PORTFOLIO & GALLERY ================================================== */
.filter-btn { box-shadow: var(--bz-sh-1); }
.filter-btn.is-active { box-shadow: var(--bz-sh-2); }

.work-card {
  border-radius: var(--bz-radius-lg);
  box-shadow: var(--bz-sh-1);
  transition: transform .28s var(--bz-ease), box-shadow .28s var(--bz-ease),
              border-color .28s var(--bz-ease);
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bz-sh-3);
  border-color: #D8DDE4;
}
.work-media { position: relative; }
/* Hover names the action rather than just enlarging the picture. */
.work-media::after {
  content: "View project";
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 16px;
  border-radius: var(--bz-pill);
  background: rgba(255, 255, 255, .95);
  color: var(--bz-dark);
  font-family: var(--bz-font-body);
  font-size: .8125rem;
  font-weight: 500;
  box-shadow: var(--bz-sh-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .26s var(--bz-ease), transform .26s var(--bz-ease);
}
.work-card:hover .work-media::after { opacity: 1; transform: translateY(0); }

.gallery-item img {
  border-radius: var(--bz-radius-lg);
  box-shadow: var(--bz-sh-1);
  transition: transform .3s var(--bz-ease), box-shadow .3s var(--bz-ease);
}
.gallery-item:hover img { transform: translateY(-3px); box-shadow: var(--bz-sh-3); }

/* 9. PROCESS, TIMELINE, PROVIDE ROWS ====================================== */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bz-primary-soft);
  color: var(--bz-primary-dark);
  font-size: 1.125rem;
  box-shadow: inset 0 0 0 1px rgba(24, 194, 194, .22);
  transition: background .3s var(--bz-ease), color .3s var(--bz-ease);
}
.step.is-lit .step-num { background: var(--bz-primary); color: var(--bz-white); }

.timeline-item::before { box-shadow: 0 0 0 4px var(--bz-white); }
.section--soft .timeline-item::before { box-shadow: 0 0 0 4px var(--bz-bg); }

.provide-row { transition: background .2s var(--bz-ease); }
.provide-row:hover { background: rgba(24, 194, 194, .04); }
.provide-num { font-size: 1.5rem; }

.split-item { transition: border-color .2s var(--bz-ease); }
.split-item:hover { border-top-color: var(--bz-primary); }

/* 10. TESTIMONIALS, FAQ, CTA BAND ========================================= */
.quote-card:hover { box-shadow: var(--bz-sh-2); }
.quote-card blockquote { font-size: 1.25rem; }

.faq-accordion .accordion-button {
  transition: color .2s var(--bz-ease), padding .2s var(--bz-ease);
  border-radius: 0;
}
.faq-accordion .accordion-button:hover { color: var(--bz-primary-dark); }
.faq-accordion .accordion-item { transition: border-color .2s var(--bz-ease); }

.cta-band {
  background:
    radial-gradient(620px 380px at 88% 8%, rgba(24, 194, 194, .26), transparent 62%),
    radial-gradient(520px 340px at 4% 96%, rgba(120, 104, 179, .28), transparent 60%),
    var(--bz-dark);
  box-shadow: var(--bz-sh-3);
}
.cta-band .cta-rule {
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bz-primary), var(--bz-purple));
}

/* 11. FORMS =============================================================== */
.form-control,
.form-select {
  padding: 13px 15px;
  background-color: var(--bz-white);
  transition: border-color .18s var(--bz-ease), box-shadow .18s var(--bz-ease);
}
.form-control::placeholder { color: #9AA3AE; }
.form-control:hover,
.form-select:hover { border-color: #C9CFD8; }
.form-control:focus,
.form-select:focus { box-shadow: var(--bz-ring); }
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid { border-color: #D64545; }
.was-validated .form-control:valid,
.was-validated .form-select:valid { border-color: #BFD9C9; background-image: none; }

/* 12. FOOTER ============================================================== */
.site-footer {
  position: relative;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(24, 194, 194, .1), transparent 58%),
    var(--bz-dark);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bz-primary), var(--bz-purple) 55%, transparent);
}
.footer-col a {
  display: inline-block;
  transition: color .2s var(--bz-ease), transform .2s var(--bz-ease);
}
.footer-col a:hover { transform: translateX(3px); }
.footer-contact a { color: rgba(255, 255, 255, .78); }
.footer-contact a:hover { color: var(--bz-primary); }
.footer-bottom nav a { color: rgba(255, 255, 255, .62); }
.footer-bottom nav a:hover { color: var(--bz-primary); }

/* 13. FLOATING ACTIONS ==================================================== */
.bz-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1035;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.bz-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--bz-pill);
  background: linear-gradient(135deg, var(--bz-primary) 0%, var(--bz-primary-dark) 100%);
  color: var(--bz-white);
  font-family: var(--bz-font-body);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 10px 28px -10px rgba(16, 156, 156, .85), var(--bz-sh-2);
  transition: transform .22s var(--bz-ease), box-shadow .22s var(--bz-ease),
              background .22s var(--bz-ease);
}
.bz-fab i { font-size: 1.125rem; }
.bz-fab:hover {
  color: var(--bz-white);
  background: linear-gradient(135deg, var(--bz-primary-dark) 0%, #0C8686 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(16, 156, 156, .95), var(--bz-sh-3);
}
.bz-fab:active { transform: translateY(0); }

/* A single attention pulse when the button first appears, then it rests. */
.bz-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--bz-primary);
  opacity: 0;
}
.bz-fab.is-new::before { animation: bzPulse 2.2s var(--bz-ease) 2; }
@keyframes bzPulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.22); }
}
.bz-fab { position: relative; }

.bz-top {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1C1C1C;
  border-radius: 50%;
  background: #17BEBE;
  color: var(--bz-dark);
  box-shadow: var(--bz-sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s var(--bz-ease), transform .25s var(--bz-ease),
              visibility .25s, background .2s var(--bz-ease), color .2s var(--bz-ease);
}
.bz-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.bz-top:hover { background: var(--bz-dark); color: var(--bz-white); border-color: var(--bz-dark); }

/* 14. ENQUIRY MODAL ======================================================= */
.bz-enquiry .modal-dialog { max-width: 940px; }

.bz-enquiry .modal-content {
  border: 0;
  border-radius: var(--bz-radius-xl);
  overflow: hidden;
  box-shadow: var(--bz-sh-4);
  background: var(--bz-white);
}

.bz-enquiry .modal-backdrop,
.modal-backdrop.bz-backdrop { background-color: #0B1E22; }
.modal-backdrop.show { opacity: .62; }

.bz-enq-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 520px;
}

/* Left rail — teal-black, so the panel reads as its own surface rather
   than a second footer. */
.bz-enq-rail {
  position: relative;
  padding: 38px 32px;
  color: rgba(255, 255, 255, .74);
  background:
    radial-gradient(420px 300px at 12% 8%, rgba(24, 194, 194, .3), transparent 62%),
    radial-gradient(340px 280px at 100% 100%, rgba(120, 104, 179, .3), transparent 60%),
    linear-gradient(165deg, var(--bz-deep-2) 0%, var(--bz-deep) 100%);
  display: flex;
  flex-direction: column;
}
.bz-enq-rail .brand img { width: 132px; }
.bz-enq-rail h2 {
  font-size: 1.55rem;
  line-height: 1.22;
  color: var(--bz-white);
  margin: 26px 0 12px;
}
.bz-enq-rail p {
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 0;
}
.bz-enq-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.bz-enq-points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .9125rem;
  line-height: 1.5;
}
.bz-enq-points i { color: var(--bz-primary); margin-top: 3px; flex: 0 0 auto; }
.bz-enq-rail-foot {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .875rem;
}
.bz-enq-rail-foot a { color: var(--bz-white); }
.bz-enq-rail-foot a:hover { color: var(--bz-primary); }
.bz-enq-rail-foot span { display: block; color: rgba(255, 255, 255, .55); margin-top: 4px; }

/* Right side — the form. */
.bz-enq-body { padding: 36px 38px 34px; position: relative; }
.bz-enq-body h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  padding-right: 40px;
}
.bz-enq-body > p.form-note { margin-bottom: 22px; }

.bz-enquiry .btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--bz-white);
  box-shadow: var(--bz-sh-1);
  opacity: .65;
  transition: opacity .2s var(--bz-ease), transform .2s var(--bz-ease);
}
.bz-enquiry .btn-close:hover { opacity: 1; transform: rotate(90deg); }

.bz-enq-body .form-label { margin-bottom: 5px; }
.bz-enq-body .form-control,
.bz-enq-body .form-select { background-color: #FCFDFD; }
.bz-enq-body textarea.form-control { min-height: 108px; resize: vertical; }

.bz-enq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 22px;
}
.bz-enq-actions .btn-bz { padding: 14px 30px; }
.bz-enq-actions .form-note { margin: 0; max-width: 30ch; }

/* Honeypot: hidden from people, reachable by bots. */
.bz-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success state replaces the form in place. */
.bz-enq-done {
  display: none;
  padding: 18px 0 8px;
  text-align: left;
}
.bz-enq-done.is-shown { display: block; animation: bzFade .35s var(--bz-ease) both; }
@keyframes bzFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bz-enq-tick {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bz-primary-soft);
  color: var(--bz-primary-dark);
  font-size: 1.75rem;
  margin-bottom: 18px;
}
.bz-enq-done h3 { margin-bottom: 8px; }
.bz-enq-done p { color: var(--bz-muted); max-width: 46ch; }

/* 15. RESPONSIVE & ACCESSIBILITY ========================================== */
@media (max-width: 1199.98px) {
  .bz-nav > li > a,
  .bz-nav > li > button { padding: 10px 11px; font-size: .9375rem; }
}

@media (max-width: 991.98px) {
  .bz-enq-grid { grid-template-columns: 1fr; min-height: 0; }
  .bz-enq-rail { padding: 26px 28px; }
  .bz-enq-rail h2 { margin-top: 18px; font-size: 1.375rem; }
  .bz-enq-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
  .bz-enq-rail-foot { margin-top: 22px; }
  .bz-enq-body { padding: 28px 28px 26px; }
}

@media (max-width: 575.98px) {
  .bz-float { right: 14px; bottom: 14px; gap: 10px; }
  .bz-fab { padding: 13px 18px; font-size: .875rem; }
  .bz-enquiry .modal-dialog { margin: 10px; }
  /* On a phone the form is the whole job: the rail shrinks to a
     name plate so the first field is visible without scrolling. */
  .bz-enq-rail { padding: 18px 20px 20px; }
  .bz-enq-rail .brand img { width: 104px; }
  .bz-enq-rail h2 { margin: 12px 0 0; font-size: 1.1875rem; }
  .bz-enq-rail p,
  .bz-enq-points,
  .bz-enq-rail-foot { display: none; }
  .bz-enq-body { padding: 22px 20px 22px; }
  .bz-enq-body h3 { font-size: 1.25rem; }
  .bz-enq-body > p.form-note { margin-bottom: 18px; }
  .bz-enq-actions .btn-bz { width: 100%; }
  .bz-enq-actions .form-note { max-width: none; }
  .bz-enquiry .btn-close { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bz-card:hover,
  .work-card:hover,
  .num-card:hover,
  .related-card:hover,
  .gallery-item:hover img,
  .btn-bz:hover,
  .btn-bz-outline:hover,
  .btn-bz-light:hover,
  .bz-fab:hover { transform: none; }
  .bz-fab.is-new::before { animation: none; }
  .site-header { backdrop-filter: none; background: var(--bz-white); }
}

@media (forced-colors: active) {
  .bz-card::after,
  .work-media::after,
  .site-footer::before { display: none; }
  .bz-fab, .bz-top { border: 1px solid ButtonBorder; }
}

@media print {
  .bz-float, .bz-enquiry { display: none !important; }
}

/* ==========================================================================
   BookZen — assets/css/studio.css
   Design Studio page only. Load AFTER style.css and bz-enhance.css.
   Every selector is prefixed .st- so nothing leaks into other pages.

   Idea: the page is the studio's own working surface. The hero is a
   stack of artwork sheets inside printer's crop marks, laid over column
   guides. Capabilities read as a book's table of contents, the workflow
   is a single production line, the samples are mounted plates, and the
   closing call to action is a fresh sheet waiting to be filled.

   1. Tokens & shared pieces (crop marks, ghost button)
   2. Hero
   3. Opening statement
   4. Contents (capabilities)
   5. Production line (workflow)
   6. Plates (studio output)
   7. Studio habits
   8. Closing sheet (CTA)
   9. Responsive, motion, forced colours
   ========================================================================== */

/* 1. TOKENS & SHARED ====================================================== */
:root {
  /* Darker inks for small text on tinted grounds (AA at 12–14px). */
  --st-ink-teal: #0B7474;
  --st-ink-purple: #5B4B99;
  --st-rule-strong: #222222;
  --st-leader: #C9CFD8;
}

/* Printer's crop marks: eight short hairlines just outside each corner.
   Drawn with background layers on one pseudo-element, so any block can
   wear them by adding .st-crop. */
.st-crop {
  position: relative;
  --st-mark: rgba(255, 255, 255, .45);
  --st-gap: 22px;
  --st-len: 15px;
}
.st-crop::before {
  content: "";
  position: absolute;
  inset: calc(var(--st-gap) * -1);
  z-index: 4;
  pointer-events: none;
  color: var(--st-mark);
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size:
    var(--st-len) 1px, 1px var(--st-len),
    var(--st-len) 1px, 1px var(--st-len),
    var(--st-len) 1px, 1px var(--st-len),
    var(--st-len) 1px, 1px var(--st-len);
  background-position:
    0 var(--st-gap), var(--st-gap) 0,
    100% var(--st-gap), calc(100% - var(--st-gap)) 0,
    0 calc(100% - var(--st-gap)), var(--st-gap) 100%,
    100% calc(100% - var(--st-gap)), calc(100% - var(--st-gap)) 100%;
}

/* Secondary button for dark grounds. */
.st-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  font-family: var(--bz-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bz-white);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--bz-pill);
  transition: background .2s var(--bz-ease), border-color .2s var(--bz-ease);
}
.st-btn-ghost:hover {
  color: var(--bz-white);
  background: rgba(255, 255, 255, .1);
  border-color: var(--bz-white);
}

/* 2. HERO ================================================================= */
.st-hero {
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  color: rgba(255, 255, 255, .74);
  background:
    radial-gradient(760px 480px at 80% 38%, rgba(24, 194, 194, .2), transparent 62%),
    radial-gradient(620px 440px at -6% 106%, rgba(120, 104, 179, .24), transparent 60%),
    linear-gradient(165deg, var(--bz-deep-2) 0%, var(--bz-deep) 68%);
}
.st-hero .container { position: relative; }

/* Twelve column guides, the way a spread looks in layout software. */
.st-guides {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  pointer-events: none;
  border-right: 1px solid rgba(255, 255, 255, .05);
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%);
}

.st-hero .crumbs,
.st-hero-grid { position: relative; z-index: 1; }

.st-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 80px;
  align-items: center;
  padding: 40px 0 104px;
}

.st-hero h1 {
  font-size: clamp(2.75rem, 5.8vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--bz-white);
  max-width: 12ch;
  margin: 0 0 30px;
}
.st-hero .lead-text {
  color: rgba(255, 255, 255, .72);
  max-width: 44ch;
  margin-bottom: 0;
}
.st-hero .hero-actions { margin-top: 36px; }

/* The stack of sheets. */
.st-stack {
  margin: 0;
  width: 100%;
  max-width: 480px;
  justify-self: center;
}
.st-stack-frame { aspect-ratio: 560 / 460; }
.st-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bz-white);
  border: 7px solid var(--bz-white);
  border-radius: 4px;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .2);
  transition: transform .7s var(--bz-ease);
}
.st-sheet--back  { z-index: 1; transform: rotate(-8deg) translate(-10%, 6%) scale(.9); }
.st-sheet--mid   { z-index: 2; transform: rotate(6deg) translate(9%, -5%) scale(.93); }
.st-sheet--front { z-index: 3; }

/* Pointing at the stack fans it out a little further. */
.st-stack:hover .st-sheet--back { transform: rotate(-12deg) translate(-17%, 8%) scale(.9); }
.st-stack:hover .st-sheet--mid  { transform: rotate(10deg) translate(15%, -7%) scale(.93); }

.st-stack figcaption {
  margin-top: 44px;
  font-family: var(--bz-font-display);
  font-style: italic;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .58);
  text-align: center;
}

/* 3. OPENING STATEMENT ==================================================== */
.st-statement-wrap { padding: var(--bz-section-y) 0 0; }
.st-statement-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.st-pilcrow {
  font-family: var(--bz-font-display);
  font-size: 6rem;
  line-height: .78;
  color: var(--bz-primary);
  user-select: none;
}
.st-statement {
  font-family: var(--bz-font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--bz-dark);
  max-width: 30ch;
  margin: 0;
}
.st-statement-note {
  margin: 24px 0 0;
  max-width: 58ch;
  color: var(--bz-muted);
}

/* 4. CONTENTS ============================================================= */
.st-contents-grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 80px;
  align-items: start;
}
.st-contents-head { position: sticky; top: 118px; }
.st-contents-head h2 { margin-bottom: 18px; }
.st-contents-head p { color: var(--bz-muted); max-width: 34ch; }

.st-part + .st-part { margin-top: 48px; }
.st-part-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--st-rule-strong);
  font-family: var(--bz-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bz-dark);
}
.st-part-title span {
  font-family: var(--bz-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--st-ink-purple);
}

.st-toc { list-style: none; margin: 0; padding: 0; }
.st-entry {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid var(--bz-border);
  color: var(--bz-dark-soft);
}
/* The hover tint bleeds slightly past the text column; the rules do not. */
.st-entry::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  background: rgba(24, 194, 194, .06);
  opacity: 0;
  transition: opacity .2s var(--bz-ease);
}
.st-entry:hover { color: var(--bz-dark-soft); }
.st-entry:hover::before { opacity: 1; }
.st-entry-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.st-entry-head h4 {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 500;
  transition: color .2s var(--bz-ease);
}
/* Dotted leaders run from each title to its arrow, as in a printed contents page. */
.st-leader {
  flex: 1 1 auto;
  min-width: 24px;
  border-bottom: 2px dotted var(--st-leader);
  transform: translateY(-5px);
  transition: border-color .2s var(--bz-ease);
}
.st-entry-head .bi {
  flex: none;
  font-size: .9375rem;
  color: var(--st-ink-teal);
  transition: transform .2s var(--bz-ease);
}
.st-entry-desc {
  display: block;
  margin-top: 4px;
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--bz-muted);
}
.st-entry:hover h4 { color: var(--st-ink-teal); }
.st-entry:hover .st-leader { border-color: var(--bz-primary); }
.st-entry:hover .bi { transform: translate(3px, -3px); }

/* 5. PRODUCTION LINE ====================================================== */
.st-line-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 64px;
}
.st-line-head h2 { margin: 0; max-width: 19ch; }
.st-line-head p { margin: 0; color: var(--bz-muted); max-width: 44ch; }

.st-line {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
}
.st-line::before,
.st-line::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 22px;
  right: 0;
  height: 2px;
  border-radius: 2px;
}
.st-line::before { background: #D5DBE2; }
.st-line::after {
  background: linear-gradient(90deg, var(--bz-primary), var(--bz-purple));
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 1.8s var(--bz-ease);
}
/* JS arms the line when it is ready to animate; without JS it is simply drawn. */
.st-line.is-armed::after { transform: scaleX(0); }
.st-line.is-armed.is-drawn::after { transform: scaleX(1); }

.st-stage { position: relative; z-index: 1; }
.st-node {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bz-white);
  border: 2px solid var(--bz-primary);
  color: var(--st-ink-teal);
  font-family: var(--bz-font-display);
  font-size: 1.125rem;
  line-height: 1;
  box-shadow: 0 0 0 7px var(--bz-bg);
  transition: background .35s var(--bz-ease), color .35s var(--bz-ease);
}
.st-line.is-drawn .st-node { background: var(--bz-primary-dark); border-color: var(--bz-primary-dark); color: var(--bz-white); }
.st-line.is-drawn .st-stage:nth-child(2) .st-node { transition-delay: .3s; }
.st-line.is-drawn .st-stage:nth-child(3) .st-node { transition-delay: .6s; }
.st-line.is-drawn .st-stage:nth-child(4) .st-node { transition-delay: .9s; }
.st-line.is-drawn .st-stage:nth-child(5) .st-node { transition-delay: 1.2s; }
.st-line.is-drawn .st-stage:nth-child(6) .st-node { transition-delay: 1.5s; }

.st-who {
  display: inline-block;
  margin: 22px 0 10px;
  padding: 3px 10px;
  border-radius: var(--bz-pill);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  background: var(--bz-primary-soft);
  color: var(--st-ink-teal);
}
.st-who--you { background: var(--bz-purple-soft); color: var(--st-ink-purple); }
.st-who--out { background: var(--bz-dark); color: var(--bz-white); }
.st-stage h3 { font-size: 1.25rem; margin: 0 0 8px; }
.st-stage p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--bz-muted); }

/* 6. PLATES =============================================================== */
.st-plates-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: end;
  margin-bottom: 44px;
}
.st-plates-head h2 { margin: 0 0 12px; }
.st-plates-head p { margin: 0; color: var(--bz-muted); max-width: 52ch; }

.st-plates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 300px;
  gap: 22px;
  grid-template-areas:
    "a a b"
    "a a c"
    "d e f";
}
.st-plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bz-white);
  border: 1px solid var(--bz-border);
  border-radius: 6px;
}
.st-plate:nth-child(1) { grid-area: a; }
.st-plate:nth-child(2) { grid-area: b; }
.st-plate:nth-child(3) { grid-area: c; }
.st-plate:nth-child(4) { grid-area: d; }
.st-plate:nth-child(5) { grid-area: e; }
.st-plate:nth-child(6) { grid-area: f; }
.st-plate img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--bz-bg);
}
/* Captions sit under each plate like a caption in a printed book. */
.st-plate figcaption {
  flex: none;
  padding: 12px 16px 13px;
  border-top: 1px solid var(--bz-border);
  font-family: var(--bz-font-display);
  font-style: italic;
  font-size: .9375rem;
  color: var(--bz-dark-soft);
}
.st-plates-note {
  margin: 22px 0 0;
  font-size: .875rem;
  color: var(--bz-muted);
}

/* 7. STUDIO HABITS ======================================================== */
.st-habits {
  position: relative;
  color: rgba(255, 255, 255, .72);
  background:
    radial-gradient(700px 440px at 100% 0%, rgba(24, 194, 194, .15), transparent 60%),
    linear-gradient(165deg, var(--bz-deep-2) 0%, var(--bz-deep) 70%);
}
.st-habits h2 { color: var(--bz-white); max-width: 14ch; }
.st-habits-head { position: sticky; top: 118px; }
.st-habits-head p { color: rgba(255, 255, 255, .64); max-width: 34ch; margin-top: 18px; }

.st-habit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.st-habit-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: 8px 36px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.st-habit-list strong {
  font-family: var(--bz-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--bz-white);
}
.st-habit-list span { font-size: .9875rem; line-height: 1.6; color: rgba(255, 255, 255, .64); }

/* 8. CLOSING SHEET ======================================================== */
.st-close { background: var(--bz-bg); padding: 96px 0; }
.st-sheet-cta {
  --st-mark: rgba(34, 34, 34, .34);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 48px;
  align-items: end;
  padding: 64px;
  background: var(--bz-white);
  border: 1px solid var(--bz-border);
  border-radius: 4px;
  box-shadow: var(--bz-sh-2);
}
.st-sheet-cta h2 { max-width: 20ch; margin-bottom: 14px; }
.st-sheet-cta p { color: var(--bz-muted); max-width: 46ch; margin: 0; }

.st-bring {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.st-bring li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-pill);
  background: var(--bz-bg);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bz-dark);
}
.st-bring i { color: var(--st-ink-teal); }

.st-close-actions { display: flex; flex-direction: column; gap: 12px; }
.st-close-actions .form-note { margin: 6px 0 0; text-align: center; }

/* 9. RESPONSIVE, MOTION, FORCED COLOURS =================================== */
@media (max-width: 1199.98px) {
  .st-hero-grid { gap: 56px; }
  .st-contents-grid { gap: 56px; }

  /* Six stages no longer fit across, so the line turns vertical. */
  .st-line-head { margin-bottom: 48px; }
  .st-line { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
  .st-line::before,
  .st-line::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .st-line::after {
    background: linear-gradient(180deg, var(--bz-primary), var(--bz-purple));
    transform-origin: center top;
    transform: scaleY(1);
  }
  .st-line.is-armed::after { transform: scaleY(0); }
  .st-line.is-armed.is-drawn::after { transform: scaleY(1); }
  .st-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 26px;
    padding-bottom: 36px;
  }
  .st-stage:last-child { padding-bottom: 0; }
  /* Stop the line at the last node instead of running past it. */
  .st-stage:last-child::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 44px;
    bottom: 0;
    width: 4px;
    background: var(--bz-bg);
  }
  .st-node { grid-column: 1; grid-row: 1 / span 3; }
  .st-stage > :not(.st-node) { grid-column: 2; }
  .st-who { margin: 8px 0 8px; justify-self: start; }
}

@media (max-width: 991.98px) {
  .st-hero-grid { grid-template-columns: 1fr; gap: 64px; padding: 24px 0 88px; }
  .st-stack { max-width: 420px; }
  .st-statement-grid { grid-template-columns: 1fr; gap: 12px; }
  .st-pilcrow { font-size: 4.25rem; }
  .st-contents-grid { grid-template-columns: 1fr; gap: 36px; }
  .st-contents-head,
  .st-habits-head { position: static; }
  .st-line-head,
  .st-plates-head { grid-template-columns: 1fr; gap: 16px; }
  .st-plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 260px;
    grid-template-areas: "a a" "a a" "b c" "d e" "f f";
  }
  .st-habit-list li { grid-template-columns: 1fr; }
  .st-sheet-cta { grid-template-columns: 1fr; gap: 32px; padding: 48px 40px; align-items: start; }
  .st-close-actions { flex-direction: row; flex-wrap: wrap; }
  .st-close-actions .form-note { width: 100%; text-align: left; }
}

@media (max-width: 575.98px) {
  .st-crop::before { display: none; }
  .st-hero-grid { padding-bottom: 72px; }
  .st-hero .hero-actions > a { flex: 1 1 100%; }
  .st-stack { max-width: 86%; }
  .st-sheet { border-width: 5px; }
  .st-stack figcaption { margin-top: 30px; }
  .st-entry-head h4 { font-size: 1.1875rem; }
  .st-plates { grid-template-columns: 1fr; grid-auto-rows: 280px; grid-template-areas: none; }
  .st-plates > .st-plate { grid-area: auto; }
  .st-close { padding: 64px 0; }
  .st-sheet-cta { padding: 32px 22px; }
  .st-close-actions > a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .st-stack:hover .st-sheet--back { transform: rotate(-8deg) translate(-10%, 6%) scale(.9); }
  .st-stack:hover .st-sheet--mid  { transform: rotate(6deg) translate(9%, -5%) scale(.93); }
  .st-line::after { transform: none !important; }
}

@media (forced-colors: active) {
  .st-guides,
  .st-crop::before { display: none; }
  .st-line::before, .st-line::after { background: CanvasText; }
  .st-node { border-color: CanvasText; }
}

@media print {
  .st-guides, .st-crop::before { display: none; }
  .st-hero, .st-habits { background: none; color: #000; }
  .st-hero h1, .st-habits h2, .st-habit-list strong { color: #000; }
}