/* =====================================================
   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 terracotta 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 the Concept 2 logo sheet.
       Replace if an exact brand value is defined. */

    --terracotta: #C1663A;

    --terracotta-dark: #A5522C;

    --terracotta-soft: rgba(193, 102, 58, 0.12);


    /* 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(--terracotta);
}


.story-number,
.service-number,
.project-number,
.service-offering-number,
.project-detail-section-number,
.mega-nav-item span,
.mega-service-link span {

    color: var(--terracotta);
}


.service-arrow,
.footer-logo-mark {

    color: var(--terracotta);
}


/* 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(--terracotta);

    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 */

.outline-button:hover {

    border-color: var(--terracotta);

    background-color: var(--terracotta);

    color: var(--white);
}


.dark-button:hover {

    background-color: var(--terracotta);

    border-color: var(--terracotta);
}


/* Service rows warm on hover rather than simply darkening */

.service-item:hover .service-number,
.service-item:hover .service-arrow {

    color: var(--terracotta);
}


/* =====================================================
   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(--terracotta);

    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(--terracotta);
}


.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(--terracotta);
}


.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(--terracotta);
}


@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(--terracotta);
}


.project-quote-inner p::after {

    content: "\201D";

    color: var(--terracotta);
}


.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(--terracotta);
}


/* =====================================================
   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(--terracotta);
}


.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(--terracotta);
}


.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(--terracotta);
}


.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(--terracotta);
}


.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(--terracotta);

    border-color: var(--terracotta);

    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(--terracotta);
}


.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(--terracotta);

    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(--terracotta);

    background-color: var(--cream);

    font-size: 0.98rem;
}


.contact-notice-success {

    border-left-color: #3F7A5A;
}


.contact-notice-error {

    border-left-color: #A5522C;
}


/* ---------- 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 <html> 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;
}