/* OneLife case study (_case-study-onelife.php): the Circles 2027 build retinted. Gold, night, sand and bark;
   Belleza for headlines, Mulish for reading; Geist Mono for the case-file labels. Made-up components (.olc) and
   social posts (.olp) live here too. */
.c27x.ol{--red:#A5803C;--stage:#1F1B16;--paper:#F0EDE4;--gold:#A5803C;--gold-lt:#D9B978;--bark:#302B25;--bel:Belleza,Georgia,serif;--mul:Mulish,"Helvetica Neue",sans-serif}
.c27x.ol h1,.c27x.ol h2{font-family:var(--bel)!important;font-weight:400!important;letter-spacing:-.01em!important;text-transform:none!important}
.c27x.ol .eyebrow{color:var(--gold)}

/* Header, figures, contents */
.c27x.ol .cf-head{background:var(--paper)}
.c27x.ol .cf-head h1{font-size:clamp(50px,8.4vw,150px)!important;line-height:.95!important;max-width:14ch}
.c27x.ol .cf-lead,.c27x.ol .cf-facts dd{font-family:var(--mul)}
.c27x.ol .cf-toc{background:var(--stage)}
.c27x.ol .cf-toc .mono{color:var(--gold-lt)}
.c27x.ol .cf-toc a{font-family:var(--mul);font-weight:600}
.c27x.ol .cf-toc .n{font:400 clamp(28px,2.4vw,36px)/1 var(--bel);color:var(--gold-lt)}
.c27x.ol .cf-toc a:hover{color:var(--gold-lt)}
.c27x.ol .cf-arw:hover{background:var(--gold)}
.c27x.ol .statement em{color:var(--gold)}

/* Eight pieces */
.c27x.ol .fv-made{background:var(--stage)}
.c27x.ol .fv-made li{border-color:#3a342c}
.c27x.ol .fv-made .n b{font:400 clamp(64px,7vw,112px)/.9 var(--bel);color:var(--paper)}
.c27x.ol .fv-made .n b.r{color:var(--gold-lt)}
.c27x.ol .fv-made p{font-family:var(--mul)}

/* Browser over sand */
.c27x .ol-stage{max-width:var(--box);margin:clamp(16px,2vw,28px) auto;border-radius:24px;overflow:hidden;background:#E9E1D1 url(../../../uploads/2026/11/onelife-texture.webp) center/cover;padding:clamp(48px,6vw,96px) clamp(20px,5vw,90px) clamp(70px,8vw,130px)}
.c27x .ol-stage .hd h2{font-size:clamp(38px,4.4vw,68px)!important;color:var(--stage)!important;margin:14px 0 clamp(40px,5vw,80px);max-width:14ch}
.c27x .ol-stage .bx{position:relative;max-width:1180px;margin:0 auto}
.c27x .ol-stage figure{margin:0}
.c27x .ol-stage img{display:block;width:100%;height:auto;border-radius:0}
.c27x .ol-stage .desk{border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(48,43,37,.55);background:#fff}
.c27x .ol-stage .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F7F4EE;border-bottom:1px solid #e6dfd2}
.c27x .ol-stage .bar i{width:10px;height:10px;border-radius:50%;background:#d8cfbf}
.c27x .ol-stage .bar span{margin:0 auto;font:600 11px/1 var(--mul);color:#8a7f6e;background:#fff;border-radius:6px;padding:6px 40px}
.c27x .ol-stage .ph{position:absolute;right:-3%;bottom:-12%;width:17%;border-radius:22px;overflow:hidden;border:6px solid #1F1B16;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.c27x .ol-stage .bk{position:absolute;left:-5%;bottom:-16%;width:20%;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(48,43,37,.5)}
.c27x .ol-stage .ld{position:absolute;right:-4%;top:-9%;width:30%;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.c27x .ol-stage .lb{position:absolute;left:-6%;top:6%;width:24%}

/* Made-up components */
.c27x .olc{font-family:var(--mul);color:var(--stage);background:#fff;border-radius:14px;padding:18px;box-shadow:0 26px 56px -22px rgba(48,43,37,.5);text-align:left}
.c27x .olc .mono{font-size:9px;color:var(--gold)}
.c27x .olc b{display:block;font:400 20px/1.15 var(--bel);margin:8px 0 6px}
.c27x .olc .btn{background:var(--gold);color:#fff;text-align:center;font:700 10px/1 var(--mul);letter-spacing:.16em;text-transform:uppercase;padding:12px;border-radius:4px;margin-top:12px}
.c27x .olc-labs .hd{display:flex;justify-content:space-between;align-items:center}
.c27x .olc-labs .hd em{font-style:normal;font-size:10px;color:#8a7f6e}
.c27x .olc-labs .row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12px;padding:8px 0;border-top:1px solid #efe9de}
.c27x .olc-labs .row strong{font-weight:700}
.c27x .olc-labs .row small{font-weight:400;color:#8a7f6e;font-size:10px}
.c27x .olc-labs .row i{grid-column:1/-1;height:4px;border-radius:4px;background:linear-gradient(90deg,#e9e1d1 0 100%);position:relative}
.c27x .olc-labs .row i:after{content:"";position:absolute;left:var(--p);top:-3px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #fff}
.c27x .olc-labs .ft{font-size:10px;color:#8a7f6e;margin-top:8px}
.c27x .olc-sms{background:#fff;padding:14px}
.c27x .olc-sms .hd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.c27x .olc-sms .hd i{width:24px;height:24px;border-radius:50%;background:var(--stage);color:var(--gold-lt);font:400 12px/24px var(--bel);text-align:center;font-style:normal}
.c27x .olc-sms .hd em{margin-left:auto;font-style:normal;font-weight:400;color:#8a7f6e;font-size:10px}
.c27x .olc-sms p{background:#F0EDE4;border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:12px;line-height:1.4;margin:8px 30px 0 0}
.c27x .olc-sms p.me{background:var(--gold);color:#fff;border-radius:14px 14px 4px 14px;margin:8px 0 0 auto;width:max-content;padding:8px 14px}
.c27x .olc-camp{background:var(--stage);color:#F0EDE4}
.c27x .olc-camp .mono{color:var(--gold-lt)}
.c27x .olc-camp .src{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.c27x .olc-camp .src span{font-size:10px;background:#302B25;border-radius:4px;padding:5px 8px}
.c27x .olc-camp .st{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.c27x .olc-camp .st div{background:#302B25;border-radius:6px;padding:8px}
.c27x .olc-camp small{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#a99c86}
.c27x .olc-camp strong{font:400 20px/1.2 var(--bel)}
.c27x .olc-wait{background:var(--paper)}
.c27x .olc-wait p{font-size:11px;color:#6d6457;margin:0;line-height:1.4}
.c27x .olc-wait .f{background:#fff;border:1px solid #ddd3c2;border-radius:4px;padding:10px;font-size:11px;color:#a99c86;margin-top:12px}
.c27x .olc-wait .btn{margin-top:8px}
.c27x .olc-wait small{display:block;text-align:center;font-size:10px;color:#8a7f6e;margin-top:8px}
.c27x .olc-job .tags{display:flex;gap:6px;flex-wrap:wrap}
.c27x .olc-job .tags span{font-size:10px;background:#F0EDE4;border-radius:4px;padding:5px 8px}
/* inside the fan cards */
.c27x .xl-fan .card.ui{background:var(--paper);display:flex;align-items:center;padding:6%}
.c27x .xl-fan .card.ui .olc{width:100%;box-shadow:none;padding:10%}
.c27x .xl-fan .card.ui .olc b{font-size:clamp(14px,1.5cqw,22px)}

/* Social posts */
.c27x .olp{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:9%;font-family:var(--mul);overflow:hidden}
.c27x .olp .lg{font:400 clamp(9px,.9cqw,14px)/1 var(--bel);letter-spacing:.3em;position:relative;z-index:1}
.c27x .olp b{font:400 clamp(14px,1.75cqw,28px)/1.08 var(--bel);position:relative;z-index:1}
.c27x .olp .mono{font-size:clamp(7px,.6cqw,10px);position:relative;z-index:1}
.c27x .olp img{z-index:0}
.c27x .olp-photo{color:#fff}
.c27x .olp-photo:after,.c27x .olp-story:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,27,22,.15) 30%,rgba(31,27,22,.82))}
.c27x .olp-photo .in,.c27x .olp-story .in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.c27x .olp-photo .mono{color:var(--gold-lt)}
.c27x .olp-sand{background:#E9E1D1 url(../../../uploads/2026/11/onelife-texture.webp) center/cover;color:var(--stage)}
.c27x .olp-sand .mono{color:var(--gold)}
.c27x .olp-night{background:var(--stage);color:var(--paper)}
.c27x .olp-night em{font-style:normal;color:var(--gold-lt)}
.c27x .olp-night .mono{color:var(--gold-lt)}
.c27x .olp-gold{background:var(--gold);color:#fff}
.c27x .olp-story{color:#fff;padding:12% 9%}
.c27x .olp-story b{font-size:clamp(16px,2cqw,30px);margin-top:auto;margin-bottom:8%}
.c27x .olp-story .btn{align-self:stretch;background:var(--gold);color:#fff;text-align:center;font:700 clamp(7px,.7cqw,11px)/1 var(--mul);letter-spacing:.16em;text-transform:uppercase;padding:9% 0;border-radius:4px}
.c27x.ol .xl-orbit .phone{border-color:var(--stage)}
.c27x.ol .xl-orbit .toast i{box-shadow:0 0 0 4px rgba(165,128,60,.2)}
.c27x.ol .xl-orbit .toast.dark .n{font:400 clamp(22px,2.6cqw,36px)/1 var(--bel);color:var(--gold-lt)}
.c27x.ol .xl-red .eyebrow{color:#F5E6C8}
.c27x.ol .xl-copy,.c27x.ol .xl-steps p{font-family:var(--mul)}

/* Result */
.c27x .ol-result{background:var(--paper)}
.c27x .ol-result h2{max-width:12ch;color:var(--stage)!important}
.c27x .ol-result .txt>p{font-family:var(--mul)}
.c27x .ol-result .ldc{position:absolute;left:clamp(32px,5vw,90px);bottom:150px;width:min(400px,78%);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);z-index:3}
.c27x .ol-result .smc{position:absolute;left:clamp(160px,16vw,300px);bottom:40px;width:min(270px,60%);z-index:4}
.c27x .ol-result img{display:block;width:100%;height:auto}
.c27x .ol-result .ph>img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center 20%;border-radius:0 24px 24px 0}
.c27x .ol-result .bkc{position:absolute;left:-110px;bottom:60px;width:260px;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);z-index:3}

/* Look, type, mosaic */
.c27x.ol .fv-look{background:var(--stage)}
.c27x.ol .fv-look h2{font-size:clamp(52px,6.2vw,104px)!important;line-height:1!important;color:var(--paper)!important;max-width:7ch}
.c27x.ol .fv-look p{font-family:var(--mul);color:#c9bfae}
.c27x.ol .fv-look .lt .mono{color:var(--stage)}
.c27x.ol .fv-spec{background:var(--paper)}
.c27x.ol .fv-spec .fv-in{border-color:var(--stage)}
.c27x.ol .fv-spec .ab{font:400 clamp(34px,4.4vw,76px)/1.05 var(--bel);white-space:normal;color:var(--stage)}
.c27x.ol .fv-spec .nu{font:400 clamp(20px,1.9vw,30px)/1.4 var(--mul);white-space:normal;max-width:30ch;color:var(--bark)}
.c27x.ol .fv-spec table,.c27x.ol .fv-spec .l p{font-family:var(--mul)}
.c27x.ol .fv-mosaic{background:var(--stage)}
.c27x.ol .fv-mosaic .hd p{font-family:var(--mul);color:#b8ad99}
.c27x.ol .fv-mosaic .brief{background:var(--paper)}
.c27x.ol .fv-mosaic .bh{color:var(--gold)}
.c27x.ol .fv-mosaic figure img{object-position:center 25%}

/* Every page */
.c27x .ol-pages{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto;gap:clamp(12px,1.4vw,22px);max-width:var(--box);margin:0 auto clamp(40px,5vw,80px)}
.c27x .ol-pages figure{margin:0;border-radius:18px;overflow:hidden;background:var(--paper);position:relative}
.c27x .ol-pages .a{grid-row:1/3;max-height:1100px}
.c27x .ol-pages img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;border-radius:0}
.c27x .ol-pages figcaption{position:absolute;left:14px;bottom:14px;background:rgba(31,27,22,.82);color:#F0EDE4;font-size:10px;padding:8px 12px;border-radius:6px}

@media (max-width:1000px){
	.c27x .ol-stage .lb{display:none}
	.c27x .ol-stage .bk{left:-2%;width:28%}
	.c27x .ol-stage .ld{right:-2%;width:44%}
	.c27x .ol-stage .ph{width:24%}
	.c27x .ol-result .ldc,.c27x .ol-result .smc{position:relative;left:auto;bottom:auto;width:100%;max-width:380px;margin-top:24px}
	.c27x .ol-result .ph>img{border-radius:0 0 24px 24px}
	.c27x .ol-result .bkc{left:16px;bottom:16px;width:min(240px,60%)}
	.c27x .ol-pages{grid-template-columns:1fr}
	.c27x .ol-pages .a{grid-row:auto;max-height:640px}
}
/* fixes */
.c27x .ol-stage{padding-bottom:clamp(110px,12vw,190px)}
.c27x .ol-stage .eyebrow{color:#6E5321}
.c27x .ol-result .ldc{position:relative;left:auto;bottom:auto;margin-top:clamp(36px,4vw,60px);width:min(400px,90%)}
.c27x .ol-result .smc{position:relative;left:auto;bottom:auto;width:min(270px,70%);margin:-70px 0 0 clamp(120px,12vw,200px)}
.c27x .ol-result .txt{padding-bottom:60px}
.c27x .ol-mosaic .g4 figure:nth-child(2) img{object-position:top}

/* Deck components, OneLife voice: Mulish body, Belleza titles, square gold buttons like the site. */
.c27x.ol .cp{font-family:var(--mul);color:var(--stage)}
.c27x.ol .cp .t{font-family:var(--bel);font-weight:400;font-size:24px}
.c27x.ol .cp-btn{border-radius:4px;font:700 11px/1 var(--mul);letter-spacing:.16em;text-transform:uppercase;padding:14px}
.c27x.ol .bg-gold .cp-btn{background:var(--stage)}
.c27x.ol .xl-deck .dk-set::before{background:#E6E0D4}
.c27x.ol .xl-deck .dk-set::after{background:#D8D0C0}