/* ===== Mayfair Signs — Redesign ===== */
:root{
  --bg:#151512;
  --bg-soft:#1c1c18;
  --bg-soft2:#232320;
  --paper:#F6F3EA;
  --yellow:#F4ED1B;
  --orange:#ED117D;
  --blue:#25AAE1;
  --stone:#8B887C;
  --stone-dim:#84816f;
  --pink:#ED117D;
  --charcoal:#1c1c18;
  --line: rgba(246,243,234,0.12);
  --radius: 2px;
  --mono: 'JetBrains Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:'Bricolage Grotesque', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--yellow);color:var(--bg);}

.display{font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-0.01em;}
.mono{font-family:'JetBrains Mono',monospace;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--yellow); outline-offset:3px;
}

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

/* ===== NAV ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  background:linear-gradient(to bottom, rgba(21,21,18,0.96), rgba(21,21,18,0.7));
  backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;
}
header.solid{border-bottom:1px solid var(--line);}
.logo{display:flex;align-items:center;gap:10px; font-family:'Archivo Black',sans-serif; font-size:17px; letter-spacing:-0.01em; text-transform:uppercase;}
.logo .logo-mark{
  width:38px;height:38px; flex-shrink:0; object-fit:contain; display:block;
}
nav{display:flex; align-items:center; gap:36px;}
nav .links{display:flex; gap:30px; font-size:14px; font-weight:500; color:var(--stone);}
nav .links a{position:relative; padding-bottom:4px;}
nav .links a:hover{color:var(--paper);}
nav .links a.active{color:var(--yellow);}
nav .links a.active::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--yellow);}

/* ===== DESKTOP SERVICES DROPDOWN ===== */
.nav-drop{position:relative;}
.nav-drop .drop-trigger{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:var(--stone);
  display:inline-flex; align-items:center; gap:6px; position:relative; padding-bottom:4px;
}
.nav-drop .drop-trigger:hover{color:var(--paper);}
.nav-drop .drop-trigger.active{color:var(--yellow);}
.nav-drop .drop-trigger.active::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--yellow);}
.nav-drop .caret{font-size:10px; line-height:1; transition:transform 0.2s ease; display:inline-block;}
.nav-drop:hover .caret, .nav-drop.open .caret{transform:rotate(180deg);}
.dropdown-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  margin-top:16px; background:var(--bg-soft); border:1px solid var(--line);
  min-width:170px; padding:6px; border-radius:var(--radius);
  opacity:0; visibility:hidden;
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index:50;
}
.nav-drop:hover .dropdown-panel, .nav-drop.open .dropdown-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.dropdown-panel a{
  display:block; padding:11px 14px; font-size:14px; color:var(--stone);
  border-radius:2px; white-space:nowrap;
}
.dropdown-panel a:hover{background:var(--bg-soft2); color:var(--paper);}
.dropdown-panel a.active{color:var(--yellow); background:rgba(244,237,27,.06);}
.dropdown-panel a.active::before{content:""; display:inline-block; width:3px; height:14px; margin-right:7px; vertical-align:-2px; background:var(--yellow); border-radius:2px;}
.dropdown-panel.gifts-panel{width:min(480px,70vw);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;left:auto; right:0; transform:translateY(-6px);}
.dropdown-panel.gifts-panel a{white-space:normal;}
.nav-drop:hover .dropdown-panel.gifts-panel, .nav-drop.open .dropdown-panel.gifts-panel{transform:translateY(0);}
.dropdown-panel.services-panel{width:min(420px,70vw);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
.dropdown-panel.services-panel a{white-space:normal;}
@media(max-width:800px){.dropdown-panel.gifts-panel{display:block;width:220px;}.dropdown-panel.gifts-panel a{display:block;}.mobile-menu .mm-sub.gifts-sub.open{max-height:440px;}.dropdown-panel.services-panel{display:block;width:200px;}.dropdown-panel.services-panel a{display:block;}.mobile-menu .mm-sub.services-sub.open{max-height:440px;}}
.mobile-menu .mm-sub.gifts-sub.open{max-height:420px;}
.mobile-menu .mm-sub.services-sub.open{max-height:420px;}
.mm-sub a.active{color:var(--yellow);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--yellow); color:var(--bg);
  font-weight:700; font-size:13px; letter-spacing:0.02em; text-transform:uppercase;
  padding:12px 22px; border:none; cursor:pointer; border-radius:var(--radius);
  transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  font-family:'Inter',sans-serif;
}
.btn:hover{background:var(--orange); color:var(--paper); transform:translateY(-2px);}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--paper);}
.btn-ghost:hover{border-color:var(--yellow); background:transparent; color:var(--yellow); transform:translateY(-2px);}
nav a.btn, .mobile-menu a.btn{border-radius:999px;}
/* ===== ANIMATED HAMBURGER ===== */
.nav-mobile-btn{
  display:none; position:relative; z-index:101;
  width:44px; height:44px; background:none; border:none; cursor:pointer;
  padding:0;
}
.nav-mobile-btn .bar{
  position:absolute; left:11px; width:22px; height:2px; background:var(--paper);
  border-radius:2px; transition:transform 0.35s cubic-bezier(.6,.2,.2,1), opacity 0.25s ease, top 0.35s cubic-bezier(.6,.2,.2,1), background 0.25s ease;
}
.nav-mobile-btn .bar:nth-child(1){top:16px;}
.nav-mobile-btn .bar:nth-child(2){top:23px;}
.nav-mobile-btn .bar:nth-child(3){top:30px;}
.nav-mobile-btn.open .bar{background:var(--paper);}
.nav-mobile-btn.open .bar:nth-child(1){top:23px; transform:rotate(45deg);}
.nav-mobile-btn.open .bar:nth-child(2){opacity:0; transform:translateX(-8px);}
.nav-mobile-btn.open .bar:nth-child(3){top:23px; transform:rotate(-45deg);}

/* ===== MOBILE MENU OVERLAY ===== */
.mobile-menu{
  display:flex; position:fixed; inset:0; z-index:99;
  flex-direction:column; justify-content:space-between;
  padding:110px 32px 40px;
  background:
    radial-gradient(ellipse 700px 420px at 90% 0%, rgba(244,237,27,0.09), transparent 60%),
    var(--bg);
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity 0.35s ease, transform 0.4s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.4s;
  overflow-y:auto;
}
.mobile-menu.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity 0.35s ease, transform 0.4s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.mobile-menu .mm-links{display:flex; flex-direction:column; gap:2px;}
.mobile-menu .mm-links > a,
.mobile-menu .mm-links .mm-trigger{
  display:flex; align-items:baseline; gap:14px; width:100%;
  font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
  font-size:clamp(24px,7vw,34px); text-transform:none; letter-spacing:-0.01em;
  padding:14px 0; border-bottom:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-top:none; color:var(--paper);
  text-align:left; cursor:pointer;
}
.mobile-menu .mm-links > *{
  opacity:0; transform:translateY(16px);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu.open .mm-links > *{opacity:1; transform:translateY(0);}
.mobile-menu.open .mm-links > *:nth-child(1){transition-delay:0.08s;}
.mobile-menu.open .mm-links > *:nth-child(2){transition-delay:0.14s;}
.mobile-menu.open .mm-links > *:nth-child(3){transition-delay:0.20s;}
.mobile-menu.open .mm-links > *:nth-child(4){transition-delay:0.26s;}
.mobile-menu.open .mm-links > *:nth-child(5){transition-delay:0.32s;}
.mobile-menu .mm-links > a{
  transition:opacity 0.4s ease, transform 0.4s ease, color 0.2s ease, padding-left 0.25s ease;
}
.mobile-menu .mm-links a .mm-num,
.mobile-menu .mm-links .mm-trigger .mm-num{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--stone-dim); font-weight:400;
}
.mobile-menu .mm-links > a:active{padding-left:8px; color:var(--yellow);}
.mobile-menu .mm-links > a.active{color:var(--yellow); font-style:italic;}
.mobile-menu .mm-links > a.active .mm-num{color:var(--yellow); font-style:normal;}

/* Services accordion item */
.mobile-menu .mm-item{border-bottom:1px solid var(--line);}
.mobile-menu .mm-item .mm-trigger{
  border-bottom:none; padding:14px 0; justify-content:space-between;
  transition:color 0.2s ease;
}
.mobile-menu .mm-item .mm-trigger.active{color:var(--yellow);}
.mobile-menu .mm-item .mm-trigger.active .mm-num{color:var(--yellow);}
.mobile-menu .mm-item .mm-trigger .mm-chevron{
  margin-left:auto; font-size:20px; color:var(--stone-dim); transition:transform 0.3s ease;
}
.mobile-menu .mm-item .mm-trigger[aria-expanded="true"] .mm-chevron{transform:rotate(180deg); color:var(--yellow);}
.mobile-menu .mm-sub{
  max-height:0; overflow:hidden;
  transition:max-height 0.35s ease, padding 0.35s ease;
}
.mobile-menu .mm-sub.open{max-height:160px; padding-bottom:12px;}
.mobile-menu .mm-sub a{
  display:block; font-family:'Bricolage Grotesque', sans-serif; font-weight:700;
  font-size:19px; color:var(--stone); padding:10px 0 10px 14px; border-left:2px solid var(--line);
}
.mobile-menu .mm-sub a:hover{color:var(--paper);}
.mobile-menu .mm-sub a.active{color:var(--yellow); border-left-color:var(--yellow);}

.mobile-menu .mm-foot{
  opacity:0; transform:translateY(10px);
  transition:opacity 0.4s ease 0.38s, transform 0.4s ease 0.38s;
}
.mobile-menu.open .mm-foot{opacity:1; transform:translateY(0);}
.mobile-menu .mm-contact{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.mobile-menu .mm-contact a{font-size:15px; color:var(--stone); font-family:'Inter',sans-serif;}
.mobile-menu .mm-contact a:hover{color:var(--paper);}
.mobile-menu .mm-social{display:flex; gap:12px; margin-bottom:26px;}
.mobile-menu .mm-social a{
  width:40px;height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--stone);
}
.mobile-menu .mm-foot .btn{width:100%; justify-content:center; padding:16px;}

body.menu-open{overflow:hidden;}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{
  position:relative; padding:180px 0 90px; border-bottom:1px solid var(--line); overflow:hidden;
}
.page-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 88% 8%, rgba(244,237,27,0.16), transparent 32%),
    radial-gradient(circle at 8% 92%, rgba(37,169,223,0.14), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(237,17,125,0.12), transparent 30%),
    linear-gradient(180deg, rgba(21,21,18,.55), rgba(21,21,18,.93)),
    url('assets/brand/boardroom-hero.png'),
    repeating-linear-gradient(115deg, transparent, transparent 78px, rgba(246,243,234,0.03) 78px, rgba(246,243,234,0.03) 80px);
  background-size:auto,auto,auto,cover,cover,auto;
  background-position:center,center,center,center 30%,center 30%,center;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
}
.page-hero .wrap{position:relative; z-index:2;}
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:20px;
}
.eyebrow::before{content:''; width:8px;height:8px;background:var(--yellow); display:inline-block; transform:rotate(45deg);}
.page-hero h1{font-size:clamp(38px,6vw,72px); line-height:0.98; max-width:820px; margin-bottom:20px;}
.page-hero p{font-size:17px; color:var(--stone); max-width:560px; line-height:1.6;}
.breadcrumb{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--stone-dim); margin-bottom:18px; text-transform:uppercase; letter-spacing:0.05em;}
.breadcrumb a:hover{color:var(--yellow);}

/* ===== HOME HERO ===== */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:120px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 900px 500px at 80% 10%, rgba(244,237,27,0.10), transparent 60%),
    linear-gradient(180deg, rgba(21,21,18,.55), rgba(21,21,18,.93)),
    url('assets/brand/boardroom-hero.png'),
    repeating-linear-gradient(115deg, transparent, transparent 78px, rgba(246,243,234,0.03) 78px, rgba(246,243,234,0.03) 80px);
  background-size:auto,auto,cover,auto;
  background-position:center,center,center 30%,center;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
}
.hero-content{position:relative; z-index:2;}
.hero h1{font-size:clamp(48px, 8.5vw, 118px); line-height:0.92; max-width:1020px; margin-bottom:26px;}
.hero h1 .accent{color:var(--yellow);}
.hero p{font-size:19px; color:var(--stone); max-width:540px; margin-bottom:36px; line-height:1.6;}
.hero-ctas{display:flex; gap:16px; margin-bottom:70px; flex-wrap:wrap;}

.marquee{
  border-top:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
  padding:18px 0;
  position:relative; z-index:2;
  background:var(--bg-soft);
}
.marquee-track{display:inline-flex; animation:scroll-left 32s linear infinite;}
.marquee span{
  font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.05em;
  padding:0 28px; color:var(--stone); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:28px;
}
.marquee span::after{content:'✦'; color:var(--yellow);}
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== SECTIONS ===== */
section{padding:120px 0;}
section.tight{padding:90px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:64px; gap:40px; flex-wrap:wrap;
}
.section-head .tag{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:16px; display:block;
}
.section-head h2{font-size:clamp(32px,4.5vw,52px); line-height:1.02; max-width:640px;}
.section-head .sub{color:var(--stone); max-width:340px; font-size:15px; line-height:1.6;}

.alt{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ===== QUAD PROCESS GRID (Design/Print/Deliver/Install strip) ===== */
.quad-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line); margin-bottom:70px;
}
.quad-grid > *{min-width:0;}
.quad-item{
  padding:38px 40px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:16px;
  transition:background 0.25s ease;
}
.quad-item:hover{background:var(--bg-soft2);}
.quad-item:nth-child(odd){border-right:1px solid var(--line);}
.quad-item:nth-child(3), .quad-item:nth-child(4){border-bottom:none;}
.quad-num{
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
  color:var(--yellow); flex-shrink:0;
}
.quad-title{
  font-family:'Archivo Black',sans-serif; font-size:clamp(22px,2.6vw,30px);
  text-transform:uppercase; letter-spacing:-0.01em; line-height:1;
}
@media (max-width:600px){
  .quad-grid{grid-template-columns:1fr;}
  .quad-item{padding:28px 24px;}
  .quad-item:nth-child(odd){border-right:none;}
  .quad-item:nth-child(3){border-bottom:1px solid var(--line);}
}

/* ===== SERVICE / CONTENT GRID ===== */
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service-grid > *{min-width:0;}
.service-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.service-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.service-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--bg-soft);
  padding:36px 30px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid transparent;
  transition:
    opacity 0.6s ease,
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.45s ease;
}

/* Scroll reveal */
.service-card.reveal{opacity:0; transform:translateY(16px);}
.service-card.reveal.in{opacity:1; transform:translateY(0);}

/* Animated accent line */
.service-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 0.45s cubic-bezier(.2,.8,.2,1);
  z-index:3;
}

/* Direction arrow */
.service-card::after{
  content:'↗';
  position:absolute;
  top:28px;
  right:28px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--stone-dim);
  font-size:17px;
  opacity:0;
  transform:translate(-8px,8px) rotate(-20deg);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
  z-index:3;
}

.service-card:hover,
.service-card.reveal.in:hover{
  background:var(--bg-soft2);
  border-color:rgba(244,237,27,0.18);
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(0,0,0,0.20);
}

.service-card:hover::before,
.service-card.reveal.in:hover::before{
  transform:scaleX(1);
}

.service-card:hover::after,
.service-card.reveal.in:hover::after{
  opacity:1;
  transform:translate(0,0) rotate(0);
  color:var(--yellow);
  border-color:rgba(244,237,27,0.45);
  background:rgba(244,237,27,0.06);
}

.service-num{
  font-family:'JetBrains Mono',monospace;
  color:var(--stone-dim);
  font-size:13px;
  transition:color 0.3s ease, transform 0.35s ease;
}

.service-card h3{
  font-size:21px;
  margin:22px 0 10px;
  line-height:1.2;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1), color 0.3s ease;
}

.service-card p{
  font-size:14px;
  color:var(--stone);
  line-height:1.6;
  transition:color 0.3s ease;
}

.service-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.service-tags span{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--blue);
  border:1px solid rgba(37,170,225,0.35);
  padding:4px 8px;
  border-radius:20px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.service-card:hover .service-num{
  color:var(--yellow);
  transform:translateX(3px);
}

.service-card:hover h3{
  color:var(--paper);
  transform:translateX(4px);
}

.service-card:hover p{
  color:#b5b1a5;
}

.service-card:hover .service-tags{
  transform:translateY(-2px);
}

.service-card:hover .service-tags span{
  border-color:rgba(37,170,225,0.65);
  background:rgba(37,170,225,0.1);
}

.service-card:hover .service-tags span:nth-child(1){transform:translateY(-2px);}
.service-card:hover .service-tags span:nth-child(2){transform:translateY(-4px);}

.service-card .icon-tile{
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:18px;
  transition:background 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}
.service-card:hover .icon-tile{background:var(--yellow); color:var(--bg); border-color:var(--yellow); transform:scale(1.08) rotate(-6deg);}

/* Placeholder visual tile (used in gallery / signs types, no external images) */
.visual-tile{
  aspect-ratio:4/3; position:relative; overflow:hidden; border:1px solid var(--line);
  width:100%; min-width:0;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
  background:
    linear-gradient(135deg, var(--bg-soft2) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(225deg, var(--bg-soft2) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(315deg, var(--bg-soft2) 25%, transparent 25%) 0px 0/40px 40px,
    linear-gradient(45deg, var(--bg-soft2) 25%, var(--bg-soft) 25%) 0px 0/40px 40px;
  display:flex; align-items:flex-end; padding:20px;
}
.visual-tile:hover{border-color:var(--yellow); box-shadow:0 14px 30px rgba(0,0,0,0.35);}
.visual-tile::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,21,18,0.92), rgba(21,21,18,0.15) 55%);
  transition:background 0.3s ease;
}
.visual-tile:hover::before{background:linear-gradient(to top, rgba(21,21,18,0.85), rgba(21,21,18,0.05) 55%);}
.visual-tile .vt-label{position:relative; z-index:2; transition:transform 0.3s ease;}
.visual-tile:hover .vt-label{transform:translateY(-4px);}
.visual-tile .vt-cat{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--blue); text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:6px;}
.visual-tile .vt-title{font-size:19px; font-weight:700;}
.visual-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; padding:0;}
.visual-tile.has-img{background:#100f0d; padding:20px;}
.visual-tile.has-img::before{z-index:1;}

/* ===== SIGNAGE SOLUTION ROW (image + copy, alternating) — sitewide template ===== */
.signage-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.signage-jump a{display:inline-flex;align-items:center;border:1px solid var(--line);padding:11px 15px;color:var(--stone);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:.2s ease;}
.signage-jump a:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-2px);}
.signage-solution-list{display:flex;flex-direction:column;gap:24px;margin-top:38px;}
.signage-solution-row{display:grid;grid-template-columns:minmax(300px,42%) 1fr;min-height:330px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.008));overflow:hidden;transition:transform .25s ease,border-color .25s ease;scroll-margin-top:110px;}
.signage-solution-row:hover{transform:translateY(-4px);border-color:rgba(244,237,27,.48);}
.signage-solution-row.reverse{grid-template-columns:1fr minmax(300px,42%);}
.signage-solution-row.reverse .signage-solution-image{order:2;border-right:0;border-left:1px solid var(--line);}
.signage-solution-image{min-height:330px;background:#10100e;display:flex;align-items:center;justify-content:center;padding:26px;border-right:1px solid var(--line);}
.signage-solution-image img{width:100%;height:100%;max-height:285px;object-fit:contain;display:block;}
.signage-solution-copy{padding:42px 52px;display:flex;flex-direction:column;justify-content:center;}
.signage-solution-copy .signage-index{margin-bottom:12px;}
.signage-solution-copy h3{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em;margin:0 0 14px;}
.signage-solution-copy p{max-width:680px;color:var(--stone);font-size:15.5px;line-height:1.75;margin:0;}
.signage-index{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--yellow);}
.solution-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.solution-tags span{border:1px solid var(--line);padding:7px 10px;color:var(--stone-dim);font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.08em;}
.signage-process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:36px;}
.signage-process-grid.process-grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.signage-process-grid.process-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.signage-process-grid.process-grid-4{grid-template-columns:1fr;}}
.signage-process-card{border-top:2px solid var(--yellow);padding:22px 8px 8px;}
.signage-process-card span{font-family:'JetBrains Mono',monospace;color:var(--pink);font-size:11px;}
.signage-process-card h3{font-size:18px;margin:14px 0 8px;}
.signage-process-card p{color:var(--stone);font-size:13.5px;line-height:1.6;margin:0;}
.signage-crosslinks{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;}
.signage-crosslinks a{border:1px solid var(--line);padding:24px 20px;color:var(--paper);transition:.2s ease;}
.signage-crosslinks a:hover{border-color:var(--yellow);transform:translateY(-3px);}
.signage-crosslinks small{display:block;color:var(--pink);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;}
.signage-crosslinks strong{font-size:16px;}
@media(max-width:1050px){.signage-process-grid{grid-template-columns:repeat(3,1fr)}.signage-crosslinks{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.signage-solution-row,.signage-solution-row.reverse{grid-template-columns:1fr}.signage-solution-row.reverse .signage-solution-image{order:0;border-left:0;border-right:0;border-bottom:1px solid var(--line)}.signage-solution-image{border-right:0;border-bottom:1px solid var(--line);min-height:260px}.signage-crosslinks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.signage-solution-copy{padding:32px 24px}.signage-process-grid,.signage-crosslinks{grid-template-columns:1fr}.signage-solution-image{min-height:230px}}

/* ===== WORK / CAPABILITIES SHOWCASE ===== */
.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.work-grid > *{min-width:0;}
.work-item{position:relative; border:1px solid var(--line);}
.work-visual{
  aspect-ratio:4/3; position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, var(--bg-soft2) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(225deg, var(--bg-soft2) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(315deg, var(--bg-soft2) 25%, transparent 25%) 0px 0/40px 40px,
    linear-gradient(45deg, var(--bg-soft2) 25%, var(--bg-soft) 25%) 0px 0/40px 40px;
  transition:transform 0.5s ease;
}
.work-item:hover .work-visual{transform:scale(1.03);}
.work-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.work-visual.has-img{background:#100f0d;}
.work-visual::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(21,21,18,0.94), rgba(21,21,18,0.1) 55%);
}
.work-num{
  position:absolute; top:18px; right:18px; z-index:3;
  width:38px; height:38px; border:1px solid rgba(246,243,234,0.35); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--paper);
  background:rgba(21,21,18,0.5); backdrop-filter:blur(3px);
}
.work-label{position:absolute; left:24px; right:24px; bottom:22px; z-index:2;}
.work-cat{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--blue); text-transform:uppercase; letter-spacing:0.07em; display:block; margin-bottom:8px;}
.work-title{font-size:23px; font-weight:800; margin-bottom:6px; line-height:1.1;}
.work-spec{font-size:13px; color:var(--stone);}
@media (max-width:720px){ .work-grid{grid-template-columns:1fr;} }

/* ===== STATS ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.stats > *{min-width:0;}
.stat{background:var(--bg-soft); padding:38px 24px; text-align:center; transition:background 0.25s ease, transform 0.25s ease;}
.stat:hover{background:var(--bg-soft2); transform:translateY(-3px);}
.stat .num{font-family:'Archivo Black',sans-serif; font-size:46px; color:var(--yellow); line-height:1; transition:transform 0.3s ease;}
.stat:hover .num{transform:scale(1.06);}
.stat .label{color:var(--stone); font-size:12.5px; margin-top:10px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.05em;}

/* ===== PROCESS ===== */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; position:relative;}
.process-grid > *{min-width:0;}
.process-grid::before{
  content:''; position:absolute; top:13px; left:5%; right:5%; height:1px;
  background:repeating-linear-gradient(90deg, var(--stone-dim) 0 8px, transparent 8px 16px);
  z-index:0;
}
.process-step{position:relative; z-index:1;}
.process-step .dot{
  width:26px;height:26px; border-radius:50%; background:var(--bg-soft); border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--blue);
  margin-bottom:24px; transition:background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.process-step:hover .dot{background:var(--yellow); color:var(--bg); transform:scale(1.1);}
.process-step h3{font-size:21px; margin-bottom:12px;}
.process-step p{color:var(--stone); font-size:14.5px; line-height:1.6;}

/* ===== TWO-COL FEATURE ===== */
.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.feature-split .visual-tile{aspect-ratio:auto; min-height:420px;}
.feature-list{list-style:none; margin-top:26px;}
.feature-list li{
  display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--paper);
}
.feature-list li::before{content:'—'; color:var(--yellow); flex-shrink:0;}
.feature-list li:last-child{border-bottom:none;}

/* ===== TESTIMONIALS ===== */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.testi-grid > *{min-width:0;}
.testi-card{background:var(--bg-soft); padding:36px 32px; transition:opacity 0.6s ease, transform 0.4s ease, background 0.25s ease;}
.testi-card:hover{background:var(--bg-soft2); transform:translateY(-4px);}
.testi-card.reveal{opacity:0; transform:translateY(16px);}
.testi-card.reveal.in{opacity:1; transform:translateY(0);}
.testi-card.reveal.in:hover{transform:translateY(-4px);}
.testi-card .stars{color:var(--yellow); font-size:14px; margin-bottom:18px; letter-spacing:2px;}
.testi-card p.quote{font-size:15.5px; line-height:1.65; color:var(--paper); margin-bottom:24px;}
.testi-who{display:flex; align-items:center; gap:12px;}
.testi-avatar{width:38px;height:38px;border-radius:50%;background:var(--yellow); color:var(--bg); display:flex;align-items:center;justify-content:center; font-family:'Archivo Black',sans-serif; font-size:14px;}
.testi-name{font-weight:700; font-size:14px;}
.testi-role{font-size:12px; color:var(--stone-dim); font-family:'JetBrains Mono',monospace;}

/* ===== CONTACT ===== */
.contact .wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px;}
.contact-info h2{font-size:clamp(36px,5vw,54px); line-height:1.02; margin-bottom:22px;}
.contact-info p{color:var(--stone); font-size:16px; margin-bottom:32px; line-height:1.6; max-width:380px;}
.contact-detail{display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:15px;}
.contact-detail .ic{
  width:38px;height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--yellow); flex-shrink:0;
}
.social-row{display:flex; gap:12px; margin-top:32px;}
.social-row a{
  width:40px;height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.social-row a:hover{border-color:var(--yellow); color:var(--yellow);}
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
.testimonial-card{border:1px solid var(--line); background:var(--bg-soft); padding:30px 28px; display:flex; flex-direction:column; gap:16px;}
.testimonial-stars{color:var(--yellow); font-size:15px; letter-spacing:2px;}
.testimonial-quote{color:var(--stone); font-size:14.5px; line-height:1.7; flex-grow:1;}
.testimonial-quote em{color:var(--stone-dim); font-style:italic;}
.testimonial-byline{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stone-dim); text-transform:uppercase; letter-spacing:0.05em; border-top:1px solid var(--line); padding-top:14px;}
@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr;}}
form{display:flex; flex-direction:column; gap:18px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
label{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--stone); margin-bottom:8px; display:block;}
input, select, textarea{
  width:100%; background:var(--bg-soft); border:1px solid var(--line); color:var(--paper);
  padding:14px 16px; font-family:'Inter',sans-serif; font-size:15px; border-radius:var(--radius);
  transition:border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus{border-color:var(--yellow); outline:none;}
textarea{resize:vertical; min-height:110px;}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B887C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center;}
.form-foot{display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap;}
.form-foot .note{font-size:12.5px; color:var(--stone-dim); line-height:1.5;}
.map-embed{border:1px solid var(--line); margin-top:40px; aspect-ratio:16/7; overflow:hidden;}
.map-embed iframe{width:100%; height:100%; border:0; filter:grayscale(0.4) invert(0.92) contrast(0.9);}

/* ===== CLIENT LOGOS ("Worked With") ===== */
.clients-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.clients-grid > *{min-width:0;}
.client-logo{
  background:var(--bg-soft); min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:20px; transition:background 0.25s ease, transform 0.25s ease;
}
.client-logo:hover{background:var(--bg-soft2); transform:translateY(-3px);}
.client-logo-mark{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft2); border:1px solid var(--line);
  overflow:hidden;
}
.client-logo-mark img{width:100%; height:100%; object-fit:contain; padding:6px;}
.client-logo-mark span{
  font-family:'Archivo Black',sans-serif; font-size:13px; color:var(--stone-dim);
}
.client-logo-name{
  font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase;
  text-align:center; color:var(--stone-dim); letter-spacing:0.03em; line-height:1.4;
  filter:grayscale(1); opacity:0.7;
  transition:color 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}
.client-logo:hover .client-logo-name{color:var(--yellow); opacity:1; filter:grayscale(0);}
.client-logo:hover .client-logo-mark{border-color:var(--yellow);}
@media (max-width:980px){ .clients-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .clients-grid{grid-template-columns:repeat(2,1fr);} }

/* ===== INFO CARDS (picture + description) ===== */
.info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:36px;}
.info-grid > *{min-width:0;}
.info-card{border:1px solid var(--line); background:var(--bg-soft); transition:border-color 0.3s ease, transform 0.3s ease;}
.info-card:hover{border-color:rgba(244,237,27,0.35); transform:translateY(-4px);}
.info-card .visual-tile{border:none; border-bottom:1px solid var(--line); aspect-ratio:16/9;}
.info-card-body{padding:28px 30px 32px;}
.info-card-body h3{font-size:21px; margin-bottom:12px; line-height:1.2;}
.info-card-body p{color:var(--stone); font-size:14.5px; line-height:1.7;}
@media (max-width:900px){.info-grid{grid-template-columns:1fr;}}

/* ===== PRICING CARDS (product + size + price) ===== */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.pricing-grid > *{min-width:0;}
.pricing-card{background:var(--bg-soft); border:1px solid var(--line); overflow:hidden; transition:border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.pricing-card:hover{border-color:rgba(244,237,27,0.35); transform:translateY(-5px); box-shadow:0 16px 32px rgba(0,0,0,0.25);}
.pricing-card .visual-tile{border:none; border-bottom:1px solid var(--line); aspect-ratio:4/3;}
.pricing-card-body{padding:24px 26px 28px;}
.pricing-card-body h3{font-size:18px; margin-bottom:16px; line-height:1.25;}
.price-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px;}
.price-row:last-of-type{border-bottom:none;}
.price-row .size{color:var(--stone);}
.price-row .price{font-family:'JetBrains Mono',monospace; color:var(--yellow); font-weight:600; white-space:nowrap;}
.pricing-includes{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:11.5px; color:var(--stone-dim); font-family:'JetBrains Mono',monospace; line-height:1.7; text-transform:uppercase; letter-spacing:0.03em;}
@media (max-width:980px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.pricing-grid{grid-template-columns:1fr;}}

/* ===== FAQ ACCORDION ===== */
.faq-list{max-width:820px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:26px 4px; color:var(--paper);
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:19px;
  transition:color 0.2s ease;
}
.faq-q:hover{color:var(--yellow);}
.faq-q .faq-icon{
  flex-shrink:0; width:30px; height:30px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--yellow); font-size:16px;
  transition:transform 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg); background:var(--yellow); color:var(--bg); border-color:var(--yellow);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.35s ease;}
.faq-a-inner{padding:0 4px 26px; color:var(--stone); font-size:15px; line-height:1.7; max-width:680px;}

/* ===== CTA BAND ===== */
.cta-band{
  background:var(--yellow); color:var(--bg); padding:70px 0; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 90% 15%, rgba(237,17,125,.16), transparent 32%),
    radial-gradient(circle at 8% 85%, rgba(37,169,223,.14), transparent 32%);
}
.cta-band .wrap{position:relative; z-index:1;}
.cta-band h2{font-size:clamp(30px,4.5vw,48px); margin-bottom:22px; line-height:1.05;}
.cta-band .btn{background:var(--bg); color:var(--paper);}
.cta-band .btn:hover{background:var(--orange); color:var(--paper);}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line); padding:64px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:50px;}
.footer-grid > *{min-width:0;}
.footer-col .f-logo{font-family:'Archivo Black',sans-serif; font-size:16px; text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.footer-col .f-logo img{width:32px; height:32px; object-fit:contain; flex-shrink:0;}
.footer-col p{color:var(--stone); font-size:14px; line-height:1.6; max-width:280px;}
.footer-col h4{font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--blue); margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul a{font-size:14px; color:var(--stone);}
.footer-col ul a:hover{color:var(--paper);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:30px; border-top:1px solid var(--line);}
.footer-bottom .f-meta{color:var(--stone-dim); font-size:13px; font-family:'JetBrains Mono',monospace;}
.footer-bottom .social-row{margin-top:0;}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .service-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .contact .wrap{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:repeat(2,1fr); row-gap:50px;}
  .process-grid::before{display:none;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:1fr;}
  .feature-split{grid-template-columns:1fr; gap:40px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width:720px){
  nav .links{display:none;}
  .nav-mobile-btn{display:block;}
  .hero{padding-top:100px;}
  .hero-ctas .btn-ghost{display:none;}
  .service-grid{grid-template-columns:1fr;}
  .service-grid.cols-4{grid-template-columns:1fr;}
  .service-grid.cols-3{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  section{padding:80px 0;}
  section.tight{padding:60px 0;}
  .wrap{padding:0 20px;}
  header{padding:18px 20px;}
  .stats{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .page-hero{padding:150px 0 60px;}
}

/* ===== MAIN SERVICES (4-category hub cards) ===== */
.main-services-grid{grid-template-columns:repeat(2,1fr);}
.main-service-card{display:block; text-decoration:none; color:inherit;}
.main-service-card h3{margin-bottom:10px;}
.service-link{display:inline-block; margin-top:18px; font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--yellow); transition:transform 0.25s ease;}
.main-service-card:hover .service-link{transform:translateX(4px);}
@media(max-width:760px){.main-services-grid{grid-template-columns:1fr;}}

/* ===== DETAIL SERVICES (sub-service grid on category pages) ===== */
.detail-services{grid-template-columns:repeat(2,1fr);}
.detail-services .service-card{min-height:180px;}
@media(max-width:760px){.detail-services{grid-template-columns:1fr;}}

/* =========================================================
   MAYFAIR SIGNS — WEBSITE LOADING SCREEN
   ========================================================= */
:root{
  --loader-blue:#25a9df;
  --loader-pink:#ed117d;
  --loader-yellow:#f4ed1b;
  --loader-dark:#1f1d1e;
}

/* Prevent page interaction while the loader is visible. */
html.mayfair-loader-active,
html.mayfair-loader-active body{overflow:hidden;}

#mayfair-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 88%, rgba(37,169,223,.20), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(237,17,125,.18), transparent 30%),
    radial-gradient(circle at 88% 88%, rgba(244,237,27,.14), transparent 28%),
    #111010;
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .65s cubic-bezier(.22,1,.36,1), visibility .65s;
}

#mayfair-loader::before{
  content:"";
  position:absolute;
  width:min(72vw,720px);
  height:min(72vw,720px);
  border-radius:50%;
  background:rgba(255,255,255,.018);
  filter:blur(2px);
  pointer-events:none;
}

#mayfair-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-inner{
  position:relative;
  z-index:1;
  width:min(92vw,620px);
  padding:42px 24px;
  text-align:center;
}

.loader-brand{
  position:relative;
  width:clamp(190px,30vw,310px);
  aspect-ratio:1;
  margin:0 auto 30px;
  display:grid;
  place-items:center;
}

.loader-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from -40deg,
    var(--loader-blue) 0deg 118deg,
    var(--loader-pink) 118deg 238deg,
    var(--loader-yellow) 238deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation:loader-spin 3.8s linear infinite;
  filter:drop-shadow(0 0 10px rgba(37,169,223,.16));
}

.loader-ring::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
}

.loader-logo{
  position:relative;
  z-index:2;
  width:82%;
  height:82%;
  object-fit:contain;
  border-radius:50%;
  animation:loader-breathe 2.2s ease-in-out infinite;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.35));
}

.loader-brand::after{
  content:"";
  position:absolute;
  z-index:0;
  width:48%;
  height:48%;
  border-radius:50%;
  background:rgba(37,169,223,.12);
  filter:blur(35px);
}

.loader-tagline{
  margin:0 0 38px;
  color:#f7f7f7;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,1.7vw,13px);
  font-weight:600;
  letter-spacing:clamp(2px,1vw,5px);
  text-transform:uppercase;
}

.loader-tagline .blue{color:var(--loader-blue);}
.loader-tagline .pink{color:var(--loader-pink);}
.loader-tagline .yellow{color:var(--loader-yellow);}

.loader-status{
  margin-bottom:13px;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(12px,2vw,15px);
  letter-spacing:4px;
  text-transform:uppercase;
  color:#fff;
}

.loader-progress-wrap{
  width:min(100%,430px);
  height:14px;
  margin:0 auto;
  padding:2px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.28);
}

.loader-progress{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--loader-blue),var(--loader-pink) 62%,var(--loader-yellow));
  box-shadow:0 0 16px rgba(37,169,223,.35), 0 0 18px rgba(237,17,125,.22);
  transition:width .25s ease-out;
}

.loader-percent{
  margin-top:13px;
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  letter-spacing:3px;
  color:var(--loader-blue);
}

.loader-note{
  margin:108px 0 0;
  color:rgba(255,255,255,.47);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
}

@keyframes loader-spin{to{transform:rotate(360deg);}}
@keyframes loader-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}

@media(max-width:600px){
  .loader-inner{padding:25px 20px;}
  .loader-brand{width:min(64vw,270px);margin-bottom:24px;}
  .loader-tagline{line-height:2;margin-bottom:30px;}
  .loader-note{margin-top:76px;font-size:9px;letter-spacing:2px;}
}

@media(prefers-reduced-motion:reduce){
  .loader-ring,.loader-logo{animation:none;}
  #mayfair-loader{transition:none;}
  .loader-progress{transition:none;}
}

/* ===== BRANDED STATIONERY PAGE ===== */
.page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.stationery-products{display:flex;flex-direction:column;gap:22px;margin-top:36px;}
.stationery-product-row{display:grid;grid-template-columns:minmax(280px,42%) 1fr;min-height:310px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease;}
.stationery-product-row,.signage-product-row{min-height:330px;}
.stationery-product-row{grid-template-columns:minmax(300px,42%) 1fr;background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.008));}
.stationery-product-row:hover,.signage-product-row:hover{transform:translateY(-4px);border-color:rgba(244,237,27,.48);}
.stationery-product-row.reverse{grid-template-columns:1fr minmax(300px,42%);}
.stationery-product-row.reverse .stationery-product-image{order:2;border-right:0;border-left:1px solid var(--line);}
.stationery-product-image,.signage-product-image{min-height:330px;background:#10100e;display:flex;align-items:center;justify-content:center;padding:26px;border-right:1px solid var(--line);}
.stationery-product-copy,.signage-product-copy{padding:42px 52px;}
.stationery-product-copy h3,.signage-product-copy h3{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em;margin:0 0 14px;}
.stationery-product-copy p,.signage-product-copy p{max-width:680px;color:var(--stone);font-size:15.5px;line-height:1.75;margin:0;}
.stationery-product-image img{display:block;width:100%;height:100%;max-height:285px;object-fit:contain;}
.stationery-product-copy{display:flex;flex-direction:column;justify-content:center;}
.stationery-process{background:rgba(255,255,255,.015);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.process-list{border-top:1px solid var(--line);}
.process-list>div{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:21px 0;border-bottom:1px solid var(--line);color:var(--stone);line-height:1.6;}
.process-list b{font-family:'JetBrains Mono',monospace;color:var(--yellow);font-size:12px;}
.process-list strong{color:var(--paper);}
.cta-strip{padding:70px 0;background:linear-gradient(100deg,rgba(37,169,223,.08),rgba(237,17,125,.06),rgba(244,237,27,.05));border-bottom:1px solid var(--line);}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;}
.cta-inner h2{font-size:clamp(30px,4vw,48px);line-height:1;margin:8px 0 0;}
@media(max-width:900px){.stationery-product-row,.stationery-product-row.reverse{grid-template-columns:1fr}.stationery-product-row.reverse .stationery-product-image{order:0;border-left:0;border-right:0;border-bottom:1px solid var(--line)}.stationery-product-image{min-height:250px;border-right:0;border-bottom:1px solid var(--line)}.stationery-product-copy{padding:34px 30px}.split-grid{grid-template-columns:1fr;gap:40px}.cta-inner{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.stationery-product-image{min-height:210px;padding:14px}.stationery-product-copy{padding:28px 22px}.page-hero-actions .btn{width:100%;text-align:center}.cta-strip{padding:55px 0}}


/* SIGNAGE & BRANDING FLAGSHIP PAGE */
.signage-hero .page-hero-bg{background:radial-gradient(circle at 78% 22%,rgba(37,169,223,.24),transparent 30%),radial-gradient(circle at 10% 85%,rgba(244,237,27,.16),transparent 30%),linear-gradient(180deg,rgba(21,21,18,.35),rgba(21,21,18,.94)),url('assets/brand/boardroom-hero.png');background-size:cover;background-position:center;}
.signage-intro .section-head{align-items:end}.signage-intro .section-head>p{max-width:520px;color:var(--stone);line-height:1.75;margin:0}
.signage-product-list{display:flex;flex-direction:column;gap:24px;margin-top:38px}.signage-product-row{display:grid;grid-template-columns:minmax(300px,42%) 1fr;min-height:330px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.008));overflow:hidden;transition:transform .25s ease,border-color .25s ease}.signage-product-row:hover{transform:translateY(-4px);border-color:rgba(244,237,27,.48)}.signage-product-row.reverse{grid-template-columns:1fr minmax(300px,42%)}.signage-product-row.reverse .signage-product-image{order:2;border-right:0;border-left:1px solid var(--line)}.signage-product-image{min-height:330px;background:#10100e;display:flex;align-items:center;justify-content:center;padding:26px;border-right:1px solid var(--line)}.signage-product-image img{width:100%;height:100%;max-height:285px;object-fit:contain;display:block}.signage-product-copy{position:relative;padding:42px 52px;display:flex;flex-direction:column;justify-content:center}.signage-index{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--yellow);margin-bottom:12px}.signage-product-copy h3{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em;margin:0 0 14px}.signage-product-copy p{max-width:680px;color:var(--stone);font-size:15.5px;line-height:1.75;margin:0}.use-grid,.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}.use-grid.use-grid-3{grid-template-columns:repeat(3,1fr)}.use-card,.why-card{border:1px solid var(--line);padding:28px;background:rgba(255,255,255,.018)}.use-card>span{font-family:'JetBrains Mono',monospace;color:var(--pink);font-size:11px}.use-card h3,.why-card h3{font-size:19px;margin:22px 0 10px}.use-card p,.why-card p{color:var(--stone);line-height:1.65;font-size:14px;margin:0}.why-grid{grid-template-columns:repeat(3,1fr)}.why-card>span{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid rgba(244,237,27,.5);color:var(--yellow);font-weight:800}.signage-final-cta .wrap{display:flex;align-items:end;justify-content:space-between;gap:32px}.signage-final-cta h2{max-width:720px;margin:10px 0}.signage-final-cta p{color:var(--stone);max-width:620px;line-height:1.7;margin:0}
@media(max-width:900px){.signage-product-row,.signage-product-row.reverse{grid-template-columns:1fr}.signage-product-row.reverse .signage-product-image{order:0;border-left:0;border-right:0;border-bottom:1px solid var(--line)}.signage-product-image{border-right:0;border-bottom:1px solid var(--line);min-height:260px}.use-grid,.use-grid.use-grid-3{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:repeat(2,1fr)}.signage-final-cta .wrap{display:block}}
@media(max-width:600px){.signage-product-copy{padding:34px 24px}.use-grid,.use-grid.use-grid-3,.why-grid{grid-template-columns:1fr}.signage-product-image{min-height:230px}.signage-final-cta .page-hero-actions{margin-top:24px}}

/* Printing Services page */
.printing-hero .page-hero-bg{background:radial-gradient(circle at 85% 15%,rgba(237,17,125,.20),transparent 30%),radial-gradient(circle at 12% 88%,rgba(244,237,27,.14),transparent 30%),linear-gradient(180deg,rgba(21,21,18,.30),rgba(21,21,18,.94)),url('assets/brand/boardroom-hero.png');background-size:cover;background-position:center;}
.printing-intro .intro-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-top:32px;align-items:stretch}.printing-intro .intro-grid>div:first-child{color:var(--stone);font-size:17px;line-height:1.8}.printing-intro .intro-grid p{margin:0 0 18px}.print-highlight{border:1px solid var(--line);padding:34px;background:rgba(255,255,255,.018)}.print-highlight>span,.print-num{font-family:'JetBrains Mono',monospace;color:var(--yellow);font-size:12px;letter-spacing:.12em}.print-highlight h3{font-size:25px;margin:18px 0 10px}.print-highlight p{color:var(--stone);line-height:1.7}.print-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}.print-method-grid article{border:1px solid var(--line);padding:30px;background:rgba(255,255,255,.018)}.print-method-grid h3{font-size:24px;margin:16px 0 10px}.print-method-grid p{color:var(--stone);line-height:1.7;margin:0 0 20px}.printing-product-list .signage-product-image img{max-height:300px}.printing-finishing-grid{grid-template-columns:repeat(3,1fr)}.printing-process{background:var(--charcoal)}.print-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}.print-process-grid>div{border-top:2px solid var(--yellow);padding:24px 8px 8px}.print-process-grid span{font-family:'JetBrains Mono',monospace;color:var(--pink);font-size:12px}.print-process-grid h3{font-size:21px;margin:18px 0 8px}.print-process-grid p{color:var(--stone);line-height:1.65;font-size:14px;margin:0}.printing-hero .btn-ghost,.printing-intro .btn-ghost{border-color:rgba(255,255,255,.35)}
@media(max-width:900px){.printing-intro .intro-grid,.print-method-grid,.printing-finishing-grid{grid-template-columns:1fr}.print-process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.print-process-grid{grid-template-columns:1fr}.print-method-grid article{padding:24px}.print-highlight{padding:26px}}

/* Signs catalogue pages. */
.signs-panel{width:min(500px,70vw);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
.signs-panel a{white-space:normal;}
.signs-hero .page-hero-bg{background:radial-gradient(circle at 88% 12%,rgba(244,237,27,.18),transparent 30%),radial-gradient(circle at 10% 90%,rgba(37,169,223,.16),transparent 30%),linear-gradient(135deg,rgba(21,21,18,.72),rgba(21,21,18,.9)),url('assets/brand/boardroom-hero.png');background-size:cover;background-position:center;}
.signage-product-image.signs-art{background:linear-gradient(135deg,#11142e,#1a5973);position:relative;overflow:hidden;}
.signage-product-image.signs-art::before{content:'';position:absolute;width:170px;height:170px;border:2px solid var(--yellow);transform:rotate(45deg);opacity:.7;}
.signage-product-image.signs-art span{font-family:'Archivo Black',sans-serif;font-size:clamp(56px,9vw,112px);color:var(--paper);position:relative;z-index:1;}
.signs-cta{margin-bottom:0;}
.mobile-menu .mm-sub.signs-sub.open{max-height:440px;}
@media(max-width:800px){.signs-panel{display:block;width:220px;}.signs-panel a{display:block;}.mobile-menu .mm-sub.signs-sub.open{max-height:460px;}}

/* Fixed contact widget shared across every page. */
body{padding-bottom:108px;}
.get-in-touch-widget{
  position:fixed; bottom:0; left:0; width:100%; box-sizing:border-box;
  background-color:#181717; box-shadow:0 -3px 10px rgba(0,0,0,.15);
  display:flex; flex-direction:column; align-items:center; padding:10px 15px;
  z-index:99999; font-family:Arial,sans-serif;
}
.widget-title{
  font-size:14px; font-weight:700; color:#F6F3EA; margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.5px;
}
.widget-buttons{display:flex; gap:15px; width:100%; max-width:500px;}
.widget-btn{
  flex:1; display:flex; align-items:center; justify-content:center; padding:12px;
  border-radius:6px; text-decoration:none; font-weight:600; font-size:15px;
  color:#fff; transition:opacity .2s ease-in-out;
}
.widget-btn:hover,.widget-btn:focus-visible{opacity:.9; color:#fff;}
.widget-btn:focus-visible{outline:3px solid #1f1d1e; outline-offset:3px;}
.whatsapp-btn{background-color:#25d366;}
.call-btn{background-color:#007bff;}
.widget-btn .icon{margin-right:8px; font-size:18px;}
html.mayfair-loader-active .get-in-touch-widget{opacity:0; pointer-events:none;}
@media(max-width:480px){
  body{padding-bottom:101px;}
  .widget-buttons{gap:10px;}
  .widget-btn{font-size:14px; padding:10px;}
}

/* ===== Animated ink-splash background, shared across every page ===== */
.ink-splash-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.ink-blob-wrap{
  position:absolute; width:100%; height:100%; top:0; left:0;
  transition:transform .1s linear;
  will-change:transform;
}
.ink-blob{
  position:absolute; width:60vw; height:60vw; max-width:820px; max-height:820px;
  min-width:420px; min-height:420px;
  border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;
  filter:blur(70px);
  mix-blend-mode:screen;
  opacity:.4;
  will-change:transform, border-radius;
}
.ink-blob--pink{
  top:-8%; right:-10%;
  background:radial-gradient(circle at 40% 40%, rgba(237,17,125,.9), rgba(237,17,125,0) 70%);
  animation:ink-drift-1 26s ease-in-out infinite alternate;
}
.ink-blob--blue{
  bottom:-12%; left:-8%;
  background:radial-gradient(circle at 60% 40%, rgba(37,169,225,.9), rgba(37,169,225,0) 70%);
  animation:ink-drift-2 32s ease-in-out infinite alternate;
}
.ink-blob--yellow{
  top:35%; left:30%;
  width:44vw; height:44vw; max-width:600px; max-height:600px; min-width:300px; min-height:300px;
  background:radial-gradient(circle at 50% 50%, rgba(244,237,27,.75), rgba(244,237,27,0) 70%);
  animation:ink-drift-3 22s ease-in-out infinite alternate;
  opacity:.28;
}
@keyframes ink-drift-1{
  0%{transform:translate(0,0) scale(1) rotate(0deg); border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;}
  50%{transform:translate(-6%,4%) scale(1.12) rotate(18deg); border-radius:60% 40% 35% 65% / 55% 65% 35% 45%;}
  100%{transform:translate(4%,-5%) scale(0.96) rotate(-10deg); border-radius:38% 62% 55% 45% / 40% 55% 45% 60%;}
}
@keyframes ink-drift-2{
  0%{transform:translate(0,0) scale(1) rotate(0deg); border-radius:55% 45% 40% 60% / 50% 60% 40% 50%;}
  50%{transform:translate(5%,-6%) scale(1.15) rotate(-16deg); border-radius:40% 60% 55% 45% / 60% 45% 55% 40%;}
  100%{transform:translate(-4%,3%) scale(0.94) rotate(12deg); border-radius:60% 40% 45% 55% / 45% 55% 40% 60%;}
}
@keyframes ink-drift-3{
  0%{transform:translate(0,0) scale(1) rotate(0deg);}
  50%{transform:translate(8%,6%) scale(1.2) rotate(20deg);}
  100%{transform:translate(-7%,-4%) scale(0.9) rotate(-14deg);}
}
@media(prefers-reduced-motion:reduce){
  .ink-blob{animation:none;}
}
@media(max-width:700px){
  .ink-blob{filter:blur(50px); opacity:.3;}
}

/* ===== Scroll-driven reveal animations (fade-in / slide-up) ===== */
.reveal-init{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform;
}
.reveal-init.is-visible{
  opacity:1; transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
  .reveal-init{opacity:1; transform:none; transition:none;}
}

/* ===== Auto-scrolling picture strip, moves on its own, shared across pages ===== */
.motion-gallery{
  position:relative; overflow:hidden; padding:56px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-soft);
}
.motion-gallery-head{
  max-width:1200px; margin:0 auto 30px; padding:0 24px;
}
.motion-gallery-head span{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em;
  color:var(--yellow); text-transform:uppercase;
}
.motion-gallery-head h2{
  font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(26px,3vw,38px);
  letter-spacing:-.03em; margin-top:10px;
}
.motion-gallery-mask{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.motion-gallery-track{
  display:flex; gap:22px; width:max-content;
  animation:motion-gallery-scroll 42s linear infinite;
}
.motion-gallery:hover .motion-gallery-track{animation-play-state:paused;}
.motion-gallery-item{
  position:relative; flex:0 0 auto; width:260px; height:190px;
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:#10100e;
}
.motion-gallery-item img{
  width:100%; height:100%; object-fit:contain; padding:18px;
  animation:motion-gallery-breathe 9s ease-in-out infinite;
}
.motion-gallery-item:nth-child(odd) img{animation-delay:-3s;}
.motion-gallery-item:nth-child(3n) img{animation-delay:-6s;}
.motion-gallery-item span{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 14px; font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--stone);
  background:linear-gradient(to top, rgba(16,16,14,.92), transparent);
}
@keyframes motion-gallery-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes motion-gallery-breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}
@media(prefers-reduced-motion:reduce){
  .motion-gallery-track{animation:none;}
  .motion-gallery-item img{animation:none;}
}
@media(max-width:600px){
  .motion-gallery{padding:40px 0;}
  .motion-gallery-item{width:200px; height:150px;}
}