/* Product accents only; the layout and motion use the existing site components. */
.product-atelier{--product-metal:#b9b9b9;--product-ink:#505050;--product-dark:#393939}
.product-maison{--product-metal:#c9a66b;--product-ink:#7a5a2e;--product-dark:#3d3425}
.product-carnet{--product-metal:#c7784f;--product-ink:#6e3820;--product-dark:#3d281d}
.product-name-inline{white-space:nowrap}
/* Tint only the original product Q silhouette. Corporate lockups are separate. */
body.product-detail .product-signature{position:relative}
body.product-detail .product-signature::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:42px;height:42px;background:var(--product-metal);mask:url('brand-assets/Logo-Dark.png') center/contain no-repeat;-webkit-mask:url('brand-assets/Logo-Dark.png') center/contain no-repeat}
body.product-detail .product-signature>img{visibility:hidden}
@media(max-width:700px){body.product-detail .product-signature::before{width:36px;height:36px}}
body.product-detail .cinematic-hero .footage{background-size:cover;background-position:center}
body.product-atelier .cinematic-hero .footage{background-image:url('product-films/qatelier-poster.jpg')}
body.product-maison .cinematic-hero .footage{background-image:url('product-films/qmaison-poster.jpg')}
body.product-carnet .cinematic-hero .footage{background-image:url('product-films/qcarnet-poster.jpg')}
body.product-family-detail .cinematic-hero .product-signature{color:var(--product-ink);margin-bottom:16px}
body.product-family-detail .cinematic-hero .product-purpose{font-size:13px;letter-spacing:.06em;color:var(--product-ink);margin:0 0 25px}
body.product-family-detail .foundation-map>p:first-child{border-top:2px solid var(--product-metal)}
.product-family-detail .gallery-select{grid-template-columns:1fr}
.product-family-detail .gallery-bottom button[hidden]{display:none}
.mq-family-links{padding:100px var(--family-edge,var(--edge,7.25vw));background:#f5f3ee;color:#282720;border-top:1px solid #e3dfd6}
.mq-family-links .evidence-heading{margin:0 0 48px}
.mq-family-links .eyebrow{color:#795a30;margin-bottom:22px}
.mq-family-links h2{font-size:clamp(32px,3.3vw,48px);font-weight:450;line-height:1.4;letter-spacing:-.045em}
.mq-family-links h2 span{color:#795a30}
.mq-family-links .evidence-heading>p{color:#716a5e}
.mq-family-links nav{position:static;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;width:auto;margin:0;padding:0;background:transparent}
.mq-family-links a{--product-metal:#b9b9b9;display:block;min-width:0;border-top:2px solid var(--product-metal);padding:22px 0 14px;color:#282720;text-decoration:none;transition:color 250ms,background-color 250ms}
.mq-family-links a[data-product=maison]{--product-metal:#c9a66b}
.mq-family-links a[data-product=carnet]{--product-metal:#c7784f}
.mq-family-links a>span{display:flex;justify-content:space-between;gap:16px;font-size:25px;line-height:1.4;font-weight:450;letter-spacing:-.035em}
.mq-family-links a>span>span{font-size:20px;transition:transform 250ms}
.mq-family-links a:hover,.mq-family-links a[aria-current=page]{color:#795a30}
.mq-family-links a:hover>span>span{transform:translate(3px,-3px)}
.mq-family-links a:focus-visible{outline:2px solid #795a30;outline-offset:6px}
.mq-family-links small{display:block;margin-top:10px;font-size:15px;color:#716a5e;font-weight:400;line-height:1.8}
@media(max-width:700px){
 .mq-family-links{padding:64px 24px}
 .mq-family-links .evidence-heading{margin-bottom:32px}
 .mq-family-links nav{grid-template-columns:1fr;gap:18px}
 .mq-family-links a{padding:18px 0 12px}
 .mq-family-links a>span{font-size:24px}
 .mq-family-links small{font-size:16px}
 body.product-family-detail .cinematic-hero .product-purpose{font-size:12px;margin-bottom:22px}
}
@media(prefers-reduced-motion:reduce){.mq-family-links a,.mq-family-links a>span>span{transition:none}}

/* Metal values: Q-Design/tools/app-icons.mjs STROKE, plus the stored brand dark tones.
   The exact metal is used on actions; panels are white mixes of that same color.
   Keep the original CI artwork, geometry, type and motion untouched. */
body.reading-light.product-detail{
 --product-surface:color-mix(in srgb,var(--product-metal) 6%,white);
 --product-panel:color-mix(in srgb,var(--product-metal) 14%,white);
 --product-rule:color-mix(in srgb,var(--product-metal) 45%,white);
 --product-band:color-mix(in srgb,var(--product-metal) 70%,white);
 --bg:var(--product-surface);--ivory:var(--product-dark);--gold:var(--product-ink);
 --line:var(--product-rule);--editorial-line:var(--product-rule);--detail-rule:var(--product-rule);
 --text-muted:color-mix(in srgb,var(--product-dark) 83%,white);--detail-muted:var(--text-muted);
 background:var(--bg);color:var(--ivory)
}
body.reading-light.product-detail .cinematic-hero{
 --bg:var(--product-surface);--ivory:var(--product-dark);--gold:var(--product-ink);
 background:var(--bg);color:var(--ivory)
}
body.reading-light.product-detail .cinematic-hero .shade{
 background:linear-gradient(90deg,color-mix(in srgb,var(--product-surface) 79%,transparent) 0%,color-mix(in srgb,var(--product-surface) 55%,transparent) 38%,transparent 72%),linear-gradient(0deg,var(--product-surface) 0%,transparent 18%)
}
body.reading-light.product-detail .cinematic-hero :is(h1,h1 span){color:var(--product-dark)}
body.reading-light.product-detail .cinematic-hero .content>p:not(.eyebrow){color:var(--text-muted)}
body.reading-light.product-detail .cinematic-hero :is(.product-signature,.product-purpose){color:var(--product-ink)}
body.reading-light.product-detail :is(header,header.over-film,header.over-film.scrolled){--gold:var(--product-ink);background:color-mix(in srgb,var(--product-surface) 94%,transparent);border-color:var(--product-rule)}
body.reading-light.product-detail :is(.button,.nav-cta,.cinematic-hero .button){background:var(--product-metal);border-color:var(--product-metal);color:#0c0c0c}
body.reading-light.product-detail :is(.button,.nav-cta,.cinematic-hero .button):hover{background:var(--product-metal);border-color:var(--product-ink);color:#0c0c0c}
body.reading-light.product-detail header #nav .nav-cta{background:var(--product-metal);border-color:var(--product-metal);color:#0c0c0c}
body.reading-light.product-detail header #nav .nav-cta:hover{border-color:var(--product-ink)}
body.reading-light.product-detail .motion-button::after{background:var(--product-dark)}
body.reading-light.product-detail .motion-button:is(.is-pointer-inside,:focus-visible) :is(.button-label,.button-arrow){color:#fff}
body.reading-light.product-detail :is(.text-link,.evidence-link){color:var(--product-ink);border-color:var(--product-ink)}
body.reading-light.product-detail :is(a,button,input,textarea):focus-visible{outline-color:var(--product-ink)}
body.reading-light.product-detail .cinematic-hero :is(.film-count,.film-navigation){color:var(--product-ink)}
body.reading-light.product-detail :is(#toggle,.cinematic-hero .film-next){background:var(--product-surface);color:var(--product-ink);border-color:var(--product-rule)}
body.reading-light.product-detail header #toggle{background:var(--product-surface);color:var(--product-ink);border-color:var(--product-rule)}
body.reading-light.product-detail :is(#toggle,.cinematic-hero .film-next):hover{background:var(--product-metal);color:#0c0c0c}
body.reading-light.product-detail .product-evidence{background:var(--product-panel);border-color:var(--product-rule)}
body.reading-light.product-detail .evidence-steps li{border-color:var(--product-metal)}
body.reading-light.product-detail .evidence-steps li::before,body.reading-light.product-detail .service-subnav a:hover{color:var(--product-ink)}
body.reading-light.product-detail .evidence-screen>a{background:var(--product-surface);border-color:var(--product-rule);box-shadow:0 16px 40px color-mix(in srgb,var(--product-dark) 5%,transparent)}
body.reading-light.product-detail .foundation-map>p:first-child{border-top:2px solid var(--product-metal);padding-top:20px}
body.reading-light.product-detail .adoption-start{--gold:var(--product-dark);--ivory:var(--product-dark);--text-muted:var(--product-dark);background:var(--product-band);color:var(--product-dark)}
body.reading-light.product-detail .adoption-start :is(h3,h3 span,h4,p,.eyebrow,.adoption-questions li>span){color:var(--product-dark)}
body.reading-light.product-detail .adoption-questions{border-color:color-mix(in srgb,var(--product-dark) 38%,transparent)}
body.reading-light.product-detail .adoption-start .button{background:var(--product-dark);border-color:var(--product-dark);color:white}
body.reading-light.product-detail .adoption-start .button::after{background:var(--product-metal)}
body.reading-light.product-detail .adoption-start .button:is(.is-pointer-inside,:focus-visible) :is(.button-label,.button-arrow){color:#0c0c0c}
body.reading-light.product-detail #consultation-dialog{background:var(--product-surface);border-color:var(--product-rule)}
body.reading-light.product-detail .consultation-bar{background:var(--product-panel);border-color:var(--product-rule)}
body.reading-light.product-detail #consultation-dialog :is(input,textarea){border-color:var(--product-rule)}
body.reading-light.product-detail #consultation-dialog :is(input,textarea):focus{border-color:var(--product-ink);outline-color:var(--product-ink)}
body.reading-light.product-detail .consultation-email{border-color:var(--product-ink)}
body.reading-light.product-detail #screen-dialog{background:var(--product-surface);border-color:var(--product-rule);scrollbar-color:var(--product-metal) var(--product-surface)}
body.reading-light.product-detail #screen-dialog .zoom-scroll{background:var(--product-panel)}
body.reading-light.product-detail #screen-dialog :is(.gallery-select button,.screen-tools button,.gallery-bottom button){background:var(--product-surface);border-color:var(--product-rule);color:var(--product-dark)}
body.reading-light.product-detail #screen-dialog button[aria-pressed=true]{background:var(--product-metal);border-color:var(--product-ink);color:#0c0c0c}
body.reading-light.product-detail .mq-family-links{background:var(--product-panel);border-color:var(--product-rule);color:var(--product-dark)}
body.reading-light.product-detail .mq-family-links :is(h2 span,.eyebrow){color:var(--product-ink)}
body.reading-light.product-detail .mq-family-links .evidence-heading>p{color:var(--text-muted)}
.mq-family-links a[data-product=atelier]{--link-ink:#505050}
.mq-family-links a[data-product=maison]{--link-ink:#7a5a2e}
.mq-family-links a[data-product=carnet]{--link-ink:#6e3820}
.mq-family-links a:hover,.mq-family-links a[aria-current=page]{color:var(--link-ink)}
.mq-family-links a:focus-visible{outline-color:var(--link-ink)}
@media(max-width:700px){body.reading-light.product-detail .cinematic-hero .shade{background:linear-gradient(0deg,var(--product-surface) 0%,color-mix(in srgb,var(--product-surface) 65%,transparent) 28%,color-mix(in srgb,var(--product-surface) 60%,transparent) 60%,transparent 100%)}}
/* Keep product feedback consistent with the homepage without recoloring shared navigation. */
body.reading-light.product-detail main .motion-button::after,
body.suite-page main .suite-product .motion-button::after{background:var(--product-metal)}
body.reading-light.product-detail main .motion-button:is(.is-pointer-inside,:focus-visible) :is(.button-label,.button-arrow),
body.suite-page main .suite-product .motion-button:is(.is-pointer-inside,:focus-visible) :is(.button-label,.button-arrow){color:#171614}