/* Carpet & Floors by Eric - v3. Dark, material-forward, editorial.
   Deliberately a different system from v1/v2: serif display instead of heavy geometric sans,
   dark ground instead of warm paper, photography carrying the service blocks. */
:root{
  --ink:#14100e; --ink-2:#1d1815; --ink-3:#282019;
  --cream:#f6f1e9; --cream-2:#e4d9c9; --mute:#9d8f81;
  --flame:#f2511f; --flame-2:#ff7a4d;
  --sub:#3b3430;
  --display:'Newsreader', Georgia, serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;
  --max:1240px; --r:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--body);background:var(--ink);color:var(--cream);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
section{position:relative}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(34px,5vw,60px)}
/* The eyebrow owns the gap to whatever follows it, so every section matches. Previously it
   had no bottom margin and only the hero looked right, by accident, via the h1 top margin. */
.kicker{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--flame-2);display:flex;align-items:center;gap:11px;margin-bottom:22px}
.kicker::before{content:'';width:26px;height:2px;background:var(--flame);flex:none}
.lede{font-size:19px;color:var(--cream-2);max-width:58ch}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:16px;text-decoration:none;padding:15px 28px;border-radius:999px;border:1.5px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.btn svg{flex:none}
.btn:hover{transform:translateY(-2px)}
.btn-call{background:var(--flame);color:#fff}
.btn-call:hover{background:var(--flame-2)}
.btn-text{border-color:rgba(246,241,233,.34);color:var(--cream)}
.btn-text:hover{border-color:var(--cream)}

/* ---------- header (the light bar from the v1 build) ---------- */
/* A cream bar over a dark page. It also removes the need for the logo plate up here,
   since the mark's black "BY ERIC" lockup reads fine on light. */
.site-header{position:sticky;top:0;z-index:60;background:rgba(246,241,233,.96);border-bottom:1px solid rgba(20,16,14,.13);backdrop-filter:blur(6px)}
.site-header .wrap{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:40px;width:auto;display:block}
.topnav{display:flex;gap:20px;margin-left:auto;font-weight:600;font-size:15px}
.topnav a{color:var(--ink);text-decoration:none;transition:color .18s ease}
.topnav a:hover{color:#c0400f}
.head-cta{display:flex;gap:10px;margin-left:auto;flex:none}
/* The page-level .btn-text is drawn for dark grounds (pale border, cream label); inside the
   light header it has to flip to ink or it disappears. */
.site-header .btn{font-size:15px;padding:11px 21px;border-width:2px}
.site-header .btn-text{background:transparent;color:var(--ink);border-color:var(--ink)}
.site-header .btn-text:hover{background:transparent;border-color:#c0400f;color:#c0400f}

/* ---------- hero: planks being laid over the room ---------- */
/* Layering, bottom to top: the room photo full-bleed, then the plank courses running left
   to right and stopping at a ragged work edge ON TOP of the photo, then the copy. The
   courses carry a hard right-edge shadow so they read as boards sitting above the picture
   rather than a flat colour block. Identical structure at every width: only how far the
   courses reach changes, so the composition survives on a phone. */
.hero{overflow:hidden;background-color:#1b1512}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 82%;z-index:0}
/* Settles the photo down so the plank shadow reads and the bottom edge does not glare. */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,10,8,.4),transparent 46%),
             linear-gradient(90deg,rgba(14,10,8,.26),transparent 40%)}
/* Sits OVER the boards: gives them depth and lifts the headline off the grain. */
.hero::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,rgba(13,9,7,.56) 0%,rgba(13,9,7,.34) 32%,rgba(13,9,7,.08) 50%,transparent 60%)}
.floor{position:absolute;inset:0;z-index:2;--ph:92px}
.pr{position:absolute;left:0;top:calc(var(--i) * var(--ph));height:var(--ph);width:var(--end);display:flex;overflow:hidden;
  box-shadow:10px 0 26px rgba(0,0,0,.66),2px 0 0 rgba(0,0,0,.5);
  animation:lay .52s cubic-bezier(.2,.72,.28,1) backwards;animation-delay:calc(var(--i) * 42ms)}
@keyframes lay{from{transform:translateX(-32px)}to{transform:none}}
/* Grain is a generated photoreal chestnut board, mirrored so it tiles seamlessly. Each
   board samples a different strip of it (--bx/--by), which supplies natural variation.
   The previous version faked variation with a random per-board shade and that read as
   blotchy, so there is deliberately no brightness randomisation here. */
.pr i{flex:none;width:var(--w);height:100%;background-color:#5c3826;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,rgba(255,255,255,.012) 1px 14%,rgba(0,0,0,.035) 62%,rgba(0,0,0,.28) 100%),
    url(assets/wood-oak-2.jpg);
  background-size:auto,760px auto;
  background-position:0 0,var(--bx,0) var(--by,0);
  background-repeat:no-repeat,repeat;
  border-right:1.5px solid rgba(0,0,0,.6);
  border-bottom:1px solid rgba(0,0,0,.48)}

.hero-inner{position:relative;z-index:6;width:100%;min-height:792px;padding-block:84px;display:flex;align-items:center}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(33px,5.6vw,84px);margin:0 0 22px;text-shadow:0 3px 26px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;color:var(--flame-2)}
.hero .lede{color:#f2e9de;text-shadow:0 2px 16px rgba(0,0,0,.72);max-width:44ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-note{margin-top:18px;font-size:14px;color:#dacdbd;text-shadow:0 2px 12px rgba(0,0,0,.8)}

/* ---------- the visit ---------- */
.visit{background:var(--cream);color:var(--ink);padding:104px 0}
.visit .lede{color:#59493c}
.visit .kicker{color:#c0400f}
/* Secondary display line, sized below the section h2 so it reads as a subhead rather than
   competing with "Showroom lighting lies." */
/* Subhead and the samples photo side by side; the numbered steps stay full width below. */
/* Scoped to this row only, so the hero lede is untouched. Bigger type, looser leading and
   a tighter measure turn 6 lines into ~9, which fills the column against the photo instead
   of leaving a block of dead space under it. */
.drive-row .lede{font-size:clamp(18px,1.6vw,23px);line-height:1.82;max-width:38ch}
.drive-row{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;margin-top:14px}
.drive-row img{width:100%;aspect-ratio:4/3.1;object-fit:cover;border-radius:3px;box-shadow:0 20px 44px rgba(20,16,14,.22)}
.drive{font-family:var(--display);font-size:clamp(25px,3.1vw,39px);font-weight:600;line-height:1.14;letter-spacing:-.02em;max-width:26ch;margin:60px 0 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px;border-top:1px solid rgba(20,16,14,.16)}
.stp{padding:34px 34px 10px 0;border-right:1px solid rgba(20,16,14,.16)}
.stp:last-child{border-right:0}
.stp .k{font-family:var(--display);font-size:36px;font-weight:700;color:var(--flame);line-height:1;display:block}
.stp h3{font-size:23px;margin:16px 0 10px}
.stp p{color:#5c4c3f;font-size:16px}

/* ---------- materials ---------- */
.mats{padding:104px 0}
/* v1's alternating layout: photo one side, copy the other, sides swapping row to row.
   Wrapped in .svc-list so a plain :nth-child(even) works instead of the newer
   :nth-child(even of S) syntax. Colours are v3's dark palette, not v1's paper. */
.svc-list{margin-top:46px}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:36px 0}
.svc:nth-child(even){direction:rtl}
.svc:nth-child(even)>*{direction:ltr}
.svc img{border-radius:3px;aspect-ratio:4/3.2;object-fit:cover;width:100%;box-shadow:0 22px 48px rgba(0,0,0,.55)}
.svc h3{font-size:clamp(23px,3vw,30px);margin-bottom:12px}
.svc p{color:var(--cream-2);margin-bottom:12px}
.svc ul{list-style:none;margin:16px 0 0}
.svc li{padding-left:30px;position:relative;margin-bottom:10px;color:var(--cream-2)}
.svc li::before{content:'';position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;border:4px solid var(--flame);background:transparent}
.svc li b{color:var(--cream)}

/* ---------- commercial ---------- */
/* Sits on --ink-2 with hairlines so it reads as its own band between the dark services
   rows and the cream standard section. Copy and proof points share the top row; the two
   job photos run underneath as evidence rather than as the whole offer. */
.comm{background:var(--ink-2);padding:104px 0;border-top:1px solid rgba(246,241,233,.09);border-bottom:1px solid rgba(246,241,233,.09)}
.comm-top{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:start;margin-top:30px}
.comm-top .lede{font-size:clamp(17px,1.35vw,19px);line-height:1.72;max-width:46ch}
.comm-pts{list-style:none}
.comm-pts li{position:relative;padding-left:30px;margin-bottom:20px;color:var(--cream-2);font-size:16px;line-height:1.55}
.comm-pts li:last-child{margin-bottom:0}
.comm-pts li::before{content:'';position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;border:4px solid var(--flame)}
.comm-pts b{display:block;color:var(--cream);font-weight:600;font-size:17px;margin-bottom:3px}
.comm-shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.comm-shots figure{margin:0}
.comm-shots img{width:100%;aspect-ratio:4/2.9;object-fit:cover;border-radius:3px;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.comm-shots figcaption{margin-top:12px;font-size:14px;color:var(--mute);line-height:1.5}

/* ---------- the standard ---------- */
.std{background:var(--cream);color:var(--ink);padding:104px 0}
.std .kicker{color:#c0400f}
.std-q{font-family:var(--display);font-size:clamp(28px,3.5vw,44px);font-weight:600;line-height:1.16;letter-spacing:-.02em;max-width:22ch;margin:0 0 50px}
.std-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid rgba(20,16,14,.16);padding-top:38px}
.std-grid h3{font-size:19px;margin-bottom:10px}
.std-grid p{color:#5c4c3f;font-size:16px}

/* ---------- gallery ---------- */
.gal-sec{padding:104px 0}
/* v1's 4-up grid of square tiles, in v3's dark palette: hairline border and --ink-2 behind
   each tile instead of v1's line-on-white. */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.gal figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(246,241,233,.13);background:var(--ink-2)}
.gal img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .35s ease}
.gal figure:hover img{transform:scale(1.045)}

/* ---------- service area ---------- */
/* Cream band, mirroring .visit and .std, so the page keeps alternating dark and light. */
.area{background:var(--cream);color:var(--ink);padding:104px 0}
.area .kicker{color:#c0400f}
.area .lede{color:#59493c}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
/* Two columns, filled top-to-bottom: five slots in the first, four towns plus the
   'and more' line in the second. grid-auto-flow:column is what fills down before across. */
.town-list{margin-top:30px;display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:52px}
.town-list span{display:block;font-family:var(--display);font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.3;letter-spacing:-.02em;border-bottom:1px solid rgba(20,16,14,.16);padding:11px 0}
/* Same scale as a town so the grid stays even, accent colour so it does not read as a place. */
.town-list span.more{color:#c0400f}
.town-note{margin-top:28px;font-size:15.5px;color:#7a6a5c;line-height:1.55;max-width:46ch}
.area img{border-radius:3px;aspect-ratio:4/4.3;object-fit:cover;box-shadow:0 24px 52px rgba(20,16,14,.24)}

/* ---------- repairs (secondary, by client ruling) ---------- */
/* Installations lead this page. Repairs get one quiet band near the bottom and appear
   nowhere else, so this is styled down on purpose: no photo, smaller type, hairline rules. */
.fix{padding:72px 0;border-top:1px solid rgba(246,241,233,.09)}
.fix-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.fix h2{font-size:clamp(25px,2.7vw,33px)}
.fix p{color:var(--cream-2);font-size:16px;margin-top:14px}
.fix-slogan{font-family:var(--display);font-weight:700;color:var(--flame-2);font-size:17px;margin-top:20px}
.fix ul{list-style:none;margin-top:6px}
.fix li{padding:13px 0;border-top:1px solid rgba(246,241,233,.12);font-size:15.5px;color:var(--cream-2)}
.fix li:first-child{border-top:0}
.fix li b{color:var(--cream);font-weight:600}
.fix .btn{margin-top:22px}

/* ---------- faq ---------- */
/* Cream band, same treatment as .visit / .std / .area. */
.faq{background:var(--cream);color:var(--ink);padding:104px 0}
.faq .kicker{color:#c0400f}
.faq-list{margin-top:44px;max-width:900px}
.faq details{border-bottom:1px solid rgba(20,16,14,.16)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--flame);font-size:26px;font-family:var(--body);font-weight:300;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details p{padding:0 0 26px;color:#5c4c3f;max-width:74ch}

/* ---------- final ---------- */
/* Callback to the hero: the floor is finished here, laid edge to edge. */
.final{padding:112px 0 118px;text-align:center;overflow:hidden;background-color:#5e3a20;
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.075) 0 1px,rgba(255,255,255,.022) 1px 2px,transparent 2px 12px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 2px,transparent 2px 54px),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.3))}
.final h2{font-size:clamp(38px,5.6vw,70px);text-shadow:0 3px 26px rgba(0,0,0,.5)}
.final p{max-width:50ch;margin:18px auto 30px;color:#f3e9dc;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.final .phone{display:inline-block;font-family:var(--display);font-size:clamp(40px,6.4vw,82px);font-weight:900;letter-spacing:-.03em;text-decoration:none;margin-bottom:28px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.final-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final .btn-call{background:var(--cream);color:#8a3b12}
.final .btn-call:hover{background:#fff}
.final .btn-text{border-color:rgba(255,255,255,.6)}

/* ---------- sticky call/text dock (ported from the multipage build) ---------- */
/* Hidden on desktop, where the header already carries both buttons. env() keeps it clear
   of the iPhone home indicator; body gets matching bottom padding so the dock never
   covers the end of the page. */
.mobile-dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink-2);border-top:1px solid rgba(246,241,233,.13);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.mobile-dock a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;border-radius:999px;padding:13px 10px}
.mobile-dock .dock-call{background:var(--flame);color:#fff}
.mobile-dock .dock-text{background:rgba(255,255,255,.1);color:var(--cream);border:1px solid rgba(255,255,255,.3)}

/* ---------- footer ---------- */
/* Light footer, matching the nav bar at the top of the page. */
footer{background:var(--cream);padding:52px 0 40px;font-size:14px;color:#6b5c4e;border-top:1px solid rgba(20,16,14,.13)}
footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
footer img{height:30px;width:auto;display:block}
footer a{color:#c0400f}
.credit{width:100%;border-top:1px solid rgba(20,16,14,.13);margin-top:30px;padding-top:22px;text-align:center;font-size:12.5px;color:#8a7867}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pr{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .mat img,.btn{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  /* Same layered composition, not a stack: the courses simply reach further across so the
     copy keeps a readable measure and the photo stays visible down the right. */
  .hero-inner{min-height:660px;padding-block:64px 72px}
  .pr{width:calc(var(--end) * 0.6 + 32%)}
  .steps,.std-grid,.area-grid,.svc,.fix-in,.drive-row,.comm-top,.comm-shots{grid-template-columns:1fr}
  .town-list{grid-auto-flow:row;grid-template-rows:none;column-gap:0}
  .comm-top{gap:28px}
  .comm-shots{gap:26px;margin-top:38px}
  .drive-row{gap:30px}
  .svc{gap:30px;padding:26px 0}
  .svc:nth-child(even){direction:ltr}
  .stp{border-right:0;border-bottom:1px solid rgba(20,16,14,.16);padding-right:0}
  .stp:last-child{border-bottom:0}
  .std-grid{gap:30px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .topnav{display:none}
  .mobile-dock{display:flex;gap:10px}
  body{padding-bottom:76px}
  .site-header .wrap{height:68px}
  .brand img{height:34px}
}
@media (max-width:620px){
  /* Logo 204px + call button 165px + gap + gutters came to 447px in a 390px viewport.
     Trimmed all three rather than shrinking just the logo into illegibility. */
  .head-cta .btn-text{display:none}
  .site-header .wrap{height:64px;gap:12px;padding-left:18px;padding-right:18px}
  .brand img{height:28px}
  .site-header .btn{font-size:14.5px;padding:10px 18px}

  /* PHONE HERO: planks only, no photo and no work edge.
     At 390px the photo was never more than a narrow vertical slice of a room, and the
     staggered edge cut diagonally behind the headline. Dropping both leaves the wood as a
     clean full-bleed texture, which is the part that carries the brand, and gives the copy
     the full width back. Desktop and tablet keep the layered composition. */
  .hero-bg{display:none}
  .hero::after{display:none}
  .hero::before{background:linear-gradient(180deg,rgba(13,9,7,.52),rgba(13,9,7,.34) 45%,rgba(13,9,7,.5))}
  .floor{--ph:62px}
  .pr{width:100%;box-shadow:none}
  .pr i:last-child{border-right:0}
  .hero-inner{min-height:0;padding-block:62px 58px}
  .hero .wrap{padding-left:22px;padding-right:22px}
  .hero-copy{max-width:none}
  .hero h1{font-size:clamp(34px,8.6vw,40px)}
  .hero .lede{font-size:16.5px;max-width:34ch}
  .hero .kicker{font-size:11.5px;letter-spacing:.16em}

  .visit,.mats,.std,.area,.faq,.comm,.gal-sec{padding:72px 0}
  /* Footer: on a phone the space-between row wrapped into a ragged left-aligned stack with
     uneven gaps. Centre it as a single column so every line shares one axis. */
  footer{padding:40px 0 30px;text-align:center}
  footer .wrap{flex-direction:column;align-items:center;justify-content:flex-start;gap:16px}
  footer img{height:34px;margin:0 auto}
  .credit{margin-top:22px;padding-top:20px}
}