/* ============================================================
   PACTIS — design system
   Warm Paper ground · Ink Navy ink · Brass accent · Slate detail
   Fraunces (display) + Inter (text)
   ============================================================ */

:root {
  --navy: #16263A;
  --navy-deep: #0F1B2A;
  --paper: #F5F2EC;
  --paper-raised: #FBF9F4;
  --paper-shade: #EDE8DE;
  --brass: #C2974A;
  --brass-soft: #D4B075;
  --slate: #5B6B7B;
  --deboss: #DCD5C7;
  --hairline: rgba(22, 38, 58, 0.16);
  --hairline-paper: rgba(245, 242, 236, 0.22);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --shell: 1440px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: clip; }

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* paper grain over everything, barely there */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; }

/* ------------------------------------------------------------
   type
   ------------------------------------------------------------ */

.label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
}

.label--brass { color: var(--brass); }

.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(3rem, 8.2vw, 7.75rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.display em, .heading em {
  font-style: italic;
  font-weight: 320;
  color: var(--brass);
}

.heading {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 380;
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.heading--sm {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.18;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.75;
  color: var(--slate);
  max-width: 34em;
}

.lede strong, .body strong { font-weight: 500; color: var(--navy); }

/* ------------------------------------------------------------
   shell + section scaffolding
   ------------------------------------------------------------ */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: clamp(5rem, 11vw, 10rem) 0; }
.section--tight { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}

/* the brand signature rule: line — laurel — line */
.sigrule {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}
.sigrule::before,
.sigrule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.sigrule img { width: clamp(56px, 6vw, 84px); opacity: 0.9; }

/* sigrule draws itself when revealed: lines grow outward, laurel turns in */
.sigrule.reveal::before,
.sigrule.reveal::after {
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out) 0.25s;
}
.sigrule.reveal::before { transform-origin: right; }
.sigrule.reveal::after { transform-origin: left; }
.sigrule.reveal img {
  opacity: 0;
  transform: rotate(-30deg) scale(0.85);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}
.sigrule.reveal.is-in::before,
.sigrule.reveal.is-in::after { transform: scaleX(1); }
.sigrule.reveal.is-in img { opacity: 0.9; transform: none; }
.sigrule--paper::before,
.sigrule--paper::after { background: var(--hairline-paper); }

/* ------------------------------------------------------------
   nav
   ------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
/* no transform on the resting nav: a parent transform breaks the
   position:fixed mobile menu (it would size to the bar, not the screen) */
.nav { transition: background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), transform 0.55s var(--ease-out); }
.nav.is-hidden:not(.is-open) { transform: translateY(-100%); }
.nav.is-scrolled {
  background: rgba(245, 242, 236, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.75rem;
}
.nav__mark img { height: 1.31rem; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  list-style: none;
}
.nav__links a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  position: relative;
  padding-bottom: 0.3rem;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--navy); }

.nav__cta {
  border: 1px solid var(--navy) !important;
  background: var(--navy);
  color: var(--paper) !important;
  padding: 0.72rem 1.4rem !important;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: transparent; color: var(--navy) !important; }
.nav--onDark:not(.is-scrolled):not(.is-open) .nav__cta { background: transparent; color: var(--paper) !important; }

/* nav over navy hero (none currently) */

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.6rem 0;
  flex-direction: column;
  gap: 6px;
}
.nav__toggle span {
  display: block;
  width: 26px; height: 1px;
  background: var(--navy);
  transition: transform 0.35s var(--ease-out), opacity 0.35s;
}

@media (max-width: 860px) {
  .nav__links {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: var(--paper);
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform 0.55s var(--ease-out), visibility 0s 0.55s;
  }
  .nav__links a { font-size: 0.95rem; letter-spacing: 0.3em; }
  .nav.is-open .nav__links { transform: translateY(0); visibility: visible; transition: transform 0.55s var(--ease-out); }
  .nav.is-open { background: var(--paper); }
  .nav__toggle { display: flex; z-index: 51; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
}

/* ------------------------------------------------------------
   buttons
   ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.1rem 2.2rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out), letter-spacing 0.45s var(--ease-out);
}
.btn:hover { background: transparent; color: var(--navy); letter-spacing: 0.26em; }

.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--paper); }

.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.btn--paper:hover { background: transparent; color: var(--paper); }

.btn--ghost-paper { background: transparent; border-color: var(--paper); color: var(--paper); }
.btn--ghost-paper:hover { background: var(--paper); color: var(--navy); }

.textlink {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--brass);
  transition: gap 0.4s var(--ease-out);
}
.textlink::after { content: "→"; font-family: var(--serif); }
.textlink:hover { gap: 1.2rem; }

/* ------------------------------------------------------------
   hero
   ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: clamp(9rem, 18vh, 13rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 2.5rem; }
.hero__copy .lede { max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 0.6rem; }
.hero__makers {
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.5);
  margin-top: 0.4rem;
}

.hero__art { position: relative; }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 480px; }
}

/* slow-turning wax seal */
.seal-turn {
  animation: sealturn 140s linear infinite;
  transform-origin: center;
}
@keyframes sealturn { to { transform: rotate(360deg); } }

/* wax-press entrance: wrapper presses in, inner image keeps turning */
.sealwrap {
  display: block;
  animation: sealpress 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.55s;
}
@keyframes sealpress {
  0%   { opacity: 0; transform: scale(1.55); filter: blur(6px); }
  55%  { opacity: 1; transform: scale(0.96); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------
   plates — art-directed panels (photography slots)
   ------------------------------------------------------------ */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.plate::before {
  /* inset brass hairline frame */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(194, 151, 74, 0.42);
  z-index: 3;
  pointer-events: none;
}
.plate--169 { aspect-ratio: 16 / 10; }
.plate--45 { aspect-ratio: 4 / 5; }
.plate--11 { aspect-ratio: 1 / 1; }

.plate__wreath {
  position: absolute;
  inset: -6% 0;
  display: grid;
  place-items: center;
  z-index: 1;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.plate__wreath img {
  width: 58%;
  max-width: 420px;
  opacity: 0.1;
  animation: wreathdrift 26s ease-in-out infinite alternate;
}
@keyframes wreathdrift {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.07) rotate(2.5deg); }
}
.plate__gradient { animation: platedrift 32s ease-in-out infinite alternate; }
@keyframes platedrift {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
.plate__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 8%, rgba(194, 151, 74, 0.14), transparent 55%),
    linear-gradient(160deg, #1B2E45 0%, var(--navy) 46%, var(--navy-deep) 100%);
}
.plate__caption {
  position: absolute;
  left: 2rem; bottom: 1.8rem;
  z-index: 4;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.55);
}
.plate__seal {
  position: absolute;
  z-index: 4;
  width: clamp(88px, 9vw, 132px);
  filter: drop-shadow(0 14px 28px rgba(15, 27, 42, 0.45));
}
.plate__seal img { width: 100%; }

/* deboss variant — blind-embossed paper */
.plate--deboss { background: var(--paper-shade); }
.plate--deboss::before { border-color: rgba(22, 38, 58, 0.14); }
.plate--deboss .plate__gradient {
  background:
    radial-gradient(110% 80% at 78% 12%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(165deg, #F1EDE3 0%, var(--paper-shade) 55%, #E4DDCF 100%);
}
.plate--deboss .plate__wreath img { opacity: 0.5; }
.plate--deboss .plate__caption { color: rgba(91, 107, 123, 0.7); }

/* real photography drop-in */
.plate__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  animation: platedrift 36s ease-in-out infinite alternate;
}
.plate:has(.plate__photo) .plate__caption {
  color: rgba(245, 242, 236, 0.85);
  text-shadow: 0 1px 10px rgba(15, 27, 42, 0.55);
}

/* ------------------------------------------------------------
   principles (fewer, better)
   ------------------------------------------------------------ */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.principle { display: flex; flex-direction: column; gap: 1.1rem; }
.principle__no {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--brass);
}
.principle h3 {
  font-family: var(--serif);
  font-weight: 420;
  font-size: 1.45rem;
  letter-spacing: -0.005em;
}
.principle p { color: var(--slate); font-size: 0.98rem; max-width: 30em; }

@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   collections
   ------------------------------------------------------------ */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.tier-card {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(2rem, 3.2vw, 3.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  text-decoration: none;
  position: relative;
  transition: background 0.5s var(--ease-out);
  background: transparent;
}
.tier-card::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.tier-card:hover { background: var(--paper-raised); }
.tier-card:hover::after { transform: scaleX(1); }
.tier-card__no {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--brass);
}
.tier-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  letter-spacing: -0.01em;
}
.tier-card__price {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.tier-card__price strong { color: var(--navy); font-weight: 500; }
.tier-card p { color: var(--slate); font-size: 0.96rem; flex: 1; }
.tier-card .textlink { align-self: flex-start; opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.tier-card:hover .textlink { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
  .tier-card .textlink { opacity: 1; transform: none; }
}

/* full editorial tier blocks (collections page) */
.tier-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  border-top: 1px solid var(--hairline);
}
.tier-feature:first-of-type { border-top: 0; }
.tier-feature--flip .tier-feature__art { order: 2; }
.tier-feature__copy { display: flex; flex-direction: column; gap: 2rem; }
.tier-feature__meta {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.tier-feature__price {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--brass);
}
.tier-feature__min {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
}
.contents { list-style: none; border-top: 1px solid var(--hairline); }
.contents li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.97rem;
}
.contents .maker { font-weight: 400; }
.contents .origin { color: var(--slate); font-size: 0.85rem; white-space: nowrap; }

@media (max-width: 900px) {
  .tier-feature { grid-template-columns: 1fr; }
  .tier-feature--flip .tier-feature__art { order: 0; }
}

.everybox {
  text-align: center;
  color: var(--slate);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
.everybox strong { color: var(--navy); font-weight: 500; }

/* ------------------------------------------------------------
   navy band sections
   ------------------------------------------------------------ */

.band {
  background:
    radial-gradient(130% 100% at 15% 0%, rgba(194, 151, 74, 0.1), transparent 55%),
    linear-gradient(165deg, #1B2E45 0%, var(--navy) 50%, var(--navy-deep) 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.band .label { color: var(--brass-soft); }
.band .lede { color: rgba(245, 242, 236, 0.72); }
.band__wreath {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(calc(-50% + var(--py, 0px))) rotate(var(--pr, 0deg));
  width: clamp(300px, 36vw, 560px);
  opacity: 0.07;
  pointer-events: none;
  will-change: transform;
}

/* worked example strip */
.example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(2rem, 4vw, 3.6rem);
  background: var(--navy);
  color: var(--paper);
}
.example__figures {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 380;
}
.example__terms {
  font-size: 0.88rem;
  color: rgba(245, 242, 236, 0.7);
  line-height: 1.7;
  text-align: right;
}
@media (max-width: 700px) { .example__terms { text-align: left; } }

/* ------------------------------------------------------------
   process steps
   ------------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  counter-reset: step;
}
.step { display: flex; flex-direction: column; gap: 1rem; }
.step__no {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 300;
  color: var(--brass);
  line-height: 1;
}
.step h3 {
  font-family: var(--serif);
  font-weight: 420;
  font-size: 1.3rem;
}
.step__when {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--slate);
}
.step p { color: var(--slate); font-size: 0.95rem; }

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

/* ------------------------------------------------------------
   versus — the hamper vs the Pactis box
   ------------------------------------------------------------ */

.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}
.versus__col {
  padding: clamp(2rem, 3.4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.versus__col ul { list-style: none; }
.versus__col li {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1rem;
}
.versus__col li:last-child { border-bottom: 0; }
.versus__col--them {
  border: 1px solid var(--hairline);
  color: var(--slate);
}
.versus__col--them li { font-weight: 300; }
.versus__col--us {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(194, 151, 74, 0.12), transparent 55%),
    linear-gradient(160deg, #1B2E45 0%, var(--navy) 50%, var(--navy-deep) 100%);
  color: var(--paper);
  box-shadow: 0 24px 60px rgba(9, 16, 26, 0.25);
}
.versus__col--us li { border-color: var(--hairline-paper); }

@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   makers index
   ------------------------------------------------------------ */

.makers { list-style: none; border-top: 1px solid var(--hairline); }
.makers li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.45s var(--ease-out);
}
.makers li:hover { padding-left: 1rem; }
.makers .maker-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: -0.005em;
}
.makers .maker-detail { color: var(--slate); font-size: 0.88rem; text-align: right; }

/* ------------------------------------------------------------
   forms
   ------------------------------------------------------------ */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.2rem; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--slate);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0.65rem 0;
  border-radius: 0;
  outline: none;
  transition: border-color 0.4s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6B7B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brass); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(91, 107, 123, 0.5); }

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.form__note { font-size: 0.82rem; color: var(--slate); }
.form__status { font-size: 0.9rem; color: var(--brass); min-height: 1.4em; grid-column: 1 / -1; }
.form__status.is-error { color: #A4472F; }

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

/* ------------------------------------------------------------
   footer
   ------------------------------------------------------------ */

.footer {
  background: var(--navy-deep);
  color: var(--paper);
  padding: clamp(4rem, 8vw, 6.5rem) 0 2.6rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--hairline-paper);
}
.footer__mark img { height: 1.3rem; width: auto; margin-bottom: 1.4rem; }
.footer__tag { color: rgba(245, 242, 236, 0.6); font-size: 0.92rem; max-width: 22em; }
.footer h4 {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin-bottom: 1.3rem;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.75rem; }
.footer a {
  color: rgba(245, 242, 236, 0.78);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.35s;
  overflow-wrap: anywhere;
}
.footer a:hover { color: var(--brass-soft); }
.footer address { font-style: normal; color: rgba(245, 242, 236, 0.78); font-size: 0.92rem; line-height: 1.9; }
.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2.2rem;
  font-size: 0.75rem;
  color: rgba(245, 242, 236, 0.42);
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__mark { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   reveals
   ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* headings sharpen as they rise */
.display.reveal, .heading.reveal {
  filter: blur(9px);
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.display.reveal.is-in, .heading.reveal.is-in { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .display.reveal, .heading.reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .sigrule.reveal::before, .sigrule.reveal::after { transform: scaleX(1); }
  .sigrule.reveal img { opacity: 0.9; transform: none; }
  .seal-turn, .sealwrap, .plate__gradient, .plate__wreath img, .plate__photo { animation: none; }
  .plate__wreath { transform: none; }
  .band__wreath { transform: translateY(-50%); }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* two-column split with sticky aside (bespoke) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.split__aside { position: sticky; top: 6.5rem; }
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  padding: clamp(2rem, 3.4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.panel .textlink { align-self: flex-start; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__aside { position: static; }
}

/* page hero (inner pages) */
.pagehead {
  padding-top: clamp(9rem, 16vh, 12rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.pagehead .display { font-size: clamp(2.8rem, 6.4vw, 5.8rem); }
.pagehead__inner { display: flex; flex-direction: column; gap: 2.2rem; }

/* ------------------------------------------------------------
   navy inversions — hero + pageheads
   ------------------------------------------------------------ */

.hero--navy,
.pagehead--navy {
  background:
    radial-gradient(130% 100% at 15% 0%, rgba(194, 151, 74, 0.1), transparent 55%),
    linear-gradient(168deg, #1B2E45 0%, var(--navy) 48%, var(--navy-deep) 100%);
  color: var(--paper);
}
.hero--navy .lede,
.pagehead--navy .lede { color: rgba(245, 242, 236, 0.72); }
.hero--navy .display em,
.pagehead--navy .display em { color: var(--brass-soft); }
.pagehead--navy { padding-bottom: clamp(4rem, 8vw, 7rem); }
.pagehead--navy + .section { padding-top: clamp(4rem, 8vw, 7rem); }

.hero--navy .plate { box-shadow: 0 30px 80px rgba(9, 16, 26, 0.5); }

/* brass call-to-action */
.btn--brass {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--navy-deep);
}
.btn--brass:hover { background: transparent; border-color: var(--brass); color: var(--brass); }

/* nav over navy: paper type until scrolled */
.nav__mark .mark-dark { display: block; }
.nav__mark .mark-light { display: none; }
.nav--onDark:not(.is-scrolled):not(.is-open) .nav__mark .mark-dark { display: none; }
.nav--onDark:not(.is-scrolled):not(.is-open) .nav__mark .mark-light { display: block; }
.nav--onDark:not(.is-scrolled):not(.is-open) .nav__links a { color: var(--paper); }
.nav--onDark:not(.is-scrolled):not(.is-open) .nav__cta { border-color: rgba(245, 242, 236, 0.65) !important; }
.nav--onDark:not(.is-scrolled):not(.is-open) .nav__cta:hover { background: var(--paper); color: var(--navy) !important; }
.nav--onDark:not(.is-scrolled):not(.is-open) .nav__toggle span { background: var(--paper); }
.nav.is-open .nav__links a { color: var(--navy); }
.nav.is-open .nav__toggle span { background: var(--navy); }