/* ================================================================
   V42 HEADER — rebuilt from scratch around the original Duo Craft logo
   ================================================================ */
:root{
  --v42-ink:#0b0e0b;
  --v42-ink2:#141813;
  --v42-paper:#ffffff;
  --v42-brass:#d7c49d;
  --v42-muted:#aaa69e;
}

/* Hide every old header/mobile-nav system. */
.dc-header,.dc-mobile-nav,.dc-menu{display:none!important}

.v42-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:2000;
  height:106px;
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  background:var(--v42-ink);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 34px rgba(0,0,0,.14);
}

/* The original logo gets its own full-height brand zone. No plaque, no fake badge. */
.v42-brand{
  position:relative;
  display:flex;
  align-items:center;
  padding:0 46px;
  background:#fff;
  border-right:1px solid rgba(11,14,11,.12);
  overflow:hidden;
}
.v42-brand::after{
  content:"";
  position:absolute;
  right:-1px;
  top:0;
  bottom:0;
  width:4px;
  background:var(--v42-brass);
}
.v42-brand img{
  display:block;
  width:250px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:none;
}

.v42-nav-zone{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 235px;
  align-items:center;
  gap:34px;
  padding:0 42px 0 38px;
  background:linear-gradient(90deg,#0b0e0b 0%,#101410 100%);
}
.v42-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:44px;
  min-width:0;
}
.v42-nav a{
  position:relative;
  padding:13px 0;
  color:#a8a49d;
  font:600 14px/1 var(--body);
  text-decoration:none;
  white-space:nowrap;
  transition:color .22s ease;
}
.v42-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:5px;
  height:1px;
  background:var(--v42-brass);
  transition:right .24s ease;
}
.v42-nav a:hover,.v42-nav a.active{color:#f4efe7}
.v42-nav a:hover::after,.v42-nav a.active::after{right:0}

.v42-cta{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 19px;
  background:var(--v42-brass);
  color:#101310;
  border:1px solid var(--v42-brass);
  font:700 13px/1 var(--body);
  text-decoration:none;
  transition:transform .22s ease,background .22s ease;
}
.v42-cta:hover{transform:translateY(-2px);background:#e0cfaa}
.v42-cta i{position:relative;width:16px;height:16px;display:block}
.v42-cta i::before{content:"";position:absolute;left:1px;bottom:2px;width:13px;height:1.5px;background:currentColor;transform:rotate(-45deg)}
.v42-cta i::after{content:"";position:absolute;top:0;right:0;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}

.v42-menu,.v42-mobile-menu{display:none}

/* Keep page content clear of the fixed header. */
body[data-current="home"] .dc-hero{padding-top:148px!important}
.dc-page-hero,.svc-hero{padding-top:140px!important}

@media(max-width:1180px) and (min-width:901px){
  .v42-header{height:96px;grid-template-columns:290px minmax(0,1fr)}
  .v42-brand{padding:0 34px}
  .v42-brand img{width:215px}
  .v42-nav-zone{grid-template-columns:minmax(0,1fr) 205px;gap:22px;padding:0 24px}
  .v42-nav{gap:25px}
  .v42-nav a{font-size:13px}
  .v42-cta{min-height:52px;font-size:12px}
  body[data-current="home"] .dc-hero{padding-top:136px!important}
  .dc-page-hero,.svc-hero{padding-top:128px!important}
}

@media(max-width:900px){
  .v42-header{
    height:74px;
    grid-template-columns:minmax(0,1fr) 74px;
    background:#fff;
    border-bottom:1px solid rgba(11,14,11,.14);
    box-shadow:0 8px 28px rgba(0,0,0,.10);
  }
  .v42-brand{
    padding:0 16px;
    border-right:0;
    background:#fff;
  }
  .v42-brand::after{display:none}
  .v42-brand img{width:168px}
  .v42-nav-zone{
    display:block;
    padding:0;
    background:var(--v42-ink);
  }
  .v42-nav,.v42-cta{display:none}
  .v42-menu{
    display:grid;
    place-items:center;
    position:relative;
    width:74px;
    height:74px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
  }
  .v42-menu span{
    position:absolute;
    width:23px;
    height:1.5px;
    background:#f4efe7;
    transition:transform .25s ease,top .25s ease;
  }
  .v42-menu span:first-child{top:29px}
  .v42-menu span:last-child{top:43px}
  .v42-header.menu-open .v42-menu span:first-child{top:36px;transform:rotate(45deg)}
  .v42-header.menu-open .v42-menu span:last-child{top:36px;transform:rotate(-45deg)}

  .v42-mobile-menu{
    position:fixed;
    inset:74px 0 0 0;
    z-index:1999;
    display:flex;
    flex-direction:column;
    padding:18px 18px calc(24px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#101410 0%,#0b0e0b 100%);
    color:#f4efe7;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .34s cubic-bezier(.2,.8,.2,1),visibility .34s;
    overflow-y:auto;
  }
  .v42-header.menu-open .v42-mobile-menu{transform:translateX(0);visibility:visible}
  .v42-mobile-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.10)}
  .v42-mobile-top>span{font:600 10px var(--mono);letter-spacing:.18em;color:#8e897f}
  .v42-mobile-top button{position:relative;width:42px;height:42px;border:1px solid rgba(255,255,255,.12);background:transparent}
  .v42-mobile-top button i{position:absolute;left:10px;right:10px;top:20px;height:1px;background:#f4efe7}
  .v42-mobile-top button i:first-child{transform:rotate(45deg)}
  .v42-mobile-top button i:last-child{transform:rotate(-45deg)}
  .v42-mobile-links{display:grid;margin-top:8px}
  .v42-mobile-links>a{
    min-height:62px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.09);
    color:#f4efe7;
    font:600 29px/1 var(--display);
    letter-spacing:-.045em;
    text-decoration:none;
  }
  .v42-mobile-links>a.active{color:var(--v42-brass)}
  .v42-mobile-consult{
    justify-content:space-between;
    margin-top:18px;
    padding:0 16px;
    min-height:56px!important;
    border-bottom:0!important;
    background:var(--v42-brass);
    color:#101310!important;
    font:700 14px/1 var(--body)!important;
    letter-spacing:0!important;
  }
  .v42-mobile-consult b{font-weight:400}
  .v42-mobile-contact{display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
  .v42-mobile-contact a{color:#aaa59c;font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-decoration:none}
  body.v42-menu-open{overflow:hidden}

  body[data-current="home"] .dc-hero{padding-top:98px!important}
  .dc-page-hero,.svc-hero{padding-top:98px!important}
}

@media(max-width:420px){
  .v42-brand{padding-left:12px}
  .v42-brand img{width:154px}
  .v42-mobile-links>a{font-size:25px}
}


/* ================================================================
   V43 — lighter dual-tone header
   Keeps the V42 geometry, only changes the colour system.
   ================================================================ */
:root{
  --v43-brand:#ffffff;
  --v43-nav:#e8e1d6;
  --v43-nav-2:#ddd4c5;
  --v43-ink:#111410;
  --v43-muted:#666860;
  --v43-brass:#a88955;
  --v43-border:rgba(17,20,16,.13);
}

/* White logo zone + warm stone navigation zone. */
.v42-header{
  background:var(--v43-nav)!important;
  border-bottom:1px solid var(--v43-border)!important;
  box-shadow:0 10px 28px rgba(17,20,16,.08)!important;
}

.v42-brand{
  background:var(--v43-brand)!important;
  border-right:1px solid var(--v43-border)!important;
}

.v42-brand::after{
  background:var(--v43-brass)!important;
  opacity:.75!important;
}

.v42-nav-zone{
  background:linear-gradient(90deg,var(--v43-nav) 0%,var(--v43-nav-2) 100%)!important;
}

.v42-nav a{
  color:var(--v43-muted)!important;
}

.v42-nav a:hover,
.v42-nav a.active{
  color:var(--v43-ink)!important;
}

.v42-nav a::after{
  background:var(--v43-brass)!important;
}

/* Dark CTA gives the light header a strong focal point. */
.v42-cta{
  background:var(--v43-ink)!important;
  color:#f6f1e9!important;
  border-color:var(--v43-ink)!important;
}

.v42-cta:hover{
  background:#2b3029!important;
}

/* Mobile uses the same light system rather than a black header block. */
@media(max-width:900px){
  .v42-header{
    background:var(--v43-nav)!important;
    border-bottom:1px solid var(--v43-border)!important;
    box-shadow:0 7px 22px rgba(17,20,16,.08)!important;
  }

  .v42-brand{
    background:var(--v43-brand)!important;
  }

  .v42-nav-zone{
    background:var(--v43-nav)!important;
    border-left:1px solid var(--v43-border)!important;
  }

  .v42-menu span{
    background:var(--v43-ink)!important;
  }
}

/* ================================================================
   V45 — real transparent logo integration
   ================================================================ */
:root{
  --v45-stone:#e6ded2;
  --v45-stone-2:#ddd3c3;
  --v45-ink:#111410;
  --v45-line:rgba(17,20,16,.12);
}

/* The logo image itself is transparent now. Make the whole header one
   coordinated light-stone surface instead of putting the mark on a white box. */
.v42-header{
  background:linear-gradient(90deg,var(--v45-stone) 0%,var(--v45-stone-2) 100%)!important;
  border-bottom:1px solid var(--v45-line)!important;
  box-shadow:0 8px 24px rgba(17,20,16,.07)!important;
}
.v42-brand{
  background:transparent!important;
  border-right:1px solid rgba(17,20,16,.10)!important;
}
.v42-brand::after{
  width:1px!important;
  background:rgba(168,137,85,.48)!important;
}
.v42-brand img{
  background:transparent!important;
  filter:none!important;
}
.v42-nav-zone{
  background:transparent!important;
}
.v42-nav a{color:#65675f!important}
.v42-nav a:hover,.v42-nav a.active{color:var(--v45-ink)!important}
.v42-cta{background:var(--v45-ink)!important;color:#f6f1e9!important;border-color:var(--v45-ink)!important}
.v42-cta:hover{background:#2b3029!important}

/* Loader shows the transparent mark on stone rather than a white rectangle. */
.dc-loader-logo-wrap{
  background:var(--v45-stone)!important;
  border:1px solid rgba(17,20,16,.12)!important;
}
.dc-loader-logo-wrap img{background:transparent!important}

/* Footer needs a light field because the original black mark is not a dark-mode logo,
   but the logo asset itself remains transparent. */
.dc-footer-signature a{
  background:var(--v45-stone)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.dc-footer-signature img{background:transparent!important}

@media(max-width:900px){
  .v42-header{
    background:linear-gradient(90deg,var(--v45-stone) 0 calc(100% - 74px),var(--v45-ink) calc(100% - 74px) 100%)!important;
  }
  .v42-brand{background:transparent!important}
  .v42-nav-zone{background:transparent!important}
}


/* ================================================================
   V46 — header proportion + CTA arrow polish
   ================================================================ */

/* Slightly reduce the logo so the header has more breathing room. */
.v42-brand{
  padding-left:38px!important;
  padding-right:38px!important;
}

.v42-brand img{
  width:215px!important;
  max-width:215px!important;
}

/* Replace the old CSS-line arrow with one clean vector icon. */
.v42-cta i{
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
  position:relative!important;
  display:block!important;
  background:currentColor!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

.v42-cta i::before,
.v42-cta i::after{
  content:none!important;
  display:none!important;
}

@media(max-width:1180px) and (min-width:901px){
  .v42-brand{
    padding-left:28px!important;
    padding-right:28px!important;
  }
  .v42-brand img{
    width:190px!important;
    max-width:190px!important;
  }
}

@media(max-width:900px){
  .v42-brand{
    padding-left:14px!important;
    padding-right:12px!important;
  }
  .v42-brand img{
    width:148px!important;
    max-width:148px!important;
  }
}

@media(max-width:420px){
  .v42-brand img{
    width:140px!important;
    max-width:140px!important;
  }
}


.v46-mobile-arrow{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 18px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* ================================================================
   V47 — light mobile hamburger zone
   Removes the black block from the mobile header.
   ================================================================ */
@media(max-width:900px){
  .v42-header{
    background:linear-gradient(90deg,#e6ded2 0%,#ddd3c3 100%)!important;
    border-bottom:1px solid rgba(17,20,16,.12)!important;
  }

  .v42-brand{
    background:transparent!important;
    border-right:1px solid rgba(17,20,16,.10)!important;
  }

  .v42-nav-zone{
    background:rgba(255,255,255,.18)!important;
    border-left:1px solid rgba(17,20,16,.10)!important;
  }

  .v42-menu{
    background:transparent!important;
    border:0!important;
  }

  .v42-menu span{
    background:#111410!important;
    height:1.5px!important;
  }
}