/* 3P Soft Nature · Approved brand palette · 2026-11-09 Built from the production v13 sheet; retain the existing layout and transitions. Physical Burgundy reformer upholstery is not used as an interactive brand color. */ /* ===== v02 source: site.css ===== */ /* 3P Pilates | Shared multi-page foundation | Overridden by layout-v02.css */ :root{--cream:#F5F1E9;--white:#FCFAF6;--sage:#C4C9BE;--sage-dark:#7F8A7D;--sage-pale:#E7EBE3;--terra:#D5BCA4;--stone:#413F38;--ink:#494640;--muted:#7F8A7D;--line:#DBDAD0;--serif:NotoSerif,Georgia,serif;--sans:Inter,Arial,sans-serif;--container:1380px;--radius:18px;--ease:cubic-bezier(.22,1,.36,1)} *,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--white);color:var(--stone);font:400 15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}img,svg{display:block;max-width:100%}img{object-fit:cover}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:400}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--terra);outline-offset:5px}::selection{background:#DDE0D8;color:#494640} .container{width:min(var(--container),calc(100% - 96px));margin-inline:auto}.section{padding-block:132px}.skip-link{position:fixed;z-index:1200;left:12px;top:-100px;padding:12px 18px;background:var(--ink);color:white}.skip-link:focus{top:12px}em{font-weight:400;font-family:var(--serif)}h1,h2{font-family:var(--serif);letter-spacing:-.055em;line-height:1.17}h2{font-size:clamp(39px,4.7vw,68px)}h1{font-size:clamp(50px,5.3vw,82px)}h1 em,h2 em{color:var(--sage-dark);font-style:italic}.lead{font-size:clamp(16px,1.45vw,19px);color:#7F8A7D;max-width:570px;line-height:1.9}.eyebrow{font:600 10px/1.3 var(--sans);letter-spacing:.19em;text-transform:uppercase;display:flex;align-items:center;gap:11px;color:var(--sage-dark)}.eyebrow-line{width:24px;height:1px;background:currentColor;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:34px;min-height:52px;padding:12px 21px;border-radius:var(--ui-radius);border:1px solid transparent;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;transition:background .25s,transform .3s var(--ease),color .25s,border-color .25s}.btn svg,.text-link svg{transition:transform .25s var(--ease);flex-shrink:0}.btn:hover{transform:translateY(-2px)}.btn:hover svg,.text-link:hover svg{transform:translateX(4px)}.btn-dark{background:var(--ink);color:white}.btn-dark:hover{background:#565B52}.btn-outline{border-color:#C4C9BE;background:transparent;color:var(--stone)}.btn-outline:hover{border-color:var(--ink);background:#E5EAE2}.btn-light{background:var(--white);color:var(--ink)}.btn-light:hover{background:#E9EFE5}.text-link{display:inline-flex;align-items:center;gap:22px;border-bottom:1px solid currentColor;padding:0 0 7px;font-size:12px;font-weight:600;line-height:1.5;transition:color .2s}.text-link:hover{color:var(--sage-dark)}.content-note{font-size:11px;color:#7F8A7D;max-width:680px;margin-top:20px} /* header: no layout shifts, no oversized mobile controls */ .site-header{height:90px;position:sticky;z-index:500;top:0;background:rgba(252,250,246,.94);border-bottom:1px solid rgba(65,63,56,.075);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:height .22s,box-shadow .2s}.site-header.scrolled{height:76px;box-shadow:0 10px 35px rgba(39,39,36,.045)}.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:36px}.brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--ink)}.brand-symbol{width:43px;height:43px}.brand-type{display:flex;flex-direction:column;gap:0;line-height:1}.brand-type strong{font:400 32px/1 var(--serif);letter-spacing:-.08em}.brand-type>span{font:600 8px/1.8 var(--sans);letter-spacing:.31em;padding-left:4px}.desktop-nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.2vw,34px);padding-left:26px}.nav-link{font-size:11px;letter-spacing:.04em;font-weight:500;color:#7F8A7D;transition:color .2s;white-space:nowrap}.nav-link:hover,.nav-link.is-active{color:var(--ink)}.nav-link.is-active:after{content:"";display:block;width:4px;height:4px;background:var(--terra);border-radius:50%;margin:4px auto -8px}.header-actions{display:flex;align-items:center}.book-pill{display:flex;align-items:center;gap:13px;border:1px solid #7F8A7D;padding:9px 15px;border-radius:var(--ui-radius);font-size:11px;font-weight:600;white-space:nowrap;min-height:41px;transition:background .2s}.book-pill:hover{background:var(--sage-pale)}.book-pill svg{width:16px}.menu-toggle{display:none;background:transparent;border:0;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}.menu-toggle span{width:21px;height:1px;background:var(--stone);transform-origin:center;transition:transform .3s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.mobile-nav{display:none} /* hero */ .hero{padding-top:18px}.hero-panel{display:grid;grid-template-columns:51% 49%;height:min(710px,calc(100svh - 128px));min-height:605px;overflow:hidden;border-radius:var(--ui-radius);background:var(--cream)}.hero-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(42px,5vw,90px) 4vw 36px clamp(35px,5.4vw,86px)}.hero-copy .eyebrow{margin-top:7px}.hero-copy h1{font-size:clamp(49px,5.0vw,77px);margin-top:auto;margin-bottom:22px;max-width:720px;letter-spacing:-.066em;line-height:1.15}.hero-copy h1 em{color:var(--sage-dark)}.hero-copy>p:not(.eyebrow){max-width:425px;line-height:1.8;color:#7F8A7D;font-size:14px}.hero-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:31px}.hero-buttons .btn{gap:15px}.hero-side-note{margin-top:auto;color:#7F8A7D;font-size:9px;letter-spacing:.14em;font-weight:600;display:flex;align-items:center;gap:10px}.tiny-dot{width:6px;height:6px;border-radius:50%;background:var(--terra)}.hero-deco{position:absolute;right:50px;top:75px;font-size:46px;font-weight:300;color:#C4C9BE}.hero-visual{position:relative;overflow:hidden;background:#7F8A7D}.hero-image{height:100%;width:100%;object-position:center;transition:transform 1.6s var(--ease)}.hero-visual:hover .hero-image{transform:scale(1.03)}.hero-image-tint{pointer-events:none;position:absolute;inset:0;background:linear-gradient(to top,rgba(39,39,36,.49),transparent 48%),linear-gradient(110deg,rgba(39,39,36,.15),transparent 55%)}.hero-vertical-note{position:absolute;right:25px;top:38px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.21em;color:#fff;opacity:.88}.hero-photo-note{position:absolute;left:35px;bottom:29px;display:flex;justify-content:space-between;align-items:end;right:35px;color:#fff}.hero-photo-note span{font:500 10px/1.4 var(--sans);letter-spacing:.14em}.hero-photo-note p{font:400 21px/1.3 var(--serif);text-align:right}.hero-under{display:flex;justify-content:space-between;padding:22px 3px;align-items:center;color:#7F8A7D;font-weight:600;font-size:9px;letter-spacing:.17em}.hero-under a{font-size:11px;letter-spacing:0;color:var(--stone);font-weight:500}.hero-under a span{font-size:18px;padding-left:6px} /* manifesto */ .manifest{position:relative;display:grid;grid-template-columns:27% minmax(0,1fr);gap:35px;min-height:550px;align-items:start;padding-top:139px}.manifest-top{padding-top:23px}.manifest-copy{max-width:840px}.manifest-copy h2{font-size:clamp(48px,5.7vw,83px);letter-spacing:-.065em}.manifest-copy>p{max-width:590px;margin:34px 0 30px 0;color:#7F8A7D;font-size:16px;line-height:1.95}.manifest-symbol{position:absolute;right:5px;bottom:70px;font-size:50px;color:#DDE0D8;font-weight:300}.values-strip{background:var(--sage-pale);border-block:1px solid #DDE0D8}.values-list{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:28px;font-size:10px;font-weight:600;letter-spacing:.18em;color:#565B52}.values-list span:nth-child(even){font-size:19px;color:var(--terra)} /* sections/cards */ .section-head{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:51px}.section-head h2{margin-top:25px}.section-head>div:last-child{max-width:310px}.section-head>div:last-child p,.section-head>p{font-size:14px;line-height:1.9;color:#7F8A7D;max-width:330px;margin-bottom:24px}.section-head .text-link{margin-top:4px}.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.class-card{min-width:0;display:block}.class-image{position:relative;height:380px;border-radius:var(--ui-radius);overflow:hidden;background:var(--sage-pale)}.class-image img{width:100%;height:100%;transition:transform .7s var(--ease);object-position:center}.class-card:hover img{transform:scale(1.055)}.class-tag{position:absolute;left:16px;top:16px;background:rgba(252,250,246,.92);padding:8px 11px;font-size:9px;letter-spacing:.15em;border-radius:var(--ui-radius);font-weight:600}.class-card-two .class-image img{object-position:center}.class-card-three .class-image img{object-position:center 35%}.class-bottom{display:flex;align-items:flex-start;justify-content:space-between;padding:21px 2px 0}.class-bottom h3{font:400 23px/1.4 var(--serif);letter-spacing:-.04em}.class-bottom p{color:#7F8A7D;font-size:12px;margin-top:4px}.round-arrow{display:flex;justify-content:center;align-items:center;border:1px solid #CDD2C9;border-radius:50%;width:34px;height:34px;font-size:15px;transition:background .2s,transform .2s}.class-card:hover .round-arrow{background:var(--sage-pale);transform:translate(2px,-2px)} .studio-highlight{background:var(--cream)}.studio-high-grid{display:grid;grid-template-columns:45% 55%;min-height:670px}.studio-high-photo{height:670px;overflow:hidden;margin-block:68px -68px;border-radius:var(--ui-radius)}.studio-high-photo img{width:100%;height:100%;object-position:center}.studio-high-text{position:relative;padding:110px 40px 70px clamp(70px,7vw,125px);overflow:hidden}.studio-high-text h2{font-size:clamp(42px,5vw,70px);margin-top:40px}.studio-high-text>p:not(.eyebrow){max-width:455px;font-size:15px;color:#7F8A7D;line-height:2;margin:32px 0}.studio-corner-word{position:absolute;bottom:-55px;right:-12px;color:#DDE0D8;opacity:.43;font:italic 95px var(--serif);white-space:nowrap;pointer-events:none} .beginner-section{display:grid;grid-template-columns:60% 40%;align-items:center;gap:25px}.beginner-copy h2{margin:25px 0 27px}.beginner-copy p:not(.eyebrow){max-width:475px;color:#7F8A7D;line-height:1.95;margin-bottom:32px}.beginner-card{border-radius:var(--ui-radius);background:var(--sage-pale);height:500px;margin-left:auto;width:min(420px,95%);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}.beginner-number{font:400 170px/1 var(--serif);letter-spacing:-.15em;color:rgba(106,137,104,.13);position:absolute;top:25px;left:16px}.beginner-circle{height:176px;width:176px;display:grid;place-items:center;border:1px solid #C4C9BE;border-radius:50%;color:var(--sage-dark)}.beginner-card>p{margin-top:30px;text-align:center;font-weight:600;font-size:11px;line-height:2;letter-spacing:.15em;color:var(--sage-dark)} .bottom-cta{display:flex;align-items:center;justify-content:space-between;gap:45px;background:var(--sage);color:var(--white);padding:65px clamp(30px,6vw,95px);border-radius:var(--ui-radius);margin-bottom:130px}.bottom-cta h2{margin-top:18px;font-size:clamp(39px,4.5vw,62px)}.bottom-cta h2 em{color:#F4F0E9}.bottom-cta .eyebrow{color:#E8EDE4}.bottom-cta .btn{flex-shrink:0} /* common inner pages */ .interior-hero{background:var(--cream);padding:80px 0 100px}.interior-grid{display:grid;grid-template-columns:55% 45%;align-items:center;min-height:550px;gap:3%}.interior-copy{padding:30px 0;position:relative}.interior-copy h1{font-size:clamp(60px,6vw,89px);margin:32px 0 28px}.interior-copy .text-link{margin-top:40px}.interior-photo{height:560px;border-radius:var(--ui-radius);overflow:hidden;position:relative;background:var(--sage-pale);margin-right:7%}.interior-photo img{height:100%;width:100%;object-position:center}.photo-stamp{position:absolute;bottom:22px;left:24px;color:#fff;font-size:10px;line-height:1.6;letter-spacing:.18em;text-shadow:0 2px 6px #0006} .two-col-narrative{display:grid;grid-template-columns:47% 53%;gap:7%}.two-col-narrative h2{margin-top:22px}.two-col-narrative>div:last-child{padding:68px 0 0;max-width:585px}.two-col-narrative p{color:#7F8A7D;font-size:15px;line-height:2;margin-bottom:24px}.two-col-narrative .large-p{font:400 23px/1.72 var(--serif);color:var(--stone)} .values-detail{background:var(--sage-pale);padding:115px 0}.values-detail .eyebrow{margin-bottom:40px}.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.trio-grid article{border-top:1px solid #DDE0D8;padding-top:24px}.trio-grid span{font:400 14px/1.2 var(--serif);color:var(--sage-dark)}.trio-grid h3{font:400 35px/1.25 var(--serif);letter-spacing:-.04em;margin:40px 0 17px}.trio-grid p{font-size:14px;line-height:1.9;color:#7F8A7D;max-width:325px}.split-feature{display:grid;grid-template-columns:48% 52%;align-items:center;gap:8%}.split-feature>div:first-child{height:560px;border-radius:var(--ui-radius);overflow:hidden}.split-feature img{width:100%;height:100%}.split-feature h2{margin:29px 0}.split-feature p:not(.eyebrow){max-width:435px;line-height:2;color:#7F8A7D;margin-bottom:32px} .class-detail{display:grid;grid-template-columns:50% 50%;align-items:center;gap:8%;padding-block:70px}.class-detail:nth-child(odd){direction:rtl}.class-detail:nth-child(odd)>*{direction:ltr}.class-detail-photo{height:570px;border-radius:var(--ui-radius);overflow:hidden}.class-detail-photo img{height:100%;width:100%}.class-detail-copy{max-width:470px}.class-n{font:600 10px var(--sans);letter-spacing:.17em;color:var(--sage-dark)}.class-detail h2{margin:33px 0 6px;font-size:clamp(44px,4.8vw,67px)}.subline{font:italic 23px var(--serif);color:var(--terra);margin-bottom:35px}.class-detail-copy>p:not(.subline){color:#7F8A7D;line-height:2;margin-bottom:30px}.class-audience{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;padding:17px 0;margin-bottom:29px}.class-audience span{font-size:10px;font-weight:600;letter-spacing:.15em;color:#7F8A7D}.class-audience strong{font-weight:500;font-size:14px}.class-detail:nth-of-type(2){padding-top:120px} .studio-gallery{display:grid;grid-template-columns:1.1fr .9fr;gap:17px}.studio-gallery figure{position:relative;overflow:hidden;border-radius:var(--ui-radius);background:var(--sage-pale)}.studio-gallery img{height:100%;width:100%}.studio-gallery figcaption{position:absolute;left:24px;bottom:18px;color:#fff;font-size:10px;letter-spacing:.15em;text-shadow:0 2px 8px #0006}.gallery-a{grid-row:span 2;height:740px}.gallery-b,.gallery-c{height:361px}.studio-quote{text-align:center}.studio-quote>span{font:400 120px/.7 var(--serif);color:var(--sage-dark)}.studio-quote h2{font-size:clamp(35px,4.5vw,59px);margin:20px auto 29px}.studio-quote>p{font-size:11px;letter-spacing:.17em;text-transform:uppercase}.narrow-center{text-align:center;max-width:760px}.narrow-center .eyebrow{justify-content:center}.narrow-center h2{margin:28px 0}.narrow-center p{line-height:1.9;color:#7F8A7D;max-width:485px;margin:0 auto 30px} .first-steps>h2{margin:26px 0 50px}.first-steps .trio-grid{gap:34px}.guide-band{background:var(--cream);padding:118px 0}.guide-grid{display:grid;grid-template-columns:40% 60%;gap:10%}.guide-grid h2{margin:27px 0}.guide-grid>div:first-child>p:not(.eyebrow){max-width:330px;color:#7F8A7D}.faq-list{border-top:1px solid #D5D5CA}.faq-list details{border-bottom:1px solid #D5D5CA}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:23px 0;cursor:pointer;font-weight:500;font-size:14px;list-style:none;min-height:72px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:23px;font-weight:400;color:var(--sage-dark);transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details>p{margin:0 30px 25px 0;color:#7F8A7D;max-width:570px;font-size:14px;line-height:1.9} .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-card{padding:35px 28px 30px;background:var(--cream);border:1px solid #E6E3D9;border-radius:var(--ui-radius);display:flex;flex-direction:column;min-height:500px}.price-card:nth-child(2){background:var(--sage-pale);border-color:#D7DFD3}.price-label{font-size:10px;color:var(--sage-dark);letter-spacing:.14em;font-weight:600}.price-card h3{font:400 35px/1.2 var(--serif);margin:33px 0 9px}.price-caption{color:var(--terra);font:italic 20px/1.3 var(--serif)}.price-space{display:flex;flex-direction:column;gap:10px;border-block:1px solid #DDE0D8;margin:36px 0 22px;padding:22px 0}.price-space span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7F8A7D}.price-space strong{font:400 24px var(--serif)}.price-card>p:not(.price-caption){line-height:1.8;color:#7F8A7D;font-size:13px;margin-bottom:26px}.price-card .btn{margin-top:auto;width:100%} .contact-page{background:var(--cream);padding:90px 0 110px}.contact-grid{display:grid;grid-template-columns:58% 42%;gap:6%;align-items:center}.contact-lead{padding-right:6%}.contact-lead h1{margin:37px 0 27px}.contact-lead>p:not(.eyebrow){font-size:16px;color:#7F8A7D;max-width:430px;line-height:1.9}.contact-options{margin-top:56px;max-width:540px}.contact-method{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #CED2C7;padding:20px 0;gap:15px}.contact-method>span{font-size:10px;letter-spacing:.18em;color:var(--sage-dark);font-weight:600}.contact-method>strong{font:500 14px var(--sans)}.contact-pending{padding:27px;background:#E6EAE1;border-radius:var(--ui-radius);color:#7F8A7D}.contact-pending .small-pill{font-size:9px;letter-spacing:.18em;font-weight:600}.contact-pending p{margin-top:12px;font-size:13px;line-height:1.9}.contact-image{height:615px;position:relative;overflow:hidden;border-radius:var(--ui-radius)}.contact-image img{height:100%;width:100%}.contact-overlay{position:absolute;bottom:36px;left:33px;color:#fff;font:400 33px/1.25 var(--serif);text-shadow:0 2px 10px #0008}.contact-overlay em{color:#F6E9D7}.contact-faq{display:grid;grid-template-columns:45% 55%;gap:6%}.contact-faq h2{margin-top:25px}.legal{max-width:880px}.legal h1{margin:30px 0}.legal h2{font-size:31px;margin:45px 0 16px}.legal>p:not(.eyebrow){margin-top:18px;line-height:2;color:#7F8A7D}.legal .text-link{margin-top:32px}.notfound{text-align:center;min-height:75vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:21px}.notfound>p:first-child{color:var(--sage-dark);font-weight:600;font-size:11px;letter-spacing:.2em}.notfound>p:nth-last-child(2){max-width:420px;color:#7F8A7D}.notfound h1{font-size:clamp(48px,7vw,84px)} /* footer */ .site-footer{background:var(--ink);color:var(--cream);padding:105px 0 24px}.footer-upper{display:flex;justify-content:space-between;align-items:start;gap:60px;padding-bottom:112px}.footer-intro h2{font-size:clamp(42px,5vw,70px);margin-top:26px}.footer-intro h2 em{color:#DDE0D8}.footer-intro>p:not(.eyebrow){max-width:370px;color:#C4C9BE;font-size:13px;line-height:1.8;margin:25px 0}.footer-intro .eyebrow{color:#C4C9BE}.footer-nav-area{display:flex;gap:clamp(58px,7vw,145px);padding-top:64px}.footer-nav-area>div{display:flex;flex-direction:column;gap:17px}.footer-nav-area h3{font-size:11px;letter-spacing:.2em;margin-bottom:10px;color:#C4C9BE;font-weight:600;text-transform:uppercase}.footer-nav-area a{font-size:13px;color:#E6E9E0;transition:color .2s}.footer-nav-area a:hover{color:#DDE0D8}.footer-bottom{border-top:1px solid #565B52;display:flex;align-items:center;justify-content:space-between;padding-top:28px;gap:20px}.footer-bottom .brand{color:#F8F4EA}.footer-bottom .brand-symbol{width:35px;height:35px}.footer-bottom .brand-type strong{font-size:27px}.footer-bottom .brand-type>span{font-size:7px}.footer-bottom p,.footer-bottom>span{font-size:10px;color:#C4C9BE}.footer-bottom>span{letter-spacing:.2em} /* motion */ @media (prefers-reduced-motion:no-preference){.reveal-ready [data-reveal]{opacity:0;transform:translateY(25px);transition:opacity .75s var(--ease),transform .75s var(--ease)}.reveal-ready [data-reveal].is-visible{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* responsive */ @media(max-width:1160px){.container{width:min(var(--container),calc(100% - 64px))}.desktop-nav{gap:16px}.nav-wrap{gap:18px}.hero-copy{padding-left:5vw;padding-right:30px}.hero-copy h1{font-size:clamp(47px,5.2vw,68px)}.hero-buttons .btn{padding-inline:15px;gap:8px}.class-image{height:320px}.studio-high-text{padding-left:60px}.interior-grid{gap:0}} @media(max-width:900px){.site-header{height:72px}.site-header.scrolled{height:70px}.container{width:calc(100% - 48px)}.desktop-nav{display:none}.book-pill{margin-left:auto}.menu-toggle{display:flex;margin-left:9px}.mobile-nav{position:fixed;top:var(--nav-height,72px);left:0;right:0;bottom:0;padding:30px 24px 35px;background:var(--cream);overflow-y:auto;box-shadow:0 25px 30px #0001;flex-direction:column}.mobile-nav:not([hidden]){display:flex}.mobile-nav a{font:400 25px var(--serif);padding:14px 6px;border-bottom:1px solid #D9DCD2}.mobile-nav-foot{margin-top:auto;padding:35px 6px 0;letter-spacing:.18em;color:#7F8A7D;font-size:10px}.hero-panel{height:auto;min-height:unset;grid-template-columns:1fr 1fr}.hero-copy{min-height:620px;padding:57px 35px 30px}.hero-copy h1{font-size:clamp(45px,5.3vw,60px)}.hero-deco{right:29px;top:64px}.hero-buttons{align-items:flex-start;flex-direction:column}.hero-side-note{font-size:8px}.hero-visual{min-height:620px}.manifest{grid-template-columns:1fr;gap:20px;min-height:unset}.manifest-copy{max-width:700px}.manifest-symbol{bottom:35px}.class-grid{gap:14px}.class-image{height:280px}.class-bottom h3{font-size:20px}.studio-high-grid{grid-template-columns:45% 55%}.studio-high-photo{height:540px}.studio-high-text{padding:80px 15px 50px 46px}.studio-high-text h2{font-size:46px}.studio-corner-word{font-size:75px}.beginner-section{grid-template-columns:58% 42%}.beginner-card{height:430px}.interior-grid{grid-template-columns:1fr 1fr}.interior-hero{padding:65px 0}.interior-photo{height:470px;margin-right:0}.interior-copy h1{font-size:53px}.class-detail{gap:6%}.class-detail-photo{height:490px}.contact-image{height:510px}} @media(max-width:680px){.container{width:calc(100% - 36px)}.section{padding-block:88px}.site-header{height:69px}.brand-symbol{width:35px;height:35px}.brand-type strong{font-size:28px}.brand-type>span{font-size:7px}.nav-wrap{gap:6px}.book-pill{min-height:37px;padding:7px 12px;font-size:10px}.book-pill svg{width:14px}.menu-toggle{width:39px;margin-left:4px}.mobile-nav{top:69px}.hero{padding-top:8px}.hero-panel{display:flex;flex-direction:column-reverse;border-radius:var(--ui-radius);min-height:unset}.hero-visual{height:320px;min-height:unset;flex:none}.hero-image{object-position:center 45%}.hero-image-tint{background:linear-gradient(to top,#31322B33,transparent 50%)}.hero-vertical-note{right:15px;top:18px;font-size:8px}.hero-photo-note{left:19px;bottom:18px;right:20px}.hero-photo-note p{font-size:16px}.hero-copy{min-height:430px;padding:30px 25px 25px}.hero-copy h1{font-size:clamp(46px,10vw,65px);line-height:1.13;margin:24px 0 15px}.hero-copy h1 br:nth-of-type(2){display:none}.hero-deco{top:28px;right:23px;font-size:28px}.hero-copy>p:not(.eyebrow){font-size:13px;max-width:330px;line-height:1.75}.hero-buttons{margin-top:20px;flex-direction:row;gap:9px}.hero-buttons .btn{font-size:11px;min-height:46px;padding:10px 13px}.hero-side-note{margin-top:28px}.hero-under{padding:16px 3px;font-size:8px}.manifest{padding-top:85px}.manifest-top{padding:0}.manifest-copy h2{font-size:clamp(45px,10vw,62px)}.manifest-copy>p{margin:24px 0 24px;font-size:14px}.manifest-symbol{font-size:35px;bottom:15px}.values-list{flex-wrap:wrap;justify-content:center;gap:13px 15px;text-align:center;font-size:9px;padding:22px 0}.values-list span:nth-child(4){display:none}.section-head{display:block;margin-bottom:28px}.section-head h2{margin-top:18px}.section-head>div:last-child{max-width:100%;margin-top:23px}.section-head>div:last-child p,.section-head>p{margin:22px 0 0;max-width:490px}.class-grid{grid-template-columns:1fr;gap:34px}.class-image{height:330px}.class-bottom{padding-top:14px}.class-bottom h3{font-size:25px}.studio-high-grid{grid-template-columns:1fr}.studio-high-photo{height:390px;margin:0;border-radius:var(--ui-radius)}.studio-high-text{padding:70px 0 100px}.studio-high-text h2{font-size:clamp(42px,9vw,61px);margin-top:28px}.studio-high-text>p:not(.eyebrow){font-size:14px;margin:24px 0}.studio-corner-word{font-size:60px;bottom:-25px}.beginner-section{grid-template-columns:1fr;gap:45px}.beginner-copy h2{margin:20px 0}.beginner-copy p:not(.eyebrow){font-size:14px}.beginner-card{width:100%;height:360px;max-width:420px;margin-inline:auto}.beginner-number{font-size:145px}.bottom-cta{padding:43px 25px;margin-bottom:84px;display:block;border-radius:var(--ui-radius)}.bottom-cta .btn{margin-top:30px}.bottom-cta h2{font-size:clamp(38px,8.5vw,52px)}.interior-hero{padding:55px 0 68px}.interior-grid{grid-template-columns:1fr;gap:40px}.interior-copy{padding:0}.interior-copy h1{font-size:clamp(53px,11vw,72px);margin:24px 0}.interior-copy .text-link{margin-top:28px}.interior-photo{height:370px;margin:0 20px 0 0}.two-col-narrative{display:block}.two-col-narrative>div:last-child{padding:35px 0 0}.two-col-narrative .large-p{font-size:20px}.two-col-narrative p{font-size:14px}.values-detail{padding:78px 0}.trio-grid{grid-template-columns:1fr;gap:25px}.trio-grid article{padding-top:17px}.trio-grid h3{margin:21px 0 10px;font-size:30px}.split-feature{grid-template-columns:1fr;gap:45px}.split-feature>div:first-child{height:350px}.split-feature h2{margin:17px 0}.class-detail{display:flex;flex-direction:column;gap:32px;padding-block:43px}.class-detail:nth-child(odd){direction:ltr}.class-detail-photo{width:100%;height:380px}.class-detail-copy{width:100%}.class-detail h2{margin:20px 0 8px}.class-detail:nth-of-type(2){padding-top:60px}.studio-gallery{grid-template-columns:1fr;gap:14px}.gallery-a{grid-row:auto;height:460px}.gallery-b,.gallery-c{height:330px}.studio-quote h2{font-size:clamp(31px,7.5vw,47px)}.guide-band{padding:85px 0}.guide-grid{display:block}.guide-grid .faq-list{margin-top:37px}.first-steps>h2{margin:20px 0 35px}.price-grid{grid-template-columns:1fr;gap:14px}.price-card{min-height:420px}.contact-page{padding:65px 0 75px}.contact-grid{display:block}.contact-lead{padding:0}.contact-lead h1{font-size:clamp(53px,10vw,67px);margin:22px 0}.contact-lead>p:not(.eyebrow){font-size:14px}.contact-options{margin-top:28px}.contact-image{margin-top:40px;height:450px}.contact-faq{display:block}.contact-faq>.faq-list{margin-top:35px}.legal h1{font-size:clamp(49px,10vw,70px)}.footer-upper{display:block;padding-bottom:70px}.site-footer{padding:80px 0 20px}.footer-nav-area{padding-top:68px;gap:80px}.footer-bottom{flex-wrap:wrap}.footer-bottom>span{display:none}} @media(max-width:390px){.hero-copy{padding:27px 19px 24px}.hero-copy h1{font-size:44px}.hero-buttons .btn{font-size:10px;padding-inline:10px}.hero-under>span{max-width:180px}.book-pill{padding-inline:10px}.footer-nav-area{gap:55px}.contact-image{height:370px}} @media (prefers-reduced-motion:no-preference){[data-reveal].reveal-pending{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}[data-reveal].reveal-pending.reveal-shown{opacity:1;transform:none}} @media print{[data-reveal]{opacity:1!important;transform:none!important}.site-header{position:static}.mobile-nav{display:none!important}} /* ===== v02 source: layout-v02.css ===== */ /* 3P Pilates | v02 visual direction: reference-based editorial layout Soft, accessible, welcoming. This is layered on the existing multi-page design system. */ @font-face{font-family:"Lato Local";src:url("/assets/fonts/Lato-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Lato Local";src:url("/assets/fonts/Lato-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Lato Local";src:url("/assets/fonts/Lato-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} :root{--sans:"Lato Local",Arial,sans-serif;--serif:"Lato Local",Arial,sans-serif;--white:#FFFDFC;--ink:#494640;--sage:#C4C9BE;--sage-dark:#7F8A7D;--stone:#413F38;--cream:#F5F1E9;--line:#E6E5DE;--container:1300px;--radius:12px} html{scroll-padding-top:93px} body{background:#fff;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65} h1,h2,h3,em,.brand-type strong{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.035em} h1,h2{line-height:1.13}h1 em,h2 em{font-style:normal;font-weight:700;color:var(--sage-dark)} h1{font-size:clamp(44px,5vw,70px)}h2{font-size:clamp(36px,3.7vw,54px)} .eyebrow{letter-spacing:.13em;font-size:11px;font-weight:700}.container{width:min(var(--container),calc(100% - 72px))} /* The header remains universal across all pages. */ .site-header{height:77px;background:rgba(255,255,255,.96);border-bottom:0;box-shadow:none} .site-header.scrolled{height:71px;box-shadow:0 6px 26px #31322B0b} .nav-wrap{gap:20px}.brand{gap:7px}.brand-symbol{width:39px;height:39px} .brand-type strong{font-size:29px;font-weight:700;letter-spacing:-.07em}.brand-type>span{font-size:8px;font-weight:700;letter-spacing:.3em} .desktop-nav{gap:clamp(12px,1.8vw,29px);padding:0}.nav-link{font-size:11.5px;font-weight:500;letter-spacing:0;color:#565B52;transition:color .2s ease} .nav-link.is-active{color:#494640}.nav-link.is-active:after{content:none} .book-pill{min-height:38px;border:1px solid #DDE0D8;border-radius:var(--ui-radius);padding:8px 14px;font-size:11px;font-weight:700;gap:10px} .book-pill:hover{background:#E6ECE5}.mobile-nav{background:#fff}.mobile-nav a{font-family:var(--sans);font-size:24px;font-weight:500} .btn,.text-link{font-family:var(--sans)}.btn{font-weight:700} /* Home: hero text overlays one cinematic photographic canvas, rather than a split hero. */ /* Spacing is editorial: large quiet margins, then controlled highlights. */ /* Sage classes block exactly follows the reference's centered title + three picture cards. */ /* Sessions: asymmetric title, quiet photo, clean list. */ /* Prices without fictional fees: intentionally calm and transparent. */ /* Contact: image and invitation side-by-side. */ /* Consistency: inner pages retain multi-page content but now share the new warm sans typographic system. */ .interior-copy h1,.interior-copy h1 em,.contact-lead h1,.legal h1,.notfound h1{font-weight:700;letter-spacing:-.04em} .interior-copy h1{font-size:clamp(48px,5.2vw,71px)}.interior-copy p.lead{line-height:1.7} .interior-photo,.class-detail-photo,.studio-gallery img{border-radius:var(--ui-radius)} .interior-hero{background:#fbfaf6}.interior-copy{color:#494640} .section-head h2{font-size:clamp(37px,3.7vw,54px)}.class-bottom h3,.class-detail h2,.trio-grid h3{font-weight:700} /* Footer stays clear, legible and calm. */ .site-footer{background:#494640;padding:84px 0 20px}.footer-intro h2{font-size:clamp(42px,4.7vw,67px);letter-spacing:-.035em} .footer-intro h2 em{color:#DDE0D8}.footer-intro .eyebrow{font-size:10px}.footer-nav-area h3{font-size:11px} .footer-bottom .brand-type strong{font-size:26px} @media(max-width:1160px){ .container{width:calc(100% - 52px)} } @media(max-width:900px){ .site-header{height:70px}.site-header.scrolled{height:69px}.mobile-nav{top:70px} } @media(max-width:680px){ .container{width:calc(100% - 30px)}.site-header{height:65px}.site-header.scrolled{height:65px}.mobile-nav{top:65px} .nav-wrap{gap:6px}.brand-symbol{width:33px;height:33px}.brand-type strong{font-size:27px} .book-pill{min-height:38px;padding:7px 10px;font-size:10px} .interior-hero{padding:55px 0 68px}.interior-copy h1{font-size:clamp(44px,10vw,60px)} .site-footer{padding:74px 0 22px} } /* ===== v02 source: width-luess-v02-20261107.css ===== */ /* 3P Pilates v02 - LUESS YAPI inspired balanced desktop container. * Only constrains the shared outer container; no typography, imagery, * text, component layouts, spacing inside sections, or mobile styles changed. * At 1920px: 1600px content / 160px gutters each side. * At narrower desktop widths: 26px minimum gutters each side. * Versioned filename avoids cached full-bleed CSS overrides. */ @media (min-width: 1161px) { .container { width: min(1600px, calc(100% - 52px)); } } @media (min-width: 681px) and (max-width: 1160px) { .container { width: calc(100% - 52px); } } /* The original v02 mobile rules remain untouched. */ /* ===== v02 source: spacing-system-v02-20261107.css ===== */ /* 3P Pilates v02 | Consistent vertical spacing Applied AFTER site.css, layout-v02.css and the approved LUESS-width sheet. No changes to layout structure, text, typography, imagery, color or container width. Scale: desktop 104 / tablet 84 / phone 64 px section rhythm. The inter-section rhythm is split evenly across touching interior-page sections. */ :root { --space-rhythm: 104px; --space-panel: 64px; --space-block: 40px; --space-heading: 24px; --space-copy: 16px; } /* Home: adjacent sections share one outside rhythm regardless of their content. */ /* Home: predictable visual hierarchy within the photographic panels. */ /* Inner pages: two neighboring sections add up to ONE rhythm (52+52 on desktop), instead of stacking unrelated 70, 115 and 132 px padding values. */ main > .section, main > .values-detail, main > .guide-band { padding-block: calc(var(--space-rhythm) / 2); } main > .interior-hero, main > .contact-page { padding-top: var(--space-rhythm); padding-bottom: calc(var(--space-rhythm) / 2); } main > .class-detail.section:nth-of-type(2) { padding-top: calc(var(--space-rhythm) / 2); } main > .bottom-cta.section { padding-block: var(--space-panel); margin-bottom: calc(var(--space-rhythm) / 2); } main > .section .section-head { margin-bottom: var(--space-block); } .first-steps > h2 { margin-top: var(--space-heading); margin-bottom: var(--space-block); } .values-detail .eyebrow { margin-bottom: var(--space-block); } .narrow-center h2, .split-feature h2, .guide-grid h2 { margin-block: var(--space-heading); } .class-detail h2 { margin-top: var(--space-heading); } /* Footer has one consistent top/bottom internal scale as other site panels. */ .site-footer { padding-top: var(--space-panel); } .footer-upper { padding-bottom: var(--space-panel); } .footer-nav-area { padding-top: var(--space-block); } @media (max-width: 1160px) { :root { --space-rhythm: 84px; --space-panel: 52px; --space-block: 32px; } } @media (max-width: 680px) { :root { --space-rhythm: 64px; --space-panel: 40px; --space-block: 24px; --space-heading: 20px; --space-copy: 14px; } .footer-nav-area { padding-top: var(--space-block); } } /* ===== v02 source: design-qa-v02.css ===== */ /* 3P Pilates v02 | Design consistency and responsive QA (2026-11-07) Retains the client's approved desktop width, typography, imagery, page content, hierarchy, section order, and visual brand direction. */ /* Grid integrity: percentage columns plus percentage gaps previously exceeded 100%. minmax(0,fr) keeps the existing visual split while accounting for gap automatically. */ .two-col-narrative { grid-template-columns: minmax(0,47fr) minmax(0,53fr); } .split-feature { grid-template-columns: minmax(0,48fr) minmax(0,52fr); } .guide-grid { grid-template-columns: minmax(0,40fr) minmax(0,60fr); } .contact-grid { grid-template-columns: minmax(0,58fr) minmax(0,42fr); } .contact-faq { grid-template-columns: minmax(0,45fr) minmax(0,55fr); } .class-detail { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .interior-grid { grid-template-columns: minmax(0,55fr) minmax(0,45fr); } .two-col-narrative > *, .split-feature > *, .guide-grid > *, .contact-grid > *, .contact-faq > *, .class-detail > *, .interior-grid > *, .footer-upper > *, .footer-nav-area > * { min-width:0; } .trio-grid {grid-template-columns: repeat(3,minmax(0,1fr));} .faq-list, .faq-list details, .faq-list summary { min-width:0; } .faq-list summary { overflow-wrap: anywhere; } /* One predictable touch and focus system, with no decorative hit-area overlays. */ .book-pill {min-height:44px;} .menu-toggle {min-width:44px;min-height:44px;} :where(a,button,summary):focus-visible { outline:2px solid #D5BCA4;outline-offset:4px; } :where(a,button,summary):focus:not(:focus-visible) {outline:none;} :where(.v2-plan, .v2-class-tile, .class-card) {min-width:0;} /* Legibility of fine captions on light backgrounds; core palette stays unchanged. */ .content-note {color:#565B52;} /* Header and mobile drawer align even while sticky header changes height. */ @media (max-width:900px) { .mobile-nav { top:var(--nav-height,70px); bottom:auto; height:calc(100dvh - var(--nav-height,70px)); max-height:calc(100dvh - var(--nav-height,70px)); overscroll-behavior:contain; padding-bottom:max(24px,env(safe-area-inset-bottom)); } .mobile-nav a {min-height:48px;display:flex;align-items:center;} .nav-wrap > * {min-width:0;} .header-actions {flex-shrink:0;} } @media (max-width:680px) { /* Keep original phone stacks: override the desktop grid correction. */ .two-col-narrative, .split-feature, .guide-grid, .contact-grid, .contact-faq, .interior-grid {grid-template-columns:1fr;} .class-detail {grid-template-columns:1fr;} .trio-grid {grid-template-columns:1fr;} .book-pill {min-height:44px;} .site-header .brand {flex-shrink:0;} } @media (max-width:360px) { .mobile-nav {padding-inline:16px;} .brand-type strong {font-size:25px;} .book-pill {padding-inline:9px;} } /* ===== v02 visual + motion polish | 2026-11-07 ===== * Scope: internal-page motion and interactions, not page structure, copy, colors, * font family, approved 1600px layout, or section spacing. * Entire site remains usable without scripting and with reduced motion. */ :root { --motion-duration: .62s; --motion-travel: 18px; --detail-radius: 12px; } :where(.interior-photo, .class-detail-photo, .split-feature > div:first-child, .studio-gallery figure) { border-radius: var(--ui-radius); } /* Explicit hidden-state rule: author styles must not override native [hidden]. */ .mobile-nav[hidden] { display:none !important; } /* Comfortable keyboard target when jumping to landmarks under sticky header. */ #main { scroll-margin-top: 84px; } @media (prefers-reduced-motion: no-preference) { [data-reveal].reveal-pending { opacity:0; transform:translate3d(0,var(--motion-travel),0); transition:opacity var(--motion-duration) var(--ease),transform var(--motion-duration) var(--ease); } [data-reveal].reveal-pending.reveal-shown { opacity:1; transform:none; } @media (hover:hover) and (pointer:fine) { .class-detail-photo img, .split-feature > div:first-child img, .studio-gallery figure img { transition:transform .75s var(--ease); } .class-detail-photo:hover img, .split-feature > div:first-child:hover img, .studio-gallery figure:hover img { transform:scale(1.025); } } } @media (max-width:680px) { :root { --motion-travel: 12px; --motion-duration: .5s; } #main {scroll-margin-top:70px;} } @media (prefers-reduced-motion: reduce) { [data-reveal].reveal-pending, [data-reveal].reveal-pending.reveal-shown { opacity:1 !important; transform:none !important; transition:none !important; } .class-detail-photo img, .split-feature img, .studio-gallery img { transform:none !important; transition:none !important; } } /* ===== 3P v02 | soft multipage navigation + gentle interaction ===== * Progressive enhancement: document-to-document View Transitions for supported * browsers, small JS fallback elsewhere. No router or fetch interception on * browsers with native cross-document transition support. * 2026-11-07: all routes inherit this one stylesheet. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root) { animation: 150ms ease-in both threep-vt-out; } ::view-transition-new(root) { animation: 245ms cubic-bezier(.22,.61,.36,1) both threep-vt-in; } @keyframes threep-vt-out { to { opacity: 0; } } @keyframes threep-vt-in { from { opacity: 0; transform: translate3d(0, 5px, 0); } to { opacity: 1; transform: none; } } /* Fallback is deliberately scoped to non-native browsers by JavaScript. */ html.threep-fallback main, html.threep-fallback .site-footer { transition: opacity 155ms ease, transform 155ms ease; } html.threep-fallback.threep-enter main, html.threep-fallback.threep-enter .site-footer { animation: 235ms cubic-bezier(.22,.61,.36,1) both threep-fade-enter; } html.threep-fallback.threep-leaving main, html.threep-fallback.threep-leaving .site-footer { animation: none; opacity: .15; transform: translate3d(0, -4px, 0); pointer-events: none; } @keyframes threep-fade-enter { from { opacity: .05; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } } /* The drawer opens gently; layout and the sticky header stay unchanged. */ @media (max-width: 900px) { .mobile-nav:not([hidden]) { animation: 190ms cubic-bezier(.22,.61,.36,1) both threep-drawer-in; } @keyframes threep-drawer-in { from { opacity: 0; transform: translate3d(0, 7px, 0); } to { opacity: 1; transform: none; } } } } /* Reduced-motion keeps immediate navigation, no opacity-hidden content. */ @media (prefers-reduced-motion: reduce) { html.threep-fallback main,html.threep-fallback .site-footer, html.threep-fallback.threep-leaving main, html.threep-fallback.threep-leaving .site-footer { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } /* Matching subtle motion rhythm across the homepage and all inner pages. */ :root { --motion-duration: .52s; --motion-travel: 12px; } @media (max-width: 680px) { :root { --motion-duration: .42s; --motion-travel: 8px; } } /* Gently expand FAQs where intrinsic-size transitions are available; unsupported browsers retain the accessible native details behavior. */ @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) { .faq-list details { interpolate-size: allow-keywords; } .faq-list details::details-content { height: 0; overflow: hidden; transition: height 260ms cubic-bezier(.22,.61,.36,1), content-visibility 260ms allow-discrete; } .faq-list details[open]::details-content { height: auto; } } } /* =========================================================== 3P Content Architecture | v02 Smooth compatible Original spacing, font, colors and section layout preserved. =========================================================== */ .class-jump{display:flex;align-items:center;flex-wrap:wrap;gap:12px; padding-block:24px; border-top:1px solid var(--line);border-bottom:1px solid var(--line); margin-block:0 24px} .class-jump-label{font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--sage-dark);margin-right:auto;white-space:nowrap} .class-jump a{display:inline-flex;align-items:center;gap:9px;font-size:11px;color:var(--sage-dark);border:1px solid #D7DBD1;padding:12px 16px;min-height:44px;border-radius:var(--ui-radius);transition:background-color .25s var(--ease),border-color .25s var(--ease)} .class-jump a strong{color:var(--ink);font-size:12px;font-weight:600} .class-jump a:hover,.class-jump a:focus-visible{background:var(--sage-pale);border-color:var(--sage-dark)} .class-detail[id]{scroll-margin-top:110px} .class-guide{margin-top:0} .concept-label{font-size:12px;line-height:1.65;letter-spacing:.01em;color:#565B52;padding:12px 16px;margin:0 0 22px;border-left:2px solid var(--sage);background:var(--sage-pale);max-width:760px} .package-choice .trio-grid{margin-top:32px} .package-choice h2{margin-top:24px} .contact-method strong{color:#7F8A7D;font-weight:400;text-align:right} @media (max-width:900px){.class-jump-label{flex-basis:100%}.class-jump{gap:10px;padding-block:18px}.class-jump a{flex:1 1 170px;justify-content:center}} @media (max-width:480px){.class-jump a{flex:1 1 100%;justify-content:flex-start}.class-jump a strong{font-size:12px}.contact-method{flex-wrap:wrap}.contact-method>strong{font-size:12px}} @media (prefers-reduced-motion:reduce){.class-jump a{transition:none}} /* 3P Pilates — editorial layout inspired by supplied visual reference. * 2026-11-07. Keeps original 3P brand, local Lato fonts, MPA transitions. * Desktop content max 1600px; no forced edge-to-edge section grid. */ :root{--ed-canvas:#FBFAF7;--ed-ink:#494640;--ed-sage:#C4C9BE;--ed-green:#494640;--ed-line:#e6e5dd;--ed-gap:18px;--ed-ease:cubic-bezier(.2,.7,.2,1)} html{scroll-padding-top:95px} body{background:var(--ed-canvas);color:var(--ed-ink);overflow-x:clip} .container{width:min(1600px,calc(100% - clamp(36px,10vw,320px)));margin-inline:auto} .site-header{height:90px;background:rgba(251,250,247,.94);border-bottom:1px solid #e9e9e1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .site-header.scrolled{height:76px;background:rgba(251,250,247,.97)} .nav-wrap{gap:22px} .brand-type strong{font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:-.065em} .brand-type>span{letter-spacing:.2em} .desktop-nav{display:flex;align-items:center;justify-content:center;gap:2px;padding:5px;background:#31322Bde;border:1px solid #e7eae3;border-radius:var(--ui-radius);margin-left:auto;margin-right:auto} .nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 17px;color:#565B52;font-size:12px;font-weight:700;border-radius:var(--ui-radius);white-space:nowrap;transition:background .25s,color .25s} .nav-link:hover,.nav-link.is-active{color:#494640;background:#fff} .nav-link.is-active:after{display:none} .book-pill{background:var(--ed-green);color:#fff;border-color:var(--ed-green);min-height:44px;padding:10px 19px;font-size:12px;font-weight:700;gap:22px;transition:background .25s,transform .25s} .book-pill:hover{background:#565B52;color:#fff;transform:translateY(-1px)} .header-actions{gap:4px} .mobile-nav[hidden]{display:none!important} .mobile-nav{background:var(--ed-canvas)} .mobile-nav a{font-size:23px;font-weight:600;color:var(--ed-ink)} .site-footer .container{max-width:1600px} /* A reference-like image-backed hero with the main nav floating over it. */ .page-home .site-header{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;margin-bottom:-90px;position:sticky;color:#fff} .page-home .site-header:not(.scrolled) .brand{color:#fff} .page-home .site-header:not(.scrolled) .nav-link{color:#fff} .page-home .site-header:not(.scrolled) .nav-link:hover,.page-home .site-header:not(.scrolled) .nav-link.is-active{color:#494640;background:#fff} .page-home .site-header:not(.scrolled) .desktop-nav{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .page-home .site-header:not(.scrolled) .book-pill{background:#fdfcf7;border-color:#fdfcf7;color:#494640} .page-home .site-header:not(.scrolled) .book-pill:hover{background:#e5eae3} .page-home .site-header.scrolled{background:rgba(251,250,247,.97);border-bottom:1px solid #e9e9e1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--ed-ink);box-shadow:0 7px 25px #31322B0c} .page-home .site-header:not(.scrolled) .menu-toggle span{background:#fff} .ed-hero{padding-top:18px} .ed-hero-media{height:clamp(620px,47vw,790px);background:#7F8A7D;position:relative;border-radius:var(--ui-radius);overflow:hidden;isolation:isolate} .ed-hero-img{width:100%;height:100%;object-fit:cover;object-position:center 58%;position:absolute;inset:0;z-index:-2} .ed-hero-gradient{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(39,39,36,.65) 0%,rgba(39,39,36,.46) 44%,rgba(39,39,36,.2) 72%,rgba(39,39,36,.36) 100%),linear-gradient(0deg,rgba(39,39,36,.48),transparent 38%)} .ed-hero-eyebrow{position:absolute;top:134px;left:clamp(28px,3.6vw,63px);display:flex;align-items:center;gap:14px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.19em;z-index:1} .ed-little-sun{font-size:23px;color:#f2e5c1;line-height:1}.ed-hero-line{width:25px;height:1px;background:#ffffff8a} .ed-hero-copy{position:absolute;left:clamp(28px,4.2vw,74px);bottom:clamp(54px,6vw,100px);z-index:1;color:#fff;max-width:min(745px,64%)} .ed-kicker,.ed-overline{font-size:10px;font-weight:700;letter-spacing:.17em;line-height:1.5}.ed-kicker{color:#F0F0E9;margin-bottom:22px} .ed-hero-copy h1{font-family:var(--sans);font-size:clamp(54px,5.7vw,95px);line-height:1.04;letter-spacing:-.064em;font-weight:700;color:#fff;margin:0 0 21px} .ed-hero-copy h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.064em;color:#faf5e8} .ed-hero-copy>p:not(.ed-kicker){font-size:clamp(14px,1.12vw,17px);line-height:1.75;color:#f5f3eb;max-width:455px} .ed-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px} .ed-button{display:inline-flex;min-height:46px;padding:11px 21px;align-items:center;justify-content:center;gap:25px;border-radius:var(--ui-radius);font-size:13px;font-weight:700;line-height:1.2;transition:transform .3s var(--ed-ease),background .3s,color .3s;white-space:nowrap} .ed-button:hover{transform:translateY(-2px)} .ed-button-primary{background:#C4C9BE;color:#494640}.ed-button-primary:hover{background:#DDE0D8} .ed-button-ghost{background:#fff;color:#494640}.ed-button-ghost:hover{background:#eeeae0} .ed-button-dark{background:#494640;color:#fff;gap:30px}.ed-button-dark:hover{background:#565B52} .ed-hero-aside{position:absolute;right:clamp(28px,3.6vw,60px);bottom:clamp(55px,5vw,82px);width:235px;z-index:1;padding:11px 11px 17px;background:#fffef9;border-radius:var(--ui-radius);color:#494640;box-shadow:0 12px 42px #31322B38} .ed-hero-aside img{height:128px;width:100%;object-fit:cover;border-radius:var(--ui-radius);object-position:center 50%} .ed-aside-tag{font-size:9px;letter-spacing:.14em;color:#7F8A7D;font-weight:700;margin:15px 4px 3px} .ed-hero-aside h2{font-family:var(--sans);font-size:18px;letter-spacing:-.04em;line-height:1.2;font-weight:700;margin:0 4px 15px} .ed-hero-aside a{display:flex;justify-content:space-between;align-items:center;margin:0 4px;font-size:11px;color:#7F8A7D;font-weight:700;border-top:1px solid #e4e7df;padding-top:10px} .ed-scroll-indicator{position:absolute;right:clamp(30px,3.6vw,60px);top:134px;color:#fff;font-size:10px;letter-spacing:.14em;font-weight:700;display:flex;gap:14px;align-items:center}.ed-scroll-indicator span{font-size:18px} /* Intro / three editorial cards echo the reference's exact hierarchy */ .ed-intro{padding-top:104px;padding-bottom:48px;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,.75fr);align-items:end;gap:9vw} .ed-overline{color:#7F8A7D;margin-bottom:19px} .ed-intro h2,.ed-studio h2,.ed-steps h2,.ed-final-cta h2{font-family:var(--sans);font-weight:700;letter-spacing:-.065em;line-height:1.14;color:var(--ed-ink)} .ed-intro h2{font-size:clamp(40px,4.4vw,74px)} .ed-intro h2 em,.ed-services h2 em,.ed-studio h2 em,.ed-steps h2 em,.ed-final-cta h2 em,.ed-story-paper h3 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.06em;color:#7F8A7D} .ed-intro-desc{padding-bottom:8px}.ed-intro-desc p{font-size:15px;line-height:1.85;color:#7F8A7D;max-width:355px;margin-bottom:20px} .ed-editorial-grid{display:grid;grid-template-columns:1.28fr .92fr .84fr;gap:var(--ed-gap);align-items:stretch;padding-bottom:115px} .ed-story-photo,.ed-story-paper,.ed-story-deep{position:relative;min-height:405px;border-radius:var(--ui-radius);overflow:hidden} .ed-story-photo{background:#d5c7af}.ed-story-photo>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .7s var(--ed-ease)}.ed-story-photo:hover>img{transform:scale(1.045)} .ed-floating-note{position:absolute;left:16px;right:16px;bottom:16px;padding:13px;display:flex;gap:13px;align-items:center;border-radius:var(--ui-radius);background:#fffefa;box-shadow:0 6px 22px #2e2d2a19} .ed-note-icon{display:grid;place-items:center;flex:0 0 45px;height:45px;border-radius:var(--ui-radius);background:#F0F0E9;color:#7F8A7D;font-size:22px}.ed-floating-note strong{display:block;font-size:13px;color:#494640}.ed-floating-note div>span{display:block;color:#7F8A7D;font-size:11px;margin-top:2px} .ed-story-paper{background:#fff;border:1px solid #efeee8;padding:clamp(22px,2.6vw,43px);display:flex;flex-direction:column;justify-content:flex-start} .ed-story-symbol{height:43px;width:43px;border-radius:50%;display:grid;place-items:center;background:#e9efe3;color:#7F8A7D;font-size:23px;margin-bottom:42px} .ed-story-paper h3{font-family:var(--sans);font-weight:700;font-size:clamp(24px,2.45vw,40px);letter-spacing:-.05em;line-height:1.2;margin-bottom:15px} .ed-story-paper>p:not(.ed-overline){font-size:13px;color:#7F8A7D;line-height:1.8;max-width:330px} .ed-story-quote{display:flex;justify-content:space-between;align-items:center;gap:13px;border-top:1px solid #e5e8e0;margin-top:auto;padding-top:17px;font-size:11px;color:#7F8A7D}.ed-story-quote a{width:34px;height:34px;background:#f0f4ed;display:grid;place-items:center;border-radius:50%;font-size:18px} .ed-story-deep{background:#494640;padding:clamp(20px,2.1vw,32px);color:#fff;display:flex;flex-direction:column} .ed-deep-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em;font-weight:700;color:#e5eee5;margin-bottom:15px}.ed-deep-head a{font-size:20px} .ed-deep-photos{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:26px}.ed-deep-photos img{height:146px;width:100%;object-fit:cover;border-radius:var(--ui-radius)} .ed-story-deep h3{font-size:24px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.04em;margin-bottom:9px} .ed-story-deep p{font-size:12px;line-height:1.6;color:#d8e2d7;margin-bottom:18px} .ed-deep-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.ed-deep-tags span{border:1px solid #7F8A7D;border-radius:var(--ui-radius);padding:6px 9px;font-size:10px;color:#d8e1d6} /* Discovery: centered heading, functional filters, four spacious tiles */ .ed-services{padding-bottom:116px} .ed-services-heading{text-align:center;max-width:800px;margin:0 auto 31px}.ed-services-heading h2{font-family:var(--sans);font-weight:700;font-size:clamp(37px,3.9vw,63px);letter-spacing:-.06em;line-height:1.15;margin-bottom:14px} .ed-services-heading>p:last-child{font-size:15px;color:#7F8A7D} .ed-service-filter{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 auto 37px} .ed-filter{border:1px solid #e4e6dd;background:#fffdfa;border-radius:var(--ui-radius);padding:11px 19px;min-height:44px;color:#565B52;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s} .ed-filter:hover{background:#e9eee6}.ed-filter.is-selected{background:var(--ed-green);border-color:var(--ed-green);color:#fff} .ed-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}.ed-service-card{min-width:0;display:block}.ed-service-card[hidden]{display:none!important} .ed-service-image{position:relative;aspect-ratio:0.94;overflow:hidden;border-radius:var(--ui-radius)}.ed-service-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ed-ease)}.ed-service-card:hover img{transform:scale(1.055)} .ed-soft{background:#dfd0b5}.ed-sage{background:#DDE0D8}.ed-peach{background:#F0DFAF}.ed-cream{background:#e5dfd1} .ed-card-icon{position:absolute;right:14px;top:14px;background:#fffef7;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:20px} .ed-service-card>p{font-size:10px;letter-spacing:.1em;color:#7F8A7D;font-weight:700;margin-top:18px}.ed-service-card h3{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.03em;margin:6px 0}.ed-service-card>span{font-size:12px;line-height:1.6;color:#7F8A7D} .ed-services-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--ed-line);margin-top:43px;padding-top:22px}.ed-services-bottom p{font-size:12px;color:#7F8A7D}.ed-inline-link{font-size:13px;font-weight:700;border-bottom:1px solid #C4C9BE;padding-bottom:7px} /* Studio editorial split */ .ed-studio{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,105px);align-items:center;padding-bottom:120px} .ed-studio-visual{position:relative;border-radius:var(--ui-radius);overflow:hidden;min-width:0}.ed-studio-visual img{height:535px;width:100%;object-fit:cover} .ed-studio-label{position:absolute;bottom:18px;left:18px;background:#fffef9;padding:14px 20px;border-radius:var(--ui-radius)}.ed-studio-label span{display:block;font-size:9px;letter-spacing:.14em;color:#7F8A7D;font-weight:700}.ed-studio-label strong{font-size:16px;display:block;margin-top:4px} .ed-studio h2{font-size:clamp(40px,4.5vw,69px);margin-bottom:20px}.ed-studio-copy>p:not(.ed-overline){font-size:16px;color:#7F8A7D;line-height:1.85;max-width:490px;margin-bottom:26px} .ed-steps{padding-bottom:115px}.ed-steps-title{text-align:center;margin-bottom:37px}.ed-steps h2{font-size:clamp(37px,4vw,60px)} .ed-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.ed-steps-grid>div{border-top:1px solid #DDE0D8;background:#f2f4ee;border-radius:var(--ui-radius);padding:28px 25px;min-height:190px}.ed-steps-grid span{display:block;color:#7F8A7D;font-size:12px;font-weight:700;margin-bottom:26px}.ed-steps-grid h3{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:10px}.ed-steps-grid p{font-size:13px;color:#7F8A7D;line-height:1.7} .ed-final-cta{padding:65px 75px;margin-bottom:104px;background:#C4C9BE;border-radius:var(--ui-radius);display:flex;align-items:center;justify-content:space-between;gap:45px;color:#fff} .ed-final-cta .ed-overline{color:#eef4e8}.ed-final-cta h2{font-size:clamp(38px,4vw,62px);color:#fff}.ed-final-cta h2 em{color:#fff9e6}.ed-final-cta p:last-child{font-size:15px;color:#eef3ed;margin-top:15px}.ed-final-cta .ed-button-primary{background:#fff;color:#494640;flex-shrink:0} /* Inner pages retain existing content with visual system tied to homepage. */ body:not(.page-home) .interior-hero{background:var(--ed-canvas)} body:not(.page-home) .interior-photo,body:not(.page-home) .class-detail-photo,body:not(.page-home) .studio-gallery img{border-radius:var(--ui-radius)} body:not(.page-home) .interior-copy h1{font-family:var(--sans);font-weight:700;letter-spacing:-.06em} body:not(.page-home) .section{padding-block:94px} body:not(.page-home) .trio-grid article{border-radius:var(--ui-radius)} .site-footer{background:#494640} /* ~1160px: preserve hierarchy without squeezed columns. */ @media(max-width:1160px){ .container{width:calc(100% - 70px)} .desktop-nav .nav-link{padding-inline:12px;font-size:11px} .ed-editorial-grid{grid-template-columns:1.12fr 1fr}.ed-story-deep{grid-column:1 / -1;min-height:240px;display:grid;grid-template-columns:1.4fr 1fr;column-gap:25px;align-items:start}.ed-deep-head{grid-column:1/-1}.ed-deep-photos{grid-column:2;grid-row:2 / 5}.ed-story-deep h3,.ed-story-deep p,.ed-deep-tags{grid-column:1}.ed-deep-photos img{height:140px} .ed-service-grid{gap:12px}.ed-service-card h3{font-size:17px} .ed-hero-aside{width:215px} } @media(max-width:900px){ .container{width:calc(100% - 44px)} .site-header,.site-header.scrolled{height:74px}.nav-wrap{gap:12px}.desktop-nav{display:none} .menu-toggle{display:flex;width:44px;height:44px;margin-left:2px} .page-home .site-header{margin-bottom:-74px} .page-home .site-header.menu-open,.page-home .site-header:has(.menu-toggle[aria-expanded="true"]){background:var(--ed-canvas);color:var(--ed-ink)} .page-home .site-header:has(.menu-toggle[aria-expanded="true"]) .brand{color:var(--ed-ink)} .page-home .site-header:has(.menu-toggle[aria-expanded="true"]) .menu-toggle span{background:var(--ed-ink)} .mobile-nav{top:var(--nav-height,74px)} .ed-hero-media{height:680px;border-radius:var(--ui-radius)} .ed-hero-copy{max-width:65%}.ed-hero-copy h1{font-size:clamp(55px,6.3vw,75px)} .ed-hero-eyebrow{top:105px}.ed-scroll-indicator{top:106px} .ed-hero-aside{right:24px;bottom:30px;width:195px}.ed-hero-aside img{height:105px} .ed-intro{padding-top:75px;grid-template-columns:1.4fr 1fr;gap:35px} .ed-intro h2{font-size:clamp(40px,5vw,59px)} .ed-editorial-grid{gap:14px;padding-bottom:85px}.ed-story-photo,.ed-story-paper{min-height:385px} .ed-story-paper{padding:22px}.ed-story-symbol{margin-bottom:30px} .ed-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 15px} .ed-studio{gap:35px;padding-bottom:92px}.ed-studio-visual img{height:400px} .ed-steps,.ed-services{padding-bottom:90px}.ed-final-cta{margin-bottom:85px;padding:50px 40px} } @media(max-width:680px){ .container{width:calc(100% - 28px)} .site-header,.site-header.scrolled{height:66px}.nav-wrap{gap:4px}.brand-symbol{width:34px;height:34px}.brand-type strong{font-size:26px} .page-home .site-header{margin-bottom:-66px} .mobile-nav{top:var(--nav-height,66px);padding:25px 20px 32px}.mobile-nav a{min-height:50px;padding:10px 3px;font-size:23px} .book-pill{min-height:39px;padding:8px 13px;font-size:11px;gap:7px} .page-home .site-header:not(.scrolled) .menu-toggle span{background:#fff} .page-home .site-header:has(.menu-toggle[aria-expanded="true"]) .book-pill{background:var(--ed-green);color:#fff} .page-home .site-header:has(.menu-toggle[aria-expanded="true"]) .menu-toggle span{background:var(--ed-ink)} .ed-hero{padding-top:7px}.ed-hero-media{height:min(700px,calc(100svh - 15px));min-height:610px;border-radius:var(--ui-radius)} .ed-hero-img{object-position:47% center}.ed-hero-gradient{background:linear-gradient(0deg,#31322Bd9 0%,#31322B6b 63%,#31322B9c 100%)} .ed-hero-eyebrow{top:102px;left:21px;font-size:8px;letter-spacing:.13em;gap:8px}.ed-little-sun{font-size:18px}.ed-hero-line{width:11px} .ed-scroll-indicator{display:none} .ed-hero-copy{left:23px;right:23px;bottom:190px;max-width:none} .ed-hero-copy h1{font-size:clamp(48px,12.2vw,77px);margin-bottom:13px}.ed-kicker{font-size:9px;margin-bottom:12px}.ed-hero-copy>p:not(.ed-kicker){font-size:13px;max-width:360px} .ed-hero-actions{margin-top:22px;gap:8px}.ed-button{min-height:45px;font-size:11px;padding:10px 15px;gap:10px} .ed-hero-aside{bottom:17px;left:18px;right:18px;width:auto;display:grid;grid-template-columns:82px 1fr auto;grid-template-rows:auto auto;gap:1px 11px;align-items:center;padding:10px;border-radius:var(--ui-radius)} .ed-hero-aside img{grid-row:1/3;height:72px;width:82px;border-radius:var(--ui-radius)}.ed-hero-aside .ed-aside-tag{grid-column:2;grid-row:1;margin:0;font-size:8px}.ed-hero-aside h2{grid-column:2;grid-row:2;font-size:13px;margin:0}.ed-hero-aside a{grid-column:3;grid-row:1/3;align-self:center;font-size:0;padding:0;width:30px;height:30px;border:0;background:#edf3e9;border-radius:50%;display:grid;place-items:center}.ed-hero-aside a span{font-size:19px} .ed-intro{display:block;padding-top:73px;padding-bottom:26px}.ed-overline{font-size:9px}.ed-intro h2{font-size:clamp(37px,10vw,55px)} .ed-intro-desc{margin-top:22px}.ed-intro-desc p{font-size:14px;max-width:none} .ed-editorial-grid{grid-template-columns:1fr;gap:12px;padding-bottom:85px}.ed-story-photo{height:365px;min-height:0}.ed-story-paper{min-height:300px}.ed-story-symbol{margin-bottom:24px}.ed-story-paper h3{font-size:29px}.ed-story-deep{display:flex;min-height:300px}.ed-deep-photos{display:grid;grid-template-columns:1fr 1fr}.ed-deep-photos img{height:135px} .ed-services{padding-bottom:82px}.ed-services-heading h2{font-size:clamp(34px,9vw,49px)}.ed-services-heading>p:last-child{font-size:13px} .ed-service-filter{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px;margin-bottom:26px}.ed-service-filter::-webkit-scrollbar{display:none}.ed-filter{flex:none;min-width:auto;padding:10px 18px} .ed-service-grid{gap:26px 11px}.ed-service-image{border-radius:var(--ui-radius)}.ed-card-icon{width:31px;height:31px;right:8px;top:8px;font-size:17px}.ed-service-card>p{font-size:9px;margin-top:12px}.ed-service-card h3{font-size:16px}.ed-service-card>span{font-size:11px} .ed-services-bottom{align-items:flex-start}.ed-services-bottom p{max-width:130px}.ed-inline-link{font-size:11px} .ed-studio{display:flex;flex-direction:column;gap:30px;align-items:stretch;padding-bottom:83px}.ed-studio-visual img{height:350px}.ed-studio h2{font-size:clamp(39px,9vw,54px)}.ed-studio-copy>p:not(.ed-overline){font-size:14px} .ed-steps{padding-bottom:80px}.ed-steps-title h2{font-size:clamp(35px,8.7vw,48px)}.ed-steps-grid{grid-template-columns:1fr;gap:9px}.ed-steps-grid>div{min-height:auto;padding:22px}.ed-steps-grid span{margin-bottom:11px}.ed-steps-grid h3{font-size:21px} .ed-final-cta{display:block;padding:39px 24px;margin-bottom:79px;border-radius:var(--ui-radius)}.ed-final-cta h2{font-size:clamp(34px,9vw,48px)}.ed-final-cta .ed-button{margin-top:25px} body:not(.page-home) .section{padding-block:70px} } @media(max-width:390px){ .ed-hero-copy h1{font-size:47px}.ed-hero-media{height:620px;min-height:0}.ed-hero-copy{bottom:155px}.ed-hero-copy>p:not(.ed-kicker){font-size:12px}.ed-hero-aside img{width:63px;height:65px}.ed-hero-aside{grid-template-columns:63px 1fr 30px}.ed-hero-aside h2{font-size:12px} .ed-story-photo{height:310px}.ed-service-card h3{font-size:15px} } @media(prefers-reduced-motion:reduce){ .ed-service-image img,.ed-story-photo>img,.ed-button,.ed-filter{transition:none!important} } /* 3P Pilates | Reference editorial system v03 Visual reference: inset immersive hero, airy two-column intro, asymmetric three-card story, centered discovery / pill filters, 4-column cards. Shared across every static route. Assets, brand and actual content preserved. Keep this LAST in stylesheet order: it supersedes older width overrides. */ :root { --p-page: min(1840px, calc(100% - clamp(28px, 5vw, 92px))); --p-radius: 17px; --p-gap: clamp(13px, 1.85vw, 30px); --p-air: clamp(78px, 7.2vw, 132px); --p-cream: #fbfaf7; --p-forest: #494640; --p-surface: #fffefa; --p-stroke: #e9e9e1; } html {scroll-padding-top:100px} body {background:var(--p-cream); overflow-x:clip} .container, .site-footer .container {width:var(--p-page);max-width:none;margin-inline:auto} /* Header uses the same left and right rhythm as the photographs. */ .nav-wrap {padding-inline:clamp(16px,3.25vw,64px); gap:clamp(12px,2vw,30px)} .site-header {border-color:var(--p-stroke)} .desktop-nav {padding:5px;gap:1px; flex-shrink:0} .nav-link {padding-inline:clamp(13px,1.15vw,19px);font-size:12px} .brand-type strong {font-size:29px} .brand-type>span {font-size:8px} .book-pill {min-height:42px;padding:9px 18px;gap:15px} /* Home masthead floats INSIDE the upper image rather than outside its frame. */ .page-home .site-header:not(.scrolled) .nav-wrap {padding-top:36px} .page-home .site-header:not(.scrolled) .desktop-nav {background:rgba(255,255,255,.18);border-color:#ffffff63} .page-home .site-header:not(.scrolled) .nav-link {color:#fff} .page-home .site-header:not(.scrolled) .nav-link:is(:hover,.is-active) {color:#494640} .page-home .site-header:not(.scrolled) .book-pill {background:#fffefa;color:#494640} .page-home .site-header.scrolled .nav-wrap {padding-top:0} /* 1. Panoramic inset photo with text bottom-left and supporting card bottom-right */ .ed-hero {padding-top:clamp(16px,1.9vw,34px)} .ed-hero-media { height:clamp(645px,53.5vw,915px); border-radius:var(--ui-radius); background:#7F8A7D; } .ed-hero-img {object-position:center 55%} .ed-hero-gradient {background:linear-gradient(90deg,rgba(39,39,36,.68) 0%,rgba(39,39,36,.38) 43%,rgba(39,39,36,.1) 73%,rgba(39,39,36,.2) 100%),linear-gradient(0deg,rgba(39,39,36,.32),transparent 49%)} .ed-hero-eyebrow {top:clamp(126px,10.8vw,180px);left:clamp(30px,4.1vw,75px);letter-spacing:.15em} .ed-scroll-indicator {top:clamp(126px,10.8vw,180px);right:clamp(32px,3.8vw,70px)} .ed-hero-copy {left:clamp(32px,4.1vw,76px);bottom:clamp(53px,5vw,92px);max-width:min(760px,62%)} .ed-kicker {margin-bottom:13px;letter-spacing:.15em} .ed-hero-copy h1 {font-size:clamp(57px,4.65vw,85px);line-height:1.035;letter-spacing:-.062em;margin-bottom:16px} .ed-hero-copy>p:not(.ed-kicker) {font-size:clamp(14px,1.08vw,17px);line-height:1.65;max-width:410px} .ed-hero-actions {margin-top:21px} .ed-button {min-height:43px;padding:10px 18px;font-size:12px;gap:16px} .ed-hero-aside {right:clamp(27px,4vw,75px);bottom:clamp(48px,4vw,74px);width:clamp(222px,18.1vw,280px);padding:12px 12px 17px;border-radius:var(--ui-radius)} .ed-hero-aside img {height:clamp(134px,12vw,192px);border-radius:var(--ui-radius)} .ed-aside-tag {margin:13px 4px 4px} .ed-hero-aside h2 {font-size:clamp(17px,1.42vw,23px);line-height:1.12;margin-bottom:13px} .ed-hero-aside a {font-size:11px} /* 2. Intro: editorial headline anchored left and a small paragraph at far right */ .ed-intro {grid-template-columns:minmax(0,1.8fr) minmax(240px,.65fr);gap:clamp(35px,5.7vw,115px);padding-top:var(--p-air);padding-bottom:clamp(36px,3.8vw,58px);align-items:end} .ed-intro-title>.ed-overline {display:none} .ed-intro h2 {font-size:clamp(42px,4.1vw,75px);line-height:1.07;max-width:900px} .ed-intro-desc {padding-bottom:4px} .ed-intro-desc p {font-size:clamp(13px,1.01vw,16px);line-height:1.65;margin-bottom:16px;max-width:330px} .ed-intro-desc .ed-button {min-height:40px} /* 3. Exactly three different-weight cards as in the provided composition. */ .ed-editorial-grid {grid-template-columns:minmax(0,1.24fr) minmax(0,.99fr) minmax(0,.75fr);gap:var(--p-gap);padding-bottom:clamp(102px,9.7vw,152px)} .ed-story-photo,.ed-story-paper,.ed-story-deep {min-width:0;min-height:clamp(400px,31.6vw,555px);border-radius:var(--ui-radius)} .ed-floating-note {left:clamp(11px,1vw,18px);right:clamp(11px,1vw,18px);bottom:clamp(11px,1vw,18px);background:var(--p-surface);border-radius:var(--ui-radius)} .ed-story-paper {padding:clamp(22px,2.8vw,48px)} .ed-story-paper .ed-overline {margin-bottom:10px} .ed-story-symbol {margin-bottom:clamp(38px,4.3vw,74px)} .ed-story-paper h3 {font-size:clamp(26px,2.55vw,44px)} .ed-story-paper>p:not(.ed-overline) {line-height:1.67} .ed-story-deep {padding:clamp(19px,2vw,35px)} .ed-deep-photos {margin-bottom:clamp(18px,2vw,32px);gap:10px} .ed-deep-photos img {height:clamp(130px,11.5vw,193px)} .ed-story-deep h3 {font-size:clamp(19px,1.75vw,28px)} /* 4. Centered discovery and four equally wide visual cards. */ .ed-services {padding-bottom:var(--p-air)} .ed-services-heading {max-width:920px;margin-bottom:23px} .ed-services-heading>.ed-overline {display:none} .ed-services-heading h2 {font-size:clamp(38px,4.2vw,75px);line-height:1.075;margin-bottom:10px} .ed-services-heading>p:last-child {font-size:clamp(12px,.95vw,15px)} .ed-service-filter {margin-bottom:32px;gap:5px} .ed-filter {min-height:38px;padding:9px 17px;font-size:11px} .ed-service-grid {gap:var(--p-gap)} .ed-service-image {aspect-ratio:.95;border-radius:var(--ui-radius)} .ed-service-card>p {margin-top:15px} .ed-service-card h3 {font-size:clamp(17px,1.42vw,23px)} .ed-services-bottom {margin-top:38px} /* 5. Long-form home continuation follows one calibrated rhythm. */ .ed-studio,.ed-steps {padding-bottom:var(--p-air)} .ed-studio {gap:clamp(32px,5vw,90px);grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)} .ed-studio-visual {border-radius:var(--ui-radius)} .ed-studio-visual img {height:clamp(425px,37vw,630px)} .ed-studio h2 {font-size:clamp(40px,4.5vw,75px)} .ed-steps-grid {gap:var(--p-gap)} .ed-steps-grid>div {border-radius:var(--ui-radius);padding:clamp(23px,2vw,35px)} .ed-final-cta {margin-bottom:var(--p-air);padding:clamp(48px,5.3vw,95px);border-radius:var(--ui-radius)} /* Secondary pages use the SAME inset canvas, rounded frames, splits and spacing. */ body:not(.page-home) .interior-hero {padding:clamp(16px,1.9vw,34px) 0 0!important;background:transparent} body:not(.page-home) .interior-grid {display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,5vw,95px);min-height:0;align-items:center;background:#f0f1eb;border-radius:var(--ui-radius);padding:clamp(42px,5vw,100px)} body:not(.page-home) .interior-copy {padding:0} body:not(.page-home) .interior-copy h1 {font-size:clamp(48px,4.8vw,83px);line-height:1.08;margin:24px 0 22px;letter-spacing:-.06em} body:not(.page-home) .interior-copy h1 em,body:not(.page-home) .contact-lead h1 em {font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.06em;color:#7F8A7D} body:not(.page-home) .interior-copy .lead {font-size:clamp(14px,1.1vw,17px);line-height:1.73} body:not(.page-home) .interior-copy .text-link {margin-top:24px} body:not(.page-home) .interior-photo {height:clamp(410px,36vw,660px);width:100%;margin:0;border-radius:var(--ui-radius)} body:not(.page-home) .section {padding-block:calc(var(--p-air)/2)} body:not(.page-home) .interior-hero+.section {padding-top:var(--p-air)} body:not(.page-home) .values-detail,body:not(.page-home) .guide-band {padding-block:clamp(65px,6vw,110px)} body:not(.page-home) .trio-grid {gap:var(--p-gap)} body:not(.page-home) .trio-grid article {padding:clamp(22px,2.2vw,35px);background:var(--p-surface);border:1px solid var(--p-stroke);border-top:2px solid #C4C9BE;border-radius:var(--ui-radius)} body:not(.page-home) .trio-grid h3 {font-family:var(--sans);font-size:clamp(25px,2.5vw,37px);margin:24px 0 13px} body:not(.page-home) .two-col-narrative,body:not(.page-home) .split-feature,body:not(.page-home) .guide-grid {gap:clamp(30px,5vw,90px)} body:not(.page-home) .class-detail {gap:clamp(30px,5vw,90px)} body:not(.page-home) .class-detail-photo {height:clamp(420px,39vw,690px);border-radius:var(--ui-radius)} body:not(.page-home) .studio-gallery {gap:var(--p-gap)} body:not(.page-home) .studio-gallery figure {border-radius:var(--ui-radius)} body:not(.page-home) .class-detail h2,body:not(.page-home) .split-feature h2 {font-family:var(--sans);font-weight:700;letter-spacing:-.045em} body:not(.page-home) .contact-page {padding:clamp(16px,1.9vw,34px) 0 0!important;background:transparent} body:not(.page-home) .contact-grid {grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,95px);background:#f0f1eb;padding:clamp(40px,5.2vw,100px);border-radius:var(--ui-radius)} body:not(.page-home) .contact-lead h1 {font-size:clamp(48px,4.8vw,80px);line-height:1.08;letter-spacing:-.06em;margin:23px 0 20px} body:not(.page-home) .contact-image {border-radius:var(--ui-radius);overflow:hidden} body:not(.page-home) .contact-faq {padding-block:var(--p-air)} body:not(.page-home) .legal,body:not(.page-home) .notfound {min-height:65vh} body:not(.page-home) .bottom-cta {border-radius:var(--ui-radius)} /* Footer is not allowed to revert to the old narrower max-width. */ .site-footer {padding-top:clamp(65px,6vw,110px)} .footer-upper {gap:var(--p-gap);padding-bottom:clamp(55px,5.8vw,100px)} .footer-nav-area {gap:clamp(35px,5.5vw,110px)} /* 1000–1160: full three-card geometry is readable on wide tablets. */ @media (min-width:1001px) and (max-width:1160px) { .ed-editorial-grid {grid-template-columns:minmax(0,1.24fr) minmax(0,.99fr) minmax(0,.75fr)} .ed-story-deep {display:flex;grid-column:auto;min-height:400px} .ed-deep-head,.ed-story-deep h3,.ed-story-deep p,.ed-deep-tags {grid-column:auto;grid-row:auto} .ed-deep-photos {display:grid;grid-column:auto;grid-row:auto} .ed-deep-photos img {height:123px} .ed-hero-aside {width:210px} } @media (max-width:1000px) { .nav-wrap {padding-inline:clamp(8px,2vw,24px)} .ed-hero-media {height:690px} .ed-hero-eyebrow {top:113px} .ed-scroll-indicator {top:113px} .ed-hero-copy {left:35px;max-width:62%} .ed-hero-copy h1 {font-size:clamp(48px,6.5vw,68px)} .ed-hero-aside {width:200px;right:30px;bottom:38px} .ed-hero-aside img {height:114px} .ed-intro {gap:28px} .ed-intro h2 {font-size:clamp(40px,5.2vw,57px)} .ed-editorial-grid {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:15px} .ed-story-photo,.ed-story-paper {min-height:390px} .ed-story-deep {grid-column:1/-1;min-height:235px;display:grid;grid-template-columns:1.4fr 1fr;gap:10px 25px} .ed-deep-head {grid-column:1/-1} .ed-deep-photos {grid-column:2;grid-row:2/5;margin-bottom:0} .ed-story-deep h3,.ed-story-deep p,.ed-deep-tags {grid-column:1} .ed-deep-photos img {height:135px} body:not(.page-home) .interior-grid,body:not(.page-home) .contact-grid {padding:38px;gap:35px} body:not(.page-home) .interior-photo {height:430px} } @media (max-width:900px) { .page-home .site-header:not(.scrolled) .nav-wrap {padding-top:24px} .site-header .book-pill {margin-left:auto} .page-home .site-header:has(.menu-toggle[aria-expanded="true"]) .nav-wrap {padding-top:0} .mobile-nav {z-index:510} } @media (max-width:680px) { :root {--p-air:68px;--p-gap:13px;--p-radius:13px} html {scroll-padding-top:75px} .container,.site-footer .container {width:var(--p-page)} .nav-wrap {padding-inline:4px} .site-header,.site-header.scrolled {height:66px} .page-home .site-header {margin-bottom:-66px} .page-home .site-header:not(.scrolled) .nav-wrap {padding-top:8px} .site-header .book-pill {min-height:39px;padding:8px 12px} .ed-hero {padding-top:8px} .ed-hero-media {height:clamp(610px,82svh,750px);min-height:0;border-radius:var(--ui-radius)} .ed-hero-eyebrow {top:103px;left:20px;max-width:calc(100% - 38px);font-size:8px} .ed-hero-copy {left:22px;right:22px;bottom:178px;max-width:none} .ed-hero-copy h1 {font-size:clamp(47px,11.8vw,67px);line-height:1.06} .ed-hero-copy>p:not(.ed-kicker) {font-size:13px;max-width:335px} .ed-hero-aside {width:auto;left:15px;right:15px;bottom:16px;padding:10px;grid-template-columns:80px minmax(0,1fr) 32px;min-height:92px} .ed-hero-aside img {width:80px;height:72px} .ed-hero-aside h2 {font-size:13px} .ed-intro {display:block;padding-top:69px;padding-bottom:29px} .ed-intro h2 {font-size:clamp(37px,9.7vw,54px)} .ed-intro-desc {margin-top:24px} .ed-intro-desc p {max-width:450px;font-size:14px} .ed-editorial-grid {display:grid;grid-template-columns:1fr;gap:13px;padding-bottom:79px} .ed-story-photo {min-height:0;height:360px} .ed-story-paper {min-height:310px} .ed-story-symbol {margin-bottom:27px} .ed-story-deep {min-height:320px;grid-column:auto;display:flex;gap:0} .ed-deep-photos {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px} .ed-deep-photos img {height:145px} .ed-services {padding-bottom:76px} .ed-services-heading {margin-bottom:22px} .ed-services-heading h2 {font-size:clamp(33px,8.7vw,50px)} .ed-service-filter {justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;margin-right:-14px;margin-bottom:18px} .ed-filter {flex-shrink:0;min-height:38px} .ed-service-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px} .ed-service-image {aspect-ratio:.94} .ed-service-card h3 {font-size:16px} .ed-studio {display:flex;flex-direction:column;gap:28px;padding-bottom:76px} .ed-studio-visual img {height:360px} .ed-steps {padding-bottom:76px} .ed-steps-grid {grid-template-columns:1fr;gap:12px} .ed-final-cta {margin-bottom:76px;padding:36px 25px} body:not(.page-home) .interior-hero {padding-top:8px!important} body:not(.page-home) .interior-grid {display:grid;grid-template-columns:1fr;gap:28px;padding:29px 22px 22px;border-radius:var(--ui-radius)} body:not(.page-home) .interior-copy h1 {font-size:clamp(43px,10.3vw,58px);line-height:1.08;margin:20px 0} body:not(.page-home) .interior-photo {height:330px;width:100%;margin:0;border-radius:var(--ui-radius)} body:not(.page-home) .section {padding-block:35px} body:not(.page-home) .interior-hero+.section {padding-top:70px} body:not(.page-home) .values-detail,body:not(.page-home) .guide-band {padding-block:70px} body:not(.page-home) .trio-grid {grid-template-columns:1fr;gap:13px} body:not(.page-home) .trio-grid article {padding:22px} body:not(.page-home) .trio-grid h3 {font-size:29px} body:not(.page-home) .two-col-narrative,body:not(.page-home) .split-feature,body:not(.page-home) .guide-grid {display:block} body:not(.page-home) .class-detail {display:flex;flex-direction:column;gap:28px} body:not(.page-home) .class-detail-photo {height:360px;width:100%} body:not(.page-home) .studio-gallery {grid-template-columns:1fr;gap:13px} body:not(.page-home) .contact-page {padding-top:8px!important} body:not(.page-home) .contact-grid {display:block;padding:30px 22px;border-radius:var(--ui-radius)} body:not(.page-home) .contact-lead h1 {font-size:clamp(43px,10.3vw,58px)} body:not(.page-home) .contact-image {margin-top:30px;height:330px} body:not(.page-home) .contact-faq {padding-block:72px} .site-footer {padding-top:70px} .footer-upper {padding-bottom:60px} } @media (max-width:380px) { .brand-type strong {font-size:24px} .ed-hero-media {height:620px} .ed-hero-copy {bottom:155px} .ed-hero-copy h1 {font-size:45px} .ed-hero-aside {grid-template-columns:64px minmax(0,1fr) 30px} .ed-hero-aside img {width:64px;height:64px} .ed-story-photo {height:310px} } @media (prefers-reduced-motion:reduce) { .ed-hero-img,.ed-service-image img,.ed-story-photo>img {transition:none!important} } /* ============================================================================ 3P Pilates | v04 Design System • 2026-11-07 Single-source tokens: spacing 8pt scale, soft humanist sans, optical radius. The preceding stylesheet is legacy content styling from v03; these rules standardize all active templates and breakpoints without altering media assets. ============================================================================ */ :root { --sans:"Lato Local",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --serif:var(--sans); --ui-space-1:8px;--ui-space-2:16px;--ui-space-3:24px;--ui-space-4:32px; --ui-space-5:48px;--ui-space-6:64px;--ui-space-7:96px; --ui-radius-hero:24px;--ui-radius-panel:20px;--ui-radius-card:16px; --ui-radius-inset:12px;--ui-radius-control:999px; --ui-stroke:#e5e9e1;--ui-ink:#494640;--ui-subtle:#7F8A7D; --p-gap:clamp(16px,1.6vw,24px);--p-air:clamp(80px,7vw,112px); --p-radius:var(--ui-radius-panel); } html{scroll-behavior:smooth;scroll-padding-top:104px} body{font-family:var(--sans);font-weight:400;line-height:1.62;letter-spacing:.002em;background:#fbfaf7;color:var(--ui-ink)} h1,h2,h3,h4,em,h1 em,h2 em,h3 em,.brand-type strong, .ed-hero-copy h1 em,.ed-intro h2 em,.ed-services h2 em,.ed-studio h2 em, .ed-steps h2 em,.ed-final-cta h2 em,.ed-story-paper h3 em, body:not(.page-home) .interior-copy h1 em, body:not(.page-home) .contact-lead h1 em, .contact-overlay em,.studio-quote h2 em,.footer-intro em{ font-family:var(--sans)!important;font-style:normal!important; letter-spacing:-.045em;font-weight:700; } h1,h2,h3{font-style:normal;letter-spacing:-.048em;font-weight:700;text-wrap:balance} h1{line-height:1.07}h2{line-height:1.12}h3{line-height:1.22} h1 em,h2 em,h3 em{font-weight:700;color:#7F8A7D} p{overflow-wrap:break-word} .ed-overline,.eyebrow{color:#565B52} .ed-deep-head,.ed-deep-head span{color:#eaf1e9} .ed-service-card>p,.ed-aside-tag{color:#565B52} :focus-visible{outline:2px solid #7F8A7D!important;outline-offset:3px!important} :focus:not(:focus-visible){outline:0} button,a,summary{touch-action:manipulation} /* Header: actual inset from hero frame, without overlapping the browser edge. */ .site-header,.site-header.scrolled{height:92px} .site-header{transition:background .26s ease,box-shadow .26s ease,border-color .26s ease} .nav-wrap{gap:clamp(16px,2vw,30px);padding-inline:clamp(22px,3.3vw,58px)} .nav-wrap .brand{position:relative;z-index:2} .brand-type strong{font-weight:700;letter-spacing:-.055em;font-size:29px} .brand-type>span{font-size:9px;letter-spacing:.18em} .desktop-nav{gap:3px;padding:6px;border:1px solid rgba(255,255,255,.23);border-radius:var(--ui-radius)} .nav-link{min-height:40px;padding:10px clamp(13px,1.2vw,20px);font-size:12px;font-weight:700;letter-spacing:0} .book-pill{min-height:44px;padding:11px 20px;border-radius:var(--ui-radius);font-size:12px} .page-home .site-header{margin-bottom:-92px} .page-home .site-header:not(.scrolled) .nav-wrap{padding-top:0;transform:translateY(32px)} .page-home .site-header.scrolled .nav-wrap{padding-top:0;transform:none} .page-home .site-header .nav-wrap{transition:transform .28s cubic-bezier(.2,.7,.2,1)} .page-home .site-header:not(.scrolled) .desktop-nav{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)} .page-home .site-header:not(.scrolled) .nav-link{color:#fff} .page-home .site-header:not(.scrolled) .nav-link:is(:hover,.is-active){color:#494640} .page-home .site-header.scrolled{box-shadow:0 8px 24px #31322B0b} /* Large-area geometry and consistent internal alignment. */ .ed-hero{padding-top:clamp(18px,2vw,32px)} .ed-hero-media{border-radius:var(--ui-radius)} .ed-hero-eyebrow,.ed-scroll-indicator{top:clamp(142px,11.6vw,192px)} .ed-hero-copy h1{line-height:1.055;letter-spacing:-.055em;font-size:clamp(58px,4.8vw,88px);font-weight:700} .ed-hero-copy h1 em{color:#f7f4e9} .ed-kicker{letter-spacing:.12em;margin-bottom:16px} .ed-hero-copy>p:not(.ed-kicker){font-size:clamp(15px,1.06vw,17px);line-height:1.65} .ed-hero-actions{gap:10px;margin-top:24px} .ed-button,.btn,.book-pill,.nav-link{border-radius:var(--ui-radius)} .ed-button,.btn{min-height:44px;font-size:12px;gap:16px} .ed-hero-aside{border-radius:var(--ui-radius);padding:12px 12px 16px} .ed-hero-aside img{border-radius:var(--ui-radius)} .ed-hero-aside h2{font-size:clamp(17px,1.4vw,21px);line-height:1.2;letter-spacing:-.025em} .ed-intro{padding-block-start:var(--p-air);padding-block-end:var(--ui-space-5)} .ed-intro h2{font-size:clamp(42px,4vw,68px);letter-spacing:-.052em} .ed-intro-desc p{font-size:15px;line-height:1.75} .ed-editorial-grid{gap:var(--p-gap);padding-bottom:var(--p-air)} .ed-story-photo,.ed-story-paper,.ed-story-deep{border-radius:var(--ui-radius)} .ed-story-paper,.ed-story-deep{padding:clamp(24px,2.3vw,40px)} .ed-story-symbol{margin-bottom:var(--ui-space-5)} .ed-story-paper h3{font-size:clamp(27px,2.5vw,40px)} .ed-story-paper>p:not(.ed-overline){font-size:14px;line-height:1.7} .ed-story-deep p{font-size:13px;line-height:1.65} .ed-deep-photos img{border-radius:var(--ui-radius)} .ed-floating-note{border-radius:var(--ui-radius)} .ed-services{padding-bottom:var(--p-air)} .ed-services-heading h2{font-size:clamp(40px,4vw,68px);letter-spacing:-.045em} .ed-services-heading>p:last-child{font-size:14px;line-height:1.65} .ed-service-filter{margin-bottom:var(--ui-space-4)} .ed-filter{min-height:44px;border-radius:var(--ui-radius);font-size:12px} .ed-service-image{border-radius:var(--ui-radius)} .ed-service-card>p{font-size:11px}.ed-service-card h3{font-size:clamp(18px,1.45vw,22px)} .ed-service-card>span{font-size:13px;line-height:1.5;display:block} .ed-services-bottom{margin-top:var(--ui-space-5);padding-top:var(--ui-space-3)} .ed-services-bottom p{font-size:13px} .ed-studio{gap:clamp(40px,5vw,88px);padding-bottom:var(--p-air)} .ed-studio-visual{border-radius:var(--ui-radius)} .ed-studio h2{font-size:clamp(42px,4.35vw,70px)} .ed-studio-copy>p:not(.ed-overline){font-size:15px;line-height:1.75} .ed-steps{padding-bottom:var(--p-air)} .ed-steps-title{margin-bottom:var(--ui-space-4)} .ed-steps-title h2{font-size:clamp(40px,4vw,66px)} .ed-steps-grid{gap:var(--p-gap)} .ed-steps-grid>div{border-radius:var(--ui-radius);padding:clamp(24px,2.3vw,36px)} .ed-steps-grid h3{font-size:clamp(21px,1.8vw,26px)} .ed-steps-grid p{font-size:14px;line-height:1.7} .ed-steps-link{display:table;margin:32px auto 0;border-bottom:1px solid #C4C9BE;padding:10px 0;font-size:13px;font-weight:700} /* Inner routes share the same rounded hero, legible typographic hierarchy and rhythm. */ body:not(.page-home) .interior-hero,body:not(.page-home) .contact-page{padding-top:clamp(20px,2vw,32px)!important} body:not(.page-home) .interior-grid,body:not(.page-home) .contact-grid{border-radius:var(--ui-radius);padding:clamp(40px,5.3vw,96px);gap:clamp(36px,5vw,90px)} body:not(.page-home) .interior-copy h1,body:not(.page-home) .contact-lead h1{ font-size:clamp(48px,4.5vw,76px);font-weight:700;letter-spacing:-.052em;line-height:1.08; } body:not(.page-home) .interior-copy .lead,body:not(.page-home) .contact-lead>p:not(.eyebrow){font-size:clamp(15px,1.12vw,17px);line-height:1.7} body:not(.page-home) .interior-photo,body:not(.page-home) .contact-image{border-radius:var(--ui-radius)} body:not(.page-home) .section{padding-block:clamp(44px,5vw,76px)} body:not(.page-home) .interior-hero+.section{padding-top:var(--p-air)} body:not(.page-home) .trio-grid{gap:var(--p-gap)} body:not(.page-home) .trio-grid article{border:1px solid var(--ui-stroke);border-radius:var(--ui-radius);padding:clamp(24px,2.3vw,36px)} body:not(.page-home) .trio-grid h3{font-size:clamp(25px,2.2vw,33px);margin-block:20px 12px} body:not(.page-home) .values-detail,body:not(.page-home) .guide-band{padding-block:var(--p-air)} body:not(.page-home) .class-detail-photo,body:not(.page-home) .studio-gallery figure{border-radius:var(--ui-radius)} body:not(.page-home) .class-detail h2,body:not(.page-home) .split-feature h2{font-size:clamp(36px,3.65vw,58px)} body:not(.page-home) .contact-faq{padding-block:var(--p-air)} body:not(.page-home) .bottom-cta{border-radius:var(--ui-radius)} .price-card{border-radius:var(--ui-radius)} .contact-method{border-color:var(--ui-stroke)} .faq-list details{border-color:var(--ui-stroke)} .site-footer{padding-top:var(--p-air)} .footer-upper{gap:var(--p-gap);padding-bottom:var(--ui-space-7)} .footer-intro h2{font-size:clamp(40px,4vw,65px);line-height:1.12} .footer-intro>p:not(.eyebrow){max-width:450px;font-size:15px;line-height:1.7} .footer-nav-area{gap:clamp(40px,5vw,92px)} /* Tablet : 2-up cards preserve the editorial rhythm and meaningful whitespace. */ @media(min-width:681px) and (max-width:1000px){ :root{--p-air:80px;--ui-radius-hero:20px} .site-header,.site-header.scrolled{height:82px} .page-home .site-header{margin-bottom:-82px} .page-home .site-header:not(.scrolled) .nav-wrap{transform:translateY(21px)} .ed-hero-media{height:680px} .ed-hero-eyebrow{top:134px} .ed-scroll-indicator{top:134px} .ed-hero-aside{max-width:210px} .ed-hero-copy h1{font-size:clamp(50px,5.7vw,65px)} .ed-intro h2{font-size:clamp(40px,4.8vw,55px)} body:not(.page-home) .interior-grid,body:not(.page-home) .contact-grid{padding:40px} } /* Mobile : no sideways scrolling, comfortable interactive targets, unified spacing. */ @media(max-width:680px){ :root{--p-air:64px;--p-gap:16px;--ui-radius-hero:18px;--ui-radius-panel:16px;--ui-radius-card:14px} html{scroll-padding-top:88px} .site-header,.site-header.scrolled{height:74px} .page-home .site-header{margin-bottom:-74px} .nav-wrap{padding-inline:10px;gap:8px} .page-home .site-header:not(.scrolled) .nav-wrap{padding-top:0;transform:translateY(15px)} .page-home .site-header.scrolled .nav-wrap{transform:none} .brand-symbol{width:34px;height:34px} .brand-type strong{font-size:26px} .brand-type>span{font-size:8px} .site-header .book-pill{min-height:44px;padding:10px 14px} .menu-toggle{min-width:44px;min-height:44px} .ed-hero{padding-top:12px} .ed-hero-media{border-radius:var(--ui-radius);height:clamp(660px,84svh,770px)} .ed-hero-eyebrow{top:118px;left:22px;right:18px;max-width:calc(100% - 40px);font-size:8px;letter-spacing:.1em} .ed-hero-line{width:12px} .ed-hero-copy{left:22px;right:22px;max-width:none;bottom:168px} .ed-hero-copy h1{font-size:clamp(43px,11vw,60px);line-height:1.08;letter-spacing:-.05em} .ed-hero-copy>p:not(.ed-kicker){font-size:14px;line-height:1.55;max-width:330px} .ed-hero-actions{margin-top:20px;gap:8px} .ed-button{min-height:44px;padding:11px 15px;font-size:12px;gap:12px} .ed-hero-aside{bottom:16px;left:14px;right:14px;border-radius:var(--ui-radius)} .ed-hero-aside img{border-radius:var(--ui-radius)} .ed-hero-aside h2{font-size:13px} .ed-intro{padding-top:var(--p-air);padding-bottom:var(--ui-space-4)} .ed-intro h2{font-size:clamp(37px,9vw,52px);line-height:1.1} .ed-intro-desc p{font-size:14px} .ed-editorial-grid{gap:var(--p-gap);padding-bottom:var(--p-air)} .ed-story-photo{height:360px} .ed-story-paper,.ed-story-deep{min-height:300px} .ed-story-symbol{margin-bottom:24px} .ed-services{padding-bottom:var(--p-air)} .ed-services-heading h2{font-size:clamp(34px,8.5vw,48px)} .ed-services-heading>p:last-child{font-size:13px} .ed-filter{min-height:44px} .ed-service-filter{margin-bottom:20px} .ed-service-grid{gap:24px 12px} .ed-service-card>p{font-size:10px}.ed-service-card h3{font-size:16px}.ed-service-card>span{font-size:12px} .ed-steps-grid{gap:12px} .ed-studio{padding-bottom:var(--p-air)} .ed-steps{padding-bottom:var(--p-air)} body:not(.page-home) .interior-hero,body:not(.page-home) .contact-page{padding-top:12px!important} body:not(.page-home) .interior-grid,body:not(.page-home) .contact-grid{border-radius:var(--ui-radius);padding:32px 22px 22px} body:not(.page-home) .interior-copy h1,body:not(.page-home) .contact-lead h1{font-size:clamp(40px,10vw,56px)} body:not(.page-home) .interior-photo,body:not(.page-home) .contact-image{border-radius:var(--ui-radius);height:320px} body:not(.page-home) .interior-hero+.section{padding-top:var(--p-air)} body:not(.page-home) .section{padding-block:40px} body:not(.page-home) .values-detail,body:not(.page-home) .guide-band{padding-block:var(--p-air)} body:not(.page-home) .studio-gallery{gap:16px} .site-footer{padding-top:var(--p-air)} .footer-upper{padding-bottom:64px} } @media(max-width:380px){ .ed-hero-copy h1{font-size:42px} .ed-hero-media{height:650px} .ed-hero-copy{bottom:160px} .ed-hero-eyebrow{font-size:7px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .site-header .nav-wrap,.ed-hero-img{transition:none!important} } /* v05 QA fixes — scoped, predictable overrides */ /* The v04 headings are sans, but these two editorial captions retained italic declarations. */ .subline,.price-caption{font-family:var(--sans);font-style:normal;letter-spacing:-.012em} /* Menus remain readable even when :has() selector support is missing. */ @media (max-width:900px){ body.menu-open .site-header{background:var(--ed-canvas)!important;color:var(--ed-ink)!important;border-bottom:1px solid var(--ui-stroke)} body.menu-open .site-header .brand,body.menu-open .site-header .nav-link{color:var(--ed-ink)!important} body.menu-open .site-header .menu-toggle span{background:var(--ed-ink)!important} body.menu-open .site-header .book-pill{background:var(--ed-green);color:white;border-color:var(--ed-green)} .mobile-nav a[aria-current="page"]{color:#494640;font-weight:700} .mobile-nav a[aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 3px 0;border-radius:50%;background:#7F8A7D} } /* Usable focus ring on the dark footer, consistent with the light UI. */ .site-footer :focus-visible{outline-color:#f7f7ec!important;outline-offset:4px!important} /* Preserve button hit targets for the small arrow-only editorial links. */ .ed-story-quote a,.ed-deep-head a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* In-page jumps must not tuck headings behind the sticky bar. */ [id="temel"],[id="akis"],[id="birebir"],#yaklasimimiz,#hizmetlerimiz{scroll-margin-top:110px} @media (max-width:680px){ [id="temel"],[id="akis"],[id="birebir"],#yaklasimimiz,#hizmetlerimiz{scroll-margin-top:86px} } @media (prefers-reduced-motion:reduce){ .ed-story-quote a,.ed-deep-head a{transition:none!important} } /* ===== v06 live-content refinements ===== */ :root{--ui-radius-hero:28px;--ui-radius-card:22px;--ui-radius-inset:16px;--ui-stroke:#deded6;--ui-soft:#f2f2eb} body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, summary, .brand-type strong, em{font-family:var(--sans)!important} em{font-style:normal!important} .brand-type strong{font-weight:700!important} .contact-live-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,3vw,34px);align-items:start} .contact-form-card,.contact-map-card{background:#f4f3ed;border:1px solid var(--ui-stroke);border-radius:var(--ui-radius);padding:clamp(22px,3.2vw,36px)} .section-head-compact{display:block;margin-bottom:28px} .section-head-compact h2{margin-top:14px} .section-head-compact>p{max-width:none;margin-top:14px;color:#7F8A7D;line-height:1.75} .form-grid-live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .field-live{display:flex;flex-direction:column;gap:8px} .field-live-full{grid-column:1/-1} .field-live span{font-size:12px;font-weight:700;color:#565B52;letter-spacing:.02em} .field-live input,.field-live select,.field-live textarea{width:100%;background:#fff;border:1px solid #d7d9d0;border-radius:var(--ui-radius);padding:14px 16px;color:#494640;font-size:14px;line-height:1.5;outline:none;transition:border-color .2s ease, box-shadow .2s ease} .field-live input::placeholder,.field-live textarea::placeholder{color:#C4C9BE} .field-live input:focus,.field-live select:focus,.field-live textarea:focus{border-color:#7F8A7D;box-shadow:0 0 0 4px rgba(122,144,126,.12)} .field-live textarea{resize:vertical;min-height:152px} .form-actions-live{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;flex-wrap:wrap} .form-actions-live p{font-size:12px;color:#7F8A7D;max-width:360px;line-height:1.6} .map-frame-live{aspect-ratio:4/4;overflow:hidden;border-radius:var(--ui-radius);border:1px solid #dcded5;background:#fff} .map-frame-live iframe{width:100%;height:100%;border:0;display:block} .map-notes-live{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px} .map-notes-live>div,.contact-cards-live .contact-method{background:#fff;border:1px solid #e1e2db;border-radius:var(--ui-radius);padding:16px 17px} .map-notes-live span,.contact-cards-live .contact-method span{display:block;font-size:10px;letter-spacing:.12em;font-weight:700;color:#7F8A7D;text-transform:uppercase;margin-bottom:8px} .map-notes-live strong,.contact-cards-live .contact-method strong{display:block;color:#494640;font-size:14px;line-height:1.5;font-weight:600} .contact-cards-live{display:grid;gap:12px;margin-top:24px} .concept-label{font-size:13px;line-height:1.7;color:#7F8A7D;background:#f7f5ef;border:1px solid var(--ui-stroke);padding:16px 18px;border-radius:var(--ui-radius);margin-bottom:18px} .photo-stamp{letter-spacing:.12em} @media(max-width:960px){ .contact-live-grid{grid-template-columns:1fr;} } @media(max-width:680px){ .form-grid-live,.map-notes-live{grid-template-columns:1fr} .contact-form-card,.contact-map-card{padding:22px 18px;border-radius:var(--ui-radius)} .field-live input,.field-live select,.field-live textarea{border-radius:var(--ui-radius)} .map-frame-live{aspect-ratio:4/3} } /* v07 — refined layout, three actual services, controlled empty space */ .ed-hero-copy .ed-kicker{font-size:11px;letter-spacing:.14em;font-weight:700;text-transform:uppercase} .ed-hero-copy>p:not(.ed-kicker){max-width:455px} .ed-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.5vw,24px)} .ed-service-card{min-width:0} .ed-service-card .ed-service-image{aspect-ratio:4/4.3} .ed-story-deep .ed-deep-photos{max-height:none} .contact-lead .contact-options{display:none} .contact-lead>p:not(.eyebrow){max-width:490px} .contact-form-card,.contact-map-card{border-radius:var(--ui-radius)} .contact-form-live{max-width:none} .form-feedback{font-size:13px;line-height:1.6;color:#565B52;margin-top:13px} .form-feedback:empty{display:none} .form-feedback.is-error{color:#b14e47} .form-review{border:1px solid #d8dcd2;border-radius:var(--ui-radius);margin-top:22px;background:#fff;padding:22px} .form-review[hidden]{display:none} .form-review h3{font-size:20px;letter-spacing:-.025em;margin:0 0 7px} .form-review>p{font-size:13px;line-height:1.65;color:#7F8A7D;margin-bottom:18px} .form-review-list{display:grid;grid-template-columns:minmax(95px,.28fr) 1fr;gap:11px 16px;word-break:break-word} .form-review-list dt{font-size:12px;color:#7F8A7D;font-weight:700} .form-review-list dd{font-size:14px;margin:0;white-space:pre-wrap} .form-review-back{margin-top:20px;border:0;padding:12px 0;background:transparent;font-size:13px;font-weight:700;color:#565B52;cursor:pointer} .map-frame-live{aspect-ratio:4/3;min-height:330px;background:linear-gradient(135deg,#F0F0E9,#f1f1e9);position:relative} .map-frame-live iframe{display:block;width:100%;height:100%;border:0} .map-floating-card{position:absolute;left:18px;bottom:18px;z-index:1;background:#fffffff0;backdrop-filter:blur(13px);border-radius:var(--ui-radius);box-shadow:0 14px 38px #31322B16;padding:16px 18px;max-width:calc(100% - 36px);min-width:230px} .map-floating-card>span{font-size:10px;letter-spacing:.13em;font-weight:700;color:#7F8A7D} .map-floating-card strong{display:block;font-size:19px;line-height:1.3;margin-top:5px} .map-floating-card a{display:inline-flex;gap:12px;align-items:center;margin-top:13px;border-bottom:1px solid #C4C9BE;padding-bottom:4px;font-size:13px;font-weight:700;color:#565B52} .map-floating-card a:hover{color:#494640} .contact-faq{align-items:start} .contact-faq .faq-list{max-width:none} @media(max-width:900px){.ed-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){ .ed-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px} .ed-service-card .ed-service-image{aspect-ratio:0.95} .ed-story-deep .ed-deep-photos{max-height:none} .map-frame-live{aspect-ratio:1;min-height:330px} .contact-form-card,.contact-map-card{padding:24px 20px} .contact-live-grid{gap:22px} .form-review-list{grid-template-columns:1fr;gap:4px} .form-review-list dd{margin-bottom:9px} } @media(max-width:380px){ .ed-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px} .ed-service-card h3{font-size:15px} } /* v07 small-screen intrinsic grid fix: prevent form controls widening the page. */ @media (max-width:960px){ .contact-live-grid{grid-template-columns:minmax(0,1fr)} .contact-live-grid>*{min-width:0;max-width:100%} .contact-form-card,.contact-map-card,.section-head-compact,.contact-form-live,.form-grid-live{min-width:0;max-width:100%} } @media(max-width:680px){ .map-frame-live{width:100%;min-height:0;height:clamp(260px,70vw,390px);aspect-ratio:auto} } /* ========================================================================= v08 | Unified HIG-inspired web design system All rectangles use one radius. Truly circular dots remain round. ========================================================================= */ :root{ --ui-radius:16px; --ui-radius-hero:var(--ui-radius);--ui-radius-panel:var(--ui-radius); --ui-radius-card:var(--ui-radius);--ui-radius-inset:var(--ui-radius); --ui-radius-control:var(--ui-radius);--p-radius:var(--ui-radius); --detail-radius:var(--ui-radius); } /* Natural type scale, consistent responsive rhythm and quiet contrast. */ .ed-intro,.ed-services,.ed-editorial-grid,.ed-studio{scroll-margin-top:90px} .ed-service-filter{display:none} .ed-service-card:focus-visible,.ed-button:focus-visible{outline-offset:4px} .site-footer a,.footer-nav-area a{min-height:44px;display:inline-flex;align-items:center} .mobile-nav a{min-height:48px} .faq-list summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px} .ed-story-quote a,.ed-deep-head a,.ed-card-icon{min-width:44px;min-height:44px} .ed-service-card>span,.ed-steps-grid p{font-size:14px} .ed-deep-tags span,.ed-aside-tag,.ed-overline,.eyebrow,.ed-story-deep .ed-deep-head>span{font-size:max(11px,0.72rem)} .ed-hero-copy>p:not(.ed-kicker){font-size:clamp(15px,1.06vw,17px)} body:not(.page-home) .interior-copy .lead{max-width:590px} /* Contact: true actions only. No preview-only form on a production site. */ .contact-details-card{background:#f4f3ed;border:1px solid var(--ui-stroke);border-radius:var(--ui-radius);padding:clamp(28px,3.7vw,50px);min-width:0} .contact-details-card h2,.contact-map-card h2{font-size:clamp(30px,3.2vw,48px);line-height:1.14;margin:14px 0 17px;letter-spacing:-.035em} .contact-details-intro,.contact-map-intro{color:#7F8A7D;font-size:15px;line-height:1.7;margin:0 0 32px} .contact-info-block{padding-block:22px;border-top:1px solid #d5dcd0} .contact-info-block>span{display:block;color:#7F8A7D;font-size:12px;font-weight:700;letter-spacing:.08em;margin-bottom:9px} .contact-info-block address{font-style:normal;font-size:clamp(16px,1.35vw,20px);line-height:1.55;color:#494640} .contact-tel{font-size:clamp(21px,2.2vw,32px);line-height:1.3;color:#494640;font-weight:700;letter-spacing:-.02em;text-decoration:none} .contact-tel:hover{text-decoration:underline;text-underline-offset:4px} .contact-info-actions{padding-top:30px;display:flex;align-items:center;flex-wrap:wrap;gap:16px} .contact-map-link{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:5px;font-size:14px;font-weight:700;color:#565B52} .map-outbound{margin-top:16px} .map-frame-consent{display:grid;place-items:center;isolation:isolate;overflow:hidden;position:relative;min-height:300px;background:#e5ebe2} .map-frame-consent::before{content:"";position:absolute;inset:0;opacity:.47;background:linear-gradient(44deg,transparent 45%,#DDE0D8 45%,#DDE0D8 46%,transparent 46%),linear-gradient(134deg,transparent 43%,#DDE0D8 43%,#DDE0D8 44%,transparent 44%),repeating-linear-gradient(0deg,transparent 0 38px,#DDE0D8 39px 41px,transparent 42px 70px)} .map-consent-content{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;max-width:90%;padding:24px 16px;background:rgba(255,255,255,.89);border-radius:var(--ui-radius)} .map-consent-content strong{font-size:18px;color:#494640} .map-consent-content>span:not(.map-pin-symbol){font-size:13px;color:#565B52} .map-pin-symbol{font-size:34px;line-height:1;color:#565B52} .map-load{cursor:pointer;margin-top:14px} .map-frame-consent iframe{position:absolute;inset:0;z-index:1;background:#fff} .map-frame-consent.is-loaded::before,.map-frame-consent.is-loaded .map-consent-content{display:none} @media(max-width:900px){.contact-live-grid{grid-template-columns:minmax(0,1fr)} } @media(max-width:480px){ .ed-service-grid{grid-template-columns:minmax(0,1fr);gap:28px} .ed-service-card .ed-service-image{aspect-ratio:1.25} .ed-service-card h3{font-size:20px} .contact-details-card,.contact-map-card{padding:24px 20px} .ed-hero-copy h1{font-size:clamp(40px,11vw,54px)} .contact-info-actions{align-items:stretch;flex-direction:column} .contact-info-actions .ed-button,.contact-info-actions .contact-map-link{width:100%;justify-content:center} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* Mobile hero aside: one clear tap target, no multi-line squeezed label. */ @media(max-width:680px){ .ed-hero-aside a{font-size:0!important;line-height:1;width:44px!important;height:44px!important;min-height:44px;border-radius:var(--ui-radius)!important;padding:0!important;border:0!important;display:grid!important;place-items:center;background:#edf3e9;color:#565B52} .ed-hero-aside a::after{content:"↗";font-size:20px;line-height:1} } /* Consistent, keyboard- and touch-friendly interaction bounds. */ .nav-link,.ed-hero-aside a,.text-link,.ed-steps-link,.contact-tel,.contact-map-link{min-height:44px} .text-link,.contact-tel{display:inline-flex;align-items:center} /* ========================================================================== v09 | Full-viewport landing + shared inset content alignment Design intent: the homepage photograph is the screen-sized canvas, while the navigation, hero contents, editorial sections and footer share one comfortably inset grid. No other visuals, radius tokens or motion changed. ========================================================================= */ :root { --layout-content-max: 1320px; --layout-side-total: clamp(44px, 10vw, 128px); --layout-content-width: min(var(--layout-content-max), calc(100% - var(--layout-side-total))); --layout-edge: max(clamp(22px, 5vw, 64px), calc((100vw - var(--layout-content-max)) / 2)); --p-page: var(--layout-content-width); } .container, .site-footer .container { width: var(--layout-content-width); max-width: none; margin-inline: auto; } /* Remove historic extra nav-wrap padding so logo, page titles and footer align. */ .site-header .nav-wrap { width: var(--layout-content-width); padding-inline: 0; } /* The hero is intentionally full bleed, NOT a rounded content card. */ .page-home .ed-hero { width: 100%; max-width: none; margin: 0; padding: 0; } .page-home .ed-hero-media { height: 100svh; min-height: 0; width: 100%; border-radius: 0; } /* Keep every overlay item on the same horizontal grid as other sections. */ .page-home .ed-hero-eyebrow { left: var(--layout-edge); top: clamp(145px, 18svh, 200px); } .page-home .ed-scroll-indicator { right: var(--layout-edge); top: clamp(145px, 18svh, 200px); } .page-home .ed-hero-copy { left: var(--layout-edge); bottom: clamp(44px, 7svh, 96px); max-width: min(720px, 57%); } .page-home .ed-hero-aside { right: var(--layout-edge); bottom: clamp(40px, 7svh, 90px); } /* Float within the image without shifting the header vertically at load. */ .page-home .site-header:not(.scrolled) .nav-wrap { transform: none; padding-top: 0; } /* Tablet: protect room for two horizontal hero elements. */ @media (max-width: 1000px) and (min-width: 681px) { .page-home .ed-hero-copy { max-width: 60%; } .page-home .ed-hero-aside { right: var(--layout-edge); } } @media (max-width: 680px) { .page-home .site-header:not(.scrolled) .nav-wrap { transform: none; } .page-home .ed-hero-media { height: 100svh; min-height: 0; } .page-home .ed-hero-eyebrow { left: var(--layout-edge); top: clamp(96px, 14svh, 123px); } .page-home .ed-hero-copy { left: var(--layout-edge); right: var(--layout-edge); max-width: none; bottom: clamp(143px, 19svh, 183px); } .page-home .ed-hero-aside { left: var(--layout-edge); right: var(--layout-edge); bottom: max(17px, env(safe-area-inset-bottom)); width: auto; } } @media (max-width: 380px) and (max-height: 650px) { .page-home .ed-hero-eyebrow { top: 92px; } .page-home .ed-hero-copy { bottom: 130px; } .page-home .ed-hero-copy h1 { font-size: clamp(38px, 11vw, 44px); } .page-home .ed-hero-copy > p:not(.ed-kicker) { font-size: 12px; line-height: 1.45; } .page-home .ed-hero-actions { margin-top: 12px; } .page-home .ed-hero-aside { bottom: 12px; } } /* ============================================================================ v10 | Editorial inner page introductions + one useful homepage section. Retains the full-screen homepage hero from v09 without overrides. ============================================================================ */ :root { --intro-visual-radius: var(--ui-radius); } /* Inner-page heroes are part of a normal page flow, not oversized filled cards. */ body:not(.page-home) main > .interior-hero, body:not(.page-home) main > .contact-page { padding: clamp(43px, 5vw, 82px) 0 clamp(32px, 3.2vw, 53px) !important; background: transparent; } body:not(.page-home) main > .interior-hero > .interior-grid, body:not(.page-home) main > .contact-page > .contact-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(38px, 5.5vw, 100px); padding: 0; background: transparent; border: 0; border-radius: 0; min-height: 0; } body:not(.page-home) .interior-copy, body:not(.page-home) .contact-lead { padding:0; min-width:0; } body:not(.page-home) .interior-copy h1, body:not(.page-home) .contact-lead h1 { font-size: clamp(45px, 4.15vw, 70px); line-height: 1.085; letter-spacing: -.055em; max-width: 11.5em; margin: 23px 0 19px; } body:not(.page-home) .interior-copy .lead, body:not(.page-home) .contact-lead > p:not(.eyebrow) { font-size: clamp(15px, 1.06vw, 17px); line-height: 1.72; max-width: 510px; } body:not(.page-home) .interior-copy .text-link {margin-top:22px;} body:not(.page-home) .interior-photo, body:not(.page-home) .contact-image { margin: 0; width: 100%; height: clamp(305px, 27vw, 430px); overflow: hidden; border-radius: var(--intro-visual-radius); background:#e7e9e3; } body:not(.page-home) .interior-photo img, body:not(.page-home) .contact-image img { height:100%;width:100%;object-fit:cover; } body:not(.page-home) .interior-hero + .section {padding-top:clamp(35px,4.2vw,65px);} body:not(.page-home) .interior-hero + .class-jump {margin-top:0;} body:not(.page-home) .contact-page + .section {padding-top:clamp(34px,4.5vw,66px);} /* Small editorial chapter: practical first-visit steps, not another hero/card stack. */ .arrival-note { display:grid; grid-template-columns: minmax(0,.93fr) minmax(0,1.07fr); gap:clamp(40px,8vw,138px); align-items:start; padding-block:clamp(40px,5.1vw,80px) clamp(75px,8vw,123px); border-top:1px solid #e1e5dd; } .arrival-intro .ed-overline {display:block;margin-bottom:17px;color:#7F8A7D;} .arrival-intro h2 { font-family:var(--sans); font-weight:700; font-size:clamp(32px,3.4vw,56px); line-height:1.12; letter-spacing:-.055em; color:#494640; margin:0 0 26px; } .arrival-intro h2 em {font-family:Georgia,'Times New Roman',serif;font-style:normal;font-weight:400;color:#7F8A7D;} .arrival-intro .ed-inline-link {display:inline-flex;align-items:center;gap:14px;min-height:44px;padding-bottom:7px;} .arrival-list {list-style:none;margin:0;padding:0;} .arrival-list li {display:grid;grid-template-columns:40px minmax(0,1fr);gap:clamp(15px,2vw,28px);border-bottom:1px solid #e1e5dd;padding:18px 0 21px;} .arrival-list li:first-child {padding-top:2px;} .arrival-list li > span {font:700 12px/1.6 var(--sans);color:#7F8A7D;letter-spacing:.08em;padding-top:2px;} .arrival-list h3 {font:700 clamp(18px,1.45vw,23px)/1.25 var(--sans);letter-spacing:-.03em;color:#494640;margin-bottom:7px;} .arrival-list p {font:400 14px/1.65 var(--sans);color:#7F8A7D;max-width:440px;} @media(max-width:900px){ body:not(.page-home) main > .interior-hero > .interior-grid, body:not(.page-home) main > .contact-page > .contact-grid {gap:30px;} body:not(.page-home) .interior-photo, body:not(.page-home) .contact-image {height:clamp(280px,34vw,380px);} body:not(.page-home) .interior-copy h1, body:not(.page-home) .contact-lead h1 {font-size:clamp(40px,5.2vw,55px);} .arrival-note {gap:34px;} } @media(max-width:700px){ body:not(.page-home) main > .interior-hero, body:not(.page-home) main > .contact-page { padding: 29px 0 28px !important; } body:not(.page-home) main > .interior-hero > .interior-grid, body:not(.page-home) main > .contact-page > .contact-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:25px; padding:0; background:transparent; } body:not(.page-home) .interior-copy h1, body:not(.page-home) .contact-lead h1 { font-size:clamp(38px,9.5vw,52px); line-height:1.09; margin:17px 0 13px; } body:not(.page-home) .interior-copy .lead, body:not(.page-home) .contact-lead > p:not(.eyebrow) {font-size:14px;line-height:1.7;} body:not(.page-home) .interior-copy .text-link {margin-top:15px;} body:not(.page-home) .interior-photo, body:not(.page-home) .contact-image {width:100%;height:clamp(225px,61vw,320px);margin:0;} body:not(.page-home) .interior-hero + .section {padding-top:46px;} body:not(.page-home) .contact-page + .section {padding-top:45px;} .arrival-note {display:block;padding-top:47px;padding-bottom:73px;} .arrival-intro h2 {font-size:clamp(32px,8vw,45px);margin-bottom:16px;} .arrival-list {margin-top:25px;} .arrival-list li {grid-template-columns:32px minmax(0,1fr);gap:15px;padding:18px 0 19px;} .arrival-list h3 {font-size:19px;} .arrival-list p {font-size:13px;} } /* ======================================================================= v12 | Horizontal inner-page photographic mastheads. Reduced height, expanded horizontal composition, and a consistent gap between the FAQ band and the following CTA. Home is intentionally untouched. ======================================================================= */ :root { --inner-banner-radius:var(--ui-radius); } .inner-banner { position:relative; isolation:isolate; overflow:hidden; width:min(1720px,calc(100% - clamp(24px,2.8vw,46px))); height:clamp(212px,15.9vw,265px); margin:clamp(12px,1.1vw,18px) auto 0; border-radius:var(--inner-banner-radius); background:#565B52; } .inner-banner-image { position:absolute;inset:0; width:100%;height:100%; object-fit:cover; object-position:var(--banner-position,center); z-index:0; } .inner-banner::after { content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(39,39,36,.83) 0%,rgba(39,39,36,.61) 33%,rgba(39,39,36,.18) 74%,rgba(39,39,36,.07) 100%),linear-gradient(0deg,rgba(39,39,36,.18),transparent 55%); } .inner-banner-content { position:relative;z-index:2;height:100%; display:flex;flex-direction:column;align-items:flex-start;justify-content:center; padding-block:20px; } .inner-breadcrumb { display:flex;align-items:center;gap:11px; min-height:44px;color:rgba(255,255,255,.89); font-size:12px;font-weight:500; } .inner-breadcrumb a {display:inline-flex;align-items:center;min-height:44px;color:inherit;transition:color .2s ease;} .inner-breadcrumb a:hover {color:#fff;} .inner-breadcrumb span[aria-hidden] {opacity:.6;} .inner-breadcrumb [aria-current]{color:#fff;font-weight:700;} .inner-banner h1 { font-family:var(--sans); font-size:clamp(36px,3.6vw,58px); font-weight:700;line-height:1.08;letter-spacing:-.05em; color:#fff;text-wrap:balance;max-width:1000px; margin:6px 0 0; } /* Evenly spaced handover from the compact masthead to page content. */ main > .inner-banner + .section {padding-top:clamp(54px,5.1vw,76px);} main > .inner-banner + .class-jump {margin-top:clamp(28px,3.2vw,44px);} /* Avoid a CTA appearing to touch the FAQ band's background seam. */ main > .guide-band + .bottom-cta { margin-top:clamp(44px,5.1vw,76px); margin-bottom:clamp(70px,7vw,110px); } /* About: one image, one description; no repeating intro panel. */ .about-chapter {display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:clamp(42px,5vw,86px);align-items:center;} .about-chapter-photo {height:clamp(360px,36vw,525px);border-radius:var(--ui-radius);overflow:hidden;background:#e9ebe4;} .about-chapter-photo img{width:100%;height:100%;object-fit:cover;} .about-chapter-copy{min-width:0;} .about-chapter-copy h2{font-size:clamp(36px,3.6vw,55px);line-height:1.11;letter-spacing:-.05em;margin:20px 0 25px;color:var(--ink);} .about-chapter-copy > p:not(.eyebrow){font-size:clamp(15px,1.06vw,17px);line-height:1.8;color:#565B52;margin:0 0 18px;max-width:520px;} .about-chapter-copy .text-link{margin-top:10px;} @media (max-width:900px) { .inner-banner{height:clamp(200px,23vw,246px);} .inner-banner h1{font-size:clamp(34px,4.5vw,46px);} .about-chapter{gap:32px;} .about-chapter-photo{height:clamp(320px,44vw,420px);} .about-chapter-copy h2{font-size:clamp(34px,4.5vw,46px);} } @media (max-width:700px) { .inner-banner{width:calc(100% - 24px);height:clamp(188px,44vw,220px);margin:12px auto 0;} .inner-banner-content{padding-block:15px;} .inner-banner::after{background:linear-gradient(90deg,rgba(39,39,36,.82) 0%,rgba(39,39,36,.57) 64%,rgba(39,39,36,.27) 100%);} .inner-breadcrumb{font-size:11px;gap:9px;min-height:44px;} .inner-banner h1{font-size:clamp(30px,8vw,40px);max-width:98%;line-height:1.12;margin-top:5px;} main > .inner-banner + .section{padding-top:clamp(39px,9vw,56px);} main > .inner-banner + .class-jump{margin-top:26px;} main > .guide-band + .bottom-cta {margin-top:38px;margin-bottom:65px;} .about-chapter{grid-template-columns:minmax(0,1fr);gap:32px;} .about-chapter-photo{height:clamp(285px,78vw,410px);} .about-chapter-copy h2{font-size:clamp(36px,9vw,48px);margin:16px 0 21px;} .about-chapter-copy > p:not(.eyebrow){font-size:15px;line-height:1.75;margin-bottom:14px;} } @media (max-width:370px) { .inner-banner{height:192px;} .inner-banner h1{font-size:clamp(29px,8.4vw,34px);} .inner-breadcrumb{font-size:11px;} } /* ========================================================================== 3P v13 — editorial interior redesign, November 2026 Deliberately leaves .ed-hero, .inner-banner, header, footer untouched. Single radius token. Room to breathe, not a card-first visual language. ========================================================================== */ :root { --v13-ink: #494640; --v13-muted: #7F8A7D; --v13-line: #dfe4db; --v13-paper: #f4f2ec; --v13-sage: #7F8A7D; --v13-deep: #494640; --v13-cream: #f5f4ef; --v13-space: clamp(78px, 9vw, 130px); } /* Preserve v12 inner banners while giving the content below a measured rhythm. */ main > .inner-banner + .v13-space {padding-top:clamp(62px,6.3vw,96px)} .v13-space {padding-top:var(--v13-space);padding-bottom:var(--v13-space)} .v13-space + .v13-space {padding-top:0} .v13-kicker {display:flex;align-items:center;gap:12px;color:#7F8A7D;font:700 10px/1.45 var(--sans);letter-spacing:.17em;text-transform:uppercase} .v13-kicker::before {content:"";display:block;height:1px;width:26px;flex:none;background:currentColor;opacity:.72} .v13-display, .v13-about-photo-side h2, .v13-heading-row h2, .v13-services-note h2,.v13-studio-focus h2,.v13-studio-visit h2, .v13-first-list h2,.v13-first-check h2,.v13-first-lead h2, .v13-cta h2,.v13-home-first h2,.v13-home-feature h2, .v13-contact-left h2,.v13-map-header h2,.v13-principles h2, .v13-about-wide h2,.v13-faq-wrap h2,.v13-location-strip h2 { font-family:var(--sans);font-weight:700;letter-spacing:-.056em;line-height:1.1;color:var(--v13-ink);font-style:normal; } .v13-display {font-size:clamp(44px,4.85vw,78px);margin-top:27px;text-wrap:balance} .v13-display span, .v13-about-photo-side h2 span,.v13-heading-row h2 span, .v13-services-note h2 span,.v13-studio-visit h2 span,.v13-first-list h2 span, .v13-first-check h2 span,.v13-home-first h2 span,.v13-principles h2 span {color:var(--v13-sage)} .v13-intro-side {padding-top:clamp(36px,6.6vw,102px)} .v13-intro-side p {font-size:clamp(16px,1.32vw,19px);line-height:1.83;color:#565B52;max-width:540px;margin:0 0 20px;font-weight:400} .v13-link {min-height:44px;display:inline-flex;align-items:center;gap:25px;justify-content:space-between;border-bottom:1px solid #C4C9BE;padding:8px 0;font:700 12px/1.4 var(--sans);color:var(--v13-ink);transition:color .2s,border-color .2s} .v13-link>span:last-child {font-size:18px;font-weight:400;line-height:1;transition:transform .3s var(--ease)} .v13-link:hover {color:#7F8A7D;border-color:#7F8A7D} .v13-link:hover>span:last-child {transform:translate(2px,-2px)} .v13-inline-end {display:flex;justify-content:flex-end;margin-top:36px} .v13-home-intro, .v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead {display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:clamp(42px,7vw,110px);align-items:start} .v13-home-intro .v13-intro-side,.v13-about-lead .v13-intro-side,.v13-services-lead .v13-intro-side,.v13-studio-lead .v13-intro-side,.v13-first-lead .v13-intro-side,.v13-contact-lead .v13-intro-side {min-width:0} .v13-action {display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:52px;border:1px solid transparent;border-radius:var(--ui-radius);padding:12px 21px;font:700 12px/1.25 var(--sans);white-space:nowrap;cursor:pointer;transition:background .22s,color .22s,transform .3s var(--ease)} .v13-action>span {font-size:17px;font-weight:400;line-height:1} .v13-action:hover {transform:translateY(-2px)} .v13-action-dark {background:var(--v13-deep);color:#fff} .v13-action-dark:hover {background:#565B52} .v13-action-light {background:#fcfaf7;color:var(--v13-ink)} .v13-action-light:hover {background:#eef2e9} .v13-action-outline {border-color:#DDE0D8;color:var(--v13-ink)} .v13-action-outline:hover {border-color:var(--v13-ink);background:#e9efe6} .v13-cta-wrap {padding-top:clamp(28px,4vw,58px);padding-bottom:clamp(90px,11vw,145px)} .v13-cta {background:#7F8A7D;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:34px;min-height:252px;padding:clamp(32px,5.4vw,66px);border-radius:var(--ui-radius)} .v13-cta .v13-kicker{color:#fff;opacity:.83}.v13-cta h2 {color:#fff;font-size:clamp(34px,3.1vw,53px);margin:20px 0 12px;max-width:730px} .v13-cta p:not(.v13-kicker) {font-size:14px;line-height:1.7;max-width:550px;color:#eff3ee} .v13-cta .v13-action {flex:none} /* Home / only content below the original fullscreen landing changes. */ .v13-home-feature {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(42px,6.1vw,95px);align-items:center} .v13-home-feature-photo {overflow:hidden;border-radius:var(--ui-radius);height:clamp(400px,39vw,570px);background:#dde3d9} .v13-home-feature-photo img {width:100%;height:100%;object-fit:cover} .v13-home-feature-copy {position:relative;padding-block:45px;min-width:0} .v13-home-feature h2 {font-size:clamp(39px,3.6vw,59px);margin:24px 0 27px} .v13-home-feature-copy>p:not(.v13-kicker) {max-width:415px;font-size:16px;color:var(--v13-muted);line-height:1.85;margin-bottom:25px} .v13-feature-foot {display:block;margin-top:clamp(70px,9vw,150px);color:#7F8A7D;font-size:10px;letter-spacing:.17em;font-weight:700} .v13-feature-foot i{font-style:normal;margin:0 8px;color:#C4C9BE} .v13-heading-row {display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:start;padding-bottom:45px} .v13-heading-row>div {display:flex;justify-content:space-between;align-items:end;gap:40px} .v13-heading-row h2 {font-size:clamp(39px,3.9vw,61px)} .v13-heading-row p {font-size:14px;line-height:1.75;color:var(--v13-muted);max-width:315px;margin-bottom:4px} .v13-home-lessons-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px} .v13-home-lesson {display:block;min-width:0;border-top:1px solid var(--v13-line);padding-top:14px} .v13-home-lesson-photo {height:clamp(230px,25vw,360px);overflow:hidden;border-radius:var(--ui-radius);background:#e4e9df} .v13-home-lesson img {height:100%;width:100%;transition:transform .6s var(--ease)} .v13-home-lesson:hover img{transform:scale(1.035)} .v13-home-lesson-meta {display:flex;align-items:center;justify-content:space-between;margin-top:18px;color:#7F8A7D;letter-spacing:.14em;font-size:10px;font-weight:700} .v13-home-lesson-meta span:last-child {font-size:18px;letter-spacing:0;color:var(--v13-ink)} .v13-home-lesson h3 {font:700 clamp(21px,1.75vw,28px)/1.24 var(--sans);letter-spacing:-.04em;color:var(--v13-ink);margin:12px 0 7px} .v13-home-lesson p {font-size:14px;line-height:1.65;color:var(--v13-muted);max-width:350px} .v13-home-first {background:#eff0e8} .v13-home-first-grid {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(52px,8vw,130px);align-items:center} .v13-home-first h2 {font-size:clamp(40px,4.1vw,65px);margin:27px 0} .v13-home-first p:not(.v13-kicker) {font-size:16px;line-height:1.85;color:#7F8A7D;max-width:500px;margin-bottom:30px} .v13-home-first-img {height:clamp(340px,38vw,510px);border-radius:var(--ui-radius);overflow:hidden} .v13-home-first-img img {height:100%;width:100%;object-position:center 60%} .v13-location-strip {display:flex;justify-content:space-between;align-items:center;gap:35px;border-bottom:1px solid var(--v13-line);padding-block:70px 88px} .v13-location-strip h2 {font-size:clamp(28px,3vw,44px);margin:17px 0 8px} .v13-location-strip p {font-size:14px;color:var(--v13-muted)} /* About / non-card editorial picture pair, information rows. */ .v13-about-photo {display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:clamp(40px,6.5vw,100px);align-items:center} .v13-about-photo figure{min-width:0} .v13-about-photo figure img {width:100%;height:clamp(400px,39vw,560px);border-radius:var(--ui-radius);object-fit:cover} .v13-about-photo figure figcaption,.v13-studio-focus figcaption {display:block;margin-top:16px;color:#7F8A7D;font:700 10px/1.5 var(--sans);letter-spacing:.16em} .v13-about-photo-side h2 {font-size:clamp(36px,3.6vw,60px);margin:25px 0 28px} .v13-about-photo-side p:not(.v13-kicker) {font-size:16px;line-height:1.85;color:var(--v13-muted);margin-bottom:25px;max-width:470px} .v13-principles {display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(48px,7vw,110px)} .v13-principles .v13-section-title h2 {font-size:clamp(39px,3.6vw,59px);margin-top:25px} .v13-principle-list article {display:grid;grid-template-columns:55px 1fr;gap:25px;padding:26px 2px;border-top:1px solid var(--v13-line)} .v13-principle-list article:last-child {border-bottom:1px solid var(--v13-line)} .v13-principle-list article>span {color:#C4C9BE;font-size:12px;font-weight:700;letter-spacing:.1em;margin-top:6px} .v13-principle-list h3 {font:700 clamp(21px,2vw,30px)/1.2 var(--sans);letter-spacing:-.04em;color:var(--v13-ink);margin-bottom:9px} .v13-principle-list p {font-size:15px;line-height:1.75;color:var(--v13-muted);max-width:520px} .v13-about-wide {display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(50px,8vw,115px);align-items:center} .v13-about-wide-image {height:clamp(330px,35vw,480px);overflow:hidden;border-radius:var(--ui-radius)} .v13-about-wide-image img {width:100%;height:100%} .v13-about-wide h2 {font-size:clamp(38px,3.4vw,56px);margin:27px 0 20px} .v13-about-wide p {font-size:15px;color:var(--v13-muted);line-height:1.7;margin-bottom:25px;max-width:410px} /* Services / three asymmetric but consistent editorial columns, no redundant buttons. */ .v13-program-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(19px,2vw,30px)} .v13-program {min-width:0;scroll-margin-top:120px} .v13-program-media {height:clamp(300px,32vw,460px);overflow:hidden;border-radius:var(--ui-radius);background:#e6e9e2} .v13-program-media img {height:100%;width:100%;object-fit:cover} .v13-program:nth-child(2) .v13-program-media img {object-position:center} .v13-program-top {display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--v13-line);padding:17px 0 19px;color:#7F8A7D;font:700 10px/1.4 var(--sans);letter-spacing:.12em} .v13-program h2 {font:700 clamp(25px,2.5vw,40px)/1.14 var(--sans);letter-spacing:-.047em;color:var(--v13-ink);margin:25px 0 16px} .v13-program h2 span {color:var(--v13-sage)} .v13-program p {font-size:15px;line-height:1.78;color:var(--v13-muted);max-width:400px;margin-bottom:20px} .v13-program-foot {font:700 11px/1.5 var(--sans);color:var(--v13-ink);padding-top:15px;border-top:1px solid var(--v13-line)} .v13-services-note {background:#eff1eb} .v13-services-note-grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(55px,10vw,160px)} .v13-services-note h2 {font-size:clamp(39px,3.7vw,60px);margin-top:26px} .v13-services-note-grid>div:last-child {padding-top:44px} .v13-services-note-grid>div:last-child p {font-size:16px;line-height:1.83;color:#565B52;margin-bottom:16px;max-width:500px} .v13-services-note .v13-link {margin-top:12px} .v13-faq-wrap {display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(50px,8vw,125px)} .v13-faq-intro h2 {font-size:clamp(36px,3.8vw,58px);margin:24px 0 18px} .v13-faq-intro p:not(.v13-kicker) {font-size:15px;line-height:1.78;max-width:350px;color:var(--v13-muted)} .v13-faq-list {border-top:1px solid var(--v13-line)} .v13-faq-list details {border-bottom:1px solid var(--v13-line)} .v13-faq-list summary {display:flex;justify-content:space-between;gap:25px;align-items:center;min-height:76px;padding:22px 3px;cursor:pointer;list-style:none;color:var(--v13-ink);font:700 15px/1.5 var(--sans)} .v13-faq-list summary::-webkit-details-marker {display:none} .v13-faq-list summary::marker {content:""} .v13-plus {font:400 22px/1 var(--sans);color:#7F8A7D;transition:transform .2s;flex:none} .v13-faq-list details[open] .v13-plus{transform:rotate(45deg)} .v13-faq-list details>p {font-size:14px;line-height:1.85;color:var(--v13-muted);padding:0 42px 25px 3px;max-width:660px} /* Studio / gallery without fake counts, sliders, or fabricated testimonials. */ .v13-gallery {display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;column-gap:clamp(20px,3.1vw,44px);row-gap:20px} .v13-gallery figure {min-width:0;display:flex;flex-direction:column} .v13-gallery-main {grid-row:1 / 3} .v13-gallery figure img {width:100%;border-radius:var(--ui-radius);height:clamp(210px,23vw,330px);object-fit:cover;min-height:0} .v13-gallery .v13-gallery-main img {height:clamp(466px,47vw,710px)} .v13-gallery figcaption {padding-top:12px;font:700 10px/1.5 var(--sans);letter-spacing:.13em;color:#7F8A7D} .v13-gallery figcaption span {margin-right:12px;color:#C4C9BE} .v13-studio-focus {background:#f0f1eb} .v13-studio-focus-grid {display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(55px,8vw,125px);align-items:center} .v13-studio-focus h2 {font-size:clamp(37px,4vw,65px);margin:26px 0} .v13-studio-focus p:not(.v13-kicker) {font-size:16px;line-height:1.8;color:var(--v13-muted);max-width:400px;margin-bottom:25px} .v13-studio-focus figure img {width:100%;height:clamp(350px,37vw,520px);border-radius:var(--ui-radius)} .v13-studio-visit {display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:end} .v13-studio-visit h2 {font-size:clamp(40px,4.1vw,66px);margin-top:24px} .v13-studio-visit>div:last-child p {color:var(--v13-muted);font-size:17px;line-height:1.8;margin-bottom:20px} /* First visit / numbered timeline with one purposeful large image. */ .v13-first-process {display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(52px,8vw,125px);align-items:center} .v13-first-photo {height:clamp(480px,55vw,720px);overflow:hidden;border-radius:var(--ui-radius)} .v13-first-photo img {height:100%;width:100%} .v13-first-list h2 {font-size:clamp(38px,3.8vw,64px);margin:24px 0 38px} .v13-step {display:grid;grid-template-columns:43px 1fr;gap:20px;padding:23px 0;border-top:1px solid var(--v13-line)} .v13-step:last-child {border-bottom:1px solid var(--v13-line)} .v13-step>span {font-size:11px;color:#7F8A7D;font-weight:700;margin-top:4px} .v13-step h3 {font:700 clamp(19px,1.6vw,26px)/1.3 var(--sans);letter-spacing:-.025em;color:var(--v13-ink);margin-bottom:9px} .v13-step p {font-size:14px;line-height:1.7;color:var(--v13-muted)} .v13-first-check {background:#f0f1eb} .v13-first-check-grid {display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(60px,10vw,140px)} .v13-first-check h2 {font-size:clamp(39px,4vw,64px);margin-top:27px} .v13-first-checks>div {display:grid;grid-template-columns:160px 1fr;gap:28px;border-top:1px solid #d5dbd1;padding:22px 0} .v13-first-checks>div:last-child {border-bottom:1px solid #d5dbd1} .v13-first-checks span {font-size:10px;line-height:1.6;letter-spacing:.1em;font-weight:700;color:#7F8A7D} .v13-first-checks p {font-size:15px;line-height:1.75;color:#565B52} /* Contact / phone and location remain actionable; maps load only on click. */ .v13-contact-split {display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:stretch} .v13-contact-left {padding-top:20px} .v13-contact-left h2 {font-size:clamp(38px,3.7vw,62px);margin-bottom:16px} .v13-contact-left>p {font-size:16px;line-height:1.8;color:var(--v13-muted);margin-bottom:33px} .v13-contact-line {display:grid;grid-template-columns:110px 1fr;gap:22px;border-top:1px solid var(--v13-line);padding:25px 0} .v13-contact-line>span {font-size:11px;font-weight:700;letter-spacing:.11em;color:#7F8A7D;padding-top:7px} .v13-contact-line address,.v13-phone {font:700 clamp(18px,1.6vw,25px)/1.48 var(--sans);letter-spacing:-.02em;color:var(--v13-ink);font-style:normal} .v13-phone {display:inline-flex;justify-content:space-between;align-items:center;gap:12px} .v13-phone>span{font-size:17px;font-weight:400} .v13-contact-buttons {display:flex;align-items:center;gap:10px;margin-top:21px;flex-wrap:wrap} .v13-contact-photo {height:clamp(440px,47vw,640px);overflow:hidden;border-radius:var(--ui-radius)} .v13-contact-photo img {height:100%;width:100%;object-fit:cover} .v13-map-section {padding-bottom:clamp(90px,11vw,150px)} .v13-map-header {display:grid;grid-template-columns:.4fr 1fr;gap:50px;margin-bottom:28px;align-items:start} .v13-map-header h2 {font-size:clamp(32px,3.3vw,50px);margin:0 0 8px} .v13-map-header p {font-size:14px;color:var(--v13-muted)} .v13-map-shell {position:relative;height:clamp(360px,34vw,490px);border-radius:var(--ui-radius);background:#e8ede6;overflow:hidden;isolation:isolate} .v13-map-shell::before {content:"";position:absolute;inset:-15%;opacity:.43;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 68px,rgba(154,171,149,.39) 69px,transparent 71px),repeating-linear-gradient(90deg,transparent 0,transparent 97px,rgba(154,171,149,.34) 98px,transparent 101px);transform:rotate(-12deg)} .v13-map-placeholder {position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center} .v13-map-pin {display:grid;place-items:center;font-size:34px;color:#565B52;width:62px;height:62px;border:1px solid #DDE0D8;border-radius:var(--ui-radius);margin-bottom:10px} .v13-map-placeholder p {font:700 22px/1.3 var(--sans);color:var(--v13-ink)} .v13-map-placeholder>span:not(.v13-map-pin) {color:var(--v13-muted);font-size:13px;margin-bottom:20px} .v13-map-shell iframe {display:block;position:absolute;z-index:2;inset:0;width:100%;height:100%;border:0} .v13-map-shell.is-loaded .v13-map-placeholder {display:none} .v13-map-out {display:inline-flex;align-items:center;min-height:44px;font:700 12px var(--sans);margin-top:14px;border-bottom:1px solid #C4C9BE;color:var(--v13-ink)} /* Responsive: no layout clipping or giant empty boxes. */ @media(max-width:1150px) { .v13-heading-row>div {display:block} .v13-heading-row>div p {margin-top:22px;max-width:500px} .v13-contact-line {grid-template-columns:85px 1fr} .v13-program h2{font-size:clamp(24px,2.6vw,35px)} } @media(max-width:900px) { :root {--v13-space:80px} .v13-home-intro,.v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead {gap:40px} .v13-intro-side {padding-top:42px} .v13-home-feature,.v13-about-photo,.v13-about-wide,.v13-first-process,.v13-contact-split,.v13-studio-focus-grid {gap:37px} .v13-home-feature-photo {height:430px} .v13-home-feature h2,.v13-about-photo-side h2{font-size:clamp(34px,4.5vw,46px)} .v13-home-first-grid {gap:36px} .v13-home-first-img {height:395px} .v13-program-grid {gap:15px} .v13-program-media {height:300px} .v13-program-top {font-size:9px} .v13-program p {font-size:14px} .v13-first-checks>div {grid-template-columns:110px 1fr} .v13-cta {padding:36px} } @media(max-width:700px) { :root {--v13-space:66px} main > .inner-banner + .v13-space {padding-top:52px} .v13-home-intro,.v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead, .v13-home-feature,.v13-home-first-grid,.v13-about-photo,.v13-principles,.v13-about-wide, .v13-services-note-grid,.v13-faq-wrap,.v13-studio-focus-grid,.v13-studio-visit, .v13-first-process,.v13-first-check-grid,.v13-contact-split {grid-template-columns:minmax(0,1fr)} .v13-home-intro,.v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead {gap:17px} .v13-display {font-size:clamp(36px,9.2vw,54px);margin-top:18px} .v13-intro-side {padding:0} .v13-intro-side p {font-size:15px;line-height:1.75;margin-bottom:14px} .v13-home-feature,.v13-about-photo,.v13-about-wide,.v13-first-process,.v13-contact-split,.v13-studio-focus-grid {gap:28px} .v13-home-feature-photo {height:clamp(285px,77vw,450px)} .v13-home-feature-copy {padding:6px 0 0} .v13-home-feature h2 {font-size:clamp(34px,8vw,46px);margin:17px 0} .v13-home-feature-copy>p:not(.v13-kicker) {font-size:15px;margin-bottom:14px} .v13-feature-foot {margin-top:38px} .v13-heading-row {display:block;padding-bottom:29px} .v13-heading-row>div {margin-top:18px} .v13-heading-row h2 {font-size:clamp(34px,8.2vw,48px)} .v13-heading-row>div p {font-size:14px;margin-top:15px} .v13-home-lessons-grid {grid-template-columns:1fr;gap:32px} .v13-home-lesson-photo {height:clamp(220px,68vw,365px)} .v13-home-lesson h3 {font-size:24px} .v13-inline-end {margin-top:20px;justify-content:flex-start} .v13-home-first-img {height:330px} .v13-home-first h2 {font-size:clamp(34px,8vw,46px);margin:17px 0} .v13-home-first p:not(.v13-kicker){font-size:15px;margin-bottom:22px} .v13-location-strip {display:block;padding-block:53px 65px} .v13-location-strip h2 {font-size:31px} .v13-location-strip .v13-link {margin-top:16px} .v13-about-photo figure img {height:clamp(280px,75vw,425px)} .v13-about-photo-side h2 {margin:18px 0} .v13-about-photo-side p:not(.v13-kicker){font-size:15px;margin-bottom:15px} .v13-principles .v13-section-title h2 {font-size:clamp(34px,8vw,46px);margin:18px 0 28px} .v13-principle-list article {gap:12px;grid-template-columns:34px 1fr;padding:20px 0} .v13-principle-list h3 {font-size:22px} .v13-principle-list p {font-size:14px} .v13-about-wide-image {height:300px} .v13-about-wide h2 {font-size:clamp(34px,8vw,46px);margin:17px 0} .v13-program-grid {grid-template-columns:1fr;gap:42px} .v13-program-media {height:clamp(275px,76vw,400px)} .v13-program h2 {font-size:clamp(30px,8vw,39px);margin:18px 0 12px} .v13-program p {font-size:15px} .v13-services-note-grid,.v13-first-check-grid {gap:29px} .v13-services-note h2,.v13-first-check h2 {font-size:clamp(34px,8vw,47px);margin-top:18px} .v13-services-note-grid>div:last-child {padding-top:0} .v13-services-note-grid>div:last-child p {font-size:15px} .v13-faq-wrap {gap:28px} .v13-faq-intro h2 {font-size:clamp(35px,8vw,46px);margin:17px 0 10px} .v13-faq-list summary {min-height:67px;padding:17px 0;font-size:14px} .v13-gallery {grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px} .v13-gallery-main {grid-column:1/3;grid-row:auto} .v13-gallery .v13-gallery-main img {height:clamp(275px,76vw,450px)} .v13-gallery figure img {height:clamp(180px,43vw,280px)} .v13-gallery figcaption {font-size:9px} .v13-studio-focus h2 {font-size:clamp(35px,8vw,47px);margin:17px 0} .v13-studio-focus figure img {height:clamp(260px,72vw,385px)} .v13-studio-visit {gap:20px} .v13-studio-visit h2 {font-size:clamp(37px,8.3vw,49px);margin-top:18px} .v13-studio-visit>div:last-child p {font-size:15px} .v13-first-photo {height:clamp(300px,85vw,440px)} .v13-first-list h2 {font-size:clamp(36px,8vw,48px);margin:18px 0 25px} .v13-step {padding:21px 0;gap:11px;grid-template-columns:30px 1fr} .v13-first-checks>div {grid-template-columns:1fr;gap:8px;padding:18px 0} .v13-first-checks p {font-size:14px} .v13-contact-left {padding:0} .v13-contact-left h2 {font-size:clamp(36px,8vw,49px)} .v13-contact-line {grid-template-columns:79px 1fr;gap:10px;padding:20px 0} .v13-phone,.v13-contact-line address {font-size:18px} .v13-contact-photo {height:clamp(280px,80vw,440px)} .v13-contact-buttons {gap:8px} .v13-action {padding:12px 15px;min-height:48px;gap:17px} .v13-map-header {display:block;margin-bottom:20px} .v13-map-header>div {margin-top:16px} .v13-map-shell {height:370px} .v13-cta-wrap {padding-block:30px 78px} .v13-cta {display:block;min-height:auto;padding:28px 24px} .v13-cta h2 {font-size:clamp(32px,7.8vw,44px);margin:19px 0 12px} .v13-cta p:not(.v13-kicker) {font-size:14px} .v13-cta .v13-action {margin-top:22px} } @media(max-width:380px) { .v13-display {font-size:35px} .v13-contact-line {grid-template-columns:65px 1fr;gap:8px} .v13-phone,.v13-contact-line address {font-size:16px} .v13-contact-buttons {align-items:stretch} .v13-contact-buttons .v13-action {width:100%} .v13-gallery figcaption {letter-spacing:0;font-size:9px} } @media(prefers-reduced-motion:reduce) { .v13-action,.v13-link>span:last-child,.v13-home-lesson img {transition:none!important} } /* Backwards-compatible old lesson anchors from v12 */ .v13-anchor {display:block;position:relative;scroll-margin-top:120px;height:0} /* ===== APPROVED 3P / SOFT NATURE DESIGN SYSTEM ===== */ :root { --3p-ivory:#F5F1E9; --3p-greige:#C4C9BE; --3p-greige-deep:#788578; --3p-oat:#E6DDCF; --3p-oak:#C5A887; --3p-butter:#F0DFAF; --3p-burgundy:#79434C; --3p-graphite:#494640; --3p-paper:#FBF9F4; --3p-muted:#696A61; --3p-line:#DCD8CE; --cream:var(--3p-ivory);--white:var(--3p-paper); --ink:var(--3p-graphite);--stone:var(--3p-graphite); --sage:var(--3p-greige);--sage-dark:var(--3p-greige-deep); --sage-pale:#EBECE6;--terra:var(--3p-butter); --line:var(--3p-line);--muted:var(--3p-muted); --ed-canvas:var(--3p-paper);--ed-ink:var(--3p-graphite); --ed-sage:var(--3p-greige);--ed-green:var(--3p-graphite); --ed-line:var(--3p-line);--p-cream:var(--3p-paper); --p-forest:var(--3p-graphite);--p-surface:var(--3p-paper); --p-stroke:var(--3p-line);--ui-ink:var(--3p-graphite); --ui-subtle:var(--3p-muted);--ui-soft:var(--3p-ivory); --ui-stroke:var(--3p-line); --v13-ink:var(--3p-graphite);--v13-muted:var(--3p-muted); --v13-line:var(--3p-line);--v13-paper:var(--3p-ivory); --v13-sage:var(--3p-greige-deep); --v13-deep:var(--3p-graphite);--v13-cream:var(--3p-ivory); } body{background:var(--3p-paper);color:var(--3p-graphite)} body:not(.page-home) main {background:var(--3p-paper)} ::selection{background:var(--3p-greige);color:var(--3p-graphite)} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--3p-greige-deep);outline-offset:3px} /* Header keeps the approved full-width landing and mobile nav behavior. */ body:not(.page-home) .site-header{background:rgba(251,249,244,.97)} .site-header.scrolled,body.menu-open .site-header{background:rgba(251,249,244,.98)!important} .site-header.scrolled .nav-link,.site-header.scrolled .brand,.site-header.scrolled .book-pill{color:var(--3p-graphite)} .desktop-nav .nav-link.is-active, .mobile-nav a[aria-current="page"]{color:var(--3p-graphite)} .book-pill{background:var(--3p-greige);color:var(--3p-graphite);border-color:var(--3p-greige)} .book-pill:hover{background:#B5BFB2;border-color:#B5BFB2;color:var(--3p-graphite)} .mobile-nav{background:var(--3p-paper)} /* Hero image now shows warm ivory, burgundy reformers and greige interior fittings. */ .ed-hero-img{object-position:55% 50%} .ed-hero-gradient {background:linear-gradient(90deg,rgba(34,35,32,.73) 0%,rgba(38,37,33,.46) 36%,rgba(38,37,33,.14) 76%,rgba(38,37,33,.18) 100%),linear-gradient(0deg,rgba(32,32,29,.43),transparent 42%)} .page-home .ed-hero-media{background:var(--3p-graphite)} .ed-button-primary {background:var(--3p-greige);color:#292E29;border-color:var(--3p-greige)} .ed-button-primary:hover {background:#E1E3DA;color:#292E29;border-color:#E1E3DA} .ed-hero-copy .ed-button-ghost{border-color:rgba(255,255,255,.72)} .ed-hero-copy .ed-button-ghost:hover{background:rgba(255,255,255,.13)} /* Inner page photographic bands stay compact, with neutral shading rather than forest-green. */ .inner-banner{background:var(--3p-graphite)} .inner-banner::after{background:linear-gradient(90deg,rgba(42,42,38,.83) 0%,rgba(42,42,38,.63) 34%,rgba(42,42,38,.2) 74%,rgba(42,42,38,.07) 100%)} /* Signature surface / friendly, legible CTA. */ .v13-cta{background:var(--3p-greige);color:var(--3p-graphite)} .v13-cta h2,.v13-cta .v13-kicker{color:var(--3p-graphite)} .v13-cta p:not(.v13-kicker){color:#4B514B} .v13-cta .v13-action-light{background:var(--3p-graphite);color:var(--3p-paper)} .v13-cta .v13-action-light:hover{background:#35352F;color:white} .v13-cta .v13-action-dark{background:var(--3p-graphite);color:var(--3p-paper)} .v13-home-first,.v13-first-check,.v13-services-note,.v13-studio-focus{background:#F0EEE7} .v13-home-feature-photo,.v13-home-lesson-photo,.v13-program-media,.v13-map-shell{background:var(--3p-oat)} .v13-kicker,.v13-feature-foot,.v13-home-lesson-meta,.v13-program-top{color:#6B796C} .v13-display span,.v13-about-photo-side h2 span,.v13-heading-row h2 span, .v13-services-note h2 span,.v13-studio-visit h2 span,.v13-first-list h2 span, .v13-first-check h2 span,.v13-home-first h2 span,.v13-principles h2 span{color:#798779} .v13-action-dark{background:var(--3p-graphite);color:var(--3p-paper)} .v13-action-dark:hover{background:#33352F;color:white} .v13-action-light{background:var(--3p-ivory);color:var(--3p-graphite)} .v13-action-light:hover{background:var(--3p-oat)} .v13-action-outline{border-color:#A9B1A6;color:var(--3p-graphite)} .v13-action-outline:hover{background:var(--3p-oat);border-color:var(--3p-graphite)} .v13-link:hover{color:#596A5A;border-color:#596A5A} .v13-map-shell::before{background-image:repeating-linear-gradient(0deg,transparent 0,transparent 68px,rgba(154,160,146,.24) 69px,transparent 71px),repeating-linear-gradient(90deg,transparent 0,transparent 97px,rgba(154,160,146,.2) 98px,transparent 101px)} .v13-map-pin{color:var(--3p-graphite);border-color:var(--3p-greige-deep)} /* Footer: warm graphite, never the previous dark forest. */ .site-footer{background:var(--3p-graphite);color:#F5F1E9} .footer-intro h2 em{color:#D8DACF} .site-footer a:hover{color:var(--3p-butter)} /* On mobile, hero copy must stay legible over bright imagery. */ @media(max-width:700px){ .ed-hero-img{object-position:55% 55%} .ed-hero-gradient{background:linear-gradient(0deg,rgba(29,30,28,.87) 0%,rgba(29,30,28,.48) 49%,rgba(29,30,28,.29) 100%)} .inner-banner::after{background:linear-gradient(90deg,rgba(42,42,38,.81) 0%,rgba(42,42,38,.56) 65%,rgba(42,42,38,.25) 100%)} } @media(prefers-reduced-motion:reduce){.ed-hero-img{transition:none}} .ed-hero-picture{position:absolute;inset:0;display:block;z-index:-2} .ed-hero-picture .ed-hero-img{position:absolute;inset:0;z-index:auto} /* ============================================================ 3P v15 — consistent frosted-glass navigation, all scroll states One translucent neutral glass surface; no dark/opaque color swap. ============================================================ */ :root{--3p-glass-fill:rgba(250,249,245,.76);--3p-glass-stroke:rgba(255,255,255,.60);--3p-glass-ink:#353A35} .site-header,.site-header.scrolled, .page-home .site-header.scrolled, body.menu-open .site-header{ background:rgba(250,249,245,.70)!important; -webkit-backdrop-filter:blur(22px) saturate(1.12); backdrop-filter:blur(22px) saturate(1.12); border-bottom:1px solid rgba(255,255,255,.38); box-shadow:0 2px 22px rgba(37,40,36,.045); transition:background .28s ease,box-shadow .28s ease,border-color .28s ease; } /* The unscrolled home header remains visually clear over the hero. */ .page-home .site-header:not(.scrolled):not(:has(.menu-toggle[aria-expanded="true"])){ background:transparent!important; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; box-shadow:none; } /* Same glass capsule on hero, after scrolling and on all inner pages. */ .desktop-nav, .page-home .site-header:not(.scrolled) .desktop-nav, .page-home .site-header.scrolled .desktop-nav{ position:relative; isolation:isolate; overflow:hidden; background:var(--3p-glass-fill)!important; border:1px solid var(--3p-glass-stroke)!important; -webkit-backdrop-filter:blur(24px) saturate(1.18)!important; backdrop-filter:blur(24px) saturate(1.18)!important; box-shadow:0 5px 24px rgba(35,40,35,.10),inset 0 1px 0 rgba(255,255,255,.55); transition:box-shadow .25s ease,border-color .25s ease; } /* Reflected light is subtle, always transparent, never a solid grey tint. */ .desktop-nav::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.27),rgba(255,255,255,.03) 62%,rgba(255,255,255,.14)); } .desktop-nav .nav-link, .page-home .site-header:not(.scrolled) .desktop-nav .nav-link, .page-home .site-header.scrolled .desktop-nav .nav-link{ color:var(--3p-glass-ink)!important; background:transparent; transition:background-color .22s ease,color .22s ease; } .desktop-nav .nav-link:is(:hover,:focus-visible,.is-active), .page-home .site-header:not(.scrolled) .desktop-nav .nav-link:is(:hover,:focus-visible,.is-active), .page-home .site-header.scrolled .desktop-nav .nav-link:is(:hover,:focus-visible,.is-active){ background:rgba(255,255,255,.83)!important; color:#30372F!important; box-shadow:0 1px 5px rgba(31,35,30,.055); } /* Branding and action preserve adequate contrast when the header is frosted. */ .site-header.scrolled .brand,body.menu-open .site-header .brand{color:var(--3p-graphite)!important} .site-header.scrolled .book-pill{color:var(--3p-graphite)!important} /* Keep mobile drawer legible and its toggle visible on the glass surface. */ @media(max-width:900px){ .site-header.scrolled .menu-toggle span,body.menu-open .menu-toggle span{background:var(--3p-graphite)!important} .mobile-nav{background:rgba(251,249,244,.985);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} } @media(prefers-reduced-transparency:reduce){ .site-header.scrolled,body.menu-open .site-header{background:#FBF9F4!important} .desktop-nav,.page-home .site-header:not(.scrolled) .desktop-nav{background:#F3F1EB!important} } /* =========================================================== 3P v16 · Layout stability and unified spacing system Scoped to current production pages, preserves v15 glass header, Soft Nature palette, typography, imagery and motion. =========================================================== */ :root{ --layout-content-max:1480px; --layout-gutter:clamp(20px,4.2vw,72px); --layout-content-width:min(var(--layout-content-max),calc(100% - 2 * var(--layout-gutter))); --layout-section-gap:clamp(64px,6.5vw,104px); --layout-column-gap:clamp(28px,4.5vw,76px); --layout-card-gap:clamp(15px,1.75vw,26px); --p-page:var(--layout-content-width); --p-air:var(--layout-section-gap); --v13-space:var(--layout-section-gap); } html{overflow-x:clip;scroll-padding-top:100px} body{overflow-x:clip} .container,.site-footer .container{width:var(--layout-content-width);max-width:none;margin-inline:auto} main,main>section,main>nav,main .container{min-width:0} main :where(h1,h2,h3,p,li,a,summary,address){overflow-wrap:break-word} main :where(img,video,iframe){max-width:100%} main :where(img){height:auto} /* Intentionally fixed-height visual frames retain their image crop. */ main :where(.ed-hero-img,.inner-banner-image,.v13-home-feature-photo img,.v13-home-lesson-photo img,.v13-home-first-img img,.v13-about-photo img,.v13-program-media img,.v13-contact-photo img,.v13-first-photo img,.v13-gallery img,.v13-studio-focus img){height:100%;object-fit:cover} main :where(.v13-home-feature,.v13-about-photo,.v13-principles,.v13-services-note-grid,.v13-faq-wrap,.v13-studio-focus-grid,.v13-first-process,.v13-contact-split,.v13-home-first-grid,.v13-studio-visit,.v13-home-intro,.v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead) > *{min-width:0} /* All consecutive main sections have a single predictable rhythm. */ main>.v13-space{padding-block:var(--layout-section-gap)} main>.v13-space+.v13-space{padding-top:0} main>.inner-banner+.v13-space{padding-top:clamp(48px,5.5vw,80px)} main>.v13-space:has(+ .v13-space){padding-bottom:var(--layout-section-gap)} main>.v13-space+.v13-space{padding-top:0} main>.v13-space:where(.v13-home-intro,.v13-home-feature,.v13-home-lessons,.v13-about-lead,.v13-about-photo,.v13-principles,.v13-about-wide,.v13-services-lead,.v13-program-grid,.v13-faq-wrap,.v13-studio-lead,.v13-gallery,.v13-studio-visit,.v13-first-lead,.v13-first-process,.v13-contact-lead,.v13-contact-split,.v13-map-section){padding-inline:0} /* Vertical/stacked and side-by-side section widths use consistent gaps. */ .v13-home-intro,.v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead, .v13-home-feature,.v13-home-first-grid,.v13-about-photo,.v13-principles, .v13-services-note-grid,.v13-faq-wrap,.v13-studio-focus-grid, .v13-first-process,.v13-contact-split,.v13-studio-visit{column-gap:var(--layout-column-gap)} .v13-home-lessons-grid,.v13-program-grid{gap:var(--layout-card-gap)} .v13-home-lesson,.v13-program{min-width:0} .v13-home-lesson-photo,.v13-program-media{width:100%;aspect-ratio:1.17;height:auto;max-height:470px} .v13-home-lesson-photo img,.v13-program-media img{width:100%;height:100%;object-fit:cover} .v13-gallery{gap:var(--layout-card-gap);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:repeat(2,minmax(0,auto))} .v13-gallery .v13-gallery-main{grid-row:span 2} .v13-gallery figure{min-width:0;min-height:0} .v13-gallery figure img{width:100%;object-fit:cover} .v13-gallery .v13-gallery-main img{height:clamp(440px,43vw,650px)} .v13-gallery .v13-gallery-small img{height:clamp(205px,20vw,305px)} .v13-about-photo figure img{height:clamp(370px,35vw,520px)} .v13-home-feature-photo{height:clamp(350px,37vw,530px)} .v13-first-photo{height:clamp(340px,37vw,540px)} .v13-contact-photo{height:clamp(400px,43vw,590px)} .v13-studio-focus figure img{height:clamp(330px,35vw,500px)} .v13-map-shell{height:clamp(320px,32vw,470px)} /* Avoid oversized whitespace created by stacked margin + section padding. */ .v13-location-strip{padding-block:clamp(36px,4vw,60px)} .v13-cta-wrap{padding-top:clamp(12px,2vw,28px);padding-bottom:var(--layout-section-gap)} /* Banners maintain a deliberate, slightly wider frame than page copy. */ .inner-banner{width:min(1620px,calc(100% - 2 * clamp(12px,2.4vw,40px)));height:clamp(204px,16vw,258px)} .inner-banner-content{width:var(--layout-content-width);margin-inline:auto} /* Footer/header edges exactly match the content grid. */ .site-header .nav-wrap{width:var(--layout-content-width);max-width:none;margin-inline:auto;padding-inline:0} .site-footer .container{width:var(--layout-content-width)} :where(.v13-home-feature-copy,.v13-about-photo-side,.v13-first-list,.v13-contact-left,.v13-faq-list){min-width:0} .v13-contact-line{min-width:0} .v13-contact-line :where(a,address){overflow-wrap:anywhere} /* Tablet: a readable two-column content grid, then a clean single column. */ @media(max-width:1100px){ :root{--layout-gutter:clamp(22px,3.6vw,48px);--layout-column-gap:clamp(28px,4vw,48px);--layout-section-gap:clamp(62px,6.7vw,82px)} .v13-home-lessons-grid,.v13-program-grid{gap:16px} .v13-home-lesson-photo,.v13-program-media{aspect-ratio:1;max-height:370px} .v13-gallery .v13-gallery-main img{height:clamp(400px,48vw,570px)} .v13-gallery .v13-gallery-small img{height:clamp(185px,22vw,267px)} } @media(max-width:800px){ :root{--layout-gutter:clamp(18px,4.3vw,32px);--layout-column-gap:32px;--layout-section-gap:64px} .v13-home-intro,.v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead, .v13-home-feature,.v13-home-first-grid,.v13-about-photo,.v13-principles, .v13-services-note-grid,.v13-faq-wrap,.v13-studio-focus-grid, .v13-first-process,.v13-contact-split,.v13-studio-visit{grid-template-columns:minmax(0,1fr);row-gap:28px} .v13-home-lessons-grid,.v13-program-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px} .v13-program:last-child{grid-column:1/-1;max-width:calc(50% - 8px)} .v13-home-lesson:last-child{grid-column:1/-1;max-width:calc(50% - 8px)} .v13-home-feature-copy{padding-block:0} .v13-services-note-grid>div:last-child{padding-top:0} .v13-home-feature-photo,.v13-about-photo figure img,.v13-contact-photo,.v13-first-photo,.v13-studio-focus figure img{height:clamp(300px,55vw,450px)} .v13-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto} .v13-gallery .v13-gallery-main{grid-column:1/-1;grid-row:auto} .v13-gallery .v13-gallery-main img{height:clamp(270px,55vw,440px)} .v13-gallery .v13-gallery-small img{height:clamp(190px,35vw,285px)} .inner-banner{height:clamp(190px,25vw,235px)} .v13-cta-wrap{padding-top:16px} } @media(max-width:560px){ :root{--layout-gutter:20px;--layout-section-gap:56px;--layout-column-gap:24px;--layout-card-gap:20px} html{scroll-padding-top:82px} main>.v13-space{padding-block:var(--layout-section-gap)} main>.inner-banner+.v13-space{padding-top:42px} .inner-banner{width:calc(100% - 20px);height:clamp(175px,51vw,230px);margin-top:10px} .inner-banner-content{padding-inline:0} .inner-banner h1{font-size:clamp(29px,8vw,43px);line-height:1.14} .v13-home-lessons-grid,.v13-program-grid{grid-template-columns:minmax(0,1fr);gap:26px} .v13-program:last-child,.v13-home-lesson:last-child{grid-column:auto;max-width:none} .v13-home-lesson-photo,.v13-program-media{height:auto;aspect-ratio:1.21;max-height:360px} .v13-home-feature-photo,.v13-about-photo figure img,.v13-contact-photo,.v13-first-photo,.v13-studio-focus figure img{height:clamp(250px,78vw,370px)} .v13-gallery{gap:14px} .v13-gallery .v13-gallery-main img{height:clamp(240px,67vw,340px)} .v13-gallery .v13-gallery-small img{height:clamp(145px,40vw,210px)} .v13-gallery figcaption{font-size:9px;letter-spacing:.045em} .v13-studio-visit,.v13-location-strip{gap:24px} .v13-location-strip{padding-block:36px;align-items:flex-start;flex-wrap:wrap} .v13-cta-wrap{padding-bottom:var(--layout-section-gap)} .v13-map-shell{height:320px} .v13-home-feature-copy,.v13-intro-side{padding:0} } @media(max-width:360px){ :root{--layout-gutter:16px;--layout-section-gap:48px} .v13-home-lesson-photo,.v13-program-media{aspect-ratio:1.1} .v13-gallery .v13-gallery-small img{height:135px} } /* ================================================================ 3P v17 • editorial alignment & vertical rhythm refinement Keep existing identity, photos, glass navigation, and animations. ================================================================ */ :root { --p17-text-offset: clamp(27px, 2.55vw, 40px); --p17-section-gap: clamp(28px, 4.2vw, 66px); } /* The first line of introductory copy aligns with the actual heading rather than starting arbitrarily 100px beneath the section label. */ :where(.v13-home-intro,.v13-about-lead,.v13-services-lead, .v13-studio-lead,.v13-first-lead,.v13-contact-lead) { align-items: start; column-gap: clamp(34px, 5vw, 84px); } :where(.v13-home-intro,.v13-about-lead,.v13-services-lead, .v13-studio-lead,.v13-first-lead,.v13-contact-lead) > .v13-intro-side { padding: var(--p17-text-offset) 0 0; align-self: start; } .v13-display { margin-top: clamp(19px, 2.3vw, 29px); } .v13-intro-side p { margin-top: 0; } /* All editorial two-column rows use one intentional vertical alignment. No manual 20px / 44px / 100px padding overrides per section. */ :where(.v13-home-feature,.v13-about-photo,.v13-about-wide, .v13-studio-focus-grid,.v13-first-process,.v13-contact-split, .v13-home-first-grid) { align-items: center; column-gap: clamp(30px, 4.5vw, 76px); } :where(.v13-principles,.v13-faq-wrap,.v13-services-note-grid, .v13-first-check-grid,.v13-studio-visit) { align-items: start; column-gap: clamp(30px, 4.5vw, 76px); } .v13-home-feature-copy { padding-block: 0; } .v13-feature-foot { margin-top: clamp(25px, 3.3vw, 52px); } .v13-services-note-grid > div:last-child { padding-top: 0; } .v13-contact-left { padding-top: 0; } .v13-studio-visit { align-items: start; } .v13-home-first-grid > * { min-width:0; } .v13-home-first-grid > div:first-child { align-self:center; } /* Frame/image boundaries are predictable even with captions. */ .v13-about-photo figure,.v13-studio-focus figure,.v13-gallery figure { margin:0; } :where(.v13-home-feature-photo,.v13-about-wide-image,.v13-first-photo, .v13-home-first-img,.v13-contact-photo) { min-width:0; } /* Three-column story grid: matching media sizes and aligned card headings. */ .v13-program-grid,.v13-home-lessons-grid { align-items: start; } .v13-program,.v13-home-lesson { min-width:0; } /* Bring secondary headings and text blocks into a unified rhythm. */ .v13-heading-row { column-gap: var(--p17-section-gap); } .v13-heading-row > div { align-items:start; } .v13-heading-row > div p { margin-top:0; } .v13-location-strip { align-items:center; } /* Prevent giant vertical drift when a column contains lots of text. */ :where(.v13-intro-side,.v13-home-feature-copy,.v13-about-photo-side, .v13-contact-left,.v13-first-list,.v13-faq-intro, .v13-studio-visit > div) { min-width:0; } @media (max-width: 900px) and (min-width: 801px) { :root { --p17-text-offset: 25px; } } @media (max-width: 800px) { :root { --p17-text-offset: 0px; } :where(.v13-home-intro,.v13-about-lead,.v13-services-lead, .v13-studio-lead,.v13-first-lead,.v13-contact-lead) { row-gap: clamp(18px, 3.2vw, 28px); grid-template-columns: minmax(0, 1fr); } :where(.v13-home-intro,.v13-about-lead,.v13-services-lead, .v13-studio-lead,.v13-first-lead,.v13-contact-lead) > .v13-intro-side { padding:0; } :where(.v13-home-feature,.v13-about-photo,.v13-about-wide, .v13-studio-focus-grid,.v13-first-process,.v13-contact-split, .v13-home-first-grid,.v13-services-note-grid, .v13-first-check-grid,.v13-studio-visit) { grid-template-columns: minmax(0,1fr); row-gap: clamp(24px, 4.5vw, 38px); } .v13-home-first-grid > div:first-child { align-self:start; } .v13-heading-row > div p { margin-top:16px; } } @media(max-width:560px) { .v13-display { margin-top:18px; } :where(.v13-home-intro,.v13-about-lead,.v13-services-lead, .v13-studio-lead,.v13-first-lead,.v13-contact-lead) { row-gap:19px; } .v13-feature-foot { margin-top:25px; } .v13-heading-row > div p { margin-top:12px; } } /* ============================================================= 3P v18 | Editorial layout rhythm & grounded section headings Root cause repair: old .v13-space + .v13-space had padding-top:0. Avoid collapsing adjoining section tops / background boundaries. ============================================================= */ :root { --v18-section-start:clamp(52px,5.2vw,78px); --v18-section-end:clamp(48px,5.4vw,82px); --v18-grid-gap:clamp(28px,4.6vw,72px); } /* Set stable top/bottom rhythm for all sections irrespective of whether they have a full-width coloured background or a contained grid. */ main > .v13-space { padding-top:var(--v18-section-start); padding-bottom:var(--v18-section-end); } main > .v13-space + .v13-space { padding-top:var(--v18-section-start); } main > .v13-space:has(+ .v13-space) { padding-bottom:var(--v18-section-end); } /* Explicit first content block below page banners; no accidental collision. */ main > .inner-banner + .v13-space { padding-top:clamp(58px,6vw,86px); } /* Full-bleed colored sections should have real inner breathing room. */ main > :is(.v13-services-note,.v13-studio-focus,.v13-first-check,.v13-home-first).v13-space { padding-block:clamp(66px,7vw,102px); } /* Sections after a tinted band must start clearly within their own space. */ main > :is(.v13-services-note,.v13-studio-focus,.v13-first-check,.v13-home-first).v13-space + .v13-space { padding-top:clamp(62px,6.4vw,96px); } /* Home lessons introduction: kicker and title form a single editorial unit on the left, description occupies one intentionally aligned column. */ .v13-home-lessons .v18-lessons-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; column-gap:var(--v18-grid-gap); padding-bottom:clamp(30px,3.5vw,52px); } .v13-home-lessons .v18-heading-title { display:block; min-width:0; } .v13-home-lessons .v18-heading-title h2 { margin:clamp(18px,2vw,28px) 0 0; max-width:790px; font-size:clamp(42px,4.35vw,65px); line-height:1.12; text-wrap:balance; } .v13-home-lessons .v18-heading-description { justify-self:start; align-self:end; max-width:390px; margin:0 0 clamp(4px,.65vw,10px); font-size:clamp(15px,1.1vw,17px); line-height:1.8; font-weight:400; color:var(--v13-muted); } /* Keep content within a tidy two-column baseline rather than applying custom top padding to the text side of each editorial region. */ :where(.v13-services-note-grid,.v13-studio-visit,.v13-faq-wrap,.v13-home-intro, .v13-about-lead,.v13-services-lead,.v13-studio-lead, .v13-first-lead,.v13-contact-lead) { align-items:start; } :where(.v13-services-note-grid,.v13-studio-visit,.v13-faq-wrap) > * { min-width:0; } .v13-services-note-grid > div:last-child, .v13-studio-visit > div:last-child {padding-top:0} /* Prevent artificial separation of description vs kicker and titles. */ .v13-faq-intro h2,.v13-services-note h2,.v13-studio-visit h2 {margin-bottom:clamp(19px,2vw,28px)} /* First child headings remain inside section padding; no negative offsets. */ main > .v13-space > :first-child {min-width:0} @media(max-width:900px) { .v13-home-lessons .v18-lessons-heading {column-gap:32px} .v13-home-lessons .v18-heading-title h2 {font-size:clamp(37px,5vw,52px)} } @media(max-width:800px) { :root {--v18-section-start:clamp(48px,7vw,64px);--v18-section-end:clamp(45px,7vw,64px)} .v13-home-lessons .v18-lessons-heading { grid-template-columns:minmax(0,1fr); row-gap:clamp(16px,3vw,24px); align-items:start; } .v13-home-lessons .v18-heading-description { max-width:580px; margin:0; align-self:start; } main > :is(.v13-services-note,.v13-studio-focus,.v13-first-check,.v13-home-first).v13-space { padding-block:clamp(56px,8vw,72px); } } @media(max-width:560px) { :root {--v18-section-start:50px;--v18-section-end:48px} main > .inner-banner + .v13-space {padding-top:50px} .v13-home-lessons .v18-heading-title h2 {font-size:clamp(35px,8.7vw,46px)} .v13-home-lessons .v18-lessons-heading {row-gap:16px;padding-bottom:26px} .v13-home-lessons .v18-heading-description {font-size:15px;line-height:1.72} } /* === 3P Soft Nature v19 | Compact, consistent footer === Shared desktop / tablet / mobile layout. Applied after legacy declarations. No blanket overrides to section spacings, images or header. */ .site-footer{ background:#494640; color:#F5F1E9; padding:clamp(39px,4.1vw,62px) 0 0; } .site-footer .footer-inner{width:var(--layout-content-width);max-width:none;margin-inline:auto} .site-footer .footer-upper{ display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); align-items:start; column-gap:clamp(35px,6vw,112px); row-gap:30px; padding:0 0 clamp(33px,3.2vw,48px); } .site-footer .footer-intro{min-width:0} .site-footer .footer-intro .eyebrow{color:#CED3C7;margin:0 0 15px;font-size:10px;letter-spacing:.14em} .site-footer .footer-intro h2{ font-size:clamp(30px,3.0vw,44px); letter-spacing:-.035em; line-height:1.14; margin:0; max-width:18ch; } .site-footer .footer-intro>p:not(.eyebrow){ font-size:clamp(13px,.9vw,14px); line-height:1.6; color:#DBDED8; max-width:360px; margin:14px 0 20px; } .site-footer .footer-intro .btn{min-height:42px;padding:10px 16px;font-size:12px;gap:16px} .site-footer .footer-nav-area{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,60px); align-items:start; padding:5px 0 0; margin:0; } .site-footer .footer-nav-area>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px} .site-footer .footer-nav-area h3{ margin:0 0 11px; font-size:10px; line-height:1.5; letter-spacing:.14em; color:#C7D0C4; font-weight:700; } .site-footer .footer-nav-area a{ display:inline-flex; align-items:center; min-height:33px; padding:3px 0; line-height:1.45; font-size:13px; color:#E9E9E3; text-decoration:none; overflow-wrap:anywhere; transition:color .18s ease; } .site-footer .footer-nav-area a:hover{color:#F0DFAF} .site-footer .footer-bottom{ border-top:1px solid rgba(245,241,233,.18); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 22px; min-height:66px; padding:16px 0 18px; } .site-footer .footer-bottom .brand{display:none} .site-footer .footer-bottom p,.site-footer .footer-bottom>span{ font-size:11px; letter-spacing:.02em; line-height:1.5; color:#C9CCC4; margin:0; } .site-footer .footer-bottom>span{display:block;letter-spacing:.055em} @media(max-width:900px){ .site-footer{padding-top:44px} .site-footer .footer-upper{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px;padding-bottom:32px} .site-footer .footer-intro h2{font-size:clamp(29px,3.4vw,36px)} .site-footer .footer-nav-area{gap:20px} .site-footer .footer-nav-area a{font-size:12px} } @media(max-width:680px){ .site-footer{padding:37px 0 0} .site-footer .footer-upper{grid-template-columns:1fr;gap:29px;padding-bottom:29px} .site-footer .footer-intro .eyebrow{margin-bottom:11px} .site-footer .footer-intro h2{font-size:clamp(29px,7vw,37px);line-height:1.13} .site-footer .footer-intro>p:not(.eyebrow){margin:12px 0 16px;max-width:380px;font-size:13px;line-height:1.6} .site-footer .footer-intro .btn{min-height:42px} .site-footer .footer-nav-area{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:21px 0 0; border-top:1px solid rgba(245,241,233,.16); } .site-footer .footer-nav-area>div{gap:1px} .site-footer .footer-nav-area h3{font-size:10px;margin-bottom:8px} .site-footer .footer-nav-area a{font-size:12px;min-height:36px} .site-footer .footer-bottom{min-height:0;padding:17px 0 20px;gap:6px 14px} .site-footer .footer-bottom p,.site-footer .footer-bottom>span{font-size:10px} } @media(max-width:360px){ .site-footer .footer-nav-area{gap:12px} .site-footer .footer-nav-area a{font-size:11px} .site-footer .footer-bottom{align-items:flex-start;flex-direction:column} } /* ============================================================= 3P VIP PILATES | Production polish 2026-11-09 Design baseline: Soft Nature. Shared 8px spacing rhythm, responsive container, accessible form & stable first-lesson card. All additions intentionally scoped to avoid changing the hero artwork. ============================================================= */ :root { --p-space-1: 8px; --p-space-2: 16px; --p-space-3: 24px; --p-space-4: 32px; --p-space-5: 48px; --p-space-6: 64px; --p-space-7: 80px; --p-heading: #494640; --p-muted: #78756d; --p-forest: #667262; --p-border: #dcdcd2; --p-cream: #f5f1e9; --p-card: #fbfaf6; --v18-section-start: clamp(52px, 5vw, 72px); --v18-section-end: clamp(52px, 5vw, 72px); } /* Limit any gap between editorial sections to one intentional baseline. */ main > .v13-space {padding-block: var(--v18-section-start) var(--v18-section-end)} main > .v13-space + .v13-space {padding-top: var(--v18-section-start)} main > .inner-banner + .v13-space {padding-top: clamp(52px, 5.6vw, 76px)} main > :is(.v13-home-first,.v13-first-check,.v13-studio-focus,.v13-services-note).v13-space { padding-block: clamp(64px, 6vw, 88px); } main > :is(.v13-home-first,.v13-first-check,.v13-studio-focus,.v13-services-note).v13-space + .v13-space { padding-top: var(--v18-section-start); } :where(.v13-home-intro,.v13-home-lessons,.v13-about-lead,.v13-services-lead,.v13-studio-lead,.v13-first-lead,.v13-contact-lead) :where(h1,h2,h3) {text-wrap: balance} /* Hero inset card: the third grid track must be as wide as its icon. */ .ed-hero-aside .ed-aside-link::after {content:none !important} .ed-hero-aside .ed-aside-link {margin:0;display:grid;place-items:center;flex:0 0 auto;min-width:44px;min-height:44px;width:44px;height:44px;padding:0;border:0;line-height:1;border-radius:14px;position:relative;z-index:2;isolation:isolate} .ed-hero-aside .ed-aside-link svg {display:block;width:20px;height:20px;pointer-events:none} .ed-hero-aside .ed-aside-link:hover {background:#dde6d8;color:#39443b} .ed-hero-aside .ed-aside-link:focus-visible {outline:2px solid #494640;outline-offset:3px} /* Contact page: editorial split, not a dense box-on-box card layout. */ .p-contact-layout {display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:clamp(34px,5.7vw,100px);align-items:start} .p-contact-layout > * {min-width:0} .p-contact-heading .v13-kicker {margin:0 0 20px} .p-contact-heading h2 {font-size:clamp(35px,3.4vw,52px);letter-spacing:-.05em;line-height:1.12;color:var(--p-heading);margin:0 0 15px;text-wrap:balance} .p-contact-heading > p:last-child {font-size:15px;line-height:1.75;color:var(--p-muted);margin:0 0 34px} .p-contact-form {display:block;width:100%;margin:0} .p-contact-hp {position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important} .p-form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 19px} .p-field {min-width:0;display:flex;flex-direction:column;align-items:stretch} .p-field-full {grid-column:1 / -1} .p-field label {font-size:12px;line-height:1.6;font-weight:700;color:var(--p-heading);margin-bottom:9px} .p-field label>span:not(.p-optional) {color:#9b695f} .p-optional {font-size:11px;font-weight:400;color:var(--p-muted)} .p-field :is(input,select,textarea) { appearance:none;-webkit-appearance:none;width:100%;max-width:100%;min-width:0; border:1px solid #d8d8ce;border-radius:13px;background:var(--p-card); padding:14px 15px;color:var(--p-heading);font:inherit;font-size:14px; line-height:1.5;box-shadow:none;outline:0; transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease; } .p-field :is(input,select) {min-height:52px} .p-field textarea {resize:vertical;min-height:146px;max-height:410px} .p-field :is(input,textarea)::placeholder {color:#918e86;opacity:1} .p-field :is(input,select,textarea):hover {border-color:#bbbfb2} .p-field :is(input,select,textarea):focus-visible {border-color:#667262;box-shadow:0 0 0 3px rgba(102,114,98,.12);background:#fff} .p-field :is(input,select,textarea)[aria-invalid="true"] {border-color:#a44e4e} .p-field select {padding-right:35px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23545a50' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer} .p-field small:not([hidden]) {font-size:11px;line-height:1.5;color:#a03c3c;margin-top:7px} .p-contact-privacy {font-size:12px;line-height:1.75;color:var(--p-muted);margin:24px 0 20px;max-width:57ch} .p-contact-privacy a {text-decoration:underline;text-underline-offset:3px;color:var(--p-heading)} .p-form-submit {width:max-content;min-height:52px;min-width:194px;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;background:var(--p-heading);color:#fff;border:1px solid var(--p-heading);border-radius:14px;padding:13px 17px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s ease,transform .2s ease} .p-form-submit:not(:disabled):hover {background:#667262;transform:translateY(-1px)} .p-form-submit:focus-visible {outline:2px solid var(--p-forest);outline-offset:3px} .p-form-submit:disabled {cursor:wait;opacity:.72} .p-contact-status {font-size:13px;line-height:1.6;margin:16px 0 0;max-width:60ch;min-height:0} .p-contact-status:empty {display:none} .p-contact-status[data-state="success"] {color:#35664a} .p-contact-status[data-state="error"] {color:#a03c3c} .p-contact-status a {color:inherit;text-decoration:underline;text-underline-offset:3px} .p-contact-info-column {padding-top:0} .p-contact-image {width:100%;aspect-ratio:1.3;overflow:hidden;border-radius:17px;background:#e5e3d9} .p-contact-image img {display:block;width:100%;height:100%!important;object-fit:cover} .p-contact-info {padding-top:30px} .p-contact-info .v13-kicker {margin-bottom:14px} .p-contact-info h2 {font-size:clamp(26px,2.2vw,36px);line-height:1.2;letter-spacing:-.04em;color:var(--p-heading);margin:0 0 20px} .p-contact-detail {display:grid;grid-template-columns:minmax(90px,.28fr) minmax(0,1fr);gap:15px;padding:18px 0;border-top:1px solid var(--p-border);align-items:start} .p-contact-detail>span {font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--p-muted);padding-top:4px} .p-contact-detail :is(a,address) {font-size:14px;line-height:1.65;color:var(--p-heading);text-decoration:none;font-style:normal;overflow-wrap:anywhere} .p-contact-detail a:hover {text-decoration:underline;text-underline-offset:4px} .p-contact-detail a>span {font-size:14px;margin-left:3px} .p-contact-directions {margin-top:14px;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:46px;padding:11px 17px;font-size:12px;font-weight:700;text-decoration:none;border-radius:12px;background:#e4e8df;color:var(--p-heading)} .p-contact-directions:hover {background:#d5ded1} .v13-map-section {padding-top:clamp(46px,5vw,68px)} .v13-map-shell {border-radius:17px;min-height:300px;overflow:hidden} .v13-map-shell iframe {width:100%;height:100%;min-height:300px;border:0} .v13-map-section .v13-map-out {display:inline-block;margin-top:18px;text-underline-offset:4px} /* Legal text hierarchy for updated KVKK notice. */ .legal .legal-copy h2 {font-size:clamp(18px,1.5vw,23px);line-height:1.3;letter-spacing:-.02em;margin:28px 0 10px;color:var(--p-heading)} .legal .legal-copy h2:first-child {margin-top:0} .legal .legal-copy a {color:#4f5d4b;text-decoration:underline;text-underline-offset:3px} @media(max-width:1000px){ .p-contact-layout {grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:32px} .p-form-grid {grid-template-columns:minmax(0,1fr)} .p-contact-heading h2 {font-size:clamp(34px,4.2vw,43px)} } @media(max-width:760px){ :root {--v18-section-start:clamp(45px,6.3vw,58px);--v18-section-end:clamp(45px,6.3vw,58px)} main > .inner-banner + .v13-space {padding-top:var(--v18-section-start)} main > :is(.v13-home-first,.v13-first-check,.v13-studio-focus,.v13-services-note).v13-space {padding-block:clamp(54px,7vw,65px)} .p-contact-layout {grid-template-columns:minmax(0,1fr);gap:clamp(42px,7vw,66px)} .p-form-grid {grid-template-columns:repeat(2,minmax(0,1fr))} .p-contact-image {aspect-ratio:1.62} .p-contact-info {padding-top:22px} } @media(max-width:600px){ :root {--v18-section-start:46px;--v18-section-end:46px} main > .inner-banner + .v13-space {padding-top:46px} .p-contact-layout {row-gap:46px} .p-contact-heading .v13-kicker {margin-bottom:12px} .p-contact-heading h2 {font-size:clamp(32px,8vw,43px);margin-bottom:10px} .p-contact-heading>p:last-child {font-size:14px;margin-bottom:22px} .p-form-grid {grid-template-columns:minmax(0,1fr);gap:18px} .p-field :is(input,select) {min-height:50px} .p-field textarea {min-height:142px} .p-form-submit {width:100%;justify-content:center;gap:18px} .p-contact-image {aspect-ratio:1.52} .p-contact-detail {grid-template-columns:minmax(73px,.28fr) minmax(0,1fr);gap:12px} .p-contact-detail :is(a,address) {font-size:13px} .p-contact-privacy {margin:20px 0 18px} .v13-map-shell {min-height:280px} .ed-hero-aside {display:grid;grid-template-columns:64px minmax(0,1fr) 44px!important;gap:3px 10px;align-items:center;min-width:0;padding:10px 12px!important} .ed-hero-aside img {width:64px!important;height:64px!important;min-width:0;grid-column:1;grid-row:1/3;object-fit:cover} .ed-hero-aside .ed-aside-tag {min-width:0;grid-column:2;grid-row:1;align-self:end} .ed-hero-aside h2 {min-width:0;grid-column:2;grid-row:2;font-size:12px;align-self:start;line-height:1.3} .ed-hero-aside .ed-aside-link {grid-column:3;grid-row:1/3;align-self:center;justify-self:end} } @media(max-width:360px) { .ed-hero-aside {grid-template-columns:58px minmax(0,1fr) 44px!important;gap:7px} .ed-hero-aside img {width:58px!important;height:62px!important} .ed-hero-aside h2 {font-size:11px} .p-contact-detail {grid-template-columns:minmax(0,1fr);gap:5px} .p-contact-detail > span {padding:0} } @media(prefers-reduced-motion:reduce){ .p-form-submit,.p-field :is(input,select,textarea) {transition:none} .p-form-submit:hover {transform:none} }