:root{--navy:#082d45;--teal:#087d86;--green:#17613f;--cream:#f8f4e9;--sand:#c59b4b;--ink:#1d303a;--muted:#596970;--line:#d8dfdf;--white:#fff;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,sans-serif;line-height:1.65;background:var(--cream)}a{color:inherit}img{display:block;max-width:100%}.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px}
.utility{min-height:42px;padding:8px max(24px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--navy);color:#fff;font-size:.9rem}.utility a{font-weight:800;text-decoration:none}
header{min-height:112px;padding:8px max(24px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;gap:36px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.logo{width:clamp(220px,25vw,330px);height:95px;overflow:hidden;display:flex;align-items:center}.logo img{width:100%;transform:scale(1.12)}nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px 26px}nav a{color:var(--navy);font-size:.93rem;font-weight:800;text-decoration:none;border-bottom:2px solid transparent;padding:8px 0 5px}nav a:hover,nav a:focus{border-color:var(--sand)}.menu-button{display:none;border:1px solid var(--navy);background:#fff;color:var(--navy);padding:9px 14px;font-weight:800}
.hero{min-height:650px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);overflow:hidden;position:relative}.hero-copy{padding:84px 6vw 80px max(32px,calc((100vw - var(--max))/2));align-self:center;z-index:2}.eyebrow{margin:0 0 18px;color:var(--teal);font-size:.82rem;font-weight:900;letter-spacing:.13em;line-height:1.4;text-transform:uppercase}.hero h1{max-width:680px;margin:0;color:var(--navy);font-family:Georgia,serif;font-size:clamp(3rem,5.1vw,5.2rem);letter-spacing:-.045em;line-height:.98}.hero-desc{max-width:620px;margin:28px 0 0;color:#46555b;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.button{min-height:52px;padding:13px 22px;border:2px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;line-height:1.2;text-align:center;text-decoration:none}.primary{background:var(--green);color:#fff}.secondary{border-color:var(--green);color:var(--green)}.hero-art{min-height:650px;position:relative;display:grid;place-items:end center;padding:48px;background:radial-gradient(circle at 74% 28%,rgba(255,207,119,.94),transparent 22%),linear-gradient(180deg,#b9d8df 0 43%,#7fa39a 43% 58%,#355f43 58% 65%,#4c8a99 65%);isolation:isolate}.hero-art:before{content:"";position:absolute;inset:48% 0 0;background:repeating-linear-gradient(172deg,transparent 0 26px,rgba(255,255,255,.15) 27px 28px)}.hero-art span{position:relative;background:rgba(8,45,69,.88);color:#fff;border-left:4px solid var(--sand);padding:14px 18px;font-weight:800}
.facts{padding:24px max(24px,calc((100vw - var(--max))/2));display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-bottom:1px solid var(--line)}.facts span{padding:10px 24px;color:var(--navy);font-family:Georgia,serif;font-size:1.16rem;font-weight:700;text-align:center}.facts span+span{border-left:1px solid var(--sand)}
.content-shell{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:90px 0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:80px;align-items:start}.content-section{padding-bottom:54px}.content-section+.content-section{padding-top:54px;border-top:1px solid var(--line)}.content-section h2,aside h2,.related h2,.final-cta h2{margin:0 0 20px;color:var(--navy);font-family:Georgia,serif;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.025em;line-height:1.1}.content-section p{max-width:780px;margin:0 0 20px;font-size:1.07rem}.content-section ul{margin:24px 0 0;padding:0;display:grid;gap:12px;list-style:none}.content-section li{padding-left:34px;position:relative}.content-section li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}.inline-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px 28px}.inline-links a,.text-link{color:var(--green);font-weight:900;text-underline-offset:4px}.note{padding:20px 22px;background:#eee6d3;border-left:4px solid var(--sand)}
aside{padding:30px;background:#fff;border-top:5px solid var(--sand);box-shadow:0 16px 45px rgba(8,45,69,.1);position:sticky;top:136px}aside h2{font-size:2rem}aside .button{width:100%;margin:12px 0 18px}aside small{display:block;margin-top:22px;color:var(--muted)}.faqs{display:grid;gap:12px}.faqs details{background:#fff;border:1px solid var(--line)}.faqs summary{cursor:pointer;padding:20px 56px 20px 22px;color:var(--navy);font-family:Georgia,serif;font-size:1.28rem;font-weight:700;position:relative}.faqs summary:after{content:"+";position:absolute;right:22px;color:var(--green);font-family:Arial;font-size:1.6rem}.faqs details[open] summary:after{content:"−"}.faqs details p{margin:0;padding:0 22px 22px}
.related{padding:80px max(24px,calc((100vw - var(--max))/2));background:#fff}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.related-grid a{min-height:250px;padding:28px;text-decoration:none;border:1px solid var(--line)}.related-grid span{display:block;color:var(--teal);font-size:.76rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.related-grid strong{display:block;margin-top:12px;color:var(--navy);font-family:Georgia,serif;font-size:1.55rem;line-height:1.2}.related-grid p{color:var(--muted)}.final-cta{padding:64px max(24px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;gap:36px;background:var(--green);color:#fff}.final-cta .eyebrow{color:#f0cf90}.final-cta h2{margin:0;color:#fff}.final-cta .actions{margin:0}.light{background:#fff;color:var(--green)}.outline{border-color:#fff;color:#fff}
footer{padding:70px max(24px,calc((100vw - var(--max))/2)) 24px;background:var(--navy);color:#fff}.footer-grid{display:grid;grid-template-columns:1fr 1.8fr;gap:70px}.footer-grid img{width:250px;background:#fff}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 24px}.footer-links a{text-decoration:none}.copyright{margin-top:52px;padding-top:20px;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.2);font-size:.88rem;color:#c7d2d7}
/* Design 1: warm heritage split */
.heritage .hero{background:radial-gradient(circle at 24% 28%,rgba(8,125,134,.1),transparent 27%),var(--cream)}.heritage .hero-art:after{content:"";position:absolute;inset:0 auto 0 -1px;width:88px;background:var(--cream);clip-path:polygon(0 0,58% 0,100% 12%,57% 27%,93% 43%,56% 60%,100% 76%,59% 89%,76% 100%,0 100%)}
/* Design 2: bright editorial fade */
.editorial{background:#fff}.editorial header{position:relative}.editorial .hero{grid-template-columns:1fr;background:#fff}.editorial .hero-art{grid-column:1;grid-row:1;min-height:640px;margin-left:38%;}.editorial .hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.97) 13%,rgba(255,255,255,.72) 34%,transparent 64%)}.editorial .hero-copy{grid-column:1;grid-row:1;max-width:760px;align-self:center}.editorial .facts span{font-family:Arial}.editorial .content-shell{background:#fff}.editorial .related{background:#f7f9f8}
/* Design 3: immersive image with floating card */
.immersive .utility{display:none}.immersive header{position:relative;background:var(--cream)}.immersive .hero{display:block;min-height:720px;background:#3f7884}.immersive .hero-art{position:absolute;inset:0;min-height:720px}.immersive .hero-art span{display:none}.immersive .hero-copy{position:relative;width:min(590px,calc(100% - 64px));margin-left:max(32px,calc((100vw - var(--max))/2));top:95px;padding:46px 50px;background:rgba(255,252,245,.95);border-radius:10px;box-shadow:0 22px 55px rgba(8,45,69,.22)}.immersive .hero h1{font-family:"Arial Narrow",Impact,sans-serif;font-size:clamp(3.3rem,5vw,5.2rem);letter-spacing:-.025em;text-transform:none}.immersive .secondary{display:none}.immersive .facts{position:relative}
@media(max-width:1080px){nav{display:none;position:absolute;right:24px;top:90px;width:260px;padding:12px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 35px rgba(8,45,69,.16)}nav.open{display:block}nav a{display:block;padding:10px 8px}.menu-button{display:block}.hero{grid-template-columns:1fr}.hero-copy{padding-right:max(32px,calc((100vw - var(--max))/2))}.hero-art{min-height:440px}.heritage .hero-art:after{display:none}.content-shell{grid-template-columns:1fr;gap:30px}aside{position:static}.editorial .hero-art{margin-left:25%}.immersive .hero-copy{top:70px}}
@media(max-width:720px){.utility{justify-content:center}.utility span{display:none}header{min-height:86px;padding-block:4px}.logo{width:205px;height:76px}.hero{min-height:0}.hero-copy{padding-top:62px;padding-bottom:58px}.hero h1{font-size:clamp(2.7rem,13vw,4.1rem)}.hero-art{min-height:330px;padding:24px}.actions,.actions .button{width:100%}.facts{grid-template-columns:1fr}.facts span+span{border-left:0;border-top:1px solid var(--line)}.content-shell{width:min(100% - 32px,var(--max));padding:64px 0}.related-grid{grid-template-columns:1fr}.final-cta{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-links{grid-template-columns:1fr 1fr}.copyright{flex-direction:column}.editorial .hero{display:flex;flex-direction:column}.editorial .hero-art{position:relative;order:2;margin:0}.editorial .hero-art:after{display:none}.immersive .hero{min-height:690px}.immersive .hero-art{min-height:690px}.immersive .hero-copy{width:calc(100% - 32px);margin:0 16px;top:48px;padding:32px 26px}.immersive .hero h1{font-size:clamp(2.8rem,12vw,4rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Approved FishWithRipp photo system */
.editorial header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.hero-art {
  padding: 0;
  overflow: hidden;
  background: #d8e4e6;
}
.hero-art:before {
  display: none;
}
.hero-art > img {
  width: 100%;
  height: 100%;
  min-height: 650px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.editorial .hero-art:after {
  pointer-events: none;
}
.page-portrait {
  width: min(100%, 520px);
  margin: 12px 0 0;
}
.page-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(8,45,69,.14);
}
@media(max-width:1080px) {
  .hero-art > img { min-height: 440px; }
}
@media(max-width:720px) {
  .hero-art > img { min-height: 0; aspect-ratio: 4 / 3; }
  .page-portrait { width: 100%; }
}