/* ══════════════════════════════════════════════════════════════
   White Cloud — liquid glass theme
   ══════════════════════════════════════════════════════════════
   Loaded AFTER each page's own <style>, so it wins on equal
   specificity without needing !important everywhere.

   The homepage was rebuilt from scratch in this language. Every
   other page shares wc.css, so rather than rewrite eight files this
   retunes the surfaces they already use: the ground becomes a
   morning-sky field, the white sheet and bands become translucent
   so that field shows through, and the cards become glass.
   ══════════════════════════════════════════════════════════════ */

:root {
  --sky-base: #f5f9fd;
  --a-sky:    rgba(184, 216, 242, .72);
  --a-blue:   rgba(200, 226, 247, .70);
  --a-blush:  rgba(255, 186, 202, .62);
  --a-dawn:   rgba(255, 214, 198, .58);
  --a-pale:   rgba(222, 237, 250, .75);

  --g-fill:   linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  --g-solid:  linear-gradient(140deg, rgba(255,255,255,.46), rgba(255,255,255,.2));
  --g-edge:   rgba(255,255,255,.5);
  --g-spec:   rgba(255,255,255,.92);
  --g-shadow: 0 1px 2px rgba(34,51,63,.04), 0 10px 28px -20px rgba(34,51,63,.22);
  /* The rim: a hairline that catches light top-left and fades
     bottom-right. This, not a thick fill, is what reads as glass. */
  --g-rim:    inset 0 .5px 0 rgba(255,255,255,.55);
  --g-blur:   blur(3px) saturate(170%);
  --d-fill:   linear-gradient(150deg, rgba(47,73,88,.88), rgba(28,46,56,.92));

  /* The frame. Same edges as the homepage: a 1240px column with a
     gutter inside it, so the nav, every band's content and the
     footer line up on one left and one right edge at every width. */
  --wg-gutter: clamp(18px, 4vw, 48px);
  --wg-frame:  min(calc(1240px - var(--wg-gutter) * 2), calc(100% - var(--wg-gutter) * 2));
  --wg-pad:    clamp(1.5rem, 3vw, 2.5rem);
}

/* ── The field ────────────────────────────────────────────────
   Fixed, so panels slide over a stationary light source. The old
   canvas painted an inset white card on a pale gradient; that frame
   is what made every page read as a flat sheet of paper. */
body.wc-canvas {
  background: var(--sky-base);
  padding: 0;
}
body.wc-canvas::before {
  content: '';
  position: fixed; inset: -25%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(34% 30% at 12% 14%, var(--a-sky),   transparent 64%),
    radial-gradient(30% 26% at 88% 12%, var(--a-blush), transparent 64%),
    radial-gradient(34% 30% at 80% 58%, var(--a-blue),  transparent 64%),
    radial-gradient(28% 26% at 18% 64%, var(--a-pale),  transparent 64%),
    radial-gradient(26% 24% at 54% 94%, var(--a-dawn),  transparent 64%);
  filter: blur(18px) saturate(115%);
  animation: wcDrift 34s cubic-bezier(.22,1,.36,1) infinite alternate;
}
/* Gradients this wide band visibly without grain. */
body.wc-canvas::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  opacity: .30; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes wcDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { body.wc-canvas::before { animation: none; } }

body.wc-canvas > .wc-sheet {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* ── Bands ────────────────────────────────────────────────────
   Plain bands go clear so the field shows; "alt" bands become a
   pane of glass rather than a block of pale blue. */
.v2-band, .mk-band, .sc-band, .v2-hero, .sc-hero, .mk-hero,
.v2-work, .v2-faq, #contact, .in-body, .v2-notes {
  background: transparent;
}
.v2-band.alt, .mk-band.alt, .sc-band.alt,
.v2-marketing-teaser, .v2-care-band {
  background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border-block: 1px solid var(--g-edge);
  box-shadow: var(--g-rim);
}

/* ── Formerly dark sections ───────────────────────────────────
   These bands were navy with white type. The site is light cloud
   throughout now, so they take the same pale sky as the heroes and
   their type turns dark. Dark cards inside them (the AI chat window)
   keep their own styling. */
.v2-band.v2-ai, .v2-ai, .sc-band.dark, .mk-quote, #ai-search, .v2-trust {
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(255,255,255,.7), transparent 62%),
    linear-gradient(168deg, #f1f7fc 0%, #e6f1fa 50%, #dcecf8 100%) !important;
  border-block: 1px solid rgba(255,255,255,.6);
  box-shadow: none;
}
.v2-ai h2, .v2-ai h3, .v2-ai .v2-head h2, #ai-search h2,
.mk-quote blockquote, .sc-band.dark h2, .sc-band.dark h3,
.v2-trust strong { color: #22333f !important; }
.v2-ai > * p, .v2-ai .v2-head p, .v2-ai-copy p, #ai-search p:not(.ai-response p),
.mk-quote p, .sc-band.dark p, .v2-trust span { color: #55707f !important; }
.v2-ai .lbl, #ai-search .lbl, .sc-band.dark .lbl, .mk-quote .lbl { color: #3d6a85 !important; }
.v2-ai-sources span { color: #7f97a6; }
#ai-search::before, #ai-search::after { opacity: .25; }

/* Dark cards become light glass too. */
.mk-offer, .sc-monthly {
  background: linear-gradient(140deg, rgba(255,255,255,.62), rgba(255,255,255,.34)) !important;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--g-shadow), var(--g-rim);
}
.mk-offer h2, .mk-offer h3, .mk-offer-now, .sc-monthly h3 { color: #22333f !important; }
.mk-offer p, .mk-offer li, .sc-monthly p { color: #55707f !important; }
.mk-offer-was { color: #8ea3b0 !important; }
.mk-offer .lbl, .mk-offer-cap { color: #3d6a85 !important; }
.sc-monthly::before { opacity: .2; }



/* ── Closing call to action ───────────────────────────────────
   Light, the same sky as the heroes, so each page ends where it
   began rather than on a dark slab. */
.v2-cta, .mk-cta, #cta {
  position: relative; isolation: isolate;
  background:
    radial-gradient(58% 60% at 74% 20%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(40% 50% at 12% 90%, rgba(255,214,222,.45), transparent 64%),
    linear-gradient(168deg, #f1f7fc 0%, #e6f1fa 50%, #dcecf8 100%) !important;
  border-block: 1px solid var(--g-edge);
  box-shadow: var(--g-rim);
}
.v2-cta h2, .mk-cta h2, #cta h2 { color: #22333f; }
.v2-cta p, .mk-cta p, #cta p { color: #55707f; }
.mk-cta a.mail { color: #3d6a85; }
#cta .cta-deco { opacity: .35; }
.v2-cta .btn-w, .mk-cta .btn-w, #cta .btn-w {
  background: linear-gradient(140deg, #3d6a85, #22333f); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -12px rgba(34,51,63,.6), inset 1px 1px 0 rgba(255,255,255,.28);
}
.v2-cta .btn-w:hover, .mk-cta .btn-w:hover, #cta .btn-w:hover { color: #fff; filter: brightness(1.12); }
.v2-cta .btn-g, .mk-cta .btn-g, #cta .btn-g {
  background: linear-gradient(140deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  border: 1px solid var(--g-edge); color: #22333f;
  box-shadow: var(--g-shadow), var(--g-rim);
}

/* ── Frame ────────────────────────────────────────────────────
   Bands stay full-bleed (the glass and the smoked panes run edge to
   edge) but what is inside them sits on the frame. Side padding is
   worked out from the band's own width, so it is the gutter on a
   phone and grows to centre a 1240px column on a wide screen. */
.v2-band, .mk-band, .sc-band, .v2-notes, .v2-trust, .v2-work,
#contact, #book, .v2-cta, .mk-quote, .mk-cta, .pj-hero, .pj-band,
#solution, #ai-search, #faq, #portfolio, #cta, .banner-block,
.in-progress, .in-body {
  padding-inline: max(var(--wg-gutter), calc((100% - 1240px) / 2 + var(--wg-gutter)));
}
/* Restaurants centres its own inner columns; let them fill the frame
   instead of stopping a few pixels short of it. */
.hero-inner, .ai-inner, .banner-inner { max-width: none; }

/* Split heroes: the frame goes on the hero, the halves lose their
   own outer padding so the copy starts on the same edge as the nav. */
.v2-hero, .mk-hero, .sc-hero, .in-hero, .r-hero {
  padding-inline: max(var(--wg-gutter), calc((100% - 1240px) / 2 + var(--wg-gutter))) !important;
}
.v2-hero-copy, .mk-hero-copy, .sc-hero-copy, .in-hero-copy, .r-hero-copy { padding-inline: 0 !important; }
.v2-hero-stage, .mk-hero-stage, .sc-hero-stage, .in-hero-stage, .r-hero-stage { padding-right: 0 !important; }
@media (max-width: 900px) {
  .v2-hero-stage, .mk-hero-stage, .sc-hero-stage, .in-hero-stage, .r-hero-stage { padding-inline: 0 !important; }
}

/* ── Cards ────────────────────────────────────────────────────
   Everything that used to be a white or pale-blue box. */
.v2-price, .v2-note, .v2-hosting, .v2-casual, .v2-proj,
.v2-care > div, .form-section, .asset-card, .sc-deliv,
.mk-price, .mk-tablewrap, .mk-separate, .mk-step,
.sc-price-panel, .sc-form, .sc-way, .sc-post, .sc-cal,
.search-card, .work-card, .v2-faq-list {
  background: var(--g-solid) !important;
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  border-radius: 24px;
  box-shadow: var(--g-shadow), var(--g-rim);
}

/* ── Long-form pages (privacy, terms, guides) ─────────────────
   The article was a full-bleed white slab. It becomes one floating
   pane instead, so those pages belong to the same world. */
.wc-article { background: transparent; padding-top: 8.5rem; }
.wc-article-inner {
  background: var(--g-solid);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  border-radius: 28px;
  box-shadow: var(--g-shadow), var(--g-rim);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.wc-article-cta {
  background: var(--g-fill);
  border: 1px solid var(--g-edge);
  border-radius: 20px;
}

/* ── Buttons ──────────────────────────────────────────────────
   One solid and one glass, matching the homepage. */
.btn-p, .form-submit, .btn-submit {
  background: linear-gradient(140deg, #3d6a85, #22333f);
  border: 1px solid transparent;
  box-shadow: 0 8px 20px -12px rgba(34,51,63,.6), inset 1px 1px 0 rgba(255,255,255,.28);
}
.btn-p:hover, .form-submit:hover, .btn-submit:hover {
  background: linear-gradient(140deg, #3d6a85, #22333f);
  filter: brightness(1.12);
  box-shadow: 0 12px 26px -14px rgba(34,51,63,.65), inset 1px 1px 0 rgba(255,255,255,.28);
}
.btn-o, .btn-w {
  background: linear-gradient(140deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  color: #22333f;
  box-shadow: var(--g-shadow), var(--g-rim);
}
.btn-o:hover, .btn-w:hover {
  background: linear-gradient(140deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  color: #22333f; border-color: var(--g-edge);
}
.btn-g { background: rgba(255,255,255,.22); border: 1px solid var(--g-edge); color: #22333f; }

/* ── Form controls ────────────────────────────────────────────── */
.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
textarea, select {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 14px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, textarea:focus, select:focus {
  background: #fff;
  border-color: #7fa8be;
  box-shadow: 0 0 0 4px rgba(127,168,190,.22);
}

/* ── Footer ───────────────────────────────────────────────────
   Identical on every page, and identical to the homepage: one light
   glass pane on the frame, logo left, links right, the legal line
   under a hairline. */
footer.wc-foot {
  background: transparent; color: #55707f;
  padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: .74rem; font-weight: 400; letter-spacing: 0;
}
footer.wc-foot .foot-in {
  width: var(--wg-frame); max-width: none; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.5rem;
  align-items: center; justify-content: space-between;
  padding: 1.3rem var(--wg-pad);
  background: linear-gradient(140deg, rgba(255,255,255,.44), rgba(255,255,255,.18));
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge); border-radius: 32px;
  box-shadow: var(--g-shadow), var(--g-rim), inset 0 -1px 0 rgba(255,255,255,.28);
}
footer.wc-foot .logo-mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
footer.wc-foot .logo-wave-svg { width: 38px; height: auto; }
footer.wc-foot .logo-wordmark { display: flex; flex-direction: column; line-height: 1; font-family: 'Raleway', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .26em; }
footer.wc-foot .logo-wordmark span, footer.wc-foot .logo-wordmark span:last-child { color: #22333f; }
footer.wc-foot .foot-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
footer.wc-foot .foot-links a { font-size: .86rem; color: #55707f; text-decoration: none; }
footer.wc-foot .foot-links a:hover { color: #3d6a85; }
footer.wc-foot .foot-legal { font-size: .74rem; color: #55707f; line-height: 1.7; }
footer.wc-foot .foot-legal a { color: inherit; text-decoration: none; white-space: nowrap; }
footer.wc-foot .foot-legal a:hover { color: #3d6a85; text-decoration: underline; }
@media (max-width: 600px) { footer.wc-foot .foot-in { flex-direction: column; text-align: center; gap: .8rem; } }

/* ── Nav ──────────────────────────────────────────────────────
   Already glass; this just lifts it to the homepage's weight and
   removes the inset the old canvas frame assumed. */
.wc-nav {
  top: clamp(12px, 2vw, 22px);
  width: var(--wg-frame);
  background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-rim);
}
.wc-nav.scrolled {
  backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%);
  background: linear-gradient(140deg, rgba(255,255,255,.6), rgba(255,255,255,.44));
  box-shadow: 0 16px 44px -18px rgba(34,51,63,.34), var(--g-rim);
}
.wc-nav-links a.wc-nav-cta {
  background: linear-gradient(140deg, #3d6a85, #22333f);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(34,51,63,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.wc-nav-links a.wc-nav-cta:hover { filter: brightness(1.12); }

/* ── Graceful degradation ─────────────────────────────────────
   Turned-off transparency, or no backdrop-filter, should give a
   readable solid rather than a muddy wash. */
@supports not (backdrop-filter: blur(1px)) {
  .v2-band.alt, .mk-band.alt, .sc-band.alt,
  .v2-price, .mk-price, .sc-post, .wc-article-inner,
  footer .foot-in, .wc-nav { background: rgba(255,255,255,.90) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .v2-band.alt, .mk-band.alt, .sc-band.alt,
  .v2-price, .mk-price, .sc-post, .wc-article-inner,
  footer .foot-in, .wc-nav {
    background: rgba(255,255,255,.93) !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* The open phone menu: the pill opens into a panel of the same clear,
   lightly frosted glass as the homepage. Never solid white. */
@media (max-width: 960px) {
  .wc-nav.open {
    border-radius: 28px;
    background: linear-gradient(140deg, rgba(255,255,255,.58), rgba(255,255,255,.36));
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  }
  .wc-nav .wc-nav-links a:not(.wc-nav-cta) { color: #22333f; }
}

/* Same menu button as the homepage. */
.wc-nav-toggle {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--g-rim);
}
.wc-nav-toggle span { width: 17px; background: #22333f; }

/* ── AI sections, retuned for the light sky ───────────────────
   Every piece that was white-on-navy gets dark type on pale glass.
   The user's question bubble keeps its brand fill and white text. */
.v2-ai, #ai-search { color: #22333f; }
.v2-ai-points span, .ai-pill {
  color: #3d6a85 !important; background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
}
.v2-chat, .ai-chat-mock {
  background: linear-gradient(140deg, rgba(255,255,255,.62), rgba(255,255,255,.34)) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: var(--g-shadow), var(--g-rim) !important;
}
.v2-chat-who, .ai-chat-header { color: #6a8392 !important; border-color: rgba(127,168,190,.2) !important; background: transparent !important; }
.v2-chat-q { background: #7fa8be !important; color: #fff !important; }
.v2-chat-a, .ai-msg.bot { background: rgba(255,255,255,.7) !important; border-color: rgba(127,168,190,.2) !important; }
.v2-chat-a p, .ai-msg.bot, .ai-msg.bot p { color: #33495a !important; }
.ai-response strong { color: #22333f !important; }
.v2-typing span, .ai-typing-indicator span { background: rgba(61,106,133,.45) !important; }
.v2-ai-sources span, .ai-source-badge { color: #6a8392 !important; border-color: rgba(127,168,190,.3) !important; }