/* =====================================================
AKRUTI — BRAND ACCENT LAYER
Loads AFTER assets/css/style.css and only ever adds.
Nothing in the approved design is edited, so deleting
this file returns the site to the prototype exactly.
Three jobs:
01. Introduce the blue from the logo identity
02. Slow and smooth the motion (premium easing)
03. Accessibility + craft details the prototype lacked
===================================================== */
/* =====================================================
01. BRAND TOKENS
===================================================== */
:root {
/* Sampled from AAD-Logo.png (the retained logo):
logo blue #00AEEF, logo yellow #FFCB08.
The bright logo blue fails AA as text on a light
ground, so --accent is a darker azure of the same
family for text-sized use; --accent-bright is the
literal logo blue for fills, large graphics and
accents on near-black sections. */
--accent: #0A6E92;
--accent-strong: #075E80;
--accent-soft: rgba(0, 174, 239, 0.12);
--accent-bright: #00AEEF;
/* Considered easing — long and decelerating.
The design's own --transition stays untouched. */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--transition-slow: 0.7s var(--ease-out-expo);
--transition-image: 1.2s var(--ease-out-expo);
}
/* =====================================================
02. THE ACCENT
One colour, used sparingly: eyebrows, numerals and
link underlines. Restraint is the point — a second
accent would undo it.
===================================================== */
.eyebrow,
.about-small-label,
.service-section-label span,
.project-detail-section-label,
.mega-info-label {
color: var(--accent);
}
.story-number,
.service-number,
.project-number,
.service-offering-number,
.project-detail-section-number,
.mega-nav-item span,
.mega-service-link span {
color: var(--accent);
}
.service-arrow,
.footer-logo-mark {
color: var(--accent);
}
/* Link underline that draws in from the left */
.text-link {
position: relative;
padding-bottom: 4px;
}
.text-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-slow);
}
.text-link:hover::after,
.text-link:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
/* Buttons pick up the accent on hover only.
--accent-strong (not the context-variable --accent) so
the white label keeps ~7:1 whether the button sits on a
light page or inside a re-scoped dark section. */
.outline-button:hover {
border-color: var(--accent-strong);
background-color: var(--accent-strong);
color: var(--white);
}
.dark-button:hover {
background-color: var(--accent-strong);
border-color: var(--accent-strong);
}
/* Service rows warm on hover rather than simply darkening */
.service-item:hover .service-number,
.service-item:hover .service-arrow {
color: var(--accent);
}
/* =====================================================
03. MOTION QUALITY
Longer, decelerating transitions on the elements that
carry the site's character.
===================================================== */
.outline-button,
.dark-button,
.service-item,
.service-arrow,
.project-link,
.mega-nav-item,
.mega-service-link {
transition:
color var(--transition-slow),
background-color var(--transition-slow),
border-color var(--transition-slow),
transform var(--transition-slow),
opacity var(--transition-slow);
}
/*
Image reveals settle from a slight overscale instead of
fading. Reads as deliberate rather than "animated".
*/
.stacked-project img,
.about-story-image img,
.project-image img,
.about-project-image img,
.service-gallery-image img {
transition: transform var(--transition-image);
will-change: transform;
}
.project-card:hover .project-image img,
.about-project:hover .about-project-image img,
.service-gallery-image:hover img {
transform: scale(1.04);
}
/* Scroll-reveal blocks on the About page */
.about-split-text,
.about-split-image {
transition:
opacity var(--transition-slow),
transform var(--transition-slow);
}
/* =====================================================
04. ACCESSIBILITY & CRAFT
Absent from the prototype. Their absence is what makes
a site feel unfinished even when the layout is good.
===================================================== */
/*
Visible focus for keyboard users. :focus-visible keeps
it off mouse clicks, so the design is unaffected.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Skip link — hidden until focused */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 9999;
padding: 12px 20px;
background-color: var(--black);
color: var(--white);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: top var(--transition-slow);
}
.skip-link:focus {
top: 16px;
}
/*
Honour a reduced-motion preference. The scroll effects
are decoration; the layout must survive without them.
*/
@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;
}
/*
The stacked-project stage hides inactive slides via
opacity. With motion off they must all still be
reachable, so the stage falls back to a plain stack.
*/
.stacked-project {
opacity: 1 !important;
position: relative !important;
transform: none !important;
}
.about-split-text,
.about-split-image {
opacity: 1 !important;
transform: none !important;
}
}
/* =====================================================
05. WORDPRESS INTEGRATION
Small corrections for markup WordPress emits that the
prototype never had to account for.
===================================================== */
.admin-bar .site-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .site-header {
top: 46px;
}
}
/* WP alignment classes inside the editor content areas */
.alignleft {
float: left;
margin-right: 2rem;
}
.alignright {
float: right;
margin-left: 2rem;
}
.aligncenter {
display: block;
margin-inline: auto;
}
/* Screen-reader-only text (used by WP core and our labels) */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* =====================================================
06. NO HOTLINKED IMAGERY
style.css hardcodes an Unsplash URL as the hero
background. front-page.php supplies the real image as
an inline style; killing it here means a site with no
hero set yet shows a flat brand colour rather than
somebody else's photograph.
===================================================== */
.hero-image {
background-image: none;
background-color: var(--dark);
}
/* =====================================================
07. PROJECT CATEGORY FILTER
===================================================== */
.projects-filter {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: min(calc(100% - 80px), var(--container));
margin: 0 auto 80px;
padding-bottom: 28px;
border-bottom: 1px solid var(--border);
}
.projects-filter-item {
padding: 10px 22px;
border: 1px solid var(--border);
border-radius: 100px;
background: transparent;
color: var(--muted);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition:
color var(--transition-slow),
border-color var(--transition-slow),
background-color var(--transition-slow);
}
.projects-filter-item:hover {
color: var(--text);
border-color: var(--accent);
}
.projects-filter-item.is-active {
background-color: var(--black);
border-color: var(--black);
color: var(--cream);
}
.projects-empty-filter {
width: min(calc(100% - 80px), var(--container));
margin: 0 auto;
padding: 80px 0;
color: var(--muted);
text-align: center;
}
/* =====================================================
08. SALIENT FEATURES
The client portfolio numbers these for every project.
Set as an editorial list, not bullet points.
===================================================== */
.project-features {
width: min(calc(100% - 80px), var(--container));
margin: 0 auto;
padding: 120px 0;
display: grid;
grid-template-columns: 220px 1fr;
gap: 60px;
border-top: 1px solid var(--border);
}
.project-features-label span {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.project-features-list {
list-style: none;
counter-reset: feature;
margin: 0;
padding: 0;
display: grid;
gap: 28px;
}
.project-feature {
counter-increment: feature;
position: relative;
padding-left: 64px;
max-width: 60ch;
font-size: 1.05rem;
line-height: 1.7;
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--transition-slow),
transform var(--transition-slow);
}
.project-feature.is-visible {
opacity: 1;
transform: none;
}
.project-feature::before {
content: counter(feature, decimal-leading-zero);
position: absolute;
left: 0;
top: 2px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--accent);
}
@media (max-width: 900px) {
.project-features {
grid-template-columns: 1fr;
gap: 32px;
padding: 80px 0;
}
}
/* =====================================================
09. CLIENT QUOTE
Set large. These are the strongest material the firm
has and most competitors bury them in a carousel.
===================================================== */
.project-quote {
background-color: var(--black);
color: var(--cream);
padding: 140px 0;
}
.project-quote-inner {
width: min(calc(100% - 80px), 1000px);
margin: 0 auto;
border: 0;
padding: 0;
}
.project-quote-inner p {
font-family: "Playfair Display", serif;
font-size: clamp(1.6rem, 3vw, 2.6rem);
line-height: 1.35;
margin-bottom: 40px;
text-wrap: balance;
}
.project-quote-inner p::before {
content: "\201C";
color: var(--accent);
}
.project-quote-inner p::after {
content: "\201D";
color: var(--accent);
}
.project-quote-inner cite {
display: block;
font-style: normal;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--warm);
}
/* =====================================================
10. PROJECT GALLERY
===================================================== */
.project-gallery {
width: min(calc(100% - 80px), var(--container));
margin: 0 auto;
padding: 120px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
}
.project-gallery-image {
margin: 0;
overflow: hidden;
}
.project-gallery-image img {
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform var(--transition-image);
}
.project-gallery-image:hover img {
transform: scale(1.04);
}
/* =====================================================
11. SCOPE / CLIENT LINES ON A PROJECT
===================================================== */
.project-detail-scope,
.project-detail-client {
margin-top: 24px;
font-size: 0.95rem;
color: var(--muted);
}
.project-detail-scope strong,
.project-detail-client strong {
display: block;
margin-bottom: 4px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
/* =====================================================
12. COUNTERS & AWARDS (About page)
===================================================== */
.akruti-counters {
width: min(calc(100% - 80px), var(--container));
margin: 0 auto;
padding: 120px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 48px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.akruti-counter-value {
display: block;
font-family: "Playfair Display", serif;
font-size: clamp(3rem, 6vw, 5rem);
line-height: 1;
color: var(--text);
}
.akruti-counter-value .akruti-counter-suffix {
color: var(--accent);
}
.akruti-counter-label {
display: block;
margin-top: 16px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.akruti-awards {
width: min(calc(100% - 80px), var(--container));
margin: 0 auto;
padding: 120px 0;
}
.akruti-award {
display: grid;
grid-template-columns: 220px 1fr;
gap: 60px;
padding: 48px 0;
border-top: 1px solid var(--border);
}
.akruti-award:last-child {
border-bottom: 1px solid var(--border);
}
.akruti-award-year {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--accent);
}
.akruti-award-body h3 {
margin-bottom: 12px;
}
.akruti-award-body p {
max-width: 60ch;
color: var(--muted);
}
@media (max-width: 900px) {
.akruti-award {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* =====================================================
13. PAGE CONTENT (Elementor pages)
===================================================== */
.page-content-builder .page-entry {
padding-top: 0;
}
.page-content:not(.page-content-builder) .page-entry {
width: min(calc(100% - 80px), 900px);
margin: 0 auto;
padding: 0 0 120px;
}
/* =====================================================
14. TESTIMONIAL BACKGROUND
style.css points .about-testimonials at
assets/images/testimonials/testimonial-bg.jpg, which
the prototype never shipped - the images folder was
empty. page-about.php supplies the real image inline
from the Media Library; this stops the missing file
404ing on every visit until one is chosen.
===================================================== */
.about-testimonials {
background-image: none;
background-color: var(--black);
}
/* No client photographs, so the avatar is hidden rather
than filled with a stock face. Keeps the author line
aligned when it is. */
.testimonial-author-image[hidden] {
display: none;
}
/* =====================================================
15. CONTACT PAGE
Built from scratch — the prototype shipped contact.php
as a 0-byte file. Styled from the same tokens as the
rest of the site so it does not read as bolted on.
===================================================== */
.contact-layout {
width: min(calc(100% - 80px), var(--container));
margin: 0 auto;
padding: 40px 0 120px;
display: grid;
grid-template-columns: minmax(260px, 380px) 1fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) {
.contact-layout {
grid-template-columns: 1fr;
gap: 56px;
padding-bottom: 80px;
}
}
/* ---------- Details column ---------- */
.contact-detail-block {
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid var(--border);
}
.contact-detail-block:last-child {
border-bottom: 0;
}
.contact-detail-label {
display: block;
margin-bottom: 12px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.contact-detail-value {
display: block;
font-size: 1.05rem;
line-height: 1.7;
color: var(--text);
}
a.contact-detail-value {
transition: color var(--transition-slow);
}
a.contact-detail-value:hover {
color: var(--accent);
}
.contact-whatsapp {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
transition:
color var(--transition-slow),
border-color var(--transition-slow),
background-color var(--transition-slow);
}
.contact-whatsapp:hover {
background-color: var(--accent);
border-color: var(--accent);
color: var(--white);
}
/* ---------- Form ---------- */
.contact-form-wrap {
background-color: var(--white);
padding: clamp(28px, 4vw, 56px);
}
.contact-field {
margin-bottom: 28px;
}
.contact-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 640px) {
.contact-field-row {
grid-template-columns: 1fr;
gap: 0;
}
}
.contact-field label {
display: block;
margin-bottom: 10px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.contact-field label span {
color: var(--accent);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 2px;
background-color: transparent;
color: var(--text);
font-size: 1rem;
transition: border-color var(--transition-slow);
}
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
border-color: var(--muted);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
border-color: var(--accent);
outline: none;
}
.contact-field textarea {
resize: vertical;
min-height: 150px;
}
.contact-field-hint {
margin: -14px 0 28px;
font-size: 0.85rem;
color: var(--muted);
}
.contact-submit {
cursor: pointer;
border: 1px solid var(--black);
}
/* The honeypot must be unreachable, not merely invisible. */
.contact-field-hp {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------- Notices ---------- */
.contact-notice {
margin-bottom: 32px;
padding: 18px 22px;
border-left: 3px solid var(--accent);
background-color: var(--cream);
font-size: 0.98rem;
}
.contact-notice-success {
border-left-color: #3F7A5A;
}
.contact-notice-error {
border-left-color: #C0392B;
}
/* ---------- Map ---------- */
.contact-map {
width: 100%;
line-height: 0;
border-top: 1px solid var(--border);
}
.contact-map iframe {
display: block;
width: 100%;
filter: grayscale(1) contrast(1.05);
transition: filter var(--transition-image);
}
.contact-map:hover iframe {
filter: none;
}
/* =====================================================
16. MOBILE NAVBAR (fix)
style.css lays the frosted navbar out as a
`1fr auto 1fr` grid holding a padded "Our Projects"
pill, a wide centre logo, and a nav-right group with a
35px gap. Its only mobile rule targets the older
.navbar, not `.site-header .navbar`, so at 375px the
three columns total ~474px: the hamburger lands at
x=428, outside the viewport, and body{overflow-x:hidden}
clips it away. Mobile visitors were left with no
navigation at all.
Most of this practice's enquiries arrive on a phone, so
this is corrected here rather than left to the design.
===================================================== */
@media (max-width: 782px) {
.site-header .navbar {
grid-template-columns: 1fr auto;
height: 84px;
padding: 0 18px;
}
/* Both are reachable from the menu panel, and neither
survives the width. */
.site-header .nav-portfolio,
.site-header .nav-est {
display: none;
}
.site-header .nav-logo {
justify-self: start;
}
.site-header .nav-right {
gap: 0;
justify-self: end;
}
.site-header .menu-toggle {
/* Comfortably above the 44px minimum touch target. */
min-width: 48px;
min-height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
@media (max-width: 420px) {
.site-header .nav-logo-main {
font-size: 1.15rem;
}
.site-header .nav-logo-sub {
font-size: 0.52rem;
letter-spacing: 0.16em;
}
}
/* Section padding is tuned for desktop; 80px of side
margin leaves very little line length on a phone. */
@media (max-width: 700px) {
.projects-filter,
.projects-empty-filter,
.project-features,
.project-gallery,
.akruti-counters,
.akruti-awards,
.contact-layout,
.page-content:not(.page-content-builder) .page-entry {
width: calc(100% - 40px);
}
.akruti-counters {
gap: 32px;
padding: 72px 0;
}
}
/* =====================================================
17. PROGRESSIVE ENHANCEMENT
style.css starts every scroll-reveal at opacity:0 and
relies on JavaScript to add the class that shows it.
That means a script failure, a blocked file, or JS
turned off leaves the About page and the project
feature lists rendering as blank space.
header.php adds `js` to before anything paints,
so the hidden starting state only applies when
JavaScript is actually available to undo it.
===================================================== */
html:not(.js) .about-split-text,
html:not(.js) .about-split-image,
html:not(.js) .project-feature,
html:not(.js) .service-about,
html:not(.js) .service-offering,
html:not(.js) .service-gallery-image,
html:not(.js) .service-element,
html:not(.js) .service-cta,
html:not(.js) .project-card {
opacity: 1 !important;
transform: none !important;
}
/* Without JS the stacked stage cannot advance, so show
every slide as a plain sequence rather than one frozen
image with three hidden behind it. */
html:not(.js) .stacked-project {
opacity: 1 !important;
position: relative !important;
}
/* =====================================================
18. PALETTE NORMALISATION
The About page was signed off as correct. It is the one
page whose sections use ONLY the design tokens:
paper #F6F8F9 page ground (cool off-white)
warm var(--warm) #FDF3D2 banded section (soft logo yellow)
black var(--black) #171717 inverted section
accent var(--accent) labels and numerals (logo blue)
Elsewhere style.css hardcodes eleven near-miss values
that never quite match — #111, #000, #1b1b1b, #111820
(a blue-tinted black), and three different creams
(#e9dfcf, #f4f0e8, #e8dfd0). Side by side they read as
drift rather than intent, which is why About looked
right and the rest did not.
Everything below simply points those at the tokens.
No new colours are introduced.
===================================================== */
/* ---------- Darks → var(--black) ---------- */
.stacked-project,
.project-card,
.project-detail-hero,
.project-detail-closing,
.site-footer,
.service-offerings {
background-color: var(--black);
}
/* On the deep-blue-black sections the accent is the LOGO
YELLOW, not blue — #FFCB08 reads ~11.8:1 on the navy and
carries the brand harder there (Mileend's call, Sep 2026).
Re-scoped via the token so every `color: var(--accent)`
nested in these resolves to yellow automatically. This
list must stay in sync with every section that carries a
var(--black) / navy background (see §14, §18, §21, §36
and the style.css dark sections). */
.stacked-project,
.project-card,
.project-detail-hero,
.project-detail-closing,
.project-detail-hero-image,
.project-detail-section-image,
.project-quote,
.about-testimonials,
.service-offerings,
.service-elements,
.contact-cta,
.site-footer,
.akruti-footer,
.hero-image,
#megaMenu,
.mega-menu,
.mega-menu-info {
--accent: #FFCB08;
}
/* Image wells sit one step lighter so a loading or
letterboxed photo still separates from the section. */
.project-detail-hero-image,
.project-detail-section-image {
background-color: var(--dark);
}
/* ---------- Creams → var(--cream) ---------- */
.projects-page,
.service-page,
.service-cta,
.project-back-link:hover {
background-color: var(--cream);
}
/* =====================================================
19. SECTION RHYTHM
About alternates paper → warm → dark, and that banding
is what gives it structure. The flatter pages get the
same treatment: one warm band to break the page, so
they stop reading as a single undifferentiated sheet.
===================================================== */
.services-section {
background-color: var(--warm);
}
.contact-layout {
background-color: var(--warm);
/* full-bleed band, inner content still constrained */
width: 100%;
max-width: none;
padding-inline: max(40px, calc((100% - var(--container)) / 2));
padding-block: 100px;
}
@media (max-width: 700px) {
.contact-layout {
padding-inline: 20px;
padding-block: 64px;
}
}
/* The form card reads as a card now that it sits on warm
rather than on near-identical paper. */
.contact-form-wrap {
box-shadow: 0 1px 40px rgba(23, 23, 23, 0.06);
}
/* =====================================================
20. LOGO SIZING
style.css only ever styled the text lockup, so the
uploaded logo image has no size ceiling of its own.
===================================================== */
.nav-logo img,
.nav-logo-image {
width: auto;
max-width: 240px;
max-height: 52px;
object-fit: contain;
}
@media (max-width: 782px) {
.nav-logo img,
.nav-logo-image {
max-width: 190px;
max-height: 42px;
}
}
@media (max-width: 420px) {
.nav-logo img,
.nav-logo-image {
max-width: 150px;
max-height: 36px;
}
}
/* =====================================================
21. FOOTER
Rebuilt to the reference the client supplied: oversized
wordmark, large navigation column, details set beneath
in two labelled columns.
The reference used a warm brown ground; this uses
Akruti's own --black so the footer matches the
testimonials band and the project quote rather than
introducing a colour the brand does not have.
===================================================== */
.akruti-footer {
background-color: var(--black);
color: var(--cream);
padding: clamp(64px, 8vw, 120px) 0 0;
}
.akruti-footer-grid {
width: min(calc(100% - 80px), var(--container));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(220px, 1fr) 2fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
}
/* ---------- Large navigation ---------- */
.akruti-footer-nav {
display: flex;
flex-direction: column;
gap: clamp(8px, 1.2vw, 16px);
}
.akruti-footer-nav-item {
position: relative;
font-family: "Playfair Display", serif;
font-size: clamp(1.6rem, 2.6vw, 2.6rem);
line-height: 1.15;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--cream);
transition: color var(--transition-slow);
}
.akruti-footer-nav-item:hover {
color: var(--accent);
}
/* The small ring against the first item, as in the reference */
.akruti-footer-nav-marker {
position: absolute;
left: -22px;
top: 0.62em;
width: 8px;
height: 8px;
border: 1px solid var(--warm);
border-radius: 50%;
}
/* ---------- Oversized wordmark ---------- */
.akruti-footer-wordmark {
display: block;
margin-bottom: clamp(40px, 5vw, 72px);
}
.akruti-footer-wordmark-main {
display: block;
font-family: "Playfair Display", serif;
font-weight: 400;
/* Fills the column the way the reference does */
font-size: clamp(2.4rem, 6vw, 4.25rem);
line-height: 0.9;
letter-spacing: 0.06em;
color: var(--cream);
}
.akruti-footer-wordmark-sub {
display: block;
margin-top: 14px;
font-size: clamp(0.62rem, 0.9vw, 0.78rem);
font-weight: 600;
letter-spacing: 0.42em;
color: var(--accent);
}
/* ---------- Detail columns ---------- */
.akruti-footer-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
}
.akruti-footer-block {
margin-bottom: 34px;
}
.akruti-footer-block:last-child {
margin-bottom: 0;
}
.akruti-footer-label {
display: block;
margin-bottom: 10px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.akruti-footer-block p,
.akruti-footer-block a {
display: block;
font-size: 0.92rem;
line-height: 1.65;
color: var(--warm);
}
.akruti-footer-block a {
transition: color var(--transition-slow);
}
.akruti-footer-block a:hover {
color: var(--cream);
}
.akruti-footer-muted {
opacity: 0.72;
}
/* ---------- Bottom bar ---------- */
.akruti-footer-bottom {
width: min(calc(100% - 80px), var(--container));
margin: clamp(56px, 7vw, 96px) auto 0;
padding: 28px 0;
border-top: 1px solid rgba(233, 236, 238, 0.16);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
font-size: 0.76rem;
letter-spacing: 0.06em;
color: var(--warm);
opacity: 0.75;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.akruti-footer-grid {
grid-template-columns: 1fr;
gap: 56px;
}
.akruti-footer-nav-marker {
left: -18px;
}
}
@media (max-width: 700px) {
.akruti-footer-grid,
.akruti-footer-bottom {
width: calc(100% - 40px);
}
.akruti-footer-meta {
grid-template-columns: 1fr;
gap: 0;
}
.akruti-footer-bottom {
flex-direction: column;
gap: 8px;
}
}
/* =====================================================
22. PROJECT FILTER — HIDING
The browser's own rule for [hidden] is `display: none`,
but it is a UA-stylesheet rule with almost no
specificity. style.css sets `.project-card { display:
grid }`, which beats it outright — so setting hidden in
JavaScript marked the cards hidden to assistive tech
while leaving them fully painted on screen. Clicking a
category appeared to do nothing.
This is the rule that actually removes them.
===================================================== */
.project-card[hidden] {
display: none !important;
}
/* Filtered results settle in rather than snapping */
.project-card {
animation: akrutiCardIn 0.5s var(--ease-out-expo) both;
}
@keyframes akrutiCardIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.project-card {
animation: none;
}
}
/* Filter pills sit at 41px tall by default — just under the 44px minimum
touch target. Most of this practice's traffic is mobile, so give them
the extra few pixels on small screens. */
@media (max-width: 782px) {
.projects-filter-item {
min-height: 44px;
padding-block: 12px;
}
.projects-filter {
gap: 10px;
margin-bottom: 56px;
}
}
/* =====================================================
23. PRINCIPALS / LEADERSHIP
A portrait photograph beside the two named principals.
Sits on the warm band so it separates from the mission
section above it without needing a rule.
===================================================== */
.akruti-principals {
background-color: var(--warm);
padding: clamp(72px, 9vw, 130px) 0;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 90px);
align-items: center;
}
/* Constrain the inner content to the site container while
letting the band itself run full width. */
.akruti-principals > * {
max-width: calc(var(--container) / 2);
}
.akruti-principals-image {
justify-self: end;
padding-left: max(40px, calc((100% - var(--container) / 2)));
width: 100%;
}
.akruti-principals-content {
justify-self: start;
padding-right: max(40px, 0px);
}
.akruti-principals-image img {
display: block;
width: 100%;
max-width: 420px;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center 22%;
transition: transform var(--transition-image);
}
.akruti-principals-image:hover img {
transform: scale(1.02);
}
.akruti-principals-content h2 {
margin: 14px 0 24px;
}
.akruti-principals-content > p {
max-width: 56ch;
line-height: 1.75;
}
/* ---------- The two named principals ---------- */
.akruti-principals-list {
list-style: none;
margin: 36px 0 0;
padding: 0;
display: grid;
gap: 20px;
}
.akruti-principal {
display: grid;
grid-template-columns: 44px 1fr;
grid-template-areas:
"num name"
"num role";
align-items: baseline;
padding-top: 18px;
border-top: 1px solid rgba(23, 23, 23, 0.16);
}
.akruti-principal-number {
grid-area: num;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--accent);
}
.akruti-principal-name {
grid-area: name;
font-family: "Playfair Display", serif;
font-size: clamp(1.25rem, 1.8vw, 1.6rem);
line-height: 1.25;
color: var(--text);
}
.akruti-principal-role {
grid-area: role;
margin-top: 4px;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.akruti-principals-note {
margin-top: 32px;
max-width: 52ch;
font-size: 0.95rem;
line-height: 1.7;
color: var(--muted);
border-left: 2px solid var(--accent);
padding-left: 18px;
}
/* ---------- Image on the right ---------- */
.akruti-principals-right {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}
.akruti-principals-right .akruti-principals-image {
order: 2;
justify-self: start;
padding-left: 0;
padding-right: max(40px, 0px);
}
.akruti-principals-right .akruti-principals-content {
order: 1;
justify-self: end;
padding-right: 0;
padding-left: max(40px, calc((100% - var(--container) / 2)));
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.akruti-principals,
.akruti-principals-right {
grid-template-columns: 1fr;
gap: 40px;
}
.akruti-principals > * {
max-width: none;
}
.akruti-principals-image,
.akruti-principals-content,
.akruti-principals-right .akruti-principals-image,
.akruti-principals-right .akruti-principals-content {
justify-self: stretch;
order: initial;
padding-inline: max(20px, calc((100% - var(--container)) / 2));
}
.akruti-principals-image img {
max-width: 360px;
margin-inline: auto;
}
}
/* =====================================================
24. LOGO SHAPE
A wide lockup can be capped by width. A stacked mark
(logo above the wordmark) needs a taller ceiling or its
strapline renders at two or three pixels. header.php
adds .nav-logo-wide / .nav-logo-stacked from the
uploaded file's aspect ratio.
===================================================== */
.nav-logo-stacked img {
max-width: none;
max-height: 68px;
width: auto;
}
@media (max-width: 782px) {
.nav-logo-stacked img {
max-height: 50px;
}
}
@media (max-width: 420px) {
.nav-logo-stacked img {
max-height: 42px;
}
}
/* The frosted navbar is dark; a logo drawn for light
backgrounds needs lifting off it. */
.site-header .nav-logo img {
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.28));
}
/* =====================================================
25. AWARD SEAL
Inline SVG rather than a stock icon — it inherits the
text colour, stays crisp at any size, and matches the
thin-line drawing in the identity.
===================================================== */
.akruti-award {
grid-template-columns: 220px 1fr;
}
.akruti-award-mark {
display: flex;
align-items: center;
gap: 14px;
}
.akruti-award-icon {
width: 46px;
height: 46px;
flex-shrink: 0;
color: var(--text);
transition: transform var(--transition-slow);
}
.akruti-award:hover .akruti-award-icon {
transform: rotate(-6deg) scale(1.06);
}
.akruti-award-year {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
/* The heading gets a hairline rule so the section reads
as a record rather than a loose paragraph. */
.akruti-awards .about-section-heading {
margin-bottom: 8px;
}
@media (max-width: 900px) {
.akruti-award {
grid-template-columns: 1fr;
}
.akruti-award-mark {
margin-bottom: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.akruti-award:hover .akruti-award-icon {
transform: none;
}
}
/* =====================================================
26. NATIVE NAVBAR
The header is now built from real Elementor widgets so
it can actually be edited. style.css styles `.navbar`,
a 1fr/auto/1fr grid of hand-written markup — that no
longer exists, so the frosted bar is rebuilt here
against `.akruti-nav` instead.
`.site-header` still wraps it, which keeps the fixed
positioning and the scroll hide/show in main.js.
===================================================== */
.akruti-nav {
width: 100%;
min-height: 110px;
padding: 0 4vw;
background: rgba(20, 20, 20, 0.28);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
/* Left link, styled as the outlined pill from the design */
.akruti-nav-link .elementor-button {
padding: 12px 30px;
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 100px;
background: transparent;
color: var(--white);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
transition:
background-color var(--transition-slow),
border-color var(--transition-slow),
color var(--transition-slow);
}
.akruti-nav-link .elementor-button:hover {
background-color: var(--accent);
border-color: var(--accent);
color: var(--white);
}
/* Centre logo */
.akruti-nav-logo img {
width: auto;
max-height: 68px;
object-fit: contain;
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.28));
}
/* Established date */
.akruti-nav-est,
.akruti-nav-est p {
margin: 0;
color: var(--warm);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
}
/* Hamburger */
.akruti-nav-toggle {
cursor: pointer;
}
.akruti-nav-toggle .elementor-icon {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
color: var(--white);
transition: color var(--transition-slow);
}
.akruti-nav-toggle:hover .elementor-icon {
color: var(--accent);
}
/* main.js adds .active to the toggle while the panel is
open; fade it out so the panel's own CLOSE reads as the
way back. */
.akruti-nav-toggle.active .elementor-icon {
opacity: 0.35;
}
/* ---------- Responsive ---------- */
@media (max-width: 782px) {
.akruti-nav {
min-height: 84px;
padding: 0 18px;
}
/* Both are reachable from the panel and neither
survives the width. */
.akruti-nav-link,
.akruti-nav-est {
display: none !important;
}
.akruti-nav-logo img {
max-height: 50px;
}
}
@media (max-width: 420px) {
.akruti-nav-logo img {
max-height: 42px;
}
}
/* -----------------------------------------------------
Navbar layout correction
Elementor lays the container out as flex:space-between.
With three children of unequal width that does NOT
centre the middle one — the logo drifts left toward the
narrower button. A three-column grid centres it against
the viewport regardless of what sits either side, which
is what the design intends.
Scoped under .site-header to beat Elementor's own
per-element stylesheet without !important.
----------------------------------------------------- */
.site-header .akruti-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.site-header .akruti-nav > .akruti-nav-link {
justify-self: start;
}
.site-header .akruti-nav > .akruti-nav-logo {
justify-self: center;
}
.site-header .akruti-nav > .akruti-nav-right {
justify-self: end;
}
/* Size the logo by height so any lockup keeps its ratio. */
.site-header .akruti-nav-logo img {
height: 68px;
width: auto;
max-width: none;
}
@media (max-width: 782px) {
/* With the pill and the date hidden, fall back to
logo-left / burger-right. */
.site-header .akruti-nav {
grid-template-columns: 1fr auto;
}
.site-header .akruti-nav > .akruti-nav-logo {
justify-self: start;
}
.site-header .akruti-nav-logo img {
height: 50px;
}
}
@media (max-width: 420px) {
.site-header .akruti-nav-logo img {
height: 42px;
}
}
/* =====================================================
27. EDITOR-ONLY: A COMPACT MEGA-MENU PLACEHOLDER
The panel is a fixed overlay, hidden until opened, so
inside the Elementor editor it used to render as a blank
"Drag widget here" box.
An earlier version of this rule unrolled the panel's full
content (every nav item, the whole info grid) into normal
document flow at full height — which looked like a huge
black block dropped into the middle of the canvas and made
the Site Header genuinely hard to edit. That was worse
than the empty box it replaced.
This version clips the real content out of view and shows
only a short, fixed-height label instead — visible,
selectable, but small. Front end is untouched (this whole
rule is scoped to the editor's own body class).
===================================================== */
body.elementor-editor-active .mega-menu {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: none !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
/* Not interactive in the editor anyway; this also stops
the clipped content underneath from being clickable. */
pointer-events: none !important;
overflow: hidden !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #F0F0F0 !important;
border: none !important;
}
body.elementor-editor-active .mega-menu::before {
content: "Navigation panel (hidden — edit via Appearance ▸ Menus)";
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 4px 12px;
background: transparent;
color: #777;
font-family: system-ui, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.03em;
text-align: center;
}
/* =====================================================
28. NATIVE FOOTER
The footer is now built from real Elementor widgets so
every part of it can be edited. Section 21 styled the
hand-written markup; these rules restate the same look
against Elementor's structure.
Scoped under .akruti-footer so they beat Elementor's
per-element stylesheet without !important.
===================================================== */
.akruti-footer .akruti-footer-grid {
display: grid;
grid-template-columns: minmax(220px, 1fr) 2fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
width: min(calc(100% - 80px), var(--container));
margin-inline: auto;
}
/* ---------- Navigation, from the WordPress Menu widget ---------- */
.akruti-footer-nav .elementor-nav-menu {
display: flex;
flex-direction: column;
gap: clamp(8px, 1.2vw, 16px);
}
.akruti-footer-nav .elementor-nav-menu a.elementor-item {
padding: 0 !important;
font-family: "Playfair Display", serif;
font-size: clamp(1.6rem, 2.6vw, 2.6rem);
line-height: 1.15;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--cream);
transition: color var(--transition-slow);
}
.akruti-footer-nav .elementor-nav-menu a.elementor-item:hover,
.akruti-footer-nav .elementor-nav-menu a.elementor-item.elementor-item-active {
color: var(--accent);
}
/* The small ring against the first item, as in the reference */
.akruti-footer-nav .elementor-nav-menu > li:first-child {
position: relative;
}
.akruti-footer-nav .elementor-nav-menu > li:first-child::before {
content: "";
position: absolute;
left: -22px;
top: 0.62em;
width: 8px;
height: 8px;
border: 1px solid var(--warm);
border-radius: 50%;
}
/* ---------- Wordmark ---------- */
.akruti-footer .akruti-footer-wordmark-main .elementor-heading-title {
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(2.4rem, 6vw, 4.25rem);
line-height: 0.9;
letter-spacing: 0.06em;
color: var(--cream);
}
.akruti-footer .akruti-footer-wordmark-sub .elementor-heading-title {
font-size: clamp(0.62rem, 0.9vw, 0.78rem);
font-weight: 600;
letter-spacing: 0.42em;
color: var(--accent);
}
.akruti-footer .akruti-footer-wordmark-sub {
margin-bottom: clamp(40px, 5vw, 72px);
}
/* ---------- Detail columns ---------- */
.akruti-footer .akruti-footer-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: start;
}
.akruti-footer .akruti-footer-label .elementor-heading-title {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.akruti-footer .akruti-footer-label {
margin-bottom: 10px;
}
.akruti-footer .akruti-footer-block,
.akruti-footer .akruti-footer-block p,
.akruti-footer .akruti-footer-block a {
font-size: 0.92rem;
line-height: 1.65;
color: var(--warm);
}
.akruti-footer .akruti-footer-block {
margin-bottom: 30px;
}
.akruti-footer .akruti-footer-block a {
transition: color var(--transition-slow);
}
.akruti-footer .akruti-footer-block a:hover {
color: var(--cream);
}
/* ---------- Bottom bar ---------- */
.akruti-footer .akruti-footer-bottom {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
width: min(calc(100% - 80px), var(--container));
margin: clamp(56px, 7vw, 96px) auto 0;
padding: 28px 0;
border-top: 1px solid rgba(233, 236, 238, 0.16);
}
.akruti-footer .akruti-footer-bottom p {
margin: 0;
font-size: 0.76rem;
letter-spacing: 0.06em;
color: var(--warm);
opacity: 0.75;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.akruti-footer .akruti-footer-grid {
grid-template-columns: 1fr;
gap: 56px;
}
}
@media (max-width: 700px) {
.akruti-footer .akruti-footer-grid,
.akruti-footer .akruti-footer-bottom {
width: calc(100% - 40px);
}
.akruti-footer .akruti-footer-meta {
grid-template-columns: 1fr;
gap: 0;
}
.akruti-footer .akruti-footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* =====================================================
29. LOGO SIZE
The mark is a stacked lockup — monogram over AKRUTI
over the strapline — so its third line is only about
9% of the artwork's height. At 68px that strapline
rendered around 6px tall and read as a smudge.
Taking the logo to 92px puts it near 8px, which is
legible, and the bar grows with it so the logo keeps
its breathing room rather than crowding the edges.
Headroom checked first: inner-page headings sit 284px
below the header, so the extra 18px causes no overlap.
The source is 308x304, so 92px is still a 3.3x
downscale — no softening.
===================================================== */
.site-header .akruti-nav {
min-height: 128px;
}
.site-header .akruti-nav-logo img {
height: 92px;
}
/* Theme-fallback header (used if the Elementor template
is ever removed) kept in step. */
.nav-logo-stacked img {
max-height: 92px;
}
@media (max-width: 1100px) {
.site-header .akruti-nav {
min-height: 116px;
}
.site-header .akruti-nav-logo img {
height: 80px;
}
}
@media (max-width: 782px) {
.site-header .akruti-nav {
min-height: 92px;
}
.site-header .akruti-nav-logo img {
height: 60px;
}
.nav-logo-stacked img {
max-height: 60px;
}
}
@media (max-width: 420px) {
.site-header .akruti-nav-logo img {
height: 50px;
}
.nav-logo-stacked img {
max-height: 50px;
}
}
/* -----------------------------------------------------
Lift the earlier max-height cap.
Section 26 set `.akruti-nav-logo img { max-height: 68px }`
back when 68px WAS the target. Section 29 raises `height`
but a max-height still clamps it, so the logo silently
stayed at 68px — the height was applied and then capped.
Setting max-height to none lets `height` alone drive it.
----------------------------------------------------- */
.site-header .akruti-nav-logo img,
.akruti-nav-logo img {
max-height: none;
}
/* =====================================================
30. PALE FROSTED NAVBAR
The bar was rgba(20,20,20,.28) — carried over from the
prototype, where the navbar held white text. The retained
logo is a bright yellow name-plate, so a dark bar fought
it. A pale cool glass lets the yellow mark sit clean.
Everything on the bar is re-coloured for contrast in
the same pass — a pale bar with white text would be
worse than what it replaces.
HEADER ONLY. The footer stays dark.
===================================================== */
.site-header .akruti-nav {
background: rgba(233, 236, 238, 0.78);
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
/* Over a cream page the bar is nearly the page colour,
so a hairline and a soft lift give it an edge. */
border-bottom: 1px solid rgba(23, 23, 23, 0.10);
box-shadow: 0 1px 24px rgba(23, 23, 23, 0.05);
}
/* style.css sets .site-header { color: var(--white) }. */
.site-header {
color: var(--text);
}
/* ---------- Logo ---------- */
/* The drop shadow existed to lift a light logo off a dark
bar. On cream it just looks dirty. */
.site-header .akruti-nav-logo img,
.site-header .nav-logo img {
filter: none;
}
/* ---------- "Our Projects" pill ---------- */
.akruti-nav-link .elementor-button {
border-color: rgba(23, 23, 23, 0.30);
color: var(--text);
}
.akruti-nav-link .elementor-button:hover {
background-color: var(--accent);
border-color: var(--accent);
color: var(--white);
}
/* ---------- Established date ---------- */
.akruti-nav-est,
.akruti-nav-est p {
color: var(--muted);
}
/* ---------- Hamburger ---------- */
.akruti-nav-toggle .elementor-icon {
color: var(--text);
}
.akruti-nav-toggle:hover .elementor-icon {
color: var(--accent);
}
/* Theme-fallback header kept in step. */
.site-header .nav-portfolio {
border-color: rgba(23, 23, 23, 0.30);
color: var(--text);
}
.site-header .nav-est {
color: var(--muted);
}
.site-header .nav-logo-main,
.site-header .nav-logo-sub {
color: var(--text);
}
.site-header .menu-toggle span {
background-color: var(--text);
}
/* -----------------------------------------------------
Two corrections to the pale bar.
1. At 0.78 the dark hero showed through enough to pull
the glass to a grey rgb(184,178,167) rather than the
cream it should read as. 0.88 keeps the frost — the
blur still works — while holding the colour.
2. --muted (#666158) measured 2.92:1 against the bar
over the hero, under the 4.5:1 minimum for text that
small. This tone clears AA against BOTH backdrops
the translucent bar sits on: 5.3:1 over the dark
hero, 8.3:1 over the cream inner pages.
----------------------------------------------------- */
.site-header .akruti-nav {
background: rgba(233, 236, 238, 0.88);
}
.akruti-nav-est,
.akruti-nav-est p,
.site-header .nav-est {
color: #33383B;
}
/* =====================================================
21. FLUENT FORMS — CONTACT FORM REPLICA
The enquiry form moved from the hand-coded shortcode to
the Fluent Forms (free) widget so Mileend can edit it in
Elementor. Fluent's own styling is generic Bootstrap-ish
grey — this section makes it a pixel-for-pixel replica of
the original .contact-form-wrap / .contact-field design,
scoped to .akruti-form-holder so nothing else on the site
is touched.
===================================================== */
.akruti-form-holder .fluentform {
background-color: #FFFFFF;
padding: clamp(28px, 4vw, 56px);
box-shadow: 0 1px 40px rgba(23, 23, 23, 0.06);
}
.akruti-form-holder .ff-el-group {
margin-bottom: 28px;
}
.akruti-form-holder .ff-el-input--label label,
.akruti-form-holder .ff-el-input--label {
display: block;
margin-bottom: 10px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.akruti-form-holder .ff-el-is-required .asterisk-right::after,
.akruti-form-holder .ff-el-is-required::after {
color: var(--accent);
}
.akruti-form-holder .ff-el-form-control {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 2px;
background-color: transparent;
color: var(--text);
font-size: 1rem;
transition: border-color var(--transition-slow);
}
.akruti-form-holder .ff-el-form-control:hover {
border-color: var(--muted);
}
.akruti-form-holder .ff-el-form-control:focus {
border-color: var(--accent);
outline: none;
}
.akruti-form-holder textarea.ff-el-form-control {
resize: vertical;
min-height: 150px;
}
.akruti-form-holder .ff_submit_btn_wrapper {
margin-bottom: 0;
}
/* Elementor writes an auto-generated per-post rule for the
widget's own default button colour — 6 chained classes
deep (.elementor-15 .elementor-element.elementor-element-
xxxx .fluentform-widget-wrapper .ff-el-group .ff-btn-submit)
and ALSO carries !important. A 2-class selector with
!important still loses to it on specificity, so this is
anchored to the form's own id (#fluentform_3) — an id beats
any number of chained classes regardless of !important. */
#fluentform_3 .ff-btn-submit {
display: inline-block !important;
padding: 16px 36px !important;
background-color: var(--black) !important;
color: var(--white) !important;
border: none !important;
border-radius: 0 !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
cursor: pointer;
transition: background-color var(--transition-slow);
}
#fluentform_3 .ff-btn-submit:hover {
background-color: var(--accent) !important;
}
/* =====================================================
22. SINGLE SERVICE TEMPLATE — shared CTA
The category label in the closing CTA now comes from
Elementor's built-in Post Title dynamic tag (works for
every post automatically, no per-post config) rather than
the old ACF-style "category" meta field, which was never
pre-uppercased for this purpose. Original PHP called
strtoupper() before output; this replicates that in CSS.
===================================================== */
.service-cta-inner > span {
text-transform: uppercase;
}
/* =====================================================
23. SCROLL-REVEAL SECTIONS — always visible in the editor
.about-split-text/image, .project-reveal, .project-card
and .service-about/.service-offering/.service-gallery-image/
.service-element/.service-cta all start at opacity:0 and
only reach opacity:1 once main.js's IntersectionObserver
sees them scroll into view. That never fires reliably
inside Elementor's editor canvas (same root cause as the
Site Header mega-menu overrun fixed earlier) — the content
is there, it is just permanently invisible, which reads as
a huge blank gap between sections while editing. Front-end
visitor behaviour is untouched; this only forces the
"already revealed" state inside the editor iframe.
===================================================== */
body.elementor-editor-active .about-split-text.reveal-left,
body.elementor-editor-active .about-split-text.reveal-right,
body.elementor-editor-active .about-split-image.reveal-left,
body.elementor-editor-active .about-split-image.reveal-right,
body.elementor-editor-active .project-reveal,
body.elementor-editor-active .project-card,
body.elementor-editor-active .service-about,
body.elementor-editor-active .service-offering,
body.elementor-editor-active .service-gallery-image,
body.elementor-editor-active .service-element,
body.elementor-editor-active .service-cta,
body.elementor-editor-active .project-left .project-image,
body.elementor-editor-active .project-left .project-info,
body.elementor-editor-active .project-right .project-image,
body.elementor-editor-active .project-right .project-info {
opacity: 1 !important;
transform: none !important;
}
/* =====================================================
27. LEGAL PAGES (Privacy Policy, Terms of Use)
New content, not part of the original prototype. Built
from the tokens already in use elsewhere so it reads as
the same site rather than a bolted-on document.
===================================================== */
.legal-page {
width: min(calc(100% - 80px), 800px);
margin: 0 auto;
padding: 100px 0 140px;
}
.legal-page h1 {
margin: 0 0 40px;
font-family: "Playfair Display", serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 400;
color: var(--text);
}
.legal-page h3 {
margin: 48px 0 16px;
font-family: "Playfair Display", serif;
font-size: 1.4rem;
font-weight: 400;
color: var(--text);
}
.legal-page h3:first-of-type {
margin-top: 0;
}
.legal-page p {
margin: 0 0 16px;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.8;
}
.legal-page ul {
margin: 0 0 20px;
padding-left: 22px;
}
.legal-page li {
margin-bottom: 10px;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.8;
}
.legal-page strong {
color: var(--text);
}
.legal-page a {
color: var(--accent);
}
@media (max-width: 700px) {
.legal-page {
padding: 70px 0 90px;
}
}
/* =====================================================
28. MEGA MENU — MOBILE INFO GRID COLLAPSE (reinstated)
style.css contains two back-to-back copies of the
mega-menu's info-grid/bottom-bar styling (a prototype
leftover, not something this build introduced). The SECOND
copy redefines .mega-info-grid and .mega-menu-bottom
unconditionally, with no responsive block of its own —
since it loads after the first copy's @media(max-width:700px)
override, it silently wins and re-forces the 2-column/row
layout on phones, clipping the address column. This was
correctly diagnosed and fixed earlier, then accidentally
removed along with a SEPARATE, unrelated, unverified fix
(a left:0 positioning override) when both were reverted
together at Mileend's request. Re-added on its own once the
real horizontal-scroll bug (§34, unrelated — a genuine
Home-page-specific position:fixed width miscalculation) was
found and fixed properly, confirming this info-grid fix was
never the problem and shouldn't have been swept out with it.
===================================================== */
@media (max-width: 700px) {
.mega-info-grid {
grid-template-columns: 1fr;
}
.mega-menu-bottom {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* =====================================================
29. FOOTER BOTTOM BAR — 3-UP LAYOUT
Copyright stays left, tagline centres in the bar
regardless of how long the copyright/links text runs,
legal links sit at the extreme right. Same 1fr auto 1fr
grid trick already used for .site-header .akruti-nav —
flex:space-between doesn't truly centre a middle item
once there are 3 children of unequal width.
===================================================== */
.akruti-footer .akruti-footer-bottom {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.akruti-footer .akruti-footer-copy {
justify-self: start;
}
.akruti-footer .akruti-footer-tagline {
justify-self: center;
}
.akruti-footer .akruti-footer-legal {
justify-self: end;
}
.akruti-footer .akruti-footer-legal a {
color: inherit;
text-decoration: none;
transition: opacity var(--transition-slow);
}
.akruti-footer .akruti-footer-legal a:hover {
opacity: 0.7;
}
@media (max-width: 700px) {
.akruti-footer .akruti-footer-bottom {
grid-template-columns: 1fr;
justify-items: start;
gap: 8px;
}
.akruti-footer .akruti-footer-tagline,
.akruti-footer .akruti-footer-legal {
justify-self: start;
}
}
/* =====================================================
30. STACKED-PROJECT IMAGES — Elementor container collapse
Two Elementor behaviours combined to hide every image on
the pinned-scroll stage:
1. `.stacked-project` (an Elementor container) loses its
height:100vh to Elementor's own `.e-con { height:
var(--height) }` rule (--height defaults to auto) —
auto collapses to near-zero once the overlay/info
children are pulled out of flow by position:absolute,
leaving nothing to establish height.
2. The image WIDGET's own wrapper div
(.elementor-widget-image) is `position:relative` with
no explicit size of its own — that div, not
.stacked-project, is the actual containing block for
the ![]()
's `position:absolute; inset:0`, so the image
sized itself against a 0×0 box.
Both fixed with !important, scoped tightly to this stage
only — matches the same specificity fight already solved
for the Fluent Forms submit button (Elementor's per-widget
generated CSS routinely out-specifies a single class).
===================================================== */
.stacked-projects-stage .stacked-project {
height: 100vh !important;
}
.stacked-project .elementor-widget-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* =====================================================
31. STACKED-PROJECT STAGE — editable inside Elementor
Same root cause as the Site Header mega-menu fix (Section
27): `.stacked-projects-stage` is 400vh tall and each
`.stacked-project` is `position:sticky`, pinning on top of
the one before it. That is exactly right for scrolling
visitors, but inside Elementor's editor canvas it makes 3
of the 4 panels invisible/unclickable (stuck under the
sticky one on top) and leaves a huge dead scroll track —
Mileend could not select any of them to edit.
Inside the editor only: drop the pin (static, normal
height) and stack the 4 panels in ordinary document flow,
each full height, so every one is independently visible
and clickable. Front-end visitor behaviour is untouched.
===================================================== */
body.elementor-editor-active .stacked-projects-stage {
height: auto !important;
}
body.elementor-editor-active .stacked-project {
position: relative !important;
top: auto !important;
height: 70vh !important;
min-height: 500px;
margin-bottom: 2px;
}
/* =====================================================
32. DIRECT-CHILD `>` SELECTORS vs THE WIDGET WRAPPER DIV
Three places in the original design style a label span
with a `parent > span` (direct-child) selector, written
when that span really was the literal first child. A
heading widget always inserts its own wrapper div
(`.elementor-element > .elementor-heading-title`) between
the container and the text, which breaks every one of
these `>` selectors silently — text is there, but none of
display/spacing/uppercase/colour apply. Caught on the
Single Project closing CTA's category label (post-terms
also nests its own inner , but that's harmless once
text-transform is set correctly on the outer one — an
inherited property reaches the nested text regardless).
Replicated exactly, targeting the actual wrapper instead.
===================================================== */
.project-detail-closing-inner > .elementor-widget-heading:first-child .elementor-heading-title {
display: block;
margin-bottom: 35px;
font-size: 0.62rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(244, 240, 232, 0.4);
}
.service-cta-inner > .elementor-widget-heading:first-child .elementor-heading-title {
display: block;
margin-bottom: 30px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #68645d;
}
.service-section-heading > .elementor-widget-heading:first-child .elementor-heading-title {
display: block;
margin-bottom: 22px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(242, 237, 228, 0.55);
}
/* =====================================================
33. NAVIGATION POPUP (native replacement for the
[akruti_mega_menu] shortcode overlay)
The content itself reuses the ORIGINAL .mega-menu-info /
.mega-brand / .mega-navigation / .mega-info-grid classes
verbatim, so all of that styling already applies with no
new rules needed. What's here only reshapes Elementor's
OWN popup chrome (.dialog-widget-content / .dialog-message
/ the overlay) to match the panel's frosted, right-anchored,
full-height look instead of Elementor's default centred
white modal box.
===================================================== */
/* The original .mega-menu was ONLY ever the panel itself —
width min(700px,92vw), right-anchored, tinted+blurred —
with no separate full-viewport scrim behind it; the rest
of the page stayed perfectly clear next to it. Elementor's
popup always renders a full-viewport wrapper, so that
wrapper must stay fully transparent (no tint, no blur of
its own) or it doubles up as an unwanted page-wide scrim
that the design never had. The tint+blur belongs on
.dialog-widget-content instead — the box that's actually
sized and positioned to match the original panel exactly. */
#elementor-popup-modal-143 {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#elementor-popup-modal-143 .dialog-message {
width: min(700px, 92vw) !important;
max-width: none !important;
}
#elementor-popup-modal-143 .dialog-widget-content {
background: rgba(5, 9, 13, 0.22) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: none !important;
border-radius: 0 !important;
}
#elementor-popup-modal-143 .mega-menu-info {
width: 100%;
min-height: 100%;
}
/* .mega-nav-item span colours the number span with the accent
by design — the services "+" toggle is also, incidentally, a
inside a .mega-nav-item, so it inherited that accent
colour too. The original never intended that; it should
read as the same neutral cream as the rest of the row. */
#elementor-popup-modal-143 .mega-services-arrow .elementor-heading-title {
color: rgba(241, 238, 231, 0.82) !important;
}
/* Same panel, made more robustly opaque for the popup context
specifically. Nested backdrop-filter through the extra
Elementor wrapper layers (.dialog-message's own scroll
container in between) isn't compositing as solidly as the
original single-element .mega-menu did — busy photos on the
page behind (the home hero, stacked-project images) were
bleeding through as distinct colour patches instead of a
uniform dark frost. Raising the gradient's own opacity (not
relying on blur alone to obscure what's behind) fixes it
regardless of the exact compositing cause. */
#elementor-popup-modal-143 .mega-menu-info {
background: linear-gradient(135deg, rgba(28, 35, 41, 0.97), rgba(10, 14, 18, 0.98)) !important;
}
#elementor-popup-modal-143 .dialog-widget-content {
background: rgba(5, 9, 13, 0.55) !important;
}
/* Elementor's own close (X) icon, repositioned/recoloured to
sit where the original text "CLOSE" button did, without
rebuilding the a11y focus-handling it already provides. */
#elementor-popup-modal-143 .dialog-close-button {
top: 30px !important;
right: 55px !important;
color: rgba(244, 240, 232, 0.7);
font-size: 1.4rem !important;
transition: color var(--transition-slow), transform var(--transition-slow);
}
#elementor-popup-modal-143 .dialog-close-button:hover {
color: var(--accent);
transform: rotate(90deg);
}
@media (max-width: 700px) {
#elementor-popup-modal-143 .dialog-close-button {
top: 20px !important;
right: 20px !important;
}
}
/* =====================================================
34. ALLOWED HORIZONTAL OVERFLOW
style.css sets overflow-x:hidden on but not on
itself. That matters specifically for the mega-menu:
position:fixed elements are positioned relative to the
viewport, not their DOM parent, so an ancestor's
overflow:hidden does NOT clip them — only 's own
overflow setting genuinely prevents the page from being
horizontally scrollable at all. On the Home page
specifically, #megaMenu was measurably computing a wider
box than the true viewport (confirmed via
document.documentElement.clientWidth vs the menu's own
getBoundingClientRect — reproducible, page-specific, not a
measurement artifact), and with left scrollable that
became reachable by swiping right. This does not fix why
the menu computed too wide in the first place, but it does
remove the ability to ever scroll to it regardless of cause
— the same category of fix as 's own overflow-x rule,
just applied one level higher where it actually matters for
fixed-position content.
===================================================== */
html {
overflow-x: hidden;
}
/* =====================================================
35. SERVICES DROPDOWN — TAP-TO-OPEN STATE
Matches main.js's initMegaServicesTouch(): the first tap
on a touchscreen adds .mobile-open instead of navigating,
so the dropdown needs the same reveal rules the existing
:hover / :focus-within states already use.
===================================================== */
.mega-nav-services.mobile-open .mega-services-dropdown {
max-height: 300px !important;
opacity: 1 !important;
padding-top: 8px !important;
padding-bottom: 12px !important;
}
.mega-nav-services.mobile-open .mega-services-arrow {
transform: translateY(-50%) rotate(45deg) !important;
}
/* style.css's own :focus-within reveal rule fights this: a tap leaves
.mega-services-main focused, so :focus-within stays true even after
main.js removes .mobile-open on the closing tap - the dropdown never
visually collapses. Below 782px (main.js's touch handler is the only
thing driving the toggle there), the dropdown may only be open while
.mobile-open is present, full stop. */
@media (max-width: 782px) {
.mega-nav-services:not(.mobile-open):focus-within .mega-services-dropdown {
max-height: 0 !important;
opacity: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.mega-nav-services:not(.mobile-open):focus-within .mega-services-arrow {
transform: translateY(-50%) !important;
}
}
/* =====================================================
36. LOGO-LED COLOUR PASS (Sep 2026)
Section 34 swapped the accent and cooled the ground.
This pass makes the page actually read as the
yellow-and-blue logo, still without moving any section:
1. the light "band" sections carry the yellow, so the
colourless grey stretches (home about-story, the
project / service index grounds) become brand yellow
2. the yellow itself is stronger (style.css --warm)
3. the dark sections + photo overlays take a deep
blue-black cast (style.css --black / --dark) rather
than pure charcoal
4. primary buttons are solid logo blue, not black
===================================================== */
/* 1 — light band sections → yellow (were neutral --cream) */
.about-story,
.studio-about,
.projects-page,
.service-page,
.service-cta,
.project-back-link:hover {
background-color: var(--warm);
}
/* 3 — the two big photo overlays pick up the same deep-blue
cast as the --black behind them, instead of neutral black.
The solid dark sections follow --black automatically; a
few style.css literals that don't use the token are pulled
in here. */
.hero-overlay {
background: linear-gradient(
90deg,
rgba(9, 18, 32, 0.74),
rgba(9, 18, 32, 0.16)
);
}
.stacked-project-overlay {
background: linear-gradient(
90deg,
rgba(9, 18, 32, 0.70),
rgba(9, 18, 32, 0.10)
);
}
.service-elements,
.contact-cta {
background-color: var(--black);
}
/* 4 — primary buttons: solid logo blue, not black/outline.
A fixed #0A6E92 (not the context-scoped --accent) so the
white label keeps ~5.7:1 on a light page AND inside a
re-scoped dark section. Hover deepens to --accent-strong. */
.dark-button,
.cta-outline-button,
#fluentform_3 .ff-btn-submit {
background-color: #0A6E92 !important;
border-color: #0A6E92 !important;
color: #ffffff !important;
}
.dark-button:hover,
.cta-outline-button:hover,
#fluentform_3 .ff-btn-submit:hover {
background-color: var(--accent-strong) !important;
border-color: var(--accent-strong) !important;
color: #ffffff !important;
}
/* =====================================================
38. HOVER = YELLOW (Sep 2026)
Static accents stay logo blue; interactive feedback —
hover, focus, and the current-page marker — switches to
the logo yellow. On the dark sections that is bright
#FFCB08 text (11.8:1 on the navy). On light grounds,
where yellow text fails contrast, the hover is a warm
yellow wash behind the element with the ink unchanged.
Buttons fill yellow with dark ink everywhere.
===================================================== */
:root {
--hover: #FFCB08;
--hover-wash: rgba(255, 203, 8, 0.3);
}
/* ---------- Buttons: yellow fill, dark ink ---------- */
.outline-button:hover,
.dark-button:hover,
.cta-outline-button:hover,
.akruti-nav-link .elementor-button:hover,
.contact-whatsapp:hover,
.project-back-link:hover,
#fluentform_3 .ff-btn-submit:hover {
background-color: var(--hover) !important;
border-color: var(--hover) !important;
color: #0E1826 !important;
}
/* ---------- Text-link underline turns yellow ---------- */
.text-link:hover::after,
.text-link:focus-visible::after {
background-color: var(--hover);
}
/* ---------- Dark sections: link / nav hover + current
page marker go yellow ---------- */
#megaMenu a:hover,
.mega-nav-item:hover,
.mega-nav-item:hover .elementor-heading-title,
.mega-service-link:hover,
.mega-info-block a:hover,
.mega-nav-item.current-menu-item,
.mega-nav-item.current-menu-item .elementor-heading-title,
.akruti-footer-nav-item:hover,
.site-footer a:hover,
.footer-info-column a:hover,
.footer-nav a:hover,
.about-testimonials a:hover,
.project-detail-closing a:hover,
.akruti-footer .akruti-footer-legal a:hover,
.akruti-footer .akruti-footer-copy a:hover,
.akruti-footer-bottom a:hover,
.mega-menu-close:hover,
#megaMenuClose:hover {
color: var(--hover) !important;
opacity: 1 !important;
}
/* ---------- Light sections: warm wash, ink unchanged ---------- */
.projects-filter-item:hover,
.service-item:hover,
.about-project:hover .about-project-info,
.project-card:hover .project-info {
background-color: var(--hover-wash);
}
.service-item:hover .service-number {
color: var(--accent);
}
/* The little circular arrow fills with the bright logo
yellow on hover (a solid #FFCB08 disc reads clearly
against both the #FCEBB5 band and the hover wash), and
the glyph flips to dark navy so it stays legible —
style.css had it filling charcoal-black, which fought
the yellow theme. */
.service-item:hover .service-arrow {
background: var(--hover) !important;
border-color: var(--hover) !important;
color: #0E1826 !important;
}
/* The header hamburger: three BLACK bars at rest. On hover
they turn bright logo yellow (#FFCB08) and pick up a
black drop-shadow so the yellow reads clearly against
the pale header bar. */
.akruti-nav-toggle .elementor-icon,
.akruti-nav-toggle .elementor-icon svg,
.site-header .menu-toggle span {
color: #171717 !important;
fill: #171717 !important;
transition:
color var(--transition-slow),
fill var(--transition-slow),
filter var(--transition-slow);
}
.site-header .menu-toggle span {
background-color: #171717 !important;
}
.akruti-nav-toggle:hover .elementor-icon,
.akruti-nav-toggle:hover .elementor-icon svg,
.site-header .menu-toggle:hover span {
color: #FFCB08 !important;
fill: #FFCB08 !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.site-header .menu-toggle:hover span {
background-color: #FFCB08 !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* =====================================================
39. ABOUT-STORY LEFT COLUMN — STACKED IMAGES (Sep 2026)
style.css built the left column as a fixed 760px sticky
box with a single image + the heading overlaid on it.
Beside the lower text blocks that left a large empty
panel — very loud now the section ground is yellow.
Two more of Akruti's own project photos were added in
Elementor; this makes the column a normal-flow stack
(heading, three images, caption) that runs the height
of the three blocks on the right.
===================================================== */
.about-story-layout {
align-items: stretch !important;
}
.about-story-left {
position: static !important;
height: auto !important;
align-self: stretch !important;
display: flex !important;
flex-direction: column;
gap: clamp(16px, 1.8vw, 26px);
}
/* Heading now sits above the images as plain dark text,
not white-on-photo. */
.about-story-heading {
position: static !important;
height: auto !important;
width: auto !important;
display: block !important;
text-align: left !important;
pointer-events: auto !important;
}
.about-story-heading h2 {
color: var(--text) !important;
text-align: left !important;
max-width: none !important;
}
.about-story-image {
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
/* grow to share the column height with the other two,
so the left side always fills to match the text
blocks on the right — never a bare panel */
flex: 1 1 0 !important;
height: auto !important;
min-height: 300px !important;
overflow: hidden !important;
box-shadow: none !important;
background: transparent !important;
}
/* style.css layered a diagonal navy gradient (::after) and a
translucent white "glass" border (::before) over the image
— reads as a dirty diagonal shadow on the yellow ground.
Gone. */
.about-story-image::after,
.about-story-image::before {
display: none !important;
}
/* Elementor's image-widget wrappers sit between the
container and the ![]()
; force the whole chain to the
same height so all three crop identically (the first
image carries an explicit 500px from its widget). */
.about-story-image .elementor-widget-image,
.about-story-image .elementor-widget-container {
height: 100% !important;
}
.about-story-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.about-story-caption {
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
margin-top: 4px;
}
/* =====================================================
40. REDESIGN — CONTACT PAGE (Phase 1 of the
Design-Overhaul moodboard pass)
Scoped to Contact-specific classes wherever the shared
.projects-intro / .contact-detail-block classes are also
used by Projects/Services archive pages (out of scope
this phase) — nothing here should paint on those pages
until their own phase.
===================================================== */
/* ---------- Pre-existing bug, fixed in passing ----------
.projects-intro (shared by Contact/Projects/Services intro
blocks) has only 44px top padding, but .site-header is
position:fixed at 128px tall — the eyebrow row rendered
underneath it, invisible, on every page using this class,
not just Contact. Confirmed via the Projects archive page
(untouched by this phase) showing the identical overlap.
Pure visibility fix, not a style change — safe to apply to
the shared class rather than scoping to Contact only. */
.projects-intro {
padding-top: 148px;
}
/* ---------- Eyebrow dot + headline underline (replaces an
earlier vertical-bar attempt that didn't match the actual
reference — corrected after review against contact.png) ---------- */
.eyebrow-dot {
position: relative;
padding-left: 16px;
}
.eyebrow-dot::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--hover);
}
.contact-intro .projects-intro-top {
justify-content: flex-start;
}
.projects-intro-content h1 em {
color: var(--accent-bright);
}
.contact-intro .projects-intro-content h1::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin-top: 18px;
background-color: var(--hover);
}
/* ---------- Hero split: intro text (col 1) + photo (col 2) ---------- */
.projects-intro.contact-intro {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
column-gap: clamp(30px, 4vw, 64px);
align-items: stretch;
}
.contact-intro .projects-intro-top {
grid-column: 1;
grid-row: 1;
}
.contact-intro .projects-intro-content {
grid-column: 1;
grid-row: 2;
align-self: end;
}
.contact-hero-photo {
grid-column: 2;
grid-row: 1 / 3;
position: relative;
min-height: 320px;
overflow: hidden;
border-radius: 4px;
}
.contact-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contact-hero-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(14, 24, 38, 0.82) 0%, rgba(14, 24, 38, 0.1) 45%, transparent 65%);
}
.contact-hero-caption {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
z-index: 1;
color: var(--white);
font-family: "Playfair Display", serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.02em;
}
@media (max-width: 900px) {
.projects-intro.contact-intro {
grid-template-columns: 1fr;
}
.contact-hero-photo {
grid-column: 1;
grid-row: 3;
min-height: 260px;
margin-top: 24px;
}
.contact-intro .projects-intro-content {
align-self: auto;
}
}
/* ---------- Contact detail rows: icon + stacked label/value ----------
Each .contact-detail-block keeps its existing two children
(label span + value link/paragraph) untouched — the icon is
a mask-image ::before so no widget content changes. */
.contact-details .contact-detail-block {
display: grid;
grid-template-columns: 26px 1fr;
column-gap: 16px;
align-items: start;
}
.contact-details .contact-detail-block > * {
/* Explicit placement, not relied-on auto-placement: the
Elementor widget-wrapper divs didn't skip the ::before's
occupied cell the way plain elements would, and ended up
sharing column 1 with the icon instead of column 2. */
grid-column: 2;
}
.contact-details .contact-detail-block::before {
content: "";
grid-column: 1;
grid-row: 1 / 3;
width: 20px;
height: 20px;
margin-top: 2px;
background-color: var(--accent);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.contact-block-call::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.6 21 3 12.4 3 2c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.6 21 3 12.4 3 2c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E");
}
.contact-block-brochure::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
}
.contact-block-whatsapp::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 01-12.4 7.5L3 20l1.1-5.4A8.5 8.5 0 1121 11.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 01-12.4 7.5L3 20l1.1-5.4A8.5 8.5 0 1121 11.5z'/%3E%3C/svg%3E");
}
.contact-block-email::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 6.5l8 6 8-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 6.5l8 6 8-6'/%3E%3C/svg%3E");
}
.contact-block-studio::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11.5A7 7 0 105 9.5C5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11.5A7 7 0 105 9.5C5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
}
.contact-block-hours::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}
.contact-block-principals::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.3'/%3E%3Cpath d='M15.8 14.8c2.4.3 4.2 2.1 4.2 4.9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.3'/%3E%3Cpath d='M15.8 14.8c2.4.3 4.2 2.1 4.2 4.9'/%3E%3C/svg%3E");
}
/* ---------- Form: rounder inputs + circular arrow submit ---------- */
.akruti-form-holder .ff-el-form-control {
border-radius: 8px;
}
#fluentform_3 .ff-btn-submit {
display: inline-flex !important;
align-items: center;
gap: 18px;
padding: 0 !important;
padding-left: 64px !important;
background: transparent !important;
color: var(--text) !important;
position: relative;
min-height: 48px;
}
#fluentform_3 .ff-btn-submit::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--hover);
transition: background-color var(--transition-slow);
}
#fluentform_3 .ff-btn-submit::after {
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
background-color: #0E1826;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform var(--transition-slow);
}
#fluentform_3 .ff-btn-submit:hover::before {
background-color: var(--accent-strong);
}
#fluentform_3 .ff-btn-submit:hover::after {
background-color: var(--white);
}
/* ---------- Map card framing ---------- */
.contact-map-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 30px rgba(23, 23, 23, 0.08);
}
/* =====================================================
41. REDESIGN — HEADER INLINE NAV (desktop), mega-menu
scoped to mobile only.
Additive: the mega-menu's own markup/JS/mobile behaviour
is untouched. The hamburger trigger simply disappears at
desktop widths, and a plain nav-menu widget (same "Akruti
Mega Menu" WP menu, so editing one updates both) takes
over navigation there instead.
===================================================== */
.akruti-inline-nav {
grid-column: 1;
justify-self: start;
}
.akruti-inline-nav .elementor-nav-menu {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 36px);
list-style: none;
margin: 0;
padding: 0;
}
.akruti-inline-nav .elementor-nav-menu a.elementor-item {
padding: 0 !important;
font-family: "DM Sans", sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
transition: color var(--transition-slow);
}
.akruti-inline-nav .elementor-nav-menu a.elementor-item:hover,
.akruti-inline-nav .elementor-nav-menu a.elementor-item.elementor-item-active {
color: var(--accent);
}
@media (min-width: 783px) {
/* "Our Projects" pill is superseded by the inline nav
above — retiring it avoids two links doing the same
job. Elementor's own per-element class, so no widget
needs deleting. */
.site-header .elementor-element-393469c {
display: none !important;
}
.site-header .akruti-nav-toggle {
display: none !important;
}
}
/* ---------- Header reposition: logo left, nav centred, CTA
right (verified against every reference page — Home, About,
Projects, Services, Contact all show this exact arrangement,
not the old logo-centred grid). Download Brochure + EST stay
in the right cluster — Mileend asked to keep the brochure
button, even though the reference doesn't show it. ---------- */
.site-header .akruti-nav > .akruti-nav-logo {
grid-column: 1;
justify-self: start;
}
.akruti-inline-nav {
grid-column: 2;
grid-row: 1;
justify-self: center;
align-self: stretch !important;
/* pro-elements' widget-nav-menu.min.css sets flex-direction:
column on this exact element (.elementor-widget-nav-menu) —
align-items:center with that direction centers the HORIZONTAL
axis, not vertical, since column flips which axis is which.
Overriding the direction back to row is what actually fixes
the vertical centering. */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center;
margin: 0 !important;
}
.site-header .akruti-nav > .akruti-nav-right {
grid-column: 3;
}
/* "Let's Talk" — yellow-outline pill + arrow, distinct from
the grey-bordered Brochure pill beside it. */
/* Full pill styling of its own: giving the button this class
dropped the base .akruti-nav-link pill (border, padding, type),
so it rendered as bare text. inline-flex keeps the ::after arrow
on the same line — Elementor's inner content wrapper is itself
flex, which pushed the arrow onto a second line otherwise. */
.akruti-nav-cta .elementor-button {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 11px 20px !important;
border: 1px solid var(--hover) !important;
border-radius: 999px !important;
background-color: transparent !important;
color: var(--text) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
line-height: 1 !important;
text-transform: uppercase !important;
white-space: nowrap;
transition:
background-color var(--transition-slow),
color var(--transition-slow);
}
.akruti-nav-cta .elementor-button::after {
content: "\2192";
margin-left: 0;
}
.akruti-nav-cta .elementor-button:hover,
.akruti-nav-cta .elementor-button:focus-visible {
background-color: var(--hover) !important;
border-color: var(--hover) !important;
color: #0E1826 !important;
}
@media (max-width: 782px) {
.akruti-nav-cta .elementor-button {
padding: 9px 14px !important;
font-size: 0.64rem !important;
}
}
/* Keep "Download our Brochure" on one line — once the Let's Talk
pill got its full padding, the right cluster ran short of room
and the brochure label wrapped onto two lines. */
.site-header .akruti-nav-link .elementor-button {
white-space: nowrap;
}
@media (max-width: 782px) {
/* pro-elements' own widget-nav-menu.min.css sets
`.elementor-widget-nav-menu:not(:has(...)):not([class*=
"elementor-hidden-"])) { display:flex }` at specificity
0,3,0 — beats a bare class regardless of media-query
source order, so this needs !important to win. */
.akruti-inline-nav {
display: none !important;
}
}
/* =====================================================
42. REDESIGN — CONTACT PAGE, ROUND 2 (corrected against
the real Stand-Alone-Images/contact.png reference).
===================================================== */
/* ---------- Photo: responsive image swap ----------
Desktop uses the tall portrait side-panel photo; mobile
uses a separate wide crop supplied for the stacked layout.
Both widgets exist in the DOM; CSS picks one. */
.contact-hero-img-mobile {
display: none;
}
@media (max-width: 900px) {
.contact-hero-img-desktop {
display: none;
}
.contact-hero-img-mobile {
display: block;
}
}
/* ---------- Photo top overlay: real location + real recurring CTA line ----------
Both overlay pieces are position:absolute (top overlay here,
.contact-hero-caption already absolute from the first pass),
so the image just needs to be an absolute-filled background
layer behind them — not a flex child, which would fight the
height:100%/object-fit sizing already set on it. */
/* The image WIDGET WRAPPER (an .elementor-widget, position:
relative by Elementor's own base CSS) is what needs inset:0 —
putting it on the ![]()
directly leaves the wrapper at its
natural (zero) height, since an absolutely-positioned child
doesn't contribute to parent height. Same trap as the Home
stacked-project images (recipe memory, bug #1) — the fix is
identical: absolute the wrapper, size the image to 100%/100%. */
.contact-hero-img-desktop,
.contact-hero-img-mobile {
position: absolute !important;
inset: 0 !important;
}
.contact-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contact-hero-photo-top {
position: absolute;
top: 24px;
right: 24px;
z-index: 1;
text-align: right;
color: var(--white);
}
.contact-hero-photo-top span {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact-hero-photo-cta {
margin-top: 10px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.5;
}
/* ---------- Philosophy strip (3 columns, real About-page values) ---------- */
.contact-philosophy {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: clamp(48px, 6vw, 88px) 7vw;
}
.contact-philosophy-col {
padding: 0 32px;
border-left: 1px solid var(--border);
text-align: center;
}
.contact-philosophy-col:first-child {
border-left: none;
}
.contact-philosophy-col h3 {
margin: 16px 0 8px;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: 1.4rem;
}
.contact-philosophy-col p {
color: var(--muted);
font-size: 0.95rem;
}
.contact-philosophy-col::before {
content: "";
display: inline-block;
width: 34px;
height: 34px;
background-color: var(--accent);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.philosophy-people::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.3'/%3E%3Cpath d='M15.8 14.8c2.4.3 4.2 2.1 4.2 4.9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.3'/%3E%3Cpath d='M15.8 14.8c2.4.3 4.2 2.1 4.2 4.9'/%3E%3C/svg%3E");
}
.philosophy-enduring::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-2-7-6-7-11a7 7 0 0 1 14 0c0 5-3 9-7 11z'/%3E%3Cpath d='M12 21V9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-2-7-6-7-11a7 7 0 0 1 14 0c0 5-3 9-7 11z'/%3E%3Cpath d='M12 21V9'/%3E%3C/svg%3E");
}
.philosophy-vision::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='0.8' fill='black'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='0.8' fill='black'/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
.contact-philosophy {
display: none;
}
}
/* ---------- Location panel, floating over the real map ---------- */
.contact-location {
position: relative;
}
.contact-location-panel {
position: absolute;
top: 40px;
left: 7vw;
z-index: 1;
max-width: 320px;
padding: clamp(24px, 3vw, 40px);
background-color: var(--warm);
box-shadow: 0 1px 30px rgba(23, 23, 23, 0.1);
}
.contact-location-panel h2 {
margin: 10px 0 12px;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(1.8rem, 2.6vw, 2.4rem);
}
.contact-location-panel p {
color: var(--muted);
}
@media (max-width: 700px) {
.contact-location-panel {
position: static;
max-width: none;
}
}
/* ---------- Closing CTA band (real recurring phrase) ---------- */
.contact-closing-cta {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
align-items: stretch;
background-color: var(--black);
}
.contact-cta-image {
min-height: 280px;
overflow: hidden;
}
.contact-cta-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contact-cta-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
padding: clamp(32px, 4vw, 64px);
color: var(--white);
}
.contact-cta-text h2 {
margin: 0;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.contact-cta-text h2 em {
font-style: italic;
color: var(--accent-bright);
}
.contact-cta-bottom-row {
display: flex;
align-items: center;
gap: 24px;
}
.contact-cta-arrow {
position: relative;
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
background-color: var(--hover) !important;
border: none !important;
}
.contact-cta-arrow::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 20px;
height: 20px;
background-color: #0E1826;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.contact-cta-caption {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.8;
color: var(--warm);
}
@media (max-width: 782px) {
.contact-closing-cta {
grid-template-columns: 1fr;
}
.contact-cta-image {
min-height: 200px;
}
}
/* =====================================================
43. FIXES from live review against contact.png
Elementor wraps a container's children in an extra
`.e-con-inner` div whenever the container has certain
settings (background, padding, etc.) — seen already with
`.contact-detail-block` (fixed via explicit grid-column)
but here it's simpler to make the wrapper transparent to
layout with `display:contents`, since these containers
need their real children to BE the flex/grid items.
===================================================== */
/* NOTE: .contact-location is deliberately NOT in this list.
Its yellow panel is position:absolute, so it overlays the map
via .contact-location's own position:relative regardless of
any intermediate wrapper — display:contents there is
unnecessary, and it collapsed the map to ~20px wide on a page
whose structure nests the map one level deeper. */
.contact-philosophy > .e-con-inner,
.contact-closing-cta > .e-con-inner,
.contact-cta-bottom-row > .e-con-inner,
.contact-hero-photo > .e-con-inner,
.contact-hero-photo-top > .e-con-inner {
display: contents;
}
/* Full-width map with the yellow card floating over it.
Forced to block layout so the map card fills the row without
flex sizing ambiguity — the two Contact layouts nest the map
at different depths, and block sizing behaves the same in both. */
.contact-location {
display: block !important;
position: relative;
width: 100%;
}
/* The section is a BOXED Elementor container, so its
.e-con-inner carries max-width: var(--content-width) and the
map stops ~1140px short of the edges. Releasing that wrapper
is what actually makes the map bleed full width. */
.contact-location > .e-con-inner {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.contact-location {
padding-left: 0 !important;
padding-right: 0 !important;
}
.contact-map-card {
width: 100%;
max-width: none !important;
padding: 0 !important;
/* Edge-to-edge, like the reference — no card framing once
it spans the full viewport. */
border-radius: 0;
box-shadow: none;
}
.contact-map-card iframe,
.contact-location iframe {
display: block;
width: 100%;
border: 0;
}
/* Card sits vertically centred over the map, as in the reference. */
.contact-location-panel {
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%);
}
.contact-location-address {
margin-bottom: 14px;
font-size: 0.92rem;
line-height: 1.7;
color: var(--text);
}
@media (max-width: 700px) {
.contact-location-panel {
top: auto !important;
transform: none;
}
}
/* =====================================================
45. CONTACT AKRUTI — rectified against contact-desktop.png
===================================================== */
/* Headline: large, two lines, italic blue on the second —
the shared .projects-intro-content grid splits it into two
columns, which is why the subtext sat beside it. */
.contact-hero-col .projects-intro-content {
display: block !important;
}
.contact-headline h1,
.contact-headline .elementor-heading-title {
margin: 0;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(2.6rem, 5vw, 4.4rem) !important;
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--text);
}
.contact-headline em {
display: block;
font-style: italic;
color: var(--accent-bright);
}
.contact-headline::after {
content: "";
display: block;
width: 52px;
height: 3px;
margin: 26px 0 0;
background-color: var(--hover);
}
.contact-subtext p {
margin: 24px 0 0;
max-width: 380px;
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.55;
color: var(--text);
}
/* Tagline rule under the form. */
.contact-hero-tagline {
margin-top: clamp(20px, 2.4vw, 34px);
padding-top: 20px;
border-top: 1px solid var(--border);
}
.contact-hero-tagline p {
margin: 0;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.contact-hero-tagline .tag-sep {
margin: 0 12px;
color: var(--border);
}
/* ---------- Photo overlays ---------- */
.contact-hero-media {
position: relative;
overflow: hidden;
}
.contact-hero-media .elementor-widget-image {
height: 100%;
}
.contact-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contact-media-top {
position: absolute;
top: clamp(24px, 3vw, 52px);
right: clamp(22px, 3vw, 48px);
z-index: 1;
text-align: right;
}
.contact-media-top .contact-media-place {
margin: 0;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(1.5rem, 2.3vw, 2.1rem);
line-height: 1.15;
color: var(--white);
}
.contact-media-top .contact-media-place::after {
content: "";
display: block;
width: 46px;
height: 3px;
margin: 16px 0 0 auto;
background-color: var(--hover);
}
.contact-media-top .contact-media-cta {
margin: 20px 0 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
line-height: 2;
text-transform: uppercase;
color: var(--white);
}
.contact-media-bottom {
position: absolute;
left: clamp(22px, 3vw, 48px);
right: clamp(22px, 3vw, 48px);
bottom: clamp(22px, 3vw, 44px);
z-index: 1;
}
.contact-media-bottom p {
margin: 0;
font-family: "Playfair Display", serif;
font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.35;
color: var(--white);
text-shadow: 0 1px 8px rgba(14, 24, 38, 0.5);
}
.contact-media-bottom em {
color: var(--accent-bright);
font-style: italic;
}
/* Scrims so both overlays stay legible on a bright photo. */
.contact-hero-media::before,
.contact-hero-media::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 42%;
z-index: 0;
pointer-events: none;
}
.contact-hero-media::before {
top: 0;
background: linear-gradient(to bottom, rgba(14, 24, 38, 0.45), transparent);
}
.contact-hero-media::after {
bottom: 0;
background: linear-gradient(to top, rgba(14, 24, 38, 0.55), transparent);
}
/* ---------- Form: placeholder-led, no heavy card ---------- */
.akruti-form-holder .fluentform {
background-color: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}
.akruti-form-holder .ff-el-input--label {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.akruti-form-holder .ff-el-form-control {
background-color: var(--white) !important;
border-color: rgba(23, 23, 23, 0.14) !important;
padding: 15px 18px !important;
}
.akruti-form-holder .ff-el-form-control::placeholder {
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ---------- Philosophy strip: icon centred over the text ----------
The column renders as `.contact-philosophy-col > .e-con-inner >
[heading, text]`, and the ::before icon is a sibling of that
inner wrapper in a ROW flex — which is why the icon sat off to
the left. Forcing both levels to a centred column stacks it
properly above the heading. */
.contact-philosophy-col {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px;
text-align: center;
}
.contact-philosophy-col > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px;
width: 100%;
}
/* Elementor uses every container's ::before as its background-
overlay layer — `.e-con::before { position:absolute; top:0;
left:0 }` — so the icon inherited absolute positioning and sat
pinned in the column's top-left corner, taking no space in the
flow. Returning it to static makes it a real flex item that
stacks above the heading. */
.contact-philosophy-col::before {
position: static !important;
top: auto !important;
left: auto !important;
flex: 0 0 auto;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
opacity: 1 !important;
background-color: var(--text);
}
.contact-philosophy-col h3 {
margin: 0;
}
.contact-philosophy-col p {
max-width: 260px;
margin: 0;
}
@media (max-width: 900px) {
.contact-media-top,
.contact-media-bottom {
position: static;
text-align: left;
margin-top: 16px;
}
.contact-media-top .contact-media-place::after {
margin-left: 0;
}
.contact-media-top .contact-media-place,
.contact-media-top .contact-media-cta,
.contact-media-bottom p {
color: var(--text);
text-shadow: none;
}
.contact-media-bottom em {
color: var(--accent-bright);
}
.contact-hero-media::before,
.contact-hero-media::after {
display: none;
}
}
/* SEND ENQUIRY hover — same as the Download Brochure pill: the
whole button fills yellow as a rounded pill with navy text. The
disc stays yellow and the arrow stays navy so it reads as one
shape (overrides the earlier blue-disc/white-arrow hover and the
square-cornered yellow fill). */
#fluentform_3 .ff-btn-submit {
border-radius: 999px !important;
padding-right: 24px !important;
transition:
background-color var(--transition-slow),
color var(--transition-slow) !important;
}
#fluentform_3 .ff-btn-submit:hover,
#fluentform_3 .ff-btn-submit:focus-visible {
background-color: var(--hover) !important;
color: #0E1826 !important;
}
#fluentform_3 .ff-btn-submit:hover::before,
#fluentform_3 .ff-btn-submit:focus-visible::before {
background-color: var(--hover);
}
#fluentform_3 .ff-btn-submit:hover::after,
#fluentform_3 .ff-btn-submit:focus-visible::after {
background-color: #0E1826;
}
/* ---------- Contact CTA band: yellow arrow disc + mobile stacking ----------
The arrow is an Elementor button whose label is kept for screen
readers but hidden visually; the wrapper draws the yellow disc
and the ::after draws the arrow (pointer-events off so clicks
reach the link underneath). */
.contact-cta-arrow .elementor-button-wrapper,
.contact-cta-arrow .elementor-button {
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
color: transparent !important;
font-size: 0 !important;
}
.contact-cta-arrow::after {
pointer-events: none;
}
.contact-cta-arrow:hover {
background-color: var(--white) !important;
}
@media (max-width: 782px) {
/* Three side-by-side columns don't fit a phone: the photo
shrank to a thumbnail and the caption ran over "Together." */
.contact-cta-band {
flex-direction: column !important;
align-items: stretch !important;
gap: 26px !important;
padding-top: 0 !important;
padding-bottom: 40px !important;
}
.contact-cta-band > .e-con {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
padding-left: 7vw !important;
padding-right: 7vw !important;
}
.contact-cta-band > .e-con:first-child {
padding-left: 0 !important;
padding-right: 0 !important;
}
.contact-cta-band > .e-con:first-child img {
width: 100% !important;
height: clamp(190px, 52vw, 280px) !important;
object-fit: cover;
display: block;
}
.contact-cta-band .contact-cta-bottom-row {
justify-content: flex-start !important;
}
}
/* Very thin light rule where the last dark section meets the
dark footer, as in the reference — without it the CTA band
and footer merge into one navy block. */
.akruti-footer {
border-top: 1px solid rgba(237, 240, 242, 0.22);
}
/* =====================================================
44b. SERVICES HERO — replica of services-desktop.png
Text column left, photograph bleeding off the right edge
with the stacked tagline over it. The earlier recolour
pass painted .services-section yellow; the reference is a
pale ground, so that band is released here.
===================================================== */
.services-section {
background-color: #FBFAF7 !important;
}
.projects-intro.services-intro {
display: grid;
grid-template-columns: minmax(340px, 0.95fr) 1.05fr;
align-items: center;
column-gap: clamp(24px, 3vw, 56px);
padding: 0 0 0 7vw !important;
min-height: clamp(360px, 34vw, 480px);
overflow: hidden;
}
.services-intro .projects-intro-top,
.services-intro .projects-intro-content {
grid-column: 1;
}
.services-intro .projects-intro-top {
grid-row: 1;
align-self: end;
padding: 0 0 14px !important;
justify-content: flex-start;
}
.services-intro .projects-intro-content {
grid-row: 2;
display: block;
align-self: start;
padding-bottom: clamp(24px, 3vw, 48px);
}
/* Eyebrow with the short yellow rule before it. */
.eyebrow-dash .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 16px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text);
}
.eyebrow-dash .elementor-heading-title::before {
content: "";
width: 32px;
height: 3px;
background-color: var(--hover);
}
.services-headline .elementor-heading-title {
margin: 0;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(2.6rem, 5.4vw, 4.6rem);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--text);
}
.services-headline em {
display: block;
font-style: italic;
color: var(--accent-bright);
}
.services-subtext p {
margin: 22px 0 0;
max-width: 420px;
font-size: clamp(0.95rem, 1.15vw, 1.08rem);
line-height: 1.6;
color: var(--text);
}
/* Photograph: full height of the hero, bleeding to the right. */
.services-hero-photo {
position: relative;
grid-column: 2;
grid-row: 1 / 3;
align-self: stretch;
min-height: clamp(300px, 32vw, 460px);
overflow: hidden;
}
.services-hero-photo > .e-con-inner {
display: contents;
}
.services-hero-photo .elementor-widget-image {
position: absolute !important;
inset: 0 !important;
}
.services-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.services-hero-aside {
position: absolute;
right: clamp(20px, 3vw, 54px);
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.services-hero-aside p {
margin: 0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
line-height: 2;
text-transform: uppercase;
color: var(--white);
text-shadow: 0 1px 6px rgba(14, 24, 38, 0.45);
}
.services-hero-aside::before {
content: "";
display: block;
width: 32px;
height: 3px;
margin-bottom: 14px;
background-color: var(--hover);
}
@media (max-width: 900px) {
.projects-intro.services-intro {
grid-template-columns: 1fr;
padding: 0 7vw !important;
min-height: 0;
}
/* Full bleed on phones. Elementor gives containers a fixed
width:100%, so negative margins alone only shifted the photo
left and left a gap on the right — widen it to match. */
.services-hero-photo {
grid-column: 1;
grid-row: 3;
min-height: 240px;
width: calc(100% + 14vw) !important;
max-width: none !important;
margin: 20px -7vw 0 !important;
}
}
/* =====================================================
44. REDESIGN — SERVICES ARCHIVE
Each row becomes: number + title (col 1), description +
capability tags (col 2, divided by a hairline), the
circular arrow (col 3), and the service's own hero image
(col 4). Every value is real content already on the
service posts — short_description and the offerings
titles — not copy invented for the mockup.
===================================================== */
/* Rows sit in a constrained column, as in the reference —
full-bleed spreads the four columns too far apart. */
.services-section .services-list {
/* 7vw each side like every other section — plain 100% let the
rows and images run to the screen edges on phones. */
width: min(calc(100% - 14vw), 1180px);
margin-inline: auto;
}
.services-list .service-item {
display: grid !important;
grid-template-columns:
minmax(150px, 210px)
minmax(200px, 1fr)
56px
300px;
grid-template-rows: auto auto;
column-gap: clamp(18px, 2.2vw, 40px);
row-gap: 0;
align-items: center;
padding: 22px 0 !important;
border-top: 1px solid var(--border);
border-bottom: none;
}
.services-list .service-item:last-child {
border-bottom: 1px solid var(--border);
}
/* style.css shifts the whole row on hover — wrong for a grid
that now holds an image. */
.services-list .service-item:hover {
padding-left: 0 !important;
}
.services-list .service-item:hover h3 {
transform: none;
}
.services-list .service-number,
.services-list .service-number .elementor-heading-title {
grid-column: 1;
grid-row: 1;
align-self: end;
color: var(--accent-bright);
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(1.5rem, 2.1vw, 1.95rem);
line-height: 1.05;
/* style.css letter-spaces the numerals, which reads as
"0 1" at this size. */
letter-spacing: 0 !important;
}
.services-list .service-title,
.services-list .service-title .elementor-heading-title {
grid-column: 1;
grid-row: 2;
align-self: start;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(1.35rem, 2.1vw, 1.95rem);
line-height: 1.2;
color: var(--text);
}
/* Description + tags share column 2 and a single continuous
hairline on their left edge. */
.services-list .service-desc,
.services-list .service-tags {
grid-column: 2;
border-left: 1px solid var(--border);
padding-left: clamp(18px, 2vw, 32px);
}
.services-list .service-desc {
grid-row: 1;
align-self: end;
padding-top: 4px;
padding-bottom: 10px;
}
.services-list .service-desc p {
margin: 0;
font-size: 0.95rem;
line-height: 1.65;
color: var(--muted);
}
.services-list .service-tags {
grid-row: 2;
align-self: start;
padding-bottom: 4px;
}
.services-list .service-tags p {
margin: 0;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: var(--muted);
}
.services-list .service-tags .tag-sep {
margin: 0 8px;
color: var(--border);
font-weight: 400;
}
/* Outline circle with a right arrow, as in the reference —
style.css's diagonal-arrow hover (rotate + fill) fights it. */
.services-list .service-arrow .elementor-heading-title {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--border);
border-radius: 50%;
font-size: 1rem;
color: var(--text);
transition:
background-color var(--transition-slow),
border-color var(--transition-slow),
color var(--transition-slow);
}
.services-list .service-item:hover .service-arrow .elementor-heading-title {
background-color: var(--hover);
border-color: var(--hover);
color: #0E1826;
}
.services-list .service-item:hover .service-arrow {
transform: none;
}
.services-list .service-arrow {
grid-column: 3;
grid-row: 1 / 3;
justify-self: center;
align-self: center;
}
.services-list .service-thumb {
grid-column: 4;
grid-row: 1 / 3;
align-self: stretch;
overflow: hidden;
}
.services-list .service-thumb img {
width: 100%;
height: clamp(120px, 11vw, 165px);
object-fit: cover;
display: block;
}
/* ---------- Services rows, mobile ----------
Matches the mobile reference: number + title on one line,
description beneath, arrow right, image full width below. */
@media (max-width: 900px) {
.services-list .service-item {
grid-template-columns: auto 1fr 44px;
grid-template-rows: auto auto auto;
column-gap: 14px;
row-gap: 8px;
}
.services-list .service-number {
grid-column: 1;
grid-row: 1;
align-self: center;
}
.services-list .service-title,
.services-list .service-title .elementor-heading-title {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.services-list .service-desc {
grid-column: 1 / 4;
grid-row: 2;
border-left: none;
padding-left: 0;
padding-bottom: 0;
}
.services-list .service-tags {
display: none;
}
.services-list .service-arrow {
grid-column: 3;
grid-row: 1;
}
.services-list .service-thumb {
grid-column: 1 / 4;
grid-row: 3;
}
.services-list .service-thumb img {
height: clamp(150px, 38vw, 220px);
}
}
/* ---------- Services closing CTA band ---------- */
.service-closing-cta {
position: relative;
display: grid !important;
grid-template-columns: minmax(320px, 0.9fr) 1fr auto;
align-items: center;
min-height: clamp(360px, 34vw, 460px);
padding: clamp(36px, 4vw, 72px) 7vw !important;
background-color: var(--black);
}
/* Light scrim on the left so the navy headline stays legible
over the photograph, as in the reference. */
.service-closing-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(246, 248, 249, 0.94) 0%, rgba(246, 248, 249, 0.85) 28%, rgba(246, 248, 249, 0) 62%);
}
.service-cta-copy,
.service-cta-aside {
position: relative;
z-index: 1;
}
.service-cta-copy {
grid-column: 1;
max-width: 460px;
}
.service-cta-title .elementor-heading-title,
.service-cta-title h2 {
margin: 0;
font-family: "Playfair Display", serif;
font-weight: 400;
font-size: clamp(2rem, 3.6vw, 3.1rem);
line-height: 1.12;
color: var(--text);
}
.service-cta-title em {
font-style: italic;
color: var(--accent-bright);
}
.service-cta-title::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin: 22px 0 0;
background-color: var(--hover);
}
.service-cta-sub p {
margin: 18px 0 0;
max-width: 340px;
font-size: 0.92rem;
line-height: 1.65;
color: var(--muted);
}
/* Yellow disc + label, same pattern as the enquiry button. */
.service-cta-button .elementor-button {
display: inline-flex !important;
align-items: center;
gap: 18px;
margin-top: 28px;
padding: 0 0 0 64px !important;
min-height: 48px;
background: transparent !important;
border: none !important;
color: var(--text) !important;
font-size: 0.76rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
position: relative;
}
.service-cta-button .elementor-button::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--hover);
transition: background-color var(--transition-slow);
}
.service-cta-button .elementor-button::after {
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
background-color: #0E1826;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.service-cta-button .elementor-button:hover::before {
background-color: var(--accent-strong);
}
/* "Spaces that feel timeless." stacked at the right, on the photo. */
.service-cta-aside {
grid-column: 3;
align-self: center;
text-align: left;
}
.service-cta-aside p {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
line-height: 2;
text-transform: uppercase;
color: var(--white);
}
.service-cta-aside::before {
content: "";
display: block;
width: 34px;
height: 2px;
margin-bottom: 16px;
background-color: var(--hover);
}
@media (max-width: 900px) {
.service-closing-cta {
grid-template-columns: 1fr;
min-height: 0;
}
/* Photo on top, copy below. A full-height scrim washed the photo
out; now the band gets a tall top padding so the photo shows
clearly, and the pale backing starts just above the headline.
px stops keep the text on the opaque part whatever the band's
height turns out to be. */
.service-closing-cta {
padding-top: 270px !important;
background-position: center top !important;
}
.service-closing-cta::before {
background: linear-gradient(to bottom, rgba(246, 248, 249, 0) 0, rgba(246, 248, 249, 0) 200px, rgba(246, 248, 249, 0.96) 255px, rgba(246, 248, 249, 0.96) 100%);
}
.service-cta-aside {
display: none;
}
}
/* Services hero: "SPACES / PEOPLE / BETTER LIVING" is white text on a
bright photo. A soft dark gradient from the right edge keeps it
legible without changing the look. The container's ::after is
already an absolute layer in Elementor, so it sits above the photo
and below the tagline (z-index 1). */
.services-hero-photo::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(to left, rgba(14, 24, 38, 0.62) 0%, rgba(14, 24, 38, 0.32) 32%, rgba(14, 24, 38, 0) 62%);
}
/* Photo panel was only as tall as the two text rows next to
it (short + wide = a portrait image cropped to look
landscape). Reference shows a tall panel — give it a real
height so the grid row grows to match, independent of the
text content's natural height. */
.contact-hero-photo {
min-height: 640px;
}
/* Small yellow underline under each philosophy description,
matching the zoomed reference crop. */
.contact-philosophy-col p {
position: relative;
padding-bottom: 20px;
}
.contact-philosophy-col p::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 32px;
height: 2px;
background-color: var(--hover);
}
/* Leaf + hexagon-cluster icons redrawn to match the actual
shapes in the reference (the first pass used a shield and
concentric circles as placeholders). */
.philosophy-enduring::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-9 6-15 16-16-1 10-7 16-16 16z'/%3E%3Cpath d='M6 18c3-3 6-6 12-13'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-9 6-15 16-16-1 10-7 16-16 16z'/%3E%3Cpath d='M6 18c3-3 6-6 12-13'/%3E%3C/svg%3E");
}
.philosophy-vision::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpolygon points='8,3.5 12,6 12,10.5 8,13 4,10.5 4,6'/%3E%3Cpolygon points='16,3.5 20,6 20,10.5 16,13 12,10.5 12,6'/%3E%3Cpolygon points='12,10.5 16,13 16,17.5 12,20 8,17.5 8,13'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpolygon points='8,3.5 12,6 12,10.5 8,13 4,10.5 4,6'/%3E%3Cpolygon points='16,3.5 20,6 20,10.5 16,13 12,10.5 12,6'/%3E%3Cpolygon points='12,10.5 16,13 16,17.5 12,20 8,17.5 8,13'/%3E%3C/svg%3E");
}
/* Footer nav's small ring before the first item — Mileend
asked for it gone. */
.akruti-footer-nav .elementor-nav-menu > li:first-child::before {
display: none;
}
/* =====================================================
46. REDESIGN — PROJECTS ARCHIVE (template 110)
Replica of design-reference/projects-desktop.png and
projects-mobile.png. The hero and closing CTA reuse the
Services archive's .services-intro / .services-hero-* /
.service-closing-cta classes wholesale (same visual
family, so no second pattern) -- .projects-hero and
.projects-closing-cta are added alongside them purely
to scope the handful of rules below that must NOT leak
onto the Services page that shares those base classes.
The 9 cards are real projects (post type `project`),
real titles/locations/categories/photos -- nothing here
is board filler. .project-card keeps its historic
class (main.js's category filter and the [hidden]
rule both key off it) but the old alternating-row/dark
look from an earlier pass is fully released below.
===================================================== */
/* ---------- Hero: hairline under it, unique to Projects.
.services-intro's own padding shorthand (!important) wipes
out the shared .projects-intro fixed-header clearance
(148px, see the "pre-existing bug" comment further down in
this file) -- restoring it here, scoped to Projects, or the
hero photo's top edge sits behind the 128px fixed header. ---------- */
/* .projects-intro.services-intro (2 classes) outranks a bare
.projects-hero (1 class) even with !important on both --
the compound selector below matches all 3 classes this
element actually carries, so it wins outright. */
.projects-intro.services-intro.projects-hero {
padding-top: 148px !important;
margin-bottom: 28px;
border-bottom: 1px solid var(--border);
}
/* Reference keeps "that" inline with "speak." on one second
line ("Spaces" / "that speak."). The shared .services-headline
em is display:block for Services' own "Designing /
possibilities." (a single trailing word), which would break
into three lines here -- overridden back to inline, scoped
to Projects only. */
.projects-hero .services-headline em {
display: inline;
}
/* ---------- Filter row: pill for "All", plain caps + a
vertical hairline between the rest, count pushed right ---------- */
/* Items left / count pinned to the far right edge of a
1180px-wide bar reads as a huge, unbalanced gap on a wide
monitor -- centring the whole cluster (items + count
together) as one group instead. */
.projects-filter {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
justify-content: center !important;
gap: 0 !important;
width: min(calc(100% - 14vw), 1180px) !important;
margin: 24px auto 48px !important;
padding: 0 0 20px !important;
border-bottom: 1px solid var(--border) !important;
border-radius: 0 !important;
}
.projects-filter-item {
position: relative;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 9px 20px !important;
font-size: 0.76rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--black) !important;
}
.projects-filter-item:first-child {
padding-left: 20px !important;
}
.projects-filter-item + .projects-filter-item::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 16px;
background-color: var(--border);
}
.projects-filter-item.is-active {
background-color: var(--hover) !important;
border-radius: 999px !important;
color: var(--black) !important;
}
.projects-filter-item.is-active::before {
display: none;
}
.projects-filter-item:hover:not(.is-active) {
color: var(--accent-strong) !important;
}
.projects-count {
margin-left: 32px;
padding-right: 0 !important;
font-size: 0.72rem !important;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted) !important;
white-space: nowrap;
}
/* ---------- Filter, mobile: dropdown instead of a scroll
row. The pill row's overflow-x:auto never scrolled reliably
once the row was centred (justify-content:center fighting a
horizontal scroller is a known flexbox trap: the overflow
splits to both sides and the far one isn't reachable), and
a native select is a better pattern for 5 options on a
phone regardless. The HTML widget's