/* Dubey Perfumers – layout fixes from the Nov 2026 website audit. Remove this file (and its <link>) to undo. */

/* R1/H3 – home teaser headings ("CRAFT & PROCESS", "THE JOURNAL", "CONTACT US") were cut off: scale to fit their box */
div.relative.overflow-hidden.w-full:has(> div.absolute > h2.whitespace-nowrap){container-type:inline-size}
div.relative.overflow-hidden.w-full > div.absolute > h2.whitespace-nowrap{font-size:min(2.25rem,11.5cqw)!important}
@media (min-width:640px){div.relative.overflow-hidden.w-full > div.absolute > h2.whitespace-nowrap{font-size:min(3.75rem,11.5cqw)!important}}
@media (min-width:768px){div.relative.overflow-hidden.w-full > div.absolute > h2.whitespace-nowrap{font-size:min(4.5rem,11.5cqw)!important}}
@media (min-width:1024px){div.relative.overflow-hidden.w-full > div.absolute > h2.whitespace-nowrap{font-size:min(6rem,11.5cqw)!important}}

/* H4/H6/R5 – "Sound On" pill covered text and footer: move it into the top bar, centred */
.dubey-audio-pill{top:27px!important;bottom:auto!important;left:0!important;right:0!important;margin:0 auto!important;width:max-content!important}
@media (max-width:767px){.dubey-audio-pill{top:22px!important;transform:scale(.88);transform-origin:top center}}

/* R2/J6 – Journal footer kept 4 columns on phones and pushed the page sideways */
@media (max-width:760px){
  .foot > div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important;gap:28px 20px!important}
  .foot > div[style*="grid-template-columns"] > div:first-child{grid-column:1 / -1}
}

/* R3 – Craft & Process "From concept to compound" block ran off small phones */
.wrap.grid > *{min-width:0}
@media (max-width:767px){.wrap.grid{grid-template-columns:minmax(0,1fr)!important}}
.rd-head > div:first-child{min-width:0;flex-wrap:wrap;row-gap:6px}
.rd-head > .plus{flex-shrink:0}

/* R9 – Services "How it works": cards snapped flush to the screen edge; keep the page margin */
.hviewport{scroll-padding-inline:max(4vw,(100vw - 1280px)/2)}

/* R11 – "Check if we serve your market →" wrapped onto 2 lines at every width */
.map-cta{container-type:inline-size}
.map-cta .btn-gold{white-space:nowrap;letter-spacing:.1em;padding:15px 20px;font-size:min(10.5px,3.3cqw);gap:8px;justify-content:center;max-width:100%;box-sizing:border-box}

/* R4/N1 – navigation menu taller than short screens (phones, landscape, 1280×720 laptops) */
@media (max-height:820px){
  .menu-subtitle{display:none!important}
  .menu-row{padding:6px 0!important}
  .menu-info{padding-bottom:6px!important}
  .menu-main-content{padding-top:14px!important;padding-bottom:14px!important}
  .menu-title{font-size:clamp(21px,2.4vw,30px)!important}
}
@media (max-height:480px){
  .menu-items-col{display:grid!important;grid-template-columns:1fr 1fr;column-gap:28px}
  .menu-top-bar{padding-top:10px!important;padding-bottom:10px!important}
}

/* R7 – Craft & Process map chips: 9 columns squeezed the names into each other */
div.grid:has(> button.mapitem){grid-template-columns:repeat(auto-fill,minmax(86px,1fr))!important}
button.mapitem{padding-left:6px!important;padding-right:6px!important}

/* R8/C6 – labels on the manufacturing photo overlapped on phones */
@media (max-width:640px){div.relative.overflow-hidden[class*="aspect-[16/7]"]{aspect-ratio:4/3!important}}

/* A1/C3 – inactive timeline / process items were faded to 25–35% and hard to read */
@media (min-width:961px){.chapter{opacity:.72}}
.bstep,.lstep{opacity:.7}
.mapitem{opacity:.75}

/* T2 – contact form option chips were ~9px */
.chipfield .chip{font-size:11px!important;padding:9px 14px!important}

/* N2 – show which page you are on in the menu */
.menu-row.is-current .menu-title{color:#d4af37!important}
.menu-row.is-current .menu-roman{color:#d4af37!important}
.menu-row.is-current .menu-info{border-bottom-color:rgba(212,175,55,.45)!important}