/* ============================================================================ LEA ORTEGA — SITEWIDE DESIGN LAYER ("Atelier") ---------------------------------------------------------------------------- A light, warm, earth-toned skin: beige paper, brown ink, bronze and champagne metal. The ornament language is a cut stone — facet corners, rhombus marks, hairline rules and restrained sparkle. Nothing here shares a colour, a typeface or a shape with the source build. Load once per page: ========================================================================== */ :root{ /* ---- paper: four steps of warm neutral, lightest first ------------------ */ --lo-ivory:#f6efea; --lo-cream:#f1e6df; --lo-linen:#eadcd3; --lo-sand:#e2d0c6; /* ---- structure: hairlines, muted type ---------------------------------- */ --lo-clay:#d9c4b9; --lo-taupe:#b49d94; --lo-umber:#67554f; /* ---- metal: the only chromatic family, and the source of every sparkle -- */ --lo-bronze:#b0857d; --lo-bronze-d:#76493f; --lo-gold:#d5aaa2; --lo-gold-lt:#f1dcd6; /* ---- ink: warm browns, never a blue-black ------------------------------ */ --lo-cocoa:#5e5552; --lo-ink:#2a1a13; --lo-espresso:#33231d; /* ---- geometry ---------------------------------------------------------- */ --lo-cut:14px; --lo-cut-sm:9px; --lo-hair:1px; --lo-shadow:0 1px 2px rgba(42,26,19,.05),0 10px 30px -14px rgba(42,26,19,.22); --lo-shadow-lift:0 2px 6px rgba(42,26,19,.07),0 22px 48px -18px rgba(42,26,19,.30); /* ---- type -------------------------------------------------------------- */ --lo-display:'Fraunces','Hoefler Text',Georgia,serif; --lo-sans:'Instrument Sans',system-ui,-apple-system,sans-serif; --lo-mono:'DM Mono',ui-monospace,'SFMono-Regular',monospace; /* ---- the cut: two opposite corners taken off, like an emerald-cut stone - */ --lo-facet:polygon(var(--lo-cut) 0,100% 0,100% calc(100% - var(--lo-cut)), calc(100% - var(--lo-cut)) 100%,0 100%,0 var(--lo-cut)); /* ---- the stone: all eight corners, for photographs --------------------- */ --lo-stone:polygon(var(--lo-cut) 0,calc(100% - var(--lo-cut)) 0,100% var(--lo-cut), 100% calc(100% - var(--lo-cut)),calc(100% - var(--lo-cut)) 100%,var(--lo-cut) 100%, 0 calc(100% - var(--lo-cut)),0 var(--lo-cut)); } /* ============================================================================ PAPER — ivory stock with a fine tooth, so the beige reads as paper and not as a flat fill. The grain is fixed and never scrolls off. ========================================================================== */ html{background:var(--lo-ivory)} body{position:relative;background:var(--lo-ivory);color:var(--lo-ink)} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E") repeat; background-size:160px 160px;opacity:.035;mix-blend-mode:multiply} body>*{position:relative;z-index:1} /* ============================================================================ TYPE — Fraunces sets an elegant, warm display voice; Instrument Sans carries the reading; DM Mono handles every label, price and piece of metadata. ========================================================================== */ body,p,li,td,th,input,select,textarea,button{font-family:var(--lo-sans)} h1,h2,h3,h4,.hero-title,.section-title,.cx-panel-name,.cx-card-name, .blog-card-title,.uknav-txt strong{font-family:var(--lo-display);font-weight:500; font-variation-settings:'SOFT' 40,'WONK' 0;letter-spacing:-.018em;line-height:1.06; color:rgb(var(--lo-fg-rgb));text-wrap:balance} h1,.hero-title{font-size:clamp(36px,5vw,68px);letter-spacing:-.024em} h2,.section-title{font-size:clamp(27px,3.3vw,46px);letter-spacing:-.02em} h3{font-size:clamp(19px,1.9vw,26px);letter-spacing:-.014em} p,li{line-height:1.7;color:rgb(var(--lo-fg-rgb) / .78)} /* every label, kicker, badge and number is mono, letter-spaced and bronze */ .eyebrow,.section-label,.cx-eyebrow,.uknav-collabel,.agent-eyebrow,.cx-card-loc, .cx-panel-loc,.blog-meta,.blog-cat-badge,.cx-chip,.cx-tag,.agent-badge, .uknav-cta,.uknav-trigger,.uknav-promo-pill,.cb-lbl,.status,.cc-eyebrow{ font-family:var(--lo-mono)!important;letter-spacing:.18em;text-transform:uppercase; font-size:10.5px;font-weight:500} .stat-value,.price,.cx-card-price,.cx-plate .v,.proof-item b,.spec-value,.cb-num, td,th{font-family:var(--lo-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* ============================================================================ THE CUT — structural blocks are not rounded and not pill-shaped. Corners are taken off at 45 degrees, the way a stone is cut. This is the single move that most separates the page from the source build. ========================================================================== */ :where(.btn-primary,.btn-outline,.btn,.uknav-cta,.uknav-promo-pill,.cx-btn, .uk-bookbar-btn,.card-cta,.blog-card-cta,button.btn-primary,a.btn-primary, a.btn-outline,.agent-badge,.cx-chip,.cx-tag,.uk-fab-label,.filter-btn, .blog-filter-btn,.property-card,.card,.prop-card,.blog-card,.cx-card,.cx-panel, .uknav-panel,.uknav-fcard,.spec-card,.unit-card,.faq-item,.stat-card, .cx-card-fig,.blog-card-img-wrap,.uknav-ic,input,select,textarea){ border-radius:0!important} /* photographs are cut as stones — all eight corners, no rounding */ .cx-card-fig,.blog-card-img-wrap,.cx-gallery figure,.uk-gal figure, .gallery-item{overflow:hidden;clip-path:var(--lo-stone)} .cx-card-fig img,.blog-card-img,.uknav-fcard img,.cx-gallery figure img, .uk-gal figure img,.gallery-item img{ transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .6s ease} .cx-card:hover .cx-card-fig img,.blog-card:hover .blog-card-img, .uknav-fcard:hover img,.cx-gallery figure:hover img,.gallery-item:hover img{ transform:scale(1.04);filter:saturate(1.06) brightness(1.03)} /* ============================================================================ THE FACET MARK — a rhombus. It is the bullet, the separator and the mark that opens every kicker. Use .lo-dia inline, or the ::before on a kicker. ========================================================================== */ .lo-dia{display:inline-block;width:.5em;height:.5em;background:currentColor;flex:none; transform:rotate(45deg);vertical-align:.06em;margin-inline:.1em} .eyebrow::before,.section-label::before,.cx-eyebrow::before,.cc-eyebrow::before, .agent-eyebrow::before{content:"";display:inline-block;width:6px;height:6px; margin-right:.85em;vertical-align:.08em;background:var(--lo-gold); transform:rotate(45deg)} /* a hairline rule with a stone set into the middle of it */ .lo-rule{display:flex;align-items:center;gap:14px;margin:0;border:0} .lo-rule::before,.lo-rule::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,var(--lo-clay) 22%,var(--lo-clay) 78%,transparent)} .lo-rule i{display:block;width:9px;height:9px;background:var(--lo-gold); transform:rotate(45deg);flex:none} /* the facet corner: takes the top-right corner off any bordered card, and draws the diagonal hairline back in. One pseudo-element, no extra markup. */ .lo-fac{position:relative} .lo-fac::after{content:"";position:absolute;top:-1px;right:-1px; width:var(--lo-cut);height:var(--lo-cut);pointer-events:none; background:linear-gradient(to bottom left,var(--lo-ivory) 0 calc(50% - .6px), var(--lo-clay) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px) 100%)} /* ============================================================================ SPARKLE — restrained, and always metal-coloured. A four-point star that catches, fades and turns, the way light leaves a facet. Never more than a handful on a screen, and silenced entirely for reduced-motion visitors. ========================================================================== */ .lo-spark{position:absolute;width:var(--s,14px);height:var(--s,14px); background:var(--lo-gold);pointer-events:none;opacity:0;z-index:3; clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); animation:lo-twinkle 4.6s cubic-bezier(.4,0,.2,1) infinite; animation-delay:var(--d,0s)} .lo-spark.is-pale{background:var(--lo-gold-lt)} @keyframes lo-twinkle{ 0%,100%{opacity:0;transform:scale(.35) rotate(0deg)} 42%{opacity:1;transform:scale(1) rotate(24deg)} 64%{opacity:.18;transform:scale(.62) rotate(40deg)} 82%{opacity:0;transform:scale(.35) rotate(48deg)}} /* the gleam: a band of light that crosses a surface, as if a facet turned */ .lo-gleam{position:relative;isolation:isolate} .lo-gleam::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(74deg,transparent 40%,rgba(255,240,236,.5) 49%, rgba(255,240,236,.72) 51%,transparent 60%); transform:translateX(-135%);opacity:0} .lo-gleam:hover::before,.lo-gleam:focus-visible::before{animation:lo-sweep .85s ease-out} @keyframes lo-sweep{0%{opacity:1;transform:translateX(-135%)} 100%{opacity:1;transform:translateX(135%)}} /* the primary call to action catches the light on its own, slowly */ .lo-gleam-idle::before{animation:lo-sweep-idle 9s ease-in-out infinite 3s} @keyframes lo-sweep-idle{0%{opacity:0;transform:translateX(-135%)} 4%{opacity:1}14%{opacity:1;transform:translateX(135%)} 15%,100%{opacity:0;transform:translateX(135%)}} /* champagne on a single display word */ .lo-shine{background-image:linear-gradient(100deg,var(--lo-bronze-d) 0 32%, var(--lo-gold) 46%,var(--lo-gold-lt) 50%,var(--lo-gold) 54%,var(--lo-bronze-d) 68% 100%); background-size:280% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text;color:transparent; animation:lo-shimmer 7s ease-in-out infinite} @keyframes lo-shimmer{0%,100%{background-position:125% 0}52%{background-position:-25% 0}} /* facet rays — the crown of a brilliant cut, thrown across a dark panel */ .lo-rays{position:absolute;inset:0;pointer-events:none;overflow:hidden} .lo-rays::before{content:"";position:absolute;inset:-20%; background:repeating-conic-gradient(from 0deg at 50% 118%, transparent 0 5.6deg,rgba(213,170,162,.085) 5.6deg 6deg); -webkit-mask-image:radial-gradient(125% 95% at 50% 112%,#000 0,transparent 72%); mask-image:radial-gradient(125% 95% at 50% 112%,#000 0,transparent 72%)} @media (prefers-reduced-motion:reduce){ .lo-spark{display:none} .lo-gleam::before{display:none} .lo-shine{animation:none;background:none;-webkit-text-fill-color:var(--lo-bronze-d); color:var(--lo-bronze-d)} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ============================================================================ NAVIGATION — ivory paper on a bronze hairline. No glass, no blur. ========================================================================== */ .uknav{background:rgba(246,239,234,.94)!important; -webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--lo-clay)!important;box-shadow:none!important} .uknav.scrolled{background:rgba(246,239,234,.97)!important; box-shadow:0 1px 0 var(--lo-clay),0 14px 34px -28px rgba(42,26,19,.5)!important; border-bottom-color:var(--lo-clay)!important} .uknav-logo img{height:40px;width:auto!important} .uknav-links>.uknav-item>.uknav-trigger,.uknav-links>.uknav-item>a{ color:var(--lo-ink)!important;font-family:var(--lo-mono)!important; letter-spacing:.16em;text-transform:uppercase;font-size:11px;font-weight:500} .uknav-links>.uknav-item>.uknav-trigger:hover, .uknav-links>.uknav-item>a:hover{color:var(--lo-bronze-d)!important} .uknav-chevron{color:var(--lo-gold)!important} .uknav-panel{background:var(--lo-ivory)!important;border:1px solid var(--lo-clay)!important; box-shadow:var(--lo-shadow-lift)!important;backdrop-filter:none!important; clip-path:var(--lo-facet)} .uknav-collabel{color:var(--lo-bronze-d)!important;border-bottom:1px solid var(--lo-clay); padding-bottom:8px;margin-bottom:8px} .uknav-link{color:var(--lo-ink)!important;border-bottom:1px solid rgba(42,26,19,.07)} .uknav-link:hover{background:var(--lo-cream)!important} .uknav-link small{color:var(--lo-umber)!important;font-family:var(--lo-sans)} .uknav-ic{color:var(--lo-bronze)!important;background:none!important} .uknav-flabel{font-family:var(--lo-mono);letter-spacing:.14em;text-transform:uppercase; font-size:10px;color:var(--lo-ink)} /* ============================================================================ BUTTONS — an espresso stone with a bronze girdle, and a light that crosses it on hover. The secondary is a hairline outline that fills on hover. ========================================================================== */ .btn-primary,a.btn-primary,button.btn-primary,.uknav-cta,.cx-btn,.uk-bookbar-btn{ position:relative;isolation:isolate;overflow:hidden; background:var(--lo-espresso)!important;color:var(--lo-ivory)!important; border:0!important;box-shadow:inset 0 0 0 1px rgba(213,170,162,.4),var(--lo-shadow)!important; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); font-family:var(--lo-mono)!important;letter-spacing:.16em;text-transform:uppercase; font-weight:500;transition:background .2s ease,box-shadow .2s ease,transform .2s ease} .btn-primary::before,a.btn-primary::before,button.btn-primary::before, .uknav-cta::before,.cx-btn::before,.uk-bookbar-btn::before{content:"";position:absolute; inset:0;z-index:-1;pointer-events:none;opacity:0;transform:translateX(-135%); background:linear-gradient(74deg,transparent 40%,rgba(255,240,236,.34) 49%, rgba(255,240,236,.5) 51%,transparent 60%)} .btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover,.uknav-cta:hover, .cx-btn:hover,.uk-bookbar-btn:hover{background:var(--lo-ink)!important; transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(213,170,162,.75),var(--lo-shadow-lift)!important} .btn-primary:hover::before,a.btn-primary:hover::before,button.btn-primary:hover::before, .uknav-cta:hover::before,.cx-btn:hover::before,.uk-bookbar-btn:hover::before{ animation:lo-sweep .85s ease-out} .btn-primary:active,a.btn-primary:active,.uknav-cta:active{transform:translateY(0)} .btn-outline,a.btn-outline{background:transparent!important;color:rgb(var(--lo-fg-rgb))!important; border:1px solid var(--lo-taupe)!important;box-shadow:none!important; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); font-family:var(--lo-mono)!important;letter-spacing:.16em;text-transform:uppercase; transition:background .2s ease,color .2s ease,border-color .2s ease} .btn-outline:hover,a.btn-outline:hover{background:var(--lo-cream)!important; border-color:var(--lo-bronze)!important;color:var(--lo-bronze-d)!important} .uknav-promo-pill{background:var(--lo-bronze)!important;color:var(--lo-ivory)!important; border:0!important} /* ---- category badges: the source build inlined a different hue per category */ .blog-cat-badge{background:var(--lo-bronze)!important;color:var(--lo-ivory)!important} .blog-card-cta{background:none!important;color:var(--lo-bronze-d)!important; font-family:var(--lo-mono)!important;letter-spacing:.16em;text-transform:uppercase} /* ---- city / category filters shipped with no base styling at all ---------- */ .filter-btn,.blog-filter-btn{-webkit-appearance:none;appearance:none; background:transparent;color:var(--lo-ink);border:1px solid var(--lo-clay); padding:0 16px;min-height:40px;font:500 10.5px/1 var(--lo-mono); letter-spacing:.16em;text-transform:uppercase;cursor:pointer; display:inline-flex;align-items:center;transition:background .18s,color .18s,border-color .18s} .filter-btn:hover,.blog-filter-btn:hover{background:var(--lo-cream); border-color:var(--lo-taupe)} .filter-btn.active,.blog-filter-btn.active{background:var(--lo-espresso); color:var(--lo-ivory);border-color:var(--lo-espresso)} /* ============================================================================ FOOTER — ivory paper under a bronze hairline. ========================================================================== */ .footer{background:var(--lo-cream)!important;color:var(--lo-ink)!important; border-top:1px solid var(--lo-clay)!important} .footer a{color:var(--lo-ink)!important} .footer a:hover{color:var(--lo-bronze-d)!important} .footer-brand img{height:50px;width:auto!important} .footer small,.footer .footer-legal,.footer p{color:var(--lo-umber)!important} /* ============================================================================ ICON SET — one mask sprite, coloured by currentColor. Generated from the ICONS dict in 06_theme.py, so the set has exactly one source of truth. ========================================================================== */ .ci{display:inline-block;width:1em;height:1em;background:currentColor;flex:none; vertical-align:-.14em;-webkit-mask:var(--ci) center/contain no-repeat; mask:var(--ci) center/contain no-repeat} .ci-diamond{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%209.2%2012%2021l9-11.8L17.2%203.2H6.8L3%209.2Z%22%2F%3E%3C%2Fsvg%3E")} .ci-sparkle{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.5c.9%205.6%202.4%207.1%208%208-5.6.9-7.1%202.4-8%208-.9-5.6-2.4-7.1-8-8%205.6-.9%207.1-2.4%208-8Z%22%2F%3E%3C%2Fsvg%3E")} .ci-pin{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a7%207%200%200%200-7%207c0%205.2%207%2013%207%2013s7-7.8%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205z%22%2F%3E%3C%2Fsvg%3E")} .ci-building{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2021V5a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v3h7a1%201%200%200%201%201%201v12H4zm3-3h2v-2H7v2zm0-4h2v-2H7v2zm0-4h2V8H7v2zm7%208h2v-2h-2v2zm0-4h2v-2h-2v2z%22%2F%3E%3C%2Fsvg%3E")} .ci-home{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203%202%2011h3v10h6v-6h2v6h6V11h3L12%203z%22%2F%3E%3C%2Fsvg%3E")} .ci-mountain{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%2020%209%207l4%207%202-3%207%209H2z%22%2F%3E%3C%2Fsvg%3E")} .ci-flame{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202s5%204.5%205%209a5%205%200%200%201-10%200c0-2%201-3.5%202-4.5.2%202%201%203%202%203.5C11.4%208%2012%205%2012%202z%22%2F%3E%3C%2Fsvg%3E")} .ci-crane{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2020h18v2H3zM5%204h9l6%204v3h-2V9.2L14.5%206H7v12H5V4z%22%2F%3E%3C%2Fsvg%3E")} .ci-calc{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%202h12a2%202%200%200%201%202%202v16a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2zm1%203v3h10V5H7zm0%206h3v3H7zm5.5%200h3v3h-3zM7%2016h3v3H7zm5.5%200h3v3h-3z%22%2F%3E%3C%2Fsvg%3E")} .ci-swap{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205V2L8%206l4%204V7a5%205%200%201%201-5%205H5a7%207%200%201%200%207-7z%22%2F%3E%3C%2Fsvg%3E")} .ci-leaf{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%204C10%204%204%209%204%2016c0%202%201%204%201%204s2-6%209-8c-5%203-7%208-7%208%208%200%2013-6%2013-16z%22%2F%3E%3C%2Fsvg%3E")} .ci-phone{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.6%2010.8a15%2015%200%200%200%206.6%206.6l2.2-2.2a1%201%200%200%201%201-.25%2011.4%2011.4%200%200%200%203.6.6%201%201%200%200%201%201%201V20a1%201%200%200%201-1%201A17%2017%200%200%201%203%204a1%201%200%200%201%201-1h3.5a1%201%200%200%201%201%201c0%201.25.2%202.45.57%203.57a1%201%200%200%201-.25%201l-2.22%202.23z%22%2F%3E%3C%2Fsvg%3E")} .ci-mail{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%205h20v14H2V5zm2%202v.4l8%205%208-5V7H4zm16%203.7-8%205-8-5V17h16v-6.3z%22%2F%3E%3C%2Fsvg%3E")} .ci-cal{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%202v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-2V2h-2v2H9V2H7zM5%2010h14v10H5V10z%22%2F%3E%3C%2Fsvg%3E")} .ci-chat{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%203h16a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H9l-5%204v-4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E")} .ci-alert{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202%201%2021h22L12%202zm0%206%206.6%2011.4H5.4L12%208zm-1%204v4h2v-4h-2zm0%205v2h2v-2h-2z%22%2F%3E%3C%2Fsvg%3E")} .ci-check{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1.2%2014.4L6%2011.6%207.4%2010.2l3.4%203.4%205.8-5.8L18%209.2l-7.2%207.2z%22%2F%3E%3C%2Fsvg%3E")} .ci-money{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm.9%2015.3v1.2h-1.6v-1.2c-1.6-.2-2.7-1.1-2.8-2.5h1.7c.1.7.7%201.2%201.9%201.2%201.1%200%201.7-.5%201.7-1.1%200-.6-.4-.9-1.9-1.3-2-.5-3.1-1.1-3.1-2.6%200-1.3%201-2.2%202.5-2.4V6.5h1.6v1.2c1.5.2%202.5%201.1%202.6%202.4h-1.7c-.1-.7-.6-1.1-1.6-1.1-1%200-1.6.4-1.6%201%200%20.6.5.8%202%201.2%202%20.5%203%201.2%203%202.7%200%201.3-1%202.2-2.7%202.4z%22%2F%3E%3C%2Fsvg%3E")} .ci-key{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%202a6%206%200%200%200-5.7%208L2%2016.3V21h4.7v-2h2v-2h2l1.9-1.9A6%206%200%201%200%2014%202zm2%205.5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200z%22%2F%3E%3C%2Fsvg%3E")} .ci-parking{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%203h6.5a5%205%200%200%201%200%2010H10v8H6V3zm4%203.6v3.8h2.2a1.9%201.9%200%200%200%200-3.8H10z%22%2F%3E%3C%2Fsvg%3E")} .ci-ruler{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%2015.5%208.5%2022%2022%208.5%2015.5%202%202%2015.5zm4-1.9%201.6%201.6%201.4-1.4-1.6-1.6%201.4-1.4%201.6%201.6%201.4-1.4L11.2%209l1.4-1.4%201.6%201.6%201.4-1.4-1.6-1.6%201.5-1.5%204%204L8.5%2019.2l-4-4L6%2013.6z%22%2F%3E%3C%2Fsvg%3E")} .ci-hash{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%203%208.3%207H4v2h3.9l-.7%204H3v2h3.9L6%2021h2l.9-4h4l-.9%204h2l.9-4H17v-2h-4.1l.7-4H18V9h-4.1L15%203h-2l-.9%204h-4L9%203zm-.4%206h4l-.7%204h-4l.7-4z%22%2F%3E%3C%2Fsvg%3E")} .ci-bed{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%207h2v6h16v5h-2v-3H5v3H3V7zm4%201a2.5%202.5%200%201%201%200%205%202.5%202.5%200%200%201%200-5zM11%208h6a3%203%200%200%201%203%203v1h-9V8z%22%2F%3E%3C%2Fsvg%3E")} .ci-compass{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm3.5%206.5-2.4%205.6-5.6%202.4%202.4-5.6%205.6-2.4z%22%2F%3E%3C%2Fsvg%3E")} .ci-case{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%203h6a2%202%200%200%201%202%202v2h4v12H3V7h4V5a2%202%200%200%201%202-2zm0%204h6V5H9v2z%22%2F%3E%3C%2Fsvg%3E")} .ci-sofa{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%209V7a3%203%200%200%201%206%200v2h4V7a3%203%200%200%201%206%200v2a2%202%200%200%201%202%202v6h-2v2h-2v-2H6v2H4v-2H2v-6a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E")} .ci-city{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2021V9l5-3v3l5-3v4h8v11H3zm3-3h2v-2H6v2zm5%200h2v-2h-2v2zm5%200h2v-2h-2v2z%22%2F%3E%3C%2Fsvg%3E")} .ci-user{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012a5%205%200%201%200%200-10%205%205%200%200%200%200%2010zm0%202c-5%200-9%202.5-9%205.5V22h18v-2.5c0-3-4-5.5-9-5.5z%22%2F%3E%3C%2Fsvg%3E")} .ci-chart{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2021V3h2v16h16v2H3zm4-3V11h3v7H7zm5%200V7h3v11h-3zm5%200v-5h3v5h-3z%22%2F%3E%3C%2Fsvg%3E")} .ci-pen{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2017.2V21h3.8L17.9%209.9l-3.8-3.8L3%2017.2zM20.7%207.1a1%201%200%200%200%200-1.4l-2.4-2.4a1%201%200%200%200-1.4%200l-1.9%201.9%203.8%203.8%201.9-1.9z%22%2F%3E%3C%2Fsvg%3E")} .ci-star{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l2.9%206.3%206.9.8-5.1%204.7%201.4%206.8L12%2017.3%205.9%2020.6l1.4-6.8L2.2%209.1l6.9-.8L12%202z%22%2F%3E%3C%2Fsvg%3E")} .ci-dot{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%206a6%206%200%201%200%200%2012%206%206%200%200%200%200-12z%22%2F%3E%3C%2Fsvg%3E")} .ci-wave{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%2015c2-2%204-2%206%200s4%202%206%200%204-2%206%200v3c-2-2-4-2-6%200s-4%202-6%200-4-2-6%200v-3zm0-6c2-2%204-2%206%200s4%202%206%200%204-2%206%200v3c-2-2-4-2-6%200s-4%202-6%200-4-2-6%200V9z%22%2F%3E%3C%2Fsvg%3E")} .ci-drop{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202s6%207%206%2011a6%206%200%200%201-12%200c0-4%206-11%206-11z%22%2F%3E%3C%2Fsvg%3E")} .ci-wifi{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2018a2%202%200%201%200%200%204%202%202%200%200%200%200-4zM5.6%2012.6%204.2%2011.2a11%2011%200%200%201%2015.6%200l-1.4%201.4a9%209%200%200%200-12.8%200zm3%203L7.2%2014.2a7%207%200%200%201%209.6%200l-1.4%201.4a5%205%200%200%200-6.8%200z%22%2F%3E%3C%2Fsvg%3E")} .ci-bolt{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13%202%204%2014h6l-1%208%209-12h-6l1-8z%22%2F%3E%3C%2Fsvg%3E")} .ci-bell{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a6%206%200%200%200-6%206v4l-2%203v1h16v-1l-2-3V8a6%206%200%200%200-6-6zm0%2020a3%203%200%200%200%203-3H9a3%203%200%200%200%203%203z%22%2F%3E%3C%2Fsvg%3E")} .ci-shield{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202%204%205v6c0%205%203.4%209.4%208%2011%204.6-1.6%208-6%208-11V5l-8-3z%22%2F%3E%3C%2Fsvg%3E")} .ci-book{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%200%201%202-2h13v18H6a2%202%200%200%200-2%202V4zm2%200v14h11V4H6z%22%2F%3E%3C%2Fsvg%3E")} .ci-link{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.5%2013.5a4%204%200%200%200%205.7%200l3-3a4%204%200%201%200-5.7-5.7l-1.3%201.3%201.4%201.4L14%206.2a2%202%200%201%201%202.8%202.8l-3%203a2%202%200%200%201-2.8%200l-1.5%201.5zm5-3a4%204%200%200%200-5.7%200l-3%203a4%204%200%201%200%205.7%205.7l1.3-1.3-1.4-1.4L10%2017.8A2%202%200%201%201%207.2%2015l3-3a2%202%200%200%201%202.8%200l1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")} .ci-train{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%202h12a3%203%200%200%201%203%203v9a3%203%200%200%201-3%203l2%204h-2l-2-4H8l-2%204H4l2-4a3%203%200%200%201-3-3V5a3%203%200%200%201%203-3zm-1%205v4h14V7H5zm3%208a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm8%200a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3z%22%2F%3E%3C%2Fsvg%3E")} .ci-bag{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%207V6a5%205%200%200%201%2010%200v1h3v15H4V7h3zm2%200h6V6a3%203%200%200%200-6%200v1z%22%2F%3E%3C%2Fsvg%3E")} .ci-cap{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203%201%209l11%206%209-4.9V17h2V9L12%203zM5%2013.2V17c0%201.7%203.1%203%207%203s7-1.3%207-3v-3.8l-7%203.8-7-3.8z%22%2F%3E%3C%2Fsvg%3E")} .ci-gym{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%2010h2v4H2zm3-2h3v8H5zm4%203h6v2H9zm7-3h3v8h-3zm4%202h2v4h-2z%22%2F%3E%3C%2Fsvg%3E")} .ci-lock{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%2010V8a6%206%200%201%201%2012%200v2h2v12H4V10h2zm2%200h8V8a4%204%200%200%200-8%200v2z%22%2F%3E%3C%2Fsvg%3E")} .ci-moon{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13%202a9.5%209.5%200%201%200%209%2012A8%208%200%200%201%2013%202z%22%2F%3E%3C%2Fsvg%3E")} .ci-sunrise{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203l4%204h-3v4h-2V7H8l4-4zM2%2015h20v2H2zm3%204h14v2H5z%22%2F%3E%3C%2Fsvg%3E")} .ci-medal{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%202h8l-2%206h-4L8%202zm4%207a6%206%200%201%200%200%2012%206%206%200%200%200%200-12zm0%203%201.2%202.4%202.6.4-1.9%201.8.4%202.6-2.3-1.2-2.3%201.2.4-2.6L8.2%2015l2.6-.4L12%2012z%22%2F%3E%3C%2Fsvg%3E")} .ci-inbox{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%204h16v11h-5a3%203%200%200%201-6%200H4V4zm0%2013h4.4a5%205%200%200%200%207.2%200H20v3H4v-3z%22%2F%3E%3C%2Fsvg%3E")} .ci-mobile{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%202h10a2%202%200%200%201%202%202v16a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2zm0%204v12h10V6H7zm5%2013a1%201%200%201%200%200%202%201%201%200%200%200%200-2z%22%2F%3E%3C%2Fsvg%3E")} .ci-window{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%203h16v18H4V3zm2%202v6h5V5H6zm7%200v6h5V5h-5zM6%2013v6h5v-6H6zm7%200v6h5v-6h-5z%22%2F%3E%3C%2Fsvg%3E")} .ci-brick{--ci:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%204h20v5H2V4zm0%206h20v5H2v-5zm0%206h20v4H2v-4z%22%2F%3E%3C%2Fsvg%3E")} .uknav-ic .ci,.cb-icon .ci{font-size:15px} /* ============================================================================ ACCESSIBILITY ========================================================================== */ /* ============================================================================ FORMS — paper wells with a bronze hairline that warms on focus. ========================================================================== */ input,select,textarea{background:var(--lo-ivory);border:1px solid var(--lo-clay); color:var(--lo-ink);font-family:var(--lo-sans)} input:focus,select:focus,textarea:focus{border-color:var(--lo-bronze); box-shadow:0 0 0 3px rgba(213,170,162,.22);outline:none} ::selection{background:var(--lo-gold);color:var(--lo-espresso)} /* ============================================================================ ACCESSIBILITY ========================================================================== */ a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible, textarea:focus-visible,summary:focus-visible{outline:2px solid var(--lo-bronze-d); outline-offset:3px;border-radius:1px} /* ============================================================================ CLIENT TONE — 2026-09-13 The client supplied a reference (DMCI-LEA-ORTEGA-DOCS/client-assets/ sample_site_color_tone.jpg) and asked for it matched exactly: blush paper #f6efea, a warm-brown serif headline, a letter-spaced sans kicker in dusty rose, grey-brown reading copy, and a rose button (#d5aaa2) with brown serif text. The palette tokens above were retuned to it; these rules carry the typographic half and sit last so they win. ========================================================================== */ :root{--lo-mono:'Instrument Sans',system-ui,-apple-system,sans-serif} h1,h2,h3,h4,.hero-title,.section-title,.cx-panel-name,.cx-card-name, .blog-card-title,.uknav-txt strong{font-weight:400; font-variation-settings:'SOFT' 0,'WONK' 0} /* primary buttons: the reference's rose tablet with a brown serif label */ .btn-primary,a.btn-primary,button.btn-primary,.uknav-cta,.cx-btn,.uk-bookbar-btn{ background:#d5aaa2!important;color:#3d2a24!important;clip-path:none; border-radius:4px!important;box-shadow:none!important; font-family:var(--lo-display)!important;font-weight:500;letter-spacing:0; text-transform:none;font-variation-settings:'SOFT' 0,'WONK' 0} .btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover,.uknav-cta:hover, .cx-btn:hover,.uk-bookbar-btn:hover{background:#cb9c93!important;color:#2a1a13!important; box-shadow:0 12px 28px -16px rgba(140,94,86,.55)!important} .btn-outline,a.btn-outline{clip-path:none;border-radius:4px!important; font-family:var(--lo-display)!important;letter-spacing:0;text-transform:none} .uknav-cta{font-size:15px!important} .uknav-promo-pill{background:var(--lo-bronze-d)!important} .blog-cat-badge{background:var(--lo-bronze-d)!important} /* the client's logo is wide; give it room to be read */ .uknav-logo img{height:50px} .footer-brand img{height:60px} /* ============================================================================ PORTRAITS — one photograph, every slot. The face sits at 49.6% across and 22% down the frame, so anchoring the crop near the top keeps the face in the upper third of any box, wide or tall, and centred across it. Pages inherited a "center 20%" rule that crops the forehead in wide boxes; this overrides it. ========================================================================== */ img[src*="assets/lea-ortega."]{object-fit:cover!important; object-position:50% 8%!important} img[src*="assets/lea-ortega-sq."]{object-fit:cover!important; object-position:50% 40%!important} /* the nav call to action: the source pages set it in caps with a stronger selector, so it is matched here with one of its own */ .uknav .uknav-cta,.uknav-actions .uknav-cta{text-transform:none!important;letter-spacing:0!important; font-family:var(--lo-display)!important} /* outline buttons that sit on a photographic hero read light, not ink */ .hero-cta .btn-outline,.hero .btn-outline,.cx-hero .btn-outline{color:var(--lo-ivory)!important; border-color:rgba(246,239,234,.6)!important} .hero-cta .btn-outline:hover,.hero .btn-outline:hover,.cx-hero .btn-outline:hover{ background:var(--lo-ivory)!important;color:var(--lo-ink)!important} /* the booking bar: blush glass under a hairline, the reference's buttons */ .uk-bookbar{background:rgba(246,239,234,.96)!important;border-top:1px solid var(--lo-clay)!important; box-shadow:0 -16px 36px -30px rgba(42,26,19,.55)} .uk-bookbar .uk-bookbar-txt{color:var(--lo-cocoa)} .uk-bookbar .uk-bookbar-txt b{color:var(--lo-ink)} .uk-bookbar .uk-bookbar-btn{font-family:var(--lo-display)!important;font-size:15px;font-weight:500; letter-spacing:0;text-transform:none;border-radius:4px} .uk-bookbar .uk-bookbar-btn.ghost{background:transparent!important;color:var(--lo-ink)!important; border:0!important;box-shadow:inset 0 0 0 1px var(--lo-taupe)!important} .uk-bookbar .uk-bookbar-btn.ghost:hover{background:var(--lo-cream)!important} .uk-bookbar .uk-bookbar-close{color:var(--lo-umber)} /* footer column heads: rose that can carry small text */ .footer .footer-col h3,.footer h3,.footer h4{color:var(--lo-bronze-d)!important} /* ============================================================================ SURFACES — the interior pages on the light ground (2026-09-13) 19_light.py rewrites every inherited colour into these variables by what it is set on. On the paper they are ink, rose and paper; inside a DARK SCOPE — an element carrying a photograph, or the section that holds a photo layer — they flip, so text over a photograph stays white without naming a single hero. ========================================================================== */ :root{--lo-fg-rgb:42 26 19;--lo-bg-rgb:246 239 234;--lo-bg2-rgb:241 230 223; --lo-bg3-rgb:234 220 211;--lo-acc:#76493f;--lo-line-rgb:140 94 86; --lo-acc-fill-rgb:213 170 162} .lo-dark,[style*="url("]:not([style*="url(data:"]):not([style*="url('data:"]):not([style*='url("data:']), :where(section,header,div,article,aside,a,figure,li):has(> [class*="bg"][style*="url("]), :where(section,header,div,article,aside,a,figure,li):has(> [class*="overlay"]), :where(section,header,div,article,aside,a,figure,li):has(> [class*="scrim"]), :where(section,header,div,article,aside,a,figure,li):has(> img[class*="hero"]), :where(section,header,div,article,aside,a,figure,li):has(> img[class*="media"]), :where(section,header,div,article,aside,a,figure,li):has(> img[class*="bg"]), :where(section,header,div,article,aside,a,figure,li):has(> picture[class*="hero"]), :where(section,header,div,article,aside,a,figure,li):has(> video){ --lo-fg-rgb:255 250 247;--lo-bg-rgb:51 35 29;--lo-bg2-rgb:42 30 25;--lo-bg3-rgb:35 26 22; --lo-acc:#f1dcd6;--lo-line-rgb:241 220 214;--lo-acc-fill-rgb:213 170 162} /* the nav's Featured panel: a light card with the name under the photo */ .uknav-fcard{background:var(--lo-cream)!important;border:1px solid var(--lo-clay)!important; overflow:hidden} .uknav-fcard .uknav-flabel{background:var(--lo-cream)!important;color:var(--lo-ink)!important; padding:9px 10px!important;position:static!important;text-shadow:none!important} .uknav-fcard:hover{border-color:var(--lo-bronze)!important} .uknav-fmore b{color:var(--lo-ink)!important} .uknav-fmore span{color:var(--lo-cocoa)!important} .uknav-fmore{background:var(--lo-linen)!important;border:1px solid var(--lo-clay)!important} .uknav-links>.uknav-item>a.uknav-promo-pill,.uknav-promo-pill,.uknav-promo-pill *{color:var(--lo-ivory)!important} /* small chrome text that inherited a taupe from the source pages */ .uknav-phone{color:var(--lo-umber)!important} .footer-bottom,.footer-bottom *{color:var(--lo-umber)!important} .cb-lbl{color:rgba(42,26,19,.8)!important} /* the lead page's own header carries the logo — give it the nav's size */ .nav-logo img{width:210px!important;height:auto!important} /* the computation header set the logo white for a dark bar; the bar is paper now */ .logo-img{filter:none!important}