@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dm-sans.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url(/fonts/noto-serif-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
/* La Muse. Layout idea: bold lowercase headlines over teal and cream bands,
   rose label stickers, one clear action per screen, funnel from hook to enquiry. */
:root{
  --teal:#2B6B67;
  --teal-deep:#1D4A47;
  --cream:#F6F1EC;
  --rose:#E8B4B8;
  --rose-deep:#B65E69;
  --blush:#F3DEDC;
  --ink:#1D3F3C;
  --ink-soft:#41615E;
  --line:rgba(29,63,60,.18);
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --serif:"Noto Serif","Georgia",serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:max(18px,env(safe-area-inset-left,0px));
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.65 var(--body);padding-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:0 0 .5em;text-transform:lowercase;text-wrap:balance}
h1{font-size:clamp(2.5rem,7vw,4.9rem)}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.65rem);letter-spacing:-.01em}
p{margin:0 0 1em}
.it{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--rose-deep);text-transform:lowercase}
.on-teal .it,.hero.on-teal .it{color:var(--rose)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap{padding-right:max(18px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cream);padding:.6em 1em;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px;border-radius:2px}
.on-teal :focus-visible,.footer :focus-visible{outline-color:var(--rose)}

/* header */
.header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.logo{display:inline-flex;align-items:baseline;text-decoration:none;line-height:1;gap:.02em}
.logo .la{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--rose-deep);font-size:1.5rem}
.logo .muse{font-family:var(--display);font-weight:800;color:var(--teal);font-size:1.85rem;letter-spacing:-.03em}
.footer .logo .la{color:var(--rose)}.footer .logo .muse{color:var(--cream)}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--rose-deep)}
.pill-new{display:inline-block;background:var(--rose);color:var(--teal-deep);font:700 .62rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:.28em .55em;border-radius:99px;margin-left:.45em;vertical-align:.15em;transform:rotate(-4deg)}
.menu-btn{display:none;background:none;border:1px solid var(--ink);color:var(--ink);padding:.5rem .8rem;border-radius:4px;font:600 .9rem var(--body);cursor:pointer}

/* buttons */
.btn{display:inline-block;text-decoration:none;font:700 1rem/1 var(--body);padding:1.05em 1.7em;border-radius:4px;border:2px solid var(--teal);background:var(--teal);color:var(--cream);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:var(--teal-deep);border-color:var(--teal-deep)}
.btn.rose{background:var(--rose);border-color:var(--rose);color:var(--teal-deep)}
.btn.rose:hover{background:#F0C6C9;border-color:#F0C6C9}
.btn.ghost{background:transparent;color:var(--teal)}
.btn.ghost:hover{background:var(--teal);color:var(--cream)}
.on-teal .btn.ghost{color:var(--cream);border-color:var(--cream)}
.on-teal .btn.ghost:hover{background:var(--cream);color:var(--teal)}
.btn.cream{background:var(--cream);border-color:var(--cream);color:var(--teal-deep)}
.btn.cream:hover{background:#fff;border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.small-btn{padding:.8em 1.2em;font-size:.92rem}

/* sections */
.band{padding-block:clamp(3.2rem,7vw,6rem)}
.on-teal{background:var(--teal);color:var(--cream)}
.on-blush{background:var(--blush)}
.on-deep{background:var(--teal-deep);color:var(--cream)}
.label{display:inline-block;background:var(--rose);color:var(--teal-deep);font:700 .78rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:.55em .9em;border-radius:3px;transform:rotate(-1.5deg);margin-bottom:1.1rem}
.on-blush .label,.cream .label{background:var(--teal);color:var(--cream)}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.55}
.muted{color:var(--ink-soft)}
.on-teal .muted,.on-deep .muted{color:rgba(246,241,236,.82)}
.section-head{max-width:720px;margin-bottom:2.2rem}
.center{text-align:center}.center .section-head{margin-inline:auto}

/* hero */
.hero{padding-block:clamp(2.8rem,6vw,5rem)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero h1 .hl{background:var(--rose);color:var(--teal-deep);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .lead{max-width:34em}
.hero-note{font-size:.95rem;margin-top:1.1rem}
.hero-art{position:relative}
.hero-art img{border-radius:6px}
.sticker{position:absolute;background:var(--rose);color:var(--teal-deep);font:700 .8rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:.7em 1em;border-radius:3px;box-shadow:0 6px 0 rgba(0,0,0,.12)}
.sticker.a{top:-14px;left:-10px;transform:rotate(-6deg)}
.sticker.b{bottom:-14px;right:-6px;transform:rotate(4deg);background:var(--cream)}
.page-hero{padding-block:clamp(2.6rem,6vw,4.6rem)}
.page-hero h1{font-size:clamp(2.3rem,6vw,4.2rem);max-width:15em}
.crumbs{font-size:.9rem;margin-bottom:1.2rem}
.crumbs a{text-decoration:none;opacity:.85}.crumbs a:hover{text-decoration:underline}

/* ticker */
.ticker{background:var(--rose);color:var(--teal-deep);overflow:hidden;white-space:nowrap;border-block:2px solid var(--teal-deep)}
.ticker-track{display:inline-flex;gap:2.2rem;padding:.8rem 0;animation:tick 38s linear infinite;font:800 1.05rem/1 var(--display);text-transform:lowercase;letter-spacing:-.01em}
.ticker-track span::after{content:"\2726";margin-left:2.2rem;font-size:.9em}
@keyframes tick{to{transform:translateX(-50%)}}

/* trust strip */
.trust{padding-block:1.6rem;border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;justify-content:center;font-size:.95rem}
.trust strong{font:700 .75rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.trust span{font-family:var(--display);font-weight:700;color:var(--teal)}

/* grids and cards */
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--cream);border:2px solid var(--teal);border-radius:6px;padding:1.6rem;display:flex;flex-direction:column;min-width:0}
.on-blush .card{background:var(--cream)}
.card h3{margin-bottom:.4em}
.card p{margin-bottom:1em}
.card .more{margin-top:auto}
.card.feature{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.card.feature .it{color:var(--rose)}
.card.feature .price{color:var(--rose)}
.price{font:800 1.5rem/1 var(--display);color:var(--teal);letter-spacing:-.02em}
.price small{font:500 .9rem var(--body);color:var(--ink-soft);letter-spacing:0}
.card.feature .price small{color:rgba(246,241,236,.8)}
.card .sub{font-size:.95rem;color:var(--ink-soft);margin-bottom:1rem}
.card.feature .sub{color:rgba(246,241,236,.85)}
.dots{list-style:none;margin:0 0 1.2rem;padding:0}
.dots li{position:relative;padding-left:1.3rem;margin-bottom:.45rem;font-size:.98rem}
.dots li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;border-radius:50%;background:var(--rose-deep)}
.on-teal .dots li::before,.card.feature .dots li::before{background:var(--rose)}
.more{font-weight:700;text-decoration:none;border-bottom:2px solid var(--rose-deep);align-self:flex-start;padding-bottom:2px}
.card.feature .more{border-color:var(--rose)}
.tag-rot{display:inline-block;background:var(--rose);color:var(--teal-deep);font:700 .7rem/1 var(--body);letter-spacing:.09em;text-transform:uppercase;padding:.45em .7em;border-radius:3px;transform:rotate(-2deg);align-self:flex-start;margin-bottom:.9rem}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;border-top:3px solid var(--rose);padding-top:1rem}
.steps li::before{content:counter(s);font:800 2.6rem/1 var(--display);color:var(--rose-deep);display:block;margin-bottom:.4rem}
.on-teal .steps li::before{color:var(--rose)}
.steps h3{font-size:1.2rem}
.steps p{font-size:.98rem}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* quotes */
.quote{background:var(--cream);border-radius:6px;padding:1.6rem;border:2px solid var(--teal);display:flex;flex-direction:column;gap:1rem;margin:0;min-width:0}
.quote p{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.55;margin:0}
.quote cite{font:700 .9rem var(--body);font-style:normal;color:var(--teal)}
.on-teal .quote{color:var(--ink)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split.rev>:first-child{order:2}
.photo{border-radius:6px;border:3px solid var(--rose);transform:rotate(1.5deg)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1rem 0 0;padding:0}
.chips li{border:1.5px solid var(--teal);border-radius:99px;padding:.35em .9em;font-size:.92rem;font-weight:500}
.on-teal .chips li{border-color:var(--rose)}

/* faq */
.faq details{border-top:1.5px solid var(--line);padding:1.1rem 0}
.faq details:last-child{border-bottom:1.5px solid var(--line)}
.faq summary{cursor:pointer;font:700 1.12rem/1.35 var(--display);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:1rem;text-transform:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--rose-deep);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.8rem 0 0;color:var(--ink-soft);max-width:44em}

/* price rows */
.rows{list-style:none;margin:0 0 1rem;padding:0}
.rows li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.rows li:last-child{border:0}
.rows b{font-family:var(--display);font-size:1.15rem;white-space:nowrap}

/* offer banner */
.offer{background:var(--rose);color:var(--teal-deep);border-radius:6px;padding:1.6rem;display:grid;gap:.4rem}
.offer h3{margin:0}

/* cta band */
.cta-band{text-align:center}
.cta-band h2{max-width:14em;margin-inline:auto}
.cta-band .btn-row{justify-content:center}

/* form */
.form-frame{background:var(--cream);border:2px solid var(--teal);border-radius:6px;padding:.5rem;min-height:640px}
.form-frame iframe{width:100%;border:0;min-height:780px;display:block}
.email-line{font:700 1.15rem var(--body)}

/* legal */
.legal h3{margin-top:2rem;font-size:1.35rem}
.legal li{margin-bottom:.4rem}

/* footer */
.footer{background:var(--teal-deep);color:var(--cream);padding-block:3rem 5.5rem}
.footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.footer h4{font:700 .75rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-bottom:1rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.55rem}
.footer a{text-decoration:none;opacity:.92}.footer a:hover{text-decoration:underline;opacity:1}
.footer small{display:block;opacity:.75;font-size:.82rem;line-height:1.5}
.footer .legal-line{grid-column:1/-1;border-top:1px solid rgba(246,241,236,.2);padding-top:1.4rem;margin-top:.4rem}

/* sticky mobile cta */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--cream);border-top:1px solid var(--line);padding:.7rem max(18px,env(safe-area-inset-right,0px)) calc(.7rem + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
.mobile-cta .btn{display:block;text-align:center;width:100%}

@media (max-width:900px){
  .hero .wrap,.split{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .g3,.g4,.steps,.steps.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer .wrap{grid-template-columns:1fr 1fr}
  .footer .wrap>:first-child{grid-column:1/-1}
}
@media (max-width:720px){
  .menu-btn{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 1rem}
  .nav.open{display:flex}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--line)}
  .nav a.btn{margin-top:.8rem;text-align:center;border:2px solid var(--teal)}
  .g2,.g3,.g4,.steps,.steps.three{grid-template-columns:1fr}
  .mobile-cta{display:block}
  .footer .wrap{grid-template-columns:1fr}
  .sticker.a{left:0}.sticker.b{right:0}
  .rows li{flex-direction:column;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  .btn{transition:none}
}

/* ---- play: overlaps and movement ---- */
.hero{position:relative;z-index:2}
.hero-art{z-index:3}
@media (min-width:901px){
  .hero{padding-bottom:clamp(4.5rem,8vw,7rem)}
  .hero-art{margin-bottom:calc(clamp(2.5rem,5vw,4.5rem) * -1)}
  .ticker{position:relative;z-index:1}
  .grid.g3>.card:nth-child(2):not(.feature),.grid.g4>.card:nth-child(even){transform:translateY(-.7rem)}
  .split .photo{margin-block:-1.5rem}
}
/* stickers hang off the corner of featured cards */
.card.feature{position:relative}
.card .tag-rot{position:absolute;top:-.8rem;right:1rem;margin:0;align-self:auto;transform:rotate(4deg);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.card.feature .tag-rot{right:auto;left:1rem;transform:rotate(-4deg)}
.card:has(.tag-rot){position:relative}
/* gentle float on stickers */
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:1.5deg}}
.sticker.a{animation:bob 4.5s ease-in-out infinite}
.sticker.b{animation:bob 5.5s ease-in-out -2s infinite}
.hero h1 .hl{animation:hl 1.1s .3s both cubic-bezier(.2,.8,.2,1);background-size:100% 100%;background-repeat:no-repeat}
@keyframes hl{from{background-size:0 100%}to{background-size:100% 100%}}
/* hover lift */
.card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 10px 0 rgba(29,74,71,.14)}
@media (min-width:901px){.grid.g3>.card:nth-child(2):not(.feature):hover,.grid.g4>.card:nth-child(even):hover{transform:translateY(-1.1rem) rotate(-.4deg)}}
.btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.photo{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.photo:hover{transform:rotate(-1deg) scale(1.02)}
/* scroll reveal (class added by JS, so no-JS visitors see everything) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.card.reveal.in{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .7s ease}
@media (prefers-reduced-motion:reduce){
  .sticker.a,.sticker.b,.hero h1 .hl{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.btn,.photo{transition:none}
  .card:hover,.btn:hover,.photo:hover{transform:none}
}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}

/* services dropdown */
.has-sub{position:relative;display:inline-flex;align-items:center}
.sub-btn{background:none;border:0;padding:.4rem .5rem;cursor:pointer;color:inherit}
.sub-btn::before{content:"";display:block;width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.sub{position:absolute;top:100%;left:-.5rem;min-width:15.5rem;background:var(--cream);border:2px solid var(--teal);border-radius:6px;box-shadow:0 8px 0 rgba(29,74,71,.14);padding:.5rem;display:none;flex-direction:column;z-index:60}
.sub a{padding:.6rem .8rem;border-radius:4px;font-weight:500}
.sub a:hover,.sub a:focus-visible{background:var(--blush)}
.sub a.all{border-top:1px solid rgba(29,74,71,.2);margin-top:.3rem;font-weight:700;color:var(--teal)}
@media (min-width:901px){
  .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:flex}
  .has-sub:hover .sub-btn::before,.has-sub.open .sub-btn::before{transform:rotate(225deg)}
}
@media (max-width:900px){
  .has-sub{display:block}
  .has-sub>a{display:inline-block}
  .sub-btn{float:right;padding:.8rem}
  .sub{position:static;display:none;box-shadow:none;border:0;border-left:3px solid var(--rose);border-radius:0;background:transparent;padding:0 0 0 .8rem;margin:.2rem 0 .6rem}
  .has-sub.open .sub{display:flex}
  .has-sub.open .sub-btn::before{transform:rotate(225deg)}
}

/* cards always use dark text, even inside teal sections */
.card{color:var(--ink)}
.on-teal .card h3,.on-teal .card p,.on-teal .card li,.on-teal .card .sub{color:var(--ink)}
.on-teal .card .it{color:var(--rose-deep)}
.on-teal .card.feature,.on-teal .card.feature h3,.on-teal .card.feature p,.on-teal .card.feature li,.on-teal .card.feature .sub{color:var(--cream)}
.card:has(.tag-rot){padding-top:2.2rem}

/* logo marquee, stats, five-card row */
.trust .wrap{margin-bottom:1rem}
.logos{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;gap:1.2rem;width:max-content;list-style:none;margin:0;padding:.4rem 0;animation:logos 45s linear infinite}
.logos:hover .logo-track{animation-play-state:paused}
.logo-track li{flex:none}
.logo-track img{display:block;width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:#fff}
@keyframes logos{to{transform:translateX(calc(-50% - .6rem))}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.logo-track li[aria-hidden="true"]{display:none}.logos{-webkit-mask-image:none;mask-image:none}}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g5{grid-template-columns:1fr}.logo-track img{width:76px;height:76px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}
.stat{background:var(--blush);border-radius:6px;padding:1.4rem;display:grid;gap:.4rem;align-content:start}
.stat b{font:800 clamp(2rem,4vw,2.8rem)/1 var(--display);color:var(--rose-deep)}
.stat span{font-size:.98rem;color:var(--ink)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}