/* ==========================================================================
   DIAMOND KING — Home page
   ========================================================================== */

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:max(680px, 100svh);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--graphite-950); color:var(--white);
}
.hero-media{ position:absolute; inset:0; z-index:-3; transform:scale(1.06); will-change:transform; }
.hero-media picture,.hero-img{ display:block; width:100%; height:100%; }
.hero-img{ object-fit:cover; object-position:72% 50%; }
.js .hero-img{ opacity:0; transform:scale(1.1); }
.is-loaded .hero-img{ animation:heroImg 1.8s var(--ease-out) forwards; }
@keyframes heroImg{ to{ opacity:1; transform:scale(1); } }

.hero-shade{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.78) 34%, rgba(8,9,10,.2) 62%, rgba(8,9,10,0) 78%),
    linear-gradient(0deg, rgba(8,9,10,.95) 0%, rgba(8,9,10,0) 32%),
    linear-gradient(180deg, rgba(8,9,10,.7) 0%, rgba(8,9,10,0) 18%);
}

/* Signature moment: a single cutting line crosses the hero on load, like a disc through stone */
.hero-cut{ position:absolute; left:0; right:0; top:61%; height:1px; z-index:-1; pointer-events:none; }
.hero-cut::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(163,17,27,0) 0%, rgba(163,17,27,.9) 45%, rgba(200,20,30,.55) 100%);
  transform:scaleX(0); transform-origin:left;
}
.hero-spark{
  position:absolute; top:-6px; left:0; width:180px; height:13px;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(200,20,30,.8) 35%, rgba(163,17,27,0) 100%);
  opacity:0; transform:translateX(-200px);
}
.is-loaded .hero-cut::before{ animation:cutLine 1.25s var(--ease-in-out) .35s forwards; }
.is-loaded .hero-spark{ animation:cutSpark 1.25s var(--ease-in-out) .35s forwards; }
@keyframes cutLine{ from{ transform:scaleX(0); opacity:1; } to{ transform:scaleX(1); opacity:.45; } }
@keyframes cutSpark{ 0%{ opacity:0; transform:translateX(-200px); } 12%{ opacity:1; } 85%{ opacity:1; } 100%{ opacity:0; transform:translateX(100vw); } }

.hero-inner{ position:relative; padding-top:calc(var(--header-h) + var(--sp-64)); padding-bottom:var(--sp-64); }
.hero-inner > *{ max-width:800px; }
.hero-title{ margin-top:var(--sp-24); font-size:clamp(2.6rem, 1.4rem + 4.6vw, 5.75rem); line-height:.9; letter-spacing:0; }
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.hero-title .line > span{ display:inline-block; }
.js .hero-title .line > span{ transform:translateY(110%); }
.is-loaded .hero-title .line > span{ animation:lineUp 1s var(--ease-out) forwards; animation-delay:calc(.5s + var(--l, 0) * .1s); }
@keyframes lineUp{ to{ transform:none; } }
.hero-title em{ font-style:normal; color:var(--accent-500); }
.hero-lead{ margin-top:var(--sp-24); max-width:54ch; font-size:var(--fs-body-lg); color:var(--steel-200); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-12); margin-top:var(--sp-32); }

.js .hero-fade{ opacity:0; transform:translateY(14px); }
.is-loaded .hero-fade{ animation:fadeUp .9s var(--ease-out) forwards; animation-delay:var(--d, 0s); }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.hero-spec{ position:relative; border-top:1px solid var(--graphite-line); }
.hero-spec-inner{ display:flex; align-items:stretch; gap:var(--sp-24); }
.spec-list{ flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; }
.spec{ padding:var(--sp-24) var(--sp-24) var(--sp-24) 0; border-right:1px solid var(--graphite-line); }
.spec + .spec{ padding-left:var(--sp-24); }
.spec dt{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-400); }
.spec dd{ margin:8px 0 0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); line-height:1; font-variant-numeric:tabular-nums; }
.num{ display:inline-block; font-variant-numeric:tabular-nums; }

.hero-scroll{
  display:flex; align-items:center; gap:12px; padding-left:var(--sp-8); white-space:nowrap;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-200); transition:color var(--dur-fast);
}
.hero-scroll:hover{ color:var(--white); }
.hero-scroll-ico{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--graphite-line-strong); }
.hero-scroll-ico svg{ width:18px; height:18px; animation:nudge 2.4s var(--ease-in-out) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(3px); } }

@media (prefers-reduced-motion: reduce){
  .js .hero-img,.js .hero-fade,.js .hero-title .line > span{ opacity:1; transform:none; animation:none !important; }
  .hero-cut::before{ transform:scaleX(1); opacity:.45; animation:none !important; }
  .hero-spark{ display:none; }
}

@media (max-width:1023px){
  .hero-shade{
    background:
      linear-gradient(90deg, rgba(8,9,10,.9) 0%, rgba(8,9,10,.55) 60%, rgba(8,9,10,.25) 100%),
      linear-gradient(0deg, rgba(8,9,10,.95) 0%, rgba(8,9,10,0) 40%);
  }
  .hero-scroll{ display:none; }
}
@media (max-width:767px){
  .hero{ min-height:auto; }
  .hero-img{ object-position:68% 50%; }
  .hero-shade{ background:linear-gradient(180deg, rgba(8,9,10,.35) 0%, rgba(8,9,10,.7) 42%, rgba(8,9,10,.97) 100%); }
  .hero-inner{ padding-top:calc(var(--header-h) + 38vw); padding-bottom:var(--sp-32); }
  .hero-cut{ top:30%; }
  .hero-actions .btn{ flex:1 1 100%; }
  .spec-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spec{ padding:var(--sp-16) var(--sp-12) var(--sp-16) 0; border-bottom:1px solid var(--graphite-line); }
  .spec:nth-child(2n){ border-right:0; padding-left:var(--sp-16); }
  .spec:nth-child(2n+1){ padding-left:0; }
  .spec:nth-child(n+3){ border-bottom:0; }
}

/* ---------------------------------------------------------------------
   SECTION HEAD
   --------------------------------------------------------------------- */
.section-head{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:end; gap:var(--sp-24) var(--sp-64); margin-bottom:var(--sp-48); }
.section-head-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-16); }
.section-head-aside .section-lead{ margin-top:0; }
@media (max-width:900px){ .section-head{ grid-template-columns:1fr; gap:var(--sp-16); margin-bottom:var(--sp-32); } }

/* ---------------------------------------------------------------------
   FEATURED — tabs + product grid
   --------------------------------------------------------------------- */
.feat-tabs{ display:flex; gap:4px; margin-bottom:var(--sp-32); overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--paper-line); }
.feat-tabs::-webkit-scrollbar{ display:none; }
.feat-tab{
  position:relative; flex-shrink:0; min-height:50px; padding:0 var(--sp-16);
  font-family:var(--font-display); font-weight:600; font-size:1.125rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--steel-500); transition:color var(--dur-fast);
}
.feat-tab::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent-600); transform:scaleX(0); transition:transform var(--dur-base) var(--ease-out); }
.feat-tab:hover,.feat-tab[aria-selected="true"]{ color:var(--ink-950); }
.feat-tab[aria-selected="true"]::after{ transform:scaleX(1); }
.feat-tab:focus-visible{ outline-offset:-2px; }
.feat-grid{ transition:opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.feat-grid.is-switching{ opacity:0; transform:translateY(8px); }

/* ---------------------------------------------------------------------
   TASK SELECTOR
   --------------------------------------------------------------------- */
.task-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-16); }
@media (max-width:1023px){ .task-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .task-grid{ gap:var(--sp-8); } }

.task-card{
  --notch:16px;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-32);
  min-height:200px; padding:var(--sp-24);
  background:var(--graphite-900); color:var(--white);
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.task-card::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--accent-600);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease-out);
}
.task-card:hover::before,.task-card:focus-visible::before{ transform:scaleX(1); }
.task-card:focus-visible{ outline:none; }
.task-card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.task-card-icon{ width:52px; height:52px; color:var(--steel-400); transition:color var(--dur-base), transform var(--dur-slow) var(--ease-out); }
.task-card-icon svg{ width:100%; height:100%; }
.task-card-arrow{ width:24px; height:24px; color:var(--steel-400); transition:color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.task-card-arrow svg{ width:100%; height:100%; }
.task-card:hover .task-card-icon,.task-card:focus-visible .task-card-icon{ color:var(--white); transform:rotate(-20deg); }
.task-card:hover .task-card-arrow,.task-card:focus-visible .task-card-arrow{ color:var(--white); transform:translate(3px,-3px); }
.task-card-body{ display:block; }
.task-card-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.625rem; line-height:1; text-transform:uppercase; }
.task-card-count{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:12px; color:var(--steel-400); transition:color var(--dur-base); }
.task-card:hover .task-card-count,.task-card:focus-visible .task-card-count{ color:rgba(255,255,255,.9); }
.task-card:hover .task-card-icon svg circle[fill]{ fill:var(--white); }

@media (max-width:600px){
  .task-card{ --notch:12px; min-height:156px; padding:var(--sp-16); gap:var(--sp-16); }
  .task-card-icon{ width:40px; height:40px; }
  .task-card-title{ font-size:1.25rem; }
}

/* ---------------------------------------------------------------------
   EDITORIAL — visual pause
   --------------------------------------------------------------------- */
.editorial{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(92vh, 880px); display:flex; align-items:center;
  padding-block:var(--sp-128); background:var(--graphite-950); color:var(--white);
}
.editorial-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.editorial-media picture,.editorial-media img{ display:block; width:100%; height:100%; }
.editorial-media img{ object-fit:cover; object-position:75% 50%; transform:scale(1.12); }
.editorial-shade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,9,10,.95) 0%, rgba(8,9,10,.78) 40%, rgba(8,9,10,.1) 74%);
}
.editorial-inner > *{ max-width:640px; }
.editorial-title{ margin-top:var(--sp-16); font-size:clamp(2.5rem, 1.5rem + 3.8vw, 5rem); line-height:.92; }
.editorial-text{ margin-top:var(--sp-24); max-width:54ch; font-size:var(--fs-body-lg); color:var(--steel-200); }
.editorial-specs{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:var(--sp-16) var(--sp-48); margin:var(--sp-48) 0 0; padding-top:var(--sp-24); border-top:1px solid var(--graphite-line-strong); }
.editorial-specs dt{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-400); }
.editorial-specs dd{ margin:6px 0 0; font-family:var(--font-display); font-weight:700; font-size:1.75rem; line-height:1; white-space:nowrap; }

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .editorial-media{ animation:edOpen linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; }
    .editorial-media img{ animation:edDrift linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
  }
}
@keyframes edOpen{ from{ clip-path:inset(12% 6% 12% 6%); } to{ clip-path:inset(0 0 0 0); } }
@keyframes edDrift{ from{ transform:translateY(-5%) scale(1.12); } to{ transform:translateY(5%) scale(1.12); } }

@media (max-width:767px){
  .editorial{ min-height:auto; align-items:flex-end; padding-block:48vw var(--sp-64); }
  .editorial-shade{ background:linear-gradient(180deg, rgba(8,9,10,.2) 0%, rgba(8,9,10,.85) 45%, rgba(8,9,10,.97) 100%); }
  .editorial-specs{ grid-template-columns:repeat(2,auto); gap:var(--sp-16) var(--sp-32); }
  .editorial-specs dd{ font-size:1.375rem; }
}

/* ---------------------------------------------------------------------
   TRUST — datasheet
   --------------------------------------------------------------------- */
.trust-sheet{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--ink-950); }
.trust-item{ padding:var(--sp-24) var(--sp-24) var(--sp-32) 0; border-right:1px solid var(--paper-line-strong); }
.trust-item + .trust-item{ padding-left:var(--sp-24); }
.trust-item:last-child{ border-right:0; }
.trust-label{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-500); }
.trust-label svg{ width:20px; height:20px; color:var(--accent-600); }
.trust-value{ margin-top:var(--sp-32); font-family:var(--font-display); font-weight:700; font-size:clamp(2.25rem, 1.5rem + 2vw, 3.5rem); line-height:.95; text-transform:uppercase; color:var(--ink-950); }
.trust-text{ margin-top:var(--sp-12); max-width:34ch; font-size:.9375rem; color:var(--steel-500); }

@media (max-width:1023px){
  .trust-sheet{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-item:nth-child(2n){ border-right:0; }
  .trust-item:nth-child(2n+1){ padding-left:0; }
  .trust-item:nth-child(-n+2){ border-bottom:1px solid var(--paper-line-strong); }
}
@media (max-width:560px){
  .trust-sheet{ grid-template-columns:1fr; }
  .trust-item,.trust-item + .trust-item{ padding:var(--sp-24) 0; border-right:0; border-bottom:1px solid var(--paper-line-strong); }
  .trust-item:last-child{ border-bottom:0; }
  .trust-value{ margin-top:var(--sp-16); }
}

/* ---------------------------------------------------------------------
   WHOLESALE
   --------------------------------------------------------------------- */
.wh{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:var(--sp-64); align-items:start; }
.wh-title{ margin-top:var(--sp-16); font-size:clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem); overflow-wrap:break-word; hyphens:auto; }
.wh-lead{ margin-top:var(--sp-24); max-width:50ch; font-size:var(--fs-body-lg); color:var(--steel-200); }
.wh-list{ margin-top:var(--sp-32); border-top:1px solid var(--graphite-line); }
.wh-list li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--sp-12); padding:var(--sp-16) 0; border-bottom:1px solid var(--graphite-line); color:var(--steel-400); }
.wh-list li > span svg{ width:22px; height:22px; color:var(--accent-500); }
.wh-list strong{ display:block; margin-bottom:2px; font-weight:600; color:var(--white); }
.wh-form{ padding:var(--sp-32); background:var(--graphite-900); border-top:2px solid var(--accent-600); }
.wh-form-title{ margin-bottom:var(--sp-24); font-size:var(--fs-h3); }
@media (max-width:1199px){ .wh{ grid-template-columns:1fr; gap:var(--sp-48); } .wh-form{ max-width:720px; } }
@media (max-width:600px){ .wh-form{ padding:var(--sp-24) var(--sp-16); } }

/* ---------------------------------------------------------------------
   CTA BAND
   --------------------------------------------------------------------- */
.cta-band{ position:relative; isolation:isolate; overflow:hidden; padding-block:var(--sp-96); background:var(--accent-600); color:var(--white); }
.cta-band::before{
  content:'?'; position:absolute; right:-1%; top:50%; z-index:-1; transform:translateY(-50%);
  font-family:var(--font-display); font-weight:800; font-size:clamp(16rem, 32vw, 36rem); line-height:.8;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.28); pointer-events:none;
}
.cta-band .eyebrow{ color:var(--white); }
.cta-band .eyebrow::before{ background:var(--white); }
.cta-inner{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:end; gap:var(--sp-48); }
.cta-title{ margin-top:var(--sp-16); font-size:clamp(2.5rem, 1.5rem + 4vw, 5.25rem); line-height:.92; }
.cta-text{ max-width:46ch; font-size:var(--fs-body-lg); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-12); margin-top:var(--sp-24); }
.cta-band .btn-ghost{ --ghost-line:rgba(255,255,255,.65); }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.12); }
.cta-band .btn-dark:hover{ background:var(--graphite-800); }
@media (max-width:900px){ .cta-inner{ grid-template-columns:1fr; gap:var(--sp-24); } }
@media (max-width:767px){ .cta-band{ padding-block:var(--sp-64); } .cta-actions .btn{ flex:1 1 100%; } }

.cta-band .eyebrow{ text-shadow:none; }
.hero-title em{ text-shadow:0 0 28px rgba(200,20,30,.45); }

/* Mobile: keep the photos visible — a clear image band on top, darkening only behind the text */
@media (max-width:767px){
  .hero-media{ bottom:auto; height:calc(var(--header-h) + 78vw); }
  .hero-img{ object-position:84% 58%; }
  .hero-shade{ background:linear-gradient(180deg, rgba(8,9,10,.55) 0, rgba(8,9,10,0) calc(var(--header-h) + 10vw), rgba(8,9,10,0) calc(var(--header-h) + 46vw), var(--graphite-950) calc(var(--header-h) + 78vw)); }
  .hero-inner{ padding-top:calc(var(--header-h) + 66vw); }
  .hero-title{ font-size:clamp(1.9rem, 10vw, 2.6rem); }
  .hero-cut{ top:calc(var(--header-h) + 62vw); }
  .editorial{ padding-top:80vw; }
  .editorial-media{ bottom:auto; height:92vw; }
  .editorial-media img{ object-position:78% 60%; }
  .editorial-shade{ background:linear-gradient(180deg, rgba(8,9,10,0) 0, rgba(8,9,10,0) 52vw, var(--graphite-950) 92vw); }
}