/* Angels Perez · block library (v1.0, 9 October 2026)
   Reusable sections in the approved design. Load AFTER fonts.css and site.css (which hold the tokens:
   colours, fonts, buttons, header, footer, background light). Every block class starts with "b-" so it
   never clashes with the older page-specific styles.
   Blocks marked DRAFT in the catalogue are proposals that Angels has not approved yet. */

:root{--pad:clamp(64px,7.5vw,116px);--card:#f6eee1}
.b-section{padding-block:var(--pad)}
.b-section.tight{padding-block:clamp(44px,5vw,76px)}

/* ---------- photo frames ---------- */
.b-arch{border-radius:999px 999px 0 0;overflow:hidden;background:#e8ddd0;aspect-ratio:3/4.1;margin:0}
.b-arch img,.b-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.b-photo{aspect-ratio:4/5;overflow:hidden;background:#e6dbcf;margin:0}
.motion .b-float img{animation:b-breathe 14s ease-in-out infinite;transform-origin:50% 40%}
@keyframes b-breathe{0%,100%{transform:scale(1.04)}50%{transform:scale(1.09) translate3d(0,-1.2%,0)}}
.b-float{will-change:transform}

/* ---------- B03 hero: big headline across the photo ---------- */
.b-hero{padding-block:clamp(28px,6vh,76px) var(--pad)}
.b-hero-row{display:grid;grid-template-columns:1fr;gap:28px}
.b-hero-head{display:flex;flex-direction:column;gap:22px}
.b-hero h1{font:400 clamp(52px,12vw,90px)/1 var(--display);letter-spacing:-.025em;color:var(--plum)}
.b-hero h1 .second{display:block;color:var(--terracotta)}
.b-hero .b-intro{display:flex;flex-direction:column;gap:22px}
.b-hero .lines span{display:block}
.b-hero .key{color:var(--terracotta)}
.b-hero .fine{font-size:15px;color:var(--ink)}
.b-hero .btn{align-self:flex-start;margin-top:8px}
@media (min-width:901px){
  .b-hero{min-height:calc(100svh - 78px);display:flex;align-items:center}
  .b-hero>.wrap{width:100%;max-width:1320px}
  .b-hero-row{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:clamp(16px,2vw,32px);row-gap:clamp(30px,6vh,64px);align-items:start}
  .b-hero-head{grid-column:1/-1;grid-row:1;position:relative;z-index:2;gap:clamp(18px,3vh,32px);pointer-events:none}
  .b-hero h1{font-size:clamp(48px,min(6.6vw,11.4vh),84px);text-shadow:0 0 22px rgba(246,237,225,.9),0 0 8px rgba(246,237,225,.7),0 0 2px rgba(246,237,225,.5)}
  .b-hero h1 .second{font-size:1.13em;padding-left:.55em;margin-top:.02em}
  .b-hero .b-intro{grid-column:1/span 6;grid-row:2;gap:clamp(16px,2.8vh,26px)}
  .b-hero .b-arch{grid-column:7/-1;grid-row:1/3;justify-self:end;align-self:start;aspect-ratio:3/4.1;margin-top:clamp(0px,7vh,72px);height:min(calc(100svh - 78px - 2*clamp(28px,6vh,76px) - clamp(0px,4vh,40px)),600px)}
}
@media (max-width:900px){.b-hero br.dsk{display:none}}

/* ---------- B04 split: words beside a photo ---------- */
.b-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,90px);align-items:center}
.b-split.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.b-split.flip>.b-arch,.b-split.flip>.b-photo{order:-1}
.b-copy{display:flex;flex-direction:column;gap:18px;max-width:36em}
.b-copy .lead{font-size:clamp(18px,1.4vw,20px);line-height:1.6}
.b-copy .accent{font:400 clamp(22px,2vw,28px)/1.3 var(--display);color:var(--terracotta)}
@media (max-width:900px){.b-split,.b-split.flip{grid-template-columns:1fr}.b-split>.b-arch,.b-split>.b-photo{order:-1;width:100%}}

/* ---------- B05 travel: photo + credentials travel down beside a long text (laptop only) ---------- */
.b-travel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,90px);align-items:stretch}
.b-travel-media{position:relative}
.b-travel-stick{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px;width:min(100%,calc(min(54vh,520px) * 3 / 3.8));margin-left:auto}
.b-travel-stick .b-arch{width:100%;aspect-ratio:3/3.8}
.b-travel .b-creds.phone-only{display:none}
@media (max-width:900px){
  .b-travel{grid-template-columns:1fr}
  .b-travel-media{order:-1}
  .b-travel-stick{position:static;width:100%}
  .b-travel-stick .b-creds{display:none}
  .b-travel .b-creds.phone-only{display:flex}
}

/* ---------- B06 credentials: softly outlined box ---------- */
.b-creds{padding:20px 24px 22px;border:1px solid rgba(97,43,59,.2);background:rgba(246,238,225,.55);display:flex;flex-direction:column;gap:4px;max-width:30em}
.b-creds .name{font:400 23px/1.1 var(--display);color:var(--plum)}
.b-creds .title{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);margin:2px 0 10px}
.b-creds ul{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:14.5px;line-height:1.5;color:var(--muted)}

/* ---------- B07 testimonial card ---------- */
.b-tcard{position:relative;margin:0 auto;max-width:46rem;background:var(--card);padding:clamp(30px,3.6vw,52px);display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.b-tcard::before{content:"“";font:400 92px/1 Georgia,"Times New Roman",serif;color:var(--terracotta);height:46px;margin:-14px 0 -4px -4px}
.b-tcard blockquote{margin:0;font:400 clamp(21px,1.9vw,27px)/1.36 var(--display);color:var(--plum);display:flex;flex-direction:column;gap:.7em}
.b-who{display:flex;align-items:center;gap:14px}
.b-who .init{width:52px;height:52px;border-radius:50%;background:var(--clay);color:var(--ivory);display:grid;place-items:center;font:400 22px/1 var(--display)}
.b-who .ctx{font-size:14px;color:var(--muted)}

/* ---------- B08 client quote on a coloured ground ---------- */
.b-cquote{position:relative;margin:0;padding-top:clamp(56px,5vw,78px);max-width:36em}
.b-cquote .mark{position:absolute;top:0;left:-.04em;font:400 clamp(120px,10vw,170px)/1 Georgia,"Times New Roman",serif;color:rgba(246,237,225,.6);height:.6em;pointer-events:none}
.b-cquote blockquote{margin:0;font:400 clamp(21px,1.9vw,27px)/1.34 var(--display);color:var(--ivory)}
.b-cquote figcaption{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ivory)}
.b-cquote figcaption .init{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(246,237,225,.2);font:400 15px/1 var(--display)}
.b-cquote.centre{margin-inline:auto;text-align:center}
.b-cquote.centre .mark{left:50%;transform:translateX(-50%)}
.b-cquote.centre figcaption{justify-content:center}
@media (max-width:900px){.b-cquote.centre{text-align:left;margin-inline:0}.b-cquote.centre .mark{left:-.04em;transform:none}.b-cquote.centre figcaption{justify-content:flex-start}}

/* coloured grounds for whole sections */
.b-ground-clay{background:#b6908b url(/assets/img/bg-clay.jpg) center/cover;background-blend-mode:multiply;color:var(--ivory)}
.b-ground-plum{background:var(--plum) url(/assets/img/bg-plum-leaves.jpg) center/cover;color:var(--ivory)}
.b-ground-clay .label,.b-ground-plum .label,.b-ground-clay .d2,.b-ground-plum .d2{color:var(--ivory)}

/* ---------- B09 FAQ ---------- */
.b-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);align-items:start}
.b-faq-head{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
.b-faq-list{display:flex;flex-direction:column;gap:4px}
.b-faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;font:400 clamp(20px,1.7vw,24px)/1.3 var(--display);color:var(--plum);transition:color .2s}
.b-faq-list summary::-webkit-details-marker{display:none}
.b-faq-list summary::after{content:"+";flex-shrink:0;color:var(--plum);font:300 30px/1 var(--sans);transition:transform .25s,color .2s}
.b-faq-list details[open] summary{color:var(--terracotta)}
.b-faq-list details[open] summary::after{transform:rotate(45deg);color:var(--terracotta)}
.b-faq-list .answer{padding:2px 0 28px;display:flex;flex-direction:column;gap:14px;max-width:40em}
.b-faq-list .answer a{color:var(--terracotta);text-decoration-color:rgba(166,85,60,.45);text-decoration-thickness:1.5px;text-underline-offset:4px}
.b-faq-list .answer a:hover{text-decoration-color:var(--terracotta)}
:root{interpolate-size:allow-keywords}
.b-faq-list details::details-content{height:0;overflow:clip;transition:height .45s cubic-bezier(.3,.7,.2,1),content-visibility .45s allow-discrete}
.b-faq-list details[open]::details-content{height:auto}
.b-faq-list details[open] .answer{animation:b-faq-in .5s cubic-bezier(.3,.7,.2,1) both}
@keyframes b-faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.b-faq{grid-template-columns:1fr}.b-faq-head{position:static}}

/* ---------- B10 offer ---------- */
.b-offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,100px);align-items:center}
.b-offer .b-arch{aspect-ratio:3/4}
.b-offer-card{background:var(--ivory);color:var(--ink);padding:clamp(32px,4.4vw,60px);display:flex;flex-direction:column;gap:24px}
.b-offer-card .d2{color:var(--plum)}
.b-offer-card .label{color:var(--terracotta)}
.b-dash{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px}
.b-dash li{padding-left:18px;position:relative}
.b-dash li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--terracotta)}
.b-mini{background:rgba(188,123,108,.13);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.b-mini .mq{font:italic 400 15px/1.6 var(--sans);color:var(--plum)}
.b-mini .ctx{font-size:12.5px;color:var(--muted)}
.b-price{display:grid;grid-template-columns:1fr 1fr;padding-block:20px;border-block:1px solid var(--hair);margin:0}
.b-price dd{margin:8px 0 0;font:400 clamp(26px,2.4vw,34px)/1 var(--display);color:var(--plum);white-space:nowrap}
.b-offer-card .btn{width:100%}
@media (max-width:900px){.b-offer{grid-template-columns:1fr}.b-offer .b-arch{width:100%;aspect-ratio:3/3.8}}

/* ---------- B11 newsletter card ---------- */
.b-news{padding:clamp(26px,3.2vw,42px);border:1px solid rgba(97,43,59,.22);background:rgba(246,238,225,.62);box-shadow:0 20px 50px -30px rgba(97,43,59,.35);display:flex;flex-direction:column;gap:14px}
.b-news h2{font:400 clamp(27px,2.6vw,36px)/1.16 var(--display);color:var(--plum)}
.b-news .copy{display:flex;flex-direction:column;gap:14px}
.b-news .close{color:var(--plum)}
.b-news .close strong{font-weight:500}
.b-news form .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.b-news input[type=text],.b-news input[type=email]{width:100%;min-height:52px;padding:0 16px;border:1px solid rgba(97,43,59,.25);background:rgba(255,255,255,.35);font:400 16px var(--sans);color:var(--ink)}
.b-news form .btn{width:100%;margin-top:12px}
.b-news .consent{font-size:13px;line-height:1.55;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){.b-news form .fields{grid-template-columns:1fr}}

/* B11a · the real MailerLite form inside the newsletter card (same look as the home page) */
.b-news .ml-form-embedContainer,.b-news .ml-form-embedWrapper,.b-news .ml-form-embedBody{width:100%}
.b-news .ml-block-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.b-news .ml-block-form input[type=text],.b-news .ml-block-form input[type=email]{width:100%;min-height:54px;padding:0 18px;border:1px solid var(--hair);border-radius:0;background:var(--card);color:var(--ink);font:400 17px/1 var(--sans);-webkit-appearance:none;appearance:none}
.b-news .ml-block-form input::placeholder{color:#7b6d62}
.b-news .ml-block-form input:focus{border-color:var(--plum);outline:none}
.b-news .ml-form-embedSubmit{margin-top:10px}
.b-news .ml-form-embedSubmit .btn{width:100%}
.b-news .ml-form-embedSubmit button.loading{display:none}
.b-news .ml-error input{border-color:var(--terracotta)!important;background:#f7e6df!important}
.b-news .ml-form-embedBody .fine{margin-top:12px}
@media (max-width:600px){.b-news .ml-block-form .fields{grid-template-columns:1fr}}

/* ---------- B12 coming soon card (clay) and B13 invitation card (plum) ---------- */
.b-card{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:clamp(28px,3.4vw,44px)}
.b-card .d2{font-size:clamp(34px,3.6vw,50px);line-height:1.04}
.b-card .hl{font:400 clamp(21px,1.9vw,25px)/1.3 var(--display)}
.b-card .arrow-link{color:var(--ivory);text-decoration-color:rgba(246,237,225,.7);margin-top:8px}
.b-card .btn.light{background:var(--ivory);color:var(--plum);margin-top:10px}
.b-card .btn.light:hover{background:#fffaf2}
@media (max-width:700px){.b-card{padding:26px 22px}}

/* ---------- B14 link list ---------- */
.b-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.b-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:var(--card);text-decoration:none;color:var(--plum);font:400 clamp(22px,2vw,26px)/1.2 var(--display);transition:background-color .2s}
.b-links a::after{content:"→";font:400 18px/1 var(--sans);color:var(--terracotta);transition:transform .2s}
.b-links a:hover{background:#efe1cf}
.b-links a:hover::after{transform:translateX(4px)}

/* ---------- B15 closing statement on plum ---------- */
.b-closing{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:22px;align-items:flex-start;color:var(--ivory)}
.b-closing .statement{font:400 clamp(33px,3.8vw,56px)/1.08 var(--display);letter-spacing:-.012em}
.b-closing .btn{background:var(--ivory);color:var(--plum)}
.b-closing .btn:hover{background:#fffaf2}

/* ---------- B18 DRAFT · show only what applies to me: two selectors (who, where) ---------- */
.b-pick{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.8vw,34px);border:1px solid rgba(97,43,59,.2);background:rgba(246,238,225,.62)}
.b-pick-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.b-pick-label{flex-basis:100%;font:500 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.b-seg{display:inline-flex;gap:6px;padding:5px;border:1px solid rgba(97,43,59,.2);border-radius:999px;background:rgba(255,255,255,.3)}
.b-seg button{min-height:44px;padding:0 24px;border:0;border-radius:999px;background:none;color:var(--plum);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s}
.b-seg button[aria-pressed=true]{background:var(--plum);color:var(--ivory)}
.b-select{position:relative;width:min(100%,460px)}
.b-select select{width:100%;min-height:52px;padding:0 48px 0 18px;border:1px solid rgba(97,43,59,.25);border-radius:0;background:var(--card);color:var(--ink);font:400 17px/1 var(--sans);-webkit-appearance:none;appearance:none;cursor:pointer}
.b-select::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--plum);border-bottom:1.5px solid var(--plum);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.b-select select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.b-pick-wait{font:400 clamp(19px,1.7vw,22px)/1.35 var(--display);color:var(--plum)}
[data-for],[data-where]{animation:b-faq-in .4s cubic-bezier(.3,.7,.2,1) both}
.b-hide{display:none!important}

/* ---------- B19 DRAFT · numbered steps ---------- */
.b-steps{list-style:none;counter-reset:b-step;display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px)}
.b-steps>li{counter-increment:b-step;display:grid;grid-template-columns:clamp(44px,4vw,56px) 1fr;gap:clamp(14px,2vw,24px);align-items:start}
.b-steps>li::before{content:counter(b-step);display:grid;place-items:center;width:clamp(40px,3.6vw,50px);height:clamp(40px,3.6vw,50px);border-radius:50%;border:1px solid rgba(97,43,59,.3);font:400 clamp(20px,1.8vw,24px)/1 var(--display);color:var(--plum)}
.b-steps h3{font:400 clamp(21px,1.9vw,26px)/1.25 var(--display);color:var(--plum);margin-bottom:6px;letter-spacing:0;text-transform:none}
.b-steps p+p{margin-top:8px}

/* ---------- B20 DRAFT · country card ---------- */
.b-country{background:var(--card);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.b-country .d3{color:var(--plum)}
.b-country dl{display:grid;grid-template-columns:minmax(0,12em) 1fr;gap:10px 22px;margin:0}
.b-country dt{font:500 11.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);padding-top:4px}
.b-country dd{margin:0}
.b-country .ask{font:400 clamp(19px,1.7vw,22px)/1.35 var(--display);color:var(--plum)}
@media (max-width:700px){.b-country dl{grid-template-columns:1fr;gap:4px}.b-country dd{margin-bottom:10px}}

/* ---------- print: any page saves as a clean PDF ---------- */
@media print{
  .sky,.plaster,.grain,.cookie,.head .btn,.btn,.no-print{display:none!important}
  body{background:#fff;color:#000;font-size:11.5pt}
  .head{position:static;border:0}
  .b-pick{display:none!important}
  .b-pick-none .b-hide{display:block!important}
  .b-country,.b-creds,.b-tcard{break-inside:avoid;background:none;border:1px solid #ccc}
  a{color:inherit}
  .doc a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .toc{display:none}
}