:root{
  --screen-grey:#EADCE8;
  --dim-deep:#1E223C;
  --cut-orange:#F07C4E;
  --tape-brown:#8A605E;
  --desk-silver:#8CACB2;
  --clip-card:#FCEEE8;
  --wave-azure:#367884;
  --leader-yellow:#D0CC4C;
  --seam:#B9C7C9;
  --rule-soft:#C6B4C2;
  --dim-soft:#3C4262;
  --card-line:#E6D2CB;
}

*{box-sizing:border-box;}

body{
  font-size:16px;
  margin:0;
  padding:0;
  background-color:var(--screen-grey);
  color:var(--dim-deep);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.62;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 0.5em 0;
  color:var(--dim-deep);
}

p{margin:0 0 1em 0;}
a{color:var(--wave-azure);text-decoration:none;}
a:hover{text-decoration:underline;text-decoration-color:var(--leader-yellow);text-decoration-thickness:3px;text-underline-offset:4px;}

.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}

/* ============ MEDIA RAIL REEL NAV ============ */
.mediarail{
  position:sticky;
  top:0;
  z-index:60;
  background-color:var(--dim-deep);
  border-bottom:4px solid var(--tape-brown);
}
.mediarail-inner{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:22px;
  min-height:64px;
}
.mediarail-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--screen-grey);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.mediarail-reeldot{
  width:14px;
  height:14px;
  border-radius:50%;
  background-color:var(--leader-yellow);
  box-shadow:0 0 0 3px var(--tape-brown);
  display:inline-block;
  flex:0 0 auto;
}
.mediarail-strip{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  gap:8px;
  position:relative;
}
.mediarail-segment{
  position:relative;
  flex:1 1 0;
  background-color:var(--screen-grey);
  color:var(--dim-deep);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:center;
  padding:9px 6px;
  border-top:3px dotted var(--desk-silver);
  border-bottom:3px dotted var(--desk-silver);
  border-left:3px dotted var(--desk-silver);
  border-right:3px dotted var(--desk-silver);
  text-decoration:none;
  transition:background-color 0.15s ease;
}
.mediarail-segment:hover{
  background-color:var(--clip-card);
  text-decoration:none;
}
.mediarail-segment.is-current{
  background-color:var(--cut-orange);
  color:var(--dim-deep);
}
.mediarail-framemark{
  width:3px;
  align-self:center;
  height:26px;
  background-color:var(--cut-orange);
  flex:0 0 auto;
}
.mediarail-toggle{
  display:none;
  background-color:var(--tape-brown);
  color:var(--clip-card);
  border:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.08em;
  padding:8px 14px;
  cursor:pointer;
}

/* ============ HERO ============ */
.clipdesk{
  padding:64px 0 56px 0;
  background-color:var(--screen-grey);
}
.clipdesk-grid{
  display:grid;
  grid-template-columns:55fr 45fr;
  gap:52px;
  align-items:center;
}
.clipdesk-kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--tape-brown);
  margin-bottom:18px;
  border-left:4px solid var(--cut-orange);
  padding-left:12px;
}
.clipdesk-title{
  font-size:3.15rem;
  line-height:1.06;
  letter-spacing:-0.025em;
  margin:0 0 22px 0;
}
.clipdesk-display{
  display:block;
  font-size:4.4rem;
  font-style:italic;
  font-weight:700;
  color:var(--cut-orange);
  line-height:0.98;
  letter-spacing:-0.035em;
}
.clipdesk-lede{
  font-size:1.08rem;
  max-width:34em;
  color:var(--dim-deep);
}
.clipdesk-lede a{
  font-weight:700;
  color:var(--wave-azure);
  text-decoration:underline;
  text-decoration-color:var(--desk-silver);
  text-underline-offset:3px;
}
.clipdesk-cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  margin-top:14px;
  background-color:var(--cut-orange);
  color:var(--dim-deep);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:0.92rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:16px 26px;
  text-decoration:none;
  border:0;
}
.clipdesk-cta:hover{
  background-color:var(--tape-brown);
  color:var(--clip-card);
  text-decoration:none;
}
.clipdesk-cta-arrow{font-size:1.15rem;line-height:1;}

/* timeline grid */
.clipdesk-timeline{
  background-color:var(--clip-card);
  border:2px solid var(--dim-deep);
  padding:24px 22px 26px 22px;
}
.clipdesk-timeline-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--dim-deep);
  border-bottom:2px solid var(--dim-deep);
  padding-bottom:10px;
  margin-bottom:18px;
}
.clipdesk-track-zone{
  position:relative;
}
.clipdesk-playhead{
  position:absolute;
  top:0;
  bottom:0;
  left:58%;
  width:3px;
  background-color:var(--cut-orange);
  z-index:3;
}
.clipdesk-playhead::before{
  content:"";
  position:absolute;
  top:-8px;
  left:-5px;
  width:13px;
  height:13px;
  background-color:var(--cut-orange);
  transform:rotate(45deg);
}
.clipdesk-track{
  position:relative;
  height:34px;
  background-color:var(--wave-azure);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 8px;
  z-index:2;
}
.clipdesk-clip{
  height:18px;
  background-color:var(--desk-silver);
  border:1px solid var(--dim-deep);
}
.clipdesk-clip.w1{width:22%;}
.clipdesk-clip.w2{width:12%;}
.clipdesk-clip.w3{width:31%;}
.clipdesk-clip.w4{width:8%;}
.clipdesk-caption{
  margin-top:16px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.74rem;
  letter-spacing:0.04em;
  color:var(--dim-deep);
  border-top:1px solid var(--card-line);
  padding-top:12px;
}

/* ============ STORYBOARD ROWS ============ */
.storydeck{
  padding:20px 0 64px 0;
}
.storydeck-intro{
  max-width:760px;
  margin-bottom:34px;
}
.storydeck-intro h2{
  font-size:2rem;
  line-height:1.15;
}
.storydeck-intro p{font-size:1.02rem;}
.storydeck-run{
  border-top:2px solid var(--wave-azure);
}
.storydeck-row{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:0;
  background-color:var(--clip-card);
  border-bottom:1px solid var(--wave-azure);
  position:relative;
}
.storydeck-sprocket{
  position:relative;
  background-color:var(--dim-deep);
  color:var(--card-line);
  padding:26px 20px;
  background-image:radial-gradient(circle, var(--desk-silver) 2.5px, transparent 3px);
  background-size:14px 14px;
  background-position:6px 8px;
  background-repeat:repeat-y;
}
.storydeck-sprocket::after{
  content:"";
  position:absolute;
  inset:0;
  background-color:var(--dim-deep);
  left:22px;
  z-index:0;
}
.storydeck-num{
  position:relative;
  z-index:1;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.72rem;
  letter-spacing:0.16em;
  color:var(--cut-orange);
  font-weight:700;
  display:block;
  margin-bottom:8px;
}
.storydeck-name{
  position:relative;
  z-index:1;
  font-size:1.12rem;
  line-height:1.25;
  margin:0;
  color:var(--screen-grey);
}
.storydeck-body{
  padding:26px 28px 26px 30px;
}
.storydeck-body p{
  margin:0;
  font-size:1rem;
  color:var(--dim-deep);
}
.storydeck-body a{
  font-weight:700;
  color:var(--wave-azure);
  text-decoration:underline;
  text-decoration-color:var(--desk-silver);
  text-underline-offset:3px;
}
.storydeck-slate{
  display:none;
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:12px;
  height:22px;
  background-color:var(--leader-yellow);
  clip-path:polygon(0 0, 100% 8%, 100% 92%, 0 100%);
}
.storydeck-row.is-alt .storydeck-slate{display:block;}
.storydeck-row.is-alt{border-bottom:1px solid var(--seam);}

/* ============ GATE MARK BAND ============ */
.gatemark{
  background-color:var(--wave-azure);
  position:relative;
  padding:62px 0 34px 0;
  text-align:center;
}
.gatemark-gate{
  position:absolute;
  top:-1px;
  left:50%;
  transform:translate(-50%,-52%);
  width:54px;
  height:54px;
  border-radius:50%;
  background-color:var(--dim-deep);
  border:5px solid var(--wave-azure);
}
.gatemark-gate::before,
.gatemark-gate::after{
  content:"";
  position:absolute;
  background-color:var(--clip-card);
}
.gatemark-gate::before{
  left:50%;
  top:12px;
  bottom:12px;
  width:4px;
  transform:translateX(-50%);
}
.gatemark-gate::after{
  top:50%;
  left:12px;
  right:12px;
  height:4px;
  transform:translateY(-50%);
}
.gatemark p{
  max-width:720px;
  margin:0 auto;
  color:var(--clip-card);
  font-size:1.1rem;
  line-height:1.6;
}
.gatemark strong{color:var(--clip-card);}

/* ============ PRESS KIT FOOTER ============ */
.presskit{
  background-color:var(--screen-grey);
  padding:0 0 44px 0;
}
.presskit-rule{
  position:relative;
  height:4px;
  background-color:var(--dim-deep);
  margin-bottom:30px;
}
.presskit-reel{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background-color:var(--tape-brown);
  border:4px solid var(--dim-deep);
}
.presskit-reel::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background-color:var(--screen-grey);
  border:2px solid var(--dim-deep);
}
.presskit-links{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--dim-deep);
  margin-bottom:26px;
}
.presskit-links a{
  color:var(--dim-deep);
  text-decoration:none;
}
.presskit-links a:hover{
  text-decoration:underline;
  text-decoration-color:var(--leader-yellow);
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}
.presskit-dot{color:var(--tape-brown);padding:0 8px;}
.presskit-brand{
  font-size:1.35rem;
  margin-bottom:8px;
}
.presskit-blurb{
  max-width:56em;
  font-size:0.98rem;
  margin-bottom:22px;
}
.presskit-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.82rem;
  color:var(--dim-deep);
  border-top:1px solid var(--rule-soft);
  padding-top:18px;
}
.presskit-meta span{white-space:nowrap;}
.presskit-year{
  display:inline-block;
  width:8px;
  height:8px;
  background-color:var(--leader-yellow);
  margin-right:8px;
  vertical-align:middle;
}

/* ============ SUB PAGE SHARED ============ */
.pagehead{
  padding:54px 0 34px 0;
  border-bottom:2px solid var(--wave-azure);
  margin-bottom:44px;
}
.pagehead h1{
  font-size:2.6rem;
  line-height:1.1;
  margin-bottom:14px;
}
.pagehead p{
  max-width:62em;
  font-size:1.05rem;
  color:var(--dim-deep);
}

/* services */
.serviceframe{
  background-color:var(--clip-card);
  border-left:6px solid var(--cut-orange);
  padding:28px 30px;
  margin-bottom:22px;
}
.serviceframe h2{
  font-size:1.4rem;
  margin-bottom:10px;
}
.serviceframe p{margin-bottom:0;}
.servicenote{
  background-color:var(--dim-deep);
  color:var(--clip-card);
  padding:30px 32px;
  margin:38px 0 26px 0;
}
.servicenote h2{
  color:var(--clip-card);
  font-size:1.5rem;
  margin-bottom:10px;
}
.servicenote ol{
  margin:0;
  padding-left:22px;
}
.servicenote li{
  margin-bottom:10px;
  color:var(--clip-card);
}
.servicenote li strong{color:var(--leader-yellow);}
.servicenote a{color:var(--clip-card);text-decoration:underline;text-decoration-color:var(--cut-orange);text-underline-offset:3px;}

.ctapanel{
  background-color:var(--cut-orange);
  color:var(--dim-deep);
  padding:30px 32px;
  margin-bottom:54px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.ctapanel p{
  margin:0;
  max-width:40em;
  font-weight:700;
}
.ctapanel a{
  background-color:var(--dim-deep);
  color:var(--clip-card);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:13px 22px;
  text-decoration:none;
}
.ctapanel a:hover{background-color:var(--wave-azure);text-decoration:none;}

/* contact */
.contactgrid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:44px;
  margin-bottom:56px;
}
.contactform{
  background-color:var(--clip-card);
  border:2px solid var(--dim-deep);
  padding:28px 28px 30px 28px;
}
.contactform h2{font-size:1.35rem;margin-bottom:16px;}
.fieldrow{margin-bottom:16px;}
.fieldrow label{
  display:block;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:6px;
  color:var(--dim-deep);
}
.fieldrow input,
.fieldrow textarea{
  width:100%;
  font-family:Georgia,"Times New Roman",serif;
  font-size:0.98rem;
  color:var(--dim-deep);
  background-color:var(--screen-grey);
  border:2px solid var(--desk-silver);
  padding:10px 12px;
}
.fieldrow input:focus,
.fieldrow textarea:focus{
  outline:3px solid var(--cut-orange);
  outline-offset:0;
  border-color:var(--dim-deep);
}
.fieldrow textarea{min-height:150px;resize:vertical;}
.formsubmit{
  background-color:var(--cut-orange);
  color:var(--dim-deep);
  border:0;
  cursor:pointer;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 26px;
}
.formsubmit:hover{background-color:var(--tape-brown);color:var(--clip-card);}
.formnote{
  margin-top:14px;
  font-size:0.85rem;
  color:var(--dim-deep);
  border-top:1px solid var(--card-line);
  padding-top:12px;
}
.contactside{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.contactblock{
  background-color:var(--wave-azure);
  color:var(--clip-card);
  padding:22px 24px;
}
.contactblock h3{
  color:var(--clip-card);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.contactblock p,
.contactblock a{
  color:var(--clip-card);
  margin:0;
  font-size:1rem;
}
.contactblock a{text-decoration:underline;text-decoration-color:var(--cut-orange);text-underline-offset:3px;}
.contactblock.silver{
  background-color:var(--desk-silver);
  color:var(--dim-deep);
}
.contactblock.silver h3,
.contactblock.silver p,
.contactblock.silver a{color:var(--dim-deep);}
.faqwrap{margin-bottom:54px;}
.faqwrap h2{font-size:1.7rem;margin-bottom:18px;}
.faqitem{
  border-top:1px solid var(--rule-soft);
  padding:16px 0;
}
.faqitem h3{
  font-size:1.05rem;
  margin-bottom:6px;
}
.faqitem p{margin:0;}
.faqitem:last-child{border-bottom:1px solid var(--rule-soft);}

/* ============ PLAIN TEXT RUNS ============ */
.prose-rows{
  margin-bottom:48px;
}
.prose-rows h2{
  font-size:1.55rem;
  margin-top:0;
  padding-bottom:8px;
  border-bottom:2px solid var(--wave-azure);
}
.prose-rows h3{
  font-size:1.1rem;
  margin-top:26px;
}
.prose-rows p{max-width:76em;}

/* ============ SOURCE STRIP ============ */
.sourceband{
  background-color:var(--tape-brown);
  padding:36px 0 40px 0;
  margin-bottom:0;
}
.sourceband h2{color:var(--clip-card);font-size:1.3rem;margin-bottom:18px;}
.sourceband-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px 34px;
  margin:0;
  padding:0;
  list-style:none;
}
.sourceband-list li{
  color:var(--clip-card);
  font-size:0.96rem;
  padding:8px 0;
  border-bottom:1px solid var(--tape-brown);
  background-color:var(--tape-brown);
  border-bottom-color:#A87B78;
}

/* ============ REVEAL ============ */
.reveal{
  -webkit-transform:translateY(18px);
  transform:translateY(18px);
  -webkit-transition:opacity 0.5s ease, transform 0.5s ease;
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-in{
  -webkit-transform:translateY(0);
  transform:translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .clipdesk-grid{grid-template-columns:1fr;gap:38px;}
  .clipdesk-title{font-size:2.5rem;}
  .clipdesk-display{font-size:3.2rem;}
  .contactgrid{grid-template-columns:1fr;gap:30px;}
  .sourceband-list{grid-template-columns:1fr 1fr;}
}

@media (max-width:720px){
  .mediarail-toggle{display:inline-block;}
  .mediarail-strip{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background-color:var(--dim-deep);
    padding:10px;
    border-bottom:4px solid var(--tape-brown);
  }
  .mediarail-strip.is-open{display:flex;}
  .mediarail-framemark{display:none;}
  .mediarail-segment{width:100%;border-bottom-width:2px;}
  .mediarail-inner{position:relative;justify-content:space-between;}
  .storydeck-row{grid-template-columns:1fr;}
  .storydeck-sprocket{
    padding:18px 20px;
    background-image:none;
    border-bottom:6px repeating-linear-gradient(90deg, var(--desk-silver) 0 4px, transparent 4px 12px);
  }
  .storydeck-sprocket::after{display:none;}
  .clipdesk-title{font-size:2.1rem;}
  .clipdesk-display{font-size:2.7rem;}
  .pagehead h1{font-size:2rem;}
  .presskit-links{line-height:1.9;}
  .sourceband-list{grid-template-columns:1fr;}
}

@media (max-width:420px){
  .clipdesk-display{font-size:2.2rem;}
  .clipdesk-cta{width:100%;}
}
