/* Warm editorial direction: cream, apricot, terracotta and a deep aubergine-brown anchor. */
.title-ribbon{width:100%;position:relative;background:var(--surface);border-block:1px solid var(--line);border-radius:65% 35% 48% 52% / 12% 18% 15% 13%;padding:28px 0;overflow:hidden}
.hero-copy{width:100%;max-width:1040px;min-width:0}
.hero h1{font-family:var(--serif);font-size:clamp(34px,4.1vw,52px);font-weight:400;line-height:1.35;max-width:none;margin:0;white-space:nowrap;letter-spacing:-1px;color:var(--ink)!important;isolation:auto}
.hero h1:before,.hero h1:after{display:none}
.ribbon-track{display:flex;width:max-content;animation:title-scroll 36s linear infinite;will-change:transform}
.ribbon-copy{display:flex;flex:0 0 auto;align-items:center;gap:30px;padding-right:30px;white-space:nowrap}
.ribbon-copy em{font-weight:400;color:var(--accent)}.ribbon-dot{font-family:Georgia,serif;font-size:23px;color:var(--accent);padding:0 15px}
.ribbon-controls{display:flex;justify-content:flex-end;margin:10px 0 40px}
#ribbon-toggle{border:0;background:transparent;color:var(--ink);font:13px/1.5 'DM Sans',sans-serif;cursor:pointer;padding:6px 8px;display:flex;gap:9px;align-items:center;border-radius:3px}
#ribbon-toggle:hover{background:var(--surface)}
.title-ribbon:hover .ribbon-track,.title-ribbon:focus-within .ribbon-track,.title-ribbon.is-paused .ribbon-track{animation-play-state:paused}
.hero-copy>p:last-of-type{margin:0 auto 24px;max-width:650px}
h2{font-family:var(--serif);font-weight:400}
.identity-audience{font-weight:500;letter-spacing:1.1px}.cards h3{font-weight:600}
.button{letter-spacing:.3px;box-shadow:0 4px 12px #4c292c12}
@keyframes title-scroll{to{transform:translateX(-50%)}}
@media(max-width:700px){.hero{padding-inline:22px!important}.title-ribbon{padding:24px 0}.hero h1{font-size:35px}.ribbon-controls{margin-bottom:34px}.ribbon-copy{gap:22px;padding-right:22px}.ribbon-dot{padding:0 8px}.recognition{border-left-width:3px}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none;display:block;width:100%}.ribbon-copy{display:block;white-space:normal;padding:0 20px}.ribbon-copy:nth-child(2),.ribbon-dot,.ribbon-controls{display:none}.hero h1{white-space:normal;font-size:clamp(30px,5vw,48px)}.title-ribbon{margin-bottom:42px}.ribbon-copy em{display:inline}}

/* Return to the earlier light panels and an open watercolor title treatment. */
.title-ribbon{background:transparent;border:0;border-radius:0;isolation:isolate}
.title-ribbon:before{content:'';position:absolute;z-index:-1;inset:0 4%;pointer-events:none;background:radial-gradient(ellipse at 30% 48%,var(--wash-a) 0%,transparent 62%),radial-gradient(ellipse at 70% 52%,var(--wash-b) 0%,transparent 65%);filter:blur(12px);opacity:.65;border-radius:57% 43% 60% 40% / 48% 58% 42% 52%;transform:rotate(-2deg)}
.ribbon-copy em{color:var(--ink)}
.work-overview{background:var(--surface)}
.work-overview h2,.work-overview>p:last-child{color:var(--ink)}
.work-overview .work-motto{color:var(--sage)!important}
.recognition{border-left:0}

/* Restore the earlier Lora / DM Sans pairing; no decorative symbols. */
.hero h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.7px}
.ribbon-copy{gap:.3em;padding-right:100px}
.ribbon-copy em{font-style:normal;color:var(--ink)}
.title-ribbon{border:0;background:none;border-radius:0}
.title-ribbon:before{display:none}
html[data-title-background="aquarelle"] .title-ribbon:before{display:block;inset:9px 7%;background:radial-gradient(ellipse at 37% 50%,#dba77b55 0%,transparent 65%),radial-gradient(ellipse at 66% 54%,#bf826738 0%,transparent 65%);filter:blur(17px);opacity:.8;transform:none}
@media(max-width:700px){.ribbon-copy{gap:.3em;padding-right:70px}}
@media(prefers-reduced-motion:reduce){.ribbon-copy{padding:0 20px}}

.title-ribbon{margin-bottom:50px}@media(max-width:700px){.title-ribbon{margin-bottom:42px}}

/* Stronger mottled watercolor strip; retain the open, unframed composition. */
html[data-title-background="aquarelle"] .title-ribbon:before{display:block;inset:0;background:url('aquarelle-bandeau-v34.svg') center / 100% 100% no-repeat;filter:none;opacity:1;transform:none;border-radius:0}
.title-ribbon{padding-block:34px}
/* White-title proposal changes only the title backgrounds, not entire panels. */



@media(max-width:700px){.title-ribbon{padding-block:28px}}

/* Multitone wash and an unbroken quotation across the complete recognition panel. */
html[data-title-background="aquarelle"] .title-ribbon:before{background-image:url('aquarelle-bandeau-v34.svg?v=37')}
.recognition .animated-quote{grid-column:1/-1;max-width:100%;min-width:0;container-type:inline-size;margin:30px 0 0;padding:8px 0 15px;text-align:center;overflow:hidden;font-size:clamp(18px,2vw,23px);line-height:1.6}
.animated-quote span{display:inline-block;white-space:nowrap;position:relative;animation:quote-drift 8s ease-in-out infinite}
.animated-quote span:after{content:'';position:absolute;left:15%;right:15%;bottom:-7px;height:2px;background:linear-gradient(90deg,transparent,var(--clay),var(--mint),transparent);transform-origin:left;animation:quote-line 8s ease-in-out infinite}
@keyframes quote-drift{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
@keyframes quote-line{0%,100%{transform:scaleX(.65);opacity:.45}50%{transform:scaleX(1);opacity:.85}}
@media(max-width:850px){.recognition .animated-quote{text-align:left;font-size:20px}.animated-quote span{animation:quote-reading 20s ease-in-out infinite alternate}.animated-quote span:after{animation:none;opacity:.6}}
@keyframes quote-reading{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(min(0px,calc(100cqw - 100%)))}}
.animated-quote:hover span,.animated-quote:hover span:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.recognition .animated-quote{overflow-x:auto}.animated-quote span,.animated-quote span:after{animation:none;transform:none}}

/* Give the name slightly more presence in the header. */
header .identity .brand img{width:400px;max-width:calc(100vw - 72px);height:auto}
@media(max-width:700px){header .identity .brand img{width:330px;max-width:calc(100vw - 44px)}}
/* A restrained terracotta strip clearly separates the four audiences. */
header .identity-audience{width:fit-content;max-width:100%;margin:16px auto 0;padding:9px 24px;background:#874630;color:#fff;border-radius:2px;column-gap:30px;flex-wrap:nowrap;font-weight:500;letter-spacing:.6px;line-height:1.6}
@media(max-width:700px){header .identity-audience{padding:9px 16px;column-gap:20px;font-size:13px;letter-spacing:.3px}}

/* Replace the rigid audience rectangle with an irregular painted stroke. */
header .identity-audience{position:relative;isolation:isolate;background:none;border:0;border-radius:0;padding:12px 17px;column-gap:32px;color:#fff;font-size:14px;font-weight:500;letter-spacing:1px;margin-top:18px}
header .identity-audience:before{content:'';position:absolute;z-index:-1;inset:-2px -18px;background:url('trait-aquarelle-v38.svg') center / 100% 100% no-repeat;pointer-events:none}
html[data-audience-style="legere"] header .identity-audience{color:var(--ink)}
html[data-audience-style="legere"] header .identity-audience:before{inset:-4px -20px;background-image:url('aquarelle-bandeau-v34.svg?v=37');opacity:.55}
@media(max-width:700px){header .identity-audience{padding:10px 9px;column-gap:20px;font-size:13px;letter-spacing:.3px}header .identity-audience:before{inset:0 -12px}}
/* A longer, more generous watercolor band behind the scrolling title. */
.hero-copy{max-width:none}
.title-ribbon{width:calc(100% + 72px);margin-left:-36px;padding-block:50px}
@media(max-width:700px){.title-ribbon{width:calc(100% + 44px);margin-left:-22px;padding-block:39px}}

/* Align all content in the recognition section on the same left edge. */
/* White lettering proposal on a deeper, multitone watercolor wash. */
html[data-ribbon-ink="blanche"] .hero h1,html[data-ribbon-ink="blanche"] .ribbon-copy em{color:#fff!important;text-shadow:none}
html[data-ribbon-ink="blanche"] .title-ribbon:before{display:block;inset:0;background:url('aquarelle-bandeau-v34.svg?v=37') center / 100% 100% no-repeat;filter:none;opacity:1;transform:none}
/* A clearly visible left-to-right reveal with a long readable hold. */
.recognition .animated-quote>span{animation:quote-reveal 12s linear infinite;transform:none}
.recognition .animated-quote>span:after{animation:quote-line 12s ease-in-out infinite}
@keyframes quote-reveal{0%{clip-path:inset(-12px 100% -16px 0)}22%,100%{clip-path:inset(-12px 0 -16px 0)}}
@media(max-width:850px){.recognition .animated-quote>span{animation:quote-reveal-mobile 22s linear infinite}}
@keyframes quote-reveal-mobile{0%{clip-path:inset(-12px 100% -16px 0);transform:translateX(0)}12%,25%{clip-path:inset(-12px 0 -16px 0);transform:translateX(0)}80%,100%{clip-path:inset(-12px 0 -16px 0);transform:translateX(min(0px,calc(100cqw - 100%)))}}
@media(prefers-reduced-motion:reduce){.recognition .animated-quote>span,.recognition .animated-quote>span:after{animation:none;clip-path:none;transform:none}}

/* Restore simple titles, with no colored title plaques. */
.contact>h2{display:block;background:none;color:var(--ink);padding:0;border:0;border-radius:0;font-size:32px;line-height:1.4}
.work-overview>h2{display:block;background:none;color:var(--ink);padding:0;border:0;border-radius:0;font-size:29px;line-height:1.4}
/* Original two-column recognition panel; quotation aligns with its prose column. */
.recognition{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:65px}
.recognition h2{max-width:300px;text-align:left}
.recognition-text{max-width:780px;margin:0}
.recognition .quote-inside{grid-column:2;width:100%;min-width:0;text-align:left;margin:14px 0 0;padding:0 0 18px;font-size:23px;line-height:1.6;overflow:visible}
.recognition .quote-inside>span{display:block;white-space:normal;animation:quote-reveal 12s linear infinite;transform:none}
html[data-quote-placement="dessus"] .quote-inside{display:none}
html[data-quote-placement="encadre"] .quote-between{display:none}
/* Standalone quote before the four cards; deliberately outside the colored panel. */
.quote-between{container-type:inline-size;margin:18px 36px 8px;padding:12px 0 20px;background:none;border:0;min-width:0;overflow:hidden;text-align:center;font:italic 23px/1.6 var(--serif);color:var(--sage)}
.quote-between>span{display:inline-block;white-space:nowrap;animation:quote-reveal 12s linear infinite}
.quote-between>span:after{animation:quote-line 12s ease-in-out infinite}
@media(max-width:1000px){.recognition{column-gap:35px}}
@media(max-width:850px){.quote-between{text-align:left;font-size:21px}.quote-between>span{animation:quote-reveal-mobile 22s linear infinite}}
@media(max-width:700px){.recognition{display:block}.recognition h2{max-width:none}.recognition-text{margin-top:20px}.recognition .quote-inside{font-size:21px;margin-top:22px}.quote-between{margin:12px 22px 0}.contact>h2{font-size:29px}.work-overview>h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.quote-between{overflow-x:auto}.quote-between>span,.quote-between>span:after,.recognition .quote-inside>span,.recognition .quote-inside>span:after{animation:none;clip-path:none;transform:none}}

/* Restore the plain spaced audience line; retain the light wash as a comparison. */
header .identity-audience{padding:0;margin:15px auto 0;background:none;color:var(--ink);font-size:15px;letter-spacing:.5px;column-gap:30px;line-height:1.6}
header .identity-audience:before{display:none}
html[data-audience-style="legere"] header .identity-audience{padding:12px 17px}
html[data-audience-style="legere"] header .identity-audience:before{display:block;inset:-4px -20px;background:url('aquarelle-bandeau-v34.svg?v=37') center / 100% 100% no-repeat;opacity:.55}
@media(max-width:700px){header .identity-audience{font-size:13px;column-gap:20px;letter-spacing:.3px}html[data-audience-style="legere"] header .identity-audience{padding:10px 9px}}

/* Start the quotation reveal when it enters the viewport. */
.quote-awaiting>span,.recognition .quote-awaiting>span{animation:none;clip-path:inset(-12px 100% -16px 0);transform:none}
.quote-awaiting>span:after,.recognition .quote-awaiting>span:after{animation:none}
.supplied-about p{text-align:justify}
@media(prefers-reduced-motion:reduce){.quote-awaiting>span,.recognition .quote-awaiting>span{clip-path:none}}

/* Justified body copy; headings and short labels retain their alignment. */
.hero-copy>p:not(.eyebrow),.recognition-text p,.card-intro p,.cards details p,.work-overview>p:not(.work-motto),.panel-content p,.supplied-about p,.contact .payment-note,.booking-intro>p:not(.booking-days),.booking-call-note,.booking-help,#booking-status,.location p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;text-align-last:left}

/* More compact service prose, with less empty space before the details. */
.cards .card-intro p,.cards details p{font-size:15px;line-height:1.5;letter-spacing:normal;word-spacing:normal;margin:0 0 .75em}
.cards .card-intro{min-height:0}
.cards details[open] p:first-of-type{margin-top:1em}
.cards details p:last-child{margin-bottom:0}
@media(max-width:850px){.cards .card-intro{min-height:0}}

/* Prefer fuller final lines rather than leaving a single word isolated. */
main p{text-wrap:pretty}
.cards .card-intro p,.cards details p{hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}

/* Targeted typographic adjustments. */
.keep-word{white-space:nowrap;hyphens:none;-webkit-hyphens:none}
.supplied-about .about-intro{text-align:center;text-align-last:auto;hyphens:none}
.supplied-about .about-training{text-align:left;text-align-last:auto;hyphens:none;word-spacing:normal;letter-spacing:normal}
/* Shared rows keep the service links aligned despite different text lengths. */
@supports(grid-template-rows:subgrid){
 .cards{row-gap:16px;align-items:stretch}
 .cards article{display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0}
 .cards h3{min-height:0;margin-bottom:0}
 .cards .card-intro{min-height:0}
 .cards article>details{align-self:start;margin-top:0}
}

/* Center the opening paragraph and appointment button beneath the title. */
.hero .hero-copy{text-align:center}
.hero .hero-copy>p:not(.eyebrow){margin-left:auto;margin-right:auto;text-align:center;text-align-last:auto;hyphens:none;-webkit-hyphens:none;text-wrap:pretty}
.hero .hero-copy>.button{margin-left:auto;margin-right:auto}