@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display:ital@0;1&display=swap");

:root { --ink:#20252b; --paper:#f1f3f5; --cream:#f8fafb; --accent:#55758d; --line:#d1d8dd; --muted:#6e7880; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
h1,h2,h3 { font-family:"DM Serif Display",serif; font-weight:400; }
.header { height:86px; padding:0 clamp(22px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.header-spacer { display:block; }
.header nav { display:flex; gap:38px; }.header nav a { font-size:11px; }
.header-cta { justify-self:end; display:flex; align-items:center; gap:8px; padding-bottom:5px; border-bottom:1px solid; font-size:10px; font-weight:600; }
.header-cta svg { width:13px; }
.menu-open { display:none; border:0; background:none; }
.mobile-menu { position:fixed; inset:0; z-index:50; padding:90px 25px; display:flex; flex-direction:column; gap:20px; color:var(--paper); background:var(--ink); transform:translateX(100%); transition:.3s; }
.mobile-menu.open { transform:none; }.mobile-menu a { font:42px "DM Serif Display",serif; }
.menu-close { position:absolute; top:22px; right:22px; border:0; background:none; color:white; }
.eyebrow { margin:0; color:var(--accent); font-size:9px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; }
.hero { min-height:640px; padding:clamp(75px,11vh,125px) clamp(24px,7vw,108px) 75px; display:grid; grid-template-columns:3fr 1fr; align-items:end; }
.hero-copy { max-width:940px; }
.hero h1 { margin:24px 0 16px; font-size:clamp(67px,10vw,148px); line-height:.85; letter-spacing:-.055em; }
.hero h1.hero-title-statement { max-width:980px; font-size:clamp(58px,8.2vw,120px); line-height:.9; }
.hero-intro { max-width:800px; margin:35px 0 18px; font:clamp(24px,3vw,43px)/1.15 "DM Serif Display",serif; }
.hero-small { max-width:570px; color:var(--muted); font-size:13px; line-height:1.7; }
.languages { margin:22px 0 0; color:var(--ink); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.languages span { margin-right:12px; color:var(--accent); font-weight:600; }
.hero-actions { margin-top:35px; display:flex; align-items:center; gap:28px; }
.button { padding:14px 18px; display:inline-flex; align-items:center; gap:20px; font-size:10px; font-weight:600; }
.button.dark { color:white; background:var(--ink); }.button svg { width:15px; }
.text-link { padding-bottom:5px; border-bottom:1px solid; font-size:10px; }
.hero-note { justify-self:end; color:var(--muted); font-size:9px; line-height:1.6; text-align:right; text-transform:uppercase; letter-spacing:.1em; }
.featured-video { padding:0 clamp(24px,7vw,108px) 110px; }
.landscape-placeholder { aspect-ratio:16/8; position:relative; overflow:hidden; background:#c7b7a5; }
.featured-player video { width:100%; height:100%; display:block; object-fit:cover; background:var(--ink); }
.intro-play { position:absolute; z-index:3; left:50%; top:50%; width:72px; height:72px; border:0; border-radius:50%; display:grid; place-items:center; color:var(--ink); background:rgba(248,250,251,.92); transform:translate(-50%,-50%); transition:.2s; }
.intro-play.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.intro-play:hover { color:white; background:var(--accent); transform:translate(-50%,-50%) scale(1.05); }
.video-scene { position:absolute; inset:0; background:linear-gradient(115deg,#b9aa99 0 44%,#dfc6aa 44% 70%,#a69888 70%); }
.video-scene span { position:absolute; width:24%; height:66%; left:39%; bottom:-8%; border-radius:48% 48% 8% 8%; background:#776e64; }
.media-placeholder::after { content:""; position:absolute; inset:0; opacity:0; pointer-events:none; background:rgba(34,33,31,.15); transition:.25s; }
.media-placeholder:hover::after { opacity:1; }
.play { position:absolute; z-index:2; left:50%; top:50%; width:74px; height:74px; border:0; border-radius:50%; display:grid; place-items:center; color:var(--ink); background:rgba(251,248,242,.92); transform:translate(-50%,-50%); transition:.25s; }
.play:hover { color:white; background:var(--accent); transform:translate(-50%,-50%) scale(1.06); }
.playing .play { transform:translate(-50%,-50%) scale(.85); opacity:.65; }
.replace-label { position:absolute; z-index:2; left:18px; bottom:16px; padding:7px 9px; color:white; background:rgba(34,33,31,.58); font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.brands { padding:70px clamp(24px,7vw,108px) 82px; text-align:center; background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-row { max-width:800px; margin:38px auto 0; display:grid; grid-template-columns:repeat(5,minmax(100px,130px)); justify-content:center; gap:26px; }
.brand-logo,.brand-more { aspect-ratio:1; overflow:hidden; border:1px solid rgba(85,117,141,.16); border-radius:50%; background:#e9edf0; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.brand-logo { display:grid; place-items:center; }
.brand-logo img { width:100%; height:100%; display:block; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .3s ease,opacity .3s ease,transform .3s ease; }
.brand-logo:hover,.brand-more:hover { border-color:rgba(85,117,141,.42); box-shadow:0 12px 30px rgba(42,58,70,.1); transform:translateY(-4px); }
.brand-logo:hover img { filter:none; opacity:1; transform:scale(1.025); }
.brand-more { display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--accent); font:15px "DM Serif Display",serif; letter-spacing:.02em; }
.brand-more span { margin-bottom:-5px; font-size:41px; line-height:1; }
.section { padding:125px clamp(24px,7vw,108px); }
.section-heading { display:grid; grid-template-columns:2fr 1fr; align-items:end; gap:90px; margin-bottom:75px; }
.section-heading h2,.services-title h2 { margin:18px 0 0; font-size:clamp(48px,6vw,87px); line-height:.95; letter-spacing:-.04em; }
.section-heading h2 em,.services-title h2 em { color:var(--accent); font-weight:400; }
.section-heading > p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:70px 2.5vw; }
.vertical-video { aspect-ratio:9/16; position:relative; overflow:hidden; }
.ugc-video { width:100%; height:100%; display:block; object-fit:cover; background:var(--ink); }
.ugc-play.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.peach { background:#d5ad95; }.sage { background:#9fac99; }.sand { background:#d7c7ac; }.blue { background:#9db2bc; }.rose { background:#c8a5a2; }.stone { background:#aaa79f; }
.phone-scene { position:absolute; inset:0; }
.phone-scene i { position:absolute; width:52%; height:55%; left:24%; bottom:0; border-radius:48% 48% 0 0; background:rgba(63,57,51,.48); }
.phone-scene b { position:absolute; width:30%; aspect-ratio:1; right:8%; top:12%; border-radius:50%; background:rgba(248,230,196,.55); }
.play.small { width:55px; height:55px; }.play.small svg { width:17px; }
.media-number { display:block; margin-top:12px; color:var(--accent); font-size:8px; letter-spacing:.12em; }
.marquee { padding:26px 0; overflow:hidden; color:var(--paper); background:var(--accent); white-space:nowrap; }
.marquee-track { display:flex; width:max-content; animation:scroll 18s linear infinite; }
.marquee span { flex:none; font:24px "DM Serif Display",serif; letter-spacing:.04em; }
@keyframes scroll { to { transform:translateX(-50%); } }
.photos { background:var(--cream); }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.photo-card { overflow:hidden; background:#e8ebed; }
.photo-card img { width:100%; height:auto; display:block; transition:transform .45s ease; }
.photo-card:hover img { transform:scale(1.015); }
.modeling-video { width:100%; height:100%; display:block; object-fit:cover; }
.modeling-play.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.photo-placeholder { min-height:430px; position:relative; overflow:hidden; display:grid; place-items:end start; }
.photo-placeholder > span { z-index:2; margin:15px; padding:7px 9px; color:white; background:rgba(34,33,31,.55); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.about { padding:125px clamp(24px,10vw,150px); display:grid; grid-template-columns:1fr 1.2fr; gap:9vw; align-items:center; color:var(--paper); background:var(--ink); }
.about-portrait { aspect-ratio:1; min-height:0; position:relative; overflow:hidden; background:#111; }
.about-portrait .modeling-video { object-position:center bottom; }
.about-copy h2 { margin:20px 0 45px; font-size:clamp(43px,5vw,72px); line-height:1; }
.about-copy > p:not(.eyebrow) { color:#bdb7ae; font-size:12px; line-height:1.75; }
.numbers { margin-top:55px; padding-top:30px; border-top:1px solid #4a4844; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.numbers div { display:grid; gap:7px; }.numbers strong { color:#8caec4; font:35px "DM Serif Display",serif; }.numbers span { color:#aaaeb3; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.services { display:grid; grid-template-columns:1fr 1.7fr; gap:10vw; }
.service-list article { min-height:140px; padding:28px 0; display:grid; grid-template-columns:45px 1fr 1.2fr; gap:24px; align-items:center; border-top:1px solid var(--line); }
.service-list article:last-child { border-bottom:1px solid var(--line); }
.service-list span { color:var(--accent); font-size:8px; }.service-list h3 { margin:0; font-size:27px; }.service-list p { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }
.process { padding:110px clamp(24px,7vw,108px); background:#ded4c6; }
.process > h2 { margin:20px 0 65px; font-size:clamp(48px,6vw,82px); line-height:.95; }
.process > div { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #bfb5a7; }
.process article { padding:25px 5vw 0 0; }.process article span { color:var(--accent); font-size:9px; }.process h3 { margin:45px 0 12px; font-size:25px; }.process article p { color:var(--muted); font-size:11px; line-height:1.6; }
.contact { padding:100px clamp(24px,7vw,108px) 30px; color:var(--paper); background:var(--accent); }
.availability { float:right; display:flex; align-items:center; gap:8px; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.availability i { width:7px; height:7px; border-radius:50%; background:#4c8a58; box-shadow:0 0 0 4px rgba(76,138,88,.2); }
.contact .eyebrow { color:#d9e6ee; }.contact h2 { margin:70px 0 65px; font-size:clamp(51px,7.5vw,112px); line-height:.93; letter-spacing:-.045em; }
.contact h2 em { color:#203f56; font-weight:400; }
.contact > a { padding:20px 0; border-top:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5); display:flex; justify-content:space-between; align-items:center; font:clamp(21px,2.5vw,37px) "DM Serif Display",serif; }
.contact > a svg { width:28px; height:28px; }
footer { margin-top:90px; padding-top:25px; border-top:1px solid rgba(255,255,255,.3); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
footer > span,footer p { font-size:8px; text-transform:uppercase; letter-spacing:.1em; }footer div { display:flex; gap:28px; }footer p { justify-self:end; margin:0; }
.instagram-link { width:40px; height:40px; border:1px solid rgba(255,255,255,.55); border-radius:50%; display:grid; place-items:center; transition:.2s; }
.instagram-link svg { width:18px; height:18px; }
.instagram-link:hover { color:var(--accent); background:var(--paper); border-color:var(--paper); transform:translateY(-2px); }
.reveal { animation:rise .8s both; }.delay { animation-delay:.15s; }.observe { opacity:0; transform:translateY(20px); transition:.65s; }.observe.visible { opacity:1; transform:none; }
@keyframes rise { from { opacity:0; transform:translateY(15px); } }

@media (max-width:900px) {
  .header { grid-template-columns:1fr auto; }.header nav,.header-cta { display:none; }.menu-open { display:block; }
  .hero { grid-template-columns:1fr; }.hero-note { margin-top:40px; justify-self:start; text-align:left; }
  .brand-row { grid-template-columns:repeat(3,minmax(100px,140px)); }.video-grid { grid-template-columns:repeat(2,1fr); }
  .section-heading { grid-template-columns:1fr; gap:25px; }.section-heading > p { max-width:500px; }
  .about { grid-template-columns:1fr; }.about-portrait { width:70%; min-height:0; }
  .services { grid-template-columns:1fr; gap:60px; }
}
@media (max-width:620px) {
  .header { height:70px; padding:0 20px; }
  .hero { min-height:auto; padding:75px 22px 65px; }.hero h1 { font-size:68px; }.hero-intro { font-size:27px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .featured-video { padding:0 0 75px; }.landscape-placeholder { aspect-ratio:16/10; }
  .play { width:58px; height:58px; }.brands { padding:55px 22px 60px; text-align:center; }.brand-row { width:auto; margin-top:30px; grid-template-columns:repeat(2,minmax(100px,125px)); gap:18px; }
  .section { padding:85px 22px; }.section-heading { margin-bottom:50px; }.section-heading h2,.services-title h2 { font-size:48px; }
  .video-grid { grid-template-columns:repeat(2,1fr); gap:48px 12px; }
  .photo-grid { grid-template-columns:1fr 1fr; gap:10px; }.photo-placeholder { min-height:290px; }
  .about { padding:85px 22px; }.about-portrait { width:100%; min-height:0; }.about-copy h2 { font-size:44px; }.numbers strong { font-size:28px; }
  .service-list article { grid-template-columns:30px 1fr; }.service-list p { grid-column:2; }
  .process { padding:85px 22px; }.process > div { grid-template-columns:1fr; }.process article { padding-bottom:28px; border-bottom:1px solid #c5bbae; }.process h3 { margin:20px 0 10px; }
  .contact { padding:75px 22px 25px; }.availability { float:none; margin-bottom:35px; }.contact h2 { margin:55px 0; font-size:55px; }
  footer { grid-template-columns:1fr; gap:28px; }footer p { justify-self:start; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }