/* NAZ V3 shared header, footer and page style for subpages. Generated by build-subpages.js */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bebas-neue-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2"); }
:root {
  --dn-ink: #1A1715; --dn-cream: #F5F3EF; --dn-cream-2: #EBE7E0; --dn-white: #FFFEFF;
  --dn-amber: #DB860E; --dn-amber-2: #DC9F0C; --dn-gold: #F2B01E; --dn-amber-dark: #D27907;
  --dn-grey: #9CA2AE; --dn-muted: #6B7280; --naz-rust: #B14A2A; --naz-sage: #3F6B4A; --dn-header-h: 76px;
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* old page tokens mapped onto the V3 palette */
  --paper: #F5F3EF; --paper-deep: #EBE7E0; --cream: #FFFEFF; --cream-warm: #FFFEFF;
  --line: rgba(26, 23, 21, .12); --ink: #1A1715; --muted: #5E5852; --muted-strong: #3E3934;
  --gold: #F2B01E; --nav: #1A1715; --green: #1A1715;
}
/* Part: hero (loader, nav, hero). Prefix dnh-. Port of Jiro "Solo Plumber Service - Dunny" header. */

.dnh-loader,
.dnh-loader *,
.dnh-header,
.dnh-header *,
.dnh-hero,
.dnh-hero * {
  box-sizing: border-box;
}

.dnh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html.dnh-lock {
  overflow: hidden;
}

/* ------------------------------------------------------------------ */

/* SITE NAVIGATION                                                     */
/* ------------------------------------------------------------------ */
.dnh-header {
  position: relative;
  z-index: 60;
  color: var(--dn-cream);
  background: rgba(26, 23, 21, 0.97);
}

.js-anim .dnh-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: none;
}

.dnh-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 23, 21, 0.97);
  pointer-events: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.js-anim .dnh-header:not(.is-scrolled)::before {
  background: rgba(26, 23, 21, 0);
}

.js-anim .dnh-header.is-scrolled::before {
  background: rgba(26, 23, 21, 0.9);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.dnh-header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 76px;
  padding: 6px calc(max(var(--naz-gutter, 12px), (100% - var(--naz-frame, 1680px)) / 2) + var(--naz-inset, 16px));
}

.dnh-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  border-radius: 8px;
}

.dnh-brand img {
  display: block;
  height: 60px;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

/* Mobile toggle: hidden by default, shown (with JS) at 820px and below. */
.dnh-header .nav-toggle {
  display: none;
  position: relative;
  z-index: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--dn-cream);
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease;
}

.dnh-header .nav-toggle:hover {
  background: rgba(0, 0, 0, 0.55);
}

.dnh-header .nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.dnh-header .nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dnh-header .nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.dnh-header .nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Desktop menu (Dunny: white 80 links, amber underline grows on hover) */
.dnh-header .m-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: stretch;
  gap: 0;
  font-weight: 400;
  font-size: 15px;
}

.dnh-nav-inner {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
}

.dnh-drawer-head {
  display: none;
}

.dnh-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto 0 28px;
  padding: 0;
  list-style: none;
}

.dnh-link-item {
  margin: 0;
  padding: 0;
}

.dnh-header .m-nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  transform: none;
}

.dnh-header .m-nav a:hover {
  color: #fff;
  transform: none;
}

.dnh-links a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.03em;
}

.dnh-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1.5px;
  background: var(--dn-amber-2);
  transition: width 0.3s ease;
}

.dnh-links a:hover::after,
.dnh-links a:focus-visible::after {
  width: 100%;
}

.dnh-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dnh-header .m-nav a.nav-billing {
  padding: 6px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
}

.dnh-header .m-nav a.nav-billing:hover {
  text-decoration-color: var(--dn-amber-2);
}

.dnh-header .m-nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 2px 22px 0;
  border: 0;
  border-radius: 8px;
  background: var(--dn-amber-2);
  color: var(--dn-ink) !important;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(221, 159, 12, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

.dnh-header .m-nav a.nav-cta:hover {
  background: #e4a712;
  transform: scale(1.03);
}

.dnh-header .m-nav a.nav-cta:active {
  transform: scale(0.97);
}

/* Visible focus */
.dnh-header a:focus-visible,
.dnh-header button:focus-visible,
.dnh-hero a:focus-visible,
.dnh-hero button:focus-visible {
  outline: 3px solid var(--dn-gold);
  outline-offset: 3px;
}

.dnh-backdrop {
  display: none;
}

/* Nav entrance (header items fade down in after the loader) */
.js-anim .dnh-header:not(.is-in) .dnh-link-item,
.js-anim .dnh-header:not(.is-in) .dnh-actions {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  animation: dnh-safe 0.01s linear 3.5s forwards;
}

.dnh-link-item,
.dnh-actions {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--i, 5) * 0.06s),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--i, 5) * 0.06s);
}

/* The compact nav holds to 1151. At 1024 the inset doubles to 80 while the
   nav would otherwise grow, and the pair leaves no room to keep the pill on
   the centre line without it reaching the actions. */
@media (min-width: 821px) and (max-width: 1151px) {
  .dnh-links {
    gap: 16px;
    margin-left: 12px;
  }
  .dnh-links a,
  .dnh-header .m-nav a.nav-billing {
    font-size: 14px;
  }
  .dnh-actions {
    gap: 12px;
  }
  .dnh-header .m-nav a.nav-cta {
    padding: 2px 16px 0;
    font-size: 20px;
  }
  .dnh-brand img {
    height: 52px;
  }
}

@media (min-width: 1152px) {
  .dnh-links {
    gap: 32px;
    margin-left: 44px;
  }
  .dnh-links a,
  .dnh-header .m-nav a.nav-billing {
    font-size: 17px;
  }
  .dnh-header .m-nav a.nav-cta {
    padding: 2px 26px 0;
    font-size: 24px;
    min-height: 49px;
  }
}

/* Mobile and tablet drawer (Dunny slide-out) */
@media (max-width: 820px) {
  .js-anim .dnh-header .nav-toggle {
    display: inline-flex;
  }

  /* No JS: the menu stays visible as a wrapped row under the logo. */
  .dnh-header .m-nav {
    flex: 1 1 100%;
  }

  .dnh-nav-inner {
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .dnh-links {
    flex-wrap: wrap;
    margin: 0;
    gap: 4px 18px;
  }

  .dnh-actions {
    flex-wrap: wrap;
  }

  .dnh-brand img {
    height: 52px;
  }

  .js-anim .dnh-header .m-nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    width: 82vw;
    max-width: 340px;
    flex: none;
    padding: 24px;
    background: #181415;
    color: var(--dn-cream);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
  }

  .js-anim .dnh-header .m-nav.is-open {
    display: flex;
    animation: dnh-drawer-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .js-anim .dnh-header.is-open .dnh-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .js-anim .dnh-nav-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    min-height: 100%;
  }

  .js-anim .dnh-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dnh-drawer-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.02em;
    color: #fff;
  }

  .dnh-drawer-title b {
    font-weight: 400;
    color: var(--dn-amber-2);
  }

  .dnh-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .dnh-drawer-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .js-anim .dnh-links {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
  }

  .js-anim .dnh-links a {
    justify-content: space-between;
    padding: 8px 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.88);
  }

  .js-anim .dnh-links a::after {
    content: "\2192";
    position: static;
    width: auto;
    height: auto;
    background: none;
    color: rgba(255, 255, 255, 0.4);
  }

  .js-anim .dnh-links a:hover {
    color: var(--dn-amber-2);
  }

  .js-anim .dnh-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .js-anim .dnh-header .m-nav a.nav-billing {
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
  }

  .js-anim .dnh-header .m-nav a.nav-cta {
    min-height: 50px;
    font-size: 22px;
  }

  .js-anim .dnh-header:not(.is-in) .dnh-link-item,
  .js-anim .dnh-header:not(.is-in) .dnh-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@keyframes dnh-drawer-in {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Header gutters follow the site frame in end.css (gutter + inset) */

/* ------------------------------------------------------------------ */

/* At the top of the page the bar sits inside the hero card, so drop it below the card's top edge */
.dnh-header { --dnh-top: 12px; }
@media (min-width: 640px) { .dnh-header { --dnh-top: 16px; } }
@media (min-width: 768px) { .dnh-header { --dnh-top: 20px; } }
.js-anim .dnh-header-inner { transition: padding-top 0.3s ease; }
.js-anim .dnh-header:not(.is-scrolled) .dnh-header-inner { padding-top: calc(var(--dnh-top) + 6px); }

/* Desktop: the hero card fits the first screen, and the NORTHERN ARIZONA DESIGN
   wordmark takes whatever height is left, so it is never cut off at the bottom. */
@media (min-width: 1024px) {
  .dnh-card { min-height: 560px; height: calc(100svh - 40px); }
  .dnh-inner {
    height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "lead lead side"
      "tiles tiles tiles"
      "name name name";
    align-content: stretch;
    row-gap: clamp(14px, 3svh, 32px);
    padding-top: clamp(88px, 12svh, 108px);
  }
  .dnh-h1 { font-size: clamp(52px, min(8.6vw, 12.5svh), 116px); }
  .dnh-name { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .dnh-name-w { height: 100%; min-height: 0; }
  .dnh-name svg { width: 100%; height: 100%; }
}
@media (min-width: 1280px) {
  .dnh-inner {
    grid-template-areas:
      "lead lead side"
      "tiles tiles ."
      "name name name";
  }
}

/* ------------------------------------------------------------------ */
/* HERO v4: one screen tall, a centred column over the film, and the   */
/* wordmark along the bottom edge. Appended last so it wins over the   */
/* earlier grid-template-areas rules.                                  */
/* ------------------------------------------------------------------ */

/* Nav: symmetric side columns so the links sit on the card's own axis */
@media (min-width: 821px) {
  .dnh-header-inner {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare 1fr floors at the item's min content,
       so the wider side steals from the narrower one and the middle column
       slides off the centre line. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }
  .dnh-brand {
    grid-column: 1;
    justify-self: start;
  }
  .dnh-header .m-nav,
  .dnh-nav-inner {
    display: contents;
  }
  .dnh-links {
    grid-column: 2;
    justify-self: center;
    margin: 0;
    padding: 7px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .dnh-actions {
    grid-column: 3;
    justify-self: end;
    margin: 0;
  }
}

.dnh-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: calc(100dvh - 2 * var(--naz-gutter, 12px));
  min-height: 560px;
}

/* The flat wash is light so the valley reads; the pool only darkens
   under the centre column, which keeps the corners of the frame open. */
.dnh-shade-a { background: rgba(26, 23, 21, 0.18); }
.dnh-shade-b { background: radial-gradient(118% 62% at 50% 34%, rgba(26, 23, 21, 0.48) 0%, rgba(26, 23, 21, 0.38) 52%, rgba(26, 23, 21, 0) 86%); }
.dnh-shade-c { background: linear-gradient(to bottom, rgba(26, 23, 21, 0.6), rgba(26, 23, 21, 0) 26%, rgba(26, 23, 21, 0) 52%, rgba(26, 23, 21, 0.72)); }

.dnh-bg img,
.dnh-video {
  object-position: 50% 44%;
}

/* A portrait crop of a 16:9 plate pushes the figure out of frame, so
   bias the window left until he is back in it. */
@media (max-width: 767px) {
  .dnh-bg img,
  .dnh-video { object-position: 31% 46%; }
}

/* Centre column. Horizontal padding stays with the site frame block. */
.dnh-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  container-type: inline-size;
  min-height: 0;
  grid-template-areas: none;
  padding-top: clamp(84px, 11svh, 104px);
  padding-bottom: clamp(52px, 17svh, 196px);
  row-gap: 0;
}

.dnh-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.dnh-cap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 5px 15px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dnh-shield {
  width: 27px;
  height: auto;
  flex: none;
}

.dnh-chip {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: #fff;
  white-space: nowrap;
}

/* The line measures 12.64 times its font size, so sizing it off the
   container lands it on one line at every desktop width without a hard
   nowrap: a fallback face just wraps instead of running off the card. */
.dnh-h1 {
  margin: clamp(14px, 2.6svh, 28px) 0 0;
  max-width: none;
  font-size: clamp(36px, 11.5cqw, 60px);
  line-height: 0.92;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .dnh-h1 { font-size: min(7.6cqw, 112px); }
}

.dnh-sub {
  margin: clamp(14px, 2.4svh, 24px) 0 0;
  max-width: 560px;
  width: auto;
  font-size: clamp(15px, 1.9svh, 18px);
  line-height: 1.45;
  text-align: center;
}

.dnh-ctas {
  margin-top: clamp(20px, 3.4svh, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.dnh-btn-amber {
  background: var(--dn-amber-2);
  color: #241A05;
  border-color: transparent;
}

.dnh-btn-amber:hover {
  background: #F0B01C;
}

.dnh-facts {
  margin-top: clamp(16px, 2.8svh, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 1.7svh, 15px);
  letter-spacing: -0.1px;
  color: #fff;
}

@media (min-width: 640px) {
  .dnh-facts {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
  }
}

.dnh-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  text-decoration: none;
}

.dnh-fact svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--dn-amber-2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dnh-fact b { font-weight: 700; }

a.dnh-fact,
.dnh-fact-btn {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
}

a.dnh-fact:hover,
.dnh-fact-btn:hover {
  text-decoration-color: var(--dn-amber-2);
}

/* Wordmark along the bottom edge, the one fixed point of the hero */
/* position and z-index are load bearing. .dnh-bg is absolute at z-index 0, so
   a static sibling paints underneath it. While the entrance transform runs the
   block gets its own stacking context and sits on top, then drops behind the
   film the moment the transform ends, and the 72 percent gradient at the
   bottom swallows the rule and DESIGN while the big letters survive it. */
.dnh-name {
  position: relative;
  z-index: 1;
  grid-area: auto;
  height: auto;
  min-height: 0;
  grid-template-rows: clamp(38px, 12.5svh, 152px) auto;
  padding: 0 var(--naz-inset, 16px) clamp(10px, 1.6svh, 18px);
  /* overrides the earlier overflow:hidden on this block. The words are svgs
     scaled with meet so they cannot spill, and clipping here would silently
     eat the DESIGN rule. */
  overflow: visible;
}

.dnh-name-w {
  height: 100%;
  min-height: 0;
}

/* overflow:hidden is load bearing. The viewBox is 200 tall and the glyphs are
   278, so with the earlier overflow:visible the words paint outside their own
   box; once Bebas Neue swaps in for the fallback they grow and cover the rule
   and DESIGN below. Clipping to the box keeps that row the words' own. */
.dnh-name svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dnh-name-sub {
  margin-top: clamp(4px, 0.8svh, 10px);
}

/* The second rule mirrors the first, so the gold builds in to DESIGN
   and falls away again, with DESIGN centred under the words. */
.dnh-name-sub .dnh-rule + .dnh-name-design + .dnh-rule {
  background: linear-gradient(to left, rgba(254, 244, 234, 0.55), rgba(220, 159, 12, 0.9));
}

/* Only the left rule has to clear the pause control, but both rules are
   flex:1 and split what is left equally, so the right one gives up the
   matching width or the whole strip rides right of the centre line. */
.dnh-card.has-video .dnh-name-sub .dnh-rule:first-child {
  margin-left: max(0px, calc(72px - var(--naz-inset, 16px)));
}

.dnh-card.has-video .dnh-name-sub .dnh-rule:last-child {
  margin-right: max(0px, calc(72px - var(--naz-inset, 16px)));
}

/* At the narrow end the brand, the pill and the actions only just fit across
   the bar, so the pill gives up padding rather than reach the buttons. */
@media (min-width: 821px) and (max-width: 1023px) {
  .dnh-links {
    padding: 6px 12px;
    gap: 13px;
  }
}

/* ==========================================================================
   NAZ V3 "end" part: gallery (dng), motion (dnm), process (dnp),
   call to action (dnc), footer (dnf). Ported from Jiro Dunny.
   AA adjusted amber for text and white-on-amber buttons: #B35F00 / #A85C00.
   ========================================================================== */

.dng-section, .dnm-outer, .dnp-section, #nstart.final-cta, .dnf-footer {
  --dnx-btn: #B35F00;
  --dnx-btn-h: #9A5300;
  --dnx-amber-text: #A85C00;
  box-sizing: border-box;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.dng-section *, .dng-section *::before, .dng-section *::after,
.dnm-outer *, .dnm-outer *::before, .dnm-outer *::after,
.dnp-section *, .dnp-section *::before, .dnp-section *::after,
#nstart.final-cta *, #nstart.final-cta *::before, #nstart.final-cta *::after,
.dnf-footer *, .dnf-footer *::before, .dnf-footer *::after { box-sizing: border-box; }

.dng-sr, .dnf-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}


/* ==========================================================================
   FOOTER  (Dunny Footer)
   ========================================================================== */
.dnf-footer {
  position: relative; width: 100%; overflow: hidden; background: #0D0E12; color: #fff;
  padding: 60px 16px 28px; display: flex; flex-direction: column;
}
.dnf-heading {
  margin: 0 0 40px; width: 100%; text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: 44px; line-height: .93; letter-spacing: -.01em; text-transform: uppercase; color: #fff;
}
.dnf-line { display: block; }
.dnf-line-2 { color: var(--dn-gold); }
.dnf-dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dnf-w { display: inline-block; white-space: nowrap; }
.dnf-l { display: inline-block; }

.dnf-grid { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; }
.dnf-brandrow { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.dnf-logo { width: 110px; height: auto; display: block; filter: brightness(0) invert(1); }
.dnf-badge { height: 70px; width: auto; display: block; }
.dnf-about { margin: 20px 0 0; max-width: 420px; font-size: 16px; line-height: 1.55; color: #9CA2AE; }
.dnf-title { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--dn-gold); }
.dnf-rule { height: 1px; margin: 12px 0 18px; background: rgba(255,255,255,.12); }
.dnf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.82); }
.dnf-list a { color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; }
.dnf-list a:hover { color: var(--dn-gold); }
.dnf-list a:focus-visible, .dnf-links a:focus-visible { outline: 2px solid var(--dn-gold); outline-offset: 3px; border-radius: 4px; }
.dnf-list a.dnf-contact {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px; border-radius: 999px;
  background: #17191C; border: 1px solid rgba(242,176,30,.4); box-shadow: 0 0 24px rgba(243,176,30,.18);
  font-weight: 600; font-size: 16px; color: #fff; transition: border-color .3s, box-shadow .3s, color .3s;
}
.dnf-list a.dnf-contact::after { content: "\2192"; display: inline-block; transition: transform .2s; }
.dnf-list a.dnf-contact:hover { border-color: var(--dn-gold); box-shadow: 0 0 36px rgba(243,176,30,.32); color: var(--dn-gold); }
.dnf-list a.dnf-contact:hover::after { transform: translateX(4px); }

.dnf-mark {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; overflow: hidden;
  margin: 44px 0 20px; padding: 8px 0; opacity: .4; transition: opacity .5s; pointer-events: none; user-select: none;
}
.dnf-mark:hover { opacity: .75; }
.dnf-mark span {
  display: block; font-family: var(--font-display); text-transform: uppercase; font-size: min(22vw, 300px); line-height: .84;
  background: linear-gradient(180deg, #F5F3EF 0%, rgba(245,243,239,0) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
  transition: transform 1.2s cubic-bezier(.16,1,.28,1), opacity 1.2s cubic-bezier(.16,1,.28,1);
}
.dnf-mark .dnf-mark-r { transition-delay: .08s; }
.js-anim .dnf-mark .dnf-mark-l:not(.is-in) { transform: translateX(-32%); opacity: 0; }
.js-anim .dnf-mark .dnf-mark-r:not(.is-in) { transform: translateX(32%); opacity: 0; }

.dnf-bottom {
  position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px;
}
.dnf-copy { margin: 0; font-size: 14px; line-height: 1.4; text-align: center; color: #9CA2AE; }
.dnf-copy strong { font-weight: 700; color: #C9CDD6; }
.dnf-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; font-size: 14px; }
.dnf-links a { color: #9CA2AE; text-decoration: none; transition: color .2s; }
.dnf-links a:hover { color: #fff; }

/* additive letter animations (JS arms them) */
.dnf-heading.dnf-armed .dnf-l { transition: opacity .35s ease-out calc(.1s + var(--i, 0) * .022s); }
.dnf-heading.dnf-armed:not(.is-in) .dnf-l { opacity: .04; transition-duration: .3s; transition-delay: 0s; }
.dnf-copy.dnf-armed .dnf-l { transition: opacity .25s ease-out calc(.05s + var(--i, 0) * .018s); }
.dnf-copy.dnf-armed:not(.is-in) .dnf-l { opacity: .1; transition-delay: 0s; }

@media (min-width: 640px) {
  .dnf-footer { padding: 80px 32px 36px; }
  .dnf-heading { font-size: 60px; margin-bottom: 52px; }
  .dnf-grid { gap: 48px; }
  .dnf-bottom { flex-direction: row; padding-top: 24px; }
  .dnf-copy { text-align: left; }
}
@media (min-width: 768px) {
  .dnf-footer { padding-left: 48px; padding-right: 48px; }
  .dnf-heading { font-size: 72px; }
  .dnf-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; }
}
@media (min-width: 1024px) {
  .dnf-footer { padding: 64px 80px 32px; }
  .dnf-heading { font-size: 84px; margin-bottom: 64px; }
  .dnf-copy, .dnf-links { font-size: 16px; }
}
@media (min-width: 1280px) {
  .dnf-heading { font-size: 94px; }
}

/* ==========================================================================
   SITE FRAME  (one width for every section)
   Dark panels run edge to edge with square corners (Kyle 2026-11-02: inset rounded
   cards looked detached). Every section's content still shares one inner edge:
   --naz-inset from the screen edge, centred in --naz-frame on very wide screens.
   --naz-gutter (space outside a panel) and --naz-radius stay defined at 0 for the
   header and hero rules that read them.
   ========================================================================== */
:root { --naz-frame: 1680px; --naz-gutter: 0px; --naz-inset: 16px; --naz-radius: 0px; }
@media (min-width: 640px)  { :root { --naz-inset: 32px; } }
@media (min-width: 768px)  { :root { --naz-inset: 40px; } }
@media (min-width: 1024px) { :root { --naz-inset: 80px; } }

/* panels */
.dnh-hero, .dns, .dnm-outer, #nstart.final-cta { padding: 0; }
.dnh-card, .dns-inner, .dnm-inner, .dnc-inner {
  width: 100%; max-width: none; margin-left: 0; margin-right: 0; border-radius: 0; box-shadow: none;
}
.dnh-inner, .dns-inner, .dnm-inner, .dnc-inner {
  padding-left: calc(max(0px, (100% - var(--naz-frame)) / 2) + var(--naz-inset));
  padding-right: calc(max(0px, (100% - var(--naz-frame)) / 2) + var(--naz-inset));
}
.dnf-footer {
  width: auto; border-radius: 0; margin: 0;
  padding-left: calc(max(0px, (100% - var(--naz-frame)) / 2) + var(--naz-inset));
  padding-right: calc(max(0px, (100% - var(--naz-frame)) / 2) + var(--naz-inset));
}
.dns-wrap, .dnf-grid, .dnf-bottom { max-width: none; }

/* open sections: content lines up with the content inside the panels */
.dna-stick, .dna-bottom, .dnw-stick, .dng-section, .dnp-section {
  padding-left: calc(max(0px, (100% - var(--naz-frame)) / 2) + var(--naz-inset));
  padding-right: calc(max(0px, (100% - var(--naz-frame)) / 2) + var(--naz-inset));
}
.dng-wrap, .dnp-layout { max-width: none; }



/* ---------- Subpage overrides ---------- */
body.dnh-subpage { background: var(--dn-cream) !important; color: var(--dn-ink); font-family: var(--font-body) !important; }
.js-anim body:is(.dnh-subpage, .dnh-picker) { padding-top: var(--dn-header-h); }
:is(.dnh-subpage, .dnh-picker) .dnh-header::before { background: rgba(26, 23, 21, .97) !important; }
.js-anim :is(.dnh-subpage, .dnh-picker) .dnh-header:not(.is-scrolled) .dnh-header-inner { padding-top: 6px; }
.dnh-subpage .dnf-mark span { opacity: 1; transform: none; }

.dnh-subpage :where(h1, h2, h3):not(.dnf-heading) {
  font-family: var(--font-display) !important; font-weight: 400 !important;
  text-transform: uppercase; letter-spacing: -.005em; line-height: 1.02;
}
.dnh-subpage h1 { font-size: clamp(44px, 7vw, 84px) !important; }
.dnh-subpage main h2 { font-size: clamp(30px, 4vw, 46px) !important; }
.dnh-subpage main h3 { font-size: clamp(22px, 2.6vw, 28px) !important; }
.dnh-subpage main :where(p, li, label, input, select, textarea, button, .eyebrow) { font-family: var(--font-body); }
.dnh-subpage .eyebrow {
  display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px;
  background: var(--dn-cream-2); border: 1px solid var(--dn-amber); color: var(--dn-ink);
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; text-transform: none;
}

.dnh-subpage .button, .dnh-subpage a.button, .dnh-subpage .btn {
  font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 21px !important;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 8px !important; border: 0 !important;
}
.dnh-subpage .button-primary, .dnh-subpage a.button-primary, .dnh-subpage .btn-primary {
  background: var(--dn-gold) !important; color: var(--dn-ink) !important; box-shadow: 0 6px 18px rgba(219, 134, 14, .28) !important;
}
.dnh-subpage :is(.button-primary, .btn-primary):hover { background: #F7BE3E !important; }
.dnh-subpage .button-secondary, .dnh-subpage .button-premium, .dnh-subpage .btn-secondary {
  background: var(--dn-ink) !important; color: #fff !important;
}
.dnh-subpage :where(input, select, textarea) { border-radius: 10px; }
.dnh-subpage :where(input, select, textarea):focus { outline: 3px solid var(--dn-gold); outline-offset: 1px; }
.dnh-subpage .back-top { background: var(--dn-ink) !important; color: var(--dn-gold) !important; }
.dnh-subpage .status-icon {
  background: radial-gradient(circle at 35% 30%, #fff, var(--dn-gold) 42%, var(--dn-amber-dark) 100%);
  box-shadow: 0 0 0 4px rgba(242, 176, 30, .2);
}

/* ---------- Style picker: top header instead of the side rail, V3 palette on the app chrome ---------- */
body.dnh-picker {
  --paper: #F5F3EF; --paper-deep: #EBE7E0; --cream: #F5F3EF; --line: #E2DDD5;
  --ink: #1A1715; --muted: #5E5852; --muted-strong: #3E3934;
  --rust: #D27907; --rust-dark: #A85F05; --gold: #F2B01E; --green: #1A1715; --nav: #1A1715;
  --shadow: 0 18px 40px rgba(26, 23, 21, .10);
  --focus: 0 0 0 3px #FFFEFF, 0 0 0 6px #1A1715;
  background: var(--dn-cream);
}
body.dnh-picker::after { display: none; }
.dnh-picker.picker-page { grid-template-columns: minmax(0, 1fr); }
.dnh-picker :is(.picker-hero, .picker-shell, .site-footer) { font-family: var(--font-body); }
.dnh-picker .picker-hero { background: transparent; border-bottom: 0; }
.dnh-picker .picker-hero-inner { padding: 14px 0 8px; }
.dnh-picker .picker-hero h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(36px, 3.6vw, 50px); letter-spacing: 0; line-height: 1;
}
.dnh-picker .step-panel h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 2.6vw, 34px); letter-spacing: .005em; line-height: 1;
}
.dnh-picker .step-panel { background: var(--dn-white); border-color: var(--dn-cream-2); }
.dnh-picker .btn {
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 8px;
}
.dnh-picker .btn-primary { color: var(--dn-ink); background: var(--dn-gold); box-shadow: 0 6px 18px rgba(219, 134, 14, .28); }
.dnh-picker .btn-primary:hover { background: #F7BE3E; }
.dnh-picker .choice-card.is-selected { box-shadow: 0 0 0 1px var(--rust), 0 14px 28px rgba(210, 121, 7, .16); }
.dnh-picker .site-footer { background: var(--dn-ink); border-top: 0; }
.dnh-picker .footer-brand {
  font-family: var(--font-display); font-weight: 400; font-size: 24px;
  letter-spacing: .02em; text-transform: uppercase;
}
.dnh-picker .footer-links a:hover, .dnh-picker .footer-links a:focus-visible { color: var(--dn-gold); }

/* Live preview card: never over the picker. Wide screens keep a lane for it on the left
   (the old side rail spot); narrower screens give it its own row under the page, as phones do. */
@media (min-width: 1200px) {
  .dnh-picker :is(.picker-shell, .picker-hero-inner) {
    width: auto; max-width: 1400px;
    margin-left: max(232px, calc((100% - 1400px) / 2));
    margin-right: max(12px, calc((100% - 1400px) / 2));
  }
}
@media (min-width: 721px) and (max-width: 1199px) {
  body.dnh-picker.preview-teaser-active {
    display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh; min-height: 0; overflow: hidden;
  }
  body.dnh-picker.preview-teaser-active .page-main {
    grid-column: 1; grid-row: 2; height: auto; min-height: 0; overflow: hidden;
  }
  body.dnh-picker.preview-teaser-active .page-main > main {
    height: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0;
  }
  body.dnh-picker.preview-teaser-active .preview-teaser {
    grid-column: 1; grid-row: 3; position: static; width: auto; margin: 8px 12px 12px;
  }
  .dnh-picker .preview-teaser-inner { flex-direction: row; align-items: center; padding: 10px 14px; }
  .dnh-picker .preview-teaser-thumb { display: none; }
  .dnh-picker .preview-teaser-copy { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}