/* Experimental presentation for dedkarkas.pro. */
.pro-hero,.pro-bath {position:relative; isolation:isolate; display:grid; align-items:center; border:2px solid var(--ink); border-radius:var(--radius-lg); background:#382317; color:white; box-shadow:var(--shadow);}
.home-page .pro-hero {
  min-height:0; grid-template-columns:minmax(0,1fr); gap:clamp(10px,1.3vw,18px);
  padding:clamp(14px,1.65vw,26px); text-align:center;
}
.pro-hero__photos,.pro-hero__photos img,.pro-bath video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.pro-hero__photos,.pro-bath video {border-radius:inherit; overflow:hidden;}
.pro-hero__photos {background-position:center; background-size:cover;}
.pro-hero__photos img {
  object-position:center 50%;
  opacity:0;
  transition:opacity 1.8s ease;
  animation:pro-hero-zoom 8.5s ease-in-out infinite alternate paused;
}
.pro-hero__photos img.is-current {opacity:1; animation-play-state:running;}
.pro-hero__photos img[data-hero-pending] {visibility:hidden;}
@keyframes pro-hero-zoom {
  from {transform:scale(1);}
  to {transform:scale(1.10);}
}
.pro-hero::before,.pro-bath::before {content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;}
.pro-hero::before {background:radial-gradient(ellipse at center,#1b100bcf,#1b100b9e 75%,#1b100bbb);}
.home-page .pro-hero .hero-copy {
  width:100%; max-width:1180px; margin:0 auto; padding:0; gap:10px; min-height:0;
  grid-template-rows:none; justify-items:center; align-content:center; text-align:center;
  background:transparent; border:0; box-shadow:none; overflow:visible;
}
.home-page .pro-hero .hero-copy::before,.home-page .pro-hero .hero-copy::after {display:none;}
.home-page .pro-hero .hero-kicker-row,.home-page .pro-hero .button-row {justify-content:center; justify-items:center; width:100%;}
.home-page .pro-hero .hero-title--home-main {
  width:100%; max-width:none; margin:0; display:block; text-align:center; text-wrap:balance;
  color:white; font-size:clamp(2.55rem,5.45vw,5.35rem); line-height:.95;
}
.home-page .pro-hero .hero-title__line--combo {display:contents;}
.pro-hero__place {color:#ffd3a6; font-weight:800;}
.pro-bath {min-height:300px; padding:clamp(22px,5vw,58px); text-align:center; background:#382317 url('./bath-poster-v1.webp') center/cover;}
.pro-bath::before {background:radial-gradient(ellipse at center,#231107dc,#23110787);}
.pro-bath h1 {color:white; font:900 clamp(2rem,5.1vw,5.15rem)/.96 var(--font-heading); margin:.24em 0;}
.pro-bath p {max-width:58ch; margin:12px auto 0; line-height:1.45;}
@media (prefers-reduced-motion:reduce) {
  .pro-hero__photos img,.pro-hero__photos img.is-current {transition:none; animation:none; transform:none;}
}
.pro-steps {position:relative;}
.pro-steps h2 {scroll-margin-top:135px;}
.pro-steps ol {list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; margin:20px 0 0;}
.pro-steps li {border:2px solid var(--ink); border-radius:18px; padding:14px 17px; box-shadow:4px 5px 0 var(--ink); background:var(--surface);}
.pro-steps li:nth-child(6n+2),.pro-steps li:nth-child(6n+4) {background:#eef2e4;}
.pro-steps li:nth-child(6n+3),.pro-steps li:nth-child(6n+5) {background:#f7e8d6;}
.pro-steps li span {color:#75391e; font:900 1.15rem var(--font-heading);}
.pro-steps li h3 {margin:2px 0 4px; font:900 1.3rem/1.06 var(--font-heading);}
.pro-steps li p {margin:0; font-size:.9rem; line-height:1.35;}
.home-page .pro-hero .pro-hero__catalog {
  border-color:#fff1dd; color:#fffaf3;
  box-shadow:3px 4px 0 #160c07,0 0 0 1px #2b180e;
}
.home-page .pro-hero .pro-hero__catalog:is(:hover,:focus-visible) {background:#fff1dd; color:#321b0d;}
.pro-benefits {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%;
  max-width:1120px; list-style:none; padding:0; margin:0 auto;
}
.pro-benefits li {
  position:relative; display:grid; align-content:center; gap:4px; padding:10px 16px;
  border:2px solid var(--ink); border-radius:18px; box-shadow:4px 5px 0 var(--ink);
  background:linear-gradient(#fffaf1,#f0e4d4); color:#29180f;
}
.pro-benefits li:first-child {background:linear-gradient(#56301b,#2d160a); color:#fff7ee;}
.pro-benefits li:last-child {background:linear-gradient(#d5e8be,#e6efd8);}
.pro-benefits strong {font:900 clamp(1rem,1.65vw,1.42rem)/1.05 var(--font-heading); text-wrap:balance;}
.pro-benefits p {margin:0; font-size:.84rem; line-height:1.28;}

@media (min-width:1024px) {
  .home-page .section--hero {padding-bottom:clamp(26px,3.3vw,56px);}
  .home-page .pro-hero {
    width:calc(100% - clamp(32px,4.5vw,88px)); max-width:none;
    min-height:clamp(470px,calc(100svh - 165px),820px);
    grid-template-rows:1fr auto; gap:clamp(16px,2.2vw,42px);
    padding:clamp(28px,3.5vw,66px) clamp(24px,4vw,75px) clamp(26px,3vw,54px);
  }
  .home-page .pro-hero .hero-copy {max-width:1560px;}
  .pro-benefits {max-width:1420px; gap:16px;}
}

/* Pro uses ornaments on sections only. */
:is(.panel,.article-card,.project-card,.package-card)::after {content:none;}
[data-catalog-root] > .project-grid {margin-top:12px;}
.project-card {overflow:visible; isolation:isolate;}
.project-card__media {isolation:isolate; z-index:0; border-top-left-radius:inherit; border-top-right-radius:inherit;}
@media (hover:hover) {
  .project-card:not(:has(.project-card__image--secondary)):is(:hover,:focus-within) .project-card__image--primary {opacity:1;}
}
.project-card__media--pro-mark::after {
  content:""; position:absolute; pointer-events:none; z-index:3;
  right:clamp(12px,1.4vw,24px); bottom:clamp(10px,1.3vw,20px);
  width:clamp(76px,24%,158px); aspect-ratio:2.6;
  background:url('../branding/dedkarkas-logo-horizontal.png') right top / contain no-repeat;
  filter:drop-shadow(0 0 2px #fff9ed);
}
/* Pro spruce ornaments: also applied after the older Pro stylesheet. */
body :is(.project-card,.article-feature,.article-card,.package-card,.pro-benefits li,
  .pro-steps li,.blog-card-simple,.article-link,.article-sidecard,.photo-jump-card,
  .house-frame,.project-hero .project-media,.blog-landing-card,.article-hero-card,
  .thanks-hero,.article-shell:has(> h1),.dk-game__card,.footer-map-card,
  .footer-contact-card,.two-up:has(> #lead-form) > .panel,
  [data-lead-section] .two-up > .panel)::before,
body :is(.project-card,.article-feature,.article-card,.package-card,.pro-benefits li,
  .pro-steps li,.blog-card-simple,.article-link,.article-sidecard,.photo-jump-card,
  .project-hero .project-media,#lead-form.panel)::after {content:none;}

body :is(.pro-hero,.pro-bath,.dk-game__card,.article-showcase,.footer-map-card,
  .footer-contact-card,.blog-landing-card,.article-hero-card,.thanks-hero,
  .article-shell:has(> h1),.house-frame,
  .two-up:has(> #lead-form) > .panel:first-child:not(#lead-form)) {
  position:relative;
}

body :is(.pro-hero,.pro-bath,.dk-game__card,.article-showcase,.footer-map-card,
  .footer-contact-card,.blog-landing-card,.article-hero-card,.thanks-hero,
  .article-shell:has(> h1),.house-frame,
  .two-up:has(> #lead-form) > .panel:first-child:not(#lead-form))::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:-6px var(--spruce-right,-3px) auto var(--spruce-left,auto);
  transform:var(--spruce-mirror,none);
  width:clamp(72px,21vw,105px);
  height:auto;
  aspect-ratio:480 / 372;
  border:0;
  border-radius:0;
  box-shadow:none;
  pointer-events:none;
  background:url('./ornament-spruce-v2.webp') right top / contain no-repeat;
}

body :is(.house-frame,.dk-game__card,.footer-map-card,.pro-bath,.blog-landing-card) {
  --spruce-right:auto;
  --spruce-left:-3px;
  --spruce-mirror:scaleX(-1);
}

@media (min-width:768px) {
  body :is(.pro-hero,.pro-bath,.dk-game__card,.article-showcase,.footer-map-card,
    .footer-contact-card,.blog-landing-card,.article-hero-card,.thanks-hero,
    .article-shell:has(> h1),.house-frame,
    .two-up:has(> #lead-form) > .panel:first-child:not(#lead-form))::after {
    width:clamp(114px,12vw,187px);
  }

  body :is(.pro-hero,.article-showcase,.pro-bath)::after {
    width:clamp(172px,16.5vw,277px);
  }
}
/* Match the hard right and bottom shadow on the other framed blocks. */
.home-page .pro-hero,.pro-bath {box-shadow:var(--shadow-card);}

@media (max-width:767px) {
  .home-page .pro-hero .hero-copy {padding-top:22px;}
}

@media (min-width:1024px) {
  body.home-page .article-showcase:not(#lead-form)::before,
  body.home-page .footer-contact-card:not(#lead-form)::before {
    content:"";
    position:absolute;
    top:auto;
    bottom:-57px;
    left:20%;
    right:auto;
    width:52px;
    height:57px;
    border:0;
    box-shadow:none;
    transform:rotate(-16deg);
    pointer-events:none;
    background:url('./pine-cone-oval.webp') center / contain no-repeat;
  }

  body.home-page .footer-contact-card:not(#lead-form)::before {
    inset:-53px auto auto 12%;
    width:45px;
    height:49px;
    transform:rotate(16deg);
  }
}
/* End Pro spruce ornaments. */

.home-page .pro-hero .pro-benefits li:first-child :is(strong,p) {color:#fff;}

.project-hero .project-media.project-media--gallery-first {overflow:visible;}
.project-hero .project-media--gallery-first .gallery-showcase__viewer {border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
:where(.project-hero) .gallery-showcase__nav {z-index:6;}

.blog-card-simple__media,.article-link__media {border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.article-hero-card__media {overflow:hidden; border-radius:0 0 var(--radius-xl) var(--radius-xl);}
@media (min-width:768px) {
  .article-hero-card__media {border-radius:0 var(--radius-xl) var(--radius-xl) 0;}
}
.article-shell:where(:has(> h1)) {
  width:min(860px,calc(100% - 24px)); padding:24px clamp(17px,4vw,46px);
  border:2px solid var(--ink); border-radius:var(--radius-lg); background:var(--surface);
}

@media (max-width:900px) {
  .mobile-nav[open] .mobile-nav__panel {
    position:fixed; top:var(--pro-menu-top,75px); bottom:auto;
    right:max(14px,env(safe-area-inset-right)); left:auto;
    width:min(340px,calc(100vw - 28px)); margin:0;
    max-height:calc(100dvh - var(--pro-menu-top,75px) - max(14px,env(safe-area-inset-bottom)));
    padding:10px 12px 14px; gap:7px; overflow:auto; overscroll-behavior:contain;
  }
  .mobile-nav[open] .mobile-nav__contacts {gap:7px; padding-top:7px;}
  .mobile-nav[open] .mobile-nav__contact[href^="mailto:"] {background:linear-gradient(#f6a34c,#eb7b1f); color:var(--ink);}
  .mobile-nav[open] .social-links--mobile {margin-top:3px;}
  .mobile-nav[open] .mobile-nav__panel>a,.mobile-nav[open] .mobile-nav__contact {min-height:40px;}
  body:has(.mobile-nav[open]) .cookie-notice {visibility:hidden;}
  .site-header:has(.mobile-nav[open]) {backdrop-filter:none;}
}
@media (max-width:767px) {
  .home-page .pro-hero {border-radius:23px; padding-inline:10px;}
  .home-page .pro-hero .hero-title--home-main {font-size:clamp(1.55rem,7.65vw,3.35rem); line-height:.91;}
  .home-page .pro-hero .hero-copy {gap:10px;}
  .home-page .pro-hero .button-row {gap:7px;}
  .home-page .pro-hero .button-row .button {min-height:40px; font-size:.9rem;}
  .pro-hero__photos img {object-position:center;}
  .pro-benefits {grid-template-columns:minmax(0,1fr); gap:8px;}
  .pro-benefits li {padding:8px 16px;}
  .pro-steps ol {grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px;}
  .pro-steps li {padding-inline:10px; padding-block-end:10px;}
  .pro-steps li:nth-child(n) {background:var(--surface);}
  .pro-steps li:nth-child(3n+2) {background:#eef2e4;}
  .pro-steps li:nth-child(3n) {background:#f7e8d6;}
  .pro-steps li h3 {font-size:1.04rem;}
  .pro-steps li p {font-size:.78rem;}
  .pro-bath {min-height:235px;}
  .home-page .pro-hero .button-row > .button--hero-accent {display:none;}
  .project-page .section:has(.comparison-columns,.bath-package) .section-head {
    justify-items:center;
    text-align:center;
  }
  .project-page .section:has(.comparison-columns,.bath-package) .section-head > *,
  .project-page .section:has(.comparison-columns,.bath-package) .section-copy {text-align:center;}
  .project-page :is(.comparison-columns,.bath-package) .comparison-column__list :is(dt,dd),
  .project-page .comparison-columns .comparison-column__title,
  .project-page .pro-bath-package-copy {text-align:center;}
}

@media (min-width:1024px) {
  :is(.section--ded-karkas-game,#game) [data-ded-karkas-game] .dk-game__shell {max-width:990px;}
  :is(.section--ded-karkas-game,#game) [data-ded-karkas-game] .dk-game__layout {
    gap:clamp(14px,2vw,28px);
  }
  :is(.section--ded-karkas-game,#game) [data-ded-karkas-game] .dk-game__heading {padding:14px 10px;}
  :is(.section--ded-karkas-game,#game) [data-ded-karkas-game] .dk-game__title {font-size:clamp(2rem,3vw,2.6rem);}
  :is(.section--ded-karkas-game,#game) [data-ded-karkas-game] .dk-game__subtitle {font-size:1rem; margin-top:10px;}
  :is(.section--ded-karkas-game,#game) [data-ded-karkas-game] .dk-game__status {padding-top:10px;}
  :is(.section--ded-karkas-game,#game) [data-ded-karkas-game] .dk-game__moisture {min-height:60px;}
}

/* The background of the page stays visible until a card photo is ready. */
.project-card, .project-card__media {background:transparent;}
.project-card__body {background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,244,.98));}
.pro-card-photos .project-card__media .project-card__image:not([data-card-ready]) {visibility:hidden;}
.pro-card-photos .project-card__media--pro-mark:not(:has(.project-card__image--primary[data-card-ready]))::after {visibility:hidden;}
@media (hover:hover) {
  .project-card:not(:has(.project-card__image--secondary[data-card-ready])):is(:hover,:focus-within) .project-card__image--primary {opacity:1;}
}

/* Pro project detail and catalog controls. */
.project-page .project-meta-grid .project-meta-card,
.project-page .finance-note--project {
  box-shadow:4px 4px 0 #2d1a10;
}

.pro-catalog-columns {display:none;}

@media (min-width:1024px) {
  [data-pro-catalog-columns] > .catalog-filter-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .pro-catalog-columns {
    display:flex;
    align-items:center;
    gap:5px;
    margin:0 0 0 auto;
    padding:0;
    border:0;
    white-space:nowrap;
  }

  .pro-catalog-columns button {
    min-width:44px;
    min-height:36px;
    padding:3px 8px;
    border:1px solid var(--ink);
    border-radius:10px;
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:.875rem;
    font-weight:800;
    cursor:pointer;
  }

  .pro-catalog-columns button[aria-pressed="true"] {
    background:var(--accent);
    color:var(--ink);
  }

  [data-catalog-root][data-pro-catalog-columns="3"] {
    width:calc(100% - clamp(32px,4.5vw,88px));
    max-width:none;
  }

  [data-pro-catalog-columns="3"] > .project-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(12px,1.4vw,24px);
  }

  [data-pro-catalog-columns="3"] .project-card__body {
    padding-inline:clamp(8px,1.1vw,18px);
  }

  [data-pro-catalog-columns="3"] :is(.chip-row--split,.chip-row__base,.chip-row__metrics) {
    flex-wrap:nowrap;
    gap:clamp(3px,.4vw,8px);
  }

  [data-pro-catalog-columns="3"] .chip-row--split .chip {
    min-height:32px;
    padding:0 clamp(4px,.55vw,9px);
    gap:4px;
    font-size:clamp(.7rem,1.05vw,.94rem);
    white-space:nowrap;
  }

  [data-pro-catalog-columns="3"] .chip--metric .chip__icon {
    width:clamp(11px,1.3vw,17px);
    height:clamp(11px,1.3vw,17px);
    flex:none;
  }
}
@media (min-width:1024px) and (max-width:1350px) {
  [data-pro-catalog-columns="3"] .chip-row--five .chip {
    padding-inline:4px;
  }

  [data-pro-catalog-columns="3"] .chip-row--five .chip__icon {
    display:none;
  }
}
/* End Pro project detail and catalog controls. */