/* ==========================================================================
   SIEBEN — Tiles Stone Flooring Design
   Landing page stylesheet
   --------------------------------------------------------------------------
   Values derived from Sieben_Web_Header_Footer.fig (canvas 3082px wide)
   at a 0.5 scale factor, cross-checked against the
   Sieben Quick Style Reference Guide 2026.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */

@font-face {
  font-family: 'Sculpin';
  src: url('../fonts/sculpin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-variable.woff2') format('woff2-variations'),
       url('../fonts/figtree-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------------------------------------------- */

:root {
  /* Core brand palette — Quick Style Reference Guide, p.4 */
  --c-black-sand: #272525;
  --c-dark-grey:  #333333;
  --c-white:      #FFFFFF;
  --c-pale-grey:  #F4F4F4;
  --c-khaki-1:    #D2CDC3;
  --c-khaki-2:    #C4BCAC;

  /* Used sparingly — Quick Style Reference Guide, p.4 */
  --c-black:      #000000;
  --c-mid-grey:   #D9D9D9;
  --c-khaki-3:    #B9B09C;  /* text only: small headings on text blocks */

  /* Present in the Figma file but not in the style guide — see README */
  --c-footer-ink: #544B44;  /* footer logo + column headings */
  --c-off-white:  #FDFDFD;  /* body section background */
  --c-callout-bg: #FBFBFB;  /* call-out strip background */
  --c-placeholder:#8E8E8E;  /* search input placeholder */

  /* Type */
  --f-display: 'Sculpin', 'Zalando Sans SemiExpanded', 'Lexend Peta', sans-serif;
  --f-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --radius: 5px;

  /* Mask-based icon so it inherits currentColor. */
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");

  /* Band heights (from the Figma frames) */
  --h-topbar: 46px;
  --h-logoband: 178px;   /* Figma 230; tightened, then eased back 25 Aug */
  --h-nav: 62px;
  --h-callouts: 104px;   /* Figma 132; tightened 25 Aug */
  --h-hero: 622px;
  --h-footer-buffer: 66px;
  --h-footer-lower: 73px;
}

/* ---------- Reset ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--c-dark-grey);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--c-dark-grey);
  color: var(--c-white);
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--c-black-sand);
  outline-offset: 2px;
}

/* The default outline is near-black and vanishes on the dark surfaces. */
.mainnav :focus-visible,
.footer-lower :focus-visible {
  outline-color: var(--c-white);
}
/* The mobile overlay is khaki, so its focus ring must be dark to read. */
.mainnav__list.is-open :focus-visible {
  outline-color: var(--c-black-sand);
}
/* The panel receives focus programmatically; no ring around the whole overlay. */
.mainnav__list:focus { outline: none; }
.callouts__grid:focus-visible {
  outline-color: var(--c-black-sand);
}

/* ==========================================================================
   HEADER — Top utility bar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 55;              /* under the nav bar's own stacking, over content */
  background: var(--c-khaki-2);
  color: var(--c-black-sand);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 52px);
  min-height: var(--h-topbar);
}

.topbar__home {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}
.topbar__home img { width: 100%; height: 100%; }

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 0 0 auto;
}

.topbar__link {
  font-size: 15px;
  letter-spacing: 0.09em;
  white-space: nowrap;
  transition: opacity .18s ease;
}


.topbar__divider {
  width: 1px;
  height: 24px;
  background: currentColor;
  opacity: .45;
}

/* Search ---------------------------------------------------------------- */

.search {
  position: relative;
  flex: 0 1 244px;
  min-width: 170px;
  margin-left: auto;
}

.search__input {
  width: 100%;
  height: 30px;
  padding: 0 38px 0 14px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--c-dark-grey);
  background: var(--c-white);
  border: 0;
  border-radius: var(--radius);
}
.search__input::placeholder { color: var(--c-placeholder); opacity: 1; }

.search__submit {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  color: var(--c-dark-grey);
}

/* Top bar actions -------------------------------------------------------- */

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 248px;
  height: 30px;
  padding: 0 11px 0 16px;
  font-size: 13px;
  letter-spacing: 0.07em;
  color: var(--c-dark-grey);
  background: var(--c-white);
  border-radius: var(--radius);
  transition: background .18s ease;
}

.consult__label { white-space: nowrap; }
.consult__chevron { flex: 0 0 auto; transition: transform .18s ease; }
.consult[aria-expanded="true"] .consult__chevron { transform: rotate(180deg); }

.btn-samples {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 138px;
  height: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.3em; /* optical centring against the tracking */
  color: var(--c-white);
  background: var(--c-dark-grey);
  border-radius: var(--radius);
  transition: background .18s ease;
}


/* ==========================================================================
   HEADER — Logo band
   ========================================================================== */

.logo-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-logoband);
  background: var(--c-white);
}

.logo-band__logo { width: 452px; }   /* Figma 548; scaled back 25 Aug */
/* Constrain whatever the anchor holds — the inline SVG, the shipped file, or
   an uploaded Customizer logo whose natural width/height would distort. */
.logo-band__logo img,
.logo-band__logo .sieben-logo {
  width: 100%;
  height: auto;
}

/* Inline lockup. Letters are clipped in the SVG itself, so nothing to hide
   here beyond the pre-paint guard below. */
.sieben-lockup {
  display: block;
  width: 100%;
  height: auto;
  color: var(--c-dark-grey);
}

/* ==========================================================================
   HEADER — Primary navigation
   ========================================================================== */

.mainnav {
  position: sticky;
  top: var(--h-topbar);     /* stacks under the sticky utility bar */
  z-index: 50;
  /* 0.55 is about as sheer as this can go: over the brightest paving in the
     hero the white nav text still measures 4.61:1, just clear of AA. More
     blur compensates for the thinner tint. */
  background: rgba(51, 51, 51, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background .32s ease, box-shadow .32s ease;
}

/* Once it detaches from the header it firms up slightly for legibility. */
.mainnav.is-stuck {
  background: rgba(39, 37, 37, 0.66);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Browsers without backdrop-filter get a near-solid bar instead of a
   washed-out one that text can't sit on. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mainnav,
  .mainnav.is-stuck { background: rgba(51, 51, 51, 0.97); }
}

.mainnav__inner {
  display: flex;
  align-items: center;
  min-height: var(--h-nav);
}

.mainnav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mainnav__link {
  position: relative;
  display: block;
  padding: 8px 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c-white);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Left-to-right hover wipe -----------------------------------------
   Two layers per link: the brighter colour is a clipped overlay copy, and a
   rule sweeps beneath it. GSAP drives both from the left edge (see
   sieben.js); the CSS here only sets the rest state, so no-JS still reads. */
.hover-wipe { position: relative; }

/* Shrink-to-fit wrapper around the text: everything below is measured against
   the word, not the link's full padded box. */
.hover-wipe__inner {
  position: relative;
  display: inline-block;
}

/* The overlay copy sits exactly on the original — same box, same metrics —
   otherwise the two renderings show as doubled text. */
.hover-wipe__fill {
  position: absolute;
  inset: 0;
  display: block;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  pointer-events: none;
  white-space: nowrap;
  /* aria-hidden keeps it out of the accessibility tree; this keeps it out of
     selections, so copying a link doesn't yield the text twice. */
  -webkit-user-select: none;
  user-select: none;
  clip-path: inset(0 100% 0 0);   /* hidden until swept in */
}

.hover-wipe__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* The sweep colour has to suit the ground each link sits on.
   Brighten on dark surfaces; deepen on the khaki ones, where khaki-on-khaki
   measured 1.19:1 in the footer and 1.00:1 in the top bar — invisible. */
.mainnav__link .hover-wipe__fill,
.footer-lower__links a .hover-wipe__fill { color: var(--c-khaki-2); }

.topbar__link .hover-wipe__fill,
.footer__col a .hover-wipe__fill,
.link-arrow .hover-wipe__fill { color: var(--c-footer-ink); }

/* Buttons brighten and sweep with the same mechanic. */
.btn-samples,
.btn-contact,
.btn-primary,
.hero__cta,
.consult {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-wipe {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

/* Each wipe has to stay distinct from whatever the button sits on. Khaki-2 was
   wrong for the Samples button: that is exactly the top bar's colour, so the
   button dissolved into the bar on hover.
     - dark buttons -> #544B44 (brand footer ink): a warm lift, 8.5:1 for the
       white label, 4.5:1 against the khaki bar and 5.4:1 against the footer
     - white buttons -> neutral grey/khaki, which read against the warm bar and
       the photo respectively, keeping the dark label legible */
.btn-samples .btn-wipe,
.btn-contact .btn-wipe,
.btn-primary .btn-wipe { background: var(--c-footer-ink); }
.consult .btn-wipe { background: var(--c-mid-grey); }
.hero__cta .btn-wipe { background: var(--c-khaki-3); }   /* #B9B09C */

.nav-toggle { display: none; }

/* ==========================================================================
   Call-out strip
   ========================================================================== */

.callouts {
  display: flex;
  align-items: center;
  min-height: var(--h-callouts);
  background: var(--c-callout-bg);
}

.callouts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
}

.callout {
  display: flex;
  align-items: center;
  gap: 17px;
}

/* Placeholder icon from the Figma file — five vertical bars.
   Swap for the final iconography when supplied. */
.callout__icon {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  width: 36px;
  height: 36px;
}
.callout__icon span {
  display: block;
  width: 5.6px;
  height: 100%;
  background: var(--c-black);
}

.callout__text {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--c-black);
}
.callout__text strong { font-weight: 600; }
.callout__text span { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  height: var(--h-hero);
  background: var(--c-mid-grey);
  overflow: hidden;
}

/* Media, scrim and copy all share one grid cell so they stack without
   absolute positioning. */
.hero > * { grid-area: 1 / 1; }

.hero > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Top-weighted, plus a soft wash from the left where the copy sits. The header
   stack above the hero is 486px tall, so a bottom-aligned heading would sit
   below the fold on a laptop — the copy has to live at the top of the image. */
.hero__scrim {
  background:
    linear-gradient(to bottom,
      rgba(39, 37, 37, 0.46) 0%,
      rgba(39, 37, 37, 0.16) 42%,
      rgba(39, 37, 37, 0) 66%),
    linear-gradient(to right,
      rgba(39, 37, 37, 0.30) 0%,
      rgba(39, 37, 37, 0) 52%);
}

.hero__content {
  position: relative;
  z-index: 1;
  align-self: start;
  padding-top: 58px;
}

/* Mobile-only conversion elements — hidden where the desktop design rules. */
.hero__cta,
.mainnav__consult-item { display: none; }

.hero .hero__title {
  max-width: 720px;
  /* A step down from the body's primary heading — it sits over a photograph
     rather than white space, and breaks to two lines at this measure. */
  font-size: clamp(34px, 4vw, 54px);
  color: var(--c-white);
  text-shadow: 0 1px 24px rgba(39, 37, 37, 0.34);
}

/* ==========================================================================
   Body sections
   ========================================================================== */

.section-white { background: var(--c-off-white); }
.section-pale  { background: var(--c-pale-grey); }

/* ==========================================================================
   FOOTER — Main
   ========================================================================== */

.footer {
  background: var(--c-khaki-1);
  padding-block: 68px 62px;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}

.footer__brand {
  flex: 0 0 auto;
  margin-top: 24px;
}

.footer__logo { width: 393px; }

.footer__social {
  display: flex;
  gap: 30.5px;
  margin-top: 31px;
}
.footer__social a,
.footer__social span {
  display: block;
  width: 35px;
  height: 35px;
  transition: opacity .18s ease;
}
.footer__social a:hover { opacity: .7; }

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 149px;
  height: 32px;
  margin-top: 31px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--c-white);
  background: var(--c-dark-grey);
  border-radius: var(--radius);
  transition: background .18s ease;
}


/* Footer link columns ---------------------------------------------------- */

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  flex: 0 1 auto;
}

.footer__col-title {
  margin: 0 0 8px;
  line-height: 52.5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-footer-ink);
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__col li + li { margin-top: 0; }

.footer__col a {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 30.5px;
  letter-spacing: 0.1em;
  color: var(--c-dark-grey);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .18s ease;
}


/* ==========================================================================
   FOOTER — Buffer + lower bar
   ========================================================================== */

.footer-buffer {
  height: var(--h-footer-buffer);
  background: var(--c-dark-grey);
}

.site-footer {
  /* Reveal start states use translateY, and a transform at the very end of the
     document adds scrollable overflow — the "gap" under the footer. Clipping
     here contains it without creating a scroll container. */
  overflow: clip;
}

.footer-lower {
  background: var(--c-black-sand);
  color: var(--c-white);
}

.footer-lower__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--h-footer-lower);
}

.footer-lower__left {
  display: flex;
  align-items: center;
}

.footer-lower__home {
  width: 37px;
  height: 37px;
  margin-right: 74px;
}

.footer-lower__links {
  display: flex;
  align-items: center;
  gap: 79px;
}

.footer-lower__links a,
.footer-lower__copy {
  font-size: 14px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.footer-lower__links a { transition: opacity .18s ease; }


/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   `.anim-ready` is added to <html> by an inline script before first paint and
   removed by main.js once GSAP has set inline start states, so content never
   flashes in — and never stays hidden if GSAP fails to load.
   ========================================================================== */

.anim-ready [data-anim="up"],
.anim-ready [data-anim="stagger"] > * { opacity: 0; }

/* Hidden rather than transparent: the line splitter needs layout to measure
   where the text wraps, which `visibility: hidden` preserves. */
.anim-ready [data-anim="lines"] { visibility: hidden; }

/* Letters sit below their clip window until GSAP takes over. */
.anim-ready .sl-letter { transform: translateY(200px); }
.anim-ready .sl-tagline { opacity: 0; }

/* Each line is a mask the text slides up out of. The padding/negative-margin
   pair keeps descenders from being clipped by the overflow. */
[data-anim="lines"] .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
[data-anim="lines"] .line__inner {
  display: block;
  will-change: transform;
}

/* ==========================================================================
   Brand type scale — used by the placeholder body sections.
   Values follow the Quick Style Reference Guide, p.5.
   ========================================================================== */

.h-primary {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

.h-secondary {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

.h-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

.h-eyebrow {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-khaki-3);
}

.body-copy {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--c-dark-grey);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  height: 44px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-dark-grey);
  border-radius: var(--radius);
  transition: background .18s ease;
}


.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-dark-grey);
}
.link-arrow::after { content: '>'; font-weight: 400; }
.link-arrow:hover { opacity: .65; }

/* ==========================================================================
   PLACEHOLDER BODY
   --------------------------------------------------------------------------
   The body design was not final at build time. These two sections hold the
   correct backgrounds and vertical rhythm from the Figma file and show the
   brand type scale in situ. Delete every block marked `is-placeholder`
   (and this rule set) once the real body design lands.
   ========================================================================== */

/* `is-placeholder` is kept purely as a marker for the blocks to delete once the
   final body design lands — it renders no visible badge. */
.is-placeholder { position: relative; }

.placeholder-block { padding-block: 96px; }

.placeholder-block__head { max-width: 720px; }
.placeholder-block__head > * + * { margin-top: 20px; }
.placeholder-block__head .btn-primary { margin-top: 32px; }

.specimen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid rgba(51,51,51,.14);
}

.specimen__card > * + * { margin-top: 12px; }

.specimen__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.specimen__swatch {
  width: 54px;
  height: 54px;
  border-radius: 3px;
  border: 1px solid rgba(51,51,51,.12);
}

.specimen__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-khaki-3);
}

/* Media tiles stand in for the product/imagery rows still to be designed. */
.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.tile {
  aspect-ratio: 4 / 3;
  background: var(--c-mid-grey);
  border-radius: 2px;
}
.tile--tall { aspect-ratio: 3 / 4; }

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   No mobile or tablet designs were supplied. The rules below are sensible
   defaults built from the desktop design — they are a starting point for
   sign-off, not a designed breakpoint set.
   ========================================================================== */

@media (max-width: 1280px) {
  .logo-band__logo { width: 46vw; min-width: 320px; }
  .footer__cols { gap: 40px; }
}

@media (max-width: 1270px) {
  .topbar__inner { gap: 28px; }
  .search { flex-basis: 200px; }
  .consult { width: auto; padding-inline: 14px; }
  .consult__label { display: none; }
  .consult::before {
    content: 'Consultation';
    font-size: 14px;
    letter-spacing: .06em;
  }
}

@media (max-width: 1100px) {
  .footer__inner { flex-direction: column; gap: 48px; }
  .footer__brand { margin-top: 0; }
  .footer__cols { gap: 36px 48px; }
}

@media (max-width: 1080px) {
  .mainnav__inner { min-height: 56px; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 70; /* above the overlay (60), so the menu can be closed */
    min-height: 44px;
    padding: 10px 12px;
    margin-right: -12px; /* keeps the glyph on the container edge */
    order: 2;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-black-sand); /* matches the phone number on the khaki bar */
  }

  .nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
  .nav-toggle__bars span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform .24s ease, opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---- Full-screen overlay menu ---- */
  .mainnav__list {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* NOT justify-content:center — with more rows than fit, centered overflow
       clips both ends and the top half cannot be scrolled to. The auto margins
       on first/last child below centre the block when it fits and collapse to
       0 when it overflows, restoring normal scrolling. */
    justify-content: flex-start;
    gap: clamp(8px, 1.8vh, 20px);
    width: 100%;
    /* Fixed bottom padding covers the home indicator; env(safe-area-inset-*)
       stays 0 without viewport-fit=cover, so it is not relied on here. */
    padding: 72px 24px 44px;
    background: var(--c-khaki-2);   /* matches the utility bar it drops from */
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Hidden but still focusable-safe: fades and lifts out of the way. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  }
  .mainnav__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s;
  }

  .mainnav__list > li { width: 100%; text-align: center; }
  .mainnav__list > :first-child { margin-top: auto; }
  .mainnav__list > :last-child { margin-bottom: auto; }

  .mainnav__link {
    display: block;
    padding: 10px 0;
    min-height: 44px;
    color: var(--c-black-sand);   /* dark type on the khaki overlay */
    font-size: clamp(17px, 4.2vw, 22px);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.25;
    text-align: center;
    border: 0;
  }
  .mainnav__link:hover,
  .mainnav__link:focus-visible { opacity: 1; color: var(--c-dark-grey); }

  /* Keep the page still behind the overlay. */
  html.nav-open, html.nav-open body { overflow: hidden; }


  /* The top-bar consultation control is hidden at <=900px; the menu carries
     it instead. Between 901-1080px the top-bar version is still visible. */
  @media (max-width: 900px) {
    .mainnav__consult-item { display: block; width: 100%; text-align: center; }
  }

  /* backdrop-filter creates a containing block for fixed descendants, which
     would pin the overlay to the nav bar's box instead of the viewport. The
     glass is invisible behind a full-screen panel, so drop it while open. */
  html.nav-open .mainnav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   Mobile — above the fold
   --------------------------------------------------------------------------
   No mobile design was supplied. This layout is built for conversion: the
   desktop header stacked to ~1076px of furniture on a phone, which pushed the
   hero (the product shot, the headline, the offer) almost entirely below the
   fold. Rebuilt to ~250px so the hero owns the first screen.

   Applied:
   - one utility row, not three — tap-to-call and the Samples offer, the two
     highest-intent actions for a tile buyer
   - the site's own URL is dropped (the visitor is already on it) and the
     consultation control moves into the menu
   - search relocates into the full-screen menu (see sieben.js) rather than
     spending a whole row above the fold
   - trust signals become one swipeable strip instead of three stacked blocks
     (~600px -> ~64px)
   - hero height is the remainder of the viewport, so the fold always fills
   - every control is at least a 44px tap target
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --h-topbar: 56px;      /* taller than desktop: it carries the menu control */
    --h-logoband: 92px;
    /* Whatever the header does not use, the hero takes. */
    --h-hero: clamp(340px, calc(100vh - 250px), 520px);
    --h-hero: clamp(340px, calc(100svh - 250px), 520px);
  }

  /* ---- Single header row: S mark | phone | menu --------------------
     The dark nav bar is collapsed on phones (below) and its toggle is moved
     into this bar by sieben.js, so the header is one band instead of two. */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 55;   /* below the overlay (60) until the menu opens */
  }
  /* While the menu is open the header floats above the overlay, so the S mark
     and the close control stay visible and tappable.

     It must switch to `fixed`, not stay `sticky`: the scroll lock sets
     overflow:hidden on html/body, which removes the scrollport sticky depends
     on. The bar would snap back to its static position at the top of the
     document — off-screen if the reader had scrolled — taking the only close
     control with it. */
  html.nav-open .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
  }
  html.nav-open body.admin-bar .topbar { top: 32px; }

  /* Going fixed takes the bar out of flow; this replaces its height exactly so
     nothing behind the overlay shifts, and nothing jumps on close. */
  html.nav-open body { padding-top: var(--h-topbar); }

  .topbar__inner {
    flex-wrap: nowrap;
    gap: 12px;
    min-height: var(--h-topbar);
    padding-block: 6px;
  }
  /* Flex centring can't be exact here: the S mark and the menu control have
     different intrinsic widths, so the middle item lands off-centre by half
     the difference. Taking the phone out of flow centres it on the viewport. */
  .topbar__inner { position: relative; }
  .topbar__contact {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    pointer-events: none;      /* the bar stays draggable/scrollable around it */
  }
  .topbar__contact .topbar__link { pointer-events: auto; }
  .nav-toggle { margin-left: auto; }
  .topbar__divider,
  .topbar__contact .topbar__link:first-child,   /* the site's own URL */
  .topbar__actions,                             /* Samples — the hero CTA carries the offer */
  .consult { display: none; }

  /* The S mark stays top left; the box grows to a 44px target while the
     glyph keeps its 37px drawn size. */
  .topbar__home {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 44px;
    height: 44px;
    margin-left: -3px;
  }
  .topbar__home img { width: 37px; height: 37px; }

  .topbar__contact { order: 1; gap: 0; }
  .topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  /* Phone icon — the number alone reads as text, not as a tap-to-call. */
  .topbar__contact .topbar__link[href^="tel:"]::before {
    content: '';
    width: 15px; height: 15px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--icon-phone) center / contain no-repeat;
    mask: var(--icon-phone) center / contain no-repeat;
  }

  .topbar__actions { order: 2; gap: 0; }
  .btn-samples {
    width: auto;
    min-width: 116px;
    min-height: 44px;
    padding-inline: 16px;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }

  /* Search moves into the menu overlay; hide the desktop slot. */
  .search { display: none; }
  .mainnav__list .search {
    display: block;
    order: -1;
    flex: 0 0 auto;
    width: min(420px, 100%);
    margin: 0 0 18px;
  }
  .mainnav__list .search__input {
    height: 52px;
    font-size: 16px;              /* 16px stops iOS zooming on focus */
    text-align: center;
  }
  .mainnav__list .search__submit {
    top: 0;
    right: 0;
    transform: none;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
  }

  /* ---- Logo band ---- */
  .logo-band { min-height: var(--h-logoband); }
  .logo-band__logo { width: min(210px, 56vw); min-width: 0; }

  /* ---- Nav bar: collapsed ----
     Its toggle now lives in the header row above. The element stays in the DOM
     (not display:none) purely as the host for the fixed overlay menu. */
  .mainnav {
    position: static;
    min-height: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
  }
  .mainnav__inner { min-height: 0; padding: 0; }

  /* ---- Trust strip: one swipeable row, inverted ---- */
  .callouts {
    min-height: 0;
    padding-block: 12px;
    background: var(--c-dark-grey);   /* the nav bar's colour */
    color: var(--c-white);
  }
  .callout__text { color: var(--c-white); }
  .callout__icon span { background: var(--c-white); }
  .callouts__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Without this, snapping the first item to `start` scrolls away the
       inline padding and the strip sits flush on the screen edge. */
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edge so the cut-off item reads as swipeable. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .callouts__grid::-webkit-scrollbar { display: none; }

  .callout {
    flex: 0 0 auto;
    gap: 10px;
    padding-right: 26px;
    scroll-snap-align: start;
  }
  .callout__icon { width: 26px; height: 26px; gap: 1.5px; }
  .callout__icon span { width: 4px; }
  .callout__img { width: 26px; height: 26px; }
  .callout__text { font-size: 12.5px; line-height: 1.32; letter-spacing: 0.03em; }

  /* ---- Hero ---- */
  .hero__content { padding-top: 0; align-self: center; }

  .hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 18px;
    padding: 0 26px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    text-transform: uppercase;
    color: var(--c-dark-grey);
    background: var(--c-white);
    border-radius: var(--radius);
  }
  

  .hero .hero__title {
    max-width: 15ch;
    font-size: clamp(28px, 7.4vw, 40px);
    line-height: 1.08;
  }
  /* The heading is vertically centred on mobile, so the scrim holds its
     weight in a middle band rather than at the top. */
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(39,37,37,.12) 0%, rgba(39,37,37,.44) 45%, rgba(39,37,37,.10) 88%),
      linear-gradient(to right, rgba(39,37,37,.46) 0%, rgba(39,37,37,.10) 80%);
  }

  /* ---- Below the fold ---- */
  .footer { padding-block: 52px 44px; }
  .footer__logo { width: min(320px, 80vw); }

  .footer-lower__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-block: 24px;
  }
  .footer-lower__left { flex-wrap: wrap; gap: 18px; }
  .footer-lower__home { margin-right: 0; }
  .footer-lower__links { flex-wrap: wrap; gap: 12px 32px; }

  .placeholder-block { padding-block: 64px; }
  .specimen { margin-top: 48px; }

  /* ---- Tap targets (44px floor) ---- */
  .btn-contact { height: auto; min-height: 44px; }
  .footer-lower__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__col a { padding-block: 7px; }  /* 30.5px line + 14 ≈ 44 */
  .footer__social a { padding: 4px; margin: -4px; }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; }

  .topbar__link { font-size: 14px; }
  .btn-samples { min-width: 104px; font-size: 12px; letter-spacing: 0.14em; text-indent: 0.14em; }
  .logo-band__logo { width: min(228px, 70vw); }

}

@media (max-width: 400px) {
  .topbar__contact { gap: 12px; }
  .topbar__link { font-size: 13px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* Belt and braces — the inline guard already skips `.anim-ready` here. */
  [data-anim="up"],
  [data-anim="stagger"] > * { opacity: 1 !important; transform: none !important; }
  [data-anim="lines"] { visibility: visible !important; }
  [data-anim="lines"] .line__inner { transform: none !important; }
  .sl-letter { transform: none !important; }
  .sl-tagline { opacity: 1 !important; transform: none !important; }

  /* The overlay menu relies on a transition to become visible. */
  .mainnav__list.is-open { transition: none !important; }
}

/* ==========================================================================
   WordPress
   --------------------------------------------------------------------------
   Core classes the editor and template tags emit, plus the inner-page shell.
   Everything above this block is the design system from the static build.
   ========================================================================== */

/* Underscores templates and get_search_form() use this name. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip: auto;
  padding: 12px 20px;
  background: var(--c-dark-grey);
  color: var(--c-white);
}

.alignleft   { float: left;  margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; margin-bottom: 1.5em; }
.wp-caption img { display: block; }
.wp-caption-text, .wp-element-caption {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--c-khaki-3);
}

.sticky { display: block; }
.gallery-caption { display: block; }
.bypostauthor { display: block; }

/* Uploaded call-out icon, replacing the placeholder bar graphic. */
.callout__img {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* ---------- Inner pages --------------------------------------------------- */

.page-block { padding-block: 88px 96px; }

.entry-header { max-width: 900px; }
.entry-header .h-primary { margin-bottom: 12px; }

.entry-media { margin-block: 40px; }
.entry-media img { width: 100%; height: auto; }

.entry-content {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--c-dark-grey);
}
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 {
  margin-top: 1.8em;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.entry-content h3 {
  margin-top: 1.6em;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { opacity: .7; }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .4em; }
.entry-content blockquote {
  margin-inline: 0;
  padding-left: 24px;
  border-left: 2px solid var(--c-khaki-2);
  color: var(--c-black-sand);
}
.entry-content img { height: auto; }

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 44px 32px;
  margin-top: 56px;
}
.post-list .entry-title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.post-list .entry-title a:hover { opacity: .65; }

.pagination {
  display: flex;
  gap: 10px;
  margin-top: 64px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid rgba(51,51,51,.18);
  border-radius: var(--radius);
}
.pagination .current { background: var(--c-dark-grey); color: var(--c-white); border-color: var(--c-dark-grey); }

/* The WordPress admin bar offsets the viewport; keep the sticky nav below it. */
body.admin-bar .topbar { top: 32px; }
body.admin-bar .mainnav { top: calc(32px + var(--h-topbar)); }
@media screen and (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
  body.admin-bar .mainnav { top: calc(46px + var(--h-topbar)); }
}

@media (max-width: 900px) {
  .page-block { padding-block: 56px 64px; }
  .post-list { margin-top: 36px; gap: 32px 24px; }
}