@font-face{font-family:Studio;src:url('examples/fonts/Archivo-400-normal-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Body;src:url('fonts/DMSans-400-normal-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Club;src:url('examples/fonts/BricolageGrotesque-400-normal-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#26212d;--lilac:#d6c8f4;--orange:#ff754f;--paper:#faf9f6;--muted:#69636d;--line:#26212d30}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Body,Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Studio,Arial,sans-serif}h2{font-size:clamp(38px,4.6vw,70px);line-height:1.04;letter-spacing:-.065em;font-weight:650}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}a:focus-visible,summary:focus-visible{outline:3px solid #6947c5;outline-offset:6px}::selection{background:var(--orange);color:var(--ink)}.skip{position:fixed;z-index:100;left:15px;top:15px;padding:12px 20px;background:white;transform:translateY(-160%)}.skip:focus{transform:none}.section{padding:110px 6%}.header{height:110px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:var(--lilac)}.logo{display:inline-flex;align-items:baseline;font:750 34px/1 Studio,Arial,sans-serif;letter-spacing:-.09em}.logo-by{font-size:17px;font-weight:400;letter-spacing:-.06em;margin:0 3px}.logo-dot{align-self:flex-start;font-size:11px;margin:3px 0 0 5px;letter-spacing:0}.header nav{display:flex;gap:34px;font-size:14px}.header nav a:hover{text-decoration:underline;text-underline-offset:6px}.header-contact{font-size:15px;display:flex;gap:36px;align-items:center;border-bottom:1px solid;padding-bottom:5px}.header-contact span{font-size:28px}.hero{background:var(--lilac);padding:24px 5% 0;overflow:hidden}.hero-label{display:flex;justify-content:space-between;font-size:12px;padding:0 0 35px;border-bottom:1px solid var(--line)}.location{display:flex;align-items:center;gap:9px}.location i{width:7px;height:7px;background:var(--ink);border-radius:50%}.hero-grid{display:grid;grid-template-columns:1.23fr 1fr;gap:3%;padding:54px 0 67px;align-items:center}.hero-copy{position:relative;z-index:2}.hero h1{font-size:clamp(70px,8.2vw,132px);font-weight:750;line-height:.94;letter-spacing:-.085em}.hero h1>span{display:block;white-space:nowrap;font-size:.85em;margin-top:10px}.hero-bottom{margin-top:35px}.hero-bottom p{font-size:18px;line-height:1.6;max-width:400px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:17px 22px;font-size:14px;font-weight:600;min-height:56px;border-radius:4px;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:5px 5px 0 #26212d20}.button span{font-size:25px;line-height:1}.dark{background:var(--ink);color:white}.hero-bottom .button{margin-top:27px}.hero-art{position:relative;padding:45px 0 65px 10px}.art-cross{position:absolute;right:-5px;top:-30px;font-size:170px;line-height:1;color:var(--orange);transform:rotate(15deg)}.hero-project{display:block;position:relative;background:var(--paper);padding:8px;border-radius:7px;transform:rotate(7deg);box-shadow:14px 23px 0 #26212d13;transition:transform .35s}.hero-project:hover{transform:rotate(3deg) translateY(-5px)}.project-chrome{height:29px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 9px;font-size:9px;color:var(--ink);background:#fff}.project-chrome>span:first-child{display:flex;gap:4px}.project-chrome i{width:5px;height:5px;background:#d5d0d5;border-radius:50%}.hero-mini{background:#fff2b5;color:#233fce;padding:16px 13px 0}.mini-top{display:flex;justify-content:space-between;font-size:6px}.hero-mini>strong{display:block;font:750 clamp(40px,4.65vw,78px)/1.4 Club,Arial,sans-serif;letter-spacing:-.085em;white-space:nowrap}.mini-scene{height:260px;position:relative}.mini-scene img{object-position:center 62%}.mini-message{position:absolute;left:15px;top:40px;padding:23px 18px;background:#233fce;color:#fff2b5;font:650 30px/.98 Club,Arial,sans-serif;letter-spacing:-.05em}.mini-message span{display:block;font:9px Body,Arial,sans-serif;margin:15px 0 19px;letter-spacing:0}.mini-message b{font:7px Body,Arial,sans-serif;letter-spacing:0;background:#fff2b5;color:#233fce;display:block;border-radius:20px;padding:9px 12px}.mini-foot{font-size:7px;text-align:center;padding:12px 0}.project-note{position:absolute;bottom:-3px;left:12%;display:flex;gap:5px;align-items:center;transform:rotate(-7deg);font:italic 18px/1.2 Georgia,serif}.project-note svg{width:80px;fill:none;stroke:var(--ink);stroke-width:2;transform:rotate(15deg)}.art-tag{position:absolute;right:-22px;bottom:26px;background:var(--orange);padding:17px 19px;transform:rotate(-8deg);font-size:13px;font-weight:600;line-height:1.3}.hero-end{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;border-top:1px solid var(--line);font-size:12px}.hero-end a{display:flex;gap:35px;align-items:center}.hero-end a span{font-size:24px}.hero-end>span{color:#51465f}
.section-head{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:52px}.eyebrow{font-size:13px;margin-bottom:24px}.section-head>p{font-size:15px;line-height:1.7;max-width:290px}.work{padding-bottom:100px}.project-stage{display:block;position:relative;overflow:hidden;isolation:isolate}.cafe-stage{background:#e0d8ed;padding:60px 12% 64px}.work-browser{background:white;padding:7px;border-radius:6px;box-shadow:0 18px 40px #26212d18;transition:transform .4s}.project-stage:hover .work-browser{transform:translateY(-8px)}.site-preview{position:relative;aspect-ratio:1440/960;overflow:hidden;background:#fff;pointer-events:none;container-type:inline-size}.site-preview iframe{position:absolute;top:0;left:0;width:1440px;height:960px;transform:scale(var(--preview-scale,.5));transform-origin:top left;border:0;pointer-events:none}.open-project{display:flex;align-items:center;gap:30px;position:absolute;right:26px;bottom:25px;z-index:3;background:var(--ink);color:#fff;padding:12px 17px;border-radius:3px;font-size:13px}.open-project>span{font-size:21px}.stage-caption{position:absolute;bottom:23px;left:28px;font-size:11px}.project-info{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:22px 0 0}.project-info h3{font-size:26px;letter-spacing:-.045em;font-weight:600}.project-info p{font-size:13px;color:var(--muted);margin-top:4px}.project-type{font-size:11px;text-align:right;padding-top:6px}.project-type>span{display:block;color:var(--muted);margin-top:4px}.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:48px}.project-pair .project-stage{padding:45px 8% 62px}.salon-stage{background:#e6cbc9}.plant-stage{background:#d4dfce}.project-pair .work-browser{padding:5px}.project-pair .project-chrome{height:22px;font-size:7px}.project-pair .open-project{right:18px;bottom:15px;font-size:11px;padding:7px 12px}.project-pair .project-info h3{font-size:24px}
.about{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-block:110px}.about-title h2{font-size:clamp(45px,5.2vw,78px)}.about .eyebrow{color:#c7bfd2}.signature{margin-top:34px;font:italic 62px Georgia,serif;color:var(--orange);transform:rotate(-7deg);transform-origin:left}.signature>span{font:45px Studio,Arial,sans-serif;margin-left:15px}.about-copy{padding-top:42px;max-width:500px}.about-copy>p{font-size:16px;line-height:1.8;color:#cbc6d0;margin-bottom:25px}.about-copy .about-lead{font-size:25px;line-height:1.4;color:var(--paper);letter-spacing:-.035em}.about-promises{display:flex;flex-direction:column;margin-top:32px}.about-promises span{border-top:1px solid #ffffff28;padding:12px 0;font-size:14px}.about-promises span:before{content:'↗︎';margin-right:14px;color:var(--orange)}
.packages{background:#f2efea}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-card{padding:32px 28px;background:var(--paper);display:flex;flex-direction:column;border:1px solid #26212d15;border-radius:5px}.price-card.featured{background:var(--lilac);border-color:var(--lilac)}.plan-top h3{font-size:25px;letter-spacing:-.045em}.plan-top>span{font-size:12px;display:block;margin-top:5px}.price{font:600 clamp(45px,4.6vw,68px)/1 Studio,Arial,sans-serif;letter-spacing:-.07em;margin:40px 0 23px}.price small{display:block;font:12px Body,Arial,sans-serif;letter-spacing:0;margin-bottom:10px}.custom-price{font-size:clamp(39px,4vw,60px)}.plan-copy{font-size:14px;line-height:1.7;min-height:72px;max-width:280px}.price-card ul{margin:26px 0 33px;padding:21px 0 0;border-top:1px solid var(--line);list-style:none}.price-card li{font-size:12px;margin-bottom:12px;padding-left:18px;position:relative}.price-card li:before{content:'✓';position:absolute;left:0}.plan-link{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:13px 0;border-bottom:1px solid;font-size:14px;font-weight:600}.plan-link>span{font-size:23px}.pricing-note{font-size:12px;text-align:center;margin:29px auto 0;max-width:720px;color:var(--muted)}
.process{display:grid;grid-template-columns:1fr 1fr;gap:10%}.process-intro>p:not(.eyebrow){font-size:16px;max-width:340px;margin-top:28px}.text-link{display:inline-flex;align-items:center;gap:45px;border-bottom:1px solid;font-size:14px;font-weight:600;padding-bottom:7px;margin-top:26px}.text-link span{font-size:24px}.process-list{list-style:none;padding:0;margin:15px 0 0}.process-list li{display:flex;gap:25px;padding:30px 0;border-top:1px solid var(--line)}.process-list li:first-child{padding-top:0;border-top:0}.step-number{font-size:13px;color:var(--muted);padding-top:6px}.process-list h3{font-size:26px;font-weight:550;letter-spacing:-.045em;line-height:1.2}.process-list p{font-size:14px;line-height:1.8;margin-top:13px;color:var(--muted)}
.faq{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:75px;padding-bottom:90px}.faq h2{font-size:clamp(31px,3.3vw,48px)}.questions details{border-bottom:1px solid var(--line)}.questions summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:14px;font-weight:600}.questions details:first-child summary{padding-top:0}.questions summary::-webkit-details-marker{display:none}.questions summary span{font-size:24px;font-weight:400;transition:transform .2s}.questions details[open] summary span{transform:rotate(45deg)}.questions details p{font-size:14px;line-height:1.8;color:var(--muted);padding:0 28px 23px 0}
.contact{background:var(--orange);padding-top:45px;padding-bottom:60px}.contact-top{display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:47px}.contact h2{font-size:clamp(66px,10.3vw,160px);letter-spacing:-.08em;line-height:.95}.contact h2>span{color:var(--paper)}.contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-top:52px}.contact-email{display:inline-flex;gap:30px;align-items:center;border-bottom:1px solid;font-size:clamp(20px,2.5vw,36px);letter-spacing:-.045em;padding-bottom:5px}.contact-bottom p{font-size:12px;margin-top:13px}.footer{background:var(--ink);color:var(--paper);padding:48px 6% 25px}.footer-main{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:40px}.footer-main p{font-size:13px;color:#c5bdcc}.footer-main>a:last-child{font-size:12px}.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid #ffffff25;font-size:10px;color:#c5bdcc}.footer-bottom>div{display:flex;gap:25px}.footer a:hover{text-decoration:underline;text-underline-offset:4px}
@media(min-width:1700px){.hero-grid,.hero-label,.hero-end{max-width:1600px;margin-inline:auto}.hero-art{max-width:610px;margin-left:auto}.hero-mini>strong{font-size:90px}.mini-scene{height:330px}.mini-message{font-size:38px}.section{padding-inline:max(6%,calc((100vw - 1500px)/2))}}
@media(max-width:1050px){.section{padding:80px 5%}.hero-grid{grid-template-columns:1.15fr 1fr;gap:2%}.hero h1{font-size:8.8vw}.hero h1>span{font-size:.79em}.hero-art{padding-left:0}.mini-scene{height:215px}.mini-message{font-size:24px;padding:17px 12px;left:10px;top:30px}.hero-mini>strong{font-size:4.8vw}.art-cross{font-size:130px;top:-7px}.project-note{font-size:15px}.project-note svg{width:55px}.art-tag{right:-8px;font-size:11px;padding:14px}.hero-bottom p{font-size:16px}.hero-bottom .button{font-size:12px;gap:20px}.hero-end{font-size:10px}.section-head{gap:30px}.section-head>p{max-width:230px;font-size:14px}.price-card{padding:25px 20px}.plan-copy{min-height:96px}.price-card li{font-size:11px}.about,.process,.faq{gap:6%}.about-copy{padding-top:30px}.about-copy .about-lead{font-size:22px}.about-copy>p{font-size:14px}.process-list h3{font-size:23px}.project-type{font-size:9px}.project-info p{font-size:12px}.contact{padding-top:40px}.contact-bottom .button{font-size:12px;gap:16px}}
@media(max-width:700px){.section{padding:65px 6%}.header{height:85px;padding-inline:6%}.logo{font-size:31px}.header nav{display:none}.header-contact{font-size:13px;gap:25px}.hero{padding:13px 6% 0}.hero-label{font-size:10px;padding-bottom:22px}.hero-label>span:last-child{display:none}.hero-grid{grid-template-columns:1fr;gap:35px;padding:35px 0 38px}.hero h1{font-size:clamp(66px,15.5vw,110px);line-height:.94;letter-spacing:-.075em}.hero h1>span{font-size:.85em;margin-top:9px}.hero-bottom{margin-top:25px}.hero-bottom p{font-size:16px}.hero-bottom .button{font-size:13px;gap:25px;margin-top:22px}.hero-art{max-width:460px;width:100%;margin:0 auto;padding:27px 15px 55px}.hero-project{transform:rotate(5deg)}.hero-mini>strong{font-size:clamp(38px,8.4vw,56px)}.mini-scene{height:230px}.mini-message{font-size:30px;top:32px;padding:20px 15px;left:14px}.mini-top{font-size:6px}.art-cross{font-size:125px;right:0;top:-15px}.art-tag{right:-7px;bottom:40px}.project-note{bottom:-2px;left:10%;font-size:16px}.hero-end{padding-block:20px;font-size:11px}.hero-end>span{display:none}.hero-end a{gap:15px;width:100%;justify-content:space-between}.section-head{display:block;margin-bottom:32px}.section-head h2{font-size:clamp(35px,8vw,50px)}.eyebrow{font-size:11px;margin-bottom:19px}.section-head>p{max-width:340px;font-size:14px;margin-top:23px}.section-head>p br{display:none}.cafe-stage{padding:30px 6% 65px}.work-browser{padding:4px}.project-chrome{height:21px;font-size:7px}.project-chrome i{width:4px;height:4px}.open-project{right:14px;bottom:14px;padding:9px 12px;font-size:11px;gap:20px}.stage-caption{display:none}.project-info{padding-top:17px;gap:12px}.project-info h3{font-size:24px}.project-info p{font-size:12px;max-width:230px}.project-type{font-size:9px;min-width:65px}.project-pair{grid-template-columns:1fr;gap:34px;margin-top:34px}.project-pair .project-stage{padding:33px 6% 60px}.about{grid-template-columns:1fr;gap:25px}.about-title h2{font-size:clamp(44px,11vw,66px)}.signature{font-size:48px;margin-top:22px}.signature>span{font-size:35px}.about-copy{padding-top:10px;max-width:none}.about-copy .about-lead{font-size:23px}.about-copy>p{font-size:15px}.pricing-grid{grid-template-columns:1fr;gap:18px}.price-card{padding:28px}.price{font-size:64px;margin-top:27px}.custom-price{font-size:55px}.plan-copy{font-size:14px;min-height:0;max-width:none}.price-card li{font-size:13px}.price-card ul{margin-bottom:20px}.plan-link{font-size:14px}.pricing-note{text-align:left;font-size:11px;margin-top:22px}.process{grid-template-columns:1fr;gap:42px}.process-intro h2{font-size:46px}.process-intro>p:not(.eyebrow){font-size:15px}.process-list{margin:0}.process-list li{gap:20px;padding:26px 0}.process-list h3{font-size:25px}.process-list p{font-size:14px}.faq{grid-template-columns:1fr;gap:32px;padding-top:55px}.faq h2{font-size:36px}.questions summary{font-size:14px;gap:20px}.questions details p{font-size:14px}.contact{padding-top:30px;padding-bottom:45px}.contact-top{font-size:11px;margin-bottom:36px;padding-bottom:22px}.contact-top>span{display:none}.contact h2{font-size:clamp(51px,11vw,77px);letter-spacing:-.075em}.contact-bottom{display:block;margin-top:30px}.contact-email{font-size:25px;gap:22px}.contact-bottom .button{margin-top:30px;font-size:13px;gap:20px}.footer{padding:35px 6% 25px}.footer-main{flex-wrap:wrap;gap:25px;padding-bottom:30px}.footer-main p{font-size:11px}.footer-main>a:last-child{width:100%;font-size:11px}.footer-bottom{flex-wrap:wrap;gap:16px;font-size:10px}.footer-bottom>div{width:100%;gap:22px}}
/* Let content shrink inside grids instead of imposing its desktop min-width. */
.hero-grid>*,.project-pair>*,.pricing-grid>*,.about>*,.process>*,.faq>*,.section-head>*,.project-info>*{min-width:0}
.hero-grid{grid-template-columns:minmax(0,1.23fr) minmax(0,1fr)}
.project-pair,.about,.process,.faq{grid-template-columns:repeat(2,minmax(0,1fr))}
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.button{max-width:100%;text-align:left}.button>span,.header-contact>span,.questions summary>span{flex-shrink:0}
.site-preview iframe{width:var(--preview-width,1440px);height:var(--preview-height,960px)}
@media(min-width:701px) and (max-width:1000px){
  .header{padding-inline:5%}.header nav{gap:20px}.header-contact{gap:15px}
  .hero-grid{grid-template-columns:minmax(0,1fr);padding-top:40px;gap:25px}
  .hero h1{font-size:clamp(84px,12vw,120px)}.hero h1>span{font-size:.85em}
  .hero-art{width:min(100%,550px);justify-self:center;padding:30px 30px 60px;margin:0}
  .hero-mini>strong{font-size:60px}.mini-scene{height:260px}.art-tag{right:8px}
  .hero-end>span{max-width:190px;text-align:right}
  .section-head{align-items:start}.section-head>div{flex:1}.section-head>p{max-width:210px}
  .pricing-grid{grid-template-columns:minmax(0,1fr)}
  .price-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:35px;padding:30px}
  .price-card .plan-top,.price-card .price,.price-card .plan-copy{grid-column:1}
  .price-card .price{margin:24px 0 18px}.plan-copy{min-height:0}
  .price-card ul{grid-column:2;grid-row:1/4;margin:0;padding-top:0;border-top:0}
  .price-card li{font-size:13px}.price-card .plan-link{grid-column:1/-1;margin-top:20px}
  .about,.process,.faq{gap:7%}.about-title h2,.process-intro h2{font-size:clamp(38px,5vw,50px)}
  .faq h2{font-size:34px}.contact-bottom{align-items:start;flex-direction:column;gap:24px}
}
@media(max-width:700px){
  .header{height:auto;min-height:116px;flex-wrap:wrap;gap:15px;padding-top:21px;padding-bottom:0}
  .header nav{display:flex;order:3;flex:0 0 100%;justify-content:space-between;gap:12px;border-top:1px solid var(--line);font-size:13px}
  .header nav a{display:flex;align-items:center;min-height:46px;padding:4px 0}
  .header-contact{min-height:44px}.hero{padding-top:19px}
  .hero-grid,.project-pair,.pricing-grid,.about,.process,.faq{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(52px,15.5vw,100px)}
  .hero h1>span{white-space:normal;font-size:.8em;max-width:100%;text-wrap:balance}
  .hero-bottom p br{display:none}.hero-bottom p{max-width:32ch}
  .hero-bottom .button,.contact-bottom .button{width:100%;gap:12px;padding:16px 18px;min-height:56px}
  .hero-art{padding:22px 18px 62px}.hero-project{transform:rotate(3deg)}
  .hero-mini{padding:12px 9px 0}.hero-mini>strong{font-size:clamp(26px,8.1vw,49px)}
  .mini-scene{height:215px}.mini-message{font-size:26px;left:10px;top:30px;padding:18px 12px}
  .mini-top{gap:8px;font-size:6px}.mini-top>span{white-space:nowrap}
  .art-tag{right:0;bottom:28px;font-size:10px;padding:11px 13px}
  .project-note{left:6%;bottom:0;font-size:14px}.project-note svg{width:42px}
  .art-cross{font-size:105px;right:2px;top:-12px}
  .hero-end a{align-items:center;line-height:1.5}.hero-end a>span{flex:none}
  .site-preview{aspect-ratio:390/700}
  .cafe-stage,.project-pair .project-stage{padding:24px 7% 72px}
  .project-stage .open-project{min-height:44px;bottom:14px;right:7%;left:7%;justify-content:space-between;font-size:13px;padding:10px 15px}
  .work-browser .project-chrome{height:26px;font-size:9px}
  .project-info{flex-wrap:wrap;gap:10px}.project-info>div{flex:1 1 190px}
  .project-type{font-size:10px;min-width:0}.project-info p{max-width:none}
  .process-intro h2{font-size:clamp(35px,10vw,46px)}
  .faq h2{font-size:clamp(30px,8vw,36px)}.questions summary{min-height:56px}
  .contact h2{font-size:clamp(36px,10.5vw,73px);overflow-wrap:normal}
  .contact-email{font-size:clamp(19px,6vw,27px);gap:14px;max-width:100%}
  .contact-bottom{min-width:0}.contact-bottom>div{min-width:0}
  .footer-bottom>div{flex-wrap:wrap;gap:8px 22px}.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
  .footer-main>a:last-child{min-height:44px;display:flex;align-items:center}
}
@media(hover:none){.hero-project:hover{transform:rotate(3deg)}.project-stage:hover .work-browser,.button:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}