/* ============================================================
   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--43 { aspect-ratio: 4 / 3; }
.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); }

.footer__entity { flex-basis: 100%; margin: 0.9rem 0 0; font-size: 0.7rem; line-height: 1.6; opacity: 0.7; }

/* cinematic photo hero (homepage) */
.hero--cinema {
  background: var(--navy-deep);
  min-height: min(100svh, 62vw);
  display: flex;
  align-items: center;
}
.hero--cinema .hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 60%;
  z-index: 0;
}
.hero--cinema::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 15, 25, 0) 30%, rgba(9, 15, 25, 0.55) 62%, rgba(9, 15, 25, 0.78) 100%),
    linear-gradient(180deg, rgba(9, 15, 25, 0.55) 0%, rgba(9, 15, 25, 0) 22%);
}
.hero--cinema .shell { position: relative; z-index: 1; width: 100%; }
.hero--cinema .hero__grid { grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); }
.hero--cinema .display { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
.pagehead.hero--cinema { padding-bottom: clamp(4rem, 9vw, 8rem); }
.hero--cinema .hero__copy { gap: 2rem; }
.hero--cinema .display { text-shadow: 0 2px 30px rgba(9, 15, 25, 0.5); }

@media (max-width: 960px) {
  .hero--cinema { display: block; min-height: 0; padding-top: 0; }
  .hero--cinema .hero__bg {
    position: relative; inset: auto; display: block;
    height: auto; aspect-ratio: 16 / 10; object-position: 34% 60%;
  }
  .hero--cinema::after {
    bottom: auto; height: calc(100vw * 10 / 16);
    background: linear-gradient(180deg, rgba(9, 15, 25, 0.6) 0%, rgba(9, 15, 25, 0) 30%, rgba(15, 27, 42, 0) 70%, var(--navy-deep) 100%);
  }
  .hero--cinema .hero__grid { grid-template-columns: 1fr; }
  .hero--cinema .hero__spacer { display: none; }
  .hero--cinema .shell { padding-top: 0.75rem; }
}

/* ------------------------------------------------------------
   press strip — "As seen in The Telegraph" (20 Oct 2026, assets/js/press.js)
   ------------------------------------------------------------ */
.press { background: var(--paper-raised); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.press__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1.4rem; padding-block: 1.05rem; text-align: center; }
.press__kicker { font-size: .6875rem; letter-spacing: .32em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.press__name { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; color: var(--navy-deep); letter-spacing: -.005em; line-height: 1; }
.press__logo { height: 26px; width: auto; }
.press__detail { font-size: .85rem; color: var(--slate); }
.press__link { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
@media (max-width: 640px) { .press__inner { gap: .35rem .9rem; } .press__name { font-size: 1.2rem; } .press__detail { flex-basis: 100%; } }

/* campaign landing (/telegraph) + press page */
.paper-chip { display: inline-flex; align-items: center; gap: .7rem; padding: .45rem .9rem; border: 1px solid var(--hairline-paper); border-radius: 999px; color: var(--paper); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.paper-chip b { font-family: var(--serif); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 1.05rem; }
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.who__card { background: var(--paper-raised); border: 1px solid var(--hairline); padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 1rem; }
.who__card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.who__card ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; color: var(--slate); font-size: .98rem; }
.who__card li::before { content: "—"; color: var(--brass); margin-right: .6rem; }
.pricecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.pricecard { display: flex; flex-direction: column; gap: .9rem; text-decoration: none; }
.pricecard figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-shade); }
.pricecard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pricecard:hover img { transform: scale(1.03); }
.pricecard h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.pricecard__price { font-family: var(--serif); font-size: 1.25rem; color: var(--navy-deep); }
.pricecard__price small { font-family: var(--sans); font-size: .78rem; color: var(--slate); letter-spacing: .02em; margin-left: .35rem; }
.pricecard p { color: var(--slate); font-size: .95rem; }
.window { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); }
.window__item { border-top: 1px solid var(--brass); padding-top: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.window__date { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; color: var(--paper); }
.window__what { color: rgba(245, 242, 236, .72); font-size: .98rem; }
.occasions { display: flex; flex-wrap: wrap; gap: .6rem; }
.occasions span { border: 1px solid var(--hairline); padding: .5rem 1rem; border-radius: 999px; font-size: .9rem; color: var(--navy); background: var(--paper-raised); }
.presscard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.presscard figure { background: var(--paper-shade); padding: clamp(1rem, 2vw, 1.6rem); border: 1px solid var(--hairline); }
.presscard__meta { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 900px) { .who, .pricecards, .window, .presscard { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }

/* ------------------------------------------------------------
   online ordering (20 Oct 2026, assets/js/order.js)
   ------------------------------------------------------------ */
.order { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: .9rem; }
.order__price { font-size: .95rem; color: var(--slate); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.order__price b { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; color: var(--navy-deep); line-height: 1; }
.order__price span { font-size: .8rem; opacity: .8; }
.order__row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: stretch; }
.order__note { font-size: .82rem; color: var(--slate); }
.order__note a { color: var(--navy); }
.qty { display: inline-flex; border: 1px solid var(--navy); background: var(--paper-raised); }
.qty button { width: 2.6rem; border: 0; background: transparent; font-size: 1.15rem; color: var(--navy); cursor: pointer; }
.qty button:hover { background: var(--paper-shade); }
.qty input { width: 3.2rem; border: 0; text-align: center; font: inherit; font-size: 1rem; color: var(--navy); background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--navy-deep); color: var(--paper); box-shadow: 0 -10px 30px rgba(15, 27, 42, .18); }
.cartbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; }
.cartbar__sum { font-size: .95rem; } .cartbar__sum b { font-weight: 400; font-family: var(--serif); font-size: 1.15rem; }
.cart { position: fixed; inset: 0; z-index: 80; }
.cart__scrim { position: absolute; inset: 0; background: rgba(15, 27, 42, .45); }
.cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); padding: 1.6rem 1.6rem 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem; box-shadow: -20px 0 50px rgba(15, 27, 42, .2); }
.cart__head { display: flex; justify-content: space-between; align-items: center; }
.cart__close { border: 0; background: none; font-size: 1.9rem; line-height: 1; color: var(--navy); cursor: pointer; }
.cart__line { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--hairline); }
.cart__line b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.cart__line span { font-size: .85rem; color: var(--slate); }
.cart__rm { grid-column: 1 / -1; justify-self: start; border: 0; background: none; padding: 0; font-size: .78rem; color: var(--slate); text-decoration: underline; cursor: pointer; }
.cart__delivery { border: 0; display: flex; flex-direction: column; gap: .6rem; }
.cart__delivery label { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--slate); cursor: pointer; padding: .7rem .8rem; border: 1px solid var(--hairline); background: var(--paper-raised); }
.cart__delivery label b { display: block; font-weight: 400; color: var(--navy); }
.cart__delivery input { margin-top: .3rem; accent-color: var(--navy); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--navy); padding-top: .9rem; }
.cart__total b { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; }
.cart__go { width: 100%; justify-content: center; }
.cart__status { font-size: .88rem; color: var(--slate); } .cart__status.is-error { color: #a8442f; }
.cart__small { font-size: .78rem; color: var(--slate); line-height: 1.55; } .cart__small a { color: var(--navy); }
html.cart-open { overflow: hidden; }
body:has(.cartbar:not([hidden])) .footer { padding-bottom: 5rem; }
@media (max-width: 640px) { .cartbar__inner { flex-direction: column; align-items: stretch; text-align: center; gap: .55rem; } .cartbar .btn { justify-content: center; } }

.who--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .who--three { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   group strip — Pactis Group cross-link above the nav (22 Oct 2026)
   collapses once the page scrolls, so the nav keeps its height
   ------------------------------------------------------------ */
.groupbar {
  background: var(--navy-deep);
  color: rgba(245, 242, 236, 0.72);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  max-height: 2.1rem;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-out), opacity 0.35s var(--ease-out);
}
.nav.is-scrolled .groupbar { max-height: 0; opacity: 0; }
.groupbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 2.1rem; }
.groupbar__brand { color: var(--brass-soft); }
.groupbar__links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.groupbar a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease-out); }
.groupbar a:hover { color: var(--paper); }
.groupbar a[aria-current="true"] { color: var(--paper); }
.groupbar__sep { opacity: 0.4; }
@media (max-width: 640px) {
  .groupbar { font-size: 0.58rem; letter-spacing: 0.16em; }
  .groupbar__brand span { display: none; }
  .groupbar__links { gap: 1rem; }
  .groupbar__about { display: none; }
}

/* ------------------------------------------------------------
   /group — the Pactis Group page (22 Oct 2026)
   ------------------------------------------------------------ */
.arms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.arm {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
  text-decoration: none; color: var(--navy);
  transition: border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.arm:hover { border-color: var(--brass); transform: translateY(-3px); }
.arm__word { font-family: var(--serif); font-style: italic; color: var(--brass); font-size: 1.05rem; }
.arm h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; }
.arm p { color: var(--slate); line-height: 1.65; max-width: 32em; }
.arm ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; }
.arm li::before { content: "— "; color: var(--brass); }
.arm .textlink { margin-top: auto; align-self: flex-start; }
.arm--dark { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.arm--dark p { color: rgba(245, 242, 236, 0.75); }
.group-words { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3rem); font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.2rem); flex-wrap: wrap; }
.group-words em { color: var(--brass); }
@media (max-width: 860px) { .arms { grid-template-columns: 1fr; } }