/* ============================================================================
   Intricate Designs Studio — dark product storefront
   ----------------------------------------------------------------------------
   The renders arrive as parts keyed out of their studio backdrop (cutout.py),
   so product imagery has no rectangle of its own: the parts float directly on
   the page and pick up its light. Everything here is built around that — the
   glow behind a product is page furniture, not baked into the asset.

   Palette is taken from the hardware: charcoal PETG, a hot orange tray accent,
   and the near-black of an unlit rack.
   ========================================================================== */
@import url('/fonts/fonts.css');

:root {
  --bg:#0a0b0d;
  --bg-2:#101216;
  --surface:#131519;
  --surface-2:#181b21;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --ink:#f4f5f7;
  --ink-2:#a2a9b4;
  --ink-3:#6e7681;

  --accent:#ff7a18;
  --accent-soft:rgba(255,122,24,.14);
  --accent-line:rgba(255,122,24,.42);

  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wide:1240px;
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--accent); color:#0a0b0d; }

/* the page is lit from the top, like a rack in a dark room */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 72% -8%, rgba(255,122,24,.10), transparent 62%),
    radial-gradient(700px 500px at 8% 0%, rgba(120,150,255,.05), transparent 60%);
}
main, header, footer { position:relative; z-index:1; }

/* ---------------------------------------------------------------- typography */
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.06; }
.eyebrow {
  font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before { content:""; width:26px; height:1px; background:var(--accent-line); }
.lede { font-size:17.5px; line-height:1.62; color:var(--ink-2); margin:0; }

/* -------------------------------------------------------------------- header */
header.site {
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(10,11,13,.72);
  border-bottom:1px solid var(--line);
}
.head-in {
  max-width:var(--wide); margin:0 auto; padding:15px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:26px;
}
.wordmark { display:flex; align-items:center; gap:12px; }
/* 44px, not 32: the compass ticks in the mark stop resolving below about 40px.
   The lockup type is sized down to match rather than the mark being squeezed. */
.wordmark .mark { width:44px; height:44px; flex:none; display:block;
  transition:transform .35s var(--ease), opacity .2s var(--ease); opacity:.95; }
.wordmark:hover .mark { transform:rotate(8deg); opacity:1; }
.wm-text { display:flex; flex-direction:column; line-height:1.08; }
.wm-text b { font-size:15.5px; font-weight:600; letter-spacing:-.02em; }
.wm-text small { font:500 9px/1 var(--mono); letter-spacing:.30em; color:var(--ink-3); margin-top:3px; }
header nav { display:flex; align-items:center; gap:28px; }
header nav a { font-size:14px; color:var(--ink-2); transition:color .18s var(--ease); }
header nav a:hover { color:var(--ink); }
header .nav-cta {
  font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--line-2); border-radius:999px; padding:9px 16px;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
header .nav-cta:hover { border-color:var(--accent-line); background:var(--accent-soft); }

/* --------------------------------------------------------------------- shell */
section { max-width:var(--wide); margin:0 auto; padding:96px 28px; }
.sec-head { max-width:60ch; margin-bottom:44px; }
.sec-head h2 { font-size:clamp(28px,3.6vw,42px); }
.sec-head p { margin:14px 0 0; color:var(--ink-2); }

/* ---------------------------------------------------------------------- hero */
.hero {
  display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:40px;
  padding-top:76px; padding-bottom:64px; min-height:min(84vh,760px);
}
.hero h1 { font-size:clamp(38px,6.2vw,74px); letter-spacing:-.045em; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .lede { margin:24px 0 34px; max-width:46ch; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-shot { position:relative; display:grid; place-items:center; }
/* Warm rim light behind the plate, so the product sits in the page rather than
   on top of it. */
.hero-shot::before {
  content:""; position:absolute; inset:6% -4% -10% -4%; border-radius:50%;
  background:radial-gradient(circle at 50% 55%, rgba(255,122,24,.18), transparent 66%);
  filter:blur(26px);
}
.hero-shot img.float {
  position:relative; width:100%; max-width:580px;
  filter:drop-shadow(0 44px 46px rgba(0,0,0,.66));
  animation:float 7s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(-9px);} 50%{transform:translateY(9px);} }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:500 15px/1 var(--sans); letter-spacing:-.01em;
  padding:14px 24px; border-radius:11px; border:1px solid transparent;
  cursor:pointer; transition:transform .16s var(--ease), background .18s var(--ease),
    border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn.primary {
  background:var(--accent); color:#140a02; font-weight:600;
  box-shadow:0 10px 30px rgba(255,122,24,.24);
}
.btn.primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(255,122,24,.34); }
.btn.ghost { border-color:var(--line-2); color:var(--ink); background:rgba(255,255,255,.03); }
.btn.ghost:hover { border-color:var(--ink-3); background:rgba(255,255,255,.06); }
button.btn:disabled { opacity:.55; cursor:default; transform:none; }

/* --------------------------------------------------------------- spec strip */
.strip {
  max-width:none; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.strip-in {
  max-width:var(--wide); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.strip-in > div { padding:30px 28px 30px 0; }
.strip-in > div + div { border-left:1px solid var(--line); padding-left:28px; }
.strip b { display:block; font-size:14.5px; font-weight:600; margin-bottom:7px; letter-spacing:-.015em; }
.strip span { font-size:13.5px; color:var(--ink-3); line-height:1.55; }

/* --------------------------------------------------------------------- cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:20px; }
.card {
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
a.card:hover { transform:translateY(-5px); border-color:var(--line-2);
  box-shadow:0 22px 50px rgba(0,0,0,.5); }
.shot { position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-2); }
.shot img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
a.card:hover .shot img { transform:scale(1.05); }
/* Sinks the render's own backdrop into the card so the tile edge, not the
   photograph's edge, is what the eye reads. */
.shot::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,.18),transparent 34%,rgba(10,11,13,.42));
  box-shadow:inset 0 0 46px 8px rgba(10,11,13,.42);
}
.noimg {
  width:100%; height:100%; display:grid; place-items:center;
  color:var(--ink-3); font:400 12px/1 var(--mono); letter-spacing:.12em;
}
.badge {
  position:absolute; top:14px; left:14px; z-index:2;
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}
.cbody { padding:20px 21px 21px; border-top:1px solid var(--line); display:flex;
  flex-direction:column; gap:8px; flex:1; }
.cbody h3 { font-size:16.5px; letter-spacing:-.02em; line-height:1.28; }
.blurb { font-size:13.5px; color:var(--ink-3); margin:0; flex:1; line-height:1.5; }
.crow { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.price { font:600 17px/1 var(--sans); letter-spacing:-.02em; }
.files { font:400 11px/1 var(--mono); color:var(--ink-3); letter-spacing:.06em; }

/* -------------------------------------------------------------------- detail */
.crumb { max-width:var(--wide); margin:0 auto; padding:26px 28px 0;
  font:400 12px/1 var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.crumb a:hover { color:var(--accent); }
.crumb span { margin:0 8px; opacity:.5; }
.detail {
  max-width:var(--wide); margin:0 auto; padding:30px 28px 20px;
  display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:start;
}
.gal { position:sticky; top:96px; }
.gal .main {
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2); aspect-ratio:1; overflow:hidden;
}
.gal .main img { width:100%; height:100%; object-fit:cover; }
.gal .main::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 60px 10px rgba(10,11,13,.45);
}
.thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.thumb {
  width:74px; height:74px; padding:0; cursor:pointer; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line); border-radius:11px;
  transition:border-color .2s var(--ease), opacity .2s var(--ease); opacity:.62;
}
.thumb:hover, .thumb[aria-current="true"] { border-color:var(--accent-line); opacity:1; }
.thumb img { width:100%; height:100%; object-fit:cover; }

.info h1 { font-size:clamp(24px,3vw,34px); line-height:1.16; margin-bottom:20px; }
.pricerow { display:flex; align-items:baseline; gap:16px; margin-bottom:26px; }
.price.big { font-size:32px; }
.cta { display:flex; flex-direction:column; gap:11px; margin-bottom:30px; }
.cta .btn { width:100%; }
.note { font:400 12.5px/1.5 var(--mono); color:var(--ink-3); letter-spacing:.02em; }
.note.err { color:#ff6b5e; }
.desc { color:var(--ink-2); font-size:15.5px; }
.desc p { margin:0 0 14px; }
.desc strong { color:var(--ink); font-weight:600; }
.desc ul.feat { list-style:none; padding:0; margin:0 0 16px; }
.desc ul.feat li { position:relative; padding-left:22px; margin-bottom:11px; line-height:1.55; }
.desc ul.feat li::before {
  content:""; position:absolute; left:0; top:9px; width:8px; height:2px;
  background:var(--accent); border-radius:2px;
}
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:26px;
  padding-top:22px; border-top:1px solid var(--line); }
.tag { font:400 11px/1 var(--mono); color:var(--ink-3); letter-spacing:.05em;
  border:1px solid var(--line); border-radius:999px; padding:6px 11px; }

.more, .printed-inline { border-top:1px solid var(--line); }

/* ---------------------------------------------------------------------- form */
.quote { max-width:660px; display:flex; flex-direction:column; gap:16px; }
.quote label { display:flex; flex-direction:column; gap:8px;
  font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.quote input, .quote select, .quote textarea {
  font:400 15px/1.5 var(--sans); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:13px 14px; width:100%; transition:border-color .18s var(--ease), background .18s var(--ease);
}
.quote textarea { resize:vertical; }
.quote input:focus, .quote select:focus, .quote textarea:focus {
  outline:none; border-color:var(--accent-line); background:var(--surface-2);
}
.quote select { appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
    linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quote button { align-self:flex-start; margin-top:4px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formnote { font:400 13px/1.5 var(--mono); min-height:20px; margin:0; color:var(--ink-3); }
.formnote.ok { color:#5fd08a; }
.formnote.err { color:#ff6b5e; }

/* -------------------------------------------------------------------- thanks */
.thanks { max-width:720px; text-align:center; padding-top:120px; padding-bottom:120px; }
.thanks h1 { font-size:clamp(30px,4.6vw,46px); margin-bottom:16px; }
.thanks .lede { margin:0 auto; max-width:46ch; }
.thanks #th-action { margin:34px 0 20px; }

/* -------------------------------------------------------------------- footer */
footer.site { border-top:1px solid var(--line); background:var(--bg-2); margin-top:40px; }
.foot-grid { max-width:var(--wide); margin:0 auto; padding:56px 28px;
  display:grid; grid-template-columns:1.5fr 1fr 1.4fr; gap:48px; align-items:start; }
/* The circular badge is the parent company's format, so IDS reads as a division
   rather than an unrelated shop. Given room in the footer, held back elsewhere. */
.foot-lockup { max-width:220px; }
.foot-lockup img { width:180px; height:auto; opacity:.9; margin-bottom:16px;
  transition:opacity .3s var(--ease); }
.foot-lockup:hover img { opacity:1; }
.foot-brand { font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.foot-h { font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:12px; }
.muted { color:var(--ink-3); font-size:13.5px; margin:0; line-height:1.65; }
.muted a:hover { color:var(--accent); }

/* -------------------------------------------------------------------- motion */
/* The hidden starting state is applied ONLY when scripting is available (the
   .js class is set inline in <head>). Without that gate a JS error, a blocked
   script, or an observer that never fires leaves the whole page below the hero
   invisible -- content must never depend on an animation to become readable. */
.js .reveal { opacity:0; transform:translateY(22px); }
.js .reveal.in { opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-shot img.float { animation:none; }
  .js .reveal, .js .reveal.in { opacity:1; transform:none; transition:none; }
  * { transition-duration:.01ms !important; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width:960px) {
  /* On a phone the shot comes first, but it must not eat the fold: the headline
     and the primary action are what a visitor needs to see without scrolling. */
  .hero { grid-template-columns:1fr; text-align:left; padding-top:26px; min-height:0; gap:20px; }
  .hero-shot { order:-1; }
  .hero-shot img.float { max-width:288px; }
  .hero h1 { font-size:clamp(34px,10vw,46px); }
  .hero .lede { margin:18px 0 26px; font-size:16px; }
  .detail { grid-template-columns:1fr; gap:34px; }
  .gal { position:static; }
  .strip-in { grid-template-columns:1fr; }
  .strip-in > div { padding:22px 0; }
  .strip-in > div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .foot-grid { grid-template-columns:1fr; gap:30px; }
  .foot-lockup img { width:150px; }
  section { padding:64px 20px; }
  .detail, .crumb, .head-in { padding-left:20px; padding-right:20px; }
  header nav { gap:16px; }
  header nav a:not(.nav-cta) { display:none; }
  .f2 { grid-template-columns:1fr; }
}