/*
Theme Name: Shan Marine
Description: A focused, accessible single-page theme for Shan Marine.
Version: 2.0.0
Text Domain: shan-marine
*/

:root { --navy:#102b52; --ink:#17304f; --blue:#087fbb; --cyan:#14b4dc; --sky:#dceef7; --foam:#f5f9fb; --line:#d9e5ec; --muted:#62758a; --paper:#fff; --serif:'DM Serif Display',Georgia,serif; --sans:'Manrope',Arial,sans-serif; --shell:1180px; --radius:18px; }
:root[data-theme="dark"] { --navy:#d7edfb; --ink:#eef7fb; --blue:#21bde5; --cyan:#5ed9f4; --sky:#183a61; --foam:#0d2039; --line:#254a71; --muted:#a5bacd; --paper:#102641; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; transition:background .25s,color .25s; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
.shell { width:min(calc(100% - 48px),var(--shell)); margin:auto; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:absolute; left:20px; top:-100px; z-index:50; padding:10px 16px; background:var(--navy); color:#fff; }
.skip-link:focus { top:20px; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }

/* Header */
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 94%,transparent); border-bottom:1px solid transparent; backdrop-filter:blur(14px); }
.header-inner { height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; min-width:max-content; }
.brand .custom-logo-link,.brand-logo { display:block; }
.brand .custom-logo,.brand-logo img { width:49px; height:49px; object-fit:contain; }
.brand-name { display:grid; line-height:1.05; font-weight:800; font-size:.91rem; letter-spacing:.04em; text-transform:uppercase; }
.brand-name small { color:var(--blue); font-size:.59rem; font-weight:700; letter-spacing:.17em; margin-top:4px; }
.desktop-nav { display:flex; gap:27px; font-size:.79rem; font-weight:700; color:var(--muted); }.desktop-nav li,.mobile-menu li,.site-footer .menu li { list-style:none; }
.desktop-nav a:hover { color:var(--blue); }
.header-actions { display:flex; gap:10px; align-items:center; }
.theme-toggle,.menu-toggle { border:1px solid var(--line); background:transparent; color:var(--ink); display:grid; place-items:center; }
.theme-toggle { width:39px; height:39px; border-radius:50%; font-size:1.15rem; }
.theme-toggle:hover { color:var(--blue); border-color:var(--blue); }
.menu-toggle { display:none; width:42px; height:40px; border-radius:8px; gap:5px; }
.menu-toggle i { width:18px; height:2px; background:currentColor; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:0 21px; border:1px solid var(--navy); background:var(--navy); color:var(--paper); border-radius:7px; font-size:.77rem; font-weight:800; letter-spacing:.035em; text-transform:uppercase; transition:transform .2s,background .2s; }
:root[data-theme="dark"] .button { color:#102641; }
.button:hover { transform:translateY(-2px); background:var(--blue); border-color:var(--blue); color:#fff; }
.button--small { min-height:39px; padding:0 14px; font-size:.66rem; }
.mobile-menu { display:none; }

/* Hero */
.hero { position:relative; overflow:hidden; padding:104px 0 88px; background:var(--foam); }
.hero:before { content:''; position:absolute; inset:0; background:linear-gradient(118deg,transparent 58%,var(--sky) 58%); opacity:.52; }
.hero-grid { min-height:520px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; position:relative; gap:48px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 19px; color:var(--blue); font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow span { width:28px; height:2px; background:var(--cyan); }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.035em; line-height:.99; }
h1 { max-width:640px; margin-bottom:25px; font-size:clamp(3.8rem,7vw,6.8rem); }
h1 em,h2 em { color:var(--blue); font-style:italic; }
.hero-lead,.body-copy { max-width:510px; margin-bottom:31px; color:var(--muted); font-size:1.04rem; line-height:1.8; }
.hero-actions { display:flex; align-items:center; gap:25px; }
.text-link { display:inline-flex; gap:10px; align-items:center; color:var(--ink); font-size:.8rem; font-weight:800; }
.text-link span { color:var(--blue); font-size:1.2rem; }
.hero-proof { display:flex; gap:17px; flex-wrap:wrap; padding:0; margin:49px 0 0; list-style:none; color:var(--muted); font-size:.69rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.hero-proof li:before { content:'•'; margin-right:7px; color:var(--cyan); }
.hero-art { height:480px; position:relative; overflow:hidden; border-radius:0 140px 0 0; background:linear-gradient(135deg,#c1e2f2 0%,#eaf6fa 52%,#b4dbed 100%); box-shadow:25px 25px 0 var(--sky); }
:root[data-theme="dark"] .hero-art { background:linear-gradient(135deg,#1c527a,#113557 58%,#235f83); }
.sun-disc { position:absolute; top:68px; right:86px; width:150px; height:150px; border-radius:50%; background:#f8d98e; opacity:.85; }
.horizon { position:absolute; top:255px; left:0; width:100%; border-top:2px solid rgba(16,43,82,.28); }
.hull { position:absolute; background:var(--navy); transform:skewX(-20deg); }
.hull--back { width:290px; height:61px; left:118px; top:260px; border-radius:0 0 72px 12px; opacity:.62; }
.hull--front { width:230px; height:62px; left:195px; top:292px; border-radius:0 0 65px 10px; background:var(--ink); }
.mast { position:absolute; left:281px; top:148px; width:5px; height:150px; background:var(--ink); box-shadow:34px 36px 0 -1px var(--ink),-68px 91px 0 -1px var(--ink); }
.mast:before { content:''; position:absolute; right:4px; top:18px; border-style:solid; border-width:58px 0 0 112px; border-color:transparent transparent transparent rgba(16,43,82,.62); }
.mast:after { content:''; position:absolute; left:4px; top:48px; border-style:solid; border-width:76px 102px 0 0; border-color:transparent rgba(8,127,187,.52) transparent transparent; }
.wave { position:absolute; left:-6%; width:112%; height:88px; border-top:8px solid var(--cyan); border-radius:50%; }
.wave--one { top:349px; transform:rotate(-2deg); }
.wave--two { top:388px; border-top-color:rgba(8,127,187,.52); transform:rotate(3deg); }
.hero-art-label { position:absolute; left:28px; bottom:22px; display:grid; color:var(--navy); line-height:1; text-transform:uppercase; letter-spacing:.11em; }
.hero-art-label strong { font-size:1rem; }.hero-art-label span { font-size:.5rem; margin-top:6px; }

.intro-strip { border-bottom:1px solid var(--line); }
.intro-strip-grid { display:grid; grid-template-columns:1.55fr 1fr 1fr; align-items:center; min-height:126px; }
.intro-strip p { max-width:455px; margin:0; font-family:var(--serif); font-size:1.22rem; line-height:1.3; }
.intro-strip-grid div { min-height:67px; display:flex; align-items:center; gap:13px; padding-left:25px; border-left:1px solid var(--line); font-size:.72rem; line-height:1.35; text-transform:uppercase; }
.intro-strip-grid span { color:var(--blue); font-family:var(--serif); font-size:1.55rem; }

/* Sections */
.section { padding:115px 0; }.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; margin-bottom:51px; }.section-heading .eyebrow { grid-column:1/-1; margin-bottom:-13px; }.section-heading h2,.approach h2,.process h2,.contact h2 { font-size:clamp(2.8rem,5vw,4.55rem); margin:0; }.section-heading>p:last-child { max-width:450px; margin:0 0 7px; color:var(--muted); line-height:1.75; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.service-card { min-height:245px; position:relative; padding:27px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s,color .25s; }.service-card:hover,.service-card--featured { background:var(--navy); color:#fff; }.service-card span { color:var(--blue); font-family:var(--serif); font-size:1.35rem; }.service-card:hover span,.service-card--featured span { color:var(--cyan); }.service-card h3 { margin:38px 0 7px; font-size:1.13rem; line-height:1.2; }.service-card p { max-width:270px; margin:0; color:var(--muted); font-size:.83rem; line-height:1.65; }.service-card:hover p,.service-card--featured p { color:#b9d1df; }.service-card i { position:absolute; right:26px; bottom:21px; color:var(--blue); font-style:normal; font-size:1.32rem; }
.approach { background:var(--foam); }.approach-grid { display:grid; grid-template-columns:.96fr 1.04fr; gap:10%; align-items:center; }.approach-art { height:465px; position:relative; background:var(--sky); overflow:hidden; border-radius:170px 0 0; }.dock-line { position:absolute; left:0; right:0; bottom:76px; border-top:1px solid var(--blue); }.approach-boat { position:absolute; width:310px; height:170px; left:50%; top:47%; transform:translate(-50%,-50%); background:var(--navy); clip-path:polygon(0 43%,100% 43%,81% 83%,16% 83%); }.approach-boat:before { content:''; position:absolute; top:0; left:33%; width:34%; height:43%; background:var(--paper); }.approach-boat b { position:absolute; top:19%; left:43%; width:2px; height:76px; background:var(--cyan); }.approach-boat i { position:absolute; top:27%; left:44%; border-style:solid; border-width:0 69px 45px 0; border-color:transparent rgba(20,180,220,.8) transparent transparent; }.approach-boat span { position:absolute; right:13%; top:51%; width:28px; height:8px; background:var(--cyan); }.stamp { position:absolute; right:22px; bottom:22px; display:grid; place-items:center; width:75px; height:75px; border:1px solid var(--blue); border-radius:50%; color:var(--blue); font-size:.57rem; font-weight:800; line-height:1.1; letter-spacing:.12em; text-align:center; }.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line); }.principles strong { display:block; margin-bottom:5px; color:var(--blue); font-size:.78rem; text-transform:uppercase; }.principles span { display:block; color:var(--muted); font-size:.76rem; line-height:1.55; }
.process { padding-bottom:96px; }.process-top { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:30px; margin-bottom:57px; }.process-top .eyebrow { grid-column:1/-1; margin-bottom:-13px; }.process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:0; margin:0; list-style:none; }.process-list li { padding-top:19px; border-top:2px solid var(--blue); }.process-list b { color:var(--blue); font-family:var(--serif); font-size:1.38rem; font-weight:400; }.process-list h3 { margin:31px 0 9px; font-size:1rem; line-height:1.25; }.process-list p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.65; }
.marine-gallery { background:var(--foam); }.gallery-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; margin-bottom:42px; }.gallery-heading .eyebrow { grid-column:1/-1; margin-bottom:-10px; }.gallery-heading h2 { max-width:650px; margin:0; font-size:clamp(2.8rem,5vw,4.55rem); font-family:var(--serif); font-weight:400; line-height:1; letter-spacing:-.035em; }.marine-gallery-grid { display:grid; grid-template-columns:1.16fr .84fr; gap:24px; }.marine-gallery figure { position:relative; min-height:360px; margin:0; overflow:hidden; border-radius:var(--radius); background:var(--sky); }.marine-gallery figure:last-child { min-height:360px; }.marine-gallery img { width:100%; height:100%; min-height:360px; object-fit:cover; transition:transform .35s ease; }.marine-gallery figure:hover img { transform:scale(1.03); }.marine-gallery figcaption { position:absolute; right:0; bottom:0; left:0; padding:40px 25px 21px; background:linear-gradient(transparent,rgba(5,23,44,.8)); color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.quote-band { padding:100px 0; background:var(--navy); color:#fff; text-align:center; }.quote-band p { width:min(100%,800px); margin:0 auto 19px; font-family:var(--serif); font-size:clamp(2rem,4vw,3.55rem); line-height:1.1; letter-spacing:-.03em; }.quote-band span { color:var(--cyan); font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.contact-grid { display:grid; grid-template-columns:1fr .91fr; gap:11%; }.contact-details { display:grid; gap:18px; margin-top:37px; }.contact-details a,.contact-details p { margin:0; color:var(--ink); font-size:.93rem; }.contact-details span { display:block; margin-bottom:3px; color:var(--blue); font-size:.65rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.quote-form { padding:35px; border:1px solid var(--line); border-radius:var(--radius); background:var(--foam); }.quote-form h3 { margin:0 0 3px; font-family:var(--serif); font-size:1.9rem; font-weight:400; }.quote-form>p { margin-bottom:23px; color:var(--muted); font-size:.75rem; }.quote-form label { display:block; margin:0 0 15px; color:var(--ink); font-size:.71rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.quote-form input,.quote-form select,.quote-form textarea { display:block; width:100%; margin-top:6px; padding:10px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; outline:0; background:transparent; color:var(--ink); font-size:.92rem; font-weight:500; }.quote-form textarea { resize:vertical; }.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus { border-color:var(--blue); }.quote-form .button { width:100%; margin-top:7px; }.honeypot { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }.form-status { min-height:1.4em; margin:13px 0 0!important; font-size:.8rem!important; }.form-status.is-success { color:#087f55; }.form-status.is-error { color:#bf3a3a; }

/* Footer */
.site-footer { padding:57px 0 19px; background:#0b2343; color:#dce9f2; }.footer-grid { display:grid; grid-template-columns:1.2fr .6fr 1fr; gap:80px; padding-bottom:51px; }.footer-brand { display:flex; align-items:center; gap:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }.footer-brand img { width:48px; height:48px; object-fit:contain; filter:brightness(0) invert(1); }.footer-brand span { display:grid; line-height:1.1; }.footer-brand small { margin-top:4px; color:var(--cyan); font-size:.57rem; letter-spacing:.16em; }.site-footer p { color:#92a9bd; font-size:.78rem; line-height:1.7; }.footer-grid>div:first-child>p { max-width:255px; margin:19px 0 0; }.footer-title { margin:0 0 12px; color:#fff!important; font-size:.68rem!important; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.footer-grid>div:nth-child(2) a { display:block; margin:6px 0; color:#b8cada; font-size:.78rem; }.footer-grid a:hover { color:var(--cyan); }.footer-note { max-width:295px; margin:0; }.footer-bottom { display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); color:#8ba2b7; font-size:.69rem; }.footer-bottom a { color:#dce9f2; }

[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; } [data-reveal].is-visible { opacity:1; transform:none; }
@media (max-width:850px) { .desktop-nav,.header-actions .button--small { display:none; }.menu-toggle { display:grid; }.hero { padding:70px 0 80px; }.hero-grid,.approach-grid,.contact-grid,.marine-gallery-grid { grid-template-columns:1fr; }.hero-grid { gap:58px; }.hero-art { height:370px; max-width:610px; width:100%; }.section-heading { grid-template-columns:1fr; gap:18px; }.service-grid { grid-template-columns:1fr 1fr; }.approach-grid { gap:58px; }.process-top { grid-template-columns:1fr auto; }.process-top .eyebrow { grid-column:1/-1; }.process-top h2 { grid-column:1/-1; }.process-list { grid-template-columns:1fr 1fr; row-gap:46px; }.contact-grid { gap:55px; }.mobile-menu { background:var(--paper); border-bottom:1px solid var(--line); }.mobile-menu.is-open { display:grid; padding:14px 24px 22px; gap:16px; font-size:.86rem; font-weight:800; }.intro-strip-grid { grid-template-columns:1fr 1fr; padding:28px 0; gap:22px; }.intro-strip-grid p { grid-column:1/-1; }.footer-grid { grid-template-columns:1fr 1fr; gap:40px; }.footer-grid>div:first-child { grid-column:1/-1; } }
@media (max-width:560px) { .shell { width:min(calc(100% - 32px),var(--shell)); }.header-inner { height:70px; gap:12px; }.brand-name { display:none; }.hero { padding-top:50px; }.hero-grid { min-height:0; gap:45px; }.hero-art { height:290px; border-radius:0 92px 0 0; box-shadow:14px 14px 0 var(--sky); }.sun-disc { top:38px; right:40px; width:100px; height:100px; }.hull--back { left:40px; top:160px; }.hull--front { left:103px; top:192px; }.mast { left:186px; top:72px; }.wave--one { top:247px; }.wave--two { top:273px; }.hero-art-label { display:none; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.hero-proof { margin-top:36px; gap:10px; }.intro-strip-grid { grid-template-columns:1fr; }.intro-strip-grid div { min-height:0; padding:0; border:0; }.section { padding:78px 0; }.service-grid,.process-list { grid-template-columns:1fr; }.service-card { min-height:215px; }.approach-art { height:350px; }.principles { grid-template-columns:1fr; gap:19px; }.process-top { grid-template-columns:1fr; margin-bottom:42px; }.quote-band { padding:70px 0; }.quote-form { padding:25px 19px; }.footer-grid { grid-template-columns:1fr; gap:30px; }.footer-grid>div:first-child { grid-column:auto; }.footer-bottom { align-items:flex-start; flex-direction:column; gap:8px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } [data-reveal] { opacity:1; transform:none; } }