/*
Theme Name: Propel Maritime
Theme URI: https://propelshipping.co
Author: Propel
Description: Custom one-page brochure theme for Propel Maritime Agency — a reliable maritime agency and operational partner in Turkey.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: propel
*/

:root{
  --navy:#16202E;
  --navy-deep:#101823;
  --navy-card:#1C2838;
  --lime:#D6E32E;
  --white:#FFFFFF;
  --ink:#1A2230;
  --slate:#8E9AAB;
  --slate-light:#4E5866;
  --line:rgba(255,255,255,.1);
  --font:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--navy);color:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
h1,h2,h3{text-wrap:balance;line-height:1.12}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--lime)}
.eyebrow.on-dark{color:var(--lime)}
.eyebrow.on-light{color:#9AA400}
.eyebrow.no-bar::before{display:none}

.btn{display:inline-block;padding:14px 26px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:#e4f13d}
.btn-ghost{border-color:rgba(255,255,255,.45);color:var(--white)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-ghost-dark{border-color:var(--ink);color:var(--ink)}
.btn-ghost-dark:hover{background:var(--ink);color:var(--white)}

/* logo */
.logo{display:inline-flex;align-items:center}
.logo img,.logo svg{display:block}
.logo img{height:26px;width:auto}
.custom-logo-link img.custom-logo{max-height:34px;width:auto}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(16,24,35,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav{display:flex;align-items:center;gap:34px}
.nav ul{display:flex;align-items:center;gap:34px;list-style:none}
.nav a{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C3CBD6}
.nav a:hover{color:var(--lime)}
.header-cta{border:2px solid var(--white);padding:11px 22px;font-size:11px}
.header-cta:hover{border-color:var(--lime);color:var(--lime)}
@media (max-width:860px){.nav{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 420px at 78% 4%, rgba(244,148,58,.4), transparent 62%),
  radial-gradient(900px 460px at 92% 30%, rgba(196,90,33,.28), transparent 60%),
  linear-gradient(180deg,#232f42 0%,#182234 46%,#111a27 100%)}
.hero.has-bg{background-size:cover;background-position:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,20,30,.72) 0%,rgba(13,20,30,.45) 55%,rgba(13,20,30,.2) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:1;background:linear-gradient(180deg,transparent,rgba(9,14,21,.75))}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:130px}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero h1{font-size:clamp(38px,5vw,58px);font-weight:800;letter-spacing:-.01em}
.hero h1 .hl{background:var(--lime);color:var(--ink);padding:2px 14px;display:inline-block}
.hero p{max-width:52ch;margin:26px 0 34px;color:#C8D0DB;font-size:16px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px}
/* split sections */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.split .panel{padding:88px 72px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){.split{grid-template-columns:1fr}.split .panel{padding:64px 32px}}

.light{background:var(--white);color:var(--ink)}
.light h2{color:var(--ink)}
.light p{color:var(--slate-light)}

.commit h2{font-size:clamp(30px,3.4vw,42px);font-weight:800;margin:18px 0 20px}
.commit .lede{max-width:56ch;font-size:15px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.pillar h3{font-size:14px;font-weight:700;margin-bottom:8px}
.pillar p{font-size:12.5px;line-height:1.55}
@media (max-width:640px){.pillars{grid-template-columns:1fr}}

/* pillar icons */
.p-icon{width:44px;height:44px;margin-bottom:14px;overflow:visible}
.icon-stroke{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-check{fill:none;stroke:#9AA400;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:icon-draw 1.8s ease-in-out infinite alternate}
.icon-dot{fill:#9AA400;opacity:.25;animation:icon-blink 1.2s ease-in-out infinite}
.icon-dot.d2{animation-delay:.2s}
.icon-dot.d3{animation-delay:.4s}
.icon-bar{fill:var(--lime);stroke:var(--ink);stroke-width:1.6;transform-box:fill-box;transform-origin:bottom;animation:icon-rise 1.4s ease-in-out infinite alternate}
.icon-bar.b2{animation-delay:.25s}
.icon-bar.b3{animation-delay:.5s}
@keyframes icon-draw{to{stroke-dashoffset:0}}
@keyframes icon-blink{0%,100%{opacity:.25}40%{opacity:1}}
@keyframes icon-rise{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .icon-check{stroke-dashoffset:0;animation:none}
  .icon-dot{opacity:1;animation:none}
  .icon-bar{animation:none}
}

/* photo blocks */
.ph{position:relative;min-height:320px;background-size:cover;background-position:center}

/* services */
.services-head{padding-top:96px;padding-bottom:40px}
.services-head h2{font-size:clamp(32px,4vw,48px);font-weight:800;margin-top:18px}
.services-list{padding-bottom:96px}
.service{border-top:1px solid var(--line)}
.service:last-child{border-bottom:1px solid var(--line)}
.service summary{display:flex;align-items:center;gap:28px;padding:26px 0;cursor:pointer;list-style:none}
.service summary::-webkit-details-marker{display:none}
.service h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;flex:1}
.service .s-toggle{width:34px;height:34px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:18px;line-height:1;color:var(--lime);transition:transform .25s ease,border-color .25s ease;flex-shrink:0}
.service[open] .s-toggle{transform:rotate(45deg);border-color:var(--lime)}
.service summary:hover h3{color:var(--lime)}
.service summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.service-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:6px 0 36px;animation:svc-open .3s ease}
.service-body p{max-width:52ch;color:#9FAAB9;font-size:14px;align-self:center}
.service-body .ph{min-height:240px}
@keyframes svc-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:900px){.service-body{grid-template-columns:1fr;gap:24px}.service-body .ph{order:-1;min-height:200px}}
@media (prefers-reduced-motion:reduce){.service-body{animation:none}}

/* about */
.about h2{font-size:clamp(28px,3.2vw,40px);font-weight:800;margin:18px 0 22px}
.about p{font-size:13.5px;margin-bottom:16px;max-width:58ch}

/* home-shift pinned scroll section */
.home-shift{background:#fff;color:#151515}
.home-shift__track{position:relative;height:600vh}
.home-shift__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.home-shift__text{position:absolute;inset:0;z-index:1;margin:0;padding:0 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:0;will-change:transform,opacity}
.home-shift__title-reg{display:block;font-size:clamp(30px,5vw,68px);font-weight:400;line-height:1.15}
.home-shift__title-bold{display:block;font-size:clamp(30px,5vw,68px);font-weight:700;letter-spacing:-0.01em;line-height:1.1}
.home-shift__text--small{font-size:clamp(30px,5vw,68px);font-weight:400;line-height:1.1}
.home-shift__text--caption{font-size:clamp(30px,5vw,68px);font-weight:400;line-height:1.1;color:#1d1d1d}
.home-shift__accent{color:#c4c41e;font-weight:700}
.home-shift__ship-big,
.home-shift__ship-small{position:absolute;top:50%;left:0;z-index:2;opacity:0;will-change:transform}
.home-shift__ship-big img{display:block;height:52vh;width:auto;max-width:none}
.home-shift__ship-small img{display:block;height:28vh;width:auto;max-width:none}
.home-shift__fleet{position:absolute;left:4vw;top:50%;z-index:2;opacity:0;display:flex;flex-direction:column;gap:6vh;will-change:transform,opacity}
.home-shift__fleet img{display:block;height:18vh;width:auto;max-width:none}
.home-shift__anchor{position:absolute;left:0;bottom:100vh;width:1px;height:1px}
.home-shift__cta{position:absolute;z-index:3;top:50%;left:max(calc(8vw + 22vh),300px);right:6vw;opacity:0;transform:translateY(-50%) translateY(55vh);will-change:transform,opacity;background:var(--navy-deep);color:#fff;padding:clamp(30px,5vw,64px);box-shadow:0 18px 50px rgba(20,26,36,.18)}
@media (max-width:700px){.home-shift__cta{left:4vw;right:4vw;width:auto;padding:28px 24px}}
@media (max-width:700px){
  .home-shift__text{padding:0 20px}
  .home-shift__ship-big img{height:30vh}
  .home-shift__ship-small img{height:17vh}
  .home-shift__fleet img{height:12vh}
  .home-shift__fleet{gap:4vh;left:5vw}
}
.home-shift.no-anim .home-shift__track{height:auto}
.home-shift.no-anim .home-shift__stage{position:static;height:auto;overflow:visible;padding:80px 40px 90px;max-width:1200px;margin:0 auto}
.home-shift.no-anim .home-shift__text,
.home-shift.no-anim .home-shift__ship-big,
.home-shift.no-anim .home-shift__ship-small,
.home-shift.no-anim .home-shift__fleet{position:static;inset:auto;opacity:1 !important;transform:none !important;display:block;text-align:left;padding:0;margin-bottom:48px}
.home-shift.no-anim .home-shift__ship-big img{height:auto;width:100%}
.home-shift.no-anim .home-shift__ship-small{display:none}
.home-shift.no-anim .home-shift__fleet{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}
.home-shift.no-anim .home-shift__fleet img{height:64px}
.home-shift.no-anim .home-shift__cta{position:static;opacity:1 !important;transform:none !important;width:auto;max-width:720px}
@media (prefers-reduced-motion:reduce){
  .home-shift .home-shift__track{height:auto}
  .home-shift .home-shift__stage{position:static;height:auto;overflow:visible;padding:80px 40px 90px;max-width:1200px;margin:0 auto}
  .home-shift .home-shift__text,
  .home-shift .home-shift__ship-big,
  .home-shift .home-shift__ship-small,
  .home-shift .home-shift__fleet{position:static;inset:auto;opacity:1 !important;transform:none !important;display:block;text-align:left;padding:0;margin-bottom:48px}
  .home-shift .home-shift__ship-big img{height:auto;width:100%}
  .home-shift .home-shift__ship-small{display:none}
  .home-shift .home-shift__fleet{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}
  .home-shift .home-shift__fleet img{height:64px}
  .home-shift .home-shift__cta{position:static;opacity:1 !important;transform:none !important;width:auto;max-width:720px}
}

/* port-call email CTA */
.home-shift__cta h3{max-width:12ch;margin:8px 0 16px;font-size:clamp(30px,4vw,58px);line-height:1.02;letter-spacing:-.02em}
.home-shift__cta>p{max-width:48ch;color:#c8d0da;font-size:clamp(15px,1.4vw,18px);line-height:1.65}
.port-call-cta__button{display:inline-flex;align-items:center;justify-content:center;gap:28px;margin-top:28px;background:var(--lime);color:var(--navy-deep);padding:15px 22px;font-size:15px;font-weight:800;transition:background .2s ease,transform .2s ease}
.port-call-cta__button:hover{background:#d5d527;transform:translateY(-2px)}
.port-call-cta__button:focus-visible,.port-call-cta__email:focus-visible{outline:3px solid #fff;outline-offset:4px}
.port-call-cta__email{display:block;width:max-content;margin-top:18px;color:#fff;font-size:14px;text-decoration:underline;text-underline-offset:4px}

/* footer */
.site-footer{background:var(--navy-deep)}
.footer-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none}
.footer-nav a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C3CBD6}
.footer-nav a:hover{color:var(--lime)}
.footer-bottom small{font-size:11px;color:#6E7989}
.footer-bottom .logo img{height:18px}
.footer-bottom .custom-logo-link img.custom-logo{max-height:22px}
/* generic inner pages */
.page-content{background:var(--white);color:var(--ink);padding:80px 0}
.page-content h1{font-size:clamp(30px,4vw,44px);font-weight:800;margin-bottom:24px}
.page-content p{color:var(--slate-light);margin-bottom:16px;max-width:70ch}
.page-content h2{font-size:19px;font-weight:700;margin:32px 0 10px}
.page-content ul{margin:0 0 16px 22px;color:var(--slate-light);max-width:70ch}
.page-content li{margin-bottom:6px}
.page-content a{color:#7A8500;text-decoration:underline}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}

/* mobile typography & spacing */
@media (max-width:700px){
  .wrap{padding:0 20px}
  .split .panel{padding:56px 20px}
  .hero .wrap{padding-top:96px;padding-bottom:104px}
  .hero p{font-size:16px}
  .commit .lede{font-size:16px}
  .pillar h3{font-size:16px}
  .pillar p{font-size:15px;line-height:1.6}
  .services-head{padding-top:72px}
  .service summary{gap:18px;padding:22px 0}
  .service h3{font-size:20px}
  .service-body p{font-size:16px}
  .about p{font-size:15px}
  .footer-nav a{font-size:12px}
  .footer-bottom small{font-size:12px}
}