/* Self-hosted fonts (no Google Fonts request — faster and reliable for visitors in Iran) */
@font-face{font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/vazirmatn-arabic-400-normal.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/vazirmatn-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Vazirmatn'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/vazirmatn-arabic-500-normal.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Vazirmatn'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/vazirmatn-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/vazirmatn-arabic-700-normal.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/vazirmatn-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/oswald-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/oswald-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   AFM (Ayrik Fidar Maham) — design tokens
   Palette sampled directly from the brand's own navy + brushed-silver
   monogram: a cool, near-white body for legibility, with a deep navy
   "bookend" nav + footer where the logo sits flush on its own matching
   background (never floating on a mismatched color). Vazirmatn carries all
   Persian text for clean, legible joining; Oswald (bold, geometric,
   industrial) is reserved for short Latin accent labels/numerals, echoing
   the squared-off letterforms of the logo itself.
   ========================================================================== */
:root{
  /* -- AFM v2: the whole site now sits on the logo's own deep-navy
     background (sampled from the original logo artwork), so the mark and
     the page are one surface — no more "logo in a box" mismatch. -- */
  color-scheme:dark;
  --bg:#0E1622;           /* = logo background */
  --bg-deep:#0A111B;
  --ink:#0A111B;
  --surface:#121C2B;
  --surface-2:#172336;
  --line:#22314A;
  --line-soft:#1B2840;
  --paper:#EEF1F5;        /* headings */
  --muted:#A6B0BF;        /* body text */
  --faint:#6F7C90;
  --accent:#2F5089;       /* navy from the logo letters */
  --accent-2:#9FB4D8;     /* light steel — accent text on dark */
  --accent-hover:#3A5E9C;

  --on-dark-bg:#0E1622;
  --on-dark-panel:#121C2B;
  --on-dark-line:#22314A;
  --on-dark-text:#EEF1F5;
  --on-dark-muted:#A6B0BF;
  --on-dark-faint:#6F7C90;
  --accent-light:#B7C7E3;
  --silver:#AEB5BF;
  --silver-light:#D5DAE1;
  --metal:linear-gradient(180deg,#F1F3F6 0%,#CDD2DA 48%,#A9B0BB 52%,#C7CDD5 100%);

  --font-display:'Vazirmatn', sans-serif;
  --font-body:'Vazirmatn', sans-serif;
  --font-accent:'Oswald', 'Vazirmatn', sans-serif;
  --container:1160px;
  --radius:6px;
  --nav-h:84px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px);}
body{
  background:var(--bg);
  color:var(--muted);
  font-family:var(--font-body);
  line-height:1.85;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;}
button{cursor:pointer; background:none; border:none;}
h1,h2,h3,h4{color:var(--paper); font-family:var(--font-display); font-weight:700; line-height:1.35;}
.latin{font-family:var(--font-accent); direction:ltr; unicode-bidi:isolate;}
.skip-link{position:absolute; right:-999px; top:0; background:var(--accent); color:#F5F7FA; padding:12px 20px; z-index:999; font-weight:700;}
.skip-link:focus{right:0;}
*:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px;}

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

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
section{padding:110px 0;}
@media (max-width:768px){ section{padding:72px 0;} }

/* ---- recurring signature: rule + letter-spaced label, echoing the logo's
   own "mark / rule / wordmark" construction ---- */
.kicker{display:inline-flex; align-items:center; gap:12px; margin-bottom:20px;}
.kicker .rule{width:34px; height:1px; background:var(--accent);}
.kicker span{font-family:var(--font-accent); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); font-weight:600;}
.kicker.centered{justify-content:center;}

.section-head{max-width:680px; margin-bottom:56px;}
.section-head.centered{margin-inline:auto; text-align:center;}
.section-head h2{font-size:clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem);}
.section-head p{font-size:1.06rem; margin-top:14px; max-width:600px;}
.section-head.centered p{margin-inline:auto;}

.accent{color:var(--accent-2);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-weight:600; font-size:1rem; font-family:var(--font-body);
  border:1px solid transparent; transition:all .25s ease; white-space:nowrap; border-radius:var(--radius);
}
.btn-primary{background:var(--accent); color:#F5F7FA;}
.btn-primary:hover{background:var(--accent-hover); box-shadow:0 14px 34px -16px rgba(15,26,46,.55);}
.btn-ghost{border-color:var(--line); color:var(--paper); background:var(--surface);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-2);}
.btn-block{width:100%;}
.btn:active{transform:translateY(1px);}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ============ NAV (dark bookend, flush with the logo's own navy) ============ */
.nav{position:fixed; inset-inline:0; top:0; z-index:100; height:var(--nav-h); display:flex; align-items:center;
  background:rgba(10,18,33,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s;}
.nav.scrolled{background:rgba(10,18,33,.98); border-color:var(--on-dark-line);}
.nav .container{display:flex; align-items:center; justify-content:space-between; width:100%;}

.brand{display:flex; align-items:center; gap:14px; position:relative; padding-inline-end:20px;}
.brand::after{content:''; position:absolute; inset-inline-end:0; top:50%; transform:translateY(-50%);
  width:1px; height:26px; background:var(--on-dark-line);}
.brand img{height:40px; width:auto; transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.brand:hover img{transform:scale(1.07) rotate(-2deg);}
.brand-text{display:flex; flex-direction:column; line-height:1.3;}
.brand-text b{font-family:var(--font-accent); font-size:1.1rem; color:var(--on-dark-text); letter-spacing:.05em;}
.brand-text span{font-size:.66rem; color:var(--on-dark-faint); letter-spacing:.1em; margin-top:1px;}

.nav-links{display:flex; align-items:center; gap:8px;}
.nav-links a{position:relative; font-size:.96rem; color:var(--on-dark-muted); transition:color .2s; padding:8px 4px;}
.nav-links a + a{margin-inline-start:26px;}
.nav-links a::after{content:''; position:absolute; inset-inline-start:0; bottom:2px; width:0; height:1.5px;
  background:var(--accent-light); transition:width .3s cubic-bezier(.2,.8,.2,1);}
.nav-links a:hover, .nav-links a.active{color:var(--on-dark-text);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}

.nav-cta{display:flex; align-items:center; gap:16px;}
.nav .btn-primary{padding:11px 22px; font-size:.9rem;}
.admin-pill{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--on-dark-faint); border:1px solid var(--on-dark-line); padding:8px 14px; border-radius:999px; transition:.2s;}
.admin-pill:hover{color:var(--accent-light); border-color:var(--accent); background:rgba(38,64,107,.18);}

.nav-toggle{display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center;
  border:1px solid var(--on-dark-line); border-radius:50%; transition:background .25s, border-color .25s;}
.nav-toggle:hover{background:rgba(38,64,107,.22); border-color:var(--accent);}
.nav-toggle span{width:18px; height:1.5px; background:var(--on-dark-text); border-radius:1px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s, width .25s;}
.nav-toggle span:nth-child(2){width:13px; align-self:flex-end; margin-inline-end:1px;}
.nav-toggle.open{border-color:var(--accent); background:rgba(38,64,107,.28);}
.nav-toggle.open span{width:18px;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{position:fixed; inset:var(--nav-h) 0 0 0; z-index:90; background:var(--on-dark-bg); display:flex; flex-direction:column;
  justify-content:space-between; padding:8px 28px 32px; transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s, transform .3s, visibility .3s;}
.mobile-menu.open{opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto;}
.mobile-menu-links{display:flex; flex-direction:column; padding-top:18px;}
.mobile-menu-links a{display:flex; align-items:center; gap:16px; font-size:1.3rem; padding:16px 4px;
  border-bottom:1px solid var(--on-dark-line); color:var(--on-dark-text);
  opacity:0; transform:translateX(14px); transition:color .2s;}
[dir="rtl"] .mobile-menu-links a{transform:translateX(-14px);}
.mobile-menu.open .mobile-menu-links a{animation:mm-link-in .45s cubic-bezier(.2,.8,.2,1) forwards;}
.mobile-menu.open .mobile-menu-links a:nth-child(1){animation-delay:.05s;}
.mobile-menu.open .mobile-menu-links a:nth-child(2){animation-delay:.1s;}
.mobile-menu.open .mobile-menu-links a:nth-child(3){animation-delay:.15s;}
.mobile-menu.open .mobile-menu-links a:nth-child(4){animation-delay:.2s;}
.mobile-menu.open .mobile-menu-links a:nth-child(5){animation-delay:.25s;}
.mobile-menu.open .mobile-menu-links a:nth-child(6){animation-delay:.3s;}
.mobile-menu-links a:hover{color:var(--accent-light);}
.mm-num{font-size:.78rem; color:var(--accent-light); opacity:.7; flex-shrink:0;}
@keyframes mm-link-in{to{opacity:1; transform:translateX(0);}}
.mobile-menu-foot{padding-top:22px;}
.mobile-menu-social{display:flex; justify-content:center; gap:14px; margin-top:20px;}
.mobile-menu-social a{width:42px; height:42px; border:1px solid var(--on-dark-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--on-dark-muted); transition:.2s;}
.mobile-menu-social a:hover{color:var(--accent-light); border-color:var(--accent);}
.mobile-menu-social svg{width:18px; height:18px;}
@media (max-width:940px){ .nav-links, .nav-cta .btn-primary{display:none;} .nav-toggle{display:flex;} }

/* ============ MESSAGES ============ */
.messages{max-width:var(--container); margin:calc(var(--nav-h) + 24px) auto 0; padding:0 24px;}
.messages li{background:rgba(38,64,107,.10); border:1px solid var(--accent); color:var(--paper); padding:16px 20px; border-radius:var(--radius); font-size:.95rem;}

/* ============ HERO (dark navy panel — the logo's own background, so the
   mark sits flush; brushed-silver radial glow echoes the metallic logo) ============ */
.hero{padding-top:calc(var(--nav-h) + 96px); padding-bottom:90px; text-align:center; position:relative;
  background:var(--on-dark-bg); overflow:hidden;}
.hero::before{content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(156,163,173,.14), transparent 62%),
    radial-gradient(600px 360px at 85% 110%, rgba(38,64,107,.35), transparent 60%);}
.hero .container{position:relative; z-index:1;}
.hero-mark{width:230px; max-width:70vw; margin:0 auto 40px; opacity:.98;}
.hero h1{color:var(--on-dark-text); font-size:clamp(2.3rem, 1.3rem + 3.6vw, 3.7rem); max-width:840px; margin:0 auto 26px; font-weight:700;}
.hero p.lead{color:var(--on-dark-muted); font-size:1.16rem; max-width:620px; margin:0 auto 40px;}
.hero-actions{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:60px;}
.hero .btn-ghost{border-color:var(--on-dark-line); color:var(--on-dark-text); background:transparent;}
.hero .btn-ghost:hover{border-color:var(--silver); color:var(--silver-light);}
.hero-strip{display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; border-top:1px solid var(--on-dark-line); padding-top:34px;}
.hero-strip div{padding:0 34px; text-align:center; border-inline-end:1px solid var(--on-dark-line);}
.hero-strip div:last-child{border-inline-end:none;}
.hero-strip b{display:block; font-family:var(--font-accent); font-size:1.6rem; color:var(--silver-light); margin-bottom:4px;}
.hero-strip span{font-size:.82rem; color:var(--on-dark-faint);}
@media (max-width:640px){ .hero-strip div{padding:14px 20px; border-inline-end:none; border-bottom:1px solid var(--on-dark-line); flex:1 1 40%;} }

/* ============ SERVICE / PACKAGE CARDS ============ */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service-card{background:var(--surface); transition:background .3s; overflow:hidden; display:block;}
.service-card:hover{background:var(--surface-2);}
.service-card-img{display:block; aspect-ratio:16/10; overflow:hidden;}
.service-card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s;}
.service-card:hover .service-card-img img{transform:scale(1.05);}
.service-card-body{display:block; padding:34px 34px 40px;}
.service-card .icon{width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--accent-2); margin-bottom:24px;}
.service-card .icon svg{width:26px; height:26px;}
.service-card h3{font-size:1.35rem; margin-bottom:12px;}
.service-card p{font-size:.96rem; margin-bottom:20px;}
.service-card .price{display:block; color:var(--accent-2); font-size:.88rem; font-weight:600; margin-bottom:14px;}
.service-card .more{font-size:.9rem; color:var(--paper); border-bottom:1px solid var(--accent); padding-bottom:2px; display:inline-block;}
@media (max-width:920px){ .card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .card-grid{grid-template-columns:1fr;} }

/* package detail */
.package-hero{padding-top:calc(var(--nav-h) + 60px); padding-bottom:70px; border-bottom:1px solid var(--line);}
.package-hero .icon-lg{width:64px; height:64px; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--accent-2); margin-bottom:30px;}
.package-hero .icon-lg svg{width:32px; height:32px;}
.package-hero h1{font-size:clamp(2rem,1.2rem+2.6vw,3rem); max-width:760px; margin-bottom:20px;}
.package-cover-full{max-width:900px; margin:50px auto 0; border:1px solid var(--line); width:100%; display:block;}
.package-hero .price{color:var(--accent-2); font-size:1.02rem; font-weight:600; margin-bottom:28px; display:block;}
.package-body{display:grid; grid-template-columns:1.5fr 1fr; gap:60px; padding-top:70px;}
.prose h2{font-size:1.5rem; margin:36px 0 16px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:16px;}
.prose ul{list-style:disc; padding-inline-start:1.4em; margin-bottom:16px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--paper);}
.feature-box{border:1px solid var(--line); background:var(--surface); padding:32px; height:max-content; position:sticky; top:calc(var(--nav-h) + 24px);}
.feature-box h3{font-size:1.1rem; margin-bottom:20px;}
.feature-box ul{display:flex; flex-direction:column; gap:14px; margin-bottom:26px;}
.feature-box li{display:flex; align-items:flex-start; gap:10px; font-size:.94rem; color:var(--muted);}
.feature-box li svg{flex-shrink:0; width:17px; height:17px; color:var(--accent-2); margin-top:3px;}
@media (max-width:900px){ .package-body{grid-template-columns:1fr;} .feature-box{position:static;} }

.related-strip{display:flex; gap:14px; flex-wrap:wrap; margin-top:16px;}
.related-strip a{border:1px solid var(--line); background:var(--surface); padding:10px 18px; font-size:.9rem; color:var(--muted); border-radius:999px;}
.related-strip a:hover{border-color:var(--accent); color:var(--accent-2);}

/* ============ ARTICLE / BLOG ============ */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px 32px;}
.article-card{display:flex; flex-direction:column;}
.article-card .cover{aspect-ratio:16/10; background:var(--surface-2); border:1px solid var(--line); margin-bottom:20px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.article-card .cover img{width:100%; height:100%; object-fit:cover;}
.article-card .cover .placeholder{color:var(--line); width:34px; height:34px;}
.article-card .cat{font-family:var(--font-accent); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent-2); margin-bottom:10px; display:block;}
.article-card h3{font-size:1.28rem; margin-bottom:10px;}
.article-card p{font-size:.94rem; margin-bottom:14px;}
.article-card .meta{font-size:.78rem; color:var(--faint); margin-top:auto;}
@media (max-width:920px){ .article-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .article-grid{grid-template-columns:1fr;} }

.pagination{display:flex; justify-content:center; gap:10px; margin-top:64px;}
.pagination a, .pagination span{border:1px solid var(--line); background:var(--surface); min-width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-size:.9rem;}
.pagination a:hover{border-color:var(--accent); color:var(--accent-2);}
.pagination .current{background:var(--accent); color:#F5F7FA; border-color:var(--accent);}

.article-detail-head{padding-top:calc(var(--nav-h) + 60px); padding-bottom:50px; text-align:center; border-bottom:1px solid var(--line);}
.article-detail-head .cat{font-family:var(--font-accent); letter-spacing:.08em; text-transform:uppercase; font-weight:600; font-size:.82rem; color:var(--accent-2); margin-bottom:18px; display:block;}
.article-detail-head h1{font-size:clamp(1.9rem,1.2rem+2.4vw,2.9rem); max-width:780px; margin:0 auto 22px;}
.article-detail-head .meta{color:var(--faint); font-size:.9rem;}
.article-cover-full{max-width:900px; margin:50px auto 0; border:1px solid var(--line);}
.article-body-wrap{max-width:720px; margin:0 auto; padding-top:60px;}
.article-body-wrap .prose{font-size:1.06rem;}
.article-body-wrap .prose h2{font-size:1.5rem;}
.article-share{border-top:1px solid var(--line); margin-top:50px; padding-top:30px; display:flex; align-items:center; gap:16px; font-size:.9rem; color:var(--faint);}

/* ============ RESUME ============ */
.resume-hero{padding-top:calc(var(--nav-h) + 70px); padding-bottom:60px; text-align:center; border-bottom:1px solid var(--line);}
.resume-hero h1{font-size:clamp(2rem,1.2rem+2.6vw,3rem); max-width:700px; margin:0 auto 20px;}
.timeline{max-width:760px; margin:0 auto; position:relative; padding-inline-start:34px;}
.timeline::before{content:''; position:absolute; inset-inline-start:5px; top:6px; bottom:6px; width:1px; background:var(--line);}
.timeline-item{position:relative; padding-bottom:44px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:''; position:absolute; inset-inline-start:-34px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
.timeline-item .type{font-family:var(--font-accent); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent-2); display:block; margin-bottom:6px;}
.timeline-item h3{font-size:1.2rem; margin-bottom:6px;}
.timeline-item .org{font-size:.88rem; color:var(--faint); margin-bottom:10px;}
.timeline-item p{font-size:.95rem;}

/* ============ PROJECT GALLERY (portfolio entries + article images) ============ */
.project-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-top:16px;}
.project-gallery-item{position:relative; display:block; aspect-ratio:4/3; border-radius:8px; overflow:hidden; border:1px solid var(--line);}
.project-gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s;}
.project-gallery-item:hover img{transform:scale(1.05);}
.project-gallery-caption{position:absolute; inset-inline:0; bottom:0; padding:6px 8px; font-size:.72rem; color:#fff;
  background:linear-gradient(to top, rgba(10,18,33,.85), transparent); opacity:0; transition:opacity .2s;}
.project-gallery-item:hover .project-gallery-caption{opacity:1;}
.article-gallery{margin-top:36px; margin-bottom:36px;}

/* ============ PRICE CALCULATOR ============ */
.calc-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start;}
.calc-section{border:1px solid var(--line); background:var(--surface); padding:30px 32px; margin-bottom:24px;}
.calc-section-head{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.calc-section h3{font-size:1.05rem; display:flex; align-items:center; gap:14px;}
.calc-section-num{font-family:var(--font-accent); color:var(--accent-2); font-size:.8rem; border:1px solid var(--line);
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.calc-section-hint{font-size:.82rem; color:var(--faint); margin:12px 0 20px;}
.calc-field-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;}
.calc-field-grid.calc-sub{margin-top:0;}
@media (max-width:640px){ .calc-field-grid{grid-template-columns:1fr 1fr;} }

.switch{position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.switch .slider{position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--line); transition:.25s; border-radius:999px; pointer-events:none;}
.switch .slider::before{content:''; position:absolute; height:18px; width:18px; inset-inline-start:3px; bottom:3px;
  background:#fff; transition:inset-inline-start .25s cubic-bezier(.2,.8,.2,1); border-radius:50%; box-shadow:0 1px 3px rgba(15,26,46,.3);}
.switch input:checked + .slider{background:var(--accent); border-color:var(--accent);}
.switch input:checked + .slider::before{inset-inline-start:23px;}

.calc-result-card{border:1px solid var(--line); background:var(--surface); padding:36px 32px; position:sticky; top:calc(var(--nav-h) + 24px);}
.calc-result-card h3{font-size:1.08rem; margin-bottom:24px;}
.calc-result-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; font-size:.94rem;}
.calc-result-row span{color:var(--muted);}
.calc-result-row b{color:var(--paper); font-weight:600; white-space:nowrap;}
.calc-result-row.small{font-size:.85rem; margin-bottom:10px;}
.calc-result-row.small b{font-weight:500; color:var(--muted);}
.calc-result-divider{height:1px; background:var(--line); margin:18px 0;}
.calc-total{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:4px 0 20px; text-align:center;}
.calc-total span{font-size:.8rem; color:var(--muted); letter-spacing:.03em;}
.calc-total b{font-size:1.9rem; color:var(--accent-2); font-family:var(--font-accent);}
.calc-note{font-size:.84rem; color:var(--faint); margin-bottom:22px; line-height:1.85;}
.calc-lead-toggle{display:block; width:100%; text-align:center; font-size:.86rem; color:var(--accent-2);
  border-bottom:1px dashed var(--line); padding:16px 0 4px; margin-top:14px; transition:.2s;}
.calc-lead-toggle:hover{color:var(--accent-hover);}
.calc-lead-form{margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}
.calc-lead-status{font-size:.82rem; color:var(--faint); margin-top:10px; text-align:center;}
@media (max-width:980px){ .calc-grid{grid-template-columns:1fr;} .calc-result-card{position:static;} }

/* ============ CALCULATOR PROMO BANNER (home page) ============ */
.calc-promo{background:var(--on-dark-bg); position:relative; overflow:hidden; padding:70px 0;}
.calc-promo::before{content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(700px 340px at 15% 20%, rgba(156,163,173,.12), transparent 60%);}
.calc-promo .container{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap; padding:52px 44px; border:1px solid var(--on-dark-line);}
.calc-promo-text h3{color:var(--on-dark-text); font-size:1.5rem; margin-bottom:10px;}
.calc-promo-text p{color:var(--on-dark-muted); font-size:.98rem; max-width:480px;}
.calc-promo .btn-primary{flex-shrink:0;}

/* ============ CONTACT ============ */
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:64px;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field label{font-size:.88rem; color:var(--muted);}
.field input, .field select, .field textarea{background:var(--surface); border:1px solid var(--line); padding:13px 15px; border-radius:var(--radius);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent);}
.field textarea{resize:vertical; min-height:120px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field .errorlist{list-style:none; color:#E58B7F; font-size:.82rem; margin-top:4px;}
.contact-info-card{border:1px solid var(--line); background:var(--surface); padding:32px; margin-bottom:20px;}
.contact-info-card h3{font-size:1.05rem; margin-bottom:24px;}
.contact-row{display:flex; align-items:flex-start; gap:14px; margin-bottom:20px;}
.contact-row:last-child{margin-bottom:0;}
.contact-row .icon{width:36px; height:36px; border:1px solid var(--line); background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--accent-2); flex-shrink:0;}
.contact-row .icon svg{width:16px; height:16px;}
.contact-row div span{display:block; font-size:.78rem; color:var(--faint); margin-bottom:3px;}
.contact-row div b{color:var(--paper); font-weight:600; font-size:.94rem;}
.social-row{display:flex; gap:10px;}
.social-row a{width:44px; height:44px; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:.2s; border-radius:var(--radius);}
.social-row a:hover{border-color:var(--accent); color:var(--accent-2);}
.social-row svg{width:19px; height:19px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} .field-row{grid-template-columns:1fr;} }

/* ============ CTA BAND ============ */
.cta-band{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center;}
.cta-band h2{font-size:clamp(1.7rem,1.1rem+2.2vw,2.5rem); max-width:640px; margin:0 auto 18px;}
.cta-band p{max-width:520px; margin:0 auto 34px;}

/* ============ GROWTH SIGNAL (quiet trust cue, not a dashboard) ============ */
.growth-note{display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 auto 34px;}
.growth-note .spark{color:var(--accent-2);}
.growth-note span{font-size:.82rem; color:var(--faint); font-family:var(--font-accent); }

/* ============ TESTIMONIALS ============ */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.testi-card{background:var(--surface); padding:38px 32px; display:flex; flex-direction:column; gap:22px;}
.testi-card .quote{color:var(--paper); font-size:1rem; line-height:1.9;}
.testi-who{display:flex; align-items:center; gap:12px; margin-top:auto;}
.testi-avatar{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-family:var(--font-accent); font-weight:700; color:#F2F4F7; font-size:.82rem; flex-shrink:0;}
.testi-who .name{color:var(--paper); font-weight:600; font-size:.92rem;}
.testi-who .role{font-size:.8rem; color:var(--faint);}
@media (max-width:920px){ .testi-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .testi-grid{grid-template-columns:1fr;} }

/* ============ WHY US ============ */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.why-card{background:var(--surface); padding:36px 28px; text-align:center;}
.why-card .num{font-family:var(--font-accent); color:var(--accent-2); font-size:1.4rem; display:block; margin-bottom:14px;}
.why-card h3{font-size:1.05rem; margin-bottom:10px;}
.why-card p{font-size:.9rem;}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* ============ FOOTER (dark bookend) ============ */
.footer{background:var(--on-dark-bg); color:var(--on-dark-muted); border-top:1px solid var(--on-dark-line); padding:70px 0 32px;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:44px; margin-bottom:50px;}
.footer .brand img{height:38px;}
.footer-about p{font-size:.9rem; margin:18px 0 0; max-width:280px; color:var(--on-dark-muted);}
.footer h4{color:var(--on-dark-text); font-size:.85rem; margin-bottom:18px; font-weight:600;}
.footer-links{display:flex; flex-direction:column; gap:12px;}
.footer-links a{font-size:.92rem; color:var(--on-dark-muted); transition:color .2s;}
.footer-links a:hover{color:var(--accent-light);}
.footer-contact a{display:flex; align-items:center; gap:8px;}
.footer-contact a svg{width:17px; height:17px; flex-shrink:0;}
.footer-address{font-size:.92rem; color:var(--on-dark-muted); line-height:1.7;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--on-dark-faint); border-top:1px solid var(--on-dark-line); padding-top:26px;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; gap:36px;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }

/* ============ EMPTY STATES ============ */
.empty-state{text-align:center; padding:60px 20px; border:1px dashed var(--line); color:var(--faint);}

/* ============ CHATBOT WIDGET ============ */
.chatbot{position:fixed; z-index:300; inset-inline-end:24px; bottom:24px; pointer-events:none;}
.chatbot > *{pointer-events:auto;}
.chatbot-toggle{position:relative; height:60px; padding:0 24px 0 22px; border-radius:999px; background:var(--ink); color:var(--accent-light);
  display:flex; align-items:center; gap:10px; box-shadow:0 16px 36px -10px rgba(0,0,0,.5); transition:transform .2s;}
.chatbot-toggle:hover{transform:translateY(-2px);}
.chatbot-toggle svg{width:24px; height:24px; position:relative; z-index:1; flex-shrink:0;}
.chatbot-toggle .close-icon{display:none;}
.chatbot.open .chatbot-toggle .chat-icon{display:none;}
.chatbot.open .chatbot-toggle .close-icon{display:block;}
.chatbot-toggle-label{position:relative; z-index:1; font-size:.92rem; font-weight:600; color:var(--on-dark-text); white-space:nowrap;}
.chatbot.open .chatbot-toggle-label{display:none;}
.chatbot-toggle::before{content:''; position:absolute; inset:-6px; border-radius:999px; border:2px solid var(--accent); opacity:.55; animation:chatbot-pulse 2.6s ease-out infinite;}
.chatbot.open .chatbot-toggle::before{display:none;}
@media (max-width:480px){
  .chatbot-toggle{width:60px; height:60px; padding:0; justify-content:center;}
  .chatbot-toggle-label{display:none;}
}
@keyframes chatbot-pulse{
  0%{transform:scale(.85); opacity:.6;}
  70%{transform:scale(1.28); opacity:0;}
  100%{transform:scale(1.28); opacity:0;}
}

.status-dot{width:6px; height:6px; border-radius:50%; background:#4CAF7D; display:inline-block; flex-shrink:0;}

.chatbot-panel{position:absolute; bottom:76px; inset-inline-end:0; width:360px; max-width:calc(100vw - 40px);
  height:480px; max-height:70vh; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:opacity .22s ease, transform .22s ease;}
.chatbot.open .chatbot-panel{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

.chatbot-header{display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--ink); color:var(--on-dark-text); flex-shrink:0;}
.chatbot-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#F2F4F7; display:flex; align-items:center; justify-content:center; font-family:var(--font-accent); font-weight:700; font-size:.85rem; flex-shrink:0;}
.chatbot-name{font-size:.95rem; font-weight:600;}
.chatbot-status{font-size:.75rem; color:var(--on-dark-faint); display:flex; align-items:center; gap:6px; margin-top:2px;}

.chatbot-messages{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px;}
.chat-msg{max-width:82%; padding:10px 14px; border-radius:12px; font-size:.9rem; line-height:1.75;}
.chat-msg.bot{background:var(--surface-2); color:var(--paper); align-self:flex-start; border-start-start-radius:3px;}
.chat-msg.user{background:var(--accent); color:#F2F4F7; align-self:flex-end; border-end-end-radius:3px;}
.chat-msg.typing{display:flex; gap:4px; align-items:center; padding:12px 16px;}
.chat-msg.typing span{width:6px; height:6px; border-radius:50%; background:var(--faint); animation:chat-typing 1s infinite ease-in-out;}
.chat-msg.typing span:nth-child(2){animation-delay:.15s;}
.chat-msg.typing span:nth-child(3){animation-delay:.3s;}
@keyframes chat-typing{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}

.chatbot-options{display:flex; flex-direction:column; gap:8px; padding:0 18px 16px; flex-shrink:0;}
.chatbot-options button{width:100%; text-align:start; border:1px solid var(--line); background:var(--surface); color:var(--paper);
  font-size:.86rem; padding:11px 14px; border-radius:10px; transition:.2s;}
.chatbot-options button:hover{border-color:var(--accent); background:var(--surface-2); color:var(--accent-2);}

/* honeypot: visually hidden but present in the DOM/tab order-excluded, so
   only bots that blindly fill every field trip it */
.hp-field{position:absolute !important; inset-inline-start:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none;}

.chatbot-input-row{display:flex; gap:8px; padding:14px; border-top:1px solid var(--line); flex-shrink:0;}
.chatbot-input-row input{flex:1; border:1px solid var(--line); border-radius:999px; padding:10px 16px; background:var(--surface-2); font-size:.9rem;}
.chatbot-input-row input:focus{outline:none; border-color:var(--accent);}
.chatbot-input-row button{width:40px; height:40px; border-radius:50%; background:var(--accent); color:#F5F7FA; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chatbot-input-row button svg{width:18px; height:18px;}

@media (max-width:480px){
  .chatbot{inset-inline-end:16px; bottom:16px;}
  .chatbot-panel{width:calc(100vw - 32px); height:65vh;}
}

/* ==========================================================================
   MOBILE FIXES (added after the mobile audit)
   ========================================================================== */
/* 1) The `hidden` attribute was being overridden by `display:grid/flex` rules
      (rack/stair fields and the chatbot text row were always visible). */
[hidden]{display:none !important;}

/* 2) Grid children must be allowed to shrink. Without this, an <input>/<textarea>
      (Django's textarea has cols=40) keeps its intrinsic width and widens the
      whole page on phones — this was breaking /contact/ and /price-calculator/. */
.contact-grid > *, .calc-grid > *, .package-body > *, .field-row > *, .calc-field-grid > *{min-width:0;}
.field input, .field select, .field textarea{width:100%; min-width:0; max-width:100%;}
.contact-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
.calc-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
.package-body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
.field-row{grid-template-columns:repeat(2,minmax(0,1fr));}
.calc-field-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:980px){ .calc-grid{grid-template-columns:minmax(0,1fr);} }
@media (max-width:900px){
  .contact-grid, .package-body{grid-template-columns:minmax(0,1fr);}
  .field-row{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){ .calc-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* 3) Article cover: max-width:900px was overriding the global max-width:100%
      and the image had no width, so a big photo forced a 900px-wide page. */
.article-cover-full, .package-cover-full{width:100%; max-width:900px; height:auto;}

/* 4) Long CTA labels (nowrap) could exceed narrow cards (feature-box @320px) */
@media (max-width:480px){
  .btn{white-space:normal; text-align:center; padding:14px 20px; line-height:1.6;}
  .feature-box, .calc-section, .calc-result-card, .contact-info-card{padding:24px 18px;}
  .calc-result-row b{white-space:normal;}
  .calc-total b{font-size:1.5rem; overflow-wrap:anywhere;}
}

/* 5) Galleries: always 2 columns on phones (was 1 column at <=360px) */
@media (max-width:560px){ .project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (hover:none){ .project-gallery-caption{opacity:1;} }

/* 6) Chat widget: keep it below the mobile menu, 16px input (no iOS zoom) */
.chatbot{z-index:80;}
.chatbot-input-row input{font-size:16px;}

/* 7) Tap targets & tiny text */
.footer-links a{padding:7px 0;}
.brand-text span{font-size:.72rem;}
.article-card .cat, .timeline-item .type{font-size:.8rem;}
.project-gallery-caption{font-size:.78rem;}

/* 8) Hero accent word was navy-on-navy (nearly invisible) */
.hero .accent{color:var(--accent-light);}

/* phone number inside wrapped buttons must stay on one line */
.btn .latin{white-space:nowrap; display:inline-block;}

/* ==========================================================================
   MOBILE FIXES — round 2 (admin-authored content)
   Long URLs, wide Markdown tables and code blocks entered from the admin
   panel were widening the whole page on phones (article, service detail,
   portfolio and the home page's portfolio section).
   ========================================================================== */
/* 1) Break long words / URLs instead of pushing the page wider */
.prose, .timeline-item, .article-card, .card, .feature-box, .calc-note,
.section-head, .contact-info-card, h1, h2, h3{overflow-wrap:anywhere; word-break:normal;}
.prose a{overflow-wrap:anywhere;}

/* 2) Markdown tables: scroll inside their own box, never the page */
.prose table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-collapse:collapse; margin:0 0 20px; font-size:.95rem;}
.prose th, .prose td{border:1px solid var(--line); padding:10px 14px; text-align:start; vertical-align:top;
  min-width:6.5em; overflow-wrap:normal;}
.prose th{background:var(--surface-2); color:var(--paper); font-weight:600;}

/* 3) Code / preformatted blocks: horizontal scroll inside the block */
.prose pre{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; direction:ltr; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); padding:14px 16px; margin:0 0 20px; font-size:.88rem; line-height:1.6;}
.prose pre code{overflow-wrap:normal; white-space:pre;}
.prose code{overflow-wrap:anywhere;}

/* 4) Images / embeds inside content never exceed the column */
.prose img, .prose video, .prose iframe{max-width:100%; height:auto;}
.prose iframe{width:100%;}
.prose blockquote{border-inline-start:3px solid var(--accent); padding-inline-start:16px; margin:0 0 16px;}

/* 5) Safety net: anything else that slips through is clipped instead of
      widening the layout viewport (overflow-x:clip keeps position:sticky working) */
main{overflow-x:clip;}

/* 6) Price calculator switches: bigger tap target on touch screens */
@media (max-width:640px){
  .switch{width:52px; height:30px;}
  .switch .slider::before{height:22px; width:22px;}
  .switch input:checked + .slider::before{inset-inline-start:25px;}
  .switch input{inset:-8px; width:auto; height:auto;}
}

/* 7) Calculator CTA: label and phone number on separate tidy lines */
@media (max-width:480px){
  .btn-stack{flex-direction:column; gap:2px;}
  .btn-stack .btn-sep{display:none;}
}

/* 8) Header tagline was 11.5px on phones — larger, but kept on one line */
.brand-text span{font-size:.78rem; white-space:nowrap;}
@media (max-width:340px){ .brand-text span{font-size:.7rem;} }

/* 9) Error pages (404 / 500) */
.error-page{min-height:70vh; display:flex; align-items:center; padding-top:calc(var(--nav-h) + 40px); padding-bottom:60px; text-align:center;}
.error-page .code{font-family:var(--font-accent); font-size:clamp(4rem,3rem + 6vw,7rem); color:var(--accent-2); line-height:1; margin-bottom:18px; display:block;}
.error-page h1{font-size:clamp(1.6rem,1.2rem + 2vw,2.3rem); color:var(--paper); margin-bottom:14px;}
.error-page p{max-width:520px; margin:0 auto 30px;}
.error-page .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ==========================================================================
   AFM v2 — brand, logo motion & dark-navy theme
   The site background now IS the logo background. The logo is a clean
   vector (templates/partials/afm_mark.html) with no box around it, so it
   sits flush everywhere. Everything below overrides the v1 rules above.
   ========================================================================== */

/* ---- page surface: logo navy + the same fine "brushed" grain as the logo art ---- */
html{background:var(--bg);}
body{background:var(--bg); color:var(--muted);}
body::before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -200px, rgba(80,110,160,.10), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
::selection{background:rgba(159,180,216,.35); color:#fff;}
h1,h2,h3,h4{color:var(--paper);}
section{position:relative;}
section + section:not(.hero):not(.calc-promo):not(.cta-band){border-top:1px solid var(--line-soft);}

/* ---- buttons: brushed-silver primary (echoes the metal letters), navy ghost ---- */
.btn{border-radius:var(--radius); letter-spacing:.01em; position:relative; overflow:hidden; isolation:isolate;}
.btn-primary{background:var(--metal); color:#0E1622; border-color:rgba(255,255,255,.35); font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 10px 28px -14px rgba(0,0,0,.8);}
.btn-primary::after{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform:translateX(-120%); transition:transform .8s var(--ease);}
.btn-primary:hover{background:var(--metal); color:#0A111B; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 38px -16px rgba(120,150,200,.55);}
.btn-primary:hover::after{transform:translateX(120%);}
.btn-ghost{background:rgba(255,255,255,.02); border-color:var(--line); color:var(--paper);}
.btn-ghost:hover{border-color:var(--silver); color:#fff; background:rgba(255,255,255,.05);}
.skip-link{color:#fff;}
*:focus-visible{outline:2px solid var(--accent-light);}

/* ---- kicker / labels ---- */
.kicker .rule{background:linear-gradient(90deg, transparent, var(--silver));}
[dir="rtl"] .kicker .rule{background:linear-gradient(270deg, transparent, var(--silver));}
.kicker span{color:var(--silver-light); letter-spacing:.28em; font-weight:500;}
.accent{color:var(--accent-2);}

/* ============ LOGO — vector mark + motion ============ */
.afm-mark{display:block; height:100%; width:auto; overflow:visible;}
.afm-mark .p{transform-box:fill-box; transform-origin:center;}
.afm-sheen{transform:translateX(0); animation:afm-sheen 7s var(--ease) 1.6s infinite;}
@keyframes afm-sheen{0%{transform:translateX(0);} 22%,100%{transform:translateX(1320px);}}

/* assemble: each block slides into place like floor panels being set */
.afm-mark--assemble .p{animation:afm-in .9s var(--ease) both;}
.afm-mark--assemble .p1{--dx:-26px; --dy:0; animation-delay:.05s;}
.afm-mark--assemble .p2{--dx:0; --dy:22px; animation-delay:.35s;}
.afm-mark--assemble .p3{--dx:34px; --dy:0; animation-delay:.15s;}
.afm-mark--assemble .p4{--dx:0; --dy:26px; animation-delay:.25s;}
.afm-mark--assemble .p5{--dx:0; --dy:-26px; animation-delay:.3s;}
.afm-mark--assemble .p6{--dx:30px; --dy:0; animation-delay:.2s;}
@keyframes afm-in{from{opacity:0; transform:translate(var(--dx),var(--dy));} to{opacity:1; transform:none;}}

/* draw: outlines are traced first (like a blueprint), then the metal fills in */
.afm-mark--draw .p{stroke-dasharray:1; stroke-dashoffset:1; fill-opacity:0;
  animation:afm-draw 1.3s var(--ease) forwards, afm-fill .8s ease forwards;}
.afm-mark--draw .p1{animation-delay:.1s, 1.05s;}
.afm-mark--draw .p2{animation-delay:.45s, 1.35s;}
.afm-mark--draw .p3{animation-delay:.2s, 1.15s;}
.afm-mark--draw .p4{animation-delay:.3s, 1.25s;}
.afm-mark--draw .p5{animation-delay:.38s, 1.3s;}
.afm-mark--draw .p6{animation-delay:.25s, 1.2s;}
.afm-mark--draw .afm-sheen{animation-delay:2.3s;}
@keyframes afm-draw{to{stroke-dashoffset:0;}}
@keyframes afm-fill{to{fill-opacity:1;}}

/* nav brand: mark | rule | name */
.brand{gap:16px; padding-inline-end:0;}
.brand::after{display:none;}
.brand-mark{height:30px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));}
.brand:hover .afm-sheen{animation:afm-sheen-once 1s var(--ease);}
@keyframes afm-sheen-once{from{transform:translateX(0);} to{transform:translateX(1320px);}}
.brand-rule{width:1px; height:30px; background:linear-gradient(180deg, transparent, var(--silver), transparent); opacity:.6;}
.brand-text{gap:1px;}
.brand-text .brand-fa{font-family:var(--font-display); font-size:.98rem; font-weight:700; color:var(--paper); letter-spacing:0; white-space:nowrap;}
.brand-text .brand-en{font-family:var(--font-accent); font-size:.64rem; letter-spacing:.34em; color:var(--silver); direction:ltr; text-align:right; white-space:nowrap;}
.brand img{display:none;}
@media (max-width:420px){ .brand-mark{height:24px;} .brand-text .brand-en{display:none;} .brand{gap:12px;} }

/* nav glass on logo navy */
.nav{background:rgba(14,22,34,.72); border-bottom:1px solid rgba(255,255,255,.04);}
.nav.scrolled{background:rgba(10,17,27,.94); border-color:var(--line);}
.nav .btn-primary{padding:10px 20px;}

/* ============ HERO — full logo lockup, animated ============ */
.hero{background:transparent; padding-top:calc(var(--nav-h) + 80px); padding-bottom:0; overflow:hidden; border:none;}
.hero::before{background:
  radial-gradient(760px 420px at 50% 28%, rgba(120,145,190,.16), transparent 65%),
  radial-gradient(600px 360px at 85% 100%, rgba(47,80,137,.28), transparent 60%);}
.hero-mark{display:none;}
.lockup{display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,34px); margin:0 auto 20px; direction:ltr;}
.lockup .afm-mark{height:clamp(78px, 11vw, 140px); filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));}
.lockup-rule{width:2px; align-self:stretch; background:linear-gradient(180deg, transparent, var(--silver) 20%, var(--silver) 80%, transparent);
  transform-origin:top; animation:lockup-rule 1s var(--ease) .9s both; opacity:.7;}
@keyframes lockup-rule{from{transform:scaleY(0);} to{transform:scaleY(1);}}
.lockup-words{display:flex; flex-direction:column; justify-content:center; gap:clamp(2px,.6vw,8px); text-align:left;}
.lockup-words span{font-family:var(--font-accent); font-weight:500; color:var(--silver-light);
  font-size:clamp(1rem, .6rem + 1.6vw, 1.75rem); line-height:1.1; letter-spacing:.42em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:lockup-word 1.1s var(--ease) both;}
.lockup-words span:nth-child(1){animation-delay:1.05s;}
.lockup-words span:nth-child(2){animation-delay:1.18s;}
.lockup-words span:nth-child(3){animation-delay:1.31s;}
@keyframes lockup-word{from{opacity:0; transform:translateX(-18px); filter:blur(6px);} to{opacity:1; transform:none; filter:none;}}
.lockup-tag{display:flex; align-items:center; justify-content:center; gap:18px; direction:ltr; margin:0 auto 54px;
  font-family:var(--font-accent); color:var(--silver); font-size:clamp(.7rem,.55rem + .5vw,.95rem); letter-spacing:.38em;
  animation:afm-fade 1s ease 1.55s both;}
.lockup-tag::before,.lockup-tag::after{content:''; height:1px; width:clamp(30px,8vw,110px); background:linear-gradient(90deg, transparent, var(--silver));}
.lockup-tag::after{background:linear-gradient(270deg, transparent, var(--silver));}
.lockup-tag i{font-style:normal; opacity:.5;}
@keyframes afm-fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.hero h1{font-size:clamp(1.9rem, 1.1rem + 3vw, 3.2rem); animation:afm-fade .9s ease 1.7s both;}
.hero p.lead{animation:afm-fade .9s ease 1.85s both;}
.hero .hero-actions{animation:afm-fade .9s ease 2s both;}
.hero .reveal{opacity:1; transform:none;}
.hero .btn-ghost{border-color:var(--line); color:var(--paper);}
@media (max-width:560px){
  .lockup{flex-direction:column; gap:14px;}
  .lockup-rule{width:clamp(80px,40vw,160px); height:1px; align-self:center; transform-origin:center;
    background:linear-gradient(90deg, transparent, var(--silver), transparent); animation-name:lockup-rule-x;}
  .lockup-words{flex-direction:row; gap:0 .9em; text-align:center; flex-wrap:wrap; justify-content:center;}
  .lockup-words span{letter-spacing:.22em; font-size:.95rem;}
  .lockup-tag{letter-spacing:.2em; gap:10px;}
  @keyframes lockup-rule-x{from{transform:scaleX(0);} to{transform:scaleX(1);}}
}

/* access-floor tile grid in perspective — the company's product, as texture */
.hero-floor{position:relative; height:220px; margin-top:40px; perspective:520px; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 45%, #000 70%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 45%, #000 70%, transparent);}
.hero-floor::before{content:''; position:absolute; left:-50%; right:-50%; top:0; height:600px;
  background-image:
    linear-gradient(rgba(174,181,191,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,181,191,.22) 1px, transparent 1px);
  background-size:60px 60px;
  transform:rotateX(62deg); transform-origin:top center; animation:floor-move 6s linear infinite;}
.hero-floor::after{content:''; position:absolute; left:50%; top:10px; width:60%; height:120px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(159,180,216,.18), transparent);}
@keyframes floor-move{from{background-position:0 0;} to{background-position:0 60px;}}
.hero-strip{border-top:1px solid var(--line); margin-top:-120px; position:relative; z-index:2; padding-bottom:70px;}
.hero-strip b{background:var(--metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

/* ============ SURFACES ============ */
.card-grid, .testi-grid, .why-grid{background:var(--line); border-color:var(--line); border-radius:var(--radius); overflow:hidden;}
.service-card, .why-card, .testi-card{background:var(--surface); position:relative;}
.service-card::before, .why-card::before{content:''; position:absolute; inset-inline:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--silver), transparent); transform:scaleX(0); transition:transform .5s var(--ease);}
.service-card:hover, .why-card:hover{background:var(--surface-2);}
.service-card:hover::before, .why-card:hover::before{transform:scaleX(1);}
.service-card .icon, .contact-row .icon{color:var(--accent-2);}
.service-card .more{color:var(--paper); border-color:var(--silver);}
.why-card .num{background:var(--metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:1.8rem;}
.feature-box, .contact-info-card, .calc-section, .calc-result-card, .article-card .cover, .pagination a, .pagination span,
.package-hero .icon-lg, .contact-row .icon, .related-strip a, .social-row a{border-radius:var(--radius);}
.pagination .current{background:var(--metal); color:#0E1622; border-color:transparent;}
.chat-msg.user, .chatbot-input-row button, .switch input:checked + .slider{background:var(--accent);}
.field input, .field select, .field textarea{color:var(--paper); background:var(--bg-deep);}
.field input::placeholder, .field textarea::placeholder{color:var(--faint);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--silver); box-shadow:0 0 0 3px rgba(174,181,191,.12);}
.calc-total{background:var(--bg-deep);}
.calc-total b{background:var(--metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cta-band{background:linear-gradient(180deg, var(--surface), var(--bg)); border-color:var(--line);}
.calc-promo{background:transparent;}
.calc-promo .container{border-color:var(--line); border-radius:10px; background:linear-gradient(135deg, rgba(47,80,137,.25), rgba(18,28,43,.6));}
.timeline-item::before{background:var(--bg); border-color:var(--silver);}
.messages li{background:rgba(47,80,137,.25); border-color:var(--accent); color:var(--paper);}
.chatbot-toggle{background:var(--surface-2); border:1px solid var(--line); color:var(--silver-light);}
.chatbot-panel{background:var(--surface); border-color:var(--line);}
.chatbot-header{background:var(--bg-deep); border-bottom:1px solid var(--line);}
.chatbot-avatar{background:var(--bg); border:1px solid var(--line); color:var(--silver-light);}
.chatbot-options button{background:var(--surface-2);}
.chatbot-input-row input{background:var(--bg-deep); color:var(--paper);}

/* ============ FOOTER ============ */
.footer{background:var(--bg-deep); border-top:1px solid var(--line);}
.footer-brand{display:flex; align-items:center; gap:16px; direction:ltr; justify-content:flex-end;}
.footer-brand .afm-mark{height:34px;}
.footer-brand .brand-rule{height:34px;}
.footer-brand .footer-words{font-family:var(--font-accent); font-size:.7rem; letter-spacing:.34em; color:var(--silver); line-height:1.5;}
.footer-about p{margin-top:22px;}

@media (prefers-reduced-motion: reduce){
  .afm-sheen, .hero-floor::before{animation:none !important;}
}