:root {
  --bg: #f7f2ea;
  --bg-2: #fffdf9;
  --ink: #1f2937;
  --muted: #5f6b7a;
  --line: #d9ccbd;
  --line-soft: #ebe2d7;
  --panel: rgba(255, 253, 249, 0.94);
  --accent: #8f5b3e;
  --accent-2: #355f74;
  --accent-3: #d18b63;
  --shadow: 0 26px 60px rgba(52, 40, 28, 0.12);
  --radius: 24px;
  --radius-sm: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(209, 139, 99, 0.14), transparent 26%),
    linear-gradient(180deg, #f8f2e8 0%, #f3ede4 100%);
  font: 16px/1.6 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(248, 242, 232, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(111, 91, 72, 0.08);
}
.topbar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(143, 91, 62, 0.16), rgba(53, 95, 116, 0.16));
  border: 1px solid rgba(143, 91, 62, 0.18);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.brand-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.brand-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--ink);
}
.nav a.cta-link {
  background: #1f2937;
  color: white;
}
.hero {
  padding: 40px 0 28px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 28px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(143, 91, 62, 0.08);
  color: var(--accent);
  border: 1px solid rgba(143, 91, 62, 0.14);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 14px 0 14px;
  font-size: clamp(40px, 6vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero p {
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 660px;
}
.button-row, .pill-row, .feature-list, .product-grid, .gallery-grid, .step-grid, .faq-grid, .assurance-grid {
  display: grid;
  gap: 14px;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
}
.btn-primary {
  background: #1f2937;
  color: white;
}
.btn-secondary {
  background: rgba(255,255,255,0.75);
  color: var(--ink);
  border-color: rgba(31,41,55,0.1);
}
.pill-row {
  /* Equal 170px columns forced the price pill to wrap onto three lines and
     left the fourth pill stranded on a row of its own. Pills should size
     to their own content and flow. */
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  margin-top: 18px;
}
.pill {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(31,41,55,0.06);
  color: var(--muted);
  box-shadow: var(--shadow);
}
.card, .art-card, .step, .faq, .assurance, .cta-banner {
  background: var(--panel);
  border: 1px solid rgba(31,41,55,0.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card {
  padding: 20px;
}
.hero-card img {
  border-radius: 18px;
}
.section {
  padding: 22px 0;
}
.section-heading {
  margin-bottom: 18px;
}
.section-heading h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
}
.section-heading p {
  margin: 0;
  color: var(--muted);
  max-width: 760px;
}
.product-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
  padding: 22px;
}
.card h3, .art-card h3, .step h3, .faq h3, .assurance h3 {
  margin: 0 0 8px;
  line-height: 1.15;
}
.card p, .art-card p, .step p, .faq p, .assurance p, .meta {
  margin: 0;
  color: var(--muted);
}
.card .small-link {
  display: inline-flex;
  margin-top: 14px;
  font-weight: 700;
}
.gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.art-card {
  overflow: hidden;
}
.art-card .art-copy {
  padding: 18px 20px 22px;
}
.art-frame {
  padding: 20px;
  background: linear-gradient(180deg, rgba(53,95,116,0.08), rgba(143,91,62,0.06));
}
.step-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.step {
  padding: 22px;
}
.step-number {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(143, 91, 62, 0.1);
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 14px;
}
.assurance-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.assurance {
  padding: 20px;
}
.quote-band {
  margin: 18px 0 4px;
  padding: 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(143,91,62,0.08), rgba(53,95,116,0.08));
  border: 1px solid rgba(31,41,55,0.06);
}
.quote-band blockquote {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.18;
}
.quote-band p {
  margin: 10px 0 0;
  color: var(--muted);
}
.faq-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.faq {
  padding: 22px;
}
.cta-banner {
  padding: 28px;
  display: grid;
  gap: 16px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}
.kicker {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer {
  padding: 34px 0 60px;
  color: var(--muted);
  font-size: 14px;
}
.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 26px;
  align-items: start;
}
.meta-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.meta-chip {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(31,41,55,0.06);
  color: var(--muted);
}
.stacked-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .hero-grid,
  .split-hero,
  .cta-banner {
    grid-template-columns: 1fr;
  }
  .topbar .inner {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .wrap {
    width: min(100% - 22px, 1180px);
  }
  .nav {
    gap: 6px;
  }
  .nav a,
  .btn {
    width: 100%;
  }
  .button-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Gallery frames -------------------------------------------------
   The art cards previously had no sizing at all, so a portrait and a
   landscape print in the same row rendered at wildly different heights
   and the row read as broken. Each frame is now a fixed-aspect box and
   the artwork is contained inside it: card heights match, and every
   piece keeps its own true proportions instead of being stretched. */
.art-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  /* A SQUARE frame, not a portrait one. In a 4/5 box a portrait print fills
     the height while a landscape print fills only the width, so the landscape
     piece rendered visibly smaller than its neighbours and the row looked
     unbalanced. A square equalises the AREA each orientation occupies
     (0.67 vs 0.75 of the box) the way a gallery wall would. */
  aspect-ratio: 1 / 1;
  padding: 22px;
  overflow: hidden;
  /* Was a blue-to-brown gradient inherited from .art-frame's old rule:
     whichever print left more frame showing picked up more of the blue
     end, so the three cards read as different colours. Flat warm wall. */
  background: #efe7db;
}
.art-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(40, 30, 20, 0.18), 0 2px 6px rgba(40, 30, 20, 0.10);
}
.hero-card img {
  display: block;
  width: 100%;
  height: auto;
}
.footer p { margin: 0 0 6px; }
.footer-meta { opacity: 0.72; font-size: 0.92em; }

/* Product cards carry different amounts of copy, which left each
   "View product" link floating at a different height across the row. */
.product-grid .card {
  display: flex;
  flex-direction: column;
}
.product-grid .card .small-link {
  margin-top: auto;
  padding-top: 10px;
}

/* --- Brand mark -----------------------------------------------------
   The pin from the artwork itself: ring, dot, and a suggestion of the
   street grid it sits on. Replaces the "PWH" initials, which read as a
   placeholder and told a first-time visitor nothing. */
.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: block;
  background: none;
  border: 0;
  padding: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.pwh-disc { fill: #f4ece1; stroke: rgba(143, 91, 62, 0.40); stroke-width: 1.5; }
.pwh-grid path {
  fill: none;
  /* Heavier and darker than the first attempt: two lines at 3.2 survive being
     scaled to a favicon, where four at 1.4 turned into grey haze. */
  stroke: rgba(143, 91, 62, 0.55);
  stroke-width: 3.2;
  stroke-linecap: butt;
}
.pwh-ring { fill: none; stroke: #8f5b3e; stroke-width: 3; }
.pwh-dot { fill: #8f5b3e; }
.brand-title {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.005em;
}

/* ---- rooms ---------------------------------------------------------------
   Wall art is bought on scale as much as on looks: "18x24" means nothing until
   you see it above a sofa. Every other image on this page is the artwork on its
   own, which answers "is it beautiful" but never "how big is it". */
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 26px 0 14px;
}
.rooms figure { margin: 0; }
.rooms img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.rooms figcaption {
  margin-top: 9px; font-size: 13.5px; color: var(--muted);
}
.rooms-note { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }

/* ---- phones --------------------------------------------------------------
   "View product" is the only way into a product page from the collection, so
   it is navigation, not a footnote. At 36px it was just under a comfortable
   thumb; on a phone it gets the full 44. */
@media (max-width: 620px) {
  .small-link { display: inline-block; padding: 12px 0; min-height: 44px; }
  .rooms { gap: 16px; }
}

/* ---- policy footer -------------------------------------------------------
   The homepage carries the same footer as the policy pages but loads THIS
   stylesheet, not pwh.css — so the styling written over there never reached it
   and the links sat unstyled at 20px. Two stylesheets, one component: whatever
   is true for it has to be said twice, or said somewhere both can see. */
.policy-foot { padding: 1.5rem 0 3rem; font-size: .875rem; text-align: center; color: var(--muted); }
.policy-foot p { margin: .25rem 0; }
.policy-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 620px) {
  .policy-foot p { line-height: 2.2; }
  .policy-foot a { display: inline-block; padding: 6px 2px; }
}