/* =====================================================
   NEW TECHNIQUE FABRICATION - style.css

   1. Global          2. Header          3. Side buttons
   4. Buttons         5. Hero            6. Page banner
   7. Sections        8. About           9. Services
   10. Steps          11. Why choose us  12. Gallery
   13. Contact        14. Footer         15. Animations
   16. Responsive (1024px, 768px, 480px)

   Colours can be changed in :root below.
===================================================== */


/* =====================================================
   1. GLOBAL
===================================================== */

:root {
    --bg: #1b232d;          /* page background */
    --bg-alt: #222c38;      /* alternate section background */
    --text: #eef2f5;        /* main text */
    --muted: #9eadbb;       /* soft text */
    --line: #364352;        /* borders */
    --weld: #ff7a1a;        /* orange accent (welding spark) */
    --steel: #2f3b49;       /* gear plate colour */
    --steel-light: #566679; /* gear plate highlight */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    font-family: 'Instrument Sans', system-ui, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--weld);
    outline-offset: 3px;
}

/* headings use the condensed industrial font */
h1, h2, h3, h4, .ntfLogo b {
    font-family: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
    font-weight: 800;
}

.ntfContainer {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 48px);
}

.ntfMuted {
    color: var(--muted);
    margin-top: 16px;
    max-width: 52ch;
}

/* round icon used in contact details and "why choose us" */
.ntfIcon {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--weld);
    font-size: 1.15rem;
    transition: 0.5s;
}


/* =====================================================
   2. HEADER
===================================================== */

.ntfHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 16px 0;
    transition: 0.3s;
}

/* added by main.js after the page is scrolled */
.ntfHeader.ntfHeaderScrolled {
    padding: 10px 0;
    background: rgba(27, 35, 45, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.ntfHeaderInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */

.ntfLogo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ntfLogo i {
    color: var(--weld);
    font-size: 28px;
}

.ntfLogo b {
    font-size: 1.4rem;
    line-height: 1;
}

.ntfLogo small {
    display: block;
    margin-top: 3px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* MENU */

.ntfMenu {
    display: flex;
    gap: 32px;
}

.ntfMenu a {
    padding-bottom: 4px;
    font-size: 0.95rem;
    color: var(--muted);
    /* orange underline that grows on hover */
    background: linear-gradient(var(--weld), var(--weld)) 0 100% / 0 2px no-repeat;
    transition: 0.3s;
}

.ntfMenu a:hover,
.ntfMenu a.ntfActive {
    color: var(--text);
    background-size: 100% 2px;
}

/* MOBILE MENU BUTTON (hidden on desktop) */

.ntfMenuButton {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ntfMenuButton span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    transition: 0.3s;
}

/* three lines turn into a cross when the menu is open */
.ntfMenuButton[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ntfMenuButton[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.ntfMenuButton[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =====================================================
   3. FLOATING SIDE BUTTONS
===================================================== */

.ntfSideButtons {
    position: fixed;
    top: 32%;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
}

.ntfSideButtons a {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
    color: #fff;
    transition: width 0.3s;
}

.ntfSideButtons a:hover {
    width: 58px;
}

.ntfSideContact {
    height: 150px !important;
    background: var(--weld);
    color: #1a1008 !important;
    border-radius: 8px 0 0 0;
}

/* "Contact Us" text is written vertically */
.ntfSideContact span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 2px;
}

.ntfSidePhone {
    background: var(--steel);
}

.ntfSideWhatsapp {
    background: #25d366;
    border-radius: 0 0 0 12px;
}


/* =====================================================
   4. BUTTONS
===================================================== */

.ntfButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: none;
    color: var(--text);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.25s;
}

.ntfButton:hover {
    transform: translateY(-2px);
    border-color: var(--text);
}

.ntfButtonPrimary {
    background: var(--weld);
    border-color: var(--weld);
    color: #1a1008;
}

.ntfButtonPrimary:hover {
    border-color: var(--weld);
    box-shadow: 0 10px 28px -8px var(--weld);
}

.ntfButtonSpaced {
    margin-top: 36px;
}


/* =====================================================
   5. HERO
===================================================== */

.ntfHero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* faint blueprint grid behind the hero and page banners */
.ntfHero::before,
.ntfPageBanner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.38;
    -webkit-mask-image: radial-gradient(ellipse at 68% 50%, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse at 68% 50%, #000 15%, transparent 72%);
}

/* canvas where the sparks are drawn */
#sparkCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.ntfHeroGrid {
    position: relative;
    z-index: 3;
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    padding-top: 120px;
    padding-bottom: 72px;
}

/* HEADLINE : each line slides up from behind a mask */

.ntfHeroTitle {
    margin-bottom: 26px;
    font-size: clamp(3rem, 7.2vw, 6.4rem);
    line-height: 0.95;
}

.ntfTitleLine {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
}

.ntfTitleLine > span {
    display: block;
    transform: translateY(110%);
    animation: ntfRise 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* second line is drawn as an outline, like a cut line */
.ntfTitleLine:nth-child(2) > span {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--text);
    animation-delay: 0.18s;
}

.ntfHeroText {
    max-width: 46ch;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--muted);
    opacity: 0;
    animation: ntfFade 0.8s 0.7s forwards;
}

.ntfHeroButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
    opacity: 0;
    animation: ntfFade 0.8s 0.9s forwards;
}

.ntfHeroTags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    max-width: 520px;
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
    color: var(--muted);
    opacity: 0;
    animation: ntfFade 0.8s 1.1s forwards;
}

/* GEAR PLATE */

.ntfGearButton {
    display: block;
    justify-self: center;
    width: min(100%, 500px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.ntfGearButton svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transition: filter 0.9s;
}

/* "ntfCutDone" is added by main.js when the cutting is finished */
.ntfGearButton svg.ntfCutDone {
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.4));
}

/* while cutting: only an orange outline is visible */
#gearOuter,
#gearHole {
    fill: var(--steel);
    fill-opacity: 0;
    stroke: var(--weld);
    stroke-width: 2.2;
}

#gearHole {
    fill: var(--bg);
}

.ntfBolt {
    fill: var(--bg);
    stroke: var(--steel-light);
    stroke-width: 2;
    opacity: 0;
}

/* after cutting: plate fills with steel, bolts appear, plate rotates slowly */
.ntfCutDone #gearOuter {
    fill: url(#steelGradient);
    fill-opacity: 1;
    stroke: var(--steel-light);
    transition: fill-opacity 0.9s, stroke 0.9s;
}

.ntfCutDone #gearHole {
    fill-opacity: 1;
    stroke: var(--steel-light);
    transition: fill-opacity 0.9s, stroke 0.9s;
}

.ntfCutDone .ntfBolt {
    opacity: 1;
    transition: opacity 0.6s;
}

.ntfCutDone #gearGroup {
    transform-origin: 200px 200px;
    animation: ntfSpin 90s linear infinite;
}


/* =====================================================
   6. PAGE BANNER (top of services, gallery, contact)
===================================================== */

.ntfPageBanner {
    position: relative;
    padding: 150px 0 60px;
    overflow: hidden;
}

.ntfPageBanner .ntfContainer {
    position: relative;
}

.ntfPageBanner h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
}

.ntfPageBanner p {
    max-width: 50ch;
    margin-top: 14px;
    color: var(--muted);
}


/* =====================================================
   7. SECTIONS
===================================================== */

.ntfSection {
    position: relative;
    padding: clamp(70px, 9vw, 115px) 0;
}

.ntfSectionAlt {
    background: var(--bg-alt);
}

.ntfSectionHeader {
    max-width: 680px;
    margin-bottom: 48px;
}

.ntfSectionHeader p {
    margin-top: 16px;
    color: var(--muted);
}

/* all section headings share one size */
.ntfSectionHeader h2,
.ntfAboutGrid h2,
.ntfContactGrid h2 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1;
}


/* =====================================================
   8. ABOUT
===================================================== */

.ntfAboutGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 6vw, 90px);
    align-items: center;
}

.ntfAboutVisual {
    position: relative;
    width: 100%;
    max-height: 520px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: linear-gradient(135deg, var(--steel), var(--bg));
}

.ntfAboutVisual > i {
    font-size: clamp(110px, 18vw, 200px);
    color: var(--steel-light);
    animation: ntfSpin 40s linear infinite;
}

.ntfAboutVisual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* small floating labels on the about picture */
.ntfFloatingCard {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.9rem;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    animation: ntfFloat 4s ease-in-out infinite;
}

.ntfFloatingCard i {
    color: var(--weld);
}

.ntfFloatLeft {
    left: 14px;
    bottom: 24px;
}

.ntfFloatRight {
    right: 14px;
    top: 24px;
    animation-delay: -2s;
}

.ntfFeatureList {
    margin: 26px 0 30px;
    border-top: 1px solid var(--line);
}

.ntfFeatureList > div {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    transition: transform 0.3s;
}

.ntfFeatureList > div:hover {
    transform: translateX(8px);
}

.ntfFeatureList i {
    margin-top: 6px;
    color: var(--weld);
}

.ntfFeatureList b {
    display: block;
}

.ntfFeatureList span {
    font-size: 0.92rem;
    color: var(--muted);
}


/* =====================================================
   9. SERVICES
===================================================== */

.ntfServicesGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ntfServiceCard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}

/* orange line that grows along the bottom on hover */
.ntfServiceCard::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--weld);
    transition: width 0.4s;
}

.ntfServiceCard:hover {
    transform: translateY(-6px);
    border-color: var(--steel-light);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.ntfServiceCard:hover::after {
    width: 100%;
}

/* image area : the icon shows if the photo is missing */
.ntfServiceImage {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--steel), var(--bg));
}

.ntfServiceImage i {
    font-size: 2.6rem;
    color: var(--steel-light);
}

.ntfServiceImage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s;
}

.ntfServiceCard:hover .ntfServiceImage img {
    transform: scale(1.08);
}

.ntfServiceText {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 22px;
}

.ntfServiceText h3 {
    font-size: 1.5rem;
    line-height: 1.05;
}

.ntfServiceText span {
    font-size: 0.85rem;
    color: var(--muted);
}


/* =====================================================
   10. STEPS
===================================================== */

.ntfStepsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ntfStepCard {
    padding: 32px 28px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: 0.3s;
}

.ntfStepCard:hover {
    transform: translateY(-6px);
    border-color: var(--weld);
}

/* big outlined step number */
.ntfStepCard b {
    display: block;
    margin-bottom: 12px;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--weld);
}

.ntfStepCard h3 {
    margin-bottom: 8px;
    font-size: 1.7rem;
    line-height: 1.05;
}

.ntfStepCard p {
    font-size: 0.95rem;
    color: var(--muted);
}


/* =====================================================
   11. WHY CHOOSE US
===================================================== */

.ntfWhyGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ntfWhyItem {
    display: flex;
    gap: 18px;
    padding: 26px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: border-color 0.3s;
}

.ntfWhyItem:hover {
    border-color: var(--weld);
}

.ntfWhyItem h3 {
    font-size: 1.5rem;
}

.ntfWhyItem p {
    font-size: 0.93rem;
    color: var(--muted);
}


/* =====================================================
   12. GALLERY
===================================================== */

.ntfGalleryGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ntfGalleryItem {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: linear-gradient(135deg, var(--steel), var(--bg));
}

.ntfGalleryItem > i {
    font-size: 3rem;
    color: var(--steel-light);
}

.ntfGalleryItem img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s;
}

.ntfGalleryItem:hover img {
    transform: scale(1.08);
}

.ntfGalleryItem figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 16px 14px;
    font-weight: 500;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}


/* =====================================================
   13. CONTACT
===================================================== */

.ntfContactGrid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(30px, 6vw, 90px);
    align-items: start;
}

.ntfContactDetails {
    display: grid;
    gap: 22px;
    margin-top: 32px;
}

.ntfContactDetails > div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ntfContactDetails small {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
}

.ntfContactDetails a:hover {
    color: var(--weld);
}

.ntfContactForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 18px;
    padding: clamp(22px, 4vw, 40px);
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-top: 4px solid var(--weld);
    border-radius: 6px;
}

.ntfField label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
}

.ntfField input,
.ntfField select,
.ntfField textarea {
    width: 100%;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: inherit;
    outline: 0;
    transition: border-color 0.3s;
}

.ntfField select option {
    background: var(--bg-alt);
}

.ntfField input:focus,
.ntfField select:focus,
.ntfField textarea:focus {
    border-color: var(--weld);
}

/* a field that takes the full width of the form */
.ntfFieldFull {
    grid-column: 1 / -1;
}


/* =====================================================
   14. FOOTER
===================================================== */

.ntfFooter {
    padding-top: 70px;
    background: #141b23;
    border-top: 3px solid var(--weld);
}

.ntfFooterGrid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr;
    gap: 40px;
}

.ntfFooter h4 {
    margin-bottom: 16px;
    font-size: 1.25rem;
    color: var(--weld);
}

.ntfFooter p,
.ntfFooter li {
    font-size: 0.92rem;
    color: var(--muted);
}

.ntfFooter p {
    max-width: 34ch;
    margin-top: 16px;
}

.ntfFooter li {
    margin-bottom: 9px;
}

.ntfFooter a:hover {
    color: var(--weld);
}

.ntfFooterBottom {
    margin-top: 50px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--muted);
}


/* =====================================================
   15. ANIMATIONS
===================================================== */

/* scroll reveal : main.js adds "ntfRevealVisible" when the element enters the screen */
.ntfReveal {
    opacity: 0;
}

.ntfReveal.ntfRevealVisible {
    opacity: 1;
    animation: ntfUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* cards in a row appear one after another */
.ntfServicesGrid > :nth-child(4n + 2),
.ntfGalleryGrid > :nth-child(3n + 2) {
    animation-delay: 0.08s !important;
}

.ntfServicesGrid > :nth-child(4n + 3),
.ntfGalleryGrid > :nth-child(3n + 3) {
    animation-delay: 0.16s !important;
}

.ntfServicesGrid > :nth-child(4n + 4) {
    animation-delay: 0.24s !important;
}

.ntfStepsGrid > :nth-child(2),
.ntfWhyGrid > :nth-child(2) {
    animation-delay: 0.12s !important;
}

.ntfStepsGrid > :nth-child(3),
.ntfWhyGrid > :nth-child(3) {
    animation-delay: 0.24s !important;
}

.ntfWhyGrid > :nth-child(4) {
    animation-delay: 0.36s !important;
}

@keyframes ntfUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
}

@keyframes ntfRise {
    to {
        transform: none;
    }
}

@keyframes ntfFade {
    to {
        opacity: 1;
    }
}

@keyframes ntfSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ntfFloat {
    50% {
        transform: translateY(-10px);
    }
}

/* people who turn off animations in their device settings get a still page */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .ntfTitleLine > span {
        transform: none;
    }

    .ntfHeroText,
    .ntfHeroButtons,
    .ntfHeroTags,
    .ntfReveal {
        opacity: 1;
    }
}


/* =====================================================
   16. RESPONSIVE
===================================================== */

/* ---------- LARGE TABLET : 1024px ---------- */
@media (max-width: 1024px) {

    .ntfMenu {
        gap: 20px;
    }

    .ntfHeroGrid {
        gap: 28px;
        padding-top: 110px;
    }

    .ntfServicesGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ntfGalleryGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ntfFooterGrid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- TABLET : 768px ---------- */
@media (max-width: 768px) {

    /* menu turns into a dropdown opened by the button */
    .ntfMenuButton {
        display: flex;
    }

    .ntfMenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 8px 24px 20px;
        background: var(--bg-alt);
        border-bottom: 1px solid var(--line);
    }

    /* "ntfMenuOpen" is toggled by main.js */
    .ntfMenu.ntfMenuOpen {
        display: flex;
    }

    .ntfMenu a {
        padding: 15px 0;
        border-bottom: 1px solid var(--line);
        background: none;
    }

    /* hero : text first, gear below */
    .ntfHero {
        align-items: flex-start;
    }

    .ntfHeroGrid {
        grid-template-columns: 1fr;
        padding: 116px 0 56px;
    }

    .ntfGearButton {
        width: min(80vw, 400px);
    }

    .ntfPageBanner {
        padding-top: 128px;
    }

    .ntfAboutGrid,
    .ntfContactGrid,
    .ntfWhyGrid,
    .ntfStepsGrid {
        grid-template-columns: 1fr;
    }

    .ntfAboutVisual {
        max-height: 420px;
    }

    .ntfServicesGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- MOBILE : 480px ---------- */
@media (max-width: 480px) {

    .ntfLogo b {
        font-size: 1.2rem;
    }

    .ntfHeroTitle {
        font-size: clamp(2.6rem, 13.5vw, 3.4rem);
    }

    /* buttons stack and fill the width */
    .ntfHeroButtons {
        flex-direction: column;
    }

    .ntfButton {
        width: 100%;
    }

    .ntfHeroTags {
        gap: 8px 20px;
        margin-top: 32px;
    }

    .ntfGearButton {
        width: 86vw;
    }

    .ntfServicesGrid {
        gap: 12px;
    }

    .ntfServiceText {
        padding: 14px 14px 18px;
    }

    .ntfServiceText h3 {
        font-size: 1.25rem;
    }

    .ntfWhyItem {
        padding: 20px;
    }

    .ntfGalleryGrid,
    .ntfFooterGrid,
    .ntfContactForm {
        grid-template-columns: 1fr;
    }

    .ntfSideButtons a {
        width: 42px;
        height: 42px;
    }

    .ntfSideContact {
        height: 130px !important;
    }
}