/* ============================================================
   MYTHOLOGY FLORAL ART — Site Styles
   Palette: blush pink + eucalyptus green + soft plum ink
   Type: Cormorant (light display) + Mulish (body) + Cormorant italic (accent)
   ============================================================ */

:root{
  /* --- neutrals: minimal / black-luxury direction --- */
  --plum:#000000;          /* straight black - footer + dark bands */
  --ink:#292826;           /* body text - near-black */
  --ink-soft:#66645f;
  --blush:#ffffff;         /* page background - solid white */
  --paper:#f8f8f6;         /* lifted panels - soft grey tint */
  /* --- LIGHT GREY scheme (chosen Aug 14). The bands are LIGHT, so they carry
         DARK text and a solid black button - never white-on-colour. Anything
         small on white uses --rose-deep (near-black). The variable names are
         historical (they were the pink ramp); only the values have moved. --- */
  --rose:#c9c7c2;          /* light grey accent - footer headings, accents on black/photos */
  --rose-deep:#1c1917;     /* near-black - buttons, eyebrows, links, focus rings */
  --rose-band:#f2f2f0;     /* the light grey band (dark text on it) */
  --blush-soft:#eceae6;
  /* --- CITRON, Natalie's B6BF51 chip. Moss Walls page only. --- */
  --sage:#b6bf51;          /* citron - exact chip. Fills carry NEAR-BLACK text (8.8:1) */
  --sage-deep:#6a702e;     /* deep citron - only where small text sits on white (5.3:1) */
  --line:#e6e4e0;          /* neutral hairline */
  --muted:#706d68;
  --maxw:1240px;
  --pad:clamp(22px,5vw,80px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Mulish',-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:var(--blush);
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:'Cormorant',Georgia,serif;font-weight:400;line-height:1.1;letter-spacing:.005em;color:var(--ink)}
h1{font-size:clamp(2.5rem,5.6vw,4.7rem);font-weight:300}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem);font-weight:300}
h3{font-size:clamp(1.45rem,2.4vw,2.05rem)}
p{margin-bottom:1.1em}
.eyebrow{
  font-family:'Mulish',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--rose-deep);
  margin-bottom:.85rem;display:inline-block;
}
.script{font-family:'Cormorant',serif;font-style:italic;font-weight:500;font-style:normal;color:var(--rose-deep)}
.lead{font-size:1.14rem;font-weight:300;color:var(--ink-soft);max-width:62ch;line-height:1.6}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(38px,5.5vw,80px) 0}
.center{text-align:center}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:'Mulish',sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:1.05em 2.5em;
  border:1px solid var(--rose-deep);background:var(--rose-deep);color:#fff;
  transition:.45s var(--ease);cursor:pointer;border-radius:30px;
}
.btn:hover{background:transparent;color:var(--rose-deep)}
.btn--light{border-color:#fff;background:transparent;color:#fff}
.btn--light:hover{background:#fff;color:var(--rose-deep)}
/* citron fills carry near-black text (8.8:1); white on citron is 2:1 */
.btn--moss{background:var(--sage);border-color:var(--sage);color:#1c1917}
.btn--moss:hover{background:transparent;color:var(--sage-deep);border-color:var(--sage)}
.link-underline{
  font-family:'Mulish',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:.3s var(--ease);
}
.link-underline:hover{color:var(--rose-deep);letter-spacing:.24em}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);transition:.5s var(--ease);
}
.nav.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  padding:14px var(--pad);box-shadow:0 1px 0 var(--line)}
/* ============================================================
   WORDMARK — matched to Natalie's logo lockup.

   Sofia Pro (her logo face) is a commercial licence and no font files were
   supplied, so this uses JOST, measured against the logo artwork at its own
   size. Line 1 matches almost exactly:

                       cap   width   stroke/cap   width/cap
     her logo           31     391       0.129       12.61
     Jost 400 @.436em   31     390       0.129       12.58

   Line 2 is very slightly wider than hers (her FLORAL ART is a touch more
   condensed than Jost can go without negative tracking).

   Geometry taken from the logo:
     FLORAL ART cap height = 0.387 x MYTHOLOGY cap height
     gap between the two lines = 0.84 x MYTHOLOGY cap height
     both lines centred on the same axis, both uppercase, line 2 heavier
   The negative margin-right on each line cancels the trailing letter-space
   so the ink — not the ink-plus-tracking — is what gets centred.
   If Natalie ever supplies licensed Sofia Pro files, swap the font-family
   here and in .intro-word and delete nothing else.
   ============================================================ */
.brand{line-height:1;display:inline-block;text-align:center;--wm:1.22rem}
.brand b{font-family:'Jost',sans-serif;font-weight:400;font-size:var(--wm);
  letter-spacing:.436em;margin-right:-.436em;text-transform:uppercase;
  color:var(--ink);display:block;line-height:1}
.brand span{font-family:'Jost',sans-serif;font-weight:500;
  font-size:calc(var(--wm) * .62);letter-spacing:.085em;margin-right:-.085em;
  text-transform:uppercase;color:var(--ink);display:block;line-height:1;
  margin-top:calc(var(--wm) * .50)}
.nav.on-dark:not(.scrolled) .brand b,
.nav.on-dark:not(.scrolled) .brand span{color:#fff}

.nav-links{display:flex;align-items:center;gap:clamp(18px,2.5vw,38px);list-style:none}
.nav-links a:not(.btn){font-family:'Mulish',sans-serif;font-size:.74rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--rose-deep);transition:.35s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--rose-deep)}
/* The Inquire CTA is an <a class="btn"> inside .nav-links, so it was inheriting
   the underline sweep meant for the five text links. It already has its own
   background/colour hover - kill the underline on it only. */
.nav-links a.btn::after{content:none}
.nav.on-dark:not(.scrolled) .nav-links a:not(.btn){color:rgba(255,255,255,.94)}
.nav-cta{margin-left:6px}
.nav .btn{padding:.8em 1.7em;font-size:.68rem}
.nav.on-dark:not(.scrolled) .btn{border-color:#fff;background:transparent;color:#fff}
.nav.on-dark:not(.scrolled) .btn:hover{background:#fff;color:var(--rose-deep)}

/* ---- Inquire CTA on the light / scrolled nav ------------------------------
   Over the hero the button is a white outline on the photo. Once the nav turns
   white it becomes an OUTLINED WHITE pill with near-black text (14.8:1) rather
   than a solid near-black fill, which read as a blank pill because .nav-links a
   was overriding its text colour. Moss Walls is excluded - its citron fill
   already carries near-black text at 8.8:1. ------------------------------- */
.nav:not(.on-dark) .nav-cta .btn,
.nav.scrolled .nav-cta .btn{background:#fff;border-color:var(--rose-deep);color:var(--rose-deep)}
.nav:not(.on-dark) .nav-cta .btn:hover,
.nav.scrolled .nav-cta .btn:hover{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.theme-green .nav:not(.on-dark) .nav-cta .btn,
.theme-green .nav.scrolled .nav-cta .btn{background:var(--sage);border-color:var(--sage);color:#1c1917}
.theme-green .nav:not(.on-dark) .nav-cta .btn:hover,
.theme-green .nav.scrolled .nav-cta .btn:hover{background:transparent;border-color:var(--sage);color:var(--sage-deep)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:1.5px;background:var(--ink);transition:.3s}
.nav.on-dark:not(.scrolled) .burger span{background:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden}
.hero--page{min-height:100vh}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,35,35,.28) 0%,rgba(35,35,35,.16) 45%,rgba(35,35,35,.72) 100%)}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(60px,10vw,120px);max-width:920px}
.hero h1{color:#fff;margin-bottom:.25em}
.hero .lead{color:rgba(255,255,255,.92);margin-bottom:2rem}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue i{width:1px;height:42px;background:rgba(255,255,255,.6);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}
  60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   IMAGE PLACEHOLDERS  (.photo = real image attached)
   ============================================================ */
.ph{position:relative;overflow:hidden;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.ph::before{content:"";position:absolute;inset:0;opacity:.92;z-index:0}
.ph--floral::before{background:linear-gradient(135deg,#eeeeec 0%,#cfcfcc 55%,#a9a9a5 100%)}
.ph--blush::before{background:linear-gradient(135deg,#ececea 0%,#cdcdca 100%)}
.ph--rose::before{background:linear-gradient(135deg,#d6d6d2 0%,#a9a9a5 100%)}
.ph--moss::before{background:linear-gradient(135deg,#cdd68f 0%,#a5ad48 60%,#7e8636 100%)}
.ph--sage::before{background:linear-gradient(135deg,#dfe4c4 0%,#b6bf51 100%)}
.ph--dark::before{background:linear-gradient(135deg,#1e1916 0%,#3b332c 100%)}
.ph--portrait::before{background:linear-gradient(150deg,#dcdcda 0%,#8a8a86 100%)}
.ph-label{position:relative;z-index:1;font-family:'Mulish',sans-serif;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:10px 16px;line-height:1.5;
  background:rgba(35,35,35,.28);backdrop-filter:blur(2px);max-width:85%;
  border:1px solid rgba(255,255,255,.4)}
.ph-label b{display:block;font-size:.9rem;letter-spacing:.08em;margin-top:2px;font-weight:400}
/* real image attached: hide gradient + label */
.ph.photo::before{opacity:0}
.ph.photo .ph-label{display:none}

/* hero placeholder fills */
.hero .ph{position:absolute;inset:0}
.hero .ph-label{position:absolute;bottom:20px;right:20px;background:rgba(35,35,35,.4)}

/* ============================================================
   COMPONENTS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.split--reverse .split-media{order:2}
.split-media .ph{aspect-ratio:4/5;border-radius:4px}

.paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,30px)}
.path{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;display:flex;
  align-items:flex-end;color:#fff;isolation:isolate}
.path .ph{position:absolute;inset:0;z-index:-1}
.path-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(35,35,35,.74));z-index:-1}
.path-body{padding:clamp(24px,3vw,42px)}
.path-body h3{color:#fff;font-size:clamp(1.8rem,2.6vw,2.5rem)}
.path-body p{color:rgba(255,255,255,.88);margin:.5em 0 1.2em;font-size:.97rem;font-weight:300}
.path .ph{transition:1.2s var(--ease)}
.path:hover .ph{transform:scale(1.04)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px)}
.gallery .ph{aspect-ratio:1;border-radius:3px}
.gallery{grid-auto-flow:dense}
.gallery .feat{grid-column:span 2;grid-row:span 2;aspect-ratio:1}
.gallery .tall{grid-row:span 2;aspect-ratio:1/2}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery .ph{transition:.9s var(--ease)}
.gallery .ph:hover{transform:scale(1.03)}

.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px)}
.svc-item .num{font-family:'Cormorant',serif;font-size:1.15rem;color:var(--muted);
  letter-spacing:.1em;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;display:block}
.svc-item h3{margin-bottom:.4em}
.svc-item p{font-size:.96rem;color:var(--ink-soft)}

.press{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:38px 0;display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,70px);
  align-items:center;justify-content:center}
.press .label{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:600}
.press .name{font-family:'Cormorant',serif;font-size:1.55rem;color:var(--ink-soft);
  font-style:italic;opacity:.85}

.clients-line{font-family:'Cormorant',serif;font-size:clamp(1.25rem,2vw,1.75rem);
  text-align:center;color:var(--ink-soft);line-height:2;max-width:980px;margin:0 auto}
.clients-line span{white-space:nowrap}
.clients-line .dot{color:var(--muted);padding:0 .5em}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,44px)}
.quote p{font-family:'Cormorant',serif;font-size:1.4rem;font-style:italic;
  line-height:1.5;color:var(--ink);margin-bottom:.8em;font-weight:400}
.quote cite{font-family:'Mulish',sans-serif;font-style:normal;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose-deep);font-weight:600}
.quote::before{content:"\201C";font-family:'Cormorant',serif;font-size:4rem;
  color:var(--rose);line-height:.6;display:block;margin-bottom:.1em}

.bigquote{text-align:center}
.bigquote p{font-family:'Cormorant',serif;font-style:italic;
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.4;color:var(--ink);font-weight:400}
.bigquote cite{display:block;margin-top:1.2rem;font-family:'Mulish',sans-serif;font-style:normal;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-deep);font-weight:600}

.sec-head{margin-bottom:clamp(18px,3vw,36px)}
.sec-head.center{margin-left:auto;margin-right:auto;max-width:720px}

.bg-paper{background:var(--paper)}
/* .bg-ink = solid black band. Currently UNUSED - the home page's preferred-vendor band
   was moved to .bg-rose (mocha) at Greyson's request Aug 13; black is now footers only.
   Kept here so a black band can be dropped back in without rebuilding it. */
.bg-ink{background:var(--plum);color:#f0f0ee}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink .eyebrow{color:var(--rose)}
/* the moss page's two big bands are the SAME light grey as the rest of the site */
.bg-moss{background:var(--rose-band);color:#3a3734}
.bg-moss h1,.bg-moss h2,.bg-moss h3{color:#1c1917}
.bg-moss .eyebrow{color:#6b6863}
.bg-moss p{color:#5a5652}
.bg-moss.cta-band p{color:#5a5652}
.bg-moss .btn--light{background:var(--sage);border-color:var(--sage);color:#1c1917}
.bg-moss .btn--light:hover{background:transparent;border-color:var(--sage);color:#1c1917}
.bg-moss .link-underline{color:var(--sage-deep)}
/* ---- LIGHT GREY band ------------------------------------------------------
   #f2f2f0 is LIGHT, so this band carries DARK text and a solid black button -
   white-on-grey would be 1.2:1. Used by the home page's preferred-vendor band
   and every "Let's begin" / "Love what you see" CTA band.
   Contrast on the band: headings 15.6:1, body 10.6:1, paragraph 6.5:1,
   eyebrow 4.95:1, black button 21:1. -------------------------------------- */
.bg-rose{background:var(--rose-band);color:#3a3734}
.bg-rose h1,.bg-rose h2,.bg-rose h3{color:#1c1917}
.bg-rose .eyebrow{color:#6b6863}
.bg-rose .venues,.bg-rose .clients-line{color:#1c1917}
.bg-rose .venues .dot,.bg-rose .clients-line .dot{color:rgba(58,55,52,.45)}
/* the light-on-dark button and link treatments invert on this band */
.bg-rose .btn--light{background:#000;border-color:#000;color:#fff}
.bg-rose .btn--light:hover{background:transparent;border-color:#1c1917;color:#1c1917}
.bg-rose .link-underline{color:#1c1917}
.bg-rose .link-underline:hover{color:#000}
.bg-rose.cta-band p{color:#5a5652}

.cta-band{text-align:center}
.cta-band h2{margin-bottom:.4em;max-width:16ch;margin-left:auto;margin-right:auto}
.cta-band p{color:rgba(255,255,255,.85);margin-bottom:2rem}

.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;padding:15px 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;font-family:'Cormorant',serif;font-size:1.4rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Mulish',sans-serif;font-size:1.5rem;color:var(--rose-deep);transition:.3s;font-weight:300}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 15px;color:var(--ink-soft);font-size:1rem;max-width:70ch}

/* ============================================================
   CONTACT / FORM
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,80px)}
.form-field{margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;font-weight:600}
input,select,textarea{width:100%;font-family:'Mulish',sans-serif;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:14px 16px;border-radius:4px;
  transition:.3s var(--ease);font-weight:300}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rose-deep);
  box-shadow:0 0 0 3px rgba(212,154,160,.18)}
textarea{resize:vertical;min-height:130px}
.contact-aside .row{padding:20px 0;border-bottom:1px solid var(--line)}
.contact-aside .row:first-child{padding-top:0}
.contact-aside .k{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
.contact-aside .v{font-family:'Cormorant',serif;font-size:1.5rem}
.contact-aside .v a:hover{color:var(--rose-deep)}
.form-note{font-size:.82rem;color:var(--muted);margin-top:6px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--plum);color:rgba(238,238,236,.82);padding:clamp(56px,8vw,96px) 0 34px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.13)}
.footer .brand b,.footer .brand span{color:#fff}
.footer .brand{--wm:1.34rem}
.footer h3{font-family:'Mulish',sans-serif;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rose);margin-bottom:18px;font-weight:600}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:.92rem;color:rgba(238,238,236,.8);font-weight:300}
.footer-links a:hover{color:#fff}
.footer-tagline{font-family:'Cormorant',serif;font-style:italic;font-weight:500;font-size:1.75rem;
  color:#fff;margin:14px 0;max-width:30ch;line-height:1.3}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 22px;
  padding-top:26px;font-size:.74rem;letter-spacing:.04em;color:rgba(238,238,236,.55)}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(238,238,236,.28);transition:.3s var(--ease)}
.footer-bottom a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.7)}
/* three items on one row: copyright | Privacy Policy | region.
   On phones the row wraps to a centred stack rather than a ragged 2+1. */
@media(max-width:640px){
  .footer-bottom{justify-content:center;text-align:center;gap:8px 18px}
}

/* ============================================================
   LEGAL PAGES  (privacy policy)
   ============================================================ */
.legal-date{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--muted);margin-top:1rem}
.legal{max-width:760px}
.legal .lead{max-width:none;margin-bottom:2.4rem;padding-bottom:2.2rem;border-bottom:1px solid var(--line)}
.legal h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-top:2.6rem;margin-bottom:.85rem}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:clamp(1.02rem,1.6vw,1.15rem);font-family:'Mulish',sans-serif;font-weight:600;
  letter-spacing:.02em;margin-top:1.7rem;margin-bottom:.55rem}
.legal p{font-size:1rem;line-height:1.8;color:var(--ink-soft)}
.legal a{color:var(--rose-deep);border-bottom:1px solid var(--blush-soft);transition:.3s var(--ease)}
.legal a:hover{border-bottom-color:var(--rose-deep)}
.legal b{color:var(--ink);font-weight:600}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1px 6px}
.legal ul{list-style:none;margin:0 0 1.1em}
.legal ul li{position:relative;padding-left:22px;margin-bottom:.55em;
  font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.legal ul li::before{content:"";position:absolute;left:2px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--muted)}
.legal ul.legal-contact{margin:1.2rem 0 0;display:grid;gap:10px}
.legal ul.legal-contact li{padding-left:0;display:flex;gap:14px;align-items:baseline}
.legal ul.legal-contact li::before{content:none}
.legal ul.legal-contact b{min-width:64px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:.9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  .scroll-cue i{animation:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .split,.contact-grid{grid-template-columns:1fr}
  .split--reverse .split-media{order:0}
  .svc{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .gallery .tall{grid-row:span 1;aspect-ratio:1}
  .gallery .feat{grid-column:span 1;grid-row:span 1}
}
@media(max-width:720px){
  body{font-size:16px}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(80vw,330px);background:var(--blush);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
    padding:60px 34px;transform:translateX(100%);transition:.5s var(--ease);
    box-shadow:-20px 0 60px rgba(24,24,24,.2)}
  .nav-links.open{transform:none}
  /* ---- the slide-out panel is WHITE, so everything inside it must be dark ----
     Two things were invisible here. (1) The base rule
     `.nav.on-dark:not(.scrolled) .nav-links a:not(.btn){color:rgba(255,255,255,.94)}`
     is (0,5,1) and was out-specifying the old mobile rule (0,4,1), so the links
     stayed white on the white panel. (2) The Inquire CTA fell through to the
     over-photo treatment (transparent + white border + white text) because the
     nav still carries .on-dark while the panel is open. Both are pinned below. */
  /* 44px minimum touch target - the links were 24px tall. Padding does the work
     so the panel keeps the same overall height (gap dropped 26px -> 6px). */
  .nav-links li{width:100%}
  .nav-links a:not(.btn){display:inline-block;padding:10px 6px;margin-left:-6px}
  .nav-links a:not(.btn),
  .nav .nav-links a:not(.btn),
  .nav.on-dark:not(.scrolled) .nav-links a:not(.btn),
  .nav.scrolled .nav-links a:not(.btn){color:var(--ink)!important;font-size:.9rem}
  .nav-links a.active,
  .nav.on-dark:not(.scrolled) .nav-links a.active{color:var(--rose-deep)!important}
  .theme-green .nav-links a.active,
  .theme-green .nav.on-dark:not(.scrolled) .nav-links a.active{color:var(--sage-deep)!important}
  .nav-links a::after{background:var(--rose-deep)!important}
  .theme-green .nav-links a::after{background:var(--sage-deep)!important}
  /* Inquire: a solid filled pill inside the panel, never an outline */
  .nav .nav-cta .btn,
  .nav.on-dark:not(.scrolled) .nav-cta .btn,
  .nav.scrolled .nav-cta .btn,
  .nav:not(.on-dark) .nav-cta .btn{background:var(--rose-deep)!important;border-color:var(--rose-deep)!important;color:#fff!important}
  .theme-green .nav .nav-cta .btn,
  .theme-green .nav.on-dark:not(.scrolled) .nav-cta .btn,
  .theme-green .nav.scrolled .nav-cta .btn{background:var(--sage)!important;border-color:var(--sage)!important;color:#1c1917!important}
  .nav-cta{margin-left:0;margin-top:14px}
  .nav-links .nav-cta .btn{padding:1.05em 2.4em}
  .burger{display:flex;z-index:101}
  .paths,.gallery,.gallery--2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{text-align:center}
}

/* ============================================================
   INTRO  (logo / wordmark only - the rose bloom was removed at
   Natalie's request, Aug 2026. Minimal, ~1.1s total.)

   TO DROP IN HER REAL LOGO FILE LATER:
   in each page, replace the <div class="intro-word">...</div> with
     <img class="intro-logo" src="images/logo.svg" alt="Mythology Floral Art">
   .intro-logo is already styled below - nothing else needs to change.
   ============================================================ */
.intro-veil{position:fixed;inset:0;z-index:9999;background:var(--blush);
  display:flex;align-items:center;justify-content:center;
  animation:veilOut .45s ease .95s forwards;}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:14px;}
.intro-logo{width:min(260px,58vw);height:auto;opacity:0;
  animation:wordUp .55s cubic-bezier(.2,.7,.2,1) .06s both;}
/* the opening animation uses the same lockup as the header and footer */
.intro-word{text-align:center;opacity:0;animation:wordUp .55s cubic-bezier(.2,.7,.2,1) .06s both;
  --wm:clamp(1.5rem,5.2vw,2.15rem)}
.intro-word .im{display:block;font-family:'Jost',sans-serif;font-weight:400;
  font-size:var(--wm);letter-spacing:.436em;margin-right:-.436em;
  text-transform:uppercase;color:var(--ink);line-height:1}
.intro-word .is{display:block;font-family:'Jost',sans-serif;font-weight:500;
  font-size:calc(var(--wm) * .62);letter-spacing:.085em;margin-right:-.085em;
  text-transform:uppercase;color:var(--ink);line-height:1;
  margin-top:calc(var(--wm) * .50)}
/* hairline drawing out under the wordmark - replaces the bloom as the motion beat */
.intro-rule{height:1px;background:var(--rose-deep);width:0;
  animation:ruleOut .5s cubic-bezier(.22,.61,.36,1) .3s both;}
@keyframes ruleOut{0%{width:0;opacity:0}100%{width:clamp(120px,32vw,200px);opacity:.9}}
@keyframes wordUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes veilOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .intro-veil{animation:veilOut .3s ease .05s forwards}
  .intro-word,.intro-logo{opacity:1;animation:none}
  .intro-rule{width:clamp(120px,32vw,200px);opacity:.9;animation:none}}

/* client names legible on the dark "In good company" band */
.bg-ink .clients-line{color:#eeeeec}
.bg-ink .clients-line .dot{color:var(--rose)}


/* ============================================================
   GREEN PAGE THEME  (moss-walls only) — footer stays pink
   ============================================================ */
/* Citron #b6bf51 is used EXACTLY as supplied wherever it is a fill or sits on a
   dark surface. It measures 1.99:1 as text on white, so the two places a visitor
   reads it against white - the scrolled nav and the button hover state - fall back
   to --sage-deep. Everything else is the literal chip. */
.theme-green .eyebrow{color:var(--sage)}
.theme-green .btn:not(.btn--light):not(.btn--moss){background:var(--sage);border-color:var(--sage);color:#1c1917}
.theme-green .btn:not(.btn--light):not(.btn--moss):hover{background:transparent;color:var(--sage-deep);border-color:var(--sage)}
.theme-green .link-underline:hover{color:var(--sage-deep)}
.theme-green .nav-links a::after{background:var(--sage)}
.theme-green .nav.on-dark:not(.scrolled) .btn:hover{background:#fff;color:var(--sage-deep)}
.theme-green .svc-item .num{color:var(--sage)}
.theme-green .faq summary::after{color:var(--sage)}
/* over the dark hero: the literal chip */
.theme-green .nav.on-dark:not(.scrolled) .brand b,
.theme-green .nav.on-dark:not(.scrolled) .brand span{color:#fff}
.theme-green .nav.on-dark:not(.scrolled) .nav-links a.active{color:var(--sage)}
/* scrolled nav is white - citron would be 1.99:1 there, so use the deep tone */
.theme-green .nav.scrolled .nav-links a.active,
.theme-green .nav:not(.on-dark) .nav-links a.active{color:var(--sage-deep)}
.theme-green .nav.scrolled .brand b,.theme-green .nav.scrolled .brand span,
.theme-green .nav:not(.on-dark) .brand b,.theme-green .nav:not(.on-dark) .brand span{color:var(--ink)}
.theme-green .intro-word .im,.theme-green .intro-word .is{color:var(--ink)}
.theme-green .intro-rule{background:var(--sage)}

/* Weddings hero: shaped scrim keeps text crisp without dulling the photo */
.hero--wed .hero-bg::after{background:linear-gradient(180deg,
  rgba(13,13,13,.14) 0%, rgba(13,13,13,.03) 26%,
  rgba(13,13,13,.15) 55%, rgba(13,13,13,.32) 72%, rgba(13,13,13,.52) 88%, rgba(13,13,13,.64) 100%);}
.hero--wed h1,.hero--wed .lead,.hero--wed .eyebrow{
  text-shadow:0 1px 2px rgba(6,6,6,.72), 0 2px 7px rgba(6,6,6,.62),
              0 4px 20px rgba(6,6,6,.58), 0 0 38px rgba(6,6,6,.5)}
.hero--wed .lead{font-weight:400;color:#fff;
  text-shadow:0 1px 2px rgba(6,6,6,.82), 0 1px 5px rgba(6,6,6,.72),
              0 2px 12px rgba(6,6,6,.62), 0 0 26px rgba(6,6,6,.5)}

/* Home hero: text pinned to top, floral lower-half kept clear on all sizes */
.hero--top{align-items:flex-start}
.hero--top .hero-inner{padding-top:clamp(120px,17vh,190px);padding-bottom:0}
.hero--top .ph{background-position:center 62%}
.hero--top .hero-bg::after{background:linear-gradient(180deg,
  rgba(18,18,18,.62) 0%, rgba(18,18,18,.46) 20%, rgba(18,18,18,.30) 40%,
  rgba(18,18,18,.12) 52%, rgba(18,18,18,0) 62%, rgba(18,18,18,0) 100%);}
.hero--top h1,.hero--top .lead,.hero--top .eyebrow{text-shadow:0 2px 20px rgba(13,13,13,.5)}
.hero--top .hero-actions .btn,.hero--top .hero-actions .link-underline{box-shadow:0 3px 16px rgba(13,13,13,.28)}
.hero--top .hero-actions .link-underline{text-shadow:0 2px 14px rgba(13,13,13,.5)}

/* Home hero: writing on a solid band (fully legible) + photo banner below */
.hero-intro{padding-top:clamp(104px,14vh,160px);text-align:center;background:var(--blush)}
.hero-intro-text{max-width:900px;margin:0 auto;padding:0 var(--pad) clamp(30px,5vh,56px)}
.hero-intro .eyebrow{color:var(--rose-deep)}
.hero-intro h1{font-size:clamp(2.6rem,6vw,5rem)}
.hero-intro .lead{margin:1.2rem auto 1.9rem}
.hero-intro .hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center}
.hero-banner{width:100%;overflow:hidden}
.hero-banner img{width:100%;height:58vh;min-height:360px;max-height:640px;object-fit:cover;object-position:center 58%;display:block}

/* Moss hero: same seamless recipe as the other two heroes, green-tinted.
   Full-bleed layers only. See the note at the hero scrim block below. */
.hero--moss .hero-bg::after{background:linear-gradient(180deg,
  rgba(19,20,10,.14) 0%,  rgba(19,20,10,.07) 12%, rgba(19,20,10,.03) 24%,
  rgba(19,20,10,.03) 36%, rgba(19,20,10,.08) 46%, rgba(19,20,10,.15) 55%,
  rgba(19,20,10,.23) 64%, rgba(19,20,10,.32) 72%, rgba(19,20,10,.42) 80%,
  rgba(19,20,10,.52) 88%, rgba(19,20,10,.60) 95%, rgba(19,20,10,.64) 100%);}
.hero--moss .hero-bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 55% 44% at 30% 44%,
    rgba(15,16,8,.60) 0%,  rgba(15,16,8,.50) 22%, rgba(15,16,8,.38) 38%,
    rgba(15,16,8,.24) 54%, rgba(15,16,8,.11) 70%, rgba(15,16,8,.03) 82%,
    rgba(15,16,8,0)   92%);
}
.hero--moss h1,.hero--moss .lead,.hero--moss .eyebrow{
  text-shadow:0 1px 2px rgba(9,10,5,.74), 0 2px 7px rgba(9,10,5,.64),
              0 4px 20px rgba(9,10,5,.58), 0 0 38px rgba(9,10,5,.5)}
.hero--moss .lead{font-weight:400;color:#fff;
  text-shadow:0 1px 2px rgba(9,10,5,.82), 0 1px 5px rgba(9,10,5,.72),
              0 2px 12px rgba(9,10,5,.62), 0 0 26px rgba(9,10,5,.5)}

/* Moss page ONLY: green footer to match the page scheme */
.theme-green .footer{background:var(--plum)}  /* black footer on every page */
.theme-green .footer h3{color:var(--sage)}
.theme-green .footer .brand b,.theme-green .footer .brand span{color:#fff}

/* About: full portrait, centered beside the story, never cropped */
.bio-photo{width:100%;height:100%;min-height:420px;object-fit:cover;object-position:50% 35%;border-radius:5px;display:block}


/* ============================================================
   MOBILE NAV FIX — keep the top bar + menu icon consistently
   visible in every scroll state, on every page
   ============================================================ */
@media(max-width:720px){
  .nav,.nav.on-dark:not(.scrolled),.nav.scrolled{
    background:#ffffff!important;
    backdrop-filter:none!important;
    box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
    padding-top:13px!important;padding-bottom:13px!important;
  }
  .nav .brand b,.nav .brand span,
  .nav.on-dark:not(.scrolled) .brand b,.nav.on-dark:not(.scrolled) .brand span{color:var(--ink)!important}
  .theme-green .nav .brand b,.theme-green .nav .brand span,
  .theme-green .nav.on-dark:not(.scrolled) .brand b,.theme-green .nav.on-dark:not(.scrolled) .brand span{color:var(--ink)!important}
  .nav .burger span,.nav.on-dark:not(.scrolled) .burger span{background:var(--ink)!important}
}

/* (removed: .hero:not(.hero--page) block — every hero now carries .hero--page,
   so it matched nothing and duplicated the .hero--wed rules) */

/* ============================================================
   GALLERY  — filters, masonry grid, lightbox
   ============================================================ */
.gal-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:clamp(26px,4vw,44px) 0 clamp(24px,3.5vw,38px)}
.gal-chip{font-family:'Mulish',sans-serif;font-size:.74rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:9px 17px;cursor:pointer;
  transition:.35s var(--ease);line-height:1;white-space:nowrap}
.gal-chip span{opacity:.5;font-size:.68rem;margin-left:5px;letter-spacing:.04em}
.gal-chip:hover{border-color:var(--rose-deep);color:var(--rose-deep)}
.gal-chip.is-on{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.gal-chip.is-on span{opacity:.65}

/* masonry via CSS columns — keeps every photo at its true aspect ratio */
.gal{column-count:3;column-gap:clamp(10px,1.5vw,18px)}
.gal-item{position:relative;break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 clamp(10px,1.5vw,18px);border-radius:3px;overflow:hidden;cursor:zoom-in;
  background:var(--blush-soft);display:block}
.gal-item img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.gal-item:hover img{transform:scale(1.035)}
.gal-item.is-hidden{display:none}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(35,35,35,.72));
  opacity:0;transition:.4s var(--ease);pointer-events:none}
.gal-item:hover .gal-cap,.gal-item:focus-within .gal-cap{opacity:1}
.gal-cap b{display:block;font-family:'Cormorant',serif;font-size:1.12rem;font-weight:400;line-height:1.2}
.gal-cap span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85;font-weight:500}
.gal-cap em{display:block;font-style:normal;font-size:.66rem;letter-spacing:.1em;
  opacity:.92;font-weight:500;margin:2px 0 3px;line-height:1.3}
.gal-empty{text-align:center;color:var(--muted);padding:40px 0}
.gal-note{margin-top:clamp(24px,4vw,42px);color:var(--muted);font-size:.9rem;letter-spacing:.04em}

@media(max-width:900px){ .gal{column-count:2} }
@media(max-width:520px){
  .gal{column-count:2;column-gap:8px}
  .gal-item{margin-bottom:8px;border-radius:2px}
  .gal-cap{display:none}
  .gal-filters{gap:6px;margin-top:22px}
  .gal-chip{font-size:.66rem;padding:8px 13px;letter-spacing:.09em}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(24,20,17,.965);
  display:flex;flex-direction:column;opacity:0;transition:opacity .3s var(--ease)}
.lb.is-open{opacity:1}
.lb[hidden]{display:none}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(50px,7vh,74px) clamp(12px,6vw,86px) 8px;min-height:0;
  touch-action:pan-y pinch-zoom}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:2px;opacity:0;transition:opacity .28s var(--ease);
  box-shadow:0 22px 60px rgba(0,0,0,.45);-webkit-user-select:none;user-select:none}
.lb-img.is-ready{opacity:1}
.lb-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:14px clamp(16px,6vw,40px) clamp(18px,3vh,30px);color:#fff}
.lb-event{display:block;font-family:'Cormorant',serif;font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:400;line-height:1.15}
.lb-credit{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-top:5px}
/* script.js sets elCredit.hidden=true when data-photog is empty (all 28 moss
   photos). The `hidden` attribute only sets display:none from the UA stylesheet,
   which the author `display:block` above beat - so "PHOTOGRAPHY BY" was rendering
   with an empty link. This restores it. When Natalie supplies moss credits, just
   fill data-photog and the line reappears on its own - no code change needed. */
.lb-credit[hidden]{display:none}
.lb-photog{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;
  transition:.3s var(--ease)}
.lb-photog:hover{color:var(--rose);border-color:var(--rose)}
.lb-venue{display:block;font-size:.76rem;letter-spacing:.1em;color:rgba(255,255,255,.82);
  margin:4px 0 5px;line-height:1.35}
.lb-venue[hidden]{display:none}
.lb-meta{min-width:0;flex:1}
.lb-count{flex:0 0 auto;font-size:.72rem;letter-spacing:.16em;color:rgba(255,255,255,.5);
  white-space:nowrap;padding-bottom:3px}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.09);border:0;color:#fff;
  cursor:pointer;border-radius:50%;transition:.3s var(--ease);
  display:flex;align-items:center;justify-content:center;line-height:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close{top:clamp(12px,2.5vh,22px);right:clamp(12px,3vw,26px);
  width:44px;height:44px;font-size:1.8rem;z-index:2}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.1rem;z-index:2}
.lb-prev{left:clamp(8px,2vw,26px)}
.lb-next{right:clamp(8px,2vw,26px)}
@media(max-width:700px){
  .lb-nav{display:none}                 /* swipe instead */
  .lb-bar{flex-direction:column;align-items:flex-start;gap:5px}
  .lb-meta{width:100%;flex:none}
  .lb-count{position:absolute;top:clamp(12px,2.5vh,22px);left:clamp(14px,4vw,26px);
    margin:0;align-self:auto;z-index:2;line-height:44px}
  .lb-credit{letter-spacing:.11em;overflow-wrap:anywhere}
  .lb-stage{padding:56px 8px 4px}
}
@media(hover:none){ .gal-item:hover img{transform:none} }
body.lb-lock{overflow:hidden}

/* ---------- photo tiles that link into the gallery ---------- */
.gallery a.ph{display:block;text-decoration:none}
.tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 16px 14px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(35,35,35,.78));
  opacity:0;transform:translateY(6px);transition:.45s var(--ease);text-align:left}
.gallery a.ph:hover .tile-cap,.gallery a.ph:focus-visible .tile-cap{opacity:1;transform:none}
.tile-cap b{display:block;font-family:'Cormorant',serif;font-size:1.18rem;font-weight:400;line-height:1.2}
.tile-cap em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.09em;
  opacity:.94;font-weight:500;margin:3px 0 4px;line-height:1.3}
.tile-cap i{display:block;font-style:normal;font-size:.63rem;letter-spacing:.17em;
  text-transform:uppercase;opacity:.82;margin-top:3px;font-weight:500}
.gallery a.ph:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px}
@media(hover:none){ .tile-cap{opacity:1;transform:none;padding-top:30px} }
.sec-link{margin-top:clamp(22px,3.5vw,38px)}

/* ============================================================
   TRUST BAR  — static press row + animated client marquee
   LOGO-READY: swap any .tb-item text for
   <img class="tb-logo" src="images/logos/name.svg" alt="Name">
   ============================================================ */
.trust{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(26px,3.6vw,42px) 0}
.trust-label{font-family:'Mulish',sans-serif;font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rose-deep);font-weight:600;text-align:center;
  margin:0 0 clamp(12px,1.6vw,18px)}

/* --- static press row --- */
.trust-press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(20px,4vw,60px);padding:0 var(--pad)}
.tb-break{display:none}
.trust-press .name{font-family:'Cormorant',serif;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.55rem);color:var(--ink-soft);opacity:.9}

.trust-rule{height:1px;background:var(--line);margin:clamp(20px,3vw,30px) auto 0;
  max-width:calc(var(--maxw) - var(--pad) * 2)}

/* --- animated client marquee --- */
.marquee{display:flex;overflow:hidden;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;flex-shrink:0;align-items:center;gap:clamp(22px,3vw,40px);
  padding-right:clamp(22px,3vw,40px);white-space:nowrap;will-change:transform;
  animation:tb-scroll 46s linear infinite}
@keyframes tb-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.tb-item{font-family:'Mulish',sans-serif;font-size:.74rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.tb-logo{height:clamp(22px,2.4vw,30px);width:auto;opacity:.55;
  filter:grayscale(1);transition:.4s var(--ease)}
.marquee:hover .tb-logo{opacity:.8;filter:grayscale(.3)}
.tb-sep{color:var(--muted);font-size:.5rem;line-height:1}
.trust-vendor{font-family:'Mulish',sans-serif;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);text-align:center;font-weight:500;
  margin:clamp(20px,3vw,30px) auto 0;padding:0 var(--pad);max-width:900px}
@media(max-width:520px){
  .trust-press{gap:14px 22px}
  .trust-press .name{font-size:1.05rem}
  .marquee-track{animation-duration:34s}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* --- trust bar sitting inside the hero photo --- */
.hero--trust .hero-inner{padding-bottom:clamp(150px,20vh,250px)}
/* No border-top. A 1px white hairline here reads as a hard line drawn straight
   across the photograph, which is exactly what Natalie flagged. The band earns
   its separation from a long eased ramp instead, starting at zero so there is
   no step where it meets the hero scrim above it. */
.trust--hero{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:linear-gradient(180deg,rgba(13,13,13,0) 0%,rgba(13,13,13,.05) 20%,
    rgba(13,13,13,.13) 40%,rgba(13,13,13,.23) 62%,rgba(13,13,13,.33) 82%,rgba(13,13,13,.40) 100%);
  border-top:0;border-bottom:0;
  padding:clamp(14px,2vw,22px) 0 clamp(16px,2.2vw,24px)}
.trust--hero .trust-label{color:rgba(255,255,255,.72);margin-bottom:clamp(8px,1.2vw,13px)}
.trust--hero .trust-press{gap:clamp(14px,3vw,44px)}
.trust--hero .trust-press .name{color:#fff;opacity:.95;font-size:clamp(1rem,1.7vw,1.35rem);
  text-shadow:0 2px 14px rgba(9,9,9,.6)}
.trust--hero .trust-rule{background:rgba(255,255,255,.18);margin:clamp(12px,1.6vw,18px) auto 0;
  max-width:min(720px,80%)}
.trust--hero .marquee{padding-top:clamp(11px,1.5vw,16px)}
.trust--hero .tb-item{color:rgba(255,255,255,.78)}
.trust--hero .tb-sep{color:var(--rose)}
.trust--hero .tb-logo{opacity:.72;filter:grayscale(1) brightness(0) invert(1)}
.trust--hero:hover .tb-logo{opacity:.95}
@media(max-width:720px){
  .hero--trust .hero-inner{padding-bottom:clamp(168px,26vh,230px)}
  .trust--hero .trust-press{gap:8px 18px}
  .trust--hero .trust-press .name{font-size:.98rem}
  .trust--hero .tb-item{font-size:.66rem;letter-spacing:.15em}
}
/* Phones: 3 stacked rows --
     row 1   AS SEEN IN            (label spans both columns)
     row 2   Today's Bride | Hitched
     row 3   Hey Wedding Lady | blogTO
   The old rule .name:nth-of-type(n+4){display:none} deleted TWO names, not one:
   .trust-label is itself the first <span> in this container, so nth-of-type
   counted it and n+4 matched both blogTO and Hey Wedding Lady.
   The 2+2 split comes from the two-column grid flowing in HTML order, so the
   .tb-break span is redundant here and stays display:none. Desktop is untouched
   and still renders all four names on one line.
   Order comes from the HTML, not CSS `order`, so it stays predictable. */
@media(max-width:560px){
  /* GRID with two equal tracks. Grid shares column tracks across rows, which is
     exactly what we want here: the four names line up in two true columns
     instead of each row centring independently on its own width. Because the
     tracks are equal (1fr each), the block is symmetric about its own centre,
     so the label, the block and both rows all share one axis. No transform. */
  .trust--hero .trust-press{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;align-items:baseline;
    /* .trust-press carries `padding:0 var(--pad)` - zero it so nothing shifts. */
    padding-inline:0;
    /* the one dial for how far apart the columns sit. Wider = more spread. */
    width:232px;max-width:92vw;
    margin-inline:auto;row-gap:7px;column-gap:0}
  .trust--hero .trust-label{
    grid-column:1 / -1;margin:0 0 5px;
    /* letter-spacing:.3em is added AFTER the final "n" too, so the visible
       glyphs sit ~1.5px left of the box centre. Half an em of margin-left on a
       centred item shifts the box right by half that - cancelling it exactly. */
    margin-left:.3em}
  /* not needed in grid - the 2-column flow gives the 2+2 split on its own */
  .trust--hero .tb-break{display:none}
  /* never let a name break across two lines inside its track */
  .trust--hero .trust-press .name{font-size:.95rem;white-space:nowrap}
  /* two rows now instead of one - give the hero copy a little more clearance */
  .hero--trust .hero-inner{padding-bottom:clamp(186px,29vh,250px)}
}
@media(max-width:340px){
  /* smaller type, so the columns can close up and stay centred on the same axis */
  .trust--hero .trust-press{width:212px;max-width:92vw;column-gap:0;row-gap:5px}
  .trust--hero .trust-press .name{font-size:.86rem}
}
.venues{font-family:'Cormorant',serif;font-size:clamp(1.35rem,2.4vw,2rem);
  text-align:center;color:var(--ink);line-height:1.9;max-width:900px;margin:0 auto}
.venues span{white-space:nowrap}
.venues .dot{color:var(--muted);padding:0 .55em}

/* gallery: tighten the space between the intro copy and the filter chips */
.gal-filters{margin-top:clamp(10px,1.4vw,16px)}

/* skip link — hidden until keyboard-focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--plum);color:#fff;padding:12px 20px;border-radius:0 0 3px 0;
  font-family:'Mulish',sans-serif;font-size:.8rem;letter-spacing:.08em}
.skip-link:focus{left:0}

/* ============================================================
   TESTIMONIAL CAROUSEL  — side-by-side cards, swipe on touch
   ============================================================ */
.tq{position:relative;margin-top:clamp(10px,2vw,20px)}
.tq-rail{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.tq-rail::-webkit-scrollbar{display:none}
.tq-rail:focus-visible{outline:2px solid var(--rose-deep);outline-offset:4px;border-radius:4px}
.tq-card{flex:0 0 auto;width:min(430px,84vw);scroll-snap-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:clamp(26px,3vw,38px);margin:0;display:flex;flex-direction:column}
.tq-card::before{content:"\201C";font-family:'Cormorant',serif;font-size:3.4rem;
  color:var(--rose);line-height:.55;display:block;margin-bottom:.18em}
.tq-card p{font-family:'Cormorant',serif;font-size:clamp(1.08rem,1.5vw,1.28rem);font-style:italic;
  line-height:1.55;color:var(--ink);margin:0 0 auto;font-weight:400}
.tq-card footer{margin-top:clamp(18px,2.4vw,26px);padding-top:14px;border-top:1px solid var(--line)}
.tq-card cite{display:block;font-family:'Mulish',sans-serif;font-style:normal;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);font-weight:600}
.tq-ctx{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:5px;font-weight:500}
.tq-link{display:inline-block;margin-top:9px;font-family:'Mulish',sans-serif;font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--rose-deep);
  border-bottom:1px solid var(--rose-deep);padding-bottom:2px;transition:.3s var(--ease)}
.tq-link:hover{color:var(--ink);border-color:var(--ink)}

.tq-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);
  box-shadow:0 4px 18px rgba(24,24,24,.12)}
.tq-arrow:hover{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.tq-arrow[disabled]{opacity:0;pointer-events:none}
.tq-prev{left:calc(var(--pad) * -0.5)}
.tq-next{right:calc(var(--pad) * -0.5)}

.tq-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(14px,2vw,20px)}
.tq-dot{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--line);transition:.35s var(--ease)}
.tq-dot.is-on{background:var(--rose-deep);transform:scale(1.35)}
.tq-hint{margin-top:12px;color:var(--muted);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500}
@media(min-width:901px){ .tq-hint{display:none} }
@media(max-width:900px){ .tq-arrow{display:none} }
@media(max-width:520px){ .tq-card{width:86vw} }

/* ============================================================
   TRUST STAT BAND  (weddings + moss landing pages)
   ============================================================ */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,3vw,10px);padding:clamp(28px,4vw,46px) 0;text-align:center}
.stat{padding:0 clamp(8px,1.5vw,18px);position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:8%;height:84%;width:1px;
  background:var(--line)}
/* numerals match the "Floral Art" wordmark: Cormorant italic 500 */
.stat b{display:block;font-family:'Cormorant',serif;font-style:italic;font-weight:500;
  letter-spacing:.03em;font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1;color:var(--rose-deep)}
.stat span{display:block;font-family:'Mulish',sans-serif;font-size:.68rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:11px;line-height:1.5;font-weight:500}
.stat i{display:block;font-style:normal;font-size:.63rem;letter-spacing:.06em;
  text-transform:none;color:var(--muted);margin-top:5px}
.theme-green .stat b{color:var(--sage-deep)}
/* the hero stat band sits on the dark photo - numerals and labels stay white */
.theme-green .stats--hero .stat b{color:#fff}
.theme-green .stats--hero .stat span{color:rgba(255,255,255,.86)}
@media(max-width:620px){
  .stats{grid-template-columns:1fr 1fr;gap:26px 0}
  .stat:nth-child(odd)::before{display:none}
}

/* ---------- 4-up process grid ---------- */
.svc--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.svc--4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc--4{grid-template-columns:1fr}}

/* ---------- What we offer ---------- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,46px)}
.offer-item{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:clamp(24px,2.6vw,36px)}
.offer-item h3{margin-bottom:.5em}
.offer-item p{font-size:.96rem;color:var(--ink-soft);margin-bottom:.7em}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:20px;font-size:.94rem;color:var(--ink-soft);
  margin-bottom:.5em;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--sage)}
@media(max-width:760px){.offer{grid-template-columns:1fr}}

/* ---------- Recent projects ---------- */
/* 6 projects. auto-fit was picking 4 or 5 columns at some widths, leaving an
   orphan row. 6 only divides evenly by 3, 2 and 1 - so those are the only
   column counts used. Desktop 3x2, tablet 2x3, small phone 1x6. */
.projects{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media(max-width:820px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.projects{grid-template-columns:1fr}}
.projects li{background:var(--blush);padding:clamp(20px,2.4vw,28px);text-align:center}
.projects b{display:block;font-family:'Cormorant',serif;font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.25;color:var(--ink)}
.projects span{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-top:7px;font-weight:500}

/* ---------- ESG table ---------- */
.esg-wrap{margin-top:clamp(26px,3.5vw,42px)}
.esg{width:100%;border-collapse:collapse;background:var(--blush);
  border:1px solid var(--sage);border-radius:4px;overflow:hidden}
.esg th,.esg td{padding:clamp(13px,1.5vw,18px) clamp(11px,1.4vw,18px);
  border:1px solid rgba(116,134,106,.28);vertical-align:middle}
.esg thead th{background:var(--sage);color:#1c1917;font-family:'Mulish',sans-serif;
  font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;font-weight:600;text-align:center}
.esg tbody th{background:var(--sage);color:#1c1917;text-align:left;
  font-family:'Cormorant',serif;font-size:1.12rem;font-weight:400;line-height:1.25;width:26%}
.esg tbody th span{display:block;font-family:'Mulish',sans-serif;font-size:.66rem;
  letter-spacing:.05em;opacity:.8;margin-top:4px;line-height:1.5}
.esg tbody td{text-align:center;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.esg tbody td b{font-family:'Cormorant',serif;font-size:1.5rem;font-weight:400;
  color:var(--sage-deep);display:inline-block;line-height:1}
.esg .na{color:var(--muted)}
.esg-note{margin-top:16px;font-size:.82rem;color:var(--muted);line-height:1.6;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:780px){
  .esg thead{display:none}
  .esg,.esg tbody,.esg tr,.esg th,.esg td{display:block;width:auto}
  .esg tr{margin-bottom:14px;border:1px solid var(--sage);border-radius:4px;overflow:hidden}
  .esg tbody th{width:auto}
  .esg tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;
    text-align:right;border-top:0}
  .esg tbody td::before{content:attr(data-l);font-family:'Mulish',sans-serif;font-size:.63rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;font-weight:500}
}

/* ---------- stat band sitting inside the hero photo ---------- */
.hero--stats .hero-inner{padding-bottom:clamp(150px,21vh,240px)}
.stats-hero{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:linear-gradient(180deg,rgba(13,13,13,0) 0%,rgba(13,13,13,.05) 20%,
    rgba(13,13,13,.13) 40%,rgba(13,13,13,.23) 62%,rgba(13,13,13,.33) 82%,rgba(13,13,13,.40) 100%);
  border-top:0;
  padding:clamp(15px,2.2vw,26px) 0 clamp(17px,2.4vw,28px)}
.theme-green .stats-hero{
  background:linear-gradient(180deg,rgba(17,18,9,0) 0%,rgba(17,18,9,.05) 20%,
    rgba(17,18,9,.13) 40%,rgba(17,18,9,.23) 62%,rgba(17,18,9,.33) 82%,rgba(17,18,9,.40) 100%)}
.stats--hero{border:0;padding:0;background:none}
.stats--hero .stat b{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);
  text-shadow:0 2px 16px rgba(9,9,9,.55)}
.stats--hero .stat span{color:rgba(255,255,255,.86);margin-top:8px;font-size:.64rem;
  letter-spacing:.17em;text-shadow:0 1px 10px rgba(9,9,9,.5)}
.stats--hero .stat i{color:var(--rose);letter-spacing:.18em;margin-top:6px;font-size:.6rem}
.theme-green .stats--hero .stat i{color:var(--sage)}
.stats--hero .stat + .stat::before{background:rgba(255,255,255,.22)}
@media(max-width:720px){
  .hero--stats .hero-inner{padding-bottom:clamp(165px,25vh,225px)}
  .stats--hero .stat b{font-size:1.75rem}
  .stats--hero .stat span{font-size:.57rem;letter-spacing:.12em;margin-top:6px}
  .stats--hero .stat i{display:none}
}
@media(max-width:620px){
  .stats--hero{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:14px 0}
  .stats--hero .stat:nth-child(odd)::before{display:block}
  .stats--hero .stat:first-child::before{display:none}
}

/* heroes: lighter files on phones.
   Each one is paired with a media-scoped <link rel=preload> in its page head,
   so the phone downloads the small file ONLY - never both. If you add a mobile
   variant here, you must split that page's preload too or you get both files. */
@media(max-width:760px){
  .hero--trust .hero-bg .hero-slide:first-child{background-image:url('images/index-hero-mobile.webp')!important}
  .hero--moss .hero-bg .ph.photo{background-image:url('images/moss/moss-09-hero-mobile.webp')!important}
}

/* ---------- home hero legibility ----------
   The eyebrow is small (11.5px) with wide tracking, so it needs real contrast.
   Measured worst-case patch behind it was 3.19:1 — below the 4.5:1 small-text
   threshold. Deepening the mid-scrim and adding a left-side panel behind the
   copy takes it to 5.5:1, without dulling the right side of the photo. */
/* ---------- hero scrim, Aug 24 2026 ----------
   Natalie: "tint too dark, and there is a visible line separating the hero text
   from the photo."

   The line came from an earlier attempt that put a soft halo on a FIXED BOX
   behind the copy. A radial gradient wider than its own box gets clipped at the
   box edge, so it drew three hard straight lines (measured: a 22-grey-level step
   at the left edge, plus the right and bottom edges).

   RULE: every layer that tints this hero must be full-bleed (inset:0 on
   .hero-bg). A full-bleed layer has no interior edge to clip against, so it can
   never draw a line. Do not tint a text container.

   Two full-bleed layers now do the work, both much lighter than before:
     ::after   an eased vertical scrim, many stops so it cannot band
     ::before  a soft vignette drifting toward the copy, fading to zero well
               inside the frame on every side it can reach
   Legibility that the tint no longer provides is carried by the per-glyph
   text-shadow below, which darkens only the letters and cannot seam. */
.hero--wed .hero-bg::after{
  background:linear-gradient(180deg,
    rgba(13,13,13,.14) 0%,  rgba(13,13,13,.07) 12%, rgba(13,13,13,.03) 24%,
    rgba(13,13,13,.03) 36%, rgba(13,13,13,.08) 46%, rgba(13,13,13,.15) 55%,
    rgba(13,13,13,.23) 64%, rgba(13,13,13,.32) 72%, rgba(13,13,13,.42) 80%,
    rgba(13,13,13,.52) 88%, rgba(13,13,13,.60) 95%, rgba(13,13,13,.64) 100%);
}
.hero--wed .hero-bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 55% 44% at 30% 44%,
    rgba(10,10,10,.60) 0%,  rgba(10,10,10,.50) 22%, rgba(10,10,10,.38) 38%,
    rgba(10,10,10,.24) 54%, rgba(10,10,10,.11) 70%, rgba(10,10,10,.03) 82%,
    rgba(10,10,10,0)   92%);
}
.hero--wed .hero-inner .eyebrow{
  color:#f4f4f2;font-size:.76rem;letter-spacing:.26em;
  text-shadow:0 1px 2px rgba(6,6,6,.85), 0 2px 6px rgba(6,6,6,.78),
              0 3px 14px rgba(6,6,6,.7), 0 0 26px rgba(6,6,6,.55);
}
@media(max-width:760px){
  /* Narrow screens: the copy runs nearly edge to edge, so the vignette is
     recentred and eased off. Still full-bleed, still cannot draw a line. */
  .hero--wed .hero-bg::before{
    background:radial-gradient(ellipse 88% 42% at 46% 42%,
      rgba(10,10,10,.52) 0%,  rgba(10,10,10,.42) 26%, rgba(10,10,10,.28) 46%,
      rgba(10,10,10,.14) 66%, rgba(10,10,10,.04) 82%, rgba(10,10,10,0) 94%);
  }

}

/* in-page jump targets: clear the fixed nav and leave breathing room above */
/* #info is a .cta-band, not a bg-paper section - keeps the original offset */
#info{scroll-margin-top:clamp(96px,12vh,150px)}
/* Hero CTA jump targets: land the heading tight under the fixed nav (nav is 78px).
   Two things were stacking - a 96px scroll offset AND the section's own 80px top
   padding - putting the heading 176px down. Both trimmed, responsively.
   #services = home 'Services' CTA | #process = moss 'See how it works' CTA.
   Both are <section class="bg-paper"> so they take identical values. */
#services,#process{scroll-margin-top:clamp(62px,8vh,80px);padding-top:clamp(20px,2.4vw,34px)}

/* ---- home hero rotator ----------------------------------------------------
   Three photos crossfading behind the same scrim. Stacked absolutely so the
   fade is opacity-only (compositor-driven, no layout, no repaint of the scrim).
   .hero-bg::after and ::before still sit above them, so the text treatment and
   its measured contrast are identical on every slide. -------------------- */
.hero-slide{position:absolute;inset:0;opacity:0;
  transition:opacity 1.8s cubic-bezier(.4,0,.3,1);will-change:opacity}
.hero-slide.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}

/* ---- per-page scrim tints (Aug 13) --------------------------------------
   Every dark overlay now carries its page's own scheme instead of one shared
   near-black: index + weddings sit on a mocha-black (hue 13, from #d6d6d2),
   moss-walls on a pistachio-black (hue 73, from #b6bf51). Every replacement
   value was picked to have luminance <= the value it replaced, so the hero
   text contrast measured in README section "Hero text legibility" can only
   have improved - it cannot have regressed.
   ------------------------------------------------------------------------- */
/* moss page: the photo-tile caption scrims follow the pistachio scheme too */
.theme-green .tile-cap{background:linear-gradient(180deg,transparent,rgba(19,20,10,.78))}
.theme-green .ph-caption{background:rgba(19,20,10,.28)}
.theme-green .hero .ph-label{background:rgba(19,20,10,.4)}

/* "A Walk in Nature" featured commission (moss page). Source is 16:9, the tile is 5:4,
   so it sits at 30% horizontally - that keeps the whole suspended piece plus the coral
   foliage on the left, instead of a centre crop that clips both ends. */
.walk-in-nature{background-image:url(images/moss/walk-in-nature.webp);background-position:30% center}
@media(max-width:760px){
  .walk-in-nature{background-image:url(images/moss/walk-in-nature-900.webp)}
}

/* home "Two ways to work with us": green tint on the moss tile to match that page */
.path--moss .path-overlay{background:linear-gradient(180deg,transparent 35%,rgba(19,20,10,.76))}