/* ==========================================================================
   Bock and Sons Company
   Consolidated stylesheet. Enqueue once, site wide.

   Image paths stay relative (../img/...) so they resolve wherever this file
   sits, as long as the assets/ folder structure is kept intact.
   ========================================================================== */

/* ==========================================================================
   Bock and Sons Company - V1 "Elevated Heritage"
   Palette sampled directly from the primary logo artwork.
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #232d63;
  --navy-deep:   #161d45;
  --navy-ink:    #10152f;
  --bronze:      #bc8142;
  --copper:      #a25822;
  --bronze-soft: #d9b184;

  /* Neutrals */
  --paper:       #ffffff;
  --bone:        #f6f4f0;
  --sand:        #f5f0e7;
  --linen:       #ece7df;
  --rule:        #ddd6ca;
  --body:        #3d4356;
  --muted:       #5f6678;

  /* Type */
  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Space */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  --shell: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 2px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 260ms;

  --z-nav: 100;
  --z-drawer: 200;
  --z-skip: 300;
}

/* --------------------------------------------------------------- Reset */

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


html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: unset;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* --------------------------------------------------------- Shared bits */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide { max-width: 1560px; }

.section { padding-block: clamp(4rem, 10vw, 8rem); }
.section--bone { background: var(--bone); }

/* Flat warm cream behind the services grid. With no texture underneath,
   the standard copper and muted tokens clear 4.5:1 on their own, so this
   section needs no colour overrides. */
.section--texture { background: var(--sand); }

/* Herringbone brick relief behind the contact block. */
.section--navy {
  background-color: var(--navy-deep);
  background-image: url("/wp-content/uploads/pattern-bricks.svg");
  background-repeat: repeat;
  background-size: 90px auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  background: var(--navy);
  color: #fff;
  padding: .875rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Eyebrow / section label */
.eyebrow {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--sp-3);
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--bronze-soft); }

.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.section-title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}
.section-title--light { color: #fff; }

.lede {
  margin-top: var(--sp-3);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--muted);
  line-height: 1.75;
}
.lede--light { color: rgba(255,255,255,.78); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 52px;
  padding: .875rem 1.75rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--bronze); color: #171a12; border-color: var(--bronze); }
.btn--primary:hover { background: #cd9354; border-color: #cd9354; }

.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn__icon { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------- Topbar */

.topbar {
  background: var(--navy-ink);
  color: rgba(255,255,255,.82);
  font-size: 1rem;
}
/* Everything sits right so the oversized logo has clear space to
   overhang into on the left. */
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  min-height: 44px;
  padding-block: .5rem;
}
.topbar__link { color: #fff; text-decoration: none; font-weight: 600; }
.topbar__link:hover { color: var(--bronze-soft); text-decoration: underline; }

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}
.topbar__divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.24);
}
.topbar__social { display: flex; align-items: center; gap: .25rem; }
.topbar__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  border-radius: 50%;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.topbar__social a:hover { color: var(--bronze-soft); background: rgba(255,255,255,.1); }
.topbar__social svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .topbar__inner { justify-content: center; }
}

/* ---------------------------------------------------------------- Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 84px;
  padding-block: .75rem;
}

/* Oversized logo. Equal negative margins top and bottom let it overhang
   the bar symmetrically without changing the header height. */
.nav__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  position: relative;
  z-index: 1;
  margin-block: -20px;
  transition: margin var(--dur) var(--ease);
}
.nav__logo img {
  width: 300px;
  height: auto;
  transition: width var(--dur) var(--ease);
}

@media (min-width: 768px) {
  .nav__logo { margin-block: -36px; }
  .nav__logo img { width: 400px; }
}

/* Once the bar is pinned to the top of the viewport there is nothing above
   it to overhang into, so the logo tucks back inside to avoid clipping. */
.nav.is-stuck .nav__logo { margin-block: -8px; }
.nav.is-stuck .nav__logo img { width: 240px; }

@media (min-width: 768px) {
  .nav.is-stuck .nav__logo { margin-block: -10px; }
  .nav.is-stuck .nav__logo img { width: 260px; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: .5rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: .01em;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__cta { flex: none; }

.nav__toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--navy);
}

/* Navigation is commented out, so the CTA stays visible at most widths.
   Below 560px the enlarged logo plus the CTA exceed the viewport, so the
   CTA steps aside. The alert bar still carries the phone number. */
@media (max-width: 700px) {
  .nav__cta { padding-inline: 1.125rem; }
}
@media (max-width: 560px) {
  .nav__cta { display: none; }
  .nav__logo img { width: 268px; }
  .nav__logo { margin-block: -17px; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--navy-deep);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 380ms var(--ease), visibility 380ms;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding-inline: var(--gutter);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.drawer__top img { width: 210px; height: auto; }
.drawer__close {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
}
.drawer__body {
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  overflow-y: auto;
}
.drawer__link {
  display: block;
  padding: 1rem 0;
  font-family: var(--display);
  font-size: 1.75rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.drawer__link:hover { color: var(--bronze-soft); }
.drawer__cta { margin-top: var(--sp-4); width: 100%; }

/* --------------------------------------------------------------- Hero */

/* The stage holds one video behind both the hero and the trust row so the
   overlay can run as a single uninterrupted gradient across the two. */
.stage {
  position: relative;
  overflow: hidden;
  background: var(--navy-ink);
  isolation: isolate;
}

.stage__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* Poster and video are stacked on top of each other. Without absolute
   positioning the video lays out below the image and never shows. */
.stage__media img,
.stage__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.stage__video { opacity: 0; transition: opacity 900ms ease; }
.stage__video[data-ready="true"] { opacity: 1; }

/* Darkens steadily down the stage. It stops short of full navy so the
   trust row's own wash can finish the blend without a visible seam. */
.stage__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(11,15,32,.30) 0%,
      rgba(11,15,32,.46) 40%,
      rgba(13,18,42,.66) 76%,
      rgba(20,27,66,.74) 100%),
    linear-gradient(to right, rgba(11,15,32,.55) 0%, rgba(11,15,32,0) 62%);
}

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88svh, 820px);
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  max-width: 60rem;
}

/* Hero copy holds back while the video plays, then fades in as it lands.
   Only applied once JS confirms the video is actually running, so the
   copy stays visible if the video is blocked, fails, or JS is off. */
.hero[data-defer-copy="true"] .hero__inner {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
  will-change: opacity, transform;
}
.hero[data-defer-copy="true"].is-revealed .hero__inner {
  opacity: 1;
  transform: none;
}

/* The scrim is now shared with the trust row, so it stays at full strength
   throughout rather than fading in with the hero copy. Dimming it would
   drop the trust text below its contrast floor while the video plays. */

@media (prefers-reduced-motion: reduce) {
  .hero[data-defer-copy="true"] .hero__inner { opacity: 1; transform: none; }
}

.hero__title {
  color: #fff;
  font-size: clamp(2.25rem, 5.6vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero__rule {
  width: 88px;
  height: 2px;
  background: var(--bronze);
  margin: var(--sp-4) 0 var(--sp-3);
}

.hero__sub {
  max-width: 60rem;
  color: rgba(255,255,255,.85);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* -------------------------------------------------------- Trust strip */

/* Sits on the stage video. Its own wash picks up where the stage scrim
   leaves off and deepens to near-solid navy, so the two blend with no
   hard edge while a trace of the footage still reads through. */
.trust {
  position: relative;
  color: #fff;
  background: linear-gradient(to bottom,
    rgba(30,39,88,.38) 0%,
    rgba(35,45,99,.70) 100%);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.trust__item {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: clamp(1.75rem, 3.2vw, 2.5rem) clamp(1.25rem, 2.6vw, 2rem);
  border-right: 1px solid rgba(255,255,255,.1);
}
.trust__item:last-child { border-right: 0; }

.trust__icon {
  width: 30px; height: 30px;
  flex: none;
  color: var(--bronze-soft);
  margin-top: 2px;
}
.trust__title {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
  margin-bottom: .25rem;
}
.trust__text {
  font-size: 1rem;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}

/* -------------------------------------------------------------- Story */

.story__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .story__grid {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
  }
}

.story__figure {
  position: relative;
  margin: 0;
  display: flex;
}
.story__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

/* On two-column layouts the photo matches the height of the copy beside it. */
@media (min-width: 900px) {
  .story__figure img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 460px;
  }
}

.story__badge {
  position: absolute;
  left: -1rem;
  bottom: -1rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .125rem;
  width: clamp(126px, 17vw, 172px);
  height: clamp(126px, 17vw, 172px);
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  text-align: center;
  padding: .5rem;
}
@media (min-width: 900px) {
  .story__badge { left: -3rem; bottom: -3rem; }
}

.story__badge-label {
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  line-height: 1;
}
.story__badge-year {
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  line-height: 1;
  color: var(--bronze-soft);
}

/* Opening paragraph carries .lede; the rest step down to body size. */
.story__body > p + p {
  margin-top: var(--sp-3);
  color: var(--muted);
  line-height: 1.75;
}

/* ----------------------------------------------------------- Services */

.services__head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .services__head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* Four services in a 2x2 grid. */
.services__grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--bronze);
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -28px rgba(22, 29, 69, .48);
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--linen);
}
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 620ms var(--ease);
}
/* Cards are twice as wide in the 2x2, so the crop goes landscape. */
@media (min-width: 700px) {
  .card__media img { aspect-ratio: 3 / 2; }
}
.card:hover .card__media img { transform: scale(1.045); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: clamp(1.5rem, 2.6vw, 1.875rem);
  flex: 1;
}
.card__title {
  font-size: 1.375rem;
  line-height: 1.24;
}
.card__text {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ------------------------------------------------ Portfolio teaser */

.work { overflow: hidden; }

.work__head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .work__head { grid-template-columns: 1fr auto; align-items: end; }
}

.work__nav { display: flex; gap: .625rem; }

.work__arrow {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.work__arrow svg { width: 22px; height: 22px; }
.work__arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.work__arrow[disabled] { opacity: .35; cursor: not-allowed; }
.work__arrow[disabled]:hover { background: transparent; border-color: var(--rule); color: var(--navy); }

/* The rail runs full bleed so tiles bleed off the right edge, hinting
   that there is more to scroll. Padding aligns tile 1 with the grid. */
.work__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.work__rail:focus-visible { outline: 3px solid var(--bronze); outline-offset: -3px; }

.work__rail::-webkit-scrollbar { height: 6px; }
.work__rail::-webkit-scrollbar-track { background: transparent; }
.work__rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
.work__rail::-webkit-scrollbar-thumb:hover { background: #c3b8a5; }

.work__track {
  display: flex;
  /* max-content so the track box grows with its items. Without it the track
     is pinned to the scrollport width and the trailing padding collapses,
     leaving the last tile flush against the right edge. */
  width: max-content;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* 100% (not 100vw) so the scrollbar width does not push tile one out of
     alignment with the page grid. */
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  padding-bottom: var(--sp-3);
}

.work__item {
  flex: 0 0 auto;
  width: clamp(238px, 30vw, 340px);
  scroll-snap-align: start;
}

.work__figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--linen);
}
.work__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 620ms var(--ease);
}
.work__figure:hover img { transform: scale(1.045); }

.work__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 2.5rem 1.25rem 1.125rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(16,21,47,.88) 0%, rgba(16,21,47,.45) 55%, rgba(16,21,47,0) 100%);
}

.work__hint {
  margin-top: var(--sp-3);
  font-size: 1rem;
  color: var(--muted);
}
@media (min-width: 900px) { .work__hint { display: none; } }

/* Feature band */
.band {
  position: relative;
  min-height: 420px;
  display: grid;
  align-items: center;
  background: var(--navy-ink);
  overflow: hidden;
  isolation: isolate;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(11,15,32,.92) 0%, rgba(11,15,32,.72) 48%, rgba(11,15,32,.35) 100%);
}
/* Content spans the full site container (.shell keeps the 1280px cap) and
   starts flush at its left edge. */
.band__inner { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band__inner .lede { max-width: 52rem; }

/* ------------------------------------------------------------ Reviews */

.reviews__grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.review__stars { display: flex; gap: .25rem; color: var(--bronze); }
.review__stars svg { width: 20px; height: 20px; }
.review__quote {
  font-family: var(--display);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--navy);
  flex: 1;
}
.review__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}
.review__avatar {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--linen);
  color: var(--navy);
  font-weight: 600;
  font-size: 1rem;
}
.review__name { font-size: 1rem; font-weight: 600; color: var(--navy); }
.review__role { font-size: 1rem; color: var(--muted); }

/* ---------------------------------------------------------- Instagram */

.ig__head {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ig__handle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.ig__handle svg { width: 20px; height: 20px; }
.ig__handle:hover { color: var(--copper); }

/* Elfsight Instagram feed. min-height reserves space so the widget
   loading in does not shift the sections below it. */
.ig__embed { min-height: 340px; }

/* ------------------------------------------------------------ Contact */

.contact__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 980px) {
  .contact__grid { grid-template-columns: 1fr 1.15fr; }
}

.contact__aside { align-self: start; }

.contact__list { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.contact__row { display: flex; gap: var(--sp-2); align-items: flex-start; }
.contact__icon {
  width: 26px; height: 26px;
  flex: none;
  color: var(--bronze-soft);
  margin-top: 3px;
}
.contact__label {
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: .125rem;
}
.contact__value { font-size: 1.0625rem; color: #fff; text-decoration: none; }
a.contact__value:hover { color: var(--bronze-soft); text-decoration: underline; }

/* Form */
.form {
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.form__grid {
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 620px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: .5rem; }

.field__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .01em;
}
.field__req { color: var(--copper); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 52px;
  padding: .875rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy-ink);
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__textarea { min-height: 148px; resize: vertical; }

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232d63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 20px;
  padding-right: 3rem;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover { border-color: #c3b8a5; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  background: var(--paper);
  border-color: var(--navy);
  outline: 3px solid rgba(35, 45, 99, .18);
  outline-offset: 0;
}

.field__help { font-size: 1rem; color: var(--muted); }

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}
.form__note { font-size: 1rem; color: var(--muted); }

/* ------------------------------------------------------------- Footer */

.footer { background: var(--navy-ink); color: rgba(255,255,255,.72); }

.footer__main {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
/* Two columns: brand block, then Get In Touch. */
@media (min-width: 860px) {
  .footer__main {
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
    gap: clamp(3rem, 8vw, 7rem);
  }
}

.footer__logo { width: 280px; height: auto; margin-bottom: var(--sp-3); }
.footer__blurb { font-size: 1rem; line-height: 1.7; max-width: 34rem; }

.footer__social { display: flex; gap: .75rem; margin-top: var(--sp-3); }
.footer__social a {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__social a:hover { background: var(--bronze); border-color: var(--bronze); color: var(--navy-ink); }
.footer__social svg { width: 20px; height: 20px; }

.footer__title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-3);
}
.footer__list { display: grid; gap: .75rem; }
.footer__list a, .footer__list span { font-size: 1rem; color: rgba(255,255,255,.72); text-decoration: none; }
.footer__list a:hover { color: var(--bronze-soft); text-decoration: underline; }

.footer__bar {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: var(--sp-3);
}
.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem var(--sp-3);
}
/* Copyright is the one permitted sub-16px zone */
.copyright, .copyright a {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(255,255,255,.58);
}
.copyright a { text-decoration: underline; text-underline-offset: 2px; }
.copyright a:hover { color: var(--bronze-soft); }
.copyright__sep { margin-inline: .5rem; opacity: .5; }

/* ------------------------------------------------------- Legal pages */

.legal { padding-block: clamp(3rem, 7vw, 5.5rem); }
.legal__inner { max-width: 48rem; margin-inline: auto; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.legal h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.legal p, .legal li { font-size: 1.0625rem; line-height: 1.75; }
.legal p + p { margin-top: var(--sp-2); }
.legal ul { list-style: disc; padding-left: 1.35rem; margin-top: var(--sp-2); display: grid; gap: .5rem; }
.legal__updated {
  margin-top: var(--sp-2);
  font-size: 1rem;
  color: var(--muted);
}
.legal__rule { height: 1px; background: var(--rule); border: 0; margin-block: var(--sp-4); }

/* ---------------------------------------------------------- Thank you */

.thanks {
  display: grid;
  place-items: center;
  min-height: min(78svh, 760px);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--bone);
  text-align: center;
}
.thanks__inner { max-width: 44rem; }
.thanks__mark {
  width: 76px; height: 76px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--bronze-soft);
}
.thanks__mark svg { width: 34px; height: 34px; }
.thanks__title { font-size: clamp(2rem, 4.6vw, 3rem); }
.thanks__text { margin-top: var(--sp-3); font-size: 1.125rem; color: var(--muted); line-height: 1.75; }
.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------- Reveal fx */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 90ms; }
.reveal--d2 { transition-delay: 180ms; }
.reveal--d3 { transition-delay: 270ms; }
.reveal--d4 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
}