/* ============================================================
   PAGE LAYOUT BLOCKS
   ============================================================ */

/* ---- Cursor dot ---- */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; background: var(--color-accent);
  pointer-events: none; z-index: 999; mix-blend-mode: difference;
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), margin var(--dur-fast) var(--ease-out);
}
.cursor-dot.is-active { width: 46px; height: 46px; margin: -23px; background: var(--paper-050); }
@media (max-width: 980px) { .cursor-dot { display: none; } }

/* ---- Grain / texture overlay ---- */
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---- Hero (home) ---- */
.hero {
  position: relative;
  padding-top: var(--space-9);
  padding-bottom: var(--space-11);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-9);
  align-items: center;
}
.hero__eyebrow-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.hero h1 { font-size: var(--fs-5xl); font-weight: 400; }
.hero h1 em { font-style: italic; color: var(--color-accent); font-weight: 400; }
.hero h1 .word { display: inline-block; }
.hero__lede { margin-top: var(--space-6); }
.hero__cta-row { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; }
.hero__trust { display: flex; gap: var(--space-7); margin-top: var(--space-9); padding-top: var(--space-7); border-top: 1px solid var(--line-soft); }
.hero__trust .stat-item__num { color: var(--color-accent); font-size: var(--fs-xl); }
.hero__trust .stat-item__label { color: var(--color-ink-muted); }

.hero__visual { position: relative; aspect-ratio: 4/5; }
.hero__visual-frame { position: absolute; inset: 0; overflow: hidden; }
.hero__visual-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual-tag {
  position: absolute; bottom: var(--space-5); left: var(--space-5); right: var(--space-5);
  background: rgba(251,248,242,0.92); backdrop-filter: blur(8px);
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
}
.hero__visual-tag strong { font-family: var(--font-display); font-size: var(--fs-md); display: block; }
.hero__visual-tag span { font-size: var(--fs-xs); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.hero__deco-ring {
  position: absolute; width: 140px; height: 140px; border: 1px solid var(--line-strong); border-radius: 50%;
  top: -40px; right: -40px; z-index: -1;
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__trust { flex-wrap: wrap; row-gap: var(--space-5); }
}

/* ---- Page header (category / listing / static pages) ---- */
.page-header {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--line-soft);
}
.page-header h1 { margin-top: var(--space-3); font-size: var(--fs-3xl); }
.page-header__lede { margin-top: var(--space-5); }
.page-header--image { padding: 0; border-bottom: none; }
.page-header--image .page-header__inner {
  position: relative; min-height: 46vh; display: flex; align-items: flex-end;
  padding: var(--space-10) 0 var(--space-8);
}
.page-header--image .page-header__bg { position: absolute; inset: 0; z-index: -2; }
.page-header--image .page-header__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-header--image .page-header__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,13,11,0.35), rgba(15,13,11,0.86)); }
.page-header--image h1, .page-header--image .breadcrumb, .page-header--image .page-header__lede { color: var(--paper-050); }
.page-header--image .breadcrumb { color: rgba(251,248,242,0.68); }
.page-header--image .breadcrumb a { color: rgba(251,248,242,0.68); }
.page-header--image .breadcrumb .current { color: var(--paper-050); }

/* ---- Category subnav pills row ---- */
.subcat-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-7); }

/* ---- Category index (top-level tiles) ---- */
.category-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 980px) { .category-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .category-index-grid { grid-template-columns: 1fr; } }

/* ---- Split feature (about intro, corporate solutions) ---- */
.split-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-10); align-items: center; }
.split-feature--reverse { grid-template-columns: 1.1fr 0.9fr; }
.split-feature--reverse .split-feature__media { order: 2; }
.split-feature__media { position: relative; aspect-ratio: 5/6; overflow: hidden; }
.split-feature__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .split-feature, .split-feature--reverse { grid-template-columns: 1fr; }
  .split-feature--reverse .split-feature__media { order: 0; }
}

/* ---- Industries grid ---- */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.industry-card { background: var(--color-surface); padding: var(--space-7) var(--space-6); transition: background var(--dur-fast) var(--ease-out); }
.industry-card:hover { background: var(--color-bg-alt); }
.industry-card__index { font-family: var(--font-display); font-style: italic; color: var(--color-accent); font-size: var(--fs-md); }
.industry-card h3 { margin-top: var(--space-4); font-size: var(--fs-md); }
.industry-card p { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: var(--lh-relaxed); }
@media (max-width: 900px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industry-grid { grid-template-columns: 1fr; } }

/* ---- Blog ---- */
.blog-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-9); align-items: center; margin-bottom: var(--space-11); }
.blog-featured__media { aspect-ratio: 16/11; overflow: hidden; }
.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured__meta { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
@media (max-width: 900px) { .blog-featured { grid-template-columns: 1fr; } }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.blog-card__media { aspect-ratio: 4/3; overflow: hidden; margin-bottom: var(--space-4); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-premium); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__meta { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.blog-card h3 { font-size: var(--fs-md); font-weight: 500; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---- Article (blog post / product long-form) ---- */
.article-header { padding-block: var(--space-10) var(--space-7); max-width: var(--container-narrow); margin-inline: auto; }
.article-header__meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.article-hero-media { max-width: 1100px; margin: 0 auto var(--space-10); aspect-ratio: 21/9; overflow: hidden; }
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.article-body { max-width: var(--container-narrow); margin-inline: auto; font-size: var(--fs-md); }
.article-body h2 { font-size: var(--fs-xl); margin-top: var(--space-9); margin-bottom: var(--space-4); }
.article-body h3, .article-body h4, .article-body h5, .article-body h6 { font-size: var(--fs-lg); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.article-body p { color: var(--color-ink-soft); line-height: var(--lh-relaxed); margin-bottom: var(--space-5); }
.article-body ul, .article-body ol { margin: var(--space-5) 0; padding-left: 1.4em; color: var(--color-ink-soft); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: var(--space-2); line-height: var(--lh-relaxed); }
.article-body li::marker { color: var(--color-accent); }
.article-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong, .article-body b { font-weight: 600; color: var(--color-ink); }
.article-body img { margin-block: var(--space-6); }
.article-body i, .article-body em { font-style: italic; }
.article-body .gurantee_list, .article-body .list { margin: var(--space-6) 0; padding: var(--space-5); background: var(--color-bg-alt); border-left: 2px solid var(--color-accent); }
.article-body .gurantee_list div, .article-body .list div { padding: 0.4em 0; font-size: var(--fs-sm); }
.article-share { display: flex; align-items: center; gap: var(--space-4); max-width: var(--container-narrow); margin: var(--space-9) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--line-soft); }

/* ---- Product detail ---- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); padding-block: var(--space-9); }
.product-detail__gallery-main { aspect-ratio: 1/1; overflow: hidden; background: var(--paper-100); cursor: zoom-in; }
.product-detail__gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__info { position: sticky; top: 110px; align-self: start; }
.product-detail__title { font-size: var(--fs-2xl); margin-top: var(--space-3); }
.product-detail__price { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-5); }
.product-detail__price .amount { font-family: var(--font-display); font-size: var(--fs-xl); }
.product-detail__price .unit { color: var(--color-ink-muted); font-size: var(--fs-sm); }
.product-detail__excerpt { margin-top: var(--space-5); }
.product-detail__specs { margin-top: var(--space-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); padding: var(--space-6); background: var(--color-bg-alt); }
.spec-row dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted); }
.spec-row dd { font-size: var(--fs-sm); margin-top: 2px; }
.product-detail__actions { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; }
.product-detail__assurance { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--line-soft); }
.assurance-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-ink-soft); }
.assurance-row svg { flex-shrink: 0; color: var(--color-accent); }
@media (max-width: 900px) {
  .product-detail { grid-template-columns: 1fr; gap: var(--space-6); }
  .product-detail__info { position: static; }
}

/* ---- Related products / carousel row ---- */
.related-scroll { display: flex; gap: var(--space-5); overflow-x: auto; padding-bottom: var(--space-4); scroll-snap-type: x mandatory; }
.related-scroll::-webkit-scrollbar { height: 4px; }
.related-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); }
.related-scroll .product-card { min-width: 280px; scroll-snap-align: start; border: 1px solid var(--line-soft); }

/* ---- Quote / contact page ---- */
.quote-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); }
.quote-sidebar { background: var(--color-ink); color: var(--paper-050); padding: var(--space-8); position: sticky; top: 110px; align-self: start; }
.quote-sidebar h3 { color: var(--paper-050); margin-bottom: var(--space-5); }
.contact-line { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--line-on-dark); }
.contact-line span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-gold); }
.contact-line strong { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 400; }
@media (max-width: 980px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-sidebar { position: static; order: -1; }
}

/* ---- 404 ---- */
.not-found { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: var(--space-12); }
.not-found__code { font-family: var(--font-display); font-style: italic; font-size: var(--fs-5xl); color: var(--color-accent); }

/* ---- Utility spacing ---- */
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }