/* Independent review B · warm paper, responsive interaction and clear location. */
:root{--kalk:#F4F0E8;--kalk-2:#EAE3D7}
/* A quiet paper header keeps every menu label clear of the moving door edges. */
html[data-nav] .top.over:not(.has-bg):not(.is-open){background:var(--kalk);box-shadow:0 1px 0 var(--line)}
:where(a,button,summary,[role="button"],label[tabindex]):is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
:where(a,button,summary,[role="button"],label[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:4px}
html[data-pat=p] a.ghost{font-size:12px;min-height:44px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--ink);transition:background-color .2s,color .2s,transform .2s}
html[data-pat=p] a.ghost:is(:hover,:focus-visible){background:var(--ink);color:var(--kalk);border-bottom:1px solid var(--ink);padding:10px 8px;transform:translateY(-2px);text-decoration:underline}
html[data-pat=p] a.ghost:is(:hover,:focus-visible) .sl{color:inherit}
.u-foot a{transition:background-color .2s,box-shadow .2s}
.u-foot a:is(:hover,:focus-visible){background-color:var(--kalk-2);color:var(--ink);box-shadow:0 2px 0 currentColor}
.brand:is(:hover,:focus-visible),.uf-mark:is(:hover,:focus-visible){filter:brightness(.8)}
a:is(.proj,.home-fourth,.case-next,.make-item,.shot):is(:hover,:focus-visible){box-shadow:0 3px 0 currentColor}
button:is(:hover,:focus-visible),summary:is(:hover,:focus-visible),label[tabindex]:is(:hover,:focus-visible){box-shadow:inset 0 -3px 0 currentColor}
.wall-toggle button,.proof-controls button,.menu-btn{min-height:44px}
html[data-nav] .top .menu a:is(:hover,:focus-visible){background-color:var(--kalk-2)}
html[data-nav] .top .menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
html .switch a[aria-current="page"]{background:var(--ink);color:var(--kalk);box-shadow:inset 0 -4px 0 var(--oak)}
html .switch a[aria-current="page"]:is(:hover,:focus-visible){background:var(--ink-2)}
html .switch a:not([aria-current]):is(:hover,:focus-visible){background:var(--kalk-2)}
.current-note{font-size:12px;letter-spacing:.02em;white-space:nowrap}
.mono,.tb,.facts dt,.factbar .k,.form label,.slip-form label{font-size:max(12px,.8vw)}
.form textarea::placeholder,.form input::placeholder{color:#645E54;opacity:1}
.form :is(input,textarea,select):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
h1[tabindex="-1"]:focus{outline:none}
@media(prefers-reduced-motion:reduce){html[data-pat=p] a.ghost:is(:hover,:focus-visible){transform:none}*,*::before,*::after{transition:none!important}}

/* Round 2 · additions belong only to the phone/tablet navigation. */
.phone-only{display:none!important}
@media (max-width:1099px){
  /* The header becomes the opaque panel; its links scroll within the viewport. */
  html.menu-open{overflow:hidden;overscroll-behavior:none}
  html.menu-open body{position:fixed;top:var(--menu-scroll-top);left:0;right:0;width:100%;overflow:hidden}
  html[data-nav] .top .brand .logo{content:url(../img/logo/duig-wordmark.svg);width:auto;height:40px}
  html[data-nav] .top .menu-btn{min-width:72px;min-height:44px;margin-left:auto}
  html[data-nav] .top>.cta,html[data-nav] .top.is-open>.cta{display:none}
  html[data-nav] .top.is-open,html[data-nav] .top.over.is-open{
    position:fixed;inset:0;z-index:10000;display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:64px minmax(0,1fr);align-content:start;align-items:center;
    height:100vh;height:100dvh;max-height:none;min-height:0;overflow:hidden;
    background:var(--kalk);transform:none;transition:none
  }
  html[data-nav] .top.is-open .brand{grid-column:1;grid-row:1}
  html[data-nav] .top.is-open .menu-btn{grid-column:2;grid-row:1;order:0}
  html[data-nav] .top.is-open .menu{
    grid-column:1/-1;grid-row:2;order:0;display:flex;align-self:stretch;align-items:stretch;
    position:static;transform:none;flex-direction:column;gap:0;width:100%;height:auto;
    min-height:0;margin:0;padding:0 0 max(20px,env(safe-area-inset-bottom));overflow-y:auto;
    overscroll-behavior:contain;background:var(--kalk);box-shadow:none;font-size:18px
  }
  html[data-nav] .top.is-open .menu a{
    display:flex;flex:none;align-items:center;justify-content:flex-start;min-height:48px;
    width:100%;padding:10px 12px;line-height:1.4;white-space:normal
  }
  html[data-nav] .top.is-open .phone-only{display:flex!important}
  html[data-nav] .top.is-open .menu .phone-menu-cta{
    margin:8px 0;background:#C69C6D;color:#1E2326;font-size:15px;font-weight:600;border:1px solid #8C6A44
  }
  html[data-nav] .top.is-open .phone-close{
    flex:none;align-items:center;justify-content:center;min-height:48px;width:100%;
    padding:10px 12px;margin-top:8px;border:1px solid var(--ink);font-size:16px;font-weight:600
  }
  /* Explicit dimensions prevent the A4 photo's implicit grid track collapsing. */
  .process-installed>.grid>.shot{grid-column:1/-1!important;justify-self:stretch;width:100%;min-width:0;aspect-ratio:3/2!important}
  .materials-hero.shot{width:100%;height:auto;aspect-ratio:4/3!important}
  .materials-hero.shot img{object-fit:contain}
  /* Readable annotation labels and controls, including the more specific sheet styles. */
  html body :is(.mono,.tb,dt,th,label,legend,.k,.drawing-action,.row .label,.foot h4,
    .job-index>span,.proof-controls>.mono,.assembly-caption .mono,summary .mono,
    .process-steps .code,.build-drawing>summary .code,.material-installed .mono,
    .u-join .join-det figcaption,.maker-role,.maker-index,.uf-group h2){font-size:12px!important}
  html body .job-nav a{font-size:14px;min-height:48px}
  html body :is(.small,.body,.box-list li,.info-list){font-size:max(14px,1em)}
  html #hero .eyebrow{font-size:12px}
  button,summary{min-width:44px;min-height:44px}
  .faq summary{gap:12px;min-height:44px}
  .faq summary::after{flex:none}
  .slip-form input,.form input:not([type=checkbox]),.form select{min-height:44px;font-size:16px}
  .form label,.slip-form label{align-content:start}
  .form .check{min-height:44px;align-items:flex-start;line-height:1.5}
  .form .check input{width:44px!important;min-width:44px;height:44px;flex:none}
  .form .check>span{padding-top:10px}
  .form .check a{min-height:44px;display:inline-flex;align-items:center}
  html body :is(.text-link,.contact-email,.contact-phone,.uf-base a),
  main p a,html #hero .link{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  html body .ghost.sm,html body .btn.sm{min-height:44px}
  .bar{gap:12px;flex-wrap:wrap}
  .bar>.mono{flex:1 1 180px}
  .bar .wall-toggle{flex:none;margin-left:auto}
  .last-crumb{white-space:nowrap}
  .keep-punctuation{white-space:nowrap}
  .hover-hint{display:none!important}
  /* Keep the credit at the end of the footer, with its own space. */
  .olympeion-credit{position:static;display:flex;align-items:center;justify-content:center;
    width:fit-content;max-width:100%;min-height:44px;margin:28px 0 0;padding:10px 12px;
    font-size:12px;z-index:auto;white-space:normal;opacity:1;visibility:visible;pointer-events:auto;transition:none}
}
@media (max-width:699px){
  .prod-head{padding-top:28px;padding-bottom:28px!important}
  .prod-head>.grid{margin-top:28px!important}
  .prod-head .switch{display:flex;flex-wrap:wrap;gap:0;row-gap:0;width:100%}
  .prod-head .switch a{flex:1 1 auto;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;padding:10px 6px;border:0;font-size:12px}
  .prod-head .switch a+a{border-left:1px solid var(--ink)}
  .prod-head .switch .nm,.prod-head .switch .current-note{display:none}
  .prod-head .switch .mono{font-size:12px;letter-spacing:0;white-space:nowrap}
  .prod-head .switch a::after{display:none}
  :is(.prod-head,.viewer) .factbar{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:0;margin-top:28px}
  :is(.prod-head,.viewer) .factbar>div{padding:14px 12px}
  :is(.prod-head,.viewer) .factbar>div:nth-child(even){border-left:1px solid var(--ink)}
  :is(.prod-head,.viewer) .factbar>div:nth-child(2){border-top:0}
  :is(.prod-head,.viewer) .factbar>div:last-child{grid-column:1/-1}
  :is(.prod-head,.viewer) .factbar .v{font-size:16px}
  /* The same table data becomes labelled rows, without squeezing words into columns. */
  table.stuklijst{display:block;width:100%;table-layout:auto}
  .stuklijst thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .stuklijst tbody{display:grid;gap:16px;width:100%}
  .stuklijst tr{display:block;padding:16px;border:1px solid var(--line);background:var(--kalk)}
  .stuklijst td,.stuklijst td:last-child{
    display:block;width:auto;padding:8px 0 0;border:0;text-align:left;white-space:normal;
    overflow-wrap:normal;word-break:normal;hyphens:auto;font-size:14px;line-height:1.55
  }
  .stuklijst td:first-child{display:none}
  .stuklijst td:nth-child(2){padding-top:0;font-weight:600;font-size:16px}
  .stuklijst td:nth-child(n+3)::before{content:attr(data-label) " · ";font-size:12px;color:var(--ink-2)}
  .stuklijst td:empty{display:none}
  .stuklijst.prices td:last-child{white-space:nowrap}
  .page-head:has(+.step){padding-bottom:32px}
  .step{padding-top:40px;padding-bottom:40px}
  .contact-look .grid>div:not(.shot){padding:32px 0!important}
  .contact-look .grid>.shot{margin:0 0 32px!important;width:100%;aspect-ratio:4/3}
}
@media (max-width:699px) and (max-height:740px){
  html #hero .panel{padding-top:20px;padding-bottom:32px}
  html #hero .lede{font-size:15px;line-height:1.45;margin-top:12px}
  html #hero h1{margin-top:12px}
  html #hero .ctas{margin-top:16px;gap:8px 16px}
}