@import url('./unframed-directions.css');
#surface[data-liquid-direction]{--al-pad:clamp(24px,6vw,110px)}
#surface[data-liquid-direction] .ls-hero{background:var(--paper);color:var(--ink);overflow:clip}
#surface[data-liquid-direction] .site-header{position:relative;padding-block:28px;border:0;z-index:3}
#surface[data-liquid-direction] .site-header nav{gap:32px;font-size:16px}
#surface[data-liquid-direction] .site-header .action{background:var(--ink);color:var(--paper);border-radius:8px;padding:15px 24px}
#surface[data-liquid-direction] .al-button{border-radius:8px;padding:18px 25px;min-height:58px;background:var(--ink);color:var(--paper);font-size:16px;border:0}
.ls-opening{position:relative;display:grid;grid-template-columns:1.12fr 1fr;gap:6%;align-items:center;padding:60px var(--al-pad) 70px;min-height:620px}
#surface[data-liquid-direction] .ls-statement h1{font:400 clamp(64px,6.8vw,110px)/1.02 'DM Sans',sans-serif;letter-spacing:-.065em;max-width:10ch}
.ls-statement>p{font-size:19px;line-height:1.65;max-width:38ch;margin:30px 0}
.ls-object-stage{height:470px;width:100%;isolation:isolate}
.ls-hero-tail{display:flex;justify-content:space-between;gap:24px;margin:0 var(--al-pad);padding:28px 0;border-top:1px solid var(--al-rule);font-size:15px;color:var(--al-soft)}
#surface[data-liquid-direction=sable] .ls-statement h1{font-family:'Instrument Serif',serif;letter-spacing:-.025em;font-size:clamp(72px,7.6vw,124px)}
#surface[data-liquid-direction=sable] .ls-object-stage{height:510px}
#surface[data-liquid-direction=sable] .al-services{background:#ede9e1;color:#302b28;--al-rule:#302b2825;--al-soft:#6c655e}
#surface[data-liquid-direction] .al-section-head{grid-template-columns:1.1fr 1fr;gap:12%;margin-bottom:58px}
#surface[data-liquid-direction] .al-section-head h2{font-size:clamp(48px,5vw,76px);line-height:1.04;letter-spacing:-.055em;max-width:15ch}
#surface[data-liquid-direction] .al-section-head p{max-width:42ch;font-size:18px;line-height:1.7}
#surface[data-liquid-direction] .ls-approach{padding-block:110px}
#surface[data-liquid-direction] .ls-approach .al-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5%}
#surface[data-liquid-direction] .ls-approach .al-process-step{display:block;padding-top:30px;border-top:1px solid var(--al-rule);min-height:0}
#surface[data-liquid-direction] .ls-approach h3{font-size:31px;letter-spacing:-.04em;margin-bottom:22px}
#surface[data-liquid-direction] .ls-approach .al-process-step p{font-size:17px;line-height:1.7}
#surface[data-liquid-direction=citrine] .ls-opening{grid-template-columns:1.15fr 1fr;min-height:620px}
#surface[data-liquid-direction=citrine] .ls-hero-tail{background:#e8eadf;border:0;margin:0;padding:27px var(--al-pad)}
#surface[data-liquid-direction=citrine] .al-services{padding-top:110px}
#surface[data-liquid-direction=citrine] .ls-approach{background:#e8eadf}
#surface[data-liquid-direction=citrine] .al-footer{background:#2b342a;color:#f2f1e6}
#surface[data-liquid-direction=citrine] .al-footer .al-button{background:#f2f1e6;color:#2b342a}
#surface[data-liquid-direction] .al-work{border-top:1px solid var(--al-rule);padding-block:30px}
#surface[data-liquid-direction] .al-work-name{font-size:32px;letter-spacing:-.04em}
#surface[data-liquid-direction] .al-work-summary{font-size:16px;line-height:1.65}
#surface[data-liquid-direction] .sa-direct-booking{border-radius:0;background:transparent;border-block:1px solid var(--al-rule)}
@media(min-width:701px) and (max-height:760px){#surface[data-liquid-direction] .ls-opening{min-height:440px;padding-block:20px 35px}#surface[data-liquid-direction] .ls-object-stage{height:350px}#surface[data-liquid-direction] .ls-statement h1{font-size:76px}.ls-statement>p{font-size:17px;margin:22px 0}.ls-hero-tail{padding-block:18px}}
@media(max-width:950px){.ls-opening{gap:2%;padding-top:35px}#surface[data-liquid-direction] .ls-statement h1{font-size:68px}#surface[data-liquid-direction] .ls-object-stage{height:360px}#surface[data-liquid-direction] .al-section-head{gap:6%}}
@media(max-width:700px){#surface[data-liquid-direction] .site-header{padding-top:24px}#surface[data-liquid-direction] .ls-opening{display:flex;flex-direction:column;gap:12px;min-height:0;padding-top:35px;padding-bottom:20px}.ls-statement{width:100%}#surface[data-liquid-direction] .ls-statement h1{font-size:66px;max-width:10ch}.ls-statement>p{font-size:17px;margin:25px 0}#surface[data-liquid-direction] .ls-object-stage{height:295px}.ls-hero-tail{flex-wrap:wrap;gap:12px 22px;font-size:13px}#surface[data-liquid-direction] .al-section-head{display:block;margin-bottom:35px}#surface[data-liquid-direction] .al-section-head h2{font-size:47px}#surface[data-liquid-direction] .al-section-head p{font-size:17px;margin-top:24px}#surface[data-liquid-direction] .ls-approach{padding-block:65px}#surface[data-liquid-direction] .ls-approach .al-process{display:block}#surface[data-liquid-direction] .ls-approach .al-process-step{padding-block:26px}#surface[data-liquid-direction] .ls-approach h3{font-size:30px}}

#surface[data-liquid-direction=citrine] .ls-centered{display:block;min-height:0;padding-top:40px;padding-bottom:25px}
#surface[data-liquid-direction=citrine] .ls-centered>h1{font:400 clamp(72px,8vw,124px)/.98 'DM Sans',sans-serif;letter-spacing:-.075em;max-width:14ch;margin:0 auto;text-align:center}
.ls-centered-row{display:grid;grid-template-columns:1.15fr 1fr;gap:10%;align-items:center;max-width:1050px;margin:15px auto 0}
#surface[data-liquid-direction=citrine] .ls-centered-row .ls-object-stage{height:330px}
#surface[data-liquid-direction=citrine] .ls-approach{display:grid;grid-template-columns:1fr 1.15fr;gap:9%}
#surface[data-liquid-direction=citrine] .ls-approach .al-section-head{display:block;margin:0}
#surface[data-liquid-direction=citrine] .ls-approach .al-section-head p{margin-top:30px}
#surface[data-liquid-direction=citrine] .ls-approach .al-process{display:block}
#surface[data-liquid-direction=citrine] .ls-approach .al-process-step{padding-block:28px}
@media(min-width:701px) and (max-height:760px){#surface[data-liquid-direction=citrine] .ls-centered{padding-top:10px}#surface[data-liquid-direction=citrine] .ls-centered>h1{font-size:82px}#surface[data-liquid-direction=citrine] .ls-centered-row .ls-object-stage{height:255px}.ls-centered-row{margin-top:0}}
@media(max-width:700px){#surface[data-liquid-direction=citrine] .ls-centered>h1{font-size:65px;text-align:left}#surface[data-liquid-direction=citrine] .ls-centered{padding-top:32px}.ls-centered-row{display:flex;flex-direction:column-reverse;gap:5px;margin-top:0}#surface[data-liquid-direction=citrine] .ls-centered-row .ls-object-stage{height:285px}#surface[data-liquid-direction=citrine] .ls-approach{display:block}#surface[data-liquid-direction=citrine] .ls-approach .al-section-head{margin-bottom:40px}}
#surface[data-liquid-direction] .ls-statement>p{margin:28px 0;line-height:1.65}
#surface[data-liquid-direction=sable] .ls-statement h1{max-width:13ch}
@media(min-width:701px) and (max-height:760px){#surface[data-liquid-direction] .ls-statement>p{margin:20px 0}}