/* Resource Connect Assisted Living LLC
   Palette taken from the client's own logo, which is navy-led with gold, a
   purple script and green foliage. The colours he typed into the form map onto
   it: #461dd7 is the blue, #d7b81d the gold, #9d1dd7 the purple, #4f5504 the
   leaves. Navy carries the brand and gold does the calls to action, because on
   this site the single most important thing is that someone rings the phone.
   Type runs large on purpose: the people reading this are usually arranging
   care for a parent, and are often over 55 themselves. */

:root {
  --navy: #182a6e;
  --navy-deep: #0b1440;
  --navy-soft: #eef1f8;
  /* The logo has a purple in it. Letting it into the gradients is what turns
     a conservative navy site into something with depth. */
  --plum: #3d1a6b;
  --violet: #6d1f9c;
  --royal: #2540a8;
  --gold-lt: #f2d95e;
  --gold: #d7b81d;
  --gold-deep: #7d6a0c;
  --purple: #6d1f9c;
  --purple-soft: #f4ecfa;
  --leaf: #3f6b25;

  --ink: #14182b;
  --ink-2: #414761;
  --ink-3: #6a7089;
  --paper: #fbfaf7;
  --surface: #ffffff;
  --line: #e1e2ea;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1120px;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(20, 24, 43, .05), 0 12px 32px -18px rgba(20, 24, 43, .34);
  --shadow-lift: 0 2px 4px rgba(20, 24, 43, .05), 0 26px 58px -26px rgba(20, 24, 43, .42);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); }
p { margin: 0 0 1.1rem; max-width: 68ch; }
a { color: var(--navy); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

.kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 .7rem;
}
.on-dark .kicker, .hero .kicker { color: var(--gold); }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--ink-2); }
.on-dark .lede, .hero .lede { color: rgba(255, 255, 255, .93); }

/* ---------- buttons: big, because a lot of these taps are on a phone ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 56px; padding: 0 1.6rem; border: 2px solid transparent; border-radius: 999px;
  font: 700 1.05rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s, background-color .15s;
}
.btn:active { transform: translateY(1px); }
/* Without this the inline icons fall back to the SVG default box and render
   enormous, and the phone number breaks across three lines mid-number. */
.btn svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
.btn span { white-space: nowrap; }
.btn-call { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn-call:hover { background: #c2a516; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); }
.on-dark .btn-ghost, .hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: #fff; }
.btn-solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-solid:hover { background: var(--navy-deep); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(250, 249, 243, .92); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-logo { width: 48px; height: auto; flex: none; border-radius: 8px; }
.brand-mark { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--navy); display: grid; place-items: center; color: var(--gold); font: 700 1.05rem/1 var(--display); }
.brand-name { font: 600 1.06rem/1.15 var(--display); letter-spacing: -.01em; }
.brand-name span { display: block; font: 600 .68rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nav { display: flex; gap: 4px; }
.nav a { padding: 10px 14px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 1rem; }
.nav a:hover { background: var(--navy-soft); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--navy); background: var(--navy-soft); }
.top .btn { min-height: 48px; padding: 0 1.15rem; font-size: 1rem; }
.burger { display: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--ink); border-radius: 2px; }

@media (max-width: 900px) {
  .nav { position: fixed; inset: 76px 0 auto; flex-direction: column; gap: 0; padding: 12px 22px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .nav[hidden] { display: none; }
  .nav a { padding: 15px 12px; font-size: 1.1rem; border-radius: 12px; }
  .burger { display: block; }
  .top .btn-call { padding: 0 1rem; }
  .top-cta-label { display: none; }
}

/* ---------- sections ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section.on-dark { background: var(--navy); color: #fff; }
.section.on-dark h2, .section.on-dark h3 { color: #fff; }
.section.tint { background: var(--navy-soft); }

.hero { padding-block: clamp(56px, 9vw, 116px) clamp(48px, 7vw, 92px); background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, #27408f 100%); color: #fff; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lede { max-width: 54ch; margin-top: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.hero-badge { display: flex; align-items: center; gap: 9px; font-size: .97rem; color: rgba(255, 255, 255, .88); }
.hero-badge svg { width: 20px; height: 20px; flex: none; stroke: var(--gold); fill: none; stroke-width: 2; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card h3 { margin-bottom: .5rem; }
.card p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.card-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--navy-soft); display: grid; place-items: center; margin-bottom: 16px; }
.card-ic svg { width: 24px; height: 24px; stroke: var(--navy); fill: none; stroke-width: 1.9; }

.head { max-width: 60ch; margin-bottom: 40px; }
.head p { color: var(--ink-2); }
.on-dark .head p { color: rgba(255, 255, 255, .9); }

/* ---------- call band ---------- */
.callband { background: var(--gold); color: var(--navy-deep); }
.callband .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-block: 44px; }
.callband h2 { max-width: 20ch; }
.callband p { margin: .6rem 0 0; color: #6b5a0a; font-weight: 500; }
.callband .btn-solid { background: var(--navy-deep); border-color: var(--navy-deep); }

/* ---------- lists ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 1.05rem; color: var(--ink-2); }
.on-dark .ticks li, .hero .ticks li { color: rgba(255, 255, 255, .88); }
.ticks svg { width: 22px; height: 22px; margin-top: 3px; stroke: var(--gold-deep); fill: none; stroke-width: 2.4; }
.on-dark .ticks svg, .hero .ticks svg { stroke: var(--gold); }

/* ---------- facts / contact ---------- */
.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fact { background: var(--surface); padding: 26px 24px; }
.fact dt { font: 700 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.fact dd { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.45; }
.fact dd a { color: var(--navy); text-decoration: none; }
.fact dd a:hover { text-decoration: underline; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; max-width: 620px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 1rem; }
.field .hint { font-size: .9rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1.05rem; padding: 14px 15px; min-height: 56px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-color: var(--purple); }
.form-note { font-size: .95rem; color: var(--ink-3); max-width: 58ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.foot { background: var(--navy-deep); color: rgba(255, 255, 255, .8); padding-block: 56px 32px; }
.foot a { color: #fff; }
.foot-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.foot h3 { font: 700 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot p { margin: 0 0 .6rem; }
.foot-base { margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 22px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); }

/* Placeholder where the client's own photographs will go. Deliberately not a
   stock photo of strangers — an empty, honest frame reads better than that. */
.photo-slot { display: grid; place-items: center; text-align: center; padding: 34px; min-height: 260px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--navy-soft); color: var(--ink-3); font-size: .95rem; }


/* ============================================================
   Sleeker pass: depth, motion and imagery.
   Everything below respects prefers-reduced-motion — the audience
   here skews older and vestibular sensitivity is common.
   ============================================================ */

/* ---- scroll reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="2"] { transition-delay: .09s; }
[data-reveal="3"] { transition-delay: .18s; }
.no-js [data-reveal], .reduce [data-reveal] { opacity: 1; transform: none; transition: none; }

/* ---- hero: layered, with artwork ---- */
.hero { position: relative; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero-art { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(4, 8, 30, .8); }
.hero-art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, rgba(14, 26, 73, .5)); }
.hero-wash { position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(60% 70% at 70% 0%, rgba(215, 184, 29, .18), transparent 70%); pointer-events: none; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hero-art { order: -1; } }

/* ---- at-a-glance band ---- */
.glance { background: var(--surface); border-block: 1px solid var(--line); }
.glance .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; padding-inline: 0; }
.glance-item { padding: 30px 26px; background: var(--surface); position: relative; }
.glance-item + .glance-item::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.glance-item b { display: block; font: 600 1.7rem/1.1 var(--display); color: var(--navy); letter-spacing: -.02em; }
.glance-item span { display: block; margin-top: 6px; font-size: .95rem; color: var(--ink-3); }
@media (max-width: 680px) { .glance-item + .glance-item::before { left: 26px; right: 26px; top: 0; bottom: auto; width: auto; height: 1px; } }

/* ---- cards with real depth ---- */
.card { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #cfd3e4; }
.card-ic { background: linear-gradient(150deg, var(--navy-soft), #e3e8f5); }

/* ---- figure: illustration blocks ---- */
.figure { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy-soft); box-shadow: var(--shadow); }
.figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: .78rem; letter-spacing: .02em; color: rgba(255, 255, 255, .92); background: linear-gradient(transparent, rgba(14, 26, 73, .82)); }

/* ---- pattern band ---- */
.section.pattern { position: relative; background: var(--navy-deep); overflow: clip; }
.section.pattern > .pattern-art { position: absolute; inset: 0; opacity: .16; background-size: cover; background-position: center; }
.section.pattern > .wrap { position: relative; }

/* ---- nicer photo slot ---- */
.photo-slot { border: 1px solid var(--line); border-radius: var(--radius); background:
  linear-gradient(135deg, var(--navy-soft), #fff 60%); color: var(--ink-3); box-shadow: var(--shadow); }
.photo-slot strong { display: block; color: var(--navy); font-family: var(--display); font-size: 1.15rem; margin-bottom: 4px; }

/* ---- quiet section rhythm ---- */
.section + .section.tint, .section + .section.on-dark { border-top: 1px solid rgba(0, 0, 0, .04); }


/* ============================================================
   Richer surface treatment — depth, glow and gradient, kept
   inside the logo's own four colours.
   ============================================================ */

/* ---- aurora hero ---- */
.hero {
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(109, 31, 156, .55), transparent 62%),
    radial-gradient(70% 60% at 92% 14%, rgba(37, 64, 168, .6), transparent 66%),
    radial-gradient(60% 55% at 78% 92%, rgba(215, 184, 29, .22), transparent 68%),
    linear-gradient(158deg, #0b1440 0%, #17205c 46%, #241a63 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: soft-light;
}
.hero-wash { display: none; }

/* A hairline of gold where the hero meets the page — the logo's arc, reused. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-lt) 50%, var(--gold) 78%, transparent);
  opacity: .85;
}

/* ---- gradient headline accent ---- */
.grad {
  background: linear-gradient(96deg, var(--gold-lt), var(--gold) 38%, #f6e79a 62%, var(--gold-lt));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- glass glance band ---- */
.glance {
  background: linear-gradient(180deg, #fff, #f6f7fc);
  border-block: 1px solid var(--line);
}
.glance-item b {
  background: linear-gradient(120deg, var(--navy), var(--violet) 62%, var(--royal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- cards: gradient hairline, warmer lift ---- */
.card { position: relative; background: linear-gradient(180deg, #fff, #fcfcfe); }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(109,31,156,.34), rgba(37,64,168,.16) 45%, rgba(215,184,29,.32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease);
}
.card:hover::before { opacity: 1; }
.card-ic { background: linear-gradient(145deg, #eae6fb, #e2e9f9); box-shadow: inset 0 0 0 1px rgba(109,31,156,.12); }
.card-ic svg { stroke: var(--plum); }

/* ---- dark sections get the same jewel treatment ---- */
.section.on-dark {
  background:
    radial-gradient(80% 70% at 8% 0%, rgba(109, 31, 156, .5), transparent 62%),
    radial-gradient(70% 70% at 96% 100%, rgba(37, 64, 168, .5), transparent 66%),
    linear-gradient(160deg, #0b1440, #1b1e57);
}
.section.pattern > .pattern-art { opacity: .1; mix-blend-mode: luminosity; }

/* ---- call band: gold with depth rather than a flat slab ---- */
.callband {
  background: linear-gradient(120deg, #c9a615 0%, var(--gold) 34%, var(--gold-lt) 58%, var(--gold) 100%);
  position: relative; overflow: clip;
}
.callband::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 120%;
  background: radial-gradient(45% 60% at 80% 0%, rgba(255,255,255,.45), transparent 70%);
  pointer-events: none;
}
.callband .wrap { position: relative; }

/* ---- tinted section, warmed ---- */
.section.tint { background: linear-gradient(180deg, #f6f4fb, #fbfaf7); }

/* ---- hero video ---- */
.hero-art { position: relative; }
.hero-media { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 46px 90px -44px rgba(4, 8, 40, .9), 0 0 0 1px rgba(255,255,255,.08); }
.hero-media video, .hero-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(205deg, transparent 46%, rgba(11, 20, 64, .46)); pointer-events: none; }
.hero-media figcaption { position: absolute; left: 12px; bottom: 10px; font-size: .72rem; letter-spacing: .02em; color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } }

/* ---- footer, lifted out of flat navy ---- */
.foot {
  background:
    radial-gradient(70% 90% at 4% 0%, rgba(109, 31, 156, .42), transparent 60%),
    linear-gradient(160deg, #0b1440, #14173f);
}

/* The one honest line about the imagery. Quiet, but present on every page
   that shows a photograph of a home that is not yet theirs. */
.img-note { max-width: var(--wrap); margin: 0 auto; padding: 0 22px 34px; font-size: .84rem; color: var(--ink-3); }

/* The <video> element defaults to 300x150 and was not filling its column. */
.hero-art, .hero-media { width: 100%; }
.hero-media video { width: 100%; height: auto; display: block; }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   COLOURFUL PASS
   The brand has four colours and the site was only really using
   two. Each one now does a job: violet and indigo carry the dark
   grounds, gold carries every call to action, green carries
   anything about home, garden and daily life.
   ============================================================ */
:root {
  --c1: #6d1f9c;   /* violet  — care */
  --c2: #2540a8;   /* indigo  — safety */
  --c3: #8a6508;   /* amber   — meals (darkened to clear 4.5:1 on white) */
  --c4: #3f6b25;   /* green   — outdoors */
  --c5: #9d1dd7;   /* orchid  — activities */
  --c6: #1c6b6b;   /* teal    — round-the-clock */
  --tint1: #f6ecfd; --tint2: #eaefff; --tint3: #fdf3dd; --tint4: #ecf6e6; --tint5: #fbeafd; --tint6: #e4f4f4;
}

/* Service cards: each one takes its own colour. */
.card { --accent: var(--c1); --tint: var(--tint1); }
.grid-3 > .card:nth-child(6n+2) { --accent: var(--c2); --tint: var(--tint2); }
.grid-3 > .card:nth-child(6n+3) { --accent: var(--c3); --tint: var(--tint3); }
.grid-3 > .card:nth-child(6n+4) { --accent: var(--c4); --tint: var(--tint4); }
.grid-3 > .card:nth-child(6n+5) { --accent: var(--c5); --tint: var(--tint5); }
.grid-3 > .card:nth-child(6n+6) { --accent: var(--c6); --tint: var(--tint6); }
.card-ic { background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.card-ic svg { stroke: var(--accent); }
.card h3 { color: var(--accent); }
.card::before { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%, var(--gold)); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }

/* A colour bar at the top of each card — the thing that reads as "colourful"
   at a glance, before anyone has read a word. */
.card { padding-top: 32px; }
.card::after {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 4px;
  border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--gold)));
}

/* Alternating section grounds, so the page changes colour as you move down it. */
.section.tint { background: linear-gradient(175deg, var(--tint1) 0%, #fdfbff 55%, var(--tint3) 100%); }
.glance { background: linear-gradient(100deg, var(--tint2), #fff 40%, var(--tint1) 100%); }
.glance-item:nth-child(1) b { background: linear-gradient(120deg, var(--c6), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glance-item:nth-child(2) b { background: linear-gradient(120deg, var(--c1), var(--c5)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glance-item:nth-child(3) b { background: linear-gradient(120deg, var(--c4), var(--c3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glance-item:nth-child(4) b { background: linear-gradient(120deg, var(--c2), var(--c1)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The dark band: violet-forward rather than navy-forward. */
.section.on-dark {
  background:
    radial-gradient(75% 80% at 6% 0%, rgba(157, 29, 215, .55), transparent 60%),
    radial-gradient(70% 70% at 98% 100%, rgba(37, 64, 168, .62), transparent 64%),
    radial-gradient(50% 50% at 50% 50%, rgba(28, 107, 107, .3), transparent 70%),
    linear-gradient(155deg, #1b0e3d, #16225e);
}
.section.on-dark h3 { color: var(--gold-lt); }

/* Hero: let the violet sing. */
.hero {
  background:
    radial-gradient(95% 75% at 10% 4%, rgba(157, 29, 215, .68), transparent 60%),
    radial-gradient(75% 65% at 95% 16%, rgba(37, 64, 168, .72), transparent 64%),
    radial-gradient(55% 55% at 62% 96%, rgba(28, 107, 107, .5), transparent 66%),
    radial-gradient(45% 45% at 88% 88%, rgba(215, 184, 29, .3), transparent 70%),
    linear-gradient(158deg, #14093a 0%, #1b1b62 52%, #2a145f 100%);
}

/* Ticks take the section's colour rather than always gold. */
.ticks li:nth-child(6n+1) svg { stroke: var(--c1); }
.ticks li:nth-child(6n+2) svg { stroke: var(--c2); }
.ticks li:nth-child(6n+3) svg { stroke: var(--c3); }
.ticks li:nth-child(6n+4) svg { stroke: var(--c4); }
.ticks li:nth-child(6n+5) svg { stroke: var(--c5); }
.ticks li:nth-child(6n+6) svg { stroke: var(--c6); }

/* Footer keeps the violet. */
.foot { background: radial-gradient(70% 90% at 2% 0%, rgba(157, 29, 215, .4), transparent 58%), linear-gradient(160deg, #14093a, #16225e); }

/* A day here — a colourful, asymmetric gallery so the page has life in it
   rather than two polite pictures. */
.gallery-band { background: linear-gradient(170deg, var(--tint4) 0%, #fff 48%, var(--tint5) 100%); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery > div:nth-child(1) { grid-column: span 1; }
.gallery > div:nth-child(2) { grid-column: span 3; }
.gallery > div:nth-child(3) { grid-column: span 3; }
.gallery > div:nth-child(4) { grid-column: span 1; }
.gallery .figure { height: 100%; border-radius: 20px; }
.gallery .figure img { height: 100%; width: 100%; object-fit: cover; }
.gallery > div:nth-child(1) .figure img, .gallery > div:nth-child(4) .figure img { aspect-ratio: 3 / 4; }
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery > div { grid-column: span 2 !important; }
  .gallery > div:nth-child(1) .figure img, .gallery > div:nth-child(4) .figure img { aspect-ratio: 3 / 2; }
}

/* ---- the film ---- */
.hero-media video { background: #14093a; }
.film-play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 14px;
  padding: 22px; border: 0; background: linear-gradient(0deg, rgba(20,9,58,.72), transparent 55%);
  color: #fff; font: 600 1rem/1.2 var(--sans); text-align: left; cursor: pointer;
  transition: opacity .25s var(--ease);
}
.film-play[hidden] { display: none; }
.film-play-ic {
  width: 62px; height: 62px; flex: none; border-radius: 50%;
  background: var(--gold); box-shadow: 0 10px 30px -10px rgba(0,0,0,.7);
  display: grid; place-items: center; transition: transform .25s var(--ease);
}
.film-play-ic::after { content: ""; border-left: 19px solid #14093a; border-block: 12px solid transparent; margin-left: 5px; }
.film-play:hover .film-play-ic { transform: scale(1.07); }
.film-play:focus-visible { outline: 3px solid var(--gold-lt); outline-offset: -4px; }
.film-play-txt { padding-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.film-play-txt small { display: block; font-weight: 500; font-size: .84rem; opacity: .82; margin-top: 2px; }
.hero-media.playing::after { opacity: 0; }
@media (max-width: 520px) { .film-play-ic { width: 52px; height: 52px; } .film-play-txt { font-size: .92rem; } }

/* ============================================================
   Ask-us assistant
   ============================================================ */
.rc-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, var(--c1), var(--c2));
  color: #fff; font: 700 1rem/1 var(--sans); cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(20, 9, 58, .7);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.rc-launch:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(20, 9, 58, .78); }
.rc-launch:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.rc-launch svg { width: 22px; height: 22px; }
.rc-launch[hidden] { display: none; }

.rc-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 91;
  display: flex; flex-direction: column;
  width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 40px));
  border-radius: 20px; overflow: hidden; background: var(--surface);
  box-shadow: 0 30px 70px -20px rgba(20, 9, 58, .55), 0 0 0 1px var(--line);
}
.rc-panel[hidden] { display: none; }

.rc-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 14px 18px; background: linear-gradient(120deg, var(--c1), var(--c2)); color: #fff; }
.rc-title { margin-right: auto; display: grid; }
.rc-title strong { font: 600 1.02rem/1.2 var(--display); }
.rc-title span { font-size: .76rem; opacity: .85; margin-top: 2px; }
.rc-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.rc-icon:hover { background: rgba(255,255,255,.26); }
.rc-icon.on { background: var(--gold); color: #14093a; }
.rc-icon svg { width: 20px; height: 20px; }
.rc-icon:focus-visible, .rc-mic:focus-visible, .rc-send:focus-visible, .rc-chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.rc-log { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 12px; align-content: start; background: linear-gradient(180deg, #fbf9ff, #fff); }
.rc-row { display: flex; }
.rc-row.rc-you { justify-content: flex-end; }
.rc-bub { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 1rem; line-height: 1.52; white-space: pre-wrap; }
.rc-bot .rc-bub { background: var(--tint1); color: var(--ink); border-bottom-left-radius: 5px; }
.rc-you .rc-bub { background: linear-gradient(120deg, var(--c1), var(--c2)); color: #fff; border-bottom-right-radius: 5px; }
.rc-thinking .rc-bub { letter-spacing: 3px; opacity: .6; }

.rc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 4px; }
.rc-chips:empty { display: none; }
.rc-chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--c1); font: 600 .86rem/1 var(--sans); cursor: pointer; }
.rc-chip:hover { border-color: var(--c1); background: var(--tint1); }

.rc-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.rc-input { flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: 1rem; }
.rc-input:focus-visible { outline: 3px solid var(--c2); outline-offset: 1px; border-color: var(--c2); }
.rc-mic, .rc-send { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer; }
.rc-mic { background: var(--tint1); color: var(--c1); }
.rc-mic:hover { background: #eddcfb; }
.rc-mic.on { background: #d92c2c; color: #fff; animation: rc-pulse 1.2s infinite; }
.rc-mic[hidden] { display: none; }
.rc-send { background: linear-gradient(120deg, var(--c1), var(--c2)); color: #fff; }
.rc-mic svg, .rc-send svg { width: 21px; height: 21px; }
@keyframes rc-pulse { 50% { box-shadow: 0 0 0 7px rgba(217, 44, 44, .22); } }
@media (prefers-reduced-motion: reduce) { .rc-mic.on { animation: none; } }

.rc-foot { margin: 0; padding: 0 16px 14px; font-size: .78rem; line-height: 1.5; color: var(--ink-3); background: #fff; }
.rc-foot a { color: var(--c2); font-weight: 600; }

@media (max-width: 520px) {
  .rc-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: calc(100vh - 16px); }
  .rc-launch { right: 12px; bottom: 12px; }
}

/* The email address is longer than its column and was running off the edge. */
.fact dd { overflow-wrap: anywhere; }
.fact dd a { display: inline-block; max-width: 100%; }

/* ---- make the assistant impossible to miss ---- */
.rc-launch {
  min-height: 64px; padding: 0 26px 0 20px; font-size: 1.06rem;
  box-shadow: 0 16px 40px -10px rgba(109, 31, 156, .65), 0 0 0 4px rgba(255, 255, 255, .75);
}
.rc-launch svg { width: 26px; height: 26px; }
.rc-launch::after {
  content: ""; position: absolute; top: 9px; right: 12px; width: 11px; height: 11px;
  border-radius: 50%; background: #34d97a; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.rc-launch.nudge { animation: rc-nudge 1.5s ease-in-out 3; }
@keyframes rc-nudge {
  0%, 100% { transform: none; }
  15% { transform: translateY(-7px) rotate(-2deg); }
  30% { transform: translateY(0) rotate(2deg); }
  45% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .rc-launch.nudge { animation: none; } }

.rc-peek {
  position: fixed; right: 20px; bottom: 96px; z-index: 90;
  width: min(300px, calc(100vw - 40px)); padding: 16px 40px 16px 18px;
  border-radius: 18px 18px 6px 18px; background: #fff; color: var(--ink);
  box-shadow: 0 22px 50px -16px rgba(20, 9, 58, .5), 0 0 0 1px var(--line);
  font-size: .98rem; line-height: 1.5; cursor: pointer;
  animation: rc-rise .45s var(--ease);
}
.rc-peek[hidden] { display: none; }
.rc-peek p { margin: 0; max-width: none; }
.rc-peek-x {
  position: absolute; top: 6px; right: 8px; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: none; color: var(--ink-3);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.rc-peek-x:hover { background: var(--tint1); color: var(--ink); }
.rc-peek-x:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
@keyframes rc-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .rc-peek { animation: none; } }
@media (max-width: 520px) { .rc-peek { right: 12px; left: 12px; width: auto; bottom: 88px; } }

/* An entry point inside the page, for anyone who never looks at corners. */
.ask-band { background: linear-gradient(120deg, var(--tint1), #fff 45%, var(--tint2)); }
.ask-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; justify-content: space-between; }
.ask-inner h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 18ch; }
.ask-inner p { margin: .5rem 0 0; color: var(--ink-2); max-width: 46ch; }
.ask-open {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px;
  border: 0; border-radius: 999px; background: linear-gradient(120deg, var(--c1), var(--c2));
  color: #fff; font: 700 1.06rem/1 var(--sans); cursor: pointer;
  box-shadow: 0 16px 36px -14px rgba(109, 31, 156, .7);
}
.ask-open:hover { transform: translateY(-2px); }
.ask-open:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ask-open svg { width: 24px; height: 24px; }

/* The copilot's "we've sent it" card. */
.rc-done {
  display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(120deg, #e9f8ef, #eef6ff);
  box-shadow: inset 0 0 0 1px rgba(31, 122, 63, .22);
  font-size: .94rem; line-height: 1.5; color: var(--ink-2);
}
.rc-done strong { display: flex; align-items: center; gap: 8px; color: #1f7a3f; font-size: 1rem; }
.rc-done strong::before {
  content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #1f7a3f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.rc-done a { color: var(--c2); font-weight: 600; }
.form-status { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: .96rem; line-height: 1.5; }
.form-status.ok { background: #e9f8ef; color: #1f7a3f; box-shadow: inset 0 0 0 1px rgba(31,122,63,.22); }
.form-status.bad { background: #fdecec; color: #a22; box-shadow: inset 0 0 0 1px rgba(170,34,34,.2); }

/* The footer email is longer than its column and was running across the one
   next to it. Let every footer string break rather than overflow. */
.foot p, .foot a, .foot li { overflow-wrap: anywhere; }
.foot-grid { gap: 34px 28px; }

/* Phone fixes found by measuring, not by eye. */
/* The hero film box was 408px wide inside a 390px screen. */
.hero-grid > * { min-width: 0; }
.hero-art, .hero-media, .hero-media video, .hero-media img { max-width: 100%; min-width: 0; }

/* Footer links were 22px tall. The people using this site are often in their
   sixties and seventies; a 22px target is a missed tap. */
.foot a { display: inline-block; padding-block: 9px; line-height: 1.35; }
.foot ul { gap: 2px; }
.foot-base { line-height: 1.6; }
.skip:focus { padding: 16px 20px; }

/* Browsers give <figure> a default margin of 1em 40px. That 40px was pushing
   the hero film 18px past the right edge of a 390px screen. */
figure { margin: 0; }
/* The phone number inside the facts panel is the single most important link
   on the site — give it a proper tap target. */
.fact dd a { padding-block: 8px; }