/* ==========================================================================
   KIWARO - Sketch to Space
   Design system recreated from the approved Revised Homepage Design.
   ========================================================================== */

/* ---------- Tokens ----------
   Exact values from the Kiwaro brand book (Visual Language, pp. 22-24).
   Primary: 242 237 231 / 148 150 113 / 93 42 32 / white.
   Supporting + extended rows supply the tints and shades. */
:root {
  --paper: #F2EDE7;
  --paper-deep: #E8E1D9;
  --white: #FFFFFF;
  --cream: #FFFFFF;

  --brown-900: #381E1A;
  --brown-800: #5D2A20;
  --brown-700: #76503E;
  --ink: #391C17;
  --body: #634234;
  --body-soft: #A07D70;

  --accent: #8D634C;
  --accent-hover: #76503E;
  --tan: #C3AC9B;
  --tan-soft: #DBCEBF;
  --blush: #E9E1D2;

  --olive: #949671;
  --olive-deep: #6E6950;
  --olive-light: #B5B484;

  --hairline: rgba(93, 42, 32, 0.16);
  --hairline-soft: rgba(93, 42, 32, 0.09);

  --serif: "Playfair Display", "Georgia", serif;
  --sans: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Jaali tile: the brand-pattern shape (a square pinched at each edge midpoint) */
  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='M14 4 C26 4 38 7 50 7 C62 7 74 4 86 4 C92 4 96 8 96 14 C96 26 93 38 93 50 C93 62 96 74 96 86 C96 92 92 96 86 96 C74 96 62 93 50 93 C38 93 26 96 14 96 C8 96 4 92 4 86 C4 74 7 62 7 50 C7 38 4 26 4 14 C4 8 8 4 14 4 Z'/%3E%3C/svg%3E");

  --r-lg: 32px;
  --r-md: 24px;
  --r-sm: 16px;

  --gutter: clamp(20px, 3.4vw, 64px);
  --section: clamp(64px, 7.5vw, 120px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swift: cubic-bezier(0.55, 0, 0.1, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background-color: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--tan); color: #fff; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.12; }
strong { color: var(--ink); font-weight: 700; }

/* ---------- Utilities ---------- */
.container { width: min(1792px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section-tight { padding-block: calc(var(--section) * 0.62); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  padding: 9px 16px 8px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.display-xl { font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -0.005em; }
.display-lg { font-size: clamp(23px, 2.3vw, 36px); letter-spacing: -0.01em; }
.display-md { font-size: clamp(20px, 1.9vw, 29px); }
.display-sm { font-size: clamp(18px, 1.6vw, 24px); }

.lede { font-size: clamp(17px, 1.35vw, 20px); max-width: 62ch; }
.measure { max-width: 58ch; }

.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  will-change: transform;
}
.btn .btn-label { position: relative; display: inline-block; overflow: hidden; }
.btn .btn-label > span { display: inline-block; transition: transform 0.32s var(--ease-swift); }
.btn .btn-label > span::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 100%;
}
.btn:hover .btn-label > span { transform: translateY(-100%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--brown-800); border-color: var(--accent); }
.btn-outline:hover { background: var(--accent); --btn-fg: #fff; color: #fff; }
.btn-light { --btn-bg: #fff; --btn-fg: var(--brown-800); }
.btn-light:hover { background: var(--blush); }
.btn-tan { --btn-bg: var(--tan); --btn-fg: var(--brown-900); }
.btn-tan:hover { background: var(--accent); --btn-fg: #fff; color: #fff; }
.btn-on-dark { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.55); }
.btn-on-dark:hover { background: #fff; --btn-fg: var(--brown-800); color: var(--brown-800); }

.arrow-btn {
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}
.arrow-btn svg { width: 20px; height: 20px; }
.arrow-btn:hover:not(:disabled) { background: var(--brown-800); border-color: var(--brown-800); color: #fff; }
.arrow-btn.solid { background: var(--brown-800); border-color: var(--brown-800); color: #fff; }
.arrow-btn.solid:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.arrow-btn:disabled { opacity: 0.35; cursor: default; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1.5px solid var(--tan-soft);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.text-link:hover { color: var(--brown-800); border-color: var(--brown-800); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: fixed;
  top: 20px; left: 0; right: 0;
  z-index: 100;
  transition: transform 0.55s var(--ease-swift), top .4s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 28px)); }
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--brown-800);
  border-radius: 26px;
  padding: 14px 18px 14px 34px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 44px -18px rgba(56, 30, 26, 0.5);
  transition: background .3s, box-shadow .3s, padding .3s var(--ease-out);
}
/* elevated once the page is scrolled: tighter, deeper, unmistakably present */
.site-header.is-scrolled .nav-bar {
  padding-top: 10px;
  padding-bottom: 10px;
  background: color-mix(in srgb, var(--brown-800) 96%, black);
  box-shadow: 0 2px 6px rgba(30, 14, 10, 0.28), 0 26px 60px -20px rgba(30, 14, 10, 0.6);
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 44px; width: auto; }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 38px); }
.nav-links a {
  position: relative;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 2px;
  transition: color 0.3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1.5px;
  background: var(--tan-soft);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-swift);
}
.nav-links a:hover, .nav-links a.is-active { color: #fff; }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { flex-shrink: 0; }
.nav-cta .btn { padding: 15px 30px; background: var(--tan); color: var(--brown-900); }
.nav-cta .btn:hover { background: var(--blush); color: var(--brown-800); }

/* burger */
.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  border: none; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease-swift), opacity .3s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--brown-900);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 132px var(--gutter) 48px;
  clip-path: inset(0 0 100% 0 round 0 0 40px 40px);
  visibility: hidden;
  transition: clip-path 0.65s var(--ease-swift), visibility 0s 0.65s;
}
.nav-open .mobile-menu { clip-path: inset(0 0 0% 0); visibility: visible; transition-delay: 0s; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu nav a {
  font-family: var(--serif);
  font-size: clamp(24px, 6vw, 34px);
  color: #fff;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.nav-open .mobile-menu nav a { opacity: 1; transform: none; }
.mobile-menu nav a:nth-child(1) { transition-delay: .18s; } .mobile-menu nav a:nth-child(2) { transition-delay: .24s; }
.mobile-menu nav a:nth-child(3) { transition-delay: .3s; } .mobile-menu nav a:nth-child(4) { transition-delay: .36s; }
.mobile-menu nav a:nth-child(5) { transition-delay: .42s; } .mobile-menu nav a:nth-child(6) { transition-delay: .48s; }
.mobile-menu nav a:nth-child(7) { transition-delay: .54s; }
.mobile-menu .menu-meta { margin-top: 34px; color: rgba(255,255,255,.6); font-size: 14px; opacity: 0; transition: opacity .5s .6s; }
.nav-open .mobile-menu .menu-meta { opacity: 1; }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
  padding: 108px 24px 0;
}
.hero-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(560px, 86vh, 900px);
  display: flex;
  align-items: flex-end;
}
.hero-media > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease 0.5s;
}
.hero-media.video-ready .hero-video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
/* layered scrim: clear at the top so the photo breathes, deepening into
   brand brown-black beneath the copy so text never merges with the image */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 12, 9, 0.28) 0%, rgba(23, 12, 9, 0) 20%),
    linear-gradient(180deg, rgba(23, 12, 9, 0) 36%, rgba(35, 18, 13, 0.45) 64%, rgba(23, 12, 9, 0.82) 100%);
  animation: pageIn 1.1s ease 0.25s both;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: end;
  gap: 40px;
  padding: clamp(28px, 5vw, 84px);
  padding-bottom: clamp(80px, 10vw, 120px);
}
.hero h1 {
  position: relative;
  color: #fff;
  font-size: clamp(27px, 2.9vw, 46px);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(23, 12, 9, 0.4);
  padding-bottom: 22px;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; will-change: transform; }
/* the brand rule assembles under the headline once the lines land */
.hero h1::after {
  content: "";
  position: absolute;
  left: 2px; bottom: 0;
  width: 64px; height: 3px;
  border-radius: 2px;
  background: var(--tan);
  transform-origin: left center;
  animation: drawBar 0.7s var(--ease-swift) 1.2s both;
}
.hero h1::before {
  content: "";
  position: absolute;
  left: 74px; bottom: -5px;
  width: 13px; height: 13px;
  background: var(--tan);
  -webkit-mask: var(--jaali) center / contain no-repeat;
  mask: var(--jaali) center / contain no-repeat;
  animation: pageIn 0.5s ease 1.75s both;
}
@keyframes drawBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-aside { color: rgba(255, 255, 255, 0.92); font-size: clamp(15px, 1.15vw, 18px); text-shadow: 0 1px 16px rgba(23, 12, 9, 0.45); }
.hero-aside p + p { margin-top: 14px; }

/* the hill bump + arrow */
.hero-scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 210px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.hero-scroll svg.hill { position: absolute; inset: auto 0 0; width: 100%; height: 100%; fill: var(--paper); }
.hero-scroll a {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  text-align: left;
}
.stat-value {
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 54px);
  color: var(--brown-800);
  line-height: 1;
}
.stat-value sup {
  font-size: 0.42em;
  vertical-align: super;
  margin-left: 2px;
}
.stat-label { margin-top: 16px; font-size: 15.5px; color: var(--body); }

/* Jaali divider: a rule with brand-pattern markers (brand book p9, p31).
   JS tags every .divider with data-reveal="draw"; the rule draws across,
   then the markers register one after another. */
.divider {
  position: relative;
  height: 1px;
  background: var(--hairline);
}
.divider::after {
  content: "";
  position: absolute;
  left: 50%; top: -6px;
  transform: translateX(-50%);
  width: 49px; height: 13px;
  background: var(--accent);
  -webkit-mask: var(--jaali) left center / 13px 13px no-repeat,
    var(--jaali) center center / 13px 13px no-repeat,
    var(--jaali) right center / 13px 13px no-repeat;
  mask: var(--jaali) left center / 13px 13px no-repeat,
    var(--jaali) center center / 13px 13px no-repeat,
    var(--jaali) right center / 13px 13px no-repeat;
}
.divider::before {
  content: "";
  position: absolute;
  left: 50%; top: -6px;
  transform: translateX(-50%);
  width: 74px; height: 13px;
  background: var(--paper);
}
.js .divider[data-reveal="draw"] { opacity: 1; }
.js .divider[data-reveal="draw"]::after,
.js .divider[data-reveal="draw"]::before { opacity: 0; transition: opacity .6s ease .55s; }
.js .divider[data-reveal="draw"].revealed::after,
.js .divider[data-reveal="draw"].revealed::before { opacity: 1; }

/* ==========================================================================
   Split sections (Who we are)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
.split.reverse > .split-media { order: 2; }

.split-media { position: relative; }
.stacked-frame { position: relative; padding: 0 0 44px 44px; }
.stacked-frame::before {
  content: "";
  position: absolute;
  left: 0; top: 44px; right: 88px; bottom: 0;
  background: var(--accent);
  border-radius: var(--r-lg);
}
.stacked-frame img {
  position: relative;
  border-radius: var(--r-lg);
  width: 100%;
  aspect-ratio: 0.92;
  object-fit: cover;
  box-shadow: 0 30px 60px -30px rgba(54, 29, 24, 0.4);
}

.icon-list { display: flex; flex-direction: column; gap: 20px; margin-top: 26px; }
.icon-list li { display: flex; align-items: center; gap: 18px; }
.icon-list a { display: flex; align-items: center; gap: 18px; transition: transform .35s var(--ease-out); }
.icon-list a:hover { transform: translateX(6px); }
.icon-list a:hover .icon-label { color: var(--brown-800); }
.icon-bubble {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.icon-bubble svg { width: 24px; height: 24px; }
.icon-label { font-size: 18px; font-weight: 700; color: var(--accent); transition: color .3s; }

/* ==========================================================================
   Olive band (catalogue CTA) - with side notches
   ========================================================================== */
.band {
  position: relative;
  background: var(--olive);
  border-radius: 44px;
  color: #fff;
  padding: clamp(52px, 6.5vw, 104px) clamp(28px, 6vw, 110px);
  overflow: hidden;
}
/* slab materiality: hairline top light + grounded shadow */
.band, .cta-banner {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 5px rgba(56, 30, 26, 0.12),
    0 32px 64px -32px rgba(56, 30, 26, 0.45);
}

/* side pinches sized to the jaali band fragments (brand book p32) */
.band::before, .band::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
}
.band::before { left: -28px; }
.band::after { right: -28px; }
.band h2 { color: #fff; }
.band .lede { color: rgba(255, 255, 255, 0.88); }

.band-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.subscribe { display: flex; flex-direction: column; gap: 16px; }
.subscribe input {
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  color: #fff;
  padding: 17px 22px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.subscribe input::placeholder { color: rgba(255, 255, 255, 0.75); }
.subscribe input:focus { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.subscribe .btn { width: 100%; border-radius: 14px; }

/* ==========================================================================
   Finish carousel
   ========================================================================== */
.carousel { position: relative; }
.carousel-track { perspective: 900px; }
.work-item { perspective: 900px; }
.carousel-track {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px;
  cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel-track.dragging .finish-card { pointer-events: none; }
.finish-card {
  flex: 0 0 clamp(240px, 21vw, 350px);
  scroll-snap-align: start;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 0.72;
  background: var(--paper-deep);
}
.finish-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.finish-card:hover img { transform: scale(1.05); }
.finish-card figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(54, 29, 24, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.finish-card:hover figcaption { opacity: 1; transform: none; }
.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* ==========================================================================
   Project CTA (Start your project)
   ========================================================================== */
.cta-project {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px) var(--gutter);
}
.cta-project > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-project::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(46, 28, 16, 0.28);
}
.quote-card {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  background: var(--cream);
  border-radius: 36px;
  padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4.5vw, 72px);
  text-align: left;
  box-shadow: 0 40px 90px -40px rgba(30, 15, 8, 0.6);
  -webkit-mask:
    radial-gradient(circle 30px at 50% 0, transparent 29px, #000 30px),
    radial-gradient(circle 30px at 50% 100%, transparent 29px, #000 30px),
    radial-gradient(circle 30px at 0 50%, transparent 29px, #000 30px),
    radial-gradient(circle 30px at 100% 50%, transparent 29px, #000 30px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 30px at 50% 0, transparent 29px, #000 30px),
    radial-gradient(circle 30px at 50% 100%, transparent 29px, #000 30px),
    radial-gradient(circle 30px at 0 50%, transparent 29px, #000 30px),
    radial-gradient(circle 30px at 100% 50%, transparent 29px, #000 30px);
  mask-composite: intersect;
}

.form-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 20px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--body-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(140, 98, 79, 0.12);
}
.field.error input { border-color: #B4472F; }
.field .msg { display: none; font-size: 13px; color: #B4472F; margin-top: 6px; text-align: left; }
.field.error .msg { display: block; }
.form-note { font-size: 13.5px; color: var(--body-soft); margin-top: 14px; }

.form-success {
  display: none;
  padding: 34px 10px 10px;
  text-align: center; /* success tick panel stays deliberately centered */
}
.form-success.show { display: block; }
.form-success .tick {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--olive);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   Portfolio strip (home) + grid (portfolio page)
   ========================================================================== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.section-head .actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 44px);
}
.work-item { position: relative; }
.work-item:nth-child(2) { margin-top: 88px; }
.work-item:nth-child(4) { margin-top: 88px; }
.work-num {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 12px;
  display: block;
}
.work-media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 0.78;
  background: var(--paper-deep);
}
.work-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.work-item:hover .work-media img { transform: scale(1.06); }
.work-title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--ink);
  margin-top: 18px;
}
.work-tag { font-size: 14.5px; color: var(--body-soft); margin-top: 4px; }

/* floating "view" cursor badge */
.cursor-badge {
  position: fixed;
  z-index: 60;
  top: 0; left: 0;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--brown-800);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 16px 40px -12px rgba(54,29,24,.45);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee {
  overflow: hidden;
  padding-block: clamp(30px, 3.5vw, 52px);
  border-block: 1px solid var(--hairline-soft);
}
.marquee-inner {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-inner { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group span {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 32px);
  letter-spacing: 0.04em;
  color: var(--brown-800);
  white-space: nowrap;
  padding-inline: 34px;
}
.marquee-group svg { width: 22px; height: 22px; color: var(--tan); flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Testimonials band
   ========================================================================== */
.testimonial-band { position: relative; }
.testimonial-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
}
.testimonial-stack { display: flex; flex-direction: column; gap: 22px; }
.t-card {
  position: relative;
  background: var(--cream);
  border-radius: 26px;
  padding: 26px 56px 26px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 24px 50px -30px rgba(40, 30, 10, 0.45);
  -webkit-mask: radial-gradient(circle 22px at 100% 62%, transparent 21px, #000 22px);
  mask: radial-gradient(circle 22px at 100% 62%, transparent 21px, #000 22px);
}
.t-card:nth-child(even) { transform: translateX(clamp(0px, 3vw, 56px)); }
.t-card img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.t-card .t-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.t-card .t-name { font-family: var(--serif); font-size:  18px; color: var(--ink); }
.t-card .t-role { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.t-card p { font-size: 15px; margin-top: 6px; }
.t-card .t-quote {
  position: absolute;
  top: 16px; right: 18px;
  color: var(--brown-800);
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--brown-900);
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--section);
  padding-top: clamp(40px, 5vw, 80px);
  border-radius: 44px 44px 0 0;
}
.footer-wordmark { padding: 0 clamp(16px, 3vw, 60px); }
.footer-wordmark img { width: 100%; border-radius: 18px; }
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.45fr;
  gap: clamp(28px, 3.5vw, 56px);
  padding-block: clamp(40px, 5vw, 72px);
}
.footer-cols h4 {
  color: #fff;
  font-size: clamp(17px, 1.3vw, 20px);
  margin-bottom: 20px;
}
.footer-cols ul { display: flex; flex-direction: column; gap: 12px; }
.footer-cols a { font-size: 15px; opacity: 0.82; transition: opacity 0.3s, color .3s; }
.footer-cols a:hover { opacity: 1; color: var(--tan-soft); }

.footer-contact li { display: flex; gap: 12px; font-size: 15px; align-items: flex-start; }
.footer-contact li + li { margin-top: 16px; }
.footer-contact svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; color: var(--tan-soft); }
.footer-contact a:hover { color: var(--tan-soft); }

.footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 30px 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  left: 50%; top: -1px;
  transform: translateX(-50%);
  width: 56px; height: 13px;
  background: var(--brown-900);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: none;
  border-radius: 0 0 56px 56px;
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.3s var(--ease-out);
}
.socials a:hover { background: var(--tan); border-color: var(--tan); color: #fff; transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }

/* ==========================================================================
   Inner page patterns
   ========================================================================== */
.page-hero {
  padding: clamp(136px, 15vw, 190px) 0 0;
}
.page-hero .eyebrow { margin-bottom: 18px; }
/* highlighted page header: accent rule with a jaali cap under the title */
.page-hero h1 {
  position: relative;
  padding-bottom: 24px;
}
.page-hero h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.page-hero h1::before {
  content: "";
  position: absolute;
  left: 72px; bottom: -5px;
  width: 13px; height: 13px;
  background: var(--tan);
  -webkit-mask: var(--jaali) center / contain no-repeat;
  mask: var(--jaali) center / contain no-repeat;
}
.page-hero .lede { font-size: clamp(16px, 1.25vw, 19px); }
.page-hero-media {
  margin-top: clamp(30px, 4vw, 52px);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-height: 560px;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* feature cards */
.card-grid { --cg: clamp(18px, 2vw, 32px); display: grid; gap: var(--cg); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* .center-last: card grids whose final row runs short center that row.
   Flex reproduces the exact 1fr track widths and gaps; full rows fill
   100% so justify-content is a no-op on them, and the count stays
   CMS-safe when a collection gains or loses a card. */
.card-grid.center-last { display: flex; flex-wrap: wrap; justify-content: center; }
.card-grid.center-last.cols-3 > * { flex: 0 1 calc((100% - 2 * var(--cg)) / 3); min-width: 0; }
.card-grid.center-last.cols-4 > * { flex: 0 1 calc((100% - 3 * var(--cg)) / 4); min-width: 0; }

.feature-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: clamp(24px, 2.4vw, 34px);
  box-shadow: 0 1px 2px rgba(56, 30, 26, 0.04), 0 10px 30px -24px rgba(56, 30, 26, 0.2);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 2px 4px rgba(56, 30, 26, 0.05), 0 24px 48px -24px rgba(56, 30, 26, 0.32);
}
.feature-card .num {
  position: absolute;
  top: 22px; right: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--tan);
  opacity: 0.9;
}
.feature-card h3 { font-size: clamp(17px, 1.4vw, 20px); margin-bottom: 10px; }
.feature-card p { font-size: 15px; }
.feature-card .icon-bubble { margin-bottom: 20px; }

/* minimal line icon chip on feature cards */
.f-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), border-color 0.22s;
}
.f-icon svg { width: 23px; height: 23px; }
.feature-card:hover .f-icon { background: var(--brown-800); border-color: var(--brown-800); color: #fff; }

.media-card {
  background: var(--cream);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(56, 30, 26, 0.04), 0 10px 30px -24px rgba(56, 30, 26, 0.2);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s;
}
.media-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 2px 4px rgba(56, 30, 26, 0.05), 0 24px 48px -24px rgba(56, 30, 26, 0.32);
}
.media-card .thumb { aspect-ratio: 1.25; overflow: hidden; background: var(--paper-deep); }
.media-card .thumb.tall { aspect-ratio: 0.85; }
.media-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.media-card:hover .thumb img { transform: scale(1.04); }
.media-card .body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.media-card h3 { font-size:  18px; margin-bottom: 5px; }
.media-card p { font-size: 14.5px; }
.media-card .spec { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.media-card .body > p:last-child { margin-bottom: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--brown-700);
  white-space: nowrap;
}
.chip.olive { background: rgba(148, 150, 113, .14); border-color: rgba(148, 150, 113, .4); color: var(--olive-deep); }
.chip .c-ic { display: inline-flex; margin-right: 7px; color: var(--accent); flex-shrink: 0; }
.chip .c-ic svg { width: 13px; height: 13px; }
.zone-pill .zone-ic { display: inline-flex; color: var(--olive-deep); flex-shrink: 0; }
.zone-pill .zone-ic svg { width: 15px; height: 15px; }

/* spec tables: highlighted brand header row, catalogue-style */
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--hairline-soft); }
.spec-table thead th {
  background: var(--brown-800);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: none;
  padding: 15px 18px;
}
.spec-table tbody th { font-weight: 800; color: var(--ink); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.spec-table td strong { color: var(--brown-800); }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:hover td { background: rgba(195, 172, 155, 0.1); }
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); background: var(--cream); box-shadow: 0 1px 2px rgba(56, 30, 26, 0.04), 0 14px 34px -24px rgba(56, 30, 26, 0.22); }

/* accordion (process / FAQ) */
.accordion { border-top: 1px solid var(--hairline); }
.acc-item { border-bottom: 1px solid var(--hairline); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.acc-head .acc-num {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--tan);
  min-width: 34px;
}
.acc-head h3 { flex: 1; font-size: clamp(17px, 1.5vw, 22px); transition: color .3s; }
.acc-head:hover h3 { color: var(--accent); }
.acc-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.45s var(--ease-swift), background .3s, color .3s;
}
.acc-icon svg { width: 16px; height: 16px; }
.acc-item.open .acc-icon { transform: rotate(45deg); background: var(--brown-800); border-color: var(--brown-800); color: #fff; }
.acc-body { overflow: hidden; height: 0; transition: height 0.55s var(--ease-swift); }
.acc-body-inner { padding: 2px 4px 30px 56px; max-width: 70ch; }
.acc-body-inner p + p { margin-top: 12px; }

/* colour swatches */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; }
.swatch {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  background: var(--cream);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.swatch:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -26px rgba(54,29,24,.4); }
.swatch .chipbox { height: 110px; position: relative; }
.swatch .chipbox .sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.34) 46%, rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity .4s;
}
.swatch:hover .chipbox .sheen { opacity: 1; }
.swatch .meta { padding: 12px 14px 14px; }
.swatch .meta strong { display: block; font-size: 14.5px; }
.swatch .meta span { font-size: 12px; color: var(--body-soft); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }

/* filter chips */
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-chip {
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline);
  background: transparent;
  font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--body);
  cursor: pointer;
  transition: all .3s var(--ease-out);
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--brown-800); border-color: var(--brown-800); color: #fff; }

/* blog */
.post-card { display: flex; flex-direction: column; }
.post-card .thumb { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1.45; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card .date { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--body-soft); }
.post-card h3 { font-size: clamp(18px, 1.5vw, 22px); margin-top: 8px; transition: color .3s; }
.post-card:hover h3 { color: var(--accent); }
.post-card p { margin-top: 8px; font-size: 15px; }

.prose { max-width: 72ch; }
.prose p + p { margin-top: 18px; }
.prose h2 { font-size: clamp(20px, 1.9vw, 26px); margin: 44px 0 16px; }
.prose ul { list-style: none; margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.prose ul li { padding-left: 26px; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute; left: 4px; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tan);
}
.prose blockquote {
  margin: 28px 0;
  padding: 22px 30px;
  border-left: 3px solid var(--tan);
  background: var(--cream);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--serif);
  font-size:  18px;
  color: var(--ink);
}

/* checklist */
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; }
.check-list svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--olive); margin-top: 2px; }

/* dark CTA banner (inner pages) */
.cta-banner {
  position: relative;
  background: var(--brown-800);
  border-radius: 44px;
  padding: clamp(52px, 7vw, 110px) clamp(28px, 6vw, 100px);
  text-align: left;
  color: #fff;
  overflow: hidden;
}
.cta-banner::before, .cta-banner::after {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
}
.cta-banner::before { left: -28px; }
.cta-banner::after { right: -28px; }
.cta-banner > *:not(.band-bg):not(.k-mark) { position: relative; z-index: 2; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255, 255, 255, 0.85); max-width: 56ch; margin: 18px 0 0; }
.cta-banner .actions { display: flex; justify-content: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

/* zone pills (kitchens 5-zone) */
.zone-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; }
.zone-pill {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream);
  border: 1px solid var(--hairline-soft);
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 800; letter-spacing: .06em; font-size: 14px; text-transform: uppercase; color: var(--brown-700);
}
.zone-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--olive); }
.zone-arrow { color: var(--tan); }

/* contact page */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 90px); align-items: start; }
.contact-panel {
  background: var(--brown-800);
  color: rgba(255,255,255,.86);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  position: sticky;
  top: 130px;
}
.contact-panel h3 { color: #fff; font-size:  20px; }
.contact-panel .footer-contact { margin-top: 26px; }
.contact-panel .footer-contact li { font-size: 15.5px; }
.contact-panel .socials { margin-top: 30px; }
.hours { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; font-size: 14.5px; }
.hours div { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; }

/* toast */
.toast {
  position: fixed;
  left: 50%; bottom: 30px;
  transform: translate(-50%, 220%);
  visibility: hidden;
  z-index: 200;
  background: var(--brown-900);
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
  transition: transform .55s var(--ease-swift), visibility 0s .55s;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

/* page transition veil (exit only - page entry is CSS-driven) */
.veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--brown-900);
  transform-origin: top;
  transform: scaleY(0);
  pointer-events: none;
}

/* ==========================================================================
   Brand motifs (from the Kiwaro brand book)
   ========================================================================== */

/* K logomark watermark: masked so it tints from currentColor (p25/p38 treatment) */
.k-mark {
  position: absolute;
  z-index: 1;
  right: clamp(-40px, -2vw, -16px);
  bottom: -9%;
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 425 / 430;
  background: currentColor;
  opacity: 0.08;
  -webkit-mask: url("../img/brand/logomark.png") center / contain no-repeat;
  mask: url("../img/brand/logomark.png") center / contain no-repeat;
  pointer-events: none;
}

/* photo background for bands / CTA banners (dark, warm, light-within overlay) */
.band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.band-bg img { width: 100%; height: 100%; object-fit: cover; }
.band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(56, 30, 26, 0.72) 0%, rgba(56, 30, 26, 0.88) 100%);
}
.band > *:not(.band-bg):not(.k-mark) { position: relative; z-index: 2; }

/* small jaali tile: marquee separators, list markers */
.jaali-dot {
  display: inline-block;
  width: 16px; height: 16px;
  flex-shrink: 0;
  background: var(--tan);
  -webkit-mask: var(--jaali) center / contain no-repeat;
  mask: var(--jaali) center / contain no-repeat;
}

/* colour library chips presented in the brand-book swatch shape */
.swatch .chipbox {
  height: 118px;
  margin: 12px 12px 0;
  -webkit-mask: var(--jaali) center / 100% 100% no-repeat;
  mask: var(--jaali) center / 100% 100% no-repeat;
}

/* the five execution failures Kiwaro exists to remove (brand book p6) */
.gap-list { display: flex; flex-direction: column; }
.gap-list li {
  display: flex; align-items: center; gap: 16px;
  padding: 17px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gap-list li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.gap-list .jaali-dot { width: 13px; height: 13px; background: var(--tan-soft); }

/* block label for statement cards (Vision / Mission): sits above the text
   instead of floating in the corner where long headings collide with it */
.card-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--tan);
  margin-bottom: 10px;
}

/* audience / philosophy lists: jaali-marked rows inside cards */
.aud-list { margin-top: 8px; display: flex; flex-direction: column; }
.aud-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.aud-list li:last-child { border-bottom: none; }
.aud-list .jaali-dot { width: 11px; height: 11px; margin-top: 7px; background: var(--accent); }

/* handle library (catalogue pp. 64-69) */
.handle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.handle-card {
  background: var(--cream);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  padding: 16px 14px 12px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(56, 30, 26, 0.04);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s;
}
.handle-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 2px 4px rgba(56, 30, 26, 0.05), 0 16px 32px -20px rgba(56, 30, 26, 0.3);
}
.handle-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.handle-card figcaption {
  margin-top: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brown-700);
}
.handle-card figcaption span {
  display: block;
  font-size: 10px; letter-spacing: .12em;
  color: var(--body-soft);
  margin-bottom: 2px;
}

/* imagery pillars (brand book pp. 28-29) */
.pillar figure { position: relative; border-radius: var(--r-sm); overflow: hidden; }
.pillar img { width: 100%; aspect-ratio: 0.82; object-fit: cover; transition: transform .8s var(--ease-out); }
.pillar:hover img { transform: scale(1.04); }
.pillar figcaption {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brown-700);
}
.pillar figcaption .jaali-dot { width: 12px; height: 12px; background: var(--accent); }
.pillar p { font-size: 14.5px; margin-top: 6px; }

/* ==========================================================================
   The Commitment rail: drawn -> engineered -> manufactured -> installed
   (brand book p9 timeline + p14 core statement). Scroll-driven assembly.
   ========================================================================== */
.commitment .display-md em { font-style: italic; color: var(--accent); }
.commit-rail { margin-top: clamp(52px, 6vw, 88px); position: relative; }
.commit-line {
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 1px;
  background: var(--hairline-soft);
}
.commit-line-fill {
  display: block;
  height: 100%;
  background: var(--brown-800);
  transform-origin: left center;
  transform: scaleX(0);
}
.no-anim .commit-line-fill { transform: none; }
.commit-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: commit;
}
.commit-step { position: relative; padding-top: 38px; }
.commit-mark {
  position: absolute;
  top: 0; left: 0;
  width: 17px; height: 17px;
  background: var(--brown-800);
  -webkit-mask: var(--jaali) center / contain no-repeat;
  mask: var(--jaali) center / contain no-repeat;
}
.commit-step h3 {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.commit-step p { font-size: 15px; margin-top: 10px; max-width: 30ch; }
.commit-close {
  margin-top: clamp(40px, 5vw, 64px);
  font-size: 1em; /* tracks body copy's size at every breakpoint, incl. 16px at <=720px */
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
}
.commit-close strong { color: var(--brown-800); font-weight: 700; white-space: nowrap; }

/* Proof chips: full-width ticker across the commitment section.
   Static wrapped row by default (no JS / reduced motion / no
   IntersectionObserver); main.js adds .is-anim, clones the group and
   drives the centre-focus opacity. */
.proof-marquee { margin-top: clamp(28px, 3.4vw, 44px); }
.proof-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: flex-start;
}
.proof-marquee.is-anim {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.proof-marquee.is-anim .proof-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.proof-marquee.is-anim .proof-group {
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 12px;
  padding-right: 12px; /* inter-group gap so translateX(-50%) loops seamlessly */
}
@media (hover: hover) and (pointer: fine) {
  .proof-marquee.is-anim:hover .proof-track { animation-play-state: paused; }
}

/* ==========================================================================
   Mobile app shell (<=860px): bottom tab bar + native-feel sheets.
   Injected by main.js on every page; desktop never sees it.
   ========================================================================== */
.tabbar {
  position: fixed;
  left: 10px; right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 240;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px;
  border-radius: 24px;
  /* solid, no backdrop-filter: iOS Safari detaches blurred fixed elements
     from the viewport during scroll, which reads as the bar floating away */
  background: color-mix(in srgb, var(--brown-900) 96%, black);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px -12px rgba(15, 8, 6, 0.65);
  transform: translateZ(0);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  border: none;
  border-radius: 18px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, background .15s, transform .12s var(--ease-out);
}
.tab-item svg { width: 21px; height: 21px; }
.tab-item.is-active { color: var(--paper); background: rgba(255, 255, 255, 0.09); }
.tab-item.tab-cta { color: var(--brown-900); background: var(--tan); }
.tab-item:active { transform: scale(0.94); }

/* bottom sheet */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(23, 12, 9, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 260;
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 60px -18px rgba(15, 8, 6, 0.55);
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(104%);
  transition: transform .42s var(--ease-swift);
  touch-action: pan-y;
}
.sheet.is-open { transform: translateY(0); }
.sheet.is-dragging { transition: none; }
.sheet-handle {
  width: 44px; height: 5px;
  margin: 6px auto 14px;
  border-radius: 99px;
  background: var(--tan-soft);
  touch-action: none;
  position: relative;
}
/* generous invisible hit area around the handle */
.sheet-handle::before { content: ""; position: absolute; inset: -14px -60px; }
.sheet-head { touch-action: none; cursor: grab; }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.sheet-head h3 { font-size: 21px; }
.sheet-close {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--brown-700);
  cursor: pointer;
}
.sheet-close svg { width: 15px; height: 15px; }
.sheet-sub { font-size: 14px; color: var(--body); margin-bottom: 14px; }

/* products grid inside the sheet */
.sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sheet-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 16px;
  background: var(--cream);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: transform .12s var(--ease-out), border-color .15s;
}
.sheet-cell:active { transform: scale(0.97); border-color: var(--accent); }
.sheet-cell .f-icon { width: 36px; height: 36px; margin: 0; border-radius: 11px; flex-shrink: 0; }
.sheet-cell .f-icon svg { width: 18px; height: 18px; }

/* quote sheet form + actions */
.sheet .form-grid { margin-top: 4px; }
.sheet .btn { width: 100%; }
.wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  border: 1.5px solid var(--olive);
  border-radius: 999px;
  background: transparent;
  color: var(--olive-deep);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform .12s var(--ease-out);
}
.wa-btn:active { transform: scale(0.97); }
.wa-btn svg { width: 18px; height: 18px; }

body.sheet-locked { overflow: hidden; }

/* ---------- Page entrance (CSS keyframes: robust even when rAF is throttled) ---------- */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { transform: translateY(112%); } to { transform: none; } }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

body { animation: pageIn 0.5s ease both; }
.site-header { animation: fadeDown 0.9s var(--ease-out) 0.3s both; }
.hero-media > img, .hero-video { animation: heroZoom 1.7s var(--ease-out) 0.35s both; }
.hero h1 .line > span { animation: riseIn 1.05s cubic-bezier(0.19, 1, 0.22, 1) 0.5s both; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.64s; }
.hero-aside { animation: fadeUp 0.9s var(--ease-out) 0.95s both; }
.hero-scroll a { opacity: 0; animation: fadeUp 0.7s ease 1.3s both, nudge 2.6s ease-in-out 2s infinite; }

.anim-enter { animation: fadeUp 0.95s var(--ease-out) 0.35s both; }
.anim-enter.d1 { animation-delay: 0.5s; }
.anim-enter.d2 { animation-delay: 0.65s; }
.anim-enter.d3 { animation-delay: 0.8s; }

/* ---------- Reveal base states (JS adds .revealed) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(42px); }
.js [data-reveal="clip"] {
  transform: none;
  clip-path: inset(12% 6% 12% 6% round var(--r-lg));
}
.js [data-reveal="fade"] { transform: none; }
.js .revealed { opacity: 1; transform: none; }
.js [data-reveal="clip"].revealed { clip-path: inset(0 0 0 0 round var(--r-lg)); }

/* assembly wipes: a panel slides into its frame from one side */
.js [data-reveal="wipe-l"], .js [data-reveal="wipe-r"] { transform: none; }
.js [data-reveal="wipe-l"] { clip-path: inset(0 100% 0 0); }
.js [data-reveal="wipe-r"] { clip-path: inset(0 0 0 100%); }
.js [data-reveal="wipe-l"].revealed, .js [data-reveal="wipe-r"].revealed { clip-path: inset(0 0 0 0); }
.js [data-reveal="wipe-l"] img, .js [data-reveal="wipe-r"] img { transition: transform 1.3s var(--ease-out); }
.js [data-reveal="wipe-l"]:not(.revealed) img { transform: translateX(-7%) scale(1.06); }
.js [data-reveal="wipe-r"]:not(.revealed) img { transform: translateX(7%) scale(1.06); }

/* the rule draws across, then its jaali markers register */
.js [data-reveal="draw"] { transform: scaleX(0.12); transform-origin: center; }
.js [data-reveal="draw"].revealed { transform: none; }

/* grids assemble: parts converge from alternating sides into place */
.js .work-grid [data-reveal]:not(.revealed):nth-child(odd) { transform: translate(-30px, 46px); }
.js .work-grid [data-reveal]:not(.revealed):nth-child(even) { transform: translate(30px, 46px); }
.js .card-grid [data-reveal]:not(.revealed):nth-child(odd) { transform: translate(-26px, 42px); }
.js .card-grid [data-reveal]:not(.revealed):nth-child(even) { transform: translate(26px, 42px); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-item:nth-child(2), .work-item:nth-child(4) { margin-top: 0; }
  .work-item:nth-child(even) { transform: translateY(56px); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.center-last.cols-3 > *,
  .card-grid.center-last.cols-4 > * { flex-basis: calc((100% - var(--cg)) / 2); }
}
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-content { grid-template-columns: 1fr; align-items: end; gap: 26px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse > .split-media { order: 0; }
  .band-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-panel { position: static; }
}
@media (max-width: 900px) {
  .commit-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  .commit-line { display: none; }
  /* no rail on small screens: the mark sits inline with its label,
     not floating in the space reserved for the line */
  .commit-step { padding-top: 0; padding-left: 30px; }
  .commit-mark { top: 3px; width: 14px; height: 14px; }
}
/* ---------- Mobile app shell activation ---------- */
@media (max-width: 860px) {
  .tabbar { display: grid; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: 12px; }
  /* header simplifies; the tab bar owns primary journeys */
  .site-header.is-hidden { transform: translateY(calc(-100% - 28px)); }
  .brand img { height: 34px; }
  .nav-bar { padding: 10px 14px 10px 22px; border-radius: 22px; }
}

/* ---------- Touch tactility: instant press feedback, no hover ghosts ---------- */
@media (hover: none) {
  .btn:active { transform: scale(0.96); }
  .chip:active, .filter-chip:active, .seg-btn:active, .mini-btn:active { transform: scale(0.94); }
  .feature-card:active, .media-card:active, .handle-card:active, .post-card:active, .work-item:active { transform: scale(0.985); }
  .icon-list a:active { transform: translateX(3px); }
  .shade-dot { width: 44px; height: 44px; }
  .swatch-row { gap: 10px; }
  .zone-chips .filter-chip, .studio .filter-chip { padding: 11px 18px; }
  .acc-head { padding: 22px 4px; }
  .feature-card:hover, .media-card:hover, .handle-card:hover { transform: none; box-shadow: 0 1px 2px rgba(56, 30, 26, 0.04), 0 10px 30px -24px rgba(56, 30, 26, 0.2); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding: 86px 10px 0; }
  .hero-media { border-radius: 24px; }
  .hero-content { padding-bottom: clamp(76px, 11vw, 96px); }
  .hero h1 { font-size: clamp(30px, 8vw, 40px); }
  /* taller, deeper scrim on phones: the copy block owns the lower half */
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(23, 12, 9, 0.3) 0%, rgba(23, 12, 9, 0) 18%),
      linear-gradient(180deg, rgba(23, 12, 9, 0) 28%, rgba(35, 18, 13, 0.5) 56%, rgba(23, 12, 9, 0.88) 100%);
  }
  .section { padding-block: clamp(48px, 10vw, 72px); }
  .section-tight { padding-block: clamp(36px, 8vw, 56px); }
  .commit-steps { grid-template-columns: 1fr; gap: 30px; }
  .k-mark { width: 150px; right: -22px; bottom: -5%; }
  .band, .cta-banner { border-radius: 28px; }
  .quote-card { padding: 28px 20px; }
  .table-scroll {
    -webkit-mask: linear-gradient(90deg, #000 92%, transparent);
    mask: linear-gradient(90deg, #000 92%, transparent);
    border-right: none;
  }
  /* the 5-zone flow runs vertically on phones: arrows turn to point down.
     align-items: flex-start keeps the column under the left-aligned
     heading instead of inheriting the row layout's centered cross-axis. */
  .zone-flow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .zone-pill { width: min(320px, 100%); justify-content: center; }
  .zone-arrow { transform: rotate(90deg); display: flex; padding: 2px 0; }
  /* CTAs fill the thumb zone */
  .cta-banner .actions { flex-direction: column; align-items: stretch; }
  .cta-banner .actions .btn { width: 100%; }
  .section-head .actions { width: 100%; }
  .section-head .actions .btn { flex: 1; }
  .stats-grid { gap: 26px 14px; }
  .hero-media { min-height: 78vh; }
  .work-grid { grid-template-columns: 1fr; }
  .work-item:nth-child(even) { transform: none; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .card-grid.center-last > * { flex-basis: 100%; }
  /* repeats the cols-3/cols-4 selectors at the same specificity (0,3,0) as
     the <=1200px rule above, so this phone rule wins on source order
     instead of losing to the higher-specificity tablet override */
  .card-grid.center-last.cols-3 > *,
  .card-grid.center-last.cols-4 > * { flex-basis: 100%; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column-reverse; }
  .check-list { grid-template-columns: 1fr; }
  .t-card:nth-child(even) { transform: none; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .band::before, .band::after, .cta-banner::before, .cta-banner::after { display: none; }
  .quote-card { -webkit-mask: none; mask: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal] img { transform: none !important; }
  .marquee-inner { animation: none; }
  .proof-marquee .proof-track { animation: none; }
  .hero-media > img { transform: none; }
  .commit-line-fill { transform: none !important; }
}

/* NOW Media credit */
.footer-bottom .builtwith{font-size:.78rem;letter-spacing:.08em;text-transform:lowercase;opacity:.55;text-decoration:none;transition:opacity .3s ease}
.footer-bottom .builtwith:hover{opacity:1}

/* Honeypot field (Task 19): off-screen trap left open for bots, invisible and unreachable for real users */
.hp-field{position:absolute;left:-9999px}