/** Shopify CDN: Minification failed

Line 65:18 Expected identifier but found whitespace
Line 65:20 Unexpected "{"
Line 65:29 Expected ":"
Line 65:63 Unexpected "%"
Line 65:66 Unexpected "{"
Line 65:75 Expected ":"
Line 65:109 Expected identifier but found "%"

**/
/* START_SECTION:orris-about-hero (INDEX:40) */
/* Three heights from one section. A content page wants a header, not a
   splash: the same composition at 34vh reads as a page title with a
   photograph behind it, which is what /pages/contact needs and what a 66vh
   hero would bully. */
/* Height was set in vh, so the SHAPE of this band changed with the browser
   window: at 1440px wide it measured 2.42, 3.04, 3.08 and 4.21 across the
   pages using it, and it moved again whenever the window was resized. One
   photograph cannot serve four ratios, and a ratio that depends on the
   visitor's window cannot be art-directed at all.

   It is an aspect-ratio now, so the box is deterministic: 12:5 on desktop and
   4:5 on a phone, whatever the tier. The tier still changes the padding and
   the type size — it just no longer changes the crop. */
.oah { position: relative; display: grid; align-items: end; background: var(--orris-ink); isolation: isolate; aspect-ratio: 4 / 5; }
@media screen and (min-width: 750px) {
  .oah { aspect-ratio: 12 / 5; }
}
/* A floor, so a long heading can still push the band taller rather than
   overflowing it.

   max-width is not decoration here: min-height and aspect-ratio together are a
   WIDTH instruction. A 340px floor at 12/5 resolves to 816px, so from 750px
   (where the ratio switches) up to 816px the band was wider than the viewport
   and every page using this section — 14 templates — scrolled sideways by up
   to 48px. Measured at 768px, the common tablet portrait width. */
.oah { min-height: 34rem; max-width: 100%; }
/* In that 750-816px window the ratio cannot hold the floor inside the
   viewport, so drop the floor and let the ratio decide the height. */
@media screen and (min-width: 750px) and (max-width: 816px) {
  .oah { min-height: 0; }
}
/* A landscape phone is NARROW AND SHORT, and the breakpoint above only knows
   about width — so a 667x375 screen took the phone branch and its 4/5 ratio
   resolved to 834px of hero in a 375px viewport: 2.2 screens of banner before
   a word of content. Cap against the viewport height instead of the ratio
   whenever the screen is short, and drop the 34rem floor, which is itself
   taller than the viewport here. Height, not aspect-ratio, so the image simply
   crops. */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .oah {
    aspect-ratio: auto;
    min-height: 0;
    height: 78svh;
    max-height: 78svh;
  }
}
.oah__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.oah__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: {{ section.settings.focus_x | default: 50 }}% {{ section.settings.focus_y | default: 50 }}%;
}

/* Two stops, not one. A flat overlay dulls the whole photograph to lift text
   that only sits across the bottom third; this leaves the top of the image at
   full strength and darkens only where words land. */
.oah__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.55) 34%, rgba(10, 8, 6, 0.1) 66%, rgba(10, 8, 6, 0.06) 100%);
}
/* A phone hero is 488px tall against 600px on a desktop, so the same block of
   copy covers a much larger share of the frame and reaches further up into the
   thin part of the gradient. Measured against this page's photograph, the
   headline was sitting at 1.8:1 where a white laptop screen showed through.
   The mid stop moves up and deepens; the top stays light so the picture is
   still a picture. */
@media screen and (max-width: 749px) {
  .oah__scrim {
    background: linear-gradient(to top, rgba(10, 8, 6, 0.90) 0%, rgba(10, 8, 6, 0.74) 48%, rgba(10, 8, 6, 0.26) 78%, rgba(10, 8, 6, 0.08) 100%);
  }
}

/* Some hero photographs carry incidental text — a screen, a label, a sign —
   that is legible enough to be read as ours when it is not. The gradient above
   is tuned for headline contrast and is deliberately thin at the top, so it
   cannot settle that on its own. This is an even veil over the whole frame,
   off by default, for the heroes that need the picture to stay a texture. */
.oah--veiled .oah__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, var(--oah-veil, 0));
}

/* The scrim handles the average, and on every hero the average is now 11:1 or
   better. What it cannot handle is a single blown highlight — a window, a lamp,
   a lit screen — sitting directly behind a word, which left two of the nine
   headlines near 3:1 at their worst pixel. Deepening the scrim enough to cover
   that would dull all nine photographs to fix two spots. A shadow costs the
   picture nothing and travels with the text. */
.oah__title,
.oah__text,
.oah .orris-eyebrow { text-shadow: 0 1px 14px rgba(10, 8, 6, 0.55), 0 1px 3px rgba(10, 8, 6, 0.35); }

.oah__inner { max-width: 142rem; margin-inline: auto; width: 100%; padding: 8rem var(--orris-gutter, 2rem) 3.6rem; }
.oah__eyebrow {
  margin: 0 0 1.2rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.oah__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display-family);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.08;
  color: #fff;
}
.oah__text {
  margin: 1.4rem 0 0;
  max-width: 52ch;
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.oah__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.oah__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding-inline: 2.8rem;
  background: #fff;
  border: 1px solid #fff;
  color: var(--orris-ink);
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}
.oah__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }

@media (hover: hover) {
  .oah__btn:hover { background: transparent; color: #fff; }
  .oah__btn--ghost:hover { background: #fff; color: var(--orris-ink); border-color: #fff; }
}

@media screen and (min-width: 750px) {
  .oah--compact .oah__inner { padding-block: 7rem 3.6rem; }
  .oah--compact .oah__title { font-size: 4.4rem; }
  .oah__title { font-size: 5.6rem; }
  .oah__text { font-size: 1.7rem; }
  .oah__inner { padding-block: 10rem 5.2rem; }
}
@media screen and (min-width: 990px) {
  .oah__title { font-size: 7rem; }
}
/* END_SECTION:orris-about-hero */
/* START_SECTION:orris-about-proof (INDEX:42) */
/* The section that follows sits flush against this one, so the two grounds ran
   together as a single block. The bottom margin separates them. */
.oap {
  background: var(--orris-white, #fff);
  padding-block: var(--orris-section-y, 2.2rem);
  margin-bottom: 4.8rem;
}
.oap__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.oap__head { text-align: center; margin-bottom: 2rem; }
.oap__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.oap__title { margin: 0; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }

.oap__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.oap__item { text-align: center; }

.oap__icon { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; margin: 0 auto 1.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.72); color: var(--orris-ink); }
.oap__icon svg { width: 2.2rem; height: 2.2rem; }

.oap__claim { margin: 0 0 0.4rem; font-family: var(--font-heading-family); font-size: 1.6rem; font-weight: 500; line-height: 1.3; color: var(--orris-ink); }
.oap__text { margin: 0 auto; max-width: 30ch; font-family: var(--font-heading-family); font-size: 1.4rem; font-weight: 300; line-height: 1.45; color: var(--orris-ink-3); }

@media screen and (min-width: 750px) {
  .oap__title { font-size: 4rem; }
  .oap__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem 2rem; }
}
/* END_SECTION:orris-about-proof */
/* START_SECTION:orris-about-steps (INDEX:43) */
.ost { background: var(--orris-white); padding-block: var(--orris-section-y, 2.2rem); }
.ost--divided { border-top: 1px solid var(--orris-line, #e7e2da); }
.ost__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.ost__head { text-align: center; margin-bottom: 2.4rem; }
.ost__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.ost__title { margin: 0; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }
.ost__sub { margin: 0.8rem auto 0; max-width: 68ch; font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 300; color: var(--orris-ink-3); }

.ost__list { display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ost__item { padding-top: 1.6rem; border-top: 1px solid var(--orris-line, #e7e2da); }

.ost__n {
  display: block;
  margin-bottom: 0.8rem;
  font-family: var(--font-display-family);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--orris-gold-ink);
}
.ost__h { margin: 0 0 0.6rem; font-family: var(--font-heading-family); font-size: 1.7rem; font-weight: 500; line-height: 1.3; color: var(--orris-ink); }
.ost__text { margin: 0; font-family: var(--font-heading-family); font-size: 1.45rem; font-weight: 300; line-height: 1.55; color: var(--orris-ink-3); }

.ost__cta { display: flex; justify-content: center; margin-top: 2.8rem; }
.ost__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding-inline: 3.2rem;
  background: var(--orris-ink);
  border: 1px solid var(--orris-ink);
  color: var(--orris-white);
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}
@media (hover: hover) { .ost__btn:hover { background: transparent; color: var(--orris-ink); } }

@media screen and (min-width: 750px) {
  .ost__title { font-size: 4rem; }
  /* Columns follow the number of steps, so three or five read as one row
     rather than leaving a gap where a fourth would have been. */
  .ost__list { grid-template-columns: repeat(var(--ost-cols, 4), minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
}
/* END_SECTION:orris-about-steps */
/* START_SECTION:orris-about-story (INDEX:44) */
.oas { background: var(--orris-white); padding-block: var(--orris-section-y, 2.2rem); }
.oas__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.oas__head { text-align: center; margin-bottom: 2.4rem; }
.oas__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.oas__title { margin: 0; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }
.oas__sub { margin: 0.8rem auto 0; max-width: 66ch; font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 300; color: var(--orris-ink-3); }

.oas__row { display: grid; gap: 2rem; }
.oas__row + .oas__row { margin-top: 3.2rem; }
/* Neutral, not the warm off-white. That beige is not on the homepage in any
   section, so it has no business on this page either — it only shows for the
   instant before an image paints, and even that should match. */
.oas__media { aspect-ratio: var(--ar-landscape, 3 / 2); overflow: hidden; background: var(--orris-line, #e7e2da); }
.oas__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oas__media-empty { display: block; width: 100%; height: 100%; }

.oas__body { align-self: center; }
.oas__kicker {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-muted);
}
.oas__h { margin: 0 0 1rem; font-family: var(--font-display-family); font-size: 2.8rem; font-weight: 400; line-height: 1.2; color: var(--orris-ink); }
.oas__text { font-family: var(--font-heading-family); font-size: 1.55rem; font-weight: 300; line-height: 1.6; color: var(--orris-ink-3); }
.oas__text p { margin: 0 0 1.2rem; }
.oas__text p:last-child { margin-bottom: 0; }

/* A rule rather than quotation marks: the marks read as decoration at this
   size and the rule ties the quote to the ink line used elsewhere. */
.oas__quote {
  margin: 1.6rem 0 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--orris-ink);
  font-family: var(--font-display-family);
  font-size: 1.9rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--orris-ink);
}

.oas__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem; font-family: var(--font-heading-family); font-size: 1.45rem; font-weight: 500; color: var(--orris-ink); text-decoration: none; }
.oas__link span { text-decoration: underline; text-underline-offset: 0.35rem; }
.oas__link svg { width: 0.8rem; height: 1.2rem; }

@media screen and (min-width: 750px) {
  .oas__title { font-size: 4rem; }
  .oas__h { font-size: 3.2rem; }
  .oas__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; }
  .oas__row + .oas__row { margin-top: 4.4rem; }
  /* Order, not direction: `direction: rtl` would flip the text too. */
  .oas__row--flip .oas__media { order: 2; }
  .oas__row--flip .oas__body { order: 1; }
}
@media screen and (min-width: 990px) {
  .oas__row { gap: 6rem; }
  .oas__body { max-width: 52ch; }
}
/* END_SECTION:orris-about-story */
/* START_SECTION:orris-footer (INDEX:62) */
/* ---------------------------------------------------------------------------
   The Perfume Vault footer.

   Every selector is prefixed with `.orris-foot--v2`. layout/theme.liquid loads
   assets/orris-theme.css a SECOND time at the end of <body> as a deliberate
   cascade anchor, so a section stylesheet would lose to the base footer rules
   at equal specificity. One extra class wins on specificity instead, which
   keeps this section self-contained — no !important, and no edit to a shared
   stylesheet.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Colour.

   Every colour this footer decides is a token, and the white variant flips the
   whole set in one rule. It was previously authored dark-first with ~23 literal
   white alphas, and the white variant lived in assets/orris-theme.css as a set
   of two-class overrides. That could only ever half-work: the rules here carry
   two and three classes, so wherever this file was the more specific one, white
   won — the mobile column headings and their links rendered white on white.

   Specificity now decides nothing. `.orris-foot--v2.orris-foot--light` is two
   classes on the same element, so it beats the one-class default below no
   matter which stylesheet loads first, and every rule underneath reads a token
   rather than a colour.
   --------------------------------------------------------------------------- */
.orris-foot--v2 {
  --foot-strong: #fff;
  --foot-head: rgba(255, 255, 255, 0.92);
  --foot-text: rgba(255, 255, 255, 0.75);
  --foot-body: rgba(255, 255, 255, 0.68);
  --foot-muted: rgba(255, 255, 255, 0.55);
  --foot-faint: rgba(255, 255, 255, 0.38);
  --foot-rule: rgba(255, 255, 255, 0.1);
  --foot-rule-soft: rgba(255, 255, 255, 0.08);
  --foot-mark: rgba(255, 255, 255, 0.28);
  --foot-pay: rgba(255, 255, 255, 0.18);
  --foot-chip: rgba(255, 255, 255, 0.16);
  --foot-chip-strong: rgba(255, 255, 255, 0.6);
  --foot-tint: rgba(255, 255, 255, 0.05);
  --foot-press: rgba(255, 255, 255, 0.04);
  --foot-focus: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--foot-rule);
  color: var(--foot-body);
}

.orris-foot--v2.orris-foot--light {
  --foot-strong: var(--orris-ink);
  --foot-head: var(--orris-ink);
  --foot-text: var(--orris-ink-3);
  --foot-body: var(--orris-ink-3);
  --foot-muted: var(--orris-muted);
  --foot-faint: var(--orris-muted-2);
  --foot-rule: var(--orris-line);
  --foot-rule-soft: var(--orris-line-2);
  --foot-mark: var(--orris-ink);
  --foot-pay: var(--orris-line);
  --foot-chip: var(--orris-line);
  --foot-chip-strong: var(--orris-ink);
  --foot-tint: rgba(0, 0, 0, 0.03);
  --foot-press: rgba(0, 0, 0, 0.04);
  --foot-focus: var(--orris-ink);
  background: var(--orris-white);
}

.orris-foot--v2 a:focus-visible,
.orris-foot--v2 summary:focus-visible {
  outline: 2px solid var(--foot-focus);
  outline-offset: 3px;
}

/* -- brand ----------------------------------------------------------------- */
.orris-foot--v2 .orris-foot__wordmark {
  font-family: var(--font-display-family);
  font-weight: 400;
  /* The footer inherits line-height 1.6, which at 42px hangs 13px of empty
     leading above the wordmark and dropped its cap-height 18px below the
     column labels beside it — four columns that visibly failed to line up.
     1.1 keeps room for a descender in a brand name that has one. */
  line-height: 1.1;
  letter-spacing: 0.16em;
  color: var(--foot-strong);
}
/* A short rule under the wordmark. It costs one pseudo-element and it is what
   stops the brand column reading as a stray line of text above a paragraph. */
.orris-foot--v2 .orris-foot__wordmark::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 1px;
  margin-top: 1.6rem;
  background: var(--foot-mark);
}
.orris-foot--v2 .orris-foot__blurb {
  margin-top: 1.8rem;
  color: var(--foot-muted);
  line-height: 1.75;
}

/* Only WhatsApp is configured, and one lone 40px icon square reads as three
   icons that failed to load. With a single network the row renders as a
   labelled button, which looks deliberate; add a second network and the labels
   drop out and it becomes an icon row again. */
.orris-foot--v2 .orris-foot__socials { gap: 1rem; flex-wrap: wrap; }
.orris-foot--v2 .orris-foot__social {
  width: 4.4rem;
  height: 4.4rem;
  border-color: var(--foot-chip);
  color: var(--foot-text);
}
.orris-foot--v2 .orris-foot__social:hover {
  border-color: var(--foot-chip-strong);
  background: var(--foot-tint);
  color: var(--foot-strong);
}
.orris-foot--v2 .orris-foot__social-txt { display: none; }
.orris-foot--v2 .orris-foot__socials--solo .orris-foot__social {
  width: auto;
  height: 4.8rem;
  gap: 1rem;
  padding-inline: 1.8rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.orris-foot--v2 .orris-foot__socials--solo .orris-foot__social-txt { display: inline; }

/* -- links ----------------------------------------------------------------- */
.orris-foot--v2 .orris-foot__list a { color: var(--foot-body); }

/* -- contact --------------------------------------------------------------- */
.orris-foot--v2 .orris-foot__contact a { color: var(--foot-text); }
.orris-foot--v2 .orris-foot__contact svg { color: var(--foot-faint); }

/* The footer's single gold moment. Gold is graphic-only elsewhere, but on ink
   it is allowed as text (#e9b775 on #17130f is 10.3:1), and spending the one
   allowance on the only action down here — rather than tinting four headings —
   is what keeps it reading as an accent instead of a theme colour. */
.orris-foot--v2 .orris-foot__cta {
  min-height: 5rem;
  border-color: rgba(233, 183, 117, 0.5);
  color: var(--orris-gold);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
}
.orris-foot--v2 .orris-foot__cta:hover,
.orris-foot--v2 .orris-foot__cta:focus-visible {
  background: var(--orris-gold);
  border-color: var(--orris-gold);
  color: var(--orris-ink);
}

/* -- bottom bar ------------------------------------------------------------ */
/* The floating WhatsApp bubble (snippets/orris-whatsapp.liquid) is fixed to the
   bottom-right of the viewport at 4.8rem square with a 1.4rem offset, and the
   bottom of the page is exactly where it lands — it was sitting on top of the
   last legal link. The bar keeps a lane clear for it. Reserving the width costs
   nothing anywhere else: the bar's right-hand item simply stops short. */
.orris-foot--v2 .orris-foot__bar {
  border-top: 1px solid var(--foot-rule);
  padding-inline-end: 6.6rem;
}
.orris-foot--v2 .orris-foot__copy {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--foot-muted);
}
/* Hairline pipes instead of raw whitespace: three legal links set in the same
   size as the copyright otherwise read as one run-on sentence. */
.orris-foot--v2 .orris-foot__legal { gap: 0.6rem 0; }
.orris-foot--v2 .orris-foot__legal li { display: flex; align-items: center; }
.orris-foot--v2 .orris-foot__legal li + li::before {
  content: '';
  width: 1px;
  height: 1.1rem;
  margin-inline: 1.6rem;
  background: var(--foot-pay);
}
.orris-foot--v2 .orris-foot__legal a {
  font-size: 1.3rem;
  color: var(--foot-muted);
  /* 1.3rem on this line box measured 21px tall — under the 24px WCAG 2.5.8
     minimum, on six links present in the footer of every page. Padding, not
     min-height: these sit in a flex row and inline-flex keeps the separator
     bullets between them aligned. */
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
}
.orris-foot--v2 .orris-foot__pay { gap: 0.6rem; flex-wrap: wrap; }
.orris-foot--v2 .orris-foot__pay svg { height: 2.2rem; opacity: 0.75; }

/* Clip, not translate. This used to open with `translateY(-0.5rem)`, which
   starts the panel 5px ABOVE its own box — overlapping the summary row and
   painting the first link across the heading for the length of the animation.
   A clip-path inset reveals downward and cannot paint outside the panel. */
@keyframes orris-foot-reveal {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ===========================================================================
   Phones — one column, and the two link columns become disclosures.
   =========================================================================== */
/* ===========================================================================
   Link columns: an accordion on phones, plain lists above 750px.

   Closed-by-default columns are right on a phone, where the footer is a 900px
   wall of links and the visitor wants one of them. On desktop the columns fit
   side by side with room to spare, so collapsing them hides navigation to save
   space that is not scarce — every link there becomes two interactions instead
   of one. The two breakpoints get the behaviour that suits them.
   =========================================================================== */
@media screen and (max-width: 749px) {
  .orris-foot--v2 .orris-foot__sum {
    display: block;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .orris-foot--v2 .orris-foot__sum::-webkit-details-marker { display: none; }
  .orris-foot--v2 .orris-foot__sum::marker { content: ''; }
  /* The tap highlight is suppressed above, so the row needs its own press state
     or the accordion feels dead for the ~200ms before it opens. */
  .orris-foot--v2 .orris-foot__sum:active { background: var(--foot-press); }
  .orris-foot--v2 .orris-foot__sum:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
  .orris-foot--v2 .orris-foot__sum .orris-foot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    min-height: 4.4rem;
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 0.16em;
    color: var(--foot-head);
    transition: color 0.18s var(--orris-ease);
  }
  /* The chevron is drawn in CSS rather than shipped as an SVG because <summary>
     may legally contain one heading element and nothing else, so there is
     nowhere in the markup to put an icon. Only the chevron animates:
     transitioning the panel height on a <details> needs JS to measure it and
     still janks on the first frame. */
  .orris-foot--v2 .orris-foot__sum .orris-foot__head::after {
    content: '';
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;
    transform: translateY(-0.25rem) rotate(45deg);
    transition: transform 0.3s var(--orris-ease), opacity 0.18s var(--orris-ease);
  }
  .orris-foot--v2 .orris-foot__disc[open] .orris-foot__head::after {
    transform: translateY(0.15rem) rotate(225deg);
    opacity: 0.95;
  }
  .orris-foot--v2 .orris-foot__panel { padding-bottom: 1.6rem; }
  .orris-foot--v2 .orris-foot__disc[open] .orris-foot__panel {
    animation: orris-foot-reveal 0.26s var(--orris-ease) both;
  }
}

@media screen and (max-width: 749px) {
  /* Side-by-side link columns on a 360px screen gave two cramped ~150px
     measures and a 900px-tall footer. One column of labelled rows is both
     shorter and easier to scan. */
  .orris-foot--v2 .orris-foot__top {
    display: block;
    padding-block: 3.6rem 2.4rem;
  }
  .orris-foot--v2 .orris-foot__col--brand { padding-bottom: 3.2rem; }
  .orris-foot--v2 .orris-foot__col + .orris-foot__col {
    border-top: 1px solid var(--foot-rule);
  }
  .orris-foot--v2 .orris-foot__col--contact { padding-top: 2.8rem; }

  /* Full-width on a phone is ~350px; 2.8rem would have needed 372px. */
  .orris-foot--v2 .orris-foot__wordmark { font-size: 2.4rem; }
  .orris-foot--v2 .orris-foot__blurb { font-size: 1.5rem; max-width: 42ch; }

  /* Phone keeps a taller row: 5.4rem clears the 48px tap-target floor. */
  .orris-foot--v2 .orris-foot__sum .orris-foot__head {
    min-height: 5.4rem;
    font-size: 1.3rem;
  }
  .orris-foot--v2 .orris-foot__sum:active { background: var(--foot-press); }

  .orris-foot--v2 .orris-foot__list { gap: 0; }
  .orris-foot--v2 .orris-foot__list a {
    display: flex;
    align-items: center;
    min-height: 4.4rem;
    padding-block: 0.4rem;
    font-size: 1.55rem;
    color: var(--foot-text);
  }

  .orris-foot--v2 .orris-foot__col--contact .orris-foot__head {
    margin: 0 0 1.6rem;
    font-size: 1.3rem;
    letter-spacing: 0.16em;
    color: var(--foot-head);
  }
  .orris-foot--v2 .orris-foot__contact { gap: 1.4rem; font-size: 1.55rem; }
  .orris-foot--v2 .orris-foot__cta { width: 100%; justify-content: center; margin-top: 2.4rem; }

  /* Reordered: the legal links are the only part of this bar anyone taps, so
     they come first and the copyright — which nobody reads — goes last. */
  .orris-foot--v2 .orris-foot__bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8rem;
    padding-block: 2.2rem 2.8rem;
  }
  .orris-foot--v2 .orris-foot__legal { order: 1; }
  .orris-foot--v2 .orris-foot__pay { order: 2; }
  .orris-foot--v2 .orris-foot__copy { order: 3; }
  /* No hairline pipes down here. Three legal links wrap onto two lines on a
     360px screen and a separator drawn before the item starts the second line
     with a stranded pipe. Space does the same job and cannot break. */
  .orris-foot--v2 .orris-foot__legal { gap: 0.4rem 2.8rem; }
  .orris-foot--v2 .orris-foot__legal li + li::before { content: none; }
  .orris-foot--v2 .orris-foot__legal a {
    display: block;
    padding-block: 0.5rem;
    font-size: 1.35rem;
  }
}

/* Hover only on pointer devices, and written as ONE flat query rather than
   `@media (hover: hover)` nested inside the phone block. Nesting is valid CSS
   and browsers honour it, but Shopify's {% stylesheet %} compiler does not:
   it dropped the entire enclosing block, which took the heading colour and the
   chevron with it and left both reading the dark-footer defaults on white.
   Keep every media query in this file flat. */
@media screen and (max-width: 749px) and (hover: hover) {
  .orris-foot--v2 .orris-foot__sum:hover .orris-foot__head { color: var(--foot-strong); }
}

/* ===========================================================================
   750px and up.
   =========================================================================== */
@media screen and (min-width: 750px) {
  /* `<details open>` in the markup is NOT enough: a desktop visitor can still
     click the summary shut. Three independent guards, in order of importance:

       1. the panel is forced visible whether or not [open] is set, so the state
          of the attribute stops mattering above 750px;
       2. the summary is inert to the pointer and carries no marker or chevron,
          so there is nothing to click;
       3. the JS below re-opens it and drops it out of the tab order on every
          breakpoint change, which covers the keyboard.

     1 and 2 are pure CSS, so the desktop footer is correct with JS disabled;
     3 only keeps the DOM honest so assistive tech announces "expanded". */
  .orris-foot--v2 .orris-foot__disc:not([open]) > .orris-foot__panel { display: block; }
  /* Chrome 131+ hides closed content on ::details-content with
     content-visibility, which the child rule above cannot reach. Browsers that
     do not know the pseudo-element drop this one rule and rely on the rule
     above, which is what they honour. */
  .orris-foot--v2 .orris-foot__disc::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .orris-foot--v2 .orris-foot__sum {
    display: block;
    list-style: none;
    pointer-events: none;
    cursor: default;
  }
  .orris-foot--v2 .orris-foot__sum::-webkit-details-marker { display: none; }
  .orris-foot--v2 .orris-foot__sum::marker { content: ''; }
  .orris-foot--v2 .orris-foot__sum .orris-foot__head {
    display: block;
    min-height: 0;
    margin: 0 0 2rem;
    color: var(--foot-muted);
  }
  .orris-foot--v2 .orris-foot__sum .orris-foot__head::after { content: none; }

  /* Two columns with the brand and contact blocks spanning both — the layout
     this footer used to have here — made a 980px-tall tablet footer: four
     stacked bands, each with half the width empty beside it. Three columns
     with the brand as a full-width band on top is ~40% shorter and leaves no
     orphaned space. */
  .orris-foot--v2 .orris-foot__top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem 3.2rem;
    padding-block: 5.6rem 4.4rem;
  }
  .orris-foot--v2 .orris-foot__col--brand { grid-column: 1 / -1; }
  .orris-foot--v2 .orris-foot__col--contact { grid-column: auto; }

  /* Headings were pure white and the links they label were 72% — the label
     shouting over its own content. Dropping the headings to a quiet 50% label
     and lifting the links makes the links the figure and the headings the
     ground, which is the whole difference between this and a default footer.
     50% white on ink is 5.5:1, so the labels still clear AA at 11.5px. */
  .orris-foot--v2 .orris-foot__head {
    margin: 0 0 2rem;
    font-size: 1.2rem;
    letter-spacing: 0.16em;
    color: var(--foot-muted);
  }
  .orris-foot--v2 .orris-foot__list { gap: 1.15rem; }
  .orris-foot--v2 .orris-foot__list a { display: inline-block; font-size: 1.5rem; }

  .orris-foot--v2 .orris-foot__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem 3.2rem;
    padding-block: 2.4rem 3.2rem;
  }
}

/* An underline that grows from the left, on pointer devices only so a tap does
   not leave it stuck on. */
@media screen and (min-width: 750px) and (hover: hover) {
  .orris-foot--v2 .orris-foot__list a { position: relative; }
  .orris-foot--v2 .orris-foot__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--orris-ease);
  }
  .orris-foot--v2 .orris-foot__list a:hover,
  .orris-foot--v2 .orris-foot__list a:focus-visible { color: var(--foot-strong); }
  .orris-foot--v2 .orris-foot__list a:hover::after,
  .orris-foot--v2 .orris-foot__list a:focus-visible::after { transform: scaleX(1); }
}

/* The full-width brand band only exists between 750px and 990px, so it gets a
   rule under it and lays its parts out across the width instead of stacking
   them down the left edge. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .orris-foot--v2 .orris-foot__col--brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.6rem 4.8rem;
    padding-bottom: 3.6rem;
    border-bottom: 1px solid var(--foot-rule-soft);
  }
  .orris-foot--v2 .orris-foot__col--brand .orris-foot__blurb {
    margin-top: 0;
    max-width: 46ch;
  }
  .orris-foot--v2 .orris-foot__col--brand .orris-foot__socials {
    margin: 0 0 0 auto;
    align-self: center;
  }
}

@media screen and (min-width: 990px) {
  .orris-foot--v2 .orris-foot__top {
    /* 1.8fr left the brand column ~90px wider than its own 34ch paragraph, so
       the footer opened with a column of dead black between the blurb and
       SHOP. The column and the measure now agree. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 4.8rem 4rem;
    padding-block: 8rem 5.2rem;
  }
  .orris-foot--v2 .orris-foot__col--brand { grid-column: auto; }
  /* Optical top-alignment with the column labels: see the note on line-height. */
  /* 4.2rem suited a five-letter name. Measured at this tracking the type runs
     about 133px per rem, so seventeen characters wanted ~630px inside a brand
     column that is only ~500px wide. 3.6rem fits it on one line with room to
     spare, and the column still reads as the largest thing in the footer. */
  .orris-foot--v2 .orris-foot__wordmark { margin-top: -0.7rem; font-size: 3.6rem; letter-spacing: 0.13em; }
  .orris-foot--v2 .orris-foot__wordmark::after { width: 4rem; margin-top: 2rem; }
  .orris-foot--v2 .orris-foot__blurb { margin-top: 2.2rem; max-width: 38ch; font-size: 1.5rem; }
  .orris-foot--v2 .orris-foot__socials { margin-top: 3.2rem; }
  .orris-foot--v2 .orris-foot__bar { padding-inline-end: 7.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .orris-foot--v2 .orris-foot__sum .orris-foot__head::after,
  .orris-foot--v2 .orris-foot__list a::after,
  .orris-foot--v2 .orris-foot__disc[open] .orris-foot__panel {
    transition: none;
    animation: none;
  }
}
/* END_SECTION:orris-footer */
/* START_SECTION:orris-popup (INDEX:72) */
.opz {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.opz[hidden] { display: none; }
.opz__scrim { position: absolute; inset: 0; background: rgba(23, 19, 15, 0.55); border: 0; }

.opz__box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: min(100%, 96rem);
  max-height: calc(100dvh - 4rem);
  overflow: auto;
  background: var(--orris-white, #fff);
  box-shadow: 0 2.4rem 6rem rgba(23, 19, 15, 0.28);
  animation: opz-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) { .opz__box { animation: none; } }
@keyframes opz-in { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }

.opz__x {
  position: absolute;
  top: 1rem; inset-inline-end: 1rem;
  width: 4.4rem; height: 4.4rem;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--orris-ink, #17130f);
  z-index: 2;
}
.opz__x svg { width: 2rem; height: 2rem; }
.opz__x:focus-visible { outline: 2px solid var(--orris-gold-ink, #965c1d); outline-offset: -2px; }

.opz__media { display: none; background: var(--orris-surface, #f6f3ee); }
.opz__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.opz__body {
  padding: 4rem 2.4rem 3.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.opz__brand {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orris-ink, #17130f);
  margin: 0 0 2.4rem;
}
.opz__title {
  /* The reference sets this in Sofia Pro, which is an Adobe Fonts licence.
     Poppins is the store's own UI face and the closest thing already loaded —
     adding a fourth family for one modal would cost a request for nothing. */
  font-family: var(--font-body-family, sans-serif);
  font-weight: 500;
  font-size: clamp(3.6rem, 9vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}
.opz__sub {
  margin: 1.4rem 0 0;
  max-width: 34ch;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--orris-ink-3, #45392f);
}
.opz__form { width: 100%; max-width: 42rem; margin-top: 2.8rem; }
.opz__field {
  width: 100%;
  min-height: 5.6rem;
  padding: 0 1.8rem;
  /* 16px exactly: below this iOS zooms the page when the field is focused,
     which on a modal leaves the user scrolled somewhere they cannot escape. */
  font-size: 1.6rem;
  font-family: var(--font-body-family, sans-serif);
  color: var(--orris-ink, #17130f);
  text-align: center;
  background: #fff;
  border: 1px solid var(--orris-ink, #17130f);
  border-radius: 6px;
}
.opz__field::placeholder { color: var(--orris-muted, #6d6459); }
/* A focus ring offset outside a bordered field draws a second, differently
   coloured rectangle around the first. Thicken the field's own border instead —
   still an unmistakable focus state, one boundary. */
.opz__field:focus { outline: none; }
.opz__field:focus-visible,
.opz__field:focus { border-color: var(--orris-ink, #17130f); box-shadow: inset 0 0 0 1px var(--orris-ink, #17130f); }
.opz__btn {
  width: 100%;
  min-height: 5.6rem;
  margin-top: 1.2rem;
  padding: 0 2rem;
  background: var(--opz-accent, #2d7c94);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: filter 0.18s ease;
}
.opz__btn:hover { filter: brightness(0.92); }
.opz__btn:focus-visible { outline: 2px solid var(--orris-ink, #17130f); outline-offset: 2px; }
.opz__err { margin: 1rem 0 0; font-size: 1.35rem; color: var(--orris-sale, #c8102e); }
.opz__decline {
  margin-top: 2rem;
  min-height: 4.4rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.5rem;
  color: var(--orris-ink, #17130f);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}
.opz__terms {
  margin: 2.4rem 0 0;
  max-width: 52ch;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--orris-muted, #6d6459);
}

@media screen and (min-width: 750px) {
  .opz__box { grid-template-columns: 32rem 1fr; }
  .opz__media { display: block; }
  .opz__body { padding: 5.6rem 5.6rem 4.4rem; }
  .opz__brand { margin-bottom: 3.2rem; }
}
/* END_SECTION:orris-popup */
/* START_SECTION:orris-signup-bar (INDEX:82) */
.osb { background: var(--osb-bg, #027da1); color: #fff; margin-top: 2rem; }
.osb__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding-block: 3.2rem;
}
@media screen and (min-width: 990px) {
  .osb__inner { grid-template-columns: 1fr auto; gap: 4rem; padding-block: 3.9rem; }
}
.osb__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  /* 37px and a 5px gap to the sub-line, per the reference inspector. */
  font-size: clamp(2.6rem, 3.4vw, 3.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 0.5rem;
}
.osb__sub { margin: 0; font-size: 1.8rem; line-height: 1.35; color: #fff; max-width: 70ch; }

.osb__form { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; max-width: 100%; min-width: 0; }
@media screen and (min-width: 990px) {
  /* The field had a 26rem flex-basis inside an auto-width grid column, so the
     button had nowhere to sit and wrapped underneath — which is also what made
     the band taller than the reference. One row, no wrapping. */
  .osb__form { flex-wrap: nowrap; width: 54rem; }
  .osb__field { flex: 1 1 auto; }
}
.osb__field {
  /* min-width: 0 is what lets this shrink. A flex item refuses to go narrower
     than its basis (26rem = 260px) without it, which is what pushed the field
     past the panel edge on a 320-390px phone. */
  flex: 1 1 26rem;
  min-width: 0;
  max-width: 100%;
  min-height: 5.2rem;
  padding: 0 1.6rem;
  /* 16px: below it iOS zooms the page on focus. */
  font-size: 1.6rem;
  font-family: var(--font-body-family, sans-serif);
  color: var(--orris-ink, #17130f);
  background: #fff;
  border: 0;
  border-radius: 0;
}
.osb__field::placeholder { color: var(--orris-muted, #6d6459); }
.osb__field:focus { outline: 2px solid #fff; outline-offset: 2px; }
.osb__btn {
  flex: 0 0 auto;
  min-height: 5.2rem;
  padding: 0 3rem;
  background: var(--orris-ink, #17130f);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.5rem;
  font-weight: 500;
  transition: background 0.18s ease;
}
/* Inverts rather than darkens: on a teal ground a black button going blacker
   reads as nothing happening. */
.osb__btn:hover { background: #fff; color: var(--orris-ink, #17130f); }
.osb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.osb__msg { flex: 1 1 100%; margin: 0.4rem 0 0; font-size: 1.35rem; color: #fff; }
.osb__msg--err { color: #ffd9d9; }

/* Phones and tablets — everything below the 990px desktop layout.
   The previous rule stopped at 749px, so 750-989px tablets kept the wide
   two-column form and overflowed. `minmax(0, 1fr)` on the grid is the other
   half of the fix: a default `1fr` track refuses to shrink below its content,
   so a long heading could push the whole column past the viewport. */
@media screen and (max-width: 989px) {
  .osb__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 2.4rem;
  }
  .osb__copy { min-width: 0; }
  /* One row at every width: a 0 basis on the field means it absorbs only the
     leftover space, so the button stays beside it instead of wrapping under. */
  .osb__form { flex-wrap: wrap; width: 100%; gap: 0; align-items: stretch; }
  .osb__field { flex: 1 1 0; min-width: 0; }
  .osb__btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 1.8rem; }
  .osb__msg { flex: 1 1 100%; }
  /* Long unbroken words (a pasted URL, "drops and offers") must wrap rather
     than widen the column. */
  .osb__title,
  .osb__sub { overflow-wrap: anywhere; }
}

/* Small phones: trim the type so the heading does not eat the screen. */
@media screen and (max-width: 479px) {
  .osb__title { font-size: clamp(2.2rem, 7vw, 2.8rem); }
  .osb__sub { font-size: 1.5rem; }
  .osb__field,
  .osb__btn { min-height: 4.8rem; }
}
/* END_SECTION:orris-signup-bar */