/* SoldByEkin guide flipbook (guide-flipbook.js). Everything is scoped under
   .sbe-flipbook, so no other page or element is affected.
   Page images: whole, never cropped or stretched (object-fit: contain), no
   rounded corners, masks or overlays on the artwork. The book's look (stacked
   page edges, its shadow, the spine shadow) is drawn outside the pictures:
   around the pages, or in each page's paper margin.
   The look (Ekin's reference, 14 October 2026): a deep teal header with
   SoldByEkin, a gold Book a Consultation and the tools; warm champagne with
   soft palm-leaf shadows and fine gold arcs; the guide as a hardcover book
   (spine, page block, boards, a real shadow); gold arrows; a deep teal
   thumbnail gallery; SOLD BY EKIN upright in gold at the book's left. */
.sbe-flipbook{
  --fb-teal:#004F55;--fb-teal-deep:#003F45;--fb-teal-bright:#00606A;--fb-ink:#12262B;--fb-muted:#5B6866;
  --fb-gold:#D6A84D;--fb-gold-bright:#E8C370;--fb-gold-text:#B8892F;--fb-gold-deep:#86621f;--fb-gold-ring:#C9973F;
  --fb-paper:#FFFEFB;--fb-edge-line:#D2CABB;--fb-edge-sheet:#FBF9F4;--fb-champagne:#F6F2EA;
  --fb-header:#063D3C;--fb-header-deep:#053432;--fb-cream:#F6F2EA;--fb-board:#0B3433;
  --fb-spine-w:clamp(7px,calc(var(--fb-page-w,400px) * .03),16px);
  --fb-gutter:104px;--fb-side-arrows:1;--fb-breathing:0px;--fb-pad-x:24px;--fb-thumb-h:58px;--fb-max-w:1600px;
  --fb-shift:0px;--fb-inset:0px;--fb-shift-ms:0ms;--fb-margin:0px;
  --fb-frame-x:0px;--fb-frame-w:0px;--fb-edge-l:0px;--fb-edge-r:0px;--fb-edge-b:0px;
  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;
  margin:0 auto;padding:0 var(--fb-pad-x);background:var(--fb-bg,var(--fb-champagne));color:var(--fb-ink);
  text-align:start;font-family:"Manrope",Arial,sans-serif;font-size:15px;line-height:1.4;
  /* Clipped both ways: a page lifting at its corner, or dragged, draws its
     shadow on a long box reaching far below the book (page-flip clips what
     shows, not the box), and this page's body scrolls on its own (styles.css),
     so a scrollbar came and went with it and the book shook (Ekin, 14 October
     2026). Nothing of the book shows outside the reader. */
  overflow:clip;
  /* Pages appear and disappear as they turn: never let the browser re-anchor the page scroll on them. */
  overflow-anchor:none;
}
.sbe-flipbook *,.sbe-flipbook *::before,.sbe-flipbook *::after{box-sizing:border-box}
.sbe-flipbook [hidden]{display:none!important}
/* The reader's box spans its host, so the brand can sit in all the free space
   left of the book (on wide screens too); the book's stage and the thumbnails
   keep to --fb-max-w, centred, as they always have. */
.sbe-flipbook .sbe-flipbook__stage{width:100%;max-width:calc(var(--fb-max-w) - 2 * var(--fb-pad-x));margin-inline:auto}
/* No more specific than one element, so the components' own type sizes below win. */
:where(.sbe-flipbook) button{font:inherit;margin:0}
.sbe-flipbook :is(button,a,output,[tabindex]):focus-visible{outline:3px solid var(--fb-ink);outline-offset:3px}
.sbe-flipbook :is(.sbe-flipbook__sr,.sbe-flipbook__live){position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sbe-flipbook__icon{display:inline-flex;flex:none;line-height:0}
.sbe-flipbook__icon svg{display:block}

/* ---- Header: a deep teal band across the reader: SoldByEkin (home) at the
   left, Book a Consultation in the middle, zoom, full screen and the page
   count at the right. The guide's name is not shown here (the cover shows it):
   it stays the heading for screen readers (.sbe-flipbook__title, visually
   hidden). ---- */
/* SoldByEkin and the tools share the room either side equally (each at least as
   wide as its content), so Book a Consultation sits in the middle wherever it
   can, never over either; the row wraps rather than overflow. */
.sbe-flipbook__bar{position:relative;z-index:2;flex:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;min-width:0;margin:0 calc(-1 * var(--fb-pad-x));padding:12px max(var(--fb-pad-x),28px);background:linear-gradient(180deg,#07443F 0%,var(--fb-header) 55%,var(--fb-header-deep) 100%);color:var(--fb-cream);border-bottom:1px solid rgba(214,168,77,.6);box-shadow:0 10px 24px -14px rgba(3,30,29,.6)}
.sbe-flipbook__heading{display:contents}
.sbe-flipbook__start{flex:1 0 0;display:flex;align-items:center;justify-content:flex-start}
.sbe-flipbook__home{flex:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--fb-cream);text-decoration:none}
.sbe-flipbook__home-logo{display:block;flex:none;width:44px;height:44px}
/* SOLDBYEKIN as in the site header (Ekin, 14 October 2026: her third image): its
   uppercase sans, SOLD bold and white, BY light, EKIN gold; English, left to right. */
.sbe-flipbook__home-name{color:#fff;font-family:"Montserrat","Avenir Next","Futura","Century Gothic","DM Sans",Arial,sans-serif;font-size:24px;font-weight:400;line-height:1;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.sbe-flipbook__home-name b{font-weight:700}
.sbe-flipbook__home-name span{color:#e2b45a;font-weight:600}
.sbe-flipbook__actions{flex:1 0 0;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:22px}
.sbe-flipbook[data-tools="below"] .sbe-flipbook__actions{display:none}
.sbe-flipbook__title{margin:0}
.sbe-flipbook__consult{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;height:50px;padding:0 28px 0 22px;border:1px solid #F3DDA2;border-radius:8px;background:linear-gradient(180deg,#F3DA95 0%,#E2BE6C 50%,#CFA24E 100%);color:#0B2E2D;font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:19px;font-weight:500;line-height:1;letter-spacing:.01em;white-space:nowrap;text-decoration:none;box-shadow:0 8px 18px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.sbe-flipbook__consult .sbe-flipbook__icon{color:#0B2E2D}
.sbe-flipbook__consult .sbe-flipbook__icon svg{width:24px;height:24px}
.sbe-flipbook__bar :is(a,button,output,[tabindex]):focus-visible{outline-color:#F3DA95}
.sbe-flipbook__consult:focus-visible{outline:3px solid #F3DA95;outline-offset:3px}
.sbe-flipbook__tools{flex:none;display:flex;align-items:center;gap:14px}
/* Under the page (phones held upright) the tools are white buttons on the champagne. */
.sbe-flipbook__tool{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:1px solid rgba(18,38,43,.07);border-radius:10px;background:#fff;color:var(--fb-ink);cursor:pointer;box-shadow:0 2px 8px rgba(18,38,43,.08),0 1px 2px rgba(18,38,43,.06);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease,background-color .15s ease}
.sbe-flipbook__tool[aria-pressed="true"]{border-color:var(--fb-gold);color:var(--fb-teal);box-shadow:0 0 0 1px var(--fb-gold),0 2px 8px rgba(18,38,43,.08)}
.sbe-flipbook__divider{flex:none;width:2px;height:34px;margin:0 4px 0 8px;border-radius:1px;background:var(--fb-gold)}
.sbe-flipbook__counter{margin:0;min-width:5.2em;font-size:20px;font-weight:500;line-height:1.2;color:var(--fb-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* In the header: cream icons on the teal, a fine gold divider, the count in cream. */
.sbe-flipbook__bar .sbe-flipbook__tool{border-color:transparent;background:transparent;color:var(--fb-cream);box-shadow:none}
.sbe-flipbook__bar .sbe-flipbook__tool .sbe-flipbook__icon svg{width:27px;height:27px}
.sbe-flipbook__bar .sbe-flipbook__tool[aria-pressed="true"]{border-color:var(--fb-gold);color:var(--fb-gold-bright);box-shadow:none}
.sbe-flipbook__bar .sbe-flipbook__divider{width:1px;height:36px}
.sbe-flipbook__bar .sbe-flipbook__counter{color:var(--fb-cream)}

/* ---- Stage: gold arrows outside the book; the book centred ---- */
.sbe-flipbook__stage{flex:1 0 auto;position:relative;z-index:1;display:grid;grid-template-columns:var(--fb-gutter) auto var(--fb-gutter);grid-template-areas:"prev view next";justify-content:center;align-items:center;align-content:center;padding:10px 0}
.sbe-flipbook__view{grid-area:view;position:relative;justify-self:center}
/* Gold medallions (Ekin's reference): a pale gold dome in a gold ring, a deep teal chevron. */
.sbe-flipbook__arrow{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;padding:0;border:2px solid var(--fb-gold-ring);border-radius:50%;background:radial-gradient(circle at 34% 28%,#FFF9E8 0%,#F7E7BC 42%,#E5C57C 100%);color:#0B3B3A;cursor:pointer;box-shadow:0 14px 28px -10px rgba(90,62,14,.5),0 3px 7px rgba(90,62,14,.18),inset 0 1px 1px rgba(255,255,255,.85),inset 0 -3px 8px rgba(160,112,30,.22);transition:box-shadow .15s ease,border-color .15s ease,filter .15s ease,color .15s ease,opacity .2s ease,visibility 0s,transform var(--fb-shift-ms) ease}
.sbe-flipbook__arrow .sbe-flipbook__icon svg{width:30px;height:30px}
.sbe-flipbook__arrow:disabled{opacity:.4;cursor:default;box-shadow:none}
/* The first spread: no way back, so no previous arrow at all (hidden, not
   faded: not clickable, focusable or announced). visibility keeps its place,
   so nothing moves; it fades in once another page shows. */
.sbe-flipbook__arrow--prev.is-away{visibility:hidden;opacity:0;transition:box-shadow .15s ease,border-color .15s ease,filter .15s ease,color .15s ease,opacity .2s ease,visibility 0s linear .2s,transform var(--fb-shift-ms) ease}
/* Beside a lone cover the arrows move in with the book (over the view's empty half): they stay on top. */
.sbe-flipbook__arrow--prev{grid-area:prev;justify-self:center;transform:translateX(var(--fb-inset))}
.sbe-flipbook__arrow--next{grid-area:next;justify-self:center;transform:translateX(calc(-1 * var(--fb-inset)))}
/* The zoom view is as wide as the open book: there the arrows stay in the gutters, off the zoomed page. */
.sbe-flipbook[data-zoomed="true"] .sbe-flipbook__arrow{transform:none;transition:none}
.sbe-flipbook__book{position:relative;transform:translateX(var(--fb-shift));transition:transform var(--fb-shift-ms) ease}
.sbe-flipbook[data-zoomed="true"] .sbe-flipbook__book{visibility:hidden}
.sbe-flipbook__pf{position:relative;z-index:1}
/* page-flip's own CSS stops pinch-zoom on the book (touch-action: pan-y). */
.sbe-flipbook .stf__parent{touch-action:pan-y pinch-zoom}
/* A turning hard cover is drawn in 3D: guide-flipbook.js sets the perspective
   from the page size (page-flip's own is 2000px) and keeps room above and below
   the book (margins on .sbe-flipbook__view), so the cover never rises into the header. */
.sbe-flipbook .stf__block{perspective:var(--fb-perspective,3600px)}
/* The opening cover's shadow on the table (page-flip draws it as a straight box
   beside the spine): lighter and soft-edged, as a real cover's shadow falls. */
.sbe-flipbook .stf__hardShadow{opacity:.55;filter:blur(5px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}

/* ---- Behind everything between the header and the thumbnails: warm
   champagne, soft palm-leaf shadows in two corners and fine gold arcs
   (decorative; guide-flipbook.js sets its top and bottom from those rows) ---- */
.sbe-flipbook__decor{position:absolute;z-index:0;left:0;right:0;top:var(--fb-decor-top,0px);bottom:var(--fb-decor-bottom,0px);overflow:hidden;pointer-events:none;background:radial-gradient(ellipse 72% 64% at 50% 44%,#FCF8EF 0%,#F6EFE1 58%,#EFE5D0 100%)}
.sbe-flipbook__palm{position:absolute;display:block;width:clamp(300px,42vw,760px);aspect-ratio:6/5;background:url("/assets/guide-palm-shadow.webp") no-repeat 0 0/100% 100%}
.sbe-flipbook__palm--top{left:-2%;top:-4%}
.sbe-flipbook__palm--bottom{right:-3%;bottom:-6%;transform:rotate(180deg)}
.sbe-flipbook__arc{--arc:clamp(300px,30vw,620px);position:absolute;display:block;width:var(--arc);height:var(--arc);border:1px solid rgba(196,150,62,.55);border-radius:50%}
.sbe-flipbook__arc--left{left:calc(var(--arc) * -.62);bottom:calc(var(--arc) * -.58)}
.sbe-flipbook__arc--right{right:calc(var(--arc) * -.6);bottom:calc(var(--arc) * -.6)}

/* ---- The brand: SOLD BY EKIN upright in gold at the left of the book, a thin
   gold line above and below (Ekin's reference). guide-flipbook.js (layout())
   places it in the free space left of the previous arrow's column, centred on
   the book, and shows it only where it fits whole (data-brand="shown"; not
   shown: "hidden", or "settling" while the book slides into a new layout). It
   is absolutely positioned, so it never moves the book; decorative (aria-hidden). ---- */
.sbe-flipbook__spine-brand{position:absolute;z-index:0;left:var(--fb-brand-x,0px);top:var(--fb-brand-y,50%);display:none;flex-direction:column;align-items:center;gap:20px;margin:0;color:var(--fb-gold-deep);pointer-events:none;user-select:none;-webkit-user-select:none;transform:translate(-50%,-50%)}
.sbe-flipbook[data-brand="shown"] .sbe-flipbook__spine-brand{display:flex}
/* Laid out but not shown while layout() measures it. */
.sbe-flipbook[data-brand="measuring"] .sbe-flipbook__spine-brand{display:flex;visibility:hidden}
.sbe-flipbook__spine-brand::before,.sbe-flipbook__spine-brand::after{content:"";flex:none;width:1px;height:var(--fb-brand-line,96px);background:currentColor}
/* Read from the bottom up, the letters' tops to the left: vertical text turned
   half a turn. The letter spacing also follows the last letter (above the N
   once turned): the same space before the first, along the line of letters
   (padding-inline-start, below the S once turned), keeps the letters centred
   between the lines. Nothing across the line, so they stay on the lines' axis. */
.sbe-flipbook__spine-text{display:block;writing-mode:vertical-rl;transform:rotate(180deg);padding-inline-start:.34em;font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:18px;font-weight:500;line-height:1;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}

/* ---- Behind the book: stacked page edges and the shadow it casts. The frame
   goes exactly around the visible pages (plus the edges) and paints nothing
   inside its own box; the edges sit beside and under the pages. ---- */
/* Moved with transforms (never left/right), so following the pages is not a layout shift.
   A hardcover: open, its deep teal boards show just beyond the pages; closed
   (a cover alone), its spine at the hinge side and the back board behind the
   page block. Its shadow falls below and to the side, as on a table. */
.sbe-flipbook__frame{position:absolute;z-index:0;top:0;left:0;width:calc(var(--fb-frame-w) + var(--fb-edge-l) + var(--fb-edge-r));height:calc(var(--fb-page-h,0px) + var(--fb-edge-b));transform:translateX(calc(var(--fb-frame-x) - var(--fb-edge-l)));pointer-events:none;border-radius:2px;box-shadow:0 0 0 4px var(--fb-board),0 0 0 5px rgba(0,0,0,.22),0 36px 60px -24px rgba(28,20,6,.55),0 16px 30px -14px rgba(28,20,6,.3);transition:transform .2s ease,width .2s ease}
.sbe-flipbook[data-cover="front"] .sbe-flipbook__frame{box-shadow:4px 3px 0 0 var(--fb-board),5px 4px 0 0 rgba(0,0,0,.2),26px 36px 56px -24px rgba(28,20,6,.6),10px 16px 28px -12px rgba(28,20,6,.32)}
.sbe-flipbook[data-cover="back"] .sbe-flipbook__frame{box-shadow:-4px 3px 0 0 var(--fb-board),-5px 4px 0 0 rgba(0,0,0,.2),-26px 36px 56px -24px rgba(28,20,6,.6),-10px 16px 28px -12px rgba(28,20,6,.32)}
.sbe-flipbook__frame::before{content:"";position:absolute;top:-3px;bottom:-1px;display:none;width:var(--fb-spine-w)}
.sbe-flipbook[data-cover="front"] .sbe-flipbook__frame::before{display:block;left:calc(-1 * var(--fb-spine-w));border-radius:6px 0 0 6px;background:linear-gradient(90deg,#021B1A 0%,#0A403E 30%,#11514E 48%,#0A3D3B 70%,#04262A 100%);box-shadow:inset -1px 0 0 rgba(214,168,77,.45),-3px 6px 12px -4px rgba(28,20,6,.4)}
.sbe-flipbook[data-cover="back"] .sbe-flipbook__frame::before{display:block;right:calc(-1 * var(--fb-spine-w));border-radius:0 6px 6px 0;background:linear-gradient(270deg,#021B1A 0%,#0A403E 30%,#11514E 48%,#0A3D3B 70%,#04262A 100%);box-shadow:inset 1px 0 0 rgba(214,168,77,.45),3px 6px 12px -4px rgba(28,20,6,.4)}
.sbe-flipbook__edge{position:absolute;display:block;pointer-events:none}
.sbe-flipbook__edge--left{left:0;top:2px;width:var(--fb-edge-l);height:calc(var(--fb-page-h,0px) - 2px);border-radius:2px 0 0 1px;background:repeating-linear-gradient(90deg,var(--fb-edge-line) 0 1px,var(--fb-edge-sheet) 1px 2px)}
.sbe-flipbook__edge--right{left:0;top:2px;width:var(--fb-edge-r);transform:translateX(calc(var(--fb-frame-w) + var(--fb-edge-l)));transition:transform .2s ease;height:calc(var(--fb-page-h,0px) - 2px);border-radius:0 2px 1px 0;background:repeating-linear-gradient(270deg,var(--fb-edge-line) 0 1px,var(--fb-edge-sheet) 1px 2px)}
.sbe-flipbook__edge--bottom{left:1px;right:1px;bottom:0;height:var(--fb-edge-b);border-radius:0 0 2px 2px;background:repeating-linear-gradient(0deg,var(--fb-edge-line) 0 1px,var(--fb-edge-sheet) 1px 2px)}
.sbe-flipbook[data-layout="single"] .sbe-flipbook__frame{border-radius:1px}
/* The covers (the first and last pages) are the boards themselves: their artwork
   to the edges (still whole: contain), on the board's teal. (data-density is
   ours; page-flip's --hard class also marks the cover's back while it turns.) */
.sbe-flipbook__page[data-density="hard"] .sbe-flipbook__paper{padding:0;background:var(--fb-board)}

/* ---- Pages: paper with an even margin, the whole image inside it ---- */
.sbe-flipbook__page{background:transparent}
.sbe-flipbook__paper{position:absolute;inset:0;width:100%;height:100%;padding:var(--fb-margin);background:var(--fb-paper)}
.sbe-flipbook__paper img,.sbe-flipbook__zoom-page img,.sbe-flipbook__list-page img{display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;border-radius:0;object-fit:contain;object-position:50% 50%;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.sbe-flipbook__paper img{pointer-events:none}
/* Rounded outer corners, like a printed page (the margin keeps them off the picture). */
.sbe-flipbook__page.--right .sbe-flipbook__paper{border-radius:0 5px 5px 0}
.sbe-flipbook__page.--left .sbe-flipbook__paper{border-radius:5px 0 0 5px}
/* The spine shadow and the centre seam: only in the paper margin on the spine side of an open spread. */
.sbe-flipbook__gutter{position:absolute;top:0;bottom:0;display:none;width:var(--fb-margin);pointer-events:none}
.sbe-flipbook[data-layout="spread"] .sbe-flipbook__page.--soft.--left .sbe-flipbook__gutter{display:block;right:0;background:linear-gradient(90deg,rgba(70,52,22,0),rgba(70,52,22,.07) 45%,rgba(70,52,22,.2));box-shadow:inset -1px 0 0 rgba(70,52,22,.3)}
.sbe-flipbook[data-layout="spread"] .sbe-flipbook__page.--soft.--right .sbe-flipbook__gutter{display:block;left:0;background:linear-gradient(270deg,rgba(70,52,22,0),rgba(70,52,22,.06) 45%,rgba(70,52,22,.18));box-shadow:inset 1px 0 0 rgba(70,52,22,.22)}

/* ---- The page turn of the two-page view (guide-flipbook.js, turnSheet): over
   the book while a page turns, copies of the turning sheet and of the pages
   around it. The sheet's strips rotate over the spine in 3D (the book's own
   perspective), each face a window on its page, shaded as it turns; the
   shadow it casts falls from the spine. Animated with transform and opacity
   only (the compositor), so it never skips or flashes. ---- */
.sbe-flipbook__turn{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:var(--fb-perspective,3600px);perspective-origin:50% 50%}
.sbe-flipbook__turn-half,.sbe-flipbook__turn-cast,.sbe-flipbook__turn-sheet{position:absolute;top:0;width:var(--fb-page-w);height:var(--fb-page-h)}
.sbe-flipbook__turn-half{overflow:hidden}
.sbe-flipbook__turn-half--left,.sbe-flipbook__turn-cast--left,.sbe-flipbook__turn-sheet--left{left:0}
.sbe-flipbook__turn-half--right,.sbe-flipbook__turn-cast--right,.sbe-flipbook__turn-sheet--right{left:var(--fb-page-w)}
.sbe-flipbook__turn-cast{opacity:0;will-change:transform,opacity}
.sbe-flipbook__turn-cast--right{transform-origin:0 50%;background:linear-gradient(90deg,rgba(38,27,9,.6) 0%,rgba(38,27,9,.22) 30%,rgba(38,27,9,0) 78%)}
.sbe-flipbook__turn-cast--left{transform-origin:100% 50%;background:linear-gradient(270deg,rgba(38,27,9,.6) 0%,rgba(38,27,9,.22) 30%,rgba(38,27,9,0) 78%)}
.sbe-flipbook__turn-sheet{transform-style:preserve-3d}
.sbe-flipbook__turn-strip{position:absolute;top:0;height:100%;transform-style:preserve-3d;will-change:transform}
.sbe-flipbook__turn-sheet--right .sbe-flipbook__turn-strip{transform-origin:0 50%}
.sbe-flipbook__turn-sheet--left .sbe-flipbook__turn-strip{transform-origin:100% 50%}
.sbe-flipbook__turn-face{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.sbe-flipbook__turn-face--back{transform:rotateY(180deg)}
/* The shade and the picture in a face hide with it when it turns away: Safari
   draws a layer of their own (the shade animates) even inside a hidden face. */
.sbe-flipbook__turn-shade{position:absolute;inset:0;background:#2A1E09;opacity:0;pointer-events:none;will-change:opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.sbe-flipbook__turn-face .sbe-flipbook__turn-page{-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* The copies look exactly like the book's pages (above). */
.sbe-flipbook__turn-page{position:absolute;top:0;left:0;width:var(--fb-page-w);height:var(--fb-page-h)}
.sbe-flipbook__turn-page.--right .sbe-flipbook__paper{border-radius:0 5px 5px 0}
.sbe-flipbook__turn-page.--left .sbe-flipbook__paper{border-radius:5px 0 0 5px}
.sbe-flipbook__turn-page[data-density="hard"] .sbe-flipbook__paper{padding:0;background:var(--fb-board)}
.sbe-flipbook__turn-page.--soft.--left .sbe-flipbook__gutter{display:block;right:0;background:linear-gradient(90deg,rgba(70,52,22,0),rgba(70,52,22,.07) 45%,rgba(70,52,22,.2));box-shadow:inset -1px 0 0 rgba(70,52,22,.3)}
.sbe-flipbook__turn-page.--soft.--right .sbe-flipbook__gutter{display:block;left:0;background:linear-gradient(270deg,rgba(70,52,22,0),rgba(70,52,22,.06) 45%,rgba(70,52,22,.18));box-shadow:inset 1px 0 0 rgba(70,52,22,.22)}

/* ---- Zoom: the current page(s) bigger, scroll or drag to every edge; its own controls float at the bottom ---- */
/* The page's own champagne; its hairline ring shows the panel's edge. */
.sbe-flipbook__zoom{position:absolute;inset:0;z-index:2;display:flex;overflow:auto;overscroll-behavior:contain;border-radius:6px;background:var(--fb-champagne);box-shadow:inset 0 0 0 1px rgba(92,70,32,.14);touch-action:pan-x pan-y pinch-zoom;cursor:grab}
.sbe-flipbook__zoom.is-dragging{cursor:grabbing}
.sbe-flipbook__zoom:focus-visible{outline-offset:-3px}
/* margin:auto centres a smaller canvas without cutting off a larger one; the
   room under it lets the page's bottom edge scroll clear of the floating controls. */
.sbe-flipbook__zoom-canvas{display:flex;flex:none;margin:auto;padding-bottom:76px}
.sbe-flipbook__zoom-page{position:relative;flex:none;background:var(--fb-paper);box-shadow:0 12px 30px -14px rgba(48,34,12,.4)}
.sbe-flipbook__zoom-bar{position:absolute;z-index:4;left:50%;bottom:14px;display:flex;align-items:center;gap:2px;padding:4px;border:1px solid rgba(214,168,77,.6);border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 10px 26px rgba(18,38,43,.2),0 1px 3px rgba(18,38,43,.12);transform:translateX(-50%)}
.sbe-flipbook__zoom-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--fb-ink);cursor:pointer}
.sbe-flipbook__zoom-button:disabled{opacity:.35;cursor:default}
.sbe-flipbook__zoom-button--close{margin-left:8px}
.sbe-flipbook__zoom-button--close::before{content:"";position:absolute;left:-5px;top:11px;bottom:11px;width:1px;background:var(--fb-gold)}
.sbe-flipbook__zoom-level{display:inline-block;min-width:58px;text-align:center;font-size:15px;font-weight:600;color:var(--fb-ink);font-variant-numeric:tabular-nums}

/* ---- Thumbnails: a deep teal gallery across the bottom (Ekin's reference):
   "Pages 1 — 33" over the strip, the strip scrolling sideways, the selected
   page ringed in gold, Hide pages / Show pages at the right. Shown on wide
   screens, folded on phones. ---- */
.sbe-flipbook__thumbs-area{position:relative;z-index:2;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title ." "strip toggle";align-items:center;column-gap:20px;margin:0 calc(-1 * var(--fb-pad-x));padding:10px max(calc(var(--fb-pad-x) + 8px),calc((100% - var(--fb-max-w)) / 2 + var(--fb-pad-x) + 8px)) 12px;background:linear-gradient(180deg,var(--fb-header) 0%,var(--fb-header-deep) 100%);border-top:1px solid rgba(214,168,77,.6);color:var(--fb-cream)}
.sbe-flipbook[data-thumbnails="false"] .sbe-flipbook__thumbs-area{grid-template-areas:"title toggle"}
.sbe-flipbook__thumbs-title{grid-area:title;margin:0 0 2px 8px;color:var(--fb-gold-bright);font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.02em;white-space:nowrap}
.sbe-flipbook__thumbs-toggle{grid-area:toggle;position:relative;justify-self:end;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:14px;padding:6px 12px;border:0;border-radius:8px;background:transparent;color:var(--fb-cream);font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer}
/* A fine gold line between the strip and the toggle. */
.sbe-flipbook__thumbs-toggle::before{content:"";position:absolute;left:-17px;top:2px;bottom:2px;width:1px;background:rgba(214,168,77,.7)}
.sbe-flipbook[data-thumbnails="false"] .sbe-flipbook__thumbs-toggle::before{display:none}
.sbe-flipbook__thumbs-toggle .sbe-flipbook__icon svg{width:22px;height:22px}
.sbe-flipbook__thumbs-chevron{transition:transform .2s ease}
.sbe-flipbook__thumbs-chevron svg{width:18px!important;height:18px!important}
.sbe-flipbook__thumbs-toggle[aria-expanded="true"] .sbe-flipbook__thumbs-chevron{transform:rotate(180deg)}
.sbe-flipbook__thumbs-area :is(button,[tabindex]):focus-visible{outline-color:#F3DA95}
.sbe-flipbook__thumbs{grid-area:strip;position:relative;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(214,168,77,.55) transparent;padding:8px 8px 4px}
/* From the left, as in the reference, scrolling sideways when they do not fit. */
.sbe-flipbook__thumbs-list{display:flex;gap:14px;width:max-content;margin:0}
.sbe-flipbook__thumb{display:flex;flex:none;flex-direction:column;align-items:center;gap:7px;padding:0 0 2px;border:0;border-radius:6px;background:transparent;color:rgba(246,242,234,.85);font-size:14px;font-weight:600;line-height:1;cursor:pointer}
.sbe-flipbook__thumb-card{display:block;padding:4px;border-radius:3px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.12);transition:transform .15s ease,box-shadow .15s ease}
.sbe-flipbook__thumb-card img{display:block;width:auto;height:var(--fb-thumb-h);max-width:none;border:0;border-radius:0}
.sbe-flipbook__thumb-card.is-number-only{display:flex;align-items:center;justify-content:center;width:calc(var(--fb-thumb-h) * var(--thumb-ratio,.7) + 8px);height:calc(var(--fb-thumb-h) + 8px);color:var(--fb-muted);font-size:18px}
.sbe-flipbook__thumb-card.is-number-only+.sbe-flipbook__thumb-number{visibility:hidden}
.sbe-flipbook__thumb[aria-current="true"]{color:var(--fb-gold-bright)}
.sbe-flipbook__thumb[aria-current="true"] .sbe-flipbook__thumb-card{outline:2px solid var(--fb-gold);outline-offset:2px;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.35)}

/* ---- Without page-flip: every page, whole, in a column (lazy) ---- */
.sbe-flipbook[data-engine="list"] .sbe-flipbook__stage{display:block;padding:16px 0}
.sbe-flipbook[data-engine="list"] .sbe-flipbook__view{width:100%;justify-self:stretch}
.sbe-flipbook[data-engine="list"] :is(.sbe-flipbook__arrow,.sbe-flipbook__thumbs-area,.sbe-flipbook__tools){display:none!important}
.sbe-flipbook__list{display:grid;gap:18px;width:min(100%,900px);margin:0 auto}
.sbe-flipbook__list-page{background:var(--fb-paper);box-shadow:0 0 0 1px rgba(92,70,32,.14),0 12px 26px -14px rgba(48,34,12,.4)}
.sbe-flipbook .sbe-flipbook__list-page img{height:auto}

/* ---- Full screen (native, or a fixed full-window view where it is missing) ---- */
/* (Full screen: the rows take the whole screen, as the reader does.) */
.sbe-flipbook.is-fullscreen{--fb-max-w:100vw;width:100%;max-width:none;height:100%;margin:0;background:var(--fb-champagne);overflow:auto}
.sbe-flipbook.is-pseudo-fullscreen{position:fixed;inset:0;z-index:2147483000;height:100vh;height:100dvh}
/* The same champagne (a literal: older browsers do not pass custom properties to ::backdrop). */
.sbe-flipbook::backdrop{background:#F6F2EA}
html.sbe-flipbook-scroll-lock,html.sbe-flipbook-scroll-lock body{overflow:hidden!important}

/* Hover effects only where there is a pointer that hovers (no sticky hover after a tap). */
@media (hover:hover){
  .sbe-flipbook__consult:hover{filter:brightness(1.06) saturate(1.05);transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6)}
  .sbe-flipbook__tool:hover{border-color:rgba(214,168,77,.7);color:var(--fb-teal);box-shadow:0 4px 12px rgba(18,38,43,.12),0 1px 2px rgba(18,38,43,.06)}
  .sbe-flipbook__bar .sbe-flipbook__tool:hover{border-color:rgba(214,168,77,.55);background:rgba(255,255,255,.07);color:var(--fb-gold-bright);box-shadow:none}
  .sbe-flipbook__home:hover .sbe-flipbook__home-name span{color:#F0C870}
  .sbe-flipbook__arrow:hover:not(:disabled){border-color:var(--fb-gold-bright);filter:brightness(1.04);box-shadow:0 18px 32px -10px rgba(90,62,14,.55),0 4px 8px rgba(90,62,14,.2),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -3px 8px rgba(160,112,30,.25)}
  .sbe-flipbook__zoom-button:hover:not(:disabled){background:rgba(18,38,43,.06)}
  .sbe-flipbook__thumbs-toggle:hover{background:rgba(255,255,255,.07);color:#fff}
  .sbe-flipbook__thumb:hover .sbe-flipbook__thumb-card{box-shadow:0 6px 14px rgba(0,0,0,.35),0 0 0 1px rgba(232,195,112,.8)}
}

/* Narrower computer windows: the header a little smaller, so SoldByEkin, Book a
   Consultation and the tools keep one row in longer languages too. */
@media (min-width:901px) and (max-width:1180px){
  .sbe-flipbook__bar{column-gap:16px}
  .sbe-flipbook__home{gap:10px}
  .sbe-flipbook__home-logo{width:40px;height:40px}
  .sbe-flipbook__home-name{font-size:20px}
  .sbe-flipbook__consult{gap:9px;padding:0 20px 0 16px;font-size:17px}
  .sbe-flipbook__actions,.sbe-flipbook__tools{gap:10px}
}
/* ---- Phones and small tablets: one page; the arrows, zoom, full screen and page count in one row under it ---- */
@media (max-width:900px){
  .sbe-flipbook{--fb-side-arrows:0;--fb-gutter:0px;--fb-pad-x:14px;--fb-thumb-h:52px}
  /* The header: SoldByEkin at the left, Book a Consultation at the right (the tools go under the page). */
  .sbe-flipbook__bar{gap:8px 12px;padding:8px var(--fb-pad-x)}
  .sbe-flipbook__home{gap:9px;min-height:44px}
  .sbe-flipbook__home-logo{width:36px;height:36px}
  .sbe-flipbook__home-name{font-size:18px}
  .sbe-flipbook__consult{height:44px;margin-left:auto;padding:0 14px;gap:7px;font-size:15.5px}
  .sbe-flipbook__consult .sbe-flipbook__icon svg{width:20px;height:20px}
  .sbe-flipbook__stage{grid-template-columns:auto auto auto;grid-template-areas:"view view view" "prev tools next";column-gap:12px;row-gap:10px;padding:8px 0}
  .sbe-flipbook__arrow{width:52px;height:52px}
  .sbe-flipbook__arrow .sbe-flipbook__icon svg{width:24px;height:24px}
  .sbe-flipbook__arrow--prev,.sbe-flipbook__arrow--next{transform:none}
  .sbe-flipbook__stage>.sbe-flipbook__tools{grid-area:tools;gap:8px}
  .sbe-flipbook__tool{width:44px;height:44px}
  .sbe-flipbook__divider{height:28px;margin:0 2px 0 4px}
  .sbe-flipbook__counter{min-width:4.2em;font-size:17px}
  .sbe-flipbook__thumbs-area,.sbe-flipbook[data-thumbnails="false"] .sbe-flipbook__thumbs-area{display:flex;flex-direction:column;align-items:center;padding:4px var(--fb-pad-x) 10px}
  .sbe-flipbook__thumbs-title{display:none}
  .sbe-flipbook__thumbs-toggle,.sbe-flipbook[data-thumbnails="false"] .sbe-flipbook__thumbs-toggle{justify-self:auto;min-height:44px;margin:0}
  .sbe-flipbook__thumbs-toggle::before{display:none}
  .sbe-flipbook__thumbs{width:100%}
  .sbe-flipbook__thumbs-list{gap:10px}
  /* 44 px touch targets: the narrow (tall) thumbnails' buttons too, the card centred in them. */
  .sbe-flipbook__thumb{min-width:44px}
}
/* Small phones: the SoldByEkin mark alone (its name stays for screen readers), so the header keeps one row. */
@media (max-width:430px){
  .sbe-flipbook__home-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Little height (phones held sideways, large ones wider than 900 px too): the
   header in one compact row, the arrows beside the page, the thumbnails in one
   compact row beside their toggle (folded by default; the toggle then waits in
   the corner), so the page keeps most of the height. */
@media (max-height:520px){
  .sbe-flipbook{--fb-side-arrows:1;--fb-gutter:60px;--fb-thumb-h:36px}
  .sbe-flipbook__bar{gap:10px;padding:4px max(var(--fb-pad-x),16px)}
  .sbe-flipbook__home-logo{width:32px;height:32px}
  .sbe-flipbook__home-name{font-size:17px}
  .sbe-flipbook__actions{gap:10px}
  .sbe-flipbook__consult{height:44px;margin-left:0;padding:0 14px;gap:6px;font-size:15px}
  .sbe-flipbook__consult .sbe-flipbook__icon svg{width:20px;height:20px}
  .sbe-flipbook__tools{gap:6px}
  .sbe-flipbook__tool{width:44px;height:44px}
  .sbe-flipbook__divider{height:28px;margin:0 2px 0 4px}
  .sbe-flipbook__counter{min-width:4.2em;font-size:17px}
  .sbe-flipbook__stage{grid-template-columns:var(--fb-gutter) auto var(--fb-gutter);grid-template-areas:"prev view next";padding:6px 0}
  .sbe-flipbook__arrow{width:46px;height:46px}
  .sbe-flipbook__arrow .sbe-flipbook__icon svg{width:22px;height:22px}
  .sbe-flipbook__thumbs-area,.sbe-flipbook[data-thumbnails="false"] .sbe-flipbook__thumbs-area{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;padding:0 var(--fb-pad-x) 4px}
  .sbe-flipbook__thumbs-title{display:none}
  .sbe-flipbook__thumbs{flex:0 1 auto;width:auto;padding:6px 4px 2px}
  .sbe-flipbook__thumbs-toggle,.sbe-flipbook[data-thumbnails="false"] .sbe-flipbook__thumbs-toggle{flex:none;min-height:44px;margin:0}
  .sbe-flipbook__thumbs-list{gap:8px}
  /* No page numbers here (each thumbnail is announced as "Go to page N"); still 44 px to tap. */
  .sbe-flipbook__thumb{min-width:44px;min-height:44px;gap:0;padding:0}
  .sbe-flipbook__thumb-number{display:none}
  /* (In the corner of the stage's width: the reader's own box may be wider.) */
  .sbe-flipbook[data-thumbnails="false"] .sbe-flipbook__thumbs-area{position:absolute;right:max(var(--fb-pad-x),calc((100% - var(--fb-max-w)) / 2 + var(--fb-pad-x)));bottom:4px;z-index:3;width:auto;max-width:none;margin:0;padding:0 4px;border:1px solid rgba(214,168,77,.6);border-radius:10px}
}
/* Wider than 900 px the book can show two pages: room for the longest count
   ("16–17 / 33" is 5.06em), so the header never moves on a turn. */
@media (max-height:520px) and (min-width:901px){
  .sbe-flipbook__counter{min-width:5.2em}
}

/* ---- Reduced motion: instant page changes, nothing slides or lifts ---- */
.sbe-flipbook.is-reduced-motion,.sbe-flipbook.is-reduced-motion *{transition:none!important;animation:none!important}
.sbe-flipbook.is-reduced-motion .sbe-flipbook__consult:hover,.sbe-flipbook.is-reduced-motion .sbe-flipbook__thumb[aria-current="true"] .sbe-flipbook__thumb-card{transform:none}
@media (prefers-reduced-motion:reduce){
  .sbe-flipbook,.sbe-flipbook *{transition:none!important;animation:none!important}
  .sbe-flipbook__consult:hover,.sbe-flipbook__thumb[aria-current="true"] .sbe-flipbook__thumb-card{transform:none}
}