
:root{
  --bg:#f8f8f6;
  --text:#111111;
  --muted:#5e5e5e;
  --line:#dbdbd8;
  --accent:#1d1d1d;
  --maxw:1160px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

a{ color:var(--text); text-decoration:none; }
a:hover,
a:focus-visible{ text-decoration:underline; }

.inner{
  width:min(100% - 2rem, var(--maxw));
  margin-inline:auto;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:rgba(248,248,246,.95);
  backdrop-filter: blur(4px);
}

.site-header .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.44rem 0;
}

.brand{
  font-weight:700;
  letter-spacing:.04em;
  font-size:.98rem;
  white-space:nowrap;
}

nav{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  align-items:center;
}

nav a{
  font-size:.95rem;
  padding:.16rem .2rem;
  border-bottom:2px solid transparent;
}

nav a.active{
  border-bottom-color:var(--accent);
  font-weight:700;
}

/* Shared page shells */
.page{
  padding:1.35rem 0 1.8rem;
}

.page h1{
  margin:.05rem 0 .5rem;
  font-size:clamp(1.8rem,3.4vw,2.5rem);
  line-height:1.08;
}

.lead{
  margin:0 0 .85rem;
  color:#2e2e2e;
  max-width:72ch;
}

/* Home */
.home-main{
  display:flex;
  align-items:flex-end;
  gap:1.15rem;
  padding:1.05rem 0 .25rem;
}

.home-copy{
  flex:0 0 52%;
  max-width:52%;
  min-width:0;
}

.home-photo{
  flex:0 0 48%;
  max-width:48%;
  min-width:0;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}

.home-photo img{
  width:min(112%, 980px);
  max-width:980px;
  height:auto;
  display:block;
}

.home-copy h1{
  margin:0 0 .42rem;
  font-size:clamp(1.95rem,3.15vw,2.88rem);
  line-height:1.06;
}

.subhead{
  margin:0 0 .45rem;
  font-size:clamp(1rem,2vw,1.18rem);
  font-weight:600;
}

.muted{
  color:var(--muted);
  font-weight:500;
}

.tagline{
  margin:0 0 .82rem;
  color:var(--muted);
}

.intro{
  margin:0 0 .92rem;
  max-width:68ch;
}

.agency-blocks{
  display:grid;
  gap:.72rem;
  margin:.6rem 0 .72rem;
}

.agency h2{
  margin:0 0 .2rem;
  font-size:1rem;
}

.agency p{
  margin:0;
  color:#242424;
}

.social-row{
  margin:.28rem 0 0;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:1.03rem;
  line-height:1.1;
}

.ig-logo{
  width:1em;
  height:1em;
  object-fit:contain;
  display:inline-block;
  transform:translateY(1px);
}

/* VO */
.reel-list{
  display:grid;
  gap:.85rem;
  margin-top:.85rem;
}

.reel-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:.92rem;
  background:#fcfcfb;
}

.reel-card h2{
  margin:0 0 .45rem;
  font-size:1.04rem;
}

audio{
  width:100%;
}

/* Stand Up */
.set-section{
  margin-top:.95rem;
}

.yt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:.9rem;
  margin-top:.82rem;
}

.yt-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:.84rem;
  background:#fcfcfb;
}

.video-title{
  margin:0 0 .52rem;
  font-size:1.03rem;
  line-height:1.25;
  font-weight:700;
}

.yt-thumb{
  position:relative;
  display:block;
  border-radius:10px;
  overflow:hidden;
  line-height:0;
}

.yt-thumb img{
  width:100%;
  height:auto;
  display:block;
}

.yt-play{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%, -50%);
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(0,0,0,.66);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:22px;
}

.btn-link{
  display:inline-block;
  margin-top:.56rem;
  padding:.42rem .68rem;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.btn-link:hover{
  text-decoration:none;
}

/* About */
.about-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:1.28rem;
  align-items:start;
}

.about-copy{ min-width:0; }

.about-side{
  display:flex;
  justify-content:flex-end;
}

.about-photo-wrap{
  width:100%;
  margin:0;
}

.about-figure{
  margin:0;
  width:100%;
  display:grid;
  justify-items:end;
}

.about-photo{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
}

.about-caption{
  margin-top:.4rem;
  max-width:420px;
  font-size:.88rem;
  line-height:1.34;
  color:var(--muted);
  text-align:right;
  font-style:italic;
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.85rem;
  margin-top:.82rem;
}

.contact-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:.92rem;
  background:#fcfcfb;
}

.contact-card h2{
  margin:0 0 .38rem;
  font-size:1.02rem;
}

/* Minimal footer */
.site-footer{
  border-top:1px solid var(--line);
}

.site-footer .inner{
  padding:.09rem 0 .18rem;
}

.site-footer p{
  margin:0;
  line-height:1.1;
  font-size:.76rem;
  color:var(--muted);
}

/* Responsive */
@media (max-width: 1080px){
  .home-photo img{
    width:min(100%, 820px);
    max-width:820px;
  }
}

@media (max-width: 980px){
  .about-layout{
    grid-template-columns:1fr;
    gap:.9rem;
  }
  .about-side{
    justify-content:center;
  }
  .about-figure{
    justify-items:center;
  }
  .about-caption{
    text-align:center;
  }
}

@media (max-width: 860px){
  .site-header .inner{
    align-items:flex-start;
    flex-wrap:wrap;
    row-gap:.28rem;
  }

  nav{
    width:100%;
    gap:.62rem .9rem;
  }

  .home-main{
    flex-direction:column;
    align-items:stretch;
    gap:.62rem;
    padding-top:.82rem;
    padding-bottom:.3rem;
  }

  .home-copy,
  .home-photo{
    max-width:100%;
    flex-basis:auto;
  }

  .home-photo{
    justify-content:center;
    align-items:center;
  }

  .home-photo img{
    width:min(100%, 760px);
    max-width:760px;
    margin-inline:auto;
  }
}

@media (max-width: 600px){
  .inner{
    width:min(100% - 1.25rem, var(--maxw));
  }

  nav a{
    font-size:.9rem;
  }

  .home-copy h1{
    font-size:clamp(1.7rem,8vw,2.2rem);
  }

  .page{
    padding:1.1rem 0 1.35rem;
  }

  .yt-grid{
    grid-template-columns:1fr;
  }

  .about-photo{
    max-width:360px;
  }

  .about-caption{
    max-width:360px;
  }
}


/* --- v30 layout refinements --- */

/* Remove footer entirely */
.site-footer{
  display: none !important;
}

/* Home: image on right and flush to bottom of viewport */
.home-page{
  min-height: 100vh;
}
.home-page .home-main{
  min-height: calc(100vh - 58px) !important;
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
  align-items: flex-end !important;
}
.home-page .home-copy{
  align-self: center;
}
.home-page .home-photo{
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
.home-page .home-photo img{
  margin-bottom: 0 !important;
  display: block;
}

/* About page: less cramped */
.about-page .page{
  padding-top: 1.7rem !important;
  padding-bottom: 2.15rem !important;
}
.about-page .about-layout{
  gap: 1.9rem !important;
  align-items: start !important;
}
.about-page .about-copy{
  padding-right: .25rem;
}
.about-page .about-copy p{
  margin: 0 0 .95rem !important;
  line-height: 1.66 !important;
}
.about-page .about-photo-wrap{
  margin-top: .2rem !important;
}
.about-page .about-caption{
  margin-top: .55rem !important;
  font-size: .9rem !important;
}

@media (max-width: 980px){
  .home-page .home-main{
    min-height: auto !important;
    padding-bottom: .25rem !important;
  }
  .about-page .page{
    padding-top: 1.25rem !important;
    padding-bottom: 1.6rem !important;
  }
  .about-page .about-layout{
    gap: 1.05rem !important;
  }
}



/* --- v31: force right-side hero photo, bigger with side-crop, bottom flush --- */
.home-page{
  min-height: 100vh !important;
}

.home-page .home-main{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 1rem !important;
  min-height: calc(100vh - 56px) !important;
  padding: 0.9rem 0 0 !important;
  margin-bottom: 0 !important;
}

.home-page .home-copy{
  flex: 0 0 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  align-self: center !important;
}

.home-page .home-photo{
  flex: 0 0 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  overflow: hidden !important; /* crops left/right when image is oversized */
  margin: 0 !important;
  padding: 0 !important;
}

.home-page .home-photo img{
  width: 138% !important;   /* bigger */
  max-width: none !important;
  height: auto !important;
  display: block !important;
  margin-right: -14% !important; /* keeps crop on sides while staying right */
  margin-bottom: 0 !important;   /* flush with bottom */
}

/* Keep image right + large as viewport narrows */
@media (max-width: 1024px){
  .home-page .home-main{
    min-height: calc(100vh - 56px) !important;
  }
  .home-page .home-photo img{
    width: 150% !important;
    margin-right: -22% !important;
  }
}

@media (max-width: 860px){
  .home-page .home-main{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 0.75rem !important;
    min-height: calc(100vh - 56px) !important;
    padding-top: 0.75rem !important;
  }

  .home-page .home-copy{
    flex-basis: 50% !important;
    max-width: 50% !important;
  }

  .home-page .home-photo{
    flex-basis: 50% !important;
    max-width: 50% !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }

  .home-page .home-photo img{
    width: 160% !important;
    margin-right: -30% !important;
  }
}

@media (max-width: 600px){
  .home-page .home-main{
    display: flex !important;
    flex-direction: row !important;   /* still right, not below */
    align-items: flex-end !important;
    min-height: calc(100vh - 54px) !important;
    gap: 0.55rem !important;
  }

  .home-page .home-copy{
    flex-basis: 52% !important;
    max-width: 52% !important;
  }

  .home-page .home-photo{
    flex-basis: 48% !important;
    max-width: 48% !important;
  }

  .home-page .home-photo img{
    width: 172% !important;
    margin-right: -36% !important;
  }

  .home-page .home-copy h1{
    font-size: clamp(1.45rem, 7vw, 1.95rem) !important;
    line-height: 1.05 !important;
  }

  .home-page .subhead{
    font-size: clamp(.92rem, 3.8vw, 1.02rem) !important;
  }

  .home-page .tagline,
  .home-page .intro{
    font-size: 0.94rem !important;
  }
}



/* --- v32: XL crop pass for home hero image --- */
.home-page .home-photo img{
  width: 150% !important;      /* up from 138% */
  margin-right: -22% !important;
}

@media (max-width: 1024px){
  .home-page .home-photo img{
    width: 164% !important;    /* up from 150% */
    margin-right: -30% !important;
  }
}

@media (max-width: 860px){
  .home-page .home-photo img{
    width: 174% !important;    /* up from 160% */
    margin-right: -36% !important;
  }
}

@media (max-width: 600px){
  .home-page .home-photo img{
    width: 186% !important;    /* up from 172% */
    margin-right: -42% !important;
  }
}



/* --- v34: reduce top white space on home (based on v32) --- */
.home-page .home-main{
  padding-top: 0.42rem !important;
}

.home-page .home-copy{
  align-self: flex-start !important;
  padding-top: 0.1rem !important;
}

@media (max-width: 860px){
  .home-page .home-main{
    padding-top: 0.48rem !important;
  }
}

@media (max-width: 600px){
  .home-page .home-main{
    padding-top: 0.42rem !important;
  }
}



/* --- v35: slightly more top white space on home --- */
.home-page .home-main{
  padding-top: 0.58rem !important;
}

.home-page .home-copy{
  padding-top: 0.16rem !important;
}

@media (max-width: 860px){
  .home-page .home-main{
    padding-top: 0.56rem !important;
  }
}

@media (max-width: 600px){
  .home-page .home-main{
    padding-top: 0.50rem !important;
  }
}



/* --- v36: final micro nudge (+5px top spacing on home) --- */
.home-page .home-main{
  padding-top: calc(0.58rem + 5px) !important;
}

@media (max-width: 860px){
  .home-page .home-main{
    padding-top: calc(0.56rem + 5px) !important;
  }
}

@media (max-width: 600px){
  .home-page .home-main{
    padding-top: calc(0.50rem + 5px) !important;
  }
}


/* --- v37: about photo above bio and centered --- */
.about-page .about-layout{
  display: block !important;
}

.about-page .about-photo-wrap.about-photo-top{
  width: 100% !important;
  margin: 0.55rem 0 1rem !important;
  display: flex !important;
  justify-content: center !important;
}

.about-page .about-figure{
  justify-items: center !important;
}

.about-page .about-caption{
  text-align: center !important;
  max-width: 440px !important;
}

.about-page .bio{
  max-width: 78ch;
  margin: 0 auto;
}
