/* Cusmine Clay Studio - homepage sections (cm-*). Every rule is scoped under .cm-sec. */
.cm-sec{
  --cm-paper:#FFFCF8;--cm-ink:#23263F;--cm-ink-soft:#585C78;--cm-line:#E7E1DA;
  --cm-blush:#F6DEDB;--cm-peri:#DCE1F4;--cm-sage:#DDE8D5;--cm-butter:#F7ECC4;--cm-glaze:#D9695A;
  --cm-f-display:F-Heading-Font,"Young Serif",Georgia,"Times New Roman",serif;
  --cm-f-body:F-Body-Font,"Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;
  --cm-f-mono:"Cusmine DM Mono","DM Mono",ui-monospace,Menlo,monospace;
  --cm-r-tile:22px;--cm-gutter:clamp(16px,4vw,40px);
  background:var(--cm-paper);color:var(--cm-ink);font-family:var(--cm-f-body);font-size:16px;line-height:1.55;
  padding-block:0 clamp(48px,7vw,96px);scroll-margin-top:72px;
}
.cm-sec *,.cm-sec *::before,.cm-sec *::after{box-sizing:border-box}
.cm-sec a{color:inherit}
.cm-sec img{display:block;max-width:100%}
.cm-sec h1,.cm-sec h2,.cm-sec h3{font-family:var(--cm-f-display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:-.01em;text-transform:none;color:var(--cm-ink)}
.cm-sec p{margin:0}
.cm-sec :focus-visible{outline:2px solid var(--cm-glaze);outline-offset:3px;border-radius:6px}
.cm-sec .cm-wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--cm-gutter);width:100%}
.cm-sec > .cm-wrap > [class^="section_block_id_"],
.cm-sec [class^="section_block_id_"]{display:contents}
@media (prefers-reduced-motion:reduce){.cm-sec *{transition:none!important;animation:none!important}}

/* motif: photo circle + connector line */
.cm-sec .cm-connector{display:inline-flex;align-items:center;gap:0;vertical-align:middle;flex:none}
.cm-sec .cm-connector i{width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;display:block}
.cm-sec .cm-connector b{width:26px;height:1.5px;background:currentColor;display:block}
.cm-sec .cm-connector em{width:7px;height:7px;background:currentColor;border-radius:50%;display:block}
.cm-sec .cm-mark{display:flex;width:max-content;color:var(--cm-ink-soft)}

/* buttons */
.cm-sec .cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15.5px/1 var(--cm-f-body);letter-spacing:0;text-transform:none;text-decoration:none;border-radius:999px;padding:17px 28px;border:1.5px solid var(--cm-ink);cursor:pointer;transition:background-color .2s ease}
.cm-sec .cm-btn--primary{background:var(--cm-ink);color:var(--cm-paper)}
.cm-sec .cm-btn--primary:hover{background:#343858;color:var(--cm-paper)}
.cm-sec .cm-btn--ghost{background:transparent;color:var(--cm-ink)}
.cm-sec .cm-btn--ghost:hover{background:var(--cm-peri);color:var(--cm-ink)}

/* pending-confirmation placeholder (dashed box) */
.cm-sec .cm-tbc{font-family:var(--cm-f-mono);font-size:.82em;background:var(--cm-paper);border:1px dashed var(--cm-glaze);color:var(--cm-glaze);border-radius:6px;padding:1px 6px;white-space:nowrap}

/* tile colours */
.cm-sec .cm-t-blush{background:var(--cm-blush)}.cm-sec .cm-t-peri{background:var(--cm-peri)}.cm-sec .cm-t-sage{background:var(--cm-sage)}.cm-sec .cm-t-butter{background:var(--cm-butter)}

/* section heads */
.cm-sec .cm-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.cm-sec .cm-head h2,.cm-sec .cm-h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-top:12px}
.cm-sec .cm-head p{color:var(--cm-ink-soft);max-width:30em}
.cm-sec .cm-head .cm-link{font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px}

/* hero */
.cm-sec.cm-hero{padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,80px)}
.cm-hero .cm-hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.cm-hero .cm-hero__title{font-size:clamp(38px,5.4vw,66px);line-height:1.04;margin-block:18px 20px}
.cm-hero .cm-soft{color:var(--cm-glaze)}
.cm-hero .cm-lede{font-size:clamp(16px,1.5vw,18.5px);color:var(--cm-ink-soft);max-width:34em}
.cm-hero .cm-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cm-hero .cm-assure{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;font-size:14px;font-weight:500;list-style:none}
.cm-hero .cm-assure li{display:flex;align-items:center;gap:8px;list-style:none;margin:0}
.cm-hero .cm-tick{width:18px;height:18px;border-radius:50%;background:var(--cm-sage);display:grid;place-items:center;flex:none}
.cm-hero .cm-tick svg{width:11px;height:11px}
.cm-hero .cm-hero__art{position:relative}
.cm-hero .cm-hero__frame{background:var(--cm-sage);border-radius:220px 220px var(--cm-r-tile) var(--cm-r-tile);overflow:hidden;aspect-ratio:4/5;max-width:520px;margin-left:auto}
.cm-hero .cm-hero__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cm-hero .cm-hero__note{position:absolute;left:0;bottom:36px;background:var(--cm-paper);border:1px solid var(--cm-line);border-radius:16px;padding:12px 16px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 30px -18px rgba(35,38,63,.45);max-width:260px}
.cm-hero .cm-hero__dot{width:42px;height:42px;border-radius:50%;background:var(--cm-butter);display:grid;place-items:center;font-family:var(--cm-f-display);font-size:18px;flex:none}
.cm-hero .cm-hero__note strong{display:block;font-size:14px;font-weight:700;line-height:1.55}
.cm-hero .cm-hero__note small{display:block;color:var(--cm-ink-soft);font-size:12.5px;line-height:1.35}

/* keepsake cards */
.cm-cards .cm-cards__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.cm-cards .cm-card{text-decoration:none;display:flex;flex-direction:column;gap:14px;color:var(--cm-ink)}
.cm-cards .cm-card__tile{border-radius:var(--cm-r-tile);overflow:hidden;aspect-ratio:1/1;padding:0;position:relative}
.cm-cards .cm-card__tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cm-cards .cm-card:hover .cm-card__tile img{transform:scale(1.035)}
.cm-cards .cm-card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cm-cards .cm-card h3{font-size:22px;line-height:1.55}
.cm-cards .cm-card__price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-cards .cm-card__spec{font-family:var(--cm-f-mono);font-size:12.5px;color:var(--cm-ink-soft);margin-top:-8px}
.cm-cards .cm-card__tag{position:absolute;top:12px;left:12px;background:var(--cm-paper);font-size:12px;font-weight:600;line-height:1.55;border-radius:999px;padding:6px 11px}

/* how it works */
.cm-how .cm-how__box{background:var(--cm-peri);border-radius:clamp(22px,3vw,40px);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.cm-how .cm-how__pic{border-radius:var(--cm-r-tile);overflow:hidden;aspect-ratio:1/1}
.cm-how .cm-how__pic img{width:100%;height:100%;object-fit:cover}
.cm-how .cm-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px;counter-reset:cmstep}
.cm-how .cm-steps li{display:grid;grid-template-columns:48px 1fr;gap:16px;counter-increment:cmstep;margin:0}
.cm-how .cm-steps li::before{content:counter(cmstep);width:48px;height:48px;border-radius:50%;background:var(--cm-paper);display:grid;place-items:center;font-family:var(--cm-f-display);font-size:20px;line-height:1}
.cm-how .cm-steps h3{font-family:var(--cm-f-body);font-weight:700;font-size:17px;line-height:1.55;letter-spacing:0;margin-bottom:3px}
.cm-how .cm-steps p{color:var(--cm-ink-soft);font-size:15px}

/* photo to keepsake strip */
.cm-strip .cm-strip__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cm-strip figure{margin:0}
.cm-strip .cm-strip__ph{border-radius:var(--cm-r-tile);overflow:hidden;aspect-ratio:1/1}
.cm-strip .cm-strip__ph img{width:100%;height:100%;object-fit:cover}
.cm-strip figcaption{font-size:14px;margin-top:10px;display:flex;gap:8px;align-items:center}
.cm-strip figcaption .cm-connector{color:var(--cm-ink-soft)}

/* occasions */
.cm-occ .cm-occ__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.cm-occ .cm-occ__card{position:relative;border-radius:var(--cm-r-tile);overflow:hidden;aspect-ratio:4/5;text-decoration:none;color:var(--cm-paper);display:block}
.cm-occ .cm-occ__card img{width:100%;height:100%;object-fit:cover}
.cm-occ .cm-occ__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,38,63,0) 45%,rgba(35,38,63,.78))}
.cm-occ .cm-occ__cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.cm-occ .cm-occ__cap h3{font-size:clamp(22px,2.2vw,28px);line-height:1.55;color:var(--cm-paper)}
.cm-occ .cm-occ__cap p{font-size:14.5px;opacity:.9;margin-top:4px;color:var(--cm-paper)}

/* promises */
.cm-promise .cm-promise__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--cm-line);border-bottom:1px solid var(--cm-line)}
.cm-promise .cm-promise__item{padding:clamp(22px,3vw,36px) clamp(8px,2vw,28px)}
.cm-promise .cm-promise__item + .cm-promise__item,.cm-promise .cm-promise__row > [class^="section_block_id_"] + [class^="section_block_id_"] > .cm-promise__item{border-left:1px solid var(--cm-line)}
.cm-promise h3{font-size:21px;line-height:1.55;margin-bottom:8px}
.cm-promise p{color:var(--cm-ink-soft);font-size:15px}

/* faq */
.cm-faq .cm-faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px)}
.cm-faq details{border-bottom:1px solid var(--cm-line);padding-block:18px;margin:0}
.cm-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:17px;line-height:1.55}
.cm-faq summary::-webkit-details-marker{display:none}
.cm-faq summary::after{content:"+";font-family:var(--cm-f-display);font-size:22px;line-height:1;font-weight:400}
.cm-faq details[open] summary::after{content:"\2013"}
.cm-faq details p{color:var(--cm-ink-soft);margin-top:10px;max-width:60ch}

/* newsletter (theme-native f-newsletter-form inside) */
.cm-news .cm-news__box{background:var(--cm-blush);border-radius:clamp(22px,3vw,40px);padding:clamp(28px,5vw,56px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cm-news .cm-news__box h2{font-size:clamp(26px,3vw,36px);line-height:1.55}
.cm-news .cm-news__sub{color:var(--cm-ink-soft);margin-top:6px}
.cm-news .cm-news__form{flex:1 1 380px;max-width:480px}
.cm-news .f-newsletter-form .pb-10{padding:0;margin:0}
.cm-news .f-newsletter-form__wrapper{display:flex;gap:10px;background:none;border:0;box-shadow:none;padding:0}
.cm-news .f-newsletter-form__input-wrapper{flex:1;min-width:0}
.cm-news .f-newsletter-form__input{flex:1;width:100%;min-width:0;height:auto;border:1.5px solid var(--cm-ink);background:var(--cm-paper);border-radius:999px;padding:15px 20px;font:15px/normal var(--cm-f-body);color:var(--cm-ink);box-shadow:none}
.cm-news .f-newsletter-form__input::placeholder{color:#757575;opacity:1}
.cm-sec.cm-news .f-newsletter-form .f-newsletter-form__wrapper .f-newsletter-form__button{position:static;right:auto;top:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;height:auto;min-height:0;width:auto;font:600 15.5px/1 var(--cm-f-body);letter-spacing:0;text-transform:none;border-radius:999px;padding:17px 28px;border:1.5px solid var(--cm-ink);background:var(--cm-ink);color:var(--cm-paper);margin:0;transform:none}
.cm-sec.cm-news .f-newsletter-form .f-newsletter-form__wrapper .f-newsletter-form__button:hover{background:#343858;color:var(--cm-paper)}
.cm-news .f-newsletter-form__error-text{margin-top:8px;font-size:14px}

@media (max-width:860px){
  .cm-hero .cm-hero__grid{grid-template-columns:1fr}
  .cm-hero .cm-hero__art{order:-1}
  .cm-hero .cm-hero__frame{max-width:none;aspect-ratio:1/1;border-radius:160px 160px var(--cm-r-tile) var(--cm-r-tile)}
  .cm-hero .cm-hero__note{left:12px;bottom:12px}
  .cm-hero .cm-ctas .cm-btn{flex:1 1 100%}
  .cm-cards .cm-cards__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-cards .cm-card h3{font-size:18px}
  .cm-cards .cm-card__meta{flex-direction:column;gap:2px}
  .cm-how .cm-how__box{grid-template-columns:1fr}
  .cm-strip .cm-strip__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--cm-gutter));padding-inline:var(--cm-gutter);padding-bottom:6px}
  .cm-strip figure{flex:0 0 72%;scroll-snap-align:start}
  .cm-occ .cm-occ__grid{grid-template-columns:1fr}
  .cm-occ .cm-occ__card{aspect-ratio:16/11}
  .cm-promise .cm-promise__row{grid-template-columns:1fr}
  .cm-promise .cm-promise__item + .cm-promise__item,.cm-promise .cm-promise__row > [class^="section_block_id_"] + [class^="section_block_id_"] > .cm-promise__item{border-left:0;border-top:1px solid var(--cm-line)}
  .cm-faq .cm-faq__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cm-news .f-newsletter-form__wrapper{flex-wrap:wrap}
  .cm-news .f-newsletter-form__input-wrapper{flex:1 1 100%}
  .cm-sec.cm-news .f-newsletter-form .f-newsletter-form__wrapper .f-newsletter-form__button{flex:1 1 100%;width:100%}
}
