/* ============================================================================
   Jackson Square Group — rebuilt stylesheet
   ----------------------------------------------------------------------------
   This one is close to a restoration. The original theme's main.css survived
   in the archive, and its values are used directly:

     page       #4e585c slate in the original. Removed here: the page now runs
                white edge to edge, with the #39c9ff rule still across the top
     masthead   #2b373b, 130px tall, white navigation, logo floated right
     accent     #39c9ff sky blue (links, box headings, rules)
     cards      .box-4 sky-blue gradient, .box-12 dotted #2b373b border
     footer     black, white centred text, a flourish rule above it
     type       Georgia, serif — the original font stack

   Three deliberate departures, all recorded on sources.html:

     1. Responsive. The original was a fixed 960px grid; this collapses.
     2. Link text uses #0a6d94 rather than #39c9ff, because #39c9ff on white
        is a 1.9:1 contrast ratio. The sky blue is still used for rules,
        headings and cards, where it is decoration rather than body text.
     3. Spacing is looser. The original was built for 2010 screens.
     4. The slate surround is gone. The original framed a fixed 960px container
        with #4e585c on both sides; this runs white to the edges and centres
        the content instead.
   ========================================================================== */

:root {
  --slate: #4e585c;
  --ink: #2b373b;
  --text: #3a464a;
  --soft: #5f6d72;
  --sky: #39c9ff;
  --sky-soft: #cdf1ff;
  --link: #0a6d94;
  --link-dk: #08556f;
  --paper: #ffffff;
  --paper-2: #f4f7f8;
  --line: #d5dde0;
  --line-2: #bcc9cd;
  --wrap: 1120px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: Georgia, "Times New Roman", "Liberation Serif", serif;
  --sans: "Lucida Grande", "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  border-top: 3px solid var(--sky);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(10,109,148,.28); }
a:hover { color: var(--link-dk); border-bottom-color: currentColor; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: normal; color: var(--ink); line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
h5 { font-family: var(--sans); text-transform: uppercase; font-size: .74rem; letter-spacing: .16em; color: var(--link); margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
blockquote { margin: 0; }

.sheet { width: 100%; background: var(--paper); overflow: hidden; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 3.6vw, 2.5rem); }
.narrow { max-width: 66ch; }
.center { text-align: center; }
.muted { color: var(--soft); }
.small { font-size: .9rem; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88em; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 1.9rem; } .mt-4 { margin-top: 2.6rem; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: .7rem 1.1rem; }
.skip:focus { left: .5rem; top: .5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rule { height: 3px; width: 52px; background: var(--sky); border-radius: 2px; margin: 0 0 1rem; }
.center .rule { margin-inline: auto; }
.eyebrow { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--link); margin: 0 0 .5rem; }
.lede { font-size: clamp(1.04rem, 1.5vw, 1.18rem); color: var(--soft); max-width: 62ch; }
.center .lede { margin-inline: auto; }

/* ------------------------------------------------------------- masthead/nav */
.site-header { background: var(--ink); color: #fff; }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 108px; padding: .9rem 0; }
.brand { order: 2; margin-left: auto; border: 0; flex: 0 0 auto; }
.brand img { width: 281px; max-width: 46vw; height: auto; }
.nav { order: 1; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .2rem; }
.nav a { color: #fff; border: 0; font-size: .96rem; padding: .42rem .7rem; border-radius: 3px; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav a[aria-current="page"] { color: var(--sky); }
.nav .sep { color: rgba(255,255,255,.35); padding: .42rem 0; }
.nav-toggle { display: none; order: 3; width: 44px; height: 44px; background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; margin: 3px auto; transition: transform .22s var(--ease), opacity .22s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.drawer { position: fixed; inset: 0 0 auto; z-index: 190; background: var(--ink); color: #fff; padding: 1rem 0 1.4rem;
  transform: translateY(-102%); transition: transform .28s var(--ease); visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.drawer li { border-bottom: 1px solid rgba(255,255,255,.14); }
.drawer a { display: block; padding: .8rem .2rem; color: #fff; border: 0; }
.drawer li.sub a { padding-left: 1.2rem; font-size: .9rem; color: rgba(255,255,255,.78); }

/* ---------------------------------------------------------------------- hero */
/* The banner photograph is 960x240 and has the subject on its left third. The
   original put the letter on the empty right half; so does this. */
.banner { position: relative; overflow: hidden; min-height: clamp(240px, 24vw, 310px); border-bottom: 1px solid var(--line); }
.banner .bg { position: absolute; inset: 0; }
.banner .bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.banner .bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,26,29,.18) 0%, rgba(18,26,29,.55) 30%, rgba(18,26,29,.9) 46%, rgba(18,26,29,.95) 100%); }
.banner-inner { position: relative; z-index: 2; padding: clamp(1.4rem, 2.6vw, 2rem) 0; }
.banner .hero-copy { margin-left: auto; max-width: 31rem; }
.banner .eyebrow { color: var(--sky); }
.banner h2 { color: #fff; font-size: clamp(1.35rem, 2.5vw, 1.95rem); line-height: 1.2; margin-bottom: .55rem; }
.banner .hero-copy p { color: #d7e3e8; max-width: 30rem; font-size: .92rem; line-height: 1.55; margin-bottom: .75rem; }
.banner .sig img { width: 132px; opacity: .95; filter: brightness(0) invert(1); }
@media (max-width: 780px) {
  .banner { min-height: 0; }
  .banner .bg { position: relative; height: 210px; }
  .banner .bg img { object-position: center; }
  .banner .bg::after { display: none; }
  .banner-inner { padding: 1.5rem 0 1.8rem; background: var(--ink); }
  .banner .hero-copy { max-width: 100%; }
}

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(2rem, 4.4vw, 3.2rem) 0; }
.section-soft { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-ink { background: var(--ink); color: #dce9ee; }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: #fff; }
.section-ink .lede, .section-ink p { color: #c9d9df; }
.section-ink a { color: var(--sky); border-bottom-color: rgba(57,201,255,.4); }
.section-ink .eyebrow { color: var(--sky); }
.section-ink .rule { background: var(--sky); }
.section-head { margin-bottom: 1.8rem; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.split-wide { grid-template-columns: 1.15fr .85fr; }
.split-narrow { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 880px) { .split, .split-wide, .split-narrow { grid-template-columns: 1fr; } }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* The original's box: dotted #2b373b border, white inside. */
.box { background: var(--paper); border: 1px dotted var(--ink); padding: 1.3rem 1.4rem; }
.box h5 { margin-bottom: .55rem; }
.box p:last-child { margin-bottom: 0; }

/* The original's .box-4: sky blue with a white gradient washing down. */
.card-sky { background: var(--sky) url('../img/gradient.png') repeat-x; border: 1px solid #1ba9dd; padding: 1.25rem 1.3rem; color: #08313f; }
.card-sky h3, .card-sky h4 { color: #06222c; }
.card-sky p { color: #0b3a4a; }
.card-sky a { color: #06384a; border-bottom-color: rgba(3,44,58,.45); }
.card-sky .eyebrow { color: #063a4c; }

.card { background: var(--paper); border: 1px solid var(--line); padding: 1.25rem 1.3rem; }
.card p:last-child { margin-bottom: 0; }
.card-top { border-top: 3px solid var(--sky); }

.figure { margin: 0; }
.figure img { width: 100%; }
.figure figcaption { font-size: .86rem; color: var(--soft); margin-top: .55rem; }
.photo-band { margin: 0; }
.photo-band img { width: 100%; height: clamp(200px, 30vw, 360px); object-fit: cover; }
.photo-band figcaption { font-size: .82rem; color: var(--soft); padding-top: .5rem; }

/* --------------------------------------------------------------- components */
.btn { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-family: var(--sans); font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .72rem 1.25rem; border: 1px solid transparent; border-radius: 2px; transition: background-color .16s var(--ease), color .16s var(--ease); }
.btn:hover { text-decoration: none; }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #16232a; color: #fff; }
.btn-sky { background: var(--sky); color: #06303d; border-color: #2bb6e8; }
.btn-sky:hover { background: #6fd8ff; color: #06303d; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); border-color: #fff; }
.btn-white:hover { background: #e9f6fb; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.link-arrow { font-family: var(--sans); font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.link-arrow::after { content: "\2192"; margin-left: .35rem; }
.link-arrow:hover::after { margin-left: .55rem; }

.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 880px) { .people { grid-template-columns: 1fr; } }
.person img { width: 148px; height: 148px; border-radius: 50%; border: 3px solid var(--sky); }
.person h3 { margin: .9rem 0 .15rem; font-size: 1.25rem; }
.person .role { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--link); margin: 0 0 .7rem; }
.person p { font-size: .95rem; color: var(--text); }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-2); }
.timeline li { position: relative; padding: 0 0 1.4rem 1.4rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .5rem; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sky); }
.timeline .when { display: block; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--link); margin-bottom: .2rem; }
.timeline h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.timeline p { margin: 0; font-size: .93rem; color: var(--soft); }

.specs { list-style: none; margin: 0; padding: 0; }
.specs li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.specs .k { color: var(--soft); font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.specs .v { text-align: right; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 12px; height: 7px; border-left: 2.5px solid var(--link); border-bottom: 2.5px solid var(--link); transform: rotate(-45deg); }

.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pill { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; background: var(--sky-soft); color: #0a4f66; padding: .28rem .7rem; border-radius: 100px; }

.quote { border-left: 4px solid var(--sky); padding: .2rem 0 .2rem 1.2rem; }
.quote blockquote { font-size: 1.1rem; line-height: 1.6; color: var(--ink); margin: 0 0 .6rem; }
.quote figcaption { font-family: var(--sans); font-size: .8rem; letter-spacing: .04em; color: var(--soft); }

.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: 0; padding: 1rem .1rem; cursor: pointer; text-align: left; font-family: var(--font); font-size: 1.02rem; color: var(--ink); }
.acc-btn .chev { width: 9px; height: 9px; border-right: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(45deg); transition: transform .2s var(--ease); flex: 0 0 auto; }
.acc-btn[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.acc-panel { padding: 0 .1rem 1.1rem; }

.callout { background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--sky); padding: 1.1rem 1.2rem; }
.callout h4 { margin-bottom: .4rem; }
.callout p:last-child { margin-bottom: 0; }

.notice { background: #fff8e6; border: 1px solid #f0dfae; padding: 1rem 1.1rem; font-size: .94rem; }
.notice b { color: var(--ink); }

/* ------------------------------------------------------------------- forms */
.form { display: grid; gap: .9rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-bottom: .35rem; }
.field .req { color: var(--link); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line-2); border-radius: 2px; padding: .6rem .7rem; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
.field .err { display: block; font-family: var(--sans); font-size: .78rem; color: #a3281b; margin-top: .25rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #c0392b; }
.checkbox-field label { display: flex; gap: .6rem; font-family: var(--font); font-size: .9rem; text-transform: none; letter-spacing: 0; font-weight: normal; color: var(--text); }
.checkbox-field input { width: auto; margin-top: .25rem; }
.form-note { font-size: .84rem; color: var(--soft); }
.form-status { font-family: var(--sans); font-size: .9rem; background: var(--sky-soft); border: 1px solid #9fdcf3; padding: .7rem .9rem; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: #000 url('../img/flourish-lite.png') no-repeat center top; color: #cfd9dd; padding: 3.4rem 0 1.4rem; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1.8rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { width: 80px; margin-bottom: .9rem; }
.footer-brand p { font-size: .9rem; color: #cfd9dd; }
.footer-grid h4 { color: #fff; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .35rem; }
.footer-links a, .site-footer a { color: #dbe6ea; border-bottom-color: rgba(219,230,234,.3); font-size: .9rem; }
.footer-links a:hover, .site-footer a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.16); margin-top: 2rem; padding-top: 1.1rem; font-family: var(--sans); font-size: .78rem; color: #a9bcc3; }

.to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 150; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s; }
.to-top.is-visible { opacity: 1; visibility: visible; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  body { background: #fff; border: 0; }
  .site-header, .drawer, .to-top, .site-footer { display: none; }
  .section { padding: .8rem 0; }
  a { color: #000; border: 0; }
}