@font-face {
  font-family: "NHaasGroteskDSPro-65Md";
  src: url("fonts/NHaasGroteskDSPro-65Md.eot?#iefix") format("embedded-opentype"),
       url("fonts/NHaasGroteskDSPro-65Md.woff2") format("woff2"),
       url("fonts/NHaasGroteskDSPro-65Md.woff") format("woff"),
       url("fonts/NHaasGroteskDSPro-65Md.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Reset */
a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
a{text-decoration:none;color:inherit}
body{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

/* Base */
html{
  width:100%;height:100%;position:relative;
  font-size:10px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html.oh{overflow:hidden}
body{
  font-family:"NHaasGroteskDSPro-65Md","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:10px;
  color:#000;
  background:#fff;
  width:100%;height:100%;position:relative;
}
body.oh{overflow:hidden}

/* Typography */
h1{font-size:3.6rem;line-height:1;font-weight:500}
h1.smaller{font-size:2.8rem}
h2{font-size:3.6rem;line-height:1;font-weight:500}
h3{font-size:6.4rem;line-height:1.25;font-weight:500}
h4{font-size:3.2rem;line-height:1.25;font-weight:500}
h5{font-size:2.4rem;line-height:1.2;font-weight:500}
p{font-size:1.5rem;line-height:1.6}
p strong{font-weight:500;font-size:1.44rem}
strong{font-weight:500}

/* Layout */
.container{position:relative;min-height:100vh;overflow:hidden}
.content-wrapper{position:relative;padding:80px 16px 16px}
.bg{background-size:cover!important;background-position:center center!important}
.image{position:absolute;width:100%;height:100%;top:0;left:0}

/* Utilities */
.ta-c{text-align:center}
.hide-on-d{display:block}
.hide-on-m{display:none}

/* Fade-in animation */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Header */
header{
  position:fixed;top:0;left:0;
  width:100%;padding:8px 16px;
  background:white;
  z-index:99;
  display:flex;align-items:center;
}
header .logo{font-size:1.8rem;font-weight:500}
.hero-tagline{
  position:fixed;bottom:16px;left:16px;
  font-size:1.8rem;font-weight:500;
  z-index:10;pointer-events:none;
  line-height:1.3;
}
.hero-tagline .tagline-link{
  pointer-events:all;
  color:inherit;
  text-decoration:underline;
  text-decoration-color:#000;
  text-underline-offset:3px;
}

/* Menu Button */
.menu-button-wrapper{
  position:fixed;right:0;top:0;
  width:70px;height:70px;
  z-index:101;cursor:pointer;
}
.menu-button-wrapper .menu-button{
  position:absolute;right:16px;
  width:18px;height:10px;
  top:20px;
  transition:all 0.26s ease-out;
}
.menu-button-wrapper .menu-button .line{
  position:absolute;right:0;
  width:100%;height:2px;
  background:black;
  transition:background 0.26s ease-out;
}
.menu-button-wrapper .menu-button .line.one{top:0}
.menu-button-wrapper .menu-button .line.two{top:7px}
.menu-button-wrapper.rotate .menu-button{transform:rotate(90deg)}
.menu-button-wrapper.rotate .menu-button .line{background:white}

/* Menu Overlay */
.menu{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  z-index:100;
  background:black;
  color:white;
  padding:64px 16px 32px 32px;
  display:flex;
  transform-origin:top center;
  transform:scaleY(0);
  transition:transform 0.6s cubic-bezier(0.645,0.045,0.355,1);
}
.menu.show{transform:scaleY(1)}
.menu .inner-wrapper{
  position:relative;width:100%;
  transform:translateY(-30px);
  visibility:hidden;opacity:0;
  transition:all 0.26s ease-out;
}
.menu .inner-wrapper.up{transform:translateY(0);visibility:visible;opacity:1}
.menu h2{font-size:3.6rem;line-height:1;font-weight:500}
.menu .items{font-size:2rem;font-weight:500;margin-top:24px}
.menu .items li{margin-top:14px}
.menu .items li a{transition:opacity 0.2s}
.menu .items li a:hover{opacity:0.5}
.menu p{margin-top:48px;line-height:1.8;font-size:1.44rem}
.menu p a{border-bottom:1px solid rgba(255,255,255,0.5)}
.menu .instagram-link{
  position:absolute;right:32px;bottom:32px;
  font-size:1.8rem;font-weight:500;
}
.menu .instagram-link a:hover{opacity:0.5}

/* Dark overlay */
.dark{
  display:none;position:fixed;top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.2);
  z-index:98;
}
.dark.active{display:block}

/* Hero (Homepage) */
.hero{
  position:relative;
  height:100vh;
  padding:16px;
  max-height:-webkit-fill-available;
}
.hero .image{
  top:38px;
  height:calc(100% - 148px);
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  cursor:pointer;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.hero .image.hero-loaded{
  opacity:1;
  transform:scale(1);
}
.hero-placeholder{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:1.44rem;
  color:#ccc;
  text-align:center;
  pointer-events:none;
}

/* Work Page */
.of-work .content-wrapper{padding-top:72px}
.views{
  position:absolute;right:16px;top:88px;
  font-size:1.44rem;
  display:flex;
}
.views .view{margin-left:16px;padding-bottom:4px;cursor:pointer;font-size:1.3rem}
.views .view:hover{opacity:0.5}
.views .view.active{border-bottom:1px solid}
.projects{position:relative;width:calc(100% + 32px);margin:32px -16px 16px}
.projects .project{position:relative;margin:0 0 32px}
.projects .project a{display:block}
.projects .project img{width:100%;display:block;-webkit-touch-callout:none;user-select:none}
.projects .project .project-thumb{
  width:100%;
  padding-bottom:125%;
  background:#f0f0f0;
  position:relative;
  overflow:hidden;
}
.projects .project .project-thumb img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
}
.projects .project h3{margin:14px 16px 0;font-size:1.44rem;font-weight:500}
.projects .project .project-type{margin:4px 16px 0;font-size:1.2rem;color:#888}

/* List view */
.projects[data-view=list] .project{margin:0 0 8px}
.projects[data-view=list] .project .project-thumb{display:none}
.projects[data-view=list] .project h3{margin:0 16px;font-size:2.2rem}
.projects[data-view=list] .project .project-type{margin:2px 16px 6px}

/* Project Detail Page */
.of-project .content-wrapper{padding-top:72px}
.project-detail-header{margin-bottom:32px}
.project-detail-header h1{font-size:2.8rem;line-height:1.1;font-weight:500}
.project-detail-header .project-client{font-size:1.3rem;color:#888;margin-top:6px}
.credits{margin-top:24px}
.credits .credit-row{display:flex;margin-top:8px;font-size:1.3rem;line-height:1.5}
.credits .credit-label{color:#888;min-width:140px}
.credits .credit-value{color:#000}
.project-description{margin-top:28px;font-size:1.5rem;line-height:1.7;max-width:480px}
.project-images{margin-top:40px}
.project-images .project-image{margin-bottom:12px;background:#f0f0f0}
.project-images .project-image img{width:100%;display:block;-webkit-touch-callout:none;user-select:none}
.project-images .project-video{display:none;margin-bottom:12px;position:relative}
.project-images .project-video.loaded{display:block}
.project-images .project-video video{width:100%;display:block}

/* ── Custom video controls ────────────────────────────────────── */
.video-controls{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;gap:20px;
  padding:10px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,0.55));
}
.video-ctrl-btn{
  background:none;border:none;padding:0;
  color:#fff;cursor:pointer;
  font-family:"NHaasGroteskDSPro-65Md","Helvetica Neue",sans-serif;
  font-size:1rem;letter-spacing:0.12em;
  white-space:nowrap;line-height:1;
}
.video-ctrl-btn:hover{opacity:0.7}
.video-timecode{
  color:#fff;
  font-family:"NHaasGroteskDSPro-65Md","Helvetica Neue",sans-serif;
  font-size:1rem;letter-spacing:0.06em;
  white-space:nowrap;
}
.video-progress-wrap{
  flex-shrink:0;width:300px;
  margin-left:auto;
  display:flex;align-items:center;
}
.video-progress{
  width:100%;height:2px;
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,0.3);
  cursor:pointer;outline:none;border:none;
}
.video-progress::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:8px;height:8px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
}
.video-progress::-moz-range-thumb{
  width:8px;height:8px;
  border-radius:50%;
  background:#fff;
  border:none;cursor:pointer;
}
.project-images .img-placeholder{
  width:100%;padding-bottom:125%;
  background:#f0f0f0;
  position:relative;
}
.project-images .img-placeholder::after{
  content:'Add image here';
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:1.2rem;color:#bbb;
}
.back-link{display:inline-block;font-size:1.3rem;color:#888;margin-bottom:24px}
.back-link:hover{color:#000}
.back-link::before{content:'← '}

/* Info Page */
.of-info .content-wrapper{padding-top:72px}
.info-name{font-size:4rem;font-weight:500;line-height:1;margin-bottom:32px}
.info-bio{font-size:1.5rem;line-height:1.7;max-width:480px}
.info-bio p{margin-top:18px}
.info-bio p.first{margin-top:36px}
.info-bio p a{border-bottom:1px solid}
.info-contact{margin-top:48px;font-size:1.44rem;line-height:2}
.info-contact a{border-bottom:1px solid rgba(0,0,0,0.3)}
.info-contact a:hover{border-bottom-color:#000}

/* Elevate Page */
.of-elevate .content-wrapper{padding-top:72px}
.elevate-title{font-size:4rem;font-weight:500;line-height:1;margin-bottom:24px}
.elevate-intro{font-size:1.5rem;line-height:1.7;max-width:480px;color:#444}

/* Footer */
footer{position:relative;padding:16px;font-size:1.14rem;color:#888}

/* Desktop (1024px+) */
@media screen and (min-width:1024px){
  .hide-on-d{display:none}
  .hide-on-m{display:block}

  header{padding:24px 32px}
  header .logo{font-size:1.8rem}
  .hero-tagline{bottom:32px;left:32px}

  .menu-button-wrapper .menu-button{top:28px;right:32px}
  .menu{padding:128px 32px 32px 128px}
  .menu h2{font-size:5.4rem}
  .menu .items{font-size:2.4rem;margin-top:32px}
  .menu .instagram-link{font-size:1.8rem}

  .hero .image{top:74px;height:calc(100% - 148px)}

  /* Work page desktop */
  .of-work .content-wrapper{padding:84px 32px 32px}
  .content-wrapper.d-flex{display:flex;justify-content:space-between}
  .d-flex .utils{position:fixed;top:84px;left:32px;width:256px}
  .d-flex .utils h1{font-size:5.6rem;line-height:1}
  .d-flex .utils h1.smaller{font-size:4.4rem;line-height:1}
  .d-flex .utils .views{
    position:relative;top:auto;right:auto;
    display:block;margin-top:24px;
  }
  .d-flex .utils .views .view{margin-left:0;margin-top:12px;display:block;padding:0}
  .d-flex .utils .views .view:hover{border:0;opacity:0.5}
  .d-flex .utils .views .view.active{border:0}
  .d-flex .utils .views .view.active span{border-bottom:1px solid}
  .d-flex .projects{
    width:calc(100% - 288px);
    margin-left:288px;
    margin-top:0;
    display:flex;flex-wrap:wrap;
  }
  .d-flex .projects[data-view=grid-1]{display:block}
  .d-flex .projects[data-view=grid-1] .project{width:66%}
  .d-flex .projects[data-view=grid-2] .project{width:calc(100% / 2 - 24px)}
  .d-flex .projects[data-view=grid-3] .project{width:calc(100% / 3 - 24px)}
  .d-flex .projects[data-view=grid-4] .project{width:calc(100% / 4 - 24px)}
  .d-flex .projects[data-view=list]{display:block}
  .d-flex .projects[data-view=list] .project{width:100%;margin:0 0 0}
  .d-flex .projects[data-view=list] .project h3{font-size:3.6rem}
  .d-flex .projects .project{
    width:calc(100% / 2 - 24px);
    margin:0 12px 64px;
  }
  .d-flex .projects .project h3{margin:12px 0 0}
  .d-flex .projects .project .project-type{margin:4px 0 0}

  /* Project detail desktop */
  .of-project .content-wrapper{padding:84px 32px 32px}
  .of-project .content-wrapper.d-flex{display:flex;justify-content:center;align-items:flex-start}
  .of-project .d-flex .utils{position:fixed;top:84px;left:32px;width:256px}
  .of-project .d-flex .project-images{
    width:calc(50% - 144px);
    margin-left:0;
    margin-top:0;
  }
  .project-detail-header h1{font-size:3.6rem}
  .project-images .project-image{margin-bottom:8px}

  /* Info desktop */
  .of-info .content-wrapper{padding:84px 32px 32px}
  .info-name{font-size:5.6rem}

  /* Elevate desktop */
  .of-elevate .content-wrapper{padding:84px 32px 80px;max-width:760px}
  .elevate-title{font-size:5.6rem}
  .el-hero-headline{font-size:5.2rem}
  .el-h2{font-size:3rem}
  .el-qualifier-grid{grid-template-columns:1fr 1fr;gap:56px}
  .el-cta-title{font-size:3.6rem}
  .el-work-list li{font-size:2.4rem}
}

/* ============================================================
   ELEVATE — Sales Landing Page
   ============================================================ */

.of-elevate .content-wrapper{padding-bottom:80px}

.el-section{padding:56px 0;border-top:1px solid #e5e5e5}
.el-section-first{border-top:none;padding-top:28px}

/* Hero */
.el-hero-headline{font-size:3.2rem;line-height:1.1;font-weight:500;margin-bottom:20px}
.el-hero-sub{font-size:1.5rem;line-height:1.7;color:#333;margin-bottom:14px}
.el-hero-accent{font-size:1.5rem;font-weight:500;margin-bottom:36px}

/* Buttons */
.el-btn{
  display:inline-block;background:#000;color:#fff;
  font-family:inherit;font-size:1.3rem;font-weight:500;
  letter-spacing:0.05em;padding:14px 28px;
  border:1px solid #000;cursor:pointer;
  text-decoration:none;transition:background 0.2s,color 0.2s;
  -webkit-appearance:none;
}
.el-btn:hover{background:#fff;color:#000}

/* Section headings */
.el-h2{font-size:2.4rem;line-height:1.15;font-weight:500;margin-bottom:20px}
.el-h3{font-size:1.6rem;font-weight:500;margin-bottom:8px;line-height:1.3}

/* Body text */
.el-body{font-size:1.5rem;line-height:1.75;color:#222;margin-bottom:14px}
.el-body strong{font-weight:500;color:#000}
.el-body-sm{font-size:1.3rem;line-height:1.6;color:#666}

/* Lists */
.el-list{list-style:none;margin:16px 0 0}
.el-list li{font-size:1.5rem;line-height:1.6;padding:6px 0 6px 20px;position:relative;color:#222}
.el-list li::before{content:'—';position:absolute;left:0;color:#bbb}
.el-list li strong{font-weight:500}

/* Process steps */
.el-process{margin:8px 0 0}
.el-step{padding:18px 0;border-top:1px solid #e5e5e5}
.el-step:last-child{border-bottom:1px solid #e5e5e5}
.el-step-num{font-size:1.1rem;color:#aaa;font-weight:500;letter-spacing:0.06em;margin-bottom:5px}
.el-step-title{font-size:1.5rem;font-weight:500;margin-bottom:3px}
.el-step-desc{font-size:1.4rem;color:#777;line-height:1.5}

/* Outcomes */
.el-outcomes{margin:8px 0 0}
.el-outcome{padding:20px 0;border-top:1px solid #e5e5e5}
.el-outcome:last-child{border-bottom:none}
.el-outcome-title{font-size:1.5rem;font-weight:500;margin-bottom:6px}
.el-outcome-desc{font-size:1.4rem;color:#666;line-height:1.6}

/* Outcomes closing */
.el-closing{font-size:1.5rem;font-weight:500;margin-top:24px;line-height:1.5;color:#000}

/* Work list */
.el-work-list{list-style:none;margin:16px 0 0}
.el-work-list li{font-size:1.8rem;font-weight:500;padding:14px 0;border-bottom:1px solid #e5e5e5;letter-spacing:0.02em}
.el-work-list li:first-child{border-top:1px solid #e5e5e5}

/* Qualifier */
.el-qualifier-grid{display:grid;grid-template-columns:1fr;gap:36px;margin-top:24px}
.el-q-col-label{font-size:1.1rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#aaa;margin-bottom:14px}

/* Personal */
.el-personal{font-size:1.5rem;line-height:1.85;color:#333}
.el-personal p{margin-bottom:14px}
.el-personal strong{font-weight:500;color:#000}
.el-personal em{font-style:italic}
.el-attribution{font-size:1.4rem;color:#aaa;margin-top:28px}

/* Credentials */
.el-credential{font-size:1.4rem;color:#888;line-height:1.9;margin-top:20px}

/* FAQ */
.el-faq-item{border-top:1px solid #e5e5e5}
.el-faq-item:last-child{border-bottom:1px solid #e5e5e5}
.el-faq-q{
  width:100%;background:none;border:none;text-align:left;
  font-family:inherit;font-size:1.5rem;font-weight:500;
  padding:18px 36px 18px 0;cursor:pointer;position:relative;
  color:#000;line-height:1.4;
}
.el-faq-q::after{
  content:'+';position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  font-size:2.2rem;font-weight:300;color:#aaa;
  transition:transform 0.25s ease;line-height:1;
}
.el-faq-item.open .el-faq-q::after{transform:translateY(-50%) rotate(45deg)}
.el-faq-a{
  font-size:1.4rem;line-height:1.75;color:#555;
  overflow:hidden;max-height:0;
  transition:max-height 0.35s ease, padding-bottom 0.35s ease;
  padding-bottom:0;
}
.el-faq-item.open .el-faq-a{max-height:400px;padding-bottom:22px}
.el-faq-a strong{font-weight:500;color:#333}

/* CTA section */
.el-cta{padding:64px 0;text-align:left}
.el-cta-title{font-size:2.4rem;font-weight:500;margin-bottom:14px;line-height:1.15}
.el-cta-sub{font-size:1.5rem;color:#555;line-height:1.7;margin-bottom:6px}
.el-cta-limit{font-size:1.3rem;color:#aaa;margin-bottom:32px}

/* ── Intake Form Modal ──────────────────────────────────────── */
.intake-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
  padding:24px;
}
.intake-overlay.open{opacity:1;pointer-events:all}

.intake-panel{
  background:#fff;width:100%;max-width:460px;
  max-height:92vh;overflow-y:auto;
  padding:40px 32px 36px;position:relative;
  transform:translateY(14px);
  transition:transform 0.3s ease;
}
.intake-overlay.open .intake-panel{transform:translateY(0)}

.intake-close{
  position:absolute;top:18px;right:22px;
  background:none;border:none;
  font-size:2.6rem;font-weight:300;
  cursor:pointer;color:#bbb;
  line-height:1;padding:0;font-family:inherit;
}
.intake-close:hover{color:#000}

.intake-title{font-size:2rem;font-weight:500;margin-bottom:6px}
.intake-sub{font-size:1.3rem;color:#999;margin-bottom:32px;line-height:1.5}

.form-field{margin-bottom:28px}
.form-field>label{
  display:block;font-size:1.1rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  color:#aaa;margin-bottom:8px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"]{
  width:100%;border:none;border-bottom:1px solid #ddd;
  padding:8px 0;font-family:inherit;font-size:1.5rem;
  color:#000;background:transparent;outline:none;
  transition:border-color 0.2s;border-radius:0;
}
.form-field input:focus{border-bottom-color:#000}

/* Budget */
.budget-options{display:flex;flex-direction:column;gap:0;margin-top:4px}
.budget-option{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px solid #f0f0f0;
  cursor:pointer;
}
.budget-option:first-child{border-top:1px solid #f0f0f0}
.budget-option input[type="radio"]{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;flex-shrink:0;
  border:1px solid #ccc;border-radius:50%;
  position:relative;cursor:pointer;
  transition:border-color 0.2s;
}
.budget-option input[type="radio"]:checked{
  border-color:#000;
  background:#000;
  box-shadow:inset 0 0 0 3px #fff;
}
.budget-option span{font-size:1.44rem;color:#222}

/* Submit */
.intake-submit{width:100%;margin-top:12px}

/* Success */
.intake-success{text-align:center;padding:32px 0;display:none}
.intake-success.show{display:block}
.intake-form-body.hide{display:none}
.intake-success-mark{font-size:2.4rem;margin-bottom:16px}
.intake-success h3{font-size:2rem;font-weight:500;margin-bottom:10px}
.intake-success p{font-size:1.4rem;color:#888;line-height:1.6}