body,.ideal-header,.hero-panel,.ideal-section,.ideal-footer,.ideal-quote input,.ideal-quote textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.ideal-header{
  position:sticky;
  top:0;
  z-index:100;
  transition:height .25s ease,box-shadow .25s ease
}
.ideal-header .brand img,.ideal-header .brand b,.ideal-header .brand small{transition:width .25s ease,height .25s ease,font-size .25s ease}
.ideal-header.is-scrolled{height:68px;box-shadow:0 8px 24px #063f4318}
.ideal-header.is-scrolled .brand img{width:88px;height:60px}
.ideal-header.is-scrolled .brand b{font-size:22px}
.ideal-header.is-scrolled .brand small{font-size:8px}
.ideal-section h2,.ideal-services header h2,.quote-intro h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.015em}
.hero-panel h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;line-height:1.18;letter-spacing:.015em}
.ideal-hero{background-image:url("assets/hero-harbor-dark-teal.png");background-position:center;background-size:cover}
.ideal-hero::after{display:none}
.ideal-hero::before{display:none}
.hero-panel{width:45%}
@media(max-width:850px){.ideal-hero{background-position:58% center}.ideal-hero::after{display:block;width:100%;background:linear-gradient(90deg,rgba(7,93,97,.98),rgba(7,93,97,.78) 70%,rgba(7,93,97,.18))}.hero-panel{width:100%}}
.ideal-header .brand img{width:112px;height:76px}
.ideal-header .brand b,.ideal-header .brand small{color:#176b6e}
.ideal-header .brand b{font-size:25px}.ideal-header .brand small{font-size:9px}
.hero-panel h1 span{display:block;white-space:nowrap}
.ideal-btn.quote-only{width:168px;height:42px;padding:0 12px;background:#d6b37b;color:#064e52;font-size:11px;letter-spacing:.075em}

.ideal-section{background:var(--sand)}
.ideal-section h2,.ideal-services header h2,.quote-intro h2{
  color:var(--teal-950);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.025em
}
.ideal-label,
.ideal-about .ideal-label,
.ideal-services .ideal-label,
.ideal-approach .ideal-label,
.ideal-quote .ideal-label{
  color:#a8824e;
  font-size:18px!important;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.1em
}
.rule{background:var(--teal-500)}
.about-main>p:not(.ideal-label),.about-points p,.six-grid p,.approach-grid p,.quote-intro p{
  color:#526769;
  font-size:13px;
  line-height:1.7
}
.about-points h3,.six-grid h3,.approach-grid h3{
  color:var(--teal-900);
  font-size:14px;
  line-height:1.3
}
.about-points b,.approach-grid article>b{background:#f7f4ee;border-color:#e7e1d8;color:var(--teal-800)}
.six-grid{gap:16px}
.six-grid article{
  min-height:245px;
  padding:30px 22px;
  background:var(--paper);
  border-color:var(--line);
  transition:transform .25s,box-shadow .25s
}
.six-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 40px #063f4312}
.ideal-why{background:linear-gradient(135deg,var(--teal-950),var(--teal-800))}
.ideal-why>p{font-size:17px!important;font-weight:700;letter-spacing:.1em}
.ideal-why h3{font-size:13px}
.ideal-why small{color:#d8e6e5;font-size:10px;line-height:1.65}
.quote-intro{background:#e9ddcc}
.ideal-quote form{background:var(--paper)}
.ideal-quote input,.ideal-quote textarea{
  border-color:#d6d0c7;
  background:#fff;
  color:var(--ink);
  font-size:12px
}
.ideal-quote button{background:var(--teal-900)}
.ideal-footer{background:var(--teal-950)}

.ideal-section{padding-top:82px;padding-bottom:82px}
.ideal-section h2,.ideal-services header h2,.quote-intro h2{font-size:clamp(34px,3.2vw,47px);line-height:1.08}
.ideal-label{font-size:12px;font-weight:700}
.about-main>p:not(.ideal-label){font-size:16px;line-height:1.75}
.about-points{gap:42px 38px}
.about-points h3,.six-grid h3,.approach-grid h3{font-size:17px;font-weight:700}
.about-points p,.six-grid p,.approach-grid p,.quote-intro p{font-size:14px;line-height:1.7}
.about-points b{flex-basis:52px;height:52px;font-size:21px}
.six-grid article{min-height:285px;padding:36px 25px}
.six-grid b{height:58px;font-size:42px}
.ideal-why{padding-top:26px;padding-bottom:38px}
.ideal-why>p{font-size:11px;font-weight:700}
.ideal-why h3{font-size:15px}
.ideal-why small{font-size:12px}
.approach-grid article{min-height:175px;padding-left:78px}
.approach-grid article>b{width:62px;height:62px;font-size:29px}
.quote-intro{padding:42px}
.ideal-quote input,.ideal-quote textarea{padding:13px;font-size:14px}
.ideal-quote form small{font-size:11px}
.ideal-footer p,.ideal-footer a{font-size:11px}
.ideal-footer h3{font-size:11px}

@media(max-width:850px){
  .ideal-section{padding-top:64px;padding-bottom:64px}
}

.ideal-hero{
  min-height:620px;
  height:calc(100vh - 82px);
  max-height:720px;
  background-image:url("assets/hero-port-supply-teal-v3.png");
  background-position:center;
  background-size:cover
}
.ideal-hero::after{display:none}
.ideal-hero::before{
  display:block;
  z-index:1;
  top:0;
  left:0;
  width:57%;
  height:100%;
  background:linear-gradient(145deg,rgba(6,63,67,.98),rgba(7,85,90,.94));
  clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)
}
.hero-panel{
  z-index:2;
  width:51%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:55px 30px 55px clamp(38px,6vw,92px)
}
.hero-eyebrow{
  margin:0 0 22px!important;
  color:#e2c79b;
  font-size:18px!important;
  font-weight:700;
  line-height:1!important;
  letter-spacing:.16em;
  text-transform:uppercase
}
.hero-panel h1{
  margin:0 0 24px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,4vw,60px);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.035em;
  text-transform:none
}
.hero-panel h1 span{display:block;white-space:nowrap}
.hero-panel>p:not(.hero-eyebrow){max-width:480px;margin:0 0 32px;font-size:17px;line-height:1.7;color:#e1ebea}
.ideal-btn.quote-only{width:auto;min-width:168px;height:49px;padding:0 22px;font-size:11px}

@media(max-width:850px){
  .ideal-hero{height:620px;min-height:620px;background-position:62% center}
  .ideal-hero::before{width:100%;clip-path:none;background:linear-gradient(90deg,rgba(6,63,67,.98),rgba(7,85,90,.9) 68%,rgba(7,85,90,.3))}
  .hero-panel{width:100%;padding:55px 28px}
  .hero-panel h1{font-size:clamp(34px,7.5vw,52px)}
}

@media(max-width:560px){
  .hero-panel h1{font-size:clamp(29px,8.3vw,42px)}
}
@media(max-width:850px){.ideal-header .brand img{width:88px;height:62px}.ideal-header .brand b{font-size:21px}.hero-panel h1 span{white-space:normal}}

.simplified-footer{padding-top:40px;padding-bottom:18px}
.simplified-footer>div{grid-template-columns:1fr auto;align-items:center;gap:80px}
.simplified-footer>div>div{border:0}
.simplified-footer .footer-lockup img{width:100px;height:72px}
.simplified-footer .footer-lockup b{font-size:27px}
.simplified-footer .footer-lockup small{font-size:10px;letter-spacing:.11em}
.simplified-footer .footer-brand>p{max-width:none;margin-top:12px;font-size:14px;line-height:1.65;color:#d5e2e2;white-space:nowrap}
.simplified-footer .footer-assistance{min-width:230px;padding-right:0}
.simplified-footer .footer-contact{min-width:190px;padding-right:0}
.simplified-footer .footer-contact h3{font-size:13px}
.simplified-footer .footer-contact a{font-size:13px;line-height:1.8;color:#d5e2e2}
.simplified-footer .footer-direct{min-width:250px;padding-right:0;text-align:right}
.simplified-footer .footer-direct a{font-size:15px;line-height:1.8;color:#fff}
.simplified-footer .footer-direct p{margin:4px 0 0;font-size:12px;color:#afc5c5}
.simplified-footer .footer-assistance h3{font-size:13px}
.simplified-footer .footer-assistance p{font-size:13px}
.simplified-footer>small{margin-top:30px;padding-top:17px;font-size:14px;font-weight:400;color:#c7d7d7}

@media(max-width:900px){
  .simplified-footer>div{grid-template-columns:1fr 1fr;gap:32px}
  .simplified-footer .footer-brand{grid-column:1/-1}
}

@media(max-width:650px){
  .simplified-footer>div{grid-template-columns:1fr;gap:28px}
  .simplified-footer .footer-brand{grid-column:auto}
  .simplified-footer .footer-brand>p{white-space:normal}
  .simplified-footer .footer-direct{text-align:left}
}

.svg-ring{
  flex:0 0 62px;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:1px solid #b8cecd;
  border-radius:50%;
  background:transparent;
  color:#07666a;
  box-shadow:none
}
.svg-ring svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.about-points{grid-template-columns:1fr;gap:28px}
.about-points article{align-items:center}
.about-points .svg-ring{flex-basis:62px}
.six-grid .svg-ring{margin:0 auto 17px}
.six-grid article>h3{margin-top:0}
.ideal-why .svg-ring{flex-basis:56px;width:56px;height:56px;border-color:#6fa8a7;background:#0a5d61;color:#a9d9d7;box-shadow:inset 0 0 0 5px #ffffff0a}
.ideal-why .svg-ring svg{width:29px;height:29px;stroke-width:1.5}
.ideal-why article{align-items:flex-start}
.approach-grid article>.approach-icon{position:absolute;left:0;top:40px;width:62px;height:62px}
.approach-grid .approach-icon svg{width:32px;height:32px}
.approach-grid article>.approach-icon{display:none}
.approach-grid em{
  top:40px;
  left:0;
  width:32px;
  height:32px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#fff;
  font-size:10px;
  font-weight:700
}
.approach-grid article{padding-left:46px}
.approach-grid article:not(:last-child)::after{top:58%;transform:translateY(-50%)}
.about-points .svg-ring svg,.six-grid .svg-ring svg{display:none}
.about-points .svg-ring,.six-grid .svg-ring{background-position:center;background-repeat:no-repeat;background-size:36px 36px}
.about-points article:nth-child(1) .svg-ring{background-image:url("assets/icon-global-network.svg")}
.about-points article:nth-child(2) .svg-ring{background-image:url("assets/icon-coordination.svg")}
.about-points article:nth-child(3) .svg-ring{background-image:url("assets/icon-tailored.svg")}
.six-grid article:nth-child(1) .svg-ring{background-image:url("assets/icon-provisions.svg")}
.six-grid article:nth-child(2) .svg-ring{background-image:url("assets/icon-deck-engine.svg")}
.six-grid article:nth-child(3) .svg-ring{background-image:url("assets/icon-spare-parts.svg")}
.six-grid article:nth-child(4) .svg-ring{background-image:url("assets/icon-emergency-support.svg")}
.six-grid .svg-ring{display:none}
.six-grid article{display:flex;flex-direction:column;justify-content:center}
.six-grid article>h3{margin-bottom:16px;font-size:18px}

@media(max-width:700px){
  body{overflow-x:hidden}
  .ideal-header{height:72px;padding:0 16px}
  .ideal-header .brand img{width:76px;height:54px}
  .ideal-header .brand b{font-size:18px}
  .ideal-header .brand small{margin-top:4px;font-size:7px}
  .ideal-header .menu{padding:8px}
  .ideal-header nav{top:72px}
  .ideal-header.is-scrolled{height:62px}
  .ideal-header.is-scrolled .brand img{width:66px;height:48px}
  .ideal-header.is-scrolled .brand b{font-size:16px}
  .ideal-header.is-scrolled nav{top:62px}
  .ideal-hero{height:580px;min-height:580px;background-position:70% center}
  .ideal-hero::before{background:linear-gradient(90deg,rgba(6,63,67,.98),rgba(7,85,90,.92) 76%,rgba(7,85,90,.45))}
  .hero-panel{padding:48px 20px}
  .hero-eyebrow{margin-bottom:18px!important;font-size:13px!important;letter-spacing:.12em}
  .hero-panel h1{font-size:clamp(29px,8vw,38px);line-height:1.08}
  .hero-panel h1 span{white-space:nowrap}
  .hero-panel>p:not(.hero-eyebrow){max-width:350px;font-size:15px;line-height:1.6}
  .ideal-section{padding-right:20px;padding-left:20px}
  .ideal-section h2,.ideal-services header h2{font-size:34px}
  .ideal-label,.ideal-about .ideal-label,.ideal-services .ideal-label,.ideal-approach .ideal-label{font-size:14px!important}
  .ideal-about{padding-top:54px;padding-bottom:34px}
  .about-main>p:not(.ideal-label){font-size:15px}
  .about-points{gap:22px}
  .about-points article{align-items:flex-start}
  .about-points h3{font-size:16px}
  .ideal-services{padding-top:34px;padding-bottom:54px}
  .six-grid.live-services{gap:12px}
  .six-grid article{min-height:auto;padding:30px 22px}
  .ideal-why{padding:34px 20px 42px}
  .ideal-why>p{font-size:14px!important;line-height:1.4}
  .ideal-why article,.ideal-why article:first-child,.ideal-why article:last-child{width:auto;min-height:auto;padding:22px}
  .ideal-approach{padding:46px 20px}
  .approach-grid{gap:14px}
  .approach-grid article{min-height:auto;padding:28px 0 28px 54px;border-bottom:1px solid #d8d3ca}
  .approach-grid article:last-child{border-bottom:0}
  .approach-grid em{top:28px}
  .simplified-footer{padding:34px 20px 16px}
  .simplified-footer .footer-lockup img{width:82px;height:60px}
  .simplified-footer .footer-lockup b{font-size:22px}
  .simplified-footer .footer-brand>p{font-size:13px}
  .simplified-footer .footer-direct a{font-size:14px}
  .simplified-footer>small{font-size:11px;line-height:1.5}
}

@media(max-width:380px){
  .hero-panel h1{font-size:28px}
  .ideal-header .brand img{width:68px}
  .ideal-header .brand b{font-size:16px}
}
.ideal-why>div{grid-template-columns:repeat(5,1fr)}

@media(max-width:1100px){
  .ideal-why>div{grid-template-columns:repeat(3,1fr);gap:30px 0}
  .ideal-why article{border-right:0}
}

@media(max-width:700px){
  .ideal-why>div{grid-template-columns:1fr}
}

.ideal-why{padding:38px clamp(30px,7vw,100px) 52px}
.ideal-why>p{margin-bottom:28px}
.ideal-why>div{grid-template-columns:repeat(4,1fr);gap:18px}
.ideal-why article{
  min-height:150px;
  padding:24px;
  border:1px solid #ffffff24;
  background:#ffffff08
}
.ideal-why article:first-child{
  grid-column:1/-1;
  width:min(680px,100%);
  min-height:auto;
  justify-self:center;
  border-color:#91cdcb75;
  background:#ffffff0d
}
.ideal-why article:last-child{border:1px solid #ffffff24}

@media(max-width:1050px){
  .ideal-why>div{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:650px){
  .ideal-why>div{grid-template-columns:1fr}
  .ideal-why article:first-child{grid-column:1}
}

.ideal-about{padding-bottom:42px}
.ideal-services{padding-top:42px}
.ideal-why>div{grid-template-columns:repeat(6,1fr);gap:18px}
.ideal-why article,
.ideal-why article:first-child{
  grid-column:span 2;
  width:auto;
  min-height:165px;
  justify-self:stretch;
  padding:24px;
  border:1px solid #ffffff24;
  background:#ffffff08
}
.ideal-why article:nth-child(4){grid-column:2/span 2}
.ideal-why article:nth-child(5){grid-column:4/span 2}

@media(max-width:900px){
  .ideal-why>div{grid-template-columns:repeat(2,1fr)}
  .ideal-why article,
  .ideal-why article:first-child,
  .ideal-why article:nth-child(4),
  .ideal-why article:nth-child(5){grid-column:auto}
  .ideal-why article:last-child{grid-column:1/-1;width:calc(50% - 9px);justify-self:center}
}

@media(max-width:650px){
  .ideal-why>div{grid-template-columns:1fr}
  .ideal-why article:last-child{grid-column:auto;width:auto}
}
