:root{--marino-ink:#102b46;--marino-paper:#f4f7fa;--marino-accent:#2463a6;background:var(--marino-paper);color:var(--marino-ink)}
.nav{position:relative;left:auto;transform:none;color:var(--marino-ink);height:86px;border-bottom:1px solid #102b4630;width:min(1320px,calc(100% - 72px));background:var(--marino-paper)}
.brand{display:block;width:154px}.brand img{width:100%;height:auto}.nav-location{font-size:12px;letter-spacing:.04em;color:#506478}.navlinks{gap:32px}.navlinks a:hover{color:#2463a6}
.marino-hero{background:var(--marino-paper);color:var(--marino-ink);min-height:810px;position:relative;overflow:hidden;padding:0}
.hero-composition{position:relative;height:810px;padding-top:45px}
.marino-hero h1{margin:0;position:relative;z-index:1;line-height:1}
.hero-wordmark{width:100%;height:auto}
.marino-hero .portrait{position:absolute;top:148px;bottom:auto;left:auto;right:2%;width:clamp(310px,31vw,430px);height:660px;margin:0;mask-image:none;-webkit-mask-image:none;z-index:2;background:none;border-radius:0;aspect-ratio:auto}
.marino-hero .portrait img{width:100%;height:auto;max-width:100%;object-fit:contain;object-position:top}
.marino-hero .portrait:after{display:none}
.marino-hero .hero-copy{position:absolute;left:0;top:350px;width:52%;max-width:540px;text-align:left;z-index:5}
.marino-hero .eyebrow{font-size:14px;letter-spacing:.03em;color:#4c647c;margin-bottom:21px}
.marino-hero .hero-description{max-width:490px;font-size:clamp(22px,2.2vw,30px);line-height:1.45;letter-spacing:-.025em;color:var(--marino-ink);margin-bottom:24px}
.hero-socials{color:var(--marino-ink);gap:18px}.hero-socials .social-link:hover,.hero-socials .social-link:focus-visible{background:#102b460d;color:#2463a6}.hero-socials .social-link:focus-visible{outline-color:#2463a6}
.hero-notes{position:absolute;left:0;bottom:155px;right:0;display:flex;justify-content:space-between;color:#65798e;font-size:12px;z-index:5}.hero-notes span:last-child{margin-right:2%}
.hero-wave{position:absolute;inset:auto 0 -1px;height:120px;background:var(--marino-ink);mask:url('assets/brand/marinofolio-wave.svg') center/100% 100% no-repeat;-webkit-mask:url('assets/brand/marinofolio-wave.svg') center/100% 100% no-repeat;z-index:6;pointer-events:none}
.marino-hero [data-marino-tide]{height:240px;bottom:0;opacity:.85;z-index:3;--tide-color-1:#2463a6;--tide-color-2:#102b46;--tide-color-3:#75b2db}
.marino-statement{background:var(--marino-ink);color:var(--marino-paper);padding:70px 0 100px}.marino-statement .eyebrow{color:#a9c6df}.statement-copy{font-size:clamp(36px,4.7vw,64px);letter-spacing:-.05em;line-height:1.1;margin:0}
.intro-logo{width:min(75vw,800px);height:auto}
.feature{padding-top:85px;padding-bottom:95px}.feature-panel{border-radius:0;min-height:690px}.feature-copy{padding-left:50px}.feature-copy h2{letter-spacing:-.065em}.section-index{color:#647b91}.feature-stage .expert-device{border-radius:13% /6.5%}
.work{background:var(--marino-paper)}.work-heading{border-top:1px solid #102b4630;padding-top:30px}.work h2{font-size:clamp(40px,5vw,64px)}.section-description{color:#586e82}.filterbar{margin-bottom:45px}.filter.active{background:var(--marino-ink)}
.grid{grid-template-columns:1fr;gap:0}.card,.card[data-id='my-puppets'],.card[data-id='car-repair']{display:grid;grid-template-columns:1.35fr 1fr;grid-column:auto;background:transparent;border-radius:0;border-bottom:1px solid #102b462b;padding-block:34px;box-shadow:none}
.card:hover{translate:none;box-shadow:none}.card:nth-child(even){grid-template-columns:1fr 1.35fr}.card:nth-child(even) .art{order:2}.card-copy,.card[data-id='my-puppets'] .card-copy,.card[data-id='car-repair'] .card-copy{padding:40px 45px;display:flex;flex-direction:column;justify-content:center}.card h3{font-size:clamp(32px,3vw,42px);margin-block:14px}.card p{font-size:17px;color:#586e82}.card .arrow{background:transparent;color:#2463a6}.card .type{color:#5d748a}.art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{height:400px;border-radius:4px}.art .phone{width:180px}.card:hover .art .phone:first-child{transform:translateY(28px) rotate(-3deg)}
.about{background:#e8eef4;padding-bottom:100px}.about-top{display:flex;align-items:start;justify-content:space-between;gap:40px;margin-bottom:75px}.about-top .eyebrow{padding-top:8px}.about-top h2{font-size:clamp(48px,6vw,80px);width:57%;margin:0}.about h2 span{color:#527da4}.about-grid{gap:100px}.about p{font-size:18px;color:#50677c;max-width:100%}.about .about-lead{font-size:32px;line-height:1.25;letter-spacing:-.04em;color:#102b46}.about-detail{padding-top:10px}.timeline{margin-top:15px}.timeline div{border-color:#102b4624}.timeline dt{color:#5b7187}.timeline dd span{color:#5b7187}.toolkit span{border-color:#102b462a}
.creative-side{background:#102b46;color:#f4f7fa;padding-bottom:0;overflow:hidden}.creative-heading{margin-bottom:65px}.creative-heading .eyebrow{color:#a9c6df}.creative-heading h2{font-size:clamp(44px,6vw,78px);margin:0}.passion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.passion{border-top:1px solid #f4f7fa40;padding-top:24px}.passion-number{font-size:12px;letter-spacing:.06em;color:#a9c6df}.passion h3{font-size:29px;line-height:1.17;letter-spacing:-.04em;margin:35px 0 23px}.passion p{color:#c3d4e4;font-size:17px;line-height:1.65;margin-bottom:32px}.passion-signature{font-size:13px;color:#98b9d7}.creative-side [data-marino-tide]{--tide-color-1:#75b2db;--tide-color-2:#c3d4e4;--tide-color-3:#2463a6;margin-bottom:0;height:150px}
.footer{background:var(--marino-paper)}.footer h2{font-size:clamp(55px,9vw,124px)}.contact-heading>p{color:#50677c}.footer-bottom{border-color:#102b462b;color:#50677c}
@media(min-width:1550px){.hero-composition{height:890px;padding-top:58px}.marino-hero{min-height:890px}.marino-hero .portrait{top:155px;right:0;width:460px;height:735px}.marino-hero .hero-copy{top:365px}}
@media(max-width:1000px){.nav-location{display:none}.marino-hero .hero-copy{width:52%;top:310px}.marino-hero .portrait{top:160px;right:0;width:340px;height:590px}.hero-composition,.marino-hero{height:750px;min-height:750px}.hero-notes{bottom:145px}.hero-notes span:last-child{display:none}.card-copy,.card[data-id='my-puppets'] .card-copy,.card[data-id='car-repair'] .card-copy{padding:30px}.art .phone{width:155px}.about-grid{gap:55px}.passion-grid{gap:25px}.passion h3{font-size:25px}}
@media(max-width:760px){.nav{width:calc(100% - 40px);height:76px}.brand{width:125px}.navlinks{gap:18px;font-size:13px}.hero-composition{height:970px;padding-top:32px}.marino-hero{height:auto;min-height:0}.marino-hero .portrait{top:120px;left:50%;right:auto;transform:translateX(-50%);width:285px;height:490px;overflow:hidden;mask-image:linear-gradient(#000 0%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 82%,transparent 100%)}.marino-hero .hero-copy{top:600px;width:100%;max-width:550px}.marino-hero .hero-description{font-size:23px;max-width:470px}.marino-hero .eyebrow{font-size:14px}.hero-notes{bottom:128px;font-size:12px}.hero-wave{height:100px}.marino-hero [data-marino-tide]{height:160px}.marino-statement{padding:45px 0 65px}.statement-copy{font-size:40px}.feature{padding-top:65px;padding-bottom:65px}.feature-copy{padding:35px 28px 0}.feature-stage{min-height:520px}.feature-panel{min-height:0}.grid{gap:0}.card,.card:nth-child(even),.card[data-id='my-puppets'],.card[data-id='car-repair']{display:flex;flex-direction:column;grid-template-columns:none;padding-block:28px}.card:nth-child(even) .art{order:0}.art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{height:340px}.card-copy,.card[data-id='my-puppets'] .card-copy,.card[data-id='car-repair'] .card-copy{padding:25px 0 12px}.card h3{font-size:34px}.art .phone{width:160px}.about-top{display:block;margin-bottom:40px}.about-top h2{width:auto;font-size:56px}.about-grid{grid-template-columns:1fr;gap:25px}.about .about-lead{font-size:29px}.passion-grid{grid-template-columns:1fr;gap:42px}.passion h3{font-size:32px;margin-top:25px}.passion p{margin-bottom:18px;max-width:500px}.creative-heading{margin-bottom:45px}.passion-signature{font-size:14px}.creative-side [data-marino-tide]{height:120px}.contact-heading{display:block}.footer{padding-top:65px}.footer-socials{margin-top:28px}}
@media(max-width:380px){.navlinks{gap:12px}.brand{width:112px}.marino-hero .hero-description{font-size:21px}.hero-composition{height:950px}.hero-notes{font-size:11px}.about-top h2{font-size:49px}}

/* In the Zone inspired blue tonal mapping; source pixels and alpha stay intact. */
.portrait-filter-defs{position:absolute;overflow:hidden;pointer-events:none}
.marino-hero .portrait img{filter:none}
.marino-hero .portrait .portrait-blue-layer{position:absolute;inset:0 auto auto 0;width:100%;height:auto;filter:url(#portrait-blue);pointer-events:none;will-change:clip-path}
.feature-panel{border-radius:36px}
.grid{gap:32px}
.card,.card[data-id='my-puppets'],.card[data-id='car-repair']{border-radius:32px;background:#fff;padding:0;border:1px solid #102b460d;overflow:hidden}
.card .art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{border-radius:26px;margin:16px 0 16px 16px}
.card:nth-child(even) .art{margin:16px 16px 16px 0}
@media(max-width:760px){.feature-panel{border-radius:28px}.card,.card[data-id='my-puppets'],.card[data-id='car-repair']{border-radius:28px;padding:12px}.card .art,.card:nth-child(even) .art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{border-radius:22px;margin:0}.card-copy,.card[data-id='my-puppets'] .card-copy,.card[data-id='car-repair'] .card-copy{padding:25px 14px 20px}}

/* The wordmark opens inside reserved space, keeping the navigation still. */
.nav .brand{width:220px;height:50px;display:flex;align-items:center;flex-shrink:0}
.brand .brand-wordmark{display:block;width:100%;height:auto;overflow:visible}
.brand .logo-f{transform:translateX(var(--logo-f-compact-offset));transition:transform .65s cubic-bezier(.22,1,.36,1)}
.brand .logo-arino,.brand .logo-olio{opacity:0;transform:translateX(-55px);transition:opacity .3s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.brand:is(:hover,:focus-visible) .logo-f{transform:translateX(0)}
.brand:is(:hover,:focus-visible) .logo-arino,.brand:is(:hover,:focus-visible) .logo-olio{opacity:1;transform:translateX(0);transition-delay:.12s}
@media(max-width:760px){.nav .brand{width:140px;height:48px}.navlinks{gap:16px}}
@media(max-width:380px){.nav .brand{width:125px}.navlinks{gap:12px}}
@media(hover:none){.brand .logo-f{transform:none}.brand .logo-arino,.brand .logo-olio{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.brand .logo-f,.brand .logo-arino,.brand .logo-olio{transition:none}}