/* ==========================================================================
   Interior design (sections/decor.php, assets/js/decor.js, assets/js/home-gl.js). Late evening after the car
   workshop: a navy night, and in it a home cut open with its lamps on (the real estate section's clay, now lived
   in). The brand's green marks what is picked; warm lamp light is the only other colour. The request is a light
   slip under the home, of a family with the car services' job card.
   Modes, decided by CSS so the first paint is right: the home (JS + WebGL), flat (no WebGL: the planner and the
   request), list (no JS: every kind of work and job as text, and how to reach us).
   ========================================================================== */
.dec {
  --d-night: #0B1220; --d-deep: #111A2D; --d-low: #172036;
  --d-ink: #F1EDE6; --d-ink-2: #A9B1C0; --d-line: rgb(232 224 212 / .14); --d-glass: rgb(20 28 46 / .72);
  --warm: #FFD69A; --lime: #9AF21E;
  --paper: #F2EEE7; --paper-rule: rgb(46 51 131 / .2); --ink-c: #2E3383; --ink-p: #1E2229; --ink-q: #6B717A;
  --sx: 1;
  position: relative; z-index: 8; color: var(--d-ink);
}
[dir="rtl"] .dec { --sx: -1; }
.dec-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dec__anchor { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; outline: none; pointer-events: none; }
.dec__cover { position: absolute; z-index: 30; inset: auto 0 0; height: 100vh; height: 100svh; background: #02080B; opacity: 0; pointer-events: none; will-change: opacity; }

/* ---------- the stage: the night, the home's light ---------- */
.dec__stage {
  position: relative; overflow: hidden; overflow: clip; border-radius: 28px 28px 0 0;
  background: linear-gradient(to bottom, var(--d-night), var(--d-deep) 58%, var(--d-low));
  box-shadow: 0 -24px 70px -26px rgb(0 0 0 / .75);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .dec__stage { transform-origin: 50% 0; will-change: transform; }
}
.dec__glow { position: absolute; z-index: 0; inset-inline-end: 4%; top: 18%; width: 58%; height: 64%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 196 120 / .13), rgb(255 196 120 / 0)); pointer-events: none; }

/* ---------- the planner ---------- */
.dec__plan { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 22px); min-width: 0; min-height: 0; }
.dec__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--d-ink-2); }
html[lang="en"] .dec__eyebrow { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.dec__eyebrow .chap__no { color: var(--warm); }
.dec__eyebrow > span:last-child { display: inline-flex; align-items: center; gap: 12px; }
.dec__eyebrow > span:last-child::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.dec__title { margin-top: 10px; max-width: 14em; font-size: clamp(26px, 2.3vw, 40px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
html[lang="en"] .dec__title { font-family: var(--font-serif); font-size: clamp(30px, 2.7vw, 46px); font-weight: 460; line-height: 1.06; letter-spacing: -.025em; }
.dec__lead { margin-top: 8px; max-width: 46ch; font-size: 14.5px; line-height: 1.85; color: var(--d-ink-2); text-wrap: pretty; }
html[lang="en"] .dec__lead { line-height: 1.6; }
/* phones: straight to the writing box (the slip is far below the choices) */
.dec__jump { display: none; }
@media (max-width: 860px) {
  .dec__jump { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: inherit; font-size: 13px; font-weight: 750; text-decoration: none; }
  .dec__jump svg { width: 16px; height: 16px; }
}


/* the kinds of work: three tabs */
.dec-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 20px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--d-line); }
.dec-path { display: grid; gap: 1px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 15px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background-color .25s, box-shadow .25s; }
.dec-path b { font-size: 14px; font-weight: 750; line-height: 1.45; }
.dec-path small { font-size: 12px; color: var(--d-ink-2); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dec-path:hover { background: rgb(255 255 255 / .05); }
.dec-path.is-on { background: var(--d-glass); box-shadow: inset 0 0 0 1px rgb(154 242 30 / .45); }
.dec-path.is-on b { color: var(--lime); }
.dec-path:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* what each kind asks: the flat and its stage; how the home is now; a word */
.dec-extra { display: grid; gap: 8px; }
html.js .dec-extra:not(.is-on) { display: none; }
.dec-field { display: grid; gap: 4px; min-width: 0; }
.dec-field > span, .dec-stages legend, .dec-seg legend { font-size: 12px; font-weight: 700; color: var(--d-ink-2); }
.dec select, .dec input[type="text"], .dec input[type="number"], .dec textarea { width: 100%; min-width: 0; font: inherit; }
.dec__plan select {
  appearance: none; min-height: 42px; padding: 8px 14px; padding-inline-end: 34px; border: 1px solid var(--d-line); border-radius: 14px;
  background: rgb(255 255 255 / .06) linear-gradient(45deg, rgb(0 0 0 / 0) 50%, var(--d-ink-2) 50%) no-repeat; background-size: 6px 6px; background-position: right 16px center;
  color: var(--d-ink); font-size: 14px; font-weight: 650; cursor: pointer;
}
[dir="rtl"] .dec__plan select { background-position: left 16px center; }
.dec__plan select option, .dec__plan select optgroup { color: #1E2229; }
.dec__plan select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dec-unit-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.dec-unit { font-size: 13px; font-weight: 650; color: var(--warm); }
.dec-unit[hidden] { display: none; }
.dec-unit__map { font-size: 12.5px; }
.dec-unit__map a { color: var(--d-ink-2); text-decoration: none; border-bottom: 1px solid currentColor; }
.dec-unit__map a:hover { color: var(--d-ink); }
.dec-stages, .dec-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dec-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dec-stages legend, .dec-seg legend { grid-column: 1 / -1; margin-bottom: 4px; padding: 0; }
.dec-stage, .dec-seg label { position: relative; min-width: 0; }
.dec-stage input, .dec-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dec-stage span, .dec-seg span { display: grid; gap: 1px; min-height: 42px; place-content: center; padding: 6px 8px; border-radius: 13px; box-shadow: inset 0 0 0 1px var(--d-line); text-align: center; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.dec-stage b, .dec-seg span { font-size: 13px; font-weight: 750; }
.dec-stage small { font-size: 12px; color: var(--d-ink-2); }
.dec-stage input:checked + span, .dec-seg input:checked + span { background: var(--d-glass); box-shadow: inset 0 0 0 1px rgb(154 242 30 / .5); }
.dec-stage input:checked + span b, .dec-seg input:checked + span { color: var(--lime); }
.dec-stage input:focus-visible + span, .dec-seg input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.dec-stage__is { font-size: 12.5px; line-height: 1.7; color: var(--d-ink); }
html.js .dec-stage__is:not(.is-on) { display: none; }
.dec-note { font-size: 12.5px; line-height: 1.7; color: var(--d-ink-2); }

/* the jobs */
.dec-jobs { min-height: 0; container-type: inline-size; }
.dec-jobs__h { font-size: 13px; font-weight: 750; color: var(--d-ink-2); }
.dec-jobs__h b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-inline-start: 6px; padding: 0 6px; border-radius: 999px; background: rgb(154 242 30 / .16); color: var(--lime); font-size: 12px; }
.dec-jobs__h b:empty { display: none; }
.dec-opt { margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: rgb(255 255 255 / .07); font-size: 12px; font-weight: 700; color: var(--d-ink-2); }
.dec-jobs__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.dec-job {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 6px 12px 6px 8px; border: 1px solid rgb(255 255 255 / .14); border-radius: 13px;
  background: rgb(255 255 255 / .03); color: var(--d-ink); font: inherit; font-size: 13px; font-weight: 650; text-align: start; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
[dir="rtl"] .dec-job { padding: 6px 8px 6px 12px; }
.dec-job svg { flex: none; width: 22px; height: 22px; color: var(--d-ink-2); transition: color .2s; }
.dec-job span { min-width: 0; line-height: 1.4; }
.dec-job__short { display: none; }
/* a narrow column (or a phone): the jobs by their short names, one line each */
@container (max-width: 640px) {
  .dec-job__full { display: none; }
  .dec-job__short { display: inline; }
}
.dec-job:hover { border-color: rgb(255 255 255 / .36); }
.dec-job.is-on { background: rgb(154 242 30 / .12); border-color: var(--lime); }
.dec-job.is-on svg { color: var(--lime); }
.dec-job:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---------- the home ---------- */
.dec__view { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; min-width: 0; min-height: 0; }
.dec-home { position: relative; min-height: 0; }
.dec-home__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.dec-home__hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; font-size: 12px; text-align: center; color: var(--d-ink-2); opacity: 0; transition: opacity .6s; pointer-events: none; }
.dec.is-built .dec-home__hint { opacity: .85; }
.dec-home__touch { display: none; }
.dec.is-touch .dec-home__fine { display: none; }
.dec.is-touch .dec-home__touch { display: inline; }
.dec-tip {
  position: absolute; z-index: 3; left: 0; top: 0; display: grid; gap: 2px; margin: 0; padding: 8px 12px 9px; border-radius: 12px; white-space: nowrap;
  background: rgb(10 15 26 / .92); box-shadow: 0 12px 26px -12px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(154 242 30 / .35); color: var(--d-ink);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.dec-tip.is-on { opacity: 1; }
.dec-tip b { font-size: 14px; font-weight: 750; color: var(--lime); }
.dec-tip span { font-size: 12px; color: var(--d-ink-2); }

/* before / after, and the styles */
.dec-look { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.dec-ba { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px var(--d-line); }
.dec-ba button { min-height: 34px; padding: 4px 14px; border: 0; border-radius: 999px; background: none; color: var(--d-ink-2); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; transition: background-color .25s, color .25s; }
.dec-ba button.is-on { background: var(--warm); color: #2A1E0E; }
.dec-ba button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dec[data-kind="part"] .dec-ba { visibility: hidden; }
.dec-ba [data-ba-whole] { display: none; }
.dec[data-kind="whole"] .dec-ba [data-ba-new] { display: none; }
.dec[data-kind="whole"] .dec-ba [data-ba-whole] { display: inline; }
.dec-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dec-styles__h { margin-inline-end: 4px; font-size: 12px; font-weight: 700; color: var(--d-ink-2); }
.dec-style { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px 4px 5px; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; background: none; color: var(--d-ink); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: border-color .2s, background-color .2s; }
[dir="rtl"] .dec-style { padding: 4px 5px 4px 12px; }
.dec-style i { display: grid; grid-template-columns: repeat(2, 11px); grid-template-rows: repeat(2, 11px); overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / .2); }
.dec-style em { display: block; }
.dec-style:hover { border-color: rgb(255 255 255 / .36); }
.dec-style.is-on { border-color: var(--lime); background: rgb(154 242 30 / .1); }
.dec-style:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---------- the request: a light slip under the home ---------- */
.dec-req { position: relative; display: grid; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--paper); color: var(--ink-p); box-shadow: 0 26px 60px -30px rgb(0 0 0 / .85); }
.dec-req__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 8px; border-bottom: 3px double var(--paper-rule); }
.dec-req__h { font-size: 15px; font-weight: 850; }
html[lang="en"] .dec-req__h { font-family: var(--font-serif); font-size: 18px; font-weight: 520; }
.dec-req__sum { font-size: 12.5px; font-weight: 700; color: var(--ink-c); }
.dec-req__row { display: grid; grid-template-columns: minmax(64px, .5fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.dec-req__row [hidden] { display: none; }
.dec-req .dec-field > span { color: var(--ink-q); }
.dec-req input, .dec-req select, .dec-req textarea {
  padding: 5px 2px; border: 0; border-bottom: 1.5px solid var(--paper-rule); border-radius: 0; background: none; color: var(--ink-c); font-size: 14px; font-weight: 650;
}
.dec-req select { appearance: none; padding-inline-end: 16px; background: linear-gradient(45deg, rgb(0 0 0 / 0) 50%, var(--ink-c) 50%) no-repeat right 2px center / 5px 5px; cursor: pointer; }
[dir="rtl"] .dec-req select { background-position: left 2px center; }
.dec-req input::placeholder, .dec-req textarea::placeholder { color: rgb(107 113 122 / .7); font-weight: 500; }
.dec-req input:focus-visible, .dec-req select:focus-visible, .dec-req textarea:focus-visible { outline: 2px solid var(--ink-c); outline-offset: 2px; }
.dec-req input[type="number"] { -moz-appearance: textfield; }
.dec-req input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
/* in their own words: the first field, and enough on its own */
.dec-req__say { display: grid; gap: 5px; }
.dec-req__say-l { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--ink-p); cursor: text; }
.dec-req__say-l svg { flex: none; width: 18px; height: 18px; color: var(--ink-c); }
.dec-req textarea {
  min-height: 54px; resize: none; overflow: hidden; padding: 0 10px; border: 0; border-radius: 10px; line-height: 26px;
  background: repeating-linear-gradient(rgb(0 0 0 / 0) 0 25px, var(--paper-rule) 25px 26px) rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1.5px var(--paper-rule); transition: box-shadow .2s;
}
.dec-req textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink-c); }
.dec-req__ease { display: flex; flex: 1 1 260px; gap: 6px; font-size: 12px; line-height: 1.7; color: var(--ink-q); }
.dec-req__ease::before { content: "✓"; flex: none; color: #4F8F12; font-weight: 800; }
.dec-req__sum:empty { display: none; }
.dec-req__send { min-height: 44px; padding-inline: 20px; }
.dec-req__send svg { width: 20px; height: 20px; }
.dec-req__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; }
.dec-req__call { font-size: 12.5px; color: var(--ink-q); text-decoration: none; border-bottom: 1px solid transparent; }
.dec-req__call:hover { color: var(--ink-c); border-color: currentColor; }
.dec-req__call:focus-visible { outline: 2px solid var(--ink-c); outline-offset: 3px; }
.dec-req__sent { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 18px; border-radius: inherit; background: rgb(242 238 231 / .97); text-align: center; }
.dec-req__sent[hidden] { display: none; }
.dec-req__sent::before { content: "✓"; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--ink-c); color: var(--ink-c); font-size: 26px; font-weight: 800; rotate: -8deg; }
.dec-req__sent p { max-width: 40ch; font-size: 14px; font-weight: 650; line-height: 1.8; }
.dec-req__sent button { padding: 8px 16px; border: 0; border-radius: 999px; background: var(--ink-c); color: #fff; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.dec-req__nojs { display: none; }

/* ---------- wide screens: the planner | the home over its request ---------- */
@media (min-width: 861px) {
  .dec__stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "plan view";
    column-gap: clamp(20px, 3vw, 56px); height: 100vh; height: 100svh; min-height: 560px;
    padding: calc(var(--header-h) + 2.4vh) var(--qnav-clear) 3vh;
  }
  .dec__plan { grid-area: plan; justify-content: center; }
  .dec__view { grid-area: view; }
}
@media (min-width: 861px) and (max-height: 960px) {
  .dec-note { display: none; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .dec__lead { display: none; }   /* (the tabs and the jobs say what this is) */
  .dec__title { font-size: clamp(24px, 2vw, 34px); }
  html[lang="en"] .dec__title { font-size: clamp(28px, 2.4vw, 40px); }
  .dec__plan { gap: 12px; }
  .dec-note { display: none; }
  .dec-job { min-height: 36px; padding-block: 4px; }
  .dec-req { gap: 8px; padding: 12px 14px; }
}
@media (min-width: 861px) and (max-height: 690px) {
  .dec__title { max-width: none; font-size: clamp(22px, 1.8vw, 28px); }
  html[lang="en"] .dec__title { font-size: clamp(26px, 2.1vw, 32px); }
  .dec-stage__is { display: none !important; }
  .dec__plan .dec-field > span, .dec-stages legend, .dec-seg legend { display: none; }   /* (the select and the stages say what they are) */
  .dec-path b { font-size: 13px; }
  .dec-path small { display: none; }
  .dec-stage small { display: none; }
  .dec-stage span, .dec-seg span { min-height: 36px; }
  .dec-unit__map { display: none; }
  .dec-job { min-height: 32px; font-size: 12.5px; }
  .dec-job svg { width: 19px; height: 19px; }
  .dec-req__top { padding-bottom: 6px; }
  .dec-req textarea { min-height: 28px; }
  .dec-req__top { display: none; }   /* (the writing box's own label heads the slip) */
  .dec-req__photo { display: none; }
  .dec-req__say-l { font-size: 13px; }
}

/* ---------- phones: the head, the kinds, the home, the look, what the kind asks, the jobs, the request ---------- */
@media (max-width: 860px) {
  .dec__stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "paths" "home" "look" "extra" "jobs" "req"; row-gap: 16px; padding: calc(var(--header-h) + 22px) var(--gutter) calc(96px + env(safe-area-inset-bottom, 0px)); padding-inline-start: var(--qnav-clear); border-radius: 22px 22px 0 0; }
  .dec__plan, .dec__view { display: contents; }
  .dec__head { grid-area: head; }
  .dec-paths { grid-area: paths; }
  .dec-extra { grid-area: extra; }
  .dec-jobs { grid-area: jobs; }
  .dec-home { grid-area: home; height: clamp(240px, 70vw, 46svh); margin-inline: calc(-1 * var(--gutter)); }
  .dec-look { grid-area: look; }
  .dec-req { grid-area: req; }
  .dec__glow { inset-inline-end: -10%; width: 120%; top: 20%; height: 30%; }
  .dec__title { font-size: clamp(26px, 7.2vw, 34px); }
  html[lang="en"] .dec__title { font-size: clamp(30px, 8.4vw, 40px); }
  .dec-path { padding: 8px; }
  .dec-path small { white-space: normal; }
  .dec-jobs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dec-req__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dec-req__row > :is(.dec-field:nth-child(3), .dec-req__send) { grid-column: 1 / -1; }
}

/* ---------- no WebGL (flat): the planner and the request; no JS: every kind and job as text ---------- */
.dec.is-flat .dec-home, .dec.is-flat .dec-look, html:not(.js) .dec-home, html:not(.js) .dec-look { display: none; }
.dec.is-flat .dec__view { grid-template-rows: auto; align-content: center; }
html:not(.js) .dec__stage { height: auto; min-height: 0; }
html:not(.js) .dec__view { grid-template-rows: auto; align-content: center; }
html:not(.js) .dec-extra { margin-top: 6px; }
html:not(.js) .dec-job, html:not(.js) .dec-path { cursor: default; }
html:not(.js) .dec-req > :not(.dec-req__nojs) { display: none; }
html:not(.js) .dec-req__nojs { display: block; font-size: 14px; line-height: 1.9; }
html:not(.js) .dec-req__nojs a { color: var(--ink-c); font-weight: 750; }

@media (prefers-reduced-motion: reduce) {
  .dec-path, .dec-job, .dec-ba button, .dec-style { transition: none; }
}