/* Stoneline Heritage — Mobile App (PWA) styles
   Built on the site design tokens (tokens.css). Everything scoped under .stoneapp
   so it can sit inside an iOS bezel without leaking. */

.stoneapp {
  --safe-top: 56px;      /* status bar + dynamic island clearance */
  --safe-bottom: 34px;   /* home indicator */
  --tabbar-h: 60px;
  --callbar-h: 56px;
  --app-bg: var(--warm-white);
  --card-r: 6px;

  position: absolute;
  inset: 0;
  background: var(--app-bg);
  color: var(--ink-70);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.stoneapp *, .stoneapp *::before, .stoneapp *::after { box-sizing: border-box; }
.stoneapp h1, .stoneapp h2, .stoneapp h3, .stoneapp h4 {
  font-family: var(--serif);
  color: var(--soft-black);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.stoneapp p { margin: 0; text-wrap: pretty; }
.stoneapp button { font-family: inherit; cursor: pointer; }

/* ---------- Scroll viewport ---------- */
.sa-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  container-type: size;   /* lets the hero size to the device viewport (100cqh) */
}
.sa-view::-webkit-scrollbar { display: none; }
.sa-pad-bottom { height: 92px; }
.sa-pad-bottom.no-tabs { height: 82px; }

/* ---------- Eyebrow / labels ---------- */
.sa-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sa-eyebrow::before {
  content: "";
  width: 18px; height: 1px; background: var(--accent);
  display: inline-block;
}
.sa-mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  text-transform: uppercase;
}

/* ---------- Placeholder images ---------- */
.sa-ph {
  position: relative;
  background: var(--stone-grey);
  background-image:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 11px);
  overflow: hidden;
}
.sa-ph[data-tone="sandstone"] { background-color: var(--sandstone); }
.sa-ph[data-tone="stone"]     { background-color: var(--stone-grey); }
.sa-ph[data-tone="brick"]     { background-color: #b08763; }
.sa-ph[data-tone="facade"]    { background-color: #c2bcae; }
.sa-ph[data-tone="mortar"]    { background-color: #cfc4ad; }
.sa-ph[data-tone="limewash"]  { background-color: var(--limewash); }
.sa-ph[data-tone="charcoal"]  { background-color: #3a3733; }
.sa-ph[data-tone="green"]     { background-color: var(--heritage-green); }
.sa-ph .sa-ph-label {
  position: absolute;
  left: 10px; bottom: 9px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: rgba(0,0,0,0.28);
  padding: 3px 7px;
  border-radius: 2px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  max-width: calc(100% - 20px);
}
.sa-ph[data-tone="limewash"] .sa-ph-label,
.sa-ph[data-tone="sandstone"] .sa-ph-label { color: rgba(255,255,255,0.92); }

/* ---------- Buttons ---------- */
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 20px; border: none; border-radius: 3px;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .12s var(--ease), opacity .2s;
}
.sa-btn:active { transform: scale(0.98); }
.sa-btn--block { width: 100%; }
.sa-btn--outline {
  background: transparent; color: var(--soft-black);
  border: 1px solid var(--rule-2);
}
.sa-btn--ghost { background: transparent; color: var(--soft-black); padding-inline: 0; }
.sa-btn .sa-arrow { transition: transform .2s var(--ease); }
.sa-btn:active .sa-arrow { transform: translateX(3px); }

/* ---------- Section scaffolding ---------- */
.sa-sect { padding: 32px 20px; }
.sa-sect--tight { padding: 22px 20px; }
.sa-sect-head { margin-bottom: 18px; }
.sa-sect-head h2 { font-size: 26px; margin-top: 12px; }
.sa-sect-head p { margin-top: 10px; color: var(--ink-55); font-size: 13.5px; }
.sa-rule { height: 1px; background: var(--rule); width: 100%; }

/* ---------- Horizontal scroller ---------- */
.sa-hscroll {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -20px; padding: 2px 20px 8px;
  scrollbar-width: none;
}
.sa-hscroll::-webkit-scrollbar { display: none; }
.sa-hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---------- Service card (carousel) ---------- */
.sa-svc-card {
  width: 230px; background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--card-r); overflow: hidden;
  text-align: left; display: flex; flex-direction: column;
  transition: transform .12s var(--ease);
}
.sa-svc-card:active { transform: scale(0.985); }
.sa-svc-card .sa-ph { height: 138px; }
.sa-svc-card .body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.sa-svc-card .num { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: .1em; }
.sa-svc-card h3 { font-size: 19px; }
.sa-svc-card p { font-size: 12.5px; color: var(--ink-55); line-height: 1.45; }

/* ---------- Services list rows ---------- */
.sa-list { display: flex; flex-direction: column; }
.sa-list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; background: transparent;
  border: none; border-bottom: 1px solid var(--rule);
  text-align: left; width: 100%;
}
.sa-list-row:active { background: var(--ink-04); }
.sa-list-row .thumb { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 4px; }
.sa-list-row .meta { flex: 1; min-width: 0; }
.sa-list-row .num { font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: .1em; }
.sa-list-row h3 { font-size: 18px; margin-top: 3px; }
.sa-list-row p { font-size: 12px; color: var(--ink-55); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-list-row .chev { color: var(--ink-25); flex: 0 0 auto; }

/* ---------- Accordion ---------- */
.sa-acc { border-top: 1px solid var(--rule); }
.sa-acc-item { border-bottom: 1px solid var(--rule); }
.sa-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 17px 0; background: transparent; border: none; text-align: left;
}
.sa-acc-head h4 { font-size: 18px; }
.sa-acc-head .ico {
  width: 22px; height: 22px; flex: 0 0 auto; position: relative; color: var(--accent);
}
.sa-acc-head .ico::before, .sa-acc-head .ico::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  transition: transform .25s var(--ease), opacity .2s;
}
.sa-acc-head .ico::before { top: 10px; left: 3px; width: 16px; height: 1.5px; }
.sa-acc-head .ico::after  { left: 10px; top: 3px; width: 1.5px; height: 16px; }
.sa-acc-item[data-open="1"] .ico::after { transform: scaleY(0); opacity: 0; }
.sa-acc-panel { overflow: hidden; transition: height .28s var(--ease); }
.sa-acc-panel .inner { padding: 0 0 18px; color: var(--ink-55); font-size: 13.5px; line-height: 1.6; }
.sa-acc-panel .inner ul { margin: 8px 0 0; padding-left: 18px; }
.sa-acc-panel .inner li { margin-bottom: 5px; }

/* ---------- Chips ---------- */
.sa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
.sa-chips--scroll::-webkit-scrollbar { display: none; }
.sa-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 13px; border: 1px solid var(--rule-2); border-radius: 999px;
  font-size: 12px; color: var(--ink-70); background: #fff;
}
.sa-chip .sw { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); flex: 0 0 auto; }

/* ---------- (Trust strip removed) ---------- */

/* ---------- Process steps ---------- */
.sa-steps { display: flex; flex-direction: column; }
.sa-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.sa-step:last-child { border-bottom: none; }
.sa-step .n {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px;
}
.sa-step h4 { font-size: 17px; }
.sa-step p { font-size: 12.5px; color: var(--ink-55); margin-top: 4px; line-height: 1.45; }

/* ---------- Hero ---------- */
.sa-hero { position: relative; height: 100cqh; min-height: 560px; }
.sa-hero .sa-ph { position: absolute; inset: 0; height: 100%; }
.sa-hero .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,.36) 0%, rgba(17,17,17,0) 30%, rgba(17,17,17,.08) 55%, rgba(17,17,17,.78) 100%);
}
.sa-hero .content {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px 124px; color: #fff;
}
.sa-hero .content .sa-eyebrow { color: rgba(255,255,255,.85); }
.sa-hero .content .sa-eyebrow::before { display: none; }
.sa-hero h1 { color: #fff; font-size: 40px; line-height: 1.02; letter-spacing: -0.02em; }
.sa-hero .lede { color: rgba(255,255,255,.86); font-size: 14px; margin-top: 12px; max-width: 300px; }
.sa-hero .hero-cta { display: flex; gap: 10px; margin-top: 52px; }
/* Home logo lives in the hero (scrolls with the page — does not stick) */
.sa-hero-brand { position: absolute; top: 22px; left: 20px; z-index: 5; }

/* ---------- Page hero (interior) ---------- */
.sa-phero { padding: calc(var(--safe-top) + 54px) 20px 4px; }
.sa-phero .crumb { font-size: 11px; color: var(--ink-40); display: flex; gap: 7px; align-items: center; margin-bottom: 14px; }
.sa-phero .crumb b { color: var(--accent); font-weight: 600; }
.sa-phero h1 { font-size: 34px; }
.sa-phero .lede { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-70); margin-top: 12px; line-height: 1.4; }

/* ---------- Detail hero image ---------- */
.sa-detail-img { height: 260px; margin-top: 0; }

/* ---------- Service hero video ---------- */
.sa-svideo { position: relative; width: 100%; height: 260px; background: var(--stone-grey); overflow: hidden; }
.sa-svideo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-svideo-replay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  background: rgba(20,18,14,0.62); color: #fff; border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 10px 16px; cursor: pointer; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.sa-svideo-replay span { opacity: 0.9; }
.sa-svideo-replay:active { transform: translate(-50%, -50%) scale(0.96); }

/* ---------- Top bar (interior screens) ---------- */
.sa-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 10px; pointer-events: none;
}
.sa-iconbtn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.82); color: var(--soft-black);
  border: 1px solid var(--rule); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.sa-topbar .sa-iconbtn { pointer-events: auto; }
.sa-topbar-left { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
/* Logo button reset — applies in the top bar and the expanded menu (no border/box). */
.sa-homelink { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; outline: none; transition: opacity .2s ease; }
.sa-topbar .sa-homelink { pointer-events: auto; }
/* The logo is not sticky: it fades out once scrolled, leaving only the burger. */
.sa-topbar .sa-homelink.hidden { opacity: 0; pointer-events: none; }
/* Menu logo + close share one row at the top of the scroll body (scrolls away, not sticky). */
.sa-menu-head { display: flex; align-items: center; justify-content: space-between; padding-top: calc(env(safe-area-inset-top, 0px) + 8px); margin-bottom: 10px; }
.sa-menu-logo { flex: none; }
.sa-iconbtn--dark { background: rgba(20,18,14,0.34); color: #fff; border-color: rgba(255,255,255,.18); }
.sa-iconbtn:active { transform: scale(0.94); }

/* ---------- Back-to-top (all screens) ---------- */
.sa-totop {
  position: absolute; right: 16px; bottom: 96px; z-index: 45;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft-black); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.sa-totop[data-show="1"] { opacity: 1; transform: none; pointer-events: auto; }
.sa-totop:active { transform: scale(.94); }

/* ---------- Bottom tab bar ---------- */
.sa-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 8px 14px;
  background: rgba(247,244,239,0.9);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--rule);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
}
.sa-tab {
  background: transparent; border: none; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 4px 0; color: var(--ink-40);
}
.sa-tab .lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; }
.sa-tab[data-active="1"] { color: var(--accent); }
.sa-tab svg { display: block; }

/* ---------- Call tab variants ---------- */
.sa-tab--call { position: relative; }
/* raised FAB */
.sa-tabbar[data-call="raised"] { overflow: visible; }
.sa-tab--call.raised { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--accent); }
.sa-tab--call.raised .fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  margin-top: -28px; border: 4px solid var(--app-bg);
  box-shadow: 0 8px 18px rgba(154,122,69,.45), 0 2px 5px rgba(0,0,0,.18);
  transition: transform .12s var(--ease);
}
.sa-tab--call.raised:active .fab { transform: scale(0.93); }
.sa-tab--call.raised .fab svg { width: 25px; height: 25px; }
.sa-tab--call.raised .lbl { font-weight: 700; color: var(--accent); }
/* pill */
.sa-tab--call.pill { display: flex; align-items: center; justify-content: center; }
.sa-tab--call.pill .pill-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 18px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 5px 14px rgba(154,122,69,.4);
  transition: transform .12s var(--ease);
}
.sa-tab--call.pill:active .pill-btn { transform: scale(0.95); }
.sa-tab--call.pill .pill-btn svg { width: 18px; height: 18px; }
/* highlight chip */
.sa-tab--call.highlight { display: flex; align-items: center; justify-content: center; }
.sa-tab--call.highlight .chip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 16px; border-radius: 14px;
  box-shadow: 0 4px 12px rgba(154,122,69,.36);
  transition: transform .12s var(--ease);
}
.sa-tab--call.highlight:active .chip { transform: scale(0.95); }
.sa-tab--call.highlight .chip svg { width: 21px; height: 21px; }
.sa-tab--call.highlight .chip .lbl { font-weight: 700; color: var(--accent-ink); }

/* ---------- Call bottom sheet ---------- */
.sa-sheet-backdrop {
  position: absolute; inset: 0; z-index: 54; background: rgba(17,17,17,.42);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.sa-sheet-backdrop[data-open="1"] { opacity: 1; pointer-events: auto; }
.sa-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--app-bg); border-radius: 20px 20px 0 0;
  padding: 12px 24px calc(var(--safe-bottom) + 22px);
  transform: translateY(110%); transition: transform .32s var(--ease);
  box-shadow: 0 -12px 44px rgba(0,0,0,.22);
}
.sa-sheet[data-open="1"] { transform: none; }
.sa-sheet .grab { width: 40px; height: 4px; border-radius: 999px; background: var(--ink-25); margin: 0 auto 20px; }
.sa-sheet .sh-ic { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sa-sheet .sh-ic svg { width: 24px; height: 24px; }
.sa-sheet h3 { text-align: center; font-size: 23px; }
.sa-sheet .num { text-align: center; font-family: var(--mono); font-size: 13px; color: var(--ink-55); margin-top: 8px; letter-spacing: .04em; }
.sa-sheet .sh-sub { text-align: center; font-size: 12px; color: var(--ink-40); margin-top: 6px; }
.sa-sheet .acts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.sa-sheet .acts .sa-btn svg { width: 16px; height: 16px; }

/* ---------- Sticky call/quote bar (Direction B) ---------- */
.sa-callbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 14px 16px;
  background: rgba(247,244,239,0.92);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--rule);
  display: flex; gap: 10px; align-items: center;
}
.sa-callbar .sa-btn { flex: 1; padding: 13px 16px; }
.sa-callbar .call {
  width: 50px; height: 48px; flex: 0 0 auto; border-radius: 3px;
  border: 1px solid var(--rule-2); background: #fff; color: var(--soft-black);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Floating menu button (Direction B) ---------- */
.sa-fab {
  position: absolute; top: calc(var(--safe-top) - 6px); right: 14px; z-index: 35;
}

/* ---------- Full-screen menu ---------- */
.sa-menu {
  position: absolute; inset: 0; z-index: 60;
  background: var(--app-bg);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease);
}
.sa-menu[data-open="1"] { opacity: 1; pointer-events: auto; }
.sa-menu--dark { background: #1a1815; color: rgba(255,255,255,.86); }
.sa-menu-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 18px 10px;
}
.sa-menu-top .brand { display: flex; flex-direction: column; }
.sa-menu-top .brand b { font-family: var(--serif); font-size: 19px; color: var(--soft-black); font-weight: 500; }
.sa-menu-top .brand small { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); margin-top: 2px; }
.sa-menu--dark .brand b { color: #fff; }
.sa-menu--dark .brand small { color: rgba(255,255,255,.5); }
.sa-menu-body { flex: 1; overflow-y: auto; padding: 4px 18px calc(var(--safe-bottom) + 18px); scrollbar-width: none; }
.sa-menu-body::-webkit-scrollbar { display: none; }
.sa-menu-section-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-40); margin: 22px 0 12px;
}

/* menu layout: editorial links */
.sa-menu-links { display: flex; flex-direction: column; }
.sa-menu-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
  background: transparent; border-left: none; border-right: none; border-top: none; text-align: left; width: 100%;
}
.sa-menu-link .t { font-family: var(--serif); font-size: 27px; color: var(--soft-black); font-weight: 500; letter-spacing: -.01em; }
.sa-menu--dark .sa-menu-link .t { color: #fff; }
.sa-menu--dark .sa-menu-link { border-color: rgba(255,255,255,.12); }
.sa-menu-link .n { font-family: var(--mono); font-size: 10px; color: var(--ink-40); }
.sa-menu-link:active .t { color: var(--accent); }

/* menu layout: visual tiles */
.sa-menu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-menu-tile {
  position: relative; border-radius: var(--card-r); overflow: hidden; height: 124px;
  border: none; padding: 0; text-align: left; display: block;
}
.sa-menu-tile .sa-ph { position: absolute; inset: 0; height: 100%; }
.sa-menu-tile .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0) 35%, rgba(17,17,17,.72) 100%); }
.sa-menu-tile .cap { position: absolute; left: 12px; right: 12px; bottom: 11px; color: #fff; }
.sa-menu-tile .cap .n { font-family: var(--mono); font-size: 9px; opacity: .8; letter-spacing: .08em; }
.sa-menu-tile .cap .t { font-family: var(--serif); font-size: 17px; line-height: 1.08; margin-top: 3px; }
.sa-menu-tile--wide { grid-column: 1 / -1; height: 110px; }

/* menu layout: icon grid */
.sa-menu-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sa-menu-gcard {
  border: 1px solid var(--rule); border-radius: var(--card-r); background: #fff;
  padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.sa-menu--dark .sa-menu-gcard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.sa-menu-gcard .ic { width: 30px; height: 30px; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.sa-menu-gcard .t { font-size: 11px; font-weight: 600; color: var(--soft-black); letter-spacing: .01em; line-height: 1.2; }
.sa-menu--dark .sa-menu-gcard .t { color: #fff; }

/* menu quick actions */
.sa-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.sa-menu-action {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border: 1px solid var(--rule); border-radius: var(--card-r); background: #fff; text-align: left;
  color: var(--soft-black);
}
.sa-menu--dark .sa-menu-action { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #fff; }
.sa-menu-action.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); grid-column: 1 / -1; }
.sa-menu-action .ic { color: var(--accent); display: flex; }
.sa-menu-action.primary .ic { color: var(--accent-ink); }
.sa-menu-action .tx { display: flex; flex-direction: column; }
.sa-menu-action .tx b { font-size: 13px; font-weight: 600; }
.sa-menu-action .tx span { font-size: 10.5px; opacity: .7; font-family: var(--mono); letter-spacing: .04em; }

/* menu featured project */
.sa-menu-feature {
  position: relative; border-radius: var(--card-r); overflow: hidden; height: 150px; margin-top: 4px; display: block; border: none; padding: 0; width: 100%; text-align: left;
}
.sa-menu-feature .sa-ph { position: absolute; inset: 0; height: 100%; }
.sa-menu-feature .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.1) 0%, rgba(17,17,17,.7) 100%); }
.sa-menu-feature .cap { position: absolute; left: 14px; right: 14px; bottom: 13px; color: #fff; }
.sa-menu-feature .cap .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; opacity: .85; }
.sa-menu-feature .cap .t { font-family: var(--serif); font-size: 20px; margin-top: 4px; }

/* ---------- Before/after compare slider ---------- */
.sa-compare { position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: var(--card-r); user-select: none; touch-action: pan-y; }
.sa-compare .layer { position: absolute; inset: 0; height: 100%; }
.sa-compare .after { z-index: 1; }
.sa-compare .before { z-index: 2; }
.sa-compare .tag {
  position: absolute; top: 12px; z-index: 4;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(17,17,17,.55); padding: 4px 9px; border-radius: 2px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sa-compare .tag.l { left: 12px; }
.sa-compare .tag.r { right: 12px; }
.sa-compare .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; z-index: 3; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.sa-compare .knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center; color: var(--soft-black);
}

/* ---------- Form (Request assessment) ---------- */
.sa-field { margin-bottom: 16px; }
.sa-field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 7px; }
.sa-input, .sa-textarea, .sa-select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--rule-2); border-radius: 3px;
  background: #fff; font-family: var(--sans); font-size: 15px; color: var(--soft-black);
  -webkit-appearance: none; appearance: none;
}
.sa-input:focus, .sa-textarea:focus, .sa-select:focus { border-color: var(--accent); }
.sa-textarea { min-height: 96px; resize: none; line-height: 1.5; }
.sa-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%239A7A45' d='M0 0h10L5 6z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.sa-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--rule-2); border-radius: 3px; overflow: hidden; }
.sa-seg button { background: #fff; border: none; border-right: 1px solid var(--rule); padding: 12px 6px; font-size: 12px; color: var(--ink-55); }
.sa-seg button:last-child { border-right: none; }
.sa-seg button[data-on="1"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.sa-dropzone {
  border: 1.5px dashed var(--rule-2); border-radius: var(--card-r); padding: 22px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--ink-04); color: var(--ink-55);
}
.sa-dropzone .ic { color: var(--accent); }
.sa-dropzone .t { font-size: 13px; font-weight: 600; color: var(--soft-black); }
.sa-dropzone .s { font-size: 11px; }
.sa-photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sa-photos .p { width: 64px; height: 64px; border-radius: 4px; position: relative; }
.sa-photos .p .x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--soft-black); color: #fff; border: none; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.sa-photos .add { width: 64px; height: 64px; border-radius: 4px; border: 1.5px dashed var(--rule-2); background: #fff; color: var(--ink-40); display: flex; align-items: center; justify-content: center; }

/* ---------- Misc ---------- */
.sa-fade { animation: saFade .32s var(--ease); }
@keyframes saFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sa-intro-quote { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--ink-70); }
.sa-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--card-r); overflow: hidden; }
.sa-area { background: var(--app-bg); padding: 14px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; border: none; }
.sa-area .pre { font-family: var(--mono); font-size: 9px; color: var(--accent); margin-right: 7px; }
.sa-area span.nm { font-size: 13px; color: var(--soft-black); }
.sa-area:active { background: var(--ink-04); }
.sa-value-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.sa-value-row:last-child { border-bottom: none; }
.sa-value-row .n { font-family: var(--mono); font-size: 11px; color: var(--accent); flex: 0 0 28px; }
.sa-value-row h4 { font-size: 17px; }
.sa-value-row p { font-size: 12.5px; color: var(--ink-55); margin-top: 4px; line-height: 1.5; }
.sa-success {
  position: absolute; inset: 0; z-index: 70; background: var(--app-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center;
}
.sa-success .badge { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; }

/* ---------- Projects — Concept B (full-bleed immersive) ---------- */
.cb-projects { background: var(--warm-white); }
.cb-proj + .cb-proj { border-top: 1px solid rgba(34,34,34,.10); }
.cb-hero { position: relative; height: 540px; background: #111; overflow: hidden; }
.cb-hero.first { height: 620px; }
.cb-gal { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cb-gal::-webkit-scrollbar { display: none; }
.cb-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.cb-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12,11,9,.34) 0%, transparent 24%, transparent 44%, rgba(12,11,9,.86) 100%); }
.cb-mast { position: absolute; top: calc(var(--safe-top) + 108px); left: 22px; right: 22px; text-align: center; color: #fff; pointer-events: none; }
.cb-mast .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.cb-mast h2 { font-family: var(--serif); font-weight: 500; font-size: 50px; line-height: .98; margin: 14px 0 0; color: #fff; }
.cb-htitle { position: absolute; left: 22px; right: 22px; bottom: 46px; color: #fff; pointer-events: none; }
.cb-htitle .num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.72); }
.cb-htitle h3 { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.02; margin: 9px 0 11px; color: #fff; }
.cb-htitle .m { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.cb-dots { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; gap: 5px; justify-content: center; z-index: 4; pointer-events: none; }
.cb-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); transition: .25s; }
.cb-dots i.on { background: #fff; width: 17px; border-radius: 3px; }
.cb-zbtn { position: absolute; bottom: 42px; right: 22px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cb-body { padding: 30px 22px 6px; background: var(--warm-white); }
.cb-block { margin-bottom: 22px; }
.cb-block h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); margin: 0 0 10px; }
.cb-block p { font-size: 14.5px; line-height: 1.62; color: var(--ink-70); margin: 0; }
.cb-striplab { padding: 6px 22px 0; background: var(--warm-white); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); }
.cb-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 22px 30px; background: var(--warm-white); }
.cb-strip::-webkit-scrollbar { display: none; }
.cb-plate { position: relative; flex: 0 0 128px; height: 92px; border-radius: 10px; overflow: hidden; cursor: zoom-in; border: 0; padding: 0; background: #d8d3cb; }
.cb-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-plate .pn { position: absolute; left: 8px; bottom: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cb-endcta { background: #171512; color: #fff; padding: 44px 22px 54px; text-align: center; }
.cb-endcta .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #C8B28B; }
.cb-endcta h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.05; margin: 14px 0 20px; color: #fff; }
.cb-endcta button { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: #111; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 14px 22px; border-radius: 3px; border: 0; cursor: pointer; }

.cb-lb { position: fixed; inset: 0; z-index: 5000; background: rgba(10,9,8,.96); display: flex; flex-direction: column; animation: cb-fin .2s ease; }
@keyframes cb-fin { from { opacity: 0; } to { opacity: 1; } }
.cb-lb-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + 8px) 20px 6px; color: #fff; }
.cb-lb-top .ix { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.cb-lb-top .x { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cb-lb-gal { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: center; }
.cb-lb-gal::-webkit-scrollbar { display: none; }
.cb-lb-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; padding: 0 16px; }
.cb-lb-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; transition: transform .3s cubic-bezier(.2,.7,.2,1); cursor: zoom-in; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.cb-lb-slide.zoom img { transform: scale(2.1); cursor: zoom-out; }
.cb-lb-cap { padding: 12px 22px calc(var(--safe-bottom) + 22px); text-align: center; color: rgba(255,255,255,.9); font-family: var(--serif); font-size: 19px; min-height: 74px; }
.cb-lb-cap small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 7px; }

/* ---------- Mobile site host (StoneApp = the phone-width site) ---------- */
.sa-fullscreen { position: fixed; inset: 0; background: var(--warm-white); overflow: hidden; z-index: 1; }