:root {
  --review-strip-h: 0px;
  --inner-paper: #eee6d5;
  --inner-surface: #fbf7ed;
  --inner-muted: #536861;
  --inner-accent-light: #d8bd86;
}

body {
  background: var(--inner-surface);
}

.inner-site {
  min-height: 100svh;
  overflow: clip;
  background: var(--inner-surface);
}

.inner-site-nav {
  background: var(--dark);
  color: var(--light);
}

.inner-site .eyebrow,
.inner-site .profile-index,
.inner-site .profile-role {
  font-family: var(--utility);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.inner-site .eyebrow,
.inner-site .profile-index {
  margin-bottom: 24px;
  color: var(--accent);
}

.about-hero {
  position: relative;
}

.breakwater-about-hero {
  display: grid;
  min-height: clamp(460px, 53vh, 575px);
  padding:
    calc(var(--site-nav-h) + clamp(44px, 5.2vw, 72px))
    clamp(24px, 6vw, 100px)
    clamp(44px, 5.2vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.6fr);
  gap: clamp(56px, 8vw, 128px);
  align-items: center;
  background: var(--dark);
  color: var(--inner-paper);
}

.about-hero-copy {
  max-width: 850px;
}

.about-hero h1,
.contact-intro h1 {
  max-width: 880px;
  margin: 0 0 30px;
  font-family: var(--display);
  font-size: clamp(66px, 7.4vw, 126px);
  font-weight: 400;
  letter-spacing: -0.057em;
  line-height: 0.9;
  text-wrap: balance;
}

.about-hero-copy > p:last-child,
.contact-intro-copy > p:last-child {
  max-width: 680px;
  margin-bottom: 0;
  color: rgba(255, 250, 240, 0.72);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.68;
}

.about-fact-ledger {
  border-top: 1px solid rgba(238, 230, 213, 0.36);
  border-bottom: 1px solid rgba(238, 230, 213, 0.36);
}

.about-fact-ledger > div {
  display: grid;
  padding: 23px 0;
  border-bottom: 1px solid rgba(238, 230, 213, 0.2);
  grid-template-columns: minmax(130px, 0.45fr) 1fr;
  gap: 22px;
  align-items: baseline;
}

.about-fact-ledger > div:last-child {
  border-bottom: 0;
}

.about-fact-ledger strong {
  color: var(--inner-paper);
  font-family: var(--display);
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.about-fact-ledger span {
  color: rgba(255, 250, 240, 0.68);
  font-size: 0.9rem;
  line-height: 1.5;
}

.breakwater-about {
  background: var(--inner-surface);
}

.breakwater-profile {
  display: grid;
  min-height: 600px;
  grid-template-columns: 0.95fr minmax(300px, 0.65fr) 1fr;
}

.about-profile {
  background: var(--inner-paper);
  color: var(--ink);
}

.breakwater-media {
  min-width: 0;
  background:
    linear-gradient(rgba(11, 43, 37, 0.3), rgba(11, 43, 37, 0.3)),
    var(--media) center / cover no-repeat;
}

.profile-portrait {
  position: relative;
  display: block;
  min-height: 600px;
  margin: 0;
  overflow: hidden;
  border-right: 12px solid var(--accent);
  border-left: 1px solid rgba(23, 59, 51, 0.26);
  background: #d8d2c7;
}

.profile-portrait img {
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  object-position: 57% 40%;
}

.profile-copy {
  min-width: 0;
  align-self: center;
  padding: clamp(50px, 6vw, 90px);
}

.profile-copy h2 {
  margin: 0 0 7px;
  font-family: var(--display);
  font-size: clamp(42px, 4.2vw, 72px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.profile-role {
  margin: 0 0 23px;
  color: var(--inner-muted);
}

.profile-biography {
  max-width: 660px;
  margin-bottom: 0;
  color: var(--inner-muted);
  font-size: 16px;
  line-height: 1.68;
}

.profile-biography p {
  margin: 0 0 1.05em;
}

.profile-biography p:last-child {
  margin-bottom: 0;
}

.harbor-contact-layout {
  display: grid;
  min-height: 930px;
  padding-top: var(--site-nav-h);
  grid-template-columns: minmax(360px, 0.82fr) minmax(570px, 1.18fr);
  background: var(--inner-surface);
}

.contact-intro {
  display: flex;
  min-height: 100%;
  align-items: center;
  padding: clamp(76px, 9vw, 140px) clamp(24px, 6vw, 100px);
  background:
    radial-gradient(
      circle at 0 100%,
      transparent 0 22%,
      rgba(255, 250, 240, 0.09) 22.2% 22.45%,
      transparent 22.7% 33%,
      rgba(255, 250, 240, 0.08) 33.2% 33.45%,
      transparent 33.7% 46%,
      rgba(255, 250, 240, 0.07) 46.2% 46.45%,
      transparent 46.7%
    ),
    var(--dark);
  color: var(--inner-paper);
}

.contact-intro-copy {
  position: relative;
  z-index: 1;
}

.contact-intro h1 {
  font-size: clamp(62px, 4.8vw, 116px);
}

.inner-contact-form {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: clamp(48px, 6vw, 92px);
  background: var(--inner-surface);
  color: var(--ink);
}

.inner-form-heading {
  display: grid;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: start;
}

.inner-form-heading h2 {
  max-width: 760px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 76px);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.96;
  text-wrap: balance;
}

.form-launch-status {
  min-width: 190px;
  padding: 18px;
  border-left: 3px solid var(--accent);
  background: var(--inner-paper);
}

.form-launch-status b,
.form-launch-status span {
  display: block;
}

.form-launch-status b {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-launch-status span {
  margin-top: 5px;
  color: var(--inner-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.inner-contact-form[data-delivery="hosted"] .form-launch-status {
  border-left-color: var(--dark);
}

.inner-contact-form.is-security-ready .form-launch-status {
  background: rgba(216, 189, 134, 0.34);
}

.inner-contact-form.has-error .form-launch-status {
  border-left-color: #9a332f;
}

.inner-contact-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 38px 0 0;
  border: 0;
}

.inner-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

.inner-field {
  display: grid;
  min-width: 0;
  gap: 9px;
}

.inner-field-message {
  grid-column: 1 / -1;
}

.inner-field label {
  font-size: 0.84rem;
  font-weight: 700;
}

.inner-field label em {
  color: var(--inner-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 500;
}

.inner-field input,
.inner-field select,
.inner-field textarea {
  width: 100%;
  min-height: 54px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font: inherit;
}

.inner-field textarea {
  min-height: 150px;
  resize: vertical;
}

.inner-field input:focus-visible,
.inner-field select:focus-visible,
.inner-field textarea:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.inner-form-consent {
  display: grid;
  margin-top: 30px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.inner-form-consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--dark);
}

.inner-form-consent label {
  max-width: 760px;
  color: var(--inner-muted);
  font-size: 0.8rem;
  line-height: 1.62;
}

.inner-form-consent a,
.inner-turnstile-field a {
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-weight: 700;
}

.inner-form-trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.inner-turnstile-field {
  display: grid;
  min-width: 0;
  margin-top: 24px;
  gap: 10px;
}

.inner-turnstile-field[hidden] {
  display: none;
}

.inner-turnstile-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inner-turnstile-widget {
  width: 100%;
  min-width: 0;
  min-height: 65px;
  max-width: 100%;
}

.inner-turnstile-widget iframe {
  max-width: 100%;
}

.inner-security-status {
  margin: 0;
  color: var(--inner-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.inner-form-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.inner-form-actions button {
  min-height: 56px;
  padding: 15px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  color: rgba(23, 59, 51, 0.54);
  cursor: not-allowed;
  font: 800 0.74rem/1.2 var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.inner-form-actions button:not(:disabled) {
  background: var(--dark);
  color: var(--light);
  cursor: pointer;
}

.inner-form-actions button:not(:disabled):hover {
  background: #163f36;
}

.inner-form-actions button.is-loading,
.inner-contact-form[aria-busy="true"] .inner-form-actions button {
  background: var(--dark);
  color: var(--light);
  cursor: wait;
}

.inner-form-actions p {
  margin: 0;
  color: var(--inner-muted);
  font-size: 0.8rem;
}

.inner-form-results {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 9px;
}

.inner-form-feedback {
  width: fit-content;
  max-width: 680px;
  line-height: 1.55;
}

.inner-form-feedback:empty {
  display: none;
}

.inner-form-feedback-status[data-state="success"] {
  color: var(--dark);
  font-weight: 700;
}

.inner-form-feedback-error:not(:empty) {
  padding: 10px 12px;
  border-left: 3px solid #9a332f;
  background: rgba(154, 51, 47, 0.08);
  color: #762824;
  font-weight: 700;
}

.inner-field input:focus-visible,
.inner-field select:focus-visible,
.inner-field textarea:focus-visible,
.inner-form-consent input:focus-visible,
.inner-form-consent a:focus-visible,
.inner-form-actions button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.inner-form-feedback:focus {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}

.next-step-band {
  display: grid;
  padding: 58px clamp(24px, 6vw, 100px);
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.08fr) auto;
  gap: 54px;
  align-items: center;
  background: var(--inner-accent-light);
  color: var(--dark);
}

.next-step-band h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 4.7vw, 82px);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.94;
}

.next-step-band p {
  margin: 0;
  line-height: 1.65;
}

.meeting-link {
  display: inline-flex;
  min-height: 52px;
  padding: 13px 18px;
  border: 1px solid var(--dark);
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.meeting-link {
  width: clamp(270px, 21vw, 355px);
  padding: 18px 20px;
  border-color: var(--dark);
  background: var(--dark);
  color: var(--light);
  gap: 24px;
  justify-content: space-between;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.meeting-link:hover,
.meeting-link:focus-visible {
  background: var(--ink);
  color: var(--light);
}

.meeting-link:hover {
  transform: translateY(-2px);
}

.meeting-link b,
.meeting-link small {
  line-height: 1.2;
  white-space: nowrap;
}

.meeting-link b {
  font-size: 0.74rem;
}

.meeting-link small {
  color: rgba(255, 250, 240, 0.58);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

@media (max-width: 1100px) {
  .breakwater-about-hero {
    grid-template-columns: 1fr;
  }

  .harbor-contact-layout {
    grid-template-columns: minmax(320px, 0.76fr) minmax(500px, 1.24fr);
  }
}

@media (max-width: 980px) {
  .breakwater-profile {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .breakwater-profile .breakwater-media {
    display: none;
  }

  .harbor-contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-intro {
    min-height: 620px;
  }

  .next-step-band {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .meeting-link {
    justify-self: start;
  }

  .meeting-link {
    width: min(100%, 355px);
  }
}

@media (max-width: 760px) {
  .breakwater-about-hero {
    min-height: 0;
    padding:
      calc(var(--site-nav-h) + 45px)
      22px
      41px;
    gap: 48px;
  }

  .about-hero h1,
  .contact-intro h1 {
    font-size: clamp(52px, 15vw, 78px);
  }

  .breakwater-profile {
    grid-template-columns: 1fr;
  }

  .profile-portrait,
  .profile-portrait img {
    min-height: 520px;
  }

  .profile-copy {
    padding: 52px 24px 64px;
  }

  .contact-intro {
    min-height: 560px;
    padding: 72px 22px;
  }

  .inner-contact-form {
    padding: 64px 22px;
  }

  .inner-form-heading,
  .inner-form-fields {
    grid-template-columns: 1fr;
  }

  .inner-field-message {
    grid-column: auto;
  }

  .form-launch-status {
    min-width: 0;
  }

  .inner-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .inner-form-actions button {
    width: 100%;
  }

  .inner-form-results,
  .inner-form-feedback {
    width: 100%;
  }

  .next-step-band {
    padding: 52px 22px;
  }

  .meeting-link {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .about-fact-ledger > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .profile-portrait,
  .profile-portrait img {
    min-height: 440px;
  }

  .inner-form-consent {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
  }

  .inner-turnstile-field {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .inner-site-nav,
  .breakwater-about-hero,
  .contact-intro {
    forced-color-adjust: auto;
  }

  .inner-field input,
  .inner-field select,
  .inner-field textarea,
  .inner-form-consent input,
  .inner-form-actions button,
  .inner-form-feedback-error:not(:empty) {
    border: 1px solid CanvasText;
  }

  .inner-form-actions button:not(:disabled),
  .inner-form-actions button.is-loading {
    background: ButtonFace;
    color: ButtonText;
  }

  .inner-form-feedback-error:not(:empty) {
    background: Canvas;
    color: CanvasText;
  }

  .inner-field input:focus-visible,
  .inner-field select:focus-visible,
  .inner-field textarea:focus-visible,
  .inner-form-consent input:focus-visible,
  .inner-form-consent a:focus-visible,
  .inner-form-actions button:focus-visible,
  .inner-form-feedback:focus {
    outline: 3px solid Highlight;
  }
}