/*
 * Additions layered on top of style.css, which is the site's existing stylesheet
 * carried over from WordPress. Kept separate so the original stays untouched and
 * a diff against the live site stays readable.
 */

/*
 * The browser's own [hidden] rule is a plain `display: none` on the element, so
 * any class that sets a display wins over it and the element stays on screen.
 * That is what kept "Send for a quote" visible on every step of the removals
 * wizard: the JS sets .hidden correctly, but .wd-cta sets display: inline-block.
 * Hiding is an instruction, not a suggestion, so it is settled here once.
 */
[hidden] { display: none !important; }

:root {
    --wd-indigo: #282560;
    --wd-red: #bb2022;
    --wd-teal: #009bb0;
    --wd-ink: #313131;
    --wd-muted: #646273;
    --wd-rule: #e2e1ec;
    --wd-ground: #f9f9f9;
}

/* ---------- accessibility ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--wd-indigo);
    color: #fff;
    padding: 10px 16px;
    z-index: 1000;
}
.skip-link:focus {
    left: 0;
}
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--wd-teal);
    outline-offset: 2px;
}

/* ---------- cookie banner ---------- */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: #fff;
    border-top: 3px solid var(--wd-indigo);
    box-shadow: 0 -6px 28px rgba(40, 37, 96, .16);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 22px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 28px;
    align-items: start;
}
.cookie-banner__title {
    margin: 0 0 4px;
    font-family: "Intro-Bold", sans-serif;
    font-size: 16px;
    color: var(--wd-indigo);
}
.cookie-banner__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wd-ink);
    max-width: 66ch;
}
.cookie-banner__text a { color: var(--wd-indigo); }

.cookie-banner__choices {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 4px;
    border-top: 1px solid var(--wd-rule);
    margin-top: 4px;
}
.cookie-banner__choices[hidden] { display: none; }

.cookie-choice {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--wd-ink);
    cursor: pointer;
}
.cookie-choice input { margin-top: 3px; flex: none; }

.cookie-banner__actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    align-items: center;
}
.cookie-btn {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 17px;
    border-radius: 999px;
    border: 1px solid var(--wd-indigo);
    background: #fff;
    color: var(--wd-indigo);
    cursor: pointer;
    white-space: nowrap;
}
/* Accept and Reject carry identical weight on purpose. */
.cookie-btn--primary {
    background: var(--wd-indigo);
    color: #fff;
}
.cookie-btn:hover { opacity: .88; }
.cookie-btn[hidden] { display: none; }

@media (max-width: 720px) {
    .cookie-banner__inner { grid-template-columns: minmax(0, 1fr); }
    .cookie-banner__actions { width: 100%; }
    .cookie-btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- shared page furniture ---------- */
.wd-section { padding: 56px 0; }
.wd-section--tint { background: var(--wd-ground); }

.wd-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

.wd-lede {
    font-size: 19px;
    line-height: 1.6;
    color: var(--wd-muted);
    max-width: 62ch;
}

.wd-prose { max-width: 70ch; }
.wd-prose h2 { font-family: "Intro-Bold", sans-serif; font-size: 24px; margin: 34px 0 10px; color: var(--wd-indigo); }
.wd-prose h3 { font-family: "Intro-Bold", sans-serif; font-size: 18px; margin: 26px 0 8px; }
.wd-prose p, .wd-prose li { font-size: 16px; line-height: 1.65; color: var(--wd-ink); }
.wd-prose ul, .wd-prose ol { padding-left: 22px; }
.wd-prose li { margin-bottom: 7px; }

.wd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.wd-card {
    background: #fff;
    border: 1px solid var(--wd-rule);
    border-radius: 6px;
    padding: 24px 22px;
}
.wd-card h3 {
    font-family: "Intro-Bold", sans-serif;
    font-size: 17px;
    margin: 0 0 8px;
    color: var(--wd-indigo);
}
.wd-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wd-muted); }

/* Numbered steps. The numbers encode a real sequence, not decoration. */
.wd-steps { counter-reset: wdstep; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wd-step { counter-increment: wdstep; }

/*
   The number sits beside the heading rather than floating above the step. It
   used to be absolutely positioned at the top, which is exactly where the step
   illustration now goes.
*/
.wd-step h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Intro-Bold", sans-serif;
    font-size: 17px;
    margin: 0 0 6px;
}
.wd-step h3::before {
    content: counter(wdstep);
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--wd-indigo);
    color: #fff;
    font-size: 14px;
    display: grid;
    place-items: center;
}
.wd-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wd-muted); }

.wd-cta {
    display: inline-block;
    background: var(--wd-red);
    color: #fff;
    font-family: "Intro-Bold", sans-serif;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 999px;
    text-decoration: none;
}
.wd-cta:hover { opacity: .9; color: #fff; }
.wd-cta--indigo { background: var(--wd-indigo); }

.wd-address {
    background: #fff;
    border: 1px solid var(--wd-rule);
    border-left: 4px solid var(--wd-teal);
    border-radius: 4px;
    padding: 18px 20px;
    font-style: normal;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- front page: light ground, one gradient band ----------
   The original site was light grey the whole way down with a single red
   gradient band before the footer. The rebuild alternated white and grey
   sections, which reads as a template rather than as their site.
*/
body { background-color: var(--wd-ground); }

/* Sections no longer alternate. Kept as a rule rather than removed from the
   markup so the class can go back to meaning something if a designer wants it. */
.wd-section--tint { background: transparent; }

/* Cards keep their own white so they still lift off the grey. */
.wd-card, .wd-address { background: #fff; }

.wd-band {
    /* The same sweep as the animation above it: indigo through to red. */
    background: linear-gradient(100deg, #282560 0%, #4d2b56 25%, #71304d 50%, #96283d 75%, #bb202e 100%);
    color: #fff;
    padding: 46px 0;
    margin-top: 8px;
}
.wd-band__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.wd-band h2 {
    font-family: "Intro-Bold", sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    margin: 0 0 6px;
    text-transform: uppercase;
}
.wd-band p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.wd-band__actions { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
/* Red on the red end of the gradient disappears, so the band inverts. */
.wd-band .wd-cta { background: #fff; color: var(--wd-indigo); box-shadow: 0 2px 0 rgba(20, 18, 50, .35); }
.wd-band .wd-cta:hover { background: #fff; color: var(--wd-indigo); }
.wd-band .wd-cta--ghost {
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .7);
    box-shadow: none;
}
.wd-band .wd-cta--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

@media (max-width: 720px) {
    .wd-band__actions { margin-left: 0; }
}

/* ---------- calls to action read as buttons ----------
   "Order from IKEA" was an indigo pill on an indigo hero, which is why it did
   not look like a button. It now has a lift of its own on any ground.
*/
.wd-cta {
    border: 0;
    box-shadow: 0 2px 0 rgba(20, 18, 50, .28);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.wd-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20, 18, 50, .22); opacity: 1; }
.wd-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(20, 18, 50, .28); }
.wd-cta--indigo:hover { background: #35317c; }

/* ---------- main navigation ----------
   Smaller and further apart. The items ran into each other at 1.15rem with a
   1rem gap, which is what made the bar look crowded.
*/
.header__menu-desktop ul a {
    font-size: .95rem;
    letter-spacing: .6px;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    transition: color .14s ease;
}
.header__menu-desktop ul li:not(:last-of-type) {
    margin-right: 1.9rem;
}

/* Uppercase indigo text on white gave nothing away as a link until the cursor
   changed. A rule that grows under the item on hover says it before the click. */
.header__menu-desktop ul a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--wd-indigo), var(--wd-red));
    transform: scaleX(0);
    transition: transform .16s ease;
}
.header__menu-desktop ul a:hover,
.header__menu-desktop ul a:focus-visible { color: var(--wd-red); }

.header__menu-desktop ul a:hover::after,
.header__menu-desktop ul a:focus-visible::after { transform: scaleX(1); }

/* The small links above the menu get the same treatment, so the whole bar
   behaves one way rather than two. */
#menu-utilities a,
#menu-utilities-1 a {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    transition: color .14s ease;
}
#menu-utilities a::after,
#menu-utilities-1 a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .16s ease;
}
#menu-utilities a:hover::after,
#menu-utilities a:focus-visible::after,
#menu-utilities-1 a:hover::after,
#menu-utilities-1 a:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .header__menu-desktop ul a::after,
    #menu-utilities a::after,
    #menu-utilities-1 a::after { transition: none; }
}

/* The primary call to action carries the same gradient as .btn-wd on the IKEA
   page, so the two front doors of the site match. */
.wd-cta--gradient {
    background: linear-gradient(to right, #282560, #71304d, #bb2022);
}
.wd-cta--gradient:hover { background: linear-gradient(to right, #322d75, #83385b, #d02630); }
.wd-cta__arrow { margin-left: 10px; }

/* ---------- the red band ----------
   The original broke the page up with one red banner of short promises. The
   rebuild ran every section together on the same grey, so nothing separated
   them. This is that banner, carrying the copy we already had.
*/
.wd-section--promise {
    background: linear-gradient(100deg, #bb2022 0%, #b12128 55%, #8d2740 100%);
    color: #fff;
    margin: 8px 0;
}
.wd-section--promise .wd-section__title { color: #fff; }

.wd-promise {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin-top: 28px;
}
.wd-promise__item h3 {
    font-family: "Intro-Bold", sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 14px 0 8px;
    color: #fff;
}
.wd-promise__item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }

.wd-promise__icon { display: block; width: 58px; height: 58px; }
.wd-promise__icon svg { width: 100%; height: 100%; }
/* Line art, drawn once here rather than repeated on every path. */
.wd-promise__icon svg * {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wd-promise__icon svg .fill { fill: #fff; stroke: none; }

@media (max-width: 900px) {
    .wd-promise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 520px) {
    .wd-promise { grid-template-columns: minmax(0, 1fr); }
}

/* The step illustrations. Decorative: the heading already says what the step is,
   so they carry an empty alt rather than repeating it to a screen reader. */
.wd-step__art {
    display: block;
    width: auto;
    height: 92px;
    margin-bottom: 14px;
}
.var__notice {
    font-size: 11.5px !important;
    line-height: 1.4;
    color: #8b8aa0 !important;
    margin-top: -10px !important;
    margin-bottom: 5px !important;
}
/* ---------- the last section, inverted ----------
   Two grey sections ran together at the foot of the page with nothing between
   them. This one goes white and its tiles go grey, which is the same trick the
   rest of the page uses the other way up.

   The lift is on hover rather than always on: four tiles glowing at once reads
   as heavy, and since each tile holds a link, moving on hover says it is one.
*/
.wd-section--panel { background: #fff; }
.wd-section--panel .wd-card {
    background: var(--wd-ground);
    border-color: #dcdbe6;
    box-shadow: 0 1px 2px rgba(20, 18, 50, .05);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.wd-section--panel .wd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 18, 50, .13);
    border-color: var(--wd-indigo);
}

@media (prefers-reduced-motion: reduce) {
    .wd-section--panel .wd-card:hover { transform: none; }
}

/* ---------- service pages: storage and interior design ----------
   Both were a wall of prose. The rates now lead, the process sits beside them,
   and the form is a section of its own rather than a link to the contact page.
*/
.sv-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .sv-top { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

.sv-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 22px 0 26px; }
.sv-rate { background: #fff; border: 1px solid var(--wd-rule); border-left: 4px solid var(--wd-red); border-radius: 6px; padding: 18px 20px; }
.sv-rate__n { display: block; font-family: "Intro-Bold", sans-serif; font-size: 30px; color: var(--wd-indigo); line-height: 1.1; }
.sv-rate__l { display: block; font-size: 14px; color: var(--wd-ink); margin-top: 2px; }
.sv-rate p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--wd-muted); }

.sv-h3 { font-family: "Intro-Bold", sans-serif; font-size: 18px; color: var(--wd-indigo); margin: 26px 0 10px; }
.sv-list { padding-left: 20px; }
.sv-list li { margin-bottom: 7px; font-size: 15.5px; line-height: 1.6; color: var(--wd-ink); }
.sv-note { font-size: 15px; line-height: 1.65; color: var(--wd-muted); max-width: 62ch; }

.sv-steps { background: #fff; border: 1px solid var(--wd-rule); border-radius: 6px; padding: 22px 24px; }
.sv-steps h3 { font-family: "Intro-Bold", sans-serif; font-size: 17px; color: var(--wd-indigo); margin: 0 0 12px; }
.sv-steps ol { margin: 0; padding-left: 20px; }
.sv-steps li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.6; color: var(--wd-muted); }
.sv-steps li strong { color: var(--wd-ink); }

/* The side column on a service page, when it holds more than the steps. */
.sv-side { display: grid; gap: 18px; }

.sv-ideas p { margin: -4px 0 14px; font-size: 14px; line-height: 1.55; color: var(--wd-muted); }
.sv-steps.sv-ideas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-ideas li { margin: 0; }
.sv-ideas li a { position: relative; display: block; border-radius: 5px; overflow: hidden; aspect-ratio: 4 / 3; background: #eceaf2; }
.sv-ideas li img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sv-ideas li span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px;
    font-size: 11.5px; line-height: 1.2; color: #fff; text-align: center;
    background: linear-gradient(to top, rgba(20, 19, 40, .75), rgba(20, 19, 40, 0));
}
.sv-ideas li a:hover img { transform: scale(1.06); }
.sv-ideas li a:focus-visible { outline: 3px solid var(--wd-teal); outline-offset: 2px; }
.sv-ideas__all { display: inline-block; margin-top: 14px; font-family: "Intro-Bold", sans-serif; font-size: 14.5px; color: var(--wd-red); text-decoration: none; }
.sv-ideas__all:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .sv-ideas li img { transition: none; } }

/* ---- the form ---- */
.sv-form { max-width: 860px; margin-top: 22px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 18px; }

.sv-field label { display: block; font-family: "Intro-Bold", sans-serif; font-size: 14px; color: var(--wd-indigo); margin-bottom: 6px; }
.sv-field label span { font-family: "Intro-Regular", sans-serif; font-weight: 400; color: var(--wd-muted); }
.sv-field input[type=text], .sv-field input[type=email], .sv-field input[type=tel],
.sv-field input[type=number], .sv-field input[type=date], .sv-field select, .sv-field textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
    padding: 11px 13px; border: 1px solid var(--wd-rule); border-radius: 6px;
    background: #fff; color: var(--wd-ink);
}
.sv-field textarea { resize: vertical; }
.sv-hint { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--wd-muted); }
.sv-inline { display: flex !important; gap: 9px; align-items: center; font-family: "Intro-Regular", sans-serif !important; color: var(--wd-ink) !important; }

.sv-check { border: 1px solid var(--wd-rule); border-radius: 6px; padding: 14px 18px 16px; margin: 0 0 18px; background: #fff; }
.sv-check legend { font-family: "Intro-Bold", sans-serif; font-size: 14px; color: var(--wd-indigo); padding: 0 6px; }
.sv-check legend span { font-family: "Intro-Regular", sans-serif; color: var(--wd-muted); }
.sv-check label { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; margin: 8px 22px 0 0; }
.sv-check--rooms label { min-width: 200px; }

.sv-estimate { background: var(--wd-ground); border: 1px solid var(--wd-rule); border-left: 4px solid var(--wd-indigo); border-radius: 6px; padding: 18px 20px; margin: 0 0 22px; }
.sv-estimate__l { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--wd-muted); }
.sv-estimate__n { display: block; font-family: "Intro-Bold", sans-serif; font-size: 32px; color: var(--wd-indigo); line-height: 1.15; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.sv-estimate__note { display: block; font-size: 13.5px; color: var(--wd-ink); }
.sv-estimate p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--wd-muted); }

/*
   Says something the customer has to know before they answer, rather than
   describing a field. Teal, so it reads as us telling them something and not as
   an error they have caused.
*/
.sv-notice {
    background: #eef8fa; border: 1px solid #b7dfe6; border-left: 3px solid var(--wd-teal);
    border-radius: 4px; padding: 12px 15px; margin: 0 0 18px;
    font-size: 13.5px; line-height: 1.55; color: var(--wd-ink);
}
.sv-notice strong { color: var(--wd-indigo); }
.sv-notice--deposit { margin: 0; }
.sv-notice ul { margin: 8px 0 0; padding-left: 20px; }
.sv-notice li { margin: 3px 0; }

.sv-accept { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; }
.sv-accept input { margin-top: 3px; flex: none; }

.sv-error { background: #fdeeee; border: 1px solid #f2cccc; border-left: 3px solid var(--wd-red); border-radius: 6px; padding: 12px 16px; color: #7d1b1c; font-size: 14.5px; margin: 0 0 18px; }

/* ---------- shared modal ----------
   The same shell the catalogue picker uses, lifted out of that page so other
   pages can have one without copying it.

   No `display` on the element itself: declaring one there beats the browser's
   own `dialog:not([open]) { display: none }`, and the box stays on screen after
   closing. Only [open] gets a layout.
*/
.wd-modal {
    margin: auto;
    width: min(760px, calc(100vw - 32px));
    max-height: min(88vh, 960px);
    background: #fff;
    color: var(--wd-ink);
    font-family: "Intro-Regular", sans-serif;
    border: 0;
    border-top: 4px solid var(--wd-red);
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 18px 60px rgba(20, 18, 50, .3);
    overflow: hidden;
}
.wd-modal[open] { display: flex; flex-direction: column; }
.wd-modal::backdrop { background: rgba(20, 18, 50, .55); }

/* style.css styles every bare button for the old template. Reset it here so the
   modal's own controls look like the rest of the site. */
:where(.wd-modal) :where(button) { background-color: transparent; border-radius: 0; padding: 0; font-family: inherit; }

.wd-modal__head {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 24px; border-bottom: 1px solid var(--wd-rule);
}
.wd-modal__head h2 { font-family: "Intro-Bold", sans-serif; font-size: 20px; color: var(--wd-indigo); margin: 0; }
.wd-modal__close {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--wd-muted); padding: 0 2px;
}
.wd-modal__close:hover { color: var(--wd-ink); }
.wd-modal__body { padding: 22px 24px 26px; overflow-y: auto; }
.wd-modal__body .sv-form { margin-top: 0; }

@media (max-width: 620px) {
    .wd-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* The invitation left on the page once the form moved into the modal. */
.sv-invite .wd-lede { margin-bottom: 22px; }
.sv-foot { display: flex; gap: 14px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.sv-cancel { font: inherit; font-size: 15px; color: var(--wd-muted); border: 0; background: none; cursor: pointer; }
.sv-cancel:hover { color: var(--wd-ink); text-decoration: underline; }

/* ---------- FAQ accordion ----------
   Lifted out of the FAQ page so a service page can carry the same treatment
   rather than a second, slightly different set of question styles.
*/
.wd-faq { border-top: 1px solid var(--wd-rule); }
.wd-faq__item { border-bottom: 1px solid var(--wd-rule); }
.wd-faq__item summary {
    cursor: pointer; padding: 16px 34px 16px 0; position: relative;
    font-family: "Intro-Bold", sans-serif; font-size: 16.5px; color: var(--wd-indigo); list-style: none;
}
.wd-faq__item summary::-webkit-details-marker { display: none; }
.wd-faq__item summary::after {
    content: "+"; position: absolute; right: 6px; top: 14px;
    font-size: 21px; color: var(--wd-red); line-height: 1;
}
.wd-faq__item[open] summary::after { content: "\2212"; }
.wd-faq__answer { padding: 0 0 18px; }
.wd-faq__answer p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--wd-ink); max-width: 68ch; }
.wd-faq__item:target summary { background: #fff8e6; }

/* A section-level FAQ heading, matching the FAQ page's own title treatment. */
.wd-faq-head { text-align: left; margin: 0 0 26px; }
.wd-faq-head h2 {
    font-family: "Intro-Light", sans-serif; font-weight: 400;
    font-size: clamp(30px, 4vw, 46px); line-height: 1.05;
    color: var(--wd-indigo); margin: 0 0 10px;
}
.wd-faq-head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--wd-muted); }

/* ---------- the storage invitation, as a band ----------
   The same sweep as the home page's band, so the two read as one system.
*/
.wd-section--invite {
    background: linear-gradient(100deg, #282560 0%, #4d2b56 25%, #71304d 50%, #96283d 75%, #bb202e 100%);
    color: #fff;
    padding: 40px 0;
}
.wd-section--invite .wd-section__title { color: #fff; margin-bottom: 6px; }
.wd-section--invite .wd-lede { color: rgba(255, 255, 255, .9); }
/* Red on the red end of the gradient disappears, so the button inverts. */
.wd-section--invite .wd-cta {
    background: #fff; color: var(--wd-indigo);
    box-shadow: 0 2px 0 rgba(20, 18, 50, .35);
}
.wd-section--invite .wd-cta:hover { background: #fff; color: var(--wd-indigo); }

/* Bullets on the side panel, which was running as unmarked lines. */
.sv-steps ol, .sv-steps ul { padding-left: 20px; }
.sv-steps ol { list-style: decimal; }
.sv-steps ul { list-style: disc; }
.sv-steps li::marker { color: var(--wd-red); font-family: "Intro-Bold", sans-serif; }
.sv-steps .sv-list li { font-size: 14.5px; line-height: 1.6; color: var(--wd-muted); margin-bottom: 10px; }
.sv-steps .sv-h3 { margin-top: 22px; }

/* ---------- the removals wizard ---------- */
.sv-progress {
    display: flex; gap: 0; margin: 0; padding: 0 24px; list-style: none;
    border-bottom: 1px solid var(--wd-rule); background: var(--wd-ground);
}
.sv-progress li {
    flex: 1; counter-increment: svstep; padding: 12px 6px; text-align: center;
    font-size: 12.5px; color: var(--wd-muted); border-bottom: 3px solid transparent;
}
.sv-progress li::before {
    content: counter(svstep) ". ";
    font-family: "Intro-Bold", sans-serif;
}
.sv-progress { counter-reset: svstep; }
.sv-progress li.on { color: var(--wd-indigo); border-bottom-color: var(--wd-red); font-family: "Intro-Bold", sans-serif; }
.sv-progress li.done { color: var(--wd-indigo); }

.sv-step { border: 0; padding: 0; margin: 0; }
.sv-step[hidden] { display: none; }
.sv-steph {
    font-family: "Intro-Bold", sans-serif; font-size: 15px; color: var(--wd-indigo);
    margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--wd-rule);
}
.sv-step .sv-steph:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.btn-back {
    font: inherit; font-size: 15px; padding: 12px 22px; cursor: pointer;
    background: #fff; color: var(--wd-indigo);
    border: 1px solid var(--wd-rule); border-radius: 999px;
}
.btn-back:hover { border-color: var(--wd-indigo); }
.sv-foot .btn-back { margin-right: 0; }

@media (max-width: 620px) {
    .sv-progress { padding: 0 12px; }
    .sv-progress li { font-size: 11px; }
}

/* The main call to action on a service page, sitting with the copy that explains
   the service rather than only in the band at the foot of it. */
.wd-cta--lg {
    font-size: 17px;
    padding: 17px 36px;
}
.sv-act { margin: 26px 0 0; }

/* ---------- how it works: the depot address ----------
   It was a plain block in a two-column split. It is the one thing on the page a
   customer has to act on, so it gets a card, a copy button and the goods-in
   hours beside it.
*/
.wd-depot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 860px) { .wd-depot { grid-template-columns: minmax(0, 1fr); } }

.wd-depot__card {
    background: var(--wd-ground); border: 1px solid var(--wd-rule);
    border-left: 4px solid var(--wd-red); border-radius: 6px; padding: 24px 26px;
}
.wd-depot__address {
    font-style: normal; font-size: 17px; line-height: 1.8; color: var(--wd-ink);
    margin: 0 0 20px;
}
.wd-depot__you {
    display: block; padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px dashed var(--wd-rule); color: var(--wd-indigo);
}
.wd-depot__actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.wd-depot__link { font-family: "Intro-Bold", sans-serif; font-size: 14.5px; color: var(--wd-indigo); }
.wd-depot__note { margin: 12px 0 0; font-size: 13.5px; color: var(--wd-muted); min-height: 1.2em; }

.wd-depot__map {
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 6px;
    padding: 24px 26px; text-align: center;
}
.wd-depot__pin { width: 74px; height: 74px; margin: 0 auto 14px; display: block; }
.wd-depot__pin .ring { fill: none; stroke: var(--wd-rule); stroke-width: 2; }
.wd-depot__pin .pin { fill: var(--wd-red); }
.wd-depot__pin .hole { fill: #fff; }
.wd-depot__map h3 { font-family: "Intro-Bold", sans-serif; font-size: 16px; color: var(--wd-indigo); margin: 0 0 6px; }
.wd-depot__map p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--wd-muted); }
.wd-depot__hours { border-top: 1px solid var(--wd-rule); padding-top: 12px; }
.wd-depot__hours strong { color: var(--wd-ink); }

/* ---------- before you order ----------
   Was a bulleted list of long sentences. Each point now leads with what it is
   about, so the page can be skimmed for the one that applies.
*/
.wd-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wd-points li {
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 6px;
    padding: 16px 20px 16px 22px; position: relative;
    font-size: 15.5px; line-height: 1.65; color: var(--wd-ink);
}
.wd-points li::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
    background: var(--wd-red); border-radius: 0 2px 2px 0;
}
.wd-points strong {
    display: block; font-family: "Intro-Bold", sans-serif; font-size: 13px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--wd-indigo); margin-bottom: 4px;
}

/* ---------- contact ----------
   The details were three paragraphs of bold labels and the form was loose
   fields on the page ground, so neither read as the thing to act on. Details
   are now rows with an icon, and the form sits on its own panel.
*/
/* Five twelfths of the row for the details, seven for the photo, and both
   columns stretch so the photo finishes level with the third tile. */
.ct-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: stretch; }
@media (max-width: 900px) { .ct-top { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.ct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ct-list li {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 8px;
    padding: 8px 20px;
}
.ct-ico {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
    background: var(--wd-ground); display: grid; place-items: center;
}
.ct-ico svg {
    width: 21px; height: 21px; fill: none;
    stroke: var(--wd-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ct-body { min-width: 0; }
.ct-label {
    display: block; font-family: "Intro-Bold", sans-serif; font-size: 12.5px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--wd-indigo); margin-bottom: 4px;
}
.ct-value {
    display: inline-block; font-family: "Intro-Bold", sans-serif; font-size: 19px;
    color: var(--wd-ink); text-decoration: none; word-break: break-word;
}
a.ct-value:hover { color: var(--wd-red); }
.ct-note { display: block; margin-top: 5px; font-size: 13.5px; color: var(--wd-muted); }
.ct-address { font-style: normal; font-size: 16px; line-height: 1.65; color: var(--wd-ink); margin: 0; }

.ct-figure { margin: 0; }
.ct-figure img {
    display: block; width: 100%; height: 100%;
    object-fit:cover; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(20, 18, 50, .14);
}
@media (max-width: 900px) { .ct-figure img { height: 300px; } }

.ct-panel {
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 10px;
    padding: 30px 34px 34px;
    box-shadow: 0 6px 20px rgba(20, 18, 50, .07);
}
@media (max-width: 620px) { .ct-panel { padding: 22px 20px 26px; } }
.ct-panel .wd-section__title { margin-top: 0; }
.ct-panel .wd-lede { margin-bottom: 6px; }

.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 20px; }

.wd-form label { display: block; font-family: "Intro-Bold", sans-serif; font-size: 14px; margin: 16px 0 6px; color: var(--wd-indigo); }
.wd-form input, .wd-form select, .wd-form textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--wd-rule);
    border-radius: 6px; font: inherit; font-size: 15px; background: #fff; color: var(--wd-ink);
}
.wd-form input:focus, .wd-form select:focus, .wd-form textarea:focus { outline: none; border-color: var(--wd-indigo); }
.wd-form textarea { resize: vertical; }
.wd-form button { margin-top: 22px; cursor: pointer; }
.wd-optional { font-family: "Intro-Regular", sans-serif; font-weight: 400; color: var(--wd-muted); }

.wd-notice { padding: 13px 16px; border-radius: 6px; margin: 18px 0 0; font-size: 15px; }
.wd-notice--ok { background: #e6f4ea; border: 1px solid #b7dfc4; color: #17603a; }

/* The details and the form are one thought, so they sit closer than two
   unrelated sections would. */
.ct-form { padding-top: 0; }

/* A reading-width column that starts where the page title starts, rather than
   sitting centred in the page with the heading above it left aligned. */
.wd-narrow { max-width: 820px; }

/* ---------- pricing ----------
   The prices and sizes come from the rate table now, so this styles a list of
   whatever the office has set rather than six hand-written cards.
*/
.pr-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .pr-top { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.pr-figure {
    margin: 0; background: #fff; border: 1px solid var(--wd-rule); border-radius: 10px;
    padding: 20px 22px 16px; text-align: center;
}
.pr-figure figcaption { margin-top: 6px; font-size: 13.5px; color: var(--wd-muted); }

.wd-box { display: block; width: 100%; height: auto; }
.wd-box__dims text {
    font-family: "Intro-Bold", sans-serif; font-size: 13px; fill: var(--wd-ink);
}

.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.pr-card {
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 8px;
    padding: 16px 18px 18px; text-align: center;
}
.pr-card__art { margin-bottom: 6px; }
.pr-card__art .wd-box__dims text { font-size: 20px; }
.pr-card__price {
    display: block; font-family: "Intro-Bold", sans-serif; font-size: 27px;
    color: var(--wd-red); line-height: 1.1;
}
.pr-card__name {
    display: block; font-family: "Intro-Bold", sans-serif; font-size: 15px;
    color: var(--wd-indigo); margin-top: 2px;
}
.pr-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--wd-muted); }

.pr-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px; }
.pr-notes h3 { font-family: "Intro-Bold", sans-serif; font-size: 18px; color: var(--wd-indigo); margin: 0 0 12px; }
.pr-notes .sv-list { list-style: disc; }
.pr-notes .sv-list li::marker { color: var(--wd-red); }

/* ---------- news ----------
   The old page was a list of headlines with no pictures. One card per post, all
   the same size, three across: the tiles are a list, so they read as one.
*/
.nw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1000px) { .nw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 640px) { .nw-cards { grid-template-columns: minmax(0, 1fr); } }

.nw-card {
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 10px; overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.nw-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 18, 50, .1); }

/* The card is one link, so the whole tile is clickable rather than the title. */
.nw-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.nw-card__art { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nw-card__art--none { background: var(--wd-ground); border-bottom: 1px solid var(--wd-rule); }

/* The date sits on the bottom edge whatever length the intro runs to, so a row
   of cards lines up. */
.nw-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.nw-card h2 {
    font-family: "Intro-Bold", sans-serif; font-size: 18px; line-height: 1.35;
    color: var(--wd-indigo); margin: 0 0 9px;
}
.nw-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--wd-ink); }
.nw-card time {
    display: block; margin-top: auto; font-size: 12.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--wd-muted);
}
.nw-card__link:hover h2 { color: var(--wd-red); }

/* ---------- one post ---------- */
.nw-post__back { margin: 0 0 18px; font-size: 14.5px; }
.nw-post h1 {
    font-family: "Intro-Regular", sans-serif; font-weight: 400;
    font-size: clamp(30px, 4.4vw, 44px); line-height: 1.15; color: var(--wd-ink); margin: 0 0 10px;
}
.nw-post__meta { margin: 0 0 24px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--wd-muted); }
.nw-post__art { display: block; width: 100%; border-radius: 10px; margin-bottom: 26px; }
.nw-post__body { font-size: 17px; line-height: 1.75; color: var(--wd-ink); }
.nw-post__body p { margin: 0 0 18px; }
.nw-post__body h2 { font-family: "Intro-Bold", sans-serif; font-size: 22px; color: var(--wd-indigo); margin: 30px 0 12px; }
.nw-post__body h3 { font-family: "Intro-Bold", sans-serif; font-size: 18px; color: var(--wd-indigo); margin: 26px 0 10px; }
.nw-post__body ul, .nw-post__body ol { margin: 0 0 18px; padding-left: 22px; }
.nw-post__body li { margin-bottom: 8px; }
.nw-post__body li::marker { color: var(--wd-red); }

.nw-more { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nw-more li {
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 8px; padding: 14px 18px;
}
.nw-more a { font-family: "Intro-Bold", sans-serif; font-size: 15.5px; color: var(--wd-indigo); text-decoration: none; }
.nw-more a:hover { color: var(--wd-red); }
.nw-more time { display: block; margin-top: 4px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wd-muted); }

/* ---------- what3words lookup ----------
   The suggestion list under the delivery box. Styled here rather than on the
   page because both forms that collect a square use it, and they use different
   stylesheets otherwise.
*/
.w3w-box { position: relative; }
.w3w-list {
    position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
    margin: 3px 0 0; padding: 4px; list-style: none;
    background: #fff; border: 1px solid var(--wd-rule); border-radius: 6px;
    box-shadow: 0 8px 22px rgba(20, 18, 50, .16);
    max-height: 260px; overflow-y: auto;
}
.w3w-list li {
    padding: 8px 10px; border-radius: 4px; cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
}
.w3w-list li:hover, .w3w-list li.on { background: var(--wd-ground); }
.w3w-words {
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    font-size: 14px; color: var(--wd-indigo);
}
.w3w-place { font-size: 12.5px; color: var(--wd-muted); }
.w3w-note {
    margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #6b5200;
    background: #fdf7e3; border: 1px solid #e8d391; border-radius: 4px; padding: 7px 10px;
}
.w3w-note[hidden] { display: none; }

/* The find-address button sits where a label would be, so it needs pushing down
   to line up with the postcode box beside it. */
.sv-field--find { display: flex; align-items: flex-end; padding-bottom: 2px; }
.sv-field--find .pc-box { margin-bottom: 0; }

/* ---------- postcode lookup ----------
   Shared, because three forms use it now: the account address, and both ends of
   a removals quote. It lived on the account page and the removals button came
   out unstyled.
*/
.pc-box { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pc-find {
    font: inherit; font-size: 14px; padding: 9px 16px; cursor: pointer;
    border: 1px solid var(--wd-indigo); border-radius: 6px; background: #fff; color: var(--wd-indigo);
    margin-top: 0 !important;
}
.pc-find:hover { background: var(--wd-ground); }
.pc-find:disabled { opacity: .6; cursor: default; }
.pc-list {
    padding: 9px 11px; border: 1px solid var(--wd-rule); border-radius: 6px;
    font: inherit; font-size: 14.5px; max-width: 100%; background: #fff; color: var(--wd-ink);
}
.pc-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wd-muted); }
.pc-note[hidden] { display: none; }