:root, [data-theme="light"] {
  --text-strong: #191816; /* Headlines, labels and emphasized text on any light surface (14.7:1 on sand). */
  --text-body: #3f3f3f; /* Running copy on white, mist, snow and sand (8.7:1 on sand). */
  --text-muted: #66635f; /* Captions, hints and metadata: 6:1 on white, 5.3:1 on mist, 5:1 on sand. */
  --text-inverse: #ffffff; /* Text on terracotta buttons and the rare dark band or button. */
  --text-inverse-muted: var(--surface-taupe); /* Secondary text on ink bands (Stat labels), 10:1. */
  --text-accent: var(--accent); /* Links and small accent text on white, 4.6:1. On mist or sand use text-accent-strong. */
  --text-accent-strong: var(--accent-hover); /* Small accent text on sand, mist or the terracotta tint (4.5:1+): eyebrows on tinted bands, the Toast "Note" word, accent badges. */
  --surface-page: #ffffff; /* Default page ground. */
  --surface-card: var(--surface-page); /* Card ground, with a border-subtle hairline. */
  --surface-soft: #f9f9f9; /* Softest light surface; hover on white controls. */
  --surface-alt: #f1f2f2; /* Mist: alternating full-bleed band, mist Card tone, disabled controls. */
  --surface-sand: #efe9e3; /* Warm sand band, card, Toast and the selected option tile. */
  --surface-taupe: #cfc1b5; /* The main warm color: deeper panels, image placeholders, soft bands. */
  --surface-slate: #2f3e46; /* Slate, the supporting dark: feature bands, PromiseBar, PressBand, Step circles. White text 11:1. */
  --surface-sky: #dde5ea; /* Light slate band (nonprofit callout). Eyebrows use text-accent-sky. */
  --text-accent-sky: #9a4b27; /* Terracotta eyebrow text on surface-sky, 4.8:1. */
  --surface-hunter: #355e3b; /* Hunter green, GuidesTicker only. White text 7.5:1. */
  --surface-mustard: #f4ebcf; /* Mustard tint behind the mustard Badge. */
  --surface-dark: var(--text-strong); /* Ink fill: the rare dark band, dark button, selected Tag, checked Checkbox and Tooltip. Avoid large dark areas. */
  --surface-dark-hover: var(--text-body); /* Hover for ink fills. */
  --accent: #b85b2d; /* Terracotta, the single accent, used softly: one primary button per view, eyebrows, the active tab, the selected radio. White text on it is 4.6:1. Never large fills or backgrounds. */
  --accent-hover: #a3502a; /* Hover and pressed terracotta (white text 5.6:1). */
  --accent-soft: #f7e3d8; /* Terracotta tint: text selection and the accent Badge ground. */
  --border-subtle: #e7e8e9; /* Default hairline for cards and dividers. */
  --border-warm: var(--surface-taupe); /* Warm decorative borders: Toast, Dialog close hover, featured rules. */
  --control-border: #8a7f75; /* Outlines of text fields, dropdowns, checkboxes, radios, tags and the switch's off track: 3.9:1 on white, 3.2:1 on sand. */
  --border-strong: var(--text-strong); /* Outline buttons, focused fields and the selected Tag border. */
  --focus-ring: var(--text-strong); /* Focus outline: 2px solid, 2px out from the control, on every clickable element. */
  --focus-halo: var(--surface-mustard); /* Soft halo around a focused field, outside its ink border. */
  --star: #ff9900; /* ★ rating glyphs, 4:1 on white. */
  --success: #5e7a5b; /* Success dots and marks. */
  --success-text: #4b6349; /* Small success text on sand or tints (Toast "Sent", success Badge), 5.2:1+. */
  --danger: #b23b2e; /* Error text, field errors and the Toast "Oops" word (5.9:1 on white, 4.9:1 on sand). Always with words. */
  --overlay: rgba(239,233,227,0.78); /* Dialog background fade: warm sand at 78%, never dark. */
  --shadow-sm: 0 1px 2px rgba(25,24,22,0.06); /* Tooltip. */
  --shadow-md: 0 6px 20px rgba(25,24,22,0.08); /* Toast. */
  --shadow-lg: 0 18px 48px rgba(25,24,22,0.14); /* Dialog. */
}
:root {
  --space-1: 4px; /* Icon gaps. */
  --space-2: 8px; /* Tight stacks. */
  --space-3: 12px; /* Label to field. */
  --space-4: 16px; /* Default gap. */
  --space-5: 24px; /* Card padding, gutters. */
  --space-6: 32px; /* Between groups. */
  --space-7: 48px; /* Between blocks in a section. */
  --space-8: 64px; /* Large breaks. */
  --space-9: 96px; /* Section vertical padding. */
  --space-10: 128px; /* Hero padding. */
  --container: 1200px; /* Max content width. */
  --container-narrow: 760px; /* Reading-width column. */
  --gutter: 24px; /* Side gutter. */
  --section-y: 96px; /* Tall photo splits only. Regular bands use band-y. */
  --band-y: 56px; /* Band padding, desktop. */
  --band-y-sm: 44px; /* Band padding, phones (720px and narrower). */
  --gutter-sm: 16px; /* Side gutter, phones (600px and narrower). */
  --radius-0: 0; /* Default for buttons, inputs, cards and dialogs: the brand is square. */
  --radius-sm: 2px; /* Checkbox corners. */
  --radius-md: 4px; /* Rare small softening. */
  --radius-lg: 8px; /* Rare; avoid on brand surfaces. */
  --radius-pill: 999px; /* Tags and round icon buttons only. */
  --font-display: "roca", "Roca", Georgia, "Times New Roman", serif;
  --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-display: 400 64px/1.1 var(--font-display); /* Hero headline only. */
  --text-h1: 400 48px/1.1 var(--font-display); /* Page and section headlines. */
  --text-h2: 400 36px/1.25 var(--font-display); /* Section statements and story headings. */
  --text-h3: 400 26px/1.25 var(--font-display); /* Card titles, step titles, dialog titles. */
  --text-h4: 400 20px/1.25 var(--font-display); /* Small headings and review quotes. */
  --text-caps-heading: 400 26px/1.25 var(--font-display); /* ALL CAPS serif section statements. */
  --text-lead: 400 20px/1.6 var(--font-body); /* Intro paragraph under a headline. */
  --text-small: 400 15px/1.6 var(--font-body); /* Card copy and secondary text. */
  --text-caption: 400 13px/1.4 var(--font-body); /* Hints and metadata. */
  --text-eyebrow: 700 13px/1.4 var(--font-body); /* Tracked caps for CTAs, nav and eyebrows. Write in normal case and uppercase with CSS. */
}
.display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
}
.h4 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
}
.caps-heading {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.lead {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.32em;
}






/* Values the token table cannot hold (weights, sizes, tracking, type shorthands, motion) plus base element styles. */
:root{
--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:900;
--fs-display:64px;--fs-h1:48px;--fs-h2:36px;--fs-h3:26px;--fs-h4:20px;
--fs-lead:20px;--fs-body:17px;--fs-small:15px;--fs-caption:13px;--fs-eyebrow:13px;
--lh-tight:1.1;--lh-snug:1.25;--lh-body:1.6;
--ls-caps:0.32em;--ls-caps-tight:0.14em;--ls-display:-0.01em;
--fw-heading:400;
--type-display:var(--fw-heading) var(--fs-display)/var(--lh-tight) var(--font-display);
--type-h1:var(--fw-heading) var(--fs-h1)/var(--lh-tight) var(--font-display);
--type-h2:var(--fw-heading) var(--fs-h2)/var(--lh-snug) var(--font-display);
--type-h3:var(--fw-heading) var(--fs-h3)/var(--lh-snug) var(--font-display);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
--type-eyebrow:var(--fw-bold) var(--fs-eyebrow)/1.4 var(--font-body);
--border-hair:1px solid var(--border-subtle);
--ease-out:cubic-bezier(.2,.7,.2,1);
--dur-fast:150ms;--dur-base:240ms;--dur-slow:480ms;
}
body{font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:var(--fw-heading);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--text-strong)}
::selection{background:var(--accent-soft)}

/* Radio: option tile (default) and plain. The whole row is clickable. */
.js-radio{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--text-strong);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.js-radio input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.js-radio__circle{width:20px;height:20px;flex:none;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--control-border);background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--dur-fast) var(--ease-out)}
.js-radio__circle::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--dur-fast) var(--ease-out)}
.js-radio input:checked + .js-radio__circle{border-color:var(--accent)}
.js-radio input:checked + .js-radio__circle::after{transform:scale(1)}
.js-radio__hint{display:block;font-size:13px;color:var(--text-muted);margin-top:2px}
.js-radio--tile{width:100%;box-sizing:border-box;min-height:56px;padding:12px 16px;border:1px solid var(--control-border);background:var(--surface-card)}
.js-radio--tile:hover{background:var(--surface-soft)}
.js-radio--tile:has(input:checked){background:var(--surface-sand);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.js-radio--row{width:100%;box-sizing:border-box;min-height:52px;padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
.js-radio--row:first-child{border-top:1px solid var(--border-subtle)}
.js-radio--row:hover{background:var(--surface-soft)}
.js-radio--row .js-radio__circle{width:26px;height:26px}
.js-radio--row .js-radio__circle::after{width:12px;height:12px}
.js-radio--plain{display:inline-flex;gap:12px;padding:6px 0;color:var(--text-body)}
.js-radio:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.js-radio[data-disabled]{cursor:not-allowed;color:var(--text-strong);background:var(--surface-alt)}
.js-radio[data-disabled] .js-radio__circle{border-color:var(--border-subtle);background:var(--surface-alt)}
@media (prefers-reduced-motion:reduce){.js-radio,.js-radio__circle,.js-radio__circle::after{transition:none}}

/* Checkbox: big rows (default) or plain. Native input stays focusable; the whole row is clickable. */
.js-check{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--text-strong);transition:background var(--dur-fast) var(--ease-out)}
.js-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.js-check__box{width:26px;height:26px;flex:none;box-sizing:border-box;border-radius:var(--radius-sm);border:1.5px solid var(--control-border);background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast),border-color var(--dur-fast)}
.js-check__box::after{content:"";width:7px;height:13px;border:solid var(--text-inverse);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-2px) scale(0);transition:transform var(--dur-fast)}
.js-check input:checked + .js-check__box{background:var(--accent);border-color:var(--accent)}
.js-check input:checked + .js-check__box::after{transform:rotate(45deg) translate(-1px,-2px) scale(1)}
.js-check__hint{display:block;font-size:13px;color:var(--text-muted);margin-top:2px}
.js-check--row{width:100%;box-sizing:border-box;min-height:52px;padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
.js-check--row:first-child{border-top:1px solid var(--border-subtle)}
.js-check--row:hover{background:var(--surface-soft)}
.js-check--plain{display:inline-flex;gap:12px;padding:6px 0;color:var(--text-body)}
.js-check--plain .js-check__box{width:20px;height:20px}
.js-check--plain .js-check__box::after{width:5px;height:10px;transform:rotate(45deg) translate(-1px,-1px) scale(0)}
.js-check--plain input:checked + .js-check__box::after{transform:rotate(45deg) translate(-1px,-1px) scale(1)}
.js-check:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.js-check[data-disabled]{cursor:not-allowed;color:var(--text-strong);background:var(--surface-alt)}
.js-check[data-disabled] .js-check__box{background:var(--surface-alt);border-color:var(--border-subtle)}

/* Review card and featured review carousel. */
.js-review{margin:0;display:grid;grid-template-columns:170px minmax(0,1fr);gap:32px;background:var(--surface-card);padding:32px 36px;font-family:var(--font-body)}
.js-review__who{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.js-review__avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.js-review__initial{border:1.5px solid var(--control-border);background:var(--surface-card);color:var(--text-strong);font-family:var(--font-display);font-weight:var(--fw-heading);font-size:38px;line-height:1}
.js-review__name{font-weight:700;font-size:17px;line-height:1.3;color:var(--text-strong)}
.js-review__stars{color:var(--star);letter-spacing:.12em;font-size:18px;line-height:1}
.js-review__detail{font-size:13px;line-height:1.4;color:var(--text-muted)}
.js-review__text{margin:0;font-size:17px;line-height:1.65;color:var(--text-body);max-width:68ch}
.js-review__text p{margin:0 0 .9em}.js-review__text p:last-child{margin:0}
.js-carousel{box-sizing:border-box;padding:28px}
.js-carousel--mist{background:var(--surface-alt)}
.js-carousel--sand{background:var(--surface-sand)}
.js-carousel--none{padding:0}
.js-carousel--none .js-review{border:1px solid var(--border-subtle)}
.js-carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.js-carousel__nav{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:0;min-height:48px;cursor:pointer;color:var(--text-strong);font-family:var(--font-body)}
.js-carousel__circle{width:48px;height:48px;border-radius:50%;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast)}
.js-carousel__nav:hover .js-carousel__circle{background:var(--surface-dark);color:var(--text-inverse)}
.js-carousel__label{font-weight:700;font-size:12px;letter-spacing:var(--ls-caps);text-transform:uppercase}
.js-carousel__dots{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
.js-carousel__dot{width:24px;height:24px;border:0;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.js-carousel__dot::before{content:"";width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--control-border);background:transparent;transition:background var(--dur-fast),transform var(--dur-fast)}
.js-carousel__dot[aria-current="true"]::before{background:var(--control-border);transform:scale(1.2)}
@media (max-width:720px){.js-review{grid-template-columns:1fr;gap:20px;padding:22px}.js-review__who{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:center}.js-review__avatar{width:64px;height:64px;grid-row:span 3}.js-review__initial{font-size:28px}.js-carousel{padding:20px}.js-carousel--none{padding:0}.js-carousel__label{display:none}}

/* Service tiles: square line-icon tiles, one per service. */
.js-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--js-tiles-cols,3),minmax(0,1fr));gap:16px}
.js-tiles>li{display:flex}
.js-tile{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:152px;padding:28px 16px;box-sizing:border-box;background:var(--surface-page);border:1px solid var(--control-border);border-radius:var(--radius-0);color:var(--text-strong);text-decoration:none;font:inherit;cursor:default;text-align:center;transition:background var(--dur-fast) var(--ease-out)}
.js-tile--link{cursor:pointer}
.js-tile--link:hover{background:var(--surface-sand);color:var(--text-strong)}
.js-tile__icon{color:var(--accent);display:inline-flex}
.js-tile__label{font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.3;color:var(--text-strong)}
@media (max-width:720px){.js-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.js-tile{min-height:128px;padding:22px 12px}}

/* Mobile bottom bar: Call, Text, Start a Project. Shows on phones only unless .js-mbar--always. */
.js-mbar{display:none;grid-template-columns:1fr 1fr 1.6fr;background:var(--surface-page);border-top:1px solid var(--border-subtle);font-family:var(--font-body);box-sizing:border-box}
.js-mbar--always{display:grid}
@media (max-width:767px){.js-mbar{display:grid}}
.js-mbar--fixed{position:fixed;left:0;right:0;bottom:0;z-index:50;padding-bottom:env(safe-area-inset-bottom)}
.js-mbar__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:6px 4px;color:var(--text-strong);text-decoration:none;font-weight:700;font-size:11px;letter-spacing:var(--ls-caps-tight);text-transform:uppercase;border-right:1px solid var(--border-subtle)}
.js-mbar__cell:hover{background:var(--surface-soft);color:var(--text-strong)}
.js-mbar__cell--primary{flex-direction:row;gap:0;background:var(--accent);color:var(--text-inverse);border-right:0;font-size:12px;letter-spacing:.14em}
.js-mbar__cell--primary:hover{background:var(--accent-hover);color:var(--text-inverse)}
.js-mbar__cell:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px}

.js-mbar--landing{grid-template-columns:1fr 1fr}

/* Before and after: side by side, round arrows and dots, no caption. */
.js-ba{font-family:var(--font-body)}
.js-ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.js-ba__photo{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--surface-taupe);overflow:hidden}
.js-ba__photo img{width:100%;height:100%;object-fit:cover;display:block}
.js-ba__tag{position:absolute;top:12px;left:12px;z-index:1;font-weight:700;font-size:11px;line-height:1;letter-spacing:var(--ls-caps-tight);text-transform:uppercase;padding:7px 10px;background:var(--surface-page);color:var(--text-strong)}
.js-ba__tag--after{background:var(--surface-dark);color:var(--text-inverse)}
.js-ba__controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.js-ba__arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--border-strong);background:transparent;color:var(--text-strong);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.js-ba__arrow:hover{background:var(--surface-dark);color:var(--text-inverse)}
.js-ba__dots{display:flex;gap:2px;align-items:center;flex-wrap:wrap;justify-content:center}
.js-ba__dot{width:24px;height:24px;border:0;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.js-ba__dot::before{content:"";width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--control-border);transition:background var(--dur-fast),transform var(--dur-fast)}
.js-ba__dot[aria-current="true"]::before{background:var(--control-border);transform:scale(1.2)}
@media (max-width:640px){.js-ba__pair{grid-template-columns:1fr}}

/* Site header: regular (Services dropdown) and landing (no dropdown, logo not linked). Services hides once the page scrolls. */
.js-hdr{background:var(--surface-page);border-bottom:1px solid var(--border-subtle);font-family:var(--font-body);position:relative;z-index:40}
.js-hdr--sticky{position:sticky;top:0}
.js-hdr__in{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px var(--gutter);min-height:68px;box-sizing:border-box;transition:min-height var(--dur-base) var(--ease-out),padding var(--dur-base) var(--ease-out)}
.js-hdr.is-condensed .js-hdr__in{min-height:60px;padding-block:8px}
.js-hdr__brand{display:inline-flex;flex:none}
.js-hdr__pic{display:block}
.js-hdr__logo{display:block;height:30px;width:auto;transition:height var(--dur-base) var(--ease-out)}
.js-hdr.is-condensed .js-hdr__logo{height:26px}
.js-hdr__acts{display:flex;align-items:center;gap:28px}
.js-hdr__dd{position:relative;transition:opacity var(--dur-fast) var(--ease-out)}
.js-hdr.is-condensed .js-hdr__dd{opacity:0;visibility:hidden;pointer-events:none;width:0;margin-right:-28px;overflow:hidden}
.js-hdr__ddbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:10px 0;cursor:pointer;font:700 12px/1.4 var(--font-body);letter-spacing:var(--ls-caps-tight);text-transform:uppercase;color:var(--text-strong);min-height:44px}
.js-hdr__ddbtn svg{transition:transform var(--dur-fast)}
.js-hdr__ddbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.js-hdr__menu{position:absolute;top:calc(100% + 14px);left:-20px;list-style:none;margin:0;padding:8px 0;min-width:250px;background:var(--surface-page);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md)}
.js-hdr__menu a{display:block;padding:9px 20px;font-size:15px;line-height:1.4;color:var(--text-strong);text-decoration:none}
.js-hdr__menu a:hover{background:var(--surface-sand);color:var(--text-strong)}
.js-hdr__all{border-top:1px solid var(--border-subtle);margin-top:6px;padding-top:6px}
.js-hdr__all a{font-weight:700;color:var(--text-accent-strong)}
.js-hdr__phone{display:inline-flex;align-items:center;gap:10px;color:var(--text-strong);text-decoration:none}
.js-hdr__phone span{display:flex;flex-direction:column;font-weight:900;font-size:17px;line-height:1.25;letter-spacing:.04em}
.js-hdr__phone small{font-weight:400;font-size:12px;letter-spacing:0;color:var(--text-muted)}
.js-hdr__phone:hover{color:var(--text-strong)}
.js-hdr__burger{display:none;width:44px;height:44px;border:1px solid var(--border-strong);background:transparent;color:var(--text-strong);align-items:center;justify-content:center;cursor:pointer}
.js-hdr__mobile{border-top:1px solid var(--border-subtle);padding:6px var(--gutter) 14px;display:flex;flex-direction:column}
.js-hdr__mobile>a,.js-hdr__mobile summary{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-subtle);font:700 13px/1.3 var(--font-body);letter-spacing:var(--ls-caps-tight);text-transform:uppercase;color:var(--text-strong);text-decoration:none;cursor:pointer;list-style:none}
.js-hdr__mobile summary::-webkit-details-marker{display:none}
.js-hdr__mobile details[open] summary svg{transform:rotate(180deg)}
.js-hdr__mobile ul{list-style:none;margin:0;padding:4px 0 8px 12px}
.js-hdr__mobile ul a{display:block;padding:7px 0;font-size:15px;color:var(--text-body);text-decoration:none}
.js-hdr__mobile[hidden],.js-hdr__menu[hidden]{display:none}
@media (min-width:900px){.js-hdr__mobile{display:none}}
@media (max-width:899px){.js-hdr__acts{display:none}.js-hdr__burger{display:inline-flex}.js-hdr__in,.js-hdr.is-condensed .js-hdr__in{min-height:58px;padding-block:7px}.js-hdr__logo{height:18px}}
/* Phones: the wordmark keeps its phone size after scrolling (the condensed 26px desktop rule must not win). */
@media (max-width:899px){.js-hdr.is-condensed .js-hdr__logo{height:18px}.js-hdr--landing.is-condensed .js-hdr__logo{height:16px}}
/* Narrow phones: the logo gives up width before the buttons do, so nothing runs off the screen (it scales down inside its box, never squashed). */
@media (max-width:899px){.js-hdr__brand,.js-hdr__pic{flex:0 1 auto;min-width:0}.js-hdr__logo{max-width:100%;object-fit:contain;object-position:left center}}

/* Landing footer: closing sand band with the service area. */
.js-lfoot{background:var(--surface-sand);color:var(--text-body);font-family:var(--font-body);padding:56px var(--gutter) 24px}
.js-lfoot__in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.js-lfoot__logo{height:64px;width:auto;margin-bottom:10px}
.js-lfoot__h{font-family:var(--font-display);font-weight:var(--fw-heading);font-size:36px;line-height:1.2;color:var(--text-strong);margin:0}
.js-lfoot__line{font-size:17px;margin:0}
.js-lfoot__acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:14px;font-size:15px;color:var(--text-strong)}
.js-lfoot__acts a:not([class]){font-weight:700;color:var(--text-strong)}
.js-lfoot__area{margin-top:28px;padding-top:22px;border-top:1px solid var(--surface-taupe);width:100%}
.js-lfoot__label{display:block;font-weight:700;font-size:12px;letter-spacing:var(--ls-caps-tight);text-transform:uppercase;color:var(--text-strong);margin-bottom:10px}
.js-lfoot__area ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;font-size:15px}
.js-lfoot__area li:not(:last-child)::after{content:"·";margin:0 10px;color:var(--text-muted)}
.js-lfoot__legal{max-width:var(--container);margin:36px auto 0;padding-top:16px;border-top:1px solid var(--surface-taupe);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:13px;color:var(--text-muted)}
.js-lfoot__legal a{color:var(--text-muted)}

.js-hdr__mland{display:none;align-items:center;gap:8px}
.js-hdr__txt{width:44px;height:44px;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--text-strong)}
.js-hdr__txt:hover{background:var(--surface-dark);color:var(--text-inverse)}
@media (max-width:899px){.js-hdr__mland{display:flex}.js-hdr--landing .js-hdr__logo{height:16px}}

/* FAQ: sand blocks with a flipping chevron. */
.js-faq{display:grid;gap:10px;font-family:var(--font-body)}
.js-faq__item{background:var(--surface-sand)}
.js-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;min-height:56px;box-sizing:border-box;font-weight:700;font-size:17px;line-height:1.4;color:var(--text-strong)}
.js-faq__item summary::-webkit-details-marker{display:none}
.js-faq__item summary svg{transition:transform var(--dur-fast) var(--ease-out)}
.js-faq__item[open] summary svg{transform:rotate(180deg)}
.js-faq__item summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.js-faq__a{padding:0 22px 22px;max-width:64ch;font-size:17px;line-height:1.6;color:var(--text-body)}
.js-faq__a p{margin:0}.js-faq__a p+p{margin-top:.8em}

/* Site footer (regular pages): ink band. The page's one dark band. */
.js-sfoot{background:var(--surface-dark);color:var(--surface-sand);font-family:var(--font-body);padding:56px var(--gutter) 24px}
.js-sfoot__grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr .8fr 1.1fr 1.1fr;gap:32px}
.js-sfoot__brand img{display:block;height:72px;width:auto}
.js-sfoot__towns{font-size:15px;line-height:1.6;margin:16px 0 0}
.js-sfoot__towns b{color:var(--text-inverse)}
.js-sfoot__h{margin:0 0 12px;font:700 12px/1.4 var(--font-body);letter-spacing:var(--ls-caps-tight);text-transform:uppercase;color:var(--text-inverse)}
.js-sfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.js-sfoot ul a{color:var(--surface-sand);text-decoration:none;font-size:16px}
.js-sfoot ul a:hover{color:var(--text-inverse);text-decoration:underline;text-underline-offset:3px}
.js-sfoot__contact{display:grid;gap:14px;align-content:start;justify-items:start}
.js-sfoot__contact .js-sfoot__h{margin:0}
.js-sfoot__br{display:none}
@media (min-width:901px){.js-sfoot__br{display:inline}.js-sfoot__sep--br{display:none}}
.js-sfoot__give p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--surface-sand)}
.js-sfoot__caps{font-weight:700;font-size:12px;letter-spacing:var(--ls-caps-tight);text-transform:uppercase;color:var(--text-inverse);text-decoration:none}
.js-sfoot__np{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 16px;box-sizing:border-box;border:1px solid var(--surface-taupe);font-weight:700;font-size:11px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--surface-sand);text-decoration:none;transition:background var(--dur-fast),color var(--dur-fast)}
.js-sfoot__np:hover{background:var(--surface-sand);color:var(--text-strong)}
.js-sfoot__caps:hover{color:var(--text-inverse);text-decoration:underline}
.js-sfoot a:focus-visible{outline-color:var(--text-inverse)}
.js-sfoot__legal{max-width:var(--container);margin:40px auto 0;padding-top:18px;border-top:1px solid var(--surface-dark-hover);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:13px;color:var(--surface-taupe)}
.js-sfoot__legal a{color:var(--surface-taupe)}
.js-sfoot__legal a:hover{color:var(--text-inverse)}
.js-sfoot__lsep{margin:0 .35em}
.js-sfoot__legal a{white-space:nowrap}
@media (max-width:1100px){.js-sfoot__grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:900px){.js-sfoot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.js-sfoot__grid{grid-template-columns:1fr}}
/* Footer, as live on every page: towns on one line across the bottom above the legal rule; white Giving back button; phones get a centered logo and Explore + Company side by side. */
.js-sfoot__grid>div:first-child{display:contents}
.js-sfoot__towns{grid-column:1/-1;order:99;margin:12px 0 0;font-size:15px}
.js-sfoot__towns>br:not(.js-sfoot__br){display:none}
.js-sfoot__towns>b::after{content:"\00a0· ";font-weight:400;color:var(--surface-sand)}
.js-sfoot__towns .js-sfoot__sep{font-size:0}
.js-sfoot__towns .js-sfoot__sep::before{content:"\00a0· ";font-size:15px}
.js-sfoot__towns .js-sfoot__br{display:none!important}
.js-sfoot__towns .js-sfoot__sep--br{display:inline!important}
.js-sfoot__legal{margin-top:24px}
@media (min-width:901px){.js-sfoot__legal>span{white-space:nowrap}}
.js-sfoot__np{background:var(--surface-page);border-color:var(--surface-page);color:var(--text-strong)}
.js-sfoot__np:hover,.js-sfoot__np:focus{background:var(--surface-sand);border-color:var(--surface-sand);color:var(--text-strong)}
@media (max-width:520px){
 .js-sfoot__grid{grid-template-columns:1fr 1fr;column-gap:24px}
 .js-sfoot__brand{grid-column:1/-1;justify-self:stretch;display:flex;justify-content:center;padding-bottom:28px;margin-bottom:8px;border-bottom:1px solid var(--surface-dark-hover)}
 .js-sfoot__give,.js-sfoot__contact,.js-sfoot__towns{grid-column:1/-1}
}

/* Accessibility: one clear focus outline everywhere, and no motion for people who ask for less. */
:where(button,a,[role="tab"],[role="switch"],[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
[role="dialog"]:focus{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}}

/* Galleries loop: each new slide slides in from the direction of travel, so Next on the last item moves forward to the first. */
.js-slide-next{animation:js-slide-next var(--dur-base) var(--ease-out)}
.js-slide-prev{animation:js-slide-prev var(--dur-base) var(--ease-out)}
@keyframes js-slide-next{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes js-slide-prev{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js-slide-next,.js-slide-prev{animation:none}}
/* Step numbers: center the figures optically (trims the font's extra space above and below), so they sit in the middle of the circle in any font. */
.js-step__n{display:block;line-height:1;text-box:trim-both cap alphabetic}

/* Promise bar: slim slate bar of white checks (default) or plain ink checks under a CTA. */
.js-pbar--slate{background:var(--surface-slate);color:var(--text-inverse)}
.js-pbar__list{list-style:none;margin:0 auto;padding:18px var(--gutter);max-width:var(--container);box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.js-pbar--plain .js-pbar__list{padding:0}
.js-pbar__list li{display:flex;align-items:center;gap:8px;font:700 15px/1.4 var(--font-body);color:inherit}
.js-pbar--plain{color:var(--text-strong)}
.js-pbar__ic{display:flex}

/* Press band ("As seen in"): slate band, white logos. */
.js-press{background:var(--surface-slate);color:var(--text-inverse)}
.js-press__in{max-width:var(--container);margin:0 auto;padding:36px var(--gutter);box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 64px}
.js-press__label{font:700 14px/1.4 var(--font-body);letter-spacing:var(--ls-caps);text-transform:uppercase}
.js-press__logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 64px}
.js-press__logos img{height:60px;width:auto;opacity:.95}
@media (max-width:600px){.js-press__logos{gap:20px 36px}.js-press__logos img{height:44px}}

/* Services list: two columns of hairline rows (one on phones), terracotta icon, bold title, short line, chevron. */
.js-svl{list-style:none;margin:0 auto;padding:0;width:100%;max-width:980px;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--border-subtle);font-family:var(--font-body)}
.js-svl li{border-bottom:1px solid var(--border-subtle)}
.js-svl__row{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:26px 4px;text-decoration:none;color:var(--text-strong);height:100%;box-sizing:border-box}
.js-svl__ic{color:var(--accent);display:flex}
.js-svl__ch{color:var(--text-strong);display:flex;transition:transform var(--dur-fast) var(--ease-out)}
.js-svl__tx h3{font:700 17px/1.35 var(--font-body);color:var(--text-strong);margin:0}
.js-svl__tx p{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--text-body)}
.js-svl__row:hover h3{text-decoration:underline;text-underline-offset:3px}
.js-svl__row:hover .js-svl__ch{transform:translateX(3px)}
@media (max-width:760px){.js-svl{grid-template-columns:1fr}.js-svl__row{padding:22px 4px}}

/* Gift bar: the black strip above the header. */
.js-gift{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface-dark);color:var(--text-inverse);text-decoration:none;padding:9px 16px;font:400 13px/1.4 var(--font-body);letter-spacing:.04em;text-align:center}
.js-gift b{font-weight:700;letter-spacing:var(--ls-caps-tight);text-transform:uppercase;font-size:12px;white-space:nowrap}
.js-gift:hover,.js-gift:focus{color:var(--text-inverse)}
.js-gift:hover b{text-decoration:underline;text-underline-offset:3px}
.js-gift:focus-visible{outline:2px solid var(--text-inverse);outline-offset:-4px}

/* Guides ticker: hunter green, scrolling links with a pause button; still and scrollable with reduced motion. */
.js-tick{position:relative;background:var(--surface-hunter);color:var(--text-inverse);overflow:hidden;white-space:nowrap}
.js-tick__track{display:flex;width:max-content;animation:js-tick var(--tick-dur,40s) linear infinite}
.js-tick:hover .js-tick__track,.js-tick:focus-within .js-tick__track,.js-tick.is-paused .js-tick__track{animation-play-state:paused}
.js-tick__set{display:flex;list-style:none;margin:0;padding:0}
.js-tick__set li{display:flex;align-items:center;padding-right:56px}
.js-tick a{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--text-inverse);text-decoration:none;font:700 12px/1.4 var(--font-body);letter-spacing:var(--ls-caps-tight);text-transform:uppercase}
.js-tick a:hover span{text-decoration:underline;text-underline-offset:3px}
.js-tick a:focus-visible,.js-tick__pause:focus-visible{outline:2px solid var(--text-inverse);outline-offset:2px}
.js-tick::after{content:"";position:absolute;right:0;top:0;bottom:0;width:64px;background:linear-gradient(90deg,rgba(53,94,59,0),var(--surface-hunter) 45%);pointer-events:none}
.js-tick__pause{z-index:1;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.22);color:var(--text-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.js-tick__pause:hover{background:rgba(255,255,255,.34)}
@keyframes js-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.js-tick{overflow-x:auto}.js-tick__track{animation:none}.js-tick__set[aria-hidden]{display:none}.js-tick__pause{display:none}}

/* Form card: a mist panel holding an FG Funnels form. --fminh (from minHeight) stops the inner scrollbar. */
.js-fcard{background:var(--surface-alt);padding:32px 32px 16px;max-width:760px;margin:0 auto;box-sizing:border-box}
.js-fcard iframe{display:block;width:100%;border:0;min-height:var(--fminh,0)}
@media (max-width:600px){.js-fcard{padding:16px 12px 4px}.js-fcard iframe{min-height:calc(var(--fminh,0px) + 60px)}}

/* ---- Joyful Spaces Site Tools additions (not part of the Design System export) ---- */
/* Roca fallback sized to Roca's width, so headings don't reflow when the Adobe font arrives (layout shift). Measured on macOS: Roca is 104.4% the width of Georgia. */
@font-face{font-family:"Roca Fallback";src:local("Georgia");size-adjust:104.4%;ascent-override:94%;descent-override:50%;line-gap-override:0%}
:root{--font-display:"roca","Roca","Roca Fallback",Georgia,"Times New Roman",serif}
/* FG Funnels' embed script moves inline form iframes off-screen (position:absolute; left:-9999px) while they load, which collapses their box and shifts the page. Keep them in the flow; FGF still hides them with opacity until ready. */
iframe[data-layout-iframe-id]{position:relative!important;left:auto!important;top:auto!important}

/* Oct 27: sitewide, the sticky header keeps the same height and logo size on scroll (desktop).
   Higher specificity so it wins over older per-page "Shorter sticky header" overrides.
   Nowrap stops the hidden "How we can help" label from wrapping into a tall column. */
.js-hdr__ddbtn{white-space:nowrap}
@media (min-width:900px){
html body .js-hdr.is-condensed .js-hdr__in{min-height:68px;padding-block:10px}
html body .js-hdr.is-condensed .js-hdr__logo{height:30px}
}

/* Oct 29 mobile fixes: carousels (swipe, stacked slides), ticker, problem line, As Seen In, TCS, OneTap */
.js-stack{display:grid;touch-action:pan-y}
.js-stack>*{grid-area:1/1;min-width:0}
.js-stack>.js-off{visibility:hidden;pointer-events:none}
.js-swipe-hint{display:none;margin:10px 0 0;text-align:center;font:700 11px/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);transition:opacity .4s}
.js-swipe-hint.is-used{opacity:0}
@media (hover:none){.js-swipe-hint{display:block}}
@media (prefers-reduced-motion:no-preference){.js-nudge .js-stack{animation:js-nudge 1.2s ease-in-out}}
@keyframes js-nudge{0%,100%{transform:none}25%{transform:translateX(-22px)}50%{transform:none}70%{transform:translateX(-10px)}}
.problem .sub{font-style:italic!important}
@media (max-width:600px){
.ticker__set li{padding-right:28px}
.problem .sub{max-width:12.8em}
.seenband .wrap{flex-direction:column;padding-block:16px!important;gap:10px!important}
.seenband .seen__label{font-size:11px!important;letter-spacing:.14em!important}
.seenband .seen__logos{flex-wrap:nowrap!important;gap:18px!important;max-width:100%}
.seenband .seen__logos img{height:28px!important;min-width:0;flex:0 1 auto;object-fit:contain}
}
@media (max-width:860px){
.split--tcs .split__text{align-items:center}
.split--tcs .split__text>div[style]{text-align:center!important}
.split--tcs .split__text h2{text-align:center}
.split--tcs .split__text>p,.split--tcs .split__text>ul{align-self:stretch;text-align:left}
}
@media (max-width:900px){
html body .onetap-container-toggle .onetap-toggle img,html body .onetap-container-toggle .onetap-toggle img[class*="design-size"]{width:40px!important;height:40px!important;padding:6px!important}
html body .onetap-container-toggle .onetap-toggle svg{width:40px!important;height:40px!important}
}

/* Oct 29 batch 2: service steps (phones), Start page photo quotes, FGF form bottom space (phones) */
@media (max-width:860px){
.psteps--ph .pstep-w{width:100%;max-width:min(330px,calc(100% - 24px));margin-inline:auto;box-sizing:border-box}
}
@media (max-width:720px){
html body .pq .pq__f img{width:100vw!important;max-width:none!important;margin-inline:calc(50% - 50vw)!important}
html body .pq .pq__f figcaption{margin:-40px auto 0!important;width:calc(100% - 32px);box-sizing:border-box}
}
html body .pq li:nth-child(4) .pq__f img{aspect-ratio:5/4!important;object-position:center bottom}
@media (max-width:760px){
.ep-wrapper{overflow:hidden}
.ep-wrapper>iframe{display:block;margin-bottom:-56px!important}
[role="dialog"] .ep-wrapper>iframe{margin-bottom:0!important}
}

/* Oct 29 batch 3: homepage-only problem line, IO focus headers, IO before/after peek scroller (phones) */
.problem .sub{font-style:normal!important;max-width:none!important}
.home .problem .sub{font-style:italic!important}
@media (max-width:600px){.home .problem .sub{max-width:12.8em!important}}
html body .focus .focus__h{font-family:var(--font-body)!important;font-weight:700!important}
@media (max-width:760px){
.page-id-214 .js-ba .js-stack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:calc(var(--gutter,16px)*-1);padding-right:var(--gutter,16px);touch-action:auto}
.page-id-214 .js-ba .js-stack::-webkit-scrollbar{display:none}
.page-id-214 .js-ba .js-stack>.js-ba__pair,.page-id-214 .js-ba .js-stack>.js-off{display:contents;visibility:visible;pointer-events:auto;animation:none}
.page-id-214 .js-ba .js-ba__photo{flex:0 0 84%;scroll-snap-align:start;min-width:0}
.page-id-214 .js-ba .js-ba__controls{display:none}
.page-id-214 .js-nudge .js-stack{animation:none}
}

/* Oct 29 batch 4: swipe hint takes no extra space (sits in the gap above the arrows) */
.js-ba,.js-carousel{position:relative}
.js-swipe-hint{position:absolute;left:0;right:0;margin:0!important;transform:translateY(3px);pointer-events:none;line-height:15px!important}
.page-id-214 .js-swipe-hint{position:static;transform:none;margin-top:8px!important}

/* Oct 29 batch 5: every carousel on phones is a looping peek strip (one item + next peeking), dots kept, arrows removed; IO focus lists option A */
@media (max-width:760px){
html body .js-peek .js-stack{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;margin-right:calc(var(--gutter,16px)*-1);padding-right:var(--gutter,16px);touch-action:auto;animation:none!important;align-items:stretch}
.js-peek .js-stack::-webkit-scrollbar{display:none}
html body .js-peek .js-stack>*{visibility:visible!important;pointer-events:auto!important;animation:none!important}
html body .js-peek.js-ba .js-stack>*{display:contents!important}
html body .js-peek.js-ba .js-ba__photo{flex:0 0 84%;scroll-snap-align:start;min-width:0}
html body .js-peek.js-carousel .js-stack>*{flex:0 0 84%;scroll-snap-align:start;min-width:0;box-sizing:border-box}
html body .js-peek .js-ba__arrow,html body .js-peek .js-carousel__nav{display:none!important}
html body .js-peek .js-ba__controls,html body .js-peek .js-carousel__controls{display:flex!important;justify-content:center}
.focus__col{display:grid!important;grid-template-columns:110px 1fr;gap:10px 16px!important;align-items:start}
.focus__h{flex-direction:column;align-items:flex-start!important;gap:8px!important;padding-top:2px}
.focus ul{gap:6px!important}
}
@media (max-width:760px){
.js-peek .js-review__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden}
.js-peek .js-review__text.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.js-more{background:none;border:0;padding:6px 0 0;margin:0;font:700 13px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent-strong,#a3502a);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start}
}

/* Oct 29 batch 6: phone-only line breaks (br.mbr), homepage Container Store list centered as a block, text left */
.mbr{display:none}
@media (max-width:600px){.mbr{display:inline}}
@media (max-width:860px){html body .split--tcs .split__text>ul.triad{align-self:center;width:fit-content;max-width:100%;text-align:left}}

/* Oct 29 batch 7: Services page rows: outline button links, whole row (photo included) clickable */
.svb .lm{border:1px solid var(--text-strong);color:var(--text-strong)!important;padding:12px 18px;letter-spacing:.12em;text-decoration:none;transition:background var(--dur-fast),color var(--dur-fast)}
.svb .lm:hover{background:var(--text-strong);color:#fff!important}
.svb__row{position:relative}
.svb__row .lm::after{content:"";position:absolute;inset:0}
.svb__row:hover img{opacity:.92}
.svb__tx a:not(.lm){position:relative;z-index:1}

/* Oct 29 batch 8: homepage phones: problem line as big as its heading, No judgment line as big as the lead */
@media (max-width:600px){
html body.home .problem .sub{font-size:min(28px,7.4vw)!important;line-height:1.2!important}
html body.home .intro .tag{font-size:20px!important;line-height:1.6!important}
}

/* Oct 29 batch 9: homepage hero on phones uses the garage wall crop, no label */
@media (max-width:700px){
html body.home .hero__photo{aspect-ratio:874/986!important;min-height:0!important}
html body.home .hero__photo::before{background:url("/wp-content/uploads/2026/10/jshome-hero-garage-m.webp") center/cover no-repeat!important;left:0!important;width:100%!important;transform:none!important}
html body.home .hero__label{display:none!important}
}

/* Oct 29 batch 10: homepage phones: problem line 20px italic set off by an orange rule, body 16px; As Seen In logos span the width */
@media (max-width:600px){
html body.home .problem .sub{font-size:20px!important;line-height:1.35!important;border-left:3px solid var(--accent);padding-left:14px;margin-top:20px;max-width:calc(12.8em + 17px)!important}
html body.home .problem__copy{font-size:16px!important;gap:12px!important}
html body .seenband .wrap{padding-inline:12px!important}
html body .seenband .seen__logos{width:100%;justify-content:space-between;gap:14px!important}
html body .seenband .seen__logos img{height:auto!important;max-height:40px;flex:1 1 0;min-width:0;object-fit:contain}
}

/* Oct 29 batch 11: home hero landscape garage (phones), swipe hint on phone strips, Zero Obligation box, founder block (phones, site-wide), Container Store list, blog preview cards, See all posts button, FAQ jump order */
@media (max-width:700px){
html body.home .hero__photo{aspect-ratio:2/1!important}
html body.home .hero__photo::before{background-image:url("/wp-content/uploads/2026/10/jshome-hero-garage-wide.webp")!important;background-position:center!important}
}
@media (max-width:760px){
html body .js-peek .js-swipe-hint{display:block!important;position:absolute;left:0;right:0;margin:0!important;transform:none;top:auto;height:16px;line-height:16px!important;font-size:10px!important;letter-spacing:.16em!important;color:var(--text-muted)!important;pointer-events:none;transition:opacity .5s ease}
html body .js-peek .js-swipe-hint.is-used{opacity:0}
html body .js-peek.js-ba .js-ba__controls,html body .js-peek.js-carousel .js-carousel__controls{position:relative}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
html body .js-peek .js-swipe-hint:not(.is-used){animation:js-hint-sway 1.6s ease-in-out .6s 3}
}
@keyframes js-hint-sway{0%,100%{transform:translateX(0)}30%{transform:translateX(-7px)}60%{transform:translateX(5px)}}
@media (max-width:720px){
html body .promise{margin-inline:calc(var(--gutter,16px)*-1)!important;padding:26px 20px 28px!important}
html body .promise p{text-wrap:pretty}
}
@media (max-width:640px){
html body .split--meg{display:grid!important;grid-template-columns:128px minmax(0,1fr)!important;grid-template-rows:1fr auto auto 1fr auto;column-gap:18px!important;row-gap:0!important;align-items:start;justify-content:stretch!important}
html body .split--meg .split__img{grid-column:1;grid-row:1/6;max-width:none!important;width:100%;align-self:stretch}
html body .split--meg .split__img img,html body .split--meg .split__img .img-link{width:100%;height:100%;min-height:160px}
html body .split--meg .split__img img{aspect-ratio:auto!important;object-fit:cover;object-position:center top}
html body .split--meg .split__text{display:contents!important}
html body .split--meg .split__text>*{grid-column:1/-1;margin-top:18px}
html body .split--meg .split__text>div:first-child{grid-column:2;grid-row:2;margin:0 0 8px;font-size:11px!important;letter-spacing:.2em!important}
html body .split--meg .split__text>h2{grid-column:2;grid-row:3;margin:0;font-size:clamp(24px,7vw,28px)!important;line-height:1.15!important;text-wrap:balance}
html body .split--meg .split__text>.cred{grid-column:1/-1;grid-row:5;justify-self:start;align-self:end;position:relative;z-index:1;margin:0 0 12px 10px!important;max-width:calc(100% - 10px);box-sizing:border-box;background:#fff;padding:8px 12px;font:700 16px/1.3 var(--font-body)!important;letter-spacing:0!important;color:var(--text-strong);box-shadow:0 2px 10px rgba(25,24,22,.12)}
html body .split--meg .split__text>.cred .reg{font-size:.6em;vertical-align:super;line-height:0}
html body .split--meg .split__text>.cred+*{margin-top:22px}
html body .split--meg .split__text>h2+p:not(.cred){margin-top:26px}
}
@media (max-width:860px){
html body .split--tcs .split__text>ul.triad{align-self:flex-start!important;width:auto;margin-left:max(10px,calc((100% - 246px)/4))!important;max-width:calc(100% - max(10px,calc((100% - 246px)/4)))}
}
.guides>article{background:var(--surface-sand)!important;border:0!important;position:relative}
.guides>article>div:last-child{padding:24px 26px 28px!important;gap:12px!important}
.guides>article>div:last-child>div:first-child{color:var(--text-accent-strong)!important}
.guides>article h3{font-size:22px!important;line-height:1.3!important;text-wrap:pretty}
.guides>article>div:last-child>div:last-child{padding-top:6px!important}
.guides>article>div:last-child>div:last-child>a{display:flex!important;width:100%;justify-content:space-between!important;gap:12px!important;padding:0!important;border:0!important;background:none!important;font-size:12px!important;letter-spacing:var(--ls-caps-tight)!important;color:var(--text-strong)!important}
.guides>article>div:last-child>div:last-child>a::after{content:"";position:absolute;inset:0}
.guides>article .gcard__cat,.guides>article .gcard__t{position:relative;z-index:1}
.guides>article>div:last-child>div:last-child>a>span:first-child{margin-right:0!important}
.guides>article>div:last-child>div:last-child>a>span:last-child{font-size:0!important;flex:none;width:36px;height:36px;border:1px solid var(--text-strong);border-radius:50%;display:flex!important;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast)}
.guides>article>div:last-child>div:last-child>a>span:last-child::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.guides>article:hover>div:last-child>div:last-child>a>span:last-child{background:var(--text-strong);color:#fff}
.guides>article:hover h3 .gcard__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:600px){
.guides>article>div:last-child{padding:20px!important;gap:10px!important}
.guides>article h3{font-size:21px!important}
.guides>article>div:last-child>div:nth-child(3):not(:last-child){display:none!important}
}
html body .all-posts a{border:1px solid var(--border-strong)!important;color:var(--text-strong)!important;padding:18px 36px!important;font-size:13px!important;min-height:0!important;transition:background var(--dur-fast),color var(--dur-fast)!important}
html body .all-posts a:hover{background:var(--text-strong)!important;color:#fff!important}
@media (max-width:860px){
.faqnav ul li:nth-child(1){order:1}
.faqnav ul li:nth-child(4){order:2}
.faqnav ul li:nth-child(2){order:3}
.faqnav ul li:nth-child(3){order:4}
}

/* Oct 29 batch 12: About photo strip (between nonprofit and closing CTA), About closing CTA heading split */
.sstrip--about{background:var(--surface-page,#fff);padding:0}
.sstrip--about .sstrip__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
.sstrip--about li{margin:0}
.sstrip--about a{display:block;overflow:hidden;line-height:0;position:relative}
.sstrip--about img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .4s ease,opacity .4s ease}
.sstrip--about a:hover img{transform:scale(1.04);opacity:.92}
.sstrip--about a:focus-visible{outline:2px solid var(--focus-ring,#c89919);outline-offset:-4px}
@media (max-width:900px){.sstrip--about .sstrip__row{grid-template-columns:repeat(4,minmax(0,1fr))}.sstrip--about .sstrip__desk{display:none}}
@media (hover:hover) and (min-width:901px){
.sstrip--about a::after{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--text-strong,#191816);padding:9px 12px;font:700 11px/1.3 var(--font-body);text-transform:uppercase;letter-spacing:.22em;box-shadow:0 4px 14px rgba(25,24,22,.18);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;white-space:nowrap}
.sstrip--about a:hover::after,.sstrip--about a:focus-visible::after{opacity:1;transform:none}
.sstrip--about li:nth-child(1) a::after{content:"Kitchens \203A"}
.sstrip--about li:nth-child(2) a::after{content:"Moving \203A"}
.sstrip--about li:nth-child(3) a::after{content:"Our Work \203A"}
.sstrip--about li:nth-child(4) a::after{content:"Garages \203A"}
.sstrip--about li:nth-child(5) a::after{content:"Pantries \203A"}
.sstrip--about li:nth-child(6) a::after{content:"Unpacking \203A"}
.sstrip--about li:nth-child(7) a::after{content:"Closets \203A"}
}
@media (prefers-reduced-motion:reduce){.sstrip--about img,.sstrip--about a::after{transition:none}.sstrip--about a:hover img{transform:none}}
.endcta h2 .ec-m{display:none}
.endcta h2 .ec-sub{display:block;margin-top:10px;font:400 18px/1.6 var(--font-body);color:var(--text-body);letter-spacing:0}
@media (max-width:600px){
.endcta h2 .ec-d{display:none}
.endcta h2 .ec-m{display:inline;white-space:nowrap;font-size:min(28px,7.4vw)}
.endcta h2 .ec-sub{font-size:17px;margin-top:6px}
}

/* Oct 29 batch 13: About team as a short list on phones (tap to open), team anchor offset, blog header + menu on phones/tablets */
#team,#team .tm{scroll-margin-top:84px}
@media (max-width:640px){
html body #team .team{display:flex!important;flex-direction:column;gap:0!important;max-width:none;background:#fff;border-top:1px solid #e2ddd7}
html body #team .tm{display:grid!important;grid-template-columns:72px minmax(0,1fr) 28px;column-gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid #e2ddd7;background:#fff}
html body #team .tm__ph{grid-column:1;grid-row:1;width:72px;height:72px;border-radius:50%;overflow:hidden;cursor:pointer}
html body #team .tm__ph img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:center 18%}
html body #team .tm__band{grid-column:2;grid-row:1;background:none!important;color:var(--text-strong)!important;padding:0!important;gap:4px!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body #team .tm__band:focus-visible{outline:2px solid var(--focus-ring,#c89919);outline-offset:4px}
html body #team .tm__band h3{color:var(--text-strong)!important;font-size:21px!important;line-height:1.2!important}
html body #team .tm__chips{display:block!important;margin:0}
html body #team .tm__chips li{display:inline;background:none!important;padding:0!important;color:var(--text-accent-strong)!important;font:700 11px/1.55 var(--font-body)!important;letter-spacing:.07em;text-transform:uppercase;white-space:normal}
html body #team .tm__chips li+li::before{content:" \00B7  "}
html body #team .tm[aria-labelledby="tm-sherry"] .tm__chips li:nth-child(2),html body #team .tm[aria-labelledby="tm-alex"] .tm__chips li:nth-child(3){display:block}
html body #team .tm[aria-labelledby="tm-sherry"] .tm__chips li:nth-child(2)::before,html body #team .tm[aria-labelledby="tm-alex"] .tm__chips li:nth-child(3)::before{content:none}
html body #team .tm::after{content:"+";grid-column:3;grid-row:1;justify-self:center;font:300 28px/1 var(--font-body);color:var(--text-strong);pointer-events:none}
html body #team .tm.is-open::after{content:"\2212"}
html body #team .tm__b{grid-column:1/-1;display:none!important;padding:14px 0 6px!important;gap:14px!important}
html body #team .tm.is-open .tm__b{display:flex!important}
html body #team .tm p{font-size:16px}
html body #team .tm .morebtn{display:none!important}
}
@media (max-width:899px){
body.jsst-tpl .js-mbar{display:none!important}
body.jsst-tpl{padding-bottom:0!important}
body.jsst-tpl.jsb-fixed .js-hdr{position:fixed!important;top:0;left:0;right:0;z-index:1000;transform:translateY(-105%);box-shadow:0 4px 16px rgba(25,24,22,.10)}
body.jsst-tpl.jsb-fixed.jsb-anim .js-hdr{transition:transform .28s ease}
body.jsst-tpl.jsb-fixed.jsb-shown .js-hdr{transform:none}
body.jsst-tpl.jsb-fixed .js-hdr .js-hdr__mobile{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){body.jsst-tpl.jsb-fixed.jsb-anim .js-hdr{transition:none}}
.js-hdr__cta{display:none}
@media (max-width:899px){
body.jsst-tpl .js-hdr__cta{display:block;padding:20px 0 6px}
.js-hdr__start{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff!important;font:700 13px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none!important;padding:18px 16px;border:0!important}
.js-hdr__start:hover{background:var(--accent-hover,#a3502a)}
.js-hdr__ct{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.js-hdr__ct a{display:flex!important;align-items:center;justify-content:center;gap:8px;border:1px solid var(--text-strong)!important;padding:14px!important;color:var(--text-strong)!important;font:700 12px/1 var(--font-body)!important;letter-spacing:.16em!important;text-transform:uppercase;text-decoration:none!important;margin:0!important}
.js-hdr__ct a:hover{background:var(--text-strong);color:#fff!important}
.js-hdr__num{text-align:center;margin:12px 0 0;font:400 15px/1.4 var(--font-body);color:var(--text-body)}
}

/* Oct 29 batch 14: founder block photo larger on phones (text column sized to "I'm Meghan."), home blog previews 2 across on phones */
@media (max-width:640px){
html body .split--meg:has(h2 br.mbr){grid-template-columns:minmax(110px,min(176px,calc(100% - 24px - 5.95 * clamp(24px,7vw,28px)))) minmax(0,1fr)!important;column-gap:16px!important}
html body .split--meg:has(h2 br.mbr) .split__text>h2{padding-right:4px}
}
@media (max-width:600px){
html body .guides{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;max-width:none!important}
html body .guides>article>div:first-child{aspect-ratio:4/5!important}
html body .guides>article>div:last-child{padding:12px 12px 14px!important;gap:6px!important}
html body .guides>article>div:last-child>div:first-child{font-size:10px!important;letter-spacing:var(--ls-caps-tight)!important;line-height:1.4!important}
html body .guides>article h3{font-size:17px!important;line-height:1.25!important}
html body .guides>article>div:last-child>div:last-child>a{font-size:10px!important;letter-spacing:.1em!important;gap:8px!important}
html body .guides>article>div:last-child>div:last-child>a>span:last-child{width:30px;height:30px}
html body .guides>article>div:last-child>div:last-child>a>span:last-child::before{width:14px;height:14px}
}

/* Oct 29 batch 15: every team row full width on phones */
@media (max-width:640px){html body #team .team>.tm{width:100%!important;max-width:none!important;align-self:stretch!important;margin:0!important;box-sizing:border-box}}
/* Oct 29 batch 15b: keep each highlight together (Mom of 4, Army Family) */
@media (max-width:640px){html body #team .tm__chips li{white-space:nowrap!important}}

/* Oct 29 batch 16: per-photo dots, review intro at paragraph size on phones, About team rows tappable anywhere + aligned toggles, About client story text under the video on phones */
.js-ba__controls:has(.js-ba__dots--u) .js-ba__dots:not(.js-ba__dots--u){display:none!important}
@media (max-width:600px){
html body .rev-head .lead,html body #reviews .sec-head .lead{font-size:17px!important;line-height:1.6!important}
}
@media (max-width:640px){
html body #team .tm{cursor:pointer;grid-template-columns:72px minmax(0,1fr) 24px!important;padding-right:20px!important}
html body #team .tm::after{justify-self:start!important;width:24px;text-align:center}
html body #team .tm__b{cursor:auto}
}
@media (max-width:760px){
html body .vsplit{gap:20px!important}
html body .vsplit__tx{display:contents!important}
html body .vsplit__tx>*{order:1}
html body .vsplit .vfac{order:2;margin-block:4px}
html body .vsplit__tx>p~p,html body .vsplit__tx>a{order:3}
html body .vsplit__tx>a{justify-self:start}
}
/* Oct 29 batch 16b: team highlights wrap between items, never inside one */
@media (max-width:640px){
html body #team .tm__chips li{display:inline-block!important;white-space:nowrap!important}
html body #team .tm__chips li+li::before{content:"\00B7"!important;margin:0 6px}
html body #team .tm[aria-labelledby="tm-sherry"] .tm__chips li:nth-child(2),html body #team .tm[aria-labelledby="tm-alex"] .tm__chips li:nth-child(3){display:block!important}
html body #team .tm[aria-labelledby="tm-sherry"] .tm__chips li:nth-child(2)::before,html body #team .tm[aria-labelledby="tm-alex"] .tm__chips li:nth-child(3)::before{content:none!important;margin:0}
}
/* Oct 29 batch 16c: separator dot after each highlight (so a wrapped line never starts with a dot) */
@media (max-width:640px){
html body #team .tm__chips li::before{content:none!important;margin:0!important}
html body #team .tm__chips li:not(:last-child)::after{content:"\00B7";margin:0 6px 0 7px}
html body #team .tm[aria-labelledby="tm-sherry"] .tm__chips li:nth-child(1)::after,html body #team .tm[aria-labelledby="tm-alex"] .tm__chips li:nth-child(2)::after,html body #team .tm[aria-labelledby="tm-alex"] .tm__chips li:nth-child(3)::after{content:none}
}
/* Oct 29 batch 16d */
@media (max-width:640px){html body #team .tm .tm__chips li+li::before{content:none!important;margin:0!important}}