.site-header {
  --nav-surface:#0e1310;
  --nav-raised:#202b23;
  --nav-edge:#3b4c40;
  --nav-ink:#edf5ed;
  --nav-accent:#b5f49e;
  min-height:88px;
  gap:clamp(6px,1vw,15px);
  padding:8px var(--gutter);
  background:var(--nav-surface);
  border-bottom:1px solid var(--nav-edge);
}
.site-header .brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:44px;
  min-height:44px;
}
.site-header .brand img { width:57px; height:61px; }
.site-header #navigation > a,
.site-header #navigation summary,
.site-header .dropdown a {
  display:flex;
  align-items:center;
  min-height:44px;
  max-width:none;
  padding:8px 12px;
  border-radius:7px;
  color:var(--nav-ink);
  font-size:14px;
  line-height:1.25;
  text-decoration:none;
  transition:color .18s ease,background-color .18s ease;
}
.site-header #navigation > a:is(:hover,:focus-visible,[aria-current]),
.site-header #navigation summary:is(:hover,:focus-visible,.how-nav-current),
.site-header .nav-folder[data-expanded="true"] summary,
.site-header .nav-folder:has(.dropdown [aria-current]) summary,
.site-header .dropdown a:is(:hover,:focus-visible,[aria-current]) {
  background:var(--nav-raised);
  color:var(--nav-accent);
}
.site-header #navigation [aria-current] { box-shadow:inset 0 -2px var(--nav-accent); }
.site-header #navigation summary > span {
  display:block;
  flex:0 0 7px;
  height:7px;
  margin:0 2px 3px;
  border:solid currentColor;
  border-width:0 1.5px 1.5px 0;
  font-size:0;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.site-header .nav-folder[data-expanded="true"] summary > span { transform:translateY(3px) rotate(225deg); }
.site-header .nav-folder .dropdown {
  background:var(--nav-surface);
  border:1px solid var(--nav-edge);
  border-radius:12px;
  padding:6px;
  box-shadow:0 14px 34px #0007;
}
.site-header .dropdown a:hover { transform:none; }
.site-header :is(a,button,summary):focus-visible,
.site-main .button:focus-visible,
.how-faq :is(summary,a):focus-visible,
.how-footer-faq:focus-visible {
  outline:2px solid #a9f492;
  outline-offset:2px;
}
.site-header .how-language {
  gap:0;
  padding:2px;
  border:1px solid var(--nav-edge);
  border-radius:9px;
}
.site-header .how-language a { min-width:40px; min-height:44px; opacity:1; color:#c6d3c8; border-radius:6px; }
.site-header .how-language a[aria-current] { color:var(--nav-accent); background:var(--nav-raised); box-shadow:none; }
.site-header .menu-toggle { width:44px; height:44px; border-radius:8px; background:var(--nav-raised); }
.site-header .menu-toggle span { transition:transform .2s ease; }
.site-header .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }
@media(min-width:801px) {
  .site-header #navigation { gap:3px; padding:3px; border:1px solid var(--nav-edge); border-radius:11px; }
  .site-header #navigation > a,.site-header #navigation summary { white-space:nowrap; }
  .site-header .nav-folder .dropdown { top:calc(100% + 10px); left:0; width:272px; }
}
@media(max-width:800px) {
  .site-header .brand img { width:48px; height:51px; }
  .site-header .how-language { margin-left:auto; }
  .site-header #navigation {
    position:absolute; top:calc(100% + 5px); inset-inline:var(--gutter);
    width:auto; max-height:calc(100dvh - 102px); overflow:auto;
    padding:8px; border:1px solid var(--nav-edge); border-radius:12px;
    background:var(--nav-surface); box-shadow:0 14px 34px #0007;
  }
  .site-header .nav-folder .dropdown { width:auto; margin:0 0 5px 10px; box-shadow:none; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header #navigation :is(a,summary,summary > span),.site-header .menu-toggle span { transition:none; }
}
:is(.site-main,.site-header,.how-faq) .button {
  border-radius: 12px 12px 12px 3px;
  transition: transform .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
:is(.site-main,.site-header,.how-faq) .button:is(:hover,:focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #0b5420;
}
:is(.site-main,.site-header,.how-faq) .button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.how-footer-faq { display:inline-flex; align-items:center; gap:.65rem; min-height:44px; color:#b9f6a5; }
.how-footer-faq:hover { text-decoration: underline; }
.how-faq {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(24px,5vw,84px);
  align-items:start;
  padding:clamp(54px,9vw,148px) var(--gutter);
  background:#101511;
  color:#f5f5f0;
}
.how-faq-heading p { color:#a9f492; font-weight:650; margin-bottom:16px; }
.how-faq-heading h1,.how-timeline h2 { font-size:clamp(36px,5vw,76px); text-wrap:balance; line-height:1; }
.how-faq-heading div { color:#c0cdc2; margin-top:20px; max-width:34ch; }
.how-faq-drawer {
  display:grid;
  gap:8px;
  padding:clamp(8px,1.2vw,16px);
  background:#19221c;
  border:1px solid #34473a;
  border-radius:22px;
}
.how-faq-drawer details {
  background:#222e25;
  color:#f0f5ee;
  border:1px solid transparent;
  border-radius:15px;
  transition:background-color .2s ease,border-color .2s ease;
}
.how-faq-drawer details[open] { background:#29382d; border-color:#506855; }
.how-faq-drawer summary {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:62px; padding:14px 18px; cursor:pointer; list-style:none;
  font-size:1.06rem; font-weight:600; border-radius:14px;
}
.how-faq-drawer summary::-webkit-details-marker { display:none; }
.how-faq-drawer summary:hover { color:#bcf2ad; }
.how-faq-drawer summary:focus-visible { outline-offset:-4px; }
.how-faq-drawer summary span {
  display:grid; place-items:center; flex:0 0 32px; height:32px;
  border-radius:50%; background:#34463a; color:#bcf2ad;
}
.how-faq-drawer summary span::before {
  content:""; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .28s cubic-bezier(.2,.75,.25,1);
}
.how-faq-drawer details[open] summary span::before { transform:translateY(2px) rotate(225deg); }
.how-faq-answer { min-height:0; overflow:hidden; }
.how-faq-drawer details p { margin:0; padding:0 18px 20px; max-width:62ch; color:#d5e1d6; }
.how-faq-drawer > .button { justify-self:start; margin:6px; }
@media(prefers-reduced-motion:no-preference) {
  @supports selector(details::details-content) {
    .how-faq-drawer details::details-content {
      display:grid;
      grid-template-rows:0fr;
      opacity:0;
      overflow:hidden;
      transition:grid-template-rows .3s cubic-bezier(.2,.75,.25,1), opacity .18s ease, content-visibility .3s allow-discrete;
    }
    .how-faq-drawer details[open]::details-content { grid-template-rows:1fr; opacity:1; }
  }
}
@media(prefers-reduced-motion:reduce) {
  .how-faq-drawer details,.how-faq-drawer summary span::before { transition:none; }
}
#zLUPMR.affordable { grid-template-columns:minmax(0,1fr); min-height:0; }
#zLUPMR .affordable-copy { width:min(100%,78ch); margin-inline:auto; }
.how-timeline { background:#111913; color:#f5f5f0; }
.how-timeline h2 { margin-bottom:clamp(32px,6vw,88px); }
.how-timeline ol {
  position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  list-style:none; counter-reset:stage; margin:0; padding:0;
}
.how-timeline ol::before,.how-timeline ol::after {
  content:""; position:absolute; inset:22px 0 auto; height:2px;
  background:#4a6050; pointer-events:none;
}
.how-timeline ol::after { background:#a9f492; transform:scaleX(var(--how-timeline-progress,1)); transform-origin:left; }
.how-timeline li { counter-increment:stage; position:relative; padding:0 clamp(12px,2vw,30px) 0 0; }
.how-timeline li::before {
  content:counter(stage,decimal-leading-zero); position:relative; z-index:1; display:grid; place-items:center;
  width:46px; height:46px; margin-bottom:22px; border:1px solid #65866b; border-radius:50%;
  background:#17251a; color:#b9f6a5; font-variant-numeric:tabular-nums; font-weight:650;
}
.how-timeline h3 { margin-bottom:8px; font-size:clamp(18px,1.6vw,25px); }
.how-timeline li p { color:#c7d1c8; }
@media(max-width:1050px) {
  .how-timeline ol { grid-template-columns:1fr; gap:28px; }
  .how-timeline ol::before,.how-timeline ol::after { inset:22px auto 22px 22px; width:2px; height:auto; }
  .how-timeline ol::after { transform:scaleY(var(--how-timeline-progress,1)); transform-origin:top; }
  .how-timeline li { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:start; gap:17px; padding:0; }
  .how-timeline li::before { margin:0; }
}
@media(max-width:800px) {
  .how-faq { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header #navigation a,.site-header .nav-folder summary,
  :is(.site-main,.site-header,.how-faq) .button { transition:none; transform:none; }
}

@media(min-width:801px) and (max-width:1000px) {
  .site-header #navigation > a,.site-header #navigation summary { padding-inline:6px; font-size:13px; }
  .site-header > .button { min-width:0; padding-inline:12px; }
}[data-page="cnc-diamond-cut"] .site-header { border-bottom:1px solid var(--nav-edge); }