/*
Theme Name: Liquid Marble Launch
Description: Approved October 2026 website with finish gallery and Meet Dan.
Version: 1.3.0
Text Domain: liquid-marble-launch
*/

:root { --ink:#161a1d; --gold:#b98935; --cream:#f7f3eb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; inset:0 0 auto; z-index:10; height:92px; display:flex; align-items:center; padding:0 clamp(24px,5vw,76px); gap:40px; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72),transparent); }
.brand { display:flex; align-items:center; gap:14px; min-width:max-content; }
.brand img { width:76px; height:auto; mix-blend-mode:multiply; }
.brand span { font-family:Georgia,serif; font-size:23px; letter-spacing:.02em; }
nav { margin-left:auto; display:flex; gap:34px; font-size:13px; text-transform:uppercase; letter-spacing:.13em; }
nav a { padding:12px 0; border-bottom:1px solid transparent; }
nav a:hover { border-color:var(--gold); }
.header-cta { padding:14px 20px; border:1px solid rgba(22,26,29,.7); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.hero { position:relative; min-height:max(100svh,760px); overflow:hidden; display:flex; align-items:center; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 68%; }
.hero-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(250,248,243,.96) 0%,rgba(250,248,243,.82) 30%,rgba(250,248,243,.18) 65%,rgba(250,248,243,.03) 100%); }
.hero-content { position:relative; z-index:2; width:min(650px,88vw); margin-left:clamp(28px,8vw,130px); padding:140px 0 125px; }
.eyebrow { margin:0 0 22px; color:#8a632a; text-transform:uppercase; letter-spacing:.24em; font-size:12px; font-weight:700; }
h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:clamp(54px,7vw,104px); line-height:.93; letter-spacing:-.045em; }
.hero-copy { max-width:600px; margin:30px 0 34px; font-size:clamp(17px,1.35vw,21px); line-height:1.6; color:#4a4d4e; }
.launch-note { display:flex; flex-direction:column; gap:5px; width:max-content; max-width:100%; margin:-14px 0 30px; padding:12px 16px; border-left:3px solid var(--gold); background:rgba(255,255,255,.62); font-size:13px; letter-spacing:.04em; color:#414548; }
.launch-note strong { color:#7f5c25; text-transform:uppercase; letter-spacing:.13em; font-size:11px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; }
.primary-button { background:var(--ink); color:white; padding:18px 25px; font-size:12px; text-transform:uppercase; letter-spacing:.15em; }
.primary-button:hover { background:#2d3337; }
.text-link { font-size:13px; text-transform:uppercase; letter-spacing:.12em; border-bottom:1px solid #9b7c47; padding-bottom:6px; }
.text-link span { color:var(--gold); margin-left:6px; }
.hero-foot { position:absolute; z-index:2; bottom:30px; left:clamp(28px,8vw,130px); display:flex; align-items:center; gap:15px; font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:#585b5d; }
.hero-foot i { width:22px; height:1px; background:var(--gold); }
@media (max-width:1050px) {
  .site-header { gap:20px; }
  .site-header nav { display:none; }
  .header-cta { margin-left:auto; }
}
@media (max-width:820px) {
  .site-header { height:78px; padding:0 22px; }
  .brand img { width:58px; } .brand span { font-size:20px; }
  nav { display:none; } .header-cta { margin-left:auto; padding:11px 12px; font-size:10px; }
  .hero-image { object-position:58% center; }
  .hero { min-height:max(100svh,720px); }
  .hero-wash { background:linear-gradient(90deg,rgba(250,248,243,.97),rgba(250,248,243,.78) 58%,rgba(250,248,243,.2)); }
  .hero-content { margin:0 24px; padding:112px 0 105px; }
  h1 { font-size:clamp(50px,15vw,72px); }
  .hero-copy { font-size:16px; line-height:1.5; }
  .hero-foot { left:24px; bottom:22px; gap:9px; letter-spacing:.11em; }
  .hero-foot i { width:10px; }
}
@media (max-height:620px) and (min-width:821px) {
  .hero { min-height:760px; }
}

.section-kicker { color:#9b7134; text-transform:uppercase; letter-spacing:.22em; font-weight:700; font-size:11px; }
h2 { margin:10px 0 22px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(42px,5vw,75px); font-weight:400; line-height:1.02; letter-spacing:-.035em; }
h2 em { color:#8d6932; font-weight:400; }
.visualiser { padding:clamp(85px,11vw,155px) clamp(28px,8vw,130px); background:#f7f3eb; }
.visualiser-heading { display:grid; grid-template-columns:.7fr 1.35fr; column-gap:8vw; align-items:start; margin-bottom:55px; }
.visualiser-heading .section-kicker { grid-row:1 / span 2; }
.visualiser-heading h2 { margin-top:0; }
.visualiser-heading>p:last-child { max-width:720px; font-size:18px; line-height:1.7; color:#555754; }
.visualiser-shell { display:grid; grid-template-columns:1.12fr .88fr; background:#eee8dd; box-shadow:0 28px 80px rgba(45,39,30,.12); }
.visualiser-preview { position:relative; min-height:760px; overflow:hidden; background:#202224; }
.visualiser-preview.has-photo { min-height:0; align-self:start; }
.visualiser-preview>img { width:100%; height:100%; object-fit:cover; }
.visualiser-preview.has-photo>img { object-fit:contain; display:block; }
.floor-effect { position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:multiply; transform:none; transform-origin:center; transition:background .35s ease,filter .35s ease,clip-path .12s ease; }
.floor-effect-metallic { background-repeat:no-repeat,repeat; filter:saturate(1.08) contrast(1.05); animation:metallic-flow 7s ease-in-out infinite alternate; }
.floor-effect-metallic::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,rgba(255,255,255,.26),transparent 38%,rgba(255,255,255,.13) 62%,transparent); mix-blend-mode:screen; }
.floor-effect-flake { background-size:92px 92px!important; background-repeat:repeat!important; mix-blend-mode:normal; opacity:.94; filter:contrast(1.04); }
.floor-effect-solid { mix-blend-mode:multiply; opacity:.78; filter:saturate(.9) contrast(.92); }
@keyframes metallic-flow { from { background-position:0% 30%; } to { background-position:100% 70%; } }
.preview-label { position:absolute; left:25px; bottom:25px; display:flex; flex-direction:column; gap:4px; padding:14px 18px; background:rgba(18,22,23,.84); color:white; }
.preview-label span { font-size:9px; text-transform:uppercase; letter-spacing:.17em; color:#d8b778; }
.preview-label b { font-family:Georgia,serif; font-size:20px; font-weight:400; }
.floor-handles { position:absolute; inset:0; pointer-events:none; }
.floor-handle { position:absolute; z-index:4; width:34px; height:34px; margin:-17px 0 0 -17px; border:2px solid white; border-radius:50%; background:#af7d31; color:white; box-shadow:0 2px 12px rgba(0,0,0,.45); cursor:grab; pointer-events:auto; touch-action:none; }
.floor-handle:active { cursor:grabbing; transform:scale(1.08); }
.floor-handle span { font-size:11px; font-weight:700; }
.visualiser-controls { padding:clamp(35px,5vw,70px); }
.control-block { border:0; padding:0 0 27px; margin:0 0 28px; border-bottom:1px solid #cfc4b2; }
.control-title { display:block; margin:0 0 16px; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
#room-photo { position:absolute; width:1px; height:1px; opacity:0; }
.upload-button { display:block; padding:15px 17px; border:1px dashed #9c8765; cursor:pointer; background:#f8f5ef; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.control-block small { display:block; margin-top:8px; color:#75746f; }
.floor-adjuster { margin-top:16px; padding:14px; background:#e4dac9; }
.floor-adjuster p { margin:0 0 12px; font-size:12px; line-height:1.45; }
.floor-adjuster label { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.floor-adjuster input { width:100%; accent-color:#a57630; }
.floor-adjuster button { margin-top:12px; padding:8px 10px; border:1px solid #9b8767; background:transparent; cursor:pointer; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.choice-row { display:flex; flex-wrap:wrap; gap:8px; }
.choice,.palette { font:inherit; color:inherit; cursor:pointer; background:transparent; border:1px solid #bfb5a5; }
.choice { padding:11px 13px; font-size:12px; }
.choice.active,.palette.active { border-color:#a57630; box-shadow:inset 0 0 0 1px #a57630; background:#fff; }
.palette-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.palette-count { margin:-7px 0 12px; color:#77746e; font-size:11px; }
.palette { padding:8px; display:flex; align-items:center; gap:10px; text-align:left; font-size:12px; }
.palette i,.palette img { flex:0 0 42px; width:42px; height:38px; object-fit:cover; }
.flake-palette-grid .palette { padding:0; display:block; overflow:hidden; background:#f8f5ef; }
.flake-palette-grid { grid-template-columns:repeat(3,1fr); }
.flake-palette-grid .palette img { display:block; width:100%; height:82px; image-rendering:auto; }
.flake-palette-grid .palette span { display:block; padding:10px 11px; }
.selected-combination { margin-top:14px; padding:13px 15px; background:#e5dccd; display:flex; flex-direction:column; gap:4px; }
.selected-combination span { font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:#7f673f; }
.selected-combination b { font-family:Georgia,serif; font-size:17px; font-weight:400; }
.supplier-note { margin-top:12px!important; line-height:1.5; }
.enquiry-fields { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.enquiry-fields label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.enquiry-fields input,.enquiry-fields textarea { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid #c8bdac; background:#faf8f4; border-radius:0; font:14px Arial,sans-serif; text-transform:none; letter-spacing:0; }
.field-wide { grid-column:1 / -1; }
.consent { display:flex; gap:10px; align-items:flex-start; margin:22px 0; font-size:12px; line-height:1.5; color:#555754; }
.consent input { margin-top:2px; }
.visualiser-submit { border:0; cursor:pointer; }
.visualiser-submit:disabled { opacity:.55; cursor:wait; }
.form-success { color:#315f3d; font-weight:700; }
.form-error { color:#9c2e23; font-weight:700; }
.visualiser-disclaimer { margin:20px 0 0; font-size:11px; line-height:1.55; color:#77746e; }
.intro { padding:clamp(80px,11vw,160px) clamp(28px,8vw,130px); display:grid; grid-template-columns:1fr 2.2fr; gap:8vw; background:#f7f3eb; }
.intro>div:last-child { max-width:900px; }
.intro p { max-width:720px; font-size:19px; color:#555754; line-height:1.75; }
.services-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:440px 440px; gap:2px; background:#d8d0c2; }
.service-card { position:relative; overflow:hidden; color:white; }
.service-large { grid-row:1 / span 2; }
.service-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.service-card img.real-metallic { object-position:center 72%; filter:saturate(.82) contrast(1.07) brightness(.96); transform:scale(1.02); }
.service-card:hover img { transform:scale(1.025); }
.service-overlay { position:absolute; inset:auto 0 0; padding:55px 45px 38px; background:linear-gradient(transparent,rgba(12,15,16,.84)); }
.service-overlay span { color:#e2bc76; font-size:12px; letter-spacing:.15em; }
.service-overlay h3 { margin:8px 0 8px; font-family:Georgia,serif; font-weight:400; font-size:38px; }
.service-overlay p { margin:0; max-width:520px; color:#e3e3df; line-height:1.55; }
.design-feature { display:grid; grid-template-columns:1.22fr .78fr; min-height:730px; background:#ede7dc; }
.design-image { overflow:hidden; background:#1a1c1d; }
.design-image img { width:100%; height:100%; object-fit:cover; object-position:center 62%; filter:saturate(.8) contrast(1.08) brightness(.84); transform:scale(1.025); }
.design-copy { padding:clamp(70px,8vw,125px) clamp(35px,7vw,110px); display:flex; flex-direction:column; justify-content:center; }
.design-copy>p:not(.section-kicker) { font-size:18px; line-height:1.7; color:#545653; }
.design-copy ul { list-style:none; padding:20px 0 0; margin:0; border-top:1px solid #c9beac; }
.design-copy li { padding:15px 0; border-bottom:1px solid #c9beac; font-size:14px; }
.worktops { display:grid; grid-template-columns:.82fr 1.18fr; min-height:780px; background:#f4f0e8; }
.worktops-copy { padding:clamp(75px,9vw,135px) clamp(35px,7vw,110px); display:flex; flex-direction:column; justify-content:center; }
.worktops-copy>p:not(.section-kicker) { max-width:620px; font-size:18px; line-height:1.72; color:#545653; }
.worktops-copy ul { list-style:none; margin:22px 0 34px; padding:0; border-top:1px solid #c9beac; }
.worktops-copy li { padding:15px 0; border-bottom:1px solid #c9beac; font-size:14px; }
.worktops-copy .text-link { align-self:flex-start; }
.worktops-gallery { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; min-height:780px; background:#cfc6b7; }
.worktops-gallery figure { margin:0; overflow:hidden; background:#202325; }
.worktops-gallery .worktop-main { grid-row:1 / span 2; }
.worktops-gallery img { width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.06) brightness(.96); transition:transform .7s ease; }
.worktops-gallery .worktop-main img { object-position:center; }
.worktops-gallery figure:nth-child(2) img { object-position:center 58%; }
.worktops-gallery figure:nth-child(3) img { object-position:center; }
.worktops-gallery figure:hover img { transform:scale(1.025); }
.process { padding:clamp(90px,11vw,160px) clamp(28px,8vw,130px); background:#171b1d; color:white; }
.process>h2 { max-width:950px; }
.process-steps { margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #4b4f50; }
.process-steps>div { padding:32px 28px 10px 0; border-right:1px solid #4b4f50; min-height:220px; }
.process-steps>div+div { padding-left:28px; }
.process-steps b { color:#c99b50; font-size:12px; letter-spacing:.15em; }
.process-steps h3 { font-family:Georgia,serif; font-size:27px; font-weight:400; margin:45px 0 12px; }
.process-steps p { color:#b8bbba; line-height:1.6; font-size:14px; }
.about { padding:clamp(90px,12vw,180px) clamp(28px,8vw,130px); display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; background:#f7f3eb; }
.about-number { font-family:Georgia,serif; font-size:clamp(130px,19vw,280px); line-height:.8; color:#d8c7a8; letter-spacing:-.09em; }
.about-number span { color:#b98935; font-size:.45em; vertical-align:top; }
.about-copy p:not(.section-kicker) { max-width:720px; font-size:17px; line-height:1.8; color:#555754; }
.inspiration { padding:100px clamp(28px,8vw,130px); display:grid; grid-template-columns:1.4fr .6fr; align-items:end; gap:8vw; background:#e8e0d3; }
.inspiration-note { border-left:2px solid #b98935; padding-left:25px; color:#5b5d5a; line-height:1.7; font-size:14px; }
.contact { padding:clamp(90px,12vw,170px) clamp(28px,8vw,130px); display:grid; grid-template-columns:1.15fr .85fr; gap:9vw; background:#f9f7f2; }
.contact-panel { display:flex; flex-direction:column; align-items:flex-start; gap:15px; padding-top:25px; }
.contact-panel>p { font-size:17px; line-height:1.7; color:#555754; margin:0 0 20px; }
.contact-panel>a:not(.primary-button) { font-family:Georgia,serif; font-size:22px; border-bottom:1px solid #c9b990; padding-bottom:4px; }
.contact-button { margin-top:22px; }
footer { background:#111516; color:#ddd; padding:48px clamp(28px,5vw,76px); display:grid; grid-template-columns:1fr 1fr auto; gap:35px; align-items:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.footer-brand { display:flex; align-items:center; gap:13px; font-family:Georgia,serif; font-size:18px; text-transform:none; }
.footer-brand img { width:58px; background:white; }
@media (max-width:820px) {
  .intro,.design-feature,.worktops,.about,.inspiration,.contact,.visualiser-heading,.visualiser-shell { grid-template-columns:1fr; }
  .visualiser-heading .section-kicker { grid-row:auto; }
  .visualiser-preview { min-height:520px; }
  .services-grid { grid-template-columns:1fr; grid-template-rows:520px 380px 380px; }
  .service-large { grid-row:auto; }
  .service-overlay { padding:70px 24px 26px; }
  .service-overlay h3 { font-size:31px; }
  .design-feature { min-height:0; }.design-image { height:420px; }
  .worktops { min-height:0; }
  .worktops-gallery { min-height:720px; grid-template-rows:360px 360px; }
  .worktops-gallery .worktop-main { grid-column:1 / -1; grid-row:auto; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .process-steps>div { min-height:190px; }
  .about-number { font-size:150px; }
  footer { grid-template-columns:1fr; text-align:left; }
}
@media (max-width:520px) {
  .process-steps { grid-template-columns:1fr; }
  .process-steps>div { border-right:0; border-bottom:1px solid #4b4f50; padding:26px 0; min-height:0; }
  .process-steps>div+div { padding-left:0; }.process-steps h3 { margin:20px 0 8px; }
  .contact-panel>a:not(.primary-button) { font-size:18px; }
  .enquiry-fields { grid-template-columns:1fr; }.field-wide { grid-column:auto; }
  .palette-grid { grid-template-columns:1fr; }
  .flake-palette-grid { grid-template-columns:1fr 1fr; }
}

/* October enquiry launch and finish gallery */
.finish-gallery{padding:90px clamp(24px,7vw,110px);background:#fff}.gallery-intro{max-width:760px;line-height:1.7;color:#555}.finish-gallery>h3{font:32px Georgia,serif;margin:55px 0 12px}.finish-gallery>p{line-height:1.7}.finish-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.finish-grid figure{margin:0;min-width:0}.finish-grid img{display:block;width:100%;height:320px;object-fit:cover;transition:filter .2s}.finish-grid a:hover img{filter:brightness(1.08)}.finish-grid figcaption{padding:14px 0;font-size:14px;color:#555}.training{padding:75px clamp(24px,7vw,110px);display:grid;grid-template-columns:1fr 1.5fr;gap:70px;background:#f1ece2;align-items:center}.training-art{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.training-art>img{width:220px;max-width:100%;height:auto}.training-art .credential-badge{width:160px;height:160px;object-fit:contain}.training p{line-height:1.7}.site-header nav{gap:18px;font-size:12px}.site-header{gap:22px}.enquiry-note{font-size:15px;line-height:1.5;margin:0 0 25px;color:#735324}.gallery-page .site-header{position:relative;background:#f7f3eb}.gallery-page .finish-gallery{padding-top:60px}a:focus-visible{outline:3px solid #b98935;outline-offset:5px}
@media(max-width:1100px){.site-header .header-cta{display:none}.site-header{height:auto;min-height:100px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.site-header nav{margin-left:0;flex-wrap:wrap;gap:14px}.hero-content{padding-top:210px}}
@media(max-width:700px){.finish-grid{grid-template-columns:1fr}.finish-grid img{height:360px}.training{grid-template-columns:1fr;gap:35px}.training-art{justify-content:center}.gallery-page .site-header nav{font-size:12px}}
@media(max-width:1100px){.site-header nav{display:flex;width:100%;font-size:12px;gap:8px 16px}.site-header nav a{padding:5px 0}.site-header{gap:8px}.hero-content{padding-top:220px}}
/* Meet the team */
.team{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(35px,7vw,110px);align-items:center;padding:90px clamp(28px,8vw,130px);background:#eae3d7;scroll-margin-top:24px}.team-portrait{margin:0;max-width:460px;box-shadow:0 24px 55px #332b201a}.team-portrait img{display:block;width:100%;height:auto}.team-portrait figcaption{padding:22px 26px;background:#171b1d;color:#fff;font:26px Georgia,serif}.team-portrait figcaption span{display:block;margin-top:9px;color:#d8b778;font:10px Arial,sans-serif;text-transform:uppercase;letter-spacing:.18em}.team-copy h2{font-size:clamp(40px,4.4vw,66px)}.team-copy>p:not(.section-kicker){max-width:650px;color:#4e514e;font-size:17px;line-height:1.75}.team-copy .text-link{display:inline-block;margin-top:20px}.contact-panel>a{overflow-wrap:anywhere}@media(max-width:820px){.team{grid-template-columns:1fr;padding-top:60px;padding-bottom:60px}.team-portrait{max-width:400px;width:100%;margin:auto}.team-copy h2{font-size:44px}}

html{scroll-behavior:auto}
/* Keep navigation labels intact so wrapped text cannot create uneven visual gaps. */
.site-header nav{align-items:center;gap:18px}.site-header nav a{flex:0 0 auto;white-space:nowrap}
@media(min-width:1101px) and (max-width:1300px){.site-header .header-cta{display:none}}
@media(max-width:1100px){.site-header nav{gap:8px 16px}}