/* Sarah Aknin · second round components (25.10): zoom parallax, image trail, rotating portrait,
   the cookie button, and the square variants for sketch 2. Loads after sarah.css. */

/* ---------- Zoom parallax ---------- */
.cks-zoom { position: relative; height: 300vh; height: 300svh; }
.cks-zoom__stage { --t: 1; --c: 0; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--zoom-bg, #F1ECE3); }
.cks-zoom__lay { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
.cks-zoom__lay.cks-zoom__c { z-index: 0; }
.cks-zoom__pic { position: absolute; left: calc(50% + (var(--x) - var(--w) / 2) * 1%); top: calc(50% + (var(--y) - var(--h) / 2) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); overflow: hidden; border-radius: var(--zoom-r, 18px); background: #E9E2D6;
  box-shadow: 0 30px 60px -36px rgba(37,32,28,.55); }
.cks-zoom__pic img, .cks-zoom__pic video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cks-zoom__c { --x: 0; --y: 0; --w: 26; --h: 26; }
.cks-zoom__l1 { --x: -3; --y: -27; --w: 30; --h: 22; --s: 5; }
.cks-zoom__l2 { --x: 27; --y: -10; --w: 17; --h: 40; --s: 6; }
.cks-zoom__l3 { --x: -29; --y: 0; --w: 24; --h: 24; --s: 5; }
.cks-zoom__l4 { --x: -20; --y: 27; --w: 28; --h: 22; --s: 7; }
.cks-zoom__l5 { --x: 9; --y: 26; --w: 22; --h: 20; --s: 6; }
.cks-zoom__l6 { --x: 32; --y: 24; --w: 15; --h: 17; --s: 9; }
.cks-zoom__l7 { --x: -34; --y: -27; --w: 17; --h: 20; --s: 8; }
.cks-zoom__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--c);
  background: linear-gradient(to top, rgba(20,17,14,.88), rgba(20,17,14,.45) 45%, rgba(20,17,14,.1) 75%); }
.cks-zoom__cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(48px, 13vh, 130px); padding: 0 24px; text-align: center; color: #F1ECE3;
  opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 30px)); pointer-events: none; }
.cks-zoom__eyebrow { margin: 0 0 12px; font: 500 13px/1.3 var(--ck-body); letter-spacing: .24em; color: #DCCFBD; }
.cks-zoom__title { margin: 0; font-family: var(--ck-head); font-weight: 800; font-size: clamp(40px, 6.6vw, 96px); line-height: 1; letter-spacing: -.02em; color: #F1ECE3; text-wrap: balance; }
.cks-zoom__text { margin: 18px auto 0; max-width: 640px; font: 300 clamp(16px, 1.4vw, 20px)/1.65 var(--ck-body); color: #E9E1D6; }
.cks-zoom__hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 500 12px/1 var(--ck-body); letter-spacing: .22em; color: #7A6A58; opacity: var(--t); pointer-events: none; }
.cks-zoom__hint i { width: 1px; height: 38px; background: linear-gradient(currentColor 50%, transparent 50%) 0 0 / 1px 200%; animation: cksHint 1.8s linear infinite; }
@media (max-width: 639px) {
  .cks-zoom__c { --w: 46; --h: 30; }
  .cks-zoom__l1 { --x: -24; --y: -29; --w: 44; --h: 22; --s: 5; }
  .cks-zoom__l2 { --x: 24; --y: -28; --w: 44; --h: 20; --s: 7; }
  .cks-zoom__l4 { --x: -23; --y: 28; --w: 44; --h: 20; --s: 6; }
  .cks-zoom__l7 { --x: 24; --y: 29; --w: 44; --h: 22; --s: 8; }
  .cks-zoom__l3, .cks-zoom__l5, .cks-zoom__l6 { display: none; }
}
.cks-zoom.is-still { height: auto; }
.cks-zoom.is-still .cks-zoom__stage { position: relative; }
.cks-zoom.is-still .cks-zoom__shade, .cks-zoom.is-still .cks-zoom__cap { --c: 1; }
.cks-zoom.is-still .cks-zoom__hint { display: none; }
/* still (reduced motion): show the end state, the film full bleed under the caption */
.cks-zoom.is-still .cks-zoom__lay:not(.cks-zoom__c) { display: none; }
.cks-zoom.is-still .cks-zoom__c { --x: 0; --y: 0; --w: 100; --h: 100; }
.cks-zoom.is-still .cks-zoom__c .cks-zoom__pic { border-radius: 0; box-shadow: none; }
/* the kit's h2 rule (.elementor-kit-10 h2) outranks a single class */
body .cks-zoom .cks-zoom__title { margin: 0; font-family: var(--ck-head); font-weight: 800; font-size: clamp(40px, 6.6vw, 96px); line-height: 1; letter-spacing: -.02em; color: #F1ECE3; }
body .cks-zoom .cks-zoom__text { color: #E9E1D6; }

/* ---------- Image trail ---------- */
.cks-trail { position: relative; isolation: isolate; overflow: hidden; min-height: 92vh; min-height: 92svh; display: flex; align-items: center; justify-content: center; cursor: default; }
.cks-trail__mid { position: relative; z-index: 2; text-align: center; padding: 70px 24px; max-width: 1100px; pointer-events: none; }
.cks-trail__eyebrow { margin: 0 0 18px; font: 500 13px/1.3 var(--ck-body); letter-spacing: .24em; color: var(--ck-gold2); }
.cks-trail__title { margin: 0; font-family: var(--ck-head); font-weight: 900; font-size: clamp(54px, 12vw, 176px); line-height: .92; letter-spacing: -.035em; color: var(--ck-dark); text-wrap: balance; }
.cks-trail__text { margin: 26px auto 0; max-width: 560px; font: 300 clamp(16px, 1.5vw, 19px)/1.7 var(--ck-body); color: var(--ck-text); }
.cks-trail__hint { margin: 26px 0 0; display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--ck-body); letter-spacing: .08em; color: var(--ck-dark); }
.cks-trail__hint i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ck-dark); }
.cks-trail__hint i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ck-dark); opacity: 0; animation: cksRing 2.4s cubic-bezier(.2,.7,.2,1) infinite 1.2s; }
@keyframes cksRing { 0% { opacity: .7; transform: scale(.5); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
.cks-trail .h-t { display: none; }
@media (hover: none) { .cks-trail .h-m { display: none; } .cks-trail .h-t { display: inline; } }
.cks-trail__layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cks-trail__ph { position: absolute; top: 0; left: 0; width: 170px; height: 212px; opacity: 0; will-change: transform, opacity; background: #fff; padding: 6px;
  box-shadow: 0 1px 2px rgba(20,17,14,.12), 0 24px 44px -20px rgba(20,17,14,.45); }
.cks-trail__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cks-trail__cur { position: absolute; top: 0; left: 0; z-index: 4; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(30,26,23,.85); box-shadow: 0 0 0 6px rgba(30,26,23,.12); opacity: 0; pointer-events: none; transition: opacity .4s; }
.cks-trail__cur.on { opacity: 1; }
body .cks-trail .cks-trail__title { margin: 0; font-family: var(--ck-head); font-weight: 900; font-size: clamp(54px, 12vw, 176px); line-height: .92; letter-spacing: -.035em; color: var(--ck-dark); }
/* still (reduced motion): three photos parked in the corners, clear of the words */
.cks-trail__ph.is-still { opacity: 1; }
.cks-trail__ph.is-still.s0 { left: 5%; top: 8%; transform: rotate(-4deg); }
.cks-trail__ph.is-still.s1 { left: auto; right: 5%; top: 6%; transform: rotate(3deg); }
.cks-trail__ph.is-still.s2 { left: auto; top: auto; right: 9%; bottom: 7%; transform: rotate(-2deg); }
@media (max-width: 640px) {
  .cks-trail__ph { width: 112px; height: 140px; padding: 4px; }
  .cks-trail { min-height: 80svh; }
  .cks-trail__ph.is-still.s0 { left: 4%; top: 2%; }
  .cks-trail__ph.is-still.s1 { right: 4%; top: auto; bottom: 2%; }
  .cks-trail__ph.is-still.s2 { display: none; }
}

/* ---------- Rotating portrait ---------- */
.cks-flip { --ms: 1100ms; position: relative; }
/* explicit width: inside a wrapping flex row the frame's aspect-ratio otherwise sizes to 0 and the text below rides over the photo (phones) */
body .e-con > .elementor-widget-cks-flip, .cks-flip, .cks-flip__frame { width: 100%; }
.cks-flip__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #E9E2D6; isolation: isolate; }
.cks-flip--arch .cks-flip__frame { border-radius: 999px 999px 18px 18px / 320px 320px 18px 18px; }
.cks-flip--rect .cks-flip__frame { border-radius: 0; }
.cks-flip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transform: scale(1.04); transition: opacity .22s ease, transform calc(var(--ms) + 300ms) linear; }
.cks-flip__img.is-on { opacity: 1; transform: scale(1); }
.cks-flip__bar { position: relative; height: 1px; margin-top: 14px; background: rgba(153,135,116,.35); overflow: hidden; }
.cks-flip__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ck-dark); }
.cks-flip.tick .cks-flip__bar i { animation: cksBar var(--ms) linear forwards; }
.cks-flip.is-paused .cks-flip__bar i { animation-play-state: paused; }
@keyframes cksBar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cks-flip__img { transition: none; } }

/* ---------- Cookie settings button: a clean round icon (the theme button padding had squashed it into a pill) ---------- */
#ckc.ckc .ckc-fab { width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(241,236,227,.25) !important;
  background: #25201C !important; color: #F1ECE3 !important; box-shadow: 0 10px 24px -10px rgba(20,17,14,.5) !important; display: grid !important; place-items: center; }
#ckc.ckc .ckc-fab .ckc-ico { width: 22px; height: 22px; display: block; }
#ckc.ckc .ckc-fab:hover, #ckc.ckc .ckc-fab:focus { background: #7A6A58 !important; color: #fff !important; }
@media (max-width: 767px) {
  #ckc.ckc .ckc-fab { width: 40px !important; height: 40px !important; left: 12px !important; bottom: calc(104px + env(safe-area-inset-bottom)) !important; opacity: .92; }
  #ckc.ckc .ckc-fab .ckc-ico { width: 19px; height: 19px; }
}
.sa-s2 #ckc.ckc .ckc-fab { border-radius: 0 !important; background: #1E1A17 !important; }

/* ---------- Sketch 2: everything square, white and clean ---------- */
.sa-s2 { --ck-radius: 0px; }
.sa-s2 .cks-drawer__panel, .sa-s2 .cks-drawer__cta, .sa-s2 .cks-drawer__cta i, .sa-s2 .cks-drawer__x,
.sa-s2 .cks-pop__box, .sa-s2 .cks-pop__cta, .sa-s2 .cks-pop__cta i, .sa-s2 .cks-pop__x, .sa-s2 .cks-pop__count,
.sa-s2 #ckw-win, .sa-s2 .ckw-chip, .sa-s2 .ckw-bubble, .sa-s2 #ckw-in, .sa-s2 #ckw-send, .sa-s2 .ckw-cta,
.sa-s2 .cks-sk, .sa-s2 .cks-sk a, .sa-s2 .cks-bbar, .sa-s2 .cks-rev__card, .sa-s2 .cks-rev__nav button, .sa-s2 .cks-rev__avatar,
.sa-s2 .cks-gal__item, .sa-s2 .cks-gal__img, .sa-s2 .cks-gal__filters button, .sa-s2 .cks-gal__more,
.sa-s2 .cks-door__btn, .sa-s2 .cks-door__btn i, .sa-s2 .cks-door__win { border-radius: 0 !important; }
.sa-s2 .cks-drawer__panel { background: #FFFFFF; }
.sa-s2 .cks-pop__box { background: #FFFFFF; }
.sa-s2 .cks-bbar { background: rgba(255,255,255,.96); }
.sa-s2 .cks-door { --cream: #FFFFFF; --esp: #FFFFFF; }
.sa-s2 .cks-door__frame::before { border-radius: 0; border-color: rgba(30,26,23,.25); }
.sa-s2 .cks-door__quote { color: #1E1A17; }
.sa-s2 .cks-door__plan { color: #1E1A17; opacity: calc(.38 - var(--p) * 1.2); }
.sa-s2 .cks-door__plan .p-w { color: #1E1A17; }
.sa-s2 .cks-door__hint { color: #1E1A17; }
.sa-s2 .cks-door__eyebrow { color: #1E1A17; }
.sa-s2 .cks-door__btn { background: #1E1A17; }
@media (max-width: 1023px) {
  .sa-s2 .cks-door { --esp: #1E1A17; }
  /* on the phone the film sits behind the copy: a white button reads, a dark one disappears */
  .sa-s2 .cks-door__btn { background: #FFFFFF; color: #1E1A17 !important; }
  .sa-s2 .cks-door__btn i { background: #1E1A17; color: #FFFFFF; }
}
/* sketch 2 keeps the review stack straight: offset and scale only, no tilt */
.sa-s2 .cks-rev__card[data-pos="1"] { transform: translateY(18px) scale(.96); }
.sa-s2 .cks-rev__card[data-pos="2"] { transform: translateY(34px) scale(.92); }
.sa-s2 .cks-rev__card[data-pos="out"] { transform: translateX(-120%); }
.sa-s2 .cks-trail__ph { padding: 0; box-shadow: 0 24px 44px -24px rgba(20,17,14,.5); }
.sa-s2 .cks-zoom__pic { border-radius: 0; }

/* ---------- Cookie panel in Sarah's colours. The component itself is theme-proof since 25.10 (fleet plugin-cookie-consent.php),
   so these are brand rules only: a cream "accept all" with dark text, taupe toggles, pill buttons (square in sketch 2). ---------- */
#ckc.ckc .ckc-btn { padding: 12px 14px; min-height: 46px; border-radius: 999px; border: 1px solid transparent; box-shadow: none; text-transform: none; letter-spacing: 0;
  font: 600 14px/1.2 var(--ck-body); color: #F1ECE3; background: #3A332D; }
#ckc.ckc .ckc-ghost { background: transparent; border-color: rgba(241,236,227,.28); color: #F1ECE3; }
#ckc.ckc .ckc-primary { background: #F1ECE3; border-color: #F1ECE3; color: #25201C; }
#ckc.ckc .ckc-btn:hover, #ckc.ckc .ckc-btn:focus-visible { filter: none; background: #998774; border-color: #998774; color: #FFFFFF; }
#ckc.ckc .ckc-toggle { padding: 0; width: 46px; min-width: 46px; height: 26px; min-height: 0; border: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(241,236,227,.22);
  background: rgba(241,236,227,.14); }
#ckc.ckc .ckc-toggle.on { background: #998774; box-shadow: none; }
#ckc.ckc .ckc-toggle:disabled { opacity: .7; }
#ckc.ckc .ckc-toggle i { top: 3px; left: 3px; width: 20px; height: 20px; }
#ckc.ckc .ckc-toggle.on i { left: 23px; }
.sa-s2 #ckc.ckc .ckc-panel, .sa-s2 #ckc.ckc .ckc-btn, .sa-s2 #ckc.ckc .ckc-cat, .sa-s2 #ckc.ckc .ckc-avatar,
.sa-s2 #ckc.ckc .ckc-toggle, .sa-s2 #ckc.ckc .ckc-toggle i { border-radius: 0; }
/* desktop: fleet standard, the accessibility icon is raised in its own settings (ea11y_widget_icon_settings, +52px) and the cookie
   button keeps the corner under it. The toast now lives inside #ckc and takes the banner colours; here only its shape. */
#ckc.ckc .ckc-toast { font-family: var(--ck-body); font-weight: 500; border-radius: 999px; padding: 11px 18px; box-shadow: 0 14px 30px -14px rgba(20,17,14,.6); }
.sa-s2 #ckc.ckc .ckc-toast { background: #1E1A17; border-radius: 0; }
@media (max-width: 767px) { #ckc.ckc .ckc-toast { bottom: calc(152px + env(safe-area-inset-bottom)); } }

/* ---------- Round 3 (26.10) ---------- */
/* FAQ, both sketches: Elementor puts the +/− first (order:-1) and pushes the question to the far end, so in RTL the
   question sat on the left. The question starts on the right, the icon closes the row on the left. */
body .sa-faq .e-n-accordion-item-title { justify-content: flex-start; gap: 18px; }
body .sa-faq .e-n-accordion-item-title-header { order: 0; flex: 1 1 auto; text-align: right; }
body .sa-faq .e-n-accordion-item-title-icon { order: 2; margin-inline-start: auto; }
body .sa-faq .e-n-accordion-item > [role="region"], body .sa-faq .e-n-accordion-item .elementor-widget-text-editor { text-align: right; }
/* sketch 2 headings are Bellefair (one weight): never let the browser fake a bold */
body.sa-s2 { font-synthesis: none; }
body.sa-s2 .cks-door__title, body.sa-s2 .cks-trail__title, body.sa-s2 .cks-pop__body h2, body.sa-s2 .cks-rev__avatar { font-weight: 400; }
/* sketch 2: the big trail title on a phone, two big lines like on desktop */
@media (max-width: 640px) { body.sa-s2 .cks-trail .cks-trail__title { font-size: 21vw; line-height: .95; letter-spacing: -.02em; } }
/* sketch 2 hero: a tight shadow under the film only (the soft one bled a grey haze above the frame) */
.sa-s2 .cks-door__win { box-shadow: 0 30px 40px -30px rgba(20,17,14,.35); }
/* accessibility button (Ally, shadow DOM) in each sketch's colours; read by the style site.js puts in its shadow root */
body.sa-s1 { --cks-ally: #25201C; }
body.sa-s2 { --cks-ally: #1E1A17; --cks-ally-r: 0px; --cks-ally-r2: 0px; }