/* ==========================================================================
   ATLAS THEME — style.css
   Editorial warm-paper aesthetic with CMS bridge variables
   ========================================================================== */

:root {
  /* --- CMS Bridge (injected via inline <style> in header) --- */
  --ink: var(--dark-color, #0e0e0c);
  --rust: var(--primary-color, #b85c3a);
  --rust-deep: var(--secondary-color, #1a1916);
  --bone: var(--light-color, #f6f3ee);
  /* --footer-color is used directly from CMS */

  /* --- Atlas extended tokens --- */
  --bone-deep: var(--light-color);
  --ink-soft: #2a2823;
  --steel: #c9c3b7;
  --hairline: rgba(14, 14, 12, 0.12);
  --hairline-strong: rgba(14, 14, 12, 0.22);
  --muted: #6b675f;
  --paper: #fbfaf7;

  /* --- Type --- */


  /* --- Scale --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --container: 1400px;
  --gutter: clamp(20px, 3vw, 40px);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 480ms;
}

/* ---------- Base overrides (Atlas-specific) ---------- */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

.container,
.atlas-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.eyebrow.no-line::before {
  display: none;
}

.display,
h1.display,
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

h1,
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}

h2,
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

h3,
.h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}


p {
  margin: 0 0 1em;
  color: var(--ink-soft);
}

.lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
}

small,
.small {
  font-size: 13px;
  color: var(--muted);
}

::selection {
  background: var(--ink);
  color: var(--bone);
}

/* ---------- Buttons ---------- */
.btn-atlas {
  --bg: var(--ink);
  --fg: var(--bone);
  --bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform var(--dur) var(--ease), background 200ms, color 200ms, border-color 200ms;
}

.btn-atlas .arrow {
  transition: transform var(--dur) var(--ease);
}

.btn-atlas:hover {
  background: var(--rust);
  border-color: var(--rust);
}

.btn-atlas:hover .arrow {
  transform: translateX(4px);
}

.btn-atlas.ghost {
  --bg: transparent;
  --fg: var(--ink);
  --bd: var(--hairline-strong);
}

.btn-atlas.ghost:hover {
  --bg: var(--ink);
  --fg: var(--bone);
  --bd: var(--ink);
}

.btn-atlas.light {
  --bg: var(--bone);
  --fg: var(--ink);
  --bd: var(--bone);
}

.btn-atlas.light:hover {
  --bg: var(--rust);
  --fg: var(--bone);
  --bd: var(--rust);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 200ms, border-color 200ms, gap 240ms var(--ease);
}

.link-arrow:hover {
  color: var(--rust);
  border-color: var(--rust);
  gap: 12px;
}

/* ---------- Section frame ---------- */
.atlas-section {
  padding: clamp(30px, 8vw, 60px) 0;
  position: relative;
}


.atlas-section.tight {
  padding: clamp(48px, 5vw, 80px) 0;
}

.atlas-section.dark {
  background: var(--ink);
  color: var(--bone);
}

.atlas-section.dark h1,
.atlas-section.dark h2,
.atlas-section.dark h3 {
  color: var(--bone);
}

.atlas-section.dark p,
.atlas-section.dark .lead {
  color: rgba(246, 243, 238, 0.78);
}

.atlas-section.dark .eyebrow {
  color: rgba(246, 243, 238, 0.55);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 48px;
}

.section-head .title-block {
  max-width: 760px;
}

.section-head h2 {
  margin-bottom: 0.2em;
}

.section-head .lead {
  margin: 12px 0 0;
  max-width: 60ch;
}



/* ==========================================================================
   HEADER
   ========================================================================== */
.atlas-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 300ms, border-color 300ms, padding 300ms var(--ease);
}

.atlas-header.scrolled {
  background: rgba(251, 250, 247, 0.92);
  border-bottom-color: var(--hairline);
}

.atlas-header .nav-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 20px 0;
  transition: padding 300ms var(--ease);
}

.atlas-header.scrolled .nav-row {
  padding: 14px 0;
}

.atlas-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.atlas-brand img {
  height: 36px;
  width: auto;
}

.atlas-brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bone);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.atlas-nav {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.atlas-nav>li {
  position: relative;
  list-style: none;
}

.atlas-nav a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
  transition: background 200ms, color 200ms;
}

.atlas-nav a.nav-link:hover {
  background: var(--bone-deep);
}

.atlas-nav a.nav-link .chev {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 200ms;
}

.atlas-nav>li:hover a.nav-link .chev {
  transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 24px 60px -20px rgba(14, 14, 12, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 240ms var(--ease);
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.atlas-nav>li:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  transition: background 200ms, color 200ms;
}

.nav-dropdown a:hover {
  background: var(--bone);
  color: var(--rust);
}

/* Mega menu */
.nav-mega {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--header-h, 76px));
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 30px 60px -30px rgba(14, 14, 12, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 280ms var(--ease);
}

.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.atlas-nav>li.has-mega:hover .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-mega .mega-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding: 40px var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}

.mega-feature {
  background: var(--bone);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.mega-feature .ph {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  z-index: 0;
}

.mega-feature>* {
  position: relative;
  z-index: 1;
}

.mega-feature h4 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  color: var(--bone);
}

.mega-feature .eyebrow {
  color: rgba(246, 243, 238, 0.7);
}

.mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}

.mega-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mega-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  transition: background 200ms, color 200ms, padding 200ms;
}

.mega-col a:hover {
  background: var(--bone);
  color: var(--rust);
  padding-left: 14px;
}

.mega-col a .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.mega-side {
  border-left: 1px solid var(--hairline);
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mega-side .side-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  transition: background 200ms;
}

.mega-side .side-card:hover {
  background: var(--bone);
}

.mega-side .side-card .ph {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex: none;
}

.mega-side .side-card .t {
  font-size: 14px;
  font-weight: 500;
}

.mega-side .side-card .d {
  font-size: 12px;
  color: var(--muted);
}

.atlas-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CMS language components in header actions */
.atlas-header-actions .language,
.atlas-header-actions .languages,
.atlas-header-actions .lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  transition: border-color 200ms, color 200ms;
}

.atlas-header-actions .language:hover,
.atlas-header-actions .languages:hover,
.atlas-header-actions .lang-switcher:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.atlas-header-actions .language a,
.atlas-header-actions .languages a,
.atlas-header-actions .lang-switcher a {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 200ms;
}

.atlas-header-actions .language a.active,
.atlas-header-actions .language a:hover,
.atlas-header-actions .languages a.active,
.atlas-header-actions .languages a:hover,
.atlas-header-actions .lang-switcher a.active,
.atlas-header-actions .lang-switcher a:hover {
  color: var(--ink);
}

/* language ul in header actions */
.atlas-header-actions .language {
  list-style: none;
  margin: 0;
  padding: 0;
}

.atlas-header-actions .language li {
  display: inline-flex;
}

.atlas-header-actions .language img {
  border-radius: 2px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
}

.lang-switch:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  transition: background 200ms, border-color 200ms;
}

.icon-btn:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: transparent;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  margin: 4px auto;
  transition: transform 280ms var(--ease), opacity 200ms;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Mobile menu */
.atlas-mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--paper);
  padding: calc(var(--header-h, 76px) + 24px) var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 360ms var(--ease);
}

.atlas-mobile.is-open {
  transform: translateX(0);
}

.atlas-mobile ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.atlas-mobile .m-item>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.atlas-mobile .m-sub {
  padding-left: 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease);
}

.atlas-mobile .m-item.is-open .m-sub {
  max-height: 600px;
}

.atlas-mobile .m-sub a {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}

.atlas-mobile .m-foot {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 1024px) {

  .atlas-nav,
  .atlas-header-actions .lang-switch,
  .atlas-header-actions .icon-btn,
  .atlas-header-actions .language,
  .atlas-header-actions .languages,
  .atlas-header-actions .lang-switcher {
    display: none;
  }

  .menu-toggle {
    display: block;
  }
}

/* Spacer for fixed header */
.header-spacer {
  height: var(--header-h, 76px);
}

/* ---------- Top Strip (CMS optional component) ---------- */
.top-strip {
  background: var(--ink);
  color: rgba(246, 243, 238, 0.8);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.top-strip__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}

.top-strip a {
  color: inherit;
  transition: opacity 200ms;
}

.top-strip a:hover {
  opacity: 0.7;
}

.top-strip .dot {
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  margin: 0 14px;
  opacity: 0.4;
  vertical-align: middle;
}

.top-strip__right .languages,
.top-strip__right .lang-switcher {
  display: flex;
  gap: 4px;
  align-items: center;
}

.top-strip__right .languages a,
.top-strip__right .lang-switcher a {
  color: rgba(246, 243, 238, 0.5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 200ms;
}

.top-strip__right .languages a.active,
.top-strip__right .languages a:hover,
.top-strip__right .lang-switcher a.active,
.top-strip__right .lang-switcher a:hover {
  color: rgba(246, 243, 238, 1);
}

/* ==========================================================================
   SLIDER WIDGET (hero)
   ========================================================================== */
.w-slider {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}

.w-slider .slick-list,
.w-slider .slick-track {
  height: 100%;
}

.w-slider .slide {
  position: relative;
  min-height: clamp(560px, 92vh, 920px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  overflow: hidden;
}

.w-slider .slide-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.w-slider .slide-media .ph,
.w-slider .slide-media img,
.w-slider .slide-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-slider .slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 12, 0.0) 30%, rgba(14, 14, 12, 0.55) 75%, rgba(14, 14, 12, 0.85) 100%);
}

.w-slider .slide-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(56px, 9vw, 120px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}

.w-slider .slide-inner .eyebrow {
  color: rgba(246, 243, 238, 0.7);
}

.w-slider .slide-inner .eyebrow::before {
  background: rgba(246, 243, 238, 0.7);
}

.w-slider .slide-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 7.5vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin: 18px 0 24px;
  max-width: 14ch;
}

.w-slider .slide-title em {
  font-style: italic;
  color: var(--rust);
}

.w-slider .slide-desc {
  max-width: 46ch;
  font-size: 17px;
  color: rgba(246, 243, 238, 0.82);
  margin: 0 0 28px;
}

.w-slider .slide-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.w-slider .slide-side {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.6);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}

.w-slider .slide-side .row {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.w-slider .slide-side .row span:first-child {
  color: rgba(246, 243, 238, 0.4);
}

/* slick controls */
.w-slider .slick-dots {
  position: absolute;
  left: var(--gutter);
  bottom: 28px;
  display: flex !important;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 3;
}

.w-slider .slick-dots li button {
  width: 28px;
  height: 2px;
  background: rgba(246, 243, 238, 0.3);
  border: 0;
  font-size: 0;
  padding: 0;
  transition: background 240ms, width 240ms;
}

.w-slider .slick-dots li.slick-active button {
  background: var(--bone);
  width: 48px;
}

.w-slider .slider-nav {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.w-slider .slider-nav button {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(246, 243, 238, 0.08);
  border: 1px solid rgba(246, 243, 238, 0.22);
  color: var(--bone);
  display: grid;
  place-items: center;
  transition: background 200ms, border-color 200ms, transform 200ms;
}

.w-slider .slider-nav button:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}


/* ==========================================================================
   CATEGORY WIDGETS (grid + carousel)
   ========================================================================== */
.cat-card {
  display: block;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), border-color 240ms;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(14, 14, 12, 0.25);
  border-color: var(--hairline-strong);
}

.cat-card .media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.cat-card .media .ph,
.cat-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}

.cat-card:hover .media .ph,
.cat-card:hover .media img {
  transform: scale(1.05);
}

.cat-card .meta {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.cat-card .body {
  padding: 22px 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
}

.cat-card .body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 32px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

.cat-card .body p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-card .body .go {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 200ms, color 200ms, border-color 200ms;
}

.cat-card:hover .body .go {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.w-category-grid .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}


.product-detail .detail {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 50px;
}

.product-detail .detail .stars {
  font-size: 20px;
  width: fit-content;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--bs-gray-200);
}

.product-detail .left {
  min-width: 0;
}

.product-detail .product-slider {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--bs-gray-200);
}

.product-detail .product-slider:not(.slick-initialized) .item:not(:first-child) {
  display: none;
}

.product-detail .product-slider .item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

.product-detail .product-thumbnails {
  margin: 0 -6px;
  overflow: hidden;
}

.product-detail .product-thumbnails:not(.slick-initialized) {
  display: flex;
  gap: 12px;
  margin: 0;
}

.product-detail .product-thumbnails:not(.slick-initialized) .item {
  flex: 1 1 calc(25% - 9px);
}

.product-detail .product-thumbnails:not(.slick-initialized) .item:nth-child(n+5) {
  display: none;
}

.product-detail .product-thumbnails .item {
  cursor: pointer;
  margin: 5px;
}

.product-detail .product-thumbnails .item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--bs-gray-300);
  transition: 0.3s ease all;
  background: #fff;
}

.product-detail .product-thumbnails .slick-current img,
.product-detail .product-thumbnails .item:hover img {
  border-color: var(--primary-color);
}

.product-detail .product-thumbnails .slick-track {
  margin-left: 0;
}

.product-detail .fast-buttons {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  padding: 20px 0;
  border-width: 1px 0;
  border-color: var(--bs-gray-200);
  border-style: solid;
}


@media (max-width: 1024px) {
  .w-category-grid .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .w-category-grid .grid {
    grid-template-columns: 1fr;
  }
}

.w-category-carousel .slick-list {
  margin: 0 -10px;
}

.w-category-carousel .slick-slide {
  box-sizing: border-box;
  padding: 0 10px;
}

/* ==========================================================================
   CONTENT GRID / CAROUSEL / LIST
   ========================================================================== */
.item-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 240ms, transform 360ms var(--ease);
}

.item-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}

.item-card .media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
  background: var(--bone-deep);
}

.item-card .media .ph,
.item-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.item-card:hover .media .ph,
.item-card:hover .media img {
  transform: scale(1.04);
}

.item-card .tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--paper);
  padding: 6px 10px;
  border-radius: 999px;
}

.item-card .body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-card .body h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-card .body p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-card .body .foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hairline);
}

.item-card .body .foot .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.item-card .body .foot .go {
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.item-card:hover .body .foot .go {
  color: var(--rust);
}

.w-content-grid .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .w-content-grid .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.w-content-carousel .slick-list {
  margin: 0 -12px;
}

.w-content-carousel .slick-slide {
  box-sizing: border-box;
  padding: 0 12px;
}

/* Content list (horizontal row layout) */
.w-content-list .list {
  display: flex;
  flex-direction: column;
}

.list-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 2fr auto;
  gap: 32px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  position: relative;
  transition: padding 240ms var(--ease);
}

.list-row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.list-row:hover {
  padding-left: 12px;
}

.list-row .idx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.12em;
}

.list-row .title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.list-row .desc {
  color: var(--muted);
  font-size: 14px;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-row .go {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  transition: background 200ms, color 200ms, border-color 200ms;
}

.list-row:hover .go {
  background: var(--rust);
  color: var(--bone);
  border-color: var(--rust);
}

@media (max-width: 900px) {
  .list-row {
    grid-template-columns: 60px 1fr auto;
  }

  .list-row .desc {
    grid-column: 2 / 4;
  }
}

/* ==========================================================================
   ABOUT / LEFT-IMAGE / RIGHT-IMAGE / SLOGAN
   ========================================================================== */
.w-about .grid,
.w-leftimage .grid,
.w-rightimage .grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.w-rightimage .grid {
  grid-template-columns: 1fr 1.05fr;
}

.w-rightimage .grid .media-side {
  order: 2;
}

@media (max-width: 900px) {

  .w-about .grid,
  .w-leftimage .grid,
  .w-rightimage .grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .w-rightimage .grid .media-side {
    order: 0;
  }
}

.media-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bone-deep);
}

.media-frame .ph,
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame .frame-meta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(6px);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.media-stack {
  position: relative;
  aspect-ratio: 4 / 5;
}

.media-stack .a,
.media-stack .b {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.media-stack .a {
  inset: 0 30% 25% 0;
}

.media-stack .b {
  inset: 35% 0 0 35%;
  border: 6px solid rgba(var(--primary-rgb), 0.1);
  background: #fff;
}

.media-stack .a img,
.media-stack .b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--hairline);
}

.about-stats .stat .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.about-stats .stat .lbl {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 560px) {
  .about-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* Slogan widget — parallax hero */
.w-slogan {
  text-align: center;
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.w-slogan__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 12, 0.55);
  z-index: 1;
}

.w-slogan .eyebrow {
  color: rgba(246, 243, 238, 0.6);
}

.w-slogan .eyebrow::before {
  background: rgba(246, 243, 238, 0.4);
}

.w-slogan .slogan-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 56ch;
  margin: 16px auto 32px;
  color: rgba(246, 243, 238, 0.88);
}

.w-slogan .slogan-text em {
  font-style: italic;
  color: var(--rust);
}

.w-slogan .slogan-foot {
  display: inline-flex;
  gap: 24px;
  align-items: center;
}



/* ==========================================================================
   GALLERY / VIDEO / BANNER
   ========================================================================== */
.w-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 16px;
}

.w-gallery .g {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone-deep);
  cursor: zoom-in;
}

.w-gallery .g .ph,
.w-gallery .g img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
  position: absolute;
  inset: 0;
}

.w-gallery .g:hover .ph,
.w-gallery .g:hover img {
  transform: scale(1.05);
}

.w-gallery .g::after {
  content: "\2197";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 14px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms, transform 240ms var(--ease);
}

.w-gallery .g:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.w-gallery .g.s1 {
  grid-column: span 7;
  grid-row: span 3;
}

.w-gallery .g.s2 {
  grid-column: span 5;
  grid-row: span 2;
}

.w-gallery .g.s3 {
  grid-column: span 5;
  grid-row: span 2;
}

.w-gallery .g.s4 {
  grid-column: span 4;
  grid-row: span 2;
}

.w-gallery .g.s5 {
  grid-column: span 4;
  grid-row: span 2;
}

.w-gallery .g.s6 {
  grid-column: span 4;
  grid-row: span 2;
}

@media (max-width: 800px) {
  .w-gallery .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }

  .w-gallery .g {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

.w-video {
  position: relative;
}

.w-video .video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
}

.w-video .video-frame .ph,
.w-video .video-frame img,
.w-video .video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-video .video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 12, 0.2), rgba(14, 14, 12, 0.6));
}

.w-video .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 28px;
  z-index: 2;
  transition: transform 280ms var(--ease), background 240ms;
}

.w-video .play:hover {
  transform: translate(-50%, -50%) scale(1.05);
  background: var(--rust);
  color: var(--bone);
}

.w-video .video-caption {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 2;
  color: var(--bone);
}

.w-video .video-caption .t {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  margin: 0;
}

.w-video .video-caption .d {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(246, 243, 238, 0.78);
}

.w-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
  display: grid;
  align-items: center;
  padding: clamp(40px, 6vw, 80px);
  background: var(--ink);
  color: var(--bone);
}

.w-banner .ph {
  position: absolute;
  inset: 0;
  opacity: 0.7;
}

.w-banner .ph+* {
  position: relative;
}

.w-banner h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 16px;
  max-width: 18ch;
}

.w-banner p {
  color: rgba(246, 243, 238, 0.78);
  max-width: 50ch;
  margin: 0 0 24px;
}

/* ==========================================================================
   FAQ / CONTACT / FAST-CONTACT
   ========================================================================== */
.w-faq .faq-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

@media (max-width: 900px) {
  .w-faq .faq-grid {
    grid-template-columns: 1fr;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--hairline);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.12em;
}

.faq-item summary .icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  transition: transform 280ms var(--ease), background 240ms, color 240ms, border-color 240ms;
}

.faq-item[open] summary .icon {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.faq-item .answer {
  padding: 0 0 24px calc(12px + 36px);
  color: var(--ink-soft);
  max-width: 64ch;
}

.w-contact .grid,
.w-fastcontact .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

@media (max-width: 900px) {

  .w-contact .grid,
  .w-fastcontact .grid {
    grid-template-columns: 1fr;
  }
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.contact-info-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.contact-info-row .ic {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.contact-info-row .lb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-info-row .vl {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2px;
}

.form {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}

.form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.form .row.one {
  grid-template-columns: 1fr;
}

.form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.form .field {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 14px 14px;
  background: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  transition: border-color 200ms, background 200ms;
}

.form .field:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}

.form textarea.field {
  resize: vertical;
  min-height: 130px;
}

.form .actions {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.form .agree {
  font-size: 12px;
  color: var(--muted);
  max-width: 40ch;
}

.form {
  position: relative;
}

.contact__sent {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--radius-lg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
}

.contact__sent i {
  font-size: 42px;
  color: #4ade80;
}

.form.is-sent .contact__sent {
  display: flex;
}

@media (max-width: 600px) {
  .form .row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BLOG / EDITORJS / SEO
   ========================================================================== */
.blog-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  border: 0;
}

.blog-card .media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bone-deep);
  margin-bottom: 18px;
}

.blog-card .media .ph,
.blog-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.blog-card:hover .media .ph,
.blog-card:hover .media img {
  transform: scale(1.04);
}

.blog-card .meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.blog-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.w-blog .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .w-blog .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .w-blog .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* SEO widget */
.w-seo .seo-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
}

@media (max-width: 900px) {
  .w-seo .seo-grid {
    grid-template-columns: 1fr;
  }
}

.w-seo .seo-grid h2 {
  max-width: 14ch;
}

.w-seo .seo-grid .body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.w-seo .seo-grid .body h3 {
  margin-top: 28px;
}

/* EditorJS-style content */
.editor-content {
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.editor-content h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  margin: 1.4em 0 0.5em;
  color: var(--ink);
}

.editor-content h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  margin: 1.4em 0 0.4em;
  color: var(--ink);
}

.editor-content p {
  margin: 0 0 1.1em;
}

.editor-content blockquote {
  border-left: 2px solid var(--rust);
  padding: 4px 0 4px 24px;
  margin: 1.5em 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  color: var(--ink);
}

.editor-content ul,
.editor-content ol {
  padding-left: 22px;
  margin: 0 0 1.1em;
}

.editor-content li {
  margin-bottom: 0.4em;
}

.editor-content figure {
  margin: 1.8em 0;
}

.editor-content figure img {
  border-radius: var(--radius);
  width: 100%;
}

.editor-content figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

/* ==========================================================================
   PAGE COMPONENTS
   ========================================================================== */

/* Breadcrumb */
.bc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 18px 0;
}

.bc a {
  color: var(--muted);
}

.bc a:hover {
  color: var(--ink);
}

.bc .sep {
  opacity: 0.4;
}

.bc .here {
  color: var(--ink);
}

.bc-small {
  border-bottom: 1px solid var(--hairline);
  padding: 12px 0;
}

.bc-hero {
  padding: clamp(120px, 16vw, 220px) 0 clamp(56px, 8vw, 100px);
  background: var(--bone-deep);
  position: relative;
  overflow: hidden;
}

.bc-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin: 12px 0 0;
}

.bc-hero .lead {
  margin-top: 18px;
  max-width: 60ch;
}

/* Document list */
.doc-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}

.doc-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding 240ms var(--ease);
}

.doc-row:hover {
  padding-left: 12px;
}

.doc-row .ic {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--bone-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.doc-row .t {
  font-size: 16px;
  font-weight: 500;
}

.doc-row .d {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.doc-row .size {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.doc-row .dl {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  transition: background 200ms, color 200ms, border-color 200ms;
}

.doc-row:hover .dl {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.doc-list-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.doc-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color 200ms, transform 360ms var(--ease);
}

.doc-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.doc-card .ic {
  flex: none;
  width: 48px;
  height: 48px;
  background: var(--bone-deep);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}

.doc-card .t {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.doc-card .d {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .doc-list-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .doc-list-2 {
    grid-template-columns: 1fr;
  }
}

/* Map */
.w-map .map-frame {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bone-deep);
  border: 1px solid var(--hairline);
}

.w-map .map-frame .ph {
  width: 100%;
  height: 100%;
}

.w-map .marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--rust);
  color: var(--bone);
  display: grid;
  place-items: center;
  font-size: 14px;
  box-shadow: 0 8px 18px -4px rgba(184, 92, 58, 0.6);
}

.w-map .marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 18px;
  background: var(--rust);
}

/* ==========================================================================
   CMS PAGE COMPONENTS (pg-hero, pg-editor, pg-blog-detail, etc.)
   ========================================================================== */

/* Page Hero / Breadcrumb */
.pg-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--bone);
  overflow: hidden;
}

.pg-hero--full {
  min-height: clamp(480px, 65vh, 640px);
  align-items: center;
  text-align: center;
}

.pg-hero--sm {
  min-height: 0;
  background: var(--bone-deep);
  color: var(--ink);
  padding: clamp(50px, 6vw, 80px) 0;
  align-items: center;
}

.pg-hero--sm .pg-hero__inner {
  padding-bottom: 0;
}

.pg-hero--sm .pg-breadcrumb a {
  color: var(--muted);
}

.pg-hero--sm .pg-breadcrumb .sep {
  color: var(--muted);
}

.pg-hero--sm .pg-breadcrumb .current {
  color: var(--ink);
}

.pg-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 12, 0.3) 0%, rgba(14, 14, 12, 0.75) 100%);
  z-index: 1;
}

.pg-hero--sm .pg-hero__overlay {
  display: none;
}

.pg-hero__inner {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(40px, 6vw, 70px);
  width: 100%;
}

.pg-hero--full .pg-hero__inner {
  padding-bottom: 0;
}

.pg-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 16px 0 0;
}

.pg-hero--sm h1 {
  font-size: clamp(28px, 3.5vw, 48px);
}

.pg-hero__lede {
  max-width: 52ch;
  margin: 20px auto 0;
  font-size: clamp(15px, 1.1vw, 18px);
  opacity: 0.88;
  line-height: 1.55;
}

.pg-hero__cta {
  margin-top: 30px;
}

.pg-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pg-hero--full .pg-breadcrumb {
  justify-content: center;
}

.pg-breadcrumb a {
  opacity: 0.7;
  transition: opacity 200ms;
}

.pg-breadcrumb a:hover {
  opacity: 1;
}

.pg-breadcrumb .sep {
  opacity: 0.4;
}

.pg-breadcrumb .current {
  opacity: 1;
}

/* Page Sections */
.pg-section {
  padding: clamp(60px, 8vw, 100px) 0;
}

/* Page Editor */
.pg-editor {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}

.pg-editor h2,
.pg-editor h3,
.pg-editor h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 1.8em 0 0.6em;
}

.pg-editor h2 {
  font-size: clamp(26px, 2.5vw, 38px);
}

.pg-editor h3 {
  font-size: clamp(22px, 2vw, 30px);
}

.pg-editor p {
  margin: 0 0 1.2em;
  color: var(--ink-soft);
}

.pg-editor img {
  border-radius: var(--radius);
  margin: 1.5em 0;
}

.pg-editor a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pg-editor blockquote {
  border-left: 3px solid var(--rust);
  margin: 2em 0;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  color: var(--ink);
}

/* EditorJS Section (CMS) */
.pg-editorjs__section {
  padding: clamp(50px, 6vw, 90px) 0;
}

.pg-editorjs__section+.pg-editorjs__section {
  border-top: 1px solid var(--hairline);
}

.pg-editorjs__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  margin: 0 0 30px;
  text-wrap: balance;
}

.pg-editorjs__body {
  font-size: 16px;
  line-height: 1.7;
}

/* Blog Detail */
.pg-blog-detail {
  padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 10vw, 130px);
}

.pg-blog-detail__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.pg-blog-detail__cover img {
  width: 100%;
  display: block;
}

.pg-blog-detail__header {
  margin-bottom: 30px;
}

.pg-blog-detail__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.pg-blog-detail__tag {
  background: var(--bone-deep);
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--rust);
}

.pg-blog-detail__layout {
  max-width: 800px;
}

.pg-blog-detail__layout--has-toc {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: clamp(30px, 4vw, 60px);
  max-width: none;
  align-items: flex-start;
}

.pg-blog-detail__body {
  font-size: 16px;
  line-height: 1.75;
}

.pg-blog-detail__body h2,
.pg-blog-detail__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 1.8em 0 0.6em;
}

.pg-blog-detail__body p {
  margin: 0 0 1.2em;
  color: var(--ink-soft);
}

.pg-blog-detail__body img {
  border-radius: var(--radius);
  margin: 1.5em 0;
}

.pg-blog-detail__body a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pg-blog-detail__share {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 30px;
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
}

.pg-blog-detail__share span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pg-blog-detail__share a {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 200ms, color 200ms;
}

.pg-blog-detail__share a:hover {
  background: var(--ink);
  color: var(--bone);
}

.pg-blog-detail__sidebar {
  position: sticky;
  top: 110px;
  padding: 22px;
  background: var(--bone-deep);
  border-radius: var(--radius-lg);
}

.pg-blog-detail__sidebar ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pg-blog-detail__sidebar a {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  transition: color 200ms, padding-left 200ms var(--ease);
}

.pg-blog-detail__sidebar a:hover {
  color: var(--rust);
  padding-left: 6px;
}

/* Page Items Grid */
.pg-items {
  padding: clamp(40px, 5vw, 60px) 0 clamp(60px, 8vw, 100px);
}

.pg-items--related {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(60px, 8vw, 100px);
}

.pg-items__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pg-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bone-deep);
  transition: transform 360ms var(--ease);
}

.pg-item:hover {
  transform: translateY(-5px);
}

.pg-item__img {
  position: relative;
  overflow: hidden;
}

.pg-item__img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.pg-item:hover .pg-item__img img {
  transform: scale(1.06);
}

.pg-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 12, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
}

.pg-item:hover .pg-item__overlay {
  opacity: 1;
}

.pg-item__zoom {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.pg-item__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-item__body h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
  line-height: 1.15;
}

.pg-item__body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.pg-item__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 8px;
}

.pg-item__cta span {
  display: inline-block;
  transition: transform 300ms var(--ease);
}

.pg-item:hover .pg-item__cta span {
  transform: translateX(4px);
}

.pg-items__grid--featured {
  grid-auto-flow: dense;
}

.pg-item--featured {
  grid-column: span 2;
  grid-row: span 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  background: var(--ink);
  color: var(--paper);
}

.pg-item--featured .pg-item__img {
  min-height: 100%;
}

.pg-item--featured .pg-item__img img {
  height: 100%;
  aspect-ratio: auto;
}

.pg-item--featured .pg-item__body {
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 52px);
}

.pg-item--featured .pg-item__body h4 {
  font-size: clamp(30px, 4vw, 52px);
}

.pg-item--featured .pg-item__body p {
  color: rgba(255, 255, 255, .68);
  line-height: 1.65;
}

.pg-item__featured-label {
  color: var(--rust);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pg-item--featured .pg-item__cta {
  color: var(--rust);
}

/* Page Contact */
.pg-contact {
  padding: clamp(60px, 8vw, 100px) 0;
}

.pg-contact__form-wrap--center {
  max-width: 680px;
  margin: 0 auto;
}

.pg-contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
}

.pg-contact__grid--reverse {
  direction: rtl;
}

.pg-contact__grid--reverse>* {
  direction: ltr;
}

.pg-contact__info-wrap .eyebrow {
  margin-bottom: 20px;
  display: block;
}

.pg-contact__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
}

.pg-contact__social {
  margin-top: 30px;
}

.pg-contact__social .eyebrow {
  margin-bottom: 14px;
  display: block;
}

.pg-contact__map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 400px;
}

.pg-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
}

.pg-map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
}

.pg-form {
  display: grid;
  gap: 14px;
  background: var(--bone-deep);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  margin-top: 20px;
}

.pg-form input,
.pg-form select,
.pg-form textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color 200ms, background 200ms;
  text-transform: none;
  letter-spacing: 0;
}

.pg-form input:focus,
.pg-form select:focus,
.pg-form textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.pg-form textarea {
  resize: vertical;
}

.pg-form__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.pg-form__sent {
  display: none;
  flex-direction: column;
  position: absolute;
  inset: 0;
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--radius-lg);
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
}

.pg-form__sent i {
  font-size: 42px;
  color: #4ade80;
}

.pg-form.is-sent .pg-form__sent {
  display: flex;
}


/* Contact info lines (telefon / e-posta / adres) */
.contact__line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  transition: color 200ms var(--ease);
}

.pg-contact__list .contact__line:first-child {
  border-top: 1px solid var(--hairline);
}

.contact__line i {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  font-size: 18px;
  color: var(--rust);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.contact__line>div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contact__line strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__line span {
  font-size: 16px;
  color: var(--ink);
  word-break: break-word;
}

a.contact__line:hover {
  color: var(--rust);
}

a.contact__line:hover i {
  background: var(--rust);
  color: var(--bone);
  border-color: var(--rust);
}

a.contact__line:hover span {
  color: var(--rust);
}

/* Social icons (contact + footer ortak) */
.footer__socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer__socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--ink);
  font-size: 16px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.footer__socials a:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Form alanlari (label + input) */
.pg-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pg-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pg-form .form-field--full {
  grid-column: 1 / -1;
}

.pg-form .form-field>span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* KVKK onay kutusu */
.pg-form .chk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 58%;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}

.pg-form .chk input {
  width: auto;
  flex: none;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--rust);
}

/* Gonder butonu (koyu) */
.btn--dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn--dark:hover {
  background: var(--rust);
  border-color: var(--rust);
}

.btn--dark:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn__arrow {
  transition: transform var(--dur) var(--ease);
}

.btn--dark:hover .btn__arrow {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .pg-form .form-row {
    grid-template-columns: 1fr;
  }

  .pg-form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .pg-form .chk {
    max-width: 100%;
  }

  .btn--dark {
    justify-content: center;
  }
}


/* Page Gallery */
.pg-gallery {
  padding: clamp(40px, 5vw, 60px) 0;
}

.pg-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pg-gallery__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
}

.pg-gallery__item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.pg-gallery__item:hover img {
  transform: scale(1.06);
}

.pg-gallery__hover {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 12, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
  color: var(--bone);
  font-size: 20px;
}

.pg-gallery__item:hover .pg-gallery__hover {
  opacity: 1;
}

/* Page Documents */
.pg-docs {
  padding: clamp(40px, 5vw, 60px) 0;
}

.pg-docs__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pg-docs__item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 12px;
  border-top: 1px solid var(--hairline);
  transition: padding-left 300ms var(--ease), background 200ms;
}

.pg-docs__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.pg-docs__item:hover {
  padding-left: 24px;
  background: var(--bone-deep);
}

.pg-docs__icon {
  font-size: 22px;
  color: var(--rust);
}

.pg-docs__name {
  font-family: var(--font-display);
  font-size: 18px;
}

.pg-docs__action {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 200ms;
}

.pg-docs__item:hover .pg-docs__action {
  color: var(--rust);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.atlas-footer {
  background: var(--footer-color);
  color: rgba(246, 243, 238, 0.7);
  padding: clamp(64px, 8vw, 112px) 0 0;
}

.atlas-footer h5 {
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.atlas-footer a {
  color: rgba(246, 243, 238, 0.7);
  transition: color 200ms;
}

.atlas-footer a:hover {
  color: var(--bone);
}

.atlas-footer .footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(246, 243, 238, 0.12);
}

.atlas-footer .brand-block .name {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.atlas-footer .brand-block p {
  color: rgba(246, 243, 238, 0.62);
  font-size: 14px;
  max-width: 36ch;
}

.atlas-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.atlas-footer .newsletter input {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid rgba(246, 243, 238, 0.18);
  color: var(--bone);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}

.atlas-footer .newsletter input::placeholder {
  color: rgba(246, 243, 238, 0.4);
}

.atlas-footer .newsletter button {
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  background: var(--bone);
  color: var(--ink);
  border: 0;
  border-radius: 8px;
  font-weight: 500;
  transition: background 200ms, color 200ms;
}

.atlas-footer .newsletter button:hover {
  background: var(--rust);
  color: var(--bone);
}

.atlas-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.45);
}

.atlas-footer .social {
  display: flex;
  gap: 8px;
}

.atlas-footer .social a {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(246, 243, 238, 0.18);
  display: grid;
  place-items: center;
  transition: background 200ms, color 200ms, border-color 200ms;
}

.atlas-footer .social a:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

@media (max-width: 1000px) {
  .atlas-footer .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 560px) {
  .atlas-footer .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .atlas-footer .footer-bottom {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
}

/* ==========================================================================
   STICKY CONTACT
   ========================================================================== */
.sticky-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.sticky-contact .sc-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 18px 36px -16px rgba(14, 14, 12, 0.4);
  transition: background 200ms, transform 240ms var(--ease);
}

.sticky-contact .sc-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}

.sticky-contact .sc-pill:hover {
  background: var(--rust);
  transform: translateY(-2px);
}

.sticky-contact .sc-icons {
  display: flex;
  gap: 8px;
}

.sticky-contact .sc-icons a {
  width: 44px;
  height: 44px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px -10px rgba(14, 14, 12, 0.25);
  border: 1px solid var(--hairline);
  transition: background 200ms, color 200ms, transform 240ms var(--ease);
}

.sticky-contact .sc-icons a:hover {
  background: var(--ink);
  color: var(--bone);
  transform: translateY(-2px);
}

/* CMS sticky-contact (list-based variant) */
#sticky-contact {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 88;
  list-style: none;
  margin: 0;
  padding: 0;
}

#sticky-contact>li>a {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--rust);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

#sticky-contact>li>ul {
  position: absolute;
  bottom: 62px;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#sticky-contact>li:hover>ul {
  display: flex;
}

#sticky-contact>li>ul li a {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#sticky-contact>li>ul li a::before {
  content: attr(data-text);
  position: absolute;
  right: 54px;
  white-space: nowrap;
  background: var(--ink);
  color: var(--bone);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}

#sticky-contact>li>ul li a:hover::before {
  opacity: 1;
}

/* ==========================================================================
   COOKIE BAR
   ========================================================================== */
.cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--bone);
  z-index: 100;
  border-radius: 0;
  border: 0;
}

.cookies .card-body {
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cookies .card-text {
  margin: 0;
  font-size: 13px;
  color: rgba(246, 243, 238, 0.8);
}

/* ==========================================================================
   REVEAL (scroll-triggered)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll margin for anchored headings */
h2[id],
h3[id] {
  scroll-margin-top: 120px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .pg-items__grid {
    grid-template-columns: 1fr 1fr;
  }

  .pg-item--featured {
    grid-row: auto;
  }

  .pg-blog-detail__layout--has-toc {
    grid-template-columns: 1fr;
  }

  .pg-blog-detail__sidebar {
    position: static;
  }

  .pg-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pg-contact__grid {
    grid-template-columns: 1fr;
  }

  .pg-contact__grid--reverse {
    direction: ltr;
  }

  .top-strip__left {
    display: none;
  }
}

@media (max-width: 640px) {
  .pg-items__grid {
    grid-template-columns: 1fr;
  }

  .pg-item--featured {
    grid-column: auto;
    display: flex;
  }

  .pg-item--featured .pg-item__img img {
    height: auto;
    aspect-ratio: 4/3;
  }

  .pg-item--featured .pg-item__body {
    padding: 24px;
  }

  .pg-item--featured .pg-item__body h4 {
    font-size: 28px;
  }

  .pg-gallery__grid {
    grid-template-columns: 1fr 1fr;
  }

  .pg-hero h1 {
    font-size: clamp(28px, 8vw, 48px);
  }

  #sticky-contact {
    bottom: 0;
    right: 0;
    left: 0;
  }

  #sticky-contact>li {
    display: none;
  }

  #sticky-contact>li>ul {
    display: flex !important;
    flex-direction: row;
    position: static;
    background: var(--ink);
    padding: 10px var(--gutter);
    gap: 0;
    justify-content: space-around;
  }

  #sticky-contact>li>ul li a {
    background: transparent;
    box-shadow: none;
    flex-direction: column;
    gap: 2px;
    width: auto;
    height: auto;
    font-size: 18px;
  }

  #sticky-contact>li>ul li a::before {
    position: static;
    opacity: 1;
    background: transparent;
    padding: 0;
    font-size: 10px;
  }

}


@media (max-width: 768px) {

  .section-head {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 28px;
    margin-bottom: 32px;
  }

  .w-slider .slide-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .w-slider .slide-side {
    text-align: left;
  }

  .w-slider .slide-side .row {
    justify-content: flex-start;
  }

  .w-slogan {
    background-attachment: scroll;
  }

  .sticky-contact .sc-pill {
    background: var(--primary-color);
  }

  .sticky-contact .sc-pill .dot {
    color: var(--passive-color);
  }

  .pg-hero {
    min-height: 200px;
  }

  .pg-items__grid,
  .w-content-grid .grid {
    gap: 10px;
  }

  .pg-item__body,
  .item-card .body {
    padding: 15px;
  }

  .pg-item__body h4 {
    font-size: 18px;
  }

  .pg-item__body p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-detail .detail {
    grid-template-columns: repeat(1, 1fr);
  }

  footer .footer-logo {
    width: auto;
    height: 35px;
  }

}

/* ==========================================================================
   IMAGE PLACEHOLDERS (kept generic; replaced by get_image() in production)
   ========================================================================== */
.ph {
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), #fff);
  position: relative;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  text-align: center;
}