/* ============================================================
   URBANTIME USA — Site stylesheet
   The Italian Urban Living
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:#15171a;
  --ink-2:#3b4046;
  --muted:#6d757e;
  --anthracite:#2f3234;
  --accent:#ec6839;
  --accent-dk:#c9522a;
  --paper:#ffffff;
  --sand:#f6f3ee;
  --sand-2:#efeae2;
  --line:#e3ded6;
  --line-2:#d3ccc1;

  --max:1320px;
  --gut:clamp(20px,4vw,56px);

  --f-sans:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-fast:.18s cubic-bezier(.4,0,.2,1);
  --t:.32s cubic-bezier(.4,0,.2,1);

  --nav-h:74px;
  --util-h:34px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
hr{border:0;border-top:1px solid var(--line);margin:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:900px;margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.12;letter-spacing:-.02em}
.h-display{font-size:clamp(2.4rem,6.2vw,5rem);font-weight:300;letter-spacing:-.035em;line-height:1.02}
.h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:300;letter-spacing:-.03em;line-height:1.06}
.h2{font-size:clamp(1.55rem,3vw,2.4rem);font-weight:400;letter-spacing:-.025em}
.h3{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.015em}
.h4{font-size:1.02rem;font-weight:600}
.lead{font-size:clamp(1.02rem,1.55vw,1.24rem);line-height:1.6;color:var(--ink-2);font-weight:300}
p{margin:0 0 1.05em}
.eyebrow{
  font-size:.685rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .85rem;display:block;
}
.eyebrow-mute{color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.86em 1.7em;border:1px solid var(--ink);border-radius:2px;
  font-size:.8rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  background:var(--ink);color:#fff;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:.62em 1.2em;font-size:.7rem}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line-2);
  padding-bottom:.32em;transition:border-color var(--t-fast),color var(--t-fast);
}
.link-arrow:hover{color:var(--accent);border-color:var(--accent)}
.link-arrow::after{content:"→";transition:transform var(--t-fast)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- Utility bar ---------- */
.utility{
  background:var(--anthracite);color:#cfd3d6;font-size:.735rem;letter-spacing:.045em;
  height:var(--util-h);display:flex;align-items:center;overflow:hidden;
}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.utility a:hover{color:#fff}
.utility-l,.utility-r{display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
.utility-tag{color:var(--accent);font-weight:600;letter-spacing:.13em;text-transform:uppercase;font-size:.68rem}
@media(max-width:900px){.utility-l span.hide-sm,.utility-r a.hide-sm{display:none}}
@media(max-width:620px){
  .utility{font-size:.68rem}
  .utility-l,.utility-r{gap:.9rem}
  .utility-r a[href^="mailto"]{display:none}
}
@media(max-width:400px){.utility-tag{display:none}}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--nav-h)}
.brand{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.brand-name{font-size:1.42rem;font-weight:600;letter-spacing:.02em}
.brand-name em{font-style:normal;color:var(--accent)}
.brand-sub{font-size:.575rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:.42rem}

.nav{display:flex;align-items:center;gap:.15rem;height:100%}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-link{
  display:flex;align-items:center;gap:.35em;height:100%;padding:0 .9rem;
  font-size:.775rem;font-weight:600;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast);
  background:none;border-top:0;border-left:0;border-right:0;
}
.nav-link:hover,.nav-item.open>.nav-link,.nav-link.is-current{color:var(--ink);border-bottom-color:var(--accent)}
.nav-link .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}

.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--accent);
  box-shadow:0 22px 60px -18px rgba(0,0,0,.26);
  padding:2rem 2.2rem;opacity:0;visibility:hidden;transition:all var(--t-fast);z-index:90;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* the last menu is centred under its trigger, which pushed it past the right
   edge of the document and gave every page a stray horizontal scrollbar */
.nav-item:last-child .mega{left:auto;right:0;transform:translateX(0) translateY(8px)}
.nav-item:last-child.open .mega{transform:translateX(0) translateY(0)}
.mega-cols{display:grid;gap:2.4rem}
.mega-w1{width:280px}.mega-w2{width:560px;grid-template-columns:1fr 1fr}
.mega-w3{width:820px;grid-template-columns:1.15fr 1fr 1fr}
.mega h5{
  font-size:.66rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .9rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.mega ul{list-style:none;margin:0;padding:0}
.mega li+li{margin-top:.1rem}
.mega li a{display:block;padding:.34rem 0;font-size:.875rem;color:var(--ink-2);transition:color var(--t-fast),padding var(--t-fast)}
.mega li a:hover{color:var(--accent);padding-left:5px}
.mega li a .sub{display:block;font-size:.715rem;color:var(--muted);letter-spacing:.02em}
.mega-feature{background:var(--sand);padding:1.15rem;border-left:2px solid var(--accent)}
.mega-feature p{font-size:.83rem;color:var(--ink-2);margin:0 0 .9rem;line-height:1.55}

.nav-toggle{display:none;background:none;border:0;padding:.5rem;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);transition:var(--t-fast)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* The bar now carries a search control as well as nine nav items, and the
   content column is 1,208px wide at its widest. The nav gives up a little
   padding and tracking to make room; below 1,220 the drawer takes over and
   the question stops arising. */
@media(min-width:1221px){
  .nav-bar{gap:1.1rem}
  .nav-link{padding:0 .5rem;font-size:.7rem;letter-spacing:.06em}
}
@media(max-width:1620px){.mega-w3{width:min(760px,88vw)}}
@media(max-width:1220px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;top:calc(var(--nav-h) + var(--util-h));left:0;right:0;bottom:0;
    background:#fff;flex-direction:column;align-items:stretch;gap:0;height:auto;
    overflow-y:auto;padding:.5rem 0 4rem;transform:translateX(100%);transition:transform var(--t);
    border-top:1px solid var(--line);
  }
  .nav.open{transform:translateX(0)}
  .nav-item{flex-direction:column;height:auto;align-items:stretch;border-bottom:1px solid var(--line)}
  .nav-link{height:auto;padding:1.05rem var(--gut);justify-content:space-between;font-size:.85rem;border-bottom:0}
  .nav-link:hover,.nav-item.open>.nav-link{border-bottom:0;color:var(--accent)}
  .nav-item.open .nav-link .caret{transform:rotate(-135deg) translateY(-2px)}
  .mega{
    position:static;transform:none;width:auto!important;opacity:1;visibility:visible;
    display:none;box-shadow:none;border:0;border-top:1px solid var(--line);
    background:var(--sand);padding:1.2rem var(--gut) 1.6rem;
  }
  .nav-item.open .mega{display:block;transform:none}
  .mega-cols{grid-template-columns:1fr!important;gap:1.5rem}
  .mega li a{padding:.42rem 0}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:var(--anthracite)}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
/* The film plays alone, flush under the header, full width and whole, on a
   white ground. When it ends it hands over to the still, and in the same
   movement the band opens into two columns: the headline and its buttons slide
   in on the left, the picture settles on the right and takes as much of the
   width as the copy can spare. Animating the fr units lets that happen in one
   motion; a browser that will not interpolate them simply snaps, which is
   fine. */
.hero-film{min-height:0;display:block;background:#fff;overflow:hidden}
.hero-inner{display:grid;align-items:center;
  grid-template-columns:0fr minmax(0,1fr);column-gap:0;
  max-width:1440px;margin:0 auto;
  transition:grid-template-columns .9s ease,column-gap .9s ease,padding .9s ease}
.hero-film.is-done .hero-inner{
  grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  column-gap:clamp(1.5rem,3.2vw,2.75rem);
  padding:clamp(.75rem,2vw,1.5rem) var(--gut)}

/* A collapsed grid column is still a box: left to itself the headline would wrap
   one letter per line and make the row a thousand pixels tall, which pushed the
   film down the page. Zero height while the film runs keeps it flush. */
.hero-copy-side{overflow:hidden;max-height:0;opacity:0;
  transition:opacity .55s ease .35s,max-height .9s ease}
.hero-film.is-done .hero-copy-side{max-height:80vh;opacity:1}
/* the band still carries .hero, whose h1 is white for text over a photograph;
   this copy sits on white, so it takes the page's own ink */
.hero-film .hero-copy-side h1{margin:0;max-width:22ch;color:var(--ink);
  font-size:clamp(1.6rem,2.55vw,2.6rem);line-height:1.08}
.hero-copy-side .hero-cta{display:flex;flex-wrap:wrap;gap:.6rem;
  margin-top:clamp(1.1rem,2.2vw,1.75rem)}

/* While the film runs the frame is capped by the height left under the header
   so the whole thing clears the fold. Once the picture takes over, the frame
   takes the picture's own proportions, so the picture fills it edge to edge -
   no white bars, and the caption can sit on the picture itself. */
.hero-film .hero-media{position:relative;inset:auto;margin:0 auto;background:#fff;
  width:100%;aspect-ratio:16/9;
  max-width:clamp(640px, calc((100vh - 190px) * 16 / 9), 1440px);
  transition:max-width .9s ease,aspect-ratio .9s ease}
.hero-film.is-done .hero-media{max-width:100%;aspect-ratio:1600/1120}
.hero-film .hero-media::after{content:none}
.hero-film .hero-media video,.hero-film .hero-still{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#fff;transition:opacity .9s ease}
.hero-film .hero-still{opacity:0;pointer-events:none}
.hero-film.is-done video{opacity:0}
.hero-film.is-done .hero-still{opacity:1}

/* the label belongs to the picture, so it arrives with it */
.hero-tag{position:absolute;top:clamp(1rem,3.5%,2.2rem);left:clamp(1rem,4%,2.6rem);
  opacity:0;pointer-events:none;transition:opacity .55s ease .35s}
.hero-film.is-done .hero-tag{opacity:1}
.hero-tag-k{display:block;font-size:.66rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.hero-tag-v{display:block;font-size:clamp(1.1rem,1.9vw,1.65rem);font-weight:300;
  letter-spacing:-.02em;color:var(--ink);line-height:1.05}

/* one column on a narrow screen: the picture, then the words under it */
@media (max-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr);row-gap:0}
  .hero-film.is-done .hero-inner{grid-template-columns:minmax(0,1fr);
    row-gap:clamp(1.2rem,4vw,2rem)}
  .hero-copy-side{order:2}
  .hero-film .hero-copy-side h1{max-width:24ch}
}
@media (prefers-reduced-motion:reduce){
  .hero-inner,.hero-copy-side,.hero-film .hero-media,
  .hero-film video,.hero-film .hero-still,.hero-tag{transition:none}
}
/* the film band already carries air of its own, so the first section under it
   opens tighter than a section in the middle of the page would */
.hero-film + .section{padding-top:clamp(2rem,4vw,3.4rem)}
/* the headline block that used to sit over the picture */
.hero-copy{padding-top:clamp(2.6rem,5vw,4rem)}
.hero-copy h1{max-width:22ch;margin-top:.6rem}
.hero-copy .hero-sub{color:var(--ink-2);font-size:clamp(1rem,1.5vw,1.2rem);
  font-weight:300;max-width:56ch;margin:1.4rem 0 2.1rem}
.hero-body{position:relative;z-index:2;width:100%;padding:0 0 clamp(2.6rem,6vw,5rem)}
.hero-body .eyebrow{color:#fff;opacity:.85}
.hero h1{color:#fff;max-width:17ch}
.hero-sub{color:rgba(255,255,255,.9);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:300;max-width:52ch;margin:1.4rem 0 2.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem}
.hero-meta{
  position:absolute;right:var(--gut);bottom:clamp(2.6rem,6vw,5rem);z-index:2;text-align:right;
  color:rgba(255,255,255,.72);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}
@media(max-width:820px){.hero-meta{display:none}}

/* page hero (interior) */
.page-hero{position:relative;background:var(--anthracite);color:#fff;overflow:hidden}
.page-hero-media{position:absolute;inset:0;opacity:.5}
.page-hero-media img{width:100%;height:100%;object-fit:cover}
.page-hero .wrap{position:relative;z-index:2;padding-top:clamp(3rem,7vw,5.6rem);padding-bottom:clamp(3rem,7vw,5.6rem)}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero .lead{color:rgba(255,255,255,.86);max-width:62ch;margin-top:1.2rem}
.page-hero.plain{background:var(--sand);color:var(--ink)}
.page-hero.plain h1{color:var(--ink)}
.page-hero.plain .lead{color:var(--ink-2)}
/* banner sits directly above a photo strip, so it needs less air below */
.page-hero.tight .wrap{padding-bottom:clamp(1.5rem,3vw,2.4rem)}
/* a banner carrying only its eyebrow and title needs far less room than one
   with a paragraph under it, so the shaded band closes up and everything
   below it moves up the page */
.page-hero-slim .wrap{padding-top:clamp(1.4rem,2.6vw,2rem);
  padding-bottom:clamp(1.1rem,2.2vw,1.6rem)}
.page-hero-slim h1{margin-bottom:0}

/* ---------- Collection hero carousel ---------- */
/* Whole photographs at a shared height, scrolled sideways — rather than one
   frame stretched the width of the page and cropped top and bottom. */
.hero-carousel{position:relative;background:var(--sand);padding:0 0 clamp(1.6rem,3vw,2.4rem)}
.car-track{
  display:flex;gap:clamp(.6rem,1.2vw,1rem);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scroll-padding-left:var(--gut);padding:0 var(--gut);
  scrollbar-width:none;-ms-overflow-style:none;
}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.car-item{
  margin:0;flex:0 0 auto;scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* height is shared by every frame; width follows the picture's own shape, so
   nothing is cropped. Sized so roughly four frames sit side by side. */
.car-item img{
  display:block;height:clamp(190px,16.5vw,250px);width:auto;max-width:none;
  object-fit:contain;
}
.car-btn{
  position:absolute;top:calc(50% - clamp(.8rem,1.5vw,1.2rem));transform:translateY(-50%);
  z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.94);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.28);transition:all var(--t-fast);
}
.car-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.car-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.car-btn[hidden]{display:none}
.car-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.car-prev{left:max(.6rem,calc(var(--gut) - 23px))}
.car-next{right:max(.6rem,calc(var(--gut) - 23px))}
@media(max-width:640px){
  .car-item img{height:clamp(200px,52vw,280px)}
  .car-btn{width:38px;height:38px}
  .car-btn svg{width:17px;height:17px}
}

/* ---------- Breadcrumb ---------- */
.crumb{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:1rem 0;display:flex;flex-wrap:wrap;align-items:baseline;
}
.crumb a:hover{color:var(--accent)}
/* separators only — never the stacked collection name */
.crumb > span:not(.dual-name){margin:0 .5em;opacity:.5}

/* ---------- Sections ---------- */
.section{padding:clamp(3.2rem,7vw,6.4rem) 0}
.section-tight{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.section-sand{background:var(--sand)}
.section-dark{background:var(--anthracite);color:#fff}
.section-dark .lead{color:rgba(255,255,255,.82)}
.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:70ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-top:1rem}

/* ---------- Grids / cards ---------- */
.grid{display:grid;gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{position:relative;display:block;background:#fff;overflow:hidden}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.card:hover .card-media img{transform:scale(1.045)}
.card-body{padding:1.2rem 0 .4rem}
.card-body h3{margin-bottom:.4rem}
.card-body p{font-size:.9rem;color:var(--muted);margin:0 0 .8rem;line-height:1.55}
.card-tag{
  position:absolute;top:0;left:0;background:var(--accent);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.42em .95em;z-index:2;
}

/* editorial split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
.split.rev .split-media{order:2}
.split-media img,.split-media video{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-media.tall img{aspect-ratio:3/4}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}}

/* product-page media: shown at its own size, never stretched to fill.
   The photographs and drawings came from PriceIt, where they live in a small
   card; cropping them to 4/3 and blowing them up to the column width is what
   made them soft. Here each keeps its own proportions inside a white panel and
   stops at the width its own pixels can carry (set per image, in the markup). */
.split-top{align-items:start}
.split-media.pm{display:flex;flex-direction:column;gap:1rem;align-items:center}
.split-media.pm img{min-width:0;width:auto;height:auto;max-height:none;
  aspect-ratio:auto;object-fit:contain;background:#fff;border:1px solid var(--line);
  padding:1rem;border-radius:2px;box-sizing:border-box}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:#fff;padding:1.8rem 1.4rem}
.section-dark .stat{background:var(--anthracite)}
.section-dark .stats{background:rgba(255,255,255,.16)}
.stat-n{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--accent)}
.stat-l{font-size:.735rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.section-dark .stat-l{color:rgba(255,255,255,.66)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Swatches ---------- */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:1.1rem}
.swatch{text-align:left}
.swatch-chip{
  aspect-ratio:1/1;border:1px solid var(--line-2);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:transform var(--t-fast);
}
.swatch:hover .swatch-chip{transform:translateY(-3px)}
.swatch-name{font-size:.82rem;font-weight:600;margin-top:.62rem;line-height:1.3}
.swatch-code{font-size:.7rem;color:var(--muted);letter-spacing:.06em;margin-top:.15rem}
.swatch-chip.corten{background:linear-gradient(140deg,#8a4a2b 0%,#a1552f 28%,#7d4326 55%,#96522e 78%,#6f3a21 100%)}
.swatch-chip.ash{background:linear-gradient(100deg,#d7c3a4 0%,#c9b08b 18%,#e0cfb3 34%,#c6ac86 52%,#dbc7a8 70%,#c2a67f 100%)}
.swatch-chip.oak{background:linear-gradient(100deg,#6b4a2f 0%,#5a3d26 18%,#7a5637 36%,#553a24 54%,#71502f 72%,#4d3421 100%)}
.swatch-chip.gres{background:linear-gradient(135deg,#b9b4ac 0%,#a7a29a 30%,#c4bfb6 52%,#9d9890 74%,#b3aea6 100%)}
.swatch-chip.cement{background:linear-gradient(135deg,#b6b3ad 0%,#c8c5bf 40%,#a9a6a0 70%,#bfbcb6 100%)}
.swatch-chip.steel{background:linear-gradient(120deg,#c8ccd0 0%,#e6e9ec 26%,#aab0b6 52%,#dfe3e6 76%,#b6bcc2 100%)}
.swatch-chip.alu{background:linear-gradient(120deg,#d5d8db 0%,#f0f2f3 30%,#bcc1c5 58%,#e8eaec 82%,#c6cacd 100%)}
.swatch-chip.stripe-anthracite{background:repeating-linear-gradient(90deg,#fff 0 15px,#3c4043 15px 30px)}
.swatch-chip.stripe-brown{background:repeating-linear-gradient(90deg,#fff 0 15px,#6b4a35 15px 30px)}
.swatch-chip.stripe-red{background:repeating-linear-gradient(90deg,#fff 0 15px,#b3242c 15px 30px)}
.swatch-chip.stripe-yellow{background:repeating-linear-gradient(90deg,#fff 0 15px,#e0b016 15px 30px)}
.swatch-chip.stripe-green{background:repeating-linear-gradient(90deg,#fff 0 15px,#2e6b45 15px 30px)}
.swatch-chip.stripe-blue{background:repeating-linear-gradient(90deg,#fff 0 15px,#20487e 15px 30px)}
.swatch-chip.mesh{position:relative;background:#3c4043}
.swatch-chip.mesh::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:5px 5px}
.swatch-chip.mesh-white{background:#e9e9e6}
.swatch-chip.mesh-white::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px);background-size:5px 5px}
.swatch-chip.weave{position:relative}
.swatch-chip.weave::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 4px),repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 2px,transparent 2px 4px)}

/* ---------- Tables ---------- */
.table-tools{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  padding:1rem 0 1.1rem;border-bottom:1px solid var(--line);margin-bottom:0;
}
.table-tools label{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
.table-tools select,.table-tools input{
  font:inherit;font-size:.85rem;padding:.55em .8em;border:1px solid var(--line-2);
  border-radius:2px;background:#fff;color:var(--ink);min-width:160px;
}
.table-tools input{min-width:220px}
.table-tools select:focus,.table-tools input:focus{outline:2px solid var(--accent);outline-offset:1px}
.table-count{font-size:.78rem;color:var(--muted);margin-left:auto}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.price{width:100%;border-collapse:collapse;font-size:.855rem;min-width:640px}
table.price caption{
  text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);padding:1.6rem 0 .7rem;
}
table.price th{
  text-align:left;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--ink);padding:.72rem .8rem;white-space:nowrap;
  background:#fff;position:sticky;top:0;
}
table.price td{padding:.66rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.price tbody tr:hover{background:var(--sand)}
table.price tr.group-row td{
  background:var(--sand-2);font-weight:600;font-size:.755rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line-2);
}
td.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;white-space:nowrap;letter-spacing:-.01em}
td.price-cell{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;text-align:right}
td.price-cell.call{color:var(--accent);font-weight:700;letter-spacing:.06em}
.dot{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid var(--line-2);vertical-align:-2px;margin-right:.5em;flex-shrink:0}
.finish-cell{white-space:nowrap}
.table-note{font-size:.775rem;color:var(--muted);padding:.9rem 0 0;line-height:1.55}

/* ---------- Product blocks ---------- */
.product{border-top:1px solid var(--line);padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.product:first-of-type{border-top:0}
.product-head{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media(max-width:900px){.product-head{grid-template-columns:1fr}}
.product-head h3{margin-bottom:.9rem}
/* the product render lifted from the matching price-book page */
.product-shot{
  margin:0 0 1.15rem;border:1px solid var(--line);border-radius:2px;background:#fff;
  padding:.9rem 1rem;display:flex;align-items:center;justify-content:center;
}
.product-shot img{
  display:block;width:auto;height:auto;max-width:100%;max-height:230px;
  mix-blend-mode:multiply;
}
@media(max-width:900px){
  .product-shot{margin-bottom:1.4rem}
  .product-shot img{max-height:200px}
}

/* ---------- Dual-named collections (Zeroquindici.015 / Ventiquattrore.h24) ---------- */
/* US name leads, bold; the Italian model name sits beneath it, smaller. */
.dual-name{display:block}
.dual-name.dual-inline{display:inline-block;vertical-align:top;text-align:inherit}
.dual-lead{display:block;font-weight:700;line-height:1.06}
.dual-sub{
  display:block;font-weight:400;line-height:1.25;letter-spacing:.02em;
  font-size:max(.56em,.7rem);opacity:.72;margin-top:.22em;text-transform:none;
}
h1 .dual-sub,.h1 .dual-sub{font-size:max(.4em,.95rem);opacity:.78;margin-top:.3em}
.h3 .dual-sub,h3 .dual-sub{font-size:max(.62em,.72rem)}
.mega .dual-lead{font-weight:600}
.hero-meta .dual-name{display:inline-block;text-align:right}
.hero-meta .dual-sub{font-size:.66rem;opacity:.9;letter-spacing:.14em;margin-top:.15em}
.mega .dual-sub,.site-footer .dual-sub{font-size:.72rem;opacity:.66;margin-top:.1em}
.crumb .dual-name{margin-left:.5em}
/* keep the link arrow on the first line of a stacked name */
.link-arrow .dual-name{align-self:flex-start}
.crumb .dual-sub{font-size:.66rem;opacity:.62;margin-top:.05em;letter-spacing:.08em}
.spec-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.spec{background:#fff;padding:1rem 1.1rem}
.spec dt{font-size:.63rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.42rem}
.spec dd{margin:0;font-size:.855rem;line-height:1.5;color:var(--ink-2)}
@media(max-width:520px){.spec-list{grid-template-columns:1fr}}
.dims{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 0}
.dim{
  border:1px solid var(--line-2);padding:.4em .8em;font-size:.78rem;
  font-variant-numeric:tabular-nums;background:#fff;border-radius:2px;
}
.dim b{font-weight:600}

/* ---------- Rep locator (list format) ---------- */
.rep-filters{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;
  padding:1.4rem;background:var(--sand);border:1px solid var(--line);
}
.rep-filters .field{flex:1 1 220px;min-width:200px}
.rep-filters .field label{margin-bottom:.4rem}
.rep-groups{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.group-btn{
  padding:.42em .95em;border:1px solid var(--line-2);background:#fff;font-size:.735rem;
  font-weight:600;letter-spacing:.05em;border-radius:100px;transition:var(--t-fast);color:var(--ink-2);
}
.group-btn:hover{border-color:var(--ink);color:var(--ink)}
.group-btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#rep-count{font-size:.78rem;color:var(--muted);letter-spacing:.05em;padding:1.1rem 0 0}

.rep-region{border-top:1px solid var(--line);padding:2rem 0}
.rep-region:first-child{border-top:0}
.rep-region-head{margin-bottom:1.4rem}
.rep-region-head h3{display:inline-block;margin-right:.75rem}
.rep-group-tag{
  display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  background:var(--sand-2);color:var(--ink-2);padding:.32em .7em;border-radius:2px;vertical-align:3px;
}
.rep-states{font-size:.755rem;color:var(--muted);margin:.6rem 0 0;line-height:1.6;letter-spacing:.02em}
.rep-contacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;background:#fff;border:1px solid var(--line)}
.rep-contact{background:#fff;padding:1.15rem 1.25rem;box-shadow:0 0 0 1px var(--line)}
.rep-contact.is-showroom{background:var(--sand);border-left:2px solid var(--accent)}
.rep-showroom-flag{
  font-size:.6rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .5rem;
}
.rep-firm{font-size:.94rem;font-weight:600;margin:0 0 .32rem;letter-spacing:-.01em;line-height:1.3}
.rep-person{font-size:.86rem;margin:0 0 .55rem;color:var(--ink);font-weight:500}
.rep-title{display:block;font-size:.735rem;color:var(--muted);font-weight:400;margin-top:.12rem;line-height:1.45}
.rep-meta{font-size:.83rem;color:var(--ink-2);line-height:1.65;margin:0;word-break:break-word}
.rep-meta a{border-bottom:1px solid transparent}
.rep-meta a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.form-grid .full{grid-column:1/-1}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.field label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.92rem;padding:.78em .9em;border:1px solid var(--line-2);
  border-radius:2px;background:#fff;color:var(--ink);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;color:var(--ink-2)}
.check input{width:auto;margin-top:.28em}
.form-note{font-size:.78rem;color:var(--muted);margin-top:1rem}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;
  background:none;border:0;padding:1.25rem 0;font-size:1rem;font-weight:600;color:var(--ink);
}
.acc-btn:hover{color:var(--accent)}
.acc-btn .ic{flex-shrink:0;width:16px;height:16px;position:relative}
.acc-btn .ic::before,.acc-btn .ic::after{content:"";position:absolute;background:currentColor;transition:var(--t-fast)}
.acc-btn .ic::before{top:7px;left:0;width:16px;height:2px}
.acc-btn .ic::after{left:7px;top:0;width:2px;height:16px}
.acc-item.open .acc-btn .ic::after{transform:rotate(90deg);opacity:0}
.acc-panel{display:none;padding:0 0 1.5rem;max-width:78ch}
.acc-item.open .acc-panel{display:block}
.acc-panel p:last-child{margin-bottom:0}

/* ---------- Callout / CTA band ---------- */
.band{background:var(--anthracite);color:#fff;padding:clamp(2.6rem,5.5vw,4.4rem) 0}
.band-inner{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between}
.band h2{max-width:22ch}
.band p{color:rgba(255,255,255,.78);max-width:52ch;margin:.9rem 0 0}
.band-accent{background:var(--accent)}
.band-accent p{color:rgba(255,255,255,.9)}

.notice{
  background:var(--sand);border-left:3px solid var(--accent);padding:1.15rem 1.35rem;
  font-size:.875rem;color:var(--ink-2);line-height:1.6;
}
.notice strong{color:var(--ink)}

/* ---------- Footer ---------- */
.site-footer{background:var(--anthracite);color:#b9bec2;padding:clamp(3rem,5.5vw,4.6rem) 0 0;font-size:.87rem}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2.2rem;padding-bottom:3rem}
@media(max-width:1000px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h5{font-size:.66rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:#fff;margin:0 0 1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.52rem}
.site-footer a:hover{color:var(--accent)}
.footer-brand .brand-name{color:#fff;font-size:1.3rem}
.footer-brand .brand-sub{color:#8e959a}
.footer-brand p{margin:1.1rem 0 0;line-height:1.7;max-width:34ch;color:#9ba1a6}
.footer-social{display:flex;gap:.7rem;margin-top:1.3rem}
.footer-social a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;
  justify-content:center;font-size:.68rem;font-weight:700;letter-spacing:.04em;transition:var(--t-fast);
}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);padding:1.4rem 0;display:flex;flex-wrap:wrap;
  gap:1rem;justify-content:space-between;font-size:.775rem;color:#8e959a;
}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:1.4rem}

/* ---------- Misc ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.pill{border:1px solid var(--line-2);padding:.4em .9em;font-size:.74rem;letter-spacing:.05em;border-radius:100px;color:var(--ink-2)}
.section-dark .pill{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.82)}
.toc{
  position:sticky;top:var(--nav-h);background:#fff;border-bottom:1px solid var(--line);
  z-index:40;padding:.7rem 0;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
}
.toc a{
  display:inline-block;padding:.4em .95em;margin-right:.3rem;font-size:.755rem;font-weight:600;
  letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;
}
.toc a:hover{border-color:var(--ink);color:var(--ink)}
.anchor{scroll-margin-top:calc(var(--nav-h) + 70px)}

@media print{
  .site-header,.utility,.site-footer,.toc,.table-tools,.hero-cta{display:none!important}
  body{font-size:11px}
  table.price{min-width:0}
}

/* ---------------------------------------------------------------------------
   Photo galleries + project / installation cards
   --------------------------------------------------------------------------- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
  margin-top:1.75rem;
}
.pg-item{margin:0;overflow:hidden;border-radius:10px;background:#fff;}
.pg-item img{
  display:block;width:100%;height:230px;object-fit:cover;
  transition:transform .5s ease;
}
.pg-item:hover img{transform:scale(1.04);}

/* projects: compact card grid (used inside collection pages) */
.proj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;margin-top:1.75rem;
}
.proj-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.proj-media img{display:block;width:100%;height:200px;object-fit:cover;}
.proj-body{padding:1rem 1.15rem 1.35rem;}
.proj-name{font-size:1.05rem;font-weight:600;margin:0 0 .2rem;letter-spacing:-.01em;}
.proj-loc{font-size:.82rem;color:#ec6839;font-weight:500;margin:0 0 .45rem;text-transform:uppercase;letter-spacing:.04em;}
.proj-desc{font-size:.92rem;color:#5c6165;margin:0;line-height:1.5;}

/* projects: full-width editorial rows (projects.html) */
.proj-list{display:flex;flex-direction:column;gap:3.25rem;}
.proj-full{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:2rem;align-items:center;
}
.proj-full:nth-child(even) .proj-hero{order:2;}
.proj-hero img{display:block;width:100%;height:100%;max-height:430px;object-fit:cover;border-radius:12px;}
.proj-meta{min-width:0;}
.proj-meta .proj-name{font-size:1.6rem;margin-bottom:.35rem;}
.proj-tag{
  display:inline-block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  background:#f6f3ee;color:#2f3234;padding:.3rem .6rem;border-radius:99px;margin:.65rem 0 0;
}
.proj-strip{display:flex;gap:8px;margin-top:1rem;}
.proj-strip img{width:33.333%;height:96px;object-fit:cover;border-radius:8px;}

@media (max-width:820px){
  .proj-full{grid-template-columns:1fr;gap:1.1rem;}
  .proj-full:nth-child(even) .proj-hero{order:0;}
  .proj-hero img{max-height:280px;}
  .proj-meta .proj-name{font-size:1.3rem;}
  .pg-item img{height:180px;}
}

/* ---------- Digital sample box flip-book (materials.html) ---------- */
/* The sample box sells the finishes, so the sheets are shown whole in the
   designer's own layout and every one can be opened full screen and zoomed to
   natural size — the RAL and Tempotest references are set small, and they are
   what a specifier came for. */
.flipbook{margin-top:clamp(1.6rem,3vw,2.4rem);}
.fb-stage{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:clamp(.9rem,2vw,1.7rem);
}
/* One shared stage for mixed sheet shapes: the two landscape spreads fill it
   almost exactly, and the portrait covers sit centred inside it. Fixing the
   ratio keeps the page from jumping as sheets turn. */
.fb-viewport{position:relative;aspect-ratio:1.5/1;}
.fb-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px;}
.fb-sheet{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateX(var(--fb-out,2%));
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.fb-sheet.is-current{opacity:1;visibility:visible;transform:none;}
.fb-sheet img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;cursor:zoom-in;
  box-shadow:0 10px 34px -14px rgba(0,0,0,.4);background:#fff;
}
.fb-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.94);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.28);transition:all var(--t-fast);
}
.fb-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.fb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.fb-btn[hidden]{display:none;}
.fb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.fb-prev{left:clamp(-6px,-.4vw,0px);}
.fb-next{right:clamp(-6px,-.4vw,0px);}
.fb-expand{
  position:absolute;right:10px;bottom:10px;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.94);border:1px solid var(--line-2);
  border-radius:99px;padding:.42rem .8rem;transition:all var(--t-fast);
}
.fb-expand:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.fb-expand:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.fb-expand svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

.fb-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem 1.4rem;margin-top:1.1rem;
}
.fb-caption{margin:0;font-size:.95rem;color:var(--ink-2);max-width:46rem;line-height:1.5;}
.fb-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.fb-dots{display:flex;gap:.45rem;}
.fb-dot{
  width:11px;height:11px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid var(--line-2);background:var(--paper);transition:all var(--t-fast);
}
.fb-dot:hover{border-color:var(--accent);}
.fb-dot.is-current{background:var(--accent);border-color:var(--accent);}
.fb-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.fb-count{font-size:.85rem;color:var(--muted);letter-spacing:.03em;}
.fb-count b{color:var(--ink);font-weight:600;}
.fb-download{padding:.5rem .9rem;font-size:.82rem;}

/* ---------- Full-screen sheet ---------- */
/* Near-opaque plus a blur: at .96 the page behind stayed just legible through
   the backdrop and read as a rendering fault rather than as depth. */
.fb-lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(21,23,26,.985);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
}
.fb-lightbox[hidden]{display:none;}
.fb-lb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(.9rem,3vw,1.6rem);border-bottom:1px solid rgba(255,255,255,.14);
  flex:0 0 auto;
}
.fb-lb-caption{margin:0;color:#fff;font-size:.9rem;opacity:.9;}
.fb-lb-tools{display:flex;gap:.5rem;flex:0 0 auto;}
.fb-lb-btn{
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:99px;padding:.42rem .9rem;transition:all var(--t-fast);
}
.fb-lb-btn:hover{background:var(--accent);border-color:var(--accent);}
.fb-lb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* Fit mode contains the sheet; zoomed mode lets it overflow so the sheet can
   be panned at natural size — that is the only way the small RAL captions are
   legible on a phone. */
.fb-lb-stage{
  flex:1 1 auto;min-height:0;overflow:auto;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.6rem,2vw,1.5rem);-webkit-overflow-scrolling:touch;
}
.fb-lb-stage img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;}
.fb-lightbox.is-zoomed .fb-lb-stage{align-items:flex-start;justify-content:flex-start;}
.fb-lightbox.is-zoomed .fb-lb-stage img{
  max-width:none;max-height:none;width:200%;height:auto;margin:0 auto;cursor:zoom-out;
}
.fb-lb-prev{left:clamp(8px,2vw,20px);}
.fb-lb-next{right:clamp(8px,2vw,20px);}
body.fb-open{overflow:hidden;}

@media(max-width:820px){
  .fb-viewport{aspect-ratio:1.35/1;}
  .fb-bar{flex-direction:column;align-items:flex-start;}
  .fb-prev{left:-4px;}
  .fb-next{right:-4px;}
  .fb-btn{width:40px;height:40px;}
}
@media(prefers-reduced-motion:reduce){
  .fb-sheet{transition:opacity .01ms;transform:none;}
}

/* ---------- Price-book flip book (collection pages) ---------- */
/* Same component as the sample box, scaled up for a 41-spread book: a contents
   rail above the stage, a thumbnail strip below it, and printed folio numbers
   in the counter so a reader can talk to a rep in the book's own page numbers.
   The dots the sample box uses do not survive 41 sheets. */
.flipbook-book .fb-viewport{aspect-ratio:17/11;}   /* every spread is 17x11in */
.flipbook-book .fb-stage{background:#fff;}

/* Contents. A chip stays lit across the whole span a family occupies, so
   paging through the three Round Tables spreads does not unlight "Round
   Tables" the moment you turn past the first one. */
.fb-contents{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem;}
.fb-chip{
  font:inherit;font-size:.78rem;line-height:1.25;cursor:pointer;text-align:left;
  color:var(--ink-2);background:var(--paper);border:1px solid var(--line);
  border-radius:99px;padding:.34rem .74rem;transition:all var(--t-fast);
}
.fb-chip:hover{border-color:var(--accent);color:var(--ink);}
.fb-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.fb-chip.is-current{background:var(--ink);border-color:var(--ink);color:#fff;}
.fb-chip-f{display:block;font-size:.68rem;opacity:.62;letter-spacing:.02em;}

.fb-folio{margin-left:.5rem;padding-left:.55rem;border-left:1px solid var(--line-2);}
.fb-folio:empty{display:none;}

/* Thumbnail rail. One horizontal scroller rather than a grid: at 41 spreads a
   grid pushes the gallery a screen and a half down the page. */
.fb-rail{
  display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;
  padding:.9rem .2rem .4rem;margin-top:.4rem;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.fb-rail::-webkit-scrollbar{height:8px;}
.fb-rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;}
.fb-thumb{
  position:relative;flex:0 0 auto;cursor:pointer;padding:0;line-height:0;
  background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:border-color var(--t-fast);
}
.fb-thumb img{display:block;width:84px;height:auto;}
.fb-thumb:hover{border-color:var(--accent);}
.fb-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.fb-thumb.is-current{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
.fb-thumb-n{
  position:absolute;right:2px;bottom:2px;
  font-size:.6rem;line-height:1;font-weight:600;letter-spacing:.02em;
  color:#fff;background:rgba(21,23,26,.72);border-radius:3px;padding:2px 4px;
}
.fb-thumb.is-current .fb-thumb-n{background:var(--accent);}

/* The deep links from collections.html ("Benches & Seating" -> #flat-benches)
   still point at these ids. They are now zero-height markers that open the
   book at the right spread instead of scrolling to a table. */
.fb-anchor{display:block;height:0;overflow:hidden;}

@media(max-width:820px){
  .fb-thumb img{width:64px;}
  .fb-chip{font-size:.74rem;}
}
@media(max-width:820px){
  /* 27 contents entries stacked is most of a phone screen before the reader
     reaches the book. One scrollable row instead, matching the .toc bar. */
  .fb-contents{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    padding-bottom:.5rem;-webkit-overflow-scrolling:touch;
  }
  .fb-chip{flex:0 0 auto;white-space:nowrap;}
  .fb-chip-f{white-space:nowrap;}
}

/* ---------- Price-book download list (resources.html) ---------- */
.dl-head{margin:2.2rem 0 .8rem;}
.dl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.dl-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding:.8rem 0;border-bottom:1px solid var(--line);
}
.dl-list a{font-weight:600;}
.dl-meta{font-size:.82rem;color:var(--muted);letter-spacing:.02em;}

/* ---- site_text.py ---- */
/* A long headline is a different typographic problem from a short one: it wants
   to be smaller and set wider, or it fills the whole photograph. */
.hero h1.long{font-size:clamp(1.45rem,2.75vw,2.35rem);max-width:33ch;
line-height:1.2;letter-spacing:-.018em;font-weight:300}
@media(max-width:640px){.hero h1.long{font-size:clamp(1.3rem,5.4vw,1.7rem);max-width:none}}

/* A statement stands on its own, with room around it and nothing to compete
   with — the point is the pause, not the decoration. */
.statement{padding:clamp(3.2rem,7vw,5.6rem) 0;text-align:center}
.statement p{margin:0 auto;max-width:30ch;font-weight:300;line-height:1.24;
letter-spacing:-.022em;font-size:clamp(1.4rem,3.2vw,2.4rem);color:var(--ink)}
.statement-sand{background:var(--sand)}
.statement-dark{background:var(--anthracite)}
.statement-dark p{color:#fff}

/* The badge in the corner of a collection card is a link into PriceIt now, so
   it sits beside the card link rather than inside it — HTML does not allow a
   link within a link, and the whole card is one. */
.card-wrap{position:relative}
.card-priceit{position:absolute;top:0;left:0;z-index:3;
background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;padding:.42em .95em;
transition:background var(--t-fast)}
.card-priceit:hover{background:var(--ink);color:#fff}

/* A pull quote sits inside a column of text and lifts one line out of it. */
.pullquote{margin:1.7rem 0;padding:.1rem 0 .1rem 1.15rem;
border-left:2px solid var(--accent);font-weight:300;line-height:1.45;
letter-spacing:-.012em;font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--ink)}

/* ---- collection film: one video, full width, under the hero carousel ---- */
.film{padding:0;background:var(--ink)}
.film .filmwrap{max-width:1440px;margin:0 auto;position:relative}
/* contain, not cover: the film plays whole rather than being cropped to the box */
.film video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--ink)}
.film .filmcap{max-width:1440px;margin:0 auto;padding:.85rem 1.25rem 1.15rem;
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.film .filmcap strong{color:#fff;font-weight:700;letter-spacing:.08em}
@media (max-width:700px){.film .filmcap{font-size:.7rem}}

/* ---------- Site search ----------
   The trigger in the header looks like a field and behaves like a button:
   clicking or focusing it opens the panel, where the real input lives. One
   input rather than two means the results never have to follow focus from one
   box to another, and the panel can be as wide as the page without the header
   having to be. */
.search-trigger{
  display:flex;align-items:center;gap:.5rem;flex-shrink:0;min-width:0;white-space:nowrap;
  height:36px;padding:0 .8rem;
  background:var(--sand);border:1px solid var(--line);border-radius:2px;
  color:var(--ink-2);font:inherit;font-size:.74rem;font-weight:600;
  letter-spacing:.075em;text-transform:uppercase;text-align:left;cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.search-trigger:hover,.search-trigger:focus-visible{
  border-color:var(--line-2);color:var(--ink-2);background:#fff}
.search-trigger .search-ic{width:15px;height:15px;flex-shrink:0;color:var(--muted)}
.search-trigger .k{
  margin-left:auto;font-size:.62rem;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line-2);border-radius:2px;padding:.1rem .3rem;white-space:nowrap}
.search-ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.search-panel{position:fixed;inset:0;z-index:200;background:rgba(21,23,26,.42)}
.search-panel[hidden]{display:none}
body.search-open{overflow:hidden}
.search-sheet{
  background:#fff;border-bottom:2px solid var(--accent);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.4);
  max-height:88vh;overflow-y:auto;padding:1.4rem 0 1.6rem;
  animation:search-drop .16s ease-out}
@keyframes search-drop{from{transform:translateY(-12px);opacity:.6}to{transform:none;opacity:1}}
.search-form{display:flex;align-items:center;gap:.8rem;border-bottom:2px solid var(--ink);padding-bottom:.7rem}
.search-form .search-ic{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.search-form input{
  flex:1;min-width:0;border:0;outline:0;background:none;padding:.3rem 0;
  font-family:inherit;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.search-form input::placeholder{color:var(--muted);opacity:.75}
.search-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-close{
  background:none;border:1px solid var(--line-2);border-radius:2px;cursor:pointer;
  font:inherit;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.34rem .55rem}
.search-close:hover{color:var(--ink);border-color:var(--ink)}
.search-status{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:.9rem 0 .2rem}

.search-results{list-style:none;margin:0;padding:0}
.search-results .sr-head{
  font-size:.63rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);margin:1.1rem 0 .3rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--line)}
.search-results .sr-head:first-child{margin-top:.6rem}
a.sr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1.2rem;
  padding:.6rem .7rem;border-radius:2px;align-items:baseline}
a.sr .sr-title{font-size:.98rem;color:var(--ink);font-weight:500}
a.sr .sr-sub{grid-column:1;font-size:.76rem;color:var(--muted)}
a.sr .sr-meta{grid-row:1/3;grid-column:2;font-size:.76rem;color:var(--ink-2);
  white-space:nowrap;align-self:center}
a.sr.on,a.sr:hover{background:var(--sand)}
a.sr.on .sr-title{color:var(--accent-dk)}
.search-results mark{background:rgba(236,104,57,.19);color:inherit;padding:0 .06em}
.sr-all{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem}
.sr-all a{font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}

/* the full results page */
.sp-list{display:grid;gap:.1rem}
a.sp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1.4rem;
  padding:.85rem .8rem;border-bottom:1px solid var(--line);align-items:baseline}
a.sp-row:hover{background:var(--sand)}
a.sp-row .sp-title{font-size:1.02rem;color:var(--ink);font-weight:500}
a.sp-row .sp-sub{grid-column:1;font-size:.8rem;color:var(--muted)}
a.sp-row .sp-meta{grid-row:1/3;grid-column:2;font-size:.8rem;color:var(--ink-2);
  white-space:nowrap;align-self:center}
a.sp-row mark{background:rgba(236,104,57,.19);color:inherit}

/* The nav needs about 1,380px at full size; below that the field gives up its
   label and then its width, and below 1,220 it sits beside the menu button,
   which is where a reader on a phone looks for it. */
.search-trigger .k{display:none}
@media(max-width:1330px){.search-trigger .label{display:none}.search-trigger{padding:0 .5rem}}
@media(max-width:1220px){
  .search-trigger{order:2;min-width:auto;background:none;border-color:transparent;padding:0 .3rem}
  .search-trigger .label,.search-trigger .k{display:none}
  .search-trigger .search-ic{width:20px;height:20px;color:var(--ink)}
  .nav-toggle{order:3}
}

/* the search page's own field, wider and taller than the header's */
.search-page-form{display:flex;align-items:center;gap:.8rem;max-width:760px;
  margin:1.6rem 0 .4rem;border-bottom:2px solid var(--ink);padding-bottom:.6rem}
.search-page-form .search-ic{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.search-page-form input{flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:inherit;font-size:clamp(1.05rem,2.2vw,1.45rem);color:var(--ink);padding:.3rem 0;
  -webkit-appearance:none;appearance:none}
.search-page-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-page-form .btn{flex-shrink:0}
@media(max-width:560px){.search-page-form .btn{display:none}}

/* ---------- Scroll cue ----------
   A banner that stops two thirds of the way down the window shows the top of
   whatever is under it, and needs no encouragement. One that reaches the
   bottom edge hides everything, and a reader can be forgiven for thinking
   that is the page. So the cue is not placed by hand on chosen pages: the
   markup sits in every banner and the script shows it only where the banner
   actually reaches the foot of that reader's window, on that screen, at that
   moment. On the home page it waits for the film to finish first.

   It leaves as soon as it has been understood — one scroll and it is gone for
   the rest of the visit, because a permanent arrow is an ornament. */
/* The cue is centred on the page, and on the home page the centre line runs
   straight through the photograph. So the banner opens a little clear ground
   at its foot when the cue is live, and the cue stands in that rather than on
   the picture. The class is set from the script, not with :has(), so nothing
   depends on how new the browser is. */
.hero.has-cue,.page-hero.has-cue{padding-bottom:clamp(3.2rem,5.5vh,4.6rem)}
.scroll-cue{
  position:absolute;left:50%;bottom:clamp(.7rem,1.8vh,1.3rem);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  background:none;border:0;padding:.5rem 1rem;cursor:pointer;
  font:inherit;color:var(--muted);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s ease,visibility .7s,color var(--t-fast);
  z-index:6;
}
.scroll-cue.is-live{opacity:1;visibility:visible;pointer-events:auto}
.scroll-cue .cue-word{
  font-size:.58rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  line-height:1;opacity:.72}
.scroll-cue svg{
  display:block;width:26px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  animation:cue-drift 2.8s cubic-bezier(.4,0,.3,1) infinite}
.scroll-cue:hover,.scroll-cue:focus-visible{color:var(--accent)}
.scroll-cue:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
/* the dark banners carry it in white */
.page-hero:not(.plain) .scroll-cue{color:rgba(255,255,255,.78)}
.page-hero:not(.plain) .scroll-cue:hover,
.page-hero:not(.plain) .scroll-cue:focus-visible{color:#fff}
@keyframes cue-drift{
  0%,100%{transform:translateY(-3px);opacity:.5}
  50%{transform:translateY(4px);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .scroll-cue svg{animation:none;opacity:.85}
  .scroll-cue{transition:none}
}

/* ---------- Home hero: the brand values ----------
   Four short pairs beside the photograph. A two-column grid on a wide screen
   and a single column on a narrow one, so the words never set shorter than
   they read well at. */
.brand-values{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.9rem,1.8vw,1.5rem) clamp(1.2rem,2.4vw,2rem);
  margin:clamp(1.3rem,2.4vw,2rem) 0 0}
.brand-values .bv{border-top:1px solid var(--line);padding-top:.7rem}
.brand-values dt{font-size:.95rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.brand-values dd{margin:.28rem 0 0;font-size:.83rem;line-height:1.5;color:var(--ink-2)}
.hero-film .hero-copy-side .eyebrow{display:block;margin-bottom:.5rem}
.hero-film .hero-copy-side h1{font-size:clamp(1.45rem,2.15vw,2.1rem)}
@media(max-width:640px){.brand-values{grid-template-columns:1fr}}


/* ===== Urbantime USA launch optimization · 07 Sep 2026 ===== */
html{scroll-behavior:smooth}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.section{padding:clamp(3rem,6vw,5.5rem) 0}
.section-tight{padding-top:clamp(1.25rem,2.5vw,2rem);padding-bottom:clamp(1.25rem,2.5vw,2rem)}
.section-head{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.customer-journey-note{max-width:64ch}
.footer-legal{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.65rem;font-size:.78rem}
.footer-legal a{color:inherit;opacity:.82}
.footer-legal a:hover{opacity:1}
.spec-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.spec-status .card-body{height:100%}
@media(max-width:820px){
  .spec-status{grid-template-columns:1fr}
  .hero-cta .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .section{padding:clamp(2.5rem,8vw,4rem) 0}
}
@media(max-width:520px){
  .hero-cta{gap:.55rem}
  .hero-cta .btn{width:100%}
  .footer-bottom{gap:1rem}
}

/* Designers + Journal — 07 Sep 2026 */
.designer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.designer-card{background:var(--bg,#fff);padding:clamp(2rem,5vw,5rem);min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:inherit;transition:background .2s ease}
.designer-card:hover{background:#f3f1ec}.designer-card h2{font-size:clamp(2rem,4vw,4rem);line-height:1;margin:.6rem 0 1rem}.designer-card p{max-width:34rem;color:var(--muted);margin-bottom:2rem}
.journal-filter{display:flex;gap:2rem;flex-wrap:wrap;padding:0 0 2rem;border-bottom:1px solid var(--line);margin-bottom:3rem}.journal-filter a{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;text-decoration:none;color:inherit}.journal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,5rem) 2rem}.journal-card{text-decoration:none;color:inherit;display:block}.journal-card img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:1.4rem}.journal-card h2{font-size:clamp(1.5rem,2.4vw,2.5rem);line-height:1.05;margin:.55rem 0 1rem}.journal-card p{color:var(--muted);max-width:38rem;margin-bottom:1.25rem}
@media(max-width:760px){.designer-grid,.journal-grid{grid-template-columns:1fr}.designer-card{min-height:240px}.journal-filter{gap:1.2rem}}

/* Designers landing page — image-first interaction inspired by Urbantime Italy */
.designers-showcase-section{padding-top:clamp(2rem,4vw,4rem)}
.designer-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,24px)}
.designer-photo-card{position:relative;display:block;overflow:hidden;aspect-ratio:1.22/1;background:#e8e6e1;color:#fff;text-decoration:none;isolation:isolate}
.designer-photo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .35s ease}
.designer-hover{position:absolute;left:clamp(16px,2.4vw,34px);right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);padding:clamp(18px,2.4vw,30px);background:rgba(42,45,46,.94);display:flex;flex-direction:column;gap:.45rem;transform:translateY(calc(100% + 42px));opacity:0;transition:transform .3s ease,opacity .3s ease;z-index:2}
.designer-hover-kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.designer-hover strong{font-size:clamp(1.45rem,2.4vw,2.4rem);font-weight:500;line-height:1.05}
.designer-hover-link{font-size:.9rem;margin-top:.25rem}
.designer-photo-card:hover img,.designer-photo-card:focus-visible img{transform:scale(1.025);filter:brightness(.76)}
.designer-photo-card:hover .designer-hover,.designer-photo-card:focus-visible .designer-hover{transform:translateY(0);opacity:1}
.designer-photo-card:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.designer-source-note{max-width:760px;margin:clamp(2rem,4vw,4rem) auto 0;text-align:center;color:var(--muted)}
@media (hover:none){.designer-hover{transform:none;opacity:1;background:linear-gradient(180deg,rgba(42,45,46,0) 0%,rgba(42,45,46,.88) 65%);left:0;right:0;bottom:0;padding:46px 20px 20px}.designer-hover-kicker{display:none}.designer-photo-card img{filter:brightness(.86)}}
@media(max-width:760px){.designer-photo-grid{grid-template-columns:1fr}.designer-photo-card{aspect-ratio:1.2/1}.designers-showcase-section{padding-top:1.5rem}}

/* CAFE product cards: preserve source detail and avoid unnecessary zoom/cropping. */
.cafe-product-grid .card-media{background:#fff}
.cafe-product-grid .card-media img{object-fit:contain;padding:10px;transform:none!important}
.cafe-product-grid .card:hover .card-media img{transform:none!important}

/* ---------- Urbantime USA approved logo artwork ----------
   Uses the supplied vector artwork without effects or distortion. */
.brand{display:flex;align-items:center;flex-shrink:0;line-height:1}
.brand-logo{display:block;width:clamp(155px,13.5vw,190px);height:auto;max-height:50px}
.footer-logo{display:block;width:min(230px,100%);height:auto}
@media(max-width:1180px){.brand-logo{width:160px}}
@media(max-width:760px){.brand-logo{width:150px;max-height:44px}}
@media(max-width:430px){.brand-logo{width:138px}}

/* Pilot v3: one-step price-book enlargement. The + control opens a larger
   centered page; the zoom-out cursor on the page returns to the inline book. */
.flipbook-book .fb-expand{
  width:44px;height:44px;border-radius:50%;padding:0;display:grid;place-items:center;
  font-size:1.8rem;font-weight:400;line-height:1;
}
.flipbook-book .fb-expand svg{display:none;}
.flipbook-book .fb-expand span{font-size:1.8rem;line-height:1;}
.fb-lightbox .fb-lb-stage{align-items:flex-start;justify-content:center;}
.fb-lightbox .fb-lb-stage img{
  width:min(150%,1800px);max-width:none;max-height:none;height:auto;margin:auto;
  cursor:zoom-out;
}

/* Pilot v4: enlarged price-book spread uses a true scroll canvas.
   Anchor the oversized image at the upper-left of the scrollable stage so
   neither the left nor top edge can be positioned outside scroll range. */
.fb-lightbox .fb-lb-stage{
  display:block;
  overflow:auto;
  padding:clamp(.6rem,2vw,1.5rem);
  text-align:left;
  overscroll-behavior:contain;
}
.fb-lightbox .fb-lb-stage img{
  display:block;
  width:max(150vw,1400px);
  max-width:none;
  max-height:none;
  height:auto;
  margin:0;
  cursor:zoom-out;
}
@media(max-width:760px){
  .fb-lightbox .fb-lb-stage img{width:max(220vw,1200px);}
}

/* CAFE sharp pricebook: fit complete 17:11 spread within desktop viewport */
.cafe-pricebook .flipbook-book .fb-stage{max-width:min(100%,calc(72vh * 17 / 11));margin-left:auto;margin-right:auto;}
.cafe-pricebook .flipbook-book .fb-viewport{width:100%;height:auto;aspect-ratio:17/11;}
.cafe-pricebook .flipbook-book .fb-sheet img{width:100%;height:100%;object-fit:contain;}

/* CAFE v13: use more available vertical space while keeping full 17:11 spread visible */
@media (min-width: 769px){
  .cafe-pricebook .flipbook-book .fb-stage{max-width:min(100%,calc(85vh * 17 / 11));}
}