/* =========================================================================
   Mélanie Campet — Réflexologie & Massage préconception fertilité
   Design system  ·  warm, feminine, high-end, ivory & gold
   ========================================================================= */

:root{
  /* Palette (extraite de la carte de visite & du flyer) */
  --rouge:      #A0291C;   /* titres, accents forts, CTA */
  --rouge-d:    #82200F;   /* hover CTA */
  --or:         #E8B84B;   /* logo, icônes, soulignements */
  --or-d:       #C99A2E;
  --ivoire:     #FFFBF5;   /* fond systématique */
  --ivoire-2:   #FDF6EA;   /* fond alterné très léger */
  --beige:      #FFF3D6;   /* surfaces, encadrés, chips */
  --rose:       #F5C5B8;   /* icônes rondes, déco */
  --rose-d:     #EBA995;
  --anthracite: #2D2D2D;   /* corps de texte */
  --anthra-2:   #595650;   /* texte secondaire */

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 56px);

  --ff-script: "Great Vibes", cursive;
  --ff-title:  "Cormorant Garamond", Georgia, serif;
  --ff-sub:    "Montserrat", system-ui, sans-serif;
  --ff-body:   "Lora", Georgia, serif;

  --shadow-sm: 0 6px 22px -12px rgba(160,41,28,.22);
  --shadow-md: 0 22px 60px -30px rgba(160,41,28,.30);
  --radius: 18px;

  --sun: 0;   /* 0 → 1 : progression du soleil au scroll */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivoire);
  color:var(--anthracite);
  font-family:var(--ff-body);
  font-size:18px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- Typographic scale ---------- */
.script{
  font-family:var(--ff-script);
  font-weight:400;
  color:var(--rouge);
  line-height:1;
}
h1,h2,h3{ font-family:var(--ff-title); color:var(--rouge); font-weight:600; margin:0; }
h1{ font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.04; letter-spacing:.4px; }
h2{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; }
h3{ font-size:clamp(1.35rem,2.2vw,1.8rem); }
h2 em, h1 em, h3 em{ font-style:italic; }

.eyebrow{
  font-family:var(--ff-sub);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.78rem;
  color:var(--rouge);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::after{
  content:""; width:38px; height:2px; background:var(--or); border-radius:2px;
}
.eyebrow.center{ }
.eyebrow.center::before{
  content:""; width:38px; height:2px; background:var(--or); border-radius:2px;
}

p{ margin:0 0 1.1em; max-width:62ch; text-wrap:pretty; }
.lead{ font-size:1.18rem; color:var(--anthra-2); }
strong{ color:var(--rouge); font-weight:600; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,118px); position:relative; }
.section.beige{ background:var(--beige); }
.section.tint{ background:var(--ivoire-2); }
.center{ text-align:center; }
.center p{ margin-inline:auto; }
.stack-sm > * + *{ margin-top:1rem; }
.muted{ color:var(--anthra-2); }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--ff-sub);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.76rem;
  display:inline-flex; align-items:center; gap:.6em;
  padding:15px 30px;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s;
}
.btn .lucide{ width:17px; height:17px; }
.btn-primary{ background:var(--rouge); color:var(--ivoire); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--rouge-d); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--rouge); border-color:var(--rose-d); }
.btn-ghost:hover{ background:var(--beige); border-color:var(--rouge); transform:translateY(-2px); }
.btn-phone{ background:var(--rouge); color:var(--ivoire); }
.btn-phone:hover{ background:var(--rouge-d); transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ---------- Header / nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ivoire) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--or) 28%, transparent);
}
.nav-in{ max-width:var(--maxw); margin-inline:auto; padding:14px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{ width:42px; height:42px; flex:none; }
.brand .name{ font-family:var(--ff-script); font-size:1.9rem; color:var(--rouge); line-height:.9; white-space:nowrap; }
.brand .name small{ display:block; font-family:var(--ff-sub); font-weight:300;
  font-size:.52rem; letter-spacing:.28em; text-transform:uppercase; color:var(--anthra-2); margin-top:2px; }
.menu{ display:flex; align-items:center; gap:30px; font-family:var(--ff-sub);
  font-weight:400; font-size:.82rem; letter-spacing:.04em; }
.menu a{ color:var(--anthracite); position:relative; padding:6px 0; transition:color .2s; }
.menu a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--or); transition:right .28s ease; border-radius:2px; }
.menu a:hover{ color:var(--rouge); }
.menu a:hover::after, .menu a.active::after{ right:0; }
.menu a.active{ color:var(--rouge); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--rouge); }
.burger .lucide{ width:26px; height:26px; }

@media (max-width:980px){
  .menu, .nav-cta .btn-phone span{ display:none; }
  .burger{ display:inline-flex; }
  .menu.open{ display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:4px; padding:18px var(--gut) 26px;
    background:var(--ivoire); border-bottom:1px solid var(--or); box-shadow:var(--shadow-md); }
  .menu.open a{ padding:12px 0; font-size:1rem; border-bottom:1px solid color-mix(in srgb,var(--or) 22%,transparent); }
}

/* ---------- Round photo placeholders ---------- */
.round{
  border-radius:50%;
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(45deg, var(--beige) 0 14px, var(--ivoire-2) 14px 28px),
    var(--beige);
  border:1px solid color-mix(in srgb, var(--or) 36%, transparent);
  box-shadow:var(--shadow-md);
  display:grid; place-items:center;
  flex:none;
}
.round img{ width:100%; height:100%; object-fit:cover; }
.round .ph{
  font-family:"Courier New", monospace; font-size:.7rem; letter-spacing:.12em;
  color:var(--anthra-2); text-transform:uppercase; text-align:center;
  padding:10px 16px; line-height:1.5;
}
.round .ph b{ color:var(--rouge); display:block; font-weight:700; }
.ring{ box-shadow:0 0 0 1px var(--or), 0 0 0 12px var(--ivoire), var(--shadow-md); }

/* ---------- Round icon badge (powder pink) ---------- */
.icon-badge{
  width:104px; height:104px; border-radius:50%;
  background:var(--rose);
  display:grid; place-items:center; flex:none;
  color:var(--rouge);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rouge) 18%, transparent);
}
.icon-badge .lucide{ width:46px; height:46px; stroke-width:1.4; }
.icon-badge.sm{ width:72px; height:72px; }
.icon-badge.sm .lucide{ width:32px; height:32px; }

/* ---------- Cards ---------- */
.card{
  background:var(--ivoire);
  border:1px solid color-mix(in srgb, var(--or) 26%, transparent);
  border-radius:var(--radius);
  padding:34px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--or); }

/* service card with round image */
.svc{ display:flex; flex-direction:column; gap:20px; }
.svc .round{ width:180px; height:180px; }
.svc h3{ margin-top:4px; }
.svc .more{ font-family:var(--ff-sub); font-weight:500; text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; color:var(--rouge); display:inline-flex;
  align-items:center; gap:8px; margin-top:auto; }
.svc .more .lucide{ width:16px; height:16px; transition:transform .25s; }
.svc:hover .more .lucide{ transform:translateX(5px); }

/* ---------- Chips / indication list ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; margin:0; }
.chips li{
  background:var(--beige); color:var(--anthracite);
  border-radius:999px; padding:10px 20px; font-size:.92rem;
  display:inline-flex; align-items:center; gap:9px;
}
.chips li .lucide{ width:17px; height:17px; color:var(--or-d); stroke-width:2; }

.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checklist li{ display:flex; align-items:flex-start; gap:13px; }
.checklist li .dot{ width:24px; height:24px; border-radius:50%; background:var(--or);
  display:grid; place-items:center; flex:none; margin-top:3px; }
.checklist li .dot .lucide{ width:14px; height:14px; color:var(--ivoire); stroke-width:3; }

/* ---------- Surface / soft box ---------- */
.softbox{ background:var(--beige); border-radius:var(--radius); padding:30px 34px; }
.pinkbox{ background:var(--rose); border-radius:var(--radius); padding:26px 34px;
  color:var(--rouge); text-align:center; }
.pinkbox .script{ color:var(--rouge); }

/* ---------- Quote / signature ---------- */
.signature{ font-family:var(--ff-script); color:var(--rouge); font-size:2.6rem; line-height:1; }

/* ---------- Pricing strip ---------- */
.price{
  display:flex; flex-wrap:wrap; align-items:center; gap:22px;
  background:var(--ivoire); border:1px solid color-mix(in srgb,var(--or) 30%,transparent);
  border-radius:var(--radius); padding:26px 30px;
}
.price .big{ font-family:var(--ff-title); font-size:2.6rem; color:var(--rouge); font-weight:600; line-height:1; }
.price .home{ width:54px; height:54px; border-radius:50%; background:var(--rouge);
  display:grid; place-items:center; flex:none; }
.price .home .lucide{ width:26px; height:26px; color:var(--ivoire); }

/* ---------- Steps (déroulé séance) ---------- */
.steps{ display:grid; gap:30px; counter-reset:s; }
.step{ display:flex; gap:24px; align-items:flex-start; }
.step .num{ counter-increment:s; flex:none; width:62px; height:62px; border-radius:50%;
  background:var(--beige); color:var(--rouge); display:grid; place-items:center;
  font-family:var(--ff-title); font-weight:600; font-size:1.7rem;
  border:1px solid color-mix(in srgb,var(--or) 40%,transparent); }
.step .num::before{ content:counter(s,decimal-leading-zero); }
.step h3{ margin-bottom:.3em; }

/* ---------- Footer ---------- */
.footer{ background:var(--rouge); color:#F4E3CE; padding-block:64px 30px; position:relative; }
.footer a{ color:#F4E3CE; }
.footer .rising{ display:grid; place-items:center; margin-bottom:30px; }
.footer .rising img{ width:120px; opacity:.95; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:48px; }
.footer .brand .name{ color:var(--beige); }
.footer .brand .name small{ color:#E7C8A8; }
.footer h4{ font-family:var(--ff-sub); text-transform:uppercase; letter-spacing:.2em;
  font-size:.74rem; font-weight:500; color:var(--or); margin:0 0 18px; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; font-size:.95rem; }
.footer .ft-row{ display:flex; gap:11px; align-items:flex-start; }
.footer .ft-row .lucide{ width:18px; height:18px; color:var(--or); flex:none; margin-top:3px; }
.newsletter input{ width:100%; padding:13px 16px; border-radius:999px; border:none;
  font-family:var(--ff-body); font-size:.92rem; background:#F8EAD6; color:var(--anthracite); margin-bottom:12px; }
.newsletter .btn{ width:100%; justify-content:center; background:var(--or); color:var(--rouge); }
.newsletter .btn:hover{ background:var(--beige); }
.foot-bottom{ border-top:1px solid color-mix(in srgb,var(--beige) 26%,transparent);
  margin-top:46px; padding-top:22px; display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between; font-size:.8rem; color:#E7C8A8; }
.foot-bottom a{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; gap:34px; } }

/* ---------- Forms ---------- */
.field{ display:grid; gap:8px; margin-bottom:18px; }
.field label{ font-family:var(--ff-sub); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--anthra-2); }
.field input, .field textarea{
  font-family:var(--ff-body); font-size:1rem; color:var(--anthracite);
  background:var(--ivoire); border:1.5px solid color-mix(in srgb,var(--or) 34%,transparent);
  border-radius:14px; padding:14px 16px; width:100%; transition:border-color .2s, box-shadow .2s; }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--rouge);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 50%,transparent); }
.rgpd{ font-size:.82rem; color:var(--anthra-2); display:flex; gap:10px; align-items:flex-start; }
.rgpd input{ margin-top:5px; accent-color:var(--rouge); }

/* ---------- Decorative ---------- */
.deco-sun{ position:absolute; opacity:.5; pointer-events:none; z-index:0; }
.deco-sprig{ position:absolute; opacity:.5; pointer-events:none; z-index:0; width:70px; }
.section > .wrap{ position:relative; z-index:1; }

/* ---------- Immersive sun (scroll-driven warming light, alive in background) ---------- */
.sun-stage{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
/* overall warming wash */
.sun-warm{ position:absolute; inset:0; mix-blend-mode:multiply; will-change:opacity;
  background:radial-gradient(125% 95% at 50% -14%,
    rgba(232,184,75,.34) 0%, rgba(245,197,184,.20) 36%, rgba(255,251,245,0) 72%);
  opacity:calc(.18 + .72 * var(--sun)); transition:opacity .18s ease-out; }
/* warm bloom that grows with scroll */
.sun-bloom{ position:absolute; left:50%; top:-48vmax; width:124vmax; height:124vmax;
  transform:translateX(-50%); scale:calc(.85 + .3 * var(--sun)); transform-origin:50% 36%;
  will-change:opacity,scale; transition:opacity .18s ease-out, scale .25s ease-out;
  background:radial-gradient(closest-side, rgba(232,184,75,.36) 0%, rgba(232,184,75,.12) 32%, rgba(232,184,75,0) 62%);
  opacity:calc(.30 + .45 * var(--sun)); }
/* breathing halo — gives life / movement to the light */
.sun-pulse{ position:absolute; left:50%; top:-34vmax; width:96vmax; height:96vmax;
  transform:translateX(-50%); transform-origin:50% 50%;
  background:radial-gradient(closest-side, rgba(245,197,184,.34) 0%, rgba(245,197,184,.12) 46%, rgba(245,197,184,0) 66%);
  opacity:calc(.32 + .3 * var(--sun)); will-change:transform,opacity;
  animation:sun-breathe 8s ease-in-out infinite; }
/* radiant rays — golden beams that slowly rotate (footer spirit, alive) */
.sun-rays{ position:absolute; left:50%; top:-58vmax; width:150vmax; height:150vmax;
  transform-origin:50% 50%; will-change:opacity,transform;
  opacity:calc(.5 + .4 * var(--sun)); transition:opacity .18s ease-out;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(232,184,75,.5) 0deg .5deg, rgba(232,184,75,0) .5deg 5deg);
  -webkit-mask:radial-gradient(closest-side, rgba(0,0,0,.9) 18%, rgba(0,0,0,.5) 42%, transparent 66%);
  mask:radial-gradient(closest-side, rgba(0,0,0,.9) 18%, rgba(0,0,0,.5) 42%, transparent 66%);
  animation:sun-spin 110s linear infinite; }
@keyframes sun-spin{ from{ transform:translateX(-50%) rotate(0deg); } to{ transform:translateX(-50%) rotate(360deg); } }
@keyframes sun-breathe{ 0%,100%{ transform:translateX(-50%) scale(.9); } 50%{ transform:translateX(-50%) scale(1.14); } }
@media (prefers-reduced-motion:reduce){ .sun-rays, .sun-pulse{ animation:none; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,3.5vw,48px); align-items:start; }
.contact-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:18px; }
.contact-list li{ display:flex; gap:15px; align-items:flex-start; }
.contact-list .ci{ width:44px; height:44px; border-radius:50%; background:var(--rose);
  display:grid; place-items:center; flex:none; color:var(--rouge); }
.contact-list .ci .lucide{ width:20px; height:20px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } .contact-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .contact-row{ grid-template-columns:1fr; } }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.post{ background:var(--ivoire); border:1px solid color-mix(in srgb,var(--or) 24%,transparent);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease, border-color .3s; }
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--or); }
.post .thumb{ aspect-ratio:3/2; background:repeating-linear-gradient(45deg,var(--beige) 0 16px,var(--ivoire-2) 16px 32px);
  display:grid; place-items:center; border-bottom:1px solid color-mix(in srgb,var(--or) 22%,transparent); }
.post .thumb .ph{ font-family:"Courier New",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--anthra-2); text-align:center; }
.post .body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.post .tag{ font-family:var(--ff-sub); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--or-d); }
.post h3{ font-size:1.4rem; }
.post .more{ font-family:var(--ff-sub); font-weight:500; text-transform:uppercase; letter-spacing:.14em;
  font-size:.7rem; color:var(--rouge); display:inline-flex; align-items:center; gap:8px; margin-top:auto; }
.post .more .lucide{ width:15px; height:15px; transition:transform .25s; }
.post:hover .more .lucide{ transform:translateX(5px); }

/* ---------- Newsletter band ---------- */
.nl-band{ background:var(--rose); border-radius:28px; padding:clamp(40px,6vw,64px); text-align:center; }
.nl-band .nl-form{ display:flex; gap:12px; max-width:480px; margin:24px auto 0; }
.nl-band .nl-form input{ flex:1; padding:14px 18px; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--ff-body); background:var(--ivoire); }
.nl-band .nl-form input:focus{ outline:none; border-color:var(--rouge); }
@media (max-width:520px){ .nl-band .nl-form{ flex-direction:column; } .nl-band .nl-form .btn{ justify-content:center; } }

/* ---------- Hero (editorial, asymmetric overlapping circles) ---------- */
.hero2{ position:relative; min-height:min(94vh,940px); display:flex; align-items:center;
  overflow:hidden; padding-block:clamp(36px,5vw,72px); }
.hero2-photos{ position:absolute; inset:0; z-index:1; }
.hero2 .round{ position:absolute; }
.hero2 .big{ top:clamp(18px,3.2vh,38px); bottom:clamp(18px,3.2vh,38px);
  right:clamp(18px,2vw,44px); left:auto; width:auto; height:auto;
  aspect-ratio:1/1; transform:none; }
.hero2 .small{ width:min(33vh,310px); height:min(33vh,310px);
  left:clamp(-26px,2vw,30px); bottom:clamp(18px,5vh,64px); }
.hero2-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(96deg,
    var(--ivoire) 0%, var(--ivoire) 30%,
    color-mix(in srgb, var(--ivoire) 78%, transparent) 47%,
    color-mix(in srgb, var(--ivoire) 32%, transparent) 61%,
    transparent 72%); }
.hero2-inner{ position:relative; z-index:3; width:100%; }
.hero2-copy{ max-width:500px; }
.hero2 h1{ font-size:clamp(2.7rem,6vw,4.7rem); line-height:1; white-space:nowrap; }
.hero2 .hero-tag{ margin:18px 0 0; }
.hero2 .hero-actions{ justify-content:flex-start; }
.hero2 .eyebrow::before{ display:none; }

@media (max-width:820px){
  .hero2{ flex-direction:column; min-height:0; text-align:center; padding-top:24px; }
  .hero2-photos{ position:relative; inset:auto; height:auto; display:flex; justify-content:center;
    padding-top:6px; margin-bottom:34px; width:100%; }
  .hero2 .big{ position:relative; right:auto; top:auto; transform:none;
    width:min(94vw,560px); height:min(94vw,560px); }
  .hero2 .small{ display:none; }
  .hero2-scrim{ display:none; }
  .hero2-copy{ max-width:none; margin-inline:auto; }
  .hero2 .eyebrow{ justify-content:center; }
  .hero2 .hero-tag{ text-align:center; }
  .hero2 .hero-actions{ justify-content:center; }
}

/* ---------- Hero (legacy centered) ---------- */
.hero-photos{ display:flex; justify-content:center; align-items:center; gap:clamp(-20px,2vw,28px); }
.hero-photos .round{ width:clamp(170px,36vw,350px); height:clamp(170px,36vw,350px); }
.hero-photos .hp-a{ margin-right:-36px; z-index:2; transform:translateY(14px); }
.hero-photos .hp-b{ z-index:1; transform:translateY(-14px); width:clamp(190px,40vw,392px); height:clamp(190px,40vw,392px); }
.hero-tag{ font-family:var(--ff-sub); font-weight:300; text-transform:uppercase;
  letter-spacing:.42em; font-size:clamp(.84rem,1.6vw,1.06rem); color:var(--rouge); margin:20px 0 0; }
.hero-tag span{ color:var(--or-d); margin:0 .2em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:34px; }
@media (max-width:520px){
  .hero-photos{ gap:0; }
  .hero-photos .hp-a{ margin-right:-34px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
}

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center;
  background:var(--beige); border:1px solid color-mix(in srgb,var(--or) 36%,transparent);
  border-radius:28px; padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px); }

/* ---------- Page hero (interior pages) ---------- */
.phero{ padding-block:clamp(40px,5vw,64px) clamp(40px,6vw,72px); position:relative; }
.phero .grid-2{ align-items:center; }
.phero .round{ width:clamp(300px,46vw,500px); height:clamp(300px,46vw,500px); margin-inline:auto; }
.phero h1{ margin-top:16px; }
.breadcrumb{ font-family:var(--ff-sub); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--anthra-2); }
.breadcrumb a:hover{ color:var(--rouge); }

/* ---------- Grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-2.svc-grid{ gap:34px; align-items:stretch; }
@media (max-width:860px){ .grid-2, .grid-3{ grid-template-columns:1fr; } .grid-2{ gap:38px; } }

/* ---------- Trust band ---------- */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.value{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.value h3{ font-size:1.15rem; }
.value p{ font-size:.95rem; }
@media (max-width:860px){ .values{ grid-template-columns:1fr 1fr; gap:34px 20px; } }
@media (max-width:480px){ .values{ grid-template-columns:1fr; } }

/* ---------- Cards centered when stacked (single column) ---------- */
@media (max-width:860px){
  .svc, .card{ text-align:center; align-items:center; }
  .svc .round, .card .round,
  .svc .icon-badge, .card .icon-badge,
  .icon-badge.sm{ margin-inline:auto; }
  .svc p, .card p{ margin-inline:auto; }
  .svc .eyebrow, .card .eyebrow{ justify-content:center; }
  .svc .more{ justify-content:center; }
  .post .body{ text-align:center; align-items:center; }
  .post .tag, .post .more{ justify-content:center; }
  /* keep forms & lists left-aligned for readability */
  .card form{ text-align:left; }
  .field{ text-align:left; align-items:stretch; }
  .rgpd, .checklist li, .contact-list li{ text-align:left; }
}