/* ==========================================================================
   ARSAB TECH — SITE-WIDE SHARED STYLES
   Navbar (glassmorphism) · Footer · Scroll reveal animations · Popup modal
   Used by: index.html, about.html, services.html, portfolio.html,
            contact.html, gallery.html
   ========================================================================== */

:root{
  --bg:#faf9f6;
  --ink:#14131f;
  --muted:#55536e;
  --line:#ECEAF0;
  --white:#fff;
  --soft:#f1efff;
  --indigo:#4a3aff;
  --footer:#211e1b;
  --max:1180px;
  --gutter:clamp(22px,4.2vw,64px);
  --radius:28px;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;

  /* Aliases so legacy --font-* / --ink-soft references from older pages keep working */
  --font-display:var(--display);
  --font-body:var(--body);
  --font-mono:var(--mono);
  --ink-soft:var(--muted);
  --base:var(--bg);
  --base-alt:var(--soft);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.modal-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
img,video{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-.025em}
.shell{width:min(var(--max),calc(100% - (var(--gutter)*2)));margin-inline:auto}
.mono-label{font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#777180;display:flex;align-items:center;gap:10px}
.mono-label::before{content:"";width:22px;height:1px;background:#8b8794}
.section-title{font-size:clamp(32px,4.2vw,52px);font-weight:600;margin-top:14px}
.section-copy{color:var(--muted);font-size:16px;max-width:600px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border-radius:999px;border:1px solid var(--ink);font-size:14px;font-weight:600;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,19,31,.16)}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-light:hover{transform:translateY(-2px);border-color:var(--ink)}

/* ---------- CTA / paragraph pattern (used on Contact / Services / Portfolio prompts) ---------- */
.cta-prompt{padding:96px 0}
.cta-prompt .shell{text-align:center}
.cta-prompt h2,.cta-prompt .cta-banner h2{font-family:var(--display);font-size:clamp(30px,3.6vw,42px);font-weight:600;letter-spacing:-.03em;max-width:720px;margin:0 auto 0}
.cta-prompt h2 span{color:var(--indigo)}
.cta-prompt p,.cta-prompt .cta-banner p{font-family:var(--body);color:var(--muted);font-size:16px;line-height:1.65;max-width:620px;margin:18px auto 0}
p.cta-prompt{font-family:var(--body);color:var(--muted);font-size:16px;line-height:1.65;max-width:620px;margin:18px auto 0;text-align:center}

/* ---------- NAVBAR (glassmorphism, floating pill) ---------- */
.home-nav{
  position:fixed;top:32px;left:50%;translate:-50% 0;
  width:min(860px,calc(100% - 32px));height:56px;z-index:100;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:5px 7px 5px 8px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.68);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 12px 35px rgba(20,18,17,.10),inset 0 1px 0 rgba(255,255,255,.55);
  border-radius:999px;
  will-change:transform;
  opacity:0;transition:opacity .72s cubic-bezier(.16,1,.3,1),translate .72s cubic-bezier(.16,1,.3,1);
}
body.is-loaded .home-nav{opacity:1;translate:-50% 0}
.home-logo{display:flex;align-items:center;gap:9px;font:600 16px var(--display);white-space:nowrap;color:var(--ink)}
.home-logo img{width:42px;height:42px;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px rgba(20,18,17,.08)}
.home-nav-links{display:flex;align-items:center;justify-content:center;gap:28px;min-width:0;white-space:nowrap}
.home-nav-links a{font:500 13px/1 var(--body);color:#29272d;transition:color .2s}
.home-nav-links a:hover,.home-nav-links a.active{color:#000}
.home-nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:0;justify-content:flex-end;visibility:visible;opacity:1}
.nav-circle{width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:#050505;color:#fff;text-decoration:none;font:600 20px/1 Inter,sans-serif}
.nav-mail{font-size:20px}
.nav-phone{font-size:18px}
.nav-menu{display:none;border:0}
.nav-menu span{width:17px;height:1.5px;background:#fff;display:block;margin:3px auto}
.home-mobile-menu{display:none}

@media(max-width:900px){
  .home-nav{top:18px;width:calc(100% - 24px);grid-template-columns:auto 1fr auto}
  .home-nav-links{display:none}
  .nav-phone{display:none}
  .nav-menu{display:grid}
  .home-mobile-menu{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    display:flex;flex-direction:column;padding:8px 18px;
    background:rgba(255,255,255,.96);border:1px solid var(--line);
    border-radius:20px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    opacity:0;pointer-events:none;transform:translateY(-6px);transition:.22s;
  }
  .home-mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
  .home-mobile-menu a{padding:12px 2px;color:var(--ink);border-bottom:1px solid var(--line);font-size:14px}
  .home-mobile-menu a:last-child{border:0}
}
@media(max-width:600px){
  .home-nav{height:52px;min-height:52px;padding:5px 6px}
  .home-logo{font-size:15px}
  .home-logo img{width:40px;height:40px}
  .nav-circle{width:40px;height:40px}
}

/* ---------- FOOTER ---------- */
.home-footer{width:min(1328px,calc(100% - 24px));margin:64px auto 12px;background:var(--footer);color:#f5f2f0;border-radius:20px;padding:54px 0 0;overflow:hidden}
.footer-shell{width:calc(100% - 112px);max-width:1200px;margin:0 auto}
.footer-main{display:grid;grid-template-columns:1.35fr .9fr .9fr 1.25fr;gap:56px;padding:0 0 64px}
.footer-logo{display:flex;align-items:center;gap:10px;font:700 20px var(--display);color:#f7f4f1}
.footer-logo img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.footer-brand p{max-width:365px;color:#c5c0bb;font-size:14px;line-height:1.55;margin-top:17px}
.footer-socials{display:flex;gap:14px;margin-top:20px}
.footer-socials a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#d8d2cc;background:rgba(255,255,255,.06);transition:background .2s ease,color .2s ease}
.footer-socials a:hover{background:#fff;color:#211e1b}
.footer-col{display:flex;flex-direction:column;gap:13px;min-width:0}
.footer-col h5{margin:0 0 6px;font:600 13px/1 Inter,sans-serif;color:#f4f0ec;text-transform:uppercase;letter-spacing:.01em}
.footer-col a{font:400 14px/1.35 Inter,sans-serif;color:#cfc9c2}
.footer-col a:hover{color:#fff}
.footer-contact-col small{font:500 9px/1 JetBrains Mono,monospace;letter-spacing:.16em;color:#68728a;margin:-1px 0 4px}
.footer-quote{display:inline-flex!important;width:max-content;margin-top:6px;padding:11px 20px;border-radius:999px;background:var(--indigo);color:#fff!important;font:600 12px/1 Inter,sans-serif!important;letter-spacing:.02em;transition:background .2s ease,transform .2s ease}
.footer-quote:hover{background:#372bc7;transform:translateY(-2px)}
.footer-bottom{min-height:62px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;color:#aaa39b;font:400 10px/1 JetBrains Mono,monospace;letter-spacing:.03em}
.footer-bottom>span:nth-child(2){text-align:center}
.footer-legal{display:flex;justify-content:flex-end;gap:22px}
.footer-legal a{color:inherit}
.footer-legal a:hover{color:#fff}

@media(max-width:900px){
  .home-footer{width:calc(100% - 20px);border-radius:18px;padding-top:42px}
  .footer-shell{width:calc(100% - 44px)}
  .footer-main{grid-template-columns:1fr 1fr;gap:40px 34px;padding-bottom:46px}
  .footer-brand{grid-column:1/-1}
  .footer-contact-col{grid-column:1/-1}
  .footer-bottom{grid-template-columns:1fr;min-height:auto;padding:18px 0;gap:12px}
  .footer-bottom>span:nth-child(2){text-align:left}
  .footer-legal{justify-content:flex-start}
}
@media(max-width:600px){
  .footer-main{grid-template-columns:1fr;gap:30px}
  .footer-brand,.footer-contact-col{grid-column:auto}
  .footer-col{gap:11px}
  .footer-col h5{margin-bottom:4px}
  .footer-bottom{flex-direction:column;gap:10px}
}

.home-whatsapp{position:fixed;right:22px;bottom:22px;z-index:90;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 12px 30px rgba(20,19,31,.18);transition:transform .2s ease}
.home-whatsapp:hover{transform:translateY(-3px) scale(1.05)}

/* ---------- SCROLL REVEAL ANIMATIONS ---------- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)}
[data-reveal].visible{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1)}
.stagger.visible>*{opacity:1;transform:none}
.stagger.visible>*:nth-child(2){transition-delay:.08s}
.stagger.visible>*:nth-child(3){transition-delay:.16s}
.stagger.visible>*:nth-child(4){transition-delay:.24s}
.stagger.visible>*:nth-child(5){transition-delay:.32s}
.stagger.visible>*:nth-child(6){transition-delay:.4s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],.stagger>*,[data-reveal].visible,.stagger.visible>*{transition:none!important;opacity:1!important;transform:none!important}
}/* ---------- POPUP MODAL (service details) ---------- */




/* FINAL NAV + PAGE SPACING */
.nav-social{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#050505;color:#fff;flex:0 0 auto;transition:transform .2s ease,background .2s ease}
.nav-social svg{width:18px;height:18px;display:block}
.nav-social:hover{transform:translateY(-2px);background:#151515}
body:not(.home-page):not(.gallery-page) main{padding-top:96px}
@media(max-width:900px){body:not(.home-page):not(.gallery-page) main{padding-top:82px}.home-nav-actions{gap:6px}.nav-social{width:38px;height:38px}.nav-social svg{width:17px;height:17px}}
@media(max-width:600px){body:not(.home-page):not(.gallery-page) main{padding-top:72px}.nav-social{width:36px;height:36px}.nav-social svg{width:16px;height:16px}}

/* ARSAB MOBILE NAV FINAL CSS */
@media (max-width: 760px) {
  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden;
  }

  .home-mobile-menu.open,
  .mobile-menu.open,
  .nav-mobile.open,
  [data-mobile-menu].open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ======================================================================
   CANONICAL RESPONSIVE NAVBAR — FINAL REPAIR
   Shared by all primary pages.
   Mobile: brand LEFT, actions + hamburger RIGHT.
   ====================================================================== */
.home-nav { min-width: 0; }
.home-logo { min-width: 0; }
.home-logo span { overflow: hidden; text-overflow: ellipsis; }
/* .home-nav-actions min-width:0 is set once, in the base rule near the top of this file. */

@media (max-width: 900px) {
  .home-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo actions";
    gap: 8px;
    align-items: center;
  }

  .home-logo {
    grid-area: logo;
    justify-self: start;
    min-width: 0;
  }

  .home-nav-actions {
    grid-area: actions;
    justify-self: end;
    /* justify-content and min-width are already set in the base rule and don't change at this breakpoint. */
  }

  .home-nav-links { display: none; }
  .nav-menu { display: grid; }

  .home-mobile-menu {
    left: 0;
    right: 0;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .home-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo actions";
    gap: 7px;
    width: calc(100% - 20px);
    min-height: 52px;
    padding: 6px 7px;
  }

  .home-logo {
    justify-self: start;
    font-size: 15px;
    gap: 7px;
  }

  .home-logo img {
    width: 37px;
    height: 37px;
    flex: 0 0 auto;
  }

  /* .home-nav-actions justify-self:end and gap:6px already hold at this width from the
     900px breakpoint above and are not changed here — no rule needed. */

  .nav-social,
  .nav-menu,
  .nav-circle {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }
}

@media (max-width: 340px) {
  .home-nav {
    gap: 5px;
    padding-inline: 5px;
  }

  .home-nav-actions { gap: 4px; }
  .home-logo { gap: 5px; font-size: 14px; }
  .home-logo img { width: 35px; height: 35px; }
  .nav-social,
  .nav-menu,
  .nav-circle { width: 36px; height: 36px; }
  .nav-social svg { width: 15px; height: 15px; }
}

/* NAV ACTION VISIBILITY — keep shared navbar controls visible */
.home-nav-actions .nav-social{display:grid;visibility:visible;opacity:1;}
/* SERVICE MODAL — shared min-width reset so offer/include lists can shrink in the flex/grid layout.
   (.service-modal-box/-work/-content used to be redeclared here too, but every property they set
   was always overridden by the canonical definitions below — see that block's comment — so those
   redundant declarations were removed rather than left to drift out of sync.) */
.service-modal-offers,.service-modal-includes{min-width:0;}

/* FINAL SHARED ICON VISIBILITY — all primary pages */
.home-nav-actions .nav-social {
  display:grid !important;
  place-items:center;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
  text-decoration:none;
}
.home-nav-actions .nav-social svg {
  display:block !important;
  width:18px !important;
  height:18px !important;
  max-width:18px;
  max-height:18px;
  flex:none;
}
.footer-socials a {
  display:grid !important;
  place-items:center;
}
.footer-socials a svg {
  display:block !important;
  width:18px !important;
  height:18px !important;
  max-width:18px;
  max-height:18px;
  flex:none;
}
@media (max-width:600px){
  .home-nav-actions .nav-social svg { width:16px !important; height:16px !important; }
  .footer-socials a svg { width:18px !important; height:18px !important; }
}

/* ---------- Phase 1 canonical interaction states ---------- */
.home-nav-actions .nav-social,
.home-nav-actions .nav-menu{visibility:visible;opacity:1}
.home-nav-actions .nav-social svg{display:block;width:18px;height:18px}
@media(max-width:600px){.home-nav-actions .nav-social svg{width:16px;height:16px}}

/* Service details modal: one constrained panel, internal content scroll, locked page behind it. */
.service-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(12,10,14,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.service-modal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}
.service-modal-box{position:relative;width:min(920px,calc(100vw - 40px));height:min(720px,calc(100vh - 40px));max-height:calc(100vh - 40px);min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.9fr);background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.22);transform:translateY(14px) scale(.985);transition:transform .25s ease}
.service-modal.open .service-modal-box{transform:none}
.service-modal-work{min-width:0;min-height:0;height:100%;background:#f0eff1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.service-modal-work img,.service-modal-work video{width:100%;height:100%;display:block;object-fit:contain;background:#f0eff1}
.service-modal-content{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:48px 40px 40px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.service-modal-content h3.is-empty,.service-modal-offers.is-empty{display:none}
.service-modal-close{position:absolute;right:14px;top:14px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid rgba(20,19,31,.12);background:rgba(255,255,255,.92);color:var(--ink);font-size:25px;line-height:1;cursor:pointer}
@media(max-width:760px){
  .service-modal{padding:10px}
  .service-modal-box{width:min(620px,calc(100vw - 20px));height:min(92vh,760px);max-height:92vh;display:flex;flex-direction:column}
  .service-modal-work{height:clamp(190px,42vw,280px);min-height:0;flex:0 0 auto}
  .service-modal-content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:28px 22px 25px}
}
/* .service-modal-content padding at this width is set by the later, more specific
   520px block near the bottom of this file (it always wins — this earlier value
   was never actually rendered), so only the close-button sizing remains here. */
@media(max-width:520px){.service-modal-close{top:10px;right:10px;width:36px;height:36px}}

/* Desktop mouse-wheel support for the horizontal service rail. */
.service-rail{overscroll-behavior-x:contain}


/* Final interaction polish — preserves the existing visual design. */
:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
.home-mobile-menu{z-index:20}
.service-modal{isolation:isolate}
.service-modal-content{scrollbar-gutter:stable}
@media(max-width:900px){.home-nav-actions{display:flex!important}.home-nav-actions .nav-social{display:grid!important}}

/* Portfolio creative detail modal only — approved typography reference. */
.arsab-popup-info h2,
.service-modal-content h2,
.service-modal-content h3{
  font-family:"Kaushan Script",cursive !important;
  font-weight:400;
}
.arsab-popup-description,
.arsab-popup-section p,
.service-modal-content p,
.service-modal-content li{
  font-family:"Bricolage Grotesque",sans-serif !important;
  color:#55536e;
}
.arsab-popup-kicker,
.arsab-popup-label,
.service-modal-content .eyebrow{
  font-family:"Bricolage Grotesque",sans-serif !important;
}
/* Screenshot-matched service detail panel: fixed artwork + independently scrollable copy.
   .service-modal-box's height/max-height/overflow here only ever restated values already
   set by the canonical definition above, so that rule was removed. .service-modal-work and
   .service-modal-content both still need height:100% here — verified against the live cascade
   that these are the properties actually deciding final layout at this point in the file (they
   land after the 760px clamp() rule above and override it back to 100%/100% — that's the
   real, current behavior, so it's preserved exactly rather than "simplified" away). */
.service-modal-work{
  height:100%;
}
.service-modal-content{
  height:100%;
}
.service-modal-kicker,.service-modal-content .eyebrow{
  font-family:"Bricolage Grotesque",sans-serif !important;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#4d46e5;
}
.service-modal-content h2.service-modal-title,
.service-modal-content h3.service-modal-subheading{
  font-family:"Kaushan Script",cursive !important;
  font-weight:400 !important;
  color:#11111a;
}
.service-modal-content h2.service-modal-title{
  font-size:clamp(38px,4vw,54px);
  line-height:.98;
  letter-spacing:-.02em;
  margin:12px 0 16px;
}
.service-modal-content h3.service-modal-subheading{
  font-size:22px !important;
  line-height:1.05;
  letter-spacing:0;
  margin:18px 0 10px !important;
}
.service-modal-content .service-modal-description,
.service-modal-content .service-modal-offers li,
.service-modal-content .service-modal-includes li{
  font-family:"Bricolage Grotesque",sans-serif !important;
  color:#55536e;
}
.service-modal-content .service-modal-description{
  font-size:16px;
  line-height:1.62;
  margin:0 0 8px;
}
.service-modal-content .service-modal-offers,
.service-modal-content .service-modal-includes{
  margin:0;
  padding:0;
}
.service-modal-content .service-modal-offers li,
.service-modal-content .service-modal-includes li{
  font-size:15px;
  line-height:1.55;
}
.service-modal-content .service-modal-offers-heading + .service-modal-offers{
  margin-bottom:4px;
}
.service-modal-content .service-modal-included-heading + .service-modal-includes{
  margin-bottom:18px;
}
@media(max-width:900px){
  .service-modal-box{height:min(92vh,760px);max-height:92vh;}
  .service-modal-content{padding:30px 24px 28px;}
}
@media(max-width:520px){
  .service-modal-box{height:92vh;max-height:92vh;}
  .service-modal-content{padding:24px 18px 24px;}
  .service-modal-content h2.service-modal-title{font-size:36px;}
  .service-modal-content h3.service-modal-subheading{font-size:20px !important;}
}


/* Final popup typography: subheadings are intentionally bold while body copy stays regular. */
.arsab-popup-label{
  font-family:"Kaushan Script",cursive !important;
  font-weight:700 !important;
  font-size:22px !important;
  line-height:1.05;
  letter-spacing:0 !important;
  text-transform:none !important;
  opacity:1 !important;
  color:#11111a !important;
}
.service-modal-content h3.service-modal-subheading{
  font-weight:700 !important;
}