/* Approved mockup rules. Keep their order when integrating. */

#marine-concepts {
  --paper:#fff;
  --ink:#122e40;
  --soft:#f1f5f4;
  --line:#d6e0e2;
  --muted:#516670;
  --action:#1756a3;
  font-family:Arial,sans-serif;
  color:var(--ink)
}

#marine-concepts * {
  box-sizing:border-box
}

#marine-concepts button,#marine-concepts input,#marine-concepts select {
  font:inherit
}

#marine-concepts button {
  cursor:pointer
}

#marine-concepts .switcher {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px
}

#marine-concepts .switcher button {
  flex:1;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  padding:10px
}

#marine-concepts .switcher button[aria-pressed=true] {
  background:var(--ink);
  color:var(--paper)
}

#marine-concepts .device {
  max-width:390px;
  margin:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 40px #00000012
}

#marine-concepts header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:21px 20px;
  border-bottom:1px solid var(--line)
}

#marine-concepts .brand {
  font-size:17px;
  font-weight:800;
  letter-spacing:1px;
  display:flex;
  gap:9px;
  align-items:center
}

#marine-concepts .brand small {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  margin-top:4px
}

#marine-concepts .logo {
  border:1px solid var(--line);
  border-radius:50%;
  padding:8px;
  display:flex
}

#marine-concepts .header-note {
  font-size:11px;
  color:var(--muted);
  max-width:67px;
  text-align:right;
  line-height:1.4
}

#marine-concepts section {
  padding:25px 23px
}

#marine-concepts .eyebrow {
  font-size:11px;
  letter-spacing:1.7px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--action);
  margin:0 0 13px
}

#marine-concepts h1 {
  font-family:Georgia,serif;
  font-size:35px;
  font-weight:400;
  line-height:1.08;
  margin:0 0 17px;
  letter-spacing:-1px
}

#marine-concepts h2 {
  font-family:Georgia,serif;
  font-size:26px;
  line-height:1.15;
  font-weight:400;
  margin:0 0 12px
}

#marine-concepts p {
  font-size:15px;
  line-height:1.55;
  margin:0 0 16px
}

#marine-concepts .local {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  margin-bottom:20px;
  color:var(--muted)
}

#marine-concepts .local select {
  min-height:44px;
  border:0;
  background:var(--soft);
  color:var(--ink);
  border-radius:6px;
  padding:8px;
  max-width:200px
}

#marine-concepts .founder {
  border-left:3px solid var(--action);
  padding-left:14px;
  margin:22px 0 16px
}

#marine-concepts .founder p {
  font-family:Georgia,serif;
  font-size:19px;
  line-height:1.4
}

#marine-concepts .byline {
  font-size:12px;
  line-height:1.5;
  color:var(--muted)
}

#marine-concepts details {
  margin-top:12px
}

#marine-concepts summary {
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:13px;
  text-decoration:underline;
  cursor:pointer
}

#marine-concepts details p {
  font-size:14px;
  font-family:Arial,sans-serif;
  line-height:1.55
}

#marine-concepts .primary {
  width:100%;
  border:0;
  border-radius:7px;
  background:var(--action);
  color:white;
  min-height:52px;
  padding:13px 12px;
  font-weight:700
}

#marine-concepts .watch {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:7px;
  width:100%;
  min-height:48px;
  font-weight:700
}

#marine-concepts .media {
  position:relative;
  margin:0 23px;
  background:#183a46;
  border-radius:10px;
  overflow:hidden;
  min-height:170px;
  color:white;
  display:flex;
  align-items:flex-end;
  padding:18px
}

#marine-concepts .shelves {
  position:absolute;
  inset:20px 18px 50px;
  opacity:.45;
  display:flex;
  gap:8px;
  align-items:end;
  border-bottom:7px solid #afc6c7
}

#marine-concepts .shelves span {
  flex:1;
  background:linear-gradient(#b4d2cc 0 20%,#335c66 20% 40%,#e6eee6 40% 70%,#51727a 70%);
  height:65%;
  border-radius:5px 5px 0 0
}

#marine-concepts .shelves span:nth-child(2n) {
  height:88%
}

#marine-concepts .media-caption {
  position:relative;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.3px
}

#marine-concepts .caption {
  margin:10px 23px 0;
  color:var(--muted);
  font-size:11px
}

#marine-concepts .process {
  background:var(--soft);
  margin-top:24px
}

#marine-concepts .step {
  display:flex;
  gap:12px;
  margin-top:20px
}

#marine-concepts .num {
  flex:0 0 27px;
  height:27px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px
}

#marine-concepts .step strong {
  font-size:14px
}

#marine-concepts .step p {
  font-size:13px;
  color:var(--muted);
  margin:5px 0 0
}

#marine-concepts .form-top {
  font-size:12px;
  color:var(--action);
  margin-bottom:12px
}

#marine-concepts label {
  display:block;
  font-size:13px;
  font-weight:700;
  margin:17px 0 7px
}

#marine-concepts .field {
  width:100%;
  min-height:49px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px;
  background:var(--paper);
  color:var(--ink);
  font-size:16px
}

#marine-concepts .submit {
  margin-top:22px
}

#marine-concepts .fine {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
  margin:11px 0 0
}

#marine-concepts footer {
  padding:18px 23px;
  background:var(--soft);
  font-size:11px;
  text-align:center;
  color:var(--muted)
}

#marine-concepts .video-placeholder {
  margin-top:12px;
  padding:22px;
  background:var(--soft);
  border-radius:8px;
  font-size:13px;
  line-height:1.5
}

#marine-concepts .video-placeholder[hidden] {
  display:none
}

#marine-concepts .back {
  border:0;
  background:transparent;
  color:var(--muted);
  min-height:44px;
  margin-top:8px
}

#marine-concepts .compact .hero {
  background:var(--soft);
  padding-bottom:22px
}

#marine-concepts .compact h1 {
  font-family:Arial,sans-serif;
  font-size:32px;
  font-weight:750;
  letter-spacing:-.8px
}

#marine-concepts .compact .founder {
  border:0;
  padding:16px;
  background:var(--paper);
  border-radius:9px;
  margin:18px 0 10px
}

#marine-concepts .compact .founder p {
  font-family:Arial,sans-serif;
  font-size:16px
}

#marine-concepts .compact .media {
  margin:0;
  border-radius:0;
  min-height:140px
}

#marine-concepts .compact .process {
  margin-top:18px;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}

#marine-concepts .compact .form-section {
  background:var(--soft)
}

#marine-concepts .compact .watch {
  background:var(--action);
  border-color:var(--action);
  color:white
}

#marine-concepts [hidden] {
  display:none!important
}

#marine-concepts .media {
  height:220px;
  padding:0;
  display:block;
  background:#102e49
}

#marine-concepts .store-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

#marine-concepts .exterior {
  display:none
}

#marine-concepts .media-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:30px 15px 12px;
  background:linear-gradient(transparent,#071d34e8);
  color:white
}

#marine-concepts .compact .media {
  height:200px
}

#marine-concepts .compact .interior {
  display:none
}

#marine-concepts .compact .exterior {
  display:block
}

#marine-concepts .compact .hero {
  background:#ecf2fa
}

#marine-concepts .logo {
  color:#1756a3
}

#marine-concepts {
  color-scheme:only light;
  --paper:#ffffff;
  --ink:#16364c;
  --soft:#f4f8fc;
  --line:#dde7ef;
  --muted:#526b7b
}

#marine-concepts .brand-logo {
  display:block;
  width:61px;
  height:auto;
  max-height:46px;
  object-fit:contain
}

#marine-concepts header {
  background:#fff;
  padding:7px 23px
}

#marine-concepts .header-note {
  max-width:115px;
  font-size:12px
}

#marine-concepts .hero {
  background:linear-gradient(#fff,#f7fbff)
}

#marine-concepts .switcher button[aria-pressed=true] {
  background:#eaf3fc;
  color:#1756a3;
  border-color:#b4cfe9
}

#marine-concepts .media,#marine-concepts .compact .media {
  height:auto;
  min-height:0;
  background:#f4f8fc
}

#marine-concepts .store-photo {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:contain;
  image-rendering:auto
}

#marine-concepts .media-caption {
  position:static;
  background:#f4f8fc;
  color:#34566e;
  padding:12px 15px
}

#marine-concepts .compact .hero {
  background:#f7fbff
}

#marine-concepts .hero,#marine-concepts .compact .hero {
  background:radial-gradient(ellipse at 100% 0%,#e1f4f8 0,transparent 52%),linear-gradient(#fffdf8,#fff);
  padding-top:22px
}

#marine-concepts .eyebrow {
  color:#186987;
  letter-spacing:1.3px
}

#marine-concepts h1 {
  color:#103a62
}

#marine-concepts .founder,#marine-concepts .compact .founder {
  background:linear-gradient(135deg,#d8edf7,#e9f5f9 65%,#fff0d9);
  border:0;
  border-top:4px solid #2498b3;
  padding:19px;
  border-radius:4px 20px 20px 20px;
  margin:22px 0 18px;
  box-shadow:0 7px 22px #174c6810
}

#marine-concepts .founder-heading {
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:17px
}

#marine-concepts .headshot {
  display:block;
  width:78px;
  height:96px;
  object-fit:cover;
  object-position:center top;
  border-radius:12px;
  box-shadow:0 3px 0 #ffffff;
  flex-shrink:0
}

#marine-concepts .founder-kicker {
  display:block;
  font-size:11px;
  color:#426477;
  margin-bottom:5px
}

#marine-concepts .founder-name {
  display:block;
  font-size:21px;
  letter-spacing:-.5px;
  color:#133f62
}

#marine-concepts .founder-role {
  display:block;
  font-size:12px;
  line-height:1.4;
  color:#426477;
  margin-top:4px
}

#marine-concepts .founder blockquote {
  padding:0;
  margin:0
}

#marine-concepts .founder blockquote p,#marine-concepts .compact .founder blockquote p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:17px;
  line-height:1.55;
  color:#214559;
  margin:0 0 13px
}

#marine-concepts .founder-signature {
  font-family:Georgia,serif;
  font-size:25px;
  font-style:italic;
  color:#17608b;
  transform:rotate(-5deg);
  width:fit-content;
  margin-top:4px
}

#marine-concepts .watch,#marine-concepts .compact .watch {
  background:#fff;
  border:1px solid #e5e0d7;
  padding:14px 12px;
  justify-content:flex-start;
  gap:13px;
  color:#203447;
  border-radius:12px;
  box-shadow:0 5px 14px #2540560c
}

#marine-concepts .video-play {
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:42px;
  border-radius:12px;
  background:#f50919;
  color:#fff;
  flex-shrink:0
}

#marine-concepts .video-play svg {
  width:23px;
  height:23px;
  fill:currentColor
}

#marine-concepts .video-label {
  text-align:left;
  font-size:14px;
  line-height:1.35
}

#marine-concepts .video-label small {
  display:block;
  font-size:11px;
  font-weight:400;
  color:#65737d;
  margin-top:4px
}

#marine-concepts .process {
  background:#fffaef
}

#marine-concepts .num {
  background:#e2f2f5;
  color:#13637b;
  border:0;
  font-weight:700
}

#marine-concepts .primary {
  background:linear-gradient(110deg,#135c9f,#16869d);
  box-shadow:0 5px 12px #1756a326
}

#marine-concepts .compact .form-section {
  background:#f3fafb
}

#marine-concepts .media-caption {
  background:#fff9ed;
  color:#385665
}


#marine-concepts .header-phone {
  color:#1756a3;
  text-align:right;
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  min-height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  white-space:nowrap
}

#marine-concepts .header-phone span {
  font-size:11px;
  font-weight:400;
  color:#526b7b;
  margin-bottom:3px
}

#marine-concepts .store-viewport {
  overflow:hidden;
  touch-action:pan-y
}

#marine-concepts .store-track {
  display:flex;
  transition:transform .45s ease;
  will-change:transform
}

#marine-concepts .store-slide {
  flex:0 0 100%;
  min-width:0;
  margin:0
}

#marine-concepts .store-slide img {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  display:block;
  object-fit:contain
}

#marine-concepts .store-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff9ed;
  padding:0 9px
}

#marine-concepts .store-dots {
  display:flex;
  gap:1px
}

#marine-concepts .store-controls button {
  min-width:44px;
  min-height:44px;
  border:0;
  background:transparent;
  color:#36576c;
  font-size:13px;
  border-radius:8px
}

#marine-concepts .store-controls button[aria-pressed=true] {
  color:#1756a3;
  background:#e1edf5;
  font-weight:700
}

#marine-concepts .store-viewport {
  position:relative
}

#marine-concepts .store-carousel .media-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,rgba(8,29,45,.85));
  color:#fff;
  padding:34px 16px 15px;
  font-size:13px;
  font-weight:600;
  pointer-events:none
}

@media(prefers-reduced-motion:reduce) {
  #marine-concepts .store-track {
  transition:none
}

}

#marine-concepts .founder,#marine-concepts .compact .founder {
  background:#e7eef2;
  border:0;
  border-radius:3px;
  box-shadow:none;
  padding:20px;
  margin:22px 0 18px
}

#marine-concepts .founder-heading {
  padding-bottom:15px;
  margin-bottom:16px;
  border-bottom:1px solid #c5d3db
}

#marine-concepts .founder blockquote p,#marine-concepts .compact .founder blockquote p {
  font-family:Arial,sans-serif;
  font-style:normal;
  font-size:15px;
  line-height:1.6;
  color:#243f50;
  margin-bottom:14px
}

#marine-concepts .founder blockquote p:last-child {
  margin-bottom:0
}

#marine-concepts .headshot {
  border-radius:3px;
  box-shadow:none
}

#marine-concepts .founder-name {
  font-size:20px;
  letter-spacing:0
}

#marine-concepts .founder,#marine-concepts .compact .founder {
  background:#fff2bb
}

#marine-concepts .founder-heading {
  border-bottom-color:#e4d18a
}

#marine-concepts .founder blockquote p,#marine-concepts .compact .founder blockquote p {
  font-style:italic;
  color:#413b26
}

#marine-concepts .process {
  padding:30px 26px 34px;
  background:#fcf9f2;
  margin-top:24px
}

#marine-concepts .process .eyebrow {
  font-size:13px;
  letter-spacing:2.4px;
  color:#116695;
  margin-bottom:19px
}

#marine-concepts .process .eyebrow::after {
  content:"";
  display:block;
  width:38px;
  height:2px;
  background:#3db3cf;
  margin-top:16px
}

#marine-concepts .process h2 {
  font-family:Georgia,serif;
  font-size:42px;
  line-height:1.04;
  letter-spacing:-1.2px;
  color:#092f51;
  margin:0 0 31px;
  font-weight:400
}

#marine-concepts .process-timeline {
  margin:0;
  padding:0;
  list-style:none
}

#marine-concepts .process .step {
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:20px;
  margin:0;
  padding:0 0 34px
}

#marine-concepts .process .step:last-child {
  padding-bottom:0
}

#marine-concepts .process .step:not(:last-child)::before {
  content:"";
  position:absolute;
  left:22px;
  top:46px;
  bottom:0;
  width:1px;
  background:#64bfd3
}

#marine-concepts .process .num {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  position:relative;
  border:0;
  border-radius:50%;
  background:#c9eff8;
  color:#093557;
  font-size:23px;
  font-weight:700
}

#marine-concepts .process h3 {
  font-family:Georgia,serif;
  font-size:21px;
  line-height:1.2;
  font-weight:400;
  color:#093557;
  margin:6px 0 9px;
  letter-spacing:-.45px
}

#marine-concepts .process .step p {
  font-family:Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:#365b73;
  margin:0
}

#marine-concepts .compact .process {
  background:#d6f1f0;
  border-bottom:0
}

#marine-concepts .compact .process .eyebrow {
  color:#12677a
}

#marine-concepts .compact .process .eyebrow::after {
  background:#159cb0
}

#marine-concepts .compact .process h2,#marine-concepts .compact .process h3 {
  color:#073d54
}

#marine-concepts .compact .process .num {
  background:#137c90;
  color:#fff
}

#marine-concepts .compact .process .step:not(:last-child)::before {
  background:#78b9bf
}

#marine-concepts .compact .process .step p {
  color:#2c5663
}

@media(max-width:350px) {
  #marine-concepts .process {
  padding:26px 20px 30px
}

#marine-concepts .process .step {
  gap:15px;
  grid-template-columns:42px minmax(0,1fr)
}

#marine-concepts .process .num {
  width:42px;
  height:42px
}

#marine-concepts .process .step:not(:last-child)::before {
  left:20px;
  top:42px
}

#marine-concepts .process h2 {
  font-size:38px
}

#marine-concepts .process h3 {
  font-size:20px
}

}


#marine-concepts .form-benefits {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  list-style:none;
  padding:0;
  margin:0 0 22px;
  color:#365b73;
  font-size:12px;
  line-height:1.5
}

#marine-concepts .form-benefits li {
  white-space:nowrap
}

#marine-concepts .form-benefits span {
  color:#137c70;
  font-weight:700;
  margin-right:3px
}

#marine-concepts .city-form-heading {
  white-space:nowrap;
  font-size:26px;
  line-height:1.2;
  max-width:100%
}

#marine-concepts .process,#marine-concepts .compact .process {
  padding:22px 24px 24px;
  margin-top:16px
}

#marine-concepts .process .process-label {
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#116695;
  margin:0 0 20px
}

#marine-concepts .compact .process .process-label {
  color:#12677a
}

#marine-concepts .process .step {
  grid-template-columns:34px minmax(0,1fr);
  gap:14px;
  padding-bottom:20px
}

#marine-concepts .process .step:last-child {
  padding-bottom:0
}

#marine-concepts .process .num {
  width:34px;
  height:34px;
  font-size:18px
}

#marine-concepts .process .step:not(:last-child)::before {
  left:16px;
  top:34px
}

#marine-concepts .process h3 {
  font-size:18px;
  line-height:1.22;
  margin:3px 0 5px;
  letter-spacing:-.2px
}

#marine-concepts .process .step p {
  font-size:14px;
  line-height:1.45
}

@media(max-width:350px) {
  #marine-concepts .process,#marine-concepts .compact .process {
  padding-left:20px;
  padding-right:20px
}

}


#marine-concepts .quick-match {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:50px;
  width:100%;
  border:1px solid #1756a3;
  border-radius:7px;
  color:#fff;
  background:#1756a3;
  font-size:15px;
  font-weight:700;
  padding:12px 16px
}

#marine-concepts .quick-match:hover {
  background:#10437f;
  border-color:#10437f
}

#marine-concepts .quick-match:focus-visible {
  outline:3px solid #103a62;
  outline-offset:3px
}

#marine-concepts #mc-matching-form {
  scroll-margin-top:12px
}

#marine-concepts .process h3 {
  font-size:21px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.35px;
  margin:2px 0 7px
}

#marine-concepts .process .step p {
  font-size:14px;
  font-weight:400;
  line-height:1.45
}

#marine-concepts .form-placeholder {
  display:grid;
  place-items:center;
  min-height:280px;
  padding:24px;
  background:#e7e7e7;
  border:1px solid #d1d1d1;
  border-radius:6px;
  color:#5b5b5b;
  font-size:18px;
  font-weight:400;
  text-align:center
}

#marine-concepts .process h3 {
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:normal;
  margin:2px 0 5px
}

#marine-concepts .process .step p {
  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.45
}

/* Standalone document styles and the local video control. */
html { color-scheme: only light; }
body { margin: 0; background: #eef2f5; font: 16px Arial, sans-serif; }
@media (min-width: 480px) { body { padding: 24px 16px; } }
#marine-concepts .play-glyph { display: block; font-size: 23px; line-height: 1; margin-left: 3px; }
#marine-concepts .video-placeholder iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ── The real quote form, and a Short-shaped video ──────────────────────────
   Appended rather than folded into the rules above, so the approved layout is
   still readable as the thing that was signed off and these two additions are
   readable as what came later (2026-09-28). */

/* The Short plays over the page, not inside it. object-fit is the video
   player's own business; what matters here is that the frame keeps 9:16 and
   fits whatever screen it lands on, portrait or landscape, without either
   dimension overflowing. */
#marine-concepts .video-placeholder iframe { aspect-ratio: 9 / 16; }

.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.video-overlay iframe {
  border: 0;
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  max-width: 100vw;
  max-height: 100dvh;
  background: #000;
}
/* Landscape and desktop: height is the limit, so drive off height instead and
   let the width follow, or the video runs off the top and bottom. */
@media (min-aspect-ratio: 9 / 16) {
  .video-overlay iframe { width: auto; height: 100dvh; }
}
/* Above the player, clear of an iPhone notch, and a real 44px target. */
.video-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font: 600 15px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.video-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Once the live form is mounted the grey box stops being a placeholder: no
   fill, no border, no min-height fighting the frame's own measured height. The
   widget resizes its iframe to its content, so any padding here shows up as a
   band of the wrong colour under the form. */
#marine-concepts .form-placeholder.form-live {
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
}
#marine-concepts .form-placeholder.form-live iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* The attribution DB-IP's free licence requires for the visitor-location
   database. Quiet, but present and readable: it is a licence condition, not a
   courtesy, so it must not be hidden. */
#marine-concepts .geo-credit {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.75;
}
#marine-concepts .geo-credit a { color: inherit; }

/* ── Tablet and desktop ─────────────────────────────────────────────────────
   The page is built as a 390px phone and about nine in ten visitors see it
   that way, so nothing below touches the mobile rendering: every rule here
   sits behind a min-width. On a laptop the same markup was a narrow strip down
   the middle of an empty field, which reads as a page that was never finished
   (Stephan, 2026-09-29).

   Widths, not a redesign. The card gets wider, the type grows with it, and on
   a real desktop the single column becomes two: the story on the left, the
   shop and the form on the right, where the form is visible without scrolling
   past the whole page to find it. */

/* ── Tablet: one column, more room ──────────────────────────────────────── */
@media (min-width: 700px) {
  /* The page sat 32px down the window before anything happened. Cut to 6px:
     the card has its own edge, so the gap above it was doing nothing but
     pushing the photograph down (Stephan, 2026-09-29). */
  body { padding: 6px 20px 24px; }

  #marine-concepts .device {
    max-width: 640px;
    border-radius: 18px;
  }

  /* The phone's tight gutters are a phone compromise. */
  #marine-concepts .hero,
  #marine-concepts .process,
  #marine-concepts .form-section { padding-left: 34px; padding-right: 34px; }
  #marine-concepts header { padding-left: 34px; padding-right: 34px; }

  #marine-concepts h1 { font-size: 42px; }
  #marine-concepts .hero > p { font-size: 17px; }

  /* A button the width of a tablet is a target nobody can miss and a shape
     nobody recognises. Sized to its words instead. */
  #marine-concepts .quick-match {
    display: inline-flex;
    width: auto;
    min-width: 280px;
    padding-left: 38px;
    padding-right: 38px;
  }
}

/* ── Desktop: the photographs as a banner, then two columns ─────────────

   The store runs full width across the top. Under it the page splits: what
   Brian has to say on the left, what to do about it on the right, with the
   form directly under How it works so the two things a visitor acts on sit
   in one column. */
@media (min-width: 1040px) {
  #marine-concepts .device {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas:
      'head  head'
      'shop  shop'
      'hero  steps'
      'hero  form'
      'foot  foot';
    align-items: stretch;
  }

  /* Same again for the bar above the banner: a small logo and a phone number
     do not need 18px of air above and below them. */
  #marine-concepts header { grid-area: head; padding: 4px 40px; }
  #marine-concepts .store-carousel { grid-area: shop; }
  #marine-concepts .hero { padding: 34px 40px 44px; }
  #marine-concepts .process { padding: 34px 40px 12px; }
  #marine-concepts .form-section { padding: 16px 40px 44px; }
  #marine-concepts footer { grid-area: foot; }

  /* A banner is a crop, and this is the one place the preserved-ratio rule is
     deliberately set aside. At 1120px these photographs own ratio is 840px
     tall, which would open the page on a shop front with the offer somewhere
     below the fold. Only above 1040px: a phone still gets the whole picture.
     The focal point sits HIGH, at 22%. Measured rather than guessed: the mean
     brightness of the band we show runs 140, 121, 105, 91, 86 as the focal
     point moves 0, 20, 35, 50, 58 percent down, because the bottom of every
     shot is shaded forecourt and shelving while the top carries the sky and the
     lit ceiling. At 58% the banner was a quarter darker than the photograph it
     came from, which read as the slider dimming the pictures (Stephan,
     2026-09-29). */
  /* How much of the photograph survives the banner. At 340px the strip showed
     40% of the frame, which reads as a zoomed-in picture even though it is
     drawn 1:1: same magnification, less of the scene. 460px shows about 55%,
     enough that the store reads as a building rather than a detail of one,
     while still leaving the headline above the fold. Then trimmed 20% (92px)
     off the BOTTOM: the top edge of every photograph stays exactly where it
     was, which is why the percentages below are odd numbers. They are the same
     pixel offsets (182 and 284) measured against a longer travel, since a
     shorter window means the image can slide further behind it
     (Stephan, 2026-09-29). */
  #marine-concepts .store-viewport { height: 294px; }
  #marine-concepts .store-track,
  #marine-concepts .store-slide { height: 100%; }
  #marine-concepts .store-slide img {
    height: 100%; width: 100%; object-fit: cover; object-position: center 33.4%;
  }

  /* Percentages, but set from pixels, because that is how they were judged.
     At this strip height the photograph can travel 379px behind the window
     (839 drawn, 460 shown), so each 100px of "move it down" is 26 percentage
     points: 22% + 100px = 48%, and the third photograph, which is shot down an
     aisle with a high ceiling and needed 200px, lands at 75%. Change the strip
     height and these shift, since the travel changes with it
     (Stephan, 2026-09-29). */
  #marine-concepts .store-slide:nth-child(3) img { object-position: center 52.1%; }

  /* One hairline down the middle, so the columns read as one page divided. */
  /* The caption stops being a fade across the bottom of the picture and becomes
     a label sitting on it. That gradient is about 70px of the frame going dark
     so 13px of white text can be read over it: fine on a phone, where the photo
     is 220px tall and the fade is most of the shadowed forecourt anyway, and a
     quarter of the frame on a 340px banner (Stephan, 2026-09-29). A solid chip
     needs the width of its own words and nothing more, and the text is crisper
     on flat colour than on a gradient. */
  #marine-concepts .store-carousel .media-caption {
    left: 16px;
    right: auto;
    bottom: 14px;
    width: auto;
    max-width: calc(100% - 32px);
    padding: 7px 13px;
    background: rgba(8, 29, 45, 0.82);
    border-radius: 6px;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    /* The photograph behind it is busy; a hairline keeps the chip an object
       rather than a smudge. */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }

  /* ── Making the form the loudest thing on the page ──────────────────────
     Everything here is about one question: where does the eye land first on a
     laptop? It was landing on the yellow founder note, which is a lovely panel
     and not the thing anyone is being paid to have clicked (Stephan,
     2026-09-29).

     Nothing is made quieter to achieve it: the note, the photographs and the
     steps are all as they were signed off. The form simply stops being one
     more section in a column and becomes a panel that sits ON the page. */

  /* The right column reads as one surface, tinted away from the paper, so the
     form is not a white block on a white page. */
  #marine-concepts .process { border-left: 1px solid var(--line); }

  #marine-concepts .form-section.form-section {
    background: #fff;
    border: 1px solid #cfe0ea;
    border-left: 1px solid #cfe0ea;
    border-radius: 12px;
    /* Lifted off the column rather than flush with it. The shadow is the whole
       trick: it is the only raised object on the page, so the eye finds it. */
    box-shadow: 0 10px 28px rgba(16, 58, 98, 0.13), 0 2px 6px rgba(16, 58, 98, 0.06);
    margin: 4px 26px 34px;
    padding: 26px 26px 30px;
  }

  /* A rule across the top in the brand blue, so the panel announces itself
     before a word of it is read. */
  #marine-concepts .form-section.form-section::before {
    content: "";
    display: block;
    height: 4px;
    margin: -26px -26px 20px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(110deg, #135c9f, #16869d);
  }

  #marine-concepts .city-form-heading { font-size: 27px; }

  /* Free matching, no obligation, compare detailers: the three reasons to
     start, set as chips rather than a line of grey text, because they are the
     answer to "what does this cost me" and were disappearing. */
  #marine-concepts .form-benefits { gap: 6px; }
  #marine-concepts .form-benefits li {
    background: #eef6fb;
    border: 1px solid #d8e8f2;
    border-radius: 999px;
    padding: 4px 11px;
    color: #14507e;
    font-weight: 600;
  }


  #marine-concepts h1 { font-size: 44px; }

  /* No jump button. It exists to carry a phone visitor down a long page to a
     form they cannot see; here the form is already on screen beside the words,
     so a button that scrolls two hundred pixels is a control that appears to do
     nothing (Stephan, 2026-09-29). The hero keeps its own bottom spacing so the
     founder note does not ride up against the paragraph. */
  #marine-concepts .quick-match { display: none; }
  #marine-concepts .hero > p { margin-bottom: 26px; }
}
/* Short laptops: a sticky panel taller than the window can never be scrolled
   to its own bottom, which is where the Submit button is. */
@media (min-width: 1040px) and (max-height: 900px) {
  #marine-concepts .form-section { position: static; }
}

/* The second line of the Get Quotes headline. Its own line, smaller and lighter
   than the promise above it: it is the reassurance, not the claim. Set inside
   the heading so it wraps and colours with it rather than being one more
   element to keep in step (2026-09-30). */
#marine-concepts .h1-aside {
  display: block;
  margin-top: 6px;
  font-size: 0.52em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: #1756a3;
}

/* Brian's photograph, bigger. At 78px the logo on his cap and the cross he
   wears were unreadable, and the point of a founder note is that it is a real
   person you can look at (Brian, 2026-09-30). The 3:4 ratio is kept, and the
   file is 279x364, so it still renders inside its own resolution.

   object-position stays top: the crop takes it off his chest, not his face. */
#marine-concepts .headshot {
  width: 108px;
  height: 133px;
}
@media (min-width: 700px) {
  #marine-concepts .headshot { width: 132px; height: 162px; }
}

/* Half again as big, and the whole photograph rather than a crop of it
   (Brian, 2026-09-30). height:auto with the file's own 279x364 ratio is what
   removes the crop: the earlier rule set an explicit height and object-fit
   cover, which took a slice off the bottom of the frame. 198px wide from a
   279px file still renders inside its own resolution. */
#marine-concepts .headshot {
  width: 162px;
  height: auto;
  aspect-ratio: 279 / 364;
  object-fit: contain;
}
@media (min-width: 700px) {
  #marine-concepts .headshot { width: 198px; height: auto; }
}

/* ── Founder card ───────────────────────────────────────────────────────────
   Phone: everything stacked. A big photograph, his name and title under it,
   then the note at full width. The floated version put the note in a 150px
   column beside the photograph and it read three words to a line.

   Tablet and up: two columns, photograph with his name under it on the left,
   the note on the right. A grid rather than a float, because the two should sit
   as columns rather than the text wrapping under the photograph and closing up
   (Stephan, 2026-09-30). */
#marine-concepts .founder-heading {
  display: block;
  margin-bottom: 14px;
}
#marine-concepts .founder-heading .headshot { margin: 0 0 10px; }
/* Each on its own line under the photograph. Beside a name the kicker is a
   label; under a photograph it is a caption, so it is set smaller. */
#marine-concepts .founder-kicker { display: block; font-size: 11px; }
#marine-concepts .founder-name { display: block; }
#marine-concepts .founder-role { display: block; }

@media (min-width: 700px) {
  #marine-concepts .founder {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 22px;
    align-items: start;
  }
  /* The photograph column is as wide as the photograph, no wider. */
  #marine-concepts .founder-heading {
    width: 198px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* On a laptop the founder card lives in the page's left column, about 500px
   wide, so a 198px photograph left 241px for the note: roughly 38 characters a
   line, which reads as a newspaper column. The photograph gives back what the
   text needs. Still larger than it was before today (2026-09-30). */
@media (min-width: 1040px) {
  #marine-concepts .founder-heading { width: 148px; }
  #marine-concepts .founder { column-gap: 18px; }
}

/* The photograph fills its column rather than setting its own width, so the
   column is the single place the size is decided. It had its own 198px, which
   overflowed the narrower laptop column and ran under the text (2026-09-30). */
#marine-concepts .founder-heading { width: 162px; }
#marine-concepts .headshot {
  width: 100%;
  height: auto;
  aspect-ratio: 279 / 364;
}
@media (min-width: 700px) {
  #marine-concepts .founder-heading { width: 198px; }
}
@media (min-width: 1040px) {
  #marine-concepts .founder-heading { width: 148px; }
}

/* ── The phone number ───────────────────────────────────────────────────────
   Bigger, and it says what it is for. "Call the store" described the place
   being called; "Need Help? Call us Directly:" describes the reason somebody
   would (Brian, 2026-10-05).

   It is the only way to reach a person before filling the form in, so it is
   worth the room: the number steps up with the screen, and the line above it
   stops being fine print. */
#marine-concepts .header-phone { font-size: 19px; }
#marine-concepts .header-phone span { font-size: 12px; margin-bottom: 2px; }

@media (min-width: 700px) {
  #marine-concepts .header-phone { font-size: 24px; }
  #marine-concepts .header-phone span { font-size: 13px; }
}
@media (min-width: 1040px) {
  #marine-concepts .header-phone { font-size: 27px; }
  #marine-concepts .header-phone span { font-size: 14px; }
}

/* ── The work gallery ───────────────────────────────────────────────────────
   Five boats, from a 25ft centre console to a superyacht on scaffolding, under
   a heading that says the range out loud. It sits at the bottom on a phone and
   in the lower left on a laptop, under the founder note, so the form keeps the
   right-hand column to itself (Brian, 2026-10-05).

   Square tiles with a cover crop, because the photographs arrive in both
   orientations and a grid of mixed shapes reads as a mess. The crop costs the
   edges of a portrait shot; the alternative is rows that do not line up. */
#marine-concepts .work {
  padding: 20px 22px 26px;
  background: var(--soft);
}
#marine-concepts .work-heading {
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
#marine-concepts .work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
#marine-concepts .work-shot { margin: 0; }
#marine-concepts .work-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #dde5ea;
}

@media (min-width: 700px) {
  #marine-concepts .work { padding: 24px 34px 30px; }
  #marine-concepts .work-heading { font-size: 20px; }
}

@media (min-width: 1040px) {
  /* Lower left: the hero and the founder note sit above it, How it works and
     the form hold the right-hand column. */
  #marine-concepts .device {
    /* Two columns, each flowing at its own height. They used to be cells of
       one grid, which tied their rows together and showed the difference as
       an empty band (2026-10-05). */
    grid-template-areas:
      'head  head'
      'shop  shop'
      'main  side'
      'foot  foot';
  }
  #marine-concepts .work { padding: 26px 40px 34px; }
  #marine-concepts .work-heading { font-size: 21px; }
}

/* A tile is a button now, so it needs none of a button's chrome. */
#marine-concepts .work-shot {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
#marine-concepts .work-shot:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

/* The opened photograph. Shares the video overlay's black, but the picture
   keeps its own shape rather than being fitted to a 9:16 frame. */
.photo-overlay img {
  max-width: 100vw;
  max-height: 100dvh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* The right column packs: How it works, then the form straight under it.
   Adding the gallery moved the form into its own row, so the teal panel
   stretched to the height of the founder note and the form started halfway
   down an empty band (Brian, 2026-10-05). Neither column stretches now; each
   section is the height of what is in it. */
@media (min-width: 1040px) {
  #marine-concepts .process,
  #marine-concepts .form-section,
  #marine-concepts .work { align-self: start; }
}

/* ── The two desktop columns ────────────────────────────────────────────────
   col-main is everything on the left (the headline, the founder note, the
   video, the gallery); col-side is How it works and the form. Each flows on
   its own, so a short column no longer leaves a hole beside a tall one.

   On a phone the wrappers are not there at all (display: contents), so the
   sections stack in document order exactly as before. The gallery is ordered
   last, because in the markup it now sits inside the left column, and on a
   phone it belongs at the bottom. */
#marine-concepts .col-main,
#marine-concepts .col-side { display: contents; }

@media (max-width: 1039px) {
  #marine-concepts .device { display: flex; flex-direction: column; }
  #marine-concepts .work { order: 5; }
  #marine-concepts footer { order: 6; }
}

@media (min-width: 1040px) {
  #marine-concepts .col-main { display: block; grid-area: main; }
  #marine-concepts .col-side { display: block; grid-area: side; border-left: 1px solid var(--line); }
  /* The hairline is on the column now, not on each section inside it. */
  #marine-concepts .process,
  #marine-concepts .form-section { border-left: 0; }
}