/* Body Evolutions — "walk into the studio" Palette from the room: plum leather, blond wood, daylight, plants. Type: Fraunces (headlines) + Figtree (body). Base 18px for readers 40+. */ :root{ --plum:#4A1E6E; --plum-deep:#2F1149; --purple:#5F258F; --purple-soft:#8B5FB5; --persimmon:#EF4823; --persimmon-dark:#D33A18; --ink:#241A2E; --muted:#66596F; --faint:#9C90A5; --paper:#FAF7F4; --linen:#F1EAE3; --lavender:#F3EEF7; --white:#fff; --wood:#C89B6A; --wood-soft:#E8D5BD; --line:#E6DDD4; --display:'Fraunces',Georgia,'Times New Roman',serif; --body:'Figtree',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; --arc:56px; /* the signature single rounded corner */ --radius:6px; --wrap:1200px; --ease:cubic-bezier(.2,.7,.2,1); } /* Option A, the palette Sonia picked from /colors (BE-16). Scoped to so it rolls page by page rather than landing on the whole site at once. Every value is from docs/brand-colors.md; when the last page is switched over, fold these into :root above. */ body.palette-a{ --plum:#5D2868; /* logo purple */ --plum-deep:#3E1A47; /* deep purple, headlines */ --purple:#5D2868; /* links and kickers */ --purple-soft:#8C6E96; --persimmon-dark:#C8381A; --ink:#241E18; /* brown black, off the studio floor */ --paper:#F1F0EF; /* Gallery Gray at quarter strength: the wall */ --linen:#F4F3F2; --lavender:#EDE8F0; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} html.menu-open{overflow:hidden} body{font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block;height:auto} a{color:var(--purple);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(95,37,143,.35)} a:hover{color:var(--plum);text-decoration-color:currentColor} :focus-visible{outline:3px solid var(--persimmon);outline-offset:3px;border-radius:3px} ::selection{background:var(--wood-soft);color:var(--plum-deep)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .wrap.narrow{max-width:820px} .wrap.mid{max-width:980px} /* ---------- type ---------- */ h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--plum-deep);line-height:1.08;letter-spacing:-.015em;font-variation-settings:"SOFT" 50,"opsz" 96} h1{font-size:clamp(42px,6.2vw,78px);max-width:16ch} h2{font-size:clamp(34px,4.4vw,54px);max-width:22ch} h3{font-size:clamp(24px,2.4vw,30px);font-variation-settings:"SOFT" 50,"opsz" 36;line-height:1.15} h4{font-family:var(--body);font-weight:600;font-size:18px;color:var(--plum)} em,.ital{font-style:italic} h1 em,h2 em,h3 em{font-variation-settings:"SOFT" 80,"opsz" 96} p{max-width:64ch} .lead{font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--muted);max-width:56ch} .kicker{font-family:var(--body);font-size:16px;font-weight:600;color:var(--purple);margin-bottom:14px;display:block} .note{font-size:16px;color:var(--muted)} .section-head{margin-bottom:44px;max-width:760px} .section-head p{margin-top:16px;color:var(--muted);font-size:19px} .center{text-align:center} .center p,.center h1,.center h2{margin-left:auto;margin-right:auto} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:17px;line-height:1;padding:16px 28px;border-radius:999px;border:2px solid var(--persimmon);background:var(--persimmon);color:#fff;text-decoration:none;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),color .18s} .btn:hover{background:var(--persimmon-dark);border-color:var(--persimmon-dark);color:#fff;transform:translateY(-1px)} .btn:active{transform:none} .btn-secondary{background:transparent;border-color:var(--plum);color:var(--plum)} .btn-secondary:hover{background:var(--plum);border-color:var(--plum);color:#fff} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff} .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--plum)} .btn-sm{padding:12px 20px;font-size:15.5px} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px} .textlink{font-weight:600;text-decoration:none;border-bottom:2px solid var(--wood-soft);padding-bottom:1px} .textlink:hover{border-color:var(--persimmon);text-decoration:none} /* ---------- header ---------- */ /* The blur lives on the bar, not the header: a filter would make the header the containing block for the fixed-position mobile menu inside it. */ .site-header{position:sticky;top:0;z-index:60} .header-bar{background:#fff;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px;max-width:1320px;margin:0 auto;min-height:72px} .logo{display:block;flex:0 0 auto} .logo img{height:40px;width:auto} .main-nav{display:none} .main-nav ul{list-style:none;display:flex;align-items:center;gap:6px} .main-nav a,.nav-drop>button{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-size:16.5px;font-weight:500;color:var(--ink);text-decoration:none;padding:10px 13px;border-radius:999px;background:none;border:none;cursor:pointer;line-height:1;transition:background .15s,color .15s} .main-nav a:hover,.nav-drop>button:hover,.nav-drop.is-open>button,.nav-drop:hover>button{background:var(--linen);color:var(--plum)} .main-nav a[aria-current="page"],.nav-drop.has-current>button{color:var(--plum);box-shadow:inset 0 -2px 0 var(--wood)} .nav-drop{position:relative} .nav-drop>button::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;opacity:.7} .drop-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(47,17,73,.22);padding:8px;display:none;flex-direction:column} .drop-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px} .nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu,.nav-drop.is-open .drop-menu{display:flex} .drop-menu a{display:block;padding:11px 14px;border-radius:9px;font-size:16px;font-weight:500} .drop-menu a:hover{background:var(--lavender)} .header-cta{display:none} .menu-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;padding:0;align-items:center} .menu-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{display:none;position:fixed;inset:72px 0 0 0;background:var(--paper);z-index:55;overflow-y:auto;padding:16px 24px 48px} .mobile-menu.is-open{display:block;animation:menu-in .25s var(--ease) both} @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .mobile-menu a{display:block;padding:15px 0;font-size:22px;font-family:var(--display);color:var(--plum-deep);text-decoration:none;border-bottom:1px solid var(--line)} .mobile-menu details{border-bottom:1px solid var(--line)} .mobile-menu summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:22px;font-family:var(--display);color:var(--plum-deep);cursor:pointer} .mobile-menu summary::-webkit-details-marker{display:none} .mobile-menu summary::after{content:"+";font-family:var(--body);font-size:26px;color:var(--purple);line-height:1} .mobile-menu details[open] summary::after{content:"–"} .mobile-menu details a{font-family:var(--body);font-size:18px;padding:11px 0 11px 18px;border-bottom:none;color:var(--ink)} .mobile-menu details a:last-child{padding-bottom:16px} .mobile-menu .menu-actions{display:grid;gap:12px;margin-top:28px} .mobile-menu .menu-actions .btn{width:100%;display:inline-flex;font-family:var(--body);font-size:17px;padding:16px 28px;border-bottom:2px solid var(--persimmon);color:#fff} .mobile-menu .menu-actions .btn-secondary{color:var(--plum);border-color:var(--plum)} .mobile-menu .menu-contact{margin-top:32px;font-size:16px;color:var(--muted)} .mobile-menu .menu-contact a{display:inline;font:inherit;color:var(--purple);border:none;padding:0} @media(min-width:1024px){ .main-nav{display:block} .header-cta{display:inline-flex} .menu-toggle{display:none} .mobile-menu{display:none!important} } /* ---------- sections & surfaces ---------- */ .section{padding:clamp(64px,8vw,112px) 0} .section.tight{padding:clamp(40px,5vw,64px) 0} .linen{background:var(--linen)} .lavender{background:var(--lavender)} /* Section rhythm (BE-41, docs/brand-colors.md): the first section under every hero is white, then the wall's companions rotate white / wall / warm linen. The hero is section 1, so 3n+2 is the white one. Flat hexes, not tokens, so the rhythm holds before and after a page joins palette-a. */ main>.section:nth-of-type(3n+2){background:#fff} main>.section:nth-of-type(3n){background:#F1F0EF} main>.section:nth-of-type(3n+1){background:#EEEAE3} .plum{background:#665475;color:#EEE6F5} .plum.pre-footer{background:var(--plum-deep)} .plum h1,.plum h2,.plum h3{color:#fff} .plum p{color:#D9CCE6} .plum a:not(.btn){color:#fff;text-decoration-color:rgba(255,255,255,.4)} .plum .kicker{color:#E7B28A} .rule{border:none;border-top:1px solid var(--line);margin:0} .wood-rule{width:64px;height:3px;background:var(--wood);border:none;border-radius:2px;margin:0 0 26px} /* ---------- photos: the arc ---------- */ .arc{border-radius:var(--radius) var(--radius) var(--radius) var(--arc);overflow:hidden} .arc.tr{border-radius:var(--radius) var(--arc) var(--radius) var(--radius)} .arc.br{border-radius:var(--radius) var(--radius) var(--arc) var(--radius)} .arc.tl{border-radius:var(--arc) var(--radius) var(--radius) var(--radius)} .arc img{width:100%;height:100%;object-fit:cover} .split .arc.wide{aspect-ratio:16/9} .split.top{align-items:start} .photo-frame{position:relative} .photo-frame::before{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;border-radius:var(--radius) var(--radius) var(--arc) var(--radius);background:var(--wood-soft);z-index:0} .photo-frame>.arc{position:relative;z-index:1} /* ---------- homepage hero ---------- */ .hero-home{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--plum-deep)} .hero-home .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.04);transition:transform 1.6s var(--ease)} .hero-home.is-ready .bg{transform:scale(1)} .hero-home::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(102,84,117,.18) 0%,rgba(102,84,117,.38) 45%,rgba(102,84,117,.78) 100%)} .hero-home .wrap{position:relative;z-index:2;width:100%;padding-top:140px;padding-bottom:64px;display:grid;gap:32px;align-items:end} .hero-home h1{color:#fff;font-size:clamp(52px,8.4vw,112px);line-height:.98;letter-spacing:-.025em;max-width:14ch;font-variation-settings:"SOFT" 60,"opsz" 144} .hero-home .lead{color:#EEE6F5;font-size:clamp(18px,1.7vw,22px);max-width:46ch;margin-top:20px} .hero-home .btn-row{margin-top:28px} .hero-home .hero-copy>*{opacity:0;transform:translateY(22px)} .hero-home.is-ready .hero-copy>*{animation:rise .9s var(--ease) forwards} .hero-home.is-ready .hero-copy>*:nth-child(2){animation-delay:.12s} .hero-home.is-ready .hero-copy>*:nth-child(3){animation-delay:.24s} @keyframes rise{to{opacity:1;transform:none}} .hero-aside{display:flex;align-items:flex-end;justify-content:flex-start;gap:18px} .hero-aside .seal{opacity:0} .hero-home.is-ready .seal{animation:seal-in 1s .5s var(--ease) forwards} @keyframes seal-in{from{opacity:0;transform:scale(.85) rotate(-20deg)}to{opacity:1;transform:none}} @media(max-width:899px){ .hero-home::after{background:linear-gradient(180deg,rgba(102,84,117,.2) 0%,rgba(102,84,117,.54) 40%,rgba(102,84,117,.82) 100%)} .hero-home .wrap{padding-top:110px} } @media(min-width:900px){ .hero-home .wrap{grid-template-columns:1fr auto;padding-bottom:80px} .hero-aside{justify-content:flex-end} } /* the seal: rotating text ring around "25" */ .seal{position:relative;width:148px;height:148px;flex:0 0 auto} .seal svg{width:100%;height:100%;overflow:visible} .seal .ring{animation:spin 28s linear infinite;transform-origin:50% 50%} .seal text{font-family:var(--body);font-weight:600;font-size:11.2px;letter-spacing:.2em;fill:#fff} .seal .num{font-family:var(--display);font-size:54px;fill:#fff;font-variation-settings:"SOFT" 60,"opsz" 144;letter-spacing:-.03em} .seal .sub{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.16em;fill:#E7B28A} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- subpage heroes ---------- */ .page-hero{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px);background:var(--linen)} .page-hero h1{margin-top:4px} .page-hero .lead{margin-top:20px} .page-hero.photo{position:relative;min-height:min(62vh,600px);display:flex;align-items:flex-end;color:#fff;background:var(--plum-deep);overflow:hidden;padding:120px 0 56px} .page-hero.photo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%)} .page-hero.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(102,84,117,.16) 0%,rgba(102,84,117,.5) 55%,rgba(102,84,117,.9) 100%)} .page-hero.photo .wrap{position:relative;z-index:2} .page-hero.photo h1,.page-hero.photo .kicker{color:#fff} .page-hero.photo .kicker{color:#E7B28A} .page-hero.photo .lead{color:#EEE6F5} .page-hero.photo a:not(.btn){color:#fff} .page-hero.plum{background:var(--plum-deep)} /* wide subject (the studio sign): on phones the cover crop eats the sides, so stack the photo above the text instead of putting the text over it */ @media(max-width:640px){ .page-hero.photo.stack-sm{display:block;min-height:0;padding:0 0 clamp(32px,7vw,44px);background:#665475} .page-hero.photo.stack-sm .bg{position:static;width:100%;height:auto;object-fit:contain;margin-bottom:clamp(22px,5vw,30px)} .page-hero.photo.stack-sm::after{display:none} } /* ---------- facts line (replaces the stats strip) ---------- */ .facts{display:grid;gap:22px;padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .facts p{font-family:var(--display);font-size:clamp(20px,2vw,24px);line-height:1.3;color:var(--plum-deep);font-variation-settings:"SOFT" 50,"opsz" 36;padding-left:20px;border-left:3px solid var(--wood)} @media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr);gap:40px}} /* ---------- split ---------- */ .split{display:grid;gap:36px;align-items:center} .split>div{min-width:0} .split .arc{aspect-ratio:4/3} .split.tall .arc{aspect-ratio:4/5} .split h2{margin-bottom:18px} .split p{margin-bottom:16px;color:var(--muted)} .split p b{color:var(--ink);font-weight:600} .split .btn-row{margin-top:8px} @media(min-width:900px){ .split{grid-template-columns:7fr 5fr;gap:clamp(48px,6vw,96px)} .split.media-left{grid-template-columns:5fr 7fr} .split.media-left>div:first-child{order:0} .split.even{grid-template-columns:1fr 1fr} } /* ---------- price list (editorial rows, not cards) ---------- */ .pricelist{border-top:1px solid var(--line)} .price-row{display:grid;gap:14px;padding:28px 0;border-bottom:1px solid var(--line);align-items:center} .price-row .who{font-size:16.5px;color:var(--muted);margin-top:6px;max-width:48ch} .price-row h3{font-size:clamp(24px,2.2vw,30px)} .price-row .amount{font-family:var(--display);font-size:clamp(34px,3.4vw,46px);line-height:1;color:var(--plum);font-variation-settings:"SOFT" 40,"opsz" 96;letter-spacing:-.02em;white-space:nowrap} .price-row .amount small{display:block;font-family:var(--body);font-size:14.5px;color:var(--muted);letter-spacing:0;margin-top:8px;font-weight:500;white-space:normal} .price-row .tag{display:inline-block;font-size:13.5px;font-weight:600;color:var(--plum);background:var(--wood-soft);padding:5px 11px;border-radius:999px;margin-bottom:10px} .price-row.featured{background:var(--white);margin:0 -24px;padding:32px 24px;border-radius:14px;border-bottom:1px solid var(--line)} @media(min-width:820px){ .price-row{grid-template-columns:minmax(0,1.6fr) auto auto;gap:36px} .price-row.featured{margin:0;padding:32px 28px} } .pricelist-foot{margin-top:22px;font-size:16px;color:var(--muted);max-width:70ch} /* ---------- tiles (light text blocks with a wood hairline) ---------- */ .tiles{display:grid;gap:22px} .tile{padding-top:20px;border-top:3px solid var(--wood-soft)} .tile h3{font-size:24px;margin-bottom:10px} .tile p{color:var(--muted);font-size:17px} .tile.plain{border-top-color:var(--wood)} .tile .btn-row{margin-top:18px} .tile p+p{margin-top:12px} @media(min-width:680px){.tiles-2{grid-template-columns:1fr 1fr}.tiles-3{grid-template-columns:repeat(3,1fr);gap:36px}} @media(min-width:1000px){.tiles-4{grid-template-columns:repeat(4,1fr);gap:32px}} /* ---------- instagram grid (homepage) ---------- */ .ig-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media(min-width:680px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}} .ig-post{display:block;aspect-ratio:1/1;text-decoration:none;min-width:0} .ig-post img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)} .ig-post:hover img{transform:scale(1.03)} .ig-follow{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;aspect-ratio:1/1;background:var(--lavender);border-radius:var(--radius) var(--radius) var(--arc) var(--radius);padding:24px;text-decoration:none;transition:background .18s var(--ease)} .ig-follow:hover{background:var(--wood-soft)} .ig-follow .ig-handle{font-family:var(--display);font-size:clamp(19px,1.8vw,26px);line-height:1.25;color:var(--plum-deep);font-variation-settings:"SOFT" 50,"opsz" 36;overflow-wrap:anywhere} .ig-follow .ig-cta{font-weight:600;font-size:16px;color:var(--purple)} @media(max-width:679px){ .ig-follow{padding:16px} .ig-follow .ig-handle{font-size:15px} .ig-follow .ig-cta{font-size:14px} } /* ---------- cards with photos (team, events, methods) ---------- */ .cards{display:grid;gap:28px} @media(min-width:680px){.cards-2{grid-template-columns:1fr 1fr}.cards-3{grid-template-columns:repeat(3,1fr)}} .card{display:flex;flex-direction:column;gap:0;background:var(--white);border-radius:var(--radius) var(--radius) var(--radius) 32px;overflow:hidden;border:1px solid var(--line)} .card .arc{border-radius:0;aspect-ratio:4/3} .card .arc.portrait{aspect-ratio:4/5} .card .arc img.face{object-position:50% 18%} .card .body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1} .card h3{margin-bottom:8px} .card .role{font-weight:600;color:var(--purple);margin-bottom:12px;font-size:16px} .card p{color:var(--muted);font-size:17px} .card .body>.btn,.card .body>.btn-row{margin-top:auto;padding-top:20px} .card .badge{align-self:flex-start;font-size:13.5px;font-weight:600;color:var(--plum);background:var(--wood-soft);padding:5px 11px;border-radius:999px;margin-bottom:12px} .card.past .arc img{filter:saturate(.6)} /* ---------- quotes ---------- */ .quote-wall{columns:1;column-gap:24px} @media(min-width:680px){.quote-wall{columns:2}} @media(min-width:1024px){.quote-wall{columns:3}} .quote{break-inside:avoid;background:var(--white);border-radius:var(--radius) var(--radius) var(--radius) 28px;padding:28px 28px 24px;margin-bottom:24px;border:1px solid var(--line)} .quote h3{font-size:21px;line-height:1.2;margin-bottom:10px} .quote .why{font-family:var(--body);font-size:16.5px;line-height:1.55;color:var(--muted);margin-bottom:18px;font-variation-settings:normal} .quote p{font-family:var(--display);font-size:19px;line-height:1.5;color:var(--ink);font-variation-settings:"SOFT" 50,"opsz" 18} .quote cite{display:block;margin-top:16px;font-style:normal;font-weight:600;font-size:15px;color:var(--purple)} .quote cite span{color:var(--faint);font-weight:500} .carousel{position:relative} .carousel-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 10px;margin:-4px -4px -10px;scrollbar-width:none} .carousel-track::-webkit-scrollbar{display:none} .carousel-track:focus-visible{outline:2px solid var(--purple);outline-offset:4px;border-radius:var(--radius)} .carousel-track>.quote{flex:0 0 min(84%,340px);margin-bottom:0;scroll-snap-align:start} @media(min-width:680px){.carousel-track>.quote{flex:0 0 calc((100% - 24px)/2)}} @media(min-width:1024px){.carousel-track>.quote{flex:0 0 calc((100% - 48px)/3)}} .carousel-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} .carousel-btn{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--purple);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,opacity .2s} .carousel-btn:hover{background:var(--purple);color:var(--white)} .carousel-btn[disabled]{opacity:.35;cursor:default} .carousel-btn[disabled]:hover{background:var(--white);color:var(--purple)} .pull{max-width:860px;margin:0 auto;text-align:center} .pull p{font-family:var(--display);font-style:italic;font-size:clamp(24px,3vw,36px);line-height:1.3;color:var(--plum-deep);font-variation-settings:"SOFT" 80,"opsz" 60;max-width:none} .pull cite{display:block;margin-top:22px;font-style:normal;font-weight:600;font-size:16px;color:var(--purple)} .pull cite span{color:var(--faint);font-weight:500} .plum .pull p{color:#fff} .plum .pull cite{color:#E7B28A} /* ---------- checklist / steps (a real sequence) ---------- */ .steps{counter-reset:step;display:grid;gap:18px} .step{position:relative;padding:26px 26px 26px 88px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius) var(--radius) var(--radius) 28px} .step::before{counter-increment:step;content:counter(step);position:absolute;left:24px;top:24px;width:42px;height:42px;border-radius:50%;background:var(--plum);color:#fff;font-family:var(--display);font-size:22px;display:flex;align-items:center;justify-content:center} .step h3{font-size:22px;margin-bottom:6px} .step p{color:var(--muted);font-size:17px} @media(min-width:800px){.steps{grid-template-columns:1fr 1fr}} .checks{list-style:none;margin:18px 0 26px} .checks li{position:relative;padding:8px 0 8px 34px;color:var(--muted);font-size:17.5px} .checks li b{color:var(--ink);font-weight:600} .checks li::before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;border-radius:50%;background:var(--wood-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A1E6E' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat} /* legal data tables (privacy policy) */ .table-scroll{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)} .data-table{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.5} .data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .data-table thead th{background:var(--linen);color:var(--ink);font-weight:600} .data-table tbody th{color:var(--ink);font-weight:600;min-width:140px} .data-table td{color:var(--muted);min-width:200px} .data-table td:last-child{min-width:0;white-space:nowrap} .data-table tbody tr:last-child>*{border-bottom:0} @media(max-width:599px){ .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .data-table tr,.data-table th,.data-table td{display:block} .data-table tr{padding:14px 16px;border-bottom:1px solid var(--line)} .data-table tbody tr:last-child{border-bottom:0} .data-table th,.data-table td{padding:0;border:0;min-width:0} .data-table td{margin-top:4px} .data-table td:last-child{white-space:normal;color:var(--ink)} .data-table td[data-label]::before{content:attr(data-label) ": ";font-weight:600} } /* ---------- FAQ ---------- */ .faq h2{margin:56px 0 22px;font-size:clamp(28px,3vw,38px)} .faq h2:first-child,.faq .jump-nav+h2{margin-top:0} .faq h2{scroll-margin-top:96px} .faq details{border-bottom:1px solid var(--line)} .faq details:first-of-type{border-top:1px solid var(--line)} .faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;font-family:var(--display);font-size:clamp(20px,2vw,23px);color:var(--plum-deep);cursor:pointer;font-variation-settings:"SOFT" 50,"opsz" 24;line-height:1.3} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:0 0 auto;width:12px;height:12px;border-right:2px solid var(--persimmon);border-bottom:2px solid var(--persimmon);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:6px} .faq details[open] summary::after{transform:rotate(225deg)} .faq details p{padding:0 0 22px;color:var(--muted);font-size:17.5px;max-width:66ch} .faq details a{color:var(--purple)} .faq details p:has(+ul){padding-bottom:8px} .faq details ul{padding:0 0 22px 22px;color:var(--muted);font-size:17.5px;max-width:66ch} .faq details li{padding:3px 0} .faq details li b{color:var(--ink);font-weight:600} /* ---------- info list / contact ---------- */ .info-list{list-style:none} .info-list li{padding:16px 0;border-bottom:1px solid var(--line);font-size:17.5px} .info-list li:first-child{border-top:1px solid var(--line)} .info-list b{display:block;font-size:14.5px;font-weight:600;color:var(--purple);margin-bottom:3px} .info-list a{text-decoration:none;font-weight:500} /* ---------- posts (blog, stories) ---------- */ .posts{display:grid;gap:28px} .post{display:grid;gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius) var(--radius) var(--radius) 32px;overflow:hidden} .post .arc{border-radius:0;aspect-ratio:16/10} .post .body{padding:28px 30px;display:flex;flex-direction:column;justify-content:center} .post .date{font-size:15px;color:var(--muted);margin-bottom:8px} .post h3{margin-bottom:12px} .post p{color:var(--muted);font-size:17px} .post .textlink{align-self:flex-start;margin-top:16px} @media(min-width:760px){.post{grid-template-columns:300px 1fr}.post .arc{aspect-ratio:auto;min-height:220px;max-height:300px}} /* ---------- post article (single blog post, /blog/:slug) ---------- */ .post-article{font-size:18px;line-height:1.7} .post-article h2{margin:40px 0 16px;font-size:clamp(22px,2.2vw,28px)} .post-article p{margin-bottom:20px} .post-article ul{margin:0 0 20px 22px} .post-article li{margin-bottom:8px} .post-article blockquote{border-left:3px solid var(--line);padding-left:20px;margin:24px 0;color:var(--muted);font-style:italic} .post-figure{margin:28px 0} .post-figure img{border-radius:var(--radius)} /* ---------- embeds (BookYourMat) ---------- */ .embed-shell{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden} .embed-shell iframe{width:100%;border:none;display:block;height:1200px;transition:height .25s var(--ease)} .embed-shell.lead iframe{height:900px} .embed-note{font-size:16px;color:var(--muted);margin-top:14px} /* ---------- jump nav (rates) ---------- */ .jump-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px} .jump-nav a{padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--plum);font-weight:600;font-size:15.5px;text-decoration:none} .jump-nav a:hover{border-color:var(--plum)} .rate-group{scroll-margin-top:96px;margin-bottom:clamp(48px,6vw,80px)} .rate-group>h2{margin-bottom:10px} .rate-group>.sub{color:var(--muted);margin-bottom:26px;max-width:70ch} /* ---------- misc ---------- */ .empty{border:1.5px dashed var(--wood);border-radius:14px;padding:44px 30px;text-align:center;background:var(--white)} .empty h3{margin-bottom:8px} .empty p{color:var(--muted);margin:0 auto 22px;max-width:50ch} .empty .btn{margin-top:4px} .band{padding:clamp(72px,9vw,120px) 0} .band h2{max-width:26ch} .band .btn-row{margin-top:32px} .map-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--wood-soft)} .method-list{display:grid;gap:28px} @media(min-width:800px){.method-list{grid-template-columns:1fr 1fr;gap:36px}} .method{display:grid;gap:22px;align-content:start} .method .arc{aspect-ratio:4/3} .method h3{font-size:clamp(28px,2.8vw,36px)} .method p{color:var(--muted)} .method .textlink{justify-self:start} /* ---------- footer ---------- */ .site-footer{padding:0} .footer-top-band{background:#665475;padding:clamp(56px,7vw,88px) 0 40px} /* logo sits centered above the columns; the columns are a centered group, so they stay centered in the page at every width instead of hugging the left */ .footer-logo{width:max-content;margin:0 auto 40px} .footer-top{display:grid;gap:40px;justify-items:center;text-align:center} /* the four link columns share one equal column-gap; the address block gets an extra push so it reads as its own group next to them (BE-23) */ @media(min-width:900px){.footer-top{grid-template-columns:repeat(5,auto);justify-content:center;align-items:start;column-gap:clamp(24px,3.2vw,64px);row-gap:40px} .footer-top>div:nth-child(2){margin-left:clamp(24px,3vw,56px)}} .site-footer .logo img{height:44px} .site-footer h4{color:#fff;font-family:var(--body);font-size:15px;font-weight:600;margin-bottom:16px;letter-spacing:.01em} .site-footer ul{list-style:none} .site-footer li{margin-bottom:10px;font-size:16.5px} .site-footer a{color:#D9CCE6;text-decoration:none} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer address{font-style:normal;font-size:16.5px;line-height:1.7;color:#D9CCE6} .site-footer address b{color:#fff;font-weight:600} /* Directions sits with the address, not in the Help column (BE-26) */ .footer-directions{margin-top:8px;font-size:16.5px} .footer-hours{margin-top:10px;font-size:15px;color:#BBA9CC} .footer-legal-band{background:#fff;padding:24px 0 32px} .footer-legal{font-size:13.5px;color:var(--ink);line-height:1.7;display:grid;gap:10px;justify-items:center;text-align:center} .footer-legal p{max-width:none} /* .tm needs the full band width to sit on one line — p{max-width:64ch} above was capping it at ~512px and wrapping it to three */ .footer-legal .tm{font-size:12px;letter-spacing:.02em} .footer-legal nav a{margin:0 8px} .footer-legal a{color:var(--ink)} .footer-legal a:hover{color:var(--plum);text-decoration:underline} .socials{display:flex;gap:10px;margin-top:20px} .site-footer .socials{justify-content:center} .socials a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff} .socials a:hover{background:var(--persimmon);border-color:var(--persimmon);text-decoration:none} .socials svg{width:17px;height:17px;fill:currentColor} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero-home .bg{transform:none;transition:none} .hero-home .hero-copy>*,.hero-home .hero-aside .seal{opacity:1;transform:none;animation:none} .seal .ring{animation:none} .mobile-menu.is-open{animation:none} .btn:hover{transform:none} } /* ---------- color study (colors.html only) ---------- A preview page for Sonia. Every rule here is namespaced .cs-* and the proposed colors live in .cs-page, so nothing on the real pages changes until we pick a direction and promote the values into :root above. */ .cs-page{ --cs-purple:#5D2868; --cs-purple-deep:#3E1A47; --cs-purple-soft:#8C6E96; --cs-orange:#EF4823; --cs-orange-deep:#C8381A; --cs-vinyl:#665475; --cs-vinyl-soft:#EDE8F0; --cs-wall:#D4D2CE; --cs-wall-pale:#F1F0EF; --cs-wall-soft:#F4F3F2; --cs-beige:#C3B49A; --cs-beige-soft:#E4DBCB; --cs-gray:#B9B4AC; --cs-brownblack:#241E18; /* companions for the wall colour, and its one-step-darker partner */ --cs-white:#FFFFFF; --cs-wall-step:#E7E6E5; --cs-linen-warm:#EEEAE3; --cs-lilac:#EAE7EC; } /* the page itself rotates through all three: white, the wall, warm linen (BE-19) */ .cs-section{padding:64px 0;background:var(--cs-white)} .cs-section:nth-of-type(3n+2){background:var(--cs-wall-pale)} .cs-section:nth-of-type(3n+3){background:var(--cs-linen-warm)} /* white, with its own outline: the linen is now a section colour (BE-19) */ .cs-note{background:var(--cs-white);border:1px solid var(--line);border-left:4px solid var(--cs-orange);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin-top:24px} .cs-note p{max-width:70ch;font-size:16.5px;color:var(--muted)} .cs-note p+p{margin-top:10px} .cs-note b{color:var(--ink)} .cs-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:28px} .cs-swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} .cs-chip{height:104px} .cs-swatch .cs-meta{padding:14px 16px 16px} .cs-swatch h4{margin-bottom:2px} .cs-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.04em;color:var(--ink)} .cs-from{font-size:14.5px;color:var(--muted);margin-top:6px;max-width:none} .cs-group{margin-top:40px} .cs-group>h3{margin-bottom:4px} .cs-group>p{color:var(--muted);max-width:70ch} .cs-demo{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:24px} .cs-demo-label{background:var(--linen);padding:12px 20px;font-size:14.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .cs-panel{padding:52px 40px} .cs-panel h2,.cs-panel h3{color:inherit} .cs-panel .cs-kicker{display:block;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px} .cs-panel p{margin-top:14px;font-size:18px;max-width:60ch} .cs-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .cs-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:600;font-size:17px;line-height:1;padding:15px 26px;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer} .cs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:30px} .cs-card{background:#fff;border:1px solid var(--line);border-radius:14px;border-top:5px solid var(--cs-orange);padding:24px} .cs-card h4{color:var(--cs-purple)} .cs-card p{font-size:16.5px;color:var(--muted);margin-top:8px} /* Option A — purple leads */ .cs-a{background:var(--cs-wall-pale);color:var(--ink)} .cs-a h2{color:var(--cs-purple-deep)} .cs-a .cs-kicker{color:var(--cs-orange-deep)} .cs-a .cs-btn{background:var(--cs-orange);border-color:var(--cs-orange);color:#fff} .cs-a .cs-btn.cs-btn-2{background:transparent;border-color:var(--cs-purple);color:var(--cs-purple)} /* Option B — the room leads, purple as accent */ .cs-b{background:var(--cs-wall-soft);color:var(--ink)} .cs-b h2{color:var(--cs-brownblack)} .cs-b .cs-kicker{color:var(--cs-vinyl)} .cs-b .cs-btn{background:var(--cs-purple);border-color:var(--cs-purple);color:#fff} .cs-b .cs-btn.cs-btn-2{background:transparent;border-color:var(--cs-brownblack);color:var(--cs-brownblack)} .cs-b .cs-card{border-top-color:var(--cs-beige)} /* the full width band both options share */ .cs-band{background:var(--cs-vinyl);color:#fff;padding:52px 40px} .cs-band h3{color:#fff} .cs-band p{color:#EDE6F2;margin-top:12px;max-width:58ch} .cs-band .cs-btn{background:var(--cs-orange);border-color:var(--cs-orange);color:#fff} /* the light band: no dark section, purple kept to the words and the button */ .cs-band-light{background:var(--cs-wall-step);color:var(--ink)} .cs-band-light h3{color:var(--cs-purple-deep)} .cs-band-light p{color:var(--muted)} .cs-band-light .cs-btn{background:var(--cs-purple);border-color:var(--cs-purple);color:#fff} /* side by side previews of the alternating rhythm */ .cs-rhythms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:26px;align-items:start} .cs-rhythm{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff} .cs-rhythm-label{background:var(--linen);padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--muted)} .cs-strip{padding:28px 24px;color:var(--ink)} .cs-strip h4{color:var(--cs-purple)} .cs-strip p{font-size:15.5px;color:var(--muted);margin-top:6px;max-width:none} .cs-strip .cs-hex{margin-top:10px;color:var(--muted)} .cs-pairs{display:grid;gap:12px;margin-top:26px} .cs-pair{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 20px;border-radius:10px;font-size:17px} .cs-pair b{font-weight:600} .cs-pair span{font-size:15px;opacity:.85} @media(max-width:700px){ .cs-panel,.cs-band{padding:36px 22px} .cs-section{padding:44px 0} }