/* ============================================================================
   GREYSAND BUILDERS — editorial layer
   ----------------------------------------------------------------------------
   One design language across the whole site and the account areas.

   Ink and warm stone, a single aqua accent, a high-contrast serif for
   headlines over a quiet sans for everything else, hairline rules instead of
   drop shadows, and corners that are square by design rather than rounded by
   habit.

   Loaded last, after the page bundle and theme glue, so it speaks for the
   whole site. The legacy colour tokens (--aqua-*, --deep, --sand, --lime,
   --amber …) are re-pointed at the new palette rather than hunted down in
   twenty page bundles: anything still speaking the old vocabulary now speaks
   this one.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  /* ground */
  --ink:#08222B;
  --ink-2:#0B2C36;
  --ink-3:#123D49;
  --stone:#F6F3ED;
  --stone-2:#EFEAE0;
  --paper:#FFFFFF;

  /* the one accent — aqua blue */
  --accent:#0C7489;
  --accent-dark:#075E70;
  --accent-soft:#CFE4E9;
  --accent-wash:#EEF6F8;
  /* the same accent, tuned for ink surfaces */
  --accent-glow:#7FD3E0;
  --accent-glow-soft:rgba(127,211,224,.22);

  /* text */
  --muted:#6B7672;
  --muted-dark:#8CA39B;

  /* lines and surfaces */
  --line:rgba(8,34,43,.14);
  --line-strong:rgba(8,34,43,.28);
  --line-light:rgba(255,255,255,.16);

  /* the page measure — the theme customizer moves this one number */
  --wrap:1240px;

  /* geometry — square, quietly */
  --radius:2px;
  --radius-lg:3px;
  --shadow:none;
  --shadow-sm:none;
  --shadow-float:0 18px 44px -24px rgba(8,34,43,.45);

  /* type */
  --font:'IBM Plex Sans','Inter',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;

  /* legacy vocabulary, re-pointed */
  --deep:var(--ink);
  --aqua:var(--accent);
  --aqua-bright:#2FA7BC;
  --aqua-700:#0A3340;
  --aqua-600:#12414E;
  --aqua-500:var(--accent);
  --aqua-400:#2FA7BC;
  --aqua-300:#9FD2DC;
  --aqua-200:#C6E2E8;
  --aqua-100:#E4F1F4;
  --aqua-50:#F1F8F9;
  --sand:var(--accent);
  --sand-dark:var(--accent-dark);
  --sand-light:#E4EFF1;
  --sand-bg:#F6F3ED;
  --lime:var(--accent);
  --lime-dark:var(--accent-dark);
  --amber:var(--accent);
  --amber-dark:var(--accent-dark);
  --amber-light:#E7F2F4;
  --slate-900:var(--ink);
  --slate-800:var(--ink-2);
  --slate-700:var(--ink-3);
  --slate-600:#46605F;
  --slate-500:#6B7672;
  --slate-300:#C9C4B9;
  --slate-200:#E2DDD3;
  --slate-100:#F1EDE6;
  --white:#FFFFFF;
}

/* ------------------------------------------------------------------ 2. base */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-soft);color:var(--ink)}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-.012em;
  line-height:1.04;
  text-wrap:balance;
}
h1{font-size:clamp(2.9rem,5.6vw,4.6rem)}
h2{font-size:clamp(2.1rem,3.6vw,3.15rem);margin:14px 0 18px}
h3{font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.15}
h4{font-size:1.18rem;line-height:1.25}
p{margin:0}
p + p{margin-top:1em}
a{color:var(--ink);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.container{width:min(var(--wrap,1240px),90%);margin-inline:auto}
.container-narrow{width:min(820px,90%);margin-inline:auto}

/* The one measure for running text. */
.lead{
  font-size:1.14rem;
  line-height:1.66;
  color:var(--muted);
  max-width:66ch;
  font-weight:400;
  letter-spacing:0;
}
.section{padding:clamp(60px,6.4vw,92px) 0}
.section + .section{padding-top:0}
.section.alt + .section, .section.grey + .section{padding-top:clamp(60px,6.4vw,92px)}
.section.alt,.section.grey{background:var(--stone)}
.section.dark{background:var(--ink);color:rgba(255,255,255,.78)}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{color:#fff}
.section.dark .lead{color:rgba(255,255,255,.66)}
.section-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.center.section-head,.center{text-align:center}
.center .lead{margin-inline:auto}

/* --------------------------------------------------------------- 3. eyebrow */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--accent);
  flex:0 0 auto;
}
.center .eyebrow::after{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}
.hero .eyebrow,.page-hero .eyebrow,.section.dark .eyebrow{color:var(--accent-soft)}
.hero .eyebrow::before,.page-hero .eyebrow::before,.section.dark .eyebrow::before,
.center .hero .eyebrow::after{background:var(--accent-soft)}

/* --------------------------------------------------------------- 4. buttons */
.btn,.btn-dark,.btn-outline,.btn-outline-w,.btn-white,.btn-amber,.btn-sm,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1;
  padding:0 26px;
  min-height:50px;
  border-radius:var(--radius);
  border:1px solid transparent;
  background:var(--ink);
  color:#fff;
  box-shadow:none;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover,.btn-dark:hover{background:var(--accent);color:#fff}
.btn-sm{min-height:42px;padding:0 20px;font-size:.72rem}
.btn-outline,.btn-outline-w{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-outline-w{color:#fff;border-color:rgba(255,255,255,.42)}
.btn-outline-w:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-amber{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-amber:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn svg,.btn-dark svg,.btn-outline svg,.btn-white svg{width:16px;height:16px;flex:0 0 auto}
.btn:disabled{opacity:.4;cursor:not-allowed}
.link-quiet{font-size:.86rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}
.link-quiet:hover{color:var(--accent);border-color:var(--accent)}

/* ----------------------------------------------------------- 5. site chrome */
.brand-strip{height:3px;background:var(--accent)}
.topbar{
  background:var(--ink);
  color:rgba(255,255,255,.6);
  font-size:.72rem;
  letter-spacing:.05em;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.topbar a{color:rgba(255,255,255,.62)}
.topbar a:hover{color:#fff}
.topbar svg{opacity:.75}

header.site.universal-header{
  position:sticky;
  top:0;
  z-index:300;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
header.site.universal-header .universal-nav{
  width:min(1400px,94%);
  min-height:78px;
  margin-inline:auto;
  padding:12px 0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
}
header.site .logo{line-height:0}
header.site .logo-full{
  height:48px;
  width:auto;
  display:block;
  mix-blend-mode:multiply;
}
header.site.universal-header .universal-links{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:30px;
  margin:0;
  padding:0;
  list-style:none;
  min-width:0;
}
header.site.universal-header .universal-links a{
  position:relative;
  display:inline-block;
  padding:8px 0;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
header.site.universal-header .universal-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
header.site.universal-header .universal-links a:hover::after,
header.site.universal-header .universal-links a.active::after{transform:scaleX(1)}
header.site.universal-header .universal-links a:hover,
header.site.universal-header .universal-links a.active{color:var(--accent)}
header.site .universal-actions{display:flex;align-items:center;gap:4px;justify-self:end}
header.site .universal-action{
  background:none;
  border:0;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 10px;
  font:inherit;
  font-size:.78rem;
  letter-spacing:.06em;
  cursor:pointer;
  border-radius:var(--radius);
  transition:color .18s ease,background .18s ease;
}
header.site .universal-action:hover{color:var(--accent);background:var(--accent-wash)}
header.site .universal-action svg{width:18px;height:18px}
header.site .action-label{display:inline-block}
header.site .universal-count{
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:inline-grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  border-radius:99px;
  transform:translateY(-1px);
}
header.site .universal-quote{
  margin-left:14px;
  min-height:44px;
  padding:0 22px;
  background:var(--ink);
  color:#fff;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  display:inline-flex;
  align-items:center;
}
header.site .universal-quote:hover{background:var(--accent);border-color:var(--accent);color:#fff}
header.site .universal-profile{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius)}
header.site .universal-profile:hover{background:var(--accent-wash)}
header.site .universal-avatar{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:.78rem;
  font-weight:600;
}
header.site .universal-user b{display:block;font-size:.78rem;line-height:1.2;color:var(--ink);font-weight:600}
header.site .universal-user small{display:block;font-size:.66rem;color:var(--muted);letter-spacing:.04em}
header.site .chev{color:var(--muted);font-size:.7rem}
header.site .burger{
  background:none;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);width:44px;height:44px;display:none;place-items:center;cursor:pointer;justify-self:end;
}

/* Mobile drawer */
@media(max-width:1120px){
  header.site.universal-header .universal-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:8px 5%;
  }
  header.site.universal-header .universal-links.open{display:flex}
  header.site.universal-header .universal-links a{
    padding:15px 0;
    font-size:.86rem;
    letter-spacing:.08em;
    border-bottom:1px solid var(--line);
  }
  header.site.universal-header .universal-links li:last-child a{border-bottom:0}
  header.site.universal-header .universal-links a::after{display:none}
  header.site .burger{display:grid}
  header.site .universal-nav{grid-template-columns:auto 1fr auto;gap:14px}
  header.site .universal-actions .action-label{display:none}
  header.site .universal-quote{padding:0 16px;min-height:42px}
  header.site .universal-profile .universal-user,
  header.site .universal-profile .chev{display:none}
}

/* ------------------------------------------------------------ 6. hero bands */
.hero{
  position:relative;
  background:
    linear-gradient(102deg,rgba(5,24,31,.94) 8%,rgba(5,24,31,.78) 46%,rgba(5,24,31,.46) 100%),
    url('../images/real/hero-roof-waterproofing.jpg') center/cover no-repeat;
  background-color:var(--ink);
  color:#fff;
  padding:clamp(84px,10vw,132px) 0 clamp(64px,8vw,96px);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:rgba(255,255,255,.14);
}
.hero h1{
  color:#fff;
  font-size:clamp(2.7rem,4.9vw,4.15rem);
  line-height:1.05;
  max-width:24ch;
  margin:26px 0 26px;
  font-weight:400;
}
.hero h1 span{color:var(--accent-soft);font-style:italic}
.hero .lead{color:rgba(255,255,255,.72);font-size:1.1rem;max-width:56ch}
.hero .lead b{color:#fff;font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:clamp(48px,6vw,76px);
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-stats > div{padding:0 26px;border-left:1px solid rgba(255,255,255,.13)}
.hero-stats > div:first-child{padding-left:0;border-left:0}
.hero-stats b{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:400;
  color:#fff;
  line-height:1;
  margin-bottom:10px;
}
.hero-stats span{font-size:.8rem;letter-spacing:.04em;color:rgba(255,255,255,.58);line-height:1.45;display:block}

.page-hero,.shop-hero,.proj-hero{
  position:relative;
  background:
    linear-gradient(102deg,rgba(5,24,31,.95) 10%,rgba(5,24,31,.8) 52%,rgba(5,24,31,.55) 100%),
    url('../images/real/foundation-works.jpg') center/cover no-repeat;
  background-color:var(--ink);
  color:#fff;
  padding:clamp(52px,7vw,84px) 0 clamp(44px,6vw,68px);
}
.shop-hero{
  background:
    linear-gradient(102deg,rgba(5,24,31,.95) 10%,rgba(5,24,31,.82) 52%,rgba(5,24,31,.6) 100%),
    url('../images/real/plumbing-pipes.jpg') center/cover no-repeat;
  background-color:var(--ink);
  padding:clamp(44px,6vw,64px) 0 clamp(38px,5vw,54px)!important;
}
.page-hero h1,.shop-hero h1,.proj-hero h1{
  color:#fff;
  font-size:clamp(2.6rem,4.6vw,3.9rem);
  letter-spacing:-.015em;
  margin:18px 0 16px;
  max-width:22ch;
}
.page-hero .lead,.shop-hero .lead,.proj-hero .lead{color:rgba(255,255,255,.7)}
.page-hero .lead b{color:#fff}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.breadcrumb a{color:rgba(255,255,255,.5)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,.34)}

/* ------------------------------------------------------------------ 7. cards */
.card,.panel,.form-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  transition:border-color .22s ease,transform .22s ease,background .22s ease;
}
.card:hover{border-color:var(--line-strong);box-shadow:none}
.card .card-body{padding:30px}

.svc-card,.proj-card,.article-card,.p-card,.step{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:none;
  transition:border-color .22s ease,transform .22s ease;
}
.svc-card:hover,.proj-card:hover,.article-card:hover,.p-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.svc-card::before,.proj-card::before{display:none}
.svc-card{padding:34px 30px}
.svc-icon{
  width:56px;height:56px;
  display:grid;place-items:center;
  background:var(--accent-wash);
  border:1px solid var(--accent-soft);
  border-radius:50%;
  color:var(--accent);
  margin-bottom:24px;
}
.svc-icon svg{width:24px;height:24px}
.svc-card h3{margin-bottom:12px}
.svc-card p{color:var(--muted);font-size:.97rem}
.tag,.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
  background:var(--accent-wash);
  border:1px solid var(--accent-soft);
  border-radius:2px;
  padding:6px 11px;
}
.article-card .article-media,.p-card .p-media,.proj-card .proj-media{position:relative;overflow:hidden}
.article-card img,.p-card img,.proj-card img{
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
  filter:saturate(.92);
}
.article-card:hover img,.p-card:hover img,.proj-card:hover img{transform:scale(1.03)}
.article-card .article-tag,.p-badge,.p-status{
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  border:0;
  border-radius:2px;
  padding:7px 12px;
}
.article-date{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card h3 a,.article-card h3 a,.p-card h3 a{color:var(--ink)}
.card h3 a:hover,.article-card h3 a:hover,.p-card h3 a:hover{color:var(--accent)}

/* Steps / numbered process */
.step{padding:30px 28px}
.step::before{
  background:var(--accent);
  color:#fff;
  font-family:var(--font);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  box-shadow:0 0 0 6px var(--accent-wash);
}

/* Checks, lists, quotes */
.check-list{margin-top:8px}
.check-list li{color:var(--muted);font-size:.98rem;padding-left:32px;position:relative;margin-bottom:12px}
.check-list li::before{
  background:var(--accent-wash);
  color:var(--accent);
  border:1px solid var(--accent-soft);
}
.director-quote{
  border-left:2px solid var(--accent);
  font-family:var(--font-display);
  font-size:1.55rem;
  line-height:1.4;
  color:var(--ink);
  padding-left:32px;
}
.faq details,.faq-item{
  border-top:1px solid var(--line);
  padding:22px 0;
}
.faq details:last-child,.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--font);font-weight:600;font-size:1rem;color:var(--ink)}

/* CTA band */
.cta-band{
  background:var(--ink);
  color:rgba(255,255,255,.72);
  border-radius:var(--radius);
  box-shadow:none;
  padding:clamp(34px,4.4vw,54px);
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--accent);
}
.cta-band h2,.cta-band h3{color:#fff}
.cta-band .btn-white{background:#fff;color:var(--ink);border-color:#fff}
.cta-band .btn-white:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* Stats strips */
.trust-strip,.proj-hero-stats,.stats-row{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-strip > *,.proj-hero-stats > *,.stats-row > *{border-color:var(--line)}

/* ----------------------------------------------------------------- 8. forms */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],
input[type=password],input[type=date],select,textarea{
  font-family:var(--font);
  font-size:.98rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:14px 16px;
  width:100%;
  transition:border-color .18s ease,box-shadow .18s ease;
}
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(12,116,137,.2);
}
label,.field-label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
::placeholder{color:#9AA6A1}

/* ---------------------------------------------------------------- 9. tables */
table{border-collapse:collapse;width:100%}
th{
  text-align:left;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--line-strong);
  background:none;
}
td{
  padding:18px 16px 18px 0;
  border-bottom:1px solid var(--line);
  font-size:.94rem;
  color:var(--ink);
  vertical-align:middle;
}
tbody tr:hover td{background:var(--accent-wash)}

/* ---------------------------------------------------------------- 10. footer */
.p-footer{
  position:relative;
  background:var(--ink);
  color:rgba(255,255,255,.62);
  margin-top:0;
  overflow:hidden;
  padding:0;
}
.p-footer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent);display:block}
.p-footer::after{display:none}
.p-foot-top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.5fr .8fr .9fr 1.15fr 1.25fr;
  gap:44px;
  padding:clamp(52px,6vw,76px) 0 clamp(38px,4vw,54px);
}
.p-footer h4{
  color:#fff;
  font-family:var(--font);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.p-footer h4::after{content:"";display:block;width:22px;height:1px;background:var(--accent);margin-top:12px}
.p-footer a{color:rgba(255,255,255,.62);font-size:.94rem}
.p-footer a:hover{color:#fff;padding-left:0;text-decoration:none;border-color:var(--accent)}
.p-foot-links p{margin-bottom:12px;line-height:1.4}
.p-foot-brand .logo-full{
  background:transparent;
  padding:0;
  height:56px;
  border-radius:0;
  box-shadow:none;
  filter:brightness(0) saturate(100%) invert(100%);
  opacity:.94;
}
.p-foot-brand p{color:rgba(255,255,255,.5);font-size:.9rem;margin-top:18px;max-width:30ch}
.p-social{display:flex;gap:10px;margin-top:24px}
.p-social a{
  width:38px;height:38px;
  border-radius:50%;
  display:grid;place-items:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.72);
  font-size:.9rem;
}
.p-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:none;padding:0}
.p-social a svg{width:16px;height:16px}
.p-foot-contact p{color:rgba(255,255,255,.62);font-size:.94rem;line-height:1.7}
.p-foot-contact b{color:rgba(255,255,255,.92);font-weight:500}
.p-news p{color:rgba(255,255,255,.5);font-size:.9rem;max-width:34ch}
.p-news form{
  display:flex;
  background:transparent;
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius);
  padding:4px;
  margin-top:18px;
  box-shadow:none;
  gap:4px;
}
.p-news input{
  background:transparent!important;
  border:0!important;
  color:#fff!important;
  font-size:.9rem;
  padding:12px 12px!important;
  box-shadow:none!important;
}
.p-news input::placeholder{color:rgba(255,255,255,.4)}
.p-news button{
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:1px;
  font-family:var(--font);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:0 18px;
  cursor:pointer;
}
.p-news button:hover{background:var(--accent-dark)}
.p-foot-bottom{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:24px 0 30px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem;
  letter-spacing:.06em;
  color:rgba(255,255,255,.42);
}
.p-pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.p-pay b{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.34);font-weight:600}
.p-pay span{
  border:1px solid rgba(255,255,255,.18);
  padding:5px 10px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.p-topbtn{
  background:none;
  border:0;
  color:rgba(255,255,255,.62);
  font:inherit;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  padding:0;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.p-topbtn:hover{color:#fff;border-color:var(--accent)}

/* Floating helper */
.whatsapp-float{
  width:52px;height:52px;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.8);
}
.whatsapp-float:hover{background:var(--accent)}


/* The logo is the logo, not a sticker on a white tile. */
header.site .logo-full{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  mix-blend-mode:multiply;
}
.p-foot-brand .logo-full{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* The eyebrow is a rule and a word, never a pill. */
.hero .eyebrow,
.page-hero .eyebrow,
.proj-hero .eyebrow,
.shop-hero .eyebrow,
.section.dark .eyebrow{
  background:none!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}
.eyebrow{
  background:none!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}


/* ------------------------------------------------- 10b. card anatomy (v2) */
/* Images run to the edge of the card; the copy is what gets padding. */
.svc-card,
.proj-card,
.p-card,
.article-card{border-radius:var(--radius)!important;overflow:hidden;background:var(--paper)!important;padding:0}
.svc-card > img,
.proj-card > img,
.p-card > img,
.article-card > img,
.p-card .p-media img,
.article-card .article-media img,
.proj-card .proj-media img{
  border-radius:0!important;
  width:100%;
  display:block;
}
.svc-card > img{height:210px;object-fit:cover;object-position:50% 45%}
.svc-card > .body{padding:30px 28px 32px;position:relative;display:flex;flex-direction:column;gap:12px}
.svc-card > .body .svc-icon{
  margin:-56px 0 12px;
  width:52px;height:52px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 0 0 6px var(--paper);
  display:grid;place-items:center;
  color:var(--accent);
}
.svc-card > .body h3{margin:0;font-size:1.5rem}
.svc-card > .body p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
.svc-card > .body p[style]{margin-top:18px!important;gap:10px!important;align-items:center}
/* One solid action per card, the second reads as a quiet link. */
.svc-card .btn,
.svc-card .btn-dark{
  min-height:40px!important;
  padding:0 16px!important;
  font-size:.68rem!important;
  letter-spacing:.1em!important;
}
.svc-card .btn:not(.btn-dark){
  background:transparent!important;
  border:0!important;
  color:var(--muted)!important;
  padding:0 4px!important;
  border-bottom:1px solid var(--line)!important;
  min-height:0!important;
  height:auto!important;
}
.svc-card .btn:not(.btn-dark):hover{color:var(--accent)!important;border-color:var(--accent)!important}

.p-card .p-body,
.article-card .article-body{padding:24px 24px 26px}
.article-card h3,.p-card h3{font-size:1.4rem;line-height:1.18;margin:12px 0 10px}
.article-card p,.p-card p{color:var(--muted);font-size:.94rem;line-height:1.6}
.article-card .btn,.p-card .btn,.article-card a.btn{
  margin-top:18px;
  min-height:42px!important;
  padding:0 18px!important;
  font-size:.68rem!important;
}
.p-card .p-body .p-foot{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.p-tag,.p-loc{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.p-card .p-badge,.article-card .article-tag{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,.94)!important;
  color:var(--ink)!important;
  border:0!important;
  border-radius:1px!important;
  letter-spacing:.14em;
}

/* Step cards */
.step{padding:32px 28px!important;border-radius:var(--radius)!important}
.step::before{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  font-family:var(--font);
  font-size:.72rem;
  font-weight:600;
  box-shadow:none!important;
  border:1px solid var(--accent-soft);
  background:var(--accent-wash)!important;
  color:var(--accent-dark)!important;
  margin-bottom:18px;
}
.step h3{font-size:1.35rem;margin-bottom:8px}

/* Value cards (icon + serif title, centred) */
.value-card,.core-value{border-radius:var(--radius)!important}

/* Footer icon alignment */
.p-ico{width:15px;height:15px;vertical-align:-2px;margin-right:8px;opacity:.5;flex:0 0 auto}
.p-social .p-ico{margin:0;width:17px;height:17px;opacity:.8}
.p-foot-contact .p-sub{color:rgba(255,255,255,.34)}



/* ----------------------------------------------------------------- 10e. shop */
.mz-card{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:none!important;
  overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
.mz-card:hover{transform:translateY(-3px);border-color:var(--line-strong)!important;box-shadow:none!important}
.mz-media{
  position:relative;
  border-radius:0!important;
  background:var(--stone)!important;
  overflow:hidden;
}
.mz-media img{border-radius:0!important;width:100%;display:block;transition:transform .5s ease}
.mz-card:hover .mz-media img{transform:scale(1.02)}
.mz-badge{
  background:var(--ink)!important;
  color:#fff!important;
  border:0!important;
  border-radius:1px!important;
  font-size:.6rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  font-weight:600!important;
  padding:6px 10px!important;
}
.wish-btn{
  background:rgba(255,255,255,.92)!important;
  border:1px solid var(--line)!important;
  color:var(--ink)!important;
  border-radius:50%!important;
  width:36px!important;height:36px!important;
  display:grid!important;place-items:center;
  box-shadow:none!important;
}
.wish-btn:hover,.wish-btn.active{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.mz-body{padding:20px 20px 22px!important}
.mz-cat-tag,.mz-kicker span{
  font-size:.62rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  color:var(--accent)!important;
  background:none!important;
  border:0!important;
  padding:0!important;
  font-weight:600!important;
}
.mz-title{
  -webkit-line-clamp:3!important;
  line-clamp:3!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--font-display)!important;
  font-weight:400!important;
  font-size:1.34rem!important;
  line-height:1.15!important;
  letter-spacing:-.01em!important;
  color:var(--ink)!important;
  margin:10px 0 8px!important;
}
.mz-title a{color:inherit!important}
.mz-desc{color:var(--muted)!important;font-size:.88rem!important;line-height:1.55!important}
.mz-price,.price-on-request{
  font-family:var(--font)!important;
  font-size:.68rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  color:var(--muted)!important;
  font-weight:600!important;
}
.stock,.in-stock,.out-stock{
  font-size:.64rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  color:#5C7A5F!important;
  background:none!important;
  border:0!important;
  padding:0!important;
  font-weight:600!important;
}
.out-stock{color:#9A5A4C!important}
.mz-actions{gap:8px!important;border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.mz-actions .btn,.mz-actions .btn-sm,.btn-buy,.btn-details,.btn-estimate{
  border-radius:var(--radius)!important;
  font-size:.64rem!important;
  letter-spacing:.12em!important;
  min-height:38px!important;
  padding:0 14px!important;
}
.btn-buy,.btn-estimate{background:var(--ink)!important;color:#fff!important;border:1px solid var(--ink)!important}
.btn-buy:hover,.btn-estimate:hover{background:var(--accent)!important;border-color:var(--accent)!important}
.btn-details,.btn-details.btn-outline{
  background:transparent!important;color:var(--ink)!important;border:1px solid var(--line-strong)!important;
}
.btn-details:hover{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.mz-trust,.badge-genuine,.badge-service,.badge-featured,.badge-new,.badge-best,.badge-popular{
  background:var(--accent-wash)!important;
  color:var(--accent-dark)!important;
  border:1px solid var(--accent-soft)!important;
  border-radius:1px!important;
  font-size:.6rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  font-weight:600!important;
}
/* Filters rail */
.mz-side,.mz-filters,.filter-card{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:none!important;
}
.mz-side h3,.mz-side h4,.filter-card h3{
  font-family:var(--font)!important;
  font-size:.68rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  color:var(--muted)!important;
  font-weight:600!important;
}
.mz-cat,.mz-side a,.mz-side button{
  border-radius:0!important;
  font-size:.88rem!important;
  color:var(--ink)!important;
  background:none!important;
  border-left:2px solid transparent!important;
}
.mz-cat:hover,.mz-side a:hover{color:var(--accent)!important;background:var(--accent-wash)!important}
.mz-cat.active,.mz-side a.active{
  background:var(--accent-wash)!important;
  color:var(--accent-dark)!important;
  border-left:2px solid var(--accent)!important;
  font-weight:600!important;
}
.mz-count,.filter-count{
  background:var(--stone)!important;
  border:1px solid var(--line)!important;
  color:var(--muted)!important;
  border-radius:99px!important;
  font-size:.68rem!important;
}
/* Floating enquiry list */
.enquiry-float,.cart-fab,.mz-float{
  background:var(--ink)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-float)!important;
  font-size:.7rem!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
}

/* --------------------------------------------------- 10f. hero stat ribbons */
.proj-hero-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0!important;
  margin-top:44px!important;
  padding-top:26px!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
  border-bottom:0!important;
}
.proj-hero-stats > *,
.proj-hero-stats .chip,
.proj-hero-stats div{
  background:none!important;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.13)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0 22px!important;
  margin:0!important;
}
.proj-hero-stats > *:first-child{padding-left:0!important;border-left:0!important}
.proj-hero-stats b,.proj-hero-stats strong{
  display:block;
  font-family:var(--font-display)!important;
  font-weight:400!important;
  font-size:1.85rem!important;
  color:#fff!important;
  line-height:1.1;
}
.proj-hero-stats span,.proj-hero-stats small{color:rgba(255,255,255,.55)!important;font-size:.78rem!important;letter-spacing:.04em}

.trust-strip{
  background:var(--stone)!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  padding:0!important;
}
.trust-strip > *,
.trust-strip .chip{
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:var(--ink)!important;
  font-size:.78rem!important;
  letter-spacing:.06em!important;
  font-weight:500!important;
  padding:18px 22px!important;
  border-left:1px solid var(--line)!important;
}
.trust-strip > *:first-child{border-left:0!important}
.trust-strip svg{color:var(--accent)!important}

@media(max-width:960px){
  .proj-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .proj-hero-stats > *:nth-child(3){padding-left:0!important;border-left:0!important}
}

/* ------------------------------------------------- 10d. late-layer overrides
   The page bundles end with a "final" block that pins a few things with
   !important — the teal wash over the page heroes, 20px corner radii, the
   cyan rule under the masthead. These are the handful that have to be
   answered in kind, or the two languages argue on the same screen. */
.page-hero{
  background:
    linear-gradient(102deg,rgba(5,24,31,.95) 10%,rgba(5,24,31,.8) 52%,rgba(5,24,31,.55) 100%),
    url('../images/real/foundation-works.jpg') center/cover no-repeat !important;
  background-color:var(--ink)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:clamp(52px,7vw,84px) 0 clamp(44px,6vw,68px)!important;
}
.shop-hero{
  background:
    linear-gradient(102deg,rgba(5,24,31,.95) 10%,rgba(5,24,31,.82) 52%,rgba(5,24,31,.6) 100%),
    url('../images/real/plumbing-pipes.jpg') center/cover no-repeat !important;
  background-color:var(--ink)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:clamp(44px,6vw,64px) 0 clamp(38px,5vw,54px)!important;
}
.proj-hero{
  background:
    linear-gradient(102deg,rgba(5,24,31,.95) 10%,rgba(5,24,31,.8) 52%,rgba(5,24,31,.55) 100%),
    url('../images/real/foundation-works.jpg') center/cover no-repeat !important;
  background-color:var(--ink)!important;
}
.page-hero h1,.shop-hero h1,.proj-hero h1{
  color:#fff!important;
  font-family:var(--font-display)!important;
  font-size:clamp(2.5rem,4.4vw,3.7rem)!important;
  font-weight:400!important;
  letter-spacing:-.015em!important;
  line-height:1.06!important;
}
.exec-svc-banner,.exec-banner,.exec-proj-banner{
  background:var(--ink)!important;
  border-radius:var(--radius)!important;
  box-shadow:none!important;
  padding:clamp(28px,3.4vw,44px)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  align-items:flex-start!important;
}
.exec-svc-banner h2,.exec-banner h2,.exec-proj-banner h2{
  font-family:var(--font-display)!important;
  font-weight:400!important;
  font-size:clamp(1.7rem,2.6vw,2.4rem)!important;
  line-height:1.1!important;
  letter-spacing:-.01em!important;
  margin:0 0 10px!important;
  color:#fff!important;
}
.exec-svc-banner p,.exec-banner p,.exec-proj-banner p{color:rgba(255,255,255,.66)!important;font-size:.96rem!important}
.card,.svc-card,.proj-card,.p-card,.article-card,.exec-card,.material-panel,.form-card{
  border-radius:var(--radius)!important;
}
.cta-band{border-radius:var(--radius)!important}
.tag,.chip,.p-badge,.article-tag{border-radius:1px!important}

/* ------------------------------------------------- 10c. reveal without JS */
.reveal{opacity:1;transform:none}
html.gsb-js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
html.gsb-js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.gsb-js .reveal{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------- 11. account */
body.erp-admin{background:var(--stone);color:var(--ink)}

/* Workspace frame */
body.erp-admin .dash{
  display:grid!important;
  grid-template-columns:264px minmax(0,1fr)!important;
  align-items:start;
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  padding:0;
  background:var(--stone);
  gap:0;
}

/* Sidebar — ink panel, aqua marker, quiet type */
body.erp-admin .sidebar{
  position:sticky!important;
  top:var(--gsb-chrome-h,84px);
  left:auto!important;
  bottom:auto!important;
  height:auto;
  max-height:calc(100vh - var(--gsb-chrome-h,84px));
  width:264px;
  z-index:250;
  padding:30px 22px 26px;
  border-radius:0;
  background:var(--ink)!important;
  box-shadow:none!important;
  border-right:1px solid rgba(255,255,255,.06);
  overflow-y:auto;
  overflow-x:hidden;
}
body.erp-admin .sidebar::-webkit-scrollbar{width:4px}
body.erp-admin .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}

body.erp-admin .side-portal,
body.erp-admin .sidebar .side-portal{
  font-family:var(--font)!important;
  font-size:.66rem!important;
  font-weight:600!important;
  letter-spacing:.22em!important;
  text-transform:uppercase;
  color:rgba(255,255,255,.5)!important;
  padding:0 0 20px!important;
  margin-bottom:20px!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  line-height:1.6!important;
}
body.erp-admin .side-portal small{
  display:block;
  color:rgba(255,255,255,.3)!important;
  font-size:.6rem!important;
  letter-spacing:.2em!important;
  margin-top:4px;
}
body.erp-admin .sidebar .who{
  display:flex!important;
  align-items:center;
  gap:12px;
  padding:0 0 22px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
body.erp-admin .sidebar .avatar{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:.82rem;
  font-weight:600;
}
body.erp-admin .sidebar .who b{font-size:.86rem!important;font-weight:600;color:#fff!important;letter-spacing:.01em}
body.erp-admin .sidebar .who span{font-size:.74rem!important;color:rgba(255,255,255,.44)!important}

body.erp-admin .sidebar nav{display:flex;flex-direction:column;gap:1px;padding:0}
body.erp-admin .sidebar nav button,
body.erp-admin .sidebar nav a.side-link,
body.erp-admin .sidebar nav .erp-logout-btn{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:13px;
  width:100%;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  color:rgba(255,255,255,.62)!important;
  font-family:var(--font)!important;
  font-size:.82rem!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  padding:11px 12px 11px 14px!important;
  text-align:left;
  cursor:pointer;
  transition:color .18s ease,background .18s ease;
  box-shadow:none!important;
  min-height:0!important;
}
body.erp-admin .sidebar nav button::before,
body.erp-admin .sidebar nav a.side-link::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:2px;height:0;
  background:var(--accent);
  transform:translateY(-50%);
  transition:height .22s ease;
}
body.erp-admin .sidebar nav button:hover,
body.erp-admin .sidebar nav a.side-link:hover,
body.erp-admin .sidebar nav .erp-logout-btn:hover{
  color:#fff!important;
  background:rgba(255,255,255,.05)!important;
}
body.erp-admin .sidebar nav button.active,
body.erp-admin .sidebar nav a.side-link.active{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
}
body.erp-admin .sidebar nav button.active::before,
body.erp-admin .sidebar nav a.side-link.active::before{height:22px}
body.erp-admin .sidebar .erp-nav-icon{
  width:18px;height:18px;
  flex:0 0 18px;
  display:grid;place-items:center;
  color:currentColor;
  opacity:.8;
}
body.erp-admin .sidebar .erp-nav-icon svg{width:17px;height:17px}
body.erp-admin .sidebar nav button.active .erp-nav-icon{color:var(--accent-soft);opacity:1}
body.erp-admin .sidebar nav .count,
body.erp-admin .sidebar nav b.count{
  margin-left:auto;
  min-width:20px;
  padding:2px 6px;
  text-align:center;
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.1);
  border-radius:99px;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.04em;
}
body.erp-admin .sidebar nav button.active .count{background:var(--accent);border-color:var(--accent);color:#fff}
body.erp-admin .sidebar .side-web,
body.erp-admin .sidebar a.side-web{
  display:block;
  margin-top:22px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  color:rgba(255,255,255,.7)!important;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
}
body.erp-admin .sidebar .side-web:hover{background:rgba(255,255,255,.06);color:#fff!important;border-color:rgba(255,255,255,.3)}
body.erp-admin .sidebar > p{
  color:rgba(255,255,255,.4)!important;
  font-size:.76rem!important;
  line-height:1.7;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:18px!important;
}
body.erp-admin .sidebar > p a{color:rgba(255,255,255,.72)!important}
body.erp-admin .side-toggle{
  display:none;
  width:100%;
  margin-bottom:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:12px;
  border-radius:var(--radius);
  font:inherit;
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Workspace surface */
body.erp-admin .dash-main{
  margin-left:0!important;
  padding:clamp(26px,3vw,44px) clamp(20px,3vw,44px) 56px!important;
  min-width:0;
  width:auto;
  background:transparent;
}
body.erp-admin .dash-main > .panel{max-width:none;margin:0}

/* Page title block inside the workspace */
body.erp-admin .dash-main h1,
body.erp-admin .dash-main .erp-title h1,
body.erp-admin .dash-main h2{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--ink);
}
body.erp-admin .dash-main > .panel > h2{font-size:clamp(2rem,3vw,2.7rem);margin:0 0 8px}
body.erp-admin .dash-main > .panel > p{color:var(--muted);font-size:.98rem;max-width:70ch}
body.erp-admin .erp-title h2{
  font-family:var(--font-display)!important;
  font-size:clamp(2rem,3.2vw,2.9rem)!important;
  font-weight:400!important;
  color:var(--ink)!important;
  letter-spacing:-.012em!important;
  line-height:1.05!important;
  margin:0 0 8px!important;
}
body.erp-admin .erp-title p{color:var(--muted)!important;font-size:.96rem!important;margin:0}
body.erp-admin .erp-title{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
body.erp-admin .erp-live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem!important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)!important;font-weight:600!important;
  background:transparent!important;border:1px solid var(--line)!important;border-radius:99px!important;
  padding:7px 13px!important;
}
body.erp-admin .erp-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* KPI cards — flat, hairline, serif figures */
body.erp-admin .erp-kpis{gap:1px!important;background:var(--line);border:1px solid var(--line);padding:0;overflow:hidden}
body.erp-admin .erp-kpi,
body.erp-admin .erp-card,
body.erp-admin .kpi{
  background:var(--paper)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:26px 24px!important;
  min-height:0!important;
  transition:background .18s ease;
}
body.erp-admin .erp-kpi:hover{background:var(--accent-wash)!important;transform:none!important}
body.erp-admin .erp-kpi::before,
body.erp-admin .erp-kpi::after{display:none!important}
body.erp-admin .erp-kpi .kpi-icon,
body.erp-admin .erp-kpi i,
body.erp-admin .kpi-icon{
  width:34px!important;height:34px!important;flex-basis:34px!important;
  border-radius:50%!important;
  background:var(--accent-wash)!important;
  border:1px solid var(--accent-soft)!important;
  color:var(--accent)!important;
}
body.erp-admin .kpi-icon svg{width:16px!important;height:16px!important}
body.erp-admin .erp-kpi .kpi-copy b,
body.erp-admin .kpi-copy b{
  font-family:var(--font-display)!important;
  font-size:2.05rem!important;
  font-weight:400!important;
  letter-spacing:-.01em!important;
  color:var(--ink)!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums;
}
body.erp-admin .kpi-copy > span{font-size:.78rem!important;color:var(--muted)!important;font-weight:500!important;letter-spacing:.02em}
body.erp-admin .kpi-copy small{font-size:.7rem!important;color:#98A29D!important;letter-spacing:.04em}
body.erp-admin .erp-kpi .badge,
body.erp-admin .kpi-copy .badge,
body.erp-admin .badge{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  font-size:.62rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  color:var(--accent)!important;
  font-weight:600!important;
}

/* Quick actions */
body.erp-admin .erp-quick-grid{gap:1px!important;background:var(--line);padding:0!important}
body.erp-admin .erp-quick{
  background:var(--paper)!important;
  border:0!important;
  border-radius:0!important;
  padding:22px 10px!important;
  font-size:.7rem!important;
  letter-spacing:.06em!important;
  font-weight:500!important;
  color:var(--ink)!important;
}
body.erp-admin .erp-quick:hover{background:var(--accent-wash)!important;color:var(--accent-dark)!important}
body.erp-admin .erp-quick i{
  width:38px!important;height:38px!important;
  border-radius:50%!important;
  background:var(--accent-wash)!important;
  color:var(--accent)!important;
  border:1px solid var(--accent-soft);
}
body.erp-admin .erp-quick svg{width:17px!important;height:17px!important}

/* Panels, cards, tables */
body.erp-admin .erp-card-head{
  padding:20px 24px!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--paper)!important;
}
body.erp-admin .erp-card-head h3,
body.erp-admin .erp-card-head b{
  font-family:var(--font)!important;
  font-size:.72rem!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  color:var(--ink)!important;
  display:flex;align-items:center;gap:9px;
}
body.erp-admin .erp-card-head svg{width:15px;height:15px;color:var(--accent)!important}
body.erp-admin .erp-card-head a{
  font-size:.68rem!important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent)!important;font-weight:600;
}
body.erp-admin .dash-main table{width:100%;border-collapse:collapse}
body.erp-admin .dash-main th{
  background:var(--stone)!important;
  color:var(--muted)!important;
  font-size:.64rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  font-weight:600!important;
  padding:13px 20px!important;
  border-bottom:1px solid var(--line)!important;
  border-top:0!important;
  white-space:nowrap;
}
body.erp-admin .dash-main td{
  padding:16px 20px!important;
  border-bottom:1px solid var(--line)!important;
  font-size:.9rem!important;
  color:var(--ink)!important;
  background:var(--paper);
}
body.erp-admin .dash-main tbody tr:last-child td{border-bottom:0!important}
body.erp-admin .dash-main tbody tr:hover td{background:var(--accent-wash)!important}
body.erp-admin .dash-main td b,
body.erp-admin .dash-main td strong{font-weight:600}
body.erp-admin .dash-main td:first-child,
body.erp-admin .dash-main .ref{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Status pills — outline, no candy */
body.erp-admin .pill,
body.erp-admin .status,
body.erp-admin .p-status{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent!important;
  border:1px solid var(--line-strong)!important;
  border-radius:99px!important;
  padding:4px 11px!important;
  font-size:.64rem!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
  font-weight:600!important;
  color:var(--ink)!important;
}
body.erp-admin .pill.ok,body.erp-admin .status.completed{color:#3C6B4A!important;border-color:#B9CDBC!important}
body.erp-admin .pill.warn{color:var(--accent-dark)!important;border-color:var(--accent-soft)!important}

/* Workbar (staff console) */
body.erp-admin .erp-workbar{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:none!important;
  padding:12px 16px!important;
  width:min(1240px,90%)!important;
  margin:20px auto 0!important;
}
body.erp-admin .erp-worksearch{
  background:var(--stone)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
}
body.erp-admin .erp-worksearch input{background:transparent!important;border:0!important;box-shadow:none!important;padding:6px 0!important}
body.erp-admin .erp-search-go{background:var(--ink)!important;border-radius:var(--radius)!important;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem!important}
body.erp-admin .erp-invoice-btn{
  background:var(--accent)!important;
  color:#fff!important;
  border:1px solid var(--accent)!important;
  box-shadow:none!important;
  border-radius:var(--radius)!important;
  font-size:.7rem!important;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.erp-admin .erp-workprofile{border-left:1px solid var(--line)!important}
body.erp-admin .erp-workavatar{background:var(--ink)!important}

/* Generic account cards and forms */
body.erp-admin .panel,
body.erp-admin .erp-card,
body.erp-admin .card{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:none!important;
}
body.erp-admin .dash-main input,
body.erp-admin .dash-main select,
body.erp-admin .dash-main textarea{border-color:var(--line-strong)!important;border-radius:var(--radius)!important}
body.erp-admin .dash-main .btn,
body.erp-admin .dash-main .btn-dark,
body.erp-admin .dash-main .btn-outline{font-size:.72rem!important;letter-spacing:.12em!important;text-transform:uppercase;border-radius:var(--radius)!important}

/* Empty and loading states */
body.erp-admin .empty,
body.erp-admin .erp-empty{
  padding:52px 24px!important;
  text-align:center;
  color:var(--muted)!important;
  font-size:.94rem;
  background:var(--paper);
}


/* ---------------------------------------- 11b. account: decisive overrides
   The console bundles were written against a 1560px grid with their own
   header maths and an amber counter. These five declarations settle it. */
html body header.site.universal-header .universal-nav{
  width:min(1400px,94%)!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:32px!important;
  min-height:78px!important;
  padding:12px 0!important;
}
html body header.site.universal-header .universal-links{
  display:flex!important;
  justify-content:flex-end!important;
  justify-self:stretch!important;
  align-items:center!important;
  gap:30px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
html body header.site.universal-header .universal-actions{
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
}
html body header.site.universal-header .logo{justify-self:start!important}
body.erp-admin .sidebar nav button .count,
body.erp-admin .sidebar nav .count,
body.erp-admin #sideNav>button .count{
  margin-left:auto!important;
  background:rgba(255,255,255,.1)!important;
  color:rgba(255,255,255,.74)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:99px!important;
  font-size:.64rem!important;
  font-weight:600!important;
  min-width:20px!important;
  padding:2px 7px!important;
  text-align:center;
}
body.erp-admin .sidebar nav button.active .count,
body.erp-admin #sideNav>button.active .count{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
}
/* KPI footnotes: quiet words, not candy pills. */
body.erp-admin .erp-kpi .badge,
body.erp-admin .kpi-copy .badge,
body.erp-admin .erp-kpi [class*="badge"],
body.erp-admin .erp-kpi small b{
  background:none!important;
  color:var(--accent)!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
  font-size:.62rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  font-weight:600!important;
  box-shadow:none!important;
}
body.erp-admin .erp-kpi .kpi-copy > *:last-child{
  background:none!important;
  border:0!important;
  padding:0!important;
  color:var(--accent)!important;
  font-size:.62rem!important;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
}
/* The workspace title block sits on the page, not in a box. */
body.erp-admin .erp-title{border-bottom:0!important;padding-bottom:8px!important;margin-bottom:22px!important}
body.erp-admin .erp-live::after{display:none!important}
body.erp-admin .erp-live{background:none!important;border:0!important;padding:0!important;letter-spacing:.14em!important}
body.erp-admin .erp-live::before{background:var(--accent)!important}
body.erp-admin .erp-title h2{font-size:clamp(2.1rem,3.4vw,3.1rem)!important}
/* Quote/booking tables keep their numbers in a column, not a run-on. */
body.erp-admin .dash-main td:nth-child(5),
body.erp-admin .dash-main td:nth-child(6){font-variant-numeric:tabular-nums}
/* Panels breathe on a stone ground, no nested white boxes. */
body.erp-admin .dash-main > .panel > .erp-card,
body.erp-admin .dash-main > .panel > .erp-kpis{margin-bottom:26px}
body.erp-admin .dash-main .grid-2 > .erp-card,
body.erp-admin .dash-main .grid-2 > .panel{background:var(--paper)!important;border:1px solid var(--line)!important}

/* ------------------------------------------------------- 12. auth / account */
.auth-page{background:var(--stone)}
.auth-page .form-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
  padding:clamp(34px,4vw,52px)!important;
}
.auth-page h1,.auth-page h2{font-family:var(--font-display);font-weight:400}

/* --------------------------------------------------------------- 13. tidy-up */
/* Kill leftover gradient/glow flourishes from the earlier layers. */
.hero, .page-hero, .shop-hero, .proj-hero{box-shadow:none}
.card,.svc-card,.proj-card,.article-card,.cta-band,.p-card{background-image:none}
.svc-card,.proj-card{background:var(--paper)!important;border-top:1px solid var(--line)!important}
.tag,.chip{background:var(--accent-wash)!important;color:var(--accent-dark)!important;border-color:var(--accent-soft)!important}
.progress i{background:var(--accent)!important}
.eyebrow{color:var(--accent)!important}
.hero .eyebrow,.page-hero .eyebrow,.proj-hero .eyebrow,.section.dark .eyebrow{color:var(--accent-soft)!important}

/* Keep long tables and code blocks from breaking the measure. */
.rte img,.rte iframe{border-radius:var(--radius)}

/* Print: no chrome, no colour noise. */
@media print{
  .topbar,header.site,.p-footer,.whatsapp-float,.cta-band,.hero-stats{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000}
}

/* Shop search: a rule, not a pill. */
.mz-searchbar,.shop-hero form,.commerce-hero form{border-radius:var(--radius)!important}
.mz-searchbar input,.shop-hero form input{border-radius:0!important}
.mz-searchbar button,.shop-hero form button{border-radius:0!important;background:var(--ink)!important;color:#fff!important}
.mz-searchbar button:hover,.shop-hero form button:hover{background:var(--accent)!important}

/* Make the header fit before it has to overlap: labels step aside first. */
@media(min-width:1121px) and (max-width:1499px){
  header.site .universal-actions .action-label{display:none}
  header.site .universal-actions .universal-action{padding:9px 8px}
  html body header.site.universal-header .universal-links{gap:24px!important}
}
header.site .universal-actions{flex:0 0 auto!important}
header.site.universal-header .universal-links{min-width:0}

/* Workspace panels sit on the stone ground, not in another white box. */
body.erp-admin .dash-main > .panel{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  max-width:none!important;
}
/* Money reads on one line. */
body.erp-admin .kpi-copy b,
body.erp-admin .erp-kpi .kpi-copy b{
  font-size:clamp(1.5rem,1.9vw,2rem)!important;
  letter-spacing:-.015em!important;
  white-space:nowrap;
}
/* The staff toolbar is a full-width rule under the header, not a floating card. */
body.erp-admin .erp-workbar{
  width:100%!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:var(--paper)!important;
  padding:12px clamp(20px,3vw,44px)!important;
}
body.erp-admin .erp-workbar .erp-worksearch{max-width:520px!important}
body.erp-admin .dash{margin-top:0!important}
/* One status dot, not three. */
body.erp-admin .erp-live .dot,
body.erp-admin .erp-live i,
body.erp-admin .erp-live svg{display:none!important}

/* Account tables: the reference never breaks, nothing else fights for room. */
body.erp-admin .dash-main table{font-size:.86rem}
body.erp-admin .dash-main th,
body.erp-admin .dash-main td{padding:13px 14px!important}
body.erp-admin .dash-main td:first-child,
body.erp-admin .dash-main th:first-child{white-space:nowrap}
body.erp-admin .dash-main td:nth-child(4),
body.erp-admin .dash-main td:nth-child(5){white-space:nowrap}
body.erp-admin .dash-main .pill,
body.erp-admin .dash-main .status{white-space:nowrap}
body.erp-admin .erp-card-head h3,
body.erp-admin .erp-card-head b{white-space:nowrap}
body.erp-admin .erp-card-head a{white-space:nowrap}

/* The console pinned `white-space:normal!important` on every cell. */
body.erp-admin .dash-main td:first-child,
body.erp-admin .dash-main td:nth-child(4),
body.erp-admin .dash-main td:nth-child(5),
body.erp-admin .dash-main th{white-space:nowrap!important}
body.erp-admin .erp-card-head a,
body.erp-admin .erp-card-head span,
body.erp-admin .erp-card-head b,
body.erp-admin .erp-card-head h3{white-space:nowrap!important}
/* Donut in the new palette. */
body.erp-admin .erp-donut{
  background:conic-gradient(var(--accent) 0 42%, var(--stone-2) 42% 74%, #C9C2B4 74% 100%)!important;
  box-shadow:none!important;
}
body.erp-admin .erp-donut-center{background:var(--paper)!important;box-shadow:0 0 0 1px var(--line)!important}
body.erp-admin .erp-donut-center b{font-family:var(--font-display)!important;font-weight:400!important;letter-spacing:-.01em}
body.erp-admin .erp-legend-row{font-size:.82rem!important;color:var(--muted)!important}
body.erp-admin .erp-legend-row b{color:var(--ink)!important;font-variant-numeric:tabular-nums}

/* Footer colour survives every page bundle's own idea of a footer. */
.p-footer{background:var(--ink)!important}
.p-footer::before{background:var(--accent)!important;height:3px!important}
.p-footer::after{display:none!important}
.p-footer h4::after{background:var(--accent)!important}
.p-foot-brand .logo-full{background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
.p-news form{border-radius:var(--radius)!important;box-shadow:none!important}
.p-news button{border-radius:1px!important;background:var(--accent)!important}
.p-social a{background:transparent!important;border-radius:50%!important}
.p-pay span{border-radius:1px!important}

/* Auth pages: benefits are a list, not a stack of cards. */
.auth-page .check-list li{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:14px 0 14px 34px!important;
  color:var(--ink)!important;
  font-size:.96rem;
}
.auth-page .check-list li:last-child{border-bottom:0!important}
.auth-page .check-list li::before{
  background:none!important;
  border:0!important;
  color:var(--accent)!important;
  font-weight:700;
}
.auth-page .form-card{
  border-top:2px solid var(--accent)!important;
  box-shadow:var(--shadow-float)!important;
}
.auth-page .form-card h2,.auth-page .form-card h1{font-family:var(--font-display)!important;font-weight:400!important}

/* Mobile drawer, decided once for every page bundle. */
@media(max-width:1120px){
  html body header.site.universal-header .universal-links{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    background:#fff!important;
    border-top:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
    border-radius:0!important;
    box-shadow:0 24px 40px -30px rgba(8,34,43,.5)!important;
    padding:6px 5%!important;
    z-index:290!important;
  }
  html body header.site.universal-header .universal-links.open{display:flex!important}
  html body header.site.universal-header .universal-links a{
    padding:15px 0!important;
    border-bottom:1px solid var(--line)!important;
    font-size:.86rem!important;
    letter-spacing:.08em!important;
  }
  html body header.site.universal-header .universal-links li:last-child a{border-bottom:0!important}
  html body header.site.universal-header .universal-links a::after{display:none!important}
  html body header.site.universal-header .burger{display:grid!important}
  html body header.site.universal-header .universal-nav{
    width:94%!important;
    min-height:68px!important;
    padding:10px 0!important;
    gap:10px!important;
  }
  html body header.site.universal-header .logo-full{height:40px!important}
  html body header.site.universal-header .universal-quote{
    min-height:40px!important;
    padding:0 14px!important;
    font-size:.64rem!important;
  }
  html body header.site.universal-header .universal-profile{padding:4px 6px!important}
  .topbar{font-size:.68rem!important}
  .topbar .container{justify-content:center!important;text-align:center;gap:6px 14px!important}
}
/* ---------------------------------------------------------------------------
   Sign in, create account, recover: one split, always.
   The create-account section used to carry its own `max-width:620px`, which a
   two-column auth grid then halved into two 280px columns — every field
   clipped. The width comes from the grid now, whatever the markup says.
   --------------------------------------------------------------------------- */
body.auth-page .form-wrap{max-width:1120px!important}
body.auth-page .form-wrap > *{min-width:0}
@media(max-width:1080px){
  body.auth-page .form-wrap{max-width:640px!important}
}

/* ---------------------------------------------------------------------------
   Account tables: fit the screen before asking anyone to scroll sideways.
   Tightens the type and the gutters from 1520px down, and from 1080px down the
   table turns into a stack of labelled rows (the labels are stamped onto each
   cell from its column heading by portal.js).
   --------------------------------------------------------------------------- */
@media(min-width:1081px) and (max-width:1520px){
  body.erp-admin .dash-main th,
  body.erp-admin .dash-main td{padding:11px 9px!important;font-size:.82rem!important}
  body.erp-admin .dash-main td .btn,
  body.erp-admin .dash-main td summary.btn,
  body.erp-admin .dash-main td button.btn{font-size:.6rem!important;padding:8px 9px!important;letter-spacing:.06em!important}
  body.erp-admin .dash-main .pill,
  body.erp-admin .dash-main .status{font-size:.62rem!important;padding:4px 8px!important}
  body.erp-admin .dash-main .row-manage-body{max-width:320px!important}
}

/* the wrap is the measuring stick: a table stacks by the space it actually has,
   not by the width of the window it happens to be sitting in */
body.erp-admin .dash-main .table-wrap{container-type:inline-size;container-name:gsb-table}

@media(max-width:1080px){

  body.erp-admin .dash-main .table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  body.erp-admin .dash-main table.gsb-stack{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }
  body.erp-admin .dash-main table.gsb-stack thead{display:none!important}
  body.erp-admin .dash-main table.gsb-stack tbody{display:block!important;width:100%!important}
  body.erp-admin .dash-main table.gsb-stack tr{
    display:block!important;
    margin:0 0 12px!important;
    padding:4px 16px 10px!important;
    background:#fff!important;
    border:1px solid var(--line)!important;
    border-radius:var(--radius)!important;
    box-shadow:0 1px 0 rgba(8,34,43,.03)!important;
  }
  body.erp-admin .dash-main table.gsb-stack tr:last-child{margin-bottom:0!important}
  body.erp-admin .dash-main table.gsb-stack td{
    display:flex!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:16px!important;
    width:auto!important;
    padding:7px 0!important;
    border:0!important;
    border-bottom:1px solid var(--line-soft, #EDE8DE)!important;
    white-space:normal!important;
    text-align:right!important;
    font-size:.88rem!important;
  }
  body.erp-admin .dash-main table.gsb-stack td:last-child{border-bottom:0!important}
  body.erp-admin .dash-main table.gsb-stack td,
  body.erp-admin .dash-main table.gsb-stack td > *{min-width:0!important;max-width:100%!important}
  body.erp-admin .dash-main table.gsb-stack td{overflow-wrap:anywhere!important}
  body.erp-admin .dash-main table.gsb-stack td::before{flex:0 1 42%!important}
  body.erp-admin .dash-main table.gsb-stack td::before{
    content:attr(data-label);
    flex:0 0 42%;
    text-align:left;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
  }
  /* the first cell is the row's title: no label, larger, and its own line */
  body.erp-admin .dash-main table.gsb-stack td:first-child{
    display:block!important;
    text-align:left!important;
    padding:12px 0 8px!important;
    font-size:1rem!important;
    border-bottom:1px solid var(--line)!important;
    margin-bottom:4px!important;
  }
  body.erp-admin .dash-main table.gsb-stack td:first-child::before{display:none!important}
  /* action cells hold menus and buttons: left aligned, wrapping */
  body.erp-admin .dash-main table.gsb-stack td.gsb-cell-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding-top:12px!important;
  }
  body.erp-admin .dash-main table.gsb-stack td.gsb-cell-actions::before{
    flex:0 0 100%;
    margin-bottom:2px;
  }
  body.erp-admin .dash-main table.gsb-stack .row-manage-body{max-width:none!important;width:100%!important}
}

@container gsb-table (max-width:480px){

  body.erp-admin .dash-main .table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  body.erp-admin .dash-main table.gsb-stack{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }
  body.erp-admin .dash-main table.gsb-stack thead{display:none!important}
  body.erp-admin .dash-main table.gsb-stack tbody{display:block!important;width:100%!important}
  body.erp-admin .dash-main table.gsb-stack tr{
    display:block!important;
    margin:0 0 12px!important;
    padding:4px 16px 10px!important;
    background:#fff!important;
    border:1px solid var(--line)!important;
    border-radius:var(--radius)!important;
    box-shadow:0 1px 0 rgba(8,34,43,.03)!important;
  }
  body.erp-admin .dash-main table.gsb-stack tr:last-child{margin-bottom:0!important}
  body.erp-admin .dash-main table.gsb-stack td{
    display:flex!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:16px!important;
    width:auto!important;
    padding:7px 0!important;
    border:0!important;
    border-bottom:1px solid var(--line-soft, #EDE8DE)!important;
    white-space:normal!important;
    text-align:right!important;
    font-size:.88rem!important;
  }
  body.erp-admin .dash-main table.gsb-stack td:last-child{border-bottom:0!important}
  body.erp-admin .dash-main table.gsb-stack td,
  body.erp-admin .dash-main table.gsb-stack td > *{min-width:0!important;max-width:100%!important}
  body.erp-admin .dash-main table.gsb-stack td{overflow-wrap:anywhere!important}
  body.erp-admin .dash-main table.gsb-stack td::before{flex:0 1 42%!important}
  body.erp-admin .dash-main table.gsb-stack td::before{
    content:attr(data-label);
    flex:0 0 42%;
    text-align:left;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
  }
  /* the first cell is the row's title: no label, larger, and its own line */
  body.erp-admin .dash-main table.gsb-stack td:first-child{
    display:block!important;
    text-align:left!important;
    padding:12px 0 8px!important;
    font-size:1rem!important;
    border-bottom:1px solid var(--line)!important;
    margin-bottom:4px!important;
  }
  body.erp-admin .dash-main table.gsb-stack td:first-child::before{display:none!important}
  /* action cells hold menus and buttons: left aligned, wrapping */
  body.erp-admin .dash-main table.gsb-stack td.gsb-cell-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding-top:12px!important;
  }
  body.erp-admin .dash-main table.gsb-stack td.gsb-cell-actions::before{
    flex:0 0 100%;
    margin-bottom:2px;
  }
  body.erp-admin .dash-main table.gsb-stack .row-manage-body{max-width:none!important;width:100%!important}
}

/* a narrow card on a wide screen keeps its table, just a tighter one: the
   stack is for phones, not for laptops with a 540px sidebar card */
@media(min-width:1081px){
  @container gsb-table (max-width:760px){
    body.erp-admin .dash-main .table-wrap{border:1px solid var(--line)!important;background:#fff!important}
    body.erp-admin .dash-main th,body.erp-admin .dash-main td{padding:9px 6px!important;font-size:.74rem!important}
    body.erp-admin .dash-main th{white-space:normal!important;line-height:1.25!important;letter-spacing:.06em!important}
    body.erp-admin .dash-main td{white-space:normal!important}
    body.erp-admin .dash-main td .btn,body.erp-admin .dash-main td summary.btn,body.erp-admin .dash-main td button.btn{font-size:.58rem!important;padding:6px 7px!important}
    body.erp-admin .dash-main .pill,body.erp-admin .dash-main .status{font-size:.58rem!important;padding:3px 6px!important}
  }
}

/* ---------------------------------------------------------------------------
   The account shell, one decision for every width.
   Above 1080px: sidebar and content side by side.
   At or below 1080px: one column, the sidebar becomes the menu bar that the
   390px layout already used — never a two-column grid of clipped labels.
   --------------------------------------------------------------------------- */
@media(max-width:1080px){
  body.erp-admin .dash,
  body.erp-admin .dash.acc-shell{
    display:block!important;
    grid-template-columns:none!important;
    width:100%!important;
  }
  body.erp-admin .dash > .sidebar,
  body.erp-admin .dash.acc-shell > .sidebar{
    position:static!important;
    top:auto!important;
    left:auto!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    margin:16px 14px 0!important;
    border-radius:var(--radius)!important;
    padding:22px 18px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.erp-admin .dash-main,
  body.erp-admin .dash.acc-shell .dash-main{
    margin-left:0!important;
    width:auto!important;
    min-width:0!important;
    padding:20px 14px 40px!important;
  }
  /* the menu is a single list, opened by the one toggle, not a grid */
  body.erp-admin .sidebar nav#sideNav{
    display:none!important;
    grid-template-columns:none!important;
    flex-direction:column!important;
    gap:0!important;
    width:100%!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.nav-open.erp-admin .sidebar nav#sideNav{display:flex!important}
  body.erp-admin .sidebar nav#sideNav > button,
  body.erp-admin .sidebar nav#sideNav > a{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    padding:13px 12px 13px 14px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    white-space:nowrap!important;
    font-size:.95rem!important;
  }
  body.erp-admin .sidebar nav#sideNav > button .label,
  body.erp-admin .sidebar nav#sideNav > a .label{white-space:nowrap!important}
  body.erp-admin .sidebar .side-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    margin:18px 0 0!important;
    padding:14px 16px!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:#fff!important;
    border-radius:var(--radius)!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    font-size:.72rem!important;
    font-weight:700!important;
  }
  /* the website link sits under the menu, not beside it */
  body.erp-admin .sidebar .side-foot,
  body.erp-admin .sidebar .view-site{
    margin-top:12px!important;
    width:100%!important;
  }
}

@media(max-width:620px){
  .hero{padding:56px 0 48px!important}
  .hero h1{font-size:clamp(2.2rem,9vw,2.9rem)!important}
  .hero-stats{grid-template-columns:repeat(2,1fr)!important;row-gap:20px}
  .hero-stats > div{padding:0 16px}
  .hero-stats > div:nth-child(3){padding-left:0;border-left:0}
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%}
  .page-hero h1,.shop-hero h1,.proj-hero h1{font-size:clamp(2rem,7.6vw,2.6rem)!important}
  body.erp-admin .dash-main{padding:20px 14px 40px!important}
  body.erp-admin .erp-kpis{grid-template-columns:1fr 1fr!important}
  body.erp-admin .erp-kpi{padding:18px 16px!important}
  body.erp-admin .kpi-copy b{font-size:1.35rem!important}
}

@media(max-width:620px){
  body.erp-admin .sidebar nav#sideNav{display:none}
  body.nav-open.erp-admin .sidebar nav#sideNav{display:flex;flex-direction:column}
  body.erp-admin .sidebar nav#sideNav button,
  body.erp-admin .sidebar nav#sideNav a.side-link{padding:13px 12px 13px 14px!important;border-bottom:1px solid rgba(255,255,255,.08)}
  body.erp-admin .sidebar .side-toggle{
    display:block!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:#fff!important;
    border-radius:var(--radius)!important;
    letter-spacing:.12em!important;
  }
}

/* ------------------------------------------------- quoting: same language */
.qb-step-pill,.qb-panel,.opt-card,.sum-row,.form-card,.table-wrap,.kpi,.modal,
.radio-pill,.check-pill,.alert,.chip,.badge,.tag,.cart-item,.summary-card{
  border-radius:var(--radius)!important;
}
.qb-step-pill{
  background:transparent!important;
  border:1px solid var(--line)!important;
  color:var(--muted)!important;
  font-size:.7rem!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
  font-weight:600!important;
  padding:12px 18px!important;
  box-shadow:none!important;
}
.qb-step-pill.active,.qb-step-pill[aria-selected="true"]{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
  color:#fff!important;
}
.opt-card{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  transition:border-color .18s ease,background .18s ease;
}
.opt-card:hover{border-color:var(--line-strong)!important;background:var(--stone)!important}
.opt-card.selected,.opt-card.active{border-color:var(--accent)!important;background:var(--accent-wash)!important;box-shadow:none!important}
.opt-card h3,.opt-card h4{font-family:var(--font-display)!important;font-size:1.28rem!important;font-weight:400!important}
.qb-panel{background:var(--paper)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.sum-row{border-bottom:1px solid var(--line)!important;padding:14px 0!important;font-size:.92rem!important}
.sum-row b,.sum-row strong{font-variant-numeric:tabular-nums;font-weight:600}
.radio-pill,.check-pill{
  border:1px solid var(--line)!important;
  background:var(--paper)!important;
  font-size:.8rem!important;
  letter-spacing:.04em!important;
  padding:10px 16px!important;
}
.radio-pill.selected,.check-pill.selected,.radio-pill.active{
  border-color:var(--accent)!important;
  background:var(--accent-wash)!important;
  color:var(--accent-dark)!important;
}

/* Quote callouts, in the house palette. */
.est-range-band{
  background:var(--accent-wash)!important;
  border:1px solid var(--accent-soft)!important;
  border-radius:var(--radius)!important;
  color:var(--ink)!important;
}
.est-range-band b{color:var(--accent-dark)!important}
.est-range-band small{color:var(--muted)!important}
.est-big{font-family:var(--font-display)!important;font-weight:400!important;letter-spacing:-.01em}
textarea,.qb-panel textarea{background:var(--paper)!important;border:1px solid var(--line-strong)!important}

/* Images never carry their own corner radius inside a square card. */
.article-media,.article-media img,.p-media,.p-media img,.proj-media,.proj-media img,
.svc-card>img,.p-card>img,.article-card>img{border-radius:0!important}
.article-card,.p-card,.proj-card{overflow:hidden}

/* ============================================================================
   14. Shop band — the hero is a band, not a screen.
   ----------------------------------------------------------------------------
   The catalogue header was tall enough to push the first row of products
   below the fold. It is now a compact band: breadcrumb, title and standfirst
   on the left, the search field on the right and up level with the
   breadcrumb, the four assurances on a hairline underneath.
   ========================================================================= */
@media (min-width:961px){
  .shop-hero{padding:clamp(24px,2.8vw,32px) 0 clamp(18px,2.2vw,26px)!important}
  .shop-hero>.container{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(300px,29vw,392px);
    grid-template-areas:"bc search" "h1 search" "sub search" "perks perks";
    column-gap:clamp(30px,4vw,64px);
    align-items:start;
  }
  .shop-hero .breadcrumb{grid-area:bc;margin:0 0 6px!important;font-size:.72rem!important}
  .shop-hero h1{
    grid-area:h1;margin:0 0 6px!important;
    font-size:clamp(1.85rem,2.9vw,2.55rem)!important;
    line-height:1.06!important;
  }
  .shop-hero .hero-sub,.shop-hero .lead{
    grid-area:sub;margin:0!important;max-width:52ch;
    font-size:.95rem!important;line-height:1.5!important;
    color:rgba(255,255,255,.7)!important;
  }
  .shop-hero form.hero-search,.shop-hero .mz-searchbar{
    grid-area:search;align-self:start;width:100%;max-width:none!important;margin:0!important;
  }
  .shop-hero .hero-search-results{display:none!important}
  .shop-hero .commerce-perks{
    grid-area:perks;margin-top:clamp(14px,1.8vw,20px)!important;
    padding-top:13px!important;border-top:1px solid rgba(255,255,255,.13);
  }
  .shop-hero .commerce-perks>div{gap:9px}
  .shop-hero .commerce-perks svg{width:17px;height:17px}
  .shop-hero .commerce-perks b{font-size:.76rem;letter-spacing:.07em}
  .shop-hero .commerce-perks small{font-size:.73rem}
}
@media (max-width:960px){
  .shop-hero{padding:24px 0 20px!important}
  .shop-hero h1{margin:8px 0 6px!important}
  .shop-hero .hero-sub,.shop-hero .lead{margin-bottom:0!important}
  .shop-hero form.hero-search{margin-top:14px!important}
  .shop-hero .commerce-perks{margin-top:14px!important}
}

/* Footer credit — same voice as the copyright it sits beside. */
.p-foot-bottom .p-credit{color:inherit;opacity:.92}
.p-foot-bottom .p-credit b{font-weight:600;color:inherit}

/* ============================================================================
   15. Account menu — the chip opens a panel.
   ----------------------------------------------------------------------------
   The chip was an <a> with a chevron that pointed at nothing. It is a button
   now, and the panel behind it carries the workspace, the publishing desk (or
   the backend, for accounts that have one) and the way out.
   ========================================================================= */
.account-menu{position:relative;display:inline-flex}
.account-menu .universal-profile{
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius);
}
.account-menu .universal-profile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.account-menu .universal-profile[aria-expanded="true"]{background:var(--accent-wash)}
.account-menu .chev{transition:transform .18s ease;display:inline-block}
.account-menu .universal-profile[aria-expanded="true"] .chev{transform:rotate(180deg)}

.account-panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:80;
  width:288px;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-float);padding:6px;
}
.account-panel[hidden]{display:none}
.ap-head{display:flex;align-items:center;gap:11px;padding:12px 12px 14px;border-bottom:1px solid var(--line)}
.ap-avatar{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  background:var(--ink);color:var(--accent-glow);
  font-family:var(--font-display);font-size:1.1rem;line-height:1;
}
.ap-id{min-width:0}
.ap-id b{display:block;font-size:.88rem;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-id small{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-group{padding:10px 6px 6px}
.ap-label{
  display:block;padding:0 6px 6px;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}
.ap-group a,.ap-foot a{
  display:block;padding:9px 10px 9px 12px;border-radius:var(--radius);
  color:var(--ink);text-decoration:none;font-size:.86rem;line-height:1.3;
  border-left:2px solid transparent;
}
.ap-group a small{display:block;font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.35}
.ap-group a:hover,.ap-group a:focus-visible{background:var(--accent-wash);border-left-color:var(--accent);text-decoration:none}
.ap-foot{border-top:1px solid var(--line);padding:6px}
.ap-foot a{color:var(--muted)}
.ap-foot a:hover,.ap-foot a:focus-visible{background:var(--stone);color:var(--ink);border-left-color:var(--ink)}

@media(max-width:620px){
  /* Anchored to the viewport: on a phone the chip is not the last item in the
     row, so anchoring the panel to it pushed the panel off the left edge. */
  .account-panel{position:fixed;right:12px;left:auto;top:102px;width:min(320px,calc(100vw - 24px))}
}

/* ============================================================================
   16. Publishing desk — /publish/
   ========================================================================= */
.desk-hero{padding:clamp(34px,4.4vw,54px) 0 clamp(30px,4vw,44px)!important}
.desk-hero h1{font-size:clamp(2.2rem,3.6vw,3.1rem)!important;margin:10px 0 8px!important}
.desk-hero .lead{max-width:60ch;color:rgba(255,255,255,.72)!important;font-size:.98rem!important}

.desk .desk-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:40px;
}
@media(min-width:960px){
  .desk .desk-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);gap:clamp(40px,5vw,72px);align-items:start}
  .desk-side{position:sticky;top:calc(var(--gsb-chrome-h,96px) + 18px)}
}

.desk-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin-bottom:22px}
.desk-tab{
  padding:11px 16px;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.desk-tab:hover{color:var(--ink);text-decoration:none}
.desk-tab.is-active{color:var(--ink);border-bottom-color:var(--accent)}

.desk-note{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.desk-form .field{margin-bottom:16px}
.desk-form .field label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.desk-form .field-hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:6px}
.desk-form input[type=text],.desk-form textarea{
  width:100%;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:11px 13px;font:inherit;color:var(--ink);
}
.desk-form input[type=text]:focus,.desk-form textarea:focus{outline:0;border-color:var(--accent)}
.desk-form textarea{resize:vertical;min-height:180px;line-height:1.6}
.desk-form input[type=file]{font-size:.86rem;color:var(--muted)}
.desk-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.desk-who{font-size:.82rem;color:var(--muted)}
.desk-who b{color:var(--ink);font-weight:600}

.desk-h2{font-size:1.35rem;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.desk-list{list-style:none;margin:0;padding:0}
.desk-list li{padding:12px 0;border-bottom:1px solid var(--line)}
.desk-list li:last-child{border-bottom:0}
.desk-list a{font-size:.92rem;color:var(--ink);text-decoration:none;font-weight:600}
.desk-list a:hover{color:var(--accent-dark);text-decoration:underline}
.desk-meta{display:block;font-size:.74rem;color:var(--muted);margin-top:4px}
.desk-status{
  display:inline-block;padding:2px 7px;margin-right:6px;border-radius:var(--radius);
  font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
}
.desk-status.is-live{background:var(--accent-wash);color:var(--accent-dark)}
.desk-status.is-review{background:var(--stone-2);color:var(--ink)}
.desk-status.is-draft{background:var(--stone);color:var(--muted)}
.desk-empty,.desk-help{font-size:.86rem;color:var(--muted);line-height:1.55}
.desk-help{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.desk{padding-top:clamp(32px,4vw,52px)!important;padding-bottom:clamp(40px,5vw,64px)!important}
/* A signed-in visitor has no use for "Create Free Account". */
body.logged-in .hero-actions a[data-guest]{display:none}
/* Micro-labels on light surfaces need the deeper accent to stay legible. */
.eyebrow{color:var(--accent-dark)}

/* ============================================================================
   17. The case-study banner earns its empty half
   ========================================================================= */
.exec-banner.exec-banner{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.exec-banner-media{margin:0;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink-2)}
.exec-banner-media img{display:block;width:100%;height:100%;object-fit:cover}
.exec-banner-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(185deg,rgba(8,34,43,.06) 0%,rgba(8,34,43,.34) 100%);
  pointer-events:none;
}
@media(min-width:960px){
  .exec-banner.exec-banner{
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
    grid-template-areas:"copy media" "actions media";
    align-items:start;
    column-gap:clamp(26px,3.4vw,48px)!important;
  }
  .exec-banner>.exec-banner-media{grid-area:media;align-self:stretch;min-height:230px;margin:0!important}
  .exec-banner>div:first-child{grid-area:copy}
  .exec-banner>.exec-actions{grid-area:actions;margin-top:16px!important}
}
@media(max-width:959px){
  .exec-banner>.exec-banner-media{margin-top:22px!important;aspect-ratio:16/9}
}

/* ============================================================================
   18. Console actions — forms that fit inside a table row
   ========================================================================= */
.row-manage{display:inline-block}
.row-manage>summary,.admin-form>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.row-manage>summary::-webkit-details-marker,.admin-form>summary::-webkit-details-marker{display:none}
.row-manage>summary::after{content:"⌄";font-size:.7rem;color:var(--muted);transition:transform .15s ease}
.row-manage[open]>summary::after{transform:rotate(180deg)}
.row-manage-body{
  margin-top:8px;width:236px;padding:10px;background:var(--paper);
  border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--radius);
}
.row-op{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.row-op+.row-op{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.row-op input,.row-op select{
  flex:1 1 92px;min-width:0;padding:6px 8px;font:inherit;font-size:.78rem;
  border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);
}
.row-op input::placeholder{color:var(--muted);font-size:.78rem}
.row-op .btn{flex:0 0 auto;min-height:32px;padding:0 12px;font-size:.64rem}
.admin-form{display:inline-block;margin-left:10px}
.admin-form-body{margin-top:10px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);max-width:640px}
/* an opened form is a card of its own: it takes the full row instead of
   squeezing in beside the button that opened it */
.admin-form[open]{display:block;margin-left:0;width:100%}
.admin-form[open]>.admin-form-body{max-width:none;width:100%;padding:16px 18px}
.admin-form-body .row-op{flex-wrap:wrap}
.admin-form-body .row-op textarea{width:100%;flex:1 1 100%;margin:0 0 8px}
.admin-form-body .row-op .btn,.admin-form-body .row-op button{margin-top:4px}
.admin-form-body .row-op input,.admin-form-body .row-op select{flex:1 1 140px}
.muted-sm{font-size:.78rem;color:var(--muted)}

/* ---------------------------------------------------------------------------
   §19 · The four-step band leads with a photograph
   .exec-checklist is four text cards; each now opens with the stage it
   describes, so the band reads as evidence rather than a list of promises.
   --------------------------------------------------------------------------- */
.exec-checklist > div { display: flex; flex-direction: column; }
.exec-checklist .step-art {
  margin: -2px 0 13px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
  background: var(--accent-wash);
}
.exec-checklist .step-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.exec-checklist > div:hover .step-art img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .exec-checklist .step-art img { transition: none; }
  .exec-checklist > div:hover .step-art img { transform: none; }
}

/* ---------------------------------------------------------------------------
   §20 · The account shell
   One column for the account, one for its nav. The nav runs the full height of
   the page — from the bottom edge of the site header to the top edge of the
   footer — and the account's own header sits inside the content column, after
   the nav, never across the whole page.
   --------------------------------------------------------------------------- */
body .dash.acc-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
  width: 100%;
  margin: 0;
  /* keeps the dark column continuous, top of the account to the footer */
  background: linear-gradient(90deg, #0A2C38 0 264px, transparent 264px);
}
/* the site's 38px footer gap would cut the account column in two */
body.gsb-portal footer.p-footer { margin-top: 0; }

.dash.acc-shell > .sidebar {
  position: sticky;
  top: var(--acc-header-h, 81px);
  align-self: start;
  height: calc(100vh - var(--acc-header-h, 81px));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 22px 18px 20px;
  background: linear-gradient(180deg, #0B2C36 0%, #0A2B37 60%, #092833 100%);
  border-right: 1px solid rgba(255, 255, 255, .07);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.dash.acc-shell > .sidebar::-webkit-scrollbar { width: 8px; }
.dash.acc-shell > .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 8px;
}
.dash.acc-shell > .sidebar .erp-view-site,
.dash.acc-shell > .sidebar .side-web { margin-top: auto; }
.dash.acc-shell > .sidebar #sideNav { margin-bottom: 16px; }

/* the account's own header — the column's first line, not a page-wide band */
.dash.acc-shell .acc-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dash.acc-shell .acc-head.erp-workbar {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line, #E1EBF1);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  padding: 12px 30px;
  gap: 12px;
}
.dash.acc-shell .acc-head .erp-worksearch { max-width: 560px; }
.dash.acc-shell .acc-head .erp-invoice-btn { margin-left: auto; }
.dash.acc-shell .acc-head .erp-workresults { left: 30px; top: calc(100% + 6px); }

/* the panel area keeps its own rhythm under that header */
.dash.acc-shell .dash-main { padding: 28px 30px 56px; }

@media (max-width: 980px) {
  body .dash.acc-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    background: none !important;
  }
  body .dash.acc-shell > .sidebar {
    position: static;
    height: auto;
    max-height: none;
    padding: 18px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  body .dash.acc-shell .acc-head.erp-workbar { padding: 10px 16px; flex-wrap: wrap; }
  body .dash.acc-shell .acc-head .erp-worksearch { order: 3; flex: 1 1 100%; max-width: none; }
  body .dash.acc-shell .acc-head .erp-worksearch input { min-width: 0; flex: 1 1 auto; }
  body .dash.acc-shell .acc-head .erp-search-go { flex: 0 0 auto; }
  .dash.acc-shell .acc-head .erp-workresults { position: static; width: 100%; }
  .dash.acc-shell .dash-main { padding: 20px 16px 44px; }
}

/* ---------------------------------------------------------------------------
   §21 · Account records in situ
   A quote, a booking or an order opens where it sits — facts, progress and the
   two or three things the reader can actually do — instead of sending anyone
   to another screen.
   --------------------------------------------------------------------------- */
.dash.acc-shell .row-manage { display: inline-block; }
.dash.acc-shell .row-manage > summary { list-style: none; cursor: pointer; }
.dash.acc-shell .row-manage > summary::-webkit-details-marker { display: none; }
.dash.acc-shell .row-manage-body {
  margin-top: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line, #E1EBF1);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(8, 34, 43, .08);
  width: 100%;
  min-width: 0;
  max-width: 360px;
  text-align: left;
}
.dash.acc-shell .row-manage-body .row-op { margin: 0 0 8px; }
.dash.acc-shell .row-manage-body .row-op:last-child { margin-bottom: 0; }
.dash.acc-shell .row-manage-body input,
.dash.acc-shell .row-manage-body select {
  width: 100%;
  margin: 0 0 7px;
  padding: 8px 10px;
  font: inherit;
  font-size: .88rem;
  border: 1px solid var(--line, #DCE7ED);
  border-radius: 2px;
  background: #fff;
}
.dash.acc-shell .quote-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0 0 12px;
}
.dash.acc-shell .quote-facts dt {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #5A7383);
}
.dash.acc-shell .quote-facts dd { margin: 2px 0 0; font-size: .9rem; }
.dash.acc-shell .row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dash.acc-shell .row-actions .row-op { margin: 0; }
.dash.acc-shell .order-lines { margin: 0 0 10px; padding-left: 18px; font-size: .9rem; }
.dash.acc-shell .order-lines li { margin: 2px 0; }
.dash.acc-shell .proj-manage { display: block; }
@media (max-width: 640px) {
  .dash.acc-shell .row-manage-body { max-width: none; min-width: 0; }
  .dash.acc-shell .quote-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   §22 · Record cards inside the account
   Long project and service titles were set in a flex row with a status pill,
   so they ran under it and were clipped by the card. They wrap now.
   --------------------------------------------------------------------------- */
body .dash.acc-shell .erp-card-head {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
}
body .dash.acc-shell .erp-card-head h3 {
  min-width: 0;
  flex: 1 1 60%;
  /* the panel stylesheet locks card headings to one line; a title that runs
     past the card is worse than a title on two lines */
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
body .dash.acc-shell .erp-card-head > span:last-child { flex: 0 0 auto; }
body .dash.acc-shell .erp-card p,
body .dash.acc-shell .erp-card .p-loc {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body .dash.acc-shell details > summary.btn { display: inline-flex; align-items: center; gap: 6px; }

/* contracts carry nine columns; they fit the account column on a desktop
   instead of scrolling sideways inside their own box */
@media (min-width: 981px) {
  body .dash.acc-shell #panel-contracts th,
  body .dash.acc-shell #panel-contracts td { padding: 10px 8px; font-size: .84rem; }
  body .dash.acc-shell #panel-contracts .btn { padding: 6px 10px; font-size: .7rem; letter-spacing: .08em; }
  body .dash.acc-shell #panel-contracts .row-manage-body { min-width: 220px; }
  body .dash.acc-shell #panel-contracts td { white-space: normal !important; overflow-wrap: anywhere; }
  body .dash.acc-shell #panel-contracts th { font-size: .64rem; letter-spacing: .06em; }
  body .dash.acc-shell #panel-contracts table { table-layout: auto; }
}

/* ---------------------------------------------------------------------------
   §23 · Pictures on a record
   A project or a service is added, and photographed, in the same form. The
   file picker is the only thing in the console that is not a text field, so it
   gets its own line: the picture in use, the picker, and a way to remove it.
   --------------------------------------------------------------------------- */
.row-op .photo-field,
.dash.acc-shell .row-manage-body .photo-field {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px;
}

.row-op .photo-current,
.dash.acc-shell .row-manage-body .photo-current {
  flex: 0 0 auto;
  display: block;
  width: 148px;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-strong, #D8DCD3);
  border-radius: var(--radius, 2px);
  overflow: hidden;
  background: #fff;
}

.row-op .photo-current img,
.dash.acc-shell .row-manage-body .photo-current img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.row-op .photo-field-pick,
.dash.acc-shell .row-manage-body .photo-field-pick {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.row-op .photo-field-label,
.dash.acc-shell .row-manage-body .photo-field-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.row-op .photo-field-hint,
.dash.acc-shell .row-manage-body .photo-field-hint {
  font-size: .72rem;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}

/* the picker itself: a hairline box, not a text field */
.row-op input[type="file"],
.dash.acc-shell .row-manage-body input[type="file"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  height: auto;
  padding: 6px;
  font: inherit;
  font-size: .72rem;
  color: var(--muted);
  background: #fff;
  border: 1px dashed var(--line-strong, #D8DCD3);
  border-radius: var(--radius, 2px);
  cursor: pointer;
}

.row-op input[type="file"]::file-selector-button,
.dash.acc-shell .row-manage-body input[type="file"]::file-selector-button {
  margin-right: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper, #F6F3EC);
  border: 1px solid var(--line-strong, #D8DCD3);
  border-radius: 2px;
  cursor: pointer;
}

.row-op input[type="file"]:focus-visible,
.dash.acc-shell .row-manage-body input[type="file"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* "Remove the photo" sits on the line after the picker */
.row-op .check-field,
.dash.acc-shell .row-manage-body .check-field {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: .76rem;
  color: var(--muted);
  cursor: pointer;
}

.row-op .check-field input[type="checkbox"],
.dash.acc-shell .row-manage-body .check-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

/* the "current picture" chip also shows on an already-photographed card */
.erp-card .p-thumb {
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16 / 10;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-2, #F1ECE2);
}

.erp-card .p-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Destructive row actions (delete an invoice, remove a crew member).
   Neutral, not red: the console keeps a single aqua accent, so removal is
   signalled by position and a confirm question rather than a loud color.
   --------------------------------------------------------------------------- */
.row-del-wrap,
.dash.acc-shell .row-manage-body .row-del-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #E1EBF1);
}

.row-del-sep {
  margin: 10px 0;
  border-top: 1px solid var(--line, #E1EBF1);
}

.row-op .row-del,
.dash.acc-shell .row-manage-body .row-op .row-del {
  background: none;
  border: 1px solid var(--line-strong, #D8DCD3);
  color: var(--muted, #5C6B70);
  box-shadow: none;
}

.row-op .row-del:hover,
.dash.acc-shell .row-manage-body .row-op .row-del:hover {
  background: #fff;
  border-color: #C0C8C4;
  color: var(--ink, #12232B);
}

/* an opened row menu is taller than the row text: keep the numbers at the top */
.dash.acc-shell .table-wrap td { vertical-align: top; }

/* ---------------------------------------------------------------------------
   Footer columns.
   The five-column rule above is the desktop design; the page bundles carry
   narrower versions, but they load before this file, so the desktop rule was
   winning at every width and the footer folded into five 30px columns on a
   phone. These are the same breakpoints, decided here, last.
   --------------------------------------------------------------------------- */
@media(max-width:1100px){
  .p-foot-top{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 32px!important}
  .p-foot-brand{grid-column:1 / -1}
  .p-foot-brand p{max-width:46ch}
}
@media(max-width:680px){
  .p-foot-top{grid-template-columns:minmax(0,1fr)!important;gap:30px!important;padding:46px 0 30px!important}
  .p-foot-brand,.p-foot-links,.p-foot-contact,.p-news{grid-column:1 / -1}
  .p-news form{max-width:420px}
  .p-foot-bottom{gap:16px!important;text-align:left}
}
@media(max-width:460px){
  .p-foot-bottom{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
  .p-pay{flex-wrap:wrap!important;row-gap:8px}
}

/* ---------------------------------------------------------------------------
   Phones: the design keeps its voice, but nothing is a 10px tap target.
   The approved comps set buttons in small caps at 10–11px, which reads well on
   a poster and badly on a thumb. Below 620px the same components grow a touch,
   the long CTA labels wrap instead of pushing past the screen, and the footer
   becomes a comfortable list rather than five columns squeezed into 350px.
   --------------------------------------------------------------------------- */
@media(max-width:620px){
  /* buttons: a real target, and a long label wraps instead of overflowing */
  .btn,
  .btn-hero-ghost,
  .btn-sm,
  .btn-block{
    min-height:44px;
    font-size:.78rem!important;
    line-height:1.25;
    letter-spacing:.07em;
    white-space:normal;
    max-width:100%;
    padding:12px 16px;
    text-align:center;
    justify-content:center;
  }
  .btn-sm{padding:10px 13px;min-height:40px}
  .btn svg,.btn-sm svg{flex:0 0 auto}

  /* small labels that carry meaning stay legible */
  .eyebrow,.tag,.p-badge,.p-status,.article-tag,.muted-sm,.p-foot-bottom,
  .p-credit,.p-pay,.sum-row span,.kpi span,.erp-kpi span{
    font-size:.76rem!important;
    letter-spacing:.06em;
  }
  body{font-size:16px}

  /* the closing call-to-action is a single column on a phone */
  .final-cta-card,
  .final-cta-card > *{max-width:100%!important;min-width:0!important}
  .final-cta-card{grid-template-columns:minmax(0,1fr)!important;display:grid!important;gap:18px!important}
  .final-cta-card > div,
  .final-cta-card > section{grid-column:1 / -1!important}
  .final-cta-card .btn-wrap,
  .final-cta-card .cta-actions{display:flex;flex-wrap:wrap;gap:10px}
  .final-cta-card .cta-actions .btn{flex:1 1 100%}

  /* header controls are thumb-sized */
  html body header.site.universal-header .universal-action{min-height:40px;padding:8px 10px}
  html body header.site.universal-header .burger{width:44px;height:44px}
  html body header.site.universal-header .universal-profile{min-height:40px}

  /* the footer is a list: every row a comfortable tap, no five-column squeeze */
  .p-foot-top{gap:26px!important}
  .p-foot-top h4{margin-bottom:10px;font-size:.8rem}
  .p-foot-links p a,
  .p-footer .p-foot-links a{
    display:flex;
    align-items:center;
    min-height:44px;
    font-size:.95rem;
  }
  .p-foot-contact .p-row{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    margin:0;
    line-height:1.45;
  }
  .p-foot-contact .p-row .p-ico{flex:0 0 auto}
  .p-foot-contact .p-row a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem}
  .p-foot-links,
  .p-foot-contact,
  .p-foot-company{display:block}
  .p-news form{display:flex;flex-direction:column;gap:10px;max-width:100%}
  .p-news input{min-height:46px;width:100%}
  .p-news .btn{width:100%}
  .p-foot-bottom{font-size:.85rem!important;line-height:1.6}
  .p-pay{gap:8px;flex-wrap:wrap}
  .p-pay span{padding:5px 9px;font-size:.74rem}
  .p-topbtn{min-height:40px;display:inline-flex;align-items:center}
  .p-credit a{border-bottom:1px solid rgba(199,222,232,.45)}
}

@media(max-width:1080px){
  /* an open section menu scrolls inside its own card, so a long list of
     sections never runs off the bottom of a phone */
  body.erp-admin .sidebar nav#sideNav,
  body.erp-admin .sidebar.nav-open nav#sideNav{
    max-height:calc(100dvh - var(--gsb-chrome-h, 96px) - 220px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  body.erp-admin .sidebar .side-toggle{min-height:46px}
  body.erp-admin .sidebar nav#sideNav > button,
  body.erp-admin .sidebar nav#sideNav > a{min-height:48px}
}

@media(max-width:620px){
  /* Buttons that the desktop design sets as quiet text links (secondary
     actions inside cards) still need a thumb-sized box on a phone. */
  .svc-card .btn,
  .svc-card .btn:not(.btn-dark),
  .svc-card .btn-dark,
  .svc-card .btn-outline{
    padding:11px 14px!important;
    min-height:44px!important;
    font-size:.78rem!important;
    letter-spacing:.06em;
  }

  /* the utility bar: small type is fine, small targets are not */
  .topbar,
  .topbar a,
  .topbar span{font-size:.78rem!important}
  .topbar a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}

  /* breadcrumbs and FAQ rows */
  .crumbs a,.crumb a,.breadcrumb a,[class*="crumb"] a{display:inline-flex;align-items:center;min-height:40px;min-width:40px;justify-content:center;padding:0 6px}
  summary{min-height:46px;display:flex;align-items:center;gap:10px;padding:6px 0}

  /* footer odds and ends the list rule does not reach */
  .p-news button,.p-news form button,#newsForm button{min-height:46px;font-size:.78rem!important}
  .p-pay-link,.p-footer .p-pay-link{min-height:38px;display:inline-flex;align-items:center;font-size:.82rem!important}

  /* shop */
  .wish-btn{width:44px;height:44px}
  .mz-details,.proj-card a.more,.article-card a.more{display:inline-flex;align-items:center;min-height:40px}
  .mz-badge,.mz-cat-tag,.price-on-request,.p-badge,.p-status{font-size:.74rem!important}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px}
  .shop-filters button,.filter-btn,.chip{min-height:40px;display:inline-flex;align-items:center}

  /* header quote button keeps its small-caps voice, at a readable size */
  html body header.site.universal-header .universal-quote{font-size:.72rem!important;min-height:42px}
}

/* the closing strip, as three clear rows on a phone */
@media(max-width:620px){
  .p-foot-bottom{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
    padding-top:20px!important;
  }
  .p-foot-bottom > span{width:100%}
  .p-credit{display:inline-block;line-height:1.6}
  .p-credit a{border-bottom:0;text-decoration:underline;text-underline-offset:3px}
  .p-pay{
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px!important;
  }
  .p-pay .p-pay-link{flex:1 1 100%;min-height:40px}
  .p-pay b{font-size:.72rem}
  .p-pay span{padding:6px 10px;border:1px solid rgba(199,222,232,.35);border-radius:4px;font-size:.72rem}
  .p-topbtn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border:1px solid rgba(199,222,232,.35);
    border-radius:4px;
    font-size:.76rem!important;
  }
  /* phone and email links anywhere on the site get a real hit area */
  a[href^="tel:"],a[href^="mailto:"]{min-height:40px;display:inline-flex;align-items:center}
}

@media(max-width:620px){
  /* two link columns instead of five stacked lists: the footer halves in
     height without losing a single link */
  .p-foot-top{grid-template-columns:1fr 1fr!important;gap:26px 20px!important}
  .p-foot-brand,
  .p-foot-contact,
  .p-news{grid-column:1 / -1}
  .p-foot-links{grid-column:auto!important}
  .p-foot-links p a{min-height:40px;font-size:.92rem}
  .p-foot-top h4{font-size:.74rem;letter-spacing:.12em}
  .p-credit .p-dot{display:none}
  .p-pay b{flex:1 1 100%}
}

@media(max-width:1080px){
  /* The open menu is its own scroll area: the page behind it stays put, and a
     long list of sections never runs off the bottom of the screen. */
  body.nav-open.erp-admin .sidebar nav#sideNav{
    display:flex!important;
    flex-direction:column!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    max-height:calc(100dvh - var(--gsb-chrome-h, 96px) - 210px)!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  body.nav-open.erp-admin .sidebar nav#sideNav::-webkit-scrollbar{width:6px}
  body.nav-open.erp-admin .sidebar nav#sideNav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}
}

/* ------------------------------------------------- account type badges */
.acct-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
}
.acct-badge.type-client{border-color:#CFE3EA;background:#F2F8FA;color:#0C6178}
.acct-badge.type-staff{border-color:#D8DCD3;background:#F5F2EA;color:#4A4535}
.acct-badge.type-sub{border-color:#E3D6C3;background:#FBF5EA;color:#7A5A28}
.acct-origin{color:var(--muted);font-size:.72rem;line-height:1.35;white-space:nowrap}
@media(max-width:1080px){
  .acct-origin{white-space:normal}
}

@media(max-width:620px){
  /* shop: every control on a product card clears 40px */
  .shop-grid .btn,
  .svc-card .btn,
  .p-card .btn,
  .card .btn{min-height:40px}
  .wish-btn,
  .shop-grid button[aria-label],
  .p-card button[aria-label]{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
  .filter-bar button,.shop-filters button,.chips button{min-height:40px;padding:8px 14px}
  .topbar a,.topbar span a{padding-left:6px;padding-right:6px}
  /* inline prose links stay inline; they only need a clear underline */
  .p-foot-bottom .p-credit a{min-height:0}
}

@media(max-width:620px){
  .mz-actions .btn,
  .mz-card .btn,
  .btn-buy{min-height:44px!important;padding:11px 14px!important}
  .mz-side-head button{min-height:40px;min-width:40px;padding:8px 10px}
}

@media(max-width:620px){
  /* small buttons still need readable type on a phone */
  .btn-sm,.btn-sm.btn-outline,.btn-sm.btn-dark,.btn-sm.btn-buy{font-size:.78rem!important;letter-spacing:.06em!important;min-height:44px;padding:11px 14px!important;line-height:1.15}
}

@media(max-width:620px){
  /* match the desktop card rules that set .68rem on buttons */
  .svc-card .btn,
  .svc-card .btn-dark,
  .article-card .btn,
  .article-card a.btn,
  .p-card .btn{font-size:.78rem!important;letter-spacing:.08em!important;min-height:44px!important;padding:10px 14px!important}
  .svc-card .btn:not(.btn-dark){
    font-size:.76rem!important;
    min-height:44px!important;
    padding:10px 14px!important;
    color:var(--ink)!important;
    border:1px solid var(--line)!important;
    border-radius:var(--radius)!important;
    justify-content:center;
  }
  .svc-card .btn:not(.btn-dark):hover{border-color:var(--accent)!important;color:var(--accent)!important}
  .mz-price,.price-on-request{font-size:.74rem!important}
  .mz-side h3,.mz-side h4,.filter-card h3{font-size:.74rem!important}
  .mz-count,.filter-count{font-size:.74rem!important}
}

@media(max-width:620px){
  /* the bar that sticks to the bottom of the viewport on the projects page */
  .sticky-cta{gap:8px!important;padding:10px!important}
  .sticky-cta .btn{
    font-size:.7rem!important;
    letter-spacing:.06em!important;
    white-space:nowrap;
    padding:10px 8px!important;
    min-height:52px!important;
    gap:6px;
  }
  body.gsb-projects .whatsapp-float{bottom:calc(79px + 18px)!important}
  body.gsb-projects .p-footer{padding-bottom:96px}
  /* the hero statistics read as four separate facts, not one block */
  .proj-hero-stats{row-gap:24px!important;column-gap:18px!important}
  .proj-hero-stats > div{border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
  .proj-hero-stats > div:nth-child(-n+2){border-top:0;padding-top:0}
}

@media(max-width:620px){
  /* the four hero facts fit their column instead of wrapping mid-phrase */
  .proj-hero-stats > div{padding-right:10px!important}
  .proj-hero-stats{grid-auto-rows:auto;align-items:start}
  .proj-hero-stats b{font-size:1.24rem!important;line-height:1.1;display:block;white-space:nowrap}
  .proj-hero-stats span{font-size:.74rem!important;line-height:1.3!important;display:block;margin-top:6px}
}

/* ------------------------------------- company details on invoices (console) */
.gsb-company-form .cform-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 18px;
  align-items:start;
  margin-bottom:18px;
}
.gsb-company-form .cform-paper{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  padding-top:18px;
  border-top:1px solid var(--line);
}
.gsb-company-form .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.gsb-company-form .span-2{grid-column:span 2}
.gsb-company-form .field-label{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
.gsb-company-form *{box-sizing:border-box}
.gsb-company-form input[type=text],
.gsb-company-form input:not([type]),
.gsb-company-form input[type=email],
.gsb-company-form select,
.gsb-company-form textarea{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  font:inherit;
  font-size:.92rem;
  color:var(--ink);
}
.gsb-company-form textarea{resize:vertical}
.gsb-company-form input[type=file]{
  min-height:0;
  padding:12px;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:#fff;
  font-size:.84rem;
}
.gsb-company-form .hint{margin:0;font-size:.78rem;color:var(--muted);line-height:1.45}
.gsb-company-form .doc-logo-now{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--stone);
}
.gsb-company-form .doc-logo-now img{display:block;background:#fff;padding:6px;border-radius:4px;max-height:64px;width:auto}
.gsb-company-form .doc-logo-now label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0!important;
  font-size:.82rem!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  font-weight:500!important;
  white-space:nowrap;
  color:var(--ink);
}
.gsb-company-form .doc-logo-now input[type=checkbox]{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--accent)}
.gsb-company-form .cform-actions{display:flex;justify-content:flex-end}
@media(max-width:1100px){
  .gsb-company-form .cform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gsb-company-form .cform-paper{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .gsb-company-form .cform-grid{grid-template-columns:minmax(0,1fr)}
  .gsb-company-form .span-2{grid-column:auto}
  .gsb-company-form .cform-actions .btn{width:100%;justify-content:center}
}

/* Stacked rows: a cell that holds two facts (address + postcode, email +
   username) puts the second fact under the first instead of beside it. */
@media(max-width:1080px){
  body.erp-admin .dash-main table.gsb-stack td{flex-wrap:wrap!important;row-gap:2px!important}
  body.erp-admin .dash-main table.gsb-stack td > small,
  body.erp-admin .dash-main table.gsb-stack td > .muted-sm,
  body.erp-admin .dash-main table.gsb-stack td > .acct-origin{
    flex:0 0 100%!important;
    text-align:right!important;
    font-size:.76rem!important;
    line-height:1.4;
  }
  body.erp-admin .dash-main table.gsb-stack td > br{display:none!important}
}

@media(max-width:1080px){
  /* values line up on the right on every line; labels stay on the left */
  body.erp-admin .dash-main table.gsb-stack td{justify-content:flex-end!important}
  body.erp-admin .dash-main table.gsb-stack td::before{margin-right:auto!important}
  /* the row's own title cell: name, then where the account came from */
  body.erp-admin .dash-main table.gsb-stack td:first-child{line-height:1.35}
  body.erp-admin .dash-main table.gsb-stack td:first-child .acct-origin{
    display:block!important;
    text-align:left!important;
    margin-top:3px;
  }
}

/* ---------------------------------------------- the quote button on a phone */
/* Below 1120 px the navigation is behind the menu button, so the quote belongs
   in that menu: as a header button it competed with the logo, the wishlist, the
   enquiry list and the account icon for a single row, and on a 390 px phone it
   pushed them into each other. */
header.site .universal-links .nav-quote{display:none}

@media(max-width:1120px){
  header.site .universal-actions .universal-quote{display:none!important}
  header.site .universal-links .nav-quote{
    display:block;
    margin:14px 0 16px;
    border-bottom:0!important;
  }
  header.site .universal-links .nav-quote a,
  html body header.site.universal-header .universal-links .nav-quote a{
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:48px;
    padding:0 18px!important;
    border:0!important;
    border-radius:var(--radius);
    background:var(--ink);
    color:#fff!important;
    font-size:.78rem!important;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-align:center;
  }
  header.site .universal-links .nav-quote a:hover{background:var(--accent);color:#fff!important}
  header.site .universal-links .nav-quote a::after{display:none!important}
  /* the remaining header icons never overflow their track */
  header.site .universal-actions{min-width:0}
  header.site .universal-nav{grid-template-columns:auto minmax(0,1fr) auto!important}
  /* a long menu on a short screen scrolls instead of running off it */
  html body header.site.universal-header .universal-links.open{
    max-height:calc(100dvh - 148px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:420px){
  header.site .universal-actions{gap:2px!important}
  header.site .universal-action{padding:6px 7px!important}
}

/* the utility bar: date, phone and email as tidy rows instead of one line that
   wraps around an orphaned separator */
@media(max-width:620px){
  .topbar .container{gap:2px!important}
  .topbar .tb-sep{display:none!important}
  .topbar .container > span:last-child{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:0 14px;
  }
  .topbar .container > span:last-child a{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
  }
}

@media(max-width:620px){
  /* the utility bar becomes three clean rows: the date, the phone, the email */
  .topbar .tb-emoji{display:none!important}
  .topbar .tb-contact{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:0!important;
  }
  .topbar .tb-contact a{min-height:40px;padding:0!important}
  .topbar .container{flex-direction:column!important;gap:0!important}
  .topbar .container > span[data-datetime]{min-height:36px;display:inline-flex;align-items:center}
}

@media(max-width:620px){
  .topbar .container > span[data-datetime]{gap:8px}
}

/* ── Roles & access ────────────────────────────────────────────────────────
   The capability matrix is a plain table with tall-free rows: without these
   rules it inherits the account table's stacked behaviour and grows to a
   screen per row. */
.roles-form{margin-top:12px}
.roles-form .table-wrap{overflow:auto}
table.roles-matrix{width:100%;border-collapse:collapse;min-width:520px}
table.roles-matrix th,table.roles-matrix td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.roles-matrix thead th{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
table.roles-matrix tbody tr:last-child td{border-bottom:0}
table.roles-matrix td:not(:first-child),table.roles-matrix th:not(:first-child){text-align:center}
.matrix-cell{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.matrix-cell input{appearance:auto;-webkit-appearance:auto;width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.matrix-cell:has(input:checked){color:var(--ink)}
.matrix-fixed{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.matrix-fixed b{font-size:.78rem;line-height:1;color:var(--accent)}
.matrix-cell span{pointer-events:none}
.matrix-cell .mc-off{display:inline}
.matrix-cell:has(input:checked) .mc-off{display:none}
.matrix-cell:has(input:checked) .mc-on{display:inline}
.matrix-cell:not(:has(input:checked)) .mc-on{display:none}
.roles-actions{margin-top:14px}


/* ── Project galleries ─────────────────────────────────────────────────────
   The strip under a case study, the lightbox it opens, and the editor grid
   used by both the console and the publishing desk. */
.gal-band{margin-top:34px}
.gal-head{margin-bottom:14px}
.gal-head h2{margin:6px 0 0;font-size:clamp(1.25rem,2.4vw,1.7rem)}
.gal-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gal-grid:has(.gal-item:nth-child(4)){grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.gal-item{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--stone-2);aspect-ratio:4/3;line-height:0}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .3s ease}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.045);filter:saturate(1.05)}
.gal-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gal-zoom{position:absolute;right:8px;bottom:8px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:rgba(8,34,43,.72);color:#fff;font-size:.7rem;line-height:1;opacity:0;transition:opacity .25s ease}
.gal-item:hover .gal-zoom,.gal-item:focus-visible .gal-zoom{opacity:1}

.gal-lightbox{position:fixed;inset:0;z-index:9000;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  background:rgba(6,20,25,.94);padding:clamp(12px,3vw,34px)}
.gal-lightbox[hidden]{display:none}
body.gal-open{overflow:hidden}
.gal-lightbox figure{margin:0;display:grid;place-items:center;gap:10px;text-align:center;max-height:100%}
.gal-lightbox img{max-width:100%;max-height:82vh;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.gal-lightbox figcaption{color:rgba(255,255,255,.78);font-size:.82rem;max-width:70ch}
.gal-close,.gal-prev,.gal-next{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:#fff;
  border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:1rem;cursor:pointer;transition:background .2s ease}
.gal-close:hover,.gal-prev:hover,.gal-next:hover{background:rgba(255,255,255,.16)}
.gal-close{position:absolute;top:14px;right:14px}
.gal-prev{justify-self:start}
.gal-next{justify-self:end}

/* editor: the pictures as pictures */
.gal-field{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:16px 0;background:var(--paper)}
.gal-field legend{padding:0 8px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gal-current img{max-width:220px;border-radius:8px;display:block;margin-bottom:8px}
.gal-none{display:inline-block;font-size:.8rem;color:var(--muted)}
.gal-edit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:10px 0}
.gal-edit-item{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--stone)}
.gal-edit-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gal-remove,.gal-promote{display:flex;gap:6px;align-items:center;font-size:.68rem;padding:5px 8px;color:var(--muted);cursor:pointer}
.gal-remove{border-top:1px solid var(--line)}
.gal-promote{border-top:1px solid var(--line);padding-bottom:7px}
.gal-remove input,.gal-promote input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer}
.desk-edit .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.desk-edit .field-row{grid-template-columns:1fr}}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}