/* ==========================================================================
   Sunwashed — the shared sub-page design system.

   Every guide, event, activity, category and listing page renders through
   the same shell (site/src/layouts/SubPageLayout.astro): warm sand paper,
   scalloped wave edges between bands, a sticky right rail, and the
   driftwood-signpost footer. Article bodies carry NO inline styles; the
   `.sw-article` rules below are the single source of truth for how guide
   prose looks, which is what keeps every article page identical.

   Loaded after style.css, so anything here intentionally wins.
   ========================================================================== */

:root {
  --sw-paper: #fdfcf0;
  --sw-paper-dot: rgba(14, 75, 91, 0.055);
  --sw-edge: #ecdfba;          /* card borders on paper */
  --sw-hairline: #f1e9d3;      /* list separators */
  --sw-rule: #e6dcbe;          /* rail heading rule */
  --sw-muted: #5b7180;
  --sw-sandtop: #f3e7c3;       /* footer gradient */
  --sw-sandbot: #e9d6a8;
  --sw-sandink: #6b5237;
}

/* --------------------------------------------------------------- paper --- */

body.sunwashed {
  background-color: var(--sw-paper);
}

.sw-paper {
  background: var(--sw-paper);
  background-image: radial-gradient(var(--sw-paper-dot) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

/* Scalloped wave edge. Sits absolutely at the top or bottom of a band and
   bites half-circles of the NEXT band's colour out of this one, so the two
   meet on a wave line instead of a straight rule. --sw-scallop is the colour
   being bitten in. */
.sw-scallop {
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  background: transparent radial-gradient(circle at 20px var(--sw-scallop-y, 100%), var(--sw-scallop, #fdfcf0) 20px, transparent 21px) repeat-x;
  background-size: 40px 26px;
}
.sw-scallop--bottom { bottom: 0; --sw-scallop-y: 100%; }
.sw-scallop--top { top: 0; --sw-scallop-y: 0%; }

/* -------------------------------------------------------------- header --- */

body.sunwashed header {
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------- hero --- */

.sw-hero {
  position: relative;
  /* min-height, never height: the hero is bottom-aligned, so a title that
     outgrows a fixed box overflows upwards — under the fixed header. Long
     titles on narrow screens did exactly that. */
  min-height: 420px;
  margin-top: var(--header-height);
  padding-top: 2rem;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
}

.sw-hero-inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem 3.5rem;
}

.sw-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.sw-eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
}

.sw-eyebrow-sub {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.sw-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  color: var(--white);
  max-width: 820px;
  margin: 0 0 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  text-wrap: pretty;
}

.sw-hero p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 640px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Landing variant: the homepage and the 404 centre their hero and carry
   call-to-action buttons under the deck. */
.sw-hero--center {
  min-height: 78vh;
  justify-content: center;
  text-align: center;
}
.sw-hero--center .sw-hero-inner { padding-bottom: 0; }
.sw-hero--center .sw-hero-meta { justify-content: center; }
.sw-hero--center h1 { margin-left: auto; margin-right: auto; }
.sw-hero--center p { margin-left: auto; margin-right: auto; }

.sw-hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
.sw-hero-cta .btn-white { background: var(--white); color: var(--primary); }
.sw-hero-cta .btn-white:hover { background: var(--accent); color: var(--primary); }

/* Narrow screens, and any short viewport (a phone held sideways), let the
   landing hero grow to its content instead of being clipped to a fixed
   height — the CTAs live at the bottom of it. Two classes deep so it
   outranks the generic mobile `.sw-hero` height further down the file. */
@media (max-width: 768px), (max-height: 560px) {
  .sw-hero.sw-hero--center {
    min-height: 0;
    padding: 3rem 0 3.5rem;
  }
  .sw-hero-cta { margin-top: 1.25rem; }
}

/* --------------------------------------------------------- breadcrumbs --- */

body.sunwashed .breadcrumbs {
  background: var(--sw-paper);
  background-image: radial-gradient(var(--sw-paper-dot) 1px, transparent 1.2px);
  background-size: 16px 16px;
  padding: 1rem 0;
}

body.sunwashed .breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: #c9b98a;
  font-size: 0.9rem;
  opacity: 1;
}

body.sunwashed .breadcrumbs a {
  background: transparent;
  padding: 0;
  color: var(--secondary);
}
body.sunwashed .breadcrumbs a:hover { background: transparent; color: var(--primary); transform: none; }

body.sunwashed .breadcrumbs .current {
  background: transparent;
  padding: 0;
  color: var(--primary);
}

body.sunwashed .conditions-pill {
  background: var(--white);
  border: 1px solid var(--sw-edge);
  font-weight: 700;
  font-size: 0.82rem;
}
body.sunwashed .conditions-pill:hover {
  background: var(--white);
  color: var(--text-dark);
  border-color: var(--secondary);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------- layout --- */

.sw-main {
  position: relative;
  /* `clip` rather than `hidden` so the sticky/absolute decorations still work
     and no scroll container is created. Anything genuinely wide (tables, the
     carousel) scrolls inside its own wrapper. */
  overflow-x: clip;
}

.sw-shell {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem 3rem;
}

.sw-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

/* `min-width: 0` and `max-width: 100%` are both load-bearing: without them a
   flex item sizes to its widest descendant, and the property pages' photo
   carousel is thousands of pixels wide before Swiper initialises. */
.sw-col { flex: 1 1 0; min-width: 0; max-width: 100%; }

/* Pages moved onto this shell still wrap their own sections in `.container`,
   which style.css paints white and pads. Inside the shell the paper is the
   ground, so neutralise it rather than editing every page. */
.sw-main .container,
.sw-main .section {
  background: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.sw-main .section { padding-top: 0; padding-bottom: 0; }

/* The trip planner's option panel painted itself as a bordered card back
   when the page ground was white. On the paper it reads as a stray box. */
.sw-main .planner-options-section .container {
  border: 0;
  box-shadow: none;
}

/* Not sticky: the full rail (two property cards, the events panel and the
   signpost) is roughly twice a laptop viewport, and a sticky element taller
   than the viewport pins its top and hides everything below it. It scrolls
   with the article instead, so all of it is reachable. */
.sw-rail {
  width: 360px;
  flex: none;
}

/* -------------------------------------------------- article typography --- */

.sw-article { color: var(--text-dark); }

.sw-article > *:first-child { margin-top: 0; }

.sw-article p {
  line-height: 1.85;
  margin: 0 0 1rem;
}

/* Deck: an article that opens on bare prose reads its first two paragraphs
   a size up. Anchored to :first-child, not :first-of-type — pages that open
   on a card would otherwise get an arbitrary mid-article paragraph greyed. */
.sw-article > p:first-child {
  font-size: 1.2rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  text-wrap: pretty;
}
.sw-article > p:first-child + p { color: var(--sw-muted); margin-bottom: 2rem; }

/* Section headings get the golden dash rather than a rule. Inline-block, not
   a flex child — some pages centre their headings, and a flex h2 ignores
   text-align. */
.sw-article h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 2.25rem 0 1rem;
  text-wrap: balance;
}
.sw-article h2::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 4px;
  margin-right: 0.75rem;
  border-radius: 4px;
  background: var(--accent);
  vertical-align: middle;
}

.sw-article h3 {
  font-size: 1.25rem;
  margin: 1.75rem 0 0.65rem;
}

.sw-article h4 {
  font-size: 1.05rem;
  margin: 1.4rem 0 0.5rem;
}

.sw-article ul,
.sw-article ol {
  line-height: 2;
  padding-left: 1.2rem;
  margin: 0 0 1rem;
}
.sw-article li { margin-bottom: 0.15rem; }

.sw-article strong { color: var(--primary); }
/* The exclusions are load-bearing: a bare `.sw-article a` outranks
   `.btn-primary` and every `.sw-*` link component on specificity, and would
   repaint their labels link-teal — it did exactly that to the buttons and to
   the driftwood signs, whose ink colour is the whole point. */
.sw-article a:not(.btn):not([class*="sw-"]) { color: var(--secondary); font-weight: 600; }
.sw-article a:not(.btn):not([class*="sw-"]):hover { color: var(--primary); text-decoration: underline; }
.sw-article .btn { margin: 0.25rem 0.5rem 0.5rem 0; }

.sw-article img {
  width: 100%;
  border-radius: 14px;
}

.sw-article blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 4px solid var(--accent);
  color: var(--text-dark);
  font-size: 1.05rem;
}

.sw-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 2rem;
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 14px;
  overflow: hidden;
  font-size: 0.95rem;
}
.sw-article thead th {
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
}
.sw-article th,
.sw-article td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--sw-hairline);
  vertical-align: top;
}
.sw-article tbody tr:last-child td { border-bottom: 0; }

/* Block roles. Article bodies tag their blocks with one of these six
   classes so the whole guide library renders identically. */
.sw-figure {
  border-radius: 14px;
  overflow: hidden;
  margin: 1.5rem 0 2rem;
}
.sw-figure img { border-radius: 0; }

.sw-card {
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}
.sw-card > *:last-child { margin-bottom: 0; }

.sw-note {
  background: #f6f1de;
  border: 1px solid var(--sw-edge);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}
.sw-note > *:last-child { margin-bottom: 0; }

.sw-highlight {
  background: linear-gradient(135deg, #e8f4f8, #fdfcf0);
  border: 1px solid #d7e8ee;
  border-radius: 16px;
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}
.sw-highlight > *:last-child { margin-bottom: 0; }

.sw-cta {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--white);
  border-radius: 16px;
  padding: 1.75rem;
  margin: 2rem 0 1.5rem;
}
.sw-cta h2,
.sw-cta h3,
.sw-cta h4 { color: var(--white); }
.sw-cta p { color: rgba(255, 255, 255, 0.9); }
.sw-cta strong { color: var(--accent); }
.sw-cta a:not(.btn) { color: var(--accent); }
.sw-cta > *:last-child { margin-bottom: 0; }
.sw-cta .btn-outline { border-color: var(--white); color: var(--white); }
.sw-cta .btn-outline:hover { background: var(--white); color: var(--primary); }

.sw-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 0 0 1.5rem;
}
.sw-cols > * { margin-bottom: 0; }

/* ----------------------------------------------------------- card grid --- */

/* Listing tiles: the /guides, /events, /things-to-do indexes and the
   category pages all lay their items out the same way. */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 0 0 2rem;
}

.sw-tile {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px -18px rgba(14, 75, 91, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sw-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -18px rgba(14, 75, 91, 0.55);
}

.sw-tile-img {
  display: block;
  height: 190px;
  background-color: var(--sw-edge);
  background-size: cover;
  background-position: center;
}

.sw-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.1rem 1.2rem 1.25rem;
  flex: 1;
}

.sw-tile-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary);
  line-height: 1.25;
}

.sw-tile-date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--secondary);
}

.sw-tile-desc {
  font-size: 0.92rem;
  color: var(--sw-muted);
  line-height: 1.6;
  flex: 1;
}

.sw-tile .sw-more { margin-top: 0.35rem; font-size: 0.9rem; }

/* ---------------------------------------------------------------- rail --- */

.sw-rail-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.sw-rail-head h3 {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0;
}
.sw-rail-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sw-rule);
}

.sw-propcard {
  display: block;
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px -16px rgba(14, 75, 91, 0.5);
  margin-bottom: 1.1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sw-propcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -16px rgba(14, 75, 91, 0.55);
}

.sw-propcard-media { position: relative; }
.sw-propcard-media img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 0;
}

.sw-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--accent);
  padding: 5px 10px;
  border-radius: 999px;
}
.sw-tag--dark { color: var(--white); background: var(--primary); }

.sw-price {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 12px;
  border-radius: 999px;
}

.sw-propcard-body { padding: 1.1rem 1.2rem 1.25rem; }
.sw-propcard-body h4 { font-size: 1.3rem; margin: 0 0 0.3rem; }
.sw-propcard-sub { font-size: 0.9rem; color: var(--sw-muted); margin: 0 0 0.85rem; }

.sw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.sw-chip {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  background: #e8f4f8;
  padding: 4px 10px;
  border-radius: 999px;
}
.sw-chip--warm { color: #8a6200; background: #fff4d6; }

.sw-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
}

/* The rail's Next-available teaser is the shared NextAvailable component;
   trim its default margin so it sits inside the card rhythm. */
.sw-propcard-body .nextavail { margin-bottom: 0.9rem; }

.sw-panel {
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 18px;
  padding: 1.25rem;
  margin-bottom: 1.1rem;
}
.sw-panel h4 { font-size: 1rem; margin: 0 0 0.6rem; }

.sw-eventrow {
  display: block;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--sw-hairline);
}
.sw-eventrow:last-of-type { border-bottom: 0; }
.sw-eventrow-date {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--secondary);
}
.sw-eventrow-title { font-size: 0.9rem; color: var(--text-dark); }

.sw-panel-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

/* ------------------------------------------------ things-to-do signpost --- */

.sw-ttd {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sw-edge);
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1.4rem;
  background: linear-gradient(180deg, #f4f9f7 0%, #e6f1f0 40%, #abd2d3 40.2%, #74b1b2 54%, #549a9c 72%, #4f9496 100%);
}
.sw-ttd h4 { position: relative; font-size: 1rem; margin: 0 0 0.15rem; }
.sw-ttd-sub { position: relative; font-size: 0.82rem; color: #3d5a68; margin: 0 0 0.85rem; }

.sw-sun {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, #fdeec2 0 24%, rgba(253, 238, 194, 0.45) 46%, transparent 68%);
}

.sw-beach {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, #ecdcb4 0%, #e2cd9c 100%);
}
.sw-beach-lip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  height: 13px;
  background-image:
    radial-gradient(150px 12px at 78px 100%, #ecdcb4 0 99%, transparent 100%),
    radial-gradient(210px 8px at 220px 100%, #ecdcb4 0 99%, transparent 100%);
  background-size: 300px 13px, 420px 13px;
  background-repeat: repeat-x;
}

.sw-tide {
  position: absolute;
  left: 0;
  right: 0;
  animation: sw-tide-wash 8s ease-in-out infinite;
}
.sw-tide--foam {
  bottom: calc(28% - 11px);
  animation: sw-tide-wash 8s ease-in-out infinite, sw-tide-foam 8s ease-in-out infinite;
}
.sw-tide--foam > div {
  height: 16px;
  background-image:
    radial-gradient(150px 15px at 78px 0, rgba(253, 250, 240, 0.85) 0 99%, transparent 100%),
    radial-gradient(220px 11px at 240px 0, rgba(253, 250, 240, 0.85) 0 99%, transparent 100%);
  background-size: 300px 16px, 440px 16px;
  background-repeat: repeat-x;
  animation: sw-tide-drift 26s linear infinite;
}
.sw-tide--water { bottom: calc(28% - 8px); }
.sw-tide-sheet {
  height: 22px;
  background: linear-gradient(180deg, rgba(84, 154, 156, 0) 0%, rgba(84, 154, 156, 0.45) 65%, rgba(84, 154, 156, 0.45) 100%);
  margin-bottom: -1px;
}
.sw-tide-lip {
  height: 13px;
  background-image:
    radial-gradient(150px 13px at 78px 0, rgba(84, 154, 156, 0.45) 0 99%, transparent 100%),
    radial-gradient(220px 9px at 240px 0, rgba(84, 154, 156, 0.45) 0 99%, transparent 100%);
  background-size: 300px 13px, 440px 13px;
  background-repeat: repeat-x;
  animation: sw-tide-drift 26s linear infinite;
}

@keyframes sw-tide-wash {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(6px); }
}
@keyframes sw-tide-foam {
  0%, 15%, 100% { opacity: 0.3; }
  45%, 60% { opacity: 0.9; }
}
@keyframes sw-tide-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 600px 0, -880px 0; }
}

/* The signpost itself: a driftwood post with hand-cut planks nailed to it. */
.sw-post {
  position: relative;
  padding: 0.25rem 0 3.4rem;
}
.sw-post::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0.6rem;
  width: 11px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #a5876a 0%, #8a6a4b 45%, #6e5238 100%);
  border-radius: 5px 5px 2px 2px;
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.25);
}
.sw-post::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  width: 52px;
  height: 13px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(90, 59, 36, 0.4) 0 40%, rgba(90, 59, 36, 0.15) 65%, transparent 72%);
  border-radius: 50%;
}

.sw-signs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sw-sign {
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.6rem 0.5rem 1.1rem;
  font-family: 'Permanent Marker', var(--font-heading), cursive;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 3px 3px rgba(40, 25, 10, 0.4));
  transition: transform 0.2s ease;
  color: var(--sw-ink, #fdf6e3);
  transform: rotate(var(--sw-tilt, 0deg));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.20)),
    repeating-linear-gradient(179deg, rgba(0, 0, 0, 0.17) 0 1px, transparent 1px 4px, rgba(0, 0, 0, 0.08) 4px 5px, transparent 5px 9px),
    var(--sw-plank, #6b5843);
}

/* Odd planks point left, even planks point right. */
.sw-sign:nth-child(odd) { align-self: flex-start; }
.sw-sign:nth-child(even) {
  align-self: flex-end;
  padding: 0.5rem 1.1rem 0.5rem 1.6rem;
}

/* Each plank is cut and weathered differently — eight ragged silhouettes
   cycled by position so no two neighbours match. */
.sw-sign:nth-child(8n+1) { --sw-plank: #6b5843; --sw-ink: #7fe3c3; --sw-tilt: -2.5deg;
  clip-path: polygon(1.5% 6%, 4% 28%, 0.5% 46%, 3.5% 64%, 1% 84%, 5% 98%, calc(100% - 18px) 94%, 100% 50%, calc(100% - 18px) 2%, 40% 6%); }
.sw-sign:nth-child(8n+2) { --sw-plank: #8b7a63; --sw-ink: #ffd94d; --sw-tilt: 2deg;
  clip-path: polygon(18px 4%, 55% 0, 96.5% 5%, 99% 22%, 96% 40%, 100% 58%, 97% 76%, 99.5% 94%, 60% 100%, 18px 96%, 0 50%); }
.sw-sign:nth-child(8n+3) { --sw-plank: #55463a; --sw-ink: #ff9e5e; --sw-tilt: 2.4deg;
  clip-path: polygon(0.5% 10%, 3% 26%, 1% 44%, 4.5% 60%, 0 78%, 3% 94%, 45% 98%, calc(100% - 18px) 100%, 100% 50%, calc(100% - 18px) 4%, 50% 2%); }
.sw-sign:nth-child(8n+4) { --sw-plank: #756550; --sw-ink: #7fd4f4; --sw-tilt: -2.2deg;
  clip-path: polygon(18px 2%, 42% 6%, 97% 0, 99.5% 18%, 96.5% 36%, 100% 54%, 96% 72%, 99% 90%, 97% 98%, 55% 94%, 18px 100%, 0 50%); }
.sw-sign:nth-child(8n+5) { --sw-plank: #8b7a63; --sw-ink: #ff9fb8; --sw-tilt: -1.6deg;
  clip-path: polygon(2% 4%, 0 24%, 4% 40%, 1% 58%, 4.5% 76%, 1.5% 92%, 50% 100%, calc(100% - 18px) 96%, 100% 50%, calc(100% - 18px) 0, 45% 4%); }
.sw-sign:nth-child(8n+6) { --sw-plank: #55463a; --sw-ink: #a9b8ff; --sw-tilt: 1.8deg;
  clip-path: polygon(18px 6%, 48% 0, 96% 4%, 99% 20%, 95.5% 38%, 99.5% 56%, 96% 74%, 100% 92%, 52% 96%, 18px 94%, 0 50%); }
.sw-sign:nth-child(8n+7) { --sw-plank: #6b5843; --sw-ink: #b8f07a; --sw-tilt: 1.5deg;
  clip-path: polygon(1% 8%, 4.5% 24%, 0.5% 42%, 3% 60%, 0 80%, 4% 96%, 55% 100%, calc(100% - 18px) 98%, 100% 50%, calc(100% - 18px) 2%, 35% 0); }
.sw-sign:nth-child(8n+8) { --sw-plank: #8b7a63; --sw-ink: #d9a9f0; --sw-tilt: -2deg;
  clip-path: polygon(18px 0, 50% 4%, 97.5% 2%, 96% 20%, 100% 38%, 96.5% 56%, 99.5% 74%, 96% 90%, 98% 100%, 45% 96%, 18px 98%, 0 50%); }

.sw-sign:hover { transform: rotate(var(--sw-tilt, 0deg)) scale(1.04); }

.sw-tripcta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.75rem;
  background: var(--primary);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--sw-paper);
  box-shadow: 0 8px 18px -8px rgba(14, 75, 91, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
}
.sw-tripcta:hover { transform: translateY(-2px); background: var(--secondary); color: var(--sw-paper); }

/* The article section-dash heading, available to pages that opt out of
   `.sw-article` but still want a prose heading (e.g. /compare). */
.sw-h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 2.25rem 0 1rem;
  text-wrap: balance;
}
.sw-h2::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 4px;
  margin-right: 0.75rem;
  border-radius: 4px;
  background: var(--accent);
  vertical-align: middle;
}

/* ------------------------------------------------------- category signs --- */

/* The signpost planks, laid out as a horizontal jump-nav across the top of a
   listing page. Same hand-cut silhouettes as the rail signpost, minus the
   post — these point across the page rather than off it. */
.sw-signrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  align-items: center;
  margin: 0 0 2.25rem;
  padding: 0.35rem 0 0.75rem;
}

.sw-signrow-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-muted);
  margin-right: 0.15rem;
}

.sw-signrow .sw-sign {
  width: auto;
  align-self: auto;
  padding: 0.5rem 1.6rem 0.5rem 1.15rem;
  font-size: 0.95rem;
}
/* The rail alternates planks left and right; in a row they all point right. */
.sw-signrow .sw-sign:nth-child(even) {
  align-self: auto;
  padding: 0.45rem 1.5rem 0.45rem 1.1rem;
}

/* Anchor targets have to clear the fixed header. */
.sw-anchor { scroll-margin-top: calc(var(--header-height) + 1.5rem); }

@media (max-width: 768px) {
  .sw-signrow { gap: 0.55rem; }
  .sw-signrow .sw-sign { font-size: 0.78rem; padding: 0.4rem 1.25rem 0.4rem 0.9rem; }
}

/* ------------------------------------------------------------- compare --- */

/* The two "at a glance" cards at the top of /compare. */
.sw-vs-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.sw-vs-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px -20px rgba(14, 75, 91, 0.5);
}
.sw-vs-card img { width: 100%; height: 230px; object-fit: cover; border-radius: 0; }
.sw-vs-card-body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.sw-vs-card h2 { font-size: 1.6rem; margin: 0; }
.sw-vs-card h2::before { content: none; }
.sw-vs-card-sub { color: var(--sw-muted); font-size: 0.95rem; margin: 0; }
.sw-vs-card-rate { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--primary); }
.sw-vs-card-rate span { font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--sw-muted); }
.sw-vs-card-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.4rem; }

/* "Pick by what matters" — one row per deciding factor. */
.sw-decide { display: grid; gap: 0.75rem; margin-bottom: 2.5rem; }
.sw-decide-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 14px;
}
.sw-decide-q { font-size: 0.98rem; }
.sw-decide-a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  background: var(--accent);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.sw-decide-a--either { background: #e8f4f8; }

/* The full feature table. */
.sw-vs-table-wrap { overflow-x: auto; margin-bottom: 2rem; }
.sw-vs-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--sw-edge);
  border-radius: 16px;
  overflow: hidden;
}
.sw-vs-table th,
.sw-vs-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--sw-hairline);
  text-align: left;
  vertical-align: top;
  font-size: 0.94rem;
}
.sw-vs-table thead th {
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}
.sw-vs-table thead th small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}
.sw-vs-table tbody tr:last-child td { border-bottom: 0; }
.sw-vs-table tbody tr:nth-child(2n) { background: #fbf9ee; }
.sw-vs-table th[scope="row"] {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--primary);
  width: 30%;
}
.sw-vs-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.75rem;
  color: var(--sw-muted);
  font-size: 0.88rem;
}

/* Row-level yes/no marks. `.sw-no` is muted rather than alarming — a house
   not having a thing is a fit question, not a defect. */
.sw-yes { color: #2f7d5a; font-weight: 700; }
.sw-no { color: var(--text-light); }
.sw-yes::before { content: '✓ '; }
.sw-no::before { content: '— '; }

@media (max-width: 768px) {
  .sw-vs-cards { grid-template-columns: 1fr; }
  .sw-decide-row { grid-template-columns: 1fr; align-items: start; }
  .sw-decide-a { justify-self: start; }
}

/* ------------------------------------------------------- property band --- */

.sw-band {
  position: relative;
  background: var(--primary);
  padding: 3.25rem 0 3rem;
}
.sw-band-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
}
.sw-band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.sw-band-head > div { max-width: 560px; }
.sw-band-head .sw-eyebrow {
  background: transparent;
  color: var(--accent);
  padding: 0;
}
.sw-band h2 { color: var(--white); font-size: 2.1rem; margin: 0.5rem 0 0.6rem; }
.sw-band-head p { color: rgba(255, 255, 255, 0.75); line-height: 1.75; margin: 0; }

.sw-band-compare {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.sw-band-compare:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

.sw-band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sw-bandcard {
  display: block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  overflow: hidden;
  transition: background 0.25s ease;
}
.sw-bandcard:hover { background: rgba(255, 255, 255, 0.11); }
.sw-bandcard img { width: 100%; height: 230px; object-fit: cover; border-radius: 0; }
.sw-bandcard-body { padding: 1.35rem 1.5rem 1.5rem; }
.sw-bandcard-body .sw-eyebrow { background: transparent; color: var(--accent); padding: 0; font-size: 0.68rem; letter-spacing: 0.12em; }
.sw-bandcard h3 { color: var(--white); font-size: 1.5rem; margin: 0.35rem 0 0.5rem; }
.sw-bandcard .sw-chip {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}
.sw-bandcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sw-bandcard-rate { color: var(--white); }
.sw-bandcard-rate b { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; }
.sw-bandcard-rate span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.sw-bandcard-cta {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.88rem;
}

/* -------------------------------------------------------------- footer --- */

body.sunwashed footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sw-sandtop) 0%, var(--sw-sandbot) 100%);
  color: var(--sw-sandink);
  padding: 3.4rem 0 1.5rem;
  margin-top: 0;
}
body.sunwashed footer .container { position: relative; }
body.sunwashed footer p { color: var(--sw-sandink); }
body.sunwashed footer a { color: var(--sw-sandink) !important; font-size: 0.9rem; }
body.sunwashed footer a:hover { color: var(--primary) !important; }
body.sunwashed footer li { padding: 0.16rem 0; }

/* Tide line where the teal band above meets the sand. */
.sw-foot-tide,
.sw-foot-foam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}
.sw-foot-tide {
  height: 15px;
  background-image:
    radial-gradient(150px 14px at 78px 0, var(--primary) 0 99%, transparent 100%),
    radial-gradient(210px 10px at 220px 0, var(--primary) 0 99%, transparent 100%);
  background-size: 300px 15px, 420px 15px;
  background-repeat: repeat-x;
}
.sw-foot-foam {
  top: 9px;
  height: 12px;
  opacity: 0.75;
  background-image:
    radial-gradient(150px 11px at 78px 0, rgba(253, 250, 240, 0.9) 0 99%, transparent 100%),
    radial-gradient(210px 8px at 220px 0, rgba(253, 250, 240, 0.9) 0 99%, transparent 100%);
  background-size: 300px 12px, 420px 12px;
  background-repeat: repeat-x;
}

.sw-foot-sun {
  position: absolute;
  right: 6%;
  top: 12%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 238, 194, 0.8) 0 24%, rgba(253, 238, 194, 0.3) 46%, transparent 68%);
}

/* Footprints wandering up the sand. */
.sw-foot-step {
  position: absolute;
  width: 9px;
  height: 15px;
  border-radius: 50%;
  background: rgba(122, 94, 58, 0.15);
}
.sw-foot-step::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(122, 94, 58, 0.9);
  transform: translate(5px, -18px);
}
.sw-foot-step--1 { left: 8%; bottom: 18%; transform: rotate(18deg); }
.sw-foot-step--2 { left: 12%; bottom: 26%; transform: rotate(26deg); }
.sw-foot-step--3 { left: 17%; bottom: 33%; transform: rotate(34deg); }

/* Palm tree, left. */
.sw-palm { position: absolute; left: 1%; bottom: 16%; width: 160px; height: 185px; }
.sw-palm i {
  position: absolute;
  display: block;
  transform-origin: left center;
}
.sw-palm .trunk {
  left: 76px; bottom: 0; width: 14px; height: 118px;
  background:
    linear-gradient(90deg, #9c7c5c 0%, #7a5e42 55%, #64492f 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 9px);
  border-radius: 46% 54% 42% 58% / 70% 30% 70% 30%;
  transform: rotate(5deg);
  transform-origin: center bottom;
}
.sw-palm .f1 { left: 82px; top: 52px; width: 74px; height: 24px; background: linear-gradient(90deg, #2c7a7b, #3c8b6e); border-radius: 0 100% 0 100%; transform: rotate(-8deg); }
.sw-palm .f2 { left: 82px; top: 50px; width: 68px; height: 22px; background: linear-gradient(90deg, #256a6b, #2c7a7b); border-radius: 0 100% 0 100%; transform: rotate(-42deg); }
.sw-palm .f3 { left: 84px; top: 48px; width: 60px; height: 22px; background: #3c8b6e; border-radius: 0 100% 0 100%; transform: rotate(-75deg); }
.sw-palm .f4 { left: 84px; top: 52px; width: 74px; height: 24px; background: linear-gradient(270deg, #2c7a7b, #3c8b6e); border-radius: 100% 0 100% 0; transform: rotate(8deg) scaleX(-1); }
.sw-palm .f5 { left: 82px; top: 50px; width: 66px; height: 22px; background: linear-gradient(270deg, #256a6b, #2c7a7b); border-radius: 100% 0 100% 0; transform: rotate(38deg) scaleX(-1); }
.sw-palm .f6 { left: 80px; top: 46px; width: 56px; height: 20px; background: #2c7a7b; border-radius: 100% 0 100% 0; transform: rotate(66deg) scaleX(-1); }
.sw-palm .c1 { left: 78px; top: 60px; width: 11px; height: 11px; border-radius: 50%; background: #7a5e42; }
.sw-palm .c2 { left: 88px; top: 64px; width: 9px; height: 9px; border-radius: 50%; background: #64492f; }
.sw-palm .shade { left: 52px; bottom: -4px; width: 80px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(107, 82, 55, 0.25) 0 45%, transparent 72%); }

/* Beach umbrella, right. */
.sw-umbrella { position: absolute; right: 1.5%; bottom: 12%; width: 150px; height: 170px; }
.sw-umbrella i { position: absolute; display: block; }
.sw-umbrella .shade { left: 38px; bottom: 2px; width: 96px; height: 15px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(107, 82, 55, 0.25) 0 45%, transparent 72%); }
.sw-umbrella .pole { top: 20px; left: 71.5px; width: 5px; height: 128px; border-radius: 3px; background: linear-gradient(90deg, #9c7c5c 0%, #7a5e42 60%, #6e5238 100%); }
.sw-umbrella .tip { top: 8px; left: 71px; width: 6px; height: 16px; border-radius: 3px 3px 0 0; background: #6e5238; }
.sw-umbrella .canopy {
  top: 20px; left: 10px; width: 128px; height: 58px;
  border-radius: 128px 128px 8px 8px / 58px 58px 6px 6px;
  background:
    conic-gradient(from -90deg at 50% 100%, rgba(0,0,0,0.10) 0 1.2deg, transparent 1.2deg 29deg, rgba(0,0,0,0.10) 29deg 31deg, transparent 31deg 59deg, rgba(0,0,0,0.10) 59deg 61deg, transparent 61deg 89deg, rgba(0,0,0,0.10) 89deg 91deg, transparent 91deg 119deg, rgba(0,0,0,0.10) 119deg 121deg, transparent 121deg 149deg, rgba(0,0,0,0.10) 149deg 151deg, transparent 151deg 178.8deg, rgba(0,0,0,0.10) 178.8deg 180deg),
    conic-gradient(from -90deg at 50% 100%, #2c7a7b 0 30deg, #fdf6e3 30deg 60deg, #2c7a7b 60deg 90deg, #fdf6e3 90deg 120deg, #2c7a7b 120deg 150deg, #fdf6e3 150deg 180deg);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.08);
}

/* Footer column headings are nailed-up driftwood plaques. */
body.sunwashed footer h3 {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin-bottom: 0.9rem;
  font-family: 'Permanent Marker', var(--font-heading), cursive;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
  color: var(--sw-ink, #fdf6e3);
  transform: rotate(var(--sw-tilt, 0deg));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(0, 0, 0, 0.19)),
    repeating-linear-gradient(179deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 4px, rgba(0, 0, 0, 0.08) 4px 5px, transparent 5px 9px),
    var(--sw-plank, #6b5843);
}
body.sunwashed footer .grid > div:nth-child(5n+1) h3 { --sw-plank: #55463a; --sw-ink: #fdf6e3; --sw-tilt: -1.6deg;
  clip-path: polygon(0 10%, 2% 34%, 0.5% 58%, 2.5% 82%, 1% 98%, 99% 100%, 97.5% 72%, 100% 46%, 98% 14%, 55% 2%); }
body.sunwashed footer .grid > div:nth-child(5n+2) h3 { --sw-plank: #6b5843; --sw-ink: #9fd8c2; --sw-tilt: 1.4deg;
  clip-path: polygon(1% 6%, 0 32%, 2% 56%, 0.5% 80%, 2% 96%, 98% 98%, 100% 74%, 97.5% 48%, 99.5% 16%, 45% 0); }
body.sunwashed footer .grid > div:nth-child(5n+3) h3 { --sw-plank: #8b7a63; --sw-ink: #f2cf6b; --sw-tilt: -1.3deg;
  clip-path: polygon(1.5% 4%, 0 30%, 2% 54%, 0.5% 78%, 2.5% 98%, 97.5% 100%, 99.5% 72%, 97% 46%, 100% 18%, 40% 2%); }
body.sunwashed footer .grid > div:nth-child(5n+4) h3 { --sw-plank: #6b5843; --sw-ink: #fdf6e3; --sw-tilt: 1.5deg;
  clip-path: polygon(0 8%, 2.5% 32%, 1% 56%, 3% 80%, 0.5% 96%, 99% 98%, 97% 70%, 99.5% 44%, 98% 12%, 52% 0); }
body.sunwashed footer .grid > div:nth-child(5n+5) h3 { --sw-plank: #55463a; --sw-ink: #9fd8c2; --sw-tilt: -1.8deg;
  clip-path: polygon(1% 12%, 0 36%, 2.5% 60%, 1% 84%, 3% 100%, 98% 96%, 100% 68%, 97.5% 42%, 99% 10%, 48% 2%); }

body.sunwashed .sw-foot-legal {
  position: relative;
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(107, 82, 55, 0.4);
  text-align: center;
  color: rgba(107, 82, 55, 0.75);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  /* Stacked, the rail sits under the article. `align-items: stretch` matters:
     with the base `flex-start`, a column flex item shrink-to-fits its widest
     descendant and the page grows far past the viewport. */
  .sw-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .sw-col,
  .sw-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .sw-rail .sw-propcard-media img { height: 240px; }
}

@media (max-width: 768px) {
  /* Comfortable thumb targets. `.btn` is an inline-block in style.css, so
     centre the label once it has a minimum height. */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Paired CTAs go full width rather than sitting as two small pills. */
  .sw-vs-card-actions .btn,
  .sw-cta .btn { width: 100%; }

  .sw-hero { min-height: 300px; padding-top: 1.5rem; }
  .sw-hero-inner { padding: 0 1.25rem 2rem; }
  .sw-shell { padding: 0 1.25rem 2rem; }
  .sw-band-inner { padding: 0 1.25rem; }
  .sw-band-grid { grid-template-columns: 1fr; }
  .sw-palm, .sw-umbrella, .sw-foot-step { display: none; }
  .sw-article > p:first-child { font-size: 1.08rem; }
  .sw-article table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-tide,
  .sw-tide--foam,
  .sw-tide--foam > div,
  .sw-tide-lip { animation: none !important; }
  .sw-sign, .sw-propcard, .sw-tripcta { transition: none; }
}