/* Redesigned marketing inner pages (first: Views/Studio/booking.cshtml). Same look as the home page
   (assets/css/home.css): light sans headings, bronze kickers, warm alternating sections, near-square dark buttons.
   Everything is scoped to .lf-page so the older site CSS (Bootstrap reboot, app_themes) can't reach in.
   The .mk-* blocks are app-screen mockups drawn in HTML, sized in em off their own font-size so they scale with
   the column they sit in (container queries). */

/* ---- base: browser defaults back, then the page type ---- */
.lf-page{font-family:Arial,Helvetica,sans-serif;line-height:normal;color:#171817;background:#fff;-webkit-font-smoothing:antialiased;text-align:start}
.lf-page :where(h1,h2,h3,h4,h5,h6,p,li,summary,small,figure,blockquote,label,button,span,div,a,strong,em,b,i:not([class*="fa-"])){font-family:inherit}
.lf-page :where(h1,h2,h3,h4,h5,h6){font-weight:400;line-height:1.15;color:inherit;margin:0}
.lf-page :where(p){margin:0 0 1em}
.lf-page :where(ul,ol){margin:0;padding:0}
.lf-page :where(img,svg){vertical-align:middle}
.lf-page a{color:inherit;text-decoration:none}
.lf-page .toast-body{padding:0}
@media screen and (max-width:900px){.lf-page{padding-top:48px}} /* the site's fixed phone menu bar */

.lf-page .pg-section{padding:96px 5.4%}
.lf-page .pg-section.warm{background:#f6f4ef}
.lf-page .pg-inner{max-width:1180px;margin:0 auto}
.lf-page .kicker{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#857653;margin:0 0 14px}
.lf-page h1{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.045em;line-height:1.04;margin:0 0 24px}
.lf-page h2{font-size:clamp(30px,3vw,46px);letter-spacing:-1.6px;line-height:1.12;margin:0 0 20px}
.lf-page h3{font-size:19px;font-weight:500;letter-spacing:-.2px;line-height:1.3;margin:0 0 8px}
.lf-page .lead{font-weight:400;font-size:clamp(17px,1.25vw,20px);line-height:1.5;color:#5d5f5b;max-width:520px;margin:0 0 30px}
.lf-page .pg-copy p{font-size:16px;line-height:1.65;color:#5d5f5b;max-width:500px}
.lf-page .pg-copy p a,.lf-page .faq .lf-answer a{border-bottom:1px solid #b9b6ad}
.lf-page .pg-copy p a:hover,.lf-page .faq .lf-answer a:hover{border-color:#171817}
.lf-page .button{display:inline-flex;align-items:center;gap:16px;background:#191a18;color:#fff;border:1px solid #191a18;border-radius:5px;padding:18px 28px;font-size:16px;line-height:1.2;transition:background .2s,transform .2s}
.lf-page .button:hover{background:#393d36;color:#fff;transform:translateY(-2px)}
.lf-page .button .arrow{font-size:22px;line-height:.7}
.lf-page .note{display:block;font-size:12px;color:#858783;margin:14px 0 0}
.lf-page .text-link{display:inline-block;font-size:14px;border-bottom:1px solid #b9b6ad;padding-bottom:4px;margin-top:6px}
.lf-page .text-link:hover{border-color:#171817}

/* hero: copy left, visual right */
.lf-page .pg-hero{padding:72px 5.4% 88px;background:linear-gradient(180deg,#fff 0%,#f8f6f1 100%)}
.lf-page .pg-hero .pg-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
/* two columns: copy and a visual */
.lf-page .pg-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:64px;align-items:center}
.lf-page .pg-split.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}
.lf-page .pg-split.flip > :first-child{order:2}
.lf-page .pg-intro{max-width:640px;margin:0 0 44px}
.lf-page .pg-intro.center{text-align:center;margin-left:auto;margin-right:auto}

/* three steps */
.lf-page .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:step}
.lf-page .step{background:#fff;border:1px solid #e8e5de;border-radius:16px;padding:28px 26px 26px;counter-increment:step}
.lf-page .step:before{content:counter(step,decimal-leading-zero);display:block;font-family:Georgia,serif;font-style:italic;color:#a4805a;font-size:15px;margin-bottom:22px}
.lf-page .step p{font-size:15px;line-height:1.6;color:#5d5f5b;margin:0}
.lf-page .step .mk{margin-top:22px}

/* check list */
.lf-page .checks{list-style:none;display:grid;gap:14px;margin:6px 0 26px}
.lf-page .checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55;color:#3f413d}
.lf-page .checks li:before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:#efe6d8}
.lf-page .checks li:after{content:"";position:absolute;left:6px;top:calc(.2em + 5px);width:6px;height:3px;border-left:1.6px solid #8a6a3a;border-bottom:1.6px solid #8a6a3a;transform:rotate(-45deg)}
.lf-page .checks b{font-weight:600;color:#171817}

/* FAQ: same markup as the live FAQ (summary > h3, div.lf-answer) */
.lf-page .faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.lf-page .faq details{border-bottom:1px solid #e2e3dc;padding:18px 0}
.lf-page .faq details:first-child{border-top:1px solid #e2e3dc}
.lf-page .faq summary{position:relative;cursor:pointer;font-size:16px;line-height:1.5;padding-right:32px;list-style:none;display:block}
.lf-page .faq summary::-webkit-details-marker{display:none}
.lf-page .faq summary h3{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.lf-page .faq summary::before,.lf-page .faq summary::after{content:"";position:absolute;right:2px;top:12px;width:12px;height:1px;background:currentColor}
.lf-page .faq summary::after{transform:rotate(90deg)}
.lf-page .faq details[open] summary::after{transform:rotate(0)}
.lf-page .faq .lf-plus{display:none}
.lf-page .faq .lf-answer{font-size:14.5px;line-height:1.65;color:#5d5f5b;margin:12px 0 0;max-width:620px}

@media (max-width:900px){
  .lf-page .pg-section{padding:64px 20px}
  .lf-page .pg-hero{padding:40px 20px 56px}
  .lf-page .pg-hero .pg-inner,.lf-page .pg-split,.lf-page .faq-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .lf-page .pg-split.flip{grid-template-columns:minmax(0,1fr)}
  .lf-page .pg-split.flip > :first-child{order:0}
  .lf-page .steps{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.lf-page .button{transition:none}.lf-page .button:hover{transform:none}}

/* ======================================================================================================
   App mockups (.mk). 1em = 16px at the design width; each block sets its own scale from its container.
   ====================================================================================================== */
.lf-page .mk{container-type:inline-size;font-family:Inter,Arial,Helvetica,sans-serif}
.lf-page .mk *{box-sizing:border-box}
.lf-page .mk .mk-scale{-webkit-font-smoothing:antialiased;color:#1b1b1a}

/* --- hero: a desktop "choose a session" page with the phone date/time picker over it --- */
.lf-page .mk-hero{position:relative}
.lf-page .mk-hero .mk-scale{font-size:calc(100cqw / 40);position:relative}
.lf-page .mk-desk{width:84%;margin-top:3em;background:#fff;border:1px solid #e6e2da;border-radius:1em;box-shadow:0 1.6em 3.6em #3b2c1f1f;overflow:hidden}
.lf-page .mk-desk .bar{display:flex;align-items:center;gap:.5em;padding:.8em 1.1em;border-bottom:1px solid #eeebe5;font-size:.7em;color:#8b867c}
.lf-page .mk-desk .bar i{width:.7em;height:.7em;border-radius:50%;background:#e2ded6;display:block}
.lf-page .mk-desk .bar span{margin-left:.8em;padding:.25em .9em;border-radius:99px;background:#f4f2ee}
.lf-page .mk-desk .studio{text-align:center;padding:1.6em 1em .4em}
.lf-page .mk-desk .studio b{display:block;font:400 1.15em/1.2 Georgia,serif;letter-spacing:.18em;text-transform:uppercase}
.lf-page .mk-desk .studio small{font-size:.66em;color:#8b867c;letter-spacing:.12em;text-transform:uppercase}
.lf-page .mk-desk .studio p{font-size:.78em;color:#5d5f5b;margin:.9em 0 0;line-height:1.5}
.lf-page .mk-sessions{display:grid;grid-template-columns:1fr 1fr;gap:.9em;padding:1.2em 1.4em 1.5em}
.lf-page .mk-sess{border:1px solid #ece8e1;border-radius:.7em;overflow:hidden;background:#fff}
.lf-page .mk-sess img{display:block;width:100%;height:5.6em;object-fit:cover}
.lf-page .mk-sess div{padding:.6em .75em .7em}
.lf-page .mk-sess b{display:block;font-size:.78em;font-weight:600}
.lf-page .mk-sess span{display:block;font-size:.66em;color:#7a776f;margin-top:.25em}
.lf-page .mk-sess em{font-style:normal;color:#2f8a5b;font-weight:600}
/* phone: real proportions (about 9:19.5), status bar, home indicator; it overlaps the desktop window */
.lf-page .mk-phone{position:absolute;right:0;top:0;width:35%;aspect-ratio:9/19.5;display:flex;flex-direction:column;background:#fff;border:.5em solid #1b1b1a;border-radius:2.3em;box-shadow:0 1.8em 3.6em #3b2c1f33;overflow:hidden}
.lf-page .mk-hero .mk-phone{width:24.5%;font-size:.7em;top:50%;transform:translateY(-50%)} /* hero phone: 70% scale, centered on the desktop */
.lf-page .mk-phone .sb{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.75em 1.3em .5em;font-size:.62em;font-weight:600}
.lf-page .mk-phone .sb > i{position:absolute;left:50%;top:.55em;transform:translateX(-50%);width:5.6em;height:1.45em;border-radius:99px;background:#1b1b1a}
.lf-page .mk-phone .sb .ic{display:flex;align-items:flex-end;gap:.18em}
.lf-page .mk-phone .sb .ic b{display:block;width:.28em;background:#1b1b1a;border-radius:.1em}
.lf-page .mk-phone .sb .ic b:nth-child(1){height:.45em}.lf-page .mk-phone .sb .ic b:nth-child(2){height:.65em}.lf-page .mk-phone .sb .ic b:nth-child(3){height:.85em}
.lf-page .mk-phone .ph{flex:1;display:flex;flex-direction:column;padding:.4em 1em .6em}
.lf-page .mk-phone .ph img{display:block;width:100%;height:auto;aspect-ratio:4/3.4;object-fit:cover;border-radius:.7em}
.lf-page .mk-phone h4{font-size:.9em;font-weight:600;margin:.9em 0 .2em}
.lf-page .mk-phone .meta{font-size:.62em;color:#7a776f}
.lf-page .mk-phone .go{margin-top:auto}
.lf-page .mk-phone .home{flex:none;width:34%;height:.3em;border-radius:99px;background:#1b1b1a;margin:.2em auto .6em}
.lf-page .mk-phone .lbl{font-size:.6em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8b867c;margin:1.4em 0 .6em}
.lf-page .mk-days{display:grid;grid-template-columns:repeat(5,1fr);gap:.3em}
.lf-page .mk-days span{text-align:center;border:1px solid #ece8e1;border-radius:.5em;padding:.35em 0;font-size:.6em;line-height:1.25;color:#5d5f5b}
.lf-page .mk-days span b{display:block;font-size:1.35em;color:#1b1b1a}
.lf-page .mk-days span.on{background:#1b1b1a;border-color:#1b1b1a;color:#cfcac0}
.lf-page .mk-days span.on b{color:#fff}
.lf-page .mk-days span.off{opacity:.4}
.lf-page .mk-times{display:grid;grid-template-columns:1fr 1fr;gap:.35em}
.lf-page .mk-times span{text-align:center;border:1px solid #e2ddd4;border-radius:.45em;padding:.6em 0;font-size:.64em;font-weight:600}
.lf-page .mk-times span.on{border-color:#a4805a;background:#f6eee3;color:#6b4e1f}
.lf-page .mk-phone .go{margin-top:1.2em;text-align:center;background:#1b1b1a;color:#fff;border-radius:.5em;padding:.6em 0;font-size:.66em;font-weight:600}

/* photo crops per photo and frame shape, so faces stay in view */
.lf-page .mk-sess img.f{object-position:50% 46%}.lf-page .mk-sess img.m{object-position:45% 62%}.lf-page .mk-sess img.h{object-position:50% 18%}.lf-page .mk-sess img.c{object-position:50% 45%}
.lf-page .mk-type img.f{object-position:50% 27%}.lf-page .mk-type img.m{object-position:30% 50%}.lf-page .mk-type img.h{object-position:50% 6%}.lf-page .mk-type img.c{object-position:85% 50%}
.lf-page .mk-phone .ph img.f{object-position:50% 36%}
/* --- step illustrations (small cards) --- */
.lf-page .mk-mini .mk-scale{font-size:calc(100cqw / 20)}
.lf-page .mk-card{background:#faf9f6;border:1px solid #ece8e1;border-radius:.8em;padding:.9em 1em}
.lf-page .mk-card .ln{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:.72em;padding:.35em 0;color:#5d5f5b}
.lf-page .mk-card .ln b{color:#1b1b1a;font-weight:600}
.lf-page .mk-card .ln + .ln{border-top:1px solid #ece8e1}
.lf-page .mk-check{display:inline-grid;place-items:center;width:1.3em;height:1.3em;border-radius:.3em;background:#2f8a5b;color:#fff;font-size:.8em;font-weight:700;flex:none}
.lf-page .mk-pill{display:inline-block;font-size:.85em;font-weight:600;padding:.15em .6em;border-radius:99px;background:#e7f4ec;color:#2f8a5b}
.lf-page .mk-pill.bronze{background:#f3ebe0;color:#7a5a24}
.lf-page .mk-btn{display:block;margin-top:.6em;text-align:center;background:#1b1b1a;color:#fff;border-radius:.45em;padding:.55em 0;font-size:.72em;font-weight:600}
.lf-page .mk-mail{display:flex;gap:.7em;align-items:flex-start}
.lf-page .mk-mail i{flex:none;width:2em;height:2em;border-radius:.5em;background:#f3ebe0;display:grid;place-items:center;font-style:normal;color:#8a6a3a;font-size:.8em}
.lf-page .mk-mail b{display:block;font-size:.76em;font-weight:600}
.lf-page .mk-mail span{display:block;font-size:.66em;color:#7a776f;margin-top:.2em;line-height:1.4}

/* --- session types list --- */
.lf-page .mk-types .mk-scale{font-size:calc(100cqw / 36)}
.lf-page .mk-panel{background:#fff;border:1px solid #e6e2da;border-radius:1.1em;box-shadow:0 1.4em 3em #3b2c1f14;overflow:hidden}
.lf-page .mk-panel .hd{display:flex;align-items:center;justify-content:space-between;padding:1.1em 1.3em;border-bottom:1px solid #eeebe5}
.lf-page .mk-panel .hd b{font-size:1.1em;font-weight:600}
.lf-page .mk-panel .hd span{font-size:.72em;font-weight:600;color:#fff;background:#1b1b1a;border-radius:.45em;padding:.5em .9em}
.lf-page .mk-type{display:grid;grid-template-columns:3.6em 1fr auto;gap:1em;align-items:center;padding:.9em 1.3em;border-top:1px solid #f1eee8}
.lf-page .mk-type:first-of-type{border-top:0}
.lf-page .mk-type img{width:3.6em;height:3.6em;border-radius:.6em;object-fit:cover;display:block}
.lf-page .mk-type b{display:block;font-size:.9em;font-weight:600}
.lf-page .mk-type span{display:block;font-size:.72em;color:#7a776f;margin-top:.25em}
.lf-page .mk-type span.tag{display:inline-block;margin-top:0;font-size:.6em;font-weight:700;letter-spacing:.06em;padding:.25em .55em;border-radius:.3em;background:#ece8e1;color:#5d5f5b;margin-right:.4em}
.lf-page .mk-type span.tag.mini{background:#e8efe9;color:#2f5a3e}
.lf-page .mk-type .price{text-align:right;font-size:.95em;font-weight:600}
.lf-page .mk-type .price small{display:block;font-size:.68em;font-weight:500;color:#2f8a5b;margin-top:.2em}
.lf-page .mk-bar{height:.35em;border-radius:99px;background:#ece8e1;margin-top:.45em;overflow:hidden;width:9em}
.lf-page .mk-bar i{display:block;height:100%;width:80%;background:#5f8a6b}

/* --- calendar (month) --- */
.lf-page .mk-cal .mk-scale{font-size:calc(100cqw / 36)}
.lf-page .mk-cal .cal-bar{display:flex;align-items:center;gap:.8em;padding:1em 1.3em;border-bottom:1px solid #eeebe5}
.lf-page .mk-cal .cal-bar b{font-size:1.15em;font-weight:600;margin-right:auto}
.lf-page .mk-cal .cal-bar span{font-size:.7em;color:#7a776f;border:1px solid #e6e2da;border-radius:.4em;padding:.35em .7em}
.lf-page .mk-cal .dow,.lf-page .mk-cal .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.lf-page .mk-cal .dow span{padding:.6em .7em;font-size:.62em;letter-spacing:.08em;text-transform:uppercase;color:#9a968e;border-bottom:1px solid #eeebe5}
.lf-page .mk-cal .grid > div{min-width:0;min-height:5.6em;padding:.45em .4em;border-right:1px solid #f1eee8;border-bottom:1px solid #f1eee8;display:flex;flex-direction:column;gap:.25em}
.lf-page .mk-cal .grid > div:nth-child(7n){border-right:0}
.lf-page .mk-cal .grid > div:nth-last-child(-n+7){border-bottom:0}
.lf-page .mk-cal em{font-style:normal;font-size:.7em;color:#7a776f;padding:0 .3em}
.lf-page .mk-cal .out em{color:#cdc8bf}
.lf-page .mk-cal .today em{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:#1b1b1a;color:#fff;padding:0}
.lf-page .mk-cal .ev{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.6em;line-height:1.25;padding:.35em .5em;border-radius:.4em}
.lf-page .mk-cal .ev b{font-weight:600}
.lf-page .mk-cal .ev.s{background:#f3ebe0;color:#6b4e1f;border-left:.25em solid #a07a3a}
.lf-page .mk-cal .ev.m{background:#e8efe9;color:#2f5a3e;border-left:.25em solid #5f8a6b}
.lf-page .mk-cal .ev.busy{background:repeating-linear-gradient(135deg,#f1efea 0 .4em,#e8e5de .4em .8em);color:#7a776f}
.lf-page .mk-cal .legend{display:flex;flex-wrap:wrap;gap:1.1em;padding:.8em 1.3em;border-top:1px solid #eeebe5;font-size:.66em;color:#7a776f}
.lf-page .mk-cal .legend i{display:inline-block;width:.8em;height:.8em;border-radius:.2em;margin-right:.4em;vertical-align:-.05em}

/* --- project created by a booking --- */
.lf-page .mk-proj .mk-scale{font-size:calc(100cqw / 36)}
.lf-page .mk-proj .ttl{padding:1.2em 1.3em .3em}
.lf-page .mk-proj .ttl b{display:block;font-size:1.4em;font-weight:700;letter-spacing:-.02em}
.lf-page .mk-proj .ttl span{font-size:.75em;color:#7a776f}
.lf-page .mk-pipe{display:flex;gap:.25em;padding:.8em 1.3em;overflow:hidden}
.lf-page .mk-pipe span{flex:1;text-align:center;font-size:.6em;font-weight:600;padding:.55em .2em;background:#ece8e1;color:#7a776f;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%);white-space:nowrap}
.lf-page .mk-pipe span:first-child{clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%)}
.lf-page .mk-pipe span.done{background:#d9d3c8;color:#3f3c36}
.lf-page .mk-pipe span.on{background:#1b1b1a;color:#fff}
.lf-page .mk-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:.4em 1.3em 1.3em;border:1px solid #ece8e1;border-radius:.8em}
.lf-page .mk-facts div{padding:.75em .85em;border-left:1px solid #ece8e1}
.lf-page .mk-facts div:first-child{border-left:0}
.lf-page .mk-facts small{display:block;font-size:.6em;color:#7a776f}
.lf-page .mk-facts b{display:block;font-size:.8em;font-weight:600;margin-top:.3em}
.lf-page .mk-facts span{display:block;font-size:.62em;color:#2f8a5b;margin-top:.2em;font-weight:600}

@container (max-width:420px){
  .lf-page .mk-hero .mk-scale{font-size:calc(100cqw / 24)}
  .lf-page .mk-desk{display:none}
  .lf-page .mk-hero .mk-scale{min-height:0}
  .lf-page .mk-phone{position:relative;width:72%;margin:0 auto}
  .lf-page .mk-hero .mk-phone{width:72%;font-size:1em;top:auto;transform:none}
  .lf-page .mk-cal .mk-scale{font-size:calc(100cqw / 26)}
  .lf-page .mk-cal .ev{font-size:.5em}
  .lf-page .mk-types .mk-scale,.lf-page .mk-proj .mk-scale{font-size:calc(100cqw / 24)}
  .lf-page .mk-facts{grid-template-columns:1fr 1fr}
  .lf-page .mk-facts div:nth-child(3){border-left:0}
  .lf-page .mk-facts div:nth-child(n+3){border-top:1px solid #ece8e1}
}