/*
 * KOOK design system.
 *
 * Standalone on purpose: it is not part of the Bootscore SCSS pipeline, so
 * recompiling main.css can never clobber it and it can never break Bootscore.
 * Loaded after main.css, so it wins on equal specificity.
 *
 * Everything is namespaced `kook-` / scoped to `.kook-site` to stay clear of
 * Bootstrap's utilities.
 */

:root {
  --kook-paper:      #f6f4f1;
  --kook-paper-warm: #efece6;
  --kook-ink:        #161513;
  --kook-ink-deep:   #0f0e0d;
  --kook-gold:       #a9824c;
  --kook-body:       #3d3b37;
  --kook-muted:      #8c887f;
  --kook-dim:        #6b6862;
  --kook-on-dark:    #c9c5bc;
  --kook-pale:       #e3ddd2;
  --kook-error:      #e8a08c;
  --kook-error-dark: #a3341f;  /* error text on light surfaces */

  --kook-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kook-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --kook-gutter:  56px;
  --kook-max:     1800px;
  --kook-logo-h:  42px;
  /* Height of the nav once compacted on scroll: logo + the brand link's
     8px top/bottom padding + the bar's 14px top/bottom padding. Sticky columns
     and anchor jumps are offset by it, so nothing slides under the bar --
     change the logo height above and the offsets follow. */
  --kook-nav-h:   calc(var(--kook-logo-h) + 16px + 28px);
  /* Horizontal inset for every section: the gutter on narrow screens, and on
     wide ones whatever centres an 1800px content column. The % resolves against
     each element's own containing block, so backgrounds stay full-bleed while
     the content inside them is capped -- no wrapper divs needed. */
  --kook-edge:    max(var(--kook-gutter), calc((100% - var(--kook-max)) / 2));
  --kook-section: 120px;
}

@media (max-width: 991px) { :root { --kook-gutter: 32px; --kook-section: 80px; } }
@media (max-width: 575px) { :root { --kook-gutter: 20px; --kook-section: 64px; } }


/* ---------------------------------------------------------------- base ---- */

body.kook-site {
  margin: 0;
  background: var(--kook-paper);
  color: var(--kook-ink);
  font-family: var(--kook-sans);
  font-weight: 400;
  overflow-x: hidden;
}

.kook-site,
.kook-site *,
.kook-site *::before,
.kook-site *::after { box-sizing: border-box; }

.kook-site a { color: inherit; text-decoration: none; }
.kook-site a:hover,
.kook-site a:focus-visible { color: var(--kook-gold); }
.kook-site ::selection { background: var(--kook-gold); color: var(--kook-paper); }
.kook-site img { max-width: 100%; }
.kook-site :focus-visible { outline: 2px solid var(--kook-gold); outline-offset: 3px; }

/* Anchor-qualified for the same reason as the buttons below: the bare class
   loses to `.kook-site a { color: inherit }`, which left the focused skip
   link painting ink on ink. */
.kook-site a.kook-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--kook-ink);
  color: var(--kook-paper);
}
.kook-site a.kook-skip-link:focus { left: var(--kook-gutter); top: 12px; color: var(--kook-paper); }

/* Shared section furniture. */
.kook-eyebrow {
  margin: 0 0 20px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kook-muted);
}
.kook-h2 {
  margin: 0;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.1;
}
.kook-body-text { font-size: 16px; line-height: 1.75; color: var(--kook-body); }
/* 600 is the design's bold and the heaviest Barlow face shipped; without this
   an editor's <strong> asks for 700 and risks a synthesised faux-bold. */
.kook-body-text strong,
.kook-body-text b { font-weight: 600; }
.kook-body-text p { margin: 0 0 20px; }
.kook-body-text p:last-child { margin-bottom: 0; }

/* Underlined text link with a nudging arrow. */
.kook-textlink {
  display: inline-block;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kook-textlink .kook-arrow { display: inline-block; transition: transform 0.25s ease; }
.kook-textlink:hover .kook-arrow { transform: translateX(4px); }

.kook-btn {
  display: inline-block;
  padding: 16px 28px;
  border: 1px solid transparent;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Larger size, used by the About page call to action (design: 18px 36px). */
.kook-btn--lg { padding: 18px 36px; }

/* Smaller size, used in the legal page's contact box (design: 14px 26px). */
.kook-btn--sm { padding: 14px 26px; }

/* Anchor-qualified: `.kook-site a { color: inherit }` above is (0,1,1) and
   would otherwise beat a lone class here, leaving the solid button with the
   hero's inherited white text on its near-white background. */
.kook-site a.kook-btn--solid { background: var(--kook-paper); color: var(--kook-ink); }
.kook-site a.kook-btn--solid:hover { background: var(--kook-gold); color: var(--kook-paper); }
.kook-site a.kook-btn--ghost { border-color: rgba(255,255,255,0.6); color: #fff; }
.kook-site a.kook-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Cover image inside a positioned parent. */
.kook-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ----------------------------------------------------------------- nav ---- */

.kook-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px var(--kook-edge);
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0) 100%);
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
/* Scrolled: a solid bar fades in over the gradient (a gradient can't be
   transitioned into a colour, so it's a layer on top), and the bar tightens.
   kook.js sets .is-scrolled. */
.kook-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kook-ink);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.kook-nav.is-scrolled { padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 rgba(246,244,241,0.08); }
.kook-nav.is-scrolled::before { opacity: 0.97; }

/* Anchor jumps (#company, the privacy contents…) land below the bar. */
html:has(body.kook-site) { scroll-padding-top: calc(var(--kook-nav-h) + 16px); }
html:has(body.kook-site.admin-bar) { scroll-padding-top: calc(var(--kook-nav-h) + 48px); }
/* Pages without a hero behind the nav get a solid bar instead of a gradient. */
.kook-site--solid-nav .kook-nav { position: sticky; background: var(--kook-ink); }

.kook-nav__brand { flex-shrink: 0; padding: 8px 16px 8px 0; display: inline-flex; align-items: center; }
.kook-nav__brand img { display: block; height: var(--kook-logo-h); width: auto; object-fit: contain; }
.kook-nav__brand-text { font-family: var(--kook-cond); font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: #fff; }

.kook-nav__right { display: flex; gap: 40px; align-items: center; margin-left: auto; }
.kook-nav__menu { display: flex; gap: 40px; align-items: center; margin: 0; padding: 0; list-style: none; }
.kook-nav__menu a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.kook-nav__menu a:hover { color: var(--kook-gold); }
/* Last menu item renders as the outlined CONTACT button. */
.kook-nav__menu > li:last-child > a { border: 1px solid rgba(255,255,255,0.5); padding: 10px 20px; }
.kook-nav__menu > li:last-child > a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.kook-nav__menu .current-menu-item > a { color: var(--kook-gold); }

/* Right corner of the nav: language switcher, and the menu button on mobile.
   Positioned with a z-index so it stays above the mobile drawer -- otherwise
   the drawer covered the button that closes it. */
.kook-nav__tools { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; margin-left: 40px; }

/* Language switcher: the current flag is a <summary>; the others drop from it. */
.kook-lang { position: relative; }
.kook-lang__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #fff;
  user-select: none;
}
.kook-lang__toggle::-webkit-details-marker { display: none; }
.kook-lang__toggle::marker { content: ''; }
.kook-lang__flag {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}
.kook-lang__chevron { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.2s ease; }
.kook-lang[open] .kook-lang__chevron { transform: rotate(180deg); }
.kook-lang__toggle:hover,
.kook-lang[open] .kook-lang__toggle { color: var(--kook-gold); }

.kook-lang__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 170px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--kook-ink);
  border: 1px solid rgba(246,244,241,0.15);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.kook-site a.kook-lang__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--kook-paper);
  white-space: nowrap;
}
.kook-site a.kook-lang__link:hover,
.kook-site a.kook-lang__link:focus-visible { background: rgba(246,244,241,0.08); color: var(--kook-gold); }
.kook-site a.kook-lang__link:focus-visible { outline-offset: -2px; }

/* Footer: quieter toggle, and the list opens upwards. */
.kook-footer__lang { margin-top: 20px; }
.kook-lang--footer .kook-lang__toggle { color: var(--kook-muted); }
.kook-lang--footer .kook-lang__toggle:hover,
.kook-lang--footer[open] .kook-lang__toggle { color: var(--kook-paper); }
.kook-lang--footer .kook-lang__flag { box-shadow: 0 0 0 1px rgba(246,244,241,0.3); }
.kook-lang--footer .kook-lang__list {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
  background: #1c1a18;
  border-color: rgba(140,136,127,0.3);
}

.kook-nav__toggle { display: none; background: none; border: 1px solid rgba(255,255,255,0.5); color: #fff; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; }
.kook-nav__toggle span { display: block; width: 18px; height: 1px; background: #fff; position: relative; }
.kook-nav__toggle span::before,
.kook-nav__toggle span::after { content: ''; position: absolute; left: 0; width: 18px; height: 1px; background: #fff; }
.kook-nav__toggle span::before { top: -6px; }
.kook-nav__toggle span::after { top: 6px; }
.kook-nav__toggle span,
.kook-nav__toggle span::before,
.kook-nav__toggle span::after { transition: transform 0.25s ease, background-color 0.25s ease, top 0.25s ease; }
.kook-nav.is-open .kook-nav__toggle span { background: transparent; }
.kook-nav.is-open .kook-nav__toggle span::before { top: 0; transform: rotate(45deg); }
.kook-nav.is-open .kook-nav__toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 991px) {
  .kook-nav__toggle { display: flex; }
  .kook-nav__tools { margin-left: auto; }
  .kook-nav.is-scrolled { padding-top: 12px; padding-bottom: 12px; }
  .kook-nav__right {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 96px 32px 32px;
    background: var(--kook-ink);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .kook-nav.is-open .kook-nav__right { transform: translateX(0); }
  .kook-nav__menu { flex-direction: column; align-items: flex-start; gap: 24px; }
  .kook-nav__menu a { font-size: 16px; }
  .kook-nav__menu > li:last-child > a { padding: 12px 24px; }
}


/* ---------------------------------------------------------------- hero ---- */

/* svh = the screen area visible with the browser's toolbars showing. Plain
   100vh on phones is the height with the address bar *collapsed*, which put
   the headline and buttons behind the toolbar on first load. The vh line is
   the fallback for browsers without svh. */
.kook-hero { position: relative; height: 100vh; height: 100svh; min-height: 720px; width: 100%; }
/* Short screens (laptops ~768px tall): let the hero fit the window instead of
   forcing 720px and pushing the buttons below the fold. */
@media (max-height: 820px) { .kook-hero { min-height: 560px; } }
.kook-hero__media { position: absolute; inset: 0; }
.kook-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.05) 40%, rgba(10,10,10,0.75) 100%);
}
.kook-hero__inner { position: absolute; left: var(--kook-edge); right: var(--kook-edge); bottom: 72px; color: #fff; }
.kook-hero__eyebrow { margin-bottom: 18px; font-size: 13px; letter-spacing: 0.2em; color: var(--kook-pale); }
.kook-hero__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 108px);
  line-height: 0.98;
}
.kook-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

.kook-social-rail {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kook-social-rail a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.kook-social-rail a:hover { background: rgba(255,255,255,0.15); color: #fff; }
.kook-social-rail svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 991px) { .kook-social-rail { display: none; } }
@media (max-width: 575px) {
  .kook-hero { min-height: 520px; }
  /* Clear of the home indicator / toolbar on notched phones too. */
  .kook-hero__inner { bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px)); }
  .kook-hero__actions { margin-top: 28px; gap: 12px; }
}


/* ------------------------------------------------------------- company ---- */

.kook-company { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.kook-company__media { position: relative; min-height: 380px; overflow: hidden; }
.kook-company__text { display: flex; flex-direction: column; justify-content: center; padding: 80px 72px; background: var(--kook-paper); }
.kook-company__text .kook-h2 { margin-bottom: 28px; max-width: 14ch; }
.kook-company__text .kook-body-text { max-width: 44ch; margin-bottom: 32px; }
@media (max-width: 991px) {
  .kook-company { grid-template-columns: 1fr; }
  .kook-company__text { padding: var(--kook-section) var(--kook-edge); }
}


/* ------------------------------------------------------------ services ---- */

.kook-services { padding: var(--kook-section) var(--kook-edge); background: var(--kook-ink); color: var(--kook-paper); }
.kook-services__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 72px; }
.kook-services__head .kook-eyebrow { color: var(--kook-gold); }
.kook-services__head .kook-h2 { max-width: 18ch; }
.kook-services__row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid rgba(246,244,241,0.16);
  transition: background-color 0.25s ease;
}
.kook-services__num { font-family: var(--kook-cond); font-size: 24px; color: var(--kook-gold); }
.kook-services__name { font-size: 20px; font-weight: 500; }
.kook-services__desc { max-width: 56ch; font-size: 15px; line-height: 1.7; color: var(--kook-on-dark); }
a.kook-services__row:hover { color: inherit; background: rgba(246,244,241,0.04); }
a.kook-services__row:hover .kook-services__name { color: var(--kook-gold); }
@media (max-width: 767px) {
  .kook-services__row { grid-template-columns: 48px 1fr; gap: 12px 20px; }
  .kook-services__desc { grid-column: 2; }
}


/* ------------------------------------------------------------ projects ---- */

.kook-projects { padding: var(--kook-section) var(--kook-edge); }
.kook-projects__head { margin-bottom: 64px; }
.kook-projects__head .kook-h2 { max-width: 20ch; }
.kook-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.kook-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--kook-ink); }
.kook-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.6s ease, opacity 0.3s ease; }
.kook-card:hover img { transform: scale(1.04); opacity: 1; }
.kook-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.85) 100%); }
.kook-card__body { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; color: #fff; }
.kook-card__tag { margin-bottom: 8px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kook-pale); }
.kook-card__title { font-family: var(--kook-cond); font-size: 28px; line-height: 1.1; }
.kook-card:hover .kook-card__title { color: #fff; }
.kook-projects__footer { margin-top: 48px; }
@media (max-width: 991px) { .kook-projects__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 575px) { .kook-projects__grid { grid-template-columns: 1fr; } }


/* ------------------------------------------------------------ partners ---- */

.kook-partners {
  padding: 96px var(--kook-edge);
  background: var(--kook-paper-warm);
  border-top: 1px solid rgba(22,21,19,0.1);
  border-bottom: 1px solid rgba(22,21,19,0.1);
}
.kook-partners__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.kook-partners__inner .kook-h2 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 20px; max-width: 16ch; }
.kook-partners__inner .kook-body-text { max-width: 46ch; font-size: 15px; line-height: 1.7; }
.kook-partners__logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2px; }
.kook-partners__logo { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: #fff; min-height: 140px; }
.kook-partners__logo img { max-height: 100px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.25s ease, opacity 0.25s ease; }
.kook-partners__logo:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 991px) { .kook-partners__inner { grid-template-columns: 1fr; gap: 40px; } }


/* ------------------------------------------------------------ presence ---- */

.kook-presence { position: relative; padding: 110px var(--kook-edge); }
.kook-presence::after { content: ''; position: absolute; inset: 0; background: rgba(22,21,19,0.7); }
.kook-presence__inner { position: relative; z-index: 2; color: var(--kook-paper); }
.kook-presence__inner .kook-eyebrow { color: var(--kook-pale); }
.kook-presence__inner .kook-h2 { margin-bottom: 48px; max-width: 20ch; font-size: clamp(26px, 2.8vw, 42px); }
.kook-presence__list { display: flex; flex-wrap: wrap; gap: 48px; margin: 0; padding: 0; list-style: none; }
.kook-presence__list li { min-width: 100px; padding-bottom: 12px; border-bottom: 1px solid rgba(246,244,241,0.4); font-size: 20px; letter-spacing: 0.04em; }
@media (max-width: 575px) { .kook-presence__list { gap: 24px 32px; } }


/* ------------------------------------------------------------- contact ---- */

.kook-contact { padding: 140px var(--kook-edge); text-align: center; background: var(--kook-ink); color: var(--kook-paper); }
.kook-contact .kook-eyebrow { color: var(--kook-gold); }
.kook-contact__title { margin: 0 auto 36px; max-width: 20ch; font-family: var(--kook-cond); font-weight: 500; font-size: clamp(34px, 5vw, 72px); line-height: 1.05; }
.kook-contact__lead { max-width: 52ch; margin: 0 auto 44px; font-size: 16px; line-height: 1.7; color: var(--kook-on-dark); }
.kook-contact__form { max-width: 760px; margin: 0 auto; text-align: left; }

/* Contact Form 7 output, restyled to the design's underline fields.
   CF7 wraps every control in an INLINE <span class="wpcf7-form-control-wrap">,
   so it must be made a block or the width:100% inputs collapse to nothing. */
.kook-contact__form .wpcf7-form-control-wrap { display: block; }
.kook-contact__form .kook-field { display: flex; flex-direction: column; gap: 8px; }
.kook-contact__form label { display: flex; flex-direction: column; gap: 8px; }

/* Only the caption is uppercased. Putting it on the label would inherit into
   the control and shout the placeholder text too. */
.kook-contact__form .kook-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kook-on-dark);
}

/* Fallback spacing for a form that does not use .kook-grid. */
.kook-contact__form .wpcf7-form > p { display: flex; flex-direction: column; gap: 8px; margin: 0 0 32px; }

.kook-contact__form input[type="text"],
.kook-contact__form input[type="email"],
.kook-contact__form input[type="tel"],
.kook-contact__form input[type="url"],
.kook-contact__form select,
.kook-contact__form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(246,244,241,0.35);
  border-radius: 0;
  color: var(--kook-paper);
  font-family: var(--kook-sans);
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.kook-contact__form input:focus,
.kook-contact__form select:focus,
.kook-contact__form textarea:focus { border-bottom-color: var(--kook-gold); }
.kook-contact__form textarea { resize: vertical; min-height: 96px; }
.kook-contact__form ::placeholder { color: var(--kook-dim); opacity: 1; }

/* Autofill: Chrome forces its own near-white background on matched fields,
   which would break the transparent underline treatment. */
.kook-contact__form input:-webkit-autofill,
.kook-contact__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--kook-paper);
  -webkit-box-shadow: 0 0 0 1000px var(--kook-ink) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Consent checkbox. */
.kook-contact__form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.kook-contact__form .wpcf7-acceptance label {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kook-on-dark);
  cursor: pointer;
}
.kook-contact__form input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--kook-gold);
  cursor: pointer;
}
.kook-contact__form .wpcf7-list-item-label a { text-decoration: underline; }

.kook-contact__form input[type="submit"],
.kook-contact__form button[type="submit"] {
  display: block;
  margin: 12px auto 0;
  padding: 18px 40px;
  background: var(--kook-paper);
  color: var(--kook-ink);
  border: none;
  font-family: var(--kook-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.kook-contact__form input[type="submit"]:hover,
.kook-contact__form button[type="submit"]:hover { background: var(--kook-gold); color: var(--kook-paper); }
.kook-contact__form input[type="submit"]:disabled { opacity: 0.5; cursor: default; }

/* Per-field validation message. */
.kook-contact__form .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--kook-error);
}
.kook-contact__form .wpcf7-not-valid { border-bottom-color: var(--kook-error); }

/* Form-level status message. CF7 emits this box on every state, so it is only
   given borders once a state class lands on the wrapper. */
.kook-contact__form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 28px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--kook-on-dark);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: var(--kook-error); color: var(--kook-error); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--kook-gold); color: var(--kook-gold); }

.kook-contact__form .wpcf7-spinner { margin: 16px auto 0; display: block; }

/* Two-up field rows when the CF7 template opts in with .kook-grid. */
.kook-contact__form .kook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; }
.kook-contact__form .kook-grid--full { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .kook-contact { padding: var(--kook-section) var(--kook-edge); }
  .kook-contact__form .kook-grid { grid-template-columns: 1fr; }
}

.kook-contact__placeholder { max-width: 760px; margin: 0 auto; padding: 32px; border: 1px dashed rgba(246,244,241,0.35); color: var(--kook-on-dark); font-size: 14px; }


/* -------------------------------------------------------------- footer ---- */

.kook-footer { padding: 64px var(--kook-edge); background: var(--kook-ink-deep); color: var(--kook-muted); }
.kook-footer__cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.kook-footer__brand { padding: 8px 16px 8px 0; display: inline-flex; align-items: center; margin-bottom: 16px; }
.kook-footer__brand img { display: block; height: 42px; width: auto; object-fit: contain; }
.kook-footer__tagline { max-width: 32ch; margin: 0; font-size: 13px; line-height: 1.7; color: var(--kook-dim); }
.kook-footer__title { margin-bottom: 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kook-paper); }
.kook-footer__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.kook-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(140,136,127,0.25); }
.kook-footer__copy { font-size: 12px; color: var(--kook-dim); }
.kook-footer__social { display: flex; gap: 14px; }
.kook-footer__social a { width: 30px; height: 30px; border: 1px solid rgba(140,136,127,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kook-muted); }
.kook-footer__social a:hover { color: var(--kook-paper); border-color: var(--kook-paper); }
.kook-footer__social svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 991px) { .kook-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 575px) { .kook-footer__cols { grid-template-columns: 1fr; } }


/* ------------------------------------------------------------- project ---- */

/* Hero: 70vh, not the home page's full 100vh — the title is the subject here. */
.kook-project-hero { position: relative; height: 70vh; min-height: 520px; width: 100%; }
.kook-project-hero__media { position: absolute; inset: 0; }
.kook-project-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.05) 40%, rgba(10,10,10,0.82) 100%);
}
.kook-project-hero__inner {
  position: absolute;
  left: var(--kook-edge);
  right: var(--kook-edge);
  bottom: 64px;
  color: #fff;
}
.kook-project-hero__back {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kook-pale);
}
.kook-project-hero__back .kook-arrow,
.kook-textlink .kook-arrow--back { display: inline-block; transition: transform 0.25s ease; }
.kook-project-hero__back:hover .kook-arrow,
.kook-textlink:hover .kook-arrow--back { transform: translateX(-4px); }
.kook-project-hero__kicker {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kook-pale);
}
.kook-project-hero__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 1;
}

/* Details list (1fr) beside the overview (2fr). */
.kook-project-detail {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  padding: 100px var(--kook-edge);
}
.kook-project-detail__aside { position: sticky; top: calc(var(--kook-nav-h) + 32px); align-self: start; }
.admin-bar .kook-project-detail__aside { top: calc(var(--kook-nav-h) + 64px); }
.kook-project-detail__eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kook-muted);
}
.kook-project-spec { margin: 0; }
.kook-project-spec__row { padding: 16px 0; border-top: 1px solid rgba(22,21,19,0.12); }
.kook-project-spec dt {
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kook-muted);
}
.kook-project-spec dd { margin: 0; font-size: 16px; line-height: 1.5; }

.kook-project-detail__heading {
  margin: 0 0 28px;
  max-width: 28ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.15;
}
.kook-project-detail__text { font-size: 16px; line-height: 1.8; color: var(--kook-body); max-width: 42em; }
.kook-project-detail__text p { margin: 0 0 20px; }
/* The opening paragraph reads as a lead: larger and in ink, which gives the
   column the visual weight it lacked at 16px grey across a 900px measure. */
.kook-project-detail__text > p:first-child {
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--kook-ink);
  margin-bottom: 24px;
}
.kook-project-detail__text p:last-child { margin-bottom: 0; }
.kook-project-detail__text h2,
.kook-project-detail__text h3 { font-family: var(--kook-cond); font-weight: 500; line-height: 1.15; margin: 40px 0 14px; color: var(--kook-ink); }
.kook-project-detail__text h2 { font-size: clamp(24px, 2.2vw, 32px); }
.kook-project-detail__text h3 { font-size: clamp(20px, 1.8vw, 25px); }
.kook-project-detail__text ul,
.kook-project-detail__text ol { margin: 0 0 20px; padding-left: 1.25em; }
.kook-project-detail__text li { margin-bottom: 8px; }
.kook-project-detail__text img { height: auto; margin: 28px 0; }
.kook-project-detail__text a { border-bottom: 1px solid currentColor; }

/* Gallery: fixed-height rows so tiles align regardless of source ratio. */
.kook-project-gallery { padding: 0 var(--kook-edge) 120px; }
.kook-project-gallery__eyebrow {
  margin: 0 0 32px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kook-muted);
}
.kook-project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 20px;
}
.kook-project-gallery__item { position: relative; overflow: hidden; }
.kook-project-gallery__item.is-wide { grid-column: span 2; }
.kook-project-gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.kook-project-gallery__item:hover img { transform: scale(1.03); }
a.kook-project-gallery__item { display: block; cursor: zoom-in; }
.kook-project-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22,21,19,0);
  transition: background-color 0.3s ease;
}
.kook-project-gallery__item:hover::after,
.kook-project-gallery__item:focus-visible::after { background: rgba(22,21,19,0.18); }
.kook-project-gallery__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  background: rgba(22,21,19,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.kook-project-gallery__zoom svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.5; }
.kook-project-gallery__item:hover .kook-project-gallery__zoom,
.kook-project-gallery__item:focus-visible .kook-project-gallery__zoom { opacity: 1; transform: none; }
/* No hover on touch screens, so keep the badge visible as the affordance. */
@media (hover: none) { .kook-project-gallery__zoom { opacity: 1; transform: none; } }

/* Closing bar. The rule runs edge to edge, as in the design. */
.kook-project-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 48px var(--kook-edge) 120px;
  border-top: 1px solid rgba(22,21,19,0.12);
}
.kook-site a.kook-btn--dark { background: var(--kook-ink); color: var(--kook-paper); }
.kook-site a.kook-btn--dark:hover { background: var(--kook-gold); color: var(--kook-paper); }

/* Wide screens: with content up to 1800px the overview column outgrows a
   readable text measure, so the heading and the text sit side by side
   instead of stacked -- details | heading | text on one line. */
@media (min-width: 1600px) {
  .kook-project-detail__main {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 56px;
    align-items: start;
    /* The column stretches to the details list's height; without this the
       grid shares that extra height between its rows and the eyebrow row
       balloons, pushing the heading and text down. */
    align-content: start;
  }
  .kook-project-detail__main > .kook-eyebrow { grid-column: 1; grid-row: 1; }
  .kook-project-detail__heading { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .kook-project-detail__text { grid-column: 2; grid-row: 2; max-width: none; }
}
@media (max-width: 991px) {
  .kook-project-detail { grid-template-columns: 1fr; gap: 40px; padding: 72px var(--kook-edge); }
  .kook-project-detail__aside { position: static; }
  .kook-project-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .kook-project-gallery__item.is-wide { grid-column: span 2; }
}
@media (max-width: 575px) {
  .kook-project-hero { min-height: 440px; }
  .kook-project-hero__inner { bottom: 40px; }
  .kook-project-gallery { padding-bottom: 80px; }
  .kook-project-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .kook-project-gallery__item.is-wide { grid-column: span 1; }
  .kook-project-cta { padding-bottom: 80px; }
  .kook-project-cta .kook-btn { width: 100%; text-align: center; }
}


/* --------------------------------------------------------------- about ---- */

/* Page hero: 64vh with an eyebrow and headline. Shared by content pages.
   A minimum height rather than a fixed one, with the text in normal flow and
   pinned to the bottom: on a short laptop screen a long headline makes the
   hero grow instead of sliding up under the nav. padding-top clears the nav. */
.kook-page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(64vh, 460px);
  width: 100%;
  padding: 112px var(--kook-edge) 64px;
  background: var(--kook-ink);
}
.admin-bar .kook-page-hero { padding-top: 144px; }
.kook-page-hero__media { position: absolute; inset: 0; }
.kook-page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.1) 40%, rgba(10,10,10,0.8) 100%);
}
.kook-page-hero__inner { position: relative; z-index: 1; color: #fff; }
.kook-page-hero__eyebrow { margin: 0 0 18px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kook-pale); }
.kook-page-hero__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 1;
}

/* Who we are: text left, image bleeding off the right edge. The columns stay
   an even 50/50; the text's left inset grows with the screen so it lines up
   with every other section once content hits the 1800px cap. 72px matches
   the design at 1440. cqw is measured against this section (a size
   container), so unlike vw it ignores the scrollbar. */
.kook-about-intro {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
.kook-about-intro__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
  padding-left: max(72px, calc((100cqw - var(--kook-max)) / 2));
}
.kook-about-intro__heading {
  margin: 0 0 28px;
  max-width: 16ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(30px, 2.8vw, 44px);
  line-height: 1.1;
}
.kook-about-intro .kook-body-text { max-width: 46ch; }
.kook-about-intro__media { position: relative; min-height: 360px; overflow: hidden; }

/* Key figures on the dark band. */
.kook-about-figures { padding: 96px var(--kook-edge); background: var(--kook-ink); color: var(--kook-paper); }
.kook-about-figures__grid {
  display: grid;
  grid-template-columns: repeat(var(--kook-cols, 4), minmax(0, 1fr));
  gap: 32px;
  margin: 0;
}
.kook-about-figures__item { padding-top: 24px; border-top: 1px solid rgba(246,244,241,0.2); }
.kook-about-figures__value {
  font-family: var(--kook-cond);
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  color: var(--kook-gold);
  font-weight: 300;
}
.kook-about-figures__label { margin: 12px 0 0; font-size: 14px; letter-spacing: 0.06em; color: var(--kook-on-dark); }

/* How we work. */
.kook-about-values { padding: 120px var(--kook-edge); }
.kook-about-values__head { margin-bottom: 64px; }
.kook-about-values__heading {
  margin: 0;
  max-width: 20ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.1;
}
.kook-about-values__grid {
  display: grid;
  grid-template-columns: repeat(var(--kook-cols, 3), minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kook-about-values__num { margin-bottom: 16px; font-family: var(--kook-cond); font-size: 22px; color: var(--kook-gold); }
.kook-about-values__title { margin: 0 0 12px; font-family: var(--kook-sans); font-size: 20px; font-weight: 500; line-height: 1.3; }
.kook-about-values__desc { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.7; color: var(--kook-body); }

/* Team panel. */
.kook-about-team { padding: 0 var(--kook-edge) 120px; }
.kook-about-team__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 64px;
  background: var(--kook-paper-warm);
}
.kook-about-team__panel.is-text-only { grid-template-columns: 1fr; }
.kook-about-team__heading {
  margin: 0 0 20px;
  max-width: 16ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
}
.kook-about-team .kook-body-text { max-width: 46ch; font-size: 15px; line-height: 1.7; }
.kook-about-team__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }

/* Closing call-to-action band (About, Services). */
.kook-cta-band { padding: 120px var(--kook-edge); text-align: center; background: var(--kook-ink); color: var(--kook-paper); }
.kook-cta-band .kook-eyebrow { margin-bottom: 24px; color: var(--kook-gold); }
/* Light tone (Services). */
.kook-cta-band--light { background: var(--kook-paper); color: var(--kook-ink); }
.kook-cta-band__heading {
  margin: 0 auto 36px;
  max-width: 20ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05;
}

@media (max-width: 991px) {
  .kook-about-intro { grid-template-columns: 1fr; }
  .kook-about-intro__text { padding: var(--kook-section) var(--kook-edge); }
  .kook-about-figures { padding: 72px var(--kook-edge); }
  .kook-about-figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .kook-about-values { padding: var(--kook-section) var(--kook-edge); }
  .kook-about-values__head { margin-bottom: 48px; }
  .kook-about-team { padding-bottom: var(--kook-section); }
  .kook-about-team__panel { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
  .kook-cta-band { padding: var(--kook-section) var(--kook-edge); }
}
@media (max-width: 767px) {
  .kook-about-values__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 575px) {
  .kook-page-hero { min-height: max(64vh, 400px); padding-top: 104px; padding-bottom: 40px; }
  .kook-about-team__panel { padding: 28px; }
}


/* ------------------------------------------------------------ services ---- */

/* Shorter hero variant (Services): 56vh, headline capped at 76px. */
.kook-page-hero--short { min-height: max(56vh, 420px); padding-bottom: 60px; }
.kook-page-hero--short .kook-page-hero__media::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.1) 40%, rgba(10,10,10,0.8) 100%);
}
.kook-page-hero--short .kook-page-hero__title { font-size: clamp(38px, 5.6vw, 76px); }

.kook-svc-intro { padding: 100px var(--kook-edge) 40px; }
.kook-svc-intro .kook-body-text { max-width: 64ch; font-size: 17px; line-height: 1.8; }

/* Alternating rows. Image left by default; .is-reversed swaps the sides.
   When the text is on the left its inset tracks the content edge, the same
   technique as the About intro. */
.kook-svc-row {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.kook-svc-row__media { position: relative; overflow: hidden; }
.kook-svc-row__text { display: flex; flex-direction: column; justify-content: center; padding: 72px; }
.kook-svc-row.is-reversed .kook-svc-row__media { order: 2; }
.kook-svc-row.is-reversed .kook-svc-row__text,
.kook-svc-row.is-text-only .kook-svc-row__text { padding-left: max(72px, calc((100cqw - var(--kook-max)) / 2)); }
.kook-svc-row.is-text-only { grid-template-columns: 1fr; min-height: 0; }

.kook-svc-row__num { margin-bottom: 16px; font-family: var(--kook-cond); font-size: 20px; color: var(--kook-gold); }
.kook-svc-row__title {
  margin: 0 0 22px;
  max-width: 14ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.1;
}
.kook-svc-row__desc { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.75; color: var(--kook-body); }
.kook-svc-row__link { margin-top: 28px; }

@media (max-width: 991px) {
  .kook-svc-intro { padding: 72px var(--kook-edge) 32px; }
  /* Stacked: image always on top, whichever side it sat on at desktop. */
  .kook-svc-row { grid-template-columns: 1fr; min-height: 0; }
  .kook-svc-row__media { min-height: 320px; }
  .kook-svc-row.is-reversed .kook-svc-row__media { order: 0; }
  .kook-svc-row__text,
  .kook-svc-row.is-reversed .kook-svc-row__text,
  .kook-svc-row.is-text-only .kook-svc-row__text { padding: 48px var(--kook-edge) 64px; }
}
@media (max-width: 575px) {
  .kook-page-hero--short { min-height: max(56vh, 380px); padding-bottom: 40px; }
  .kook-svc-row__media { min-height: 260px; }
}


/* ------------------------------------------------- project categories ---- */

/* Compact hero variant (project categories): 52vh, headline capped at 72px. */
.kook-page-hero--compact { min-height: max(52vh, 400px); padding-bottom: 56px; }
.kook-page-hero--compact .kook-page-hero__media::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.1) 40%, rgba(10,10,10,0.8) 100%);
}
.kook-page-hero--compact .kook-page-hero__title { max-width: 20ch; font-size: clamp(38px, 5.6vw, 72px); }

/* Filters: outlined buttons, the current category filled in ink. They are
   links, so anchor-qualified to beat `.kook-site a { color: inherit }`. */
.kook-filters { display: flex; flex-direction: column; gap: 12px; padding: 64px var(--kook-edge) 0; }
.kook-filters__row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kook-site a.kook-filter {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--kook-ink);
  background: transparent;
  color: var(--kook-ink);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kook-site a.kook-filter:hover { border-color: var(--kook-gold); color: var(--kook-gold); }
.kook-site a.kook-filter.is-active,
.kook-site a.kook-filter.is-active:hover { background: var(--kook-ink); border-color: var(--kook-ink); color: var(--kook-paper); }
/* Sub-category rows: the same buttons, a step smaller, so the hierarchy reads. */
.kook-filters__row.is-sub { gap: 8px; }
.kook-filters__row.is-sub .kook-filter { padding: 7px 16px; font-size: 12px; }
.kook-site .kook-filters__row.is-sub a.kook-filter:not(.is-active) { border-color: rgba(22,21,19,0.35); }

.kook-archive { padding: 48px var(--kook-edge) 120px; }

/* Projects page while the next set of projects loads: dim the grid and block
   clicks on it, but keep the filters usable so a new choice can cut in. */
.kook-projects-browser { scroll-margin-top: 24px; }
.kook-projects-browser .kook-archive { transition: opacity 0.2s ease; }
.kook-projects-browser.is-loading .kook-archive { opacity: 0.35; pointer-events: none; }
.kook-projects-browser .kook-archive__grid:focus { outline: none; }
.kook-archive__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.kook-archive__empty { margin: 0; padding: 48px 0; font-size: 16px; color: var(--kook-body); }

/* Project card: the home category card with the design's archive values. */
.kook-card--project img { opacity: 0.88; }
.kook-card--project::after { background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.88) 100%); }
.kook-card--project .kook-card__body { left: 26px; right: 26px; bottom: 26px; }
.kook-card--project .kook-card__tag { font-size: 12px; }
.kook-card--project .kook-card__title { margin: 0; font-weight: 400; font-size: 26px; }

/* "Show more": an outlined ink button, centred under the grid. */
.kook-archive__more { display: flex; justify-content: center; margin-top: 56px; }
.kook-site a.kook-btn--outline {
  padding: 18px 40px;
  border-color: var(--kook-ink);
  color: var(--kook-ink);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.kook-site a.kook-btn--outline:hover { background: var(--kook-ink); color: var(--kook-paper); }
/* While the next batch loads: dimmed, not clickable, with a sweeping bar. */
.kook-site a.kook-btn--outline.is-loading {
  position: relative;
  overflow: hidden;
  opacity: 0.6;
  pointer-events: none;
}
.kook-site a.kook-btn--outline.is-loading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 40%;
  background: var(--kook-gold);
  animation: kook-more-loading 1s ease-in-out infinite;
}
@keyframes kook-more-loading {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.kook-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 991px) {
  .kook-filters { padding-top: 48px; }
  .kook-archive { padding: 40px var(--kook-edge) var(--kook-section); }
  .kook-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 575px) {
  .kook-page-hero--compact { min-height: max(52vh, 360px); padding-bottom: 40px; }
  .kook-archive__grid { grid-template-columns: 1fr; }
  .kook-site a.kook-filter { padding: 9px 16px; font-size: 12px; }
}


/* ------------------------------------------------------------- contact ---- */

/* Slim hero variant (Contact): 48vh, headline capped at 72px. */
.kook-page-hero--slim { min-height: max(48vh, 360px); padding-bottom: 56px; }
.kook-page-hero--slim .kook-page-hero__media::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.15) 40%, rgba(10,10,10,0.82) 100%);
}
.kook-page-hero--slim .kook-page-hero__title { font-size: clamp(38px, 5.6vw, 72px); }

/* Details (dark, left) beside the form (light, right). The outer insets
   follow the content edge on wide screens, like the About intro; cqw is
   measured against this section. */
.kook-contact-split {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
}
.kook-contact-split__details {
  padding: 80px 56px;
  padding-left: max(56px, calc((100cqw - var(--kook-max)) / 2));
  background: var(--kook-ink);
  color: var(--kook-paper);
}
.kook-contact-split__details .kook-eyebrow { color: var(--kook-gold); }
.kook-contact-split__form {
  padding: 80px 72px;
  padding-right: max(72px, calc((100cqw - var(--kook-max)) / 2));
}
.kook-contact-split__heading {
  margin: 0 0 28px;
  max-width: 14ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.15;
}
.kook-contact-split__heading--wide { margin-bottom: 36px; max-width: 18ch; }
.kook-contact-split__intro { margin: 0 0 40px; max-width: 38ch; font-size: 15px; line-height: 1.7; color: var(--kook-on-dark); }
.kook-contact-split__list { display: flex; flex-direction: column; gap: 28px; margin: 0 0 48px; }
.kook-contact-split__list dt,
.kook-contact-split__label {
  margin: 0 0 6px;
  font-family: var(--kook-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kook-muted);
}
.kook-contact-split__label { margin-bottom: 16px; }
.kook-contact-split__list dd { margin: 0; font-size: 16px; line-height: 1.5; }
.kook-contact-split__offices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kook-contact-split__offices li {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(246,244,241,0.2);
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* Contact Form 7 on a light surface: the Home form's layout, recoloured.
   Labels use --kook-dim rather than the design's #8c887f, which only reaches
   3.2:1 on paper -- too faint for form labels. */
/* Left-aligned under its heading. The Home form is centred (max-width 760px,
   margin auto), which here would drift away from the heading on wide screens. */
.kook-contact__form.kook-form--light { max-width: 880px; margin: 0; }
.kook-contact__form.kook-form--light .kook-label { color: var(--kook-dim); }
.kook-contact__form.kook-form--light input[type="text"],
.kook-contact__form.kook-form--light input[type="email"],
.kook-contact__form.kook-form--light input[type="tel"],
.kook-contact__form.kook-form--light input[type="url"],
.kook-contact__form.kook-form--light select,
.kook-contact__form.kook-form--light textarea {
  color: var(--kook-ink);
  border-bottom-color: rgba(22,21,19,0.25);
}
.kook-contact__form.kook-form--light input:focus,
.kook-contact__form.kook-form--light select:focus,
.kook-contact__form.kook-form--light textarea:focus { border-bottom-color: var(--kook-gold); }
.kook-contact__form.kook-form--light ::placeholder { color: var(--kook-muted); }
.kook-contact__form.kook-form--light input:-webkit-autofill,
.kook-contact__form.kook-form--light input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--kook-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--kook-paper) inset;
}
.kook-contact__form.kook-form--light .wpcf7-acceptance label { color: var(--kook-body); }
/* Submit: ink, aligned with the fields rather than centred. */
.kook-contact__form.kook-form--light input[type="submit"],
.kook-contact__form.kook-form--light button[type="submit"] {
  margin: 12px 0 0;
  background: var(--kook-ink);
  color: var(--kook-paper);
}
.kook-contact__form.kook-form--light input[type="submit"]:hover,
.kook-contact__form.kook-form--light button[type="submit"]:hover { background: var(--kook-gold); color: var(--kook-paper); }
.kook-contact__form.kook-form--light .wpcf7-spinner { margin: 16px 0 0; }
.kook-contact__form.kook-form--light .wpcf7-not-valid-tip { color: var(--kook-error-dark); }
.kook-contact__form.kook-form--light .wpcf7-not-valid { border-bottom-color: var(--kook-error-dark); }
.kook-form--light .wpcf7-response-output { border-color: rgba(22,21,19,0.35); color: var(--kook-ink); }
.kook-form--light .wpcf7 form.invalid .wpcf7-response-output,
.kook-form--light .wpcf7 form.unaccepted .wpcf7-response-output,
.kook-form--light .wpcf7 form.payment-required .wpcf7-response-output { border-color: var(--kook-error-dark); color: var(--kook-error-dark); }
.kook-form--light .wpcf7 form.sent .wpcf7-response-output { border-color: var(--kook-gold); color: var(--kook-ink); }

.kook-contact__placeholder--light { margin: 0; border-color: rgba(22,21,19,0.3); color: var(--kook-body); }

@media (max-width: 991px) {
  .kook-contact-split { grid-template-columns: 1fr; }
  .kook-contact-split__details,
  .kook-contact-split__form { padding: var(--kook-section) var(--kook-edge); }
}
@media (max-width: 575px) {
  .kook-page-hero--slim { min-height: max(48vh, 320px); padding-bottom: 40px; }
  .kook-contact__form.kook-form--light input[type="submit"] { width: 100%; }
}


/* ------------------------------------------------ partners & service ---- */

/* Gold emphasis inside a large line ("…your project.", "Support."). */
.kook-highlight { color: var(--kook-gold); }

/* About: technology partners. */
.kook-about-partners { padding: 120px var(--kook-edge); border-top: 1px solid rgba(22,21,19,0.1); }
.kook-about-partners__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 72px;
}
.kook-about-partners__heading {
  margin: 0;
  max-width: 18ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.02;
  text-wrap: pretty;
}
.kook-about-partners__text { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.75; color: var(--kook-body); text-wrap: pretty; }

.kook-partner-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kook-partner-card { display: flex; flex-direction: column; background: #fff; }
.kook-partner-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  padding: 24px 40px;
  border-bottom: 1px solid rgba(22,21,19,0.08);
}
.kook-partner-card__logo img { max-width: 70%; max-height: 90px; width: auto; height: auto; object-fit: contain; }
.kook-partner-card__wordmark { font-weight: 600; font-size: 28px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.kook-partner-card__body { padding: 36px 40px 40px; }
.kook-partner-card__label { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kook-gold); }
.kook-partner-card__name { margin: 0 0 14px; font-family: var(--kook-cond); font-weight: 500; font-size: 28px; line-height: 1.1; }
.kook-partner-card__desc { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kook-body); text-wrap: pretty; }
.kook-partner-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.kook-partner-card__tags li { padding: 6px 12px; border: 1px solid rgba(22,21,19,0.2); font-size: 12px; letter-spacing: 0.06em; }

.kook-membership {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 28px;
  padding: 36px 40px;
  background: var(--kook-paper-warm);
}
.kook-membership__mark { font-family: var(--kook-cond); font-weight: 600; font-size: 40px; letter-spacing: 0.06em; line-height: 1; }
.kook-membership__mark img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
.kook-membership__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kook-body); text-wrap: pretty; }

.kook-about-partners__closing { margin-top: 120px; text-align: center; }
.kook-about-partners__closing-line {
  margin: 0 auto 18px;
  max-width: 20ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
}
.kook-about-partners__closing-text { margin: 0; font-size: 16px; color: var(--kook-body); }

/* Services: technical service. */
.kook-svc-tech { background: var(--kook-paper-warm); border-top: 1px solid rgba(22,21,19,0.1); }
.kook-svc-tech__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  padding: 120px var(--kook-edge) 0;
}
.kook-svc-tech__heading {
  margin: 0;
  max-width: 12ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.98;
}
.kook-svc-tech__lead { margin: 0 0 20px; max-width: 46ch; font-size: 17px; line-height: 1.75; color: var(--kook-body); text-wrap: pretty; }
/* --kook-dim rather than the design's #8c887f: that grey is 2.9:1 on this beige. */
.kook-svc-tech__note { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.7; color: var(--kook-dim); text-wrap: pretty; }
.kook-svc-tech__items {
  display: grid;
  grid-template-columns: repeat(var(--kook-cols, 4), minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 88px var(--kook-edge) 96px;
  list-style: none;
}
.kook-svc-tech__items > li { padding-top: 24px; border-top: 1px solid rgba(22,21,19,0.2); }
.kook-svc-tech__num { margin-bottom: 14px; font-family: var(--kook-cond); font-size: 20px; color: var(--kook-gold); }
.kook-svc-tech__title { margin: 0 0 12px; font-family: var(--kook-sans); font-size: 20px; font-weight: 500; line-height: 1.3; }
.kook-svc-tech__desc { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kook-body); text-wrap: pretty; }

.kook-svc-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 72px var(--kook-edge);
  background: var(--kook-ink);
  color: var(--kook-paper);
}
.kook-svc-band__heading {
  margin: 0;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: 0.01em;
}
.kook-svc-band__text { margin: 14px 0 0; font-size: 16px; color: var(--kook-on-dark); }

@media (max-width: 991px) {
  .kook-about-partners { padding: var(--kook-section) var(--kook-edge); }
  .kook-about-partners__head,
  .kook-svc-tech__head { grid-template-columns: 1fr; gap: 28px; }
  .kook-about-partners__head { margin-bottom: 48px; }
  .kook-partner-cards { grid-template-columns: 1fr; }
  .kook-about-partners__closing { margin-top: 80px; }
  .kook-svc-tech__head { padding-top: var(--kook-section); }
  .kook-svc-tech__items { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 56px var(--kook-edge) 72px; }
  .kook-svc-band { padding: 56px var(--kook-edge); }
}
@media (max-width: 575px) {
  .kook-membership { grid-template-columns: 1fr; gap: 16px; padding: 28px; }
  .kook-partner-card__body { padding: 28px; }
  .kook-svc-tech__items { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------- legal ---- */

.kook-legal-header {
  padding: 72px var(--kook-edge) 80px;
  border-top: 1px solid rgba(246,244,241,0.1);
  background: var(--kook-ink);
  color: var(--kook-paper);
}
.kook-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kook-muted);
}
.kook-breadcrumb li + li::before { content: '/'; margin-right: 10px; }
.kook-breadcrumb [aria-current] { color: var(--kook-on-dark); }
.kook-legal-header__title {
  margin: 0 0 28px;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.95;
}
.kook-legal-header__dates { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; font-size: 14px; color: var(--kook-on-dark); }
.kook-legal-header__dates div { display: flex; align-items: baseline; gap: 10px; }
.kook-legal-header__dates dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kook-muted); }
.kook-legal-header__dates dd { margin: 0; }

/* Body capped at 1240px, as in the design. */
.kook-legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 80px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 56px 140px;
}
.kook-legal__toc { position: sticky; top: calc(var(--kook-nav-h) + 32px); }
.admin-bar .kook-legal__toc { top: calc(var(--kook-nav-h) + 64px); }
.kook-legal__toc-label { margin: 0 0 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kook-muted); }
.kook-legal__toc ol { margin: 0; padding: 0; list-style: none; }
.kook-site .kook-legal__toc a {
  display: grid;
  grid-template-columns: 32px 1fr;
  padding: 11px 0;
  border-top: 1px solid rgba(22,21,19,0.1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--kook-body);
}
.kook-site .kook-legal__toc a:hover { color: var(--kook-ink); }
.kook-legal__num { font-family: var(--kook-cond); color: var(--kook-gold); }

.kook-legal__article { max-width: 720px; min-width: 0; }
.kook-legal__lead { margin: 0 0 64px; font-size: 19px; line-height: 1.7; color: var(--kook-ink); text-wrap: pretty; }
.kook-legal__section {
  margin-bottom: 24px;
  padding-top: 40px;
  border-top: 1px solid rgba(22,21,19,0.12);
  scroll-margin-top: 24px;
}
.kook-legal__section-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.kook-legal__section-head .kook-legal__num { font-size: 20px; }
.kook-legal__section-head h2 { margin: 0; font-family: var(--kook-cond); font-weight: 500; font-size: 30px; line-height: 1.1; }
.kook-legal__content { font-size: 16px; line-height: 1.8; color: var(--kook-body); }
.kook-legal__content p { margin: 0 0 16px; text-wrap: pretty; }
.kook-legal__content ul { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; padding: 0; list-style: none; }
.kook-legal__content ul li { display: grid; grid-template-columns: 20px 1fr; line-height: 1.7; }
.kook-legal__content ul li::before { content: '\2014'; color: var(--kook-gold); }
.kook-legal__content ol { margin: 8px 0 16px; padding-left: 1.4em; }
.kook-legal__content a { border-bottom: 1px solid currentColor; }
.kook-legal__content strong { font-weight: 600; color: var(--kook-ink); }

.kook-legal__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  padding: 36px 40px;
  background: var(--kook-paper-warm);
}
.kook-legal__contact-label { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kook-muted); }
.kook-legal__contact-email { font-size: 16px; }

@media (max-width: 991px) {
  .kook-legal { grid-template-columns: 1fr; gap: 48px; padding: 64px var(--kook-edge) 96px; }
  .kook-legal__toc { position: static; }
}
@media (max-width: 575px) {
  .kook-legal-header { padding: 48px var(--kook-edge) 56px; }
  .kook-legal__contact { padding: 28px; }
  .kook-legal__section-head h2 { font-size: 26px; }
}


/* ----------------------------------------------------------------- 404 ---- */

/* Full-screen dark panel, text pinned to the bottom like the page heroes. */
.kook-404 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(100vh, 620px);
  padding: 150px var(--kook-edge) 96px;
  overflow: hidden;
  background: var(--kook-ink);
  color: var(--kook-paper);
}
.admin-bar .kook-404 { min-height: max(calc(100vh - 32px), 620px); }
.kook-404__media { position: absolute; inset: 0; }
.kook-404__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,14,13,0.6) 0%, rgba(15,14,13,0.75) 50%, rgba(15,14,13,0.92) 100%);
}
.kook-404__inner { position: relative; z-index: 1; }
/* Giant gold figure, in the condensed face the site uses for numbers. */
.kook-404__code {
  margin: 0 0 28px;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(120px, 20vw, 300px);
  line-height: 0.8;
  letter-spacing: -0.01em;
  color: var(--kook-gold);
}
.kook-404__eyebrow { margin: 0 0 18px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kook-pale); }
.kook-404__heading {
  margin: 0 0 20px;
  max-width: 18ch;
  font-family: var(--kook-cond);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.05;
}
.kook-404__text { margin: 0 0 36px; max-width: 52ch; font-size: 16px; line-height: 1.7; color: var(--kook-on-dark); }
.kook-404__actions { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 575px) {
  .kook-404 { min-height: max(100vh, 560px); padding: 120px var(--kook-edge) 64px; }
  .kook-404__actions .kook-btn { flex: 1 1 100%; text-align: center; }
}


/* ------------------------------------------------------------ lightbox ---- */

.kook-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the WP admin bar (99999) */
  display: flex;
  flex-direction: column;
  background: rgba(15,14,13,0.97);
  color: var(--kook-paper);
  font-family: var(--kook-sans);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.kook-lightbox[hidden] { display: none; }
.kook-lightbox.is-open { opacity: 1; }

.kook-lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--kook-edge);
}
/* Counter in the same condensed gold as the home page service numbers. */
.kook-lightbox__count {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--kook-cond);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--kook-muted);
}
.kook-lightbox__current { color: var(--kook-gold); }
.kook-lightbox__sep { font-size: 16px; }

/* Buttons match the outline circles of the social links. */
.kook-lightbox__btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(246,244,241,0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--kook-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.kook-lightbox__btn:hover { border-color: var(--kook-gold); color: var(--kook-gold); }
.kook-lightbox__btn:focus-visible { outline: 2px solid var(--kook-gold); outline-offset: 3px; }
.kook-lightbox__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.kook-lightbox__stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "prev figure next";
  align-items: center;
  gap: 32px;
  padding: 0 var(--kook-edge) 40px;
}
.kook-lightbox__prev { grid-area: prev; }
.kook-lightbox__next { grid-area: next; }
.kook-lightbox__figure {
  grid-area: figure;
  margin: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kook-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.kook-lightbox.is-loading .kook-lightbox__img { opacity: 0; }
/* Caption in the eyebrow style used across the site. */
.kook-lightbox__caption {
  max-width: 60ch;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--kook-on-dark);
}
.kook-lightbox__caption[hidden] { display: none; }

.kook-lightbox.is-single .kook-lightbox__prev,
.kook-lightbox.is-single .kook-lightbox__next,
.kook-lightbox.is-single .kook-lightbox__count { visibility: hidden; }

/* Screen-reader-only position announcement. */
.kook-lightbox__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .kook-lightbox__bar { padding: 16px var(--kook-edge); }
  .kook-lightbox__stage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "figure figure" "prev next";
    gap: 20px 16px;
    padding-bottom: 24px;
  }
  .kook-lightbox__prev { justify-self: end; }
  .kook-lightbox__next { justify-self: start; }
  .kook-lightbox__img { max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
}


/* ------------------------------------------------------ back to top ---- */

/* Round button in the style of the social and lightbox controls. Hidden until
   kook.js shows it; lifted above the footer's bottom row at the page end so it
   never covers the social links (the offset comes in as --kook-to-top-lift). */
.kook-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 15;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246,244,241,0.28);
  border-radius: 50%;
  background: rgba(22,21,19,0.9);
  color: var(--kook-paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(12px - var(--kook-to-top-lift, 0px)));
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, border-color 0.2s ease, color 0.2s ease;
}
.kook-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(calc(0px - var(--kook-to-top-lift, 0px)));
  transition-delay: 0s;
  color: #aaa;
}
.kook-site a.kook-to-top:hover,
.kook-site a.kook-to-top:focus-visible { border-color: var(--kook-gold); color: var(--kook-gold); }
.kook-to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 575px) { .kook-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }


/* ------------------------------------------------- scroll animations ---- */

/* kook.js adds these only to content that starts below the first screen, so
   nothing already on screen flickers; with JavaScript off, or with reduced
   motion requested, nothing is hidden at all. The classes are removed once
   an element has arrived, restoring its own hover transitions. */
.kook-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--kook-reveal-delay, 0ms);
}
.kook-reveal.is-revealed { opacity: 1; transform: none; }
/* Split-section photos settle in from a slight zoom inside their frame. */
.kook-reveal-zoom {
  transform: scale(1.08);
  transition: transform 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.kook-reveal-zoom.is-revealed { transform: none; }

/* Home hero: a short rise on page load. */
@keyframes kook-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}
.kook-hero__inner > * { animation: kook-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.kook-hero__inner > :nth-child(2) { animation-delay: 0.08s; }
.kook-hero__inner > :nth-child(3) { animation-delay: 0.16s; }


/* ------------------------------------------------------- admin / motion ---- */

.admin-bar .kook-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .kook-nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .kook-nav.is-scrolled { top: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kook-site *,
  .kook-site *::before,
  .kook-site *::after { transition: none !important; animation: none !important; }
}