/* Ulodoye V5 — tailored, light-touch motion system and editorial refinements */
:root{--ease-premium:cubic-bezier(.22,1,.36,1)}
/* SVG icons — no emoji and no external icon library. */
.line-arrow{display:inline-block;flex-shrink:0;vertical-align:-.22em;color:inherit;transition:transform .35s var(--ease-premium)}
a:hover .line-arrow,button:hover .line-arrow{transform:translate(3px,-3px)}
a:hover .line-arrow-up{transform:translateY(-3px)}
a:hover .line-arrow-down{transform:translateY(3px)}
a:hover .line-arrow-right{transform:translateX(4px)}
.head-contact .line-arrow{color:#ed3a43;width:17px;height:17px}
.head-contact{transition:background .25s,border-color .25s}.head-contact:hover{background:#231518;border-color:#d62129}
.text-action{display:inline-flex;align-items:center;gap:9px;line-height:1.5}
.btn{gap:22px}.btn .line-arrow{width:17px;height:17px}
.image-tag{gap:20px;align-items:center}.image-tag .line-arrow{color:#e43840}
.card-meta .line-arrow,.property-bottom .line-arrow{color:#e3a5a7}
.channel-row .line-arrow{color:#d92d37}.footer-contact-links a{display:inline-flex;align-items:center;gap:5px}
/* Header logo entrance: source file remains untouched */
.brand-reveal img{transform-origin:center;animation:brand-in 1s var(--ease-premium) both}
@keyframes brand-in{from{opacity:0;transform:translateY(8px) scale(.97);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
/* Entry intro applies only on first visit in session; subtle and dismissible by any click. */
.site-intro{position:fixed;inset:0;z-index:9999;background:#0a0a0b;display:grid;place-items:center;pointer-events:none;animation:intro-fade .64s var(--ease-premium) 1.08s forwards}
.site-intro img{width:min(38vw,260px);max-width:72%;filter:drop-shadow(0 10px 35px #0009);animation:intro-mark 1s var(--ease-premium) both}
.site-intro-line{width:0;height:1px;background:#db2a35;position:absolute;top:calc(50% + 77px);animation:intro-rule .85s var(--ease-premium) .18s both}
@keyframes intro-mark{from{opacity:0;transform:translateY(18px) scale(.96);filter:blur(9px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes intro-rule{to{width:min(38vw,260px)}}
@keyframes intro-fade{to{opacity:0;visibility:hidden}}
/* Carefully staggered reveals, while staying visible if scripts don't execute. */
.js-motion [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease-premium),transform .85s var(--ease-premium)}
.js-motion [data-reveal].is-visible{opacity:1;transform:none}
.js-motion .hero-copy>*{animation:hero-arrive .8s var(--ease-premium) both}
.js-motion .hero-copy>:nth-child(2){animation-delay:.10s}.js-motion .hero-copy>:nth-child(3){animation-delay:.18s}.js-motion .hero-copy>:nth-child(4){animation-delay:.27s}
@keyframes hero-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Permanent visual details: precise lines and refined light, no bright gimmicks */
.site-header{box-shadow:0 8px 28px #00000012}
.section-title{letter-spacing:-.05em}.page-head{position:relative;overflow:hidden}
.page-head .wrap{position:relative;z-index:2}
.page-head-rule{position:absolute;right:clamp(22px,5.5vw,86px);bottom:0;width:min(18vw,220px);height:2px;background:#d62129;transform-origin:right;animation:rule-in 1.1s var(--ease-premium) both}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.page-head h1{max-width:1000px}
/* Home: refined image breathing and contrast */
.page-index .hero-visual{box-shadow:0 30px 90px #0005;isolation:isolate}
.page-index .hero-visual>img{animation:hero-image-enter 1.6s var(--ease-premium) both;filter:grayscale(20%) brightness(.77)}
@keyframes hero-image-enter{from{transform:scale(1.09);opacity:.45}to{transform:scale(1);opacity:1}}
.page-index .hero-visual:hover>img{transform:scale(1.035)}
.page-index .tag-glass{border-top:1px solid #ffffff50;padding-top:15px}
/* About: cinematic asymmetrical editorial masthead */
.page-about .about-immersive{min-height:600px;display:flex;align-items:center;background:#0a0a0b}
.page-about .about-immersive .wrap{width:100%}
.page-about .about-immersive h1{max-width:720px;text-shadow:0 6px 30px #0009}
.page-about .about-immersive p{max-width:540px;color:#ddd}
.page-about .page-ambient-art{position:absolute;inset:0 0 0 38%;overflow:hidden;opacity:.42}
.page-about .page-ambient-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72)}
.page-about .page-ambient-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#09090a 0%,#09090a25 40%,#09090a4d 100%)}
.page-about .values-grid article{transition:border-color .35s,background .35s}.page-about .values-grid article:hover{border-color:#743237;background:#20181b}
/* Services: image-first alternating editorial grid, not same page rhythm */
.page-services .service-editorial-head{background:linear-gradient(115deg,#141416 0%,#110d10 55%,#2c1619 160%)}
.page-services .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.page-services .service-grid .service-card:nth-child(3n+1){grid-column:span 1}
.page-services .service-grid .service-image{height:300px}
.page-services .service-grid .service-card:nth-child(4n+2) .service-image{height:345px}
.page-services .service-grid .service-card:nth-child(4n+3){margin-top:36px}
/* Properties: quiet card treatments and larger, varied architectural photography */
.page-properties .properties-editorial-head{background:linear-gradient(100deg,#09090a 5%,#171519 65%,#271417 120%)}
.page-properties .property-grid .property-category:nth-child(even){transform:translateY(38px)}
.page-properties .property-grid{padding-bottom:38px}
.page-properties .property-category{transition:border-color .3s,box-shadow .3s}
.page-properties .property-category:hover{border-color:#a73b42;box-shadow:0 20px 55px #0006}
/* Insights: typography-led editorial journal with asymmetrical rhythm */
.page-insights .insight-editorial-head{background:radial-gradient(ellipse at 100% 0%,#3b151955,transparent 50%),#101012}
.page-insights .insight-grid{grid-template-columns:1.3fr 1fr;gap:18px}
.page-insights .insight-card{min-height:360px;position:relative;padding:clamp(26px,3.5vw,50px);overflow:hidden}
.page-insights .insight-card:first-child{grid-row:span 2;min-height:740px;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(0deg,#19191d,#231619)}
.page-insights .insight-card:first-child h2{font-size:clamp(36px,4.2vw,66px);margin:30px 0}
.page-insights .insight-card::before{content:attr(data-index);font-size:clamp(70px,11vw,180px);line-height:1;font-weight:800;position:absolute;top:16px;right:18px;color:#ffffff08;pointer-events:none;letter-spacing:-.08em}
.page-insights .insight-card:not(:first-child) h2{margin-top:45px}
/* Contact: functional editorial directory / legible form */
.page-contact .contact-editorial-head{background:radial-gradient(ellipse at 80% 100%,#3113157a,transparent 58%),#0b0b0d}
.page-contact .channel-row{transition:padding-left .3s,border-color .3s,background .3s}.page-contact .channel-row:hover{border-color:#a33138;padding-left:12px}
.page-contact .contact-form{box-shadow:0 22px 70px #0003}
/* Hover and visual stability */
.service-card,.property-category,.insight-card{overflow:hidden}
.service-card:hover img,.property-category:hover img{transition-duration:.85s}
@media(max-width:900px){.page-about .about-immersive{min-height:540px}.page-services .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-services .service-grid .service-image{height:230px}.page-properties .property-grid .property-category:nth-child(even){transform:none}.page-insights .insight-card:first-child{min-height:460px}}
@media(max-width:600px){.page-about .about-immersive{min-height:500px}.page-about .page-ambient-art{inset:0 0 0 13%;opacity:.23}.page-services .service-grid{grid-template-columns:1fr}.page-services .service-grid .service-card:nth-child(4n+3){margin-top:0}.page-services .service-grid .service-card:nth-child(4n+2) .service-image{height:245px}.page-properties .property-grid{padding-bottom:0}.page-insights .insight-grid{grid-template-columns:1fr}.page-insights .insight-card:first-child{grid-row:auto;min-height:440px}.page-insights .insight-card:first-child h2{font-size:clamp(31px,8vw,46px)}.page-head-rule{width:92px}.site-intro-line{top:calc(50% + 65px)}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none!important}.brand-reveal img,.page-head-rule,.page-index .hero-visual>img,.js-motion .hero-copy>*{animation:none!important}.js-motion [data-reveal]{opacity:1;transform:none;transition:none!important}}
/* About page: distinct editorial company charter, powered by optional CMS fields. */
.about-story p + p { margin-top: 1rem; }
.about-charter { border-top: 1px solid rgba(255,255,255,.09); }
.charter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,42px); margin-top:clamp(34px,5vw,72px); }
.charter-grid article { border-top:1px solid rgba(229,39,52,.75); padding-top:25px; }
.charter-no { color:#e22a36; letter-spacing:.18em; font-size:12px; font-weight:700; }
.charter-grid h3 { font-size:clamp(22px,2.3vw,31px); line-height:1.15; letter-spacing:-.035em; margin:22px 0 15px; }
.charter-grid p { line-height:1.75; font-size:clamp(15px,1.15vw,17px); color:#b6b6bd; max-width:45ch; }
@media(max-width:800px) { .charter-grid { grid-template-columns:1fr; gap:32px; } .charter-grid article { padding-top:18px; } }