/* Akash Remote Gates: architectural access systems design */
:root {
    --ink: #181c1a;
    --graphite: #272c29;
    --steel: #59615d;
    --canvas: #f4f5f1;
    --paper: #ffffff;
    --mist: #e7ebe6;
    --sage: #cad5cd;
    --signal: #c43d32;
    --signal-dark: #922d26;
    --line: #cfd4cf;
    --header-height: 88px;
    --radius: 4px;
    --shadow: 0 24px 70px rgba(20, 27, 23, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Archivo", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; }
body, button, input, select, textarea { letter-spacing: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, .display-serif { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; line-height: 1.02; }
h1 { font-size: 5rem; }
h2 { font-size: 3.4rem; }
h3 { line-height: 1.25; }
.shell { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: .7rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--header-height); background: rgba(244, 245, 241, .96); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease, background .25s ease; }
.site-header.is-scrolled { background: rgba(255, 255, 255, .98); box-shadow: 0 12px 35px rgba(24, 28, 26, .08); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-brand { display: inline-flex; align-items: center; gap: .9rem; color: var(--ink); text-decoration: none; }
.brand-mark { width: 46px; height: 46px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--graphite); color: var(--paper); overflow: hidden; }
.brand-mark span { display: grid; place-items: center; border-right: 1px solid rgba(255,255,255,.2); font-size: .66rem; font-weight: 700; }
.brand-mark span:last-child { border: 0; background: var(--signal); }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-family: "DM Serif Display", Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.brand-copy small { margin-top: .25rem; color: var(--steel); font-size: .69rem; text-transform: uppercase; }
.primary-navigation { display: flex; align-items: center; gap: 1.45rem; }
.primary-navigation > a { color: var(--graphite); font-size: .84rem; font-weight: 600; text-decoration: none; }
.primary-navigation > a:not(.nav-cta) { padding-block: 1rem; border-bottom: 2px solid transparent; }
.primary-navigation > a:not(.nav-cta):hover,
.primary-navigation > a:not(.nav-cta):focus-visible { border-color: var(--signal); }
.nav-cta, .button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: .75rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--signal); color: #fff !important; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.nav-cta:hover, .button:hover { background: var(--signal-dark); transform: translateY(-2px); }
.button-dark { background: var(--graphite); }
.button-dark:hover { background: #111412; }
.button-light { background: var(--paper); color: var(--ink) !important; border-color: var(--line); }
.button-light:hover { background: var(--mist); }
.button-outline { background: transparent; color: var(--ink) !important; border-color: var(--ink); }
.button-outline:hover { background: var(--ink); color: #fff !important; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; }
.menu-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--ink); }

/* Shared typography and sections */
main { min-height: 70vh; padding-top: var(--header-height); }
.eyebrow { margin-bottom: 1rem; color: var(--signal); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.lede { max-width: 680px; color: var(--steel); font-size: 1.15rem; line-height: 1.8; }
.section { padding: 7rem 0; }
.section-compact { padding: 4.5rem 0; }
.section-white { background: var(--paper); }
.section-dark { background: var(--graphite); color: #fff; }
.section-sage { background: var(--sage); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 460px); align-items: end; gap: 4rem; margin-bottom: 3rem; }
.section-heading h2 { max-width: 760px; margin-bottom: 0; }
.section-heading p { margin-bottom: .25rem; color: var(--steel); }
.section-dark .section-heading p { color: rgba(255,255,255,.68); }
.rule-link { display: inline-flex; gap: .6rem; align-items: center; padding-bottom: .25rem; border-bottom: 2px solid var(--signal); font-weight: 700; text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Home */
.home-hero { min-height: calc(100vh - var(--header-height)); display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); background: var(--paper); }
.hero-copy { align-self: center; padding: 5rem max(3rem, calc((100vw - 1280px) / 2)); padding-right: 4rem; }
.hero-copy h1 { max-width: 720px; margin-bottom: 1.5rem; }
.hero-copy h1 em { color: var(--signal); font-style: normal; }
.hero-copy .lede { max-width: 610px; }
.hero-image { position: relative; min-height: 640px; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-image-note { position: absolute; right: 0; bottom: 0; width: min(420px, 80%); padding: 1.5rem; background: var(--graphite); color: #fff; }
.hero-image-note strong, .hero-image-note span { display: block; }
.hero-image-note strong { font-family: "DM Serif Display", Georgia, serif; font-size: 1.4rem; font-weight: 400; }
.hero-image-note span { margin-top: .35rem; color: rgba(255,255,255,.62); font-size: .8rem; }
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); background: var(--canvas); }
.proof-strip > div { padding: 1.7rem 2rem; border-right: 1px solid var(--line); }
.proof-strip > div:last-child { border-right: 0; }
.proof-strip strong { display: block; font-family: "DM Serif Display", Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.proof-strip span { color: var(--steel); font-size: .76rem; }
.application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.application { min-width: 0; background: var(--paper); color: var(--ink); text-decoration: none; }
.application-media { aspect-ratio: 4 / 3; overflow: hidden; }
.application img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.application:hover img { transform: scale(1.035); }
.application-copy { padding: 1.7rem; }
.application-copy span { color: var(--signal); font-size: .72rem; font-weight: 700; }
.application-copy h3 { margin: .45rem 0; font-family: "DM Serif Display", Georgia, serif; font-size: 2rem; font-weight: 400; }
.application-copy p { margin-bottom: 0; color: var(--steel); }
.split-feature { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 620px; }
.split-feature > img { width: 100%; height: 100%; object-fit: cover; }
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: 5rem; background: var(--graphite); color: #fff; }
.split-copy h2 { margin-bottom: 1.5rem; }
.split-copy p { color: rgba(255,255,255,.68); }
.check-list { display: grid; gap: 0; margin: 2rem 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.check-list li { padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.video-grid figure { margin: 0; background: var(--paper); border: 1px solid var(--line); }
.video-grid video { width: 100%; aspect-ratio: 16 / 9; background: #111; object-fit: cover; }
.video-grid figcaption { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.3rem; }
.video-grid figcaption > span { color: var(--signal); font-weight: 700; }
.video-grid h3 { margin-bottom: .2rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1.45rem; font-weight: 400; }
.video-grid p { margin-bottom: 0; color: var(--steel); }
.cta-band { padding: 5rem 0; background: var(--signal); color: #fff; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.cta-inner h2 { max-width: 850px; margin-bottom: 0; font-size: 3rem; }

/* Inner page hero */
.page-hero { min-height: 520px; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.page-hero-copy { align-self: center; padding: 5rem max(3rem, calc((100vw - 1280px) / 2)); padding-right: 4rem; }
.page-hero-copy h1 { margin-bottom: 1.4rem; font-size: 4.5rem; }
.page-hero-media { min-height: 520px; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.intro-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 6rem; }
.intro-grid > h2 { font-size: 3rem; }
.prose { color: var(--steel); font-size: 1.06rem; }
.prose p { margin-bottom: 1.4rem; }

/* Services and quality */
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 80px .8fr 1.2fr; gap: 2rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.service-row > span { color: var(--signal); font-weight: 700; }
.service-row h3 { margin-bottom: 0; font-family: "DM Serif Display", Georgia, serif; font-size: 1.8rem; font-weight: 400; }
.service-row p { margin-bottom: 0; color: var(--steel); }
.process-grid, .quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.2); }
.process-step, .quality-item { padding: 2rem; background: var(--graphite); }
.process-step span, .quality-item span { color: #e8a39d; font-size: .75rem; font-weight: 700; }
.process-step h3, .quality-item h3 { margin: 2rem 0 .7rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.process-step p, .quality-item p { margin: 0; color: rgba(255,255,255,.64); }
.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.material-item { padding: 2rem; border: 1px solid var(--line); background: var(--paper); }
.material-item strong { display: block; margin-bottom: .65rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.material-item p { margin: 0; color: var(--steel); }

/* Products */
.products-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin-bottom: 2rem; }
.search-field { position: relative; max-width: 560px; }
.search-field input { width: 100%; height: 56px; padding: 0 3.3rem 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.search-field span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--signal); font-size: 1.3rem; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-button { min-height: 42px; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; }
.filter-button[aria-pressed="true"] { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.product-card { min-width: 0; background: var(--paper); border: 1px solid var(--line); }
.product-card[hidden] { display: none; }
.product-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.product-card:hover .product-image img { transform: scale(1.035); }
.product-category { position: absolute; top: .8rem; left: .8rem; padding: .35rem .55rem; background: var(--paper); color: var(--ink); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.product-body { padding: 1.4rem; }
.product-body h2 { margin-bottom: .6rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1.6rem; }
.product-body p { min-height: 52px; margin-bottom: 1.2rem; color: var(--steel); font-size: .9rem; }
.product-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.product-meta span { padding: .3rem .5rem; background: var(--mist); color: var(--steel); font-size: .68rem; }
.product-empty { padding: 4rem 1rem; text-align: center; border: 1px solid var(--line); background: var(--paper); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 220px; gap: 1rem; }
.gallery-item { position: relative; overflow: hidden; background: var(--mist); }
.gallery-item:nth-child(1), .gallery-item:nth-child(6) { grid-column: span 7; grid-row: span 2; }
.gallery-item:nth-child(2), .gallery-item:nth-child(5) { grid-column: span 5; }
.gallery-item:nth-child(3), .gallery-item:nth-child(4), .gallery-item:nth-child(n+7) { grid-column: span 5; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-caption { position: absolute; inset: auto 0 0; padding: 2rem 1.2rem 1.1rem; background: linear-gradient(transparent, rgba(15,18,16,.85)); color: #fff; }
.gallery-caption strong, .gallery-caption span { display: block; }
.gallery-caption span { color: rgba(255,255,255,.68); font-size: .75rem; }

/* Contact and forms */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; }
.contact-details { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--line); }
.contact-detail { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.contact-detail span { display: block; color: var(--signal); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.contact-detail a, .contact-detail address { margin-top: .35rem; color: var(--ink); font-style: normal; text-decoration: none; }
.map-panel { min-height: 520px; display: flex; align-items: flex-end; padding: 2rem; background: url('/images/ProductImages/Residential/MainCat_Resicential_Image.jpg') center / cover no-repeat; }
.map-card { width: min(440px, 100%); padding: 1.5rem; background: var(--paper); box-shadow: var(--shadow); }
.map-card h2 { margin-bottom: .7rem; font-size: 1.8rem; }
.map-card p { color: var(--steel); }
.form-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 5rem; align-items: start; }
.form-intro { position: sticky; top: 130px; }
.inquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 2.3rem; background: var(--paper); border: 1px solid var(--line); }
.form-field { display: grid; gap: .5rem; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: .78rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 52px; padding: .8rem .9rem; border: 1px solid #b9c0bb; border-radius: var(--radius); background: #fff; color: var(--ink); }
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 3px solid rgba(196,61,50,.16); border-color: var(--signal); }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--steel); font-size: .78rem; }
.form-success { padding: 1rem; border-left: 4px solid #467356; background: #e8f1eb; }

/* Privacy */
.legal-layout { display: grid; grid-template-columns: 280px 1fr; gap: 5rem; }
.legal-nav { position: sticky; top: 130px; align-self: start; display: grid; gap: .7rem; }
.legal-nav a { color: var(--steel); text-decoration: none; }
.legal-content { max-width: 760px; }
.legal-content section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.legal-content h2 { font-size: 2rem; }
.legal-content p, .legal-content li { color: var(--steel); }

/* Footer */
.site-footer { padding-top: 5rem; background: #1d211f; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 4rem; padding-bottom: 4rem; }
.footer-grid > div:not(.footer-intro) { display: grid; align-content: start; gap: .65rem; }
.footer-grid a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-intro > p { max-width: 420px; margin: 1.5rem 0 0; color: rgba(255,255,255,.6); }
.footer-brand { color: #fff; }
.footer-brand .brand-copy small { color: rgba(255,255,255,.5); }
.footer-label { margin-bottom: .6rem; color: #e39a94; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.footer-grid address { color: rgba(255,255,255,.62); font-style: normal; }
.footer-base { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; padding-block: 1.3rem; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.5); font-size: .74rem; }
.footer-base a { color: rgba(255,255,255,.72); }

@keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-copy > *, .page-hero-copy > * { animation: reveal .65s ease both; }
.hero-copy > :nth-child(2), .page-hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3), .page-hero-copy > :nth-child(3) { animation-delay: .16s; }

@media (max-width: 1080px) {
    h1 { font-size: 4rem; }
    h2 { font-size: 2.8rem; }
    .primary-navigation { gap: .8rem; }
    .primary-navigation > a { font-size: .76rem; }
    .home-hero { grid-template-columns: 1fr 1fr; }
    .hero-copy { padding-inline: 2rem; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-grid, .quality-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    :root { --header-height: 76px; }
    .shell { width: min(100% - 32px, 680px); }
    h1 { font-size: 3.1rem; }
    h2 { font-size: 2.4rem; }
    .section { padding: 4.5rem 0; }
    .brand-copy strong { font-size: 1.05rem; }
    .brand-copy small { display: none; }
    .brand-mark { width: 40px; height: 40px; }
    .menu-toggle { display: block; }
    .primary-navigation { position: absolute; top: 100%; left: 0; right: 0; display: none; align-items: stretch; padding: 1rem 16px 1.4rem; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(20,27,23,.12); }
    .primary-navigation.is-open { display: grid; }
    .primary-navigation > a { min-height: 46px; display: flex; align-items: center; padding: .7rem .4rem !important; border-bottom: 1px solid var(--line) !important; }
    .primary-navigation .nav-cta { margin-top: .5rem; justify-content: center; border: 0 !important; }
    .home-hero, .page-hero { min-height: auto; grid-template-columns: 1fr; }
    .hero-copy, .page-hero-copy { padding: 4rem 16px; }
    .page-hero-copy h1 { font-size: 3.1rem; }
    .hero-image, .page-hero-media { min-height: 420px; }
    .proof-strip { grid-template-columns: repeat(2, 1fr); }
    .proof-strip > div:nth-child(2) { border-right: 0; }
    .proof-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .section-heading, .intro-grid, .split-feature, .contact-grid, .form-layout, .legal-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .application-grid { grid-template-columns: 1fr; }
    .application-media { aspect-ratio: 16 / 10; }
    .split-copy { padding: 3rem 1.5rem; }
    .video-grid { grid-template-columns: 1fr; }
    .cta-inner { align-items: flex-start; flex-direction: column; }
    .cta-inner h2 { font-size: 2.4rem; }
    .service-row { grid-template-columns: 50px 1fr; }
    .service-row p { grid-column: 2; }
    .material-grid, .product-grid { grid-template-columns: 1fr; }
    .products-toolbar { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; }
    .gallery-item, .gallery-item:nth-child(n) { grid-column: auto; grid-row: auto; }
    .form-intro, .legal-nav { position: static; }
    .inquiry-form { grid-template-columns: 1fr; padding: 1.3rem; }
    .form-field-full, .form-note { grid-column: auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; }
    .footer-intro { grid-column: 1 / -1; }
    .footer-base { grid-template-columns: 1fr; gap: .4rem; }
}

@media (max-width: 460px) {
    h1, .page-hero-copy h1 { font-size: 2.65rem; }
    h2 { font-size: 2.1rem; }
    .hero-image, .page-hero-media { min-height: 350px; }
    .proof-strip { grid-template-columns: 1fr; }
    .proof-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .proof-strip > div:last-child { border-bottom: 0; }
    .process-grid, .quality-grid, .footer-grid { grid-template-columns: 1fr; }
    .footer-intro { grid-column: auto; }
    .service-row { grid-template-columns: 1fr; gap: .7rem; }
    .service-row p { grid-column: auto; }
    .gallery-grid { grid-auto-rows: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}