/* ============================================================
   Ulalo — Marketing Site UI Kit (editorial web surface)
   Ported from uploads/ulalo-landing-editorial.html.
   Editorial register: Bricolage display, Instrument Serif accents,
   Newsreader body, hard-edged cards, paper grain, structural grid.
   ============================================================ */
:root{
  --sand:#E8DCC8;--sand-deep:#DCCDB2;--char:#1E1A14;--char-2:#2C261D;
  --umber:#7A4A28;--ochre:#C8842D;--rust:#B0492A;--sage:#7C8765;
  --cream:#F4ECDD;--ink:#1E1A14;--ink-soft:#5A4F40;--paper-line:#C9B89C;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Newsreader',serif;color:var(--ink);background:var(--sand);line-height:1.5;overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
::selection{background:var(--rust);color:var(--cream)}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
.display{font-family:'Bricolage Grotesque',sans-serif}
.serif-it{font-family:'Instrument Serif',serif;font-style:italic}

/* reveal — base state is ALWAYS visible. Entrance motion is intentionally
   omitted: content must never depend on an animation clock that can pause
   in preview / print / screenshot contexts. */
.rv{opacity:1;transform:none}

/* grid lines */
.gridlines{position:fixed;inset:0;z-index:0;pointer-events:none;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);padding:0 40px}
.gridlines span{border-left:1px solid rgba(120,74,40,.07)}
.gridlines span:last-child{border-right:1px solid rgba(120,74,40,.07)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s}
nav .bar{max-width:1280px;margin:0 auto;padding:22px 40px;display:flex;align-items:center;justify-content:space-between}
nav.scrolled{background:rgba(232,220,200,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--paper-line)}
.logo{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px;letter-spacing:-1px;color:var(--char);display:flex;align-items:center;gap:10px}
.logo svg{display:block}
.navlinks{display:flex;gap:30px;align-items:center;font-family:'Bricolage Grotesque';font-size:15px;font-weight:600}
.navlinks a{text-decoration:none;color:var(--ink);opacity:.7;transition:opacity .2s;cursor:pointer}
.navlinks a:hover{opacity:1}
.nbtn{background:var(--char);color:var(--cream)!important;opacity:1!important;padding:11px 20px;border-radius:2px;transition:background .2s}
.nbtn:hover{background:var(--rust)}
/* mobile menu toggle — hard-edged editorial hamburger, hidden on desktop */
.navtoggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;background:var(--sand);border:2px solid var(--char);border-radius:2px;cursor:pointer}
.navtoggle span{display:block;width:18px;height:2px;background:var(--char);transition:transform .25s,opacity .2s}
#u-nav.open .navtoggle{background:var(--char)}
#u-nav.open .navtoggle span{background:var(--cream)}
#u-nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#u-nav.open .navtoggle span:nth-child(2){opacity:0}
#u-nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
header{padding:150px 0 70px;position:relative}
.kicker{font-family:'Bricolage Grotesque';font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--rust);display:flex;align-items:center;gap:14px;margin-bottom:30px}
.kicker::before{content:"";width:46px;height:2px;background:var(--rust)}
h1.hero{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(54px,9vw,128px);line-height:.92;letter-spacing:-3px;color:var(--char)}
h1.hero .ln{display:block;overflow:hidden}
h1.hero .ln em{font-family:'Instrument Serif';font-style:italic;font-weight:400;color:var(--rust);letter-spacing:-1px}
.hero-row{display:grid;grid-template-columns:1fr 360px;gap:50px;align-items:end;margin-top:18px}
.hero-blurb{font-size:21px;color:var(--ink-soft);font-weight:300;max-width:340px;border-top:2px solid var(--char);padding-top:20px}
.hero-blurb b{color:var(--char);font-weight:500}
.hero-actions{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap}
.btn{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;padding:16px 28px;border-radius:2px;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:transform .15s,background .2s,color .2s}
.btn-fill{background:var(--char);color:var(--cream)}
.btn-fill:hover{background:var(--rust);transform:translate(2px,-2px)}
.btn-line{background:transparent;color:var(--char);border:2px solid var(--char)}
.btn-line:hover{background:var(--char);color:var(--cream)}

/* hero photo */
.hero-photo{margin-top:64px;position:relative;height:520px;border-radius:3px;overflow:hidden;box-shadow:0 30px 80px rgba(30,26,20,.28)}
.photo-ph{position:absolute;inset:0;background:linear-gradient(120deg, rgba(176,73,42,.5), rgba(200,132,45,.25) 45%, rgba(124,135,101,.45)),repeating-linear-gradient(45deg, #6b4327 0 18px, #5a3a22 18px 36px);display:flex;align-items:center;justify-content:center;color:var(--cream)}
.photo-ph .meta{text-align:center;opacity:.9}
.photo-ph .meta .ic{margin-bottom:14px}
.photo-ph .meta b{font-family:'Bricolage Grotesque';font-size:15px;letter-spacing:1px;text-transform:uppercase;display:block;font-weight:700}
.photo-ph .meta span{font-size:14px;opacity:.7}
.photo-cap{position:absolute;left:24px;bottom:22px;z-index:3;color:var(--cream);font-family:'Bricolage Grotesque';font-size:13px;font-weight:600;letter-spacing:1px;background:rgba(30,26,20,.4);padding:8px 14px;backdrop-filter:blur(4px);border-radius:2px}
.photo-tag{position:absolute;right:24px;top:24px;z-index:3;background:var(--ochre);color:var(--char);font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;padding:9px 15px;border-radius:2px;letter-spacing:.5px}

/* marquee */
.marq{border-top:2px solid var(--char);border-bottom:2px solid var(--char);margin-top:70px;overflow:hidden;background:var(--char);color:var(--cream)}
.marq-track{display:flex;gap:48px;white-space:nowrap;padding:16px 0;animation:scroll 28s linear infinite;font-family:'Bricolage Grotesque';font-weight:600;font-size:16px;letter-spacing:1px}
.marq-track span{display:flex;align-items:center;gap:48px;text-transform:uppercase}
.marq-track i{color:var(--ochre);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
section{padding:110px 0;position:relative}
.lab{font-family:'Bricolage Grotesque';font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--rust);margin-bottom:22px}
h2{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-1.8px;color:var(--char)}
h2 em{font-family:'Instrument Serif';font-style:italic;font-weight:400;color:var(--umber)}
.sec-lede{font-size:20px;color:var(--ink-soft);font-weight:300;max-width:560px;margin-top:24px}

/* problem figures */
.figs{margin-top:70px;border-top:2px solid var(--char)}
.fig{display:grid;grid-template-columns:140px 1fr 1fr;gap:40px;align-items:center;padding:38px 0;border-bottom:1px solid var(--paper-line)}
.fig .idx{font-family:'Bricolage Grotesque';font-size:14px;font-weight:700;color:var(--rust)}
.fig .num{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(46px,6vw,86px);letter-spacing:-3px;line-height:.9;color:var(--char)}
.fig .txt{font-size:18px;color:var(--ink-soft);font-weight:300}
.fig:hover .num{color:var(--rust);transition:color .3s}

/* how cards */
.how{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:70px}
.hcard{background:var(--cream);border:2px solid var(--char);border-radius:3px;padding:34px 30px;position:relative;box-shadow:6px 6px 0 var(--char)}
.hcard:nth-child(1){grid-column:1/5}
.hcard:nth-child(2){grid-column:5/9;margin-top:40px}
.hcard:nth-child(3){grid-column:9/13;margin-top:80px}
.hcard .step-n{font-family:'Instrument Serif';font-style:italic;font-size:56px;color:var(--ochre);line-height:1;margin-bottom:16px}
.hcard h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:23px;letter-spacing:-.5px;margin-bottom:12px}
.hcard p{font-size:16px;color:var(--ink-soft);font-weight:300}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;border:2px solid var(--char);border-radius:3px;overflow:hidden;box-shadow:8px 8px 0 var(--char)}
.split .pane{padding:54px 48px}
.split .pane.dark{background:var(--char);color:var(--cream)}
.split .pane.dark .lab{color:var(--ochre)}
.split .pane.dark h3{color:var(--cream)}
.split .pane.photo{padding:0;position:relative;min-height:440px}
.split h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:34px;letter-spacing:-1px;line-height:1.05;margin-bottom:18px;color:var(--char)}
.split p{font-size:17px;font-weight:300;opacity:.9;margin-bottom:26px}
.tlist{list-style:none;display:flex;flex-direction:column;gap:14px}
.tlist li{display:flex;gap:14px;font-family:'Newsreader';font-size:16px;align-items:baseline}
.tlist .mk{font-family:'Bricolage Grotesque';font-weight:700;color:var(--ochre);font-size:14px;flex:none}
.ph2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--cream);background:linear-gradient(135deg,rgba(124,135,101,.55),rgba(122,74,40,.6)),repeating-linear-gradient(-45deg,#5d4a2f 0 16px,#4f3f28 16px 32px)}

/* twin EWA vs lending */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:54px}
.twin .col{border:2px solid var(--char);border-radius:3px;padding:40px 36px;position:relative;overflow:hidden}
.twin .earn{background:linear-gradient(160deg,var(--cream),#E3E7D6)}
.twin .borrow{background:linear-gradient(160deg,var(--cream),#E9DFD0)}
.twin .sig{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:20px}
.twin .earn .sig{color:var(--sage)}
.twin .borrow .sig{color:var(--umber)}
.twin .sig::before{content:"";width:12px;height:12px;border-radius:50%}
.twin .earn .sig::before{background:var(--sage)}
.twin .borrow .sig::before{background:var(--umber)}
.twin h4{font-family:'Instrument Serif';font-style:italic;font-size:34px;font-weight:400;margin-bottom:12px;letter-spacing:-.5px}
.twin p{font-size:16.5px;color:var(--ink-soft);font-weight:300}

/* quote */
.quote{margin-top:40px;border-top:2px solid var(--char);border-bottom:2px solid var(--char);padding:70px 0;text-align:center}
.quote blockquote{font-family:'Instrument Serif';font-style:italic;font-size:clamp(28px,4vw,52px);line-height:1.15;letter-spacing:-.5px;max-width:900px;margin:0 auto;color:var(--char)}
.quote blockquote b{font-style:normal;color:var(--rust)}
.quote .who{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;margin-top:30px;color:var(--ink-soft)}

/* cta */
.cta-band{background:var(--char);color:var(--cream);border-radius:3px;padding:90px 60px;text-align:center;position:relative;overflow:hidden;box-shadow:10px 10px 0 var(--umber)}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.12;background-image:repeating-linear-gradient(45deg,var(--ochre) 0 2px,transparent 2px 22px)}
.cta-band>*{position:relative;z-index:2}
.cta-band h2{color:var(--cream);font-size:clamp(40px,6vw,76px)}
.cta-band h2 em{color:var(--ochre)}
.cta-band p{font-size:20px;font-weight:300;opacity:.8;max-width:540px;margin:22px auto 38px}
.cta-band .btn-fill{background:var(--ochre);color:var(--char)}
.cta-band .btn-fill:hover{background:var(--cream)}

/* footer */
footer{padding:80px 0 50px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;border-top:2px solid var(--char);padding-top:50px}
.fgrid .blurb{font-family:'Instrument Serif';font-style:italic;font-size:24px;max-width:320px;color:var(--char);margin-top:18px;line-height:1.3}
.fcol h5{font-family:'Bricolage Grotesque';font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--rust);margin-bottom:18px}
.fcol a{display:block;text-decoration:none;color:var(--ink);font-size:16px;margin-bottom:11px;opacity:.75;transition:opacity .2s;cursor:pointer}
.fcol a:hover{opacity:1}
.fbot{margin-top:60px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'Bricolage Grotesque';font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--ink-soft)}

/* ============================================================
   INTERIOR PAGES — shared shell + building blocks
   ============================================================ */
.interior{position:relative;z-index:2}
.ihero{padding:172px 0 64px;border-bottom:2px solid var(--char);position:relative}
.crumb{font-family:'Bricolage Grotesque';font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:10px;align-items:center;margin-bottom:30px}
.crumb a{color:var(--ink-soft);text-decoration:none;opacity:.8;transition:opacity .2s}
.crumb a:hover{opacity:1;color:var(--rust)}
.crumb .sep{opacity:.4}
.crumb .cur{color:var(--rust)}
.ihero .ititle{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(46px,7.5vw,104px);line-height:.92;letter-spacing:-3px;color:var(--char);max-width:16ch}
.ihero .ititle em{font-family:'Instrument Serif';font-style:italic;font-weight:400;color:var(--rust);letter-spacing:-1px}
.ihero-row{display:grid;grid-template-columns:1fr 380px;gap:54px;align-items:end}
.ilede{font-size:21px;color:var(--ink-soft);font-weight:300;max-width:380px;border-top:2px solid var(--char);padding-top:20px}
.ilede b{color:var(--char);font-weight:500}

.isec{padding:92px 0;position:relative}
.isec.tight{padding:64px 0}
.isec .lab{margin-bottom:18px}
.isec h2{margin-bottom:8px}
.isec-lede{font-size:20px;color:var(--ink-soft);font-weight:300;max-width:620px;margin-top:22px}

/* alternating feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border:2px solid var(--char);border-radius:3px;overflow:hidden;box-shadow:8px 8px 0 var(--char)}
.frow.flip .fr-copy{order:2}
.fr-copy{padding:52px 46px}
.fr-copy .lab{margin-bottom:16px}
.fr-copy h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:32px;letter-spacing:-1px;line-height:1.05;margin-bottom:16px;color:var(--char)}
.fr-copy p{font-size:17px;font-weight:300;color:var(--ink-soft);margin-bottom:22px}
.fr-art{position:relative;min-height:380px;background:linear-gradient(135deg,rgba(124,135,101,.5),rgba(122,74,40,.58)),repeating-linear-gradient(-45deg,#5d4a2f 0 16px,#4f3f28 16px 32px)}
.fr-art.warm{background:linear-gradient(135deg,rgba(200,132,45,.5),rgba(176,73,42,.58)),repeating-linear-gradient(45deg,#6b4327 0 16px,#5a3a22 16px 32px)}
.fr-art .meta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--cream);padding:20px}
.fr-art .meta b{font-family:'Bricolage Grotesque';font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.fr-art .meta span{font-size:13px;opacity:.78;max-width:240px}

/* checklist */
.ilist{list-style:none;display:flex;flex-direction:column;gap:14px}
.ilist li{display:flex;gap:14px;font-family:'Newsreader';font-size:16.5px;align-items:baseline;color:var(--ink-soft)}
.ilist li b{color:var(--char);font-weight:500}
.ilist .mk{font-family:'Bricolage Grotesque';font-weight:700;color:var(--ochre);font-size:14px;flex:none}

/* 3-card grid */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.icards.two{grid-template-columns:repeat(2,1fr)}
.icard{background:var(--cream);border:2px solid var(--char);border-radius:3px;padding:34px 30px;box-shadow:6px 6px 0 var(--char)}
.icard .ico{font-family:'Instrument Serif';font-style:italic;font-size:48px;color:var(--ochre);line-height:1;margin-bottom:14px}
.icard h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;letter-spacing:-.5px;margin-bottom:10px;color:var(--char)}
.icard p{font-size:15.5px;color:var(--ink-soft);font-weight:300}

/* stat rows (reuse fig look) */
.istats{margin-top:54px;border-top:2px solid var(--char)}
.istat{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center;padding:34px 0;border-bottom:1px solid var(--paper-line)}
.istat .num{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(40px,5vw,72px);letter-spacing:-2px;line-height:.9;color:var(--char)}
.istat .txt{font-size:17px;color:var(--ink-soft);font-weight:300}

/* faq */
.faq{margin-top:48px;border-top:2px solid var(--char)}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;gap:24px;align-items:baseline;font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;letter-spacing:-.4px;color:var(--char)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{font-family:'Bricolage Grotesque';color:var(--rust);font-size:22px;flex:none;transition:transform .2s}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq .ans{padding:0 60px 26px 0;font-size:16.5px;color:var(--ink-soft);font-weight:300;max-width:760px}

/* prose (legal / trust) */
.prose-grid{display:grid;grid-template-columns:240px 1fr;gap:64px;margin-top:54px;align-items:start}
.prose-nav{position:sticky;top:120px;font-family:'Bricolage Grotesque';display:flex;flex-direction:column;gap:12px}
.prose-nav a{text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-soft);padding:8px 0;border-bottom:1px solid var(--paper-line);transition:color .2s}
.prose-nav a:hover{color:var(--rust)}
.prose h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:26px;letter-spacing:-.6px;margin:0 0 14px;color:var(--char);scroll-margin-top:120px}
.prose h3:not(:first-child){margin-top:48px}
.prose p{font-size:17px;color:var(--ink-soft);font-weight:300;margin-bottom:16px;max-width:720px;line-height:1.6}
.prose .meta-row{font-family:'Bricolage Grotesque';font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--ink-soft);margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid var(--paper-line)}
.prose ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:8px 0 20px}
.prose ul li{display:flex;gap:14px;font-size:16.5px;color:var(--ink-soft);font-weight:300;align-items:baseline}
.prose ul li::before{content:"→";color:var(--ochre);font-family:'Bricolage Grotesque';font-weight:700;flex:none}

/* team grid */
.teamgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.tmember .ph{aspect-ratio:3/4;border:2px solid var(--char);border-radius:3px;background:linear-gradient(135deg,rgba(124,135,101,.45),rgba(122,74,40,.5)),repeating-linear-gradient(45deg,#6b4327 0 14px,#5a3a22 14px 28px);display:flex;align-items:flex-end;color:var(--cream);font-family:'Bricolage Grotesque';font-size:11px;letter-spacing:1px;padding:14px;box-shadow:5px 5px 0 var(--char)}
.tmember h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;margin:16px 0 2px;letter-spacing:-.3px}
.tmember p{font-size:14px;color:var(--rust);font-family:'Bricolage Grotesque';font-weight:600}

/* values / timeline */
.timeline{margin-top:48px;border-left:2px solid var(--char);padding-left:40px;display:flex;flex-direction:column;gap:44px}
.tnode{position:relative}
.tnode::before{content:"";position:absolute;left:-49px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--rust);border:2px solid var(--char)}
.tnode .yr{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;color:var(--rust);letter-spacing:-.5px}
.tnode h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:24px;margin:4px 0 8px;letter-spacing:-.5px}
.tnode p{font-size:16.5px;color:var(--ink-soft);font-weight:300;max-width:620px}

/* jobs */
.jobs{margin-top:48px;border-top:2px solid var(--char)}
.job{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:30px;align-items:center;padding:28px 0;border-bottom:1px solid var(--paper-line);text-decoration:none;color:inherit;transition:padding-left .2s}
.job:hover{padding-left:14px}
.job h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:22px;letter-spacing:-.5px;color:var(--char)}
.job .jm{font-family:'Bricolage Grotesque';font-size:14px;font-weight:600;color:var(--ink-soft)}
.job .arrow{font-family:'Bricolage Grotesque';font-weight:700;color:var(--rust);font-size:20px}
.dept{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--rust);margin:54px 0 4px;padding-top:30px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.ccard{background:var(--cream);border:2px solid var(--char);border-radius:3px;padding:38px 34px;box-shadow:6px 6px 0 var(--char)}
.ccard .lab{margin-bottom:14px}
.ccard h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:24px;letter-spacing:-.5px;margin-bottom:10px}
.ccard p{font-size:16px;color:var(--ink-soft);font-weight:300;margin-bottom:16px}
.ccard a.big{font-family:'Instrument Serif';font-style:italic;font-size:26px;color:var(--rust);text-decoration:none;border-bottom:2px solid var(--rust)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:'Bricolage Grotesque';font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:'Newsreader';font-size:16px;padding:14px 16px;border:2px solid var(--char);border-radius:2px;background:var(--sand);color:var(--ink);outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rust)}

/* ============================================================
   DEMO SCHEDULER
   ============================================================ */
.sched{display:grid;grid-template-columns:1.05fr .95fr;gap:0;margin-top:48px;border:2px solid var(--char);border-radius:3px;overflow:hidden;box-shadow:10px 10px 0 var(--char);background:var(--cream)}
.sched-left{padding:46px 44px;border-right:2px solid var(--char)}
.sched-right{padding:46px 44px;background:var(--char);color:var(--cream)}
.sched-step{font-family:'Bricolage Grotesque';font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--rust);margin-bottom:8px}
.sched-right .sched-step{color:var(--ochre)}
.sched h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:26px;letter-spacing:-.6px;margin-bottom:24px;color:var(--char)}
.sched-right h3{color:var(--cream)}

.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.cal-head .mo{font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;letter-spacing:-.3px}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:38px;height:38px;border:2px solid var(--char);background:var(--sand);border-radius:2px;cursor:pointer;font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;color:var(--char);transition:background .2s,color .2s}
.cal-nav button:hover:not(:disabled){background:var(--char);color:var(--cream)}
.cal-nav button:disabled{opacity:.3;cursor:not-allowed}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-dow span{text-align:center;font-family:'Bricolage Grotesque';font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque';font-weight:600;font-size:16px;border:2px solid transparent;border-radius:2px;cursor:pointer;color:var(--char);background:transparent;transition:background .15s,color .15s,border-color .15s;position:relative}
.cal-cell.empty{cursor:default}
.cal-cell.dim{color:var(--ink-soft);opacity:.35;cursor:not-allowed}
.cal-cell.avail:hover{border-color:var(--char)}
.cal-cell.avail::after{content:"";position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--sage)}
.cal-cell.sel{background:var(--char);color:var(--cream);border-color:var(--char)}
.cal-cell.sel::after{background:var(--ochre)}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.slot{font-family:'Bricolage Grotesque';font-weight:600;font-size:15px;padding:13px 8px;border:2px solid var(--char);border-radius:2px;background:var(--sand);color:var(--char);cursor:pointer;text-align:center;transition:background .15s,color .15s}
.sched-right .slot{background:rgba(244,236,221,.08);border-color:rgba(244,236,221,.5);color:var(--cream)}
.slot:hover{background:var(--umber);color:var(--cream);border-color:var(--umber)}
.sched-right .slot:hover{background:var(--ochre);color:var(--char);border-color:var(--ochre)}
.slot.sel{background:var(--ochre);color:var(--char);border-color:var(--ochre)}
.slot-empty{font-size:15px;font-weight:300;opacity:.7;font-family:'Newsreader';font-style:italic;margin-top:6px}

.tz-row{font-family:'Bricolage Grotesque';font-size:13px;font-weight:600;color:var(--ink-soft);margin-top:20px;display:flex;align-items:center;gap:8px}
.tz-row .dot{width:7px;height:7px;border-radius:50%;background:var(--sage)}

/* right column form */
.sched-right .field label{color:rgba(244,236,221,.7)}
.sched-right .field input,.sched-right .field select{background:rgba(244,236,221,.06);border-color:rgba(244,236,221,.35);color:var(--cream)}
.sched-right .field input::placeholder{color:rgba(244,236,221,.4)}
.sched-right .field input:focus,.sched-right .field select:focus{border-color:var(--ochre)}
.fopt{border:2px solid rgba(244,236,221,.35);border-radius:2px;padding:18px 20px;display:flex;gap:16px;align-items:flex-start;cursor:pointer;margin-bottom:18px;transition:border-color .2s,background .2s}
.fopt:hover{border-color:rgba(244,236,221,.6)}
.fopt.on{border-color:var(--ochre);background:rgba(200,132,45,.1)}
.fopt .box{width:24px;height:24px;border:2px solid var(--cream);border-radius:3px;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque';font-weight:800;color:var(--char);background:transparent;transition:background .2s}
.fopt.on .box{background:var(--ochre);border-color:var(--ochre)}
.fopt .ftxt b{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;display:block;margin-bottom:4px}
.fopt .ftxt span{font-size:14px;font-weight:300;opacity:.78}
.callfields{margin:0 0 18px;padding-left:40px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.callfields .field{margin-bottom:0}

.summary-line{font-family:'Bricolage Grotesque';font-size:14px;font-weight:600;color:var(--ochre);margin-bottom:22px;min-height:20px}
.btn-book{width:100%;justify-content:center;background:var(--ochre);color:var(--char);font-size:17px;padding:18px}
.btn-book:hover{background:var(--cream)}
.btn-book:disabled{opacity:.4;cursor:not-allowed;background:rgba(244,236,221,.2);color:var(--cream)}
.sched-note{font-family:'Bricolage Grotesque';font-size:12.5px;font-weight:500;opacity:.6;margin-top:16px;text-align:center}

/* confirmation */
.confirm{margin-top:48px;border:2px solid var(--char);border-radius:3px;box-shadow:10px 10px 0 var(--umber);overflow:hidden;background:var(--cream)}
.confirm-top{background:var(--char);color:var(--cream);padding:54px 50px;text-align:center}
.confirm-top .tick{width:64px;height:64px;border-radius:50%;border:3px solid var(--ochre);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:30px;color:var(--ochre);font-family:'Bricolage Grotesque'}
.confirm-top h2{color:var(--cream);font-size:clamp(34px,4.5vw,54px)}
.confirm-top h2 em{color:var(--ochre)}
.confirm-top p{font-size:18px;font-weight:300;opacity:.82;margin-top:14px}
.confirm-body{padding:44px 50px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.cdetail .k{font-family:'Bricolage Grotesque';font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--rust);margin-bottom:6px}
.cdetail .v{font-family:'Newsreader';font-size:19px;color:var(--char)}
.confirm-foot{padding:0 50px 44px;display:flex;gap:14px;flex-wrap:wrap}

@media(max-width:920px){
  .gridlines{display:none}
  .hero-row{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}.hcard:nth-child(1),.hcard:nth-child(2),.hcard:nth-child(3){grid-column:1;margin-top:0}
  .split,.twin,.fgrid{grid-template-columns:1fr}
  .split .pane.photo{min-height:300px}
  .fig{grid-template-columns:1fr;gap:12px}
  nav .bar{padding:18px 24px;position:relative}
  .navtoggle{display:flex}
  #u-nav.open{background:rgba(232,220,200,.97);backdrop-filter:blur(8px)}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-top:2px solid var(--char);border-bottom:2px solid var(--char);box-shadow:0 12px 0 rgba(30,26,20,.07);padding:6px 24px 18px}
  #u-nav.open .navlinks{display:flex;animation:navdrop .22s ease}
  @keyframes navdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .navlinks a{padding:15px 2px;font-size:17px;opacity:1;border-bottom:1px solid var(--paper-line)}
  .navlinks a:last-child{border-bottom:none}
  .nbtn{margin-top:12px;text-align:center;padding:14px 20px;font-size:16px}
  .wrap{padding:0 24px}
  /* interior */
  .ihero-row{grid-template-columns:1fr;gap:30px}
  .ilede{max-width:none}
  .frow,.icards,.icards.two,.contact-grid{grid-template-columns:1fr}
  .frow.flip .fr-copy{order:0}
  .istat{grid-template-columns:1fr;gap:10px}
  .prose-grid{grid-template-columns:1fr;gap:30px}
  .prose-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .teamgrid{grid-template-columns:repeat(2,1fr)}
  .job{grid-template-columns:1fr;gap:6px}
  .sched{grid-template-columns:1fr}
  .sched-left{border-right:none;border-bottom:2px solid var(--char)}
  .confirm-body{grid-template-columns:1fr}
  .callfields{grid-template-columns:1fr}
}