/* ==========================================================================
   JDF-multiservices — design tokens
   Palette drawn from the existing brand mark (ochre/bark) + the trades:
   moss for jardinage, clay for maçonnerie/rénovation, linen as ground.
   ========================================================================== */

:root{
  --bark:        #26211b;
  --bark-soft:    #4a4038;
  --moss:        #3f4d34;
  --moss-light:  #6f7d54;
  --moss-pale:   #dfe4d0;
  --ochre:       #c98a2e;
  --ochre-light: #e3ab54;
  --clay:        #a8552f;
  --clay-light:  #c97a4f;
  --linen:       #f4efe1;
  --linen-deep:  #ece3cd;
  --stone:       #ffffff;
  --cream:       #fbf8f1;

  --font-display: "Fraunces", serif;
  --font-body:    "Work Sans", sans-serif;
  --font-mono:    "Space Mono", monospace;

  --gap-xs: 0.5rem;
  --gap-s: 1rem;
  --gap-m: 2rem;
  --gap-l: 4rem;
  --gap-xl: 7rem;

  --radius: 4px;
  --ease: cubic-bezier(.16,.8,.28,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--linen);
  color: var(--bark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 var(--gap-s);
  color: var(--bark);
}
p{ margin: 0 0 1em; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--gap-s);
}
.eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--clay);
  display: inline-block;
}

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gap-m);
}
@media (max-width: 640px){
  .container{ padding: 0 var(--gap-s); }
}

section{ padding: var(--gap-xl) 0; position: relative; }
@media (max-width: 780px){ section{ padding: var(--gap-l) 0; } }

::selection{ background: var(--ochre); color: var(--cream); }

:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* ---------------------------- buttons ---------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95em 1.7em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color .35s var(--ease);
}
.btn-primary{
  background: var(--moss);
  color: var(--cream);
}
.btn-primary:hover{ background: var(--bark); transform: translateY(-2px); }
.btn-outline{
  background: transparent;
  color: var(--bark);
  border-color: var(--bark);
}
.btn-outline:hover{
  background: var(--bark);
  color: var(--cream);
  transform: translateY(-2px);
}
.btn-light{
  background: var(--cream);
  color: var(--bark);
}
.btn-light:hover{ background: var(--ochre); color: var(--cream); transform: translateY(-2px); }
.btn svg{ width: 15px; height: 15px; transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

/* ---------------------------- header ---------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244,239,225,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(38,33,27,0.08);
  transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{ box-shadow: 0 8px 24px rgba(38,33,27,0.06); }
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  transition: padding .3s var(--ease);
}
.site-header.scrolled .header-inner{ padding: 0.7rem 0; }

.brand{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bark);
}
.brand-mark{
  width: 40px; height: 40px;
  border-radius: 3px;
  background: var(--ochre);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}
.brand small{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--moss-light);
  font-weight: 400;
}

nav.main-nav ul{
  list-style: none;
  display: flex;
  gap: 2.1rem;
  margin: 0; padding: 0;
}
nav.main-nav a{
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: .01em;
  color: var(--bark-soft);
  position: relative;
  padding-bottom: 4px;
}
nav.main-nav a::after{
  content:"";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--clay);
  transition: width .3s var(--ease);
}
nav.main-nav a:hover::after,
nav.main-nav a.active::after{ width: 100%; }
nav.main-nav a.active{ color: var(--bark); font-weight: 600; }

.header-cta{ display:flex; align-items:center; gap: 1.4rem; }
.header-phone{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  display: none;
}
@media (min-width: 900px){ .header-phone{ display:inline-flex; align-items:center; gap:.5em; } }

.nav-toggle{
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 34px;
  position: relative;
  flex-direction: column; justify-content: center; gap: 6px;
}
.nav-toggle span{
  display:block; height: 2px; width: 100%; background: var(--bark);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
@media (max-width: 860px){
  nav.main-nav{
    position: fixed; inset: 0 0 0 auto;
    top: 0; height: 100vh; width: min(320px, 84vw);
    background: var(--cream);
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    padding: 6.5rem 2rem 2rem;
    box-shadow: -18px 0 40px rgba(0,0,0,0.12);
  }
  nav.main-nav.open{ transform: translateX(0); }
  nav.main-nav ul{ flex-direction: column; gap: 1.6rem; }
  .nav-toggle{ display: flex; }
  .nav-scrim{
    position: fixed; inset:0; background: rgba(38,33,27,.35);
    opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
    z-index: 90;
  }
  .nav-scrim.open{ opacity: 1; pointer-events: auto; }
}

/* ---------------------------- hedge divider (signature) ---------------------------- */
.hedge-divider{
  width: 100%;
  height: 46px;
  display:block;
  overflow: hidden;
}
.hedge-divider svg{ width: 100%; height: 100%; display:block; }
.hedge-divider path{
  stroke: var(--moss);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.hedge-divider.in-view path{ stroke-dashoffset: 0; }
.hedge-divider .leaf{
  opacity: 0;
  transform: scale(.4);
  transform-origin: center;
  transition: opacity .6s var(--ease) .9s, transform .6s var(--ease) .9s;
  fill: var(--ochre);
}
.hedge-divider.in-view .leaf{ opacity:1; transform: scale(1); }

/* ---------------------------- reveal-on-scroll ---------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------------------------- hero ---------------------------- */
.hero{
  padding: 5rem 0 var(--gap-xl);
  position: relative;
  overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap-l);
  align-items: center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.01em;
}
.hero h1 em{
  font-style: italic;
  color: var(--clay);
  font-weight: 500;
}
.hero-lede{
  font-size: 1.1rem;
  max-width: 46ch;
  color: var(--bark-soft);
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap: wrap; margin-top: var(--gap-m); }

.hero-badges{
  display:flex; gap: var(--gap-m); margin-top: var(--gap-l);
  flex-wrap: wrap;
}
.hero-badge{ font-family: var(--font-mono); font-size: 0.8rem; }
.hero-badge b{ display:block; font-family: var(--font-display); font-size: 1.9rem; color: var(--moss); font-weight:700; }

/* hero visual: animated hedge silhouette */
.hero-visual{
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--moss) 0%, #2c3625 100%);
  border-radius: 6px;
  overflow: hidden;
  display:flex; align-items:flex-end; justify-content:center;
}
.hero-visual svg{ width: 100%; height: auto; display:block; }
.hero-visual .frame-label{
  position:absolute; top: 1.4rem; left: 1.4rem;
  font-family: var(--font-mono); color: var(--linen);
  font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .85;
}
.hero-visual .frame-label span{ display:block; color: var(--ochre-light); font-size: .68rem; margin-top: .3rem; }

/* growing hedge animation inside hero */
.grow-hedge path{
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: growHedge 2.2s var(--ease) .3s forwards;
}
.grow-hedge .shrub{
  opacity: 0; transform: scale(.3) translateY(10px); transform-origin: bottom;
  animation: popShrub .7s var(--ease) forwards;
}
@keyframes growHedge{ to{ stroke-dashoffset: 0; } }
@keyframes popShrub{ to{ opacity:1; transform: scale(1) translateY(0); } }

/* ---------------------------- pillars / service cards ---------------------------- */
.pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
}
@media (max-width: 900px){ .pillars{ grid-template-columns: 1fr; } }

.pillar-card{
  background: var(--cream);
  border: 1px solid rgba(38,33,27,0.08);
  border-radius: var(--radius);
  padding: var(--gap-m);
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pillar-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(38,33,27,0.1);
  border-color: transparent;
}
.pillar-num{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--moss-light);
  margin-bottom: var(--gap-s);
  display:block;
}
.pillar-icon{
  width: 46px; height:46px;
  margin-bottom: 1.1rem;
  color: var(--clay);
  transition: transform .4s var(--ease);
}
.pillar-card:hover .pillar-icon{ transform: rotate(-8deg) scale(1.08); }
.pillar-card h3{ font-size: 1.35rem; }
.pillar-card p{ color: var(--bark-soft); font-size: 0.95rem; }
.pillar-link{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--bark);
  display: inline-flex; align-items:center; gap: .5em;
  margin-top: .5rem;
  border-bottom: 1px solid var(--bark);
  padding-bottom: 2px;
}
.pillar-link svg{ width: 12px; height:12px; transition: transform .3s var(--ease); }
.pillar-link:hover svg{ transform: translateX(3px); }

/* ---------------------------- section headers ---------------------------- */
.section-head{
  max-width: 640px;
  margin-bottom: var(--gap-l);
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.section-head p{ color: var(--bark-soft); }

/* alt background band */
.band{ background: var(--linen-deep); }
.band-dark{ background: var(--bark); color: var(--cream); }
.band-dark h2, .band-dark h3{ color: var(--cream); }
.band-dark p{ color: #cfc9bd; }
.band-moss{ background: var(--moss); color: var(--cream); }
.band-moss h2, .band-moss h3{ color: var(--cream); }
.band-moss p{ color: #d7ddc9; }

/* ---------------------------- benefit list ---------------------------- */
.benefit-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-m);
}
@media (max-width: 780px){ .benefit-grid{ grid-template-columns: 1fr; } }
.benefit{ display:flex; gap: 1rem; align-items:flex-start; }
.benefit svg{ width: 26px; height:26px; flex-shrink:0; color: var(--ochre); margin-top: .1rem; }
.benefit h4{ font-size: 1.05rem; margin-bottom: .3rem; }
.benefit p{ font-size: 0.92rem; color: var(--bark-soft); margin:0; }
.band-moss .benefit p{ color:#d7ddc9; }
.band-moss .benefit svg{ color: var(--ochre-light); }

/* ---------------------------- testimonial / quote ---------------------------- */
.quote-block{
  max-width: 780px; margin: 0 auto; text-align:center;
}
.quote-block blockquote{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 var(--gap-s);
}
.quote-block cite{
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--moss-light);
  letter-spacing: .04em;
}

/* ---------------------------- zone map / area ---------------------------- */
.zone-list{
  display:flex; flex-wrap:wrap; gap: .6rem 1rem;
  font-family: var(--font-mono); font-size: 0.85rem;
}
.zone-list span{
  padding: .35em .85em;
  border: 1px solid rgba(38,33,27,.18);
  border-radius: 999px;
}

/* ---------------------------- footer ---------------------------- */
footer.site-footer{
  background: var(--bark);
  color: #cfc9bd;
  padding: var(--gap-l) 0 var(--gap-m);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gap-m);
  padding-bottom: var(--gap-l);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{
  color: var(--linen);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-grid a{
  text-decoration:none; color:#cfc9bd; display:block; font-size:0.92rem; margin-bottom: .6rem;
  transition: color .3s;
}
.footer-grid a:hover{ color: var(--ochre-light); }
.footer-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom: 1rem; font-family: var(--font-display); font-size:1.1rem; color: var(--cream); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: var(--gap-m);
  font-family: var(--font-mono); font-size: 0.75rem; color: #8f897c;
  flex-wrap: wrap; gap: 1rem;
}

/* ---------------------------- generic page hero (inner pages) ---------------------------- */
.page-hero{
  padding: 4rem 0 3.5rem;
  background: var(--moss);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.page-hero::after{
  content:"";
  position:absolute; right:-60px; bottom:-60px; width:280px; height:280px;
  border: 1px solid rgba(244,239,225,.18);
  border-radius: 50%;
}
.page-hero h1{ color: var(--cream); font-size: clamp(2.1rem,4.4vw,3rem); }
.page-hero p{ color:#d7ddc9; max-width: 56ch; }
.breadcrumb{
  font-family: var(--font-mono); font-size: 0.75rem; color: #b7c19f;
  display:flex; gap:.5em; margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing:.06em;
}
.breadcrumb a{ text-decoration:none; color:#b7c19f; }

/* ---------------------------- service detail sections (prestations page) ---------------------------- */
.service-block{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--gap-l);
  align-items: start;
  padding: var(--gap-l) 0;
}
.service-block:not(:last-child){ border-bottom: 1px solid rgba(38,33,27,.08); }
@media (max-width: 860px){ .service-block{ grid-template-columns: 1fr; gap: var(--gap-m); } }

.service-block .service-icon{
  width: 64px; height: 64px; color: var(--clay);
}
.service-tag{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--moss-light); margin-bottom: .6rem; display:block;
}
.service-block h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

.sub-services{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-m);
  margin-top: var(--gap-s);
}
@media (max-width: 560px){ .sub-services{ grid-template-columns: 1fr; } }
.sub-service h4{
  font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing:.03em;
  color: var(--bark); margin-bottom:.4rem;
  display:flex; align-items:center; gap:.5em;
}
.sub-service h4::before{ content:"—"; color: var(--ochre); }
.sub-service p{ font-size: 0.92rem; color: var(--bark-soft); }

.service-list{
  display:flex;
  flex-wrap:wrap;
  gap: 0.9rem;
  margin-top: var(--gap-l);
}
.service-list span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .9rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--moss);
  background: var(--cream);
  color: var(--moss);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.3;
}
.service-list span.highlight{
  background: var(--moss);
  color: var(--cream);
  border-color: transparent;
}

.benefit-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top: var(--gap-s); }
.benefit-tags span{
  font-size: 0.8rem; font-family: var(--font-mono);
  background: var(--moss-pale); color: var(--moss);
  padding: .4em .8em; border-radius: 3px;
}

/* ---------------------------- pricing (prestations page) ---------------------------- */
.pricing-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-m);
}
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; } }
.price-card{
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--gap-m);
  border: 1px solid rgba(38,33,27,.08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.price-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(38,33,27,.1); }
.price-card .amount{ font-family: var(--font-display); font-size: 2.1rem; font-weight:700; color: var(--moss); }
.price-card .amount span{ font-family: var(--font-mono); font-size: .9rem; color: var(--bark-soft); font-weight:400; }
.price-card ul{ list-style:none; padding:0; margin: 1.2rem 0; font-size: .92rem; }
.price-card li{ padding: .4em 0; border-top: 1px dashed rgba(38,33,27,.15); color: var(--bark-soft); }
.price-card li:first-child{ border-top:none; }

/* ---------------------------- before/after slider (realisations) ---------------------------- */
.ba-slider{
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  box-shadow: 0 30px 60px rgba(38,33,27,.15);
}
.ba-layer{ position:absolute; inset:0; }
.ba-layer img{ width:100%; height:100%; object-fit: cover; display:block; }
.ba-after{ background: linear-gradient(160deg, var(--moss) 0%, #29341f 100%); }
.ba-before{
  background: linear-gradient(160deg, #8a8272 0%, #6d6656 100%);
  overflow:hidden;
}
.ba-before-inner{ position:absolute; inset:0; width: 100%; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width: 3px; background: var(--cream);
  transform: translateX(-50%);
}
.ba-handle::after{
  content:"";
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 44px; height:44px; border-radius:50%;
  background: var(--cream);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.ba-handle::before{
  content: "⇔";
  position:absolute; top:50%; left:50%; transform: translate(-50%,-52%);
  z-index:2; font-size: 1.1rem; color: var(--bark);
}
.ba-label{
  position:absolute; top:1rem; font-family: var(--font-mono);
  font-size: 0.7rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--cream); background: rgba(38,33,27,.55); padding:.35em .8em; border-radius:3px;
}
.ba-label.left{ left:1rem; } .ba-label.right{ right:1rem; }

.gallery-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-s);
  margin-top: var(--gap-l);
}
@media (max-width: 780px){ .gallery-grid{ grid-template-columns: 1fr 1fr; } }
.gallery-tile{
  aspect-ratio: 1; border-radius: 4px; overflow:hidden;
  background: var(--moss);
  display:flex; align-items:center; justify-content:center;
  position: relative;
}
.gallery-tile svg{ width: 60%; height:60%; color: var(--linen); opacity:.85; transition: transform .5s var(--ease); }
.gallery-tile:hover svg{ transform: scale(1.12) rotate(3deg); }
.gallery-tile .tile-tag{
  position:absolute; bottom:.8rem; left:.8rem;
  font-family: var(--font-mono); font-size:.68rem; color: var(--cream);
  text-transform:uppercase; letter-spacing:.06em;
}
.gallery-tile:nth-child(3n+2){ background: var(--clay); }
.gallery-tile:nth-child(3n){ background: var(--bark); }

/* ---------------------------- process steps ---------------------------- */
.process{
  display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-m);
}
@media (max-width: 900px){ .process{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }
.step{ position: relative; padding-top: var(--gap-s); }
.step-num{
  font-family: var(--font-mono); font-size: 2.4rem; color: var(--moss-pale);
  -webkit-text-stroke: 1px var(--moss);
  display:block; margin-bottom: .6rem; line-height:1;
}
.step h4{ font-size: 1.05rem; }
.step p{ font-size: .9rem; color: var(--bark-soft); }

/* ---------------------------- contact page ---------------------------- */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-l);
  align-items: start;
}
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-info-list{ margin-top: var(--gap-m); }
.contact-info-item{
  display:flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid rgba(38,33,27,.1);
}
.contact-info-item:first-child{ border-top:none; }
.contact-info-item svg{ width:22px; height:22px; color: var(--clay); flex-shrink:0; margin-top:.15rem; }
.contact-info-item h4{ font-size: 0.95rem; margin-bottom:.2rem; }
.contact-info-item p{ margin:0; color: var(--bark-soft); font-size: 0.9rem; }

form.contact-form{
  background: var(--cream);
  border-radius: 6px;
  padding: var(--gap-m);
  border: 1px solid rgba(38,33,27,.08);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px){ .form-row{ grid-template-columns: 1fr; } }
.field{ margin-bottom: 1.1rem; }
.field label{
  display:block; font-family: var(--font-mono); font-size: .72rem; text-transform:uppercase;
  letter-spacing:.06em; color: var(--bark-soft); margin-bottom:.45rem;
}
.field input, .field select, .field textarea{
  width:100%; padding: .8em .9em; border-radius: 3px; border: 1px solid rgba(38,33,27,.2);
  background: var(--stone); font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(63,77,52,.12);
}
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size: .78rem; color: var(--bark-soft); margin-top: .8rem; }

.map-frame{
  border-radius: 6px; overflow:hidden; border: 1px solid rgba(38,33,27,.08);
  filter: grayscale(0.15) contrast(1.02);
}
.map-frame iframe{ width:100%; height: 320px; border:0; display:block; }

/* ---------------------------- FAQ ---------------------------- */
.faq-item{
  border-top: 1px solid rgba(38,33,27,.1);
  padding: 1.3rem 0;
}
.faq-item:last-child{ border-bottom: 1px solid rgba(38,33,27,.1); }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  cursor:pointer; font-family: var(--font-display); font-size: 1.05rem; font-weight:600;
}
.faq-q .plus{
  font-family: var(--font-mono); font-size:1.2rem; color: var(--clay);
  transition: transform .3s var(--ease); flex-shrink:0;
}
.faq-item.open .plus{ transform: rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden; transition: max-height .4s var(--ease);
  color: var(--bark-soft); font-size: .94rem;
}
.faq-a p{ padding-top: .8rem; margin:0; }

/* ---------------------------- CTA band ---------------------------- */
.cta-band{
  text-align:center;
}
.cta-band h2{ font-size: clamp(1.9rem,4vw,2.8rem); }
.cta-band .btn-row{ display:flex; justify-content:center; gap:1rem; margin-top: var(--gap-m); flex-wrap:wrap; }

/* ---------------------------- opening hours ---------------------------- */
.hours-table{
  background: var(--cream);
  border: 1px solid rgba(38,33,27,.08);
  border-radius: 6px;
  padding: 1.6rem 1.8rem;
}
.hours-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: .75rem 0;
  border-top: 1px solid rgba(38,33,27,.08);
  font-size: 0.95rem;
}
.hours-row:first-child{ border-top:none; }
.hours-row .day{ font-weight: 600; }
.hours-row .time{ font-family: var(--font-mono); font-size: 0.88rem; color: var(--moss); }
.hours-row.closed .time{ color: var(--clay); }
.hours-note{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--bark-soft);
  margin-top: 1rem;
}
.hours-note .dot{ width:8px; height:8px; border-radius:50%; background: var(--moss); flex-shrink:0; }

/* ---------------------------- pro / B2B highlight ---------------------------- */
.pro-banner{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--gap-l);
  align-items:center;
  background: var(--bark);
  color: var(--cream);
  border-radius: 8px;
  padding: var(--gap-m) var(--gap-l);
}
@media (max-width: 780px){ .pro-banner{ grid-template-columns:1fr; padding: var(--gap-m); } }
.pro-banner h2{ color: var(--cream); font-size: clamp(1.6rem,3vw,2.2rem); }
.pro-banner p{ color: #cfc9bd; }
.pro-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.pro-tags span{
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing:.04em;
  border: 1px solid rgba(244,239,225,.3); color: var(--ochre-light);
  padding: .4em .9em; border-radius: 999px;
}

/* misc util */
.mt-l{ margin-top: var(--gap-l); }
.text-center{ text-align:center; }