/* Island Compass - Concierge (327) only. Loaded by ic-concierge.php.
   Every selector is prefixed body.page-id-327 so it outranks the unqualified
   Customizer rules, which load inline afterwards. */

/* ---------- 1. HERO: image-led, white type over a scrim ---------- */
body.page-id-327 .ic-pagehero {
  position: relative;
  overflow: hidden;
  align-content: center;
  padding: clamp(72px, 9vw, 130px) clamp(20px, 5vw, 64px) !important;
}
body.page-id-327 .ic-pagehero  {
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
}
body.page-id-327 .ic-ph__copy  { gap: clamp(14px, 1.6vw, 22px); }
body.page-id-327 .ic-ph__h1 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.4vw, 4.75rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--shell-50);
  max-width: 18ch;
  margin: 0;
  text-shadow: 0 2px 40px rgba(22,38,31,.35);
}
body.page-id-327 .ic-ph__lede p {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.45vw, 1.4375rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--shell-50);
  max-width: 54ch;
  margin: 0;
  text-shadow: 0 1px 24px rgba(22,38,31,.55);
}
body.page-id-327 .ic-crumb p,
body.page-id-327 .ic-pagehero .ic-eyebrow p { color: rgba(253,251,248,.82); }
body.page-id-327 .ic-crumb a { color: rgba(253,251,248,.82); }
/* Hero buttons: pink primary, light outline secondary, both larger */
body.page-id-327 .ic-ph__btns  {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: flex-start;
}
body.page-id-327 .ic-ph__btns .elementor-button {
  font-size: var(--text-body-sm);
  letter-spacing: .1em;
  min-height: 54px;
  padding: 0 clamp(22px, 2.2vw, 34px);
}
body.page-id-327 .ic-btn--ghost .elementor-button {
  color: var(--shell-50);
  border: 1px solid rgba(253,251,248,.6);
  background: transparent;
}
body.page-id-327 .ic-btn--ghost .elementor-button:hover { background: rgba(253,251,248,.14); }

/* ---------- 2. REASSURANCE: a confident statement ---------- */
body.page-id-327 .ic-note {
  padding: clamp(56px, 6.5vw, 100px) clamp(20px, 5vw, 64px) !important;
}
body.page-id-327 .ic-note__inner  { max-width: 900px; margin: 0 auto; gap: var(--space-4); }
body.page-id-327 .ic-note__h .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  line-height: 1.2;
  margin: 0;
}
body.page-id-327 .ic-note__p p {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
  font-weight: 300;
  line-height: 1.58;
  color: var(--text-primary);
  max-width: 60ch;
  margin: 0;
}
/* ---------- 3. WHAT WE ARRANGE: editorial cards, three across ---------- */
body.page-id-327 .ic-svcsec { padding: clamp(56px, 6.5vw, 100px) clamp(20px, 5vw, 64px) !important; }
body.page-id-327 .ic-sech .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}
body.page-id-327 .ic-sec__lede p {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}
/* NOTE: .ic-scgrid renders as e-con-full, so it has NO .e-con-inner child.
   Rules aimed at that child - the theme's included - never matched, which is
   why the cards stacked. Target the container itself. */
body.page-id-327 .ic-scgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  align-items: stretch;
}
body.page-id-327 .ic-sc {
  padding: clamp(26px, 2.2vw, 36px) !important;
  border-radius: var(--radius-card);
  border-color: var(--border-default);
}
body.page-id-327 .ic-sc:hover { box-shadow: var(--shadow-md); }
body.page-id-327 .ic-sc  { gap: 12px; }
body.page-id-327 .ic-sc__icon .elementor-icon { font-size: 24px; color: var(--pink-700); }
body.page-id-327 .ic-sc__t .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.6vw, 1.625rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--text-primary);
  margin: 0;
}
body.page-id-327 .ic-sc__d p {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
}
body.page-id-327 .ic-sc__l ul {
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.page-id-327 .ic-sc__l li {
  font-family: var(--font-sans);
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}
/* ---------- 4. HOW IT WORKS: four editorial steps, not a table ---------- */
body.page-id-327 .ic-howsec { padding: clamp(56px, 6.5vw, 100px) clamp(20px, 5vw, 64px) !important; }
body.page-id-327 .ic-steps  {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 40px);
  max-width: none;
}
body.page-id-327 .ic-steps .ic-step {
  padding: var(--space-5) 0 0 !important;
  border-top: 2px solid var(--pink-700);
  border-bottom: 0;
  width: auto !important;
  max-width: none !important;
}
body.page-id-327 .ic-steps .ic-step  { gap: 10px; }
body.page-id-327 .ic-step__n p {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--pink-700);
  margin: 0;
}
body.page-id-327 .ic-step__t .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
body.page-id-327 .ic-step__p p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
/* ---------- 5. PLAN MY STAY: readable labels, premium fields ---------- */
body.page-id-327 .ic-plansec { padding: clamp(56px, 6.5vw, 100px) clamp(20px, 5vw, 64px) !important; }
body.page-id-327 .ic-formrow  { gap: clamp(28px, 4vw, 64px); align-items: flex-start; }
body.page-id-327 .ic-form__aside { flex: 1 1 320px; max-width: 420px; }
body.page-id-327 .ic-form__main { flex: 1 1 460px; }
body.page-id-327 .ic-form__h .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0;
}
body.page-id-327 .ic-form__p p {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 46ch;
}
body.page-id-327 .ic-cline p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
/* WPForms fields, scoped to this page's form wrapper */
body.page-id-327 .ic-formwrap .wpforms-field-label {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
body.page-id-327 .ic-formwrap .wpforms-field-sublabel,
body.page-id-327 .ic-formwrap .wpforms-field-description {
  font-size: .875rem;
  color: var(--text-tertiary);
}
body.page-id-327 .ic-formwrap input[type="text"],
body.page-id-327 .ic-formwrap input[type="email"],
body.page-id-327 .ic-formwrap input[type="date"],
body.page-id-327 .ic-formwrap select,
body.page-id-327 .ic-formwrap textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 13px 15px;
  width: 100%;
}
body.page-id-327 .ic-formwrap input:focus,
body.page-id-327 .ic-formwrap textarea:focus,
body.page-id-327 .ic-formwrap select:focus {
  outline: none;
  border-color: var(--pink-700);
}
body.page-id-327 .ic-formwrap .wpforms-field-checkbox label { font-size: 1rem; line-height: 1.5; }
body.page-id-327 .ic-formwrap button[type="submit"] {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 54px;
  padding: 0 34px;
}
/* ---------- 6. CLOSING BAND: matched to the homepage ---------- */
body.page-id-327 .ic-wasec { padding: clamp(52px, 5.6vw, 86px) clamp(20px, 5vw, 64px) !important; }
body.page-id-327 .ic-wa__h .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--shell-50);
  margin: 0;
}
body.page-id-327 .ic-wa__p p {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 48ch;
}
body.page-id-327 .ic-wasec .elementor-button { min-height: 54px; padding: 0 34px; letter-spacing: .1em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  body.page-id-327 .ic-scgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-id-327 .ic-steps  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.page-id-327 .ic-scgrid { grid-template-columns: 1fr; gap: 14px; }
  body.page-id-327 .ic-steps  { grid-template-columns: 1fr; gap: 22px; }
  body.page-id-327 .ic-pagehero { padding: clamp(56px, 14vw, 88px) 20px !important; }
  body.page-id-327 .ic-ph__btns  { flex-direction: column; align-items: stretch; width: 100%; }
  body.page-id-327 .ic-note,
  body.page-id-327 .ic-svcsec,
  body.page-id-327 .ic-howsec,
  body.page-id-327 .ic-plansec { padding-top: 44px !important; padding-bottom: 44px !important; }
  body.page-id-327 .ic-form__aside { max-width: none; }
  body.page-id-327 .ic-sc { padding: 22px !important; }
}
/* ---- Services grid: tightened card interior so two columns stay compact ---- */
body.page-id-327 .ic-sc { padding: clamp(22px, 1.9vw, 30px) !important; height: 100%; }
body.page-id-327 .ic-sc ,
body.page-id-327 .ic-sc { gap: 10px; }
body.page-id-327 .ic-sc__d p { line-height: 1.55; max-width: 52ch; }
body.page-id-327 .ic-sc__l ul { padding-top: 12px; margin-top: 2px; }
body.page-id-327 .ic-svcsec .ic-wrap { gap: clamp(18px, 2vw, 28px); }

/* Between 900 and 1100 the two columns get narrow; drop the chips to a
   tighter scale rather than letting titles wrap awkwardly. */
@media (max-width: 1100px) and (min-width: 768px) {
  body.page-id-327 .ic-sc__t .elementor-heading-title { font-size: 1.3125rem; }
  body.page-id-327 .ic-sc__l li { font-size: .875rem; padding: 4px 10px; }
}
/* ==========================================================================
   CONCIERGE REFINEMENT (Sep 2026) - page-scoped only.
   1. HERO GRADIENT: the Elementor overlay is a flat 55% wash over the whole
   photograph, which is what makes it look muddy. Replaced with a directional
   gradient - deep behind the copy on the left, clearing toward the right so
   the image can breathe. Applied to the container's existing overlay layer,
   so no new element is introduced.
   ========================================================================== */
body.page-id-327 .ic-pagehero:before {
  background-image: linear-gradient(100deg,
    rgba(12,22,18,.92) 0%,
    rgba(12,22,18,.80) 30%,
    rgba(12,22,18,.52) 55%,
    rgba(12,22,18,.24) 78%,
    rgba(12,22,18,.10) 100%) !important;
  background-color: transparent !important;
}
body.page-id-327 .ic-ph__copy,
body.page-id-327 .ic-ph__btns { position: relative; z-index: 2; }
body.page-id-327 .ic-ph__lede p { text-shadow: 0 1px 18px rgba(10,20,15,.5); }/* 2. BUTTONS - brand pink, elegant rather than bright.
   Primary: soft pink fill with dark ink text (pink on its own is too light to
   carry white type). Secondary: pink hairline that fills gently on hover. */
body.page-id-327 .ic-ph__btns .elementor-button,
body.page-id-327 .ic-btn .elementor-button {
  transition: background-color 320ms cubic-bezier(.22,.61,.36,1),
              border-color 320ms cubic-bezier(.22,.61,.36,1),
              color 320ms cubic-bezier(.22,.61,.36,1),
              transform 320ms cubic-bezier(.22,.61,.36,1),
              box-shadow 320ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-327 .ic-ph__btns .ic-btn--dark .elementor-button {
  background: #FFC2E8;
  border: 1px solid #FFC2E8;
  color: #1B2620;
}
body.page-id-327 .ic-ph__btns .ic-btn--dark .elementor-button:hover {
  background: #FFD4EF;
  border-color: #FFD4EF;
  color: #1B2620;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(10,20,15,.55);
}
body.page-id-327 .ic-btn--ghost .elementor-button {
  border: 1px solid rgba(255,194,232,.7);
  color: var(--shell-50);
}
body.page-id-327 .ic-btn--ghost .elementor-button:hover {
  background: rgba(255,194,232,.16);
  border-color: #FFC2E8;
  transform: translateY(-2px);
}/* 3. SERVICE CARDS - lift and warm on hover */
body.page-id-327 .ic-sc { transition: transform 420ms cubic-bezier(.22,.61,.36,1), box-shadow 420ms cubic-bezier(.22,.61,.36,1), border-color 320ms ease; }
body.page-id-327 .ic-sc:hover { transform: translateY(-4px); border-color: rgba(255,194,232,.75); box-shadow: 0 20px 38px -24px rgba(22,38,31,.42); }
body.page-id-327 .ic-sc__icon .elementor-icon { transition: transform 420ms cubic-bezier(.22,.61,.36,1), color 320ms ease; }
body.page-id-327 .ic-sc:hover .ic-sc__icon .elementor-icon { transform: translateY(-2px); }

/* 4. LINKS - underline draws in from the left */
body.page-id-327 .ic-sc__l a, body.page-id-327 .ic-note__p a { position: relative; color: var(--text-primary); text-decoration: none; padding-bottom: 2px; transition: color 300ms cubic-bezier(.22,.61,.36,1); }
body.page-id-327 .ic-sc__l a:after, body.page-id-327 .ic-note__p a:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--pink-700, #7f3961); transform: scaleX(0); transform-origin: left center; transition: transform 380ms cubic-bezier(.22,.61,.36,1); }
body.page-id-327 .ic-sc__l a:hover, body.page-id-327 .ic-note__p a:hover { color: var(--pink-700, #7f3961); }
body.page-id-327 .ic-sc__l a:hover:after, body.page-id-327 .ic-note__p a:hover:after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  body.page-id-327 .ic-sc, body.page-id-327 .ic-sc__icon .elementor-icon, body.page-id-327 .ic-ph__btns .elementor-button, body.page-id-327 .ic-btn .elementor-button, body.page-id-327 .ic-sc__l a:after { transition: none; }
  body.page-id-327 .ic-sc:hover, body.page-id-327 .ic-ph__btns .elementor-button:hover, body.page-id-327 .ic-btn .elementor-button:hover, body.page-id-327 .ic-sc:hover .ic-sc__icon .elementor-icon { transform: none; }
  body.page-id-327 .ic-sc__l a:hover:after { transform: scaleX(1); }
}

/* Elementor renders the container overlay at opacity: var(--overlay-opacity),
   which this hero sets to 0.5 - so the gradient above was being halved and the
   change was barely visible. The variable is set to 1 here so the gradient
   renders at the strength it is written at. */
body.page-id-327 .elementor-327 .elementor-element.ic-pagehero { --overlay-opacity: 1 !important; }

/* --- HERO COPY LEGIBILITY -------------------------------------------------
   ic-system.css carries a site-wide body-copy rule at (0,6,2) that sets
   text-editor paragraphs to the dark ink colour, and it prints inline AFTER
   this stylesheet - so the light colour set earlier was being overridden and
   the lede rendered dark grey on a mid-tone photograph. Rather than build a
   selector longer than that one, the colour is forced here on two
   page-scoped rules. Deliberate and commented. */
body.page-id-327 .ic-pagehero .ic-ph__lede p {
  color: var(--shell-50, #fdfbf8) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(10,20,15,.55), 0 2px 20px rgba(10,20,15,.5);
}
body.page-id-327 .ic-pagehero .ic-crumb p,
body.page-id-327 .ic-pagehero .ic-crumb a,
body.page-id-327 .ic-pagehero .ic-eyebrow p {
  color: rgba(253,251,248,.92) !important;
  text-shadow: 0 1px 12px rgba(10,20,15,.6);
}
body.page-id-327 .ic-pagehero .ic-ph__h .elementor-heading-title {
  text-shadow: 0 2px 26px rgba(10,20,15,.42);
}
/* --- DARK BANDS: light copy ----------------------------------------------
   Same cause as the hero lede. The site-wide body-copy rule in ic-system.css
   sets text-editor paragraphs to dark ink at (0,6,2) and prints after this
   sheet, so paragraphs inside the dark green bands rendered near-invisible.
   Scoped to this page and to dark sections only. */
body.page-id-327 .ic-section--dark p,
body.page-id-327 .ic-wasec p,
body.page-id-327 .ic-section--dark li,
body.page-id-327 .ic-wasec li {
  color: rgba(253,251,248,.88) !important;
  opacity: 1 !important;
}
body.page-id-327 .ic-section--dark .elementor-heading-title,
body.page-id-327 .ic-wasec .elementor-heading-title {
  color: var(--shell-50, #fdfbf8);
}
body.page-id-327 .ic-section--dark a:not(.elementor-button),
body.page-id-327 .ic-wasec a:not(.elementor-button) {
  color: var(--shell-50, #fdfbf8) !important;
  border-bottom: 1px solid rgba(255,194,232,.6);
  text-decoration: none;
}
/* Breadcrumb current page. The Customizer sets .ic-crumb span:last-child to
   the dark ink colour, which is right on a cream page but invisible over a
   photograph. Brand pink here: readable, and it marks where you are. */
body.page-id-327 .ic-pagehero .ic-crumb span:last-child {
  color: #FFC2E8 !important;
  text-shadow: 0 1px 12px rgba(10,20,15,.6);
}
/* --- "You do not need to be staying in one of our villas" -----------------
   Was a hairline rule over a narrow column of text with a very large empty
   right-hand side and heavy vertical padding. Now a two-column band: copy
   left, image right. The border goes, the padding tightens, and the width
   opens up so the section carries its own weight. */
body.page-id-327 .ic-note {
  padding: clamp(40px, 4.4vw, 68px) clamp(20px, 5vw, 64px) !important;
}
body.page-id-327 .ic-note__inner {
  max-width: var(--container-max, 1320px);
  margin: 0 auto;
  padding-top: 0 !important;
  border-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  column-gap: clamp(28px, 3.4vw, 56px);
  row-gap: 14px;
  grid-auto-rows: min-content;
  align-content: center;
}
body.page-id-327 .ic-note__h .elementor-heading-title { max-width: 24ch; margin: 0; }
body.page-id-327 .ic-note__p p { max-width: 46ch; }/* The image spans both text rows on the right */
body.page-id-327 .ic-note__img {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media, 8px);
}
body.page-id-327 .ic-note__img img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 3 / 2;
  max-height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-327 .ic-note__inner:hover .ic-note__img img { transform: scale(1.03); }

@media (max-width: 900px) {
  body.page-id-327 .ic-note__inner { grid-template-columns: 1fr; gap: 22px; }
  body.page-id-327 .ic-note__img { grid-column: 1; grid-row: auto; order: -1; }
  body.page-id-327 .ic-note__img img { min-height: 0; aspect-ratio: 16 / 9; }
  body.page-id-327 .ic-note__h .elementor-heading-title,
  body.page-id-327 .ic-note__p p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-327 .ic-note__img img { transition: none; }
  body.page-id-327 .ic-note__inner:hover .ic-note__img img { transform: none; }
}
/* --- SCROLL REVEAL --------------------------------------------------------
   Only active once ic-concierge-motion.php has added .ic-anim to the body,
   so nothing is ever hidden without JS running. Elements rise 14px and fade
   in as they enter view, once each, with a small stagger set inline. */
body.page-id-327.ic-anim .ic-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 720ms cubic-bezier(.22,.61,.36,1),
              transform 720ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
body.page-id-327.ic-anim .ic-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-327.ic-anim .ic-reveal { opacity: 1; transform: none; transition: none; }
}/* --- DENSITY -------------------------------------------------------------
   The page reads sparse because each section carried 44px of padding top and
   bottom on top of the gaps between widgets, so bands of empty cream stacked
   up. Padding is now asymmetric and tighter, and section headers sit closer
   to the content they introduce. Copy and structure unchanged. */
body.page-id-327 .ic-svcsec,
body.page-id-327 .ic-howsec,
body.page-id-327 .ic-plansec {
  padding-top: clamp(44px, 4.6vw, 72px) !important;
  padding-bottom: clamp(44px, 4.6vw, 72px) !important;
}
body.page-id-327 .ic-note {
  padding-top: clamp(32px, 3.2vw, 52px) !important;
  padding-bottom: clamp(28px, 3vw, 44px) !important;
}
/* Section intro: eyebrow, heading and lede as one tight block */
body.page-id-327 .ic-svcsec .ic-eyebrow p,
body.page-id-327 .ic-plansec .ic-eyebrow p { margin-bottom: 4px; }
body.page-id-327 .ic-sech .elementor-heading-title { margin: 0 0 10px; }
body.page-id-327 .ic-sec__lede p { margin: 0 0 clamp(20px, 2vw, 30px); max-width: 62ch; }
body.page-id-327 .ic-svcsec .ic-wrap { gap: clamp(12px, 1.2vw, 18px); }/* Service cards: three across on wide screens so the grid fills the width
   and the section stops looking like two lonely columns. */
@media (min-width: 1200px) {
  body.page-id-327 .ic-scgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.page-id-327 .ic-sc__t .elementor-heading-title { margin: 2px 0 6px; }
body.page-id-327 .ic-sc__d p { margin: 0 0 10px; }
body.page-id-327 .ic-sc__icon { margin-bottom: 2px; }

/* How it works: the four steps sit closer and the rules read as one row */
body.page-id-327 .ic-howsec .ic-sech .elementor-heading-title { margin-bottom: clamp(18px, 2vw, 28px); }@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
}
/* --- PLAN MY STAY: full-width row ----------------------------------------
   The row is a flex pair - copy aside on the left, form on the right. An
   earlier attempt made the aside a grid, which let it expand and pushed the
   form onto its own line, leaving one narrow column. Back to flex, with the
   row widened so it spans the page properly. */
body.page-id-327 .ic-plansec > .e-con-inner,
body.page-id-327 .ic-plansec {
  max-width: none;
}
body.page-id-327 .ic-formrow {
  max-width: var(--container-max, 1320px);
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 72px);
}
body.page-id-327 .ic-form__aside {
  flex: 0 1 520px;
  min-width: 0;
  max-width: 560px;
}
body.page-id-327 .ic-form__main {
  flex: 1 1 auto;
  min-width: 0;
}/* The image sits at the foot of the copy column, full width of that column */
body.page-id-327 .ic-form__img {
  width: 100%;
  margin: 18px 0 0;
  overflow: hidden;
  border-radius: var(--radius-media, 8px);
}
body.page-id-327 .ic-form__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-327 .ic-form__img:hover img { transform: scale(1.03); }

@media (max-width: 1024px) {
  body.page-id-327 .ic-formrow { flex-wrap: wrap; }
  body.page-id-327 .ic-form__aside,
  body.page-id-327 .ic-form__main { flex: 1 1 100%; max-width: none; }
  body.page-id-327 .ic-form__img img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-327 .ic-form__img img { transition: none; }
  body.page-id-327 .ic-form__img:hover img { transform: none; }
}
/* --- PLAN MY STAY FORM ----------------------------------------------------
   The form column takes the remaining width of a 1560px row, which left the
   inputs running to roughly 1000px - well past a comfortable line length.
   Capped here, and the native blue checkboxes brought into the brand. */
body.page-id-327 .ic-form__main { max-width: 720px; }
body.page-id-327 .ic-formwrap input[type="checkbox"], body.page-id-327 .ic-formwrap input[type="radio"] {
  accent-color: #C25E9B;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  cursor: pointer;
}
body.page-id-327 .ic-formwrap .wpforms-field-checkbox li, body.page-id-327 .ic-formwrap .wpforms-field-radio li { margin-bottom: 7px; }
body.page-id-327 .ic-formwrap .wpforms-field-label-inline { font-size: 1rem; color: var(--text-primary); cursor: pointer; }

/* --- "You do not need to be staying..." - final sizing --------------------
   The image spans the text rows, and a spanning grid item forces those rows
   to grow to fit it - which is what pushed the heading and paragraph apart,
   twice. A third, empty row now absorbs the image's extra height so the two
   text rows stay content-sized and sit together. Text sized up, padding cut. */
body.page-id-327 .ic-note {
  padding-top: clamp(26px, 2.6vw, 40px) !important;
  padding-bottom: clamp(24px, 2.4vw, 36px) !important;
}
body.page-id-327 .ic-note__inner {
  grid-template-rows: auto auto 1fr;
  row-gap: 16px;
  align-content: start;
  align-items: start;
}
body.page-id-327 .ic-note__img {
  grid-row: 1 / span 3;
  align-self: start;
}
body.page-id-327 .ic-note__h .elementor-heading-title {
  font-size: clamp(1.75rem, 2.9vw, 2.5rem);
  line-height: 1.16;
  max-width: 20ch;
}
body.page-id-327 .ic-note__p p {
  font-size: clamp(1.125rem, 1.35vw, 1.3125rem);
  line-height: 1.55;
  max-width: 42ch;
}
/* The site-wide body-copy rule in ic-system.css sets text-editor paragraphs
   at (0,6,2) and prints inline after this sheet, so the size set above was
   being overridden and the paragraph stayed at the default 17px. Forced here,
   page-scoped, the same way the hero lede is handled. */
body.page-id-327 .ic-note .ic-note__p p {
  font-size: clamp(1.25rem, 1.55vw, 1.5rem) !important;
  line-height: 1.5 !important;
  font-weight: 300;
  color: var(--text-primary);
  max-width: 40ch;
}
/* --- PAGE ALIGNMENT (Sep 2026) -------------------------------------------
   The page was stepping between four content widths - 760, 880, 1320 and
   1560 - so the left edge moved as you scrolled. Everything is now anchored
   to the 1320px page width, and the section paddings match. */
body.page-id-327 .ic-note__inner,
body.page-id-327 .ic-formrow,
body.page-id-327 .ic-svcsec .ic-wrap,
body.page-id-327 .ic-howsec .ic-wrap {
  max-width: var(--container-max, 1320px);
  margin-inline: auto;
  width: 100%;
}
/* Hero copy shares the same left edge as the sections below it */
body.page-id-327 .ic-pagehero > .e-con-inner,
body.page-id-327 .ic-pagehero > * {
  max-width: var(--container-max, 1320px);
  margin-inline: auto;
  width: 100%;
}
body.page-id-327 .ic-ph__copy { max-width: 780px; }

/* Eight cards: four across completes both rows instead of leaving a hole */
@media (min-width: 1200px) {
  body.page-id-327 .ic-scgrid,
  body.page-id-327 .ic-scgrid > .e-con-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}/* One body measure across the page, and one image shape */
body.page-id-327 .ic-sec__lede p,
body.page-id-327 .ic-ph__lede p { max-width: 62ch; }
body.page-id-327 .ic-note .ic-note__p p { max-width: 46ch; }
body.page-id-327 .ic-form__img img { aspect-ratio: 3 / 2; }
body.page-id-327 .ic-note__img img { aspect-ratio: 3 / 2; }

/* Section padding evened out so the vertical rhythm matches the new edges */
body.page-id-327 .ic-note,
body.page-id-327 .ic-svcsec,
body.page-id-327 .ic-howsec,
body.page-id-327 .ic-plansec {
  padding-left: clamp(20px, 5vw, 64px) !important;
  padding-right: clamp(20px, 5vw, 64px) !important;
}
/* --- HERO LEFT EDGE ------------------------------------------------------
   The copy block had max-width plus margin-inline:auto, so it was centring
   itself inside the hero rather than sitting at the content edge. The hero
   now carries the same gutter the sections use - whichever is larger, the
   page gutter or half the leftover beside a 1320px column - and the copy is
   pinned to the left of it. */
body.page-id-327 .ic-pagehero {
  padding-left: max(clamp(20px, 5vw, 64px), calc((100% - 1320px) / 2)) !important;
  padding-right: max(clamp(20px, 5vw, 64px), calc((100% - 1320px) / 2)) !important;
}
body.page-id-327 .ic-pagehero > *,
body.page-id-327 .ic-pagehero > .e-con-inner {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}
body.page-id-327 .ic-ph__copy {
  max-width: 780px;
  margin-inline: 0;
  margin-left: 0;
}
body.page-id-327 .ic-ph__btns { margin-inline: 0; justify-content: flex-start; }/* Every section uses the identical gutter formula, so one left edge runs the
   whole page: hero, note, services, how it works, plan my stay. */
body.page-id-327 .ic-note,
body.page-id-327 .ic-svcsec,
body.page-id-327 .ic-howsec,
body.page-id-327 .ic-plansec {
  padding-left: max(clamp(20px, 5vw, 64px), calc((100% - 1320px) / 2)) !important;
  padding-right: max(clamp(20px, 5vw, 64px), calc((100% - 1320px) / 2)) !important;
}
body.page-id-327 .ic-note__inner,
body.page-id-327 .ic-formrow,
body.page-id-327 .ic-svcsec .ic-wrap,
body.page-id-327 .ic-howsec .ic-wrap {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}
/* --- BODY COPY SIZE ------------------------------------------------------
   Supporting text across the page lifted a step. !important is needed on the
   paragraph rules because the site-wide body-copy rule in ic-system.css sits
   at (0,6,2) and prints after this sheet. Headings are untouched. */
body.page-id-327 .ic-ph__lede p {
  font-size: clamp(1.125rem, 1.35vw, 1.3125rem) !important;
  line-height: 1.55 !important;
}
body.page-id-327 .ic-sec__lede p {
  font-size: clamp(1.125rem, 1.3vw, 1.25rem) !important;
  line-height: 1.6 !important;
}
body.page-id-327 .ic-sc__d p {
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
}
body.page-id-327 .ic-howsec .elementor-widget-text-editor p {
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
}
body.page-id-327 .ic-form__p p {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
}
body.page-id-327 .ic-wasec p,
body.page-id-327 .ic-wa__inner p {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem) !important;
  line-height: 1.6 !important;
}/* Card titles and the step labels lifted to match the larger body copy */
body.page-id-327 .ic-sc__t .elementor-heading-title { font-size: clamp(1.1875rem, 1.4vw, 1.375rem); }
body.page-id-327 .ic-howsec .elementor-widget-heading .elementor-heading-title { font-size: clamp(1.125rem, 1.3vw, 1.3125rem); }
body.page-id-327 .ic-sc__chips li,
body.page-id-327 .ic-sc__chips a { font-size: .9375rem; }
body.page-id-327 .ic-formwrap .wpforms-field-label-inline { font-size: 1.0625rem; }