/* ============================================================
   Lahore Home Crew — main stylesheet
   Hand-written, no framework. Tokens first, then components.
   ============================================================ */

/* ----- Design tokens -------------------------------------- */
:root{
  /* Ground */
  --ink-900:#0a1e33;
  --ink-800:#102b47;
  --ink-700:#1b3e60;
  --ink-600:#2c5580;

  /* Accent — brand orange (sampled from the client artwork) */
  --orange-500:#f26a0a;
  --orange-600:#b04b05;
  --orange-400:#ff8a3d;
  --orange-100:#fde8d6;
  --orange-50:#fff7f0;

  /* Secondary — clay */
  --clay-500:#b8471b;
  --clay-600:#98380f;
  --clay-100:#fbe4da;

  /* Neutrals */
  --text:#13233a;
  --text-2:#35485f;
  --muted:#657386;
  --line:#e2e8f0;
  --line-soft:#eef2f7;
  --bg-soft:#f5f7fa;
  --bg-warm:#fbf7f3;
  --white:#ffffff;

  /* Feedback */
  --ok:#2f855a;
  --bad:#c53030;

  /* Shape */
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow-sm:0 1px 3px rgba(17,24,35,.07), 0 1px 2px rgba(17,24,35,.04);
  --shadow-md:0 10px 30px -12px rgba(17,24,35,.18);
  --shadow-lg:0 28px 64px -24px rgba(17,24,35,.32);
  --ring:0 0 0 3px rgba(242,106,10,.38);

  /* Type */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;

  /* Motion */
  --t:.25s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --header-h:76px;
}

/* ----- Reset ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;
     /* The off-canvas mobile nav sits at translateX(100%), past the right edge.
        `clip` contains it without creating a scroll container, so the sticky
        header keeps working — `overflow:hidden` here would break it. */
     overflow-x:clip}
body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--white);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.14;letter-spacing:-.02em;color:var(--ink-900)}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.25}
h4{font-size:1.02rem;line-height:1.35}
p{text-wrap:pretty}

/* ----- Layout utilities ----------------------------------- */
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
.container-narrow{max-width:840px}
.section{padding-block:clamp(56px,7vw,104px)}
.section-soft{background:var(--bg-soft)}
.section-warm{background:var(--bg-warm)}
.section-ink{background:var(--ink-900);color:#cdd6e3}
.section-ink h2,.section-ink h3{color:#fff}

.section-head{max-width:680px;margin-bottom:clamp(32px,4vw,52px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{margin-top:14px;font-size:1.06rem;color:var(--muted)}
.section-ink .section-head p{color:#9fadc0}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--clay-500);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange-500);border-radius:2px}
.section-ink .eyebrow{color:var(--orange-400)}

.grid{display:grid;gap:22px}
.lead{font-size:1.12rem;color:var(--text-2)}

/* ----- Buttons -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  font-weight:650;font-size:.96rem;line-height:1.2;
  transition:transform var(--t),background var(--t),box-shadow var(--t),color var(--t),border-color var(--t);
  white-space:nowrap;border:1.5px solid transparent;cursor:pointer;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{background:var(--orange-500);color:var(--ink-900);box-shadow:0 8px 20px -8px rgba(242,106,10,.7)}
.btn-primary:hover{background:var(--orange-400);box-shadow:0 14px 28px -10px rgba(242,106,10,.8)}

.btn-dark{background:var(--ink-900);color:#fff}
.btn-dark:hover{background:var(--ink-700)}

.btn-ghost{border-color:var(--line);background:var(--white);color:var(--ink-900)}
.btn-ghost:hover{border-color:var(--ink-900);background:var(--ink-900);color:#fff}

.btn-ghost-light{border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--ink-900);border-color:#fff}

.btn-wa{background:#25d366;color:#0b2e17;box-shadow:0 8px 20px -8px rgba(37,211,102,.7)}
.btn-wa:hover{background:#3ae07a}

.btn-lg{padding:16px 30px;font-size:1.02rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ----- Top contact strip ---------------------------------- */
.topbar{
  background:var(--ink-900);color:#9fadc0;
  font-size:.83rem;padding:8px 0;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:#cdd6e3;transition:color var(--t)}
.topbar a:hover{color:var(--orange-400)}
.topbar-list{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar-list li{display:flex;align-items:center;gap:7px}
.topbar svg{width:14px;height:14px;color:var(--orange-500)}

/* ----- Header / navigation -------------------------------- */
.header{
  position:sticky;top:0;z-index:70;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--t),border-color var(--t);
}
.header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(17,24,35,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}

.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:1.16rem;letter-spacing:-.025em;color:var(--ink-900)}
.logo-mark{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,var(--orange-500),var(--clay-500));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 16px -8px rgba(184,71,27,.9);
}
.logo-mark svg{width:21px;height:21px}
.logo small{display:block;font-family:var(--font);font-size:.68rem;font-weight:500;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;margin-top:-3px}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  padding:9px 15px;border-radius:999px;font-size:.94rem;font-weight:550;color:var(--text-2);
  transition:color var(--t),background var(--t);
}
.nav-links a:hover{color:var(--ink-900);background:var(--bg-soft)}
.nav-links a.active{color:var(--ink-900);background:var(--orange-100)}
.nav-cta{display:flex;align-items:center;gap:10px}

.nav-toggle{
  display:none;position:relative;width:44px;height:44px;
  border-radius:12px;border:1px solid var(--line);background:var(--white);
}
/* Absolutely positioned so all three bars share one centre point. Stacking
   them with margins makes the open state's geometry depend on row sizing, and
   the two bars end up meeting as a chevron instead of crossing as an X. */
.nav-toggle span{
  position:absolute;left:50%;top:50%;
  width:19px;height:2px;margin:-1px 0 0 -9.5px;
  background:var(--ink-900);border-radius:2px;
  transition:transform var(--t),opacity var(--t);
}
.nav-toggle span:nth-child(1){transform:translateY(-6px)}
.nav-toggle span:nth-child(3){transform:translateY(6px)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

.nav-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(17,24,35,.5);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.nav-overlay.open{opacity:1;visibility:visible}
body.nav-locked{overflow:hidden}

/* ----- Hero (home) ---------------------------------------- */
/* The photograph sits at the bottom of the stack; the scrim above it is
   heaviest on the left, where the headline sits, and thins out to the right so
   the painters stay visible. Keep the scrim — white text on bare photo fails
   contrast the moment the image changes. */
.hero{
  position:relative;overflow:hidden;
  background-color:var(--ink-900);
  background-image:
    radial-gradient(1100px 520px at 88% -10%, rgba(242,106,10,.20), transparent 62%),
    linear-gradient(100deg,
      rgba(7,21,37,.94) 0%,
      rgba(8,25,43,.88) 30%,
      rgba(10,30,51,.66) 62%,
      rgba(10,30,51,.42) 100%),
    url("../assets/img/site/hero-lahore.webp");
  background-size:auto, auto, cover;
  background-position:center, center, center right;
  background-repeat:no-repeat;
  color:#fff;
  padding-block:clamp(56px,7.5vw,104px) clamp(90px,10vw,140px);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
  mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--orange-400);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.07em;
  background:var(--orange-500);border-radius:99px;opacity:.9;
}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.18rem);color:#b9c5d6;max-width:56ch;margin-bottom:28px}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  padding:7px 15px 7px 9px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  font-size:.85rem;font-weight:550;color:#e4eaf3;
}
.hero-badge b{
  background:var(--orange-500);color:var(--ink-900);
  padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:750;letter-spacing:.02em;
}
.hero-note{margin-top:18px;font-size:.88rem;color:#8fa0b6;display:flex;align-items:center;gap:8px}
.hero-note svg{width:16px;height:16px;color:var(--orange-500);flex:none}

/* Hero swatch card */
.hero-card{
  background:rgba(9,26,44,.66);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);padding:26px;
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--shadow-lg);
}
.hero-card h2{font-size:1.06rem;color:#fff;margin-bottom:4px}
.hero-card > p{font-size:.88rem;color:#93a3b8;margin-bottom:18px}
.trade-list{display:grid;gap:2px}
.trade-list li a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  font-size:.93rem;font-weight:550;color:#dbe3ee;transition:background var(--t),transform var(--t),color var(--t);
}
.trade-list li a:hover{background:rgba(255,255,255,.08);transform:translateX(3px);color:#fff}
.trade-chip{width:11px;height:11px;border-radius:4px;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.trade-list .arrow{margin-left:auto;opacity:.45;width:15px;height:15px;transition:opacity var(--t),transform var(--t)}
.trade-list li a:hover .arrow{opacity:1;transform:translateX(2px)}

/* Paint edge divider under hero */
.paint-edge{display:block;width:100%;height:auto;margin-top:-1px;color:var(--white)}
.paint-edge.to-soft{color:var(--bg-soft)}

/* ----- Page hero (inner pages) ---------------------------- */
/* Banner strip at the top of every inner page. Each page sets its own photo
   with --page-hero-img; a page that sets nothing falls back to the flat navy
   the section used before, so adding a page never breaks. Same left-heavy
   scrim as the home hero: the headline stays readable whatever the photo. */
.page-hero{
  position:relative;
  background-color:var(--ink-900);
  background-image:
    radial-gradient(760px 340px at 82% -30%, rgba(242,106,10,.16), transparent 62%),
    linear-gradient(100deg,
      rgba(7,21,37,.96) 0%,
      rgba(8,25,43,.90) 36%,
      rgba(10,30,51,.72) 68%,
      rgba(10,30,51,.52) 100%),
    var(--page-hero-img, linear-gradient(165deg,var(--ink-900),var(--ink-800)));
  background-size:auto, auto, cover;
  background-position:center, center, center;
  background-repeat:no-repeat;
  color:#fff;
  padding-block:clamp(52px,6vw,84px) clamp(60px,7.5vw,96px);
}
/* Faint grain, same trick as the home hero, to stop the scrim banding. */
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
  mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.page-hero .container{position:relative;z-index:1}

/* Per-page banner photo.
   These live here, not in a style="" on the page, because a url() inside a
   custom property is resolved against the STYLESHEET that consumes it, not the
   document — an inline `url('assets/...')` silently requests /css/assets/... */
.page-hero--services{--page-hero-img:url("../assets/img/site/hero-services.webp")}
.page-hero--portfolio{--page-hero-img:url("../assets/img/site/hero-portfolio.webp")}
.page-hero--hire{--page-hero-img:url("../assets/img/site/hero-hire.webp")}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero p{margin-top:16px;font-size:1.08rem;color:#b3c0d1;max-width:62ch}
.crumbs{display:flex;align-items:center;gap:8px;font-size:.84rem;color:#8fa0b6;margin-bottom:16px}
.crumbs a{color:#b9c5d6;transition:color var(--t)}
.crumbs a:hover{color:var(--orange-400)}
.crumbs span{opacity:.5}

/* ----- Stats band ----------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
}
.stat{background:var(--white);padding:26px 20px;text-align:center}
.stat-value{font-family:var(--font-display);font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:800;color:var(--ink-900);letter-spacing:-.03em}
.stat-label{font-size:.85rem;color:var(--muted);margin-top:2px}

/* ----- Service cards -------------------------------------- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px}
.service-card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:flex;flex-direction:column;
}
.service-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft)}
.service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.service-card:hover .service-photo img{transform:scale(1.045)}
.service-card-body{padding:0 24px 22px;display:flex;flex-direction:column;flex:1}
.service-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--chip,var(--orange-500));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;
  background:color-mix(in srgb, var(--chip,var(--orange-500)) 14%, white);
  color:var(--chip,var(--orange-500));
}
/* Straddles the photo/body join. Circular on purpose: a rounded square gets
   visually cut by the photo edge and reads as a notch, where a circle reads
   as a badge sitting on the seam. */
.service-card-body .service-icon{
  width:54px;height:54px;border-radius:50%;
  margin-top:-27px;position:relative;z-index:2;
  box-shadow:0 0 0 5px var(--white), 0 4px 12px rgba(10,30,51,.18);
  background:var(--white);
}
.service-card-body .service-icon svg{width:24px;height:24px}
.service-icon svg{width:25px;height:25px}
.service-card h3{margin-bottom:8px}
.service-card p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
/* Stacked rather than a space-between row: the duration labels vary a lot in
   length, and on a row they wrapped differently on every card. */
.service-meta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
}
/* One text run, not two flex siblings — otherwise the duration itself gets
   broken across lines when the descriptor is long. */
.service-time{display:flex;align-items:flex-start;gap:7px;font-size:.84rem;font-weight:400;color:var(--muted)}
.service-time svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--muted)}
.service-time b{font-weight:700;color:var(--ink-900)}
.service-link{display:inline-flex;align-items:center;gap:5px;font-size:.88rem;font-weight:650;color:var(--clay-500)}
.service-link svg{width:15px;height:15px;transition:transform var(--t)}
.service-card:hover .service-link svg{transform:translateX(3px)}
.badge-popular{
  position:absolute;top:12px;right:12px;z-index:2;
  box-shadow:0 2px 8px rgba(10,30,51,.28);
  font-size:.64rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:var(--orange-600);padding:4px 10px;border-radius:999px;
}

/* ----- Service detail (services.html) --------------------- */
.service-block{padding-block:clamp(44px,5.5vw,72px);border-bottom:1px solid var(--line-soft)}
.service-block:last-child{border-bottom:0}
.service-block-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,56px);align-items:start}
.service-block-photo{
  margin:0 0 24px;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow-md);background:var(--bg-soft);
}
.service-block-photo img{width:100%;height:100%;object-fit:cover}
.service-block-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.service-block h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.service-block .lead{margin-bottom:22px}

.scope-list{display:grid;gap:10px;margin-bottom:24px}
.scope-list li{display:flex;gap:11px;font-size:.95rem;color:var(--text-2)}
.scope-list svg{width:19px;height:19px;flex:none;color:var(--ok);margin-top:2px}

.spec-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);position:sticky;top:calc(var(--header-h) + 20px)}
.spec-card h3{font-size:1rem;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.spec-card h3 svg{width:17px;height:17px;color:var(--orange-600)}
.timeline-rows{display:grid;gap:0;margin-bottom:20px}
.timeline-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.timeline-row:last-child{border-bottom:0}
.timeline-row span:first-child{color:var(--muted)}
.timeline-row span:last-child{font-weight:700;color:var(--ink-900);white-space:nowrap}

.price-box{background:var(--orange-50);border:1px solid #f7ddc4;border-radius:var(--radius-sm);padding:16px;margin-bottom:18px}
.price-value{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--ink-900);letter-spacing:-.02em}
.price-unit{font-family:var(--font);font-size:.9rem;font-weight:500;color:var(--muted)}
.price-note{font-size:.84rem;color:var(--text-2);margin-top:5px}
.price-caveat{display:flex;gap:8px;font-size:.8rem;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid #f2d9bd}
.price-caveat svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--orange-600)}

/* ----- Before / after slider ------------------------------ */
.ba{
  --pos:50%;
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:var(--ink-800);box-shadow:var(--shadow-md);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-label{
  position:absolute;bottom:14px;z-index:3;pointer-events:none;
  font-size:.72rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px);
  transition:opacity var(--t);
}
.ba-label-before{left:14px;background:rgba(17,24,35,.78);color:#fff}
.ba-label-after{right:14px;background:rgba(242,106,10,.96);color:var(--ink-900)}
.ba-line{
  position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;z-index:4;
  background:#fff;box-shadow:0 0 14px rgba(0,0,0,.45);pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;left:var(--pos);z-index:5;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.35);
  display:grid;place-items:center;cursor:ew-resize;
  transition:transform var(--t),box-shadow var(--t);
}
.ba-handle:hover{transform:scale(1.08)}
.ba-handle:focus-visible{box-shadow:0 4px 16px rgba(0,0,0,.35), var(--ring)}
.ba-handle svg{width:22px;height:22px;color:var(--ink-900);pointer-events:none}
.ba-hint{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.75rem;font-weight:600;color:#fff;background:rgba(17,24,35,.72);
  padding:5px 13px;border-radius:999px;pointer-events:none;
  transition:opacity .4s;backdrop-filter:blur(4px);
}
.ba.touched .ba-hint{opacity:0}

/* Flagship showcase on the home page */
.showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4.5vw,52px);align-items:center}
.showcase-facts{display:grid;gap:0;margin:20px 0 24px;border-top:1px solid var(--line)}
.showcase-facts div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.showcase-facts dt{color:var(--muted)}
.showcase-facts dd{font-weight:650;text-align:right;color:var(--ink-900)}

/* ----- Delivery / timeline promise pill ------------------- */
.ontime{
  display:inline-flex;align-items:center;gap:10px;
  background:#eaf6ef;border:1px solid #c8e6d4;color:#1f6b42;
  padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:650;
}
.ontime svg{width:17px;height:17px;flex:none}
.ontime.late{background:#fdf3e6;border-color:#f3dcb8;color:#93611a}

/* ----- Process timeline ----------------------------------- */
.process{position:relative;display:grid;gap:0}
.process::before{
  content:"";position:absolute;left:27px;top:34px;bottom:34px;width:2px;
  background:linear-gradient(180deg,var(--orange-500),var(--clay-500));opacity:.35;
}
.process-step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;padding-block:18px}
.process-num{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:var(--white);border:2px solid var(--orange-500);
  font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ink-900);
  box-shadow:0 0 0 6px var(--bg-soft);
}
.section-ink .process-num{background:var(--ink-800);border-color:var(--orange-500);color:#fff;box-shadow:0 0 0 6px var(--ink-900)}
.section-ink .process::before{opacity:.5}
.process-body h3{margin-bottom:5px}
.process-body p{color:var(--muted);font-size:.96rem;max-width:62ch}
.section-ink .process-body p{color:#9fadc0}
.process-time{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:.79rem;font-weight:700;letter-spacing:.03em;
  background:var(--orange-100);color:var(--orange-600);padding:4px 11px;border-radius:999px;
}
.section-ink .process-time{background:rgba(242,106,10,.18);color:var(--orange-400)}
.process-time svg{width:13px;height:13px}

/* ----- Areas ---------------------------------------------- */
.area-tags{display:flex;flex-wrap:wrap;gap:10px}
.area-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:9px 17px;font-size:.92rem;font-weight:550;color:var(--text-2);
  transition:border-color var(--t),color var(--t),transform var(--t);
}
.area-tag:hover{border-color:var(--orange-500);color:var(--ink-900);transform:translateY(-2px)}
.area-tag svg{width:14px;height:14px;color:var(--clay-500)}

/* ----- Testimonials --------------------------------------- */
.quotes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:20px}
.quote-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.quote-mark{font-family:var(--font-display);font-size:2.6rem;line-height:.7;color:var(--orange-500);margin-bottom:12px}
.quote-card p{font-size:.98rem;color:var(--text-2);margin-bottom:18px}
.quote-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)}
.quote-author{font-weight:700;font-size:.93rem}
.quote-meta{font-size:.82rem;color:var(--muted)}
.stars{display:flex;gap:2px;margin-bottom:12px}
.stars svg{width:15px;height:15px;color:var(--orange-500)}

/* ----- FAQ accordion -------------------------------------- */
.faq{display:grid;gap:10px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.faq-item.open{border-color:var(--orange-500);box-shadow:var(--shadow-sm)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 20px;text-align:left;font-weight:650;font-size:1rem;color:var(--ink-900);
}
.faq-q svg{width:19px;height:19px;flex:none;color:var(--orange-600);transition:transform var(--t)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{padding:0 20px 20px;color:var(--muted);font-size:.96rem;max-width:74ch}

/* ----- Portfolio ------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.filter-btn{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  font-size:.9rem;font-weight:600;color:var(--text-2);
  transition:all var(--t);
}
.filter-btn:hover{border-color:var(--ink-900);color:var(--ink-900)}
.filter-btn.active{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.filter-btn .count{opacity:.6;font-weight:500;margin-left:4px}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(22px,3vw,32px)}
.project-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow var(--t),transform var(--t);
}
.project-card:hover{box-shadow:var(--shadow-md)}
.project-card[hidden]{display:none}
.project-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.project-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.tag{
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--bg-soft);color:var(--text-2);
}
.tag-trade{background:color-mix(in srgb,var(--chip,var(--orange-500)) 15%, white);color:color-mix(in srgb,var(--chip,var(--orange-500)) 75%, black)}
.project-card h3{margin-bottom:9px}
.project-card > .project-body > p{font-size:.94rem;color:var(--muted);margin-bottom:18px}

.project-facts{display:grid;gap:0;margin-bottom:18px;border-top:1px solid var(--line-soft)}
.project-facts div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.875rem}
.project-facts dt{color:var(--muted);flex:none}
.project-facts dd{text-align:right;font-weight:600;color:var(--text)}

.project-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.project-quote{
  background:var(--bg-warm);border-left:3px solid var(--orange-500);
  padding:14px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:18px;
}
.project-quote p{font-size:.92rem;font-style:italic;color:var(--text-2);margin-bottom:6px}
.project-quote cite{font-size:.8rem;font-style:normal;color:var(--muted)}

.empty-state{text-align:center;padding:64px 20px;color:var(--muted)}
.empty-state svg{width:44px;height:44px;margin:0 auto 16px;color:var(--line)}

/* ----- Photo notice --------------------------------------- */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--orange-50);border:1px solid #f6dcc3;border-radius:var(--radius-sm);
  padding:16px 18px;font-size:.91rem;color:var(--text-2);
}
.notice svg{width:20px;height:20px;flex:none;color:var(--orange-600);margin-top:2px}
.notice strong{color:var(--ink-900)}

/* ----- Forms ---------------------------------------------- */
.form-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3.5vw,38px);box-shadow:var(--shadow-md);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:650;color:var(--ink-900)}
.field label .req{color:var(--clay-500)}
.field .hint{font-size:.8rem;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);font-size:.96rem;transition:border-color var(--t),box-shadow var(--t);
}
.field textarea{resize:vertical;min-height:112px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657386' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange-500);box-shadow:var(--ring)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad)}
.field-error{font-size:.8rem;color:var(--bad);display:none}
.field.invalid .field-error{display:block}

/* honeypot — must stay visually hidden but reachable by bots */
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}

.form-foot{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.form-status{padding:14px 16px;border-radius:var(--radius-sm);font-size:.92rem;display:none}
.form-status.show{display:block}
.form-status.ok{background:#eaf6ef;border:1px solid #c8e6d4;color:#1f6b42}
.form-status.err{background:#fdecec;border:1px solid #f5c6c6;color:#9b2c2c}
.form-smallprint{font-size:.83rem;color:var(--muted)}

.contact-rail{display:grid;gap:14px}
.contact-item{
  display:flex;gap:14px;align-items:flex-start;padding:16px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);
  transition:border-color var(--t),transform var(--t);
}
.contact-item:hover{border-color:var(--orange-500);transform:translateY(-2px)}
.contact-item .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--orange-100);color:var(--orange-600)}
.contact-item .ico svg{width:19px;height:19px}
.contact-item h4{font-size:.93rem;margin-bottom:1px}
.contact-item p,.contact-item a{font-size:.9rem;color:var(--muted)}
.contact-item a:hover{color:var(--clay-500)}

/* ----- CTA band ------------------------------------------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:
    radial-gradient(620px 300px at 88% 0%, rgba(242,106,10,.28), transparent 60%),
    linear-gradient(140deg,var(--ink-900),var(--ink-700));
  color:#fff;padding:clamp(32px,4.5vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;max-width:19ch;margin-bottom:8px}
.cta-band p{color:#b3c0d1;max-width:52ch}

/* ----- Footer --------------------------------------------- */
.footer{background:var(--ink-900);color:#97a5b8;padding-block:clamp(48px,6vw,72px) 28px;font-size:.93rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,44px);margin-bottom:40px}
.footer h2{color:#fff;font-size:.83rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px;font-family:var(--font);font-weight:700}
.footer a{color:#97a5b8;transition:color var(--t)}
.footer a:hover{color:var(--orange-400)}
.footer-links{display:grid;gap:9px}
.footer-about p{margin:14px 0 18px;max-width:38ch;font-size:.9rem;line-height:1.7}
.footer .logo{color:#fff}
.footer .logo small{color:#7d8da3}
.social{display:flex;gap:10px}
.social a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);color:#cdd6e3;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t);
}
.social a:hover{background:var(--orange-500);border-color:var(--orange-500);color:var(--ink-900);transform:translateY(-2px)}
.social svg{width:17px;height:17px}
.footer-contact li{display:flex;gap:10px;margin-bottom:11px;align-items:flex-start}
.footer-contact svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--orange-500)}

.footer-bottom{
  text-align:center;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1);
  color:#7d8da3;font-size:.87rem;
}
.footer-credit{
  margin-top:.5rem;
  font-size:.85rem;
}
.footer-credit a{
  color:var(--orange-500);
  text-decoration:none;
  transition:color var(--t);
}
.footer-credit a:hover{
  color:var(--orange-400);
}

/* ----- Floating action buttons ---------------------------- */
.fabs{position:fixed;right:18px;bottom:18px;z-index:55;display:flex;flex-direction:column;gap:11px}
.fab{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--shadow-md);transition:transform var(--t),box-shadow var(--t);
}
.fab:hover{transform:scale(1.08) translateY(-2px);box-shadow:var(--shadow-lg)}
.fab svg{width:25px;height:25px}
.fab-wa{background:#25d366;color:#fff}
.fab-call{background:var(--orange-500);color:var(--ink-900)}
.fab-top{background:var(--white);color:var(--ink-900);border:1px solid var(--line);opacity:0;visibility:hidden}
.fab-top.show{opacity:1;visibility:visible}
.fab-top svg{width:20px;height:20px}

/* ----- Scroll reveal -------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

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

/* ----- Responsive ----------------------------------------- */
@media (max-width:1040px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-about{grid-column:1/-1}
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:38px}
  .showcase{grid-template-columns:1fr}
  .service-block-inner{grid-template-columns:1fr}
  .spec-card{position:static}
  .stats{grid-template-columns:repeat(2,1fr)}

  /* Must not filter here: a non-none backdrop-filter makes .header the
     containing block for its position:fixed descendants, which would pin the
     drawer below to the header's own 76px box instead of the viewport. */
  .header{backdrop-filter:none;background:rgba(255,255,255,.97)}

  .nav-links{
    position:fixed;z-index:65;top:0;right:0;bottom:0;width:min(84vw,330px);
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--white);padding:84px 20px 28px;
    box-shadow:-18px 0 50px -24px rgba(17,24,35,.5);
    transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .nav-links.open{transform:none}
  .nav-links a{padding:13px 16px;border-radius:12px;font-size:1rem}
  /* Above the drawer (z-index 65) so its animated X stays visible and
     tappable once the menu is open — it is the close button. */
  .nav-toggle{display:block;order:3;z-index:80}
  .nav-cta .btn{display:none}
  .topbar-list.secondary{display:none}
}

@media (max-width:680px){
  :root{--header-h:66px}

  /* A phone crops the banner hard; deepen the scrim so the headline never
     lands on a bright patch of the photo. */
  .page-hero{
    background-image:
      radial-gradient(420px 240px at 80% -20%, rgba(242,106,10,.16), transparent 62%),
      linear-gradient(170deg,
        rgba(7,21,37,.95) 0%,
        rgba(8,25,43,.90) 50%,
        rgba(10,30,51,.78) 100%),
      var(--page-hero-img, linear-gradient(165deg,var(--ink-900),var(--ink-800)));
  }

  /* The wide hero crop puts the painters off-frame on a phone; swap to the
     narrow crop, which is also a third of the bytes. */
  .hero{
    background-image:
      radial-gradient(600px 320px at 80% -10%, rgba(242,106,10,.20), transparent 62%),
      linear-gradient(170deg,
        rgba(7,21,37,.95) 0%,
        rgba(8,25,43,.88) 45%,
        rgba(10,30,51,.72) 100%),
      url("../assets/img/site/hero-lahore-narrow.webp");
    background-position:center, center, center top;
  }
  .stats{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
  .process::before{left:21px}
  .process-step{grid-template-columns:44px 1fr;gap:16px}
  .process-num{width:44px;height:44px;font-size:.9rem}
  .projects-grid{grid-template-columns:1fr}
  .ba-handle{width:40px;height:40px;margin:-20px 0 0 -20px}
  .btn{padding:12px 20px}
  .fabs{right:14px;bottom:14px}
  .fab{width:48px;height:48px}
  .project-facts div{flex-direction:column;gap:2px}
  .project-facts dd{text-align:left}
}

@media (max-width:420px){
  .btn-row .btn{width:100%}
  .topbar{font-size:.78rem}
}

/* ----- Print ---------------------------------------------- */
@media print{
  .header,.topbar,.fabs,.nav-overlay,.cta-band{display:none}
  body{color:#000}
}

/* ----- Late additions ------------------------------------- */
[data-icon]{display:inline-flex;align-items:center}
.nav-mobile-cta{display:none}

.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:20px}
.why-item{display:flex;gap:14px;align-items:flex-start}
.why-item .ico{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--orange-100);color:var(--orange-600);
}
.section-ink .why-item .ico{background:rgba(242,106,10,.18);color:var(--orange-400)}
.why-item .ico svg{width:20px;height:20px}
.why-item h3{font-size:1.02rem;line-height:1.35;margin-bottom:3px}
.why-item p{font-size:.91rem;color:var(--muted)}
.section-ink .why-item p{color:#9fadc0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.split-sticky{position:sticky;top:calc(var(--header-h) + 20px)}

.hire-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,4vw,44px);align-items:start}

@media (max-width:900px){
  .nav-mobile-cta{display:block;margin-top:12px;text-align:center}
  .nav-mobile-cta .btn{width:100%}
  .split,.hire-grid{grid-template-columns:1fr}
  .split-sticky{position:static}
}