/* =========================================================================
   BOONEH — home (warm design-house)
   ========================================================================= */

/* ---------- section header ---------- */
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:calc(var(--gap) + 1rem)}

/* ---------- HERO ---------- */
.hero{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(1rem,3vh,2.5rem));padding-bottom:clamp(2rem,4vh,3.5rem)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;width:100%}
.hero__left .display{font-size:clamp(2.4rem,1rem + 4.4vw,4.8rem);margin-top:1.3rem;line-height:.98}
.hero__left .display .ital{color:var(--ink)}
.hero__lede{max-width:44ch;color:var(--ink-2);font-size:var(--fs-lg);line-height:1.45;margin-top:1.8rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

.hero__right{display:flex;flex-direction:column;gap:var(--gap)}
.hero__panel{position:relative;border-radius:var(--r-lg);aspect-ratio:1/.82;display:grid;place-items:center;overflow:hidden;padding:0}
.hero__imgs{z-index:3;transform-style:preserve-3d}
.tilt-shadow{position:absolute;bottom:13%;left:50%;width:64%;height:42px;transform:translateX(-50%);z-index:1;
  background:radial-gradient(ellipse,rgba(70,52,22,.34),transparent 68%);filter:blur(14px);pointer-events:none}
.hero__hour{position:absolute;bottom:1.3rem;right:1.5rem;font-size:.72rem;letter-spacing:.16em;color:var(--ink-3);z-index:4;pointer-events:none}
.hero__panel .hero__dots{z-index:0}
.hero__panel .hero__tagline{position:absolute;top:1.6rem;left:1.8rem;font-size:1.4rem;color:var(--ink);opacity:.55}
.hero__panel .hero__dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.5px);background-size:26px 26px;opacity:.6}
.hero__imgs{position:relative;width:min(88%,640px);aspect-ratio:2560/1936}
.hero__imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  transition:opacity var(--t-slow) var(--ease);filter:drop-shadow(0 26px 30px rgba(60,45,20,.22))}
.hero__imgs img.on{opacity:1}

.hero__pick{background:var(--cream);border:var(--hair) solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center;gap:1.6rem}
.hero__pickhead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.hero__finish{font-size:1.5rem;margin-top:.5rem}
.hero__price{font-size:1.2rem;color:var(--ink-2)}
.hero__swatches{display:flex;gap:.7rem;flex-wrap:wrap}
.hero__view{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-small);font-weight:500;color:var(--ink);
  padding-top:1.2rem;border-top:var(--hair) solid var(--line);transition:gap var(--t) var(--ease)}
.hero__view:hover{gap:.9em}
.hero__view .arw{color:var(--accent);transition:color var(--t) var(--ease)}

/* ---------- THE IDEA ---------- */
.idea__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sec) var(--gap);align-items:start}
.idea__stmt{font-family:var(--f-serif);font-weight:300;font-size:var(--fs-xl);line-height:1.12;letter-spacing:-.02em;margin-top:1.4rem}
.idea__quote p{font-size:var(--fs-lg);line-height:1.5;color:var(--ink)}
.idea__stats{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:2rem;border-top:var(--hair) solid var(--line-2)}
.idea__stats b{display:block;font-family:var(--f-sans);font-weight:600;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1;color:var(--ink)}
.idea__stats span{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:.4rem;display:block}

/* ---------- PRODUCT CARDS (shared look) ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pcard{border-radius:var(--r-lg);overflow:hidden;background:var(--cream);border:var(--hair) solid var(--line);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 24px 44px -24px rgba(70,52,22,.4)}
.pcard__img{aspect-ratio:4/3;display:grid;place-items:center;background:var(--paper-2);position:relative;overflow:hidden}
.pcard__img::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1.5px);background-size:22px 22px;opacity:.5}
.pcard__img img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(60,45,20,.18));transition:transform var(--t-slow) var(--ease);position:relative;z-index:1}
.pcard:hover .pcard__img img{transform:scale(1.05) rotate(-1deg)}
.pcard__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;padding:1.15rem 1.3rem 1.35rem}
.pcard__name{font-size:1.2rem;letter-spacing:-.01em}
.pcard__cat{font-family:var(--f-sans);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:.35rem}
.pcard__price{font-size:var(--fs-small);color:var(--ink-2);white-space:nowrap;text-align:right}

/* ---------- THE HOUR RING (creative carousel) ---------- */
.ring-sec{overflow:hidden}
.ring{position:relative;height:min(74vh,660px);margin-top:1.5rem;cursor:grab;touch-action:pan-y;outline:none;border-radius:var(--r-lg)}
.ring,.ring *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ring:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.ring.grab{cursor:grabbing}
.ring__bighour{position:absolute;top:5%;left:50%;transform:translateX(-50%);font-weight:300;font-size:clamp(6rem,21vw,19rem);
  line-height:1;letter-spacing:-.04em;color:var(--paper-3);z-index:0;pointer-events:none;transition:color .6s var(--ease)}
.ring__stage{position:absolute;inset:0;z-index:1}
.ring__item{position:absolute;top:0;left:0;width:clamp(170px,19vw,290px);will-change:transform,opacity,filter;display:block;text-decoration:none;-webkit-user-drag:none}
.ring__item img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(60,45,20,.18));pointer-events:none;-webkit-user-drag:none;user-select:none}
.ring__sh{position:absolute;bottom:-4%;left:50%;width:66%;height:18px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(60,45,20,.26),transparent 70%);filter:blur(8px);pointer-events:none}
.ring__item.front{cursor:pointer}
.ring__nav{position:absolute;top:42%;z-index:200;width:52px;height:52px;border-radius:var(--pill);border:var(--hair) solid var(--line-2);
  background:color-mix(in oklab,var(--cream) 78%,transparent);backdrop-filter:blur(6px);font-size:1.5rem;color:var(--ink);
  display:grid;place-items:center;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.ring__nav:hover{transform:scale(1.09);border-color:var(--ink)}
.ring__nav--prev{left:1.5%}.ring__nav--next{right:1.5%}
.ring__caption{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);text-align:center;z-index:200;pointer-events:none}
.ring__caption a{pointer-events:auto}
.ring__name{font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.01em}
.ring__meta{display:flex;gap:1.4rem;align-items:center;justify-content:center;margin-top:.5rem}
.ring__price{color:var(--ink-2)}
.ring__view{display:inline-flex;gap:.4em;font-family:var(--f-sans);font-weight:500;font-size:var(--fs-small);color:var(--ink)}
.ring__view .arw{color:var(--accent);transition:color .6s var(--ease)}
.ring__hint{position:absolute;bottom:3%;right:3%;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);z-index:10}
@media (max-width:900px){ .ring{height:62vh} .ring__nav{display:none} .ring__hint{left:50%;right:auto;transform:translateX(-50%);bottom:auto;top:1%} }

/* ---------- NINE COLOURS ---------- */
.colours{background:var(--paper-2)}
.swatchrow{display:grid;grid-template-columns:repeat(9,1fr);gap:.6rem}
.sw{text-align:center;transition:transform var(--t) var(--ease);cursor:default}
.sw:hover{transform:translateY(-5px)}
.sw__chip{display:block;aspect-ratio:1/1;border-radius:var(--r);background:var(--c);border:var(--hair) solid rgba(0,0,0,.08);
  box-shadow:inset 0 8px 22px rgba(255,255,255,.25)}
.sw__name{font-size:1rem;margin-top:.7rem;letter-spacing:-.01em}
.sw__hex{font-size:.68rem;color:var(--ink-3);margin-top:.1rem}

/* ---------- PROJECTS ---------- */
.proj__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.proj{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--cream);border:var(--hair) solid var(--line);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.proj:hover{transform:translateY(-6px);box-shadow:0 24px 44px -24px rgba(70,52,22,.4)}
.proj__img{aspect-ratio:4/3;overflow:hidden}
.proj__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02);transition:transform var(--t-slow) var(--ease)}
.proj:hover .proj__img img{transform:scale(1.05)}
.proj__cap{padding:1.15rem 1.3rem 1.4rem}
.proj__cap .p-place{font-family:var(--f-sans);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.proj__cap h3{font-size:1.35rem;margin-top:.35rem;letter-spacing:-.01em}

/* ---------- STUDIO BAND ---------- */
.studioband__in{max-width:1100px}
.studioband__q{font-family:var(--f-serif);font-weight:300;font-size:var(--fs-xl);line-height:1.14;letter-spacing:-.02em;margin-top:1.4rem;max-width:20ch}

/* ---------- CTA ---------- */
.ctaband{text-align:center}
.ctaband .display{margin-inline:auto;max-width:16ch}
.ctaband__act{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .hero{min-height:0}
  .hero__grid{grid-template-columns:1fr;gap:2rem}
  .hero__left .display{font-size:clamp(2.6rem,7vw,4rem)}
  .idea__grid{grid-template-columns:1fr;gap:2.4rem}
  .cgrid,.proj__grid{grid-template-columns:1fr 1fr}
  .swatchrow{grid-template-columns:repeat(5,1fr);gap:1rem 1.2rem}
}
@media (max-width:620px){
  .cgrid,.proj__grid{grid-template-columns:1fr}
  .swatchrow{grid-template-columns:repeat(3,1fr)}
  .hero__sub{gap:1.4rem}
}