/* ═══ C10 · Smoky mauve. A grown-up, muted mauve (grey in it, not pink), deep aubergine type,
   and the photograph as the room itself: it runs out to the right and top edges and only
   dissolves towards the words, so there is no frame and no box. ═══ */
.cC10 { --sm-0: #ddd0d1; --sm-1: #cbb8bb; --sm-2: #b39ca1; --sm-3: #8f767c; --ink-a: #2e2226; --ink-soft: rgb(46 34 38 / 0.74); --aub: #3b2a31; --cream-a: #f6efea; }

/* header in the same colour as the wall, no line: it simply belongs */
.cC10 .site, .cC10 .site.is-solid { background: rgb(221 208 209 / 0.92); color: var(--ink-a); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cC10 .site .btn--ghost { --btn-fg: var(--ink-a); --btn-bd: rgb(46 34 38 / 0.3); }
.cC10 .site .btn--ghost:hover { --btn-bg: var(--aub); --btn-fg: var(--cream-a); --btn-bd: var(--aub); }

.cC10 .flow, .cC10 .whero { background: transparent; }
.cC10 .flow { background: linear-gradient(180deg, var(--sm-0) 0%, var(--sm-1) 40%, var(--sm-2) 100%); }
.cC10::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* the photograph: right and top edges run off the page; a long, soft dissolve to the left and a short one at the foot */
.cC10 .whero--soft .whero__photo { left: 30%; right: 0; top: 0; bottom: 0; z-index: 1; }
.cC10 .whero--soft .whero__photo img { object-position: 60% 22%; }
.cC10 .whero__sharp { animation: softIn 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.18) 12%, rgb(0 0 0 / 0.55) 24%, rgb(0 0 0 / 0.9) 36%, #000 44%), linear-gradient(0deg, transparent 0%, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.18) 12%, rgb(0 0 0 / 0.55) 24%, rgb(0 0 0 / 0.9) 36%, #000 44%), linear-gradient(0deg, transparent 0%, #000 16%);
  mask-composite: intersect; }
/* a breath of the wall colour laid over the dissolving part, so the meadow melts into mauve rather than fading to grey */
.cC10 .whero__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(203 184 187 / 0.9) 0%, rgb(203 184 187 / 0.55) 18%, rgb(203 184 187 / 0.12) 34%, transparent 46%); }

/* type: modern, light, deep aubergine on smoky mauve */
.cC10 .whero--soft .whero__copy { max-width: 31rem; }
.cC10 .whero__title { font-family: "Jost", ui-sans-serif, system-ui, sans-serif; font-weight: 300; letter-spacing: -0.02em; color: var(--ink-a);
  font-size: clamp(2.6rem, 1rem + 4vw, 5.2rem); line-height: 1; }
.cC10 .whero__title em { font-style: normal; font-weight: 400; font-size: 0.32em; letter-spacing: 0.6em; text-transform: uppercase; color: var(--sm-3); margin-top: 1em; padding-left: 0.1em; }
.cC10 .whero__place { font-family: "Jost", sans-serif; color: var(--ink-soft); letter-spacing: 0.34em; }
.cC10 .whero__lede { font-family: "Jost", sans-serif; font-style: normal; font-weight: 300; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.28rem); line-height: 1.65; max-width: 30ch; color: var(--ink-soft); margin-top: 2rem; }
.cC10 .whero__ways { font-family: "Jost", sans-serif; color: var(--ink-a); font-weight: 400; letter-spacing: 0.08em; font-size: 0.8rem; }
.cC10 .whero .emblem { background: var(--ink-a); opacity: 0.8; filter: none; }
.cC10 .whero__btn { font-family: "Jost", sans-serif; font-weight: 500; background: var(--aub); color: var(--cream-a); letter-spacing: 0.24em; box-shadow: 0 16px 34px -18px rgb(40 24 30 / 0.7); }
.cC10 .whero__btn:hover { background: #2a1d22; }
.cC10 .whero__link { font-family: "Jost", sans-serif; color: var(--ink-a); text-decoration-color: rgb(46 34 38 / 0.35); }

/* events continue on the same wall */
.cC10 .flow .events--home .lede__title { color: var(--ink-a); }
.cC10 .flow .events--home .lede__text { color: var(--ink-soft); }
.cC10 .flow .events__more .btn { --btn-fg: var(--ink-a); --btn-bd: rgb(46 34 38 / 0.35); }

@media (max-width: 61.99rem) {
  .cC10 .whero--soft .whero__photo { left: auto; right: auto; top: auto; bottom: auto; margin-top: 4.4rem; }
  .cC10 .whero__sharp { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%); }
  .cC10 .whero__photo::after { background: linear-gradient(0deg, rgb(203 184 187 / 0.9) 0%, transparent 30%); }
}
.cC10 .whero__photo::after { content: none; }

/* header: deep aubergine bar with cream type */
.cC10 .site, .cC10 .site.is-solid { background: rgb(54 34 44 / 0.96); color: var(--cream-a); box-shadow: none; }
.cC10 .site .btn--ghost { --btn-fg: var(--cream-a); --btn-bd: rgb(246 239 234 / 0.4); }
.cC10 .site .btn--ghost:hover { --btn-bg: var(--cream-a); --btn-fg: #36222c; --btn-bd: var(--cream-a); }
.cC10 .drawer { background: #36222c; }

/* booking: a soft sage tint instead of cream */
.cC10 .book { background: linear-gradient(180deg, #e2eae5 0%, #d8e3dd 100%); }
.cC10 .book .opt label, .cC10 .book .fld { background: rgb(255 255 255 / 0.7); border-color: rgb(80 110 100 / 0.22); }
.cC10 .book .opt input:checked + label { background: #c4d6cf; border-color: #6f8a7f; }

/* booking: warm matcha latte instead of cool sage */
.cC10 .book { background: linear-gradient(180deg, #e6e7cf 0%, #d9ddb9 100%); }
.cC10 .book .opt label, .cC10 .book .fld { background: rgb(255 253 244 / 0.72); border-color: rgb(110 118 60 / 0.25); }
.cC10 .book .opt input:checked + label { background: #c9d0a0; border-color: #7f8a4e; }
.cC10 .book .opt input:checked + label::before { border-color: #5e6838; box-shadow: inset 0 0 0 3px #5e6838; }

/* booking choices and button as panes of glass: clear body, curved sheen, bright rim, a glint along the lower edge */
.cC10 .book { --glass-rim: rgb(255 255 255 / 0.85); --glass-edge: rgb(110 125 100 / 0.32); }
.cC10 .book .opt label, .cC10 .book .fld {
  border: 1px solid var(--glass-rim); border-radius: 0.9rem; color: #33292c;
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / 0.95), transparent) 50% calc(100% - 1px) / 60% 1px no-repeat,
    radial-gradient(130% 70% at 22% -18%, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0.18) 55%, transparent 56%),
    linear-gradient(165deg, rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0.16) 50%, rgb(255 255 255 / 0.26) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  box-shadow: 0 0 0 1px var(--glass-edge), inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 0 rgb(214 246 236 / 0.7), 0 14px 26px -18px rgb(60 68 30 / 0.55);
  transition: box-shadow 0.5s ease, background-color 0.5s ease, transform 0.5s ease; }
.cC10 .book .opt label:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(110 125 100 / 0.45), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(214 246 236 / 0.85), 0 18px 30px -18px rgb(60 68 30 / 0.6); }
.cC10 .book .opt label::before { border-color: rgb(51 41 44 / 0.45); background: rgb(255 255 255 / 0.5); }
.cC10 .book .opt input:checked + label {
  background-color: rgb(186 198 132 / 0.45);
  box-shadow: 0 0 0 1px rgb(95 108 56 / 0.6), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(214 246 236 / 0.9), 0 16px 30px -18px rgb(60 68 30 / 0.65); }
.cC10 .book .opt input:checked + label::before { border-color: #4f5a2c; box-shadow: inset 0 0 0 3px #4f5a2c; background: rgb(255 255 255 / 0.7); }
.cC10 .book .fld:focus { box-shadow: 0 0 0 1px rgb(95 108 56 / 0.7), inset 0 1px 0 #fff, 0 14px 26px -18px rgb(60 68 30 / 0.55); }

/* the reserve button: a glass pill, larger, letters in aubergine */
.cC10 .book .q__nav .btn--solid { position: relative; min-height: 3.8rem; padding: 0 3rem; border-radius: 999px; border: 1px solid var(--glass-rim);
  color: #3b2a31; font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: 0.26em; font-size: 0.78rem; text-transform: uppercase;
  background:
    linear-gradient(90deg, transparent, #fff, transparent) 50% calc(100% - 1px) / 56% 1px no-repeat,
    radial-gradient(120% 80% at 25% -30%, rgb(255 255 255 / 0.7) 0%, rgb(255 255 255 / 0.2) 55%, transparent 56%),
    linear-gradient(165deg, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0.18) 50%, rgb(255 255 255 / 0.3) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 0 0 1px rgb(110 125 100 / 0.4), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(214 246 236 / 0.9), 0 20px 36px -20px rgb(60 68 30 / 0.7);
  transition: transform 0.5s ease, box-shadow 0.5s ease; }
.cC10 .book .q__nav .btn--solid:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(95 108 56 / 0.6), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(214 246 236 / 1), 0 26px 40px -20px rgb(60 68 30 / 0.75); }

/* even more glass: clearer body, a crisp curved sheen, bright double rim with a cool aqua edge, glints top and bottom */
.cC10 .book .opt label, .cC10 .book .fld, .cC10 .book .q__nav .btn--solid {
  border: 1px solid rgb(255 255 255 / 0.95);
  background:
    linear-gradient(90deg, transparent 8%, rgb(255 255 255 / 1) 50%, transparent 92%) 50% calc(100% - 1px) / 70% 1.5px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / 0.9), transparent) 30% 1px / 40% 1px no-repeat,
    radial-gradient(170% 95% at 8% -45%, rgb(255 255 255 / 0.62) 0 57%, rgb(255 255 255 / 0) 57.6%),
    linear-gradient(170deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0.08) 55%, rgb(220 250 240 / 0.22) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(1.06); backdrop-filter: blur(14px) saturate(1.6) brightness(1.06);
  box-shadow:
    0 0 0 1px rgb(120 140 125 / 0.42),
    inset 0 0 0 1px rgb(205 255 240 / 0.35),
    inset 0 2px 1px rgb(255 255 255 / 0.85),
    inset 0 -3px 8px rgb(205 250 235 / 0.4),
    0 2px 4px rgb(50 60 30 / 0.1),
    0 20px 32px -20px rgb(50 60 30 / 0.6); }
.cC10 .book .opt label:hover, .cC10 .book .q__nav .btn--solid:hover {
  box-shadow: 0 0 0 1px rgb(110 130 112 / 0.55), inset 0 0 0 1px rgb(205 255 240 / 0.5), inset 0 2px 1px #fff, inset 0 -3px 10px rgb(205 250 235 / 0.55), 0 3px 6px rgb(50 60 30 / 0.12), 0 26px 38px -20px rgb(50 60 30 / 0.65); }
.cC10 .book .opt label:active, .cC10 .book .q__nav .btn--solid:active { transform: translateY(1px) scale(0.995); transition-duration: 0.12s; }
.cC10 .book .opt input:checked + label {
  background-color: rgb(176 190 116 / 0.42);
  box-shadow: 0 0 0 1px rgb(90 104 50 / 0.65), inset 0 0 0 1px rgb(220 255 210 / 0.45), inset 0 2px 1px #fff, inset 0 -3px 10px rgb(230 255 210 / 0.5), 0 3px 6px rgb(50 60 30 / 0.14), 0 22px 34px -20px rgb(50 60 30 / 0.7); }

/* booking wall: a soft, warm sage like a plastered wall in morning light (light falling from the upper left) */
.cC10 .book { background:
  radial-gradient(70% 90% at 32% 18%, rgb(222 228 210 / 0.95) 0%, rgb(222 228 210 / 0) 70%),
  radial-gradient(60% 80% at 100% 100%, rgb(122 134 112 / 0.35) 0%, transparent 70%),
  linear-gradient(170deg, #c9d0bb 0%, #b6bfa6 55%, #a6b096 100%); }
.cC10 .book .opt input:checked + label { background-color: rgb(150 166 126 / 0.42); }
.cC10 .book .opt input:checked + label::before { border-color: #4c5a3c; box-shadow: inset 0 0 0 3px #4c5a3c; }

/* ═══ Booking as one frosted card over the mountain at dusk ═══ */
.cC10 .book--card { position: relative; isolation: isolate; overflow: hidden; background: #6f6660; padding-block: clamp(4.5rem, 9vw, 7rem); }
.book__scene { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(150 120 132 / 0.55) 0%, rgb(170 140 140 / 0.25) 40%, rgb(70 60 50 / 0.45) 100%),
    url(../img/book-bg.jpg) 50% 38% / cover no-repeat;
  filter: saturate(0.7) sepia(0.18) blur(1.5px); transform: scale(1.03); }
.cC10 .book--card .book__in { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.cC10 .book--card .book__title { color: #fff; font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); text-shadow: 0 2px 30px rgb(40 30 35 / 0.35); }
.cC10 .book--card .book__aside { color: rgb(255 255 255 / 0.85); margin-top: 0.6rem; }
.cC10 .book--card .book__aside a { color: #fff; }
.cC10 .book--card .book__form { width: min(100%, 25rem); }

.bk-wrap { display: flex; flex-direction: column; align-items: center; }
.bk { position: relative; width: 100%; padding: 1.1rem 1.1rem 1.6rem; border-radius: 2.4rem; text-align: left; color: #fff;
  background: linear-gradient(180deg, rgb(120 104 108 / 0.42), rgb(64 52 56 / 0.5));
  -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / 0.22); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 40px 80px -34px rgb(25 18 22 / 0.65); }
.bk::before { content: ""; position: absolute; left: 50%; top: 0.5rem; width: 2.2rem; height: 3px; translate: -50% 0; border-radius: 3px; background: rgb(255 255 255 / 0.35); }
.bk__img { position: relative; margin: 0.6rem 0 0; aspect-ratio: 16 / 10.5; border-radius: 1.8rem; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.bk__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.5s ease; }
.bk__chips { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bk__chips span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.75rem; border-radius: 999px; font-size: 0.74rem; color: #fff;
  background: rgb(60 48 52 / 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); }
.bk svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk__h { margin: 1.4rem 0.9rem 0.7rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgb(255 255 255 / 0.3); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.01em; }
.bk__pick { position: relative; display: block; margin: 0.4rem 0.9rem 0.7rem; }
.bk__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bk__pick select { width: 100%; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; padding: 0.85rem 2.8rem 0.85rem 1.2rem; font: inherit; font-size: 0.95rem; color: #fff; cursor: pointer;
  background: rgb(40 30 34 / 0.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); text-overflow: ellipsis; }
.bk__pick select:focus-visible { outline: 2px solid rgb(255 255 255 / 0.7); outline-offset: 2px; }
.bk__pick select option { color: #2e2226; }
.bk__pick i { position: absolute; right: 1.15rem; top: 50%; width: 0.55rem; height: 0.55rem; translate: 0 -70%; rotate: 45deg; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; pointer-events: none; }
.bk__row { display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0.9rem; font-size: 0.92rem; color: rgb(255 255 255 / 0.92); }
.bk__fld { display: block; width: calc(100% - 1.8rem); margin: 0.7rem 0.9rem 0; padding: 0.85rem 1.2rem; border-radius: 999px; font: inherit; font-size: 0.92rem; color: #fff;
  background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.28); }
.bk__fld::placeholder { color: rgb(255 255 255 / 0.62); }
.bk__fld:focus { outline: none; border-color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.16); }
.bk__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0.9rem; font-size: 0.95rem; }
.bk__total b { font-weight: 500; font-size: 1.1rem; }
.bk__note { margin: 0.4rem 0.9rem 0; font-size: 0.78rem; color: rgb(255 255 255 / 0.7); }
.bk__err { margin: 0.5rem 0.9rem 0; font-size: 0.82rem; color: #ffe1e1; }
.bk__book { margin-top: 1.3rem; min-width: 9rem; padding: 0.95rem 2.8rem; border: 0; border-radius: 999px; background: #fff; color: #2e2226; font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgb(25 18 22 / 0.6); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.bk__book:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgb(25 18 22 / 0.65); }
.bk__book:active { transform: translateY(1px) scale(0.99); transition-duration: 0.1s; }
.bk--done { padding: 2rem 1.6rem; }
.bk--done h3 { color: #fff; } .bk--done p { color: rgb(255 255 255 / 0.85); } .bk--done a { color: #fff; }
.book__scene { background:
    linear-gradient(180deg, rgb(196 150 166 / 0.6) 0%, rgb(214 168 160 / 0.32) 42%, rgb(84 66 60 / 0.45) 100%),
    url(../img/book-bg.jpg) 50% 38% / cover no-repeat; filter: saturate(0.72) sepia(0.2) blur(1.5px); }

/* new meadow photograph: both faces sit further left, so the dissolve starts a little later and finishes sooner */
@media (min-width: 62rem) {
  .cC10 .whero--soft .whero__photo { left: 36%; }
  .cC10 .whero--soft .whero__photo img { object-position: 50% 20%; }
  .cC10 .whero__sharp {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.2) 7%, rgb(0 0 0 / 0.6) 15%, rgb(0 0 0 / 0.92) 23%, #000 28%), linear-gradient(0deg, transparent 0%, #000 16%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.2) 7%, rgb(0 0 0 / 0.6) 15%, rgb(0 0 0 / 0.92) 23%, #000 28%), linear-gradient(0deg, transparent 0%, #000 16%); }
}

/* hero-joy (landscape, hands joined): the right side of the picture, so the laughing face and the
   mountains stay sharp and the soft dissolve on the left passes over arm and meadow, not over a face */
.cC10 .whero--soft .whero__photo img { object-position: 100% 50%; }
@media (min-width: 62rem) { .cC10 .whero--soft .whero__photo img { object-position: 100% 50%; } }

/* hero-garden (Maja reaching for the rose, her mum beside her): faces left of centre, so the
   dissolve finishes a touch earlier; the picture is placed so faces, rose and mountain all show */
.cC10 .whero--soft .whero__photo img { object-position: 50% 33%; }
@media (min-width: 62rem) {
  .cC10 .whero--soft .whero__photo img { object-position: 50% 33%; }
  .cC10 .whero__sharp {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.2) 6%, rgb(0 0 0 / 0.6) 13%, rgb(0 0 0 / 0.92) 19%, #000 24%), linear-gradient(0deg, transparent 0%, #000 16%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.2) 6%, rgb(0 0 0 / 0.6) 13%, rgb(0 0 0 / 0.92) 19%, #000 24%), linear-gradient(0deg, transparent 0%, #000 16%); }
}
.cC10 .whero--soft .whero__photo img { object-position: 50% 16%; }
@media (min-width: 62rem) { .cC10 .whero--soft .whero__photo img { object-position: 50% 16%; } }

/* hero-grass (lying in the meadow, the Wilder Kaiser behind): both faces sit in the left half of the
   picture, so it is anchored left and the dissolve finishes sooner, keeping both faces clear */
.cC10 .whero--soft .whero__photo img { object-position: 15% 50%; }
@media (min-width: 62rem) {
  .cC10 .whero--soft .whero__photo img { object-position: 0% 50%; }
  .cC10 .whero__sharp {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.25) 5%, rgb(0 0 0 / 0.65) 11%, rgb(0 0 0 / 0.93) 16%, #000 20%), linear-gradient(0deg, transparent 0%, #000 16%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.25) 5%, rgb(0 0 0 / 0.65) 11%, rgb(0 0 0 / 0.93) 16%, #000 20%), linear-gradient(0deg, transparent 0%, #000 16%); }
}

/* ═══ Hero photograph, v2: straightened, centred, and dissolving in layers.
   A blurred copy underneath fades out slowly, the sharp copy fades out sooner, so the picture
   passes from sharp to soft to colour, the way a lens does, with no visible edge. ═══ */
.cC10 .whero--soft .hp { left: 36%; right: 0; top: 0; bottom: 0; overflow: visible; }
.cC10 .whero--soft .hp .hp__layer { position: absolute; inset: 0; overflow: hidden; opacity: 0; animation: hpIn 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; }
.cC10 .whero--soft .hp .hp__blur { animation-delay: 0s; }
.cC10 .whero--soft .hp .hp__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; display: block;
  transform-origin: 40% 55%; transform: translateX(11%) rotate(-1.7deg) scale(1.07); }
.cC10 .whero--soft .hp .hp__blur img { filter: blur(22px) saturate(1.05) brightness(1.18); transform: translateX(11%) rotate(-1.7deg) scale(1.14); }
.cC10 .whero--soft .hp .hp__sharp { -webkit-mask-image: linear-gradient(90deg, transparent 10%, rgb(0 0 0 / 0.003) 12.4%, rgb(0 0 0 / 0.023) 14.9%, rgb(0 0 0 / 0.069) 17.3%, rgb(0 0 0 / 0.145) 19.7%, rgb(0 0 0 / 0.246) 22.1%, rgb(0 0 0 / 0.368) 24.6%, rgb(0 0 0 / 0.500) 27.0%, rgb(0 0 0 / 0.632) 29.4%, rgb(0 0 0 / 0.754) 31.9%, rgb(0 0 0 / 0.855) 34.3%, rgb(0 0 0 / 0.931) 36.7%, rgb(0 0 0 / 0.977) 39.1%, rgb(0 0 0 / 0.997) 41.6%, #000 44%), linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 2.0%, rgb(0 0 0 / 0.058) 4.0%, rgb(0 0 0 / 0.163) 6.0%, rgb(0 0 0 / 0.317) 8.0%, rgb(0 0 0 / 0.500) 10.0%, rgb(0 0 0 / 0.683) 12.0%, rgb(0 0 0 / 0.837) 14.0%, rgb(0 0 0 / 0.942) 16.0%, rgb(0 0 0 / 0.991) 18.0%, #000 20%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 10%, rgb(0 0 0 / 0.003) 12.4%, rgb(0 0 0 / 0.023) 14.9%, rgb(0 0 0 / 0.069) 17.3%, rgb(0 0 0 / 0.145) 19.7%, rgb(0 0 0 / 0.246) 22.1%, rgb(0 0 0 / 0.368) 24.6%, rgb(0 0 0 / 0.500) 27.0%, rgb(0 0 0 / 0.632) 29.4%, rgb(0 0 0 / 0.754) 31.9%, rgb(0 0 0 / 0.855) 34.3%, rgb(0 0 0 / 0.931) 36.7%, rgb(0 0 0 / 0.977) 39.1%, rgb(0 0 0 / 0.997) 41.6%, #000 44%), linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 2.0%, rgb(0 0 0 / 0.058) 4.0%, rgb(0 0 0 / 0.163) 6.0%, rgb(0 0 0 / 0.317) 8.0%, rgb(0 0 0 / 0.500) 10.0%, rgb(0 0 0 / 0.683) 12.0%, rgb(0 0 0 / 0.837) 14.0%, rgb(0 0 0 / 0.942) 16.0%, rgb(0 0 0 / 0.991) 18.0%, #000 20%); mask-composite: intersect; }
.cC10 .whero--soft .hp .hp__blur { -webkit-mask-image: linear-gradient(90deg, transparent 3%, rgb(0 0 0 / 0.003) 6.9%, rgb(0 0 0 / 0.023) 10.9%, rgb(0 0 0 / 0.069) 14.8%, rgb(0 0 0 / 0.145) 18.7%, rgb(0 0 0 / 0.246) 22.6%, rgb(0 0 0 / 0.368) 26.6%, rgb(0 0 0 / 0.500) 30.5%, rgb(0 0 0 / 0.632) 34.4%, rgb(0 0 0 / 0.754) 38.4%, rgb(0 0 0 / 0.855) 42.3%, rgb(0 0 0 / 0.931) 46.2%, rgb(0 0 0 / 0.977) 50.1%, rgb(0 0 0 / 0.997) 54.1%, #000 58%), linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 3.2%, rgb(0 0 0 / 0.058) 6.4%, rgb(0 0 0 / 0.163) 9.6%, rgb(0 0 0 / 0.317) 12.8%, rgb(0 0 0 / 0.500) 16.0%, rgb(0 0 0 / 0.683) 19.2%, rgb(0 0 0 / 0.837) 22.4%, rgb(0 0 0 / 0.942) 25.6%, rgb(0 0 0 / 0.991) 28.8%, #000 32%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 3%, rgb(0 0 0 / 0.003) 6.9%, rgb(0 0 0 / 0.023) 10.9%, rgb(0 0 0 / 0.069) 14.8%, rgb(0 0 0 / 0.145) 18.7%, rgb(0 0 0 / 0.246) 22.6%, rgb(0 0 0 / 0.368) 26.6%, rgb(0 0 0 / 0.500) 30.5%, rgb(0 0 0 / 0.632) 34.4%, rgb(0 0 0 / 0.754) 38.4%, rgb(0 0 0 / 0.855) 42.3%, rgb(0 0 0 / 0.931) 46.2%, rgb(0 0 0 / 0.977) 50.1%, rgb(0 0 0 / 0.997) 54.1%, #000 58%), linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 3.2%, rgb(0 0 0 / 0.058) 6.4%, rgb(0 0 0 / 0.163) 9.6%, rgb(0 0 0 / 0.317) 12.8%, rgb(0 0 0 / 0.500) 16.0%, rgb(0 0 0 / 0.683) 19.2%, rgb(0 0 0 / 0.837) 22.4%, rgb(0 0 0 / 0.942) 25.6%, rgb(0 0 0 / 0.991) 28.8%, #000 32%); mask-composite: intersect; }
@keyframes hpIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 61.99rem) {
  .cC10 .whero--soft .hp { left: auto; right: auto; top: auto; bottom: auto; height: min(70svh, 36rem); margin-top: 4.4rem; }
  .cC10 .whero--soft .hp .hp__sharp { -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 3.4%, rgb(0 0 0 / 0.058) 6.8%, rgb(0 0 0 / 0.163) 10.2%, rgb(0 0 0 / 0.317) 13.6%, rgb(0 0 0 / 0.500) 17.0%, rgb(0 0 0 / 0.683) 20.4%, rgb(0 0 0 / 0.837) 23.8%, rgb(0 0 0 / 0.942) 27.2%, rgb(0 0 0 / 0.991) 30.6%, #000 34%); mask-image: linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 3.4%, rgb(0 0 0 / 0.058) 6.8%, rgb(0 0 0 / 0.163) 10.2%, rgb(0 0 0 / 0.317) 13.6%, rgb(0 0 0 / 0.500) 17.0%, rgb(0 0 0 / 0.683) 20.4%, rgb(0 0 0 / 0.837) 23.8%, rgb(0 0 0 / 0.942) 27.2%, rgb(0 0 0 / 0.991) 30.6%, #000 34%); }
  .cC10 .whero--soft .hp .hp__blur { -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 4.6%, rgb(0 0 0 / 0.058) 9.2%, rgb(0 0 0 / 0.163) 13.8%, rgb(0 0 0 / 0.317) 18.4%, rgb(0 0 0 / 0.500) 23.0%, rgb(0 0 0 / 0.683) 27.6%, rgb(0 0 0 / 0.837) 32.2%, rgb(0 0 0 / 0.942) 36.8%, rgb(0 0 0 / 0.991) 41.4%, #000 46%); mask-image: linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.009) 4.6%, rgb(0 0 0 / 0.058) 9.2%, rgb(0 0 0 / 0.163) 13.8%, rgb(0 0 0 / 0.317) 18.4%, rgb(0 0 0 / 0.500) 23.0%, rgb(0 0 0 / 0.683) 27.6%, rgb(0 0 0 / 0.837) 32.2%, rgb(0 0 0 / 0.942) 36.8%, rgb(0 0 0 / 0.991) 41.4%, #000 46%); }
  .cC10 .whero--soft .hp .hp__layer img { object-position: 18% 50%; transform: rotate(-1.7deg) scale(1.08); }
  .cC10 .whero--soft .hp .hp__blur img { transform: rotate(-1.7deg) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .cC10 .whero--soft .hp .hp__layer { animation: none; opacity: 1; } }

/* ═══ Hero photograph v3: level mountains, and no box. The picture is shaped by a large soft oval
   (eased in every direction) that bleeds off the right edge, instead of a straight left edge. ═══ */
@media (min-width: 62rem) {
  .cC10 .whero--soft .hp .hp__layer img { transform: translateX(11%) rotate(-3deg) scale(1.1); }
  .cC10 .whero--soft .hp .hp__blur img { transform: translateX(11%) rotate(-3deg) scale(1.17); }
  .cC10 .whero--soft .hp .hp__sharp { -webkit-mask-image: radial-gradient(ellipse 60% 60% at 76% 40%, #000 34.0%, rgb(0 0 0 / 0.998) 38.1%, rgb(0 0 0 / 0.984) 42.2%, rgb(0 0 0 / 0.951) 46.4%, rgb(0 0 0 / 0.896) 50.5%, rgb(0 0 0 / 0.820) 54.6%, rgb(0 0 0 / 0.725) 58.8%, rgb(0 0 0 / 0.616) 62.9%, rgb(0 0 0 / 0.500) 67.0%, rgb(0 0 0 / 0.384) 71.1%, rgb(0 0 0 / 0.275) 75.2%, rgb(0 0 0 / 0.180) 79.4%, rgb(0 0 0 / 0.104) 83.5%, rgb(0 0 0 / 0.049) 87.6%, rgb(0 0 0 / 0.016) 91.8%, rgb(0 0 0 / 0.002) 95.9%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 76% 40%, #000 34.0%, rgb(0 0 0 / 0.998) 38.1%, rgb(0 0 0 / 0.984) 42.2%, rgb(0 0 0 / 0.951) 46.4%, rgb(0 0 0 / 0.896) 50.5%, rgb(0 0 0 / 0.820) 54.6%, rgb(0 0 0 / 0.725) 58.8%, rgb(0 0 0 / 0.616) 62.9%, rgb(0 0 0 / 0.500) 67.0%, rgb(0 0 0 / 0.384) 71.1%, rgb(0 0 0 / 0.275) 75.2%, rgb(0 0 0 / 0.180) 79.4%, rgb(0 0 0 / 0.104) 83.5%, rgb(0 0 0 / 0.049) 87.6%, rgb(0 0 0 / 0.016) 91.8%, rgb(0 0 0 / 0.002) 95.9%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .cC10 .whero--soft .hp .hp__blur { -webkit-mask-image: radial-gradient(ellipse 74% 70% at 76% 42%, #000 20.0%, rgb(0 0 0 / 0.998) 25.0%, rgb(0 0 0 / 0.984) 30.0%, rgb(0 0 0 / 0.951) 35.0%, rgb(0 0 0 / 0.896) 40.0%, rgb(0 0 0 / 0.820) 45.0%, rgb(0 0 0 / 0.725) 50.0%, rgb(0 0 0 / 0.616) 55.0%, rgb(0 0 0 / 0.500) 60.0%, rgb(0 0 0 / 0.384) 65.0%, rgb(0 0 0 / 0.275) 70.0%, rgb(0 0 0 / 0.180) 75.0%, rgb(0 0 0 / 0.104) 80.0%, rgb(0 0 0 / 0.049) 85.0%, rgb(0 0 0 / 0.016) 90.0%, rgb(0 0 0 / 0.002) 95.0%, transparent 100%); mask-image: radial-gradient(ellipse 74% 70% at 76% 42%, #000 20.0%, rgb(0 0 0 / 0.998) 25.0%, rgb(0 0 0 / 0.984) 30.0%, rgb(0 0 0 / 0.951) 35.0%, rgb(0 0 0 / 0.896) 40.0%, rgb(0 0 0 / 0.820) 45.0%, rgb(0 0 0 / 0.725) 50.0%, rgb(0 0 0 / 0.616) 55.0%, rgb(0 0 0 / 0.500) 60.0%, rgb(0 0 0 / 0.384) 65.0%, rgb(0 0 0 / 0.275) 70.0%, rgb(0 0 0 / 0.180) 75.0%, rgb(0 0 0 / 0.104) 80.0%, rgb(0 0 0 / 0.049) 85.0%, rgb(0 0 0 / 0.016) 90.0%, rgb(0 0 0 / 0.002) 95.0%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .cC10 .whero--soft .hp { left: 30%; }
}
@media (max-width: 61.99rem) {
  .cC10 .whero--soft .hp .hp__layer img { transform: rotate(-3deg) scale(1.12); }
  .cC10 .whero--soft .hp .hp__blur img { transform: rotate(-3deg) scale(1.18); }
}

/* ═══ Hero photograph v4: both of you in the middle. A wider copy of the picture (extra soft forest and
   grass added on the left) gives the woman on the left real room, so the fade happens in front of her,
   not on her. Mountains levelled by 3 degrees. ═══ */
@media (min-width: 62rem) {
  .cC10 .whero--soft .hp { left: 22%; }
  .cC10 .whero--soft .hp .hp__layer img { object-position: 45% 50%; transform: rotate(-3deg) scale(1.1); transform-origin: 55% 55%; }
  .cC10 .whero--soft .hp .hp__blur img { transform: rotate(-3deg) scale(1.17); }
  .cC10 .whero--soft .hp .hp__sharp { -webkit-mask-image: radial-gradient(ellipse 76% 62% at 80% 42%, #000 62.0%, rgb(0 0 0 / 0.998) 64.1%, rgb(0 0 0 / 0.988) 66.2%, rgb(0 0 0 / 0.965) 68.3%, rgb(0 0 0 / 0.924) 70.4%, rgb(0 0 0 / 0.865) 72.6%, rgb(0 0 0 / 0.790) 74.7%, rgb(0 0 0 / 0.702) 76.8%, rgb(0 0 0 / 0.603) 78.9%, rgb(0 0 0 / 0.500) 81.0%, rgb(0 0 0 / 0.397) 83.1%, rgb(0 0 0 / 0.298) 85.2%, rgb(0 0 0 / 0.210) 87.3%, rgb(0 0 0 / 0.135) 89.4%, rgb(0 0 0 / 0.076) 91.6%, rgb(0 0 0 / 0.035) 93.7%, rgb(0 0 0 / 0.012) 95.8%, rgb(0 0 0 / 0.002) 97.9%, transparent 100%); mask-image: radial-gradient(ellipse 76% 62% at 80% 42%, #000 62.0%, rgb(0 0 0 / 0.998) 64.1%, rgb(0 0 0 / 0.988) 66.2%, rgb(0 0 0 / 0.965) 68.3%, rgb(0 0 0 / 0.924) 70.4%, rgb(0 0 0 / 0.865) 72.6%, rgb(0 0 0 / 0.790) 74.7%, rgb(0 0 0 / 0.702) 76.8%, rgb(0 0 0 / 0.603) 78.9%, rgb(0 0 0 / 0.500) 81.0%, rgb(0 0 0 / 0.397) 83.1%, rgb(0 0 0 / 0.298) 85.2%, rgb(0 0 0 / 0.210) 87.3%, rgb(0 0 0 / 0.135) 89.4%, rgb(0 0 0 / 0.076) 91.6%, rgb(0 0 0 / 0.035) 93.7%, rgb(0 0 0 / 0.012) 95.8%, rgb(0 0 0 / 0.002) 97.9%, transparent 100%); }
  .cC10 .whero--soft .hp .hp__blur { -webkit-mask-image: radial-gradient(ellipse 90% 72% at 80% 44%, #000 40.0%, rgb(0 0 0 / 0.998) 43.3%, rgb(0 0 0 / 0.988) 46.7%, rgb(0 0 0 / 0.965) 50.0%, rgb(0 0 0 / 0.924) 53.3%, rgb(0 0 0 / 0.865) 56.7%, rgb(0 0 0 / 0.790) 60.0%, rgb(0 0 0 / 0.702) 63.3%, rgb(0 0 0 / 0.603) 66.7%, rgb(0 0 0 / 0.500) 70.0%, rgb(0 0 0 / 0.397) 73.3%, rgb(0 0 0 / 0.298) 76.7%, rgb(0 0 0 / 0.210) 80.0%, rgb(0 0 0 / 0.135) 83.3%, rgb(0 0 0 / 0.076) 86.7%, rgb(0 0 0 / 0.035) 90.0%, rgb(0 0 0 / 0.012) 93.3%, rgb(0 0 0 / 0.002) 96.7%, transparent 100%); mask-image: radial-gradient(ellipse 90% 72% at 80% 44%, #000 40.0%, rgb(0 0 0 / 0.998) 43.3%, rgb(0 0 0 / 0.988) 46.7%, rgb(0 0 0 / 0.965) 50.0%, rgb(0 0 0 / 0.924) 53.3%, rgb(0 0 0 / 0.865) 56.7%, rgb(0 0 0 / 0.790) 60.0%, rgb(0 0 0 / 0.702) 63.3%, rgb(0 0 0 / 0.603) 66.7%, rgb(0 0 0 / 0.500) 70.0%, rgb(0 0 0 / 0.397) 73.3%, rgb(0 0 0 / 0.298) 76.7%, rgb(0 0 0 / 0.210) 80.0%, rgb(0 0 0 / 0.135) 83.3%, rgb(0 0 0 / 0.076) 86.7%, rgb(0 0 0 / 0.035) 90.0%, rgb(0 0 0 / 0.012) 93.3%, rgb(0 0 0 / 0.002) 96.7%, transparent 100%); }
}
@media (max-width: 61.99rem) {
  .cC10 .whero--soft .hp .hp__layer img { object-position: 50% 50%; }
}

/* a breath of the wall colour laid over the middle of the dissolve, so dark forest lifts into mauve instead of going muddy;
   it is zero at both ends of the fade, so it never forms an edge of its own */
@media (min-width: 62rem) {
  .cC10 .whero--soft .hp::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 76% 62% at 80% 42%, rgb(214 195 198 / 0) 50.0%, rgb(214 195 198 / 0.006) 52.8%, rgb(214 195 198 / 0.042) 55.6%, rgb(214 195 198 / 0.115) 58.3%, rgb(214 195 198 / 0.218) 61.1%, rgb(214 195 198 / 0.332) 63.9%, rgb(214 195 198 / 0.435) 66.7%, rgb(214 195 198 / 0.508) 69.4%, rgb(214 195 198 / 0.544) 72.2%, rgb(214 195 198 / 0.550) 75.0%, rgb(214 195 198 / 0.544) 77.8%, rgb(214 195 198 / 0.508) 80.6%, rgb(214 195 198 / 0.435) 83.3%, rgb(214 195 198 / 0.332) 86.1%, rgb(214 195 198 / 0.218) 88.9%, rgb(214 195 198 / 0.115) 91.7%, rgb(214 195 198 / 0.042) 94.4%, rgb(214 195 198 / 0.006) 97.2%, rgb(214 195 198 / 0) 100%); }
  .cC10 .whero--soft .hp .hp__blur img { filter: blur(22px) saturate(1.05) brightness(1.3); }
}

@media (min-width: 62rem) { .cC10 .whero--soft .hp .hp__blur { -webkit-mask-image: radial-gradient(ellipse 79% 70% at 80% 44%, #000 34.0%, rgb(0 0 0 / 0.998) 37.7%, rgb(0 0 0 / 0.988) 41.3%, rgb(0 0 0 / 0.965) 45.0%, rgb(0 0 0 / 0.924) 48.7%, rgb(0 0 0 / 0.865) 52.3%, rgb(0 0 0 / 0.790) 56.0%, rgb(0 0 0 / 0.702) 59.7%, rgb(0 0 0 / 0.603) 63.3%, rgb(0 0 0 / 0.500) 67.0%, rgb(0 0 0 / 0.397) 70.7%, rgb(0 0 0 / 0.298) 74.3%, rgb(0 0 0 / 0.210) 78.0%, rgb(0 0 0 / 0.135) 81.7%, rgb(0 0 0 / 0.076) 85.3%, rgb(0 0 0 / 0.035) 89.0%, rgb(0 0 0 / 0.012) 92.7%, rgb(0 0 0 / 0.002) 96.3%, transparent 100%); mask-image: radial-gradient(ellipse 79% 70% at 80% 44%, #000 34.0%, rgb(0 0 0 / 0.998) 37.7%, rgb(0 0 0 / 0.988) 41.3%, rgb(0 0 0 / 0.965) 45.0%, rgb(0 0 0 / 0.924) 48.7%, rgb(0 0 0 / 0.865) 52.3%, rgb(0 0 0 / 0.790) 56.0%, rgb(0 0 0 / 0.702) 59.7%, rgb(0 0 0 / 0.603) 63.3%, rgb(0 0 0 / 0.500) 67.0%, rgb(0 0 0 / 0.397) 70.7%, rgb(0 0 0 / 0.298) 74.3%, rgb(0 0 0 / 0.210) 78.0%, rgb(0 0 0 / 0.135) 81.7%, rgb(0 0 0 / 0.076) 85.3%, rgb(0 0 0 / 0.035) 89.0%, rgb(0 0 0 / 0.012) 92.7%, rgb(0 0 0 / 0.002) 96.3%, transparent 100%); } }
/* picture a little further right: the woman on the left moves towards the middle, the yellow flower stays at the edge */
@media (min-width: 62rem) { .cC10 .whero--soft .hp .hp__layer img { object-position: 39% 50%; } }

/* the logo above the title turns slowly on its own axis, like a coin on a silk thread */
.cC10 .whero--soft .emblem { width: 2.7rem; margin-bottom: 1.5rem; transform-origin: 50% 50%; will-change: transform;
  animation: riseIn 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards, emblemSpin 16s linear 2.7s infinite; }
@keyframes emblemSpin { from { transform: perspective(520px) rotateY(0deg); } to { transform: perspective(520px) rotateY(360deg); } }
@media (min-width: 62rem) and (max-height: 820px) { .cC10 .whero--soft .emblem { width: 2.3rem; margin-bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .cC10 .whero--soft .emblem { animation: none; opacity: 1; } }

/* ═══ Hero photograph v5: a little further out, so the yellow flower closes the picture on the right
   and the woman on the left sits nearer the middle. The sky now fades softly into the wall at the top. ═══ */
@media (min-width: 62rem) {
  .cC10 .whero--soft .hp .hp__layer img { inset: auto; left: 0; top: 17%; width: 108%; height: 83%; object-position: 0% 100%; transform-origin: 50% 60%;
    transform: rotate(-3deg) scale(1.04); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.005) 2.5%, rgb(0 0 0 / 0.035) 5.0%, rgb(0 0 0 / 0.104) 7.5%, rgb(0 0 0 / 0.210) 10.0%, rgb(0 0 0 / 0.347) 12.5%, rgb(0 0 0 / 0.500) 15.0%, rgb(0 0 0 / 0.653) 17.5%, rgb(0 0 0 / 0.790) 20.0%, rgb(0 0 0 / 0.896) 22.5%, rgb(0 0 0 / 0.965) 25.0%, rgb(0 0 0 / 0.995) 27.5%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.005) 2.5%, rgb(0 0 0 / 0.035) 5.0%, rgb(0 0 0 / 0.104) 7.5%, rgb(0 0 0 / 0.210) 10.0%, rgb(0 0 0 / 0.347) 12.5%, rgb(0 0 0 / 0.500) 15.0%, rgb(0 0 0 / 0.653) 17.5%, rgb(0 0 0 / 0.790) 20.0%, rgb(0 0 0 / 0.896) 22.5%, rgb(0 0 0 / 0.965) 25.0%, rgb(0 0 0 / 0.995) 27.5%, #000 30%); }
  .cC10 .whero--soft .hp .hp__blur img { transform: rotate(-3deg) scale(1.12); }
}
@media (min-width: 62rem) { .cC10 .whero--soft .hp .hp__layer img { top: 25%; height: 75%; left: 2%; width: 108%; } }
@media (min-width: 62rem) { .cC10 .whero--soft .hp .hp__layer img { top: 19%; height: 79%; left: 4%; } }

@media (min-width: 62rem) { .cC10 .whero--soft .hp .hp__layer img { top: 22%; height: 77%; left: 3%; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.005) 2.5%, rgb(0 0 0 / 0.035) 5.0%, rgb(0 0 0 / 0.104) 7.5%, rgb(0 0 0 / 0.210) 10.0%, rgb(0 0 0 / 0.347) 12.5%, rgb(0 0 0 / 0.500) 15.0%, rgb(0 0 0 / 0.653) 17.5%, rgb(0 0 0 / 0.790) 20.0%, rgb(0 0 0 / 0.896) 22.5%, rgb(0 0 0 / 0.965) 25.0%, rgb(0 0 0 / 0.995) 27.5%, rgb(0 0 0 / 1.000) 30.0%, rgb(0 0 0 / 0.995) 85.3%, rgb(0 0 0 / 0.965) 86.7%, rgb(0 0 0 / 0.896) 88.0%, rgb(0 0 0 / 0.790) 89.3%, rgb(0 0 0 / 0.653) 90.7%, rgb(0 0 0 / 0.500) 92.0%, rgb(0 0 0 / 0.347) 93.3%, rgb(0 0 0 / 0.210) 94.7%, rgb(0 0 0 / 0.104) 96.0%, rgb(0 0 0 / 0.035) 97.3%, rgb(0 0 0 / 0.005) 98.7%, rgb(0 0 0 / 0.000) 100.0%); mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.005) 2.5%, rgb(0 0 0 / 0.035) 5.0%, rgb(0 0 0 / 0.104) 7.5%, rgb(0 0 0 / 0.210) 10.0%, rgb(0 0 0 / 0.347) 12.5%, rgb(0 0 0 / 0.500) 15.0%, rgb(0 0 0 / 0.653) 17.5%, rgb(0 0 0 / 0.790) 20.0%, rgb(0 0 0 / 0.896) 22.5%, rgb(0 0 0 / 0.965) 25.0%, rgb(0 0 0 / 0.995) 27.5%, rgb(0 0 0 / 1.000) 30.0%, rgb(0 0 0 / 0.995) 85.3%, rgb(0 0 0 / 0.965) 86.7%, rgb(0 0 0 / 0.896) 88.0%, rgb(0 0 0 / 0.790) 89.3%, rgb(0 0 0 / 0.653) 90.7%, rgb(0 0 0 / 0.500) 92.0%, rgb(0 0 0 / 0.347) 93.3%, rgb(0 0 0 / 0.210) 94.7%, rgb(0 0 0 / 0.104) 96.0%, rgb(0 0 0 / 0.035) 97.3%, rgb(0 0 0 / 0.005) 98.7%, rgb(0 0 0 / 0.000) 100.0%); } }

@media (min-width: 62rem) { .cC10 .whero--soft .hp::after { background: radial-gradient(ellipse 76% 62% at 80% 46%, rgb(214 195 198 / 0) 42.0%, rgb(214 195 198 / 0.009) 45.2%, rgb(214 195 198 / 0.060) 48.4%, rgb(214 195 198 / 0.164) 51.7%, rgb(214 195 198 / 0.309) 54.9%, rgb(214 195 198 / 0.471) 58.1%, rgb(214 195 198 / 0.616) 61.3%, rgb(214 195 198 / 0.720) 64.6%, rgb(214 195 198 / 0.771) 67.8%, rgb(214 195 198 / 0.780) 71.0%, rgb(214 195 198 / 0.771) 74.2%, rgb(214 195 198 / 0.720) 77.4%, rgb(214 195 198 / 0.616) 80.7%, rgb(214 195 198 / 0.471) 83.9%, rgb(214 195 198 / 0.309) 87.1%, rgb(214 195 198 / 0.164) 90.3%, rgb(214 195 198 / 0.060) 93.6%, rgb(214 195 198 / 0.009) 96.8%, rgb(214 195 198 / 0) 100%); } .cC10 .whero--soft .hp .hp__blur img { filter: blur(22px) saturate(1.05) brightness(1.5); } }

/* ═══ Hero photograph v7: the same soft window, moved well to the right ═══ */
@media (min-width: 62rem) { .cC10 .whero--soft .hp { left: 32%; } }
@media (min-width: 62rem) { .cC10 .whero--soft .hp { left: 30%; } .cC10 .whero--soft .hp .hp__layer img { top: 29%; height: 71%; left: 2%; width: 108%; object-position: 12% 100%; } }

@media (min-width: 62rem) { .cC10 .whero--soft .hp { left: 31%; } .cC10 .whero--soft .hp .hp__layer img { object-position: 3% 100%; top: 27%; height: 73%; } .cC10 .whero--soft .hp::after { background: radial-gradient(ellipse 76% 62% at 80% 46%, rgb(214 195 198 / 0) 50.0%, rgb(214 195 198 / 0.006) 52.8%, rgb(214 195 198 / 0.038) 55.6%, rgb(214 195 198 / 0.105) 58.3%, rgb(214 195 198 / 0.198) 61.1%, rgb(214 195 198 / 0.302) 63.9%, rgb(214 195 198 / 0.395) 66.7%, rgb(214 195 198 / 0.462) 69.4%, rgb(214 195 198 / 0.494) 72.2%, rgb(214 195 198 / 0.500) 75.0%, rgb(214 195 198 / 0.494) 77.8%, rgb(214 195 198 / 0.462) 80.6%, rgb(214 195 198 / 0.395) 83.3%, rgb(214 195 198 / 0.302) 86.1%, rgb(214 195 198 / 0.198) 88.9%, rgb(214 195 198 / 0.105) 91.7%, rgb(214 195 198 / 0.038) 94.4%, rgb(214 195 198 / 0.006) 97.2%, rgb(214 195 198 / 0) 100%); } }

/* ═══ Hero photograph v9: more of the picture. The window is larger (taller, a little wider), the oval that shapes it is much bigger so the
   sharp part reaches further, and the dissolve is a long eased ramp on every side that touches the page. ═══ */
@media (min-width: 62rem) {
  .cC10 .whero--soft .hp { left: 24%; }
  .cC10 .whero--soft .hp .hp__layer img { top: 8%; height: 92%; left: 0; width: 108%; object-position: 34% 100%; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.002) 1.4%, rgb(0 0 0 / 0.016) 2.8%, rgb(0 0 0 / 0.049) 4.1%, rgb(0 0 0 / 0.104) 5.5%, rgb(0 0 0 / 0.180) 6.9%, rgb(0 0 0 / 0.275) 8.2%, rgb(0 0 0 / 0.384) 9.6%, rgb(0 0 0 / 0.500) 11.0%, rgb(0 0 0 / 0.616) 12.4%, rgb(0 0 0 / 0.725) 13.8%, rgb(0 0 0 / 0.820) 15.1%, rgb(0 0 0 / 0.896) 16.5%, rgb(0 0 0 / 0.951) 17.9%, rgb(0 0 0 / 0.984) 19.2%, rgb(0 0 0 / 0.998) 20.6%, rgb(0 0 0 / 1.000) 22.0%), linear-gradient(180deg, rgb(0 0 0 / 1.000) 88.0%, rgb(0 0 0 / 0.991) 89.2%, rgb(0 0 0 / 0.942) 90.4%, rgb(0 0 0 / 0.837) 91.6%, rgb(0 0 0 / 0.683) 92.8%, rgb(0 0 0 / 0.500) 94.0%, rgb(0 0 0 / 0.317) 95.2%, rgb(0 0 0 / 0.163) 96.4%, rgb(0 0 0 / 0.058) 97.6%, rgb(0 0 0 / 0.009) 98.8%, rgb(0 0 0 / 0.000) 100.0%); mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.002) 1.4%, rgb(0 0 0 / 0.016) 2.8%, rgb(0 0 0 / 0.049) 4.1%, rgb(0 0 0 / 0.104) 5.5%, rgb(0 0 0 / 0.180) 6.9%, rgb(0 0 0 / 0.275) 8.2%, rgb(0 0 0 / 0.384) 9.6%, rgb(0 0 0 / 0.500) 11.0%, rgb(0 0 0 / 0.616) 12.4%, rgb(0 0 0 / 0.725) 13.8%, rgb(0 0 0 / 0.820) 15.1%, rgb(0 0 0 / 0.896) 16.5%, rgb(0 0 0 / 0.951) 17.9%, rgb(0 0 0 / 0.984) 19.2%, rgb(0 0 0 / 0.998) 20.6%, rgb(0 0 0 / 1.000) 22.0%), linear-gradient(180deg, rgb(0 0 0 / 1.000) 88.0%, rgb(0 0 0 / 0.991) 89.2%, rgb(0 0 0 / 0.942) 90.4%, rgb(0 0 0 / 0.837) 91.6%, rgb(0 0 0 / 0.683) 92.8%, rgb(0 0 0 / 0.500) 94.0%, rgb(0 0 0 / 0.317) 95.2%, rgb(0 0 0 / 0.163) 96.4%, rgb(0 0 0 / 0.058) 97.6%, rgb(0 0 0 / 0.009) 98.8%, rgb(0 0 0 / 0.000) 100.0%); }
  .cC10 .whero--soft .hp .hp__sharp { -webkit-mask-image: radial-gradient(ellipse 92% 78% at 78% 50%, #000 52.0%, rgb(0 0 0 / 0.998) 54.7%, rgb(0 0 0 / 0.988) 57.3%, rgb(0 0 0 / 0.965) 60.0%, rgb(0 0 0 / 0.924) 62.7%, rgb(0 0 0 / 0.865) 65.3%, rgb(0 0 0 / 0.790) 68.0%, rgb(0 0 0 / 0.702) 70.7%, rgb(0 0 0 / 0.603) 73.3%, rgb(0 0 0 / 0.500) 76.0%, rgb(0 0 0 / 0.397) 78.7%, rgb(0 0 0 / 0.298) 81.3%, rgb(0 0 0 / 0.210) 84.0%, rgb(0 0 0 / 0.135) 86.7%, rgb(0 0 0 / 0.076) 89.3%, rgb(0 0 0 / 0.035) 92.0%, rgb(0 0 0 / 0.012) 94.7%, rgb(0 0 0 / 0.002) 97.3%, transparent 100%); mask-image: radial-gradient(ellipse 92% 78% at 78% 50%, #000 52.0%, rgb(0 0 0 / 0.998) 54.7%, rgb(0 0 0 / 0.988) 57.3%, rgb(0 0 0 / 0.965) 60.0%, rgb(0 0 0 / 0.924) 62.7%, rgb(0 0 0 / 0.865) 65.3%, rgb(0 0 0 / 0.790) 68.0%, rgb(0 0 0 / 0.702) 70.7%, rgb(0 0 0 / 0.603) 73.3%, rgb(0 0 0 / 0.500) 76.0%, rgb(0 0 0 / 0.397) 78.7%, rgb(0 0 0 / 0.298) 81.3%, rgb(0 0 0 / 0.210) 84.0%, rgb(0 0 0 / 0.135) 86.7%, rgb(0 0 0 / 0.076) 89.3%, rgb(0 0 0 / 0.035) 92.0%, rgb(0 0 0 / 0.012) 94.7%, rgb(0 0 0 / 0.002) 97.3%, transparent 100%); }
  .cC10 .whero--soft .hp .hp__blur { -webkit-mask-image: radial-gradient(ellipse 100% 86% at 78% 52%, #000 38.0%, rgb(0 0 0 / 0.998) 41.4%, rgb(0 0 0 / 0.988) 44.9%, rgb(0 0 0 / 0.965) 48.3%, rgb(0 0 0 / 0.924) 51.8%, rgb(0 0 0 / 0.865) 55.2%, rgb(0 0 0 / 0.790) 58.7%, rgb(0 0 0 / 0.702) 62.1%, rgb(0 0 0 / 0.603) 65.6%, rgb(0 0 0 / 0.500) 69.0%, rgb(0 0 0 / 0.397) 72.4%, rgb(0 0 0 / 0.298) 75.9%, rgb(0 0 0 / 0.210) 79.3%, rgb(0 0 0 / 0.135) 82.8%, rgb(0 0 0 / 0.076) 86.2%, rgb(0 0 0 / 0.035) 89.7%, rgb(0 0 0 / 0.012) 93.1%, rgb(0 0 0 / 0.002) 96.6%, transparent 100%); mask-image: radial-gradient(ellipse 100% 86% at 78% 52%, #000 38.0%, rgb(0 0 0 / 0.998) 41.4%, rgb(0 0 0 / 0.988) 44.9%, rgb(0 0 0 / 0.965) 48.3%, rgb(0 0 0 / 0.924) 51.8%, rgb(0 0 0 / 0.865) 55.2%, rgb(0 0 0 / 0.790) 58.7%, rgb(0 0 0 / 0.702) 62.1%, rgb(0 0 0 / 0.603) 65.6%, rgb(0 0 0 / 0.500) 69.0%, rgb(0 0 0 / 0.397) 72.4%, rgb(0 0 0 / 0.298) 75.9%, rgb(0 0 0 / 0.210) 79.3%, rgb(0 0 0 / 0.135) 82.8%, rgb(0 0 0 / 0.076) 86.2%, rgb(0 0 0 / 0.035) 89.7%, rgb(0 0 0 / 0.012) 93.1%, rgb(0 0 0 / 0.002) 96.6%, transparent 100%); }
}

/* v9b: the left edge dissolves on a long eased ramp (no oval, so no hard line), the bottom the same; the picture stays clear of the words */
@media (min-width: 62rem) {
  .cC10 .whero--soft .hp { left: 30%; }
  .cC10 .whero--soft .hp .hp__sharp { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.002) 2.0%, rgb(0 0 0 / 0.012) 4.0%, rgb(0 0 0 / 0.035) 6.0%, rgb(0 0 0 / 0.076) 8.0%, rgb(0 0 0 / 0.135) 10.0%, rgb(0 0 0 / 0.210) 12.0%, rgb(0 0 0 / 0.298) 14.0%, rgb(0 0 0 / 0.397) 16.0%, rgb(0 0 0 / 0.500) 18.0%, rgb(0 0 0 / 0.603) 20.0%, rgb(0 0 0 / 0.702) 22.0%, rgb(0 0 0 / 0.790) 24.0%, rgb(0 0 0 / 0.865) 26.0%, rgb(0 0 0 / 0.924) 28.0%, rgb(0 0 0 / 0.965) 30.0%, rgb(0 0 0 / 0.988) 32.0%, rgb(0 0 0 / 0.998) 34.0%, rgb(0 0 0 / 1.000) 36.0%), linear-gradient(180deg, rgb(0 0 0 / 1.000) 76.0%, rgb(0 0 0 / 0.998) 77.3%, rgb(0 0 0 / 0.988) 78.7%, rgb(0 0 0 / 0.965) 80.0%, rgb(0 0 0 / 0.924) 81.3%, rgb(0 0 0 / 0.865) 82.7%, rgb(0 0 0 / 0.790) 84.0%, rgb(0 0 0 / 0.702) 85.3%, rgb(0 0 0 / 0.603) 86.7%, rgb(0 0 0 / 0.500) 88.0%, rgb(0 0 0 / 0.397) 89.3%, rgb(0 0 0 / 0.298) 90.7%, rgb(0 0 0 / 0.210) 92.0%, rgb(0 0 0 / 0.135) 93.3%, rgb(0 0 0 / 0.076) 94.7%, rgb(0 0 0 / 0.035) 96.0%, rgb(0 0 0 / 0.012) 97.3%, rgb(0 0 0 / 0.002) 98.7%, rgb(0 0 0 / 0.000) 100.0%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.002) 2.0%, rgb(0 0 0 / 0.012) 4.0%, rgb(0 0 0 / 0.035) 6.0%, rgb(0 0 0 / 0.076) 8.0%, rgb(0 0 0 / 0.135) 10.0%, rgb(0 0 0 / 0.210) 12.0%, rgb(0 0 0 / 0.298) 14.0%, rgb(0 0 0 / 0.397) 16.0%, rgb(0 0 0 / 0.500) 18.0%, rgb(0 0 0 / 0.603) 20.0%, rgb(0 0 0 / 0.702) 22.0%, rgb(0 0 0 / 0.790) 24.0%, rgb(0 0 0 / 0.865) 26.0%, rgb(0 0 0 / 0.924) 28.0%, rgb(0 0 0 / 0.965) 30.0%, rgb(0 0 0 / 0.988) 32.0%, rgb(0 0 0 / 0.998) 34.0%, rgb(0 0 0 / 1.000) 36.0%), linear-gradient(180deg, rgb(0 0 0 / 1.000) 76.0%, rgb(0 0 0 / 0.998) 77.3%, rgb(0 0 0 / 0.988) 78.7%, rgb(0 0 0 / 0.965) 80.0%, rgb(0 0 0 / 0.924) 81.3%, rgb(0 0 0 / 0.865) 82.7%, rgb(0 0 0 / 0.790) 84.0%, rgb(0 0 0 / 0.702) 85.3%, rgb(0 0 0 / 0.603) 86.7%, rgb(0 0 0 / 0.500) 88.0%, rgb(0 0 0 / 0.397) 89.3%, rgb(0 0 0 / 0.298) 90.7%, rgb(0 0 0 / 0.210) 92.0%, rgb(0 0 0 / 0.135) 93.3%, rgb(0 0 0 / 0.076) 94.7%, rgb(0 0 0 / 0.035) 96.0%, rgb(0 0 0 / 0.012) 97.3%, rgb(0 0 0 / 0.002) 98.7%, rgb(0 0 0 / 0.000) 100.0%); mask-composite: intersect; }
  .cC10 .whero--soft .hp .hp__blur { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.002) 2.9%, rgb(0 0 0 / 0.012) 5.8%, rgb(0 0 0 / 0.035) 8.7%, rgb(0 0 0 / 0.076) 11.6%, rgb(0 0 0 / 0.135) 14.4%, rgb(0 0 0 / 0.210) 17.3%, rgb(0 0 0 / 0.298) 20.2%, rgb(0 0 0 / 0.397) 23.1%, rgb(0 0 0 / 0.500) 26.0%, rgb(0 0 0 / 0.603) 28.9%, rgb(0 0 0 / 0.702) 31.8%, rgb(0 0 0 / 0.790) 34.7%, rgb(0 0 0 / 0.865) 37.6%, rgb(0 0 0 / 0.924) 40.4%, rgb(0 0 0 / 0.965) 43.3%, rgb(0 0 0 / 0.988) 46.2%, rgb(0 0 0 / 0.998) 49.1%, rgb(0 0 0 / 1.000) 52.0%), linear-gradient(180deg, rgb(0 0 0 / 1.000) 68.0%, rgb(0 0 0 / 0.998) 69.8%, rgb(0 0 0 / 0.988) 71.6%, rgb(0 0 0 / 0.965) 73.3%, rgb(0 0 0 / 0.924) 75.1%, rgb(0 0 0 / 0.865) 76.9%, rgb(0 0 0 / 0.790) 78.7%, rgb(0 0 0 / 0.702) 80.4%, rgb(0 0 0 / 0.603) 82.2%, rgb(0 0 0 / 0.500) 84.0%, rgb(0 0 0 / 0.397) 85.8%, rgb(0 0 0 / 0.298) 87.6%, rgb(0 0 0 / 0.210) 89.3%, rgb(0 0 0 / 0.135) 91.1%, rgb(0 0 0 / 0.076) 92.9%, rgb(0 0 0 / 0.035) 94.7%, rgb(0 0 0 / 0.012) 96.4%, rgb(0 0 0 / 0.002) 98.2%, rgb(0 0 0 / 0.000) 100.0%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.000) 0.0%, rgb(0 0 0 / 0.002) 2.9%, rgb(0 0 0 / 0.012) 5.8%, rgb(0 0 0 / 0.035) 8.7%, rgb(0 0 0 / 0.076) 11.6%, rgb(0 0 0 / 0.135) 14.4%, rgb(0 0 0 / 0.210) 17.3%, rgb(0 0 0 / 0.298) 20.2%, rgb(0 0 0 / 0.397) 23.1%, rgb(0 0 0 / 0.500) 26.0%, rgb(0 0 0 / 0.603) 28.9%, rgb(0 0 0 / 0.702) 31.8%, rgb(0 0 0 / 0.790) 34.7%, rgb(0 0 0 / 0.865) 37.6%, rgb(0 0 0 / 0.924) 40.4%, rgb(0 0 0 / 0.965) 43.3%, rgb(0 0 0 / 0.988) 46.2%, rgb(0 0 0 / 0.998) 49.1%, rgb(0 0 0 / 1.000) 52.0%), linear-gradient(180deg, rgb(0 0 0 / 1.000) 68.0%, rgb(0 0 0 / 0.998) 69.8%, rgb(0 0 0 / 0.988) 71.6%, rgb(0 0 0 / 0.965) 73.3%, rgb(0 0 0 / 0.924) 75.1%, rgb(0 0 0 / 0.865) 76.9%, rgb(0 0 0 / 0.790) 78.7%, rgb(0 0 0 / 0.702) 80.4%, rgb(0 0 0 / 0.603) 82.2%, rgb(0 0 0 / 0.500) 84.0%, rgb(0 0 0 / 0.397) 85.8%, rgb(0 0 0 / 0.298) 87.6%, rgb(0 0 0 / 0.210) 89.3%, rgb(0 0 0 / 0.135) 91.1%, rgb(0 0 0 / 0.076) 92.9%, rgb(0 0 0 / 0.035) 94.7%, rgb(0 0 0 / 0.012) 96.4%, rgb(0 0 0 / 0.002) 98.2%, rgb(0 0 0 / 0.000) 100.0%); mask-composite: intersect; }
  .cC10 .whero--soft .hp .hp__layer img { object-position: 40% 100%; }
}

@media (min-width: 62rem) { .cC10 .whero--soft .hp::after { content: ""; display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgb(214 195 198 / 0.620) 0.0%, rgb(214 195 198 / 0.619) 2.8%, rgb(214 195 198 / 0.610) 5.5%, rgb(214 195 198 / 0.590) 8.2%, rgb(214 195 198 / 0.556) 11.0%, rgb(214 195 198 / 0.508) 13.8%, rgb(214 195 198 / 0.449) 16.5%, rgb(214 195 198 / 0.382) 19.2%, rgb(214 195 198 / 0.310) 22.0%, rgb(214 195 198 / 0.238) 24.8%, rgb(214 195 198 / 0.171) 27.5%, rgb(214 195 198 / 0.112) 30.2%, rgb(214 195 198 / 0.064) 33.0%, rgb(214 195 198 / 0.030) 35.8%, rgb(214 195 198 / 0.010) 38.5%, rgb(214 195 198 / 0.001) 41.2%, rgb(214 195 198 / 0.000) 44.0%, rgb(214 195 198 / 0) 44%); } }

@media (min-width: 62rem) { .cC10 .whero--soft .hp::after { background: linear-gradient(90deg, rgb(214 195 198 / 0.000) 0.0%, rgb(214 195 198 / 0.006) 2.6%, rgb(214 195 198 / 0.038) 5.1%, rgb(214 195 198 / 0.105) 7.7%, rgb(214 195 198 / 0.198) 10.2%, rgb(214 195 198 / 0.302) 12.8%, rgb(214 195 198 / 0.395) 15.3%, rgb(214 195 198 / 0.462) 17.9%, rgb(214 195 198 / 0.494) 20.4%, rgb(214 195 198 / 0.500) 23.0%, rgb(214 195 198 / 0.494) 25.6%, rgb(214 195 198 / 0.462) 28.1%, rgb(214 195 198 / 0.395) 30.7%, rgb(214 195 198 / 0.302) 33.2%, rgb(214 195 198 / 0.198) 35.8%, rgb(214 195 198 / 0.105) 38.3%, rgb(214 195 198 / 0.038) 40.9%, rgb(214 195 198 / 0.006) 43.4%, rgb(214 195 198 / 0.000) 46.0%, rgb(214 195 198 / 0) 46%); } }