/* ==========================================================================
   FORMery Design System
   Built to FORMery Brand Guidelines v1.0 (June 2026)
   Forest Green leads · Off White gives it room to breathe · Gold is a spark
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.fmy.fmy {
  /* Brand palette: the only three colours that carry the brand */
  --forest:        #1F3D2B;
  --forest-deep:   #162C1F;   /* darker tint for depth, footers, overlays */
  --forest-soft:   #2E5540;   /* lighter tint for secondary surfaces */
  --paper:         #F5F3EF;   /* Off White */
  --paper-warm:    #EFEBE4;   /* subtle sectional shift, still off-white */
  --gold:          #C6A96B;   /* ACCENT ONLY: rules, borders, icons, large marks */
  --gold-soft:     rgba(198, 169, 107, 0.28);
  --gold-faint:    rgba(198, 169, 107, 0.12);

  /* Derived text colours (never gold for body copy) */
  --ink:           #1F3D2B;
  --ink-muted:     #4A5F52;
  --ink-faint:     #55685C;
  --on-dark:       #F5F3EF;
  --on-dark-muted: rgba(245, 243, 239, 0.74);
  --on-dark-faint: rgba(245, 243, 239, 0.62);

  --line:          rgba(31, 61, 43, 0.14);
  --line-soft:     rgba(31, 61, 43, 0.08);
  --line-dark:     rgba(245, 243, 239, 0.16);

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale: generous, editorial */
  --t-hero:   clamp(3rem, 1.6rem + 5.6vw, 6.5rem);
  --t-d1:     clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  --t-d2:     clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --t-d3:     clamp(1.6rem, 1.25rem + 1.4vw, 2.35rem);
  --t-d4:     clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  --t-lead:   clamp(1.125rem, 1.02rem + 0.42vw, 1.4rem);
  --t-body:   clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);
  --t-small:  0.9375rem;
  --t-micro:  0.75rem;

  /* Space */
  --sp-1: 0.5rem;  --sp-2: 0.875rem; --sp-3: 1.25rem; --sp-4: 1.75rem;
  --sp-5: 2.5rem;  --sp-6: 3.5rem;   --sp-7: 5rem;    --sp-8: 7rem;
  --sp-9: clamp(4.5rem, 3rem + 7vw, 10rem);   /* section rhythm */

  /* Layout */
  --shell:    1240px;
  --measure:  62ch;
  --gutter:   clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --radius:   2px;      /* almost none, because the brand is calm, not bubbly */
  --radius-lg: 4px;
  --radius-organic: 48% 52% 55% 45% / 46% 44% 56% 54%;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 84px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
.fmy.fmy *, .fmy.fmy *::before, .fmy.fmy *::after { box-sizing: border-box; }
.fmy.fmy { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { .fmy.fmy { scroll-behavior: auto; } }

.fmy.fmy {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.fmy.fmy h1, .fmy.fmy h2, .fmy.fmy h3, .fmy.fmy h4, .fmy.fmy h5 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 var(--sp-3);
  color: var(--forest);
  text-wrap: balance;
}
.fmy.fmy h1 { font-size: var(--t-d1); }
.fmy.fmy h2 { font-size: var(--t-d2); }
.fmy.fmy h3 { font-size: var(--t-d3); }
.fmy.fmy h4 { font-size: var(--t-d4); line-height: 1.2; }

.fmy.fmy p { margin: 0 0 var(--sp-3); max-width: var(--measure); }
.fmy.fmy p:last-child { margin-bottom: 0; }

.fmy.fmy a { color: inherit; text-decoration: none; }
.fmy.fmy img, .fmy.fmy svg, .fmy.fmy video { max-width: 100%; display: block; }
.fmy.fmy ul, .fmy.fmy ol { margin: 0 0 var(--sp-3); padding-left: 1.15em; }
.fmy.fmy li { margin-bottom: 0.4em; }
.fmy.fmy strong { font-weight: 700; }
.fmy.fmy hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

.fmy.fmy *::selection { background: var(--gold-soft); color: var(--forest); }

.fmy.fmy *:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.fmy.fmy .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.fmy.fmy .shell--narrow { max-width: 860px; }
.fmy.fmy .shell--wide { max-width: 1440px; }

.fmy.fmy .section { padding-block: var(--sp-9); position: relative; }
.fmy.fmy .section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.fmy.fmy .section--flush-top { padding-top: 0; }

.fmy.fmy .section--paper { background: var(--paper); }
.fmy.fmy .section--warm { background: var(--paper-warm); }
.fmy.fmy .section--forest { background: var(--forest); color: var(--on-dark); }
.fmy.fmy .section--forest h1, .fmy.fmy .section--forest h2, .fmy.fmy .section--forest h3, .fmy.fmy .section--forest h4 { color: var(--on-dark); }
.fmy.fmy .section--forest p { color: var(--on-dark-muted); }
.fmy.fmy .section--deep { background: var(--forest-deep); color: var(--on-dark); }
.fmy.fmy .section--deep h1, .fmy.fmy .section--deep h2, .fmy.fmy .section--deep h3, .fmy.fmy .section--deep h4 { color: var(--on-dark); }
.fmy.fmy .section--deep p { color: var(--on-dark-muted); }

.fmy.fmy .grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
.fmy.fmy .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fmy.fmy .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fmy.fmy .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fmy.fmy .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.fmy.fmy .grid--aside { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.fmy.fmy .grid--aside-r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }

@media (max-width: 980px) {
  .fmy.fmy .grid--3, .fmy.fmy .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmy.fmy .grid--split, .fmy.fmy .grid--aside, .fmy.fmy .grid--aside-r { grid-template-columns: minmax(0, 1fr); }
  .fmy.fmy .grid--aside .media-first, .fmy.fmy .grid--split .media-first { order: -1; }
}
@media (max-width: 620px) {
  .fmy.fmy .grid--2, .fmy.fmy .grid--3, .fmy.fmy .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.fmy.fmy .stack > * + * { margin-top: var(--sp-3); }
.fmy.fmy .stack-lg > * + * { margin-top: var(--sp-5); }
.fmy.fmy .center { text-align: center; }
.fmy.fmy .center p, .fmy.fmy .center .lead { margin-inline: auto; }
.fmy.fmy .measure { max-width: var(--measure); }
.fmy.fmy .measure-sm { max-width: 46ch; }

/* --------------------------------------------------------------------------
   4. TYPE COMPONENTS
   -------------------------------------------------------------------------- */
.fmy.fmy .eyebrow {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fmy.fmy .eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold); flex: none;
}
.fmy.fmy .center .eyebrow { justify-content: center; }
.fmy.fmy .section--forest .eyebrow, .fmy.fmy .section--deep .eyebrow { color: var(--on-dark-faint); }

.fmy.fmy .lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-muted);
  font-weight: 300;
  max-width: 58ch;
}
.fmy.fmy .section--forest .lead, .fmy.fmy .section--deep .lead { color: var(--on-dark-muted); }

.fmy.fmy .display { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.02em; }

/* An italic serif phrase used for the brand's quieter statements */
.fmy.fmy .whisper {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-d4);
  line-height: 1.45;
  color: var(--ink-muted);
  font-weight: 300;
}
.fmy.fmy .section--forest .whisper, .fmy.fmy .section--deep .whisper { color: var(--on-dark-muted); }

.fmy.fmy .pull {
  font-family: var(--serif);
  font-size: var(--t-d3);
  line-height: 1.3;
  font-style: italic;
  font-weight: 300;
  border-left: 1px solid var(--gold);
  padding-left: var(--sp-4);
  margin-block: var(--sp-5);
  max-width: 46ch;
}

.fmy.fmy .gold-rule {
  width: 44px; height: 1px; background: var(--gold);
  border: 0; margin: var(--sp-4) 0;
}
.fmy.fmy .center .gold-rule { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.fmy.fmy .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  font-family: var(--sans);
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  background: var(--forest); color: var(--paper);
  cursor: pointer;
  transition: background .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), transform .45s var(--ease);
  text-align: center; line-height: 1.2;
}
.fmy.fmy .btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); transform: translateY(-2px); }

.fmy.fmy .btn--ghost { background: transparent; color: var(--forest); border-color: var(--line); }
.fmy.fmy .btn--ghost:hover { background: transparent; border-color: var(--gold); color: var(--forest); }

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

.fmy.fmy .btn--outline-light { background: transparent; color: var(--paper); border-color: var(--line-dark); }
.fmy.fmy .btn--outline-light:hover { background: transparent; border-color: var(--gold); color: var(--paper); }

.fmy.fmy .btn--gold { background: transparent; color: var(--forest); border-color: var(--gold); }
.fmy.fmy .btn--gold:hover { background: var(--gold-faint); }

.fmy.fmy .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.fmy.fmy .center .btn-row { justify-content: center; }

/* Text link with a gold underline that draws in */
.fmy.fmy .tlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--forest); padding-bottom: 0.35rem;
  position: relative;
}
.fmy.fmy .tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0.34); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.fmy.fmy .tlink:hover::after { transform: scaleX(1); }
.fmy.fmy .tlink .arw { transition: transform .45s var(--ease-out); }
.fmy.fmy .tlink:hover .arw { transform: translateX(5px); }
.fmy.fmy .section--forest .tlink, .fmy.fmy .section--deep .tlink { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */

/* Scrolled state */

/* Over a dark hero */

/* Mobile drawer */

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.fmy.fmy .hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-8);
  background: var(--forest);
  color: var(--on-dark);
  overflow: hidden;
}
.fmy.fmy .hero__bg { position: absolute; inset: 0; z-index: 0; }
.fmy.fmy .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 18%, rgba(46,85,64,0.55) 0%, rgba(31,61,43,0) 62%);
}
.fmy.fmy .hero__line {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: min(58vw, 760px); height: auto; opacity: 0.5; z-index: 0; pointer-events: none;
}
.fmy.fmy .hero__inner { position: relative; z-index: 2; width: 100%; }
.fmy.fmy .hero h1 { color: var(--on-dark); font-size: var(--t-hero); line-height: 1.0; margin-bottom: var(--sp-4); }
.fmy.fmy .hero .lead { color: var(--on-dark-muted); max-width: 44ch; }
.fmy.fmy .hero__copy { max-width: 46rem; }
.fmy.fmy .hero .btn-row { margin-top: var(--sp-5); }

.fmy.fmy .hero--page {
  min-height: min(72vh, 660px);
}
.fmy.fmy .hero--light { background: var(--paper-warm); color: var(--ink); }
.fmy.fmy .hero--light h1 { color: var(--forest); }
.fmy.fmy .hero--light .lead { color: var(--ink-muted); }

/* Scroll cue */

@keyframes cue { 0% { transform: translateX(-100%);} 55%,100% { transform: translateX(100%);} }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.fmy.fmy .card {
  display: flex; flex-direction: column;
  background: transparent;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  transition: border-color .5s var(--ease);
}
.fmy.fmy .card:hover { border-top-color: var(--gold); }
.fmy.fmy .card h3, .fmy.fmy .card h4 { margin-bottom: var(--sp-2); }
.fmy.fmy .card p { color: var(--ink-muted); font-size: var(--t-small); line-height: 1.68; }
.fmy.fmy .card .tlink { margin-top: auto; padding-top: var(--sp-3); }
.fmy.fmy .card__num {
  font-family: var(--serif); font-size: 0.9rem; font-style: italic;
  color: var(--ink-muted); display: block; margin-bottom: var(--sp-2);
}
/* Gold clears 4.5:1 on Forest Green but not on off-white (see brand guidelines,
   accessibility note), so gold text is confined to the dark sections. */
.fmy.fmy .section--forest .card__num, .fmy.fmy .section--deep .card__num, .fmy.fmy .hero .card__num { color: var(--gold); }

/* Boxed variant, used on warm/forest backgrounds */
.fmy.fmy .card--boxed {
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 0.9rem + 1.1vw, 2.25rem);
  background: var(--paper);
  border-top-width: 1px;
}
.fmy.fmy .card--boxed:hover { border-color: var(--gold-soft); }
.fmy.fmy .section--forest .card, .fmy.fmy .section--deep .card { border-top-color: var(--line-dark); }
.fmy.fmy .section--forest .card p, .fmy.fmy .section--deep .card p { color: var(--on-dark-muted); }
.fmy.fmy .section--forest .card--boxed, .fmy.fmy .section--deep .card--boxed {
  background: rgba(245,243,239,0.04); border-color: var(--line-dark);
}

/* World card: the six brand worlds */
.fmy.fmy .world {
  position: relative; display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .55s var(--ease), transform .55s var(--ease), background .55s var(--ease);
}
.fmy.fmy .world::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .65s var(--ease-out);
}
.fmy.fmy .world:hover { transform: translateY(-4px); border-color: var(--gold-soft); background: rgba(198,169,107,0.05); }
.fmy.fmy .world:hover::before { transform: scaleX(1); }
.fmy.fmy .world__icon { width: 46px; height: 46px; margin-bottom: var(--sp-3); color: var(--gold); }
.fmy.fmy .world h3 { font-size: var(--t-d4); }
.fmy.fmy .world .kicker {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.35rem; display: block;
}
.fmy.fmy .section--forest .world { border-color: var(--line-dark); }
.fmy.fmy .section--forest .world:hover { background: rgba(245,243,239,0.05); }
.fmy.fmy .section--forest .world .kicker { color: var(--on-dark-faint); }

/* Service card with a big serif index */
.fmy.fmy .service {
  border-top: 1px solid var(--line); padding-top: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color .5s var(--ease);
}
.fmy.fmy .service:hover { border-top-color: var(--gold); }
.fmy.fmy .service__name { font-family: var(--serif); font-size: var(--t-d3); line-height: 1.1; }
.fmy.fmy .service__name em { font-style: italic; color: inherit; }
.fmy.fmy .section--forest .service__name em, .fmy.fmy .section--deep .service__name em { color: var(--gold); }

/* Feature list with gold ticks */
.fmy.fmy .ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.fmy.fmy .ticks li {
  position: relative; padding-left: 1.85rem; margin: 0;
  font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6;
}
.fmy.fmy .ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 1px; background: var(--gold);
}
.fmy.fmy .section--forest .ticks li, .fmy.fmy .section--deep .ticks li { color: var(--on-dark-muted); }

/* Chip cloud, for the long capability lists in the brief */
.fmy.fmy .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.fmy.fmy .chips li {
  margin: 0; font-size: 0.8125rem; line-height: 1.4;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 100px; color: var(--ink-muted);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.fmy.fmy .chips li:hover { border-color: var(--gold); color: var(--forest); }
.fmy.fmy .section--forest .chips li, .fmy.fmy .section--deep .chips li { border-color: var(--line-dark); color: var(--on-dark-muted); }
.fmy.fmy .section--forest .chips li:hover, .fmy.fmy .section--deep .chips li:hover { border-color: var(--gold); color: var(--on-dark); }

/* Numbered process steps */
.fmy.fmy .steps { display: grid; gap: var(--sp-5); counter-reset: step; }
.fmy.fmy .step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.fmy.fmy .step__no {
  font-family: var(--serif); font-size: var(--t-d3); font-style: italic;
  color: var(--ink-muted); line-height: 1; min-width: 2.2ch;
}
.fmy.fmy .section--forest .step__no, .fmy.fmy .section--deep .step__no { color: var(--gold); }
.fmy.fmy .step h4 { margin-bottom: 0.4rem; }
.fmy.fmy .step p { font-size: var(--t-small); color: var(--ink-muted); }
.fmy.fmy .section--forest .step p { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   9. MEDIA PLACEHOLDERS  (swap for real photography, see README)
   -------------------------------------------------------------------------- */
.fmy.fmy .media {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, var(--paper-warm) 0%, #E4DFD5 100%);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
}
.fmy.fmy .media--wide { aspect-ratio: 16 / 10; }
.fmy.fmy .media--square { aspect-ratio: 1 / 1; }
.fmy.fmy .media--tall { aspect-ratio: 3 / 4.4; }
.fmy.fmy .media--forest { background: linear-gradient(150deg, var(--forest-soft) 0%, var(--forest-deep) 100%); }
.fmy.fmy .media img { width: 100%; height: 100%; object-fit: cover; }

.fmy.fmy .media__note {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0.75rem 1rem; text-align: center;
  border-top: 1px solid var(--line-soft);
}
.fmy.fmy .media--forest .media__note { color: var(--on-dark-faint); border-top-color: var(--line-dark); }
.fmy.fmy .media__art { width: 66%; height: auto; opacity: 0.7; color: var(--gold); }

/* Offset gold frame behind an image: the "organic detail" motif */
.fmy.fmy .framed { position: relative; }
.fmy.fmy .framed::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-soft); border-radius: var(--radius-lg);
  z-index: 0; pointer-events: none;
}
.fmy.fmy .framed .media { position: relative; z-index: 1; }
@media (max-width: 620px) { .fmy.fmy .framed::before { inset: 12px -12px -12px 12px; } }

/* Decorative organic blob of colour */
.fmy.fmy .blob {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: var(--radius-organic);
  background: var(--gold-faint);
  filter: blur(2px);
}

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.fmy.fmy .form { display: grid; gap: var(--sp-4); }
.fmy.fmy .form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 680px) { .fmy.fmy .form__grid { grid-template-columns: 1fr; } }
.fmy.fmy .form__full { grid-column: 1 / -1; }

.fmy.fmy .field { display: flex; flex-direction: column; gap: 0.5rem; }
.fmy.fmy .field > label, .fmy.fmy .fieldset > legend {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fmy.fmy .field .hint { font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.5; }

.fmy.fmy input[type="text"], .fmy.fmy input[type="email"], .fmy.fmy input[type="tel"], .fmy.fmy input[type="url"], .fmy.fmy input[type="number"], .fmy.fmy input[type="date"], .fmy.fmy select, .fmy.fmy textarea {
  font-family: var(--sans); font-size: var(--t-body); color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 0.75rem 0.1rem; width: 100%;
  border-radius: 0;
  transition: border-color .4s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.fmy.fmy select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C6A96B' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 12px;
  padding-right: 1.75rem;
}
.fmy.fmy textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
.fmy.fmy input:focus, .fmy.fmy select:focus, .fmy.fmy textarea:focus { outline: none; border-bottom-color: var(--gold); }
.fmy.fmy input::placeholder, .fmy.fmy textarea::placeholder { color: var(--ink-faint); opacity: 0.65; }

.fmy.fmy .fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.fmy.fmy .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem 1.25rem; }
.fmy.fmy .check {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: var(--t-small); color: var(--ink-muted); cursor: pointer; line-height: 1.45;
}
.fmy.fmy .check input[type="checkbox"], .fmy.fmy .check input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: none; margin-top: 0.18em;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fmy.fmy .check input[type="radio"] { border-radius: 50%; }
.fmy.fmy .check input:checked {
  border-color: var(--gold);
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5' fill='none' stroke='%231F3D2B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.fmy.fmy .check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 3px var(--paper); }
.fmy.fmy .check:hover input { border-color: var(--gold); }

/* Forms on forest */
.fmy.fmy .section--forest input, .fmy.fmy .section--forest select, .fmy.fmy .section--forest textarea, .fmy.fmy .section--deep input, .fmy.fmy .section--deep select, .fmy.fmy .section--deep textarea { color: var(--on-dark); border-bottom-color: var(--line-dark); }
.fmy.fmy .section--forest .field > label, .fmy.fmy .section--forest .fieldset > legend, .fmy.fmy .section--deep .field > label, .fmy.fmy .section--deep .fieldset > legend { color: var(--on-dark-faint); }
.fmy.fmy .section--forest .check, .fmy.fmy .section--deep .check { color: var(--on-dark-muted); }
.fmy.fmy .section--forest .check input, .fmy.fmy .section--deep .check input { border-color: var(--line-dark); }
.fmy.fmy .section--forest .field .hint, .fmy.fmy .section--deep .field .hint { color: var(--on-dark-faint); }

.fmy.fmy .form__consent { font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.6; max-width: 60ch; }
.fmy.fmy .form__consent a { border-bottom: 1px solid var(--gold-soft); }
.fmy.fmy .section--forest .form__consent, .fmy.fmy .section--deep .form__consent { color: var(--on-dark-faint); }

.fmy.fmy .form-status {
  font-size: var(--t-small); padding: 1rem 1.25rem;
  border: 1px solid var(--gold-soft); background: var(--gold-faint);
  display: none;
}
.fmy.fmy .form-status.is-visible { display: block; }

/* Panel that holds a form on a light background */
.fmy.fmy .panel {
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
.fmy.fmy .panel--warm { background: var(--paper-warm); border-color: transparent; }

/* --------------------------------------------------------------------------
   11. BOOKING / TRAFFT EMBED
   -------------------------------------------------------------------------- */
.fmy.fmy .booking-embed {
  position: relative; width: 100%; min-height: 760px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.fmy.fmy .booking-embed iframe { width: 100%; min-height: 760px; border: 0; display: block; }
.fmy.fmy .embed-placeholder {
  min-height: 760px; display: grid; place-items: center; text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(198,169,107,0.07) 14px 28px);
}
.fmy.fmy .embed-placeholder__inner { max-width: 44ch; }
.fmy.fmy .embed-placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem; background: rgba(31,61,43,0.06);
  padding: 0.15em 0.45em; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   12. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.fmy.fmy .acc { border-top: 1px solid var(--line); }
.fmy.fmy .acc__item { border-bottom: 1px solid var(--line); }
.fmy.fmy .acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: var(--sp-4) 0;
  font-family: var(--serif); font-size: var(--t-d4); color: var(--forest); line-height: 1.25;
}
.fmy.fmy .acc__btn .sign { position: relative; width: 14px; height: 14px; flex: none; margin-top: 0.5em; }
.fmy.fmy .acc__btn .sign::before, .fmy.fmy .acc__btn .sign::after {
  content: ""; position: absolute; background: var(--gold); transition: transform .45s var(--ease);
}
.fmy.fmy .acc__btn .sign::before { inset: 50% 0 auto 0; height: 1px; transform: translateY(-50%); }
.fmy.fmy .acc__btn .sign::after { inset: 0 50% 0 auto; width: 1px; transform: translateX(50%) scaleY(1); }
.fmy.fmy .acc__btn[aria-expanded="true"] .sign::after { transform: translateX(50%) scaleY(0); }
.fmy.fmy .acc__panel { overflow: hidden; height: 0; transition: height .5s var(--ease-out); }
.fmy.fmy .acc__panel > div { padding-bottom: var(--sp-4); }
.fmy.fmy .acc__panel p { font-size: var(--t-small); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   13. QUOTES / TESTIMONIALS
   -------------------------------------------------------------------------- */
.fmy.fmy .quote { display: flex; flex-direction: column; gap: var(--sp-3); }
.fmy.fmy .quote__mark { width: 30px; height: auto; color: var(--gold); }
.fmy.fmy .quote blockquote {
  margin: 0; font-family: var(--serif); font-size: var(--t-d4);
  line-height: 1.45; font-style: italic; font-weight: 300; color: var(--ink);
}
.fmy.fmy .quote figcaption {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fmy.fmy .section--forest .quote blockquote, .fmy.fmy .section--deep .quote blockquote { color: var(--on-dark); }
.fmy.fmy .section--forest .quote figcaption, .fmy.fmy .section--deep .quote figcaption { color: var(--on-dark-faint); }

/* Marquee-free statement band */
.fmy.fmy .band {
  border-block: 1px solid var(--line);
  padding-block: var(--sp-6);
  text-align: center;
}
.fmy.fmy .band .whisper { max-width: 30ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   15. LOGO COMPONENT
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   16. MOTION: subtle reveal, respects reduced motion
   -------------------------------------------------------------------------- */
.fmy.fmy [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.fmy.fmy [data-reveal].is-in { opacity: 1; transform: none; }

.fmy.fmy .draw-line { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.fmy.fmy .draw-line.is-in { animation: draw 2.6s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fmy.fmy *, .fmy.fmy *::before, .fmy.fmy *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fmy.fmy [data-reveal] { opacity: 1; transform: none; }
  .fmy.fmy .draw-line { stroke-dashoffset: 0; }
  .fmy.fmy .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  .fmy.fmy .marquee { -webkit-mask-image: none; mask-image: none; }
  .fmy.fmy .marquee__set:nth-child(2) { display: none; }
  .fmy.fmy .tabs__panel { animation: none; }
  .fmy.fmy .world::after { display: none; }
  .fmy.fmy .media[data-parallax] .media__art, .fmy.fmy .media[data-parallax] img { transform: none; }
}

/* --------------------------------------------------------------------------
   17. ANIMATED CONTAINERS
   Tabs, marquee, expandable info boxes, cursor spotlight, parallax-lite.
   Every one degrades to a static, readable block with JS off, and all
   movement is switched off under prefers-reduced-motion (section 19).
   -------------------------------------------------------------------------- */

/* --- Tabs -------------------------------------------------------------- */
.fmy.fmy .tabs { display: grid; gap: var(--sp-5); }
.fmy.fmy .tabs__bar {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem;
  border-bottom: 1px solid var(--line); position: relative;
}
.fmy.fmy .section--forest .tabs__bar, .fmy.fmy .section--deep .tabs__bar { border-bottom-color: var(--line-dark); }
.fmy.fmy .tabs__tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 0 1rem; position: relative;
  transition: color .45s var(--ease);
}
.fmy.fmy .tabs__tab:hover { color: var(--ink); }
.fmy.fmy .tabs__tab[aria-selected="true"] { color: var(--forest); }
.fmy.fmy .section--forest .tabs__tab, .fmy.fmy .section--deep .tabs__tab { color: var(--on-dark-faint); }
.fmy.fmy .section--forest .tabs__tab:hover, .fmy.fmy .section--deep .tabs__tab:hover { color: var(--on-dark); }
.fmy.fmy .section--forest .tabs__tab[aria-selected="true"], .fmy.fmy .section--deep .tabs__tab[aria-selected="true"] { color: var(--on-dark); }
/* the sliding gold underline */
.fmy.fmy .tabs__ink {
  position: absolute; left: 0; top: 0; height: 1px; width: 0;
  background: var(--gold); transition: transform .55s var(--ease-out), width .55s var(--ease-out);
  pointer-events: none;
}
.fmy.fmy .tabs__panel[hidden] { display: none; }
.fmy.fmy .tabs__panel {
  animation: tabIn .65s var(--ease-out) both;
}
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Marquee ----------------------------------------------------------- */
.fmy.fmy .marquee {
  position: relative; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fmy.fmy .marquee__track {
  display: flex; width: max-content; gap: 0;
  animation: slide var(--marquee-speed, 64s) linear infinite;
}
.fmy.fmy .marquee:hover .marquee__track { animation-play-state: paused; }
.fmy.fmy .marquee__set { display: flex; gap: 0.5rem; padding-right: 0.5rem; flex: none; }
.fmy.fmy .marquee .chips li { white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --- Expandable info box ----------------------------------------------- */
.fmy.fmy .info {
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.fmy.fmy .info:hover { border-color: var(--gold-soft); }
.fmy.fmy .info.is-open { border-color: var(--gold-soft); }
.fmy.fmy .section--forest .info, .fmy.fmy .section--deep .info {
  background: rgba(245,243,239,0.04); border-color: var(--line-dark);
}
.fmy.fmy .info__head {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: clamp(1.25rem, 1rem + 0.8vw, 1.85rem);
  font-family: inherit; color: inherit;
}
.fmy.fmy .info__head h4 { margin: 0 0 0.35rem; }
.fmy.fmy .info__head p { font-size: var(--t-small); color: var(--ink-muted); margin: 0; }
.fmy.fmy .section--forest .info__head p, .fmy.fmy .section--deep .info__head p { color: var(--on-dark-muted); }
.fmy.fmy .info__chev {
  flex: none; width: 26px; height: 26px; border: 1px solid var(--gold-soft);
  border-radius: 50%; display: grid; place-items: center; margin-top: 0.15rem;
  transition: transform .55s var(--ease-out), background .45s var(--ease), border-color .45s var(--ease);
}
.fmy.fmy .info__chev svg { width: 9px; height: 9px; color: var(--gold); }
.fmy.fmy .info.is-open .info__chev { transform: rotate(180deg); background: var(--gold-faint); }
.fmy.fmy .info__body { height: 0; overflow: hidden; transition: height .55s var(--ease-out); }
.fmy.fmy .info__body > div {
  padding: 0 clamp(1.25rem, 1rem + 0.8vw, 1.85rem) clamp(1.25rem, 1rem + 0.8vw, 1.85rem);
}
.fmy.fmy .info__body p, .fmy.fmy .info__body li { font-size: var(--t-small); color: var(--ink-muted); }
.fmy.fmy .section--forest .info__body p, .fmy.fmy .section--forest .info__body li, .fmy.fmy .section--deep .info__body p, .fmy.fmy .section--deep .info__body li { color: var(--on-dark-muted); }

/* --- Cursor spotlight on cards ----------------------------------------- */
.fmy.fmy .world { --mx: 50%; --my: 50%; }
.fmy.fmy .world::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(198,169,107,0.16), transparent 68%);
  transition: opacity .55s var(--ease); pointer-events: none;
}
.fmy.fmy .world:hover::after { opacity: 1; }
.fmy.fmy .world > * { position: relative; z-index: 1; }

/* --- Parallax-lite on media -------------------------------------------- */
.fmy.fmy .media__art, .fmy.fmy .media img { will-change: transform; }
.fmy.fmy .media[data-parallax] .media__art, .fmy.fmy .media[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0); }

/* --------------------------------------------------------------------------
   18. UTILITIES
   -------------------------------------------------------------------------- */
.fmy.fmy .vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fmy.fmy .gold { color: inherit; border-bottom: 1px solid var(--gold); transition: border-color .4s var(--ease); }
.fmy.fmy .gold:hover { border-bottom-color: currentColor; }
.fmy.fmy .mt-0 { margin-top: 0; } .fmy.fmy .mb-0 { margin-bottom: 0; }
.fmy.fmy .mt-4 { margin-top: var(--sp-4); } .fmy.fmy .mt-5 { margin-top: var(--sp-5); } .fmy.fmy .mt-6 { margin-top: var(--sp-6); }
.fmy.fmy .rel { position: relative; z-index: 1; }

/* Breadcrumb-ish page label */
.fmy.fmy .page-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-4);
}
.fmy.fmy .hero .page-tag { color: var(--on-dark-faint); }
.fmy.fmy .page-tag i { width: 22px; height: 1px; background: var(--gold); display: block; }

@media print {
  
  .fmy.fmy { background: #fff; }
}

/* ==== FORMery / WordPress embed layer ==================================== */

/* The wrapper itself. `overflow-x: clip` contains the hero line-art and any
   full-bleed sections without creating a scroll container. */
.fmy.fmy {
  display: block;
  text-align: left;
  container-type: inline-size;   /* see "container-relative type" below */
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Contain the hero line-art. Not applied to the full-bleed variant, whose
   sections deliberately extend past the wrapper. */
.fmy.fmy:not(.fmy--bleed) { overflow-x: clip; }

/* --- Container-relative type ----------------------------------------------
   The standalone site sizes display type against the viewport (vw). Inside a
   WordPress page that is wrong: an 820px theme container would still get
   viewport-sized headlines and the hero would swamp the column. Because .fmy
   is a container, its direct children can size against the *block's* width
   instead, so the same snippet reads correctly whether it is dropped into a
   narrow content column or set to full width.

   cqi resolves against the nearest ancestor container, never the element
   itself, which is why these are declared on the sections rather than on .fmy. */
@supports (width: 1cqi) {
  .fmy.fmy > .section, .fmy.fmy > .hero {
    --t-hero: clamp(2.6rem, 1.35rem + 6.4cqi, 6rem);
    --t-d1:   clamp(2.2rem, 1.35rem + 4.1cqi, 4.1rem);
    --t-d2:   clamp(1.85rem, 1.3rem + 2.7cqi, 3rem);
    --t-d3:   clamp(1.5rem, 1.22rem + 1.6cqi, 2.2rem);
    --t-d4:   clamp(1.28rem, 1.13rem + 0.8cqi, 1.7rem);
    --t-lead: clamp(1.08rem, 1rem + 0.5cqi, 1.35rem);
    --gutter: clamp(1.25rem, 0.55rem + 3.2cqi, 3.5rem);
  }
}

/* Defensive resets, because themes love to restyle these globally. Specificity alone
   is not enough: a property we never declare is a property the theme still
   controls, so anything a theme commonly forces has to be named explicitly. */
.fmy.fmy button, .fmy.fmy input, .fmy.fmy select, .fmy.fmy textarea { font-family: inherit; }
.fmy.fmy a { text-decoration: none; box-shadow: none; }
.fmy.fmy a:hover { text-decoration: none; }
.fmy.fmy img { max-width: 100%; height: auto; }
.fmy.fmy figure { margin: 0; }
.fmy.fmy li::marker { color: var(--gold); }
.fmy.fmy .btn { text-decoration: none; }

/* Inheritance is the weakest source of a value: ANY theme declaration beats
   it, however low its specificity. `body{color:#333}` inherits into our
   paragraphs harmlessly, but `p{color:#b00}` does not. It wins outright.
   So every element we rely on inheritance for has to claim `inherit` back. */
.fmy.fmy p, .fmy.fmy li, .fmy.fmy span, .fmy.fmy small, .fmy.fmy strong,
.fmy.fmy em, .fmy.fmy b, .fmy.fmy i, .fmy.fmy label, .fmy.fmy legend,
.fmy.fmy dt, .fmy.fmy dd, .fmy.fmy figcaption, .fmy.fmy blockquote,
.fmy.fmy code, .fmy.fmy time {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  font-family: inherit;
}
.fmy.fmy code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fmy.fmy strong, .fmy.fmy b { font-weight: 700; }
.fmy.fmy em, .fmy.fmy i { font-style: italic; }

.fmy.fmy h1, .fmy.fmy h2, .fmy.fmy h3, .fmy.fmy h4, .fmy.fmy h5, .fmy.fmy h6 {
  text-transform: none; font-style: normal; font-variant: normal;
  text-shadow: none; text-decoration: none; text-indent: 0; word-spacing: normal;
  border: 0; padding: 0; background: none;
}
.fmy.fmy p, .fmy.fmy li, .fmy.fmy a, .fmy.fmy span, .fmy.fmy div {
  text-shadow: none; text-indent: 0;
}
.fmy.fmy section, .fmy.fmy article, .fmy.fmy aside, .fmy.fmy div, .fmy.fmy span {
  border: 0; background-image: none;
}
.fmy.fmy .media, .fmy.fmy .panel, .fmy.fmy .card--boxed, .fmy.fmy .world,
.fmy.fmy .info, .fmy.fmy .booking-embed { background-image: initial; }
.fmy.fmy img, .fmy.fmy svg, .fmy.fmy iframe { border: 0; box-shadow: none; }
.fmy.fmy blockquote { border: 0; padding: 0; margin: 0; quotes: none; background: none; }
.fmy.fmy blockquote::before, .fmy.fmy blockquote::after { content: none; }
.fmy.fmy li { margin: 0 0 0.4em; padding: 0; }
.fmy.fmy ul, .fmy.fmy ol { list-style-position: outside; }
.fmy.fmy button { border-radius: 0; text-transform: none; box-shadow: none; }
.fmy.fmy .btn { border-radius: var(--radius); text-transform: uppercase; }
.fmy.fmy .tabs__tab, .fmy.fmy .info__head, .fmy.fmy .acc__btn { border-radius: 0; }
.fmy.fmy .tabs__tab { text-transform: uppercase; }
.fmy.fmy .eyebrow, .fmy.fmy .kicker, .fmy.fmy .page-tag, .fmy.fmy .tlink,
.fmy.fmy .quote figcaption, .fmy.fmy .field > label, .fmy.fmy .fieldset > legend,
.fmy.fmy .scroll-cue { text-transform: uppercase; }
.fmy.fmy fieldset { border: 0; margin: 0; padding: 0; }
.fmy.fmy legend { padding: 0; float: none; width: auto; }
.fmy.fmy hr { background: none; height: 0; }
.fmy.fmy .whisper, .fmy.fmy .pull, .fmy.fmy .quote blockquote,
.fmy.fmy .service__name em, .fmy.fmy .card__num, .fmy.fmy .step__no { font-style: italic; }

/* No fixed site header in WordPress, so the hero doesn't need to duck under
   one, and it sits below the theme's own header, so it wants less height. */
.fmy.fmy .hero {
  min-height: 0;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}
.fmy.fmy .hero--page { min-height: 0; }
.fmy.fmy .hero__copy { max-width: 46rem; }

/* --- Optional full-bleed --------------------------------------------------
   Preferred route: set the WordPress block itself to "Full width" alignment.
   If your theme doesn't offer that, add `fmy--bleed` to the wrapper div and
   the coloured sections will break out of the content container instead. */
.fmy--bleed.fmy--bleed .section,
.fmy--bleed.fmy--bleed .hero { margin-inline: calc(50% - 50vw); }
.fmy--bleed.fmy--bleed .section > .shell,
.fmy--bleed.fmy--bleed .hero > .shell { margin-inline: auto; }

/* --- Optional flush -------------------------------------------------------
   If your theme's container already applies generous side padding, add
   `fmy--flush` to remove FORMery's own gutter and avoid doubling up. */
.fmy--flush.fmy--flush .shell { padding-inline: 0; }

/* --- No-JS safety ---------------------------------------------------------
   Everything that JavaScript reveals starts VISIBLE. The inline script adds
   [data-fmy-js] to the wrapper, and only then do the hidden/animated states
   apply. If a security plugin strips the script, the page is still complete,
   just without the animation. This is the single most important rule here. */
.fmy.fmy [data-reveal] { opacity: 1; transform: none; }
.fmy.fmy[data-fmy-js] [data-reveal] { opacity: 0; transform: translateY(22px); }
.fmy.fmy[data-fmy-js] [data-reveal].is-in { opacity: 1; transform: none; }

.fmy.fmy .draw-line { stroke-dashoffset: 0; }
.fmy.fmy[data-fmy-js] .draw-line { stroke-dashoffset: var(--len, 2000); }
.fmy.fmy[data-fmy-js] .draw-line.is-in { animation: draw 2.6s var(--ease-out) forwards; }

.fmy.fmy .acc__panel { height: auto; }
.fmy.fmy[data-fmy-js] .acc__panel { height: 0; }

.fmy.fmy .info__body { height: auto; }
.fmy.fmy[data-fmy-js] .info__body { height: 0; }

.fmy.fmy .tabs__panel[hidden] { display: block; }
.fmy.fmy[data-fmy-js] .tabs__panel[hidden] { display: none; }

.fmy.fmy .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
.fmy.fmy[data-fmy-js] .marquee__track { animation: slide var(--marquee-speed, 64s) linear infinite; flex-wrap: nowrap; width: max-content; }

@media (prefers-reduced-motion: reduce) {
  .fmy.fmy[data-fmy-js] [data-reveal] { opacity: 1; transform: none; }
  .fmy.fmy[data-fmy-js] .draw-line { stroke-dashoffset: 0; }
  .fmy.fmy[data-fmy-js] .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
}

/* ==== Frame for the Trafft booking block ================================
   Add the class `fmy-embed-frame` to a WordPress Group block, then put the
   Trafft block (or a Shortcode block containing [trafftbooking]) inside it.
   Shortcodes do NOT run inside a Custom HTML block, which is why the booking
   widget lives in its own block rather than in this snippet. */
.fmy-embed-frame {
  background: #F5F3EF;
  border: 1px solid rgba(31, 61, 43, 0.14);
  padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
.fmy-embed-frame iframe { display: block; width: 100%; border: 0; }

/* ==== Booking placeholder (plugin only) ================================= */
.fmy-embed-placeholder {
  padding: clamp(2rem, 1rem + 4vw, 4rem) 1.5rem;
  text-align: center;
  font-family: "Mulish", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4A5F52;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(198,169,107,0.09) 14px 28px);
  border: 1px dashed rgba(198, 169, 107, 0.55);
}
.fmy-embed-placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(31, 61, 43, 0.07); padding: 0.15em 0.45em;
}