:root{ --black: #ffffff; --black-soft: #f7f6f2; --charcoal: #efece3; --charcoal-2: #e6e1d2; --ivory: #1c1a15; --ivory-dim: #6b6558; --gold: #c6a15b; --gold-light: #97742e; --gold-deep: #8a6b2e; --on-gold: #1c1a15; --line: rgba(198,161,91,0.35); --line-strong: rgba(198,161,91,0.58); --overlay: rgba(10,9,8,0.72); --serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gutter: clamp(1.25rem, 4.4vw, 4.5rem); --section-pad: clamp(4.5rem, 10vw, 9rem); --nav-h: 72px; --nav-h-scrolled: 58px; --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } .hero-video{ display:none; } } body{ margin:0; background:var(--black); color:var(--ivory); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } input,textarea,select{ font-family:inherit; font-size:1rem; } ::selection{ background:var(--gold); color:var(--on-gold); } :focus-visible{ outline:1.5px solid var(--gold-light); outline-offset:3px; } h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.05; margin:0; color:var(--ivory); letter-spacing:0.005em; } .h-display{ font-size:clamp(3rem, 8.5vw, 7.5rem); font-weight:500; } .h-xl{ font-size:clamp(2.4rem, 6vw, 4.6rem); } .h-lg{ font-size:clamp(2rem, 4.2vw, 3.2rem); } .h-md{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); } .h-sm{ font-size:clamp(1.15rem, 1.6vw, 1.4rem); } p{ margin:0; } .body-lg{ font-size:clamp(1.05rem, 1.4vw, 1.25rem); line-height:1.7; color:var(--ivory-dim); } .body-md{ font-size:1rem; line-height:1.75; color:var(--ivory-dim); } .eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:0.28em; font-size:0.72rem; font-weight:600; color:var(--gold-light); } .serif-italic{ font-style:italic; font-weight:400; } .wrap{ max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:var(--section-pad); position:relative; } .section-tight{ padding-block:clamp(3rem,6vw,5rem); } .gold-rule{ display:flex; align-items:center; gap:0.85rem; color:var(--gold); } .gold-rule::before,.gold-rule::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); } .gold-rule .diamond{ width:6px;height:6px; background:var(--gold); transform:rotate(45deg); flex:0 0 auto; } .gold-rule.left{ justify-content:flex-start; } .gold-rule.left::after{ display:none; } .gold-rule.left::before{ display:none; } .gold-rule.left .diamond{ order:-1; } .divider{ height:1px; width:100%; background:linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent); border:0; margin:0; } .divider-static{ height:1px; width:100%; background:var(--line); border:0; margin:0; } .section-head{ display:flex; flex-direction:column; gap:1.1rem; max-width:780px; margin-bottom:clamp(2.5rem,5vw,4.5rem); } .section-head.center{ margin-inline:auto; text-align:center; align-items:center; } .btn{ display:inline-flex; align-items:center; gap:0.6rem; padding:1rem 2.1rem; font-family:var(--sans); font-size:0.78rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; border:1px solid var(--gold); background:transparent; color:var(--ivory); white-space:nowrap; position:relative; overflow:hidden; transition:color .45s var(--ease), border-color .45s var(--ease); } .btn::before{ content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-101%); transition:transform .45s var(--ease); z-index:-1; } .btn:hover::before{ transform:translateX(0); } .btn:hover{ color:var(--on-gold); } .btn-primary{ background:var(--gold); color:var(--on-gold); } .btn-primary::before{ background:var(--ivory); } .btn-primary:hover{ color:var(--black); border-color:var(--ivory); } .btn-ghost{ border-color:var(--line-strong); color:var(--ivory-dim); } .btn-ghost::before{ background:var(--gold); } .btn-ghost:hover{ color:var(--on-gold); border-color:var(--gold); } .btn svg{ width:15px; height:15px; transition:transform .4s var(--ease); position:relative; z-index:1; } .btn span{ position:relative; z-index:1; } .btn:hover svg{ transform:translateX(4px); } .text-link{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-light); border-bottom:1px solid transparent; padding-bottom:2px; } .text-link svg{ width:14px;height:14px; transition:transform .35s var(--ease); } .text-link:hover{ border-color:var(--gold-light); } .text-link:hover svg{ transform:translateX(4px); } .nav{ position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h); display:flex; align-items:center; background:rgba(255,255,255,0.96); border-bottom:1px solid var(--line); transition:height .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease); } .nav.scrolled{ height:var(--nav-h-scrolled); background:rgba(255,255,255,0.98); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-strong); } .nav-inner{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; } .brand{ font-family:var(--serif); font-size:1.55rem; letter-spacing:0.16em; color:var(--ivory); font-weight:700; display:flex; align-items:center; gap:0.6rem; } .brand em{ font-style:normal; color:var(--gold); } .brand img{ height:44px; width:auto; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.1)); } .nav-links{ display:flex; align-items:center; gap:clamp(1.4rem,2.4vw,2.6rem); } .nav-links a{ font-size:0.86rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:800; color:var(--ivory-dim); position:relative; padding-bottom:6px; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--gold); transition:width .35s var(--ease); } .nav-links a:hover{ color:var(--ivory); } .nav-links a:hover::after, .nav-links a.active::after{ width:100%; } .nav-links a.active{ color:var(--gold-light); font-weight:800; } .nav-cta{ display:flex; align-items:center; gap:1.6rem; } .nav-cta .btn{ padding:0.75rem 1.5rem; font-size:0.7rem; } @media (max-width: 1140px) and (min-width: 721px){ .nav-links{ gap:1rem; } .nav-links a{ font-size:0.7rem; letter-spacing:0.08em; } .brand img{ height:36px; } .nav-cta{ gap:1rem; } } .nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; } .nav-burger span{ width:24px; height:1px; background:var(--ivory); transition:transform .3s var(--ease), opacity .3s var(--ease); } .mobile-menu{ position:fixed; inset:0; z-index:950; background:var(--black); display:flex; flex-direction:column; transform:translateY(-100%); transition:transform .55s var(--ease); padding:clamp(1.5rem,5vw,3rem); } .mobile-menu.open{ transform:translateY(0); } .mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; } .mobile-menu-close{ background:none;border:1px solid var(--line-strong); color:var(--ivory); width:44px;height:44px; display:flex; align-items:center; justify-content:center; } .mobile-links{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:1.4rem; } .mobile-links a{ font-family:var(--serif); font-size:clamp(2rem,9vw,3rem); color:var(--ivory); display:flex; align-items:baseline; gap:1rem; } .mobile-links a span.num{ font-family:var(--sans); font-size:0.85rem; color:var(--gold); letter-spacing:0.1em; } .mobile-menu-foot{ display:flex; justify-content:space-between; color:var(--ivory-dim); font-size:0.78rem; letter-spacing:0.08em; padding-top:1.5rem; border-top:1px solid var(--line); } .mobile-menu-foot a{ color:var(--gold-light); } body.menu-open{ overflow:hidden; } .footer{ background:var(--black-soft); border-top:1px solid var(--line); padding-block: clamp(3.5rem,7vw,5.5rem) 2rem; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:3rem; padding-bottom:3rem; margin-bottom:2rem; border-bottom:1px solid var(--line); } .footer-brand .brand{ font-size:1.9rem; margin-bottom:1rem; } .footer-tag{ font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ivory-dim); max-width:280px; } .footer h4{ font-family:var(--sans); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); margin-bottom:1.2rem; font-weight:700; } .footer-links{ display:flex; flex-direction:column; gap:0.8rem; } .footer-links a{ font-size:0.9rem; color:var(--ivory-dim); transition:color .3s; } .footer-links a:hover{ color:var(--gold-light); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:0.78rem; color:var(--ivory-dim); } .footer-social{ display:flex; gap:1.1rem; } .footer-social a{ width:36px;height:36px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ivory-dim); transition:all .3s; } .footer-social a:hover{ color:var(--on-gold); background:var(--gold); border-color:var(--gold); } .footer-social svg{ width:15px;height:15px; } [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); } [data-reveal].in{ opacity:1; transform:translateY(0); } [data-reveal="fade"]{ transform:none; } [data-reveal-delay="1"]{ transition-delay:.1s; } [data-reveal-delay="2"]{ transition-delay:.22s; } [data-reveal-delay="3"]{ transition-delay:.34s; } [data-reveal-delay="4"]{ transition-delay:.46s; } .ventures-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .venture-card{ border-right:1px solid var(--line); padding: 2.6rem 2rem; display:flex; flex-direction:column; gap:1.4rem; transition: background-color .5s var(--ease); position:relative; } .venture-card:last-child{ border-right:0; } .venture-card:hover{ background:var(--charcoal); } .venture-card .v-icon{ width:74px; height:74px; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(198,161,91,0.18)); transition:transform .5s var(--ease); } .venture-card:hover .v-icon{ transform:translateY(-4px) scale(1.04); } .venture-card .v-cat{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); font-weight:700; } .venture-card h3{ font-size:clamp(1.4rem,2vw,1.8rem); color:var(--gold-light); position:relative; display:inline-block; padding-bottom:0.5rem; } .venture-card h3::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:34px; background:var(--gold); } .venture-card p{ color:var(--ivory-dim); font-size:0.92rem; line-height:1.65; flex:1; } .pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; } .pillar{ padding:2.2rem 1.4rem 0; border-top:1px solid var(--line); text-align:left; } .pillar .p-index{ font-family:var(--serif); font-size:1rem; color:var(--gold-light); font-style:italic; } .pillar h4{ font-family:var(--serif); font-size:1.5rem; font-weight:500; margin-top:0.8rem; color:var(--ivory); } .stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); max-width:1200px; margin-inline:auto; } .stat{ padding:2.8rem 1.5rem; border-left:1px solid var(--line); text-align:center; transition:background-color .4s var(--ease); } .stat:hover{ background:var(--charcoal); } .stat:first-child{ border-left:0; } .stat-icon{ width:30px; height:30px; margin:0 auto 1.1rem; color:var(--gold); } .stat-icon svg{ width:100%; height:100%; } .stat .stat-num{ font-family:var(--serif); font-size:clamp(2.6rem,4.4vw,3.8rem); color:var(--gold-light); font-weight:500; line-height:1; } .stat .stat-label{ margin-top:0.8rem; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ivory-dim); } @media (max-width: 1080px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } .stat:nth-child(3n+1){ border-left:0; } .stat:nth-child(n+4){ border-top:1px solid var(--line); } } @media (max-width: 640px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(2n+1){ border-left:0; } .stat:nth-child(n+3){ border-top:1px solid var(--line); } } .project-card{ position:relative; overflow:hidden; background:var(--charcoal); cursor:pointer; border:1px solid var(--line); } .project-card .p-media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--black); display:flex; align-items:center; justify-content:center; } .project-card .p-media img{ width:100%;height:100%;object-fit:contain; transition:transform .8s var(--ease); } .project-card:hover .p-media img{ transform:scale(1.08); } .project-card .p-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,9,8,0.92) 100%); } .project-card .p-status{ position:absolute; top:1rem; left:1rem; z-index:2; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; padding:0.4rem 0.75rem; background:rgba(10,9,8,0.7); border:1px solid var(--line-strong); color:#e8cd8a; backdrop-filter:blur(6px); } .project-card .p-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.5rem; } .project-card .p-venture{ font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:0.4rem; } .project-card h3{ font-size:1.4rem; color:#f7f2e7; } .project-card .p-loc{ margin-top:0.35rem; font-size:0.82rem; color:#b9b2a2; display:flex; align-items:center; gap:0.4rem; } .project-card .p-reveal{ margin-top:0.9rem; height:1px; width:0; background:var(--gold); transition:width .5s var(--ease); } .project-card:hover .p-reveal{ width:44px; } .project-card .p-arrow{ position:absolute; top:1rem; right:1rem; z-index:2; width:38px;height:38px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ece5d6; opacity:0; transform:translate(-6px,6px); transition:all .4s var(--ease); background:rgba(10,9,8,0.5); } .project-card:hover .p-arrow{ opacity:1; transform:translate(0,0); background:var(--gold); color:var(--on-gold); border-color:var(--gold); } .project-card .p-arrow svg{ width:16px;height:16px; } .filter-row{ display:flex; flex-wrap:wrap; gap:0.6rem 0.9rem; } .filter-pill{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; padding:0.6rem 1.2rem; border:1px solid var(--line-strong); color:var(--ivory-dim); background:transparent; transition:all .3s var(--ease); } .filter-pill:hover{ color:var(--ivory); border-color:var(--gold); } .filter-pill.active{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); } .modal-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(10,9,8,0.9); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .4s var(--ease); display:flex; justify-content:center; overflow-y:auto; padding:clamp(1rem,4vw,4rem) 1rem; } .modal-overlay.open{ opacity:1; pointer-events:auto; } .modal{ background:var(--black-soft); border:1px solid var(--line); max-width:980px; width:100%; transform:translateY(40px); transition:transform .5s var(--ease); margin:auto; } .modal-overlay.open .modal{ transform:translateY(0); } .modal-hero{ position:relative; aspect-ratio:16/8; overflow:hidden; } .modal-hero img{ width:100%;height:100%;object-fit:cover; } .modal-close{ position:absolute; top:1.2rem; right:1.2rem; z-index:2; width:42px;height:42px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(10,9,8,0.6); backdrop-filter:blur(6px); color:#ece5d6; display:flex; align-items:center; justify-content:center; } .modal-body{ padding:clamp(1.8rem,4vw,3.5rem); } .modal-meta{ display:flex; flex-wrap:wrap; gap:2.2rem; margin:1.6rem 0 2.2rem; padding:1.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .modal-meta div{ display:flex; flex-direction:column; gap:0.35rem; } .modal-meta .m-label{ font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-light); font-weight:700; } .modal-meta .m-value{ font-size:0.95rem; color:var(--ivory); } .modal-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; margin:2rem 0; } .modal-gallery img{ aspect-ratio:1; object-fit:cover; } .field{ display:flex; flex-direction:column; gap:0.6rem; } .field label{ font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-light); font-weight:700; } .field{ width:100%; } .field input, .field select, .field textarea{ width:100%; box-sizing:border-box; background:transparent; border:none; border-bottom:1px solid var(--line-strong); color:var(--ivory); padding:0.7rem 0.2rem; font-size:1rem; transition:border-color .3s; } .field textarea{ min-height:110px; resize:vertical; } .field input::placeholder, .field textarea::placeholder{ color:var(--ivory-dim); opacity:0.55; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; } .field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23c6a15b' fill='none' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; } .field select option{ background:var(--black); color:var(--ivory); } .field textarea{ resize:vertical; min-height:120px; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); } .center{ text-align:center; } .mx-auto{ margin-inline:auto; } .gold{ color:var(--gold-light); } .ivory-dim{ color:var(--ivory-dim); } .mt-1{margin-top:0.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.6rem;} .mt-4{margin-top:2.5rem;} .img-frame{ position:relative; overflow:hidden; } .img-frame img{ width:100%;height:100%;object-fit:cover; transition:transform 1.2s var(--ease); } .img-frame:hover img{ transform:scale(1.05); } .tag-strip{ display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; } .tag{ font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-light); border:1px solid var(--line-strong); padding:0.4rem 0.8rem; } .page-hero{ min-height:38vh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:calc(var(--nav-h) + 2rem); padding-bottom:2.5rem; position:relative; background:linear-gradient(180deg, var(--black) 0%, var(--black-soft) 100%); border-bottom:1px solid var(--line); } .page-hero .wrap{ position:relative; z-index:2; } .page-hero-bg{ position:absolute; inset:0; z-index:0; } .page-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:0.32; } .page-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, var(--black) 92%); } .watermark{ position:absolute; top:50%; right:clamp(-4rem,-2vw,2rem); transform:translateY(-50%); width:clamp(240px,28vw,440px); opacity:0.05; pointer-events:none; z-index:0; filter:brightness(0) saturate(100%); } .watermark img{ width:100%; display:block; } .pillar-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); max-width:1160px; margin-inline:auto; border:1px solid var(--line); } .pillar-card{ background:var(--black); padding:2.6rem 1.6rem 2.2rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.9rem; transition:background-color .4s var(--ease); } .pillar-card:hover{ background:var(--charcoal); } .pillar-card .pc-icon-ring{ width:56px; height:56px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); transition:border-color .4s var(--ease), transform .4s var(--ease); } .pillar-card:hover .pc-icon-ring{ border-color:var(--gold); transform:translateY(-3px); } .pillar-card .pc-icon-ring svg{ width:44%; height:44%; } .pillar-card h4{ font-size:1.2rem; } .pillar-card p{ font-size:0.84rem; line-height:1.6; color:var(--ivory-dim); max-width:22ch; } @media (max-width: 1080px){ .pillar-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width: 720px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); } .watermark{ display:none; } } @media (max-width: 1080px){ .ventures-grid{ grid-template-columns:repeat(2,1fr); } .venture-card{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .venture-card:nth-child(2n){ border-right:0; } .pillars{ grid-template-columns:repeat(3,1fr); } .stats-grid{ grid-template-columns:repeat(3,1fr); } .stat:nth-child(3n+1){ border-left:0; } .footer-grid{ grid-template-columns:1fr 1fr; row-gap:2.5rem; } .grid-2{ grid-template-columns:1fr; } .modal-gallery{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 720px){ .nav-links, .nav-cta .btn{ display:none; } .nav-burger{ display:flex; } .ventures-grid{ grid-template-columns:1fr; } .venture-card:nth-child(2n){ border-right:0; } .pillars{ grid-template-columns:repeat(2,1fr); } .stats-grid{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(2n+1){ border-left:0; } .stat{ border-top:1px solid var(--line); border-left:0 !important; } .footer-grid{ grid-template-columns:1fr; } .modal-meta{ gap:1.2rem 2rem; } } .journey{ position:relative; padding-block:clamp(2rem,3.5vw,3rem); } .journey-road-wrap{ position:relative; width:100%; margin-block:0.3rem; } .journey-road-svg{ width:100%; height:auto; display:block; max-height:44px; } .journey-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; position:relative; z-index:2; } .journey-row.top{ margin-bottom:0.3rem; } .journey-row.bottom{ margin-top:0.3rem; } .journey-stop{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.5rem; } .journey-badge{ width:48px; height:48px; border-radius:50%; background:var(--black-soft); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; padding:8px; position:relative; z-index:2; } .journey-badge img{ width:100%; height:100%; object-fit:contain; } .journey-badge svg{ width:58%; height:58%; color:var(--gold); } .journey-num{ width:19px; height:19px; border-radius:50%; background:var(--gold); color:var(--on-gold); font-size:0.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto; } .journey-year{ font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-light); font-weight:700; } .journey-title{ font-family:var(--serif); font-size:0.98rem; color:var(--ivory); line-height:1.2; } .journey-tag{ font-size:0.7rem; color:var(--ivory-dim); line-height:1.35; max-width:20ch; } .journey-connector{ width:1px; height:16px; background:var(--line-strong); margin:0 auto; } .journey-mobile{ display:none; flex-direction:column; gap:0; position:relative; padding-left:2.6rem; } .journey-mobile::before{ content:""; position:absolute; left:1.05rem; top:0.5rem; bottom:0.5rem; width:1px; background:var(--line-strong); } .journey-mobile-item{ position:relative; padding-bottom:1.6rem; } .journey-mobile-item:last-child{ padding-bottom:0; } .journey-mobile .journey-num{ position:absolute; left:-2.6rem; top:0; } .journey-mobile .journey-badge{ width:40px; height:40px; padding:6px; margin-bottom:0.4rem; } @media (max-width: 900px){ .journey-road-wrap{ display:none; } .journey-row{ display:none; } .journey-mobile{ display:flex; } } .float-rail{ position:fixed; right:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem); z-index:800; display:flex; flex-direction:column; gap:0.7rem; align-items:center; } .float-btn{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--black-soft); border:1px solid var(--line-strong); color:var(--ivory-dim); box-shadow:0 6px 18px rgba(0,0,0,0.35); transition:transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease); } .float-btn svg{ width:20px; height:20px; } .float-btn:hover{ transform:translateY(-3px); border-color:var(--gold); color:var(--gold-light); } .float-whatsapp{ width:52px; height:52px; background:#25D366; border-color:#25D366; color:#0a0908; } .float-whatsapp:hover{ background:#1ebe5a; color:#0a0908; transform:translateY(-3px) scale(1.04); } .float-whatsapp svg{ width:24px; height:24px; } @media (max-width: 640px){ .float-rail{ right:0.75rem; bottom:0.75rem; } .float-btn{ width:42px; height:42px; } .float-whatsapp{ width:48px; height:48px; } } .why-raut-grid{ display:grid; grid-template-columns:0.85fr 1.35fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; } .why-raut-head{ position:sticky; top:calc(var(--nav-h) + 2rem); } .value-list{ display:flex; flex-direction:column; } .value-row{ display:grid; grid-template-columns:2.6rem 3.2rem 12rem 1fr; align-items:center; gap:1.4rem; padding:1.6rem 0; border-top:1px solid var(--line); transition:padding-left .4s var(--ease), border-color .4s var(--ease); } .value-list .value-row:last-child{ border-bottom:1px solid var(--line); } .value-row:hover{ padding-left:0.8rem; border-color:var(--line-strong); } .value-num{ font-family:var(--serif); font-style:italic; color:var(--gold-light); font-size:1.1rem; } .value-icon{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); transition:border-color .4s var(--ease); } .value-row:hover .value-icon{ border-color:var(--gold); } .value-icon svg{ width:46%; height:46%; } .value-name{ font-family:var(--serif); font-size:1.35rem; color:var(--ivory); } .value-desc{ font-size:0.9rem; line-height:1.6; color:var(--ivory-dim); max-width:46ch; } @media (max-width: 1080px){ .why-raut-grid{ grid-template-columns:1fr; } .why-raut-head{ position:static; } .value-row{ grid-template-columns:2.2rem 2.8rem 1fr; grid-template-areas:"num icon name" "num icon desc"; row-gap:0.4rem; } .value-num{ grid-area:num; } .value-icon{ grid-area:icon; width:38px; height:38px; } .value-name{ grid-area:name; } .value-desc{ grid-area:desc; max-width:none; } } .rooted{ position:relative; padding-block:clamp(3.5rem,7vw,6rem); overflow:hidden; border-top:1px solid var(--line); background:var(--black-soft); } .rooted-pin-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; margin-bottom:clamp(2.5rem,5vw,4rem); } .rooted-pin{ position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; } .rooted-pin .ring{ position:absolute; border:1px solid var(--gold); border-radius:50%; opacity:0; animation:rootedPulse 3.2s ease-out infinite; } .rooted-pin .ring:nth-child(1){ width:40px; height:40px; animation-delay:0s; } .rooted-pin .ring:nth-child(2){ width:40px; height:40px; animation-delay:1.05s; } .rooted-pin .ring:nth-child(3){ width:40px; height:40px; animation-delay:2.1s; } @keyframes rootedPulse{ 0%{ width:40px; height:40px; opacity:0.9; } 100%{ width:120px; height:120px; opacity:0; } } .rooted-pin .core{ position:relative; z-index:2; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 18px 2px rgba(198,161,91,0.6); } .rooted-place{ text-align:center; } .rooted-place .rp-label{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); font-weight:700; } .rooted-place .rp-city{ font-family:var(--serif); font-size:1.6rem; color:var(--ivory); margin-top:0.35rem; } .badge-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); max-width:1000px; margin-inline:auto; } .badge-item{ background:var(--black-soft); padding:1.8rem 1.4rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.7rem; } .badge-item .b-icon{ width:34px; height:34px; color:var(--gold); } .badge-item .b-icon svg{ width:100%; height:100%; } .badge-item .b-title{ font-family:var(--serif); font-size:1.1rem; color:var(--ivory); } .badge-item .b-desc{ font-size:0.78rem; color:var(--ivory-dim); line-height:1.4; } @media (max-width: 720px){ .badge-row{ grid-template-columns:repeat(2,1fr); } } .hero-slideshow{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#ffffff; } .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:32% 35%; opacity:0; transition:opacity 1.6s ease; animation:heroKenBurns 18s ease-in-out infinite; } .hero-slide.active{ opacity:1; z-index:1; } @keyframes heroKenBurns{ 0%{ transform:scale(1); } 100%{ transform:scale(1.05); } } @media (prefers-reduced-motion: reduce){ .hero-slide{ animation:none; } } .hero-dots{ position:absolute; z-index:3; left:var(--gutter); bottom:1.6rem; display:flex; gap:0.55rem; } .hero-dots button{ width:26px; height:2px; background:rgba(236,229,214,0.35); border:0; padding:0; cursor:pointer; transition:background-color .3s var(--ease); } .hero-dots button.active{ background:var(--gold); } .hero-slide, .hero-video-zoom, .page-hero-bg img, .img-frame img, .project-card .p-media img, .venture-card .v-icon-photo{ filter: sepia(0.16) saturate(1.14) contrast(1.07) brightness(0.9) hue-rotate(-4deg); } .btn-primary span, .btn-primary svg{ color:var(--on-gold); } .filter-pill.active{ color:var(--on-gold); } .journey-num{ color:var(--on-gold); } .float-whatsapp{ color:#0a0908; } .section-light{ --black: #f7f2e7; --black-soft: #f0e9d8; --charcoal: #e8dfc8; --charcoal-2: #ddd2b4; --ivory: #211c14; --ivory-dim: #5c5646; --gold-light: #97742e; --line: rgba(198,161,91,0.35); --line-strong: rgba(198,161,91,0.58); background:var(--black); color:var(--ivory); } .section-light .watermark img{ filter:brightness(0) saturate(100%); opacity:0.4; } .section-light .btn-ghost{ color:var(--ivory); } .section-light .footer-social a{ color:var(--ivory-dim); } .section-light ::selection{ background:var(--gold); color:#fff; } .leader-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; align-items:start; } @media (max-width: 900px){ .leader-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; gap:3rem; } .leader-grid p[style*="nowrap"]{ white-space:normal !important; } } .contact-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .contact-card{ border:1px solid var(--line); padding:2rem 1.8rem; background:var(--black); transition:border-color .3s var(--ease), transform .3s var(--ease); } .contact-card:hover{ border-color:var(--gold); transform:translateY(-3px); } .contact-card h3{ font-family:var(--serif); font-size:1.3rem; color:var(--ivory); margin-bottom:0.8rem; } .contact-card p{ font-size:0.9rem; line-height:1.6; color:var(--ivory-dim); } .contact-card .cc-phone{ margin-top:0.9rem; font-weight:700; color:var(--gold-light); font-size:0.95rem; } @media (max-width: 900px){ .contact-card-grid{ grid-template-columns:1fr; } } .venture-summary-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; } .venture-summary-card{ display:flex; flex-direction:column; align-items:center; text-align:center; border:1px solid var(--line); padding:2rem 1.4rem 1.6rem; transition:border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease); } .venture-summary-card:hover{ border-color:var(--gold); transform:translateY(-4px); background:var(--charcoal); } .venture-summary-card img{ width:100%; max-width:150px; height:auto; object-fit:contain; margin-bottom:1.1rem; } .venture-summary-card .vs-cat{ font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ivory-dim); flex:1; margin-bottom:1rem; } .venture-summary-card .vs-link{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-light); } .venture-summary-card .vs-link svg{ width:13px; height:13px; transition:transform .3s var(--ease); } .venture-summary-card:hover .vs-link svg{ transform:translateX(4px); } @media (max-width: 900px){ .venture-summary-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .venture-summary-grid{ grid-template-columns:1fr; } } .timeline-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:0; border:1px solid var(--line); max-width:1200px; margin-inline:auto; } .timeline-item{ padding:1.8rem 1.2rem; text-align:center; border-left:1px solid var(--line); border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:0.6rem; transition:background-color .3s var(--ease); } .timeline-item:hover{ background:var(--charcoal); } .timeline-num{ width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--on-gold); font-size:0.66rem; font-weight:800; display:flex; align-items:center; justify-content:center; } .timeline-badge{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); padding:8px; } .timeline-badge img{ width:100%; height:100%; object-fit:contain; } .timeline-badge svg{ width:58%; height:58%; } .timeline-year{ font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-light); font-weight:700; } .timeline-title{ font-family:var(--serif); font-size:0.98rem; color:var(--ivory); line-height:1.25; } .venture-cta-panel{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; border:1px solid var(--line); padding:1.6rem 1.8rem; } .vcta-icon{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; } .vcta-icon svg{ width:52%; height:52%; } .vcta-text{ flex:1; min-width:180px; } .vcta-title{ font-family:var(--serif); font-size:1.15rem; color:var(--ivory); } .vcta-sub{ font-size:0.84rem; color:var(--ivory-dim); margin-top:0.3rem; line-height:1.5; } @media (max-width: 640px){ .venture-cta-panel{ flex-direction:column; align-items:flex-start; } .venture-cta-panel .btn{ width:100%; justify-content:center; } } .project-card-static{ cursor:default; } .project-card-static:hover{ transform:none !important; } .project-card-static .p-body h3{ color:var(--ivory); } .venture-2col-grid{ display:grid; grid-template-columns:1fr 1fr; width:100%; } @media (max-width: 860px){ .venture-2col-grid{ grid-template-columns:1fr; } .venture-2col-grid > div{ border-right:0 !important; border-bottom:1px solid var(--line); } .venture-2col-grid > div:last-child{ border-bottom:0; } } .final-cta-grid{ grid-template-columns:0.85fr 1.15fr; } @media (max-width: 768px){ .final-cta-grid{ grid-template-columns:1fr; } } @media (max-width: 480px){ .hero-slide{ background-position:8% 35%; } } @media (min-width: 481px) and (max-width: 768px){ .hero-slide{ background-position:18% 35%; } } .project-card .p-body h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25; } @media (max-width: 640px){ .project-card .p-media{ aspect-ratio:4/5.6; } .project-card .p-body{ padding:1.1rem; } .project-card .p-body h3{ font-size:1.05rem; } .project-card .p-status{ top:0.7rem; left:0.7rem; font-size:0.58rem; padding:0.3rem 0.6rem; } } .p-media-placeholder{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; background:linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-2) 100%); color:var(--line-strong); } .p-media-placeholder svg{ width:28px; height:28px; opacity:0.5; } .p-media-placeholder span{ font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ivory-dim); opacity:0.6; } .home-form-fields-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; } @media (max-width: 640px){ .home-form-fields-grid{ grid-template-columns:1fr; gap:1.1rem; } } .contact-form-fields-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; } @media (max-width: 640px){ .contact-form-fields-grid{ grid-template-columns:1fr; gap:1.2rem; } } .home-featured-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1160px; margin-inline:auto; } @media (max-width: 1024px){ .home-featured-grid{ grid-template-columns:repeat(2,1fr); max-width:800px; } } @media (max-width: 640px){ .home-featured-grid{ grid-template-columns:1fr; max-width:420px; } } .stats-grid-4{ grid-template-columns:repeat(4,1fr) !important; } @media (max-width: 1080px){ .stats-grid-4{ grid-template-columns:repeat(2,1fr) !important; } } @media (max-width: 480px){ .stats-grid-4{ grid-template-columns:1fr !important; } } .contact-split-grid{ display:grid; grid-template-columns:1.2fr 0.9fr; align-items:start; gap:clamp(2rem,5vw,5rem); } @media (max-width: 900px){ .contact-split-grid{ grid-template-columns:1fr; } } .projects-archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } @media (max-width: 1024px){ .projects-archive-grid{ grid-template-columns:repeat(2,1fr); } } .single-project-grid{ display:grid; grid-template-columns:1.5fr 1fr; align-items:start; gap:clamp(2rem,5vw,4rem); } @media (max-width: 900px){ .single-project-grid{ grid-template-columns:1fr; } } @media (max-width: 640px){ .projects-archive-grid{ gap:0.8rem; } .projects-archive-grid .project-card .p-media, .projects-archive-grid .project-card-static .p-media{ aspect-ratio:1/1; } .projects-archive-grid .project-card h3, .projects-archive-grid .project-card-static h3{ font-size:1rem; } .projects-archive-grid .p-body{ padding:1rem; } .projects-archive-grid .p-loc{ font-size:0.72rem; } } @media (max-width: 768px){ .hero-slideshow{ background:var(--black); } .hero-slide{ background-size:contain; background-position:center center; background-repeat:no-repeat; animation:none; } } .project-card{ min-height:280px; } .project-card h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25; } .hero-video-zoom{ transform:scale(1.28); transform-origin:50% 38%; } @media (max-width: 640px){ .hero-video-zoom{ transform:scale(1.45); transform-origin:50% 34%; } } @supports (height: 100dvh){ .hero-dvh{ min-height:100dvh !important; } } .hero-tagline{ font-family:var(--serif); font-weight:500; font-style:italic; font-size:clamp(1.6rem, 3.2vw, 2.6rem); color:#f7f2e7; text-align:center; max-width:16ch; margin-bottom:0; line-height:1.2; text-shadow:0 2px 20px rgba(0,0,0,0.5); } @media (max-width: 640px){ .hero-tagline-wrap{ background:rgba(4,3,3,0.8); padding:1rem 1.3rem; border-radius:2px; margin-bottom:0.5rem; } .hero-tagline{ font-size:clamp(1.5rem, 7vw, 2rem); max-width:none; } } .hero-overlay-combined{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(10,9,8,0.42) 0%, rgba(10,9,8,0.58) 60%, rgba(10,9,8,0.82) 100%); }

/* ---- Static hero banner: used when no hero video is set (Customizer >
   Homepage Imagery > Hero Background Video left empty). These banners carry
   their own typography and brand colour, so the hero drops its full-viewport
   height and the artwork is shown whole -- no crop, no colour grade, no dark
   legibility overlay. The headline/CTA block then sits on the light page
   background, so it is recoloured to suit it. ---- */
.hero:has(.hero-slide){
  min-height:0 !important; justify-content:flex-start;
  /* The nav is fixed; without this the banner slides under it and its top edge
     (logo line / "prime location" strap) is hidden. */
  padding-top:var(--nav-h);
  /* --black is the page ground token (cream under the light palette); --band is
     the dark accent and left a black strip around the banner and behind the
     buttons, which also hid the ghost button's dark label. */
  background:var(--black);
}
.hero:has(.hero-slide) .hero-slideshow{ position:relative; inset:auto; background:var(--black); }
.hero:has(.hero-slide) .hero-overlay-combined{ display:none; }
.hero:has(.hero-slide) .hero-slide{
  position:relative; inset:auto; opacity:1; z-index:0;
  width:100%; aspect-ratio:1774 / 887;
  /* Keep the whole banner inside the first fold on short viewports; contain
     means it letterboxes onto the cream rather than cropping. */
  max-height:calc(100dvh - var(--nav-h));
  background-size:contain; background-position:center center; background-repeat:no-repeat;
  filter:none; animation:none;
}
.hero:has(.hero-slide) > div:last-of-type{ padding-block:clamp(1.6rem,3vw,2.6rem); }

/* "Building Trust, Building Legacies" removed at Rishikesh's request
   (2026-09-14): the hero banner carries its own headline, so the line beneath
   it was redundant. That text is generated by a ::before in the Customizer's
   Additional CSS; it is neutralised here so the Additional CSS stays untouched
   and the line can be brought back by deleting these two declarations. */
.hero > div:last-of-type::before{ content:none !important; display:none !important; }
.hero:has(.hero-slide) .btn-ghost{ color:var(--ivory); border-color:var(--line-strong); }


/* ---- Journey timeline: heavier year + project name, and a lift-and-zoom when
   the cursor is on a milestone. Cormorant Garamond is only loaded up to 600,
   so the title stops there rather than asking the browser to fake a 700. ---- */
.journey-stop .journey-year{
  font-weight:800;
  font-size:clamp(0.76rem, 0.9vw, 0.86rem);
  letter-spacing:0.12em;
}
.journey-stop .journey-title{
  font-weight:600;
  font-size:clamp(1.12rem, 1.45vw, 1.38rem);
  line-height:1.22;
  max-width:20ch;
  /* Reserve two lines so a wrapped name (e.g. Hind Prasad Nagar & Swami
     Samarth Vasahat) does not push its badge out of line with the others. */
  min-height:2.44em;
  display:flex; align-items:center; justify-content:center;
}
.journey-stop .journey-tag{
  font-size:clamp(0.78rem, 0.95vw, 0.86rem);
  line-height:1.45;
  max-width:22ch;
  min-height:2.9em;
  display:flex; align-items:center; justify-content:center;
}
.journey-stop .journey-badge{ width:58px; height:58px; }

.journey-stop{
  position:relative;
  transition:transform .45s var(--ease);
  transform-origin:center center;
}
.journey-stop:hover{ transform:scale(1.05); z-index:4; }
.journey-stop .journey-badge,
.journey-stop .journey-title{
  transition:transform .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease), color .45s var(--ease);
}
.journey-stop:hover .journey-badge{
  transform:scale(1.12);
  border-color:var(--gold);
  box-shadow:0 10px 26px -12px rgba(169,134,63,0.55);
}
.journey-stop:hover .journey-title{ color:var(--gold); }

@media (prefers-reduced-motion: reduce){
  .journey-stop,
  .journey-stop .journey-badge,
  .journey-stop .journey-title{ transition:none; }
  .journey-stop:hover,
  .journey-stop:hover .journey-badge{ transform:none; }
}


/* ---- Journey timeline on phones: the theme hides .journey-row below 900px in
   favour of a .journey-mobile block that front-page.php never actually renders,
   which left the whole Milestones section blank on phones. Reflow the real rows
   into one chronological column instead: display:contents lifts the stops out of
   their two rows so they can be interleaved 2001, 2004, 2007 ... in order. ---- */
@media (max-width: 900px){
  .journey-road-wrap{ display:none; }
  .journey .wrap{ display:grid; grid-template-columns:1fr; gap:0; }
  .journey .wrap > .section-head{ margin-bottom:1.6rem; }
  .journey-row{ display:contents !important; }

  .journey-row .journey-stop{
    padding-block:1.5rem;
    border-top:1px solid var(--line);
  }
  .journey-row.bottom .journey-stop{ flex-direction:column-reverse; }
  .journey-row.top .journey-stop:nth-child(1){ border-top:0; order:1; }
  .journey-row.bottom .journey-stop:nth-child(1){ order:2; }
  .journey-row.top .journey-stop:nth-child(2){ order:3; }
  .journey-row.bottom .journey-stop:nth-child(2){ order:4; }
  .journey-row.top .journey-stop:nth-child(3){ order:5; }
  .journey-row.bottom .journey-stop:nth-child(3){ order:6; }
  .journey-row.top .journey-stop:nth-child(4){ order:7; }
  .journey-row.bottom .journey-stop:nth-child(4){ order:8; }

  /* The 1-4 counters repeat across the two rows, which reads as 1,1,2,2...
     once the rows are stacked into one column. The year carries the sequence. */
  .journey-row .journey-num,
  .journey-row .journey-connector{ display:none; }

  .journey-stop .journey-title,
  .journey-stop .journey-tag{ min-height:0; max-width:30ch; }
}


/* ---- Cut-out project renders (Sree Ram Towers, Vijay Residency, Suman
   Enclave). These three are studio cut-outs on white, not photographs, so
   cropping them into the card's landscape window slices the top of the tower
   and the project wordmark. Show each one whole on a white tile instead, with
   the site's photo colour grade switched off so the white stays white. ---- */
.project-card[href*="/sree-ram-towers/"] .p-media,
.project-card[href*="/vijay-residency/"] .p-media,
.project-card[href*="/suman-enclave/"] .p-media{
  /* Match the card body so the media area and the caption read as one cream
     tile, and isolate so the blend below isn't composited against the page.
     !important because the Customizer CSS sets .projects-archive-grid
     .project-card .p-media to --charcoal-2 at the same specificity, later. */
  background:var(--black-soft) !important;
  isolation:isolate;
}

.project-card[href*="/sree-ram-towers/"] .p-media img,
.project-card[href*="/vijay-residency/"] .p-media img,
.project-card[href*="/suman-enclave/"] .p-media img{
  box-sizing:border-box;
  object-fit:contain;
  padding:0.5rem;
  filter:none;
  /* The renders are cut-outs on a white backdrop. Multiply maps that white
     exactly onto the tile colour underneath, so the building sits on the card
     instead of inside a white rectangle -- no alpha channel needed. */
  mix-blend-mode:multiply;
}

.project-card-static:has(img[src*="sree-ram-towers-cutout"]) .p-media{
  background:var(--black-soft) !important;
  isolation:isolate;
}
.project-card-static:has(img[src*="sree-ram-towers-cutout"]) .p-media img{
  box-sizing:border-box;
  object-fit:contain;
  padding:0.5rem;
  filter:none;
  mix-blend-mode:multiply;
}

.body-lg > * + *{ margin-top:1.5rem; }
.body-lg h2{ margin-top:2.4rem; font-size:clamp(1.3rem,2vw,1.7rem); }
.body-lg h3{ margin-top:2rem; font-size:clamp(1.15rem,1.6vw,1.4rem); }
.body-lg ul, .body-lg ol{ padding-left:1.4rem; display:flex; flex-direction:column; gap:0.6rem; }
.body-lg ul{ list-style:disc; }
.body-lg ol{ list-style:decimal; }
.body-lg a{ color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong); transition:text-decoration-color .3s var(--ease); }
.body-lg a:hover{ text-decoration-color:var(--gold-light); }