/* ==========================================================================
   Crabtree & Hargreeves — storefront styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Imagery
   Replace these URLs with your own photography. If an image fails to load,
   a neutral tone is shown in its place.
   -------------------------------------------------------------------------- */
:root {
  --img-hero: url("https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1800&q=80");
  --img-office: url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1000&q=80");
  --img-home: url("https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=1000&q=80");
  --img-lettings: url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1000&q=80");
  --img-hotel: url("https://images.unsplash.com/photo-1566665797739-1674de7a421a?auto=format&fit=crop&w=1000&q=80");
  --img-about: url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1400&q=80");
  --img-about-2: url("https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1400&q=80");
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink: #1D2B30;
  --ink-2: #2A3B41;
  --paper: #F7F7F5;
  --white: #FFFFFF;
  --stone: #E6E4DE;
  --stone-2: #D6D3CA;
  --slate: #55636A;
  --brass: #A27E45;
  --brass-deep: #876834;
  --brass-soft: #C9AE7E;
  --line: rgba(29, 43, 48, .14);
  --line-strong: rgba(29, 43, 48, .32);
  --on-ink: rgba(247, 247, 245, .74);
  --on-ink-line: rgba(247, 247, 245, .2);
  --danger: #9B2C2C;

  --font-display: "Libre Caslon Display", "Big Caslon", "Libre Baskerville", Baskerville, Georgia, serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.5rem, 1.28rem + .9vw, 1.875rem);
  --fs-xl: clamp(2.125rem, 1.5rem + 2.3vw, 3.25rem);
  --fs-2xl: clamp(2.875rem, 1.7rem + 4.6vw, 5.5rem);

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --space-section: clamp(72px, 9vw, 136px);
  --radius: 3px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.section--ink :focus-visible,
.site-footer :focus-visible { outline-color: var(--paper); }

::selection { background: var(--brass-soft); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--tight { padding-top: clamp(24px, 3vw, 40px); }
.section--stone { background: var(--stone); }
.section--ink { background: var(--ink); color: var(--paper); }

.section-head { max-width: 46rem; margin-bottom: clamp(36px, 4.5vw, 64px); }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  max-width: none;
}
.section-head__text {
  margin-top: 16px;
  max-width: 38rem;
  color: var(--slate);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.section--ink .section-head__text { color: var(--on-ink); }

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.08;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-2); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--white); }
.btn--ghost-light { background: transparent; border-color: rgba(247, 247, 245, .4); color: var(--paper); }
.btn--ghost-light:hover { border-color: var(--paper); }
.btn--sm { min-height: 40px; padding: 0 18px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; }

.text-link {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--brass);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.text-link:hover { border-color: var(--ink); }

.link-btn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--slate);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.icon-btn:hover { background: var(--stone); }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  line-height: 1.1;
  text-decoration: none;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: .005em;
  white-space: nowrap;
}
.brand__tag {
  margin-top: 4px;
  color: var(--slate);
  font-size: .75rem;
  letter-spacing: .02em;
}

.nav { display: flex; align-items: center; gap: 32px; }
.nav__list { display: flex; gap: 28px; list-style: none; }
.nav__list a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { border-bottom-color: var(--brass); }

.site-header__actions { display: flex; align-items: center; gap: 6px; }

.basket-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px 0 12px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.basket-btn:hover { border-color: var(--ink); }
.basket-btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--stone);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.basket-btn__count.has-items { background: var(--ink); color: var(--paper); }

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s;
}
.menu-btn__bars { position: relative; }
.menu-btn__bars::before,
.menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { top: -7px; }
.menu-btn__bars::after { top: 7px; }
.nav-open .menu-btn__bars { background: transparent; }
.nav-open .menu-btn__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .menu-btn__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
  .menu-btn { display: inline-flex; }
  .basket-btn__label { display: none; }
  .brand__tag { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 16px var(--gutter) 40px;
    background: var(--paper);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .nav-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
  }
  .nav__list a[aria-current="page"] { border-bottom-color: var(--brass); }
  .nav__cta { align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   Photography blocks
   -------------------------------------------------------------------------- */
.photo {
  background-color: var(--stone-2);
  background-image: var(--img, none), linear-gradient(160deg, #DAD6CD 0%, #C7C2B6 100%);
  background-size: cover;
  background-position: center;
}
.photo--hero { --img: var(--img-hero); }
.photo--office { --img: var(--img-office); }
.photo--home { --img: var(--img-home); }
.photo--lettings { --img: var(--img-lettings); }
.photo--hotel { --img: var(--img-hotel); }
.photo--about { --img: var(--img-about); }
.photo--about-2 { --img: var(--img-about-2); }

/* --------------------------------------------------------------------------
   Hero with dimension lines
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(32px, 5vw, 80px) clamp(72px, 9vw, 128px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}

.hero__title {
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.hero__lede {
  max-width: 33rem;
  margin-top: 28px;
  color: var(--slate);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__note {
  max-width: 33rem;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--slate);
  font-size: var(--fs-sm);
}

.measure { margin: 0; }
.measure__frame { position: relative; padding: 46px 56px 0 0; }
.measure__photo { width: 100%; aspect-ratio: 4 / 3.3; }

.measure__line { position: absolute; background: var(--brass); }
.measure__line--h {
  top: 18px; left: 0; right: 56px;
  height: 1px;
  animation: draw-x .9s var(--ease) .2s both;
}
.measure__line--v {
  top: 46px; bottom: 0; right: 22px;
  width: 1px;
  animation: draw-y .9s var(--ease) .45s both;
}
/* architect's 45° ticks at each end */
.measure__line::before,
.measure__line::after {
  content: "";
  position: absolute;
  background: var(--brass);
}
.measure__line--h::before,
.measure__line--h::after { top: -7px; width: 1px; height: 15px; transform: rotate(45deg); }
.measure__line--h::before { left: 0; }
.measure__line--h::after { right: 0; }
.measure__line--v::before,
.measure__line--v::after { left: -7px; width: 15px; height: 1px; transform: rotate(45deg); }
.measure__line--v::before { top: 0; }
.measure__line--v::after { bottom: 0; }

.measure__label {
  position: absolute;
  top: 50%; left: 50%;
  padding: 0 12px;
  background: var(--paper);
  color: var(--brass-deep);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: fade-in .5s ease 1.05s both;
}
.measure__line--v .measure__label { transform: translate(-50%, -50%) rotate(-90deg); }

.measure__caption {
  max-width: 44ch;
  margin-top: 16px;
  color: var(--slate);
  font-size: var(--fs-sm);
}

@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { max-width: 12ch; }
  .measure__frame { padding: 40px 44px 0 0; }
  .measure__line--h { top: 14px; right: 44px; }
  .measure__line--v { top: 40px; right: 16px; }
}

/* --------------------------------------------------------------------------
   Intro and sectors
   -------------------------------------------------------------------------- */
.intro { padding-top: 0; }
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(28px, 6vw, 96px);
  padding-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--line);
}
.intro__statement {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.12;
  text-wrap: balance;
}
.intro__body p { color: var(--slate); }
.intro__body p + p { margin-top: 16px; }
.intro__body .text-link { margin-top: 28px; }

.sectors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(56px, 7vw, 104px);
}
.sector { display: block; text-decoration: none; }
.sector__photo { aspect-ratio: 3 / 4; transition: filter .3s var(--ease); }
.sector:hover .sector__photo { filter: brightness(.93); }
.sector__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
}
.sector__text { margin-top: 6px; color: var(--slate); font-size: var(--fs-sm); line-height: 1.5; }

@media (max-width: 920px) {
  .intro__grid { grid-template-columns: 1fr; }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 480px) {
  .sectors { grid-template-columns: 1fr; }
  .sector__photo { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Values
   -------------------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 56px);
  list-style: none;
}
.value__icon {
  width: 40px; height: 40px;
  fill: none;
  stroke: var(--brass-deep);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.value__title { margin-top: 20px; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.value__text { margin-top: 8px; color: var(--slate); font-size: var(--fs-sm); }

@media (max-width: 960px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Product grid and cards
   -------------------------------------------------------------------------- */
.grid--products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px);
}
.grid--range { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1024px) { .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--products, .grid--range { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .grid--products, .grid--range { grid-template-columns: 1fr; } }

.card__link { display: block; text-decoration: none; }
.card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--stone);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card__link:hover .card__media img { transform: scale(1.025); }
.card__body { padding-top: 16px; }
.card__cat { color: var(--slate); font-size: var(--fs-xs); letter-spacing: .02em; }
.card__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  line-height: 1.25;
}
.card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.card__price { margin-top: 8px; font-size: var(--fs-sm); }

.price { font-variant-numeric: tabular-nums; }
.price__amount { font-weight: 600; }
.price__per { color: var(--slate); font-weight: 400; }
.price--quote .price__amount { font-weight: 500; color: var(--slate); }

.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--stone);
  color: rgba(29, 43, 48, .26);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  letter-spacing: .02em;
}

/* Skeleton loaders */
.sk {
  display: block;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--stone) 0%, #EFEEE9 50%, var(--stone) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.sk--line { width: 80%; height: 13px; margin-top: 10px; }
.sk--short { width: 38%; }
.sk--price { width: 28%; }
.sk--title { width: 70%; height: 34px; margin-top: 14px; }
.sk--block { width: 100%; height: 90px; margin-top: 24px; }
.sk--btn { width: 100%; height: 50px; margin-top: 28px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty and error states */
.status { grid-column: 1 / -1; max-width: 36rem; padding: 24px 0; }
.status__title { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; }
.status__text { margin-top: 10px; color: var(--slate); }
.status__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 56px);
  list-style: none;
}
.step { padding-top: 24px; border-top: 1px solid var(--on-ink-line); }
.step__num {
  display: block;
  color: var(--brass-soft);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
}
.step__title { margin-top: 24px; font-size: var(--fs-base); font-weight: 600; }
.step__text { margin-top: 8px; color: var(--on-ink); font-size: var(--fs-sm); }

@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 56px);
}
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.42;
}
.quote figcaption { font-size: var(--fs-sm); }
.quote figcaption strong { display: block; font-weight: 600; }
.quote figcaption span { color: var(--slate); }

@media (max-width: 920px) { .quotes { grid-template-columns: 1fr; max-width: 40rem; } }

/* --------------------------------------------------------------------------
   Call to action band
   -------------------------------------------------------------------------- */
.cta { padding-block: clamp(64px, 8vw, 112px); background: var(--stone); }
.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.08;
}
.cta__text {
  max-width: 38rem;
  margin-top: 14px;
  color: var(--slate);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(56px, 7vw, 96px) 32px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 40px;
}
.footer__brand .brand__name { color: var(--paper); font-size: 1.625rem; }
.footer__about { max-width: 30rem; margin-top: 16px; }
.footer__contact { display: grid; gap: 6px; margin-top: 24px; list-style: none; }
.footer__contact a,
.footer__links a { text-decoration: none; }
.footer__contact a:hover,
.footer__links a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer__heading { margin-bottom: 14px; color: var(--paper); font-size: var(--fs-sm); font-weight: 600; }
.footer__links { display: grid; gap: 10px; list-style: none; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--on-ink-line);
  color: rgba(247, 247, 245, .62);
  font-size: var(--fs-xs);
}

@media (max-width: 920px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Inner page header
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(40px, 6vw, 96px) clamp(24px, 3vw, 40px); }
.page-head__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.7rem + 3vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.page-head__lede {
  max-width: 40rem;
  margin-top: 20px;
  color: var(--slate);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.page-head__meta { margin-top: 16px; color: var(--slate); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Range toolbar
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: clamp(28px, 3vw, 44px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.toolbar__end { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.toolbar__count { color: var(--slate); font-size: var(--fs-sm); white-space: nowrap; }

.select {
  min-height: 38px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D2B30' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: var(--fs-sm);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.band { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.band__title { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; }
.band__text { max-width: 36rem; margin-top: 8px; color: var(--slate); }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */
.section--pdp { padding-top: clamp(20px, 3vw, 36px); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 3vw, 36px);
  color: var(--slate);
  font-size: var(--fs-xs);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(32px, 5vw, 80px);
}
.pdp__gallery { position: sticky; top: calc(var(--header-h) + 24px); }
.pdp__main { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--stone); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.thumb {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: var(--stone);
  border: 0;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s var(--ease);
}
.thumb:hover { opacity: 1; }
.thumb[aria-current="true"] { opacity: 1; outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__cat { color: var(--slate); font-size: var(--fs-sm); text-decoration: none; }
a.pdp__cat:hover { color: var(--ink); text-decoration: underline; }
.pdp__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3.125rem);
  line-height: 1.06;
  text-wrap: balance;
}
.pdp__price { margin-top: 20px; font-size: var(--fs-lg); }
.pdp__price .price__amount { font-weight: 500; }
.pdp__billing { margin-top: 4px; color: var(--slate); font-size: var(--fs-sm); }
.pdp__desc { margin-top: 24px; }
.pdp__desc p + p { margin-top: 14px; }

.pdp__buy { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pdp__buy .btn { flex: 1 1 150px; }
.pdp__note { margin-top: 16px; color: var(--slate); font-size: var(--fs-sm); }
.pdp__note a { color: var(--ink); text-underline-offset: 3px; }

.pdp__block { margin-top: 40px; }
.pdp__block-title { margin-bottom: 12px; font-size: var(--fs-sm); font-weight: 600; }

.qty {
  display: inline-flex;
  align-items: stretch;
  min-height: 50px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.qty button {
  width: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.125rem;
  cursor: pointer;
}
.qty button:hover { background: var(--stone); }
.qty input {
  width: 46px;
  background: transparent;
  border: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { min-height: 34px; }
.qty--sm button { width: 32px; font-size: 1rem; }
.qty__val { display: grid; place-items: center; min-width: 28px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.dash-list { display: grid; gap: 8px; list-style: none; }
.dash-list li { position: relative; padding-left: 22px; }
.dash-list li::before {
  content: "";
  position: absolute;
  top: .8em; left: 0;
  width: 10px; height: 1px;
  background: var(--brass);
}

.specs { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.specs th,
.specs td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.specs tr:first-child th,
.specs tr:first-child td { border-top: 1px solid var(--line); }
.specs th { width: 40%; padding-right: 16px; color: var(--slate); font-weight: 500; }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  position: relative;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before,
.accordion summary::after {
  content: "";
  position: absolute;
  top: 50%; right: 4px;
  width: 14px; height: 1.5px;
  background: var(--ink);
  transition: transform .25s var(--ease);
}
.accordion summary::after { transform: rotate(90deg); }
.accordion details[open] summary::after { transform: rotate(0deg); }
.accordion__body { padding: 0 32px 22px 0; color: var(--slate); }
.accordion__body p + p { margin-top: 10px; }
.accordion__body a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 920px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.split__photo { aspect-ratio: 4 / 5; }
.split__body .h2 { margin-bottom: 24px; }
.split__body p { color: var(--slate); }
.split__body p + p { margin-top: 16px; }

.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px clamp(32px, 5vw, 80px);
  list-style: none;
}
.service { padding-top: 24px; border-top: 1px solid var(--line); }
.service__title { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; }
.service__text { margin-top: 10px; color: var(--slate); }
.service .dash-list { margin-top: 16px; font-size: var(--fs-sm); }

.audiences {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
  list-style: none;
}
.audience { padding-top: 20px; border-top: 1px solid var(--line); }
.audience__title { font-weight: 600; }
.audience__text { margin-top: 8px; color: var(--slate); font-size: var(--fs-sm); }

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px 40px;
  max-width: 44rem;
  font-size: var(--fs-sm);
}
.facts dt { color: var(--slate); }
.facts a { text-underline-offset: 3px; }

@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; }
  .split__photo { aspect-ratio: 4 / 3; }
  .services { grid-template-columns: 1fr; }
  .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .audiences { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 4px; }
  .facts dd { margin-bottom: 12px; }
}

/* --------------------------------------------------------------------------
   Contact and forms
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field .opt { color: var(--slate); font-weight: 400; }
.input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.4;
}
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
textarea.input { min-height: 180px; resize: vertical; line-height: 1.55; }
select.input {
  padding-right: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D2B30' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center;
  -webkit-appearance: none;
  appearance: none;
}
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__privacy { max-width: 30rem; color: var(--slate); font-size: var(--fs-xs); }
.form__privacy a { color: var(--ink); }
.form__error { grid-column: 1 / -1; color: var(--danger); font-size: var(--fs-sm); }
.form__error:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sent { padding-block: 8px; }
.sent:focus { outline: none; }
.sent__title { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.1; }
.sent__text { max-width: 34rem; margin-top: 16px; color: var(--slate); font-size: var(--fs-md); line-height: 1.5; }
.sent .btn { margin-top: 28px; }

.aside-block + .aside-block { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.aside-title { margin-bottom: 10px; font-weight: 600; }
.aside-block p,
.aside-block address { color: var(--slate); font-style: normal; }
.aside-block a { color: var(--ink); text-underline-offset: 3px; }
.aside-block .dash-list { color: var(--slate); font-size: var(--fs-sm); }
.aside-link { font-family: var(--font-display); font-size: 1.375rem; text-decoration: none; }
.aside-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }

@media (max-width: 920px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(32px, 6vw, 96px);
}
.side-nav {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  display: grid;
  gap: 4px;
  list-style: none;
  font-size: var(--fs-sm);
}
.side-nav a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 1px solid var(--line);
  color: var(--slate);
  text-decoration: none;
}
.side-nav a:hover { border-left-color: var(--brass); color: var(--ink); }
.faq__group + .faq__group { margin-top: clamp(48px, 5vw, 72px); }
.faq__group-title {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.2;
}

@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
  .side-nav { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .side-nav a { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; }
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(32px, 6vw, 96px);
}
.prose { max-width: 46rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin-top: 56px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.prose h3 { margin-top: 28px; margin-bottom: 8px; font-size: var(--fs-base); font-weight: 600; }
.prose p,
.prose ul,
.prose ol,
.prose table { margin-top: 12px; }
.prose h2 + p,
.prose h3 + p { margin-top: 0; }
.prose ul,
.prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th,
.prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; }
.prose .callout { padding: 20px 24px; background: var(--stone); }

@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  .legal .side-nav { display: none; }
}

/* --------------------------------------------------------------------------
   Status pages (success, cancel, 404)
   -------------------------------------------------------------------------- */
.status-page { min-height: 56vh; padding-block: clamp(72px, 11vw, 160px); }
.status-page__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.7rem + 3vw, 4.25rem);
  line-height: 1.04;
  text-wrap: balance;
}
.status-page__text {
  max-width: 38rem;
  margin-top: 20px;
  color: var(--slate);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.status-page__ref { margin-top: 16px; color: var(--slate); font-size: var(--fs-sm); }
.status-page__ref strong { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.status-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* --------------------------------------------------------------------------
   Basket drawer
   -------------------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden] { display: none; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 27, .45);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: var(--paper);
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 18px 24px;
  border-bottom: 1px solid var(--line);
}
.drawer__title { font-family: var(--font-display); font-size: 1.5rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 24px; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.drawer__foot[hidden] { display: none; }
.drawer__note { margin-top: 10px; color: var(--slate); font-size: var(--fs-xs); }
.drawer__error { margin-top: 12px; color: var(--danger); font-size: var(--fs-sm); }
.drawer__error:empty { display: none; }
.drawer__foot .btn--block { margin-top: 16px; }
.drawer__continue { display: block; margin: 14px auto 0; }

.lines { list-style: none; }
.line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.line__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--stone); }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__media .ph { font-size: .875rem; }
.line__name { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; text-decoration: none; }
.line__name:hover { text-decoration: underline; }
.line__unit { margin-top: 2px; color: var(--slate); font-size: var(--fs-xs); }
.line .qty { margin-top: 10px; }
.line__end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: right; }
.line__total { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

.totals { display: grid; gap: 6px; }
.totals__row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.totals__row--main { font-size: var(--fs-base); font-weight: 600; }

.basket-empty { padding: 48px 0; }
.basket-empty__title { font-family: var(--font-display); font-size: 1.5rem; }
.basket-empty__text { margin-top: 8px; color: var(--slate); }
.basket-empty .btn { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: 120;
  max-width: calc(100% - 32px);
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}