/* ==========================================================================
   Sully's — Sept 2026 revision components
   Header + menu overlay, wave divider, polaroid gallery, press cards,
   events grid, stack cards, plus light-palette utilities.
   ========================================================================== */

/* ---------- Header bar ---------- */
.sullys-hdr {
    --hdr-fg: #FFFCE9;
    --hdr-fg-scrolled: #14233D;
    position: absolute; top: 0; left: 0; width: 100%; height: 0;
    z-index: var(--z-header, 100);
    color: var(--hdr-fg);
    pointer-events: none;
}
.sullys-hdr > * { pointer-events: auto; }
.sullys-hdr-wave {
    position: absolute; top: 22px; left: 28px; color: var(--hdr-fg); display: block;
}
.sullys-hdr-logo {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    display: block; line-height: 0;
}
.sullys-hdr-logo img { display: block; height: auto; }
.sullys-hdr-logo img.sullys-hdr-logo-dark { display: none !important; }
.sullys-hdr-burger {
    position: fixed; top: 22px; right: 26px; width: var(--burger-w, 44px); height: 36px;
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    background: none; border: 0; padding: 4px; cursor: pointer;
    color: var(--hdr-fg); transition: color var(--dur-med) var(--ease-out-cubic);
    z-index: 2;
}
.sullys-hdr-burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }
.sullys-hdr.is-scrolled .sullys-hdr-burger { color: var(--hdr-fg-scrolled); }
.sullys-hdr.is-scrolled.is-on-dark .sullys-hdr-burger, .sullys-hdr--scroll.is-scrolled.is-on-dark .sullys-hdr-wave { color: var(--hdr-fg); }
.sullys-hdr--scroll.is-scrolled.is-on-dark .sullys-hdr-logo img.sullys-hdr-logo-light { display: block !important; }
.sullys-hdr--scroll.is-scrolled.is-on-dark .sullys-hdr-logo img.sullys-hdr-logo-dark  { display: none !important; }

/* Home: logo hidden until the hero scrolls out, then fixed top-centre in navy. */
.sullys-hdr--scroll .sullys-hdr-logo {
    position: fixed;
    opacity: 0; visibility: hidden; transform: translate(-50%, -12px);
    transition: opacity var(--dur-med) var(--ease-out-cubic), transform var(--dur-med) var(--ease-out-cubic), visibility 0s linear var(--dur-med);
}
.sullys-hdr--scroll.is-scrolled .sullys-hdr-logo {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity var(--dur-med) var(--ease-out-cubic), transform var(--dur-med) var(--ease-out-cubic), visibility 0s;
}
.sullys-hdr--scroll.is-scrolled .sullys-hdr-logo img.sullys-hdr-logo-light { display: none !important; }
.sullys-hdr--scroll.is-scrolled .sullys-hdr-logo img.sullys-hdr-logo-dark  { display: block !important; }
.sullys-hdr--scroll .sullys-hdr-wave { position: fixed; transition: color var(--dur-med) var(--ease-out-cubic); }
.sullys-hdr--scroll.is-scrolled .sullys-hdr-wave { color: var(--hdr-fg-scrolled); }
/* The custom cursor is hidden while the overlay is open (native pointer). */
body.sullys-overlay-open .sullys-cursor { display: none !important; }

/* ---------- Menu overlay ---------- */
.sullys-overlay {
    position: fixed; inset: 0; z-index: var(--z-menu, 200);
    display: flex; flex-direction: column;
    background: var(--sullys-peach); color: var(--sullys-navy);
    opacity: 0; visibility: hidden; transform: translateY(-2%);
    transition: opacity .45s var(--ease-out-cubic), transform .45s var(--ease-out-cubic), visibility 0s linear .45s;
    overflow-y: auto; overscroll-behavior: contain;
    font-family: var(--font-body);
}
/* Editor-only preview of the open menu: flows in the document under the header bar instead of covering it. */
.sullys-overlay.is-editor-preview { position: relative; inset: auto; min-height: 88vh; margin-top: 80px; opacity: 1; visibility: visible; transform: none; transition: none; overflow: visible; }
.sullys-overlay.is-editor-preview .sullys-overlay-close { pointer-events: none; }
.sullys-overlay.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease-out-cubic), transform .45s var(--ease-out-cubic), visibility 0s; }
.sullys-overlay a { cursor: pointer; }
.sullys-overlay-top { display: flex; align-items: center; justify-content: center; position: relative; padding: 22px 28px 0; min-height: 70px; }
.sullys-overlay-logo img { height: 34px; width: auto; display: block; }
.sullys-overlay-close { position: absolute; right: 26px; top: 22px; background: none; border: 0; padding: 4px; color: inherit; cursor: pointer; line-height: 0; }
.sullys-overlay-close svg { width: 28px; height: auto; display: block; }
.sullys-overlay-body {
    flex: 1 1 auto; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 40px;
    padding: clamp(40px, 12vh, 150px) clamp(28px, 10vw, 150px) 40px;
    align-items: start;
}
.sullys-overlay-primary { display: flex; flex-direction: column; gap: 18px; }
.sullys-overlay-primary a {
    font-family: var(--font-primary); font-size: clamp(1.8rem, 2.7vw, 2.6rem); line-height: 1.05;
    letter-spacing: .06em; text-transform: uppercase; color: inherit; text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out-cubic);
}
.sullys-overlay-primary a:hover { color: var(--sullys-cream); }
.sullys-overlay-secondary { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.sullys-overlay-secondary a {
    font-family: var(--font-primary); font-size: clamp(1rem, 1.35vw, 1.35rem); letter-spacing: .1em;
    text-transform: uppercase; color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out-cubic);
}
.sullys-overlay-secondary a:hover { color: var(--sullys-cream); }
.sullys-overlay-contact { margin-top: clamp(40px, 8vh, 90px); }
.sullys-overlay-socials { display: flex; gap: 12px; margin-bottom: 18px; }
.sullys-overlay-socials a { color: inherit; line-height: 0; }
.sullys-overlay-meta { font-size: 0.85rem; line-height: 1.5; margin: 0 0 14px; letter-spacing: .02em; }
.sullys-overlay-meta a { color: inherit; text-decoration: none; }
/* Overlay photos: same model as the Postcards widget. Each figure is --card-w x --card-h,
   positioned from the centre of the photo area by --card-x / --card-y, rotated by --card-r. */
.sullys-overlay-photos { position: relative; height: 640px; }
.sullys-overlay-photo { position: absolute; left: 50%; top: 50%; margin: 0; width: var(--card-w, 340px); height: var(--card-h, 440px); z-index: var(--card-z, 1);
    transform: translate(-50%, -50%) translate(var(--card-x, 0px), var(--card-y, 0px)) rotate(var(--card-r, 0deg)); } /* shadow comes from the widget's Style > Overlay photos control */
.sullys-overlay-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Overlay foot (Figma "Menu - New" bottom edge): a cream strip with the PEACH wave sitting on top of it.
   The fill is the overlay colour masked by Figma's 1440x17 wave (one 288.062px tile, repeated);
   the strip below it (--ovl-foot) is plain cream. Static, no animation. */
.sullys-overlay-wave { --wave-h: 17px; --ovl-foot: 36px; --wave-tile: calc(var(--wave-h) * 17.0803); line-height: 0; color: var(--sullys-cream); margin-top: auto; flex: 0 0 auto;
    height: calc(var(--wave-h) + var(--ovl-foot)); overflow: hidden; background: currentColor; }
.sullys-overlay-wave .sullys-wave-fill {
    display: block; width: 100%; height: var(--wave-h); background-color: var(--ovl-bg, var(--sullys-peach));
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 288.062 16.8654%22 preserveAspectRatio=%22none%22><path d=%22M84.2254 12.6292C76.7518 18.2957 67.1104 18.2356 59.7847 12.6662C52.4589 7.09677 43.081 7.32786 36.0187 12.717C28.7207 18.2818 19.0285 18.2033 11.7397 12.6754C8.27792 10.0502 4.43247 8.68209 3.12319e-05 8.69595L0.0139175 0.00210342L288.048 0.0021286L288.062 8.7006C283.643 8.68211 279.775 10.0502 276.313 12.6755C269.042 18.1987 259.313 18.2772 252.043 12.7217C244.814 7.19847 235.154 7.37872 227.967 12.8372C220.748 18.3188 211.157 18.1432 203.98 12.7078C196.871 7.32788 187.294 7.29552 180.195 12.6847C173.096 18.0739 163.223 18.2541 155.911 12.6939C148.826 7.30939 139.222 7.31401 132.141 12.6939C124.815 18.2495 115.174 18.2495 107.848 12.6893C100.915 7.42493 91.3709 7.22156 84.2254 12.6385L84.2254 12.6292Z%22 fill=%22%23000%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 288.062 16.8654%22 preserveAspectRatio=%22none%22><path d=%22M84.2254 12.6292C76.7518 18.2957 67.1104 18.2356 59.7847 12.6662C52.4589 7.09677 43.081 7.32786 36.0187 12.717C28.7207 18.2818 19.0285 18.2033 11.7397 12.6754C8.27792 10.0502 4.43247 8.68209 3.12319e-05 8.69595L0.0139175 0.00210342L288.048 0.0021286L288.062 8.7006C283.643 8.68211 279.775 10.0502 276.313 12.6755C269.042 18.1987 259.313 18.2772 252.043 12.7217C244.814 7.19847 235.154 7.37872 227.967 12.8372C220.748 18.3188 211.157 18.1432 203.98 12.7078C196.871 7.32788 187.294 7.29552 180.195 12.6847C173.096 18.0739 163.223 18.2541 155.911 12.6939C148.826 7.30939 139.222 7.31401 132.141 12.6939C124.815 18.2495 115.174 18.2495 107.848 12.6893C100.915 7.42493 91.3709 7.22156 84.2254 12.6385L84.2254 12.6292Z%22 fill=%22%23000%22/></svg>");
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: var(--wave-tile) 100%; mask-size: var(--wave-tile) 100%; -webkit-mask-position: 0 0; mask-position: 0 0;
    animation: none !important; transform: none !important;
}
.sullys-overlay-wave svg { display: block; width: 100%; height: 30px; }
@media (max-width: 1024px) {
    .sullys-overlay-body { grid-template-columns: 1fr 1fr; }
    .sullys-overlay-photos { display: none; }
}
/* Mobile menu (Figma "Home Mobile"): one centred column, primary links, then secondary links,
   then socials + contact last; no photos, no logo. The tripled .sullys-overlay selector (0,4,0)
   deliberately outranks the widget's desktop Elementor values (0,3,0) so desktop padding, gaps
   and type sizes do not leak onto phones. Mobile values come from the widget's Style >
   "Mobile menu" section via the --ovl-m-* variables. */
@media (max-width: 640px) {
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-top { justify-content: center; }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-logo { display: var(--ovl-m-logo, none); }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-body { grid-template-columns: 1fr; gap: var(--ovl-m-gap, 28px); padding: var(--ovl-m-pad, 56px 24px 40px); justify-items: var(--ovl-m-align, center); text-align: var(--ovl-m-text, center); }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-col--links { display: contents; }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-primary   { order: 1; align-items: var(--ovl-m-align, center); gap: var(--ovl-m-primary-gap, 12px); }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-secondary { order: 2; align-items: var(--ovl-m-align, center); padding-top: 0; gap: var(--ovl-m-secondary-gap, 10px); }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-contact   { order: 3; margin-top: 0; }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-socials   { justify-content: var(--ovl-m-align, center); margin-bottom: 14px; }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-primary a   { font-size: var(--ovl-m-primary, 24px); line-height: 1.1; }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-secondary a { font-size: var(--ovl-m-secondary, 17px); }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-meta { font-size: var(--ovl-m-meta, 12px); }
    .sullys-overlay.sullys-overlay.sullys-overlay .sullys-overlay-photos { display: none; }
}

/* ---------- Wave divider (Figma footer wave, tile 288.062 x 16.8654) ----------
   The exact Figma path is used as a CSS mask on a solid-colour block, so the wave
   can be any colour (currentColor). The tile repeats horizontally; the ripple
   animation moves the mask by exactly ONE tile width per cycle, so the loop is
   seamless at any size. --wave-h sets the height; the tile width follows the
   17.0803 : 1 aspect ratio of the original artwork. */
.sullys-wave-divider {
    --wave-h: 17px; --wave-speed: 28s;
    --wave-tile: calc(var(--wave-h) * 17.0803);
    position: relative; width: 100%; height: var(--wave-h); overflow: hidden; line-height: 0;
    color: var(--sullys-navy);
}
.sullys-wave-divider.is-overlap { margin-top: calc(-0.9 * var(--wave-h)); z-index: 2; } /* -0.9 not -1: avoids a hairline of page colour under the wave (Adnan, 17 Sep) */
.sullys-wave-divider.is-flipped { transform: scaleY(-1); }
.sullys-wave-fill {
    display: block; width: 100%; height: 100%; background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 288.062 16.8654%22 preserveAspectRatio=%22none%22><path d=%22M203.836 4.23848C211.31 -1.42801 220.951 -1.36792 228.277 4.2015C235.603 9.77092 244.981 9.53983 252.043 4.15066C259.341 -1.41414 269.033 -1.33557 276.322 4.19226C279.784 6.81751 283.629 8.1856 288.062 8.17174L288.048 16.8656H0.0138658L0 8.16711C4.41856 8.1856 8.28712 6.81751 11.7489 4.19226C19.0192 -1.33095 28.7484 -1.40952 36.0187 4.14604C43.2474 9.66924 52.9072 9.48899 60.0943 4.03049C67.3137 -1.45112 76.9042 -1.27548 84.0821 4.1599C91.1906 9.53983 100.767 9.57218 107.867 4.18301C114.966 -1.20615 124.838 -1.38641 132.15 4.17377C139.236 9.55831 148.84 9.55369 155.921 4.17377C163.246 -1.38179 172.888 -1.38179 180.214 4.17839C187.146 9.44277 196.691 9.64613 203.836 4.22923V4.23848Z%22 fill=%22%23000%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 288.062 16.8654%22 preserveAspectRatio=%22none%22><path d=%22M203.836 4.23848C211.31 -1.42801 220.951 -1.36792 228.277 4.2015C235.603 9.77092 244.981 9.53983 252.043 4.15066C259.341 -1.41414 269.033 -1.33557 276.322 4.19226C279.784 6.81751 283.629 8.1856 288.062 8.17174L288.048 16.8656H0.0138658L0 8.16711C4.41856 8.1856 8.28712 6.81751 11.7489 4.19226C19.0192 -1.33095 28.7484 -1.40952 36.0187 4.14604C43.2474 9.66924 52.9072 9.48899 60.0943 4.03049C67.3137 -1.45112 76.9042 -1.27548 84.0821 4.1599C91.1906 9.53983 100.767 9.57218 107.867 4.18301C114.966 -1.20615 124.838 -1.38641 132.15 4.17377C139.236 9.55831 148.84 9.55369 155.921 4.17377C163.246 -1.38179 172.888 -1.38179 180.214 4.17839C187.146 9.44277 196.691 9.64613 203.836 4.22923V4.23848Z%22 fill=%22%23000%22/></svg>");
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-size: var(--wave-tile) 100%; mask-size: var(--wave-tile) 100%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    transform-origin: 50% 100%;
}
.sullys-wave-divider.is-animated .sullys-wave-fill {
    animation: sullys-wave-drift var(--wave-speed) linear infinite, sullys-wave-breathe calc(var(--wave-speed) / 5) ease-in-out infinite alternate;
}
@keyframes sullys-wave-drift   { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: var(--wave-tile) 0; mask-position: var(--wave-tile) 0; } }
@keyframes sullys-wave-breathe { from { scale: 1 1; } to { scale: 1 .82; } }
@media (prefers-reduced-motion: reduce) { .sullys-wave-fill { animation: none !important; } }
/* Legacy generated scallop (kept for any cached markup). */
.sullys-wave-divider svg { display: block; width: 200%; height: 100%; }

/* ---------- Polaroid gallery ---------- */
.sullys-pg { --pg-w: 480px; --pg-h: 400px; --pg-gap: 32px; --pg-frame: #E9EEF0; --pg-pad: 16px; --pg-lip: 72px; --pg-mscale: .66; --pg-scale: 1; overflow: hidden; width: 100%; }
.sullys-pg-track { display: flex; align-items: center; gap: var(--pg-gap); width: max-content; will-change: transform; }
.sullys-pg.is-ready .sullys-pg-track { animation: sullys-pg-left 60s linear infinite; }
.sullys-pg--right.is-ready .sullys-pg-track { animation-name: sullys-pg-right; }
.sullys-pg.is-pause-hover:hover .sullys-pg-track { animation-play-state: paused; }
@keyframes sullys-pg-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sullys-pg-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Each figure is --pg-w wide (per photo or widget default). Plain: photo fills the figure.
   Polaroid: the figure is still --pg-w wide; the photo inside is --pg-w minus the frame padding,
   --pg-h tall, with a taller lip below. */
.sullys-pg-item { margin: 0; flex: 0 0 auto; width: calc(var(--pg-w) * var(--pg-scale)); box-sizing: border-box; }
.sullys-pg-item.is-plain { height: calc(var(--pg-h) * var(--pg-scale)); }
.sullys-pg-item .sullys-pg-img { width: 100%; height: 100%; }
.sullys-pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sullys-pg-item.is-polaroid { background: var(--pg-frame); padding: calc(var(--pg-pad) * var(--pg-scale)) calc(var(--pg-pad) * var(--pg-scale)) calc(var(--pg-lip) * var(--pg-scale)); height: auto; }
.sullys-pg-item.is-polaroid .sullys-pg-img { width: 100%; height: calc(var(--pg-h) * var(--pg-scale)); }
@media (prefers-reduced-motion: reduce) { .sullys-pg { overflow-x: auto; } .sullys-pg-track { animation: none !important; } }
@media (max-width: 767px) { .sullys-pg { --pg-scale: var(--pg-mscale); --pg-gap: 18px; } }

/* ---------- Press cards ---------- */
/* Press cards: fixed-width cards (--press-w, 418px in Figma) that wrap and stay centred on wide
   screens instead of stretching. Each card sits in .sullys-press-item so the scroll fade-up
   (reveal-block, GSAP) and the hover lift (CSS transform) do not fight over the same element. */
/* A grid of fixed 418px tracks (as many as fit) so the last row lines up with the columns above it
   instead of floating in the middle; justify-content spreads the tracks evenly across the width. */
.elementor-widget-sullys_press_cards { width: 100%; }
.sullys-press { --press-w: 418px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, var(--press-w)); justify-content: space-evenly; gap: var(--press-gap, 32px); }
.sullys-press-item { min-width: 0; }
/* "Equal space around": no fixed column gap, so the space between cards equals the space at the edges. */
.sullys-press-align-space-evenly .sullys-press { column-gap: 0; }
.sullys-press-card {
    position: relative; display: block; height: 100%; padding: 34px 36px 40px; min-height: 300px;
    background: var(--sullys-sky); color: var(--sullys-navy); text-decoration: none;
    font-family: var(--font-body); transition: transform var(--dur-med) var(--ease-out-cubic), box-shadow var(--dur-med) var(--ease-out-cubic);
}
a.sullys-press-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20,35,61,.12); }
.sullys-press-badge { --badge-s: 52px; position: absolute; top: -22px; left: -22px; line-height: 0; color: var(--sullys-peach); }
.sullys-press-badge svg, .sullys-press-badge img { width: var(--badge-s); height: var(--badge-s); display: block; object-fit: contain; }
.sullys-press-meta { font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; margin-bottom: 44px; }
.sullys-press-title { font-family: var(--font-primary); font-size: clamp(1.15rem, 1.5vw, 1.5rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; margin: 0 0 18px; color: inherit; }
.sullys-press-excerpt { font-size: 0.85rem; line-height: 1.55; margin: 0; }
.sullys-press-empty { text-align: center; opacity: .7; }
@media (max-width: 640px) { .sullys-press { grid-template-columns: 1fr; } }

/* ---------- Events grid ---------- */
.sullys-eg { --eg-cols: 4; display: grid; grid-template-columns: repeat(var(--eg-cols), minmax(0, 1fr)); gap: 20px; color: var(--sullys-navy); }
.sullys-eg-card { display: block; text-decoration: none; color: inherit; font-family: var(--font-body); }
.sullys-eg-img { aspect-ratio: 1/1; overflow: hidden; background: rgba(20,35,61,.06); margin-bottom: 20px; }
.sullys-eg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out-cubic); }
.sullys-eg-card:hover .sullys-eg-img img { transform: scale(1.04); }
.sullys-eg-title { font-family: var(--font-primary); font-size: clamp(1.1rem, 1.5vw, 1.5rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; margin: 0 0 10px; }
.sullys-eg-date { font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.sullys-eg-text { font-size: 0.8rem; line-height: 1.55; margin: 0; }
@media (max-width: 1024px) { .sullys-eg { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px)  { .sullys-eg { grid-template-columns: 1fr; } }

/* ---------- Stack cards ---------- */
.sullys-stack { --stack-h: 980px; position: relative; height: var(--stack-h); width: 100%; }
.sullys-stack-card {
    position: absolute; left: 50%; top: 50%; width: var(--card-w, 400px); z-index: var(--card-z, 1);
    padding: 48px 40px 56px; font-family: var(--font-body);
    transform: translate(calc(-50% + var(--card-x, 0px) + var(--stack-shift, 0px)), calc(-50% + var(--card-y, 0px) - 70px)) rotate(var(--card-r, 0deg));
    opacity: 0;
    transition: opacity .7s var(--ease-out-cubic), transform .9s var(--ease-out-expo);
    transition-delay: var(--card-delay, 0s);
}
.sullys-stack.is-in .sullys-stack-card, body.is-elementor-editor .sullys-stack-card {
    opacity: 1;
    transform: translate(calc(-50% + var(--card-x, 0px) + var(--stack-shift, 0px)), calc(-50% + var(--card-y, 0px))) rotate(var(--card-r, 0deg));
}
.sullys-stack-heading { font-family: var(--font-primary); font-size: clamp(1.3rem, 2vw, 2rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; margin: 0 0 22px; color: inherit; }
.sullys-stack-text { font-size: 0.85rem; line-height: 1.55; }
.sullys-stack-text p { margin: 0 0 1em; } .sullys-stack-text p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
    .sullys-stack { height: auto; display: flex; flex-direction: column; gap: 22px; align-items: center; padding: 10px 0; }
    .sullys-stack-card { position: static; width: min(100%, 480px); transform: rotate(calc(var(--card-r, 0deg) / 2)); }
    .sullys-stack.is-in .sullys-stack-card { transform: rotate(calc(var(--card-r, 0deg) / 2)); }
}

/* ---------- Utilities for the revised pages ---------- */
.sullys-hero { position: relative; }
.bg-footer { background-color: var(--bg-footer) !important; }
.bg-blue-mid { background-color: var(--sullys-blue-mid) !important; }
.fg-cream { color: var(--sullys-cream) !important; }

/* ---------- FAQ accordion (About) ---------- */
.sullys-faq .elementor-accordion .elementor-accordion-item { border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-top: 1px solid rgba(255,252,233,.55) !important; }
.sullys-faq .elementor-accordion .elementor-accordion-item:last-child { border-bottom: 1px solid rgba(255,252,233,.55) !important; }
.sullys-faq .elementor-accordion .elementor-accordion-item:has(.elementor-active) { border-top-color: var(--sullys-peach) !important; }
.sullys-faq .elementor-accordion .elementor-tab-title, .sullys-faq .elementor-accordion .elementor-tab-content { border: 0 !important; }
.sullys-faq .elementor-accordion .elementor-tab-content { border-bottom: 1px solid var(--sullys-peach) !important; }
.sullys-faq .elementor-accordion-icon { font-size: 14px; }
/* Nested Accordion (About FAQ): dividers and colours are left to Elementor's own controls
   (Style > Accordion > Border per Normal / Hover / Active). Only layout resets live here. */
.sullys-faq .e-n-accordion { --n-accordion-item-title-space-between: 0px; }
.sullys-faq .e-n-accordion-item-title { background: transparent; border-radius: 0; }
.sullys-faq .e-n-accordion-item > .elementor-element { background: transparent; }

/* ---------- Events accordion additions (What's On, Sept 2026) ---------- */
.sullys-accordion .event-subtext { display: block; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; opacity: .9; }
/* The description wrap is pointer-events:none in components.css (so a collapsed row is not a
   click target); only the old .event-book-link opted back in. Both buttons must be clickable. */
.sullys-accordion .sullys-accordion-item.is-active .event-description-wrap { pointer-events: auto; }
.sullys-accordion .event-btn, .sullys-accordion .event-buttons { pointer-events: auto; }
.sullys-accordion .event-buttons { position: relative; z-index: 6; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
/* Pill buttons in the expanded row. Every visual is a --btn-* variable set by the widget's
   Style > "Buttons (View Menu / Book Now)" section; the values here are only fallbacks. */
.sullys-accordion .event-btn, .sullys-accordion a.event-book-link.event-btn {
    --btn-fg: var(--sullys-navy); --btn-bg: var(--sullys-peach); --btn-fg-h: var(--sullys-cream); --btn-bg-h: var(--sullys-navy);
    display: inline-block; background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
    font-family: var(--font-body); font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase;
    padding: var(--btn-pad, 8px 22px); border-radius: var(--btn-radius, 22px); line-height: 1.1; margin: 0;
    border: var(--btn-bw, 0px) solid var(--btn-border, var(--btn-bg));
    transition: background-color var(--dur-fast) var(--ease-out-cubic), color var(--dur-fast) var(--ease-out-cubic), border-color var(--dur-fast) var(--ease-out-cubic);
}
.sullys-accordion .event-btn:hover, .sullys-accordion .event-btn:focus-visible, .sullys-accordion a.event-book-link.event-btn:hover {
    background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-border-h, var(--btn-bg-h)); opacity: 1;
}

/* ---------- Hamburger + overlay close: no theme/kit button styling, invert on hover ----------
   Hello Elementor / the Elementor kit style every <button> (that magenta hover bg). Reset
   all states, then swap light <-> dark on hover so the icon is always visible. */
.sullys-hdr-burger, .sullys-hdr-burger:hover, .sullys-hdr-burger:focus, .sullys-hdr-burger:active,
.sullys-overlay-close, .sullys-overlay-close:hover, .sullys-overlay-close:focus, .sullys-overlay-close:active {
    background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important;
    padding: 4px !important; border-radius: 0 !important; transition: color var(--dur-fast) var(--ease-out-cubic);
}
.sullys-hdr-burger:focus-visible, .sullys-overlay-close:focus-visible { outline: 2px solid currentColor !important; outline-offset: 4px; }
/* Hover always picks a colour that contrasts with what is BEHIND the icon:
   cream icon over the hero photo  -> navy on hover
   navy icon over the cream page   -> peach on hover (cream would vanish on cream)
   cream icon over the navy footer -> peach on hover */
.sullys-hdr .sullys-hdr-burger:hover { color: var(--hdr-fg-scrolled) !important; }
.sullys-hdr.is-scrolled .sullys-hdr-burger:hover { color: var(--hdr-fg-hover, var(--sullys-peach)) !important; }
.sullys-hdr.is-scrolled.is-on-dark .sullys-hdr-burger:hover { color: var(--hdr-fg-hover, var(--sullys-peach)) !important; }
/* Overlay close is navy on peach -> cream on hover. */
.sullys-overlay-close { color: var(--ovl-close, var(--sullys-navy)) !important; }
.sullys-overlay-close:hover { color: var(--ovl-close-hover, var(--sullys-cream)) !important; }

/* ==========================================================================
   24 Sep 2026: Wülfe feedback (Loom "Adnan Site Feedback and Quick Fixes")
   ========================================================================== */

/* ---------- Pinned header on every page ----------
   Inner pages (header widget "Other pages: header" = Pinned) get the same fixed logo + wave as Home,
   but the logo is visible from the start: light over the photo hero, navy once the hero has gone. */
.sullys-hdr--pinned .sullys-hdr-logo, .sullys-hdr--pinned .sullys-hdr-wave { position: fixed; }
.sullys-hdr--pinned .sullys-hdr-logo {
    transition: opacity var(--dur-med) var(--ease-out-cubic), transform var(--dur-med) var(--ease-out-cubic), visibility 0s;
}
.sullys-hdr--pinned .sullys-hdr-wave { transition: color var(--dur-med) var(--ease-out-cubic), opacity var(--dur-med) var(--ease-out-cubic), transform var(--dur-med) var(--ease-out-cubic); }
.sullys-hdr--pinned.is-scrolled .sullys-hdr-logo img.sullys-hdr-logo-light { display: none !important; }
.sullys-hdr--pinned.is-scrolled .sullys-hdr-logo img.sullys-hdr-logo-dark  { display: block !important; }
.sullys-hdr--pinned.is-scrolled .sullys-hdr-wave { color: var(--hdr-fg-scrolled); }
.sullys-hdr--pinned.is-scrolled.is-on-dark .sullys-hdr-logo img.sullys-hdr-logo-light { display: block !important; }
.sullys-hdr--pinned.is-scrolled.is-on-dark .sullys-hdr-logo img.sullys-hdr-logo-dark  { display: none !important; }
.sullys-hdr--pinned.is-scrolled.is-on-dark .sullys-hdr-wave { color: var(--hdr-fg); }

/* ---------- Header over the footer ----------
   The footer carries its own big logo, so the pinned logo + wave fade out when the footer reaches
   the top of the screen (no double logo). The hamburger stays. Class set by revised.js. */
.sullys-hdr.is-at-footer .sullys-hdr-logo,
.sullys-hdr--scroll.is-scrolled.is-at-footer .sullys-hdr-logo {
    opacity: 0; visibility: hidden; transform: translate(-50%, -12px); pointer-events: none;
    transition: opacity var(--dur-med) var(--ease-out-cubic), transform var(--dur-med) var(--ease-out-cubic), visibility 0s linear var(--dur-med);
}
.sullys-hdr.is-at-footer .sullys-hdr-wave { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.sullys-hdr--scroll .sullys-hdr-wave { transition: color var(--dur-med) var(--ease-out-cubic), opacity var(--dur-med) var(--ease-out-cubic), transform var(--dur-med) var(--ease-out-cubic); }

/* ---------- Menu overlay: slides down from the top, then the content fades up in sequence ---------- */
.sullys-overlay {
    opacity: 1; transform: translateY(-100%);
    transition: transform .55s cubic-bezier(.55, 0, .75, .2), visibility 0s linear .55s;
}
.sullys-overlay.is-open {
    opacity: 1; transform: translateY(0);
    transition: transform .85s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)), visibility 0s;
}
.sullys-overlay .sullys-overlay-top,
.sullys-overlay .sullys-overlay-primary a,
.sullys-overlay .sullys-overlay-secondary a,
.sullys-overlay .sullys-overlay-contact,
.sullys-overlay .sullys-overlay-photo {
    opacity: 0; translate: 0 16px;
    transition: opacity .2s ease, translate .2s ease, color var(--dur-fast) var(--ease-out-cubic);
}
.sullys-overlay.is-open .sullys-overlay-top,
.sullys-overlay.is-open .sullys-overlay-primary a,
.sullys-overlay.is-open .sullys-overlay-secondary a,
.sullys-overlay.is-open .sullys-overlay-contact,
.sullys-overlay.is-open .sullys-overlay-photo {
    opacity: 1; translate: 0 0;
    transition: opacity .7s var(--ease-out-cubic) var(--ovl-d, .35s), translate .8s var(--ease-out-cubic) var(--ovl-d, .35s), color var(--dur-fast) var(--ease-out-cubic);
}
.sullys-overlay .sullys-overlay-top { --ovl-d: .3s; }
.sullys-overlay-primary a:nth-child(1) { --ovl-d: .38s; } .sullys-overlay-primary a:nth-child(2) { --ovl-d: .45s; }
.sullys-overlay-primary a:nth-child(3) { --ovl-d: .52s; } .sullys-overlay-primary a:nth-child(4) { --ovl-d: .59s; }
.sullys-overlay-primary a:nth-child(5) { --ovl-d: .66s; } .sullys-overlay-primary a:nth-child(n+6) { --ovl-d: .72s; }
.sullys-overlay-secondary a:nth-child(1) { --ovl-d: .46s; } .sullys-overlay-secondary a:nth-child(2) { --ovl-d: .51s; }
.sullys-overlay-secondary a:nth-child(3) { --ovl-d: .56s; } .sullys-overlay-secondary a:nth-child(4) { --ovl-d: .61s; }
.sullys-overlay-secondary a:nth-child(5) { --ovl-d: .66s; } .sullys-overlay-secondary a:nth-child(n+6) { --ovl-d: .71s; }
.sullys-overlay .sullys-overlay-contact { --ovl-d: .78s; }
.sullys-overlay .sullys-overlay-photo { --ovl-d: .55s; } .sullys-overlay .sullys-overlay-photo:nth-child(2) { --ovl-d: .68s; }
.sullys-overlay.is-editor-preview, .sullys-overlay.is-editor-preview * { transition: none !important; }
.sullys-overlay.is-editor-preview .sullys-overlay-top, .sullys-overlay.is-editor-preview .sullys-overlay-primary a,
.sullys-overlay.is-editor-preview .sullys-overlay-secondary a, .sullys-overlay.is-editor-preview .sullys-overlay-contact,
.sullys-overlay.is-editor-preview .sullys-overlay-photo { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
    .sullys-overlay, .sullys-overlay.is-open { transform: none; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
    .sullys-overlay.is-open { opacity: 1; transition: opacity .3s ease, visibility 0s; }
    .sullys-overlay .sullys-overlay-top, .sullys-overlay .sullys-overlay-primary a, .sullys-overlay .sullys-overlay-secondary a,
    .sullys-overlay .sullys-overlay-contact, .sullys-overlay .sullys-overlay-photo { opacity: 1; translate: 0 0; transition: none; }
}

/* 30 Sep 2026: grey line (scrollbar) next to the photo piles.
   Elementor custom CSS used overflow-x:hidden on these widgets/sections,
   which turns them into scroll boxes; the fade-up entrance (translateY)
   then overflows by a few px and some browsers draw a scrollbar. The
   custom CSS now uses overflow-x:clip; this is the safety net. */
.elementor-widget-sullys_postcards,
.elementor-widget-sullys_story_cards,
.elementor-widget-sullys_story_stack,
.e-con:has(> .elementor-widget-sullys_story_stack) {
    scrollbar-width: none;
}
.elementor-widget-sullys_postcards::-webkit-scrollbar,
.elementor-widget-sullys_story_cards::-webkit-scrollbar,
.elementor-widget-sullys_story_stack::-webkit-scrollbar,
.e-con:has(> .elementor-widget-sullys_story_stack)::-webkit-scrollbar {
    display: none;
}