/* Hallmark · v2.0.0 · theme: formwork (dealt 1/3, seed los-angeles-tile-contractor-bb99) · pour: cast
   shape: Conversational FAQ, from draw 2a3cf8 · hero: Ledge · nav: slab · footer: index columns
   signature: Pattern Bench, the floor drawn live and sent with the quote
   fonts: Oswald 700 / Archivo 400 500 / Archivo Narrow 500 · palette: concrete, ink, one safety orange
   critique: The archive has no job records, so project sheets cannot carry verified specifications or locations.
   waive: photo colour on project pages, because homeowners judge tile colour there */
:root {
  --color-clear: transparent;
  --texture-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h180v180H0z' filter='url(%23n)'/%3E%3C/svg%3E");
  --color-paper: oklch(74% 0.008 80);
  --color-paper-2: oklch(69% 0.009 80);
  --color-paper-3: oklch(64% 0.01 80);
  --color-plate: oklch(82% 0.007 80);
  --color-plate-ink: oklch(95% 0.006 80);
  --color-ink: oklch(18% 0.005 270);
  --color-ink-2: oklch(28% 0.006 80);
  --color-muted: oklch(31.5% 0.008 80);
  --color-rule: oklch(64% 0.01 80);
  --color-accent: oklch(66% 0.21 38);
  --color-accent-ink: oklch(18% 0.005 270);
  --color-accent-deep: oklch(48% 0.17 38);
  --color-focus: oklch(42% 0.15 38);
  --color-error: oklch(42% 0.15 38);
  --font-display: "Oswald", ui-sans-serif, sans-serif;
  --font-body: "Archivo", ui-sans-serif, sans-serif;
  --font-figure: "Archivo Narrow", ui-sans-serif, sans-serif;
  --radius: 0;
  --rule-hair: 1px;
  --rule-bar: 3px;
  --shadow-plate: 6px 6px 0 var(--color-ink);
  --texture-opacity: 0.05;
  --text-xs: 0.875rem; --text-sm: 1rem; --text-md: 1.0625rem; --text-lg: 1.375rem;
  --text-display-s: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-display-m: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  --text-display-l: clamp(3.5rem, 1.5rem + 8vw, 9.5rem);
  --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 5rem; --space-3xl: 8rem;
  --dur-micro: 120ms; --ease-out: cubic-bezier(.2,.7,.2,1);
  --tile-white: oklch(94% 0 0); --tile-warm-grey: oklch(80% 0 0); --tile-concrete: oklch(67% 0 0); --tile-charcoal: oklch(39% 0 0); --tile-black: oklch(23% 0 0);
  --grout-bright-white: oklch(98% 0 0); --grout-warm-grey: oklch(78% 0 0); --grout-charcoal: oklch(36% 0 0); --grout-black: oklch(16% 0 0);
}
@font-face { font-family: "Oswald"; src: url('/assets/fonts/oswald-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url('/assets/fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url('/assets/fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url('/assets/fonts/archivo-narrow-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
* { box-sizing: border-box; border-radius: var(--radius); }
html, body { overflow-x: clip; }
html { scroll-padding-top: 1.25rem; }
body { margin: 0; color: var(--color-ink-2); background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: var(--texture-opacity); mix-blend-mode: multiply; background-image: var(--texture-image); }
::selection { color: var(--color-accent-ink); background: var(--color-accent); }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: color-mix(in oklch, var(--color-ink) 10%, var(--color-clear)); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; transition: none !important; }
button { cursor: pointer; }
button:disabled, .button[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
img, svg { max-width: 100%; }
img { display: block; object-fit: cover; outline: 2px solid var(--color-ink); outline-offset: -2px; }
figure { margin: 0; }
figcaption, .caption, label, legend, .breadcrumbs, th, .label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; }
figcaption { padding-top: .7rem; }
h1, h2, h3, .display { margin: 0; font-family: var(--font-display); font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: -.005em; line-height: 1.05; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
h1 { font-size: var(--text-display-m); }
h2 { font-size: var(--text-display-s); }
h3 { font-size: var(--text-lg); }
p { margin: 1rem 0; max-width: 68ch; }
small { font-size: var(--text-xs); }
.figure, [data-phone-number], input[type='number'] { font-family: var(--font-figure); font-weight: 500; font-variant-numeric: tabular-nums; }
.container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.section { border-top: var(--rule-bar) solid var(--color-ink); padding-block: clamp(3rem, 5vw, 5rem); }
.section h2 { margin-bottom: 1.5rem; }
.grid-12 { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(16px,2vw,32px); }
.span-7 { grid-column: span 7; min-width: 0; }
.span-5 { grid-column: span 5; min-width: 0; }
.span-6 { grid-column: span 6; min-width: 0; }
.span-12 { grid-column: 1 / -1; min-width: 0; }
.plate { background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-plate); padding: clamp(20px,2.5vw,32px); }
.button, button[type='submit'], .segmented button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 2rem; border: 2px solid var(--color-ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0; font-size: var(--text-sm); line-height: 1.2; background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 2px 3px color-mix(in oklch, var(--color-ink) 30%, var(--color-clear)); transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.button:hover, .segmented button:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.button:active, .segmented button:active { translate: 0 2px; }
.primary, button[type='submit'] { border: none; background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 3px 0 var(--color-accent-deep); }
.primary:active, button[type='submit']:active { translate: 0 3px; box-shadow: 0 0 0 var(--color-accent-deep); }
.actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.slab { height: 72px; background: var(--color-ink); color: var(--color-plate-ink); position: relative; z-index: 10; }
.nav-inner { height: 72px; display: flex; align-items: center; gap: 1.6rem; }
.wordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.33rem; line-height: 1.04; text-decoration: none; width: 154px; flex-shrink: 0; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; font-size: var(--text-xs); font-weight: 500; }
.desktop-nav>a, .desktop-nav summary { text-decoration: none; cursor: pointer; }
.desktop-nav>a:hover, .desktop-nav summary:hover, .desktop-nav .active { text-decoration: underline; text-decoration-thickness: 3px; }
.desktop-nav details { position: relative; }
.desktop-nav summary { list-style: none; }
.desktop-nav summary::-webkit-details-marker { display: none; }
.desktop-nav summary::after { content: '+'; margin-left: .35rem; }
.desktop-nav details[open] summary::after { content: '−'; }
.dropdown { position: absolute; top: 34px; left: -20px; width: 280px; padding: 15px 20px; background: var(--color-ink); border: 2px solid var(--color-plate-ink); }
.dropdown a { display: block; padding: .65rem 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-decoration: none; }
.nav-phone { white-space: nowrap; font-size: 1.15rem; }
.nav-quote { padding-inline: 1.1rem; min-height: 42px; }
.mobile-tools { display: none; margin-left: auto; align-items: center; gap: 1.2rem; }
.mobile-tools button { color: var(--color-plate-ink); background: var(--color-ink); border: 1px solid var(--color-plate-ink); padding: .5rem .7rem; }
.mobile-tools svg { width: 22px; height: 22px; }
.mobile-menu { position: fixed; inset: 0; z-index: 30; background: var(--color-ink); color: var(--color-plate-ink); overflow-y: auto; padding: 2rem; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a, .mobile-menu summary { display: block; padding: .85rem 0; }
.mobile-menu .menu-links { margin-top: 2rem; }
.mobile-menu button { background: var(--color-ink); color: var(--color-plate-ink); border: 2px solid var(--color-plate-ink); padding: .4rem .9rem; float: right; }
.hero { min-height: min(calc(100dvh - 72px),900px); display: grid; grid-template-rows: minmax(260px,1fr) auto; }
.hero { height: min(calc(100dvh - 72px),900px); }
.hero-photo { min-height: 0; overflow: clip; }
.hero-photo img { width: 100%; height: 100%; max-height: 650px; min-height: 260px; object-position: center 54%; }
.hero-ledge { border-top: var(--rule-bar) solid var(--color-ink); padding-block: 1.4rem 2rem; }
.hero h1 { font-size: var(--text-display-l); line-height: 1; max-width: 14ch; }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-top: 1rem; }
.hero-bottom p { font-size: var(--text-lg); max-width: 40ch; margin: 0; }
.hero-bottom .actions { flex-shrink: 0; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.3rem 2rem; }
.filters .button { padding-inline: 1.1rem; font-size: var(--text-xs); }
.filters [aria-pressed='true'] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.work-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem 1.5rem; }
.project-card[hidden] { display: none; }
.project-card img { width: 100%; aspect-ratio: 1; height: auto; }
.project-card a { text-decoration: none; display: block; }
.project-card a:hover .project-name { text-decoration: underline; text-decoration-thickness: 3px; }
.project-card figcaption { font-size: var(--text-xs); font-weight: 400; }
.project-name { display: block; font-weight: 500; font-size: var(--text-sm); }
.more-link { display: inline-block; margin-top: 2rem; }
.case-main { width: 100%; height: 510px; }
.case-thumbnails { display: flex; gap: .75rem; margin-top: 1rem; }
.case-thumbnails button, .gallery-thumbs button { padding: 0; border: 0; background: var(--color-paper); width: 92px; }
.case-thumbnails img, .gallery-thumbs img { width: 100%; height: 72px; }
.case-thumbnails [aria-current='true'], .gallery-thumbs [aria-current='true'] { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.job-sheet h3 { font-size: var(--text-display-s); margin-bottom: 1.5rem; }
table { width: 100%; border-collapse: collapse; border-top: var(--rule-bar) solid var(--color-ink); font-size: var(--text-sm); }
th, td { padding: .7rem .2rem; border-bottom: var(--rule-hair) solid var(--color-paper-3); text-align: left; vertical-align: top; }
th { width: 28%; }
.muted { color: var(--color-muted); }
.service-row { display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,5fr) minmax(0,3fr) minmax(0,2fr); gap: clamp(16px,2vw,32px); border-top: var(--rule-hair) solid var(--color-paper-3); padding-block: 1.6rem; align-items: start; }
.service-row:first-of-type { border-top: var(--rule-bar) solid var(--color-ink); }
.service-row h3 { font-size: var(--text-display-s); }
.service-row p { margin: 0; font-size: var(--text-sm); }
.service-row a { font-size: var(--text-xs); }
.ink-band { background: var(--color-ink); color: var(--color-plate-ink); position: relative; }
.ink-band::before { content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--texture-opacity);mix-blend-mode:screen;background-image:var(--texture-image); }
.ink-band h2, .ink-band h3 { color: var(--color-plate-ink); }
.area-list { list-style: none; padding: 0; margin: 0; }
.area-list li { padding: .65rem 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.area-list a { font-size: var(--text-display-m); color: var(--color-plate-ink); text-decoration: none; display: block; }
.area-list a:hover, .area-list a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; }
.area-zips { display: block; font-family: var(--font-figure); font-size: var(--text-xs); line-height: 1.5; opacity: 0; }
.area-list a:hover .area-zips, .area-list a:focus-visible .area-zips { opacity: 1; }
.map { width: 100%; height: 480px; border: 2px solid var(--color-ink); filter: grayscale(1) contrast(1.1); }
.ink-band .map { border-color: var(--color-plate-ink); }
.faq details { border-top: var(--rule-hair) solid var(--color-paper-3); padding-block: 1.1rem; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--text-lg); line-height: 1.25; color: var(--color-ink); }
.faq p { font-size: var(--text-sm); }
.reviews-slot { border-top: var(--rule-hair) solid var(--color-paper-3); padding-block: 1.2rem; }
.close-section .contact-block { padding-top: 1rem; }
.contact-block p { margin: 0 0 1.5rem; }
.contact-phone { font-family: var(--font-figure); font-size: var(--text-display-s); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-block a { overflow-wrap: anywhere; }
.lead-form fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.lead-form legend { margin-bottom: .5rem; }
.room-choices, .segmented { display: flex; flex-wrap: wrap; gap: .4rem; }
.room-choices button { background: var(--color-paper-2); border: 2px solid var(--color-ink); color: var(--color-ink); padding: .5rem .65rem; font-size: var(--text-xs); font-family: var(--font-display); text-transform: uppercase; min-height: 44px; }
.room-choices [aria-pressed='true'] { text-decoration: underline; text-decoration-thickness: 3px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.25rem; }
.field { min-width: 0; margin-bottom: 1rem; }
.field-full { grid-column: 1/-1; }
.field label { display: block; margin-bottom: .45rem; }
input, textarea, select { width: 100%; min-height: 48px; background: var(--color-paper-2); border: 2px solid var(--color-ink); padding: .65rem .8rem; box-shadow: inset 0 2px 3px color-mix(in oklch, var(--color-ink) 30%, var(--color-clear)); }
textarea { min-height: 108px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-left-width: 3px; }
.field-error:not(:empty), .form-status:not(:empty) { display: block; border-left: 3px solid var(--color-ink); padding-left: .65rem; margin-top: .5rem; font-size: var(--text-xs); color: var(--color-ink); }
.form-hint, .form-consent { font-size: var(--text-xs); }
.form-consent { margin-top: 1.2rem; max-width: 63ch; }
.site-footer { border-top: var(--rule-bar) solid var(--color-ink); padding-block: 3rem 1.6rem; }
.footer-columns { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; }
.footer-columns h2 { font-family: var(--font-body); font-size: var(--text-sm); text-transform: none; font-weight: 500; margin-bottom: 1rem; letter-spacing: 0; }
.footer-columns a { display: block; font-size: var(--text-xs); margin-bottom: .5rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: end; gap: 2rem; border-top: var(--rule-hair) solid var(--color-paper-3); padding-top: 1.4rem; margin-top: 2rem; font-size: var(--text-xs); }
.footer-bottom p { margin: 0; }
.inner-hero { border-top: var(--rule-bar) solid var(--color-ink); padding-block: 2rem 3rem; }
.breadcrumbs { margin: 0 0 1.5rem; }
.breadcrumbs a { text-decoration: underline; }
.inner-hero h1 { max-width: 17ch; }
.inner-hero p:last-child { font-size: var(--text-lg); margin-bottom: 0; }
.long-body { display: grid; grid-template-columns: minmax(0,8fr) minmax(0,4fr); gap: clamp(16px,2vw,32px); }
.article { min-width: 0; }
.article section { padding-bottom: 2rem; border-top: var(--rule-bar) solid var(--color-ink); padding-top: 1.5rem; }
.article h2 { margin-bottom: 1.2rem; }
.article p { max-width: 68ch; }
.on-page { align-self: start; position: sticky; top: 2rem; border-top: var(--rule-bar) solid var(--color-ink); padding-top: 1.5rem; }
.on-page h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; text-transform: none; }
.on-page a { display: block; padding: .7rem 0; font-size: var(--text-xs); border-bottom: 1px solid var(--color-paper-3); }
.photo-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-block: 2rem; }
.photo-pair img { width: 100%; height: 340px; }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px,2vw,32px); }
.link-list { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.fact-strip { margin-bottom: 2.5rem; }
.fact-strip td { font-family: var(--font-figure); font-variant-numeric: tabular-nums; }
.project-gallery { border-top: var(--rule-bar) solid var(--color-ink); padding-block: 1.5rem 3rem; }
.gallery-main { width: 100%; height: min(70dvh,780px); object-fit: contain; background: var(--color-ink); }
.gallery-controls { display:flex;align-items:center;gap:1rem;margin-block:1rem; }
.gallery-controls button { width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--color-ink);background:var(--color-paper-2); }
.gallery-controls svg { width:22px;height:22px; }
.gallery-controls p { margin:0;flex:1;font-size:var(--text-xs); }
.gallery-thumbs { display:flex;flex-wrap:wrap;gap:.75rem; }
.project-copy { font-size:var(--text-md); }
.privacy-layout { display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,2vw,32px); }
.privacy-layout .on-page { grid-column:1;grid-row:1; }
.privacy-layout .article { grid-column:2; }
.quote-modal { max-width:560px;width:calc(100% - 40px);max-height:90dvh;overflow-y:auto; background:var(--color-plate);border:3px solid var(--color-ink);box-shadow:var(--shadow-plate);padding:2rem;color:var(--color-ink-2); }
.quote-modal::backdrop { background:color-mix(in oklch,var(--color-ink) 60%,var(--color-clear)); }
.quote-modal h2 { margin-bottom:1.5rem; }
.modal-close { float:right;border:2px solid var(--color-ink);background:var(--color-plate);font-size:1.5rem;min-width:44px;min-height:44px; }
.mobile-call-bar { display:none; }
.skip-link { position:absolute;left:20px;top:15px;z-index:40;background:var(--color-plate);color:var(--color-ink);padding:1rem;transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
[hidden] { display:none !important; }
@media (min-width:1200px) and (max-width:1919px) and (max-height:850px) { .hero { grid-template-rows:minmax(200px,1fr) auto; } .hero-photo img { height:100%;max-height:410px; } .hero h1 { font-size:min(var(--text-display-l),7.5rem);max-width:none; } .hero-ledge { padding-block:1rem 1.5rem; } }
@media (min-width:1920px) { .hero h1 { max-width:17ch; } }
@media (max-width:1199px) { .nav-inner { gap:1rem; } .desktop-nav { gap:.9rem; } .nav-phone { font-size:1rem; } .nav-quote { padding-inline:.7rem; } .hero-bottom { align-items:start; } .hero-bottom .actions { max-width:45%; } .service-row { grid-template-columns:minmax(0,.5fr) minmax(0,4fr) minmax(0,3fr); } .service-row a { grid-column:3; } .hero h1 { font-size:var(--text-display-m);max-width:17ch; } }
@media (max-width:1000px) { .desktop-nav,.nav-phone,.nav-quote { display:none; } .mobile-tools { display:flex; } }
@media (max-width:767px) { body { padding-bottom:60px; } .wordmark { width:160px; } .hero { min-height:calc(100dvh - 72px);grid-template-rows: minmax(220px,48dvh) auto; } .hero-photo img { min-height:220px;height:100%; } .hero h1 { font-size:var(--text-display-m);max-width:13ch; } .hero-ledge { padding-block:1.1rem 1.6rem; } .hero-bottom { display:block;margin-top:1rem; } .hero-bottom p { font-size:var(--text-md); } .hero-bottom .actions { max-width:none;margin-top:1.2rem;gap:.6rem; } .hero-bottom .button { padding-inline:1rem; } .grid-12,.long-body,.privacy-layout { grid-template-columns:minmax(0,1fr); } .span-7,.span-5,.span-6 { grid-column:auto; } .work-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem .85rem; } .filters { gap:.4rem; } .filters .button { min-height:44px;padding-inline:.8rem; } .project-name { font-size:var(--text-xs); } .case-main { height:340px; } .job-sheet { margin-top:1.3rem; } .service-row { grid-template-columns:minmax(0,.5fr) minmax(0,6fr);gap:.7rem; } .service-row h3 { font-size:1.75rem; } .service-row p,.service-row a { grid-column:2; } .area-list a { font-size:var(--text-display-m); } .area-zips { opacity:1; } .map { height:360px; } .contact-phone { font-size:2.1rem; } .contact-block { margin-top:2rem; } .footer-columns { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-bottom { display:block; } .footer-bottom p+p { margin-top:1rem; } .site-footer .container { display:flex;flex-direction:column; } .footer-bottom { order:-1;margin:0 0 2rem;padding:0 0 2rem;border-top:0;border-bottom:1px solid var(--color-paper-3); } .on-page { display:none; } .privacy-layout .article { grid-column:auto; } .photo-pair img { height:230px; } .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .form-grid { grid-template-columns:minmax(0,1fr);gap:0; } .quote-modal { padding:1.3rem; } .mobile-call-bar:not([hidden]) { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:fixed;inset:auto 0 0;z-index:20;background:var(--color-ink);color:var(--color-plate-ink);padding:.5rem;gap:.5rem; } .mobile-call-bar a { font-size:.9rem;min-height:44px;text-align:center;display:flex;justify-content:center;align-items:center; } .gallery-main { height:55dvh; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important;animation:none !important;scroll-behavior:auto !important; } }







/* Pattern Bench additions */
/* Pattern Bench. The shared site stylesheet supplies all design and tile tokens. */
.pattern-band {
  border-top: var(--rule-bar) solid var(--color-ink);
  background: var(--color-paper-2);
  padding-block: var(--space-2xl);
}

.pattern-bench [hidden] { display: none !important; }

.pattern-bench__heading {
  min-width: 0;
  margin: 0 0 var(--space-xl);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.02;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

.pattern-bench__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.pattern-bench__visual, .pattern-bench__controls, .pattern-bench__figure { min-width: 0; }
.pattern-bench__visual { grid-row: 1; }
.pattern-bench__figure { margin: 0; }

.pattern-bench__drawing {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  overflow: clip;
  border: var(--rule-bar) solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-plate);
  box-shadow: var(--shadow-plate);
}

.pattern-bench__layer { transition: opacity var(--dur-micro) var(--ease-out); }
.pattern-bench__tile--white { fill: var(--tile-white); }
.pattern-bench__tile--warm-grey { fill: var(--tile-warm-grey); }
.pattern-bench__tile--concrete { fill: var(--tile-concrete); }
.pattern-bench__tile--charcoal { fill: var(--tile-charcoal); }
.pattern-bench__tile--black { fill: var(--tile-black); }
.pattern-bench__grout--bright-white { fill: var(--grout-bright-white); }
.pattern-bench__grout--warm-grey { fill: var(--grout-warm-grey); }
.pattern-bench__grout--charcoal { fill: var(--grout-charcoal); }
.pattern-bench__grout--black { fill: var(--grout-black); }

.pattern-bench__readout {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--rule-bar) solid var(--color-ink);
  color: var(--color-ink);
  font-family: var(--font-figure);
  font-size: var(--text-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.pattern-bench__readout p { margin: 0; }
.pattern-bench__readout p + p { margin-top: var(--space-xs); }
.pattern-bench__send {
  min-height: 48px;
  margin-top: var(--space-md);
  padding: 0.75rem 2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: 0 3px 0 var(--color-accent-deep);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.pattern-bench__send:hover:not(:disabled) { box-shadow: 0 4px 0 var(--color-accent-deep); }
.pattern-bench__send:active { translate: 0 3px; box-shadow: none; }
.pattern-bench__send:disabled { opacity: 0.55; cursor: not-allowed; }
.pattern-bench__send-status, .pattern-bench__noscript {
  margin: var(--space-sm) 0 0;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.pattern-bench__controls {
  display: grid;
  gap: var(--space-md);
}
.pattern-bench__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pattern-bench__group legend, .pattern-bench__room-label {
  display: block;
  margin: 0 0 var(--space-xs);
  padding: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.pattern-bench__segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.pattern-bench__option {
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  text-transform: uppercase;
}
.pattern-bench__option:hover:not(:disabled) { background: var(--color-plate); }
.pattern-bench__option[aria-pressed="true"],
.pattern-bench__option[aria-pressed="true"]:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.pattern-bench__option:active:not(:disabled) { translate: 0 2px; }
.pattern-bench__option:disabled { opacity: 0.55; cursor: not-allowed; }
.pattern-bench__option:focus-visible, .pattern-bench__room-input:focus-visible,
.pattern-bench__send:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.pattern-bench__group[data-pattern-group="size"] .pattern-bench__option,
.pattern-bench__group[data-pattern-group="joint"] .pattern-bench__option {
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-transform: none;
}
.pattern-bench__note {
  margin: var(--space-xs) 0 0;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.pattern-bench__room-input {
  box-sizing: border-box;
  width: min(100%, 14rem);
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-figure);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}
.pattern-bench__room-input[aria-invalid="true"] { border-left-width: var(--rule-bar); }

@media (min-width: 768px) {
  .pattern-bench__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(16px, 2vw, 32px);
  }
  .pattern-bench__controls { grid-column: 1; grid-row: 1; }
  .pattern-bench__visual { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pattern-bench__layer { transition: none; }
  .pattern-bench__send { transition: none; }
  .pattern-bench__option:active:not(:disabled) { translate: none; }
}

/* Progressive enhancement and mobile navigation fallback. */
.nojs-nav { display: none; }
.mobile-menu .active { text-decoration: underline; text-decoration-thickness: 3px; }
html:not(.has-js) .filters, html:not(.has-js) .room-choice-list, html:not(.has-js) [data-menu-toggle] { display: none; }
@media (max-width:1000px) {
  .nojs-nav { display: block; padding-block: 1rem; border-bottom: var(--rule-bar) solid var(--color-ink); }
  .nojs-nav a { display: block; padding-block: .5rem; }
}

/* Hover: no underline shifts; motion and colour instead. */
a:hover { text-decoration-thickness: 1px; }
.button:hover, .segmented button:hover { text-decoration: none; }
.desktop-nav>a:hover, .desktop-nav summary:hover, .area-list a:hover, .area-list a:focus-visible, .project-card a:hover .project-name { text-decoration: none; }
.desktop-nav>a, .desktop-nav summary { position: relative; text-decoration: none; }
.desktop-nav>a::after, .desktop-nav summary::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.desktop-nav>a:hover::after, .desktop-nav summary:hover::after, .desktop-nav .active::after { transform: scaleX(1); }
.desktop-nav .active { text-decoration: none; }
.button { transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--color-accent-deep, var(--color-ink)); }
.project-card a { overflow: hidden; }
.project-card img { transition: transform .5s ease, filter .3s ease; }
.project-card a:hover img, .project-card a:focus-visible img { transform: scale(1.06); filter: brightness(1.05) saturate(1.1); }
.project-card .project-name { display: block; transition: transform .25s ease, color .25s ease; }
.project-card a:hover .project-name, .project-card a:focus-visible .project-name { transform: translateX(6px); color: var(--color-accent-deep, inherit); }
.area-list a { display: inline-block; transition: transform .25s ease, color .25s ease; }
.area-list a:hover, .area-list a:focus-visible { transform: translateX(12px); }
@media (prefers-reduced-motion: reduce) { .button, .project-card img, .project-card .project-name, .area-list a, .desktop-nav>a::after, .desktop-nav summary::after { transition: none; } .project-card a:hover img, .button:hover, .area-list a:hover { transform: none; } }
.quote-modal { scrollbar-width: none; -ms-overflow-style: none; }
.quote-modal::-webkit-scrollbar { display: none; }

/* Sticky bottom CTA bar: shown after 30% scroll, all screen sizes. */
.mobile-call-bar:not([hidden]) { display:flex;align-items:center;justify-content:center;gap:1.5rem;position:fixed;inset:auto 0 0;z-index:20;background:var(--color-ink);color:var(--color-plate-ink);padding:.75rem 1.25rem;box-shadow:0 -4px 16px rgb(0 0 0 / .25);animation:cta-bar-in .3s ease; }
.cta-bar-text { margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--text-md,1.25rem); }
.cta-bar-actions { display:flex;gap:.75rem; }
.mobile-call-bar .button { gap:.35em;min-height:44px;padding:.5rem 1.4rem;font-size:.95rem;text-align:center; }
.mobile-call-bar .button:not(.primary) { border-color:var(--color-plate-ink);color:var(--color-plate-ink);background:transparent; }
body { padding-bottom:0; }
html.has-cta-bar body { padding-bottom:76px; }
@keyframes cta-bar-in { from { transform:translateY(100%); } to { transform:none; } }
@media (max-width:767px) {
  .mobile-call-bar:not([hidden]) { flex-direction:column;gap:.4rem;padding:.55rem .6rem; }
  .cta-bar-text { font-size:.85rem; }
  .cta-bar-actions { width:100%;gap:.5rem; }
  .cta-bar-actions .button { flex:1;padding-inline:.5rem;font-size:.85rem; }
  html.has-cta-bar body { padding-bottom:112px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-call-bar:not([hidden]) { animation:none; } }