/* Complete, fictional design studies. Styles stay inside this portfolio and its dialog. */
@font-face{font-family:"Study Cormorant";src:url('/fonts/study-cormorant.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Study Cormorant";src:url('/fonts/study-cormorant-italic.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Study Barlow";src:url('/fonts/study-barlow-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* A portfolio with room to see the work. */
.work:has(.portfolio-grid){padding-block:85px 78px;background:linear-gradient(130deg,#18b7a4,#12ac9e 60%,#1bbbaa)}
.portfolio-intro{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end;padding-bottom:38px}
.portfolio-intro h2{max-width:690px;margin-top:13px;font-size:clamp(34px,3.6vw,54px);line-height:1.1;color:#05332e;letter-spacing:-.04em}
.portfolio-intro .eyebrow{color:#05332e}
.portfolio-summary{font-size:15px;line-height:1.75;max-width:410px;justify-self:end;color:#05332e}
.portfolio-controls{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 0 24px;border-top:1px solid #074f4738;font-size:12px;color:#05332e}
.portfolio-controls>span,.portfolio-controls button{display:flex;align-items:center;gap:9px}
.portfolio-controls button{border:1px solid #074f4760;background:#fff0;border-radius:30px;padding:10px 15px;min-height:42px;font-size:12px;font-weight:600;transition:background .2s}
.portfolio-controls button:hover{background:#ffffff40}
.portfolio-live-dot{width:6px;height:6px;background:#075247;border-radius:50%;box-shadow:0 0 0 4px #07524713;flex-shrink:0}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 30px;align-items:start}
.portfolio-card{min-width:0}
.portfolio-card--beauty{grid-column:1/-1}
.portfolio-frame{position:relative;border:1px solid #ffffffb0;border-radius:12px;background:#f5f3ed;box-shadow:0 18px 45px -20px #004e4460;overflow:hidden;isolation:isolate;transition:box-shadow .3s,transform .3s}
.portfolio-frame:hover{box-shadow:0 24px 48px -18px #00463e80;transform:translateY(-3px)}
.portfolio-browser-bar{height:30px;display:flex;justify-content:space-between;align-items:center;background:#fbfaf7;color:#6d716c;font:9px/1 Inter,Arial,sans-serif;padding:0 13px;border-bottom:1px solid #292c2314;position:relative;z-index:2;letter-spacing:.03em}
.portfolio-browser-dots{display:flex;gap:4px;width:26px}
.portfolio-browser-dots i{height:5px;width:5px;border:1px solid #a4a89e;border-radius:50%}
.portfolio-preview{position:relative;overflow:hidden;aspect-ratio:1.26;background:#f0eadd;isolation:isolate;pointer-events:none;user-select:none}
.portfolio-card--beauty .portfolio-preview{aspect-ratio:1.95}
.portfolio-preview--fitness{background:#111511}
.portfolio-preview-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portfolio-preview-scale{position:absolute;left:0;top:0;width:1100px;transform:scale(var(--preview-scale));transform-origin:top left;background:#f8f5ed}
.portfolio-preview-track{width:1100px;animation:portfolio-page-tour var(--preview-duration,35s) linear infinite;animation-play-state:paused}
.portfolio-preview-track.is-running{animation-play-state:running;will-change:transform}
.portfolio-frame:hover .portfolio-preview-track,.portfolio-frame:focus-within .portfolio-preview-track{animation-play-state:paused}
body:has(dialog[open]) .portfolio-preview-track{animation-play-state:paused}
@keyframes portfolio-page-tour{0%,9%{transform:translateY(0)}77%,84%{transform:translateY(var(--preview-travel))}100%{transform:translateY(0)}}
.portfolio-open{position:absolute;inset:30px 0 0;z-index:3;width:100%;border:0;background:transparent;text-align:left;color:#123e36}
.portfolio-open-circle{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:49px;height:49px;border-radius:50%;background:#fff;box-shadow:0 3px 16px #0002;transition:background .2s,transform .3s}
.portfolio-open-hint{position:absolute;right:79px;bottom:26px;background:#fff;color:#193b31;padding:10px 14px;border-radius:30px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:7px;box-shadow:0 3px 16px #0001;opacity:0;transform:translateX(7px);transition:opacity .2s,transform .2s}
.portfolio-open:hover .portfolio-open-hint,.portfolio-open:focus-visible .portfolio-open-hint{opacity:1;transform:none}
.portfolio-open:hover .portfolio-open-circle{transform:rotate(8deg);background:#e6f8ed}
.portfolio-open:focus-visible{outline:3px solid #113e33;outline-offset:-5px}
.portfolio-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 2px 0;color:#05332e}
.portfolio-index{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.4}
.portfolio-caption h3{display:flex;gap:17px;align-items:baseline;font-size:24px;letter-spacing:-.04em;font-weight:650;margin-top:5px;line-height:1.2}
.portfolio-caption h3 span{font-size:12px;letter-spacing:0;font-weight:450;line-height:1.5}
.portfolio-disclosure{font-size:10px;line-height:1.6;max-width:95px;text-align:right;color:#05332e}
.portfolio-footnote{max-width:650px;font-size:12px;color:#05332e;margin-top:34px;line-height:1.8}

/* The three fictional brands share behavior, not an art direction. */
.demo-page{--demo-bg:#f5f0e8;--demo-ink:#402d28;--demo-muted:#736057;--demo-accent:#49312c;--demo-line:#66483a38;container-type:inline-size;position:relative;isolation:isolate;width:100%;overflow:clip;background:var(--demo-bg);color:var(--demo-ink);font-family:Inter,Arial,sans-serif;font-size:14px;line-height:1.5}
.demo-page *{box-sizing:border-box}
.demo-page p{margin:0;font-size:14px;line-height:1.85;color:var(--demo-muted)}
.demo-page h3,.demo-page h4{margin:0;color:var(--demo-ink);font-family:"Study Cormorant",Georgia,serif;font-weight:500;letter-spacing:-.045em;line-height:.98;text-wrap:balance;overflow-wrap:normal;word-break:normal}
.demo-page h3{font-size:68px}
.demo-page h4{font-size:33px}
.demo-page em{font-weight:400;font-style:italic}
.demo-page img{display:block;max-width:none;width:100%;height:100%;object-fit:cover}
.demo-page button{background:transparent;border:0;border-radius:0;padding:0;color:inherit;font:inherit;line-height:inherit;text-align:left}
.demo-page button:focus-visible,.demo-page input:focus-visible,.demo-page textarea:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.demo-page svg{display:block;flex-shrink:0}
.demo-page .demo-kicker{font:500 9px/1.6 Inter,Arial,sans-serif;letter-spacing:.14em;color:var(--demo-ink)}
.demo-section{padding:95px 62px}
.demo-photo{position:relative;overflow:hidden;height:100%;width:100%}
.demo-photo img{transition:transform 1s cubic-bezier(.2,.6,.3,1)}
.demo-brand-symbol{width:40px;height:40px}
.demo-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-header{position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:22px;height:84px;padding:0 43px;background:var(--demo-bg);border-bottom:1px solid var(--demo-line)}
.demo-page[data-interactive=true] .demo-header{position:sticky;top:0}
.demo-page .demo-wordmark{display:inline-flex;align-items:center;gap:12px;min-height:44px;flex-shrink:0}
.demo-wordmark>.demo-brand-symbol{width:29px;height:29px}
.demo-brand-name{font:500 34px/.9 "Study Cormorant",Georgia,serif;letter-spacing:.06em}
.demo-brand-descriptor{font:500 6px/1.6 Inter,Arial,sans-serif;letter-spacing:.1em;max-width:100px;margin-left:7px}
.demo-navigation{display:flex;align-items:center;gap:30px}
.demo-page .demo-navigation>button,.demo-navigation>span{display:inline-flex;align-items:center;gap:13px;min-height:44px;font:450 11px/1.4 Inter,Arial,sans-serif}
.demo-navigation .demo-nav-contact{border-bottom:1px solid currentColor;padding-bottom:2px}
.demo-page .demo-menu-toggle{display:none}
.demo-page .demo-solid-button{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;min-height:49px;padding:15px 22px;background:var(--demo-accent);border:1px solid var(--demo-accent);color:var(--demo-bg);font:500 11px/1.4 Inter,Arial,sans-serif;transition:background .2s,filter .2s}
.demo-page button.demo-solid-button:hover{filter:brightness(1.15)}
.demo-solid-button>svg,.demo-inline-link>svg,.demo-footer-contact>svg{transition:transform .25s}
.demo-solid-button:hover>svg,.demo-inline-link:hover>svg,.demo-footer-contact:hover>svg{transform:translate(3px,-3px)}
.demo-page .demo-inline-link{display:inline-flex;align-items:center;gap:26px;min-height:44px;margin-top:23px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:11px;line-height:1.4}
.demo-contact{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
.demo-contact h3{margin:24px 0}
.demo-contact>div>p:not(.demo-kicker){max-width:310px;font-size:13px}
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:23px 18px}
.demo-form label{display:grid;gap:7px;color:var(--demo-ink);font-size:10px}
.demo-page .demo-form input,.demo-page .demo-form textarea{min-width:0;width:100%;min-height:44px;padding:12px 0;border:0;border-bottom:1px solid var(--demo-line);border-radius:0;background:transparent;color:var(--demo-ink);font:12px/1.6 Inter,Arial,sans-serif;resize:vertical}
.demo-page .demo-form input::placeholder,.demo-page .demo-form textarea::placeholder{color:var(--demo-muted);opacity:1}
.demo-form-message{grid-column:1/-1}
.demo-form>.demo-solid-button{grid-column:1/-1;justify-self:start;margin-top:3px}
.demo-page .demo-form-note,.demo-page .demo-form-result{grid-column:1/-1;font-size:10px;line-height:1.75}
.demo-page .demo-form-result{display:flex;align-items:start;gap:9px;padding:12px;border:1px solid var(--demo-line);color:var(--demo-ink)}
.demo-form--static>span:not(.demo-solid-button){border-bottom:1px solid var(--demo-line);font-size:11px;padding:14px 0;color:var(--demo-muted)}
.demo-form--static>.demo-form-message{min-height:88px}
.demo-form--static small{grid-column:1/-1;font-size:9px;color:var(--demo-muted)}
.demo-page .demo-form-heading{font:500 31px/1.1 "Study Cormorant",Georgia,serif;color:var(--demo-ink);margin-bottom:28px}
.demo-footer{padding:36px 62px 23px;border-top:1px solid var(--demo-line)}
.demo-footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px}
.demo-footer-top>p{font-size:11px}
.demo-page .demo-footer-contact{display:inline-flex;align-items:center;gap:22px;min-height:44px;font-size:11px}
.demo-footer-signature{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:40px 0 31px;font:500 182px/.77 "Study Cormorant",Georgia,serif;letter-spacing:-.055em}
.demo-footer-signature>.demo-brand-symbol{width:100px;height:100px}
.demo-footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:23px;border-top:1px solid var(--demo-line);font-size:9px;color:var(--demo-muted)}
.demo-visible{animation:study-editorial-arrive .85s cubic-bezier(.2,.65,.3,1) both}
@keyframes study-editorial-arrive{from{opacity:.45;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes study-detail-arrive{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}

/* AUREA: magazine composition, soft clay, sculptural crops and quiet space. */
.demo-beauty{--demo-bg:#f5f0e8;--demo-ink:#402d28;--demo-muted:#736057;--demo-accent:#49312c;--demo-line:#66483a38}
.demo-beauty .demo-header{background:#f5f0e8}
.aurea-hero{position:relative;min-height:650px;background:#e4c9ba;isolation:isolate}
.aurea-hero>.aurea-hero-photo{position:absolute;inset:0 0 0 auto;width:77%;height:100%}
.aurea-hero-photo img{object-position:65% center}
.aurea-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#e8d1c2 0%,#e8d1c2ee 26%,#e8d1c27a 47%,#e8d1c200 66%);pointer-events:none}
.aurea-hero-copy{position:relative;z-index:1;padding:69px 62px 90px;max-width:780px}
.aurea-hero-copy>.demo-kicker{font-size:8px;letter-spacing:.12em}
.aurea-hero h3{font-size:clamp(85px,10.8cqw,135px);line-height:.85;letter-spacing:-.055em;margin:38px 0 29px}
.aurea-hero h3 em{display:inline-block;margin-left:57px}
.aurea-hero-detail{margin-left:117px}
.aurea-hero-detail>p{font-size:13px;color:#553b31;line-height:1.75}
.aurea-hero .demo-solid-button{margin-top:25px;font-size:10px;min-height:46px}
.aurea-hero-side{position:absolute;right:22px;bottom:28px;color:#fff6eb;font-size:8px;letter-spacing:.22em;writing-mode:vertical-rl;text-shadow:0 1px 4px #34221c}
.aurea-hero-note{position:absolute;left:62px;bottom:-33px;z-index:3;display:flex;align-items:center;gap:20px;width:372px;min-height:109px;padding:11px 18px 11px 11px;background:#f7f2e9;box-shadow:0 12px 32px #3c292914}
.aurea-hero-note>img{width:78px;height:85px;flex-shrink:0;object-position:65% center}
.aurea-hero-note>div>span{font-size:7px;letter-spacing:.12em}
.aurea-hero-note>div>p{font-size:11px;color:var(--demo-ink);line-height:1.6;margin-top:7px}
.aurea-hero-note>.demo-brand-symbol{width:37px;height:37px;margin-left:auto}
.aurea-manifesto{display:grid;grid-template-columns:1fr 3.35fr;gap:43px;padding-top:125px;padding-bottom:85px}
.aurea-manifesto>.demo-kicker{padding-top:10px;font-size:8px;max-width:120px}
.aurea-manifesto h3{font-size:64px}
.aurea-manifesto h3 em{color:#966852}
.aurea-manifesto-bottom{display:flex;align-items:center;gap:53px;margin-top:35px}
.aurea-manifesto-bottom>.demo-brand-symbol{height:60px;width:60px;flex-shrink:0;color:#a37460}
.aurea-manifesto-bottom>p{max-width:455px;font-size:13px;line-height:1.85}
.aurea-treatments{padding-top:15px;padding-bottom:100px}
.aurea-section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:42px;padding-top:38px;border-top:1px solid var(--demo-line)}
.aurea-section-heading h3{font-size:67px;margin-top:23px}
.aurea-section-heading>p{font-size:12px;max-width:250px;padding-bottom:5px}
.aurea-treatment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px;align-items:start}
.demo-page .aurea-treatment{display:block;width:100%;min-width:0;text-align:left}
.aurea-treatment-image{position:relative;height:355px;margin-bottom:22px;overflow:hidden;background:#decebf}
.aurea-treatment--02{padding-top:62px!important}
.aurea-treatment--02 .aurea-treatment-image{height:293px}
.aurea-treatment--01 img{object-position:65% center}
.aurea-treatment--02 img{object-position:65% center}
.aurea-treatment--03 img{object-position:78% center}
.aurea-treatment-image>img{transition:transform .8s cubic-bezier(.2,.65,.3,1)}
.aurea-treatment:hover .aurea-treatment-image>img{transform:scale(1.045)}
.aurea-treatment-image>span:first-of-type{position:absolute;top:15px;left:15px;background:#f5f0e8eb;padding:6px 9px;font-size:8px;letter-spacing:.08em}
.aurea-treatment-arrow{position:absolute;right:15px;bottom:15px;width:38px;height:38px;border-radius:50%;background:#f5f0e8;display:grid;place-items:center;color:#402d28;transition:transform .25s}
.aurea-treatment:hover .aurea-treatment-arrow{transform:rotate(8deg)}
.aurea-treatment>.demo-kicker{font-size:7px;letter-spacing:.1em;display:block;margin-bottom:10px}
.aurea-treatment h4{font-size:32px;letter-spacing:-.03em}
.aurea-treatment>p{font-size:12px;line-height:1.8;margin-top:12px;max-width:265px}
.aurea-philosophy{--demo-ink:#f6eee6;--demo-muted:#d7c6bf;--demo-line:#d7c6bf40;display:grid;grid-template-columns:52% 48%;background:#382b2e;min-height:680px}
.aurea-philosophy-photo{position:relative;min-width:0;overflow:hidden;padding:40px 0 40px 40px}
.aurea-philosophy-photo>.demo-photo{height:100%;min-height:550px}
.aurea-philosophy-photo img{object-position:60% center}
.aurea-photo-caption{position:absolute;top:62px;left:64px;font-size:7px;letter-spacing:.17em;color:#3d2b21;background:#f9ecdadb;padding:8px 12px}
.aurea-photo-letter{position:absolute;bottom:12px;left:58px;color:#fff7e6;font:italic 400 220px/.8 "Study Cormorant",Georgia,serif;letter-spacing:-.12em}
.aurea-philosophy-copy{align-self:center;padding:65px 62px 65px 58px}
.aurea-philosophy h3{font-size:70px;margin:29px 0 27px}
.aurea-philosophy-copy>p:not(.demo-kicker){font-size:12px;line-height:1.9;max-width:325px}
.aurea-philosophy-copy>p+p{margin-top:15px}
.aurea-philosophy .demo-inline-link{color:#f6eee6}
.aurea-questions{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-block:95px}
.aurea-questions h3{font-size:55px;margin-top:21px}
.demo-question{border-top:1px solid var(--demo-line)}
.demo-question:last-child{border-bottom:1px solid var(--demo-line)}
.demo-page .demo-question>button,.demo-question>span{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:73px;gap:22px;padding:23px 0;font-size:12px}
.demo-question>button[aria-expanded=true]>svg{transform:rotate(45deg)}
.demo-question>p{font-size:12px;line-height:1.85;padding:0 25px 23px 0}
.aurea-contact{background:#e9d7cc;--demo-muted:#6c5045;padding-block:85px}
.aurea-contact h3{font-size:82px;letter-spacing:-.05em}
.aurea-contact>div>.demo-brand-symbol{margin-top:27px;width:58px;height:58px;color:#996f5b}
.aurea-form-panel{background:#f7f2eb;padding:35px 30px}
.demo-beauty .demo-footer{background:#f5f0e8}

/* FORM: athletic editorial, industrial photography and orange signal surfaces. */
.demo-fitness{--demo-bg:#181916;--demo-ink:#f2f0e8;--demo-muted:#b9bbb3;--demo-accent:#ff633b;--demo-line:#b9bbb338}
.demo-fitness h3,.demo-fitness h4{font-family:"Study Barlow","Arial Narrow",Arial,sans-serif;font-weight:700;letter-spacing:-.015em;line-height:.91}
.demo-fitness em{font-style:normal;font-weight:700}
.demo-fitness .demo-header{background:#181916;border-bottom-color:#ffffff24}
.demo-fitness .demo-wordmark{gap:10px}
.demo-fitness .demo-wordmark>.demo-brand-symbol{order:2;width:20px;height:20px;color:#ff633b;margin-left:5px}
.demo-fitness .demo-brand-name{font:700 46px/.9 "Study Barlow","Arial Narrow",Arial,sans-serif;letter-spacing:-.025em}
.form-brand-dot{color:#ff633b}
.demo-fitness .demo-brand-descriptor{order:3;margin-left:7px;font-size:6px}
.demo-fitness .demo-kicker{color:#ff8968}
.demo-fitness .demo-solid-button{color:#181916}
.form-hero{position:relative;min-height:665px;overflow:hidden;background:#1b1b17;isolation:isolate}
.form-hero>.form-hero-photo{position:absolute;inset:0;height:100%}
.form-hero-photo img{object-position:center 43%}
.form-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#121410e6,#12141091 38%,#12141009 74%),linear-gradient(0deg,#12141080,transparent 35%)}
.form-hero-copy{position:relative;z-index:1;padding:45px 62px 55px;max-width:755px}
.form-hero-copy>.demo-kicker{display:flex;align-items:center;gap:10px;color:#e1e0d6;font-size:8px;letter-spacing:.13em}
.form-hero-copy>.demo-kicker>span{height:6px;width:6px;background:#ff633b}
.form-hero h3{font-size:clamp(105px,12.3cqw,150px);line-height:.86;letter-spacing:-.025em;margin:30px 0 26px;color:#f7f4ec}
.form-hero h3 em{color:#ff754d}
.form-hero-detail{display:flex;align-items:end;gap:28px;flex-wrap:wrap}
.form-hero-detail>p{color:#e0ded4;font-size:11px;line-height:1.75;max-width:235px}
.form-hero .demo-solid-button{min-height:45px;font-size:10px;gap:21px;padding:13px 18px}
.form-hero-tag{position:absolute;right:34px;bottom:33px;display:flex;flex-direction:column;gap:3px;text-align:right;font-size:8px;letter-spacing:.1em;color:#f3f0e7}
.form-hero-tag>span:first-child{font-size:7px;color:#e2c3b5}
.form-hero-cross{position:absolute;top:28px;right:34px;font-size:35px;line-height:1;font-weight:300;color:#f3f0e7}
.form-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 62px;background:#ff633b;color:#181916}
.form-principles>span{display:flex;align-items:center;gap:17px;font:700 21px/1 "Study Barlow","Arial Narrow",Arial,sans-serif;letter-spacing:.01em}
.form-principles i{font:500 8px/1 Inter,Arial,sans-serif;font-style:normal;align-self:start;padding-top:2px}
.form-principles svg{margin-left:auto}
.form-focus{--demo-bg:#f1f0e9;--demo-ink:#1d211b;--demo-muted:#62665b;--demo-line:#262d2133;background:#f1f0e9;padding-top:85px;padding-bottom:85px}
.form-section-heading{display:grid;grid-template-columns:1fr 3.3fr;column-gap:35px;row-gap:25px;align-items:start}
.form-section-heading>.demo-kicker{padding-top:9px;font-size:8px;color:#5b6254;max-width:110px}
.form-section-heading>h3{font-size:80px}
.form-section-heading>h3 em{color:#7e8376}
.form-section-heading>p:last-child{grid-column:2;max-width:450px;font-size:13px}
.demo-goal-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:1px solid var(--demo-line);border-bottom:1px solid var(--demo-line)}
.demo-page .demo-goal-tabs>button,.demo-goal-tabs>span{display:flex;align-items:center;justify-content:space-between;gap:17px;min-height:67px;padding:17px 21px;font-size:13px;border-right:1px solid var(--demo-line);transition:background .2s,color .2s}
.demo-goal-tabs>button:last-child,.demo-goal-tabs>span:last-child{border-right:0}
.demo-goal-tabs>button>span,.demo-goal-tabs>span>span{font-size:8px;align-self:start;margin-top:4px}
.demo-goal-tabs>button[aria-pressed=true],.demo-goal-tabs>span.is-selected{background:#1c211b;color:#f4f1e8}
.demo-goal-tabs>button[aria-pressed=true]>svg,.demo-goal-tabs>span.is-selected>svg{color:#ff845e}
.demo-goal-panel{display:grid;grid-template-columns:45% 55%;min-height:375px;margin-top:22px;background:#e6e7dd;overflow:hidden}
.form-goal-photo{position:relative;min-height:375px;overflow:hidden}
.form-goal-photo>.demo-photo{position:absolute;inset:0}
.form-goal-photo img{object-position:56% center}
.form-goal-photo>span{position:absolute;left:20px;bottom:4px;color:#ff794b;font:700 153px/.9 "Study Barlow","Arial Narrow",Arial,sans-serif;letter-spacing:-.025em;text-shadow:0 2px 30px #1116}
.form-goal-content{align-self:center;padding:36px 39px;animation:study-detail-arrive .4s ease both}
.form-goal-label{font-size:8px;letter-spacing:.12em;color:#56604e}
.form-goal-content h4{font-size:55px;margin:21px 0}
.form-goal-content>p{font-size:12px;line-height:1.9}
.demo-goal-tags{display:flex;flex-wrap:wrap;gap:11px 16px;margin-top:24px}
.demo-goal-tags>span{display:flex;align-items:center;gap:5px;font-size:9px;color:#3f4937}
.form-goal-content .demo-inline-link{font-size:10px;margin-top:20px}
.form-method{display:grid;grid-template-columns:53% 47%;min-height:770px;background:#181916;padding:80px 62px;gap:0}
.form-method-copy{padding-right:65px}
.form-method h3{font-size:84px;margin:25px 0 25px}
.form-method h3 em{color:#aeb3a5}
.form-method-copy>p:not(.demo-kicker){font-size:12px;max-width:340px;line-height:1.9}
.form-method-steps{margin-top:28px}
.form-method-steps>div{display:flex;align-items:start;gap:19px;border-top:1px solid var(--demo-line);padding:20px 0}
.form-method-steps>div>span{color:#ff8968;font-size:9px;padding-top:4px}
.form-method-steps>div>div{flex:1}
.form-method-steps>div>svg{width:15px;height:15px;margin-top:4px;color:#969e8c}
.form-method-steps h4{font-family:Inter,Arial,sans-serif;font-size:12px;font-weight:550;letter-spacing:0;line-height:1.5}
.form-method-steps p{font-size:10px;line-height:1.8;margin-top:7px}
.form-method-visual{position:relative;align-self:stretch;min-width:0;overflow:hidden}
.form-method-visual>.demo-photo{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% 94%,89% 100%,0 100%)}
.form-method-visual img{object-position:70% center}
.form-method-visual:after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#111b)}
.form-method-caption{position:absolute;left:23px;bottom:30px;z-index:1;font-size:7px;letter-spacing:.14em;color:#fff}
.form-method-visual>.demo-brand-symbol{position:absolute;right:23px;top:23px;width:40px;height:40px;color:#ff633b}
.form-statement{display:flex;align-items:center;position:relative;overflow:hidden;padding:55px 62px 60px;background:#ff633b;color:#181916}
.form-statement>div{position:relative;z-index:1;flex:1}
.form-statement .demo-kicker{font-size:8px;color:#352116}
.form-statement h3{font-size:123px;letter-spacing:-.025em;color:#181916;margin:24px 0 23px}
.form-statement>div>p:last-child{color:#3e271b;font-size:12px}
.demo-page .form-statement-link{position:relative;z-index:1;width:83px;height:83px;background:#181916;color:#ff956e;display:grid;place-items:center;border-radius:50%;align-self:flex-start;margin-top:5px}
.form-statement-mark{position:absolute;right:-11px;bottom:-70px;pointer-events:none;color:#e6502d;font-size:420px;font-weight:300;line-height:1}
.form-contact{background:#181916;padding-block:90px}
.form-contact h3{font-size:105px}
.form-contact h3 em{color:#ff845e}
.form-contact-rule{display:block;width:100px;height:4px;background:#ff633b;margin-top:30px}
.demo-fitness .demo-footer{background:#ff633b;color:#181916;border:0;--demo-line:#18191645;--demo-muted:#442c20}
.demo-fitness .demo-footer-signature{font:700 250px/.8 "Study Barlow","Arial Narrow",Arial,sans-serif;letter-spacing:-.045em;margin-block:27px 30px}
.demo-fitness .demo-footer-signature>.demo-brand-symbol{width:92px;height:92px}
.demo-fitness .demo-footer-top>p{color:#38281c}

/* TAVOLA: burgundy ink, warm paper, a restaurant journal and generous tables. */
.demo-food{--demo-bg:#f6efe0;--demo-ink:#572531;--demo-muted:#78604f;--demo-accent:#572531;--demo-line:#6e403338}
.demo-food .demo-header{background:#4d1f2a;color:#faf1df;border-color:#f6efe033}
.demo-food .demo-wordmark{gap:10px}
.demo-food .demo-brand-name{font-size:42px;font-weight:500;letter-spacing:-.04em;font-style:italic}
.demo-food .demo-wordmark>.demo-brand-symbol{height:25px;width:25px}
.demo-food .demo-brand-descriptor{font-size:6px;letter-spacing:.12em}
.tavola-hero{position:relative;min-height:635px;background:#432725;isolation:isolate}
.tavola-hero>.tavola-hero-photo{position:absolute;inset:0;height:100%}
.tavola-hero-photo img{object-position:center 58%}
.tavola-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#291719e8,#291719b0 51%,#29171926),linear-gradient(0deg,#29171966,transparent 50%)}
.tavola-hero-copy{position:relative;z-index:1;padding:80px 62px 76px;max-width:830px;color:#fff1db}
.tavola-hero-copy>.demo-kicker{font-size:8px;color:#f9dfbf;letter-spacing:.15em}
.tavola-hero h3{font-size:112px;line-height:.92;letter-spacing:-.05em;color:#fff1db;margin:39px 0 25px}
.tavola-hero h3 em{font-size:1.01em}
.tavola-hero-copy>p:not(.demo-kicker){font-size:13px;line-height:1.8;color:#ebd7bd}
.demo-page .tavola-hero .demo-solid-button{color:#51222c;background:#f6e7ca;border-color:#f6e7ca;margin-top:28px;font-size:10px;min-height:46px}
.tavola-hero-card{position:absolute;right:48px;bottom:22px;z-index:3;width:273px;transform:rotate(6deg);padding:9px 9px 0;background:#f9f0db;box-shadow:0 20px 35px #2114103b}
.tavola-hero-card>img{height:277px;object-position:62% center}
.tavola-hero-card>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 3px 17px;color:#572531;font-size:7px}
.tavola-hero-card>div>span:first-child{font-size:8px;letter-spacing:.1em}
.tavola-hero>.tavola-hero-sun{position:absolute;right:68px;top:58px;width:69px;height:69px;color:#fff0d5;transform:rotate(10deg)}
.tavola-hero-side{position:absolute;left:21px;bottom:37px;writing-mode:vertical-rl;color:#f9e6cb;font-size:7px;letter-spacing:.12em}
.tavola-ribbon{display:flex;align-items:center;justify-content:space-evenly;gap:25px;position:relative;background:#572531;color:#f6e9ce;padding:23px 40px;font-size:8px;letter-spacing:.16em}
.tavola-ribbon>.demo-brand-symbol{width:20px;height:20px}
.tavola-welcome{display:grid;grid-template-columns:1.2fr 1fr;gap:75px;padding-top:105px;padding-bottom:95px}
.tavola-welcome h3{font-size:76px;margin-top:26px}
.tavola-welcome>div:last-child{padding-top:4px}
.tavola-welcome>div>.demo-brand-symbol{width:62px;height:62px;margin:0 0 28px;color:#9e6845}
.tavola-welcome p:not(.demo-kicker){font-size:13px;max-width:355px;line-height:1.9}
.tavola-welcome p+p{margin-top:18px}
.tavola-menu{display:grid;grid-template-columns:1fr 1.2fr;gap:85px;background:#ebe3d2;padding-top:85px;padding-bottom:85px}
.tavola-menu h3{font-size:69px;margin-top:26px}
.tavola-menu-intro>p:not(.demo-kicker){font-size:12px;line-height:1.85;max-width:310px;margin-top:23px}
.demo-menu-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.demo-page .demo-menu-tabs>button,.demo-menu-tabs>span{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:9px 13px;border:1px solid #6e403350;border-radius:24px;font-size:9px;transition:background .2s,color .2s}
.demo-menu-tabs>button[aria-pressed=true],.demo-menu-tabs>span.is-selected{background:#572531;color:#fff1da;border-color:#572531}
.tavola-menu-intro>.tavola-menu-photo{height:225px;max-width:330px;margin-top:32px;border-radius:50% 50% 0 0;transform:rotate(-3deg)}
.tavola-menu-photo img{object-position:67% center}
.tavola-handwritten{display:block;font:italic 500 30px/1.1 "Study Cormorant",Georgia,serif;color:#7b3934;transform:rotate(-6deg);margin:13px 0 0 84px}
.demo-menu-list{align-self:center;min-height:565px}
.demo-menu-item{display:flex;align-items:start;gap:20px;padding:28px 0;border-top:1px solid #6e403348}
.demo-menu-item>span{font-size:8px;letter-spacing:.04em;min-width:17px;padding-top:4px;color:#795447}
.demo-menu-item>div{flex:1}
.demo-menu-item .demo-kicker{font-size:7px;letter-spacing:.1em;color:#855447}
.demo-menu-item h4{font-size:37px;margin-top:8px;letter-spacing:-.025em;line-height:1.02}
.demo-menu-item p{font-size:11px;line-height:1.85;max-width:310px;margin-top:12px}
.demo-page .demo-menu-disclosure{font-size:9px;line-height:1.8;padding-top:18px;border-top:1px solid #6e403348}
.tavola-place{display:grid;grid-template-columns:47% 53%;background:#572531;--demo-ink:#f9ecd4;--demo-muted:#e0c5b4;min-height:625px}
.tavola-place-copy{padding:73px 60px 65px 62px;position:relative}
.tavola-place h3{font-size:68px;margin:29px 0}
.tavola-place-copy>p:not(.demo-kicker){font-size:12px;line-height:1.9;max-width:325px}
.tavola-place-copy>.demo-brand-symbol{width:45px;height:45px;margin-top:35px;color:#bd8b70}
.tavola-place-photo{position:relative;overflow:hidden;margin:32px 32px 32px 0}
.tavola-place-photo>.demo-photo{height:100%;min-height:540px}
.tavola-place-photo img{object-position:24% center}
.tavola-place-photo>span{position:absolute;bottom:23px;left:25px;background:#f4e5cdd9;color:#572531;padding:9px 12px;font-size:7px;letter-spacing:.08em}
.tavola-invitation{text-align:center;padding:85px 50px 60px;background:#f6efe0}
.tavola-invitation h3{font-size:76px;margin-top:26px;line-height:1.03}
.tavola-invitation h3 em{display:inline-block}
.tavola-invitation>.demo-brand-symbol{width:44px;height:44px;margin:31px auto 0;color:#9a5c3d}
.tavola-contact{background:#f6efe0;border-top:1px solid var(--demo-line);padding-top:75px;padding-bottom:85px}
.tavola-contact h3{font-size:82px;letter-spacing:-.045em}
.tavola-contact-note{display:block;font:italic 500 28px/1.2 "Study Cormorant",Georgia,serif;transform:rotate(-5deg);margin-top:34px;color:#9d5b43}
.demo-food .demo-footer{background:#572531;--demo-ink:#f6e9ce;--demo-muted:#e4c8b4;--demo-line:#f6e9ce33;color:#f6e9ce}
.demo-food .demo-footer-signature{font-size:234px;letter-spacing:-.055em;font-style:italic;margin:37px 0 35px}
.demo-food .demo-footer-signature>.demo-brand-symbol{width:83px;height:83px}
.demo-food .demo-footer-top>p{color:#e4c8b4}

/* Real interaction adds motion to the content; thumbnail movement stays in the gallery. */
@media(prefers-reduced-motion:no-preference){
 .demo-page[data-interactive=true] .aurea-hero-copy,.demo-page[data-interactive=true] .form-hero-copy,.demo-page[data-interactive=true] .tavola-hero-copy{animation:study-editorial-arrive .85s cubic-bezier(.2,.65,.3,1) both}
 .demo-page[data-interactive=true] .demo-visible .demo-photo>img{animation:study-photo-settle 1.2s cubic-bezier(.2,.6,.3,1) both}
 @keyframes study-photo-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
}
@supports(animation-timeline:scroll()){
 .study-dialog-viewport{scroll-timeline-name:--study-reading;scroll-timeline-axis:block}
 .demo-page[data-interactive=true] .demo-header:after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:currentColor;transform-origin:left;animation:study-reading-progress 1s linear both;animation-timeline:--study-reading}
 @keyframes study-reading-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* Study viewer: desktop and mobile are the same responsive page. */
.study-dialog{width:min(1280px,calc(100vw - 48px));max-width:none;height:min(900px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);padding:0;border:1px solid #f3f4ef;border-radius:13px;background:#e8eeeb;color:#153e37;overflow:clip;box-shadow:0 32px 110px #002a2590}
.study-dialog[open]{display:flex;flex-direction:column}
.study-dialog::backdrop{background:#051c18c7;backdrop-filter:blur(9px)}
.study-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-shrink:0;padding:15px 22px;background:#fff;border-bottom:1px solid #153e371c}
.study-viewer-title{min-width:0}
.study-viewer-title .eyebrow{font-size:8px;letter-spacing:.08em}
.study-viewer-title h2{font-size:20px;letter-spacing:-.03em;line-height:1.2;margin-top:5px}
.study-viewer-actions{display:flex;gap:14px;align-items:center}
.study-device-controls{display:flex;gap:3px;padding:4px;background:#eef3f0;border:1px solid #dbe5df;border-radius:8px}
.study-device-controls button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:8px 11px;border:0;background:transparent;color:#4f6b5e;font-size:10px;border-radius:5px}
.study-device-controls button[aria-pressed=true]{background:#fff;color:#123e35;box-shadow:0 1px 4px #153e3719}
.study-dialog .dialog-close{flex-shrink:0;border:1px solid #dbe5df;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center}
.study-dialog-viewport{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:smooth;background:#e8eeeb}
.study-device-page{width:100%;margin-inline:auto;transition:width .35s ease;min-height:100%;box-shadow:0 0 35px #163e371c}
.study-device-page--mobile{width:min(390px,100%)}
.study-viewer-bottom{padding:24px 28px 28px;background:#fff;border-top:1px solid #153e371c}
.study-dialog .study-description{font-size:14px;line-height:1.75;margin:0;max-width:720px}
.study-dialog .dialog-note{font-size:11px;margin:10px 0 17px;line-height:1.7;max-width:700px}
.study-viewer-instruction{font-size:10px;color:#426052;margin:0 0 13px}


/* Page-width queries work equally inside the responsive viewer and the 1100px previews. */
@container(max-width:800px){
 .demo-header{padding-inline:28px;gap:16px}
 .demo-brand-descriptor{display:none}
 .demo-navigation{gap:20px}
 .demo-page .demo-navigation>button,.demo-navigation>span{font-size:10px}
 .demo-section{padding-inline:36px}
 .aurea-hero-copy{padding-inline:36px}
 .aurea-hero-note{left:36px}
 .aurea-manifesto{grid-template-columns:1fr 3.5fr;gap:25px}
 .aurea-manifesto h3{font-size:51px}
 .aurea-manifesto-bottom{gap:28px}
 .aurea-section-heading h3{font-size:59px}
 .aurea-treatment-grid{gap:19px}
 .aurea-treatment-image{height:300px}
 .aurea-treatment--02{padding-top:40px!important}
 .aurea-treatment--02 .aurea-treatment-image{height:260px}
 .aurea-treatment h4{font-size:28px}
 .aurea-treatment>p{font-size:11px}
 .aurea-philosophy{min-height:590px;grid-template-columns:48% 52%}
 .aurea-philosophy-photo{padding:28px 0 28px 28px}
 .aurea-philosophy-photo>.demo-photo{min-height:500px}
 .aurea-photo-caption{top:46px;left:45px;font-size:6px}
 .aurea-photo-letter{left:42px;font-size:170px;bottom:20px}
 .aurea-philosophy-copy{padding:45px 36px}
 .aurea-philosophy h3{font-size:57px}
 .aurea-questions{gap:35px}
 .aurea-questions h3{font-size:47px}
 .demo-contact{gap:40px}
 .aurea-contact h3{font-size:65px}
 .aurea-form-panel{padding:28px 22px}
 .form-hero-copy{padding-inline:36px}
 .form-hero h3{font-size:115px}
 .form-principles{padding-inline:36px}
 .form-principles>span{font-size:19px;gap:10px}
 .form-section-heading{grid-template-columns:1fr 3.8fr;column-gap:25px}
 .form-section-heading>h3{font-size:65px}
 .demo-page .demo-goal-tabs>button,.demo-goal-tabs>span{font-size:12px;padding-inline:16px;gap:13px}
 .form-goal-content{padding:30px}
 .form-goal-content h4{font-size:47px}
 .form-method{padding:65px 36px;grid-template-columns:54% 46%;min-height:720px}
 .form-method-copy{padding-right:35px}
 .form-method h3{font-size:73px}
 .form-statement{padding-inline:36px}
 .form-statement h3{font-size:95px}
 .demo-page .form-statement-link{width:64px;height:64px}
 .form-contact h3{font-size:85px}
 .tavola-hero-copy{padding-inline:36px;padding-top:85px}
 .tavola-hero h3{font-size:92px}
 .tavola-hero-card{width:216px;right:28px;bottom:25px}
 .tavola-hero-card>img{height:217px}
 .tavola-hero-card>div{flex-direction:column;gap:5px;align-items:start;padding:11px 4px 13px}
 .tavola-hero>.tavola-hero-sun{right:38px;top:45px;width:48px;height:48px}
 .tavola-hero-side{left:12px}
 .tavola-welcome{gap:40px;grid-template-columns:1.1fr 1fr}
 .tavola-welcome h3{font-size:61px}
 .tavola-menu{gap:43px}
 .tavola-menu h3{font-size:58px}
 .tavola-menu-intro>.tavola-menu-photo{height:200px}
 .demo-menu-item h4{font-size:32px}
 .tavola-place-copy{padding:60px 35px 55px 36px}
 .tavola-place h3{font-size:55px}
 .tavola-place-photo{margin:27px 27px 27px 0}
 .tavola-invitation h3{font-size:62px}
 .tavola-contact h3{font-size:68px}
 .demo-footer{padding-inline:36px}
 .demo-footer-signature{font-size:150px}
 .demo-footer-signature>.demo-brand-symbol{width:75px;height:75px}
 .demo-fitness .demo-footer-signature{font-size:208px}
 .demo-food .demo-footer-signature{font-size:192px}
}
@container(max-width:560px){
 .demo-header{height:72px;padding-inline:23px}
 .demo-page .demo-wordmark{gap:9px}
 .demo-wordmark>.demo-brand-symbol{width:25px;height:25px}
 .demo-brand-name{font-size:31px;letter-spacing:.05em}
 .demo-brand-descriptor{display:none}
 .demo-page .demo-menu-toggle{display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;opacity:.85;flex-shrink:0}
 .demo-navigation{display:none;position:absolute;left:0;right:0;top:71px;padding:14px 24px 23px;background:var(--demo-bg);border-bottom:1px solid var(--demo-line);box-shadow:0 18px 25px #0001}
 .demo-navigation--open{display:grid;gap:4px}
 .demo-page .demo-navigation>button,.demo-navigation>span{font-size:13px;min-height:48px;padding-block:12px;justify-content:space-between}
 .demo-page p{font-size:13px}
 .demo-page .demo-kicker{font-size:8px;line-height:1.7;letter-spacing:.11em}
 .demo-section{padding:60px 25px}
 .demo-page h3{font-size:52px}
 .demo-page .demo-solid-button{min-height:49px;padding:14px 18px;font-size:11px;gap:23px}
 .demo-page .demo-inline-link{font-size:11px;min-height:44px;gap:24px;margin-top:22px}
 .demo-contact{grid-template-columns:1fr;gap:37px;align-items:start}
 .demo-contact>div>p:not(.demo-kicker){font-size:13px;max-width:320px}
 .demo-form{gap:20px 14px}
 .demo-form label{font-size:10px}
 .demo-page .demo-form input,.demo-page .demo-form textarea{font-size:12px}
 .demo-page .demo-form-note,.demo-page .demo-form-result{font-size:10px}
 .aurea-hero{min-height:735px}
 .aurea-hero>.aurea-hero-photo{width:100%;inset:150px 0 0;height:585px}
 .aurea-hero-photo img{object-position:94% center}
 .aurea-hero-shade{background:linear-gradient(180deg,#e8d1c2 0%,#e8d1c2f0 22%,#e8d1c218 48%,#59352844 73%,#593528ba 100%)}
 .aurea-hero-copy{padding:36px 25px 29px;max-width:none}
 .aurea-hero-copy>.demo-kicker{font-size:7px;max-width:240px;letter-spacing:.1em}
 .aurea-hero h3{font-size:clamp(64px,20cqw,106px);line-height:.84;letter-spacing:-.055em;margin:28px 0}
 .aurea-hero h3 em{margin-left:26px}
 .aurea-hero-detail{margin:0;position:absolute;top:554px;left:25px;right:25px;display:flex;align-items:end;justify-content:space-between;gap:14px;color:#fff2df}
 .aurea-hero-detail>p{color:#fff2df;font-size:10px;max-width:156px;line-height:1.8}
 .demo-page .aurea-hero .demo-solid-button{background:#f5ecde;border-color:#f5ecde;color:#49312c;min-height:47px;padding:11px 13px;font-size:9px;gap:11px;margin:0;max-width:155px}
 .aurea-hero .demo-solid-button svg{width:17px;height:17px}
 .aurea-hero-note{left:25px;right:25px;bottom:-25px;width:auto;min-height:91px;padding:9px;gap:13px;box-shadow:0 10px 25px #3c292916}
 .aurea-hero-note>img{width:58px;height:67px}
 .aurea-hero-note>div>span{font-size:6px}
 .aurea-hero-note>div>p{font-size:10px;margin-top:5px;line-height:1.6}
 .aurea-hero-note>.demo-brand-symbol{width:32px;height:32px;margin-right:7px}
 .aurea-hero-side{font-size:6px;right:10px;bottom:121px}
 .aurea-manifesto{grid-template-columns:1fr;gap:23px;padding-top:83px;padding-bottom:48px}
 .aurea-manifesto>.demo-kicker{max-width:none;padding-top:0;font-size:7px}
 .aurea-manifesto h3{font-size:48px;line-height:1.02}
 .aurea-manifesto-bottom{gap:22px;margin-top:27px;align-items:start}
 .aurea-manifesto-bottom>.demo-brand-symbol{width:39px;height:39px;margin-top:5px}
 .aurea-manifesto-bottom>p{font-size:12px;line-height:1.85}
 .aurea-treatments{padding-top:0;padding-bottom:55px}
 .aurea-section-heading{gap:18px;align-items:start;display:block;margin-bottom:29px;padding-top:31px}
 .aurea-section-heading h3{font-size:57px;margin-top:17px}
 .aurea-section-heading>p{font-size:12px;line-height:1.8;max-width:none;margin-top:20px;padding-bottom:0}
 .aurea-treatment-grid{grid-template-columns:1fr;gap:32px}
 .demo-page .aurea-treatment{padding:0!important;position:relative}
 .aurea-treatment-image,.aurea-treatment--02 .aurea-treatment-image{height:345px;margin-bottom:20px}
 .aurea-treatment--02{margin-left:27px;width:calc(100% - 27px)!important}
 .aurea-treatment--02 .aurea-treatment-image{height:290px}
 .aurea-treatment--03 .aurea-treatment-image{height:345px}
 .aurea-treatment-image>span:first-of-type{font-size:8px}
 .aurea-treatment h4{font-size:35px}
 .aurea-treatment>.demo-kicker{font-size:7px;margin-bottom:9px;letter-spacing:.09em}
 .aurea-treatment>p{font-size:12px;max-width:310px;margin-top:11px}
 .aurea-treatment-arrow{height:39px;width:39px}
 .aurea-philosophy{grid-template-columns:1fr;min-height:0}
 .aurea-philosophy-photo{padding:25px 25px 0;height:390px}
 .aurea-philosophy-photo>.demo-photo{min-height:0;height:100%}
 .aurea-photo-caption{top:43px;left:43px;font-size:6px}
 .aurea-photo-letter{font-size:157px;bottom:-8px;left:42px}
 .aurea-philosophy-copy{padding:44px 25px 55px}
 .aurea-philosophy h3{font-size:60px;margin:23px 0}
 .aurea-philosophy-copy>p:not(.demo-kicker){font-size:13px;line-height:1.85;max-width:350px}
 .aurea-questions{grid-template-columns:1fr;gap:30px;padding-block:55px}
 .aurea-questions h3{font-size:49px;margin-top:20px}
 .demo-page .demo-question>button,.demo-question>span{font-size:12px;min-height:67px;padding:22px 0;gap:16px}
 .demo-question>p{font-size:12px}
 .aurea-contact h3{font-size:65px;margin-top:21px}
 .aurea-contact>div>.demo-brand-symbol{width:44px;height:44px;margin-top:25px}
 .aurea-form-panel{padding:27px 21px}
 .demo-page .demo-form-heading{font-size:30px;margin-bottom:25px}
 .demo-fitness .demo-brand-name{font-size:42px}
 .demo-fitness .demo-wordmark>.demo-brand-symbol{height:18px;width:18px;margin-left:4px}
 .demo-fitness .demo-navigation{background:#181916;color:#f2f0e8}
 .form-hero{min-height:735px}
 .form-hero-photo img{object-position:72% center}
 .form-hero-shade{background:linear-gradient(90deg,#121410c7,#12141030 80%),linear-gradient(0deg,#121410f0,transparent 90%)}
 .form-hero-copy{padding:39px 25px 40px;max-width:none}
 .form-hero-copy>.demo-kicker{font-size:7px;letter-spacing:.08em;gap:8px;max-width:260px;line-height:1.7}
 .form-hero h3{font-size:clamp(66px,23cqw,126px);line-height:.89;margin:44px 0 37px}
 .form-hero-detail{display:block}
 .form-hero-detail>p{font-size:12px;max-width:250px;line-height:1.9}
 .demo-page .form-hero .demo-solid-button{margin-top:26px;font-size:10px;min-height:48px;padding-inline:17px}
 .form-hero-tag{right:25px;bottom:24px;font-size:7px;line-height:1.6}
 .form-hero-tag>span:first-child{font-size:6px}
 .form-hero-cross{right:25px;top:29px;font-size:29px}
 .form-principles{padding:20px 20px;gap:12px}
 .form-principles>span{font-size:15px;gap:8px;align-items:start;line-height:1}
 .form-principles i{font-size:6px;padding-top:2px}
 .form-principles svg{display:none}
 .form-section-heading{grid-template-columns:1fr;gap:21px}
 .form-section-heading>.demo-kicker{font-size:7px;padding-top:0;max-width:none}
 .form-section-heading>h3{font-size:clamp(49px,15.2cqw,80px);line-height:.95;letter-spacing:-.02em}
 .form-section-heading>p:last-child{grid-column:auto;font-size:13px;max-width:340px;line-height:1.85}
 .demo-goal-tabs{margin-top:30px}
 .demo-page .demo-goal-tabs>button,.demo-goal-tabs>span{font-size:10px;padding:16px 10px;gap:6px;min-height:56px;justify-content:center}
 .demo-goal-tabs>button>span,.demo-goal-tabs>span>span{display:none}
 .demo-goal-tabs svg{width:13px;height:13px}
 .demo-goal-panel{grid-template-columns:1fr;margin-top:20px;min-height:0}
 .form-goal-photo{min-height:0;height:245px}
 .form-goal-photo>span{font-size:125px;left:18px;bottom:6px}
 .form-goal-content{padding:29px 24px}
 .form-goal-label{font-size:7px}
 .form-goal-content h4{font-size:49px;margin:20px 0}
 .form-goal-content>p{font-size:12px;line-height:1.85}
 .demo-goal-tags{gap:10px 13px;margin-top:24px}
 .demo-goal-tags>span{font-size:9px}
 .form-method{grid-template-columns:1fr;padding:57px 25px 25px;min-height:0;gap:35px}
 .form-method-copy{padding-right:0}
 .form-method h3{font-size:clamp(58px,20cqw,84px);margin:25px 0}
 .form-method-copy>p:not(.demo-kicker){font-size:13px;max-width:330px}
 .form-method-steps{margin-top:27px}
 .form-method-steps>div{padding:22px 0}
 .form-method-steps h4{font-size:13px}
 .form-method-steps p{font-size:11px;line-height:1.8}
 .form-method-visual{min-height:440px}
 .form-method-visual img{object-position:68% center}
 .form-method-caption{font-size:7px;left:20px;bottom:24px}
 .form-method-visual>.demo-brand-symbol{height:32px;width:32px;right:20px;top:20px}
 .form-statement{padding:39px 25px 45px;display:block}
 .form-statement .demo-kicker{font-size:7px;max-width:250px}
 .form-statement h3{font-size:clamp(52px,17cqw,95px);line-height:.94;letter-spacing:-.025em;margin:25px 0 23px}
 .form-statement>div>p:last-child{font-size:12px;max-width:230px;line-height:1.8}
 .demo-page .form-statement-link{height:52px;width:52px;margin-top:27px}
 .form-statement-link svg{height:29px;width:29px}
 .form-statement-mark{font-size:310px;bottom:-65px;right:-13px}
 .form-contact h3{font-size:clamp(66px,22.5cqw,106px);line-height:.95}
 .form-contact .demo-form{margin-top:5px}
 .demo-food .demo-brand-name{font-size:39px}
 .demo-food .demo-wordmark>.demo-brand-symbol{width:23px;height:23px}
 .demo-food .demo-navigation{background:#4d1f2a;color:#faf1df}
 .tavola-hero{min-height:720px}
 .tavola-hero-photo img{object-position:36% center}
 .tavola-hero-shade{background:linear-gradient(180deg,#291719a6,#29171996 62%,#2917196b),linear-gradient(90deg,#29171966,transparent)}
 .tavola-hero-copy{padding:48px 25px 80px;max-width:none}
 .tavola-hero-copy>.demo-kicker{font-size:7px;max-width:235px;letter-spacing:.09em}
 .tavola-hero h3{font-size:clamp(48px,15.2cqw,82px);line-height:.95;letter-spacing:-.05em;margin:37px 0 24px}
 .tavola-hero-copy>p:not(.demo-kicker){font-size:12px;line-height:1.8}
 .demo-page .tavola-hero .demo-solid-button{font-size:10px;min-height:47px;padding:13px 17px;gap:23px;margin-top:24px}
 .tavola-hero-card{width:210px;right:29px;bottom:5px;transform:rotate(5deg);padding:7px 7px 0}
 .tavola-hero-card>img{height:205px;object-position:68% center}
 .tavola-hero-card>div{display:flex;flex-direction:row;gap:7px;font-size:6px;padding:12px 2px 13px;align-items:center}
 .tavola-hero-card>div>span:first-child{font-size:7px}
 .tavola-hero>.tavola-hero-sun{top:auto;bottom:81px;left:28px;right:auto;width:47px;height:47px}
 .tavola-hero-side{left:12px;bottom:201px;font-size:6px;letter-spacing:.1em}
 .tavola-ribbon{gap:12px;padding:20px 20px;font-size:6px;letter-spacing:.08em;align-items:center;flex-wrap:wrap;justify-content:space-between}
 .tavola-ribbon>.demo-brand-symbol{height:14px;width:14px}
 .tavola-ribbon>span:last-child{display:none}
 .tavola-ribbon>.demo-brand-symbol:last-of-type{display:none}
 .tavola-welcome{grid-template-columns:1fr;gap:32px;padding-top:58px;padding-bottom:57px}
 .tavola-welcome h3{font-size:59px;margin-top:23px}
 .tavola-welcome>div:last-child{padding-top:0}
 .tavola-welcome>div>.demo-brand-symbol{width:42px;height:42px;margin:0 0 23px}
 .tavola-welcome p:not(.demo-kicker){font-size:13px;line-height:1.9;max-width:330px}
 .tavola-welcome p+p{margin-top:16px}
 .tavola-menu{grid-template-columns:1fr;gap:35px}
 .tavola-menu h3{font-size:59px;margin-top:22px}
 .tavola-menu-intro>p:not(.demo-kicker){font-size:13px;margin-top:24px;max-width:330px}
 .demo-menu-tabs{gap:7px;margin-top:26px}
 .demo-page .demo-menu-tabs>button,.demo-menu-tabs>span{min-height:43px;font-size:10px;padding:10px 13px}
 .tavola-menu-intro>.tavola-menu-photo{height:245px;max-width:295px;margin-top:32px}
 .tavola-handwritten{font-size:31px;margin:15px 0 0 77px}
 .demo-menu-list{min-height:540px;width:100%}
 .demo-menu-item{padding:26px 0;gap:16px}
 .demo-menu-item>span{font-size:8px}
 .demo-menu-item .demo-kicker{font-size:7px;letter-spacing:.09em}
 .demo-menu-item h4{font-size:35px;line-height:1.05;margin-top:10px}
 .demo-menu-item p{font-size:12px;line-height:1.85;max-width:310px;margin-top:12px}
 .demo-page .demo-menu-disclosure{font-size:9px}
 .tavola-place{grid-template-columns:1fr;min-height:0}
 .tavola-place-copy{padding:57px 25px 39px}
 .tavola-place h3{font-size:58px;margin:25px 0}
 .tavola-place-copy>p:not(.demo-kicker){font-size:13px;max-width:335px}
 .tavola-place-copy>.demo-brand-symbol{height:40px;width:40px;margin-top:28px}
 .tavola-place-photo{margin:0 25px 25px;height:390px}
 .tavola-place-photo>.demo-photo{min-height:0;height:100%}
 .tavola-place-photo img{object-position:32% center}
 .tavola-place-photo>span{font-size:6px;bottom:20px;left:18px;letter-spacing:.04em;padding:9px 10px}
 .tavola-invitation{padding:57px 25px}
 .tavola-invitation h3{font-size:clamp(35px,12.2cqw,64px);margin-top:24px;line-height:1.03}
 .tavola-invitation>.demo-brand-symbol{height:35px;width:35px;margin-top:28px}
 .tavola-contact h3{font-size:69px;line-height:.98}
 .tavola-contact-note{font-size:28px;margin-top:27px}
 .demo-footer{padding:28px 25px 22px}
 .demo-footer-top{display:block}
 .demo-footer-top>p{font-size:11px}
 .demo-page .demo-footer-contact{font-size:11px;gap:21px;margin-top:12px}
 .demo-footer-signature{font-size:clamp(60px,22cqw,120px);gap:20px;margin:31px 0 27px;line-height:.9}
 .demo-footer-signature>.demo-brand-symbol{width:44px;height:44px}
 .demo-footer-bottom{font-size:8px;gap:20px;padding-top:19px;line-height:1.7}
 .demo-footer-bottom>span:last-child{text-align:right;max-width:80px}
 .demo-fitness .demo-footer-signature{font-size:clamp(100px,35cqw,176px);letter-spacing:-.035em;margin:27px 0}
 .demo-fitness .demo-footer-signature>.demo-brand-symbol{height:39px;width:39px}
 .demo-food .demo-footer-signature{font-size:clamp(92px,30cqw,155px);letter-spacing:-.06em;margin:32px 0}
 .demo-food .demo-footer-signature>.demo-brand-symbol{height:43px;width:43px}
}
@container(max-width:340px){
 .demo-header{padding-inline:20px}
 .demo-section{padding-inline:22px}
 .aurea-hero h3{font-size:64px}
 .aurea-hero h3 em{margin-left:16px}
 .aurea-hero-detail{left:22px;right:22px;gap:10px}
 .aurea-hero-detail>p{font-size:9px;max-width:129px}
 .demo-page .aurea-hero .demo-solid-button{font-size:8px;gap:7px;padding-inline:10px;max-width:130px}
 .aurea-hero-note{left:22px;right:22px;gap:10px}
 .aurea-hero-note>.demo-brand-symbol{height:25px;width:25px;margin-right:3px}
 .demo-form{grid-template-columns:1fr}
 .demo-page .demo-menu-tabs>button,.demo-menu-tabs>span{font-size:9px;padding-inline:10px}
 .tavola-hero-card{width:190px;right:23px}
 .tavola-hero-card>img{height:191px}
 .tavola-place h3{font-size:52px}
 .form-principles{padding-inline:18px;gap:8px}
 .form-principles>span{font-size:13px;gap:6px}
 .demo-goal-tabs svg{display:none}
 .demo-page .demo-goal-tabs>button,.demo-goal-tabs>span{font-size:9px}
 .demo-beauty .demo-footer-signature{font-size:21.5cqw;gap:10px}
}

@media(max-width:1000px){
 .portfolio-intro{gap:40px;grid-template-columns:1.2fr 1fr}
 .portfolio-intro h2{font-size:41px}
 .portfolio-summary{font-size:14px}
 .portfolio-grid{gap:32px 22px}
 .portfolio-caption{align-items:start;gap:13px}
 .portfolio-caption h3{display:block;font-size:23px}
 .portfolio-caption h3 span{display:block;font-size:11px;margin-top:5px}
 .portfolio-disclosure{font-size:9px;max-width:85px;padding-top:2px}
}
@media(max-width:640px){
 .work:has(.portfolio-grid){padding-block:58px 55px}
 .portfolio-intro{grid-template-columns:1fr;gap:22px;padding-bottom:28px}
 .portfolio-intro h2{font-size:37px;line-height:1.13;max-width:380px;letter-spacing:-.035em}
 .portfolio-summary{justify-self:start;max-width:400px;font-size:14px}
 .portfolio-controls{align-items:start;padding:19px 0 24px;gap:15px;flex-wrap:wrap}
 .portfolio-controls>span{font-size:10px;min-height:17px}
 .portfolio-controls button{font-size:11px;min-height:38px;padding:8px 12px}
 .portfolio-grid{grid-template-columns:1fr;gap:35px}
 .portfolio-card--beauty{grid-column:auto}
 .portfolio-preview,.portfolio-card--beauty .portfolio-preview{aspect-ratio:1.3}
 .portfolio-browser-bar{height:25px;font-size:8px;padding-inline:11px}
 .portfolio-frame{border-radius:8px}
 .portfolio-open{inset-block-start:25px}
 .portfolio-open-circle{right:14px;bottom:14px;width:42px;height:42px}
 .portfolio-open-hint{opacity:1;transform:none;font-size:10px;right:64px;bottom:17px;padding:10px 12px}
 .portfolio-caption{padding-top:16px;gap:15px}
 .portfolio-index{font-size:9px}
 .portfolio-caption h3{display:block;font-size:24px;margin-top:6px}
 .portfolio-caption h3 span{font-size:11px;margin-top:5px;line-height:1.55}
 .portfolio-disclosure{font-size:9px;padding-top:2px;max-width:90px}
 .portfolio-footnote{margin-top:29px;font-size:11px;max-width:390px}
 .study-dialog{width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;margin:0;border:0;border-radius:0}
 .study-viewer-top{gap:12px;padding:12px 13px}
 .study-viewer-title .eyebrow{font-size:6px;letter-spacing:.025em}
 .study-viewer-title h2{font-size:15px;line-height:1.2;margin-top:4px}
 .study-viewer-actions{gap:7px}
 .study-device-controls{display:none}
 .study-device-controls button{padding:7px;min-height:33px}
 .study-device-controls button>span{display:none}
 .study-device-controls button>svg{width:15px;height:15px}
 .study-dialog .dialog-close{width:34px;height:34px}
 .study-dialog .dialog-close svg{width:19px;height:19px}
 .study-device-page{transition:none}
 .study-viewer-bottom{padding:24px}
 .study-viewer-instruction{font-size:10px}
 .study-dialog .study-description{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
 .portfolio-preview-track{animation:none;transform:none;will-change:auto}
 .demo-page .demo-visible,.demo-page .form-goal-content,.demo-page .demo-header:after{animation:none}
 .demo-page[data-interactive=true] .demo-header:after{display:none;animation:none}
 .demo-page .demo-photo img,.demo-page .aurea-treatment img,.demo-page .aurea-treatment-arrow,.demo-page .demo-solid-button>svg,.demo-page .demo-inline-link>svg,.demo-page .demo-footer-contact>svg{animation:none;transition:none;transform:none}
 .portfolio-frame,.portfolio-open-circle,.portfolio-open-hint,.study-device-page,.demo-page .demo-solid-button,.demo-page .demo-goal-tabs>button,.demo-page .demo-menu-tabs>button{transition:none}
 .portfolio-frame:hover,.portfolio-open:hover .portfolio-open-circle{transform:none}
 .demo-page .aurea-treatment:hover .aurea-treatment-image>img,.demo-page .aurea-treatment:hover .aurea-treatment-arrow{transform:none}
 .study-dialog-viewport{scroll-behavior:auto}
}