@charset "UTF-8";
/* ==========================================================================
   GRANITE ACOSTA — site.css
   Design language: THE SHOWROOM.
   A stone slab is chosen the way a painting is chosen — one at a time, on a
   wall, with a label telling you what it is and where it came from. So the
   site is built like a gallery: one typeface, hairlines instead of boxes,
   huge margins, and UI type small enough that the stone is always the
   largest thing on screen.

   The signature element is the SLAB LABEL — material, name in italic serif,
   origin, finish, thickness. Italic for the stone's name is borrowed from
   the way a gallery sets the title of a work.

   Light ("showroom") and dark ("night viewing") are complete themes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ground:   #FAFAF9;
  --ground-2: #F1F0ED;
  --ink:      #0A0A09;
  --ink-2:    #3E3E3A;   /* body copy   — 10.1:1 on ground */
  --ink-3:    #6A6A64;   /* metadata    —  5.2:1 on ground */
  --line:     #E0DED9;
  --line-2:   #C8C5BE;

  /* No brand colour. The stone supplies the colour; the page supplies none.
     To reintroduce the brass identity, set --accent to #9A5D06 and nothing
     else needs changing. */
  --accent:   var(--ink);
  --on-accent:#FAFAF9;
  --focus:    #2563EB;
  --live:     #1B7F4B;
  --bad:      #B91C1C;
  --shadow:   0 30px 70px -50px rgba(10,10,9,.45);

  --f: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-name: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  --t-micro: .6875rem;
  --t-small: .8125rem;
  --t-body:  .9375rem;
  --t-lead:  clamp(1.02rem, .95rem + .35vw, 1.22rem);
  --t-h2:    clamp(1.65rem, 1.1rem + 2.3vw, 3rem);
  --t-h1:    clamp(2.1rem, 1.2rem + 4.2vw, 4.4rem);

  --gut:  clamp(20px, 5vw, 60px);
  --wrap: 1480px;
  --sec:  clamp(68px, 9vw, 156px);

  /* Spacing scale — several pages set margins inline with these, so they
     have to survive the restyle even though the new layout barely uses them. */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;
}

[data-theme="dark"] {
  --ground:   #0B0B0A;
  --ground-2: #141413;
  --ink:      #F4F4F2;
  --ink-2:    #C2C2BD;
  --ink-3:    #8D8D87;   /* 5.3:1 on the dark ground */
  --line:     #262624;
  --line-2:   #3A3A37;
  --on-accent:#0A0A09;
  --focus:    #7DA6FF;
  --live:     #4ADE80;
  --bad:      #FCA5A5;
  --shadow:   0 30px 70px -50px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f); font-size: var(--t-body); line-height: 1.62;
  color: var(--ink); background: var(--ground);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  font-variant-numeric: tabular-nums;
  transition: background 400ms var(--ease), color 400ms var(--ease);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:target { scroll-margin-top: 96px; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--ground); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--ink);
        color: var(--ground); padding: 12px 20px; font-size: var(--t-small);
        transition: top 160ms var(--ease); }
.skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.024em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: 1.06rem; letter-spacing: -.012em; line-height: 1.28; }

/* The tracked micro-label — every piece of metadata on the site uses it. */
.eyebrow, .label {
  display: block; font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow.is-centred { text-align: center; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.small { font-size: var(--t-small); }
.muted { color: var(--ink-3); }

/* Stone and material names take italic serif, the way a gallery sets the
   title of a work. It is the one flourish on the site. */
.name { font-family: var(--f-name); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 880px; }
.sec { padding-block: var(--sec); position: relative; }
.sec--line { border-top: 1px solid var(--line); }
.sec--tint { background: var(--ground-2); }
.sec--dark { background: var(--ground-2); }   /* the old dark band is now simply a tint */

/* Section head: numeral, rule, headline. */
.sec-head { margin-bottom: clamp(34px, 5vw, 68px); }
.sec-head__num {
  display: flex; align-items: baseline; gap: 18px;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.sec-head__body > .eyebrow { display: none; }   /* the numeral row carries the label now */
.sec-head__body > h2 { max-width: 22ch; }
.sec-head__body > p { margin-top: 20px; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 36px); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 28px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  font-size: var(--t-small); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { opacity: .82; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--brass { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { opacity: 1; border-color: var(--ink); }

.link, .textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: var(--t-small); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line-2);
  transition: border-color var(--dur) var(--ease);
}
.link:hover, .textlink:hover { border-bottom-color: var(--ink); }
.link svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--ground);
       border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; gap: 26px; height: 64px; }

.logo { display: flex; align-items: center; gap: 11px; margin-right: auto; flex: none;
        padding-block: 8px; position: relative; z-index: 2; }
.logo__mark { width: 26px; height: 26px; flex: none; color: var(--ink); }
.logo__txt { display: flex; align-items: baseline; gap: 10px; }
.logo__name { font-size: .95rem; font-weight: 600; letter-spacing: .26em;
              text-transform: uppercase; color: var(--ink); }
.logo__sub { font-size: var(--t-micro); letter-spacing: .1em; color: var(--ink-3); }
@media (max-width: 700px) { .logo__sub { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(15px, 2vw, 28px); }
.nav a:not(.btn) { font-size: var(--t-small); color: var(--ink-3); padding: 11px 0;
                   position: relative; transition: color var(--dur) var(--ease); }
.nav a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: 6px; height: 1px;
                          width: 0; background: currentColor; transition: width var(--dur) var(--ease); }
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current='page']::after { width: 100%; }
.nav a:not(.btn)[aria-current='page'] { color: var(--ink); }
.nav > .btn { display: none; }

.hdr__cta { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; }
.hdr__cta > .btn { min-height: 40px; padding: 10px 18px; font-size: var(--t-micro); }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center;
            border: 1px solid var(--line-2); color: var(--ink-2);
            transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .moon { display: none; }
[data-theme="dark"] .icon-btn .sun { display: none; }
[data-theme="dark"] .icon-btn .moon { display: block; }

/* Language switch */
.lang { position: relative; }
.lang__btn { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 12px;
             border: 1px solid var(--line-2); color: var(--ink-2);
             font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em;
             text-transform: uppercase; transition: border-color var(--dur) var(--ease); }
.lang__btn:hover { border-color: var(--ink); color: var(--ink); }
.lang__btn svg { width: 13px; height: 13px; }
.lang__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px;
              background: var(--ground); border: 1px solid var(--line);
              box-shadow: var(--shadow); padding: 5px; display: none; z-index: 10; }
.lang.is-open .lang__menu { display: block; }
.lang__menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                     width: 100%; min-height: 42px; padding: 8px 12px; text-align: left;
                     font-size: var(--t-small); color: var(--ink-2);
                     transition: background var(--dur) var(--ease); }
.lang__menu button:hover { background: var(--ground-2); }
.lang__menu button[aria-selected='true'] { color: var(--ink); font-weight: 500; }
.lang__menu button[aria-selected='true']::after { content: '✓'; }

.burger { display: none; width: 40px; height: 40px; flex-direction: column;
          justify-content: center; align-items: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink);
               transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* On a phone the wordmark + theme + language + burger add up to more than the
   viewport, and .logo is flex:none so it cannot give way. Scale the header
   chrome down rather than let the page scroll sideways. */
@media (max-width: 620px) {
  .hdr__in { gap: 10px; }
  .logo { gap: 8px; min-width: 0; }
  .logo__mark { width: 22px; height: 22px; }
  .logo__name { font-size: .78rem; letter-spacing: .14em; white-space: nowrap; }
  .hdr__cta { gap: 4px; }
  .lang__btn { padding: 6px 8px; gap: 5px; }
  .icon-btn, .burger { width: 38px; }
}

@media (max-width: 980px) {
  .burger { display: flex; }
  /* absolute, not fixed — the header is the containing block and a fixed
     drawer would anchor to it rather than the viewport. */
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
         align-items: stretch; gap: 0; background: var(--ground);
         border-bottom: 1px solid var(--line); padding: 6px var(--gut) 26px;
         opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
         transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
         max-height: calc(100dvh - 64px); overflow-y: auto; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav a:not(.btn) { font-size: 1.25rem; padding: 16px 0; border-bottom: 1px solid var(--line);
                     color: var(--ink); }
  .nav a:not(.btn)::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 22px; }
  .hdr__cta > .btn { display: none; }
}

/* --------------------------------------------------------------------------
   7. HERO — one photograph, hung properly
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(44px, 6vw, 96px) clamp(36px, 5vw, 80px); }
.hero__in { display: grid; grid-template-columns: 1fr minmax(300px, 400px);
            gap: clamp(30px, 4.5vw, 76px); align-items: end; }
@media (max-width: 1040px) { .hero__in { grid-template-columns: 1fr; align-items: start; } }

.hero__frame { position: relative; aspect-ratio: 5 / 4; overflow: hidden;
               background: var(--ground-2); box-shadow: var(--shadow); }
.hero__frame img, .hero__frame svg { width: 100%; height: 100%; object-fit: cover; }

/* The hero follows the theme: bright kitchen in « showroom », the deep blue
   one in « night viewing ». No transition on purpose — the whole palette snaps
   at the toggle, and one element fading behind it would read as a glitch. */
.hero__img--dark { display: none; }
[data-theme="dark"] .hero__img--light { display: none; }
[data-theme="dark"] .hero__img--dark  { display: block; }

/* A soft halo over the pendant fixture in the night photo, so the light in the
   picture reads as actually lit. Percentages, not pixels: the image is exactly
   5:4 like the frame, so object-fit crops nothing and the halo stays on the
   fixture at every width. mix-blend-mode: screen ADDS light instead of laying
   a milky film over the photo. Dark theme only — there is no fixture to light
   up in the daytime photo. */
.hero__glow { display: none; }
[data-theme="dark"] .hero__glow {
  display: block; position: absolute; pointer-events: none;
  left: 63%; top: 13.5%; width: 66%; height: 30%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at center,
              rgba(255, 238, 205, .50) 0%,
              rgba(255, 228, 180, .26) 34%,
              rgba(255, 220, 165, .09) 60%,
              rgba(255, 220, 165, 0) 78%);
  animation: heroGlow 7s var(--ease) infinite;
}
@keyframes heroGlow { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .hero__glow { animation: none; opacity: .92; }
}
.hero h1 { margin-top: 18px; }
/* The emphasised phrase takes the serif italic rather than a synthesised
   slant of the grotesque — same device as a stone name, and it makes the
   headline look set rather than styled. */
.hero h1 em { font-family: var(--f-name); font-style: italic; font-weight: 400;
              letter-spacing: 0; }
.hero__lead { margin-top: 22px; color: var(--ink-2); max-width: 48ch; font-size: var(--t-lead); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero__meta { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Review proof, directly under the hero buttons. */
.proof { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
         max-width: 46ch; }
.proof__stars { display: flex; gap: 3px; color: var(--ink); margin-bottom: 12px; }
.proof__stars svg { width: 13px; height: 13px; }
.proof blockquote { font-family: var(--f-name); font-style: italic;
                    font-size: clamp(1.06rem, 1rem + .4vw, 1.28rem);
                    line-height: 1.4; color: var(--ink); }
.proof figcaption { margin-top: 10px; font-size: var(--t-micro); letter-spacing: .14em;
                    text-transform: uppercase; color: var(--ink-3); }

/* The spec strip — four facts, hairline-separated. */
.spec { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.spec__i { padding: 22px 0 24px; padding-left: 24px; border-left: 1px solid var(--line); }
.spec__i:first-child { border-left: 0; padding-left: 0; }
.spec__k { font-size: var(--t-micro); font-weight: 500; letter-spacing: .18em;
           text-transform: uppercase; color: var(--ink-3); }
.spec__v { font-size: clamp(1rem, .9rem + .5vw, 1.3rem); color: var(--ink); margin-top: 8px;
           line-height: 1.2; letter-spacing: -.01em; }
@media (max-width: 860px) {
  .spec__in { grid-template-columns: repeat(2, 1fr); }
  .spec__i { padding: 16px 20px 18px; border-top: 1px solid var(--line); }
  .spec__i:nth-child(odd) { border-left: 0; padding-left: 0; }
  .spec__i:nth-child(-n+2) { border-top: 0; }
}

/* Sub-page hero */
.phero { padding: clamp(40px, 6vw, 84px) 0 clamp(32px, 4vw, 56px);
         border-bottom: 1px solid var(--line); }
.phero h1 { max-width: 20ch; margin-top: 18px; }
.phero .lead { margin-top: 20px; }
.crumbs { display: flex; gap: 9px; font-size: var(--t-micro); letter-spacing: .12em;
          text-transform: uppercase; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. THE SLAB LABEL — the signature element
   -------------------------------------------------------------------------- */
.wall { display: grid; gap: 3px; }
.wall__k { font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.wall__name { font-family: var(--f-name); font-style: italic; font-size: 1.3rem;
              line-height: 1.2; color: var(--ink); }
.wall__name .sub { font-family: var(--f); font-style: normal; font-size: var(--t-small);
                   color: var(--ink-3); letter-spacing: .02em; }
.wall__spec { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
              color: var(--ink-3); margin-top: 6px; line-height: 1.75; }
.wall--lg .wall__name { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem); }

/* --------------------------------------------------------------------------
   9. SERVICES — a ledger, not cards
   -------------------------------------------------------------------------- */
.svc { border-top: 1px solid var(--line); }
.svc__i { display: grid; grid-template-columns: 54px 1fr minmax(0, 46ch); gap: clamp(16px, 2vw, 40px);
          align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line);
          transition: padding-inline var(--dur) var(--ease); }
.svc__i:hover { padding-inline: 10px; }
/* A service row that has photos behind it becomes clickable. Rows with no
   photos stay plain text rather than leading somewhere empty. */
.svc__i.is-linked { cursor: pointer; position: relative; }
.svc__i.is-linked:hover .svc__t { text-decoration: underline; text-underline-offset: 4px; }
.svc__go { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px;
           min-height: 40px; font-size: var(--t-micro); letter-spacing: .14em;
           text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
           transition: color var(--dur) var(--ease); }
.svc__i.is-linked:hover .svc__go { color: var(--ink); }
.svc__go svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.svc__i.is-linked:hover .svc__go svg { transform: translateX(4px); }
/* With a link in the row the description needs its own column back */
.svc__i.is-linked { grid-template-columns: 54px 1fr minmax(0, 34ch) auto; }
@media (max-width: 800px) {
  .svc__i.is-linked { grid-template-columns: 42px 1fr auto; }
  .svc__go { grid-column: 2 / -1; justify-self: start; margin-top: 6px; }
}

/* Category Q&A under the filtered gallery */
.catq { margin-top: clamp(44px, 6vw, 84px); padding-top: clamp(28px, 4vw, 48px);
        border-top: 1px solid var(--line); max-width: 860px; }

.svc__n { font-size: var(--t-micro); letter-spacing: .16em; color: var(--ink-3); }
.svc__t { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); letter-spacing: -.015em; color: var(--ink); }
.svc__d { color: var(--ink-3); font-size: var(--t-small); }
@media (max-width: 800px) {
  .svc__i { grid-template-columns: 42px 1fr; }
  .svc__d { grid-column: 2; margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   10. MATERIALS / STONES — presented like works on a wall
   -------------------------------------------------------------------------- */
.mat { background: transparent; border: 0; display: flex; flex-direction: column; }
.mat__swatch { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ground-2);
               border: 1px solid var(--line);
               transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mat:hover .mat__swatch { transform: translateY(-4px); box-shadow: var(--shadow); }
.mat__swatch img, .mat__swatch svg { width: 100%; height: 100%; object-fit: cover; }
.mat__body { padding: 16px 0 0; display: flex; flex-direction: column; flex: 1; }
.mat__tag { font-size: var(--t-micro); font-weight: 500; letter-spacing: .18em;
            text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.mat__body h3 { font-family: var(--f-name); font-style: italic; font-size: 1.5rem;
                letter-spacing: 0; margin-bottom: 10px; }
.mat__body p { color: var(--ink-2); font-size: var(--t-small); flex: 1; }
.mat__spec { margin-top: 18px; border-top: 1px solid var(--line); }
.mat__spec div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0;
                 border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.mat__spec span:first-child { color: var(--ink-3); }
.mat__spec span:last-child { color: var(--ink); font-weight: 500; text-align: right; }

/* Stone catalogue grid */
.stones { display: grid; gap: clamp(22px, 2.4vw, 38px) clamp(16px, 1.8vw, 28px);
          grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.stone { display: block; width: 100%; text-align: left; padding: 0; }
.stone__frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line);
                background: var(--ground-2);
                transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.stone:hover .stone__frame { transform: translateY(-4px); box-shadow: var(--shadow); }
.stone__frame svg { width: 100%; height: 100%; }
.stone .wall { margin-top: 12px; }
.stone .wall__name { font-size: 1.08rem; }

/* Comparison table */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.cmp caption { text-align: left; color: var(--ink-3); font-size: var(--t-micro);
               letter-spacing: .12em; text-transform: uppercase; padding-bottom: 16px; }
.cmp th, .cmp td { padding: 15px 18px 15px 0; border-bottom: 1px solid var(--line);
                   text-align: left; vertical-align: top; }
.cmp thead th { font-family: var(--f-name); font-style: italic; font-size: 1.2rem;
                font-weight: 400; letter-spacing: 0; color: var(--ink);
                border-bottom: 1px solid var(--ink); }
.cmp tbody th { font-weight: 400; color: var(--ink-3); width: 24%;
                font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; }
.cmp td strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. EDGE PROFILES
   -------------------------------------------------------------------------- */
/* The hairlines here are the 1px GAP showing the container through, so any
   cell left empty by an uneven row reads as a grey square. Five profiles
   divide evenly into five columns but not into three or two, so one filler
   cell is switched on below those breakpoints. Revisit both if the number of
   profiles ever changes. */
.edges { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
         grid-template-columns: repeat(5, 1fr); }
.edges::after { content: ''; background: var(--ground); display: none; }
@media (max-width: 1100px) { .edges { grid-template-columns: repeat(3, 1fr); }
                             .edges::after { display: block; } }
@media (max-width: 620px)  { .edges { grid-template-columns: repeat(2, 1fr); } }
.edge { background: var(--ground); padding: 30px 20px; text-align: center;
        transition: background var(--dur) var(--ease); }
.edge:hover { background: var(--ground-2); }
.edge svg { width: 100%; max-width: 140px; margin: 0 auto 20px; color: var(--ink); }
.edge h3 { font-family: var(--f-name); font-style: italic; font-size: 1.12rem;
           letter-spacing: 0; margin-bottom: 5px; }
.edge p { font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-3); line-height: 1.6; }

/* --------------------------------------------------------------------------
   12. PROCESS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
         grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--ground); padding: clamp(22px, 2.6vw, 34px); }
.step__n { font-size: var(--t-micro); font-weight: 500; letter-spacing: .18em;
           color: var(--ink-3); margin-bottom: 22px; }
.step h3 { font-size: 1.12rem; margin-bottom: 8px; color: var(--ink); }
.step p { font-size: var(--t-small); color: var(--ink-2); }

/* Care blocks — materiaux.html, section « entretien ». A hairline and a small
   icon, not a box: the house rule here is one-pixel rules, no cards, no
   shadows. Without an explicit width the inline SVG fills the whole column. */
.card { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.card__ico { display: block; width: 20px; height: 20px; flex: none;
             color: var(--ink-3); margin-bottom: 20px; }
.card h3 { font-size: 1.12rem; margin-bottom: 8px; color: var(--ink); }
.card p { font-size: var(--t-small); color: var(--ink-2); }
.card em { font-style: normal; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   13. GALLERY
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.filters button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--line);
                  font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--ink-3);
                  transition: all var(--dur) var(--ease); }
.filters button:hover { color: var(--ink); border-color: var(--line-2); }
.filters button[aria-pressed='true'] { background: var(--accent); color: var(--on-accent);
                                       border-color: var(--accent); }

.gal { display: grid; gap: clamp(24px, 2.6vw, 44px) clamp(16px, 1.8vw, 30px);
       grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.gal__i { position: relative; margin: 0; cursor: zoom-in; }
.gal__i > img, .gal__i > .ph { display: block; aspect-ratio: 4 / 3; width: 100%;
       object-fit: cover; border: 1px solid var(--line); background: var(--ground-2);
       transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.gal__i:hover > img { transform: translateY(-4px); box-shadow: var(--shadow); }
.gal__i.is-tall > img, .gal__i.is-tall > .ph { aspect-ratio: 4 / 5; }
/* A slab label under each photo: the stone name in small caps, then what
   the job was. Same device as the material cards. */
.gal__i figcaption { margin-top: 12px; display: grid; gap: 3px; }
.gal__stone { font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em;
              text-transform: uppercase; color: var(--ink-3); }
.gal__cap { font-size: var(--t-small); color: var(--ink-2); }

/* Missing-photo placeholder — a real generated slab behind the filename,
   so a site with no photos yet still looks deliberate rather than broken. */
.ph { position: relative; overflow: hidden; display: grid; place-content: center;
      gap: 8px; text-align: center; padding: 24px; min-height: 160px; }
.ph__stone { position: absolute; inset: 0; opacity: .38; }
.ph__stone svg { width: 100%; height: 100%; object-fit: cover; }
.ph span, .ph code { position: relative; z-index: 1; }
.ph span { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
           color: var(--ink-2); }
.ph code { font-size: var(--t-small); color: var(--ink);
           background: var(--ground); padding: 3px 8px; }

/* --------------------------------------------------------------------------
   14. VIEWING ROOM (lightbox)
   -------------------------------------------------------------------------- */
/* Opaque — a viewing room may not let the page behind show through the work. */
.lb { position: fixed; inset: 0; z-index: 300; display: none; background: var(--ground); }
.lb.is-open { display: grid; place-items: center; padding: 88px var(--gut) 48px; }
.lb > div { display: grid; place-items: center; max-width: 100%; }
.lb img { max-width: 100%; max-height: 72vh; object-fit: contain; box-shadow: var(--shadow); }
.lb__cap { margin-top: 20px; color: var(--ink-2); font-size: var(--t-small); text-align: center; }
.lb__x, .lb__nav { position: absolute; width: 44px; height: 44px; display: grid; place-items: center;
                   border: 1px solid var(--line-2); color: var(--ink-2); background: var(--ground);
                   transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.lb__x:hover, .lb__nav:hover { border-color: var(--ink); color: var(--ink); }
.lb__x { top: 22px; right: var(--gut); }
.lb__nav--prev { top: 22px; right: calc(var(--gut) + 100px); }
.lb__nav--next { top: 22px; right: calc(var(--gut) + 52px); }
.lb svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   15. SPLIT / TICKS / AREA
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(30px, 4.5vw, 72px); align-items: center;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.split__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
                background: var(--ground-2); border: 1px solid var(--line); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media .ph { height: 100%; }

.ticks { display: grid; gap: 26px; margin-top: 28px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.ticks svg { width: 17px; height: 17px; color: var(--ink-3); margin-top: 4px; }
.ticks strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px;
                font-size: 1.02rem; letter-spacing: -.01em; }
.ticks p { color: var(--ink-2); font-size: var(--t-small); }

.area { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.area li { padding: 9px 15px; border: 1px solid var(--line); font-size: var(--t-small);
           color: var(--ink-2); }
/* He works past the Montreal area too, so the list ends with an invitation
   rather than a boundary. Marked out so it doesn't read as another town. */
.area li.is-more { border-color: var(--ink); color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px;
               padding: 22px 0; cursor: pointer; list-style: none; min-height: 56px;
               font-size: clamp(1.02rem, .96rem + .35vw, 1.22rem); letter-spacing: -.012em;
               color: var(--ink); transition: color var(--dur) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-3); }
.faq summary::after { content: ''; flex: none; width: 11px; height: 11px;
                      border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
                      transform: rotate(45deg) translate(-3px, -3px);
                      transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { padding: 0 0 26px; max-width: 70ch; color: var(--ink-2); font-size: var(--t-small); }
.faq__a p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   17. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: clamp(24px, 3vw, 44px);
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.quote { border-top: 1px solid var(--ink); padding-top: 22px; }
.quote__stars { display: flex; gap: 3px; color: var(--ink-3); margin-bottom: 16px; }
.quote__stars svg { width: 13px; height: 13px; }
.quote blockquote { font-family: var(--f-name); font-style: italic; font-size: 1.24rem;
                    line-height: 1.4; color: var(--ink); }
.quote figcaption { margin-top: 18px; font-size: var(--t-micro); letter-spacing: .12em;
                    text-transform: uppercase; color: var(--ink-3); }
.quote figcaption strong { display: block; color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   18. CTA
   -------------------------------------------------------------------------- */
.cta { background: var(--ground-2); }
.cta__in { display: grid; gap: clamp(30px, 4vw, 64px); align-items: center;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cta h2 { max-width: 16ch; }
.cta p { color: var(--ink-2); margin-top: 20px; max-width: 46ch; font-size: var(--t-small); }
.cta__acts { display: flex; flex-direction: column; gap: 10px; }
.cta__acts .btn { width: 100%; }
.cta__note { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
             color: var(--ink-3); text-align: center; margin-top: 4px; }

/* --------------------------------------------------------------------------
   19. FORMS
   -------------------------------------------------------------------------- */
.qgrid { display: grid; gap: clamp(30px, 4vw, 60px); align-items: start;
         grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
@media (max-width: 940px) { .qgrid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 22px; }
.form__row { display: grid; gap: 22px;
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .field legend { font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em;
                                text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  min-height: 50px; padding: 13px 0; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line-2); width: 100%;
  transition: border-color var(--dur) var(--ease); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6A64' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 15px; }
[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D8D87' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--ink); }
.field__help { font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-3); line-height: 1.7; }
.field__err { font-size: var(--t-micro); letter-spacing: .06em; color: var(--bad); display: none; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-bottom-color: var(--bad); }
.field.is-bad .field__err { display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
               border: 1px solid var(--line); cursor: pointer; font-size: var(--t-small);
               color: var(--ink-2); transition: all var(--dur) var(--ease); }
.chips label:hover { border-color: var(--line-2); color: var(--ink); }
.chips input:checked + label { background: var(--accent); border-color: var(--accent);
                               color: var(--on-accent); }
.chips input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }

.form__note { font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-3); line-height: 1.7; }
.form__status { padding: 16px 18px; border: 1px solid var(--line-2); display: none;
                font-size: var(--t-small); color: var(--ink-2); }
.form__status.is-on { display: block; }
.form__status.is-ok { border-color: var(--live); }
.form__status.is-bad { border-color: var(--bad); color: var(--bad); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.rail { border: 1px solid var(--line); padding: clamp(22px, 2.5vw, 32px); }
.rail h3 { font-size: 1.14rem; margin-bottom: 18px; }
.rail__i { display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding: 15px 0;
           border-top: 1px solid var(--line); align-items: start; }
.rail__i svg { width: 16px; height: 16px; color: var(--ink-3); margin-top: 4px; }
.rail__i span:first-child { display: block; font-size: var(--t-micro); letter-spacing: .16em;
                            text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.rail__i a, .rail__i span + span, .rail__i [data-hours] {
  display: block; font-size: var(--t-small); color: var(--ink);
  font-weight: 500; letter-spacing: 0; text-transform: none; }
.rail__i a { min-height: 40px; display: inline-flex; align-items: center;
             border-bottom: 1px solid transparent; }
.rail__i a:hover { border-bottom-color: var(--ink); }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); padding-block: var(--sec) 36px; font-size: var(--t-small); }
.ftr__grid { display: grid; gap: 40px; grid-template-columns: 2fr 1fr 1fr 1.3fr; }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h3, .ftr h4 { font-size: var(--t-micro); font-weight: 500; letter-spacing: .18em;
                   text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.ftr li { margin-bottom: 9px; color: var(--ink-2); }
.ftr a:hover { color: var(--ink); }
.ftr__blurb { margin-top: 18px; max-width: 34ch; color: var(--ink-2); line-height: 1.7; }
.ftr__social { display: flex; gap: 6px; margin-top: 24px; }
.ftr__social a { width: 40px; height: 40px; display: grid; place-items: center;
                 border: 1px solid var(--line); color: var(--ink-2);
                 transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ftr__social a:hover { border-color: var(--ink); color: var(--ink); }
.ftr__social svg { width: 16px; height: 16px; }
.ftr__btm { margin-top: var(--sec); padding-top: 20px; border-top: 1px solid var(--line);
            display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between;
            font-size: var(--t-micro); letter-spacing: .08em; color: var(--ink-3); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 22px; }

/* Sticky mobile contact bar */
.callbar { position: fixed; inset: auto 0 0; z-index: 90; display: none;
           grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line);
           background: var(--ground); }
.callbar a { display: flex; align-items: center; justify-content: center; gap: 8px;
             min-height: 56px; color: var(--ink); font-size: var(--t-micro);
             font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.callbar a + a { border-left: 1px solid var(--line); background: var(--accent);
                 color: var(--on-accent); }
.callbar svg { width: 15px; height: 15px; }
@media (max-width: 780px) {
  .callbar { display: grid; }
  body { padding-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   21. MOTION
   -------------------------------------------------------------------------- */
.js-anim [data-reveal] { opacity: 0; transform: translateY(14px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.js-anim [data-reveal].is-in { opacity: 1; transform: none; }
.js-anim [data-reveal][data-d='1'] { transition-delay: 70ms; }
.js-anim [data-reveal][data-d='2'] { transition-delay: 140ms; }
.js-anim [data-reveal][data-d='3'] { transition-delay: 210ms; }
.js-anim [data-reveal][data-d='4'] { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   22. DRAFT CHECKLIST
   -------------------------------------------------------------------------- */
.draft { position: fixed; right: 14px; bottom: 14px; z-index: 400; max-width: 340px;
         background: var(--ground); border: 1px solid var(--ink); color: var(--ink-2);
         font-size: var(--t-micro); line-height: 1.7; box-shadow: var(--shadow); }
.draft__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px;
             padding: 10px 12px; border-bottom: 1px solid var(--line);
             font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.draft__hd button { width: 26px; height: 26px; font-size: 1rem; line-height: 1; color: var(--ink); }
.draft ul { padding: 10px 12px 12px; max-height: 40vh; overflow-y: auto; }
.draft li { margin-bottom: 8px; padding-left: 14px; position: relative; }
.draft li::before { content: '—'; position: absolute; left: 0; }
.draft code { font-size: .95em; color: var(--ink); }
/* Claims are a different job from the blanks: nobody types a value, someone
   asks him a question. Flagged so the two never blur together in the list. */
.draft__tag { display: inline-block; margin-right: 4px; padding: 1px 5px;
              border: 1px solid var(--bad); color: var(--bad);
              font-size: .9em; font-weight: 600; letter-spacing: .08em;
              text-transform: uppercase; white-space: nowrap; }
.draft.is-min ul { display: none; }
@media (max-width: 780px) { .draft { bottom: 70px; max-width: calc(100vw - 28px); } }

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .hdr, .callbar, .draft, .lb, .filters, .btn { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}