/* ==========================================================================
   Base styles (formerly styles.css)
   ========================================================================== */

:root {
  --red: #7d090c;
  --deep-red: #5d0507;
  --cream: #f5ecdc;
  --paper: #fbf7ed;
  --ink: #33211c;
  --wood: #382217;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --script: "Allura", "Brush Script MT", cursive;
  --text-xs: clamp(.7rem, .65rem + .2vw, .82rem);
  --text-sm: clamp(.8rem, .73rem + .28vw, .96rem);
  --text-base: clamp(.95rem, .88rem + .3vw, 1.08rem);
  --text-card: clamp(.86rem, .79rem + .26vw, 1rem);
  --text-feature-title: clamp(1rem, .9rem + .38vw, 1.3rem);
  --text-section: clamp(1.45rem, 1.2rem + .9vw, 1.85rem);
  --text-display: clamp(3.25rem, 2.65rem + 2.5vw, 4.25rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

p {
  font-weight: 500;
}

.shell {
  width: min(850px, calc(100% - 34px));
  margin-right: auto;
  margin-left: auto;
}

.topbar {
  min-height: 34px;
  color: #fff7e9;
  background: var(--red);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-size: var(--text-xs);
  font-weight: 600;
}

.topbar-inner {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  gap: 33px;
}

.topbar i {
  margin-right: 5px;
  color: #e8cfac;
}

.topbar b {
  margin: 0 6px;
  color: #d4b58d;
}

.topbar a:hover {
  color: #fff;
}

.site-header {
  height: 157px;
  padding: 12px 0;
  background:
    linear-gradient(rgba(255, 252, 244, .96), rgba(248, 240, 225, .96)),
    repeating-linear-gradient(96deg, transparent 0 72px, rgba(85, 51, 30, .04) 73px);
  border-bottom: 1px solid #ddccb0;
  box-shadow: 0 3px 9px rgba(58, 36, 21, .12);
}

.navbar {
  height: 133px;
  padding: 0;
}

.brand-cluster {
  display: flex;
  height: 116px;
  align-items: center;
}

.navbar-brand {
  display: flex;
  width: 300px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
}

.navbar-brand img {
  width: 224px;
  height: 70px;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.navbar-brand span,
.navbar-brand em {
  color: #6a342b;
  font-family: var(--serif);
  line-height: 1.05;
  text-align: center;
}

.navbar-brand span {
  margin-top: 8px;
  font-size: clamp(.95rem, .88rem + .24vw, 1.12rem);
  font-weight: 700;
}

.navbar-brand em {
  margin-top: 5px;
  font-family: var(--script);
  font-size: clamp(1.05rem, .95rem + .3vw, 1.3rem);
  font-weight: 400;
}

.navbar-collapse {
  flex: 1 1 auto;
  max-width: 640px;
  margin-left: 70px;
  align-self: center;
}

.navbar-nav {
  width: 100%;
  margin-left: 0 !important;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2vw, 28px);
}

.navbar .nav-link {
  position: relative;
  padding: 11px 0 !important;
  color: #322721;
  font-size: clamp(.74rem, .69rem + .16vw, .88rem);
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--red);
}

.navbar .nav-link.active::after {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--red);
}

.navbar .dropdown-toggle::after {
  position: static;
  height: auto;
  margin-left: 4px;
  background: transparent;
}

.dropdown-menu {
  min-width: 150px;
  padding: 6px;
  background: #fffaf0;
  border: 1px solid #d7c4a7;
  border-radius: 0;
  box-shadow: 0 10px 25px rgba(48, 29, 16, .18);
}

.dropdown-item {
  padding: 7px 9px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff;
  background: var(--red);
}

.hero {
  position: relative;
  height: clamp(560px, calc(90svh - 191px), 900px);
  overflow: hidden;
  background: #c9c7bc;
}

.hero-background {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.hero-background::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("img/hero-image.png") center / cover no-repeat;
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .76) 28%, rgba(255, 255, 255, .28) 52%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42%;
  content: "";
  background: linear-gradient(transparent, rgba(51, 31, 17, .24));
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  height: 100%;
  align-items: center;
}

.hero-copy {
  width: 500px;
  margin-left: 29px;
}

.hero h1 {
  margin: 0 0 18px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(3.8rem, 3rem + 3vw, 6rem);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: .82;
  text-shadow: 0 1px rgba(255, 255, 255, .8);
}

.hero h1 span {
  color: var(--red);
}

.hero h1 .hero-title-dark {
  color: #211915;
}

.hero-copy > p {
  width: 500px;
  margin: 0 0 19px;
  color: #33211c;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  width: 100%;
  max-width: 444px;
  justify-content: center;
  gap: 8px;
}

.hero-actions .button {
  width: 218px;
}

.hero-phone {
  display: inline-flex;
  margin-top: 18px;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem);
  font-weight: 700;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}

.hero-phone:hover {
  color: #fff;
  text-decoration: underline;
}

.section-phone {
  display: flex;
  width: max-content;
  margin-top: 16px;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(65, 23, 17, .15);
}

.section-phone:hover {
  color: var(--deep-red);
  text-decoration: underline;
}

.button {
  display: inline-flex;
  width: 210px;
  min-width: 210px;
  min-height: 52px;
  padding: 13px 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .35px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(51, 31, 17, .16);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .28s ease, transform .28s ease;
}

.button:hover {
  transform: translateY(-7px) rotate(-1deg);
  box-shadow: 0 14px 24px rgba(51, 31, 17, .3);
}

.button-cream:hover {
  transform: translateY(-7px) rotate(1deg);
}

.button:focus-visible {
  outline: 3px solid rgba(125, 9, 12, .3);
  outline-offset: 3px;
}

.button i {
  margin-left: 6px;
  font-size: .75em;
}

.button-red {
  color: #fff;
  background: var(--red);
  border-color: #6a0508;
}

.button-red:hover,
.view-styles:hover {
  color: #fff;
  background: var(--deep-red);
}

.button-cream {
  color: #44352d;
  background: rgba(255, 252, 244, .92);
  border-color: #d4c4a8;
}

.button-cream:hover {
  color: var(--red);
  background: #fff;
}

.trust-strip {
  position: relative;
  z-index: 4;
  height: 0;
  min-height: 0;
  margin: 0;
}

.trust-panel {
  display: grid;
  min-height: 150px;
  overflow: hidden;
  transform: translateY(-50%);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background:
    linear-gradient(rgba(250, 246, 236, .97), rgba(239, 227, 207, .97)),
    repeating-linear-gradient(90deg, transparent 0 100px, rgba(106, 72, 43, .04) 101px);
  border: 1px solid #cfbfa4;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(48, 29, 17, .38);
}

.trust-panel article {
  display: grid;
  padding: 25px 8px 20px;
  grid-template-rows: 52px 28px auto;
  justify-items: center;
  text-align: center;
  border-right: 1px solid #ded0b9;
}

.trust-panel article:last-child {
  border-right: 0;
}

.trust-panel i {
  margin-bottom: 10px;
  color: var(--red);
  font-size: clamp(2rem, 1.72rem + .7vw, 2.55rem);
}

.trust-panel h2 {
  margin: 0;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 2px 3px rgba(65, 23, 17, .24);
  text-transform: uppercase;
}

.trust-panel p {
  width: 100%;
  max-width: 155px;
  margin: 0;
  color: #625349;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.35;
}

.styles-section {
  min-height: 242px;
  margin-top: 0;
  padding: 128px 0 34px;
  color: #fff;
  background:
    linear-gradient(rgba(46, 27, 17, .74), rgba(46, 27, 17, .82)),
    url("img/wood.jpg") center / cover no-repeat;
  border-top: 0;
  border-bottom: 5px solid #392117;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .3);
}

.ornament-heading {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.ornament-heading span {
  width: 42px;
  height: 1px;
  background: #947f68;
}

.ornament-heading h2 {
  margin: 0;
  color: #432c24;
  font-family: var(--serif);
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: .25px;
  line-height: 1;
  text-transform: uppercase;
}

.ornament-heading-light h2 {
  color: #eaddc5;
}

.ornament-heading-light span {
  background: #a68b6b;
}

.styles-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.photo-card {
  position: relative;
  display: flex;
  flex: 0 1 calc((100% - 27px) / 4);
  aspect-ratio: 1;
  min-width: 0;
  margin: 0;
  padding: 5px 5px 0;
  overflow: hidden;
  flex-direction: column;
  background: #f2eadb;
  border: 1px solid #b79e79;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .52);
  transition: transform .28s ease, box-shadow .28s ease;
}

.photo-card:nth-child(odd) {
  transform: rotate(-.35deg);
}

.photo-card:nth-child(even) {
  transform: rotate(.35deg);
}

.photo-card:nth-child(odd):hover {
  z-index: 2;
  transform: translateY(-10px) rotate(1.2deg);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .58);
}

.photo-card:nth-child(even):hover {
  z-index: 2;
  transform: translateY(-10px) rotate(-1.2deg);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .58);
}

.photo-card img {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: cover;
  border-radius: 2px 2px 0 0;
  filter: sepia(.08) contrast(1.03);
}

.photo-card h3 {
  margin: 0;
  padding: 8px 2px 6px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 2px 3px rgba(65, 23, 17, .24);
  text-transform: uppercase;
}

.view-styles {
  display: flex;
  margin: 12px auto 0;
  color: #fff4e2;
  background: var(--red);
  border-color: #a13d3e;
}

.quality-section {
  min-height: 420px;
  padding: 56px 0;
  background:
    radial-gradient(circle at 12% 16%, rgba(112, 71, 35, .055) 0 1.5px, transparent 2px),
    linear-gradient(rgba(252, 248, 238, .97), rgba(245, 236, 220, .97));
  background-size: 40px 40px, auto;
  border-bottom: 1px solid #d9cbb4;
}

.quality-grid {
  display: grid;
  min-height: 580px;
  grid-template-columns: 420px minmax(0, 1fr);
  align-items: stretch;
}

.quality-intro {
  display: flex;
  padding: 16px 24px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  border-right: 1px solid #d9cbb5;
}

.quality-intro > span,
.service-copy > span,
.uses-copy > span {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-card);
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.quality-intro h2,
.service-copy h2,
.uses-copy h2 {
  margin: 8px 0 18px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(2.8rem, 2.15rem + 2vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: .9;
}

.quality-intro p,
.service-copy p,
.uses-copy p {
  color: #625349;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.quality-intro p {
  max-width: 320px;
  margin: 0 0 20px;
}

.quality-intro em,
.service-copy em,
.uses-copy em {
  color: #805b48;
  font-family: var(--script);
  font-size: clamp(1.65rem, 1.35rem + .8vw, 2.25rem);
  font-style: normal;
  line-height: 1.1;
}

.quality-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quality-feature {
  display: flex;
  min-height: 145px;
  padding: 18px 16px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-right: 1px solid #e1d5c1;
  border-bottom: 1px solid #e1d5c1;
}

.quality-feature:nth-child(even) {
  border-right: 0;
}

.quality-feature:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.quality-feature i {
  display: block;
  height: auto;
  margin-bottom: 12px;
  color: var(--red);
  font-size: clamp(1.9rem, 1.65rem + .65vw, 2.4rem);
  line-height: 1;
}

.quality-feature h3 {
  min-height: 32px;
  margin: 0 0 8px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 2px 3px rgba(65, 23, 17, .24);
  text-transform: uppercase;
}

.quality-feature p {
  max-width: 230px;
  margin: 0;
  color: #6a5a4e;
  font-size: var(--text-xs);
  line-height: 1.45;
}

.uses-section {
  padding: 70px 0;
  background:
    linear-gradient(rgba(255, 252, 245, .96), rgba(248, 241, 228, .96)),
    repeating-linear-gradient(97deg, transparent 0 68px, rgba(76, 46, 25, .03) 69px);
}

.uses-layout {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.35fr);
  gap: clamp(46px, 7vw, 100px);
  align-items: center;
}

.uses-copy h2 {
  max-width: 470px;
}

.uses-copy p {
  max-width: 470px;
  margin: 0 0 20px;
}

.uses-checklist {
  display: grid;
  margin: 0;
  padding: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  background:
    linear-gradient(rgba(255, 250, 241, .97), rgba(247, 237, 220, .97)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(125, 9, 12, .035) 35px);
  border: 1px solid #cbb695;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(55, 35, 20, .15);
}

.uses-checklist li {
  display: grid;
  min-height: 116px;
  padding: 21px 22px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  border-right: 1px solid #dfd0b9;
  border-bottom: 1px solid #dfd0b9;
}

.uses-checklist li:nth-child(even) {
  border-right: 0;
}

.uses-checklist li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.uses-checklist i {
  display: grid;
  width: 34px;
  height: 34px;
  color: #fff;
  background: var(--red);
  border: 3px solid #ead8bb;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(75, 4, 6, .2);
  place-items: center;
  font-size: .95rem;
}

.uses-checklist h3 {
  margin: 1px 0 5px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 2px 3px rgba(65, 23, 17, .24);
  text-transform: uppercase;
}

.uses-checklist p {
  margin: 0;
  color: #69594e;
  font-size: var(--text-xs);
  line-height: 1.45;
}

.service-area {
  position: relative;
  padding: 64px 0;
  background: #f5ecdc;
  border-top: 1px solid #cdbd9e;
  border-bottom: 1px solid #cdbd9e;
}

.service-inner {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 360px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  background: #fbf7ed;
  border: 1px solid #c9b99c;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(48, 29, 17, .24);
}

.service-map {
  min-height: 360px;
}

.service-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
}

.service-copy {
  display: flex;
  padding: 42px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.service-copy h2 {
  max-width: 510px;
}

.service-copy p {
  max-width: 320px;
  margin: 0 0 20px;
}

.service-copy em {
  margin-bottom: 22px;
}

.service-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-map-link {
  width: auto;
  min-width: 210px;
}

.service-map-link i {
  margin: 0 7px 0 0;
}

.service-phone {
  margin-top: 0;
  color: var(--red);
  font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem);
  text-shadow: 0 1px 2px rgba(65, 23, 17, .15);
  white-space: nowrap;
}

.service-phone:hover {
  color: var(--deep-red);
}

.testimonials {
  min-height: 420px;
  height: auto;
  padding: 68px 0 72px;
  background:
    radial-gradient(circle at 12% 16%, rgba(112, 71, 35, .045) 0 1.5px, transparent 2px),
    #f8f1e5;
  background-size: 40px 40px, auto;
}

.testimonial-heading {
  margin-bottom: 30px;
}

.testimonial-heading h2 {
  font-size: var(--text-section);
}

.testimonial-heading span {
  width: 52px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.testimonial-grid blockquote {
  position: relative;
  display: flex;
  min-height: 285px;
  margin: 0;
  padding: 30px 28px 26px;
  flex-direction: column;
  background: #fffaf1;
  border: 1px solid #d6c5a8;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(55, 35, 20, .14);
  text-align: left;
}

.testimonial-grid blockquote + blockquote {
  border-left: 1px solid #d6c5a8;
}

.testimonial-grid blockquote:last-child:nth-child(3n + 1) {
  grid-column: 2;
}

.testimonial-grid blockquote > i {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(125, 9, 12, .13);
  font-size: 2.4rem;
  line-height: 1;
}

.review-stars {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  color: #c99a2e;
  font-size: clamp(1.25rem, 1.08rem + .45vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1;
}

.testimonial-grid p {
  margin: 0 0 24px;
  color: #4a3c34;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.65;
}

.testimonial-grid footer {
  display: flex;
  margin-top: auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #594a40;
  font-size: var(--text-xs);
}

.testimonial-grid strong {
  display: block;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  line-height: 1;
}

.testimonial-grid footer span {
  color: #77675b;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.testimonial-grid footer i {
  margin-right: 4px;
  color: #4285f4;
}

.reviews-link {
  display: flex;
  width: 210px;
  margin: 34px auto 0;
}

.reviews-link i {
  margin: 0 7px 0 0;
}

.site-footer {
  min-height: 280px;
  padding-top: 54px;
  color: #e6d2b9;
  background:
    linear-gradient(rgba(104, 4, 7, .97), rgba(78, 3, 5, .99)),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(255, 255, 255, .03) 89px);
  border-top: 4px solid #4a2118;
}

.footer-grid {
  display: grid;
  min-height: 150px;
  grid-template-columns: 1.25fr .8fr 1.25fr 44px;
  gap: clamp(28px, 4vw, 62px);
  align-items: start;
}

.footer-brand {
  text-align: left;
}

.footer-brand img {
  width: 210px;
  height: auto;
  margin: 0 0 16px;
  padding: 10px;
  object-fit: contain;
  background: #f8f1e4;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 4px;
  filter: none;
}

.footer-brand p {
  max-width: 280px;
  margin: 0 0 7px;
  font-family: var(--serif);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.footer-brand em {
  font-family: var(--script);
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.6rem);
  line-height: 1;
}

.site-footer h2 {
  margin: 4px 0 16px;
  color: #fff4e2;
  font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .3vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}

.footer-links a,
.footer-contact a,
.footer-contact span {
  color: #e0c9af;
  font-size: clamp(.78rem, .73rem + .18vw, .9rem);
  line-height: 1.5;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: #fff;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact i {
  display: inline-block;
  width: 22px;
  color: #d0aa81;
}

.footer-map {
  width: 100%;
  max-width: 380px;
  margin-top: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f8f1e4;
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(39, 14, 10, .28);
}

.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.social {
  display: grid;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  color: #fff;
  border: 1px solid #d6b591;
  border-radius: 50%;
  place-items: center;
  font-size: 15px;
}

.social:hover {
  color: var(--red);
  background: #fff2df;
}

.copyright {
  margin-top: 38px;
  padding: 18px 0 20px;
  color: #bb967d;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: clamp(.72rem, .68rem + .15vw, .82rem);
  text-align: center;
}

.copyright span {
  margin: 0 6px;
}

.copyright a {
  color: #e6d2b9;
  font-weight: 600;
}

.copyright a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .photo-card,
  .button {
    transition: none;
  }
}

@media (min-width: 1200px) {
  .shell {
    width: min(1320px, calc(100% - 80px));
  }

  .navbar-collapse {
    max-width: 760px;
    margin-left: 120px;
  }

  .hero-copy {
    width: 570px;
    margin-left: 46px;
  }

  .hero-copy > p {
    width: 540px;
  }

  .quality-grid {
    grid-template-columns: 470px minmax(0, 1fr);
  }

  .quality-intro {
    padding-right: 38px;
    padding-left: 28px;
  }

}

@media (max-width: 900px) {
  .shell {
    width: calc(100% - 26px);
  }

  .navbar-brand {
    width: 215px;
  }

  .navbar-brand img {
    width: 205px;
  }

  .quality-grid {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .service-area::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero::before {
    display: none;
  }

  .hero h1,
  .hero h1 span,
  .hero h1 .hero-title-dark,
  .hero-copy > p {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .68);
  }

  .topbar {
    height: auto;
    min-height: 44px;
    padding: 6px 0;
  }

  .topbar-inner,
  .topbar-left {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
  }

  .site-header,
  .navbar {
    height: 91px;
  }

  .site-header {
    padding: 0;
  }

  .brand-cluster {
    height: 82px;
  }

  .barn-sketch {
    display: none;
  }

  .navbar-brand {
    width: 210px;
    align-items: flex-start;
  }

  .navbar-brand img {
    width: 195px;
    height: 59px;
  }

  .navbar-brand span,
  .navbar-brand em {
    display: none;
  }

  .navbar-collapse {
    position: absolute;
    z-index: 20;
    top: 90px;
    right: -13px;
    left: -13px;
    max-width: none;
    margin-left: 0;
    padding: 12px 22px 17px;
    background: #f8f0df;
    border-top: 1px solid #dbc8aa;
    box-shadow: 0 7px 15px rgba(50, 30, 17, .15);
  }

  .navbar-nav {
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .navbar .nav-link {
    padding: 8px 0 !important;
  }

  .hero {
    height: 600px;
  }

  .hero-background::before {
    background-position: 68% center;
  }

  .hero-inner {
    height: 600px;
    justify-content: center;
  }

  .hero-copy {
    width: min(420px, 92%);
    margin: 0 auto;
    text-align: center;
  }

  .hero-copy > p {
    width: min(360px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  .hero-actions {
    max-width: none;
    align-items: center;
    flex-direction: column;
  }

  .hero-phone {
    justify-content: center;
  }

  .hero h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .trust-strip {
    height: auto;
    min-height: 150px;
    margin-top: -46px;
  }

  .trust-panel {
    height: auto;
    transform: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-panel article {
    min-height: 92px;
    border-bottom: 1px solid #ded0b9;
  }

  .trust-panel article:nth-child(even) {
    border-right: 0;
  }

  .trust-panel article:last-child {
    grid-column: 1 / -1;
  }

  .styles-section,
  .quality-section,
  .uses-section,
  .service-area,
  .testimonials,
  .site-footer {
    height: auto;
    min-height: 0;
  }

  .styles-section {
    margin-top: -47px;
    padding: 100px 0 40px;
  }

  .styles-grid {
    gap: 16px;
  }

  .photo-card {
    flex-basis: calc((100% - 16px) / 2);
  }

  .quality-grid {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .quality-intro {
    padding: 10px 20px 24px;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: auto;
    text-align: center;
    border-right: 0;
    border-bottom: 1px solid #d9cbb5;
  }

  .quality-intro p {
    max-width: 420px;
    margin-right: auto;
    margin-left: auto;
  }

  .quality-feature {
    min-height: 135px;
    padding: 18px;
    border-bottom: 1px solid #e1d5c1;
  }

  .quality-feature p {
    font-size: 8px;
  }

  .uses-section {
    padding: 52px 0;
  }

  .uses-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .uses-copy {
    text-align: center;
  }

  .uses-copy h2,
  .uses-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .uses-copy .section-phone {
    margin-right: auto;
    margin-left: auto;
  }

  .uses-checklist {
    padding: 18px;
  }

  .service-area {
    min-height: 0;
    padding: 40px 0;
  }

  .service-inner {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .service-copy {
    padding: 34px 24px;
    align-items: center;
    text-align: center;
    background: #fbf7ed;
  }

  .service-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .service-actions {
    align-items: center;
    flex-direction: column;
  }

  .service-map,
  .service-map iframe {
    min-height: 280px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .testimonials {
    padding: 48px 0 52px;
  }

  .testimonial-grid blockquote + blockquote {
    padding: 30px 28px 26px;
    border: 1px solid #d6c5a8;
  }

  .testimonial-grid blockquote:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  .testimonial-grid blockquote + blockquote > i {
    top: 24px;
  }

  .testimonial-grid p {
    font-size: var(--text-sm);
  }

  .footer-grid {
    padding: 0 0 38px;
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }

  .site-footer {
    padding-top: 44px;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-brand img {
    margin-right: auto;
    margin-left: auto;
  }

  .footer-brand p {
    margin-right: auto;
    margin-left: auto;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-contact {
    align-items: center;
  }

  .social {
    display: none;
  }

  .copyright {
    margin-top: 0;
    padding: 18px 0 20px;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    align-items: center;
    flex-direction: column;
  }

  .photo-card {
    flex-basis: 100%;
  }

  .quality-features {
    grid-template-columns: 1fr;
  }

  .quality-feature,
  .quality-feature:nth-child(even),
  .quality-feature:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid #e1d5c1;
  }

  .quality-feature:last-child {
    border-bottom: 0;
  }

  .uses-checklist {
    grid-template-columns: 1fr;
  }

  .uses-checklist li,
  .uses-checklist li:nth-child(even),
  .uses-checklist li:nth-last-child(-n + 2) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #dfd0b9;
  }

  .uses-checklist li:last-child {
    border-bottom: 0;
  }

}


/* ==========================================================================
   Building page styles (formerly building-style.css)
   ========================================================================== */

.style-breadcrumb {
  background: #f4ead9;
  border-bottom: 1px solid #d7c5a7;
}

.style-breadcrumb .shell {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  color: #776559;
  font-size: var(--text-xs);
  font-weight: 600;
}

.style-breadcrumb a:hover {
  color: var(--red);
}

.style-breadcrumb i {
  font-size: .6rem;
}

.style-breadcrumb span {
  color: var(--red);
}

.style-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #d7c6aa;
}

.style-hero-image {
  position: absolute;
  inset: 0;
  background: var(--style-hero-image, url("img/category-heroes/a-frame-shed.jpg")) 70% center / cover no-repeat;
  transform: scale(1.02);
}

.style-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, rgba(255, 252, 246, .97) 0%, rgba(255, 252, 246, .9) 34%, rgba(255, 252, 246, .28) 58%, transparent 73%);
}

.style-hero::after {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 30%;
  content: "";
  background: linear-gradient(transparent, rgba(45, 26, 16, .18));
}

.style-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 620px;
  align-items: center;
}

.style-hero-copy {
  width: min(570px, 48%);
}

.style-hero-copy > span,
.style-kicker {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.style-hero h1 {
  margin: 9px 0 20px;
  color: #211915;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 3rem + 3vw, 6rem);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: .82;
}

.style-hero h1 strong {
  color: var(--red);
  font-weight: 700;
}

.style-hero-copy p {
  max-width: 540px;
  margin: 0 0 28px;
  color: #4b3c34;
  font-size: var(--text-base);
  line-height: 1.7;
}

.style-hero-actions {
  display: flex;
  gap: 10px;
}

.style-hero-actions .button {
  width: 220px;
}

.style-phone {
  display: flex;
  width: max-content;
  margin-top: 20px;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: clamp(1.1rem, .98rem + .45vw, 1.35rem);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(65, 23, 17, .16);
}

.style-phone:hover {
  color: var(--deep-red);
  text-decoration: underline;
}

.style-facts {
  position: relative;
  z-index: 3;
  margin-top: -50px;
}

.style-facts-grid {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fffaf1;
  border: 1px solid #cdbb9d;
  border-radius: 4px;
  box-shadow: 0 15px 32px rgba(55, 35, 20, .28);
}

.style-facts article {
  display: flex;
  min-height: 120px;
  padding: 24px;
  align-items: center;
  gap: 15px;
  border-right: 1px solid #ded0ba;
}

.style-facts article:last-child {
  border-right: 0;
}

.style-facts i {
  color: var(--red);
  font-size: 2rem;
}

.style-facts strong,
.style-facts span {
  display: block;
}

.style-facts strong {
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.style-facts span {
  margin-top: 5px;
  color: #6d5b50;
  font-size: var(--text-xs);
  line-height: 1.35;
}

.style-intro {
  padding: 120px 0 105px;
  background:
    radial-gradient(circle at 12% 16%, rgba(112, 71, 35, .04) 0 1.5px, transparent 2px),
    #fbf7ed;
  background-size: 40px 40px, auto;
}

.style-intro-grid {
  display: grid;
  grid-template-columns: minmax(380px, .9fr) minmax(440px, 1.1fr);
  gap: clamp(60px, 8vw, 115px);
  align-items: center;
}

.style-intro-copy h2,
.style-quality-heading h2,
.style-faq-intro h2 {
  margin: 7px 0 20px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(2.7rem, 2.15rem + 1.7vw, 4rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: .9;
}

.style-intro-copy > p:not(.style-script),
.style-quality-heading > p,
.style-faq-intro > p {
  margin: 0 0 17px;
  color: #5e4d43;
  font-size: var(--text-sm);
  line-height: 1.75;
}

.style-script {
  margin: 24px 0 0;
  color: var(--red);
  font-family: var(--script);
  font-size: clamp(1.8rem, 1.45rem + .9vw, 2.5rem);
  line-height: 1;
}

.style-intro-photo {
  position: relative;
  padding: 9px 9px 0;
  background: #f1e5d1;
  border: 1px solid #bca27b;
  border-radius: 4px;
  box-shadow: 0 18px 34px rgba(55, 35, 20, .24);
  transform: rotate(1.2deg);
}

.style-intro-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.style-intro-photo span {
  display: block;
  padding: 15px 8px 16px;
  color: var(--red);
  font-family: var(--script);
  font-size: clamp(1.45rem, 1.2rem + .65vw, 1.9rem);
  line-height: 1;
  text-align: center;
}

.style-intro-photo span i {
  margin-right: 6px;
  font-size: .75em;
}

.style-uses,
.style-options,
.style-process {
  padding: 88px 0 96px;
  background: #f8f1e5;
}

.style-section-heading {
  margin-bottom: 12px;
}

.style-section-heading h2 {
  font-size: var(--text-section);
}

.style-section-intro {
  margin: 0 0 38px;
  color: #6a584d;
  text-align: center;
}

.style-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.style-use-grid article,
.style-options-grid article {
  position: relative;
  min-height: 260px;
  padding: 38px 28px 30px;
  overflow: hidden;
  background: #fffaf1;
  border: 1px solid #d5c3a6;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(55, 35, 20, .1);
  text-align: center;
  transition: transform .28s ease, box-shadow .28s ease;
}

.style-use-grid article:hover,
.style-options-grid article:hover {
  transform: translateY(-8px) rotate(-.5deg);
  box-shadow: 0 17px 28px rgba(55, 35, 20, .19);
}

.style-use-grid article:nth-child(even):hover,
.style-options-grid article:nth-child(even):hover {
  transform: translateY(-8px) rotate(.5deg);
}

.style-use-grid i,
.style-options-grid i {
  color: var(--red);
  font-size: 2.6rem;
}

.style-use-grid h3,
.style-options-grid h3 {
  margin: 15px 0 9px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(65, 23, 17, .18);
  text-transform: uppercase;
}

.style-use-grid p,
.style-options-grid p {
  max-width: 300px;
  margin: 0 auto;
  color: #625148;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.style-quality {
  padding: 94px 0;
  color: #f7ead8;
  background:
    linear-gradient(rgba(46, 27, 17, .83), rgba(46, 27, 17, .9)),
    url("img/wood.jpg") center / cover;
}

.style-quality-grid {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(500px, 1.28fr);
  gap: clamp(58px, 8vw, 110px);
  align-items: center;
}

.style-quality .style-kicker {
  color: #edc999;
}

.style-quality-heading h2 {
  color: #fff;
}

.style-quality-heading > p {
  color: #dfccb4;
}

.style-quality-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .18);
}

.style-quality-list article {
  display: grid;
  min-height: 195px;
  padding: 27px;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  background: rgba(45, 26, 16, .72);
}

.style-quality-list article > span {
  color: #dca960;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
}

.style-quality-list h3 {
  margin: 2px 0 7px;
  color: #fff;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-transform: uppercase;
}

.style-quality-list p {
  margin: 0;
  color: #dac7b0;
  font-size: var(--text-xs);
  line-height: 1.6;
}

.style-options {
  background: #fffaf1;
}

.style-options-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.style-options-grid article {
  min-height: 290px;
  background: #f8f1e5;
}

.style-options-catalog {
  margin-top: 42px;
  padding: clamp(28px, 4vw, 46px);
  background: #f8f1e5;
  border: 1px solid #d5c3a6;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(55, 35, 20, .1);
}

.style-options-catalog-heading {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.style-options-catalog-heading h3 {
  margin: 7px 0 12px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.55rem + 1vw, 2.65rem);
  font-weight: 800;
  line-height: 1.05;
}

.style-options-catalog-heading p {
  margin: 0;
  color: #625148;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.style-options-list {
  display: grid;
  margin: 30px 0 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  list-style: none;
}

.style-options-list li {
  display: flex;
  min-height: 54px;
  padding: 12px 15px;
  align-items: center;
  gap: 10px;
  color: #4f3f36;
  background: #fffaf1;
  border: 1px solid #ded0ba;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.style-options-list i {
  flex: 0 0 auto;
  color: var(--red);
  font-size: 1rem;
}

.style-options-cta {
  display: grid;
  margin-top: 20px;
  padding: clamp(28px, 4vw, 42px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  color: #fff;
  background:
    linear-gradient(rgba(46, 27, 17, .84), rgba(46, 27, 17, .9)),
    url("img/wood.jpg") center / cover;
  border: 1px solid #2d170f;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(55, 35, 20, .2);
}

.style-options-cta > div:first-child > span {
  color: #edc999;
  font-family: var(--serif);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.style-options-cta h3 {
  margin: 5px 0 8px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.55rem + .8vw, 2.4rem);
  font-weight: 800;
}

.style-options-cta p {
  max-width: 650px;
  margin: 0;
  color: #eedbc4;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.style-options-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 11px;
}

.style-options-actions .button {
  width: 230px;
}

.style-options-actions .button-cream i {
  margin-right: 7px;
}

.style-gallery {
  padding: 90px 0;
  background: #f8f1e5;
}

.style-gallery-heading {
  display: flex;
  margin-bottom: 30px;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.style-gallery-heading h2 {
  margin: 3px 0 0;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 2rem + 1.4vw, 3.5rem);
  font-weight: 700;
}

.style-gallery-heading > a,
.style-faq-intro > a {
  color: var(--red);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.style-gallery-heading > a:hover,
.style-faq-intro > a:hover {
  text-decoration: underline;
}

.style-gallery-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  gap: 18px;
}

.style-gallery-grid figure {
  margin: 0;
  overflow: hidden;
  border: 7px solid #fffaf1;
  border-radius: 4px;
  box-shadow: 0 11px 24px rgba(55, 35, 20, .2);
}

.style-gallery-grid figure:first-child {
  transform: rotate(-.7deg);
}

.style-gallery-grid figure:last-child {
  transform: rotate(.7deg);
}

.style-gallery-grid img {
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
  transition: transform .5s ease;
}

.style-gallery-grid figure:hover img {
  transform: scale(1.04);
}

.style-process {
  background: #fffaf1;
  border-top: 1px solid #d8c6aa;
  border-bottom: 1px solid #d8c6aa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.style-process-grid {
  display: grid;
  margin-top: 38px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.style-process-grid article {
  position: relative;
  padding: 26px 40px;
  text-align: center;
  border-right: 1px solid #d9c8ad;
}

.style-process-grid article:last-child {
  border-right: 0;
}

.style-process-grid span {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  color: #fff;
  background: var(--red);
  border: 5px solid #f0e2ce;
  border-radius: 50%;
  box-shadow: 0 6px 13px rgba(75, 4, 6, .22);
  place-items: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
}

.style-process-grid h3 {
  margin: 0 0 7px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-transform: uppercase;
}

.style-process-grid p {
  max-width: 310px;
  margin: 0 auto;
  color: #625148;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.style-timeline {
  margin: 36px 0 0;
  color: #5d4b40;
  text-align: center;
}

.style-timeline i {
  margin-right: 6px;
  color: var(--red);
}

.style-timeline strong {
  color: var(--red);
}

.style-process-actions {
  display: flex;
  width: 100%;
  margin: 30px auto 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 32px);
}

.style-process-actions .button.button-red {
  width: 230px;
  max-width: 100%;
}

.style-process-phone {
  margin-right: auto;
  margin-left: auto;
}

.style-process-actions .style-process-phone {
  margin: 0;
  justify-content: center;
  line-height: 1.35;
}

.style-faq {
  padding: 94px 0;
  background: #f8f1e5;
}

.style-faq-grid {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(500px, 1.28fr);
  gap: clamp(55px, 8vw, 110px);
  align-items: start;
}

.style-faq-intro {
  position: sticky;
  top: 30px;
}

.style-faq-intro > a i {
  margin-left: 5px;
}

.style-faq-list {
  display: grid;
  gap: 11px;
}

.style-faq-list details {
  overflow: hidden;
  background: #fffaf1;
  border: 1px solid #d5c3a6;
  border-radius: 4px;
}

.style-faq-list summary {
  display: flex;
  min-height: 64px;
  padding: 16px 19px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #4c382f;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, .97rem + .25vw, 1.2rem);
  font-weight: 800;
}

.style-faq-list summary::-webkit-details-marker {
  display: none;
}

.style-faq-list summary i {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
  place-items: center;
  font-size: .75rem;
  transition: transform .25s ease;
}

.style-faq-list details[open] summary i {
  transform: rotate(45deg);
}

.style-faq-list details p {
  margin: 0;
  padding: 0 60px 19px 19px;
  color: #625148;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.style-cta {
  padding: 82px 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(75, 4, 6, .96), rgba(108, 7, 10, .9)),
    var(--style-cta-image, url("img/a-frame-shed/a-frame-shed-06.jpg")) center 58% / cover;
}

.style-cta-inner {
  text-align: center;
}

.style-cta span {
  color: #edcfaa;
  font-family: var(--script);
  font-size: clamp(1.6rem, 1.3rem + .85vw, 2.25rem);
}

.style-cta h2 {
  margin: 5px 0 10px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.7rem, 2.2rem + 1.7vw, 4rem);
  font-weight: 700;
  line-height: .95;
}

.style-cta p {
  margin: 0 0 27px;
  color: #eedbc4;
}

.style-cta-inner > div {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.style-cta .button {
  width: 230px;
}

.style-cta .button-cream i {
  margin: 0 7px 0 0;
}

@media (max-width: 1000px) {
  .style-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-facts article:nth-child(2) {
    border-right: 0;
  }

  .style-facts article:nth-child(-n + 2) {
    border-bottom: 1px solid #ded0ba;
  }

  .style-intro-grid,
  .style-quality-grid,
  .style-faq-grid {
    grid-template-columns: 1fr;
  }

  .style-intro-copy,
  .style-quality-heading,
  .style-faq-intro {
    text-align: center;
  }

  .style-intro-copy .style-phone {
    margin-right: auto;
    margin-left: auto;
  }

  .style-intro-photo {
    width: min(680px, 100%);
    margin: 0 auto;
  }

  .style-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-options-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .style-options-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .style-options-cta p {
    margin-right: auto;
    margin-left: auto;
  }

  .style-options-actions {
    justify-content: center;
  }

  .style-faq-intro {
    position: static;
  }
}

@media (max-width: 767px) {
  .style-hero {
    min-height: 600px;
  }

  .style-hero-image {
    background-position: 63% center;
  }

  .style-hero::before {
    background: linear-gradient(rgba(31, 17, 12, .52), rgba(31, 17, 12, .58));
  }

  .style-hero-inner {
    min-height: 600px;
    justify-content: center;
    text-align: center;
  }

  .style-hero-copy {
    width: min(500px, 94%);
  }

  .style-hero-copy > span,
  .style-hero h1,
  .style-hero h1 strong,
  .style-hero-copy p {
    color: #fff;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .65);
  }

  .style-hero h1 {
    font-size: clamp(3.2rem, 14vw, 4.7rem);
  }

  .style-hero-actions {
    align-items: center;
    flex-direction: column;
  }

  .style-hero-phone {
    margin-right: auto;
    margin-left: auto;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
  }

  .style-hero-phone:hover {
    color: #fff;
  }

  .style-facts {
    margin-top: 0;
  }

  .style-intro,
  .style-uses,
  .style-quality,
  .style-options,
  .style-gallery,
  .style-process,
  .style-faq {
    padding: 68px 0;
  }

  .style-use-grid,
  .style-options-grid,
  .style-process-grid,
  .style-gallery-grid {
    grid-template-columns: 1fr;
  }

  .style-options-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-use-grid article,
  .style-options-grid article {
    min-height: 0;
  }

  .style-quality-list {
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
  }

  .style-quality-list article {
    min-height: 0;
  }

  .style-gallery-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .style-gallery-grid img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .style-process-grid article {
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid #d9c8ad;
  }

  .style-process-grid article:last-child {
    border-bottom: 0;
  }

  .style-process-actions {
    margin-top: 28px;
    align-items: center;
    flex-direction: column;
    gap: 14px;
  }

  .style-options-actions {
    align-items: center;
    flex-direction: column;
  }

  .style-cta-inner > div {
    align-items: center;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .style-facts-grid {
    grid-template-columns: 1fr;
  }

  .style-facts article,
  .style-facts article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #ded0ba;
  }

  .style-facts article:last-child {
    border-bottom: 0;
  }

  .style-options-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .style-use-grid article,
  .style-options-grid article,
  .style-gallery-grid img,
  .style-faq-list summary i {
    transition: none;
  }
}


/* ==========================================================================
   About page styles (formerly about.css)
   ========================================================================== */

.about-hero {
  position: relative;
  padding: 74px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(112, 71, 35, .05) 0 1.5px, transparent 2px),
    #f8f1e5;
  background-size: 40px 40px, auto;
}

.about-hero::after {
  position: absolute;
  right: -90px;
  bottom: -140px;
  width: 420px;
  height: 420px;
  content: "";
  border: 70px solid rgba(125, 9, 12, .035);
  border-radius: 50%;
}

.about-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(440px, 1.15fr);
  gap: clamp(54px, 7vw, 100px);
  align-items: center;
}

.about-hero-copy > span,
.about-kicker {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.about-hero h1 {
  margin: 10px 0 20px;
  color: #211915;
  font-family: var(--serif);
  font-size: clamp(3.65rem, 2.9rem + 2.9vw, 5.8rem);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: .82;
}

.about-hero h1 strong {
  color: var(--red);
  font-weight: 700;
}

.about-hero-copy p {
  max-width: 520px;
  margin: 0 0 28px;
  color: #514138;
  font-size: var(--text-base);
  line-height: 1.7;
}

.about-hero-copy .button {
  width: 210px;
}

.about-hero-photo {
  position: relative;
  padding: 10px;
  background: #f3e8d5;
  border: 1px solid #bca27b;
  border-radius: 4px;
  box-shadow: 0 18px 36px rgba(55, 35, 20, .25);
  transform: rotate(1.2deg);
}

.about-hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.since-badge {
  position: absolute;
  bottom: -36px;
  left: -42px;
  display: flex;
  width: 180px;
  height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff5e6;
  background: var(--red);
  border: 6px solid #f8f1e5;
  border-radius: 50%;
  box-shadow: 0 12px 25px rgba(70, 5, 7, .3);
  text-align: center;
  transform: rotate(-5deg);
}

.since-badge small {
  font-family: var(--serif);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.since-badge strong {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: .95;
}

.since-badge em {
  margin-top: 5px;
  font-family: var(--script);
  font-size: 1.2rem;
  line-height: 1;
}

.story-section {
  padding: 110px 0 100px;
  background: #fffaf1;
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(380px, .95fr) minmax(400px, 1.05fr);
  gap: clamp(58px, 8vw, 110px);
  align-items: center;
}

.story-photos {
  position: relative;
  min-height: 500px;
}

.story-photo {
  position: absolute;
  margin: 0;
  padding: 8px 8px 38px;
  background: #f3e8d5;
  border: 1px solid #bca27b;
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(55, 35, 20, .22);
}

.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.story-photo-main {
  inset: 0 68px 72px 0;
  transform: rotate(-2deg);
}

.story-photo-small {
  right: 0;
  bottom: 0;
  width: 48%;
  height: 230px;
  z-index: 1;
  transform: rotate(4deg);
}

.story-copy h2,
.process-copy h2 {
  margin: 7px 0 22px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: .92;
}

.story-copy > p:not(.story-signature),
.process-copy > p {
  margin: 0 0 17px;
  color: #5b4a40;
  font-size: var(--text-sm);
  line-height: 1.75;
}

.story-copy blockquote {
  margin: 28px 0 8px;
  padding: 18px 0 18px 24px;
  color: #4b3329;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.15rem + .55vw, 1.75rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
  border-left: 4px solid var(--red);
}

.story-signature {
  margin: 14px 0 0;
  color: var(--red);
  font-family: var(--script);
  font-size: clamp(1.7rem, 1.4rem + .8vw, 2.35rem);
  line-height: 1;
}

.about-stats {
  padding: 0;
  color: #fff4e2;
  background:
    linear-gradient(rgba(46, 27, 17, .82), rgba(46, 27, 17, .88)),
    url("img/wood.jpg") center / cover;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-stats article {
  display: flex;
  min-height: 210px;
  padding: 28px 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.about-stats article:last-child {
  border-right: 0;
}

.about-stats i {
  margin-bottom: 12px;
  color: #e0ad5e;
  font-size: 2rem;
}

.about-stats strong {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.7rem + .9vw, 2.75rem);
  line-height: 1;
}

.about-stats span {
  margin-top: 7px;
  color: #dec9ae;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.values-section {
  padding: 88px 0 96px;
  background: #f8f1e5;
}

.values-heading {
  margin-bottom: 12px;
}

.values-heading h2 {
  font-size: var(--text-section);
}

.values-intro {
  margin: 0 0 38px;
  color: #6b594d;
  text-align: center;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.values-grid article {
  position: relative;
  min-height: 300px;
  padding: 46px 34px 34px;
  overflow: hidden;
  background: #fffaf1;
  border: 1px solid #d5c3a6;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(55, 35, 20, .12);
  text-align: center;
  transition: transform .28s ease, box-shadow .28s ease;
}

.values-grid article:hover {
  transform: translateY(-8px) rotate(-.6deg);
  box-shadow: 0 18px 30px rgba(55, 35, 20, .2);
}

.values-grid article:nth-child(even):hover {
  transform: translateY(-8px) rotate(.6deg);
}

.value-number {
  position: absolute;
  top: -20px;
  right: 8px;
  color: rgba(125, 9, 12, .055);
  font-family: var(--serif);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
}

.values-grid i {
  position: relative;
  color: var(--red);
  font-size: 2.8rem;
}

.values-grid h3 {
  position: relative;
  margin: 16px 0 11px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(1.65rem, 1.4rem + .65vw, 2.1rem);
  font-weight: 800;
  text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(65, 23, 17, .2);
  text-transform: uppercase;
}

.values-grid p {
  position: relative;
  max-width: 290px;
  margin: 0 auto;
  color: #625046;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.process-section {
  padding: 95px 0;
  background: #fffaf1;
}

.process-grid {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(440px, 1.2fr);
  gap: clamp(60px, 8vw, 110px);
  align-items: center;
}

.process-copy .button {
  width: 220px;
  margin-top: 12px;
}

.process-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-list::before {
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 31px;
  width: 2px;
  content: "";
  background: #d8c6a8;
}

.process-list li {
  position: relative;
  display: grid;
  padding: 20px 0;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: center;
}

.process-list li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 64px;
  height: 64px;
  color: #fff;
  background: var(--red);
  border: 5px solid #fffaf1;
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(75, 4, 6, .22);
  place-items: center;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
}

.process-list h3 {
  margin: 0 0 5px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-transform: uppercase;
}

.process-list p {
  margin: 0;
  color: #625047;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.contact-map-section {
  padding: 72px 0;
  background:
    linear-gradient(rgba(46, 27, 17, .8), rgba(46, 27, 17, .88)),
    url("img/wood.jpg") center / cover;
}

.contact-map-card {
  display: grid;
  min-height: 390px;
  overflow: hidden;
  grid-template-columns: 1.25fr .75fr;
  background: #fffaf1;
  border: 1px solid #c9b99c;
  border-radius: 4px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  border: 0;
}

.contact-map-copy {
  display: flex;
  padding: 44px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.contact-map-copy h2 {
  margin: 7px 0 18px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(2.45rem, 1.95rem + 1.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: .92;
}

.contact-map-copy p {
  margin: 0 0 22px;
  color: #5e4c42;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.contact-map-copy address {
  margin: 0 0 23px;
  color: #4f3e35;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
}

.contact-map-copy .button {
  width: 230px;
}

.contact-map-copy .button i {
  margin: 0 7px 0 0;
}

.about-cta {
  padding: 82px 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(75, 4, 6, .96), rgba(108, 7, 10, .9)),
    url("img/category-heroes/a-frame-garage.jpg") center / cover;
}

.about-cta-inner {
  text-align: center;
}

.about-cta span {
  color: #edcfaa;
  font-family: var(--script);
  font-size: clamp(1.6rem, 1.3rem + .85vw, 2.25rem);
}

.about-cta h2 {
  margin: 5px 0 28px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.7rem, 2.2rem + 1.7vw, 4rem);
  font-weight: 700;
  line-height: .95;
}

.about-cta-inner > div {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.about-cta .button {
  width: 220px;
}

.about-cta .button-cream i {
  margin: 0 7px 0 0;
}

@media (max-width: 900px) {
  .about-hero-grid,
  .story-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-copy {
    text-align: center;
  }

  .about-hero-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .about-hero-copy .button {
    margin-right: auto;
    margin-left: auto;
  }

  .about-hero-photo {
    max-width: 680px;
    margin: 0 auto;
  }

  .story-photos {
    width: min(640px, 100%);
    margin: 0 auto;
  }

  .about-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-stats article:nth-child(2) {
    border-right: 0;
  }

  .about-stats article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .contact-map-card {
    grid-template-columns: 1fr;
  }

  .contact-map-copy {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .about-hero {
    padding: 58px 0 78px;
  }

  .about-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 55px;
  }

  .about-hero h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .since-badge {
    bottom: -42px;
    left: 50%;
    width: 145px;
    height: 145px;
    transform: translateX(-50%) rotate(-4deg);
  }

  .since-badge strong {
    font-size: 2.35rem;
  }

  .story-section,
  .values-section,
  .process-section {
    padding: 68px 0;
  }

  .story-photos {
    min-height: 390px;
  }

  .story-photo-main {
    right: 38px;
    bottom: 58px;
  }

  .story-photo-small {
    width: 52%;
    height: 180px;
  }

  .story-copy {
    text-align: center;
  }

  .story-copy blockquote {
    padding-left: 0;
    border-left: 0;
    border-top: 3px solid var(--red);
    border-bottom: 3px solid var(--red);
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .values-grid article {
    min-height: 0;
  }

  .process-copy {
    text-align: center;
  }

  .process-copy .button {
    margin-right: auto;
    margin-left: auto;
  }

  .about-cta-inner > div {
    align-items: center;
    flex-direction: column;
  }

  .contact-map-section {
    padding: 44px 0;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 290px;
  }

  .contact-map-copy {
    padding: 36px 24px;
  }
}

@media (max-width: 480px) {
  .about-stats-grid {
    grid-template-columns: 1fr;
  }

  .about-stats article,
  .about-stats article:nth-child(2) {
    min-height: 170px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .about-stats article:last-child {
    border-bottom: 0;
  }

  .story-photos {
    min-height: 320px;
  }

  .story-photo-small {
    height: 145px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .values-grid article {
    transition: none;
  }
}


/* ==========================================================================
   Contact page styles (formerly contact.css)
   ========================================================================== */

.contact-hero {
  position: relative;
  padding: 78px 0 96px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(28, 19, 14, .82), rgba(28, 19, 14, .48) 52%, rgba(28, 19, 14, .2)),
    url("img/category-heroes/a-frame-shed.jpg") center 48% / cover;
}

.contact-hero::before {
  position: absolute;
  top: -130px;
  right: -90px;
  width: 430px;
  height: 430px;
  content: "";
  border: 70px solid rgba(255, 255, 255, .035);
  border-radius: 50%;
}

.contact-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(420px, .9fr);
  gap: clamp(56px, 8vw, 110px);
  align-items: center;
}

.contact-hero-copy > span,
.contact-kicker {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.contact-hero-copy > span {
  color: #edcfaa;
}

.contact-hero h1 {
  margin: 10px 0 22px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 2.9rem + 2.8vw, 5.7rem);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: .84;
}

.contact-hero h1 strong {
  color: #efbf77;
  font-weight: 700;
}

.contact-hero-copy > p:not(.contact-script) {
  max-width: 580px;
  margin: 0;
  color: #f0dfca;
  font-size: var(--text-base);
  line-height: 1.7;
}

.contact-script {
  margin: 20px 0 0;
  color: #fff;
  font-family: var(--script);
  font-size: clamp(1.7rem, 1.35rem + .9vw, 2.4rem);
  line-height: 1;
}

.contact-hero-cards {
  display: grid;
  gap: 13px;
}

.contact-hero-cards > * {
  display: grid;
  min-height: 100px;
  padding: 20px 24px;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  color: #4b3329;
  background: rgba(255, 250, 241, .96);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(35, 8, 8, .2);
  transition: transform .28s ease, box-shadow .28s ease;
}

.contact-hero-cards > *:hover {
  color: #4b3329;
  transform: translateY(-5px) rotate(-.4deg);
  box-shadow: 0 16px 28px rgba(35, 8, 8, .28);
}

.contact-hero-cards > *:nth-child(even):hover {
  transform: translateY(-5px) rotate(.4deg);
}

.contact-hero-cards i {
  display: grid;
  width: 54px;
  height: 54px;
  grid-row: 1 / 3;
  align-self: center;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
  place-items: center;
  font-size: 1.25rem;
}

.contact-hero-cards span {
  align-self: end;
  color: #7a685b;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.contact-hero-cards strong {
  align-self: start;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
}

.estimate-section {
  padding: 105px 0;
  background:
    radial-gradient(circle at 12% 16%, rgba(112, 71, 35, .045) 0 1.5px, transparent 2px),
    #f8f1e5;
  background-size: 40px 40px, auto;
}

.estimate-layout {
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(560px, 1.3fr);
  gap: clamp(48px, 7vw, 90px);
  align-items: start;
}

.estimate-sidebar {
  position: sticky;
  top: 30px;
}

.estimate-sidebar h2,
.contact-map-copy h2 {
  margin: 7px 0 18px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(2.45rem, 1.95rem + 1.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: .92;
}

.estimate-sidebar > p,
.page-contact .contact-map-copy > p {
  margin: 0 0 26px;
  color: #5e4c42;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.estimate-sidebar figure {
  margin: 0 0 28px;
  padding: 8px 8px 0;
  background: #f3e8d5;
  border: 1px solid #bca27b;
  border-radius: 4px;
  box-shadow: 0 14px 28px rgba(55, 35, 20, .2);
  transform: rotate(-1.4deg);
}

.estimate-sidebar figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.estimate-sidebar figcaption {
  padding: 13px 8px 14px;
  color: var(--red);
  font-family: var(--script);
  font-size: clamp(1.35rem, 1.15rem + .5vw, 1.7rem);
  line-height: 1;
  text-align: center;
}

.estimate-sidebar ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.estimate-sidebar li {
  color: #5b4940;
  font-size: var(--text-sm);
  font-weight: 600;
}

.estimate-sidebar li i {
  margin-right: 8px;
  color: var(--red);
}

.estimate-form-wrap {
  position: relative;
  padding: clamp(34px, 5vw, 58px);
  background:
    linear-gradient(rgba(255, 252, 246, .96), rgba(250, 243, 230, .97)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(103, 73, 47, .07) 32px);
  border: 1px solid #c8b393;
  border-radius: 4px;
  box-shadow: 0 18px 38px rgba(55, 35, 20, .2);
  transform: rotate(.25deg);
}

.form-pin {
  position: absolute;
  top: 18px;
  width: 14px;
  height: 14px;
  background: #8b8175;
  border: 3px solid #e9dfce;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .28);
}

.form-pin-left {
  left: 20px;
}

.form-pin-right {
  right: 20px;
}

.form-heading {
  padding-bottom: 25px;
  text-align: center;
  border-bottom: 2px solid #ccb999;
}

.form-heading span {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.form-heading h2 {
  margin: 5px 0 0;
  color: var(--red);
  font-family: var(--script);
  font-size: clamp(2.2rem, 1.75rem + 1.3vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
}

.estimate-form fieldset {
  margin: 0;
  padding: 32px 0 6px;
  border: 0;
}

.estimate-form legend {
  margin: 0 0 20px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-transform: uppercase;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.estimate-form label > span,
.project-options > span {
  display: block;
  margin-bottom: 7px;
  color: #493830;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.estimate-form label b {
  color: var(--red);
}

.estimate-form input,
.estimate-form select,
.estimate-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: #3f312b;
  background: rgba(255, 255, 255, .72);
  border: 1px solid #c9b596;
  border-radius: 4px;
  outline: none;
  font-family: var(--sans);
  font-size: var(--text-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.estimate-form textarea {
  min-height: 145px;
  resize: vertical;
}

.estimate-form input:focus,
.estimate-form select:focus,
.estimate-form textarea:focus {
  background: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(125, 9, 12, .12);
}

.project-options {
  margin: 24px 0;
}

.project-options > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.project-options label {
  display: flex;
  align-items: center;
  color: #59483f;
  font-size: var(--text-sm);
  font-weight: 600;
}

.project-options input {
  width: 18px;
  min-height: 18px;
  margin-right: 8px;
  accent-color: var(--red);
}

.message-field {
  display: block;
}

.form-submit {
  display: flex;
  margin-top: 28px;
  align-items: center;
  gap: 18px;
}

.form-submit .button {
  width: 235px;
  flex: 0 0 auto;
}

.form-submit small {
  color: #806f62;
  font-size: .68rem;
  line-height: 1.4;
}

.next-steps {
  padding: 85px 0 92px;
  background: #fffaf1;
}

.next-steps-heading {
  margin-bottom: 36px;
}

.next-steps-heading h2 {
  font-size: var(--text-section);
}

.next-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.next-steps-grid article {
  position: relative;
  min-height: 260px;
  padding: 40px 30px 30px;
  overflow: hidden;
  background: #f8f1e5;
  border: 1px solid #d5c3a6;
  border-radius: 4px;
  text-align: center;
}

.next-steps-grid article > span {
  position: absolute;
  top: -20px;
  right: 9px;
  color: rgba(125, 9, 12, .055);
  font-family: var(--serif);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
}

.next-steps-grid i {
  position: relative;
  color: var(--red);
  font-size: 2.7rem;
}

.next-steps-grid h3 {
  position: relative;
  margin: 15px 0 9px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-transform: uppercase;
}

.next-steps-grid p {
  position: relative;
  max-width: 290px;
  margin: 0 auto;
  color: #635148;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.contact-map-section {
  padding: 72px 0;
  background:
    linear-gradient(rgba(46, 27, 17, .8), rgba(46, 27, 17, .88)),
    url("img/wood.jpg") center / cover;
}

.contact-map-card {
  display: grid;
  min-height: 390px;
  overflow: hidden;
  grid-template-columns: 1.25fr .75fr;
  background: #fffaf1;
  border: 1px solid #c9b99c;
  border-radius: 4px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  border: 0;
}

.contact-map-copy {
  display: flex;
  padding: 44px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.contact-map-copy address {
  margin: 0 0 23px;
  color: #4f3e35;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
}

.contact-map-copy .button {
  width: 230px;
}

.contact-map-copy .button i {
  margin: 0 7px 0 0;
}

@media (max-width: 900px) {
  .contact-hero-grid,
  .estimate-layout {
    grid-template-columns: 1fr;
  }

  .contact-hero-copy {
    text-align: center;
  }

  .contact-hero-copy > p:not(.contact-script) {
    margin-right: auto;
    margin-left: auto;
  }

  .contact-hero-cards {
    width: min(620px, 100%);
    margin: 0 auto;
  }

  .estimate-sidebar {
    position: static;
    text-align: center;
  }

  .estimate-sidebar figure {
    width: min(520px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  .estimate-sidebar ul {
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }

  .contact-map-card {
    grid-template-columns: 1fr;
  }

  .contact-map-copy {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .contact-hero {
    padding: 58px 0 68px;
  }

  .contact-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .contact-hero h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .estimate-section {
    padding: 68px 0;
  }

  .estimate-form-wrap {
    padding: 36px 22px;
    transform: none;
  }

  .form-grid,
  .project-options > div,
  .next-steps-grid {
    grid-template-columns: 1fr;
  }

  .form-submit {
    align-items: flex-start;
    flex-direction: column;
  }

  .next-steps {
    padding: 64px 0;
  }

  .next-steps-grid article {
    min-height: 0;
  }

  .contact-map-section {
    padding: 44px 0;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 290px;
  }

  .contact-map-copy {
    padding: 36px 24px;
  }
}

@media (max-width: 480px) {
  .contact-hero-cards > * {
    padding: 17px;
    grid-template-columns: 46px 1fr;
    column-gap: 13px;
  }

  .contact-hero-cards i {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-cards > * {
    transition: none;
  }
}


/* ==========================================================================
   FAQ page styles (formerly faq.css)
   ========================================================================== */

.faq-hero {
  position: relative;
  padding: 76px 0 88px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(rgba(249, 243, 232, .9), rgba(249, 243, 232, .94)),
    url("img/storage-barn-03.jpg") center 44% / cover;
}

.faq-hero::before,
.faq-hero::after {
  position: absolute;
  content: "";
  border: 60px solid rgba(125, 9, 12, .035);
  border-radius: 50%;
}

.faq-hero::before {
  top: -160px;
  left: -120px;
  width: 420px;
  height: 420px;
}

.faq-hero::after {
  right: -130px;
  bottom: -190px;
  width: 480px;
  height: 480px;
}

.faq-hero-inner {
  position: relative;
  z-index: 1;
}

.faq-hero-inner > span {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.faq-hero h1 {
  margin: 8px 0 17px;
  color: #211915;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 2.8rem + 2.7vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: .85;
}

.faq-hero h1 strong {
  color: var(--red);
  font-weight: 700;
}

.faq-hero p {
  max-width: 730px;
  margin: 0 auto 28px;
  color: #54443a;
  font-size: var(--text-base);
  line-height: 1.65;
}

.faq-search {
  position: relative;
  display: flex;
  width: min(720px, 100%);
  height: 58px;
  margin: 0 auto;
  align-items: center;
  background: #fff;
  border: 1px solid #bfa888;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(55, 35, 20, .18);
}

.faq-search > i {
  margin-left: 19px;
  color: var(--red);
  font-size: 1.2rem;
}

.faq-search input {
  width: 100%;
  height: 100%;
  padding: 0 48px 0 14px;
  color: #3d302a;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--sans);
  font-size: var(--text-sm);
}

.faq-search button {
  position: absolute;
  right: 10px;
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #6a584d;
  background: #f3e8d7;
  border: 0;
  border-radius: 50%;
  place-items: center;
}

.faq-search button.is-visible {
  display: grid;
}

.faq-search-status {
  min-height: 20px;
  margin-top: 10px;
  color: #715e51;
  font-size: var(--text-xs);
  font-weight: 600;
}

.faq-category-bar {
  position: sticky;
  z-index: 10;
  top: 0;
  color: #fff3e2;
  background:
    linear-gradient(rgba(77, 35, 17, .86), rgba(58, 25, 13, .9)),
    url("img/wood.jpg") center / cover;
  box-shadow: 0 6px 16px rgba(42, 24, 14, .2);
}

.faq-category-bar .shell {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 45px);
}

.faq-category-bar a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.faq-category-bar a:hover {
  color: #efbf77;
}

.faq-category-bar i {
  color: #efbf77;
  font-size: 1rem;
}

.faq-content {
  padding: 82px 0 100px;
  background:
    radial-gradient(circle at 12% 16%, rgba(112, 71, 35, .04) 0 1.5px, transparent 2px),
    #fbf7ed;
  background-size: 40px 40px, auto;
}

.faq-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(42px, 6vw, 80px);
  align-items: start;
}

.faq-sidebar {
  position: sticky;
  top: 92px;
  display: flex;
  padding: 24px;
  flex-direction: column;
  background: #fffaf1;
  border: 1px solid #d5c3a5;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(55, 35, 20, .1);
}

.faq-sidebar > span {
  margin-bottom: 13px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-transform: uppercase;
}

.faq-sidebar > a {
  padding: 10px 0;
  color: #5e4d43;
  border-bottom: 1px solid #e1d4c1;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.35;
}

.faq-sidebar > a:hover {
  color: var(--red);
  padding-left: 4px;
}

.faq-sidebar-image {
  width: 100%;
  margin-top: 24px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 5px solid #f3e8d5;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(55, 35, 20, .18);
}

.faq-sidebar > div {
  margin-top: 12px;
  padding: 22px 17px;
  color: #f2debf;
  background: var(--red);
  border-radius: 4px;
  text-align: center;
}

.faq-sidebar > div i {
  font-size: 1.7rem;
}

.faq-sidebar > div strong {
  display: block;
  margin: 8px 0 5px;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.faq-sidebar > div p {
  margin: 0 0 9px;
  font-size: .72rem;
}

.faq-sidebar > div a {
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}

.faq-sections {
  min-width: 0;
}

.faq-group {
  scroll-margin-top: 92px;
  margin-bottom: 70px;
}

.faq-group:last-of-type {
  margin-bottom: 0;
}

.faq-group > header {
  display: flex;
  margin-bottom: 22px;
  align-items: center;
  gap: 18px;
}

.faq-group > header > i {
  display: grid;
  width: 58px;
  height: 58px;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 7px 14px rgba(75, 4, 6, .2);
  place-items: center;
  font-size: 1.35rem;
}

.faq-group header span {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-card);
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.faq-group h2 {
  margin: 2px 0 0;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(2rem, 1.65rem + 1vw, 2.7rem);
  font-weight: 700;
  line-height: .95;
}

.faq-list {
  display: grid;
  gap: 11px;
}

.faq-list details {
  overflow: hidden;
  background: #fffaf1;
  border: 1px solid #d8c6aa;
  border-radius: 4px;
  box-shadow: 0 5px 12px rgba(55, 35, 20, .07);
}

.faq-list details[open] {
  border-color: #b89c75;
  box-shadow: 0 10px 22px rgba(55, 35, 20, .12);
}

.faq-list summary {
  display: flex;
  min-height: 66px;
  padding: 17px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #4a352d;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, .97rem + .28vw, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary:hover {
  color: var(--red);
}

.faq-list summary i {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
  place-items: center;
  font-size: .8rem;
  transition: transform .25s ease;
}

.faq-list details[open] summary i {
  transform: rotate(45deg);
}

.faq-list details > div {
  padding: 0 62px 21px 20px;
}

.faq-list details p {
  margin: 0;
  color: #625148;
  font-size: var(--text-sm);
  line-height: 1.75;
}

.faq-list details p a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
}

.faq-no-results {
  padding: 70px 30px;
  background: #fffaf1;
  border: 1px solid #d5c3a5;
  border-radius: 4px;
  text-align: center;
}

.faq-no-results i {
  color: var(--red);
  font-size: 2.5rem;
}

.faq-no-results h2 {
  margin: 15px 0 7px;
  color: var(--red);
  font-family: var(--serif);
}

.faq-no-results p {
  margin: 0;
}

.faq-no-results a {
  color: var(--red);
  font-weight: 700;
}

.faq-cta {
  padding: 82px 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(75, 4, 6, .96), rgba(108, 7, 10, .9)),
    url("img/storage-barn-06.jpg") center / cover;
}

.faq-cta-inner {
  text-align: center;
}

.faq-cta span {
  color: #edcfaa;
  font-family: var(--script);
  font-size: clamp(1.6rem, 1.3rem + .85vw, 2.25rem);
}

.faq-cta h2 {
  margin: 5px 0 28px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.7rem, 2.2rem + 1.7vw, 4rem);
  font-weight: 700;
  line-height: .95;
}

.faq-cta-inner > div {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.faq-cta .button {
  width: 220px;
}

.faq-cta .button-cream i {
  margin: 0 7px 0 0;
}

@media (max-width: 1000px) {
  .faq-category-bar .shell {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .faq-category-bar .shell::-webkit-scrollbar {
    display: none;
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-sidebar {
    display: none;
  }
}

@media (max-width: 767px) {
  .faq-hero {
    padding: 58px 0 68px;
  }

  .faq-hero h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .faq-category-bar .shell {
    min-height: 58px;
  }

  .faq-category-bar a {
    flex: 0 0 auto;
  }

  .faq-content {
    padding: 58px 0 68px;
  }

  .faq-group {
    margin-bottom: 54px;
  }

  .faq-group > header > i {
    width: 50px;
    height: 50px;
  }

  .faq-list summary {
    padding: 15px;
  }

  .faq-list details > div {
    padding: 0 15px 18px;
  }

  .faq-cta-inner > div {
    align-items: center;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary i {
    transition: none;
  }
}


/* ==========================================================================
   Gallery page styles (formerly gallery.css)
   ========================================================================== */

.gallery-hero {
  position: relative;
  display: flex;
  min-height: 300px;
  overflow: hidden;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(250, 246, 237, .97) 0%, rgba(250, 246, 237, .85) 40%, rgba(250, 246, 237, .18) 72%, transparent),
    url("img/service-country.jpg") center 58% / cover no-repeat;
}

.gallery-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.gallery-hero-content > span {
  color: #211915;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.gallery-hero h1 {
  max-width: 900px;
  margin: 7px auto 12px;
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(3.25rem, 2.6rem + 2.4vw, 5rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: .92;
}

.gallery-hero p {
  max-width: 800px;
  margin: 0 auto;
  color: #3f322c;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.6;
}

.gallery-section {
  padding: 0 0 82px;
  background:
    radial-gradient(circle at 12% 16%, rgba(112, 71, 35, .04) 0 1.5px, transparent 2px),
    #fbf7ed;
  background-size: 40px 40px, auto;
}

.gallery-filters {
  max-width: 1000px;
  margin: 0 auto 20px;
  padding: 22px 24px 24px;
  background: rgba(255, 250, 241, .78);
  border: 1px solid #d2bea0;
  border-radius: 4px;
  box-shadow: 0 7px 18px rgba(55, 35, 20, .1);
}

.gallery-filters legend {
  float: none;
  width: auto;
  margin: 0 auto 15px;
  padding: 0 12px;
  color: #432c24;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.gallery-filter-actions {
  display: flex;
  margin-bottom: 16px;
  justify-content: center;
  gap: 8px;
}

.gallery-filter-actions button {
  padding: 8px 14px;
  color: var(--red);
  cursor: pointer;
  background: transparent;
  border: 1px solid #bda57f;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.gallery-filter-actions button:hover,
.gallery-filter-actions button:focus-visible {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  outline: none;
}

.gallery-filter-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.gallery-filter {
  position: relative;
  cursor: pointer;
}

.gallery-filter input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.gallery-filter span {
  display: inline-flex;
  min-height: 38px;
  padding: 7px 13px;
  align-items: center;
  gap: 7px;
  color: #59483e;
  background: #f5ecdc;
  border: 1px solid #bda57f;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.gallery-filter small {
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  color: #725f50;
  background: rgba(255, 255, 255, .65);
  border-radius: 999px;
  place-items: center;
  font-size: .68rem;
}

.gallery-filter input:checked + span {
  color: #fff;
  background: var(--red);
  border-color: var(--deep-red);
}

.gallery-filter input:checked + span small {
  color: var(--red);
  background: #fff7e9;
}

.gallery-filter input:focus-visible + span {
  outline: 3px solid rgba(125, 9, 12, .3);
  outline-offset: 3px;
}

.gallery-count {
  margin: 0 0 20px;
  color: #67564b;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

.gallery-empty {
  margin: 36px 0 0;
  padding: 34px 20px;
  color: #67564b;
  background: #f5ecdc;
  border: 1px dashed #bda57f;
  text-align: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.gallery-card {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 7px 7px 0;
  overflow: hidden;
  flex-direction: column;
  appearance: none;
  cursor: zoom-in;
  background: #f4ead9;
  border: 1px solid #bda57f;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(55, 35, 20, .2);
  transition: transform .28s ease, box-shadow .28s ease;
}

.gallery-card[hidden] {
  display: none;
}

.gallery-card:nth-child(odd) {
  transform: rotate(-.2deg);
}

.gallery-card:nth-child(even) {
  transform: rotate(.2deg);
}

.gallery-card:hover,
.gallery-card:focus-visible {
  z-index: 2;
  outline: none;
  transform: translateY(-9px) rotate(.8deg);
  box-shadow: 0 18px 30px rgba(55, 35, 20, .3);
}

.gallery-card:nth-child(even):hover,
.gallery-card:nth-child(even):focus-visible {
  transform: translateY(-9px) rotate(-.8deg);
}

.gallery-card:focus-visible {
  outline: 3px solid rgba(125, 9, 12, .32);
  outline-offset: 4px;
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px 2px 0 0;
  filter: saturate(.94) contrast(1.02);
}

.gallery-card span {
  padding: 15px 8px 13px;
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 2px 3px rgba(65, 23, 17, .2);
  text-transform: uppercase;
}

.gallery-cta {
  display: flex;
  margin-top: 58px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.gallery-cta p {
  margin: 0;
  color: #5e4b40;
  font-family: var(--script);
  font-size: clamp(1.6rem, 1.3rem + .8vw, 2.2rem);
  line-height: 1.1;
}

.gallery-cta .button {
  width: 220px;
}

.gallery-lightbox {
  width: min(1100px, calc(100% - 40px));
  max-width: none;
  height: min(780px, calc(100% - 40px));
  max-height: none;
  padding: 54px 70px 32px;
  overflow: visible;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.gallery-lightbox::backdrop {
  background: rgba(17, 10, 7, .82);
  backdrop-filter: blur(4px);
}

.gallery-lightbox[open] {
  display: grid;
  place-items: center;
}

.gallery-lightbox figure {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.gallery-lightbox figure img {
  width: 100%;
  height: calc(100% - 48px);
  object-fit: contain;
}

.gallery-lightbox figcaption {
  padding-top: 14px;
  color: #f4dfbd;
  font-family: var(--serif);
  font-size: var(--text-feature-title);
  font-weight: 700;
  text-transform: uppercase;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: var(--red);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  place-items: center;
}

.lightbox-close {
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
}

.lightbox-arrow {
  top: calc(50% - 24px);
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}

.lightbox-previous {
  left: 14px;
}

.lightbox-next {
  right: 14px;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
  background: var(--deep-red);
  transform: scale(1.06);
}

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

@media (max-width: 767px) {
  .gallery-hero {
    min-height: 300px;
  }

  .gallery-section {
    padding: 0 0 60px;
  }

  .gallery-lightbox {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 54px 16px 24px;
  }

  .lightbox-arrow {
    top: auto;
    bottom: 14px;
  }

  .lightbox-previous {
    left: 14px;
  }

  .lightbox-next {
    right: 14px;
  }

  .gallery-lightbox figure img {
    height: calc(100% - 72px);
  }
}

@media (max-width: 520px) {
  .gallery-filters {
    padding: 14px 10px 16px;
  }

  .gallery-filters legend {
    margin-bottom: 10px;
  }

  .gallery-filter-actions {
    margin-bottom: 10px;
  }

  .gallery-filter-actions button {
    padding: 7px 12px;
    font-size: .62rem;
  }

  .gallery-filter-options {
    gap: 6px;
  }

  .gallery-filter span {
    min-height: 30px;
    padding: 4px 8px;
    gap: 5px;
    font-size: .62rem;
  }

  .gallery-filter small {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: .58rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card {
    transition: none;
  }
}