/* v=20260729a */ /* ===== BENJELLOUN & PARTNERS — dark / enterprise / dramatic ===== Section-per-block: every
= one Elementor section. Tone grounded in the brochure: near-black ink, signature gold, bone text. */ @font-face{ font-family:"BastligaOne"; src:url("fonts/BastligaOne.woff2") format("woff2"); font-weight:normal;font-style:normal;font-display:swap; } :root{ --ink:#0E0D0B; --ink2:#000000; --panel:#15120D; --panel2:#1B1813; --gold:#B8924A; --gold-lt:#D4AF6A; --bone:#F4F0E7; --bone-dim:#CFC8B8; --muted:#8A8174; --line:#2A261D; --line-lt:#3A352B; --maxw:1280px; --pad:clamp(20px,5vw,80px); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--bone);background:var(--ink);line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* ---------- typography ---------- */ h1,h2,h3{font-weight:300;line-height:1.06;letter-spacing:-.015em} .eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:400} .script{font-family:"BastligaOne",cursive;color:var(--gold);font-weight:400;letter-spacing:0} .the-script{display:inline-flex;align-items:baseline;gap:.32em} .the-script .the{font-size:.42em;text-transform:uppercase;letter-spacing:.3em;color:var(--bone-dim);transform:translateY(-.15em)} .gold{color:var(--gold)} .lead{font-size:clamp(16px,1.55vw,20px);color:var(--bone-dim);font-weight:300;max-width:62ch} .display{font-size:clamp(40px,7vw,104px);letter-spacing:-.025em;line-height:.98} /* ---------- header ---------- */ .site-head{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent;padding:6px 0} .site-head.scrolled{background:rgba(14,13,11,.86);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)} .site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:74px} .brand-logo{height:40px;width:auto;display:block} .nav{display:flex;gap:0;align-items:center;flex:1;justify-content:space-between;margin-left:56px} .nav .cta{margin-left:8px} .nav a{font-size:13px;letter-spacing:.05em;color:var(--bone-dim);transition:color .25s;position:relative} .nav a:hover,.nav a.active{color:var(--bone)} .nav a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .3s} .nav a:not(.cta):hover::after,.nav a.active::after{width:100%} .nav .cta{border:1px solid var(--gold);color:var(--gold);padding:10px 20px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;transition:.3s} .nav .cta:hover{background:var(--gold);color:var(--ink)} .nav .cta::after{display:none} /* Dropdown groups (News, Contact) */ .nav .has-sub{position:relative;display:inline-flex;align-items:center;line-height:inherit} .nav .has-sub>.navparent{position:relative;display:inline-block;line-height:inherit} .nav .has-sub>.navparent::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .3s} .nav .has-sub>.navparent:hover::after,.nav .has-sub>.navparent.active::after{width:100%} .nav .subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px); min-width:150px;background:rgba(14,13,11,.96);backdrop-filter:blur(14px) saturate(1.3); border:1px solid var(--line);padding:8px 0;display:flex;flex-direction:column;gap:0; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s;z-index:120} .nav .subnav::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} /* hover bridge */ .nav .has-sub:hover>.subnav,.nav .has-sub:focus-within>.subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(4px)} .nav .subnav a{padding:9px 22px;font-size:12.5px;letter-spacing:.05em;white-space:nowrap;text-align:left} .nav .subnav a::after{display:none} .nav .subnav a:hover{color:var(--gold)} .burger{display:none;background:none;border:0;color:var(--bone);font-size:24px;cursor:pointer;z-index:101} /* ---------- sections ---------- */ .ep-section{padding:clamp(72px,11vw,150px) 0;position:relative} .ep-section.tight{padding:clamp(44px,6vw,76px) 0} .ep-section.black{background:var(--ink2)} .ep-section.panel{background:var(--panel)} .ep-section.bone{background:var(--bone);color:var(--ink)} .ep-section.bone .eyebrow{color:#9A7B36} .ep-section.bone .lead{color:#4A4438} .ep-section.bone .the-script .the{color:#7A715F} .section-head{margin-bottom:clamp(34px,5vw,64px)} .section-title{font-size:clamp(30px,5vw,64px);letter-spacing:-.02em} .section-title .l2{display:block} /* ---------- hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--ink2)} .hero .media{position:absolute;inset:0;z-index:0} .hero .media video,.hero .media img{width:100%;height:100%;object-fit:cover;opacity:.82} .hero::after{content:"";position:absolute;inset:0;z-index:1;background: linear-gradient(90deg,rgba(14,13,11,.88) 0%,rgba(14,13,11,.6) 45%,rgba(14,13,11,.32) 75%,rgba(14,13,11,.18) 100%), linear-gradient(180deg,rgba(14,13,11,.4) 0%,transparent 30%,transparent 55%,rgba(14,13,11,.72) 100%)} .hero .wrap{position:relative;z-index:2;width:100%;padding-top:max(96px,calc(env(safe-area-inset-top) + 96px));padding-bottom:60px} .hero h1.display{text-shadow:0 2px 28px rgba(14,13,11,.55),0 1px 4px rgba(14,13,11,.4)} .hero .eyebrow{margin-bottom:26px;opacity:0;animation:fadeUp 1s .2s forwards} .hero h1{opacity:0;animation:fadeUp 1.1s .4s forwards} .hero .sub{margin-top:30px;font-size:clamp(15px,1.7vw,20px);max-width:50ch;color:var(--bone-dim);opacity:0;animation:fadeUp 1.1s .7s forwards} .hero .actions{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeUp 1.1s .95s forwards} .scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;color:var(--bone-dim);font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:fadeIn 1s 1.4s forwards;display:flex;flex-direction:column;align-items:center;gap:10px} .scroll-cue .bar{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:scrollBar 2s infinite} /* ---------- buttons ---------- */ .btn{display:inline-block;padding:15px 32px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.35s;position:relative;overflow:hidden} .btn-gold{background:var(--gold);color:var(--ink);font-weight:500} .btn-gold:hover{background:var(--gold-lt);transform:translateY(-2px)} .btn-ghost{border:1px solid rgba(244,240,231,.35);color:var(--bone)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .btn-ink{background:var(--ink);color:var(--bone)} .btn-ink:hover{background:var(--panel2);transform:translateY(-2px)} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:end} .stat{padding:14px 26px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end} .stat:first-child{border-left:0;padding-left:0} .stat .n{font-size:clamp(40px,6vw,76px);color:var(--gold);font-weight:200;letter-spacing:-.04em;line-height:1} .stat .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:12px} .bone .stat{border-color:#D9D2C2} .bone .stat .n{color:var(--gold)} /* ---------- founder ---------- */ .founder{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center} .founder .portrait{position:relative;overflow:hidden} .founder .portrait img{width:100%;height:auto;filter:grayscale(1) contrast(1.04)} .founder .portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(14,13,11,.5))} .founder .sig{font-family:"BastligaOne",cursive;font-size:clamp(40px,6vw,72px);color:var(--gold);line-height:1;margin:8px 0 0} .founder blockquote{font-size:clamp(20px,2.4vw,32px);font-weight:300;line-height:1.3;color:var(--bone);letter-spacing:-.01em;margin:0} .founder blockquote .gold{font-style:normal} .pull{font-size:clamp(22px,3vw,40px);font-weight:200;line-height:1.25;letter-spacing:-.015em} /* ---------- approach pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .pillar{background:var(--ink);padding:clamp(28px,3.5vw,48px);transition:background .4s} .pillar:hover{background:var(--panel)} .pillar .px{font-size:12px;letter-spacing:.2em;color:var(--gold);font-weight:400} .pillar h3{font-size:clamp(20px,2.2vw,27px);margin:16px 0 14px;font-weight:300} .pillar p{font-size:14.5px;color:var(--bone-dim);line-height:1.65} /* ---------- projects ---------- */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .filters button{background:none;border:1px solid var(--line-lt);padding:10px 20px;font-size:12px;letter-spacing:.08em;cursor:pointer;color:var(--bone-dim);transition:.3s;font-family:inherit;text-transform:uppercase} .filters button.active,.filters button:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)} .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)} .card{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/5;cursor:pointer} .card img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s} .card:hover img{transform:scale(1.07);opacity:1} .card .meta{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 24px;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85));transition:background .4s} .card .cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateY(8px);transition:.4s} .card:hover .cat{opacity:1;transform:none} .card .nm{font-size:19px;margin-top:6px;font-weight:300} .card .loc{font-size:12px;color:var(--bone-dim);margin-top:3px} .card.feat{aspect-ratio:16/10} .badge{position:absolute;top:16px;left:16px;z-index:3;background:var(--gold);color:var(--ink);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;font-weight:600} .feat-row{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,1fr);grid-auto-rows:1fr;gap:clamp(8px,1vw,14px)} .feat-row .card:nth-child(1){grid-column:1;grid-row:1}.feat-row .card:nth-child(2){grid-column:1;grid-row:2} /* ---------- services ---------- */ .svc-list{border-top:1px solid var(--line)} .svc-row{display:grid;grid-template-columns:80px 1fr 1.4fr;gap:30px;padding:clamp(26px,3vw,42px) 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .4s} .svc-row:hover{padding-left:14px} .svc-row .no{font-size:13px;color:var(--gold);letter-spacing:.1em} .svc-row h3{font-size:clamp(21px,2.4vw,30px);font-weight:300} .svc-row p{font-size:14.5px;color:var(--bone-dim)} /* ---------- team ---------- */ .team-group{margin-bottom:60px} .team-group .gh{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:34px} .team-group .gn{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500} .team-group .gc{font-size:12.5px;color:var(--muted)} .tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px)} .person .ph{aspect-ratio:1/1;background:var(--panel2);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:30px;font-weight:200;overflow:hidden;position:relative} .person.lead-card .ph{aspect-ratio:3/4} .person .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .person .nm{font-size:14px;margin-top:12px;font-weight:400} .person .rl{font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;margin-top:4px} /* ---------- recognition ---------- */ .awards{border-top:1px solid var(--line)} .award-row{display:grid;grid-template-columns:1fr auto;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center} .award-row h3{font-size:clamp(17px,1.9vw,23px);font-weight:300} .award-row .for{font-size:13px;color:var(--muted);margin-top:3px} .award-row .res{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;white-space:nowrap} .award-row .res.won{background:var(--gold);color:var(--ink);font-weight:600} .award-row .res.nom{border:1px solid var(--line-lt);color:var(--bone-dim)} .press-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .press-strip .p{background:var(--ink);padding:26px 12px;text-align:center;font-size:12.5px;letter-spacing:.04em;color:var(--bone-dim);display:flex;align-items:center;justify-content:center;min-height:78px;transition:.3s} .press-strip .p:hover{background:var(--panel);color:var(--gold)} .bone .press-strip{background:#D9D2C2;border-color:#D9D2C2} .bone .press-strip .p{background:var(--bone);color:#4A4438} /* ---------- feature rows ---------- */ .feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center} .feature.rev .ftxt{order:2} .feature .fimg{overflow:hidden;aspect-ratio:5/4;background:var(--panel)} .feature .fimg img{width:100%;height:100%;object-fit:cover} /* ---------- logos wall ---------- */ .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .logos .lg{background:var(--ink);min-height:165px;display:flex;align-items:center;justify-content:center;padding:30px 24px;transition:background .3s} .logos .lg img{max-width:100%;max-height:87px;width:auto;height:auto;object-fit:contain;opacity:.55;transition:opacity .3s} .logos .lg:hover{background:var(--panel)} .logos .lg:hover img{opacity:1} /* ---------- CTA ---------- */ .cta-band{text-align:center} .cta-band h2{font-size:clamp(28px,4.5vw,58px);max-width:20ch;margin:0 auto .5em;font-weight:300} /* ---------- forms ---------- */ .form{display:grid;gap:14px;max-width:520px} .form input,.form textarea,.form select{font-family:inherit;font-size:15px;padding:15px 18px;border:1px solid var(--line-lt);background:var(--panel);color:var(--bone)} .form input::placeholder,.form textarea::placeholder{color:var(--muted)} .form textarea{min-height:130px;resize:vertical} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)} .cinfo .row{padding:20px 0;border-bottom:1px solid var(--line)} .cinfo .row .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .cinfo .row .v{font-size:16px;margin-top:6px;color:var(--bone)} /* ---------- footer ---------- */ .site-foot{background:var(--ink2);padding:clamp(56px,8vw,100px) 0 40px;border-top:1px solid var(--line)} .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:46px;padding-bottom:46px;border-bottom:1px solid var(--line)} .foot-logo{height:185px;width:auto;margin-bottom:18px} .foot-tag{font-size:12px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase} .award-badge{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;margin-top:20px} .fcol h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;font-weight:500} .fcol a{display:block;font-size:14px;padding:6px 0;color:var(--bone-dim);transition:color .25s} .fcol a:hover{color:var(--gold)} .fcol.explore{display:flex;flex-direction:column} .fcol.explore a{display:inline-block} .fcol.explore .explore-links{display:grid;grid-template-columns:1fr 1fr;gap:0 28px} .foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;gap:12px} /* ---------- animations ---------- */ @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes scrollBar{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} .js-anim .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .js-anim .reveal.in{opacity:1;transform:none} /* project grid cards: gentle reveal, but failsafe so a filtered/All view is never stuck invisible */ .js-anim .pgrid .card{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease} .js-anim .pgrid .card.in{opacity:1;transform:none} .js-anim .reveal-stagger>*{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)} .js-anim .reveal-stagger.in>*{opacity:1;transform:none} .js-anim .reveal-stagger.in>*:nth-child(2){transition-delay:.08s} .js-anim .reveal-stagger.in>*:nth-child(3){transition-delay:.16s} .js-anim .reveal-stagger.in>*:nth-child(4){transition-delay:.24s} .js-anim .reveal-stagger.in>*:nth-child(5){transition-delay:.32s} .js-anim .reveal-stagger.in>*:nth-child(6){transition-delay:.4s} @media (prefers-reduced-motion:reduce){ .js-anim .reveal,.js-anim .reveal-stagger>*{opacity:1!important;transform:none!important;transition:none} .hero .eyebrow,.hero h1,.hero .sub,.hero .actions,.scroll-cue{animation:none;opacity:1} .card img,.scroll-cue .bar{transition:none;animation:none} } /* ---------- responsive ---------- */ @media(max-width:1000px){ .founder,.feature,.contact-grid{grid-template-columns:1fr;gap:36px} .feature.rev .ftxt{order:0} .pillars{grid-template-columns:1fr} .pgrid,.tgrid{grid-template-columns:repeat(2,1fr)} .logos,.press-strip{grid-template-columns:repeat(3,1fr)} .stats{grid-template-columns:repeat(2,1fr);gap:28px 0} .stat{padding:14px 20px;border-left:0;text-align:center;align-items:center} .stat:first-child{padding-left:20px} .feat-row{grid-template-columns:1fr 1fr} .feat-row{grid-template-rows:none}.feat-row .card:nth-child(1),.feat-row .card:nth-child(2){grid-row:auto;grid-column:1/3} .svc-row{grid-template-columns:50px 1fr;gap:8px 20px} .svc-row p{grid-column:2} .foot-top{grid-template-columns:1fr 1fr;gap:32px} } /* ---------- Mobile menu (burger) ---------- */ @media(max-width:1000px){ .burger{display:block} .nav{ position:fixed; inset:0; width:100%; height:100%; height:100dvh; flex:none; margin-left:0; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding:84px 24px 40px; background:#0E0D0B; /* solid opaque, no bleed-through */ overflow-y:auto; /* scroll if items exceed screen */ -webkit-overflow-scrolling:touch; transform:translateX(100%); transition:transform .4s ease; z-index:100; /* above page content, below burger(101) */ display:flex; } .nav.open{transform:none} .nav a{font-size:18px;padding:13px 12px;width:100%;text-align:center;max-width:340px} .nav .cta{margin-top:10px} /* dropdown groups become stacked items on mobile (no hover) */ .nav .has-sub{flex-direction:column;width:100%;max-width:340px;align-items:center;gap:0} .nav .has-sub>.navparent{width:100%;text-align:center} .nav .subnav{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; background:none;backdrop-filter:none;border:0;padding:0 0 6px;min-width:0;width:100%;align-items:center} .nav .subnav::before{display:none} .nav .subnav a{text-align:center;font-size:15px;padding:9px 12px;color:var(--muted)} } @media(max-width:600px){ .pgrid,.tgrid,.logos,.press-strip{grid-template-columns:1fr 1fr} .stats{grid-template-columns:1fr 1fr} .feat-row{grid-template-columns:1fr;grid-auto-rows:auto} .feat-row .card:nth-child(1),.feat-row .card:nth-child(2){grid-column:auto} .foot-top{grid-template-columns:1fr} } /* script-over-image band (brochure signature device) */ .script-band{position:relative;min-height:clamp(380px,55vh,620px);display:flex;align-items:center;justify-content:center;overflow:hidden} .script-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1)} .script-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(14,13,11,.4),rgba(14,13,11,.85))} .script-band-text{position:relative;z-index:2;text-align:center;padding:0 24px} .aspire-band{position:relative;width:100%;line-height:0} .aspire-band img{width:100%;height:auto;display:block;object-fit:cover} /* ---------- Foundation: Record (big figures) ---------- */ .record-list{border-top:1px solid var(--line)} .record-row{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:8px 36px;align-items:baseline;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line)} .record-row .fig{font-size:clamp(40px,6vw,72px);font-weight:200;line-height:1;color:var(--bone);letter-spacing:-.02em} .record-row .rmeta h3{font-size:clamp(16px,1.7vw,20px);font-weight:400;color:var(--gold);margin-bottom:6px} .record-row .rmeta p{font-size:14px;color:var(--bone-dim);line-height:1.5} @media(max-width:720px){ .record-row{grid-template-columns:1fr;gap:6px} .record-row .fig{font-size:clamp(38px,12vw,56px)} } /* ---------- News: text cards (no image) ---------- */ .news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .news-card{display:block;background:var(--panel);padding:30px 28px 34px;transition:background .4s} .news-card:hover{background:#1b1813} .news-card .ncat{display:inline-block;background:var(--gold);color:var(--ink);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;font-weight:600} .news-card .nkick{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:18px} .news-card h3{font-size:clamp(18px,1.7vw,21px);font-weight:300;margin-top:8px;line-height:1.3;color:var(--bone)} .news-card p{font-size:14px;color:var(--bone-dim);margin-top:12px;line-height:1.55} .news-card .nmore{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:18px;display:inline-block} /* ---------- CTA band: center the lead paragraph + button stack ---------- */ .cta-band .lead{max-width:54ch;margin-left:auto;margin-right:auto} .cta-band > div{display:flex;justify-content:center} /* ---------- Careers: CV attach field ---------- */ .filefield{display:flex;flex-direction:column;gap:8px} .filefield .flabel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .filefield input[type=file]{font-family:inherit;font-size:14px;color:var(--bone-dim);padding:12px 14px;border:1px dashed var(--line-lt);background:var(--panel);cursor:pointer} .filefield input[type=file]::file-selector-button{font-family:inherit;background:var(--gold);color:var(--ink);border:0;padding:9px 16px;margin-right:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:.3s} .filefield input[type=file]::file-selector-button:hover{background:var(--gold-lt)} .filefield .fhint{font-size:12px;color:var(--muted)} /* ---------- Project galleries ---------- */ .gallery{column-count:2;column-gap:14px} .gallery .gitem{position:relative;overflow:hidden;background:var(--panel);break-inside:avoid;-webkit-column-break-inside:avoid;display:block;margin:0 0 14px} .gallery .gitem:first-child:nth-last-child(odd){column-span:all;-webkit-column-span:all} .gallery .gitem img{width:100%;height:auto;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)} .gallery .gitem:hover img{transform:scale(1.04)} @media(max-width:700px){.gallery{column-count:1}.gallery .gitem:first-child:nth-last-child(odd){column-span:none;-webkit-column-span:none}} .form-status{font-size:14px;line-height:1.5;margin-top:4px;min-height:1.2em} .form-status.ok{color:var(--gold)} .form-status.err{color:#d98a6a} /* ===== MOTION LAYER (appended) ===== */ /* ============================================================ B&P MOTION LAYER — architectural · cinematic · editorial Layered reveal system. Everything respects prefers-reduced-motion. Refined easing: cubic-bezier(.19,1,.22,1) = slow, weighted settle. ============================================================ */ :root{ --ease-arch: cubic-bezier(.19,1,.22,1); --ease-soft: cubic-bezier(.16,1,.3,1); } /* ---------- 1. MASK / CLIP REVEALS (blueprint unfurl) ---------- */ /* Elements wipe into view behind a moving mask — reads as "drawn/built" */ .js-anim .rv-mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-arch)} .js-anim .rv-mask.in{clip-path:inset(0 0 0 0)} .js-anim .rv-mask-up{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-arch)} .js-anim .rv-mask-up.in{clip-path:inset(0 0 0 0)} /* ---------- 2. LINE DRAW (architectural rules / dividers) ---------- */ /* Horizontal rules and underlines draw themselves left-to-right */ .js-anim .rv-line{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-arch)} .js-anim .rv-line.in{transform:scaleX(1)} .js-anim .rv-line-v{transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease-arch)} .js-anim .rv-line-v.in{transform:scaleY(1)} /* ---------- 3. SCALE SETTLE (mass settling into place) ---------- */ /* Images/blocks ease down from slight scale+lift — gives weight */ .js-anim .rv-settle{opacity:0;transform:translateY(46px) scale(1.04);transition:opacity 1.2s var(--ease-arch),transform 1.2s var(--ease-arch)} .js-anim .rv-settle.in{opacity:1;transform:none} /* ---------- 4. EDITORIAL TEXT REVEAL (lines rise, masked) ---------- */ /* Headline lines rise from behind their own baseline, one after another */ .js-anim .rv-lines .ln{display:block;overflow:hidden} .js-anim .rv-lines .ln>span{display:inline-block;transform:translateY(115%);transition:transform 1s var(--ease-arch)} .js-anim .rv-lines.in .ln>span{transform:translateY(0)} .js-anim .rv-lines.in .ln:nth-child(2)>span{transition-delay:.10s} .js-anim .rv-lines.in .ln:nth-child(3)>span{transition-delay:.20s} .js-anim .rv-lines.in .ln:nth-child(4)>span{transition-delay:.30s} /* word-level variant for shorter eyebrows/labels */ .js-anim .rv-words .wd{display:inline-block;overflow:hidden;vertical-align:top} .js-anim .rv-words .wd>span{display:inline-block;transform:translateY(115%);transition:transform .8s var(--ease-arch)} .js-anim .rv-words.in .wd>span{transform:translateY(0)} /* ---------- 5. UPGRADE the existing .reveal (richer, weighted) ---------- */ /* keeps backward-compat but with the architectural easing + subtle blur clarity */ .js-anim .reveal{opacity:0;transform:translateY(44px);filter:blur(4px); transition:opacity 1s var(--ease-arch),transform 1.1s var(--ease-arch),filter .9s var(--ease-arch)} .js-anim .reveal.in{opacity:1;transform:none;filter:none} /* richer stagger: more children, longer runway */ .js-anim .reveal-stagger>*{opacity:0;transform:translateY(36px);filter:blur(3px); transition:opacity .85s var(--ease-arch),transform .95s var(--ease-arch),filter .8s var(--ease-arch)} .js-anim .reveal-stagger.in>*{opacity:1;transform:none;filter:none} .js-anim .reveal-stagger.in>*:nth-child(1){transition-delay:.04s} .js-anim .reveal-stagger.in>*:nth-child(2){transition-delay:.12s} .js-anim .reveal-stagger.in>*:nth-child(3){transition-delay:.20s} .js-anim .reveal-stagger.in>*:nth-child(4){transition-delay:.28s} .js-anim .reveal-stagger.in>*:nth-child(5){transition-delay:.36s} .js-anim .reveal-stagger.in>*:nth-child(6){transition-delay:.44s} .js-anim .reveal-stagger.in>*:nth-child(7){transition-delay:.52s} .js-anim .reveal-stagger.in>*:nth-child(8){transition-delay:.60s} .js-anim .reveal-stagger.in>*:nth-child(9){transition-delay:.68s} /* ---------- 6. PARALLAX (cinematic depth on scroll) ---------- */ /* JS sets --py; the image drifts slower than the page. Subtle = luxury. */ .parallax{will-change:transform} .parallax>img,.parallax>.pbg{transform:translate3d(0,var(--py,0),0) scale(1.12);transition:transform .1s linear} /* ---------- 7. HERO refinement (slower, more cinematic entrance) ---------- */ .hero .eyebrow{animation-duration:1.2s;animation-timing-function:var(--ease-arch)} .hero h1{animation-duration:1.4s;animation-timing-function:var(--ease-arch)} .hero .sub{animation-duration:1.3s;animation-timing-function:var(--ease-arch)} /* ---------- 8. CARD hover: deeper, more filmic ---------- */ .card img{transition:transform 1.2s var(--ease-arch),opacity .6s ease} .card:hover img{transform:scale(1.09)} .card .meta{transition:background .6s var(--ease-arch)} background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-arch) .3s} /* ---------- reduced motion: honour it fully ---------- */ @media (prefers-reduced-motion: reduce){ .js-anim .rv-mask,.js-anim .rv-mask-up{clip-path:none!important} .js-anim .rv-line,.js-anim .rv-line-v{transform:none!important} .js-anim .rv-settle,.js-anim .reveal,.js-anim .reveal-stagger>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important} .js-anim .rv-lines .ln>span,.js-anim .rv-words .wd>span{transform:none!important} .parallax>img,.parallax>.pbg{transform:none!important} .hero .eyebrow,.hero h1,.hero .sub,.hero .actions,.scroll-cue{animation:none!important;opacity:1!important} } /* ---------- 10. HEADER weight-shift on scroll ---------- */ .site-head.scrolled{background:rgba(14,13,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line);padding:2px 0} /* ===== Beyond the Landmarks — project tile gallery ===== */ .svc-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px} .svc-tile{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/5;display:block;text-decoration:none} .svc-tile img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform 1.2s var(--ease-arch,cubic-bezier(.19,1,.22,1)),opacity .5s} .svc-tile:hover img{transform:scale(1.06);opacity:.95} .svc-tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 16px;font-size:13px;letter-spacing:.02em; color:var(--bone);background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82));display:flex;align-items:flex-end} @media (max-width:900px){.svc-gallery{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.svc-gallery{grid-template-columns:1fr}} /* ===== Beyond the Landmarks block — background image ===== */ .btl-bg{position:relative;overflow:hidden;background:var(--ink)} .btl-bg::before{content:"";position:absolute;inset:0;z-index:0; background:url("img/one-hundred-one-lagoon-villas-hero.webp") center/cover no-repeat; opacity:.34} .btl-bg::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.82) 42%,rgba(14,13,11,.5) 100%)} .btl-bg > .wrap{position:relative;z-index:2} /* ===== Language switcher (EN / AR / FR) ===== */ .lang-switch{display:inline-flex;align-items:center;gap:2px;margin-inline-start:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase} .lang-switch a{padding:4px 7px;color:var(--bone-dim,#CFC8B8);opacity:.7;border-radius:3px;transition:opacity .2s,color .2s} .lang-switch a:hover{opacity:1;color:var(--bone,#F4F0E7)} .lang-switch a.active{opacity:1;color:var(--gold,#B8924A)} .lang-switch .sep{opacity:.3} @media (max-width:900px){.lang-switch{margin:14px 0 0}} /* ===== ACCESSIBILITY (WCAG 2.2 AA) ===== */ /* Visually-hidden helper: present for screen readers, invisible on screen. */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Skip-to-content link: hidden until focused, then visible top-left (2.4.1). */ .skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--gold);color:var(--ink);padding:10px 18px;border-radius:6px;font-weight:600;text-decoration:none;transition:top .2s} .skip-link:focus{top:12px;outline:3px solid var(--bone);outline-offset:2px} [dir="rtl"] .skip-link{left:auto;right:12px} /* Visible focus ring for keyboard users across all interactive elements (2.4.7). :focus-visible so it shows for keyboard, not on mouse click. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:2px} /* Ensure focus ring is visible over dark hero imagery too. */ .hero a:focus-visible,.site-head a:focus-visible,.cta-band a:focus-visible{outline-color:var(--bone)} /* ===== FOOTER SEARCH + SOCIAL ===== */ /* Search row uses the same grid as .foot-top so the box lines up with the Explore column (grid column 2) rather than the far-left brand column. */ .foot-search{display:grid;grid-template-columns:2fr 1fr 1fr;gap:46px;margin:0 0 40px} .foot-search>.fs-form{grid-column:2 / 4} .foot-search>.fs-results{grid-column:2 / 4} .fs-form{position:relative;display:flex;align-items:center} .fs-input{width:100%;background:rgba(244,240,231,.04);border:1px solid var(--line);border-radius:8px; padding:14px 44px 14px 16px;color:var(--bone);font-size:15px;font-family:var(--sans);transition:border-color .2s,background .2s} .fs-input::placeholder{color:var(--muted)} .fs-input:focus{outline:none;border-color:var(--gold);background:rgba(244,240,231,.06)} .fs-input:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px} .fs-icon{position:absolute;right:16px;color:var(--muted);font-size:18px;pointer-events:none} [dir="rtl"] .fs-input{padding:14px 16px 14px 44px} [dir="rtl"] .fs-icon{right:auto;left:16px} .fs-results{list-style:none;margin:8px 0 0;padding:0;position:absolute;left:0;right:0;top:100%;z-index:20; background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5)} .fs-results:empty{display:none} .fs-results li{border-bottom:1px solid var(--line)} .fs-results li:last-child{border-bottom:0} .fs-results li a{display:block;padding:12px 16px;text-decoration:none;transition:background .15s} .fs-results li a:hover,.fs-results li.active a{background:rgba(184,146,74,.14)} .fs-t{display:block;color:var(--bone);font-size:14px;font-weight:500} .fs-d{display:block;color:var(--muted);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fs-none{padding:12px 16px;color:var(--muted);font-size:13px} /* Social icons: side by side, on the left under the award badge. */ .foot-social{display:flex;gap:14px;margin-top:20px} .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; border:1px solid var(--line);border-radius:50%;color:var(--bone-dim);transition:color .2s,border-color .2s,background .2s} .foot-social a:hover{color:var(--gold-lt);border-color:var(--gold)} .foot-social a:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px} .foot-social svg{display:block} .sitemap-list{list-style:none;margin:0;padding:0} .sitemap-list li{margin-bottom:10px} .sitemap-list a{color:var(--bone-dim);text-decoration:none;font-size:15px;transition:color .2s} .sitemap-list a:hover{color:var(--gold-lt)} /* Search row: match the footer grid's responsive collapse, and keep the results dropdown anchored to the search form. */ .foot-search{position:relative} .foot-search>.fs-results{position:absolute;top:100%;z-index:20} @media (max-width:900px){ .foot-search{grid-template-columns:1fr 1fr;gap:32px} .foot-search>.fs-form,.foot-search>.fs-results{grid-column:1 / 3} } @media (max-width:600px){ .foot-search{grid-template-columns:1fr} .foot-search>.fs-form,.foot-search>.fs-results{grid-column:1} } /* ===== FAQ — subtle Q&A band above the footer (added 2026-07-16) ===== Native
/; no JS. Content stays in the DOM when collapsed, so answer engines read it. Reuses existing tokens only — no new colours. */ .faq-band{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{ list-style:none;cursor:pointer; padding:clamp(20px,2.4vw,30px) 0; display:grid;grid-template-columns:1fr 20px;gap:24px;align-items:baseline; font-size:clamp(15px,1.5vw,18px);font-weight:300;color:var(--bone); transition:color .35s cubic-bezier(.16,1,.3,1) } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::marker{content:""} .faq-item summary:hover{color:var(--gold-lt)} .faq-item summary:focus-visible{outline:1px solid var(--gold);outline-offset:4px} .faq-item summary .faq-sign{ justify-self:end;color:var(--gold);font-weight:300; font-size:16px;line-height:1;transition:transform .35s cubic-bezier(.16,1,.3,1) } .faq-item[open] summary .faq-sign{transform:rotate(45deg)} .faq-a{padding:0 0 clamp(20px,2.4vw,30px);max-width:62ch} .faq-a p{font-size:14.5px;line-height:1.75;color:var(--bone-dim);font-weight:300} .faq-a p + p{margin-top:12px} @media (prefers-reduced-motion:reduce){ .faq-item summary,.faq-item summary .faq-sign{transition:none} } /* --- Gallery lightbox + zoom ------------------------------------------ Click any gallery image to see it whole. Move the pointer over it to magnify. Wheel changes zoom level, click toggles, Esc closes. NOTE: the stage uses grid + min-width/min-height:0 so a tall portrait actually shrinks to fit. As a flex item it kept its intrinsic height (min-height:auto) and overflowed, which is why it looked cropped. */ .gallery .gitem{cursor:zoom-in} .lbx{position:fixed;inset:0;z-index:9999;display:none;background:rgba(14,13,11,.96)} .lbx.open{display:block} .lbx-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:3vh 3vw} .lbx-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;min-height:0;object-fit:contain;transform-origin:50% 50%;transition:transform .28s cubic-bezier(.16,1,.3,1);will-change:transform;cursor:zoom-in;box-shadow:0 24px 80px rgba(0,0,0,.55)} .lbx.zoomed .lbx-stage img{transition:transform .08s linear;cursor:zoom-out} .lbx-close,.lbx-nav{position:absolute;z-index:2;background:none;border:0;color:var(--bone,#F4F0E7);cursor:pointer;line-height:1;padding:14px;opacity:.7;transition:opacity .2s} .lbx-close:hover,.lbx-nav:hover,.lbx-close:focus-visible,.lbx-nav:focus-visible{opacity:1} .lbx-close{top:8px;right:12px;font-size:34px} .lbx-nav{top:50%;transform:translateY(-50%);font-size:44px} .lbx-prev{left:6px} .lbx-next{right:6px} .lbx-count{position:absolute;z-index:2;bottom:14px;left:0;right:0;text-align:center;color:var(--bone,#F4F0E7);opacity:.55;font-size:12px;letter-spacing:.12em;pointer-events:none} .lbx-hint{position:absolute;z-index:2;top:14px;left:0;right:0;text-align:center;color:var(--bone,#F4F0E7);opacity:.4;font-size:11px;letter-spacing:.14em;pointer-events:none} @media (max-width:640px){.lbx-nav{font-size:30px}.lbx-stage{padding:2vh 2vw}} @media (prefers-reduced-motion:reduce){.lbx-stage img{transition:none}.gallery .gitem img{transition:none}} /* ---------- Project card caption ------------------------------------- Project grids wrap the caption in .cinfo; the homepage uses .meta. Only .meta was styled as an overlay, so on every project grid the name rendered outside the card's clipped box and was never seen. Same overlay treatment here, revealed on hover. Scoped to .card: the contact/careers .cinfo block is a different component and is not affected. */ .card .cinfo{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:26px 24px; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85)); opacity:0; transition:opacity .45s var(--ease-arch,ease); } .card:hover .cinfo, .card:focus-visible .cinfo{opacity:1} .card .cinfo .cat{opacity:1; transform:none} /* parent handles the reveal */ .card .cinfo .nm{font-size:19px; margin-top:6px; font-weight:300; color:var(--bone)} .card .cinfo .loc{font-size:12px; color:var(--bone-dim); margin-top:3px} /* Touch devices have no hover: the name must never be unreachable there. */ @media (hover:none){ .card .cinfo{opacity:1} } @media (prefers-reduced-motion:reduce){ .card .cinfo{transition:none} } /* ----------