/* 06 — Quiet Luxury (Canva page 6) */
.viewport-layout.layout-06 {
  --luxury-bg:var(--tone-bg-dark,#171614);
  --luxury-surface:var(--tone-surface-dark,#22201d);
  --luxury-ink:var(--tone-text-on-dark,#f6f0e6);
  --luxury-muted:var(--tone-text-muted-dark,#aaa296);
  --luxury-accent:var(--tone-accent-on-dark,var(--tone-accent,#d2b47a));
  --luxury-accent-surface:var(--tone-accent-surface,var(--tone-accent,#d2b47a));
  --luxury-accent-ink:var(--tone-accent-surface-ink,#191714);
  position:relative;
  display:grid;
  grid-template-rows:clamp(56px,7.5dvh,74px) minmax(0,1fr) clamp(28px,4dvh,40px);
  color:var(--luxury-ink);
  background:
    radial-gradient(circle at 69% 30%,color-mix(in srgb,var(--luxury-accent) 8%,transparent),transparent 29%),
    var(--luxury-bg);
}
.viewport-layout.layout-06::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.36;
  background-image:linear-gradient(90deg,transparent calc(50% - .5px),color-mix(in srgb,var(--luxury-accent) 12%,transparent) 50%,transparent calc(50% + .5px));
}
.luxury-masthead,.luxury-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,2vw,30px);
  padding-inline:clamp(18px,3.5vw,58px);
  border-color:color-mix(in srgb,var(--luxury-accent) 24%,transparent);
}
.luxury-masthead { border-bottom:1px solid color-mix(in srgb,var(--luxury-accent) 24%,transparent); }
.luxury-footer { border-top:1px solid color-mix(in srgb,var(--luxury-accent) 20%,transparent); color:var(--luxury-muted); font-size:7px; letter-spacing:.15em; }
.luxury-brand { display:flex; align-items:center; gap:10px; }
.luxury-brand>span { display:grid; place-items:center; width:36px; height:36px; color:var(--luxury-accent-ink); background:var(--luxury-accent-surface); border-radius:50%; font-family:Georgia,serif; font-size:14px; font-weight:700; }
.luxury-brand strong { font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(13px,1.2vw,18px); font-weight:500; letter-spacing:.13em; }
.luxury-masthead>p { margin:0 auto; color:var(--luxury-muted); font-family:Georgia,serif; font-size:7px; letter-spacing:.24em; }
.luxury-promo { display:grid; grid-template-columns:auto minmax(0,170px) 23px; align-items:center; gap:9px; min-height:38px; padding:5px 7px 5px 11px; cursor:pointer; color:var(--luxury-ink); background:transparent; border:1px solid color-mix(in srgb,var(--luxury-accent) 40%,transparent); }
.luxury-promo span { color:var(--luxury-accent); font-family:Georgia,serif; font-size:6px; letter-spacing:.16em; }
.luxury-promo strong { overflow:hidden; font-size:9px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.luxury-promo b { display:grid; place-items:center; width:23px; height:23px; color:var(--luxury-accent-ink); background:var(--luxury-accent-surface); border-radius:50%; font-size:8px; }
.luxury-stage { position:relative; min-height:0; display:grid; grid-template-columns:minmax(280px,41%) minmax(0,59%); grid-template-rows:minmax(0,46%) minmax(0,54%); overflow:hidden; }
.luxury-intro { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; grid-row:1/-1; padding:clamp(26px,5vw,82px); border-right:1px solid color-mix(in srgb,var(--luxury-accent) 20%,transparent); }
.luxury-kicker { display:flex; align-items:center; gap:10px; color:var(--luxury-accent); font-family:Georgia,serif; font-size:7px; letter-spacing:.2em; }
.luxury-kicker i { width:30px; height:1px; background:currentColor; }
.luxury-intro h1 { max-width:12ch; margin:clamp(16px,3dvh,30px) 0 0; font-family:"Noto Serif Thai",Georgia,serif; font-size:clamp(32px,3.8vw,60px); font-weight:500; line-height:1.25; letter-spacing:0; }
.luxury-intro h1 em { color:var(--luxury-accent); font-style:normal; }
.luxury-intro>p { max-width:36ch; margin:clamp(14px,3dvh,28px) 0 0; color:var(--luxury-muted); font-size:clamp(9px,.85vw,12px); line-height:1.65; }
.luxury-intro>a { display:flex; align-items:center; justify-content:space-between; width:min(260px,100%); min-height:45px; margin-top:clamp(16px,3dvh,30px); padding:9px 13px; color:var(--luxury-accent-ink); background:var(--luxury-accent-surface); font-size:8px; font-weight:700; letter-spacing:.08em; }
.luxury-intro>a i { font-size:15px; font-style:normal; }
.luxury-emblem { position:relative; display:grid; place-items:center; min-height:0; overflow:hidden; color:var(--luxury-accent); }
.luxury-emblem>span { position:absolute; width:min(31vw,39dvh); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--luxury-accent) 38%,transparent); border-radius:50%; }
.luxury-emblem>span:nth-child(2) { width:min(22vw,28dvh); }
.luxury-emblem>span:nth-child(3) { width:min(12vw,16dvh); background:color-mix(in srgb,var(--luxury-accent) 8%,transparent); }
.luxury-emblem b { position:relative; z-index:1; font-family:Georgia,serif; font-size:clamp(42px,6vw,92px); font-weight:400; line-height:1; }
.luxury-emblem small { position:absolute; z-index:1; bottom:13%; font-family:Georgia,serif; font-size:6px; letter-spacing:.3em; }
.luxury-collection { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:stretch; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--luxury-accent) 55%,transparent) transparent; border-top:1px solid color-mix(in srgb,var(--luxury-accent) 20%,transparent); }
.luxury-card { min-height:0; border-right:1px solid color-mix(in srgb,var(--luxury-accent) 20%,transparent); transition:background .25s,transform .3s; }
.luxury-card:last-child { border-right:0; }
.luxury-card:hover,.luxury-card.is-active { background:color-mix(in srgb,var(--luxury-accent) 7%,transparent); }
.luxury-card>a { position:relative; display:flex; flex-direction:column; height:100%; min-height:0; padding:clamp(13px,2vw,28px); overflow:hidden; }
.luxury-card__number { color:var(--luxury-accent); font-family:Georgia,serif; font-size:8px; letter-spacing:.14em; }
.luxury-card .solution-media { width:clamp(36px,4vw,54px); aspect-ratio:1; margin-top:clamp(8px,1.4dvh,14px); border:1px solid color-mix(in srgb,var(--solution-card-accent,var(--luxury-accent)) 48%,transparent); border-radius:50%; }
.luxury-card__identity { display:flex; flex-direction:column; margin-top:clamp(10px,2dvh,19px); }
.luxury-card__identity small { color:var(--luxury-accent); font-size:6px; letter-spacing:.18em; }
.luxury-card__identity strong { margin-top:4px; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(17px,1.7vw,27px); font-weight:500; line-height:1.15; }
.luxury-card__identity span { color:var(--luxury-muted); font-size:7px; }
.luxury-card__copy { margin-top:auto; padding-top:10px; border-top:1px solid color-mix(in srgb,var(--luxury-accent) 18%,transparent); }
.luxury-card__copy h2 { display:-webkit-box; margin:0; overflow:hidden; font-size:clamp(10px,.86vw,13px); font-weight:500; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.luxury-card__copy p { display:none; }
.luxury-card__arrow { position:absolute; right:clamp(13px,2vw,28px); top:clamp(13px,2vw,28px); color:var(--luxury-accent); font-family:Georgia,serif; font-size:16px; }
.luxury-footer nav { display:flex; gap:clamp(14px,3vw,36px); max-width:52%; overflow:auto hidden; overscroll-behavior-inline:contain; scrollbar-width:thin; white-space:nowrap; }
.luxury-footer nav a:hover,.luxury-footer>a { color:var(--luxury-accent); }

.viewport-layout.layout-06.solution-count-0 .luxury-collection,
.viewport-layout.layout-06.solution-count-1 .luxury-collection { grid-template-columns:minmax(0,1fr); }
.viewport-layout.layout-06.solution-count-2 .luxury-collection { grid-template-columns:repeat(2,minmax(0,1fr)); }
.viewport-layout.layout-06.solution-count-4 .luxury-collection { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.viewport-layout.layout-06:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .luxury-collection { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(142px,1fr); align-content:start; }
.viewport-layout.layout-06:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .luxury-card__copy h2 { -webkit-line-clamp:1; }

@media (max-height:700px) and (min-width:821px) {
  .luxury-intro { padding-block:20px; }
  .luxury-intro h1 { font-size:clamp(30px,3.5vw,52px); }
  .luxury-intro>p { line-height:1.45; }
  .luxury-card__copy h2 { -webkit-line-clamp:1; }
}

@media (max-width:820px) {
  .viewport-layout.layout-06 { grid-template-rows:50px minmax(0,1fr) 25px; }
  .luxury-masthead,.luxury-footer { gap:9px; padding-inline:13px; }
  .luxury-brand>span { width:29px; height:29px; font-size:11px; }
  .luxury-brand strong { font-size:12px; }
  .luxury-masthead>p { display:none; }
  .luxury-promo { grid-template-columns:auto minmax(0,86px) 19px; min-height:33px; margin-left:auto; padding:4px 6px 4px 9px; }
  .luxury-promo span { display:none; }
  .luxury-promo strong { font-size:7px; }
  .luxury-promo b { width:19px; height:19px; }
  .luxury-stage { grid-template-columns:1fr; grid-template-rows:minmax(154px,36%) minmax(0,64%); }
  .luxury-intro { justify-content:center; grid-row:1; padding:14px 18px; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--luxury-accent) 20%,transparent); }
  .luxury-kicker { font-size:5px; }
  .luxury-kicker i { width:18px; }
  .luxury-intro h1 { max-width:13ch; margin-top:7px; font-size:clamp(24px,7.8vw,34px); line-height:1.25; }
  .luxury-intro>p { max-width:39ch; margin-top:7px; font-size:7px; line-height:1.4; }
  .luxury-intro>a { position:absolute; right:16px; bottom:14px; width:104px; min-height:34px; margin:0; padding:7px 8px; font-size:6px; }
  .luxury-emblem { position:absolute; right:-28px; top:50px; width:145px; height:120px; opacity:.42; }
  .luxury-emblem>span { width:112px; }
  .luxury-emblem>span:nth-child(2) { width:80px; }
  .luxury-emblem>span:nth-child(3) { width:46px; }
  .luxury-emblem b { font-size:30px; }
  .luxury-emblem small { display:none; }
  .luxury-collection { grid-row:2; grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); border-top:0; }
  .luxury-card { border-right:0; border-bottom:1px solid color-mix(in srgb,var(--luxury-accent) 20%,transparent); }
  .luxury-card:last-child { border-bottom:0; }
  .luxury-card>a { display:grid; grid-template-columns:26px 38px minmax(82px,.7fr) minmax(0,1fr) 22px; align-items:center; gap:8px; padding:7px 13px; }
  .luxury-card__number { font-size:7px; }
  .luxury-card .solution-media { width:36px; margin:0; }
  .luxury-card__identity { margin:0; }
  .luxury-card__identity small { font-size:5px; }
  .luxury-card__identity strong { margin-top:1px; font-size:15px; }
  .luxury-card__identity span { font-size:6px; }
  .luxury-card__copy { margin:0; padding:0; border:0; }
  .luxury-card__copy h2 { font-size:8px; -webkit-line-clamp:2; }
  .luxury-card__arrow { position:static; justify-self:end; font-size:14px; }
  .luxury-footer { font-size:5px; }
  .luxury-footer nav { display:none; }
  .viewport-layout.layout-06.solution-count-0 .luxury-collection,
  .viewport-layout.layout-06.solution-count-1 .luxury-collection { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
  .viewport-layout.layout-06.solution-count-2 .luxury-collection { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); }
  .viewport-layout.layout-06.solution-count-4 .luxury-collection { grid-template-columns:1fr; grid-template-rows:repeat(4,minmax(0,1fr)); }
  .viewport-layout.layout-06:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .luxury-collection { grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:minmax(64px,1fr); align-content:start; overflow-y:auto; }
}

@media (max-width:380px) {
  .luxury-intro>a { display:none; }
  .luxury-card>a { grid-template-columns:22px 34px minmax(70px,.62fr) minmax(0,1fr) 18px; gap:6px; }
  .luxury-card .solution-media { width:32px; }
}

@media (max-height:560px) and (max-width:699px) {
  .luxury-stage { grid-template-rows:112px minmax(0,1fr); }
  .luxury-intro h1 { font-size:24px; }
  .luxury-intro>p,.luxury-intro>a { display:none; }
  .luxury-emblem { top:34px; }
  .luxury-card>a { padding-block:4px; }
}