/* West Lothian Flooring: site styles */
:root {
  --copper: #b6702a;
  --copper-dark: #92571d;
  --copper-soft: #f6ede3;
  --ink: #0e0d0c;
  --dark: #181716;
  --dark-2: #22201e;
  --text: #55514b;
  --muted: #8a857e;
  --line: #e6e1da;
  --soft: #f7f4ef;
  --white: #fff;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --head: "Chivo", "Segoe UI", Arial, sans-serif;
  --body: "Open Sans", "Segoe UI", Arial, sans-serif;
  --ui: "Work Sans", "Segoe UI", Arial, sans-serif;
  --wrap: 1240px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.75 var(--body); color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--copper); text-decoration: none; }
a:hover { color: var(--copper-dark); }
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); }
h3 { font-size: 21px; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--copper); color: #fff; padding: 8px 14px; }
.skip:focus { left: 12px; }

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

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 30px; border-radius: 0; border: 1.5px solid transparent; font: 700 13px/1 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); white-space: nowrap; }
.btn svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-copper { background: var(--copper); color: #fff; }
.btn-copper:hover { background: var(--copper-dark); color: #fff; }
.btn-outline-light { border-color: rgba(255, 255, 255, .75); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-square { border-radius: 0; }

/* ---- header: transparent over the hero, solid once scrolled ---- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .35s var(--ease), box-shadow .35s var(--ease), color .35s; color: #fff; }
.head-row { display: flex; align-items: center; gap: 30px; height: 92px; padding: 0 40px; transition: height .35s var(--ease); }
.site-header.solid { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .45); }
.site-header.solid .head-row { height: 74px; }
.logo { display: flex; align-items: center; gap: 12px; color: inherit; flex: none; }
.logo:hover { color: inherit; }
.logo-mark { width: 38px; height: 38px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text b { font: 600 25px/1 var(--serif); letter-spacing: -.2px; }
.logo-text small { font: 600 10px/1 var(--ui); letter-spacing: 4.2px; text-transform: uppercase; margin-top: 6px; color: var(--copper); }
.site-header:not(.solid) .logo-text small { color: #f0c79c; }
.nav { margin-left: auto; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.nav li { position: relative; }
.nav-link { display: flex; align-items: center; gap: 7px; padding: 12px 16px; font: 600 13.5px/1 var(--ui); letter-spacing: 1.2px; text-transform: uppercase; color: inherit; background: none; border: 0; cursor: pointer; transition: color .25s; }
.nav-link:hover, .nav-link.active, .has-drop:hover > .nav-link, .has-drop.open > .nav-link { color: var(--copper); }
.site-header:not(.solid) .nav-link:hover, .site-header:not(.solid) .nav-link.active, .site-header:not(.solid) .has-drop:hover > .nav-link { color: #f0c79c; }
.nav-link .chev { width: 10px; height: 10px; transition: transform .3s var(--ease); }
.has-drop:hover > .nav-link .chev, .has-drop.open > .nav-link .chev { transform: rotate(180deg); }
/* dropdown: no jitter. A hover bridge covers the gap, it eases in, and it waits a beat before
   closing so a slightly wandering mouse doesn't make it flicker. */
.drop { position: absolute; top: 100%; left: 50%; min-width: 250px; margin: 0; padding: 14px 0; list-style: none; background: #fff; color: var(--ink); border-radius: 0; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s var(--ease) .12s, transform .25s var(--ease) .12s, visibility 0s linear .37s; }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-drop:hover > .drop, .has-drop:focus-within > .drop, .has-drop.open > .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
.drop a { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 24px; font: 500 15px/1.3 var(--body); color: var(--ink); transition: color .2s, background .2s; }
.drop a span { font: 500 12px/1 var(--ui); color: var(--muted); }
.drop a:hover { color: var(--copper); background: var(--soft); }
.drop .drop-all { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; font-weight: 600; color: var(--copper); }
.head-cta { margin-left: 8px; height: 46px; padding: 0 24px; }
.burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: none; cursor: pointer; color: inherit; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 26px; height: 2px; background: currentColor; position: relative; transition: transform .3s, background .3s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -8px; } .burger span::after { top: 8px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { transform: translateY(8px) rotate(45deg); }
.nav-open .burger span::after { transform: translateY(-8px) rotate(-45deg); }
.nav .mob-cta { display: none; }

/* ---- hero slider ---- */
.hero { position: relative; height: 100vh; min-height: 620px; max-height: 920px; overflow: hidden; background: var(--dark); color: #fff; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 1.1s; }
.slide.on { opacity: 1; visibility: visible; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.1); transition: transform 8s linear; }
.slide.on .slide-bg { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 9, 8, .78) 0%, rgba(10, 9, 8, .5) 46%, rgba(10, 9, 8, .1) 100%); }
.slide-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding-top: 70px; }
.slide-copy { max-width: 720px; }
.kicker { display: block; font: 600 13px/1 var(--ui); letter-spacing: 3.2px; text-transform: uppercase; color: #f0c79c; margin-bottom: 22px; }
.slide-title { font: 700 clamp(40px, 6vw, 80px)/1.06 var(--serif); color: #fff; margin: 0 0 24px; letter-spacing: -.5px; }
.slide-text { font-size: 18px; color: rgba(255, 255, 255, .88); max-width: 560px; margin-bottom: 36px; }
.slide-btns { display: flex; flex-wrap: wrap; gap: 16px; }
.slide .kicker, .slide .slide-title, .slide .slide-text, .slide .slide-btns { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.slide.on .kicker { opacity: 1; transform: none; transition-delay: .35s; }
.slide.on .slide-title { opacity: 1; transform: none; transition-delay: .5s; }
.slide.on .slide-text { opacity: 1; transform: none; transition-delay: .68s; }
.slide.on .slide-btns { opacity: 1; transform: none; transition-delay: .84s; }
.hero-controls { position: absolute; right: 0; bottom: 0; z-index: 5; display: flex; align-items: stretch; background: #fff; color: var(--ink); }
.hero-count { display: flex; align-items: center; padding: 0 26px; font: 600 14px/1 var(--ui); letter-spacing: 1.5px; border-right: 1px solid var(--line); }
.hero-count b { color: var(--copper); font-size: 18px; margin-right: 6px; }
.hero-controls button { width: 76px; height: 76px; border: 0; background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .25s, color .25s; }
.hero-controls button:hover { background: var(--copper); color: #fff; }
.hero-controls button svg { width: 20px; height: 20px; }
.hero-progress { position: absolute; left: 0; bottom: 0; z-index: 4; height: 3px; width: 0; background: var(--copper); }
.hero-progress.run { width: 100%; transition: width 6.5s linear; }

/* ---- sections ---- */
.sec { padding: 120px 0; position: relative; overflow: hidden; }
.sec-soft { background: var(--soft); }
.sec-dark { background: var(--dark); color: rgba(255, 255, 255, .74); }
.sec-dark h2, .sec-dark h3 { color: #fff; }
/* section headings: a big faint word behind the title, no underline stroke */
.sec-head { position: relative; margin-bottom: 56px; max-width: 760px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .ghost { position: absolute; left: -6px; top: -.62em; z-index: 0; font: 900 clamp(70px, 10vw, 150px)/1 var(--head); color: rgba(14, 13, 12, .045); letter-spacing: -2px; white-space: nowrap; pointer-events: none; user-select: none; }
.sec-head.center .ghost { left: 50%; transform: translateX(-50%); }
.sec-dark .sec-head .ghost { color: rgba(255, 255, 255, .05); }
.sec-head .kicker { position: relative; color: var(--copper); margin-bottom: 14px; }
.sec-head h2 { position: relative; }
.sec-head p { position: relative; font-size: 17px; }
.lead { font-size: 18px; color: var(--text); }

/* intro: copy + two overlapping photos */
.intro-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 80px; align-items: center; }
.intro-photos { position: relative; min-height: 600px; }
.intro-photos img { position: absolute; object-fit: cover; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55); }
.intro-photos .p1 { right: 0; top: 0; width: 66%; height: 78%; }
.intro-photos .p2 { left: 0; bottom: 0; width: 56%; height: 52%; border: 10px solid #fff; }
.intro-photos .tag { position: absolute; left: 6%; top: 10%; z-index: 2; background: var(--dark); color: #fff; padding: 22px 26px; max-width: 230px; font: 600 14px/1.45 var(--ui); letter-spacing: .4px; }
.intro-photos .tag b { display: block; font: 800 40px/1 var(--head); color: #f0c79c; margin-bottom: 6px; }
.ticks { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--ink); font-size: 15px; }
.ticks svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--copper); }

/* range tiles */
.range { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.range-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; display: block; }
.range-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* Hover, as the theme's project tiles: the shade rises to cover the photo, a white frame
   scales in from the centre, and the text slides up with a slight spring. */
.range-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); transition: height .45s ease-out, background-color .45s ease-out; }
.range-tile::before { content: ""; position: absolute; inset: 16px; z-index: 1; border: 1px solid rgba(255, 255, 255, .9); opacity: 0; transform: scale(.01); transition: opacity .35s ease-out, transform .35s ease-out; pointer-events: none; }
.range-tile:hover img, .range-tile:focus-visible img { transform: scale(1.07); }
.range-tile:hover::after, .range-tile:focus-visible::after { height: 100%; background-color: rgba(0, 0, 0, .45); }
.range-tile:hover::before, .range-tile:focus-visible::before { opacity: 1; transform: scale(1); }
.range-tile:focus-visible { outline: none; }
.range-body { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 2; transition: transform .35s cubic-bezier(.69, -.04, .12, 1.1); }
.range-tile:hover .range-body, .range-tile:focus-visible .range-body { transform: translateY(-110px); }
.range-body h3 { color: #fff; font-size: 26px; margin-bottom: 6px; }
.range-body span { font: 600 12px/1 var(--ui); letter-spacing: 2.4px; text-transform: uppercase; color: #f0c79c; }
.range-body em { display: block; font-style: normal; margin-top: 14px; font: 600 13px/1 var(--ui); letter-spacing: 1.4px; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.range-tile:hover .range-body em, .range-tile:focus-visible .range-body em { opacity: 1; transform: none; }
.range-foot { text-align: center; padding: 46px 0 0; }

/* services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc { background: #fff; border: 1px solid var(--line); padding: 40px 34px 36px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35); border-color: transparent; }
.svc-icon { width: 56px; height: 56px; color: var(--copper); margin-bottom: 26px; }
.svc h3 { font: 700 16px/1.35 var(--ui); letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 14px; }
.svc p { margin: 0; font-size: 15px; }
.svc-photo { padding: 0; border: 0; overflow: hidden; position: relative; min-height: 300px; }
.svc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-photo span { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--copper); color: #fff; padding: 14px 22px; font: 700 12px/1 var(--ui); letter-spacing: 2px; text-transform: uppercase; }

/* facts band */
.facts { position: relative; overflow: hidden; padding: 100px 0; color: #fff; background: var(--dark) center / cover no-repeat; }
.facts::before { content: ""; position: absolute; inset: 0; background: rgba(12, 11, 10, .78); }
.facts .wrap { position: relative; }
.facts-title { text-align: center; font: 700 clamp(28px, 3vw, 40px)/1.2 var(--serif); color: #fff; margin-bottom: 56px; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.fact svg { width: 46px; height: 46px; color: #f0c79c; margin: 0 auto 18px; }
.fact b { display: block; font: 800 clamp(40px, 4.4vw, 58px)/1 var(--head); color: #fff; margin-bottom: 10px; }
.fact span { font: 600 13px/1.3 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

/* testimonials: tabbed */
.reviews { display: grid; grid-template-columns: 340px 1fr; gap: 0; background: #fff; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .4); }
.review-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.review-tab { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text); position: relative; transition: background .25s; }
.review-tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--copper); transform: scaleY(0); transition: transform .3s var(--ease); }
.review-tab[aria-selected="true"] { background: var(--soft); }
.review-tab[aria-selected="true"]::before { transform: scaleY(1); }
.review-tab .av { width: 46px; height: 46px; border-radius: 50%; background: var(--copper-soft); color: var(--copper-dark); display: grid; place-items: center; font: 700 16px/1 var(--head); flex: none; }
.review-tab b { display: block; color: var(--ink); font: 700 15px/1.3 var(--head); }
.review-tab small { font-size: 13px; color: var(--muted); }
.review-panel { padding: 56px 60px; position: relative; }
.review-panel[hidden] { display: none; }
.review-panel .stars { color: var(--copper); letter-spacing: 3px; font-size: 18px; margin-bottom: 18px; }
.review-panel blockquote { margin: 0; font: 400 italic 22px/1.6 var(--serif); color: var(--ink); }
.review-panel .q { position: absolute; right: 40px; bottom: 26px; width: 86px; height: 86px; color: var(--copper-soft); }
.review-panel .who { margin-top: 26px; font: 600 13px/1 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--copper); }

/* featured floors */
.floors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.floor-tile { display: block; background: #fff; color: var(--ink); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.floor-tile:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35); color: var(--ink); }
.floor-tile .ph { display: block; aspect-ratio: 1; overflow: hidden; background: var(--soft); }
.floor-tile .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.floor-tile:hover .ph img { transform: scale(1.06); }
.floor-tile .bd { display: block; padding: 18px 18px 22px; text-align: center; }
.floor-tile b { display: block; font: 700 16px/1.3 var(--head); margin-bottom: 4px; }
.floor-tile .meta { display: block; font: 500 12px/1.3 var(--ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }

/* best premium flooring */
.premium { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; overflow: hidden; }
.intro-grid > *, .quote-grid > *, .areas > *, .premium > *, .reviews > * { min-width: 0; }
.premium-photo { position: relative; min-height: 560px; }
.premium-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.premium-photo .label { position: absolute; right: -1px; top: 60px; background: var(--dark); color: #fff; padding: 14px 30px; font: 800 26px/1 var(--head); letter-spacing: .5px; }
.premium-copy { padding: 70px 7vw 70px 80px; }

/* areas */
.areas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; }
.area-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.area-list li { padding: 9px 16px; border: 1px solid var(--line); background: #fff; font: 600 14px/1 var(--ui); color: var(--ink); }
.area-list.secondary li { color: var(--text); font-weight: 500; }
.areas h3 { font: 700 14px/1 var(--ui); letter-spacing: 2.4px; text-transform: uppercase; color: var(--copper); margin: 0; }

/* quote */
.quote { position: relative; background: var(--dark) center / cover no-repeat; }
.quote::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 11, 10, .92) 0%, rgba(12, 11, 10, .82) 50%, rgba(12, 11, 10, .6) 100%); }
.quote .wrap { position: relative; }
.quote-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.quote-copy h2 { color: #fff; }
.quote-copy p { color: rgba(255, 255, 255, .8); }
.quote-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.quote-points li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, .85); }
.quote-points svg { width: 22px; height: 22px; flex: none; color: #f0c79c; margin-top: 2px; }
.form-card { background: #fff; padding: 42px 40px 36px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.form-card h3 { font-size: 26px; margin-bottom: 6px; }
.form-card > p { margin-bottom: 22px; }
.ed-form .field label { font: 600 13px/1.3 var(--ui); letter-spacing: .4px; color: var(--ink); }
.ed-form .field input, .ed-form .field select, .ed-form .field textarea { border: 1px solid #d9d3cb; border-radius: 0; background: #faf8f5; padding: 12px 14px; font: 400 15px/1.4 var(--body); transition: border-color .2s, box-shadow .2s, background .2s; }
.ed-form .field textarea { min-height: 110px; resize: vertical; }
.ed-form .field input:focus, .ed-form .field select:focus, .ed-form .field textarea:focus { outline: none; border-color: var(--copper); background: #fff; box-shadow: 0 0 0 3px rgba(182, 112, 42, .15); }
.ed-form .btn, .ed-form button[type="submit"] { width: 100%; height: 54px; border: 0; border-radius: 0; background: var(--copper); color: #fff; font: 700 13px/1 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: background .25s; margin-top: 6px; }
.ed-form button[type="submit"]:hover { background: var(--copper-dark); }
.ed-form .form-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.ed-form .form-msg { margin-top: 14px; padding: 12px 14px; font-weight: 600; font-size: 14px; }
.ed-form .form-msg.ok { background: #eaf6ee; color: #1d6b3a; }
.ed-form .form-msg.err { background: #fbeceb; color: #9b2a22; }

/* inner page banner */
.page-banner { position: relative; padding: 190px 0 90px; color: #fff; background: var(--dark) center / cover no-repeat; }
.page-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 9, 8, .85) 0%, rgba(10, 9, 8, .55) 60%, rgba(10, 9, 8, .3) 100%); }
.page-banner .wrap { position: relative; }
.page-banner h1 { font: 700 clamp(36px, 5vw, 64px)/1.08 var(--serif); color: #fff; margin: 0 0 16px; max-width: 900px; }
.page-banner p { font-size: 18px; color: rgba(255, 255, 255, .85); max-width: 680px; margin: 0; }
.crumbs { display: flex; gap: 10px; list-style: none; margin: 0 0 22px; padding: 0; font: 600 12px/1 var(--ui); letter-spacing: 2px; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .45); }
.crumbs a { color: rgba(255, 255, 255, .8); }
.crumbs [aria-current] { color: #f0c79c; }
.prose { max-width: 820px; font-size: 17px; }
.prose h2 { font-size: 28px; margin-top: 1.6em; }

/* catalogue page: fit the carried-over browser into this layout */
.catalogue-sec { padding: 70px 0 110px; }
.catalogue-intro { max-width: 760px; margin-bottom: 36px; font-size: 17px; }
.floor-modal-actions .btn { height: 50px; }

/* footer */
.site-footer { background: #0f0e0d; color: rgba(255, 255, 255, .62); padding: 90px 0 0; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 50px; }
.site-footer .logo { color: #fff; margin-bottom: 22px; }
.site-footer h4 { font: 700 13px/1 var(--ui); letter-spacing: 2.4px; text-transform: uppercase; color: #fff; margin: 6px 0 24px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer a { color: rgba(255, 255, 255, .72); transition: color .2s; }
.site-footer a:hover { color: #f0c79c; }
.foot-bottom { margin-top: 70px; border-top: 1px solid rgba(255, 255, 255, .1); padding: 24px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 50px; height: 50px; border: 0; background: var(--copper); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }

/* brands strip: full width, short */
.brands { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brands-row { display: flex; align-items: center; gap: 40px; padding: 18px 40px; max-width: 1600px; margin: 0 auto; }
.brands-label { flex: none; margin: 0; font: 700 12px/1.5 var(--ui); letter-spacing: 2.4px; text-transform: uppercase; color: var(--copper); padding-right: 40px; border-right: 1px solid var(--line); }
.brands-list { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; margin: 0; padding: 0; }
.brands-list a { display: block; border-radius: 3px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.brands-list a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .5); }
.brands-list img { height: 58px; width: auto; }

/* warranty cards */
.warranties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.warranty { display: flex; gap: 22px; align-items: center; padding: 26px; border: 1px solid var(--line); background: #fff; transition: box-shadow .4s var(--ease), border-color .4s; }
.warranty:hover { border-color: transparent; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35); }
.warranty-logo { flex: none; width: 110px; height: auto; border-radius: 3px; }
.warranty-body { min-width: 0; }
.warranty-years { margin: 0 0 6px; font: 600 15px/1 var(--ui); color: var(--ink); letter-spacing: .4px; }
.warranty-years small { display: block; font: 600 11px/1 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.warranty-years b { font: 800 40px/1 var(--head); color: var(--copper); margin-right: 4px; }
.warranty-cover { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.warranty-link { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--ui); letter-spacing: 1.2px; text-transform: uppercase; }
.warranty-link svg { width: 13px; height: 13px; transition: transform .25s; }
.warranty-link:hover svg { transform: translateX(3px); }
.warranty-note { display: flex; gap: 14px; align-items: flex-start; margin: 36px 0 0; padding: 20px 24px; background: var(--soft); font-size: 14.5px; }
.warranty-note svg { width: 24px; height: 24px; flex: none; color: var(--copper); margin-top: 1px; }
@media (max-width: 1180px) {
  .brands-row { padding: 18px 26px; gap: 26px; }
  .brands-label { padding-right: 26px; }
  .brands-list img { height: 48px; }
  .warranties { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .brands-row { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .brands-label { border-right: 0; padding-right: 0; text-align: center; }
  .brands-label br { display: none; }
  .brands-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .brands-list img { height: 44px; width: auto; }
}
@media (max-width: 640px) {
  .brands-row { padding: 14px 16px; gap: 10px; }
  .brands-list { gap: 8px; }
  .brands-list img { height: 38px; }
  .warranties { grid-template-columns: 1fr; }
  .warranty { padding: 20px; gap: 16px; }
  .warranty-logo { width: 92px; }
  .warranty-years b { font-size: 34px; }
}

/* reveal on scroll (only when JS runs) */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .1s; } .js .reveal.d2 { transition-delay: .2s; } .js .reveal.d3 { transition-delay: .3s; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .head-row { padding: 0 26px; gap: 18px; }
  .nav-link { padding: 12px 11px; letter-spacing: .8px; }
  .head-cta { display: none; }
  .intro-grid, .quote-grid, .areas { grid-template-columns: 1fr; gap: 56px; }
  .intro-photos { min-height: 520px; max-width: 720px; }
  .range { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .floors { grid-template-columns: repeat(3, 1fr); }
  .premium { grid-template-columns: 1fr; }
  .premium-photo { min-height: 420px; }
  .premium-copy { padding: 60px 28px; max-width: 820px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: 1fr; }
  .review-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .review-tab { flex: 1 0 220px; border-bottom: 0; border-right: 1px solid var(--line); }
  .review-tab::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px; transform: scaleX(0); }
  .review-tab[aria-selected="true"]::before { transform: scaleX(1); }
}
@media (max-width: 960px) {
  .burger { display: flex; }
  .nav { position: fixed; inset: 74px 0 0 0; background: #fff; color: var(--ink); overflow-y: auto; padding: 14px 26px 40px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open .site-header { background: #fff; color: var(--ink); }
  .nav-open .site-header .head-row { height: 74px; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--line); }
  .nav-link { width: 100%; justify-content: space-between; padding: 18px 2px; font-size: 15px; color: var(--ink) !important; }
  .drop, .has-drop:hover > .drop, .has-drop:focus-within > .drop { position: static; transform: none; min-width: 0; box-shadow: none; padding: 0 0 12px; opacity: 1; visibility: visible; display: none; transition: none; }
  .drop::before { display: none; }
  .has-drop.open > .drop { display: block; }
  .drop a { padding: 10px 6px; }
  .nav .mob-cta { display: block; border: 0; padding-top: 24px; }
  .nav .mob-cta .btn { width: 100%; }
  .head-row { height: 74px; }
  .sec { padding: 86px 0; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .hero-count { display: none; }
  .hero-controls button { width: 60px; height: 60px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .head-row { padding: 0 16px; }
  .logo-mark { width: 32px; height: 32px; }
  .logo-text b { font-size: 21px; }
  .logo-text small { letter-spacing: 3px; }
  .range, .services, .floors, .ticks, .foot-grid { grid-template-columns: 1fr; }
  .floors { grid-template-columns: 1fr 1fr; gap: 14px; }
  .intro-photos { min-height: 380px; }
  .intro-photos .tag { padding: 16px 18px; max-width: 180px; }
  .intro-photos .tag b { font-size: 30px; }
  .slide-text { font-size: 16px; }
  .slide-btns .btn { flex: 1 1 auto; }
  .form-card { padding: 30px 20px 26px; }
  .review-panel { padding: 36px 24px 60px; }
  .review-panel blockquote { font-size: 19px; }
  .page-banner { padding: 150px 0 64px; }
  .premium-photo { min-height: 300px; }
  .sec-head .ghost { font-size: 64px; }
}
@media (max-width: 380px) {
  .logo-text b { font-size: 19px; }
  .logo-text small { font-size: 9px; letter-spacing: 2.2px; }
  .floors { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .facts-grid { gap: 40px 12px; }
  .fact b { font-size: 34px; }
  .fact span { font-size: 11px; letter-spacing: 1.2px; }
  .fact svg { width: 38px; height: 38px; }
  .warranty { flex-direction: column; align-items: flex-start; }
  .warranty-logo { width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- floor fitting page ---- */
.fit-types .svc .warranty-link { margin-top: 20px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; counter-reset: step; }
.steps li { background: #fff; border: 1px solid var(--line); padding: 34px 26px 30px; counter-increment: step; }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.step-no { font: 800 36px/1 var(--head); color: var(--copper); }
.step-ic { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--copper-soft); color: var(--copper); }
.step-ic svg { width: 21px; height: 21px; }
.steps h3 { font: 700 15px/1.35 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 12px; }
.steps p { margin: 0; font-size: 15px; }
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 48px 24px 0; font: 600 18px/1.4 var(--ui); color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 30px/1 var(--ui); color: var(--copper); transition: transform .3s var(--ease); }
.faq details[open]:not(.is-closing) summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--copper); }
.faq details p { margin: 0 0 26px; max-width: 760px; }
@media (max-width: 1180px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .faq summary { font-size: 16px; } }

/* ---- underfloor heating: layer build up ---- */
.layers-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: center; }
.layers-grid > * { min-width: 0; }
.layers { list-style: none; margin: 0; padding: 28px; background: #fff; border: 1px solid var(--line); display: grid; gap: 14px; }
.layers li { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; }
.layers .bar { display: block; border-radius: 2px; }
.layers .txt { font-size: 15px; line-height: 1.55; }
.layers .txt b { display: block; font: 700 13px/1.3 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.layers .l-floor { height: 34px; background: repeating-linear-gradient(90deg, #c98c4f 0 46px, #b97a3e 46px 48px, #d39a5e 48px 96px, #b97a3e 96px 98px); }
.layers .l-pet { height: 8px; background: linear-gradient(90deg, rgba(150, 190, 220, .55), rgba(190, 215, 235, .8)); outline: 1px solid rgba(120, 160, 200, .5); }
.layers .l-film { height: 12px; background: repeating-linear-gradient(90deg, #1b1b1b 0 4px, #2e2e2e 4px 6px); box-shadow: inset 0 2px 0 var(--copper), inset 0 -2px 0 var(--copper); }
.layers .l-board { height: 26px; background: #dfe6ec; }
.layers .l-sub { height: 40px; background: repeating-linear-gradient(135deg, #a7a39d 0 6px, #9a968f 6px 12px); }
@media (max-width: 1180px) { .layers-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 520px) { .layers { padding: 20px; } .layers li { grid-template-columns: 90px 1fr; gap: 16px; } }

/* ---- flooring type pages ---- */
.intro-photos.type-photo .p1 { left: 10%; right: 0; top: 0; width: auto; height: 100%; }
.intro-photos.type-photo .tag { left: 0; top: auto; bottom: 12%; }
.type-notes { grid-template-columns: repeat(3, 1fr); }
.floor-more-tile .ph { display: grid; place-items: center; background: var(--dark); color: #fff; transition: background .4s var(--ease); }
.floor-more-tile .more-in { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.floor-more-tile .more-in b { font: 800 clamp(34px, 3.4vw, 48px)/1 var(--head); color: #f0c79c; margin: 0; }
.floor-more-tile .more-in span { font: 600 12px/1.3 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.floor-more-tile .more-in svg { width: 26px; height: 26px; margin-top: 10px; color: #fff; transition: transform .35s var(--ease); }
.floor-more-tile:hover .ph { background: var(--copper); }
.floor-more-tile:hover .more-in b { color: #fff; }
.floor-more-tile:hover .more-in svg { transform: translateX(6px); }
.floor-more-tile .bd b { color: var(--copper); }
@media (max-width: 960px) { .type-notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .type-notes { grid-template-columns: 1fr; } }

/* Quote form submit: the white plank arrow, as on the other buttons */
.ed-form button[type="submit"] { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ed-form button[type="submit"]::after { content: ""; width: 15px; height: 15px; flex: none; background: url(/images/icons/plank-arrow-white.svg) center / contain no-repeat; transition: transform .3s var(--ease); }
.ed-form button[type="submit"]:hover::after { transform: translateX(4px); }

/* Preloader: the logo mark builds plank by plank. Each plank slides a short way along its
   own length as it fades in: the pale top planks come down diagonally, the copper lower
   planks come up diagonally to meet them. Left pair first, then the right pair, then the
   whole mark fades and starts again. Plank order in the mark: 1 copper right, 2 pale right,
   3 copper left, 4 pale left. */
.preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--white); transition: opacity .6s var(--ease), visibility .6s; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-mark { width: 86px; height: 86px; overflow: visible; }
.preloader-mark path { opacity: 0; animation: 2.8s var(--ease) infinite both; }
.preloader-mark path:nth-child(4) { --dx: 3px; --dy: -3px; animation-name: plank-a; }
.preloader-mark path:nth-child(3) { --dx: 3px; --dy: 3px; animation-name: plank-b; }
.preloader-mark path:nth-child(2) { --dx: 3px; --dy: -3px; animation-name: plank-c; }
.preloader-mark path:nth-child(1) { --dx: 3px; --dy: 3px; animation-name: plank-d; }
@keyframes plank-a { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 12%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes plank-b { 0%, 12% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 24%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes plank-c { 0%, 28% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 40%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes plank-d { 0%, 40% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 52%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .preloader-mark path { animation: none; opacity: 1; } }

/* Contact page: a light section, so it reads differently from the dark free quote band */
.contact-copy .quote-points li { color: var(--text); }
.contact-copy .quote-points svg { color: var(--copper); }
.contact-copy .quote-points b { color: var(--ink); }
.contact-copy .btn { margin-top: 32px; }
.contact-grid .form-card { border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .25); }
.contact-copy .kicker { color: var(--copper); }
.faq-a { display: flow-root; }

/* Homepage underfloor heating: the dark, mirrored version of the premium split */
.premium-dark { background: var(--dark); color: rgba(255, 255, 255, .74); }
.premium-dark h2 { color: #fff; }
.premium-dark .sec-head .ghost { color: rgba(255, 255, 255, .05); }
.premium-dark .lead { color: rgba(255, 255, 255, .86); }
.premium-dark .premium-photo .label { background: var(--copper); }
.premium-dark .slide-btns { margin-top: 30px; }
.heat-facts { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255, 255, 255, .14); }
.heat-facts li { padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.heat-facts li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.heat-facts b { font: 800 30px/1 var(--head); color: #f0c79c; }
.heat-facts span { font: 600 11px/1.3 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
@media (min-width: 1181px) {
  .premium-dark { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .premium-dark .premium-photo { order: 2; }
  .premium-dark .premium-photo .label { right: auto; left: -1px; }
  .premium-dark .premium-copy { padding: 90px 70px 90px 7vw; }
}
@media (max-width: 420px) { .heat-facts li { padding: 16px 10px; } .heat-facts b { font-size: 24px; } }
@media (max-width: 420px) { .premium-dark .slide-btns .btn { white-space: normal; text-align: center; line-height: 1.4; height: auto; min-height: 52px; padding: 12px 22px; } }

/* Service card heading that links through: same look, copper on hover, never underlined */
.svc h3 a.svc-link { color: inherit; text-decoration: none; transition: color .25s; }
.svc h3 a.svc-link:hover, .svc h3 a.svc-link:focus-visible { color: var(--copper); text-decoration: none; }

/* Long buttons wrap on phones instead of running off the page */
@media (max-width: 600px) {
  .btn { white-space: normal; height: auto; min-height: 52px; padding: 14px 24px; line-height: 1.35; text-align: center; }
}

/* Brands: the second copy only appears for the phone ticker */
.brands-list .brands-dup { display: none; }
@media (max-width: 960px) {
  .brands-row { overflow: hidden; }
  .brands-list { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: brands-cycle 26s linear infinite; }
  .brands-list li { padding-right: 16px; }
  .brands-list .brands-dup { display: block; }
  .brands-list img { height: 66px; }
  .brands-row:hover .brands-list { animation-play-state: paused; }
}
@media (max-width: 640px) { .brands-list img { height: 60px; } .brands-list li { padding-right: 12px; } }
@keyframes brands-cycle { to { transform: translateX(-50%); } }
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .brands-list { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .brands-list .brands-dup { display: none; }
}