:root { --ink:#071d3d; --paper:#edf8f8; --lagoon:#a9e4e4; --ocean:#137fbc; --deep-ocean:#075282; --line:rgba(7,29,61,.2); --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; }
a { color:inherit; text-decoration:none; }
.page-glow { position:fixed; width:44vw; height:44vw; max-width:580px; max-height:580px; top:-22vw; right:-10vw; border-radius:50%; background:var(--ocean); filter:blur(30px); opacity:.15; pointer-events:none; z-index:-1; }
.site-header, .section-wrap { width:min(100% - 64px, 1320px); margin:auto; }
.site-header { height:91px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { display:block; width:148px; line-height:0; }
.logo img { display:block; width:100%; height:auto; }
nav { display:flex; gap:30px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
nav a, footer a { transition:opacity .2s; } nav a:hover, footer a:hover { opacity:.5; }
.menu-button { display:none; background:none; border:0; padding:7px 0; }
.hero { min-height:650px; padding:74px 0 64px; position:relative; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.03em; margin:0; line-height:1.6; }
.hero .eyebrow span { color:var(--ocean); padding:0 5px; }
.hero-copy h1 { font-size:clamp(52px, 7.4vw, 109px); line-height:.98; max-width:1020px; letter-spacing:-.065em; font-weight:500; margin:64px 0 62px; }
h1 em, .about h2 em { font-family:var(--serif); font-weight:600; letter-spacing:-.075em; }
.hero-footer { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.hero-footer p { margin:0; max-width:325px; font-size:15px; line-height:1.55; }
.round-link { width:62px; height:62px; flex:0 0 auto; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-size:25px; transition:background .25s, transform .25s; }
.round-link:hover { background:var(--lagoon); transform:rotate(-20deg); }
.scribble { position:absolute; right:15%; top:25%; color:var(--ocean); font-size:75px; transform:rotate(15deg); font-family:var(--serif); }
.work { padding:118px 0 136px; border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:50px; }
.quiet { max-width:290px; margin:0; font-size:14px; line-height:1.5; }
.gallery-grid { display:grid; grid-template-columns:repeat(3, 1fr); column-gap:25px; row-gap:56px; }.gallery-card { display:block; }.gallery-wide { grid-column:span 2; }.gallery-art { position:relative; overflow:hidden; margin:0; height:clamp(300px, 35vw, 480px); background:#d3e7e8; }.gallery-wide .gallery-art { height:clamp(330px, 48vw, 610px); }.photo-art img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.84) contrast(1.03); transition:transform .6s ease, filter .6s ease; }.gallery-card:hover .photo-art img { transform:scale(1.035); filter:saturate(1) contrast(1.06); }.photo-art figcaption { position:absolute; left:16px; bottom:15px; padding:6px 9px; background:rgba(7,29,61,.74); color:#ecf8f7; font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; }.gallery-info { display:flex; justify-content:space-between; gap:15px; padding-top:15px; border-top:1px solid var(--line); margin-top:16px; }.gallery-info h2 { font-size:16px; font-weight:600; margin:0; }.gallery-info span { font-family:var(--mono); font-size:10px; text-transform:uppercase; padding-top:4px; }
.tide-art { background:var(--deep-ocean); color:#d9f5f2; }.tide-moon { position:absolute; width:22%; aspect-ratio:1; top:13%; right:17%; border-radius:50%; background:#9ae0e0; }.tide-wave { position:absolute; display:block; width:130%; height:55%; left:-15%; border:2px solid #9ae0e0; border-radius:50% 50% 0 0; }.wave-one { bottom:-26%; transform:rotate(-7deg); }.wave-two { bottom:-40%; transform:rotate(6deg); opacity:.72; }
.market-art { background:#b5e6e1; color:var(--ink); }.market-art strong { position:absolute; left:9%; bottom:10%; font-family:var(--serif); font-size:clamp(38px,5vw,76px); line-height:.77; letter-spacing:-.09em; }.market-art i { position:absolute; width:29%; aspect-ratio:1; border-radius:50% 45% 55% 42%; background:#258dbb; }.market-art i:nth-of-type(1) { right:7%; bottom:-10%; }.market-art i:nth-of-type(2) { width:17%; right:28%; top:15%; background:#4abfc7; }
.film-art { background:#08365e; color:#e4faf7; }.film-art:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 45%,rgba(115,212,211,.34)); }.play-button { position:absolute; z-index:1; left:50%; top:50%; translate:-50% -50%; width:72px; height:72px; border:1px solid #e4faf7; border-radius:50%; display:grid; place-items:center; color:#e4faf7; font-size:19px; padding-left:4px; }.film-time { position:absolute; right:20px; bottom:17px; z-index:1; font-family:var(--mono); font-size:11px; }.bloom-art { background:#1a90bd; color:#e9fbf9; }.bloom-art strong { position:absolute; bottom:8%; left:8%; z-index:1; font-family:var(--serif); font-size:clamp(62px,12vw,175px); line-height:.68; letter-spacing:-.1em; }.bloom-flower { position:absolute; color:#b9eeea; font-size:clamp(130px,24vw,330px); line-height:.7; }.flower-one { right:8%; top:2%; }.flower-two { right:30%; bottom:-17%; font-size:clamp(95px,17vw,250px); color:#72d5dc; }
.text-link { display:inline-block; margin-top:55px; border-bottom:1px solid var(--ink); font-size:15px; padding-bottom:4px; }.text-link span { padding-left:12px; }
.about { padding:118px 0 140px; background:var(--ink); color:var(--paper); width:100%; }.about > * { width:min(100% - 64px, 1320px); margin-left:auto; margin-right:auto; }.about .eyebrow { padding-bottom:50px; border-bottom:1px solid rgba(237,248,248,.25); }.about-grid { display:grid; grid-template-columns: .78fr 1.22fr; gap:10.5%; padding-top:45px; }.portrait { height:clamp(430px, 52vw, 720px); margin:0; overflow:hidden; background:#137fbc; }.portrait img { width:100%; height:100%; display:block; object-fit:cover; object-position:55% center; }
.about-copy h2 { font-size:clamp(35px, 4.35vw, 66px); line-height:1.01; letter-spacing:-.06em; font-weight:500; margin:0 0 40px; max-width:730px; }.about-copy p { color:#c9e7e8; max-width:550px; font-size:16px; line-height:1.56; margin:0 0 18px; }.about .text-link { margin-top:24px; color:var(--paper); }
.services { padding:115px 0 130px; }.service-list { border-top:1px solid var(--line); }.service { display:grid; grid-template-columns:12% 1fr auto; align-items:start; gap:20px; padding:30px 0; border-bottom:1px solid var(--line); }.service > span { font-family:var(--mono); font-size:11px; color:var(--ocean); }.service h2 { margin:0 0 9px; font-size:clamp(25px,3vw,40px); letter-spacing:-.045em; font-weight:500; }.service p { max-width:510px; margin:0; line-height:1.55; font-size:15px; }.service a { font-size:24px; }
.contact { padding:115px 0 25px; }.contact-main { padding:45px 0 130px; display:flex; align-items:end; justify-content:space-between; gap:20px; }.contact h2 { font-size:clamp(48px, 7vw, 100px); line-height:.95; letter-spacing:-.075em; font-weight:500; margin:0; }.contact-details { display:flex; flex-direction:column; align-items:flex-end; gap:16px; }.contact-details a { font-family:var(--mono); font-size:clamp(13px, 1.5vw, 18px); border-bottom:1px solid; padding-bottom:7px; }.contact-details a span { font-size:23px; padding-left:13px; }.phone-link { align-self:flex-end; }footer { padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-family:var(--mono); text-transform:uppercase; font-size:10px; letter-spacing:.02em; }footer p { margin:0; }footer div { display:flex; gap:20px; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }.reveal.visible { opacity:1; transform:none; }
@media (max-width:700px){.site-header,.section-wrap{width:min(100% - 36px,1320px)}.site-header{height:72px}.logo{width:120px}nav{display:none;position:absolute;top:72px;left:0;width:100%;padding:24px 18px;background:var(--paper);border-bottom:1px solid var(--line);z-index:3}.site-header.menu-open nav{display:flex;flex-direction:column;gap:18px}.menu-button{display:flex;flex-direction:column;gap:5px}.menu-button span{display:block;width:24px;height:1px;background:var(--ink)}.hero{min-height:575px;padding:54px 0 44px}.hero-copy h1{margin:52px 0 48px}.scribble{right:4%;top:20%;font-size:55px}.hero-footer p{font-size:14px}.round-link{width:52px;height:52px}.work{padding:78px 0 90px}.section-heading{display:block;margin-bottom:35px}.quiet{margin-top:24px}.gallery-grid{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:32px}.gallery-card{margin-bottom:0}.gallery-wide{grid-column:span 2}.gallery-wide .gallery-art,.gallery-art{height:65vw;min-height:0}.gallery-wide .gallery-art{height:100vw}.gallery-info{margin-top:10px;padding-top:10px}.gallery-info h2{font-size:14px}.gallery-info span{display:none}.about{padding:80px 0 90px}.about>*{width:min(100% - 36px,1320px)}.about-grid{display:flex;flex-direction:column;gap:42px;padding-top:33px}.portrait{height:330px}.about-copy h2{font-size:38px;margin-bottom:28px}.services{padding:78px 0 85px}.service{grid-template-columns:32px 1fr;gap:14px;padding:25px 0}.service>a{grid-column:2}.service h2{font-size:29px}.contact{padding-top:76px}.contact-main{padding:36px 0 90px;display:block}.contact-details{align-items:flex-start;margin-top:36px}.phone-link{align-self:flex-start}footer{flex-wrap:wrap;gap:18px}footer div{order:3;width:100%;gap:15px}}