/* Spa do Fio: botanical atmosphere, scoped to this brand page. */
.brand-page[data-brand="spa-do-fio"] {
  --midnight:#172b25;
  --ink:#f5f2e9;
  --brand-accent:#c7d0ae;
  --brand-deep:#213a30;
  --brand-soft:#f2f0e8;
  --spa-green:#213a30;
  --spa-olive:#566649;
  --spa-stone:#e5e2d5;
  --spa-text:#22382d;
  background:var(--midnight);
}
.spa-shell { width:min(100%,1440px); margin-inline:auto; }
.spa-section { padding:clamp(72px,8vw,120px) max(24px,6vw); }
.spa-eyebrow { font-size:.7rem; line-height:1.6; font-weight:650; letter-spacing:.18em; text-transform:uppercase; }
.spa-title { font-size:clamp(2.8rem,4.8vw,5.2rem); line-height:1.06; letter-spacing:-.04em; text-wrap:balance; }
.spa-title em { color:inherit; }
.spa-link { display:inline-flex; align-items:center; gap:24px; font-size:.8rem; font-weight:600; line-height:1.5; border-bottom:1px solid currentColor; padding-block:8px; }
.spa-link span { font-size:1.15rem; }
.spa-light-button { background:var(--spa-green); border-color:var(--spa-green); color:#f5f2e9; }
.spa-light-button:hover { background:#324b3a; }
.spa-essence :focus-visible,.spa-lines :focus-visible,.spa-catalog :focus-visible,.spa-chapter-nav :focus-visible { outline-color:#3a553d; }

.spa-hero { position:relative; isolation:isolate; min-height:650px; height:clamp(650px,50vw,950px); display:flex; align-items:center; padding:136px max(24px,6vw) 80px; background:#162c25; }
.spa-hero-picture { position:absolute; inset:0; z-index:-2; }
.spa-hero-picture img { width:100%; height:100%; object-fit:cover; object-position:right center; }
.spa-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(20,43,34,.97) 0%,rgba(20,43,34,.91) 24%,rgba(20,43,34,.54) 45%,rgba(20,43,34,.06) 65%); }
.spa-hero .spa-shell { position:relative; }
.spa-hero-copy { max-width:49%; }
.spa-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; color:#d0d7c8; font-size:.7rem; margin-bottom:30px; }
.spa-breadcrumb strong { font-weight:500; color:var(--ink); }
.spa-breadcrumb a:hover { color:white; }
.spa-hero .spa-eyebrow { color:#cfdbb8; }
.spa-hero h1 { font-size:clamp(4.4rem,6.8vw,8.2rem); line-height:.99; letter-spacing:-.05em; margin:20px 0 26px; }
.spa-hero h1 em { display:block; color:#dae0c6; }
.spa-hero-intro { max-width:370px; font-size:1.03rem; line-height:1.65; color:#dee3d6; }
.spa-hero .brand-actions { margin-top:28px; gap:16px 24px; align-items:center; }
.spa-hero .brand-button { background:#dde3cf; color:#1d3429; border-color:#dde3cf; }
.spa-hero .spa-link { color:#f5f2e9; }
.spa-hero-note { position:absolute; bottom:28px; left:max(24px,6vw); display:flex; gap:30px; align-items:center; color:#e5e8db; font-size:.62rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.spa-hero-note::before { content:""; width:42px; height:1px; background:#c7d0ae; }
.spa-chapter-nav { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:23px max(24px,6vw); color:var(--spa-text); background:var(--spa-stone); }
.spa-chapter-nav p { font-family:Georgia,serif; font-size:1.4rem; }
.spa-chapter-nav nav { display:flex; flex-wrap:wrap; gap:30px; }
.spa-chapter-nav a { font-size:.75rem; padding-block:8px; border-bottom:1px solid transparent; }
.spa-chapter-nav a:hover { border-color:var(--spa-text); }

.spa-essence { color:var(--spa-text); background:var(--brand-soft); }
.spa-essence-heading { display:grid; grid-template-columns:1.25fr 1fr; gap:90px; align-items:end; }
.spa-essence-heading h2 { margin-top:18px; }
.spa-essence-heading>p { color:#52614f; font-size:1.05rem; line-height:1.75; max-width:420px; }
.spa-values { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:60px; }
.spa-values article { border-top:1px solid #bec6b3; padding-top:24px; }
.spa-values svg { width:32px; height:32px; color:var(--spa-olive); }
.spa-values h3 { font-size:1.65rem; margin:16px 0 10px; }
.spa-values p { color:#53604f; font-size:.86rem; line-height:1.65; max-width:330px; }

.spa-lines { background:#faf8f2; color:var(--spa-text); }
.spa-lines-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.spa-lines-heading h2 { margin-top:18px; }
.spa-lines-heading>p { max-width:235px; color:#53604f; font-size:.93rem; line-height:1.65; }
.spa-line-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:42px 0 28px; }
.spa-line-tabs[hidden] { display:none; }
.spa-line-tab { font-family:inherit; font-size:.82rem; line-height:1.4; min-height:52px; padding:12px 14px; border:1px solid #c8cebf; border-radius:3px; color:#3d5140; background:transparent; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.spa-line-tab:hover { background:#e6eadd; }
.spa-line-tab[aria-selected="true"] { background:var(--spa-green); color:#f5f2e9; border-color:var(--spa-green); }
.spa-line-panel { display:grid; grid-template-columns:1.2fr 1fr; background:#eeefe5; }
.spa-line-panel[hidden] { display:none; }
.spa-line-tabs[hidden] ~ .spa-line-panel+.spa-line-panel { margin-top:32px; }
.spa-line-panel:focus { outline-offset:6px; }
.spa-line-photo { position:relative; background:white; display:grid; place-items:center; min-width:0; aspect-ratio:4/3; }
.spa-line-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.spa-line-photo-packshot img { padding:24px; }
.spa-line-copy { align-self:center; padding:clamp(28px,4vw,65px); }
.spa-line-count { color:#5d6b4e; font-size:.63rem; line-height:1.6; letter-spacing:.16em; text-transform:uppercase; }
.spa-line-copy h3 { font-size:clamp(2.65rem,4.1vw,4.8rem); line-height:1; letter-spacing:-.04em; margin:18px 0 16px; }
.spa-line-promise { font-family:Georgia,serif; font-size:clamp(1.4rem,1.8vw,1.9rem); line-height:1.35; margin-bottom:16px!important; }
.spa-line-description { font-size:.92rem; line-height:1.7; color:#53604f; max-width:410px; }
.spa-ingredients { display:flex; flex-wrap:wrap; list-style:none; gap:8px; margin:22px 0 25px; padding:0; }
.spa-ingredients li { padding:6px 10px; color:#4d5b43; border:1px solid #c1cbb4; border-radius:20px; font-size:.65rem; line-height:1.4; }
.spa-line-copy .brand-button { min-height:48px; padding:12px 19px; font-size:.75rem; }
.spa-line-catalog { display:inline-flex; font-size:.75rem; color:#52614f; border-bottom:1px solid #859379; padding-block:7px; margin-top:14px; }
.spa-line-detail { grid-column:1/-1; border-top:1px solid #c5cebb; padding:0 28px; }
.spa-line-detail summary { display:flex; justify-content:space-between; align-items:center; padding-block:21px; cursor:pointer; font-size:.8rem; font-weight:600; list-style:none; }
.spa-line-detail summary::-webkit-details-marker { display:none; }
.spa-line-detail summary::after { content:"+"; font-size:1.5rem; font-weight:400; }
.spa-line-detail[open] summary::after { content:"−"; }
.spa-line-detail-content { display:grid; grid-template-columns:1.2fr 1fr; gap:30px; padding-bottom:28px; align-items:center; }
.spa-line-detail img { display:block; width:100%; max-height:460px; object-fit:contain; background:white; }
.spa-line-detail ul { list-style:none; padding:0; margin:0; columns:2; column-gap:25px; font-size:.85rem; line-height:1.8; color:#4c5e47; }
.spa-line-detail li { break-inside:avoid; margin-bottom:8px; }
.spa-lines-note { color:#5b6654; font-size:.73rem; line-height:1.6; margin-top:22px!important; }

.spa-ritual { padding:0; background:var(--spa-green); }
.spa-ritual-grid { display:grid; grid-template-columns:1.2fr 1fr; }
.spa-ritual-photo { min-width:0; min-height:590px; }
.spa-ritual-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:47% center; }
.spa-ritual-copy { align-self:center; padding:65px clamp(28px,5vw,85px); }
.spa-ritual-copy .spa-eyebrow { color:#c3d0ad; }
.spa-ritual-copy h2 { font-size:clamp(2.8rem,4.2vw,4.9rem); line-height:1.08; letter-spacing:-.04em; margin:20px 0 24px; }
.spa-ritual-intro { color:#d2dbc7; line-height:1.75; font-size:.95rem; max-width:410px; }
.spa-ritual-steps { list-style:none; padding:0; margin:32px 0 0; }
.spa-ritual-steps li { display:flex; gap:25px; align-items:baseline; padding:15px 0; border-top:1px solid #546848; }
.spa-ritual-steps span { font-size:.65rem; color:#c7d0ae; letter-spacing:.1em; }
.spa-ritual-steps strong { font-family:Georgia,serif; font-size:1.35rem; font-weight:400; }

.spa-catalog { background:var(--spa-stone); color:var(--spa-text); }
.spa-catalog-grid { display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:70px; }
.spa-catalog h2 { font-size:clamp(2.6rem,4vw,4.5rem); line-height:1.08; letter-spacing:-.04em; margin-top:18px; }
.spa-catalog-copy>p { font-size:.93rem; line-height:1.65; color:#53604f; max-width:350px; }
.spa-catalog .brand-actions { margin:23px 0 14px; }
.spa-catalog .spa-link { color:#4c5e47; }
.spa-catalog small { color:#58654e; font-size:.7rem; }

.spa-support { background:#172b25; }
.spa-support .brand-support-grid { grid-template-columns:1.25fr 1fr; gap:80px; }
.spa-support .brand-support-intro h2 { margin-top:18px; }
.spa-support .brand-support-intro>p { margin:24px 0 0; max-width:490px; }
.spa-support-card { border:1px solid #4c614e; padding:40px; align-self:center; }
.spa-support-card h3 { font-size:2rem; margin:0 0 15px; }
.spa-support-card p { font-size:.92rem; color:#c9d3c4; line-height:1.7; margin-bottom:25px; }
.spa-support-card .spa-link { margin-top:12px; color:#c7d0ae; }
.brand-page[data-brand="spa-do-fio"] .brand-faq { background:#172b25; padding-top:0; }
.brand-page[data-brand="spa-do-fio"] .brand-next { background:#172b25; }
.spa-sr-only { position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@media(max-width:1100px) {
  .spa-hero h1 { font-size:clamp(4rem,6.8vw,5rem); }
  .spa-hero-copy { max-width:51%; }
  .spa-essence-heading,.spa-catalog-grid,.spa-support .brand-support-grid { gap:45px; }
  .spa-line-panel,.spa-ritual-grid { grid-template-columns:1.1fr 1fr; }
  .spa-line-copy { padding:30px; }
  .spa-line-photo { aspect-ratio:auto; min-height:470px; }
  .spa-line-photo img { max-height:540px; }
  .spa-ritual-copy { padding:48px 30px; }
}
@media(max-width:900px) {
  .spa-hero { align-items:flex-start; height:max(820px,180vw); min-height:820px; padding:128px 24px 85px; }
  .spa-hero-picture img { object-position:right bottom; }
  .spa-hero::before { background:linear-gradient(180deg,rgba(19,38,29,.66) 0%,rgba(19,38,29,.4) 36%,rgba(19,38,29,0) 53%,rgba(19,38,29,0) 91%,rgba(19,38,29,.24)); }
  .spa-hero-copy { max-width:100%; }
  .spa-breadcrumb { margin-bottom:25px; }
  .spa-hero h1 { font-size:clamp(3.5rem,8vw,5rem); margin:17px 0 19px; }
  .spa-hero-intro { max-width:350px; font-size:.95rem; }
  .spa-hero .brand-actions { margin-top:22px; }
  .spa-hero-note { left:24px; font-size:.58rem; gap:18px; }
  .spa-chapter-nav { flex-direction:column; align-items:flex-start; gap:12px; }
  .spa-chapter-nav nav { gap:25px; width:100%; }
  .spa-line-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .spa-line-panel { grid-template-columns:1fr; }
  .spa-line-photo { min-height:0; aspect-ratio:4/3; }
  .spa-line-photo img { max-height:none; }
  .spa-line-photo-packshot { aspect-ratio:1.3; }
  .spa-line-photo-packshot img { padding:24px; }
  .spa-line-copy { padding:35px; }
  .spa-line-copy h3 { font-size:3.2rem; }
  .spa-line-description { max-width:520px; }
  .spa-line-detail-content { grid-template-columns:1fr; gap:22px; }
  .spa-ritual-grid { grid-template-columns:1fr; }
  .spa-ritual-photo { min-height:0; aspect-ratio:3/2; }
  .spa-ritual-copy { padding:55px max(24px,6vw); }
  .spa-ritual-copy h2 { font-size:clamp(2.8rem,7vw,4.5rem); }
  .spa-ritual-intro { max-width:520px; }
  .spa-ritual-steps { display:flex; gap:25px; }
  .spa-ritual-steps li { flex:1; gap:12px; flex-direction:column; }
  .spa-ritual-steps strong { font-size:1.2rem; }
}
@media(max-width:760px) {
  .spa-section { padding:65px 22px; }
  .spa-hero { padding:118px 22px 75px; }
  .spa-hero h1 { font-size:clamp(3.2rem,12vw,4.8rem); }
  .spa-breadcrumb { font-size:.62rem; gap:8px; margin-bottom:22px; }
  .spa-hero .spa-eyebrow { font-size:.65rem; }
  .spa-hero-intro { max-width:310px; font-size:.92rem; }
  .spa-hero .brand-actions { gap:14px; }
  .spa-hero .brand-button { min-height:48px; padding:13px 18px; font-size:.74rem; }
  .spa-hero .spa-link { font-size:.74rem; gap:16px; }
  .spa-hero-note { left:22px; bottom:26px; }
  .spa-chapter-nav { padding:22px; }
  .spa-chapter-nav p { font-size:1.23rem; }
  .spa-chapter-nav nav { justify-content:space-between; gap:12px; }
  .spa-chapter-nav a { font-size:.71rem; }
  .spa-essence-heading,.spa-catalog-grid,.spa-support .brand-support-grid { grid-template-columns:1fr; gap:25px; }
  .spa-title { font-size:clamp(2.7rem,9.5vw,4rem); }
  .spa-essence-heading>p { font-size:.98rem; }
  .spa-values { grid-template-columns:1fr; gap:24px; margin-top:38px; }
  .spa-values article { display:grid; grid-template-columns:35px 1fr; gap:0 20px; padding-top:20px; }
  .spa-values svg { grid-row:1/3; width:27px; height:27px; margin-top:4px; }
  .spa-values h3 { margin:0 0 7px; font-size:1.45rem; }
  .spa-values p { max-width:100%; font-size:.83rem; }
  .spa-lines-heading { display:block; }
  .spa-lines-heading>p { max-width:100%; margin-top:18px; font-size:.86rem; }
  .spa-line-tabs { gap:7px; margin:28px 0 22px; }
  .spa-line-tab { padding:10px 8px; font-size:.73rem; min-height:48px; }
  .spa-line-copy { padding:28px 24px; }
  .spa-line-copy h3 { font-size:2.9rem; }
  .spa-line-promise { font-size:1.5rem; }
  .spa-line-description { font-size:.86rem; }
  .spa-line-photo-packshot img { padding:14px; }
  .spa-line-detail { padding-inline:24px; }
  .spa-line-detail summary { gap:20px; font-size:.75rem; }
  .spa-line-detail ul { font-size:.77rem; column-gap:16px; }
  .spa-lines-note { font-size:.68rem; }
  .spa-ritual-copy { padding:48px 22px; }
  .spa-ritual-steps { gap:18px; }
  .spa-ritual-steps strong { font-size:1.04rem; }
  .spa-ritual-intro { font-size:.89rem; }
  .spa-catalog h2 { font-size:2.7rem; }
  .spa-support { padding-bottom:50px; }
  .spa-support .brand-support-intro h2 { font-size:3rem; }
  .spa-support-card { padding:28px; }
}
/* Tablet: keep the wide photograph whole below the copy, without text on bottles. */
@media(min-width:601px) and (max-width:1100px) {
  .spa-hero { flex-direction:column; align-items:stretch; height:auto; min-height:0; padding:128px 0 0; }
  .spa-hero::before { display:none; }
  .spa-hero .spa-shell { order:-1; padding:0 max(24px,6vw) 42px; }
  .spa-hero-copy { max-width:100%; }
  .spa-hero h1 { font-size:clamp(4rem,8vw,5.5rem); }
  .spa-hero-picture { position:static; width:100%; aspect-ratio:2/1; }
  .spa-hero-picture img { display:block; object-fit:contain; }
  .spa-hero-note { bottom:22px; left:max(24px,6vw); }
}
@media(max-width:380px) {
  .spa-hero { min-height:860px; }
  .spa-hero .brand-actions { gap:6px 18px; }
  .spa-hero h1 { font-size:3.2rem; }
  .spa-hero-note { font-size:.52rem; gap:12px; letter-spacing:.12em; }
  .spa-line-tab { font-size:.67rem; }
  .spa-line-copy { padding:26px 20px; }
  .spa-line-copy h3 { font-size:2.5rem; }
  .spa-line-detail ul { columns:1; }
  .spa-ritual-steps { gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .spa-line-tab { transition:none; }
}